:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--status-bar-fade,none),radial-gradient(ellipse at 34% 12%,#45454555,transparent 65%),repeating-linear-gradient(102deg,#ffffff04 0px,#ffffff04 1px,transparent 1px,transparent 4px),linear-gradient(90deg,#1b1b1b,#2c2c2c 50%,#1b1b1b) #222;color:#ececec}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{height:100dvh;-webkit-tap-highlight-color:transparent}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #8ccbf2;outline-offset:3px}#instrument{position:fixed;inset:0;box-shadow:inset 0 -20px 28px -16px #0009;user-select:none;-webkit-user-select:none;touch-action:none}#keyboard{position:absolute;top:max(54px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));left:max(10px,env(safe-area-inset-left));touch-action:none;user-select:none;-webkit-user-select:none;overflow:hidden}.key{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;border:1px solid #aaa;outline-offset:2px;padding:0;isolation:isolate;color:#525252;touch-action:none;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;background:radial-gradient(ellipse at 35% 25%,#f7f7f3 0%,#e7e8e5 30%,#c6c7c4 72%,#a4a5a2 100%);box-shadow:inset 0 2px 3px #fff9,inset 0 -3px 5px #0004,0 3px 2px #090909,0 4px 7px #0009;transition:filter 35ms,box-shadow 35ms}.key:before{content:'';position:absolute;inset:2px;border-radius:50%;background:repeating-linear-gradient(145deg,transparent 0 4px,#fff1 4px 5px);opacity:.45;pointer-events:none}.key.black{border-color:#222;background:radial-gradient(ellipse at 35% 25%,#424242,#333 46%,#252525 80%,#1c1c1c);color:#ddd;box-shadow:inset 0 2px 2px #ffffff1a,inset 0 -3px 4px #0008,0 3px 2px #080808,0 4px 7px #0008}.key .name{font-size:var(--label-size,17px);line-height:1.1;font-weight:500;pointer-events:none;z-index:1}.key .octave{font-size:calc(var(--label-size,17px)*.62);margin-top:4px;opacity:.6;pointer-events:none}.key.pressed{filter:brightness(.8);border-color:#b7ccdc;box-shadow:inset 0 3px 10px #0007,0 0 0 2px #b4d6ef66,0 1px 2px #000c;transform:translateY(2px)}.key.black.pressed{filter:brightness(1.45)}.gear{position:fixed;z-index:3;right:max(7px,env(safe-area-inset-right));top:max(5px,env(safe-area-inset-top));display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid #444;background:linear-gradient(#414141,#282828);box-shadow:0 2px 4px #0009;color:#ddd;padding:10px}.gear:active{background:#555}#toast{position:fixed;z-index:8;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%,10px);max-width:90%;background:#111e;border:1px solid #555;border-radius:10px;font-size:13px;padding:11px 17px;pointer-events:none;opacity:0;transition:opacity .15s,transform .15s;text-align:center}#toast.visible{opacity:1;transform:translate(-50%,0)}dialog{padding:0;border:1px solid #444;background:#222;color:#eee;width:min(430px,calc(100% - 24px));max-height:calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom));border-radius:13px;box-shadow:0 12px 70px #000c;overscroll-behavior:contain}dialog::backdrop{background:#0009;backdrop-filter:blur(3px)}.dialoghead{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:10px 14px 10px 20px;background:#303030;border-bottom:1px solid #444;z-index:2}.dialoghead h1{font-size:16px;font-weight:500;margin:0}.close{width:40px;height:40px;border:0;background:none;color:white;font-size:32px;line-height:1}.settings-body{padding:0 20px 18px}.settings-body section{border-bottom:1px solid #3a3a3a;padding:20px 0}.section-title{font-size:12px;color:#a7a7a7;margin-bottom:12px}.settingline{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:45px;font-size:14px}.settingline strong{font-size:12px;font-weight:400;color:#aaa}fieldset{padding:0;border:0;margin:12px 0 14px}legend{font-size:14px;margin-bottom:12px}.segmented{display:flex;background:#333;border-radius:6px;overflow:hidden;border:1px solid #4b4b4b}.segmented label{flex:1;position:relative;cursor:pointer}.segmented input{position:absolute;opacity:0}.segmented span{display:grid;place-items:center;height:42px;color:#aaa;border-right:1px solid #4b4b4b}.segmented label:last-child span{border:0}.segmented input:checked+span{background:#777;color:#fff;box-shadow:inset 0 1px 0 #aaa}.segmented input:focus-visible+span{outline:2px solid #acd7fa;outline-offset:-3px}.switch{appearance:none;-webkit-appearance:none;width:38px;height:23px;border-radius:20px;background:#626262;position:relative;cursor:pointer;margin:0;flex-shrink:0}.switch:after{content:'';position:absolute;left:3px;top:3px;width:17px;height:17px;border-radius:50%;background:#eee;box-shadow:0 1px 2px #0006;transition:transform .1s}.switch:checked{background:#83bd31}.switch:checked:after{transform:translateX(15px)}select{max-width:190px;border:1px solid #555;background:#363636;padding:8px;border-radius:5px;font-size:12px;color:#eee}.hint{font-size:12px;line-height:1.6;color:#a6a6a6;margin:12px 0 0}.range{width:100%;accent-color:#ddd;height:30px}.wide{width:100%;display:flex;align-items:center;justify-content:center;gap:15px;border:1px solid #777;border-radius:5px;background:#606060;color:white;padding:13px;text-decoration:none;font-size:14px;min-height:46px}.secondary{background:#353535;border-color:#505050}.wide:active{background:#777}#silence{margin-top:13px}.install-help{display:none;background:#303030;border:1px solid #4c4c4c;border-radius:7px;margin-top:13px;padding:14px;font-size:13px;line-height:1.55}.install-help.visible{display:block}.install-help ol{padding-left:20px}.install-help p{color:#aaa;font-size:12px;margin-bottom:0}.settings-foot{display:flex;align-items:center;justify-content:space-between;padding-top:17px;font-size:11px;color:#858585}.settings-foot button{border:0;background:none;color:#aaa;font-size:11px;text-decoration:underline;padding:7px 0}@media(display-mode:standalone){#keyboard{top:max(12px,env(safe-area-inset-top))}.gear{opacity:.8}}@media(orientation:landscape){#keyboard{top:max(9px,env(safe-area-inset-top));right:max(58px,env(safe-area-inset-right));bottom:max(9px,env(safe-area-inset-bottom))}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

#keyboard{display:grid;grid-template-columns:minmax(0,1fr);--piano-ivory-press:#f6ce80;--piano-ebony-press:#385f70;--piano-ebony-edge:#98d9f2}
#keyboard.both{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;background:linear-gradient(90deg,transparent calc(50% - 2px),#111 50%,transparent calc(50% + 2px))}
.key-panel{position:relative;min-width:0;min-height:0}
.key-panel[hidden]{display:none}
#keyboard.both.game #left-hand{order:-1}
.key.landmark::after{content:'';position:absolute;bottom:15%;left:calc(50% - 2px);width:4px;height:4px;background:#87641d;border-radius:50%;pointer-events:none}

#keyboard.with-piano {
  grid-template-columns:clamp(64px,27%,214px) minmax(0,1fr);
  gap:8px;
}
.key[data-note].pressed {
  transform:none;
  border-color:#f6ce80;
  box-shadow:inset 0 0 0 2px #f6ce80,0 2px 7px #0008;
}
.with-piano .key {z-index:1}
.piano-key.key {
  left:0;
  border:1px solid #92998b;
  border-radius:0 5px 5px 0;
  background:#e8eae2;
  box-shadow:inset -2px -1px 4px #0002;
  color:#263329;
}
.piano-key.key::before {content:none}
.piano-key.key.black {
  z-index:2;
  border-color:#171b18;
  background:linear-gradient(#3c443e,#292f2a);
  box-shadow:0 1px 3px #0009;
  color:#f0f2e9;
}
.piano-key.key.pressed {background:var(--piano-ivory-press);filter:none}
.piano-key.key.black.pressed {background:var(--piano-ebony-press);border-color:var(--piano-ebony-edge)}
.piano-key.key:focus-visible {z-index:3;outline-offset:-2px}
.piano-name {
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
  font-size:clamp(9px,2.8vw,15px);
  line-height:1;
  pointer-events:none;
  white-space:nowrap;
}
.piano-key.black .piano-name {font-size:clamp(8px,2.4vw,12px)}
.key .dual-name {
  text-align:center;
  white-space:pre;
}
.key .name.dual-name {font-size:calc(var(--label-size)*.82)}
.key .dual-name + .octave {margin-top:1px}
.piano-key.black .piano-name.dual-name {
  left:1px;
  right:1px;
  font-size:var(--dual-size);
}
.pitch-guide {
  position:absolute;
  transform-origin:left center;
  height:1px;
  background:#f6ce80;
  visibility:hidden;
  pointer-events:none;
}
.pitch-guide.accidental {background:#98d9f2}
.pitch-guide.visible {visibility:visible}
.with-piano #right-board .key.black.pressed {
  border-color:var(--piano-ebony-edge);
}

#keyboard.with-piano.piano-right {
  grid-template-columns:minmax(0,1fr) clamp(64px,27%,214px);
}
.piano-right #piano-board {order:1}

#left-hand {display:grid;grid-template: minmax(0,1fr) / minmax(0,1fr)}
#left-hand {container-type:inline-size}
#left-hand[hidden],#left-tools[hidden],#practice[hidden],#practice [hidden] {display:none}
#left-board .key {
  background:linear-gradient(145deg,#4f4f51,#39393b 48%,#2c2c2e 78%,#242426);
  color:#e5e5e4;
  border:1px solid #141415;
  box-shadow:inset 1px 2px 2px #ffffff40,inset -1px -2px 3px #000b,0 2px 4px #000b;
}
#left-board .key::before {content:none}
#left-board .key.landmark {
  background:radial-gradient(ellipse at 50% 65%,#38383a,#4e4e50 59%,#202022 66%,#9a9a9b 79%,#38383a);
}
#left-board .key.landmark::after {background:#d3d3d4}
#left-board .key.pressed {
  filter:none;
  background:linear-gradient(145deg,#242426,#181819 67%,#202022);
  border-color:#dfb96f;
  box-shadow:inset 1px 2px 5px #0009,0 1px 2px #000a;
}
#left-tools {
  position:absolute;
  top:clamp(10px,4%,30px);
  left:0;
  z-index:2;
}
#chord-circle {
  position:relative;
  width:min(194px,49vw,38dvh,100cqw);
  aspect-ratio:1;
  container-type:inline-size;
  border-radius:50%;
  background:radial-gradient(circle,#252525 0 17%,#3c3c3c 17.5% 18%,#252525 18.5% 32%,#4d4d4d 32.5% 33%,#303030 33.5% 48.5%,#555 49%,#202020 50%);
}
#chord-circle .circle-key {
  width:17.5%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:linear-gradient(#5a5a5c,#363638);
  border:1px solid #161616;
  color:#f3f3f2;
  font-size:clamp(9px,5cqw,15px);
  white-space:nowrap;
  box-shadow:inset 0 1px 2px #ffffff35,0 2px 4px #0009;
}
#chord-circle .circle-key.minor {
  width:12.5%;
  background:linear-gradient(#363638,#242426);
  font-size:clamp(8px,4cqw,12px);
}
#chord-circle .circle-key::before {content:none}
#chord-circle .circle-key.pressed {
  background:#f6ce80;
  color:#241c0f;
  border-color:#f9dea9;
  filter:none;
}
#chord-circle .circle-key.minor.pressed {
  background:#a8d9e8;
  color:#13242a;
  border-color:#c1ebf7;
}

