/* base.css: tokens, layout, components. Always loaded; decorative motion lives in motion.css, fonts are inlined in the pages. */
:root{color-scheme:dark light;--maze-wall:#3B6FD6;--maze-glow:rgba(59,111,214,.16);--pellet:#F4F1E8;--bg:#0F1012;--surface:#15161B;--text:#ECEAE4;--text-2:#A9ABB3;--text-3:#858893;--rule:#262830;--rule-strong:#6C7080;--accent:#FFB000;--accent-text:#FFB000;--accent-hover:#E69E00;--accent-bright:#FFB000;--on-accent:#0F1012;--cta-fill:#FFB000;--cta-border:#FFB000;--focus:#FFB000;--track:#262830;--track-fill:#FFB000;--mon-bg:#0000AA;--mon-text:#AAAAAA;--mon-bright:#FFFFFF;--mon-ok:#7FE08A;--mon-dim:#5555FF;--mon-scanline:rgba(0,0,0,.10);--mon-bezel:#4B5370;--mon-bezel-edge:#7C8AA3;--mon-bezel-rim:#6C7080;--mon-bezel-text:#DDE1EC;--mon-led:#FFB000;--mascot-idle:var(--px-mascot-dark-idle-strip);--mascot-run:var(--px-mascot-dark-run-strip);--mascot-jump:var(--px-mascot-dark-jump-strip);--crt-strip:var(--px-crt-dark-strip);--font-sans:"Instrument Sans","Instrument Sans Fallback",Arial,sans-serif;--font-mono:"JetBrains Mono","JetBrains Mono Fallback",Menlo,Consolas,monospace;--font-pixel:"Departure Mono","Departure Mono Fallback",Menlo,monospace;--step--1:clamp(0.8854rem,0.859rem + 0.1174vw,0.95rem);--step-0:clamp(1.0625rem,1.0114rem + 0.2273vw,1.1875rem);--step-1:clamp(1.275rem,1.1893rem + 0.3807vw,1.4844rem);--step-2:clamp(1.53rem,1.3969rem + 0.5918vw,1.8555rem);--step-3:clamp(1.836rem,1.6383rem + 0.8788vw,2.3193rem);--step-5:clamp(2.6438rem,2.2429rem + 1.782vw,3.624rem);--display-2:clamp(1.625rem,1.1648rem + 2.0455vw,2.75rem);--display:clamp(2.75rem,1.1136rem + 7.2727vw,6.75rem);--lh-body:1.55;--mono-12:12px;--mono-13:13px;--mono-14:14px;--px-22:22px;--px-22-lh:28px;--px-33:33px;--px-33-lh:42px;--gutter:24px;--content-max:1200px;--margin:16px;--header-h:56px;--status-h:56px;--space-section:72px;--radius:2px;--fast:120ms;--ui:200ms;--reveal:350ms;--draw:500ms;--ease:cubic-bezier(.2,.7,.2,1);}
:root[data-theme="light"]{color-scheme:light;--maze-wall:#2F5BC0;--maze-glow:rgba(47,91,192,.10);--pellet:#4E525C;--bg:#F4F2EC;--surface:#FBFAF7;--text:#15161A;--text-2:#4E525C;--text-3:#646873;--rule:#D8D4CA;--rule-strong:#7E828D;--accent:#9A5C00;--accent-text:#7A4B00;--accent-hover:#F0A600;--accent-bright:#9A5C00;--on-accent:#15161A;--cta-fill:#FFB000;--cta-border:#9A5C00;--focus:#7A4B00;--track:#D8D4CA;--track-fill:#9A5C00;--mon-bezel:#D9C8A9;--mon-bezel-edge:#0F1020;--mon-bezel-rim:#0F1020;--mon-bezel-text:#15161A;--mascot-idle:var(--px-mascot-light-idle-strip);--mascot-run:var(--px-mascot-light-run-strip);--mascot-jump:var(--px-mascot-light-jump-strip);--crt-strip:var(--px-crt-light-strip);}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){color-scheme:light;--maze-wall:#2F5BC0;--maze-glow:rgba(47,91,192,.10);--pellet:#4E525C;--bg:#F4F2EC;--surface:#FBFAF7;--text:#15161A;--text-2:#4E525C;--text-3:#646873;--rule:#D8D4CA;--rule-strong:#7E828D;--accent:#9A5C00;--accent-text:#7A4B00;--accent-hover:#F0A600;--accent-bright:#9A5C00;--on-accent:#15161A;--cta-fill:#FFB000;--cta-border:#9A5C00;--focus:#7A4B00;--track:#D8D4CA;--track-fill:#9A5C00;--mon-bezel:#D9C8A9;--mon-bezel-edge:#0F1020;--mon-bezel-rim:#0F1020;--mon-bezel-text:#15161A;--mascot-idle:var(--px-mascot-light-idle-strip);--mascot-run:var(--px-mascot-light-run-strip);--mascot-jump:var(--px-mascot-light-jump-strip);--crt-strip:var(--px-crt-light-strip);}}
:root[data-theme="dark"]{color-scheme:dark}
@media (min-width:600px){:root{--header-h:64px}}
@media (min-width:900px){:root{--margin:32px;--space-section:112px}}
@media (min-width:1280px){:root{--margin:48px}}
/* base */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);color:var(--text);font:400 100%/var(--lh-body) var(--font-sans);font-synthesis:none;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:16px}
body{margin:0;background:var(--bg);color:var(--text);font-size:var(--step-0)}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
svg{max-width:100%}
a{color:inherit;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;top:8px;left:8px;z-index:20;padding:12px 16px;background:var(--cta-fill);color:var(--on-accent);border-radius:var(--radius);font-weight:500;text-decoration:none;transform:translateY(-300%)}
.skip:focus{transform:none}
.wrap{position:relative;max-width:calc(var(--content-max) + 2*var(--margin));margin-inline:auto;padding-inline:var(--margin)}
.mono,.hud-dl,.readout,.site-nav,.tags,.dates,.org,.progression,.facts,.tagline,.links,.foot-lines,.foot-nav,.key,.theme-label,.bezel-bar,.post-rows{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.eyebrow,.idx,.lvl,.caption,.egg,.post-title,.prompt,.nf-h1{font:400 var(--px-22)/var(--px-22-lh) var(--font-pixel);letter-spacing:0;overflow-wrap:anywhere}
.eyebrow,.idx,.lvl{color:var(--accent-text)}
.label,.readout,.site-nav a,.foot-nav a,.theme-label,.bezel-bar{font-size:var(--mono-12);text-transform:uppercase;letter-spacing:.08em;color:var(--text-3)}
.sep{color:var(--text-3);margin:0 4px}
.as-is{text-transform:none}
@media (max-width:599px){.links{column-gap:14px}.links .sep{display:none}}
html:not(.js) .controls,html:not(.js) .copy,html:not(.js) .post-btn{display:none}
/* header */
.site-header{border-bottom:1px solid var(--rule);background:var(--bg)}
.site-header .wrap{display:flex;align-items:center;gap:16px;height:var(--header-h)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;font-size:15px;line-height:1}
.brand .px-monogram{--px-scale:2}
.site-nav{display:none}
.site-nav a{display:inline-flex;align-items:center;height:32px;padding:0 10px;color:var(--text-2);text-decoration:none;white-space:nowrap}
.site-nav a:hover{color:var(--text)}
.site-nav a[aria-current="true"]{color:var(--text);box-shadow:inset 0 -2px var(--accent)}
.keys{display:flex;gap:8px;margin-left:auto}
.key{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border:1px solid var(--rule-strong);border-radius:var(--radius);background:transparent;color:var(--text-2);font-size:var(--mono-12);line-height:1;cursor:pointer;white-space:nowrap}
.key:hover{color:var(--text);border-color:var(--text-3)}
.key[aria-disabled="true"]{color:var(--text-3);cursor:default}
@media (max-width:599px){.brand-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}}
@media (min-width:600px){.key{min-height:32px}}
@media (min-width:1024px){html{scroll-padding-top:72px}.site-header{position:sticky;top:0;z-index:10}.site-nav{display:flex;gap:2px;margin-left:auto}.keys{margin-left:0}}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:1px solid var(--cta-border);border-radius:var(--radius);font-weight:500;font-size:15px;line-height:1.2;text-decoration:none;color:var(--text);background:transparent;white-space:nowrap}
.btn-primary{background:var(--cta-fill);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-secondary{border-color:var(--rule-strong)}
.btn-secondary:hover{border-color:var(--accent);color:var(--text)}
.links{display:flex;flex-wrap:wrap;align-items:center;font-size:var(--mono-13);color:var(--text-2)}
.links a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:.25em}
.links a span[aria-hidden]{margin-left:.3em}
.links a:hover{color:var(--text)}
@media (min-width:600px){.btn{min-height:40px}.links a{min-height:40px}}
/* hero; rain.js places the binary rain canvas in the part of the hero that holds no text (it sets the box) */
.hero{position:relative}.rain{position:absolute;left:0;top:0;pointer-events:none;image-rendering:pixelated}
.hero .wrap{padding-top:24px;padding-bottom:140px}
.hero .wrap::after,.section .wrap::after{content:"";position:absolute;left:var(--margin);right:var(--margin);bottom:-1px;border-top:1px solid var(--rule)}
.hero h1{font-size:var(--display);font-weight:600;line-height:.95;letter-spacing:-.025em;margin:8px 0;overflow-wrap:anywhere}
.hero .title{font-size:var(--display-2);line-height:1.2;color:var(--text-2);margin:0 0 12px}
.cursor{display:inline-block;width:.55em;height:1em;margin-left:.12em;vertical-align:-.12em;background:var(--accent-bright)}
.lede{font-size:var(--step-1);line-height:1.45;max-width:34ch;margin:0 0 16px}
.hud-dl{display:grid;grid-template-columns:72px minmax(0,1fr);gap:0 12px;font-size:var(--mono-13);line-height:22px;margin:0 0 20px}
.hud-dl div{display:contents}
.hud-dl dt{color:var(--text-3);text-transform:uppercase;letter-spacing:.08em}
.hud-dl dd{color:var(--text-2);overflow-wrap:anywhere}
.hud-dl a{display:inline-block;padding-block:3px;margin-block:-3px}
.hud-dl a:hover{color:var(--text)}
.hud-dl .px-cactus{--px-scale:2;margin:-2px 0 -2px 8px;vertical-align:-5px}
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.ctas .links{flex-basis:100%}
i.mascot{--px-scale:3;position:absolute;right:var(--margin);bottom:0}
.mascot.px-frame>.strip,.runner.px-frame>.strip{background-image:var(--mascot-idle)}
@media (min-width:900px){.hero .wrap{padding-top:96px;padding-bottom:96px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}.hero-text{grid-column:1/span 8}.ctas .links{flex-basis:auto;margin-left:8px}i.mascot{--px-scale:6}}
/* sections, status bars */
.section .wrap{padding-bottom:var(--space-section)}
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;min-height:var(--status-h);position:relative;padding:10px 0}
.bar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:0;border-top:1px solid var(--rule);transform-origin:left}
.bar h2{font-size:var(--step-1);font-weight:600;line-height:1.2}
.readout{flex-basis:100%}
.intro{max-width:52ch;color:var(--text-2);margin:24px 0 0}
@media (min-width:600px){.readout{flex-basis:auto;margin-left:auto}}
/* tags (experience, side quests) */
.tags{display:flex;flex-wrap:wrap;gap:6px;font-size:var(--mono-12)}
.tags li{padding:3px 7px;border:1px solid var(--rule);border-radius:var(--radius);color:var(--text-2);line-height:1.3}
/* experience: the career route. Without JS the stops are plain cards; maze.js draws the corridor around them */
.maze{position:relative;margin-top:28px;--lane-l:58px;--lane-r:0px;--band:170px}
.stops{display:grid;gap:16px}
.stop{position:relative;z-index:2;display:grid;gap:8px;min-width:0;padding:20px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius)}
.stop-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 16px}
.dates{font-size:var(--mono-13);color:var(--text-2)}
.stamp{margin-left:auto;font:400 var(--px-22)/var(--px-22-lh) var(--font-pixel);color:var(--accent-text);visibility:hidden}
.stop h3{font-size:var(--step-1);font-weight:600;line-height:1.25}
.org{font-size:var(--mono-14);color:var(--text-2)}
.progression{font-size:var(--mono-13);color:var(--text-3);line-height:1.6;max-width:70ch}
.summary,.bullets{max-width:62ch;color:var(--text-2)}
.bullets li{position:relative;padding-left:18px}
.bullets li+li{margin-top:6px}
.bullets li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;background:var(--pellet)}
.foe{display:flex;align-items:center;gap:10px;margin-top:4px;padding-top:10px;border-top:1px dashed var(--rule);font-family:var(--font-mono);font-size:var(--mono-12);text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)}
.foe .px-anim-foes{--px-scale:2;flex:none}
.foe .px-frame,.maze-actors .px-frame{overflow:hidden}
.foe .px-anim-foes>.strip{width:100%;background-size:480px 100%;background-position:calc(var(--f,0)*-24px) 0;transform:none}
.px-anim-foes>.strip{transform:translateX(calc(var(--f,0)*-5%))}
.foe-state{margin-left:auto;white-space:nowrap}
.goal{position:relative;z-index:2;display:grid;justify-items:center;gap:6px;margin-top:16px;padding:20px;text-align:center;background:var(--bg);border:1px dashed var(--rule-strong);border-radius:var(--radius)}
.goal-title{font-size:var(--step-1);font-weight:600}
.goal-text{color:var(--text-2)}
.maze-key,.maze-hud,.maze-board,.maze-actors{display:none}
html.js .maze-key{display:block;margin-top:12px;font-family:var(--font-mono);font-size:var(--mono-12);text-transform:uppercase;letter-spacing:.08em;color:var(--text-3)}
html.js .maze-hud{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;padding:10px 0;background:var(--bg);border-block:1px solid var(--rule);font:400 15px/20px var(--font-pixel);white-space:nowrap;color:var(--text-2)}
.maze-hud .k{color:var(--text-3);margin-right:8px}
.maze-hud .score{color:var(--text)}
.maze-hud .mid{display:flex;align-items:center;gap:10px;color:var(--accent-text)}
.pips{display:flex;gap:4px}
.pips i{width:8px;height:8px;border:1px solid var(--rule-strong)}
.pips i.on{background:var(--accent);border-color:var(--accent)}
html.js .maze{margin-top:0;padding:180px 0 40px}
html.js .stops{gap:var(--band);margin:0 var(--lane-r) 0 var(--lane-l)}
html.js .goal{margin:var(--band) var(--lane-r) 0 var(--lane-l)}
html.js .maze-board,html.js .maze-actors{display:block;position:absolute;left:0;top:0;pointer-events:none}
.maze-actors{z-index:1;width:100%;height:100%}
.maze-board path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.maze-board .glow{stroke:var(--maze-glow)}
.maze-board .walls{stroke:var(--maze-wall)}
.maze-board .floor{stroke:var(--bg)}
.maze-board .pellet{fill:var(--pellet)}
.maze-board .power{fill:var(--accent)}
.maze-board .eaten{visibility:hidden}
.maze-actors .maze-runner{--px-scale:2;position:absolute;left:0;top:0;width:48px;height:48px}
.maze-runner>.strip{width:288px;height:100%;background-image:var(--mascot-run);transform:translateX(calc(var(--f,0)*-48px))}
.maze-runner.is-idle>.strip{width:96px;background-image:var(--mascot-idle);transform:none}
.maze-actors .maze-foe{--px-scale:3;position:absolute;left:0;top:0}
.maze-actors .is-caught{visibility:hidden}
.maze-start,.maze-pop{position:absolute;font:400 15px/18px var(--font-pixel);color:var(--accent-text);white-space:nowrap}
.maze-start{transform:translateY(-50%)}
.maze-start::before{content:"PLAYER 1\A READY!";white-space:pre}
.maze-pop::before{content:attr(data-text)}
.maze-pop{z-index:4;transform:translate(-50%,-50%)}
.maze-pop.big{font-size:var(--px-22);line-height:var(--px-22-lh);color:var(--text)}
.stop.is-reached{border-color:var(--rule-strong)}
.stop.is-current{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.is-reached .stamp{visibility:visible}
.is-won .foe-state{color:var(--accent-text)}
@media (max-width:420px){.maze-hud .k,.pips{display:none}}
@media (min-width:900px){.maze{--lane-l:clamp(170px,16vw,210px);--lane-r:var(--lane-l)}.stop{padding:24px 28px}}
@media (min-width:1024px){html.js .maze-hud{top:var(--header-h)}}
i.flag{--px-scale:2;position:absolute;right:0;bottom:0}
.flag>i.glint{position:absolute;left:0;top:0;clip-path:inset(100%)}
.flag.px-frame>.strip{transform:translateX(-75%)}
/* skills: one dark screen of pixel logos (logos.png, built from art/logos.json) in both themes. logos.js lets them drift and collide; without it, or with motion off, they sit in a grid */
.logo-box{--s:40px;--h:520px;margin-top:32px;background:radial-gradient(#262A40 1px,transparent 1.5px) 0 0/20px 20px,#0F1020;border:1px solid var(--rule-strong);border-radius:var(--radius);color:#B8C1CF}
.logo-bar{display:flex;justify-content:space-between;gap:16px;padding:8px 14px;border-bottom:1px solid #262A40;background:#0F1020;font:400 15px/20px var(--font-pixel);white-space:nowrap}
.logo-cap{overflow:hidden;text-overflow:ellipsis;color:#FFB000}
.logos{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:calc(var(--s)/3);padding:24px 16px;overflow:hidden}
html.js .logos{height:var(--h)}
.logos li{flex:none;width:var(--s);height:var(--s);background:url(/assets/img/logos.png) calc(var(--i)*-1*var(--s)) 0/calc(37*var(--s)) 100% no-repeat;image-rendering:pixelated;touch-action:manipulation}
.logos.is-live li{position:absolute;left:0;top:0;cursor:pointer;will-change:transform}
.logos li:hover,.logos li.is-on{--o:calc(var(--s)/24);filter:drop-shadow(var(--o) 0 #FFB000) drop-shadow(calc(-1*var(--o)) 0 #FFB000) drop-shadow(0 var(--o) #FFB000) drop-shadow(0 calc(-1*var(--o)) #FFB000)}
@media (min-width:600px){.logo-box{--s:48px;--h:440px}}
@media (min-width:900px){.logo-box{--s:60px;--h:460px}}
@media print{.logo-bar{display:none}.logos{display:block;height:auto!important}.logos li{display:inline;position:static!important;transform:none!important;background:none}.logos li+li::before{content:" · "}.logos .sr-only{position:static;clip-path:none;width:auto;height:auto;margin:0}}
/* side quests */
.quest-grid{display:grid;gap:24px;margin-top:32px}
.quest{position:relative;background:var(--surface);border:1px solid var(--rule-strong);border-radius:var(--radius);padding:24px}
.quest:is(:hover,:focus-within){border-color:var(--accent)}
i.quest-icon{--px-scale:2;position:absolute;right:24px;top:24px}
.quest-logo{position:absolute;right:24px;top:20px;width:56px;height:56px}.quest-logo~:is(.eyebrow,h3){padding-right:64px}
.quest h3{font-size:var(--step-2);font-weight:600;line-height:1.2;margin-top:6px;padding-right:40px;overflow-wrap:anywhere}
.tagline{font-size:var(--mono-13);color:var(--text-2);margin:8px 0 16px;line-height:1.6;max-width:60ch}
.quest>p{max-width:50ch}
.facts{margin-top:16px;padding-left:14px;border-left:2px solid var(--accent);font-size:var(--mono-13);line-height:1.6;color:var(--text-2);max-width:70ch}
.facts li+li{margin-top:6px}
.quest .tags{margin-top:16px}
@media (min-width:600px){i.quest-icon{--px-scale:3}.quest h3{padding-right:64px}.quest-logo{top:24px;width:72px;height:72px}.quest-logo~:is(.eyebrow,h3){padding-right:88px}}
@media (max-width:359px){.quest{padding:20px}i.quest-icon,.quest-logo{right:20px}i.quest-icon{top:20px}.email a{font-size:var(--step-1)}}
@media (min-width:900px){.quest-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gutter)}.quest{padding:32px}i.quest-icon{right:32px;top:32px}.quest-logo{right:32px;top:28px;width:112px;height:112px}.quest-logo~:is(.eyebrow,h3){padding-right:128px}}
.quest .links{margin-top:16px}
@media (min-width:900px){.quest-wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--gutter);align-content:start}.quest-wide>.eyebrow,.quest-wide>h3,.quest-wide>.tagline{grid-column:1/-1}.quest-wide>.facts{grid-column:2;grid-row:4/span 3;margin-top:0}}
/* about + monitor */
.about-grid{margin-top:32px}
.story p+p{margin-top:1em}
.story p{max-width:50ch}
.pull{margin-top:28px;padding-left:16px;border-left:2px solid var(--accent);font-size:var(--step-1);font-weight:600;line-height:1.35;max-width:26ch}
.monitor{background:var(--mon-bezel);border:1px solid var(--mon-bezel-rim);box-shadow:inset 0 0 0 1px var(--mon-bezel-edge);border-radius:var(--radius);padding:12px;margin-top:40px}
.screen{position:relative;background:var(--mon-bg);color:var(--mon-text);padding:24px;border:1px solid transparent;border-image:repeating-linear-gradient(0deg,var(--mon-scanline) 0 2px,transparent 2px 4px) 0 fill;box-shadow:0 0 0 1px #000}
.post-title{color:var(--mon-bright);font-weight:400;margin-bottom:12px}
.post-rows{font-size:var(--mono-14);line-height:22px}
.post-row{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px}
.post-row .dots{flex:1 1 16px;min-width:16px;height:0;border-bottom:2px dotted var(--mon-dim);align-self:center;margin-top:2px}
.post-row .st{margin-left:auto;text-align:right}
.ok{color:var(--mon-ok)}
.prompt{color:var(--mon-bright);margin-top:12px}
.prompt .cursor{background:var(--mon-led)}
.bezel-bar{display:flex;align-items:center;gap:10px;min-height:28px;margin-top:8px;color:var(--mon-bezel-text)}
.led{width:8px;height:8px;background:var(--mon-bezel-rim);border:1px solid var(--mon-bezel-edge);flex:none}
.monitor.is-on .led,html:not(.js) .led{background:var(--mon-led)}
.post-btn{margin-left:auto;min-height:24px;padding:0 10px;font:inherit;letter-spacing:inherit;text-transform:inherit;background:transparent;color:inherit;border:1px solid currentColor;border-radius:var(--radius);cursor:pointer}
.post-btn:hover{background:var(--mon-bezel-text);color:var(--mon-bezel)}
html.js .monitor:not(.is-on) .screen{background:#000}
html.js .post-row[data-state="pending"],html.js .prompt[data-state="pending"]{clip-path:inset(0 100% 0 0)}
html.js .post-row[data-state="label"]>:not(.lbl){clip-path:inset(0 100% 0 0)}
@media (max-width:599px){.monitor{margin-inline:calc(-1*var(--margin));padding:8px;border-radius:0;border-left:0;border-right:0}.screen{padding:12px}.bezel-bar{min-height:36px;padding:0 4px}.post-btn{min-height:32px}}
@media (min-width:600px) and (max-width:899px){.monitor{max-width:560px}}
@media (min-width:900px){.about-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start}.story{grid-column:1/6}.monitor{grid-column:7/13;max-width:560px;width:100%;justify-self:end;margin-top:0}}
@media (prefers-contrast:more){.screen{border-image:none}}
/* contact */
.contact-grid{margin-top:32px}
.contact .intro{margin-top:0}
.email{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.email a{font-size:var(--step-2);font-weight:600;line-height:1.2;text-decoration-thickness:2px;overflow-wrap:anywhere}
.email a:hover{text-decoration-thickness:3px}
.copy{padding:0 12px}
.contact .links{margin-top:12px}
.finish{position:absolute;right:var(--margin);bottom:0;display:flex;align-items:flex-end;gap:16px}
.finish i.flag{position:relative}
.caption{color:var(--text-2);padding-bottom:4px}
@media (min-width:900px){.contact-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}.contact-text{grid-column:1/8}.email a{font-size:var(--step-3)}}
/* footer */
.site-footer .wrap{padding-top:24px;padding-bottom:48px}
.foot-nav{display:flex;flex-wrap:wrap;gap:0 20px;padding-bottom:16px;border-bottom:1px solid var(--rule);margin-bottom:24px}
.foot-nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--text-2);text-decoration:none}
.foot-nav a:hover{color:var(--text);text-decoration:underline}
.foot-grid{display:grid;gap:24px}
.foot-lines{font-size:var(--mono-12);line-height:1.6;color:var(--text-3);max-width:72ch}
.foot-lines p+p{margin-top:8px}
.foot-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.theme{display:inline-flex;align-items:center;gap:8px;border:0;padding:0;margin:0;min-width:0}.theme legend{float:left;padding:0;margin-right:4px}.theme-opt{position:relative;display:inline-flex}.theme-opt input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}.theme-opt .key{cursor:pointer}.theme-opt input:checked+.key{color:var(--accent-text);border-color:var(--accent)}.theme-opt input:focus-visible+.key{outline:3px solid var(--focus);outline-offset:2px}
.egg-wrap{position:relative}
.egg{display:inline-flex;align-items:center;min-height:44px;background:none;border:0;padding:0 8px;color:var(--text-3);cursor:pointer}
.egg:hover{color:var(--text-2)}
i.egg-badge{--px-scale:2;position:absolute;left:50%;top:8px;margin-left:-12px;clip-path:inset(100%);pointer-events:none}
@keyframes egg-fade{0%{opacity:0}11%,89%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.egg-wrap.is-live i.egg-badge{clip-path:inset(0);translate:calc((var(--i,0) - 3.5)*28px) -40px;animation:egg-fade 1.9s linear 1 both}}
[data-motion="off"] .egg-wrap.is-live i.egg-badge{clip-path:inset(0);translate:calc((var(--i,0) - 3.5)*28px) -40px;animation:egg-fade 1.9s linear 1 both}
.mon-bright{color:var(--mon-bright)}
@media (min-width:600px){.foot-nav a{min-height:32px}.egg{min-height:32px}}
@media (min-width:900px){.foot-grid{grid-template-columns:minmax(0,1fr) auto;align-items:start}.foot-controls{justify-content:flex-end;max-width:420px}}
/* HUD (rendered only by motion.css) */
.hud{display:none}
@media (pointer:coarse){.key,.btn,.links a,.foot-nav a,.egg,.post-btn{min-height:44px}}
/* print, forced colors */
@media print{.controls,.hud,.skip,.post-btn,.copy,.egg-wrap,.foot-nav,.site-nav{display:none!important}.site-header{position:static}.section .wrap{padding-bottom:32px}}
@media (forced-colors:active){.btn,.key,.quest,.monitor,.tags li{border:1px solid ButtonText}.bar::after,.cursor,.led{background:CanvasText}.site-nav a[aria-current="true"]{box-shadow:none;border-bottom:2px solid CanvasText}.theme-opt input:checked+.key{forced-color-adjust:none;background:Highlight;color:HighlightText;border-color:Highlight}.egg{border:1px solid ButtonText}}

/* Switched-off CRT: with JS, the title stays dark until the power-on (rows and prompt already do) */
html.js .monitor:not(.is-on) .post-title{clip-path:inset(0 100% 0 0)}
/* photo, hobbies, wizard dialog */
.me{display:block;width:112px;height:201px;object-fit:cover;border:2px solid var(--text);border-radius:var(--radius);box-shadow:6px 6px 0 var(--accent);margin:8px 0 24px}
.hobbies{margin-top:48px}.hobbies ul{display:grid;gap:16px;margin-top:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.hobbies li{background:var(--surface);border:1px solid var(--rule-strong);border-radius:var(--radius);padding:20px}.hobbies li:hover{border-color:var(--accent)}
.hobbies b{display:block;font:400 var(--px-22)/var(--px-22-lh) var(--font-pixel);margin-bottom:6px}
.bafel img{float:right;width:72px;height:72px;margin:0 0 8px 12px;border:2px solid var(--accent);border-radius:50%}
.wizard{width:min(640px,92vw);padding:0;border:2px solid var(--accent);border-radius:var(--radius);background:var(--surface);color:var(--text)}.wizard::backdrop{background:rgba(0,0,0,.8)}
.wizard img{display:block;width:100%;height:auto}.wizard form{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;font-family:var(--font-mono)}
@media (min-width:900px){.me{width:144px;height:258px}}