: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 auto;align-content:center;justify-items:center;row-gap:clamp(2px,1.4vh,14px);min-height:0;padding:clamp(4px,1.2vh,12px) 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;grid-row:1;width:54%;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}.lamp.is-on .lamp_light.spread{opacity:.5}.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:38%;margin:0 auto;transition:opacity .5s .1s,transform .7s cubic-bezier(.34,1.5,.5,1) .1s;display:flex;position:relative;transform:translateY(16px)scale(.94);container-type:inline-size}.reel.is-lit .reveal{opacity:1;transform:translateY(0)scale(1)}.photo{background:linear-gradient(158deg,#eae0cd,#d8ccb2);border-radius:6px;width:100%;margin:0;padding:7% 7% 3.5%;transform:rotate(-3deg);box-shadow:0 15px 30px -12px #000000d9,0 2px 6px #00000073,inset 0 1px #ffffff59}.photo__frame{background:#000;border-radius:3px;display:block;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #00000040}.cat{filter:brightness(.62)contrast(1.04)saturate(.85)sepia(.16);border-radius:3px;width:100%;height:auto;display:block}.photo__frame:after{content:"";pointer-events:none;background:radial-gradient(125% 105% at 50% -8%,#ffcd8229 0%,#0000 42%,#0000006b 100%);border-radius:3px;position:absolute;inset:0}.photo__cap{text-align:center;color:#574733;margin-top:5%;font-family:Caveat,cursive;font-size:12.5cqw;font-weight:600;line-height:1;display:block;transform:rotate(-.6deg)}.reveal:before{content:"";opacity:0;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,#ffc97824,#ffb45a00 76%);width:138%;height:74%;transition:opacity .7s .12s;position:absolute;bottom:2%;left:50%;transform:translate(-50%)}.reel.is-lit .reveal:before{opacity:1}.reveal:after{content:"";opacity:0;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,#0000008c,#0000 72%);width:72%;height:12%;transition:opacity .6s .2s;position:absolute;bottom:1%;left:50%;transform:translate(-50%)}.reel.is-lit .reveal:after{opacity:.8}.code3{z-index:3;background:linear-gradient(#1b1830 0%,#131120 100%);border-top:1px solid #ffffff12;border-radius:14px 14px 0 0;flex:0 0 24%;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(7px,1.5vh,11px) clamp(6px,1.5cqw,10px);display:flex;overflow:hidden}.pane+.pane{border-left:1px solid #ffffff12}.pane__title{letter-spacing:.01em;margin:0 0 clamp(3px,.9vh,6px);font:700 clamp(9px,3.8cqw,13px)/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(6.5px,1.7cqw,10px)/1.42 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,.cat{transition:none}}