.mt .ports-row{flex-wrap:wrap;align-items:flex-end;gap:14px 20px;display:flex}.mt .ports-row .hint{color:var(--text-2);flex:1;align-self:center;min-width:240px;margin:0;font-size:.86rem}.mt .field{flex-direction:column;gap:2px;min-width:0;display:flex}.mt .field select{min-width:160px;max-width:100%;height:34px}.mt .field .label{margin-bottom:4px}.mt .field input[type=range]{accent-color:var(--accent);width:160px;height:34px}.mt .field .label b{color:var(--text);font-weight:500;font-family:var(--mono);letter-spacing:0}.mt .controls{flex-wrap:wrap;align-items:flex-end;gap:12px 16px;display:flex}.mt .controls .check{color:var(--text-2);align-items:center;gap:7px;height:34px;font-size:.86rem;display:inline-flex}.mt .actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.chips{flex-wrap:wrap;gap:6px;display:flex}.chip{border:1px solid var(--border-strong);background:var(--surface);height:30px;color:var(--text-2);font:inherit;cursor:pointer;white-space:nowrap;border-radius:99px;padding:0 11px;font-size:.82rem}.chip:hover{border-color:var(--text-3);color:var(--text)}.chip[aria-pressed=true]{border-color:var(--accent);color:var(--text);background:var(--accent-soft)}.chip .rn{font-family:var(--mono);color:var(--text-3);margin-left:6px;font-size:.74rem}.mt .lcd{color:#ff7a3d;background:#0a0605;border:1px solid #2a1810;border-radius:8px;padding:12px 18px 10px;box-shadow:inset 0 0 18px #ff5a1f1f,inset 0 1px 6px #0009}:root[data-theme=light] .mt .lcd{background:#1a0f0a}.mt .lcd .label{color:#8a5a44;margin-bottom:2px}.mt .lcd .v{font-family:var(--lcd);text-shadow:0 0 8px #ff6a33b3;white-space:nowrap;font-weight:700;line-height:1.1}.mt .keys{min-width:0;display:flex}.mt .mapping{color:var(--text-3);margin:12px 0 0;font-size:.8rem;line-height:2}.mt .mapping kbd{color:var(--text-2)}.mt .funnel{color:var(--text-3);margin:4px 0 0;font-size:.86rem}.mt .funnel a{color:var(--text-2)}.cn-top{grid-template-columns:minmax(0,1fr) auto;align-items:stretch;gap:16px 24px;margin-bottom:18px;display:grid}.cn-lcd{flex-direction:column;justify-content:center;min-height:112px;display:flex;overflow:hidden}.cn-lcd .v{font-size:clamp(2rem,6vw,3.4rem)}.cn-lcd .v.dim{opacity:.35}.cn-lcd .sub{font-family:var(--mono);color:#c8805e;min-height:1.4em;margin-top:6px;font-size:.9rem}.cn-top .controls{flex-direction:column;justify-content:flex-end;align-items:stretch}.cn .piano{height:clamp(130px,18vw,190px)}.cn-info{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;display:grid}@media (width<=1000px){.cn-info{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=560px){.cn-info{grid-template-columns:1fr}}.cn-info .panel h2{margin-bottom:12px}.cn-info p{color:var(--text-2);margin:0 0 10px;font-size:.92rem}.cn-info .fn{color:var(--text);margin-bottom:4px;font-weight:600}.tones{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.tones li{color:var(--text-2);align-items:baseline;gap:10px;font-size:.92rem;display:flex}.tones b{font-family:var(--mono);color:var(--text);min-width:2.6em;font-weight:600}.tones .bass{color:var(--accent-ink);font-size:.74rem;font-family:var(--mono)}@media (width<=720px){.cn-top{grid-template-columns:1fr}.cn-top .controls{flex-direction:row;align-items:flex-end}}.pg-setup{flex-direction:column;gap:16px;display:flex}.pg-setup .row{flex-wrap:wrap;align-items:flex-end;gap:14px 22px;display:flex}.prog{grid-template-columns:repeat(var(--bars,8), minmax(0, 1fr));gap:6px;margin:4px 0 14px;display:grid}@media (width<=760px){.prog{grid-template-columns:repeat(4,minmax(0,1fr))}}.slot{border:1px solid var(--border-strong);background:var(--bg);min-width:0;color:var(--text);font:inherit;text-align:left;cursor:pointer;border-radius:8px;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 10px 10px;display:flex;position:relative;overflow:hidden}.slot:hover{border-color:var(--text-3)}.slot b{white-space:nowrap;font-size:1.15rem;font-weight:600}.slot small{font-family:var(--mono);color:var(--text-3);white-space:nowrap;font-size:.74rem}.slot .bar{font-family:var(--mono);color:var(--text-3);font-size:.62rem;position:absolute;top:4px;right:7px}.slot[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft)}.slot.now{box-shadow:0 0 0 1px var(--accent), 0 0 16px -2px var(--accent-glow)}.slot.locked:after{content:"";background:var(--accent);border-radius:2px;height:2px;position:absolute;bottom:0;left:10px;right:10px}.pg-detail{border-top:1px solid var(--border);grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px;margin-top:18px;padding-top:18px;display:grid}@media (width<=760px){.pg-detail{grid-template-columns:1fr}}.pg-detail h3{margin:0 0 4px;font-size:1.05rem}.pg-detail .fn{color:var(--text-2);margin:0 0 12px;font-size:.92rem}.pg-detail .fn b{color:var(--text)}.alts{flex-direction:column;gap:6px;display:flex}.alt{border:1px solid var(--border);background:var(--bg);color:var(--text-2);font:inherit;text-align:left;cursor:pointer;border-radius:8px;grid-template-columns:4.6em 4.4em 1fr;align-items:baseline;gap:10px;padding:8px 10px;font-size:.86rem;display:grid}.alt:hover{border-color:var(--text-3);color:var(--text)}.alt b{color:var(--text);font-size:.98rem}.alt .rn{font-family:var(--mono);color:var(--text-3);font-size:.78rem}.alt .k{background:var(--text-3);border-radius:50%;width:7px;height:7px;margin-right:6px;display:inline-block}.alt .k.colorful{background:#c58cff}.alt .k.surprising{background:var(--neon)}.alt .k.expected{background:var(--ok)}.legend{color:var(--text-3);flex-wrap:wrap;gap:4px 14px;margin:8px 0 0;font-size:.78rem;display:flex}.legend .k{border-radius:50%;width:7px;height:7px;margin-right:5px;display:inline-block}.rg-grid{grid-template-columns:minmax(240px,340px) minmax(0,1fr);align-items:start;gap:24px;display:grid}@media (width<=820px){.rg-grid{grid-template-columns:1fr}.rg-svg{max-width:340px;margin:0 auto}}.rg-svg{width:100%;height:auto;display:block}.rg-svg .ring{fill:none;stroke:var(--border-strong);stroke-width:1px}.rg-svg .poly{fill:color-mix(in srgb, var(--c) 10%, transparent);stroke:var(--c);stroke-width:1.5px;stroke-linejoin:round;opacity:.85}.rg-svg .dot{fill:var(--surface-2);stroke:var(--border-strong);stroke-width:1px}.rg-svg .dot.on{fill:var(--c);stroke:none}.rg-svg .dot.now{filter:drop-shadow(0 0 6px var(--c));r:9}.rg-svg .hand{stroke:var(--accent);stroke-width:1.5px;stroke-linecap:round;opacity:.7}.rg-svg .hub{fill:var(--accent)}.rg-ratio{text-align:center;font-family:var(--mono);color:var(--text);margin:8px 0 0;font-size:1.05rem}.rg-ratio .label{margin-bottom:0}.rings{flex-direction:column;gap:8px;display:flex}.ring-row{--c:var(--accent);border:1px solid var(--border);border-left:3px solid var(--c);background:var(--bg);border-radius:8px;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 12px;display:flex}.ring-row.muted{opacity:.5}.ring-row select{height:30px}.ring-row .e{font-family:var(--mono);color:var(--text-3);min-width:4.6em;font-size:.8rem}.stepper{color:var(--text-3);align-items:center;gap:4px;font-size:.8rem;display:inline-flex}.stepper button{border:1px solid var(--border-strong);background:var(--surface);width:26px;height:26px;color:var(--text);font:inherit;cursor:pointer;border-radius:6px;line-height:1}.stepper button:hover{border-color:var(--text-3)}.stepper output{font-family:var(--mono);color:var(--text);text-align:center;min-width:1.6em}.ring-row .end{gap:6px;margin-left:auto;display:flex}.ring-row .end button[aria-pressed=true]{border-color:var(--accent);color:var(--accent-ink)}.lanes{flex-direction:column;gap:6px;margin-top:18px;display:flex}.lane{--c:var(--accent);background:var(--bg);border:1px solid var(--border);border-radius:5px;height:22px;position:relative;overflow:hidden}.lane span{background:var(--surface-2);border-radius:3px;position:absolute;top:3px;bottom:3px}.lane span.on{background:var(--c)}.lane .phase{background:var(--text);opacity:.7;width:2px;position:absolute;top:0;bottom:0}.lane.muted{opacity:.45}.rg-learn{color:var(--text-2);max-width:60em;margin:0 0 16px;font-size:.95rem}.rg-learn b{color:var(--text)}
