/* ───────────────────────────── Catppuccin palettes ───────────────────────────── */
[data-flavor="latte"]{--base:#eff1f5;--mantle:#e6e9ef;--crust:#dce0e8;--s0:#ccd0da;--s1:#bcc0cc;--s2:#acb0be;--o0:#9ca0b0;--o1:#8c8fa1;--o2:#7c7f93;--text:#4c4f69;--sub1:#5c5f77;--sub0:#6c6f85;--rose:#dc8a78;--flamingo:#dd7878;--pink:#ea76cb;--mauve:#8839ef;--red:#d20f39;--maroon:#e64553;--peach:#fe640b;--yellow:#df8e1d;--green:#40a02b;--teal:#179299;--sky:#04a5e5;--sapphire:#209fb5;--blue:#1e66f5;--lavender:#7287fd}
[data-flavor="frappe"]{--base:#303446;--mantle:#292c3c;--crust:#232634;--s0:#414559;--s1:#51576d;--s2:#626880;--o0:#737994;--o1:#838ba7;--o2:#949cbb;--text:#c6d0f5;--sub1:#b5bfe2;--sub0:#a5adce;--rose:#f2d5cf;--flamingo:#eebebe;--pink:#f4b8e4;--mauve:#ca9ee6;--red:#e78284;--maroon:#ea999c;--peach:#ef9f76;--yellow:#e5c890;--green:#a6d189;--teal:#81c8be;--sky:#99d1db;--sapphire:#85c1dc;--blue:#8caaee;--lavender:#babbf1}
[data-flavor="macchiato"]{--base:#24273a;--mantle:#1e2030;--crust:#181926;--s0:#363a4f;--s1:#494d64;--s2:#5b6078;--o0:#6e738d;--o1:#8087a2;--o2:#939ab7;--text:#cad3f5;--sub1:#b8c0e0;--sub0:#a5adcb;--rose:#f4dbd6;--flamingo:#f0c6c6;--pink:#f5bde6;--mauve:#c6a0f6;--red:#ed8796;--maroon:#ee99a0;--peach:#f5a97f;--yellow:#eed49f;--green:#a6da95;--teal:#8bd5ca;--sky:#91d7e3;--sapphire:#7dc4e4;--blue:#8aadf4;--lavender:#b7bdf8}
[data-flavor="mocha"]{--base:#1e1e2e;--mantle:#181825;--crust:#11111b;--s0:#313244;--s1:#45475a;--s2:#585b70;--o0:#6c7086;--o1:#7f849c;--o2:#9399b2;--text:#cdd6f4;--sub1:#bac2de;--sub0:#a6adc8;--rose:#f5e0dc;--flamingo:#f2cdcd;--pink:#f5c2e7;--mauve:#cba6f7;--red:#f38ba8;--maroon:#eba0ac;--peach:#fab387;--yellow:#f9e2af;--green:#a6e3a1;--teal:#94e2d5;--sky:#89dceb;--sapphire:#74c7ec;--blue:#89b4fa;--lavender:#b4befe}
[data-accent="mauve"]{--accent:var(--mauve)}
[data-accent="blue"]{--accent:var(--blue)}
[data-accent="teal"]{--accent:var(--teal)}
[data-accent="green"]{--accent:var(--green)}
[data-accent="peach"]{--accent:var(--peach)}
[data-accent="pink"]{--accent:var(--pink)}

/* ───────────────────────────── base ───────────────────────────── */
*{box-sizing:border-box}
html,body{margin:0;height:100%}
html{background:var(--base);overflow-x:hidden}
body{font-family:'Space Grotesk',system-ui,sans-serif;background:var(--base);color:var(--text);min-height:100%}
a{color:inherit}
button{font-family:inherit}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:var(--s1);border-radius:8px;border:3px solid var(--base)}
::-webkit-scrollbar-track{background:transparent}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}

.mono{font-family:'JetBrains Mono',monospace}
.serif{font-family:'Newsreader',Georgia,serif}

/* ───────────────────────────── header ───────────────────────────── */
.header{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;height:60px;padding:0 18px;background:color-mix(in srgb, var(--mantle) 88%, transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--s0)}
.hamburger{display:none;flex-direction:column;gap:3.5px;justify-content:center;width:38px;height:38px;align-items:center;border:1px solid var(--s0);background:var(--base);border-radius:9px;cursor:pointer}
.hamburger span{width:16px;height:2px;background:var(--sub1);border-radius:2px}
.brand{display:flex;align-items:center;gap:10px;cursor:pointer;text-decoration:none}
.brand-mark{width:30px;height:30px;border-radius:9px;background:var(--accent);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2.5px;box-shadow:0 2px 8px color-mix(in srgb, var(--accent) 45%, transparent)}
.brand-mark span{width:14px;height:2px;background:var(--crust);border-radius:2px}
.brand-mark span:nth-child(2){opacity:.7}
.brand-mark span:nth-child(3){width:9px;opacity:.7}
.brand-name{font:600 18px 'Space Grotesk';letter-spacing:-.02em;color:var(--text)}
.crumb{display:flex;align-items:center;gap:8px;font:13px 'JetBrains Mono';color:var(--sub0);margin-left:4px}
.crumb .slash{color:var(--o1)}
.crumb .seg{color:var(--sub1)}
.crumb .active{color:var(--accent)}
.spacer{flex:1}
.searchbox{display:flex;align-items:center;gap:8px;width:240px;padding:8px 12px;background:var(--base);border:1px solid var(--s0);border-radius:10px;text-decoration:none}
.searchbox .ring{width:13px;height:13px;border:1.8px solid var(--o1);border-radius:50%;flex-shrink:0}
.searchbox span{font:13px 'Space Grotesk';color:var(--o1)}
.palette-btn{display:flex;align-items:center;gap:7px;padding:7px 11px;background:var(--base);border:1px solid var(--s0);border-radius:10px;cursor:pointer}
.palette-btn .dots{display:flex;gap:3px}
.palette-btn .dots span{width:9px;height:9px;border-radius:50%}
.palette-btn .flavor-name{font:600 12.5px 'Space Grotesk';color:var(--sub1)}
.avatar{width:38px;height:38px;border-radius:50%;border:1px solid var(--s0);background:var(--mantle);color:var(--accent);font:600 15px 'Space Grotesk';cursor:pointer;flex-shrink:0;text-decoration:none;display:flex;align-items:center;justify-content:center}

/* ───────────────────────────── palette popover ───────────────────────────── */
.palette-scrim{position:fixed;inset:0;z-index:70}
.palette{position:fixed;top:64px;right:16px;z-index:71;width:288px;background:var(--mantle);border:1px solid var(--s0);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.45);padding:16px;animation:pop .14s ease}
.palette.login-pos{top:64px}
.palette h4{font:600 11px 'JetBrains Mono';letter-spacing:.14em;text-transform:uppercase;color:var(--o1);margin:0 0 10px}
.palette h4.mt{margin-top:14px}
.flavor-row{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:10px;cursor:pointer}
.flavor-row.active{background:color-mix(in srgb, var(--accent) 16%, transparent)}
.flavor-row .swatches{display:flex;gap:4px}
.flavor-row .swatches span{width:14px;height:14px;border-radius:50%;border:1px solid rgba(127,127,127,.3)}
.flavor-row .label{flex:1;font:600 14px 'Space Grotesk'}
.flavor-row .check{font-size:13px;color:var(--accent);opacity:0}
.flavor-row.active .check{opacity:1}
.accent-grid{display:flex;gap:10px;flex-wrap:wrap}
.accent-swatch{width:30px;height:30px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-shadow:0 0 0 2px var(--mantle) inset}
.accent-swatch.active{border-color:var(--text)}

/* ───────────────────────────── login ───────────────────────────── */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;overflow:hidden;background:radial-gradient(900px 500px at 50% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), var(--base)}
.login-palette{position:absolute;top:18px;right:18px}
.login-card-wrap{width:100%;max-width:400px;animation:fadeUp .4s ease}
.login-logo{display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:26px}
.login-logo .mark{width:44px;height:44px;border-radius:13px;background:var(--accent);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;box-shadow:0 6px 22px color-mix(in srgb, var(--accent) 45%, transparent)}
.login-logo .mark span{width:20px;height:2.6px;background:var(--crust);border-radius:2px}
.login-logo .mark span:nth-child(2){opacity:.7}
.login-logo .mark span:nth-child(3){width:13px;opacity:.7}
.login-logo .name{font:600 30px 'Space Grotesk';letter-spacing:-.03em}
.login-card{background:var(--mantle);border:1px solid var(--s0);border-radius:20px;padding:32px 30px;box-shadow:0 20px 50px rgba(0,0,0,.28)}
.login-card h1{font:600 22px 'Space Grotesk';margin:0 0 6px;letter-spacing:-.01em}
.login-card p.lead{font:15px/1.5 'Newsreader';color:var(--sub0);margin:0 0 24px}
.login-card label{display:block;font:600 12px 'Space Grotesk';color:var(--sub1);margin-bottom:7px}
.login-card input{width:100%;padding:12px 14px;background:var(--base);border:1px solid var(--s1);border-radius:11px;margin-bottom:16px;font:15px 'JetBrains Mono';color:var(--text);outline:none}
.login-card input:focus{border-color:var(--accent)}
.login-card input::placeholder{color:var(--o1)}
.btn-primary{width:100%;padding:13px;background:var(--accent);color:var(--crust);border:none;border-radius:11px;font:600 15px 'Space Grotesk';cursor:pointer;box-shadow:0 6px 18px color-mix(in srgb, var(--accent) 40%, transparent)}
.login-card .fine{font:13px/1.5 'Newsreader';color:var(--o1);text-align:center;margin:18px 0 0}
.login-error{background:color-mix(in srgb, var(--red) 12%, transparent);border:1px solid color-mix(in srgb, var(--red) 40%, transparent);color:var(--red);font:13px 'Space Grotesk';padding:10px 12px;border-radius:10px;margin-bottom:16px}
.sent-icon{width:64px;height:64px;margin:0 auto 20px;border:1px solid var(--s1);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;background:var(--base)}
.sent-wrap{text-align:center}

