#app{display:block;height:100vh}.daw{width:100vw;display:grid;grid-template-rows:1fr 280px;height:100vh;background:var(--desk)}.transport-bar{height:46px}.transport-bar{display:flex;align-items:center;gap:8px;padding:0 12px;background:var(--body-grey);border-bottom:1px solid #b5b4ab;color:var(--ink)}.transport-bar .brand{font-size:.9rem;margin-right:10px}.transport-play{min-width:56px}.pos-chip{font-family:var(--font-mono);font-size:.78rem;color:var(--led);background:var(--well);border:1px solid var(--well-edge);border-radius:3px;padding:4px 12px;min-width:64px;text-align:center}.bar-space{flex:1;display:flex;justify-content:flex-end;gap:6px}.mini-dial{display:inline-flex;align-items:center;gap:5px}.mini-dial span{font-size:.56rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}.mini-dial-chip{font-family:var(--font-mono);font-size:.66rem;color:var(--led);background:var(--well);border:1px solid var(--well-edge);border-radius:3px;padding:2px 7px;min-width:34px;text-align:center;user-select:none}.arrange{display:grid;grid-template-rows:auto 1fr;min-height:0}.arrange-body{display:grid;grid-template-columns:216px 1fr;min-height:0}.track-headers{background:var(--body-grey);border-right:1px solid #b5b4ab;overflow-y:auto;padding-top:26px}.track-head{height:56px;padding:6px 8px;border-bottom:1px solid var(--edge);color:var(--ink);display:grid;align-content:center;gap:4px}.track-armed{box-shadow:inset 3px 0 0 var(--accent)}.track-head-top{display:flex;align-items:center;gap:6px}.arm-dot{width:14px;height:14px;border-radius:50%;border:1px solid var(--edge);background:var(--panel-grey);cursor:pointer;padding:0}.track-armed .arm-dot{background:var(--accent);border-color:var(--accent-deep)}.track-name{flex:1;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-del{background:none;border:none;color:var(--ink-soft);font-family:var(--font-mono);font-size:.7rem;cursor:pointer;padding:0 4px}.track-del:hover{color:var(--accent)}.track-head-controls{display:flex;align-items:center;gap:6px}.track-head-controls .seg-btn{padding:2px 6px;font-size:.56rem}.add-track-row{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:10px 8px}.add-track-row .seg-btn{font-size:.56rem;padding:4px 2px}.lane-scroll{overflow:auto;min-height:0;position:relative}.lane-inner{position:relative;min-width:100%;width:max-content}.ruler{position:sticky;top:0;z-index:3;height:26px;background:#232326;border-bottom:1px solid var(--well-edge);cursor:ew-resize}.ruler-bar{position:absolute;top:4px;font-family:var(--font-mono);font-size:.6rem;color:var(--bone-dim);padding-left:5px;border-left:1px solid var(--well-edge);height:18px;pointer-events:none}.ruler-marker{position:absolute;bottom:0;transform:translate(-1px);font-family:var(--font-mono);font-size:.56rem;line-height:1;color:#0b0b0c;background:var(--accent);padding:1px 4px 1px 5px;border-left:2px solid var(--accent-deep, #b23700);border-top-right-radius:3px;white-space:nowrap;cursor:pointer;z-index:4;max-width:120px;overflow:hidden;text-overflow:ellipsis}.ruler-marker:hover{filter:brightness(1.1)}.ruler-tempo{position:absolute;top:0;transform:translate(-1px);font-family:var(--font-mono);font-size:.52rem;line-height:1;color:#cfeaff;background:#2a4d63;padding:1px 4px;border-left:2px solid #4a86ad;border-bottom-right-radius:3px;white-space:nowrap;cursor:pointer;z-index:4}.ruler-tempo:before{content:"♩ ";opacity:.7}.ruler-tempo:hover{filter:brightness(1.15)}.loop-region{position:absolute;top:0;height:5px;background:var(--accent);pointer-events:none}.loop-region.loop-off{opacity:.3}.lanes{position:relative;background-image:linear-gradient(90deg,rgba(239,234,218,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(239,234,218,.05) 1px,transparent 1px)}.lane{position:relative;border-bottom:1px solid #26262a}.clip{position:absolute;top:5px;bottom:5px;background:var(--panel-grey);border:1px solid var(--edge);border-radius:4px;cursor:grab;overflow:hidden;display:flex;align-items:flex-end}.clip-on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.clip-label{font-family:var(--font-mono);font-size:.56rem;color:var(--ink-soft);padding:0 0 3px 6px;pointer-events:none;user-select:none}.clip-grip{position:absolute;right:0;top:0;bottom:0;width:8px;cursor:ew-resize}.auto-lane{position:relative;border-bottom:1px solid #26262a;background:#ff6a2b0a;cursor:copy}.auto-line{fill:none;stroke:var(--led);stroke-width:1.5}.auto-line-idle{stroke-dasharray:3 4;opacity:.45}.auto-dot{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--accent);border:1px solid #fff;cursor:grab;touch-action:none;z-index:1}.playhead{position:absolute;top:0;bottom:0;left:0;width:1px;background:var(--accent);box-shadow:0 0 6px #ff4d0099;z-index:2;pointer-events:none}.bottom-panel{background:var(--body-grey);border-top:1px solid #b5b4ab;min-height:0;overflow:auto}.bottom-hint{font-family:var(--font-mono);font-size:.74rem;color:var(--ink-soft);padding:18px}.track-head{cursor:pointer;transition:background .12s ease}.track-head:hover{background:#d8d7d0}.track-armed:hover{background:var(--body-grey)}.clip{transition:box-shadow .1s ease,filter .1s ease}.clip:hover{filter:brightness(1.04);box-shadow:0 1px 6px #00000059}.clip-on:hover{box-shadow:0 0 0 1px var(--accent),0 1px 6px #00000059}.clip:active{cursor:grabbing}.bottom-tabs .seg-btn{border:none;background:none;box-shadow:none;border-radius:0;border-bottom:2px solid transparent;padding:8px 10px 6px}.bottom-tabs .seg-btn:hover{border-bottom-color:var(--edge)}.bottom-tabs .seg-on{color:var(--ink);border-bottom-color:var(--accent);background:none}.transport-rec.rec-live{background:var(--accent);color:#fff;border-color:var(--accent-deep, #c93d00);animation:rec-pulse 1.1s ease-in-out infinite}@keyframes rec-pulse{50%{filter:brightness(1.25)}}.bottom-resize:hover{background:var(--accent);opacity:.6}.bottom-panel{display:grid;grid-template-rows:6px 34px 1fr}.bottom-resize{cursor:ns-resize;background:linear-gradient(180deg,#b5b4ab,var(--body-grey));touch-action:none}.bottom-tabs{display:flex;align-items:center;gap:6px;padding:0 10px;border-bottom:1px solid var(--edge)}.bottom-track-label{font-family:var(--font-mono);font-size:.62rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.1em;margin-left:8px}.bottom-body{min-height:0;overflow:hidden;display:grid}.proll{min-height:0;display:grid;grid-template-rows:30px 1fr 64px}.proll-bar{display:flex;align-items:center;gap:5px;padding:0 8px;border-bottom:1px solid var(--edge)}.proll-bar .seg-btn{padding:2px 7px;font-size:.58rem}.proll-bar-label{font-size:.56rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}.proll-bar-hint{margin-left:auto;font-family:var(--font-mono);font-size:.6rem;color:var(--ink-soft)}.seg-select{font-family:var(--font-mono);font-size:.62rem;color:var(--ink);background:var(--panel-grey);border:1px solid var(--edge);border-radius:3px;padding:2px 4px}.proll-vel{position:relative;border-top:1px solid var(--edge);background:var(--body-grey);min-height:0}.proll-vel-tag{position:absolute;left:6px;top:4px;z-index:2;font-size:.52rem;font-weight:700;letter-spacing:.12em;color:var(--ink-soft);pointer-events:none}.proll-vel-viewport{overflow:hidden;height:100%}.proll-vel-inner{position:relative;height:100%}.proll-vel-bars{position:absolute;top:4px;bottom:4px}.proll-vel-bar{position:absolute;bottom:0;width:6px;background:var(--accent);border-radius:1px 1px 0 0;cursor:ns-resize;touch-action:none}.proll-key-drum{color:var(--ink);font-weight:600}.proll-scroll{overflow:auto;min-height:0}.proll-inner{position:relative}.proll-keys{position:sticky;left:0;top:0;z-index:2;display:inline-block;background:var(--panel-grey);border-right:1px solid var(--edge)}.proll-key{font-family:var(--font-mono);font-size:.55rem;color:var(--ink-soft);padding-left:5px;border-bottom:1px solid rgba(29,29,27,.08);line-height:13px}.proll-key-black{background:#1d1d1b1a}.proll-grid{position:absolute;top:0;bottom:0;cursor:crosshair;background-image:linear-gradient(90deg,rgba(29,29,27,.28) 1px,transparent 1px),linear-gradient(90deg,rgba(29,29,27,.1) 1px,transparent 1px),repeating-linear-gradient(180deg,rgba(29,29,27,.07) 0 13px,transparent 13px 26px,rgba(29,29,27,.07) 26px 39px,transparent 39px 65px,rgba(29,29,27,.07) 65px 78px,transparent 78px 91px,rgba(29,29,27,.07) 91px 104px,transparent 104px 117px,rgba(29,29,27,.07) 117px 130px,transparent 130px 156px)}.proll-notes{position:absolute;top:0;bottom:0;pointer-events:none}.proll-note{position:absolute;background:var(--accent);border:1px solid var(--accent-deep);border-radius:2px;pointer-events:auto;cursor:grab}.proll-note-sel{background:#fff;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.proll-marquee{position:absolute;border:1px dashed var(--accent);background:#ff4d0014;pointer-events:none}.proll:focus{outline:none}.proll-note-grip{position:absolute;right:0;top:0;bottom:0;width:6px;cursor:ew-resize}.lane-drop{background:#ff4d001f}.clip-audio{background:#d8d7d0}.clip-wave{position:absolute;left:0;top:5px;pointer-events:none}.audio-editor{padding:14px;display:grid;gap:12px;align-content:start;overflow:auto;min-height:0}.audio-hint{font-family:var(--font-mono);font-size:.68rem;color:var(--ink-soft);max-width:70ch;line-height:1.6;margin:0}.audio-error{font-family:var(--font-mono);font-size:.68rem;color:var(--accent);margin:0}.autotune{display:grid;gap:8px;justify-items:start;border-top:1px solid var(--edge);padding-top:10px}.track-fx{display:grid;gap:8px;justify-items:start;border-top:1px solid var(--edge);padding-top:10px;margin-top:4px}.track-fx .fx-rack{display:flex;flex-wrap:wrap;gap:10px}.mixer{display:flex;gap:1px;overflow:auto;min-height:0;background:#b5b4ab;align-items:stretch}.mix-strip{flex:0 0 286px;background:var(--body-grey);padding:6px 10px 8px;display:grid;grid-template-rows:auto 1fr;gap:6px;align-content:start}.mix-armed{box-shadow:inset 0 3px 0 var(--accent)}.mix-name{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:none;border:none;border-bottom:1px solid var(--edge);text-align:left;padding:2px 0 4px;cursor:pointer}.mix-name:hover{color:var(--accent-deep, #c93d00)}.mix-name-static{cursor:default}.mix-main{display:flex;gap:12px;min-height:0}.mix-fader-col{display:flex;gap:6px;align-items:stretch}.mix-ctrl-col{display:grid;gap:6px;align-content:start;flex:1;min-width:0}.mix-meter{width:10px;height:136px;border:1px solid var(--well-edge);border-radius:2px;background:var(--well)}.mix-section{display:flex;align-items:center;flex-wrap:wrap;gap:3px 8px}.mix-subrow{display:flex;flex-wrap:wrap;gap:3px 8px;transition:opacity .15s ease}.mix-dim{opacity:.4}.fader{display:grid;grid-template-rows:1fr auto;justify-items:center;gap:4px}.fader-rail{position:relative;width:22px;height:136px;background:var(--well);border:1px solid var(--well-edge);border-radius:3px;cursor:ns-resize;touch-action:none}.fader-fill{position:absolute;left:9px;right:9px;bottom:0;background:#ff6a2b80;border-radius:2px;pointer-events:none}.fader-handle{position:absolute;left:-2px;right:-2px;height:14px;background:var(--panel-grey);border:1px solid var(--edge);border-radius:3px;box-shadow:0 2px 4px #00000059,inset 0 -2px #1d1d1b26;pointer-events:none}.fader-handle:after{content:"";position:absolute;left:3px;right:3px;top:6px;height:1px;background:var(--accent)}.fader-chip{min-width:30px}.mix-tag{flex:0 0 auto;min-width:26px;font-size:.5rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}.mix-section .seg-btn{padding:1px 6px;font-size:.54rem}.mix-ms{display:flex;gap:4px}.mix-note{font-family:var(--font-mono);font-size:.58rem;color:var(--ink-soft);line-height:1.5}.mix-master .mix-name{color:var(--accent)}.drum-editor{padding:10px;display:grid;gap:10px;align-content:start;overflow:auto;min-height:0}.drum-editor-top{display:flex;align-items:center;gap:8px}.drum-editor-top .audio-hint{margin-left:10px}.pads-editor{padding:12px 14px;display:grid;gap:10px;align-content:start;justify-items:start;overflow:auto;min-height:0}.pads-grid{display:grid;grid-template-columns:repeat(8,minmax(86px,110px));gap:6px}.drum-pads-grid{grid-template-columns:repeat(7,minmax(86px,110px))}.pad-cell{position:relative;height:52px;display:grid;align-content:center;justify-items:center;gap:2px;padding:4px 6px;font-family:var(--font-mono);color:var(--ink);background:var(--panel-grey);border:1px solid var(--edge);border-radius:5px;cursor:pointer;box-shadow:0 2px #1d1d1b2e;transition:transform .05s ease,box-shadow .05s ease,background .1s ease}.pad-cell:active,.pad-cell-hit{transform:translateY(2px);box-shadow:0 0 #1d1d1b2e;background:var(--accent);color:#fff}.pad-cell-on{border-color:var(--accent);box-shadow:0 2px #1d1d1b2e,inset 0 0 0 1px var(--accent)}.pad-cell-empty{color:var(--ink-soft);background:var(--body-grey);border-style:dashed}.pad-cell-drop{background:#ff4d0026;border-color:var(--accent)}.pad-num{font-size:.52rem;font-weight:700;letter-spacing:.12em;color:inherit;opacity:.65}.pad-name{font-size:.58rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pads-param-tag{flex:0 0 auto!important;min-width:64px}.sampler-editor{padding:14px;display:grid;gap:12px;align-content:start}.sampler-info{font-family:var(--font-mono);font-size:.68rem;color:var(--ink-soft)}.sampler-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.instrument-host{overflow:auto;min-height:0;padding:10px;display:grid;gap:10px;align-content:start}.instrument-presets{justify-self:start}.instrument-editor{display:grid;gap:10px}.instrument-editor .module-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.help-overlay{position:fixed;inset:0;z-index:80;background:#1414168c;display:grid;place-items:center;cursor:pointer}.help-overlay.hidden{display:none}.help-card{background:var(--body-grey);border:1px solid #b5b4ab;border-radius:6px;box-shadow:0 24px 60px #00000080;padding:18px 22px;max-width:560px;max-height:80vh;overflow:auto}.help-card h2{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin:0 0 12px}.help-list{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0}.help-list dt{font-family:var(--font-mono);font-size:.66rem;color:var(--ink);background:var(--panel-grey);border:1px solid var(--edge);border-radius:3px;padding:2px 7px;justify-self:start;white-space:nowrap}.help-list dd{font-size:.72rem;color:var(--ink-soft);margin:0;align-self:center}@media(max-width:1000px){.arrange-body{grid-template-columns:168px 1fr}.transport-bar{height:auto;flex-wrap:wrap;padding:6px 10px;gap:6px}.transport-bar .brand{margin-right:4px}.daw{grid-template-rows:1fr 250px}.pads-grid,.drum-pads-grid{grid-template-columns:repeat(4,minmax(72px,1fr))}}@media(max-width:640px){.arrange-body{grid-template-columns:124px 1fr}.track-head-controls .mini-dial span{display:none}.bar-space .seg-btn{padding:4px 5px;font-size:.54rem}.seg-btn{min-height:30px}.mix-strip{flex:0 0 240px}.daw{grid-template-rows:1fr 220px}}.settings-card{min-width:420px;display:grid;gap:12px;cursor:default}.settings-row{align-items:center;gap:14px;border-top:1px solid var(--edge);padding-top:10px}.settings-row .mix-tag{min-width:76px}.settings-close{justify-self:end}.auto-dot-hold{border-radius:2px}.auto-dot-exp{background:var(--led)}.clip-grip-left{left:0;right:auto}.eq-card{min-width:760px;max-width:800px;cursor:default;display:grid;gap:12px}.eq-canvas{width:720px;max-width:100%;height:260px;border:1px solid var(--edge);border-radius:4px;background:#161618;touch-action:none;cursor:crosshair}.eq-list{display:grid;gap:5px}.eq-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.eq-row.eq-off{opacity:.5}.eq-chip{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-mono);font-size:.62rem;font-weight:700;color:#0b0b0c;flex:0 0 auto}.eq-num{display:inline-flex;align-items:center;gap:4px;font-size:.6rem;color:var(--ink-soft)}.eq-num input{width:56px;background:var(--panel-grey);border:1px solid var(--edge);border-radius:3px;color:var(--ink);font-family:var(--font-mono);font-size:.66rem;padding:3px 5px}.eq-num.eq-dim{opacity:.4}.eq-del{color:#c8503a}.eq-add{justify-self:start;margin-top:2px}.mix-eq-head{display:flex;align-items:center;justify-content:space-between;gap:6px}.mix-eq-edit{background:var(--panel-grey);border:1px solid var(--edge);border-radius:3px;color:var(--ink-soft);font-size:.56rem;text-transform:uppercase;letter-spacing:.06em;padding:2px 7px;cursor:pointer}.mix-eq-edit:hover{color:var(--ink);border-color:var(--accent)}.mix-lufs{display:grid;justify-items:center;gap:2px;margin-top:8px}.mix-lufs-tag{font-size:.5rem;letter-spacing:.08em;color:var(--ink-soft)}.mix-lufs-val{font-family:var(--font-mono);font-size:.78rem;color:var(--ink);font-variant-numeric:tabular-nums}.track-freeze{font-size:.5rem;text-transform:uppercase;letter-spacing:.05em;padding:2px 5px;border:1px solid var(--edge);border-radius:3px;background:var(--panel-grey);color:var(--ink-soft);cursor:pointer;white-space:nowrap}.track-freeze:hover:not(:disabled){color:var(--ink);border-color:#6db3d8}.track-freeze.seg-on{background:#2a4d63;border-color:#4a86ad;color:#cfeaff}.track-freeze:disabled{opacity:.6;cursor:default}.track-frozen{box-shadow:inset 3px 0 #4a86ad}.session-card{min-width:640px;max-width:92vw;cursor:default;display:grid;gap:12px}.session-head{display:flex;align-items:center;gap:10px}.session-head h2{margin:0 auto 0 0}.session-grid{display:grid;gap:4px;max-height:62vh;overflow:auto}.session-corner,.session-track-head{font-family:var(--font-mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);padding:4px 6px;border-bottom:1px solid var(--edge);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.session-scene{display:flex;align-items:center;gap:6px;font-size:.66rem;color:var(--ink);padding:0 4px;white-space:nowrap;overflow:hidden}.session-scene-launch{flex:0 0 auto;width:20px;height:20px;border:1px solid var(--edge);border-radius:3px;background:var(--panel-grey);color:var(--ink-soft);cursor:pointer;font-size:.6rem}.session-scene-launch:hover{color:var(--accent);border-color:var(--accent)}.session-slot{display:flex;align-items:stretch;gap:2px;min-height:30px;border:1px solid var(--well-edge);border-radius:4px;background:var(--well, #1c1c1e);padding:2px}.session-empty{background:#161618}.session-clip{flex:1 1 auto;border:none;border-radius:3px;background:#2c2c30;color:var(--bone, #e2e1dc);font-family:var(--font-mono);font-size:.6rem;cursor:pointer;text-align:left;padding:2px 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.session-clip:hover{background:#3a3a40}.session-playing .session-clip{background:var(--accent);color:#0b0b0c;font-weight:600}.session-clear,.session-edit,.session-add{flex:0 0 auto;width:20px;border:none;border-radius:3px;background:transparent;color:var(--ink-soft);cursor:pointer;font-size:.7rem}.session-edit:hover{color:var(--accent)}.session-add{width:100%;color:#55555c}.session-clear:hover{color:#c8503a}.session-add:hover{color:var(--accent)}.take-row{flex-wrap:wrap;align-items:center;gap:6px}.take-chip{display:inline-flex;align-items:stretch;border:1px solid var(--edge);border-radius:4px;overflow:hidden}.take-chip.take-active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.take-pick{border:none;background:var(--panel-grey);color:var(--ink-soft);font-size:.6rem;padding:3px 8px;cursor:pointer}.take-active .take-pick{background:var(--accent);color:#0b0b0c;font-weight:600}.take-del{border:none;border-left:1px solid var(--edge);background:transparent;color:var(--ink-soft);font-size:.62rem;padding:0 5px;cursor:pointer}.take-del:hover{color:#c8503a}.comp-lanes{display:grid;gap:3px;margin-top:4px}.comp-lane{display:flex;align-items:center;gap:6px}.comp-lane-label{flex:0 0 28px;font-family:var(--font-mono);font-size:.56rem;color:var(--ink-soft)}.comp-strip{position:relative;flex:1 1 auto;height:16px;background:#161618;border:1px solid var(--well-edge);border-radius:3px;cursor:crosshair;overflow:hidden}.comp-fill{position:absolute;top:0;bottom:0;background:var(--accent);opacity:.85}.instrument-piano{margin-top:10px}.instrument-piano .piano-label{font-size:.56rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:5px;display:block}.piano-shell{background:var(--well, #1c1c1e);border:1px solid var(--well-edge, #0c0c0d);border-radius:6px;padding:8px}.piano-2up{display:grid;gap:6px}.piano{position:relative;display:flex;height:clamp(48px,6vw,70px);touch-action:none}.piano-shell .key-w{flex:1;position:relative;background:var(--bone, #e2e1dc);border:1px solid #b9b2a0;border-radius:0 0 3px 3px;margin-right:2px;cursor:pointer;transition:background .05s}.piano-shell .key-w:last-child{margin-right:0}.piano-shell .key-b{position:absolute;top:0;width:7%;height:58%;background:#232325;border:1px solid #0c0c0d;border-radius:0 0 2px 2px;z-index:2;cursor:pointer}.piano-shell .key-w.key-down{background:var(--accent, #ff4d00);border-color:var(--accent-deep, #b23700)}.piano-shell .key-b.key-down{background:var(--accent-deep, #b23700);border-color:var(--accent-deep, #b23700)}.piano-shell .key-hint{position:absolute;bottom:5px;left:50%;transform:translate(-50%);font-family:var(--font-mono);font-size:.54rem;color:var(--ink-soft, #6a6a70);pointer-events:none}.piano-shell .key-b .key-hint{color:#9a958a}.piano-shell .key-down .key-hint{color:var(--bone, #e2e1dc)}.pad-cell{position:relative}.pad-key{position:absolute;top:3px;right:4px;font-family:var(--font-mono);font-size:.5rem;line-height:1;color:var(--ink-soft, #6a6a70);background:#00000047;border-radius:2px;padding:1px 3px;pointer-events:none}.pad-cell-on .pad-key{color:#0b0b0c;background:#fff6}