:root {
  --bg: #070808;
  --surface: #0d0f10;
  --surface-2: #121516;
  --border: rgba(255,255,255,.09);
  --border-strong: rgba(239,68,68,.28);
  --text: #f4f4f5;
  --muted: #a1a1aa;
  --dim: #8b8b93;
  --red: #ef4444;
  --red-strong: #dc2626;
  --red-soft: rgba(239,68,68,.10);
  --green-soft: rgba(239,68,68,.07);
  --radius: 14px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }
button, input { font: inherit; }
button { color: inherit; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 240px; background: #090a0a; border-right: 1px solid var(--border); padding: 20px 14px; display: flex; flex-direction: column; z-index: 20; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 22px; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--red); color: #fff; font-weight: 800; }
.brand strong { display:block; font-size: 14px; }
.brand span { display:block; color: var(--dim); font-size: 11px; margin-top: 2px; }
.nav { display: grid; gap: 5px; }
.nav-item { border: 1px solid transparent; background: transparent; text-align: left; padding: 10px 11px; border-radius: 9px; color: var(--muted); cursor: pointer; font-size: 13px; }
.nav-item:hover { color: var(--text); background: rgba(255,255,255,.035); }
.nav-item.active { color: var(--text); background: var(--red-soft); border-color: rgba(239,68,68,.18); }
.sidebar-note { margin-top: auto; padding: 13px; border: 1px solid var(--border); background: var(--surface); border-radius: 12px; }
.sidebar-note strong { display:block; margin: 5px 0 7px; font-size: 12px; line-height: 1.35; }
.sidebar-note p { margin:0; font-size:11px; line-height:1.5; color:var(--muted); }
.eyebrow { color: var(--dim); letter-spacing: .12em; text-transform: uppercase; font-size: 10px; font-weight: 700; }
.main { margin-left: 240px; min-height: 100vh; }
.topbar { position: sticky; top:0; z-index:10; min-height: 74px; display:flex; align-items:center; gap: 20px; padding: 14px 28px; border-bottom:1px solid var(--border); background: rgba(7,8,8,.94); backdrop-filter: blur(14px); }
h1 { margin:3px 0 0; font-size: 21px; letter-spacing:-.02em; }
.search { margin-left:auto; width: min(420px, 40vw); height: 39px; border:1px solid var(--border); background:var(--surface); border-radius:10px; display:flex; align-items:center; gap:8px; padding:0 11px; }
.search span { color:var(--dim); font-size:18px; }
.search input { flex:1; border:0; outline:none; background:transparent; color:var(--text); font-size:12px; }
.search input::placeholder { color:#666970; }
.mobile-menu { display:none; background:transparent; border:1px solid var(--border); border-radius:9px; width:38px; height:38px; }
.content { max-width: 1200px; margin: 0 auto; padding: 24px 28px 10px; }
.content.hidden { display:none; }
.hero { min-height: 205px; border:1px solid var(--border); border-radius: 16px; background: linear-gradient(130deg, #0d0f10 0%, #100b0c 68%, #150c0d 100%); padding: 25px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
h2 { margin: 5px 0 8px; font-size: clamp(25px, 3vw, 36px); line-height:1.04; letter-spacing:-.035em; max-width: 680px; }
.hero p { max-width: 670px; margin:0; color:var(--muted); font-size:13px; line-height:1.6; }
.hero-stat { width: 220px; padding: 14px; border:1px solid var(--border-strong); background:rgba(239,68,68,.06); border-radius:12px; }
.hero-stat span,.hero-stat small { color:var(--muted); display:block; font-size:11px; }
.hero-stat strong { display:block; font-size:15px; margin:7px 0; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:12px 0; }
.stat { border:1px solid var(--border); background:var(--surface); border-radius:12px; padding:14px; min-height:94px; }
.stat span,.stat small { display:block; color:var(--dim); font-size:10px; }
.stat strong { display:block; margin:8px 0 5px; font-size:15px; }
.grid.two { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.panel { border:1px solid var(--border); background:var(--surface); border-radius:14px; padding:17px; margin-bottom:12px; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:13px; }
h3 { margin:0; font-size:15px; }
.chip { display:inline-flex; align-items:center; min-height:22px; padding:0 8px; border-radius:6px; background:#17191a; border:1px solid var(--border); color:var(--dim); font-size:9px; font-weight:800; letter-spacing:.08em; }
.chip.red { background:var(--red-soft); border-color:rgba(239,68,68,.24); color:#fca5a5; }
.muted { color:var(--muted); font-size:11px; }
.rule-block { display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center; padding:13px 0; border-top:1px solid var(--border); }
.rule-block p { margin:7px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }
code { color:#fecaca; background:#171112; border:1px solid rgba(239,68,68,.14); padding:9px 11px; border-radius:8px; font-size:11px; line-height:1.5; }
.tag { display:inline-flex; padding:5px 7px; border-radius:6px; font-size:9px; letter-spacing:.08em; font-weight:800; }
.tag.simple { color:#fca5a5; background:var(--red-soft); }
.tag.continuous { color:#fecaca; background:rgba(220,38,38,.12); }
.watch-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.watch-grid div { padding:11px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); }
.watch-grid strong,.watch-grid span { display:block; }
.watch-grid strong { font-size:11px; }
.watch-grid span { color:var(--muted); font-size:10px; margin-top:5px; }
.timeline { display:grid; gap:7px; }
.timeline-item { display:grid; grid-template-columns:30px 1fr; gap:10px; padding:10px 0; border-top:1px solid var(--border); }
.timeline-item > span { width:30px; height:30px; display:grid; place-items:center; border-radius:8px; background:var(--red-soft); border:1px solid rgba(239,68,68,.16); color:#fca5a5; font-size:10px; font-weight:800; }
.timeline-item strong { font-size:12px; }
.timeline-item p { margin:4px 0 0; color:var(--muted); font-size:11px; line-height:1.5; }
.section-title { display:flex; justify-content:space-between; align-items:end; gap:15px; margin-bottom:12px; }
.section-title h2 { font-size:28px; margin-top:4px; }
.formula { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid var(--border); }
.formula span { color:var(--dim); font-size:10px; }
.examples { margin-top:13px; padding:12px; border-radius:10px; background:var(--surface-2); }
.examples p { margin:5px 0; color:var(--muted); font-size:11px; line-height:1.55; }
.compare { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.compare > div { padding:14px; border:1px solid var(--border); background:var(--surface-2); border-radius:11px; }
.compare strong { display:block; font-size:13px; line-height:1.45; margin:9px 0 4px; }
.compare p { margin:0; color:var(--muted); font-size:10px; }
.vocab-grid,.phrase-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.vocab-card,.phrase-card { border:1px solid var(--border); background:var(--surface); border-radius:12px; padding:14px; }
.vocab-card strong { font-size:12px; display:block; }
.vocab-card span { display:block; color:#fca5a5; font-size:11px; margin-top:4px; }
.vocab-card p { margin:8px 0 0; color:var(--muted); font-size:10px; line-height:1.45; }
.mistake-list { display:grid; gap:9px; }
.mistake { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:stretch; }
.mistake > div { border:1px solid var(--border); background:var(--surface); border-radius:11px; padding:12px; }
.mistake .bad { border-color:rgba(239,68,68,.15); }
.mistake .good { border-color:rgba(239,68,68,.25); background:rgba(239,68,68,.04); }
.mistake small { display:block; color:var(--dim); font-size:9px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px; }
.mistake code { display:inline-block; }
.mistake p { margin:7px 0 0; color:var(--muted); font-size:10px; }
.phrase-card strong { font-size:12px; }
.phrase-card p { margin:6px 0 0; color:var(--muted); font-size:10px; }
.speaking-card { padding:20px; }
.prompt h3 { font-size:18px; line-height:1.45; max-width:830px; margin-top:10px; }
.answer-box { margin-top:16px; padding:14px; border-radius:10px; background:var(--surface-2); border:1px solid var(--border); }
.answer-box p { margin:6px 0 0; color:#ddd; font-size:12px; line-height:1.65; }
.feedback { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.feedback > div { padding:11px; border:1px solid var(--border); border-radius:10px; }
.feedback strong,.feedback span { display:block; }
.feedback strong { font-size:10px; color:#fca5a5; }
.feedback span { font-size:10px; color:var(--muted); margin-top:4px; line-height:1.45; }
.progress-flow { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:5px 0 12px; }
.progress-flow span { padding:7px 10px; border:1px solid var(--border); background:var(--surface-2); border-radius:7px; font-size:10px; }
.progress-flow i { color:var(--red); font-style:normal; }
footer { max-width:1200px; margin:0 auto; padding:20px 28px 28px; display:flex; justify-content:space-between; color:#62646b; font-size:10px; }
.scrim { display:none; }
@media (max-width: 1000px) { .sidebar { width:210px; } .main { margin-left:210px; } .stats { grid-template-columns:repeat(2,1fr); } .vocab-grid,.phrase-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 760px) { .sidebar { transform:translateX(-100%); transition:transform .2s ease; width:250px; } .sidebar.open { transform:translateX(0); } .main { margin-left:0; } .mobile-menu { display:block; } .search { width: 42px; overflow:hidden; padding:0 10px; } .search input { width:0; } .hero { align-items:flex-start; flex-direction:column; min-height:auto; } .hero-stat { width:100%; } .grid.two,.compare,.feedback,.mistake { grid-template-columns:1fr; } .vocab-grid,.phrase-grid { grid-template-columns:1fr; } .content { padding:18px 14px; } .topbar { padding:11px 14px; } footer { padding:18px 14px 25px; flex-direction:column; gap:5px; } .scrim.active { display:block; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:15; } h2 { font-size:27px; } }