/* Layout: fixed top bar (track picker, search, Concepts|Walkthroughs toggle at right),
   left rail of sections for the current track+mode, one section per page with prev/next. */
:root{
  --paper:#f5f4ef;
  --card:#ffffff;
  --ink:#15202e;
  --muted:#5b6575;
  --line:#dcd9cf;
  --navy:#1d3557;
  --gold:#a8873a;
  --gold-soft:#f6eed9;
  --accent:#1d5c8c;
  --accent-soft:#e3eef6;
  --good:#1f7a4a;
  --good-soft:#e2f3e8;
  --bad:#b3261e;
  --bad-soft:#fbe8e6;
  --font-display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --font-body:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --top:60px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#10151c; --card:#171e28; --ink:#e7ebf1; --muted:#9ba6b6; --line:#2a3442;
    --navy:#9fc0e6; --gold:#e0bd6a; --gold-soft:#332a14; --accent:#7cb8e8; --accent-soft:#18293a;
    --good:#62cf8f; --good-soft:#15301f; --bad:#ff8c82; --bad-soft:#3a1b19;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#10151c; --card:#171e28; --ink:#e7ebf1; --muted:#9ba6b6; --line:#2a3442;
  --navy:#9fc0e6; --gold:#e0bd6a; --gold-soft:#332a14; --accent:#7cb8e8; --accent-soft:#18293a;
  --good:#62cf8f; --good-soft:#15301f; --bad:#ff8c82; --bad-soft:#3a1b19;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.6}
a{color:var(--accent)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
button,select,input{font:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* Top bar */
.topbar{position:sticky;top:0;z-index:20;height:var(--top);display:flex;align-items:center;gap:14px;padding:0 18px;background:var(--card);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink)}
.brand-mark{font-family:var(--font-mono);font-weight:600;font-size:13px;background:var(--navy);color:var(--card);padding:3px 7px;border-radius:5px}
.brand-name{font-family:var(--font-display);font-weight:750;font-size:19px}
.track-pick select{appearance:none;-webkit-appearance:none;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235b6575'/%3E%3C/svg%3E") no-repeat right 10px center;border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:6px 30px 6px 12px;font-weight:600;cursor:pointer;max-width:320px}
.labs-link{font-weight:600;text-decoration:none;color:var(--muted);padding:6px 8px;border-radius:6px}
.labs-link:hover,.labs-link.active{color:var(--ink);background:var(--paper)}
.search{position:relative;flex:1;max-width:360px;margin-left:auto}
.search input{width:100%;padding:7px 12px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink)}
.search-results{position:absolute;top:42px;left:0;right:0;max-height:60vh;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.15);padding:6px}
.search-results a{display:block;padding:8px 10px;border-radius:6px;text-decoration:none;color:var(--ink)}
.search-results a:hover,.search-results a.sel{background:var(--accent-soft)}
.search-results .sr-meta{display:block;font-size:13px;color:var(--muted)}
.search-results .none{padding:10px;color:var(--muted);font-size:15px}
.mode-toggle{display:flex;border:1px solid var(--line);border-radius:999px;padding:3px;background:var(--paper)}
.mode-toggle button{border:0;background:transparent;color:var(--muted);font-weight:600;padding:6px 14px;border-radius:999px;cursor:pointer;white-space:nowrap}
.mode-toggle button[aria-pressed="true"]{background:var(--navy);color:var(--card)}
.menu-btn{display:none;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:8px;padding:6px 10px;font-weight:600}

/* Layout */
.layout{display:grid;grid-template-columns:290px minmax(0,1fr);min-height:calc(100% - var(--top))}
.sidebar{position:sticky;top:var(--top);align-self:start;height:calc(100vh - var(--top));overflow-y:auto;border-right:1px solid var(--line);padding:18px 14px 40px;display:flex;flex-direction:column;gap:4px;background:var(--paper)}
.side-h{font-family:var(--font-display);font-weight:750;font-size:18px;line-height:1.2;padding:0 8px}
.side-sub{font-size:14px;color:var(--muted);padding:2px 8px 10px}
.side-progress{font-family:var(--font-mono);font-size:12px;color:var(--muted);padding:0 8px 8px}
.side-progress .bar{height:4px;background:var(--line);border-radius:4px;margin-top:4px;overflow:hidden}
.side-progress .bar i{display:block;height:100%;background:var(--good)}
.sidebar a{display:flex;gap:8px;align-items:baseline;text-decoration:none;color:var(--ink);padding:6px 8px;border-radius:6px;font-size:15px;line-height:1.35;border-left:3px solid transparent}
.sidebar a:hover{background:var(--card)}
.sidebar a.active{background:var(--card);border-left-color:var(--gold);font-weight:600}
.sidebar a .num{font-family:var(--font-mono);font-size:12px;color:var(--muted);min-width:20px}
.sidebar a .done-dot{margin-left:auto;font-size:12px;color:var(--good)}
.side-empty{font-size:15px;color:var(--muted);padding:8px}

main{min-width:0;padding:36px 44px 90px;outline:none}
article{max-width:780px;display:flex;flex-direction:column;gap:16px}
article > *, .body > *, .callout > *{margin:0}
.crumbs{font-family:var(--font-mono);font-size:13px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{color:var(--muted);text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.18;text-wrap:balance;margin:0}
h1{font-size:36px;font-weight:750}
article h3{font-size:22px;font-weight:600;margin-top:14px}
article h4{font-size:18px;font-weight:600;margin-top:8px}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{font-family:var(--font-mono);font-size:12px;padding:2px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
.tag.lc{background:var(--gold-soft);color:var(--gold)}
.tag.level-Easy{background:var(--good-soft);color:var(--good)}
.tag.level-Medium{background:var(--gold-soft);color:var(--gold)}
.tag.level-Hard{background:var(--bad-soft);color:var(--bad)}
article p,article li{max-width:70ch}
article ul,article ol{padding-left:24px;margin:0}
article li+li{margin-top:4px}
article li > ul, article li > ol{margin-top:4px}
article code{font-family:var(--font-mono);font-size:.86em;background:var(--accent-soft);padding:1px 5px;border-radius:4px}
article pre{margin:0}
.hl{border-radius:8px;border:1px solid var(--line);overflow-x:auto}
.hl pre{padding:14px 16px;font-family:var(--font-mono);font-size:14px;line-height:1.55;margin:0}
.hl code{background:none;padding:0}
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums;width:100%}
th,td{border-bottom:1px solid var(--line);padding:7px 10px;text-align:left;vertical-align:top}
th{font-weight:700;color:var(--muted);font-size:14px;background:var(--card)}
blockquote{margin:0;border-left:4px solid var(--line);padding:4px 16px;color:var(--muted)}

/* Callouts */
.callout{border-radius:0 10px 10px 0;padding:12px 18px;border-left:4px solid var(--accent);background:var(--card);display:flex;flex-direction:column;gap:8px}
.callout > *{margin:0}
.callout-h{font-family:var(--font-display);font-weight:600;font-size:15px;letter-spacing:.02em;color:var(--accent)}
.callout.trap{border-left-color:var(--gold);background:var(--gold-soft)}
.callout.trap .callout-h{color:var(--gold)}
.callout.note{border-left-color:var(--muted)}
.callout.note .callout-h{color:var(--muted)}
.callout.try{border-left-color:var(--good);background:var(--good-soft)}
.callout.try .callout-h{color:var(--good)}

/* Walkthrough steps */
details.step{border:1px solid var(--line);border-radius:10px;background:var(--card)}
details.step > summary{cursor:pointer;padding:12px 16px;font-weight:700;list-style:none;display:flex;gap:10px;align-items:center}
details.step > summary::-webkit-details-marker{display:none}
details.step > summary::before{content:attr(data-n);font-family:var(--font-mono);font-size:12px;font-weight:600;min-width:26px;height:26px;display:inline-grid;place-items:center;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
details.step[open] > summary::before{background:var(--navy);color:var(--card)}
details.step > summary::after{content:"Show";margin-left:auto;font-size:13px;font-weight:600;color:var(--muted)}
details.step[open] > summary::after{content:"Hide"}
details.step > :not(summary){margin:0 16px 12px}
details.step[open]{padding-bottom:4px}
.walk-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn{border:1px solid var(--navy);background:var(--navy);color:var(--card);border-radius:8px;padding:7px 14px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block}
.btn.ghost{background:transparent;color:var(--navy)}
.btn.done{background:var(--good);border-color:var(--good)}

.pager{display:flex;justify-content:space-between;gap:12px;margin-top:28px;border-top:1px solid var(--line);padding-top:18px}
.pager a{flex:1;display:flex;flex-direction:column;text-decoration:none;color:var(--ink);padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);max-width:48%}
.pager a.next{text-align:right;margin-left:auto}
.pager small{color:var(--muted);font-size:13px}

/* Home */
.home{max-width:1060px;display:flex;flex-direction:column;gap:28px}
.home .lede{font-size:19px;color:var(--muted);max-width:68ch;margin:0}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.card{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.card:hover{border-color:var(--gold)}
.card .k{font-family:var(--font-mono);font-size:12px;color:var(--gold);font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.card h2{font-size:21px}
.card p{margin:0;font-size:15px;color:var(--muted)}
.card .counts{display:flex;gap:10px;font-family:var(--font-mono);font-size:12px;color:var(--muted);margin-top:auto}
.how{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.how div{border-top:3px solid var(--navy);padding-top:10px;font-size:15px}
.how b{display:block;font-family:var(--font-display);font-size:17px;margin-bottom:4px}
.intro-block{display:flex;flex-direction:column;gap:14px}
.labs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.lab-frame{width:100%;height:calc(100vh - var(--top) - 150px);min-height:520px;border:1px solid var(--line);border-radius:12px;background:var(--card)}

@media (max-width:980px){
  .brand-name{display:none}
  .search{max-width:none}
}
@media (max-width:820px){
  .topbar{height:auto;flex-wrap:wrap;padding:10px 14px;gap:10px}
  .topbar{position:relative}
  .search{order:5;flex-basis:100%;margin:0}
  .menu-btn{display:block;margin-left:auto}
  .mode-toggle{order:4}
  .layout{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:300px;height:auto;z-index:30;transform:translateX(-100%);transition:transform .2s;box-shadow:0 0 30px rgba(0,0,0,.2)}
  .sidebar.open{transform:none}
  main{padding:22px 16px 70px}
  h1{font-size:29px}
  .pager a{max-width:none}
}
@media (prefers-reduced-motion: reduce){ *{transition:none!important} }