/* A quiet, phone-first player. Amber keys and violet dusk echo the book cover. */
.piano-page {
  --color-paper: #faf4eb;
  --color-surface: #fffdf8;
  --color-ink: #302741;
  --color-muted: #65566c;
  --color-line: #dbcddd;
  --color-accent: #ffcc7d;
  --color-focus: #674692;
  --piano-dusk: #37284a;
  --piano-key: #f0e4f3;
  --piano-shadow: #43294a13;
  color-scheme: light;
  min-height: 100vh;
  font-family: system-ui, sans-serif;
  background: radial-gradient(ellipse at top, #f4e3f4, transparent 36rem), var(--color-paper);
}
@media (prefers-color-scheme: dark) {
  .piano-page {
    --color-paper: #211b2b;
    --color-surface: #30263d;
    --color-ink: #fff3e6;
    --color-muted: #d9c5dd;
    --color-line: #665270;
    --color-focus: #ffcc7d;
    --piano-key: #483553;
    --piano-shadow: #160d2280;
    color-scheme: dark;
    background: radial-gradient(ellipse at top, #3c2948, transparent 36rem), var(--color-paper);
  }
}
.piano-wrap { width: min(1024px, calc(100% - 40px)); margin-inline: auto; }
.piano-header { background: var(--piano-dusk); color: #fff3e6; }
.piano-header .piano-wrap { min-height: 66px; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.piano-brand, .piano-index-link { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.piano-brand { gap: 9px; font-size: clamp(13px, 3.5vw, 17px); font-weight: 750; line-height: 1.25; }
.piano-mark { width: 36px; height: 33px; flex: none; }
.piano-index-link { padding-inline: 4px; flex: none; color: #ffda9c; font-size: 13px; font-weight: 700; }
.piano-header a:focus-visible { outline-color: #ffcc7d; }
.piano-header a:hover, .piano-unit-card h2 a:hover { text-decoration: underline; }
.piano-piece { width: min(640px, calc(100% - 32px)); padding-block: clamp(18px, 5vw, 54px) 42px; }
.piano-player-card, .piano-unit-card, .piano-next {
  border: 1px solid var(--color-line); border-radius: 18px; background: var(--color-surface);
}
.piano-player-card { padding: clamp(17px, 5vw, 36px); box-shadow: 0 7px 24px var(--piano-shadow); }
.piano-kicker { color: var(--color-muted); font-size: 13px; font-weight: 750; letter-spacing: .06em; }
.piano-page h1, .piano-page h2 { font-family: inherit; font-weight: 800; line-height: 1.12; }
.piano-page h1 { margin-top: 5px; font-size: clamp(30px, 6.5vw, 49px); letter-spacing: -.035em; }
.piano-page .playback { margin-top: 17px; }
.piano-page .play-main {
  height: 68px; gap: 12px; border-radius: 13px; background: var(--color-accent);
  color: var(--piano-dusk); font: 800 23px/1 system-ui, sans-serif;
}
.piano-page .progress-wrap { margin-top: 3px; }
.piano-page .progress-wrap input { accent-color: var(--color-focus); }
.piano-page .time-labels, .piano-page .player-status { font-family: system-ui, sans-serif; }
.piano-page .practice-controls { gap: 8px; margin-top: 10px; }
.piano-page .practice-controls button {
  min-width: 0; flex: 1; border-radius: 11px; border-color: var(--color-line);
  font: 700 15px/1.3 system-ui, sans-serif;
}
.piano-page .practice-controls button:hover,
.piano-page .practice-controls button[aria-pressed="true"] { background: var(--piano-key); }
.piano-page .practice-controls button[aria-pressed="true"] { border-color: var(--color-focus); }
.piano-page .volume-control { --volume-accent: var(--color-focus); }
.piano-hear { margin-top: 19px; padding-top: 15px; border-top: 1px solid var(--color-line); }
.piano-hear h2 { font-size: 15px; margin-bottom: 5px; }
.piano-hear p { color: var(--color-muted); font-size: 15px; line-height: 1.5; }
.piano-piece-nav { margin-top: 12px; }
.piano-next {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  min-height: 54px; padding: 12px 17px; text-decoration: none;
  font-size: 13px; color: var(--color-muted);
}
.piano-next strong { display: block; font-size: 16px; color: var(--color-ink); line-height: 1.3; }
.piano-next small { display: block; font-size: 12px; }
.piano-next > span:last-child { font-size: 23px; color: var(--color-ink); }
.piano-next:hover, .piano-piece-list a:hover { background: var(--piano-key); }
.piano-unit-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
.piano-list-page { padding-block: clamp(20px, 5vw, 58px) 44px; }
.piano-intro {
  background: var(--piano-dusk); color: #fff3e6; border-radius: 18px;
  padding: clamp(19px, 5vw, 44px); margin-bottom: 16px;
}
.piano-intro .piano-kicker { color: #ffda9c; }
.piano-intro p:not(.piano-kicker) { margin-top: 9px; font-size: 16px; }
.piano-units { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.piano-unit-card { padding: 8px 14px; }
.piano-unit-card h2 { font-size: clamp(16px, 3vw, 20px); }
.piano-unit-card h2 a { display: flex; align-items: center; min-height: 44px; text-decoration: none; }
.piano-piece-list { list-style: none; padding: 0; margin: 0; }
.piano-piece-list li + li, .piano-unit-card h2 + .piano-piece-list { border-top: 1px solid var(--color-line); }
.piano-piece-list a {
  min-height: 48px; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center; gap: 9px; padding: 6px; border-radius: 7px;
  font-size: 15px; line-height: 1.35; font-weight: 650; text-decoration: none;
}
.piano-piece-number { display: grid; place-items: center; min-height: 26px; border-radius: 6px; background: var(--piano-key); }
.piano-piece-arrow { color: var(--color-muted); }
.piano-footer {
  border-top: 1px solid var(--color-line); display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px 16px; padding: 6px 0 18px; font-size: 12px; color: var(--color-muted);
}
.piano-footer a { display: inline-flex; min-height: 44px; align-items: center; }
@media (max-width: 650px) { .piano-units { grid-template-columns: minmax(0, 1fr); } }