:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#11151c;--surface:#1a2029;--surface-2:#232b36;--text:#ece9e3;--muted:#b0b7c1;--border:#364150;--accent:#9cc3e6;--accent-text:#0c1520;--accent-soft:#9cc3e624;--danger:#ffb4a8;--focus:#ffd479;--radius:16px;--font:system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif}@media (prefers-color-scheme:light){:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f4f1ea;--surface:#fffdf8;--surface-2:#ece7dc;--text:#1b2129;--muted:#4f5761;--border:#cfc7b8;--accent:#2b5b86;--accent-text:#fff;--accent-soft:#2b5b861a;--danger:#a3271a;--focus:#8a5a00}}@media (prefers-contrast:more){:root{--muted:var(--text);--border:var(--text)}}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--bg);color:var(--text);font-family:var(--font);margin:0;font-size:1.0625rem;line-height:1.5}.app{max-width:36rem;padding:max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));flex-direction:column;gap:16px;margin:0 auto;display:flex}.header h1{text-align:center;color:var(--muted);margin:8px 0 0;font-size:1.25rem;font-weight:600}:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.hero{flex-direction:column;align-items:center;gap:12px;padding:8px 0;display:flex}.play{border:2px solid var(--accent);background:var(--surface);width:9.5rem;height:9.5rem;color:var(--accent);font:inherit;cursor:pointer;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:4px;font-size:1.25rem;font-weight:600;transition:background-color .2s,color .2s;display:flex}[data-status=playing] .play,[data-status=starting] .play{background:var(--accent);color:var(--accent-text)}.status{min-height:1.5em;color:var(--muted);text-align:center;margin:0}.error{color:var(--danger);text-align:center;margin:0}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);min-width:0;margin:0;padding:16px}fieldset.card{padding-top:8px}legend,.card-title,summary{margin:0 0 8px;padding:0;font-size:1.0625rem;font-weight:600}fieldset.card>legend{float:left;width:100%;margin-bottom:12px}fieldset.card>legend+*{clear:both}.hint{color:var(--muted);margin:6px 0 0;font-size:.9375rem}.sound-grid{grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:10px;display:grid}.sound-tile{cursor:pointer;display:block;position:relative}.sound-tile input,.chip input{opacity:0;cursor:pointer;width:100%;height:100%;margin:0;position:absolute;inset:0}.tile-body{border:2px solid var(--border);background:var(--surface-2);border-radius:12px;grid-template-rows:auto auto;grid-template-columns:auto 1fr;align-items:center;column-gap:10px;min-height:4.5rem;padding:10px 12px;display:grid}.tile-body svg{color:var(--muted);grid-row:1/3}.tile-name{font-weight:600}.tile-desc{color:var(--muted);grid-column:2;font-size:.8125rem;line-height:1.3}.sound-tile input:checked+.tile-body{border-color:var(--accent);background:var(--accent-soft)}.sound-tile input:checked+.tile-body svg{color:var(--accent)}.sound-tile input:focus-visible+.tile-body,.chip input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}.chips{flex-wrap:wrap;gap:8px;display:flex}.chip{position:relative}.chip span{border:2px solid var(--border);background:var(--surface-2);border-radius:999px;align-items:center;min-height:48px;padding:0 16px;display:inline-flex}.chip input:checked+span{border-color:var(--accent);background:var(--accent);color:var(--accent-text);font-weight:600}.field{margin-top:12px}.field:first-child,.card-title+.field{margin-top:0}.field-row{justify-content:space-between;align-items:baseline;display:flex}.field label{font-weight:500}.field output{color:var(--muted);font-variant-numeric:tabular-nums}input[type=range]{width:100%;height:48px;accent-color:var(--accent);cursor:pointer;background:0 0;margin:0}select,input[type=number]{width:100%;min-height:48px;font:inherit;color:var(--text);background:var(--surface-2);border:2px solid var(--border);border-radius:10px;margin-top:4px;padding:0 12px;display:block}.switch{grid-template-columns:1fr auto;align-items:center;column-gap:12px;display:grid}.switch label{cursor:pointer;grid-area:1/1;align-items:center;min-height:48px;display:flex}.switch input{appearance:none;background:var(--surface-2);border:2px solid var(--border);cursor:pointer;border-radius:999px;grid-area:1/2;width:52px;height:32px;margin:8px 0;transition:background-color .2s;position:relative}.switch input:after{content:"";background:var(--muted);border-radius:50%;width:22px;height:22px;transition:transform .2s;position:absolute;top:3px;left:3px}.switch input:checked{background:var(--accent);border-color:var(--accent)}.switch input:checked:after{background:var(--accent-text);transform:translate(20px)}.switch .hint{grid-column:1/-1;margin-top:0}button{font:inherit}.secondary{border:2px solid var(--accent);min-height:48px;color:var(--accent);cursor:pointer;background:0 0;border-radius:999px;margin-top:12px;padding:0 16px;font-weight:600}.secondary:disabled{opacity:.5;cursor:not-allowed}.favorites{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.favorites li{gap:8px;display:flex}.fav{text-align:left;min-height:48px;color:var(--text);background:var(--surface-2);border:2px solid var(--border);cursor:pointer;border-radius:12px;flex:1;align-items:center;gap:10px;padding:8px 14px;display:flex}.fav-remove{width:48px;min-height:48px;color:var(--muted);border:2px solid var(--border);cursor:pointer;background:0 0;border-radius:12px;place-items:center;display:grid}.advanced summary{cursor:pointer;align-items:center;min-height:32px;margin:0;display:flex}.advanced[open] summary{margin-bottom:12px}.footer{color:var(--muted);text-align:center;font-size:.875rem}.footer p{margin:0}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}