:root {
  color-scheme: light dark;
  --rh-bg: #ececec;
  --rh-panel: #ffffff;
  --rh-ink: #151515;
  --rh-muted: #626262;
  --rh-line: #222222;
  --rh-accent: #e22935;
  --rh-cyan: #10a9c2;
  --rh-lane-a: #ef3d5d;
  --rh-lane-b: #28b8d4;
  --rh-score: #087a37;
}

@media (prefers-color-scheme: dark) {
  :root {
    --rh-bg: #101114;
    --rh-panel: #1b1d22;
    --rh-ink: #f3f3f3;
    --rh-muted: #b0b2b8;
    --rh-line: #ececec;
    --rh-accent: #ff4f5b;
    --rh-cyan: #44d1e8;
    --rh-lane-a: #ff4f70;
    --rh-lane-b: #45c8e1;
    --rh-score: #7dffa2;
  }
}

.rhythm-page {
  margin: 0;
  background: var(--rh-bg);
  color: var(--rh-ink);
}

.rhythm-shell {
  width: min(1900px, calc(100% - 24px));
  margin: 0 auto;
  padding: 16px 0 56px;
}

.rhythm-titlebar,
.rhythm-tool-heading,
.rhythm-hud,
.rhythm-chart-info div,
.rhythm-best div,
.editor-readout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.rhythm-titlebar {
  padding: 24px 0 18px;
  border-bottom: 2px solid var(--rh-line);
}

.rhythm-titlebar p,
.rhythm-tool-heading p,
.rhythm-titlebar h1,
.rhythm-tool-heading h2 {
  margin: 0;
}

.rhythm-titlebar h1 {
  font-size: clamp(2rem, 5vw, 4.5rem);
  line-height: 1;
}

.rhythm-titlebar > p,
.rhythm-note,
.rhythm-status {
  color: var(--rh-muted);
}

.rhythm-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 2px solid var(--rh-line);
  border-top: 0;
  background: var(--rh-panel);
}
.rhythm-tabs.is-public { grid-template-columns: repeat(4, 1fr); }

.rhythm-tabs button {
  min-height: 48px;
  border: 0;
  border-right: 1px solid var(--rh-line);
  background: transparent;
  color: var(--rh-ink);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.rhythm-tabs button:last-child { border-right: 0; }
.rhythm-tabs button[aria-selected="true"] { background: var(--rh-ink); color: var(--rh-panel); }

.rhythm-view {
  margin-top: 18px;
  border: 2px solid var(--rh-line);
  background: var(--rh-panel);
  padding: 18px;
}

.rhythm-library-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 430px);
  gap: 18px;
  margin-top: 16px;
  align-items: start;
}

.rhythm-library-tools {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(110px, .7fr)) minmax(150px, 1fr);
  align-items: end;
  gap: 10px;
  margin-top: 14px;
}
.rhythm-library-tools label { display: grid; gap: 5px; font-weight: 900; }
.rhythm-library-tools label span { font: 850 .72rem/1 monospace; text-transform: uppercase; }
.rhythm-library-tools input,
.rhythm-library-tools select { width: 100%; min-width: 0; padding: 9px 10px; }

.rhythm-song-grid { display: grid; gap: 10px; }
.rhythm-song-card {
  display: grid;
  gap: 7px;
  width: 100%;
  min-height: 150px !important;
  padding: 16px !important;
  border: 2px solid var(--rh-line);
  box-sizing: border-box;
  background: var(--rh-panel);
  color: var(--rh-ink);
  text-align: left;
}
.rhythm-song-card:hover,
.rhythm-song-card:focus-within {
  border-color: var(--rh-accent);
  outline: 3px solid var(--rh-accent);
  outline-offset: -3px;
}
.rhythm-song-card.is-private { border-style: dashed; }
.rhythm-song-heading,
.rhythm-game-heading,
.rhythm-leaderboard-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.rhythm-song-heading strong { font-size: clamp(1.2rem, 3vw, 1.8rem); }
.rhythm-song-heading b { padding: 4px 7px; border: 1px solid var(--rh-line); font: 900 .75rem/1 monospace; }
.rhythm-song-artist,
.rhythm-song-details,
.rhythm-song-best { display: block; }
.rhythm-song-artist { font-weight: 800; }
.rhythm-song-details,
.rhythm-song-best { color: var(--rh-ink); font: 750 .95rem/1.4 monospace; }
.rhythm-song-best.has-score { color: var(--rh-score); font-weight: 900; }
.rhythm-song-plays { font: 850 .82rem/1.2 monospace; color: var(--rh-muted); }

