/* Dhrupad's Interview Prep — shared design system */
:root{
  --bg:#FAFBF8; --bg2:#F1F4EE; --ink:#1B2229; --ink2:#4A555F; --line:#DDE3DA;
  --accent:#0E7C6B; --accent-ink:#0A5A4E; --accent-bg:#E3F0EC;
  --warn:#B7791F; --warn-bg:#F7EEDD; --bad:#C2412D; --bad-bg:#F8E7E2;
  --code-bg:#212A33; --code-ink:#D8E2EA; --card:#FFFFFF;
  --grid:rgba(14,124,107,.06); --side-bg:#F4F6F1;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#10151B; --bg2:#161D25; --ink:#E4EAEF; --ink2:#98A6B3; --line:#2A343F;
  --accent:#35B39C; --accent-ink:#6ED2BE; --accent-bg:#15302B;
  --warn:#D9A03F; --warn-bg:#332812; --bad:#E06651; --bad-bg:#361A14;
  --code-bg:#0B1015; --code-ink:#CBD7E1; --card:#171F28;
  --grid:rgba(53,179,156,.05); --side-bg:#0D1218;
}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px),var(--bg);
  background-size:28px 28px,28px 28px,auto;
  color:var(--ink); margin:0;
  font-family:Seravek,'Gill Sans Nova',Ubuntu,Calibri,'DejaVu Sans',source-sans-pro,sans-serif;
  line-height:1.65;
}
.mono,code,pre,.eyebrow,th,.chip,.side .sec{font-family:ui-monospace,'Cascadia Code','JetBrains Mono',Menlo,Consolas,monospace}

