:root { color-scheme: light dark; --bg:#f7f7f4; --panel:#fff; --text:#20221f; --muted:#656b63; --line:#d9ddd5; --accent:#075f4e; --accent2:#e4f2ed; --code:#17211e; --codeText:#f2f7f4; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); line-height:1.6; }
a { color:var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline:3px solid #ef9f1a; outline-offset:3px; }
.skip-link { position:absolute; left:-999px; top:0; background:var(--panel); padding:.75rem; z-index:20; }
.skip-link:focus { left:.75rem; }
.shell { display:grid; grid-template-columns:18rem minmax(0, 1fr); min-height:100vh; }
.sidebar { border-right:1px solid var(--line); background:var(--panel); padding:1.25rem; position:sticky; top:0; height:100vh; overflow:auto; }
.brand { font-weight:800; font-size:1.15rem; text-decoration:none; color:var(--text); }
.tagline { color:var(--muted); font-size:.9rem; margin:.25rem 0 1rem; }
.search { width:100%; border:1px solid var(--line); border-radius:.5rem; padding:.7rem; font:inherit; background:var(--bg); color:var(--text); }
.search-results { padding:0; list-style:none; font-size:.9rem; }
.search-results li { margin:.6rem 0; }
.lesson-nav { list-style:none; padding:0; margin-top:1.25rem; }
.lesson-nav a { display:block; padding:.45rem .55rem; border-radius:.4rem; text-decoration:none; }
.lesson-nav a[aria-current="page"] { background:var(--accent2); color:#06463b; font-weight:700; }
.main { min-width:0; }
.topbar { display:none; padding:.75rem 1rem; border-bottom:1px solid var(--line); background:var(--panel); }
.menu-button, button { font:inherit; cursor:pointer; }
.content { max-width:54rem; margin:0 auto; padding:3rem 2rem 5rem; }
.meta, .notice, blockquote { border:1px solid var(--line); border-radius:.75rem; padding:1rem; background:var(--panel); }
.meta { display:grid; gap:.5rem; grid-template-columns:repeat(auto-fit,minmax(12rem,1fr)); font-size:.9rem; color:var(--muted); }
.notice, blockquote { border-left:5px solid #c87a00; margin-left:0; }
blockquote > :first-child { margin-top:0; } blockquote > :last-child { margin-bottom:0; }
table { display:block; max-width:100%; overflow-x:auto; border-collapse:collapse; }
th,td { border:1px solid var(--line); padding:.55rem .7rem; text-align:left; vertical-align:top; }
h1,h2,h3 { line-height:1.2; }
h1 { font-size:clamp(2rem,5vw,3.25rem); letter-spacing:-.03em; }
h2 { margin-top:2.4rem; }
pre { position:relative; padding:1rem; overflow:auto; border-radius:.65rem; background:var(--code); color:var(--codeText); }
code { font-family:"SFMono-Regular",Consolas,monospace; }
:not(pre)>code { background:var(--accent2); color:var(--text); padding:.1rem .3rem; border-radius:.25rem; }
.copy-code { position:absolute; right:.5rem; top:.5rem; padding:.35rem .55rem; }
.help-box { margin-top:3rem; display:grid; gap:.8rem; }
.help-box textarea { width:100%; min-height:6rem; padding:.7rem; font:inherit; }
.actions { display:flex; flex-wrap:wrap; gap:.6rem; }
button,.button { border:1px solid var(--accent); background:var(--accent); color:white; padding:.6rem .85rem; border-radius:.5rem; text-decoration:none; }
button.secondary,.button.secondary { background:transparent; color:var(--accent); }
.pager { display:flex; justify-content:space-between; gap:1rem; margin-top:3rem; border-top:1px solid var(--line); padding-top:1rem; }
.backlinks { margin-top:2rem; }
footer { color:var(--muted); font-size:.85rem; margin-top:3rem; }
@media (max-width:760px) { .shell { display:block; } .sidebar { display:none; position:fixed; z-index:10; inset:3.3rem 0 0; height:auto; } .sidebar.open { display:block; } .topbar { display:flex; position:sticky; top:0; z-index:11; align-items:center; justify-content:space-between; } .content { padding:2rem 1rem 4rem; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@media (prefers-color-scheme:dark) { :root { --bg:#121614; --panel:#1b211e; --text:#edf2ee; --muted:#abb5ae; --line:#364039; --accent:#74d7bc; --accent2:#243b34; } .lesson-nav a[aria-current="page"] { color:#b8f2df; } }