/* Vandal docs (/docs/): the shell, content blocks and the guide layout.
   Pages are built by tools/build_docs.py. Light by default; [data-theme="dark"] is the switch. */

@font-face{font-family:'Unbounded';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/unbounded-600.woff2') format('woff2');}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/unbounded-800.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/archivo-400.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/archivo-500.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/archivo-600.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/archivo-700.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/jetbrains-mono-500.woff2') format('woff2');}

:root{
  color-scheme:light;
  --bg:#ffffff;
  --bg-2:#f6f6f9;
  --bg-3:#ececf2;
  --ink:#16161b;
  --ink-2:#464651;
  --ink-3:#71717c;
  --border:rgba(22,22,40,0.10);
  --border-2:rgba(22,22,40,0.18);
  --accent:#d0216a;
  --accent-ink:#ffffff;
  --gradient:linear-gradient(100deg,#ffb020 0%,#ff7a29 30%,#ff2e88 65%,#9b3bff 100%);
  --good:#178a4c;
  --good-bg:rgba(23,138,76,0.08);
  --goal-bg:rgba(255,46,136,0.06);
  --goal-border:rgba(208,33,106,0.35);
  --tip-bg:rgba(255,176,32,0.12);
  --tip-ink:#8a5a00;
  --note-bg:var(--bg-2);
  --kbd-bg:#ffffff;
  --kbd-border:rgba(22,22,40,0.22);
  --shadow:0 1px 2px rgba(20,20,40,0.06),0 8px 24px rgba(20,20,40,0.08);
  --topbar:60px;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0c0c0f;
  --bg-2:#15151a;
  --bg-3:#1e1e24;
  --ink:#f4f4f6;
  --ink-2:#b4b4bd;
  --ink-3:#83838d;
  --border:rgba(255,255,255,0.10);
  --border-2:rgba(255,255,255,0.18);
  --accent:#ff5c9f;
  --accent-ink:#1a0410;
  --good:#3ccf7f;
  --good-bg:rgba(60,207,127,0.09);
  --goal-bg:rgba(255,46,136,0.08);
  --goal-border:rgba(255,92,159,0.40);
  --tip-bg:rgba(255,201,60,0.09);
  --tip-ink:#ffcf5c;
  --note-bg:var(--bg-2);
  --kbd-bg:#1e1e24;
  --kbd-border:rgba(255,255,255,0.22);
  --shadow:0 1px 2px rgba(0,0,0,0.4),0 8px 24px rgba(0,0,0,0.35);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-padding-top:calc(var(--topbar) + 20px);-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16.5px/1.65 'Archivo',system-ui,sans-serif;}
a{color:var(--accent);text-underline-offset:2px;text-decoration-thickness:1px;}
a:hover{text-decoration-thickness:2px;}
img{max-width:100%;height:auto;}
button{font:inherit;color:inherit;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--bg);padding:8px 12px;}
.skip:focus{left:8px;}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:30;height:var(--topbar);display:flex;align-items:center;gap:12px;padding:0 20px;
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gradient);opacity:.9;}
.brand{display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;font:800 15px 'Unbounded',sans-serif;letter-spacing:.04em;}
.brand img{border-radius:6px;}
.brand-docs{color:var(--ink-2);text-decoration:none;font-weight:600;padding:3px 10px;border:1px solid var(--border-2);border-radius:99px;font-size:13.5px;}
.brand-docs:hover{color:var(--ink);}
.topbar-gap{flex:1;}
.topbar-link{color:var(--ink-2);text-decoration:none;font-weight:600;font-size:14.5px;}
.topbar-link:hover{color:var(--ink);}
.icon-button{display:inline-grid;place-items:center;width:38px;height:38px;border:1px solid var(--border);border-radius:10px;background:var(--bg);cursor:pointer;color:var(--ink-2);}
.icon-button:hover{color:var(--ink);border-color:var(--border-2);}
.icon-button svg{width:19px;height:19px;}
.i-sun{display:none;}
[data-theme="dark"] .i-sun{display:block;}
[data-theme="dark"] .i-moon{display:none;}
.nav-toggle{display:none;}
.backdrop{display:none;}

.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:10px;padding:10px 16px;font-weight:700;font-size:15px;cursor:pointer;text-decoration:none;}
.btn svg{width:17px;height:17px;}
.btn-primary{background:var(--ink);color:var(--bg);}
.btn-primary:hover{opacity:.88;}
.btn-small{padding:8px 14px;font-size:14px;}
.link-button{background:none;border:0;padding:0;color:var(--ink-3);text-decoration:underline;cursor:pointer;font-size:13px;}
.link-button:hover{color:var(--ink);}

/* ---------- layout ---------- */
.layout{display:grid;grid-template-columns:270px minmax(0,1fr) 220px;gap:56px;max-width:1360px;margin:0 auto;padding:0 28px;}
.layout-guide .layout{grid-template-columns:290px minmax(0,1fr);max-width:1180px;}
.content{min-width:0;max-width:760px;padding:44px 0 80px;}

