.ports-row{flex-wrap:wrap;align-items:flex-end;gap:14px 20px;display:flex}.ports-row .hint{color:var(--text-2);flex:1;align-self:center;min-width:240px;margin:0;font-size:.86rem}.field{flex-direction:column;gap:2px;min-width:0;display:flex}.field select{min-width:180px;max-width:100%;height:34px}.field .label{margin-bottom:4px}.instrument{background:linear-gradient(to bottom, var(--surface-2), var(--surface) 140px);padding:18px}.console{grid-template-columns:auto 1fr;align-items:end;gap:16px 24px;margin-bottom:18px;display:grid}.lcd{background:#0a0605;border:1px solid #2a1810;border-radius:8px;gap:18px;padding:10px 16px 8px;display:flex;box-shadow:inset 0 0 18px #ff5a1f1f,inset 0 1px 6px #0009}:root[data-theme=light] .lcd{background:#1a0f0a}.lcd>div{flex-direction:column;min-width:3.4em;display:flex}.lcd .label{color:#8a5a44;margin-bottom:2px}.lcd .v{font-family:var(--lcd);color:#ff7a3d;text-shadow:0 0 8px #ff6a33b3;white-space:nowrap;font-size:1.45rem;font-weight:700;line-height:1.1}.lcd .wide{min-width:7.5em}.controls{flex-wrap:wrap;align-items:flex-end;gap:12px 16px;display:flex}.controls select{width:100%;min-width:0}.controls .field:nth-child(2){min-width:210px}.vel-field{width:160px}.vel-field b{color:var(--text);font-weight:500;font-family:var(--mono);letter-spacing:0}.vel-field input{width:100%;accent-color:var(--accent);height:34px}.toggles{color:var(--text-2);flex-wrap:wrap;grid-column:1/-1;align-items:center;gap:8px 20px;font-size:.86rem;display:flex}.toggles label{align-items:center;gap:7px;display:inline-flex}.toggles .btn{margin-left:auto}@media (width<=900px){.console{grid-template-columns:1fr}.lcd{overflow-x:auto}}.body{align-items:stretch;gap:14px;display:flex}.wheels{border:1px solid var(--border);background:var(--bg);border-radius:10px;flex:none;grid-template-rows:1fr auto;grid-template-columns:repeat(2,38px);gap:10px;padding:12px;display:grid}.wheel-wrap{flex-direction:column;align-items:center;gap:6px;display:flex}.wheel-wrap .label{margin:0}.wheel{--pos:0;width:38px;min-height:120px;box-shadow:inset 0 2px 6px #000c, 0 0 0 1px var(--border-strong);cursor:ns-resize;touch-action:none;background:repeating-linear-gradient(#ffffff0d 0 2px,#0000 2px 7px),linear-gradient(90deg,#050506,#1b1b20 50%,#050506);border-radius:8px;flex:1;position:relative}.wheel .thumb{height:14px;left:3px;right:3px;top:calc(50% - 7px - var(--pos) * (50% - 10px));border-top:2px solid var(--accent);box-shadow:0 0 10px -2px var(--accent-glow);pointer-events:none;background:linear-gradient(#3a3a42,#1d1d22);border-radius:4px;position:absolute}.wheel.mod .thumb{top:calc(100% - 17px - var(--pos) * (100% - 20px))}.wheel.mod .fill{height:calc(var(--pos) * (100% - 6px));background:linear-gradient(to top, color-mix(in srgb, var(--accent) 30%, transparent), transparent);pointer-events:none;border-radius:4px;position:absolute;bottom:3px;left:3px;right:3px}.wheel:after{content:"";background:var(--text-3);width:3px;height:1px;position:absolute;top:50%;left:-5px}.wheel.mod:after{display:none}.wheel.active{box-shadow:inset 0 2px 6px #000c, 0 0 0 1px var(--accent)}.pedal{border:1px solid var(--border-strong);height:38px;color:var(--text-2);cursor:pointer;touch-action:none;background:linear-gradient(#26262c,#141418);border-radius:8px;grid-column:1/-1;justify-content:center;align-items:center;gap:8px;display:flex}:root[data-theme=light] .pedal{background:linear-gradient(#fbfaf7,#e9e7e1)}.pedal .label{margin:0}.pedal[aria-pressed=true]{border-color:var(--accent)}.keys{flex:1;min-width:0;display:flex}.piano{-webkit-user-select:none;user-select:none;touch-action:none;flex:1;height:clamp(150px,22vw,230px);display:flex;position:relative}.pk{cursor:pointer}.pk.white{background:linear-gradient(to bottom, #d9d7cf, var(--key-white) 12%);border:1px solid #0a0a0b;border-left-width:0;border-radius:0 0 6px 6px;flex:1;position:relative;box-shadow:inset 0 -6px #0000001f}.pk.white:first-child{border-left-width:1px}.pk.black{width:calc(100% / var(--whites) * .62);z-index:1;background:linear-gradient(#000,#222226 85%,#2c2c31);border-radius:0 0 4px 4px;height:62%;position:absolute;top:0;transform:translate(-50%);box-shadow:inset 0 -5px #ffffff14,0 2px 3px #0009}.pk.on{background:color-mix(in oklab, var(--accent) calc(55% + var(--v,1) * 45%), white);box-shadow:0 0 18px 2px var(--accent-glow);z-index:2}.pk.black.on{background:color-mix(in oklab, var(--accent) calc(55% + var(--v,1) * 45%), black);z-index:3}.pk.white.on{box-shadow:inset 0 -2px 0 #00000026, 0 0 18px 2px var(--accent-glow)}.k-label,.k-name{text-align:center;font-family:var(--mono);pointer-events:none;position:absolute;left:0;right:0}.k-label{color:#6e6c66;font-size:.72rem;font-weight:600;bottom:22px}.pk.black .k-label{color:#8d8d95;font-size:.62rem;bottom:8px}.k-name{color:#9a978f;font-size:.6rem;bottom:6px}.pk.middle-c .k-name{color:var(--accent-ink);font-weight:600}.pk.on .k-label,.pk.on .k-name{color:#1a0800}.mapping{color:var(--text-3);margin:14px 0 0;font-size:.8rem;line-height:2}.mapping kbd{color:var(--text-2)}@media (width<=640px){.instrument{padding:14px}.wheels{grid-template-columns:repeat(2,30px);gap:8px;padding:8px}.wheel{width:30px;min-height:100px}.wheel-wrap .label,.pedal .label{letter-spacing:.06em;font-size:.5rem}.k-label{bottom:18px}}