.kp{--kp-key-h:132px;background:var(--chrome);border-top:1px solid var(--chrome-line);padding:0 max(8px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px, env(safe-area-inset-left));touch-action:manipulation;-webkit-user-select:none;user-select:none;flex-direction:column;flex:none;max-height:60vh;display:flex;box-shadow:0 -4px 14px #231c0c0f}.kp[hidden]{display:none!important}.kp .smufl{line-height:1}.kp-bar{flex-wrap:wrap;align-items:center;gap:8px;padding:4px 0;display:flex}.kp-title{color:var(--ink-2);white-space:nowrap;font-size:13px}.kp-info{color:var(--ink-2);white-space:nowrap;text-overflow:ellipsis;max-width:46vw;margin-left:auto;font-size:12px;overflow:hidden}.kp-collapse{border:1px solid var(--chrome-line);border-radius:var(--r-s);background:var(--surface);place-items:center;width:40px;height:40px;display:grid}.kp-collapse svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:22px;height:22px;transition:transform .15s var(--ease-out)}.kp.collapsed .kp-collapse svg{transform:rotate(180deg)}.kp.collapsed .kp-body{display:none}.kp-seg{border:1px solid var(--chrome-line);border-radius:var(--r-s);background:var(--surface);display:inline-flex;overflow:hidden}.kp-seg .kp-b+.kp-b{border-left:1px solid var(--chrome-line)}.kp-b{min-width:44px;min-height:40px;color:var(--ink);cursor:pointer;background:0 0;border:0;padding:0 12px;font-size:14px}.kp-b:active{background:var(--chrome-press)}.kp-b[aria-pressed=true]{background:var(--accent);color:var(--accent-ink)}.kp-ico{padding:0 10px;font-size:16px}.kp-body{grid-template-columns:minmax(250px,340px) 1fr;gap:10px;min-height:0;padding:4px 0 8px;display:grid;overflow:hidden}.kp-left{flex-direction:column;gap:8px;min-width:0;display:flex}.kp-vals{touch-action:none;grid-template-columns:repeat(7,1fr);gap:4px;display:grid}.kp-val{border:1px solid var(--chrome-line);border-radius:var(--r-s);background:var(--surface);flex-direction:column;justify-content:center;align-items:center;gap:2px;min-height:64px;padding:2px 0;display:flex}.kp-val .kp-vg{align-items:center;height:34px;font-size:30px;display:flex;transform:translateY(5px)}.kp-val .kp-vt{color:var(--ink-2);font-size:10px}.kp-val[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.kp-val[aria-pressed=true] .kp-vt{color:var(--accent-ink)}.kp-latches{grid-template-columns:repeat(2,1fr);gap:4px;display:grid}.kp-t{border:1px solid var(--chrome-line);border-radius:var(--r-s);background:var(--surface);min-height:44px;font-size:14px}.kp-t[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}.kp-voice{align-self:stretch}.kp-voice .kp-b{flex:1}.kp-right{flex-direction:column;gap:6px;min-width:0;min-height:0;display:flex}.kp-strip{touch-action:pan-x;-webkit-overflow-scrolling:touch;scrollbar-width:none;align-items:center;gap:4px;padding-bottom:2px;display:flex;overflow:auto hidden}.kp-strip::-webkit-scrollbar{display:none}.kp-sep{background:var(--chrome-line);flex:0 0 1px;align-self:stretch;margin:4px 2px}.kp-c{border:1px solid var(--chrome-line);border-radius:var(--r-s);background:var(--surface);white-space:nowrap;flex:none;align-items:center;gap:4px;min-width:44px;min-height:44px;padding:0 10px;font-size:13px;display:inline-flex}.kp-c .kp-cg{font-size:22px}.kp-c[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}.kp-c.latched{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:0 0 0 2px var(--accent-line)}.kp-c.open{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);animation:1.2s ease-in-out infinite kp-pulse}.kp-dyn{justify-content:center;min-width:42px;font-family:Times New Roman,Georgia,serif;font-size:17px;font-style:italic;font-weight:700}.kp-more{font-weight:600}@keyframes kp-pulse{50%{box-shadow:0 0 0 4px var(--accent-line)}}.kp-keysrow{flex:auto;gap:8px;min-height:0;display:flex}.kp-surface{min-width:0;height:var(--kp-key-h);flex:1 1 0}.kp-side{flex-direction:column;flex:none;gap:6px;width:118px;display:flex}.kp-rest{border:1px solid var(--chrome-line);border-radius:var(--r-s);background:var(--surface);flex:auto;min-height:56px;font-size:17px;font-weight:600}.kp-rest:active{background:var(--chrome-press)}.kp-oct{justify-content:space-between;align-items:center;gap:2px;display:flex}.kp-oct .kp-b{border:1px solid var(--chrome-line);border-radius:var(--r-s);background:var(--surface);min-width:36px;padding:0 6px}.kp-octinfo{color:var(--ink-2);text-align:center;flex:1;font-size:11px;line-height:1.1}.kp-pref{border:1px solid var(--chrome-line);border-radius:var(--r-s);background:var(--surface);grid-template-columns:repeat(3,1fr);display:grid;overflow:hidden}.kp-pref .kp-b{min-width:0;min-height:36px;padding:0;font-size:15px}.kp-pref .kp-b+.kp-b{border-left:1px solid var(--chrome-line)}.kp-piano{touch-action:pan-x;-webkit-overflow-scrolling:touch;border-radius:var(--r-s);background:#fff;border:1px solid #b9b4a8;height:100%;position:relative;overflow:auto hidden}.kp-keys{height:100%;position:relative}.kp-wk{box-sizing:border-box;background:linear-gradient(#fff,#f4f2ec);border-right:1px solid #b9b4a8;position:absolute;top:0;bottom:0}.kp-wk.down{background:#cfe0fb}.kp-wk.cur{background:#bcd3f8}.kp-kl{color:#6b665c;pointer-events:none;font-size:11px;position:absolute;bottom:6px;left:4px}.kp-bk{z-index:2;box-sizing:border-box;background:linear-gradient(#383632,#1c1b19);border-radius:0 0 5px 5px;height:62%;position:absolute;top:0;box-shadow:0 2px 3px #00000059}.kp-bk.down,.kp-bk.cur{background:linear-gradient(#3566b8,#264c8f)}.kp-pads{touch-action:pan-y;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));align-content:start;gap:6px;height:100%;display:grid;overflow-y:auto}.kp-pad{border:1px solid var(--chrome-line);border-radius:var(--r-m);background:var(--surface);min-height:56px;font-size:14px;font-weight:600}.kp-pad:active{background:var(--accent-soft);border-color:var(--accent)}@media (max-width:820px),(orientation:portrait){.kp{--kp-key-h:120px}.kp-body{grid-template-columns:1fr;gap:6px}.kp-left{flex-flow:wrap;align-items:stretch}.kp-vals{flex:340px}.kp-val{min-height:54px}.kp-latches{flex:260px;grid-template-columns:repeat(4,1fr)}.kp-voice{flex:100%}.kp-info{max-width:40vw}}@media (max-height:560px){.kp{--kp-key-h:96px}.kp-val{min-height:50px}.kp-val .kp-vt{display:none}}body.keyin-on #canvas{cursor:text}