/* The explicit saved design is an independent visual alternative. All player
   overrides are scoped so the retained design remains available unchanged. */
.intro-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.summary-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px}
body[data-run-complete="true"] .typing-bar{display:none}
@font-face {
  font-family:'Frank Ruhl Libre';
  src:url('/assets/design/frank-ruhl-libre-variable.ttf') format('truetype');
  font-weight:300 900;
  font-style:normal;
  font-display:swap;
}

/* New navigation and result elements also work in the retained visual layout. */
.skip-link {position:fixed;top:10px;left:12px;z-index:20;padding:10px 15px;border-radius:6px;background:#fff;color:#182331;font-size:13px;transform:translateY(-180%)}
.skip-link:focus {transform:translateY(0)}
.wordmark {display:inline-block;margin-bottom:9px;color:inherit;text-decoration:none;font:800 15px/1 Arial,"Segoe UI",sans-serif;letter-spacing:-.8px}
.wordmark span {font-weight:400}
#phrase-guide {margin:0 auto 14px;max-width:560px;padding:0 20px;text-align:center;color:var(--muted);font-size:12px;line-height:1.6}
#run-summary {width:min(650px,calc(100% - 32px));margin:20px auto;padding:24px;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:14px;text-align:center}
#run-summary h2 {font-size:25px;line-height:1.3;margin:8px 0 16px}
#run-summary .eyebrow {font-size:11px;letter-spacing:.12em;color:var(--muted)}
#run-summary dl {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:20px 0}
#run-summary dt {font-size:12px;line-height:1.4;color:var(--muted)}
#run-summary dd {margin:6px 0 0;font-size:24px;font-weight:700;font-variant-numeric:tabular-nums}
#run-summary p {font-size:13px;line-height:1.6}
body[data-run-complete="true"] #stage {display:none}
body[data-run-complete="true"] .performance,
body[data-design="saved"][data-run-complete="true"] .performance,
body[data-design="saved"][data-layout="unified"][data-run-complete="true"] .performance {min-height:0;justify-content:center}

body[data-design="saved"] {
  --ink:var(--text);
  --line:color-mix(in srgb,var(--accent) 19%,var(--surface));
  --control-ink:#344664;
  --muted-readable:#596986;
  --beat-envelope:0;
  color:var(--text);
  background:var(--background);
  font-family:Arial,"Segoe UI",sans-serif;
  isolation:isolate;
}
body[data-design="saved"] .band-backdrop {
  background:var(--background) url('/assets/design/manga-band.png') var(--art-x) var(--art-y)/cover no-repeat;
  opacity:var(--art-opacity);
  transform:scale(var(--art-scale));
}
body[data-design="saved"] .band-backdrop:after {
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--background) 90%,transparent),color-mix(in srgb,var(--background) 30%,transparent) 38%,color-mix(in srgb,var(--background) 45%,transparent) 70%,color-mix(in srgb,var(--background) 90%,transparent)),color-mix(in srgb,var(--background) calc(var(--art-dim) * 100%),transparent);
}
body[data-design="saved"] .band-backdrop>img {opacity:0}
body[data-design="saved"] .band-backdrop>video {opacity:.75}
body[data-design="saved"] main,
body[data-design="saved"][data-layout="unified"] main {
  max-width:1120px;min-height:var(--view-height);height:auto;padding:26px 40px 22px;gap:18px;
}
body[data-design="saved"] header {
  position:relative;justify-content:center;min-height:58px;text-align:center;gap:16px;
}
body[data-design="saved"] header h1,
body[data-design="saved"][data-layout="unified"] header h1 {
  font:700 32px/1.15 var(--design-font);letter-spacing:0;text-align:center;color:var(--text);
}
body[data-design="saved"] header p,
body[data-design="saved"][data-layout="unified"] header p {
  color:var(--muted-readable);font-size:12px;letter-spacing:.06em;margin-top:7px;
}
body[data-design="saved"] .wordmark {font-size:15px;color:var(--control-ink);letter-spacing:-.8px;margin-bottom:11px}
body[data-design="saved"] #options-open {position:absolute;right:0;top:7px}
body[data-design="saved"] .text-button,
body[data-design="saved"][data-layout="unified"] #reference,
body[data-design="saved"][data-layout="unified"] #replay {
  color:var(--control-ink);font-size:12px;line-height:1.4;
}
body[data-design="saved"] .text-button:hover {color:var(--accent)}
body[data-design="saved"] .button,
body[data-design="saved"][data-layout="unified"] .button {
  min-height:42px;border-radius:99px;padding:10px 19px;font-size:13px;border-color:var(--line);background:var(--surface);color:var(--text);
}
body[data-design="saved"] .button.primary,
body[data-design="saved"][data-layout="unified"] .button.primary {
  background:var(--accent);border-color:var(--accent);color:white;box-shadow:0 5px 17px color-mix(in srgb,var(--accent) 15%,transparent);
}
body[data-design="saved"] :is(button,input,select,a,[tabindex]):focus-visible {
  outline:3px solid var(--accent);outline-offset:4px;
}
body[data-design="saved"] .performance,
body[data-design="saved"][data-layout="unified"] .performance {
  flex:1 0 auto;min-height:570px;max-height:none;overflow:visible;margin:0;border:0;border-radius:24px;background:transparent;box-shadow:none;
}
body[data-design="saved"] .stage {overflow:visible;flex:1 0 auto;min-height:430px}
body[data-design="saved"] .stage-top,
body[data-design="saved"][data-layout="unified"] .stage-top {
  order:0;padding:10px 18px 16px;font-size:12px;letter-spacing:.02em;color:var(--muted-readable);
}
body[data-design="saved"] #mode-indicator,
body[data-design="saved"][data-layout="unified"] #mode-indicator {
  font-size:12px;letter-spacing:0;max-width:48%;text-align:right;
}
body[data-design="saved"][data-layout="unified"] #mode-indicator:after {content:none}
body[data-design="saved"] .stage-top>span:first-child:before {background:var(--secondary);width:7px;height:7px}
body[data-design="saved"] .stage[data-state="playing"] .stage-top>span:first-child:before {background:var(--correct)}
body[data-design="saved"] .challenge-hud,
body[data-design="saved"][data-layout="unified"] .challenge-hud {
  order:1;display:flex;justify-content:center;flex-wrap:wrap;align-items:center;gap:16px 26px;min-height:58px;padding:0 20px 20px;font-size:12px;color:var(--muted-readable);
}
body[data-design="saved"] .challenge-hud>span:not(#judgment) {display:flex;align-items:baseline;gap:5px}
body[data-design="saved"] .challenge-hud b {font-size:21px;font-weight:700;letter-spacing:-.7px;color:var(--text)}
body[data-design="saved"] #judgment,
body[data-design="saved"][data-layout="unified"] #judgment {
  --state-color:var(--accent);display:grid;grid-template-columns:auto auto;align-items:center;column-gap:7px;
  width:max-content;max-width:100%;margin-left:14px;padding:6px 13px;min-height:36px;
  border:2px solid var(--state-color);border-radius:4px;transform:rotate(-3deg);
  color:var(--state-color);background:var(--surface);box-shadow:3px 3px 0 color-mix(in srgb,var(--state-color) 18%,transparent);
  white-space:normal;text-overflow:clip;overflow:visible;text-align:left;font-size:13px;
}
body[data-design="saved"] #judgment[data-grade="correct"] {--state-color:var(--correct)}
body[data-design="saved"] #judgment[data-grade="error"],body[data-design="saved"] #judgment[data-grade="wrong"] {--state-color:var(--error)}
body[data-design="saved"] #judgment[data-grade="early"] {--state-color:var(--early)}
body[data-design="saved"] #judgment[data-grade="miss"] {--state-color:var(--miss)}
body[data-design="saved"] #judgment[data-grade="sustain"] {--state-color:var(--sustain)}
body[data-design="saved"] .feedback-symbol {grid-row:1 / 3;font-size:23px;line-height:1;opacity:calc(.4 + var(--feedback-intensity) * .6);min-width:23px;text-align:center}
body[data-design="saved"] .feedback-label {font-size:13px;font-weight:700;line-height:1.3;color:var(--text)}
body[data-design="saved"] .feedback-detail {font-size:12px;font-weight:400;line-height:1.3;color:var(--control-ink)}
body[data-design="saved"] .feedback-detail:empty {display:none}
body[data-design="saved"] .lyric-surface,
body[data-design="saved"][data-layout="unified"] .lyric-surface {
  order:2;display:flex;flex:1 0 auto;flex-direction:column;justify-content:center;position:relative;min-height:250px;margin:7px 14px 18px;padding:28px 28px 18px;
  background:color-mix(in srgb,var(--surface) 89%,transparent);backdrop-filter:blur(14px);
  border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);border-radius:var(--radius);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--surface) 70%,transparent),0 0 0 6px color-mix(in srgb,var(--accent) 28%,transparent),0 16px 50px color-mix(in srgb,var(--text) 6%,transparent);
}
body[data-design="saved"] .lyric-surface:focus-within,
body[data-design="saved"][data-layout="unified"] .lyric-surface:focus-within {
  box-shadow:0 0 0 5px color-mix(in srgb,var(--surface) 70%,transparent),0 0 0 7px color-mix(in srgb,var(--accent) 48%,transparent),0 16px 50px color-mix(in srgb,var(--text) 6%,transparent);
}
body[data-design="saved"] .lyric-area,
body[data-design="saved"][data-layout="unified"] .lyric-area {
  flex:1 0 auto;display:flex;align-items:center;padding:0 8px 12px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent;scroll-padding:16px;
}
body[data-design="saved"] .lyrics,
body[data-design="saved"][data-layout="unified"] .lyrics {
  max-width:800px;width:100%;margin:auto;font-family:var(--design-font);font-size:var(--lyric-size);font-weight:var(--lyric-weight);letter-spacing:var(--letter-spacing);line-height:var(--line-height);color:var(--text);text-align:center;unicode-bidi:isolate;
}
body[data-design="saved"] .lyric-line {min-height:1.3em;transition:color .15s;unicode-bidi:isolate;overflow-wrap:anywhere}
body[data-design="saved"] .lyric-word {margin-inline:4px}
body[data-design="saved"] #phrase-guide {color:var(--control-ink);font-size:13px;line-height:1.6;margin-bottom:14px}
body[data-design="saved"] .letter {display:inline-block;white-space:pre;position:relative;border-radius:5px}
body[data-design="saved"] .letter.typed {color:var(--correct)}
body[data-design="saved"] .letter.next,
body[data-design="saved"][data-layout="unified"] .letter.next {
  color:var(--accent);background:color-mix(in srgb,var(--accent) 13%,transparent);box-shadow:0 3px 0 var(--accent);border-radius:5px;
}
body[data-design="saved"] .letter.missed,
body[data-design="saved"][data-layout="unified"] .letter.missed {
  color:var(--miss);text-decoration:line-through;text-decoration-thickness:1.5px;
}
body[data-design="saved"] .lyric-word.singing,
body[data-design="saved"][data-layout="unified"] .lyric-word.singing {
  background:linear-gradient(to left,color-mix(in srgb,var(--accent) 10%,transparent) var(--sung,0%),transparent 0);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:8px;text-decoration-thickness:2px;
}
body[data-design="saved"] .lyric-word.sustaining {box-shadow:0 3px 0 var(--sustain)}
body[data-design="saved"] .mistyped,
body[data-design="saved"][data-layout="unified"] .mistyped {
  color:var(--error);background:color-mix(in srgb,var(--error) 10%,transparent);border-radius:3px;text-decoration:line-through;text-decoration-thickness:2px;font-size:.75em;
}
body[data-design="saved"][data-view="focus"] .lyric-line:not(.current-line):not(.previous-line):not(.next-line) {display:none}
body[data-design="saved"][data-view="focus"] .lyric-line.previous-line {font-size:24px;font-weight:500;color:var(--muted-readable);opacity:.75;margin-bottom:5px}
body[data-design="saved"][data-view="focus"] .lyric-line.next-line {font-size:28px;font-weight:500;color:var(--muted-readable);margin-top:5px}
body[data-design="saved"][data-view="focus"] .lyric-line.current-line {font-size:var(--lyric-size);color:var(--text)}
body[data-design="saved"][data-view="full"] .lyric-area {height:300px;max-height:45vh;flex:0 1 auto;display:block}
body[data-design="saved"][data-view="full"] .lyric-line {font-size:32px;color:var(--muted-readable)}
body[data-design="saved"][data-view="full"] .lyric-line.current-line {font-size:var(--lyric-size);color:var(--text)}
body[data-design="saved"] .keyboard-inline,
body[data-design="saved"][data-layout="unified"] .keyboard-inline {
  position:static;inset:auto;z-index:2;width:min(410px,85%);margin:12px auto 0;padding:0;background:none;
}
body[data-design="saved"] #typing-input,
body[data-design="saved"][data-layout="unified"] #typing-input {
  min-height:42px;height:42px;padding:7px 17px;border:1px solid color-mix(in srgb,var(--accent) 25%,transparent)!important;border-radius:99px;
  background:color-mix(in srgb,var(--surface) 65%,transparent);font-family:var(--design-font);font-size:22px;color:var(--text);text-align:center;caret-color:var(--accent);box-shadow:inset 0 1px 2px color-mix(in srgb,var(--text) 3%,transparent);outline:none;
}
body[data-design="saved"] #typing-input:focus {border-color:var(--accent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent)}
body[data-design="saved"] #typing-input::placeholder,
body[data-design="saved"][data-layout="unified"] #typing-input::placeholder {font:12px Arial,"Segoe UI",sans-serif;color:var(--muted-readable);text-align:center}
body[data-design="saved"] #note-highway,
body[data-design="saved"][data-layout="unified"] #note-highway {
  order:3;display:block!important;flex:0 0 auto;height:63px;margin:1px 40px 16px;border:0;border-bottom:1px solid color-mix(in srgb,var(--text) 20%,transparent);background:transparent;overflow:hidden;
}
body[data-design="saved"] #note-highway[hidden],
body[data-design="saved"][data-layout="unified"] #note-highway[hidden] {display:none!important}
body[data-design="saved"] .hit-line {height:34px;top:17px;bottom:auto;background:var(--accent);width:2px}
body[data-design="saved"] .hit-label {top:1px;font-size:12px;background:var(--surface);color:var(--control-ink);border-radius:99px;padding:0 6px}
body[data-design="saved"] .rhythm-phrase {top:26px;font:500 24px/1.2 var(--design-font);color:var(--muted-readable);padding:1px 9px 7px;border-radius:99px}
body[data-design="saved"] .rhythm-phrase.active {background:var(--accent);color:var(--surface)}
body[data-design="saved"] .rhythm-glyph.hit {color:var(--correct)}
body[data-design="saved"] .rhythm-phrase.active .rhythm-glyph.hit {color:var(--surface);opacity:.65}
body[data-design="saved"] .rhythm-glyph.due {color:var(--text);background:color-mix(in srgb,var(--surface) 85%,transparent);border-radius:3px}
body[data-design="saved"] .rhythm-glyph.missed {color:var(--miss)}
body[data-design="saved"] .rhythm-sustain {background:linear-gradient(to left,var(--secondary) calc(var(--sustain,0)*100%),color-mix(in srgb,var(--accent) 18%,transparent) 0)}
body[data-design="saved"] .rhythm-note {font:500 24px var(--design-font);color:var(--muted-readable)}
body[data-design="saved"] .rhythm-note.due {background:var(--accent);color:white}
body[data-design="saved"] .rhythm-note.hit {color:var(--correct)}
body[data-design="saved"] .rhythm-note.missed {color:var(--miss)}
body[data-design="saved"] .stage-bottom,
body[data-design="saved"][data-layout="unified"] .stage-bottom {order:4;padding:7px 26px 14px;color:var(--muted-readable);font-size:12px;line-height:1.5}
body[data-design="saved"] .progress,
body[data-design="saved"][data-layout="unified"] .progress {order:5;position:relative;height:3px;background:color-mix(in srgb,var(--accent) 12%,transparent);border-radius:99px;overflow:hidden}
body[data-design="saved"] #audio-progress {height:3px;background:var(--secondary)}
body[data-design="saved"] #type-progress {height:2px;background:var(--accent)}
body[data-design="saved"] .typing-bar,
body[data-design="saved"][data-layout="unified"] .typing-bar {border:0;background:transparent;padding:18px 24px 5px}
body[data-design="saved"] .play-actions {justify-content:center;gap:14px 25px}
body[data-design="saved"] .play-actions #reference {margin-left:0}
body[data-design="saved"] #typing-status,
body[data-design="saved"][data-layout="unified"] #typing-status {font-size:12px;color:var(--control-ink);text-align:center;line-height:1.6;margin-top:14px;white-space:normal;overflow:visible}
body[data-design="saved"] .small {font-size:12px;color:var(--muted-readable)}
body[data-design="saved"] .overlay,
body[data-design="saved"][data-layout="unified"] .overlay {border-radius:22px;gap:16px;background:color-mix(in srgb,var(--surface) 97%,transparent);min-height:360px;box-shadow:0 12px 60px color-mix(in srgb,var(--text) 8%,transparent)}
body[data-design="saved"] .overlay h2,
body[data-design="saved"][data-layout="unified"] .overlay h2 {font:700 32px/1.25 var(--design-font);letter-spacing:0;color:var(--text)}
body[data-design="saved"] .overlay p,
body[data-design="saved"][data-layout="unified"] .overlay p {font-size:14px;line-height:1.7;max-width:470px;color:var(--control-ink)}
body[data-design="saved"] .overlay .small {font-size:12px;color:var(--muted-readable)}
body[data-design="saved"] .ghost span {border-radius:7px;background:var(--surface);color:var(--accent);border-color:var(--line);font-family:var(--design-font)}
body[data-design="saved"] .count-in,
body[data-design="saved"][data-layout="unified"] .count-in {top:auto;bottom:14px;left:20%;right:20%;border:1px solid var(--line);border-radius:99px;background:var(--surface);font-size:13px;padding:8px 15px;gap:15px;color:var(--control-ink);box-shadow:0 5px 25px color-mix(in srgb,var(--text) 7%,transparent)}
body[data-design="saved"] .count-in strong {font-size:38px;color:var(--accent)}
body[data-design="saved"] .intro-guide {border-radius:var(--radius);background:color-mix(in srgb,var(--surface) 96%,transparent);color:var(--control-ink);font-size:17px;padding:30px 60px}
body[data-design="saved"] dialog {background:var(--surface);color:var(--text);border-color:var(--line);border-radius:20px;padding:24px;box-shadow:0 24px 100px color-mix(in srgb,var(--text) 22%,transparent)}
body[data-design="saved"] dialog::backdrop {background:color-mix(in srgb,var(--text) 30%,transparent);backdrop-filter:blur(4px)}
body[data-design="saved"] .options-heading {background:var(--surface);top:-24px}
body[data-design="saved"] select {background:white;color:var(--text);border-color:var(--line);font-size:13px}
body[data-design="saved"] .song-progress {display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px;color:var(--control-ink);font-size:12px}
body[data-design="saved"] .session-nav {display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 12px;color:var(--control-ink);font-size:12px;flex:0 0 auto}
body[data-design="saved"] .session-nav button {font-size:12px;line-height:1.4;min-height:38px;padding:8px 17px;border:1px solid var(--line);border-radius:99px;background:color-mix(in srgb,var(--surface) 75%,transparent);color:var(--control-ink)}
body[data-design="saved"] .session-nav button[aria-pressed="true"] {background:var(--accent);border-color:var(--accent);color:white}
body[data-design="saved"] .session-nav #session-label {padding-left:7px}
body[data-design="saved"] .levels {margin:0 10px}
body[data-design="saved"][data-layout="unified"] .levels {display:grid!important}
body[data-design="saved"] .levels[hidden],body[data-design="saved"][data-layout="unified"] .levels[hidden] {display:none!important}
body[data-design="saved"] .levels button {background:color-mix(in srgb,var(--surface) 88%,transparent);border-color:var(--line);border-radius:18px;padding:13px 15px;font-size:13px;color:var(--text)}
body[data-design="saved"] .levels button[aria-pressed="true"] {border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
body[data-design="saved"] .levels b {background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--accent)}
body[data-design="saved"] .levels small {font-size:12px;color:var(--muted-readable);line-height:1.4}
body[data-design="saved"] #mode-label,
body[data-design="saved"] #session-label {display:inline-flex;align-items:center;gap:8px;font-size:12px;line-height:1.5;color:var(--control-ink)}
body[data-design="saved"] #run-summary {margin:14px auto 0;padding:22px 28px;width:min(650px,100%);background:var(--surface);border:1px solid var(--line);border-radius:22px;color:var(--text);text-align:center}
body[data-design="saved"] #run-summary h2 {margin:0 0 12px;font:700 28px/1.2 var(--design-font)}
body[data-design="saved"] #run-summary p {font-size:13px;line-height:1.6;color:var(--control-ink)}
body[data-design="saved"] #run-summary .summary-stats {display:flex;justify-content:center;flex-wrap:wrap;gap:12px 25px;font-size:13px}
body[data-design="saved"] #run-summary .summary-stats b {font-size:24px;color:var(--accent);display:block}
body[data-design="saved"] #run-summary dl {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin:20px auto;max-width:530px}
body[data-design="saved"] #run-summary dl>div {display:flex;flex-direction:column;gap:6px}
body[data-design="saved"] #run-summary dt {font-size:12px;color:var(--muted-readable)}
body[data-design="saved"] #run-summary dd {margin:0;font-size:26px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
body[data-design="saved"][data-run-complete="true"] #run-summary {margin:0 auto 12px}
body[data-design="saved"][data-design-hud="false"] #challenge-hud,
body[data-design="saved"][data-design-lane="false"] #note-highway,
body[data-design="saved"][data-design-guide="false"] .input-label {display:none!important}
body[data-design="saved"][data-design-context="false"] :is(.previous-line,.next-line) {display:none}