#instrument, #instrument .key, #instrument .key *, #tonic-hold {
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
#instrument .key > span {pointer-events:none}
.key {transition:filter 45ms,box-shadow 45ms,transform 55ms}
.piano-key.key[data-note].pressed {
  transform:none;
  box-shadow:inset 2px 2px 5px #0007;
}
#left-board .key:not(.black) {
  background:linear-gradient(145deg,#f5f5f2,#dfdfdc 51%,#c6c6c3 80%,#b6b6b3);
  color:#333;
  border-color:#8f8f8d;
  box-shadow:inset 1px 2px 2px #fff9,inset -1px -2px 4px #0005,0 2px 4px #000b;
}
#left-board .key.landmark:not(.black) {
  background:radial-gradient(ellipse at 50% 65%,#c2c3bf,#d5d6d2 59%,#8d8e8c 68%,#efefea 80%,#b3b4b0);
}
#left-board .key.landmark:not(.black)::after {background:#555}
#left-board .key:not(.black).pressed {
  filter:brightness(.82);
  border-color:#dfb96f;
  box-shadow:inset 0 2px 6px #0006,0 1px 2px #000a;
}
#tonic-hold, #practice button {
  background:#363638;
  color:#eee;
  border:1px solid #555;
  border-radius:7px;
  padding:6px 8px;
  font-size:13px;
}
.tonic-hold {touch-action:none}
#tonic-hold {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:29%;
  aspect-ratio:1;
  padding:0;
  border-radius:50%;
  font-size:clamp(10px,8cqw,14px);
}
.tonic-hold[aria-pressed=true], #practice button[aria-pressed=true] {
  background:#f6ce80;
  color:#241c0f;
  border-color:#f9dea9;
}
#keyboard.with-practice {grid-template-rows:minmax(0,1fr) auto;row-gap:4px}
#practice {grid-column:1/-1;order:2;min-width:0;padding:3px 0}
.practice-main,.practice-modes,#practice-detail {display:flex;gap:4px;align-items:center}
.practice-main button,.practice-modes button {flex:1;min-width:0;min-height:40px}
#practice-options {margin-top:4px}
#practice-detail {margin-top:4px;height:36px}
#practice-detail.inactive {visibility:hidden}
#practice-toggle[aria-expanded=true],#treble-tonic.has-tonic {border-color:#f6ce80}
#practice-detail select {max-width:44%}
#practice-detail button {min-height:34px;flex-shrink:0}
#practice-status {min-width:0;font-size:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#ddd}
#instrument .key.study-lit {outline:2px solid #8bd0e6;outline-offset:-2px}
#instrument .key.study-root {outline:2px solid #f6ce80;outline-offset:-2px}
#instrument .key.study-lit:focus-visible {outline-offset:1px}
.degree {
  position:absolute;
  z-index:2;
  top:5%;
  right:9%;
  border-radius:50%;
  background:#244452;
  color:#fff;
  min-width:1.16em;
  line-height:1.16;
  text-align:center;
  font-size:clamp(8px,calc(var(--label-size,14px)*.75),13px);
  font-weight:650;
}
.study-root .degree {background:#654b19}
.piano-key .degree {right:5px;top:2px}
#chord-circle .degree {top:-4px;right:-4px;font-size:clamp(8px,6cqw,10px)}

#right-board .key[data-note].pressed {
  box-shadow:inset 0 4px 8px #0008,0 1px 2px #000b;
}
#right-board .key.black.pressed {filter:brightness(1.18)}
#right-board .key[data-note].piano-source {
  color:#263329;
  background:var(--piano-ivory-press);
  filter:none;
}
#right-board .key[data-note].black.piano-source {
  color:#f0f2e9;
  background:var(--piano-ebony-press);
  border-color:var(--piano-ebony-edge);
}
#right-board .key.piano-source::before {opacity:0}
.standalone #instrument {position:absolute;bottom:auto;height:var(--app-height,100dvh)}
.standalone #keyboard {bottom:0}
.standalone #keyboard.with-practice {bottom:max(4px,env(safe-area-inset-bottom))}

