:root{
  --bg:oklch(0.16 0.018 285);--card:oklch(0.21 0.022 286);--fg:oklch(0.97 0.006 285);--fg-2:oklch(0.88 0.01 285);
  --text:oklch(0.82 0.02 286);--muted:oklch(0.73 0.02 286);--border:oklch(0.3 0.024 286);
  --primary:oklch(0.59 0.235 27);--primary-2:oklch(0.545 0.215 28);--ember:oklch(0.82 0.17 80);
  --pink:oklch(0.72 0.2 340);--orange:oklch(0.8 0.16 70);
  --display:'Bricolage Grotesque',system-ui,sans-serif;--body:'Plus Jakarta Sans',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);-webkit-font-smoothing:antialiased}
a{color:var(--ember)}
a:hover{color:var(--orange)}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
.wrap{width:100%;max-width:1100px;margin:0 auto;padding:0 24px}
header{background-color:var(--bg);background-image:radial-gradient(50rem 24rem at 10% -20%,color-mix(in oklab,var(--primary) 26%,transparent),transparent 60%);border-bottom:1px solid var(--border)}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:64px;height:39px;object-fit:contain}
.wordmark{font-family:var(--display);font-size:20px;font-weight:800;letter-spacing:-.03em;color:var(--fg)}
.wordmark .my{color:var(--pink)}.wordmark .lingo{color:var(--orange)}
.back{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:12px;background-image:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap}
.back:hover{color:#fff;filter:brightness(1.08)}
.hero{padding-top:56px;padding-bottom:40px}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
h1{font-family:var(--display);font-size:clamp(36px,5vw,56px);font-weight:800;letter-spacing:-.035em;line-height:1.02;margin:10px 0 14px}
.meta{font-size:14px;color:var(--muted)}
.layout{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start;padding-top:40px;padding-bottom:96px}
.toc{flex:0 1 260px;min-width:0;position:sticky;top:24px;padding:20px;border-radius:16px;background:var(--card);border:1px solid var(--border)}
.toc ol{margin:12px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:7px;font-size:13.5px}
.toc a{color:var(--fg-2);text-decoration:none}
.toc a:hover{color:var(--ember)}
article{flex:999 1 560px;min-width:0;max-width:760px}
.summary{padding:20px 22px;border-radius:16px;background-color:color-mix(in oklab,var(--ember) 10%,var(--card));box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--ember) 35%,transparent);margin-bottom:40px}
.summary h2{margin:0 0 10px;font-size:18px}
.summary ul{margin:0;padding-left:20px}
article h2{font-family:var(--display);font-size:24px;font-weight:700;letter-spacing:-.02em;margin:44px 0 12px;scroll-margin-top:24px}
article h3{font-size:16.5px;margin:24px 0 8px;color:var(--fg)}
article p,article li{font-size:15.5px;line-height:1.7;color:var(--text)}
article p{margin:0 0 14px}
article ul,article ol{margin:0 0 14px;padding-left:22px}
article li{margin-bottom:6px}
article strong{color:var(--fg-2)}
.table-wrap{overflow-x:auto;margin:0 0 18px;border:1px solid var(--border);border-radius:14px}
table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px}
th,td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--border);color:var(--text);line-height:1.55}
th{color:var(--fg);font-weight:700;background:var(--card)}
tr:last-child td{border-bottom:0}
.note{font-size:14px;color:var(--muted);border-top:1px solid var(--border);padding-top:20px;margin-top:40px}
footer{border-top:1px solid var(--border)}
footer .wrap{padding-top:28px;padding-bottom:36px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;font-size:13.5px;color:var(--muted)}
footer nav{display:flex;gap:22px}
footer a{color:var(--fg);text-decoration:none}
footer a:hover{color:var(--ember)}
@media (max-width:860px){.toc{position:static;flex-basis:100%}}
@media (max-width:420px){.wordmark{display:none}}