/* Instrument styles are scoped so navigation and other tools keep their shared layout. */
#mv-counter-note {display:block;font:10px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;opacity:.72;margin-top:12px;white-space:nowrap}
@media(max-width:600px) {#mv-section {max-width:75px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#mv-counter-note {font-size:8px}}
.chord-arcade .arrangement-strip {display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:12px 20px;margin:0 0 18px;padding:14px 18px;border:1px solid var(--line);border-radius:9px;background:var(--panel)}
.chord-arcade .arrangement-strip button,.chord-arcade .counter-description button {font-size:12px;font-weight:600;padding:7px 10px;border:1px solid var(--line);border-radius:5px;white-space:nowrap}
.chord-arcade .arrangement-strip button[aria-pressed="true"],.chord-arcade .counter-description button[aria-pressed="true"] {color:var(--accent);border-color:var(--accent);background:var(--accent-dim)}
.chord-arcade .section-readout {display:flex;gap:12px;align-items:baseline;white-space:nowrap}
.chord-arcade .section-readout strong {font-size:13px;font-weight:600}
.chord-arcade .section-readout span {font-size:10px;color:var(--muted)}
.chord-arcade .section-path {display:flex;justify-content:flex-end;gap:14px;list-style:none;padding:0;margin:0;color:var(--muted);font-size:10px}
.chord-arcade .section-path li {padding:4px 0;border-bottom:2px solid transparent}
.chord-arcade .section-path .is-current {color:var(--accent);border-color:var(--accent)}
.chord-arcade #section-progress {grid-column:1/-1;display:block;width:100%;height:2px;border:0;appearance:none;background:var(--line);color:var(--accent)}
.chord-arcade #section-progress::-webkit-progress-bar {background:var(--line)}
.chord-arcade #section-progress::-webkit-progress-value {background:var(--accent)}
.chord-arcade #section-progress::-moz-progress-bar {background:var(--accent)}
.chord-arcade .counter-strip {display:grid;grid-template-columns:1fr 1fr minmax(160px,230px);align-items:center;gap:20px;margin:0 0 18px;padding:16px 22px;border:1px solid var(--line);border-radius:9px;background:var(--panel)}
.chord-arcade .counter-description p {font-size:11px;margin:7px 0 0;color:var(--muted)}
.chord-arcade .counter-monitor {display:flex;flex-direction:column;gap:5px;font-size:11px;color:var(--orange)}
.chord-arcade .counter-monitor small {font:9px var(--mono);color:var(--muted)}
.chord-arcade .counter-level.control {margin:0;padding:0}
.chord-arcade .counter-strip.is-muted .counter-monitor {color:var(--muted)}
@media(max-width:900px) {
  .chord-arcade .arrangement-strip {grid-template-columns:auto 1fr}
  .chord-arcade .section-path {grid-column:1/-1;justify-content:space-between;gap:8px}
}
@media(max-width:600px) {
  .chord-arcade .arrangement-strip {gap:10px;padding:12px}
  .chord-arcade .section-readout {justify-content:flex-end;gap:8px;flex-wrap:wrap}
  .chord-arcade .section-readout strong {font-size:12px}
  .chord-arcade .counter-strip {grid-template-columns:1fr;gap:12px;padding:15px}
  .chord-arcade .counter-monitor {flex-direction:row;justify-content:space-between;gap:10px}
}
.chord-arcade {
  color-scheme: light;

  --bg: var(--color-bg-primary);

  --panel: var(--color-bg-white);

  --panel-deep: var(--color-bg-secondary);

  --line: var(--color-border);

  --muted: var(--color-text-secondary);

  --text: var(--color-text-primary);

  --accent: var(--color-teal-dark);

  --accent-dim: #ccfbf1;

  --orange: #b45309;

  --lavender: #6d28d9;

  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --sans: var(--font-base);

  font: 14px/1.6 var(--sans);

}

.chord-arcade * {box-sizing:border-box}
.chord-arcade button,
.chord-arcade input {font:inherit}
.chord-arcade button,
.chord-arcade a,
.chord-arcade input {-webkit-tap-highlight-color:transparent}
.chord-arcade button {cursor:pointer}
.chord-arcade button {border:0;
color:inherit;
background:none}
.chord-arcade button:disabled {cursor:not-allowed;
opacity:.38}
.chord-arcade button:focus-visible,
.chord-arcade a:focus-visible,
.chord-arcade input:focus-visible {outline:2px solid var(--accent);
outline-offset:5px}
.chord-arcade a {color:inherit;
text-decoration:none}
.chord-arcade svg {display:block}
.chord-arcade button {touch-action:manipulation}
.chord-arcade .app-shell {max-width:1320px;
margin:0 auto;
padding:0 42px}
.chord-arcade .site-header {height:91px;
display:flex;
align-items:center;
justify-content:space-between;
border-bottom:1px solid var(--line)}
.chord-arcade .brand {display:flex;
align-items:center;
gap:12px;
font-weight:750;
font-size:17px;
letter-spacing:1.15px;
line-height:1.4}
.chord-arcade .brand-mark {display:flex;
align-items:flex-end;
gap:4px;
height:32px;
width:35px}
.chord-arcade .brand-mark i {width:6px;
background:var(--accent);
height:20px}
.chord-arcade .brand-mark i:nth-child(2) {height:29px}
.chord-arcade .brand-mark i:nth-child(3) {height:35px}
.chord-arcade .brand-mark i:nth-child(4) {height:25px}
.chord-arcade .brand-sub {display:block;
color:var(--muted);
font:8px/1.8 var(--mono);
letter-spacing:1.3px}
.chord-arcade .header-right {display:flex;
align-items:center;
gap:25px}
.chord-arcade .local-label {font:10px var(--mono);
color:var(--muted);
letter-spacing:1px;
display:flex;
align-items:center;
gap:8px}
.chord-arcade .local-label>span {height:5px;
width:5px;
background:var(--accent);
border-radius:50%}
.chord-arcade .icon-button {display:grid;
place-items:center;
width:31px;
height:31px;
border:1px solid var(--line);
border-radius:50%;
font:15px var(--mono);
color:var(--muted)}
.chord-arcade .icon-button:hover {border-color:var(--accent);
color:var(--accent)}
.chord-arcade .hero {display:flex;
align-items:flex-end;
justify-content:space-between;
padding:32px 0 29px;
gap:24px}
.chord-arcade .eyebrow {display:flex;
align-items:center;
gap:8px;
font:9px var(--mono);
letter-spacing:1.65px;
color:var(--muted);
margin-bottom:13px}
.chord-arcade .tiny-cross {color:var(--accent);
font-size:19px}
.chord-arcade .hero h1 {margin:0;
font-size:clamp(34px,4.85vw,65px);
font-weight:800;
line-height:1.06;
letter-spacing:-3.4px;
white-space:nowrap}
.chord-arcade .hero h1 em {font-style:normal;
color:var(--accent)}
.chord-arcade .hero p {font-size:14px;
line-height:1.9;
margin:0 0 2px;
color:var(--text)}
.chord-arcade .hero p span {font-size:11px;
color:var(--muted)}
.chord-arcade .micro {font-family:var(--mono);
font-size:9px;
font-weight:400;
letter-spacing:1.05px;
color:var(--muted)}
.chord-arcade .presets {display:grid;
grid-template-columns:139px repeat(4,1fr);
gap:8px;
margin-bottom:19px}
.chord-arcade .preset-heading {display:flex;
flex-direction:column;
justify-content:center;
gap:4px}
.chord-arcade .preset-heading .micro {font-size:8px;
letter-spacing:.8px}
.chord-arcade .preset-heading>span:last-child {font-size:11px;
color:var(--muted)}
.chord-arcade .preset {display:flex;
align-items:center;
gap:10px;
padding:12px 11px;
text-align:left;
border:1px solid var(--line);
border-radius:7px;
transition:border-color .2s,background .2s;
position:relative;
min-width:0}
.chord-arcade .preset:hover {border-color:var(--line);
background:var(--panel-deep)}
.chord-arcade .preset.active {border-color:var(--line);
background:var(--panel-deep)}
.chord-arcade .preset-icon {font-size:25px;
line-height:1;
color:var(--muted);
width:23px}
.chord-arcade .preset.active .preset-icon {color:var(--accent)}
.chord-arcade .preset b {display:block;
font:10px var(--mono);
letter-spacing:.5px;
white-space:nowrap;
font-weight:650}
.chord-arcade .preset small {display:block;
color:var(--muted);
font-size:9px;
margin-top:3px;
white-space:nowrap}
.chord-arcade .preset-index {font:8px var(--mono);
color:var(--muted);
position:absolute;
right:7px;
top:5px}
.chord-arcade .preset.active b {color:var(--accent)}
.chord-arcade .transport {display:flex;
align-items:center;
gap:22px;
background:var(--panel-deep);
border:1px solid var(--line);
border-radius:9px;
padding:13px 16px;
margin-bottom:19px;
position:sticky;
top:8px;
z-index:15;
box-shadow:none}
.chord-arcade .play-button {display:flex;
justify-content:center;
align-items:center;
gap:13px;
min-width:143px;
height:54px;
background:var(--accent);
color:var(--muted);
border-radius:5px;
font:600 18px var(--mono);
letter-spacing:1.3px;
box-shadow:none;
transition:background .15s,transform .15s}
.chord-arcade .play-button:hover {background:var(--panel-deep);
transform:translateY(-1px)}
.chord-arcade .play-button:active {transform:translateY(1px);
box-shadow:none}
.chord-arcade .play-button.playing {background:var(--panel-deep)}
.chord-arcade .play-glyph {font-size:17px}
.chord-arcade .tempo {padding:0 22px 0 0;
border-right:1px solid var(--line);
display:flex;
gap:3px;
flex-direction:column;
align-items:center}
.chord-arcade .tempo>.micro {font-size:8px}
.chord-arcade .tempo-value {display:flex;
align-items:center;
gap:5px}
.chord-arcade .tempo-value input {width:59px;
color:var(--text);
font:26px/1.2 var(--mono);
background:none;
border:0;
text-align:center;
padding:0;
appearance:textfield;
-moz-appearance:textfield}
.chord-arcade .tempo-value input::-webkit-inner-spin-button {display:none}
.chord-arcade .step-button {font:14px var(--mono);
color:var(--muted);
padding:4px;
min-width:26px;
min-height:30px;
border-radius:3px}
.chord-arcade .step-button:hover {background:var(--panel-deep);
color:var(--accent)}
.chord-arcade .tempo-value>.micro {font-size:8px;
margin-left:2px}
.chord-arcade .transport-status {display:flex;
align-items:center;
gap:9px;
flex:1}
.chord-arcade .status-dot {background:var(--panel-deep);
width:6px;
height:6px;
border-radius:50%;
flex:none}
.chord-arcade .status-dot.on {background:var(--accent);
box-shadow:none}
.chord-arcade .transport-status>div>span {display:block;
font:10px var(--mono);
letter-spacing:1px;
color:var(--muted)}
.chord-arcade .transport-status small {font-size:10px;
color:var(--muted);
display:block;
margin-top:4px}
.chord-arcade .master-volume {width:154px}
.chord-arcade .master-volume label {display:flex;
align-items:center;
gap:7px;
line-height:1}
.chord-arcade .master-volume label svg {width:15px;
height:15px;
stroke:var(--muted);
fill:none;
stroke-width:1.4}
.chord-arcade .master-volume label output {margin-left:auto;
font:11px var(--mono)}
.chord-arcade .master-volume input {margin:5px 0 0}
.chord-arcade .main-grid {display:grid;
grid-template-columns:minmax(0,1.85fr) minmax(310px,1fr);
gap:18px}
.chord-arcade .panel {border:1px solid var(--line);
background:var(--panel);
border-radius:9px;
overflow:hidden}
.chord-arcade .panel-heading {display:flex;
align-items:center;
justify-content:space-between;
border-bottom:1px solid var(--line);
height:48px;
padding:0 22px;
gap:12px}
.chord-arcade .panel-heading h2 {font:11px var(--mono);
letter-spacing:1.2px;
font-weight:500;
margin:0;
white-space:nowrap}
.chord-arcade .panel-number {color:var(--muted);
font-size:9px;
letter-spacing:0;
margin-right:12px}
.chord-arcade .panel-jp {color:var(--muted);
font-size:9px;
white-space:nowrap}
.chord-arcade .performance {background:linear-gradient(130deg,var(--panel-deep) 0%,var(--panel-deep) 56%)}
.chord-arcade .chord-display {display:grid;
grid-template-columns:44% 56%;
padding:22px 23px 18px;
min-height:189px}
.chord-arcade .now-tag {display:flex;
align-items:center;
gap:6px;
color:var(--muted);
font:8px var(--mono);
letter-spacing:1.05px}
.chord-arcade .now-tag>span:first-child {width:5px;
height:5px;
border-radius:50%;
background:var(--accent)}
.chord-arcade .chord-name {color:var(--accent);
font:500 64px/1.2 var(--mono);
letter-spacing:-4px;
white-space:nowrap;
margin:3px 0 3px}
.chord-arcade .chord-name span {font-size:.48em;
letter-spacing:-1.7px}
.chord-arcade .key-row {display:flex;
align-items:center;
gap:9px;
min-height:24px;
flex-wrap:wrap}
.chord-arcade .key-badge {background:var(--panel-deep);
color:var(--muted);
font:8px var(--mono);
letter-spacing:.8px;
border-radius:3px;
padding:4px 6px;
white-space:nowrap}
.chord-arcade .relation {color:var(--muted);
font-size:9px;
max-width:160px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap}
.chord-arcade .note-names {font:9px var(--mono);
letter-spacing:.8px;
color:var(--muted);
margin-top:11px}
.chord-arcade .scope-wrap {position:relative;
align-self:stretch;
display:flex;
flex-direction:column;
padding-left:10px;
min-width:0}
.chord-arcade .scope-caption {display:flex;
justify-content:space-between;
align-items:center;
gap:8px}
.chord-arcade .scope-caption .micro {font-size:8px;
letter-spacing:1px}
.chord-arcade .scope-live {font:7px var(--mono);
letter-spacing:.5px;
color:var(--muted);
white-space:nowrap}
.chord-arcade .scope-live i {display:inline-block;
width:4px;
height:4px;
margin:0 3px 1px 0;
background:var(--accent);
border-radius:50%}
.chord-arcade #voice-canvas {display:block;
width:100%;
height:120px;
margin-top:8px}
.chord-arcade .scope-bottom {display:flex;
justify-content:space-around;
font:7px var(--mono);
letter-spacing:1.3px;
color:var(--muted);
margin-top:3px}
.chord-arcade .scope-bottom span:nth-child(2) {color:var(--accent)}
.chord-arcade .progression {display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
margin:0 22px 19px;
border:1px solid var(--line);
border-radius:5px;
overflow:hidden}
.chord-arcade .chord-cell {position:relative;
padding:10px 12px 11px;
border-right:1px solid var(--line);
background:var(--panel-deep);
min-width:0}
.chord-arcade .chord-cell:last-child {border-right:0}
.chord-arcade .chord-cell.current {background:var(--panel-deep);
box-shadow:inset 0 -2px var(--accent)}
.chord-arcade .chord-cell .cell-caption {display:flex;
justify-content:space-between;
font:7px var(--mono);
letter-spacing:1px;
color:var(--muted)}
.chord-arcade .chord-cell.current .cell-caption {color:var(--accent)}
.chord-arcade .chord-cell .cell-chord {font:19px/1.2 var(--mono);
letter-spacing:-.8px;
margin-top:8px;
white-space:nowrap}
.chord-arcade .cell-chord span {font-size:.7em;
letter-spacing:-.6px}
.chord-arcade .chord-cell.current .cell-chord {color:var(--accent)}
.chord-arcade .cell-key {font:7px var(--mono);
color:var(--muted);
margin-top:5px;
white-space:nowrap}
.chord-arcade .piano-and-meter {display:flex;
gap:20px;
margin:0 22px 18px;
align-items:stretch;
height:48px}
.chord-arcade .piano {display:flex;
position:relative;
gap:2px;
flex:1;
min-width:0}
.chord-arcade .piano-key {position:relative;
flex:1;
border-radius:0 0 3px 3px;
background:var(--panel-deep);
box-shadow:none}
.chord-arcade .piano-key.black {position:absolute;
width:calc(100% / 30);
height:61%;
top:0;
background:var(--panel-deep);
z-index:2;
transform:translateX(-50%);
box-shadow:none;
border:1px solid var(--line)}
.chord-arcade .piano-key.active {background:var(--accent);
box-shadow:none}
.chord-arcade .piano-key.black.active {background:var(--panel-deep);
box-shadow:none}
.chord-arcade .piano-key.root-note.active {background:var(--orange)}
.chord-arcade .piano-key>span {position:absolute;
bottom:4px;
left:0;
right:0;
text-align:center;
font:7px var(--mono);
color:var(--muted)}
.chord-arcade .out-meter {display:flex;
gap:7px;
align-items:center}
.chord-arcade .out-meter>.micro {writing-mode:vertical-rl;
font-size:7px}
.chord-arcade .meter-track {height:48px;
width:7px;
background:var(--panel-deep);
border-radius:2px;
display:flex;
align-items:flex-end;
overflow:hidden}
.chord-arcade .meter-track>span {width:100%;
height:0;
background:var(--accent);
transition:height .08s linear}
.chord-arcade .sequencer-row {display:flex;
align-items:center;
gap:12px;
padding:0 22px 19px}
.chord-arcade .sequencer-row>.micro {font-size:8px}
.chord-arcade .steps {display:flex;
gap:4px;
flex:1}
.chord-arcade .step {height:6px;
border-radius:1px;
flex:1;
background:var(--panel-deep);
transition:background .08s}
.chord-arcade .step:nth-child(4n + 1) {background:var(--panel-deep)}
.chord-arcade .step.active {background:var(--accent);
box-shadow:none}
.chord-arcade .step.snare {background:var(--panel-deep)}
.chord-arcade .beat-display {min-width:26px;
white-space:nowrap;
text-align:right}
.chord-arcade .harmony-panel {padding-bottom:17px}
.chord-arcade .harmony-panel .control {margin:16px 22px 0}
.chord-arcade .control label {display:flex;
align-items:center;
justify-content:space-between;
font-size:12px;
gap:8px}
.chord-arcade .control label small {font:7px var(--mono);
letter-spacing:.8px;
color:var(--muted);
margin-left:7px}
.chord-arcade .control output {font:12px var(--mono);
color:var(--accent)}
.chord-arcade input[type=range] {appearance:none;
-webkit-appearance:none;
width:100%;
height:26px;
background:transparent;
display:block;
cursor:pointer;
--value:50%;
margin:2px 0;
touch-action:pan-y}
.chord-arcade input[type=range]::-webkit-slider-runnable-track {height:3px;
background:linear-gradient(to right,var(--accent) var(--value),var(--line) var(--value));
border-radius:2px}
.chord-arcade input[type=range]::-moz-range-track {height:3px;
background:var(--panel-deep);
border-radius:2px}
.chord-arcade input[type=range]::-moz-range-progress {height:3px;
background:var(--panel-deep)}
.chord-arcade input[type=range]::-webkit-slider-thumb {-webkit-appearance:none;
height:12px;
width:12px;
background:var(--accent);
border:2px solid var(--line);
border-radius:50%;
margin-top:-4.5px;
box-shadow:none}
.chord-arcade input[type=range]::-moz-range-thumb {height:9px;
width:9px;
background:var(--accent);
border:2px solid var(--line);
border-radius:50%;
box-shadow:none}
.chord-arcade .range-ends {display:flex;
justify-content:space-between;
color:var(--muted);
font-size:8px;
line-height:1.2;
margin-top:-1px}
.chord-arcade .chord-speed {margin:17px 22px 0}
.chord-arcade .chord-speed>.micro {display:block;
font-size:8px;
margin-bottom:7px}
.chord-arcade .chord-speed>.micro>span {font-family:var(--sans);
letter-spacing:0;
margin-left:5px;
font-size:8px}
.chord-arcade .segmented {display:flex;
border:1px solid var(--line);
background:var(--panel-deep);
border-radius:4px;
overflow:hidden;
padding:2px;
gap:2px}
.chord-arcade .segmented button {flex:1;
font-size:9px;
padding:5px 3px;
border-radius:2px;
min-height:29px;
color:var(--muted)}
.chord-arcade .segmented button:hover {color:var(--text)}
.chord-arcade .segmented button.selected {color:var(--accent);
background:var(--panel-deep)}
.chord-arcade .harmony-actions {display:flex;
gap:8px;
margin:12px 22px 0}
.chord-arcade .secondary-button {display:flex;
align-items:center;
justify-content:center;
gap:7px;
background:var(--panel-deep);
border:1px solid var(--line);
border-radius:4px;
padding:9px 12px;
font:10px var(--mono);
letter-spacing:.5px;
min-height:37px}
.chord-arcade .secondary-button:hover {background:var(--panel-deep);
border-color:var(--line)}
.chord-arcade .secondary-button>span {font-size:15px}
.chord-arcade .secondary-button small {font:8px var(--sans);
color:var(--muted);
letter-spacing:0}
.chord-arcade .harmony-actions .secondary-button {flex:1;
padding:7px 5px;
gap:4px;
font-size:9px}
.chord-arcade .harmony-actions .secondary-button>span {font-size:13px}
.chord-arcade .harmony-actions .secondary-button small {font-size:7px}
.chord-arcade .secondary-button.held {color:var(--accent);
background:var(--panel-deep);
border-color:var(--line)}
.chord-arcade .warp-button {color:var(--orange)}
.chord-arcade .lower-grid {display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
margin-top:18px}
.chord-arcade .wave-selector {display:flex;
margin:20px 22px 17px;
gap:8px}
.chord-arcade .wave-selector button {flex:1;
display:flex;
gap:9px;
align-items:center;
border:1px solid var(--line);
border-radius:4px;
padding:11px 8px;
min-width:0}
.chord-arcade .wave-selector button.selected {background:var(--panel-deep);
border-color:var(--line);
color:var(--accent)}
.chord-arcade .wave-selector svg {width:36px;
height:17px;
fill:none;
stroke:currentColor;
stroke-width:1.4;
flex:none}
.chord-arcade .wave-selector span {font:9px var(--mono);
line-height:1.4;
white-space:nowrap}
.chord-arcade .wave-selector small {display:block;
font:8px var(--sans);
color:var(--muted)}
.chord-arcade .sound-controls {display:grid;
grid-template-columns:1fr 1fr;
gap:9px 25px;
margin:0 22px 20px}
.chord-arcade .sound-controls .control label {font-size:11px}
.chord-arcade .sound-controls .control output {font-size:11px}
.chord-arcade .sound-controls .control small {font-size:7px}
.chord-arcade .rhythm-top {display:grid;
grid-template-columns:1fr 1fr;
gap:25px;
margin:20px 22px 13px}
.chord-arcade .rhythm-top .control label {font-size:11px}
.chord-arcade .mix-label {display:flex;
gap:9px;
align-items:center;
margin:0 22px 12px;
padding-top:12px;
border-top:1px solid var(--line)}
.chord-arcade .mix-label>span:nth-child(2) {font-size:8px;
color:var(--muted)}
.chord-arcade .mix-label>button {margin-left:auto;
font-size:9px;
color:var(--muted);
padding:3px 0 3px 8px}
.chord-arcade .mix-label>button:hover {color:var(--accent)}
.chord-arcade .mixer {display:grid;
grid-template-columns:1fr 1fr;
gap:8px 18px;
margin:0 22px 20px}
.chord-arcade .mix-channel {display:flex;
align-items:center;
gap:9px}
.chord-arcade .mute-button {min-width:48px;
text-align:left;
padding:4px 0;
font:8px var(--mono);
letter-spacing:.4px;
color:var(--muted)}
.chord-arcade .mute-button::before {content:"";
display:inline-block;
width:4px;
height:4px;
border-radius:50%;
background:var(--accent);
margin:0 6px 1px 0}
.chord-arcade .mute-button.muted {color:var(--muted);
text-decoration:line-through}
.chord-arcade .mute-button.muted::before {background:var(--panel-deep)}
.chord-arcade .mix-channel input {min-width:20px}
.chord-arcade .mix-channel output {font:8px var(--mono);
min-width:15px;
text-align:right;
color:var(--muted)}
.chord-arcade .mix-channel input::-webkit-slider-thumb {width:9px;
height:9px;
margin-top:-3px;
border-width:1px}
.chord-arcade .session-tools {display:flex;
justify-content:space-between;
align-items:center;
padding:25px 0 26px;
gap:20px}
.chord-arcade .session-note {display:flex;
gap:13px;
align-items:center}
.chord-arcade .session-note>.tiny-cross {font-size:30px}
.chord-arcade .session-note p {font-size:11px;
margin:0;
line-height:1.6;
color:var(--muted)}
.chord-arcade .session-note small {display:block;
font-size:9px;
color:var(--muted)}
.chord-arcade .session-actions {display:flex;
align-items:center;
gap:20px}
.chord-arcade .text-button {font-size:11px;
color:var(--muted);
display:flex;
align-items:center;
gap:7px}
.chord-arcade .text-button>span {font-size:20px}
.chord-arcade .text-button:hover {color:var(--accent)}
.chord-arcade .chord-footer {border-top:1px solid var(--line);
padding:22px 0 30px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
font:8px var(--mono);
letter-spacing:.6px;
color:var(--muted)}
.chord-arcade .footer-divider {padding:0 10px;
color:var(--muted)}
.chord-arcade .footer-link {font:9px var(--sans);
color:var(--muted);
padding:5px}
.chord-arcade .footer-link:hover {color:var(--accent)}
.chord-arcade .footer-key {font-size:7px}
.chord-arcade kbd {font:7px var(--mono);
border:1px solid var(--line);
padding:3px 6px;
margin-right:5px;
border-radius:2px}
.chord-arcade .toast {position:fixed;
bottom:25px;
left:50%;
transform:translate(-50%,12px);
background:var(--panel-deep);
color:var(--muted);
font-size:11px;
border-radius:5px;
padding:11px 18px;
z-index:50;
opacity:0;
pointer-events:none;
transition:opacity .2s,transform .2s;
box-shadow:none;
text-align:center;
max-width:calc(100vw - 32px);
width:max-content}
.chord-arcade .toast.show {opacity:1;
transform:translate(-50%,0)}
.chord-arcade dialog {background:var(--panel-deep);
color:var(--text);
border:1px solid var(--line);
border-radius:12px;
padding:28px 31px;
max-width:520px;
width:calc(100% - 32px);
max-height:85dvh;
box-shadow:none}
.chord-arcade dialog::backdrop {background:var(--panel-deep);
backdrop-filter:blur(5px)}
.chord-arcade .dialog-top {display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:10px}
.chord-arcade .dialog-top>.micro {font-size:9px}
.chord-arcade .dialog-close {font-size:21px}
.chord-arcade dialog h2 {font-size:27px;
line-height:1.45;
letter-spacing:-.9px;
margin:12px 0 17px}
.chord-arcade dialog p {font-size:12px;
line-height:1.9;
color:var(--muted)}
.chord-arcade dialog dl {display:grid;
grid-template-columns:88px 1fr;
gap:14px 8px;
margin:24px 0}
.chord-arcade dialog dt {font-size:11px;
color:var(--accent)}
.chord-arcade dialog dd {margin:0;
font-size:11px;
color:var(--muted);
line-height:1.8}
.chord-arcade dialog p.dialog-note {font-size:10px;
color:var(--muted);
margin-top:24px}
.chord-arcade .reference-links {margin-top:22px;
border-top:1px solid var(--line)}
.chord-arcade .reference-links>a {padding:12px 1px;
border-bottom:1px solid var(--line);
display:flex;
justify-content:space-between;
align-items:center;
font:12px var(--mono);
color:var(--accent)}
.chord-arcade .reference-links small {display:block;
font:9px var(--sans);
color:var(--muted);
margin-top:5px}
.chord-arcade .noscript {position:fixed;
bottom:20px;
left:20px;
padding:20px;
background:var(--panel-deep);
color:var(--muted);
z-index:100}