/* ───────────────────────────── projects dashboard ───────────────────────────── */
.dash{max-width:1200px;margin:0 auto;padding:40px}
.dash-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.dash-head h1{font:600 30px 'Space Grotesk';letter-spacing:-.02em;margin:0}
.cli-chip{display:flex;align-items:center;gap:8px;padding:8px 13px;background:var(--mantle);border:1px dashed var(--s1);border-radius:10px;font:12.5px 'JetBrains Mono';color:var(--sub0)}
.cli-chip .dollar{color:var(--accent)}
.dash-sub{font:15px 'Newsreader';color:var(--sub0);margin:0 0 26px}
.proj-grid{display:grid;gap:20px;grid-template-columns:repeat(3,minmax(0,1fr))}
.proj-card{background:var(--mantle);border:1px solid var(--s0);border-radius:16px;padding:20px;cursor:pointer;transition:transform .15s ease,border-color .15s ease;text-decoration:none;color:inherit;display:block;animation:fadeUp .35s ease both}
.proj-card:hover{transform:translateY(-3px);border-color:var(--accent)}
.proj-card .top{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.proj-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.proj-icon span{display:flex;flex-direction:column;gap:2.5px}
.proj-icon span i{width:16px;height:2.4px;border-radius:2px;display:block}
.proj-icon span i:nth-child(2),.proj-icon span i:nth-child(3){opacity:.6}
.proj-icon span i:nth-child(3){width:10px}
.ver-badge{display:inline-flex;align-items:center;gap:6px;font:600 11px 'JetBrains Mono';color:var(--green);background:color-mix(in srgb, var(--green) 14%, transparent);padding:3px 9px;border-radius:20px;margin-left:auto}
.proj-card .title{font:600 18px 'Space Grotesk';letter-spacing:-.01em;margin-bottom:5px}
.proj-card .desc{font:14px/1.5 'Newsreader';color:var(--sub0);margin-bottom:16px;min-height:42px}
.proj-card .meta{display:flex;align-items:center;gap:12px;font:12px 'JetBrains Mono';color:var(--o1);border-top:1px solid var(--s0);padding-top:13px}
.proj-card .meta .dot{color:var(--s2)}
.proj-card .meta .when{margin-left:auto;color:var(--sub0)}
.empty{text-align:center;padding:60px 20px;animation:fadeUp .4s ease}
.empty h2{font:600 22px 'Space Grotesk';margin:0 0 8px}
.empty p{font:15px/1.6 'Newsreader';color:var(--sub0);max-width:420px;margin:0 auto 20px}
.empty pre{text-align:left;background:var(--crust);border:1px solid var(--s0);border-radius:12px;padding:16px 18px;font:13px/1.7 'JetBrains Mono';color:var(--sub1);max-width:460px;margin:0 auto;overflow-x:auto}
.empty pre .c{color:var(--o1)}
.empty pre .d{color:var(--accent)}

/* ───────────────────────────── project layout ───────────────────────────── */
.proj-layout{display:flex;align-items:flex-start;min-height:calc(100dvh - 61px)}
.sidebar{width:252px;flex-shrink:0;background:var(--mantle);border-right:1px solid var(--s0);align-self:stretch;position:sticky;top:61px;height:calc(100dvh - 61px);overflow-y:auto}
.sidebar .inner{padding:20px 16px}
.sidebar .proj-title{font:600 17px 'Space Grotesk';letter-spacing:-.01em;line-height:1.2}
.sidebar .proj-byline{font:12px 'JetBrains Mono';color:var(--o1);margin-top:4px}
.tabs{display:flex;gap:4px;background:var(--base);border:1px solid var(--s0);border-radius:11px;padding:4px;margin:16px 0}
.tabs a{flex:1;text-align:center;padding:7px 0;border:none;border-radius:8px;font:600 12.5px 'Space Grotesk';cursor:pointer;letter-spacing:.02em;text-decoration:none;color:var(--sub0)}
.tabs a.active{background:var(--accent);color:var(--crust)}
.doctree{display:flex;flex-direction:column;gap:2px}
.doctree .row{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;font:500 13.5px 'Space Grotesk';text-decoration:none}
.doctree .row .glyph{font-size:12px;color:var(--o1);flex-shrink:0}
.doctree .row .label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doctree .row.dir{color:var(--o1);font:600 12px 'Space Grotesk';cursor:default}
.doctree .row.doc{color:var(--sub0)}
.doctree .row.doc:hover{color:var(--text)}
.doctree .row.doc.active{color:var(--text);background:color-mix(in srgb, var(--accent) 15%, transparent);box-shadow:inset 2px 0 0 var(--accent)}
.doctree .row .root-tag{font:10px 'JetBrains Mono';color:var(--o0)}
.dl-zip{width:100%;margin-top:18px;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;background:var(--base);border:1px solid var(--s1);border-radius:10px;font:600 13px 'Space Grotesk';color:var(--sub1);cursor:pointer;text-decoration:none}
.main{flex:1;min-width:0;padding:40px}

/* sidebar drawer (mobile) */
.scrim{position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.5);display:none}

