:root{color:#f4f0e8;background:#111313;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}.app-shell-state{display:grid;min-height:100vh;align-content:center;justify-items:start;gap:12px;padding:22px}.app-shell-state p{max-width:560px;margin:0;color:#b3ab9e}.offline-banner{min-height:38px;border-bottom:1px solid #5a4825;padding:10px 22px;background:#1f1b12;color:#f5d483;font-size:.9rem}.empty-action-bank{display:flex;flex-wrap:wrap;gap:8px}button,input,textarea,select{font:inherit}button{min-width:42px;height:42px;border:1px solid #3a3c38;border-radius:8px;background:#1b1e1c;color:#f7f1e5;cursor:pointer;transition:background-color .14s ease,border-color .14s ease,transform .14s ease}button:hover:not(:disabled){border-color:#d7a94e;background:#24241f;transform:translateY(-1px)}.button-active{border-color:#78d9c2;background:#18342f;color:#e7fff8}.button-secondary{border-color:#353936;background:#171b19;color:#b3ab9e}button:disabled{color:#686b66;cursor:not-allowed}input[type=search],input[type=number]{width:min(100%,360px);min-height:42px;border:1px solid #353936;border-radius:8px;padding:0 12px;background:#171b19;color:#f7f1e5;outline:none}input[type=search]:focus,input[type=number]:focus{border-color:#78d9c2}input[type=file]{width:100%;color:#b3ab9e}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.editor-shell{display:grid;min-height:100vh;grid-template-rows:auto minmax(0,1fr) auto;gap:18px;padding:22px}.editor-header{display:flex;align-items:end;justify-content:space-between;gap:18px;border-bottom:1px solid #2c302d;padding-bottom:18px}.editor-header-actions{display:grid;gap:10px;justify-items:end}.eyebrow{margin:0 0 8px;color:#7edbc3;font-size:.76rem;font-weight:800;letter-spacing:0;text-transform:uppercase}h1{max-width:12ch;margin:0;color:#fff8ea;font-size:clamp(2rem,6vw,4.2rem);line-height:.95}.motif-meta{display:flex;flex-wrap:wrap;justify-content:end;gap:8px}.motif-meta span{min-height:32px;border:1px solid #353936;border-radius:8px;padding:7px 10px;color:#d8d1c5;background:#191c1b;font-size:.86rem}.top-action-bank{display:flex;flex-wrap:wrap;justify-content:end;gap:8px}.top-action-bank button{min-width:62px}.editor-workspace{display:grid;min-height:0;grid-template-rows:auto minmax(0,1fr);gap:10px}.roll-status{display:flex;flex-wrap:wrap;gap:10px}.roll-status div{display:grid;min-width:112px;gap:4px}.roll-status span,.selected-readout span{color:#8e948e;font-size:.78rem}.roll-status strong,.selected-readout strong{color:#fff8ea;font-size:.96rem}.roll-scroll{min-height:420px;overflow:auto;border:1px solid #2b302d;border-radius:8px;background:#151817;scrollbar-color:#4f5752 #151817}.piano-roll{display:block;min-width:1088px;width:100%;height:100%;min-height:540px;touch-action:none;-webkit-user-select:none;user-select:none}.roll-background{fill:#151817}.pitch-row{fill:#171b19}.pitch-row:nth-of-type(2n){fill:#141716}.pitch-row-black{fill:#101312}.pitch-label,.beat-label{fill:#747b75;font-size:12px;font-weight:700}.beat-line{stroke:#29302c;stroke-width:1}.beat-line-bar{stroke:#475149;stroke-width:1.4}.header-divider{stroke:#343a36;stroke-width:1.2}.playhead-line{stroke:#ff725c;stroke-width:2;stroke-linecap:round;filter:drop-shadow(0 0 7px rgb(255 114 92 / .32));transition:x1 80ms linear,x2 80ms linear}.note-block{fill:#c9a04a;stroke:#f5d483;stroke-width:1;cursor:grab;transition:fill .12s ease,stroke-width .12s ease,filter .12s ease}.note-block:hover{fill:#dfb75e}.note-block-selected{fill:#78d9c2;stroke:#d9fff2;stroke-width:2;filter:drop-shadow(0 0 10px rgb(120 217 194 / .24))}.note-handle{fill:#1113136b;cursor:ew-resize}.note-handle-selected{fill:#1113139e}.note-text{fill:#161613;font-size:11px;font-weight:800}.note-text-selected{fill:#08211c}.editor-controls{display:grid;grid-template-columns:minmax(160px,1fr) auto auto auto auto;gap:12px;align-items:center;border-top:1px solid #2c302d;padding-top:16px}.selected-readout{display:grid;gap:4px;min-width:0}.selected-readout small{color:#b3ab9e}.control-bank{display:flex;flex-wrap:wrap;gap:8px;justify-content:end}.transport-bank button{min-width:48px}.transform-bank button{min-width:46px}@media(max-width:760px){.editor-shell{gap:14px;padding:16px}.editor-header{align-items:start;flex-direction:column}.editor-header-actions{justify-items:start}.motif-meta{justify-content:start}.top-action-bank{display:grid;grid-template-columns:repeat(3,minmax(62px,1fr));width:100%}.roll-scroll{min-height:390px}.piano-roll{min-width:1000px;min-height:520px}.editor-controls{grid-template-columns:1fr;align-items:stretch}.control-bank{display:grid;grid-template-columns:repeat(4,minmax(42px,1fr));justify-content:stretch}.transport-bank{grid-template-columns:repeat(2,minmax(42px,1fr))}.note-bank{grid-template-columns:repeat(3,minmax(42px,1fr))}.transform-bank{grid-template-columns:repeat(4,minmax(42px,1fr))}}.library-shell{display:grid;min-height:100vh;grid-template-rows:auto auto minmax(0,1fr);gap:18px;padding:22px}.library-header{display:flex;align-items:end;justify-content:space-between;gap:18px;border-bottom:1px solid #2c302d;padding-bottom:18px}.library-actions,.library-toolbar,.motif-card-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.library-toolbar{justify-content:space-between}.library-toolbar span{color:#b3ab9e;font-size:.9rem}.motif-list{display:grid;align-content:start;gap:10px;min-height:0;overflow:auto}.motif-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;border:1px solid #2b302d;border-radius:8px;padding:14px;background:#151817}.motif-card-main{display:grid;grid-template-columns:minmax(0,1fr) 140px;gap:14px;align-items:center}.motif-card h2{margin:0;overflow-wrap:anywhere;color:#fff8ea;font-size:1.12rem}.motif-card p{margin:6px 0 0;color:#b3ab9e;font-size:.9rem}.mini-contour{width:140px;height:48px}.mini-contour polyline{fill:none;stroke:#78d9c2;stroke-linecap:round;stroke-linejoin:round;stroke-width:3}.library-empty{display:grid;gap:6px;border:1px solid #2b302d;border-radius:8px;padding:24px;background:#151817}.library-empty strong{color:#fff8ea}.library-empty span{color:#b3ab9e}.library-error{margin:0;border:1px solid #7a3d31;border-radius:8px;padding:12px 14px;background:#211614;color:#ff9b8a}.capture-shell{display:grid;min-height:100vh;grid-template-rows:auto minmax(0,1fr);gap:22px;padding:22px}.capture-header{display:flex;align-items:end;justify-content:space-between;gap:18px;border-bottom:1px solid #2c302d;padding-bottom:18px}.capture-nav,.capture-actions{display:flex;flex-wrap:wrap;gap:8px}.capture-workspace{display:grid;align-content:start;justify-items:start;gap:16px;width:min(100%,720px)}.recording-panel{display:grid;width:min(100%,560px);gap:12px;border:1px solid #2b302d;border-radius:8px;padding:18px;background:#151817}.recording-panel[data-state=recording]{border-color:#78d9c2}.recording-panel[data-state=failed]{border-color:#ff725c}.recording-main{display:flex;align-items:center;justify-content:space-between;gap:16px}.recording-main strong{display:block;margin-top:4px;color:#fff8ea;font-size:1.2rem}.recording-time{min-width:58px;color:#d8d1c5;font-variant-numeric:tabular-nums;font-weight:800;text-align:right}.level-meter{width:100%;height:12px;overflow:hidden;border-radius:999px;background:#252a27}.level-meter span{display:block;width:0;height:100%;border-radius:inherit;background:#78d9c2;transition:width 80ms linear}.recording-actions{display:flex;flex-wrap:wrap;gap:8px}.recording-preview{width:100%;min-height:42px}.upload-zone{display:grid;width:min(100%,560px);gap:10px;border:1px solid #2b302d;border-radius:8px;padding:18px;background:#151817}.upload-zone span,.bpm-control span,.field-label{color:#8e948e;font-size:.82rem;font-weight:700}.upload-zone strong{overflow-wrap:anywhere;color:#fff8ea;font-size:1.2rem}.bpm-control{display:grid;gap:8px}.bpm-control input{max-width:120px}.capture-status{margin:0;color:#b3ab9e}.capture-warning,.capture-error{margin:0;font-size:.9rem}.capture-warning{color:#f5d483}.capture-error{color:#ff9b8a}@media(max-width:760px){.library-shell{padding:16px}.offline-banner{padding-inline:16px}.library-header,.capture-header{align-items:start;flex-direction:column}.library-toolbar{align-items:stretch;flex-direction:column}input[type=search]{width:100%}.motif-card,.motif-card-main{grid-template-columns:1fr}.motif-card-actions{display:grid;grid-template-columns:repeat(2,minmax(80px,1fr))}.mini-contour{width:100%}.capture-shell{padding:16px}.capture-workspace{align-content:start;width:100%}.recording-actions,.capture-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}}