:root{font-family:Avenir Next,Avenir,PingFang SC,Microsoft YaHei,system-ui,sans-serif;color:#405664;background:#e5eef3;font-synthesis:none;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}main{position:relative;width:100%;height:100%;isolation:isolate;background:radial-gradient(ellipse at 75% 20%,#f1f5f6 0,transparent 55%),radial-gradient(ellipse at 20% 80%,#d8e8ef 0,transparent 65%),#e5eef3}canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}.interface{position:absolute;bottom:max(34px,env(safe-area-inset-bottom));left:max(40px,env(safe-area-inset-left));right:max(38px,env(safe-area-inset-right));display:flex;align-items:end;justify-content:flex-end;pointer-events:none;gap:20px}.controls{display:flex;gap:16px;pointer-events:auto}button{width:54px;height:54px;display:grid;place-items:center;padding:0;border:1px solid #ffffffaa;border-radius:50%;background:#fff6;color:#405664;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);cursor:pointer;transition:background .2s,transform .2s}button:hover{background:#ffffffb3;transform:translateY(-2px)}button:active{transform:scale(.94)}button[hidden]{display:none}button:focus-visible{outline:2px solid #526f83;outline-offset:5px}button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.play-icon,[aria-pressed=true] .pause-icon{display:none}[aria-pressed=true] .play-icon{display:block}.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}.fallback{position:absolute;top:45%;width:100%;text-align:center;padding:20px}@media(max-width:600px){.interface{left:24px;right:24px;bottom:max(28px,env(safe-area-inset-bottom));gap:10px}.controls{gap:10px}button{width:43px;height:43px}button svg{width:18px;height:18px}}@media(prefers-reduced-motion:reduce){button{transition:none}}