/* ───────────────────────────── reading column ───────────────────────────── */
.reading{display:flex;gap:56px;justify-content:center;align-items:flex-start}
.reading-col{width:100%;max-width:720px;min-width:0;animation:fadeUp .3s ease}
.doc-meta-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.doc-crumb{font:12.5px 'JetBrains Mono';color:var(--o1)}
.doc-actions{display:flex;align-items:center;gap:8px}
.latest-pill{display:inline-flex;align-items:center;gap:6px;font:600 11px 'JetBrains Mono';color:var(--green);background:color-mix(in srgb, var(--green) 14%, transparent);padding:4px 10px;border-radius:20px}
.stale-pill{display:inline-flex;align-items:center;gap:6px;font:600 11px 'JetBrains Mono';color:var(--peach);border:1px solid color-mix(in srgb,var(--peach) 50%,transparent);padding:4px 10px;border-radius:20px;text-decoration:none}
.copy-link{display:inline-flex;align-items:center;gap:6px;font:600 12px 'Space Grotesk';color:var(--sub1);background:var(--mantle);border:1px solid var(--s0);padding:5px 11px;border-radius:8px;cursor:pointer}
.toc{width:200px;flex-shrink:0;position:sticky;top:85px}
.toc h4{font:600 11px 'JetBrains Mono';letter-spacing:.14em;text-transform:uppercase;color:var(--o1);margin:0 0 12px}
.toc .links{display:flex;flex-direction:column;gap:9px;border-left:2px solid var(--s0);padding-left:14px}
.toc a{font:13px 'Space Grotesk';color:var(--sub0);text-decoration:none}
.toc a.lvl3{padding-left:12px;font-size:12.5px}
.toc a:hover,.toc a.active{color:var(--accent);font-weight:600}