#chord-circle.sectors {
  width:min(166px,43vw,36dvh,100cqw);
  background:#29292b;
}
#chord-circle.sectors .circle-key {
  inset:0;
  width:100%;
  height:100%;
  transform:none;
  border:0;
  border-radius:0;
  background:#4a4a4d;
  box-shadow:none;
}
#chord-circle.sectors .circle-key.minor {background:#373739}
#chord-circle.sectors .circle-key.study-lit {background:#345867;outline:none}
#chord-circle.sectors .circle-key.study-root {background:#785a24}
#chord-circle.sectors .circle-key.pressed {background:#f6ce80}
#chord-circle.sectors .circle-key.minor.pressed {background:#a8d9e8}
#chord-circle.sectors .circle-name {
  position:absolute;
  left:var(--label-x);
  top:var(--label-y);
  transform:translate(-50%,-50%);
}
#chord-circle.sectors .circle-key:focus-visible .circle-name {
  outline:1px solid currentColor;
  outline-offset:2px;
}
#chord-circle.sectors .degree {
  top:var(--label-y);
  left:var(--label-x);
  right:auto;
  transform:translate(40%,-105%);
}
#tonic-hold {z-index:2}

#keyboard.left-visible {
  top:max(5px,env(safe-area-inset-top));
  left:max(7px,env(safe-area-inset-left));
}
#left-tools {top:0}
#chord-circle,#chord-circle.sectors {width:min(206px,49vw,40dvh,100cqw)}
#chord-circle.sectors .degree {
  top:var(--degree-y);
  left:var(--degree-x);
  transform:translate(-50%,-50%);
  font-size:clamp(7px,4.6cqw,10px);
  min-width:1.08em;
  line-height:1.08;
}
#chord-circle .circle-key.no-bass-key:not(.pressed) {opacity:.59}
.standalone #instrument {height:100vh;height:100dvh}
.standalone #keyboard.with-practice {bottom:0}
.standalone #practice {padding-bottom:max(4px,env(safe-area-inset-bottom))}

