@font-face{font-family:Pixel;src:url('fonts/pixel.woff2') format('woff2');font-display:block}
:root{
  --bg:#0b0b0a;--ink:#f1f0e8;--dim:#7d7f74;--line:#2a2b26;
  --acid:#dcff00;--hot:#ff2e88;--blue:#2d5bff;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --cur:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'%3E%3Cpath fill='%23dcff00' d='M10 0h4v8h-4zM10 16h4v8h-4zM0 10h8v4H0zM16 10h8v4h-8z'/%3E%3Cpath fill='%23ff2e88' d='M11 11h2v2h-2z'/%3E%3C/svg%3E") 12 12, crosshair;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:56px;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono);font-size:14px;cursor:var(--cur);overflow-x:hidden}
a,button{color:inherit;cursor:var(--cur)}
a{text-decoration:none}
button{font:inherit;background:none;border:0;padding:0}
::selection{background:var(--acid);color:var(--bg)}
:focus-visible{outline:2px solid var(--acid);outline-offset:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* boot */
#boot{position:fixed;inset:0;z-index:100;background:#000;color:var(--acid);display:flex;align-items:flex-end;padding:24px;transition:opacity .25s,transform .25s}
#boot pre{margin:0;font:13px/1.6 var(--mono);white-space:pre-wrap}
#boot.gone{opacity:0;transform:scaleY(.002);pointer-events:none}

/* bar */
.bar{position:sticky;top:0;z-index:20;height:48px;display:flex;align-items:center;gap:20px;padding:0 16px;background:var(--bg);border-bottom:1px solid var(--line)}
.brand{font:28px Pixel;line-height:1}
.brand sup{font:9px var(--mono)}
.ticker{flex:1;overflow:hidden;white-space:nowrap;font-size:11px;color:var(--dim);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ticker-track{display:inline-flex;animation:tick 40s linear infinite}
.ticker-track span{padding-right:2em}
.ticker b{color:var(--acid);font-weight:400}
@keyframes tick{to{transform:translateX(-50%)}}
.bar nav{display:flex;gap:18px;font-size:11px}
.bar nav a:hover{color:var(--acid)}

/* hero */
.hero{position:relative;height:calc(100svh - 48px);min-height:520px;overflow:hidden;touch-action:pan-y}
#swarm{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-ui{position:absolute;left:16px;right:128px;bottom:20px;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;pointer-events:none;font-size:11px;letter-spacing:.04em}
.hero-ui .tag{margin:0;color:var(--dim)}
.hero-ui .hint{margin:0;text-align:right;color:var(--dim)}
.hint b{color:var(--ink);font-weight:400;background:var(--line);padding:1px 4px}
.hero-corner{position:absolute;top:14px;right:16px;font-size:10px;color:var(--dim)}
.hero-corner span{color:var(--acid)}

/* shared section head */
section:not(.hero){padding:96px 16px;border-top:1px solid var(--line)}
.head{display:flex;align-items:baseline;gap:16px;margin-bottom:48px;flex-wrap:wrap}
.head>span:first-child{font-size:11px;color:var(--acid)}
.head h2{margin:0;font:400 clamp(44px,8vw,120px)/.85 Pixel;letter-spacing:-.02em}
.head .warn{margin-left:auto;font-size:11px;color:var(--hot);animation:blink 1.2s steps(2) infinite}
.head .warn small{color:var(--dim)}
@keyframes blink{50%{opacity:.35}}

/* stats */
.sheet{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:48px;max-width:1200px}
.portrait canvas{width:100%;aspect-ratio:1;image-rendering:pixelated;display:block;border:1px solid var(--line);background:#000}
.meta{margin:16px 0 0;font-size:11px}
.meta div{display:flex;justify-content:space-between;border-bottom:1px dashed var(--line);padding:7px 0}
.meta dt{color:var(--dim)}
.meta dd{margin:0}
.bars{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.bars li{display:grid;grid-template-columns:1fr auto;gap:6px 16px;align-items:end}
.bars .k{font-size:11px;color:var(--dim)}
.bars .v{font:clamp(26px,3.4vw,44px)/1 Pixel;text-align:right}
.bars .v small{font:11px var(--mono);color:var(--dim)}
.bars i{grid-column:1/-1;position:relative;height:18px;border:1px solid var(--ink);display:block}
.bars i b{position:absolute;left:0;top:-1px;bottom:-1px;width:0;background:var(--acid);transition:width 1.1s cubic-bezier(.2,.9,.2,1)}
.bars li.over i b{background:repeating-linear-gradient(90deg,var(--acid) 0 8px,var(--hot) 8px 10px);box-shadow:0 0 24px rgba(220,255,0,.35)}
.bars li.over i::after{content:"OVERFLOW " attr(data-x);position:absolute;left:6px;top:50%;transform:translateY(-50%);font-size:9px;font-weight:700;color:var(--bg);background:var(--acid);padding:0 4px;letter-spacing:.1em}
.bars li.over i{border-color:var(--hot);animation:crack .25s steps(2) 3}
.bars li.low i b{background:var(--dim)}
.bars li.low.over i::after{content:"";}
.bars em{grid-column:1/-1;font-style:normal;font-size:10px;color:var(--dim)}
@keyframes crack{50%{transform:translate(3px,-2px) skewX(-6deg)}}
.stats{overflow:hidden}

/* speedrun */
.splits{max-width:1100px;border:1px solid var(--line)}
.row{display:grid;grid-template-columns:1fr 90px 150px;gap:16px;padding:12px 16px;border-top:1px solid var(--line);align-items:center;opacity:.15;transform:translateX(-12px);transition:opacity .3s,transform .3s,background .3s}
.row.th{border-top:0;font-size:10px;color:var(--dim);opacity:1;transform:none}
.row.on{opacity:1;transform:none}
.row.flash{background:rgba(220,255,0,.12)}
.row span:nth-child(2){color:var(--dim);font-size:12px}
.row span:last-child{text-align:right;font-size:11px;letter-spacing:.08em}
.row:not(.th) span:first-child{font-size:15px}
.gold{color:var(--acid)}
.pb{color:#5cf2ff}
.skip{color:var(--hot)}
.live{color:var(--hot);animation:blink .8s steps(2) infinite}
.row.next span:first-child{font:24px Pixel}
.timer{max-width:1100px;display:flex;justify-content:space-between;align-items:baseline;padding:16px 0;font-size:11px;color:var(--dim)}
.timer b{font:400 clamp(40px,7vw,96px)/1 Pixel;color:var(--acid);font-variant-numeric:tabular-nums}

/* work */
.work{position:relative}
.job{display:grid;grid-template-columns:60px 1fr auto;grid-template-rows:auto auto;gap:4px 16px;padding:24px 0;border-top:1px solid var(--line);position:relative;z-index:1;transition:padding .25s,color .15s}
.job .n{font-size:11px;color:var(--dim);padding-top:10px}
.job .t{font:400 clamp(44px,9vw,140px)/.85 Pixel;letter-spacing:-.02em}
.job .d{grid-column:2;font-size:12px;color:var(--dim)}
.job .go{grid-row:1/3;grid-column:3;font:400 clamp(30px,5vw,64px) Pixel;align-self:center}
.job:hover{padding-left:24px;color:var(--bg);background:var(--acid)}
.job:hover .d,.job:hover .n{color:var(--bg)}
.peek{position:fixed;left:0;top:0;width:280px;height:200px;z-index:3;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.6) rotate(-6deg);transition:opacity .15s,transform .2s;background:#000 center/cover no-repeat;border:2px solid var(--bg);image-rendering:pixelated;overflow:hidden}
.peek.on{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-3deg)}
.peek .art{position:absolute;inset:0;display:grid;place-items:center;font:56px/0.9 Pixel;text-align:center;color:var(--acid)}
.peek .art.prism{background:var(--blue);color:var(--ink)}
.peek .art.rip{background:var(--hot);color:var(--bg)}

/* boss */
.arena{position:relative;height:min(78vh,720px);min-height:520px;border:1px solid var(--line);overflow:hidden;background:
  linear-gradient(transparent 62%,rgba(220,255,0,.05) 62%),
  repeating-linear-gradient(90deg,transparent 0 47px,rgba(255,255,255,.04) 47px 48px),
  repeating-linear-gradient(0deg,transparent 0 47px,rgba(255,255,255,.04) 47px 48px),#000}
.hud{position:absolute;left:16px;right:16px;top:16px;z-index:3}
.bossname{font-size:12px;letter-spacing:.06em;margin-bottom:6px}
.bossname b{color:var(--hot);font-weight:400;margin-right:8px}
.bossname span{color:var(--acid);margin-left:8px}
.hp{height:16px;border:2px solid var(--ink);padding:2px;background:#000}
.hp i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--hot),#ff8a3d 50%,var(--acid));transition:width .25s steps(6)}
.hpnum{font-size:11px;color:var(--dim);margin-top:4px;text-align:right}
.sprite{position:absolute;left:50%;top:54%;height:62%;aspect-ratio:244/640;transform:translate(-50%,-50%);transition:left .35s steps(5),top .35s steps(5)}
.sprite img{height:100%;width:auto;display:block;animation:bob 2.2s ease-in-out infinite;user-select:none;-webkit-user-drag:none;image-rendering:pixelated}
.sprite.hit img{filter:brightness(4) saturate(0);animation:none;transform:translateX(6px)}
.sprite.dead img{animation:die 1.4s steps(14) forwards}
@keyframes bob{50%{transform:translateY(-14px)}}
@keyframes die{0%{opacity:1}50%{opacity:.2;filter:hue-rotate(90deg)}100%{opacity:0;transform:translateY(60px) scaleY(0)}}
.dialog{position:absolute;left:16px;right:16px;bottom:16px;z-index:3;min-height:64px;padding:14px 16px;border:2px solid var(--ink);background:#000;font-size:14px;line-height:1.5}
.dialog::after{content:"▼";position:absolute;right:12px;bottom:6px;font-size:10px;animation:blink .8s steps(2) infinite}
.dmg{position:absolute;z-index:4;pointer-events:none;font:28px Pixel;color:var(--ink);text-shadow:2px 2px 0 #000;animation:pop .9s ease-out forwards}
.dmg.crit{font-size:46px;color:var(--acid)}
.dmg.crit::before{content:"CRITICAL!! ";font-size:.5em;color:var(--hot);display:block}
@keyframes pop{0%{transform:translate(-50%,0) scale(.4)}20%{transform:translate(-50%,-30px) scale(1.15)}100%{transform:translate(-50%,-90px) scale(1);opacity:0}}
.shard{position:absolute;z-index:2;width:8px;height:8px;background:var(--acid);pointer-events:none}
.arena.shake{animation:shake .18s steps(3)}
@keyframes shake{33%{transform:translate(-6px,3px)}66%{transform:translate(5px,-4px)}}
.loot{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;background:radial-gradient(circle,rgba(220,255,0,.18),#000 70%);text-align:center;padding:16px}
.loot[hidden]{display:none}
.loot .get{margin:0;font:400 clamp(40px,8vw,96px)/1 Pixel;color:var(--acid);animation:blink .5s steps(2) 6}
.loot .mail{font:400 clamp(22px,4.4vw,56px)/1.1 Pixel;border-bottom:3px solid var(--acid);word-break:break-all}
.loot .mail:hover{color:var(--acid)}
.socials{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.socials a,.socials button{border:1px solid var(--ink);padding:8px 14px;font-size:12px}
.socials a:hover,.socials button:hover{background:var(--ink);color:var(--bg)}
.coward{font-size:11px;color:var(--dim);margin:12px 0 0}
.coward button{text-decoration:underline;color:var(--dim)}
.coward button:hover{color:var(--hot)}

/* footer */
footer{display:flex;gap:16px 32px;flex-wrap:wrap;justify-content:space-between;padding:24px 16px 120px;border-top:1px solid var(--line);font-size:11px;color:var(--dim)}
footer .links{display:flex;gap:16px;flex-wrap:wrap}
footer a:hover{color:var(--acid)}
.egg{opacity:.35}

/* DO NOT PRESS */
.nope{position:fixed;right:16px;bottom:16px;z-index:60;width:96px;height:96px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff7ab4,var(--hot) 45%,#8a0038);color:#fff;font:11px/1.15 var(--mono);font-weight:700;letter-spacing:.05em;box-shadow:0 6px 0 #4d0020,0 10px 30px rgba(255,46,136,.4);transition:transform .08s,box-shadow .08s}
.nope:active{transform:translateY(5px);box-shadow:0 1px 0 #4d0020,0 4px 12px rgba(255,46,136,.4)}
.nope span{display:block;font-size:9px;font-weight:400;margin-top:3px}
.toast{position:fixed;right:124px;bottom:44px;z-index:60;max-width:min(320px,calc(100vw - 150px));background:var(--ink);color:var(--bg);padding:8px 12px;font-size:12px;opacity:0;transform:translateX(10px);transition:.2s;pointer-events:none}
.toast.on{opacity:1;transform:none}

/* chaos levels */
body.lv1 main{animation:jitter .3s steps(2) infinite}
@keyframes jitter{50%{transform:translate(1px,-1px)}}
main,footer{background:var(--bg)}
html.lv2 :is(main,.bar,footer){filter:invert(1) hue-rotate(180deg)}
html.lv2 :is(.sprite img,.peek){filter:invert(1) hue-rotate(180deg)}
body.lv4 main{transform:rotate(180deg);transition:transform 1.2s cubic-bezier(.7,-0.4,.3,1.4)}
body main{transition:transform 1.2s cubic-bezier(.7,-0.4,.3,1.4)}
.ghost{position:fixed;z-index:70;width:24px;height:24px;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='22' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' stroke='%23000' d='M1 1v17l4-4 3 7 3-1-3-7h6z'/%3E%3C/svg%3E");background-repeat:no-repeat}
.faller{position:fixed;left:0;top:0;z-index:80;white-space:pre;pointer-events:none;transform-origin:center;will-change:transform;margin:0}
body.melt main,body.melt header,body.melt footer{visibility:hidden}
body.melt #swarm{visibility:visible}
.bsod{position:fixed;inset:0;z-index:120;background:#0019ff;color:#fff;display:flex;align-items:center;padding:8vw;font:clamp(16px,2.2vw,26px)/1.5 var(--mono)}
.bsod[hidden]{display:none}
.bsod .face{font:clamp(90px,14vw,180px)/1 Pixel;margin:0 0 24px}
.bsod .small{font-size:13px;opacity:.8}
.bsod button{margin-top:24px;border:2px solid #fff;padding:10px 22px;font-size:14px}
.bsod button:hover{background:#fff;color:#0019ff}
html.god{--acid:#ff2e88;--hot:#dcff00}
html.god body{background:repeating-linear-gradient(45deg,#0b0b0a 0 20px,#121210 20px 40px)}

@media (max-width:760px){
  .bar nav{display:none}
  .hero-ui{flex-direction:column;align-items:flex-start}
  .hero-ui .hint{text-align:left}
  .sheet{grid-template-columns:1fr}
  .portrait{max-width:260px}
  .row{grid-template-columns:1fr 64px;gap:4px 12px}
  .row span:last-child{grid-column:1/-1;text-align:left}
  .row.th span:last-child{display:none}
  .job{grid-template-columns:36px 1fr auto}
  .head .warn{margin-left:0;width:100%}
  .nope{width:76px;height:76px;font-size:9px}
  .toast{right:100px;bottom:34px;max-width:calc(100vw - 120px)}
  .peek{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}