:root{--bg:#f4f6f5;--surface:#fff;--surface-2:#eef2f0;--ink:#0f1a16;--ink-2:#33423c;--muted:#5f6e68;--border:#dde4e1;--brand:#0e7c58;--brand-strong:#0a6246;--brand-soft:#e1f2ea;--gold-soft:#fbf0d9;--felt-1:#17784f;--felt-2:#0c4a31;--fd:"Bricolage Grotesque","Figtree",system-ui,sans-serif;--fb:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:light}
@media (prefers-color-scheme:dark){:root{--bg:#0b1210;--surface:#121c18;--surface-2:#18241f;--ink:#e9f0ed;--ink-2:#c3cfca;--muted:#8fa099;--border:#23322c;--brand:#27b07e;--brand-strong:#1f946a;--brand-soft:#10291f;--gold-soft:#2a2312;color-scheme:dark}}
*{box-sizing:border-box}
.learn-page{margin:0;background:var(--bg);color:var(--ink);font-family:var(--fb);font-size:1.05rem;line-height:1.65}
.learn-page h1,.learn-page h2,.entry-static h1{font-family:var(--fd);letter-spacing:-.02em;line-height:1.15;text-wrap:balance;margin:0}
.learn-page h1{font-size:clamp(2rem,6vw,3rem);margin-bottom:12px}
.learn-page h2{font-size:1.5rem;margin:40px 0 12px}
.learn-page p,.learn-page ul,.learn-page ol{margin:0 0 14px}
.learn-page a{color:var(--brand-strong);text-underline-offset:3px}
.learn-page :focus-visible,.entry-static :focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.skip{position:absolute;left:-999px;top:8px;background:var(--surface);padding:8px 12px;z-index:20}
.skip:focus{left:8px}
.site-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px max(16px,calc((100% - 760px)/2));background:var(--surface);border-bottom:1px solid var(--border)}
.learn-page .brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--fd);font-weight:800;font-size:1.2rem;color:var(--ink);text-decoration:none}
.site-header nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.site-header nav a{padding:8px 12px;border-radius:10px;font-weight:600;color:var(--ink-2);text-decoration:none}
.site-header nav a:hover{background:var(--surface-2)}
.site-header nav a.cta{background:var(--brand);color:#fff}
main{max-width:760px;margin:0 auto;padding:28px 16px 48px}
.eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.lead{font-size:1.2rem;color:var(--ink-2)}
.meta{color:var(--muted);font-size:.9rem}
.hero{padding:28px 22px;border-radius:20px;background:linear-gradient(145deg,var(--felt-1),var(--felt-2));color:#fff}
.hero .eyebrow,.hero .lead{color:rgb(255 255 255/.85)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;font-size:.9rem;color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:6px}
.toc{padding:16px 20px;border:1px solid var(--border);border-radius:14px;background:var(--surface);margin:20px 0}
.toc ol{margin:8px 0 0;padding-left:20px}
.steps{padding-left:22px}
.steps li{margin-bottom:10px}
.callout,.note{padding:16px 18px;border-radius:14px;border-left:5px solid var(--brand);background:var(--brand-soft);margin:16px 0}
.note{background:var(--gold-soft);border-left-color:#b9821d;margin-top:40px}
.note h2{margin:0 0 8px;font-size:1.15rem}
.note p{margin:0}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.learn-page .btn{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--ink);font-weight:700;text-decoration:none}
.learn-page .btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.learn-page .hero .btn.primary{background:#fff;color:var(--felt-2)}
.guide-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));list-style:none;padding:0}
.guide-grid a{display:flex;flex-direction:column;gap:6px;height:100%;padding:16px;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--ink);text-decoration:none}
.guide-grid a:hover{border-color:var(--brand)}
.guide-grid span{color:var(--muted);font-size:.95rem}
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
.rank-table{width:100%;border-collapse:collapse;font-size:.95rem}
.rank-table caption{padding:10px 12px;text-align:left;color:var(--muted);font-size:.85rem}
.rank-table th,.rank-table td{padding:10px 12px;text-align:left;vertical-align:top;border-top:1px solid var(--border)}
.rank-table td:nth-child(3){min-width:220px}
.cards{font-family:ui-monospace,Menlo,monospace;font-weight:700;white-space:nowrap}
.site-footer{max-width:760px;margin:0 auto;padding:24px 16px 48px;border-top:1px solid var(--border);color:var(--muted);font-size:.9rem}
.site-footer nav{display:flex;flex-wrap:wrap;gap:6px 16px;margin-bottom:10px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Pre-JS entry content inside #root (scoped) */
.entry-static{min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:var(--bg);color:var(--ink);font-family:var(--fb);line-height:1.55}
.entry-static .entry-card{max-width:520px;padding:28px 24px;border:1px solid var(--border);border-radius:20px;background:var(--surface)}
.entry-static .entry-brand{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}
.entry-static h1{font-size:2rem;margin:6px 0 12px}
.entry-static p{margin:0 0 12px}
.entry-static ul{padding-left:20px;margin:0 0 14px}
.entry-static li{margin-bottom:8px}
.entry-static a{color:var(--brand-strong);font-weight:600}