@media(min-width:1440px){.chord-arcade .app-shell {max-width:1380px;
padding:0 55px}
.chord-arcade .hero {padding-top:38px;
padding-bottom:32px}
.chord-arcade .hero h1 {font-size:69px}
.chord-arcade .chord-display {min-height:194px}
.chord-arcade .preset {padding:13px 17px}
.chord-arcade .chord-name {font-size:72px}
}

@media(max-width:1100px){.chord-arcade .app-shell {padding:0 25px}
.chord-arcade .hero {display:block;
padding-top:25px}
.chord-arcade .hero h1 {font-size:53px}
.chord-arcade .hero p {margin-top:13px;
font-size:12px;
line-height:1.6}
.chord-arcade .hero p br {display:none}
.chord-arcade .hero p span {margin-left:10px;
font-size:11px}
.chord-arcade .presets {grid-template-columns:repeat(4,1fr)}
.chord-arcade .preset-heading {display:none}
.chord-arcade .transport {gap:16px}
.chord-arcade .transport-status small {font-size:9px}
.chord-arcade .transport-status>div>span {font-size:8px}
.chord-arcade .master-volume {width:125px}
.chord-arcade .main-grid {grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);
gap:14px}
.chord-arcade .panel-heading {padding:0 17px}
.chord-arcade .chord-display {padding:24px 17px 19px;
grid-template-columns:47% 53%;
min-height:197px}
.chord-arcade .chord-name {font-size:57px}
.chord-arcade .scope-caption .micro {font-size:7px}
.chord-arcade .scope-live {display:none}
.chord-arcade .relation {max-width:112px;
font-size:8px}
.chord-arcade .key-badge {font-size:7px}
.chord-arcade .progression {margin-left:17px;
margin-right:17px}
.chord-arcade .chord-cell {padding:10px 8px}
.chord-arcade .cell-chord {font-size:17px!important}
.chord-arcade .piano-and-meter {margin-left:17px;
margin-right:17px;
gap:13px}
.chord-arcade .sequencer-row {padding-left:17px;
padding-right:17px}
.chord-arcade .harmony-panel .control {margin-left:17px;
margin-right:17px}
.chord-arcade .chord-speed {margin-left:17px;
margin-right:17px}
.chord-arcade .harmony-actions {margin-left:17px;
margin-right:17px}
.chord-arcade .lower-grid {gap:14px}
.chord-arcade .wave-selector {margin-left:17px;
margin-right:17px;
gap:6px}
.chord-arcade .wave-selector button {padding:10px 6px;
gap:5px}
.chord-arcade .wave-selector svg {width:28px}
.chord-arcade .sound-controls,
.chord-arcade .rhythm-top {margin-left:17px;
margin-right:17px;
gap:10px 17px}
.chord-arcade .mix-label,
.chord-arcade .mixer {margin-left:17px;
margin-right:17px}
.chord-arcade .control label small {margin-left:4px}
.chord-arcade .mixer {gap:9px 10px}
.chord-arcade .mix-channel {gap:6px}
.chord-arcade .footer-key {display:none}
}

