/* ── DESIGN TOKENS ── */
:root {
--muted:var(--ink-muted);
    --rule:var(--border-mid);
    --accent:var(--teal-500);
    --accent-ink:var(--teal-800);
    --code-bg:var(--teal-950);
    --code-ink:var(--teal-50);
    --code-accent:var(--teal-300);
    --code-key:var(--teal-400);
    --code-str:var(--teal-200);
    --sidebar-bg:var(--teal-950);
    --sidebar-ink:var(--teal-100);
    --sidebar-ink-dim:#3f7a68;
    --sidebar-active:var(--teal-50);
    --good:var(--teal-600);
} 

*{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font-body);
    line-height:1.65;
  }

  .layout{
    display:grid;
    grid-template-columns:280px 1fr;
    min-height:100vh;
  }

  /* ---------- BREADCRUMB ---------- */
  ul.breadcrumb {
    padding: 10px 16px;
    list-style: none;
    background: var(--teal-50);
    border: 1px solid var(--border-mid);
    border-radius: 8px;
    margin: 0 0 32px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  ul.breadcrumb li { display: inline; font-size: 13.5px; }
  ul.breadcrumb li + li::before {
    padding: 0 10px;
    color: var(--teal-500);
    content: "/\00a0";
    font-family: var(--font-mono);
  }
  ul.breadcrumb li a {
    color: var(--teal-700);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: .02em;
  }
  ul.breadcrumb li a:hover { color: var(--accent); text-decoration: underline; }
  ul.breadcrumb li.current a { color: var(--teal-900); font-weight: 700; }
  ul.breadcrumb li.upcoming span {
    color: var(--ink-faint);
    font-family: var(--font-mono);
    font-size: 12.5px;
    cursor: default;
  }
  /* ---------- SIDEBAR ---------- */
  .sidebar{
    background:var(--sidebar-bg);
    color:var(--sidebar-ink);
    padding:28px 0 40px;
    position:sticky;
    top:0;
    height:100vh;
    overflow-y:auto;
  }
  .sidebar::-webkit-scrollbar{width:8px;}
  .sidebar::-webkit-scrollbar-thumb{background:var(--teal-800);border-radius:4px;}

  .sidebar-head{
    padding:0 24px 20px;
    border-bottom:1px solid rgba(31,207,150,0.16);
    margin-bottom:14px;
  }
  .sidebar-head .unit-tag{
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.12em;
    color:var(--accent);
    text-transform:uppercase;
  }
  .sidebar-head h1{
    font-family:var(--font-display);
    font-size:20px;
    font-weight:600;
    margin:6px 0 4px;
    color:var(--teal-50);
  }
  .sidebar-head p{
    margin:0;
    font-size:12.5px;
    color:var(--sidebar-ink-dim);
  }

  .toc{list-style:none;margin:0;padding:0 12px;}
  .toc li{margin:1px 0;}
  .toc a{
    display:flex;
    gap:10px;
    align-items:baseline;
    padding:7px 12px;
    border-radius:6px;
    color:var(--sidebar-ink);
    text-decoration:none;
    font-size:13.5px;
    transition:background .25s var(--ease-spring), color .25s var(--ease-spring);
  }
  .toc a .num{
    font-family:var(--font-mono);
    font-size:11.5px;
    color:var(--sidebar-ink-dim);
    min-width:30px;
  }
  .toc a:hover{background:var(--teal-900); color:#fff;}
  .toc a.active{
    background:var(--teal-900);
    color:var(--sidebar-active);
    box-shadow:inset 3px 0 0 var(--accent);
  }
  .toc a.active .num{color:var(--accent);}

  /* ---------- MAIN CONTENT ---------- */
  main{
    padding:56px 64px 120px;
    max-width:860px;
  }

  .doc-head{margin-bottom:56px;}
  .doc-head .eyebrow{
    font-family:var(--font-mono);
    font-size:12px;
    color:var(--accent-ink);
    letter-spacing:.1em;
    text-transform:uppercase;
  }
  .doc-head h1{
    font-family:var(--font-script);
    font-style:italic;
    font-weight:700;
    font-size:44px;
    margin:8px 0 10px;
    line-height:1.15;
    color:var(--teal-900);
  }
  .doc-head p{color:var(--muted); font-size:15.5px; max-width:560px;}

  section.topic{
    padding-top:48px;
    margin-top:8px;
    border-top:1px solid var(--rule);
    scroll-margin-top:24px;
  }
  section.topic:first-of-type{border-top:none;}

  .topic-kicker{
    display:flex;
    align-items:baseline;
    gap:12px;
    margin-bottom:6px;
  }
  .topic-kicker .lesson-num{
    font-family:var(--font-mono);
    color:var(--accent);
    font-size:14px;
    font-weight:600;
  }
  section.topic h2{
    font-family:var(--font-display);
    font-size:26px;
    margin:2px 0 18px;
  }

  section.topic p{margin:0 0 16px; font-size:15.5px;}
  section.topic ul, section.topic ol{margin:0 0 18px; padding-left:22px; font-size:15.5px;}
  section.topic li{margin-bottom:6px;}

  strong{color:var(--accent-ink); font-weight:600;}
  code.inline{
    font-family:var(--font-mono);
    background:var(--teal-50);
    border:1px solid var(--rule);
    padding:1px 6px;
    border-radius:4px;
    font-size:.88em;
    color:var(--teal-800);
  }

  .callout{
    background:var(--teal-50);
    border:1px solid var(--border-mid);
    border-left:3px solid var(--accent);
    padding:12px 16px;
    border-radius:6px;
    font-size:14px;
    margin:0 0 18px;
    color:var(--teal-800);
    box-shadow:var(--shadow-card);
  }
  .callout strong{display:inline-block; margin-bottom:2px;}

  pre.code{
    background:var(--code-bg);
    color:var(--code-ink);
    font-family:var(--font-mono);
    font-size:13.5px;
    line-height:1.6;
    padding:18px 20px;
    border-radius:8px;
    overflow-x:auto;
    margin:0 0 20px;
    position:relative;
  }
  pre.code::before{
    content:attr(data-label);
    position:absolute;
    top:-1px; right:14px;
    font-size:10.5px;
    color:var(--teal-700);
    letter-spacing:.08em;
    text-transform:uppercase;
  }
  .kw{color:var(--code-key);}
  .str{color:var(--code-str);}
  .cm{color:#4d8672; font-style:italic;}
  .mth{color:var(--code-accent);}

  table.ref{
    width:100%;
    border-collapse:collapse;
    font-size:14px;
    margin:0 0 20px;
  }
  table.ref th, table.ref td{
    text-align:left;
    padding:8px 12px;
    border-bottom:1px solid var(--rule);
  }
  table.ref th{
    font-family:var(--font-mono);
    font-size:11.5px;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--muted);
    border-bottom:2px solid var(--rule);
  }
  table.ref td code{font-family:var(--font-mono); font-size:13px;}

  /* ---------- PRACTICE ---------- */
  .practice{
    background:var(--panel);
    border:1px solid var(--rule);
    border-radius:10px;
    padding:22px 24px 8px;
    margin-top:8px;
    box-shadow:var(--shadow-card);
  }
  .practice-head{
    display:flex;
    align-items:center;
    gap:8px;
    font-family:var(--font-mono);
    font-size:11.5px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--good);
    margin-bottom:14px;
  }
  .practice-head::before{content:"▸";}

  .q{margin-bottom:16px; padding-bottom:16px; border-bottom:1px dashed var(--rule);}
  .q:last-child{border-bottom:none; margin-bottom:0;}
  .q p.prompt{margin:0 0 8px; font-size:14.5px; font-weight:500;}
  .q pre.code{margin-bottom:10px; font-size:13px; padding:14px 16px;}

  details.answer{
    font-size:14px;
  }
  details.answer summary{
    cursor:pointer;
    color:var(--accent-ink);
    font-weight:600;
    font-size:13px;
    list-style:none;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 0;
  }
  details.answer summary::before{
    content:"▶";
    font-size:9px;
    transition:transform .15s;
  }
  details.answer[open] summary::before{transform:rotate(90deg);}
  details.answer .ans-body{
    margin-top:8px;
    padding:10px 14px;
    background:var(--teal-50);
    border:1px solid var(--border-mid);
    border-radius:6px;
    color:var(--teal-800);
  }
  details.answer .ans-body code{font-family:var(--font-mono); background:none; border:none; padding:0; color:inherit; font-size:.95em;}

  @media (max-width: 860px){
    .layout{grid-template-columns:1fr;}
    .sidebar{position:relative; height:auto;}
    main{padding:32px 20px 80px;}
  }

  a:focus-visible, summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}