@layer base,kit;@layer kit{.pn-chip{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-6);font:var(--font-chip);letter-spacing:var(--ls-03);padding:5px 10px;border-radius:var(--r-5);border:1px solid var(--ink-20);background:transparent;color:var(--text);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;-webkit-appearance:none;-moz-appearance:none;appearance:none;min-height:0;touch-action:manipulation;transition:background var(--dur),color var(--dur)}.pn-chip.is-active{background:var(--text);color:var(--surface-raised);border-color:var(--text)}.pn-chip:active{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}.pn-chip:disabled{opacity:.45;cursor:default}.pn-chip.pn-sm{font:var(--font-dense);letter-spacing:var(--ls-05);padding:5px 9px;color:var(--text-dim)}.pn-chip.pn-sm.is-active{color:var(--surface-raised)}.pn-chip.pn-xs{font:var(--font-dense);letter-spacing:var(--ls-06);padding:3px 6px;border-radius:var(--r-4);color:var(--text-dim)}.pn-chip.pn-xs.is-active{color:var(--surface-raised)}.pn-chip.pn-wash.is-active{background:var(--ink-12);color:var(--text);border-color:var(--ink-25)}.pn-chip.pn-square{width:var(--chip-square);height:var(--chip-square);padding:0;gap:0;font:var(--w-semi) var(--m-10) var(--mono)}.pn-chip.pn-caps{text-transform:uppercase;letter-spacing:var(--ls-08);font:var(--font-dense);padding:3px 6px;border-radius:var(--r-4);border-color:var(--ink-25);color:var(--text)}.pn-chip.pn-caps.is-active{color:var(--surface-raised)}.pn-chip.pn-tone-accent.is-active{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}.pn-chip.pn-tone-danger{border-color:var(--danger);color:var(--danger)}.pn-chip.pn-tone-danger.is-active{background:var(--danger);color:var(--on-danger);border-color:var(--danger)}.pn-chip.pn-solid{background:var(--surface-raised)}.pn-chip.pn-solid.is-active{background:var(--text)}.pn-chip.pn-fill{flex:1}.pn-chip.pn-loose{padding:6px 9px;border-radius:var(--r-5)}.pn-chipfixed{width:56px;flex:none;text-align:center;overflow:hidden;text-overflow:ellipsis}.pn-chiprow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-5)}.pn-chiprow.pn-tight{gap:var(--s-4)}.pn-switch{display:inline-flex;align-items:center;gap:var(--s-8);background:none;border:0;padding:0;cursor:pointer;color:var(--text);font:var(--m-11) var(--mono);-webkit-appearance:none;-moz-appearance:none;appearance:none;min-height:0}.pn-switch-track{position:relative;flex:none;width:34px;height:20px;border-radius:10px;border:none;background:var(--ink-15);transition:background var(--dur)}.pn-switch-knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--surface-raised);transition:transform var(--dur);pointer-events:none}.pn-switch.is-on .pn-switch-track{background:var(--text)}.pn-switch.is-on .pn-switch-knob{transform:translate(14px)}.pn-switch.pn-tone-accent.is-on .pn-switch-track{background:var(--accent)}.pn-switch:disabled{opacity:.45;cursor:default}.pn-switch-label{font:var(--m-11) var(--mono);color:var(--text)}.pn-action{display:flex;align-items:center;justify-content:center;gap:var(--s-8);height:var(--action-h);min-height:0;width:100%;border:none;border-radius:var(--r-9);background:var(--text);color:var(--surface-raised);font:var(--font-action);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;white-space:nowrap}.pn-action:active{background:var(--accent);color:var(--on-accent)}.pn-action:disabled{border:var(--dash);color:var(--text-dim);background:none;cursor:default}.pn-action.pn-sm{height:auto;min-height:var(--hit);padding:10px 12px;border-radius:var(--r-8);font:var(--font-chip);letter-spacing:var(--ls-03)}.pn-action.pn-danger{background:var(--danger);color:var(--on-danger)}.pn-action.pn-auto{width:auto;padding-left:var(--s-18);padding-right:var(--s-18)}.pn-dangerbtn,.pn-panic{border:1px solid var(--danger);background:transparent;color:var(--danger)}.pn-dangerbtn:active,.pn-panic.is-flashing{background:var(--danger);color:var(--on-danger)}.pn-dangerbtn{display:flex;align-items:center;justify-content:center;width:100%;font:var(--font-chip);letter-spacing:var(--ls-03);padding:8px 12px;border-radius:var(--r-6);border:1px solid var(--danger);background:transparent;color:var(--danger);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;min-height:0}.pn-dangerbtn:active{background:var(--danger);color:var(--on-danger)}.pn-dangerbtn.pn-compact{font:var(--font-label);letter-spacing:var(--ls-06);padding:6px 0;border-radius:var(--r-5)}.pn-dangerbtn.pn-auto{width:auto;padding-left:var(--s-12);padding-right:var(--s-12)}.pn-fieldrow{display:flex;align-items:center;gap:var(--s-8)}.pn-fieldrow-label{flex:none;min-width:var(--label-w);font:var(--font-label);letter-spacing:var(--ls-04);color:var(--text-dim)}.pn-fieldrow.pn-wide{gap:var(--s-10)}.pn-fieldrow.pn-wide>.pn-fieldrow-label{width:var(--label-w-wide);min-width:0;font:var(--font-dense);letter-spacing:var(--ls-08);text-transform:uppercase}.pn-fieldrow-control{flex:1;min-width:0;display:flex;align-items:center;gap:var(--s-6)}.pn-fieldrow-value{flex:none;min-width:50px;text-align:right;font:var(--font-hint);color:var(--text-dim)}.pn-fieldrow.pn-stacked{flex-direction:column;align-items:stretch;gap:var(--s-6)}.pn-fieldrow.pn-stacked>.pn-fieldrow-label{width:auto}.pn-fieldrow.pn-stacked>.pn-fill{flex:none}input.pn-input,select.pn-select{font:var(--font-value);color:var(--text);background:var(--ink-04);border:1px solid var(--ink-20);border-radius:var(--r-6);padding:5px var(--s-8);min-height:calc(32px * var(--token-scale));width:auto;min-width:0;outline:none}.pn-input:focus,.pn-select:focus{border-color:var(--text)}.pn-select{cursor:pointer}.pn-input.pn-lg,.pn-select.pn-lg{min-height:calc(36px * var(--token-scale));padding:6px var(--s-8)}.pn-input.pn-sm,.pn-select.pn-sm{min-height:calc(28px * var(--token-scale));padding:5px var(--s-7)}.pn-input.pn-fill,.pn-select.pn-fill{flex:1}.pn-input.pn-quiet{background:none;border:none;border-bottom:1px dashed var(--text-dim);border-radius:0;padding:var(--s-4) 0;min-height:0}.pn-input.pn-quiet:focus{border-bottom-color:var(--text)}.pn-input.pn-quiet::placeholder{color:var(--text-dim);opacity:.6}.pn-input.pn-dashed{background:var(--surface-raised);border:var(--dash)}.pn-ghostbtn.pn-fill{flex:1}.pn-slider{display:flex;flex-direction:column;gap:var(--s-4);-webkit-user-select:none;user-select:none;touch-action:none}.pn-slider.pn-compact{gap:var(--s-3)}.pn-slider-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-6)}.pn-slider-label{font:var(--font-label);letter-spacing:var(--ls-04);color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pn-slider-value{flex:none;font:var(--font-hint);color:var(--text)}.pn-slider-track{position:relative;height:4px;border-radius:2px;background:var(--ink-08);cursor:ew-resize}.pn-slider-track:before{content:"";position:absolute;top:-10px;right:0;bottom:-10px;left:0}.pn-slider-fill{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--text);pointer-events:none}.pn-swatch{display:inline-block;flex:none;border-radius:var(--s-3);background:var(--pn-swatch-color, var(--text));border:0;padding:0}.pn-swatch.pn-round{border-radius:50%}.pn-swatch.pn-ring{box-shadow:var(--ring-swatch)}.pn-swatch.pn-selected{box-shadow:0 0 0 2px var(--surface-raised),0 0 0 3.5px var(--text)}.pn-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:none;border:0;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:default}.pn-scrim{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--scrim);border:0;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:default}.pn-floatcard{position:relative;width:250px;background:var(--surface-raised);border-radius:var(--r-10);box-shadow:var(--shadow-pop);padding:var(--s-14);display:flex;flex-direction:column;gap:var(--s-12);color:var(--text)}.pn-floatcard.pn-popover{width:224px;padding:var(--s-12);gap:var(--s-10);border:var(--hair-15)}.pn-floatcard-head{display:flex;align-items:center;gap:var(--s-8)}.pn-floatcard-title{font:var(--w-semi) var(--m-12) var(--mono);color:var(--text)}.pn-floatcard.pn-popover .pn-floatcard-title{font:var(--font-label);letter-spacing:var(--ls-06)}.pn-sheet-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:flex}.pn-sheet-overlay.pn-center{align-items:center;justify-content:center}.pn-sheet{position:relative;display:flex;flex-direction:column;background:var(--surface-raised);overflow:hidden}.pn-sheet.pn-side{width:var(--sheet-side);max-width:100%;flex:none;margin-left:auto;box-shadow:var(--shadow-sheet-side)}.pn-sheet.pn-left{width:320px;max-width:100%;flex:none;margin-right:auto;box-shadow:var(--shadow-sheet-left)}.pn-sheet-overlay.pn-bottom{flex-direction:column}.pn-sheet.pn-bottom{width:100%;margin-top:auto;box-shadow:var(--shadow-sheet-bottom);border-top:var(--hair)}.pn-sheet.pn-bottom .pn-sheet-header{padding:14px 18px 10px}.pn-sheet.pn-bottom .pn-sheet-body{padding:12px 18px 16px;flex-direction:row;align-items:center;gap:var(--s-16);flex-wrap:wrap;overflow:visible}.pn-sheet.pn-center{width:var(--sheet-center);max-width:95%;max-height:86vh;background:var(--surface);border-radius:var(--r-12);box-shadow:var(--shadow-sheet-center)}.pn-sheet-header{flex:none;display:flex;align-items:center;gap:var(--s-8);padding:18px 20px 14px;border-bottom:var(--hair)}.pn-sheet-title{font:var(--font-title);color:var(--text)}.pn-sheet-meta{margin-top:var(--s-3);font:var(--font-hint);color:var(--text-dim)}.pn-sheet-close{margin-left:auto;flex:none;font:var(--w-reg) 18px/1 var(--sans);color:var(--text-dim);cursor:pointer;padding:2px 6px;background:none;border:none;min-height:0}.pn-sheet-body{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:var(--s-16)}.pn-sheet.pn-center .pn-sheet-body{gap:var(--s-7)}.pn-sheet-footer{flex:none;padding:14px 20px;border-top:var(--hair)}.pn-sheet.pn-center .pn-sheet-footer{border-top:none;padding:0 20px 16px}.pn-sheet.pn-center .pn-sheet-body.pn-help-body{gap:var(--s-14)}.pn-help-group{display:grid;grid-template-columns:5.5em minmax(0,1fr) minmax(0,1fr);column-gap:var(--s-10);row-gap:var(--s-5);align-items:baseline}.pn-help-group+.pn-help-group{border-top:var(--hair);padding-top:var(--s-14)}.pn-help-head{grid-column:1 / -1;display:flex;align-items:baseline;gap:var(--s-8)}.pn-help-fig{flex:none;align-self:center;display:block;width:34px;height:31px}.pn-help-fig>svg{display:block;width:100%;height:100%}.pn-help-title{font:var(--font-label);letter-spacing:var(--ls-06);color:var(--text)}.pn-help-only{font:var(--font-dense);letter-spacing:var(--ls-04);color:var(--text-dim);border:var(--hair);border-radius:var(--r-4);padding:1px var(--s-5)}.pn-help-note{grid-column:1 / -1;font:var(--font-hint);color:var(--text-dim)}.pn-help-modelabel{font:var(--font-dense);letter-spacing:var(--ls-04);color:var(--ink-25)}.pn-help-modelabel.is-active{color:var(--text)}.pn-help-gesture{font:var(--font-dense);letter-spacing:var(--ls-03);color:var(--text-dim)}.pn-help-desc{font:var(--font-hint);color:var(--text-dim)}.pn-help-desc.is-active{color:var(--text)}.pn-help-desc.is-off{color:var(--ink-17)}.pn-help-desc.pn-help-span{grid-column:2 / -1}.pn-help-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s-10)}@media(max-width:640px){.pn-help-group{grid-template-columns:5.5em minmax(0,1fr)}.pn-help-desc:not(.pn-help-span){grid-column:2 / -1}.pn-help-desc[data-mode]:before{content:attr(data-mode) "  ";color:var(--ink-25);white-space:pre}.pn-help-colspacer,.pn-help-modelabel{display:none}}.pn-card{background:var(--surface-raised);border:var(--hair-15);border-radius:var(--r-7)}.pn-card:active{background:var(--ink-06)}.pn-card-phantom{display:flex;align-items:center;justify-content:center;width:100%;border:var(--dash);border-radius:var(--r-7);font:var(--font-item);color:var(--text-dim);background:none;cursor:pointer;min-height:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.pn-card-phantom:active{background:var(--ink-06)}.hint{font:var(--font-hint);color:var(--text-dim)}.section-label{font:var(--font-dense);letter-spacing:var(--ls-08);text-transform:uppercase;color:var(--text-dim)}.link-btn{font:var(--m-9) var(--mono);color:var(--accent-text);background:none;border:none;cursor:pointer;padding:0;text-align:left;min-height:0}.stack{display:flex;flex-direction:column;gap:var(--s-8)}.rule-top{border-top:var(--hair);padding-top:14px}.spacer{flex:1}.flex-none{flex:none}.pn-segbar{display:flex;gap:2px;padding:2px;border:var(--hair-15);border-radius:var(--r-6)}.pn-segbar>.pn-ghostbtn{flex:1;min-width:0;height:calc(var(--chrome-btn-h) - 6px);border-color:transparent;border-radius:var(--r-4)}.pn-segbar.pn-natural>.pn-ghostbtn{flex:none}.pn-segbar.pn-xs{gap:1px;padding:1px;border-radius:var(--r-5)}.pn-segbar.pn-xs>.pn-ghostbtn{height:20px;padding:0 6px;font:var(--font-dense);letter-spacing:var(--ls-06);border-radius:var(--r-4)}.pn-segbar .pn-ghostbtn.pn-tone-accent.is-lit{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}.pn-keybed-wrap{--pn-key-gap: calc(2px * var(--token-scale));display:flex;align-items:center;gap:var(--s-6);flex:1 1 auto;min-width:0;padding-bottom:calc(14px * var(--token-scale))}.pn-keybed{position:relative;flex:1 1 auto;min-width:0;height:calc(76px * var(--token-scale));-webkit-user-select:none;user-select:none;touch-action:manipulation}.pn-keybed-sharps{position:absolute;top:0;right:0;bottom:58%;left:0}.pn-keybed-nats{position:absolute;top:46%;right:0;bottom:0;left:0}.pn-key{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(3px * var(--token-scale));padding:0;border:none;border-radius:var(--r-8);background:var(--ink-18);cursor:pointer;transition:background 90ms linear,transform 60ms linear}.pn-key:active{transform:translateY(1px)}.pn-key-nat{border-radius:var(--r-8) var(--r-8) var(--r-12) var(--r-12)}.pn-key.is-on{background:var(--accent)}.pn-key-dot{width:var(--s-6);height:var(--s-6);border-radius:50%;border:1px solid var(--ink-35);background:none;flex:none;transition:background 70ms linear,box-shadow 70ms linear}.pn-key-sharp .pn-key-dot{background:var(--ink-35)}.pn-key.is-on .pn-key-dot{border-color:color-mix(in srgb,var(--on-accent) 45%,transparent)}.pn-key-sharp.is-on .pn-key-dot{background:color-mix(in srgb,var(--on-accent) 45%,transparent)}.pn-key.is-lit .pn-key-dot{background:var(--accent);border-color:var(--accent);box-shadow:0 0 var(--s-8) var(--accent)}.pn-key.is-on.is-lit .pn-key-dot{background:var(--on-accent);border-color:var(--on-accent);box-shadow:0 0 var(--s-8) var(--on-accent)}.pn-key-num{font:var(--font-hint);font-size:calc(9px * var(--token-scale));line-height:1;color:var(--on-accent);pointer-events:none}.pn-key-oct{position:absolute;bottom:calc(-13px * var(--token-scale));text-align:center;font:var(--font-hint);font-size:calc(9px * var(--token-scale));color:var(--text-dim);pointer-events:none}.pn-key-shift{flex:none;min-width:var(--s-20);min-height:calc(30px * var(--token-scale));background:none;border:1px solid var(--ink-12);border-radius:var(--r-5);color:var(--text-dim);cursor:pointer}.pn-key-shift:disabled{opacity:.3;cursor:default}.pn-key-outside{flex:none;font:var(--font-hint);color:var(--accent-text)}.pn-slider.is-disabled{opacity:.4}.pn-slider.is-disabled .pn-slider-track{cursor:default}.start-gate{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px}.start-gate h1{font-size:22px;letter-spacing:.04em;margin:0}.start-gate p{color:var(--text-dim);margin:0}.start-gate button{min-width:180px;min-height:52px}.start-gate .start-warn{max-width:34em;text-align:center;color:var(--danger);border:1px solid var(--danger);border-radius:var(--r-6);padding:8px 12px}}@layer base,kit;@layer kit{.pn-chromebar{display:flex;flex:none;background:var(--surface-raised)}.pn-chromebar.pn-top{height:var(--topbar-h);border-bottom:var(--hair)}.pn-chromebar.pn-bottom{min-height:var(--rail-h);border-top:var(--hair)}.pn-chrometrack{width:100%;max-width:var(--chrome-max);margin:0 auto;padding:0 var(--gutter);box-sizing:border-box;display:flex;align-items:center;gap:var(--s-10);position:relative}.pn-chromebar-center{position:absolute;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:var(--s-10)}.pn-chromebar-spacer{flex:1}.pn-brand{display:flex;flex-direction:column;gap:1px}.pn-wordmark{font:var(--font-app)}.pn-brand-sub{font:var(--font-cell);letter-spacing:var(--ls-05);color:var(--text-dim)}.pn-ghostbtn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-6);flex:none;font:var(--font-label);letter-spacing:var(--ls-06);height:var(--chrome-btn-h);padding:0 10px;border-radius:var(--r-6);border:var(--edge);background:none;color:var(--text-dim);min-height:0;cursor:pointer;transition:color var(--dur),border-color var(--dur),background var(--dur)}.pn-ghostbtn.pn-rail{height:var(--rail-btn-h);padding:0 14px}.pn-ghostbtn.is-lit{background:var(--text);color:var(--surface-raised);border-color:var(--text)}.pn-ghostbtn.pn-quiet{border-color:transparent}.pn-ghostbtn.pn-square{width:var(--chrome-btn-h);padding:0}.pn-ghostbtn:active:not(:disabled):not(.is-lit){background:var(--ink-06);color:var(--text)}.pn-ghostbtn:disabled{opacity:.4;cursor:default}.pn-ghostbtn.is-inert{opacity:.4;cursor:default}.pn-ghostbtn.is-inert:active{background:none;color:var(--text-dim)}.pn-panic,.pn-slot,.pn-slot-add,.pn-ghostbtn.pn-rail{height:var(--rail-btn-h);min-height:0;flex:none}.pn-panic{font:var(--w-semi) var(--m-11) var(--mono);letter-spacing:var(--ls-08);padding:0 16px;border-radius:var(--r-6);cursor:pointer}.pn-slotrow{display:flex;align-items:center;gap:var(--s-10)}.pn-slot{width:var(--slot-w);display:flex;align-items:center;justify-content:center;border-radius:var(--r-7);cursor:pointer;font:var(--font-value);border:1px solid var(--ink-35);background:none;color:var(--text)}.pn-slot.is-active{border:1px solid var(--text);background:var(--text);color:var(--surface-raised)}.pn-slot.is-queued{border:1.5px dashed var(--accent);background:none;color:var(--accent-text)}.pn-slot-add{width:var(--rail-btn-h);display:flex;align-items:center;justify-content:center;border-radius:var(--r-7);cursor:pointer;font:var(--w-semi) 15px var(--mono);border:var(--dash);color:var(--text-dim);background:none}.pn-slot-add:active{background:var(--ink-06)}.pn-slot-hint{font:var(--font-hint);color:var(--text-dim);white-space:nowrap}.pn-devicechip{font:var(--m-11) var(--mono);letter-spacing:0}.pn-devicechip-anchor{margin-right:14px}.pn-devicechip.is-passive{display:inline-flex;align-items:center;gap:var(--s-6);color:var(--text-dim);margin-right:14px}.pn-devicechip-dot{width:6px;height:6px;border-radius:50%;flex:none}.pn-healthpop{position:absolute;bottom:100%;right:0;margin-bottom:10px;z-index:200;width:250px;display:flex;flex-direction:column;gap:var(--s-10);padding:var(--s-14);background:var(--surface-raised);border-radius:var(--r-10);box-shadow:var(--shadow-pop);color:var(--text)}.pn-healthpop-title{font:var(--w-semi) var(--m-12) var(--mono);color:var(--text)}.pn-healthrow{display:flex;align-items:center;gap:var(--s-7);font:var(--m-11) var(--mono);color:var(--text-dim)}.pn-healthrow.is-warn{color:var(--warn)}.pn-healthrow.is-bad{color:var(--danger)}.pn-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;background:none;border:0;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:default}.pn-clockcluster{display:flex;align-items:center;gap:var(--s-8)}.pn-clocksrc>.pn-ghostbtn{padding:0 9px}.pn-bpm{font:var(--w-semi) var(--m-11) var(--mono);color:var(--text);min-width:34px;text-align:center;-webkit-user-select:none;user-select:none;border-bottom:1px dashed transparent}.pn-bpm.is-draggable{cursor:ns-resize;border-bottom-color:var(--text-dim)}.pn-bartick{display:inline-block;width:34px;height:2px;border-radius:1px;background:var(--ink-12);overflow:hidden}.pn-bartick-fill{display:block;height:100%;width:0;background:var(--accent)}.pn-rundot{font:var(--m-11) var(--mono);color:var(--text-dim);-webkit-user-select:none;user-select:none;min-width:12px;text-align:center}.pn-rundot.is-running{color:var(--accent)}.pn-bpm-stack{display:inline-flex;flex-direction:column;align-items:center;gap:3px}.pn-snap-label{font:var(--font-hint);color:var(--text-dim);letter-spacing:var(--ls-06);margin-right:2px}.pn-snap-delete{font:var(--w-semi) var(--m-11) var(--mono);letter-spacing:var(--ls-08);color:var(--danger);border:1px solid var(--danger);background:none;border-radius:var(--r-6);padding:0 14px;min-height:36px;cursor:pointer}.pn-snap-delete.is-armed{background:var(--danger);color:var(--on-danger)}.pn-transport{font:12px var(--mono);height:var(--chrome-btn-h);min-height:0;min-width:var(--chrome-btn-h);padding:0 12px;border-radius:var(--r-6);cursor:pointer;border:1px solid var(--accent);background:var(--accent);color:var(--on-accent)}.pn-transport.is-playing{border:var(--edge);background:none;color:var(--text)}.pn-transport:disabled{opacity:.4;cursor:default}}@layer base,kit;:root{--surface: var(--field);--surface-raised: var(--field-raised);--token-scale: 1;--sans: "Helvetica Neue", Helvetica, Arial, sans-serif;--mono: ui-monospace, "SF Mono", Menlo, monospace;--s-2: calc(2px * var(--token-scale));--s-3: calc(3px * var(--token-scale));--s-4: calc(4px * var(--token-scale));--s-5: calc(5px * var(--token-scale));--s-6: calc(6px * var(--token-scale));--s-7: calc(7px * var(--token-scale));--s-8: calc(8px * var(--token-scale));--s-10: calc(10px * var(--token-scale));--s-12: calc(12px * var(--token-scale));--s-14: calc(14px * var(--token-scale));--s-16: calc(16px * var(--token-scale));--s-18: calc(18px * var(--token-scale));--s-20: calc(20px * var(--token-scale));--r-4: calc(4px * var(--token-scale));--r-5: calc(5px * var(--token-scale));--r-6: calc(6px * var(--token-scale));--r-7: calc(7px * var(--token-scale));--r-8: calc(8px * var(--token-scale));--r-9: calc(9px * var(--token-scale));--r-10: calc(10px * var(--token-scale));--r-12: calc(12px * var(--token-scale));--hit: 44px;--chip-square: calc(28px * var(--token-scale));--label-w: calc(42px * var(--token-scale));--label-w-wide: calc(80px * var(--token-scale));--sheet-side: calc(440px * var(--token-scale));--sheet-left: calc(320px * var(--token-scale));--sheet-center: calc(560px * var(--token-scale));--field-pad: calc(26px * var(--token-scale));--topbar-h: calc(52px * var(--token-scale));--rail-h: 60px;--chrome-btn-h: calc(28px * var(--token-scale));--chrome-max: 1600px;--gutter: calc(18px * var(--token-scale));--app-max: 1100px;--slot-w: 58px;--rail-btn-h: 40px;--action-h: 48px;--t-15: calc(15px * var(--token-scale));--t-14: calc(14px * var(--token-scale));--t-13: calc(13px * var(--token-scale));--t-12: calc(12px * var(--token-scale));--t-11: calc(11px * var(--token-scale));--m-12: calc(12px * var(--token-scale));--m-11: calc(11px * var(--token-scale));--m-10: calc(10px * var(--token-scale));--m-9: calc(9px * var(--token-scale));--m-8: calc(8px * var(--token-scale));--w-reg: 400;--w-med: 500;--w-semi: 600;--w-bold: 700;--lh-tight: 1.2;--lh-body: 1.5;--ls-03: .03em;--ls-04: .04em;--ls-05: .05em;--ls-06: .06em;--ls-08: .08em;--font-app: var(--w-bold) var(--t-15) / 1 var(--sans);--font-title: var(--w-semi) var(--t-15) var(--sans);--font-action: var(--w-semi) var(--t-14) var(--sans);--font-name: var(--w-semi) var(--t-13) var(--sans);--font-item: var(--t-12) var(--sans);--font-body: var(--t-12) / var(--lh-body) var(--sans);--font-value: var(--m-12) var(--mono);--font-chip: var(--w-semi) var(--m-11) var(--mono);--font-label: var(--w-semi) var(--m-10) var(--mono);--font-hint: var(--m-10) var(--mono);--font-dense: var(--w-semi) var(--m-9) var(--mono);--font-cell: var(--m-8) var(--mono);--dur: .15s;--dur-spring: .35s;--ease: ease-out;--good-base: #2d8659;--warn-base: #b8860b;--on-accent: var( --field );--on-danger: #ffffff}:root,[data-colorway]{--ink-04: color-mix(in srgb, var(--text) 4%, transparent);--ink-06: color-mix(in srgb, var(--text) 6%, transparent);--ink-08: color-mix(in srgb, var(--text) 8%, transparent);--ink-10: color-mix(in srgb, var(--text) 10%, transparent);--ink-12: color-mix(in srgb, var(--text) 12%, transparent);--ink-14: color-mix(in srgb, var(--text) 14%, transparent);--ink-15: color-mix(in srgb, var(--text) 15%, transparent);--ink-16: color-mix(in srgb, var(--text) 16%, transparent);--ink-17: color-mix(in srgb, var(--text) 17%, transparent);--ink-18: color-mix(in srgb, var(--text) 18%, transparent);--ink-20: color-mix(in srgb, var(--text) 20%, transparent);--ink-24: color-mix(in srgb, var(--text) 24%, transparent);--ink-25: color-mix(in srgb, var(--text) 25%, transparent);--ink-30: color-mix(in srgb, var(--text) 30%, transparent);--ink-35: color-mix(in srgb, var(--text) 35%, transparent);--border: color-mix(in srgb, var(--text) 17%, transparent);--scrim: color-mix(in srgb, var(--text) 25%, transparent);--danger-wash: color-mix(in srgb, var(--danger) 6%, transparent);--good: color-mix(in oklab, var(--good-base) 78%, var(--text));--warn: color-mix(in oklab, var(--warn-base) 78%, var(--text));--accent-text: color-mix(in oklab, var(--accent) 80%, var(--text));--banner-warn: color-mix(in srgb, var(--warn) 12%, var(--surface));--banner-bad: color-mix(in srgb, var(--danger) 12%, var(--surface));--banner-good: color-mix(in srgb, var(--good) 12%, var(--surface));--hair: 1px solid var(--ink-08);--hair-15: 1px solid var(--ink-15);--edge: 1px solid var(--border);--dash: 1px dashed var(--ink-30);--shadow-pop: 0 10px 26px var(--ink-24);--shadow-sheet-side: -12px 0 32px var(--ink-18);--shadow-sheet-left: 12px 0 32px var(--ink-18);--shadow-sheet-bottom: 0 -12px 32px var(--ink-18);--shadow-sheet-center: 0 18px 48px var(--ink-25);--ring-swatch: 0 0 0 1px color-mix(in srgb, currentColor 35%, transparent);--field-text: rgba(255, 255, 255, .7);--field-cross: rgba(255, 255, 255, .5);--field-socket: rgba(255, 255, 255, .22);--field-sep: rgba(255, 255, 255, .16);--field-line: rgba(255, 255, 255, .1);--field-log: #c8c8c0}@media(max-width:640px){:root{--token-scale: .8}}@layer base{*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%}body{background:var(--surface);color:var(--text);font-family:var(--mono);font-size:13px;line-height:1.45;text-transform:lowercase;touch-action:manipulation}#app{min-height:100%;display:flex;flex-direction:column}button{font:inherit;text-transform:inherit;color:inherit;background:var(--ink-08);border:var(--hair);border-radius:var(--r-8);min-height:44px;padding:0 16px;cursor:pointer}button:active:not([class*=pn-]){background:var(--ink-17)}button.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:700}button.ghost{background:none;border-color:transparent;color:var(--text-dim)}select,input[type=number]{font:inherit;color:inherit;background:var(--ink-08);border:var(--hair);border-radius:var(--r-4);min-height:36px;padding:0 8px}.top-bar{border-bottom:var(--hair);padding:10px var(--gutter)}.bottom-bar{border-top:var(--hair);padding:10px var(--gutter)}.chrome-track{max-width:var(--track-max, 1100px);margin:0 auto;display:flex;align-items:center;gap:14px}.wordmark{font-weight:700;font-size:15px;letter-spacing:.04em}.spacer{flex:1}.main{flex:1;width:100%;max-width:var(--track-max, 1100px);margin:0 auto;padding:var(--gutter);display:flex;flex-direction:column;gap:var(--gutter)}.controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px var(--gutter)}.control{display:flex;flex-direction:column;gap:6px}.control label{display:flex;justify-content:space-between;color:var(--text-dim);font-size:11px}.control label output{color:var(--text)}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:44px;background:none;margin:0}input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:var(--ink-17)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;background:var(--text);border:4px solid var(--field);margin-top:-10px}.control.toggled input[type=range]::-webkit-slider-thumb{background:var(--accent)}.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.footnote{color:var(--ink-35);font-size:11px}.import-label{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;color:var(--text-dim);cursor:pointer;border-radius:var(--r-8);border:var(--hair)}}:root{--field: #0e0f10;--field-raised: #1f2124;--surface: #17181a;--surface-raised: #1f2124;--text: #e6e4de;--text-dim: #8b8a84;--accent: #7fb069;--danger: #d4645c;--on-accent: var(--field);--on-danger: #f6f5f3;--chrome-max: 1100px;--track-max: 1100px;color-scheme:dark}.b-work{flex:1;min-height:0;width:100%;max-width:var(--chrome-max);margin:0 auto;padding:14px var(--gutter);box-sizing:border-box;display:flex;gap:14px}.b-midilog{padding-top:4px}.thin-scroll{scrollbar-width:thin;scrollbar-color:var(--ink-20) transparent}.thin-scroll::-webkit-scrollbar{width:6px}.thin-scroll::-webkit-scrollbar-thumb{background:var(--ink-20);border-radius:3px}.thin-scroll::-webkit-scrollbar-track{background:none}.lin-field{position:relative;background:var(--field);border-radius:var(--r-8);padding:var(--field-pad);box-sizing:border-box;display:flex;flex-direction:column;gap:6px;min-height:0}.seg-strip{flex:none;position:relative;overflow:hidden;background:var(--ink-04);border:1px solid var(--ink-08);border-radius:var(--r-6);width:100%}.seg-strip.in-row{flex:1 1 auto;min-width:0;width:auto}.seg-strip.editable{cursor:crosshair;touch-action:none}.seg-strip.off-path{opacity:.3}.lane-grid{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}.lane-row{display:flex;align-items:center;gap:6px;flex:none}.lane-name{flex:none;width:42px;font:var(--font-hint);color:var(--text-dim);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}button.lane-name{background:none;border:none;padding:2px 0;cursor:pointer;min-height:24px}button.lane-name.on{color:var(--accent-text)}.lane-add{display:flex;align-items:center;gap:8px;margin-top:2px}.lane-editor{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:4px;padding:8px 10px;background:var(--ink-04);border:1px solid var(--ink-08);border-radius:var(--r-6)}.lane-editor-title{font:var(--font-hint);color:var(--accent-text);flex:none}.lane-field{display:flex;align-items:center;gap:6px;flex:none}.lane-field>span{font:var(--font-hint);color:var(--text-dim)}.seg-note{position:absolute;height:4px;border-radius:1px;background:var(--field-text)}.seg-rest{position:absolute;bottom:4px;height:2px;background:var(--ink-12)}.seg-span{position:absolute;width:2px;margin-left:-1px;border-radius:1px;background:var(--field-text);opacity:.3}.seg-ph{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--accent) 22%,transparent)}.seg-bound{position:absolute;top:0;bottom:0;width:1px;background:var(--ink-17)}.lin-label{flex:none;display:flex;align-items:center;gap:8px;font:var(--font-label);letter-spacing:var(--ls-06);color:var(--field-text);min-height:24px}.lin-label .sub,.lane-add .sub,.form-row .sub,.xp-head .sub{font:var(--font-hint);color:var(--ink-35);letter-spacing:0}.lin-act{font:var(--font-label);letter-spacing:var(--ls-06);padding:4px 10px;border-radius:var(--r-6);border:1px solid var(--ink-25);background:none;color:var(--field-text);min-height:0;cursor:pointer}.lin-act.accent{border-color:var(--accent);color:var(--accent)}.lin-act.armed{border-color:var(--danger);color:var(--danger)}.lin-act:hover{border-color:var(--ink-35);color:var(--text)}.lin-act:active{background:var(--field-text);color:var(--field)}.lin-act:disabled{opacity:.35;cursor:default;pointer-events:none}.path-bit{flex:none;width:32px;height:32px;border-radius:var(--r-6);border:1px solid var(--ink-17);background:none;color:var(--ink-35);padding:0;cursor:pointer;min-height:0;font:var(--m-12) var(--mono)}.path-bit.on{background:var(--ink-08);color:var(--accent);border-color:var(--ink-25)}.path-bit:disabled{opacity:.4;cursor:default}.param-card{position:relative;overflow:hidden;flex:1;min-width:0;height:64px;border:var(--hair-15);border-radius:var(--r-8);background:var(--surface-raised);cursor:ew-resize;touch-action:none;-webkit-user-select:none;user-select:none;padding:7px 10px;display:flex;flex-direction:column;justify-content:space-between;min-height:0}.param-card.quiet{background:none;border:1px dashed var(--ink-16)}.param-card.quiet .fill{background:color-mix(in srgb,var(--accent) 11%,transparent)}.param-card .fill{position:absolute;left:0;top:0;bottom:0;background:color-mix(in srgb,var(--accent) 20%,transparent);pointer-events:none}.param-card .nm{position:relative;font:var(--font-label);letter-spacing:var(--ls-06);color:var(--text-dim)}.param-card .vl{position:relative;font:var(--font-value);color:var(--text)}.chip-cell{flex:none;display:flex;flex-direction:column;justify-content:space-between;gap:6px;height:64px;padding:7px 10px;border:1px dashed var(--ink-16);border-radius:var(--r-8)}.chip-cell .nm{font:var(--font-label);letter-spacing:var(--ls-06);color:var(--text-dim)}.rail-flag{margin-left:auto;flex:none}.voice-card{flex:none;overflow:hidden;display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:var(--r-9);border:var(--hair-15);background:none;cursor:pointer;text-align:left;min-height:0}.voice-card.focused{border-color:var(--accent);background:var(--surface-raised)}.voice-card.garden-card{border-style:dashed;gap:6px}.voice-card.muted .seg-strip{opacity:.3}.seg-note.locked{outline:1px solid var(--accent);outline-offset:1px}.seg-note.sel,.seg-rest.sel{outline:2px solid var(--accent-text);outline-offset:1px}.seg-rest.sel{height:4px}.form-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0 4px}.form-plays{display:flex;align-items:center;gap:4px;flex-wrap:wrap;min-width:0}.form-seg{display:inline-flex;align-items:baseline;gap:4px;padding:2px 6px;border-radius:var(--r-6);background:var(--ink-04);font:var(--font-hint);color:var(--text-dim)}.form-seg+.form-seg:before{content:"→";margin-right:2px;opacity:.5}.form-seg b{color:var(--accent-text);font-weight:600}.form-seg.wrapped{opacity:.6;border:1px dashed var(--ink-08)}.form-default{margin-left:2px}.lane-editor.xp-drawer{flex-direction:column;align-items:stretch;gap:4px}.xp-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.lane-field.xp-axis{gap:8px}.xp-val{font:var(--font-value);color:var(--text-dim);width:44px;text-align:right}.xp-val.on{color:var(--accent-text)}button.lin-act.xp-clear{width:26px;min-height:26px;padding:0;text-align:center}button.lin-act.xp-clear:disabled{opacity:.3;cursor:default}.xp-dropped-note{font:var(--font-hint);color:var(--text-dim);opacity:.7;margin-top:4px;padding-top:4px;border-top:1px solid var(--ink-08)}.lane-keys{flex:1 0 100%;display:flex;align-items:center;gap:10px;margin-top:6px;padding-top:10px;border-top:1px solid var(--ink-08)}