main[data-v-686b7cae]{flex-direction:column;align-items:center;gap:2.5rem;width:100%;max-width:360px;padding:2rem;display:flex}h1[data-v-686b7cae]{letter-spacing:.5em;text-transform:lowercase;color:var(--muted);font-size:1.1rem;font-weight:300}.types[data-v-686b7cae]{gap:.5rem;display:flex}.types button[data-v-686b7cae]{border:1px solid var(--border);background:var(--surface);color:var(--muted);cursor:pointer;border-radius:2rem;padding:.45rem 1.2rem;font-size:.875rem;transition:border-color .15s,color .15s}.types button[data-v-686b7cae]:hover{color:var(--text)}.types button.active[data-v-686b7cae]{border-color:var(--accent);color:var(--accent)}.play-btn[data-v-686b7cae]{border:1.5px solid var(--border);background:var(--surface);width:88px;height:88px;color:var(--text);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;padding-left:3px;font-size:1.4rem;transition:border-color .2s,background .2s;display:flex}.play-btn.active[data-v-686b7cae]{padding-left:0}.play-btn[data-v-686b7cae]:hover{border-color:var(--accent)}.play-btn.active[data-v-686b7cae]{border-color:var(--accent);background:var(--accent-dim)}.volume[data-v-686b7cae]{color:var(--muted);align-items:center;gap:.75rem;font-size:1rem;display:flex}input[type=range][data-v-686b7cae]{width:160px;accent-color:var(--accent);cursor:pointer}*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0c0c0c;--surface:#1c1c1c;--border:#2a2a2a;--text:#e0e0e0;--muted:#555;--accent:#7eb8f7;--accent-dim:#7eb8f71f}html,body{height:100%}body{background:var(--bg);color:var(--text);justify-content:center;align-items:center;min-height:100vh;font-family:system-ui,-apple-system,sans-serif;display:flex}