#status-bar-color {display:none}

@supports (-webkit-touch-callout:none) {
  :root.standalone {
    --status-bar-fade:linear-gradient(var(--status-color,#222) max(8px,calc(env(safe-area-inset-top) - 12px)),transparent calc(max(8px,env(safe-area-inset-top)) + 12px));
  }
  .standalone #status-bar-color {
    display:block;
    position:fixed;
    z-index:1;
    inset:0 0 auto;
    height:8px;
    background:var(--status-color,#222);
    pointer-events:none;
  }
}

#tonic-hold {
  box-shadow:inset 0 1px 1px #ffffff24,0 2px 5px #0008;
  transition:transform 90ms,background-color 90ms,box-shadow 90ms;
}
#tonic-hold[aria-pressed=true] {
  color:#241c0f;
  background:#f6ce80;
  border-color:#f9dea9;
  transform:translate(-50%,-50%) scale(.92);
  box-shadow:inset 0 3px 7px #60481880,0 0 0 2px #f6ce8052;
}

.gear,#settings .close {
  display:grid;
  place-items:center;
  padding:0;
  border-radius:50%;
  color:#fafafa;
  border:1px solid #ffffff3b;
  background:radial-gradient(ellipse at 25% 0%,#fff3,transparent 53%),
    linear-gradient(150deg,#ffffff24,#ffffff0c 48%,#0004);
  box-shadow:inset 0 1px 1px #ffffff52,inset 0 -1px 2px #ffffff22,0 3px 10px #0007;
  -webkit-backdrop-filter:blur(15px) saturate(145%);
  backdrop-filter:blur(15px) saturate(145%);
}
.gear {opacity:1}
.gear svg,#settings .close svg {display:block}
.gear:active,#settings .close:active {
  background:linear-gradient(145deg,#ffffff52,#ffffff14);
  transform:scale(.95);
}

#settings {
  color:#f5f5f7;
  background:#000;
  border:1px solid #38383a;
  border-radius:26px;
  box-shadow:0 18px 65px #000b;
  scrollbar-width:thin;
}
#settings [hidden] {display:none}
#settings-open:focus-visible,#settings :focus-visible,
#settings .segmented input:focus-visible + span {outline-color:#b8b8ba}
#settings::backdrop {background:#0009}
#settings .dialoghead {
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 44px;
  min-height:61px;
  padding:7px 14px;
  background:#141415db;
  border-bottom-color:#ffffff18;
  -webkit-backdrop-filter:blur(20px) saturate(145%);
  backdrop-filter:blur(20px) saturate(145%);
}
#settings .dialoghead h1 {
  grid-column:2;
  text-align:center;
  font-size:19px;
  font-weight:650;
  letter-spacing:-.3px;
}
#settings .close {grid-column:3;width:40px;height:40px;justify-self:end}
#settings .settings-body {padding:6px 14px 16px}
#settings section {
  margin-top:13px;
  padding:9px 13px;
  border:0;
  border-radius:21px;
  background:#1c1c1e;
}
#settings .section-title {
  margin:2px 0 3px;
  color:#a8a8ad;
  font-size:12px;
  font-weight:600;
}
#settings .settingline {
  min-height:46px;
  font-size:15px;
}
#settings .settingline + .settingline {border-top:1px solid #38383a}
#settings .settingline:has(>select) {position:relative}
#settings .settingline:has(>select)::after {
  content:"";
  position:absolute;
  inset-inline-end:3px;
  width:6px;
  height:6px;
  border-top:1.5px solid #8e8e93;
  border-right:1.5px solid #8e8e93;
  transform:rotate(45deg);
  pointer-events:none;
}
#settings select {
  appearance:none;
  border:0;
  background:transparent;
  padding:8px 14px 8px 0;
  color:#a8a8ad;
  font-size:13px;
  text-align:right;
}
#settings select option {background:#1c1c1e;color:#f5f5f7}
#settings .segmented {
  padding:2px;
  border:0;
  border-radius:18px;
  background:#303033;
}
#settings .segmented span {
  height:36px;
  border:0;
  border-radius:16px;
}
#settings .segmented input:checked + span {
  background:#636366;
  box-shadow:inset 0 1px 0 #ffffff35,0 1px 3px #0008;
}
#settings .switch {width:48px;height:28px;background:#55555a}
#settings .switch:checked {background:#30a74c}
#settings .switch::after {width:22px;height:22px;background:#fff}
#settings .switch:checked::after {transform:translateX(20px)}
#settings .hint,#settings .settingline strong {color:#a8a8ad}
#settings .hint {margin:7px 0 3px}
#settings .wide {
  border:0;
  border-radius:16px;
  background:#2c2c2e;
  color:#f5f5f7;
}
#settings .wide:active:not(:disabled) {background:#454549}
#settings .wide:disabled {color:#98989d;cursor:default}
#settings #audio-restart {margin-top:7px}
#settings .install-help {background:#2c2c2e;border-color:#3a3a3c;border-radius:16px}