/* ───────────────────────────── files tab ───────────────────────────── */
.pane{max-width:760px;margin:0 auto;animation:fadeUp .3s ease}
.pane-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.pane-head h1{font:600 28px 'Space Grotesk';letter-spacing:-.02em;margin:0}
.pane-sub{font:15px 'Newsreader';color:var(--sub0);margin:0 0 22px}
.btn-accent{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;background:var(--accent);color:var(--crust);border:none;border-radius:10px;font:600 13px 'Space Grotesk';cursor:pointer;text-decoration:none}
.filelist{background:var(--mantle);border:1px solid var(--s0);border-radius:14px;overflow:hidden}
.filerow{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--s0)}
.filerow:last-child{border-bottom:none}
.filerow .glyph{font-size:13px;color:var(--o1);flex-shrink:0;width:12px}
.filerow .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none}
.filerow.dir .name{font:600 13px 'Space Grotesk';color:var(--sub1)}
.filerow.file .name{font:500 13.5px 'Space Grotesk';color:var(--sub0)}
.filerow.file .name:hover{color:var(--text)}
.filerow .tag{font:10px 'JetBrains Mono';color:var(--mauve);background:color-mix(in srgb,var(--mauve) 14%,transparent);padding:2px 7px;border-radius:20px}
.filerow .size{font:11.5px 'JetBrains Mono';color:var(--o1);flex-shrink:0}
.filerow .dl{font-size:14px;color:var(--sub0);flex-shrink:0;text-decoration:none}

