:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --page:#07120f; --panel:#0c1c17; --panel-2:#10241d; --line:#25453b; --ink:#f4f8f5; --muted:#91a69e; --blue:#69a4ff; --lime:#c8ff4f; --gold:#ffbf5b; --red:#ff8585; }
* { box-sizing: border-box; }
body { min-height:100vh; margin:0; background:radial-gradient(circle at 75% -10%, rgba(105,164,255,.09), transparent 30%), var(--page); color:var(--ink); }
button,a { font:inherit; }
.public-header { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:18px clamp(20px,4vw,64px); border-bottom:1px solid var(--line); background:rgba(7,18,15,.82); backdrop-filter:blur(12px); }
.brand { display:flex; gap:11px; align-items:center; color:var(--ink); font-size:.78rem; font-weight:900; letter-spacing:.16em; text-decoration:none; }.brand img { width:34px; height:34px; border-radius:8px; }
.header-stats { display:flex; gap:8px; }.header-stats > span { min-width:90px; padding:8px 12px; border:1px solid var(--line); border-radius:10px; background:var(--panel); }.header-stats small,.header-stats strong { display:block; }.header-stats small { color:var(--muted); font-size:.6rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.header-stats strong { margin-top:2px; color:var(--lime); }
main { width:calc(100% - clamp(40px,6vw,120px)); margin:0 auto; padding:44px 0 60px; }
.challenge-heading { display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:40px; align-items:end; margin-bottom:26px; }.eyebrow { color:var(--lime); font-size:.7rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }.challenge-heading h1 { max-width:1000px; margin:8px 0 10px; font-size:clamp(2.3rem,5vw,5rem); line-height:1.02; letter-spacing:-.045em; }.challenge-heading p { margin:0; color:var(--muted); font-size:clamp(.95rem,1.5vw,1.2rem); line-height:1.6; }
.day-card { padding:18px; border:1px solid var(--line); border-radius:15px; background:var(--panel); }.day-card span,.day-card strong,.day-card small { display:block; }.day-card span { color:var(--muted); font-size:.68rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }.day-card strong { margin:5px 0; font-size:1.45rem; }.day-card small { color:var(--muted); }
.chart-card { overflow:hidden; border:1px solid var(--line); border-radius:24px; background:#081813; box-shadow:0 30px 80px rgba(0,0,0,.28); }.chart-meta { display:flex; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--line); }.chart-meta span,.chart-meta b { font-size:.7rem; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }.chart-meta span { color:var(--muted); }.chart-meta b { color:var(--gold); }
#structureChart { display:block; width:100%; min-height:430px; }.chart-grid { fill:none; stroke:#17332a; stroke-width:1; }#structureLine { fill:none; stroke:var(--blue); stroke-width:7; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 9px rgba(105,164,255,.12)); }#structureMarkers circle { fill:#081813; stroke:var(--blue); stroke-width:6; }.structure-labels { opacity:0; transition:opacity .35s ease; }.structure-labels.revealed { opacity:1; }.structure-labels text { fill:var(--lime); font-size:13px; font-weight:900; paint-order:stroke; stroke:#081813; stroke-width:5px; }
.answer-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:18px; }.answer-grid button { display:flex; gap:14px; align-items:center; min-height:76px; padding:17px 20px; border:1px solid var(--line); border-radius:15px; background:var(--panel); color:var(--ink); font-size:1rem; font-weight:750; text-align:left; cursor:pointer; transition:transform .15s ease,border-color .15s ease,background .15s ease; }.answer-grid button:hover:not(:disabled) { border-color:#5c8f7d; background:var(--panel-2); transform:translateY(-2px); }.answer-grid button span { display:grid; flex:0 0 34px; height:34px; place-items:center; border-radius:9px; background:#07130f; color:var(--muted); font-size:.74rem; }.answer-grid button.correct { border-color:rgba(200,255,79,.65); background:rgba(200,255,79,.1); }.answer-grid button.wrong { border-color:rgba(255,133,133,.65); background:rgba(255,133,133,.08); }.answer-grid button:disabled { cursor:default; }
.feedback { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:18px; align-items:center; margin-top:18px; padding:22px; border:1px solid var(--line); border-radius:17px; background:var(--panel); }.feedback.hidden { display:none; }.feedback-icon { display:grid; width:52px; height:52px; place-items:center; border-radius:50%; background:var(--lime); color:#10200e; font-size:1.5rem; font-weight:900; }.feedback.wrong .feedback-icon { background:var(--red); }.feedback span { color:var(--lime); font-size:.68rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }.feedback.wrong span { color:var(--red); }.feedback h2 { margin:4px 0; font-size:1.3rem; }.feedback p { margin:0; color:var(--muted); line-height:1.55; }.feedback button { padding:11px 15px; border:1px solid var(--line); border-radius:10px; background:var(--panel-2); color:var(--ink); font-weight:800; cursor:pointer; }
.education-note { margin:24px 0 0; color:#668078; font-size:.72rem; text-align:center; }
#confettiCanvas { position:fixed; inset:0; z-index:20; width:100%; height:100%; pointer-events:none; }
.creator-preview .header-stats { display:none; }
.preview-heading { display:flex; justify-content:space-between; gap:32px; align-items:end; margin-bottom:28px; }.preview-heading h1 { margin:7px 0 8px; font-size:clamp(2.2rem,4vw,4.4rem); line-height:1; letter-spacing:-.045em; }.preview-heading p { margin:0; color:var(--muted); }.preview-back { flex:0 0 auto; padding:12px 16px; border:1px solid var(--line); border-radius:11px; background:var(--panel); color:var(--ink); font-weight:800; text-decoration:none; }
.question-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }.preview-card { overflow:hidden; border:1px solid var(--line); border-radius:19px; background:var(--panel); }.preview-card header { display:flex; justify-content:space-between; gap:18px; align-items:start; padding:18px 20px 8px; }.preview-card header span,.preview-card header b { color:var(--gold); font-size:.65rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }.preview-card h2 { margin:5px 0 0; font-size:1.3rem; }.preview-card > p { min-height:42px; margin:0; padding:0 20px 14px; color:var(--muted); line-height:1.45; }.preview-card svg { display:block; width:100%; border-block:1px solid var(--line); background:#081813; }.preview-card polyline { fill:none; stroke:var(--blue); stroke-width:7; stroke-linecap:round; stroke-linejoin:round; }.preview-markers circle { fill:#081813; stroke:var(--blue); stroke-width:6; }.preview-answer { display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:start; padding:18px 20px; }.preview-answer strong { padding:7px 10px; border-radius:8px; background:rgba(200,255,79,.12); color:var(--lime); }.preview-answer span { color:var(--muted); font-size:.88rem; line-height:1.5; }
@media (max-width:900px) { .question-gallery { grid-template-columns:1fr; } }
@media (max-width:760px) { main { width:calc(100% - 24px); padding-top:26px; }.challenge-heading { grid-template-columns:1fr; gap:18px; }.day-card { display:none; }.answer-grid { grid-template-columns:1fr; }.feedback { grid-template-columns:auto 1fr; }.feedback button { grid-column:1/-1; }.header-stats > span { min-width:72px; }.public-header { padding:14px 16px; }.brand span { display:none; }#structureChart { min-height:300px; }.challenge-heading h1 { font-size:2.45rem; }.preview-heading { display:block; }.preview-heading .preview-back { display:inline-block; margin-top:18px; }.preview-answer { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }#confettiCanvas { display:none; } }