@import"https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap";:root{color-scheme:light;font-family:Manrope,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#21313f;background:#fff;--bg-blue: #577590;--sun: #f3ca40;--orange: #f2a541;--tangerine: #f08a4b;--salmon: #d78a76;--ink: #22313f;--ink-soft: #52606c;--line: #d6dee5;--panel-bg: #ffffff;--panel-strong: #ffffff;--panel-muted: #f5f7f9;--panel-shadow: none}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:#fff}button,input,textarea,select,a{font:inherit}button{border:0}#app{min-height:100vh}.app-shell{min-height:100vh;padding:24px;background:#fff}.app-frame{display:grid;grid-template-columns:minmax(0,1fr) 188px;gap:18px;align-items:start;width:100%;margin:0}.device-shell{display:flex;flex-direction:column;gap:18px;max-width:1060px}.app-logo{display:flex;justify-content:flex-start}.app-logo__image{display:block;width:min(240px,24vw);max-width:100%;height:auto;object-fit:contain}.transport-bar,.upload-dropzone,.meta-strip,.sampler-actions,.transport-side-card,.transport-side-toggle,.error-banner,.device-status{background:var(--panel-bg);border:1px solid var(--line);border-radius:0;box-shadow:var(--panel-shadow)}.transport-bar{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding:22px 24px}.transport-brand-block{display:flex;flex-direction:column;gap:8px}.transport-brand{font-size:clamp(2rem,5vw,3rem);line-height:.95;font-weight:800;letter-spacing:-.075em;color:var(--ink)}.transport-copy{margin:0;max-width:520px;color:var(--ink-soft);line-height:1.45;font-weight:500}.transport-controls{display:grid;gap:10px}.transport-controls--overview{grid-template-columns:repeat(3,minmax(0,auto));align-items:stretch}.transport-cluster,.transport-mini-readout,.transport-secondary,.transport-stepper__button,.action-button,.ghost-action-button{border-radius:0}.transport-cluster--pill,.transport-mini-readout{min-width:132px;padding:12px 14px;border:1px solid rgba(34,49,63,.08);background:#f3ca40}.transport-cluster{display:flex;flex-direction:column;gap:6px}.transport-cluster__meta{font-size:.88rem;color:var(--ink-soft)}.transport-cluster strong,.transport-mini-readout{color:var(--ink);font-weight:700}.transport-label{font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}.transport-mini-readout{display:flex;flex-direction:column;justify-content:center;gap:4px;color:var(--ink-soft)}.transport-secondary,.action-button,.ghost-action-button,.transport-stepper__button,.transport-side-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 16px;color:var(--ink);background:var(--panel-strong);border:1px solid rgba(34,49,63,.12);cursor:pointer;transition:transform .12s ease,border-color .12s ease,background .12s ease}.transport-secondary:hover,.action-button:hover,.ghost-action-button:hover,.transport-stepper__button:hover,.transport-side-toggle:hover{transform:translateY(-1px)}.transport-secondary{background:#fff}.action-button{background:var(--tangerine);color:#2d2319;border-color:#f08a4bb8}.ghost-action-button{background:#fff}.toolbar-toggle-active,.transport-side-toggle--active{background:var(--sun);border-color:#f2a541b8}.transport-recording{background:var(--salmon);border-color:#d78a76d1;color:#52241b}.device-content{display:block}.workspace-stack{display:flex;flex-direction:column;gap:18px;min-width:0}.stack{display:flex;flex-direction:column}.upload-dropzone,.meta-strip,.sampler-actions,.waveform-panel,.pad-section,.transport-side-card,.transport-side-toggle,.error-banner,.device-status{padding:16px 18px}.upload-dropzone{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:6px;min-height:118px;cursor:pointer}.upload-dropzone--waveform{min-height:320px;border-style:dashed;border-width:1.5px;background:#57759014}.upload-dropzone span{font-size:1.25rem;font-weight:800;color:var(--ink)}.upload-dropzone small,.panel-copy,.waveform-stats,.waveform-hint,.meta-strip p,.sampler-actions p{color:var(--ink-soft)}.meta-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:center;gap:10px 16px}.meta-strip p,.sampler-actions p{margin:0}.meta-strip strong{color:var(--ink)}.sampler-actions{display:flex;flex-direction:column;justify-content:space-between;gap:12px}.waveform-panel{gap:14px;background:transparent;border:0;padding:0}.waveform-toolbar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px}.waveform-stage{position:relative}.waveform-zoom-controls{display:inline-flex;align-items:center;gap:6px;padding:4px 6px;border-radius:0;border:1px solid var(--line);background:#fff}.waveform-zoom-controls--floating{position:absolute;top:10px;right:10px;z-index:2}.waveform-zoom-label{min-width:34px;text-align:center;font-size:.84rem;font-weight:700;color:var(--ink-soft)}.waveform-zoom-button{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;background:#fff;color:var(--ink);border:1px solid rgba(34,49,63,.12);cursor:pointer}.waveform-shell{display:flex;flex-direction:column;gap:12px}.waveform-viewport{overflow-x:auto;overflow-y:hidden;border-radius:0;border:1px solid rgba(87,117,144,.24);background:linear-gradient(180deg,#5c7a96,#577590)}.waveform-canvas{display:block;width:auto;min-height:260px;cursor:crosshair}.waveform-hint{font-size:.95rem;line-height:1.45}.pad-section{overflow:visible;background:transparent;border:0;padding:4px 0 0}.pads-grid{display:grid;gap:10px}.pads-grid--row{grid-template-columns:repeat(9,minmax(0,1fr))}.pad-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:76px;min-width:0;padding:8px 6px;border-radius:0;background:#57759014;border:1px solid rgba(87,117,144,.24);color:var(--ink);cursor:pointer;transition:transform .12s ease,border-color .12s ease,background .12s ease}.pad-button:hover{transform:translateY(-1px);background:#57759024}.pad-button__index{font-size:.74rem;font-weight:700;color:var(--ink-soft)}.pad-button strong{font-size:1.25rem;line-height:1;font-weight:700}.pad-button small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-soft)}.pad-button--active{background:var(--sun);border-color:#f2a541b8}.pad-button--hovered{cursor:pointer;border-color:#f08a4bb8}.pad-button:active{cursor:grabbing}.transport-side-panel{position:sticky;top:24px;display:flex;flex-direction:column;gap:14px;min-height:calc(100vh - 48px);padding:14px;background:#fff}.transport-side-card{display:flex;flex-direction:column;flex:1 1 0;gap:12px;background:#fff;border-color:var(--line)}.transport-side-value{font-size:2rem;font-weight:800;line-height:1;color:var(--ink)}.transport-side-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.transport-side-toggle{flex-direction:column;flex:1 1 0;gap:4px;width:100%;min-height:0;padding:16px;text-align:center;font-weight:700;justify-content:center;background:#fff;border-color:var(--line);color:var(--ink)}.transport-side-toggle__title{color:var(--ink)}.transport-side-toggle__meta{font-size:.86rem;font-weight:600;color:var(--ink-soft)}.transport-side-panel .transport-label{color:var(--ink-soft)}.transport-side-panel .transport-stepper__button{background:#fff;color:var(--ink);border-color:var(--line)}.transport-side-link{text-decoration:none}.support-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:24px;background:#22313f7a}.support-modal__card{position:relative;width:min(420px,100%);padding:18px;background:#fff;border:1px solid var(--line);box-shadow:0 18px 48px #22313f2e}.support-modal__close{position:absolute;top:10px;right:10px;min-height:34px;padding:0 10px;background:#fff;border:1px solid var(--line);color:var(--ink);cursor:pointer}.support-modal__gif{display:block;width:100%;height:auto;margin-bottom:14px;object-fit:cover}.support-modal__copy h3{margin:0 0 8px;color:var(--ink)}.support-modal__copy p{margin:0;color:var(--ink-soft);line-height:1.55}.support-modal__donate{margin-top:10px}.support-modal__copy a{color:var(--tangerine);font-weight:700;text-decoration:none}.device-status,.error-banner{margin:0}.device-status{color:#7e5600}.error-banner{color:#7c3026;background:#d78a762e}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.action-button:disabled,.ghost-action-button:disabled,.transport-secondary:disabled,.transport-side-toggle:disabled,.transport-stepper__button:disabled,.waveform-zoom-button:disabled,.pad-button:disabled{opacity:.48;cursor:not-allowed;transform:none;box-shadow:none}@media(max-width:1100px){.transport-controls--overview{grid-template-columns:repeat(2,minmax(0,1fr))}.pads-grid--row{grid-template-columns:repeat(5,minmax(0,1fr))}}@media(max-width:900px){.app-shell{padding:16px}.app-frame,.transport-bar,.device-content{grid-template-columns:1fr;display:grid}.transport-bar{gap:14px}.device-content{gap:18px}.transport-side-panel{position:static;min-height:auto}.pads-grid--row{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:640px){.app-shell{padding:12px}.app-logo__image{width:min(180px,52vw)}.transport-controls--overview{grid-template-columns:1fr}.sampler-actions{flex-direction:column;align-items:flex-start}.pads-grid--row{grid-template-columns:repeat(3,minmax(0,1fr))}.pad-button{min-height:68px}}