:root{
  --bg:#fafafa; --nav-bg:rgba(248,250,252,.92); --side-bg:#fafafa; --fg:#09090b; --body:#3f3f46; --muted:#8d8d96; --side:#52525b;
  --border:#e4e4e7; --border-soft:#ececee; --hover:#f4f4f5; --accent:#9333ea; --accent-strong:#7e22ce;
  --code-bg:#faf9ff; --code-border:#d9d9e0; --ic-bg:#f5f3ff; --ic-border:#ddd6fe; --ic-fg:#4c1d95;
  --t-k:#3730a3; --t-s:#92400e; --t-n:#a21caf; --t-p:#18181b; --row-alt:#f1f1f3;
  --nav-h:4.25rem; --side-w:19rem;
  --sans:"Inter",ui-sans-serif,system-ui,sans-serif; --prose:"Schibsted Grotesk","Inter",ui-sans-serif,sans-serif;
  --serif:"Playfair Display",ui-serif,Georgia,serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);font-family:var(--sans);line-height:1.5;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + env(safe-area-inset-top,0px))}
body{min-height:100vh;background:var(--bg);color:var(--fg);padding-top:calc(var(--nav-h) + env(safe-area-inset-top,0px))}
a{color:inherit;text-decoration:none} ul{list-style:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* navbar */
.nav{position:fixed;inset:0 0 auto 0;z-index:40;height:calc(var(--nav-h) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) clamp(20px,2.4vw,40px) 0;
  background:var(--nav-bg);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);display:flex;align-items:center}
.crumbs{display:flex;align-items:center;gap:.9rem;font-size:1.0625rem;font-weight:400;color:var(--side);min-width:0;white-space:nowrap}
.crumbs a:hover{color:var(--fg)} .crumbs .sep{color:var(--muted);font-weight:300} .crumbs .cur{color:var(--body);font-weight:500;overflow:hidden;text-overflow:ellipsis}
.nav-right{margin-left:auto;display:flex;gap:1.5rem;font-size:.9375rem;color:var(--muted)}
.nav-right a:hover,.nav-right button:hover{color:var(--fg)}
.menu-btn{display:none;margin-right:.75rem;color:var(--side)}

/* sidebar */
.sidebar{position:fixed;top:calc(var(--nav-h) + env(safe-area-inset-top,0px));bottom:0;left:0;width:var(--side-w);overflow-y:auto;background:var(--side-bg);
  border-right:1px solid var(--border);padding:1.6rem 1.75rem 3rem 1.6rem;z-index:30;transition:transform .2s ease-out}
.s-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;margin-bottom:.9rem}
.s-top a{font-size:1.0625rem;font-weight:500;letter-spacing:.01em;color:var(--side);padding:.15rem 0}
.part{display:block;font-size:1.0625rem;font-weight:500;letter-spacing:.01em;color:var(--side);padding:.55rem 0}
.part:hover{color:var(--fg)} .part.open{color:var(--fg);font-weight:600}
.chapters{margin:.15rem 0 .6rem .05rem;border-left:1px solid var(--border);padding-left:1.1rem}
.chapters a{display:block;padding:.38rem 0;font-size:.95rem;line-height:1.45;color:var(--muted);transition:color .15s}
.chapters a:hover{color:var(--fg)} .chapters a.active{color:var(--body);font-weight:500}

