:root { color-scheme: dark; --panel: rgba(15,23,42,.78); --text:#e5eefb; --muted:#94a3b8; --line:rgba(148,163,184,.22); --accent:#7c3aed; --accent-2:#06b6d4; --shadow:0 30px 100px rgba(0,0,0,.45); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; background:radial-gradient(circle at top left, rgba(124,58,237,.35), transparent 34rem), radial-gradient(circle at 82% 8%, rgba(6,182,212,.24), transparent 30rem), linear-gradient(145deg,#05070d 0%,#111827 48%,#020617 100%); color:var(--text); }
body::before { content:""; position:fixed; inset:0; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(to bottom,black,transparent 78%); }
a { color:inherit; } .shell { width:min(1100px, calc(100% - 32px)); margin:0 auto; padding:34px 0 56px; position:relative; }
.nav { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:26px; } .brand { display:inline-flex; align-items:center; gap:10px; font-weight:950; letter-spacing:-.03em; text-decoration:none; } .mark { width:34px; height:34px; display:grid; place-items:center; border-radius:12px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); } .nav-links { display:flex; gap:10px; flex-wrap:wrap; }
.btn { border:1px solid var(--line); border-radius:999px; padding:10px 15px; background:rgba(255,255,255,.06); color:var(--text); cursor:pointer; font-weight:850; text-decoration:none; } .btn:hover { border-color:rgba(255,255,255,.42); } .btn.primary { background:linear-gradient(90deg,var(--accent),var(--accent-2)); border:0; }
.glass { border:1px solid var(--line); background:var(--panel); box-shadow:var(--shadow); backdrop-filter:blur(22px); border-radius:30px; } .hero { padding:clamp(26px,5vw,54px); margin-bottom:22px; } .eyebrow { display:inline-flex; padding:8px 12px; border:1px solid var(--line); border-radius:999px; color:#c4b5fd; background:rgba(124,58,237,.13); font-weight:800; font-size:13px; } h1 { font-size:clamp(38px,6vw,68px); line-height:.95; letter-spacing:-.055em; margin:20px 0; } h2 { margin:0; font-size:clamp(21px,3vw,30px); letter-spacing:-.03em; } p, li { color:var(--muted); line-height:1.65; } .lead { font-size:18px; max-width:82ch; } .gradient { background:linear-gradient(90deg,#c4b5fd,#67e8f9); -webkit-background-clip:text; background-clip:text; color:transparent; } .search-row { margin-top:22px; max-width:760px; } .search-row input { width:100%; border:1px solid var(--line); border-radius:18px; padding:15px 17px; background:rgba(2,6,23,.5); color:var(--text); font:inherit; font-weight:750; outline:none; } .search-row input:focus { border-color:rgba(103,232,249,.75); box-shadow:0 0 0 4px rgba(6,182,212,.14); } .search-row input::placeholder { color:#94a3b8; } .question-count { color:#bae6fd; font-weight:900; margin-top:14px; }
.qa-grid { display:grid; gap:18px; } .qa-card { padding:22px; } .qa-meta { display:inline-flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; color:#c4b5fd; font-weight:900; font-size:13px; text-transform:uppercase; letter-spacing:.04em; } .hint { margin:10px 0 16px; } .answer-list { display:grid; gap:10px; padding:0; margin:0; list-style:none; } .answer-item { border:1px solid var(--line); border-radius:18px; padding:14px 16px; background:rgba(255,255,255,.045); } .answer-label { color:#e5eefb; font-weight:850; line-height:1.45; } .answer-signals { color:#94a3b8; font-size:13px; margin-top:6px; overflow-wrap:anywhere; } mark { border-radius:6px; padding:1px 3px; background:linear-gradient(90deg, rgba(250,204,21,.95), rgba(45,212,191,.9)); color:#0f172a; font-weight:950; } .empty { margin-bottom:18px; padding:22px; color:#bae6fd; font-weight:900; }
.site-footer { margin-top:34px; padding:24px; display:grid; gap:16px; } .footer-top { display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:flex-start; } .footer-brand { font-weight:950; letter-spacing:-.03em; } .footer-text { color:var(--muted); line-height:1.55; max-width:62ch; margin:6px 0 0; } .footer-links { display:flex; flex-wrap:wrap; gap:10px 14px; } .footer-row { display:flex; flex-wrap:wrap; gap:10px 14px; } .footer-links a { color:#cbd5e1; text-decoration:none; font-weight:800; } .footer-links a:hover { color:#67e8f9; text-decoration:underline; } .footer-bottom { border-top:1px solid var(--line); padding-top:14px; color:var(--muted); font-size:13px; line-height:1.5; }
@media (max-width:860px) { .nav { align-items:flex-start; flex-direction:column; } }