@media(max-width:800px){.chord-arcade .app-shell {padding:0 20px}
.chord-arcade .site-header {height:76px}
.chord-arcade .header-right {gap:16px}
.chord-arcade .local-label {font-size:8px}
.chord-arcade .hero {padding:26px 0 22px}
.chord-arcade .hero h1 {font-size:54px;
letter-spacing:-3px}
.chord-arcade .hero p {margin-top:13px}
.chord-arcade .eyebrow {font-size:8px;
letter-spacing:1px}
.chord-arcade .main-grid {grid-template-columns:1fr}
.chord-arcade .performance .panel-heading {padding:0 22px}
.chord-arcade .chord-display {grid-template-columns:43% 57%;
padding:25px 22px 20px;
min-height:187px}
.chord-arcade .chord-name {font-size:69px}
.chord-arcade .scope-live {display:block}
.chord-arcade .scope-caption .micro {font-size:8px}
.chord-arcade .progression {margin-left:22px;
margin-right:22px}
.chord-arcade .cell-chord {font-size:23px!important}
.chord-arcade .piano-and-meter {margin-left:22px;
margin-right:22px;
height:52px}
.chord-arcade .sequencer-row {padding-left:22px;
padding-right:22px;
padding-bottom:23px}
.chord-arcade .harmony-panel {padding-bottom:18px;
display:grid;
grid-template-columns:1fr 1fr 1fr}
.chord-arcade .harmony-panel>.panel-heading {grid-column:1/-1}
.chord-arcade .harmony-panel .control {margin:20px 14px 0}
.chord-arcade .harmony-panel .control label {font-size:11px}
.chord-arcade .harmony-panel .control small {display:none}
.chord-arcade .harmony-panel .range-ends {font-size:7px}
.chord-arcade .chord-speed {grid-column:1/2;
margin:17px 14px 0}
.chord-arcade .chord-speed>.micro>span {display:none}
.chord-arcade .harmony-actions {grid-column:2/4;
margin:17px 14px 0;
align-items:flex-end;
gap:10px}
.chord-arcade .harmony-actions .secondary-button {height:35px;
font-size:10px}
.chord-arcade .harmony-actions .secondary-button small {font-size:8px}
.chord-arcade .transport-status {display:none}
.chord-arcade .transport {gap:20px}
.chord-arcade .tempo {flex:1;
border-right:0;
padding:0;
flex-direction:row;
gap:8px;
justify-content:center}
.chord-arcade .master-volume {width:160px}
.chord-arcade .lower-grid {gap:14px}
.chord-arcade .panel-jp {font-size:8px}
.chord-arcade .wave-selector {gap:5px}
.chord-arcade .wave-selector button {flex-direction:column;
gap:6px}
.chord-arcade .wave-selector span {text-align:center}
.chord-arcade .wave-selector small {margin-top:1px}
.chord-arcade .sound-controls {gap:11px 15px}
.chord-arcade .sound-controls .control label small {display:none}
.chord-arcade .rhythm-top .control label small {display:none}
.chord-arcade .mix-label {gap:6px}
.chord-arcade .mix-label>span:nth-child(2) {display:none}
.chord-arcade .mixer {grid-template-columns:1fr;
gap:2px}
.chord-arcade .mix-channel input {height:22px}
.chord-arcade .rhythm-panel .panel-heading {padding:0 14px}
.chord-arcade .rhythm-top {margin-top:20px;
margin-bottom:8px}
.chord-arcade .mix-label {padding-top:10px;
margin-bottom:5px}
.chord-arcade .sound-controls {margin-bottom:14px}
.chord-arcade .preset b {font-size:9px}
.chord-arcade .preset small {font-size:8px}
.chord-arcade .preset-icon {font-size:23px}
.chord-arcade .preset {padding:12px 9px;
gap:7px}
}