/* ---- layout ---- */
.wrap{display:flex; min-height:100vh}
.side{
  width:250px; flex-shrink:0; background:var(--side-bg); border-right:1px solid var(--line);
  padding:22px 14px 40px; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.side .logo{font-weight:800; letter-spacing:-.01em; font-size:1.02rem; margin:0 8px 4px; color:var(--ink)}
.side .logo a{color:inherit; text-decoration:none}
.side .sub{font-size:.72rem; color:var(--ink2); margin:0 8px 18px}
.side .sec{font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-ink); font-weight:700; margin:18px 8px 6px}
.side a.item, .side span.item{display:block; padding:6px 10px; border-radius:7px; font-size:.86rem; text-decoration:none; color:var(--ink)}
.side a.item:hover{background:var(--accent-bg); color:var(--accent-ink)}
.side a.item.active{background:var(--accent); color:#fff; font-weight:600}
.side span.item{color:var(--ink2); opacity:.55; cursor:default}
.side span.item::after{content:" ·"; opacity:0}
.side .soonmark{font-size:.62rem; opacity:.8; border:1px solid var(--line); border-radius:999px; padding:0 6px; margin-left:6px; vertical-align:1px}
.content{flex:1; min-width:0; padding:0 22px 90px}
main{max-width:72ch; margin:0 auto}
#menubtn{display:none}
@media (max-width:860px){
  .wrap{display:block}
  .side{position:fixed; z-index:50; transform:translateX(-100%); transition:transform .2s; width:270px; height:100dvh}
  .side.open{transform:none; box-shadow:0 0 40px rgba(0,0,0,.35)}
  #menubtn{display:block; position:fixed; z-index:60; top:12px; left:12px; background:var(--accent); color:#fff; border:none; border-radius:8px; padding:8px 12px; font-size:.9rem; font-weight:700; cursor:pointer}
  .content{padding-top:30px}
}

/* ---- typography ---- */
header.hero{padding:52px 0 8px}
.eyebrow{color:var(--accent); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600}
h1{font-size:clamp(1.8rem,4.5vw,2.5rem); line-height:1.12; margin:.3rem 0 .6rem; letter-spacing:-.02em; text-wrap:balance}
.lede{color:var(--ink2); font-size:1.06rem; max-width:60ch}
h2{font-size:1.4rem; margin:2.5rem 0 .6rem; letter-spacing:-.01em; text-wrap:balance; scroll-margin-top:24px}
h2 .n{color:var(--accent); font-family:ui-monospace,Menlo,monospace; font-size:1rem; margin-right:.5rem}
h3{font-size:1.06rem; margin:1.5rem 0 .4rem}
p{margin:.7rem 0}
a{color:var(--accent-ink)}
.toc{display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 6px; padding:0}
.toc a{text-decoration:none; font-size:.78rem; padding:5px 11px; border:1px solid var(--line); border-radius:999px; color:var(--ink2); background:var(--card)}
.toc a:hover{border-color:var(--accent); color:var(--accent-ink)}

/* ---- components ---- */
.callout{border:1px solid var(--line); border-left:4px solid var(--accent); background:var(--card); border-radius:8px; padding:12px 16px; margin:16px 0}
.callout.warn{border-left-color:var(--warn)}
.callout.bad{border-left-color:var(--bad)}
pre{background:var(--code-bg); color:var(--code-ink); border-radius:10px; padding:14px 16px; overflow-x:auto; font-size:.85rem; line-height:1.55; margin:14px 0}
code{font-size:.88em}
p code,li code,td code{background:var(--bg2); border:1px solid var(--line); border-radius:5px; padding:.08em .35em; color:var(--ink)}
pre code{background:none; border:none; padding:0; color:inherit}
.cm{color:#8CA3B5}.kw{color:#7FC8B4}.bd{color:#F2B8A2}
.twrap{overflow-x:auto; margin:14px 0}
table{border-collapse:collapse; width:100%; font-size:.9rem; background:var(--card); border-radius:10px; overflow:hidden; margin:14px 0}
.twrap table{margin:0; min-width:540px}
th{font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; text-align:left; color:var(--ink2); background:var(--bg2); padding:9px 12px; border-bottom:2px solid var(--line)}
td{padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top}
tr:last-child td{border-bottom:none}
td b.o,.o{font-family:ui-monospace,Menlo,monospace}
.sev-ok{color:var(--accent-ink); font-weight:600}
.sev-mid{color:var(--warn); font-weight:600}
.sev-bad{color:var(--bad); font-weight:600}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin:16px 0}
.card{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 14px}
.card .o{font-weight:700; font-size:1.02rem}
.duo{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:12px; margin:14px 0}
.duo pre{margin:0; height:100%}
.lab{font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; margin-bottom:6px}
.lab.good{color:var(--accent-ink)}.lab.evil{color:var(--bad)}
figure{margin:20px 0; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px}
figcaption{font-size:.8rem; color:var(--ink2); margin-top:8px}
svg text{font-family:ui-monospace,Menlo,monospace}
.widget{background:var(--card); border:1px solid var(--accent); border-radius:12px; padding:18px; margin:20px 0}
.widget h3{margin-top:0}
.widget input[type=range]{width:100%; accent-color:var(--accent)}
.nval{font-family:ui-monospace,Menlo,monospace; font-weight:700; font-size:1.15rem; color:var(--accent-ink)}
.chip{display:inline-block; font-size:.7rem; padding:2px 9px; border-radius:999px; font-weight:600}
.chip.ok{background:var(--accent-bg); color:var(--accent-ink)}
.chip.mid{background:var(--warn-bg); color:var(--warn)}
.chip.bad{background:var(--bad-bg); color:var(--bad)}
details{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 16px; margin:10px 0}
summary{cursor:pointer; font-weight:600; color:var(--accent-ink)}
details[open] summary{margin-bottom:8px}
.qa{margin:14px 0; padding:14px 16px; background:var(--card); border:1px solid var(--line); border-radius:10px}
.qa .q{font-weight:650}
.reveal{background:var(--accent); color:#fff; border:none; border-radius:7px; padding:6px 14px; font-size:.82rem; font-weight:700; cursor:pointer; margin-top:8px}
.reveal:hover{background:var(--accent-ink)}
.ans{display:none; margin-top:10px; padding-top:10px; border-top:1px dashed var(--line)}
.ans.shown{display:block}
.foot{margin-top:48px; color:var(--ink2); font-size:.85rem; border-top:1px solid var(--line); padding-top:16px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}
.foot a{font-weight:600}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
/* index page cards */
.pagecards{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin:20px 0}
.pagecard{display:block; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; text-decoration:none; color:var(--ink)}
.pagecard:hover{border-color:var(--accent)}
.pagecard .t{font-weight:700; margin-bottom:4px}
.pagecard .d{font-size:.85rem; color:var(--ink2)}
.pagecard .tagrow{margin-top:10px}