@keyframes studio-in{0%{opacity:0;transform:translateY(18px)}}@keyframes studio-bob{50%{transform:translateY(5px)}}[data-site=studio]{--ink:#0d0f12;--panel:#15181d;--line:#262a31;--paper:#ece7dc;--dim:#9aa0a8;--hot:#ff8a3c;--cool:#63d2c6;--gut:clamp(18px, 5vw, 84px);--ff:var(--font-sans), "Space Grotesk", system-ui, sans-serif;--fm:var(--font-mono), "JetBrains Mono", ui-monospace, monospace;background:var(--ink);color:var(--paper);font-family:var(--ff);scroll-behavior:smooth}[data-site=studio] h1,[data-site=studio] h2{letter-spacing:-.03em;text-wrap:balance;margin:0;font-weight:500;line-height:.98}[data-site=studio] h2{font-size:clamp(2rem,4.4vw,4rem)}[data-site=studio] p{margin:0}[data-site=studio] a{color:inherit}[data-site=studio] .kicker{font-family:var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--hot);margin-bottom:1rem;font-size:.74rem}[data-site=studio] .sr{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}[data-site=studio] section{scroll-margin-top:var(--tabs-h)}[data-site=studio] .open{height:calc(100svh - var(--tabs-h));min-height:34rem;padding:0 var(--gut) clamp(4.5rem, 10vh, 7rem);align-content:end;display:grid;position:relative;overflow:hidden}[data-site=studio] .water{background-position:50%;background-size:cover;width:100%;height:100%;position:absolute;inset:0}[data-site=studio] .shade{pointer-events:none;background:linear-gradient(#0d0f128c,#0d0f1259 45%,#0d0f12f0),linear-gradient(90deg,#0d0f12b3,#0000 70%);position:absolute;inset:0}[data-site=studio] .nav{padding:1.2rem var(--gut);align-items:center;gap:clamp(.9rem,2.2vw,2rem);font-size:.84rem;display:flex;position:absolute;inset:0 0 auto}[data-site=studio] .nav a{opacity:.78;text-decoration:none;transition:opacity .2s}[data-site=studio] .nav a:hover{opacity:1}[data-site=studio] .nav .logo{opacity:1;letter-spacing:-.01em;margin-right:auto;font-weight:600}[data-site=studio] .title{pointer-events:none;max-width:46rem;animation:.9s both studio-in;position:relative}[data-site=studio] h1{font-size:clamp(3.2rem,9.5vw,9rem)}[data-site=studio] h1 em{color:var(--hot);font-style:normal}[data-site=studio] .lede{color:#ece7dcdb;max-width:30rem;margin-top:1.4rem;font-size:clamp(1rem,1.25vw,1.15rem);line-height:1.5}[data-site=studio] .down{right:var(--gut);font-family:var(--fm);letter-spacing:.08em;opacity:.8;font-size:.74rem;text-decoration:none;position:absolute;bottom:1.6rem}[data-site=studio] .down span{animation:1.8s ease-in-out infinite studio-bob;display:inline-block}[data-site=studio] .about{padding:clamp(4rem, 11vw, 9rem) var(--gut);grid-template-columns:minmax(0,.8fr) minmax(0,1fr);align-items:center;gap:clamp(2rem,6vw,6rem);display:grid}[data-site=studio] .ascii{aspect-ratio:4/5;background:var(--ink);border:1px solid var(--line);font-family:var(--fm);--x:50%;--y:40%;cursor:crosshair;touch-action:pan-y;border-radius:6px;position:relative;overflow:hidden}[data-site=studio] .ascii canvas,[data-site=studio] .ascii img{width:100%;height:100%;position:absolute;inset:0}[data-site=studio] .ascii img{object-fit:cover;-webkit-mask-image:radial-gradient(circle at var(--x) var(--y), #000 0 14%, transparent 27%);-webkit-mask-image:radial-gradient(circle at var(--x) var(--y), #000 0 14%, transparent 27%);mask-image:radial-gradient(circle at var(--x) var(--y), #000 0 14%, transparent 27%)}[data-site=studio] .about p{color:#ece7dcd1;max-width:34rem;margin-top:1.4rem;line-height:1.65}[data-site=studio] .about dl{border-top:1px solid var(--line);gap:0;max-width:34rem;margin:2rem 0 0;display:grid}[data-site=studio] .about dl div{border-bottom:1px solid var(--line);grid-template-columns:6.5rem 1fr;gap:1rem;padding:.8rem 0;display:grid}[data-site=studio] .about dt{font-family:var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);padding-top:.2em;font-size:.72rem}[data-site=studio] .about dd{margin:0}[data-site=studio] .about .tip,[data-site=studio] .helix .hint{font-family:var(--fm);letter-spacing:.08em;color:var(--dim);font-size:.72rem}[data-site=studio] .approach{padding:clamp(3rem, 8vw, 7rem) var(--gut);background:var(--panel);border-block:1px solid var(--line)}[data-site=studio] .approach h2{margin-bottom:clamp(1.6rem,4vw,3rem)}[data-site=studio] .wrap{font-family:var(--ff);min-height:16rem;position:relative}[data-site=studio] .wrap canvas{width:100%;height:100%;position:absolute;inset:0}[data-site=studio] .disc{cursor:grab;touch-action:none;background:radial-gradient(circle at 32% 28%, #ffffff8c, transparent 34%), radial-gradient(circle at 60% 70%, var(--hot), #b8420d 58%, #3b1404);border-radius:50%;place-items:center;display:grid;position:absolute;top:0;left:0;box-shadow:0 0 60px #ff8a3c59,inset 0 -10px 30px #00000059}[data-site=studio] .disc:active{cursor:grabbing}[data-site=studio] .disc span{font-family:var(--fm);letter-spacing:.16em;text-transform:uppercase;color:#0d0f12bf;font-size:.68rem}[data-site=studio] .worlds{padding:clamp(4rem, 10vw, 8rem) var(--gut)}[data-site=studio] .worlds h2{margin-bottom:clamp(1.6rem,4vw,3rem)}[data-site=studio] .boxes{perspective:1300px;perspective-origin:50% 20%;--tilt:50deg;--lift:64px;min-height:12rem;margin-block:-2% -4%;position:relative}[data-site=studio] .floor{transform:rotateX(var(--tilt)) scale(.9);transform-style:preserve-3d;position:absolute;inset:0}[data-site=studio] .cells,[data-site=studio] .tiles{transform-style:preserve-3d;gap:4px;margin:0;padding:0;list-style:none;display:grid;position:absolute;inset:0}[data-site=studio] .cells i{--k:0;transform-style:preserve-3d;transform:translateZ(calc(var(--k) * var(--lift)));background:color-mix(in oklab, var(--hot) calc(var(--k) * 100%), #23272e);box-shadow:0 0 calc(var(--k) * 26px) rgb(255 138 60/calc(var(--k) * .55));position:relative}[data-site=studio] .cells i:before,[data-site=studio] .cells i:after{content:"";position:absolute}[data-site=studio] .cells i:before{height:var(--lift);transform-origin:50% 0;background:color-mix(in oklab, var(--hot) calc(var(--k) * 70%), #14171b);top:100%;left:0;right:0;transform:rotateX(-90deg)}[data-site=studio] .cells i:after{width:var(--lift);transform-origin:0;background:color-mix(in oklab, var(--hot) calc(var(--k) * 45%), #0f1115);top:0;bottom:0;left:100%;transform:rotateY(90deg)}[data-site=studio] .tiles{pointer-events:none}[data-site=studio] .tiles li{transform-style:preserve-3d;transform:translateZ(calc(var(--lift) * 1.5));filter:drop-shadow(0 34px 22px #0009)}[data-site=studio] .tiles a{pointer-events:auto;height:100%;color:var(--ink);background:#ece7dcf0;border-radius:4px;flex-direction:column;justify-content:flex-end;gap:.25rem;padding:clamp(.7rem,1.2vw,1.1rem);text-decoration:none;transition:background .25s,transform .25s;display:flex}[data-site=studio] .tiles a:hover,[data-site=studio] .tiles a:focus-visible{background:var(--hot);transform:translateZ(26px)}[data-site=studio] .tiles small{font-family:var(--fm);opacity:.6;margin-bottom:auto;font-size:.68rem}[data-site=studio] .tiles b{letter-spacing:-.02em;font-size:clamp(1.05rem,1.6vw,1.5rem);font-weight:600;line-height:1.05}[data-site=studio] .tiles span{opacity:.72;font-size:.78rem}[data-site=studio] .helix{background:var(--panel);border-block:1px solid var(--line);height:520vh;position:relative}[data-site=studio] .helix .mark{width:1px;height:1px;position:absolute;left:0}[data-site=studio] .helix .stage{top:var(--tabs-h);height:calc(100svh - var(--tabs-h));padding:0 var(--gut);place-items:center;display:grid;position:sticky;overflow:hidden}[data-site=studio] .panel{z-index:2;text-align:center;width:min(24rem,30vw);position:relative}[data-site=studio] .panel h2{font-size:clamp(1.5rem,2.5vw,2.3rem);line-height:1.05}[data-site=studio] .panel .what{color:var(--hot);margin-top:.8rem}[data-site=studio] .panel .when{font-family:var(--fm);color:var(--dim);margin-top:.3rem;font-size:.8rem}[data-site=studio] .panel .role{color:#ece7dcd1;margin-top:.9rem;font-size:.92rem;line-height:1.45}[data-site=studio] .panel .shot{font-family:var(--fm);letter-spacing:.06em;justify-content:center;align-items:center;gap:.7rem;margin-top:1.2rem;font-size:.78rem;display:flex}[data-site=studio] .panel .shot i{background:var(--cool);width:2.2rem;height:1px}[data-site=studio] .scene{z-index:1;isolation:isolate;perspective:1400px;position:absolute;inset:0}[data-site=studio] .scene ul{aspect-ratio:4/5;width:clamp(8.5rem,11.5vw,12rem);margin:0;padding:0;list-style:none;position:absolute;top:50%;left:50%;translate:-50% -50%}[data-site=studio] .scene li{background:#000;border-radius:6px;position:absolute;inset:0;overflow:hidden;box-shadow:0 24px 50px #00000080}[data-site=studio] .scene img{object-fit:cover;width:100%;height:100%;display:block}[data-site=studio] .helix .hint{left:var(--gut);position:absolute;bottom:1.4rem}[data-site=studio] .contact{padding:0 var(--gut) clamp(4rem, 9vw, 7rem);grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:clamp(2rem,6vw,6rem);display:grid;overflow:hidden}[data-site=studio] .contact>div:first-child{padding-top:clamp(4rem,10vw,8rem)}[data-site=studio] .contact p{color:#ece7dcd1;max-width:26rem;margin-top:1.3rem;line-height:1.6}[data-site=studio] .cta{border-bottom:1px solid var(--hot);margin-top:2rem;padding-bottom:.2rem;font-size:clamp(1.05rem,1.7vw,1.5rem);text-decoration:none;display:inline-block}[data-site=studio] .cta:hover{color:var(--hot)}[data-site=studio] .hang{perspective:1000px;touch-action:pan-y;justify-items:center;height:clamp(31rem,46vw,38rem);display:grid;position:relative}[data-site=studio] .pin{background:var(--line);border-radius:0 0 6px 6px;width:3.4rem;height:.5rem;position:absolute;top:0;left:50%;translate:-50%}[data-site=studio] .rig{transform-origin:50% 0;will-change:transform;justify-items:center;width:17rem;margin-left:-8.5rem;display:grid;position:absolute;top:0;left:50%}[data-site=studio] .strap{background:repeating-linear-gradient(to bottom, var(--hot) 0 14px, #e06d1f 14px 28px);border-radius:0 0 3px 3px;width:1.1rem;height:clamp(9rem,15vw,13rem)}[data-site=studio] .badge{background:var(--paper);width:100%;color:var(--ink);transform-origin:50% 0;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;will-change:transform;border-radius:14px;gap:.2rem;margin-top:-4px;padding:2.4rem 1.3rem 1.3rem;display:grid;position:relative;box-shadow:0 30px 70px #0000008c}[data-site=studio] .badge:active{cursor:grabbing}[data-site=studio] .badge .clip{background:var(--ink);border-radius:99px;width:3.2rem;height:.55rem;position:absolute;top:.8rem;left:50%;translate:-50%}[data-site=studio] .badge img{aspect-ratio:5/4;object-fit:cover;object-position:50% 22%;pointer-events:none;border-radius:8px;width:100%;margin-bottom:.8rem}[data-site=studio] .badge b{letter-spacing:-.02em;font-size:1.45rem}[data-site=studio] .badge span{font-size:.86rem}[data-site=studio] .badge small{font-family:var(--fm);letter-spacing:.04em;color:#5b5f66;margin-top:.2rem;font-size:.64rem}[data-site=studio] .badge a{background:var(--ink);color:var(--paper);border-radius:8px;justify-content:space-between;margin-top:.9rem;padding:.7rem 1rem;font-weight:500;text-decoration:none;display:flex}[data-site=studio] .badge a:hover{background:var(--hot);color:var(--ink)}[data-site=studio] .badge u{font-family:var(--fm);letter-spacing:.06em;color:#5b5f66;text-align:center;margin-top:.7rem;font-size:.62rem;text-decoration:none}[data-site=studio] .foot{padding:1.4rem var(--gut);border-top:1px solid var(--line);color:var(--dim);justify-content:space-between;gap:1rem;font-size:.8rem;display:flex}[data-site=studio] .foot a{text-decoration:none}@media (max-width:820px){[data-site=studio] .nav a:not(.logo):nth-child(n+4){display:none}[data-site=studio] .about,[data-site=studio] .contact{grid-template-columns:1fr}[data-site=studio] .boxes{--tilt:34deg;--lift:40px}[data-site=studio] .ascii{max-width:26rem}[data-site=studio] .helix{height:440vh}[data-site=studio] .panel{width:13.5rem}[data-site=studio] .panel h2{font-size:1.3rem}[data-site=studio] .panel .role{display:none}[data-site=studio] .scene ul{width:6.4rem}[data-site=studio] .helix .hint{display:none}[data-site=studio] .contact>div:first-child{padding-top:4rem}}@media (prefers-reduced-motion:reduce){[data-site=studio]{scroll-behavior:auto}[data-site=studio] .title,[data-site=studio] .down span{animation:none}[data-site=studio] .ascii img{opacity:.9;-webkit-mask-image:none;mask-image:none}}