:root{--text:#1a1a1a;--text-h:#000;--muted:#555;--bg:#fff;--panel:#fff;--soft:#f3f3f3;--border:#d8d8d8;--accent:#000;--shadow:#00000014 0 18px 40px -24px, #00000014 0 10px 18px -16px;--sans:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif;--heading:Georgia, "Times New Roman", serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (width<=1024px){:root{font-size:16px}}body{background:var(--bg);min-width:320px;margin:0}#root{box-sizing:border-box;width:min(1180px,100%);min-height:100svh;margin:0 auto}h1,h2,h3{font-family:var(--heading);color:var(--text-h);font-weight:700}h1{letter-spacing:-.04em;margin:0;font-size:clamp(2.8rem,5vw,4.8rem);line-height:1.02}@media (width<=1024px){h1{font-size:2.6rem}}h2{letter-spacing:-.02em;margin:0 0 8px;font-size:1.9rem;line-height:1.15}@media (width<=1024px){h2{font-size:1.5rem}}a,button,select{-webkit-tap-highlight-color:transparent}p{margin:0}*{box-sizing:border-box}button,select{font-family:inherit}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.app-shell{gap:24px;padding:28px;display:grid}.topbar{justify-content:space-between;align-items:center;gap:16px;display:flex}.brand-link,.nav-button{color:var(--text-h);font:inherit;background:0 0;border:0;text-decoration:none}.brand-link{cursor:pointer;font-size:1.2rem;font-weight:700;display:inline-flex}.topbar-nav{border:1px solid var(--border);box-shadow:var(--shadow);background:#fff;border-radius:999px;gap:8px;padding:6px;display:flex}.nav-button{cursor:pointer;border-radius:999px;padding:10px 16px;display:inline-flex}.nav-button-active{background:var(--accent);color:#fff}.hero-panel,.panel,.challenge-preview-card,.question-card,.stat-card{border:1px solid var(--border);background:var(--panel);box-shadow:var(--shadow);border-radius:28px}.hero-panel{background:var(--panel);grid-template-columns:1.3fr .9fr;gap:24px;padding:32px;display:grid}.home-hero{background:linear-gradient(135deg,#0f172af5,#1f2937eb),radial-gradient(circle at 20% 20%,#2cd4ff80,#0000 28%);border-color:#2660ff38;position:relative;overflow:hidden}.home-hero:before{content:"";pointer-events:none;background-color:#0000;background-image:linear-gradient(90deg,#ffffff14 1px,#0000 1px),linear-gradient(#ffffff14 1px,#0000 1px);background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:34px 34px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;position:absolute;inset:0;-webkit-mask-image:linear-gradient(120deg,#000000bf,#0000 70%);mask-image:linear-gradient(120deg,#000000bf,#0000 70%)}.home-hero>*{z-index:1;position:relative}.hero-copy{text-align:left;gap:18px;display:grid}.eyebrow,.panel-kicker{color:var(--accent);letter-spacing:.12em;text-transform:uppercase;margin:0;font-size:14px;font-weight:700}.home-eyebrow{color:#5eead4}.home-hero h1{color:#fff}.home-hero-text{color:#dbeafe;max-width:720px}.hero-text,.filters-summary,.question-prompt,.answer-status,.feature-list,.stat-label{color:var(--muted)}.hero-actions{flex-wrap:wrap;gap:12px;display:flex}.primary-action,.secondary-action,.option-button{font:inherit;border:1px solid #0000;border-radius:16px;transition:transform .2s,border-color .2s,background-color .2s}.primary-action,.secondary-action{cursor:pointer;padding:12px 18px;text-decoration:none}.primary-action{background:var(--accent);color:#fff}.home-primary-action{color:#04111d;background:linear-gradient(135deg,#22d3ee,#a78bfa);font-weight:800}.secondary-action{background:var(--soft);color:var(--text-h);border-color:var(--border)}.home-secondary-action{background:#ffffffe6;border-color:#ffffff8c}.home-chip-row{flex-wrap:wrap;gap:10px;display:flex}.home-chip-row span{color:#f8fafc;background:#ffffff1f;border:1px solid #ffffff38;border-radius:999px;padding:7px 11px;font-size:14px;font-weight:700;display:inline-flex}.home-hero-card{background:#ffffff1f;border:1px solid #ffffff38;border-radius:22px;align-self:center;gap:12px;padding:22px;display:grid}.home-hero-card p{color:#bfdbfe;text-transform:uppercase;letter-spacing:.08em;font-size:13px;font-weight:800}.home-hero-card span{color:#111827;background:#ffffffe6;border-radius:14px;padding:12px 14px;font-weight:800;display:block}.primary-action:hover,.secondary-action:hover,.option-button:hover{transform:translateY(-1px)}.hero-visual{background:var(--soft);border-radius:24px;place-items:center;min-height:260px;display:grid;position:relative;overflow:hidden}.hero-visual img{object-fit:contain;width:min(100%,260px);height:auto}.hero-badge{bottom:18px;color:#fff;background:#121212db;border-radius:999px;padding:10px 14px;font-size:14px;position:absolute;inset-inline-end:18px}.home-grid,.stats-grid,.question-grid,.challenge-grid,.challenge-list-grid,.component-grid,.guide-grid,.checkpoint-grid,.solution-grid{gap:18px;display:grid}.home-metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;display:grid}.home-metrics article{border:1px solid var(--border);box-shadow:var(--shadow);background:#fff;border-radius:22px;padding:20px}.home-metrics span{color:#2563eb;font-size:42px;font-weight:900;line-height:1;display:block}.home-metrics p{color:var(--muted);margin-top:8px;font-weight:700}.home-color-grid .home-panel{border:0}.panel-cyan{background:linear-gradient(135deg,#ecfeff,#eef2ff)}.panel-magenta{background:linear-gradient(135deg,#fff1f2,#f5f3ff)}.home-panel-text{color:#3f3f46}.verification-flow{border:1px solid var(--border);box-shadow:var(--shadow);text-align:left;background:linear-gradient(135deg,#f8fafc,#eff6ff);border-radius:28px;gap:18px;padding:24px;display:grid}.flow-lane{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;display:grid}.flow-lane span{color:#1e3a8a;text-align:center;background:#fff;border:1px solid #bfdbfe;border-radius:16px;place-items:center;min-height:64px;font-weight:800;display:grid;position:relative}.flow-lane span+span:before{content:"→";color:#2563eb;font-weight:900;position:absolute;left:-16px}.home-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stats-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.stat-card{text-align:left;padding:22px}.stat-value{color:var(--text-h);font-size:34px;font-weight:700;display:block}.dashboard-row{grid-template-columns:.82fr 1.18fr;gap:18px;display:grid}.practice-header{justify-content:space-between;align-items:end;gap:20px;display:flex}.practice-title{font-size:clamp(2.2rem,4vw,3.4rem)}.challenge-title{max-width:880px;font-size:clamp(2rem,4vw,3.4rem)}.challenge-panel{border:1px solid var(--border);background:var(--panel);box-shadow:var(--shadow);text-align:left;border-radius:28px;padding:28px}.challenge-header{justify-content:space-between;align-items:start;gap:16px;display:flex}.challenge-meta{flex-wrap:wrap;gap:10px;display:flex}.challenge-summary,.challenge-question{max-width:900px}.challenge-question{color:var(--text-h);margin-top:10px;font-weight:600}.challenge-actions{margin-top:20px}.question-bank-actions{margin-top:18px}.challenge-grid,.challenge-list-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:20px}.component-section{gap:18px;margin-top:24px;display:grid}.component-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.guide-section{gap:18px;margin-top:24px;display:grid}.guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.checkpoint-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.checkpoint-card{border:1px solid var(--border);background:#fff;border-radius:18px;padding:18px}.checkpoint-card h3{margin:0 0 8px;font-size:20px}.checkpoint-card p{color:var(--muted)}.challenge-preview-card{text-align:left;gap:14px;padding:22px;display:grid}.challenge-preview-card h3{color:var(--text-h);margin:0;font-size:24px}.solution-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:20px}.challenge-card{border:1px solid var(--border);background:#fff;border-radius:22px;padding:22px}.challenge-card h3{color:var(--text-h);margin:0 0 14px;font-size:22px}.code-block{color:#f7f0e8;font:14px/1.5 var(--mono);background:#1f1b18;border-radius:18px;margin:0;padding:16px;overflow:auto}.challenge-list{margin-top:0}.challenge-answer{align-content:start;gap:16px;display:grid}.challenge-link{justify-self:start}.eda-card{gap:4px;margin-top:20px;display:grid}.answer-card{gap:14px}.answer-note{color:var(--muted);margin-top:12px}.answer-note strong{color:var(--text-h)}.inline-signal{border:1px solid var(--border);background:var(--soft);color:var(--text-h);font-family:var(--mono);white-space:nowrap;border-radius:6px;align-items:center;padding:1px 6px;font-size:.92em;font-weight:700;display:inline-flex}.signal-role-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.signal-role{border:1px solid var(--border);background:var(--soft);border-radius:14px;padding:14px}.signal-role span{color:var(--text-h);font-family:var(--mono);margin-bottom:6px;font-weight:700;display:block}.signal-role p{color:var(--muted)}.waveform-card{overflow:hidden}.waveform-table{border:1px solid var(--border);border-radius:14px;display:grid;overflow-x:auto}.waveform-row{grid-template-columns:80px 120px repeat(6,minmax(82px,1fr));min-width:760px;display:grid}.waveform-row span{border-bottom:1px solid var(--border);border-right:1px solid var(--border);color:var(--text);font-family:var(--mono);padding:10px;font-size:14px}.waveform-row span:last-child{border-right:0}.waveform-row:last-child span{border-bottom:0}.waveform-head span{background:var(--soft);color:var(--text-h);font-family:var(--sans);font-weight:700}.reveal-card{margin-top:24px}.reveal-code-block{max-height:640px;margin-top:18px}.code-card{min-width:0}.tall-code-block{max-height:520px}.component-code-block{max-height:360px;margin-top:14px}.full-code-grid{margin-top:24px}.panel{text-align:left;padding:24px}.feature-list{margin:18px 0 0;padding-inline-start:20px}.feature-list li+li{margin-top:10px}.filters-header{justify-content:space-between;align-items:end;gap:16px;display:flex}.filters-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:20px;display:grid}.filter-field{color:var(--text-h);gap:8px;font-weight:600;display:grid}.filter-field select{border:1px solid var(--border);background:var(--soft);color:var(--text-h);font:inherit;border-radius:14px;padding:12px 14px}.question-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.question-card{text-align:left;gap:16px;padding:24px;display:grid}.question-card h3{color:var(--text-h);margin:0;font-size:24px}.question-meta{flex-wrap:wrap;gap:10px;display:flex}.pill{background:var(--soft);color:var(--text-h);border-radius:999px;align-items:center;padding:6px 12px;font-size:14px;font-weight:600;display:inline-flex}.difficulty-easy{background:#f5f5f5}.difficulty-medium{background:#e8e8e8}.difficulty-hard{background:#dcdcdc}.options-list{gap:10px;display:grid}.option-button{text-align:left;width:100%;color:var(--text-h);border-color:var(--border);cursor:pointer;background:#fff;padding:14px 16px}.option-selected{background:#f0f0f0;border-color:#777}.option-correct{color:#0b6b28;background:#e8f7ed;border-color:#138a36}.option-wrong{color:#9f1d1d;background:#fdecec;border-color:#c62828}.answer-status{min-height:48px;font-weight:500}.answer-status-idle{color:var(--muted)}.answer-status-correct{color:#138a36}.answer-status-wrong{color:#c62828}@media (width<=1024px){.app-shell{padding:18px}.hero-panel,.home-grid,.home-metrics,.dashboard-row,.stats-grid,.question-grid,.challenge-grid,.challenge-list-grid,.component-grid,.guide-grid,.checkpoint-grid,.solution-grid,.signal-role-grid,.filters-row,.flow-lane{grid-template-columns:1fr}.flow-lane span+span:before{content:"↓";top:-24px;left:50%;transform:translate(-50%)}.hero-panel{padding:22px}.topbar,.practice-header{flex-direction:column;align-items:stretch}.topbar-nav{justify-content:center}.challenge-panel{padding:22px}.challenge-header{flex-direction:column}.filters-header{flex-direction:column;align-items:start}}
