:root{--bg:#0a0405;--ink:#ffe9ea;--muted:#8a6b6d;--front:#ff8a72;--mid:#ff2d2d;--back:#e01e37;--deep:#8b0c1a;--panel:#160809;--panel-2:#1a090b;--gutter:#4a2a2c;--c-sel:#ff8f8f;--c-prop:#ffb3a7;--c-val:#ff5a5f;--c-num:#ffcf7d;--c-fn:#ff9a8b;--c-kw:#ff5a5f;--c-cm:#7e5658;--c-pn:#8a5a5c;--ease:cubic-bezier(.22,.61,.36,1)}*{box-sizing:border-box}html,body{background:radial-gradient(120% 80% at 50% 8%, #260909 0%, transparent 55%), var(--bg);height:100%;color:var(--ink);-webkit-font-smoothing:antialiased;margin:0;font-family:Inter,system-ui,sans-serif;overflow:hidden}.reel{aspect-ratio:9/16;isolation:isolate;background:radial-gradient(110% 55% at 50% 26%,#2a0c0c 0%,#0000 60%),linear-gradient(#120607 0%,#0a0405 100%);flex-direction:column;gap:clamp(8px,2.2vh,18px);width:min(100vw,56.25dvh);height:auto;max-height:100dvh;margin:0 auto;padding:clamp(14px,3vh,26px) clamp(12px,3.4vw,22px);display:flex;position:relative;overflow:hidden;box-shadow:0 0 120px -20px #3a0a0e,inset 0 0 140px -60px #5a1420}.grain{z-index:8;pointer-events:none;mix-blend-mode:multiply;background:radial-gradient(140% 100%,#0000 58%,#00000080 100%);position:absolute;inset:0}.grain:after{content:"";opacity:.035;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.4'/></svg>");position:absolute;inset:-50%}.particles{z-index:1;pointer-events:none;position:absolute;inset:0}.particles i{background:var(--mid);opacity:0;width:3px;height:3px;box-shadow:0 0 8px var(--mid);animation:drift var(--d,14s) var(--ease) var(--delay,0s) infinite;will-change:transform, opacity;border-radius:50%;position:absolute}@keyframes drift{0%{opacity:0;transform:translateY(14px)scale(.6)}18%{opacity:.8}82%{opacity:.5}to{opacity:0;transform:translate3d(var(--dx,6px), -150px, 0) scale(1.1)}}.title{z-index:2;text-align:center;letter-spacing:-.02em;color:#ffeaea;text-shadow:0 4px 30px #ff2d2d38;margin:0;font-size:clamp(26px,7.4vw,46px);font-weight:800;line-height:1;position:relative}.title__grad{background:linear-gradient(100deg, var(--front), var(--mid) 45%, var(--back) 90%);-webkit-text-fill-color:transparent;color:#0000;-webkit-background-clip:text;background-clip:text}.window{z-index:2;background:linear-gradient(#1a090b 0%,#120607 100%);border:1px solid #341619;border-radius:16px;flex-direction:column;flex:1.32;min-height:0;display:flex;position:relative;overflow:hidden;box-shadow:0 30px 70px -30px #000,inset 0 0 0 1px #1a0c0d,0 -1px 50px -22px #5a1420}.window__bar{background:#150809;border-bottom:1px solid #2a1114;align-items:center;gap:8px;padding:10px 14px;display:flex}.dot{border-radius:50%;flex:none;width:11px;height:11px}.dot--r{background:#ff5f57}.dot--y{background:#febc2e}.dot--g{background:#28c840}.window__url{color:#c0888a;letter-spacing:.02em;background:#241113;border-radius:999px;align-items:center;gap:6px;margin:0 auto;padding:5px 14px;font:500 12px/1 JetBrains Mono,monospace;display:inline-flex}.window__url svg{color:#8a5a5c}.stage{flex:1;min-height:0;position:relative;overflow:hidden}.stage__glow{z-index:0;pointer-events:none;animation:glowpulse 2.6s var(--ease) infinite;will-change:opacity, transform;background:radial-gradient(48% 42% at 50% 48%,#e01e376b 0%,#ff2d2d1f 38%,#0000 70%);position:absolute;inset:0}@keyframes glowpulse{0%,to{opacity:.55;transform:scale(1)}14%{opacity:.95;transform:scale(1.06)}42%{opacity:.75;transform:scale(1.02)}}.scene{z-index:1;perspective:800px;perspective-origin:50% 47%;animation:scenein 1.1s var(--ease) both;place-items:center;display:grid;position:absolute;inset:0}@keyframes scenein{0%{opacity:0}to{opacity:1}}.tilt{transform:rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));transition:transform .25s var(--ease);transform-style:preserve-3d}.beat{transform-style:preserve-3d;animation:beat 2.6s var(--ease) infinite;will-change:transform}.spin{width:0;height:0;transform-style:preserve-3d;will-change:transform;animation:8s ease-in-out infinite alternate spin;position:relative}@keyframes spin{0%{transform:rotateY(-30deg)rotateX(7deg)}to{transform:rotateY(30deg)rotateX(-5deg)}}@keyframes beat{0%,to{transform:scale(1)}14%{transform:scale(1.06)}28%{transform:scale(1)}42%{transform:scale(1.03)}56%{transform:scale(1)}}.hc-layer{transform-style:preserve-3d;margin-left:calc(var(--w) / -2);margin-top:calc(var(--h) / -2);width:var(--w);height:var(--h);position:absolute;top:50%;left:50%}.hc-row{text-align:center;white-space:nowrap;letter-spacing:1.5px;-webkit-user-select:none;user-select:none;color:color-mix(in oklab, var(--front), var(--deep) calc(var(--depth) * 100%));opacity:calc(1 - var(--depth) * .6);text-shadow:0 0 calc(4px + var(--depth) * 9px) color-mix(in oklab, var(--mid), var(--back) calc(var(--depth) * 100%));animation:shimmer 4.5s ease-in-out var(--sh,0s) infinite;will-change:opacity;font-weight:500;line-height:1;position:absolute;left:50%;overflow:hidden}@keyframes shimmer{0%,to{opacity:calc(1 - var(--depth) * .6)}50%{opacity:calc((1 - var(--depth) * .6) * .7)}}.panels{z-index:3;flex:1;grid-template-columns:1fr 1fr;gap:10px;min-height:0;display:grid;position:relative}.panel{background:linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);border:1px solid #2a1013;border-radius:12px;flex-direction:column;min-width:0;min-height:0;display:flex;overflow:hidden;box-shadow:0 18px 50px -28px #000,inset 0 0 0 1px #190a0c}.panel__bar{background:#150809;border-bottom:1px solid #2a1013;align-items:center;gap:5px;padding:8px 10px;display:flex}.panel__bar .d{background:#2b1316;border-radius:50%;flex:none;width:7px;height:7px}.panel__bar .d:first-child{background:#ff5f57}.panel__bar .d:nth-child(2){background:#febc2e}.panel__bar .d:nth-child(3){background:#28c840}.panel__name{color:#c0888a;margin-left:7px;font:500 11px/1 JetBrains Mono,monospace}.code{white-space:pre;counter-reset:ln;flex:1;min-height:0;margin:0;padding:8px 4px 8px 0;font:500 clamp(9px,2.5vw,12px)/1.55 JetBrains Mono,monospace;overflow:hidden}.code code{display:block}.ln{counter-increment:ln;opacity:0;padding-left:34px;display:block;position:relative;transform:translateY(6px)}.ln:before{content:counter(ln);text-align:right;width:22px;color:var(--gutter);font-weight:400;position:absolute;left:0}.ln.cur{background:linear-gradient(90deg,#ff2d2d12,#0000 70%)}.ln.cur:after{content:"";background:var(--mid);width:2px;box-shadow:0 0 10px var(--mid);position:absolute;top:0;bottom:0;left:0}body.lit .ln{animation:reveal .5s var(--ease) forwards;animation-delay:calc(var(--i) * 55ms + .35s)}@keyframes reveal{to{opacity:1;transform:none}}.sel{color:var(--c-sel)}.pr{color:var(--c-prop)}.vl{color:var(--c-val)}.nm{color:var(--c-num)}.fn{color:var(--c-fn)}.kw{color:var(--c-kw);font-style:italic}.cm{color:var(--c-cm);font-style:italic}.pn{color:var(--c-pn)}.sw{vertical-align:middle;border-radius:3px;width:9px;height:9px;margin-right:4px;display:inline-block;transform:translateY(-1px);box-shadow:inset 0 0 0 1px #0006}.sw--r{background:#ff2d2d}.sw--c{background:#ff5a5f}.caret{vertical-align:text-bottom;background:var(--front);width:7px;height:1em;box-shadow:0 0 10px var(--front);margin-left:2px;animation:1.05s step-end infinite blink;display:inline-block}@keyframes blink{0%,49%{opacity:1}50%,to{opacity:0}}@media (prefers-reduced-motion:reduce){.spin{animation:none;transform:rotateY(-18deg)rotateX(4deg)}.beat,.hc-row,.particles,.caret,.stage__glow,.scene{animation:none}.particles i{opacity:.5}.stage__glow{opacity:.7}body.lit .ln,.ln{opacity:1;animation:none;transform:none}}