/* A live envelope from the source-clock beat drives pulse emphasis. No free
   running animation pretends to represent a performance or a song clock. */
body[data-design="saved"][data-design-motion="pulse"] .letter.next {filter:brightness(calc(1 + var(--beat-envelope) * .13))}
body[data-design="saved"][data-design-motion="pulse"] .rhythm-phrase.active {box-shadow:0 0 calc(var(--beat-envelope) * 18px) color-mix(in srgb,var(--accent) 25%,transparent)}
body[data-design="saved"][data-design-reduced-motion="true"] .letter.next,
body[data-design="saved"][data-design-reduced-motion="true"] .rhythm-phrase.active {filter:none;box-shadow:none}
@media(prefers-reduced-motion:reduce) {
  body[data-design="saved"] .letter.next {filter:none!important}
  body[data-design="saved"] .rhythm-phrase.active {box-shadow:none!important}
  body[data-design="saved"] * {transition:none!important;animation:none!important}
}
/* Compact desktop windows retain the same information, with normal document
   scrolling when a shorter window cannot hold the entire playing surface. */
@media(min-width:720px) and (max-width:1000px) {
  body[data-design="saved"] main,body[data-design="saved"][data-layout="unified"] main {padding:22px 26px;gap:13px}
  body[data-design="saved"] .lyric-surface,body[data-design="saved"][data-layout="unified"] .lyric-surface {margin-inline:10px;padding-inline:23px}
  body[data-design="saved"] #judgment {margin-left:0}
  body[data-design="saved"] #note-highway,body[data-design="saved"][data-layout="unified"] #note-highway {margin-inline:30px}
}