.rhythm-song-difficulties {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--rh-line);
}
.rhythm-song-difficulties button {
  flex: 1 1 120px;
  min-height: 38px;
  padding: 7px 9px;
  border: 0;
  border-right: 1px solid var(--rh-line);
  font: 900 .82rem/1.2 monospace;
}
.rhythm-song-difficulties button:last-child { border-right: 0; }
.rhythm-song-difficulties button[aria-selected="true"] {
  background: var(--rh-ink);
  color: var(--rh-panel);
}
.rhythm-song-play { width: 100%; min-height: 42px; font-weight: 950 !important; }
.rhythm-song-empty { border: 2px dashed var(--rh-line); padding: 24px; text-align: center; color: var(--rh-muted); }
.rhythm-volume-setting { display: grid !important; grid-template-columns: auto minmax(160px, 1fr) 52px; align-items: center; gap: 10px; }
.rhythm-volume-setting input { width: 100%; }
.rhythm-volume-setting output { font: 900 .95rem/1 monospace; text-align: right; }

.rhythm-difficulty-meter { display: grid; grid-template-columns: repeat(15, 1fr); gap: 3px; height: 8px; }
.rhythm-difficulty-meter i { display: block; border: 1px solid var(--rh-line); background: transparent; }
.rhythm-difficulty-meter i.is-filled { background: var(--rh-accent); }

.rhythm-leaderboard { min-width: 340px; border: 2px solid var(--rh-line); background: var(--rh-panel); }
.rhythm-leaderboard-heading { padding: 12px; border-bottom: 2px solid var(--rh-line); }
.rhythm-leaderboard-heading h3 { margin: 2px 0 0; font-size: 1.15rem; }
.rhythm-leaderboard-heading span { color: var(--rh-ink); font: 800 .85rem/1.25 monospace; }
.rhythm-leaderboard ol { list-style: none; margin: 0; padding: 0; max-height: 610px; overflow-y: auto; }
.rhythm-leaderboard li { display: grid; grid-template-columns: 42px minmax(110px, 1fr) minmax(150px, auto); gap: 10px; align-items: center; padding: 11px 12px; border-bottom: 1px solid var(--rh-line); font-size: .95rem; }
.rhythm-leaderboard li:last-child { border-bottom: 0; }
.rhythm-leaderboard li strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rhythm-leaderboard-result { display: grid; justify-items: end; gap: 3px; white-space: nowrap; }
.rhythm-leaderboard-result strong { color: var(--rh-score); font: 950 1rem/1 monospace; font-variant-numeric: tabular-nums; }
.rhythm-leaderboard-result small { color: var(--rh-ink); font: 750 .78rem/1.15 monospace; }
.rhythm-leaderboard li.rhythm-leaderboard-empty { display: block; color: var(--rh-muted); text-align: center; padding: 28px 14px; }