@media(max-width:540px){.chord-arcade .app-shell {padding:0 16px}
.chord-arcade .site-header {height:71px}
.chord-arcade .brand {font-size:14px;
letter-spacing:.7px;
gap:9px}
.chord-arcade .brand-sub {font-size:6px;
letter-spacing:.9px}
.chord-arcade .brand-mark {width:28px;
height:25px;
gap:3px}
.chord-arcade .brand-mark i {width:5px;
height:16px}
.chord-arcade .brand-mark i:nth-child(2) {height:23px}
.chord-arcade .brand-mark i:nth-child(3) {height:28px}
.chord-arcade .brand-mark i:nth-child(4) {height:20px}
.chord-arcade .local-label {display:none}
.chord-arcade .hero {padding:23px 0 21px}
.chord-arcade .hero h1 {font-size:clamp(29px,8.9vw,48px);
letter-spacing:-2.2px;
line-height:1.12}
.chord-arcade .eyebrow {font-size:6px;
letter-spacing:1px;
gap:5px;
margin-bottom:9px}
.chord-arcade .eyebrow .tiny-cross {font-size:14px}
.chord-arcade .hero p {font-size:12px;
line-height:1.7;
margin-top:12px}
.chord-arcade .hero p br {display:block}
.chord-arcade .hero p span {margin-left:0;
font-size:10px}
.chord-arcade .presets {grid-template-columns:1fr 1fr;
gap:7px;
margin-bottom:14px}
.chord-arcade .preset {padding:11px 12px;
gap:10px}
.chord-arcade .preset b {font-size:9px;
letter-spacing:.6px}
.chord-arcade .preset small {font-size:8px}
.chord-arcade .preset-icon {font-size:25px;
width:23px}
.chord-arcade .preset-index {font-size:7px;
right:7px;
top:6px}
.chord-arcade .transport {gap:9px;
border-radius:7px;
margin-bottom:14px;
padding:10px;
top:0;
margin-left:-1px;
margin-right:-1px}
.chord-arcade .play-button {min-width:100px;
height:49px;
gap:9px;
font-size:14px;
letter-spacing:.8px}
.chord-arcade .play-glyph {font-size:13px}
.chord-arcade .tempo {flex-direction:column;
gap:0;
flex:none;
padding-left:2px}
.chord-arcade .tempo>.micro {font-size:6px}
.chord-arcade .tempo-value {gap:0}
.chord-arcade .tempo-value input {font-size:22px;
width:43px}
.chord-arcade .tempo-value .step-button {font-size:12px;
min-width:22px;
padding:2px;
min-height:26px}
.chord-arcade .tempo-value>.micro {display:none}
.chord-arcade .master-volume {width:auto;
flex:1;
margin-left:4px}
.chord-arcade .master-volume label {gap:4px}
.chord-arcade .master-volume label svg {width:12px}
.chord-arcade .master-volume label .micro {font-size:6px;
letter-spacing:.5px}
.chord-arcade .master-volume label output {font-size:9px}
.chord-arcade .master-volume input {height:25px;
margin-top:2px}
.chord-arcade .main-grid {gap:14px}
.chord-arcade .panel-heading {height:43px;
padding:0 16px}
.chord-arcade .panel-heading h2 {font-size:10px;
letter-spacing:1px}
.chord-arcade .panel-number {margin-right:8px;
font-size:8px}
.chord-arcade .panel-heading>.micro {font-size:8px}
.chord-arcade .performance .panel-heading {padding:0 16px}
.chord-arcade .chord-display {padding:20px 16px 17px;
grid-template-columns:51% 49%;
min-height:167px}
.chord-arcade .chord-name {font-size:59px;
letter-spacing:-4px;
margin:7px 0 3px}
.chord-arcade .chord-name span {letter-spacing:-1.5px;
font-size:.45em}
.chord-arcade .now-tag {font-size:6px;
letter-spacing:.7px}
.chord-arcade .key-row {gap:5px}
.chord-arcade .key-badge {font-size:6px;
letter-spacing:.6px;
padding:4px 5px}
.chord-arcade .relation {font-size:7px;
max-width:85px}
.chord-arcade .note-names {font-size:7px;
letter-spacing:.4px;
margin-top:9px}
.chord-arcade .scope-wrap {padding-left:4px}
.chord-arcade .scope-caption .micro {font-size:6px;
letter-spacing:.8px}
.chord-arcade .scope-live {display:none}
.chord-arcade #voice-canvas {height:109px;
margin-top:3px}
.chord-arcade .scope-bottom {font-size:6px;
letter-spacing:.8px;
margin-top:0}
.chord-arcade .progression {margin:0 16px 16px}
.chord-arcade .chord-cell {padding:9px 8px}
.chord-arcade .cell-caption {font-size:6px!important;
letter-spacing:.8px!important}
.chord-arcade .cell-chord {font-size:18px!important;
letter-spacing:-.8px!important;
margin-top:7px!important}
.chord-arcade .cell-chord span {font-size:.65em;
letter-spacing:-.5px}
.chord-arcade .cell-key {font-size:6px;
margin-top:4px;
overflow:hidden;
text-overflow:ellipsis}
.chord-arcade .piano-and-meter {margin:0 16px 16px;
height:42px;
gap:9px}
.chord-arcade .piano {gap:1px}
.chord-arcade .piano-key>span {font-size:6px;
bottom:3px}
.chord-arcade .out-meter {gap:5px}
.chord-arcade .out-meter>.micro {font-size:6px}
.chord-arcade .meter-track {height:42px;
width:5px}
.chord-arcade .sequencer-row {padding:0 16px 18px;
gap:9px}
.chord-arcade .sequencer-row>.micro {font-size:7px}
.chord-arcade .steps {gap:3px}
.chord-arcade .step {height:5px}
.chord-arcade .harmony-panel {display:block;
padding-bottom:16px}
.chord-arcade .harmony-panel .control {margin:17px 18px 0}
.chord-arcade .harmony-panel .control label {font-size:12px}
.chord-arcade .harmony-panel .control small {display:inline;
font-size:7px;
margin-left:8px}
.chord-arcade .harmony-panel .range-ends {font-size:8px}
.chord-arcade .chord-speed {margin:20px 18px 0}
.chord-arcade .chord-speed>.micro>span {display:inline}
.chord-arcade .segmented button {min-height:31px;
font-size:10px}
.chord-arcade .harmony-actions {margin:12px 18px 0;
gap:9px}
.chord-arcade .harmony-actions .secondary-button {height:38px}
.chord-arcade .lower-grid {grid-template-columns:1fr;
gap:14px;
margin-top:14px}
.chord-arcade .wave-selector {margin:17px 18px 15px;
gap:7px}
.chord-arcade .wave-selector button {flex-direction:row;
gap:7px;
padding:10px 8px}
.chord-arcade .wave-selector svg {width:31px}
.chord-arcade .wave-selector span {text-align:left;
font-size:9px}
.chord-arcade .sound-controls {margin:0 18px 18px;
gap:11px 23px}
.chord-arcade .sound-controls .control label small {display:inline;
font-size:6px}
.chord-arcade .sound-controls .control label {font-size:11px}
.chord-arcade .rhythm-top {margin:18px 18px 11px;
gap:23px}
.chord-arcade .rhythm-top .control label small {display:inline;
font-size:6px}
.chord-arcade .rhythm-panel .panel-heading {padding:0 16px}
.chord-arcade .mix-label {margin:0 18px 8px;
padding-top:12px}
.chord-arcade .mix-label>span:nth-child(2) {display:inline;
font-size:7px}
.chord-arcade .mixer {grid-template-columns:1fr 1fr;
margin:0 18px 17px;
gap:6px 15px}
.chord-arcade .mix-channel {gap:5px}
.chord-arcade .mute-button {font-size:7px;
min-width:42px}
.chord-arcade .mix-channel output {font-size:7px}
.chord-arcade .session-tools {display:block;
padding:23px 0 20px}
.chord-arcade .session-note {gap:10px}
.chord-arcade .session-note p {font-size:11px}
.chord-arcade .session-note small {font-size:9px}
.chord-arcade .session-note>.tiny-cross {font-size:26px}
.chord-arcade .session-actions {justify-content:space-between;
gap:13px;
margin-top:17px}
.chord-arcade .session-actions .secondary-button {padding:9px 13px}
.chord-arcade .session-actions .text-button {font-size:10px}
.chord-arcade .chord-footer {display:flex;
flex-wrap:wrap;
gap:12px;
padding:19px 0 25px;
font-size:7px;
letter-spacing:.1px}
.chord-arcade .footer-divider {padding:0 6px}
.chord-arcade .footer-link {font-size:9px;
padding:0}
.chord-arcade .footer-key {display:none}
.chord-arcade dialog {padding:21px;
max-height:88dvh}
.chord-arcade dialog h2 {font-size:24px}
.chord-arcade dialog dl {grid-template-columns:76px 1fr;
gap:13px 8px}
.chord-arcade dialog dd {font-size:10px}
.chord-arcade dialog dt {font-size:10px}
.chord-arcade .toast {bottom:max(20px,env(safe-area-inset-bottom));
font-size:10px;
padding:10px 13px}
}

