@font-face{font-family:Interval;src:url('./fonts/title.ttf') format('truetype');font-display:swap;font-weight:400}
:root{color-scheme:dark;--background:#10171e;--ink:#e7e9e9;--muted:#a3b0b9;--line:#34414b;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;font-synthesis:none}
*{box-sizing:border-box}
html{background:var(--background);scrollbar-color:#53616b var(--background)}
body{margin:0;color:var(--ink);background:radial-gradient(ellipse at 50% 36%,#1e2a36 0%,#131c25 42%,#10171e 78%);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;text-underline-offset:5px}
a:hover{text-decoration:underline}
::selection{background:#b8c9d5;color:#10171e}
:focus-visible{outline:2px solid #c6d9e7;outline-offset:6px}
main{min-height:740px;height:calc(100svh - 64px);position:relative;isolation:isolate}
.identity{position:absolute;top:32px;left:48px;z-index:3;font-size:14px;letter-spacing:.025em}
.identity a{display:inline-flex;align-items:center;min-height:44px}
.identity p{margin:4px 0 0;max-width:28em;font-size:12px;line-height:1.8;color:var(--muted);letter-spacing:.02em}
.artwork-view{position:absolute;inset:45px 0 146px}
canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab;opacity:0;transition:opacity .6s ease}
canvas:active{cursor:grabbing}
[data-ready] canvas{opacity:1}
.still{position:absolute;inset:0;z-index:-1;background-image:url('./artwork.webp');background-position:center;background-size:contain;background-repeat:no-repeat;opacity:1}
[data-ready] .still{opacity:0}
.caption{position:absolute;bottom:35px;left:48px;right:48px;display:flex;align-items:flex-end;justify-content:space-between;gap:48px;pointer-events:none}
.caption>*{pointer-events:auto}
h1{font-family:Interval,'Songti SC',serif;font-size:42px;line-height:1.2;font-weight:400;letter-spacing:.12em;margin:0 0 20px;display:flex;align-items:center;gap:22px}
h1 span{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:11px;font-weight:400;letter-spacing:.24em;color:var(--muted);padding-top:9px}
.description p{font-size:13px;line-height:1.95;letter-spacing:.035em;color:var(--muted);margin:0;max-width:34em}
.interaction{flex-shrink:0;text-align:right;padding-bottom:1px}
.interaction p{color:var(--muted);font-size:12px;letter-spacing:.035em;line-height:1.7;margin:0 0 11px}
.keyboard-help{display:block;font-size:11px;color:var(--muted);letter-spacing:.04em;margin-top:4px}
.controls{display:flex;gap:22px;justify-content:flex-end}
button{font:inherit;color:#d1d9df;background:none;border:0;border-bottom:1px solid var(--line);padding:0 1px;min-height:44px;display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.04em;cursor:pointer;transition:color .2s,border-color .2s}
button:hover{color:#fff;border-color:#a2b3c0}
button:disabled{opacity:.45;cursor:default}
button svg{height:18px;width:18px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.play-icon{display:none}
[aria-pressed='true'] .play-icon{display:block}
[aria-pressed='true'] .pause-icon{display:none}
.status{position:absolute;top:140px;left:48px;right:48px;max-width:28em;margin:0;color:var(--muted);font-size:12px;line-height:1.8;pointer-events:none}
.status:empty{display:none}
footer{height:64px;padding:0 48px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid #26323c;color:var(--muted);font-size:12px;letter-spacing:.04em}
footer a{min-height:44px;display:flex;align-items:center}
@media(min-width:1600px){.caption,.status{left:64px;right:64px}.identity{left:64px}footer{padding-inline:64px}}
@media(max-width:720px){main{height:calc(100svh - 92px);min-height:720px}.identity{top:14px;left:24px;right:24px}.artwork-view{inset:120px 0 268px}.caption{left:24px;right:24px;bottom:25px;display:block}.description p{font-size:12px;line-height:1.9;max-width:28em}h1{font-size:35px;gap:18px;margin-bottom:14px}h1 span{font-size:11px;padding-top:7px}.interaction{margin-top:22px;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:12px}.interaction p{font-size:11px;margin:0;max-width:90px}.keyboard-help{display:none}.controls{gap:17px}button{font-size:11px;gap:6px}button svg{width:16px;height:16px}.status{top:110px;left:24px;right:24px}footer{height:92px;padding:10px 24px;font-size:11px;gap:0;flex-direction:column;align-items:flex-start;justify-content:center}footer span{max-width:none;line-height:1.8}}
@media(prefers-reduced-motion:reduce){canvas,button{transition:none}}