:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#14110f;--panel:#1d1815;--panel2:#2b231e;--line:#4a3b30;--accent:#d9822b;--text:#e8e0d5;--muted:#9a8d80;--danger:#ff7b6b;--tap:44px;font-family:system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;margin:0;overflow:hidden}h1,h2,h3,p{margin:0}button,input,select,textarea,.btn{font:inherit;touch-action:manipulation}button,.btn{min-height:var(--tap);background:var(--panel2);color:inherit;border:1px solid var(--line);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:10px;justify-content:center;align-items:center;gap:.4rem;padding:0 .9rem;display:inline-flex}button:hover,.btn:hover{border-color:var(--accent)}button:active,.btn:active{background:#3a2e26}button:disabled{opacity:.45;cursor:default}button:focus-visible,.btn:focus-within,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.primary{background:var(--accent);color:#14110f;border-color:var(--accent);font-weight:600}.primary:active{background:#f09a44}.danger{color:var(--danger)}.icon{min-width:var(--tap);flex:none;padding:0}.wide{width:100%}input,textarea,select{min-height:var(--tap);background:var(--panel2);width:100%;color:inherit;border:1px solid var(--line);border-radius:10px;padding:0 .7rem;font-size:16px}textarea{resize:vertical;padding:.6rem .7rem}input[type=range]{height:36px;accent-color:var(--c,var(--accent));background:0 0;border:none;padding:0}.muted{color:var(--muted);font-size:.875rem}.app{grid-template:"top""content"minmax(0,1fr)"transport""tabs"/minmax(0,1fr);height:100dvh;display:grid}.topbar{background:var(--panel);border-bottom:1px solid var(--line);padding:.5rem 0;padding-top:max(.5rem, env(safe-area-inset-top));grid-area:top}.topbar h1{color:var(--accent);padding:0 1rem .4rem;font-size:1rem}.rooms{scrollbar-width:none;scroll-snap-type:x proximity;gap:.4rem;padding:0 1rem;display:flex;overflow-x:auto}.rooms::-webkit-scrollbar{display:none}.chip{scroll-snap-align:start;border-radius:999px;flex:none}.chip.on{background:var(--accent);color:#14110f;border-color:var(--accent);font-weight:600}.chip.add{min-width:var(--tap);padding:0}.side,.mix{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;grid-area:content;min-width:0;padding:1rem;overflow-y:auto}.side{background:var(--panel);flex-direction:column;gap:1.5rem;display:none}.sec{flex-direction:column;gap:.6rem;display:flex}.sec h2,.panel h2{letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-top:.2rem;font-size:.8rem}.app[data-view=sounds] .side,.app[data-view=project] .side{display:flex}.app[data-view=sounds] .mix,.app[data-view=project] .mix,.app[data-view=sounds] .sec-project,.app[data-view=project] .sec-sounds,.app:not([data-view=mix]) .transport{display:none}.transport{background:var(--panel);border-top:1px solid var(--line);grid-area:transport;align-items:center;gap:.6rem;padding:.6rem 1rem;display:flex}.play{background:var(--accent);color:#14110f;border-color:var(--accent);border-radius:50%;width:56px;min-height:56px;padding:0;font-size:1.3rem}.play.on{background:var(--danger);border-color:var(--danger)}.toggle.on{border-color:var(--accent);color:var(--accent)}.clock{font-variant-numeric:tabular-nums;flex-direction:column;flex:1;min-width:0;line-height:1.2;display:flex}.clock small{color:var(--muted);font-size:.7rem}.tabbar{background:var(--panel);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);grid-area:tabs;grid-template-columns:repeat(3,1fr);display:grid}.tabbar button{min-height:52px;color:var(--muted);background:0 0;border:none;border-radius:0}.tabbar button.on{color:var(--accent);box-shadow:inset 0 2px 0 var(--accent);font-weight:600}.room-settings{flex-wrap:wrap;align-items:flex-end;gap:.6rem;margin-bottom:1rem;display:flex}.room-name{flex:100%;font-weight:600}.length{color:var(--muted);flex-direction:column;gap:.2rem;width:8rem;font-size:.8rem;display:flex}.room-settings .danger{margin-left:auto}.empty{text-align:center;flex-direction:column;align-items:center;gap:.6rem;padding:2.5rem 1rem;display:flex}.layers{flex-direction:column;gap:.8rem;display:flex;position:relative}.ruler{height:1rem;color:var(--muted);font-variant-numeric:tabular-nums;font-size:.7rem;position:relative}.ruler span{border-left:1px solid var(--line);padding-left:3px;line-height:1rem;position:absolute;top:0}.playhead{top:0;bottom:0;left:calc(var(--pos,0) * 100%);opacity:.75;pointer-events:none;z-index:2;background:#fff;border-radius:1px;width:2px;margin-left:-1px;position:absolute}.card{background:var(--panel);border-top:3px solid var(--c);border-radius:14px;padding:.6rem 0 .9rem;overflow:hidden}.card>:not(.timeline){padding-left:.8rem;padding-right:.8rem}.card-head{justify-content:space-between;align-items:center;gap:.5rem;display:flex}.name{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.seg{grid-template-columns:repeat(3,1fr);gap:0;margin:.3rem 0 .6rem;display:grid}.seg button{border-color:var(--line);border-radius:0;margin-left:-1px}.seg button:first-child{border-radius:10px 0 0 10px;margin-left:0}.seg button:last-child{border-radius:0 10px 10px 0}.seg button.on{background:var(--c);color:#14110f;border-color:var(--c);z-index:1;font-weight:600}.timeline{background:#ffffff0a;height:56px}.timeline.draggable{touch-action:pan-y;cursor:ew-resize}.timeline canvas{display:block}.hint{color:var(--muted);margin:.4rem 0 .5rem;font-size:.78rem}.grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.4rem .9rem;display:grid}.grid .wide{grid-column:1/-1}.field{flex-direction:column;gap:.15rem;min-width:0;display:flex}.field-head{color:var(--muted);justify-content:space-between;font-size:.8rem;display:flex}.field-head output{color:var(--text);font-variant-numeric:tabular-nums}.sound{background:var(--panel2);border-radius:12px;align-items:center;gap:.35rem;padding:.3rem;display:flex}.sound button{background:0 0;border:none}.sound .add{background:var(--accent);color:#14110f;flex:none;padding:0 .7rem;font-weight:600}.sound-text{flex-direction:column;flex:1;min-width:0;line-height:1.25;display:flex}.sound-text small{color:var(--muted)}.panel{border-top:1px solid var(--line);flex-direction:column;gap:.5rem;margin-top:.5rem;padding-top:1rem;display:flex}.tabs{grid-template-columns:1fr 1fr;gap:.4rem;display:grid}.tabs button.sel{background:var(--accent);color:#14110f;border-color:var(--accent);font-weight:600}.stack{flex-direction:column;gap:.5rem;display:flex}.stack h3{color:var(--accent);text-transform:uppercase;letter-spacing:.06em;margin-top:.6rem;font-size:.8rem}.item{gap:.3rem;display:flex}.item>button:first-child{text-align:left;flex:1;justify-content:flex-start;height:auto;padding:.5rem .8rem}.item small{color:var(--muted);margin-left:.4rem}.error{color:var(--danger);white-space:pre-wrap;word-break:break-word;font-size:.85rem}.note{color:#8fce8f;font-size:.85rem}.toast{left:50%;bottom:calc(150px + env(safe-area-inset-bottom));pointer-events:none;z-index:10;background:#000d;border-radius:999px;max-width:90vw;padding:.6rem 1rem;font-size:.9rem;position:fixed;transform:translate(-50%)}@media (width>=900px){.app{grid-template:"top top""side mix"minmax(0,1fr)"side transport"/380px minmax(0,1fr)}.topbar{align-items:center;gap:1.5rem;padding:.5rem 1rem;display:flex}.topbar h1{padding:0}.rooms{flex:1;padding:0}.side{border-right:1px solid var(--line);grid-area:side;display:flex!important}.mix{grid-area:mix;padding:1.25rem 1.5rem;display:block!important}.transport{grid-area:transport;display:flex!important}.sec-sounds,.sec-project{display:flex!important}.tabbar{display:none}.room-name{flex:16rem}.toast{bottom:100px}}@media (prefers-reduced-motion:no-preference){.play,.chip{transition:background .15s}}.export-format{flex-wrap:wrap;align-items:center;gap:.3rem .8rem;margin-bottom:1rem;display:flex}.export-format>span{color:var(--muted);font-size:.8rem}.export-format .muted{flex:100%;font-size:.78rem}.seg.two{grid-template-columns:repeat(2,5rem);margin:0}.warn{color:#e0c14f}.item small{margin-left:0;display:block}.item>button:first-child{flex-direction:column;align-items:flex-start;gap:0}.export-format .seg{--c:var(--accent)}.update{left:1rem;right:1rem;bottom:calc(150px + env(safe-area-inset-bottom));z-index:11;background:var(--panel2);border:1px solid var(--accent);border-radius:14px;align-items:center;gap:.6rem;max-width:34rem;margin:0 auto;padding:.6rem .8rem;font-size:.9rem;display:flex;position:fixed}.update span{flex:1}@media (width>=900px){.update{margin:0;bottom:100px;left:auto;right:1.5rem}}.search{gap:.4rem;display:flex}.search input{flex:1;min-width:0}.search button{flex:none}