@media(prefers-reduced-motion:reduce){.chord-arcade *,
.chord-arcade *::before,
.chord-arcade *::after {scroll-behavior:auto!important;
transition:none!important}
}

@media(max-width:360px){.chord-arcade .wave-selector button {flex-direction:column;
gap:5px}
.chord-arcade .wave-selector span {text-align:center}
.chord-arcade .wave-selector svg {width:36px}
.chord-arcade .master-volume label .micro {display:none}
.chord-arcade .mix-label>span:nth-child(2) {display:none}
}
.chord-arcade .melody-panel {margin-top:18px;
border-color:var(--line);
background:linear-gradient(110deg,var(--panel-deep),var(--panel-deep) 70%)}
.chord-arcade .melody-panel .panel-heading {border-bottom-color:var(--line)}
.chord-arcade .melody-panel .panel-number {color:var(--muted)}
.chord-arcade .new-label {font:7px var(--mono);
color:var(--muted);
background:var(--panel-deep);
border:1px solid var(--line);
border-radius:3px;
margin-left:9px;
padding:3px 5px;
letter-spacing:1px}
.chord-arcade .melody-heading-right {display:flex;
align-items:center;
gap:17px}
.chord-arcade .melody-toggle {font:10px var(--mono);
letter-spacing:1px;
color:var(--muted);
background:var(--panel-deep);
border:1px solid var(--line);
border-radius:4px;
min-width:65px;
min-height:29px;
padding:5px 10px}
.chord-arcade .melody-toggle.enabled {color:var(--muted);
background:var(--panel-deep);
border-color:var(--line)}
.chord-arcade .melody-toggle:hover {border-color:var(--line)}
.chord-arcade .melody-body {display:grid;
grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
gap:30px;
padding:22px}
.chord-arcade .melody-monitor {min-width:0;
border-right:1px solid var(--line);
padding-right:27px}
.chord-arcade .melody-monitor-top {display:flex;
align-items:center;
justify-content:space-between}
.chord-arcade .melody-monitor-top .micro {font-size:8px;
color:var(--muted)}
.chord-arcade .melody-monitor-top>span:first-child {color:var(--orange);
letter-spacing:1.2px}
.chord-arcade .melody-live {display:flex;
align-items:center;
gap:13px;
min-height:46px;
margin-top:8px}
.chord-arcade .melody-live>span:first-child {font:31px/1 var(--mono);
letter-spacing:-1.8px;
color:var(--muted);
min-width:65px}
.chord-arcade .melody-live>span:nth-child(2) {font-size:9px;
color:var(--muted);
flex:1}
.chord-arcade .melody-live>span:last-child {font:10px var(--mono);
color:var(--muted);
border:1px solid var(--line);
border-radius:3px;
padding:3px 6px;
min-width:40px;
text-align:center}
.chord-arcade #melody-canvas {display:block;
width:100%;
height:106px;
margin-top:2px}
.chord-arcade .melody-caption {display:flex;
justify-content:space-between;
font:7px var(--mono);
letter-spacing:.5px;
color:var(--muted);
margin-top:6px}
.chord-arcade .melody-caption>span:last-child {color:var(--muted)}
.chord-arcade .melody-controls {min-width:0}
.chord-arcade .melody-rate {display:flex;
align-items:center;
gap:16px;
margin-bottom:16px}
.chord-arcade .melody-rate>.micro {font-size:8px;
line-height:1.4;
flex:none;
color:var(--muted)}
.chord-arcade .melody-rate>.micro>span {font:8px var(--sans);
display:block;
margin-top:3px;
letter-spacing:0;
color:var(--muted)}
.chord-arcade .melody-rate .segmented {flex:1;
background:var(--panel-deep);
border-color:var(--line)}
.chord-arcade .melody-rate .segmented button {display:flex;
align-items:center;
justify-content:center;
gap:7px;
padding:6px 8px;
min-height:32px}
.chord-arcade .melody-rate .segmented b {font:11px var(--mono)}
.chord-arcade .melody-rate .segmented small {font:8px var(--sans);
color:var(--muted)}
.chord-arcade .melody-rate .segmented .selected {background:var(--panel-deep);
color:var(--muted)}
.chord-arcade .melody-sliders {display:grid;
grid-template-columns:1fr 1fr;
gap:13px 25px}
.chord-arcade .melody-sliders .control label {font-size:11px}
.chord-arcade .melody-sliders .control label small {font-size:7px}
.chord-arcade .melody-sliders .control output {color:var(--muted);
font-size:11px}
.chord-arcade .melody-sliders .range-ends {font-size:7px;
color:var(--muted)}
.chord-arcade .melody-panel input[type=range]::-webkit-slider-runnable-track {background:linear-gradient(to right,var(--accent) var(--value),var(--line) var(--value))}
.chord-arcade .melody-panel input[type=range]::-moz-range-progress {background:var(--panel-deep)}
.chord-arcade .melody-panel input[type=range]::-webkit-slider-thumb {background:var(--panel-deep);
border-color:var(--line);
box-shadow:none}
.chord-arcade .melody-panel input[type=range]::-moz-range-thumb {background:var(--panel-deep);
border-color:var(--line);
box-shadow:none}
.chord-arcade .melody-muted .melody-monitor {opacity:.5}
.chord-arcade .melody-muted .melody-live>span:first-child {color:var(--muted)}

