:root{--bg: #1c140f;--surface-1: #2b2018;--surface-2: #3a2c20;--text: #f4e9d8;--text-muted: #b9a68d;--accent: #e8934a;--accent-support: #5a8f7b;--danger: #d1495b;--success: #7fae5a;--label: #f0e4cb;--font-display: "Baloo 2", ui-rounded, sans-serif;--font-ui: "Inter", -apple-system, "Segoe UI", sans-serif;--space-1: 8px;--space-2: 16px;--space-3: 24px;--space-4: 32px;--space-6: 48px;--space-8: 64px;--radius: 14px;--radius-pill: 999px;--shadow-panel: 0 2px 4px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);--shadow-raised: 0 1px 2px rgba(0, 0, 0, .4), 0 3px 8px rgba(0, 0, 0, .3);--shadow-pressed: 0 1px 1px rgba(0, 0, 0, .5);--glow-accent: 0 0 24px rgba(232, 147, 74, .25);--ease-out: cubic-bezier(.16, 1, .3, 1);--motion-ui: .16s;--motion-feedback: .1s}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;height:100%}body{background:var(--bg);color:var(--text);font-family:var(--font-ui);line-height:1.5;-webkit-font-smoothing:antialiased}h1,h2,h3{font-family:var(--font-display);margin:0;line-height:1.15}.grain{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E")}#app>*:not(.grain,.toaster-host){position:relative;z-index:1}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}button,select,input{font-family:inherit}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}#app{min-height:100dvh;display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-2);max-width:1440px;margin:0 auto;width:100%}.topbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-2)}.tagline{margin:0;color:var(--text-muted);font-size:.9rem}.topbar__actions{display:flex;align-items:center;gap:var(--space-1)}.deck-page{flex:1;display:grid;grid-template-columns:62fr 38fr;gap:var(--space-2);align-items:start;min-height:0}.deck{position:sticky;top:var(--space-2);display:flex;flex-direction:column;gap:var(--space-2);min-height:calc(100dvh - var(--space-8) - var(--space-3));padding:var(--space-2);border-radius:var(--radius);background:radial-gradient(ellipse 80% 60% at 50% 38%,rgba(232,147,74,.16),transparent 70%),linear-gradient(180deg,var(--surface-1),var(--bg));box-shadow:var(--shadow-panel),inset 0 1px #ffffff0d}.deck__canvas{flex:1;width:100%;min-height:60vh;display:block;border-radius:calc(var(--radius) - 4px)}.deck__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);flex-wrap:wrap}.deck__readout{display:flex;align-items:center;gap:var(--space-1);min-width:0}.deck__status{margin:0;color:var(--text-muted);font-size:.85rem;font-variant-numeric:tabular-nums}.deck-panel{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}@media(max-width:900px){.deck-page{grid-template-columns:1fr}.deck{position:static;min-height:0}.deck__canvas{min-height:42vh}}@media(max-width:560px){#app{padding:var(--space-1)}.topbar{grid-template-columns:1fr;justify-items:center;text-align:center;gap:var(--space-1)}.topbar__actions{width:100%;justify-content:center}.deck{padding:var(--space-1)}.deck__canvas{min-height:38vh}.deck__bar{justify-content:center}.deck__readout{order:2}}.wordmark{position:relative;display:inline-flex;align-items:baseline;gap:.18em;font-family:var(--font-display);font-size:clamp(1.5rem,1.1rem + 1.4vw,2.1rem);font-weight:700;letter-spacing:-.01em;transform:rotate(-1.6deg)}.wordmark__side{color:var(--text)}.wordmark__b{position:relative;color:var(--bg);background:var(--accent);padding:0 .28em;border-radius:6px;box-shadow:0 2px #00000059}.wordmark:after{content:"";position:absolute;left:0;right:12%;bottom:-.28em;height:5px;border-radius:999px;background:var(--accent-support);opacity:.7;transform:rotate(-.7deg)}.button,.pill,.text-button,.icon-button,.chip,.deck-button{font-family:var(--font-ui);font-weight:600;border:1px solid transparent;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);transition:transform var(--motion-feedback) var(--ease-out),background-color var(--motion-ui) var(--ease-out),border-color var(--motion-ui) var(--ease-out),box-shadow var(--motion-ui) var(--ease-out),color var(--motion-ui) var(--ease-out)}:where(button,[role=button],input,label.text-button,a.button):focus-visible{outline:3px solid var(--accent);outline-offset:2px}.button{min-height:44px;padding:0 var(--space-2);border-radius:var(--radius);background:var(--surface-2);color:var(--text);border-color:#ffffff14;box-shadow:var(--shadow-raised)}.button:hover{background:#463526d9;border-color:#ffffff29}.button:active{transform:translateY(2px);box-shadow:var(--shadow-pressed)}.button--primary{background:linear-gradient(180deg,#f0a259,var(--accent));color:#2a1a0c;border-color:#00000040}.button--primary:hover{background:linear-gradient(180deg,#f6b071,#ec9c56)}.transport{display:flex;gap:var(--space-1);flex-wrap:wrap}.deck-button{flex-direction:column;gap:2px;min-width:60px;min-height:56px;padding:var(--space-1);border-radius:12px;color:var(--text);background:linear-gradient(180deg,#4a3728,#2f231a);border-color:#00000080;box-shadow:inset 0 1px #ffffff1f,var(--shadow-raised)}.deck-button__label{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}.deck-button:hover:not(:disabled){background:linear-gradient(180deg,#55402e,#382a1f)}.deck-button:active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 2px 6px #0009,var(--shadow-pressed)}.deck-button:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}.deck-button.is-active{color:var(--accent);border-color:#e8934a80;box-shadow:inset 0 1px #ffffff1f,var(--glow-accent)}.deck-button--record.is-active{color:var(--danger);border-color:#d1495b8c;box-shadow:inset 0 1px #ffffff1f,0 0 20px #d1495b59}.led{width:10px;height:10px;border-radius:999px;flex:none;background:#5a4636;box-shadow:inset 0 1px 1px #0009}.led.is-recording{background:var(--danger);animation:led-pulse 1.1s var(--ease-out) infinite}@keyframes led-pulse{0%,to{box-shadow:0 0 4px #d1495b99}50%{box-shadow:0 0 14px #d1495bf2}}.pill{min-height:44px;padding:0 var(--space-2);border-radius:var(--radius-pill);background:#5a8f7b29;color:var(--accent-support);border-color:#5a8f7b66;font-size:.85rem}.pill:hover{background:#5a8f7b42}.pill:active{transform:translateY(1px)}.pill.is-muted{background:#b9a68d1f;color:var(--text-muted);border-color:#b9a68d47}.text-button{min-height:36px;padding:0 var(--space-1);border-radius:10px;background:transparent;color:var(--text-muted);font-size:.82rem}.text-button:hover{background:#ffffff0f;color:var(--text)}.text-button:active{transform:translateY(1px)}.icon-button{width:44px;height:44px;flex:none;border-radius:10px;background:transparent;color:var(--text-muted)}.icon-button:hover{background:#d1495b29;color:var(--danger)}.icon-button:active{transform:scale(.92)}.panel{padding:var(--space-2);border-radius:var(--radius);background:linear-gradient(180deg,var(--surface-2),var(--surface-1));border:1px solid rgba(255,255,255,.05);box-shadow:var(--shadow-panel)}.panel__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-1);margin-bottom:var(--space-2)}.panel__title{font-size:1.05rem;font-weight:700;letter-spacing:.01em}.panel__actions{display:flex;gap:4px}.tray{transition:border-color var(--motion-ui) var(--ease-out)}.tray.is-over{border-color:var(--accent);box-shadow:var(--shadow-panel),var(--glow-accent)}.tray__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-1)}.track{padding:var(--space-1);border-radius:12px;background:#00000038;border:1px solid rgba(255,255,255,.05);cursor:grab;animation:track-in .14s var(--ease-out);transition:border-color var(--motion-ui) var(--ease-out),transform var(--motion-ui) var(--ease-out)}@keyframes track-in{0%{transform:scale(.9);opacity:0}}.track:hover{border-color:#ffffff24;transform:translate(2px)}.track.is-dragging{opacity:.5;cursor:grabbing}.track.is-over{border-color:var(--accent)}.track--missing{border-style:dashed;border-color:#d1495b80}.track__head{display:flex;align-items:center;gap:var(--space-1)}.track__grip{color:var(--text-muted);opacity:.5;cursor:grab;letter-spacing:-2px}.track__meta{flex:1;min-width:0;display:flex;flex-direction:column}.track__title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track__sub{font-size:.72rem;color:var(--text-muted);font-variant-numeric:tabular-nums}.track--missing .track__sub{color:var(--danger)}.track__effects{display:grid;gap:6px;margin-top:var(--space-1);padding-top:var(--space-1);border-top:1px dashed rgba(255,255,255,.08)}.tray-empty{display:flex;flex-direction:column;align-items:center;gap:4px;padding:var(--space-3) var(--space-2);border-radius:12px;border:2px dashed rgba(185,166,141,.28);text-align:center}.tray-empty__reel{width:34px;height:34px;border-radius:999px;border:3px solid rgba(185,166,141,.4);border-top-color:var(--accent);margin-bottom:4px;animation:reel-idle 6s linear infinite}@keyframes reel-idle{to{transform:rotate(360deg)}}.tray-empty__title{margin:0;font-family:var(--font-display);font-weight:600}.tray-empty__hint{margin:0;font-size:.8rem;color:var(--text-muted);max-width:34ch}.slider{display:grid;gap:2px}.slider__label{display:flex;justify-content:space-between;font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}.slider__value{font-variant-numeric:tabular-nums;color:var(--accent)}.slider__input{--track: rgba(0, 0, 0, .45);-moz-appearance:none;appearance:none;-webkit-appearance:none;width:100%;height:22px;background:transparent;cursor:pointer}.slider__input::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:var(--track);box-shadow:inset 0 1px 2px #0009}.slider__input::-moz-range-track{height:6px;border-radius:999px;background:var(--track)}.slider__input::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-5px;border-radius:999px;background:linear-gradient(180deg,#f2a765,var(--accent));border:1px solid rgba(0,0,0,.4);box-shadow:0 1px 3px #00000080;transition:transform var(--motion-feedback) var(--ease-out)}.slider__input::-moz-range-thumb{width:16px;height:16px;border-radius:999px;background:var(--accent);border:1px solid rgba(0,0,0,.4)}.slider__input:hover::-webkit-slider-thumb{transform:scale(1.15)}.slider__input:active::-webkit-slider-thumb{transform:scale(.95)}.shelf__label{margin:var(--space-2) 0 var(--space-1);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}.shelf{display:flex;flex-wrap:wrap;gap:6px}.chip{min-height:36px;padding:0 var(--space-1);border-radius:var(--radius-pill);background:#ffffff0d;color:var(--text);border-color:#ffffff1a;font-size:.78rem;font-weight:500}.chip__dot{width:7px;height:7px;border-radius:999px;background:var(--accent-support);transition:transform var(--motion-ui) var(--ease-out)}.chip:hover{background:#e8934a24;border-color:#e8934a66}.chip:hover .chip__dot{transform:scale(1.6);background:var(--accent)}.chip:active{transform:translateY(1px)}.doodle__pad{width:100%;aspect-ratio:1;display:block;border-radius:10px;background:var(--label);border:1px solid rgba(0,0,0,.3);box-shadow:inset 0 2px 8px #00000040;cursor:crosshair;touch-action:none}.swatches{display:flex;gap:var(--space-1);margin-top:var(--space-1);flex-wrap:wrap}.swatch{width:44px;height:44px;padding:0;border-radius:999px;background:var(--swatch);border:2px solid rgba(255,255,255,.15);box-shadow:var(--shadow-raised)}.swatch:hover{transform:scale(1.08)}.swatch:active{transform:scale(.94)}.swatch.is-selected{border-color:var(--text);box-shadow:0 0 0 3px #f4e9d840,var(--shadow-raised)}.banner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-1) var(--space-2);border-radius:var(--radius);border:1px solid}.banner--error{background:#d1495b1f;border-color:#d1495b73}.banner__text{margin:0;font-size:.88rem}.toaster-host{position:fixed;inset:auto 0 var(--space-2);display:flex;justify-content:center;pointer-events:none;z-index:10;padding:0 var(--space-1)}.toast{display:flex;flex-direction:column;gap:var(--space-1);max-width:min(52ch,100%);padding:var(--space-1) var(--space-2);border-radius:var(--radius);background:var(--surface-2);border:1px solid rgba(255,255,255,.1);box-shadow:var(--shadow-panel);pointer-events:auto;animation:toast-in .2s var(--ease-out)}@keyframes toast-in{0%{transform:translateY(12px);opacity:0}}.toast__text{margin:0;font-size:.88rem}.toast--success{border-color:#7fae5a99;box-shadow:var(--shadow-panel),0 0 20px #7fae5a40}.toast--error{border-color:#d1495b99}.toast__link{width:100%;min-height:40px;padding:0 var(--space-1);border-radius:8px;background:#00000059;color:var(--text);border:1px solid rgba(255,255,255,.12);font-family:var(--font-ui);font-size:.78rem}@media(pointer:coarse){.text-button,.chip{min-height:44px;padding:0 var(--space-2)}.toast__link{min-height:44px}.slider__input{height:44px}}.page,.footer{position:relative;z-index:1}.page{padding:var(--space-8) var(--space-2) var(--space-6);background:linear-gradient(180deg,var(--bg),var(--surface-1));border-top:1px solid rgba(244,233,216,.08)}.page__inner{max-width:70ch;margin:0 auto}.page__title{font-size:clamp(1.75rem,4vw,2.4rem);color:var(--text)}.page__subtitle{margin-top:var(--space-6);font-size:1.35rem;color:var(--accent)}.page p{color:var(--text-muted);margin:var(--space-2) 0 0}.page__lead{font-size:1.05rem;color:var(--text)}.page__note{padding-left:var(--space-2);border-left:2px solid var(--accent-support)}.faq{margin:var(--space-3) 0 0}.faq__q{margin-top:var(--space-3);font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--text)}.faq__a{margin:var(--space-1) 0 0;color:var(--text-muted)}.page__cta{margin-top:var(--space-6)}.footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-1);max-width:70ch;margin:0 auto;padding:var(--space-3) var(--space-2) var(--space-6);font-size:.85rem}.footer__line{margin:0;color:var(--text-muted)}.footer__link{color:var(--text-muted);text-decoration:none;border-bottom:1px solid transparent;padding:var(--space-1) 0;transition:color var(--motion-ui) var(--ease-out),border-color var(--motion-ui) var(--ease-out)}.footer__link:hover,.footer__link:focus-visible{color:var(--accent);border-bottom-color:var(--accent)}.footer__link:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}@media(max-width:560px){.page{padding-top:var(--space-6)}.footer{justify-content:center;text-align:center}}