:root{
  --bg:#090d14;--panel:#111925;--panel2:#172232;--panel3:#1c2a3d;--line:#28374b;
  --ink:#eef4fb;--muted:#8d9caf;--accent:#79e4bd;--accent2:#8bb8ff;--bad:#ff7188;
  --warn:#ffd37b;--shadow:0 10px 28px rgba(0,0,0,.22);--safe-bottom:env(safe-area-inset-bottom);
  --prompt-scale:1;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;touch-action:manipulation}
button,input,select{font:inherit;color:inherit}button{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
input,select{font-size:16px}
#app{height:100dvh;display:flex;flex-direction:column;overflow:hidden;padding-bottom:var(--safe-bottom)}
.app-header{flex:none;height:calc(45px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 9px 0;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:7px;border-bottom:1px solid var(--line);background:rgba(9,13,20,.96)}
.brand{display:grid;line-height:1}.brand small{font-size:7px;letter-spacing:.16em;color:var(--muted)}.brand strong{font-size:14px;margin-top:3px}
.header-status{font-size:9px;font-weight:800;color:var(--muted);letter-spacing:.08em}.header-status.live{color:var(--accent)}
.audio-button{height:30px;min-width:48px;border:1px solid var(--line);border-radius:9px;background:var(--panel);font-size:10px;font-weight:800}.audio-button.on{border-color:#3b8069;color:var(--accent)}
main{flex:1;min-height:0;overflow:hidden;width:100%;max-width:720px;margin:0 auto;padding:6px 8px}
.bottom-nav{flex:none;height:52px;display:grid;grid-template-columns:repeat(5,1fr);gap:3px;padding:4px 6px;border-top:1px solid var(--line);background:#0d131d}
.bottom-nav button{border:0;border-radius:10px;background:transparent;color:var(--muted);display:grid;place-items:center;align-content:center;gap:2px;font-size:8px;font-weight:800}.bottom-nav button b{font-size:16px;line-height:1}.bottom-nav button.active{background:var(--panel2);color:var(--ink)}
.page{height:100%;min-height:0;overflow:hidden;display:grid;gap:6px}.muted{color:var(--muted)}
.mode-strip,.segmented{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;height:34px}
.mode-strip button,.segmented button{border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--muted);font-size:9px;font-weight:850;white-space:nowrap}.mode-strip button.active,.segmented button.active{background:var(--ink);border-color:var(--ink);color:#091018}
.problem-panel{position:relative;min-height:112px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(145deg,#141d2a,#0e151f);box-shadow:var(--shadow);padding:8px;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden}
.problem-top{display:grid;grid-template-columns:1fr auto;align-items:center;gap:7px}.mini-stats{display:flex;gap:8px;color:var(--muted);font-size:9px}.mini-stats b{color:var(--ink)}
.sound-tools{display:flex;gap:4px}.sound-tools button{height:26px;min-width:42px;border:1px solid var(--line);border-radius:8px;background:var(--panel2);font-size:9px;font-weight:800}
.problem-center{display:grid;place-items:center;text-align:center;min-height:0}.prompt{font-size:calc(14px * var(--prompt-scale));font-weight:820;line-height:1.2}.prompt-sub{display:block;margin-top:5px;font-size:9px;color:var(--muted);font-weight:600}.start-button{height:42px;min-width:150px;border:0;border-radius:12px;background:var(--accent);color:#07150f;font-weight:900;font-size:13px}
.problem-bottom{min-height:18px;display:flex;align-items:center;justify-content:space-between;gap:6px;color:var(--muted);font-size:8px}.range-warning{display:flex;align-items:center;justify-content:space-between;gap:7px;width:100%;padding:3px 6px;border-radius:7px;background:rgba(255,211,123,.10);color:var(--warn)}.range-warning button{height:24px;border:1px solid rgba(255,211,123,.4);border-radius:7px;background:transparent;color:var(--warn);font-size:8px;font-weight:800}
.feedback-overlay{position:absolute;inset:0;display:grid;place-items:center;align-content:center;background:rgba(7,11,17,.38);backdrop-filter:blur(1.5px);opacity:0;transform:scale(.9);pointer-events:none;transition:opacity .07s,transform .08s;z-index:5}.feedback-overlay.on{opacity:1;transform:scale(1)}.feedback-mark{font-size:72px;font-weight:250;line-height:.9;text-shadow:0 5px 24px rgba(0,0,0,.5)}.feedback-overlay.good .feedback-mark{color:var(--accent)}.feedback-overlay.bad .feedback-mark{color:var(--bad)}.feedback-answer{margin-top:7px;font-size:12px;font-weight:800;color:var(--ink)}
.answer-zone{min-height:0;overflow:hidden}
.choice-grid{height:100%;display:grid;grid-template-columns:1fr 1fr;gap:7px}.answer-button{border:1px solid var(--line);border-radius:15px;background:linear-gradient(160deg,var(--panel2),var(--panel));font-size:calc(17px * var(--prompt-scale));font-weight:900;box-shadow:0 7px 18px rgba(0,0,0,.18)}.answer-button:active{transform:scale(.985);background:var(--panel3)}
.interval-grid{height:100%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:6px}.interval-grid .answer-button{font-size:calc(12px * var(--prompt-scale));padding:6px}.interval-grid small{display:block;margin-top:3px;color:var(--muted);font-size:8px}
.keypad-wrap{height:100%;display:grid;grid-template-rows:minmax(0,1fr) 32px;gap:5px}.phone-keypad{min-height:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);gap:5px}.pitch-key{position:relative;min-height:0;border:1px solid var(--line);border-radius:11px;background:linear-gradient(150deg,var(--panel2),#101925);overflow:hidden;font-weight:900}.pitch-key b{font-size:calc(13px * var(--prompt-scale));display:block;line-height:1}.pitch-key small{display:block;margin-top:3px;font-size:7px;color:var(--muted)}.pitch-key .flick-hint{position:absolute;right:5px;top:3px;font-size:7px;color:#718198}.pitch-key.on{border-color:var(--accent2);background:#1a2d45}.pitch-key.flick-up::after,.pitch-key.flick-down::after{position:absolute;inset:0;display:grid;place-items:center;background:rgba(11,19,29,.86);font-size:22px;color:var(--accent2);font-weight:900}.pitch-key.flick-up::after{content:'♯ ↑'}.pitch-key.flick-down::after{content:'♭ ↓'}
.keypad-tools{display:grid;grid-template-columns:1fr 1fr 1.35fr;gap:5px}.keypad-tools button{border:1px solid var(--line);border-radius:9px;background:var(--panel);font-size:8px;font-weight:850}.keypad-tools .reset{color:var(--accent);border-color:#356d5b}
.piano-wrap{height:100%;overflow-x:auto;overflow-y:hidden;border:1px solid var(--line);border-radius:13px;background:#0d131c;overscroll-behavior-x:contain;touch-action:pan-x}.piano{position:relative;height:100%;min-height:160px}.white-key,.black-key{position:absolute;bottom:0;border:1px solid #adb5bf;border-radius:0 0 7px 7px;padding:0 2px 8px;display:flex;align-items:flex-end;justify-content:center;font-size:7px;font-weight:800;touch-action:pan-x}.white-key{height:100%;background:#e9edf2;color:#1b2735;z-index:1}.black-key{height:61%;background:#17202b;color:#eef4fb;border-color:#05080c;z-index:2}.white-key.on,.black-key.on{filter:brightness(.78);outline:2px solid var(--accent2);outline-offset:-2px}
.theory-page{grid-template-rows:34px 34px minmax(0,1fr) 34px}.study-tools{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:5px}.study-tools input{min-width:0;height:34px;border:1px solid var(--line);border-radius:9px;background:var(--panel);padding:0 9px;color:var(--ink)}.study-tools button{height:34px;border:1px solid var(--line);border-radius:9px;background:var(--panel);font-size:9px;font-weight:850}
.study-card{min-height:0;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:linear-gradient(150deg,var(--panel2),var(--panel));padding:12px;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:7px}.study-meta{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:8px}.study-title{font-size:calc(20px * var(--prompt-scale));font-weight:900;line-height:1.1}.study-body{min-height:0;overflow:auto;overscroll-behavior:contain;font-size:calc(12px * var(--prompt-scale));line-height:1.55;color:#dce5ef}.study-body p{margin:0 0 8px}.formula{display:flex;flex-wrap:wrap;gap:5px;margin:7px 0}.formula span{padding:4px 7px;border:1px solid var(--line);border-radius:999px;background:#0f1722;font-size:10px;font-weight:800}.study-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px}.study-actions button,.study-footer button{border:1px solid var(--line);border-radius:9px;background:var(--panel);font-size:9px;font-weight:850}.study-actions button.on{color:var(--accent);border-color:#3d7b67}.study-footer{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px}.study-footer button{height:34px}.search-results{position:absolute;left:8px;right:8px;top:76px;bottom:48px;z-index:8;border:1px solid var(--line);border-radius:12px;background:#0d141e;box-shadow:var(--shadow);overflow:auto;padding:5px}.search-results button{width:100%;min-height:38px;border:0;border-bottom:1px solid var(--line);background:transparent;text-align:left;font-size:10px}.search-results small{display:block;color:var(--muted);font-size:8px;margin-top:2px}
.test-page{grid-template-rows:34px minmax(0,1fr) minmax(142px,35%)}.test-card{position:relative;min-height:0;border:1px solid var(--line);border-radius:14px;background:linear-gradient(150deg,var(--panel2),var(--panel));padding:12px;display:grid;place-items:center;text-align:center;overflow:hidden}.test-question{font-size:calc(15px * var(--prompt-scale));font-weight:850;line-height:1.45}.test-question small{display:block;margin-bottom:7px;color:var(--muted);font-size:8px;letter-spacing:.09em}.test-choices{min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:6px}.test-choices button{min-height:0;border:1px solid var(--line);border-radius:11px;background:var(--panel2);font-size:calc(10px * var(--prompt-scale));font-weight:820;padding:5px;overflow:hidden}.test-choices button:active{transform:scale(.988)}
.history-page{grid-template-rows:64px 34px minmax(0,1fr)}.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.summary-box{border:1px solid var(--line);border-radius:11px;background:var(--panel);display:grid;place-items:center;align-content:center}.summary-box b{font-size:16px}.summary-box small{font-size:7px;color:var(--muted)}.history-list{min-height:0;overflow:auto;overscroll-behavior:contain;border:1px solid var(--line);border-radius:12px;background:var(--panel)}.history-row{min-height:43px;padding:6px 8px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:7px}.history-row .result{font-size:19px;text-align:center}.history-row.good .result{color:var(--accent)}.history-row.bad .result{color:var(--bad)}.history-row b{font-size:10px}.history-row small{display:block;color:var(--muted);font-size:8px;margin-top:2px}.history-row time{font-size:7px;color:var(--muted)}.empty{height:100%;display:grid;place-items:center;color:var(--muted);font-size:10px}.weak-row{grid-template-columns:1fr auto}.weak-meter{width:70px;height:6px;border-radius:999px;background:#283446;overflow:hidden}.weak-meter span{display:block;height:100%;background:var(--bad)}
.settings-page{grid-template-rows:34px minmax(0,1fr)}.settings-panel{min-height:0;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:10px}.settings-section{height:100%;overflow:auto;overscroll-behavior:contain;display:grid;align-content:start;gap:8px}.setting-row{min-height:42px;display:grid;grid-template-columns:minmax(0,1fr) minmax(110px,46%);align-items:center;gap:9px;border-bottom:1px solid var(--line);padding:5px 0}.setting-row label,.setting-row>span{font-size:10px;font-weight:800}.setting-row small{display:block;color:var(--muted);font-size:7px;margin-top:2px;font-weight:500}.setting-row input[type=range]{width:100%}.setting-row select{width:100%;height:34px;border:1px solid var(--line);border-radius:9px;background:var(--panel2);padding:0 7px;font-size:10px}.value-chip{justify-self:end;min-width:54px;text-align:center;padding:6px;border-radius:8px;background:var(--panel2);font-size:9px;font-weight:850}.data-buttons{display:grid;grid-template-columns:1fr 1fr;gap:6px}.data-buttons button,.file-button{min-height:38px;border:1px solid var(--line);border-radius:9px;background:var(--panel2);font-size:9px;font-weight:850}.danger{border-color:#7b3543!important;color:#ff91a3!important}.note{font-size:8px;line-height:1.45;color:var(--muted)}
.toast{position:fixed;left:50%;bottom:calc(60px + var(--safe-bottom));z-index:30;transform:translate(-50%,8px);opacity:0;pointer-events:none;background:#f5f8fb;color:#111923;border-radius:999px;padding:7px 11px;font-size:9px;font-weight:800;transition:.12s}.toast.on{opacity:1;transform:translate(-50%,0)}
@media(max-height:650px){
  .app-header{height:calc(41px + env(safe-area-inset-top))}.bottom-nav{height:47px}.bottom-nav button b{font-size:14px}main{padding:4px 6px}.page{gap:4px}.mode-strip,.segmented{height:30px}.problem-panel{min-height:96px;padding:6px}.prompt{font-size:calc(12px * var(--prompt-scale))}.phone-keypad{gap:4px}.pitch-key{border-radius:9px}.keypad-wrap{grid-template-rows:minmax(0,1fr) 29px}.test-page{grid-template-rows:30px minmax(0,1fr) 125px}.theory-page{grid-template-rows:30px 31px minmax(0,1fr) 30px}.study-title{font-size:calc(17px * var(--prompt-scale))}.study-card{padding:9px}.study-footer button{height:30px}.history-page{grid-template-rows:55px 30px minmax(0,1fr)}
}
@media(max-width:340px){.bottom-nav button{font-size:7px}.mode-strip button,.segmented button{font-size:8px}.mini-stats{gap:5px}.sound-tools button{min-width:36px}.pitch-key b{font-size:calc(11px * var(--prompt-scale))}.test-choices button{font-size:calc(9px * var(--prompt-scale))}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
button,nav,[role="button"],.phone-keypad,.piano,.mode-strip,.segmented{-webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important;-webkit-user-drag:none!important}

/* Pitch Flash v0.2 — thumb-first one-screen layout */
.train-page{display:grid;gap:5px;min-height:0;overflow:hidden}
.train-page.choice-layout{grid-template-rows:34px minmax(56px,1fr) 72px 86px}
.train-page.interval-layout{grid-template-rows:34px minmax(44px,1fr) 72px 154px}
.train-page.input-layout{grid-template-rows:34px 42px 68px minmax(0,1fr)}
.session-display{min-height:0;overflow:hidden;display:grid;align-content:end;gap:5px;padding:0 2px}
.session-metrics{min-height:20px;display:flex;align-items:center;gap:9px;color:var(--muted);font-size:8px;white-space:nowrap}
.session-metrics b{color:var(--ink);font-size:10px}
.recent-run{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:3px;min-width:0;overflow:hidden}
.recent-run i{flex:none;width:6px;height:6px;border-radius:50%;background:#3b485b;box-shadow:0 0 0 1px rgba(255,255,255,.03)}
.recent-run i.good{background:var(--accent)}.recent-run i.bad{background:var(--bad)}
.recent-run em{font-style:normal;font-size:7px;color:#6f7d8f}
.hint-lane{height:34px;display:grid;grid-template-columns:39px minmax(112px,220px) minmax(0,1fr);align-items:center;gap:7px;padding:3px 6px;border:1px solid var(--line);border-radius:10px;background:rgba(17,25,37,.72);color:var(--muted);overflow:hidden}
.hint-button{height:25px;border:1px solid #33465d;border-radius:7px;background:#111b28;color:#a7b8cb;font-size:8px;font-weight:900;letter-spacing:.08em}
.hint-keyboard{height:26px;min-width:0;color:var(--accent)}
.hint-lane>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:7px}
.hint-lane.flash{animation:hintPulse .82s ease-out}
.hint-lane.flash .hint-keyboard{filter:drop-shadow(0 0 7px rgba(121,228,189,.55))}
@keyframes hintPulse{0%{border-color:var(--line);background:rgba(17,25,37,.72)}18%{border-color:#5ab998;background:rgba(51,112,92,.28)}55%{border-color:#406f61;background:rgba(34,75,65,.18)}100%{border-color:var(--line);background:rgba(17,25,37,.72)}}
.mini-keyboard-svg{display:block;width:100%;height:100%;max-width:252px;overflow:visible}
.mk-white{fill:#dfe6ed;stroke:#58687b;stroke-width:1}.mk-black{fill:#121923;stroke:#05080d;stroke-width:1}
.mk-white.active{fill:#79e4bd;stroke:#aef4db}.mk-black.active{fill:#54cfa4;stroke:#aef4db}
.keypad-warning-inline{height:34px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:7px;padding:3px 6px;border:1px solid rgba(255,211,123,.3);border-radius:10px;background:rgba(255,211,123,.08);color:var(--warn);font-size:8px}
.keypad-warning-inline button{height:25px;border:1px solid rgba(255,211,123,.4);border-radius:7px;background:transparent;color:var(--warn);font-size:8px;font-weight:850}
.problem-panel{position:relative;min-height:0;border:1px solid var(--line);border-radius:12px;background:linear-gradient(145deg,#141d2a,#0e151f);box-shadow:0 7px 20px rgba(0,0,0,.18);padding:6px 7px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr;align-items:center;gap:6px;overflow:hidden}
.problem-center{display:flex;align-items:center;justify-content:flex-start;text-align:left;min-width:0;height:100%}
.prompt{font-size:calc(12px * var(--prompt-scale));line-height:1.12;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prompt-sub{margin-top:4px;font-size:7px;letter-spacing:.04em}
.problem-actions{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.problem-actions button{height:31px;min-width:47px;border:1px solid var(--line);border-radius:8px;background:var(--panel2);font-size:8px;font-weight:850}
.start-button{height:38px;min-width:138px;border-radius:10px;font-size:12px}
.feedback-overlay{background:rgba(7,11,17,.52);backdrop-filter:blur(1px)}
.feedback-mark{font-size:52px}.feedback-answer{margin-top:4px;font-size:11px;max-width:92%;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.answer-zone{min-height:0;overflow:hidden;display:block}
.choice-grid{height:100%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr;gap:8px}
.interval-grid{height:100%;gap:7px}
.answer-button,.test-choices button{border:1px solid #304158;background:linear-gradient(160deg,#1b293b,#121b28);box-shadow:0 5px 0 #070b11,0 9px 18px rgba(0,0,0,.22);transition:transform .055s ease,box-shadow .055s ease,filter .055s ease}
.answer-button{border-radius:13px;font-size:calc(15px * var(--prompt-scale));padding:7px}
.answer-button.pressed,.answer-button:active,.test-choices button.pressed,.test-choices button:active{transform:translateY(4px) scale(.997);box-shadow:0 1px 0 #070b11,0 3px 7px rgba(0,0,0,.18);filter:brightness(1.08)}
.interval-grid .answer-button{font-size:calc(11px * var(--prompt-scale));border-radius:11px}
.keypad-wrap{height:100%;display:grid;grid-template-rows:minmax(0,1fr) 38px;gap:6px}
.phone-keypad{min-height:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,minmax(0,1fr));gap:7px}
.pitch-key{position:relative;min-width:0;min-height:0;border:1px solid #33475f;border-radius:12px;background:linear-gradient(155deg,#1c2c40,#121b29);box-shadow:0 4px 0 #070b11,0 7px 15px rgba(0,0,0,.18);font-weight:900;transition:transform .045s ease,box-shadow .045s ease,filter .045s ease}
.pitch-key b{font-size:calc(18px * var(--prompt-scale));line-height:1}.pitch-key small{margin-top:5px;font-size:8px}.pitch-key .flick-hint{right:6px;top:5px;font-size:7px}
.pitch-key.on{transform:translateY(3px);box-shadow:0 1px 0 #070b11,0 3px 8px rgba(0,0,0,.16);border-color:var(--accent2);background:#1b324b}
.pitch-key.flick-up::after,.pitch-key.flick-down::after{font-size:24px}
.keypad-tools{grid-template-columns:.8fr .8fr 1.4fr;gap:6px}.keypad-tools button{border-radius:9px;font-size:8px}
.piano-wrap{border-radius:12px}.piano{min-height:0}.white-key,.black-key{font-size:7px}.white-key.disabled,.black-key.disabled{opacity:.42;filter:saturate(.35);pointer-events:none}
.study-mini-keyboard{height:40px;max-width:310px;margin:1px auto 4px;width:100%}
.test-page{grid-template-rows:34px minmax(44px,1fr) 88px 166px;gap:5px}
.test-context{min-height:0;display:grid;align-content:end;gap:5px;padding:0 2px;color:var(--muted)}
.test-context-top{height:20px;display:flex;align-items:center;gap:8px;font-size:8px}.test-context-top>span:first-child{font-weight:850;color:#a7b5c6}
.test-mini-keyboard{height:36px;max-width:315px;width:100%;margin:0 auto;opacity:.34;transition:opacity .08s,filter .08s}.test-mini-keyboard.active{opacity:1;filter:drop-shadow(0 0 7px rgba(121,228,189,.24))}
.test-card{min-height:0;border-radius:12px;padding:8px 10px;align-items:center}
.test-question{font-size:calc(12px * var(--prompt-scale));line-height:1.25}.test-question small{margin-bottom:4px;font-size:7px}
.test-choices{min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:7px}
.test-choices button{border-radius:11px;font-size:calc(9.5px * var(--prompt-scale));padding:6px;overflow:hidden}

@media(max-height:650px){
  .train-page.choice-layout{grid-template-rows:30px minmax(44px,1fr) 64px 78px}
  .train-page.interval-layout{grid-template-rows:30px minmax(34px,1fr) 64px 136px}
  .train-page.input-layout{grid-template-rows:30px 36px 62px minmax(0,1fr)}
  .session-metrics{min-height:17px}.hint-lane,.keypad-warning-inline{height:30px}.hint-keyboard{height:23px}
  .problem-panel{padding:5px 6px}.problem-actions button{height:28px;min-width:43px}.start-button{height:34px}
  .keypad-wrap{grid-template-rows:minmax(0,1fr) 34px;gap:5px}.phone-keypad{gap:5px}.pitch-key{border-radius:10px}.pitch-key b{font-size:calc(16px * var(--prompt-scale))}.pitch-key small{font-size:7px;margin-top:3px}
  .test-page{grid-template-rows:30px minmax(35px,1fr) 78px 148px}.test-mini-keyboard{height:31px}.test-card{padding:6px 8px}.test-choices{gap:5px}
}
@media(max-width:340px){
  .session-metrics{gap:6px}.hint-lane{grid-template-columns:35px minmax(104px,188px) minmax(0,1fr);gap:5px;padding-inline:4px}.hint-lane>span{font-size:6px}
  .problem-actions button{min-width:40px;padding-inline:3px}.answer-button{font-size:calc(13px * var(--prompt-scale))}.pitch-key b{font-size:calc(16px * var(--prompt-scale))}
  .phone-keypad{gap:5px}.test-choices button{font-size:calc(8.5px * var(--prompt-scale))}
}

/* v0.2.1 pitch trail and keypad height normalization */
.train-page.input-layout{grid-template-rows:34px minmax(42px,1fr) 68px minmax(0,350px)}
.session-display{grid-template-rows:minmax(0,1fr) auto auto;align-content:stretch}
.pitch-trail{min-height:0;display:grid;grid-template-rows:18px minmax(38px,1fr);align-self:stretch;border:1px solid rgba(40,55,75,.74);border-radius:11px;background:linear-gradient(180deg,rgba(21,31,45,.7),rgba(11,17,26,.45));padding:5px 7px;overflow:hidden}
.trail-head{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#738397;font-size:7px;letter-spacing:.06em}.trail-head span:last-child{letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trail-track{position:relative;min-height:0;margin:2px 5px 1px;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(8.333% - 1px),rgba(93,115,140,.10) calc(8.333% - 1px),rgba(93,115,140,.10) 8.333%);border-left:1px solid #3b4b5f;border-right:1px solid #3b4b5f}
.trail-line{position:absolute;left:0;right:0;top:50%;height:1px;background:#314155}.trail-track i{position:absolute;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;box-shadow:0 0 0 2px rgba(8,12,18,.7)}.trail-track i.good{background:var(--accent)}.trail-track i.bad{background:var(--bad)}
.trail-track em{position:absolute;inset:0;display:grid;place-items:center;color:#58677a;font-size:7px;font-style:normal}
.keypad-wrap{height:100%;max-height:350px}.piano-wrap{width:100%;height:100%;max-height:350px}
@media(max-height:650px){.train-page.input-layout{grid-template-rows:30px minmax(36px,1fr) 62px minmax(0,330px)}.pitch-trail{grid-template-rows:15px minmax(26px,1fr);padding:4px 6px}.trail-head{font-size:6px}.trail-track i{width:6px;height:6px}}