@font-face {
  font-family: "SongRealm HarmonyOS Sans SC";
  src: url("../assets/fonts/HarmonyOS_Sans_SC_Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "SongRealm HarmonyOS Sans SC";
  src: url("../assets/fonts/HarmonyOS_Sans_SC_Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "SongRealm LXGW WenKai Lite";
  src: url("../assets/fonts/LXGWWenKaiLite-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "SongRealm Noto Sans SC";
  src: url("../assets/fonts/NotoSansSC-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "SongRealm Noto Serif SC";
  src: url("../assets/fonts/NotoSerifSC-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: "SongRealm ZCOOL XiaoWei";
  src: url("../assets/fonts/ZCOOLXiaoWei-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "SongRealm Ma Shan Zheng";
  src: url("../assets/fonts/MaShanZheng-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "SongRealm Long Cang";
  src: url("../assets/fonts/LongCang-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "SongRealm Zhi Mang Xing";
  src: url("../assets/fonts/ZhiMangXing-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

.practice-studio[hidden] { display: none !important; }
/* Only the lyric paint is promoted while the coach overlaps its band. The
   original invisible glyphs retain editing hit regions; no duplicate ink. */
[data-coach-lyric-foreground-source] :is(.practice-halfbeat-lyric-copy, .practice-halfbeat-original-char, .practice-halfbeat-lyric-item.is-placeholder, .practice-halfbeat-jyutping) {
  /* Opacity-0 glyphs still paint. Overlay already draws these; hiding paint
     keeps the live strip's first commit from doubling ~270 lyric rasters that
     OBS 60fps records as a freeze. Hit targets stay on the source nodes in
     edit mode, when this overlay attribute is not applied. */
  visibility: hidden;
  opacity: 0 !important;
}
.practice-coach-lyric-foreground { position: fixed; z-index: 2; overflow: hidden; pointer-events: none; contain: layout style paint; }
.practice-coach-lyric-foreground[hidden] { display: none !important; }
.practice-coach-lyric-foreground .practice-halfbeat-viewport {
  /* Same skip container as the source cue viewport. Do not copy its teaching
     chrome (gradient, grab cursor, bottom line) onto the transparent overlay. */
  position: absolute;
  inset: 0;
  overflow: hidden;
  contain: layout style;
  transform: none;
  border: 0;
  background: none;
  cursor: inherit;
  touch-action: none;
}
.practice-coach-lyric-foreground .practice-coach-lyric-shell {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  width: var(--coach-lyric-width) !important;
  height: var(--coach-lyric-height) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform-origin: 0 0;
  transform: scale(var(--coach-lyric-scale)) !important;
  overflow: visible !important;
  pointer-events: none !important;
}
.practice-coach-lyric-foreground * { pointer-events: none !important; }
.practice-coach-lyric-foreground :is(.practice-coach-lyric-shell, .practice-halfbeat-viewport, .practice-halfbeat-track, .practice-halfbeat-node)::before,
.practice-coach-lyric-foreground :is(.practice-coach-lyric-shell, .practice-halfbeat-viewport, .practice-halfbeat-track, .practice-halfbeat-node)::after {
  display: none !important;
}
.practice-coach-lyric-foreground :is(.practice-halfbeat-track, .practice-halfbeat-node) {
  background: none !important;
  box-shadow: none !important;
}
/* The stored names remain compatible with earlier coach-only preferences;
   edge effects now apply to lyric content on every rehearsal surface. */
[data-lyric-coach-shadow="true"] :is(.practice-lyric-char:not(:has(.practice-lyric-glyph)), .practice-lyric-comparison-char:not(:has(.practice-lyric-glyph)), .practice-lyric-glyph, .practice-beat-lyric-char, .practice-halfbeat-lyric-copy, .practice-halfbeat-original-char, [data-lyric-reader-text]) {
  filter: drop-shadow(var(--practice-lyric-coach-shadow-offset-x, 0px) var(--practice-lyric-coach-shadow-offset-y, 1px) var(--practice-lyric-coach-shadow-blur, 1px) var(--practice-lyric-coach-shadow-user, var(--app-lyric-shadow)));
}
[data-lyric-coach-outline="true"] :is(.practice-lyric-char:not(:has(.practice-lyric-glyph)), .practice-lyric-comparison-char:not(:has(.practice-lyric-glyph)), .practice-lyric-glyph, .practice-beat-lyric-char, .practice-halfbeat-lyric-copy, .practice-halfbeat-original-char, [data-lyric-reader-text]) {
  -webkit-text-stroke: var(--practice-lyric-coach-outline-width, .65px) var(--practice-lyric-coach-outline-user, var(--app-lyric-outline));
  paint-order: stroke fill;
}
.practice-lyric-display-coach-effects > div {
  display: flex;
  align-items: center;
  gap: 10px 24px;
  flex-wrap: wrap;
}
.practice-lyric-display-settings-panel .practice-lyric-display-coach-effects label {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.practice-lyric-display-coach-effects input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
}
.practice-lyric-display-coach-effects input[type="color"] {
  width: 40px;
  height: 30px;
}
.practice-lyric-display-coach-effects > .practice-lyric-edge-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 20px;
  margin-top: 12px;
}
.practice-lyric-display-settings-panel .practice-lyric-display-coach-effects .practice-lyric-edge-metrics label {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  min-width: 0;
}
.practice-lyric-edge-metrics input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  margin: 0;
}
.practice-lyric-edge-metrics output { font-variant-numeric: tabular-nums; }
.practice-lyric-display-color-details > .practice-lyric-display-coach-effects { grid-column: 1 / -1; }
@media (max-width: 700px) {
  .practice-lyric-display-coach-effects > .practice-lyric-edge-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.practice-empty[hidden],
.practice-workspace[hidden],
.practice-runway-empty[hidden] { display: none !important; }
.practice-pitch-editor[hidden] { display: none !important; }
.practice-pitch-editor [data-action="promote-vocal-comp"],
.practice-pitch-editor .practice-pitch-effects { display: none !important; }
.practice-studio {
  --practice-bg: var(--practice-stage-bg);
  --practice-panel: var(--app-panel);
  --practice-line: var(--app-line);
  --practice-muted: var(--app-muted);
  --practice-text: var(--app-text);
  --practice-coral: var(--app-coral);
  --practice-amber: var(--app-warm);
  --practice-cyan: var(--app-secondary);
  --practice-green: var(--app-accent);
  --practice-lyric-font-harmony: "SongRealm HarmonyOS Sans SC", "HarmonyOS Sans SC", "Microsoft YaHei UI", sans-serif;
  --practice-lyric-font-noto: "SongRealm Noto Sans SC", "Noto Sans SC", "Microsoft YaHei UI", sans-serif;
  --practice-lyric-font-serif: "SongRealm Noto Serif SC", serif;
  --practice-lyric-font-xiaowei: "SongRealm ZCOOL XiaoWei", serif;
  --practice-lyric-original-font-variation: normal;
  --practice-lyric-remix-font-variation: normal;
  --practice-lyric-font-songti: "Songti SC", "STSong", "SimSun", serif;
  --practice-lyric-font-kaiti: "KaiTi", "STKaiti", "Kaiti SC", serif;
  --practice-lyric-font-wenkai: "SongRealm LXGW WenKai Lite", "LXGW WenKai Lite", "KaiTi", serif;
  --practice-lyric-font-mashan: "SongRealm Ma Shan Zheng", "Ma Shan Zheng", "KaiTi", cursive;
  --practice-lyric-font-longcang: "SongRealm Long Cang", "Long Cang", "KaiTi", cursive;
  --practice-lyric-font-zhimang: "SongRealm Zhi Mang Xing", "Zhi Mang Xing", "KaiTi", cursive;
  --practice-lyric-original-font-family: var(--practice-lyric-font-songti);
  --practice-lyric-remix-font-family: var(--practice-lyric-font-harmony);
  --practice-side-width: clamp(320px, 24vw, 380px);
  position: relative;
  display: flex;
  flex-direction: column;
  height: min(var(--practice-workspace-height, calc(100vh - 70px)), calc(100vh - var(--practice-workspace-top, 70px)));
  min-height: 0;
  max-height: min(var(--practice-workspace-height, calc(100vh - 70px)), calc(100vh - var(--practice-workspace-top, 70px)));
  margin: 0;
  color: var(--practice-text);
  background: var(--practice-bg);
  border-top: 1px solid var(--practice-line);
  overflow: hidden;
}

.practice-studio[data-lyric-original-font="harmony"] { --practice-lyric-original-font-family: var(--practice-lyric-font-harmony); }
.practice-studio[data-lyric-original-font="noto"] { --practice-lyric-original-font-family: var(--practice-lyric-font-noto); }
.practice-studio[data-lyric-original-font="noto-light"] { --practice-lyric-original-font-family: var(--practice-lyric-font-noto); --practice-lyric-original-font-variation: "wght" 300; }
.practice-studio[data-lyric-original-font="noto-thin"] { --practice-lyric-original-font-family: var(--practice-lyric-font-noto); --practice-lyric-original-font-variation: "wght" 100; }
.practice-studio[data-lyric-original-font="serif-light"] { --practice-lyric-original-font-family: var(--practice-lyric-font-serif); --practice-lyric-original-font-variation: "wght" 300; }
.practice-studio[data-lyric-original-font="xiaowei"] { --practice-lyric-original-font-family: var(--practice-lyric-font-xiaowei); }
.practice-studio[data-lyric-original-font="songti"] { --practice-lyric-original-font-family: var(--practice-lyric-font-songti); }
.practice-studio[data-lyric-original-font="kaiti"] { --practice-lyric-original-font-family: var(--practice-lyric-font-kaiti); }
.practice-studio[data-lyric-original-font="wenkai"] { --practice-lyric-original-font-family: var(--practice-lyric-font-wenkai); }
.practice-studio[data-lyric-original-font="mashan"] { --practice-lyric-original-font-family: var(--practice-lyric-font-mashan); }
.practice-studio[data-lyric-original-font="longcang"] { --practice-lyric-original-font-family: var(--practice-lyric-font-longcang); }
.practice-studio[data-lyric-original-font="zhimang"] { --practice-lyric-original-font-family: var(--practice-lyric-font-zhimang); }
.practice-studio[data-lyric-remix-font="harmony"] { --practice-lyric-remix-font-family: var(--practice-lyric-font-harmony); }
.practice-studio[data-lyric-remix-font="noto"] { --practice-lyric-remix-font-family: var(--practice-lyric-font-noto); }
.practice-studio[data-lyric-remix-font="noto-light"] { --practice-lyric-remix-font-family: var(--practice-lyric-font-noto); --practice-lyric-remix-font-variation: "wght" 300; }
.practice-studio[data-lyric-remix-font="noto-thin"] { --practice-lyric-remix-font-family: var(--practice-lyric-font-noto); --practice-lyric-remix-font-variation: "wght" 100; }
.practice-studio[data-lyric-remix-font="serif-light"] { --practice-lyric-remix-font-family: var(--practice-lyric-font-serif); --practice-lyric-remix-font-variation: "wght" 300; }
.practice-studio[data-lyric-remix-font="xiaowei"] { --practice-lyric-remix-font-family: var(--practice-lyric-font-xiaowei); }
.practice-studio[data-lyric-remix-font="songti"] { --practice-lyric-remix-font-family: var(--practice-lyric-font-songti); }
.practice-studio[data-lyric-remix-font="kaiti"] { --practice-lyric-remix-font-family: var(--practice-lyric-font-kaiti); }
.practice-studio[data-lyric-remix-font="wenkai"] { --practice-lyric-remix-font-family: var(--practice-lyric-font-wenkai); }
.practice-studio[data-lyric-remix-font="mashan"] { --practice-lyric-remix-font-family: var(--practice-lyric-font-mashan); }
.practice-studio[data-lyric-remix-font="longcang"] { --practice-lyric-remix-font-family: var(--practice-lyric-font-longcang); }
.practice-studio[data-lyric-remix-font="zhimang"] { --practice-lyric-remix-font-family: var(--practice-lyric-font-zhimang); }

.practice-studio {
  --practice-lyric-original-display-font: var(--practice-lyric-original-font-family);
  --practice-lyric-remix-display-font: var(--practice-lyric-remix-font-family);
  --practice-lyric-original-display-variation: var(--practice-lyric-original-font-variation);
  --practice-lyric-remix-display-variation: var(--practice-lyric-remix-font-variation);
}
.practice-studio[data-lyric-style-swapped="true"] {
  --practice-lyric-original-display-font: var(--practice-lyric-remix-font-family);
  --practice-lyric-remix-display-font: var(--practice-lyric-original-font-family);
  --practice-lyric-original-display-variation: var(--practice-lyric-remix-font-variation);
  --practice-lyric-remix-display-variation: var(--practice-lyric-original-font-variation);
}
.practice-lyrics [data-lyric-role="original"],
.practice-entry-cue[data-primary-role="original"] .practice-halfbeat-lyric-item[data-lyric-role="primary"],
.practice-entry-cue[data-comparison-role="original"] .practice-halfbeat-lyric-item[data-lyric-role="comparison"],
.practice-halfbeat-lyric-item[data-lyric-role="original"],
.practice-entry-cue[data-primary-role="original"] :is([data-practice-entry-cue-lyric-previous], [data-practice-entry-cue-lyric-current], [data-practice-entry-cue-lyric-next]),
.practice-entry-cue[data-comparison-role="original"] [data-practice-entry-cue-lyric-comparison] {
  font-family: var(--practice-lyric-original-display-font);
  font-variation-settings: var(--practice-lyric-original-display-variation);
}
.practice-lyrics [data-lyric-role="remix"],
.practice-entry-cue[data-primary-role="remix"] .practice-halfbeat-lyric-item[data-lyric-role="primary"],
.practice-entry-cue[data-comparison-role="remix"] .practice-halfbeat-lyric-item[data-lyric-role="comparison"],
.practice-halfbeat-lyric-item[data-lyric-role="remix"],
.practice-entry-cue[data-primary-role="remix"] :is([data-practice-entry-cue-lyric-previous], [data-practice-entry-cue-lyric-current], [data-practice-entry-cue-lyric-next]),
.practice-entry-cue[data-comparison-role="remix"] [data-practice-entry-cue-lyric-comparison] {
  font-family: var(--practice-lyric-remix-display-font);
  font-variation-settings: var(--practice-lyric-remix-display-variation);
}
.practice-lyric-jyutping,
.practice-lyric-version-label,
.practice-lyric-comparison-label,
.practice-halfbeat-jyutping,
.practice-halfbeat-lyric-item > small {
  font-family: var(--font-family-base);
}

.practice-accompaniment-pitch-open {
  border-color: color-mix(in srgb, var(--app-accent) 45%, var(--app-line));
  background: color-mix(in srgb, var(--app-accent-soft) 62%, var(--app-panel));
  color: var(--app-text);
}

.practice-accompaniment-pitch-panel {
  margin: 10px 18px 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--app-accent) 38%, var(--app-line));
  border-radius: 16px;
  background: color-mix(in srgb, var(--app-panel) 92%, var(--app-accent-soft));
  color: var(--app-text);
  box-shadow: 0 18px 45px color-mix(in srgb, var(--app-bg) 58%, transparent);
}

.practice-accompaniment-pitch-panel[hidden] {
  display: none;
}

.practice-studio.accompaniment-pitch-open .practice-stage {
  overflow-y: auto;
}

.practice-studio.accompaniment-pitch-open .practice-lyrics,
.practice-studio.accompaniment-pitch-open .practice-entry-cue {
  display: none;
}

.practice-studio.accompaniment-pitch-open .practice-runway {
  flex-basis: clamp(190px, 24vh, 250px);
  height: clamp(190px, 24vh, 250px);
  min-height: 190px;
}

.practice-accompaniment-pitch-panel > header,
.practice-accompaniment-pitch-panel > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.practice-accompaniment-pitch-panel > header > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.practice-accompaniment-pitch-panel > header span,
.practice-accompaniment-pitch-grid > label > span,
.practice-accompaniment-phrase > span {
  color: var(--app-muted);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.practice-accompaniment-pitch-panel > header strong {
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.practice-accompaniment-pitch-panel > header button {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 12px;
}

.practice-accompaniment-pitch-grid {
  display: grid;
  grid-template-columns: minmax(150px, .8fr) minmax(280px, 1.8fr) minmax(180px, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.practice-accompaniment-pitch-grid > label,
.practice-accompaniment-phrase {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--app-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--app-panel-2) 72%, var(--app-panel));
}

.practice-accompaniment-pitch-grid select {
  width: 100%;
  min-height: 38px;
}

.practice-accompaniment-backend > small {
  color: var(--app-faint);
  font-size: 10px;
  line-height: 1.45;
}

.practice-accompaniment-custom-range {
  grid-column: 1 / -1;
  border-top: 1px solid var(--app-line);
  padding-top: 8px;
  color: var(--app-muted);
  font-size: 11px;
}

.practice-accompaniment-custom-range summary {
  width: max-content;
  cursor: pointer;
  font-weight: 700;
}

.practice-accompaniment-custom-range > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr)) auto;
  align-items: end;
  gap: 8px;
  margin-top: 8px;
}

.practice-accompaniment-custom-range label {
  display: grid;
  gap: 4px;
}

.practice-accompaniment-custom-range input {
  width: 100%;
  min-height: 36px;
}

.practice-accompaniment-phrase > strong {
  overflow: hidden;
  min-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.practice-accompaniment-phrase > div,
.practice-accompaniment-ab {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.practice-accompaniment-phrase button,
.practice-accompaniment-ab button {
  min-height: 34px;
  padding: 0 11px;
}

.practice-accompaniment-pitch-summary {
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--app-accent-soft) 48%, var(--app-panel-2));
  color: color-mix(in srgb, var(--app-accent) 64%, var(--app-text));
  font-size: 12px;
  font-weight: 700;
}

.practice-accompaniment-region-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

.practice-accompaniment-region-list[hidden] {
  display: none;
}

.practice-accompaniment-region-list > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 5px 4px 9px;
  border: 1px solid var(--app-line);
  border-radius: 999px;
  background: var(--app-panel-2);
  font-size: 11px;
}

.practice-accompaniment-region-list em {
  color: var(--app-accent);
  font-style: normal;
}

.practice-accompaniment-region-list button {
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  border-radius: 50%;
}

.practice-accompaniment-pitch-progress {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto minmax(160px, auto);
  align-items: center;
  gap: 9px;
  margin-top: 9px;
  color: var(--app-muted);
  font-size: 11px;
}

.practice-accompaniment-pitch-progress[hidden] {
  display: none;
}

.practice-accompaniment-pitch-progress > div {
  overflow: hidden;
  height: 6px;
  border-radius: 999px;
  background: var(--app-line);
}

.practice-accompaniment-pitch-progress > div > span {
  display: block;
  width: var(--accompaniment-pitch-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--app-accent);
  transition: width 180ms ease;
}

.practice-accompaniment-pitch-panel > footer {
  margin-top: 11px;
}

.practice-accompaniment-pitch-primary {
  min-height: 40px;
  padding-inline: 18px;
  border-color: var(--app-accent);
  background: var(--app-accent);
  color: var(--app-accent-ink);
  font-weight: 800;
}

@media (max-width: 1120px) {
  .practice-accompaniment-pitch-grid {
    grid-template-columns: 1fr 1.6fr;
  }

  .practice-accompaniment-custom-range > div {
    grid-template-columns: 1fr 1fr;
  }

  .practice-accompaniment-backend {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .practice-accompaniment-pitch-panel {
    margin-inline: 10px;
  }

  .practice-accompaniment-pitch-grid {
    grid-template-columns: 1fr;
  }

  .practice-accompaniment-backend {
    grid-column: auto;
  }

  .practice-accompaniment-pitch-panel > footer {
    align-items: stretch;
    flex-direction: column;
  }

  .practice-accompaniment-pitch-primary {
    width: 100%;
  }

  .practice-accompaniment-pitch-progress {
    grid-template-columns: 1fr auto;
  }

  .practice-accompaniment-pitch-progress small {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .practice-accompaniment-pitch-progress > div > span {
    transition: none;
  }
}
.practice-head {
  position: relative;
  /* Keep the ordinary header below full-workspace editors. Only promote its
     stacking context while a command menu is actually open, otherwise this
     entire row can intercept the editor transport underneath it. */
  z-index: 100;
  min-height: 56px;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto 36px;
  align-items: center;
  gap: 14px;
  padding: 8px 18px;
  border-bottom: 1px solid var(--practice-line);
  background: var(--practice-header-bg);
}
.practice-head:has(.practice-head-actions:not([data-head-overflow="inline"]) .practice-head-more-tools[open]) {
  z-index: var(--app-layer-menu, 2147483599);
}
.practice-calibration-guide {
  display: grid;
  grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr);
  align-items: center;
  gap: 18px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--practice-line);
  background: color-mix(in srgb, var(--app-accent-soft) 46%, var(--app-panel));
}
.practice-calibration-guide[hidden] { display: none !important; }
.practice-calibration-guide > header { min-width: 0; display: flex; align-items: flex-start; gap: 9px; }
.practice-calibration-guide > header > span { padding: 4px 7px; border: 1px solid var(--button-accent-border); border-radius: 999px; color: var(--app-accent); background: var(--app-accent-soft); font-size: 12px; font-weight: 800; white-space: nowrap; }
.practice-calibration-guide > header > div { min-width: 0; display: grid; gap: 4px; }
.practice-calibration-guide > header strong { color: var(--app-text); font-size: 13px; }
.practice-calibration-guide > header small { color: var(--app-muted); font-size: 12px; line-height: 1.45; }
.practice-calibration-guide ol { min-width: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin: 0; padding: 0; list-style: none; }
.practice-calibration-guide li { min-width: 0; display: grid; grid-template-columns: 24px minmax(0,1fr) auto; align-items: center; gap: 7px; padding: 8px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-panel); }
.practice-calibration-guide li.ready { border-color: color-mix(in srgb, var(--status-success-text) 34%, var(--app-line)); background: color-mix(in srgb, var(--status-success-bg) 48%, var(--app-panel)); }
.practice-calibration-guide li > span { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--app-line); border-radius: 5px; color: var(--app-accent); font: 800 12px var(--font-family-mono); }
.practice-calibration-guide li.ready > span { color: var(--status-success-text); border-color: color-mix(in srgb, var(--status-success-text) 42%, var(--app-line)); }
.practice-calibration-guide li > div { min-width: 0; display: grid; gap: 3px; }
.practice-calibration-guide li strong,.practice-calibration-guide li small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.practice-calibration-guide li strong { color: var(--app-text); font-size: 13px; }
.practice-calibration-guide li small { color: var(--app-muted); font-size: 12px; }
.practice-calibration-guide li button { min-height: 30px; padding: 0 8px; border: 1px solid var(--button-accent-border); border-radius: 5px; color: var(--button-accent-text); background: var(--button-accent-bg); font-size: 12px; font-weight: 800; white-space: nowrap; }
.practice-calibration-guide li button:disabled { cursor: not-allowed; opacity: .46; }
.practice-beat-map-workbench {
  display: grid;
  gap: 9px;
  padding: 10px 18px 11px;
  border-bottom: 1px solid var(--practice-line);
  color: var(--app-text);
  background: color-mix(in srgb, var(--app-panel) 94%, var(--app-bg));
}
.practice-beat-map-workbench[hidden] { display: none !important; }
.practice-beat-map-workbench-head,
.practice-beat-map-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.practice-beat-map-return {
  min-height: 34px;
  flex: 0 0 auto;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--app-accent) 42%, var(--app-line));
  border-radius: 7px;
  color: var(--app-accent);
  background: var(--button-secondary-bg);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}
.practice-beat-map-return:hover,
.practice-beat-map-return:focus-visible { border-color: var(--app-accent); color: var(--app-text); background: var(--button-secondary-bg-hover); }
.practice-beat-map-workbench-head > div:first-child { min-width: 0; display: grid; grid-template-columns: auto auto minmax(0,1fr); align-items: baseline; gap: 8px; }
.practice-beat-map-workbench-head > div:first-child > span { color: var(--app-accent); font-size: 11px; font-weight: 850; letter-spacing: .06em; }
.practice-beat-map-workbench-head strong { font-size: 14px; }
.practice-beat-map-workbench-head small { overflow: hidden; color: var(--app-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.practice-beat-map-analysis-entry { min-width: 0; display: inline-flex; align-items: center; gap: 8px; }
.practice-beat-map-analysis-entry button { min-height: 34px; padding: 0 12px; border: 1px solid var(--button-accent-border); border-radius: 7px; color: var(--button-accent-text); background: var(--button-accent-bg); font-size: 12px; font-weight: 850; white-space: nowrap; }
.practice-beat-map-analysis-entry button:disabled { cursor: wait; opacity: .58; }
.practice-beat-map-analysis-entry small { max-width: 300px; font-size: 12px; line-height: 1.35; }
.practice-beat-map-summary { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.practice-beat-map-summary :is(b,span,em) { min-height: 26px; display: inline-flex; align-items: center; padding: 0 8px; border: 1px solid var(--app-line); border-radius: 999px; font-size: 12px; font-style: normal; }
.practice-beat-map-narrow-settings-toggle { display: none; min-height: 28px; padding: 0 10px; border: 1px solid var(--app-line); border-radius: 6px; color: var(--app-text); background: var(--button-secondary-bg); font-size: 12px; font-weight: 750; }
.practice-beat-map-summary b { color: var(--app-accent); border-color: color-mix(in srgb, var(--app-accent) 44%, var(--app-line)); background: var(--app-accent-soft); }
.practice-beat-map-summary em[data-state="dirty"] { color: var(--status-warning-text); border-color: var(--status-warning-border); background: var(--status-warning-bg); }
.practice-beat-map-summary em[data-state="saved"] { color: var(--status-success-text); border-color: var(--status-success-border); background: var(--status-success-bg); }
.practice-beat-map-workbench-grid { min-width: 0; display: grid; grid-template-columns: minmax(220px,.72fr) minmax(430px,1.8fr) minmax(220px,.72fr); gap: 10px; }
.practice-beat-map-decisions,
.practice-beat-map-timeline-panel,
.practice-beat-map-impact { min-width: 0; padding: 9px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-panel); }
.practice-beat-map-decisions { display: grid; align-content: start; gap: 7px; }
.practice-beat-map-decisions label { min-width: 0; display: grid; grid-template-columns: 68px minmax(0,1fr); align-items: center; gap: 7px; color: var(--app-muted); font-size: 12px; }
.practice-beat-map-decisions select { width: 100%; min-height: 30px; color: var(--app-text); font-size: 12px; }
.practice-beat-map-phase-calibration {
  min-width: 0;
  display: grid;
  grid-column: 1 / -1;
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--app-accent) 42%, var(--app-line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--app-accent-soft) 46%, var(--app-panel));
}
.practice-beat-map-phase-calibration > header { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.practice-beat-map-phase-calibration > header > div { min-width: 0; display: grid; gap: 2px; }
.practice-beat-map-phase-calibration > header strong { color: var(--app-text); font-size: 13px; }
.practice-beat-map-phase-calibration > header small,
.practice-beat-map-phase-note { color: var(--app-muted); font-size: 12px; line-height: 1.45; }
.practice-beat-map-phase-calibration > header > span {
  flex: 0 0 auto;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid var(--app-line);
  border-radius: 999px;
  color: var(--app-text);
  background: var(--app-panel);
  font-size: 12px;
  font-weight: 800;
}
.practice-beat-map-phase-calibration > header > span[data-state="phase"] { color: var(--status-success-text); border-color: var(--status-success-border); background: var(--status-success-bg); }
.practice-beat-map-phase-calibration > header > span[data-state="tempo-drift"],
.practice-beat-map-phase-calibration > header > span[data-state="uncertain"] { color: var(--status-warning-text); border-color: var(--status-warning-border); background: var(--status-warning-bg); }
.practice-beat-map-phase-calibration > header > span[data-state="stable"] { color: var(--status-success-text); border-color: var(--status-success-border); background: var(--status-success-bg); }
.practice-beat-map-phase-diagnosis,
.practice-beat-map-phase-calibration > p { margin: 0; color: var(--app-muted); font-size: 12px; line-height: 1.45; }
.practice-beat-map-phase-current { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; color: var(--app-muted); font-size: 12px; }
.practice-beat-map-phase-current strong { color: var(--app-accent-readable); font-size: 13px; }
.practice-beat-map-phase-current span:last-child { margin-left: auto; color: var(--app-accent-readable); font-size: 12px; font-weight: 750; }
.practice-beat-map-phase-calibration > label { grid-template-columns: 68px minmax(0, 1fr); }
.practice-beat-map-phase-actions { min-width: 0; display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 1fr)); gap: 6px; }
.practice-beat-map-phase-actions button { min-width: 0; min-height: 30px; padding-inline: 7px; font-size: 12px; font-weight: 750; }
.practice-beat-map-phase-actions button:first-child { border-color: var(--button-accent-border); color: var(--button-accent-text); background: var(--button-accent-bg); }
.practice-beat-map-phase-actions button:disabled { cursor: not-allowed; opacity: .48; }
.practice-beat-map-advanced { min-width: 0; border-top: 1px solid var(--app-line); }
.practice-beat-map-advanced > summary { min-height: 30px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--app-text); font-size: 12px; font-weight: 800; cursor: pointer; }
.practice-beat-map-advanced > summary small { overflow: hidden; color: var(--app-muted); font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.practice-beat-map-advanced > div { display: grid; gap: 7px; padding-top: 5px; }
.practice-beat-map-inline-field { min-width: 0; display: flex; align-items: center; gap: 5px; color: var(--app-muted); }
.practice-beat-map-inline-field input { min-width: 0; width: 72px; min-height: 30px; font-size: 12px; }
.practice-beat-map-inline-field button { min-height: 30px; padding-inline: 8px; font-size: 12px; }
.practice-beat-map-advanced-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
.practice-beat-map-advanced-actions button { min-width: 0; min-height: 30px; padding-inline: 5px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.practice-beat-map-tempo-region { display: grid; gap: 6px; padding: 7px; border: 1px solid var(--app-line); border-radius: 7px; background: color-mix(in srgb,var(--app-bg) 58%,var(--app-panel)); }
.practice-beat-map-tempo-region > header { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.practice-beat-map-tempo-region > header strong { font-size: 12px; }
.practice-beat-map-tempo-region > header button { min-height: 28px; padding-inline: 7px; font-size: 12px; }
.practice-beat-map-tempo-region > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }
.practice-beat-map-tempo-region label { display: grid; grid-template-columns: 1fr; gap: 3px; font-size: 12px; }
.practice-beat-map-tempo-region :is(input,select) { min-width: 0; width: 100%; min-height: 28px; font-size: 12px; }
.practice-beat-map-tempo-region .practice-beat-map-check { display: flex; align-items: center; gap: 6px; color: var(--app-text); }
.practice-beat-map-tempo-region .practice-beat-map-check input { width: 16px; min-height: 16px; }
.practice-beat-map-tempo-region > button { min-height: 30px; font-size: 12px; font-weight: 750; }
.practice-beat-map-tap { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 5px; }
.practice-beat-map-tap :is(button,output) { min-height: 30px; display: inline-flex; align-items: center; justify-content: center; padding-inline: 7px; font-size: 12px; }
.practice-beat-map-tap output { overflow: hidden; color: var(--app-muted); text-overflow: ellipsis; white-space: nowrap; }
.practice-beat-map-candidates { min-width: 0; display: flex; gap: 5px; overflow: hidden; }
.practice-beat-map-candidate-row { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) 66px; gap: 5px; }
.practice-beat-map-candidate-row > select { min-width: 0; }
.practice-beat-map-candidates button { min-width: 0; min-height: 30px; padding: 0 8px; overflow: hidden; border: 1px solid var(--app-line); border-radius: 6px; color: var(--app-text); background: var(--button-secondary-bg); font-size: 12px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.practice-beat-map-candidates button[aria-pressed="true"] { color: var(--button-accent-text); border-color: var(--button-accent-border); background: var(--button-accent-bg); }
.practice-beat-map-timeline-panel { display: grid; grid-template-rows: auto 58px auto; gap: 7px; }
.practice-beat-map-timeline-panel > header,
.practice-beat-map-impact > header { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.practice-beat-map-timeline-panel > header > div { min-width: 0; display: grid; gap: 2px; }
.practice-beat-map-timeline-panel > header strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.practice-beat-map-timeline-panel > header small { color: var(--app-muted); font-size: 11px; }
.practice-beat-map-timeline-panel > header nav { display: inline-flex; align-items: center; gap: 4px; }
.practice-beat-map-timeline-panel > header nav button { width: 28px; min-width: 28px; min-height: 26px; padding: 0; }
.practice-beat-map-timeline-panel > header output { min-width: 42px; color: var(--app-muted); font-size: 11px; text-align: center; }
.practice-beat-map-timeline { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--app-line); border-radius: 7px; background: color-mix(in srgb, var(--app-bg) 72%, var(--app-panel)); touch-action: none; }
.practice-beat-map-timeline:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; }
.practice-beat-map-track { position: absolute; inset: 0 14px; }
.practice-beat-map-track::before { position: absolute; top: 30px; right: 0; left: 0; height: 1px; background: var(--app-line); content: ''; }
.practice-beat-map-marker { position: absolute; top: 7px; width: 18px; min-width: 18px; height: 42px; min-height: 42px; padding: 0; border: 0; color: var(--app-muted); background: transparent; transform: translateX(-50%); cursor: ew-resize; touch-action: none; }
.practice-beat-map-marker::before { position: absolute; top: 9px; bottom: 6px; left: 50%; width: 2px; border-radius: 2px; background: currentColor; content: ''; transform: translateX(-50%); }
.practice-beat-map-marker::after { position: absolute; top: 5px; left: 50%; width: 8px; height: 8px; border: 2px solid currentColor; border-radius: 50%; background: var(--app-panel); content: ''; transform: translateX(-50%); }
.practice-beat-map-marker span { position: absolute; right: 50%; bottom: 0; font-size: 12px; font-weight: 800; transform: translateX(50%); white-space: nowrap; }
.practice-beat-map-marker[data-downbeat="true"] { color: var(--app-accent); }
.practice-beat-map-marker[data-selected="true"] { z-index: 2; color: var(--status-warning-text); }
.practice-beat-map-marker[data-selected="true"]::after { background: var(--status-warning-bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-warning-text) 18%, transparent); }
.practice-beat-map-marker[data-locked="true"]::before { width: 4px; }
.practice-beat-map-marker[data-primary="true"]::after { border-radius: 3px; transform: translateX(-50%) rotate(45deg); }
.practice-beat-map-timeline-panel > footer { min-width: 0; display: flex; align-items: center; gap: 5px; overflow: hidden; }
.practice-beat-map-timeline-panel > footer label { display: inline-flex; align-items: center; gap: 5px; color: var(--app-muted); font-size: 11px; white-space: nowrap; }
.practice-beat-map-timeline-panel > footer input { width: 76px; min-height: 30px; font-size: 12px; }
.practice-beat-map-timeline-panel > footer button { min-width: 0; min-height: 30px; padding: 0 8px; font-size: 11px; white-space: nowrap; }
.practice-beat-map-impact { display: grid; align-content: start; gap: 7px; }
.practice-beat-map-impact[hidden] { display: none !important; }
.practice-beat-map-impact header strong { font-size: 13px; }
.practice-beat-map-impact header span { color: var(--app-accent); font-size: 11px; font-weight: 750; white-space: nowrap; }
.practice-beat-map-impact p { min-height: 34px; margin: 0; color: var(--app-muted); font-size: 12px; line-height: 1.45; }
.practice-beat-map-impact > div { display: flex; flex-wrap: wrap; gap: 4px; }
.practice-beat-map-impact > div span { padding: 3px 6px; border: 1px solid var(--status-warning-border); border-radius: 999px; color: var(--status-warning-text); background: var(--status-warning-bg); font-size: 10px; font-weight: 750; }
.practice-beat-map-actions { min-height: 32px; }
.practice-beat-map-actions > [data-beat-map-status] { min-width: 0; flex: 1 1 auto; overflow: hidden; color: var(--app-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.practice-beat-map-actions button { min-width: 0; min-height: 32px; padding: 0 10px; font-size: 12px; white-space: nowrap; }
.practice-beat-map-history { display: inline-flex; align-items: center; gap: 5px; min-width: 0; min-height: 32px; padding-left: 8px; border: 1px solid var(--app-line); border-radius: 8px; background: color-mix(in srgb,var(--app-bg) 56%,var(--app-panel)); color: var(--app-muted); font-size: 11px; white-space: nowrap; }
.practice-beat-map-history select { width: clamp(126px,14vw,210px); min-height: 28px; border: 0; background: transparent; color: var(--app-text); font-size: 11px; }
.practice-beat-map-history button { min-height: 28px; border-block: 0; border-right: 0; border-radius: 0 7px 7px 0; }
.practice-beat-map-ab { display: inline-flex; align-items: center; gap: 3px; padding: 2px; border: 1px solid var(--app-line); border-radius: 7px; background: color-mix(in srgb,var(--app-bg) 56%,var(--app-panel)); }
.practice-beat-map-ab button { min-height: 28px; padding-inline: 8px; border-color: transparent; }
.practice-beat-map-ab button[aria-pressed="true"],
.practice-beat-map-actions [data-action="beat-map-loop-audition"][aria-pressed="true"] { color: var(--button-accent-text); border-color: var(--button-accent-border); background: var(--button-accent-bg); }
.practice-beat-map-actions [data-action="beat-map-save"] { color: var(--button-accent-text); border-color: var(--button-accent-border); background: var(--button-accent-bg); font-weight: 800; }
.practice-beat-map-actions button:disabled { cursor: not-allowed; opacity: .48; }
.practice-head-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.practice-title-block { min-width: 0; }
.practice-title-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.practice-title-block h2 { margin: 0; font-size: 17px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0; font-weight: 750; }
.practice-kicker { display: none; color: var(--practice-muted); font-size: 10px; font-weight: 700; }
.practice-icon-button {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--practice-line);
  border-radius: 6px;
  color: var(--practice-text);
  background: color-mix(in srgb, var(--app-highlight) 35%, transparent);
  font-size: 15px;
  cursor: pointer;
}
.practice-icon-button:hover { background: var(--state-hover); border-color: color-mix(in srgb, var(--app-accent) 42%, var(--app-line)); }
.practice-icon-button:focus-visible,
.practice-studio button:focus-visible,
.practice-studio select:focus-visible,
.practice-studio input:focus-visible { outline: 2px solid var(--practice-cyan); outline-offset: 2px; }
.practice-readiness { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }
.practice-readiness-pills { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.practice-readiness-pills > span { position: relative; padding: 4px 8px 4px 18px; border: 1px solid var(--practice-line); border-radius: 999px; color: var(--practice-muted); font-size: 10px; white-space: nowrap; background: color-mix(in srgb, var(--app-panel) 70%, transparent); }
.practice-readiness-pills > span::before { content: ''; position: absolute; left: 7px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--app-faint); transform: translateY(-50%); }
.practice-readiness-pills > span.ready { color: var(--status-success-text); border-color: color-mix(in srgb, var(--app-accent) 40%, var(--practice-line)); }
.practice-readiness-pills > span.ready::before { background: var(--practice-green); box-shadow: 0 0 6px color-mix(in srgb, var(--app-accent) 45%, transparent); }
.practice-readiness-pills > span.missing { color: var(--state-danger-text); border-color: var(--state-danger-line); }
.practice-readiness-pills > span.missing::before { background: var(--practice-coral); }
.practice-head-actions {
  position: relative;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding-left: 10px;
  border-left: 1px solid color-mix(in srgb, var(--practice-line) 85%, transparent);
}
/* The practice header has many low-frequency tools. Keep the song/version
   selector readable, but make the action cluster icon-first by default so it
   does not consume a second row at common desktop widths. Labels remain in
   the accessibility tree and are exposed through the shared tooltip system. */
html[data-layout-mode="desktop"] body.practice-view-open .practice-head-actions {
  gap: 4px;
  padding-left: 6px;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: visible;
}
html[data-layout-mode="desktop"] body.practice-view-open .practice-head-actions [data-practice-head-control] {
  position: relative;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  font-size: 0;
  line-height: 1;
}
html[data-layout-mode="desktop"] body.practice-view-open .practice-head-actions [data-practice-head-control] > .sr-command-icon,
html[data-layout-mode="desktop"] body.practice-view-open .practice-head-actions [data-practice-head-control] > .sr-command-native-icon,
html[data-layout-mode="desktop"] body.practice-view-open .practice-head-actions .practice-head-more-summary > .practice-toolbar-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  display: inline-grid;
  place-items: center;
}
html[data-layout-mode="desktop"] body.practice-view-open .practice-head-actions [data-practice-head-control] > :not(.sr-command-icon):not(.sr-command-native-icon):not(.practice-toolbar-icon) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
html[data-layout-mode="desktop"] body.practice-view-open .practice-head-more-tools {
  position: relative;
  flex: 0 0 auto;
}
html[data-layout-mode="desktop"] body.practice-view-open .practice-head-more-summary {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--practice-line);
  border-radius: 6px;
  color: var(--practice-muted);
  background: var(--button-secondary-bg);
  cursor: pointer;
  list-style: none;
}
html[data-layout-mode="desktop"] body.practice-view-open .practice-head-more-summary::-webkit-details-marker { display: none; }
html[data-layout-mode="desktop"] body.practice-view-open .practice-head-more-summary:hover,
html[data-layout-mode="desktop"] body.practice-view-open .practice-head-more-tools[open] > .practice-head-more-summary {
  border-color: var(--button-accent-border);
  color: var(--button-accent-text);
  background: var(--button-accent-bg);
}
html[data-layout-mode="desktop"] body.practice-view-open .practice-head-more-summary:focus-visible {
  outline: 2px solid var(--practice-cyan);
  outline-offset: 2px;
}
html[data-layout-mode="desktop"] body.practice-view-open .practice-head-more-menu {
    position: absolute;
    z-index: var(--app-layer-menu, 2147483599);
  top: calc(100% + 6px);
  right: 0;
  min-width: 214px;
  display: grid;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-elevated);
  box-shadow: 0 12px 30px var(--app-shadow);
}
html[data-layout-mode="desktop"] body.practice-view-open .practice-head-more-menu > [data-practice-head-control] {
  width: 100%;
  min-width: 0;
  height: 32px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  padding: 0 9px;
  font-size: 12px;
  line-height: 1;
  text-align: left;
}
html[data-layout-mode="desktop"] body.practice-view-open .practice-head-more-menu > [data-practice-head-control] > :not(.sr-command-icon):not(.sr-command-native-icon):not(.practice-toolbar-icon) {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip-path: none;
  white-space: nowrap;
  border: 0;
}
html[data-layout-mode="desktop"] body.practice-view-open .practice-head-more-menu > [data-practice-head-control] > .sr-command-icon,
html[data-layout-mode="desktop"] body.practice-view-open .practice-head-more-menu > [data-practice-head-control] > .sr-command-native-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}
html[data-layout-mode="desktop"] body.practice-view-open .practice-head-more-menu .practice-jyutping-mode:not([hidden]) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  min-height: 32px;
  padding: 2px;
}
html[data-layout-mode="desktop"] body.practice-view-open .practice-head-more-menu .practice-jyutping-mode:not([hidden]) [data-practice-head-control] {
  width: auto;
  min-width: 0;
  height: 28px;
  min-height: 28px;
  justify-content: center;
  padding-inline: 5px;
}
html[data-layout-mode="desktop"] body.practice-view-open .practice-head-actions .practice-head-lyrics-version {
  width: 116px;
  min-width: 100px;
}
html[data-layout-mode="desktop"] body.practice-view-open .practice-head-actions .practice-jyutping-mode {
  gap: 2px;
  min-height: 32px;
  padding: 2px;
}
html[data-layout-mode="desktop"] body.practice-view-open .practice-head-actions .practice-jyutping-mode [data-practice-head-control] {
  width: 30px;
  min-width: 30px;
  height: 28px;
  min-height: 28px;
}
/* Desktop header: give the command shelf the middle of the row instead of
   forcing every control into a narrow right-hand tail. The title keeps a
   comfortable reading width, status pills stay grouped, and the controls
   get a predictable breathing space before the close button. */
@media (min-width: 1081px) {
  html[data-layout-mode="desktop"] body.practice-view-open .practice-head {
    /* The header owns a wide, mostly empty stage on desktop. Give the title
       a readable lane, then let the readiness/command shelf occupy the
       centre instead of collapsing into a right-edge tail. */
    grid-template-columns: minmax(280px, .42fr) minmax(0, 1.58fr) 40px var(--practice-side-width);
    gap: 18px;
    min-height: 60px;
    padding: 8px 18px;
  }
  html[data-layout-mode="desktop"] body.practice-view-open .practice-readiness {
    width: 100%;
    display: block;
    min-width: 0;
  }
  /* Material readiness pills duplicate the right monitoring rail. Hide them
     on desktop so the command shelf can stay on one row beside the version
     picker. Missing assets still surface through the workspace empty states. */
  html[data-layout-mode="desktop"] body.practice-view-open .practice-readiness-pills {
    display: none !important;
  }
  html[data-layout-mode="desktop"] body.practice-view-open .practice-head-actions {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    justify-content: flex-start;
    gap: 6px;
    padding-left: 0;
    border-left: 0;
    flex-wrap: nowrap !important;
    white-space: nowrap;
  }
  html[data-layout-mode="desktop"] body.practice-view-open .practice-head-actions [data-practice-head-control],
  html[data-layout-mode="desktop"] body.practice-view-open .practice-head-more-summary {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
  }
  html[data-layout-mode="desktop"] body.practice-view-open .practice-head-actions .practice-head-lyrics-version {
    /* The version picker is a mode switch, not a song-information panel.
       Keep the selected label compact so the recording and teaching tools
       remain visible in the same header row. Native select text still carries
       the complete version name and the control exposes it through its title. */
    flex: 0 1 clamp(172px, 11vw, 220px);
    width: clamp(172px, 11vw, 220px);
    min-width: 172px;
  }
  html[data-layout-mode="desktop"] body.practice-view-open .practice-head-actions .practice-head-lyrics-version select {
    height: 40px;
    font-size: 12px;
  }
  html[data-layout-mode="desktop"] body.practice-view-open .practice-studio.secondary-panel-collapsed .practice-head,
  html[data-layout-mode="desktop"] body.practice-view-open .practice-studio.recording-focus-mode .practice-head {
    grid-template-columns: minmax(300px, .46fr) minmax(0, 1.54fr) 40px;
  }
}
/* When the command shelf has room, expose every low-frequency tool beside
   the lyric selector. The overflow state is measured from the real header
   width; only the narrow state keeps the compact “更多” disclosure. */
@media (min-width: 1081px) {
  html[data-layout-mode="desktop"] body.practice-view-open .practice-head-actions[data-head-overflow="inline"] > .practice-head-more-tools {
    display: block;
    position: relative;
    flex: 0 0 auto;
    width: max-content;
    height: 40px;
  }
  html[data-layout-mode="desktop"] body.practice-view-open .practice-head-actions[data-head-overflow="inline"] > .practice-head-more-tools > .practice-head-more-summary {
    display: none;
  }
  html[data-layout-mode="desktop"] body.practice-view-open .practice-head-actions[data-head-overflow="inline"] .practice-head-more-menu {
    position: static;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    width: max-content;
    height: 40px;
    overflow: visible;
    white-space: nowrap;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  html[data-layout-mode="desktop"] body.practice-view-open .practice-head-actions[data-head-overflow="inline"] .practice-head-more-menu > [data-practice-head-control],
  html[data-layout-mode="desktop"] body.practice-view-open .practice-head-actions[data-head-overflow="inline"] .practice-jyutping-mode:not([hidden]) > [data-practice-head-control] {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    flex: 0 0 40px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    overflow: hidden;
    font-size: 0 !important;
    line-height: 0;
    white-space: nowrap;
  }
  html[data-layout-mode="desktop"] body.practice-view-open .practice-head-actions[data-head-overflow="inline"] .practice-head-more-menu > [data-practice-head-control] > :not(.sr-command-icon):not(.sr-command-native-icon):not(.practice-toolbar-icon),
  html[data-layout-mode="desktop"] body.practice-view-open .practice-head-actions[data-head-overflow="inline"] .practice-jyutping-mode:not([hidden]) > [data-practice-head-control] > :not(.sr-command-icon):not(.sr-command-native-icon):not(.practice-toolbar-icon) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  html[data-layout-mode="desktop"] body.practice-view-open .practice-head-actions[data-head-overflow="inline"] .practice-head-more-menu > [data-practice-head-control] > .sr-command-icon,
  html[data-layout-mode="desktop"] body.practice-view-open .practice-head-actions[data-head-overflow="inline"] .practice-head-more-menu > [data-practice-head-control] > .sr-command-native-icon,
  html[data-layout-mode="desktop"] body.practice-view-open .practice-head-actions[data-head-overflow="inline"] .practice-jyutping-mode:not([hidden]) > [data-practice-head-control] > .sr-command-icon,
  html[data-layout-mode="desktop"] body.practice-view-open .practice-head-actions[data-head-overflow="inline"] .practice-jyutping-mode:not([hidden]) > [data-practice-head-control] > .sr-command-native-icon,
  html[data-layout-mode="desktop"] body.practice-view-open .practice-head-actions[data-head-overflow="inline"] .practice-head-more-menu > [data-practice-head-control] > .practice-toolbar-icon,
  html[data-layout-mode="desktop"] body.practice-view-open .practice-head-actions[data-head-overflow="inline"] .practice-jyutping-mode:not([hidden]) > [data-practice-head-control] > .practice-toolbar-icon {
    position: static;
    width: 17px;
    height: 17px;
    margin: 0;
    clip-path: none;
    overflow: visible;
    display: inline-grid;
  }
  html[data-layout-mode="desktop"] body.practice-view-open .practice-head-actions[data-head-overflow="inline"] .practice-jyutping-mode:not([hidden]) {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 40px;
    padding: 2px;
    border: 1px solid var(--practice-line);
    border-radius: 6px;
    background: var(--app-panel);
  }
}
/* Keep the desktop command shelf a single, stable row even while the layout
   mode attribute is still settling during a window resize/reopen. The header
   is a quick command surface: the selected lyric version stays readable and
   the low-frequency actions use their injected icons with title tooltips. */
@media (min-width: 1081px) {
  body.practice-view-open .practice-head {
    grid-template-columns: minmax(280px, .38fr) minmax(0, 1.62fr) 40px;
    gap: 14px;
  }
  body.practice-view-open .practice-readiness {
    min-width: 0;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
  }
  body.practice-view-open .practice-head-actions {
    min-width: 0;
    max-height: 40px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 4px;
    overflow: visible;
    white-space: nowrap;
  }
  body.practice-view-open .practice-head-actions > [data-practice-head-control],
  body.practice-view-open .practice-head-more-summary {
    box-sizing: border-box;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    flex: 0 0 36px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    font-size: 0 !important;
    line-height: 1;
    white-space: nowrap;
  }
  body.practice-view-open .practice-head-actions > [data-practice-head-control] > :not(.sr-command-icon):not(.sr-command-native-icon):not(.practice-toolbar-icon),
  body.practice-view-open .practice-head-more-menu > [data-practice-head-control] > :not(.sr-command-icon):not(.sr-command-native-icon):not(.practice-toolbar-icon) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  body.practice-view-open .practice-head-actions > [data-practice-head-control] > .sr-command-icon,
  body.practice-view-open .practice-head-actions > [data-practice-head-control] > .sr-command-native-icon,
  body.practice-view-open .practice-head-actions > [data-practice-head-control] > .practice-toolbar-icon,
  body.practice-view-open .practice-head-more-menu > [data-practice-head-control] > .sr-command-icon,
  body.practice-view-open .practice-head-more-menu > [data-practice-head-control] > .sr-command-native-icon,
  body.practice-view-open .practice-head-more-menu > [data-practice-head-control] > .practice-toolbar-icon {
    position: static;
    width: 17px;
    height: 17px;
    margin: 0;
    display: inline-grid;
    place-items: center;
    clip-path: none;
    overflow: visible;
  }
  body.practice-view-open .practice-head-actions .practice-head-lyrics-version {
    box-sizing: border-box;
    flex: 0 1 clamp(180px, 13vw, 230px);
    width: clamp(180px, 13vw, 230px);
    min-width: 160px;
  }
  body.practice-view-open .practice-head-actions .practice-head-lyrics-version select {
    height: 36px;
    font-size: 12px;
  }
  body.practice-view-open .practice-head-more-tools {
    height: 36px;
    flex: 0 0 auto;
  }
  body.practice-view-open .practice-head-actions[data-head-overflow="inline"] > .practice-head-more-tools {
    width: max-content;
    height: 36px;
  }
  body.practice-view-open .practice-head-actions[data-head-overflow="inline"] .practice-head-more-menu {
    height: 36px;
    min-height: 36px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    white-space: nowrap;
  }
  body.practice-view-open .practice-head-actions[data-head-overflow="inline"] .practice-head-more-menu > [data-practice-head-control],
  body.practice-view-open .practice-head-actions[data-head-overflow="inline"] .practice-jyutping-mode:not([hidden]) > [data-practice-head-control] {
    box-sizing: border-box;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    flex: 0 0 36px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    font-size: 0 !important;
    line-height: 1;
    white-space: nowrap;
  }
  body.practice-view-open .practice-head-actions[data-head-overflow="inline"] .practice-jyutping-mode:not([hidden]) {
    min-height: 36px;
    height: 36px;
    padding: 0 2px;
    gap: 2px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--practice-line);
    border-radius: 6px;
    background: var(--app-panel);
  }
}
.practice-head-lyrics-version { width: 136px; min-width: 108px; display: grid; gap: 2px; color: var(--practice-muted); font-size: 12px; line-height: 1; }
.practice-head-lyrics-version select { width: 100%; min-width: 0; height: 28px; padding: 0 7px; overflow: hidden; border: 1px solid var(--practice-line); border-radius: 6px; color: var(--practice-text); background: var(--practice-control-strip-bg); font: inherit; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.practice-head-lyrics-version > span { display: none; }
.practice-dual-lyrics-toggle,
.practice-dual-lyrics-order { min-height: 28px; padding: 0 9px; border: 1px solid var(--practice-line); border-radius: 6px; background: var(--button-secondary-bg); color: var(--practice-muted); font: inherit; font-size: 12px; font-weight: 750; white-space: nowrap; cursor: pointer; }
.practice-dual-lyrics-toggle[hidden],
.practice-dual-lyrics-order[hidden],
body.practice-view-open .practice-studio .practice-head-actions .practice-dual-lyrics-order[hidden],
body.practice-view-open .practice-head-actions > .practice-dual-lyrics-order[hidden] { display: none !important; }
.practice-dual-lyrics-toggle[aria-checked="true"] { border-color: var(--button-accent-border); background: var(--app-accent-soft); color: var(--app-accent); }
.practice-dual-lyrics-toggle:disabled,
.practice-dual-lyrics-order:disabled { cursor: not-allowed; opacity: .54; }
.practice-jyutping-toggle { min-height: 28px; padding: 0 9px; border: 1px solid var(--practice-line); border-radius: 6px; background: var(--button-secondary-bg); color: var(--practice-muted); font: inherit; font-size: 12px; font-weight: 750; white-space: nowrap; cursor: pointer; }
.practice-jyutping-toggle[aria-checked="true"] { border-color: var(--button-accent-border); background: var(--app-accent-soft); color: var(--app-accent); }
.practice-jyutping-mode {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  padding: 2px;
  border: 1px solid var(--practice-line);
  border-radius: 6px;
  background: var(--app-panel);
}
.practice-jyutping-mode[hidden] { display: none !important; }
.practice-jyutping-mode button {
  min-height: 24px;
  padding: 0 10px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--practice-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}
.practice-jyutping-mode button.is-active,
.practice-jyutping-mode button[aria-pressed="true"] {
  background: var(--app-accent-soft);
  color: var(--app-accent);
}
.practice-jyutping-mode button[data-action="generate-jyutping-hanzi"] {
  margin-left: 2px;
  padding: 0 8px;
  border-left: 1px solid var(--practice-line);
  border-radius: 0 4px 4px 0;
  color: var(--practice-text);
}
.practice-jyutping-mode button[data-action="generate-jyutping-hanzi"].is-cached {
  color: var(--app-accent);
}
.practice-jyutping-mode button[data-action="generate-jyutping-hanzi"]:disabled {
  cursor: wait;
  opacity: 0.7;
}
.practice-lyric-jyutping--hanzi {
  font-weight: 700;
  letter-spacing: 0;
}
.practice-readiness > .practice-mode-switch,
.practice-head-actions > .practice-mode-switch { margin-left: 0; flex: 0 0 auto; width: auto; min-width: 96px; height: 28px; }
.practice-professional-toggle { min-height: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; border: 1px solid var(--practice-line); border-radius: 6px; color: var(--practice-muted); background: var(--button-secondary-bg); font: inherit; font-size: 10px; font-weight: 750; cursor: pointer; white-space: nowrap; }
.practice-head-recording-settings { min-height: 28px; padding: 0 9px; border: 1px solid var(--practice-line); border-radius: 6px; color: var(--practice-muted); background: var(--button-secondary-bg); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.practice-head-recording-settings:hover { border-color: var(--button-accent-border); color: var(--practice-text); background: var(--button-secondary-bg-hover); }
.practice-head-character-lyrics,
.practice-head-lyric-display-settings { min-height: 28px; padding: 0 9px; border: 1px solid var(--practice-line); border-radius: 6px; color: var(--practice-muted); background: var(--button-secondary-bg); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.practice-head-character-lyrics:hover,
.practice-head-character-lyrics[aria-checked="true"] { border-color: var(--button-accent-border); color: var(--button-accent-text); background: var(--button-accent-bg); }
.practice-head-lyric-display-settings:hover,
.practice-head-lyric-display-settings:focus-visible { border-color: var(--button-accent-border); color: var(--practice-text); background: var(--button-secondary-bg-hover); outline: none; }
.practice-professional-toggle:hover { border-color: var(--button-accent-border); color: var(--practice-text); background: var(--button-secondary-bg-hover); }
.practice-professional-toggle i { padding: 1px 4px; border-radius: 3px; color: var(--state-danger-text); background: var(--state-danger-bg); font: 800 8px var(--font-family-mono); }
.practice-professional-toggle b { color: var(--app-faint); font-size: 9px; }
.practice-professional-toggle[aria-pressed="true"] { border-color: color-mix(in srgb, var(--app-accent) 58%, var(--practice-line)); color: var(--button-accent-text); background: color-mix(in srgb, var(--button-accent-bg) 72%, var(--app-panel)); }
.practice-professional-toggle[aria-pressed="true"] b { color: var(--button-accent-text); }
.practice-focus-toggle { min-height: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; border: 1px solid var(--practice-line); border-radius: 6px; color: var(--practice-muted); background: var(--button-secondary-bg); font: inherit; font-size: 10px; font-weight: 750; cursor: pointer; white-space: nowrap; }
.practice-focus-toggle:hover { border-color: color-mix(in srgb, var(--app-accent) 42%, var(--practice-line)); color: var(--practice-text); background: var(--button-secondary-bg-hover); }
.practice-focus-toggle i { font-style: normal; font-size: 12px; line-height: 1; }
.practice-focus-toggle kbd { padding: 1px 4px; border: 1px solid var(--practice-line); border-radius: 3px; color: var(--app-faint); background: color-mix(in srgb, var(--app-bg) 35%, transparent); font: 700 8px var(--font-family-mono); }
.practice-focus-toggle[aria-pressed="true"] { border-color: color-mix(in srgb, var(--app-accent) 58%, var(--practice-line)); color: var(--button-accent-text); background: color-mix(in srgb, var(--button-accent-bg) 70%, var(--app-panel)); }
.practice-focus-toggle[aria-pressed="true"] kbd { border-color: color-mix(in srgb, var(--button-accent-text) 26%, transparent); color: color-mix(in srgb, var(--button-accent-text) 82%, transparent); }
.practice-focus-beat-toggle { min-height: 28px; display: none; align-items: center; padding: 0 9px; border: 1px solid var(--practice-line); border-radius: 6px; color: var(--practice-muted); background: var(--button-secondary-bg); font: inherit; font-size: 10px; font-weight: 750; cursor: pointer; white-space: nowrap; }
.practice-focus-beat-toggle:hover { border-color: var(--button-accent-border); color: var(--practice-text); background: var(--button-secondary-bg-hover); }
.practice-focus-beat-toggle[aria-checked="true"] { border-color: var(--button-accent-border); color: var(--button-accent-text); background: var(--button-accent-bg); }
.practice-control-strip {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) 104px 70px 34px;
  gap: 8px;
  align-items: end;
  padding: 12px 24px;
  border-bottom: 1px solid var(--practice-line);
  background: var(--practice-control-strip-bg);
}
.practice-source-settings {
  flex: 0 0 auto;
}
.practice-source-settings > summary {
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 12px;
  padding: 7px 18px;
  color: var(--practice-text);
  cursor: pointer;
  list-style: none;
}
.practice-source-settings > summary::-webkit-details-marker { display: none; }
.practice-source-settings > summary span { font-size: 11px; font-weight: 800; }
.practice-source-settings > summary small { grid-column: 1; color: var(--practice-muted); font-size: 9px; }
.practice-source-settings > summary i { grid-column: 2; grid-row: 1 / span 2; color: var(--practice-muted); font-style: normal; transition: transform 150ms ease; }
.practice-source-settings[open] > summary i { transform: rotate(180deg); }
.practice-control-strip label,
.practice-control-field { min-width: 0; }
.practice-control-strip label,
.practice-control-field,
.practice-settings label { display: grid; gap: 5px; color: var(--practice-muted); font-size: 10px; font-weight: 700; }
.practice-control-strip select,
.practice-settings select {
  width: 100%;
  height: 34px;
  padding: 0 30px 0 10px;
  border: 1px solid var(--practice-line);
  border-radius: 5px;
  color: var(--practice-text);
  background: var(--control-bg);
}
.practice-vocal-mode-button {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--practice-line);
  border-radius: 5px;
  color: var(--practice-text);
  background: var(--control-bg);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.practice-vocal-mode-button:hover { border-color: color-mix(in srgb, var(--app-accent) 42%, var(--app-line)); background: var(--state-hover); }
.practice-mode-switch {
  width: 100%;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 8px 0 10px;
  border: 1px solid var(--practice-line);
  border-radius: 5px;
  color: var(--practice-text);
  background: var(--control-bg);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.practice-mode-switch:hover:not(:disabled) { border-color: color-mix(in srgb, var(--app-accent) 42%, var(--app-line)); background: var(--state-hover); }
.practice-mode-switch > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.practice-mode-switch > i {
  position: relative;
  width: 30px;
  height: 16px;
  flex: 0 0 30px;
  border: 1px solid var(--app-line);
  border-radius: 999px;
  background: var(--app-panel-2);
  transition: border-color .16s ease, background .16s ease;
}
.practice-mode-switch > i > b {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--app-muted);
  transition: transform .16s ease, background .16s ease;
}
.practice-mode-switch[aria-checked="true"] > i { border-color: var(--button-accent-border); background: color-mix(in srgb, var(--app-accent) 34%, var(--app-panel-2)); }
.practice-mode-switch[aria-checked="true"] > i > b { background: var(--app-accent); transform: translateX(14px); }
.practice-mode-switch:disabled { opacity: .58; cursor: not-allowed; }
.practice-mode-switch [data-playback-compact-label] { display: none; }
.practice-workspace {
  flex: 1;
  min-height: 0;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--practice-side-width, 250px);
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}
.practice-workspace > .practice-stage {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  min-height: 0;
}
.practice-workspace > .practice-side-rail {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  min-height: 0;
}
.practice-side-rail {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 8px;
  overflow: hidden;
  position: relative;
  /* Monitoring/history remains clickable in its own area, below an expanded
     teaching window and the visible 3D teacher. */
  z-index: var(--app-layer-monitor, 2147483596);
}
.practice-workspace > .practice-secondary-collapse-handle {
  grid-column: 1;
  grid-row: 1;
}
.practice-stage {
  min-width: 0;
  min-height: 0;
  container-name: practice-stage;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  padding: 12px 10px 8px 24px;
  overflow: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: auto;
}
.practice-lyrics {
  --practice-lyric-size: 32px;
  --practice-lyric-line-height: 1.25;
  --practice-lyric-jyutping-size-ratio: 0.42;
  --practice-lyric-char-gap: 0em;
  min-height: calc(var(--practice-lyric-size) * (var(--practice-lyric-line-height, 1.25) * 3 + 0.35) + 18px);
  display: grid;
  grid-template-rows: repeat(3, minmax(calc(var(--practice-lyric-size) * var(--practice-lyric-line-height, 1.25)), auto));
  align-content: center;
  gap: 5px;
  position: relative;
  overflow: hidden;
  text-align: center;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  transition: min-height .18s ease;
  cursor: default;
  contain: layout style paint;
}
/* Left-edge lyric size/gap/line-height shortcuts stay collapsed until the
   singer clicks the exposed tab, so pointer movement never covers the singing
   text. A faint tab remains visible so the drawer is still discoverable. */
.practice-lyric-quick-tools {
  position: absolute;
  z-index: 8;
  top: 10px;
  bottom: 22px;
  left: 0;
  width: 18px;
  display: flex;
  align-items: center;
  pointer-events: auto;
  cursor: pointer;
}
.practice-lyric-quick-tools::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 64px;
  border: 1px solid color-mix(in srgb, var(--app-line) 70%, transparent);
  border-left: 0;
  border-radius: 0 9px 9px 0;
  background: color-mix(in srgb, var(--app-panel) 62%, transparent);
  box-shadow: inset -1px 0 0 color-mix(in srgb, var(--app-accent) 18%, transparent);
  transform: translateY(-50%);
  pointer-events: none;
}
.practice-lyric-quick-tools::after {
  content: '';
  position: absolute;
  left: 2px;
  top: 50%;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--app-muted) 78%, transparent);
  box-shadow: 0 6px 0 color-mix(in srgb, var(--app-muted) 78%, transparent),
    0 -6px 0 color-mix(in srgb, var(--app-muted) 78%, transparent);
  transform: translateY(-50%);
  pointer-events: none;
}
.practice-lyric-quick-tools.is-open::before,
.practice-lyric-quick-tools.is-open::after {
  opacity: 0;
}
.practice-lyric-quick-rail {
  display: grid;
  gap: 8px;
  min-width: 108px;
  padding: 8px 8px 8px 10px;
  border: 1px solid var(--app-line);
  border-left: 0;
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--app-panel) 92%, transparent);
  box-shadow: 6px 8px 22px color-mix(in srgb, var(--app-shadow) 48%, transparent);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-8px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 480ms;
}
.practice-lyric-quick-tools.is-open {
  width: 122px;
}
.practice-lyric-quick-tools.is-open .practice-lyric-quick-rail {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}
.practice-lyric-quick-group {
  display: grid;
  grid-template-columns: 32px 28px minmax(28px, auto) 28px;
  align-items: center;
  gap: 4px;
}
.practice-lyric-quick-group > span {
  color: var(--app-muted);
  font-size: 12px;
  font-weight: 700;
}
.practice-lyric-quick-group > output {
  min-width: 28px;
  color: var(--app-text);
  font-size: 12px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.practice-lyric-quick-group > button {
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  border: 1px solid var(--app-line);
  border-radius: 6px;
  color: var(--app-text);
  background: var(--button-secondary-bg);
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
  cursor: pointer;
}
.practice-lyric-quick-group > button:hover,
.practice-lyric-quick-group > button:focus-visible {
  border-color: color-mix(in srgb, var(--app-accent) 46%, var(--app-line));
  background: var(--state-hover);
  outline: none;
}
.practice-lyric-quick-group > button:disabled {
  opacity: .42;
  cursor: default;
}
.practice-lyric-quick-reader,
.practice-lyric-quick-more {
  width: 100%;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid var(--app-line);
  border-radius: 6px;
  color: var(--app-text);
  background: var(--button-secondary-bg);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}
.practice-lyric-quick-reader:hover,
.practice-lyric-quick-reader:focus-visible,
.practice-lyric-quick-more:hover,
.practice-lyric-quick-more:focus-visible {
  border-color: color-mix(in srgb, var(--app-accent) 46%, var(--app-line));
  background: var(--state-hover);
  outline: none;
}
.practice-lyrics[data-jyutping="1"] {
  min-height: calc(var(--practice-lyric-size) * (var(--practice-lyric-line-height, 1.25) * 3 + 1.45) + 22px);
  grid-template-rows: repeat(3, minmax(calc(var(--practice-lyric-size) * var(--practice-lyric-line-height, 1.25) * 1.24), auto));
}
.practice-lyrics[data-jyutping="1"][data-lyric-rows="2"] {
  min-height: calc(var(--practice-lyric-size) * (var(--practice-lyric-line-height, 1.25) * 2 + 1) + 16px);
  grid-template-rows: repeat(2, minmax(calc(var(--practice-lyric-size) * var(--practice-lyric-line-height, 1.25) * 1.24), auto));
}
.practice-lyrics[data-lyric-rows="2"] { min-height: calc(var(--practice-lyric-size) * (var(--practice-lyric-line-height, 1.25) * 2 + 0.25) + 14px); grid-template-rows: repeat(2, minmax(calc(var(--practice-lyric-size) * var(--practice-lyric-line-height, 1.25)), auto)); }
.practice-lyrics[data-lyric-rows="2"] .practice-lyric-previous { display: none; }
.practice-lyrics[data-display-mode="dual"] {
  min-height: calc(var(--practice-lyric-size) * (var(--practice-lyric-line-height, 1.25) * 2 + 1.9) + 28px);
  align-content: center;
  justify-items: center;
  gap: 10px;
  grid-template-rows: repeat(2, minmax(calc(var(--practice-lyric-size) * var(--practice-lyric-line-height, 1.25) * 1.36), auto));
}
/* Dual alone overrides plain jyutping height; compound both so 原唱 clears ruby. */
.practice-lyrics[data-display-mode="dual"][data-jyutping="1"] {
  min-height: calc(var(--practice-lyric-size) * (var(--practice-lyric-line-height, 1.25) * 2 + 3.9) + 40px);
  gap: 14px;
  grid-template-rows: repeat(2, minmax(calc(var(--practice-lyric-size) * var(--practice-lyric-line-height, 1.25) * 1.96), auto));
}
.practice-lyrics[data-display-mode="dual"][data-lyric-rows="2"] {
  grid-template-rows: minmax(calc(var(--practice-lyric-size) * var(--practice-lyric-line-height, 1.25) * 1.68), auto);
}
.practice-lyrics[data-display-mode="dual"][data-jyutping="1"][data-lyric-rows="2"] {
  min-height: calc(var(--practice-lyric-size) * (var(--practice-lyric-line-height, 1.25) * 2 + 2.1) + 28px);
  grid-template-rows: minmax(calc(var(--practice-lyric-size) * var(--practice-lyric-line-height, 1.25) * 2.48), auto);
}
.practice-lyrics[data-display-mode="dual"][data-lyric-rows="2"] .practice-lyric-next { display: none; }
.practice-lyrics[data-display-mode="dual"] .practice-lyric-previous { display: none; }
/* Both lyric rows share one grid; data-primary-position controls which row is on top. */
.practice-lyrics[data-display-mode="dual"] :is(.practice-lyric-current, .practice-lyric-next) {
  display: grid;
  grid-template-columns: max-content minmax(0, max-content);
  grid-template-rows: auto auto;
  justify-content: center;
  align-items: baseline;
  column-gap: 0.45em;
  row-gap: 4px;
  width: max-content;
  max-width: 100%;
  padding: 2px 8px;
  text-align: left;
}
.practice-lyrics[data-display-mode="dual"][data-jyutping="1"] :is(.practice-lyric-current, .practice-lyric-next) {
  align-items: start;
  row-gap: 12px;
}
.practice-lyrics[data-display-mode="dual"] .practice-lyric-countdown:not([hidden]) {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  margin-bottom: 2px;
}
.practice-lyrics[data-display-mode="dual"] .practice-lyrics-empty-action {
  grid-column: 1 / -1;
  justify-self: center;
}
.practice-lyrics[data-display-mode="dual"] .practice-lyric-dual-row,
.practice-lyrics[data-display-mode="dual"] .practice-lyric-comparison:not([hidden]) {
  display: contents;
}
.practice-lyrics[data-display-mode="dual"] .practice-lyric-comparison[hidden] {
  display: none !important;
}
.practice-lyrics[data-display-mode="dual"] .practice-lyric-comparison-label,
.practice-lyrics[data-display-mode="dual"] .practice-lyric-version-label {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  align-self: center;
  min-width: 2.6em;
  max-width: none;
  margin: 0;
  padding: 0.1em 0.42em;
  border: 1px solid var(--practice-line);
  border-radius: 4px;
  color: var(--practice-muted);
  background: color-mix(in srgb, var(--app-panel) 78%, transparent);
  font-size: 12px;
  font-weight: 780;
  letter-spacing: 0;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: unset;
}
.practice-lyrics[data-display-mode="dual"] .practice-lyric-version-label {
  grid-column: 1;
  grid-row: 1;
}
.practice-lyrics .practice-lyric-version-label[hidden] { display: none !important; }
.practice-lyrics[data-display-mode="dual"] .practice-lyric-comparison-label {
  grid-column: 1;
  grid-row: 2;
}
.practice-lyrics[data-display-mode="dual"] .practice-lyric-version-label {
  color: var(--app-accent);
  border-color: color-mix(in srgb, var(--app-accent) 42%, var(--practice-line));
  background: color-mix(in srgb, var(--app-accent-soft) 70%, var(--app-panel));
}
.practice-lyrics[data-display-mode="dual"] .practice-lyric-comparison-chars,
.practice-lyrics[data-display-mode="dual"] :is([data-lyric-current-copy], [data-lyric-next-copy], [data-lyric-previous-copy]) {
  display: grid;
  grid-template-columns: var(--dual-lyric-grid-columns, none);
  grid-auto-flow: column;
  grid-auto-columns: var(--practice-dual-lyric-cell-width, max-content);
  grid-column: 2;
  align-items: flex-end;
  justify-content: flex-start;
  column-gap: var(--practice-dual-lyric-column-gap, var(--practice-lyric-char-gap, 0.08em));
  width: max-content;
  max-width: 100%;
}
.practice-lyrics[data-display-mode="dual"] .practice-lyric-current {
  --practice-dual-lyric-cell-width: var(--practice-lyric-current-size);
}
.practice-lyrics[data-display-mode="dual"] .practice-lyric-next {
  --practice-dual-lyric-cell-width: max(12px, calc(var(--practice-lyric-size) * 0.92));
}
.practice-lyrics[data-display-mode="dual"] .practice-lyric-previous {
  --practice-dual-lyric-cell-width: var(--practice-lyric-context-size);
}
.practice-lyrics[data-display-mode="dual"] .practice-lyric-comparison-chars {
  grid-row: 2;
  color: var(--practice-lyric-comparison-upcoming-user, var(--practice-muted));
  font-size: max(12px, calc(var(--practice-lyric-current-size, var(--practice-lyric-size)) * var(--practice-lyric-comparison-size-ratio, 0.72)));
  font-weight: 620;
  line-height: calc(var(--practice-lyric-line-height, 1.25) * 1.04);
  opacity: var(--practice-lyric-comparison-opacity, 0.86);
}
.practice-lyrics[data-display-mode="dual"] :is([data-lyric-current-copy], [data-lyric-next-copy], [data-lyric-previous-copy]) { grid-row: 1; }
/* Keep 原唱 on the same horizontal rhythm as 魔改 when jyutping widens columns. */
.practice-lyrics[data-display-mode="dual"][data-comparison-jyutping="1"][data-jyutping-mode="pinyin"] .practice-lyric-comparison-chars {
  column-gap: calc(1ch + var(--practice-lyric-char-gap, 0em));
  align-items: flex-end;
}
.practice-lyrics[data-display-mode="dual"][data-comparison-jyutping="1"][data-jyutping-mode="hanzi"] .practice-lyric-comparison-chars {
  column-gap: calc(0.25ch + var(--practice-lyric-char-gap, 0em));
  align-items: flex-end;
}
.practice-lyrics[data-display-mode="dual"] .practice-lyric-comparison-char {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 1em;
}
.practice-lyrics[data-display-mode="dual"][data-comparison-jyutping="1"] .practice-lyric-comparison-char.has-jyutping {
  flex-direction: column;
  gap: 0.06em;
  justify-content: flex-end;
  vertical-align: bottom;
}
.practice-lyrics[data-display-mode="dual"][data-comparison-jyutping="1"][data-jyutping-position="below"] .practice-lyric-comparison-char.has-jyutping {
  flex-direction: column-reverse;
  justify-content: flex-start;
}
.practice-lyrics[data-display-mode="dual"] .practice-lyric-char:not(.is-space):not(.is-empty) {
  display: inline-flex;
  box-sizing: border-box;
  min-width: 1em;
  align-items: center;
  justify-content: center;
}
.practice-lyrics[data-display-mode="dual"][data-primary-position="bottom"] .practice-lyric-version-label,
.practice-lyrics[data-display-mode="dual"][data-primary-position="bottom"] :is([data-lyric-current-copy], [data-lyric-next-copy], [data-lyric-previous-copy]) {
  grid-row: 2;
}
.practice-lyrics[data-display-mode="dual"][data-primary-position="bottom"] .practice-lyric-comparison-label,
.practice-lyrics[data-display-mode="dual"][data-primary-position="bottom"] .practice-lyric-comparison-chars {
  grid-row: 1;
}
.practice-lyrics[data-display-mode="dual"] .practice-lyric-comparison-char.is-space,
.practice-lyrics[data-display-mode="dual"] .practice-lyric-char.is-space {
  display: inline-block;
  min-width: 0.85em;
  width: 1em;
}
.practice-lyrics[data-display-mode="dual"] .practice-lyric-comparison-char.is-empty,
.practice-lyrics[data-display-mode="dual"] .practice-lyric-char.is-empty {
  visibility: hidden;
  min-width: 1em;
}
.practice-lyrics[data-display-mode="dual"][data-primary-jyutping="1"][data-jyutping-mode="pinyin"] :is([data-lyric-current-copy], [data-lyric-next-copy], [data-lyric-previous-copy]),
.practice-lyrics[data-display-mode="dual"][data-comparison-jyutping="1"][data-jyutping-mode="pinyin"] .practice-lyric-comparison-chars {
  /* Beat single-line jyutping centering/wrapping so 魔改 and 原唱 share one left edge. */
  justify-content: flex-start;
  column-gap: calc(1ch + var(--practice-lyric-char-gap, 0em));
}
.practice-lyrics[data-display-mode="dual"][data-primary-jyutping="1"][data-jyutping-mode="hanzi"] :is([data-lyric-current-copy], [data-lyric-next-copy], [data-lyric-previous-copy]),
.practice-lyrics[data-display-mode="dual"][data-comparison-jyutping="1"][data-jyutping-mode="hanzi"] .practice-lyric-comparison-chars {
  justify-content: flex-start;
  column-gap: calc(0.25ch + var(--practice-lyric-char-gap, 0em));
}
.practice-lyrics[data-display-mode="dual"] .practice-lyric-current [data-lyric-current-copy] {
  color: var(--practice-lyric-primary-upcoming-user, var(--practice-lyric-upcoming-user, var(--app-text)));
  font-size: var(--practice-lyric-current-size);
  font-weight: 750;
  line-height: var(--practice-lyric-line-height, 1.25);
}
.practice-lyrics[data-display-mode="dual"] .practice-lyric-next {
  opacity: 0.78;
}
.practice-lyrics[data-display-mode="dual"] .practice-lyric-next [data-lyric-next-copy] {
  color: var(--practice-lyric-primary-upcoming-user, var(--practice-lyric-upcoming-user, var(--app-text)));
  font-size: max(12px, calc(var(--practice-lyric-size) * 0.92));
  font-weight: 680;
  line-height: var(--practice-lyric-line-height, 1.25);
}
.practice-lyrics[data-display-mode="single"] .practice-lyric-dual-row {
  display: contents;
}
.practice-lyrics[data-display-mode="single"] .practice-lyric-comparison,
.practice-lyrics[data-display-mode="single"] .practice-lyric-version-label { display: none !important; }
.practice-lyric-previous,
.practice-lyric-next {
  --practice-lyric-context-size: max(12px, calc(var(--practice-lyric-size) * var(--practice-lyric-comparison-size-ratio, 0.72)));
  min-height: calc(var(--practice-lyric-context-size) * var(--practice-lyric-line-height, 1.25));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--practice-lyric-primary-upcoming-user, var(--practice-lyric-upcoming-user, var(--app-text)));
  font-size: var(--practice-lyric-context-size);
  line-height: var(--practice-lyric-line-height, 1.25);
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  opacity: var(--practice-lyric-comparison-opacity, 0.72);
}
.practice-lyric-previous[data-empty],
.practice-lyric-next[data-empty] { visibility: hidden; }
.practice-lyric-current {
  --practice-lyric-current-size: calc(var(--practice-lyric-size) * var(--practice-lyric-current-line-scale, 1.2));
  min-height: calc(var(--practice-lyric-current-size) * var(--practice-lyric-line-height, 1.25));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: var(--practice-lyric-current-size);
  line-height: var(--practice-lyric-line-height, 1.25);
  font-weight: 700;
  color: var(--practice-lyric-primary-upcoming-user, var(--practice-lyric-upcoming-user, var(--app-text)));
}
.practice-lyric-current [data-lyric-current-copy] {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: var(--practice-lyric-char-gap, 0em);
  letter-spacing: var(--practice-lyric-char-gap, 0em);
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}
.practice-lyrics[data-primary-jyutping="1"][data-jyutping-mode="pinyin"] [data-lyric-current-copy],
.practice-lyrics[data-primary-jyutping="1"][data-jyutping-mode="pinyin"] [data-lyric-previous-copy],
.practice-lyrics[data-primary-jyutping="1"][data-jyutping-mode="pinyin"] [data-lyric-next-copy] {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  /* Exactly one Latin letter between adjacent syllable columns. */
  column-gap: calc(1ch + var(--practice-lyric-char-gap, 0em));
  row-gap: 0.2em;
  align-items: flex-end;
}
.practice-lyrics[data-primary-jyutping="1"][data-jyutping-mode="hanzi"] [data-lyric-current-copy],
.practice-lyrics[data-primary-jyutping="1"][data-jyutping-mode="hanzi"] [data-lyric-previous-copy],
.practice-lyrics[data-primary-jyutping="1"][data-jyutping-mode="hanzi"] [data-lyric-next-copy] {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: calc(0.25ch + var(--practice-lyric-char-gap, 0em));
  align-items: flex-end;
}
.practice-lyric-current [data-lyric-current-copy][hidden] { display: none; }
.practice-lyrics-end-summary {
  width: min(1080px, 92%);
  display: grid;
  grid-template-rows: repeat(2, minmax(56px, auto));
  gap: 12px;
  font-size: 12px;
  line-height: 1.35;
}
.practice-lyrics-end-summary[hidden] { display: none; }
.practice-lyrics-end-summary > span {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 16px;
  padding: 2px 0;
  color: var(--app-text);
  text-align: center;
}
.practice-lyrics-end-summary > .is-played { color: var(--app-muted); opacity: .68; }
.practice-lyrics-end-summary small { flex: 0 0 auto; color: inherit; font-size: max(12px, calc(var(--practice-lyric-current-size) * .32)); font-weight: 700; }
.practice-lyrics-end-summary strong { min-width: 0; overflow: hidden; color: inherit; font-size: max(18px, calc(var(--practice-lyric-current-size) * .58)); text-overflow: ellipsis; white-space: nowrap; }
.practice-lyrics-end-summary > .is-next { color: var(--practice-lyric-current-user, var(--app-warm)); }
.practice-lyrics-end-summary > .is-next strong { font-size: var(--practice-lyric-current-size); font-weight: 780; }
.practice-lyrics[data-display-mode] .practice-lyric-current:has(.practice-lyrics-end-summary:not([hidden])) {
  width: 100%;
  max-width: 100%;
  grid-template-columns: minmax(0, 1fr);
}
.practice-lyrics[data-display-mode="dual"] .practice-lyrics-end-summary { grid-column: 1 / -1; justify-self: center; }
.practice-lyric-version-label { display: block; max-width: 94%; overflow: hidden; color: var(--app-secondary); font-size: max(12px, .34em); font-weight: 780; line-height: 1.2; letter-spacing: .02em; text-overflow: ellipsis; white-space: nowrap; }
.practice-lyric-comparison { display: block; max-width: min(920px, 90%); overflow: hidden; color: var(--practice-lyric-comparison-upcoming-user, var(--practice-muted)); font-size: max(10px, calc(var(--practice-lyric-size) * var(--practice-lyric-comparison-size-ratio, 0.72))); font-weight: 620; line-height: calc(var(--practice-lyric-line-height, 1.25) * 1.08); text-overflow: ellipsis; white-space: nowrap; opacity: var(--practice-lyric-comparison-opacity, 0.72); }
.practice-lyric-current > .practice-lyric-comparison { color: var(--practice-lyric-comparison-upcoming-user, color-mix(in srgb, var(--app-accent) 58%, var(--practice-muted))); font-size: max(11px, calc(var(--practice-lyric-current-size) * var(--practice-lyric-comparison-size-ratio, 0.72))); opacity: var(--practice-lyric-comparison-opacity, 0.72); }
.practice-lyric-comparison-label { display: block; margin-bottom: 2px; color: inherit; font-size: max(12px, .82em); font-weight: 760; letter-spacing: .02em; }
.practice-lyric-comparison[hidden] { display: none; }
.practice-lyric-comparison-chars { display: inline-flex; min-width: 0; }
.practice-lyric-comparison-char { color: inherit; transition: color 70ms linear; }
.practice-lyric-comparison-char.played { color: var(--practice-lyric-comparison-played-user, var(--app-accent)); }
.practice-lyric-comparison-char.singing { color: var(--practice-lyric-comparison-current-user, var(--app-text)); }
.practice-lyric-comparison-char.played .practice-lyric-jyutping { color: color-mix(in srgb, var(--practice-lyric-comparison-played-user, var(--app-accent)) 70%, var(--practice-muted)); }
.practice-lyric-comparison-char.singing .practice-lyric-jyutping { color: color-mix(in srgb, var(--practice-lyric-comparison-current-user, var(--app-text)) 78%, var(--practice-muted)); opacity: 1; }
.practice-lyrics-empty-action {
  position: relative;
  /* The empty-state recovery action is part of the core workflow. Keep it
     clickable even when the movable beat-teaching window overlaps the lyric
     panel; users can then enter alignment instead of being trapped behind the
     lesson overlay. */
  /* Recovery must stay clickable when the movable lesson window has no safe
     empty band. It is intentionally above the cue, not hidden underneath it. */
  z-index: 229;
  display: grid;
  gap: 6px;
  min-width: min(420px, 78%);
  padding: 14px 22px;
  border: 1px solid color-mix(in srgb, var(--app-accent) 58%, var(--app-line));
  border-radius: 10px;
  color: var(--app-text);
  background: color-mix(in srgb, var(--app-accent) 10%, var(--app-panel));
  box-shadow: 0 10px 28px color-mix(in srgb, var(--app-shadow) 44%, transparent);
  cursor: pointer;
}
.practice-lyrics-empty-action[hidden] { display: none; }
.practice-lyrics-empty-action strong { font-size: clamp(22px, 3vw, 42px); line-height: 1.1; }
.practice-lyrics-empty-action small { color: color-mix(in srgb, var(--app-accent) 78%, var(--app-text)); font-size: 12px; font-weight: 750; }
.practice-lyrics-empty-action:hover,
.practice-lyrics-empty-action:focus-visible {
  border-color: var(--button-accent-border);
  background: var(--button-accent-bg);
  outline: none;
  transform: translateY(-1px);
}
.practice-lyric-char {
  display: inline-block;
  flex: 0 0 auto;
  margin-inline: calc(var(--practice-lyric-char-gap, 0em) / 2);
  color: var(--practice-lyric-primary-upcoming-user, var(--practice-lyric-upcoming-user, var(--app-text)));
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  transition: none;
}
.practice-lyric-current [data-lyric-current-copy] .practice-lyric-char {
  color: var(--practice-lyric-primary-upcoming-user, var(--practice-lyric-upcoming-user, var(--app-text)));
}
.practice-lyric-current [data-lyric-current-copy] .practice-lyric-char.played {
  color: var(--practice-lyric-primary-played-user, var(--practice-lyric-played-user, var(--app-warm)));
}
.practice-lyric-current [data-lyric-current-copy] .practice-lyric-char.singing {
  color: var(--practice-lyric-primary-current-user, var(--practice-lyric-current-user, var(--app-warm)));
  text-shadow: var(--practice-lyric-active-glow);
  transform: translateY(-1px);
}
.practice-lyric-char.played .practice-lyric-glyph,
.practice-lyric-char.singing .practice-lyric-glyph {
  color: inherit;
}
.practice-lyrics[data-primary-jyutping="1"] .practice-lyric-char {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.06em;
  min-width: 0;
  vertical-align: bottom;
}
.practice-lyrics[data-primary-jyutping="1"][data-jyutping-mode="pinyin"] .practice-lyric-char[data-kind="han"] {
  /* Width follows content; spacing comes only from parent column-gap (1ch). */
  min-width: 0;
  width: max-content;
  padding-inline: 0;
  margin: 0;
  box-sizing: content-box;
}
.practice-lyrics[data-primary-jyutping="1"][data-jyutping-mode="pinyin"] .practice-lyric-jyutping--pinyin {
  max-width: none;
  padding-inline: 0;
  font-size: max(11px, calc(1em * var(--practice-lyric-jyutping-size-ratio, 0.42) * 0.92));
}
.practice-lyrics[data-primary-jyutping="1"] .practice-lyric-char[data-kind="space"],
.practice-lyrics[data-primary-jyutping="1"] .practice-lyric-char.is-space {
  display: inline-block;
  min-width: 0.85em;
  width: 1em;
  vertical-align: bottom;
}
.practice-lyrics[data-primary-jyutping="1"] .practice-lyric-char[data-kind="other"],
.practice-lyrics[data-primary-jyutping="1"] .practice-lyric-char.is-other {
  display: inline-block;
  min-width: 0;
  vertical-align: bottom;
}
.practice-lyrics[data-primary-jyutping="1"][data-jyutping-position="below"] .practice-lyric-char {
  flex-direction: column-reverse;
  justify-content: flex-start;
}
.practice-lyric-glyph {
  display: block;
  line-height: 1.15;
}
.practice-lyric-section {
  display: inline-block;
  max-width: min(92%, 36em);
  padding: 0.12em 0.45em;
  border: 1px solid color-mix(in srgb, var(--practice-line) 70%, transparent);
  border-radius: 999px;
  color: var(--practice-muted);
  background: color-mix(in srgb, var(--app-panel) 78%, transparent);
  font-size: max(12px, 0.42em);
  font-weight: 750;
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;
  vertical-align: middle;
}
.practice-lyric-current .practice-lyric-section {
  font-size: max(12px, 0.38em);
  opacity: 0.92;
}
.practice-lyric-previous[data-line-kind="section"],
.practice-lyric-next[data-line-kind="section"],
.practice-lyric-current[data-line-kind="section"] {
  min-height: auto;
}
.practice-lyrics[data-jyutping="1"] .practice-lyric-section {
  /* Structure tags never participate in ruby columns. */
  margin: 0.15em 0;
}
.practice-lyric-jyutping {
  display: block;
  box-sizing: border-box;
  width: max-content;
  max-width: none;
  overflow: visible;
  color: var(--practice-muted);
  font-size: max(11px, calc(1em * var(--practice-lyric-jyutping-size-ratio, 0.42)));
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-align: center;
  white-space: nowrap;
  opacity: 0.9;
}
.practice-lyrics[data-jyutping-mode="hanzi"] .practice-lyric-jyutping--hanzi {
  max-width: none;
  font-size: max(12px, calc(1em * max(0.48, var(--practice-lyric-jyutping-size-ratio, 0.42))));
  font-weight: 700;
}
.practice-lyrics[data-jyutping-mode="pinyin"] .practice-lyric-jyutping--pinyin {
  max-width: none;
  padding-inline: 0;
  font-size: max(11px, calc(1em * var(--practice-lyric-jyutping-size-ratio, 0.42) * 0.92));
}
.practice-lyric-jyutping--empty {
  min-height: 1em;
  opacity: 0;
}
.practice-lyric-char.played .practice-lyric-jyutping {
  color: color-mix(in srgb, var(--practice-lyric-primary-played-user, var(--practice-lyric-played-user, var(--app-warm))) 70%, var(--practice-muted));
}
.practice-lyric-char.singing .practice-lyric-jyutping {
  color: color-mix(in srgb, var(--practice-lyric-primary-current-user, var(--practice-lyric-current-user, var(--app-warm))) 78%, var(--practice-muted));
  opacity: 1;
}
.practice-lyric-char.played { color: var(--practice-lyric-primary-played-user, var(--practice-lyric-played-user, var(--app-warm))); }
.practice-lyric-char.singing { color: var(--practice-lyric-primary-current-user, var(--practice-lyric-current-user, var(--app-warm))); text-shadow: var(--practice-lyric-active-glow); transform: translateY(-1px); }

.practice-lyric-char.beat-anchor {
  position: relative;
  color: color-mix(in srgb, var(--app-accent) 78%, var(--app-text));
  text-shadow: 0 0 14px color-mix(in srgb, var(--app-accent) 72%, transparent);
  transform: translateY(-2px) scale(1.08);
}
.practice-lyric-char.beat-anchor::after {
  position: absolute;
  right: 12%;
  bottom: -.16em;
  left: 12%;
  height: .08em;
  min-height: 2px;
  border-radius: 999px;
  background: var(--app-accent);
  box-shadow: 0 0 9px color-mix(in srgb, var(--app-accent) 68%, transparent);
  content: '';
}
.practice-lyric-countdown { display: none !important; }
.practice-lyric-countdown[hidden] { display: none; }
.practice-lyric-countdown > span { display: inline-flex; gap: 3px; }
.practice-lyric-countdown i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; transition: opacity .15s ease, transform .15s ease; }
.practice-lyric-countdown i.off { opacity: .12; transform: scale(.55); }
.practice-lyrics.is-advancing[data-primary-line-animation="1"] .practice-lyric-dual-row--primary > *,
.practice-lyrics.is-advancing[data-comparison-line-animation="1"] .practice-lyric-comparison > * {
  animation: practice-lyric-rise .9s cubic-bezier(.25, .75, .25, 1) both;
  will-change: transform;
}
.practice-lyrics.is-advancing[data-line-animation-cycle="a"][data-primary-line-animation="1"] .practice-lyric-dual-row--primary > *,
.practice-lyrics.is-advancing[data-line-animation-cycle="a"][data-comparison-line-animation="1"] .practice-lyric-comparison > * { animation-name: practice-lyric-rise-a; }
.practice-lyrics.is-advancing[data-line-animation-cycle="b"][data-primary-line-animation="1"] .practice-lyric-dual-row--primary > *,
.practice-lyrics.is-advancing[data-line-animation-cycle="b"][data-comparison-line-animation="1"] .practice-lyric-comparison > * { animation-name: practice-lyric-rise-b; }
.practice-lyrics.is-transport-visual-paused.is-advancing :is(.practice-lyric-dual-row--primary, .practice-lyric-comparison) > * {
  animation-play-state: paused;
}
.practice-lyrics[data-line-animation-off].is-advancing :is(.practice-lyric-dual-row--primary, .practice-lyric-comparison) > * { animation: none !important; }
.practice-lyrics[data-upcoming-emphasis="1"] .practice-lyric-current.waiting [data-lyric-current-copy],
.practice-lyrics[data-upcoming-emphasis="1"] .practice-lyric-next [data-lyric-next-copy] {
  color: var(--practice-lyric-primary-upcoming-user, var(--practice-lyric-upcoming-user, var(--app-text)));
  font-weight: 820;
  opacity: 1;
  text-shadow: 0 0 14px color-mix(in srgb, var(--practice-lyric-primary-upcoming-user, var(--app-accent)) 42%, transparent);
}
.practice-lyrics[data-upcoming-emphasis="1"] :is(.practice-lyric-current.waiting, .practice-lyric-next) .practice-lyric-comparison-chars {
  color: var(--practice-lyric-comparison-upcoming-user, var(--practice-muted));
  font-weight: 760;
  opacity: 1;
  text-shadow: 0 0 10px color-mix(in srgb, var(--practice-lyric-comparison-upcoming-user, var(--app-accent)) 30%, transparent);
}
@keyframes practice-lyric-rise { from { transform: translateY(calc(100% + 5px)); } to { transform: translateY(0); } }
@keyframes practice-lyric-previous-rise {
  from { transform: translateY(calc(100% + 5px)) scale(1.5); }
  to { transform: translateY(0) scale(1); }
}
@keyframes practice-lyric-current-rise {
  from { transform: translateY(calc(100% + 5px)) scale(.833333); }
  to { transform: translateY(0) scale(1); }
}
@keyframes practice-lyric-rise-a { from { transform: translateY(calc(100% + 5px)); } to { transform: translateY(0); } }
@keyframes practice-lyric-previous-rise-a { from { transform: translateY(calc(100% + 5px)) scale(1.5); } to { transform: translateY(0) scale(1); } }
@keyframes practice-lyric-current-rise-a { from { transform: translateY(calc(100% + 5px)) scale(.833333); } to { transform: translateY(0) scale(1); } }
@keyframes practice-lyric-rise-b { from { transform: translateY(calc(100% + 5px)); } to { transform: translateY(0); } }
@keyframes practice-lyric-previous-rise-b { from { transform: translateY(calc(100% + 5px)) scale(1.5); } to { transform: translateY(0) scale(1); } }
@keyframes practice-lyric-current-rise-b { from { transform: translateY(calc(100% + 5px)) scale(.833333); } to { transform: translateY(0) scale(1); } }
.practice-runway {
  --practice-runway-content-top: 0px;
  position: relative;
  /* Keep the pitch canvas compact so lyrics and transport remain visible together. */
  flex: 0 1 clamp(220px, 32vh, 360px);
  height: clamp(220px, 32vh, 360px);
  min-height: 210px;
  overflow: hidden;
  /* The lyric/pitch boundary is intentionally borderless; the two surfaces
     remain separated by spacing and their own controls. */
  border-top: 0;
  border-bottom: 1px solid var(--practice-line);
}

/* Git baseline: merged beat/pitch teaching keeps the main stage from rendering
   a second lyric/pitch surface underneath the floating lesson window. */
.practice-studio[data-beat-pitch-merged="true"] .practice-runway { display: none !important; }
.practice-studio[data-beat-pitch-merged="true"] .practice-lyrics { display: none; }
/* Merged mode moves the pitch toolbar into the floating teaching window and
   hides the original runway. Keep one compact reopen/close control in the
   fixed practice header so the beat window never becomes a one-way state. */
.practice-studio[data-beat-pitch-merged="true"] .practice-focus-beat-toggle { display: inline-flex; }
/* Merged teaching normally replaces the lyric stage with the beat ribbon, but
   an empty lyric version still needs its recovery action reachable. Keep only
   that compact empty state in flow so users can open lyric alignment instead
   of seeing an apparently unresponsive teaching surface. */
.practice-studio[data-beat-pitch-merged="true"] .practice-lyrics.is-empty-state { display: grid !important; }
.practice-studio[data-beat-pitch-merged="true"] .practice-timeline {
  margin-top: var(--practice-beat-pitch-reserved-height, 410px);
}
/* Desktop playback controls stay at the bottom of the stage. The floating
   lesson can grow into all of the area above them without moving the footer. */
html[data-layout-mode="desktop"] .practice-studio:not(.is-beat-calibration-mode) .practice-stage > .practice-timeline {
  margin-top: auto;
  flex-shrink: 0;
}
.practice-runway canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-height: 0; cursor: crosshair; }
.practice-runway canvas[hidden] { display: none !important; }
.practice-runway canvas.is-muted { opacity: .42; }
.practice-runway canvas[data-pitch-canvas-static],
.practice-beat-pitch-canvas-slot canvas[data-pitch-canvas-static] {
  z-index: 0;
  cursor: default;
  pointer-events: none;
}
.practice-pitch-scroll-layer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
  overflow: visible;
}
.practice-pitch-scroll-layer > canvas[data-pitch-canvas-static] {
  position: absolute;
  left: 0;
  top: 0;
  right: auto;
  bottom: auto;
  inset: auto;
  min-height: 0;
  display: block;
}
.practice-pitch-scroll-layer[hidden],
.practice-pitch-scroll-layer > canvas[hidden] {
  display: none !important;
}
/* Color-progress notes sit above the scrolled bake. The canvas is padded to the
   same width as the static layer so compositor scrolling never exposes a blank
   trailing edge between repaint frames. */
.practice-runway > canvas[data-pitch-canvas-blocks],
.practice-beat-pitch-canvas-slot > canvas[data-pitch-canvas-blocks] {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: block;
  transform-origin: left top;
  backface-visibility: hidden;
}
.practice-runway > canvas[data-pitch-canvas-blocks][hidden],
.practice-beat-pitch-canvas-slot > canvas[data-pitch-canvas-blocks][hidden] {
  display: none !important;
}
/* The current target is a compositor-owned element. Its geometry is updated
   only when the target changes; the same direct translation as the baked grid
   keeps the highlight glued to the moving block without repainting the wide
   pitch canvas on every motion frame. */
.practice-runway > [data-pitch-active-block],
.practice-beat-pitch-canvas-slot > [data-pitch-active-block] {
  position: absolute;
  z-index: 3;
  display: block;
  box-sizing: border-box;
  pointer-events: none;
  border: 1px solid var(--app-highlight);
  border-radius: 3px;
  background: var(--practice-target-active);
  box-shadow: 0 0 7px color-mix(in srgb, var(--practice-target-active) 72%, transparent);
  opacity: .96;
  transform-origin: left top;
  backface-visibility: hidden;
  contain: layout paint;
  will-change: transform;
}
.practice-runway > [data-pitch-active-block][data-visual-state="hit"],
.practice-beat-pitch-canvas-slot > [data-pitch-active-block][data-visual-state="hit"] {
  background: var(--practice-target-hit);
  box-shadow: 0 0 7px color-mix(in srgb, var(--practice-target-hit) 72%, transparent);
}
.practice-runway > [data-pitch-active-block][hidden],
.practice-beat-pitch-canvas-slot > [data-pitch-active-block][hidden] {
  display: none !important;
}
.practice-runway canvas[data-pitch-canvas],
.practice-beat-pitch-canvas-slot canvas[data-pitch-canvas] {
  /* The fixed opaque gutter masks every moving note, including its glow. */
  z-index: 4;
  touch-action: none;
  cursor: grab;
}
.practice-pitch-anchor-handle {
  position: absolute;
  z-index: 5;
  top: 0;
  width: 24px;
  transform: translateX(-50%);
  touch-action: none;
  cursor: ew-resize;
  pointer-events: auto;
}
.practice-pitch-anchor-handle[hidden],
.practice-studio.pitch-editor-open .practice-pitch-anchor-handle { display: none; }
.practice-pitch-anchor-handle:focus-visible {
  outline: 1px solid var(--app-accent);
  outline-offset: -7px;
  border-radius: 4px;
}
.practice-studio.pitch-canvas-anchoring { user-select: none; cursor: ew-resize; }
.practice-runway canvas[data-pitch-canvas].is-pitch-block-hit,
.practice-beat-pitch-canvas-slot canvas[data-pitch-canvas].is-pitch-block-hit { cursor: default; }
.practice-runway canvas[data-pitch-canvas].is-release-edge-hit,
.practice-beat-pitch-canvas-slot canvas[data-pitch-canvas].is-release-edge-hit,
.practice-studio.runway-pitch-release-dragging canvas[data-pitch-canvas] { cursor: ew-resize; }
.practice-studio.pitch-canvas-timeline-scrubbing canvas[data-pitch-canvas] { cursor: grabbing; }
.practice-studio.runway-pitch-inline-editing .practice-runway canvas { cursor: ns-resize; }
.practice-studio.runway-pitch-inline-editing .practice-pitch-coverage { top: 110px; }
.practice-studio.runway-pitch-release-editing .practice-pitch-coverage { top: 110px; }
.practice-runway-pitch-editbar {
  position: absolute;
  z-index: 18;
  top: 52px;
  left: 14px;
  display: flex;
  max-width: calc(100% - 28px);
  min-height: 44px;
  align-items: center;
  gap: 6px;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--app-accent) 52%, var(--app-line));
  border-radius: 8px;
  color: var(--app-text);
  background: color-mix(in srgb, var(--app-panel) 94%, transparent);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--app-shadow) 52%, transparent);
  backdrop-filter: blur(12px);
}
.practice-runway-pitch-editbar[hidden] { display: none !important; }
.practice-runway-pitch-editbar > div { display: grid; min-width: 190px; gap: 1px; padding: 0 7px 0 3px; }
.practice-runway-pitch-editbar > div > span { color: var(--app-accent); font-size: 12px; font-weight: 800; }
.practice-runway-pitch-editbar > div > strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.practice-runway-pitch-editbar > div > small { color: var(--app-muted); font-size: 12px; line-height: 1.35; }
.practice-runway-pitch-editbar > button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--app-line);
  border-radius: 6px;
  color: var(--app-text);
  background: var(--button-secondary-bg);
  cursor: pointer;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}
.practice-runway-pitch-editbar > button[hidden] { display: none !important; }
.practice-runway-pitch-editbar > button:hover { border-color: var(--app-accent); background: var(--state-hover); }
.practice-runway-pitch-editbar > button.is-primary { border-color: var(--app-accent); color: var(--button-primary-text); background: var(--button-primary-bg); }
.practice-runway-pitch-editbar > button:disabled { opacity: .5; cursor: wait; }
.practice-runway-pitch-editbar.is-release-mode {
  position: fixed;
  z-index: var(--app-layer-coach-popover, 2147483599);
  top: var(--practice-release-edit-top, 56px);
  left: var(--practice-release-edit-left, 14px);
  width: max-content;
  max-width: min(440px, calc(100vw - 16px));
  min-height: 40px;
  padding: 5px;
  border-radius: 9px;
}
.practice-runway-pitch-editbar.is-release-mode > div {
  min-width: 132px;
  max-width: 190px;
  padding-inline: 6px;
}
.practice-runway-pitch-editbar.is-release-mode > div > span,
.practice-runway-pitch-editbar.is-release-mode > div > small { display: none; }
.practice-runway-pitch-editbar.is-release-mode > button {
  min-height: 30px;
  padding-inline: 9px;
}

.practice-runway-pitch-menu {
  position: fixed;
  /* This menu is detached from the merged teaching surface. Keep it on the
     shared coach-popover layer so the fixed teaching window cannot cover it. */
  z-index: var(--app-layer-coach-popover, 2147483599);
  display: grid;
  width: min(330px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  gap: 4px;
  padding: 7px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid color-mix(in srgb, var(--app-accent) 34%, var(--app-line));
  border-radius: 9px;
  color: var(--app-text);
  background: var(--app-panel);
  box-shadow: 0 18px 46px color-mix(in srgb, var(--app-shadow) 70%, transparent);
}
.practice-runway-pitch-menu[hidden] { display: none !important; }
.practice-runway-pitch-menu > header { display: grid; gap: 3px; padding: 8px 9px 9px; border-bottom: 1px solid var(--app-line); }
.practice-runway-pitch-menu > header strong { font-size: 15px; line-height: 1.3; }
.practice-runway-pitch-menu > header small { color: var(--app-muted); font-size: 11px; line-height: 1.45; }
.practice-runway-pitch-menu button,
.practice-runway-pitch-menu summary {
  display: flex;
  width: 100%;
  min-height: 46px;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--app-text);
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.practice-runway-pitch-menu button:hover,
.practice-runway-pitch-menu summary:hover { border-color: var(--app-line); background: var(--state-hover); }
.practice-runway-pitch-menu button:focus-visible,
.practice-runway-pitch-menu summary:focus-visible { outline: 2px solid var(--app-accent); outline-offset: -2px; }
.practice-runway-pitch-menu button:disabled { opacity: .45; cursor: not-allowed; }
.practice-runway-pitch-menu button > span,
.practice-runway-pitch-menu summary > span { display: grid; min-width: 0; gap: 2px; }
.practice-runway-pitch-menu button strong,
.practice-runway-pitch-menu summary strong { font-size: 13px; line-height: 1.3; }
.practice-runway-pitch-menu button small,
.practice-runway-pitch-menu summary small { color: var(--app-muted); font-size: 11px; line-height: 1.35; }
.practice-runway-pitch-menu :is(button, summary) > i { color: var(--app-accent); font-size: 18px; font-style: normal; }
.practice-runway-pitch-menu kbd {
  min-width: 30px;
  padding: 3px 6px;
  border: 1px solid var(--app-line);
  border-radius: 4px;
  color: var(--app-muted);
  background: var(--control-bg);
  font: 700 10px var(--font-family-mono);
  text-align: center;
  white-space: nowrap;
}
.practice-runway-pitch-menu > button.is-primary { border-color: color-mix(in srgb, var(--app-accent) 58%, var(--app-line)); background: var(--app-accent-soft); }
.practice-runway-pitch-menu-group { border-top: 1px solid var(--app-line); }
.practice-runway-pitch-menu-group > summary { list-style: none; }
.practice-runway-pitch-menu-group > summary::-webkit-details-marker { display: none; }
.practice-runway-pitch-menu-group[open] > summary { color: var(--app-accent); background: var(--app-accent-soft); }
.practice-runway-pitch-menu-group[open] > summary > i { transform: rotate(90deg); }
.practice-runway-pitch-menu-group > div { display: grid; gap: 2px; margin: 2px 0 5px 12px; padding-left: 7px; border-left: 2px solid color-mix(in srgb, var(--app-accent) 38%, var(--app-line)); }
.practice-runway-pitch-menu-group > div > button { min-height: 43px; }
@media (max-width: 900px) {
  .practice-runway-pitch-editbar {
    right: 8px;
    left: 8px;
    flex-wrap: wrap;
  }
  .practice-runway-pitch-editbar.is-release-mode {
    right: auto;
    left: var(--practice-release-edit-left, 8px);
    flex-wrap: nowrap;
  }
  .practice-runway-pitch-editbar > div { flex: 1 1 100%; min-width: 0; }
  .practice-runway-pitch-editbar > button { flex: 1 1 auto; }
}
.practice-entry-cue {
  --practice-cue-scale: 1;
  --practice-lyric-current-size: calc(var(--practice-lyric-size, 32px) * var(--practice-lyric-current-line-scale, 1.2));
  --practice-beat-playhead-tone: var(--practice-beat-playhead-user, var(--practice-lyric-current-user, var(--app-warm)));
  --practice-beat-path-upper: 39px;
  --practice-beat-path-lower: 76px;
  position: fixed;
  /* Ordinary rehearsal is a top-level teaching surface. The desktop titlebar
     and app menu keep the only higher shell layer. */
  z-index: var(--app-layer-teaching, 2147483595);
  top: var(--practice-entry-cue-y, 150px);
  left: var(--practice-entry-cue-x, calc(50vw - 320px));
  width: var(--practice-entry-cue-width, 640px);
  height: var(--practice-entry-cue-height, 252px);
  display: block;
  margin: 0;
  box-sizing: border-box;
  color: var(--app-text);
  border: 1px solid color-mix(in srgb, var(--app-accent) 42%, var(--app-line));
  border-radius: 9px;
  background: var(--app-panel);
  opacity: 1;
  box-shadow: 0 16px 44px color-mix(in srgb, var(--app-shadow) 84%, transparent), inset 0 0 28px color-mix(in srgb, var(--app-accent) 7%, transparent);
  cursor: default;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  isolation: isolate;
  contain: layout style;
  transition: border-color 120ms linear, box-shadow 140ms ease-out;
}
.practice-entry-cue[hidden] { display: none; }
.practice-entry-cue:has(details[open]) { z-index: var(--app-layer-teaching-foreground, 2147483597); }
.practice-entry-cue:has(.practice-beat-more-tools[open]) { z-index: var(--app-layer-menu, 2147483599); }
/* Maximized merged teaching owns the docked seek + transport footer. Keep the
   whole window above the stage transport strip so toolbar and playback controls
   stay clickable even when geometry overlaps the main stage. */
.practice-entry-cue.is-maximized { z-index: var(--app-layer-teaching, 2147483595); }
.practice-studio:not(.is-beat-calibration-mode) .practice-entry-cue {
  /* Ordinary rehearsal may deliberately enlarge this application-level window
     across the monitoring rail. Keep the lesson fully visible while native
     title/menu chrome and shared blocking dialogs retain their higher layers. */
  z-index: var(--app-layer-teaching-foreground, 2147483597);
}
.practice-entry-cue.is-maximized .practice-entry-cue-resize { display: none; }
.practice-entry-cue-visual {
  position: absolute;
  z-index: 7;
  top: 50%;
  left: 50%;
  width: var(--practice-cue-base-width, 640px);
  height: 252px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: calc(36px * var(--practice-cue-inverse-scale, 1)) minmax(0, 1fr) 4px;
  align-items: stretch;
  gap: 0 calc(10px * var(--practice-cue-inverse-scale, 1));
  padding: calc(8px * var(--practice-cue-inverse-scale, 1)) calc(12px * var(--practice-cue-inverse-scale, 1)) calc(7px * var(--practice-cue-inverse-scale, 1));
  box-sizing: border-box;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(var(--practice-cue-scale));
  transform-origin: center;
}
.practice-entry-cue[data-pitch-merged="true"] .practice-entry-cue-visual {
  top: 0;
  transform: translateX(-50%) scale(var(--practice-cue-scale));
  transform-origin: top center;
  /* Beat toolbar and halfbeat lane must stay above the merged pitch canvas slot. */
  z-index: 10;
  /* Drop the leftover 4px status row. Beat fills down to the drag splitter gap. */
  grid-template-rows: calc(36px * var(--practice-cue-inverse-scale, 1)) minmax(0, 1fr);
}
/* Merged beat/pitch: float the status pill inside the beat lane so it does not
   stack on the split divider with the pitch header and split label. */
.practice-entry-cue[data-pitch-merged="true"] .practice-halfbeat-flow {
  grid-template-rows: minmax(0, 1fr);
  /* The beat/pitch drag splitter is the only vertical boundary. Keep a small
     empty band above it; do not draw a second canvas baseline. */
  margin-bottom: 8px;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
}
.practice-entry-cue[data-pitch-merged="true"] .practice-halfbeat-viewport {
  border-bottom: 0;
}
.practice-entry-cue[data-pitch-merged="true"] .practice-halfbeat-footer {
  position: absolute;
  z-index: 3;
  right: auto;
  bottom: calc(8px * var(--practice-cue-inverse-scale, 1));
  left: calc(8px * var(--practice-cue-inverse-scale, 1));
  max-width: min(72%, 380px);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 9px;
  border: 1px solid color-mix(in srgb, var(--app-line) 72%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--app-panel) 88%, transparent);
  pointer-events: none;
  transform: scale(var(--practice-cue-inverse-scale, 1));
  transform-origin: bottom left;
}
.practice-entry-cue[data-pitch-merged="true"] .practice-halfbeat-footer > strong {
  flex: 0 0 auto;
  max-width: 9em;
  padding-right: 7px;
  border-right: 1px solid var(--app-line);
  font-size: 12px;
}
.practice-entry-cue[data-pitch-merged="true"] .practice-halfbeat-footer > small {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.practice-entry-cue[data-pitch-merged="true"] .practice-halfbeat-legend {
  display: none;
}
.practice-entry-cue[data-pitch-merged="true"] .practice-beat-pitch-panel {
  grid-template-rows: 22px minmax(0, 1fr);
  gap: 4px;
  padding-top: 10px;
  border-top: 0;
  border-radius: 0 0 7px 7px;
}
.practice-entry-cue[data-pitch-merged="true"] .practice-beat-pitch-panel > header {
  min-height: 22px;
  padding-inline: 8px 10px;
  border-radius: 5px 5px 0 0;
  background: color-mix(in srgb, var(--app-panel) 92%, var(--practice-canvas-bg));
}
.practice-entry-cue[data-pitch-merged="true"] .practice-beat-pitch-panel > header strong::after {
  content: none;
}
.practice-entry-cue[data-pitch-merged="true"] .practice-beat-pitch-panel > header small {
  display: none;
}
.practice-entry-cue[data-pitch-merged="true"] .practice-beat-pitch-canvas-slot {
  border-top: 0;
}
.practice-entry-cue[data-pitch-merged="true"] .practice-beat-toolbar {
  position: relative;
  /* Keep the merged toolbar above the transparent outer drag gutter (19).
     This more-specific rule must not undo the shared toolbar hit layer. */
  z-index: 20;
  pointer-events: auto;
}
.practice-entry-cue[data-pitch-merged="true"] .practice-beat-transport-slot {
  z-index: 11;
  top: auto;
  height: auto;
  max-height: calc(var(--practice-entry-cue-transport-height, 120px) + 52px);
}
.practice-beat-pitch-panel {
  position: absolute;
  z-index: 6;
  top: var(--practice-entry-cue-beat-height, 252px);
  right: 4px;
  bottom: 4px;
  left: 4px;
  min-height: 0;
  display: grid;
  grid-template-rows: 26px minmax(0, 1fr);
  gap: 4px;
  padding: 4px 2px 2px;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--app-accent) 34%, var(--app-line));
  border-radius: 7px;
  background: var(--practice-canvas-bg);
  pointer-events: auto;
}
.practice-beat-pitch-panel[hidden] { display: none; }
.practice-beat-pitch-split {
  position: absolute;
  /* Above merged beat viewport (z-index 10) so the divider stays draggable. */
  z-index: 18;
  top: calc(var(--practice-entry-cue-beat-height, 252px) - 7px);
  right: 18px;
  left: 18px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: var(--app-muted);
  background: color-mix(in srgb, var(--app-panel) 88%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--app-line) 80%, transparent);
  cursor: ns-resize;
  opacity: .42;
  pointer-events: auto;
  touch-action: none;
  transition: opacity .15s ease, background .15s ease, box-shadow .15s ease;
}
.practice-beat-pitch-split[hidden] { display: none !important; }
.practice-beat-pitch-split:hover,
.practice-beat-pitch-split:focus-visible,
.practice-studio.is-splitting-beat-pitch .practice-beat-pitch-split {
  color: var(--app-accent);
  background: color-mix(in srgb, var(--app-panel) 94%, var(--app-accent));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--app-accent) 46%, var(--app-line));
  opacity: .9;
}
.practice-beat-pitch-split span,
.practice-beat-pitch-split span::before,
.practice-beat-pitch-split span::after {
  position: absolute;
  left: 50%;
  width: 36px;
  height: 1px;
  background: currentColor;
  transform: translateX(-50%);
}
.practice-beat-pitch-split span::before,
.practice-beat-pitch-split span::after { content: ''; }
.practice-beat-pitch-split span { top: 6px; }
.practice-beat-pitch-split span::before { top: -3px; }
.practice-beat-pitch-split span::after { top: 3px; }
.practice-beat-pitch-split small {
  position: absolute;
  right: 10px;
  top: 50%;
  display: block;
  color: var(--app-muted);
  font-size: 11px;
  letter-spacing: .04em;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity .15s ease;
}
.practice-beat-pitch-split:hover small,
.practice-beat-pitch-split:focus-visible small,
.practice-studio.is-splitting-beat-pitch .practice-beat-pitch-split small { opacity: 1; }
.practice-studio.is-splitting-beat-pitch,
.practice-studio.is-splitting-beat-pitch * { cursor: ns-resize !important; }
.practice-beat-pitch-panel > header {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-inline: 10px 8px;
  color: var(--app-text);
  cursor: ns-resize;
}
.practice-beat-pitch-panel > header strong {
  flex: 0 0 auto;
  color: var(--app-accent);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.25;
}
.practice-beat-pitch-panel > header strong::after {
  color: var(--app-muted);
  font-weight: 500;
  content: ' · ';
}
.practice-beat-pitch-panel > header small {
  min-width: 0;
  overflow: hidden;
  color: color-mix(in srgb, var(--app-text) 82%, var(--app-muted));
  font-size: 13px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Keep panel position:absolute (above). Never override to relative — that
   collapses the merged pitch canvas height and hides the runway. */
.practice-pitch-vertical-zoom { display: none !important; }
.practice-beat-pitch-panel > .practice-pitch-vertical-zoom-handle {
  position: absolute;
  z-index: 9;
  right: 18px;
  bottom: 4px;
  left: 18px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: var(--app-muted);
  background: color-mix(in srgb, var(--app-panel) 88%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--app-line) 80%, transparent);
  cursor: ns-resize;
  opacity: .34;
  pointer-events: auto;
  touch-action: none;
  transition: opacity .15s ease, background .15s ease, box-shadow .15s ease;
}
.practice-pitch-vertical-zoom-handle:hover,
.practice-pitch-vertical-zoom-handle:focus-visible,
.practice-studio.is-pitch-vertical-zooming .practice-pitch-vertical-zoom-handle {
  color: var(--app-accent);
  background: color-mix(in srgb, var(--app-panel) 94%, var(--app-accent));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--app-accent) 46%, var(--app-line));
  opacity: .95;
}
.practice-pitch-vertical-zoom-handle span,
.practice-pitch-vertical-zoom-handle span::before,
.practice-pitch-vertical-zoom-handle span::after {
  position: absolute;
  left: 50%;
  width: 36px;
  height: 1px;
  background: currentColor;
  transform: translateX(-50%);
}
.practice-pitch-vertical-zoom-handle span::before,
.practice-pitch-vertical-zoom-handle span::after { content: ''; }
.practice-pitch-vertical-zoom-handle span { top: 6px; }
.practice-pitch-vertical-zoom-handle span::before { top: -3px; }
.practice-pitch-vertical-zoom-handle span::after { top: 3px; }
.practice-pitch-vertical-zoom-handle small {
  position: absolute;
  right: 10px;
  top: 50%;
  display: block;
  color: var(--app-muted);
  font-size: 11px;
  letter-spacing: .04em;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity .15s ease;
}
.practice-pitch-vertical-zoom-handle:hover small,
.practice-pitch-vertical-zoom-handle:focus-visible small,
.practice-studio.is-pitch-vertical-zooming .practice-pitch-vertical-zoom-handle small { opacity: 1; }
.practice-studio.is-pitch-vertical-zooming,
.practice-studio.is-pitch-vertical-zooming * { cursor: ns-resize !important; }
.practice-runway-resize.practice-pitch-vertical-zoom-handle small { display: block; }
.practice-pitch-vertical-zoom {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  cursor: default;
}
.practice-pitch-vertical-zoom > button > .sr-command-icon {
  display: none !important;
}
.practice-pitch-vertical-zoom > button {
  min-width: 28px;
  min-height: 22px;
  padding: 0 6px;
  border: 1px solid var(--app-line);
  border-radius: 0;
  color: var(--app-text);
  background: var(--app-panel);
  cursor: pointer;
}
.practice-pitch-vertical-zoom > button:first-child { border-radius: 5px 0 0 5px; }
.practice-pitch-vertical-zoom > button + button { margin-left: -1px; }
.practice-pitch-vertical-zoom > button:last-child { border-radius: 0 5px 5px 0; }
.practice-pitch-vertical-zoom > [data-pitch-vertical-zoom-output] {
  min-width: 44px;
  color: var(--app-accent);
  font-variant-numeric: tabular-nums;
}
.practice-pitch-vertical-zoom > button:hover,
.practice-pitch-vertical-zoom > button:focus-visible {
  z-index: 1;
  border-color: color-mix(in srgb, var(--app-accent) 52%, var(--app-line));
  background: var(--state-hover);
}
.practice-pitch-vertical-zoom > button:disabled {
  opacity: .42;
  cursor: default;
}
.practice-beat-pitch-canvas-slot {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-top: 1px solid var(--app-line);
  border-radius: 5px;
  /* Keep a lightweight reference surface under the canvases. The static
     pitch grid can be temporarily hidden while a merged/split bake is being
     rebuilt; the CSS fallback prevents a black flash and costs no canvas
     repaint. A visible static canvas paints above this layer. */
  background:
    repeating-linear-gradient(
      to bottom,
      color-mix(in srgb, var(--practice-grid-minor) 46%, transparent) 0 1px,
      transparent 1px 12px
    ),
    var(--practice-canvas-bg);
  /* Do not use contain/paint isolation here: the merged pitch scroll layer is
     intentionally wider than the viewport and must stay fully rasterized. */
  transform: translateZ(0);
}
.practice-beat-pitch-canvas-slot > canvas[data-pitch-canvas] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  /* Blank space is always the timeline pan surface. Interactive pitch blocks
     override this through the hit-state classes above. */
  cursor: grab;
}
.practice-beat-pitch-canvas-slot canvas[data-pitch-canvas-static] {
  position: absolute;
  left: 0;
  top: 0;
  right: auto;
  bottom: auto;
  inset: auto;
}
.practice-beat-pitch-canvas-slot canvas[hidden] { display: none !important; }
.practice-beat-pitch-canvas-slot canvas.is-muted { opacity: .42; }
.practice-merged-pitch-playhead {
  position: absolute;
  z-index: 16;
  top: 8px;
  bottom: 20px;
  left: 34%;
  width: 0;
  pointer-events: none;
  transform: translate3d(-1px, 0, 0);
}
.practice-merged-pitch-playhead[hidden] {
  display: none !important;
}
.practice-merged-pitch-playhead::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 -1px;
  width: 2px;
  background: var(--practice-playhead);
  box-shadow: 0 0 8px color-mix(in srgb, var(--practice-playhead) 55%, transparent);
}
/* Match split-mode fixed playhead: a clean line only — no top triangle. */
.practice-merged-pitch-playhead.is-playing::before {
  inset: 0 auto 0 0;
  width: 1px;
  box-shadow: none;
}
.practice-beat-transport-slot {
  position: absolute;
  z-index: 7;
  right: 4px;
  bottom: 4px;
  left: 4px;
  height: auto;
  min-height: var(--practice-entry-cue-transport-height, 0px);
  box-sizing: border-box;
  pointer-events: auto;
}
.practice-beat-transport-slot[hidden] { display: none; }
.practice-entry-cue.is-maximized .practice-beat-transport-slot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.practice-entry-cue.is-maximized[data-transport-docked="true"] .practice-beat-pitch-panel {
  right: 10px;
  bottom: calc(var(--practice-entry-cue-transport-height, 96px) + 10px);
  left: 10px;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
}
.practice-entry-cue.is-maximized[data-pitch-merged="true"] .practice-beat-pitch-panel {
  grid-template-rows: 28px minmax(0, 1fr);
  gap: 4px;
  padding: 10px 4px 4px;
  border-top: 0;
}
.practice-entry-cue.is-maximized[data-pitch-merged="true"] .practice-beat-pitch-panel > header {
  padding-inline: 30px 12px;
}
.practice-entry-cue.is-maximized[data-pitch-merged="true"] .practice-beat-pitch-panel > header strong,
.practice-entry-cue.is-maximized[data-pitch-merged="true"] .practice-beat-pitch-panel > header small {
  font-size: 13px;
  line-height: 1.25;
}
.practice-entry-cue.is-maximized[data-pitch-merged="true"] .practice-beat-transport-slot {
  right: 10px;
  left: 10px;
}
/* The maximized footer owns both seek and transport. Visibility of playback /
   practice / monitoring / review (试听人声、重录…) stays on the studio state
   rules. */
.practice-entry-cue.is-maximized .practice-beat-transport-slot > .practice-timeline {
  position: static;
  z-index: auto;
  width: 100%;
  min-height: 38px;
  /* Merged rehearsal normally reserves the stage's seek strip with a large
     top margin. Once the seek bar is moved into this self-contained footer,
     that stage reservation would push it below the maximized window. */
  margin: 0 !important;
  box-sizing: border-box;
  padding: 0 10px;
  border: 1px solid var(--practice-line);
  border-radius: 7px 7px 0 0;
  background: var(--practice-control-strip-bg);
}
.practice-entry-cue.is-maximized .practice-beat-transport-slot > .practice-transport {
  position: static !important;
  z-index: auto;
  inset: auto !important;
  width: 100% !important;
  height: auto;
  min-height: 64px !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: 0 !important;
  padding: 8px 14px !important;
  border: 1px solid color-mix(in srgb, var(--app-accent) 34%, var(--app-line));
  border-top: 1px solid color-mix(in srgb, var(--app-accent) 34%, var(--app-line));
  border-radius: 0 0 7px 7px;
  background: var(--app-panel);
  box-shadow: none;
  overflow: visible;
  transform: none !important;
}
/* When the merged beat/pitch surface is docked on the right, the main stage
   remains the playback surface. Keep lyrics and the shared timeline visible;
   the dock owns the merged teaching canvas and must not leave a blank stage. */

/* The song-specific beat lesson is a scrolling event ribbon. The fixed line is
   the only stationary time reference; bars, half-beats, arrows and lyric glyphs
   all share the same translated track. */
.practice-halfbeat-flow {
  position: relative;
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 34px;
  border: 1px solid color-mix(in srgb, var(--app-line) 84%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--app-bg) 48%, transparent);
  overflow: hidden;
  cursor: grab;
  pointer-events: auto;
}
.practice-studio[data-beat-motion-labels="false"] .practice-halfbeat-flow { grid-template-rows: minmax(0, 1fr); }
.practice-studio[data-beat-motion-labels="false"] :is(.practice-halfbeat-meta, .practice-halfbeat-footer, .practice-entry-exact-marker em) { display: none; }
.practice-studio[data-beat-motion-labels="false"] .practice-entry-cue.is-maximized[data-pitch-merged="true"] .practice-halfbeat-footer { display: none; }
.practice-studio[data-beat-motion-labels="false"] .practice-halfbeat-playhead:not([data-mode="tap"]) :is(span, b) { display: none; }
/* The exact next-entry sentence is optional detail rather than core teaching
   content. Keep it off by default in every layout, and return its footer row
   to the lyric/beat canvas. The independent aria-live status remains active. */
.practice-studio[data-beat-entry-details="false"] .practice-halfbeat-flow { grid-template-rows: minmax(0, 1fr); }
.practice-studio[data-beat-entry-details="false"] .practice-halfbeat-footer { display: none !important; }
.practice-halfbeat-viewport {
  position: relative;
  min-width: 0;
  overflow: hidden;
  contain: layout style paint;
  transform: translateZ(0);
  border-bottom: 1px solid color-mix(in srgb, var(--app-line) 76%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--app-panel) 54%, transparent), transparent 16% 84%, color-mix(in srgb, var(--app-panel) 54%, transparent));
  cursor: grab;
  touch-action: none;
}
.practice-halfbeat-viewport.is-timeline-panning { cursor: grabbing; }
.practice-halfbeat-viewport.is-timeline-panning .practice-halfbeat-track { will-change: transform; }
.practice-halfbeat-viewport > .practice-lyric-quick-tools {
  z-index: 20;
  top: 8px;
  bottom: 8px;
}
.practice-entry-cue-lyric-fallback {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 42px 20px 26px;
  overflow: hidden;
  pointer-events: none;
  text-align: center;
  text-shadow: 0 0 14px color-mix(in srgb, var(--app-text) 22%, transparent);
}
.practice-entry-cue-lyric-fallback[hidden] { display: none; }
/* Presentation contract: the large centered lyric rows belong only to the
   explicit character-lyrics view. Keep this CSS guard in addition to the JS
   visibility owner so an async beat-strip rebuild can never flash stale rows. */
.practice-entry-cue[data-beat-lyric-view="beat"] .practice-entry-cue-lyric-fallback {
  display: none !important;
  visibility: hidden;
}
.practice-entry-cue-lyric-fallback :is(span, strong, small) {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}
.practice-entry-cue-lyric-fallback span {
  color: var(--practice-lyric-primary-upcoming-user, var(--practice-lyric-upcoming-user, var(--app-muted)));
  font-size: max(12px, calc(var(--practice-lyric-size, 32px) * 0.92));
  font-weight: 650;
  line-height: var(--practice-lyric-line-height, 1.1);
}
.practice-entry-cue-lyric-fallback strong {
  color: var(--practice-lyric-primary-current-user, var(--practice-lyric-current-user, var(--app-warm)));
  font-size: var(--practice-lyric-current-size, clamp(24px, 3.4vw, 46px));
  font-weight: 800;
  line-height: var(--practice-lyric-line-height, 1.1);
}
.practice-entry-cue-lyric-fallback small {
  color: var(--practice-lyric-comparison-current-user, var(--app-muted));
  font-size: max(12px, calc(var(--practice-lyric-current-size, 32px) * var(--practice-lyric-comparison-size-ratio, 0.72)));
  font-weight: 650;
  line-height: var(--practice-lyric-line-height, 1.1);
  opacity: var(--practice-lyric-comparison-opacity, 0.72);
}
.practice-entry-cue[data-beat-lyric-view="characters"] .practice-halfbeat-track {
  visibility: hidden;
}
/* Active onset rules can make a descendant visible through a hidden track. */
.practice-entry-cue[data-beat-lyric-view="characters"]:not(.is-beat-lyric-editing) .practice-halfbeat-track :is(.practice-character-onset-marker, .practice-entry-exact-marker) {
  display: none !important;
}
/* Point editing always uses the beat ribbon; character teaching rows stay hidden. */
.practice-entry-cue.is-beat-lyric-editing .practice-halfbeat-track {
  visibility: visible;
}
.practice-entry-cue[data-beat-lyric-view="characters"] .practice-halfbeat-playhead,
.practice-halfbeat-playhead[data-character-view-hidden] {
  display: none !important;
}
.practice-entry-cue[data-beat-lyric-view="characters"] .practice-entry-cue-lyric-fallback {
  pointer-events: auto;
  cursor: pointer;
}
.practice-entry-cue-lyric-fallback[data-view-mode="characters"] {
  gap: 10px;
  padding: 30px 24px 24px;
}
.practice-entry-cue-lyric-fallback[data-view-mode="characters"] > :is(span, strong) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--practice-lyric-char-gap, 0em);
  max-width: none;
  white-space: pre;
}
.practice-entry-cue-lyric-fallback[data-view-mode="characters"] > span {
  color: var(--practice-lyric-primary-upcoming-user, var(--practice-lyric-upcoming-user, var(--app-muted)));
  font-size: max(12px, calc(var(--practice-lyric-size, 32px) * 0.92));
}
.practice-entry-cue-lyric-fallback[data-view-mode="characters"] > strong {
  color: var(--practice-lyric-primary-upcoming-user, var(--practice-lyric-upcoming-user, var(--app-muted)));
  font-size: var(--practice-lyric-current-size, clamp(24px, 3.4vw, 46px));
  font-weight: 800;
}
.practice-entry-cue-lyric-fallback[data-view-mode="characters"] .practice-beat-lyric-char {
  display: inline-block;
  flex: 0 0 auto;
  max-width: none;
  color: var(--practice-lyric-primary-upcoming-user, var(--practice-lyric-upcoming-user, var(--app-muted)));
  font: inherit;
  line-height: var(--practice-lyric-line-height, 1.25);
  opacity: .72;
  text-shadow: none;
  transition: color .08s linear, opacity .08s linear, text-shadow .08s linear;
}
.practice-entry-cue-lyric-fallback[data-view-mode="characters"] .practice-beat-lyric-char.is-space {
  width: .34em;
}
.practice-entry-cue-lyric-fallback[data-view-mode="characters"] .practice-beat-lyric-char.is-sung {
  color: var(--practice-lyric-primary-played-user, var(--practice-lyric-played-user, var(--app-accent)));
  opacity: .9;
}
.practice-entry-cue-lyric-fallback[data-view-mode="characters"] .practice-beat-lyric-char.is-singing {
  color: var(--practice-lyric-primary-current-user, var(--practice-lyric-current-user, var(--app-warm)));
  opacity: 1;
  text-shadow: var(--practice-lyric-active-glow);
}
.practice-entry-cue-lyric-fallback[data-view-mode="characters"] .practice-beat-lyric-char.is-future {
  color: var(--practice-lyric-primary-upcoming-user, var(--practice-lyric-upcoming-user, var(--app-muted)));
  opacity: .56;
}
.practice-entry-cue-lyric-fallback[data-view-mode="characters"] > small {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--practice-lyric-char-gap, 0em);
  max-width: none;
  width: max-content;
  align-self: center;
  text-align: center;
  letter-spacing: 0;
  font-size: max(12px, calc(var(--practice-lyric-current-size, 32px) * var(--practice-lyric-comparison-size-ratio, .72)));
}
.practice-entry-cue[data-dual-lyrics="true"] .practice-entry-cue-lyric-fallback[data-view-mode="characters"] > strong::before,
.practice-entry-cue[data-dual-lyrics="true"] .practice-entry-cue-lyric-fallback[data-view-mode="characters"] > small::before {
  flex: 0 0 auto;
  align-self: center;
  margin-right: 8px;
  color: var(--app-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
}
.practice-entry-cue[data-primary-role="original"][data-dual-lyrics="true"] .practice-entry-cue-lyric-fallback > strong::before,
.practice-entry-cue[data-comparison-role="original"][data-dual-lyrics="true"] .practice-entry-cue-lyric-fallback > small::before { content: '原词'; }
.practice-entry-cue[data-primary-role="remix"][data-dual-lyrics="true"] .practice-entry-cue-lyric-fallback > strong::before,
.practice-entry-cue[data-comparison-role="remix"][data-dual-lyrics="true"] .practice-entry-cue-lyric-fallback > small::before { content: '改词'; }
.practice-entry-cue[data-dual-lyrics="false"] [data-practice-entry-cue-lyric-comparison] { display: none !important; }
.practice-entry-cue-lyric-fallback [data-beat-lyric-row="comparison"] .practice-beat-lyric-char {
  color: var(--practice-lyric-comparison-upcoming-user, var(--app-muted));
}
.practice-entry-cue-lyric-fallback [data-beat-lyric-row="comparison"] .practice-beat-lyric-char.is-sung {
  color: var(--practice-lyric-comparison-played-user, var(--app-accent));
}
.practice-entry-cue-lyric-fallback [data-beat-lyric-row="comparison"] .practice-beat-lyric-char.is-singing {
  color: var(--practice-lyric-comparison-current-user, var(--app-warm));
  text-shadow: var(--practice-lyric-active-glow);
}
.practice-entry-cue-lyric-fallback[data-primary-character-lyrics="0"] > strong .practice-beat-lyric-char {
  color: var(--practice-lyric-primary-upcoming-user, var(--app-text));
  text-shadow: none;
}
.practice-entry-cue-lyric-fallback[data-comparison-character-lyrics="0"] > small .practice-beat-lyric-char {
  color: var(--practice-lyric-comparison-upcoming-user, var(--app-muted));
  text-shadow: none;
}
.practice-teaching-view-select { display: none; }
/* Presentation rows stay complete and unwrapped. The layout fitter reduces
   their requested font size to the live content width, including role labels. */
.practice-lyrics[data-display-mode="single"] :is([data-lyric-current-copy], [data-lyric-next-copy], [data-lyric-previous-copy]) {
  display: inline-flex;
  width: max-content;
  max-width: none;
  flex-wrap: nowrap;
  white-space: pre;
  text-overflow: clip;
  overflow: visible;
}
.practice-lyrics[data-display-mode="single"] .practice-lyric-char { flex: 0 0 auto; }
#practiceStudio .practice-lyrics[data-display-mode] {
  grid-template-rows: none;
  grid-auto-rows: max-content;
}
#practiceStudio .practice-lyrics[data-display-mode] > [data-lyric] { min-height: 0; }
/* One requested size per lyric role across the entire visible screen. Width
   and height fitting share the smallest result instead of sizing each sentence. */
.practice-lyrics,
.practice-entry-cue-lyric-fallback {
  --practice-lyric-fit-large-size: calc(var(--practice-lyric-size, 32px) * var(--practice-lyric-current-line-scale, 1.2));
  --practice-lyric-fit-small-size: max(12px, calc(var(--practice-lyric-fit-large-size) * var(--practice-lyric-comparison-size-ratio, .72)));
  --practice-lyric-fit-primary-size: var(--practice-lyric-fit-large-size);
  --practice-lyric-fit-comparison-size: var(--practice-lyric-fit-small-size);
}
/* Upper is the singing slot; lower is the comparison slot. Content alone moves. */
.practice-lyrics[data-display-mode="dual"][data-primary-position="bottom"],
.practice-entry-cue[data-dual-lyrics="true"] .practice-entry-cue-lyric-fallback[data-primary-position="bottom"] {
  --practice-lyric-fit-primary-size: var(--practice-lyric-fit-small-size);
  --practice-lyric-fit-comparison-size: var(--practice-lyric-fit-large-size);
}
.practice-lyrics[data-display-mode="dual"] {
  --practice-lyric-primary-slot-opacity: 1;
  --practice-lyric-comparison-slot-opacity: var(--practice-lyric-comparison-opacity, .72);
  --practice-lyric-primary-slot-weight: 800;
  --practice-lyric-comparison-slot-weight: 620;
  --practice-lyric-primary-slot-glow: var(--practice-lyric-active-glow);
  --practice-lyric-comparison-slot-glow: none;
  --practice-lyric-primary-slot-lift: -1px;
  --practice-lyric-comparison-slot-lift: 0px;
}
.practice-lyrics[data-display-mode="dual"][data-primary-position="bottom"] {
  --practice-lyric-primary-slot-opacity: var(--practice-lyric-comparison-opacity, .72);
  --practice-lyric-comparison-slot-opacity: 1;
  --practice-lyric-primary-slot-weight: 620;
  --practice-lyric-comparison-slot-weight: 800;
  --practice-lyric-primary-slot-glow: none;
  --practice-lyric-comparison-slot-glow: var(--practice-lyric-active-glow);
  --practice-lyric-primary-slot-lift: 0px;
  --practice-lyric-comparison-slot-lift: -1px;
}
.practice-lyrics[data-display-mode="dual"] .practice-lyric-current [data-lyric-current-copy] .practice-lyric-char.singing {
  text-shadow: var(--practice-lyric-primary-slot-glow);
  transform: translateY(var(--practice-lyric-primary-slot-lift));
}
.practice-lyrics[data-display-mode="dual"] .practice-lyric-comparison-char.singing {
  text-shadow: var(--practice-lyric-comparison-slot-glow);
  transform: translateY(var(--practice-lyric-comparison-slot-lift));
}
.practice-lyrics[data-display-mode="dual"] :is([data-lyric-current-copy], [data-lyric-next-copy], [data-lyric-previous-copy]) {
  opacity: var(--practice-lyric-primary-slot-opacity);
  font-weight: var(--practice-lyric-primary-slot-weight);
}
.practice-lyrics[data-display-mode="dual"] .practice-lyric-comparison-chars {
  opacity: var(--practice-lyric-comparison-slot-opacity);
  font-weight: var(--practice-lyric-comparison-slot-weight);
}
.practice-entry-cue[data-dual-lyrics="true"] .practice-entry-cue-lyric-fallback[data-primary-position="bottom"] > strong {
  opacity: var(--practice-lyric-comparison-opacity, .72);
  font-weight: 650;
}
.practice-entry-cue[data-dual-lyrics="true"] .practice-entry-cue-lyric-fallback[data-primary-position="bottom"] > small {
  opacity: 1;
  font-weight: 800;
}
#practiceStudio .practice-lyrics[data-display-mode] :is([data-lyric-current-copy], [data-lyric-next-copy], [data-lyric-previous-copy]),
#practiceStudio .practice-entry-cue-lyric-fallback[data-view-mode="characters"] > :is(span, strong) {
  font-size: var(--practice-lyric-fit-primary-size);
}
#practiceStudio .practice-lyrics[data-display-mode="dual"] .practice-lyric-comparison-chars,
#practiceStudio .practice-entry-cue-lyric-fallback[data-view-mode="characters"] > small {
  font-size: var(--practice-lyric-fit-comparison-size);
}
.practice-entry-cue-lyric-fallback [data-beat-lyric-row="previous"] { order: 0; }
.practice-entry-cue-lyric-fallback [data-beat-lyric-row="current"] { order: 1; }
.practice-entry-cue-lyric-fallback [data-beat-lyric-row="comparison"] { order: 2; }
.practice-entry-cue-lyric-fallback [data-beat-lyric-row="next"] { order: 3; }
.practice-entry-cue-lyric-fallback[data-primary-position="bottom"] [data-beat-lyric-row="current"] { order: 2; }
.practice-entry-cue-lyric-fallback[data-primary-position="bottom"] [data-beat-lyric-row="comparison"] { order: 1; }
#practiceStudio .practice-lyrics[data-display-mode="dual"] :is(.practice-lyric-version-label, .practice-lyric-comparison-label) {
  font-size: 12px;
  font-weight: 500;
}
.practice-lyric-char.beat-anchor::after { content: none; }
.practice-entry-cue-lyric-fallback[data-view-mode="characters"] > :is(span, strong, small) { width: max-content; flex: 0 0 auto; }
.practice-entry-cue-lyric-fallback[data-view-mode="characters"] > :empty { display: none; }
.practice-halfbeat-occluder[data-practice-halfbeat-occluder] {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--app-panel);
  pointer-events: none;
  contain: layout style paint;
}
.practice-halfbeat-track[data-practice-halfbeat-track] {
  z-index: 2;
}
.practice-halfbeat-track[data-practice-halfbeat-warmup] {
  z-index: 0;
  opacity: 1;
  pointer-events: none;
  will-change: transform;
  isolation: isolate;
  backface-visibility: hidden;
  transform: translate3d(var(--practice-halfbeat-shift), 0, 0.1px);
}
.practice-halfbeat-track {
  --practice-halfbeat-shift: 0px;
  position: absolute;
  inset: 0 auto 0 var(--practice-beat-playhead-anchor, 34%);
  width: 100%;
  background: repeating-linear-gradient(90deg, transparent 0 81px, color-mix(in srgb, var(--app-line) 20%, transparent) 81px 82px);
  transform: translate3d(var(--practice-halfbeat-shift), 0, 0);
  /* Time is already sampled on requestAnimationFrame. A CSS transition here
     retargeted on every frame and visibly jumped right when the virtual window
     advanced to the next half-beat. */
  transition: none;
  will-change: transform;
  backface-visibility: hidden;
  contain: layout style;
  transform-style: preserve-3d;
}
.practice-halfbeat-track[data-bounded-strip="true"] {
  /* The explicit finite surface keeps overflow descendants in one stable
     compositor layer. Paint containment is safe because ordinary playback
     swaps strips while a generous off-screen buffer still remains. */
  contain: layout style paint;
}
.practice-halfbeat-track.is-independent-beat-chunks {
  width: 1px;
  transform: none;
  will-change: auto;
  contain: layout style;
  background: none;
}
.practice-halfbeat-track.practice-halfbeat-chunk {
  inset: 0 auto 0 0;
  height: 100%;
  contain: layout style;
  background: none;
}
.practice-entry-cue:is([data-playback-state="playing"], .is-transport-visual-paused):not(.is-beat-lyric-editing) .practice-halfbeat-track[data-bounded-strip="true"] {
  /* Paint containment on the 2700px track makes every column relevant to the
     skip container, so content-visibility:auto never skips. Drop paint contain
     while playing so off-viewport columns can skip first layout/paint; the
     overflow-hidden viewport still clips, and WAAPI still drives one transform. */
  contain: layout style;
}
.practice-coach-lyric-foreground .practice-halfbeat-track[data-bounded-strip="true"] {
  /* Overlay clones leave the source cue, so the playing-state rule above does
     not apply. Keep paint contain off the 2700px copy; the overlay viewport
     clip is the skip container for content-visibility. */
  contain: layout style;
}
.practice-halfbeat-track[data-bounded-strip="true"][data-leading-overflow="true"] {
  /* The first reliable beat may begin after media time zero. Let its one quiet
     dashed pre-roll guide paint into the negative-time side of the viewport;
     the viewport still clips the layer, while every later strip keeps paint
     containment for steady compositor playback. */
  contain: layout style;
}
.practice-entry-cue:is([data-playback-state="playing"], .is-transport-visual-paused) .practice-halfbeat-track,
.practice-entry-cue:is([data-playback-state="playing"], .is-transport-visual-paused) .practice-halfbeat-viewport {
  /* Keep the beat ribbon on the compositor while transport is live. */
  will-change: transform;
}
.practice-entry-cue:is([data-playback-state="playing"], .is-transport-visual-paused):not(.is-beat-lyric-editing) .practice-halfbeat-viewport .practice-halfbeat-node {
  /* Prefetched strips still pay ~32ms style + ~46ms paint on first insert of
     ~270 nodes. Skipping off-viewport columns keeps the compositor presenting
     the live window; OBS 60fps otherwise records that first-paint as a freeze
     even when the high-refresh panel still shows the previous compositor frame.
     Requires the playing track to drop paint containment so the overflow clip,
     not the full strip texture, is the skip container. */
  content-visibility: auto;
  contain-intrinsic-size: auto 66px auto 240px;
}
.practice-entry-cue:is([data-playback-state="playing"], .is-transport-visual-paused):not(.is-beat-lyric-editing) .practice-halfbeat-track[data-practice-halfbeat-warmup] .practice-halfbeat-node {
  /* Opacity 0 skipped raster, so promote still paid 60–116ms style on the
     captured frame. Hide with an opaque occluder instead, and reveal nodes in
     idle chunks so WGC never sees a 270-node first paint. */
  content-visibility: hidden;
  contain-intrinsic-size: auto 66px auto 240px;
}
.practice-entry-cue:is([data-playback-state="playing"], .is-transport-visual-paused):not(.is-beat-lyric-editing) .practice-halfbeat-track[data-practice-halfbeat-warmup] .practice-halfbeat-node.is-warmup-ready {
  content-visibility: visible;
}
.practice-entry-cue:is([data-playback-state="playing"], .is-transport-visual-paused):not(.is-beat-lyric-editing) .practice-halfbeat-track[data-practice-halfbeat-track] .practice-halfbeat-node.is-warmup-ready {
  /* Keep idle-rasterized columns; content-visibility:auto would drop them and
     first-paint again as they enter the captured window. */
  content-visibility: visible;
}
.practice-coach-lyric-foreground .practice-halfbeat-viewport .practice-halfbeat-node {
  /* Same skip as the source viewport. Do not target overlay nodes outside a
     viewport: layout-space content-visibility would skip the transformed window. */
  content-visibility: auto;
  contain-intrinsic-size: auto 66px auto 240px;
}
.practice-entry-cue:is([data-playback-state="playing"], .is-transport-visual-paused) :is(.practice-halfbeat-dot, .practice-entry-exact-marker, .practice-character-onset-marker) {
  /* State flips every half-beat; CSS color transitions lag behind the WAAPI scroll. */
  transition: none;
}
.practice-halfbeat-track::before {
  /* Legacy drop-preview ring kept inert; actual lyric items follow the pointer. */
  content: none;
}
.practice-beat-measure,
.practice-halfbeat-node,
.practice-halfbeat-segment,
.practice-beat-subdivision-point { --measure-color: var(--app-muted); }
.practice-beat-measure.is-measure-a,
.practice-halfbeat-node.is-measure-a,
.practice-halfbeat-segment.is-measure-a,
.practice-beat-subdivision-point.is-measure-a { --measure-color: var(--practice-measure-a); }
.practice-beat-measure.is-measure-b,
.practice-halfbeat-node.is-measure-b,
.practice-halfbeat-segment.is-measure-b,
.practice-beat-subdivision-point.is-measure-b { --measure-color: var(--practice-measure-b); }
.practice-beat-measure {
  position: absolute;
  z-index: 0;
  top: 0;
  left: var(--measure-x);
  width: var(--measure-width);
  height: 100%;
  box-sizing: border-box;
  background: linear-gradient(90deg, color-mix(in srgb, var(--measure-color) 6%, transparent), transparent 72%);
  color: var(--measure-color);
  pointer-events: none;
}
.practice-beat-measure.has-boundary::before {
  position: absolute;
  top: calc(var(--measure-boundary-y, 39px) - 24px);
  left: var(--measure-boundary-x, 0px);
  width: 1px;
  height: 48px;
  background: color-mix(in srgb, var(--measure-color) 72%, var(--practice-measure-line));
  content: '';
}
.practice-beat-measure.is-current-measure {
  background: linear-gradient(90deg, color-mix(in srgb, var(--measure-color) 11%, transparent), transparent 82%);
}
.practice-beat-measure,
.practice-beat-measure.is-current-measure {
  background-size: var(--measure-background-width, 100%) 100%;
  background-position-x: var(--measure-background-offset, 0px);
  background-repeat: no-repeat;
}
.practice-beat-measure.is-current-measure.has-boundary::before {
  width: 2px;
  box-shadow: 0 0 12px color-mix(in srgb, var(--measure-color) 28%, transparent);
}
.practice-pitch-display-bounds {
  position: absolute;
  z-index: 9;
  width: 40px;
  pointer-events: none;
}
.practice-pitch-display-bounds > button {
  position: absolute;
  left: 3px;
  width: 30px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  transform: translateY(-50%);
  border: 1px solid var(--app-line);
  border-radius: 5px;
  background: var(--app-panel);
  color: var(--app-accent);
  font-size: 14px;
  cursor: ns-resize;
  touch-action: none;
  pointer-events: auto;
}
.practice-pitch-display-bounds > button:is(:hover, :focus-visible) {
  border-color: var(--app-accent);
  outline: 2px solid var(--app-accent-soft);
}
.practice-studio[data-pitch-runway-enabled="false"] .practice-pitch-display-bounds,
.practice-studio.pitch-editor-open .practice-pitch-display-bounds { display: none; }
.practice-beat-measure > b {
  position: absolute;
  top: 45px;
  left: var(--measure-boundary-x, 0px);
  min-width: 22px;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 2px 5px;
  border: 1px solid color-mix(in srgb, var(--measure-color) 42%, var(--app-line));
  border-radius: 4px;
  background: color-mix(in srgb, var(--measure-color) 10%, var(--app-panel));
  color: color-mix(in srgb, var(--measure-color) 84%, var(--app-text));
  font: 800 12px/1.15 var(--font-family-mono);
  cursor: help;
  pointer-events: auto;
  white-space: nowrap;
  transform: translateX(-50%);
}
.practice-halfbeat-node {
  --halfbeat-color: color-mix(in srgb, var(--measure-color) 70%, var(--app-line));
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  left: var(--halfbeat-x);
  width: 66px;
  height: auto;
  color: var(--halfbeat-color);
  pointer-events: none;
  backface-visibility: hidden;
  transform: translate3d(-50%, 0, 0);
}
.practice-halfbeat-node .practice-halfbeat-dot,
.practice-halfbeat-node .practice-entry-exact-marker,
.practice-halfbeat-node .practice-halfbeat-lyric-char,
.practice-halfbeat-node .practice-halfbeat-lyric-copy,
.practice-halfbeat-node .practice-halfbeat-original-char { pointer-events: auto; }
.practice-halfbeat-node.is-past { --halfbeat-color: color-mix(in srgb, var(--measure-color) 34%, var(--app-muted)); }
.practice-halfbeat-node.is-preview { --halfbeat-color: color-mix(in srgb, var(--measure-color) 88%, var(--app-text)); }
.practice-halfbeat-node.is-current { --halfbeat-color: color-mix(in srgb, var(--app-accent) 90%, var(--app-text)); }
.practice-halfbeat-node.is-future { --halfbeat-color: color-mix(in srgb, var(--measure-color) 68%, var(--app-line)); }
.practice-halfbeat-meta {
  position: absolute;
  top: 3px;
  left: 50%;
  min-width: 16px;
  display: grid;
  place-items: center;
  color: currentColor;
  font: 800 12px/1.2 var(--font-family-mono);
  cursor: help;
  pointer-events: auto;
  white-space: nowrap;
  transform: translateX(-50%);
}
.practice-beat-grid-origin {
  min-width: 38px;
  min-height: 24px;
  grid-auto-flow: column;
  gap: 3px;
  box-sizing: border-box;
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, currentColor 62%, var(--app-line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--measure-color) 14%, var(--app-panel));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--measure-color) 8%, transparent);
  cursor: ew-resize;
  touch-action: none;
}
.practice-beat-grid-origin small {
  color: color-mix(in srgb, currentColor 78%, var(--app-text));
  font: 700 12px/1 var(--font-family-mono);
}
.practice-beat-grid-origin:hover,
.practice-beat-grid-origin[aria-grabbed="true"] {
  background: color-mix(in srgb, var(--measure-color) 24%, var(--app-panel));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--measure-color) 13%, transparent);
}
.practice-halfbeat-track.is-beat-grid-shifting { cursor: ew-resize; }
.practice-halfbeat-dot {
  position: absolute;
  left: 50%;
  width: 13px;
  height: 13px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: var(--app-panel);
  box-shadow: 0 0 10px color-mix(in srgb, currentColor 52%, transparent);
  transform: translate(-50%, -50%);
  transition: transform 90ms linear, border-color 90ms linear, background-color 90ms linear, box-shadow 110ms ease-out;
}
.practice-halfbeat-node.is-upper .practice-halfbeat-dot { top: var(--practice-beat-path-upper, 39px); }
.practice-halfbeat-node.is-lower .practice-halfbeat-dot { top: var(--practice-beat-path-lower, 76px); }
.practice-halfbeat-node.is-current .practice-halfbeat-dot { background: currentColor; }
/* Material styles reshape the outer node so the track matches the picker preview. */
.practice-entry-cue[data-beat-node-style="crystal"] .practice-halfbeat-dot {
  border-radius: 3px;
  transform: translate(-50%, -50%) rotate(45deg) scale(.86);
  background: linear-gradient(135deg,
    color-mix(in srgb, currentColor 78%, var(--app-panel)),
    color-mix(in srgb, currentColor 28%, var(--app-panel)));
  box-shadow:
    inset 1px 1px 0 color-mix(in srgb, var(--app-text) 58%, transparent),
    0 0 10px color-mix(in srgb, currentColor 52%, transparent);
}
.practice-entry-cue[data-beat-node-style="crystal"] .practice-halfbeat-dot::before { content: none; }
.practice-entry-cue[data-beat-node-style="orb"] .practice-halfbeat-dot {
  border-width: 0;
  background: radial-gradient(circle at 32% 28%,
    color-mix(in srgb, var(--app-text) 82%, currentColor) 0 14%,
    currentColor 40%,
    color-mix(in srgb, currentColor 42%, var(--app-panel)) 100%);
  box-shadow: 0 0 12px color-mix(in srgb, currentColor 58%, transparent);
}
.practice-entry-cue[data-beat-node-style="orb"] .practice-halfbeat-dot::before { content: none; }
.practice-entry-cue[data-beat-node-style="prism"] .practice-halfbeat-dot {
  border-width: 0;
  border-radius: 0;
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
  background: linear-gradient(115deg,
    color-mix(in srgb, currentColor 82%, var(--app-text)) 0 28%,
    color-mix(in srgb, currentColor 28%, var(--app-panel)) 29% 57%,
    currentColor 58% 100%);
  box-shadow: 0 0 10px color-mix(in srgb, currentColor 48%, transparent);
}
.practice-entry-cue[data-beat-node-style="prism"] .practice-halfbeat-dot::before { content: none; }
.practice-halfbeat-node.is-accent-strong .practice-halfbeat-dot { width: 17px; height: 17px; border-width: 3px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--app-warm) 10%, transparent), 0 0 14px color-mix(in srgb, currentColor 58%, transparent); }
.practice-halfbeat-node.is-accent-secondary .practice-halfbeat-dot { width: 15px; height: 15px; border-width: 2px; }
.practice-halfbeat-node.is-accent-weak .practice-halfbeat-dot { opacity: .82; }
.practice-entry-exact-marker {
  position: absolute;
  z-index: 4;
  top: var(--entry-y);
  left: calc(50% + var(--entry-offset-x, 0px));
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 2px solid currentColor;
  border-radius: 50%;
  color: currentColor;
  background: color-mix(in srgb, var(--app-panel) 92%, transparent);
  box-shadow: 0 0 13px color-mix(in srgb, currentColor 52%, transparent);
  transform: translate(-50%, -50%);
  transition: transform 90ms linear, border-color 90ms linear, background-color 90ms linear, box-shadow 110ms ease-out;
}
.practice-entry-exact-marker em {
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
}
.practice-entry-exact-marker.is-editable {
  padding: 0;
  font: inherit;
  cursor: grab;
  touch-action: none;
}
.practice-entry-exact-marker.is-editable:hover,
.practice-entry-exact-marker.is-editable:focus-visible {
  color: var(--app-warm);
  outline: 2px solid color-mix(in srgb, var(--app-warm) 76%, var(--app-line));
  outline-offset: 3px;
}
.practice-entry-exact-marker.is-editable.is-dragging { cursor: grabbing; }
.practice-entry-exact-marker.is-character-onset {
  width: 19px;
  height: 19px;
  border-width: 1px;
}
.practice-entry-exact-marker.is-character-onset em { font-size: 7px; }
.practice-entry-exact-marker.is-character-onset.is-selected {
  color: var(--app-warm);
  background: color-mix(in srgb, var(--app-warm) 18%, var(--app-panel));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--app-warm) 14%, transparent), 0 0 17px color-mix(in srgb, var(--app-warm) 68%, transparent);
}
.practice-character-onset-marker {
  position: absolute;
  z-index: 3;
  top: var(--entry-y);
  left: calc(50% + var(--entry-offset-x, 0px));
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  border: 1px solid currentColor;
  border-radius: 50%;
  /* Filled path pins: singers must see where each lyric sits on the fold,
     not only the large beat dots at peaks/valleys. */
  color: color-mix(in srgb, var(--measure-color, var(--app-accent)) 72%, var(--app-text));
  background: color-mix(in srgb, currentColor 82%, var(--app-panel));
  box-shadow: 0 0 6px color-mix(in srgb, currentColor 42%, transparent);
  pointer-events: none;
  transform: translate(-50%, -50%);
}
/* Nested under the lyric glyph: share the character X, lift onto the beat path. */
.practice-halfbeat-lyric-item > :is(.practice-entry-exact-marker, .practice-character-onset-marker) {
  left: 50%;
  top: calc(var(--entry-y) - var(--practice-beat-lyric-top, 111px) - var(--lyric-lane-y, 0px));
}
.practice-beat-subdivision-point {
  --halfbeat-color: color-mix(in srgb, var(--measure-color) 78%, var(--app-text));
  position: absolute;
  z-index: 2;
  top: var(--beat-target-y, 52px);
  left: var(--halfbeat-x);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  color: var(--halfbeat-color);
  background: currentColor;
  box-shadow: 0 0 5px color-mix(in srgb, currentColor 52%, transparent);
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.practice-beat-subdivision-point.is-midpoint {
  width: 6px;
  height: 6px;
}
.practice-beat-subdivision-point.is-past { --halfbeat-color: color-mix(in srgb, var(--measure-color) 34%, var(--app-muted)); }
.practice-beat-subdivision-point.is-current { --halfbeat-color: color-mix(in srgb, var(--app-accent) 90%, var(--app-text)); }
.practice-beat-subdivision-point.is-future { opacity: .86; }
.practice-beat-subdivision-target {
  position: absolute;
  z-index: 3;
  top: var(--beat-target-y, 52px);
  left: var(--halfbeat-x);
  width: calc(6px * var(--practice-cue-inverse-scale, 1));
  min-width: 0;
  height: calc(6px * var(--practice-cue-inverse-scale, 1));
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: color-mix(in srgb, var(--app-accent) 62%, var(--app-muted));
  background: currentColor;
  opacity: .52;
  cursor: crosshair;
  transform: translate(-50%, -50%);
  transition: opacity 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.practice-beat-subdivision-target.is-midpoint {
  z-index: 4;
  width: calc(6px * var(--practice-cue-inverse-scale, 1));
  height: calc(6px * var(--practice-cue-inverse-scale, 1));
}
.practice-beat-subdivision-target > span {
  display: none;
  pointer-events: none;
}
.practice-beat-subdivision-target.is-beat-drop-target {
  color: var(--app-warm);
  background: currentColor;
  opacity: 1;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--app-warm) 20%, transparent), 0 0 14px color-mix(in srgb, var(--app-warm) 62%, transparent);
  transform: translate(-50%, -50%) scale(1.7);
}
.practice-halfbeat-node.is-entry .practice-entry-exact-marker {
  color: var(--practice-beat-entry-cue-user, var(--practice-lyric-current-user, var(--app-warm)));
}
.practice-halfbeat-node.is-entry-active .practice-entry-exact-marker {
  color: var(--practice-beat-entry-cue-user, var(--practice-lyric-current-user, var(--app-warm)));
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 16%, var(--app-panel));
  box-shadow: 0 0 0 8px color-mix(in srgb, currentColor 18%, transparent), 0 0 26px color-mix(in srgb, currentColor 78%, transparent);
  transform: translate(-50%, -50%) scale(1.08);
}
.practice-halfbeat-lyric {
  position: absolute;
  top: var(--practice-beat-lyric-top, 111px);
  left: 50%;
  width: 0;
  min-width: 0;
  /* Absolute items do not stretch this box; min-height tracks glyph + annotation stack. */
  height: auto;
  overflow: visible;
  padding-bottom: 8px;
  min-height: calc(
    var(--practice-beat-lyric-font-size, 26px) * 1.2
    + var(--practice-beat-lyric-lane-step, 28px)
  );
  color: var(--practice-lyric-primary-upcoming-user, var(--app-text));
  font-size: var(--practice-beat-lyric-font-size, 26px);
  line-height: 1;
  text-align: center;
  text-shadow: none;
  white-space: nowrap;
}
.practice-entry-cue.is-beat-lyric-editing .practice-halfbeat-lyric { top: var(--practice-beat-lyric-top, 111px); }
.practice-halfbeat-node.is-entry .practice-halfbeat-lyric { font-size: var(--practice-beat-entry-lyric-font-size, 32px); }
.practice-halfbeat-lyric-item {
  position: absolute;
  top: var(--lyric-lane-y, 0px);
  left: var(--lyric-offset-x);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transform: translateX(-50%);
}
.practice-halfbeat-lyric-item[data-lyric-row="upper"] { font-size: 1em; }
.practice-halfbeat-lyric-item[data-lyric-row="upper"] :is(.practice-halfbeat-lyric-copy, .practice-halfbeat-original-char) { font-weight: 800; }
.practice-halfbeat-lyric-item[data-lyric-row="lower"] :is(.practice-halfbeat-lyric-copy, .practice-halfbeat-original-char) { font-weight: 620; }
.practice-halfbeat-lyric-item[data-lyric-row="lower"] {
  font-size: max(12px, .62em);
  opacity: var(--practice-lyric-comparison-opacity, .72);
}
.practice-halfbeat-lyric-item.is-drag-preview {
  z-index: 8;
  pointer-events: none;
  transform: translateX(-50%) translate3d(var(--practice-beat-lyric-drag-x, 0px), 0, 0);
  transition: none;
  will-change: transform;
}
.practice-halfbeat-lyric-item.is-selected { z-index: 3; }
.practice-halfbeat-lyric-item.is-placeholder { color: var(--app-muted); }
/* Beat ribbon lyrics reuse the same lyric color presets as the main stage. */
.practice-halfbeat-lyric-item:not(.is-comparison)[data-lyric-state="past"] {
  color: var(--practice-lyric-primary-played-user, var(--app-muted));
  opacity: .82;
}
.practice-halfbeat-lyric-item:not(.is-comparison)[data-lyric-state="current"] {
  color: var(--practice-lyric-primary-current-user, var(--practice-lyric-current-user, var(--app-warm)));
  opacity: 1;
  text-shadow: var(--practice-lyric-active-glow);
  z-index: 2;
}
.practice-halfbeat-lyric-item:not(.is-comparison)[data-lyric-state="future"] {
  color: var(--practice-lyric-primary-upcoming-user, var(--practice-lyric-upcoming-user, var(--app-muted)));
  opacity: .88;
}
.practice-entry-cue.is-beat-lyric-editing .practice-halfbeat-lyric-item[data-lyric-state] {
  opacity: 1;
}
.practice-halfbeat-lyric-copy { display: inline-block; }
.practice-beat-onset-lock-toggle [data-onset-lock-icon] { display: none; }
.practice-beat-onset-lock-toggle[aria-checked="true"]:not(.is-editing-unlocked) [data-onset-lock-icon="closed"],
.practice-beat-onset-lock-toggle[aria-checked="false"]:not(.is-editing-unlocked) [data-onset-lock-icon="open"],
.practice-beat-onset-lock-toggle.is-editing-unlocked [data-onset-lock-icon="editing"] { display: inline; }
.practice-beat-onset-lock-toggle [data-onset-lock-icon="open"] path {
  stroke-width: 2;
}
.practice-beat-onset-lock-toggle [data-onset-lock-icon="closed"] path {
  stroke-width: 1.9;
}
.practice-beat-onset-lock-toggle [data-onset-lock-icon] rect {
  stroke-width: 1.8;
}
.practice-beat-onset-lock-toggle .practice-beat-onset-lock-icon {
  overflow: visible;
  transform: scale(0.96);
  transform-origin: center;
}
.practice-beat-onset-lock-toggle [data-onset-lock-icon="open"] path:nth-of-type(2) {
  stroke-width: 2.05;
}
.practice-beat-onset-lock-toggle[aria-checked="true"]:not(.is-editing-unlocked) {
  border-color: var(--button-accent-border);
  color: var(--button-accent-text);
  background: var(--button-accent-bg);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--app-panel) 28%, transparent);
}
.practice-beat-onset-lock-toggle[aria-checked="false"]:not(.is-editing-unlocked) {
  border-color: var(--app-line);
  color: var(--app-muted);
  background: var(--button-secondary-bg);
  box-shadow: none;
}
.practice-beat-onset-lock-toggle.is-editing-unlocked {
  border-color: color-mix(in srgb, var(--status-success) 42%, var(--app-line));
  color: var(--app-text);
  background: var(--button-secondary-bg);
  box-shadow: none;
}
.practice-beat-onset-lock-toggle.is-pending {
  opacity: .88;
}
.practice-beat-onset-lock-toggle.is-pending .practice-toolbar-label::after {
  content: '…';
}
.practice-halfbeat-original-char { cursor: default; }
.practice-entry-cue.is-beat-lyric-editing .practice-halfbeat-lyric-copy,
.practice-entry-cue.is-beat-lyric-editing .practice-halfbeat-original-char { cursor: default; }
.practice-halfbeat-original-char { display: block; margin-top: 3px; color: var(--practice-lyric-comparison-upcoming-user, var(--app-muted)); font-size: inherit; font-weight: 650; line-height: 1; text-shadow: none; }
.practice-halfbeat-lyric-item.is-comparison .practice-halfbeat-original-char {
  margin-top: 0;
  font-size: inherit;
}
.practice-halfbeat-lyric-item.is-comparison {
  color: var(--practice-lyric-comparison-upcoming-user, var(--app-muted));
}
.practice-halfbeat-lyric-item.is-comparison[data-lyric-state="past"] {
  color: var(--practice-lyric-comparison-played-user, var(--app-muted));
}
.practice-halfbeat-lyric-item.is-comparison[data-lyric-state="current"] {
  color: var(--practice-lyric-comparison-current-user, var(--app-warm));
  opacity: 1;
  text-shadow: var(--practice-lyric-active-glow);
}
.practice-halfbeat-lyric-item.is-comparison[data-lyric-state="future"] {
  color: var(--practice-lyric-comparison-upcoming-user, var(--app-muted));
}
.practice-halfbeat-lyric-item.is-comparison[data-lyric-state="past"] .practice-halfbeat-original-char {
  color: var(--practice-lyric-comparison-played-user, var(--app-muted));
}
.practice-halfbeat-lyric-item.is-comparison[data-lyric-state="current"] .practice-halfbeat-original-char {
  color: inherit;
  text-shadow: inherit;
}
.practice-entry-cue[data-upcoming-emphasis="1"] .practice-halfbeat-node.is-preview .practice-halfbeat-lyric-item[data-lyric-state="future"] {
  opacity: 1;
}
.practice-halfbeat-jyutping {
  display: block;
  margin-top: 0;
  color: var(--app-muted);
  font-size: max(11px, calc(var(--practice-beat-lyric-font-size, 26px) * 0.42));
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: 0;
  text-shadow: none;
  white-space: nowrap;
}
.practice-entry-cue[data-jyutping="true"] .practice-halfbeat-lyric {
  min-height: calc(
    var(--practice-beat-lyric-font-size, 26px) * 1.2
    + max(11px, calc(var(--practice-beat-lyric-font-size, 26px) * 0.42))
    + 12px
    + var(--practice-beat-lyric-lane-step, 28px)
  );
}
.practice-entry-cue[data-dual-lyrics="true"] .practice-halfbeat-lyric {
  min-height: calc(
    var(--practice-beat-lyric-font-size, 26px) * 1.2
    + max(12px, calc(var(--practice-beat-lyric-font-size, 26px) * 0.62))
    + 14px
    + var(--practice-beat-lyric-lane-step, 28px)
  );
}
.practice-entry-cue[data-dual-lyrics="true"][data-jyutping="true"] .practice-halfbeat-lyric {
  min-height: calc(
    var(--practice-beat-lyric-font-size, 26px) * 1.2
    + max(11px, calc(var(--practice-beat-lyric-font-size, 26px) * 0.42))
    + max(12px, calc(var(--practice-beat-lyric-font-size, 26px) * 0.62))
    + 24px
    + var(--practice-beat-lyric-lane-step, 28px)
  );
}
.practice-halfbeat-lyric-char {
  min-width: calc(24px * var(--practice-beat-lyric-scale, 1));
  min-height: calc(26px * var(--practice-beat-lyric-scale, 1));
  padding: 2px 4px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: currentColor;
  background: transparent;
  font: inherit;
  line-height: 1;
  cursor: grab;
  touch-action: none;
}
.practice-halfbeat-lyric-char:hover,
.practice-halfbeat-lyric-char:focus-visible,
.practice-halfbeat-lyric-char.is-selected {
  border-color: color-mix(in srgb, var(--app-accent) 72%, var(--app-line));
  color: color-mix(in srgb, var(--app-accent) 82%, var(--app-text));
  background: color-mix(in srgb, var(--app-accent) 16%, var(--app-panel));
  outline: none;
}
.practice-halfbeat-lyric-char.is-dragging {
  cursor: grabbing;
  opacity: 1;
  transform: scale(1.12);
}
.practice-halfbeat-lyric-char.is-auto-review {
  border-color: var(--status-warning-border);
  color: var(--status-warning-text);
  background: var(--status-warning-bg);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 4px;
}
.practice-entry-exact-marker.is-auto-review {
  border-color: var(--status-warning-border);
  color: var(--status-warning-text);
  background: var(--status-warning-bg);
}
.practice-halfbeat-node.is-beat-drop-target .practice-halfbeat-dot {
  color: var(--app-warm);
  background: color-mix(in srgb, var(--app-warm) 22%, var(--app-panel));
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--app-warm) 15%, transparent), 0 0 20px color-mix(in srgb, var(--app-warm) 70%, transparent);
  transform: translate(-50%, -50%) scale(1.32);
}
.practice-halfbeat-segment {
  --halfbeat-color: color-mix(in srgb, var(--measure-color) 72%, var(--app-line));
  position: absolute;
  z-index: 1;
  top: var(--halfbeat-y);
  left: var(--halfbeat-x);
  color: var(--halfbeat-color);
  opacity: .82;
}
svg.practice-halfbeat-segment {
  width: var(--halfbeat-width);
  height: var(--halfbeat-height);
  overflow: visible;
}
svg.practice-halfbeat-segment path {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* Segments now render only the active path; keep every style visible. */
i.practice-halfbeat-segment {
  width: var(--halfbeat-length);
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: rotate(var(--halfbeat-angle));
  transform-origin: left center;
}
i.practice-halfbeat-segment::after {
  position: absolute;
  top: 50%;
  right: -1px;
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  content: '';
  transform: translateY(-50%) rotate(45deg);
}
.practice-halfbeat-segment.is-past { --halfbeat-color: color-mix(in srgb, var(--measure-color) 30%, var(--app-muted)); }
.practice-halfbeat-segment.is-current { --halfbeat-color: color-mix(in srgb, var(--app-accent) 90%, var(--app-text)); opacity: 1; }
.practice-halfbeat-segment.is-preview { --halfbeat-color: color-mix(in srgb, var(--measure-color) 82%, var(--app-text)); }
.practice-halfbeat-segment.is-missing {
  --halfbeat-color: color-mix(in srgb, var(--app-muted) 62%, transparent);
  background: repeating-linear-gradient(90deg, currentColor 0 7px, transparent 7px 12px);
  opacity: .68;
}
.practice-halfbeat-segment.is-missing::after { display: none; }
svg.practice-halfbeat-segment.practice-beat-missing-lead {
  background: none;
  opacity: .46;
  pointer-events: none;
}
svg.practice-halfbeat-segment.practice-beat-missing-lead path {
  stroke-width: 1.5;
  stroke-dasharray: 7 7;
}
.practice-halfbeat-playhead {
  position: absolute;
  z-index: 5;
  top: var(--practice-beat-playhead-start-px, var(--practice-beat-playhead-start, 0%));
  bottom: var(--practice-beat-playhead-end-px, var(--practice-beat-playhead-end, 0%));
  left: var(--practice-beat-playhead-anchor, 34%);
  width: 1px;
  min-width: 1px;
  max-width: 1px;
  color: var(--practice-beat-playhead-tone);
  background: color-mix(in srgb, var(--practice-beat-playhead-tone) 78%, var(--app-line));
  box-shadow: 0 0 4px color-mix(in srgb, var(--practice-beat-playhead-tone) 28%, transparent);
  cursor: ew-resize;
  pointer-events: auto;
  touch-action: none;
}
.practice-halfbeat-playhead::after {
  position: absolute;
  inset: 0 -8px;
  content: '';
}
.practice-halfbeat-playhead-handle {
  position: absolute;
  z-index: 4;
  left: 50%;
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  min-height: 10px !important;
  max-width: 10px;
  max-height: 10px;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid color-mix(in srgb, currentColor 78%, var(--app-line)) !important;
  border-radius: 50%;
  background: color-mix(in srgb, var(--app-panel) 88%, currentColor) !important;
  box-shadow: 0 0 4px color-mix(in srgb, currentColor 26%, transparent);
  cursor: ns-resize;
  opacity: .48;
  transform: translate(-50%, -50%);
  transition: opacity 100ms linear, box-shadow 100ms linear;
}
.practice-halfbeat-playhead-handle::after {
  position: absolute;
  inset: 2px;
  border: 1px solid currentColor;
  border-radius: 50%;
  content: '';
  opacity: .8;
}
.practice-halfbeat-playhead-handle.is-locked {
  cursor: pointer;
  opacity: .92;
}
.practice-halfbeat-playhead-handle.is-locked::after {
  inset: 2px;
  border-radius: 2px;
  border-width: 0 1px 1px;
  transform: translateY(1px);
}
.practice-halfbeat-playhead-handle.is-start { top: 0; }
.practice-halfbeat-playhead-handle.is-end { top: auto; bottom: 0; transform: translate(-50%, 50%); }
.practice-halfbeat-playhead:hover .practice-halfbeat-playhead-handle,
.practice-halfbeat-playhead-handle:hover,
.practice-halfbeat-playhead-handle[aria-grabbed="true"],
.practice-halfbeat-playhead:focus-visible .practice-halfbeat-playhead-handle { opacity: 1; box-shadow: 0 0 12px color-mix(in srgb, currentColor 68%, transparent); }
.practice-halfbeat-playhead[data-mode="arrow"] .practice-halfbeat-playhead-handle,
.practice-halfbeat-playhead[data-mode="tap"] .practice-halfbeat-playhead-handle,
.practice-halfbeat-playhead[hidden] .practice-halfbeat-playhead-handle { display: none; }
.practice-halfbeat-viewport.is-playhead-range-resizing { cursor: ns-resize; }
.practice-halfbeat-playhead:hover,
.practice-halfbeat-playhead[aria-grabbed="true"],
.practice-halfbeat-playhead:focus-visible {
  outline: 0;
}
.practice-halfbeat-viewport.is-playhead-anchoring { cursor: ew-resize; }
.practice-halfbeat-viewport.is-playhead-positioning { cursor: move; }
.practice-halfbeat-viewport.is-playhead-positioning[data-playhead-drag-axis="horizontal"] { cursor: ew-resize; }
.practice-halfbeat-viewport.is-playhead-positioning[data-playhead-drag-axis="vertical"] { cursor: ns-resize; }
.practice-halfbeat-viewport.is-playhead-positioning[data-playhead-drag-axis="both"] { cursor: move; }
.practice-halfbeat-playhead[hidden] { display: none; }
.practice-halfbeat-playhead[data-mode="full"] :is(span, b) { display: none; }
.practice-halfbeat-playhead[data-mode="arrow"] {
  top: clamp(0px, var(--practice-beat-playhead-arrow-y, 139px), calc(100% - 21px));
  bottom: auto;
  height: 21px;
  background: transparent;
  box-shadow: none;
  cursor: move;
  will-change: top;
}
.practice-halfbeat-playhead[data-mode="arrow"]::after { inset: -8px -10px; }
.practice-halfbeat-playhead[data-mode="arrow"] span,
.practice-halfbeat-playhead[data-mode="arrow"] b { display: none; }
.practice-halfbeat-playhead[data-mode="arrow"] i {
  top: 7px;
  width: 2px;
  height: 13px;
  border: 0;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 9px color-mix(in srgb, currentColor 54%, transparent);
  transform: translateX(-50%);
}
.practice-halfbeat-playhead[data-mode="arrow"] i::after {
  position: absolute;
  top: -7px;
  left: 50%;
  width: 11px;
  height: 8px;
  background: currentColor;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  content: '';
  transform: translateX(-50%);
}
.practice-lyric-tap-hand,
.practice-lyric-tap-impact { display: none; }
.practice-halfbeat-playhead[data-mode="tap"] {
  top: var(--practice-beat-path-lower, 76px);
  bottom: auto;
  width: 1px;
  height: 42px;
  color: color-mix(in srgb, var(--practice-beat-playhead-tone) 76%, var(--app-text));
  background: transparent;
  box-shadow: none;
  transition: color 90ms linear;
}
.practice-halfbeat-playhead[data-mode="tap"] > :is(span, i, b) { display: none; }
.practice-halfbeat-playhead[data-mode="tap"][data-tap-state="hidden"] :is(.practice-lyric-tap-hand, .practice-lyric-tap-impact) { display: none; }
.practice-halfbeat-playhead[data-mode="tap"] .practice-lyric-tap-hand {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  width: 22px;
  height: 22px;
  display: block;
  overflow: visible;
  fill: color-mix(in srgb, currentColor 15%, var(--app-panel));
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px color-mix(in srgb, currentColor 58%, transparent));
  transform: translate3d(calc(-50% + var(--practice-lyric-tap-x, 0px)), calc(var(--practice-lyric-tap-base-y, 0px) + var(--practice-lyric-tap-y, 0px)), 0) rotate(180deg) scale(var(--practice-lyric-tap-user-scale, .6)) scale(var(--practice-lyric-tap-scale, 1));
  transform-origin: center;
  will-change: transform;
}
.practice-lyric-tap-hand [data-lyric-tap-shape] { display: none; }
.practice-entry-cue[data-beat-tap-shape="tap"] .practice-lyric-tap-hand [data-lyric-tap-shape="tap"],
.practice-entry-cue[data-beat-tap-shape="pointer"] .practice-lyric-tap-hand [data-lyric-tap-shape="pointer"],
.practice-entry-cue[data-beat-tap-shape="fist"] .practice-lyric-tap-hand [data-lyric-tap-shape="fist"],
.practice-entry-cue[data-beat-tap-shape="arrow"] .practice-lyric-tap-hand [data-lyric-tap-shape="arrow"],
.practice-entry-cue[data-beat-tap-shape="butterfly"] .practice-lyric-tap-hand [data-lyric-tap-shape="butterfly"],
.practice-entry-cue[data-beat-tap-shape="feather"] .practice-lyric-tap-hand [data-lyric-tap-shape="feather"],
.practice-entry-cue[data-beat-tap-shape="hammer"] .practice-lyric-tap-hand [data-lyric-tap-shape="hammer"] { display: inline; }
.practice-halfbeat-playhead[data-mode="tap"] .practice-lyric-tap-impact {
  position: absolute;
  top: calc(29px + var(--practice-lyric-tap-base-y, 0px));
  left: 50%;
  width: 22px;
  height: 7px;
  display: block;
  box-sizing: border-box;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 10%, transparent);
  opacity: var(--practice-lyric-tap-impact, 0);
  text-decoration: none;
  transform: translateX(calc(-50% + var(--practice-lyric-tap-x, 0px))) scale(var(--practice-lyric-tap-user-scale, .6)) scale(calc(.68 + var(--practice-lyric-tap-impact, 0) * .42));
  transform-origin: center;
  will-change: opacity, transform;
}
.practice-halfbeat-playhead[data-mode="tap"][data-tap-state="ready"],
.practice-halfbeat-playhead[data-mode="tap"][data-tap-state="hit"] { color: color-mix(in srgb, var(--practice-beat-playhead-tone) 90%, var(--app-text)); }
.practice-halfbeat-playhead span,
.practice-halfbeat-playhead b {
  position: absolute;
  left: 7px;
  width: max-content;
  color: currentColor;
  font: 850 8px/1 var(--font-family-mono);
  letter-spacing: .08em;
}
.practice-halfbeat-playhead span { top: 4px; }
.practice-halfbeat-playhead b { top: 18px; padding: 3px 5px; border-radius: 3px; background: color-mix(in srgb, var(--practice-beat-playhead-tone) 16%, var(--app-panel)); }
.practice-halfbeat-playhead i {
  position: absolute;
  top: var(--practice-beat-playhead-y, 39px);
  left: 50%;
  width: 10px;
  height: 10px;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: color-mix(in srgb, var(--practice-beat-playhead-tone) 42%, var(--app-panel));
  box-shadow: 0 0 6px color-mix(in srgb, var(--practice-beat-playhead-tone) 34%, transparent);
  transform: translate(-50%, -50%);
  will-change: transform;
}
.practice-entry-cue:is([data-playback-state="playing"], .is-transport-visual-paused) .practice-halfbeat-playhead:not([data-mode="tap"]):not([data-mode="arrow"]) {
  background: color-mix(in srgb, var(--practice-beat-playhead-tone) 92%, var(--app-line));
  box-shadow:
    0 0 8px color-mix(in srgb, var(--practice-beat-playhead-tone) 52%, transparent),
    0 0 16px color-mix(in srgb, var(--practice-beat-playhead-tone) 24%, transparent);
}
.practice-entry-cue:is([data-playback-state="playing"], .is-transport-visual-paused) .practice-halfbeat-playhead:not([data-mode="tap"]):not([data-mode="arrow"]) i {
  background: color-mix(in srgb, var(--practice-beat-playhead-tone) 72%, var(--app-panel));
  box-shadow: 0 0 10px color-mix(in srgb, var(--practice-beat-playhead-tone) 58%, transparent);
}
.practice-halfbeat-footer {
  min-width: 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 3px 9px;
}
.practice-halfbeat-footer > strong { overflow: hidden; padding-right: 8px; border-right: 1px solid var(--app-line); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.practice-halfbeat-footer > small { overflow: hidden; color: var(--app-muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.practice-halfbeat-legend { display: flex; align-items: center; gap: 4px; color: var(--app-muted); font-size: 7px; white-space: nowrap; }
.practice-entry-cue.is-maximized[data-pitch-merged="true"] .practice-halfbeat-flow {
  grid-template-rows: minmax(0, 1fr);
  margin-bottom: 8px;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
}
.practice-entry-cue.is-maximized[data-pitch-merged="true"] .practice-halfbeat-viewport {
  border-bottom: 0;
}
.practice-entry-cue.is-maximized[data-pitch-merged="true"] .practice-halfbeat-footer {
  position: absolute;
  z-index: 8;
  grid-row: 1;
  right: auto;
  bottom: calc(8px * var(--practice-cue-inverse-scale, 1));
  left: calc(8px * var(--practice-cue-inverse-scale, 1));
  max-width: min(78%, 420px);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 9px;
  border: 1px solid color-mix(in srgb, var(--app-line) 72%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--app-panel) 86%, transparent);
  pointer-events: none;
  transform: scale(var(--practice-cue-inverse-scale, 1));
  transform-origin: bottom left;
}
.practice-entry-cue.is-maximized[data-pitch-merged="true"] .practice-halfbeat-footer > strong {
  flex: 0 0 auto;
  max-width: 10em;
  padding-right: 7px;
  font-size: 12px;
}
.practice-entry-cue.is-maximized[data-pitch-merged="true"] .practice-halfbeat-footer > small {
  flex: 0 1 auto;
  font-size: 12px;
}
.practice-entry-cue.is-maximized[data-pitch-merged="true"] .practice-halfbeat-legend {
  flex: 0 0 auto;
  margin-left: 2px;
  font-size: 12px;
}
.practice-halfbeat-legend i { width: 7px; height: 7px; margin-left: 4px; border-radius: 50%; background: color-mix(in srgb, var(--app-muted) 68%, var(--app-line)); }
.practice-halfbeat-legend i[data-state="past"] { background: color-mix(in srgb, var(--app-accent) 34%, var(--app-muted)); }
.practice-halfbeat-legend i[data-state="preview"] { background: color-mix(in srgb, var(--app-accent) 88%, var(--app-text)); }
.practice-beat-sr-status {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(100%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}
.practice-entry-cue.is-dragging,
.practice-entry-cue.is-resizing { cursor: grabbing; }
.practice-entry-cue.is-layout-preview {
  outline: 1px dashed color-mix(in srgb, var(--app-accent) 72%, var(--app-line));
  outline-offset: 4px;
}
/* Empty outer gutters are intentional drag affordances. They sit above the
   teaching canvas without stealing pointer events from beat/pitch content. */
.practice-entry-cue-drag-gutter {
  position: absolute;
  z-index: 19;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 0;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
}
.practice-entry-cue-drag-gutter:hover,
.practice-entry-cue-drag-gutter:focus-visible,
.practice-entry-cue.is-dragging .practice-entry-cue-drag-gutter { opacity: 1; }
.practice-entry-cue-drag-gutter-top {
  /* This affordance belongs to the empty outer frame, never the toolbar hit
     plane. Keeping it inside the top-left 58x16 area stole clicks from compact
     controls after merge/edit reflow because the canvas wrapper is a lower
     stacking context. Stretch a thin handle along the exterior top edge. */
  top: -6px;
  right: 58px;
  left: 58px;
  width: auto;
  height: 8px;
}
.practice-entry-cue-drag-gutter-left {
  top: 18px;
  bottom: 40px;
  left: -6px;
  width: 14px;
}
.practice-entry-cue.is-dragging .practice-entry-cue-drag-gutter { cursor: grabbing; }
.practice-entry-cue-drag-gutter:focus-visible { outline: 2px solid var(--practice-cyan); outline-offset: 2px; }
html body.beat-calibration-workspace-open .practice-entry-cue-drag-gutter { display: none !important; pointer-events: none; }
.practice-entry-cue.is-maximized .practice-entry-cue-drag-gutter { display: none; pointer-events: none; }
.practice-entry-cue-resize {
  position: absolute;
  z-index: 20;
  right: -7px;
  bottom: -7px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-right: 3px solid color-mix(in srgb, var(--app-accent) 82%, var(--app-text));
  border-bottom: 3px solid color-mix(in srgb, var(--app-accent) 82%, var(--app-text));
  border-radius: 0 0 5px 0;
  color: var(--app-accent);
  background: transparent;
  cursor: nwse-resize;
  opacity: .76;
  pointer-events: auto;
  touch-action: none;
  transition: opacity .15s ease;
}
.practice-entry-cue-resize span { position: absolute; right: 4px; bottom: 2px; color: currentColor; font-size: 12px; line-height: 1; pointer-events: none; }
.practice-entry-cue:hover .practice-entry-cue-resize,
.practice-entry-cue:focus-within .practice-entry-cue-resize,
.practice-entry-cue.is-layout-preview .practice-entry-cue-resize,
.practice-entry-cue.is-resizing .practice-entry-cue-resize { opacity: 1; }
.practice-entry-cue-resize:focus-visible { outline: 2px solid var(--practice-cyan); outline-offset: 3px; }
.practice-entry-cue::before {
  /* Legacy countdown flash lived at 50% of this window. Isolation + a
     translucent beat canvas let that 1px accent stroke read as a fake
     beat/pitch divider. The drag splitter is the only vertical boundary. */
  content: none;
}
.practice-entry-cue::after {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 210px;
  height: 78px;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--app-accent) 20%, transparent), transparent 70%);
  content: none;
  transform: translate(-50%, -50%);
  animation: none;
}
.practice-entry-cue-beam {
  position: absolute;
  z-index: -1;
  inset: 9px 4%;
  border-top: 1px solid color-mix(in srgb, var(--app-accent) 20%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--app-accent) 20%, transparent);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--app-accent) 6%, transparent) 20% 80%, transparent);
  clip-path: polygon(0 46%, 8% 46%, 11% 0, 89% 0, 92% 46%, 100% 46%, 100% 54%, 92% 54%, 89% 100%, 11% 100%, 8% 54%, 0 54%);
}
.practice-entry-cue-core {
  position: relative;
  z-index: 1;
  grid-column: 2;
  width: 126px;
  height: 90px;
  display: grid;
  grid-template-rows: 19px 54px 17px;
  place-items: center;
}
.practice-entry-cue-core::before,
.practice-entry-cue-core::after {
  position: absolute;
  left: 50%;
  width: 96px;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--app-accent) 42%, var(--app-line)), transparent);
  content: '';
  transform: translateX(-50%);
}
.practice-entry-cue-core::before { top: 16px; }
.practice-entry-cue-core::after { bottom: 16px; }
.practice-entry-cue-kicker {
  align-self: end;
  color: color-mix(in srgb, var(--app-accent) 88%, var(--app-text));
  font: 800 9px/1 var(--font-family-mono);
  letter-spacing: .2em;
  text-indent: .2em;
}
.practice-entry-cue-digit {
  position: relative;
  width: 110px;
  height: 54px;
  display: grid;
  place-items: center;
}
.practice-entry-cue-digit::before,
.practice-entry-cue-digit::after {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 5px;
  border-top: 1px solid color-mix(in srgb, var(--app-accent) 72%, var(--app-line));
  border-bottom: 1px solid color-mix(in srgb, var(--app-accent) 32%, var(--app-line));
  content: '';
  transform: translateY(-50%);
}
.practice-entry-cue-digit::before { left: 1px; }
.practice-entry-cue-digit::after { right: 1px; }
.practice-entry-cue-digit strong {
  color: var(--app-text);
  font: 700 72px/.78 var(--font-family-base);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.08em;
  text-indent: -.08em;
  text-shadow: 0 0 14px color-mix(in srgb, var(--app-accent) 56%, transparent), 0 0 42px color-mix(in srgb, var(--app-accent) 24%, transparent);
}
.practice-entry-cue small {
  align-self: start;
  color: color-mix(in srgb, var(--app-muted) 86%, var(--app-text));
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-indent: .18em;
}
.practice-entry-cue-gate {
  position: relative;
  width: 52px;
  height: 62px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--app-accent) 7%, transparent));
}
.practice-entry-cue-gate::before {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--app-accent);
  box-shadow: 0 0 11px color-mix(in srgb, var(--app-accent) 72%, transparent), 0 0 28px color-mix(in srgb, var(--app-accent) 32%, transparent);
  content: '';
}
.practice-entry-cue-gate::after {
  position: absolute;
  top: 50%;
  width: 32px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--app-accent));
  content: '';
}
.practice-entry-cue-gate i {
  position: absolute;
  top: calc(50% - 4px);
  width: 8px;
  height: 8px;
  border: 1px solid var(--app-accent);
  background: var(--app-bg);
  box-shadow: 0 0 9px color-mix(in srgb, var(--app-accent) 62%, transparent);
  transform: rotate(45deg);
}
.practice-entry-cue-gate.is-left { justify-self: end; }
.practice-entry-cue-gate.is-left::before { right: 0; }
.practice-entry-cue-gate.is-left::after { right: 0; }
.practice-entry-cue-gate.is-left i { right: -3px; }
.practice-entry-cue-gate.is-right { justify-self: start; transform: scaleX(-1); }
.practice-entry-cue-gate.is-right::before { right: 0; }
.practice-entry-cue-gate.is-right::after { right: 0; }
.practice-entry-cue-gate.is-right i { right: -3px; }
.practice-entry-cue-beats {
  position: absolute;
  bottom: 4px;
  left: 50%;
  display: flex;
  gap: 5px;
  transform: translateX(-50%);
}
.practice-entry-cue-beats i {
  width: 18px;
  height: 2px;
  background: var(--app-accent);
  box-shadow: 0 0 7px color-mix(in srgb, var(--app-accent) 54%, transparent);
  transition: opacity .16s ease, transform .16s ease;
}
.practice-entry-cue-beats i.is-off { opacity: .22; transform: scaleX(.66); }
.practice-entry-cue.is-pulsing .practice-entry-cue-core { animation: practice-cue-core-in .38s cubic-bezier(.2, .8, .2, 1); }
.practice-entry-cue.is-pulsing .practice-entry-cue-digit strong { animation: practice-cue-number-in .4s cubic-bezier(.15, .85, .22, 1); }
.practice-entry-cue.is-pulsing .practice-entry-cue-gate.is-left { animation: practice-cue-gate-left .42s cubic-bezier(.2, .8, .2, 1); }
.practice-entry-cue.is-pulsing .practice-entry-cue-gate.is-right { animation: practice-cue-gate-right .42s cubic-bezier(.2, .8, .2, 1); }
.practice-entry-cue.is-anticipate {
  background: var(--app-panel);
  opacity: 1;
}
.practice-entry-cue.is-anticipate::before,
.practice-entry-cue.is-go::before { content: none; }
.practice-entry-cue.is-anticipate .practice-entry-cue-kicker,
.practice-entry-cue.is-anticipate .practice-entry-cue-digit strong { color: color-mix(in srgb, var(--app-warm) 84%, var(--app-text)); }
.practice-entry-cue.is-anticipate .practice-entry-cue-gate::before,
.practice-entry-cue.is-anticipate .practice-entry-cue-gate::after,
.practice-entry-cue.is-anticipate .practice-entry-cue-beats i { background: color-mix(in srgb, var(--app-warm) 82%, var(--app-accent)); }
.practice-entry-cue.is-anticipate small { color: color-mix(in srgb, var(--app-warm) 72%, var(--app-text)); }
.practice-entry-cue.is-go {
  background: var(--app-panel);
  opacity: 1;
}
.practice-entry-cue.is-go::after { background: radial-gradient(ellipse, color-mix(in srgb, var(--app-warm) 32%, transparent), transparent 70%); }
.practice-entry-cue.is-go .practice-entry-cue-beam { border-color: color-mix(in srgb, var(--app-warm) 32%, transparent); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--app-warm) 10%, transparent) 20% 80%, transparent); }
.practice-entry-cue.is-go .practice-entry-cue-kicker,
.practice-entry-cue.is-go .practice-entry-cue-digit strong,
.practice-entry-cue.is-go .practice-entry-cue-gate { color: var(--app-warm); }
.practice-entry-cue.is-go .practice-entry-cue-core::before,
.practice-entry-cue.is-go .practice-entry-cue-core::after,
.practice-entry-cue.is-go .practice-entry-cue-gate::before,
.practice-entry-cue.is-go .practice-entry-cue-gate::after,
.practice-entry-cue.is-go .practice-entry-cue-beats i { background: var(--app-warm); }
.practice-entry-cue.is-go .practice-entry-cue-gate i { border-color: var(--app-warm); box-shadow: 0 0 12px color-mix(in srgb, var(--app-warm) 70%, transparent); }
.practice-entry-cue.is-go .practice-entry-cue-digit strong { font-size: 56px; letter-spacing: 0; text-indent: 0; text-shadow: 0 0 18px color-mix(in srgb, var(--app-warm) 64%, transparent), 0 0 48px color-mix(in srgb, var(--app-warm) 30%, transparent); }
.practice-entry-cue.is-go small { color: color-mix(in srgb, var(--app-warm) 82%, var(--app-text)); }
.practice-beat-toolbar {
  position: relative;
  /* Toolbar controls must win hit testing over the transparent outer drag
     gutter. The gutter remains available only in genuinely empty edge space. */
  z-index: 20;
  grid-column: 1 / -1;
  grid-row: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 76px;
  padding-bottom: 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--app-line) 78%, transparent);
  cursor: grab;
  pointer-events: auto;
  overflow: visible;
  /* The teaching canvas scales with its floating window. Toolbar chrome must
     stay at the same readable size as the application header. */
  width: calc(var(--practice-entry-cue-width, 640px) - 24px);
  box-sizing: border-box;
  transform: scale(var(--practice-cue-inverse-scale, 1));
  transform-origin: top left;
}
.practice-entry-cue:not(.is-maximized) .practice-beat-toolbar {
  /* The canvas is scaled for the floating window while toolbar chrome is
     counter-scaled to stay readable. Its layout width must therefore use the
     outer window width, not the smaller pre-transform containing block. */
  max-width: none;
  box-sizing: border-box;
}
.practice-entry-cue:not(.is-maximized) .practice-beat-toolbar > .practice-entry-cue-drag {
  min-width: 94px;
  max-width: 118px;
  flex: 1 1 118px;
  gap: 4px;
}
.practice-entry-cue:not(.is-maximized) .practice-beat-toolbar {
  gap: 4px;
  padding-right: 52px;
}
.practice-entry-cue:not(.is-maximized)[data-toolbar-mode="icons"] .practice-beat-toolbar > button[data-toolbar-control],
.practice-entry-cue:not(.is-maximized)[data-toolbar-mode="icons"] .practice-beat-zoom > button[data-toolbar-control],
.practice-entry-cue:not(.is-maximized)[data-toolbar-mode="icons"] .practice-pitch-polyline-zoom > button[data-toolbar-control],
.practice-entry-cue:not(.is-maximized)[data-toolbar-mode="icons"] .practice-beat-more-tools > summary,
.practice-entry-cue:not(.is-maximized)[data-toolbar-mode="icons"] .practice-beat-tap-settings > summary,
.practice-entry-cue:not(.is-maximized)[data-toolbar-mode="icons"] .practice-beat-visual-lead-settings > summary,
.practice-entry-cue:not(.is-maximized)[data-toolbar-mode="icons"] .practice-beat-toolbar > details[data-beat-compact-tool] > summary[data-toolbar-control] {
  position: relative;
  width: 29px;
  min-width: 29px;
  padding-inline: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.practice-entry-cue:not(.is-maximized)[data-toolbar-mode="icons"] .practice-beat-toolbar > button[data-toolbar-control] .practice-toolbar-label,
.practice-entry-cue:not(.is-maximized)[data-toolbar-mode="icons"] .practice-beat-zoom > button[data-toolbar-control] .practice-toolbar-label,
.practice-entry-cue:not(.is-maximized)[data-toolbar-mode="icons"] .practice-pitch-polyline-zoom > button[data-toolbar-control] .practice-toolbar-label,
.practice-entry-cue:not(.is-maximized)[data-toolbar-mode="icons"] .practice-beat-more-tools > summary .practice-toolbar-label,
.practice-entry-cue:not(.is-maximized)[data-toolbar-mode="icons"] .practice-beat-visual-lead-settings > summary .practice-toolbar-label,
.practice-entry-cue:not(.is-maximized)[data-toolbar-mode="icons"] .practice-beat-toolbar > details[data-beat-compact-tool] > summary[data-toolbar-control] .practice-toolbar-label {
  display: none !important;
}
.practice-entry-cue:not(.is-maximized)[data-toolbar-mode="icons"] .practice-beat-more-tools > summary::after,
.practice-entry-cue:not(.is-maximized)[data-toolbar-mode="icons"] .practice-beat-tap-settings > summary::after,
.practice-entry-cue:not(.is-maximized)[data-toolbar-mode="icons"] .practice-beat-visual-lead-settings > summary::after,
.practice-entry-cue:not(.is-maximized)[data-toolbar-mode="icons"] .practice-beat-toolbar > details[data-beat-compact-tool] > summary[data-toolbar-control]::after {
  display: none;
}
.practice-entry-cue.is-dragging .practice-beat-toolbar { cursor: grabbing; }
.practice-beat-toolbar > .practice-entry-cue-drag {
  min-width: 118px;
  max-width: 118px;
  flex: 0 0 118px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
  cursor: grab;
  touch-action: none;
}
.practice-beat-toolbar:has(> .practice-beat-normal-tools) > .practice-entry-cue-drag { margin-right: 0; }
.practice-beat-normal-tools {
  min-width: 0;
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  touch-action: pan-y;
}
.practice-beat-normal-tools::-webkit-scrollbar,
.practice-beat-lyric-edit-primary::-webkit-scrollbar { display: none; }
.practice-beat-normal-tools[data-toolbar-scrollable="true"],
.practice-beat-lyric-edit-primary[data-toolbar-scrollable="true"] {
  justify-content: flex-start;
  cursor: grab;
}
:is(.practice-beat-normal-tools, .practice-beat-lyric-edit-primary).is-toolbar-scrolling {
  cursor: grabbing;
  scroll-behavior: auto;
  user-select: none;
}
.practice-beat-normal-tools > * { flex: 0 0 auto; }
.practice-entry-cue[data-toolbar-rows="2"] .practice-beat-toolbar {
  min-height: 58px;
  flex-wrap: wrap;
  align-content: flex-start;
  row-gap: 4px;
}
.practice-entry-cue[data-toolbar-rows="2"] .practice-entry-cue-visual {
  grid-template-rows: calc(64px * var(--practice-cue-inverse-scale, 1)) minmax(0, 1fr) 4px;
}
.practice-entry-cue[data-pitch-merged="true"][data-toolbar-rows="2"] .practice-entry-cue-visual {
  grid-template-rows: calc(64px * var(--practice-cue-inverse-scale, 1)) minmax(0, 1fr);
}
.practice-entry-cue[data-toolbar-rows="2"] :is(.practice-beat-normal-tools, .practice-beat-lyric-edit-primary) {
  order: 3;
  width: 100%;
  flex: 1 0 100%;
  flex-wrap: nowrap;
  justify-content: center;
  padding-right: 4px;
}
.practice-entry-cue[data-toolbar-rows="2"] .practice-beat-window-controls {
  top: 0;
  right: 0;
}
.practice-entry-cue:not(.is-maximized)[data-toolbar-mode="icons"] .practice-beat-normal-tools > button[data-toolbar-control],
.practice-entry-cue:not(.is-maximized)[data-toolbar-mode="icons"] .practice-beat-normal-tools > details > summary[data-toolbar-control] {
  width: 29px;
  min-width: 29px;
  padding-inline: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.practice-entry-cue:not(.is-maximized)[data-toolbar-mode="icons"] .practice-beat-normal-tools > button[data-toolbar-control] .practice-toolbar-label,
.practice-entry-cue:not(.is-maximized)[data-toolbar-mode="icons"] .practice-beat-normal-tools > details > summary[data-toolbar-control] .practice-toolbar-label {
  display: none !important;
}
.practice-entry-cue:not(.is-maximized)[data-toolbar-mode="icons"] .practice-beat-normal-tools > details > summary[data-toolbar-control]::after { display: none; }
.practice-entry-cue.is-maximized .practice-beat-toolbar > .practice-entry-cue-drag {
  max-width: 118px;
  flex-basis: 118px;
}
.practice-entry-cue.is-maximized[data-toolbar-mode="text"] .practice-beat-toolbar > .practice-entry-cue-drag {
  min-width: 100px;
  max-width: 100px;
  flex-basis: 100px;
}
.practice-entry-cue-drag > i { color: var(--app-muted); font-size: 14px; font-style: normal; line-height: 1; }
.practice-entry-cue-drag > span { min-width: 0; display: grid; gap: 1px; }
.practice-entry-cue-drag b { overflow: hidden; font-size: 13px; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.practice-entry-cue-drag small {
  overflow: hidden;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.practice-entry-cue.is-dragging .practice-entry-cue-drag { cursor: grabbing; }
.practice-beat-primary-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
}
.practice-beat-primary-actions button {
  min-width: 74px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding-inline: 8px;
  border-color: var(--button-accent-border);
  color: var(--button-accent-text);
  background: var(--button-accent-bg);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.practice-beat-primary-actions button:hover {
  border-color: var(--button-accent-border);
  background: color-mix(in srgb, var(--button-accent-bg) 82%, var(--app-accent));
}
.practice-beat-primary-actions button:disabled {
  cursor: wait;
  opacity: .7;
}
.practice-beat-primary-actions .practice-toolbar-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}
.practice-beat-calibration-primary {
  border-color: color-mix(in srgb, var(--app-accent) 64%, var(--app-line)) !important;
  color: var(--app-accent) !important;
  background: color-mix(in srgb, var(--app-accent-soft) 68%, var(--app-panel)) !important;
}
.practice-entry-cue[data-toolbar-density="compact"] .practice-beat-primary-actions button {
  width: 29px;
  min-width: 29px;
  padding-inline: 0;
}
.practice-entry-cue[data-toolbar-density="compact"] .practice-beat-primary-actions .practice-toolbar-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.practice-beat-toolbar button,
.practice-beat-toolbar select,
.practice-beat-more-tools > summary,
.practice-beat-tap-settings > summary,
.practice-beat-visual-lead-settings > summary,
.practice-beat-lyric-layout > summary,
.practice-beat-sound-settings > summary,
.practice-calibration-manager > summary {
  min-height: 24px;
  padding: 0 7px;
  border: 1px solid var(--app-line);
  border-radius: 5px;
  color: var(--app-text);
  background: var(--button-secondary-bg);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}
.practice-beat-toolbar button:hover,
.practice-beat-toolbar select:hover,
.practice-beat-more-tools > summary:hover,
.practice-beat-tap-settings > summary:hover,
.practice-beat-visual-lead-settings > summary:hover,
.practice-beat-lyric-layout > summary:hover,
.practice-beat-sound-settings > summary:hover,
.practice-calibration-manager > summary:hover { border-color: color-mix(in srgb, var(--app-accent) 52%, var(--app-line)); background: var(--button-secondary-bg-hover); }
.practice-beat-toolbar button[aria-checked="true"] { border-color: var(--button-accent-border); color: var(--button-accent-text); background: var(--button-accent-bg); }
.practice-beat-lyric-edit-toggle {
  border-color: color-mix(in srgb, var(--app-accent) 52%, var(--app-line));
  color: var(--app-accent);
  background: color-mix(in srgb, var(--app-accent) 10%, var(--button-secondary-bg));
}
.practice-beat-lyric-edit-toggle .practice-toolbar-edit-icon {
  width: 16px;
  height: 16px;
  stroke-width: 2.2;
}
.practice-beat-zoom {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}
.practice-beat-zoom > button { min-width: 34px; border-radius: 0; }
.practice-beat-zoom > button:first-child { border-radius: 5px 0 0 5px; }
.practice-beat-zoom > button + button { margin-left: -1px; }
.practice-beat-zoom > button:last-child { border-radius: 0 5px 5px 0; }
.practice-beat-zoom > [data-practice-beat-zoom-output] {
  min-width: 38px;
  padding-inline: 4px;
  color: var(--app-accent);
  font-variant-numeric: tabular-nums;
}
.practice-pitch-polyline-zoom {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}
.practice-pitch-polyline-zoom > button { min-width: 34px; border-radius: 0; }
.practice-pitch-polyline-zoom > button:first-child { border-radius: 5px 0 0 5px; }
.practice-pitch-polyline-zoom > button + button { margin-left: -1px; }
.practice-pitch-polyline-zoom > button:last-child { border-radius: 0 5px 5px 0; }
.practice-pitch-polyline-zoom > [data-practice-pitch-polyline-zoom-output] {
  min-width: 48px;
  padding-inline: 4px;
  color: var(--app-accent);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.practice-beat-playback-rate {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--app-muted);
  font-size: 12px;
  white-space: nowrap;
}
.practice-beat-playback-rate-label { font-weight: 700; }
.practice-beat-playback-rate select {
  min-width: 58px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--app-line);
  border-radius: 6px;
  color: var(--app-text);
  background: var(--app-panel);
  font-size: 12px;
}
.practice-beat-lyric-marquee {
  position: absolute;
  z-index: 16;
  border: 1px dashed var(--app-accent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--app-accent) 12%, transparent);
  pointer-events: none;
}
.practice-beat-lyric-marquee[hidden] { display: none !important; }
.practice-entry-cue.is-beat-lyric-editing .practice-halfbeat-viewport { cursor: grab; }
.practice-entry-cue.is-beat-lyric-editing .practice-halfbeat-viewport[data-lyric-marquee-zone="1"] { cursor: crosshair; }
.practice-halfbeat-viewport.is-beat-lyric-marquee-active { cursor: crosshair; }
.practice-halfbeat-viewport.is-timeline-panning { cursor: grabbing; }
.practice-entry-cue.is-beat-lyric-editing .practice-halfbeat-lyric-char,
.practice-entry-cue.is-beat-lyric-editing [data-beat-entry-marker] { cursor: grab; }
.practice-entry-cue.is-beat-lyric-editing .practice-halfbeat-lyric-char.is-dragging,
.practice-entry-cue.is-beat-lyric-editing [data-beat-entry-marker].is-dragging { cursor: grabbing; }
/* Keep quiet path dots for every lyric during playback so each word still
   shows where it lands on the beat path. Current lyric keeps the warmer pulse;
   non-current “唱” badges collapse to the same small pin. */
.practice-entry-cue:is([data-playback-state="playing"], .is-transport-visual-paused) .practice-halfbeat-lyric-item[data-lyric-role="primary"] :is(.practice-character-onset-marker, .practice-entry-exact-marker) {
  opacity: 0.88;
  visibility: visible;
  width: 8px;
  height: 8px;
  border-width: 1px;
  animation: none;
}
.practice-entry-cue:is([data-playback-state="playing"], .is-transport-visual-paused) .practice-halfbeat-lyric-item[data-lyric-role="primary"] .practice-entry-exact-marker em {
  display: none;
}
.practice-entry-cue:is([data-playback-state="playing"], .is-transport-visual-paused) .practice-halfbeat-lyric-item.is-lyric-current :is(.practice-character-onset-marker, .practice-entry-exact-marker) {
  opacity: 1;
  visibility: visible;
  color: var(--app-warm);
  width: 11px;
  height: 11px;
  border-width: 2px;
  background: color-mix(in srgb, var(--app-warm) 24%, var(--app-panel));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--app-warm) 24%, transparent), 0 0 14px color-mix(in srgb, var(--app-warm) 58%, transparent);
}
.practice-entry-cue:is([data-playback-state="playing"], .is-transport-visual-paused) .practice-halfbeat-lyric-item.is-lyric-current .practice-entry-exact-marker em {
  display: grid;
}
.practice-entry-cue:is([data-playback-state="playing"], .is-transport-visual-paused) .practice-beat-subdivision-point.is-lyric-onset-active,
.practice-entry-cue:is([data-playback-state="playing"], .is-transport-visual-paused) .practice-halfbeat-dot.is-lyric-onset-active {
  --halfbeat-color: var(--app-warm);
  color: var(--app-warm);
  background: color-mix(in srgb, var(--app-warm) 72%, var(--app-panel));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--app-warm) 24%, transparent), 0 0 14px color-mix(in srgb, var(--app-warm) 58%, transparent);
  /* The shared media frame owns this 240ms cue. Keep the cue static while its
     class is present so pause/resume or a rebuilt strip cannot restart it. */
}
.practice-entry-cue.is-beat-lyric-editing:not(.is-playback-active) .practice-character-onset-marker,
.practice-entry-cue.is-beat-lyric-editing:not(.is-playback-active) .practice-entry-exact-marker.is-character-onset {
  opacity: 0;
  visibility: hidden;
}
.practice-entry-cue.is-playback-active.is-beat-lyric-editing .practice-halfbeat-segment.is-current {
  opacity: 1;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--app-accent) 36%, transparent));
}
.practice-beat-more-tools { position: relative; flex: 0 0 auto; }
.practice-beat-more-tools > summary {
  min-height: 24px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 7px;
  list-style: none;
  white-space: nowrap;
}
.practice-beat-more-tools > summary::after { color: var(--app-muted); content: '⌄'; transition: transform .14s ease; }
.practice-beat-more-tools[open] > summary { border-color: var(--button-accent-border); color: var(--button-accent-text); background: var(--button-accent-bg); }
.practice-beat-more-tools[open] > summary::after { transform: rotate(180deg); }
.practice-beat-more-tools > summary::-webkit-details-marker { display: none; }
.practice-beat-more-tools > .practice-beat-more-panel {
  position: absolute;
  z-index: 46;
  top: calc(100% + 6px);
  right: 0;
  width: min(420px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--app-accent) 34%, var(--app-line));
  border-radius: 9px;
  color: var(--app-text);
  background: var(--app-panel);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--app-shadow) 78%, transparent);
  pointer-events: auto;
  /* The parent toolbar already counter-scales the floating teaching canvas.
     A second inverse scale here shrinks the menu to roughly half size on a
     large floating window and makes its 12–13px labels unreadable. */
  transform: none;
  transform-origin: top right;
}
.practice-entry-cue:not(.is-maximized) .practice-beat-more-tools > .practice-beat-more-panel {
  max-height: var(--practice-beat-more-max-height, calc((100vh - 28px) * var(--practice-cue-scale, 1)));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.practice-entry-cue:not(.is-maximized) .practice-beat-more-tools[data-menu-placement="up"] > .practice-beat-more-panel {
  top: auto;
  bottom: calc(100% + 6px);
  transform-origin: bottom right;
}
.practice-beat-more-panel > details,
.practice-beat-toolbar-mode-toggle { grid-column: 1 / -1; }
.practice-beat-more-panel > button {
  min-width: 0;
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1.35;
}
.practice-beat-more-panel > details > summary {
  width: 100%;
  min-height: 36px;
  box-sizing: border-box;
  justify-content: space-between;
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1.35;
}
.practice-beat-more-panel > :is(.practice-beat-primary-actions, .practice-beat-zoom, .practice-pitch-polyline-zoom, .practice-beat-lyric-edit-actions) {
  grid-column: 1 / -1;
  width: 100%;
}
.practice-beat-more-panel > .practice-beat-playback-rate {
  grid-column: 1 / -1;
  width: 100%;
  justify-content: space-between;
}
.practice-beat-more-panel > .practice-beat-primary-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.practice-beat-more-panel > .practice-beat-primary-actions button {
  width: 100%;
  min-width: 0;
}
.practice-beat-more-panel > .practice-beat-primary-actions .practice-toolbar-label {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: nowrap;
}
.practice-beat-more-panel > .practice-beat-zoom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}
.practice-beat-more-panel > .practice-beat-zoom > button { width: 100%; }
.practice-beat-more-panel > .practice-pitch-polyline-zoom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}
.practice-beat-more-panel > .practice-pitch-polyline-zoom > button { width: 100%; }
.practice-beat-more-panel > .practice-beat-lyric-edit-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.practice-beat-more-panel > .practice-beat-lyric-edit-actions:not([hidden]) { display: grid; }
.practice-beat-more-panel > .practice-beat-lyric-edit-actions .practice-beat-lyric-edit-hint { grid-column: 1 / -1; max-width: none; }
.practice-beat-more-panel > .practice-beat-toolbar-pin-settings {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--app-accent) 28%, var(--app-line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--app-accent-soft) 44%, var(--app-panel));
}
.practice-beat-toolbar-pin-settings > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.practice-beat-toolbar-pin-settings > header strong {
  flex: 0 0 auto;
  font-size: 15px;
  line-height: 1.4;
}
.practice-beat-toolbar-pin-settings > header small {
  color: var(--app-muted);
  font-size: 13px;
  line-height: 1.45;
  text-align: right;
}
.practice-beat-toolbar-pin-settings > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.practice-beat-toolbar-pin-settings button {
  min-height: 36px;
  padding: 6px 9px;
  border: 1px solid var(--app-line);
  border-radius: 6px;
  color: var(--app-text);
  background: var(--button-secondary-bg);
  font-size: 13px;
  line-height: 1.3;
  white-space: normal;
}
.practice-beat-toolbar-pin-settings button[aria-pressed="true"] {
  border-color: var(--button-accent-border);
  color: var(--button-accent-text);
  background: var(--button-accent-bg);
}
.practice-beat-toolbar-pin-settings button[aria-pressed="true"]::before { content: '✓ '; }
.practice-beat-toolbar-pin-settings button[data-toolbar-placement="auto"]::before {
  content: '• ';
  color: var(--app-accent);
}
.practice-beat-toolbar-pin-settings button[data-toolbar-placement="auto"] {
  border-color: color-mix(in srgb, var(--app-accent) 42%, var(--app-line));
}
.practice-beat-toolbar-pin-settings button:disabled { cursor: default; opacity: .72; }
.practice-beat-more-panel > .practice-playback-performance {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 8px 10px;
  padding: 10px;
  border: 1px solid var(--app-line);
  border-radius: 7px;
  color: var(--app-text);
  background: var(--app-panel-2);
  font-size: 13px;
}
.practice-playback-performance-choice {
  display: grid;
  gap: 7px;
}
.practice-playback-performance-choice > span { font-weight: 700; }
.practice-playback-performance-choice > select {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding-inline: 9px;
  border: 1px solid var(--app-line);
  border-radius: 6px;
  color: var(--app-text);
  background: var(--app-panel);
  font: inherit;
}
.practice-playback-performance > small {
  color: var(--app-muted);
  font-size: 13px;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
}
.practice-playback-timing-advanced {
  border-top: 1px solid var(--app-line);
}
.practice-playback-timing-advanced > summary {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 2px 0;
  color: var(--app-text);
  font-size: 13px;
  font-weight: 750;
  list-style: none;
  cursor: pointer;
}
.practice-playback-timing-advanced > summary::after {
  color: var(--app-muted);
  content: '展开';
  font-size: 12px;
  font-weight: 650;
}
.practice-playback-timing-advanced[open] > summary::after { content: '收起'; }
.practice-playback-timing-advanced > summary::-webkit-details-marker { display: none; }
.practice-playback-timing-advanced > div {
  display: grid;
  gap: 10px;
  padding-top: 8px;
}
.practice-playback-timing-advanced p,
.practice-playback-timing-note {
  margin: 0;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.5;
}
.practice-playback-timing-profile {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
.practice-playback-timing-profile > span {
  color: var(--app-text);
  font-size: 13px;
  font-weight: 750;
}
.practice-playback-timing-profile select,
.practice-playback-timing-profile-actions input {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  box-sizing: border-box;
  padding: 6px 9px;
  border: 1px solid var(--app-line);
  border-radius: 6px;
  color: var(--app-text);
  background: var(--app-panel);
  font: inherit;
}
.practice-playback-timing-description {
  color: var(--app-accent);
  font-size: 12px;
  line-height: 1.45;
}
.practice-playback-timing-profile-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 7px;
}
.practice-playback-timing-profile-actions button {
  min-height: 36px;
  white-space: nowrap;
}
.practice-playback-timing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.practice-playback-timing-grid > label {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 4px 6px;
  padding: 7px 8px;
  border: 1px solid var(--app-line);
  border-radius: 6px;
  background: var(--app-panel);
}
.practice-playback-timing-grid > label > span:first-child {
  color: var(--app-text);
  font-size: 13px;
  font-weight: 700;
}
.practice-playback-timing-grid > label > span:nth-child(2) {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  justify-self: stretch;
}
.practice-playback-timing-grid input {
  width: 100%;
  min-width: 64px;
  min-height: 34px;
  box-sizing: border-box;
  padding: 5px 7px;
  border: 1px solid var(--app-line);
  border-radius: 5px;
  color: var(--app-text);
  background: var(--app-panel-2);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.practice-playback-timing-grid b {
  color: var(--app-muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}
.practice-playback-timing-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}
.practice-playback-timing-actions button {
  flex: 0 0 auto;
  min-height: 34px;
}
.practice-playback-timing-actions output {
  min-width: 0;
  color: var(--app-accent);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.practice-entry-cue[data-toolbar-mode="text"] .practice-beat-more-panel .practice-beat-pitch-quick-tools > div,
.practice-entry-cue[data-toolbar-mode="text"] .practice-beat-more-panel .practice-beat-lyric-layout > div,
.practice-entry-cue[data-toolbar-mode="text"] .practice-beat-more-panel .practice-calibration-manager > div,
.practice-entry-cue[data-toolbar-mode="text"] .practice-beat-more-panel .practice-beat-sound-settings > div { transform: none; }
/* Outer "更多" panel already counters cue scale; nested popovers must not scale again. */
.practice-beat-more-panel .practice-beat-tap-settings > div,
.practice-beat-more-panel .practice-beat-lyric-layout > div,
.practice-beat-more-panel .practice-beat-pitch-quick-tools > div,
.practice-beat-more-panel .practice-calibration-manager > div,
.practice-beat-more-panel .practice-beat-sound-settings > div {
  transform: none;
  transform-origin: top right;
}
.practice-toolbar-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.practice-toolbar-icon.is-filled { fill: currentColor; stroke: none; }
.practice-beat-playhead-toggle [data-playhead-icon] { display: none; }
.practice-beat-playhead-toggle[data-mode="arrow"] [data-playhead-icon="arrow"],
.practice-beat-playhead-toggle[data-mode="tap"] [data-playhead-icon="tap"],
.practice-beat-playhead-toggle[data-mode="full"] [data-playhead-icon="full"],
.practice-beat-playhead-toggle[data-mode="hidden"] [data-playhead-icon="hidden"] { display: inline; }
.practice-beat-visibility-off { display: none; }
.practice-studio[data-beat-motion-labels="false"] .practice-beat-visibility-off { display: inline; }
.practice-studio[data-beat-motion-labels="false"] .practice-beat-measure { display: none; }
.practice-studio[data-beat-motion-labels="false"] :is(.practice-halfbeat-node, .practice-halfbeat-segment) { --measure-color: var(--app-muted); }
.practice-toolbar-label { white-space: nowrap; }
.practice-entry-cue[data-toolbar-mode="text"] [data-toolbar-control] .practice-toolbar-icon { display: none; }
.practice-entry-cue[data-toolbar-mode="icons"] [data-toolbar-control] .practice-toolbar-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* The floating toolbar itself is icon-only, but its More menu is a labelled
   command surface. Restore readable names after controls move into the menu. */
.practice-entry-cue[data-toolbar-mode="icons"] .practice-beat-more-panel [data-toolbar-control] .practice-toolbar-label,
.practice-entry-cue[data-toolbar-density="compact"] .practice-beat-more-panel > .practice-beat-primary-actions .practice-toolbar-label,
.practice-beat-more-panel.is-detached [data-toolbar-control] .practice-toolbar-label {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: nowrap;
  border: 0;
  display: inline !important;
}
.practice-entry-cue[data-toolbar-mode="icons"] .practice-beat-toolbar > button[data-toolbar-control],
.practice-entry-cue[data-toolbar-mode="icons"] .practice-beat-zoom > button[data-toolbar-control],
.practice-entry-cue[data-toolbar-mode="icons"] .practice-pitch-polyline-zoom > button[data-toolbar-control] {
  position: relative;
  width: 29px;
  min-width: 29px;
  padding-inline: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* When pitch is split, merging it back is the escape route. Keep this one
   command labelled even in the otherwise icon-only floating toolbar. */
.practice-entry-cue:not(.is-maximized)[data-toolbar-mode="icons"] .practice-beat-toolbar > .practice-beat-pitch-merge-toggle[aria-checked="false"],
.practice-entry-cue:not(.is-maximized)[data-toolbar-mode="icons"] .practice-beat-normal-tools > .practice-beat-pitch-merge-toggle[aria-checked="false"] {
  width: auto;
  min-width: auto;
  padding-inline: 9px;
  border-color: var(--button-accent-border);
  color: var(--button-accent-text);
  background: var(--button-accent-bg);
}
.practice-entry-cue:not(.is-maximized)[data-toolbar-mode="icons"] .practice-beat-toolbar > .practice-beat-pitch-merge-toggle[aria-checked="false"] .practice-toolbar-label,
.practice-entry-cue:not(.is-maximized)[data-toolbar-mode="icons"] .practice-beat-normal-tools > .practice-beat-pitch-merge-toggle[aria-checked="false"] .practice-toolbar-label {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: nowrap;
}
.practice-entry-cue[data-toolbar-mode="icons"] .practice-beat-toolbar {
  gap: 4px;
  padding-right: 52px;
}
.practice-entry-cue[data-toolbar-mode="icons"] .practice-entry-cue-drag {
  min-width: 24px;
  max-width: 24px;
  flex-basis: 24px;
  justify-content: center;
  margin-right: 0;
}
.practice-entry-cue[data-toolbar-mode="icons"] .practice-entry-cue-drag > span {
  display: none;
}
.practice-entry-cue[data-toolbar-mode="icons"] .practice-beat-toolbar > [data-toolbar-control] .practice-toolbar-icon,
.practice-entry-cue[data-toolbar-mode="icons"] .practice-beat-toolbar > details[data-beat-compact-tool] > summary[data-toolbar-control] .practice-toolbar-icon {
  width: 14px;
  height: 14px;
  flex-basis: 14px;
}
.practice-entry-cue[data-toolbar-mode="icons"] .practice-beat-more-tools > summary,
.practice-entry-cue[data-toolbar-mode="icons"] .practice-beat-tap-settings > summary,
.practice-entry-cue[data-toolbar-mode="icons"] .practice-beat-visual-lead-settings > summary,
.practice-entry-cue[data-toolbar-mode="icons"] .practice-beat-toolbar > details[data-beat-compact-tool] > summary[data-toolbar-control] {
  position: relative;
  width: 29px;
  min-width: 29px;
  min-height: 24px;
  justify-content: center;
  padding-inline: 0;
}
.practice-entry-cue[data-toolbar-mode="icons"] .practice-beat-more-tools > summary::after,
.practice-entry-cue[data-toolbar-mode="icons"] .practice-beat-tap-settings > summary::after,
.practice-entry-cue[data-toolbar-mode="icons"] .practice-beat-visual-lead-settings > summary::after,
.practice-entry-cue[data-toolbar-mode="icons"] .practice-beat-toolbar > details[data-beat-compact-tool] > summary[data-toolbar-control]::after { display: none; }
.practice-entry-cue[data-toolbar-mode="icons"] .practice-beat-zoom > [data-practice-beat-zoom-output] { min-width: 35px; }
.practice-entry-cue[data-toolbar-mode="icons"] .practice-pitch-polyline-zoom > [data-practice-pitch-polyline-zoom-output] { min-width: 35px; }
/* Safety net for restored legacy preferences: a floating window is always an
   icon toolbar even before the controller has normalized its saved mode. */
.practice-entry-cue:not(.is-maximized):not([data-toolbar-mode="text"]) [data-toolbar-control] .practice-toolbar-icon {
  display: block;
}
.practice-entry-cue:not(.is-maximized)[data-toolbar-mode="icons"] .practice-entry-cue-drag {
  min-width: 24px;
  max-width: 24px;
  flex: 0 0 24px;
}
.practice-entry-cue:not(.is-maximized)[data-toolbar-mode="icons"] .practice-entry-cue-drag > span {
  display: none;
}
.practice-beat-toolbar-mode-toggle[hidden] { display: none !important; }
.practice-beat-tap-settings { position: relative; flex: 0 0 auto; }
.practice-beat-visual-lead-settings { position: relative; flex: 0 0 auto; }
.practice-beat-visual-lead-settings[data-beat-visual-lead-mode="auto"]:not([open]) > summary {
  border-color: var(--button-accent-border);
  color: var(--button-accent-text);
  background: var(--button-accent-bg);
}
.practice-beat-visual-lead-settings.is-active:not([data-beat-visual-lead-mode="auto"]) > summary {
  border-color: color-mix(in srgb, var(--app-warm) 52%, var(--app-line));
  color: color-mix(in srgb, var(--app-warm) 88%, var(--app-text));
}
.practice-beat-visual-lead-settings > summary {
  min-height: 24px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 7px;
  list-style: none;
  white-space: nowrap;
}
.practice-beat-visual-lead-settings > summary::after { color: var(--app-muted); content: '⌄'; transition: transform .14s ease; }
.practice-beat-visual-lead-settings[open] > summary { border-color: var(--button-accent-border); color: var(--button-accent-text); background: var(--button-accent-bg); }
.practice-beat-visual-lead-settings[open] > summary::after { transform: rotate(180deg); }
.practice-beat-visual-lead-settings > summary::-webkit-details-marker { display: none; }
.practice-beat-visual-lead-settings > div,
.practice-floating-popover[data-floating-popover="beat-visual-lead"] {
  position: absolute;
  z-index: 47;
  top: calc(100% + 6px);
  right: 0;
  width: min(300px, calc(100vw - 28px));
  display: grid;
  gap: 10px;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--app-accent) 34%, var(--app-line));
  border-radius: 9px;
  color: var(--app-text);
  background: var(--app-panel);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--app-shadow) 78%, transparent);
  pointer-events: auto;
  transform: scale(var(--practice-cue-inverse-scale, 1));
  transform-origin: top right;
}
.practice-beat-visual-lead-settings header,
.practice-floating-popover[data-floating-popover="beat-visual-lead"] header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 2px 8px;
  align-items: start;
}
.practice-beat-visual-lead-settings header .practice-floating-popover-grip,
.practice-floating-popover[data-floating-popover="beat-visual-lead"] header .practice-floating-popover-grip { grid-row: 1 / span 2; }
.practice-beat-visual-lead-settings header .practice-floating-popover-close,
.practice-floating-popover[data-floating-popover="beat-visual-lead"] header .practice-floating-popover-close { grid-row: 1 / span 2; align-self: start; }
.practice-beat-visual-lead-settings header strong,
.practice-floating-popover[data-floating-popover="beat-visual-lead"] header strong { font-size: 16px; line-height: 1.3; }
.practice-beat-visual-lead-settings header small,
.practice-floating-popover[data-floating-popover="beat-visual-lead"] header small { color: var(--app-muted); font-size: 13px; line-height: 1.45; }
.practice-visual-lead-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.practice-visual-lead-mode button.is-active,
.practice-visual-lead-mode button[aria-pressed="true"] {
  border-color: var(--button-accent-border);
  color: var(--button-accent-text);
  background: var(--button-accent-bg);
}
.practice-beat-visual-lead-manual {
  display: grid;
  gap: 10px;
}
.practice-beat-visual-lead-slider,
.practice-beat-visual-lead-value-row {
  display: grid;
  gap: 6px;
  font-size: 12px;
}
.practice-beat-visual-lead-slider {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.practice-beat-visual-lead-slider input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 22px;
  accent-color: var(--app-accent);
}
.practice-beat-visual-lead-value-row {
  grid-template-columns: auto minmax(72px, 1fr) auto;
  align-items: center;
}
.practice-beat-visual-lead-value-row input[type="number"] {
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid var(--app-line);
  border-radius: 6px;
  background: var(--app-panel-elevated, var(--app-panel));
  color: var(--app-text);
  font-size: 12px;
}
.practice-beat-visual-lead-auto-note {
  margin: 0;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.35;
}
.practice-beat-tap-settings[hidden] { display: none; }
.practice-beat-tap-settings > summary {
  min-height: 24px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 7px;
  list-style: none;
  white-space: nowrap;
}
.practice-beat-tap-settings > summary::after { color: var(--app-muted); content: '⌄'; transition: transform .14s ease; }
.practice-beat-tap-settings[open] > summary { border-color: var(--button-accent-border); color: var(--button-accent-text); background: var(--button-accent-bg); }
.practice-beat-tap-settings[open] > summary::after { transform: rotate(180deg); }
.practice-beat-tap-settings > summary::-webkit-details-marker { display: none; }
.practice-beat-tap-settings > div {
  position: absolute;
  z-index: 47;
  top: calc(100% + 6px);
  right: 0;
  width: min(320px, calc(100vw - 28px));
  display: grid;
  gap: 10px;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--app-accent) 34%, var(--app-line));
  border-radius: 9px;
  color: var(--app-text);
  background: var(--app-panel);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--app-shadow) 78%, transparent);
  pointer-events: auto;
  transform: scale(var(--practice-cue-inverse-scale, 1));
  transform-origin: top right;
}
.practice-beat-tap-settings header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 2px 8px;
  align-items: start;
}
.practice-beat-tap-settings header .practice-floating-popover-grip { grid-row: 1 / span 2; }
.practice-beat-tap-settings header .practice-floating-popover-close { grid-row: 1 / span 2; align-self: start; }
.practice-beat-tap-settings header strong,
.practice-floating-popover[data-floating-popover="beat-tap-settings"] header strong,
.practice-floating-popover.is-detached header strong { font-size: 16px; line-height: 1.3; }
.practice-beat-tap-settings header small,
.practice-floating-popover[data-floating-popover="beat-tap-settings"] header small,
.practice-floating-popover.is-detached header small { color: var(--app-muted); font-size: 13px; line-height: 1.45; }
.practice-beat-tap-shapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
:is(.practice-beat-toolbar, .practice-floating-popover) .practice-beat-tap-shapes > button {
  min-width: 0;
  min-height: 64px;
  display: grid;
  place-items: center;
  gap: 3px;
  padding: 6px 3px;
  color: var(--app-muted);
  background: color-mix(in srgb, var(--app-panel) 84%, var(--app-bg));
}
.practice-beat-tap-shapes > button[aria-pressed="true"] { border-color: var(--button-accent-border); color: var(--button-accent-text); background: var(--button-accent-bg); }
.practice-beat-tap-shapes svg {
  width: 24px;
  height: 24px;
  fill: color-mix(in srgb, currentColor 12%, transparent);
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.practice-beat-tap-shapes span { font-size: 13px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
.practice-beat-visual-section {
  display: grid;
  gap: 6px;
  padding-top: 3px;
}
.practice-beat-visual-section > strong {
  color: var(--app-text);
  font-size: 13px;
  line-height: 1.25;
}
.practice-beat-style-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}
:is(.practice-beat-toolbar, .practice-floating-popover) .practice-beat-style-options > button {
  min-width: 0;
  min-height: 48px;
  display: grid;
  place-items: center;
  gap: 3px;
  padding: 4px 2px;
  color: var(--app-muted);
  background: color-mix(in srgb, var(--app-panel) 84%, var(--app-bg));
}
.practice-beat-style-options > button[aria-pressed="true"] {
  border-color: var(--button-accent-border);
  color: var(--button-accent-text);
  background: var(--button-accent-bg);
}
.practice-beat-style-options svg {
  width: 34px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.practice-beat-style-options span { font-size: 12px; font-weight: 800; line-height: 1.15; white-space: nowrap; }
:is(.practice-beat-toolbar, .practice-floating-popover) .practice-beat-path-more-toggle {
  width: 100%;
  min-height: 30px;
  margin-top: 2px;
  padding: 0 10px;
  border: 1px dashed color-mix(in srgb, var(--app-accent) 36%, var(--app-line));
  border-radius: 5px;
  color: var(--app-accent);
  background: color-mix(in srgb, var(--app-accent-soft) 55%, var(--app-panel));
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}
:is(.practice-beat-toolbar, .practice-floating-popover) .practice-beat-path-more-toggle:hover {
  border-color: var(--button-accent-border);
  background: var(--button-accent-bg);
  color: var(--button-accent-text);
}
:is(.practice-beat-toolbar, .practice-floating-popover) .practice-beat-path-more-toggle[aria-expanded="true"] {
  border-style: solid;
  border-color: var(--button-accent-border);
  color: var(--button-accent-text);
  background: var(--button-accent-bg);
}
.practice-beat-style-options.is-path-more {
  margin-top: 6px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.practice-beat-style-options.is-path-more[hidden] { display: none !important; }
.practice-beat-style-options i[data-node-preview] {
  width: 17px;
  height: 17px;
  display: block;
  box-sizing: border-box;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: var(--app-panel);
  box-shadow: 0 0 8px color-mix(in srgb, currentColor 46%, transparent);
}
.practice-beat-style-options i[data-node-preview="crystal"] { border-radius: 3px; transform: rotate(45deg) scale(.78); }
.practice-beat-style-options i[data-node-preview="orb"] { border: 0; background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--app-text) 78%, currentColor) 0 13%, currentColor 38%, color-mix(in srgb, currentColor 44%, var(--app-panel)) 100%); }
.practice-beat-style-options i[data-node-preview="prism"] { border: 0; border-radius: 3px; clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); background: linear-gradient(115deg, currentColor 0 35%, color-mix(in srgb, currentColor 32%, var(--app-panel)) 36% 60%, currentColor 61%); }
:is(.practice-beat-toolbar, .practice-floating-popover) .practice-beat-tap-size {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 38px;
  align-items: center;
  gap: 8px;
  color: var(--app-text);
  font-size: 13px;
  font-weight: 760;
}
.practice-beat-tap-size input { width: 100%; accent-color: var(--app-accent); cursor: pointer; }
.practice-beat-tap-size output { color: var(--app-accent); font-variant-numeric: tabular-nums; text-align: right; }
:is(.practice-beat-toolbar, .practice-floating-popover) .practice-beat-tap-reset {
  min-height: 32px;
  width: 100%;
  padding: 0 10px;
  border: 1px solid var(--app-line);
  border-radius: 5px;
  color: var(--app-text);
  background: var(--button-secondary-bg);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}
:is(.practice-beat-toolbar, .practice-floating-popover) .practice-beat-tap-reset:hover {
  border-color: color-mix(in srgb, var(--app-accent) 52%, var(--app-line));
  background: var(--button-secondary-bg-hover);
}
/* Detached popovers leave .practice-beat-toolbar; keep every control on theme tokens. */
.practice-floating-popover button,
.practice-floating-popover select {
  border: 1px solid var(--app-line);
  border-radius: 5px;
  color: var(--app-text);
  background: var(--button-secondary-bg);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
.practice-floating-popover button:hover,
.practice-floating-popover select:hover {
  border-color: color-mix(in srgb, var(--app-accent) 52%, var(--app-line));
  background: var(--button-secondary-bg-hover);
}
.practice-floating-popover button[aria-pressed="true"],
.practice-floating-popover button[aria-checked="true"] {
  border-color: var(--button-accent-border);
  color: var(--button-accent-text);
  background: var(--button-accent-bg);
}
.practice-beat-lyric-layout { position: relative; flex: 0 0 auto; }
.practice-beat-lyric-layout > summary {
  min-height: 24px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 7px;
  border: 1px solid var(--app-line);
  border-radius: 5px;
  color: var(--app-text);
  background: var(--button-secondary-bg);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}
.practice-beat-lyric-layout > summary::after { color: var(--app-muted); content: '⌄'; transition: transform .14s ease; }
.practice-beat-lyric-layout[open] > summary { border-color: var(--button-accent-border); color: var(--button-accent-text); background: var(--button-accent-bg); }
.practice-beat-lyric-layout[open] > summary::after { transform: rotate(180deg); }
.practice-beat-lyric-layout > summary::-webkit-details-marker { display: none; }
.practice-beat-lyric-layout > div {
  position: absolute;
  z-index: 45;
  top: calc(100% + 6px);
  right: 0;
  width: min(320px, calc(100vw - 28px));
  display: grid;
  gap: 11px;
  padding: 12px;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--app-accent) 34%, var(--app-line));
  border-radius: 9px;
  color: var(--app-text);
  background: var(--app-panel);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--app-shadow) 78%, transparent);
  pointer-events: auto;
  transform: scale(var(--practice-cue-inverse-scale, 1));
  transform-origin: top right;
}
.practice-beat-lyric-layout header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 2px 8px;
  align-items: start;
}
.practice-beat-lyric-layout header .practice-floating-popover-grip { grid-row: 1 / span 2; }
.practice-beat-lyric-layout header .practice-floating-popover-close { grid-row: 1 / span 2; align-self: start; }
.practice-beat-lyric-layout header strong { font-size: 16px; line-height: 1.35; }
.practice-beat-lyric-layout header small { color: var(--app-muted); font-size: 12px; line-height: 1.5; }
.practice-beat-lyric-layout-row {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) 64px;
  align-items: center;
  gap: 8px;
  color: var(--app-text);
  font-size: 12px;
  font-weight: 750;
}
.practice-beat-lyric-version-row,
.practice-beat-lyric-comparison-row {
  grid-template-columns: 68px minmax(0, 1fr);
}
.practice-beat-lyric-comparison-row[hidden] { display: none !important; }
.practice-beat-lyric-version-row select,
.practice-beat-lyric-comparison-row select {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--practice-line);
  border-radius: 6px;
  color: var(--app-text);
  background: var(--button-secondary-bg);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
}
.practice-beat-lyric-display-toggles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.practice-beat-lyric-display-toggles > button,
.practice-beat-jyutping-mode > button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--practice-line);
  border-radius: 6px;
  color: var(--practice-muted);
  background: var(--button-secondary-bg);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}
.practice-beat-lyric-display-toggles > button[aria-checked="true"],
.practice-beat-jyutping-mode > button.is-active,
.practice-beat-jyutping-mode > button[aria-pressed="true"] {
  border-color: var(--button-accent-border);
  color: var(--app-accent);
  background: var(--app-accent-soft);
}
.practice-beat-lyric-display-toggles > button:disabled {
  cursor: not-allowed;
  opacity: .54;
}
.practice-beat-jyutping-mode {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.practice-beat-jyutping-mode[hidden] { display: none !important; }
.practice-beat-jyutping-mode > button[data-action="generate-jyutping-hanzi"].is-cached {
  border-color: color-mix(in srgb, var(--status-success) 46%, var(--practice-line));
}
.practice-beat-lyric-layout-row input { width: 100%; accent-color: var(--app-accent); cursor: pointer; }
.practice-beat-lyric-layout-row output { color: var(--app-accent); font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; }
.practice-beat-lyric-layout-hint {
  margin: 0;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.4;
}
:is(.practice-beat-toolbar, .practice-floating-popover) .practice-beat-lyric-layout-reset {
  min-height: 34px;
  width: 100%;
  padding: 0 10px;
  border: 1px solid var(--app-line);
  border-radius: 5px;
  color: var(--app-text);
  background: var(--button-secondary-bg);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}
:is(.practice-beat-toolbar, .practice-floating-popover) .practice-beat-lyric-layout-reset:hover {
  border-color: color-mix(in srgb, var(--app-accent) 52%, var(--app-line));
  background: var(--button-secondary-bg-hover);
}
.practice-beat-sound-settings { position: relative; flex: 0 0 auto; }
.practice-beat-sound-settings > summary { display: flex; align-items: center; gap: 5px; list-style: none; white-space: nowrap; }
.practice-beat-sound-settings > summary::after { color: var(--app-muted); content: '⌄'; transition: transform .14s ease; }
.practice-beat-sound-settings[open] > summary { border-color: var(--button-accent-border); color: var(--button-accent-text); background: var(--button-accent-bg); }
.practice-beat-sound-settings[open] > summary::after { transform: rotate(180deg); }
.practice-beat-sound-settings > summary::-webkit-details-marker { display: none; }
.practice-calibration-manager { position: relative; flex: 0 0 auto; }
.practice-calibration-manager > summary { display: flex; align-items: center; gap: 5px; list-style: none; white-space: nowrap; }
.practice-calibration-manager > summary::after { color: var(--app-muted); content: '⌄'; transition: transform .14s ease; }
.practice-calibration-manager[open] > summary { border-color: var(--button-accent-border); color: var(--button-accent-text); background: var(--button-accent-bg); }
.practice-calibration-manager[open] > summary::after { transform: rotate(180deg); }
.practice-calibration-manager > summary::-webkit-details-marker { display: none; }
.practice-beat-pitch-quick-tools { position: relative; flex: 0 0 auto; }
.practice-beat-pitch-quick-tools > summary { min-height: 24px; display: flex; align-items: center; gap: 5px; padding: 0 7px; border: 1px solid var(--app-line); border-radius: 5px; color: var(--app-text); background: var(--button-secondary-bg); font-size: 8px; font-weight: 750; cursor: pointer; list-style: none; white-space: nowrap; }
.practice-beat-pitch-quick-tools > summary::after { color: var(--app-muted); content: '⌄'; transition: transform .14s ease; }
.practice-beat-pitch-quick-tools[open] > summary { border-color: var(--button-accent-border); color: var(--button-accent-text); background: var(--button-accent-bg); }
.practice-beat-pitch-quick-tools[open] > summary::after { transform: rotate(180deg); }
.practice-beat-pitch-quick-tools > summary::-webkit-details-marker { display: none; }
.practice-beat-pitch-quick-tools > div { position: absolute; z-index: 43; top: calc(100% + 6px); right: 0; width: min(320px,calc(100vw - 28px)); display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; padding: 9px; border: 1px solid color-mix(in srgb,var(--app-accent) 34%,var(--app-line)); border-radius: 9px; color: var(--app-text); background: var(--app-panel); box-shadow: 0 14px 34px color-mix(in srgb,var(--app-shadow) 78%,transparent); pointer-events: auto; transform: scale(var(--practice-cue-inverse-scale,1)); transform-origin: top right; }
.practice-beat-pitch-quick-tools > div > header {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 2px 8px;
  align-items: start;
}
.practice-beat-pitch-quick-tools > div > header .practice-floating-popover-grip { grid-row: 1 / span 2; }
.practice-beat-pitch-quick-tools > div > header .practice-floating-popover-close { grid-row: 1 / span 2; align-self: start; }
.practice-beat-pitch-quick-tools > div > header strong { font-size: 12px; }
.practice-beat-pitch-quick-tools > div > header small { color: var(--app-muted); font-size: 9px; line-height: 1.45; }
.practice-beat-pitch-quick-tools > div > button { min-width: 0; padding-inline: 5px; }
.practice-calibration-panel,
.practice-calibration-manager > div {
  position: absolute;
  z-index: 42;
  top: calc(100% + 6px);
  right: 0;
  width: min(320px, calc(100vw - 28px));
  display: grid;
  gap: 10px;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--app-accent) 34%, var(--app-line));
  border-radius: 9px;
  color: var(--app-text);
  background: var(--app-panel);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--app-shadow) 78%, transparent);
  pointer-events: auto;
  transform: scale(var(--practice-cue-inverse-scale, 1));
  transform-origin: top right;
}
.practice-calibration-panel header,
.practice-calibration-manager header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 2px 8px;
  align-items: start;
}
.practice-calibration-panel header .practice-floating-popover-grip,
.practice-calibration-manager header .practice-floating-popover-grip { grid-row: 1 / span 2; }
.practice-calibration-panel header .practice-floating-popover-close,
.practice-calibration-manager header .practice-floating-popover-close { grid-row: 1 / span 2; align-self: start; }
.practice-calibration-panel header strong,
.practice-calibration-manager header strong { font-size: 16px; line-height: 1.3; }
.practice-calibration-panel header small,
.practice-calibration-manager header small { color: var(--app-muted); font-size: 13px; line-height: 1.45; }
.practice-calibration-summary {
  margin: 0;
  padding: 8px 9px;
  border: 1px solid var(--app-line);
  border-radius: 6px;
  background: color-mix(in srgb, var(--app-panel-2) 72%, var(--app-panel));
  color: var(--app-text);
  font-size: 12px;
  line-height: 1.45;
}
.practice-calibration-section {
  display: grid;
  gap: 6px;
  padding-top: 2px;
}
.practice-calibration-section > strong {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: var(--app-text);
  font-size: 13px;
  line-height: 1.25;
}
.practice-calibration-section output {
  color: var(--app-accent);
  font: 800 12px/1.35 var(--font-family-mono);
  white-space: nowrap;
}
.practice-calibration-panel select {
  width: 100%;
  min-height: 36px;
  padding: 0 8px;
  font-size: 12px;
}
.practice-calibration-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.practice-calibration-panel button {
  min-width: 0;
  min-height: 40px;
  padding: 6px 8px;
  border: 1px solid var(--app-line);
  border-radius: 5px;
  color: var(--app-text);
  background: color-mix(in srgb, var(--app-panel) 84%, var(--app-bg));
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}
.practice-calibration-panel button:hover {
  border-color: color-mix(in srgb, var(--app-accent) 52%, var(--app-line));
  background: var(--button-secondary-bg-hover);
}
.practice-calibration-panel button[data-calibration-primary] {
  border-color: var(--button-accent-border);
  color: var(--button-accent-text);
  background: var(--button-accent-bg);
}
.practice-calibration-panel button:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.practice-calibration-actions > [data-action="calibration-save-as"] {
  grid-column: 1 / -1;
}
.practice-calibration-section > [data-action="calibration-restore-backup"] {
  width: 100%;
}
.practice-calibration-import-status {
  padding: 6px 7px;
  border: 1px solid var(--app-line);
  border-radius: 6px;
  background: var(--status-info-bg);
}
.practice-calibration-import-status[hidden] { display: none; }
.practice-calibration-import-status[data-state="busy"] { color: var(--app-accent); border-color: color-mix(in srgb, var(--app-accent) 40%, var(--app-line)); }
.practice-calibration-import-status[data-state="success"] { color: var(--status-success-text); border-color: var(--status-success-border); background: var(--status-success-bg); }
.practice-calibration-import-status[data-state="warning"] { color: var(--status-warning-text); border-color: var(--status-warning-border); background: var(--status-warning-bg); }
.practice-calibration-import-status[data-state="error"] { color: var(--status-danger-text); border-color: var(--status-danger-border); background: var(--status-danger-bg); }
.practice-beat-sound-settings > div {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  right: 0;
  min-width: 300px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--app-line);
  border-radius: 7px;
  background: var(--app-panel);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--app-shadow) 76%, transparent);
  pointer-events: auto;
  transform: scale(var(--practice-cue-inverse-scale, 1));
  transform-origin: top right;
}
.practice-beat-sound-settings > div > header {
  flex: 1 0 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 2px 8px;
  align-items: start;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--app-line);
  margin-bottom: 2px;
}
.practice-beat-sound-settings > div > header .practice-floating-popover-grip { grid-row: 1 / span 2; }
.practice-beat-sound-settings > div > header .practice-floating-popover-close { grid-row: 1 / span 2; align-self: start; }
.practice-beat-sound-settings > div > header strong { font-size: 13px; line-height: 1.3; }
.practice-beat-sound-settings > div > header small { color: var(--app-muted); font-size: 12px; line-height: 1.4; }
/* Detached popovers leave the scaled cue so fixed + viewport coords stay correct. */
.practice-floating-popover.is-detached {
  position: fixed !important;
  right: auto !important;
  bottom: auto !important;
  /* Detached teaching controls stay with the foreground lesson and above the
     monitoring rail; native chrome and blocking dialogs remain higher. */
  z-index: var(--app-layer-coach-popover, 2147483599) !important;
  display: grid;
  gap: 10px;
  padding: 11px;
  box-sizing: border-box !important;
  width: min(320px, calc(100vw - 28px)) !important;
  min-width: 0 !important;
  max-width: min(320px, calc(100vw - 28px)) !important;
  border: 1px solid color-mix(in srgb, var(--app-accent) 34%, var(--app-line));
  border-radius: 9px;
  color: var(--app-text);
  background: var(--app-panel);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--app-shadow) 78%, transparent);
  transform: none !important;
  transform-origin: top left !important;
  pointer-events: none;
  visibility: hidden;
}
.practice-floating-popover.is-detached:not(.is-placed) {
  pointer-events: none;
}
.practice-floating-popover.is-detached.is-placed {
  visibility: visible;
  pointer-events: auto;
}
.practice-floating-popover.is-detached[data-floating-popover="pitch-runway-style"] {
  width: min(220px, calc(100vw - 28px)) !important;
  max-width: min(220px, calc(100vw - 28px)) !important;
  min-width: 168px !important;
  gap: 2px;
  padding: 6px;
}
.practice-floating-popover.is-detached[data-floating-popover="pitch-runway-style"] > button {
  pointer-events: auto;
}
.practice-floating-popover.is-detached[data-floating-popover="beat-pitch-quick-tools"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  padding: 9px;
}
.practice-floating-popover.is-detached[data-floating-popover="beat-more-tools"] {
  width: min(420px, calc(100vw - 16px)) !important;
  max-width: min(420px, calc(100vw - 16px)) !important;
  max-height: calc(100vh - 16px);
  max-height: calc(100dvh - 16px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.practice-beat-more-panel-header {
  position: sticky;
  z-index: 2;
  top: -11px;
  grid-column: 1 / -1;
  margin: -11px -11px 0;
  padding: 11px;
  border-bottom: 1px solid var(--app-line);
  background: var(--app-panel);
}
.practice-beat-more-panel-header strong {
  font-size: 15px;
  line-height: 1.35;
}
.practice-beat-more-panel-header small {
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.45;
}
.practice-floating-popover.is-detached[data-floating-popover="beat-sound-settings"] {
  width: min(340px, calc(100vw - 28px)) !important;
  max-width: min(340px, calc(100vw - 28px)) !important;
}
.practice-floating-popover.is-detached[data-floating-popover="calibration-manager"] {
  width: min(320px, calc(100vw - 28px)) !important;
  max-width: min(320px, calc(100vw - 28px)) !important;
}
.practice-floating-popover.is-detached[data-floating-popover="pitch-context-tools"] {
  width: min(280px, calc(100vw - 28px)) !important;
  max-width: min(280px, calc(100vw - 28px)) !important;
  max-height: min(72vh, calc(100vh - 28px));
  grid-template-rows: auto minmax(0, 1fr);
  padding: 0;
  overflow: hidden;
}
.practice-floating-popover.is-detached[data-floating-popover="pitch-context-tools"] .practice-pitch-context-body {
  max-height: none;
}
.practice-floating-popover.is-detached[data-floating-popover="practice-queue"] {
  width: min(360px, calc(100vw - 28px)) !important;
  max-width: min(360px, calc(100vw - 28px)) !important;
  max-height: calc(100vh - 28px);
  overflow: hidden;
}
.practice-floating-popover.is-detached[data-floating-popover="pitch-runway-style"] {
  width: min(220px, calc(100vw - 28px)) !important;
  max-width: min(220px, calc(100vw - 28px)) !important;
  min-width: 168px !important;
  gap: 2px;
  padding: 6px;
}
.practice-floating-popover.is-detached[data-floating-popover="pitch-runway-style"] > button {
  pointer-events: auto;
}
.practice-floating-popover.is-positioned:not(.is-detached) {
  position: absolute !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 4200 !important;
}
.practice-floating-popover-handle {
  cursor: grab;
  touch-action: none;
  user-select: none;
}
/* Floating-window chrome has a higher interaction level than the tools inside
   it. Keep the drag affordance/title at the left and the close action in a
   dedicated right column in every practice popover, regardless of content or
   responsive wrapping. */
[data-floating-popover] > header[data-floating-popover-header] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
}
[data-floating-popover] > header[data-floating-popover-header] > .practice-floating-popover-grip {
  grid-column: 1;
  grid-row: 1 / span 2;
}
[data-floating-popover] > header[data-floating-popover-header] > :is(strong, small) {
  grid-column: 2;
  min-width: 0;
}
[data-floating-popover] > header[data-floating-popover-header] > .practice-floating-popover-close {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: start;
  justify-self: end;
}
.practice-floating-popover-grip {
  color: var(--app-muted);
  font-size: 14px;
  line-height: 1;
  user-select: none;
}
.practice-floating-popover-close {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0 !important;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--app-line);
  border-radius: 6px;
  color: var(--app-muted);
  background: var(--button-secondary-bg);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.practice-floating-popover-close:hover {
  border-color: color-mix(in srgb, var(--app-accent) 52%, var(--app-line));
  color: var(--app-text);
  background: var(--button-secondary-bg-hover);
}
.practice-floating-popover.is-dragging {
  cursor: grabbing;
  user-select: none;
}
.practice-floating-popover.is-dragging .practice-floating-popover-handle { cursor: grabbing; }
.practice-floating-popover.is-dragging :is(button, input, select, textarea, label) {
  pointer-events: none;
}
.practice-beat-window-controls {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.practice-beat-window-controls > button {
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0 !important;
  font-size: 13px !important;
  line-height: 1;
}
.practice-beat-window-controls > button:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; }
.practice-beat-window-controls .practice-toolbar-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.practice-beat-maximize-toggle[aria-pressed="false"] .practice-beat-restore-icon,
.practice-beat-maximize-toggle[aria-pressed="true"] .practice-beat-maximize-icon { display: none; }
.practice-beat-lyric-edit-actions { display: inline-flex; align-items: center; gap: 4px; }
.practice-beat-lyric-edit-actions[hidden] { display: none; }
.practice-beat-lyric-select-all[hidden] { display: none !important; }
.practice-beat-lyric-select-all:not([hidden]) { display: inline-flex; }
.practice-beat-lyric-edit-hint {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.practice-beat-toolbar .practice-beat-lyric-edit-actions button { min-width: 38px; padding-inline: 5px; }
.practice-beat-lyric-range-loop[aria-pressed="true"] {
  border-color: var(--button-accent-border);
  color: var(--button-accent-text);
  background: var(--button-accent-bg);
}
.practice-entry-cue.is-beat-lyric-editing { z-index: var(--app-layer-teaching, 2147483595); border-color: color-mix(in srgb, var(--app-accent) 72%, var(--app-line)); cursor: default; }
.practice-studio.beat-lyric-editing .practice-beat-coach {
  visibility: hidden;
  pointer-events: none;
}
.practice-entry-cue.is-beat-lyric-editing .practice-entry-cue-visual {
  grid-template-rows: calc(34px * var(--practice-cue-inverse-scale, 1)) minmax(0, 1fr) 4px;
  padding-top: calc(7px * var(--practice-cue-inverse-scale, 1));
  padding-right: calc(10px * var(--practice-cue-inverse-scale, 1));
  padding-left: calc(10px * var(--practice-cue-inverse-scale, 1));
}
.practice-entry-cue.is-beat-lyric-editing[data-pitch-merged="true"] .practice-entry-cue-visual {
  grid-template-rows: calc(34px * var(--practice-cue-inverse-scale, 1)) minmax(0, 1fr);
}
.practice-entry-cue.is-beat-lyric-editing .practice-beat-toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 4px;
  padding-right: 58px;
  padding-bottom: 5px;
}
.practice-entry-cue.is-beat-lyric-editing .practice-beat-toolbar > .practice-entry-cue-drag {
  min-width: 126px;
  max-width: 126px;
  flex: 0 0 126px;
  gap: 5px;
  margin-right: 0;
}
.practice-entry-cue.is-beat-lyric-editing .practice-entry-cue-drag > i { font-size: 14px; }
.practice-entry-cue.is-beat-lyric-editing .practice-entry-cue-drag b { font-size: 13px; }
.practice-entry-cue.is-beat-lyric-editing .practice-entry-cue-drag small { font-size: 12px; }
.practice-entry-cue.is-beat-lyric-editing[data-toolbar-mode="icons"] .practice-beat-toolbar > .practice-entry-cue-drag {
  min-width: 24px;
  max-width: 24px;
  flex-basis: 24px;
}
.practice-entry-cue.is-beat-lyric-editing[data-toolbar-mode="icons"] .practice-beat-toolbar > button[data-toolbar-control] {
  width: 30px;
  min-width: 30px;
  min-height: 26px;
  padding-inline: 0;
}
.practice-entry-cue.is-beat-lyric-editing .practice-beat-lyric-edit-primary,
.practice-entry-cue.is-beat-lyric-editing .practice-beat-edit-pinned-tools {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.practice-entry-cue.is-beat-lyric-editing .practice-beat-lyric-edit-primary {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  touch-action: pan-y;
}
.practice-entry-cue.is-beat-lyric-editing :is(
  .practice-beat-lyric-edit-primary,
  .practice-beat-edit-pinned-tools,
  .practice-beat-lyric-edit-actions
) {
  flex-shrink: 0;
  white-space: nowrap;
}
.practice-entry-cue.is-beat-lyric-editing .practice-beat-lyric-edit-primary > *,
.practice-entry-cue.is-beat-lyric-editing .practice-beat-lyric-edit-actions > button {
  flex: 0 0 auto;
  white-space: nowrap;
}
.practice-entry-cue.is-beat-lyric-editing .practice-beat-lyric-edit-primary {
  justify-self: center;
  justify-content: center;
}
.practice-entry-cue.is-beat-lyric-editing .practice-beat-edit-pinned-tools { justify-content: center; }
.practice-entry-cue.is-beat-lyric-editing .practice-beat-edit-pinned-tools[hidden] { display: none; }
.practice-entry-cue.is-beat-lyric-editing[data-toolbar-mode="icons"] .practice-beat-lyric-edit-primary > button[data-toolbar-control],
.practice-entry-cue.is-beat-lyric-editing[data-toolbar-mode="icons"] .practice-beat-edit-pinned-tools > button[data-toolbar-control] {
  width: 30px;
  min-width: 30px;
  min-height: 26px;
  padding-inline: 0;
}
.practice-entry-cue.is-beat-lyric-editing[data-toolbar-mode="icons"] .practice-beat-edit-pinned-tools .practice-toolbar-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.practice-entry-cue.is-beat-lyric-editing .practice-beat-edit-pinned-tools .practice-toolbar-icon { display: block; }
.practice-entry-cue.is-beat-lyric-editing[data-lyric-toolbar-density="compact"] .practice-beat-lyric-edit-primary {
  justify-self: start;
}
.practice-entry-cue.is-beat-lyric-editing[data-lyric-toolbar-density="compact"] .practice-beat-lyric-edit-primary .practice-beat-lyric-edit-actions {
  gap: 3px;
}
.practice-entry-cue.is-beat-lyric-editing[data-lyric-toolbar-density="compact"] .practice-beat-lyric-edit-primary > .practice-beat-pitch-merge-toggle {
  width: auto;
  min-width: auto;
  padding-inline: 3px;
  border-color: var(--button-accent-border);
  color: var(--button-accent-text);
  background: var(--button-accent-bg);
}
.practice-entry-cue.is-beat-lyric-editing[data-lyric-toolbar-density="compact"] .practice-beat-lyric-edit-primary > .practice-beat-pitch-merge-toggle .practice-toolbar-label {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: nowrap;
}
.practice-entry-cue.is-beat-lyric-editing .practice-beat-lyric-edit-actions {
  gap: 3px;
}
.practice-entry-cue.is-beat-lyric-editing .practice-beat-toolbar .practice-beat-lyric-edit-actions button {
  min-width: 40px;
  min-height: 26px;
  padding-inline: 7px;
  font-size: 12px;
}
.practice-entry-cue.is-beat-lyric-editing .practice-beat-toolbar .practice-beat-lyric-edit-actions button[data-action="beat-lyric-audition"] {
  /* “试听当前字 / 暂停试听 / 播放选区 / 准备中…” share one transport
     slot.  Reserve the longest label so playback state never reflows the
     surrounding edit toolbar. */
  box-sizing: border-box;
  width: 84px;
  min-width: 84px;
  max-width: 84px;
  justify-content: center;
}
.practice-entry-cue.is-beat-lyric-editing .practice-beat-window-controls {
  gap: 3px;
}
.practice-entry-cue.is-beat-lyric-editing .practice-beat-window-controls > button {
  width: 26px;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
  font-size: 13px !important;
}
.practice-entry-cue.is-beat-lyric-editing[data-toolbar-rows="2"] .practice-beat-toolbar {
  min-height: 58px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: 26px 28px;
  align-content: start;
  row-gap: 4px;
}
.practice-entry-cue.is-beat-lyric-editing[data-toolbar-rows="2"] .practice-entry-cue-visual {
  /* The focused edit selector above reserves one 34px row. When the adaptive
     arranger needs two rows, restore the full header reservation so controls
     never spill over the first beat or pitch pixels after maximize/restore. */
  grid-template-rows: calc(64px * var(--practice-cue-inverse-scale, 1)) minmax(0, 1fr) 4px;
}
.practice-entry-cue.is-beat-lyric-editing[data-pitch-merged="true"][data-toolbar-rows="2"] .practice-entry-cue-visual {
  grid-template-rows: calc(64px * var(--practice-cue-inverse-scale, 1)) minmax(0, 1fr);
}
.practice-entry-cue.is-beat-lyric-editing[data-toolbar-rows="2"] .practice-beat-toolbar > .practice-entry-cue-drag {
  grid-column: 1;
  grid-row: 1;
}
.practice-entry-cue.is-beat-lyric-editing[data-toolbar-rows="2"] .practice-beat-more-tools {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}
.practice-entry-cue.is-beat-lyric-editing[data-toolbar-rows="2"] .practice-beat-lyric-edit-primary {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: center;
  width: auto;
  max-width: 100%;
  padding-right: 0;
}
.practice-entry-cue.is-beat-lyric-editing .practice-halfbeat-flow { cursor: default; }
.practice-entry-cue.is-beat-lyric-editing .practice-entry-cue-lyric-fallback,
.practice-studio.beat-lyric-editing [data-practice-entry-cue-lyric-fallback] {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
}
.practice-entry-cue.is-beat-lyric-editing [data-halfbeat-index] { cursor: pointer; }
.practice-entry-cue.is-beat-lyric-editing [data-halfbeat-index]:hover .practice-halfbeat-dot { color: var(--app-accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--app-accent) 14%, transparent); }
/* Edit mode keeps horizontal zoom next to the drag handle (not hidden). */
.practice-entry-cue.is-beat-lyric-editing .practice-beat-zoom {
  display: inline-flex;
  flex: 0 0 auto;
  order: 0;
  visibility: visible;
}
.practice-entry-cue.is-beat-lyric-editing .practice-pitch-polyline-zoom {
  display: inline-flex;
  flex: 0 0 auto;
  order: 0;
  visibility: visible;
}
.practice-entry-cue.is-beat-lyric-editing .practice-beat-playback-rate {
  display: inline-flex;
  flex: 0 0 auto;
  order: 0;
}
/* Edit is the first command after the drag handle in the focused toolbar. */
.practice-entry-cue.is-beat-lyric-editing .practice-beat-lyric-edit-toggle { margin-left: 0; }
.practice-beat-toolbar label { display: inline-flex; align-items: center; gap: 4px; color: var(--app-muted); font-size: 8px; white-space: nowrap; }
.practice-beat-toolbar label select { width: 72px; }
.practice-metronome-volume input { width: 54px; accent-color: var(--app-accent); cursor: pointer; }
.practice-metronome-timing input { width: 76px; accent-color: var(--app-accent); cursor: pointer; }
.practice-metronome-timing output { min-width: 54px; color: var(--app-text); font-variant-numeric: tabular-nums; }
.practice-beat-conductor {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  height: 92px;
  display: grid;
  grid-template-rows: 58px 28px;
  align-items: center;
  gap: 4px;
}
.practice-beat-conductor-path {
  --practice-beat-marker-x: 50%;
  --practice-beat-marker-y: 82%;
  position: relative;
  width: 128px;
  height: 56px;
  justify-self: center;
  color: color-mix(in srgb, var(--app-accent) 58%, var(--app-muted));
}
.practice-beat-conductor-path::before,
.practice-beat-conductor-path::after {
  position: absolute;
  top: 27px;
  width: 70px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 8px color-mix(in srgb, var(--app-accent) 34%, transparent);
  content: '';
}
.practice-beat-conductor-path::before { left: 3px; transform: rotate(42deg); }
.practice-beat-conductor-path::after { right: 3px; transform: rotate(-42deg); }
.practice-beat-conductor-path i {
  position: absolute;
  z-index: 2;
  top: var(--practice-beat-marker-y);
  left: var(--practice-beat-marker-x);
  width: 12px;
  height: 12px;
  border: 2px solid color-mix(in srgb, var(--app-accent) 88%, var(--app-text));
  border-radius: 50%;
  background: var(--app-panel);
  box-shadow: 0 0 13px color-mix(in srgb, var(--app-accent) 74%, transparent);
  transform: translate(-50%, -50%);
  transition: top 55ms linear, left 55ms linear;
}
.practice-beat-direction { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.practice-beat-direction span { min-height: 25px; display: flex; align-items: center; justify-content: center; gap: 4px; border: 1px solid color-mix(in srgb, var(--app-line) 72%, transparent); border-radius: 5px; color: var(--app-muted); background: color-mix(in srgb, var(--app-bg) 42%, transparent); }
.practice-beat-direction b { font-size: 18px; line-height: 1; }
.practice-beat-direction small { font-size: 9px; font-weight: 800; }
.practice-beat-conductor[data-practice-beat-motion="down"] [data-beat-direction="down"],
.practice-beat-conductor[data-practice-beat-motion="up"] [data-beat-direction="up"] { border-color: color-mix(in srgb, var(--app-warm) 72%, var(--app-line)); color: color-mix(in srgb, var(--app-warm) 86%, var(--app-text)); background: color-mix(in srgb, var(--app-warm) 13%, var(--app-panel)); box-shadow: 0 0 14px color-mix(in srgb, var(--app-warm) 15%, transparent); }
.practice-entry-cue .practice-entry-cue-core {
  grid-column: 2;
  grid-row: 2;
  width: 150px;
  height: 92px;
  grid-template-rows: 18px 48px 15px 11px;
}
.practice-entry-cue .practice-entry-cue-core::before { top: 15px; }
.practice-entry-cue .practice-entry-cue-core::after { bottom: 24px; }
.practice-entry-cue .practice-entry-cue-digit { height: 48px; }
.practice-entry-cue .practice-entry-cue-digit strong { font-size: 42px; letter-spacing: -.04em; text-indent: 0; white-space: nowrap; }
.practice-entry-cue .practice-entry-cue-kicker { align-self: end; }
.practice-entry-cue .practice-entry-cue-core small { align-self: center; font-size: 9px; letter-spacing: .08em; text-indent: .08em; }
.practice-beat-bar {
  max-width: 150px;
  overflow: hidden;
  color: var(--app-muted);
  font: 700 7.5px/1 var(--font-family-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.practice-beat-next {
  grid-column: 3;
  grid-row: 2;
  min-width: 0;
  min-height: 82px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--app-line) 82%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--app-bg) 38%, transparent);
}
.practice-beat-next > span { color: var(--app-muted); font-size: 8px; font-weight: 750; letter-spacing: .08em; }
.practice-beat-next > strong { overflow: hidden; font-size: 14px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.practice-beat-next > small { overflow: hidden; color: var(--app-muted); font-size: 9px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.practice-entry-cue.is-entry-approaching .practice-beat-next { border-color: color-mix(in srgb, var(--app-accent) 64%, var(--app-line)); background: color-mix(in srgb, var(--app-accent) 11%, var(--app-panel)); }
.practice-entry-cue.is-sing-now { border-color: color-mix(in srgb, var(--app-warm) 82%, var(--app-line)); }
.practice-entry-cue.is-sing-now.is-pulsing .practice-entry-cue-core,
.practice-entry-cue.is-sing-now.is-pulsing .practice-entry-cue-digit strong {
  opacity: 1;
  filter: none;
  animation: none;
}
.practice-entry-cue.is-sing-now .practice-beat-next { border-color: color-mix(in srgb, var(--app-warm) 88%, var(--app-line)); color: color-mix(in srgb, var(--app-warm) 88%, var(--app-text)); background: color-mix(in srgb, var(--app-warm) 16%, var(--app-panel)); animation: practice-beat-sing-now .42s ease-in-out infinite alternate; }
.practice-entry-cue.is-sing-now .practice-beat-next > strong::before { margin-right: 5px; content: '●'; }
.practice-entry-cue .practice-entry-cue-beats { right: 12px; bottom: 5px; left: auto; gap: 4px; transform: none; }
.practice-entry-cue .practice-entry-cue-beats i { width: 14px; }
@keyframes practice-beat-sing-now { from { transform: scale(1); } to { transform: scale(1.018); } }
@keyframes practice-cue-core-in {
  from { opacity: .18; filter: blur(4px); transform: scale(.9); }
  to { opacity: 1; filter: blur(0); transform: scale(1); }
}
@keyframes practice-cue-number-in {
  0% { opacity: .06; filter: blur(8px); transform: translateY(10px) scale(1.38); }
  58% { opacity: 1; filter: blur(0); transform: translateY(-2px) scale(.96); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}
@keyframes practice-cue-gate-left {
  from { opacity: .16; transform: translateX(30px) scaleY(.28); }
  70% { opacity: 1; transform: translateX(-5px) scaleY(1); }
  to { opacity: 1; transform: translateX(0) scaleY(1); }
}
@keyframes practice-cue-gate-right {
  from { opacity: .16; transform: scaleX(-1) translateX(30px) scaleY(.28); }
  70% { opacity: 1; transform: scaleX(-1) translateX(-5px) scaleY(1); }
  to { opacity: 1; transform: scaleX(-1) translateX(0) scaleY(1); }
}
@keyframes practice-cue-breathe {
  from { opacity: .5; transform: translate(-50%, -50%) scale(.88); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .practice-entry-cue,
  .practice-entry-cue::after,
  .practice-entry-cue * { animation: none !important; transition: none !important; }
  .practice-halfbeat-playhead[data-mode="tap"] .practice-lyric-tap-hand { transform: translate3d(calc(-50% + var(--practice-lyric-tap-x, 0px)), var(--practice-lyric-tap-base-y, 0px), 0) rotate(180deg) scale(var(--practice-lyric-tap-user-scale, .6)) !important; }
  .practice-halfbeat-playhead[data-mode="tap"] .practice-lyric-tap-impact { display: none; }
}
.practice-runway-resize {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 0;
  width: 72px;
  height: 12px;
  padding: 0;
  border: 1px solid var(--practice-line);
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  color: var(--practice-muted);
  background: var(--practice-control-strip-bg);
  cursor: ns-resize;
  opacity: .72;
  touch-action: none;
  transform: translateX(-50%);
  transition: opacity .15s ease, background .15s ease;
}
.practice-runway-resize:hover,
.practice-runway-resize:focus-visible { opacity: 1; background: var(--state-hover); }
.practice-runway-resize span,
.practice-runway-resize span::before,
.practice-runway-resize span::after {
  position: absolute;
  left: 50%;
  display: block;
  width: 22px;
  height: 1px;
  background: currentColor;
  content: '';
  transform: translateX(-50%);
}
.practice-runway-resize span { top: 5px; }
.practice-runway-resize span::before { top: -3px; }
.practice-runway-resize span::after { top: 3px; }
.practice-runway-resize small { display: none; }
.practice-lyrics-resize { display: none; }
/* Thin always-on divider; the hit target stays taller than the visible line. */
html[data-layout-mode="desktop"] .practice-lyrics-resize {
  position: absolute;
  z-index: 24;
  left: 50%;
  bottom: 0;
  width: calc(100% - 8px);
  height: 14px;
  min-height: 14px;
  margin-bottom: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--practice-muted);
  background: transparent;
  cursor: ns-resize;
  opacity: 1;
  touch-action: none;
  transform: translateX(-50%);
  transition: color .15s ease, background .15s ease;
}
html[data-layout-mode="desktop"] .practice-lyrics-resize::before {
  width: min(22%, 260px);
  height: 1px;
  background: color-mix(in srgb, var(--practice-line) 78%, transparent);
  content: '';
}
html[data-layout-mode="desktop"] .practice-lyrics-resize:hover,
html[data-layout-mode="desktop"] .practice-lyrics-resize:focus-visible {
  outline: none;
  color: var(--app-accent);
  background: transparent;
}
html[data-layout-mode="desktop"] .practice-lyrics-resize:hover::before,
html[data-layout-mode="desktop"] .practice-lyrics-resize:focus-visible::before {
  background: color-mix(in srgb, var(--app-accent) 42%, var(--practice-line));
}
html[data-layout-mode="desktop"] .practice-lyrics-resize span {
  position: absolute;
  left: 50%;
  width: 22px;
  height: 1px;
  display: block;
  background: currentColor;
  opacity: .55;
  transform: translateX(-50%);
}
html[data-layout-mode="desktop"] .practice-lyrics-resize span::before,
html[data-layout-mode="desktop"] .practice-lyrics-resize span::after {
  display: none;
}
html[data-layout-mode="desktop"] .practice-lyrics-resize:hover span,
html[data-layout-mode="desktop"] .practice-lyrics-resize:focus-visible span {
  opacity: .9;
}
html[data-layout-mode="desktop"] .practice-lyrics-resize small {
  display: none;
}

/* Portrait rehearsal keeps the same resize affordance without spending a
   full row on a labelled bar. The button remains a 14px hit target so mouse,
   touch and keyboard users can still rebalance lyrics and pitch vertically. */
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .practice-lyrics {
  flex: 0 0 var(--practice-lyrics-height, clamp(156px, 20vh, 220px));
  height: var(--practice-lyrics-height, clamp(156px, 20vh, 220px));
  min-height: 110px;
  padding-block: 6px 14px;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .practice-lyrics-resize {
  position: absolute;
  z-index: 24;
  right: 4px;
  bottom: 0;
  left: 4px;
  width: auto;
  height: 14px;
  min-height: 14px;
  margin-bottom: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--practice-muted);
  background: transparent;
  cursor: ns-resize;
  opacity: .62;
  touch-action: none;
  transition: color .15s ease, opacity .15s ease;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .practice-lyrics-resize::before {
  width: 100%;
  height: 1px;
  background: color-mix(in srgb, var(--practice-line) 58%, transparent);
  content: '';
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .practice-lyrics-resize:hover,
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .practice-lyrics-resize:focus-visible {
  outline: none;
  color: var(--app-accent);
  opacity: .92;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .practice-lyrics-resize:hover::before,
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .practice-lyrics-resize:focus-visible::before {
  background: color-mix(in srgb, var(--app-accent) 42%, var(--practice-line));
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .practice-lyrics-resize span {
  position: absolute;
  left: 50%;
  width: 22px;
  height: 1px;
  display: block;
  background: currentColor;
  opacity: .55;
  transform: translateX(-50%);
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .practice-lyrics-resize span::before,
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .practice-lyrics-resize span::after,
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .practice-lyrics-resize small {
  display: none;
}
.practice-pitch-tools {
  position: absolute;
  z-index: 222;
  top: 10px;
  left: 12px;
  right: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  justify-content: flex-start;
  gap: 6px 14px;
  width: auto;
  max-width: none;
  overflow: visible;
  padding: 0 2px;
}
.practice-pitch-tool-group {
  display: inline-flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  align-items: center;
  max-width: 100%;
  gap: 5px;
  padding: 3px 5px;
  border: 1px solid var(--practice-line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--app-panel) 82%, transparent);
}
.practice-pitch-tools button,
.practice-pitch-tools details > summary {
  min-height: 28px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 8px;
  border: 0;
  border-radius: 7px;
  color: var(--practice-text);
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.practice-pitch-tools button:hover,
.practice-pitch-tools details > summary:hover {
  background: var(--state-hover);
}
.practice-pitch-tools button[role="switch"][aria-checked="true"],
.practice-pitch-tools button[aria-expanded="true"] {
  border-color: transparent;
  background: var(--app-accent-soft);
  color: var(--app-accent);
}
.practice-pitch-tools button:disabled { opacity: .45; cursor: not-allowed; }
.practice-pitch-style-picker {
  position: relative;
  min-height: 28px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border-radius: 7px;
  color: var(--practice-text);
  background: transparent;
}
.practice-pitch-style-picker.is-disabled {
  opacity: .45;
  pointer-events: none;
}
.practice-pitch-style-picker > summary {
  list-style: none;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px 0 7px;
  border: 1px solid var(--app-line);
  border-radius: 7px;
  color: var(--app-text);
  background: var(--control-bg);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.practice-pitch-style-picker > summary::-webkit-details-marker { display: none; }
.practice-pitch-style-picker > summary::after {
  margin-left: 2px;
  color: var(--practice-muted);
  content: '⌄';
  font-size: 12px;
}
.practice-pitch-style-picker[open] > summary::after { transform: rotate(180deg); }
.practice-pitch-style-picker:hover > summary,
.practice-pitch-style-picker:focus-within > summary { background: var(--state-hover); }
.practice-pitch-style-picker > summary:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 1px; }
.practice-pitch-style-picker-value {
  min-width: 4.5em;
  max-width: 7.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.practice-pitch-tools:has(.practice-pitch-style-picker[open]) { z-index: 240; }
.practice-pitch-style-menu {
  position: absolute;
  z-index: 250;
  top: calc(100% + 4px);
  left: 0;
  min-width: 148px;
  width: max(148px, 100%);
  max-height: min(320px, calc(100vh - 24px));
  display: grid;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--practice-line);
  border-radius: 8px;
  background: var(--practice-panel);
  box-shadow: 0 12px 32px var(--app-shadow);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.practice-pitch-style-menu > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 6px;
  border-bottom: 1px solid var(--practice-line);
  margin-bottom: 2px;
}
.practice-pitch-style-menu > header strong {
  font-size: 12px;
  font-weight: 750;
  color: var(--app-muted);
}
.practice-pitch-style-menu > button {
  min-height: 32px;
  width: 100%;
  justify-content: flex-start;
  padding: 0 10px;
  border: 0;
  border-radius: 5px;
  color: var(--app-text);
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.practice-pitch-style-menu > button:hover,
.practice-pitch-style-menu > button:focus-visible {
  outline: none;
  background: var(--state-hover);
}
.practice-pitch-style-menu > button.is-active,
.practice-pitch-style-menu > button[aria-selected="true"] {
  border: 1px solid color-mix(in srgb, var(--app-accent) 48%, var(--app-line));
  background: var(--app-accent-soft);
  color: var(--app-accent);
}
.practice-pitch-tools[data-pitch-tools-mode="text"] [data-toolbar-control] .practice-toolbar-icon { display: none; }
.practice-pitch-tools[data-pitch-tools-mode="icons"] [data-toolbar-control] .practice-toolbar-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Keep the whole-character highlight toggle readable in icon mode. */
.practice-pitch-tools[data-pitch-tools-mode="icons"] .practice-character-lyrics-toggle {
  width: auto;
  min-width: 44px;
  padding-inline: 7px;
}
.practice-pitch-tools[data-pitch-tools-mode="icons"] .practice-character-lyrics-toggle .practice-toolbar-icon {
  display: none;
}
.practice-pitch-tools[data-pitch-tools-mode="icons"] .practice-character-lyrics-toggle .practice-toolbar-label {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: unset;
  clip-path: none;
  white-space: nowrap;
  border: 0;
  font-size: 12px;
  font-weight: 800;
}
.practice-character-lyrics-toggle[aria-checked="false"] {
  color: var(--practice-muted);
}
/* Native selects expose all modes without cycling or adding a toolbar row. */
.practice-studio select[data-control="character-lyrics-mode"],
.practice-studio .practice-pitch-tools select[data-control="character-lyrics-mode"] {
  flex: 0 0 auto;
  width: 72px;
  min-width: 72px;
  min-height: 30px;
  padding: 4px 7px;
  border: 1px solid var(--practice-line);
  border-radius: 8px;
  background: var(--button-secondary-bg);
  color: var(--practice-text);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
}
.practice-studio select[data-control="character-lyrics-mode"][data-highlight-enabled="true"] {
  border-color: var(--button-accent-border);
  background: var(--button-accent-bg);
  color: var(--button-accent-text);
}
.practice-studio select[data-control="character-lyrics-mode"]:focus-visible {
  outline: 2px solid var(--app-accent);
  outline-offset: 2px;
}
.practice-studio select[data-control="character-lyrics-mode"] option {
  color: var(--app-text);
  background: var(--app-panel);
}
/* Optional duration-based karaoke wipe; measure boundaries never split colors. */
:is(.practice-lyric-char, .practice-beat-lyric-char).is-fill-progress {
  --char-rest-color: var(--practice-lyric-primary-upcoming-user, var(--app-text));
}
.practice-lyric-comparison-char.is-fill-progress,
[data-beat-lyric-row="comparison"] .practice-beat-lyric-char.is-fill-progress {
  --char-rest-color: var(--practice-lyric-comparison-upcoming-user, var(--app-text));
}
/* The shared media frame supplies --char-fill. A hard color stop wipes each
   glyph from left to right without introducing an independent CSS clock. */
#practiceStudio :is(.practice-lyric-char, .practice-lyric-comparison-char, .practice-beat-lyric-char).is-fill-progress,
#practiceStudio .is-fill-progress > :is(.practice-lyric-glyph, .practice-lyric-jyutping),
#practiceStudio .practice-halfbeat-lyric-item.is-fill-progress :is(.practice-halfbeat-lyric-copy, .practice-halfbeat-original-char) {
  background-image: linear-gradient(to right, var(--char-sung-color, var(--char-current-color)) 0 var(--char-fill, 0%), var(--char-rest-color) var(--char-fill, 0%) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.is-fill-progress.played,
.practice-halfbeat-lyric-item.is-fill-progress.is-lyric-past :is(.practice-halfbeat-lyric-copy, .practice-halfbeat-original-char) {
  --char-sung-color: var(--char-played-color);
}
:is(.practice-lyric-char, .practice-beat-lyric-char).is-fill-progress {
  --char-current-color: var(--practice-lyric-primary-current-user, var(--app-accent));
  --char-played-color: var(--practice-lyric-primary-played-user, var(--app-muted));
}
.practice-lyric-comparison-char.is-fill-progress,
[data-beat-lyric-row="comparison"] .practice-beat-lyric-char.is-fill-progress {
  --char-current-color: var(--practice-lyric-comparison-current-user, var(--app-accent));
  --char-played-color: var(--practice-lyric-comparison-played-user, var(--app-muted));
}
.practice-halfbeat-lyric-item.is-fill-progress .practice-halfbeat-lyric-copy {
  --char-rest-color: var(--practice-lyric-primary-upcoming-user, var(--app-text));
  --char-current-color: var(--practice-lyric-primary-current-user, var(--app-accent));
  --char-played-color: var(--practice-lyric-primary-played-user, var(--app-muted));
}
.practice-halfbeat-lyric-item.is-fill-progress .practice-halfbeat-original-char {
  --char-rest-color: var(--practice-lyric-comparison-upcoming-user, var(--app-text));
  --char-current-color: var(--practice-lyric-comparison-current-user, var(--app-accent));
  --char-played-color: var(--practice-lyric-comparison-played-user, var(--app-muted));
}
.practice-pitch-tools[data-pitch-tools-mode="icons"] button[data-toolbar-control],
.practice-pitch-tools[data-pitch-tools-mode="icons"] details > summary[data-toolbar-control] {
  position: relative;
  width: 34px;
  min-width: 34px;
  padding-inline: 0;
}
.practice-pitch-tools[data-pitch-tools-mode="icons"] .practice-pitch-style-picker > summary[data-toolbar-control] {
  width: auto;
  min-width: 0;
  padding-inline: 8px;
}
.practice-pitch-tools[data-pitch-tools-mode="icons"] .practice-pitch-more > summary::after { display: none; }
.practice-pitch-tools[data-pitch-tools-mode="icons"] { gap: 6px 16px; }
.practice-pitch-tools[data-pitch-tools-mode="text"] { gap: 6px 12px; }
.practice-pitch-tools[data-pitch-tools-mode="text"] .practice-pitch-tool-group {
  background: color-mix(in srgb, var(--app-panel) 92%, transparent);
}
.practice-runway:has(.practice-pitch-tools[data-pitch-tools-mode="text"]) .practice-runway-pitch-editbar { top: 92px; }
.practice-runway:has(.practice-pitch-tools[data-pitch-tools-mode="text"]) .practice-pitch-coverage { top: 98px; }
.practice-pitch-tools .practice-pitch-tools-mode-toggle {
  border: 1px dashed color-mix(in srgb, var(--app-line) 70%, transparent);
}
.practice-pitch-tools .practice-pitch-metronome-toggle[aria-checked="true"],
.practice-pitch-tools .practice-pitch-beat-guide-toggle[aria-checked="true"] {
  background: var(--app-accent-soft);
  color: var(--app-accent);
}
.practice-pitch-more { position: relative; flex: 0 0 auto; }
.practice-pitch-tools:has(.practice-pitch-more[open]) { z-index: 240; }
.practice-pitch-more[open] { z-index: 20; }
.practice-pitch-more > summary {
  list-style: none;
}
.practice-pitch-more > summary::-webkit-details-marker { display: none; }
.practice-pitch-more > summary::after { margin-left: 7px; color: var(--practice-muted); content: '⌄'; }
.practice-pitch-tools[data-pitch-tools-mode="text"] .practice-pitch-more > summary::after { display: inline; }
.practice-pitch-more[open] > summary::after { transform: rotate(180deg); }
.practice-pitch-more > div {
  position: fixed;
  z-index: 240;
  top: var(--practice-more-top, 8px);
  right: auto;
  left: var(--practice-more-left, 8px);
  width: 248px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  display: grid;
  gap: 5px;
  padding: 7px;
  border: 1px solid var(--practice-line);
  border-radius: 6px;
  background: var(--practice-panel);
  box-shadow: 0 12px 32px var(--app-shadow);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.practice-pitch-more > div button { width: 100%; min-width: 0; justify-content: flex-start; overflow: visible; text-align: left; white-space: nowrap; }
.practice-pitch-more-section {
  display: grid;
  gap: 5px;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--practice-line);
}
.practice-pitch-more-heading {
  color: var(--practice-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.practice-pitch-more-section label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 28px;
  color: var(--practice-text);
  font-size: 11px;
  font-weight: 700;
}
.practice-pitch-more-section select {
  min-width: 88px;
  padding: 2px 6px;
  border: 1px solid var(--practice-line);
  border-radius: 4px;
  color: var(--practice-text);
  background: var(--button-secondary-bg);
  font: inherit;
}
.practice-pitch-more-section .practice-metronome-volume input { width: 72px; accent-color: var(--app-accent); cursor: pointer; }
.practice-pitch-more-section .practice-metronome-timing input { width: 88px; accent-color: var(--app-accent); cursor: pointer; }
.practice-pitch-more-section .practice-metronome-timing output { min-width: 54px; color: var(--app-text); font-variant-numeric: tabular-nums; }
.practice-runway-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; background: var(--practice-overlay-bg); }
.practice-runway-empty strong { font-size: 16px; }
.practice-runway-empty button,
.practice-empty button { height: 34px; padding: 0 14px; border: 1px solid color-mix(in srgb, var(--app-warm) 52%, var(--app-line)); border-radius: 5px; color: var(--app-on-warm); background: var(--practice-amber); font-weight: 700; cursor: pointer; }
.practice-analysis-progress { display: grid; grid-template-columns: minmax(180px, 280px) auto auto; align-items: center; gap: 7px 10px; min-width: min(340px, calc(100vw - 48px)); }
.practice-analysis-progress[hidden] { display: none; }
.practice-analysis-progress > div { height: 6px; overflow: hidden; border-radius: 3px; background: var(--app-panel-2); }
.practice-analysis-progress > div span { display: block; width: 0; height: 100%; background: var(--app-warm); transition: width .18s ease; }
.practice-analysis-progress output { color: var(--app-text); font: 10px var(--font-family-mono); }
.practice-analysis-progress [data-action="cancel-pitch"] { min-height: 28px; padding: 0 10px; border: 1px solid var(--app-line); border-radius: 5px; background: var(--app-panel); color: var(--app-text); }
.practice-analysis-progress [data-action="cancel-pitch"][hidden] { display: none; }
.practice-analysis-progress small { grid-column: 1 / -1; color: var(--app-muted); font-size: 10px; text-align: center; }
.practice-timeline { position: relative; z-index: 222; display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; align-items: center; gap: 10px; min-height: 40px; color: var(--practice-muted); background: var(--practice-stage-bg); font-variant-numeric: tabular-nums; font-size: 11px; }
.practice-timeline-label { display: none; }
.practice-timeline-lyric-tip {
  position: fixed;
  z-index: var(--app-layer-coach, 2147483598);
  max-width: min(560px, calc(100vw - 16px));
  padding: 9px 14px;
  border: 1px solid var(--app-line);
  border-radius: var(--control-radius);
  background: var(--app-panel);
  color: var(--app-text);
  box-shadow: var(--app-popover-shadow);
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  overflow-wrap: anywhere;
  pointer-events: none;
}
.practice-timeline-lyric-tip[hidden] { display: none; }
.practice-timeline-overview {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 22px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--practice-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--app-panel-2) 86%, var(--app-bg));
}
.practice-timeline-overview::before {
  position: absolute;
  z-index: 0;
  inset: 0 auto 0 0;
  width: var(--practice-seek-progress, 0%);
  background: color-mix(in srgb, var(--app-accent) 16%, var(--app-panel-2));
  content: "";
  pointer-events: none;
}
.practice-timeline-overview[data-vocal-overview-state="loading"] { opacity: .78; }
.practice-timeline-overview:focus-within {
  outline: 2px solid color-mix(in srgb, var(--app-accent) 72%, var(--app-panel));
  outline-offset: 2px;
}
.practice-timeline-overview canvas {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.practice-timeline-overview input {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
}
.practice-timeline-overview input::-webkit-slider-runnable-track {
  height: 100%;
  border: 0;
  background: none;
}
.practice-timeline-overview input::-moz-range-track,
.practice-timeline-overview input::-moz-range-progress {
  height: 100%;
  border: 0;
  background: none;
}
.practice-timeline-overview input::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 2px solid var(--practice-bg);
  border-radius: 50%;
  background: var(--practice-coral);
}
/* The seek bar stays on the stage while the maximized lesson owns the
   transport footer. Keep it below the floating surface and reserve its strip
   in the geometry; it must never paint over playback or recording buttons. */
.practice-studio[data-beat-guide-maximized="true"] .practice-timeline { z-index: 214; }

.practice-recording-takes[hidden] { display: none !important; }
.practice-studio.input-clipping [data-meter-label] { color: var(--state-danger-text); font-weight: 800; }
.practice-studio.mic-connecting [data-meter-label] {
  color: var(--app-accent);
  font-weight: 800;
  animation: practice-mic-connecting .72s ease-in-out infinite alternate;
}
@keyframes practice-mic-connecting { from { opacity: .52; } to { opacity: 1; } }
.practice-recording-takes { flex: 0 1 clamp(132px, 28vh, 286px); min-height: 132px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--practice-line); border-radius: 7px; background: var(--practice-canvas-bg); }
.practice-recording-takes > header { min-height: 70px; display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 5px; padding: 6px 10px; border-bottom: 1px solid var(--practice-line); background: var(--practice-control-strip-bg); }
.practice-recording-takes > header > div:first-child { display: flex; align-items: baseline; gap: 9px; min-width: 0; white-space: nowrap; }
.practice-recording-takes > header > div:first-child span { color: var(--app-faint); font: 800 12px var(--font-family-mono); letter-spacing: .1em; }
.practice-recording-takes > header > div:first-child strong { color: var(--practice-text); font-size: 12px; }
.practice-recording-takes > header > div:first-child small { margin-left: auto; color: var(--app-faint); font-size: 12px; }
.practice-recording-layout-toggle { min-height: 26px; flex: 0 0 auto; padding: 0 9px; border: 1px solid var(--button-accent-border); border-radius: 4px; color: var(--button-accent-text); background: var(--button-accent-bg); font: inherit; font-size: 12px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.practice-recording-layout-toggle:hover { background: var(--button-accent-bg-hover); }
.practice-recording-layout-toggle[aria-pressed="true"] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--button-accent-text) 22%, transparent); }
.practice-recording-take-tools { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 6px; min-width: 0; overflow-x: auto; padding-bottom: 3px; scrollbar-width: thin; }
.practice-recording-take-tools > span { display: inline-flex; gap: 5px; margin-right: 4px; color: var(--practice-muted); font-size: 12px; white-space: nowrap; }
.practice-recording-take-tools > span strong { color: var(--practice-text); font-variant-numeric: tabular-nums; }
.practice-recording-take-tools > .practice-recording-live-hint { display: none; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--state-danger-line); border-radius: 5px; color: var(--practice-text); background: var(--state-danger-bg); font-weight: 750; }
.practice-recording-live-hint b { color: var(--state-danger-text); animation: practice-recording-dot 1s ease-in-out infinite; }
.practice-studio[data-transport-state="recording"] .practice-recording-take-tools > :not(.practice-recording-live-hint) { display: none; }
.practice-studio[data-transport-state="recording"] .practice-recording-take-tools > .practice-recording-live-hint { display: inline-flex; }
.practice-recording-tool-group { display: inline-flex; align-items: center; gap: 3px; padding: 2px; border: 1px solid var(--practice-line); border-radius: 5px; background: color-mix(in srgb, var(--practice-panel) 72%, transparent); }
.practice-recording-tool-group small { padding: 0 6px; color: var(--app-faint); font-size: 12px; font-weight: 800; letter-spacing: .08em; white-space: nowrap; }
.practice-recording-take-tools button { min-height: 32px; padding: 0 10px; border: 1px solid var(--practice-line); border-radius: 4px; color: var(--practice-text); background: var(--button-secondary-bg); font: inherit; font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.practice-recording-take-tools button:hover:not(:disabled) { border-color: var(--button-accent-border); background: var(--state-hover); }
.practice-recording-take-tools button.is-active { border-color: var(--app-accent); color: var(--button-accent-text); background: var(--button-accent-bg); }
.practice-recording-take-tools button:disabled { opacity: .42; cursor: not-allowed; }
.practice-recording-take-tools button[aria-pressed="true"] { border-color: var(--button-accent-border); color: var(--button-accent-text); background: var(--button-accent-bg); }
.practice-studio.recording-toolbar-icons .practice-recording-take-tools button[data-icon] { width: 34px; min-width: 34px; padding-inline: 0; overflow: hidden; font-size: 0; text-align: center; }
.practice-studio.recording-toolbar-icons .practice-recording-take-tools button[data-icon]::before { content: attr(data-icon); display: inline-block; color: currentColor; font-size: 13px; font-weight: 850; line-height: 1; }
.practice-studio.recording-toolbar-icons .practice-recording-tool-group { gap: 2px; }
.practice-studio.recording-toolbar-icons .practice-recording-tool-group small { padding-inline: 5px; }
.practice-punch-settings { position: relative; }
.practice-punch-settings { flex: 0 0 auto; }
.practice-punch-settings > summary { display: grid; place-items: center; min-height: 32px; padding: 0 8px; border: 1px solid var(--practice-line); border-radius: 4px; color: var(--practice-text); background: var(--button-secondary-bg); cursor: pointer; font-size: 12px; white-space: nowrap; list-style: none; }
.practice-punch-settings > summary::-webkit-details-marker { display: none; }
.practice-punch-settings > div { position: absolute; z-index: 18; top: calc(100% + 5px); right: 0; width: 250px; display: grid; gap: 8px; padding: 10px; border: 1px solid var(--practice-line); border-radius: 6px; color: var(--practice-muted); background: var(--practice-panel); box-shadow: 0 12px 28px color-mix(in srgb, var(--app-bg) 62%, transparent); }
.practice-punch-settings > div > div { display: flex; gap: 4px; }
.practice-punch-settings label { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 8px; font-size: 12px; }
.practice-punch-settings select { min-height: 28px; }
.practice-recording-recovery { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--status-warning-border); color: var(--status-warning-text); background: var(--status-warning-bg); }
.practice-recording-recovery[hidden] { display: none; }
.practice-recording-recovery > div { display: grid; gap: 2px; }
.practice-recording-recovery strong { font-size: 11px; }
.practice-recording-recovery span { font-size: 9px; }
.practice-recording-recovery button { min-height: 30px; padding: 0 10px; border: 1px solid var(--status-warning-border); border-radius: 4px; color: inherit; background: var(--button-secondary-bg); cursor: pointer; }
.practice-recording-takes.is-recovery-only { flex: 0 0 auto; min-height: 0; }
.practice-recording-takes.is-recovery-only > header,
.practice-recording-takes.is-recovery-only .practice-recording-take-scroll { display: none; }
.practice-recording-take-zoom { padding-left: 6px; border-left: 1px solid var(--practice-line); }
.practice-recording-take-scroll { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; }
.practice-recording-next[hidden] { display: none; }
.practice-recording-next {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-top: 1px solid color-mix(in srgb, var(--app-accent) 42%, var(--practice-line));
  background: color-mix(in srgb, var(--app-accent-soft) 62%, var(--practice-panel));
}
.practice-recording-next > div:first-child { display: grid; min-width: 0; gap: 2px; }
.practice-recording-next > div:first-child span { color: var(--app-accent); font: 800 9px var(--font-family-mono); letter-spacing: .1em; }
.practice-recording-next > div:first-child strong { overflow: hidden; color: var(--practice-text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.practice-recording-next > div:first-child small { overflow: hidden; color: var(--practice-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.practice-recording-next-actions { display: flex; align-items: center; gap: 6px; }
.practice-recording-next-actions button { min-height: 34px; padding: 0 11px; border: 1px solid var(--practice-line); border-radius: 6px; color: var(--practice-text); background: var(--button-secondary-bg); font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.practice-recording-next-actions button:hover { border-color: var(--button-accent-border); background: var(--button-secondary-bg-hover); }
.practice-recording-next-actions .practice-recording-next-primary { border-color: var(--button-accent-border); color: var(--app-accent-ink); background: var(--app-accent); }
.practice-recording-next-actions .practice-recording-next-primary:hover { background: color-mix(in srgb, var(--app-accent) 86%, var(--app-text)); }
.practice-recording-take-lanes { width: max-content; min-width: 100%; min-height: 100%; display: flex; flex-direction: column; }
.practice-recording-selection-ruler {
  position: sticky;
  z-index: 9;
  top: 0;
  width: max-content;
  min-width: 100%;
  min-height: 34px;
  flex: 0 0 34px;
  display: grid;
  grid-template-columns: 116px var(--take-timeline-width);
  border-bottom: 1px solid var(--practice-line);
  color: var(--practice-muted);
  background: var(--practice-control-strip-bg);
}
.practice-recording-selection-ruler > div:first-child {
  display: grid;
  align-content: center;
  gap: 1px;
  padding: 0 9px;
  border-right: 1px solid var(--practice-line);
}
.practice-recording-selection-ruler strong { color: var(--practice-text); font-size: 9px; }
.practice-recording-selection-ruler small { color: var(--app-faint); font-size: 8px; }
.practice-recording-ruler-timeline {
  position: relative;
  overflow: hidden;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--app-line) 72%, transparent) 0 1px, transparent 1px 5%);
  cursor: crosshair;
  touch-action: none;
}
.practice-recording-ruler-timeline::before {
  content: '拖动标尺选择时间范围';
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 12px;
  color: var(--app-faint);
  font-size: 8px;
  transform: translateY(-50%);
  pointer-events: none;
}
.practice-recording-selection-ruler:has(.practice-recording-selection) .practice-recording-ruler-timeline::before { opacity: 0; }
.practice-recording-take-add {
  width: 100%;
  min-height: 56px;
  flex: 1 1 56px;
  display: grid;
  grid-template-columns: 116px minmax(240px, var(--take-timeline-width));
  align-items: stretch;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--practice-line);
  color: var(--practice-muted);
  background: color-mix(in srgb, var(--practice-panel) 48%, transparent);
  cursor: pointer;
  text-align: left;
}
.practice-recording-take-add > span {
  display: grid;
  place-items: center;
  border-right: 1px dashed var(--practice-line);
  color: var(--app-accent);
  font-size: 18px;
  font-weight: 800;
}
.practice-recording-take-add > strong {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px dashed transparent;
  color: var(--practice-muted);
  font-size: 10px;
  font-weight: 750;
}
.practice-recording-take-add > strong small { color: var(--app-faint); font-size: 9px; font-weight: 600; }
.practice-recording-take-add:hover,
.practice-recording-take-add:focus-visible { outline: none; background: color-mix(in srgb, var(--app-accent) 7%, var(--practice-panel)); }
.practice-recording-take-add:hover > strong,
.practice-recording-take-add:focus-visible > strong { border-color: color-mix(in srgb, var(--app-accent) 42%, var(--practice-line)); color: var(--practice-text); }
.practice-recording-take-row { width: max-content; min-width: 100%; min-height: var(--practice-recording-row-height, 68px); flex: 0 0 var(--practice-recording-row-height, 68px); display: grid; grid-template-columns: 116px var(--take-timeline-width); border-bottom: 1px solid var(--practice-line); }
.practice-recording-take-name { position: sticky; z-index: 7; left: 0; display: grid; grid-template-columns: 9px minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; gap: 2px 7px; padding: 7px 9px; border: 0; border-right: 1px solid var(--practice-line); color: inherit; background: var(--practice-panel); cursor: pointer; text-align: left; }
.practice-recording-take-row.is-selected .practice-recording-take-name { background: color-mix(in srgb, var(--app-accent) 9%, var(--practice-panel)); }
.practice-recording-take-row.is-record-target .practice-recording-take-name { box-shadow: inset 3px 0 var(--app-accent); }
.practice-recording-take-row.is-record-target .practice-recording-take-name small { color: var(--app-accent); font-weight: 800; }
.practice-recording-take-row.is-muted .practice-recording-lane-timeline { opacity: .38; }
.practice-recording-take-row.is-solo .practice-recording-take-name { box-shadow: inset 3px 0 var(--app-warm); }
.practice-recording-take-name i { grid-row: 1 / -1; align-self: center; width: 7px; height: 7px; border-radius: 50%; background: var(--app-faint); }
.practice-recording-take-row.is-recording .practice-recording-take-name i { background: var(--state-danger-text); box-shadow: 0 0 8px color-mix(in srgb, var(--state-danger-text) 56%, transparent); animation: practice-recording-dot 1s ease-in-out infinite; }
.practice-recording-take-name strong { overflow: hidden; color: var(--practice-text); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.practice-recording-take-name small { color: var(--app-faint); font-size: 8px; }
.practice-recording-lane-timeline { position: relative; min-width: 0; overflow: hidden; background: repeating-linear-gradient(90deg, transparent 0, transparent 41px, color-mix(in srgb, var(--app-line) 42%, transparent) 42px); cursor: crosshair; }
.practice-recording-lane-timeline canvas { position: absolute; z-index: 1; inset: 5px 0; width: 100%; height: calc(100% - 10px); pointer-events: none; }
.practice-recording-selection { position: absolute; z-index: 1; top: 0; bottom: 0; left: var(--selection-left); width: var(--selection-width); border-inline: 1px solid var(--app-warm); background: color-mix(in srgb, var(--app-warm) 14%, transparent); pointer-events: none; }
.practice-recording-take-clip { position: absolute; z-index: 2; top: 5px; bottom: 5px; left: var(--take-left); width: var(--take-width); min-width: 4px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--practice-cyan) 42%, var(--practice-line)); border-radius: 3px; color: var(--practice-text); background: color-mix(in srgb, var(--practice-cyan) 8%, transparent); cursor: grab; text-align: left; touch-action: none; }
.practice-recording-comp-row { position: sticky; z-index: 5; top: 34px; min-height: max(64px, var(--practice-recording-row-height, 68px)); background: var(--practice-panel); box-shadow: 0 1px var(--practice-line); }
.practice-recording-comp-row .practice-recording-take-name { cursor: default; background: color-mix(in srgb, var(--app-accent) 9%, var(--practice-panel)); }
.practice-recording-comp-row .practice-recording-take-name i { background: var(--app-accent); box-shadow: 0 0 8px color-mix(in srgb, var(--app-accent) 50%, transparent); }
.practice-recording-comp-clip { position: absolute; z-index: 3; top: 8px; bottom: 8px; left: var(--take-left); width: var(--take-width); min-width: 5px; overflow: hidden; border: 1px solid var(--button-accent-border); border-radius: 4px; background: color-mix(in srgb, var(--app-accent) 24%, var(--practice-panel)); }
.practice-recording-comp-clip strong { position: absolute; z-index: 2; top: 4px; left: 6px; color: var(--practice-text); font-size: 8px; white-space: nowrap; }
.practice-recording-comp-clip i { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--app-accent) 22%, transparent) 8%, color-mix(in srgb, var(--app-accent) 22%, transparent) 92%, transparent); }
.practice-recording-take-clip.is-selected { border-color: var(--app-accent); background: color-mix(in srgb, var(--app-accent) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-accent) 24%, transparent); }
.practice-studio.is-dragging-recording-take,
.practice-studio.is-dragging-recording-take .practice-recording-take-clip { cursor: grabbing; user-select: none; }
.practice-recording-takes.is-previewing { border-color: color-mix(in srgb, var(--app-accent) 58%, var(--practice-line)); }
.practice-recording-take-clip span { position: absolute; top: 3px; left: 5px; overflow: hidden; max-width: calc(100% - 10px); color: var(--practice-muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.practice-recording-lane-cursor { position: absolute; z-index: 4; top: 0; bottom: 0; left: var(--take-cursor); width: 1px; background: var(--practice-playhead); box-shadow: 0 0 7px color-mix(in srgb, var(--practice-playhead) 55%, transparent); pointer-events: none; }
.practice-recording-context-menu[hidden] { display: none; }
.practice-recording-context-menu { position: fixed; z-index: 120; top: var(--context-top); left: var(--context-left); width: 220px; display: grid; gap: 3px; padding: 7px; border: 1px solid var(--practice-line); border-radius: 7px; color: var(--practice-text); background: var(--practice-panel); box-shadow: 0 16px 40px color-mix(in srgb, var(--app-bg) 72%, transparent); }
.practice-recording-context-menu > div { display: grid; gap: 2px; padding: 5px 7px 7px; border-bottom: 1px solid var(--practice-line); }
.practice-recording-context-menu > div strong { font-size: 11px; }
.practice-recording-context-menu > div span { color: var(--practice-muted); font-size: 9px; }
.practice-recording-context-menu button { min-height: 32px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 0 8px; border: 0; border-radius: 4px; color: inherit; background: transparent; cursor: pointer; text-align: left; }
.practice-recording-context-menu button:hover:not(:disabled),
.practice-recording-context-menu button:focus-visible { outline: none; background: var(--state-hover); }
.practice-recording-context-menu button:disabled { opacity: .38; cursor: not-allowed; }
.practice-recording-context-menu kbd { color: var(--app-faint); font: 700 9px var(--font-family-mono); }
.practice-recording-context-menu hr { width: 100%; margin: 3px 0; border: 0; border-top: 1px solid var(--practice-line); }
.practice-beat-lyric-menu-backdrop[hidden] { display: none; }
.practice-beat-lyric-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--app-layer-beat-lyric-menu-backdrop);
  background: transparent;
  pointer-events: auto;
}
.practice-beat-lyric-menu[hidden] { display: none; }
.practice-beat-lyric-menu {
  position: fixed;
  /* Above the movable teaching window and application shell chrome. */
  z-index: var(--app-layer-beat-lyric-menu);
  top: var(--beat-lyric-menu-top);
  left: var(--beat-lyric-menu-left);
  width: min(320px, calc(100vw - 16px));
  max-height: calc(100vh - var(--beat-lyric-menu-top, 8px) - 8px);
  display: grid;
  gap: 6px;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--app-accent) 34%, var(--app-line));
  border-radius: 10px;
  color: var(--app-text);
  background: var(--app-panel);
  box-shadow: 0 18px 46px color-mix(in srgb, var(--app-shadow) 86%, transparent);
  isolation: isolate;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  pointer-events: auto;
  user-select: none;
}
.practice-beat-lyric-menu > header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 6px 8px; border-bottom: 1px solid var(--app-line); }
.practice-beat-lyric-menu > header span { color: var(--app-muted); font-size: 12px; font-weight: 750; }
.practice-beat-lyric-menu > header strong { overflow: hidden; max-width: 148px; color: var(--app-accent); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.practice-beat-lyric-menu form { display: grid; gap: 6px; padding: 4px 5px 8px; border-bottom: 1px solid var(--app-line); }
.practice-beat-lyric-menu form > label { color: var(--app-muted); font-size: 12px; font-weight: 750; }
.practice-beat-lyric-menu form > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.practice-beat-lyric-menu input { min-width: 0; height: 32px; padding: 0 9px; border: 1px solid var(--app-line); border-radius: 5px; color: var(--app-text); background: var(--control-bg); font-size: 14px; font-weight: 800; user-select: text; }
.practice-beat-lyric-menu input:focus { outline: 2px solid color-mix(in srgb, var(--app-accent) 62%, transparent); outline-offset: 1px; border-color: var(--app-accent); }
.practice-beat-lyric-menu form button { min-width: 48px; border: 1px solid var(--button-accent-border); border-radius: 5px; color: var(--button-accent-text); background: var(--button-accent-bg); cursor: pointer; }
.practice-beat-lyric-menu form small { min-height: 0; color: var(--app-muted); font-size: 12px; line-height: 1.35; }
.practice-beat-lyric-menu form [data-beat-lyric-rename-error]:not(:empty) { color: var(--status-danger-text); }
.practice-beat-lyric-menu nav { display: grid; gap: 2px; }
.practice-beat-lyric-menu [data-beat-lyric-menu-selection] {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px;
  padding: 2px 0 7px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--app-line);
}
.practice-beat-lyric-menu [data-beat-lyric-menu-selection] button span {
  font-size: 12px;
  font-weight: 800;
}
.practice-beat-lyric-menu [data-beat-lyric-menu-selection] button[data-beat-lyric-command="select-song"] {
  color: var(--app-accent);
}
.practice-beat-lyric-menu nav button { min-height: 31px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 0 8px; border: 0; border-radius: 4px; color: inherit; background: transparent; cursor: pointer; text-align: left; }
.practice-beat-lyric-menu nav button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.practice-beat-lyric-menu nav button:hover,
.practice-beat-lyric-menu nav button:focus-visible { outline: none; background: var(--state-hover); }
.practice-beat-lyric-menu kbd { color: var(--app-faint); font: 700 8px var(--font-family-mono); }
.practice-beat-lyric-menu-advanced { border-top: 1px solid var(--app-line); }
.practice-beat-lyric-menu-advanced > summary {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  border-radius: 5px;
  color: var(--app-muted);
  background: var(--button-secondary-bg);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
  list-style: none;
}
.practice-beat-lyric-menu-advanced > summary::-webkit-details-marker { display: none; }
.practice-beat-lyric-menu-advanced > summary::after { content: '⌄'; transition: transform 140ms ease; }
.practice-beat-lyric-menu-advanced[open] > summary::after { transform: rotate(180deg); }
.practice-beat-lyric-menu-advanced > nav { gap: 3px; padding-top: 4px; }
.practice-beat-lyric-menu > footer { display: grid; grid-template-columns: 1fr 1.4fr; gap: 6px; padding-top: 2px; }
.practice-beat-lyric-menu > footer button { min-height: 31px; border: 1px solid var(--button-secondary-border); border-radius: 5px; color: var(--button-secondary-text); background: var(--button-secondary-bg); cursor: pointer; }
.practice-beat-lyric-menu > footer button:last-child { border-color: var(--button-accent-border); color: var(--button-accent-text); background: var(--button-accent-bg); }
.practice-beat-lyric-menu button:disabled { opacity: .4; cursor: not-allowed; }
.practice-beat-lyric-reflow[hidden] { display: none !important; }
.practice-floating-popover.is-detached[data-floating-popover="beat-lyric-reflow"] {
  width: min(380px, calc(100vw - 28px)) !important;
  max-width: min(380px, calc(100vw - 28px)) !important;
  z-index: var(--app-layer-beat-lyric-menu) !important;
}
.practice-beat-lyric-reflow > header {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--app-line);
}
.practice-beat-lyric-reflow > header > div { min-width: 0; display: grid; gap: 2px; }
.practice-beat-lyric-reflow > header strong { color: var(--app-text); font-size: 15px; line-height: 1.35; }
.practice-beat-lyric-reflow > header small { color: var(--status-warning-text); font-size: 12px; line-height: 1.4; }
.practice-beat-lyric-reflow > p { margin: 0; color: var(--app-muted); font-size: 12px; line-height: 1.55; }
.practice-beat-lyric-reflow-options { display: grid; gap: 7px; }
.practice-beat-lyric-reflow-options > button,
.practice-beat-lyric-reflow-custom {
  min-height: 54px;
  padding: 9px 10px;
  border: 1px solid var(--button-secondary-border);
  border-radius: 7px;
  color: var(--button-secondary-text);
  background: var(--button-secondary-bg);
}
.practice-beat-lyric-reflow-options > button { display: grid; gap: 3px; text-align: left; cursor: pointer; }
.practice-beat-lyric-reflow-options > button:first-child {
  border-color: color-mix(in srgb, var(--app-accent) 56%, var(--app-line));
  background: color-mix(in srgb, var(--app-accent) 13%, var(--app-panel));
}
.practice-beat-lyric-reflow-options > button:hover,
.practice-beat-lyric-reflow-options > button:focus-visible { outline: none; border-color: var(--app-accent); background: var(--state-hover); }
.practice-beat-lyric-reflow-options button strong { color: var(--app-text); font-size: 13px; }
.practice-beat-lyric-reflow-options button span { color: var(--app-muted); font-size: 12px; line-height: 1.4; }
.practice-beat-lyric-reflow-custom { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; align-items: center; }
.practice-beat-lyric-reflow-custom label { grid-column: 1 / -1; color: var(--app-muted); font-size: 12px; font-weight: 750; }
.practice-beat-lyric-reflow-custom select,
.practice-beat-lyric-reflow-custom button { min-height: 34px; border: 1px solid var(--app-line); border-radius: 6px; color: var(--app-text); background: var(--control-bg); font-size: 12px; }
.practice-beat-lyric-reflow-custom select { min-width: 0; padding: 0 8px; }
.practice-beat-lyric-reflow-custom button { padding: 0 10px; cursor: pointer; }
.practice-beat-lyric-reflow-custom :is(select, button):disabled { opacity: .45; cursor: not-allowed; }
.practice-beat-lyric-reflow > footer { display: flex; justify-content: flex-end; padding-top: 2px; }
.practice-beat-lyric-reflow > footer button { min-height: 34px; padding: 0 11px; border: 1px solid var(--button-secondary-border); border-radius: 6px; color: var(--button-secondary-text); background: var(--button-secondary-bg); font-size: 12px; cursor: pointer; }
@keyframes practice-recording-dot { 50% { opacity: .32; transform: scale(.72); } }

/* Professional recording reallocates the stage: compact lyric/cue, reference runway, scrollable Take lanes. */
.practice-studio.professional-recording-mode .practice-stage { gap: 12px; }
.practice-studio.professional-recording-mode .practice-lyrics { order: 2; flex: 0 0 var(--practice-professional-lyrics-height, 104px); height: var(--practice-professional-lyrics-height, 104px); min-height: 64px; }
.practice-studio.professional-recording-mode .practice-runway { order: 3; flex: 0 0 var(--practice-runway-height, 180px); height: var(--practice-runway-height, 180px); min-height: 108px; max-height: none; }
.practice-studio.professional-recording-mode .practice-recording-takes { order: 4; flex: 1 1 auto; min-height: 200px; max-height: none; }
.practice-studio.professional-recording-mode .practice-accompaniment-pitch-panel { order: 5; }
.practice-studio.professional-recording-mode .practice-timeline { order: 6; flex: 0 0 36px; min-height: 36px; }
.practice-studio.professional-recording-mode .practice-transport { order: 7; }
.practice-studio.professional-recording-mode.recording-focus-mode .practice-runway { flex: 0 0 var(--practice-runway-height, 180px); height: var(--practice-runway-height, 180px); min-height: 108px; }
.practice-studio.professional-recording-mode .practice-runway-resize {
  position: absolute;
  z-index: 12;
  left: 50%;
  bottom: 0;
  width: calc(100% - 24px);
  height: 14px;
  min-height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 7px;
  color: var(--practice-muted);
  background: var(--practice-control-strip-bg);
  cursor: ns-resize;
  opacity: .68;
  touch-action: none;
  transform: translateX(-50%);
  transition: opacity .15s ease, background .15s ease;
}
.practice-studio.professional-recording-mode .practice-runway-resize::before { width: 100%; height: 1px; background: var(--practice-line); content: ''; }
.practice-studio.professional-recording-mode .practice-runway-resize:hover,
.practice-studio.professional-recording-mode .practice-runway-resize:focus-visible { outline: none; opacity: 1; background: var(--state-hover); }
.practice-studio.professional-recording-mode .practice-runway-resize span { position: absolute; top: 4px; left: 50%; width: 34px; height: 1px; background: currentColor; transform: translateX(-50%); }
.practice-studio.professional-recording-mode .practice-runway-resize span::before,
.practice-studio.professional-recording-mode .practice-runway-resize span::after { position: absolute; left: 50%; width: 22px; height: 1px; background: currentColor; content: ''; transform: translateX(-50%); }
.practice-studio.professional-recording-mode .practice-runway-resize span::before { top: 3px; }
.practice-studio.professional-recording-mode .practice-runway-resize span::after { top: 6px; }
.practice-studio.professional-recording-mode .practice-runway-resize small { position: absolute; right: 10px; display: block; padding-inline: 5px; color: var(--practice-muted); background: var(--practice-control-strip-bg); font-size: 8px; opacity: 0; transition: opacity .15s ease; }
.practice-studio.professional-recording-mode .practice-runway-resize:hover small,
.practice-studio.professional-recording-mode .practice-runway-resize:focus-visible small { opacity: 1; }
/* Lyrics divider stays always visible. Runway grip is professional-recording only. */
.practice-lyrics-resize { display: flex !important; opacity: 1; }
.practice-studio.professional-recording-mode .practice-runway-resize { display: flex !important; opacity: .26; }
.practice-lyrics-resize:hover,
.practice-lyrics-resize:focus-visible { opacity: 1; }
.practice-runway-resize:hover,
.practice-runway-resize:focus-visible { opacity: .92; }
.practice-studio.is-resizing-practice-panels,
.practice-studio.is-resizing-practice-panels * { cursor: ns-resize !important; user-select: none !important; }
@media (max-width: 1480px) {
  .practice-recording-takes > header { grid-template-columns: 1fr; }
  .practice-recording-takes > header > div:first-child { align-items: center; gap: 8px; }
  .practice-recording-take-tools { flex-wrap: nowrap; padding-bottom: 2px; }
  .practice-recording-tool-group { flex: 0 0 auto; }
}
.practice-scoreboard {
  min-width: 0;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  border-left: 1px solid var(--practice-line);
  background: var(--practice-panel);
}
.practice-scoreboard-head { display: none; }
.practice-side-tabs { display: none; }
.practice-score-live { display: contents; }
.practice-secondary-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.practice-secondary-panel > summary { display: none; }
.practice-secondary-panel > .practice-scoreboard {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}
.practice-scoreboard > section,
.practice-settings { padding: 17px 18px; border-bottom: 1px solid var(--practice-line); }
.practice-score-primary { text-align: center; }
.practice-score-primary > span { display: block; color: var(--practice-muted); font-size: 11px; }
.practice-score-primary > strong { display: block; margin: 2px 0; color: var(--practice-amber); font: 700 54px/1 var(--font-family-base); }
.practice-score-primary > em { color: var(--practice-muted); font-size: 11px; font-style: normal; }
.practice-score-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.practice-score-grid div { display: grid; gap: 2px; }
.practice-score-grid span { color: var(--practice-muted); font-size: 10px; }
.practice-score-grid strong { font-size: 19px; font-variant-numeric: tabular-nums; }
.practice-section-title { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--practice-muted); font-size: 10px; }
.practice-section-title strong { color: var(--practice-text); font-size: 10px; }
.practice-level-monitor { display: grid; gap: 9px; }
.practice-level-monitor-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.practice-level-monitor-head > div { display: grid; gap: 1px; }
.practice-level-monitor-head strong { color: var(--practice-text); font-size: 12px; }
.practice-level-monitor-head small { color: var(--practice-muted); font-size: 11px; }
.practice-level-monitor-head output { max-width: 156px; padding: 4px 7px; overflow: hidden; border: 1px solid var(--practice-line); border-radius: 5px; color: var(--practice-muted); background: var(--app-panel-2); font-size: 11px; font-weight: 750; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.practice-level-monitor-head output[data-state="safe"] { border-color: var(--status-success-border); color: var(--status-success-text); background: var(--status-success-bg); }
.practice-level-monitor-head output[data-state="warning"] { border-color: var(--status-warning-border); color: var(--status-warning-text); background: var(--status-warning-bg); }
.practice-level-monitor-head output[data-state="danger"] { border-color: var(--status-danger-border); color: var(--status-danger-text); background: var(--status-danger-bg); }
.practice-level-channel { display: grid; gap: 5px; padding: 8px 9px; border: 1px solid var(--practice-line); border-radius: 6px; background: var(--app-panel-2); transition: border-color 120ms ease, background 120ms ease; }
.practice-level-channel[data-state="warning"] { border-color: var(--status-warning-border); background: var(--status-warning-bg); }
.practice-level-channel[data-state="danger"] { border-color: var(--status-danger-border); background: var(--status-danger-bg); }
.practice-level-channel-head,
.practice-level-channel-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.practice-level-channel-head > span { display: inline-flex; align-items: center; gap: 6px; color: var(--practice-text); font-size: 11px; font-weight: 800; }
.practice-level-channel-head > span i { display: grid; width: 25px; height: 20px; place-items: center; border-radius: 4px; color: var(--app-accent); background: color-mix(in srgb, var(--app-accent) 12%, var(--app-panel)); font: 800 11px/1 var(--font-family-mono); font-style: normal; }
.practice-level-channel[data-level-channel="human"] .practice-level-channel-head > span i { color: var(--app-warm); background: color-mix(in srgb, var(--app-warm) 12%, var(--app-panel)); }
.practice-level-channel-head strong { color: var(--practice-text); font: 800 12px/1.2 var(--font-family-mono); font-variant-numeric: tabular-nums; }
.practice-level-track { position: relative; height: 14px; overflow: hidden; border: 1px solid var(--practice-line); border-radius: 4px; background: repeating-linear-gradient(90deg, var(--app-panel) 0, var(--app-panel) calc(20% - 1px), color-mix(in srgb, var(--app-line) 72%, transparent) calc(20% - 1px), color-mix(in srgb, var(--app-line) 72%, transparent) 20%); }
.practice-level-fill { position: absolute; inset: 0 auto 0 0; width: var(--practice-level-width, 0%); border-radius: 3px; background: linear-gradient(90deg, var(--status-success-text) 0 70%, var(--status-warning-text) 70% 90%, var(--status-danger-text) 90% 100%); transition: width 80ms linear; }
.practice-level-peak { position: absolute; top: 1px; bottom: 1px; left: var(--practice-level-peak, 0%); width: 2px; border-radius: 1px; background: var(--app-text); box-shadow: 0 0 0 1px var(--app-panel); transform: translateX(-1px); transition: left 80ms linear; }
.practice-level-channel-foot { color: var(--practice-muted); font: 11px/1.2 var(--font-family-mono); font-variant-numeric: tabular-nums; }
.practice-level-channel-foot em { color: var(--practice-muted); font: inherit; font-weight: 800; font-style: normal; }
.practice-level-channel[data-state="safe"] .practice-level-channel-foot em { color: var(--status-success-text); }
.practice-level-channel[data-state="warning"] .practice-level-channel-foot em { color: var(--status-warning-text); }
.practice-level-channel[data-state="danger"] .practice-level-channel-foot em { color: var(--status-danger-text); }
.practice-level-scale { position: relative; height: 12px; margin-inline: 2px; color: var(--practice-muted); font: 11px/1 var(--font-family-mono); }
.practice-level-scale span { position: absolute; top: 0; transform: translateX(-50%); }
.practice-level-scale span:nth-child(1) { left: 0; transform: none; }
.practice-level-scale span:nth-child(2) { left: 40%; }
.practice-level-scale span:nth-child(3) { left: 70%; }
.practice-level-scale span:nth-child(4) { left: 90%; }
.practice-level-scale span:nth-child(5) { right: 0; transform: none; }
.practice-compression-quick { display: grid; grid-template-columns: auto minmax(70px, 1fr) auto; align-items: center; gap: 6px 8px; padding-top: 2px; }
.practice-compression-quick label { display: inline-flex; align-items: center; gap: 5px; color: var(--practice-text); font-size: 11px; font-weight: 750; white-space: nowrap; }
.practice-compression-quick output { color: var(--app-accent); font: 800 11px var(--font-family-mono); }
.practice-compression-quick input { width: 100%; min-width: 0; accent-color: var(--app-accent); cursor: pointer; }
.practice-compression-quick button { min-height: 28px; padding: 0 9px; border: 1px solid var(--button-accent-border); border-radius: 5px; color: var(--button-accent-text); background: var(--button-accent-bg); font-size: 11px; font-weight: 800; cursor: pointer; }
.practice-compression-quick button:hover { background: var(--button-accent-bg-hover); }
.practice-compression-quick small { grid-column: 1 / -1; color: var(--practice-muted); font-size: 11px; line-height: 1.35; }
.practice-settings summary { cursor: pointer; font-size: 12px; font-weight: 700; }
.practice-settings[open] summary { margin-bottom: 14px; }
.practice-lyric-settings-title { margin-bottom: 10px; color: var(--practice-text); font-size: 10px; font-weight: 800; }
.practice-lyric-settings-title small { margin-left: 6px; color: var(--practice-muted); font-size: 9px; font-weight: 650; }
.practice-lyric-display-settings {
  position: fixed;
  inset: 0;
  z-index: var(--app-layer-dialog, 2147483630);
  pointer-events: none;
}
.practice-lyric-display-settings:not([hidden]) { display: block; }
.practice-lyric-display-settings[hidden] { display: none; }
.practice-lyric-display-settings-backdrop {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: color-mix(in srgb, var(--app-shadow) 28%, transparent);
  cursor: default;
  pointer-events: auto;
}
.practice-lyric-display-settings-panel {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: min(720px, calc(100vw - 32px));
  max-height: min(88vh, 700px);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
  padding: 11px 12px 10px;
  border: 1px solid color-mix(in srgb, var(--app-accent) 34%, var(--practice-line));
  border-radius: 12px;
  color: var(--practice-text);
  background: var(--practice-panel);
  box-shadow: 0 22px 54px color-mix(in srgb, var(--app-shadow) 88%, transparent);
  pointer-events: auto;
}
.practice-lyric-display-settings-panel.is-positioned { transform: none; }
.practice-lyric-display-settings-panel.is-dragging { cursor: grabbing; user-select: none; }
.practice-lyric-display-settings-panel.is-dragging :is(button, input, select, textarea) { pointer-events: none; }
.practice-lyric-display-settings-body {
  min-height: 0;
  overflow-y: auto;
  display: grid;
  gap: 8px;
  padding-right: 3px;
  scrollbar-gutter: stable;
}
.practice-lyric-display-settings-panel > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--practice-line);
  cursor: grab;
}
.practice-lyric-display-settings-panel.is-dragging > header { cursor: grabbing; }
.practice-lyric-display-drag-grip {
  grid-row: 1 / span 2;
  color: var(--practice-muted);
  font-size: 14px;
  line-height: 1;
  user-select: none;
}
.practice-lyric-display-settings-panel > header span:not(.practice-lyric-display-drag-grip) { color: var(--practice-muted); font-size: 12px; font-weight: 750; }
.practice-lyric-display-settings-panel > header strong { grid-column: 2; font-size: 14px; }
.practice-lyric-display-settings-panel > header button {
  grid-column: 3;
  grid-row: 1 / span 2;
  width: 30px;
  height: 30px;
  border: 1px solid var(--practice-line);
  border-radius: 8px;
  color: var(--practice-text);
  background: var(--control-bg);
  cursor: pointer;
}
.practice-lyric-display-settings-note {
  margin: 0;
  color: var(--practice-muted);
  font-size: 12px;
  line-height: 1.45;
}
.practice-lyric-display-schemes {
  margin: 0;
  padding: 0;
  border: 0;
}
.practice-lyric-display-schemes legend {
  margin-bottom: 8px;
  color: var(--practice-muted);
  font-size: 12px;
  font-weight: 750;
}
.practice-lyric-display-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.practice-lyric-display-presets button {
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid var(--practice-line);
  border-radius: 999px;
  color: var(--practice-text);
  background: var(--control-bg);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}
.practice-lyric-display-presets button.is-active,
.practice-lyric-display-presets button[aria-pressed="true"] {
  border-color: var(--button-accent-border);
  color: var(--button-accent-text);
  background: var(--button-accent-bg);
}
.practice-lyric-theme-profile {
  margin-top: 6px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, 30px);
  align-items: center;
  gap: 5px;
  padding: 5px 6px;
  border: 1px solid var(--practice-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--practice-panel-2) 58%, transparent);
}
.practice-lyric-theme-profile > span { min-width: 0; display: flex; align-items: baseline; gap: 7px; }
.practice-lyric-theme-profile strong { overflow: hidden; color: var(--practice-text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.practice-lyric-theme-profile small { overflow: hidden; color: var(--practice-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.practice-lyric-theme-profile > button,
.practice-lyric-display-effect-matrix button,
.practice-lyric-display-effect-options button {
  min-height: 28px;
  padding: 0 7px;
  border: 1px solid var(--practice-line);
  border-radius: 6px;
  color: var(--practice-text);
  background: var(--control-bg);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.practice-lyric-theme-profile > button:disabled { cursor: default; opacity: .42; }
.practice-lyric-theme-profile > button:not(:disabled):hover,
.practice-lyric-theme-profile > button:not(:disabled):focus-visible { border-color: var(--button-accent-border); color: var(--button-accent-text); background: var(--button-accent-bg); outline: none; }
.practice-lyric-display-custom-colors[data-disabled] { opacity: .42; pointer-events: none; }
.practice-lyric-display-row-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.practice-lyric-display-row-picker button {
  min-height: 34px;
  border: 1px solid var(--practice-line);
  border-radius: 8px;
  color: var(--practice-text);
  background: var(--control-bg);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}
.practice-lyric-display-row-picker button.is-active,
.practice-lyric-display-row-picker button[aria-pressed="true"] {
  border-color: var(--button-accent-border);
  color: var(--button-accent-text);
  background: var(--button-accent-bg);
}
.practice-lyric-display-row-hint {
  margin: 0;
  color: var(--practice-muted);
  font-size: 12px;
  line-height: 1.45;
}
.practice-lyric-display-overrides .practice-color-settings { margin-bottom: 4px; }
.practice-lyric-display-typography {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.practice-lyric-display-color-matrix-fieldset,
.practice-lyric-display-cue-colors,
.practice-lyric-display-role-metrics {
  padding: 8px;
  border: 1px solid var(--practice-line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--practice-panel-2) 58%, transparent);
}
.practice-lyric-display-color-matrix {
  display: grid;
  grid-template-columns: 64px repeat(3, 64px) minmax(170px, 1fr) minmax(110px, .65fr);
  grid-auto-flow: row;
  justify-content: start;
  align-items: stretch;
  gap: 4px;
}
.practice-lyric-display-color-matrix > strong {
  min-height: 28px;
  display: grid;
  place-items: center;
  color: var(--practice-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.practice-lyric-display-color-matrix > strong[role="rowheader"] {
  justify-content: start;
  padding-inline: 7px;
  color: var(--practice-text);
}
.practice-lyric-display-color-matrix > label {
  min-width: 0;
  min-height: 38px;
  display: grid;
  place-items: center;
  padding: 4px;
  border: 1px solid var(--practice-line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--practice-panel-2) 72%, transparent);
}
.practice-lyric-display-color-matrix input[type="color"] {
  width: 36px;
  min-width: 36px;
  height: 28px;
  padding: 2px;
  cursor: pointer;
}
.practice-lyric-display-color-matrix > .practice-lyric-display-font-cell {
  justify-items: stretch;
  padding-inline: 6px;
}
.practice-lyric-display-color-matrix > .practice-lyric-display-size-cell {
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
  align-content: center;
  gap: 3px;
  padding-inline: 8px;
}
.practice-lyric-display-size-cell output {
  font-size: 12px;
  text-align: center;
}
.practice-lyric-reader-display-mode {
  min-width: 112px;
  min-height: 32px;
  font-size: 12px;
}
.practice-lyric-reader-role-label {
  font-size: 12px;
  white-space: nowrap;
  padding-inline: 4px;
}
.practice-lyric-display-size-cell input[type="range"] {
  width: 100%;
  min-width: 0;
  margin: 0;
}
.practice-lyric-display-font-cell select {
  width: min(100%, 320px);
  min-width: 0;
  min-height: 30px;
  justify-self: start;
  padding-inline: 9px 28px;
  overflow: hidden;
  color: var(--control-text);
  border: 1px solid var(--control-border);
  border-radius: 6px;
  background: var(--control-bg);
  font-size: 12px;
  text-overflow: ellipsis;
  cursor: pointer;
}
.practice-lyric-display-color-details {
  display: grid;
  grid-template-columns: minmax(170px, .72fr) minmax(0, 1.28fr);
  align-items: stretch;
  gap: 8px;
}
.practice-lyric-display-cue-colors > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.practice-lyric-display-cue-colors label {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
}
.practice-lyric-display-cue-colors label > span { white-space: nowrap; }
.practice-lyric-display-cue-colors input[type="color"] { width: 36px; height: 27px; padding: 2px; }
.practice-lyric-display-cue-colors .practice-lyric-display-color-follow {
  width: 28px;
  min-width: 28px;
  padding: 0;
}
.practice-lyric-display-role-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
}
.practice-lyric-display-lower {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "effects effects"
    "layout pronunciation"
    "lead lead";
  align-items: start;
  gap: 8px 10px;
}
.practice-lyric-display-lower > .practice-lyric-display-schemes,
.practice-lyric-display-motion {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--practice-line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--practice-panel-2) 58%, transparent);
}
.practice-lyric-display-layout { grid-area: layout; }
.practice-lyric-display-motion { grid-area: effects; display: grid; gap: 7px; }
.practice-lyric-display-jyutping { grid-area: pronunciation; }
.practice-lyric-display-visual-lead { grid-area: lead; }
.practice-lyric-display-effect-matrix {
  display: grid;
  grid-template-columns: minmax(72px, .7fr) repeat(3, minmax(78px, 1fr));
  align-items: center;
  gap: 4px;
}
.practice-lyric-display-effect-matrix > strong {
  color: var(--practice-muted);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}
.practice-lyric-display-effect-matrix > strong[role="rowheader"] {
  padding-inline: 3px;
  color: var(--practice-text);
  text-align: left;
}
.practice-lyric-display-effect-matrix button[aria-checked="true"],
.practice-lyric-display-effect-options button[aria-checked="true"],
.practice-lyric-display-effect-options button[aria-pressed="true"] {
  border-color: var(--button-accent-border);
  color: var(--button-accent-text);
  background: var(--button-accent-bg);
}
.practice-lyric-display-effect-options {
  display: grid;
  grid-template-columns: minmax(90px, auto) minmax(72px, 1fr) minmax(90px, auto) minmax(72px, 1fr);
  align-items: center;
  gap: 4px 8px;
  padding-top: 3px;
  border-top: 1px solid color-mix(in srgb, var(--practice-line) 72%, transparent);
}
.practice-lyric-display-effect-options > span { color: var(--practice-muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
.practice-lyric-display-effect-options button { min-width: 72px; }
.practice-lyric-display-jyutping { margin-top: 0; }
.practice-lyric-display-jyutping .practice-lyric-display-row-picker { grid-template-columns: 1fr 1fr; }
.practice-lyric-display-jyutping label { margin-top: 8px; }
.practice-lyric-display-settings-panel > footer { display: flex; justify-content: flex-end; gap: 8px; padding-top: 2px; }
.practice-lyric-display-settings-panel > footer button {
  min-height: 31px;
  padding: 0 14px;
  border: 1px solid var(--button-accent-border);
  border-radius: 8px;
  color: var(--button-accent-text);
  background: var(--button-accent-bg);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.practice-lyric-display-settings-panel label { display: grid; gap: 5px; color: var(--practice-muted); font-size: 12px; font-weight: 700; }
.practice-lyric-display-playhead-color {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}
.practice-lyric-display-color-follow {
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid var(--practice-line);
  border-radius: 7px;
  color: var(--practice-muted);
  background: color-mix(in srgb, var(--practice-panel-2) 72%, transparent);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.practice-lyric-display-color-follow[hidden] { display: none; }
.practice-lyric-display-color-follow[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--app-accent) 52%, var(--practice-line));
  color: var(--app-accent);
}
.practice-lyric-display-color-follow:disabled { cursor: default; opacity: .72; }
.practice-lyric-display-settings-panel input[type="range"] { width: 100%; }

.practice-lyric-reader[hidden],
.practice-lyric-reader-editor-backdrop[hidden] { display: none !important; }
.practice-lyric-reader {
  position: absolute;
  z-index: var(--app-layer-dialog, 2147483630);
  inset: auto;
  left: 16px;
  top: 16px;
  width: min(1040px, calc(100% - 32px));
  height: min(820px, calc(100% - 32px));
  min-width: min(620px, calc(100% - 16px));
  min-height: min(430px, calc(100% - 16px));
  max-width: calc(100% - 16px);
  max-height: calc(100% - 16px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--app-accent) 34%, var(--app-line));
  border-radius: 14px;
  color: var(--app-text);
  background: var(--app-bg);
  box-shadow: 0 22px 64px color-mix(in srgb, var(--app-shadow) 72%, transparent);
}
.practice-studio:not(.secondary-panel-collapsed) .practice-lyric-reader:not([data-geometry-applied="1"]) {
  width: min(980px, calc(100% - var(--practice-side-width) - 32px));
}
.practice-lyric-reader.is-dragging,
.practice-lyric-reader.is-resizing { user-select: none; }
.practice-lyric-reader.is-dragging .practice-lyric-reader-header { cursor: grabbing; }
.practice-lyric-reader.is-resizing { cursor: nwse-resize; }
.practice-lyric-reader-grip {
  align-self: stretch;
  display: grid;
  place-items: center;
  color: var(--app-muted);
  font-size: 18px;
  cursor: grab;
}
.practice-lyric-reader-header {
  min-width: 0;
  display: grid;
  grid-template-columns: 22px minmax(150px, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--app-line);
  background: var(--app-panel);
  box-shadow: 0 5px 18px color-mix(in srgb, var(--app-shadow) 24%, transparent);
  cursor: grab;
}
.practice-lyric-reader-heading { min-width: 0; }
.practice-lyric-reader-heading > strong { display: block; overflow: hidden; font-size: 16px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.practice-lyric-reader-controls { min-width: 0; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px; }
.practice-lyric-reader-controls select { min-width: 0; min-height: 28px; padding-inline: 7px 22px; overflow: hidden; color: var(--app-text); background: var(--control-bg); font-size: 12px; text-overflow: ellipsis; }
.practice-lyric-reader-version-select { width: clamp(112px, 11vw, 138px); }
.practice-lyric-reader-comparison-control { width: clamp(92px, 9vw, 112px); }
.practice-lyric-reader-role-tools { min-height: 32px; display: inline-flex; align-items: center; gap: 3px; padding: 2px; border: 1px solid var(--app-line); border-radius: 7px; background: var(--app-panel-2); }
.practice-lyric-reader-role-tools[data-role-unavailable] { opacity: .46; }
.practice-lyric-reader-role-visibility,
.practice-lyric-reader-order,
.practice-lyric-reader-reset-colors {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--app-line);
  border-radius: 6px;
  color: var(--app-text);
  background: var(--button-secondary-bg);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.practice-lyric-reader-role-visibility[aria-pressed="true"] { border-color: var(--button-accent-border); color: var(--button-accent-text); background: var(--button-accent-bg); }
.practice-lyric-reader-role-visibility[aria-disabled="true"],
.practice-lyric-reader-role-visibility:disabled { cursor: not-allowed; }
.practice-lyric-reader-toggle-slash { opacity: 0; }
.practice-lyric-reader-role-visibility.is-off .practice-lyric-reader-toggle-slash { opacity: 1; }
.practice-lyric-reader-role-visibility.is-required-last { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 40%, transparent); }
.practice-lyric-reader-order { color: var(--app-accent-readable); border-color: color-mix(in srgb, var(--app-accent) 42%, var(--app-line)); }
.practice-lyric-reader-controls svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.practice-lyric-reader-close { width: 30px; height: 30px; flex: 0 0 30px; }
.practice-lyric-reader-font-control { display: inline-flex; align-items: center; gap: 4px; }
.practice-lyric-reader-font-control button {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border: 1px solid var(--app-line);
  border-radius: 6px;
  color: var(--app-text);
  background: var(--button-secondary-bg);
  font-size: 12px;
  font-weight: 760;
  cursor: pointer;
}
.practice-lyric-reader-font-control output { min-width: 38px; color: var(--app-muted); font: 760 12px/1.2 var(--font-family-mono); text-align: center; }
.practice-lyric-reader-color { display: inline-flex; align-items: center; }
.practice-lyric-reader-color input { width: 22px; height: 22px; padding: 1px; border: 1px solid var(--app-line); border-radius: 5px; background: var(--control-bg); cursor: pointer; }
.practice-lyric-reader-role-font { width: clamp(96px, 9.5vw, 116px); font-family: var(--font-family-base); }
.practice-lyric-role-font-select[data-selected-font="harmony"],
.practice-lyric-role-font-select option[value="harmony"] { font-family: var(--practice-lyric-font-harmony); }
.practice-lyric-role-font-select[data-selected-font="noto"],
.practice-lyric-role-font-select option[value="noto"] { font-family: var(--practice-lyric-font-noto); }
.practice-lyric-role-font-select[data-selected-font="songti"],
.practice-lyric-role-font-select option[value="songti"] { font-family: var(--practice-lyric-font-songti); }
.practice-lyric-role-font-select[data-selected-font="kaiti"],
.practice-lyric-role-font-select option[value="kaiti"] { font-family: var(--practice-lyric-font-kaiti); }
.practice-lyric-role-font-select[data-selected-font="wenkai"],
.practice-lyric-role-font-select option[value="wenkai"] { font-family: var(--practice-lyric-font-wenkai); }
.practice-lyric-role-font-select[data-selected-font="mashan"],
.practice-lyric-role-font-select option[value="mashan"] { font-family: var(--practice-lyric-font-mashan); }
.practice-lyric-role-font-select[data-selected-font="longcang"],
.practice-lyric-role-font-select option[value="longcang"] { font-family: var(--practice-lyric-font-longcang); }
.practice-lyric-role-font-select[data-selected-font="zhimang"],
.practice-lyric-role-font-select option[value="zhimang"] { font-family: var(--practice-lyric-font-zhimang); }
.practice-lyric-reader-scroll {
  min-height: 0;
  overflow: auto;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  background: linear-gradient(180deg, color-mix(in srgb, var(--app-panel) 44%, var(--app-bg)), var(--app-bg) 180px);
}
.practice-lyric-reader-lines {
  width: min(1120px, calc(100% - 24px));
  min-height: 100%;
  display: grid;
  align-content: start;
  gap: 4px;
  margin: 0 auto;
  padding: clamp(10px, 2vh, 18px) 0 36px;
  list-style: none;
}
.practice-lyric-reader-pair {
  min-width: 0;
  display: grid;
  grid-template-columns: 30px 44px minmax(0, 1fr);
  align-items: stretch;
  gap: 6px;
}
.practice-lyric-reader-number,
.practice-lyric-reader-pair > time {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding-top: 9px;
  color: var(--app-faint);
  font: 750 11px/1.3 var(--font-family-mono);
  font-variant-numeric: tabular-nums;
}
.practice-lyric-reader-pair > div { min-width: 0; display: grid; gap: 3px; }
.practice-lyric-reader-pair:not(.is-dual) > div { gap: 0; }
.practice-lyric-reader-line {
  --practice-reader-role-color: var(--app-text);
  position: relative;
  min-width: 0;
  min-height: 40px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 8px;
  border: 1px solid var(--app-line);
  border-left: 3px solid var(--practice-reader-role-color);
  border-radius: 7px;
  color: var(--practice-reader-role-color);
  background: color-mix(in srgb, var(--app-panel) 84%, var(--practice-reader-role-color) 16%);
  cursor: text;
}
.practice-lyric-reader-line.is-remix {
  --practice-reader-role-color: var(--practice-lyric-remix-current-user, var(--app-accent));
  border-color: color-mix(in srgb, var(--practice-reader-role-color) 46%, var(--app-line));
  background: color-mix(in srgb, var(--app-panel) 72%, var(--practice-reader-role-color) 28%);
  cursor: pointer;
}
.practice-lyric-reader-line.is-original {
  --practice-reader-role-color: var(--practice-lyric-original-current-user, var(--app-secondary));
  border-style: solid;
  border-color: color-mix(in srgb, var(--practice-reader-role-color) 18%, var(--app-line));
  border-left-style: double;
  background: color-mix(in srgb, var(--app-panel) 95%, var(--practice-reader-role-color) 5%);
}
.practice-lyric-reader-line.is-selected {
  border-color: color-mix(in srgb, var(--practice-reader-role-color) 78%, var(--app-line));
  background: color-mix(in srgb, var(--app-panel) 66%, var(--practice-reader-role-color) 34%);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--practice-reader-role-color) 52%, transparent),
    0 10px 26px color-mix(in srgb, var(--app-shadow) 34%, transparent);
}
.practice-lyric-reader-pair.has-selected-line > .practice-lyric-reader-number,
.practice-lyric-reader-pair.has-selected-line > time { color: var(--app-text); }
.practice-lyric-reader-line:hover,
.practice-lyric-reader-line:focus-visible { border-color: color-mix(in srgb, var(--practice-reader-role-color) 68%, var(--app-line)); background: color-mix(in srgb, var(--app-panel) 78%, var(--practice-reader-role-color) 22%); outline: none; }
.practice-lyric-reader-line > small { color: inherit; font-family: var(--font-family-base); font-size: 12px; font-weight: 780; opacity: .72; }
.practice-lyric-reader-line > span { min-width: 0; color: inherit; font-size: var(--practice-lyric-reader-font-size, 18px); font-weight: 700; line-height: 1.28; letter-spacing: .015em; white-space: pre-wrap; user-select: text; }
.practice-lyric-reader-line.is-remix > span { font-family: var(--practice-lyric-remix-font-family); font-weight: 860; }
.practice-lyric-reader-line.is-original > span { font-family: var(--practice-lyric-original-font-family); font-weight: 640; opacity: .84; }
.practice-lyric-reader-line.is-original > span { font-variation-settings: var(--practice-lyric-original-font-variation); }
.practice-lyric-reader-line.is-remix > span { font-variation-settings: var(--practice-lyric-remix-font-variation); }
.practice-studio[data-lyric-original-font="xiaowei"] [data-lyric-role="original"],
.practice-studio[data-lyric-remix-font="xiaowei"] [data-lyric-role="remix"] { font-synthesis: none; }
.practice-lyric-reader-line.is-original > small { opacity: .58; }
.practice-lyric-reader-section {
  min-width: 0;
  display: grid;
  grid-template-columns: 102px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--app-line);
}
.practice-lyric-reader-section > span { color: var(--app-muted); font-size: 12px; font-weight: 750; text-align: right; }
.practice-lyric-reader-section > strong { color: var(--app-accent-readable); font-size: 14px; letter-spacing: .04em; }
.practice-lyric-reader-empty { min-height: 100%; display: grid; place-content: center; gap: 6px; color: var(--app-muted); text-align: center; }
.practice-lyric-reader-empty strong { color: var(--app-text); font-size: 18px; }
.practice-lyric-reader-empty span { font-size: 12px; }
.practice-lyric-reader-resize-handle {
  position: absolute;
  z-index: 3;
  right: 3px;
  bottom: 3px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  color: var(--app-muted);
  background: color-mix(in srgb, var(--app-panel) 88%, transparent);
  font-size: 16px;
  cursor: nwse-resize;
}
.practice-lyric-reader-editor-backdrop { z-index: 2; }
.practice-lyric-reader-editor { max-height: min(620px, calc(100vh - 40px)); }
.practice-lyric-reader-editor .app-dialog__header > div { display: grid; gap: 2px; }
.practice-lyric-reader-editor .app-dialog__header span { color: var(--app-accent); font-size: 12px; font-weight: 800; letter-spacing: .07em; }
.practice-lyric-reader-editor .app-dialog__body { display: grid; gap: 12px; }
.practice-lyric-reader-editor .app-dialog__body > p { margin: 0; color: var(--app-muted); font-size: 12px; line-height: 1.45; }
.practice-lyric-reader-single-editor { display: grid; gap: 8px; }
.practice-lyric-reader-single-editor[hidden] { display: none !important; }
.practice-lyric-reader-single-editor > small { color: var(--app-muted); font-size: 12px; line-height: 1.45; }
.practice-lyric-reader-editor-field { display: grid; gap: 7px; color: var(--app-text); font-size: 13px; font-weight: 800; }
.practice-lyric-reader-editor-field textarea { width: 100%; min-height: 116px; resize: vertical; color: var(--app-text); background: var(--control-bg); font-size: 17px; line-height: 1.55; }
.practice-lyric-reader-edit-scope { display: grid; gap: 8px; margin: 0; padding: 11px 12px; border: 1px solid var(--status-info-border); border-radius: 8px; color: var(--status-info-text); background: var(--status-info-bg); }
.practice-lyric-reader-edit-scope[hidden] { display: none !important; }
.practice-lyric-reader-edit-scope legend { padding: 0 5px; color: inherit; font-size: 12px; font-weight: 800; }
.practice-lyric-reader-edit-scope label { display: flex; align-items: flex-start; gap: 8px; color: var(--app-text); font-size: 13px; line-height: 1.4; cursor: pointer; }
.practice-lyric-reader-edit-scope input { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; }
.practice-lyric-reader-edit-scope label:has(input:disabled) { cursor: not-allowed; opacity: .58; }
.practice-lyric-reader-find-replace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 11px 12px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-panel-2); }
.practice-lyric-reader-find-replace[hidden] { display: none !important; }
.practice-lyric-reader-find-replace label { min-width: 0; display: grid; gap: 6px; color: var(--app-text); font-size: 12px; font-weight: 800; }
.practice-lyric-reader-find-replace input { width: 100%; min-height: 38px; color: var(--app-text); border: 1px solid var(--app-line); border-radius: 6px; background: var(--control-bg); font-size: 13px; }
.practice-lyric-reader-find-replace p { grid-column: 1 / -1; margin: 0; color: var(--status-info-text); font-size: 12px; line-height: 1.45; }
.practice-lyric-reader-timing-warning { display: grid; gap: 7px; padding: 11px; border: 1px solid var(--status-warning-border); border-radius: 8px; color: var(--status-warning-text); background: var(--status-warning-bg); }
.practice-lyric-reader-timing-warning strong { font-size: 13px; }
.practice-lyric-reader-timing-warning p { margin: 0; color: inherit; font-size: 12px; line-height: 1.5; }
.practice-lyric-reader-timing-warning label { display: flex; align-items: flex-start; gap: 8px; color: inherit; font-size: 12px; line-height: 1.45; }
.practice-lyric-reader-timing-warning input { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; }
.practice-lyric-reader-editor-status[data-state="error"] { color: var(--status-danger-text); }
.practice-lyric-reader-editor-status[data-state="warning"] { color: var(--status-warning-text); }
.practice-lyric-reader-editor-status[data-state="working"] { color: var(--status-info-text); }
.practice-lyric-reader-editor .app-dialog__footer button:last-child { color: var(--button-accent-text); border-color: var(--button-accent-border); background: var(--button-accent-bg); }

@media (max-width: 900px) {
  .practice-lyric-reader { left: 8px; top: 8px; width: calc(100% - 16px); height: calc(100% - 16px); min-width: 0; min-height: 0; }
  .practice-lyric-reader-header { grid-template-columns: 22px minmax(0, 1fr); gap: 10px; }
  .practice-lyric-reader-controls { grid-column: 1 / -1; }
  .practice-lyric-reader-controls { justify-content: flex-start; flex-wrap: wrap; }
  .practice-lyric-reader-find-replace { grid-template-columns: minmax(0, 1fr); }
  .practice-lyric-reader-find-replace p { grid-column: 1; }
  .practice-lyric-reader-pair { grid-template-columns: 34px minmax(0, 1fr); }
  .practice-lyric-reader-pair > time { display: none; }
  .practice-lyric-reader-line { grid-template-columns: 42px minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .practice-lyric-display-settings-panel {
    width: min(520px, calc(100vw - 24px));
  }
  .practice-lyric-display-color-details,
  .practice-lyric-display-lower,
  .practice-lyric-display-typography { grid-template-columns: minmax(0, 1fr); }
  .practice-lyric-display-color-matrix {
    grid-template-columns: 56px repeat(3, minmax(0, 1fr));
  }
  .practice-lyric-display-color-matrix > .practice-lyric-font-heading,
  .practice-lyric-display-color-matrix > .practice-lyric-size-heading { display: none; }
  .practice-lyric-display-color-matrix > .practice-lyric-display-font-cell { grid-column: 1 / 4; }
  .practice-lyric-display-lower {
    grid-template-areas:
      "effects"
      "layout"
      "pronunciation"
      "lead";
  }
  .practice-lyric-display-effect-options { grid-template-columns: minmax(0, 1fr) auto; }
  .practice-lyric-display-role-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-height: 700px) {
  .practice-lyric-display-settings-body { overflow-y: auto; }
}
.practice-live-effects-note {
  margin: -4px 0 10px;
  color: var(--practice-muted);
  font-size: 10px;
  line-height: 1.45;
}
.practice-recording-eq-open,
.practice-recording-eq-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--practice-line);
  border-radius: 999px;
  color: var(--practice-text);
  background: var(--control-bg);
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
.practice-recording-eq-open:hover,
.practice-recording-eq-inline:hover {
  border-color: color-mix(in srgb, var(--app-accent) 42%, var(--app-line));
  background: var(--state-hover);
}
.practice-recording-eq-inline {
  width: 100%;
  margin: 0 0 12px;
  border-radius: 8px;
  min-height: 34px;
}
.practice-readiness > .practice-recording-eq-open { margin-left: 0; flex: 0 0 auto; }
.practice-recording-eq-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--app-layer-dialog, 2147483630);
  padding: 0;
  background: var(--app-dialog-backdrop-bg);
}
.practice-recording-eq-backdrop[hidden] { display: none !important; }
.practice-recording-eq-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  transform: translate(-50%, -50%);
}
.practice-recording-eq-panel.is-positioned {
  transform: none;
}
.practice-recording-eq-panel.is-dragging {
  user-select: none;
}
.practice-recording-eq-panel > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 10px;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.practice-recording-eq-panel > header.is-dragging {
  cursor: grabbing;
}
.practice-recording-eq-panel > header span {
  display: block;
  color: var(--practice-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
}
.practice-recording-eq-panel > header strong {
  display: block;
  margin-top: 4px;
  font-size: 18px;
}
.practice-recording-eq-panel > header button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--practice-line);
  border-radius: 8px;
  color: var(--practice-text);
  background: var(--control-bg);
  font-size: 20px;
  cursor: pointer;
}
.practice-recording-eq-body {
  display: grid;
  gap: 10px;
  min-height: 0;
  padding: 12px 14px 14px;
}
.practice-recording-eq-setup,
.practice-recording-eq-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.practice-recording-device-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--app-accent) 34%, var(--app-line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--app-accent-soft) 54%, var(--app-panel));
}
.practice-recording-device-card > div { display: grid; min-width: 0; gap: 3px; }
.practice-recording-device-card span,
.practice-recording-device-card small { color: var(--practice-muted); font-size: 12px; }
.practice-recording-device-card strong { overflow: hidden; color: var(--practice-text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.practice-recording-device-card button { min-height: 30px; padding: 0 10px; border: 1px solid var(--button-secondary-border); border-radius: 7px; background: var(--button-secondary-bg); color: var(--button-secondary-text); font-size: 12px; font-weight: 800; }
.practice-recording-device-card button:hover { background: var(--button-secondary-bg-hover); }
.practice-recording-eq-body label {
  display: grid;
  gap: 5px;
  color: var(--practice-muted);
  font-size: 12px;
  font-weight: 700;
}
.practice-recording-eq-body label output {
  justify-self: end;
  margin-top: -16px;
  color: var(--practice-text);
}
.practice-recording-eq-body input[type="range"] {
  width: 100%;
  accent-color: var(--practice-cyan);
}
.practice-recording-eq-body .practice-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--practice-muted);
  font-size: 12px;
  font-weight: 700;
}
.practice-recording-eq-body .practice-recording-format {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.practice-recording-eq-presets {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--practice-line);
  border-radius: 10px;
  background: var(--app-panel-2);
}
.practice-recording-eq-preset-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.practice-recording-eq-preset-head > span {
  color: var(--practice-text);
  font-size: 12px;
  font-weight: 800;
}
.practice-recording-eq-preset-head > small {
  color: var(--practice-muted);
  font-size: 12px;
}
.practice-recording-eq-preset-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.practice-recording-eq-preset {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--practice-line);
  border-radius: 999px;
  color: var(--practice-text);
  background: var(--control-bg);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.practice-recording-eq-preset:hover {
  border-color: color-mix(in srgb, var(--app-accent) 42%, var(--app-line));
  background: var(--state-hover);
}
.practice-recording-eq-preset.is-active {
  color: var(--button-accent-text);
  border-color: var(--button-accent-border);
  background: var(--button-accent-bg);
}
.practice-recording-eq-preset.is-custom:not(.is-active) {
  border-style: dashed;
}
.practice-recording-eq-preset-save {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px;
}
.practice-recording-eq-preset-save input {
  min-width: 0;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--practice-line);
  border-radius: 8px;
  color: var(--practice-text);
  background: var(--control-bg);
  font-size: 12px;
}
.practice-recording-eq-preset-save button {
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--practice-line);
  border-radius: 8px;
  color: var(--practice-text);
  background: var(--control-bg);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.practice-recording-eq-preset-save button:hover {
  border-color: color-mix(in srgb, var(--app-accent) 42%, var(--app-line));
  background: var(--state-hover);
}
.practice-recording-eq-preset-save button[hidden] { display: none !important; }
.practice-recording-eq-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 10px 12px;
  min-width: 0;
  padding: 11px 12px 12px;
  border: 1px solid var(--practice-line);
  border-radius: 10px;
  background: var(--app-panel-2);
}
.practice-recording-eq-group-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--practice-line);
}
.practice-recording-eq-group-head strong {
  color: var(--practice-text);
  font-size: 13px;
}
.practice-recording-eq-group-head small {
  color: var(--practice-muted);
  font-size: 12px;
}
.practice-recording-eq-body > .practice-live-effects-note {
  margin: 0;
  padding: 7px 10px;
  border-left: 3px solid var(--app-accent);
  border-radius: 5px;
  background: color-mix(in srgb, var(--app-accent) 7%, var(--app-panel));
}
.practice-recording-eq-group > .practice-latency-suggestion { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .practice-recording-eq-panel {
    width: calc(100% - 20px);
    max-height: calc(100% - 20px);
  }
  .practice-recording-eq-setup,
  .practice-recording-eq-controls { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .practice-recording-eq-panel .practice-recording-device-routing-grid { grid-template-columns: minmax(0, 1fr); }
  .practice-recording-eq-group { grid-template-columns: minmax(0, 1fr); }
  .practice-recording-eq-preset-save { grid-template-columns: minmax(0, 1fr) auto; }
  .practice-recording-eq-preset-save [data-recording-eq-delete-preset] { grid-column: 1 / -1; }
}
html[data-layout-mode="portrait-preview"] .practice-recording-eq-open,
html[data-layout-mode="portrait-native"] .practice-recording-eq-open {
  min-width: 64px;
  padding-inline: 8px;
  font-size: 9px;
}
.practice-setting-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--practice-muted); font-size: 10px; font-weight: 700; }
.practice-compact-switch { min-width: 86px; height: 30px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 7px 0 9px; border: 1px solid var(--practice-line); border-radius: 5px; color: var(--practice-text); background: var(--control-bg); cursor: pointer; }
.practice-compact-switch > i { position: relative; width: 26px; height: 14px; border: 1px solid var(--app-line); border-radius: 999px; background: var(--app-panel-2); }
.practice-compact-switch > i > b { position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--app-muted); transition: transform .16s ease; }
.practice-compact-switch[aria-checked="true"] > i { border-color: var(--button-accent-border); background: var(--app-accent-soft); }
.practice-compact-switch[aria-checked="true"] > i > b { background: var(--app-accent); transform: translateX(12px); }
.practice-color-settings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 13px; }
.practice-color-settings label { min-width: 0; }
.practice-color-settings input[type="color"] { width: 100%; height: 30px; padding: 3px; border: 1px solid var(--app-line); border-radius: 5px; background: var(--control-bg); cursor: pointer; }
.practice-settings label + label { margin-top: 13px; }
.practice-settings label output { justify-self: end; margin-top: -16px; color: var(--practice-text); }
.practice-settings input[type="range"] { width: 100%; accent-color: var(--practice-cyan); }
.practice-settings .practice-check { display: flex; align-items: center; gap: 8px; }
.practice-latency-suggestion {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--app-accent) 42%, var(--app-line));
  border-radius: 10px;
  color: var(--app-text);
  background: color-mix(in srgb, var(--app-accent) 10%, var(--app-panel));
  font-size: 10px;
  line-height: 1.5;
}
.practice-latency-suggestion[hidden] { display: none; }
.practice-latency-suggestion button {
  min-height: 30px;
  border: 1px solid color-mix(in srgb, var(--app-accent) 52%, var(--app-line));
  border-radius: 8px;
  color: var(--app-text);
  background: color-mix(in srgb, var(--app-accent) 18%, var(--app-panel));
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.practice-latency-suggestion button:hover { background: color-mix(in srgb, var(--app-accent) 27%, var(--app-panel)); }
.practice-recording-format { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--app-line); }
.practice-history-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--app-line); }
.practice-history-entry { border-bottom: 1px solid var(--app-line); }
.practice-history-entry .practice-history-row { border-bottom: 0; }
.practice-history-row span { display: flex; align-items: baseline; gap: 7px; }
.practice-history-row strong { color: var(--practice-amber); font-size: 18px; }
.practice-history-row em,
.practice-history-row time,
.practice-history-empty { color: var(--practice-muted); font-size: 10px; font-style: normal; }
.practice-history-empty { padding: 18px 0 4px; text-align: center; }
.practice-history-title-actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
.practice-history-title-actions button,
.practice-recording-manager-toolbar button,
.practice-recording-manager-footer button { min-height: 28px; padding: 0 9px; border: 1px solid var(--button-secondary-border); border-radius: 6px; color: var(--button-secondary-text); background: var(--button-secondary-bg); font: inherit; font-weight: 750; cursor: pointer; }
.practice-history-title-actions button:hover,
.practice-recording-manager-toolbar button:hover,
.practice-recording-manager-footer button:hover:not(:disabled) { border-color: var(--button-accent-border); color: var(--button-accent-text); background: var(--button-secondary-bg-hover); }
.practice-recording-manager-backdrop[hidden] { display: none !important; }
.practice-recording-manager-body { display: flex; flex-direction: column; gap: 12px; }
.practice-recording-manager-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.practice-recording-manager-toolbar > span { margin-left: auto; color: var(--app-muted); font-size: 12px; }
.practice-recording-manager-select-all { display: inline-flex; align-items: center; gap: 7px; color: var(--app-text); font-weight: 750; }
.practice-recording-manager-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.practice-recording-manager-stats > span { display: grid; gap: 3px; min-width: 0; padding: 8px 10px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-panel-2); }
.practice-recording-manager-stats small { color: var(--app-muted); font-size: 12px; }
.practice-recording-manager-stats strong { color: var(--app-text); font-size: 15px; }
.practice-recording-manager-list { display: grid; gap: 6px; min-height: 0; }
.practice-recording-manager-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-panel-2); }
.practice-recording-manager-row:hover { border-color: color-mix(in srgb, var(--app-accent) 42%, var(--app-line)); }
.practice-recording-manager-row > label { display: flex; align-items: center; gap: 9px; min-width: 0; cursor: pointer; }
.practice-recording-manager-row > label > span { display: grid; min-width: 0; gap: 3px; }
.practice-recording-manager-row strong { overflow: hidden; color: var(--app-text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.practice-recording-manager-row small { color: var(--app-muted); font-size: 12px; }
.practice-recording-manager-distribution { overflow: hidden; color: var(--app-accent) !important; text-overflow: ellipsis; white-space: nowrap; }
.practice-recording-manager-row-actions { display: flex; align-items: center; gap: 6px; }
.practice-recording-manager-row-actions button { min-height: 28px; padding: 0 9px; border: 1px solid var(--button-secondary-border); border-radius: 6px; color: var(--button-secondary-text); background: var(--button-secondary-bg); font: inherit; cursor: pointer; }
.practice-recording-manager-row-actions button:hover { border-color: var(--button-accent-border); color: var(--button-accent-text); background: var(--button-secondary-bg-hover); }
.practice-recording-manager-empty { padding: 28px 12px; border: 1px dashed var(--app-line); border-radius: 8px; color: var(--app-muted); text-align: center; }
.practice-recording-manager-footer { justify-content: space-between; }
.practice-recording-manager-footer::before { content: ''; flex: 1 1 auto; }
.practice-recording-manager-danger { border-color: var(--state-danger-line) !important; color: var(--state-danger-text) !important; background: var(--state-danger-bg) !important; }
.practice-recording-manager-footer button:disabled { cursor: not-allowed; opacity: .5; }

/* Historical Take editing owns the studio while open. It is a full workspace,
   rather than a taller rehearsal panel, so recording controls and monitor
   history cannot compete for the same space. */
.practice-take-editor-backdrop[hidden] { display: none !important; }
.practice-take-editor-backdrop { position: fixed; z-index: 299; inset: 0; background: var(--app-bg); pointer-events: auto; }
.practice-studio.take-editor-open { position: fixed; z-index: 300; inset: 0; width: 100vw; height: 100vh; max-height: 100vh; margin: 0; padding: 0; background: var(--app-bg); }
.practice-studio.take-editor-open > :not(.practice-workspace):not(.practice-take-editor-backdrop) { visibility: hidden; pointer-events: none; }
.practice-studio.take-editor-open .practice-workspace { position: relative; z-index: 301; display: block; width: 100%; height: 100%; overflow: visible; }
.practice-studio.take-editor-open .practice-stage { display: block; width: 100%; height: 100%; padding: 0; overflow: visible; }
.practice-studio.take-editor-open .practice-stage > :not(.practice-recording-takes) { display: none !important; }
.practice-studio.take-editor-open .practice-recording-takes { position: absolute; z-index: 302; inset: clamp(14px, 3vh, 32px) clamp(16px, 3vw, 56px); width: auto; height: auto; min-height: 0; max-height: none; display: flex !important; border-color: color-mix(in srgb, var(--app-accent) 42%, var(--app-line)); border-radius: 10px; background: var(--app-panel); box-shadow: 0 20px 60px color-mix(in srgb, var(--app-shadow) 72%, transparent); }
.practice-studio.take-editor-open .practice-recording-takes > header { min-height: 86px; padding: 12px 16px 10px; background: var(--app-panel-2); }
.practice-studio.take-editor-open .practice-recording-takes > header > div:first-child { align-items: center; gap: 12px; flex-wrap: wrap; }
.practice-studio.take-editor-open .practice-recording-takes > header > div:first-child span { color: var(--app-accent); font-size: 12px; }
.practice-studio.take-editor-open .practice-recording-takes > header > div:first-child strong { font-size: 14px; }
.practice-studio.take-editor-open .practice-recording-takes > header > div:first-child small { font-size: 12px; }
.practice-take-editor-reference-bar[hidden] { display: none !important; }
.practice-studio.take-editor-open .practice-take-editor-reference-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 40px; padding: 7px 0 4px; color: var(--app-muted); }
.practice-studio.take-editor-open .practice-take-editor-reference-bar > strong { color: var(--app-text); font-size: 12px; }
.practice-studio.take-editor-open .practice-take-editor-reference-bar button { min-height: 32px; padding: 0 10px; border: 1px solid var(--button-secondary-border); border-radius: 6px; color: var(--button-secondary-text); background: var(--button-secondary-bg); font: inherit; font-size: 12px; cursor: pointer; }
.practice-studio.take-editor-open .practice-take-editor-reference-bar button:hover:not(:disabled),
.practice-studio.take-editor-open .practice-take-editor-reference-bar button:focus-visible { outline: none; border-color: var(--button-accent-border); background: var(--button-secondary-bg-hover); }
.practice-studio.take-editor-open .practice-take-editor-reference-bar button[aria-pressed="true"] { border-color: var(--button-accent-border); color: var(--button-accent-text); background: var(--button-accent-bg); }
.practice-studio.take-editor-open .practice-take-editor-reference-bar button:disabled { opacity: .48; cursor: not-allowed; }
.practice-studio.take-editor-open .practice-take-editor-reference-bar span { color: var(--app-muted); font-size: 12px; }
.practice-studio.take-editor-open .practice-recording-layout-toggle[data-action="save-recording-take-edits"],
.practice-studio.take-editor-open .practice-recording-layout-toggle[data-action="close-take-editor"] { min-height: 34px; font-size: 12px; }
.practice-studio.take-editor-open .practice-recording-takes > header { position: relative; padding-right: 148px; }
.practice-studio.take-editor-open .practice-recording-layout-toggle[data-action="close-take-editor"] {
  position: absolute;
  top: 12px;
  right: 16px;
  margin-left: 0;
  border-color: var(--app-line);
  color: var(--app-text);
  background: var(--app-panel);
}
.practice-studio.take-editor-open .practice-recording-take-tools { padding-bottom: 5px; }
.practice-studio.take-editor-open .practice-recording-take-tools button { min-height: 36px; font-size: 12px; }
.practice-studio.take-editor-open .practice-recording-tool-group small { font-size: 12px; }
.practice-studio.take-editor-open .practice-recording-take-scroll { min-height: 0; }
.practice-studio.take-editor-open .practice-recording-take-lanes { min-height: 100%; }
.practice-studio.take-editor-open .practice-recording-next { display: none; }
@media (max-width: 720px) {
  .practice-studio.take-editor-open .practice-recording-takes { inset: 8px; }
  .practice-studio.take-editor-open .practice-recording-takes > header { min-height: 108px; padding: 10px 126px 10px 10px; }
  .practice-studio.take-editor-open .practice-recording-takes > header > div:first-child small { width: 100%; margin-left: 0; }
  .practice-studio.take-editor-open .practice-recording-layout-toggle[data-action="close-take-editor"] { top: 10px; right: 10px; }
}
@media (max-width: 760px) {
  .practice-recording-manager-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .practice-recording-manager-row { grid-template-columns: minmax(0, 1fr); }
  .practice-recording-manager-row-actions { justify-content: flex-end; }
}
.practice-history-actions { display: flex; gap: 4px; }
.practice-history-actions button { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 0; border: 1px solid var(--app-line); border-radius: 6px; color: var(--app-text); background: var(--button-secondary-bg); cursor: pointer; font-size: 12px; }
.practice-history-actions [data-command-native-icon] { display: inline-flex; align-items: center; justify-content: center; }
.practice-history-actions svg, .practice-live-options svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.practice-live-options [data-command-native-icon] { display: inline-flex; align-items: center; }
.practice-history-actions button:disabled { cursor: wait; opacity: .6; }
.practice-history-actions [data-action="delete-recording"]:hover { color: var(--status-error); }
.practice-history-actions button:hover { background: var(--state-hover); }
.practice-history-actions > :not([data-action="play-recording"]):not([data-action="compare-recording"]):not([data-action="use-punch-take"]):not([data-action="toggle-recording-tools"]):not([data-action="delete-recording"]) { display: none !important; }
.practice-history-actions button:is([data-action="use-punch-take"], .practice-history-tools-toggle) { width: auto; padding: 0 7px; white-space: nowrap; }
.practice-history-tools-toggle[aria-expanded="true"] { border-color: var(--button-accent-border); color: var(--button-accent-text); background: var(--button-accent-bg); }
.practice-history-inline-actions { padding: 0 0 9px; }
.practice-history-inline-actions[hidden] { display: none; }
/* Recording transport actions must not reappear inside a history row. */
.practice-history-entry :is([data-action="record-again"], [data-action="record-current-phrase"]) { display: none !important; }
.practice-history-entry > :not(.practice-history-row):not(.practice-history-inline-actions) { display: none !important; }
.practice-history-entry .practice-history-row > :not(span):not(time):not(.practice-history-actions) { display: none !important; }
.practice-history-inline-actions > div { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.practice-history-inline-actions button { min-height: 30px; border: 1px solid var(--button-secondary-border); border-radius: 5px; color: var(--button-secondary-text); background: var(--button-secondary-bg); font: inherit; font-size: 10px; cursor: pointer; }
.practice-history-inline-actions button:hover { border-color: var(--button-accent-border); color: var(--button-accent-text); background: var(--button-secondary-bg-hover); }
.practice-history-inline-actions small { display: block; margin-top: 6px; color: var(--app-muted); font-size: 9px; line-height: 1.45; }
.practice-history-comp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--app-accent) 38%, var(--app-line));
  border-radius: 8px;
  color: var(--app-text);
  background: color-mix(in srgb, var(--app-accent) 10%, var(--app-panel));
  font-size: 10px;
}
.practice-history-comp button { border: 0; color: var(--app-accent); background: transparent; font: inherit; font-weight: 800; cursor: pointer; white-space: nowrap; }
.practice-transport {
  position: sticky;
  /* The floating teaching surface must never intercept the primary record
     controls. Keep the transport above the ordinary (non-maximized) beat
     window so the user can start, pause, and save a Take without first moving
     the lesson surface. */
  z-index: 222;
  bottom: 0;
  min-height: 64px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 8px 18px;
  border-top: 1px solid var(--practice-line);
  background: var(--practice-control-strip-bg);
  box-shadow: 0 -10px 22px color-mix(in srgb, var(--app-shadow) 46%, transparent);
  overflow: hidden;
}
.practice-transport-group {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-right: 8px;
  border-right: 1px solid var(--practice-line);
}
.practice-transport-review { padding-right: 0; border-right: 0; }
details.practice-transport-review { position: relative; }
details.practice-transport-review > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--app-line);
  border-radius: 6px;
  color: var(--app-text);
  background: var(--button-secondary-bg);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}
.practice-review-popover {
  inset: auto 0 calc(100% + 8px) auto;
  width: 270px;
}
.practice-review-popover > button {
  width: 100%;
  justify-content: center;
  margin-top: 8px;
  font-size: 12px;
}
.practice-live-options { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 16px; }
.practice-live-options button {
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid var(--app-line);
  border-radius: 6px;
  background: var(--button-secondary-bg);
  color: var(--app-text);
  font-size: 12px;
  cursor: pointer;
}
.practice-live-options button[aria-checked="true"] {
  border-color: var(--button-accent-border);
  background: var(--button-accent-bg);
  color: var(--button-accent-text);
}
.practice-transport-options:not(:has(> :not([hidden]))) { display: none; }
.practice-transport-queue { position: relative; }
.practice-queue-menu { position: relative; }
.practice-queue-menu > summary {
  height: 40px;
  min-width: 116px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--practice-line);
  border-radius: 6px;
  color: var(--practice-text);
  background: var(--button-secondary-bg);
  font-size: 12px;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}
.practice-queue-menu > summary::-webkit-details-marker { display: none; }
.practice-queue-menu > summary:hover,
.practice-queue-menu[open] > summary { background: var(--button-secondary-bg-hover); }
.practice-queue-menu > summary strong { font-size: 12px; }
.practice-queue-menu > summary small { color: var(--practice-muted); font-size: 12px; }
.practice-queue-popover { display: grid; gap: 10px; }
.practice-queue-popover > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 4px 8px;
  align-items: center;
}
.practice-queue-popover > header .practice-floating-popover-grip,
.practice-queue-popover > header .practice-floating-popover-close { grid-row: 1 / span 2; }
.practice-queue-popover > header strong { font-size: 15px; }
.practice-queue-popover > header small { grid-column: 2; color: var(--practice-muted); font-size: 12px; line-height: 1.4; }
.practice-queue-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.practice-queue-modes > button,
.practice-queue-popover > footer > button {
  min-height: 36px;
  border: 1px solid var(--practice-line);
  border-radius: 6px;
  color: var(--practice-text);
  background: var(--button-secondary-bg);
  font-size: 12px;
  cursor: pointer;
}
.practice-queue-modes > button:hover,
.practice-queue-popover > footer > button:hover { background: var(--button-secondary-bg-hover); }
.practice-queue-modes > button.is-active { border-color: var(--button-accent-border); color: var(--button-accent-text); background: var(--button-accent-bg); }
.practice-queue-playlist-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.practice-queue-playlist-tools > label { display: grid; min-width: 0; gap: 4px; color: var(--practice-muted); font-size: 12px; }
.practice-queue-playlist-tools select { min-width: 0; min-height: 34px; padding: 0 8px; border: 1px solid var(--control-border); border-radius: var(--control-radius); color: var(--control-text); background: var(--control-bg); font-size: 12px; }
.practice-queue-playlist-actions { display: flex; gap: 6px; }
.practice-queue-playlist-actions button,
.practice-playlist-small-action,
.practice-playlist-bulk-actions button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--practice-line);
  border-radius: var(--control-radius);
  color: var(--practice-text);
  background: var(--button-secondary-bg);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.practice-queue-playlist-actions button:hover,
.practice-playlist-small-action:hover,
.practice-playlist-bulk-actions button:hover { border-color: var(--button-accent-border); background: var(--button-secondary-bg-hover); }
.practice-queue-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; }
.practice-queue-heading > span { color: var(--practice-muted); }
.practice-queue-list { max-height: min(300px, 42vh); display: grid; gap: 4px; overflow: auto; scrollbar-gutter: stable; }
.practice-queue-item {
  min-height: 36px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--practice-text);
  background: var(--app-panel-2);
  font-size: 12px;
  cursor: pointer;
}
.practice-queue-item:hover { border-color: var(--practice-line); }
.practice-queue-item.is-current { border-color: color-mix(in srgb, var(--app-accent) 48%, var(--practice-line)); background: color-mix(in srgb, var(--app-accent) 10%, var(--app-panel-2)); }
.practice-queue-item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.practice-queue-item > small { color: var(--app-accent); font-size: 12px; }
.practice-queue-empty { margin: 0; padding: 12px; color: var(--practice-muted); font-size: 12px; text-align: center; }
.practice-queue-popover > footer { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.practice-playlist-manager-backdrop { z-index: calc(var(--app-layer-dialog) + 1); }
.practice-playlist-manager { width: min(var(--app-dialog-width-lg), calc(100vw - var(--app-dialog-viewport-gap))); }
.practice-playlist-manager-body { display: grid; }
.practice-playlist-manager-layout { min-height: min(520px, 58vh); display: grid; grid-template-columns: minmax(190px, .38fr) minmax(0, 1fr); gap: 12px; }
.practice-playlist-groups-panel,
.practice-playlist-songs-panel { min-width: 0; min-height: 0; display: grid; align-content: start; gap: 10px; padding: 12px; border: 1px solid var(--app-line); border-radius: var(--control-radius); background: var(--app-dialog-section-bg); }
.practice-playlist-panel-heading,
.practice-playlist-songs-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.practice-playlist-panel-heading > div,
.practice-playlist-songs-heading > div:first-child { display: grid; min-width: 0; gap: 3px; }
.practice-playlist-panel-heading span,
.practice-playlist-songs-heading span { color: var(--app-muted); font-size: 12px; font-weight: 800; letter-spacing: .07em; }
.practice-playlist-panel-heading strong,
.practice-playlist-songs-heading strong { overflow: hidden; color: var(--app-text); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.practice-playlist-songs-heading small { color: var(--app-muted); font-size: 12px; }
.practice-playlist-groups,
.practice-playlist-songs { min-height: 0; display: grid; align-content: start; gap: 6px; overflow: auto; scrollbar-gutter: stable; }
.practice-playlist-group-row { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px; align-items: stretch; border: 1px solid transparent; border-radius: var(--control-radius); background: var(--app-panel-2); }
.practice-playlist-group-row.is-active { border-color: var(--button-accent-border); background: var(--app-accent-soft); }
.practice-playlist-group-select { min-width: 0; display: flex; align-items: center; padding: 8px; border: 0; border-radius: var(--control-radius); color: var(--app-text); background: transparent; text-align: left; cursor: pointer; }
.practice-playlist-group-select span { min-width: 0; display: grid; gap: 3px; }
.practice-playlist-group-select strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.practice-playlist-group-select small { color: var(--app-muted); font-size: 12px; }
.practice-playlist-group-delete { width: 32px; min-height: 32px; align-self: center; margin-right: 4px; border: 1px solid transparent; border-radius: var(--control-radius); color: var(--app-muted); background: transparent; font-size: 18px; cursor: pointer; }
.practice-playlist-group-delete:hover,
.practice-playlist-group-delete:focus-visible { border-color: var(--state-danger-line); color: var(--state-danger-text); background: var(--state-danger-bg); }
.practice-playlist-bulk-actions { display: flex; flex: 0 0 auto; gap: 5px; }
.practice-playlist-bulk-actions button { min-height: 30px; padding-inline: 8px; }
.practice-playlist-song-row { min-height: 42px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 9px; padding: 7px 9px; border: 1px solid transparent; border-radius: var(--control-radius); color: var(--app-text); background: var(--app-panel-2); cursor: pointer; }
.practice-playlist-song-row:hover { border-color: var(--app-line); background: var(--state-hover); }
.practice-playlist-song-row.is-current { border-color: color-mix(in srgb, var(--app-accent) 46%, var(--app-line)); }
.practice-playlist-song-row.is-pending { background: color-mix(in srgb, var(--app-panel-2) 82%, var(--app-bg)); }
.practice-playlist-song-row.is-pending small { color: var(--app-secondary); }
.practice-playlist-song-row > span { min-width: 0; display: flex; align-items: center; gap: 7px; overflow: hidden; }
.practice-playlist-song-row strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.practice-playlist-song-row small { flex: 0 0 auto; color: var(--app-accent); font-size: 12px; }
.practice-playlist-manager-empty { margin: 0; padding: 20px 12px; color: var(--app-muted); font-size: 12px; line-height: 1.6; text-align: center; }
.practice-playlist-manager-footer { justify-content: space-between; }
.practice-playlist-manager-footer > span { color: var(--app-muted); font-size: 12px; }
.library-actions .library-action-playlist { border-color: var(--button-accent-border); color: var(--button-accent-text); background: var(--button-accent-bg); }
.library-actions .library-action-playlist:disabled { border-color: var(--app-line); color: var(--app-muted); background: var(--button-secondary-bg); cursor: not-allowed; }
.lyric-remix-library-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.lyric-remix-library-row-main { min-width: 0; display: grid; gap: 4px; padding: 6px 8px; border: 1px solid transparent; border-radius: var(--control-radius); color: var(--app-text); background: transparent; text-align: left; cursor: pointer; }
.lyric-remix-library-row-main:hover,
.lyric-remix-library-row-main:focus-visible { border-color: var(--app-accent); background: var(--state-hover); outline: 0; }
.lyric-remix-library-row-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lyric-remix-library-row-main span { color: var(--app-muted); font-size: 12px; }
.lyric-remix-library-add { min-height: 34px; padding: 0 9px; border: 1px solid var(--button-accent-border); border-radius: var(--control-radius); color: var(--button-accent-text); background: var(--button-accent-bg); font-size: 12px; cursor: pointer; white-space: nowrap; }
.lyric-remix-library-add:disabled { border-color: var(--app-line); color: var(--app-muted); background: var(--button-secondary-bg); cursor: not-allowed; }
.practice-transport-beat-guide,
.practice-transport-metronome {
  height: 40px;
  min-width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid var(--practice-line);
  border-radius: 6px;
  color: var(--practice-text);
  background: var(--button-secondary-bg);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.practice-transport-beat-guide .practice-toolbar-icon,
.practice-transport-metronome .practice-toolbar-icon { width: 16px; height: 16px; flex: 0 0 16px; }
.practice-transport-beat-guide[aria-checked="true"],
.practice-transport-metronome[aria-checked="true"] {
  border-color: var(--button-accent-border);
  color: var(--button-accent-text);
  background: var(--button-accent-bg);
}
.practice-transport-beat-guide:hover,
.practice-transport-metronome:hover { background: var(--button-secondary-bg-hover); }
.practice-transport-beat-guide[aria-checked="true"]:hover,
.practice-transport-metronome[aria-checked="true"]:hover { background: color-mix(in srgb, var(--button-accent-bg) 82%, var(--app-panel)); }
.practice-play,
.practice-stop,
.practice-start,
.practice-play-separately,
.practice-finish,
.practice-discard,
.practice-replay-latest,
.practice-record-again,
.practice-punch-record,
.practice-vocal-comp-cancel,
.practice-transport-labeled { height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; border-radius: 6px; font-size: 11px; white-space: nowrap; cursor: pointer; }
.practice-transport-labeled { width: 40px; min-width: 40px; padding-inline: 0; border: 1px solid var(--practice-line); color: var(--practice-text); background: var(--button-secondary-bg); }
.practice-transport-labeled strong { position: absolute; overflow: hidden; width: 1px; height: 1px; clip-path: inset(50%); white-space: nowrap; }
.practice-transport :is(.practice-transport-labeled, .practice-transport-icon-button)[data-command-display="text"] { width: auto; min-width: 56px; padding-inline: 10px; }
.practice-transport [data-command-display="text"] > strong { position: static; width: auto; height: auto; clip-path: none; overflow: visible; font-size: 12px; }
.practice-transport-icon-button > strong { display: none; }
.practice-transport-icon-button[data-command-display="text"] > strong { display: inline; }
.practice-transport-icon-button {
  width: 40px;
  min-width: 40px;
  height: 40px;
  flex: 0 0 40px;
}
.practice-transport-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.practice-transport [data-practice-transport-glyph] {
  width: 14px;
  min-width: 14px;
  display: inline-grid;
  place-items: center;
  font-family: "Segoe UI Symbol", sans-serif;
  line-height: 1;
}
.practice-transport :is(button, strong, [data-practice-transport-glyph]) {
  white-space: nowrap;
}
.practice-transport :is(.practice-transport-icon, .sr-command-icon svg) {
  display: block;
  overflow: hidden;
}
.practice-play { width: 76px; justify-content: center; }
.practice-play .practice-transport-icon { fill: currentColor; stroke: none; }
.practice-play[data-state="playing"] [data-practice-transport-icon="play"] { display: none; }
.practice-play[data-state="playing"] [data-practice-transport-icon="pause"] { display: block; }
.practice-play:not([data-state="playing"]) [data-practice-transport-icon="pause"] { display: none; }
.practice-stop { width: 76px; }
.practice-start { width: 108px; }
.practice-play-separately { width: 102px; }
.practice-finish, .practice-discard { width: 112px; }
.practice-replay-latest { width: 104px; }
.practice-record-again { width: 80px; }
.practice-punch-record { width: 94px; }
:is(.practice-replay-accompaniment, .practice-original-monitor) { height: 40px; display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid var(--practice-line); border-radius: 6px; color: var(--practice-mute); background: var(--button-secondary-bg); cursor: pointer; font-size: 12px; white-space: nowrap; }
:is(.practice-replay-accompaniment, .practice-original-monitor).is-on { color: var(--button-accent-text); border-color: var(--button-accent-border); background: var(--button-accent-bg); }
:is(.practice-replay-accompaniment, .practice-original-monitor):hover { background: var(--button-secondary-bg-hover); }
.practice-vocal-comp-cancel[hidden] { display: none; }
.practice-play { border: 1px solid var(--practice-line); color: var(--practice-text); background: var(--button-secondary-bg); }
.practice-stop { border: 1px solid var(--practice-line); color: var(--practice-text); background: var(--button-secondary-bg); }
.practice-stop:hover { background: var(--button-secondary-bg-hover); }
.practice-start { min-width: 108px; justify-content: center; border: 1px solid color-mix(in srgb, var(--app-coral) 58%, var(--app-line)); color: var(--app-on-coral); background: var(--app-coral); }
.practice-start span { color: var(--app-on-coral); }
.practice-play-separately { border: 1px solid var(--button-accent-border); color: var(--button-accent-text); background: var(--button-accent-bg); }
.practice-play-separately:hover { background: var(--button-secondary-bg-hover); }
.practice-finish { border: 1px solid var(--app-line); color: var(--app-text); background: var(--button-secondary-bg); }
.practice-discard { border: 1px solid color-mix(in srgb, var(--state-danger-text) 46%, var(--app-line)); color: var(--state-danger-text); background: color-mix(in srgb, var(--state-danger-text) 9%, var(--app-panel)); }
.practice-discard:hover { background: color-mix(in srgb, var(--state-danger-text) 16%, var(--app-panel)); }
.practice-replay-latest { border: 1px solid var(--button-accent-border); color: var(--button-accent-text); background: var(--button-accent-bg); }
.practice-replay-latest:hover { background: var(--button-secondary-bg-hover); }
.practice-record-again, .practice-punch-record, .practice-vocal-comp-cancel { border: 1px solid var(--practice-line); color: var(--practice-text); background: var(--button-secondary-bg); }
.practice-record-again:hover, .practice-punch-record:hover, .practice-vocal-comp-cancel:hover { background: var(--button-secondary-bg-hover); }
.is-practicing .practice-start { background: var(--app-panel-2); border-color: var(--app-line); color: var(--app-text); }
.practice-transport button:disabled { opacity: .42; cursor: not-allowed; }
.practice-transport-status { min-width: 0; max-width: 220px; flex: 0 1 220px; margin-left: auto; overflow: hidden; color: var(--practice-muted); font-size: 11px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.practice-transport-status.error { color: var(--state-danger-text); }

/* The monitoring rail reduces the stage's real inline size. Reflow complete
   control groups from that measured size so review/record buttons remain in
   the stage instead of continuing underneath the higher monitoring layer. */
@container practice-stage (max-width: 1280px) {
  .practice-transport {
    flex-wrap: nowrap;
    align-content: center;
    row-gap: 6px;
    overflow: visible;
  }
  .practice-transport-review {
    min-width: 0;
    flex: 0 0 auto;
    justify-content: flex-end;
  }
  .practice-transport-status { display: none; }
}
.practice-studio:not([data-transport-state="recording"]):not([data-transport-state="recording-paused"]):not([data-transport-state="practice-preview"]):not([data-transport-state="finishing"]) .practice-transport-recording :is(.practice-finish, .practice-discard) { display: none; }
.practice-studio:not([data-transport-state="recording"]):not([data-transport-state="recording-paused"]):not([data-transport-state="practice-preview"]) .practice-play-separately { display: none; }
.practice-studio:not([data-has-latest-recording="true"]) .practice-transport-review { display: none; }
.practice-studio:is([data-transport-state="recording"], [data-transport-state="recording-paused"], [data-transport-state="practice-preview"], [data-transport-state="finishing"], [data-transport-state="starting-practice"]) .practice-transport-playback,
.practice-studio:is([data-transport-state="recording"], [data-transport-state="recording-paused"], [data-transport-state="practice-preview"], [data-transport-state="finishing"], [data-transport-state="starting-practice"]) .practice-transport-review { display: none; }
.practice-empty { flex: 1; display: grid; place-content: center; justify-items: center; gap: 16px; min-height: 420px; }

/* Song MelodyEditor-style workspace: full-studio overlay with a real-height piano roll. */
.practice-pitch-editor {
  position: absolute;
  z-index: 230;
  inset: 0;
  display: grid;
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto;
  min-height: 0;
  overflow: hidden;
  color: var(--practice-text);
  background: var(--app-bg);
  pointer-events: auto;
}
.pitch-editor-open .practice-workspace {
  visibility: hidden;
  pointer-events: none;
}
.practice-studio.pitch-editor-open :is(.practice-entry-cue, .practice-beat-coach, .practice-beat-coach-settings),
[data-workspace-suppressed="pitch-editor"] {
  display: none !important;
}
.practice-pitch-canvas-marquee {
  position: absolute;
  z-index: 4;
  border: 1px dashed var(--app-accent);
  background: color-mix(in srgb, var(--app-accent) 18%, transparent);
  pointer-events: none;
}
.practice-score-basis {
  margin: 0;
  padding: 0 18px 10px;
  color: var(--app-muted);
  font-size: 11px;
  line-height: 1.4;
}
.practice-score-basis label {
  display: grid;
  gap: 6px;
  color: var(--app-muted);
  font-size: 11px;
  font-weight: 700;
}
.practice-score-basis select {
  min-height: 32px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--app-line);
  border-radius: 5px;
  color: var(--app-text);
  background: var(--control-bg);
}
.practice-pitch-pan-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 28px;
  max-height: 32px;
  padding: 0 14px;
  border-top: 1px solid var(--app-line);
  color: var(--app-muted);
  background: var(--app-panel-2);
  cursor: grab;
  user-select: none;
  font-size: 10px;
  letter-spacing: 0.04em;
}
.practice-pitch-pan-strip:active { cursor: grabbing; }
.practice-pitch-pan-strip span { pointer-events: none; white-space: nowrap; }
.practice-pitch-pan-track {
  position: relative;
  height: 10px;
  overflow: hidden;
  border: 1px solid var(--app-line);
  border-radius: 999px;
  background: var(--app-panel);
}
.practice-pitch-pan-track i {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  min-width: 28px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--app-accent) 72%, var(--app-panel));
  pointer-events: none;
}
.practice-pitch-scoring {
  display: inline-grid !important;
  gap: 4px;
  min-width: 128px !important;
}
.pitch-layer-modes {
  display: inline-flex;
  gap: 4px;
}
.pitch-layer-modes button[aria-pressed="true"] {
  border-color: var(--button-accent-border);
  color: var(--app-accent-ink);
  background: var(--app-accent);
}
.practice-pitch-editor > header { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 20px; border-bottom: 1px solid var(--app-line); background: var(--app-panel); }
.practice-pitch-editor > header > div:first-child { display: grid; gap: 2px; }
.practice-pitch-editor > header > div:first-child > span { color: var(--app-muted); font-size: 9px; font-weight: 700; }
.practice-pitch-editor > header strong { font-size: 18px; }
.practice-pitch-editor > header small { color: var(--app-muted); font-size: 10px; }
.practice-tuning-progress { display: grid; grid-template-columns: minmax(150px, 260px) auto; align-items: center; gap: 3px 8px; margin-top: 5px; min-width: min(360px, 42vw); }
.practice-tuning-progress[hidden] { display: none; }
.practice-tuning-progress > div { height: 5px; overflow: hidden; border-radius: 3px; background: var(--app-panel-2); }
.practice-tuning-progress > div span { display: block; width: 0; height: 100%; background: var(--app-warm); transition: width .18s ease; }
.practice-tuning-progress output { color: var(--app-text); font: 10px var(--font-family-mono); }
.practice-tuning-progress em { grid-column: 1 / -1; color: var(--app-muted); font-size: 9px; font-style: normal; }
.practice-pitch-editor-actions { display: flex; align-items: center; gap: 7px; }
.practice-pitch-editor button { min-height: 32px; padding: 0 10px; border: 1px solid var(--app-line); border-radius: 5px; color: var(--app-text); background: var(--button-secondary-bg); cursor: pointer; }
.practice-pitch-editor button:hover { background: var(--state-hover); }
.practice-pitch-editor button:disabled { opacity: .4; cursor: not-allowed; }
.practice-pitch-editor-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-height: 58px; padding: 9px 20px; border-bottom: 1px solid var(--app-line); background: var(--app-panel-2); overflow: visible; }
.practice-pitch-editor-toolbar label { flex: 0 0 auto; display: grid; gap: 4px; min-width: max-content; color: var(--app-muted); font-size: 9px; font-weight: 700; white-space: nowrap; }
.practice-pitch-snap-toggle { min-width: 118px; grid-template-columns: auto auto; align-items: center; column-gap: 7px; }
.practice-pitch-snap-toggle span { grid-column: 1 / -1; }
.practice-pitch-snap-toggle input { width: 15px; height: 15px; accent-color: var(--app-accent); }
.practice-pitch-snap-toggle small { color: var(--app-muted); font-size: 9px; font-weight: 400; }
.practice-pitch-editor-toolbar select { min-width: 112px; height: 32px; padding: 0 28px 0 9px; border: 1px solid var(--app-line); border-radius: 5px; color: var(--app-text); background: var(--control-bg); }
.practice-pitch-variant-picker { display: inline-flex !important; grid-template-columns: none !important; flex-direction: column; gap: 4px; min-width: 128px !important; }
.practice-pitch-variant-picker select { min-width: 128px; }
.practice-pitch-editor-toolbar > span { flex: 0 0 auto; margin-left: auto; align-self: center; color: var(--app-muted); font-size: 10px; white-space: nowrap; }
.practice-pitch-hint { display: block; margin: 0 0 8px; color: var(--app-muted); font-size: 11px; line-height: 1.45; white-space: normal; }
.pitch-human-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pitch-human-actions [data-action="pitch-send-tuned-to-master"] { border-color: color-mix(in srgb, var(--app-accent) 45%, var(--app-line)); background: var(--app-accent-soft); color: var(--app-accent); font-weight: 700; }
.practice-pitch-layer-toggle { display: inline-flex !important; align-items: center; gap: 5px; min-height: 32px; white-space: nowrap; }
.practice-pitch-layer-toggle input { accent-color: var(--app-accent); }
.practice-pitch-legend { display: inline-flex; align-items: center; gap: 5px; color: var(--app-muted); font-size: 9px; white-space: nowrap; }
.practice-pitch-legend i { display: inline-block; width: 18px; height: 8px; border: 1px dashed var(--practice-edit-guide); border-radius: 2px; background: color-mix(in srgb, var(--practice-edit-guide) 20%, transparent); }
.practice-pitch-legend i.is-human { border-style: solid; border-color: var(--practice-edit-human); background: var(--practice-edit-human); }
.practice-pitch-preview-bar { display: flex; align-items: center; gap: 16px; min-height: 42px; padding: 6px 20px; border-bottom: 1px solid var(--app-line); background: var(--app-panel); }
.practice-pitch-preview-bar label { display: grid; grid-template-columns: auto auto; align-items: center; gap: 5px 8px; min-width: 150px; color: var(--app-muted); font-size: 10px; }
.practice-pitch-preview-bar label input { grid-column: 1 / -1; width: 150px; accent-color: var(--app-accent); }
.practice-pitch-preview-bar output, .practice-pitch-preview-bar > span { color: var(--app-text); font-variant-numeric: tabular-nums; }
.practice-pitch-seek { flex: 1 1 180px; min-width: 120px; accent-color: var(--app-accent); }
.practice-pitch-timeline-overview { flex: 1 1 180px; min-width: 120px; }
.practice-pitch-editor-lyrics { display: flex; gap: 6px; min-height: 46px; padding: 6px 20px; overflow-x: auto; border-bottom: 1px solid var(--app-line); background: var(--app-bg); scrollbar-width: thin; }
.practice-pitch-editor-lyrics button { flex: 0 0 auto; display: grid; grid-template-columns: auto minmax(100px, 1fr); align-items: center; gap: 7px; min-width: 150px; min-height: 32px; padding: 5px 8px; border: 1px solid var(--app-line); border-radius: 4px; color: var(--app-muted); background: var(--app-panel); text-align: left; }
.practice-pitch-editor-lyrics button:hover, .practice-pitch-editor-lyrics button.is-current { border-color: var(--button-accent-border); color: var(--app-text); background: var(--status-info-bg); }
.practice-pitch-editor-lyrics time { color: var(--app-faint); font: 9px var(--font-family-mono); }
.practice-pitch-editor-lyrics span { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.practice-pitch-lyrics-empty { align-self: center; color: var(--app-muted); font-size: 10px; cursor: pointer; }
.practice-pitch-lyrics-empty:hover,
.practice-pitch-lyrics-empty:focus-visible { color: var(--app-accent); }
.practice-pitch-editor-body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  background: var(--practice-canvas-bg);
}
.practice-piano-scroll {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  overscroll-behavior: contain;
  background: var(--practice-canvas-bg);
  cursor: grab;
  touch-action: none;
}
.practice-piano-scroll:active { cursor: grabbing; }
.practice-piano-roll {
  position: relative;
  width: var(--pitch-roll-width, 100%);
  height: var(--pitch-roll-height, 288px);
  min-width: 100%;
  min-height: 100%;
  overflow: hidden;
  background-color: var(--practice-canvas-bg);
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--pitch-row-height, 18px) - 1px),
      var(--practice-grid-minor) calc(var(--pitch-row-height, 18px) - 1px),
      var(--practice-grid-minor) var(--pitch-row-height, 18px)
    ),
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent 99px,
      var(--practice-grid-major) 99px,
      var(--practice-grid-major) 100px
    );
  touch-action: none;
}
.practice-piano-empty {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  display: grid;
  gap: 8px;
  justify-items: center;
  max-width: min(420px, 80%);
  padding: 18px 20px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  color: var(--app-muted);
  background: color-mix(in srgb, var(--app-panel) 92%, transparent);
  text-align: center;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}
.practice-piano-empty strong { color: var(--app-text); font-size: 14px; }
.practice-piano-empty span { font-size: 11px; line-height: 1.45; }
.practice-piano-empty button { min-height: 32px; padding: 0 12px; }
.practice-piano-time { position: absolute; z-index: 1; top: 3px; left: var(--pitch-x); color: var(--practice-canvas-label); font: 9px var(--font-family-mono); transform: translateX(4px); pointer-events: none; }
.practice-piano-time::after { content: ''; position: absolute; top: 18px; bottom: -2000px; left: 0; width: 1px; background: var(--practice-grid-major); }
.practice-piano-key { position: absolute; z-index: 2; top: var(--pitch-y); left: 5px; color: var(--practice-canvas-label); font: 9px/18px var(--font-family-mono); pointer-events: none; }
.practice-piano-note { position: absolute; z-index: 3; top: var(--pitch-y); left: var(--pitch-x); width: var(--pitch-w); height: var(--pitch-h, 14px); min-height: 8px; display: grid; grid-template-columns: 9px minmax(0, 1fr) 9px; align-items: center; padding: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--app-accent) 44%, var(--app-line)); border-radius: 4px; color: var(--app-accent-ink); background: var(--app-accent); cursor: move; touch-action: none; }
.practice-piano-note::after {
  position: absolute;
  z-index: 3;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  content: '';
  box-shadow: inset 0 0 0 2px transparent;
}
.practice-piano-note.selected { z-index: 4; outline: 2px solid var(--app-secondary); outline-offset: 1px; }
.practice-piano-note.manual { border-style: dashed; }
.practice-piano-note.selected { background: var(--app-secondary); border-color: var(--app-secondary); }
.practice-piano-note.is-ai-layer { background: color-mix(in srgb, var(--app-accent) 86%, var(--app-panel)); }
.practice-piano-note.is-human-layer { background: var(--practice-edit-human); border-color: color-mix(in srgb, var(--practice-edit-human) 60%, var(--app-line)); color: var(--app-text); }
.practice-piano-note.is-human-layer.selected { background: var(--practice-edit-human-selected); border-color: var(--practice-edit-human-selected); color: var(--app-on-warm); }
.practice-piano-note strong { min-width: 0; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.practice-piano-note i { position: relative; z-index: 2; min-width: 9px; align-self: stretch; cursor: ew-resize; background: color-mix(in srgb, var(--app-panel) 42%, transparent); }
.practice-piano-note i:first-child { border-right: 2px solid color-mix(in srgb, var(--app-text) 68%, transparent); }
.practice-piano-note i:last-child { border-left: 2px solid color-mix(in srgb, var(--app-text) 68%, transparent); }
.practice-piano-note.selected i { background: color-mix(in srgb, var(--app-panel) 58%, transparent); }
.practice-piano-note i:hover { background: var(--app-accent-soft); }
.practice-piano-note i:hover:first-child { border-right-color: var(--app-warm); }
.practice-piano-note i:hover:last-child { border-left-color: var(--app-warm); }
.practice-piano-note.has-boundary-link i { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-text) 14%, transparent); }
.practice-piano-roll { cursor: grab; }
.pitch-roll-panning .practice-piano-roll { cursor: grabbing; }
.pitch-roll-panning .practice-piano-note { pointer-events: none; }
.practice-piano-note.is-off-pitch { border-color: color-mix(in srgb, var(--app-warm) 54%, var(--app-line)); background: var(--status-warning-bg); color: var(--status-warning-text); }
.practice-piano-reference { position: absolute; z-index: 2; top: var(--pitch-y); left: var(--pitch-x); width: var(--pitch-w); height: var(--pitch-h, 8px); border: 1px dashed var(--practice-edit-guide); border-radius: 3px; background: color-mix(in srgb, var(--practice-edit-guide) 42%, transparent); opacity: .78; pointer-events: none; }
.practice-piano-reference.is-ai { border-style: dashed; border-color: var(--practice-edit-guide); background: color-mix(in srgb, var(--practice-edit-guide) 36%, transparent); }
.practice-piano-reference.is-human { border-style: solid; border-color: var(--practice-edit-human); background: color-mix(in srgb, var(--practice-edit-human) 38%, transparent); }
.practice-piano-reference span { display: block; overflow: hidden; padding: 0 3px; color: var(--app-text); font-size: 7px; line-height: 7px; opacity: .82; }
.practice-piano-playhead { position: absolute; z-index: 8; top: 0; bottom: 0; left: 0; width: 2px; pointer-events: none; background: var(--practice-playhead); box-shadow: 0 0 8px color-mix(in srgb, var(--practice-playhead) 55%, transparent); transform: translate3d(0, 0, 0); will-change: transform; }
.practice-pitch-selection-status { margin-left: auto; color: var(--app-muted); font-size: 10px; }
.practice-pitch-context-menu,
.practice-pitch-word-menu { position: absolute; z-index: 30; display: grid; min-width: 196px; max-height: min(460px, calc(100vh - 16px)); padding: 5px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--app-line); border-radius: 6px; background: var(--app-panel); box-shadow: 0 10px 28px color-mix(in srgb, var(--app-bg) 62%, transparent); }
.practice-pitch-context-menu:not(.is-detached) { padding: 0; overflow: hidden; }
.practice-pitch-context-menu[hidden],
.practice-pitch-word-menu[hidden] { display: none; }
.practice-pitch-context-menu > header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px 10px;
  align-items: center;
  padding: 10px 11px 8px;
  border-bottom: 1px solid var(--app-line);
  background: var(--app-panel);
}
.practice-pitch-context-menu > header .practice-floating-popover-grip { grid-row: 1; }
.practice-pitch-context-menu > header .practice-floating-popover-close { grid-row: 1; align-self: start; }
.practice-pitch-context-menu > header strong,
.practice-pitch-context-menu > strong,
.practice-pitch-word-menu > strong { padding: 7px 9px; color: var(--app-muted); background: var(--app-panel); font-size: 12px; font-weight: 700; }
.practice-pitch-context-menu > header strong { padding: 0; color: var(--app-text); font-size: 13px; line-height: 1.35; }
.practice-pitch-context-body {
  display: grid;
  gap: 2px;
  min-height: 0;
  max-height: min(58vh, calc(100vh - 120px));
  padding: 5px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.practice-pitch-context-menu button,
.practice-pitch-word-menu button { width: 100%; min-height: 30px; padding: 0 9px; border: 0; border-radius: 4px; text-align: left; color: var(--app-text); background: transparent; cursor: pointer; }
.practice-pitch-context-menu button:hover,
.practice-pitch-word-menu button:hover { background: var(--state-hover); }
.practice-pitch-context-menu button:disabled,
.practice-pitch-word-menu button:disabled { opacity: .45; cursor: not-allowed; }
.practice-pitch-context-split { display: grid; gap: 6px; padding: 6px 5px 4px; border-top: 1px solid var(--app-line); }
.practice-pitch-context-split[hidden] { display: none; }
.practice-pitch-context-split > span { padding: 0 4px; color: var(--app-muted); font-size: 10px; font-weight: 700; }
.practice-pitch-context-split-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 0 4px; }
.practice-pitch-context-split-row button { min-height: 28px; padding: 0; text-align: center; font: 700 12px var(--font-family-mono); }
.practice-pitch-context-split-custom { display: grid; grid-template-columns: auto 52px auto; align-items: center; gap: 6px; padding: 0 4px 2px; color: var(--app-muted); font-size: 10px; font-weight: 700; }
.practice-pitch-context-split-custom input { width: 100%; height: 28px; padding: 0 6px; border: 1px solid var(--app-line); border-radius: 4px; color: var(--app-text); background: var(--control-bg); font: 700 12px var(--font-family-mono); text-align: center; }
.practice-pitch-context-split-custom button { min-height: 28px; padding: 0 10px; text-align: center; font-size: 11px; font-weight: 700; }
.practice-pitch-inspector-split { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin-top: 4px; color: var(--app-muted); font-size: 10px; font-weight: 700; }
.practice-pitch-inspector-split input { height: 32px; padding: 0 8px; border: 1px solid var(--app-line); border-radius: 5px; color: var(--app-text); background: var(--control-bg); font: 700 14px var(--font-family-mono); text-align: center; }
.practice-pitch-inspector-split button { min-height: 32px; padding: 0 12px; }
.practice-pitch-marquee { position: absolute; z-index: 10; border: 1px dashed var(--app-accent); background: color-mix(in srgb, var(--app-accent) 12%, transparent); pointer-events: none; }
.practice-pitch-inspector { min-height: 0; display: grid; align-content: start; gap: 12px; padding: 18px; overflow: auto; border-left: 1px solid var(--app-line); background: var(--app-panel); }
.practice-pitch-inspector > span,
.practice-pitch-inspector small { color: var(--app-muted); font-size: 10px; }
.practice-pitch-inspector > strong { font-size: 30px; }
.practice-pitch-inspector label { display: grid; gap: 5px; color: var(--app-muted); font-size: 10px; font-weight: 700; }
.practice-pitch-inspector input { width: 100%; height: 32px; padding: 0 8px; border: 1px solid var(--app-line); border-radius: 5px; color: var(--app-text); background: var(--control-bg); }
.practice-pitch-stepper { display: grid; grid-template-columns: 32px 1fr 32px; align-items: center; }
.practice-pitch-stepper button { padding: 0; font-size: 16px; }
.practice-pitch-stepper output { text-align: center; font: 700 16px var(--font-family-mono); }
.practice-pitch-delete { margin-top: 8px; color: var(--state-danger-text) !important; border-color: var(--state-danger-line) !important; }
.practice-pitch-effects { display: grid; gap: 9px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--app-line); }
.practice-pitch-effects summary { color: var(--app-text); font-size: 11px; font-weight: 800; cursor: pointer; }
.practice-pitch-effects label { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; }
.practice-pitch-effects label input { grid-column: 1 / -1; height: 24px; padding: 0; border: 0; background: transparent; }
.practice-pitch-effects output { color: var(--app-text); font-variant-numeric: tabular-nums; }

.practice-entry {
  min-width: 148px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--app-coral) 52%, var(--app-line));
  border-radius: 6px;
  color: var(--app-on-coral);
  background: var(--app-coral);
  font-weight: 750;
  cursor: pointer;
}
.practice-entry:hover { background: color-mix(in srgb, var(--app-coral) 84%, var(--app-text)); }
.practice-entry span { font-size: 16px; }
.practice-topbar-entry {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid color-mix(in srgb, var(--app-coral) 52%, var(--app-line));
  border-radius: 6px;
  color: var(--app-on-coral);
  background: var(--app-coral);
  font-weight: 750;
  cursor: pointer;
}
.practice-topbar-entry:hover { background: color-mix(in srgb, var(--app-coral) 84%, var(--app-text)); }
.practice-topbar-entry span { font-size: 12px; }
.brand [data-edition-badge] { margin-left: auto; padding: 3px 5px; border: 1px solid var(--app-line); border-radius: 4px; color: var(--app-faint); font-size: 8px; font-weight: 700; }
.project-header-actions { display: flex; align-items: center; gap: 12px; }
body.practice-view-open .content-grid,
body.practice-view-open .workflow-strip { display: none !important; }
body.practice-view-open { overflow: hidden; }
body.practice-view-open .app-shell,
body.practice-view-open .main-content {
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}
/* The desktop command bar occupies the first 86px outside .app-shell. Keep
   the practice shell inside the remaining viewport so the sidebar can scroll
   to its final cards instead of being clipped by the parent. */
html.desktop-runtime body.practice-view-open .app-shell,
html.desktop-runtime body.practice-view-open .main-content {
  height: calc(100vh - 86px);
  max-height: calc(100vh - 86px);
}
html.desktop-runtime body.practice-view-open .sidebar {
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
/* Avoid negative margins that used to clip the right scoreboard against overflow-x. */
body.practice-view-open .main-content {
  padding-inline: 0;
  padding-bottom: 0;
  overflow-x: hidden;
}
body.practice-view-open .practice-studio {
  margin: 0;
  height: min(var(--practice-workspace-height, calc(100vh - 70px)), calc(100vh - var(--practice-workspace-top, 70px)));
  max-height: min(var(--practice-workspace-height, calc(100vh - 70px)), calc(100vh - var(--practice-workspace-top, 70px)));
}
body.practice-view-open .project-header { padding: 16px 24px 12px; }
body.practice-view-open .project-header .project-title { transform: scale(.94); transform-origin: left center; }

body.beat-calibration-workspace-open :is(.sidebar,.sidebar-resize-handle,.sidebar-collapse-handle,.vc-help) { display: none !important; }
body.beat-calibration-workspace-open .main-content { width: 100%; height: 100vh; min-height: 0; padding: 0; overflow: hidden; }
body.beat-calibration-workspace-open #practiceStudio {
  width: 100%;
  height: min(var(--practice-workspace-height, calc(100vh - 70px)), calc(100vh - var(--practice-workspace-top, 70px)));
  max-height: min(var(--practice-workspace-height, calc(100vh - 70px)), calc(100vh - var(--practice-workspace-top, 70px)));
  border-top: 0;
}
body.beat-calibration-workspace-open :is(.practice-source-settings,.practice-readiness,.practice-side-rail,.practice-secondary-panel,.practice-secondary-collapse-handle) { display: none !important; }
body.beat-calibration-workspace-open .practice-workspace { grid-template-columns: minmax(0,1fr); }
body.beat-calibration-workspace-open .practice-stage > :not(.practice-transport) { visibility: hidden; }
body.beat-calibration-workspace-open .practice-studio.pitch-editor-open > [data-pitch-editor] { visibility: visible; }
body.beat-calibration-workspace-open .practice-stage > .practice-transport { position: fixed; z-index: 207; right: auto; bottom: 16px; left: 50%; width: min(560px,calc(100vw - 32px)); min-height: 54px; margin: 0; padding: 7px 10px; border: 1px solid color-mix(in srgb,var(--app-accent) 34%,var(--app-line)); border-radius: 9px; background: var(--app-panel); box-shadow: 0 12px 32px color-mix(in srgb,var(--app-shadow) 76%,transparent); transform: translateX(-50%); }
body.beat-calibration-workspace-open .practice-transport :is(.practice-transport-recording,.practice-transport-queue,.practice-transport-options,.practice-transport-review) { display: none !important; }
body.beat-calibration-workspace-open .practice-head-main .practice-back { display: inline-grid; }
body.beat-calibration-workspace-open .practice-title-block::before { display: block; margin-bottom: 2px; color: var(--app-accent); content: 'PREPARE / 节拍与唱点校准'; font-size: 9px; font-weight: 800; letter-spacing: .08em; }

@media(max-width:1180px) {
  .practice-beat-map-workbench-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .practice-beat-map-timeline-panel { grid-column: 1 / -1; grid-row: 1; }
  .practice-beat-map-decisions { grid-column: 1; grid-row: 2; }
  .practice-beat-map-impact { grid-column: 2; grid-row: 2; }
}

@media(max-width:900px) {
  .practice-calibration-guide { grid-template-columns: 1fr; gap: 9px; }
  .practice-calibration-guide ol { overflow-x: auto; }
  .practice-calibration-guide li { min-width: 230px; }
  body.beat-calibration-workspace-open .practice-calibration-guide > header { display: none; }
  body.beat-calibration-workspace-open .practice-calibration-guide { grid-template-columns: 1fr; padding-block: 7px; }
  body.beat-calibration-workspace-open .practice-calibration-guide ol { overflow: hidden; }
  body.beat-calibration-workspace-open .practice-calibration-guide li { min-width: 0; }
  .practice-beat-map-workbench { padding-inline: 10px; }
  .practice-beat-map-workbench-head > div:first-child { grid-template-columns: auto minmax(0,1fr); }
  .practice-beat-map-workbench-head small { display: none; }
  .practice-beat-map-analysis-entry { flex: 1 1 auto; }
  .practice-beat-map-analysis-entry small { display: block; max-width: 260px; white-space: normal; }
}

@media(max-width:720px) {
  body.beat-calibration-workspace-open .practice-calibration-guide { display: none; }
  .practice-beat-map-workbench-grid { grid-template-columns: minmax(0,1fr); }
  .practice-beat-map-timeline-panel,
  .practice-beat-map-decisions,
  .practice-beat-map-impact { grid-column: 1; }
  .practice-beat-map-timeline-panel { grid-row: 1; }
  .practice-beat-map-decisions { grid-row: 2; }
  .practice-beat-map-impact { grid-row: 3; }
  .practice-beat-map-workbench-head { align-items: flex-start; }
  .practice-beat-map-summary span { display: none; }
  .practice-beat-map-analysis-entry { align-items: flex-start; flex-direction: column; gap: 4px; }
  .practice-beat-map-analysis-entry small { display: block !important; max-width: 220px; }
  .practice-beat-map-timeline-panel > footer { flex-wrap: wrap; }
  .practice-beat-map-impact { padding-block: 6px; }
  .practice-beat-map-impact p { min-height: 0; }
  .practice-beat-map-actions { flex-wrap: wrap; }
  .practice-beat-map-history { flex: 1 1 230px; }
  .practice-beat-map-history select { width: 100%; }
}

@media(max-height:850px) {
  body.beat-calibration-workspace-open .practice-calibration-guide { display: none; }
  body.beat-calibration-workspace-open .practice-beat-map-workbench { gap: 6px; padding-block: 7px; }
  body.beat-calibration-workspace-open .practice-beat-map-workbench-head { align-items: center; }
  body.beat-calibration-workspace-open .practice-beat-map-workbench-head > div:first-child { display: block; }
  body.beat-calibration-workspace-open .practice-beat-map-workbench-head > div:first-child > :not(:first-child) { display: none; }
  body.beat-calibration-workspace-open .practice-beat-map-narrow-settings-toggle { display: inline-flex; align-items: center; justify-content: center; }
  body.beat-calibration-workspace-open .practice-beat-map-workbench-grid { grid-template-columns: minmax(0,1fr) minmax(210px,.42fr); gap: 7px; }
  body.beat-calibration-workspace-open .practice-beat-map-timeline-panel { grid-column: 1; grid-row: 1; padding: 7px; }
  body.beat-calibration-workspace-open .practice-beat-map-impact { grid-column: 2; grid-row: 1; padding: 7px; }
  body.beat-calibration-workspace-open .practice-beat-map-impact p { min-height: 0; margin-block: 4px; }
  body.beat-calibration-workspace-open .practice-beat-map-decisions { display: none; grid-column: 1 / -1; grid-row: 2; padding: 7px; }
  body.beat-calibration-workspace-open .practice-beat-map-workbench.is-narrow-settings-open .practice-beat-map-decisions { display: grid; }
  body.beat-calibration-workspace-open .practice-beat-map-actions { min-height: 32px; flex-wrap: nowrap; gap: 5px; overflow-x: auto; }
  body.beat-calibration-workspace-open .practice-beat-map-actions > [data-beat-map-status] { min-width: 94px; }
}

@media(max-width:800px) and (max-height:850px) {
  body.beat-calibration-workspace-open .practice-beat-map-workbench-grid { grid-template-columns: minmax(0,1fr); }
  body.beat-calibration-workspace-open .practice-beat-map-timeline-panel { grid-column: 1; grid-row: 1; }
  body.beat-calibration-workspace-open .practice-beat-map-impact { display: none; }
  body.beat-calibration-workspace-open .practice-beat-map-timeline-panel { grid-template-rows: auto 48px auto; }
  body.beat-calibration-workspace-open .practice-beat-map-track::before { top: 24px; }
  body.beat-calibration-workspace-open .practice-beat-map-marker { top: 1px; height: 40px; }
  body.beat-calibration-workspace-open .practice-beat-map-actions > :is([data-beat-map-status], .practice-beat-map-ab, [data-action="beat-map-loop-audition"], [data-action="beat-map-audition"]) { display: none; }
}

/* Recording focus returns global chrome and secondary panels to the timeline. */
body.practice-recording-focus :is(.sidebar, .sidebar-resize-handle, .sidebar-collapse-handle, .topbar, .vc-help) { display: none !important; }
body.practice-recording-focus .main-content { width: 100vw; height: 100vh; padding: 0; overflow: hidden; }
body.practice-recording-focus #practiceStudio {
  width: 100vw;
  height: var(--practice-workspace-height, 100vh);
  max-height: var(--practice-workspace-height, 100vh);
  border-top: 0;
}
.practice-studio.recording-focus-mode .practice-head { min-height: 48px; grid-template-columns: minmax(180px, 1fr) auto 36px; gap: 10px; padding: 6px 12px; }
.practice-studio.recording-focus-mode .practice-head-main { gap: 8px; }
.practice-studio.recording-focus-mode .practice-head-main .practice-back,
.practice-studio.recording-focus-mode .practice-kicker,
.practice-studio.recording-focus-mode .practice-brand-title,
.practice-studio.recording-focus-mode .practice-brand-toggle,
.practice-studio.recording-focus-mode .practice-readiness-pills,
.practice-studio.recording-focus-mode .practice-source-settings,
.practice-studio.recording-focus-mode .practice-side-rail,
.practice-studio.recording-focus-mode .practice-secondary-panel,
.practice-studio.recording-focus-mode .practice-secondary-collapse-handle { display: none !important; }
.practice-studio.recording-focus-mode .practice-title-block h2 { margin: 0; font-size: 15px; }
.practice-studio.recording-focus-mode .practice-readiness { justify-content: flex-end; }
.practice-studio.recording-focus-mode .practice-focus-beat-toggle { display: inline-flex; }
.practice-studio.recording-focus-mode .practice-workspace { grid-template-columns: minmax(0, 1fr) !important; }
.practice-studio.recording-focus-mode .practice-stage { padding-inline: 10px; }
html[data-layout-mode="desktop"] .practice-studio.recording-focus-mode .practice-lyrics { flex: 0 0 var(--practice-lyrics-height, clamp(120px, 17vh, 190px)); height: var(--practice-lyrics-height, clamp(120px, 17vh, 190px)); }
html[data-layout-mode="desktop"] .practice-studio.recording-focus-mode .practice-runway { flex: 1 1 auto; height: auto; max-height: none; min-height: 280px; }
html[data-layout-mode="desktop"] .practice-studio.professional-recording-mode.recording-focus-mode .practice-lyrics { flex: 0 0 var(--practice-professional-lyrics-height, 104px); height: var(--practice-professional-lyrics-height, 104px); min-height: 64px; }
html[data-layout-mode="desktop"] .practice-studio.professional-recording-mode.recording-focus-mode .practice-runway { flex: 0 0 var(--practice-runway-height, 180px); height: var(--practice-runway-height, 180px); max-height: none; min-height: 108px; }

@media (max-width: 1080px) {
  .practice-studio { --practice-side-width: 240px; }
  .practice-control-strip { grid-template-columns: 1fr 1fr; }
  .practice-control-strip > .practice-icon-button { align-self: end; }
  .practice-workspace { grid-template-columns: minmax(0, 1fr) var(--practice-side-width); }
  .practice-head { grid-template-columns: minmax(180px, 1fr) auto 36px; }
  .practice-readiness-pills span { padding-right: 6px; }
}

@media (min-width: 1081px) and (max-width: 1220px) {
  .practice-studio { --practice-side-width: clamp(280px, 26vw, 340px); }
}

@media (max-height: 720px) {
  .practice-head { min-height: 60px; padding-block: 8px; }
  .practice-control-strip { padding-block: 8px; }
  .practice-stage { padding-top: 8px; }
  .practice-scoreboard > section,
  .practice-settings { padding: 12px 16px; }
  .practice-score-primary > strong { font-size: 36px; }
  .practice-transport { min-height: 56px; padding-block: 8px; }
}

@media (max-width: 820px) {
  .practice-studio { --practice-side-width: 100%; }
  .practice-head { grid-template-columns: 1fr 40px; }
  .practice-readiness { grid-column: 1 / -1; order: 3; }
  .practice-control-strip { grid-template-columns: 1fr; }
  .practice-workspace { display: block; overflow: auto; }
  .practice-stage { min-height: 560px; }
  .practice-side-rail { display: block; overflow: visible; }
  .practice-scoreboard { border-top: 1px solid var(--practice-line); border-left: 0; }
  .practice-transport { position: sticky; bottom: 0; justify-content: flex-start; overflow-x: auto; }
  .practice-transport-status { min-width: 100px; }
  .project-header-actions { align-items: flex-end; flex-direction: column; }
}

@media (max-width: 1120px) {
  .practice-recording-next { grid-template-columns: 1fr; gap: 7px; }
  .practice-recording-next-actions { flex-wrap: wrap; }
}

html[data-layout-mode="desktop"] .practice-head {
  min-height: 52px;
  gap: 12px;
  padding: 6px 16px;
}
html[data-layout-mode="desktop"] .practice-control-strip {
  min-height: 68px;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.28fr) minmax(0, 1.12fr) minmax(0, 1.12fr) 112px 76px 34px;
  gap: 8px;
  padding: 9px 18px 10px;
}
html[data-layout-mode="desktop"] .practice-control-strip label,
html[data-layout-mode="desktop"] .practice-control-field { gap: 4px; font-size: 10px; }
html[data-layout-mode="desktop"] .practice-workspace { grid-template-columns: minmax(0, 1fr) var(--practice-side-width); }
html[data-layout-mode="desktop"] .practice-stage { padding: 0 18px 5px; }
html[data-layout-mode="desktop"] .practice-lyrics {
  flex: 0 0 var(--practice-lyrics-height, clamp(150px, 20vh, 230px));
  height: var(--practice-lyrics-height, clamp(150px, 20vh, 230px));
  min-height: calc(var(--practice-lyric-size) * (var(--practice-lyric-line-height, 1.25) * 3 + 0.15) + 14px);
  padding: 7px 12px 14px;
}
html[data-layout-mode="desktop"] .practice-lyrics[data-lyric-rows="2"] {
  flex-basis: var(--practice-lyrics-height, clamp(132px, 16vh, 188px));
  height: var(--practice-lyrics-height, clamp(132px, 16vh, 188px));
  min-height: calc(var(--practice-lyric-size) * (var(--practice-lyric-line-height, 1.25) * 2 + 0.15) + 12px);
}
html[data-layout-mode="desktop"] .practice-lyrics[data-lyric-rows="3"] {
  flex-basis: var(--practice-lyrics-height, clamp(168px, 22vh, 260px));
  height: var(--practice-lyrics-height, clamp(168px, 22vh, 260px));
}
html[data-layout-mode="desktop"] .practice-lyrics[data-display-mode="dual"] {
  flex-basis: var(--practice-lyrics-height, clamp(180px, 24vh, 300px));
  height: var(--practice-lyrics-height, clamp(180px, 24vh, 300px));
  min-height: calc(var(--practice-lyric-size) * (var(--practice-lyric-line-height, 1.25) * 2 + 1.1) + 20px);
}
html[data-layout-mode="desktop"] .practice-lyrics[data-display-mode="dual"][data-jyutping="1"] {
  flex-basis: var(--practice-lyrics-height, clamp(220px, 30vh, 360px));
  height: var(--practice-lyrics-height, clamp(220px, 30vh, 360px));
  min-height: calc(var(--practice-lyric-size) * (var(--practice-lyric-line-height, 1.25) * 2 + 2.9) + 28px);
}
html[data-layout-mode="desktop"] .practice-runway {
  --practice-runway-content-top: 44px;
  flex: 0 0 var(--practice-runway-height, clamp(200px, 26vh, 320px));
  height: var(--practice-runway-height, clamp(200px, 26vh, 320px));
  max-height: 420px;
  min-height: 200px;
  padding-top: var(--practice-runway-content-top);
  /* Avoid a divider directly under the lyric surface. */
  border: 0;
  border-radius: 6px;
  background: var(--practice-canvas-bg);
}
html[data-layout-mode="desktop"] .practice-runway canvas {
  inset: var(--practice-runway-content-top) 0 0;
  height: calc(100% - var(--practice-runway-content-top));
}
html[data-layout-mode="desktop"] .practice-runway > .practice-pitch-scroll-layer,
html[data-layout-mode="desktop"] .practice-runway > canvas[data-pitch-canvas-blocks] {
  top: var(--practice-runway-content-top);
  bottom: auto;
  height: calc(100% - var(--practice-runway-content-top));
}
/* Ordinary rehearsal: one divider under lyrics; runway fills the remaining stage. */
html[data-layout-mode="desktop"] .practice-studio:not(.professional-recording-mode) .practice-runway {
  flex: 1 1 auto;
  height: auto;
  max-height: none;
  min-height: 200px;
}
html[data-layout-mode="desktop"] .practice-studio:not(.professional-recording-mode) .practice-runway-resize {
  display: none !important;
}
html[data-layout-mode="desktop"] .practice-pitch-tools { top: 6px; left: 10px; right: 10px; width: auto; max-width: none; }
html[data-layout-mode="desktop"] .practice-pitch-tools button,
html[data-layout-mode="desktop"] .practice-pitch-tools details > summary { min-height: 28px; }
html[data-layout-mode="portrait-preview"] .practice-pitch-style-picker-value,
html[data-layout-mode="portrait-native"] .practice-pitch-style-picker-value { max-width: 5.5em; font-size: 11px; }
html[data-layout-mode="desktop"] .practice-studio.professional-recording-mode .practice-lyrics { flex: 0 0 var(--practice-professional-lyrics-height, 104px); height: var(--practice-professional-lyrics-height, 104px); min-height: 64px; padding-block: 3px; }
html[data-layout-mode="desktop"] .practice-studio.professional-recording-mode .practice-runway { flex: 0 0 var(--practice-runway-height, 180px); height: var(--practice-runway-height, 180px); min-height: 108px; max-height: none; }
html[data-layout-mode="desktop"] .practice-studio.professional-recording-mode .practice-recording-takes { flex: 1 1 auto; min-height: 200px; max-height: none; }
html[data-layout-mode="desktop"] .practice-studio.professional-recording-mode .practice-recording-takes.has-many-takes { flex-basis: auto; min-height: 240px; max-height: none; }
html[data-layout-mode="desktop"] .practice-studio.professional-recording-mode.recording-lanes-expanded .practice-lyrics { flex-basis: 64px; height: 64px; min-height: 64px; }
html[data-layout-mode="desktop"] .practice-studio.professional-recording-mode.recording-lanes-expanded .practice-runway { flex: 0 1 124px; height: 124px; min-height: 108px; max-height: 140px; }
html[data-layout-mode="desktop"] .practice-studio.professional-recording-mode.recording-lanes-expanded .practice-recording-takes { flex: 1 1 0; min-height: 240px; max-height: none; }
html[data-layout-mode="desktop"] .practice-studio.professional-recording-mode.recording-lanes-expanded .practice-recording-take-row { min-height: var(--practice-recording-row-height, 72px); }
html[data-layout-mode="desktop"] .practice-timeline {
  flex: 0 0 50px;
  box-sizing: border-box;
  min-height: 50px;
  display: grid;
  visibility: visible;
  grid-template-columns: auto 42px minmax(0, 1fr) 42px;
  gap: 9px;
  margin-top: 5px;
  padding: 5px 10px;
  border-top: 1px solid var(--practice-line);
  border-bottom: 1px solid var(--practice-line);
  background: var(--practice-control-strip-bg);
}
html[data-layout-mode="desktop"] .practice-timeline-label { display: inline; color: var(--practice-text); font-size: 12px; font-weight: 750; }
html[data-layout-mode="desktop"] .practice-timeline-overview { height: 22px; }
html[data-layout-mode="desktop"] .practice-timeline input[type="range"]::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  appearance: none;
  border: 2px solid var(--practice-bg);
  border-radius: 50%;
  background: var(--practice-coral);
}
html[data-layout-mode="desktop"] .practice-scoreboard {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
}
.practice-secondary-collapse-handle {
  position: absolute;
  z-index: 216;
  top: 0;
  bottom: 0;
  right: calc(var(--practice-side-width) - 9px);
  display: grid;
  width: 18px;
  height: 54px;
  margin-block: auto;
  place-items: center;
  margin-inline: 0;
  padding: 0;
  border: 1px solid var(--practice-line);
  border-radius: 7px;
  color: var(--practice-muted);
  background: var(--practice-panel);
  cursor: pointer;
  justify-self: end;
  align-self: center;
  -webkit-app-region: no-drag;
  app-region: no-drag;
  touch-action: manipulation;
}
.practice-secondary-collapse-handle:hover,
.practice-secondary-collapse-handle:focus-visible { color: var(--practice-green); background: var(--state-hover); }
.practice-secondary-collapse-handle > .sr-command-icon { display: none !important; }
.practice-studio.secondary-panel-collapsed .practice-workspace { grid-template-columns: minmax(0, 1fr) 0; }
.secondary-panel-collapsed .practice-secondary-panel { display: none; }
.secondary-panel-collapsed .practice-side-rail { grid-template-rows: minmax(0, 1fr) 0; }
.secondary-panel-collapsed .practice-secondary-collapse-handle {
  right: 8px;
  border-radius: 7px;
  width: 22px;
  height: 64px;
}
.secondary-panel-collapsed .practice-secondary-collapse-handle::before {
  content: '';
  position: absolute;
  inset: -18px -6px -18px -14px;
}
html[data-layout-mode="desktop"] .practice-studio { position: relative; --practice-side-width: clamp(320px, 24vw, 380px); }
html[data-layout-mode="portrait-preview"] .practice-secondary-collapse-handle,
html[data-layout-mode="portrait-native"] .practice-secondary-collapse-handle { display: none; }
html[data-layout-mode="desktop"] .practice-scoreboard-head {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px 8px 18px;
  border-bottom: 1px solid var(--practice-line);
  box-sizing: border-box;
}
html[data-layout-mode="desktop"] .practice-scoreboard-head-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 2px;
}
html[data-layout-mode="desktop"] .practice-scoreboard-head-copy strong {
  font-size: 13px;
}
html[data-layout-mode="desktop"] .practice-scoreboard-head-copy span {
  min-width: 0;
  color: var(--practice-muted);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-layout-mode="desktop"] .practice-scoreboard-recording-settings {
  min-height: 34px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--button-accent-border);
  border-radius: 6px;
  color: var(--button-accent-text);
  background: var(--button-accent-bg);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
html[data-layout-mode="desktop"] .practice-scoreboard-recording-settings:hover { background: var(--button-accent-bg-hover); }
html[data-layout-mode="desktop"] .practice-scoreboard-recording-settings:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; }
html[data-layout-mode="desktop"] .practice-scoreboard-recording-settings svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html[data-layout-mode="desktop"] .practice-scoreboard-recording-settings span { color: inherit; font: inherit; white-space: nowrap; }
html[data-layout-mode="desktop"] .practice-side-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 8px 14px 8px 16px;
  border-bottom: 1px solid var(--practice-line);
  box-sizing: border-box;
}
html[data-layout-mode="desktop"] .practice-side-tabs button {
  min-height: 34px;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--practice-muted);
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  overflow: hidden;
  white-space: nowrap;
}
html[data-layout-mode="desktop"] .practice-side-tabs button:hover { background: var(--state-hover); color: var(--practice-text); }
html[data-layout-mode="desktop"] .practice-side-tabs button[aria-selected="true"] { border-color: var(--button-accent-border); color: var(--button-accent-text); background: var(--state-selected); }
html[data-layout-mode="desktop"] .practice-side-tabs button span { margin-left: 4px; font-variant-numeric: tabular-nums; }
html[data-layout-mode="desktop"] .practice-score-live { display: block; min-height: 0; overflow: auto; }
html[data-layout-mode="desktop"] .practice-score-live > section,
html[data-layout-mode="desktop"] .practice-score-live > .practice-settings {
  padding: 14px 18px;
  box-sizing: border-box;
}
html[data-layout-mode="desktop"] .practice-scoreboard .practice-history { display: none; }
html[data-layout-mode="desktop"] .practice-scoreboard.is-history-view .practice-score-live { display: none; }
html[data-layout-mode="desktop"] .practice-scoreboard.is-history-view .practice-history { display: flex; }
html[data-layout-mode="desktop"] .practice-scoreboard > section,
html[data-layout-mode="desktop"] .practice-settings {
  padding: 14px 20px 14px 18px;
  box-sizing: border-box;
}
html[data-layout-mode="desktop"] .practice-score-primary {
  min-height: 72px;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(48px, auto);
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  column-gap: 10px;
  text-align: left;
}
html[data-layout-mode="desktop"] .practice-score-primary > span { grid-column: 1; grid-row: 1; font-size: 12px; }
html[data-layout-mode="desktop"] .practice-score-primary > em { grid-column: 1; grid-row: 2; font-size: 12px; }
html[data-layout-mode="desktop"] .practice-score-primary > strong {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
  width: 64px;
  min-height: 50px;
  display: grid;
  place-items: center;
  justify-self: end;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--app-warm) 48%, var(--app-line));
  border-radius: 7px;
  background: var(--status-warning-bg);
  max-width: 100%;
  overflow: hidden;
  font-size: 32px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Target-line editor: keep the timeline dominant and group controls by task. */
.practice-pitch-editor-toolbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 6px; padding: 7px 12px; overflow: hidden; }
.pitch-toolbar-group { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; min-width: 0; }
.pitch-toolbar-label { color: var(--app-muted); font-size: 9px; font-weight: 800; letter-spacing: .02em; }
.pitch-toolbar-group button, .pitch-toolbar-group select, .pitch-toolbar-more button { min-height: 28px; padding: 0 7px; font-size: 10px; }
.pitch-toolbar-group select { min-width: 72px; }
.pitch-toolbar-edit { overflow: hidden; }
.pitch-toolbar-edit button { max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pitch-toolbar-more { min-width: 88px; color: var(--app-muted); font-size: 10px; }
.pitch-toolbar-more summary { min-height: 28px; display: grid; place-items: center; padding: 0 7px; border: 1px solid var(--app-line); border-radius: 5px; cursor: pointer; list-style: none; }
.pitch-toolbar-more summary::-webkit-details-marker { display: none; }
.pitch-toolbar-more > div { position: absolute; z-index: 12; display: flex; gap: 5px; padding: 7px; border: 1px solid var(--app-line); border-radius: 6px; background: var(--app-panel); box-shadow: 0 8px 24px color-mix(in srgb, var(--app-bg) 55%, transparent); }
.pitch-toolbar-more label { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.pitch-toolbar-status { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--app-muted); font-size: 9px; white-space: nowrap; }
.pitch-toolbar-status .practice-pitch-selection-status { overflow: hidden; text-overflow: ellipsis; }
.practice-pitch-editor-body { grid-template-columns: minmax(0, 1fr) 230px; }
.practice-pitch-inspector { min-width: 0; overflow: auto; }
.practice-pitch-pan-strip { min-height: 28px; display: grid; grid-template-columns: minmax(0, 1fr) auto; place-items: center stretch; cursor: grab; color: var(--app-muted); background: var(--app-panel-2); border-top: 1px solid var(--app-line); }
.practice-pitch-pan-strip:active { cursor: grabbing; }
@media (max-width: 1180px) { .practice-pitch-editor-toolbar { grid-template-columns: 1fr 1fr; align-items: start; max-height: 96px; overflow-y: auto; } .pitch-toolbar-status { grid-column: 1 / -1; } }
@media (max-width: 760px) { .practice-pitch-editor-toolbar { grid-template-columns: 1fr; max-height: 170px; } .pitch-toolbar-status { grid-column: auto; } .practice-pitch-editor-body { grid-template-columns: minmax(0, 1fr); } .practice-pitch-inspector { max-height: 210px; border-top: 1px solid var(--app-line); } }

/* Final editor layout: Song-like roll fills the remaining grid row; inspector is a drawer. */
.practice-pitch-editor-toolbar { display: flex; flex-wrap: nowrap; min-height: 42px; max-height: 42px; padding: 5px 14px; overflow: visible; }
.practice-pitch-editor-body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  height: auto;
  overflow: hidden;
  background: var(--practice-canvas-bg);
}
.practice-piano-scroll {
  position: relative;
  inset: auto;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
}
.practice-pitch-inspector {
  position: absolute;
  z-index: 20;
  top: 8px;
  right: 8px;
  bottom: 8px;
  width: min(280px, calc(100% - 32px));
  max-height: none;
  padding: 14px;
  overflow: auto;
  border: 1px solid var(--app-line);
  border-radius: 6px;
  background: var(--app-panel);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--app-bg) 55%, transparent);
  transform: translateX(calc(100% + 18px));
  transition: transform 180ms ease-out;
  pointer-events: none;
}
.practice-pitch-inspector.is-open { transform: translateX(0); pointer-events: auto; }
.practice-pitch-pan-strip { min-height: 20px; }
@media (max-width: 760px) { .practice-pitch-editor-toolbar { display: flex; flex-wrap: nowrap; min-height: 42px; max-height: 42px; overflow-x: auto; } }

/* Full-studio overlay; practice workspace stays hidden underneath. */
.pitch-editor-open .practice-pitch-editor {
  position: absolute;
  z-index: 230;
  inset: 0;
  display: grid;
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto;
  background: var(--app-bg);
  pointer-events: auto;
}
html[data-layout-mode="desktop"] .pitch-editor-open .practice-stage > .practice-transport { display: none; }

html[data-layout-mode="desktop"] .practice-score-grid {
  min-height: 58px;
  min-width: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
html[data-layout-mode="desktop"] .practice-score-grid div { align-content: center; min-width: 0; padding: 0 8px; border-left: 1px solid var(--practice-line); }
html[data-layout-mode="desktop"] .practice-score-grid div:first-child { padding-left: 0; border-left: 0; }
html[data-layout-mode="desktop"] .practice-score-grid div:last-child { padding-right: 0; }
html[data-layout-mode="desktop"] .practice-score-grid span { font-size: 11px; }
html[data-layout-mode="desktop"] .practice-score-grid strong { font-size: 16px; }
html[data-layout-mode="desktop"] .practice-meter-section { min-height: 58px; min-width: 0; }
html[data-layout-mode="desktop"] .practice-section-title { font-size: 11px; gap: 8px; }
html[data-layout-mode="desktop"] .practice-section-title strong {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-layout-mode="desktop"] .practice-settings summary { min-height: 24px; display: flex; align-items: center; font-size: 13px; }
html[data-layout-mode="desktop"] .practice-settings[open] { max-height: 290px; overflow: auto; }
html[data-layout-mode="desktop"] .practice-history {
  min-height: 140px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
html[data-layout-mode="desktop"] .practice-history > [data-practice-history] { min-height: 0; overflow: auto; }
html[data-layout-mode="desktop"] .practice-history-row { padding: 8px 0; }
html[data-layout-mode="desktop"] .practice-transport { min-height: 60px; gap: 8px; padding: 8px 18px; }
html[data-layout-mode="desktop"] .practice-transport-status { min-width: 0; max-width: 220px; margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

html[data-layout-mode="portrait-preview"] .practice-studio,
html[data-layout-mode="portrait-native"] .practice-studio {
  height: var(--practice-portrait-height, calc(100vh - 270px));
  max-height: var(--practice-portrait-height, calc(100vh - 270px));
}
html[data-layout-mode="portrait-preview"] .practice-source-settings,
html[data-layout-mode="portrait-native"] .practice-source-settings {
  flex: 0 0 auto;
}
html[data-layout-mode="portrait-preview"] .practice-readiness,
html[data-layout-mode="portrait-native"] .practice-readiness { flex-wrap: nowrap; gap: 4px; }
html[data-layout-mode="portrait-preview"] .practice-readiness > .practice-mode-switch,
html[data-layout-mode="portrait-native"] .practice-readiness > .practice-mode-switch,
html[data-layout-mode="portrait-preview"] .practice-head-actions > .practice-mode-switch,
html[data-layout-mode="portrait-native"] .practice-head-actions > .practice-mode-switch {
  width: auto;
  min-width: 96px;
  height: 28px;
  gap: 5px;
  padding-inline: 8px 6px;
  font-size: 10px;
}
html[data-layout-mode="portrait-preview"] .practice-source-settings > summary,
html[data-layout-mode="portrait-native"] .practice-source-settings > summary {
  min-height: 50px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 12px;
  padding: 8px 16px;
  color: var(--practice-text);
  cursor: pointer;
  list-style: none;
}
html[data-layout-mode="portrait-preview"] .practice-source-settings > summary::-webkit-details-marker,
html[data-layout-mode="portrait-native"] .practice-source-settings > summary::-webkit-details-marker { display: none; }
html[data-layout-mode="portrait-preview"] .practice-source-settings > summary span,
html[data-layout-mode="portrait-native"] .practice-source-settings > summary span { font-size: 12px; font-weight: 800; }
html[data-layout-mode="portrait-preview"] .practice-source-settings > summary small,
html[data-layout-mode="portrait-native"] .practice-source-settings > summary small { grid-column: 1; color: var(--practice-muted); font-size: 9px; }
html[data-layout-mode="portrait-preview"] .practice-source-settings > summary i,
html[data-layout-mode="portrait-native"] .practice-source-settings > summary i { grid-column: 2; grid-row: 1 / span 2; color: var(--practice-muted); font-style: normal; transition: transform 150ms ease; }
html[data-layout-mode="portrait-preview"] .practice-source-settings[open] > summary i,
html[data-layout-mode="portrait-native"] .practice-source-settings[open] > summary i { transform: rotate(180deg); }
html[data-layout-mode="portrait-preview"] .practice-control-strip,
html[data-layout-mode="portrait-native"] .practice-control-strip { padding: 10px 16px 14px; border-top: 1px solid var(--practice-line); border-bottom: 0; }
html[data-layout-mode="portrait-preview"] .practice-workspace,
html[data-layout-mode="portrait-native"] .practice-workspace { display: flex; flex-direction: column; min-height: 0; overflow: auto; }
html[data-layout-mode="portrait-preview"] .practice-stage,
html[data-layout-mode="portrait-native"] .practice-stage { flex: 0 0 auto; min-height: 0; padding: 8px 16px 6px; }
html[data-layout-mode="portrait-preview"] .practice-runway,
html[data-layout-mode="portrait-native"] .practice-runway {
  flex: 0 0 var(--practice-runway-height, clamp(138px, 18vh, 180px));
  min-height: 138px;
  height: var(--practice-runway-height, clamp(138px, 18vh, 180px));
  padding-top: var(--practice-runway-content-top, 44px);
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .practice-runway canvas {
  inset: var(--practice-runway-content-top, 44px) 0 0;
  height: calc(100% - var(--practice-runway-content-top, 44px));
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .practice-runway > .practice-pitch-scroll-layer,
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .practice-runway > canvas[data-pitch-canvas-blocks] {
  top: var(--practice-runway-content-top, 44px);
  bottom: auto;
  height: calc(100% - var(--practice-runway-content-top, 44px));
}
html[data-layout-mode="portrait-preview"] .practice-pitch-tools,
html[data-layout-mode="portrait-native"] .practice-pitch-tools { top: 8px; left: 50px; right: 12px; width: auto; max-width: none; }
html[data-layout-mode="portrait-preview"] .practice-pitch-tools button,
html[data-layout-mode="portrait-native"] .practice-pitch-tools button,
html[data-layout-mode="portrait-preview"] .practice-pitch-tools details > summary,
html[data-layout-mode="portrait-native"] .practice-pitch-tools details > summary { min-height: 26px; padding-inline: 7px; font-size: 9px; }
html[data-layout-mode="portrait-preview"] .practice-pitch-tools[data-pitch-tools-mode="icons"] button[data-toolbar-control],
html[data-layout-mode="portrait-native"] .practice-pitch-tools[data-pitch-tools-mode="icons"] button[data-toolbar-control],
html[data-layout-mode="portrait-preview"] .practice-pitch-tools[data-pitch-tools-mode="icons"] details > summary[data-toolbar-control],
html[data-layout-mode="portrait-native"] .practice-pitch-tools[data-pitch-tools-mode="icons"] details > summary[data-toolbar-control] {
  width: 26px;
  min-width: 26px;
  padding-inline: 0;
}
html[data-layout-mode="portrait-preview"] .practice-transport-beat-guide,
html[data-layout-mode="portrait-native"] .practice-transport-beat-guide,
html[data-layout-mode="portrait-preview"] .practice-transport-metronome,
html[data-layout-mode="portrait-native"] .practice-transport-metronome {
  height: 32px;
  min-height: 32px;
  min-width: 32px;
  padding-inline: 8px;
}
html[data-layout-mode="portrait-preview"] .practice-transport-beat-guide .practice-toolbar-label,
html[data-layout-mode="portrait-native"] .practice-transport-beat-guide .practice-toolbar-label,
html[data-layout-mode="portrait-preview"] .practice-transport-metronome .practice-toolbar-label,
html[data-layout-mode="portrait-native"] .practice-transport-metronome .practice-toolbar-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
/* Pitch editor owns the studio; hide rehearsal chrome underneath. */
.pitch-editor-open .practice-workspace {
  visibility: hidden;
  pointer-events: none;
}
.pitch-editor-open .practice-pitch-tools { display: none; }

/* Target editor chrome + roll height (must not collapse body/scroll). */
.practice-pitch-editor {
  display: grid;
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto;
  min-height: 0;
}
.practice-pitch-editor > header { min-height: 54px; padding: 8px 14px; }
.practice-pitch-editor-title { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 0 8px; }
.practice-pitch-editor-title > span { font-size: 9px; font-weight: 700; color: var(--app-muted); }
.practice-pitch-editor-title > strong { font-size: 16px; }
.practice-pitch-editor-title > small { grid-column: 1 / -1; margin-top: 2px; font-size: 10px; }
.practice-pitch-editor-actions { gap: 5px; }
.practice-pitch-editor-actions button { min-width: 30px; min-height: 30px; padding: 0 8px; }
.practice-pitch-editor-actions [data-action="pitch-save"] { min-width: 52px; }
.practice-pitch-editor-toolbar { position: relative; display: flex; flex-wrap: nowrap; min-height: 42px; max-height: 42px; padding: 5px 14px; gap: 6px; overflow: visible; }
.practice-pitch-editor-toolbar > button { min-height: 30px; padding-inline: 8px; }
.practice-pitch-editor-toolbar > label { display: inline-flex; align-items: center; min-height: 30px; gap: 5px; font-size: 10px; }
.practice-pitch-editor-toolbar select { min-width: 76px; height: 30px; }
.practice-pitch-editor-toolbar > .practice-pitch-selection-status { margin-left: auto; overflow: hidden; text-overflow: ellipsis; }
.practice-pitch-editor-toolbar > [data-pitch-note-count] { flex: 0 0 auto; color: var(--app-muted); font-size: 10px; white-space: nowrap; }
.pitch-toolbar-more { position: relative; flex: 0 0 auto; }
.pitch-toolbar-more > summary { display: grid; place-items: center; min-height: 30px; padding: 0 8px; border: 1px solid var(--app-line); border-radius: 5px; color: var(--app-text); background: var(--button-secondary-bg); cursor: pointer; list-style: none; }
.pitch-toolbar-more > summary::-webkit-details-marker { display: none; }
.pitch-toolbar-more > div { position: absolute; z-index: 25; top: calc(100% + 6px); right: 0; display: none; width: 260px; padding: 9px; gap: 7px; border: 1px solid var(--app-line); border-radius: 6px; background: var(--app-panel); box-shadow: 0 12px 30px color-mix(in srgb, var(--app-bg) 55%, transparent); }
.pitch-toolbar-more[open] > div { display: grid; }
.pitch-toolbar-more label { display: flex; align-items: center; gap: 6px; color: var(--app-muted); font-size: 10px; }
.pitch-toolbar-more .practice-pitch-variant-picker { display: grid !important; }
.practice-pitch-preview-bar { min-height: 34px; padding: 4px 14px; gap: 9px; }
.practice-pitch-preview-bar > button { min-height: 26px; padding-inline: 8px; }
.practice-pitch-preview-bar .practice-pitch-preview-volume { display: grid; grid-template-columns: auto 64px auto; min-width: 0; gap: 4px; font-size: 9px; }
.practice-pitch-preview-bar .practice-pitch-preview-volume input { width: 64px; }
.practice-pitch-preview-bar .practice-pitch-preview-volume output { min-width: 29px; }
.practice-pitch-editor-lyrics { min-height: 36px; max-height: 40px; padding: 4px 14px; }
.practice-pitch-editor-lyrics button { min-width: 124px; min-height: 27px; }
.practice-pitch-editor-body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  background: var(--practice-canvas-bg);
}
.practice-piano-scroll {
  position: relative;
  inset: auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
.practice-pitch-inspector {
  position: absolute;
  z-index: 20;
  top: 8px;
  right: 8px;
  bottom: 8px;
  width: min(280px, calc(100% - 32px));
  padding: 14px;
  border: 1px solid var(--app-line);
  border-radius: 6px;
  background: var(--app-panel);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--app-bg) 55%, transparent);
  transform: translateX(calc(100% + 18px));
  transition: transform 180ms ease-out;
  pointer-events: none;
}
.practice-pitch-inspector.is-open { transform: translateX(0); pointer-events: auto; }
.practice-pitch-pan-strip { min-height: 20px; font-size: 9px; }
@media (max-width: 900px) { .practice-pitch-editor-toolbar > .practice-pitch-selection-status { display: none; } .practice-pitch-preview-volume { display: none !important; } }
body:has(.practice-studio.pitch-editor-open) .topbar { display: none; }
body:has(.practice-studio.pitch-editor-open) .main-content { padding-top: 0; }
body:has(.practice-studio.pitch-editor-open) .practice-studio { height: 100vh; max-height: 100vh; }
html[data-layout-mode="portrait-preview"] .practice-scoreboard,
html[data-layout-mode="portrait-native"] .practice-scoreboard { flex: 0 0 auto; }
html[data-layout-mode="portrait-preview"] .practice-secondary-panel,
html[data-layout-mode="portrait-native"] .practice-secondary-panel {
  display: block;
  flex: 0 0 auto;
  border-top: 1px solid var(--practice-line);
  background: var(--practice-panel);
}
html[data-layout-mode="portrait-preview"] .practice-secondary-panel > summary,
html[data-layout-mode="portrait-native"] .practice-secondary-panel > summary {
  min-height: 54px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 12px;
  padding: 8px 16px;
  color: var(--practice-text);
  cursor: pointer;
  list-style: none;
}
html[data-layout-mode="portrait-preview"] .practice-secondary-panel > summary::-webkit-details-marker,
html[data-layout-mode="portrait-native"] .practice-secondary-panel > summary::-webkit-details-marker { display: none; }
html[data-layout-mode="portrait-preview"] .practice-secondary-panel > summary span,
html[data-layout-mode="portrait-native"] .practice-secondary-panel > summary span { font-size: 12px; font-weight: 800; }
html[data-layout-mode="portrait-preview"] .practice-secondary-panel > summary small,
html[data-layout-mode="portrait-native"] .practice-secondary-panel > summary small { grid-column: 1; color: var(--practice-muted); font-size: 9px; }
html[data-layout-mode="portrait-preview"] .practice-secondary-panel > summary i,
html[data-layout-mode="portrait-native"] .practice-secondary-panel > summary i { grid-column: 2; grid-row: 1 / span 2; color: var(--practice-muted); font-style: normal; transition: transform 150ms ease; }
html[data-layout-mode="portrait-preview"] .practice-secondary-panel[open] > summary i,
html[data-layout-mode="portrait-native"] .practice-secondary-panel[open] > summary i { transform: rotate(180deg); }
html[data-layout-mode="portrait-preview"] .practice-secondary-panel .practice-scoreboard,
html[data-layout-mode="portrait-native"] .practice-secondary-panel .practice-scoreboard { border-top: 1px solid var(--practice-line); border-left: 0; }
html[data-layout-mode="portrait-preview"] .practice-stage > .practice-transport,
html[data-layout-mode="portrait-native"] .practice-stage > .practice-transport {
  position: static;
  min-height: 118px;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 32px;
  align-items: center;
  justify-content: stretch;
  gap: 6px;
  margin: 0 -16px -6px;
  padding: 7px 12px;
  overflow: hidden;
}
html[data-layout-mode="portrait-preview"] .practice-stage > .practice-transport .practice-transport-group,
html[data-layout-mode="portrait-native"] .practice-stage > .practice-transport .practice-transport-group { display: contents; }
html[data-layout-mode="portrait-preview"] .practice-stage > .practice-transport .practice-icon-button,
html[data-layout-mode="portrait-native"] .practice-stage > .practice-transport .practice-icon-button {
  width: 100%;
  height: 34px;
  flex-basis: auto;
}
html[data-layout-mode="portrait-preview"] .practice-stage > .practice-transport :is(.practice-play, .practice-stop, .practice-start, .practice-play-separately, .practice-finish, .practice-discard, .practice-replay-latest, .practice-record-again, .practice-punch-record),
html[data-layout-mode="portrait-native"] .practice-stage > .practice-transport :is(.practice-play, .practice-stop, .practice-start, .practice-play-separately, .practice-finish, .practice-discard, .practice-replay-latest, .practice-record-again, .practice-punch-record) {
  width: 100%;
  height: 36px;
  min-width: 0;
  padding-inline: 4px;
  justify-content: center;
  white-space: nowrap;
}
html[data-layout-mode="portrait-preview"] .practice-stage > .practice-transport .practice-transport-labeled,
html[data-layout-mode="portrait-native"] .practice-stage > .practice-transport .practice-transport-labeled {
  width: 100%;
  height: 32px;
  min-width: 0;
  padding-inline: 4px;
}
html[data-layout-mode="portrait-preview"] .practice-stage > .practice-transport .practice-replay-accompaniment,
html[data-layout-mode="portrait-native"] .practice-stage > .practice-transport .practice-replay-accompaniment {
  width: 100%;
  height: 36px;
  min-width: 0;
  padding-inline: 4px;
  justify-content: center;
  white-space: nowrap;
  font-size: 12px;
}
html[data-layout-mode="portrait-preview"] .practice-stage > .practice-transport :is(.practice-play, .practice-stop, .practice-start, .practice-play-separately, .practice-finish, .practice-discard, .practice-replay-latest, .practice-record-again, .practice-punch-record) strong,
html[data-layout-mode="portrait-native"] .practice-stage > .practice-transport :is(.practice-play, .practice-stop, .practice-start, .practice-play-separately, .practice-finish, .practice-discard, .practice-replay-latest, .practice-record-again, .practice-punch-record) strong {
  white-space: nowrap;
  font-size: 12px;
}
/* Portrait transport cells must shrink inside the six-column grid. The queue
   count is secondary information and previously pushed its label over the
   adjacent replay-accompaniment control at 83% application zoom. */
html[data-layout-mode="portrait-preview"] .practice-stage > .practice-transport .practice-queue-menu,
html[data-layout-mode="portrait-native"] .practice-stage > .practice-transport .practice-queue-menu,
html[data-layout-mode="portrait-preview"] .practice-stage > .practice-transport .practice-queue-menu > summary,
html[data-layout-mode="portrait-native"] .practice-stage > .practice-transport .practice-queue-menu > summary {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
html[data-layout-mode="portrait-preview"] .practice-stage > .practice-transport .practice-queue-menu > summary,
html[data-layout-mode="portrait-native"] .practice-stage > .practice-transport .practice-queue-menu > summary { padding-inline: 6px; }
html[data-layout-mode="portrait-preview"] .practice-stage > .practice-transport .practice-queue-menu > summary strong,
html[data-layout-mode="portrait-native"] .practice-stage > .practice-transport .practice-queue-menu > summary strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-layout-mode="portrait-preview"] .practice-stage > .practice-transport .practice-queue-menu > summary small,
html[data-layout-mode="portrait-native"] .practice-stage > .practice-transport .practice-queue-menu > summary small { display: none; }
html[data-layout-mode="portrait-preview"] .practice-stage > .practice-transport .practice-replay-accompaniment,
html[data-layout-mode="portrait-native"] .practice-stage > .practice-transport .practice-replay-accompaniment { overflow: hidden; }
html[data-layout-mode="portrait-preview"] .practice-stage > .practice-transport .practice-replay-accompaniment > span,
html[data-layout-mode="portrait-native"] .practice-stage > .practice-transport .practice-replay-accompaniment > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-layout-mode="portrait-preview"] .practice-stage > .practice-transport .practice-transport-status,
html[data-layout-mode="portrait-native"] .practice-stage > .practice-transport .practice-transport-status {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
  flex: none;
  min-width: 0;
  margin-left: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  text-align: center;
}

/* Portrait capture surfaces: keep the song, pitch runway and transport visible
   together without changing the desktop studio proportions. */
html[data-layout-mode="portrait-preview"] .practice-head,
html[data-layout-mode="portrait-native"] .practice-head {
  min-height: 76px;
  grid-template-columns: minmax(0, 1fr) auto 44px;
  grid-template-rows: auto auto;
  gap: 8px;
  padding: 6px 12px;
}
html[data-layout-mode="portrait-preview"] .practice-head-main,
html[data-layout-mode="portrait-native"] .practice-head-main { grid-column: 1; grid-row: 1; }
html[data-layout-mode="portrait-preview"] .practice-head > .practice-brand-title,
html[data-layout-mode="portrait-native"] .practice-head > .practice-brand-title { grid-column: 2; grid-row: 1; align-self: center; }
html[data-layout-mode="portrait-preview"] .practice-head > .practice-brand-toggle,
html[data-layout-mode="portrait-native"] .practice-head > .practice-brand-toggle { grid-column: 3; grid-row: 1; align-self: center; }
html[data-layout-mode="portrait-preview"] .practice-readiness,
html[data-layout-mode="portrait-native"] .practice-readiness { grid-column: 1 / -1; grid-row: 2; }
html[data-layout-mode="portrait-preview"] .practice-head .practice-close,
html[data-layout-mode="portrait-native"] .practice-head .practice-close { display: none; }
html[data-layout-mode="portrait-preview"] .practice-head-main,
html[data-layout-mode="portrait-native"] .practice-head-main { gap: 8px; }
html[data-layout-mode="portrait-preview"] .practice-head .practice-icon-button,
html[data-layout-mode="portrait-native"] .practice-head .practice-icon-button { width: 30px; height: 30px; flex-basis: 30px; font-size: 14px; }
html[data-layout-mode="portrait-preview"] .practice-title-block h2,
html[data-layout-mode="portrait-native"] .practice-title-block h2 { margin-top: 0; font-size: 16px; }
html[data-layout-mode="portrait-preview"] .practice-title-row,
html[data-layout-mode="portrait-native"] .practice-title-row { gap: 6px; }
html[data-layout-mode="portrait-preview"] .practice-kicker,
html[data-layout-mode="portrait-native"] .practice-kicker { display: block; font-size: 8px; }
html[data-layout-mode="portrait-preview"] .practice-readiness,
html[data-layout-mode="portrait-native"] .practice-readiness { flex-wrap: nowrap; gap: 4px; }
html[data-layout-mode="portrait-preview"] .practice-readiness-pills > span,
html[data-layout-mode="portrait-native"] .practice-readiness-pills > span { padding: 3px 6px 3px 16px; font-size: 9px; }
html[data-layout-mode="portrait-preview"] .practice-readiness-pills > span::before,
html[data-layout-mode="portrait-native"] .practice-readiness-pills > span::before { left: 6px; width: 5px; height: 5px; }
html[data-layout-mode="portrait-preview"] .practice-head-actions,
html[data-layout-mode="portrait-native"] .practice-head-actions { padding-left: 6px; gap: 4px; }
html[data-layout-mode="portrait-preview"] .practice-source-settings > summary,
html[data-layout-mode="portrait-native"] .practice-source-settings > summary { min-height: 38px; padding: 5px 12px; gap: 0 8px; }
html[data-layout-mode="portrait-preview"] .practice-source-settings > summary span,
html[data-layout-mode="portrait-native"] .practice-source-settings > summary span { font-size: 11px; }
html[data-layout-mode="portrait-preview"] .practice-source-settings > summary small,
html[data-layout-mode="portrait-native"] .practice-source-settings > summary small { display: none; }
html[data-layout-mode="portrait-preview"] .practice-control-strip,
html[data-layout-mode="portrait-native"] .practice-control-strip {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 6px;
  padding: 6px 10px 8px;
}
html[data-layout-mode="portrait-preview"] .practice-control-strip label,
html[data-layout-mode="portrait-native"] .practice-control-strip label { gap: 3px; font-size: 9px; }
html[data-layout-mode="portrait-preview"] .practice-control-strip select,
html[data-layout-mode="portrait-native"] .practice-control-strip select,
html[data-layout-mode="portrait-preview"] .practice-vocal-mode-button,
html[data-layout-mode="portrait-native"] .practice-vocal-mode-button { height: 29px; min-height: 29px; padding-inline: 7px; font-size: 10px; }
html[data-layout-mode="portrait-preview"] .practice-control-strip .practice-icon-button,
html[data-layout-mode="portrait-native"] .practice-control-strip .practice-icon-button { width: 29px; height: 29px; }
html[data-layout-mode="portrait-preview"] .practice-stage,
html[data-layout-mode="portrait-native"] .practice-stage { padding: 4px 10px 4px; }
html[data-layout-mode="portrait-preview"] .practice-runway,
html[data-layout-mode="portrait-native"] .practice-runway {
  flex-basis: var(--practice-runway-height, clamp(130px, 16vh, 150px));
  min-height: 130px;
  height: var(--practice-runway-height, clamp(130px, 16vh, 150px));
}
html[data-layout-mode="portrait-preview"] .practice-timeline,
html[data-layout-mode="portrait-native"] .practice-timeline { min-height: 30px; gap: 6px; font-size: 11px; }
html[data-layout-mode="portrait-preview"] .practice-stage > .practice-transport,
html[data-layout-mode="portrait-native"] .practice-stage > .practice-transport {
  min-height: 106px;
  grid-auto-rows: 32px;
  gap: 4px;
  padding: 5px 8px;
}
html[data-layout-mode="portrait-preview"] .practice-stage > .practice-transport :is(.practice-play, .practice-stop, .practice-start, .practice-play-separately, .practice-finish, .practice-discard, .practice-replay-latest, .practice-record-again, .practice-punch-record),
html[data-layout-mode="portrait-native"] .practice-stage > .practice-transport :is(.practice-play, .practice-stop, .practice-start, .practice-play-separately, .practice-finish, .practice-discard, .practice-replay-latest, .practice-record-again, .practice-punch-record) { height: 32px; min-height: 32px; }
html[data-layout-mode="portrait-preview"] .practice-stage > .practice-transport .practice-replay-accompaniment,
html[data-layout-mode="portrait-native"] .practice-stage > .practice-transport .practice-replay-accompaniment { height: 32px; min-height: 32px; }

/* The broadcast title sits in the portrait head bar. Hidden on desktop. */
.practice-brand-toggle,
.practice-brand-title { display: none; }
html[data-layout-mode="portrait-preview"] .practice-brand-toggle,
html[data-layout-mode="portrait-native"] .practice-brand-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--practice-line);
  border-radius: 5px;
  color: var(--practice-text);
  background: var(--control-bg);
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
html[data-layout-mode="portrait-preview"] .practice-brand-toggle > span,
html[data-layout-mode="portrait-native"] .practice-brand-toggle > span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
html[data-layout-mode="portrait-preview"] .practice-brand-toggle > i,
html[data-layout-mode="portrait-native"] .practice-brand-toggle > i {
  position: relative;
  flex: 0 0 auto;
  width: 26px;
  height: 14px;
  border: 1px solid var(--practice-line);
  border-radius: 999px;
}
html[data-layout-mode="portrait-preview"] .practice-brand-toggle > i > b,
html[data-layout-mode="portrait-native"] .practice-brand-toggle > i > b {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--app-faint);
  transition: transform 150ms ease;
}
html[data-layout-mode="portrait-preview"] .practice-brand-toggle.is-on,
html[data-layout-mode="portrait-native"] .practice-brand-toggle.is-on {
  border-color: var(--button-accent-border);
  color: var(--button-accent-text);
  background: var(--button-accent-bg);
}
html[data-layout-mode="portrait-preview"] .practice-brand-toggle.is-on > i,
html[data-layout-mode="portrait-native"] .practice-brand-toggle.is-on > i { border-color: var(--button-accent-border); }
html[data-layout-mode="portrait-preview"] .practice-brand-toggle.is-on > i > b,
html[data-layout-mode="portrait-native"] .practice-brand-toggle.is-on > i > b {
  background: var(--app-accent);
  transform: translateX(12px);
}
html[data-layout-mode="portrait-preview"] .practice-brand-title:not([hidden]),
html[data-layout-mode="portrait-native"] .practice-brand-title:not([hidden]) {
  display: block;
  max-width: min(320px, 52vw);
  margin: 0;
  padding: 0 2px;
  box-sizing: border-box;
  color: var(--app-text);
  font-size: 26px;
  font-weight: 850;
  line-height: 1.15;
  letter-spacing: 0;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.practice-recording-mixer {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--app-line);
  background: var(--app-panel);
}
.practice-recording-mixer header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.practice-recording-mixer header h3 { margin: 3px 0; color: var(--app-text); }
.practice-recording-mixer header p { margin: 0; color: var(--app-muted); font-size: 11px; }
.practice-mixer-takes { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.practice-mixer-takes span { padding: 4px 8px; border: 1px solid var(--app-line); color: var(--app-muted); font-size: 10px; }
.practice-mixer-controls, .practice-mixer-post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.practice-mixer-post { margin-top: 12px; border-top: 1px solid var(--app-line); padding-top: 10px; }
.practice-mixer-post summary { cursor: pointer; color: var(--app-text); font-size: 12px; font-weight: 700; }
.practice-mixer-post-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 10px; }
.practice-mixer-controls label, .practice-mixer-post-grid label { display: grid; gap: 5px; color: var(--app-muted); font-size: 11px; }
.practice-mixer-controls output, .practice-mixer-post-grid output { color: var(--app-text); font-variant-numeric: tabular-nums; }
.practice-mixer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
@media (max-width: 760px) { .practice-mixer-controls, .practice-mixer-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.practice-multitrack-editor {
  position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column;
  background: var(--practice-bg); color: var(--practice-text);
}
.practice-multitrack-editor[hidden] { display: none; }
.practice-multitrack-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--practice-line); background: var(--practice-header-bg); }
.practice-multitrack-head > div:first-child { display: grid; gap: 3px; min-width: 0; }
.practice-multitrack-head span { color: var(--practice-muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.practice-multitrack-head strong { font-size: 18px; }
.practice-multitrack-head small { color: var(--practice-muted); font-size: 11px; }
.practice-multitrack-actions { display: flex; gap: 7px; align-items: center; }
.practice-multitrack-actions button, .practice-multitrack-toolbar button { min-height: 34px; padding: 0 11px; border: 1px solid var(--practice-line); border-radius: 5px; color: var(--practice-text); background: var(--control-bg); font-size: 12px; font-weight: 700; cursor: pointer; }
.practice-multitrack-actions button:hover, .practice-multitrack-toolbar button:hover:not(:disabled) { border-color: var(--button-accent-border); background: var(--state-hover); }
.practice-multitrack-actions button:disabled, .practice-multitrack-toolbar button:disabled { cursor: not-allowed; opacity: .48; }
.practice-multitrack-toolbar { display: flex; align-items: center; gap: 16px; padding: 9px 20px; border-bottom: 1px solid var(--practice-line); background: var(--practice-control-strip-bg); color: var(--practice-muted); font-size: 12px; }
.practice-multitrack-transport { display: inline-flex; align-items: center; gap: 4px; padding-right: 12px; border-right: 1px solid var(--practice-line); }
.practice-multitrack-transport button[aria-pressed="true"] { border-color: var(--button-accent-border); color: var(--button-accent-text); background: var(--button-accent-bg); }
.practice-multitrack-toolbar label { display: flex; align-items: center; gap: 8px; }
.practice-multitrack-toolbar label > output { min-width: 38px; color: var(--practice-text); font-variant-numeric: tabular-nums; text-align: right; }
.practice-multitrack-toolbar input[type=number] { width: 64px; height: 26px; border: 1px solid var(--practice-line); border-radius: 4px; color: var(--practice-text); background: var(--control-bg); }
.practice-multitrack-toolbar input[type=range] { width: clamp(92px, 10vw, 150px); accent-color: var(--app-accent); }
.practice-multitrack-zoom-tools { display: inline-flex; align-items: center; gap: 4px; }
.practice-multitrack-zoom-tools button { min-width: 32px; padding-inline: 8px; }
.practice-multitrack-zoom-tools button[data-action="multitrack-zoom-fit"] { min-width: 72px; }
.practice-multitrack-edit-tools { display: flex; align-items: center; gap: 7px; padding-left: 14px; border-left: 1px solid var(--practice-line); }
.practice-multitrack-edit-tools > span { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.practice-multitrack-edit-tools strong { color: var(--practice-text); font-variant-numeric: tabular-nums; }
.practice-multitrack-toolbar [data-multitrack-status] { margin-left: auto; color: var(--practice-muted); }
.practice-multitrack-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 260px minmax(0, 1fr) 260px; overflow: hidden; }
.practice-track-list { overflow: auto; border-right: 1px solid var(--practice-line); background: var(--practice-panel); }
.practice-track-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; padding: 10px 12px; min-height: 92px; border-bottom: 1px solid var(--practice-line); cursor: pointer; }
.practice-track-row.is-selected { background: color-mix(in srgb, var(--app-accent) 13%, var(--practice-panel)); box-shadow: inset 3px 0 var(--app-accent); }
.practice-track-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.practice-track-row small { color: var(--practice-muted); font-size: 11px; }
.practice-track-buttons { display: flex; gap: 4px; }
.practice-track-buttons button { width: 27px; height: 27px; border: 1px solid var(--practice-line); border-radius: 4px; color: var(--practice-muted); background: var(--control-bg); font-size: 11px; font-weight: 800; cursor: pointer; }
.practice-track-buttons button[aria-pressed="true"] { color: var(--app-accent); border-color: var(--button-accent-border); background: color-mix(in srgb, var(--app-accent) 18%, var(--control-bg)); }
.practice-track-row label, .practice-track-inspector label { grid-column: 1 / -1; display: grid; grid-template-columns: 34px 1fr 44px; gap: 6px; align-items: center; color: var(--practice-muted); font-size: 11px; }
.practice-track-row output, .practice-track-inspector output { text-align: right; color: var(--practice-text); font-variant-numeric: tabular-nums; }
.practice-track-timeline { position: relative; overflow: auto; background: var(--practice-bg); }
.practice-track-ruler { position: sticky; top: 0; z-index: 2; height: 30px; border-bottom: 1px solid var(--practice-line); background: var(--practice-control-strip-bg); }
.practice-track-ruler span { position: absolute; top: 8px; transform: translateX(-50%); color: var(--practice-muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.practice-track-lane { position: relative; height: 92px; border-bottom: 1px solid var(--practice-line); background: repeating-linear-gradient(90deg, transparent 0, transparent 41px, color-mix(in srgb, var(--app-line) 40%, transparent) 42px); }
.practice-multitrack-selection { position: absolute; z-index: 1; top: 0; bottom: 0; left: var(--selection-left); width: var(--selection-width); border-inline: 1px solid var(--app-warm); background: color-mix(in srgb, var(--app-warm) 10%, transparent); pointer-events: none; }
.practice-track-clip { position: absolute; top: 17px; height: 58px; min-width: 10px; overflow: hidden; border: 1px solid var(--practice-line); border-radius: 4px; color: var(--practice-text); background: color-mix(in srgb, var(--app-secondary) 34%, var(--practice-panel)); cursor: pointer; text-align: left; }
.practice-track-clip.is-selected { border-color: var(--app-accent); background: color-mix(in srgb, var(--app-accent) 28%, var(--practice-panel)); }
.practice-track-clip span { position: absolute; left: 7px; top: 6px; z-index: 1; max-width: calc(100% - 14px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.practice-track-clip .practice-track-edge { top: 0; bottom: 0; width: 8px; z-index: 3; cursor: ew-resize; }
.practice-track-clip .practice-track-edge[data-segment-edge="start"] { left: 0; }
.practice-track-clip .practice-track-edge[data-segment-edge="end"] { right: 0; }
.practice-track-clip i { position: absolute; inset: auto 6px 6px; display: block; border-radius: 2px; background: var(--app-accent); opacity: .65; }
.practice-track-waveform { position: absolute !important; z-index: 0 !important; inset: 19px 5px 5px !important; max-width: none !important; overflow: hidden !important; opacity: .8; }
.practice-track-waveform b { position: absolute; left: var(--wave-x); top: calc((100% - var(--wave-h)) / 2); width: 1px; height: var(--wave-h); background: var(--app-secondary); transform: translateX(-50%); }
.practice-track-inspector { overflow: auto; display: grid; align-content: start; gap: 10px; padding: 16px; border-left: 1px solid var(--practice-line); background: var(--practice-panel); }
.practice-clip-inspector { display: grid; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--practice-line); }
.practice-clip-inspector strong { color: var(--app-muted); font-size: 10px; }
.practice-export-choice { display: inline-flex; align-items: center; gap: 5px; color: var(--practice-muted); font-size: 10px; }
.practice-export-choice select { min-height: 28px; }
.practice-track-inspector strong { font-size: 14px; }
.practice-track-inspector small, .practice-track-inspector span, .practice-inspector-hint { color: var(--practice-muted); font-size: 10px; line-height: 1.5; }
.practice-track-playhead { position: absolute; z-index: 4; top: 30px; bottom: 0; left: 0; width: 2px; pointer-events: none; background: var(--practice-coral); box-shadow: 0 0 8px color-mix(in srgb, var(--practice-coral) 45%, transparent); }
@media (max-width: 1280px) { .practice-multitrack-toolbar { flex-wrap: wrap; gap: 8px 12px; } .practice-multitrack-edit-tools { order: 2; flex-basis: 100%; padding-left: 0; border-left: 0; } }
@media (max-width: 900px) { .practice-multitrack-body { grid-template-columns: 180px minmax(0, 1fr); } .practice-track-inspector { display: none; } }

/* Keep compact monitor copy inside its column and put the timeline first. */
html[data-layout-mode="desktop"] .practice-scoreboard-head-copy span { overflow: hidden; text-overflow: ellipsis; }
html[data-layout-mode="desktop"] .practice-scoreboard > section, html[data-layout-mode="desktop"] .practice-settings { padding-inline: 12px; }
html[data-layout-mode="desktop"] .practice-scoreboard, html[data-layout-mode="desktop"] .practice-scoreboard * { min-width: 0; }
html[data-layout-mode="desktop"] .practice-scoreboard .practice-section-title, html[data-layout-mode="desktop"] .practice-scoreboard .practice-meter-section > div { overflow: hidden; }
html[data-layout-mode="desktop"] .practice-scoreboard .practice-section-title > span, html[data-layout-mode="desktop"] .practice-scoreboard .practice-meter-section > div > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Canonical pitch-editor layout lock (wins over earlier duplicates). */
.practice-pitch-editor {
  position: absolute;
  z-index: 90;
  inset: 0;
  display: grid;
  grid-template-rows: auto auto auto auto minmax(180px, min(42vh, 320px)) auto;
  min-height: 0;
  overflow: hidden;
  background: var(--app-bg);
}
.practice-pitch-editor-toolbar {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  max-height: 42px;
  padding: 5px 14px;
  overflow: visible;
}
.pitch-layer-modes {
  display: inline-flex;
  align-items: stretch;
  flex: 0 0 auto;
  border: 1px solid var(--app-line);
  border-radius: 5px;
  overflow: hidden;
  background: var(--app-panel-2);
}
.pitch-layer-modes button {
  min-width: 44px;
  min-height: 28px;
  padding: 0 10px;
  border: 0;
  border-right: 1px solid var(--app-line);
  border-radius: 0;
  color: var(--app-muted);
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.pitch-layer-modes button:last-child { border-right: 0; }
.pitch-layer-modes button[aria-pressed="true"] {
  color: var(--app-accent-ink);
  background: var(--app-accent);
}
.practice-pitch-editor-lyrics {
  display: grid;
  align-content: center;
  min-height: 52px;
  max-height: 64px;
  padding: 6px 18px;
  overflow: hidden;
  border-bottom: 1px solid var(--app-line);
  background: var(--app-panel);
  contain: layout paint style;
}
.practice-pitch-lyric-live {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1px;
  min-height: 34px;
  align-items: center;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--app-muted);
}
.practice-pitch-lyric-live::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--lyric-progress, 0%);
  height: 2px;
  background: var(--app-accent);
  transition: none;
  pointer-events: none;
}
.practice-pitch-lyric-char {
  display: inline-block;
  color: var(--app-muted);
  transition: none;
}
.practice-pitch-lyric-char.played { color: var(--app-warm); }
.practice-pitch-lyric-char.singing {
  color: var(--app-warm);
  text-shadow: 0 0 12px color-mix(in srgb, var(--app-warm) 62%, transparent);
  transform: translateY(-1px);
}
.practice-pitch-lyrics-empty { color: var(--app-muted); font-size: 12px; font-weight: 500; }
.practice-pitch-seek {
  accent-color: var(--app-accent);
  background: linear-gradient(to right, var(--app-accent) var(--pitch-seek-progress, 0%), var(--app-panel-2) var(--pitch-seek-progress, 0%));
}
.practice-pitch-editor-body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  background: var(--practice-canvas-bg);
}
.practice-piano-scroll {
  position: relative !important;
  inset: auto !important;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  touch-action: pan-y;
}
.practice-pitch-timeline {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) var(--pitch-waveform-height, 52px) auto 24px;
  width: var(--pitch-roll-width, 100%);
  min-width: 100%;
  height: 100%;
  transform: translate3d(0, 0, 0);
  transform-origin: left top;
  will-change: transform;
  backface-visibility: hidden;
  contain: layout paint style;
}
.practice-pitch-playhead-fixed {
  position: absolute;
  z-index: 14;
  top: 0;
  bottom: 0;
  left: 34%;
  width: 0;
  pointer-events: none;
  transform: translate3d(-1px, 0, 0);
}
.practice-pitch-playhead-fixed[hidden] {
  display: none !important;
}
.practice-pitch-playhead-fixed::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 -1px;
  width: 2px;
  background: var(--practice-playhead);
  box-shadow: 0 0 8px color-mix(in srgb, var(--practice-playhead) 55%, transparent);
}
/* Playing + follow: crisp 1px line. Glow + boundary/note edges stacking at the
   playhead reads as a thicker vibrating bar. */
.pitch-follow-playing .practice-pitch-playhead-fixed::before {
  inset: 0 auto 0 0;
  width: 1px;
  box-shadow: none;
}
/* Vertical boundary dashes shimmer against the fixed playhead while scrolling. */
.pitch-follow-playing .practice-pitch-word-boundary {
  opacity: 0;
  pointer-events: none;
}
.pitch-follow-playing .practice-piano-note.is-active::after {
  box-shadow: none;
}
.practice-pitch-playhead-fixed [data-pitch-playhead-handle] {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -10px;
  width: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: ew-resize;
  pointer-events: auto;
  appearance: none;
}
.practice-pitch-playhead-fixed [data-pitch-playhead-handle]::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  width: 10px;
  height: 10px;
  border: 2px solid var(--practice-playhead);
  border-radius: 2px;
  background: color-mix(in srgb, var(--practice-playhead) 35%, var(--app-panel));
  transform: translateX(-50%) rotate(45deg);
}
/* Follow mode: only the fixed overlay playhead is visible (paused or playing). */
.pitch-follow-playback [data-pitch-playhead],
.pitch-follow-playback [data-pitch-waveform-playhead],
.pitch-follow-playback [data-pitch-word-playhead] {
  visibility: hidden;
}
.pitch-playhead-anchoring,
.pitch-playhead-anchoring * {
  cursor: ew-resize !important;
}
.practice-piano-playhead [data-pitch-playhead-handle],
.practice-pitch-word-playhead [data-pitch-playhead-handle] {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -8px;
  width: 18px;
  pointer-events: auto;
  cursor: ew-resize;
}
.practice-pitch-editor-toolbar [data-action="pitch-locate"].is-active {
  color: var(--app-accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-accent) 55%, transparent);
}
.practice-pitch-timeline::after {
  grid-row: 4;
  border-top: 1px solid var(--app-line);
  background: var(--app-panel);
  content: '';
}
.practice-piano-roll {
  width: var(--pitch-roll-width, 100%);
  height: var(--pitch-roll-height, 200px);
  max-height: none;
  contain: layout paint style;
}
.practice-pitch-waveform-lane {
  position: relative;
  width: 100%;
  height: var(--pitch-waveform-height, 52px);
  min-height: 36px;
  overflow: hidden;
  border-block: 1px solid color-mix(in srgb, var(--practice-cyan) 42%, var(--app-line));
  border-radius: 5px;
  background-color: color-mix(in srgb, var(--practice-canvas-bg) 78%, var(--app-panel-2));
  background-image:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--practice-cyan) 7%, transparent) 0%,
      transparent 34%,
      transparent 66%,
      color-mix(in srgb, var(--practice-cyan) 5%, transparent) 100%
    ),
    repeating-linear-gradient(90deg, transparent 0, transparent 63px, color-mix(in srgb, var(--app-line) 32%, transparent) 64px);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--app-text) 6%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--app-bg) 35%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--practice-cyan) 8%, transparent);
  cursor: crosshair;
  contain: layout paint style;
}
.practice-pitch-waveform-lane canvas {
  position: absolute;
  inset: 2px 0;
  width: 100%;
  height: calc(100% - 4px);
  pointer-events: none;
}
.practice-pitch-waveform-label {
  position: sticky;
  z-index: 4;
  left: 8px;
  top: 6px;
  display: inline-flex;
  max-width: min(420px, calc(100vw - 80px));
  align-items: center;
  gap: 7px;
  padding: 2px 5px;
  border: 0;
  color: var(--app-muted);
  background: transparent;
  pointer-events: none;
}
.practice-pitch-waveform-label strong { color: var(--app-muted); font-size: 9px; font-weight: 700; white-space: nowrap; }
.practice-pitch-waveform-label span {
  overflow: hidden;
  color: var(--app-muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.practice-pitch-waveform-resize {
  position: absolute;
  z-index: 8;
  right: 8px;
  bottom: 0;
  min-width: 72px;
  height: 12px;
  padding: 0 7px;
  border: 1px solid var(--app-line);
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  color: var(--app-muted);
  background: color-mix(in srgb, var(--app-panel) 90%, transparent);
  cursor: ns-resize;
}
.practice-pitch-waveform-resize span { font-size: 8px; line-height: 1; }
.practice-pitch-waveform-playhead { z-index: 6; }
.practice-pitch-word-lane {
  position: relative;
  height: 44px;
  min-height: 44px;
  border-top: 1px solid var(--app-line);
  background: var(--app-panel-2);
  overflow: hidden;
  contain: layout paint style;
}
.practice-pitch-word-lane.is-chorus {
  height: 88px;
  min-height: 88px;
  background: linear-gradient(to bottom, var(--app-panel-2) 0 43px, var(--app-line) 43px 44px, color-mix(in srgb, var(--app-secondary) 5%, var(--app-panel-2)) 44px 100%);
}
.practice-pitch-track-label-group {
  position: sticky;
  z-index: 5;
  top: 4px;
  left: 6px;
  display: grid;
  width: 54px;
  height: 64px;
  grid-template-rows: 20px 20px;
  gap: 24px;
  pointer-events: none;
}
.practice-pitch-track-label {
  display: inline-flex;
  height: 20px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--app-line);
  border-radius: 4px;
  color: var(--app-text);
  background: color-mix(in srgb, var(--app-panel) 92%, transparent);
  font-size: 9px;
  font-weight: 800;
}
.practice-pitch-word-boundary-layer {
  position: absolute;
  /* Boundary controls begin at the note's lower edge and continue through
     waveform/lyric lanes. Keep that explicit interaction layer above the
     pitch blocks so its full-height drag handle cannot be covered by a note
     stacking context or an old context-menu surface. */
  z-index: 10;
  inset: 0 auto auto 0;
  pointer-events: none;
  overflow: visible;
}
.practice-pitch-word-boundary-layer[hidden] { display: none; }
.practice-pitch-editor .practice-pitch-word-boundary {
  position: absolute;
  top: var(--boundary-top);
  left: var(--boundary-x);
  width: 7px;
  height: var(--boundary-height);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: auto;
  cursor: ew-resize;
}
.practice-pitch-editor .practice-pitch-word-boundary.is-start { transform: translateX(0); }
.practice-pitch-editor .practice-pitch-word-boundary.is-end { transform: translateX(-100%); }
.practice-pitch-editor .practice-pitch-word-boundary::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-left: 1px dashed color-mix(in srgb, var(--app-secondary) 72%, var(--app-line));
}
.practice-pitch-editor .practice-pitch-word-boundary.is-end::before { right: 0; left: auto; }
.practice-pitch-editor .practice-pitch-word-boundary::after {
  content: '';
  position: absolute;
  left: 2px;
  bottom: 3px;
  width: 5px;
  height: 10px;
  border: 1px solid color-mix(in srgb, var(--app-secondary) 72%, var(--app-line));
  border-radius: 3px;
  background: var(--app-panel);
}
.practice-pitch-editor .practice-pitch-word-boundary.is-end::after { right: 2px; left: auto; }
.practice-pitch-editor .practice-pitch-word-boundary.is-paired::after { width: 4px; }
.practice-pitch-word-boundary.no-note::before { opacity: .58; }
.practice-pitch-word-boundary:hover::before,
.practice-pitch-word-boundary:focus-visible::before,
.practice-pitch-word-boundary.is-snapping::before,
.pitch-word-boundary-dragging .practice-pitch-word-boundary::before {
  border-left-width: 2px;
  border-left-color: var(--app-accent);
}
.practice-pitch-word-boundary:hover::after,
.practice-pitch-word-boundary:focus-visible::after,
.practice-pitch-word-boundary.is-snapping::after,
.pitch-word-boundary-dragging .practice-pitch-word-boundary::after {
  border-color: var(--app-accent);
  background: var(--app-accent-soft);
}
.pitch-word-boundary-dragging,
.pitch-word-boundary-dragging * { cursor: ew-resize !important; }
.practice-pitch-word {
  position: absolute;
  top: calc(4px + var(--pitch-lyric-track, 0) * 44px);
  left: var(--pitch-x);
  width: var(--pitch-w);
  min-width: 12px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--app-line);
  border-radius: 4px;
  color: var(--app-muted);
  background: var(--app-panel);
  font-size: 13px;
  font-weight: 700;
  cursor: grab;
  overflow: hidden;
  contain: layout paint style;
}
.practice-pitch-word.is-duet {
  border-color: color-mix(in srgb, var(--app-secondary) 58%, var(--app-line));
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--app-secondary) 54%, transparent);
}
.practice-piano-note,
.practice-piano-reference { contain: layout paint style; }
.pitch-note-dragging .practice-piano-note.selected,
.pitch-word-dragging .practice-piano-note.selected,
.pitch-word-boundary-dragging .practice-piano-note.selected { will-change: left, top, width; }
.practice-pitch-word.played {
  color: var(--app-warm);
  border-color: color-mix(in srgb, var(--app-warm) 45%, var(--app-line));
  background: color-mix(in srgb, var(--app-warm) 16%, var(--app-panel));
}
.practice-pitch-word.singing {
  color: var(--app-accent-ink);
  border-color: var(--app-accent);
  background: var(--app-accent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--app-accent-ink) 24%, transparent);
}
.practice-pitch-word.selected {
  border-color: var(--app-accent);
  color: var(--app-accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-accent) 45%, transparent);
}
.practice-pitch-word.is-approx { opacity: 0.72; }
.practice-pitch-word.is-missing-note {
  border-style: dashed;
  color: var(--status-warning);
  background: color-mix(in srgb, var(--status-warning) 8%, var(--app-panel));
}
.pitch-word-dragging,
.pitch-word-dragging * { cursor: grabbing !important; user-select: none; }
.pitch-range-tool-active [data-pitch-roll],
.pitch-range-tool-active [data-pitch-note] { cursor: crosshair !important; }
.practice-piano-note.is-word-bound strong { letter-spacing: 0.02em; }
.practice-piano-reference { z-index: 1; }
.practice-piano-note { z-index: 8; }
.practice-piano-note.selected { z-index: 9; }
.practice-pitch-word-empty {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 0;
  color: var(--app-muted);
  background: transparent;
  font-size: 11px;
  cursor: pointer;
}
.practice-pitch-word-empty:hover,
.practice-pitch-word-empty:focus-visible { color: var(--app-accent); outline: none; }
.practice-pitch-word-playhead,
.practice-piano-playhead {
  position: absolute;
  z-index: 8;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  pointer-events: none;
  background: var(--practice-playhead);
  box-shadow: 0 0 8px color-mix(in srgb, var(--practice-playhead) 55%, transparent);
}
.practice-piano-note.is-passed { opacity: 1; }
.practice-piano-note.is-passed::after {
  background: color-mix(in srgb, var(--practice-canvas-bg) 28%, transparent);
}
.practice-piano-note.is-active {
  border-color: var(--app-warm);
  background: color-mix(in srgb, var(--app-warm) 24%, var(--app-accent));
}
.practice-piano-note.is-active::after {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--app-warm) 78%, transparent);
}
.practice-pitch-inspector {
  position: absolute;
  z-index: 20;
  top: 8px;
  right: 8px;
  bottom: 8px;
  width: min(280px, calc(100% - 32px));
  overflow: auto;
  transform: translateX(calc(100% + 18px));
  pointer-events: none;
}
.practice-pitch-inspector.is-open {
  transform: translateX(0);
  pointer-events: auto;
}
.pitch-editor-open .practice-workspace {
  visibility: hidden;
  pointer-events: none;
}
@media (max-width: 900px) {
  .practice-pitch-editor-toolbar > .practice-pitch-selection-status { display: none; }
  .practice-pitch-preview-volume { display: none !important; }
  .practice-pitch-lyric-live { font-size: 18px; }
}

/* DAW-style melody editor: header, status, edit/view shelves, transport, timeline. */
.practice-pitch-editor {
  grid-template-rows: auto auto auto auto auto minmax(220px, 1fr) auto;
}
.practice-pitch-editor-head {
  display: grid !important;
  grid-template-columns: minmax(180px, 1fr) auto;
  min-height: 48px !important;
  padding: 6px 12px 6px 16px !important;
  gap: 12px;
  background: var(--app-panel) !important;
}
.practice-pitch-editor-brand {
  display: grid;
  gap: 1px;
  min-width: 0;
  align-content: center;
}
.practice-pitch-editor-kicker {
  color: var(--app-faint) !important;
  font: 700 8px/1.2 var(--font-family-mono) !important;
  letter-spacing: .08em;
}
.practice-pitch-editor-titleline {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}
.practice-pitch-editor-titleline > strong {
  font-size: 15px !important;
  white-space: nowrap;
}
.practice-pitch-editor-title {
  display: grid !important;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  align-content: center;
  gap: 1px 9px !important;
  min-width: 0;
}
.practice-pitch-editor-title > span {
  grid-column: 1 / -1;
  color: var(--app-faint) !important;
  font: 700 8px/1.2 var(--font-family-mono) !important;
  letter-spacing: .08em;
}
.practice-pitch-editor-title > strong { font-size: 16px !important; white-space: nowrap; }
.practice-pitch-editor-title > small {
  grid-column: 3;
  min-width: 0;
  margin: 0 !important;
  overflow: hidden;
  color: var(--app-muted) !important;
  font-size: 9px !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.practice-pitch-editor-statusbar {
  position: relative;
  z-index: 22;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 14px;
  min-height: 28px;
  padding: 4px 16px;
  border-bottom: 1px solid var(--app-line);
  background: var(--app-panel);
}
.practice-pitch-editor-statusbar > p {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  color: var(--app-muted);
  font-size: 10px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.practice-pitch-editor-statusmeta {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  color: var(--app-faint);
  font-size: 9px;
  white-space: nowrap;
}
.practice-pitch-editor-statusmeta > [data-pitch-note-count] {
  padding-left: 10px;
  border-left: 1px solid var(--app-line);
}
.practice-pitch-editor-statusbar > p.error {
  color: var(--status-danger-text);
}
.practice-pitch-editor-statusbar .practice-tuning-progress {
  grid-column: 1 / -1;
}
.practice-pitch-save-state {
  display: inline-flex;
  min-height: 20px;
  align-items: center;
  justify-self: start;
  padding: 0 7px;
  border: 1px solid color-mix(in srgb, var(--app-accent) 48%, var(--app-line));
  border-radius: 999px;
  color: var(--status-success-text);
  background: var(--status-success-bg);
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}
.practice-pitch-save-state[data-state="dirty"] {
  border-color: color-mix(in srgb, var(--app-warm) 52%, var(--app-line));
  color: var(--status-warning-text);
  background: var(--status-warning-bg);
}
.practice-pitch-save-state[data-state="empty"] {
  border-color: var(--app-line);
  color: var(--app-muted);
  background: var(--app-panel-2);
}
.practice-pitch-editor-actions { display: flex; gap: 6px !important; }
.pitch-head-action-group {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--app-line);
  border-radius: 6px;
  background: var(--app-panel-2);
}
.pitch-head-action-group button {
  min-width: 34px !important;
  min-height: 32px !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.pitch-head-action-group button + button { border-left: 1px solid var(--app-line) !important; }
.pitch-head-transport [data-action="pitch-play"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 70px !important;
  color: var(--app-accent-ink) !important;
  background: var(--app-accent) !important;
  font-weight: 800;
}
.pitch-head-transport [data-action="pitch-play"][data-state="playing"] {
  color: var(--app-on-warm) !important;
  background: var(--app-warm) !important;
}
.pitch-head-accompaniment {
  min-height: 34px !important;
  padding-inline: 10px !important;
  border-color: var(--app-line) !important;
  color: var(--app-text) !important;
  background: var(--app-panel-2) !important;
  white-space: nowrap;
}
.pitch-head-accompaniment[aria-checked="true"] {
  border-color: var(--button-accent-border) !important;
  color: var(--app-accent) !important;
  background: var(--app-accent-soft) !important;
}
.pitch-head-transport [data-pitch-play-icon] { width: 12px; font: 800 11px/1 var(--font-family-mono); }
.pitch-head-transport [data-pitch-play-label] { font-size: 10px; }
.practice-pitch-editor-actions button > span { color: inherit; }
.pitch-head-save {
  min-height: 34px !important;
  border-color: var(--button-accent-border) !important;
  color: var(--app-accent-ink) !important;
  background: var(--app-accent) !important;
  font-weight: 800;
}
.pitch-head-close { min-width: 34px !important; padding-inline: 0 !important; font-size: 18px; }
.practice-pitch-editor-toolbar {
  position: relative;
  z-index: 24;
  display: grid !important;
  grid-template-rows: auto auto;
  gap: 0 !important;
  min-height: auto !important;
  max-height: none !important;
  align-items: stretch;
  padding: 0 !important;
  overflow: visible !important;
  border-bottom: 1px solid var(--app-line);
  background: var(--app-panel-2);
}
.pitch-toolbar-row {
  display: flex;
  min-width: 0;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 5px 10px 5px 12px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.pitch-toolbar-row-edit {
  border-bottom: 1px solid color-mix(in srgb, var(--app-line) 72%, transparent);
  background: var(--app-panel-2);
}
.pitch-toolbar-row-view {
  background: color-mix(in srgb, var(--app-panel) 84%, var(--app-panel-2));
}
.pitch-toolbar-zone {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 6px;
  border: 1px solid var(--app-line);
  border-radius: 7px;
  background: var(--button-secondary-bg);
}
.pitch-toolbar-zone-label {
  flex: 0 0 auto;
  padding-right: 4px;
  border-right: 1px solid color-mix(in srgb, var(--app-line) 78%, transparent);
  color: var(--app-faint);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  white-space: nowrap;
}
.pitch-toolbar-zone-connect {
  gap: 4px;
  padding-inline: 6px;
}
.pitch-toolbar-zone-connect .pitch-toolbar-smart-gap {
  border: 0;
  padding: 0;
  background: transparent;
}
.pitch-toolbar-zone-connect .pitch-toolbar-smart-gap:focus-within {
  border: 0;
  box-shadow: none;
}
.pitch-toolbar-row-view .pitch-toolbar-more {
  flex: 0 0 auto;
  margin-left: 0;
  min-width: 0;
  align-self: center;
  border: 1px solid var(--app-line);
  border-radius: 7px;
  background: var(--button-secondary-bg);
}
.pitch-toolbar-row-label {
  display: none;
}
.practice-pitch-editor-toolbar button,
.practice-pitch-editor-toolbar select,
.pitch-toolbar-more > summary {
  min-height: 30px !important;
  white-space: nowrap;
}
.pitch-toolbar-primary {
  border-color: var(--button-accent-border) !important;
  color: var(--app-accent) !important;
  background: var(--app-accent-soft) !important;
  font-weight: 800;
}
.pitch-toolbar-smart-scope {
  display: inline-flex !important;
  min-width: 0 !important;
  align-items: center;
  gap: 4px !important;
}
.pitch-toolbar-smart-scope > span { color: var(--app-faint); font-size: 9px; }
.pitch-toolbar-smart-scope > select { width: 84px; min-width: 84px !important; }
.pitch-toolbar-smart-gap {
  display: inline-flex !important;
  min-width: 0 !important;
  min-height: 30px;
  align-items: center;
  gap: 3px !important;
  padding: 0 6px;
  border: 1px solid var(--app-line);
  border-radius: 5px;
  background: var(--button-secondary-bg);
  white-space: nowrap;
}
.pitch-toolbar-smart-gap:focus-within {
  border-color: var(--button-accent-border);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-accent) 18%, transparent);
}
.pitch-toolbar-smart-gap > span,
.pitch-toolbar-smart-gap > small {
  color: var(--app-faint);
  font-size: 9px;
  font-weight: 800;
}
.pitch-toolbar-smart-gap > input {
  width: 42px;
  min-width: 42px;
  height: 26px;
  padding: 0 2px;
  border: 0;
  outline: 0;
  color: var(--app-text);
  background: transparent;
  font: 800 10px/1 var(--font-family-mono);
  text-align: right;
}
.pitch-layer-modes { gap: 0; border: 1px solid var(--app-line); border-radius: 5px; }
.pitch-layer-modes button { min-width: 54px; padding: 0 9px; border: 0 !important; border-radius: 0 !important; }
.pitch-layer-modes button + button { border-left: 1px solid var(--app-line) !important; }
.pitch-toolbar-view { padding-right: 8px; }
.pitch-toolbar-view > label,
.pitch-toolbar-view > button,
.pitch-toolbar-zone-align > label,
.pitch-toolbar-zone-align > button,
.pitch-toolbar-zone-nav > label,
.pitch-toolbar-zone-nav > button { flex: 0 0 auto; }
.pitch-toolbar-view > :is([data-action="pitch-toggle-word-boundaries"], [data-action="pitch-toggle-chorus"])[aria-pressed="true"],
.pitch-toolbar-zone-align > :is([data-action="pitch-toggle-word-boundaries"], [data-action="pitch-toggle-chorus"])[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--app-secondary) 62%, var(--app-line));
  color: var(--app-secondary);
  background: color-mix(in srgb, var(--app-secondary) 12%, var(--button-secondary-bg));
}
.pitch-toolbar-snap { min-height: 30px !important; }
.pitch-toolbar-zoom {
  display: inline-flex !important;
  min-width: 0 !important;
  align-items: center;
  gap: 5px !important;
}
.pitch-toolbar-zoom span { color: var(--app-faint); font-size: 9px; }
.pitch-toolbar-zoom select { min-width: 86px !important; width: 86px; }
.pitch-toolbar-status { display: none; }
.pitch-toolbar-more { position: relative; min-width: 0; }
.pitch-toolbar-more > summary { min-width: 58px; padding-inline: 8px; border: 0; background: transparent; }
.pitch-toolbar-more[open] { border-color: var(--button-accent-border); }
.pitch-more-extract button { width: 100%; }
.pitch-toolbar-more > div {
  top: calc(100% + 9px) !important;
  right: 0 !important;
  width: min(980px, calc(100vw - 28px)) !important;
  grid-template-columns: repeat(6, minmax(128px, 1fr));
  align-items: start;
  gap: 10px !important;
  padding: 12px !important;
}
.pitch-toolbar-more[open] > div { display: grid !important; }
.pitch-toolbar-more section { display: grid; align-content: start; gap: 7px; min-width: 0; }
.pitch-toolbar-more section + section { padding-left: 10px; border-left: 1px solid var(--app-line); }
.pitch-toolbar-more section > strong { color: var(--app-text); font-size: 10px; }
.pitch-toolbar-more section > label { min-width: 0 !important; }
.pitch-toolbar-more section select { width: 100%; min-width: 0 !important; }
.pitch-suggestion-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--status-warning) 50%, var(--app-line));
  border-radius: 5px;
  background: color-mix(in srgb, var(--status-warning) 9%, var(--app-panel));
}
.pitch-suggestion-actions[hidden] { display: none; }
.pitch-suggestion-actions span { grid-column: 1 / -1; color: var(--status-warning); font-size: 9px; }
.pitch-post-help { color: var(--app-faint); font-size: 9px; line-height: 1.4; }
.pitch-post-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.pitch-post-presets button[aria-pressed="true"] {
  border-color: var(--app-accent);
  color: var(--app-accent);
  background: color-mix(in srgb, var(--app-accent) 14%, var(--app-panel));
}
.pitch-post-ab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pitch-post-ab[aria-pressed="true"] { border-color: var(--app-accent); }
.pitch-post-ab small { color: var(--app-faint); font-size: 8px; }
.pitch-post-advanced { min-width: 0; }
.pitch-post-advanced > summary {
  display: block;
  padding: 5px 7px;
  border: 1px solid var(--app-line);
  border-radius: 5px;
  color: var(--app-muted);
  background: var(--button-secondary-bg);
  cursor: pointer;
}
.pitch-post-advanced > div { display: grid; gap: 6px; max-height: 240px; margin-top: 6px; padding-right: 3px; overflow-y: auto; }
.pitch-post-advanced label {
  display: grid !important;
  grid-template-columns: minmax(44px, auto) 1fr;
  gap: 3px 7px !important;
}
.pitch-post-advanced label output { justify-self: end; color: var(--app-text); }
.pitch-post-advanced label input { grid-column: 1 / -1; width: 100%; }
.pitch-toolbar-shortcuts {
  grid-column: 1 / -1;
  margin: 1px 0 0;
  padding-top: 9px;
  border-top: 1px solid var(--app-line);
  color: var(--app-faint);
  font: 9px/1.5 var(--font-family-mono);
}
.practice-pitch-transport {
  display: grid;
  grid-template-rows: auto auto;
  min-width: 0;
  border-bottom: 1px solid var(--app-line);
  background: var(--app-panel);
  contain: layout paint style;
}
.practice-pitch-preview-bar {
  position: relative;
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center;
  min-height: 36px !important;
  gap: 8px !important;
  padding: 4px 12px !important;
  border-bottom: 0;
  background: var(--app-panel) !important;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.pitch-transport-zone {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding: 2px 8px 2px 6px;
  border: 1px solid var(--app-line);
  border-radius: 7px;
  background: var(--button-secondary-bg);
}
.pitch-transport-zone-label {
  flex: 0 0 auto;
  padding-right: 6px;
  border-right: 1px solid color-mix(in srgb, var(--app-line) 78%, transparent);
  color: var(--app-faint);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  white-space: nowrap;
}
.pitch-transport-zone-playback {
  flex: 1 1 240px;
  min-width: min(100%, 220px);
}
.pitch-transport-zone-playback .practice-pitch-seek {
  width: 100%;
}
.pitch-transport-zone-playback .practice-pitch-timeline-overview {
  flex: 1 1 120px;
  min-width: 80px;
}
.pitch-transport-zone-range {
  flex: 0 1 auto;
}
.pitch-transport-zone-range .practice-pitch-preview-range-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-left: 0;
  border-left: 0;
}
.pitch-transport-zone-mixer {
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--app-line);
}
.pitch-transport-zone-mixer > summary {
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  color: var(--app-muted);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
}
.pitch-transport-zone-mixer[open] > summary {
  border-bottom: 1px solid var(--app-line);
  border-radius: 7px 7px 0 0;
}
.practice-pitch-preview-bar > button { min-height: 30px !important; }
.practice-pitch-range-bar {
  border-bottom: 0;
}
.practice-pitch-preview-range-actions { display: inline-flex; align-items: center; gap: 5px; padding-left: 8px; border-left: 1px solid var(--app-line); }
.practice-pitch-preview-range-actions > button { min-height: 30px; padding: 0 8px; white-space: nowrap; }
.practice-pitch-preview-range-actions > button[aria-pressed="true"] { border-color: var(--button-accent-border); color: var(--app-accent); background: var(--app-accent-soft); }
.practice-pitch-range-bar {
  display: grid;
  grid-template-columns: auto minmax(160px, 1fr) minmax(220px, auto);
  min-height: 30px;
  align-items: center;
  gap: 8px;
  padding: 3px 12px;
  border-bottom: 1px solid var(--app-line);
  color: var(--app-muted);
  background: var(--app-panel-2);
  font-size: 10px;
}
.practice-pitch-range-bar > span { color: var(--app-faint); font-weight: 800; white-space: nowrap; }
.practice-pitch-range-bar > output { min-width: 0; overflow: hidden; color: var(--app-text); font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.practice-pitch-range-ruler {
  position: relative;
  height: 18px;
  overflow: hidden;
  border: 1px solid var(--app-line);
  border-radius: 4px;
  background: repeating-linear-gradient(90deg, var(--app-panel) 0 1px, transparent 1px 10%);
  cursor: crosshair;
  touch-action: none;
}
.practice-pitch-range-ruler:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; }
.practice-pitch-range-ruler > span { position: absolute; inset: 0; pointer-events: none; }
.practice-pitch-range-ruler > span > b { position: absolute; top: 1px; left: var(--pitch-range-tick); padding-left: 3px; border-left: 1px solid color-mix(in srgb, var(--app-muted) 42%, var(--app-line)); color: var(--app-faint); font-size: 8px; font-weight: 650; line-height: 14px; transform: translateX(-1px); }
.practice-pitch-range-ruler > span > b:last-child { padding-left: 0; padding-right: 3px; border-left: 0; border-right: 1px solid color-mix(in srgb, var(--app-muted) 42%, var(--app-line)); transform: translateX(-100%); }
.practice-pitch-range-ruler > i {
  position: absolute;
  inset-block: 2px;
  left: var(--pitch-range-start, 0%);
  width: var(--pitch-range-width, 0%);
  min-width: 2px;
  display: grid;
  place-items: center;
  border: 1px solid var(--app-accent);
  border-radius: 3px;
  background: color-mix(in srgb, var(--app-accent) 28%, var(--app-panel));
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
}
.practice-pitch-range-ruler > i:active { cursor: grabbing; }
.practice-pitch-range-ruler > i > em { max-width: calc(100% - 18px); overflow: hidden; color: var(--app-text); font-size: 9px; font-style: normal; font-weight: 750; line-height: 14px; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.practice-pitch-range-ruler > i > b { position: absolute; z-index: 2; inset-block: -3px; width: 10px; border: 1px solid var(--app-accent); border-radius: 3px; background: var(--app-panel); cursor: ew-resize; touch-action: none; }
.practice-pitch-range-ruler > i > b:first-child { left: -5px; }
.practice-pitch-range-ruler > i > b:last-child { right: -5px; }
.practice-pitch-range-ruler > i > b:hover { background: var(--app-accent-soft); box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-accent) 22%, transparent); }
.practice-pitch-preview-source {
  max-width: 150px;
  overflow: hidden;
  color: var(--app-muted) !important;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.practice-pitch-preview-time { min-width: 72px; font: 10px var(--font-family-mono); white-space: nowrap; }
.practice-pitch-preview-mixer { position: relative; }
.practice-pitch-preview-mixer > summary {
  display: grid;
  min-height: 30px;
  place-items: center;
  padding: 0 9px;
  border: 1px solid var(--app-line);
  border-radius: 5px;
  color: var(--app-muted);
  background: var(--button-secondary-bg);
  cursor: pointer;
  font-size: 10px;
  list-style: none;
}
.practice-pitch-preview-mixer > summary::-webkit-details-marker { display: none; }
.practice-pitch-preview-mixer > div {
  position: absolute;
  z-index: 30;
  top: calc(100% + 7px);
  right: 0;
  display: grid;
  width: 250px;
  padding: 11px;
  gap: 10px;
  border: 1px solid var(--app-line);
  border-radius: 6px;
  background: var(--app-panel);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--app-shadow) 55%, transparent);
}
.practice-pitch-preview-mixer:not([open]) > div { display: none; }
.practice-pitch-preview-mixer .practice-pitch-preview-volume {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  min-width: 0 !important;
  gap: 8px !important;
}
.practice-pitch-preview-mixer .practice-pitch-preview-volume input {
  grid-column: 2 !important;
  width: 100% !important;
}
.practice-pitch-preview-mixer .practice-pitch-preview-volume output { min-width: 36px; text-align: right; }
.practice-pitch-editor-lyrics { min-height: 44px !important; max-height: 44px !important; padding: 4px 16px !important; }
.practice-pitch-lyric-live { font-size: 19px; }
.practice-piano-empty {
  width: min(360px, calc(100% - 32px));
  padding: 16px 18px;
  border-radius: 6px;
  box-shadow: 0 14px 36px color-mix(in srgb, var(--app-shadow) 36%, transparent);
}
.practice-piano-empty strong { font-size: 13px; }
.practice-piano-empty span { max-width: 300px; }
.practice-piano-playback-range {
  position: absolute;
  z-index: auto;
  top: 0;
  bottom: 0;
  left: var(--pitch-range-x);
  width: var(--pitch-range-w);
  border-inline: 1px solid var(--app-secondary);
  background: color-mix(in srgb, var(--app-secondary) 8%, transparent);
  pointer-events: none;
}
.practice-piano-playback-range.is-phrase-focus {
  z-index: 2;
  border-inline-width: 2px;
  border-inline-color: var(--app-accent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--app-accent) 18%, transparent), color-mix(in srgb, var(--app-accent) 6%, transparent)),
    repeating-linear-gradient(
      90deg,
      color-mix(in srgb, var(--app-accent) 10%, transparent) 0,
      color-mix(in srgb, var(--app-accent) 10%, transparent) 8px,
      transparent 8px,
      transparent 16px
    );
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-accent) 24%, transparent);
}
.practice-piano-playback-range__badge {
  position: absolute;
  z-index: 7;
  top: 6px;
  left: 50%;
  max-width: calc(100% - 12px);
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--app-accent) 42%, var(--app-line));
  border-radius: 999px;
  color: var(--app-text);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: color-mix(in srgb, var(--app-panel) 88%, var(--app-accent-soft));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--app-shadow) 28%, transparent);
  transform: translateX(-50%);
  pointer-events: none;
}
.practice-pitch-phrase-focus-chip {
  display: inline-flex;
  align-items: center;
  max-width: 6.5rem;
  padding: 1px 6px;
  border: 1px solid color-mix(in srgb, var(--app-accent) 34%, var(--app-line));
  border-radius: 999px;
  color: var(--app-accent);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: color-mix(in srgb, var(--app-accent) 12%, var(--app-panel));
}
.practice-pitch-range-bar-leading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.practice-pitch-range-bar.is-phrase-focus > .practice-pitch-range-bar-leading > [data-pitch-range-bar-label] {
  color: var(--app-accent);
  font-weight: 800;
}
.practice-pitch-range-ruler > i.is-phrase-focus {
  border-color: var(--app-accent);
  background: color-mix(in srgb, var(--app-accent) 34%, var(--app-panel));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--app-accent) 18%, transparent);
}
.pitch-phrase-focus-active .pitch-transport-zone-range > .pitch-transport-zone-label {
  color: var(--app-accent);
  font-weight: 800;
}
.practice-piano-playback-range.is-looping { border-inline-color: var(--app-accent); background: color-mix(in srgb, var(--app-accent) 10%, transparent); }
.practice-piano-playback-range.is-phrase-focus.is-looping {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--app-accent) 22%, transparent), color-mix(in srgb, var(--app-accent) 8%, transparent)),
    repeating-linear-gradient(
      90deg,
      color-mix(in srgb, var(--app-accent) 12%, transparent) 0,
      color-mix(in srgb, var(--app-accent) 12%, transparent) 8px,
      transparent 8px,
      transparent 16px
    );
}
.practice-piano-playback-range > button { position: absolute; z-index: 6; top: 0; bottom: 0; width: 14px; padding: 0; border: 0; border-radius: 0; color: var(--app-secondary); background: transparent; box-shadow: none; cursor: ew-resize; pointer-events: auto; touch-action: none; }
.practice-piano-playback-range > button:first-child { left: -7px; }
.practice-piano-playback-range > button:last-child { right: -7px; }
.practice-piano-playback-range > button::before { position: absolute; inset-block: 0; left: 50%; width: 2px; background: currentColor; box-shadow: 0 0 7px color-mix(in srgb, currentColor 48%, transparent); transform: translateX(-50%); content: ''; }
.practice-piano-playback-range > button::after { position: absolute; top: 4px; left: 50%; width: 8px; height: 18px; border: 1px solid currentColor; border-radius: 3px; background: var(--app-panel); transform: translateX(-50%); content: ''; }
.practice-piano-playback-range > button:hover,
.practice-piano-playback-range > button:focus-visible { color: var(--app-accent); }
.practice-pitch-pan-strip { min-height: 24px !important; padding-inline: 10px; }

@media (max-width: 1120px) {
  .pitch-toolbar-zone-label,
  .pitch-transport-zone-label,
  .practice-pitch-editor-statusmeta .practice-pitch-selection-status,
  .pitch-toolbar-zoom > span { display: none; }
  .pitch-toolbar-smart-scope > span,
  .pitch-toolbar-smart-gap > span { display: none; }
}
@media (max-width: 1040px) {
  .practice-pitch-editor { grid-template-rows: auto auto auto auto auto minmax(220px, 1fr) auto; }
  .practice-pitch-editor-head { grid-template-columns: minmax(130px, 1fr) auto; min-height: 46px !important; }
  .practice-pitch-editor-kicker,
  .pitch-head-inspector { display: none; }
  .practice-pitch-editor-titleline > strong { font-size: 14px !important; }
  .practice-pitch-editor-actions { gap: 4px !important; }
  .pitch-head-action-group button { min-width: 30px !important; }
  .pitch-head-save { padding-inline: 8px !important; }
  .practice-pitch-editor-statusbar {
    grid-template-columns: minmax(0, 1fr);
  }
  .practice-pitch-editor-statusmeta { display: none; }
  .practice-pitch-editor-toolbar { position: relative; min-width: 0; }
  .pitch-toolbar-row-view .pitch-toolbar-more {
    position: static;
    margin-left: auto;
  }
  .pitch-toolbar-more > div { grid-template-columns: 1fr; width: min(320px, calc(100vw - 20px)) !important; max-height: min(520px, calc(100vh - 160px)); overflow: auto; }
  .pitch-toolbar-more section + section { padding: 9px 0 0; border-top: 1px solid var(--app-line); border-left: 0; }
  .pitch-transport-zone-playback { flex-basis: 100%; }
  .practice-pitch-range-bar { grid-template-columns: auto minmax(120px, 1fr) auto; }
  .practice-pitch-range-bar > output { display: none; }
  .practice-pitch-preview-source { display: none; }
  .practice-pitch-lyric-live { font-size: 16px; }
}
@media (max-width: 520px) {
  .practice-pitch-save-state,
  .pitch-head-action-group:not(.pitch-head-transport),
  .pitch-toolbar-snap { display: none; }
  .pitch-layer-modes button { min-width: 46px; padding-inline: 6px; font-size: 10px; }
  .pitch-head-transport [data-action="pitch-play"] { min-width: 38px !important; }
  .pitch-head-transport [data-pitch-play-label] { display: none; }
  .pitch-transport-zone-range .practice-pitch-preview-range-actions [data-action="pitch-range-from-notes"],
  .pitch-transport-zone-range .practice-pitch-preview-range-actions [data-action="pitch-clear-range"] { display: none; }
  .practice-pitch-range-bar { grid-template-columns: minmax(90px, 1fr); }
  .practice-pitch-range-bar > span { display: none; }
  .practice-pitch-preview-time { display: none; }
  .pitch-toolbar-zone-connect { flex-wrap: wrap; }
}

/* Pitch editor layout guard: each shelf keeps one horizontal line and scrolls
   sideways instead of wrapping down over the transport / lyric lanes.
   Grid default min-width:auto would grow the toolbar past the window and let
   overflow:hidden on the editor clip 视图/缩放 at the right edge. */
.practice-pitch-editor-toolbar {
  display: grid !important;
  grid-template-rows: auto auto !important;
  align-content: start;
  min-width: 0 !important;
  max-width: 100%;
  width: 100%;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}
.practice-pitch-editor-toolbar .pitch-toolbar-row {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-width: 0;
  min-height: 40px;
  flex-wrap: nowrap !important;
  align-items: center;
  padding: 5px 16px 5px 12px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-padding-inline: 12px 20px;
  scrollbar-width: thin;
}
.practice-pitch-editor-toolbar .pitch-toolbar-zone {
  max-width: none;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
}
.practice-pitch-editor-toolbar .pitch-toolbar-zone > button,
.practice-pitch-editor-toolbar .pitch-toolbar-zone > label,
.practice-pitch-editor-toolbar .pitch-toolbar-zone > .pitch-layer-modes,
.practice-pitch-editor-toolbar .pitch-toolbar-zone > .pitch-toolbar-zoom {
  flex: 0 0 auto;
}
.practice-pitch-editor-toolbar .pitch-toolbar-row-view .pitch-toolbar-more {
  position: absolute;
  top: 5px;
  right: 14px;
  flex: 0 0 auto;
  margin-left: 0;
  z-index: 2;
}
.practice-pitch-editor-toolbar .pitch-toolbar-row-view {
  position: relative;
  padding-right: 90px;
}
.practice-pitch-editor-lyrics {
  min-height: 52px !important;
  max-height: 72px !important;
  padding-block: 7px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}
.practice-pitch-lyric-live {
  min-width: max-content;
  line-height: 1.25;
  white-space: nowrap;
}
.practice-pitch-word-lane {
  height: 54px;
  min-height: 54px;
}
.practice-pitch-word {
  z-index: 9;
  min-width: 18px;
  padding-inline: 4px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.practice-pitch-word-boundary-layer { z-index: 10; }

/* Context-menu groups keep the first actions visible and move advanced
   operations behind compact, keyboard-friendly submenus. */
.practice-pitch-context-menu {
  min-width: 214px;
  width: min(260px, calc(100vw - 18px));
  gap: 2px;
}
.practice-pitch-context-menu > button { min-height: 30px; }
.practice-pitch-context-group {
  margin-top: 2px;
  border-top: 1px solid var(--app-line);
}
.practice-pitch-context-group > summary {
  display: flex;
  min-height: 31px;
  align-items: center;
  justify-content: space-between;
  padding: 0 9px;
  border-radius: 4px;
  color: var(--app-text);
  background: var(--button-secondary-bg);
  cursor: pointer;
  font-size: 11px;
  font-weight: 750;
  list-style: none;
}
.practice-pitch-context-group > summary::-webkit-details-marker { display: none; }
.practice-pitch-context-group > summary::after { margin-left: 9px; color: var(--app-muted); content: '›'; font-size: 15px; }
.practice-pitch-context-group[open] > summary { color: var(--button-accent-text); background: var(--button-accent-bg); }
.practice-pitch-context-group[open] > summary::after { transform: rotate(90deg); }
.practice-pitch-context-group > div {
  display: grid;
  gap: 2px;
  padding: 4px 0 3px 8px;
  border-left: 2px solid var(--app-accent-soft);
}
.practice-pitch-context-group button { min-height: 29px; padding-inline: 8px; }
.practice-pitch-context-group .practice-pitch-context-split {
  display: grid;
  gap: 5px;
  margin: 3px 4px 2px 0;
  padding: 6px 5px 4px;
  border: 1px solid var(--app-line);
  border-radius: 4px;
}
.practice-pitch-context-group .practice-pitch-context-split[hidden] { display: none; }
.practice-pitch-context-hint {
  margin: 3px 7px 2px;
  color: var(--app-muted);
  font-size: 10px;
  line-height: 1.35;
}
.practice-pitch-context-hint[data-state="ready"] { color: var(--status-info-text); }
.practice-pitch-context-hint[data-state="warning"] { color: var(--status-warning); }

@media (max-width: 1040px) {
  .practice-pitch-editor-toolbar .pitch-toolbar-row-view .pitch-toolbar-more {
    position: absolute;
    margin-left: 0;
  }
}

.pitch-head-transport [data-action="pitch-pause"] {
  display: inline-flex;
  min-width: 62px !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--app-text) !important;
}
.pitch-head-transport [data-action="pitch-play"][data-state="playing"] {
  color: var(--app-accent-ink) !important;
  background: var(--app-accent) !important;
}
.pitch-head-transport button:disabled {
  cursor: not-allowed;
  color: var(--app-text) !important;
  background: var(--app-panel-2) !important;
  opacity: 1;
}

.practice-pitch-insert-panel {
  position: absolute;
  z-index: 90;
  top: 112px;
  left: 14px;
  width: min(760px, calc(100% - 28px));
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--app-accent) 48%, var(--app-line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--app-panel) 94%, var(--app-accent-soft));
  box-shadow: 0 18px 48px color-mix(in srgb, var(--app-shadow) 72%, transparent);
}
.practice-pitch-insert-panel[hidden] { display: none; }
.practice-pitch-insert-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.practice-pitch-insert-panel > header > div { display: grid; gap: 2px; }
.practice-pitch-insert-panel > header strong { color: var(--app-text); font-size: 13px; }
.practice-pitch-insert-panel > header span { color: var(--app-muted); font-size: 9px; }
.practice-pitch-insert-panel > header button {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--app-line);
  border-radius: 6px;
  background: var(--control-bg);
  color: var(--app-text);
  font-size: 17px;
}
.practice-pitch-insert-fields {
  display: grid;
  grid-template-columns: minmax(130px, 1.5fr) auto minmax(90px, .7fr) auto minmax(100px, .8fr) minmax(100px, .8fr) auto auto;
  align-items: end;
  gap: 8px;
}
.practice-pitch-insert-fields label { display: grid; gap: 4px; color: var(--app-muted); font-size: 9px; font-weight: 700; }
.practice-pitch-insert-fields input:not([type="checkbox"]) {
  width: 100%;
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid var(--app-line);
  border-radius: 5px;
  background: var(--control-bg);
  color: var(--app-text);
}
.practice-pitch-insert-fields > button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--button-secondary-border);
  border-radius: 5px;
  background: var(--button-secondary-bg);
  color: var(--button-secondary-text);
  font-size: 10px;
  font-weight: 800;
}
.practice-pitch-insert-fields > output {
  min-height: 32px;
  padding: 9px 7px 0;
  color: var(--app-accent);
  font: 800 10px var(--font-family-mono);
  white-space: nowrap;
}
.practice-pitch-insert-fields .practice-pitch-insert-snap {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.practice-pitch-inspector-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.practice-pitch-inspector-actions button { min-height: 32px; }
.practice-pitch-value {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--app-line);
  border-radius: 6px;
  background: var(--app-panel-2);
}
.practice-pitch-value b { color: var(--app-accent); font-size: 18px; }

.practice-recording-device-card.practice-recording-device-routing {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
}
.practice-recording-device-routing-head {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.practice-recording-device-routing-head > div { display: grid; min-width: 0; gap: 2px; }
.practice-recording-device-routing-head button { width: 32px; padding: 0; font-size: 15px; }
.practice-recording-device-routing-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 8px !important;
}
.practice-recording-device-routing-grid label { min-width: 0; }
.practice-recording-device-routing-grid select {
  width: 100%;
  min-height: 34px;
  padding: 0 28px 0 9px;
  overflow: hidden;
  border: 1px solid var(--app-line);
  border-radius: 6px;
  background: var(--control-bg);
  color: var(--app-text);
  font-size: 10px;
  text-overflow: ellipsis;
}

@media (max-width: 900px) {
  .practice-pitch-insert-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .practice-pitch-insert-text { grid-column: span 2; }
  .practice-pitch-insert-snap { grid-column: span 2; }
}
@media (max-width: 700px) {
  .practice-pitch-insert-panel { top: 106px; }
  .practice-pitch-insert-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

html[data-layout-mode="desktop"] .practice-stage { padding-bottom: 0; }
html[data-layout-mode="desktop"] .practice-transport { min-height: 55px; padding-block: 6px; }
/* Restore the non-scrolling desktop runway: the stage owns the full viewport,
   the lyric panel is the adjustable top slice, and the pitch surface fills the
   remaining space above the timeline and transport. */
html[data-layout-mode="desktop"] .practice-stage { overflow: hidden; }
html[data-layout-mode="desktop"] .practice-runway {
  flex: 1 1 var(--practice-runway-height, clamp(200px, 26vh, 320px));
  height: auto;
  min-height: 0;
  max-height: none;
}
@media (max-height: 740px) {
  html[data-layout-mode="desktop"] .practice-transport { min-height: 54px; padding-block: 5px; }
}
.practice-pitch-coverage {
  position: absolute;
  z-index: 6;
  top: 64px;
  left: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--status-warning-text) 52%, var(--app-line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--status-warning-bg) 72%, var(--app-panel));
  box-shadow: 0 10px 28px var(--app-shadow);
  color: var(--app-text);
}

.practice-pitch-coverage[hidden] { display: none; }
.practice-stage > .practice-pitch-coverage {
  position: relative;
  inset: auto;
  z-index: 6;
  flex: 0 0 auto;
  width: auto;
  margin: 0 0 8px;
}
.practice-pitch-coverage-body {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.practice-pitch-coverage-body > div:first-child { min-width: 0; display: grid; gap: 2px; }
.practice-pitch-coverage > div { min-width: 0; display: grid; gap: 2px; }
.practice-pitch-coverage > .practice-pitch-coverage-actions,
.practice-pitch-coverage-actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.practice-pitch-coverage span { color: var(--status-warning-text); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.practice-pitch-coverage strong { font-size: 14px; }
.practice-pitch-coverage small { overflow: hidden; color: var(--app-text-muted); text-overflow: ellipsis; white-space: nowrap; }
.practice-pitch-coverage-actions button {
  flex: 0 0 auto;
  border-color: color-mix(in srgb, var(--status-warning-text) 56%, var(--app-line));
  background: color-mix(in srgb, var(--status-warning-bg) 82%, var(--app-panel));
  color: var(--app-text);
}
.practice-pitch-coverage-dismiss {
  border-style: dashed;
  color: var(--app-text-muted);
  font-size: 12px;
}
.practice-readiness-pills > span.warning.is-actionable {
  cursor: pointer;
}
.practice-readiness-pills > span.warning.is-actionable:hover {
  border-color: color-mix(in srgb, var(--status-warning-text) 58%, var(--app-line));
  background: color-mix(in srgb, var(--status-warning-bg) 42%, var(--app-panel));
}
.practice-readiness-pills > span.warning.is-actionable:focus-visible {
  outline: 2px solid var(--app-accent);
  outline-offset: 2px;
}

.practice-ready-chip.warning {
  border-color: color-mix(in srgb, var(--status-warning-text) 58%, var(--app-line));
  background: color-mix(in srgb, var(--status-warning-bg) 74%, var(--app-panel));
}

/* Final pitch workspace row map: each visible rail owns one row, leaving the roll the remaining space. */
.pitch-editor-open .practice-pitch-editor {
  grid-template-rows: auto auto auto auto auto minmax(220px, 1fr) auto;
  min-width: 0;
  max-width: 100%;
}
.practice-pitch-editor > :is(
  .practice-pitch-editor-head,
  .practice-pitch-editor-statusbar,
  .practice-pitch-editor-toolbar,
  .practice-pitch-transport,
  .practice-pitch-editor-lyrics,
  .practice-pitch-editor-body,
  .practice-pitch-pan-strip
) {
  min-width: 0;
  max-width: 100%;
}
.practice-pitch-editor-body {
  padding-right: 8px;
  box-sizing: border-box;
}
.pitch-slice-tool-active [data-pitch-roll],
.pitch-slice-tool-active [data-pitch-note] { cursor: crosshair; }
.pitch-slice-tool-active [data-action="pitch-slice-tool"],
[data-action="pitch-slice-tool"][aria-pressed="true"] {
  border-color: var(--button-accent-border) !important;
  color: var(--app-accent) !important;
  background: var(--app-accent-soft) !important;
}

/* The pitch renderer can be independently suspended on lower-power systems.
   Keep its toolbar reachable while reclaiming the large canvas area. */
.practice-studio[data-pitch-runway-enabled="false"] .practice-runway,
.practice-studio.professional-recording-mode[data-pitch-runway-enabled="false"] .practice-runway {
  flex: 0 0 58px;
  height: 58px;
  min-height: 58px;
  max-height: 58px;
}
.practice-studio[data-pitch-runway-enabled="false"] .practice-runway-resize,
.practice-studio[data-pitch-runway-enabled="false"] .practice-pitch-coverage,
.practice-studio[data-pitch-runway-enabled="false"] .practice-runway-empty { display: none !important; }
.practice-studio[data-pitch-runway-enabled="false"] [data-pitch-canvas],
.practice-studio[data-pitch-runway-enabled="false"] [data-pitch-canvas-static],
.practice-studio[data-pitch-runway-enabled="false"] [data-pitch-scroll-layer],
.practice-studio[data-pitch-runway-enabled="false"] [data-pitch-canvas-blocks],
.practice-studio[data-pitch-runway-enabled="false"] [data-pitch-active-block],
.practice-studio[data-pitch-runway-enabled="false"] [data-merged-pitch-playhead] { display: none !important; }

/* Floating pitch properties: readable, movable, and independent of timeline space. */
.practice-pitch-inspector {
  top: clamp(96px, 18vh, 180px);
  right: 12px;
  bottom: auto;
  width: min(340px, calc(100% - 24px));
  max-height: calc(100% - 24px);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(12px, 0, 0) scale(.98);
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms;
}
.practice-pitch-inspector.is-open {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0) scale(1);
  transition-delay: 0s;
}
.practice-pitch-inspector.is-dragging { transition: none; user-select: none; }
.practice-pitch-inspector-head {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px 8px 14px;
  border-bottom: 1px solid var(--app-line);
  background: var(--app-panel-2);
  cursor: move;
  touch-action: none;
}
.practice-pitch-inspector-head > span { min-width: 0; display: grid; gap: 2px; }
.practice-pitch-inspector-head small { color: var(--app-muted); font-size: 9px; }
.practice-pitch-inspector-head strong { overflow: hidden; color: var(--app-text); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.practice-pitch-inspector-head > div { display: flex; gap: 5px; }
.practice-pitch-inspector-head button { min-height: 30px; padding-inline: 10px; }
.practice-pitch-inspector-head [data-action="pitch-inspector-save"] {
  border-color: var(--button-accent-border);
  color: var(--button-accent-text);
  background: var(--button-accent-bg);
}
.practice-pitch-inspector-content { min-height: 0; display: grid; align-content: start; gap: 12px; padding: 14px; overflow: auto; }
.practice-pitch-inspector-content > p { margin: 0; color: var(--app-muted); font-size: 10px; line-height: 1.55; }
.practice-pitch-inspector-note-title { color: var(--app-text); font-size: 22px; }
.practice-pitch-inspector-time { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.practice-pitch-inspector-content label { display: grid; gap: 5px; color: var(--app-muted); font-size: 10px; font-weight: 700; }
.practice-pitch-inspector-content input { width: 100%; height: 34px; padding: 0 9px; border: 1px solid var(--app-line); border-radius: 5px; color: var(--app-text); background: var(--control-bg); }
.practice-piano-playhead,
.practice-pitch-word-playhead { will-change: transform; }

/* Calibration playback is part of the guided editor flow. It spans the same
   safe width as the workbench so it never floats over the timeline. */
html body.beat-calibration-workspace-open .practice-stage > .practice-transport {
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  display: flex !important;
  width: calc(100% - 36px) !important;
  max-width: none !important;
  min-height: 58px !important;
  margin: 0 auto !important;
  transform: none !important;
}

/* Popup readability contract: every floating practice tool keeps body copy at
   a legible size, while titles remain visually distinct. The toolbar can be
   scaled for the beat animation, so these values intentionally live on the
   popup content instead of relying on inherited micro labels. */
:is(
  .practice-accompaniment-pitch-panel,
  .practice-recording-context-menu,
  .practice-beat-lyric-menu,
  .practice-pitch-context-menu,
  .practice-pitch-word-menu,
  .practice-recording-eq-panel,
  .practice-pitch-insert-panel,
  .practice-pitch-inspector,
  .practice-multitrack-editor,
  .practice-beat-pitch-quick-tools > div,
  .practice-calibration-manager > div,
  .practice-beat-sound-settings > div
) {
  font-size: 12px;
}
:is(
  .practice-accompaniment-pitch-panel,
  .practice-recording-context-menu,
  .practice-beat-lyric-menu,
  .practice-pitch-context-menu,
  .practice-pitch-word-menu,
  .practice-recording-eq-panel,
  .practice-pitch-insert-panel,
  .practice-pitch-inspector,
  .practice-multitrack-editor,
  .practice-beat-pitch-quick-tools > div,
  .practice-calibration-manager > div,
  .practice-beat-sound-settings > div
) :is(label, p, small, output, [data-help], [data-status]) {
  font-size: 12px;
  line-height: 1.5;
}
:is(
  .practice-accompaniment-pitch-panel,
  .practice-recording-context-menu,
  .practice-beat-lyric-menu,
  .practice-pitch-context-menu,
  .practice-pitch-word-menu,
  .practice-recording-eq-panel,
  .practice-pitch-insert-panel,
  .practice-pitch-inspector,
  .practice-multitrack-editor,
  .practice-beat-pitch-quick-tools > div,
  .practice-calibration-manager > div,
  .practice-beat-sound-settings > div
) :is(button, input, select, textarea) {
  font-size: 12px;
}
:is(
  .practice-recording-context-menu,
  .practice-beat-lyric-menu,
  .practice-pitch-context-menu,
  .practice-pitch-word-menu
) :is(button, kbd) {
  min-height: 34px;
}
.practice-recording-context-menu kbd,
.practice-beat-lyric-menu kbd,
.practice-pitch-context-menu kbd,
.practice-pitch-word-menu kbd {
  font-size: 11px;
}
.practice-beat-pitch-quick-tools > summary,
.practice-beat-more-tools > summary,
.practice-beat-lyric-layout > summary,
.practice-beat-sound-settings > summary,
.practice-calibration-manager > summary {
  font-size: 12px;
}
.practice-beat-pitch-quick-tools > div {
  width: min(360px, calc(100vw - 28px));
  gap: 9px;
  padding: 12px;
}
.practice-beat-pitch-quick-tools > div > header strong { font-size: 16px; line-height: 1.35; }
.practice-beat-pitch-quick-tools > div > header small { font-size: 12px; line-height: 1.5; }
.practice-beat-pitch-quick-tools > div > button,
.practice-floating-popover[data-floating-popover="beat-pitch-quick-tools"] > button { min-height: 38px; padding-inline: 7px; }
/* The open panel is reparented to the shared floating layer. Keep its layout
   attached to the panel identity rather than the closed details ancestor. */
.practice-floating-popover[data-floating-popover="beat-pitch-quick-tools"],
.practice-floating-popover.is-detached[data-floating-popover="beat-pitch-quick-tools"] {
  width: min(380px, calc(100vw - 28px)) !important;
  max-width: calc(100vw - 28px) !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.practice-floating-popover[data-floating-popover="beat-pitch-quick-tools"] > header {
  grid-column: 1 / -1;
  gap: 4px 8px;
}
.practice-floating-popover[data-floating-popover="beat-pitch-quick-tools"] > header strong { font-size: 16px; line-height: 1.35; }
.practice-floating-popover[data-floating-popover="beat-pitch-quick-tools"] > header small { color: var(--app-muted); font-size: 12px; line-height: 1.5; }
.practice-floating-popover[data-floating-popover="beat-pitch-quick-tools"] > button:last-child { grid-column: 1 / -1; }
.practice-beat-sound-settings > div { gap: 9px; padding: 11px; }
.practice-recording-context-menu,
.practice-beat-lyric-menu,
.practice-pitch-context-menu,
.practice-pitch-word-menu { width: min(320px, calc(100vw - 16px)); }
.practice-pitch-context-menu > header strong,
.practice-pitch-context-menu > strong,
.practice-pitch-word-menu > strong { font-size: 12px; }
.practice-pitch-context-body > button,
.practice-pitch-context-menu > button,
.practice-pitch-word-menu button { min-height: 36px; }
.practice-pitch-insert-panel > header span,
.practice-pitch-inspector-head small { font-size: 12px; }
.practice-pitch-insert-fields label,
.practice-pitch-inspector-content label { font-size: 12px; }
.practice-pitch-insert-fields > button,
.practice-pitch-inspector-head button,
.practice-pitch-inspector-actions button { min-height: 36px; font-size: 12px; }

/* Beat-driven transparent 3D vocal coach.  The character floats directly over
   the workspace; its controls only surface on interaction, with no card or
   permanent frame competing with the lyrics. */
.practice-beat-coach {
  position: fixed;
  /* The teacher remains above monitoring and every ordinary teaching surface.
     Top command menus, native app chrome, and blocking dialogs remain higher. */
  z-index: var(--app-layer-coach, 2147483598);
  top: var(--practice-beat-coach-y, 110px);
  left: var(--practice-beat-coach-x, calc(100vw - 264px));
  width: var(--practice-beat-coach-width, 236px);
  height: var(--practice-beat-coach-height, 336px);
  display: block;
  overflow: visible;
  border: 0;
  background: transparent;
  color: var(--app-text);
  box-shadow: none;
  user-select: none;
  /* Do not use contain/paint here — baton tip + magic must draw outside the host box. */
  pointer-events: none;
}
.practice-beat-coach[hidden] { display: none; }
.practice-beat-coach[data-coach-state="sing"] .practice-beat-coach-stage { filter: drop-shadow(0 0 18px color-mix(in srgb, var(--app-warm) 34%, transparent)); }
.practice-beat-coach[data-coach-accent-kind="secondary"] .practice-beat-coach-stage { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--app-accent) 24%, transparent)); }
.practice-beat-coach[data-coach-phrase-start="true"] .practice-beat-coach-stage { filter: drop-shadow(0 0 22px color-mix(in srgb, var(--app-warm) 42%, transparent)); }
[data-playback-performance-mode="smooth"] .practice-beat-coach-stage,
[data-playback-performance-mode="minimal"] .practice-beat-coach-stage { filter: none; }
.practice-beat-coach[data-render-suspended="true"] { display: none; }
[data-playback-performance-mode="minimal"] :is(
  .practice-halfbeat-dot,
  .practice-halfbeat-playhead-handle,
  .practice-entry-cue-gate i,
  .practice-piano-playhead
) {
  box-shadow: none;
  filter: none;
}
/* Waist-left chrome: grip + lock + 设置. No status/header text on the teacher. */
.practice-beat-coach-chrome {
  position: absolute;
  z-index: 4;
  top: var(--practice-beat-coach-chrome-y, 52%);
  left: var(--practice-beat-coach-chrome-x, 40%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 140ms ease;
  transform: translate(-100%, -50%);
}
.practice-beat-coach:hover .practice-beat-coach-chrome,
.practice-beat-coach:focus-within .practice-beat-coach-chrome,
.practice-beat-coach.is-dragging .practice-beat-coach-chrome,
.practice-beat-coach-chrome:hover,
.practice-beat-coach-chrome:focus-within { opacity: 1; }
.practice-beat-coach-drag {
  width: 36px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--button-secondary-border);
  border-radius: 8px;
  color: var(--button-secondary-text);
  background: color-mix(in srgb, var(--button-secondary-bg) 88%, transparent);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-app-region: no-drag;
}
.practice-beat-coach.is-dragging .practice-beat-coach-drag { cursor: grabbing; }
.practice-beat-coach-drag > span {
  width: 16px;
  height: 20px;
  background:
    radial-gradient(circle, var(--app-muted) 1.2px, transparent 1.4px) 0 0 / 6px 6px,
    radial-gradient(circle, var(--app-muted) 1.2px, transparent 1.4px) 6px 0 / 6px 6px;
  background-repeat: repeat;
  background-size: 6px 6px;
  opacity: .9;
  pointer-events: none;
}
.practice-beat-coach-lock-toggle {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--button-secondary-border);
  border-radius: 8px;
  color: var(--button-secondary-text);
  background: color-mix(in srgb, var(--button-secondary-bg) 88%, transparent);
  cursor: pointer;
}
.practice-beat-coach-lock-icon {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.practice-beat-coach-lock-icon--closed { display: none; }
.practice-beat-coach-lock-toggle[aria-checked="true"] {
  border-color: var(--app-accent);
  color: var(--app-accent);
  background: var(--app-accent-soft);
}
.practice-beat-coach-lock-toggle[aria-checked="true"] .practice-beat-coach-lock-icon--open { display: none; }
.practice-beat-coach-lock-toggle[aria-checked="true"] .practice-beat-coach-lock-icon--closed { display: block; }
.practice-beat-coach[data-locked-to-entry-cue] .practice-beat-coach-hit { cursor: default; }
.practice-beat-coach[data-view-locked] .practice-beat-coach-hit { cursor: default; }
.practice-beat-coach-settings-open {
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid var(--button-secondary-border);
  border-radius: 8px;
  color: var(--button-secondary-text);
  background: color-mix(in srgb, var(--button-secondary-bg) 88%, transparent);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.practice-beat-coach-hide {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--button-secondary-border);
  border-radius: 8px;
  color: var(--button-secondary-text);
  background: color-mix(in srgb, var(--button-secondary-bg) 88%, transparent);
  cursor: pointer;
}
.practice-beat-coach-hide-icon {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.practice-beat-coach-settings-open:hover,
.practice-beat-coach-drag:hover,
.practice-beat-coach-lock-toggle:hover,
.practice-beat-coach-hide:hover,
.practice-beat-coach-settings-open:focus-visible,
.practice-beat-coach-drag:focus-visible,
.practice-beat-coach-lock-toggle:focus-visible,
.practice-beat-coach-hide:focus-visible {
  border-color: var(--app-accent);
  color: var(--app-accent);
  background: var(--app-accent-soft);
}
.practice-beat-coach-settings-open[aria-expanded="true"] {
  border-color: var(--button-accent-border);
  color: var(--button-accent-text);
  background: var(--button-accent-bg);
}
.practice-beat-coach-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Detached settings panel: independent fixed layer, not clipped to the teacher. */
.practice-beat-coach-settings {
  position: fixed;
  /* Child popover: always one layer above the teacher and the teaching window,
     while remaining below the native app shell and blocking dialogs. */
  z-index: var(--app-layer-coach-popover, 2147483599);
  top: var(--practice-beat-coach-settings-y, 120px);
  left: var(--practice-beat-coach-settings-x, 24px);
  width: min(760px, calc(100vw - 24px));
  max-height: var(--practice-beat-coach-settings-max-h, min(92vh, calc(100vh - 24px)));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--app-accent) 34%, var(--app-line));
  border-radius: 12px;
  color: var(--app-text);
  background: color-mix(in srgb, var(--app-panel) 96%, transparent);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--app-shadow) 72%, transparent);
  backdrop-filter: blur(12px);
  pointer-events: auto;
  user-select: none;
}
.practice-beat-coach-settings[hidden] { display: none; }
.practice-beat-coach-settings > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--app-line);
  cursor: grab;
}
.practice-beat-coach-settings.is-dragging-settings > header { cursor: grabbing; }
.practice-beat-coach-settings > header > div { display: grid; gap: 3px; min-width: 0; }
.practice-beat-coach-settings > header span { color: var(--app-muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.practice-beat-coach-settings > header strong { font-size: 16px; }
.practice-beat-coach-settings > header button {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--button-secondary-border);
  border-radius: 7px;
  color: var(--button-secondary-text);
  background: var(--button-secondary-bg);
  font: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.practice-beat-coach-settings > header button:hover { border-color: var(--app-accent); color: var(--app-accent); }
.practice-beat-coach-settings-body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 10px;
  padding: 10px;
  overflow-x: hidden;
  overflow-y: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.practice-beat-coach-settings-group {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--app-line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--app-panel-2) 64%, var(--app-panel));
}
.practice-beat-coach-settings-group > h3 {
  margin: 0 0 2px;
  color: var(--app-text);
  font-size: 12px;
  line-height: 1.3;
}
.practice-beat-coach-settings label > span,
.practice-beat-coach-settings-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.practice-beat-coach-settings label { display: grid; gap: 7px; color: var(--app-text); font-size: 12px; font-weight: 700; }
.practice-beat-coach-settings output { color: var(--app-accent); font: 800 11px/1 var(--font-family-mono); }
.practice-beat-coach-settings input[type="range"] { width: 100%; margin: 0; accent-color: var(--app-accent); cursor: ew-resize; }
.practice-beat-coach-settings select {
  width: 100%;
  min-height: 32px;
  border: 1px solid var(--app-line);
  border-radius: 7px;
  color: var(--app-text);
  background: var(--app-panel-2);
  font: inherit;
  font-size: 12px;
}
.practice-beat-coach-settings .practice-beat-coach-magic-toggle { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.practice-beat-coach-settings .practice-beat-coach-magic-toggle > span { justify-content: flex-start; }
.practice-beat-coach-settings input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--app-accent); cursor: pointer; }
.practice-beat-coach-settings small { color: var(--app-muted); font-size: 12px; line-height: 1.5; }
.practice-beat-coach-tint,
.practice-beat-coach-outfit { margin: 0; padding: 0; border: 0; }
.practice-beat-coach-tint > legend,
.practice-beat-coach-outfit > legend { margin-bottom: 7px; color: var(--app-text); font-size: 12px; font-weight: 700; }
.practice-beat-coach-tint > div,
.practice-beat-coach-outfit > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.practice-beat-coach-tint button,
.practice-beat-coach-outfit button,
.practice-beat-coach-settings-actions button {
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid var(--button-secondary-border);
  border-radius: 7px;
  color: var(--button-secondary-text);
  background: var(--button-secondary-bg);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.practice-beat-coach-tint button:hover,
.practice-beat-coach-outfit button:hover,
.practice-beat-coach-settings-actions button:hover { border-color: var(--app-accent); color: var(--app-accent); }
.practice-beat-coach-tint button[aria-pressed="true"],
.practice-beat-coach-outfit button[aria-pressed="true"] {
  border-color: var(--button-accent-border);
  color: var(--button-accent-text);
  background: var(--button-accent-bg);
}
@media (max-width: 760px) {
  .practice-beat-coach-settings { width: min(560px, calc(100vw - 16px)); }
  .practice-beat-coach-settings-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow-y: auto;
  }
  .practice-beat-coach-settings-group:last-child { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .practice-beat-coach-settings-body { grid-template-columns: 1fr; }
  .practice-beat-coach-settings-group:last-child { grid-column: auto; }
}
@media (max-height: 620px) {
  .practice-beat-coach-settings-body { overflow-y: auto; }
}
.practice-beat-coach-stage {
  position: absolute;
  /* WebGL only draws inside the canvas; expand far past the silhouette so
     raised baton tip + magic rings/sparks stay visible. */
  top: -46%;
  right: -92%;
  bottom: -22%;
  left: -52%;
  min-height: 0;
  overflow: visible;
  background: transparent;
  /* Expanded stage must never steal clicks from beat toolbar / timeline. */
  pointer-events: none;
}
.practice-beat-coach-stage::after { display: none; }
.practice-beat-coach canvas {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  pointer-events: none;
}
/* Only the character host box accepts drag-to-rotate; margins stay click-through. */
.practice-beat-coach-hit {
  position: absolute;
  z-index: 3;
  inset: 8% 18% 6% 18%;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  background: transparent;
}
.practice-beat-coach.is-rotating-view .practice-beat-coach-hit { cursor: grabbing; }
/* Loading sits on the character host box, not the expanded draw stage. */
.practice-beat-coach-loading {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  color: var(--app-muted);
  font-size: 11px;
  pointer-events: none;
}
.practice-beat-coach-loading i { width: 28px; height: 28px; border: 2px solid var(--app-line); border-top-color: var(--app-accent); border-radius: 50%; animation: practice-beat-coach-loading 800ms linear infinite; }
.practice-beat-coach[data-coach-ready="true"] .practice-beat-coach-loading { display: none; }
.practice-beat-coach[data-coach-ready="false"] .practice-beat-coach-loading i { animation: none; border-color: var(--status-danger-border); }
@keyframes practice-beat-coach-loading { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .practice-beat-coach-loading i { animation: none; } }

:is(
  .practice-punch-settings > div,
  .practice-pitch-preview-mixer > div,
  .practice-recording-device-routing,
  .practice-track-inspector,
  .practice-clip-inspector
) {
  font-size: 12px;
}
:is(
  .practice-punch-settings > div,
  .practice-pitch-preview-mixer > div,
  .practice-recording-device-routing,
  .practice-track-inspector,
  .practice-clip-inspector
) :is(label, p, small, output, [data-help], [data-status]) {
  font-size: 12px;
  line-height: 1.5;
}
:is(
  .practice-punch-settings > div,
  .practice-pitch-preview-mixer > div,
  .practice-recording-device-routing,
  .practice-track-inspector,
  .practice-clip-inspector
) :is(button, input, select, textarea) {
  font-size: 12px;
}
html body.beat-calibration-workspace-open .practice-stage > .practice-transport .practice-transport-playback { display: inline-flex !important; }
html body.beat-calibration-workspace-open .practice-stage > .practice-transport .practice-transport-status { display: block !important; flex: 1 1 120px; min-width: 80px; margin-left: 4px; text-align: left; }
html body.beat-calibration-workspace-open .practice-transport-playback button > [data-practice-transport-glyph] { position: static !important; width: 14px !important; height: auto !important; overflow: hidden !important; clip: auto !important; color: var(--app-text) !important; opacity: 1 !important; font-size: 12px !important; }

/* BeatMap calibration is a guided editor, not a floating rehearsal canvas.
   Outside calibration the wrapper is layout-neutral so the existing movable
   beat window and 3D teacher keep their normal behaviour. */
.practice-beat-map-preview-shell,
.practice-beat-map-preview-layout,
.practice-beat-map-preview-canvas { display: contents; }
.practice-beat-map-preview-head { display: none; }

html body.beat-calibration-workspace-open .practice-studio {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-block: 16px 28px;
  scrollbar-gutter: stable;
}
html body.beat-calibration-workspace-open .practice-calibration-guide { display: none !important; }
html body.beat-calibration-workspace-open .practice-beat-map-workbench,
html body.beat-calibration-workspace-open .practice-beat-map-preview-shell,
html body.beat-calibration-workspace-open .practice-stage > .practice-transport {
  width: calc(100% - 36px);
  max-width: none;
  margin-inline: auto !important;
  box-sizing: border-box;
}
html body.beat-calibration-workspace-open .practice-beat-map-workbench {
  flex: 0 0 auto;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--app-line);
  border-radius: 12px;
  background: var(--app-panel);
}
html body.beat-calibration-workspace-open .practice-beat-map-workbench-head {
  min-height: 38px;
  align-items: center;
}
html body.beat-calibration-workspace-open .practice-beat-map-workbench-head > div:first-child {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: baseline;
  gap: 9px;
}
html body.beat-calibration-workspace-open .practice-beat-map-workbench-head > div:first-child > :not(:first-child) { display: initial; }
html body.beat-calibration-workspace-open .practice-beat-map-workbench-head > div:first-child > span,
html body.beat-calibration-workspace-open .practice-beat-map-workbench-head small,
html body.beat-calibration-workspace-open .practice-beat-map-summary :is(b, span, em) { font-size: 12px; }
html body.beat-calibration-workspace-open .practice-beat-map-workbench-head strong { font-size: 16px; }
html body.beat-calibration-workspace-open .practice-beat-map-narrow-settings-toggle { display: none; }
html body.beat-calibration-workspace-open .practice-beat-map-workbench-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
html body.beat-calibration-workspace-open .practice-beat-map-decisions {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
  padding: 12px;
}
html body.beat-calibration-workspace-open .practice-beat-map-decisions > .practice-beat-map-panel-heading,
html body.beat-calibration-workspace-open .practice-beat-map-decisions > .practice-beat-map-advanced { grid-column: 1 / -1; }
html body.beat-calibration-workspace-open .practice-beat-map-decisions > label {
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 8px;
  font-size: 12px;
}
html body.beat-calibration-workspace-open .practice-beat-map-timeline-panel {
  grid-column: 1;
  grid-row: 2;
  grid-template-rows: auto auto 76px auto;
  gap: 9px;
  padding: 12px;
}
.practice-beat-map-panel-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}
.practice-beat-map-panel-heading > span {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--app-accent) 48%, var(--app-line));
  border-radius: 7px;
  color: var(--app-accent-readable);
  background: var(--app-accent-soft);
  font-size: 12px;
  font-weight: 850;
}
.practice-beat-map-panel-heading > div { min-width: 0; display: grid; gap: 2px; }
.practice-beat-map-panel-heading strong { color: var(--app-text); font-size: 14px; }
.practice-beat-map-panel-heading small { color: var(--app-muted); font-size: 12px; line-height: 1.4; }
html body.beat-calibration-workspace-open .practice-beat-map-timeline-panel > header > .practice-beat-map-panel-heading { display: flex; }
html body.beat-calibration-workspace-open .practice-beat-map-current-selection {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid var(--app-line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--app-panel-2) 66%, var(--app-panel));
}
html body.beat-calibration-workspace-open .practice-beat-map-current-selection strong { color: var(--app-text); font-size: 13px; }
html body.beat-calibration-workspace-open .practice-beat-map-current-selection small { color: var(--app-muted); font-size: 12px; }
html body.beat-calibration-workspace-open .practice-beat-map-timeline-panel > header output,
html body.beat-calibration-workspace-open .practice-beat-map-timeline-panel > footer label,
html body.beat-calibration-workspace-open .practice-beat-map-timeline-panel > footer button { font-size: 12px; }
html body.beat-calibration-workspace-open .practice-beat-map-timeline-panel > footer {
  flex-wrap: wrap;
  overflow: visible;
}
html body.beat-calibration-workspace-open .practice-beat-map-actions {
  position: relative;
  min-height: 42px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  overflow: visible;
}
html body.beat-calibration-workspace-open .practice-beat-map-actions > [data-beat-map-status] {
  flex: 1 1 260px;
  min-width: 180px;
  font-size: 12px;
}
.practice-beat-map-audition-actions { display: inline-flex; align-items: center; gap: 6px; }
.practice-beat-map-undo-actions { display: inline-flex; align-items: center; gap: 5px; }
.practice-beat-map-undo-actions button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--button-secondary-border);
  border-radius: 7px;
  color: var(--button-secondary-text);
  background: var(--button-secondary-bg);
  font-size: 12px;
  font-weight: 750;
}
.practice-beat-map-undo-actions button:disabled { cursor: not-allowed; opacity: .42; }
.practice-beat-map-audition-primary {
  border-color: var(--button-accent-border);
  color: var(--button-accent-text);
  background: var(--button-accent-bg);
  font-weight: 800;
}
.practice-beat-map-more-actions { position: relative; }
.practice-beat-map-more-actions > summary {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border: 1px solid var(--button-secondary-border);
  border-radius: 7px;
  color: var(--button-secondary-text);
  background: var(--button-secondary-bg);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}
.practice-beat-map-more-actions > summary::-webkit-details-marker { display: none; }
.practice-beat-map-more-actions > div {
  position: absolute;
  z-index: 230;
  right: 0;
  bottom: calc(100% + 7px);
  min-width: 360px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 9px;
  border: 1px solid var(--app-line);
  border-radius: 9px;
  background: var(--app-panel);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--app-shadow) 62%, transparent);
}
.practice-beat-map-more-actions .practice-beat-map-history { grid-column: 1 / -1; font-size: 12px; }
.practice-beat-map-more-actions .practice-beat-map-history select { flex: 1 1 auto; width: auto; font-size: 12px; }

html body.beat-calibration-workspace-open .practice-beat-map-preview-shell {
  flex: 0 0 auto;
  display: grid;
  gap: 10px;
  margin-top: 10px !important;
  padding: 12px;
  border: 1px solid var(--app-line);
  border-radius: 12px;
  background: var(--app-panel);
}
html body.beat-calibration-workspace-open .practice-beat-map-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.practice-beat-map-preview-head-actions { display: inline-flex; align-items: center; gap: 7px; }
.practice-beat-map-preview-head-actions button {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--button-secondary-border);
  border-radius: 7px;
  color: var(--button-secondary-text);
  background: var(--button-secondary-bg);
  font-size: 12px;
  font-weight: 800;
}
.practice-beat-map-preview-head-actions button[aria-checked="true"] {
  border-color: var(--button-accent-border);
  color: var(--button-accent-text);
  background: var(--button-accent-bg);
}
html body.beat-calibration-workspace-open .practice-beat-map-preview-layout {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  align-items: stretch;
  gap: 10px;
}
/* The impact column is conditional.  When there is no pending BeatMap change,
   reserving its width leaves a large, purposeless blank area beside the live
   preview and makes the calibration surface look detached from its controls. */
html body.beat-calibration-workspace-open .practice-beat-map-preview-layout:not(:has(> .practice-beat-map-impact:not([hidden]))) {
  grid-template-columns: minmax(0, 1fr);
}
html body.beat-calibration-workspace-open .practice-beat-map-preview-canvas {
  position: relative;
  min-width: 0;
  height: clamp(360px, 40vh, 460px);
  min-height: 360px;
  display: block;
  /* Details popovers in the compact cue toolbar are part of this calibration
     surface. Let them escape the preview frame so the lower controls remain
     hit-testable instead of falling through to the practice stage. */
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--app-accent) 32%, var(--app-line));
  border-radius: 10px;
  background: var(--practice-canvas-bg);
}
html body.beat-calibration-workspace-open .practice-beat-map-preview-shell.is-collapsed .practice-beat-map-preview-layout { grid-template-columns: minmax(0, 1fr); }
html body.beat-calibration-workspace-open .practice-beat-map-preview-shell.is-collapsed .practice-beat-map-preview-canvas { display: none; }
html body.beat-calibration-workspace-open .practice-entry-cue {
  position: absolute;
  z-index: 120;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  touch-action: auto;
}
html body.beat-calibration-workspace-open .practice-entry-cue-visual {
  top: 0;
  left: 0;
  width: 100%;
  height: var(--practice-entry-cue-beat-height, 252px);
  transform: none;
}
html body.beat-calibration-workspace-open .practice-entry-cue[data-pitch-merged="true"] .practice-entry-cue-visual {
  top: 0;
  left: 0;
  width: 100%;
  transform: none;
  transform-origin: top left;
}
html body.beat-calibration-workspace-open .practice-entry-cue:not([data-pitch-merged="true"]) .practice-entry-cue-visual {
  top: 50%;
  height: 252px;
  transform: translateY(-50%);
}
/* The calibration workspace keeps the compact toolbar usable.  Its controls
   are part of the calibration loop (merge, zoom, beat labels, pitch helpers,
   profiles and metronome settings), so hiding every direct child leaves only
   the merge switch visible while the related details still occupy no layout.
   Keep the toolbar in-flow and let the shared icon/text mode rules compact it. */
html body.beat-calibration-workspace-open .practice-entry-cue .practice-entry-cue-drag {
  display: none !important;
  pointer-events: none;
  cursor: default;
}
html body.beat-calibration-workspace-open .practice-entry-cue .practice-entry-cue-drag > i,
html body.beat-calibration-workspace-open .practice-entry-cue .practice-entry-cue-resize { display: none !important; }
html body.beat-calibration-workspace-open .practice-calibration-manager > summary {
  /* The calibration cue has no drag handle, so the last compact tool can
     sit beside the window controls at narrow widths. Keep the summary itself
     hit-testable if the controls' reserved corner overlaps by a pixel. */
  position: relative;
  z-index: 25;
}
/* On the full-width calibration canvas the toolbar begins at the left edge,
   so right-anchored detail panels would open to negative X coordinates.
   Open calibration popovers toward the canvas instead; the normal sing Dock
   keeps its compact right-anchored behavior. */
html body.beat-calibration-workspace-open .practice-entry-cue :is(
  .practice-beat-tap-settings,
  .practice-beat-visual-lead-settings,
  .practice-beat-more-tools,
  .practice-beat-lyric-layout,
  .practice-beat-sound-settings,
  .practice-calibration-manager,
  .practice-beat-pitch-quick-tools
) > div {
  right: auto;
  left: 0;
  transform-origin: top left;
}
html body.beat-calibration-workspace-open .practice-beat-coach {
  position: absolute;
  /* Calibration still keeps the teacher above the preview and all ordinary
     interface chrome. The app menu and blocking dialogs remain higher. */
  z-index: var(--app-layer-coach, 2147483598);
  top: 30px;
  right: 18px;
  left: auto;
  width: var(--practice-beat-coach-width, 236px);
  height: var(--practice-beat-coach-height, 336px);
  pointer-events: none;
}
html body.beat-calibration-workspace-open .practice-beat-map-impact {
  display: grid;
  align-self: start;
  align-content: start;
  gap: 10px;
  padding: 14px;
}
html body.beat-calibration-workspace-open .practice-beat-map-impact > header { align-items: flex-start; }
html body.beat-calibration-workspace-open .practice-beat-map-impact > header > [data-beat-map-impact-range],
html body.beat-calibration-workspace-open .practice-beat-map-impact > div span { font-size: 12px; }
html body.beat-calibration-workspace-open .practice-beat-map-save-primary {
  min-height: 40px;
  margin-top: auto;
  border-color: var(--button-accent-border);
  color: var(--button-accent-text);
  background: var(--button-accent-bg);
  font-size: 13px;
  font-weight: 850;
}
html body.beat-calibration-workspace-open .practice-beat-map-save-primary:disabled { cursor: not-allowed; opacity: .5; }
html body.beat-calibration-workspace-open .practice-beat-map-preview-shell.is-collapsed .practice-beat-map-impact {
  grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr) auto;
  align-items: center;
}
html body.beat-calibration-workspace-open .practice-beat-map-preview-shell.is-collapsed .practice-beat-map-impact > p { min-height: 0; }
html body.beat-calibration-workspace-open .practice-beat-map-preview-shell.is-collapsed .practice-beat-map-impact > div { display: none; }
html body.beat-calibration-workspace-open .practice-beat-map-preview-shell.is-collapsed .practice-beat-map-save-primary { min-width: 150px; margin-top: 0; }

html body.beat-calibration-workspace-open .practice-workspace {
  flex: 0 0 auto;
  min-height: 0;
  display: block;
  overflow: visible;
}
html body.beat-calibration-workspace-open .practice-stage {
  display: flex;
  align-items: center;
  padding: 12px 0 18px;
  overflow: visible;
}
html body.beat-calibration-workspace-open .practice-stage > :not(.practice-transport) { display: none !important; }
html body.beat-calibration-workspace-open .practice-stage > .practice-transport {
  position: static !important;
  z-index: auto;
  left: auto !important;
  bottom: auto !important;
  display: flex !important;
  max-width: 1600px;
  min-height: 58px !important;
  padding: 8px 10px;
  border-radius: 10px;
  box-shadow: none;
  transform: none !important;
}

@media (max-width: 1200px) {
  html body.beat-calibration-workspace-open .practice-beat-map-preview-layout { grid-template-columns: minmax(0, 1fr) !important; }
  html body.beat-calibration-workspace-open .practice-beat-map-preview-canvas,
  html body.beat-calibration-workspace-open .practice-beat-map-impact { grid-column: 1; }
  html body.beat-calibration-workspace-open .practice-beat-map-impact { width: 100%; box-sizing: border-box; }
}

@media (max-width: 960px) {
  html body.beat-calibration-workspace-open .practice-beat-map-decisions { grid-template-columns: minmax(0, 1fr); }
  html body.beat-calibration-workspace-open .practice-beat-map-decisions > .practice-beat-map-panel-heading,
  html body.beat-calibration-workspace-open .practice-beat-map-decisions > .practice-beat-map-advanced { grid-column: 1; }
  html body.beat-calibration-workspace-open .practice-beat-map-preview-layout { grid-template-columns: minmax(0, 1fr); }
  html body.beat-calibration-workspace-open .practice-beat-map-preview-shell.is-collapsed .practice-beat-map-impact { grid-template-columns: minmax(0, 1fr) auto; }
  html body.beat-calibration-workspace-open .practice-beat-map-preview-shell.is-collapsed .practice-beat-map-impact > p { grid-column: 1; }
  html body.beat-calibration-workspace-open .practice-beat-map-preview-shell.is-collapsed .practice-beat-map-save-primary { grid-column: 2; grid-row: 1 / span 2; }
}

@media (max-width: 720px) {
  html body.beat-calibration-workspace-open .practice-beat-map-workbench,
  html body.beat-calibration-workspace-open .practice-beat-map-preview-shell,
  html body.beat-calibration-workspace-open .practice-stage > .practice-transport { width: calc(100% - 20px); }
  html body.beat-calibration-workspace-open .practice-beat-map-workbench-head,
  html body.beat-calibration-workspace-open .practice-beat-map-preview-head { align-items: flex-start; flex-direction: column; }
  html body.beat-calibration-workspace-open .practice-beat-map-return { width: 100%; justify-content: flex-start; }
  html body.beat-calibration-workspace-open .practice-beat-map-workbench-head > div:first-child { grid-template-columns: minmax(0, 1fr); }
  html body.beat-calibration-workspace-open .practice-beat-map-workbench-head > div:first-child > span { display: block; }
  html body.beat-calibration-workspace-open .practice-beat-map-summary { flex-wrap: wrap; }
  html body.beat-calibration-workspace-open .practice-beat-map-preview-shell.is-collapsed .practice-beat-map-impact { grid-template-columns: minmax(0, 1fr); }
  html body.beat-calibration-workspace-open .practice-beat-map-preview-shell.is-collapsed .practice-beat-map-save-primary { grid-column: 1; grid-row: auto; width: 100%; }
  .practice-beat-map-audition-actions { width: 100%; flex-wrap: wrap; }
  .practice-beat-map-more-actions > div { right: auto; left: 0; min-width: min(320px, calc(100vw - 44px)); }
}

/* Multitrack is an advanced workspace of its own. Remove rehearsal chrome
   underneath it so there is one clear title, one exit path and one timeline. */
.practice-studio.multitrack-editor-open > .practice-head,
.practice-studio.multitrack-editor-open > .practice-source-settings,
.practice-studio.multitrack-editor-open > .practice-calibration-guide,
.practice-studio.multitrack-editor-open > .practice-entry-cue,
.practice-studio.multitrack-editor-open .practice-transport,
.practice-studio.multitrack-editor-open .practice-beat-coach { display: none !important; }
.practice-studio.multitrack-editor-open .practice-multitrack-editor { z-index: 260; }
.practice-multitrack-head {
  position: relative;
  z-index: 3;
  min-height: 64px;
  padding: 10px 16px;
}
.practice-multitrack-head strong { font-size: 16px; }
.practice-multitrack-head small { max-width: 560px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.practice-multitrack-actions { flex-wrap: nowrap; }
.practice-multitrack-actions > button,
.practice-multitrack-export > summary {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 11px;
  border: 1px solid var(--practice-line);
  border-radius: 5px;
  color: var(--practice-text);
  background: var(--control-bg);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.practice-multitrack-actions > button:hover,
.practice-multitrack-export > summary:hover { border-color: var(--button-accent-border); background: var(--state-hover); }
.practice-multitrack-export { position: relative; }
.practice-multitrack-export > summary::-webkit-details-marker,
.practice-multitrack-more > summary::-webkit-details-marker { display: none; }
.practice-multitrack-export[open] > summary,
.practice-multitrack-more[open] > summary { border-color: var(--button-accent-border); color: var(--button-accent-text); background: var(--button-accent-bg); }
.practice-multitrack-export > div {
  position: absolute;
  z-index: 5;
  top: calc(100% + 7px);
  right: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(110px, 1fr)) auto;
  gap: 8px;
  min-width: 430px;
  padding: 10px;
  border: 1px solid var(--practice-line);
  border-radius: 7px;
  background: var(--practice-panel);
  box-shadow: 0 16px 36px color-mix(in srgb, var(--app-shadow) 72%, transparent);
}
.practice-multitrack-export .practice-export-choice { display: grid; gap: 4px; align-items: stretch; }
.practice-multitrack-export .practice-export-choice select { min-height: 30px; }
.practice-multitrack-export > div > button { align-self: end; min-height: 30px; }
.practice-multitrack-close {
  border-color: var(--button-accent-border) !important;
  color: var(--button-accent-text) !important;
  background: var(--button-accent-bg) !important;
}
.practice-multitrack-toolbar {
  position: relative;
  z-index: 2;
  min-height: 56px;
  flex-wrap: nowrap;
  gap: 12px;
  padding: 8px 16px;
}
.practice-multitrack-edit-tools-primary {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  padding: 0 0 0 12px;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 1px solid var(--practice-line);
}
.practice-multitrack-transport { gap: 5px; padding-right: 12px; }
.practice-multitrack-transport button { min-height: 32px; padding-inline: 10px; }
.practice-multitrack-transport [data-action="multitrack-toggle-play"] { border-color: var(--button-accent-border); color: var(--button-accent-text); background: var(--button-accent-bg); }
.practice-multitrack-cursor-readout { display: inline-flex; align-items: baseline; gap: 5px; color: var(--practice-muted); font-size: 11px; white-space: nowrap; }
.practice-multitrack-cursor-readout strong { color: var(--practice-text); font-variant-numeric: tabular-nums; }
.practice-multitrack-more { position: relative; margin-left: auto; }
.practice-multitrack-more > summary { min-height: 32px; display: inline-flex; align-items: center; padding: 0 11px; border: 1px solid var(--practice-line); border-radius: 5px; color: var(--practice-text); background: var(--control-bg); font-size: 12px; font-weight: 700; cursor: pointer; list-style: none; }
.practice-multitrack-more > div { position: absolute; z-index: 6; top: calc(100% + 7px); right: 0; display: grid; grid-template-columns: repeat(4, minmax(90px, 1fr)); align-items: end; gap: 8px; min-width: min(720px, calc(100vw - 32px)); padding: 10px; border: 1px solid var(--practice-line); border-radius: 7px; background: var(--practice-panel); box-shadow: 0 16px 36px color-mix(in srgb, var(--app-shadow) 72%, transparent); }
.practice-multitrack-more > div > button { min-height: 30px; }
.practice-multitrack-more > div > label { display: grid; gap: 4px; color: var(--practice-muted); font-size: 10px; }
.practice-multitrack-more > div > label input[type="range"] { width: 100%; }
.practice-multitrack-edit-tools { display: flex; flex-wrap: wrap; gap: 5px; grid-column: 1 / -1; padding: 0; border: 0; }
.practice-multitrack-more [data-multitrack-status] { grid-column: 1 / -1; margin: 0; }
.practice-multitrack-body { grid-template-columns: 220px minmax(0, 1fr) 236px; }
.practice-track-row { min-height: 78px; padding: 8px 10px; }

@media (max-width: 960px) {
  .practice-multitrack-head { align-items: flex-start; }
  .practice-multitrack-head small { display: none; }
  .practice-multitrack-toolbar { flex-wrap: wrap; }
  .practice-multitrack-edit-tools-primary { order: 2; flex-basis: auto; padding-left: 0; border-left: 0; }
  .practice-multitrack-more { margin-left: 0; }
  .practice-multitrack-more > div { right: auto; left: 0; }
  .practice-multitrack-export > div { right: auto; left: 0; }
}

@media (max-width: 620px) {
  .practice-multitrack-head { padding: 8px 10px; }
  .practice-multitrack-head > div:first-child { max-width: 120px; }
  .practice-multitrack-actions { gap: 4px; }
  .practice-multitrack-actions > button,
  .practice-multitrack-export > summary { padding-inline: 7px; font-size: 10px; }
  .practice-multitrack-export > div { grid-template-columns: repeat(2, minmax(110px, 1fr)); min-width: min(320px, calc(100vw - 20px)); }
  .practice-multitrack-toolbar { padding-inline: 10px; }
  .practice-multitrack-edit-tools-primary { width: 100%; overflow-x: auto; }
  .practice-multitrack-more > div { grid-template-columns: repeat(2, minmax(90px, 1fr)); min-width: min(320px, calc(100vw - 20px)); }
}

/* The global song strip and the practice header repeated the same song context.
   Inside the desktop practice workspace, keep the purpose-built practice header
   and reclaim the full global strip height for lyrics and tracks. */
html[data-layout-mode="desktop"] body.practice-view-open .active-song-context { display: none !important; }
html[data-layout-mode="desktop"] body.practice-view-open .topbar {
  /* Global menus and utilities remain reachable above teaching and coach
     overlays; blocking dialogs still own the higher dialog layers. */
  z-index: var(--app-layer-shell, 2147483600);
  height: 58px;
  min-height: 58px;
  grid-template-areas: "breadcrumbs utilities";
  grid-template-columns: minmax(220px, 1fr) auto;
  grid-template-rows: minmax(0, 1fr);
  row-gap: 0;
}

/* Device routing is a non-blocking utility panel opened from the runway
   toolbar. Its shell is governed by the shared app-dialog contract; this
   block only owns placement and the feature's internal grid. */
.practice-source-settings.app-dialog {
  position: fixed;
  z-index: 216;
  top: clamp(118px, 15vh, 168px);
  left: 50%;
  transform: translateX(-50%);
}
.practice-source-settings[hidden] { display: none !important; }
.practice-source-settings-head.app-dialog__header { min-height: 68px; gap: 18px; padding: 12px 18px; }
.practice-source-settings-head > div { min-width: 0; display: grid; gap: 2px; }
.practice-source-settings-head span { font-size: 11px; }
.practice-source-settings-head strong { font-size: 16px; }
.practice-source-settings-head small { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.practice-source-settings .practice-control-strip.app-dialog__body {
  min-height: 0;
  grid-template-columns: minmax(130px, .8fr) repeat(3, minmax(150px, 1fr)) auto 36px;
  gap: 10px;
  align-items: end;
}
.practice-source-settings .practice-control-strip label { font-size: 12px; }
.practice-source-settings .practice-control-strip :is(select, button) { min-height: 36px; }
.practice-source-settings .practice-control-strip :is(select, button) { font-size: 12px; }
.practice-device-settings-open.is-open,
.practice-device-settings-open[aria-expanded="true"] {
  border-color: var(--button-accent-border);
  color: var(--button-accent-text);
  background: var(--button-accent-bg);
}

@media (max-width: 1120px) {
  .practice-source-settings.app-dialog { top: clamp(88px, 12vh, 128px); }
  .practice-source-settings .practice-control-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .practice-source-settings .practice-control-strip > button { width: 100%; }
}

@media (max-width: 620px) {
  .practice-source-settings.app-dialog { top: 72px; }
  .practice-source-settings .practice-control-strip { grid-template-columns: minmax(0, 1fr); padding: 12px; }
}

/* Portrait layout still shares the same dialog shell. The source panel is a
   non-blocking app-dialog, so its body must not inherit the old inline-strip
   borders or reduce readable labels below the global floor. */
html[data-layout-mode="portrait-preview"] .practice-source-settings .practice-control-strip.app-dialog__body,
html[data-layout-mode="portrait-native"] .practice-source-settings .practice-control-strip.app-dialog__body {
  border-top: 0;
  border-bottom: 0;
}
html[data-layout-mode="portrait-preview"] .practice-source-settings .practice-control-strip label,
html[data-layout-mode="portrait-native"] .practice-source-settings .practice-control-strip label,
html[data-layout-mode="portrait-preview"] .practice-source-settings .practice-control-strip :is(select, button),
html[data-layout-mode="portrait-native"] .practice-source-settings .practice-control-strip :is(select, button) {
  font-size: 12px;
}

/* Current-song toolbar: use its whole row and preserve the chosen display mode.
   The monitoring rail starts below this header and keeps its own workspace column. */
html[data-layout-mode="desktop"] #practiceStudio .practice-head {
  display: grid;
  grid-template-columns: minmax(130px, max-content) minmax(0, 1fr) 32px;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 7px 14px;
}
html[data-layout-mode="desktop"] #practiceStudio .practice-head-main { grid-column: 1; min-width: 0; max-width: 220px; }
html[data-layout-mode="desktop"] #practiceStudio .practice-title-block { min-width: 0; }
html[data-layout-mode="desktop"] #practiceStudio [data-practice-title] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-layout-mode="desktop"] #practiceStudio .practice-readiness { grid-column: 2; min-width: 0; width: 100%; display: block; }
html[data-layout-mode="desktop"] #practiceStudio .practice-readiness-pills { display: none !important; }
html[data-layout-mode="desktop"] #practiceStudio .practice-close { grid-column: 3; grid-row: 1; width: 32px; height: 34px; min-width: 32px; margin: 0; align-self: start; }
html[data-layout-mode="desktop"] #practiceStudio .practice-head[data-head-layout="stacked"] { grid-template-columns: minmax(0, 1fr) 32px; gap: 6px 10px; }
html[data-layout-mode="desktop"] #practiceStudio .practice-head[data-head-layout="stacked"] .practice-readiness { grid-row: 2; grid-column: 1 / -1; }
html[data-layout-mode="desktop"] #practiceStudio .practice-head[data-head-layout="stacked"] .practice-close { grid-column: 2; }
.practice-save-state { display: flex; min-height: 0; }
.practice-save-state .autosave { font-size: 12px; line-height: 1.4; gap: 5px; }
.practice-save-state:empty { display: none; }
html[data-layout-mode="desktop"] #practiceStudio .practice-head-actions {
  display: flex;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 36px;
  max-height: none;
  flex-flow: row nowrap !important;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  overflow: visible;
}
html[data-layout-mode="desktop"] #practiceStudio .practice-head-actions[data-head-overflow="menu"] { flex-wrap: wrap !important; }
html[data-layout-mode="desktop"] #practiceStudio .practice-head-lyrics-version {
  flex: 0 1 170px;
  width: 170px;
  min-width: 110px;
  max-width: 190px;
  height: 34px;
  display: block;
}
html[data-layout-mode="desktop"] #practiceStudio .practice-head-lyrics-version select { width: 100%; height: 34px; min-height: 34px; font-size: 12px; }
html[data-layout-mode="desktop"] #practiceStudio .practice-head-lyric-reader { color: var(--app-text); background: var(--app-panel); border: 1px solid var(--app-line); border-radius: 6px; }
html[data-layout-mode="desktop"] #practiceStudio [data-practice-head-control] {
  box-sizing: border-box;
  display: inline-flex !important;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 34px;
  max-width: none;
  height: 34px;
  min-height: 34px;
  gap: 5px;
  padding: 0 8px;
  font-size: 12px !important;
  line-height: 1.2;
  white-space: nowrap;
  overflow: visible;
}
html[data-layout-mode="desktop"] #practiceStudio [data-practice-head-control] > .practice-head-control-label,
html[data-layout-mode="desktop"] #practiceStudio [data-practice-head-control] > b {
  position: static !important;
  display: inline !important;
  width: auto !important;
  height: auto !important;
  margin: 0;
  padding: 0 !important;
  overflow: visible !important;
  clip-path: none !important;
  font-size: 12px;
  line-height: 1.2;
}
html[data-layout-mode="desktop"] #practiceStudio [data-practice-head-control] > :is(i, kbd) { display: none !important; }
html[data-layout-mode="desktop"] #practiceStudio [data-practice-head-control] > :is(.practice-toolbar-icon, .sr-command-icon, .sr-command-native-icon) {
  position: static !important;
  display: inline-grid !important;
  flex: 0 0 17px;
  width: 17px !important;
  height: 17px !important;
  margin: 0;
  clip-path: none !important;
  overflow: visible !important;
}
html[data-layout-mode="desktop"][data-command-display-mode="icons"] #practiceStudio .practice-head-actions [data-practice-head-control] { width: 34px; min-width: 34px; max-width: 34px; padding-inline: 0; }
html[data-layout-mode="desktop"][data-command-display-mode="icons"] #practiceStudio .practice-head-actions [data-practice-head-control] > :is(.practice-head-control-label, b) { display: none !important; }
html[data-layout-mode="desktop"][data-command-display-mode="text"] #practiceStudio .practice-head-actions [data-practice-head-control] > :is(.practice-toolbar-icon, .sr-command-icon, .sr-command-native-icon) { display: none !important; }
html[data-layout-mode="desktop"] #practiceStudio [data-practice-head-control][hidden],
html[data-layout-mode="desktop"] #practiceStudio .practice-portrait-profile-toggle { display: none !important; }
html[data-layout-mode="desktop"] #practiceStudio .practice-head-more-tools { position: relative; flex: 0 0 auto; width: auto; height: auto; }
html[data-layout-mode="desktop"] #practiceStudio .practice-head-more-summary { list-style: none; }
html[data-layout-mode="desktop"] #practiceStudio .practice-head-more-summary::-webkit-details-marker { display: none; }
#practiceStudio .practice-head-more-menu {
  display: grid;
  gap: 4px;
  min-width: 220px;
  max-width: calc(100vw - 28px);
  padding: 6px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-elevated);
  box-shadow: 0 12px 30px var(--app-shadow);
}
#practiceStudio .practice-head-more-handle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 6px 8px; font-size: 12px; cursor: move; }
#practiceStudio .practice-head-more-menu.is-detached { z-index: var(--app-layer-menu); }
html[data-layout-mode="desktop"] #practiceStudio .practice-head-more-menu > [data-practice-head-control] { width: 100%; justify-content: flex-start; }
html[data-layout-mode="desktop"] #practiceStudio .practice-head-more-menu .practice-jyutping-mode:not([hidden]) { display: flex; gap: 4px; min-height: 34px; padding: 0; }
html[data-layout-mode="desktop"] #practiceStudio .practice-head-actions[data-head-overflow="inline"] > .practice-head-more-tools,
html[data-layout-mode="desktop"] #practiceStudio .practice-head-actions[data-head-overflow="inline"] .practice-head-more-menu { display: contents; }
html[data-layout-mode="desktop"] #practiceStudio .practice-head-actions[data-head-overflow="inline"] :is(.practice-head-more-summary, .practice-head-more-handle) { display: none !important; }
html[data-layout-mode="desktop"] #practiceStudio .practice-head-actions[data-head-overflow="inline"] .practice-head-more-menu > [data-practice-head-control] { width: auto; }
html[data-layout-mode="desktop"][data-command-display-mode="icons"] #practiceStudio .practice-head-actions[data-head-overflow="inline"] .practice-head-more-menu > [data-practice-head-control] { width: 34px; }
/* Menus are descriptions; toolbar density must never clip menu names or state. */
html[data-layout-mode="desktop"] #practiceStudio .practice-head-actions[data-head-overflow="menu"] .practice-head-more-menu [data-practice-head-control] { width: 100%; max-width: none; padding-inline: 8px; }
html[data-layout-mode="desktop"] #practiceStudio .practice-head-actions[data-head-overflow="menu"] .practice-head-more-menu [data-practice-head-control] > :is(.practice-head-control-label, b, .practice-toolbar-icon, .sr-command-native-icon) { display: inline-flex !important; }
/* Display switches are fixed chrome, never candidates for a scrolling tool rail. */
#practiceStudio .practice-beat-toolbar { padding-right: 0; }
#practiceStudio .practice-beat-window-controls { position: static; flex: 0 0 auto; align-self: center; }
#practiceStudio .practice-beat-window-controls > button { display: inline-flex; align-items: center; justify-content: center; }
#practiceStudio .practice-beat-window-controls > .practice-beat-toolbar-mode-toggle { display: inline-flex !important; flex: 0 0 auto; grid-column: auto; width: 46px; min-width: 46px; justify-content: center; }
#practiceStudio .practice-beat-window-controls > .practice-beat-toolbar-mode-toggle .practice-toolbar-label { position: static; display: inline !important; width: auto; height: auto; margin: 0; clip: auto; clip-path: none; overflow: visible; font-size: 12px; }
#practiceStudio .practice-beat-window-controls > .practice-beat-toolbar-mode-toggle .practice-toolbar-icon { display: none !important; }

/* Native 9:16 teaching recorder. This is a content-first capture composition,
   not the desktop workspace squeezed into a narrow column. */
.practice-portrait-teaching-director,
.practice-portrait-more,
.practice-portrait-safe-zones,
.practice-portrait-annotation-layer { display: none; }
.practice-portrait-profile-toggle { display: none; }
html[data-layout-mode="portrait-native"] #practiceStudio .practice-portrait-profile-toggle {
  display: inline-flex;
  min-width: 76px;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
html[data-layout-mode="portrait-native"] #practiceStudio .practice-portrait-profile-toggle[aria-checked="true"] { border-color: var(--status-success-border); color: var(--status-success-text); background: var(--status-success-bg); }

html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] .topbar,
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] .layout-focus-tabs,
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #desktopAppTitlebar,
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #desktopAppMenu,
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] .desktop-test-data-badge { display: none !important; }
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] :is(.learning-guide-launcher, .toast) { display: none !important; }
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] body.practice-view-open .main-content { min-height: 100vh; padding: 0; }
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio {
  position: relative;
  width: min(100vw, 56.25vh);
  height: min(100vh, 177.778vw);
  max-width: 100vw;
  max-height: 100vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  margin-inline: auto;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: var(--app-bg);
}
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio > .practice-head { display: none; }
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio .practice-portrait-teaching-director:not([hidden]) {
  position: relative;
  z-index: 40;
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 132px;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--app-line);
  background: var(--app-panel);
}
.practice-portrait-teaching-director > header { width: 100%; min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.practice-portrait-teaching-director > header > div { min-width: 0; display: grid; gap: 2px; }
.practice-portrait-teaching-director > header span { color: var(--app-muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.practice-portrait-teaching-director > header strong { color: var(--app-text); font-size: 18px; }
.practice-portrait-teaching-director > header p { min-width: 0; max-width: 54%; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; margin: 0; }
.practice-portrait-teaching-director > header p span { padding: 3px 7px; border: 1px solid var(--status-success-border); border-radius: 999px; color: var(--status-success-text); background: var(--status-success-bg); letter-spacing: 0; }
.practice-portrait-teaching-presets,
.practice-portrait-teaching-director-actions { width: 100%; min-width: 0; display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.practice-portrait-teaching-presets::-webkit-scrollbar,
.practice-portrait-teaching-director-actions::-webkit-scrollbar { display: none; }
.practice-portrait-teaching-presets button,
.practice-portrait-teaching-director-actions button {
  min-height: 36px;
  flex: 0 0 auto;
  padding: 0 10px;
  border: 1px solid var(--app-line);
  border-radius: 6px;
  color: var(--app-text);
  background: var(--button-secondary-bg);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}
.practice-portrait-teaching-presets button[aria-checked="true"],
.practice-portrait-teaching-director-actions button[aria-pressed="true"],
.practice-portrait-teaching-director-actions button[aria-checked="true"] { border-color: var(--button-accent-border); color: var(--button-accent-text); background: var(--button-accent-bg); }
.practice-portrait-teaching-director-actions output { min-width: max-content; margin-left: auto; color: var(--app-muted); font-size: 12px; }
.practice-portrait-teaching-director-actions output[data-state="ready"] { color: var(--status-success-text); }
.practice-portrait-teaching-director-actions output[data-state="warning"] { color: var(--status-warning-text); }

html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio .practice-workspace {
  position: relative;
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  background: var(--app-bg);
}
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio .practice-stage {
  position: relative;
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0;
  padding: 0 6%;
  overflow: visible;
}
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio[data-portrait-teaching-preset="lyrics"] .practice-lyrics,
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio[data-portrait-teaching-preset="dual"] .practice-lyrics,
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio[data-portrait-teaching-preset="phonetic"] .practice-lyrics,
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio[data-portrait-teaching-preset="pitch"] .practice-runway {
  transform: scale(var(--portrait-camera-scale, 1));
  transform-origin: center;
  transition: transform 160ms ease-out;
  will-change: transform;
}
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio .practice-lyrics {
  min-height: 220px;
  flex: 0 0 220px;
  padding: 20px 0 12px;
  justify-content: center;
  background: var(--app-bg);
}
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio .practice-lyric-current { font-size: clamp(46px, 7.2vw, 66px) !important; line-height: 1.32 !important; }
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio :is(.practice-lyric-previous, .practice-lyric-next) { font-size: clamp(26px, 4.4vw, 38px) !important; line-height: 1.35 !important; }
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio .practice-lyric-comparison { font-size: max(24px, .68em) !important; }
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio .practice-runway {
  min-height: 280px;
  height: var(--practice-runway-height, 414px);
  flex: 0 0 var(--practice-runway-height, 414px);
  border-inline: 1px solid var(--app-line);
  background: var(--practice-canvas-bg);
}
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio .practice-pitch-tools {
  top: 12px;
  right: 12px;
  left: auto;
  width: auto;
}
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio .practice-pitch-tools > :not([data-pitch-tool-group="more"]) { display: none; }
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio .practice-pitch-tools :is(button, summary) { min-width: 44px; min-height: 44px; font-size: 12px; }
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio .practice-timeline { min-height: 48px; flex: 0 0 48px; gap: 10px; font-size: 12px; }
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio .practice-stage > .practice-transport {
  display: grid;
  min-height: 72px;
  flex: 0 0 72px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: 52px;
  gap: 8px;
  margin: 0;
  padding: 10px 0;
  border-top: 1px solid var(--app-line);
  overflow: visible;
  background: var(--app-panel);
}
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio .practice-stage > .practice-transport .practice-transport-group { display: contents; }
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio .practice-stage > .practice-transport :is(.practice-transport-playback > :not(.practice-play), .practice-transport-recording > :not(.practice-start), .practice-transport-review, .practice-transport-options) { display: none; }
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio .practice-stage > .practice-transport :is(.practice-play, .practice-start) { display: inline-flex; }
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio .practice-stage > .practice-transport :is(.practice-play, .practice-start, .practice-original-monitor, .practice-queue-menu > summary, .practice-portrait-more) {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  color: var(--app-text);
  background: var(--button-secondary-bg);
  font-size: 14px;
  font-weight: 800;
}
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio .practice-portrait-more { display: inline-flex; gap: 6px; }
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio .practice-transport-status { display: none; }

html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio .practice-side-rail {
  display: block;
  min-height: 136px;
  max-height: 150px;
  flex: 0 0 136px;
  overflow: hidden;
  border-top: 1px solid var(--app-line);
  background: var(--app-panel);
}
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio .practice-secondary-panel { display: contents; }
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio .practice-secondary-panel > summary,
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio .practice-scoreboard-head,
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio .practice-score-basis,
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio .practice-side-tabs,
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio .practice-settings,
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio .practice-history,
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio .practice-compression-quick { display: none; }
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio .practice-scoreboard,
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio .practice-score-live {
  display: grid;
  height: 100%;
  min-height: 0;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px 6%;
  overflow: hidden;
}
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio .practice-score-live > section { min-height: 0; padding: 0; border: 0; }
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio .practice-score-primary { display: grid; text-align: left; }
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio .practice-score-primary > span,
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio .practice-score-primary > em { font-size: 12px; }
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio .practice-score-primary > strong { font-size: 40px; }
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio .practice-score-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 12px; }
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio .practice-score-grid span { font-size: 12px; }
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio .practice-score-grid strong { font-size: 18px; }
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio .practice-level-monitor { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio .practice-level-monitor { grid-column: 1 / -1; }
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio .practice-level-monitor-head { grid-column: 1 / -1; }
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio .practice-level-monitor :is(strong, small, span, em, output) { font-size: 12px; }
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio .practice-level-scale { display: none; }

html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio[data-portrait-teaching-preset="lyrics"] :is(.practice-runway, .practice-side-rail),
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio[data-portrait-teaching-preset="dual"] :is(.practice-runway, .practice-side-rail),
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio[data-portrait-teaching-preset="phonetic"] :is(.practice-runway, .practice-side-rail) { display: none; }
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio[data-portrait-teaching-preset="lyrics"] .practice-lyrics,
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio[data-portrait-teaching-preset="dual"] .practice-lyrics,
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio[data-portrait-teaching-preset="phonetic"] .practice-lyrics { min-height: 64vh; flex-basis: 64vh; }
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio[data-portrait-teaching-preset="pitch"] .practice-side-rail,
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio[data-portrait-teaching-preset="beat"] .practice-side-rail,
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio[data-portrait-teaching-preset="beat-pitch"] .practice-side-rail { display: none; }
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio[data-portrait-teaching-preset="pitch"] .practice-runway {
  height: auto;
  min-height: var(--practice-runway-height, 414px);
  flex: 1 1 auto;
}
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio[data-portrait-teaching-preset="monitor"] .practice-lyrics { min-height: 160px; flex-basis: 160px; }
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio[data-portrait-teaching-preset="monitor"] .practice-side-rail { min-height: 300px; max-height: none; flex-basis: 300px; }

html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio .practice-portrait-safe-zones:not([hidden]),
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio .practice-portrait-annotation-layer:not([hidden]) {
  position: absolute;
  z-index: 300;
  inset: 0;
  display: block;
  pointer-events: none;
}
.practice-portrait-risk-zone { position: absolute; right: 0; left: 0; background: color-mix(in srgb, var(--status-warning-bg) 56%, transparent); }
.practice-portrait-risk-zone.is-top { top: 0; height: 8.333%; }
.practice-portrait-risk-zone.is-bottom { bottom: 0; height: 18.75%; }
.practice-portrait-safe-area { position: absolute; top: 8.333%; left: 5.926%; width: 75.556%; height: 72.917%; border: 2px dashed var(--status-success-border); }
.practice-portrait-subtitle-zone { position: absolute; top: 73.958%; left: 5.926%; width: 75.556%; height: 7.292%; display: grid; place-items: center; border: 2px solid var(--status-info-border); color: var(--status-info-text); background: color-mix(in srgb, var(--status-info-bg) 52%, transparent); font-size: 12px; font-weight: 800; }
.practice-portrait-annotation-layer [data-portrait-annotation-box] {
  position: absolute;
  top: var(--portrait-annotation-y, 0);
  left: var(--portrait-annotation-x, 0);
  width: var(--portrait-annotation-width, 0);
  height: var(--portrait-annotation-height, 0);
  border: 3px solid var(--app-warm);
  border-radius: 10px;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--app-warm) 22%, transparent);
}
.practice-portrait-annotation-layer [data-portrait-annotation-label] {
  position: absolute;
  top: var(--portrait-annotation-label-y, 0);
  left: var(--portrait-annotation-label-x, 0);
  max-width: 70%;
  padding: 8px 12px;
  border: 1px solid var(--app-warm);
  border-radius: 7px;
  color: var(--app-text);
  background: var(--app-panel);
  box-shadow: 0 8px 24px var(--app-shadow);
  font-size: 14px;
}

html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio[data-portrait-capture-clean="true"] .practice-portrait-teaching-director { display: none !important; }
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio[data-portrait-capture-clean="true"] .practice-workspace { height: 100%; }
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio[data-portrait-capture-clean="true"] .practice-pitch-tools { display: none; }
html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio[data-portrait-capture-clean="true"] :is(.practice-lyrics, .practice-runway) { transition: none; }

@media (prefers-reduced-motion: reduce) {
  html[data-layout-mode="portrait-native"][data-recording-profile="teaching"] #practiceStudio :is(.practice-lyrics, .practice-runway) { transition: none; }
}


/* Single-lyric role styles are shared by songs and responsive layouts. */
#practiceStudio .practice-lyrics[data-display-mode="single"] [data-lyric-current-copy],
#practiceStudio .practice-entry-cue-lyric-fallback[data-single-lyrics="true"][data-view-mode="characters"] > [data-beat-lyric-row="current"] {
  --practice-lyric-primary-upcoming-user: var(--practice-single-current-upcoming, var(--app-text));
  --practice-lyric-primary-current-user: var(--practice-single-current-current, var(--app-text));
  --practice-lyric-primary-played-user: var(--practice-single-current-played, var(--app-text));
  font-size: var(--practice-single-current-size);
  font-family: var(--practice-single-current-font);
  font-variation-settings: var(--practice-single-current-variation);
  font-weight: 500;
  opacity: 1;
  white-space: nowrap;
  color: var(--practice-lyric-primary-upcoming-user);
}
#practiceStudio .practice-lyrics[data-display-mode="single"] [data-lyric-current-copy] :is(.practice-lyric-char, .practice-lyric-glyph),
#practiceStudio .practice-entry-cue-lyric-fallback[data-single-lyrics="true"] [data-beat-lyric-row="current"] .practice-beat-lyric-char { font-family: inherit; font-variation-settings: inherit; }
#practiceStudio .practice-lyrics[data-display-mode="single"] [data-lyric-next-copy],
#practiceStudio .practice-entry-cue-lyric-fallback[data-single-lyrics="true"][data-view-mode="characters"] > [data-beat-lyric-row="next"] {
  --practice-lyric-primary-upcoming-user: var(--practice-single-next-upcoming, var(--app-text));
  --practice-lyric-primary-current-user: var(--practice-single-next-upcoming, var(--app-text));
  --practice-lyric-primary-played-user: var(--practice-single-next-upcoming, var(--app-text));
  font-size: var(--practice-single-next-size);
  font-family: var(--practice-single-next-font);
  font-variation-settings: var(--practice-single-next-variation);
  font-weight: 500;
  opacity: 1;
  white-space: nowrap;
  color: var(--practice-lyric-primary-upcoming-user);
}
#practiceStudio .practice-lyrics[data-display-mode="single"] [data-lyric-next-copy] :is(.practice-lyric-char, .practice-lyric-glyph),
#practiceStudio .practice-entry-cue-lyric-fallback[data-single-lyrics="true"] [data-beat-lyric-row="next"] .practice-beat-lyric-char { font-family: inherit; font-variation-settings: inherit; }
#practiceStudio .practice-lyrics[data-display-mode="single"] [data-lyric-previous-copy],
#practiceStudio .practice-entry-cue-lyric-fallback[data-single-lyrics="true"][data-view-mode="characters"] > [data-beat-lyric-row="previous"] {
  --practice-lyric-primary-upcoming-user: var(--practice-single-previous-played, var(--app-text));
  --practice-lyric-primary-current-user: var(--practice-single-previous-played, var(--app-text));
  --practice-lyric-primary-played-user: var(--practice-single-previous-played, var(--app-text));
  font-size: var(--practice-single-previous-size);
  font-family: var(--practice-single-previous-font);
  font-variation-settings: var(--practice-single-previous-variation);
  font-weight: 500;
  opacity: 1;
  white-space: nowrap;
  color: var(--practice-lyric-primary-played-user);
}
#practiceStudio .practice-lyrics[data-display-mode="single"] [data-lyric-previous-copy] :is(.practice-lyric-char, .practice-lyric-glyph),
#practiceStudio .practice-entry-cue-lyric-fallback[data-single-lyrics="true"] [data-beat-lyric-row="previous"] .practice-beat-lyric-char { font-family: inherit; font-variation-settings: inherit; }
#practiceStudio .practice-entry-cue-lyric-fallback[data-single-lyrics="true"][data-single-rows="2"] > [data-beat-lyric-row="previous"] { display: none; }
.practice-single-static-color { grid-column: span 3; }
.practice-single-rows { display: flex; align-items: center; gap: 12px; font-size: 12px; }
.practice-single-rows select { min-width: 0; flex: 1; font-size: 12px; }
.practice-single-settings { margin: 0 0 16px; }

.practice-lyric-reader-line.is-original { --practice-reader-role-color: var(--practice-reader-original-text, var(--app-text)); --practice-reader-role-background: var(--practice-reader-original-background, var(--app-panel)); }
.practice-lyric-reader-line.is-remix { --practice-reader-role-color: var(--practice-reader-remix-text, var(--app-text)); --practice-reader-role-background: var(--practice-reader-remix-background, var(--app-panel)); }
.practice-lyric-reader-line:is(.is-original, .is-remix) { background: var(--practice-reader-role-background); }
.practice-lyric-reader-color { font-size: 12px; gap: 4px; }
.practice-lyric-reader-line .practice-reader-char { font: inherit; color: inherit; }
/* Playback ink follows the selected presentation, not the version identity.
   Authored reader text/background remain the static/off presentation. */
[data-lyric-reader][data-mode="single"] .practice-lyric-reader-line {
  --reader-upcoming-color: var(--practice-single-current-upcoming, var(--app-text));
  --reader-singing-color: var(--practice-single-current-current, var(--app-accent));
  --reader-played-color: var(--practice-single-current-played, var(--app-muted));
}
[data-lyric-reader][data-mode="single"] .practice-lyric-reader-line[data-play-state="future"] {
  --reader-upcoming-color: var(--practice-single-next-upcoming, var(--app-text));
}
[data-lyric-reader][data-mode="single"] .practice-lyric-reader-line[data-play-state="past"] {
  --reader-played-color: var(--practice-single-previous-played, var(--app-muted));
}
[data-lyric-reader][data-mode="dual"] .practice-lyric-reader-pair > div > .practice-lyric-reader-line:first-child {
  --reader-upcoming-color: var(--practice-lyric-original-upcoming-user, var(--app-text));
  --reader-singing-color: var(--practice-lyric-original-current-user, var(--app-accent));
  --reader-played-color: var(--practice-lyric-original-played-user, var(--app-muted));
}
[data-lyric-reader][data-mode="dual"] .practice-lyric-reader-pair > div > .practice-lyric-reader-line:last-child {
  --reader-upcoming-color: var(--practice-lyric-remix-upcoming-user, var(--app-text));
  --reader-singing-color: var(--practice-lyric-remix-current-user, var(--app-accent));
  --reader-played-color: var(--practice-lyric-remix-played-user, var(--app-muted));
}
.practice-lyric-reader-line:not([data-play-mode="off"]) .practice-reader-char[data-play-state="future"] { color: var(--reader-upcoming-color); }
.practice-lyric-reader-line[data-play-state="current"] { border-color: var(--reader-singing-color); }
.practice-lyric-reader-line .practice-reader-char[data-play-state="current"] { color: var(--reader-singing-color); text-shadow: var(--practice-lyric-active-glow); }
.practice-lyric-reader-line .practice-reader-char[data-play-state="past"] { color: var(--reader-played-color); }
.practice-lyric-reader-line[data-play-mode="progress"] .practice-reader-char {
  --char-attack: clamp(0%, calc(var(--char-fill, 0%) * 5), 100%);
  --char-release: clamp(0%, calc((var(--char-fill, 0%) - 80%) * 5), 100%);
  --reader-active-mix: color-mix(in srgb, var(--reader-upcoming-color) calc(100% - var(--char-attack)), var(--reader-singing-color) var(--char-attack));
  color: color-mix(in srgb, var(--reader-active-mix) calc(100% - var(--char-release)), var(--reader-played-color) var(--char-release));
}

/* One transport row in both workspaces; review actions live in the draggable menu. */
html body #practiceStudio .practice-stage > .practice-transport {
  display: flex;
  flex-wrap: nowrap;
  min-height: 52px;
  gap: 6px;
  padding: 6px 8px;
  overflow: visible;
}
html body #practiceStudio .practice-transport-group {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  padding-right: 4px;
}
html body #practiceStudio .practice-transport-review { display: block; }
html body #practiceStudio:not([data-has-latest-recording="true"]) .practice-transport-review,
html body #practiceStudio:is([data-transport-state="recording"], [data-transport-state="recording-paused"], [data-transport-state="practice-preview"], [data-transport-state="finishing"], [data-transport-state="starting-practice"]) .practice-transport-review { display: none; }
html body #practiceStudio .practice-transport-status { display: none; }
html body #practiceStudio .practice-transport :is(button, summary, strong) { font-size: 12px; }
html body #practiceStudio .practice-transport .practice-queue-menu > summary { min-width: 72px; }
html body #practiceStudio .practice-transport .practice-queue-menu > summary small { display: none; }
html[data-layout-mode^="portrait"] body #practiceStudio .practice-stage > .practice-transport { margin-inline: 0; }
html[data-layout-mode^="portrait"] body #practiceStudio .practice-transport :is(.practice-play, .practice-stop, .practice-start, .practice-original-monitor, .practice-queue-menu, .practice-queue-menu > summary) { width: auto; min-width: 48px; }
html[data-layout-mode^="portrait"] body #practiceStudio details.practice-transport-review { min-width: 52px; }
@container practice-stage (max-width: 800px) {
  html body #practiceStudio .practice-transport { gap: 4px; padding-inline: 4px; }
  html body #practiceStudio .practice-transport-playback { gap: 4px; }
  html body #practiceStudio .practice-transport :is(.practice-play, .practice-stop, .practice-start) { width: auto; min-width: 48px; padding-inline: 8px; }
  html body #practiceStudio .practice-transport .practice-original-monitor { padding-inline: 8px; }
  html body #practiceStudio .practice-transport :is(.practice-transport-labeled, .practice-transport-icon-button) { width: 32px; min-width: 32px; flex-basis: 32px; }
}