:root{--page: #e8e8e8;--panel: #fafafa;--row: #f0f0f0;--row-hover: #e9e9e9;--accent: #ffcc00;--ink: #1a1a1a;--ink-muted: rgba(26, 26, 26, .55);--ink-faint: rgba(26, 26, 26, .28);--border: rgba(26, 26, 26, .16);--radius-panel: 18px 21px 18px 20px;--radius-mobile: 34px}*{box-sizing:border-box}body{margin:0;background:var(--page);color:var(--ink);font-family:Nunito,system-ui,sans-serif}.mono{font-family:IBM Plex Mono,monospace}.muted{color:var(--ink-muted)}.eyebrow{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}button{font-family:inherit;color:inherit;cursor:pointer}.app{display:flex;flex-direction:column;align-items:center;gap:28px;padding:40px 20px 70px}.topbar{display:none;width:100%;max-width:1100px;align-items:center;justify-content:space-between;gap:20px;padding:14px 20px;background:var(--panel);border:1.5px solid var(--ink);border-radius:18px 20px 18px 21px;box-shadow:0 18px 40px -26px #1a1a1a80}.topbar-left{display:flex;align-items:center;gap:10px}.dot{width:9px;height:9px;border-radius:50%;background:var(--accent);border:1.5px solid var(--ink)}.brand{font-size:15px;font-weight:800;letter-spacing:-.01em}.topbar-right{display:flex;align-items:center;gap:8px}.chip-btn{position:relative;font-size:11.5px;padding:6px 9px;min-width:44px;text-align:center;font-variant-numeric:tabular-nums;border:1.5px solid var(--ink-faint);border-radius:8px;background:transparent;color:var(--ink)}.chip-btn:hover{border-color:var(--ink)}.chip-btn.active{background:var(--accent);border-color:var(--ink)}.share-btn{font-size:12.5px;font-weight:700;padding:7px 14px;border:1.5px solid var(--ink);border-radius:20px;background:var(--ink);color:var(--panel)}.panes{display:none;width:100%;max-width:1100px;height:620px;background:var(--panel);border:1.5px solid var(--ink);border-radius:var(--radius-panel);overflow:hidden;box-shadow:0 18px 40px -26px #1a1a1a80}.scene-pane{flex:1.28;position:relative;border-right:1.5px solid var(--border)}.mixer-pane{flex:1;min-width:0;display:flex;flex-direction:column}.mixer-pane-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px 8px}.stop-all-btn{font-size:12.5px;font-weight:700;padding:6px 13px;border:1.5px solid var(--ink);border-radius:20px;background:var(--panel);color:var(--ink);white-space:nowrap}.stop-all-btn:hover{background:var(--accent)}.presets-row{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:0 18px 12px}.presets-row::-webkit-scrollbar{display:none}.preset-chip{position:relative;flex:none;font-size:12.5px;font-weight:600;padding:6px 13px;border:1.5px solid var(--ink);border-radius:20px;background:var(--panel);color:var(--ink);white-space:nowrap}.preset-chip:hover{background:var(--row-hover)}.preset-chip.active{background:var(--accent)}.sounds-list{flex:1;overflow-y:auto;padding:8px 14px 16px;display:flex;flex-direction:column;gap:7px}.sound-row{position:relative;height:44px;flex:none;display:flex;align-items:center;gap:12px;padding:0 14px;border:1.5px solid var(--ink-faint);border-radius:11px 13px 11px 12px;background:var(--row);cursor:pointer;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}.sound-row-fill{position:absolute;left:0;top:0;bottom:0;background:var(--accent);transition:width .12s linear}.sound-row-border{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:11px 13px 11px 12px;border:1.5px solid var(--ink);opacity:0}.sound-row.on .sound-row-border{opacity:1}.sound-row-num{position:relative;width:16px;font-size:10.5px;color:var(--ink-muted)}.sound-row-name{position:relative;flex:1;font-size:14.5px;font-weight:600}.sound-row-pct{position:relative;font-family:IBM Plex Mono,monospace;font-size:11px}.scene{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;background:var(--panel);container-type:size}.scene-canvas{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(100cqw,100cqh * (3114 / 2048));height:min(100cqh,100cqw * (2048 / 3114))}.scene-layer{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.scene-layer-clouds{animation:clouds-drift 55s ease-in-out infinite}@keyframes clouds-drift{0%,to{transform:translate(-2%)}50%{transform:translate(2%)}}.scene-layer-trees.wind-sway{animation:scene-sway 3.4s ease-in-out infinite;transform-origin:50% 100%}@keyframes scene-sway{0%,to{transform:rotate(0)}50%{transform:rotate(-.7deg)}}.scene-wind{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;z-index:4}.leaf{position:absolute;left:108%;width:9px;height:9px;background:var(--ink);border-radius:0 60%;animation-name:leaf-drift;animation-timing-function:linear;animation-iteration-count:infinite}@keyframes leaf-drift{0%{left:108%;transform:translateY(0) rotate(0);opacity:0}12%{opacity:.85}50%{transform:translateY(-16px) rotate(-180deg)}88%{opacity:.65}to{left:-8%;transform:translateY(12px) rotate(-360deg);opacity:0}}.scene-campfire{position:absolute;left:15.5%;bottom:17%;width:8%;height:15%;pointer-events:none;z-index:5}.flame{position:absolute;bottom:0;left:50%;width:55%;height:100%;transform:translate(-50%);background:radial-gradient(circle at 50% 85%,#ffe37a 0%,var(--accent) 45%,#ff8a1f 75%,rgba(255,138,31,0) 82%);border-radius:50%/65% 65% 35% 35%;animation:flame-flicker .85s ease-in-out infinite alternate;transform-origin:bottom center}.flame-side{width:34%;height:68%;opacity:.85}.flame-left{left:30%;animation-duration:.65s;animation-delay:.1s}.flame-right{left:70%;animation-duration:.75s;animation-delay:.25s}@keyframes flame-flicker{0%{transform:translate(-50%) scaleY(1) scaleX(1);opacity:.85}50%{transform:translate(-50%) scaleY(1.18) scaleX(.9);opacity:1}to{transform:translate(-50%) scaleY(.9) scaleX(1.08);opacity:.8}}.scene-dark{position:absolute;top:0;right:0;bottom:0;left:0;background:#000;pointer-events:none;z-index:6;transition:opacity .4s ease}.scene-flash{position:absolute;top:0;right:0;bottom:0;left:0;background:#fff;opacity:0;pointer-events:none;z-index:7;animation:thunder-flash 6.5s ease-in-out infinite}@keyframes thunder-flash{0%,88%,to{opacity:0}89%{opacity:.6}89.5%{opacity:.1}90%{opacity:.7}91%{opacity:0}93%{opacity:.35}93.5%{opacity:0}}.scene-rain{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;z-index:4}.raindrop{position:absolute;top:-6%;width:2px;height:16px;border-radius:2px;background:linear-gradient(to bottom,#1a1a1a00,#1a1a1a8c);animation-name:rain-fall;animation-timing-function:linear;animation-iteration-count:infinite}@keyframes rain-fall{0%{top:-6%;opacity:.8}to{top:104%;opacity:.4}}.scene-label{position:absolute;left:16px;top:14px;z-index:10;font-family:IBM Plex Mono,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}.scene-chips{position:absolute;left:16px;bottom:14px;z-index:10;display:flex;gap:7px;flex-wrap:wrap;max-width:78%}.scene-chip{font-family:IBM Plex Mono,monospace;font-size:10.5px;padding:4px 9px;border:1.5px solid var(--ink);border-radius:20px;background:#fafafadb}.scene-timer-note{position:absolute;right:14px;bottom:14px;z-index:10;font-family:IBM Plex Mono,monospace;font-size:10.5px;color:var(--ink-muted)}.mobile-card{display:flex;width:100%;max-width:392px;flex-direction:column;background:var(--panel);border:1.5px solid var(--ink);border-radius:var(--radius-mobile);overflow:hidden;box-shadow:0 18px 40px -26px #1a1a1a80}.mobile-topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 10px}.mobile-scene{position:relative;height:260px;flex:none;border-top:1.5px solid var(--border);border-bottom:1.5px solid var(--border)}.mobile-presets-row{padding:11px 16px 9px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}.mobile-presets-row::-webkit-scrollbar{display:none}.mobile-sheet-header{padding:10px 16px 6px;display:flex;align-items:center;justify-content:flex-end;border-top:1.5px solid var(--border)}.mobile-list{padding:8px 16px 20px}.mobile-list .sound-row{height:52px}@media (min-width: 860px){.topbar,.panes{display:flex}.mobile-card{display:none}}