@font-face{font-family:Space;src:url('../assets/fonts/SpaceGrotesk-Variable.ttf') format('truetype');font-weight:300 700;font-style:normal;font-display:swap}
:root{color-scheme:light;--background:#fff;--blue:#164bff}
*,*::before,*::after{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none;background:var(--background)}
body{font-family:Space,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.experience{position:relative;isolation:isolate;width:100%;height:100vh;height:100svh;overflow:hidden;background:var(--background);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px 18px 40px}
.hero-art{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;position:relative;flex:none;width:min(94vw,64vh,760px);width:min(94vw,64svh,760px);aspect-ratio:1;z-index:1;opacity:0;transform:scale(.86);animation:scene-enter 2.6s cubic-bezier(.2,.7,.2,1) .1s forwards}
#hero-canvas{touch-action:none;user-select:none;-webkit-user-select:none;display:block;width:100%;height:100%;outline:none}
.brand-wrap{position:relative;display:grid;place-items:center;z-index:3;pointer-events:none;flex:none}
.brand{margin:0;padding:0 .09em .08em 0;color:#777b82;font-size:clamp(46px,5.8vw,80px);line-height:1;font-weight:500;letter-spacing:-.085em;white-space:nowrap;user-select:none;transform:translateY(20px);opacity:0;animation:brand-enter 2s cubic-bezier(.16,1,.3,1) .25s forwards}
.brand>span{display:block}
.brand-dot{color:inherit;display:inline-block}
.motion-control{position:absolute;right:max(30px,env(safe-area-inset-right));bottom:max(28px,env(safe-area-inset-bottom));z-index:10;width:42px;height:42px;display:grid;place-items:center;border:1px solid #14235420;border-radius:50%;background:#fff9;color:#71798a;cursor:pointer;transition:color .25s,background .25s,border-color .25s;-webkit-tap-highlight-color:transparent}
.motion-control:hover{color:var(--blue);background:#f4f6ff;border-color:#164bff55}
.motion-control:focus-visible{outline:2px solid var(--blue);outline-offset:5px}
.motion-control svg{width:20px;height:20px;grid-area:1/1;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.motion-control .play-icon{display:none}
[data-motion=paused] .motion-control .pause-icon{display:none}
[data-motion=paused] .motion-control .play-icon{display:block}
.interaction-ring{position:absolute;left:50%;top:50%;z-index:2;border:1px solid #164bff40;border-radius:50%;width:16px;height:16px;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(1)}
.interaction-ring.active{animation:wave 1.5s cubic-bezier(.1,.6,.2,1) forwards}
.cursor{display:none;pointer-events:none;position:fixed;top:0;left:0;width:14px;height:14px;border:1px solid #164bffb0;border-radius:50%;z-index:9;opacity:0;transition:width .25s,height .25s,opacity .3s;margin-left:-7px;margin-top:-7px}
@media(hover:hover) and (pointer:fine){body:not(.over-control){cursor:none}.cursor{display:block}.pointer-active .cursor{opacity:1}.over-control .cursor{opacity:0}}
.is-dragging .cursor{width:22px;height:22px;margin-left:-11px;margin-top:-11px;background:#159cff18}
.sculpture-fallback{display:none}
.scene-fallback .sculpture-fallback{display:block;position:absolute;width:78%;height:78%;left:50%;top:50%;border:clamp(30px,6vw,95px) solid #159cff;border-radius:45% 55% 62% 38% / 42% 32% 68% 58%;background:transparent;box-shadow:inset 12px 10px 22px #b3e6ffcc,inset -15px -15px 35px #075aa9,5px 10px 25px #159cff10,0 -4px 16px #b3e6ff70;transform:translate(-50%,-50%) rotate(-25deg);animation:fallback-spin 18s linear infinite}
[data-motion=paused] *,[data-motion=paused] *::before,[data-motion=paused] *::after{animation-play-state:paused!important}
[data-motion=paused] .brand,[data-motion=paused] .hero-art{opacity:1;transform:none;animation:none}
@keyframes scene-enter{to{opacity:1;transform:scale(1)}}
@keyframes brand-enter{from{opacity:0;transform:translateY(25px);filter:blur(15px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes wave{0%{opacity:.7;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(70)}}
@keyframes fallback-spin{0%{transform:translate(-50%,-50%) rotate(-25deg)}50%{border-radius:60% 40% 40% 60% / 38% 55% 45% 62%}100%{transform:translate(-50%,-50%) rotate(335deg)}}
@media(max-width:600px){.experience{gap:8px;padding-bottom:40px}.brand{font-size:56px}.motion-control{right:22px;bottom:max(24px,env(safe-area-inset-bottom));width:38px;height:38px}}
@media(max-height:500px){.experience{gap:0;padding:12px 18px 20px}.hero-art{width:min(88vw,66vh);width:min(88vw,66svh)}.brand{font-size:40px}.motion-control{right:20px;bottom:18px}}
@media(prefers-reduced-motion:reduce){html:not([data-motion=playing]) *,html:not([data-motion=playing]) *::before,html:not([data-motion=playing]) *::after{animation:none!important;transition:none!important}html:not([data-motion=playing]) .brand,html:not([data-motion=playing]) .hero-art{opacity:1;transform:none}}