/* ---------- sidebar ---------- */
.sidebar{position:sticky;top:var(--topbar);align-self:start;max-height:calc(100vh - var(--topbar));overflow:auto;padding:32px 6px 40px 0;font-size:15px;}
.nav-section{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);}
.nav-pages{list-style:none;margin:0 0 24px;padding:0;}
.nav-pages > li > a{display:block;padding:6px 10px;border-radius:8px;color:var(--ink-2);text-decoration:none;font-weight:600;}
.nav-pages > li > a:hover{background:var(--bg-2);color:var(--ink);}
.nav-pages > li > a[aria-current="page"]{color:var(--ink);background:var(--bg-2);}
.nav-steps{margin:10px 0 6px 2px;}

.progress{margin:6px 0 16px;padding:12px 12px 13px;border:1px solid var(--border);border-radius:12px;background:var(--bg);}
.progress-text{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13.5px;color:var(--ink-2);font-weight:600;margin-bottom:8px;}
.progress-bar{height:6px;border-radius:99px;background:var(--bg-3);overflow:hidden;}
.progress-bar span{display:block;height:100%;width:0;background:var(--gradient);border-radius:99px;transition:width .35s ease;}

.steps-part{margin:16px 0 6px 10px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);}
.steps-part span{color:var(--accent);}
.steps{list-style:none;margin:0;padding:0;}
.steps a{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:8px;color:var(--ink-2);text-decoration:none;line-height:1.35;font-size:14.5px;}
.steps a:hover{background:var(--bg-2);color:var(--ink);}
.steps a.is-current{color:var(--ink);background:var(--bg-2);font-weight:600;}
.dot{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--border-2);font-size:11.5px;font-weight:700;color:var(--ink-3);}
.dot svg{display:none;width:13px;height:13px;}
.is-done .dot{background:var(--good);border-color:var(--good);color:#fff;}
.is-done .dot span{display:none;}
.is-done .dot svg{display:block;}

/* ---------- page head ---------- */
.content h1{margin:0 0 12px;font:800 clamp(30px,4.2vw,42px)/1.12 'Unbounded',sans-serif;letter-spacing:-.01em;}
.layout-guide .content h1{background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:4px;}
.lede{margin:0 0 10px;font-size:19px;line-height:1.55;color:var(--ink-2);}
.page-meta{margin:0 0 28px;font-size:14px;font-weight:600;color:var(--ink-3);}
.draft-banner{margin:0 0 20px;padding:8px 12px;border:1px dashed var(--border-2);border-radius:8px;color:var(--ink-3);font-size:14px;}

/* ---------- prose ---------- */
.content h2{font:600 24px/1.25 'Unbounded',sans-serif;margin:44px 0 14px;letter-spacing:-.005em;}
.content h3{font-size:18.5px;margin:30px 0 8px;}
.content p,.content ul,.content ol{margin:0 0 16px;}
.content li{margin:5px 0;}
.content li::marker{color:var(--ink-3);font-weight:600;}
.content code{font:500 .88em 'JetBrains Mono',monospace;background:var(--bg-2);border:1px solid var(--border);border-radius:6px;padding:1px 5px;}
.content table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:15px;}
.content th,.content td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:top;}
.content th{font-weight:700;color:var(--ink-2);}
.content hr{border:0;border-top:1px solid var(--border);margin:36px 0;}

kbd{display:inline-block;min-width:1.9em;padding:0 .45em;font:600 .82em/1.75 'Archivo',sans-serif;text-align:center;color:var(--ink);
  background:var(--kbd-bg);border:1px solid var(--kbd-border);border-bottom-width:2.5px;border-radius:6px;vertical-align:.08em;white-space:nowrap;}
.keys{white-space:nowrap;}
.keys .plus{margin:0 .2em;color:var(--ink-3);font-size:.85em;}
.menu{font-weight:600;color:var(--ink);white-space:normal;}
.menu .sep{margin:0 .35em;color:var(--ink-3);font-weight:400;}

.box{margin:20px 0;padding:14px 18px 2px;border-radius:12px;border:1px solid var(--border);background:var(--note-bg);}
.box-label{display:flex;align-items:center;gap:8px;margin:0 0 6px !important;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);}
.box-label svg{width:17px;height:17px;flex:none;}
.box ul{padding-left:20px;}
.box-goal{background:var(--goal-bg);border-color:var(--goal-border);border-left:4px solid var(--accent);font-size:17.5px;font-weight:500;}
.box-goal .box-label{color:var(--accent);}
.box-learned{background:var(--good-bg);border-color:transparent;}
.box-learned .box-label{color:var(--good);}
.box-tip{background:var(--tip-bg);border-color:transparent;}
.box-tip .box-label{color:var(--tip-ink);}