/* main */
main{margin-left:var(--side-w);transition:margin-left .2s}
.col{max-width:50rem;margin:0 auto;padding:2.1rem 1.25rem 3.5rem}
.eyebrow{font-size:1.02rem;font-weight:500;color:var(--accent);margin-bottom:.15rem}
.prose{font-family:var(--prose);color:var(--body);line-height:1.75;font-size:1rem}
.prose h1{font-family:var(--serif);font-weight:800;font-size:2.7rem;line-height:1.15;letter-spacing:-.005em;color:var(--fg);margin-bottom:1.1rem}
.prose h2{font-family:var(--prose);font-weight:700;font-size:1.65rem;line-height:1.3;color:var(--fg);margin:2.6rem 0 1.1rem}
.prose h2 code{font-size:.9em;background:none;border:0;padding:0;color:var(--fg);font-weight:600}
.fade{height:1px;width:48%;background:linear-gradient(to right,var(--border),transparent);margin:0 0 1.5rem;border:0}
.fade.wide{width:68%;margin:2.2rem 0}
.prose p{margin:1.05rem 0}
.prose strong{color:var(--fg);font-weight:600}
.prose ul{margin:1.1rem 0;padding-left:1.5rem;list-style:disc}
.prose li{margin:.55rem 0;padding-left:.7rem} .prose li::marker{color:var(--fg)}
.prose a{color:var(--accent);font-weight:400} .prose a:hover{color:var(--accent-strong);text-decoration:underline;text-underline-offset:3px}
.prose :not(pre)>code{font-family:var(--mono);font-size:.88em;font-weight:500;color:var(--ic-fg);background:var(--ic-bg);border:1px solid var(--ic-border);padding:.12em .38em;margin:0 .1em;line-height:1.5}
pre{font-family:var(--mono);font-size:.875rem;line-height:1.65;background:var(--code-bg);border:1px solid var(--code-border);padding:1rem 1.25rem;margin:1.25rem 0;overflow-x:auto;color:var(--t-p)}
.k{color:var(--t-k)} .s{color:var(--t-s)} .n{color:var(--t-n)} .pp{color:var(--t-k)} .c{color:var(--t-p);opacity:.72}
.tbl{margin:1.5rem 0;overflow-x:auto}
table{border-collapse:collapse;width:100%;font-family:var(--prose);font-size:.9rem}
th{text-align:left;font-weight:700;color:var(--fg);padding:1rem 1.15rem;border-bottom:1px solid var(--border);border-right:1px solid var(--border)}
td{padding:1rem 1.15rem;border-right:1px solid var(--border)} th:last-child,td:last-child{border-right:0}
tbody tr:nth-child(even){background:var(--row-alt)} td.m{font-family:var(--mono);font-weight:600;font-size:.8rem}

/* exercise */
.exercise{border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin:1.5rem 0}
.ex-in{max-width:61rem;margin:0 auto;padding:2.2rem clamp(20px,3vw,48px) 2.6rem}
.ex-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.ex-head h3{font-family:var(--prose);font-weight:600;font-size:1.65rem;color:var(--fg);letter-spacing:-.005em}
.pts{font-size:1rem;color:var(--muted);display:flex;align-items:center;gap:.5rem;white-space:nowrap}
.pts b{font-weight:500;color:var(--fg)} .ring{width:1.2rem;height:1.2rem;border:1.5px solid var(--side);border-radius:50%;display:inline-block}
.ex-in>p{font-family:var(--prose);color:var(--body);margin-top:2rem}
.lock{text-align:center;margin-top:2.4rem;font-family:var(--prose);color:var(--body)}
.lock svg{margin:0 auto 1.1rem;color:var(--side)}
.lock p{max-width:40rem;margin:0 auto 1rem;line-height:1.7}
.btns{display:flex;justify-content:center;align-items:center;gap:1.8rem}
.btn{border:1px solid var(--fg);padding:.6rem 1.5rem;font-size:1.02rem;color:var(--fg);background:transparent;transition:background-color .15s,color .15s}
.btn:hover{background:var(--fg);color:var(--bg)}
.link{font-size:1.02rem;color:var(--fg)} .link:hover{text-decoration:underline;text-underline-offset:3px}

.chapter-nav{max-width:50rem;margin:0 auto;padding:1.5rem 1.25rem 2rem;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.chapter-nav a{display:flex;align-items:center;gap:.65rem;max-width:48%;color:var(--accent);font-size:.95rem;line-height:1.4}
.chapter-nav a:hover{color:var(--accent-strong);text-decoration:underline;text-underline-offset:3px}
.chapter-next{text-align:right;margin-left:auto}
.chapter-nav-spacer{flex:1}
footer{border-top:1px solid var(--border);padding:2rem clamp(20px,3vw,48px) 3rem}
footer ul{max-width:38.5rem;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:.75rem 2rem}
footer a{font-size:.95rem;color:var(--muted)} footer a:hover{color:var(--fg)}

.chat{position:fixed;right:1.1rem;bottom:calc(1.1rem + env(safe-area-inset-bottom,0px));z-index:50;width:4.6rem;height:4.6rem;background:var(--bg);border:1px solid var(--fg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;font-size:.72rem;color:var(--fg)}
.chat:hover{background:var(--hover)}

@media (max-width:56rem){
  .menu-btn{display:block} .sidebar{transform:translateX(-100%);box-shadow:none} body.open .sidebar{transform:none;box-shadow:16px 0 40px rgba(15,23,42,.12)}
  main,body.collapsed main{margin-left:0} .crumbs .hide-sm{display:none} .prose h1{font-size:2.2rem} .ex-head{flex-direction:column;gap:.5rem}
}