@import "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;500;600&display=swap";:root{color:#effff6;background:#08272e;font-family:Manrope,sans-serif}*{box-sizing:border-box}body{min-width:320px;margin:0}button,input{font:inherit}button{cursor:pointer}.app{--mx:0;--my:0;background:#08272e;min-height:100svh;position:relative;overflow:hidden}.visualizer-bg{z-index:1;pointer-events:none;opacity:0;mix-blend-mode:screen;width:100%;height:100%;transition:opacity .35s;position:absolute;inset:0}.visualizer-bg.playing{opacity:.95}.scene{background:#0a3c43;position:absolute;inset:0;overflow:hidden}.layer{pointer-events:none;-webkit-user-select:none;user-select:none;will-change:transform;position:absolute}.far{object-fit:cover;object-position:center top;filter:saturate(.72)contrast(1.08)brightness(.88);width:110%;height:76%;transform:translate(calc(var(--mx) * 20px), calc(var(--my) * 13px)) scale(1.08);inset:-5%}.middle{filter:saturate(.78)contrast(1.04)brightness(.92);transform:translate(calc(var(--mx) * -17px), calc(var(--my) * -10px)) scale(1.08);background:url(/2.png) 50%/cover no-repeat;inset:-6%}.near{filter:saturate(.78)contrast(1.08)brightness(.83);width:min(76vw,1100px);transform:translate(calc(var(--mx) * -38px), calc(var(--my) * -22px));bottom:-10%;left:-12%}.shade{pointer-events:none;background:linear-gradient(#03171c38,#0000 44%),linear-gradient(#0000 47%,#03171c9e);position:absolute;inset:0}.brand{z-index:2;color:#fff;align-items:center;text-decoration:none;display:flex;position:absolute;top:28px;left:clamp(22px,4vw,64px)}.brand img{object-fit:contain;width:112px;max-height:46px;display:block}.brand strong{letter-spacing:-.15em;margin-left:-9px;font:500 31px Unbounded,sans-serif}.player{z-index:2;color:#effff6;background:#0a252d;border:1px solid #defff173;border-radius:26px;width:min(720px,100% - 44px);padding:12px;position:absolute;bottom:clamp(28px,6vh,72px);right:50%;transform:translate(50%);box-shadow:0 18px 60px #00000047}.mode-switch{background:#123b43;border-radius:999px;gap:4px;width:fit-content;margin:0 0 10px;padding:3px;display:flex}.mode-switch button{color:#9abdb8;background:0 0;border:0;border-radius:999px;padding:7px 15px;font-size:12px;font-weight:600}.mode-switch button.active{color:#08292d;background:#aaf7c8}.player-main{align-items:center;gap:14px;padding:7px 5px 11px;display:flex}.play{color:#082b2e;background:#aaf7c8;border:0;border-radius:50%;flex:none;place-items:center;width:56px;height:56px;display:grid}.play svg{width:21px}.now{gap:4px;min-width:0;display:grid}.now span{color:#9fc5bd;letter-spacing:.08em;font-size:10px;font-weight:700}.now b{color:#f4fff9;text-overflow:ellipsis;white-space:nowrap;font-size:16px;font-weight:600;overflow:hidden}.now small{color:#8fb4ad;font-size:11px}.status{background:#e39778;border-radius:50%;width:7px;height:7px;margin-right:4px;display:inline-block}.status.on{background:#aaf7c8;box-shadow:0 0 0 4px #aaf7c826}.actions{align-items:center;gap:7px;margin-left:auto;display:flex}.copy,.mute{color:#d9f6ea;background:#123b43;border:1px solid #d6ffee40;border-radius:999px;justify-content:center;align-items:center;gap:6px;height:37px;display:inline-flex}.copy{padding:0 12px;font-size:11px}.mute{width:37px;padding:0}.copy:hover,.mute:hover{color:#082c2f;background:#aaf7c8}.volume{accent-color:#aaf7c8;width:72px}.wave{background:#0d3038;border-radius:16px;height:38px;position:relative;overflow:hidden}.wave canvas{opacity:.22;width:100%;height:100%;display:block}.wave.playing canvas{opacity:1}.wave span{color:#82aaa1;font-size:10px;position:absolute;top:12px;left:14px}.error{color:#f1a184;margin:8px 5px 0;font-size:11px}@media (prefers-reduced-motion:reduce){.layer{transform:none!important}}@media (width<=620px){.brand{top:21px;left:21px}.brand img{width:88px}.brand strong{font-size:25px}.player{border-radius:22px;width:calc(100% - 32px);padding:10px;bottom:22px}.player-main{gap:10px}.play{width:50px;height:50px}.now b{font-size:13px}.now small{font-size:10px}.copy span,.volume{display:none}.copy{width:37px;padding:0}.wave span{font-size:8px}.near{width:130vw;bottom:-2%;left:-29%}}