main { max-width: 1500px; margin: var(--mm-topnav-height) auto 0; padding: var(--mm-space-4) 3rem 0; }
.intro { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; margin-bottom: 1.5rem; }
.intro h1 { margin: 0 0 0.75rem; }
.mobile { display: none; }
.local-badge { font-size: 0.75rem; color: var(--mm-success); background: rgb(164 246 115 / 10%); border: 1px solid rgb(164 246 115 / 25%); border-radius: var(--mm-radius-pill); padding: 0.35rem 0.85rem; white-space: nowrap; }
.connection { display: flex; justify-content: space-between; gap: 1.5rem; background: var(--mm-bg-secondary); border: 1px solid var(--mm-border); border-radius: var(--mm-radius-card); padding: 1.5rem; margin-bottom: 1.5rem; }
.connection > div:first-child { min-width: 0; flex: 1; }
.connection h2 { font-size: 0.8rem; color: var(--mm-text-secondary); margin: 0 0 0.5rem; }
.connection select { font-size: 0.9rem; width: 100%; cursor: pointer; }
.connection p { font-size: 0.8rem; color: var(--mm-text-tertiary); margin: 0.75rem 0 0; }
.connection-actions { display: flex; flex-direction: column; align-items: end; gap: 0.75rem; justify-content: center; }
.connection-actions span { font-size: 0.75rem; color: var(--mm-text-tertiary); max-width: 300px; }
.workspace { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.5rem; }
.card { background: var(--mm-bg-secondary); border: 1px solid var(--mm-border); border-radius: var(--mm-radius-card); padding: 1.5rem; min-width: 0; overflow: hidden; }
.card-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--mm-bg-tertiary); border-bottom: 1px solid var(--mm-border); padding: 0.85rem 1.5rem; margin: -1.5rem -1.5rem 1.5rem; min-height: 56px; }
.card h2 { font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em; margin: 0; }
.controller-art { display: block; width: 100%; height: auto; max-height: 290px; margin: 1.5rem auto 0.75rem; border-radius: 10px; background: var(--mm-surface-dark); }
.shell { fill: var(--mm-bg-secondary); stroke: var(--mm-border); stroke-width: 2; }
.control rect, .control circle, .control path { fill: var(--mm-bg-tertiary); stroke: var(--mm-border); stroke-width: 1.5; }
.control text { fill: var(--mm-text-secondary); font-size: 13px; font-weight: 600; text-anchor: middle; pointer-events: none; }
.control.pressed rect, .control.pressed circle, .control.pressed path { fill: var(--mm-success); stroke: white; filter: drop-shadow(0 0 4px rgb(164 246 115 / 35%)); }
.control.pressed text { fill: #20291b; }
.dpad-center { fill: var(--mm-border); }
.art-label { text-anchor: middle; fill: var(--mm-text-tertiary); font-size: 8px; letter-spacing: 2px; }
.controller .muted { text-align: center; min-height: 42px; margin: 0 0 1rem; }
.live-strip { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--mm-border); padding-top: 1rem; color: var(--mm-text-tertiary); font-family: var(--mm-font-mono); font-size: 0.7rem; }
.live-strip > span:first-child { display: flex; align-items: center; gap: 0.5rem; }
i { display: inline-block; width: 6px; height: 6px; background: var(--mm-border); border-radius: 50%; }
i.active { background: var(--mm-success); box-shadow: 0 0 8px rgb(164 246 115 / 30%); }
.stick-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.stick-item { text-align: center; min-width: 0; }
.stick-item h3 { font-size: 0.75rem; letter-spacing: 0.08em; color: var(--mm-text-tertiary); font-weight: 500; margin: 0; }
.stick-item svg { width: 100%; height: auto; max-width: 210px; }
.stick-boundary { fill: #3a3635; stroke: var(--mm-border); stroke-width: 1.5; }
.stick-inner { fill: none; stroke: var(--mm-border); stroke-dasharray: 3 3; }
.crosshair { stroke: var(--mm-border); fill: none; }
.stick-dot { fill: var(--mm-accent); stroke: white; stroke-width: 2; }
.stick-item line { stroke: var(--mm-accent); stroke-width: 2; opacity: 0.5; }
.stick-item output { font-size: 0.75rem; color: var(--mm-text-secondary); }
.sticks .muted { margin: 1.25rem 0 0; }
.button-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 0.6rem; }
.button-cell { border: 1px solid var(--mm-border); background: var(--mm-surface-dark); border-radius: 8px; text-align: center; padding: 0.65rem 0.25rem; min-width: 0; box-shadow: 0 2px 4px rgb(0 0 0 / 15%), inset 0 1px 0 rgb(255 255 255 / 4%); }
.button-cell strong { display: block; font-size: 0.8rem; font-weight: 600; }
.button-cell small { display: block; font-size: 0.65rem; color: var(--mm-text-tertiary); }
.button-cell output { font-size: 0.75rem; color: var(--mm-text-secondary); }
.button-cell.seen { border-color: var(--mm-accent); }
.button-cell.pressed { background: rgb(164 246 115 / 14%); border-color: var(--mm-success); color: var(--mm-success); box-shadow: 0 0 0 1px rgb(164 246 115 / 15%), 0 0 16px rgb(164 246 115 / 12%); }
.button-cell.pressed output { color: var(--mm-success); }
.button-cell progress { display: block; width: 90%; height: 3px; margin: 0.35rem auto 0; accent-color: var(--mm-success); }
.legend { display: flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; color: var(--mm-text-tertiary); margin: 1rem 0 0; }
.legend span:last-child { margin-left: auto; font-family: var(--mm-font-mono); }
.legend-active, .legend-seen { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }
.legend-active { background: var(--mm-success); border: 1px solid var(--mm-success); }
.legend-seen { border: 1px solid var(--mm-accent); margin-left: 0.5rem; }
.axis-row { display: grid; grid-template-columns: 56px 1fr 64px; gap: 0.75rem; align-items: center; margin-top: 1.25rem; font-size: 0.75rem; color: var(--mm-text-tertiary); }
.axis-row output { font-size: 0.8rem; color: var(--mm-text-secondary); text-align: right; }
.axis-row svg { width: 100%; height: 16px; }
.axis-track { stroke: var(--mm-bg-tertiary); stroke-width: 4; stroke-linecap: round; }
.axis-zero { stroke: var(--mm-text-tertiary); stroke-width: 1; }
.axis-dot { fill: var(--mm-accent); }
.details { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; margin: 2rem 0; }
.details h2 { font-size: 0.95rem; margin: 0 0 0.75rem; }
.details p { font-size: 0.867rem; color: var(--mm-text-secondary); line-height: 1.9; margin: 0.5rem 0; }
.details .secondary { margin-top: 0.75rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
@media (max-width: 1000px) {
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .connection { align-items: stretch; flex-direction: column; }
  .connection-actions { align-items: start; }
  .connection-actions span { max-width: none; }
}
@media (max-width: 767.98px) {
  main { padding: 1.5rem 1rem 0; }
  .intro { align-items: start; }
  .local-badge { display: none; }
  .details { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .mobile { display: block; }
  .live-strip { flex-wrap: wrap; }
  .button-grid { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); }
  .stick-item output { font-size: 0.65rem; }
}