.rhythm-stats-heading { align-items: end; }
.rhythm-stats-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
#rhythm-credit-balance { color: var(--rh-score); font: 950 1.15rem/1 monospace; }
.rhythm-stats-grid { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 10px; margin-top: 16px; }
.rhythm-stat-card { min-width: 0; border: 2px solid var(--rh-line); padding: 14px; background: var(--rh-panel); }
.rhythm-stat-card > span { display: block; color: var(--rh-muted); font: 850 .76rem/1.2 monospace; text-transform: uppercase; }
.rhythm-stat-card > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 9px; }
.rhythm-stat-card strong { color: var(--rh-score); font: 950 1.35rem/1 monospace; overflow-wrap: anywhere; }
.rhythm-stat-rank { color: var(--rh-cyan); font: 950 1rem/1 monospace; white-space: nowrap; }
.rhythm-stat-rank.is-gold { color: #b98000; }
.rhythm-stat-rank.is-silver { color: #657286; }
.rhythm-stat-rank.is-bronze { color: #a4521d; }
.rhythm-credit-history { margin-top: 16px; border: 2px solid var(--rh-line); }
.rhythm-credit-history ol { list-style: none; margin: 0; padding: 0; }
.rhythm-credit-history li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 12px; border-bottom: 1px solid var(--rh-line); }
.rhythm-credit-history li:last-child { border-bottom: 0; }
.rhythm-credit-history li strong { color: var(--rh-score); }
.rhythm-cosmetic-shop { margin-top: 16px; border: 2px solid var(--rh-line); }
#rhythm-cosmetic-grid { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 10px; padding: 12px; }
.rhythm-cosmetic-card { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 8px 10px; border: 1px solid var(--rh-line); padding: 10px; }
.rhythm-cosmetic-card > strong { overflow-wrap: anywhere; }
.rhythm-cosmetic-card button { grid-column: 1 / -1; width: 100%; }
.rhythm-cosmetic-preview { display: block; width: 40px; height: 40px; border: 2px solid var(--rh-line); box-sizing: border-box; }
.rhythm-cosmetic-preview.effect { background: #151923; box-shadow: inset 0 0 0 7px #45c8e1; }
.rhythm-cosmetic-preview[data-cosmetic="effect-burst"] { box-shadow: inset 0 0 0 7px #ff5a68, 0 0 0 3px #ffd75e; }
.rhythm-cosmetic-preview[data-cosmetic="effect-prism"] { background: linear-gradient(135deg, #ff4f70, #f7df5a, #45c8e1); box-shadow: inset 0 0 0 7px rgba(255,255,255,.45); }

@media (prefers-color-scheme: dark) {
  .rhythm-stat-rank.is-gold { color: #ffd75e; }
  .rhythm-stat-rank.is-silver { color: #d5deea; }
  .rhythm-stat-rank.is-bronze { color: #e7a06b; }
}

.rhythm-game-heading { margin-bottom: 14px; }
.rhythm-game-heading strong { text-align: right; }
.editor-publish { grid-template-columns: auto 1fr !important; align-items: center; }
.editor-publish input { width: 22px; min-height: 22px; }
.editor-admin-only[hidden] { display: none !important; }

.rhythm-play-layout {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(420px, 620px) minmax(220px, 280px);
  justify-content: center;
  align-items: start;
  gap: 20px;
}

.rhythm-play-layout:fullscreen,
.rhythm-play-layout.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  padding: 18px;
  overflow: auto;
  background: var(--rh-bg);
  grid-template-columns: minmax(240px, 320px) minmax(420px, 620px) minmax(220px, 300px);
  align-content: center;
}
.rhythm-play-layout:fullscreen .rhythm-stage-wrap,
.rhythm-play-layout.is-fullscreen .rhythm-stage-wrap { max-height: calc(100vh - 36px); }
.rhythm-play-layout:fullscreen #rhythm-stage,
.rhythm-play-layout.is-fullscreen #rhythm-stage { max-height: calc(100vh - 120px); }
.rhythm-fullscreen-exit { display: none; }
.rhythm-play-layout:fullscreen .rhythm-fullscreen-exit,
.rhythm-play-layout.is-fullscreen .rhythm-fullscreen-exit {
  display: block;
  position: fixed;
  z-index: 5;
  top: 12px;
  right: 12px;
}

.rhythm-sidebar,
.editor-fields,
.rhythm-settings {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.rhythm-sidebar > *,
.rhythm-sidebar select,
.rhythm-sidebar input { min-width: 0; max-width: 100%; }

.rhythm-chart-info strong,
.rhythm-chart-info span { overflow-wrap: anywhere; }

.rhythm-sidebar label,
.editor-fields label,
.rhythm-settings > label,
.editor-toolbar label,
.editor-scrubber {
  display: grid;
  gap: 6px;
  font-weight: 700;
}

.rhythm-page input,
.rhythm-page select,
.rhythm-page button,
.file-button {
  border: 2px solid var(--rh-line);
  border-radius: 0;
  background: var(--rh-panel);
  color: var(--rh-ink);
  font: inherit;
}

.rhythm-page input,
.rhythm-page select { min-height: 42px; padding: 7px 9px; box-sizing: border-box; }
.rhythm-page button,
.file-button { min-height: 42px; padding: 8px 14px; font-weight: 800; cursor: pointer; }
.rhythm-page button:disabled { opacity: .45; cursor: not-allowed; }
.rhythm-page button:hover:not(:disabled), .file-button:hover { background: var(--rh-ink); color: var(--rh-panel); }

.rhythm-chart-info,
.rhythm-best {
  margin: 0;
  border-block: 1px solid var(--rh-line);
  padding: 9px 0;
}

.rhythm-chart-info div + div,
.rhythm-best div + div { margin-top: 7px; }
.rhythm-chart-info span,
.rhythm-best dt { color: var(--rh-ink); font-weight: 750; }
.rhythm-chart-info span { flex: 0 0 54px; }
.rhythm-chart-info strong { min-width: 0; text-align: right; font-size: .96rem; }
.rhythm-best dd { margin: 0; font-weight: 900; }
#rhythm-best-score { color: var(--rh-score); font-variant-numeric: tabular-nums; }

.rhythm-modifiers {
  margin: 0;
  padding: 10px;
  border: 2px solid var(--rh-line);
  display: grid;
  gap: 10px;
}
.rhythm-modifiers legend { padding-inline: 5px; font-weight: 900; text-transform: uppercase; }
.rhythm-modifier-toggle {
  grid-template-columns: 22px 1fr;
  align-items: start;
}
.rhythm-modifier-toggle input { min-height: 0; width: 18px; height: 18px; margin: 2px 0 0; }
.rhythm-modifier-toggle span { display: grid; gap: 2px; }
.rhythm-modifier-toggle small { color: var(--rh-muted); font-weight: 500; line-height: 1.25; }
.rhythm-modifier-total {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--rh-line);
}
.rhythm-modifier-total strong { color: var(--rh-accent); font-variant-numeric: tabular-nums; }

.rhythm-actions,
.editor-toolbar,
.editor-lane-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
}

.rhythm-actions > * { flex: 1 1 130px; text-align: center; }
.file-button input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }

.rhythm-stage-wrap {
  position: relative;
  width: min(100%, 720px);
  margin-inline: auto;
  background: #090a0d;
  border: 2px solid var(--rh-line);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: contain;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.rhythm-stage-column { min-width: 0; width: 100%; }

.rhythm-stage-wrap[data-lanes="2"] { width: min(100%, 520px); }
.rhythm-stage-wrap[data-lanes="4"] { width: min(100%, 720px); }

.rhythm-stage-wrap * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.rhythm-hud {
  height: 48px;
  padding: 0 14px;
  color: #fff;
  background: #17191f;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
}

.rhythm-feedback {
  min-height: 40px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  background: #0f1116;
  color: #fff;
  border-top: 1px solid #343844;
  border-bottom: 1px solid #343844;
  font: 800 .82rem/1.1 monospace;
  letter-spacing: 0;
}
.rhythm-feedback #rhythm-judgment { font-size: 1.25rem; text-align: center; }
.rhythm-feedback #rhythm-timing { text-align: right; font-variant-numeric: tabular-nums; }
.rhythm-feedback #rhythm-run-state { color: #f7df5a; }

#rhythm-stage {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  max-height: calc(100vh - 210px);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  outline: 0;
}

.rhythm-live-panel {
  border: 2px solid var(--rh-line);
  background: var(--rh-panel);
  padding: 14px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  align-self: center;
}

.rhythm-live-panel > span { display: block; color: var(--rh-muted); font: 800 .78rem/1 monospace; }
.rhythm-live-panel > strong { display: block; margin: 10px 0 16px; font: 1000 4.5rem/.85 monospace; }
.rhythm-live-panel dl { margin: 0; }
.rhythm-live-panel dl div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--rh-line); }
.rhythm-live-panel dt { color: var(--rh-muted); }
.rhythm-live-panel dd { margin: 0; font-weight: 900; }

.rhythm-skip {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 52%;
  min-height: 0 !important;
  padding: 9px 13px !important;
  transform: translate(-50%, -50%);
  border-color: #ffffff !important;
  background: #111318 !important;
  color: #ffffff !important;
  font: 900 .9rem/1 monospace !important;
  white-space: nowrap;
}

.rhythm-countdown {
  position: absolute;
  inset-inline: 0;
  top: 44%;
  text-align: center;
  color: #fff;
  font-size: clamp(1.4rem, 5vw, 3rem);
  font-weight: 1000;
  pointer-events: none;
  text-shadow: 2px 2px #000;
}

.rhythm-countdown { top: 38%; font-size: clamp(4rem, 15vw, 9rem); }
.rhythm-countdown.is-resume-count { animation: rhythm-resume-count .7s linear both; }

@keyframes rhythm-resume-count {
  from { opacity: 0; transform: scale(.82); }
  to { opacity: 1; transform: scale(1); }
}

.rhythm-stage-wrap.is-paused #rhythm-stage,
.rhythm-stage-wrap.is-paused .rhythm-hud,
.rhythm-stage-wrap.is-paused .rhythm-feedback { filter: grayscale(1); opacity: .35; }

.rhythm-pause {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 10px;
  background: rgba(5, 6, 8, .64);
  color: #fff;
  text-align: center;
  pointer-events: none;
}
.rhythm-pause[hidden] { display: none; }
.rhythm-pause strong { font: 1000 clamp(2.5rem, 10vw, 5rem)/1 monospace; }
.rhythm-pause span { font: 800 1rem/1 monospace; }

.rhythm-replay-controls {
  margin-top: 10px;
  border: 2px solid var(--rh-line);
  background: var(--rh-panel);
  padding: 10px;
}
.rhythm-replay-controls[hidden] { display: none; }
#rhythm-replay-density,
#rhythm-practice-density { display: block; width: 100%; height: 70px; background: #111318; }
#rhythm-replay-seek,
#rhythm-practice-seek { width: 100%; margin: 8px 0; }
.rhythm-replay-controls > div { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.rhythm-replay-controls output { text-align: center; font-variant-numeric: tabular-nums; font-weight: 800; }
.rhythm-practice-controls small { display: block; margin-top: 8px; color: var(--rh-muted); line-height: 1.35; }
.rhythm-practice-speed { grid-template-columns: 1fr auto; align-items: center; }
.rhythm-practice-speed input { grid-column: 1 / -1; grid-row: 2; width: 100%; box-sizing: border-box; }
.rhythm-practice-speed output { grid-column: 2; grid-row: 1; font-weight: 900; font-variant-numeric: tabular-nums; }
.rhythm-status { min-height: 1.4em; margin: 14px 0 0; text-align: center; }

.calibration-pad {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 360px;
  margin: 18px 0;
  border: 2px solid var(--rh-line);
  background: #111318;
  color: #fff;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
  outline: 0;
}

#calibration-pulse {
  width: 90px;
  height: 90px;
  border: 5px solid #fff;
  background: transparent;
}

#calibration-runner {
  position: absolute;
  top: 24px;
  left: 50%;
  width: 26px;
  height: 26px;
  border: 4px solid #fff;
  background: var(--rh-pink);
  opacity: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.calibration-pad.is-pulse #calibration-pulse { background: var(--rh-cyan); transform: scale(1.12); }
.calibration-pad strong { position: absolute; bottom: 24px; inset-inline: 20px; }

.editor-heading-actions,
.editor-song-actions,
.editor-analysis-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.editor-heading-actions { justify-content: flex-end; }
.editor-setup-drawer {
  margin-top: 12px;
  border: 2px solid var(--rh-line);
  background: var(--rh-panel);
}
.editor-setup-drawer > summary {
  padding: 11px 14px;
  font-weight: 900;
  cursor: pointer;
  user-select: none;
}
.editor-setup-drawer[open] > summary { border-bottom: 2px solid var(--rh-line); }
.editor-song-setup {
  display: grid;
  grid-template-columns: minmax(260px, 420px) minmax(420px, 1fr);
  gap: 14px;
  padding: 12px;
  border-bottom: 1px solid var(--rh-line);
}
.editor-song-source { display: grid; align-content: start; gap: 10px; }
.editor-song-source label { display: grid; gap: 5px; font-weight: 900; }
.editor-song-source input { width: 100%; box-sizing: border-box; }
.editor-analysis[hidden] { display: none; }
.editor-analysis { display: grid; gap: 10px; }
.editor-analysis dl { display: grid; grid-template-columns: repeat(4, minmax(90px, 1fr)); gap: 6px; margin: 0; }
.editor-analysis dl div { padding: 8px; border: 1px solid var(--rh-line); min-width: 0; }
.editor-analysis dt { color: var(--rh-muted); font-size: .76rem; font-weight: 900; text-transform: uppercase; }
.editor-analysis dd { margin: 3px 0 0; font-size: 1.1rem; font-weight: 900; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.editor-analysis-actions button { flex: 1 1 110px; }
.editor-fields {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 12px;
}
.editor-fields > *, .editor-fields input, .editor-fields select { min-width: 0; width: 100%; box-sizing: border-box; }
.editor-wide { grid-column: span 2; }
.editor-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 12px;
  margin-top: 12px;
  align-items: start;
}
.editor-map-pane,
.editor-tool-rail > section,
.editor-file-actions {
  min-width: 0;
  border: 2px solid var(--rh-line);
  background: var(--rh-panel);
}
.editor-map-pane { padding: 10px; }
.editor-tool-rail { display: grid; gap: 10px; min-width: 0; }
.editor-tool-rail > section,
.editor-file-actions { padding: 10px; }
.editor-panel-heading { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.editor-panel-heading span { color: var(--rh-muted); font-size: .8rem; }
.editor-timeline-wrap { min-width: 0; }
#editor-timeline { display: block; width: 100%; height: clamp(300px, 48vh, 420px); border: 2px solid var(--rh-line); background: #111318; box-sizing: border-box; touch-action: none; outline: 0; }
#editor-timeline.is-vertical { width: min(100%, 620px); height: min(68vh, 760px); margin-inline: auto; }
.editor-scrubber { margin-top: 8px; }
.editor-toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  margin: 0 0 10px;
  align-items: end;
}
.editor-transport,
.editor-view-controls,
.editor-nudge-controls { display: flex; flex-wrap: wrap; gap: 6px; align-items: end; }
.editor-view-controls { justify-content: flex-end; }
.editor-toolbar label { min-width: 92px; }
.editor-toolbar label span { font-size: .75rem; }
.editor-toolbar select { min-height: 36px; padding-block: 4px; }
.editor-zoom-control { flex: 1 1 130px; max-width: 190px; }
.editor-lane-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.editor-lane-buttons button { min-width: 0; padding-inline: 6px; }
.editor-mouse-toggle { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; font-size: .82rem; font-weight: 800; }
.editor-mouse-toggle input { width: auto; }
.editor-binding-row { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 8px; }
.editor-binding-row input { width: 100%; min-width: 0; }
#editor-save-bindings { width: 100%; margin-top: 6px; }
.editor-readout { display: flex; justify-content: space-between; gap: 8px; font-variant-numeric: tabular-nums; margin-top: 5px; }
.editor-hold-control { display: grid; gap: 4px; margin-bottom: 8px; font-weight: 800; }
.editor-hold-control[hidden] { display: none; }
.editor-loop-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.editor-loop-actions #editor-loop-toggle { grid-column: 1 / -1; }
.editor-loop-actions #editor-loop-toggle[aria-pressed="true"] { background: var(--rh-ink); color: var(--rh-panel); }
.editor-loop-actions #editor-game-preview { grid-column: 1 / -1; }
#editor-loop-readout { font-variant-numeric: tabular-nums; text-align: right; }
.editor-selection {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: end;
}
.editor-selection > strong { grid-column: 1 / -1; }
.editor-selection label { display: grid; gap: 4px; font-weight: 800; }
.editor-selection strong { align-self: center; }
.editor-selection label:nth-of-type(2),
.editor-selection label:nth-of-type(3),
.editor-selection .editor-nudge-controls,
.editor-selection > #editor-delete { grid-column: 1 / -1; }
.editor-nudge-controls > * { flex: 1 1 0; }
.editor-file-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.editor-file-actions > * { min-width: 0; text-align: center; }
.editor-workspace[data-orientation="vertical"] { grid-template-columns: minmax(420px, 1fr) 300px; }
.editor-workspace[data-orientation="vertical"] .editor-toolbar { grid-template-columns: 1fr; }
.editor-workspace[data-orientation="vertical"] .editor-view-controls { justify-content: flex-start; }
.editor-submit-panel {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(240px, 1fr) minmax(260px, 1.3fr) auto;
  gap: 10px;
  align-items: end;
  margin-top: 14px;
  padding: 12px;
  border: 2px solid var(--rh-line);
}
.editor-submit-panel > div,
.editor-submit-panel label { display: grid; gap: 5px; }
.editor-submit-panel span { color: var(--rh-muted); font-size: .82rem; }
.editor-submit-panel textarea { resize: vertical; min-height: 42px; }

.editor-preview-dialog {
  width: min(560px, calc(100% - 24px));
  max-height: calc(100vh - 24px);
  border: 3px solid var(--rh-line);
  border-radius: 0;
  background: var(--rh-panel);
  color: var(--rh-ink);
  padding: 12px;
}
.editor-preview-dialog::backdrop { background: rgba(0, 0, 0, .82); }
.editor-preview-heading,
.editor-preview-readout { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.editor-preview-heading { margin-bottom: 10px; }
#editor-preview-stage { display: block; width: min(100%, 520px); height: auto; max-height: calc(100vh - 150px); margin-inline: auto; background: #090a0d; border: 2px solid var(--rh-line); }
.editor-preview-readout { margin-top: 8px; font: 800 .85rem/1 monospace; font-variant-numeric: tabular-nums; }

.rhythm-settings fieldset { border: 2px solid var(--rh-line); padding: 12px; }
.rhythm-settings legend { font-weight: 900; padding: 0 8px; }
.binding-row { display: grid; grid-template-columns: repeat(4, minmax(70px, 140px)); gap: 8px; }
.binding-row input { text-align: center; text-transform: uppercase; font-weight: 900; }

.rhythm-results {
  width: min(460px, calc(100% - 32px));
  border: 3px solid var(--rh-line);
  border-radius: 0;
  background: var(--rh-panel);
  color: var(--rh-ink);
  text-align: center;
  padding: 20px;
}

.rhythm-results::backdrop { background: rgba(0, 0, 0, .78); }
.rhythm-results form { text-align: right; }
.rhythm-results > strong { display: block; font-size: clamp(3rem, 12vw, 6rem); line-height: 1; font-variant-numeric: tabular-nums; }
.rhythm-results h2 { font-size: 3rem; margin: 8px; }
.rhythm-results dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; text-align: left; }
.rhythm-results dl div { border-top: 1px solid var(--rh-line); padding-top: 6px; }
.rhythm-results dd { margin: 0; font-weight: 900; }
.result-delta { min-height: 1.25em; margin: 8px 0 0; font-weight: 900; }
.result-delta.is-gain { color: #25b64f; }
.result-delta.is-loss { color: #ff5a68; }
.result-replay-actions,
.result-primary-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.result-replay-actions { grid-template-columns: repeat(3, 1fr); }
.result-primary-actions #result-close { background: var(--rh-ink); color: var(--rh-panel); }

.rhythm-video-export {
  width: min(94vw, 500px);
  max-height: 94vh;
  border: 3px solid var(--rh-line);
  border-radius: 0;
  background: var(--rh-panel);
  color: var(--rh-ink);
  padding: 14px;
  text-align: center;
}
.rhythm-video-export::backdrop { background: rgba(0, 0, 0, .86); }
.rhythm-video-export form { text-align: right; }
.rhythm-video-export > p { margin: 8px 0; }
.rhythm-video-export canvas {
  display: block;
  width: auto;
  max-width: 100%;
  height: min(68vh, 620px);
  margin: 8px auto;
  border: 2px solid #343b49;
  background: #090a0d;
}
.rhythm-video-export progress { display: block; width: 100%; height: 18px; }
.rhythm-video-export strong { display: block; margin-top: 8px; }

@media (max-width: 1050px) {
  .rhythm-stats-grid { grid-template-columns: repeat(3, minmax(140px, 1fr)); }
  #rhythm-cosmetic-grid { grid-template-columns: repeat(3, minmax(140px, 1fr)); }
  .rhythm-play-layout { grid-template-columns: minmax(210px, 280px) minmax(340px, 520px); }
  .rhythm-live-panel { grid-column: 1 / -1; }
  .rhythm-live-panel dl { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rh-line); }
  .rhythm-live-panel dl div { display: grid; gap: 4px; border-top: 0; }
  .editor-song-setup { grid-template-columns: 1fr; }
  .editor-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .editor-submit-panel { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 850px) {
  .rhythm-library-layout,
  .rhythm-play-layout,
  .editor-workspace,
  .editor-workspace[data-orientation="vertical"] { grid-template-columns: 1fr; }
  .editor-toolbar { grid-template-columns: 1fr; }
  .editor-view-controls { justify-content: flex-start; }
  .editor-tool-rail { grid-template-columns: 1fr 1fr; }
  .editor-file-actions { grid-column: 1 / -1; }
  .rhythm-play-layout:fullscreen,
  .rhythm-play-layout.is-fullscreen { grid-template-columns: 1fr; align-content: start; }
  .rhythm-sidebar { grid-template-columns: 1fr 1fr; }
  .rhythm-sidebar > * { min-width: 0; }
  .rhythm-stage-column { order: -2; }
  .rhythm-live-panel { order: -1; grid-column: auto; }
  .rhythm-library-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rhythm-library-search { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .rhythm-shell { width: min(100% - 16px, 1500px); padding-top: 8px; }
  .rhythm-titlebar { align-items: flex-end; }
  .rhythm-titlebar > p { display: none; }
  .rhythm-tool-heading { align-items: stretch; flex-direction: column; }
  .rhythm-library-tools { grid-template-columns: 1fr 1fr; }
  .rhythm-tabs { grid-template-columns: 1fr 1fr; }
  .rhythm-tabs.is-public { grid-template-columns: repeat(2, 1fr); }
  .rhythm-tabs.is-public button { border-bottom: 0; }
  .rhythm-tabs button:nth-child(2) { border-right: 0; }
  .rhythm-tabs button:nth-child(-n+2) { border-bottom: 1px solid var(--rh-line); }
  .rhythm-tabs.is-public button:nth-child(-n+3) { border-bottom: 1px solid var(--rh-line); }
  .rhythm-tabs.is-public button:nth-child(2) { border-right: 0; }
  .rhythm-stats-heading { align-items: stretch; flex-direction: column; }
  .rhythm-stats-actions { justify-content: space-between; }
  .rhythm-stats-grid { grid-template-columns: 1fr 1fr; }
  #rhythm-cosmetic-grid { grid-template-columns: 1fr 1fr; }
  .rhythm-view { padding: 10px; }
  .rhythm-song-card { min-height: 138px !important; padding: 12px !important; }
  .rhythm-leaderboard { min-width: 0; }
  .rhythm-leaderboard li { grid-template-columns: 38px minmax(90px, 1fr) minmax(118px, auto); font-size: .88rem; }
  .rhythm-leaderboard li span { white-space: normal; }
  .rhythm-game-heading { align-items: stretch; flex-direction: column; }
  .rhythm-game-heading strong { text-align: left; }
  .rhythm-sidebar,
  .editor-fields { grid-template-columns: 1fr; }
  .editor-wide { grid-column: auto; }
  #rhythm-stage { max-height: none; }
  .rhythm-hud { font-size: .82rem; padding-inline: 8px; }
  .rhythm-feedback { grid-template-columns: 1fr auto; padding-inline: 8px; }
  .rhythm-feedback #rhythm-timing { display: none; }
  .rhythm-live-panel dl { grid-template-columns: 1fr 1fr; }
  .rhythm-replay-controls > div { grid-template-columns: 1fr 1fr; }
  .rhythm-replay-controls output { grid-column: 1 / -1; grid-row: 1; }
  .editor-tool-rail { grid-template-columns: 1fr; }
  .editor-file-actions { grid-column: auto; }
  .editor-selection { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editor-selection > * { min-width: 0; width: 100%; box-sizing: border-box; }
  .editor-analysis dl { grid-template-columns: 1fr 1fr; }
  .editor-heading-actions { align-items: flex-end; flex-direction: column; }
  .editor-submit-panel { grid-template-columns: 1fr; }
  #editor-timeline { height: 340px; }
  .binding-row { grid-template-columns: repeat(2, 1fr); }
  .result-replay-actions { grid-template-columns: 1fr; }
}