:root{--ui-scale: 1;--stage-scale: 1;--shell-scale: 1;--overlay-scale: 1;--notation-zoom: 1;color-scheme:light;font-family:Georgia,Times New Roman,serif;line-height:1.5;color:#1f1d1b;background:#f7f1e4}*{box-sizing:border-box}body{margin:0;min-height:100vh;overflow:hidden}#app{min-height:100vh}.stage-shell{position:fixed;inset:0;padding:calc(2px * var(--shell-scale)) calc(5px * var(--shell-scale));display:grid;place-items:center;overflow:auto;pointer-events:auto}.layout{width:min(calc(1280px * var(--ui-scale)),100%);height:min(calc(720px * var(--ui-scale)),100%);min-width:0;min-height:0;display:flex;gap:calc(2px * var(--ui-scale));flex-direction:column;position:relative;pointer-events:auto;font-size:calc(1rem * var(--ui-scale))}.toolbar{width:100%;margin:0;padding:calc(12px * var(--ui-scale)) calc(14px * var(--ui-scale));display:flex;overflow:hidden;gap:calc(12px * var(--ui-scale));text-align:center;align-items:center;justify-content:space-between;border:1px solid rgba(70,52,28,.12);border-radius:calc(16px * var(--ui-scale));background:#fffdf7e0;box-shadow:0 12px 30px #46341c0f}.toolbar>*{min-width:0}.toolbar-actions{display:flex;gap:calc(10px * var(--ui-scale));align-items:center}.toolbar-button{padding:calc(8px * var(--ui-scale)) calc(12px * var(--ui-scale));border:1px solid rgba(70,52,28,.18);border-radius:calc(10px * var(--ui-scale));background:#fffdf7;color:#3e2f1c;font:inherit;cursor:pointer}.toolbar-button:hover{background:#f5ede0}.toolbar-button.is-coachmark-highlighted{position:relative;z-index:4;box-shadow:0 0 0 calc(4px * var(--ui-scale)) #fff4cceb,0 calc(10px * var(--ui-scale)) calc(24px * var(--ui-scale)) #1f1d1b38}.status-pill{padding:calc(8px * var(--ui-scale)) calc(12px * var(--ui-scale));border-radius:999px;background:#46341c14;color:#5b4931;font-size:.9em}.practice-area{--keyboard-white-key-width: calc(18px * var(--ui-scale));--keyboard-white-key-height: calc(120px * var(--ui-scale));--keyboard-black-key-width: calc(11px * var(--ui-scale));--keyboard-black-key-height: calc(72px * var(--ui-scale));width:100%;margin:0;display:flex;flex:1 1 auto;gap:calc(2px * var(--ui-scale));flex-direction:column;min-height:0}.practice-area[data-exercise-visible=false] .keyboard-display:not([hidden]){flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center}.practice-area[data-exercise-visible=false]{--keyboard-white-key-width: calc(21px * var(--ui-scale));--keyboard-white-key-height: calc(138px * var(--ui-scale));--keyboard-black-key-width: calc(13px * var(--ui-scale));--keyboard-black-key-height: calc(84px * var(--ui-scale))}.midi-picker{display:inline-flex;gap:calc(10px * var(--ui-scale));align-items:center;font-size:.95em;color:#5b4931}.midi-picker select{font:inherit;width:calc(220px * var(--ui-scale));padding:calc(8px * var(--ui-scale)) calc(10px * var(--ui-scale));border:1px solid rgba(70,52,28,.2);border-radius:calc(10px * var(--ui-scale));background:#fffdf7;color:#1f1d1b;text-overflow:ellipsis}.attempt-window-picker{display:inline-flex;gap:calc(8px * var(--ui-scale));align-items:center;font-size:.95em;color:#5b4931}.octave-offset-picker{display:inline-flex;gap:calc(10px * var(--ui-scale));align-items:center;font-size:.95em;color:#5b4931}.octave-offset-controls{display:inline-flex;gap:calc(6px * var(--ui-scale));align-items:center}.octave-offset-controls .toolbar-button{min-width:calc(34px * var(--ui-scale));padding-inline:calc(10px * var(--ui-scale))}.octave-offset-value{min-width:calc(28px * var(--ui-scale));text-align:center;font-variant-numeric:tabular-nums;color:#3e2f1c}.attempt-window-picker input{width:calc(45px * var(--ui-scale));padding:calc(8px * var(--ui-scale)) calc(10px * var(--ui-scale));border:1px solid rgba(70,52,28,.2);border-radius:calc(10px * var(--ui-scale));background:#fffdf7;color:#1f1d1b;font:inherit;appearance:textfield;-moz-appearance:textfield}.attempt-window-picker input::-webkit-outer-spin-button,.attempt-window-picker input::-webkit-inner-spin-button{-webkit-appearance:none}.midi-debug{position:fixed;right:calc(20px * var(--overlay-scale));bottom:calc(20px * var(--overlay-scale));width:min(calc(360px * var(--overlay-scale)),calc(100vw - 40px));max-height:min(calc(420px * var(--overlay-scale)),42vh);overflow:auto;padding:calc(12px * var(--overlay-scale)) calc(14px * var(--overlay-scale));white-space:pre-wrap;border:1px solid rgba(70,52,28,.12);border-radius:calc(12px * var(--overlay-scale));background:#fffdf7b3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#5b4931;font-family:Courier New,Courier,monospace;font-size:calc(.9rem * var(--overlay-scale));line-height:1.45;box-shadow:0 18px 40px #46341c1f;z-index:2}.midi-debug-controls{margin-bottom:calc(10px * var(--overlay-scale))}.midi-debug-button{padding:calc(6px * var(--overlay-scale)) calc(10px * var(--overlay-scale));border:1px solid rgba(70,52,28,.18);border-radius:calc(10px * var(--overlay-scale));background:#fffdf7;color:#3e2f1c;font:inherit;cursor:pointer}.midi-debug-button:hover{background:#f5ede0}.midi-debug-content{margin:0;white-space:pre-wrap;font:inherit;line-height:inherit}.midi-debug[hidden]{display:none}.exercise-notice{position:absolute;top:calc(16px * var(--ui-scale));left:calc(18px * var(--ui-scale));z-index:2}.exercise-notice[hidden]{display:none}.exercise-notice[data-interactive=true]{pointer-events:auto}.exercise-summary{position:absolute;left:calc(18px * var(--ui-scale));bottom:calc(16px * var(--ui-scale));z-index:2;pointer-events:none}.exercise-summary[hidden]{display:none}.exercise-summary-chip{display:inline-block;padding:calc(6px * var(--ui-scale)) calc(10px * var(--ui-scale));border:1px solid rgba(70,52,28,.12);border-radius:999px;background:#fffdf7e6;color:#6c5840;font-size:.8em;line-height:1;box-shadow:0 calc(8px * var(--ui-scale)) calc(20px * var(--ui-scale)) #46341c0a}.exercise-notice-chip,.exercise-notice-button{padding:calc(8px * var(--ui-scale)) calc(12px * var(--ui-scale));border:1px solid rgba(166,64,31,.22);border-radius:999px;background:#fff4eaf5;color:#7c4a28;font-size:.86em;line-height:1;box-shadow:0 calc(8px * var(--ui-scale)) calc(20px * var(--ui-scale)) #46341c0d}.exercise-notice-chip{display:inline-block}.exercise-notice-button:hover{background:#ffefdffa}.exercise-notice-button{display:inline-flex;align-items:center;gap:calc(8px * var(--ui-scale));font:inherit;cursor:pointer;text-align:left;flex-wrap:wrap}.exercise-notice-button-primary{display:inline-block}.exercise-notice-button-action{display:inline-block;padding:calc(3px * var(--ui-scale)) calc(7px * var(--ui-scale));border-radius:999px;background:#a6401f1f;color:#8a4d26;font-size:.74em;line-height:1;letter-spacing:.02em}.exercise-notice-button:focus-visible{outline:2px solid rgba(166,64,31,.35);outline-offset:calc(2px * var(--ui-scale))}.input-name-display{position:relative;padding:calc(12px * var(--ui-scale)) calc(14px * var(--ui-scale));min-height:calc(103px * var(--ui-scale));display:flex;flex-direction:column;border:1px solid rgba(70,52,28,.12);border-radius:calc(12px * var(--ui-scale));background:#fffdf7d1;box-shadow:0 calc(10px * var(--ui-scale)) calc(24px * var(--ui-scale)) #46341c0f}.input-name-display[hidden]{display:none}.input-name-content-host{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}.panel-popout-buttons{position:absolute;top:calc(10px * var(--ui-scale));right:calc(12px * var(--ui-scale));z-index:1;display:flex;gap:calc(6px * var(--ui-scale));flex-direction:column;align-items:flex-end}.panel-popout-button{padding:calc(5px * var(--ui-scale)) calc(9px * var(--ui-scale));border:1px solid rgba(166,64,31,.18);border-radius:999px;background:#fff4eaf5;color:#7a3f1f;font:inherit;font-size:.76em;line-height:1;cursor:pointer}.panel-popout-button:hover{background:#ffefdffa}.panel-popout-button-secondary{border-color:#5b493124;background:#fffaf1f5;color:#6c5840;font-size:.72em}.panel-popout-button-secondary:hover{background:#faf3e7fa}.panel-popout-button:focus-visible{outline:2px solid rgba(166,64,31,.35);outline-offset:calc(2px * var(--ui-scale))}.input-name-content-wrap,.input-name-status-wrap{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center}.input-name-content-wrap[hidden],.input-name-status-wrap[hidden]{display:none}.input-name-content-wrap{gap:calc(2px * var(--ui-scale))}.input-name-status-wrap .input-name-note-list:empty{display:none}.input-name-longhand,.input-name-note-list,.input-name-separator,.input-name-status{margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.input-name-note-list{color:#5c4932;font-size:.88em;letter-spacing:.03em}.input-name-reading-row{display:flex;flex-wrap:wrap;gap:calc(6px * var(--ui-scale))}.input-name-pill{padding:calc(4px * var(--ui-scale)) calc(9px * var(--ui-scale));border-radius:999px;border:1px solid rgba(70,52,28,.12);background:#fffcf6f5;color:#453423;font:inherit;font-size:.9em;line-height:1.1;cursor:default}.input-name-pill-primary{border-color:#a6401f3d;background:#fff4eaf5;color:#7a3f1f;font-weight:700}.input-name-pill-alternate{color:#6b5840;font-weight:500}.input-name-naming-note-badge{display:inline-flex;align-items:center;justify-content:center;padding:calc(2px * var(--ui-scale)) calc(6px * var(--ui-scale));border-radius:999px;background:#d2c4ac52;color:#7a6548;font-size:.68em;line-height:1;letter-spacing:.04em;text-transform:lowercase;white-space:nowrap;vertical-align:middle}.input-name-separator{color:#b2a084;font-size:.8em}.input-name-status,.input-name-longhand{color:#6c5840;font-size:.86em}.notation{position:relative;flex:1 1 auto;min-height:0;padding:calc(16px * var(--ui-scale)) calc(18px * var(--ui-scale));display:flex;flex-direction:column;border:1px solid rgba(70,52,28,.12);border-radius:calc(16px * var(--ui-scale));background:#fffdf7;box-shadow:0 calc(18px * var(--ui-scale)) calc(40px * var(--ui-scale)) #46341c14}.notation[hidden]{display:none}.notation-canvas{flex:1 1 auto;width:100%;min-height:0;overflow-x:hidden;overflow-y:hidden;display:flex;align-items:center;justify-content:center}.notation-canvas svg{display:block;max-width:100%;height:auto}.notation-loading{margin:0;color:#7b6545;font-size:.95em;letter-spacing:.01em}.current-prompt-wiggle{transform-box:fill-box;transform-origin:center center;animation:current-prompt-wiggle .13s ease}.keyboard-display{position:relative;flex:0 0 auto;padding:calc(14px * var(--ui-scale)) calc(16px * var(--ui-scale)) calc(14px * var(--ui-scale));overflow-x:auto;border:1px solid rgba(70,52,28,.12);border-radius:calc(16px * var(--ui-scale));background:#fffdf7;box-shadow:0 calc(18px * var(--ui-scale)) calc(40px * var(--ui-scale)) #46341c14}.keyboard-display[hidden]{display:none}.keyboard-frame{width:fit-content;max-width:100%;position:relative;margin:0 auto}.keyboard{position:relative;width:calc(52 * var(--keyboard-white-key-width));height:var(--keyboard-white-key-height);margin:0}.keyboard-white-keys{display:flex;height:100%}.keyboard-black-keys{position:absolute;inset:0;pointer-events:none}.keyboard-key{position:relative;border:1px solid rgba(70,52,28,.18);border-radius:0 0 calc(4px * var(--ui-scale)) calc(4px * var(--ui-scale));transition:background-color .12s ease,box-shadow .12s ease,border-color .12s ease}.keyboard-key-white{width:var(--keyboard-white-key-width);height:var(--keyboard-white-key-height);background:linear-gradient(180deg,#fffef9,#f4ead8);border-right:0}.keyboard-white-keys>.keyboard-key-white:last-child{border-right:1px solid rgba(70,52,28,.14)}.keyboard-key-black{position:absolute;width:var(--keyboard-black-key-width);height:var(--keyboard-black-key-height);background:linear-gradient(180deg,#49382a,#2c2119);border-color:#1f1d1b66;box-shadow:0 calc(4px * var(--ui-scale)) calc(10px * var(--ui-scale)) #1f1d1b2e;z-index:1}.keyboard-key.is-active.keyboard-key-white{background:linear-gradient(180deg,#f7cdb2,#df8d58);border-color:#a6401f8c;box-shadow:inset 0 0 0 1px #fffdf74d}.keyboard-key.is-active.keyboard-key-black{background:linear-gradient(180deg,#d77f53,#a6401f);border-color:#a6401fbf;box-shadow:0 calc(4px * var(--ui-scale)) calc(10px * var(--ui-scale)) #a6401f3d}.keyboard-key.is-held:not(.is-active).keyboard-key-white{background:linear-gradient(180deg,#f0f7ff,#c6daee);border-color:#4c75a366}.keyboard-key.is-held:not(.is-active).keyboard-key-black{background:linear-gradient(180deg,#6b7f98,#45556c);border-color:#4c75a380}.keyboard-key-label{position:absolute;left:50%;bottom:calc(6px * var(--ui-scale));transform:translate(-50%);color:#5b4931b3;font-size:.72em}.settings-coachmark-overlay{position:fixed;inset:0;background:#1f1d1b2e;z-index:2}.settings-coachmark-callout{--settings-coachmark-arrow-left: calc(28px * var(--overlay-scale));position:fixed;width:min(calc(420px * var(--overlay-scale)),calc(100vw - 32px));padding:calc(14px * var(--overlay-scale)) calc(16px * var(--overlay-scale));border:1px solid rgba(70,52,28,.16);border-radius:calc(14px * var(--overlay-scale));background:#fffaf1;color:#3e2f1c;box-shadow:0 calc(18px * var(--overlay-scale)) calc(40px * var(--overlay-scale)) #1f1d1b2e;font-size:calc(.98rem * var(--overlay-scale));line-height:1.45;z-index:3}.settings-coachmark-callout:before{content:"";position:absolute;top:calc(-8px * var(--overlay-scale));left:var(--settings-coachmark-arrow-left);width:calc(16px * var(--overlay-scale));height:calc(16px * var(--overlay-scale));background:#fffaf1;border-left:1px solid rgba(70,52,28,.16);border-top:1px solid rgba(70,52,28,.16);transform:rotate(45deg)}.settings-coachmark-callout>ol>li+li{margin-top:calc(4px * var(--ui-scale))}.settings-coachmark-actions{display:flex;justify-content:center}.settings-backdrop{position:fixed;inset:0;background:#1f1d1b47}#settings-coachmark-guide-button{font-size:2em}.settings-coachmark-overlay[hidden],.settings-coachmark-callout[hidden],.settings-backdrop[hidden],.settings-field[hidden]{display:none}.settings-drawer{position:fixed;overflow-y:hidden;top:0;right:0;width:min(calc(360px * var(--overlay-scale)),100vw);height:100vh;padding:calc(22px * var(--overlay-scale)) calc(20px * var(--overlay-scale));font-size:calc(1rem * var(--overlay-scale));display:flex;gap:calc(12px * var(--overlay-scale));flex-direction:column;border-left:1px solid rgba(70,52,28,.12);background:#fffaf1;box-shadow:-12px 0 40px #46341c1f;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .14s ease,visibility 0s linear .14s;z-index:3}.settings-drawer.is-open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .14s ease,visibility 0s linear 0s}.settings-backdrop.is-open{z-index:1}.settings-header{display:flex;align-items:center;justify-content:space-between;gap:calc(12px * var(--overlay-scale))}.settings-header h2,.settings-section h3{margin:0}.settings-top-grid{display:grid;gap:calc(16px * var(--overlay-scale));grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.settings-section{display:flex;gap:calc(12px * var(--overlay-scale));flex-direction:column}.settings-field{display:flex;gap:calc(0px * var(--overlay-scale));flex-direction:column;color:#5b4931}.settings-field select{padding:calc(8px * var(--overlay-scale)) calc(10px * var(--overlay-scale));border:1px solid rgba(70,52,28,.18);border-radius:calc(10px * var(--overlay-scale));background:#fffdf7;color:#1f1d1b;font:inherit}.settings-toggle{display:flex;gap:calc(09px * var(--overlay-scale));align-items:center;color:#5b4931}.settings-toggle input{width:calc(16px * var(--overlay-scale));height:calc(16px * var(--overlay-scale));margin:0;accent-color:#a6401f;flex:0 0 auto}.settings-actions{display:flex;gap:calc(10px * var(--overlay-scale));flex-direction:column;text-align:center}.settings-action-button{width:100%;padding:calc(2px * var(--overlay-scale)) calc(8px * var(--overlay-scale));border-radius:calc(8px * var(--overlay-scale));font-size:.9em;justify-content:center}@keyframes current-prompt-wiggle{0%{transform:translate(0)}20%{transform:translate(calc(-3px * var(--ui-scale)))}50%{transform:translate(calc(2px * var(--ui-scale)))}to{transform:translate(0)}}@media(orientation:portrait){body.grand-staff-trainer-app .settings-coachmark-callout:before{display:none}body.grand-staff-trainer-app .settings-coachmark-callout>ol>li+li{margin-top:calc(4px * var(--portrait-ui-scale))}body.grand-staff-trainer-app .settings-coachmark-callout{width:min(calc(420px * var(--portrait-ui-scale)),calc(100vw - 16px));max-width:calc(100vw - 16px);padding:calc(12px * var(--portrait-ui-scale)) calc(14px * var(--portrait-ui-scale));border-radius:calc(14px * var(--portrait-ui-scale));font-size:calc(.83rem * var(--portrait-ui-scale));text-align:left;transform:translate(-50%)}body.grand-staff-trainer-app .toolbar-button.is-coachmark-highlighted{position:relative;z-index:4;box-shadow:0 0 0 calc(4px * var(--portrait-ui-scale)) #fff4cceb,0 calc(10px * var(--portrait-ui-scale)) calc(24px * var(--portrait-ui-scale)) #1f1d1b38}body.grand-staff-trainer-app body{overflow-y:auto;overflow-x:hidden}body.grand-staff-trainer-app .stage-shell{position:static;inset:auto;place-items:start center;min-height:100svh;padding:calc(2px * var(--shell-scale)) calc(4px * var(--shell-scale))}body.grand-staff-trainer-app .layout{height:100%;gap:calc(1px * var(--portrait-ui-scale))}body.grand-staff-trainer-app .toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(calc(30px * var(--portrait-ui-scale)),5dvh);align-items:stretch;gap:calc(2px * var(--portrait-ui-scale));font-size:calc(.6rem * var(--portrait-ui-scale))}body.grand-staff-trainer-app .toolbar-actions{grid-column:1 / -1;gap:calc(3px * var(--portrait-ui-scale))}body.grand-staff-trainer-app .midi-picker,body.grand-staff-trainer-app .attempt-window-picker,body.grand-staff-trainer-app .octave-offset-picker,body.grand-staff-trainer-app .status-pill{min-height:calc(30px * var(--portrait-ui-scale))}body.grand-staff-trainer-app .toolbar-button{flex:1 1 0;padding:calc(20px * var(--overlay-scale))}body.grand-staff-trainer-app .toolbar-button{min-height:calc(30px * var(--portrait-ui-scale))}body.grand-staff-trainer-app .settings-drawer{width:96vw;height:auto;max-height:calc(100dvh - 12px);overflow-y:auto;left:50%;top:50%;transform:translate(-50%,-50%);padding:calc(5px * var(--portrait-ui-scale));gap:calc(12px * var(--portrait-ui-scale));font-size:calc(1rem * var(--portrait-ui-scale));z-index:4}body.grand-staff-trainer-app .settings-backdrop.is-open{z-index:3}body.grand-staff-trainer-app .settings-drawer input[type=checkbox]{width:calc(1em * var(--portrait-ui-scale));height:calc(1em * var(--portrait-ui-scale))}body.grand-staff-trainer-app .settings-section>.settings-toggle+.settings-toggle{margin-top:calc(6px * var(--portrait-ui-scale))}body.grand-staff-trainer-app .settings-toggle{font-size:calc(1.1rem * var(--portrait-ui-scale))}body.grand-staff-trainer-app .octave-offset-picker{gap:calc(6px * var(--portrait-ui-scale));width:100%}body.grand-staff-trainer-app .octave-offset-picker>span:first-of-type{flex:1 1 auto}body.grand-staff-trainer-app .octave-offset-controls{gap:0px;flex:1 1 auto}body.grand-staff-trainer-app .octave-offset-controls .toolbar-button{min-width:calc(25px * var(--portrait-ui-scale));padding:calc(4px * var(--portrait-ui-scale)) calc(8px * var(--portrait-ui-scale))}body.grand-staff-trainer-app .octave-offset-value{min-width:calc(19px * var(--portrait-ui-scale))}body.grand-staff-trainer-app .settings-action-button{padding:calc(5px * var(--portrait-ui-scale))}body.grand-staff-trainer-app .midi-picker,body.grand-staff-trainer-app .attempt-window-picker,body.grand-staff-trainer-app .status-pill{min-height:calc(30px * var(--portrait-ui-scale))}body.grand-staff-trainer-app .midi-picker select{min-width:85px;width:100%}body.grand-staff-trainer-app .midi-picker select,body.grand-staff-trainer-app .attempt-window-picker input{padding:calc(6px * var(--portrait-ui-scale))}body.grand-staff-trainer-app .attempt-window-picker{justify-self:center}body.grand-staff-trainer-app .attempt-window-picker input{width:calc(35px * var(--portrait-ui-scale));min-width:28px}body.grand-staff-trainer-app .status-pill{width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;text-overflow:ellipsis}body.grand-staff-trainer-app .practice-area{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}body.grand-staff-trainer-app .input-name-content-host,body.grand-staff-trainer-app .input-name-content-wrap,body.grand-staff-trainer-app .input-name-status-wrap{flex:0 0 auto;align-items:center;text-align:center}body.grand-staff-trainer-app .input-name-display{flex:1 1 0;padding-top:calc(25px * var(--ui-scale));justify-content:center;overflow:hidden}body.grand-staff-trainer-app .panel-popout-buttons{font-size:2.5em}body.grand-staff-trainer-app .practice-area{--input-name-font-size: 3.4em}body.grand-staff-trainer-app .practice-area[data-exercise-visible=true][data-keyboard-visible=false],body.grand-staff-trainer-app .practice-area[data-exercise-visible=false][data-keyboard-visible=true]{--input-name-font-size: 4em}body.grand-staff-trainer-app .practice-area[data-exercise-visible=false][data-keyboard-visible=false]{--input-name-font-size: 4.3em}body.grand-staff-trainer-app .input-name-status-wrap{font-size:calc(var(--input-name-font-size) * 1.16)}body.grand-staff-trainer-app .input-name-content-wrap{font-size:var(--input-name-font-size)}body.grand-staff-trainer-app .notation{flex:2 1 0;font-size:3em}body.grand-staff-trainer-app .notation-canvas{justify-content:flex-start;overflow-x:hidden;overflow-y:hidden}body.grand-staff-trainer-app .notation-canvas svg{max-width:none;width:calc(100% * var(--notation-zoom));flex:0 0 auto}body.grand-staff-trainer-app .keyboard-display{flex:1 1 0;display:flex;justify-content:center;align-items:center}body.grand-staff-trainer-app .keyboard-display[hidden]{display:none}}