@media (max-width:560px) {
  #settings {
    position:fixed;
    inset:0;
    width:100%;
    max-width:none;
    height:100%;
    max-height:none;
    margin:0;
    border:0;
    border-radius:0;
  }
  #settings .dialoghead {padding-top:max(7px,env(safe-area-inset-top))}
  #settings .settings-body {
    padding-right:max(14px,env(safe-area-inset-right));
    padding-bottom:max(16px,env(safe-area-inset-bottom));
    padding-left:max(14px,env(safe-area-inset-left));
  }
}

#keyboard.with-staff:not(.tablet) {
  grid-template-columns:clamp(108px,32%,190px) minmax(0,1fr);
  column-gap:8px;
}
#keyboard.with-staff.panel-right:not(.tablet) {
  grid-template-columns:minmax(0,1fr) clamp(108px,32%,190px);
}
.with-staff.panel-right:not(.tablet) #staff-panel {order:1}
#keyboard.tablet {
  grid-template-columns:minmax(0,1fr) minmax(130px,24%) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);
  grid-template-areas:"bass staff treble";
  gap:clamp(6px,1.2vw,18px);
  background:none;
}
#keyboard.tablet.with-piano {
  grid-template-rows:minmax(0,1fr) clamp(72px,20%,150px);
  grid-template-areas:"bass staff treble" "bass piano treble";
}
#keyboard.tablet #left-hand {grid-area:bass}
#keyboard.tablet #right-board {grid-area:treble}
#keyboard.tablet #staff-panel {grid-area:staff}
#keyboard.tablet #piano-board {grid-area:piano}
.tablet #piano-board .key {border-radius:0 0 5px 5px}
.tablet #piano-board .piano-name {
  inset:auto 0 5px;
  transform:none;
  text-align:center;
  font-size:clamp(7px,1vw,13px);
}
#staff-panel:not([hidden]) {
  display:grid;
  grid-template-columns:minmax(0,180px);
  justify-content:center;
  container-type:inline-size;
  min-height:0;
  padding:4px;
  border:1px solid #ffffff1f;
  border-radius:16px;
  background:#161617ad;
}
.staff-sheet {
  position:relative;
  min-width:0;
  min-height:0;
  width:100%;
}
.staff-sheet svg {position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.staff-sheet .staff-overlay {z-index:2}
.staff-lines {fill:none;stroke:#a7a9ae}
.staff-lines path,.staff-notes .ledger {vector-effect:non-scaling-stroke;stroke-width:1}
.staff-clef {
  position:absolute;
  left:48%;
  bottom:1%;
  transform:translateX(-50%) rotate(-90deg);
  color:#e8e8ea;
  font:clamp(20px,4vw,36px)/1 "Apple Symbols","Noto Music","Segoe UI Symbol",serif;
}
.staff-notes {fill:#f6ce80}
.staff-notes .ledger {fill:none;stroke:#f6ce80}
.staff-accidental {font-size:14px;text-anchor:middle}
.staff-keys {
  position:absolute;
  inset:5% 7% auto;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  justify-items:center;
  gap:clamp(3px,1.5cqw,8px) 0;
  pointer-events:none;
}
.staff-keys .staff-key {
  position:relative;
  width:min(92%, 44px, 11dvh);
  aspect-ratio:1;
  transform:none;
  padding:0;
  border:1px solid #747478;
  border-radius:999px;
  background:linear-gradient(#404044,#29292c);
  color:#f2f2f3;
  font-size:clamp(10px,9cqw,14px);
  font-weight:550;
  box-shadow:0 1px 2px #0009;
  pointer-events:auto;
}
.staff-keys .staff-key::before {content:none}
.staff-keys .staff-key.pressed {
  color:#2d210f;
  background:#f6ce80;
  border-color:#ffdc95;
  transform:none;
  filter:none;
  box-shadow:inset 0 2px 4px #a66e4666;
}
.hide-staff-labels .staff-key > span {visibility:hidden}

.glass-keys {
  --light-glass:radial-gradient(ellipse at 30% 0%,#fffc,transparent 44%),
    radial-gradient(ellipse at 68% 108%,#f0f8ff8a,transparent 45%),
    linear-gradient(150deg,#e0edf5ec,#a5b8c5d9 50%,#c7d7e3e8);
  --dark-glass:radial-gradient(ellipse at 24% 0%,#dcecf96e,transparent 48%),
    radial-gradient(ellipse at 68% 110%,#accdf14f,transparent 49%),
    linear-gradient(150deg,#4d5966db,#20262de0 52%,#334557d9);
  --glass-edge:#cddce891;
  --glass-rim:inset 0 1px 1px #fffd,inset 0 -2px 3px #cbe2fc6b,
    inset 0 0 0 2px #b7d8f83c,0 2px 5px #0009;
}
.glass-keys :is(#left-board,#right-board,#piano-board) .key:not(.pressed) {
  background:var(--light-glass);
  border-color:var(--glass-edge);
  box-shadow:var(--glass-rim);
  color:#18222c;
}
.glass-keys :is(#left-board,#right-board,#piano-board) .key.black:not(.pressed),
.glass-keys #chord-circle:not(.sectors) .circle-key:not(.pressed),
.glass-keys .staff-keys .staff-key:not(.pressed),
.glass-keys #tonic-hold:not([aria-pressed=true]),
.glass-keys #practice button:not([aria-pressed=true]) {
  background:var(--dark-glass);
  border-color:var(--glass-edge);
  box-shadow:var(--glass-rim);
  color:#fafcff;
}
.glass-keys :is(#left-board,#right-board) .key:not(.pressed)::before {opacity:0}
.glass-keys #chord-circle.sectors .circle-key:not(.pressed,.study-lit,.study-root) {
  background:radial-gradient(ellipse at 30% 0%,#a7c1d9b8,transparent 50%),
    linear-gradient(145deg,#566473,#2b333d 65%,#4a6379);
}
.glass-keys #chord-circle.sectors .circle-key.minor:not(.pressed,.study-lit,.study-root) {
  background:radial-gradient(circle at 50% 50%,#293039 28%,#647485 55%,#34404c 73%);
}

.glass-keys :is(#left-board,#right-board,#piano-board) .key.pressed {
  box-shadow:inset 0 1px 1px #fff9,inset 0 4px 8px #0007,0 1px 2px #000b;
}

:root.light-theme {
  color-scheme:light;
  color:#26292f;
  --status-color:#eef0f3;
  --paper:#f0f1f4;
  --surface:#fff;
  --ink:#23252b;
  --muted:#525762;
  --divider:#cfd2da;
  --control:#e5e8ee;
  background:var(--status-bar-fade,none),
    radial-gradient(ellipse at 34% 12%,#fff,transparent 68%),
    repeating-linear-gradient(102deg,#434a5610 0 1px,transparent 1px 4px),
    linear-gradient(90deg,#e1e4e9,#f6f7f9 50%,#e1e4e9) var(--status-color);
}
.light-theme #instrument {box-shadow:inset 0 -20px 28px -16px #464f611f}
.light-theme #keyboard.both:not(.tablet) {background:linear-gradient(90deg,transparent calc(50% - 2px),#9ba1ae 50%,transparent calc(50% + 2px))}
.light-theme .gear,.light-theme #settings .close {
  color:var(--ink);
  border-color:#a6acb8;
  background:linear-gradient(150deg,#ffffffd9,#d1d6e38c);
  box-shadow:inset 0 1px 2px #fff,0 3px 10px #26314326;
}
.light-theme .gear:active,.light-theme #settings .close:active {background:#d7dce6}
.light-theme #settings,.light-theme #toast {
  color:var(--ink);
  background:var(--paper);
  border-color:var(--divider);
  box-shadow:0 18px 65px #2631434d;
}
.light-theme #settings::backdrop {background:#29354c42}
.light-theme #settings .dialoghead {background:#f3f5f8db;border-bottom-color:var(--divider)}
.light-theme #settings section,.light-theme #settings select option {background:var(--surface);color:var(--ink)}
.light-theme #settings .settingline + .settingline {border-top-color:var(--divider)}
.light-theme #settings select,.light-theme #settings .section-title,
.light-theme #settings .hint,.light-theme #settings .settingline strong,
.light-theme #settings .settings-foot,.light-theme #settings .settings-foot button,
.light-theme #settings .install-help p {color:var(--muted)}
.light-theme #settings .settingline:has(>select)::after {border-color:var(--muted)}
.light-theme #settings .segmented,.light-theme #settings .wide,
.light-theme #settings .install-help {background:var(--control);color:var(--ink);border-color:var(--divider)}
.light-theme #settings .segmented span {color:var(--muted)}
.light-theme #settings .segmented input:checked + span {
  color:var(--ink);
  background:var(--surface);
  box-shadow:0 1px 3px #26314336;
}
.light-theme #settings .switch:not(:checked) {background:#b2b7c2}
.light-theme #settings .range {accent-color:#3c4656}
.light-theme #settings .wide:active:not(:disabled) {background:#cdd3de}
.light-theme #settings .wide:disabled {color:#626976}
.light-theme #settings-open:focus-visible,.light-theme #settings :focus-visible,
.light-theme #settings .segmented input:focus-visible + span {outline-color:#667181}
.light-theme #staff-panel:not([hidden]) {background:#ffffffa6;border-color:#aeb5c1}
.light-theme .staff-lines {stroke:#7a8290}
.light-theme .staff-clef,.light-theme #practice-status {color:var(--ink)}
.light-theme .staff-notes {fill:#8b4a08}
.light-theme .staff-notes .ledger {stroke:#8b4a08}
.light-theme .staff-keys .staff-key:not(.pressed),
.light-theme #tonic-hold:not([aria-pressed=true]),
.light-theme #practice button:not([aria-pressed=true]),.light-theme #practice select {
  background:linear-gradient(#fff,#dce1e9);
  color:var(--ink);
  border-color:#a0a8b7;
  box-shadow:0 1px 3px #26314326;
}
.light-theme #chord-circle {
  background:radial-gradient(circle,#e5e8ee 0 48%,#a7b0c1 49%,#f3f5f8 50%);
}
.light-theme #chord-circle.sectors {background:#adb6c7}
.light-theme #chord-circle .circle-key:not(.pressed,.study-lit,.study-root) {
  background:linear-gradient(150deg,#fff,#d6dce7);
  color:var(--ink);
  border-color:#a0a8b7;
}
.light-theme #chord-circle .circle-key.minor:not(.pressed,.study-lit,.study-root) {
  background:linear-gradient(150deg,#eef2f8,#c5cddd);
}
.light-theme .glass-keys .staff-keys .staff-key:not(.pressed),
.light-theme .glass-keys #tonic-hold:not([aria-pressed=true]),
.light-theme .glass-keys #practice button:not([aria-pressed=true]),
.light-theme .glass-keys #chord-circle .circle-key:not(.pressed,.study-lit,.study-root) {
  background:var(--light-glass);
  box-shadow:var(--glass-rim);
}