@media(max-width:1100px){.chord-arcade .melody-body {padding:20px 17px;
gap:22px}
.chord-arcade .melody-monitor {padding-right:20px}
.chord-arcade .melody-rate {gap:12px}
.chord-arcade .melody-sliders {gap:13px 19px}
.chord-arcade .melody-sliders .control small {font-size:6px}
.chord-arcade .melody-sliders .melody-level small {display:none}
.chord-arcade .melody-caption {font-size:6px}
.chord-arcade .melody-heading-right {gap:12px}
}

@media(max-width:800px){.chord-arcade .melody-body {grid-template-columns:1fr 1fr;
gap:19px}
.chord-arcade .melody-monitor {padding-right:16px}
.chord-arcade .melody-rate {display:block;
margin-bottom:14px}
.chord-arcade .melody-rate>.micro {display:flex;
align-items:center;
gap:8px;
margin-bottom:6px}
.chord-arcade .melody-rate>.micro>span {display:inline;
margin:0}
.chord-arcade .melody-rate .segmented button {gap:4px;
padding:6px}
.chord-arcade .melody-sliders {gap:12px 15px}
.chord-arcade .melody-sliders .control label small {display:none}
.chord-arcade .melody-live {gap:7px}
.chord-arcade .melody-live>span:first-child {font-size:29px;
min-width:51px}
.chord-arcade .melody-live>span:nth-child(2) {font-size:8px}
.chord-arcade .melody-caption>span:first-child {font-size:5px}
.chord-arcade #melody-canvas {height:124px}
}

