:root{--bg:#0a0d15;--scene:#0c1019;--ink:#eef0f6;--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;grid-template-rows:auto 1fr;place-items:start center;min-height:0;padding-top:clamp(6px,1.6vh,16px);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;grid-row:1;width:min(58%,292px);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,.rope-sheen,.ferrule,.bead,.bead-hi{pointer-events:none}.rope-hit{pointer-events:all}.pull:hover .bead,.pull:focus-visible .bead{filter:drop-shadow(0 0 5px #96b4ffe6)}.pull:focus-visible .rope{stroke:#bcd0ff}.pull{transform-box:view-box;transform-origin:210px 236px;will-change:transform;animation:4.2s ease-in-out infinite ropeSway}.pull.busy{animation:none}@keyframes ropeSway{0%,to{transform:rotate(-2.2deg)}50%{transform:rotate(2.4deg)}}.bead{transform-box:fill-box;transform-origin:50%}.bead.pop{animation:.22s knobpop}@keyframes knobpop{0%{transform:scale(1)}42%{transform:scale(1.35)}to{transform:scale(1)}}.reveal{z-index:4;pointer-events:none;opacity:0;will-change:transform, opacity;grid-row:2;justify-content:center;width:min(72%,300px);margin-top:clamp(-42px,-5vh,-20px);transition:opacity .5s .1s,transform .75s cubic-bezier(.34,1.5,.5,1) .1s;display:flex;transform:translateY(20px)scale(.92);container-type:inline-size}.reel.is-lit .reveal{opacity:1;transform:translateY(0)scale(1)}.reveal:before{content:"";opacity:0;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,#ffce8038,#ffb45a00 72%);width:150%;height:150%;transition:opacity .7s .12s;position:absolute;top:46%;left:50%;transform:translate(-50%,-50%)}.reel.is-lit .reveal:before{opacity:1}.note{background:repeating-linear-gradient(#0000 0 8.4%,#785a280d 8.4% calc(8.4% + 1px)),linear-gradient(158deg,#fbf4e3 0%,#f1e3c2 100%);border-radius:5px;width:100%;margin:0;padding:7cqw 7cqw 8cqw;position:relative;transform:rotate(-2.6deg);box-shadow:0 16px 34px -14px #000000bf,0 2px 6px #00000059,inset 0 1px #fff9}.note:after{content:"";border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(125% 90% at 50% -6%,#ffd88e52,#ffb45a00 68%);transition:opacity .6s .2s;position:absolute;inset:0}.reel.is-lit .note:after{opacity:1}.note__tape{background:linear-gradient(#ffe8a899,#f4d4927a);border-radius:1px;width:36%;height:16px;position:absolute;top:-8px;left:50%;transform:translate(-50%)rotate(-2.5deg);box-shadow:inset 0 0 0 1px #ffffff38,0 1px 2px #0000002e}.note__hand{text-align:center;color:#4a3a24;margin:0;font-family:Caveat,cursive;line-height:.9}.note__l1{font-size:12cqw;font-weight:600;display:block}.note__l2{color:#c67d16;font-size:23cqw;font-weight:700;display:block}.note__sun{width:15cqw;height:15cqw;margin:3cqw auto 0;display:block;overflow:visible}.note__l1,.note__l2,.note__sun{opacity:0;transition:opacity .45s,transform .55s cubic-bezier(.22,1,.36,1);transform:translateY(8px)}.reel.is-lit .note__l1{opacity:1;transition-delay:.34s;transform:none}.reel.is-lit .note__l2{opacity:1;transition-delay:.46s;transform:none}.reel.is-lit .note__sun{opacity:1;transition-delay:.6s;transform:none}.reel.is-lit .note__sun-rays{transform-box:view-box;transform-origin:30px 30px;animation:16s linear infinite sunspin}@keyframes sunspin{to{transform:rotate(360deg)}}.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,.pull,.zzz,.lamp.is-on .glow{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}.reveal,.note__l1,.note__l2,.note__sun{transition:none}.reel.is-lit .note__sun-rays{animation:none}}