/* ───────────────────────────── versions tab ───────────────────────────── */
.timeline-row{display:flex;gap:16px}
.timeline-gutter{display:flex;flex-direction:column;align-items:center;flex-shrink:0}
.timeline-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--s2);flex-shrink:0;background:var(--base)}
.timeline-dot.latest{background:var(--accent);border-color:var(--accent)}
.timeline-line{width:2px;flex:1;background:var(--s0);min-height:24px}
.timeline-body{padding-bottom:22px;flex:1}
.timeline-body .vrow{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.timeline-body .vnum{font:600 16px 'Space Grotesk'}
.tl-latest{font:600 10px 'JetBrains Mono';color:var(--green);background:color-mix(in srgb,var(--green) 14%,transparent);padding:2px 8px;border-radius:20px}
.tl-current{font:600 10px 'JetBrains Mono';color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);padding:2px 8px;border-radius:20px}
.timeline-body .vmeta{font:13px 'JetBrains Mono';color:var(--o1);margin:4px 0 8px}
.timeline-body .vmsg{font:15px/1.5 'Newsreader';color:var(--sub1);margin-bottom:10px}
.timeline-body .vactions{display:flex;gap:8px}
.timeline-body .vactions a{font:600 12px 'Space Grotesk';color:var(--sub1);background:var(--mantle);border:1px solid var(--s0);padding:5px 12px;border-radius:8px;cursor:pointer;text-decoration:none}

