:root{color-scheme:dark;--light:50%;--glow:0}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#08090b}body{color:#eeeae2;font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}main{height:100vh;height:100svh;min-height:340px;position:relative;isolation:isolate;overflow:hidden}.room{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 43%,#17191c 0%,#0b0d10 37%,#08090b 72%)}.room:after{content:"";position:absolute;inset:0;opacity:.10;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.3' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}.identity{position:absolute;z-index:3;top:44%;left:50%;transform:translate(-50%,-50%);width:min(55vw,560px);text-align:center}h1{margin:0;font-size:inherit}.mark{display:block;position:relative;border:0;padding:12px 0;width:100%;background:none;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:2px}.mark img{display:block;width:100%;height:auto;filter:invert(1);opacity:.9}.silver{position:absolute;inset:12px 0;background:linear-gradient(115deg,#777e86 0%,#e8e9e7 22%,#fffdf3 var(--light),#a0a6ae 68%,#e4e6e7 86%,#8a9099 100%);-webkit-mask:url('/assets/studiio.png') center/100% 100% no-repeat;mask:url('/assets/studiio.png') center/100% 100% no-repeat;pointer-events:none}.mark:focus-visible{outline:1px solid #e4daca;outline-offset:20px}.mark:hover .silver{filter:brightness(1.12)}#caption{margin:30px -20px 0;font-size:12px;font-weight:400;line-height:1.8;letter-spacing:.22em;color:#bcbab7}.seam{position:absolute;top:69%;left:50%;width:min(160px,30vw);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,#8d93a1 30%,#eddfca 50%,#9ba7bc 70%,transparent);opacity:.6;transition:opacity .5s}.seam i{position:absolute;inset:-12px 0;background:radial-gradient(ellipse,#d4c6b222,transparent 70%);filter:blur(7px)}.overture{position:absolute;inset:0;pointer-events:none;z-index:1}.silk{position:absolute;width:min(120vw,1350px);height:auto;left:50%;top:69%;transform:translate(-50%,-50%) scaleY(.006);opacity:0;overflow:visible}.ribbon{stroke-width:1;vector-effect:non-scaling-stroke}.r2{opacity:.6}.r3{opacity:.35}.aura{position:absolute;inset:10%;opacity:0;background:radial-gradient(ellipse at 50% 58%,#9080ba20,transparent 63%);filter:blur(40px)}.playing .silk{animation:unfold 5.2s cubic-bezier(.2,.7,.2,1) both}.playing .aura{animation:illuminate 5.2s ease both}.playing .seam{opacity:0}.playing .r2{animation:turn 5.2s ease both;transform-origin:600px 300px}.playing .r3{animation:counterturn 5.2s ease both;transform-origin:600px 300px}.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}@keyframes unfold{0%{opacity:0;transform:translate(-50%,-50%) scaleY(.006) rotate(-3deg)}12%{opacity:.9}45%{opacity:.85;transform:translate(-50%,-50%) scaleY(.65) rotate(-3deg)}68%{opacity:.75;transform:translate(-50%,-50%) scaleY(.48) rotate(3deg)}100%{opacity:0;transform:translate(-50%,-50%) scaleY(.006) rotate(0)}}@keyframes illuminate{0%,100%{opacity:0}40%,65%{opacity:1}}@keyframes turn{50%{transform:scaleY(.86) rotate(2deg)}}@keyframes counterturn{50%{transform:scaleY(.7) rotate(-2deg)}}@media(max-width:600px){.identity{width:76vw;top:43%}#caption{font-size:11px;letter-spacing:.18em;margin-top:25px}.silk{width:140vw;top:66%}.seam{top:66%}.room{background:radial-gradient(ellipse at 50% 43%,#17191c,#08090b 72%)}}@media(max-height:460px){.identity{top:40%;width:min(45vw,360px)}#caption{margin-top:10px}.seam{top:78%}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.playing .silk{opacity:.7;transform:translate(-50%,-50%) scaleY(.35)}.playing .aura{opacity:.5}.playing .seam{opacity:0}}@media(forced-colors:active){.silver,.room,.overture,.seam{display:none}.mark img{forced-color-adjust:none}.mark{outline:1px solid ButtonText}#caption{color:CanvasText}}