.shot{margin:24px 0 26px;}
/* Never wider than the image: small shots (notifications) stay sharp, centered. */
.shot a{display:block;width:fit-content;max-width:100%;margin:0 auto;border-radius:12px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow);cursor:zoom-in;background:var(--bg-2);}
.shot img{display:block;max-width:100%;height:auto;}
.shot figcaption{margin-top:10px;font-size:14px;color:var(--ink-3);text-align:center;}

/* ---------- guide steps ---------- */
.part{display:flex;align-items:baseline;gap:12px;margin:56px 0 0;padding-top:20px;border-top:2px solid var(--ink);font:800 15px 'Unbounded',sans-serif;letter-spacing:.02em;text-transform:uppercase;}
.part span{color:var(--accent);}
.step{padding:32px 0 8px;border-top:1px solid var(--border);}
.part + .step{border-top:0;}
.step-head{display:flex;align-items:center;gap:14px;margin:0 0 18px;}
.step-head h2{flex:1;margin:0;}
.step-num{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--gradient);color:#fff;font:800 16px 'Unbounded',sans-serif;}
.step-num svg{display:none;width:20px;height:20px;}
.step.is-done .step-num{background:var(--good);}
.step.is-done .step-num span{display:none;}
.step.is-done .step-num svg{display:block;}
.step-check{display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 9px;border:1px solid var(--border-2);border-radius:99px;font-size:13.5px;font-weight:600;color:var(--ink-2);cursor:pointer;user-select:none;}
.step-check:hover{color:var(--ink);}
.step-check input{width:16px;height:16px;margin:0;accent-color:var(--good);cursor:pointer;}
.step.is-done .step-check{border-color:var(--good);color:var(--good);}
.step-foot{display:flex;justify-content:flex-end;margin:22px 0 18px;}
.btn-done{background:var(--bg-2);color:var(--ink);border:1px solid var(--border-2);}
.btn-done:hover{background:var(--bg-3);}
.step.is-done .btn-done{background:transparent;color:var(--ink-3);}

/* ---------- toc, pager, footer ---------- */
.toc{position:sticky;top:var(--topbar);align-self:start;padding:44px 0;font-size:14px;}
.toc-title{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);}
.toc ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--border);}
.toc a{display:block;padding:4px 12px;color:var(--ink-2);text-decoration:none;}
.toc a:hover{color:var(--ink);}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:56px;}
.pager a{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--border);border-radius:12px;color:var(--ink);text-decoration:none;font-weight:600;}
.pager a:hover{border-color:var(--border-2);background:var(--bg-2);}
.pager small{display:block;font-size:12.5px;color:var(--ink-3);font-weight:500;}
.pager svg{width:18px;height:18px;flex:none;color:var(--ink-3);}
.pager-next{justify-content:flex-end;text-align:right;}
.footer{border-top:1px solid var(--border);padding:24px 28px 40px;text-align:center;font-size:14px;color:var(--ink-3);}
.footer a{color:var(--ink-2);}

/* ---------- zoom ---------- */
.zoom-dialog{max-width:min(96vw,1700px);max-height:94vh;padding:0;border:0;border-radius:12px;background:transparent;overflow:visible;}
.zoom-dialog::backdrop{background:rgba(8,8,12,.82);}
.zoom-dialog img{display:block;max-width:min(96vw,1700px);max-height:86vh;width:auto;border-radius:10px;cursor:zoom-out;}
.zoom-caption{margin:10px 0 0;text-align:center;color:#e8e8ee;font-size:14px;}
.zoom-caption:empty{display:none;}

/* ---------- narrow screens ---------- */
@media (max-width:1180px){
  .layout{grid-template-columns:250px minmax(0,1fr);gap:44px;}
  .toc{display:none;}
}
@media (max-width:900px){
  .layout,.layout-guide .layout{grid-template-columns:minmax(0,1fr);padding:0 16px;}
  .nav-toggle{display:inline-grid;}
  .topbar{padding:0 12px;gap:10px;}
  .topbar-link{display:none;}
  .sidebar{position:fixed;z-index:40;top:var(--topbar);left:0;bottom:0;width:min(320px,86vw);max-height:none;padding:22px 16px 40px;
    background:var(--bg);border-right:1px solid var(--border);transform:translateX(-105%);transition:transform .22s ease;}
  .nav-open .sidebar{transform:none;box-shadow:var(--shadow);}
  .nav-open .backdrop{display:block;position:fixed;inset:var(--topbar) 0 0 0;z-index:35;background:rgba(8,8,12,.35);}
  .content{padding-top:28px;}
  .step-head{flex-wrap:wrap;}
  .step-head h2{flex-basis:calc(100% - 60px);font-size:21px;}
  .step-check{margin-left:54px;}
  .pager{grid-template-columns:1fr;}
}
@media (max-width:420px){
  .brand span{display:none;}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;scroll-behavior:auto !important;}
}

/* A draft's screenshot that isn't taken yet. */
.shot-missing{display:flex;align-items:center;justify-content:center;min-height:180px;padding:24px;border:2px dashed var(--border-2);border-radius:12px;color:var(--ink-3);font-size:14px;text-align:center;}