:root{--bg: #000;--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-top: env(safe-area-inset-top, 0px)}body{background:var(--bg);color:#fff;overflow:hidden}.app{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#1a1a2e,#000 70%)}.stage{position:relative;height:100dvh;aspect-ratio:9 / 16;max-width:100vw;background:#000;overflow:hidden;box-shadow:0 0 80px #0009;user-select:none;-webkit-user-select:none}@media (min-aspect-ratio: 9/16){.stage{height:100dvh;width:auto}}@media (max-aspect-ratio: 9/16){.stage{width:100vw;height:auto}}.player-fill{width:100%;height:100%}.progress-row{position:absolute;top:calc(8px + var(--safe-top));left:8px;right:8px;display:flex;gap:4px;z-index:10;pointer-events:none}.progress-cell{flex:1;height:3px;background:#ffffff40;border-radius:2px;overflow:hidden}.progress-fill{height:100%;width:0;background:#fff;border-radius:2px}.tap-zones{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;z-index:5}.tap-zone{flex:1;cursor:pointer;-webkit-tap-highlight-color:transparent}.tap-zone.left{flex:.35}.tap-zone.right{flex:.65}.start-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#000000c7;z-index:20;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;color:#fff;font-family:Fraunces,serif;text-align:center;padding:40px;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.start-overlay h1{font-size:clamp(48px,12vmin,120px);margin:0;letter-spacing:-2px;font-weight:900;line-height:.95}.start-overlay h1 em{display:block;font-style:italic;background:linear-gradient(90deg,#ff006e,#ffbe0b);-webkit-background-clip:text;background-clip:text;color:transparent}.start-overlay .hint{font-family:IBM Plex Mono,monospace;font-size:clamp(14px,2.5vmin,18px);letter-spacing:4px;text-transform:uppercase;opacity:.65;margin-top:8px}.start-overlay .play-button{margin-top:8px;width:96px;height:96px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:40px;color:#000;box-shadow:0 12px 40px #ffffff40}.controls{position:absolute;bottom:calc(20px + var(--safe-bottom));right:16px;display:flex;gap:8px;z-index:12}.ctrl-btn{width:44px;height:44px;border-radius:50%;border:none;background:#00000080;color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.ctrl-btn:hover{background:#000000b3}.continue-hint{position:absolute;bottom:calc(80px + var(--safe-bottom));left:50%;transform:translate(-50%);background:#000000a6;color:#fff;padding:10px 18px;border-radius:999px;font-family:IBM Plex Mono,monospace;font-size:14px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;z-index:11;pointer-events:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);white-space:nowrap;animation:hint-pulse 1.6s ease-in-out infinite}@keyframes hint-pulse{0%,to{opacity:.7;transform:translate(-50%)}50%{opacity:1;transform:translate(-50%,-3px)}}