:root{--bg:#0a0d15;--scene:#0c1019;--ink:#eef0f6;--cycle:5.4s;--ease:cubic-bezier(.4,0,.2,1);--ed-bg:#1e1e1e;--ed-tabbar:#252526;--ed-tab:#1e1e1e;--ed-act:#181818;--ed-line:#2a2a2a;--gutter:#5a5a5a;--bc:#8a8a8a;--c-sel:#d7ba7d;--c-prop:#9cdcfe;--c-val:#ce9178;--c-num:#b5cea8;--c-fn:#dcdcaa;--c-kw:#569cd6;--c-cm:#6a9955;--c-pn:#d4d4d4}*{box-sizing:border-box}html,body{background:radial-gradient(120% 70% at 50% 10%, #141a2a 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;background:radial-gradient(120% 48% at 50% 30%, #161d2e 0%, transparent 62%), linear-gradient(180deg, var(--scene) 0%, #07090f 100%);isolation:isolate;flex-direction:column;width:min(100vw,56.25dvh);max-height:100dvh;margin:0 auto;display:flex;position:relative;overflow:hidden;box-shadow:0 0 120px -20px #0c1830,inset 0 0 160px -70px #1d2c4a}.grain{z-index:8;pointer-events:none;mix-blend-mode:multiply;background:radial-gradient(140% 100% at 50% 44%,#0000 60%,#0000008c 100%);position:absolute;inset:0}.grain:after{content:"";opacity:.03;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%}.title{z-index:2;text-align:center;letter-spacing:-.01em;color:#f4f4f8;text-shadow:0 4px 30px #b4c8ff29;margin:0;padding:clamp(18px,3.4vh,30px) 0 clamp(4px,1vh,10px);font-size:clamp(28px,8vw,50px);font-style:italic;font-weight:600;position:relative}.stage{z-index:1;flex:1;place-items:center;min-height:0;display:grid;position:relative;overflow:hidden}.stage:after{content:"";background:linear-gradient(90deg,#0000,#ffffff0f 30% 70%,#0000);height:1px;position:absolute;bottom:8%;left:0;right:0}.bob{will-change:transform;width:min(72%,360px);animation:4.6s ease-in-out infinite bob}.lamp{width:100%;height:auto;display:block;overflow:visible}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-7px)}}.head{transform-box:view-box;transform-origin:180px 233px;transition:transform .55s cubic-bezier(.34,1.56,.64,1);transform:rotate(-7deg)}.lamp.is-on .head{transform:rotate(0)}.shade--on,.face--on{opacity:0;transition:opacity .12s var(--ease)}.shade--off,.face--off{opacity:1;transition:opacity .12s var(--ease)}.lamp.is-on .shade--on,.lamp.is-on .face--on{opacity:1}.lamp.is-on .shade--off,.lamp.is-on .face--off{opacity:0}.lamp_light{opacity:0;transition:opacity .12s var(--ease);will-change:opacity}.lamp.is-on .lamp_light{opacity:1}.stand,.pull{filter:brightness(.42);transition:filter .12s var(--ease)}.lamp.is-on .stand,.lamp.is-on .pull{filter:brightness()}.zzz{transform-box:view-box;transform-origin:224px 148px;will-change:transform, opacity;animation:3.2s ease-in-out infinite zfloat}@keyframes zfloat{0%{opacity:.35;transform:translateY(3px)scale(.92)}50%{opacity:1;transform:translateY(-4px)scale(1)}to{opacity:0;transform:translateY(-9px)scale(1.04)}}.lamp.is-on .glow{transform-box:view-box;transform-origin:180px 238px;will-change:transform;animation:3.4s ease-in-out infinite glowbreath}@keyframes glowbreath{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.pull{cursor:grab;touch-action:none;outline:none}.pull.dragging{cursor:grabbing}.rope-hit{pointer-events:all}.rope{transition:stroke .2s}.rope-knob{transform-box:fill-box;transform-origin:50%;transition:filter .2s}.pull:hover .rope-knob,.pull:focus-visible .rope-knob{filter:drop-shadow(0 0 5px #96b4ffe6)}.pull:focus-visible .rope{stroke:#bcd0ff}.rope-sway{transform-box:view-box;transform-origin:210px 236px;will-change:transform;animation:4.2s ease-in-out infinite sway1}.rope-swing{transform-box:view-box;transform-origin:212px 267px;will-change:transform;animation:4.2s ease-in-out -.45s infinite sway2}.pull.dragging .rope-sway,.pull.dragging .rope-swing{animation:none}.rope-sheen,.ferrule,.bead,.bead-hi{pointer-events:none}@keyframes sway1{0%,to{transform:rotate(-2.4deg)}50%{transform:rotate(2.4deg)}}@keyframes sway2{0%,to{transform:rotate(-3.4deg)}50%{transform:rotate(3.6deg)}}.pull.snap{transition:transform .5s cubic-bezier(.34,1.7,.5,1)}.pull.pulling{will-change:transform;animation:.46s cubic-bezier(.33,0,.2,1) pull}@keyframes pull{0%{transform:translateY(0)}22%{transform:translateY(15px)}54%{transform:translateY(-5px)}78%{transform:translateY(2px)}to{transform:translateY(0)}}.rope-knob.pop{animation:.22s knobpop}@keyframes knobpop{0%{transform:scale(1)}42%{transform:scale(1.35)}to{transform:scale(1)}}.code3{z-index:3;background:linear-gradient(#1b1830 0%,#131120 100%);border-top:1px solid #ffffff12;border-radius:18px 18px 0 0;flex:0 0 37%;grid-template-columns:1fr 1fr;min-height:0;display:grid;position:relative;overflow:hidden;box-shadow:0 -22px 60px -30px #000,inset 0 1px #ffffff0d;container-type:inline-size}.pane{flex-direction:column;min-width:0;min-height:0;padding:clamp(10px,2.2vh,15px) clamp(7px,1.7cqw,12px);display:flex;overflow:hidden}.pane+.pane{border-left:1px solid #ffffff12}.pane__title{letter-spacing:.01em;margin:0 0 clamp(6px,1.3vh,10px);font:700 clamp(11px,4.6cqw,16px)/1 Inter,sans-serif}.pane--html .pane__title{color:#ff5d6c;text-shadow:0 0 16px #ff5d6c59}.pane--css .pane__title{color:#45c4f0;text-shadow:0 0 16px #45c4f052}.pane--js .pane__title{color:#ffd23f;text-shadow:0 0 16px #ffd23f4d}.code{white-space:pre;flex:1;min-height:0;margin:0;font:500 clamp(7.5px,2cqw,12px)/1.5 JetBrains Mono,monospace;overflow:hidden}.code code{display:block}.ln{opacity:0;display:block;transform:translateY(5px)}body.lit .ln{animation:reveal .4s var(--ease) forwards;animation-delay:calc(var(--i) * 55ms + .3s)}@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)}.cm{color:var(--c-cm);font-style:italic}.pn{color:var(--c-pn)}.tg{color:#569cd6}.at{color:#9cdcfe}.st{color:#ce9178}.sw{vertical-align:middle;background:var(--c);border-radius:2px;width:9px;height:9px;margin-right:4px;display:inline-block;transform:translateY(-1px);box-shadow:inset 0 0 0 1px #0006}.caret{vertical-align:text-bottom;background:#d4d4d4;width:6px;height:1.05em;margin-left:1px;animation:1.05s step-end infinite blink;display:inline-block}@keyframes blink{0%,49%{opacity:1}50%,to{opacity:0}}.rec-cursor{z-index:9999;pointer-events:none;filter:drop-shadow(0 2px 3px #0000008c);will-change:transform;width:30px;height:30px;position:fixed;top:0;left:0}.rec-cursor svg{display:block}@media (prefers-reduced-motion:reduce){.bob,.rope-sway,.rope-swing,.zzz,.lamp.is-on .glow,.pull.pulling{opacity:1;animation:none}.head,.shade--on,.shade--off,.face--on,.face--off,.lamp_light{transition:none}.caret{animation:none}body.lit .ln,.ln{opacity:1;animation:none;transform:none}}