:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--ink:#1e1d1a;--muted:#6f6a5e;--paper:#f8f0dd;--panel:#ddd3bd;--deep:#c9bea7;--line:rgba(30,29,26,.16);--hot:#ff5a45;--mint:#72d6af;--blue:#6da5ff;--shadow:0 18px 48px rgba(42,35,20,.18)}
body[data-theme=field]{--ink:#20242a;--muted:#697177;--paper:#eef1ec;--panel:#d7ddd4;--deep:#bfc9c3;--hot:#ff6b4a;--mint:#5ac79a;--blue:#6f94d8;--shadow:0 18px 48px rgba(21,29,34,.16)}
body[data-theme=operator]{color-scheme:dark;--ink:#f6f0dd;--muted:#b4aa96;--paper:#252525;--panel:#343230;--deep:#48433b;--line:rgba(246,240,221,.18);--hot:#ff5a45;--mint:#51d39a;--blue:#70a4ff;--shadow:0 18px 48px rgba(0,0,0,.32)}
*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 15% 0%,rgba(255,255,255,.5),transparent 30rem),radial-gradient(circle at 88% 18%,color-mix(in srgb,var(--mint) 22%,transparent),transparent 22rem),linear-gradient(135deg,var(--paper),var(--panel));color:var(--ink)}body[data-theme=operator]{background:linear-gradient(135deg,#151514,#292725)}button,input,select{font:inherit;color:inherit}button{cursor:pointer}.app-shell{width:min(1440px,calc(100vw - 32px));margin:0 auto;padding:24px 0 32px}.transport-shell,.status-strip,.pad-grid-shell,.sequencer-shell,.side-panel{border:1px solid var(--line);background:color-mix(in srgb,var(--paper) 78%,transparent);box-shadow:var(--shadow);backdrop-filter:blur(16px)}.transport-shell{display:grid;grid-template-columns:minmax(120px,1fr) auto auto minmax(260px,auto) auto;gap:18px;align-items:center;border-radius:28px;padding:16px}.project-label,.numeric-control,.step-readout,.info-card,.select-control{display:grid;gap:5px}.tiny-label{color:var(--muted);font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.transport-buttons,.switch-bank,.panel-actions,.pad-controls{display:flex;gap:8px;flex-wrap:wrap}.round-button{width:48px;height:48px;border:1px solid var(--line);border-radius:50%;background:color-mix(in srgb,var(--paper) 90%,white 10%);box-shadow:inset 0 -4px 0 rgba(30,29,26,.08)}.round-button.record{color:var(--hot)}.round-button.hot{background:var(--hot);color:var(--paper);box-shadow:0 0 0 7px rgba(255,90,69,.14)}.pill,.panel-button,.pad-controls button,.file-button{border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--paper) 90%,white 10%);padding:9px 12px;font-size:.8rem;font-weight:800}.pill.active,.panel-button.active,.pad-controls button.active{background:var(--ink);color:var(--paper)}input,select{border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--paper) 90%,white 10%);padding:10px 12px;font-weight:800}.numeric-control input{width:84px}.status-strip{display:grid;grid-template-columns:auto 1fr auto auto;gap:16px;align-items:center;margin:18px 0;border-radius:22px;padding:14px 16px}.main-grid{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:18px}.pad-grid-shell,.side-panel,.sequencer-shell{border-radius:30px;padding:18px}.section-heading{display:flex;justify-content:space-between;gap:18px;align-items:end;margin-bottom:16px}.section-heading h1,.section-heading h2,.side-panel h2{margin:0;font-size:clamp(1.4rem,4vw,2.4rem);line-height:.95;letter-spacing:-.05em}.section-heading p,.side-panel p{margin:0;max-width:340px;color:var(--muted);font-size:.88rem;font-weight:700}.pad-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.pad-card{position:relative;display:grid;gap:10px;min-height:178px;padding:10px;border:1px solid var(--line);border-radius:24px;background:var(--panel);transition:transform .12s,background .12s}.pad-card.selected{outline:3px solid color-mix(in srgb,var(--blue) 65%,transparent)}.pad-card.playing{background:color-mix(in srgb,#ffd166 42%,var(--panel));transform:translateY(-2px) scale(1.01)}.pad-card.muted{opacity:.58}.pad-card.soloed:after{content:'solo';position:absolute;top:10px;right:10px;padding:4px 8px;border-radius:999px;background:var(--mint);color:#172019;font-size:.65rem;font-weight:900;text-transform:uppercase}.pad-face{display:grid;align-content:space-between;min-height:112px;width:100%;border:1px solid var(--line);border-radius:20px;background:linear-gradient(135deg,color-mix(in srgb,var(--paper) 95%,white 5%),color-mix(in srgb,var(--deep) 72%,var(--paper)));padding:14px;text-align:left;box-shadow:inset 0 -7px 0 rgba(30,29,26,.07)}.pad-key{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--ink);color:var(--paper);font-size:1.25rem;font-weight:900}.pad-name{display:block;margin-top:20px;font-size:1.18rem;font-weight:900;letter-spacing:-.04em}.sample-name{display:block;margin-top:4px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.76rem;font-weight:800}.file-button{position:relative;overflow:hidden;background:var(--mint);color:#172019}.file-button input{position:absolute;inset:0;opacity:0;cursor:pointer}.side-panel{display:grid;align-content:start;gap:14px}.side-panel label{display:grid;gap:7px;color:var(--muted);font-size:.75rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.side-panel input[type=range]{padding:0}.warning{min-height:1.2em;color:var(--hot)!important;font-size:.82rem!important;font-weight:800!important}.sequencer-shell{margin-top:18px}.sequencer{display:grid;gap:8px;overflow-x:auto;padding-bottom:6px}.sequence-row{display:grid;grid-template-columns:120px repeat(var(--steps),minmax(34px,1fr));gap:6px;min-width:calc(120px + var(--steps)*40px)}.lane-label{display:grid;grid-template-columns:34px 1fr;gap:8px;align-items:center;border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:7px 9px;text-align:left}.lane-label strong{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--ink);color:var(--paper);font-size:.82rem}.lane-label span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.8rem;font-weight:800}.step-cell{min-height:36px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--paper) 76%,var(--panel));box-shadow:inset 0 -3px 0 rgba(30,29,26,.05)}.step-cell.beat{background:color-mix(in srgb,var(--deep) 58%,var(--paper))}.step-cell.active{background:var(--hot);box-shadow:inset 0 -5px 0 rgba(30,29,26,.18),0 0 0 3px color-mix(in srgb,var(--hot) 24%,transparent)}.step-cell.playhead{outline:3px solid var(--blue);outline-offset:1px}@media(max-width:1040px){.transport-shell,.status-strip,.main-grid{grid-template-columns:1fr}.pad-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.app-shell{width:min(100vw - 18px,1440px);padding-top:9px}.transport-shell,.pad-grid-shell,.side-panel,.sequencer-shell{border-radius:22px}.pad-grid{grid-template-columns:1fr}.section-heading{display:grid}}