/* Meadow: cream paper, sage ceramic, apricot accents. */
:root { --bg:#f6f5ef; --panel:#fffefa; --panel-2:#f0f2eb; --text:#343e36; --muted:#687365; --accent:#4d7059; --accent-soft:#e7eee2; --line:#dce1d6; --line-strong:#a7b4a1; }
html { color-scheme:light; background:var(--bg); }
body { background:radial-gradient(ellipse at 90% 0%,#e9eedd88,transparent 55%),var(--bg); }
.app { max-width:1000px; padding-top:30px; }
.studio-header { margin-bottom:0; }
.brand img { box-shadow:none; }
.session-goal,.eyebrow,.diagram-legend,.studio-footer { color:var(--muted); }
.session-goal i { background:#89a17e; box-shadow:none; }
.welcome { display:flex; align-items:center; justify-content:space-between; padding:28px 12px 26px; }
h1 { font-size:32px; line-height:1.4; letter-spacing:2px; font-weight:550; margin:10px 0 0; }
h1 span { color:#b47c58; }
.pick-art { width:100px; height:108px; margin-right:30px; display:grid; place-items:center; border-radius:48% 48% 48% 48% / 34% 34% 66% 66%; background:linear-gradient(140deg,#edf3e6,#bdd0ad); box-shadow:inset 2px 3px 3px #ffffffcc,inset -3px -3px 5px #859d7440,6px 12px 0 -4px #d6dec955,12px 18px 28px #50634615; transform:rotate(16deg); }
.pick-art span { font:54px Georgia,serif; color:#678064; transform:rotate(-16deg); text-shadow:0 1px #fff9; }
.card { border:1px solid #e1e5dc; background:#fffefa; box-shadow:0 8px 30px #47594305,inset 0 1px #fff; }
.stage { scroll-margin-top:16px; }
.controls { padding:10px; }
.control { background:#f3f4ee; border:0; }
.control:focus-within { background:#edf1e7; }
.bpm-control button,.stepper button { flex-basis:44px; width:44px; height:44px; padding:0; background:#fffefa; border:0; color:#4f6450; box-shadow:0 2px 2px #54624a0d,inset 0 1px #fff; }
.settings-reset { width:44px; min-height:44px; background:#f1f3eb; color:#5e735a; border:0; box-shadow:none; }
button:disabled:hover { background:#f1f3eb; box-shadow:none; }
.chord-diagram-card.current { background:linear-gradient(145deg,#edf3e6,#e0e9d7); border:1px solid #d0ddc5; box-shadow:inset 0 1px #fff,0 4px 0 #d1ddc8,0 12px 20px #4c644310; }
.chord-diagram-card.upcoming { background:linear-gradient(150deg,#faf0e7,#f3e7db); border:1px solid #eadbcd; box-shadow:inset 0 1px #fff,0 3px 0 #e7d8c8,0 10px 16px #78584008; }
.diagram-label { color:#5d7058; }
.diagram-label strong { color:#435e42; }
.chord-diagram-card.upcoming .diagram-label,.chord-diagram-card.upcoming .diagram-label strong,.chord-diagram-card.upcoming .chord-fingering { color:#806044; }
.chord-diagram .nut-line { stroke:#61705a; }
.chord-diagram .string-line,.chord-diagram .fret-line { stroke:#899781; }
.chord-diagram .finger-dot,.chord-diagram .barre { fill:#526e4c; }
.chord-diagram .finger-number { fill:#fffefa; }
.chord-diagram .open-mark,.chord-diagram .mute-mark,.chord-diagram .position-mark { fill:#64755c; }
.beat-cell { background:#f3f5ef; border:1px solid #e3e6dc; box-shadow:0 3px 0 #e4e8dd,inset 0 1px #fff; }
.beat-cell .beat-val { color:#53654d; }
.beat-cell.active { background:#dde9d3; border-color:#b8cca8; box-shadow:0 1px 0 #b8cca8,inset 0 1px #f6faef; }
.beat-cell.active .beat-val { color:#38562e; }
.beat { background:#e5e9de; }
.beat.on { background:#87a778; box-shadow:none; }
.player { background:#f5f7ef; border:1px solid #e1e5d9; box-shadow:inset 0 1px #fff; grid-template-columns:fit-content(42%) minmax(105px,1fr) auto; }
.player.is-running { border-color:#b6c8a8; box-shadow:0 4px 16px #55704809; }
.player.is-done { border-color:#9bb887; box-shadow:none; }
.player-time { display:flex; justify-content:center; align-items:baseline; gap:5px; }
.player-time strong { color:#465e3d; font-size:25px; letter-spacing:.3px; }
.time-goal { color:#6c7965; font-size:10px; white-space:nowrap; }
.player .player-play { border:1px solid #638154; color:#fffefa; background:linear-gradient(145deg,#7f9c6c,#617f53); box-shadow:inset 0 1px #c4d9b7,0 3px 0 #4d6741,0 6px 10px #4d674119; }
.player .player-play[aria-pressed=true] { background:linear-gradient(145deg,#6d8c5c,#58764b); box-shadow:inset 0 2px 4px #35462b20,0 1px 0 #4d6741; }
.player .ghost,.player-menu-button { background:#ebf0e4; color:#5c7351; border:0; box-shadow:none; }
.player-progress { background:#e1e8d9; }
.player-progress span { background:linear-gradient(90deg,#b2c69c,#779867); box-shadow:none; }
.player-menu:hover .player-menu-button,.player-menu:focus-within .player-menu-button { background:#dce6d2; color:#3f5c35; box-shadow:none; }
.studio-footer { align-items:start; }
.practice-help { max-width:580px; }
.practice-help summary { cursor:pointer; min-height:44px; display:flex; align-items:center; gap:8px; color:#5c7152; list-style:none; }
.practice-help summary::-webkit-details-marker { display:none; }
.practice-help summary::before { content:'+'; display:grid; place-items:center; border:1px solid #cbd5c3; border-radius:50%; width:18px; height:18px; font-size:14px; }
.practice-help[open] summary::before { content:'−'; }
.practice-help p { font-size:12px; line-height:1.9; margin:4px 0 12px; }
.keyboard-hint { padding-top:14px; white-space:nowrap; }
.completion { display:flex; align-items:center; gap:14px; padding:20px; margin-top:16px; background:#e9efdf; border-radius:20px; }
.completion-mark { width:36px; height:36px; flex-shrink:0; display:grid; place-items:center; background:#cfdcbe; border-radius:50%; color:#416036; }
.completion strong { font-size:14px; font-weight:600; }
.completion p { margin:5px 0 0; font-size:12px; line-height:1.7; color:#5b6f51; }
.feedback-toast { background:#fafff4f5; border:1px solid #d0ddc6; color:#48603d; box-shadow:0 6px 24px #37483015; }
@media (hover:hover) and (pointer:fine) {
  button:not(:disabled):hover { background:#e6eede; color:#3f5e33; box-shadow:0 3px 8px #4e664512; }
  .player .player-play:hover { background:linear-gradient(145deg,#89a674,#6c8b5e); color:white; box-shadow:inset 0 1px #c4d9b7,0 4px 0 #4d6741,0 8px 16px #4d674122; }
  .chord-diagram-card.current:hover { box-shadow:inset 0 1px #fff,0 6px 0 #d1ddc8,0 16px 24px #4c644312; }
}
.player button:not(:disabled):active,.settings-reset:not(:disabled):active,.bpm-control button:not(:disabled):active,.stepper button:not(:disabled):active,.player-menu:active .player-menu-button { box-shadow:inset 0 1px 3px #45613918; }
@media (max-width:760px) {
  .app { padding-top:20px; }
  .welcome { padding:20px 5px 22px; }
  h1 { font-size:25px; margin-top:6px; letter-spacing:1px; }
  .welcome .eyebrow { font-size:9px; }
  .pick-art { width:65px; height:72px; margin-right:12px; }
  .pick-art span { font-size:39px; }
  .controls { padding:8px; }
  .practice-row { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; position:relative; padding-top:25px; }
  .settings-reset { position:absolute; right:0; top:-9px; grid-column:auto; width:44px; height:44px; min-height:44px; background:transparent; }
  .practice-row::before { content:'练习设置'; position:absolute; left:8px; top:3px; color:var(--muted); font-size:11px; }
  .control { padding:6px 0; }
  .control-label { padding-left:9px; margin-bottom:2px; }
  .bpm-control,.stepper { gap:0; }
  .bpm-control button,.stepper button { flex:0 0 44px; width:44px; height:44px; background:transparent; box-shadow:none; }
  .bpm-value,.stepper-value { font-size:19px; }
  .bpm-value small { display:none; }
  .control:first-child .control-label::after { content:' · BPM'; font-size:9px; }
  .stage { padding:18px 12px; }
  .stage-heading { margin-bottom:14px; }
  .player { grid-template-columns:fit-content(56%) minmax(95px,1fr); background:#fbfcf6f5; border-color:#d9e2ce; box-shadow:0 -4px 24px #4b5f4010,inset 0 1px #fff; backdrop-filter:blur(20px); }
  .player-time strong { font-size:23px; }
  .studio-footer { justify-content:space-between; margin-top:12px; }
}
@media (max-width:350px) {
  .bpm-value,.stepper-value { font-size:17px; }
}
@media (prefers-reduced-motion:reduce) {
  .chord-diagram-card.current,.chord-diagram-card.upcoming,.beat-cell.active { transform:none !important; transition:none !important; }
}

/* Compact practice surface. Explicit icon boxes prevent inherited font metrics
   and native iOS button padding from moving glyphs off centre. */
.app { padding-top:20px; max-width:960px; }
button { -webkit-appearance:none; appearance:none; }
.icon { flex:none; width:20px; height:20px; margin:0; }
.bpm-control button,.stepper button,.settings-reset,
.player button,.player-menu-button { display:flex; align-items:center; justify-content:center; padding:0; line-height:1; }
.player-icon { display:flex; align-items:center; justify-content:center; width:24px; height:24px; flex:0 0 24px; line-height:0; }
.player-icon .icon { width:24px; height:24px; }
.player-icon .icon-fill { translate:1px 0; }
.player-menu-button { position:absolute; inset:0; width:100%; height:100%; }
.player-menu-select { margin:0; padding:0; border-radius:14px; }
.song-mark { width:18px; height:18px; }
.controls { border-radius:20px; box-shadow:0 3px 12px #56684e04; }
.stage { background:radial-gradient(ellipse at 10% 5%,#f7f9f1,transparent 55%),#fffefa; border-radius:26px; }
.stage-heading { margin-bottom:18px; }
.stage-heading .eyebrow { display:flex; align-items:center; gap:7px; }
.stage-heading .eyebrow::before { content:''; width:5px; height:5px; border-radius:50%; background:#88a474; }
.chord-diagram-card { position:relative; }
.chord-diagram-card.current { background:linear-gradient(135deg,#f0f5e9,#e2ebd8 65%,#dce6d1); box-shadow:inset 0 1px 0 #fff, inset 1px 0 0 #ffffff80,0 5px 0 #cedbc1,0 15px 25px #526a4210; }
.chord-diagram-card.current::before { content:''; position:absolute; inset:5px; border:1px solid #ffffff65; border-radius:18px; pointer-events:none; }
.chord-diagram-card.upcoming { background:linear-gradient(135deg,#fff5ec,#f2e6d9); box-shadow:inset 0 1px #fff,0 4px 0 #e8d9c9,0 12px 20px #8d6c4308; }
.chord-fingering { font-variant-numeric:tabular-nums; }
.beat-cell { position:relative; border-radius:16px; background:linear-gradient(#f8faf4,#edf1e7); box-shadow:inset 0 1px #fff,0 3px 0 #e1e7d8; }
.beat-cell.active { background:linear-gradient(#e5efdb,#d4e2c5); }
.beat-grid.is-playing .beat-cell.active .beat-val { animation:beat-touch 240ms cubic-bezier(.2,.8,.2,1); }
.player { border-radius:22px; background:linear-gradient(135deg,#f8faf2,#edf3e6); padding:14px 16px; overflow:hidden; }
.player-progress { bottom:0; border-radius:0 0 22px 22px; height:4px; }
.player .player-play { position:relative; width:56px; height:56px; min-height:56px; box-shadow:inset 0 2px 2px #c2d4b3,0 3px 0 #4b653d,0 6px 12px #3e573223; }
.player .player-play::after { content:''; position:absolute; inset:-5px; border:1px solid #6e8a5425; border-radius:50%; pointer-events:none; transition:border-color .25s; }
.player.is-running .player-play::after { border-color:#7b9a6255; }
.player .ghost,.player-menu-button { background:linear-gradient(#f6f9f0,#e5eddb); box-shadow:inset 0 1px #fff,0 2px 0 #d6e0cb; }
.player-reset:disabled { box-shadow:none; }
.control:focus-within { box-shadow:inset 0 0 0 1px #c5d4ba; }
.completion:not([hidden]) { animation:surface-in 350ms cubic-bezier(.2,.8,.2,1); }
@keyframes beat-touch { 0% { transform:translateY(-3px) scale(1.1); } 100% { transform:translateY(0) scale(1); } }
@keyframes surface-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:760px) {
  .app { padding-top:12px; }
  .player { padding:12px 14px; background:linear-gradient(135deg,#fbfcf7f7,#f1f6eafa); }
  .player-icon,.player-icon .icon { width:24px; height:24px; }
  .chord-focus { padding-top:2px; }
  .stage-top { gap:16px; }
  .chord-meta { margin-top:0; }
}
@media (prefers-reduced-motion:reduce) {
  .beat-grid.is-playing .beat-cell.active .beat-val,.completion:not([hidden]) { animation:none; }
}

.studio-header { min-height:38px; margin-bottom:12px; }
.brand { font-size:19px; gap:8px; }
.brand img { width:30px; height:30px; }
.brand small { display:none; }
.session-goal { font-size:10px; }
.player #songMenuButton { position:static; pointer-events:auto; width:44px; height:44px; min-height:44px; }
.player-menu-button .icon,.settings-reset .icon,.player-reset .icon { filter:drop-shadow(0 1px 0 #fff) drop-shadow(0 1px 1px #5b70412b); }
.player-play .icon { filter:drop-shadow(0 1px 1px #31492355); }
.song-picker { width:min(440px,calc(100% - 24px)); max-height:min(640px,calc(100dvh - 32px)); box-sizing:border-box; padding:20px; border:1px solid #d5dfca; border-radius:26px; background:#fbfcf6; color:var(--text); box-shadow:0 24px 80px #26361c26,inset 0 1px white; overflow:hidden; }
.song-picker[open] { display:flex; flex-direction:column; animation:surface-in 240ms cubic-bezier(.2,.8,.2,1); }
.song-picker::backdrop { background:#26351e38; backdrop-filter:blur(5px); }
.picker-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; flex:none; }
.picker-heading h2 { margin:0; font-size:19px; font-weight:600; letter-spacing:.3px; }
.picker-heading p { margin:5px 0 0; font-size:12px; color:var(--muted); }
.picker-heading button { display:flex; align-items:center; justify-content:center; padding:0; flex:0 0 44px; width:44px; height:44px; border:0; border-radius:50%; background:#eaf0e1; color:#59734b; }
#songSearch { flex:none; width:100%; min-height:44px; margin:18px 0 8px; padding:10px 14px; border:1px solid #d9e2ce; border-radius:13px; font-size:16px; background:#f1f5e9; color:var(--text); }
.song-options { min-height:0; overflow:auto; overscroll-behavior:contain; padding:2px 3px 8px; scrollbar-width:thin; scrollbar-color:#bdcdb0 transparent; }
.song-options h3 { font-size:11px; letter-spacing:1px; color:#69775d; margin:16px 10px 8px; font-weight:500; }
.song-option { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:48px; text-align:left; padding:11px 12px; margin:3px 0; border:1px solid transparent; border-radius:13px; background:transparent; color:#405038; font-size:14px; line-height:1.5; }
.song-option[aria-pressed=true] { background:linear-gradient(120deg,#e6efda,#edf4e3); border-color:#c7d8b8; box-shadow:inset 0 1px #fff; }
.song-check { width:20px; flex:none; color:#557c3f; font-weight:700; }
.song-empty { color:var(--muted); text-align:center; font-size:13px; padding:20px 0; }
html:has(.song-picker[open]) { overflow:hidden; }
@media (max-width:760px) {
  .app { padding-top:10px; padding-bottom:calc(135px + env(safe-area-inset-bottom)); }
  .studio-header { margin:0 4px 8px; min-height:30px; }
  .stage { margin-top:10px; padding:14px 12px; }
  .stage-heading { margin-bottom:10px; }
  .chord-diagram-card { padding:9px 8px; }
  .chord-diagram { height:94px; }
  .diagram-label strong { font-size:34px; margin:4px 0; }
  .chord-focus { padding-bottom:5px; }
  .chord-meta { padding-top:3px; gap:5px; }
  .stage-top { gap:12px; }
  .beat-cell { min-height:66px; }
  .rhythm-caption { margin-top:10px; }
  .studio-footer { margin:6px 6px 0; }
  .song-picker { margin:auto auto 12px; max-height: min(640px,calc(100dvh - 28px)); padding:18px 16px calc(16px + env(safe-area-inset-bottom)); }
}
@media (max-width:760px) and (max-height:740px) {
  .chord-diagram { height:78px; }
  .chord-diagram-card { padding:7px 6px; }
  .diagram-label strong { font-size:29px; }
  .chord-diagram-card.upcoming .diagram-label strong { font-size:27px; }
  .diagram-legend { display:none; }
  .beat-cell { min-height:58px; }
  .stage-heading { margin-bottom:8px; }
}
@media (prefers-reduced-motion:reduce) {
  .song-picker[open] { animation:none; }
}