/* the three typefaces, self-hosted: only the weights the site uses */
@font-face{font-family:'Pixelify Sans';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/pixelify-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Pixelify Sans';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/pixelify-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Spline Sans Mono';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/spline-sans-mono-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Spline Sans Mono';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/spline-sans-mono-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/spline-sans-mono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/spline-sans-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/spline-sans-mono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/spline-sans-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'VT323';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/vt323-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'VT323';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/vt323-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* RogueSector — the night desk, spread over real pages. Palette: mono + red.
   The layouts share one set of windows and widgets.
   One deliberate dark look: near-black desk, white text, a single red star. */
:root{
  /* --violet, --amber and --ok are old token names; they all hold greys or white now */
  --void:#0e0e0f; --panel:#161617; --bar:#1f1f21; --rule:#37373a;
  --ink:#ececec; --ink-dim:#a3a3a3; --violet:#d4d4d4; --amber:#ffffff; --antares:#ff4d3d; --ok:#c4c4c4;
  --phos:#e8e8e8; --phos-dim:#8a8a8a; --crt:#080808;
  --deep:#0a0a0a; --sel-soft:#2a2a2a; --sel-bg:#3a3a3a; --sel-ink:#ffffff; --rule-soft:#262626; --on-accent:#0e0e0e; --hot-b:#8a8a8a; --hot-ink:#ffffff; --scan:rgba(0,0,0,.16); --vhs:255,255,255; --banner-ink:#f4f4f4; --banner-dim:#b9b9b9;
  --f-display:"Pixelify Sans","VT323",ui-monospace,monospace;
  --f-body:"Spline Sans Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --f-crt:"VT323",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --step--1:.78rem; --step-0:.9rem; --step-1:1.05rem; --step-2:1.4rem; --step-3:clamp(2rem,4.6vw,3.4rem);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--void)}
body{margin:0;background:var(--void);color:var(--ink);font-family:var(--f-body);font-size:var(--step-0);line-height:1.6}
a{color:var(--amber);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--ink);text-decoration-color:var(--amber)}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.skip{position:fixed;left:16px;top:-60px;z-index:70;background:var(--bar);border:1px solid var(--amber);padding:6px 12px;font-size:var(--step--1)}
.skip:focus{top:12px}
#content:focus{outline:0}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,h4{text-wrap:balance;margin:0}
p{margin:0}
[hidden]{display:none!important}
code{background:var(--void);border:1px solid var(--rule);padding:0 5px;font-size:.9em}
.dim{color:var(--ink-dim)}.small{font-size:var(--step--1)}
.stack{display:flex;flex-direction:column;gap:14px;min-width:0}
html.pre-boot{background:#000;overflow:hidden} /* the page behind a boot can't scroll */
html.pre-boot body>*:not(.boot){visibility:hidden}

/* ---------- shared page frame ---------- */
.wrap{max-width:1560px;margin:0 auto;padding-block:20px 24px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.content{min-width:0}

/* ---------- windows ---------- */
.win{background:var(--panel);border:1px solid var(--rule);min-width:0}
.win-bar{display:flex;align-items:center;gap:8px;background:var(--bar);border-bottom:1px solid var(--rule);padding:5px 6px 5px 10px;min-height:32px}
.win-bar h2{font-family:var(--f-body);font-weight:400;font-size:var(--step--1);color:var(--violet);letter-spacing:.02em;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.win-bar h2 b{color:var(--ink);font-weight:600}
.hatch{width:18px;height:12px;flex:none;background:repeating-linear-gradient(135deg,var(--violet) 0 2px,transparent 2px 5px);opacity:.7}
.win-btn{width:22px;height:20px;display:grid;place-items:center;border:1px solid var(--rule);background:var(--panel);font-size:12px;line-height:1;color:var(--ink-dim);flex:none}
.win-btn:hover{color:var(--amber);border-color:var(--amber)}
.win-open{font-size:var(--step--1);text-decoration:none;border:1px solid var(--rule);padding:0 8px;line-height:20px;color:var(--amber);white-space:nowrap;flex:none}
.win-open:hover{border-color:var(--amber);color:var(--ink)}
.win-body{padding:14px}
.win.collapsed .win-body{display:none}
.win.collapsed .win-bar{border-bottom:0}
.win.big>.win-body{padding:18px 20px}
.label{font-size:var(--step--1);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim)}
.prose{max-width:66ch}
.prose p+p{margin-top:10px}
.prose h3{font-family:var(--f-display);font-size:var(--step-2);color:var(--amber);margin-bottom:10px;font-weight:700}
.name{position:relative;display:inline-block;white-space:nowrap}
.name[data-size]::after{content:attr(data-size);visibility:hidden} /* holds the width of the widest name */
.name-live{position:absolute;left:0;top:0}
.name-live .g{color:var(--ink-dim)}
.prose ul,.prose ol{padding-left:1.2em;margin:8px 0}
.prose li{margin:3px 0}
h3.sec-h,h4.sec-h{font-family:var(--f-display);font-weight:700;font-size:var(--step-1);color:var(--ink);margin:18px 0 8px;letter-spacing:.02em}
.sec-h:first-child{margin-top:0}
.sec-h::before{content:"// ";color:var(--violet)}

/* ---------- headers ---------- */
.sky{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
/* Wide banner, title bottom-left. Its height follows its width, so the whole scene scales together. The crop keeps the
   CN Tower, Antares and Scorpius in frame down to about 475px wide; below that, 160px is the
   least that fits the title, so the sides crop. */
.hdr-a{position:relative;border:1px solid var(--rule);width:100%;aspect-ratio:5.27;min-height:160px;overflow:hidden;background:var(--deep)}
.hdr-a .sky{object-position:57% 27%}
/* inner pages get a shorter banner, so more of the page is on the first screen. The home page keeps the full one. */
.hdr-inner{aspect-ratio:6.6}
.hdr-inner .sky{object-position:57% 48%}
.hdr-inner .big-title{font-size:clamp(2rem,3.2vw,2.5rem)}
.hdr-a .ttl{position:absolute;left:clamp(14px,3vw,32px);bottom:clamp(12px,2.4vw,24px);right:14px}
.big-title{font-family:var(--f-display);font-weight:700;font-size:var(--step-3);line-height:1;letter-spacing:.04em;color:var(--banner-ink);text-shadow:3px 3px 0 #000;margin:0}
.big-title .cur{color:var(--amber);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.subline{display:inline-block;margin-top:8px;font-size:var(--step--1);letter-spacing:.08em;color:var(--banner-dim);background:rgba(10,10,10,.78);padding:2px 8px}
.coords{position:absolute;top:10px;right:12px;font-family:var(--f-crt);font-size:1.05rem;color:var(--banner-dim);text-align:right;line-height:1.05;text-shadow:1px 1px 0 #000;white-space:nowrap}
.coords.charted{right:auto}
.coords i{display:none}
.coords.charted i{display:block;position:absolute;left:100%;top:100%;width:var(--lead);height:1px;background:var(--phos-dim);transform-origin:0 0;transform:rotate(45deg)}
@media (max-width:900px){.coords{font-size:.95rem}}
/* ---------- the desk grid ---------- */
.grid{display:grid;gap:14px;margin-top:14px;grid-template-columns:240px minmax(0,1fr) 290px;align-items:start}
/* On wide screens the extra width (the page is up to 1560px) goes to the middle column, the rails stay fixed */
@media (min-width:1920px){html{font-size:106.25%}}

/* A: nav window */
.idcard{display:grid;grid-template-columns:58px 1fr;gap:8px 12px;align-items:center}
.idcard canvas{display:block;box-sizing:content-box;width:56px;height:56px;image-rendering:pixelated;border:1px solid var(--rule)}
.idcard h3{font-family:var(--f-display);font-size:var(--step-2);line-height:1}
.idcard p{font-size:var(--step--1);color:var(--ink-dim);line-height:1.4;margin-top:4px;text-wrap:balance}
.live{display:block;font-size:var(--step--1);color:var(--ok);margin-top:8px}
.dc-card,.dc-card:hover{display:block;color:var(--ink-dim);text-decoration:none}
.dc-head{display:flex;align-items:center;gap:12px}
.dc-pfp{position:relative;flex:none}
.dc-pfp img,.dc-line img{display:block;box-sizing:content-box;flex:none;background:var(--void);border:1px solid var(--rule);filter:grayscale(1)}
.dc-pfp img{width:44px;height:44px}
.dc-card:hover img,.dc-card:focus-visible img{filter:none}
.dc-card:hover .dc-pfp img,.dc-card:focus-visible .dc-pfp img{border-color:var(--ink-dim)}
.dc-pfp i{position:absolute;right:-4px;bottom:-4px;width:12px;height:12px;background:var(--ink-dim);border:2px solid var(--panel)}
.dc-pfp i.on{background:var(--antares)}
.dc-info{display:block;min-width:0}
.dc-user{display:flex;align-items:center;gap:5px;font-size:var(--step--1);line-height:1.3}
.dc-user .ico{width:12px;height:12px}
.dc-status{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;margin-top:3px;font-size:var(--step--1);line-height:1.2}
.dc-status b{font-family:var(--f-crt);font-size:1.35rem;font-weight:400;line-height:1.05;color:var(--ink)}
.dc-activity{display:grid;gap:6px;margin-top:10px;font-size:var(--step--1);line-height:1.4;overflow-wrap:anywhere}
.dc-activity[hidden]{display:none}
.dc-line{display:flex;align-items:center;gap:8px;min-width:0}
.dc-line>span{min-width:0}
.dc-line img{width:24px;height:24px}
.nav{list-style:none;margin:8px 0 0;padding:8px 0 0;border-top:1px dashed var(--rule);display:flex;flex-direction:column;gap:1px}
.nav a{display:flex;gap:10px;align-items:center;padding:3px 8px;text-decoration:none;color:var(--ink);border-left:2px solid transparent}
.nav a img,.nav a .ico{flex:none;width:20px;height:20px;image-rendering:pixelated}
.nav a:hover{background:var(--bar);border-left-color:var(--amber)}
.nav a[aria-current]{background:var(--sel-soft);border-left-color:var(--violet)}

/* ---------- pixel icons ---------- */
.ico{width:24px;height:24px;flex:none;shape-rendering:crispEdges;--ico-l:#e6e6e6;--ico-m:#a3a3a3;--ico-d:#5a5a5a;--ico-k:#0a0a0a}
.ico .t-l{fill:var(--ico-l)}.ico .t-m{fill:var(--ico-m)}.ico .t-d{fill:var(--ico-d)}.ico .t-k{fill:var(--ico-k)}
.nav a[aria-current] :is(img,.ico),.nav a:hover :is(img,.ico){filter:brightness(1.3)}

/* ---------- widgets ---------- */
.term{background:var(--crt);color:var(--phos);font-family:var(--f-crt);font-size:1.12rem;line-height:1.15;padding:12px;border:1px solid #2a2a2a;position:relative}
.term::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.1) 0 1px,transparent 1px 3px)}
.term dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:1px 10px}
.term dt{color:var(--phos-dim)}
.term dd{margin:0;min-width:0;overflow-wrap:anywhere}
.term-tight{padding-inline:8px}
.term .prompt{margin-bottom:6px}
.sky-star{width:26px;height:26px;image-rendering:pixelated;vertical-align:middle;margin-right:6px}
.tape{background:#1c1c1d;border:1px solid #3a3a3c;padding:10px 10px 8px}
.tape-label{background:#e6e6e6;color:#111;padding:4px 8px;font-size:.72rem;line-height:1.35;overflow-wrap:anywhere}
.tape-label b{display:block;font-weight:600}
.tape-label span{display:block}
.tape-window{margin:8px auto 4px;width:78%;height:34px;background:#0a0a0a;border:2px solid #3a3a3c;border-radius:17px;display:flex;justify-content:space-between;align-items:center;padding:0 10px}
.reel{width:24px;height:24px;border-radius:50%;background:radial-gradient(circle,#0a0a0a 0 3px,#cfcfcf 3px 5px,transparent 5px),conic-gradient(#cfcfcf 0 30deg,#444 30deg 120deg,#cfcfcf 120deg 150deg,#444 150deg 240deg,#cfcfcf 240deg 270deg,#444 270deg)}
.playing .reel{animation:spin 1.6s linear infinite}
@keyframes spin{to{transform:rotate(-360deg)}}
.deck-bar{height:6px;margin-top:10px;background:var(--void);border:1px solid var(--rule)}
.deck-bar i{display:block;height:100%;width:0;background:var(--ink-dim)}
.deck-ctrl{display:flex;gap:6px;margin-top:10px}
.deck-ctrl .btn{flex:1;display:flex;justify-content:center;padding-block:6px}
.deck-vol{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:var(--step--1);color:var(--ink-dim)}
.deck-vol input{flex:1;min-width:0;height:24px;margin:0;background:none;appearance:none;-webkit-appearance:none;cursor:pointer}
.deck-vol input::-webkit-slider-runnable-track{height:2px;background:var(--ink-dim)}
.deck-vol input::-moz-range-track{height:2px;background:var(--ink-dim)}
.deck-vol input::-webkit-slider-thumb{-webkit-appearance:none;width:8px;height:14px;margin-top:-6px;background:var(--ink);border:0;border-radius:0}
.deck-vol input::-moz-range-thumb{width:8px;height:14px;background:var(--ink);border:0;border-radius:0}
.deck-vol input:hover::-webkit-slider-thumb,.deck-vol input:active::-webkit-slider-thumb{background:var(--antares)}
.deck-vol input:hover::-moz-range-thumb,.deck-vol input:active::-moz-range-thumb{background:var(--antares)}
.btn{border:1px solid var(--rule);background:var(--bar);padding:4px 10px;font-size:var(--step--1);color:var(--ink)}
.btn:hover{border-color:var(--amber);color:var(--amber)}
.btn[aria-pressed="true"]{border-color:var(--violet);color:var(--violet)}
.deck-now{font-size:var(--step--1);color:var(--ink-dim);margin-top:6px;line-height:1.45;overflow-wrap:anywhere}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--rule);padding:2px 8px;font-size:var(--step--1);background:var(--void)}
.chip.hot{border-color:var(--hot-b);color:var(--hot-ink)}
.sub-l{margin:12px 0 6px}
.skills{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px 14px;font-size:var(--step--1)}
.skills li{display:flex;align-items:center;gap:8px;min-width:0}
.skill-icon{display:block;flex:none}
.skill-slot{flex:none;box-sizing:border-box;border:1px dashed var(--rule)}
.b88s{display:flex;flex-wrap:wrap;gap:6px}
.b88{width:88px;height:31px;display:grid;place-items:center;font-family:var(--f-crt);font-size:15px;line-height:1;text-align:center;letter-spacing:.04em;border:1px solid;flex:none;text-decoration:none;overflow:hidden}
.b88-img{display:block;flex:none;width:88px;height:31px;image-rendering:pixelated}
.b88.site{background:var(--void);color:var(--ink);border-color:var(--rule);font-size:14px}
.b88.site:hover{border-color:var(--amber);color:var(--amber)}
.b88.slot{border-style:dashed;border-color:var(--rule);color:var(--ink-dim);font-size:13px}
.render-prev{width:100%;aspect-ratio:16/9;max-width:100%;display:block;image-rendering:pixelated;border:1px solid var(--rule);background:#060606}
.cap{font-size:var(--step--1);color:var(--ink-dim);margin-top:8px;line-height:1.45}
.cap b{color:var(--ink);font-weight:600}
.elsewhere{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:var(--step--1)}
.elsewhere li{display:flex;justify-content:space-between;gap:10px}
.elsewhere span{color:var(--ink-dim)}
.elsewhere .handle{color:var(--ink)}

/* about window: avatar on the left, intro on the right. The avatar stacks above the intro whenever both won't fit with at least 45 characters a line. */
.about{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start}
.about .prose{flex:1 1 45ch;min-width:0}
.about .prose p{text-wrap:pretty}
.portrait{margin:0;flex:none}
.portrait img{display:block;box-sizing:content-box;width:120px;height:120px;padding:4px;background:var(--void);border:1px solid var(--rule)}
/* neofetch */
.neo{background:var(--void);border:1px solid var(--rule);padding:10px 12px;font-size:.74rem;line-height:1.4;white-space:pre;color:var(--ink-dim);overflow-x:auto;max-width:100%;margin:0}
.neo .k{color:var(--violet)}.neo .s{color:var(--ink)}.neo .h{color:var(--amber)}
.neo-cap{font-size:.7rem;color:var(--ink-dim);margin-top:4px;display:flex;justify-content:space-between}

/* tables, directory */
.dir-path{font-size:var(--step--1);background:var(--void);border:1px solid var(--rule);padding:4px 8px;color:var(--ink-dim);margin-bottom:10px;overflow-wrap:anywhere}
.tbl{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:var(--step--1)}
th{text-align:left;font-weight:400;color:var(--violet);border-bottom:1px solid var(--rule);padding:4px 8px}
td{padding:6px 8px;border-bottom:1px dashed var(--rule-soft);vertical-align:top}
.dir td{white-space:nowrap}
.dir td:first-child{white-space:normal;overflow-wrap:anywhere}
.dir .when{color:var(--ink-dim)}
.dir tbody tr[aria-selected="true"] .when{color:var(--sel-ink)}
.newest{display:inline-block;margin-left:6px;padding:0 5px;border:1px solid var(--ink-dim);color:var(--ink-dim);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.dir tbody tr[aria-selected="true"] .newest{color:var(--sel-ink);border-color:var(--sel-ink)}
.dir tbody tr{cursor:pointer}
.dir tbody tr:hover td{background:var(--bar)}
.dir tbody tr[aria-selected="true"] td{background:var(--sel-bg);color:var(--sel-ink)}
.dir tbody tr[aria-selected="true"] td:first-child{box-shadow:inset 2px 0 0 var(--amber)}
.dir td:first-child::before{content:"▸ ";color:var(--ink-dim)}
.state{display:inline-block;padding:0 6px;border:1px solid currentColor;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.st-live,.st-released,.st-working{color:var(--amber)}.st-building,.st-indev,.st-wip{color:var(--ok)}.st-idea{color:var(--ink-dim)}
.detail{margin-top:12px;border:1px solid var(--rule);background:var(--void);padding:12px 14px;display:grid;gap:8px}
.detail h3{font-family:var(--f-display);font-size:var(--step-1);font-weight:700}
.detail ul{margin:0;padding-left:1.1em;color:var(--ink-dim);font-size:var(--step--1)}
.detail .links{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:var(--step--1)}
.lab-head{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.stat{flex:1 1 110px;border:1px solid var(--rule);padding:6px 10px;background:var(--void)}
.stat b{display:block;font-family:var(--f-crt);font-size:1.7rem;font-weight:400;line-height:1;font-variant-numeric:tabular-nums}
.stat span{font-size:.7rem;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.08em}
.stat.okc b{color:var(--ok)}.stat.amb b{color:var(--amber)}
.sample{font-size:.7rem;color:var(--amber);border:1px dashed var(--amber);padding:0 6px;align-self:center;text-transform:uppercase;letter-spacing:.08em}
.strip{display:grid;grid-template-columns:repeat(30,1fr);gap:2px;min-width:180px;height:14px}
.strip i{background:var(--ok);opacity:.8}.strip i.w{background:var(--amber)}.strip i.d{background:#4a4a4a}.strip i.n{background:var(--rule-soft)}
.svc{display:flex;align-items:center;gap:8px}
.pill{font-size:.7rem;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;background:currentColor}
.pill.up{color:var(--ok)}.pill.test{color:var(--amber)}
.log{list-style:none;margin:0;padding:0}
.log li{display:grid;grid-template-columns:7.5em 5.5em minmax(0,1fr);gap:10px;padding:7px 0;border-bottom:1px dashed var(--rule-soft);font-size:var(--step--1)}
.log time{color:var(--ink-dim);font-variant-numeric:tabular-nums}
.log .tag{color:var(--violet)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.gallery figure{margin:0;background:var(--void);border:1px solid var(--rule);padding:8px}
.gallery .empty{aspect-ratio:16/9;display:grid;place-items:center;color:var(--ink-dim);font-size:var(--step--1);border:1px dashed var(--rule)}
.gb-form{display:grid;gap:6px;max-width:560px}
.gb-form label{font-size:var(--step--1);color:var(--ink-dim)}
.gb-form input,.gb-form textarea,.codebox input{background:var(--void);border:1px solid var(--rule);color:var(--ink);font:inherit;font-size:var(--step--1);padding:6px 8px;width:100%}
.gb-form textarea{min-height:80px;resize:vertical}
.gb-form .btn{justify-self:start}
.gb-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.gb-list li{border:1px solid var(--rule);padding:8px 10px;background:var(--void);font-size:var(--step--1);overflow-wrap:anywhere;min-width:0}
.gb-list .who{color:var(--amber);font-weight:600}
.gb-list .when{color:var(--ink-dim);margin-left:6px}
.gb-empty{font-size:var(--step--1);color:var(--ink-dim);border:1px dashed var(--rule);padding:10px;text-align:center}
.codebox{display:flex;gap:6px;margin-top:8px}
.codebox{flex-wrap:wrap;align-items:center}
.codebox input{flex:1 1 200px;min-width:0;color:var(--ink-dim)}
.codebox input:disabled{border-style:dashed;opacity:1;-webkit-text-fill-color:var(--ink-dim)}
.btn:disabled{border-style:dashed;color:var(--ink-dim);cursor:not-allowed}
.btn:disabled:hover{border-color:var(--rule);color:var(--ink-dim)}

/* ad window: third-party images, grey until someone points at them */
.ad-win{margin-top:14px}
.ad-win .win-body{padding:10px}
/* Two ads side by side, each scaling to its half and keeping the 722x84 image shape: a frame's height is the image's, plus room for Ari's credit line. */
.ad-slot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:center}
.ad-cell{container-type:inline-size;min-width:0}
.ad-cell>*{--w:min(100cqw,722px);display:block;width:var(--w);max-width:100%;margin:0 auto}
/* color-scheme: light keeps the frame's canvas see-through, so the dark background shows instead of browser white */
.ad-frame{border:0;background:var(--void);color-scheme:light;filter:grayscale(1)}
.ad-ari{height:calc(var(--w)*84/722 + 14px)}
.ad-john{height:calc(var(--w)*.12367 + 2px)}
.ad-wait{aspect-ratio:722/84;background:var(--void)}
@container (max-width:480px){.ad-ari{height:calc(var(--w)*84/722 + 26px)}}
/* SIGNAL LOST: stands in for an ad whose network failed, same shape, grey noise from the boots */
.ad-cell>.ad-lost{position:relative;display:grid;place-items:center;aspect-ratio:722/84;overflow:hidden;background:#050505}
.ad-lost canvas{position:absolute;inset:0;width:100%;height:100%}
.ad-lost p{position:relative;padding:1px 8px;background:rgba(5,5,5,.8);font-family:var(--f-crt);font-size:clamp(14px,3.4cqw,26px);line-height:1;letter-spacing:.06em;text-align:center;color:var(--phos)}
.ad-lost small{display:block;margin-top:1px;font-size:clamp(11px,2.1cqw,16px);letter-spacing:.02em;color:var(--phos-dim)}
@media (max-width:1100px){.ad-slot{grid-template-columns:minmax(0,1fr)}}
/* side by side, each ad hugs the gap, so it stays small even when the window is wider than two ads */
@media (min-width:1101px){.ad-cell:first-child>*{margin-right:0}.ad-cell:last-child>*{margin-left:0}}
/* the whole window for hover, because a cross-origin frame hides the pointer from this page once it is inside */
.ad-win:hover .ad-frame,.ad-cell:focus-within .ad-frame{filter:none}

/* footer */
.foot{margin-top:14px;border:1px solid var(--rule);background:var(--panel);padding:10px 14px;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:space-between;font-size:var(--step--1);color:var(--ink-dim)}
.foot .toggles{display:flex;flex-wrap:wrap;gap:6px}
.hits{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-crt);font-size:1.05rem;white-space:nowrap}
.hits .sample{font-family:var(--f-body)}
.fortune{flex:1 1 100%;margin:0;font-family:var(--f-crt);font-size:1.05rem;line-height:1.2}
.fortune span:last-child{color:var(--ink)}

/* ---------- scanlines + VHS line ---------- */
.fx-scan::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;background:repeating-linear-gradient(to bottom,var(--scan) 0 1px,transparent 1px 3px)}
.fx-vhs::after{content:"";position:fixed;left:0;right:0;top:-20vh;height:15vh;pointer-events:none;z-index:61;
  background:linear-gradient(to bottom,transparent,rgba(var(--vhs),.045) 35%,rgba(var(--vhs),.08) 50%,rgba(var(--vhs),.045) 65%,transparent);animation:sweep 9s linear infinite}
@keyframes sweep{to{transform:translateY(140vh)}}

/* ---------- responsive ---------- */
/* in the narrow nav rail the description runs under the star and name, so it wraps to two lines instead of four */
@media (min-width:761px){.idcard>div{display:contents}.idcard p{grid-column:1/-1;margin-top:0}}
@media (max-width:1120px){
  .grid{grid-template-columns:230px minmax(0,1fr)}
  .rail-r{grid-column:1/-1}
  .rail-r .render-prev{max-width:420px}
}
@media (max-width:760px){
  .grid{grid-template-columns:minmax(0,1fr)}
  /* phones: nav, then the page, then everything else, so each tap lands on new content */
  .rail-l{display:contents}
  .content{order:1}
  .rail-l>[data-win=status],.rail-l>[data-win=tape]{order:2}
  .rail-r{order:3}
  .nav{flex-direction:row;flex-wrap:wrap;gap:4px}
  .nav a{border-left:0;border:1px solid var(--rule);padding:3px 8px}
  .portrait img{width:88px;height:88px}
  .ph-hide{display:none}
  .nodes td,.nodes th{padding-inline:4px}
  .strip{min-width:140px}
  .log li{grid-template-columns:6.8em minmax(0,1fr)}
  .log .tag{display:none}
  .dir th:nth-child(2),.dir td:nth-child(2){display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition:none!important}
}



/* ---------- mono + red refinements: red only for the star/brand dot, the current page, hover/active and the online dot ---------- */
:root[data-pal="mono"] .nav a[aria-current]{border-left-color:var(--antares)}
:root[data-pal="mono"] .nav a:hover{border-left-color:var(--antares)}
:root[data-pal="mono"] a:hover{text-decoration-color:var(--antares)}
:root[data-pal="mono"] .dir tbody tr[aria-selected="true"] td:first-child{box-shadow:inset 2px 0 0 var(--antares)}
:root[data-pal="mono"] .live{color:var(--ink-dim)}

/* ---------- CRT boots (WebGL) ---------- */
.boot-crt{background:#000}
.boot-crt canvas{position:absolute;inset:0;width:100%;height:100%}
.boot-crt .crt-flat{filter:drop-shadow(0 0 4px rgba(255,255,255,.35))}
.boot-crt.leaving canvas{animation:crtoff2 .4s cubic-bezier(.7,0,.9,.4) forwards}
.boot-crt.leaving{animation:fade .15s .35s forwards}
/* a hard cut instead of the power-off, for the boots that end on one */
.boot-cut.leaving canvas{animation:none}
.boot-cut.leaving{animation:fade .08s forwards}
@keyframes crtoff2{0%{transform:scale(1,1);filter:brightness(1)}55%{transform:scale(1,.006);filter:brightness(3)}100%{transform:scale(0,.006);filter:brightness(5)}}

/* =================== BOOT SCREENS =================== */
.boot{position:fixed;inset:0;z-index:200;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none}
.boot-hint{position:absolute;right:max(16px,env(safe-area-inset-right,0px));bottom:max(14px,env(safe-area-inset-bottom,0px));z-index:20;font-family:var(--f-crt);font-size:1.1rem;color:rgba(255,255,255,.75);text-shadow:1px 1px 0 #000}
.boot-hint .k{border:1px solid currentColor;padding:0 6px;margin-right:6px}
.boot.leaving{pointer-events:none}

@keyframes fade{to{opacity:0}}