@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/dm-sans-400.ttf') format('truetype')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/dm-sans-600.ttf') format('truetype')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/dm-sans-700.ttf') format('truetype')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/space-grotesk-400.ttf') format('truetype')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/space-grotesk-500.ttf') format('truetype')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/space-grotesk-700.ttf') format('truetype')}
:root{--butter:#f3efb0;--ink:#202749;--orange:#eb5930;--lilac:#b8a0df;--blue:#334cd5;--green:#d4e661;--paper:#f6f3e8;--pink:#eac3ce;--space-xs:8px;--space-sm:16px;--space-md:24px;--space-lg:48px;--space-xl:96px;--gutter:clamp(20px,4vw,64px);--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;overflow-x:clip;background:var(--butter);color:var(--ink);font-family:'DM Sans',sans-serif;-webkit-font-smoothing:antialiased}body.alt-palette{--butter:#e4e7f4;--pink:#d3dec1;--orange:#eb754c}button,a,input{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{color:inherit}button{cursor:pointer}button{border:0;background:none}a{text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:5px}button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid currentColor;outline-offset:6px}button:active{scale:.96}::selection{background:var(--orange);color:var(--paper)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip{position:fixed;top:10px;left:20px;z-index:10;padding:16px;background:var(--ink);color:var(--paper);transform:translateY(-200%)}.skip:focus{transform:none}.masthead{padding:20px var(--gutter);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #20274933;min-height:84px}.small-logo{font:700 40px/.8 'Space Grotesk',sans-serif;letter-spacing:-5px}.small-logo span{font-size:28px;display:inline-block;vertical-align:top;letter-spacing:-2px;margin-left:4px}.status,.eyebrow,.experiment-label,.playground-bar,.rail-foot,.credits>div>span,.footer-bottom,.wordmark-note,.orbit-label{font-size:10px;font-weight:600;letter-spacing:.08em;line-height:1.5}.status{display:flex;gap:10px;align-items:center}.status i{height:7px;width:7px;background:var(--orange);border-radius:50%;box-shadow:0 0 0 4px #eb593015}.utilities{display:flex;gap:20px;align-items:center}.utilities button{min-height:44px;font-size:11px;font-weight:600}.utilities #palette{font-size:24px;width:44px}.utilities #motion span{margin-left:10px}.wordmark-wrap{position:relative;padding:28px var(--gutter) 0;overflow:hidden}h1{font:700 clamp(100px,32.6vw,800px)/.82 'Space Grotesk',sans-serif;letter-spacing:-.085em;margin:0 0 0 -.024em;width:100%;transform:scaleX(1.027);transform-origin:left}.wordmark-note{position:absolute;right:var(--gutter);bottom:9%;font-size:9px;text-align:right;background:var(--butter);padding:7px 0 7px 10px;transform:rotate(-90deg) translate(40px,34px)}.playground{height:470px;position:relative;overflow:hidden;margin-top:12px;isolation:isolate}.hero-copy{position:absolute;left:var(--gutter);top:65px;z-index:2;pointer-events:none}.hero-copy h2{font:500 clamp(34px,4.2vw,65px)/1.02 'Space Grotesk',sans-serif;letter-spacing:-.055em;margin:24px 0 20px}.orange{color:var(--orange)}.hero-copy p{font-size:13px;line-height:1.65;margin:0 0 26px}.text-link{display:inline-flex;gap:28px;align-items:center;font-size:12px;font-weight:600;pointer-events:auto;min-height:44px}.text-link span{font-size:24px}.stage-grid{position:absolute;inset:27% -25% -60% 28%;background-image:linear-gradient(#2027490f 1px,transparent 1px),linear-gradient(90deg,#2027490f 1px,transparent 1px);background-size:60px 60px;transform:perspective(500px) rotateX(58deg) rotateZ(-13deg);mask-image:linear-gradient(transparent,#202749 45%,transparent)}.toy{position:absolute;left:0;top:0;display:grid;place-items:center;padding:0;touch-action:none;user-select:none;cursor:grab;z-index:3;will-change:transform}.toy:active{cursor:grabbing;scale:1}.toy:focus-visible{outline-offset:10px;border-radius:15px}.toy.grabbed{z-index:4;filter:drop-shadow(0 22px 13px #20274933)}.cube-toy{width:150px;height:150px;perspective:650px}.cube{width:112px;height:112px;position:relative;transform-style:preserve-3d;transform:rotateX(calc(-24deg + var(--look-y,0deg))) rotateY(calc(-32deg + var(--look-x,0deg))) rotateZ(-10deg)}.face{position:absolute;width:112px;height:112px;border:1px solid #a23717aa;backface-visibility:hidden;display:grid;place-items:center;font:700 85px/.8 'Space Grotesk',sans-serif;color:var(--butter);background:var(--orange)}.front{transform:translateZ(56px)}.back{transform:rotateY(180deg) translateZ(56px)}.right{transform:rotateY(90deg) translateZ(56px);background:#b83e1b}.left{transform:rotateY(-90deg) translateZ(56px)}.top{transform:rotateX(90deg) translateZ(56px);background:#fa8252;font-size:70px}.bottom{transform:rotateX(-90deg) translateZ(56px)}.ball-toy{width:170px;height:170px}.ball{position:relative;width:158px;height:158px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#6c80f1 0,#344edc 38%,#2337a0 76%,#19246c);box-shadow:inset -8px -12px 18px #15236544,15px 22px 24px -10px #20274940;display:flex;justify-content:center;gap:20px;padding-top:55px;transform:rotate(10deg)}.eye{width:11px;height:20px;background:var(--butter);border-radius:50%;transform:rotate(-5deg)}.smile{position:absolute;left:60px;top:85px;width:38px;height:21px;border-bottom:4px solid var(--butter);border-radius:0 0 50% 50%}.ring-toy{width:195px;height:150px;perspective:650px}.spring{width:145px;height:145px;position:relative;transform-style:preserve-3d;transform:rotateX(51deg) rotateY(-26deg)}.spring i{position:absolute;inset:0;border:14px solid var(--lilac);border-radius:50%;transform:translateZ(var(--depth));box-shadow:inset 1px 2px 0 #e0c8ff,2px 3px 0 #776397}.star-toy{width:160px;height:160px}.star{font-size:175px;line-height:1;color:var(--green);text-shadow:1px 1px #798a27,2px 2px #798a27,3px 3px #798a27,4px 4px #798a27,5px 5px #798a27,6px 6px #798a27,7px 7px #798a27,8px 8px #798a27,9px 9px #798a27;filter:drop-shadow(7px 15px 8px #20274920)}.pill-toy{width:90px;height:165px}.pill{height:138px;width:72px;border-radius:50px;background:repeating-linear-gradient(0deg,var(--ink) 0 7px,var(--paper) 7px 15px);box-shadow:inset -14px 0 15px #20274970,9px 12px 18px #20274926;transform:rotate(30deg)}.drag-note{position:absolute;right:23%;top:3%;font-family:Georgia,serif;font-style:italic;font-size:16px;transform:rotate(-9deg)}.drag-note svg{width:75px;height:45px;display:block;margin:8px 0 0 50px;fill:none;stroke:var(--ink);stroke-width:1.4}.orbit-label{position:absolute;right:var(--gutter);bottom:38px;font-size:9px;writing-mode:vertical-rl}.playground-bar{display:flex;justify-content:space-between;align-items:center;margin:0 var(--gutter);padding:14px 0 20px;border-top:1px solid #20274940;gap:20px}.playground-bar>span:first-child{display:flex;align-items:center;gap:14px}.crosshair{font-size:28px}.playground-bar button{font-size:11px;min-height:44px}.playground-bar button span{font-size:20px;margin-left:12px}.ticker{overflow:hidden;background:var(--ink);color:var(--butter);padding:18px 0;transform:rotate(-2deg);width:calc(100% - 4px);margin:30px 2px 0}.ticker>div{width:max-content;white-space:nowrap;font:500 22px/1 'Space Grotesk',sans-serif;letter-spacing:-.03em;word-spacing:10px;animation:marquee 35s linear infinite}.experiments{background:var(--pink);padding:100px 0 28px;margin-top:-28px}.section-top{display:flex;justify-content:space-between;margin:0 var(--gutter)}.experiment-heading{display:flex;justify-content:space-between;align-items:flex-end;margin:44px var(--gutter) 48px;gap:30px}.experiment-heading h2{font:500 clamp(48px,7vw,108px)/.98 'Space Grotesk',sans-serif;letter-spacing:-.065em;margin:0}em{font-family:Georgia,serif;font-weight:400;letter-spacing:-.065em}.rail-navigation p{font-size:13px;line-height:1.6;margin:0 0 24px}.rail-navigation>div{display:flex;gap:8px}.rail-navigation button,.round-button{width:48px;height:48px;border:1px solid currentColor;border-radius:50%;font-size:24px;transition:background .2s,color .2s}.rail-navigation button:hover,.round-button:hover{background:var(--ink);color:var(--paper)}.experiment-rail{display:flex;overflow-x:auto;gap:24px;padding:0 var(--gutter) 16px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--ink) transparent;overscroll-behavior-x:contain}.experiment{flex:0 0 min(560px,75vw);min-height:500px;padding:24px 28px 28px;scroll-snap-align:center;position:relative;overflow:hidden;border-radius:2px}.domino-experiment{background:var(--orange);color:#151a30}.connect-experiment{background:var(--butter)}.orbit-experiment{background:var(--blue);color:var(--paper)}.experiment-label{display:flex;justify-content:space-between;gap:16px;font-size:9px}.experiment-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;position:relative}.experiment-bottom h3{font:500 clamp(27px,3vw,42px)/1.02 'Space Grotesk',sans-serif;letter-spacing:-.055em;margin:0 0 14px}.experiment-bottom p,.experiment-bottom label{font-size:11px;line-height:1.6;margin:0}.domino-stage{height:290px;perspective:800px;position:relative;transform-style:preserve-3d}.domino-ground{position:absolute;width:90%;height:55px;left:5%;bottom:50px;border:1px solid #20274944;transform:rotateX(65deg) rotateZ(-12deg)}.domino{position:absolute;width:35px;height:115px;left:calc(7% + var(--i)*12.5%);bottom:65px;padding:0;border-radius:4px;background:var(--paper);border:1px solid #20274966;box-shadow:6px 2px #202749,7px 2px #202749;transform:rotate(-13deg);transform-origin:bottom right;transition:transform .38s var(--ease);color:var(--ink)}.domino::after{content:'✳';font-size:20px;position:absolute;top:18px;left:5px;right:5px;padding-bottom:16px;border-bottom:1px solid #20274955}.domino::before{content:'••';font-size:20px;position:absolute;bottom:14px;left:0;right:0}.domino.fallen{transform:rotate(64deg)}.patchboard{height:290px;position:relative;padding:48px 38px;display:flex;justify-content:space-between}.patchboard svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.sockets{display:flex;flex-direction:column;justify-content:space-between;position:relative;z-index:2}.sockets button{width:34px;height:34px;border-radius:50%;background:var(--port-color);border:6px solid var(--ink);outline:1px solid var(--port-color);outline-offset:4px;transition:scale .2s}.sockets button[data-port=a]{--port-color:var(--orange)}.sockets button[data-port=b]{--port-color:var(--blue)}.sockets button[data-port=c]{--port-color:#657a25}.sockets button[aria-pressed=true]{outline-width:4px;scale:1.15}.sockets button:focus-visible{outline:3px dashed var(--ink);outline-offset:8px}.circuit-lamp{position:absolute;left:calc(50% - 30px);top:110px;font-size:60px;line-height:1;color:#20274944;transition:color .3s,transform .5s var(--ease)}.circuit-lamp.lit{color:var(--orange);transform:rotate(90deg) scale(1.25)}.orbit-scene{height:285px;perspective:700px;display:grid;place-items:center}.orbital{position:relative;width:210px;height:210px;transform-style:preserve-3d;transform:rotateY(var(--angle,35deg)) rotateX(-20deg)}.orbit-ring{position:absolute;inset:0;border:8px solid var(--green);border-radius:50%;transform-style:preserve-3d;box-shadow:0 0 0 1px #20274955}.orbit-ring.one{transform:rotateY(65deg)}.orbit-ring.two{transform:rotateX(65deg);border-color:var(--pink)}.orbit-ring.three{transform:rotateY(-65deg);border-color:var(--butter)}.orbit-core{position:absolute;inset:65px;display:grid;place-items:center;background:var(--orange);border-radius:50%;font:700 56px/.9 'Space Grotesk',sans-serif;box-shadow:inset -10px -7px 12px #20274966}.orbit-experiment input{width:100%;accent-color:var(--butter);margin-top:20px;cursor:ew-resize;min-height:26px}.rail-foot{margin:20px var(--gutter) 0;display:flex;justify-content:space-between;font-size:9px}.interlude{min-height:550px;background:var(--paper);padding:64px var(--gutter);position:relative;overflow:hidden}.interlude p{font:500 clamp(38px,6.5vw,100px)/1.08 'Space Grotesk',sans-serif;letter-spacing:-.06em;position:relative;z-index:1;margin:64px 0 30px}.interlude-flower{font-size:310px;color:var(--orange);position:absolute;right:5%;bottom:-100px;line-height:1;transform:rotate(12deg)}.interlude-small{display:block;font-size:13px;line-height:1.6;margin-left:50%}footer{background:var(--ink);color:var(--butter);padding:32px var(--gutter) 20px}.footer-top{display:flex;justify-content:space-between;align-items:center}.footer-heading{font:500 clamp(52px,10.7vw,170px)/1.03 'Space Grotesk',sans-serif;letter-spacing:-.07em;padding:75px 0;position:relative}.footer-asterisk{position:absolute;right:2%;top:75px;color:var(--lilac);font:400 180px/1 Georgia,serif;transform:rotate(10deg)}.credits{display:flex;align-items:center;gap:8%;border-top:1px solid #f3efb040;padding:44px 0 56px}.credit-stamp{background:var(--butter);color:var(--ink);padding:20px;min-width:150px;transform:rotate(-8deg);display:flex;justify-content:space-between;gap:25px;border-radius:50%}.credit-stamp span:last-child{font-size:32px}.credit{display:flex;flex-direction:column;gap:8px}.credit>span{font-size:9px!important;margin-bottom:10px}.credit>a{font:400 clamp(17px,2vw,30px)/1.2 'Space Grotesk',sans-serif;letter-spacing:-.04em}.ai-credit{margin-left:auto;border-left:1px solid #f3efb040;padding-left:5%}.credit .credit-note{font-size:8px!important;margin:8px 0 0}.footer-bottom{display:flex;justify-content:space-between;border-top:1px solid #f3efb040;padding-top:18px;align-items:center;font-size:9px;gap:20px}.footer-bottom button{font-size:10px;min-height:44px}#privacy-note{max-width:650px;font-size:12px;line-height:1.8;border-left:2px solid var(--lilac);padding-left:20px}.noscript-note{padding:20px;background:var(--orange)}.paused *, .paused *::before,.paused *::after{animation-play-state:paused!important;scroll-behavior:auto!important}.paused .domino{transition:none}.paused .circuit-lamp{transition:none}@keyframes marquee{to{transform:translateX(-50%)}}@keyframes arrive{from{opacity:0;transform:translateY(35px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:no-preference){.wordmark-wrap h1{animation:arrive .8s var(--ease) both}.hero-copy{animation:arrive .8s .15s var(--ease) both}}
@media(min-width:1700px){.playground{height:550px}.hero-copy{top:80px}}
@media(max-width:800px){.masthead{padding-top:12px;padding-bottom:12px;min-height:72px}.status{font-size:8px}.utilities{gap:3px}.utilities #motion{font-size:0}.utilities #motion span{font-size:16px;margin-left:0}.wordmark-wrap{padding-top:32px}.wordmark-note{display:none}.playground{height:640px;margin-top:24px}.hero-copy{top:12px}.hero-copy h2{font-size:46px;margin-top:20px}.hero-copy p{font-size:12px}.stage-grid{inset:35% -80% -20% -30%}.drag-note{top:41%;right:auto;left:8%;font-size:13px}.orbit-label{bottom:20px;right:20px}.coordinates{display:none}.playground-bar{gap:10px}.playground-bar>span:first-child{font-size:8px;gap:8px;max-width:180px}.playground-bar button{font-size:10px}.section-top>span:last-child{display:none}.experiments{padding-top:80px}.experiment-heading{margin-top:32px;margin-bottom:32px;align-items:flex-end}.experiment-heading h2{font-size:54px}.rail-navigation p{display:none}.rail-navigation>div{gap:4px}.rail-navigation button{width:40px;height:40px}.experiment{flex-basis:85vw;padding:22px;min-height:490px}.experiment-label{font-size:8px}.domino-stage,.patchboard{height:280px}.domino{width:30px;height:105px}.domino::after{left:3px;right:3px}.patchboard{padding:45px 18px}.experiment-bottom h3{font-size:33px}.rail-foot>span:last-child{display:none}.interlude{min-height:430px;padding-top:48px}.interlude p{font-size:47px;margin-top:55px}.interlude-small{margin-left:15%}.interlude-flower{font-size:220px;right:-40px;bottom:-90px}.footer-heading{padding:65px 0;font-size:12vw}.footer-asterisk{font-size:100px;top:30px;right:-5px}.credits{flex-wrap:wrap;gap:40px 24px;padding:30px 0}.credit-stamp{min-width:120px;padding:16px;gap:12px}.credit-stamp>span{font-size:8px!important}.credit-stamp>span:last-child{font-size:24px!important}.credit{flex:1;min-width:180px}.ai-credit{flex-basis:100%;margin-left:0;padding-left:20px}.credit>a{font-size:20px}.footer-bottom{flex-wrap:wrap;gap:8px}.footer-bottom>span{font-size:8px}}
@media(max-width:390px){.masthead>.status{font-size:7px;gap:6px}.small-logo{font-size:34px}.experiment-heading h2{font-size:45px}.experiment{padding:18px}.experiment-label{font-size:7px}.experiment-bottom h3{font-size:28px}.round-button{width:40px;height:40px}.hero-copy h2{font-size:43px}.playground-bar>span:first-child{max-width:150px}.footer-top>.status{font-size:7px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

@keyframes idle-float{0%,100%{translate:0 0}50%{translate:0 -12px}}
@media(prefers-reduced-motion:no-preference){.toy:not(.in-play)>span{animation:idle-float 8s ease-in-out infinite}.toy:nth-of-type(2)>span{animation-delay:-3s}.toy:nth-of-type(3)>span{animation-delay:-5s}.toy:nth-of-type(4)>span{animation-delay:-1s}.toy:nth-of-type(5)>span{animation-delay:-6s}}

.credit>a{white-space:nowrap}

html.motion-paused{scroll-behavior:auto}

/* Kinetic identity and a separate physical stage keep type and toys apart. */
.masthead{min-height:72px;padding-block:12px}
.small-logo{width:52px;height:48px;display:grid;place-items:center;letter-spacing:0;perspective:250px}
.small-logo:hover{text-decoration:none}
.small-logo .brand-monogram{font:700 47px/.8 'Space Grotesk',sans-serif;letter-spacing:-.1em;position:relative;margin:0;vertical-align:initial;-webkit-text-stroke:1px currentColor;transform:rotateY(-16deg) rotateZ(-7deg);transition:transform .35s var(--ease)}
.small-logo .brand-monogram>span{position:absolute;width:13px;height:13px;background:var(--orange);right:-12px;bottom:-2px;margin:0;transform:rotate(-15deg);transition:transform .35s var(--ease)}
.small-logo:hover .brand-monogram{transform:rotateY(20deg) rotateZ(4deg)}
.small-logo:hover .brand-monogram>span{transform:translate(3px,-20px) rotate(75deg)}
.wordmark-wrap{padding-top:24px;padding-bottom:30px;perspective:1000px;overflow:visible}
h1{line-height:.76;transform:none;margin-left:0}
#kinetic-logo{display:flex;width:100%;justify-content:space-between;padding:0 .02em 0 0;font:inherit;line-height:inherit;letter-spacing:inherit;perspective:1000px;text-align:left;cursor:pointer;touch-action:pan-y}
#kinetic-logo>span{display:inline-block;-webkit-text-stroke:.007em currentColor;transform:translate3d(var(--lx,0px),var(--ly,0px),0) rotate(var(--lr,0deg)) rotateX(var(--rx,0deg));transform-origin:center 65%;text-shadow:var(--depth,0px) var(--depth,0px) 0 var(--orange);transition:transform .55s var(--ease),text-shadow .4s var(--ease);will-change:transform}
#kinetic-logo:focus-visible{outline-offset:12px}
#kinetic-logo.remixed>span{--depth:7px}
.logo-hint{position:absolute;right:var(--gutter);bottom:3px;font-size:9px;letter-spacing:.07em;font-weight:600;display:flex;gap:16px}
.logo-hint>span{font-size:15px}
.playground{height:360px;margin-top:0}
.hero-copy{top:30px;max-width:38%}
.hero-copy h2{font-weight:600;margin-top:12px;font-size:clamp(34px,4.2vw,64px)}
.toy-arena{position:absolute;left:43%;right:var(--gutter);top:0;bottom:0;overflow:clip;isolation:isolate}
.stage-grid{inset:25% -40% -65% -40%;opacity:.4}
.playground-bar{padding-block:8px}
.ball{padding:0;overflow:hidden;background:radial-gradient(ellipse at 30% 20%,#8999ec 0,#435cdd 30%,#293b9c 66%,#202749 100%);transform:rotate(-28deg)}
.ball-seam{position:absolute;inset:12px -25px;border:2px solid #f3efb080;border-radius:50%;transform:rotateX(60deg)}
.ball::after{content:'';position:absolute;inset:-15px 35px;border:2px solid #f3efb040;border-radius:50%;transform:rotateY(50deg)}
.star{position:relative;width:130px;height:130px;font-size:0;filter:drop-shadow(7px 12px 9px #20274925);text-shadow:none;transform:rotateX(20deg) rotateZ(15deg)}
.star i{position:absolute;left:50%;top:50%;width:65px;height:22px;background:linear-gradient(0deg,#7b8a2d 0 35%,var(--green) 36% 100%);clip-path:polygon(0 0,100% 0,85% 100%,0 100%);transform-origin:0 50%;transform:translateY(-50%) rotate(calc(var(--blade)*45deg))}
.pill{background:repeating-linear-gradient(0deg,var(--ink) 0 5px,var(--paper) 5px 12px)}
em{font-family:inherit;font-style:normal;font-weight:700;letter-spacing:inherit}
.experiments{padding-top:76px;padding-bottom:52px}
.experiment-heading{margin-top:0;align-items:flex-end}
.experiment-heading h2{font-weight:600;line-height:1.04}
.experiment-label{font-size:10px;letter-spacing:.045em}
.experiment-bottom{align-items:flex-start}
.experiment-bottom>div{min-width:0;flex:1}
.experiment-bottom h3{font-size:clamp(28px,2.8vw,40px);font-weight:600;line-height:1.08}
.experiment-bottom p,.experiment-bottom label{font-size:12px}
.experiment-bottom .round-button{flex-shrink:0;align-self:flex-end}
.sockets button{width:40px;height:40px}
.domino-ground{border:0}
.interlude{min-height:440px;padding-block:64px}
.interlude p{font-weight:500;max-width:85%;margin-top:20px;font-size:clamp(36px,5.5vw,84px)}
.interlude-small{margin-left:0}
.interlude-flower{width:210px;height:210px;right:4%;bottom:-30px;perspective:600px;transform:rotate(-20deg);font-size:0}
.interlude-flower i{position:absolute;inset:0;border:22px solid var(--orange);border-radius:50%;transform:rotateY(65deg) rotateX(calc(var(--turn,0)*45deg))}
.interlude-flower i:nth-child(2){--turn:1}.interlude-flower i:nth-child(3){--turn:2}
.footer-heading{font-weight:600;font-size:clamp(52px,10vw,160px);padding-right:14%;line-height:1.06}
.footer-asterisk{font-family:inherit;font-size:clamp(70px,13vw,180px);right:0;top:30px;transition:transform .6s var(--ease)}
footer:hover .footer-asterisk{transform:translate(6px,-6px)}
.credits{display:grid;grid-template-columns:minmax(130px,.7fr) minmax(220px,1.2fr) minmax(210px,1fr);gap:40px}
.credit-stamp{min-width:0;justify-self:start;padding:24px 20px}
.credit{min-width:0}
.credit>a{font-size:clamp(19px,2vw,30px)}
.ai-credit{margin-left:0;padding-left:24px}

/* Two full-bleed procedural works, with quiet controls outside the artwork. */
.visual-section{position:relative;isolation:isolate;overflow:clip}
.scene-canvas{display:block;width:100%;height:100%;position:absolute;inset:0}
.fluid-section{height:clamp(640px,88svh,1000px);background:var(--ink);color:var(--paper)}
.fluid-section::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(110deg,#202749a0,transparent 55%),linear-gradient(0deg,#202749c0,transparent 22%)}
.fluid-copy{position:absolute;z-index:2;top:60px;left:var(--gutter);pointer-events:none}
.fluid-copy h2{font:600 clamp(56px,7vw,112px)/1.01 'Space Grotesk',sans-serif;letter-spacing:-.065em;margin:0}
.fluid-copy p{font-size:16px;margin-top:24px}
.scene-controls{position:absolute;z-index:2;bottom:28px;left:var(--gutter);right:var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:12px}
.scene-button{font-size:12px;font-weight:600;min-height:48px;white-space:nowrap;padding:12px 20px;border:1px solid currentColor;border-radius:50px;transition:background .2s,color .2s}
.scene-button:hover{background:var(--paper);color:var(--ink)}
.scene-button>span{margin-left:20px;font-size:18px}
.fluid-fallback{position:absolute;inset:0;background:repeating-radial-gradient(ellipse at 70% 70%,#b8a0df 0 12px,#334cd5 28px 46px,#eb5930 52px 65px);transform:scale(1.15);display:block}
.has-webgl .fluid-fallback,.has-webgl .tunnel-fallback{display:none}
.wormhole-section{background:var(--ink);color:var(--butter);padding-top:52px}
.wormhole-header{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;padding:0 var(--gutter) 20px;position:relative;z-index:1}
.wormhole-header h2{font:600 clamp(56px,7vw,112px)/1.02 'Space Grotesk',sans-serif;letter-spacing:-.06em;margin:0}
.wormhole-header p{font-size:13px;line-height:1.7;max-width:190px;margin:0}
.tunnel-viewport{height:clamp(400px,52svh,650px);position:relative;overflow:hidden;isolation:isolate;cursor:ns-resize}
.tunnel-center{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:.12em;white-space:nowrap;color:var(--paper);pointer-events:none}
.tunnel-controls{display:flex;align-items:center;gap:28px;padding:12px var(--gutter) 40px}
.tunnel-controls input{flex:1;min-width:0;min-height:44px;accent-color:var(--butter);cursor:ew-resize}
.tunnel-fallback{position:absolute;inset:0;perspective:600px;background:var(--ink);overflow:hidden}
.tunnel-fallback i{position:absolute;left:15%;top:5%;width:70%;height:90%;border:26px solid var(--lilac);border-radius:44%;transform:translateZ(calc(var(--ring)*-55px + var(--fallback-depth,0px))) rotate(calc(var(--ring)*12deg));opacity:calc(1 - var(--ring)*.035)}
.tunnel-fallback i:nth-child(3n){border-color:var(--orange)}
.tunnel-fallback i:nth-child(3n + 1){border-color:var(--butter)}
@media(prefers-reduced-motion:no-preference){
  .reveal-ready{opacity:0;transform:translateY(36px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
  .reveal-ready.revealed{opacity:1;transform:none}
  .orbital{animation:orbit-breathe 10s ease-in-out infinite}
  .interlude-flower{animation:sculpture-turn 18s ease-in-out infinite}
}
@keyframes orbit-breathe{50%{translate:0 -10px;rotate:0 0 1 8deg}}
@keyframes sculpture-turn{50%{transform:rotate(20deg) rotateY(25deg)}}
.paused .reveal-ready{opacity:1;transform:none;transition:none}
@media(max-width:1100px) and (min-width:801px){
  .credits{gap:24px;grid-template-columns:140px 1fr 1fr}.credit>a{font-size:22px}
  .hero-copy{max-width:40%}.toy-arena{left:44%;right:20px}
}
@media(max-width:800px){
  .wordmark-wrap{padding-top:24px;padding-bottom:32px}
  .logo-hint{font-size:8px}
  .playground{height:auto;display:flex;flex-direction:column;margin-top:0;overflow:visible}
  .hero-copy{position:relative;left:auto;top:auto;max-width:none;margin:20px var(--gutter) 0;animation:none}
  .hero-copy h2{font-size:clamp(40px,7.5vw,58px);margin:8px 0 20px}
  .hero-copy p{font-size:13px;max-width:300px;margin-bottom:12px}
  .toy-arena{position:relative;left:auto;right:auto;height:360px;margin:12px var(--gutter) 0}
  .playground-bar{margin-top:8px}.playground-bar>span:first-child{max-width:none;font-size:9px}
  .experiment-heading h2{font-size:clamp(40px,8vw,64px)}
  .experiment{flex-basis:88vw;min-height:510px;padding:24px}
  .experiment-label{font-size:9px;gap:12px}.experiment-label>span:last-child{max-width:46%;text-align:right}
  .experiment-bottom h3{font-size:clamp(27px,5.4vw,38px)}
  .experiment-bottom p,.experiment-bottom label{font-size:11px}
  .round-button{width:44px;height:44px}
  .patchboard{padding-inline:10px}
  .domino{width:26px;height:105px}
  .interlude{min-height:390px;padding-block:44px}.interlude p{font-size:clamp(35px,7vw,56px);max-width:100%;margin-top:8px}
  .interlude-flower{width:160px;height:160px;bottom:-65px}.interlude-flower i{border-width:16px}
  .footer-heading{font-size:11.5vw;line-height:1.13;padding:64px 0}
  .footer-asterisk{top:8px;font-size:80px}
  .credits{grid-template-columns:1fr 1fr;gap:40px 28px}
  .credit-stamp{grid-column:1 / -1;padding:20px 26px}.credit-stamp span{font-size:10px!important}
  .credit-stamp span:last-child{font-size:28px!important}
  .credit{min-width:0}.credit>a{font-size:clamp(17px,3.5vw,24px)}
  .ai-credit{padding-left:20px}.credit .credit-note{max-width:155px;line-height:1.8}
  .fluid-section{height:680px}.fluid-copy{top:40px}
  .fluid-copy h2{font-size:clamp(52px,10vw,80px)}
  .scene-controls{bottom:24px;align-items:flex-start;flex-direction:column;gap:16px}
  .scene-controls>span{font-size:11px;max-width:220px}
  .wormhole-section{padding-top:40px}.wormhole-header{align-items:flex-start;flex-direction:column;gap:20px}
  .wormhole-header h2{font-size:clamp(52px,10vw,80px)}.wormhole-header p{font-size:12px}
  .tunnel-viewport{height:440px}.tunnel-controls{gap:12px;padding-bottom:32px}
  .tunnel-controls button{padding:10px 12px;font-size:11px}
}
@media(max-width:420px){
  .credits{grid-template-columns:1fr}.credit-stamp{grid-column:auto}.ai-credit{padding-left:20px}
  .credit>a{font-size:23px}.hero-copy h2{font-size:40px}.toy-arena{height:330px}
  .experiment{padding:20px}.experiment-label{font-size:8px}.experiment-bottom{gap:12px}
  .experiment-bottom h3{font-size:27px}.experiment-bottom .round-button{width:40px;height:40px}
  .experiment-bottom p{max-width:190px}.experiment-label>span:last-child{max-width:45%}
}
@media(prefers-reduced-motion:reduce){#kinetic-logo>span{transition:none}.reveal-ready{opacity:1;transform:none}}

#kinetic-logo{position:relative}

.paused #kinetic-logo>span{transition:none}
.paused .hero-copy,.paused .wordmark-wrap h1{animation:none!important;opacity:1;transform:none}

/* Utility text remains readable on small screens. */
.status,.masthead>.status,.footer-top>.status{font-size:11px}
.logo-hint{font-size:10px}
.hero-copy p{font-size:15px}
.text-link{font-size:14px}
.playground-bar,.playground-bar>span:first-child,.playground-bar button{font-size:11px}
.experiment-label{font-size:12px;min-height:36px;align-items:flex-start}
.experiment-label>span:last-child{max-width:none;text-align:inherit}
.connect-experiment .experiment-label{font-size:11px}
.experiment-bottom p,.experiment-bottom label{font-size:14px}
.scene-controls,.scene-controls>span,.scene-button,.tunnel-controls button,.wormhole-header p{font-size:14px}
.tunnel-center{font-size:11px}
.credit>span,.credits>div>span{font-size:11px!important}
.footer-bottom,.footer-bottom>span,.footer-bottom button{font-size:11px}
#kinetic-logo{user-select:none}
@keyframes identity-arrive{from{transform:translateY(20px)}to{transform:translateY(0)}}
@media(prefers-reduced-motion:no-preference){.wordmark-wrap h1{animation:identity-arrive .65s var(--ease) both}}
@media(max-width:420px){
  .connect-experiment .experiment-label{font-size:10px;gap:8px}
  .connect-experiment .experiment-label>span:first-child{max-width:58%}
  .experiment-bottom p,.experiment-bottom label{font-size:13px}
  .playground-bar>span:first-child{max-width:90px;line-height:1.6}
  .tunnel-controls{gap:8px}.tunnel-controls button{font-size:12px;padding-inline:12px}
}

@media(max-width:460px){.toy-arena{height:390px}}

.touch-help{display:none}
.fluid-fallback{transform:scale(1.2) rotate(var(--surface-angle,0deg))}
@media(hover:none){.pointer-help{display:none}.touch-help{display:inline}}

/* The whole yellow scene is the playfield; only the objects intercept input. */
.hero{position:relative;isolation:isolate;min-height:calc(100svh - 72px)}
.hero .wordmark-wrap,.hero .playground,.hero .playground-bar{position:relative;z-index:2}
.hero .wordmark-wrap,.hero .playground,.hero .playground-bar{pointer-events:none}
#kinetic-logo,.hero .text-link,#reset{pointer-events:auto}
.hero .toy-arena{position:absolute;inset:0;height:auto;margin:0;z-index:3;pointer-events:none;isolation:auto}
.hero .toy{pointer-events:auto}
.hero .stage-grid{inset:38% -20% -35%;pointer-events:none}
.hero .playground-bar{margin-top:0}
#kinetic-logo>span{position:relative;color:var(--letter-ink,var(--ink))}
.letter-sizer{visibility:hidden}
.letter-window{position:absolute;inset:-.12em -.02em;overflow:visible;pointer-events:none}
.letter-reel{display:flex;flex-direction:column;height:600%;width:100%;transform:translateY(0)}
.letter-slot{display:grid;place-items:center;flex:0 0 calc(100% / 6);height:calc(100% / 6);font:inherit;line-height:1;-webkit-text-stroke:inherit;color:var(--slot-ink,inherit)}
.letter-slot.symbol{font-family:'Space Grotesk','Apple Symbols',sans-serif;-webkit-text-stroke:0;font-size:.8em;color:var(--slot-ink,var(--orange))}
#kinetic-logo>span.rolling{--depth:5px;transition:color .18s var(--ease)}
.experiment{flex-basis:clamp(560px,62vw,1400px);min-height:550px}
.experiment-rail{scroll-snap-type:x proximity}
.domino-stage,.patchboard{height:310px}
.orbit-scene{height:310px}
.domino{width:clamp(30px,3.5vw,58px);height:clamp(115px,10vw,165px)}
.domino::after{font-size:clamp(20px,2vw,32px)}
.orbital{scale:1.12}
.scene-button>span{display:inline-grid;place-items:center;width:32px;height:32px;margin-left:16px;border-radius:50%;background:#f6f3e81a;transition:transform .3s var(--ease)}
.scene-button:hover>span{transform:rotate(45deg)}
.scene-button{display:inline-flex;align-items:center;padding:8px 8px 8px 24px}
.shockwave-ring{position:absolute;left:65%;top:50%;width:24px;height:24px;border:2px solid var(--paper);border-radius:50%;opacity:0;z-index:1;pointer-events:none;transform:translate(-50%,-50%)}

/* Sharp architectural tunnel with its title over the scene. */
.wormhole-section{height:clamp(800px,100svh,1200px);padding:0;touch-action:pan-y;cursor:ns-resize}
.wormhole-section:focus-visible{outline-offset:-8px;outline-color:var(--butter)}
.tunnel-viewport{position:absolute;inset:0;height:100%;overflow:hidden}
.wormhole-section::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#202749f2 0%,#202749c2 25%,#20274930 55%,transparent 72%)}
.wormhole-header{position:absolute;z-index:2;left:var(--gutter);top:64px;padding:0;display:block;max-width:55%;pointer-events:none}
.wormhole-header h2{font-size:clamp(64px,8vw,128px);font-weight:700;line-height:1}
.wormhole-header p{font-size:14px;margin-top:28px;max-width:none}
.tunnel-fallback i{border-radius:8%;border-width:20px;opacity:1;box-shadow:inset 0 0 0 2px var(--ink)}
@media(max-width:800px){
  .hero{min-height:930px}
  .hero .playground{height:calc(930px - 34vw - 130px);display:block}
  .hero .hero-copy{margin-top:24px;max-width:80%}
  .hero .playground-bar{position:absolute;bottom:0;left:0;right:0}
  .experiment{flex-basis:88vw;min-height:540px}
  .domino-stage,.patchboard,.orbit-scene{height:280px}
  .domino{width:28px;height:110px}
  .orbital{scale:1}
  .wormhole-section{height:900px}
  .wormhole-header{top:40px;max-width:90%}
  .wormhole-header h2{font-size:clamp(54px,10vw,80px)}
  .wormhole-header p{margin-top:20px;max-width:220px}
  .wormhole-section::after{background:linear-gradient(90deg,#202749b0,transparent 85%),linear-gradient(0deg,#202749ee 0%,transparent 37%,transparent 65%,#202749c0 100%)}
}
@media(max-width:420px){.hero .hero-copy{max-width:none}.experiment-bottom h3{font-size:27px}}
@media(prefers-reduced-motion:reduce){.letter-reel{transition:none}.shockwave-ring{display:none}}
.hero .playground-bar{position:absolute;left:0;right:0;bottom:16px;z-index:4}
.experiment{flex-basis:max(560px,62vw)}
@media(max-width:800px){.experiment{flex-basis:88vw}}
.hero-copy{animation:none!important;opacity:1}
.experiment-rail{max-width:1760px;width:100%;margin-inline:auto}
.experiment-heading{max-width:1760px;margin-inline:auto;padding-inline:var(--gutter)}
.experiment{flex-basis:clamp(560px,62vw,960px)}
@media(max-width:800px){.experiment{flex-basis:88vw}.wormhole-section{height:max(760px,100svh)}}
@media(max-width:420px){h1{font-size:31.2vw}}

/* A quiet, separate sculptural pause before the tunnel. */
#curiosity{min-height:640px;display:grid;grid-template-columns:1.4fr 1fr;align-items:center;gap:32px;padding:100px var(--gutter);background:var(--paper);color:var(--ink);isolation:isolate}
#curiosity .interlude-copy{position:relative;z-index:1}
#curiosity h2{font:500 clamp(40px,5.3vw,88px)/1.08 'Space Grotesk',sans-serif;letter-spacing:-.065em;margin:0 0 36px}
#curiosity .interlude-small{font:400 15px/1.7 'DM Sans',sans-serif;letter-spacing:0;margin:0}
#curiosity .curiosity-readout{display:inline-flex;flex-wrap:wrap;align-items:center;gap:12px;margin:28px 0 0;max-width:100%;font:600 11px/1.5 'DM Sans',sans-serif;letter-spacing:.08em}
.readout-badge{display:inline-flex;align-items:center;padding:5px 11px;border-radius:99px;background:var(--ink);color:var(--butter);font:700 10px/1 'Space Grotesk',sans-serif;letter-spacing:.08em;transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease)}
.curiosity-readout.is-active .readout-badge{background:var(--orange);color:var(--paper);transform:translateY(-1px)}
.readout-note{opacity:.82;transition:opacity .25s var(--ease)}
.curiosity-readout.is-active .readout-note{opacity:1}
.fold-sculpture{width:100%;height:420px;display:grid;place-items:center;perspective:1100px;padding:0;touch-action:pan-y;user-select:none;position:relative;cursor:pointer}
.fold-sculpture:active{scale:1}
.fold-sculpture:focus-visible{outline-offset:8px;border-radius:12px}
.fold-stack{display:block;position:relative;width:230px;height:300px;transform-style:preserve-3d;transform:rotateX(var(--stack-rx,-18deg)) rotateY(var(--stack-ry,-32deg)) rotateZ(var(--stack-rz,15deg));will-change:transform}
.fold-sculpture:not([data-interactive]):hover .fold-stack{transform:rotateX(-10deg) rotateY(-18deg) rotateZ(9deg)}
.fold-stack i{--fold-step:19px;position:absolute;inset:0;font-style:normal;background:linear-gradient(110deg,var(--blue) 0 48%,#233079 49% 51%,#8190dc 52% 100%);clip-path:polygon(0 0,100% 13%,100% 100%,0 87%);transform:translateZ(calc(var(--fold)*var(--fold-step) + var(--tz,0px))) rotateY(calc(var(--fold)*-6deg)) translateX(-50%) rotateY(var(--open-ry,0deg)) rotateZ(var(--open-rz,0deg)) translateX(50%) translate3d(var(--tx,0px),var(--ty,0px),0);border:1px solid #20274966;box-shadow:inset -2px 0 0 rgba(243,239,176,calc(var(--open,0)*.9));filter:brightness(calc(1 + var(--open,0)*.1));will-change:transform}
.fold-stack i:nth-child(3n){background:linear-gradient(110deg,var(--lilac) 0 48%,#756497 49% 51%,#d7c5ec 52% 100%)}
.fold-stack i::before{content:attr(data-page);position:absolute;right:6px;top:16%;font:700 9px/1 'Space Grotesk',sans-serif;letter-spacing:.04em;color:var(--paper);opacity:calc(var(--open,0)*.95);pointer-events:none}
.fold-stack i::after{content:attr(data-glyph);position:absolute;right:14px;top:43%;width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:rgba(32,39,73,calc(.24 + var(--open,0)*.62));border:1.5px solid rgba(243,239,176,calc(var(--open,0)*.9));color:var(--butter);font:700 26px/1 'Space Grotesk','Apple Symbols',sans-serif;opacity:calc(var(--open,0)*.96);transform:scale(calc(.78 + var(--open,0)*.24));pointer-events:none}
.fold-stack i.is-active::after{background:var(--orange);border-color:var(--paper);color:var(--paper)}
.fold-stack i.is-active::before{color:var(--butter)}
@media(max-width:800px){#curiosity{min-height:0;grid-template-columns:1fr;padding-block:64px;gap:12px}#curiosity h2{font-size:clamp(35px,7vw,56px);margin-bottom:24px}.fold-sculpture{height:330px}.fold-stack{width:170px;height:220px}.fold-stack i{--fold-step:14px}.fold-stack i::after{width:40px;height:40px;font-size:20px;right:10px}}
@media(prefers-reduced-motion:reduce){.fold-stack,.readout-badge,.readout-note{transition:none}}
.paused .fold-stack,.paused .readout-badge,.paused .readout-note{transition:none}

.letter-slot:not(:first-child){opacity:0}

/* Type follows the ribbon itself, with enough repeats beyond both edges. */
.ticker{height:220px;padding:0;margin:0;width:100%;transform:none;background:var(--pink);overflow:hidden;position:relative}
.ticker::before{content:'';position:absolute;inset:0;background:var(--butter);clip-path:polygon(0 0,100% 0,100% 35%,0 60%)}
.ticker svg{position:relative;display:block;overflow:visible;font:500 22px/1 'Space Grotesk',sans-serif;letter-spacing:-.03em;fill:var(--butter)}
.ticker-ribbon{fill:none;stroke:var(--ink);stroke-width:96px}

.frame-toy{width:160px;height:160px;perspective:700px}
.window-block{position:relative;width:130px;height:130px;transform-style:preserve-3d;transform:rotateX(24deg) rotateY(-30deg) rotateZ(-10deg)}
.window-block i{position:absolute;inset:0;border:25px solid #b6b1a4;border-radius:18px;box-shadow:inset 0 0 0 1px #20274955,0 0 0 1px #20274933;transform:translateZ(calc(var(--layer)*5px))}
.window-block i:nth-child(1){--layer:0}.window-block i:nth-child(2){--layer:1}.window-block i:nth-child(3){--layer:2}.window-block i:nth-child(4){--layer:3}.window-block i:nth-child(5){--layer:4}.window-block i:nth-child(6){--layer:5;border-color:var(--paper)}
.ribbon-toy{width:190px;height:140px;perspective:700px}
.folded-ribbon{position:relative;width:165px;height:105px;transform-style:preserve-3d;transform:rotateX(-24deg) rotateY(-18deg) rotateZ(-12deg)}
.folded-ribbon i{position:absolute;top:0;width:55px;height:105px;background:linear-gradient(90deg,#ec7449,var(--orange));border:1px solid #ae3d2244;transform-origin:left}
.folded-ribbon i:nth-child(1){left:0;transform:rotateY(-38deg)}
.folded-ribbon i:nth-child(2){left:43px;transform:translateZ(34px) rotateY(38deg);background:linear-gradient(90deg,#973d28,#c24f30)}
.folded-ribbon i:nth-child(3){left:86px;transform:rotateY(-38deg)}