/* Shared presentation. Instrument geometry follows J. Shelby's reference sketches. */
:root{color-scheme:light;--page:#eef2f7;--paper:#fff;--ink:#16283d;--muted:#627285;--line:#dfe5ec;--accent:#2563c4;--good:#087f62;--bad:#ba3547;--radius:20px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--page);font-size:16px}
*{box-sizing:border-box}
body{margin:0;min-width:320px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
button,select,input{font:inherit}
button,a,select,input{-webkit-tap-highlight-color:transparent}
button,select{touch-action:manipulation}
button{cursor:pointer}
button:disabled{cursor:default}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible,.trophy-row:focus-visible{outline:3px solid #3a8cdd;outline-offset:4px}
a{color:inherit}
[hidden]{display:none!important}
.page{width:min(100% - 64px,980px);margin:0 auto;padding:0 env(safe-area-inset-right) 0 env(safe-area-inset-left)}
.site-header{display:flex;align-items:center;justify-content:space-between;padding:26px 0 22px}
.studio{display:flex;gap:9px;align-items:center;text-decoration:none;color:#228b22}
.studio strong{font-size:34px;letter-spacing:-2px;font-weight:850;line-height:1}
.studio span{font-size:10px;line-height:1.3;letter-spacing:1.6px;font-weight:750}
.back-link{font-size:14px;color:var(--muted);text-decoration:none;padding:10px 0}
.back-link span{padding-left:8px;color:var(--accent)}
.title-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 18px}
h1{font-family:Georgia,"Times New Roman",serif;font-size:42px;font-weight:500;letter-spacing:-1.6px;line-height:1.12;margin:0}
.title-dot{color:#e88824}
.mode-title{font-size:14px;color:var(--muted)}
.mode-nav{display:flex;gap:8px;padding:0 0 18px}
.mode-link{--tab-color:#2563c4;--tab-tint:#e5efff;padding:10px 20px;border-radius:30px;text-decoration:none;font-size:14px;font-weight:650;color:var(--tab-color);background:var(--tab-tint);border:1px solid transparent;transition:background .15s,box-shadow .15s}
.mode-link[data-mode="treble"]{--tab-color:#783caf;--tab-tint:#f1e7fc}
.mode-link[data-mode="bass"]{--tab-color:#087966;--tab-tint:#dff5ed}
.mode-link:hover{box-shadow:inset 0 0 0 1px var(--tab-color)}
.mode-link[aria-current="page"]{background:var(--tab-color);color:#fff;box-shadow:0 3px 7px #16283d12}
.mode-link[aria-disabled="true"]{cursor:default}
.game{border:1px solid #d8e1eb;border-radius:var(--radius);background:var(--paper);box-shadow:0 16px 48px #1a345b09;overflow:hidden}
.scoreboard{display:grid;grid-template-columns:1fr 1fr 1fr auto;align-items:center;min-height:96px;padding:16px 32px;border-bottom:1px solid var(--line);gap:24px;background:linear-gradient(110deg,#f3fcf8,#faf6ff 55%,#fffaf0)}
.stat{display:flex;flex-direction:column;gap:3px}
.stat-label{font-size:13px;color:var(--muted)}
.stat strong{font-size:26px;font-weight:650;line-height:1.15;font-variant-numeric:tabular-nums;letter-spacing:-.8px}
#score{color:#087966}
#accuracy{color:#783caf}
.best-stat strong{color:#9c6208}
.best-stat{display:grid;grid-template-columns:max-content max-content;column-gap:8px;row-gap:3px;justify-content:start}
.best-stat .stat-label{grid-column:1;grid-row:1}
.best-stat strong{grid-column:1;grid-row:2}
.reset-best{grid-column:2;grid-row:1/3;align-self:center;min-height:30px;padding:5px 8px;border:1px solid #dfc58f;border-radius:7px;background:#fff8e9;color:#875712;font-size:12px;font-weight:600;white-space:nowrap}
.reset-best:hover{background:#fff0cf}
.reset-best:disabled{opacity:.45;cursor:default}
.clock{position:relative;display:flex;gap:6px;align-items:baseline;padding-left:24px;border-left:1px solid var(--line);font-variant-numeric:tabular-nums;min-width:111px;justify-content:flex-end}
.clock strong{font-size:45px;font-weight:550;line-height:1;letter-spacing:-2px}
.clock>span:last-child{font-size:13px;color:var(--muted)}
.clock.urgent{color:#f00202}
.clock.urgent strong{animation:timer-pulse 1s ease-in-out infinite;transform-origin:center}
@keyframes timer-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.12)}}
.bonus{position:absolute;right:0;top:-15px;color:var(--good);font-size:13px;font-weight:750;opacity:0;pointer-events:none}
.bonus.show{animation:bonus 900ms ease-out forwards}
@keyframes bonus{0%{opacity:0;transform:translateY(7px)}20%,65%{opacity:1}100%{opacity:0;transform:translateY(-5px)}}
.settings{border-bottom:1px solid var(--line);background:#fbfcfe}
.settings summary{display:flex;align-items:center;gap:10px;padding:13px 32px;cursor:pointer;font-size:14px;list-style:none;min-height:46px}
.settings summary::-webkit-details-marker{display:none}
.range-adjust{margin-left:auto;white-space:nowrap;font-weight:600;color:var(--accent)}
.settings summary::after{content:'+';flex:0 0 20px;font-size:28.5px;font-weight:700;color:var(--accent);line-height:19px;text-align:center}
.settings[open] summary::after{content:'−'}
.range-label{color:var(--muted);font-variant-numeric:tabular-nums}
.settings-body{display:grid;grid-template-columns:1fr auto;gap:20px;padding:8px 32px 22px;align-items:end}
.range-selects{display:flex;align-items:end;gap:14px}
.range-selects>span{align-self:center;padding-top:25px;color:var(--muted)}
.range-selects label{display:grid;gap:7px;font-size:14px;color:var(--muted);flex:1;max-width:190px}
select{min-height:44px;background-color:var(--paper);color:var(--ink);border:1px solid #cbd6e2;border-radius:8px;padding:7px 28px 7px 12px;font-size:16px;max-width:100%}
.record-details{grid-column:1/-1;border-top:1px solid var(--line);padding-top:15px;display:flex;align-items:center;flex-wrap:wrap;gap:8px 20px;font-size:14px;color:var(--muted)}
.record-details>span{flex:1}
.record-details .text-button{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.small-note{font-size:13px;line-height:1.5;color:var(--muted);margin:10px 0 0}
.play-area{position:relative;outline:none;padding:18px 32px 0;isolation:isolate}
.staff-heading{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted);min-height:20px;gap:12px}
.streak{display:flex;align-items:center;gap:9px;font-size:12px}
#streak-dots{display:flex;gap:4px}
#streak-dots i{width:8px;height:8px;border-radius:50%;background:#e4e5ef}
#streak-dots i.filled{background:var(--good)}
#streak-dots i.filled:nth-child(1){background:#e59121}
#streak-dots i.filled:nth-child(2){background:#df5681}
#streak-dots i.filled:nth-child(3){background:#9363c8}
#streak-dots i.filled:nth-child(4){background:#3c8adb}
#staff{display:block;width:100%;height:clamp(245px,33vh,345px);color:var(--ink);overflow:visible}
#staff-lines line,.ledger{stroke:#728091;stroke-width:1.05}
#staff-lines .clef{fill:var(--ink);stroke:none}
.staff-bracket{fill:none;stroke:#728091;stroke-width:1.5}
#current-note{transform-box:view-box}
#current-note.hit{animation:note-pop 180ms ease-out forwards}
#current-note.wrong{animation:note-shake 260ms ease-in-out}
@keyframes note-pop{0%{opacity:1;transform:scale(1)}45%{opacity:1;transform:scale(1.45);color:var(--good)}100%{opacity:0;transform:scale(.6);color:var(--good)}}
@keyframes note-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.stage-panel{position:absolute;inset:43px 0 0;display:grid;place-items:center;padding:12px 20px;background:#ffffffdc;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.stage-card{text-align:center;max-width:520px}
.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:750;color:var(--accent)}
.stage-card h2{font-family:Georgia,"Times New Roman",serif;font-size:30px;font-weight:500;line-height:1.12;letter-spacing:-.6px;margin:9px 0 12px}
.stage-card p{color:var(--muted);font-size:14px;line-height:1.55;margin:0 0 18px}
.primary,.secondary{min-height:46px;border-radius:10px;padding:12px 22px;font-size:15px;font-weight:650;border:1px solid transparent;transition:background .15s,transform .15s}
.primary{background:linear-gradient(120deg,#2463cb,#5653c7);color:#fff;box-shadow:0 4px 0 #1c4597,0 7px 14px #2563c422}
.primary:hover{background:linear-gradient(120deg,#1956bb,#4742b4)}
.primary:active,.secondary:active{transform:translateY(1px)}
.primary:disabled{opacity:.5}
.primary span{margin-left:24px}
.secondary{background:#eef3f8;color:var(--ink);border-color:#d8e1eb}
.secondary:hover{background:#e4ecf5}
.result-actions{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.stage-card .small-note{font-size:12px;margin:12px 0 0}
.result-award{display:block;font-size:18px;color:var(--accent);margin:0 0 12px}
.instrument-area{padding:8px 32px 18px}
.instrument-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.input-label{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.input-label select{font-size:14px;font-weight:650;background:#f7f9fc;border-color:transparent;min-height:38px}
.text-button{border:0;background:transparent;padding:10px 0;min-height:38px;color:var(--accent);font-size:14px;font-weight:550;white-space:nowrap}
.text-button:hover{text-decoration:underline;text-underline-offset:3px}
.text-button:disabled{opacity:.5;text-decoration:none}
.instrument{position:relative;user-select:none;-webkit-user-select:none}
.piano{display:grid;grid-template-columns:repeat(var(--key-count),minmax(0,1fr));height:140px;border:1px solid #a6b2c0;border-top:6px solid #192b41;border-radius:7px 7px 10px 10px;box-shadow:0 5px 0 #dce3eb,0 9px 15px #152b4310}
.white-key{position:relative;min-width:0;appearance:none;-webkit-appearance:none;border:0;border-right:1px solid #b9c3cf;border-radius:0 0 5px 5px;background:linear-gradient(90deg,#fff 0%,#fff 78%,#f1f3f6 100%);box-shadow:inset 0 -5px 0 #e8edf3;color:var(--accent);padding:0;display:flex;align-items:end;justify-content:center}
.white-key:last-child{border-right:0}
.white-key .note-label{opacity:0;font-size:21px;font-weight:650;padding-bottom:18px;pointer-events:none}
.white-key.pressed{background:#fff0b8;box-shadow:inset 0 -2px 0 #e4c568}
.white-key.pressed .note-label{opacity:1}
.white-key:focus-visible{outline-offset:-5px;z-index:2}
.black-key{position:absolute;z-index:3;top:-1px;width:calc(62% / var(--key-count));height:62%;transform:translateX(-50%);border:1px solid #101b2a;border-radius:0 0 4px 4px;background:linear-gradient(90deg,#132031,#2b3b4d 65%,#132031);box-shadow:inset 0 -5px 0 #0c1727,2px 4px 4px #0d172625;pointer-events:auto;touch-action:manipulation}
.fretboard{height:140px;display:grid;grid-template-columns:repeat(var(--fret-count),minmax(0,1fr));align-items:stretch;border:1px solid #d8e1eb;border-radius:10px;background:#f6f8fb;overflow:hidden}
.fretboard::after{content:'';position:absolute;top:66%;left:0;right:0;height:2px;background:#516579;box-shadow:0 1px 1px #fff;pointer-events:none}
.fretboard.bass::after{height:4px;background:repeating-linear-gradient(100deg,#526579 0 1px,#7c8da0 1px 3px)}
.fret{position:relative;min-width:0}
.fret:not(:first-child)::before{content:'';position:absolute;left:0;top:22%;bottom:14%;width:2px;background:#9eacba;box-shadow:1px 0 #fff;pointer-events:none}
.fret-note{position:absolute;inset:0;width:100%;border:0;border-radius:4px;background:transparent;color:#718094;padding:0 0 24px;display:flex;align-items:center;justify-content:center}
.fret-note .note-label{font-size:19px;font-weight:550;pointer-events:none}
.fret-note.pressed{color:#6833a0;background:#fff0b8}
.fret-note.pressed .note-label{font-weight:750}
.fret-note:focus-visible{outline-offset:-4px}
.instrument-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:34px;padding-top:10px}
.instrument-footer p{font-size:13px;color:var(--muted);margin:0;line-height:1.4}
.instrument-footer .text-button{font-size:13px;min-height:30px;padding:5px 0;color:var(--muted)}
.instrument-footer #end-round{padding:4px 12px;border:1px solid #284eaa;border-radius:7px;background:linear-gradient(120deg,#2463cb,#5653c7);color:#fff;box-shadow:0 2px 0 #1c4597,0 3px 6px #2563c422;transition:background .15s,transform .15s}
.instrument-footer #end-round:hover{background:linear-gradient(120deg,#1956bb,#4742b4);text-decoration:none}
.instrument-footer #end-round:active{transform:translateY(1px)}
/* A complete collection, outside the collapsed settings and always on one line. */
.trophy-shelf{display:flex;align-items:center;gap:16px;min-width:0;padding:10px 32px;border-top:1px solid #f0e2bd;background:#fffbef}
.trophy-shelf h2{flex:none;font-size:14px;font-weight:650;color:#875712;margin:0}
.trophy-row{display:flex;flex:1;flex-wrap:nowrap;gap:8px;min-width:0;margin:0;padding:5px 3px 9px;list-style:none;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#d5b66d transparent;touch-action:pan-x pan-y}
.trophy-row::-webkit-scrollbar{height:5px}
.trophy-row::-webkit-scrollbar-thumb{border-radius:5px;background:#d5b66d}
.trophy{display:grid;place-items:center;flex:0 0 42px;height:42px;border:1px solid #eed9a0;border-radius:12px;background:#fff4d2;font-size:28px;line-height:1}
#trophies-empty{margin:0;padding:8px 0;color:#786b50;font-size:13px;line-height:1.5}
.site-footer{display:flex;justify-content:space-between;gap:12px;padding:20px 0 26px;color:var(--muted);font-size:12px;line-height:1.5}
dialog{color:var(--ink);border:1px solid var(--line);border-radius:18px;padding:26px;max-width:460px;width:calc(100% - 40px);box-shadow:0 24px 100px #0b203944}
dialog::backdrop{background:#152b435c;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
dialog h2{margin:0 0 12px;font-size:22px;font-weight:600}
dialog p,dialog label{font-size:16px;line-height:1.5;color:var(--muted)}
.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;flex-wrap:wrap}
#share-url{display:block;width:100%;margin:15px 0;padding:12px;border:1px solid var(--line);border-radius:8px;font-size:16px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-80px;left:20px;background:#fff;padding:12px;z-index:10;border-radius:6px}
.skip-link:focus{top:10px}
.noscript{position:fixed;bottom:0;left:0;right:0;background:#fff3cc;color:#4d3900;text-align:center;padding:20px;margin:0;z-index:10}
@media(min-width:1100px) and (min-height:850px){.page{max-width:980px}.site-header{padding-top:36px}.title-row{margin-bottom:22px}h1{font-size:48px}.instrument-area{padding-bottom:22px}.piano,.fretboard{height:152px}}
@media(max-width:600px){
  .page{width:calc(100% - 28px)}
  .site-header{padding:16px 2px 17px}.studio strong{font-size:29px}.studio span{font-size:9px}.back-link{font-size:13px}
  .title-row{margin-bottom:13px;padding:0 2px}h1{font-size:34px}.mode-title{display:none}
  .mode-nav{gap:4px;padding-bottom:14px}.mode-link{flex:1;text-align:center;padding:10px 6px;font-size:13px}
  .game{border-radius:16px}.scoreboard{padding:13px 17px;min-height:78px;gap:12px}.stat-label{font-size:12px}.stat strong{font-size:22px}.clock{padding-left:12px;min-width:76px;gap:4px}.clock strong{font-size:37px}.clock>span:last-child{font-size:12px}
  .best-stat{column-gap:5px}.reset-best{font-size:11px;padding:5px}
  .settings summary{padding:11px 17px;font-size:13px}.settings-body{padding:5px 17px 16px;grid-template-columns:1fr;gap:10px}.settings-body>#share{justify-self:start}.range-selects label{max-width:none}.record-details{gap:8px 12px}.record-details>span{width:100%}
  .play-area{padding:12px 10px 0}.staff-heading{padding:0 7px;font-size:12px}.streak{font-size:11px;gap:7px}#streak-dots{gap:3px}#streak-dots i{width:5px;height:5px}
  #staff{height:clamp(222px,29svh,278px)}
  .stage-panel{inset:36px 0 0;padding:12px 15px}.eyebrow{font-size:9px}.stage-card h2{font-size:25px;margin:7px 0 10px}.stage-card p{font-size:13px;margin-bottom:13px}.primary,.secondary{font-size:14px;padding:11px 17px;min-height:44px}.result-actions{gap:7px}.result-card h2{font-size:25px}.result-award{font-size:16px;margin-bottom:7px}
  .instrument-area{padding:4px 14px 12px}.instrument-toolbar{margin-bottom:9px}.input-label,.text-button{font-size:13px}.input-label select{font-size:16px;min-height:38px}
  .piano,.fretboard{height:124px}.white-key .note-label{font-size:19px;padding-bottom:13px}.fret-note .note-label{font-size:17px}.fret-note{padding-bottom:20px}
  .instrument-footer{padding-top:11px;gap:7px}.instrument-footer p{font-size:12px}.instrument-footer .text-button{font-size:12px}
  .site-footer{display:block;padding:15px 2px;font-size:11px}.site-footer>span:first-child{display:none}
  .trophy-shelf{padding:8px 14px;gap:10px}.trophy-shelf h2{font-size:12px}.trophy-row{gap:6px}.trophy{flex-basis:36px;height:36px;border-radius:9px;font-size:25px}#trophies-empty{font-size:12px}
}
@media(max-height:750px) and (max-width:600px){.site-header{padding-top:10px;padding-bottom:10px}h1{font-size:29px}.title-row{margin-bottom:9px}.mode-nav{padding-bottom:10px}.scoreboard{min-height:70px;padding-top:10px;padding-bottom:10px}#staff{height:218px}.piano,.fretboard{height:108px}.site-footer{padding-top:10px}.stage-card h2{font-size:23px}.stage-card p{font-size:12px}}
@media(max-width:370px){
  .settings summary{gap:4px}
  .scoreboard{grid-template-columns:1fr 1fr auto;padding-left:12px;padding-right:12px;gap:7px}
  .best-stat{grid-column:1/3;grid-row:2}
  .clock{grid-column:3;grid-row:1/3;padding-left:7px;min-width:66px}
  .clock strong{font-size:32px}
}
@media(max-height:550px) and (min-width:601px){.page{max-width:850px}.site-header{padding:12px 0}.title-row{margin-bottom:8px}h1{font-size:30px}.mode-nav{padding-bottom:10px}.scoreboard{min-height:72px;padding:10px 25px}#staff{height:230px}.piano,.fretboard{height:105px}}
/* Taller desktop piano; shorten the idle space above it to bring the opening panel up. */
@media(min-width:900px) and (min-height:650px){
  .piano{height:245px}
  body[data-input="piano"] #staff{height:clamp(236px,calc(33vh - 70px),265px)}
  body[data-input="piano"] .stage-panel{place-items:start center;padding-top:8px}
  .white-key .note-label{font-size:25px;padding-bottom:24px}
}
@media(min-width:1100px) and (min-height:850px){.piano{height:266px}}
/* Mac-only window fitting. iPadOS desktop browsing is excluded in notes.js.
   Small/zoomed windows keep the normal document flow so nothing is inaccessible. */
@media(min-width:800px) and (min-height:600px){
  html.mac-desktop,html.mac-desktop body{height:100%;overflow:hidden;overscroll-behavior:none}
  .mac-desktop .page{position:relative;width:min(100% - 40px,980px);height:100vh;height:100dvh;display:grid;grid-template-rows:minmax(0,1fr) 28px;padding:8px 0 0}
  .mac-desktop .site-header{position:absolute;top:12px;left:0;width:100%;height:0;padding:0}
  .mac-desktop .studio{position:absolute;top:0;left:0}
  .mac-desktop .studio strong{font-size:30px}
  .mac-desktop .back-link{position:absolute;top:calc(100vh - 39px);top:calc(100dvh - 39px);left:0;padding:4px 0;font-size:12px}
  .mac-desktop main{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:40px minmax(0,1fr);gap:8px 16px}
  .mac-desktop .title-row{grid-column:1;grid-row:1;align-items:center;padding-left:128px;margin:0}
  .mac-desktop h1{font-size:32px;white-space:nowrap}
  .mac-desktop .mode-title{display:none}
  .mac-desktop .mode-nav{grid-column:2;grid-row:1;align-self:center;padding:0;gap:6px}
  .mac-desktop .mode-link{padding:9px 14px}
  .mac-desktop .game{grid-column:1/-1;grid-row:2;min-height:0;display:flex;flex-direction:column}
  .mac-desktop .scoreboard{flex:none;min-height:64px;padding:8px 24px}
  .mac-desktop .stat strong{font-size:24px}
  .mac-desktop .clock strong{font-size:38px}
  .mac-desktop .settings{position:relative;z-index:2;flex:none}
  .mac-desktop .settings summary{min-height:39px;padding:9px 24px}
  .mac-desktop .settings-body{position:absolute;top:100%;left:0;right:0;max-height:min(320px,50vh);overflow-y:auto;overscroll-behavior:contain;padding:16px 24px;background:#fbfcfe;border-bottom:1px solid var(--line);box-shadow:0 12px 24px #16283d20}
  .mac-desktop .play-area{flex:1;min-height:0;display:grid;grid-template-rows:20px minmax(0,1fr);padding:6px 24px 0}
  html.mac-desktop body #staff{height:100%;min-height:0;max-height:380px;align-self:center}
  html.mac-desktop body .stage-panel{inset:26px 0 0;display:flex;flex-direction:column;align-items:center;padding:6px 16px;overflow-y:auto;overscroll-behavior:contain}
  .mac-desktop .stage-card{flex:none;width:100%;margin-block:auto}
  .mac-desktop .stage-card h2{font-size:25px;line-height:1.08;margin:6px 0}
  .mac-desktop .stage-card p{line-height:1.4;margin-bottom:10px}
  .mac-desktop .stage-card .primary,.mac-desktop .stage-card .secondary{min-height:42px;padding:10px 18px}
  .mac-desktop .stage-card .small-note{margin:8px 0 0}
  .mac-desktop .result-award{margin-bottom:6px}
  .mac-desktop .instrument-area{flex:none;padding:0 24px 6px}
  .mac-desktop .instrument-toolbar{margin-bottom:4px}
  .mac-desktop .piano{height:clamp(100px,calc(100vh - 550px),266px);height:clamp(100px,calc(100dvh - 550px),266px)}
  .mac-desktop .fretboard{height:clamp(100px,calc(100vh - 550px),152px);height:clamp(100px,calc(100dvh - 550px),152px)}
  .mac-desktop .white-key .note-label{padding-bottom:16px}
  /* Reserve the same space before, during, and after a round. */
  .mac-desktop .instrument-footer{height:36px;min-height:36px;padding-top:6px}
  .mac-desktop .trophy-shelf{flex:none;height:56px;padding:0 24px}
  .mac-desktop .trophy-row{height:55px;padding:5px 3px 8px}
  .mac-desktop .trophy{flex-basis:36px;height:36px;font-size:25px;border-radius:9px}
  .mac-desktop .site-footer{justify-content:flex-end;align-items:center;padding:0;line-height:1.5}
  .mac-desktop .site-footer>span:first-child{display:none}
  .mac-desktop .sr-only{position:fixed;top:0;left:0}
}
@media(min-width:800px) and (min-height:600px) and (max-height:699px){
  .mac-desktop .page{grid-template-rows:minmax(0,1fr) 26px}
  .mac-desktop main{grid-template-rows:36px minmax(0,1fr)}
  .mac-desktop .site-header{top:10px}
  .mac-desktop h1{font-size:30px}
  .mac-desktop .mode-link{padding-top:7px;padding-bottom:7px}
  .mac-desktop .scoreboard{min-height:54px;padding-top:5px;padding-bottom:5px}
  .mac-desktop .stat strong{font-size:22px}
  .mac-desktop .clock strong{font-size:34px}
  .mac-desktop .settings summary{min-height:35px;padding-top:7px;padding-bottom:7px}
  .mac-desktop .stage-card h2{font-size:24px;margin:5px 0}
  .mac-desktop .piano,.mac-desktop .fretboard{height:clamp(90px,calc(100vh - 520px),179px);height:clamp(90px,calc(100dvh - 520px),179px)}
  .mac-desktop .trophy-shelf{height:46px}
  .mac-desktop .trophy-row{height:45px;padding-top:3px;padding-bottom:6px}
  .mac-desktop .trophy{flex-basis:30px;height:30px;font-size:23px;border-radius:8px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}