@media(max-width:540px){.chord-arcade .melody-panel {margin-top:14px}
.chord-arcade .melody-panel .panel-heading h2 {font-size:9px;
letter-spacing:.8px}
.chord-arcade .new-label {font-size:6px;
padding:2px 4px;
margin-left:5px}
.chord-arcade .melody-heading-right>.panel-jp {display:none}
.chord-arcade .melody-toggle {font-size:9px;
min-width:60px;
min-height:28px}
.chord-arcade .melody-body {display:block;
padding:17px 18px 20px}
.chord-arcade .melody-monitor {border-right:0;
padding:0 0 15px;
border-bottom:1px solid var(--line);
margin-bottom:16px}
.chord-arcade .melody-monitor-top .micro {font-size:7px}
.chord-arcade .melody-live {margin-top:6px;
min-height:39px;
gap:13px}
.chord-arcade .melody-live>span:first-child {font-size:29px;
min-width:55px}
.chord-arcade .melody-live>span:nth-child(2) {font-size:9px}
.chord-arcade #melody-canvas {height:79px}
.chord-arcade .melody-caption {margin-top:3px;
font-size:6px}
.chord-arcade .melody-caption>span:first-child {font-size:6px}
.chord-arcade .melody-rate {display:flex;
gap:11px;
margin-bottom:17px}
.chord-arcade .melody-rate>.micro {display:block;
font-size:7px;
line-height:1.6;
margin:0}
.chord-arcade .melody-rate>.micro>span {display:block;
font-size:7px}
.chord-arcade .melody-rate .segmented button {display:block;
padding:6px 7px}
.chord-arcade .melody-rate .segmented b {display:block;
font-size:11px}
.chord-arcade .melody-rate .segmented small {font-size:7px;
display:block;
margin-top:2px}
.chord-arcade .melody-sliders {gap:16px 23px}
.chord-arcade .melody-sliders .control label {font-size:11px}
.chord-arcade .melody-sliders .control small {display:inline;
font-size:6px}
.chord-arcade .melody-sliders .melody-level small {display:none}
}


/* Match the shared tool pages while keeping musical data visually distinct. */
.chord-arcade .app-shell { max-width: none;
 padding: 0;
 }

.chord-arcade .tool-page__title { font-family: var(--font-base);
 }

.chord-arcade .chord-help { margin-top: 1rem;
 }

.chord-arcade .panel { border-radius: 8px;
 }

.chord-arcade .performance, .chord-arcade .melody-panel { background: var(--panel);
 border-color: var(--line);
 }

.chord-arcade .transport { background: var(--panel);
 border-color: var(--line);
 position: static;
 box-shadow: none;
 }

.chord-arcade .play-button, .chord-arcade .play-button.playing { color: white;
 background: var(--accent);
 box-shadow: none;
 }

.chord-arcade .play-button:hover { background: var(--color-teal);
 }

.chord-arcade .preset:hover, .chord-arcade .preset.active,
.chord-arcade .chord-cell.current, .chord-arcade .segmented button.selected,
.chord-arcade .melody-rate .segmented .selected, .chord-arcade .wave-selector button.selected,
.chord-arcade .melody-toggle.enabled { background: #f0fdfa;
 border-color: var(--accent);
 color: var(--accent);
 }

.chord-arcade .key-badge { background: #ccfbf1;
 color: var(--accent);
 }

.chord-arcade .piano-key { background: #e7e5e4;
 box-shadow: inset 0 -2px #a8a29e;
 }

.chord-arcade .piano-key.black { background: #44403c;
 border-color: #292524;
 }

.chord-arcade .piano-key.active, .chord-arcade .piano-key.black.active { background: var(--color-teal);
 box-shadow: none;
 }

.chord-arcade .piano-key.root-note.active { background: var(--orange);
 }

.chord-arcade .piano-key > span { color: var(--text);
 }

.chord-arcade .step.on, .chord-arcade .step.active { background: var(--accent);
 }

.chord-arcade .melody-toggle.enabled, .chord-arcade .melody-sliders .control output,
.chord-arcade .melody-live > span:first-child { color: var(--orange);
 }

.chord-arcade .chord-footer { display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: 1.5rem;
 padding: 1.5rem 0 0;
 border-top: 1px solid var(--line);
 font-size: .875rem;
 }

.chord-arcade .footer-link { font: inherit;
 color: var(--muted);
 }

.chord-arcade dialog { margin: auto;
 color: var(--text);
 background: var(--panel);
 }

.chord-arcade dialog::backdrop { background: rgb(28 25 23 / 45%);
 }

.chord-arcade .toast { color: var(--text);
 background: var(--panel);
 border-color: var(--line);
 }

.chord-arcade .noscript { position: static;
 }

@media (max-width: 540px) {
  .chord-arcade .app-shell { padding: 0;
 }

  .chord-arcade .transport { flex-wrap: wrap;
 }

  .chord-arcade .master-volume { min-width: 70px;
 }

  .chord-arcade .panel-heading h2 { letter-spacing: 0;
 }

}


.chord-arcade .melody-panel input[type=range]::-webkit-slider-thumb { background: var(--orange);
 }

.chord-arcade .melody-panel input[type=range]::-moz-range-thumb { background: var(--orange);
 }

.chord-arcade input[type=range]::-moz-range-progress { background: var(--accent);
 }

.chord-arcade .melody-panel input[type=range]::-moz-range-progress { background: var(--orange);
 }


