:root { color-scheme: dark; --bg:#08101e; --card:#111d34; --line:#2a3d63; --ink:#f5f7ff; --muted:#a7b5d3; --accent:#91a8ff; --accent-ink:#101b36; --good:#68e1ad; --warn:#ffd57a; --bad:#ff99aa; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; background:radial-gradient(circle at 10% 0,#273d70 0,transparent 30rem),var(--bg); }
button,input,select { font:inherit; } button { border:0; border-radius:12px; padding:13px 16px; background:var(--accent); color:var(--accent-ink); cursor:pointer; font-weight:800; } button:hover { filter:brightness(1.08); } button:disabled { opacity:.55; cursor:wait; }
.page-shell { width:min(100% - 32px,1050px); margin:0 auto; padding:32px 0 64px; }.brand { display:flex; gap:10px; align-items:center; color:var(--muted); font-size:.75rem; font-weight:800; letter-spacing:.14em; }.brand a { color:#dce4ff; text-decoration:none; }.brand span { border-left:1px solid var(--line); padding-left:10px; }
.hero { max-width:720px; padding:72px 0 20px; }.eyebrow,.section-kicker { margin:0 0 10px; color:#aebeff; font-size:.78rem; font-weight:800; letter-spacing:.12em; }.hero h1,.lesson h1 { margin:0; font-size:clamp(2.25rem,6vw,4.5rem); line-height:1.02; }.lead { max-width:62ch; color:var(--muted); font-size:1.05rem; line-height:1.65; }.card { border:1px solid var(--line); border-radius:20px; background:rgba(17,29,52,.86); box-shadow:0 24px 70px rgba(0,0,0,.2); }.hero .card { margin-top:34px; padding:26px; }
label { display:block; margin:0 0 8px; font-weight:800; } input,select { width:100%; margin:0 0 8px; border:1px solid var(--line); border-radius:12px; padding:13px; color:var(--ink); background:#0a1428; }.hint,.privacy p { color:var(--muted); line-height:1.55; font-size:.92rem; }.turnstile { min-height:68px; margin:16px 0; }.message { min-height:24px; margin:14px 0 0; color:var(--muted); line-height:1.5; }.message.error { color:var(--bad); }.message.success { color:var(--good); }
.lesson { padding-top:40px; }.lesson-head { display:flex; justify-content:space-between; align-items:start; gap:20px; margin-bottom:28px; }.lesson h1 { font-size:clamp(2rem,5vw,3.4rem); }.quiet { background:transparent; border:1px solid var(--line); color:var(--ink); }.lesson-grid { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(240px,.8fr); gap:20px; }.practice-card,.privacy,.feedback { padding:26px; }.practice-card h2,.privacy h2,.feedback h2 { margin:0 0 22px; font-size:1.5rem; }.reference { margin:22px 0; font-size:clamp(1.35rem,3vw,2rem); line-height:1.4; font-weight:700; }.actions { display:flex; flex-wrap:wrap; gap:12px; }.secondary { background:#233456; color:#e5ecff; } audio { display:block; width:100%; margin-top:18px; }.feedback { margin-top:20px; }.score-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }.score { padding:14px; border:1px solid var(--line); border-radius:14px; background:#0b1529; }.score strong { display:block; margin-top:4px; font-size:1.6rem; }.score span { color:var(--muted); font-size:.82rem; }.transcript { color:var(--muted); font-style:italic; }.flagged { display:grid; gap:10px; margin:18px 0; }.flagged-word { border-left:3px solid var(--warn); padding:10px 12px; background:rgba(255,213,122,.08); border-radius:8px; }.flagged-word b { color:var(--warn); }.coaching { line-height:1.6; }
@media (max-width:700px) { .page-shell { width:min(100% - 24px,1050px); padding-top:24px; }.hero { padding-top:48px; }.hero .card,.practice-card,.privacy,.feedback { padding:20px; }.lesson-grid { grid-template-columns:1fr; }.score-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.lesson-head { align-items:center; }.lesson-head h1 { font-size:2.2rem; } }