*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:linear-gradient(135deg,#1a1a2e,#16213e);min-height:100vh;color:#fff}.container{max-width:800px;margin:0 auto;padding:60px 20px;text-align:center}@media (max-width:600px){.container{max-width:100%;padding:40px 16px}}h1{font-size:2rem;margin-bottom:.5rem}.subtitle{color:#a0a0a0;margin-bottom:40px}.audio-player{background:hsla(0,0%,100%,.05);border-radius:16px;padding:30px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid hsla(0,0%,100%,.1)}.connection-status{font-size:.875rem;margin-bottom:20px;padding:8px 16px;background:rgba(0,0,0,.2);border-radius:20px;display:inline-block}.connection-status.connected{color:#4ade80}.connection-status.disconnected{color:#f87171}.controls{margin:30px 0}.controls button{font-size:1.25rem;padding:16px 48px;border:none;border-radius:12px;cursor:pointer;font-weight:600;transition:all .2s ease}.controls button:disabled{opacity:.5;cursor:not-allowed}.play-btn{background:linear-gradient(135deg,#4ade80,#22c55e);color:#000}.play-btn:hover:not(:disabled){transform:scale(1.05);box-shadow:0 8px 30px rgba(74,222,128,.3)}.stop-btn{background:linear-gradient(135deg,#f87171,#ef4444);color:#fff}.stop-btn:hover:not(:disabled){transform:scale(1.05);box-shadow:0 8px 30px hsla(0,91%,71%,.3)}.reset-btn{background:linear-gradient(135deg,#6b7280,#4b5563);color:#fff;margin-left:12px;padding:16px 24px}.reset-btn:hover:not(:disabled){transform:scale(1.05);box-shadow:0 8px 30px hsla(220,9%,46%,.3)}.time-display{font-size:1.5rem;font-family:SF Mono,Monaco,monospace;color:#e0e0e0;margin-bottom:20px}.seek-container{position:relative;width:100%;padding:16px 0;margin-bottom:20px;cursor:pointer;touch-action:none}.progress-bar{width:100%;height:6px;background:hsla(0,0%,100%,.15);overflow:visible}.progress-bar,.progress-bar-fill{border-radius:3px;position:relative}.progress-bar-fill{height:100%;background:linear-gradient(90deg,#4ade80,#22c55e)}.seek-handle{position:absolute;top:50%;transform:translate(-50%,-50%);width:20px;height:20px;background:#fff;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.3);transition:transform .1s ease,left .05s linear;pointer-events:none;z-index:10}.seek-container.dragging .seek-handle,.seek-container:hover .seek-handle{transform:translate(-50%,-50%) scale(1.2)}.seek-container.dragging .seek-handle{transition:transform .1s ease}.seek-container:hover .progress-bar{height:8px}@media (max-width:600px){.seek-handle{width:28px;height:28px}}.info{font-size:.875rem;color:#6b7280;background:rgba(0,0,0,.2)}.debug-info,.info{padding:12px;border-radius:8px}.debug-info{margin-top:20px;background:rgba(0,0,0,.3);font-size:.75rem;font-family:SF Mono,Monaco,monospace;color:#9ca3af;word-break:break-all}.debug-info .error{color:#f87171;margin-top:8px}