:root{color-scheme:dark;--bg:#071318;--panel:#0d2026;--panel2:#102b32;--line:#24444b;--ink:#edf7f4;--muted:#85a5a6;--cyan:#57f0d0;--orange:#ff9f5a;--red:#ff6f6f;--step:clamp(30px,4.4vw,52px);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
*{box-sizing:border-box}html{background:var(--bg);scroll-behavior:smooth}body{margin:0;color:var(--ink);background:radial-gradient(circle at 100% 0,#12343d 0,transparent 34rem),var(--bg);line-height:1.45}button,input,select,textarea{font:inherit}button,select,input[type=number],textarea{color:var(--ink);background:#0a191e;border:1px solid var(--line);border-radius:4px}button{min-height:44px;padding:.7rem 1rem;cursor:pointer;font-weight:800;letter-spacing:.04em}button:hover,button:focus-visible{border-color:var(--cyan)}button.active,button[aria-pressed=true]{color:#06231d;background:var(--cyan);border-color:var(--cyan)}button.primary{color:#06231d;background:var(--cyan);border-color:var(--cyan)}button.big{min-height:58px;padding:1rem 1.4rem}.topbar{position:sticky;z-index:20;top:0;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem clamp(1rem,3vw,3rem);background:rgba(7,19,24,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}.brand{display:flex;align-items:center;gap:.8rem}.brand-mark{display:grid;place-items:center;width:44px;height:44px;color:var(--bg);background:var(--orange);font-weight:1000}.brand h1{font-size:clamp(.9rem,2vw,1.25rem);margin:0;letter-spacing:.08em}.brand p{font-size:.65rem;color:var(--muted);margin:0}.transport{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.transport label{display:flex;align-items:center;gap:.4rem;font-size:.75rem;color:var(--muted)}.transport input{width:72px;min-height:44px;padding:.5rem}.readout,.status{display:inline-flex;align-items:center;min-height:32px;padding:.35rem .6rem;border:1px solid var(--line);color:var(--muted);font-size:.75rem}.status.hot{color:var(--orange);border-color:var(--orange)}main{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem;max-width:1500px;margin:auto;padding:1rem clamp(1rem,3vw,3rem) 4rem}.panel{grid-column:span 12;min-width:0;padding:clamp(1rem,2.5vw,2rem);background:linear-gradient(145deg,rgba(16,43,50,.95),rgba(10,27,32,.95));border:1px solid var(--line);box-shadow:0 14px 50px rgba(0,0,0,.18)}.intro{display:flex;align-items:center;justify-content:space-between}.intro h2,.panel h2{overflow-wrap:anywhere;font-family:system-ui,sans-serif;font-size:clamp(1.5rem,4vw,3rem);line-height:1;margin:.35rem 0}.intro p,.panel p{color:var(--muted);max-width:62ch}.eyebrow{color:var(--cyan);font-size:.72rem;font-weight:900;letter-spacing:.14em}.privacy-badge{text-align:right;color:var(--cyan);font-weight:900}.privacy-badge small{color:var(--muted)}.sample-grid{grid-column:span 12;display:grid;grid-template-columns:1fr 1fr;gap:1rem}.sample-card{grid-column:auto}.section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}.file-button{display:grid;place-items:center;min-height:56px;margin:1rem 0;padding:1rem;color:var(--cyan);border:1px dashed var(--cyan);cursor:pointer;font-weight:900}.file-button input{position:absolute;width:1px;height:1px;opacity:0}.meta{color:var(--muted);font-size:.78rem}.waveform{display:block;width:100%;height:120px;background:#071419;border:1px solid var(--line)}.trim-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}.trim-grid label,.track-controls label,.key-controls label{display:grid;gap:.35rem;color:var(--muted);font-size:.75rem}.trim-grid output{float:right;color:var(--ink)}input[type=range]{width:100%;min-width:0;min-height:28px;accent-color:var(--cyan)}.button-row,.preset-row,.key-controls,.track-controls{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:1rem}.segmented{display:flex}.segmented button{border-radius:0}.segmented button:first-child{border-radius:4px 0 0 4px}.segmented button:last-child{border-radius:0 4px 4px 0}.tape-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem;align-items:start;max-width:420px;margin:1rem auto}.tape-pad{position:relative;width:100%;height:420px;border:1px solid var(--cyan);background:linear-gradient(#143d45,#0a181d 50%,#14313a);touch-action:none;user-select:none;overflow:hidden}.tape-pad:before{content:"";position:absolute;inset:50% 0 auto;height:1px;background:var(--orange)}.tape-pad>span{position:absolute;left:1rem;color:var(--muted);font-size:.7rem;pointer-events:none}.tape-top{top:.7rem}.tape-mid{top:calc(50% - 1.4rem)}.tape-bottom{bottom:.7rem}.tape-handle{position:absolute;left:8%;right:8%;top:50%;height:48px;transform:translateY(-50%);background:var(--cyan);border:4px solid #c8fff2;box-shadow:0 0 24px rgba(87,240,208,.35);pointer-events:none}.tape-readout{display:grid;min-width:0;gap:.5rem}.tape-readout strong{max-width:100%;overflow-wrap:anywhere;font:900 clamp(2.5rem,7vw,5rem)/1 system-ui,sans-serif;color:var(--cyan)}.tape-readout>span{color:var(--orange);font-weight:900}.tape-readout button{width:max-content}.tape-readout p{margin:.25rem 0 0}.panel h3{margin:1.5rem 0 .5rem;color:var(--muted);font-size:.75rem;letter-spacing:.1em}.how-to{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;margin:1.2rem 0;padding:1rem;background:#091a1f;border:1px solid var(--line)}.how-to p{display:grid;gap:.35rem;margin:0;font-size:.78rem}.how-to strong{color:var(--orange)}.how-to b{color:var(--ink)}.sequencer{overflow-x:auto;padding-bottom:.5rem}.seq-row{display:grid;grid-template-columns:84px repeat(16,var(--step));gap:4px;min-width:max-content;margin-bottom:5px}.seq-label{display:flex;align-items:center;font-size:.75rem;color:var(--muted)}.step{width:var(--step);min-height:var(--step);padding:0;border-radius:2px}.step.on{color:#06231d;background:var(--cyan)}.step.strong{background:var(--orange)}.step.random{color:var(--ink);background:#7859a7}.step.playing{outline:3px solid var(--orange);outline-offset:1px}.code-editor{margin-top:1.2rem}.code-editor label{display:block;margin-bottom:.45rem;color:var(--cyan);font-size:.75rem;font-weight:900}.code-editor textarea{width:100%;padding:1rem;resize:vertical;line-height:1.55}.error{white-space:pre-wrap;padding:1rem;color:#ffd0d0;background:#32191c;border:1px solid var(--red)}select{min-height:44px;padding:.6rem}.bass-grid{display:grid;grid-template-columns:repeat(16,minmax(44px,1fr));gap:4px;overflow-x:auto}.bass-step{min-width:44px;padding:.3rem}.bass-step.on{color:#06231d;background:var(--orange)}.chord-grid{display:grid;grid-template-columns:repeat(4,minmax(110px,1fr));gap:.7rem}.chord-grid label{display:grid;gap:.35rem;color:var(--muted);font-size:.72rem}.mix-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}.mix-card{min-width:0;padding:.8rem;background:#091a1f;border:1px solid var(--line)}.mix-card strong{display:block;color:var(--cyan);font-size:.75rem}.mix-card .button-row{margin-top:.4rem}.effects-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:.7rem}.effect{min-width:0;padding:1rem;background:#091a1f;border:1px solid var(--line)}.effect label{display:grid;grid-template-columns:6.5rem minmax(5rem,1fr) minmax(0,2fr) 3rem;align-items:center;gap:.75rem}.effect strong{color:var(--orange)}.effect output{text-align:right;color:var(--cyan)}.export-panel{display:flex;align-items:center;justify-content:space-between;gap:2rem}.export-controls{text-align:right}.export-controls .segmented{justify-content:flex-end;margin-bottom:.7rem}footer{display:flex;justify-content:space-between;padding:1.2rem clamp(1rem,3vw,3rem);color:var(--muted);border-top:1px solid var(--line);font-size:.7rem}.mobile-nav{display:none}
@media(min-width:1000px){.panel[data-section=samples]{grid-column:span 5}.panel[data-section=pattern]{grid-column:span 7}.panel[data-section=instruments]{grid-column:span 7}.panel[data-section=effects]{grid-column:span 5}}
@media(max-width:760px){body{padding-bottom:72px}.topbar{align-items:flex-start}.brand p,.readout{display:none}.transport{justify-content:flex-end}.transport button{padding:.65rem}.mobile-nav{position:fixed;z-index:30;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(6,1fr);padding:5px env(safe-area-inset-right) calc(5px + env(safe-area-inset-bottom)) env(safe-area-inset-left);background:#071318;border-top:1px solid var(--line)}.mobile-nav button{min-width:0;min-height:54px;padding:.2rem;font-size:.56rem;border:0;border-radius:0}.panel,.sample-card{display:none}.panel.mobile-active,.sample-grid.mobile-active,.sample-grid.mobile-active .sample-card{display:block}.sample-grid{grid-template-columns:1fr}.sample-grid.mobile-active{display:grid}.intro.mobile-active{display:flex}.trim-grid{grid-template-columns:1fr}.tape-pad{height:44vh;min-height:320px}.tape-readout strong{font-size:clamp(2.5rem,15vw,4.25rem)}.how-to{grid-template-columns:1fr}.bass-grid{grid-template-columns:repeat(16,48px)}.chord-grid,.mix-grid{grid-template-columns:1fr 1fr}.effect label{grid-template-columns:1fr 3rem}.effect label span,.effect label input{grid-column:1/-1}.export-panel.mobile-active{display:block}.export-controls{text-align:left}.export-controls .segmented{justify-content:flex-start}.topbar{padding:.55rem}.brand-mark{width:38px;height:38px}.brand h1{font-size:.75rem}main{padding:.7rem}.transport input{width:60px}footer{display:none}}
.effect label{grid-template-columns:minmax(0,1fr);align-items:stretch;gap:.45rem}.effect label>*{grid-column:1!important}.effect label input{display:block;width:100%}.effect output{text-align:right}
.bass-step.playing{outline:3px solid var(--cyan);outline-offset:1px;box-shadow:inset 0 0 0 2px #071318,0 0 16px rgba(87,240,208,.45)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}