/* ───────────────────────────── settings ───────────────────────────── */
.settings{max-width:680px;margin:0 auto;padding:40px;animation:fadeUp .3s ease}
.settings h1{font:600 28px 'Space Grotesk';letter-spacing:-.02em;margin:0 0 6px}
.settings .sub{font:15px 'Newsreader';color:var(--sub0);margin:0 0 22px}
.settings .sub code{font-family:'JetBrains Mono';font-size:13px;color:var(--accent)}
.key-card{background:var(--mantle);border:1px solid var(--s0);border-radius:14px;padding:16px 18px}
.key-card+.key-card{margin-top:12px}
.key-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.key-name{display:flex;align-items:center;gap:10px}
.key-name .nm{font:600 15px 'Space Grotesk'}
.key-active{width:8px;height:8px;border-radius:50%;background:var(--green)}
.key-revoked{font:11px 'JetBrains Mono';color:var(--o1)}
.btn-revoke{font:600 12px 'Space Grotesk';color:var(--red);background:transparent;border:1px solid color-mix(in srgb,var(--red) 40%,transparent);padding:5px 12px;border-radius:8px;cursor:pointer}
.key-mask{font:13px 'JetBrains Mono';color:var(--sub0);margin-top:8px}
.key-when{font:12px 'JetBrains Mono';color:var(--o1);margin-top:5px}
.warn-box{margin-top:16px;display:flex;gap:11px;background:color-mix(in srgb,var(--yellow) 12%,transparent);border:1px solid color-mix(in srgb,var(--yellow) 40%,transparent);border-radius:12px;padding:13px 15px;font:14px/1.5 'Newsreader';color:var(--sub1)}
.newkey-box{margin-bottom:18px;background:color-mix(in srgb,var(--green) 10%,transparent);border:1px solid color-mix(in srgb,var(--green) 45%,transparent);border-radius:14px;padding:16px 18px;animation:pop .2s ease}
.newkey-box h3{font:600 14px 'Space Grotesk';margin:0 0 6px;color:var(--green)}
.newkey-box p{font:13px/1.5 'Newsreader';color:var(--sub1);margin:0 0 10px}
.secret-row{display:flex;gap:8px;align-items:center}
.secret-row code{flex:1;font:13px 'JetBrains Mono';color:var(--text);background:var(--crust);border:1px solid var(--s0);border-radius:9px;padding:11px 13px;overflow-x:auto;white-space:nowrap}
.settings-foot{margin-top:28px;border-top:1px solid var(--s0);padding-top:18px;display:flex;justify-content:space-between;align-items:center}
.settings-foot .who{font:13px 'JetBrains Mono';color:var(--o1)}
.btn-ghost{font:600 13px 'Space Grotesk';color:var(--sub1);background:var(--mantle);border:1px solid var(--s0);padding:8px 14px;border-radius:9px;cursor:pointer}
.keyform{display:flex;gap:8px;justify-content:flex-end;margin-bottom:14px}
.keyform input{padding:9px 13px;background:var(--base);border:1px solid var(--s1);border-radius:10px;font:13px 'Space Grotesk';color:var(--text);outline:none}
.keyform input:focus{border-color:var(--accent)}

/* ───────────────────────────── error page ───────────────────────────── */
.errpage{min-height:calc(100dvh - 61px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px}
.errpage .code{font:700 64px 'Space Grotesk';color:var(--accent);letter-spacing:-.03em}
.errpage .msg{font:17px 'Newsreader';color:var(--sub0);margin:6px 0 20px}

/* ───────────────────────────── responsive ───────────────────────────── */
@media (max-width:1279px){.toc{display:none}}
@media (max-width:1080px){.proj-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dash,.main{padding:26px}.sidebar{width:220px}}
@media (max-width:760px){
  .proj-grid{grid-template-columns:1fr}
  .dash,.main,.settings{padding:16px}
  .searchbox{display:none}
  .hamburger{display:flex}
  .crumb{display:none}
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:284px;z-index:60;border-right:1px solid var(--s0);transform:translateX(-105%);transition:transform .28s cubic-bezier(.4,0,.2,1);height:100dvh}
  .sidebar.open{transform:translateX(0);box-shadow:0 20px 60px rgba(0,0,0,.45)}
  .scrim.show{display:block}
  .reading{gap:0}
}