@layer theme,base,legacy;@layer components{@keyframes orb-spin{to{--orb-a:360deg}}@keyframes orb-breathe{0%,to{transform:scale(var(--orb-core-min-scale,.52));opacity:.85}50%{opacity:1;transform:scale(1)}}.orb{isolation:isolate;border-radius:999px;flex-shrink:0;display:inline-block;position:relative;overflow:hidden}.orb>span{border-radius:inherit;pointer-events:none;position:absolute;inset:0}.orb-core{animation:orb-spin var(--orb-dur,3s) linear infinite;animation-delay:var(--orb-delay,0s);animation-direction:var(--orb-dir,normal);will-change:--orb-a}.orb-spec-core,.orb-spec{mix-blend-mode:screen}.orb-pulse-core{transform-origin:50%;mix-blend-mode:screen;background:radial-gradient(circle,#fffffff2 0%,#0000 70%);border-radius:999px;margin:0;animation:1.96s ease-in-out infinite orb-breathe;inset:50% auto auto 50%;translate:-50% -50%}@media (prefers-reduced-motion:reduce){.orb-core{--orb-a:45deg;animation:none}.orb-pulse-core{animation:none;transform:scale(1)}}}@layer utilities;@property --orb-a{syntax:"<angle>";inherits:false;initial-value:0deg}
@layer theme,base,legacy;@layer components{.sound-panel-root{z-index:200;opacity:0;transition:opacity .2s var(--ease-out);position:fixed;inset:0}.sound-panel-root.is-visible{opacity:1}.sound-panel-scrim{background:#0000008c;position:absolute;inset:0}.sound-panel{width:min(440px,100vw - 24px);color:var(--text);background:color-mix(in srgb, var(--surface) 82%, transparent);transition:transform .28s var(--ease-out);border-radius:32px;grid-template-rows:auto auto minmax(0,1fr);gap:16px;padding:22px 22px 0;display:grid;position:absolute;top:12px;bottom:12px;right:12px;overflow:hidden;transform:translate(24px)}.sound-panel-root.is-visible .sound-panel{transform:none}.sound-panel-head{justify-content:space-between;align-items:center;gap:12px;display:flex}.sound-panel-head h2{margin:0}.sound-panel-tabs{width:100%;display:grid}.sound-panel-body{overscroll-behavior:contain;scrollbar-width:none;align-content:start;gap:14px;min-height:0;padding-bottom:24px;display:grid;overflow-y:auto}.sound-panel-note{color:var(--text-secondary);margin:0}.sound-panel-volume{color:var(--text-secondary);grid-template-columns:auto minmax(0,1fr) 40px;align-items:center;gap:12px;display:grid}.sound-panel-volume>:last-child{color:var(--text);text-align:right;font-variant-numeric:tabular-nums}.sound-panel-volume [data-slot=slider-track]{background:var(--pending);height:6px}.sound-panel-volume [data-slot=slider-range]{background:var(--played)}.sound-panel-volume [data-slot=slider-thumb]{background:var(--played);border:0;width:16px;height:16px}.sound-panel-chips{scrollbar-width:none;gap:8px;margin-right:-22px;padding-right:22px;display:flex;overflow-x:auto}.sound-panel-chip{height:40px;color:var(--text-secondary);background:var(--hover-background);font:600 14px/20px var(--font-ui);border-radius:999px;flex:none;padding:0 16px}.sound-panel-chip:hover{color:var(--text)}.sound-panel-chip.is-active{color:var(--text);background:var(--fill-strong)}.sound-panel-rows{gap:2px;display:grid}.sound-panel-row{text-align:left;border-radius:16px;align-items:center;gap:12px;width:100%;padding:8px;display:flex}.sound-panel-row:hover{background:var(--fill-faint)}.sound-panel-row.is-active,.sound-panel-effect.is-active{background:var(--accent-background);box-shadow:inset 0 0 0 1.5px var(--accent)}.sound-panel-row-name{min-width:0;font:600 15px/20px var(--font-ui);flex:1;display:grid}.sound-panel-row-name small{color:var(--text-secondary);font:500 12px/16px var(--font-ui)}.sound-panel-check{width:20px;height:20px;color:var(--accent-soft);flex:none}.sound-panel-play{width:16px;height:16px;color:var(--text-tertiary);flex:none}.sound-panel-spinner{border:2px solid var(--fill-strong);border-top-color:var(--text);border-radius:50%;flex:none;width:18px;height:18px;animation:.8s linear infinite sound-panel-spin}@keyframes sound-panel-spin{to{transform:rotate(360deg)}}.sound-bed-orb{background:radial-gradient(60% 60% at 32% 28%, #ffffff8c, transparent 60%), radial-gradient(circle at 50% 60%, var(--orb-from), var(--orb-to));border-radius:50%;flex:none;width:44px;height:44px;box-shadow:inset 0 0 0 1px #ffffff2e}.sound-bed-orb.is-empty{box-shadow:inset 0 0 0 2px var(--divider-strong);background:0 0}.sound-panel-family{gap:10px;display:grid}.sound-panel-family h3{color:var(--text-secondary);margin:4px 0 0}.sound-panel-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.sound-panel-effect{text-align:center;background:var(--fill-faint);border-radius:18px;align-content:start;justify-items:center;gap:6px;min-width:0;padding:12px 6px;display:grid}.sound-panel-effect:hover{background:var(--hover-background)}.sound-panel-effect-orb{place-items:center;display:grid;position:relative}.sound-panel-effect-orb>svg{color:#fff;filter:drop-shadow(0 1px 2px #0006);width:24px;height:24px;position:absolute}.sound-panel-effect-name{font:600 13px/16px var(--font-ui)}.sound-panel-effect-description{color:var(--text-secondary);font:500 11px/14px var(--font-ui)}.sound-panel :where(button):active:not(:disabled){transform:scale(var(--press-scale))}@media (max-width:760px){.sound-panel-scrim{background:#000000b8}.sound-panel{border-radius:38px 38px 0 0;width:auto;padding:18px 18px 0;inset:clamp(16px,12dvh,96px) 0 0;transform:translateY(32px)}.sound-panel-body{padding-bottom:calc(28px + env(safe-area-inset-bottom))}.sound-panel-chips{margin-right:-18px;padding-right:18px}}@media (prefers-reduced-transparency:reduce){.sound-panel{background:var(--surface-elevated)}}@media (prefers-reduced-motion:reduce){.sound-panel-root,.sound-panel{transition:none}.sound-panel{transform:none}.sound-panel-spinner{animation:none}.sound-panel :where(button):active{transform:none}}}@layer utilities;
