:root{
  --bg:#070707;--bg2:#0e0e0e;--fg:#f3f0ea;--mute:rgba(243,240,234,.5);--line:rgba(243,240,234,.12);
  --acc:#ff3a1c;--display:'Bebas Neue',Impact,'Arial Narrow',sans-serif;--mono:'Space Mono',ui-monospace,Menlo,monospace;
  --gutter:clamp(16px,3vw,44px);--ease:cubic-bezier(.16,1,.3,1);--ease2:cubic-bezier(.7,0,.2,1);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--fg);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.lock{overflow:hidden}
body{font-family:var(--mono);font-size:13px;line-height:1.4;background:var(--bg);overflow-x:hidden;min-height:100dvh;overscroll-behavior-y:none}
img{display:block;max-width:100%;user-select:none;-webkit-user-drag:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
::selection{background:var(--acc);color:#000}

.grain{position:fixed;inset:-100%;width:300%;height:300%;pointer-events:none;z-index:200;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite;will-change:transform}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.cursor{position:fixed;left:0;top:0;z-index:300;pointer-events:none;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--fg);mix-blend-mode:difference;
  transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .25s;display:none}
.cursor span{position:absolute;inset:0;display:grid;place-items:center;font:11px/1 var(--mono);letter-spacing:.14em;opacity:0;transition:opacity .2s}
.cursor.big{width:76px;height:76px;margin:-38px 0 0 -38px;background:var(--fg)}
.cursor.big span{opacity:1;color:#000}
.cursor.hide{opacity:0}
@media(pointer:fine){.cursor{display:block}}

.boot{position:fixed;inset:0;z-index:400;background:#000;pointer-events:none;display:grid;place-items:center}
.boot i{display:block;width:0;height:2px;background:#fff;box-shadow:0 0 24px 4px #fff;animation:bootline .95s var(--ease2) forwards}
@keyframes bootline{0%{width:0;height:2px;opacity:1}35%{width:100%;height:2px;opacity:1}70%{width:100%;height:100vh;opacity:1}100%{width:100%;height:100vh;opacity:0}}
.boot{animation:bootout .2s .95s forwards}
@keyframes bootout{to{opacity:0;visibility:hidden}}
html.booted .boot{display:none}

.top{position:fixed;top:0;left:0;right:0;z-index:100;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:18px var(--gutter);
  mix-blend-mode:difference;color:#fff;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.top .mark{font-family:var(--display);font-size:22px;letter-spacing:.06em;line-height:1}
.top .clock{text-align:center;font-variant-numeric:tabular-nums;opacity:.8}
.top nav{display:flex;justify-content:flex-end;gap:clamp(14px,2.4vw,34px)}
.top nav a{position:relative;padding:4px 0;white-space:nowrap}
.top nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.top nav a:hover::after{transform:scaleX(1);transform-origin:left}
.top nav svg{width:9px;height:9px;margin-left:5px;vertical-align:0}
@media(max-width:640px){.top{grid-template-columns:1fr auto;padding:16px var(--gutter)}.top .clock{display:none}.top .mark{font-size:18px;letter-spacing:.03em}.top nav{gap:10px;font-size:10px;min-width:0;letter-spacing:.05em}.top nav a:first-child{display:none}}

.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:#000;isolation:isolate}
.hero canvas,.hero .fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .fallback{display:none;opacity:.6}
.hero.nogl canvas{display:none}.hero.nogl .fallback{display:block}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(7,7,7,.9),rgba(7,7,7,.15) 45%,rgba(7,7,7,.25));pointer-events:none}
.hero-title{position:absolute;left:var(--gutter);bottom:clamp(88px,14vh,150px);z-index:2;font-family:var(--display);font-weight:400;line-height:.86;font-size:clamp(84px,17.5vw,300px);letter-spacing:.005em;text-transform:uppercase}
.hero-title .ln{display:block;overflow:hidden;padding-bottom:.02em}
.hero-title .ln span{display:block;transform:translateY(110%);transition:transform 1.1s var(--ease)}
.hero-title .ln:nth-child(2) span{transition-delay:.08s}.hero-title .ln:nth-child(3) span{transition-delay:.16s}
html.booted .hero-title .ln span{transform:none}
.hero-meta{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(22px,4vh,40px);z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.hero-meta .lbl{color:var(--mute);display:block;margin-bottom:6px}
.hero-meta .num{font-family:var(--display);font-size:40px;line-height:.9;letter-spacing:.03em}
.hero-meta .of{color:var(--mute);margin-left:8px}
.hero-meta .bar{width:min(180px,30vw);height:1px;background:var(--line);position:relative;overflow:hidden}
.hero-meta .bar i{position:absolute;inset:0;background:var(--fg);transform-origin:left;transform:scaleX(0)}
.hero-open{position:absolute;inset:0;z-index:1;cursor:pointer}
.hero-open span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.scroll-cue{position:absolute;right:var(--gutter);bottom:clamp(22px,4vh,40px);z-index:2;width:1px;height:56px;background:var(--line);overflow:hidden}
.scroll-cue::before{content:"";position:absolute;left:0;top:-100%;width:100%;height:100%;background:var(--fg);animation:cue 1.8s var(--ease2) infinite}
@keyframes cue{to{top:100%}}
@media(max-width:640px){.hero-meta .nextwrap{display:none}.scroll-cue{display:none}.hero-title{font-size:clamp(84px,24vw,140px)}}

.ticker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;font-family:var(--display);font-size:clamp(30px,5vw,72px);line-height:1;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;background:var(--bg)}
.ticker-track{display:inline-flex;will-change:transform}
.ticker-track span{padding:0 .5em}
.ticker-track b{font-weight:400;color:var(--acc)}

.reels{padding:clamp(56px,9vh,120px) 0 clamp(20px,4vh,40px);position:relative}
.reel{position:relative;height:var(--rh,220px);margin-bottom:14px;touch-action:pan-y;cursor:grab;user-select:none;overflow:hidden}
.reel.drag{cursor:grabbing}
.reel .item{position:absolute;top:0;left:0;height:100%;aspect-ratio:16/9;will-change:transform;contain:layout paint}
.reel .item img{width:100%;height:100%;object-fit:cover;background:var(--c,#111);transition:transform .6s var(--ease),filter .6s var(--ease),opacity .6s;opacity:0}
.reel .item img.on{opacity:1}
@media(pointer:fine){.reel:hover .item img{filter:brightness(.55)}.reel .item:hover img{filter:brightness(1);transform:scale(1.045)}}
.reels-tag{display:flex;justify-content:space-between;padding:0 var(--gutter) 22px;color:var(--mute);letter-spacing:.12em;text-transform:uppercase;font-size:11px}
.reels-tag span:last-child{color:var(--fg)}

.archive{padding:clamp(60px,10vh,140px) var(--gutter)}
.archive-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:20px;margin-bottom:34px;border-bottom:1px solid var(--line);padding-bottom:22px}
.archive-head h2{font-family:var(--display);font-weight:400;font-size:clamp(64px,11vw,190px);line-height:.85;letter-spacing:.01em;text-transform:uppercase;display:flex;align-items:flex-end;gap:.18em}
.archive-head h2 .n{font-size:.42em;color:var(--acc);line-height:1;padding-bottom:.08em;display:inline-flex;overflow:hidden;height:1em}
.archive-head h2 .n i{display:inline-block;font-style:normal;transform:translateY(100%);transition:transform 1.2s var(--ease);transition-delay:calc(var(--k)*.08s)}
.archive-head h2.in .n i{transform:none}
.tools{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.tools button{border:1px solid var(--line);padding:9px 14px;letter-spacing:.12em;text-transform:uppercase;font-size:11px;transition:background .25s,color .25s,border-color .25s;border-radius:999px}
.tools button:hover,.tools button[aria-pressed="true"]{background:var(--fg);color:#000;border-color:var(--fg)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(150px,22vw,300px),1fr));grid-auto-rows:auto;gap:10px;grid-auto-flow:dense}
.card{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--c,#111);clip-path:inset(0 0 100% 0);transition:clip-path 1s var(--ease);transition-delay:var(--d,0s);border-radius:2px}
.card.big{grid-column:span 2;grid-row:span 2}
.card.in{clip-path:inset(0 0 0 0)}
.card img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s,transform .7s var(--ease),filter .5s}
.card img.on{opacity:1}
.card i{position:absolute;left:10px;bottom:8px;font-style:normal;font-size:10px;letter-spacing:.12em;color:#fff;opacity:0;transition:opacity .3s;text-shadow:0 1px 6px #000}
@media(pointer:fine){.card:hover img{transform:scale(1.06)}.card:hover i{opacity:1}}
@media(max-width:640px){.grid{gap:6px;grid-template-columns:repeat(2,1fr)}.card.big{grid-column:span 2;grid-row:span 1}}

.jail{margin:clamp(40px,8vh,120px) var(--gutter);display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(20px,4vw,60px);align-items:center;border-top:1px solid var(--line);padding-top:clamp(40px,8vh,100px)}
.jail h2{font-family:var(--display);font-weight:400;font-size:clamp(64px,10vw,180px);line-height:.86;text-transform:uppercase}
.jail h2 em{font-style:normal;color:var(--acc)}
.jail p{margin-top:18px;color:var(--mute);letter-spacing:.1em;text-transform:uppercase;font-size:11px}
.jail .win{position:relative;aspect-ratio:16/9;overflow:hidden;background:#111;border-radius:2px}
.jail .win img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s}
.jail .win img.on{opacity:1}
.jail .win .bars{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 11%,rgba(255,255,255,.9) 11% 12.5%);transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease2)}
.jail:hover .win .bars{transform:scaleY(1)}
.jail .go{display:inline-flex;align-items:center;gap:12px;margin-top:28px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line);padding:14px 22px;border-radius:999px;transition:background .3s,color .3s}
.jail .go:hover{background:var(--fg);color:#000}
.jail .go svg{width:12px;height:12px}
@media(max-width:800px){.jail{grid-template-columns:1fr}}

footer{padding:clamp(40px,8vh,100px) var(--gutter) 30px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);border-top:1px solid var(--line);margin-top:clamp(40px,8vh,100px)}
footer .mark{font-family:var(--display);font-size:clamp(40px,7vw,120px);letter-spacing:.02em;color:var(--fg);grid-column:1/-1;line-height:.9;margin-bottom:24px}
footer a:hover{color:var(--fg)}
footer .keys{display:flex;gap:14px;flex-wrap:wrap}
footer kbd{font:inherit;border:1px solid var(--line);padding:2px 6px;border-radius:4px;color:var(--fg)}
@media(max-width:640px){footer{grid-template-columns:1fr 1fr}}

.viewer{border:0;padding:0;max-width:100vw;max-height:100vh;width:100vw;height:100dvh;background:transparent;color:var(--fg);overflow:hidden}
.viewer::backdrop{background:rgba(0,0,0,.94)}
.viewer[open]{display:block}
.viewer .amb{position:absolute;inset:-10%;background:var(--c,#000);opacity:.55;filter:blur(90px) saturate(1.5);transition:background .6s;pointer-events:none}
.viewer .amb img{width:100%;height:100%;object-fit:cover;opacity:.6}
.viewer .stage{position:absolute;inset:0;display:grid;place-items:center;padding:clamp(56px,9vh,90px) clamp(14px,5vw,90px);touch-action:none}
.viewer .stage img{max-width:100%;max-height:100%;aspect-ratio:16/9;width:auto;height:auto;object-fit:contain;box-shadow:0 30px 100px rgba(0,0,0,.6);transform-origin:0 0;will-change:transform;cursor:zoom-in;transition:opacity .35s}
.viewer .stage.zoom img{cursor:grab}
.viewer .stage.zoom.drag img{cursor:grabbing}
.viewer .ui{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:18px var(--gutter);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.viewer .ui>div{display:flex;justify-content:space-between;align-items:center;gap:14px}
.viewer .ui button,.viewer .ui a{pointer-events:auto;min-width:44px;min-height:44px;display:inline-grid;place-items:center;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:rgba(7,7,7,.5);backdrop-filter:blur(6px);transition:background .25s,color .25s}
.viewer .ui button:hover,.viewer .ui a:hover{background:var(--fg);color:#000}
.viewer .ui .row{display:flex;gap:6px}
.viewer .cnt{font-family:var(--display);font-size:34px;letter-spacing:.04em;line-height:1;font-variant-numeric:tabular-nums}
.viewer .cnt small{font-family:var(--mono);font-size:11px;color:var(--mute);margin-left:8px;letter-spacing:.12em}
.viewer .nav{position:absolute;top:50%;transform:translateY(-50%);pointer-events:auto;width:56px;height:56px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;background:rgba(7,7,7,.5);backdrop-filter:blur(6px);transition:background .25s,color .25s}
.viewer .nav:hover{background:var(--fg);color:#000}
.viewer .nav svg{width:16px;height:16px}
.viewer .nav.prev{left:var(--gutter)}.viewer .nav.next{right:var(--gutter)}
.viewer .toast{position:absolute;left:50%;bottom:22px;transform:translate(-50%,10px);opacity:0;background:var(--fg);color:#000;padding:8px 14px;border-radius:999px;transition:.3s;pointer-events:none}
.viewer .toast.on{opacity:1;transform:translate(-50%,0)}
@media(max-width:700px){.viewer .nav{top:auto;bottom:18px;transform:none;width:48px;height:48px}.viewer .nav.next{left:calc(var(--gutter) + 58px);right:auto}.viewer .stage{padding:80px 10px 90px}.viewer .ui .lbl{display:none}.viewer .cnt{font-size:26px;white-space:nowrap}.viewer .cnt small{display:none}.viewer .ui button,.viewer .ui a{padding:0 12px;min-width:40px;min-height:40px}.viewer .ui>div:last-child{justify-content:flex-end}}
.flip{position:fixed;z-index:1000;pointer-events:none;object-fit:cover;border-radius:2px;will-change:transform,width,height}

.jailpage{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding:84px var(--gutter) 30px}
.jailpage h1{font-family:var(--display);font-weight:400;font-size:clamp(56px,9vw,150px);line-height:.86;text-transform:uppercase;text-align:center}
.jailpage .win{position:relative;width:min(1100px,100%,calc(42vh * 16 / 9));aspect-ratio:16/9;margin:clamp(20px,4vh,40px) auto 0;overflow:hidden;background:#000;border-radius:2px}
.jailpage .win img,.jailpage .win canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.jailpage .win img{opacity:0;transition:opacity .3s}
.jailpage .win img.on{opacity:1}
.jailpage .win canvas{opacity:1;transition:opacity .25s}
.jailpage .win.done canvas{opacity:0}
.verdict{text-align:center;margin-top:clamp(16px,3vh,30px)}
.verdict .v{font-family:var(--display);font-size:clamp(88px,15vw,170px);line-height:.85;text-transform:uppercase;display:inline-block;opacity:0;transform:scale(1.5);filter:blur(14px)}
.verdict .v.in{animation:slam .55s var(--ease) forwards}
.verdict .v.yes{color:var(--acc)}
@keyframes slam{to{opacity:1;transform:none;filter:blur(0)}}
.verdict .sub{margin-top:8px;letter-spacing:.12em;text-transform:uppercase;font-size:12px;color:var(--mute);min-height:1.4em}
.jailpage .actions{display:flex;justify-content:center;gap:10px;margin-top:22px}
.jailpage .actions button{border:1px solid var(--line);padding:14px 22px;border-radius:999px;letter-spacing:.14em;text-transform:uppercase;font-size:12px;transition:background .3s,color .3s;display:inline-flex;align-items:center;gap:10px}
.jailpage .actions kbd{font:inherit;font-size:10px;border:1px solid var(--line);padding:2px 6px;border-radius:4px;opacity:.7}
.jailpage .actions button:hover{background:var(--fg);color:#000}
.jailpage .stats{text-align:center;margin-top:30px;color:var(--mute);letter-spacing:.12em;text-transform:uppercase;font-size:11px;font-variant-numeric:tabular-nums}
.jailpage .stats b{color:var(--fg);font-weight:400}

.lost{min-height:100dvh;display:grid;place-items:center;text-align:center;padding:var(--gutter)}
.lost h1{font-family:var(--display);font-weight:400;font-size:clamp(120px,30vw,420px);line-height:.85}
.lost p{margin-top:12px;color:var(--mute);letter-spacing:.14em;text-transform:uppercase}
.lost a{display:inline-block;margin-top:28px;border:1px solid var(--line);padding:14px 22px;border-radius:999px;letter-spacing:.14em;text-transform:uppercase;font-size:12px}
.lost a:hover{background:var(--fg);color:#000}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .grain{animation:none}
  .boot{display:none}
  .hero-title .ln span{transform:none;transition:none}
  .card{clip-path:none;transition:none}
  .scroll-cue::before{animation:none}
  .verdict .v{animation-duration:.01s}
}