@font-face{font-family:'Space Grotesk';src:url('./SpaceGrotesk.ttf') format('truetype');font-weight:300 700;font-style:normal;font-display:swap}
#particles{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.page{z-index:1}.main{grid-template-columns:1fr 1fr}.copy{grid-column:1;grid-row:1;margin-left:8vw;width:42vw;max-width:700px;pointer-events:none}
h1{font-size:clamp(46px,5.4vw,92px);line-height:1.04;letter-spacing:-.035em;margin:0 0 28px;font-weight:700}
.tagline{font-size:clamp(20px,2.15vw,34px);letter-spacing:-.025em;line-height:1.3;margin-bottom:26px}.description{font-size:clamp(12px,1.05vw,17px);line-height:1.7;letter-spacing:.015em;max-width:420px}
.art{position:relative;inset:auto;grid-column:2;grid-row:1;width:100%;height:100%;overflow:hidden;pointer-events:auto;touch-action:pan-y;cursor:grab}.art:active{cursor:grabbing}.art canvas{display:block;width:100%;height:100%;position:absolute;inset:0}.art.webgl-ready .watch-fallback{display:none}
.watch-fallback{position:absolute;width:min(68%,52svh);max-width:460px;left:49%;top:50%;transform:translate(-50%,-50%) rotate(-6deg);border:3px solid #54483a;padding:7px;border-radius:25%;box-shadow:inset 0 0 0 2px #a49786,inset 0 0 0 5px #171717,12px 22px 38px #0002;background:#050608;transform-style:preserve-3d}.watch-fallback img{position:relative;display:block;width:100%;height:auto;border-radius:23%;object-fit:contain;background:#060a12}
.watch-fallback:before{content:'';position:absolute;z-index:2;left:13%;top:5px;width:74%;height:5%;border-radius:50%;background:linear-gradient(#ffffff65,#ffffff00);pointer-events:none}.watch-fallback:after{content:'';position:absolute;z-index:-1;right:-20px;top:25%;width:18px;height:15%;border:1px solid #51483e;border-radius:7px;background:repeating-linear-gradient(0deg,#716456 0px,#716456 1px,#322d27 2px,#9b8c77 3px);box-shadow:inset 3px 0 5px #0008}
.watch-fallback{border-color:#25292e;box-shadow:inset 0 0 0 2px #727981,inset 0 0 0 5px #101215,12px 22px 38px #0002}
.watch-fallback:before{transform:translate(var(--glint-x,0),var(--glint-y,0));opacity:var(--glint-opacity,.65)}
.watch-fallback:after{right:-19px;width:17px;border-radius:9px;border-color:#1b1f24;background:repeating-linear-gradient(0deg,#626a74 0px,#272c33 1px,#171b21 2px,#4e5660 3px)}
.side-button{position:absolute;right:-6px;top:53%;height:24%;width:5px;border-radius:5px;background:linear-gradient(90deg,#090b0f,#636b76,#222830);border:1px solid #0a0c10}
.crown-cap{position:absolute;right:-19px;top:26.5%;height:12%;width:6px;border-radius:50%;background:linear-gradient(90deg,#30363f,#89919b,#3b424c);border:1px solid #171b21}
.watch-fallback{padding:3px;border-width:2px;box-shadow:inset 0 0 0 1px #727981,inset 0 0 0 3px #101215,12px 22px 38px #0002}
.watch-fallback:after{right:-14px;width:12px;height:11%;top:26%;border-radius:7px}
.crown-cap{right:-14px;width:4px;height:8.5%;top:27.25%;background:#353b43}
.side-button{right:-1px;width:3px;background:#25292e;border-color:#080a0e}
.watch-fallback{padding:4%;background:#030405}
.watch-fallback img{border-radius:19%}
.watch-fallback:after{background:repeating-linear-gradient(0deg,#343941 0px,#343941 2px,#1b1f25 3px,#4b525c 4px);border-radius:7px 8px 8px 7px;box-shadow:inset 4px 0 4px #13161b,inset -2px 0 3px #636b74}
.crown-cap{border-width:.5px;background:#292e35}
@media(min-width:761px){.art{position:absolute;top:0;bottom:0;grid-column:auto;grid-row:auto}.watch-fallback{left:50%}}
.watch-fallback:after{right:-10px}.crown-cap{right:-10px}
.music-control{position:fixed;top:22px;right:2.3vw;z-index:5;width:44px;height:44px;display:grid;place-items:center;padding:10px;border:0;border-radius:50%;background:#ffffffd9;color:#111;cursor:pointer;backdrop-filter:blur(8px)}
.music-control svg{width:22px;height:22px;fill:currentColor}.music-control:hover{background:#eee}.music-control:focus-visible{outline:2px solid #111;outline-offset:3px}.pause-icon{display:none}.is-playing .play-icon{display:none}.is-playing .pause-icon{display:inline}
@media(max-width:760px){.music-control{right:20px;top:16px}}
footer{background:transparent}
@media(min-width:761px) and (max-height:650px){h1{font-size:clamp(38px,7.6vh,68px);margin-bottom:18px}.tagline{margin-bottom:18px}}
@media(max-width:760px){.art{width:100%;height: min(112vw,580px);min-height:330px;aspect-ratio:auto;flex-shrink:0}.main .copy{padding:22px 28px 56px;max-width:560px}.copy h1{font-size:clamp(48px,11.5vw,76px);line-height:1.03;letter-spacing:-.035em;margin-bottom:24px}.tagline{font-size:clamp(21px,5.2vw,30px);letter-spacing:-.025em;margin-bottom:24px}.description{font-size:12px}.watch-fallback{width:70%;max-width:370px}}