/* A quiet entry in the instrument; the film occupies its own top-layer dialog. */
.chord-arcade .performance-tools { display:flex; align-items:center; gap:16px; }
.chord-arcade .mv-entry { font:10px var(--mono); letter-spacing:.04em; color:var(--muted); border-left:1px solid var(--line); padding:6px 0 6px 14px; min-height:32px; }
.chord-arcade .mv-entry:hover, .chord-arcade .mv-entry:focus-visible { color:var(--accent); }
body.mv-open { overflow:hidden; }
.mv-screen {
  --mv-paper:#f4f0e7;
  --mv-dim:#d0d6ce;
  --mv-teal:#b7d8cd;
  --mv-warm:#edc498;
  --mv-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  position:fixed; inset:0; margin:0; padding:0; width:100%; height:100dvh;
  max-width:none; max-height:none; border:0; border-radius:0;
  background:#080c0e; color:var(--mv-paper); color-scheme:dark;
  font-family:var(--font-base); overflow:hidden; isolation:isolate;
}
.mv-screen::backdrop { background:#080c0e; }
.mv-stage { position:relative; width:100%; height:100%; isolation:isolate; background:#080c0e; overflow:hidden; }
.mv-stage:fullscreen { width:100vw; height:100dvh; }
.mv-screen button { font:inherit; color:inherit; cursor:pointer; touch-action:manipulation; }
.mv-screen button:focus-visible { outline:2px solid var(--mv-paper); outline-offset:5px; }
.mv-film, .mv-image, .mv-shade { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.mv-film { z-index:-2; }
.mv-image { object-fit:cover; opacity:0; }
.mv-image.is-current { opacity:1; }
.mv-screen.is-soft .mv-image { transition:opacity .45s ease; }
.mv-shade { z-index:-1; background:linear-gradient(180deg,rgba(4,9,11,.63) 0%,rgba(4,9,11,.12) 32%,rgba(4,9,11,.08) 49%,rgba(4,9,11,.72) 100%),linear-gradient(90deg,rgba(4,9,11,.2),transparent 65%); }
.mv-topline { position:absolute; top:max(28px,env(safe-area-inset-top)); left:max(36px,env(safe-area-inset-left)); right:max(28px,env(safe-area-inset-right)); display:flex; gap:32px; align-items:center; }
.mv-topline h2 { margin:0; font-size:12px; font-weight:500; letter-spacing:.01em; line-height:1.5; flex:1; }
.mv-topline h2 span { margin-left:16px; font:10px var(--mv-mono); color:var(--mv-dim); }
.mv-position { display:flex; align-items:center; gap:24px; font:10px var(--mv-mono); font-variant-numeric:tabular-nums; }
.mv-position b { font-weight:400; }
.mv-icon-button { display:grid; place-items:center; border:1px solid rgba(244,240,231,.35); background:rgba(8,12,14,.2); width:34px; height:34px; font-size:23px!important; line-height:1; }
.mv-overlay { position:absolute; inset:0; pointer-events:none; text-shadow:0 1px 6px rgba(0,0,0,.5); }
.mv-overlay[hidden] { display:none; }
.mv-harmony { position:absolute; top:clamp(94px,13vh,150px); left:36px; max-width:calc(100% - 72px); }
.mv-data { font:11px/1.7 var(--mv-mono); color:var(--mv-dim); margin:0; }
.mv-key { font-size:11px; }
.mv-chord { font:400 clamp(58px,7.5vw,108px)/1.15 var(--mv-mono); letter-spacing:-.07em; margin:12px 0 8px; white-space:nowrap; }
.mv-chord span { font-size:.49em; letter-spacing:-.05em; margin-left:.05em; }
.mv-relation { font-size:12px; line-height:1.7; margin:0 0 15px; }
.mv-section-label { display:flex; justify-content:space-between; align-items:baseline; gap:20px; border-top:1px solid rgba(244,240,231,.48); padding-top:10px; margin-bottom:12px; color:var(--mv-dim); font:10px/1.5 var(--mv-mono); }
.mv-analysis { position:absolute; bottom:124px; left:36px; width:min(470px,43vw); }
.mv-analysis-lines { font-size:11px; line-height:1.9; letter-spacing:.015em; }
.mv-analysis-lines p { margin:0 0 5px; }
.mv-parameters { display:flex; gap:30px; margin:18px 0 0; font-size:10px; }
.mv-parameters > div { display:flex; gap:14px; align-items:baseline; }
.mv-parameters dt { color:var(--mv-dim); }
.mv-parameters dd { margin:0; font:12px var(--mv-mono); color:var(--mv-warm); }
.mv-voices { position:absolute; right:36px; bottom:124px; width:260px; }
.mv-voice-rows { margin-bottom:15px; }
.mv-voice-row { display:grid; grid-template-columns:1fr 24px 1fr 40px; gap:8px; padding:5px 0; font:12px/1.3 var(--mv-mono); font-variant-numeric:tabular-nums; }
.mv-voice-row span:last-child { text-align:right; color:var(--mv-warm); }
.mv-voice-row[data-kind="hold"] span:last-child { color:var(--mv-teal); }
.mv-voice-row span:nth-child(2) { color:var(--mv-dim); }
.mv-voicing { margin-bottom:8px; font-size:10px; }
.mv-melody { position:absolute; right:36px; top:clamp(100px,14vh,160px); display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.mv-melody > span:first-child { font:28px/1 var(--mv-mono); letter-spacing:-.04em; }
.mv-melody > span:nth-child(2) { font-size:10px; color:var(--mv-dim); }
.mv-film-info { position:absolute; left:36px; right:36px; bottom:71px; display:flex; justify-content:space-between; gap:24px; color:var(--mv-dim); font:10px/1.6 var(--mv-mono); text-shadow:0 1px 5px #000; }
.mv-film-info > span:first-child { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.mv-film-info > span:last-child { flex-shrink:0; font-variant-numeric:tabular-nums; }
.mv-beats { position:absolute; left:36px; right:36px; bottom:48px; display:flex; gap:5px; height:3px; }
.mv-beats span { height:1px; flex:1; background:rgba(244,240,231,.25); }
.mv-beats span:nth-child(4n+1) { background:rgba(244,240,231,.48); }
.mv-beats span.is-active { height:3px; background:var(--mv-paper); }
.mv-controls { position:absolute; bottom:max(26px,env(safe-area-inset-bottom)); left:50%; transform:translate(-50%,0); display:flex; align-items:center; gap:7px; padding:7px 9px; background:rgba(8,12,14,.76); border:1px solid rgba(244,240,231,.25); backdrop-filter:blur(12px); opacity:0; pointer-events:none; transition:opacity .2s; }
.mv-screen.has-controls .mv-controls, .mv-controls:focus-within, .mv-screen:not(.is-playing) .mv-controls { opacity:1; pointer-events:auto; }
.mv-controls button { white-space:nowrap; background:transparent; border:0; border-radius:0; min-height:36px; padding:7px 12px; font-size:11px; }
.mv-controls button:hover, .mv-controls button[aria-pressed="true"] { background:rgba(244,240,231,.14); }
.mv-controls #mv-play { min-width:60px; background:var(--mv-paper); color:#17211f; }
.mv-controls button:disabled { opacity:.5; cursor:wait; }
.mv-control-divider { width:1px; height:20px; background:rgba(244,240,231,.25); margin:0 5px; }
.mv-cadence { display:flex; gap:2px; }
.mv-message { position:absolute; left:24px; right:24px; top:47%; text-align:center; font-size:13px; line-height:1.8; text-shadow:0 1px 6px #000; pointer-events:none; }
@media (min-width:1600px) {
  .mv-topline { left:56px; right:48px; top:40px; }
  .mv-harmony, .mv-analysis { left:56px; }
  .mv-voices, .mv-melody { right:56px; }
  .mv-film-info, .mv-beats { left:56px; right:56px; }
  .mv-analysis { width:490px; }
  .mv-analysis-lines { font-size:12px; }
}
@media (max-width:800px) {
  .mv-topline { top:max(18px,env(safe-area-inset-top)); left:22px; right:18px; gap:16px; }
  .mv-topline h2 span { display:block; margin:3px 0 0; font-size:9px; }
  .mv-position { gap:12px; font-size:9px; }
  #mv-play-state { display:none; }
  .mv-harmony { top:104px; left:24px; }
  .mv-chord { font-size:68px; }
  .mv-melody { right:24px; top:111px; }
  .mv-analysis { left:24px; width:52vw; bottom:138px; }
  .mv-analysis-lines { font-size:11px; line-height:1.8; }
  .mv-voices { right:24px; width:190px; bottom:138px; }
  .mv-parameters { gap:20px; }
  .mv-parameters > div { flex-direction:column; gap:3px; }
  .mv-film-info { left:24px; right:24px; bottom:100px; font-size:9px; }
  .mv-beats { left:24px; right:24px; bottom:85px; }
  .mv-controls { bottom:max(18px,env(safe-area-inset-bottom)); }
}
@media (max-width:540px) {
  .mv-topline { left:18px; right:14px; }
  .mv-position { gap:10px; font-size:9px; }
  .mv-icon-button { width:32px; height:32px; }
  .mv-harmony { left:20px; right:20px; top:96px; }
  .mv-chord { font-size:clamp(54px,16vw,74px); margin:8px 0 4px; }
  .mv-harmony .mv-data { font-size:10px; }
  .mv-relation { font-size:11px; margin-bottom:10px; }
  .mv-melody { right:20px; top:101px; max-width:110px; }
  .mv-melody > span:first-child { font-size:23px; }
  .mv-melody > span:nth-child(2) { font-size:9px; text-align:right; }
  .mv-analysis { left:20px; right:20px; bottom:154px; width:auto; }
  .mv-analysis-lines { font-size:11px; line-height:1.75; }
  .mv-analysis-lines p { margin-bottom:4px; }
  .mv-section-label { font-size:9px; padding-top:8px; margin-bottom:9px; }
  .mv-parameters { margin-top:12px; gap:23px; }
  .mv-parameters > div { flex-direction:row; gap:10px; }
  .mv-parameters dt { font-size:9px; }
  .mv-parameters dd { font-size:11px; }
  .mv-voices { display:none; }
  .mv-film-info { left:20px; right:20px; bottom:118px; display:block; font-size:9px; }
  .mv-film-info > span { display:block; }
  .mv-film-info > span:last-child { margin-top:4px; opacity:.8; }
  .mv-beats { left:20px; right:20px; bottom:103px; }
  .mv-controls { width:calc(100% - 28px); justify-content:center; gap:2px; padding:6px; bottom:max(24px,env(safe-area-inset-bottom)); }
  .mv-controls button { padding:7px 9px; font-size:10px; }
  .mv-control-divider { margin:0 3px; }
}
@media (max-height:650px) and (min-width:541px) {
  .mv-harmony { top:85px; }
  .mv-chord { font-size:58px; margin-top:4px; }
  .mv-analysis, .mv-voices { bottom:105px; }
  .mv-analysis { width:48vw; }
  .mv-analysis-lines { font-size:10px; line-height:1.65; }
  .mv-analysis-lines p:first-child { display:none; }
  .mv-parameters { margin-top:8px; }
  .mv-section-label { margin-bottom:8px; }
  .mv-melody { top:88px; }
}
@media (max-height:720px) and (max-width:540px) {
  .mv-analysis-lines p:first-child { display:none; }
  .mv-analysis-lines { font-size:10px; line-height:1.7; }
  .mv-analysis { bottom:142px; }
  .mv-film-info { bottom:104px; }
  .mv-beats { bottom:90px; }
  .mv-harmony { top:86px; }
  .mv-melody { top:91px; }
}
@media (prefers-reduced-motion:reduce) {
  .mv-controls { transition:none; }
}

.mv-topline h2 { color:var(--mv-paper); }
@media (max-height:720px) and (max-width:540px) {
  .mv-analysis-lines p:last-child { display:none; }
}
@media (max-height:480px) and (min-width:541px) {
  .mv-harmony { top:72px; }
  .mv-chord { font-size:44px; margin:4px 0; }
  .mv-relation { margin-bottom:4px; font-size:10px; }
  .mv-harmony #mv-destination { display:none; }
  .mv-analysis { bottom:102px; width:48vw; }
  .mv-analysis-lines p:first-child,
  .mv-analysis-lines p:nth-child(3),
  .mv-analysis-lines p:last-child,
  .mv-parameters { display:none; }
  .mv-voices { bottom:102px; }
  .mv-voice-row { font-size:10px; padding:3px 0; }
  .mv-voicing { font-size:9px; margin-bottom:3px; }
  .mv-melody { top:82px; }
  .mv-film-info { bottom:78px; }
  .mv-beats { bottom:64px; }
}
@media (max-height:480px) and (min-width:541px) {
  .mv-melody { display:none; }
}
@media (max-width:360px) {
  .mv-position > span:last-child {display:none}
  .mv-topline h2 {white-space:nowrap}
}