:root{--teal:#00a7a1;--teal-dark:#007e7b;--navy:#143761;--pink:#fa4c8c;--ink:#233e59;--muted:#657c91;--line:#dfebf0;--bg:#f5fafc;--mint:#e4f8f5;--radius:18px;--shadow:0 6px 22px #204b6a07;color-scheme:light;font-family:Pretendard,'Noto Sans KR',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--ink);background:var(--bg);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit;color:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button{border:1px solid var(--line);background:#fff}button:disabled{cursor:not-allowed;opacity:.45}button,a{touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #168cba;outline-offset:3px}[hidden]{display:none!important}h1,h2,h3,p{margin:0}h1{font-size:30px;letter-spacing:-1px;color:var(--navy)}h2{font-size:17px;letter-spacing:-.3px}h3{font-size:15px}a{color:inherit;text-decoration:none}small{font-size:12px}img{object-fit:contain}select{border:1px solid var(--line);border-radius:8px;padding:8px;background:#fff;max-width:100%}.topbar{height:72px;display:flex;align-items:center;gap:44px;padding:0 32px;border-bottom:1px solid var(--line);background:#fff;position:relative;z-index:10}.brand{font-size:22px;font-weight:850;letter-spacing:-.6px;display:flex;align-items:center;gap:8px;white-space:nowrap;color:var(--navy)}.brand-mark{font-size:39px;color:var(--teal);line-height:1}.topbar nav{display:flex;gap:5px;height:100%;align-items:center}.topbar nav>*{border:0;background:none;font-size:14px;font-weight:750;padding:11px 16px;border-radius:9px;white-space:nowrap}.topbar nav>.active{background:var(--mint);color:var(--teal-dark)}#savedCount{font-size:12px;background:#edf4f8;border-radius:50px;padding:2px 5px;margin-left:4px}.header-note{margin-left:auto;font-size:11px;letter-spacing:1.7px;color:var(--teal-dark);text-align:right;font-weight:800}.header-note span{display:block;font-size:12px;letter-spacing:0;margin-top:5px;color:var(--muted);font-weight:500}main{padding:20px 28px 0;max-width:1800px;margin:auto}.page-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;min-height:78px}.eyebrow{font-size:10px;letter-spacing:1.7px;color:var(--teal-dark);font-weight:850;margin-bottom:7px}.subtitle{color:var(--muted);font-size:14px;margin-top:6px}.guide-mascot{display:flex;align-items:center;gap:16px;height:88px}.guide-mascot>div{font-size:13px;line-height:1.65;color:#5c778d;background:white;border:1px solid var(--line);border-radius:14px 14px 0 14px;padding:10px 16px}.guide-mascot img{height:96px;width:65px;align-self:flex-end}.guide-mascot strong{color:var(--teal-dark)}.studio{display:grid;grid-template-columns:minmax(360px,.95fr) minmax(400px,1.2fr);gap:16px;align-items:stretch}.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);min-width:0}.settings-panel{overflow:hidden}.panel-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}.panel-tabs button{border:0;background:#f5f9fb;padding:13px 8px;font-weight:800;font-size:15px}.panel-tabs small{font-weight:500;margin-left:6px}.panel-tabs button.active{color:#fff;background:linear-gradient(100deg,#00b1a8,#009d9a)}.settings-body{padding:17px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:9px}.text-btn{border:0;background:none;padding:2px;color:var(--teal-dark);font-size:12px;font-weight:750;white-space:nowrap}.preset-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.preset{padding:10px 4px;border-radius:11px;text-align:center;min-width:0;border:1px solid transparent;transition:transform .15s}.preset:hover{transform:translateY(-2px)}.preset-icon{font-size:22px;display:block;line-height:1.2;margin-bottom:4px}.preset b{display:block;font-size:12px;letter-spacing:-.4px}.preset small{display:none;font-size:12px}.warm{background:#fff0f5;color:#cc2b69}.basic{background:#edf6ff;color:#1764c8}.high{background:#e7f9f5;color:#008680}.range{background:#f3efff;color:#744ac2}.custom{background:#fff5e9;color:#b55b11}.preset.active{box-shadow:inset 0 0 0 1.5px currentColor}.settings-section{margin-top:15px}.settings-section>h2{margin-bottom:8px}.number{font-style:normal;display:inline-grid;place-items:center;background:var(--teal);color:#fff;width:23px;height:23px;font-size:13px;border-radius:50%;margin-right:8px}.scale-quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.choice{border-radius:9px;min-height:45px;font-size:14px;font-weight:800;padding:8px 4px;min-width:0}.choice small{display:block;color:var(--muted);font-weight:500;font-size:10px;margin-top:3px;overflow-wrap:anywhere}.active.choice,.segmented button.active{border-color:var(--teal);background:var(--mint);color:var(--teal-dark)}.selected-scale{display:flex;gap:8px;margin-top:7px;align-items:baseline;flex-wrap:wrap;color:var(--teal-dark);font-size:12px}.selected-scale small{color:var(--muted);font-size:11px}.range-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.range-grid label{display:block;font-size:12px;color:var(--muted);font-weight:650;margin:0 0 6px}.stepper{display:grid;grid-template-columns:36px minmax(50px,1fr) 36px;gap:6px}.stepper>*{height:36px;min-width:0;border:1px solid var(--line);background:#fff;border-radius:8px;text-align:center;font-size:15px;font-weight:800}.stepper select{padding:2px}.field-note{font-size:12px;color:var(--muted);line-height:1.55;margin-top:7px}.segmented{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.segmented button{border-radius:8px;padding:9px 5px;font-size:13px;font-weight:750;min-width:0}.segmented small{display:block;font-size:11px;font-weight:550;margin-top:2px}.bpm-row{display:flex;gap:7px;align-items:center;margin-top:8px}.icon-btn{border-radius:8px;width:36px;height:36px;display:inline-grid;place-items:center;font-size:21px;flex-shrink:0}.bpm-entry{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;height:36px;padding-right:10px;font-size:12px;color:var(--muted)}.bpm-entry input{width:55px;border:0;appearance:textfield;-moz-appearance:textfield;font-weight:800;text-align:center;background:none;color:var(--ink)}input::-webkit-inner-spin-button{appearance:none}.bpm-row .field-note{margin:0 0 0 auto}.details{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}.detail-card{border:1px solid var(--line);border-radius:12px;padding:12px;background:#fafcfd;min-width:0}.detail-card:last-child{grid-column:1/-1}.detail-card h3{color:var(--navy);margin-bottom:8px}.detail-card label{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:7px;font-size:12px}.detail-card select{font-size:12px;max-width:55%;padding:6px 4px}.volume-field{flex-wrap:wrap}.volume-field input{width:100%;accent-color:var(--teal);margin:0}.volume-field output{margin-left:auto}.summary{background:#fff3f7;border:1px solid #ffdce8;border-radius:12px;padding:12px;margin-top:15px}.summary-title{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:13px}.summary-title .text-btn{color:#bd3565}.summary>p{font-size:12px;margin-top:6px;line-height:1.6}.summary-stats{display:flex;gap:5px 12px;flex-wrap:wrap;margin-top:5px;font-size:11px;color:var(--muted);line-height:1.6}.summary .error-text{color:#b92049;font-size:13px}.startbtn,.primary{background:linear-gradient(100deg,#00b0a7,#009b98);border:0;color:#fff;font-weight:800;font-size:17px;padding:13px 15px;border-radius:11px;width:100%;margin-top:11px}.audio-status{font-size:11px;text-align:center;color:var(--muted);line-height:1.5;margin:8px 0 0;min-height:17px}.player-panel{padding:22px;display:flex;flex-direction:column;gap:16px}.player-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.player-heading h2{font-size:17px}.state-badge{font-size:12px;padding:5px 10px;border-radius:40px;background:var(--mint);color:var(--teal-dark);white-space:nowrap}.state-badge.playing{background:#fff0f5;color:#c22a61}.current-box{text-align:center;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,#fff,#fcfdff);padding:22px 16px 14px;flex:1;display:flex;flex-direction:column;justify-content:center;min-height:240px}.current-key{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}.current-key>span{font-size:22px;font-weight:850;color:var(--pink)}.current-key small{font-size:12px;color:var(--muted)}.big-vowel{font-size:84px;font-weight:850;line-height:1.25;letter-spacing:-3px;color:var(--pink);margin:5px 0 10px}.solfege{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;font-size:18px;font-weight:800;line-height:1.5;max-width:100%}.solfege span{border-radius:5px;padding:0 3px;color:#688096}.solfege span.current{background:var(--mint);color:var(--teal-dark)}.solfege span.past{color:#acbbc7}.current-pitch{display:flex;justify-content:center;gap:10px;font-size:13px;color:var(--muted);margin:12px 0 18px;align-items:center}.current-pitch b{color:var(--teal-dark)}.current-pitch span+span{border-left:1px solid var(--line);padding-left:10px}.progress{height:5px;background:#edf1f5;border-radius:9px;overflow:hidden}.progress i{height:100%;width:0;display:block;background:var(--pink)}.progress-label{font-size:11px;color:var(--muted);display:flex;justify-content:space-between;margin-top:7px}.vowel-section{border-bottom:1px solid var(--line);padding-bottom:15px}.vowel-buttons{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}.vowel-buttons button{border-radius:8px;font-weight:800;font-size:17px;height:40px}.vowel-buttons button.active{background:var(--pink);color:white;border-color:var(--pink)}.sound-special{display:grid;grid-template-columns:.8fr 1.2fr;gap:8px;margin-top:8px}.sound-special button{font-size:12px;padding:9px 5px;border-radius:8px;font-weight:750}.sound-special button.active{background:var(--mint);border-color:var(--teal);color:var(--teal-dark)}.mode-bar .segmented{grid-template-columns:1fr 1fr}.mode-bar p{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.6}.player-info{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;background:#f5fafc;border-radius:10px;padding:12px;font-size:12px;color:var(--muted)}.player-info strong{color:var(--ink);margin-left:5px}.instrument-panel{grid-column:1/-1;padding:18px 22px}.instrument-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}.instrument-options{display:flex;gap:6px;align-items:center}.chip{border-radius:7px;font-size:12px;padding:7px 12px;font-weight:650}.chip.active{background:var(--mint);color:var(--teal-dark);border-color:var(--teal)}.help-circle{width:26px;height:26px;border-radius:50%;color:var(--teal-dark);font-weight:800}.staff-caption{display:flex;justify-content:space-between;margin-top:14px;color:var(--muted);font-size:11px}.staff-wrap{height:152px;width:100%;overflow:hidden}.staff-wrap svg{width:100%;height:100%;display:block}.staff-note.current{fill:var(--pink)}.staff-note.next{fill:var(--teal)}.staff-note.past{fill:#a6b6c3}.keyboard-wrap{margin-top:4px;padding:0 1px}.keyboard{position:relative;display:flex;height:120px;width:100%;user-select:none;touch-action:manipulation}.keyboard button{padding:0}.white{position:relative;flex:1;min-width:0;height:100%;border:1px solid #cbd9e2;border-radius:0 0 5px 5px;background:linear-gradient(#fafcfd,#fff 55%);box-shadow:inset 0 -3px 0 #eef2f5}.white span{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);font-size:9px;color:#6c8295;pointer-events:none}.black{position:absolute;top:0;height:63%;background:linear-gradient(90deg,#233b50,#132c40);border:1px solid #0e2334;border-radius:0 0 4px 4px;z-index:2;box-shadow:inset 0 -3px 0 #38566e}.white.current{background:#ffdae8;box-shadow:inset 0 0 0 2px var(--pink)}.black.current{background:var(--pink);border-color:#df3473}.white.next{background:#e0f7f3;box-shadow:inset 0 0 0 1px #67cfc1}.black.next{background:#13aba4;border-color:#098e87}.white.pressed{background:#f4b4cb}.keyboard-legend{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:11px;color:var(--muted);margin-top:10px}.keyboard-legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px}.pink-dot{background:var(--pink)}.mint-dot{background:#00afa5}.keyboard-hint{margin-left:auto}.transport{display:flex;align-items:center;justify-content:center;gap:14px;border-top:1px solid var(--line);margin-top:14px;padding-top:14px}.transport-btn,.repeat,.stop{border:0;background:none;display:flex;align-items:center;flex-direction:column;gap:2px;font-weight:750;font-size:26px;min-width:65px;padding:0 5px}.transport-btn span,.repeat span,.stop span{font-size:11px}.stop{font-size:19px;gap:8px}.pause{border:0;border-radius:50%;width:54px;height:54px;flex-shrink:0;font-size:21px;background:var(--pink);color:#fff;box-shadow:0 4px 14px #fa4c8c22}.repeat{color:var(--teal-dark)}.quick-control{padding-left:15px;border-left:1px solid var(--line)}.quick-control label{font-size:10px;display:block;text-align:center;margin-bottom:4px;color:var(--muted)}.quick-control>div{display:flex;gap:5px;align-items:center}.quick-control button{border-radius:6px;width:30px;height:30px}.quick-control output{font-size:13px;font-weight:800;min-width:35px;text-align:center}.bottom-grid{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:16px;margin-top:16px}.bottom-grid>.panel{padding:18px}.help-card{display:flex;align-items:center;gap:12px}.help-card img{max-width:60px;height:100px}.help-card p:not(.eyebrow){font-size:12px;line-height:1.7;color:var(--muted);margin:6px 0}.help-card h2{font-size:16px}.help-links>div{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px}.help-links button{font-size:12px;background:#f6fafc;border:0;text-align:left;padding:7px 9px;border-radius:6px}.local-label{font-size:10px;color:var(--muted);border:1px solid var(--line);padding:3px 6px;border-radius:5px;white-space:nowrap}.empty-state{font-size:12px;color:var(--muted);line-height:1.65;background:#f8fbfc;border-radius:8px;padding:12px}.saved-row{display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--line);padding:8px 0}.saved-row .load-saved{text-align:left;flex:1;min-width:0;background:none;border:0;font-size:13px;font-weight:700;overflow-wrap:anywhere}.load-saved small{display:block;margin-top:4px;font-size:11px;color:var(--muted);font-weight:500}.delete-saved{border:0;background:none;font-size:12px;color:var(--muted);padding:8px}footer{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:var(--muted);padding:20px 0}footer span{font-size:10px}.mobile-only,.mobile-screen-tabs,.mobile-bottom{display:none}dialog{border:1px solid var(--line);border-radius:20px;color:var(--ink);max-width:580px;width:calc(100% - 32px);max-height:85dvh;padding:24px;box-shadow:0 24px 100px #17355233;overscroll-behavior:contain}dialog::backdrop{background:#15314b66;backdrop-filter:blur(3px)}.dialog-heading{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:18px}.dialog-heading h2{font-size:20px}.scale-filters{display:flex;gap:7px;margin-bottom:14px;position:sticky;top:-24px;background:white;padding:10px 0;z-index:2}.scale-filters button{padding:8px 16px;border-radius:7px;font-size:13px}.scale-filters button.active{background:var(--teal);color:#fff;border-color:var(--teal)}.scale-list{display:flex;flex-direction:column;gap:7px}.scale-option{border-radius:10px;padding:12px;text-align:left;display:flex;align-items:center;gap:12px}.scale-option.active{background:#fff0f6;border-color:#ffafcc}.scale-option .radio{height:17px;width:17px;border:1.5px solid #a5b9c9;border-radius:50%;flex-shrink:0}.scale-option.active .radio{border:5px solid var(--pink)}.scale-option b{display:block;font-size:14px}.scale-option small{font-size:12px;color:var(--muted);line-height:1.5;display:block;margin-top:4px}.group-label{font-size:12px;font-weight:800;color:var(--teal-dark);margin:10px 0 2px}.help-dialog-content{display:flex;gap:18px;align-items:flex-end}.help-dialog-content>div{flex:1;min-width:0}.help-dialog-content img{max-width:90px;height:auto;flex-shrink:0}.help-step{display:flex;gap:10px;margin-bottom:17px;font-size:14px;line-height:1.65}.help-step .number{flex-shrink:0;margin:1px 0 0}.help-tip{background:#fff0f6;border-radius:12px;padding:12px;font-size:13px;line-height:1.7;color:#904361;margin:15px 0}.help-dialog .primary{font-size:15px}.form-label{display:block;font-size:14px;margin-bottom:8px}#presetName{border:1px solid var(--line);border-radius:10px;padding:12px;width:100%;font-size:16px}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);max-width:min(90vw,600px);padding:14px 20px;background:#18384f;color:white;border-radius:12px;font-size:13px;line-height:1.6;z-index:100;box-shadow:0 8px 32px #18384f22;text-align:center}.noscript{padding:30px;color:#c00}
@media(min-width:1450px){.studio{grid-template-columns:minmax(490px,.95fr) minmax(620px,1.2fr)}.preset small{display:block;font-size:10px;margin-top:4px}.settings-body{padding:20px}.settings-section{margin-top:16px}.current-box{min-height:280px}.big-vowel{font-size:100px}.staff-wrap{height:165px}.keyboard{height:130px}}
@media(min-width:901px) and (max-width:1100px){main{padding:16px}.studio{grid-template-columns:minmax(350px,.95fr) minmax(365px,1fr);gap:12px}.player-panel{padding:16px}.topbar{padding:0 18px;gap:20px}.header-note{display:none}.bottom-grid{gap:12px}.bottom-grid>.panel{padding:14px}.guide-mascot{display:none}.preset b{font-size:11px}.transport{gap:9px}}
@media(max-width:900px){.topbar{height:60px;padding:0 18px;gap:12px;position:sticky;top:0}.brand{font-size:20px}.brand-mark{font-size:34px}.topbar nav,.header-note{display:none}.topbar .mobile-only{display:inline-grid;margin-left:auto}.mobile-only{display:block}main{padding:17px 16px 85px;max-width:700px}.page-title{min-height:0;margin-bottom:16px}.page-title h1{font-size:25px}.eyebrow{font-size:9px}.subtitle{font-size:13px;line-height:1.6}.guide-mascot{display:none}.mobile-screen-tabs{display:grid;grid-template-columns:1fr 1fr;border-radius:12px;background:#eaf2f6;padding:4px;margin-bottom:14px}.mobile-screen-tabs button{border:0;background:none;font-size:14px;font-weight:800;padding:9px;border-radius:9px}.mobile-screen-tabs button.active{background:white;color:var(--teal-dark);box-shadow:0 2px 8px #15314b08}.studio{display:block}.player-panel,.instrument-panel{display:none}.studio.show-player .settings-panel{display:none}.studio.show-player .player-panel,.studio.show-player .instrument-panel{display:flex}.studio.show-player .instrument-panel{display:block;margin-top:12px}.panel-tabs button{padding:13px 4px;font-size:14px}.panel-tabs small{font-size:11px}.settings-body{padding:16px}.preset-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.preset{display:grid;grid-template-columns:30px 1fr;text-align:left;padding:10px 10px;align-items:center}.preset .preset-icon{grid-row:1/3;margin:0;font-size:24px}.preset b{font-size:12px}.preset small{display:block;grid-column:2;font-size:10px;margin-top:3px}.preset:last-child{grid-column:1/-1}.preset:last-child .preset-icon{grid-row:auto}.preset:last-child small{display:none}.settings-section{margin-top:19px}h2{font-size:16px}.choice{min-height:47px}.choice small{font-size:10px}.selected-scale{font-size:12px}.stepper{grid-template-columns:38px minmax(45px,1fr) 38px}.stepper>*{height:40px}.segmented button{font-size:14px;padding:11px 4px}.segmented small{font-size:11px}.bpm-entry,.icon-btn{height:40px}.bpm-entry input{font-size:16px}.summary{padding:13px}.summary-stats{font-size:12px}.startbtn{font-size:18px;padding:15px}.audio-status{font-size:12px}.player-panel{padding:17px;gap:15px}.player-heading h2{font-size:15px}.current-box{border:0;padding:6px 0 0;min-height:235px;background:none}.big-vowel{font-size:78px;margin:8px 0}.current-key>span{font-size:21px}.solfege{font-size:19px;gap:3px}.current-pitch{margin:10px 0 14px}.vowel-buttons{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.vowel-buttons button{height:40px}.mode-bar .segmented button{font-size:13px;padding:10px 4px}.mode-bar p{font-size:12px}.player-info{font-size:11px;padding:10px;gap:5px}.instrument-panel{padding:14px}.instrument-heading h2{font-size:14px}.chip{padding:7px 8px;font-size:11px}.instrument-options{gap:4px}.help-circle{width:24px;height:24px}.staff-wrap{height:156px}.keyboard{height:125px}.keyboard-legend{gap:8px;font-size:10px}.keyboard-hint{display:none}.transport{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px 6px;align-items:center;justify-items:center;margin-top:14px;padding-top:14px}.transport-btn{font-size:28px;min-width:50px}.transport-btn span,.repeat span,.stop span{font-size:12px}.pause{width:54px;height:54px}.repeat{grid-row:2;grid-column:2;font-size:24px;min-width:0}.stop{grid-row:3;grid-column:1/-1;display:flex;flex-direction:row;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;width:100%;padding:8px;font-size:13px;gap:7px}.quick-control{border:0;padding:0;min-width:0}.quick-control label{font-size:10px}.quick-control output{font-size:12px;min-width:27px}.quick-control>div{gap:2px}.quick-control button{width:29px;height:31px}.quick-control:nth-last-child(2){grid-row:2;grid-column:1}.quick-control:last-child{grid-row:2;grid-column:3}.bottom-grid{grid-template-columns:1fr;margin-top:14px;gap:12px}.bottom-grid>.panel{padding:15px}.help-links{display:none}.help-card img{max-width:55px;height:85px}.help-card .eyebrow{display:none}.help-card h2{font-size:15px}.help-card p:not(.eyebrow){margin:5px 0}.bottom-grid .saved-card{display:none}footer{font-size:10px;justify-content:center}footer span{display:none}.mobile-bottom{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;bottom:0;left:0;right:0;border-top:1px solid var(--line);background:#fffffff5;backdrop-filter:blur(10px);z-index:15;padding:7px 10px max(7px,env(safe-area-inset-bottom))}.mobile-bottom button{border:0;background:none;display:flex;flex-direction:column;align-items:center;font-size:20px;gap:3px;color:var(--muted);padding:3px}.mobile-bottom button.active{color:var(--teal-dark)}.mobile-bottom span{font-size:10px;font-weight:750}.toast{bottom:84px;font-size:13px;width:max-content;max-width:90vw}.details{grid-template-columns:1fr}.detail-card:last-child{grid-column:auto}.detail-card label{font-size:14px;margin-top:10px}.detail-card select{font-size:13px;max-width:60%;min-width:110px}.help-dialog-content img{max-width:60px}.help-step{font-size:14px}.dialog-heading h2{font-size:19px}dialog{padding:20px;border-radius:18px;max-height:85dvh}.scale-filters{top:-20px}.scale-option{min-height:62px}.scale-option b{font-size:14px}.scale-option small{font-size:12px}.scale-list{gap:8px}.scale-filters button{font-size:13px;flex:1;padding:8px}.state-badge{font-size:11px}.staff-caption{font-size:10px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

@media(max-width:900px){.instrument-panel>.vowel-section{padding-top:17px;margin-top:14px;border-top:1px solid var(--line);border-bottom:0}.instrument-panel>.mode-bar{margin-top:12px}.player-info{display:none}.player-panel .current-box{min-height:200px}.player-panel{gap:10px}.big-vowel{font-size:70px;margin:2px 0 5px}.staff-wrap{height:140px}}

@media(max-width:380px){.range-grid{gap:10px}.stepper{grid-template-columns:30px minmax(40px,1fr) 30px;gap:4px}.quick-control button{width:25px}.quick-control output{min-width:25px}.instrument-heading{flex-wrap:wrap}.preset b{font-size:11px}}
/* The instrument belongs to the right practice workspace in every view. */
.practice-workspace{min-width:0;align-self:stretch;background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px;display:flex;flex-direction:column;gap:10px}
.practice-workspace>.panel{border:0;box-shadow:none;border-radius:0}.player-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.player-heading{grid-column:1/-1}.player-heading h2{font-size:16px}.player-heading .eyebrow{display:none}
.practice-workspace .instrument-panel{padding:0}.instrument-heading{flex-wrap:wrap}.instrument-options{flex-wrap:wrap}.mode-bar{border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;gap:12px;align-items:center;margin:10px 0}.mode-bar .segmented{min-width:180px}.mode-bar p{margin:0}.player-info span{overflow-wrap:anywhere}.player-info::before{content:'현재 연습 정보';font-weight:800;color:var(--navy)}
#guideContents{display:flex;flex-wrap:wrap;gap:7px;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:20px}#guideContents button{padding:9px 12px;border-radius:8px;font-size:14px;text-align:left}#guideContents button[aria-current=true]{background:var(--mint);border-color:var(--teal);color:var(--teal-dark)}.help-dialog{max-width:850px}.help-step{font-size:16px;line-height:1.85}.help-tip{font-size:14px}.help-dialog-content{align-items:flex-start}.help-dialog-content img{position:sticky;top:0}.help-links button{font-size:14px}.help-links{display:block}
@media(min-width:901px){
 .studio{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);align-items:stretch;gap:14px}
 .practice-workspace .player-panel{padding:0;display:grid;grid-template-columns:minmax(135px,.8fr) minmax(0,1.5fr) minmax(115px,.7fr);gap:10px}
 .player-panel .current-box{grid-column:2;grid-row:2;min-height:210px;padding:12px 8px;flex:none}
 .player-panel .vowel-section{grid-column:1;grid-row:2;border:1px solid var(--line);border-radius:12px;padding:10px;margin:0}
 .vowel-section .section-heading{flex-wrap:wrap}.vowel-buttons{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.sound-special{grid-template-columns:1fr;gap:5px}.sound-special button{font-size:12px;padding:7px 3px}
 .player-panel .player-info{grid-column:3;grid-row:2;display:flex;flex-direction:column;justify-content:flex-start;gap:10px;border:1px solid var(--line);background:white;padding:10px}
 .big-vowel{font-size:64px;margin:0}.current-key>span{font-size:20px}.current-pitch{margin:8px 0}.solfege{font-size:18px;gap:3px}.current-box .progress{margin-top:8px}.staff-wrap{height:145px}.keyboard{height:125px}
 .transport{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;justify-items:center}.transport>*{min-width:0;max-width:100%}.transport-btn,.repeat,.stop{min-width:0;padding:0}.quick-control{padding-left:0;border:0}.quick-control>div{gap:1px}.quick-control button{width:23px;height:30px}.quick-control output{min-width:27px;font-size:12px}.transport-btn span,.repeat span,.stop span{font-size:12px;text-align:center}.keyboard-hint{display:none}
 .practice-fullscreen{overflow:hidden}.practice-fullscreen .topbar,.practice-fullscreen .page-title,.practice-fullscreen .bottom-grid,.practice-fullscreen footer{display:none}
 .practice-fullscreen .studio{grid-template-columns:0 minmax(0,1fr);gap:0}.practice-fullscreen .settings-panel{transform:translateX(-105%);visibility:hidden;max-height:0;overflow:hidden}
 .practice-fullscreen .practice-workspace{position:fixed;inset:0;z-index:30;overflow-y:auto;border-radius:0;padding:16px 24px;gap:12px}
 .practice-fullscreen .player-panel{grid-template-columns:minmax(180px,.65fr) minmax(0,2fr) minmax(180px,.65fr)}.practice-fullscreen .current-box{min-height:200px}.practice-fullscreen .big-vowel{font-size:80px}.practice-fullscreen .keyboard{height:clamp(130px,21vh,220px)}.practice-fullscreen .staff-wrap{height:clamp(145px,20vh,210px)}.practice-fullscreen .transport{margin-top:10px;padding-top:10px}.practice-fullscreen .sound-special{grid-template-columns:1fr 1fr}
 .preset b,.choice small,.range-grid label,.segmented button,.detail-card label,.detail-card select{font-size:14px}.details{grid-template-columns:1fr 1fr}.details .detail-card:last-child{grid-column:1/-1}
}
@media(min-width:1450px){.details{grid-template-columns:repeat(3,minmax(0,1fr))}.details .detail-card:last-child{grid-column:auto}.practice-workspace .player-panel{grid-template-columns:minmax(180px,.8fr) minmax(0,1.5fr) minmax(150px,.7fr)}.sound-special{grid-template-columns:1fr 1fr}.big-vowel{font-size:76px}}
@media(max-width:1100px) and (min-width:901px){.player-panel .player-info{grid-column:1/-1;grid-row:3;flex-direction:row;flex-wrap:wrap}.practice-workspace .player-panel{grid-template-columns:145px minmax(0,1fr)}.player-panel .current-box{grid-column:2}.mode-bar{flex-wrap:wrap}.transport{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:12px}.preset-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.practice-workspace{display:none;padding:12px}.studio.show-player .practice-workspace{display:flex}.practice-workspace .player-panel{padding:0}.practice-workspace .instrument-panel{margin-top:0!important}.mode-bar{display:block}.mode-bar p{margin-top:8px}#toggleFullscreen{display:none}.help-dialog-content img{max-width:48px}.help-step{font-size:16px}#guideContents{gap:5px}#guideContents button{font-size:14px;padding:7px 9px}.player-info::before{display:none}.help-links{display:block}}

/* Equal-height desktop columns; instruments sit at the foot of the right pane. */
@media(min-width:901px){
 .studio>.settings-panel,.studio>.practice-workspace{align-self:stretch}
 .practice-workspace>.player-panel{flex:1 0 auto;grid-template-rows:auto 1fr}
 .practice-workspace>.instrument-panel{flex:0 0 auto;margin-top:auto;width:100%;grid-column:auto}
 .practice-fullscreen .practice-workspace>.player-panel{flex:1 0 auto}
 .practice-fullscreen .practice-workspace>.instrument-panel{margin-top:auto}
 .practice-fullscreen .keyboard{height:clamp(165px,24vh,260px)}
}

.brand-symbol{width:44px;height:44px;object-fit:contain;flex-shrink:0}
@media(max-width:900px){.brand-symbol{width:36px;height:36px}}

/* Compact balanced settings, without expanding the vowel to fill the column. */
.settings-explanation{grid-column:1/-1;border-top:1px solid var(--line);padding-top:8px;font-size:14px;line-height:1.65;color:var(--muted)}
.settings-explanation summary{cursor:pointer;color:var(--teal-dark);font-weight:650}
.settings-explanation p{margin-top:8px}
@media(min-width:901px){
 .details{align-items:start;gap:8px;margin-top:12px;padding-top:12px}
 .detail-card{padding:10px}.detail-card h3{font-size:14px;margin-bottom:6px}
 .detail-card label{gap:6px;margin-top:6px;min-height:34px}
 .detail-card select{min-width:0;max-width:62%;padding:6px 3px}
 .practice-workspace>.player-panel{flex:0 0 auto;grid-template-rows:auto auto}
 .practice-workspace>.instrument-panel{margin-top:0}
 .player-panel .current-box{min-height:210px}
 .settings-section{margin-top:12px}.settings-body{padding:14px}
 .practice-fullscreen .practice-workspace>.player-panel{flex:1 0 auto}
 .practice-fullscreen .practice-workspace>.instrument-panel{margin-top:auto}
}
@media(min-width:1250px){.details{grid-template-columns:repeat(3,minmax(0,1fr))}.details .detail-card:last-of-type{grid-column:auto}}
/* Mobile practice: large, legible controls based on the supplied reference. */
@media(max-width:900px){
 main{padding:18px 12px 105px}.topbar{padding:0 14px;min-height:64px}.page-title h1{font-size:28px}.subtitle{font-size:16px}.page-title .eyebrow{display:none}
 .mobile-screen-tabs button{min-height:52px;font-size:17px}.panel-tabs button{min-height:56px;font-size:17px}.panel-tabs small{display:block;font-size:13px;margin:4px 0 0}
 .settings-body{padding:16px}.settings-section{margin-top:24px}.settings-section h2,.section-heading h2{font-size:19px}.number{width:30px;height:30px;font-size:17px}
 .preset-row{grid-template-columns:1fr;gap:10px}.preset{grid-template-columns:48px minmax(0,1fr) 24px;padding:14px 16px;min-height:80px;border-radius:14px}.preset .preset-icon{font-size:32px;grid-row:1/3}.preset b{font-size:18px;letter-spacing:0}.preset small{font-size:14px;margin-top:5px}.preset::after{content:'›';grid-column:3;grid-row:1/3;font-size:28px;align-self:center}.preset:last-child .preset-icon{grid-row:1/3}.preset:last-child small{display:block}
 .scale-quick{grid-template-columns:1fr 1fr;gap:10px}.choice{min-height:76px;font-size:20px;border-radius:12px}.choice small{font-size:13px;margin-top:6px}.selected-scale{font-size:15px}.selected-scale small{font-size:13px}
 .range-grid{grid-template-columns:1fr;gap:16px}.range-grid label{font-size:16px;margin-bottom:8px}.stepper{grid-template-columns:54px minmax(0,1fr) 54px;gap:10px}.stepper>*{height:54px;font-size:22px;border-radius:11px}
 .segmented{gap:8px}.segmented button{font-size:17px;min-height:56px}.speed-row button{min-height:76px;font-size:17px}.segmented small{font-size:14px;margin-top:6px}
 .bpm-row{gap:10px}.bpm-row .icon-btn{width:52px;height:52px;font-size:25px}.bpm-entry{height:52px;font-size:15px}.bpm-entry input{width:70px;font-size:22px}.bpm-row>.field-note{font-size:12px}
 .field-note{font-size:14px}.text-btn{font-size:14px;min-height:40px;white-space:normal}.detail-card{padding:16px}.detail-card h3{font-size:18px}.detail-card label{font-size:16px;gap:10px;margin-top:12px}.detail-card select{font-size:16px;min-height:48px;max-width:60%}.volume-field input{min-height:40px}
 .summary{padding:16px}.summary-title{font-size:17px}.summary>p,.summary-stats{font-size:15px;line-height:1.7}.startbtn{min-height:60px;font-size:21px;border-radius:14px}.audio-status{font-size:14px}
 .vowel-buttons button{height:56px;font-size:23px}.sound-special button{min-height:52px;font-size:15px}.mode-bar .segmented button{font-size:16px;min-height:52px}
 .mobile-bottom{padding-top:9px}.mobile-bottom button{font-size:26px;min-height:58px}.mobile-bottom span{font-size:13px}.scale-option{min-height:76px;padding:16px}.scale-option b{font-size:18px}.scale-option small{font-size:14px}.chip{min-height:42px;font-size:13px}
 .transport .pause{width:64px;height:64px}.transport-btn{min-height:56px}.transport-btn span,.repeat span,.stop span{font-size:14px}.quick-control button{width:38px;height:42px}.quick-control output{font-size:16px}.quick-control label{font-size:13px}
}
/* Dedicated advanced settings and illustrated brand guide. */
#details{margin-top:0;padding-top:0;border-top:0;align-items:start}
.detail-card{--card-accent:#007f79;--card-line:#a9e0d8;--card-tint:#edfbf7;background:var(--card-tint);border:1px solid var(--card-line);border-radius:16px;padding:16px;box-shadow:0 4px 14px #164f6410}
.detail-card:nth-child(2){--card-accent:#a82c65;--card-line:#f3b9d2;--card-tint:#fff1f7}
.detail-card:nth-child(3){--card-accent:#365bb0;--card-line:#bfd1f3;--card-tint:#eff5ff}
.detail-card h3{display:flex;align-items:center;gap:9px;color:var(--card-accent);font-size:17px;margin-bottom:14px}
.detail-icon{display:inline-grid;place-items:center;flex-shrink:0;width:36px;height:36px;border-radius:11px;background:white;font-size:25px}
.detail-card label{color:var(--ink);padding-top:9px;margin-top:9px;border-top:1px solid var(--card-line);font-size:14px;flex-wrap:wrap}
.detail-card select{border-color:var(--card-line);color:var(--card-accent);font-weight:700;font-size:14px;min-height:42px;max-width:100%;flex:1 1 110px;width:100%}
.detail-card .volume-field input{flex-basis:100%}.detail-card output{color:var(--card-accent);font-weight:800}
.settings-explanation{background:#eafaf7;border:1px solid #b4e4db;border-radius:13px;padding:13px;color:#285d60}
.settings-explanation summary{font-weight:750;font-size:14px}.settings-explanation p{font-size:14px;line-height:1.8;padding-top:10px}
.help-dialog{background:#f5fbfd;padding:22px}.help-dialog .dialog-heading{position:sticky;top:-22px;z-index:3;background:#f5fbfd;padding:12px 0}.help-dialog .eyebrow{color:#007f79}
.guide-welcome{display:flex;gap:12px;align-items:center;justify-content:center;background:linear-gradient(120deg,#dff9f4,#fff0f7);border:1px solid #c9e8e3;border-radius:20px;padding:22px 14px;margin-bottom:20px}.guide-welcome img{width:80px;height:125px;flex-shrink:0}.guide-welcome div{min-width:0}.guide-welcome span{font-size:13px;color:#007f79;font-weight:750}.guide-welcome h3{font-size:24px;color:var(--navy);line-height:1.4;margin:7px 0}.guide-welcome p{font-size:14px;line-height:1.6;color:#526e83}
.help-step{background:white;border:1px solid #d0e9e6;border-radius:15px;padding:17px;gap:13px;margin-bottom:12px;line-height:1.8}.help-step:nth-child(even){border-color:#f2ccdc;background:#fffafd}.help-step .number{width:32px;height:32px;font-size:17px}.help-step p{min-width:0}.help-tip{border:1px solid #f4c4d7;padding:18px;font-size:15px}.guide-topics-title{margin:22px 0 12px;font-size:19px;color:var(--navy)}
#guideContents{display:grid;grid-template-columns:1fr 1fr;gap:10px;border:0;padding:0;margin-bottom:16px}#guideContents button{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid #c9e8e4;background:#e9f9f5;min-height:70px;border-radius:14px;font-size:15px;font-weight:750;color:#185953}#guideContents button:nth-child(3n+2){background:#fff0f6;border-color:#f4cedd;color:#973c60}#guideContents button:nth-child(3n){background:#edf4ff;border-color:#ccdcf7;color:#365996}#guideContents button[aria-current=true]{box-shadow:inset 0 0 0 2px var(--teal)}.guide-topic-icon{display:grid;place-items:center;width:40px;height:40px;background:#fff;border-radius:12px;font-size:24px;flex-shrink:0}
.help-card{background:linear-gradient(120deg,#e7fbf6,#fff)!important}.help-links button{background:#e8f8f4;border:1px solid #c2e6dd;border-radius:10px;padding:12px;color:#14665f}.help-links button:nth-child(even){background:#fff0f6;border-color:#f3d0df;color:#92385d}
@media(max-width:900px){#details{grid-template-columns:1fr;gap:16px}.detail-card h3{font-size:20px}.detail-icon{width:44px;height:44px;font-size:29px}.detail-card label{font-size:16px;padding-top:12px}.detail-card select{min-height:50px;font-size:16px;flex:0 1 60%;width:60%}.help-dialog{width:calc(100% - 20px);max-height:92dvh;padding:16px;border-radius:20px}.help-dialog .dialog-heading{top:-16px}.help-dialog .dialog-heading h2{font-size:21px}.help-dialog .icon-btn{width:44px;height:44px}.guide-welcome{padding:18px 10px;gap:8px}.guide-welcome img{width:58px;height:105px}.guide-welcome h3{font-size:21px}.guide-welcome p{font-size:14px}.guide-welcome span{font-size:12px}.help-step{padding:15px 12px;font-size:16px;gap:10px}#guideContents{grid-template-columns:1fr;gap:10px}#guideContents button{font-size:17px;min-height:76px;padding:14px}.help-links button{font-size:16px;min-height:58px}.help-dialog .primary{min-height:54px;font-size:18px}}
.advanced-core{grid-column:1/-1!important}.scale-audition-row{display:grid;grid-template-columns:minmax(0,1fr) 54px;gap:8px}.scale-listen{background:var(--mint);border-color:#a9e0d8;color:var(--teal-dark);border-radius:12px;font-size:23px}.stepper select{font-size:13px}.guide-slide{position:relative;background:white;border:1px solid #d3e7e5;border-radius:18px;padding:28px 22px;min-height:300px;text-align:center;display:flex;align-items:center;flex-direction:column;gap:24px}.guide-slide>p{font-size:20px;font-weight:650;line-height:1.9;max-width:520px;white-space:pre-line}.guide-character{width:100px;height:145px;object-fit:contain}.guide-character.portrait{height:100px;object-fit:cover;object-position:top;align-self:flex-end;margin-top:-50px;border-radius:15px}.guide-slide>.number{width:42px;height:42px;font-size:22px}.guide-page-count{text-align:right;margin:10px 0;color:var(--teal-dark);font-weight:700}#guideProgress{width:100%;height:8px;accent-color:var(--teal)}.guide-pager-actions{display:flex;gap:10px;margin-top:16px}.guide-pager-actions button{border-radius:12px;min-height:52px;padding:10px 16px;font-weight:750;font-size:16px}#guideNext{background:var(--teal);color:white;flex:1}.note-examples{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.note-examples b{padding:18px 12px;border:1px solid #a7e2dc;background:var(--mint);border-radius:12px;color:var(--teal-dark)}
@media(max-width:900px){.stepper{grid-template-columns:44px minmax(0,1fr) 44px;gap:6px}.stepper select{font-size:15px}.guide-slide{padding:24px 16px;min-height:330px}.guide-slide>p{font-size:19px}.guide-pager-actions{flex-wrap:wrap}.guide-pager-actions #guideList{width:100%}.advanced-core select{flex:1 1 100%;width:100%}.note-examples b{padding:13px 10px}}
.detail-card:nth-child(4){--card-accent:#365bb0;--card-line:#bfd1f3;--card-tint:#eff5ff}#guidePager{position:sticky;bottom:-22px;background:#f5fbfd;padding:10px 0;z-index:2}.advanced-core label{display:grid;grid-template-columns:80px minmax(0,1fr)}.advanced-core select{width:100%;max-width:100%}@media(max-width:900px){#guidePager{bottom:-16px}.advanced-core label{display:flex}}
.lesson-copy{width:100%;text-align:left;word-break:keep-all;overflow-wrap:break-word}.lesson-copy h3{font-size:25px;line-height:1.55;color:#007f79;margin:0 0 20px;text-wrap:pretty}.lesson-copy p{font-size:17px;line-height:1.85;margin:12px 0;color:#425f73}.guide-slide{gap:16px;min-height:260px}.teacher-tip{display:flex;gap:14px;align-items:center;width:100%;margin-top:8px;order:5}.tip-cloud{background:#eaf9f6;border:1px solid #bee6de;border-radius:32px 28px 32px 8px;padding:16px 20px;text-align:left;flex:1;word-break:keep-all}.tip-cloud b{font-size:14px;color:#007e77}.tip-cloud p{font-size:14px;line-height:1.7;margin-top:6px;color:#4a6672}.teacher-face{width:76px;height:100px;flex-shrink:0;background-image:url('teacher-sheet.png');background-size:650px 975px;background-repeat:no-repeat;border-radius:18px;background-position:-404px -48px}.face-2{background-position:-486px -48px}.face-4{background-position:-566px -48px}.face-1{background-position:-404px -471px}.face-3{background-position:-486px -471px}.face-5{background-position:-567px -471px}.lesson-product{width:100%;max-width:380px;border-radius:16px;height:180px;object-fit:cover}.note-examples{order:2}.guide-slide>.number{align-self:flex-start}.advanced-core label:first-of-type{grid-template-columns:1fr}.advanced-core select{white-space:normal}#startNote,#highNote,#advancedStart,#advancedHigh{font-family:monospace;font-variant-numeric:tabular-nums;text-align:left;font-size:14px;letter-spacing:0}.lesson-copy h3 strong{color:#df3878}@media(max-width:900px){.lesson-copy h3{font-size:23px}.lesson-copy p{font-size:17px}.teacher-face{width:65px}.tip-cloud{padding:13px}.teacher-tip{gap:8px}}
.designed-select{position:relative;min-width:0;width:100%;height:62px;border:1px solid #b9dfd8;border-radius:12px;background:white;overflow:hidden}.designed-select select{position:absolute;inset:0;opacity:0;width:100%!important;max-width:100%!important;height:100%;z-index:2;cursor:pointer}.designed-select:focus-within{outline:3px solid #168cba;outline-offset:2px}.select-caption{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:8px 28px 8px 12px;pointer-events:none}.select-caption:after{content:'⌄';position:absolute;right:10px;color:#008b83}.select-caption b{font:750 18px/1.2 system-ui;color:#183d58}.select-caption small{font:500 12px/1.4 system-ui;color:#568e96;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stepper{align-items:center}.stepper>.designed-select{height:62px}.advanced-core label{display:grid!important;grid-template-columns:70px minmax(0,1fr)}.advanced-core label:first-of-type{grid-template-columns:1fr}.lesson-copy{text-align:center;max-width:570px;margin:auto}.lesson-copy h3{font-size:26px;text-align:center;line-height:1.6}.lesson-copy p{text-align:center;font-size:18px}.guide-slide>.number{align-self:center}.story-0{background:linear-gradient(180deg,#eafff7,#fff 65%);border-top:5px solid #00aba0}.story-1{background:#fff8fc;border:2px solid #f2cee1;border-radius:28px 8px 28px 8px}.story-2{background:linear-gradient(135deg,#edf5ff,#fff);border:2px solid #c8ddf7}.story-3{background:#fffdf2;border:2px dashed #e7d394;border-radius:22px}.lesson-activity{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;order:2;width:100%;padding:12px 0}.lesson-activity span{display:grid;place-items:center;min-width:48px;min-height:56px;padding:12px;background:white;border:1px solid #bce0dc;border-radius:14px;color:#008278;font-size:19px;font-weight:800}.story-1 .teacher-tip{flex-direction:row-reverse}.story-2 .tip-cloud{background:#eaf2ff}.story-3 .tip-cloud{background:#fff4d9}.teacher-face.face-6{background-position:-412px -192px;width:92px;height:108px}.teacher-face.face-7{background-position:-522px -608px;width:100px;height:122px}.teacher-face.face-8{background-position:-412px -300px;width:95px;height:118px}.teacher-face.face-9{background-position:-412px -733px;width:95px;height:125px}@media(max-width:900px){.lesson-copy h3{font-size:23px}.lesson-copy p{font-size:17px}.advanced-core label{grid-template-columns:1fr}.select-caption b{font-size:18px}.select-caption small{font-size:12px}}

/* Bella Scale: replace only the desktop header mascot. */
@media(min-width:901px){.guide-mascot.bella-guide{height:128px;gap:12px;flex-shrink:0}.guide-mascot.bella-guide .bella-piano-mascot{display:block;width:210px;height:140px;align-self:center;object-fit:contain;border-radius:14px}.guide-mascot.bella-guide>div{max-width:208px}.page-title{gap:16px}}

/* Shared desktop and mobile recommendation palette; independent practice controls. */
.preset.warm{background:#ffcade;color:#a72155}.preset.basic{background:#c8dfff;color:#1554a5}.preset.high{background:#b8e8dd;color:#006e65}.preset.range{background:#d8c9fa;color:#6038a6}.preset.custom{background:#ffdbb0;color:#924408}
.preset-icon svg{display:inline-block;vertical-align:middle}
.free-notes{margin-top:8px;min-height:40px;padding:8px 12px;border:1px solid var(--line);border-radius:9px;white-space:normal}.free-notes[aria-pressed="true"]{background:var(--mint);border-color:var(--teal)}
.solo-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}.solo-tools button{min-height:42px;padding:8px 14px;border-radius:10px;font-weight:750}.solo-tools button.active{background:var(--mint);border-color:var(--teal);color:var(--teal-dark)}.solo-tools span{font-size:12px;color:var(--muted)}
.transport .quick-control button{width:36px;height:40px;font-size:19px;border-radius:8px}.transport .quick-control output{min-width:32px;font-size:16px;font-weight:800}.transport .quick-control label{font-size:12px}.transport .quick-control>div{gap:3px}
@media(min-width:901px){.transport{grid-template-columns:repeat(5,minmax(0,1fr)) repeat(2,minmax(112px,1.5fr))}}
@media(max-width:600px){.transport .quick-control button{width:36px;height:44px}.transport .quick-control>div{gap:1px}.transport .quick-control output{min-width:29px}.solo-tools{gap:6px}.solo-tools span{font-size:11px}}

/* Picture-first, child-friendly guide. Preserve the original mascot artwork. */
.guide-welcome img,.help-card>img,.teacher-portrait{mix-blend-mode:multiply}.guide-welcome{isolation:isolate;background:linear-gradient(115deg,#c9f0e4,#ffdae9);border:0}.guide-welcome img{border-radius:35%;object-fit:contain}.help-card>img{border-radius:30%}
.guide-drawing{width:100%;max-width:520px}.guide-drawing svg{display:block;width:100%;height:auto}.drawing-captions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px;color:#225569;font-size:14px;font-weight:750;text-align:center;word-break:keep-all}.lesson-copy h3{font-size:22px;margin-bottom:8px}.lesson-copy details{text-align:left;background:#ffffff99;border-radius:12px;padding:10px 14px;font-size:14px}.lesson-copy summary{cursor:pointer;color:#347775;font-weight:650}.lesson-copy details p{font-size:15px;line-height:1.7}.guide-slide{gap:12px;padding:18px 16px}.guide-slide>.number{width:30px;height:30px;font-size:16px}.guide-slide .lesson-activity{display:none}.teacher-tip{margin-top:0}.tip-cloud{padding:12px 16px}.teacher-portrait{max-height:100px}.drawing-pulse,.drawing-beat{animation:guidePulse 2s ease-in-out 2}.drawing-swing{transform-origin:62px 110px;animation:guideSwing 1s ease-in-out 4 alternate}@keyframes guidePulse{50%{opacity:.55}}@keyframes guideSwing{to{transform:rotate(-25deg)}}@media(prefers-reduced-motion:reduce){.drawing-pulse,.drawing-beat,.drawing-swing{animation:none}}@media(max-width:600px){.drawing-captions{font-size:12px}.lesson-copy h3{font-size:20px}.guide-slide{padding:14px 10px}.guide-welcome h3{font-size:20px}.guide-welcome img{width:52px}.guide-welcome{gap:5px}}

/* Individual picture-book scenes and readable character narration. */
.picture-book{max-width:600px}.story-narrator{display:flex;align-items:center;gap:12px;text-align:left;margin-bottom:12px}.story-narrator img{width:62px;height:94px;object-fit:contain;mix-blend-mode:multiply;flex-shrink:0}.story-narrator p{background:#fff;border:2px solid #b8e0d7;border-radius:23px 23px 23px 5px;padding:13px 17px;font-size:19px;font-weight:750;line-height:1.6;word-break:keep-all}.picture-book svg{border-radius:22px}.beat-note{animation:bookBeat 2s linear 3;transform-box:fill-box;transform-origin:center}@keyframes bookBeat{0%,9%{opacity:.8}11%,100%{opacity:.15}}.lesson-copy h3{font-size:19px}.guide-slide .teacher-tip{border-top:1px solid #d4e9e2;padding-top:8px}.guide-slide .lesson-product{height:120px;object-fit:contain}.guide-slide .note-examples{gap:4px}.guide-slide .note-examples b{font-size:13px;padding:8px}.guide-slide{min-height:0}@media(max-width:600px){.story-narrator{gap:8px}.story-narrator p{font-size:17px;padding:10px 12px}.story-narrator img{width:48px;height:74px}.lesson-copy h3{font-size:17px}.picture-book svg{min-height:160px}}@media(prefers-reduced-motion:reduce){.beat-note{animation:none;opacity:.4}}

.recorded-voice-button{width:100%;min-height:44px;border:1px solid #9fd5ca;border-radius:10px;background:#e6f6f1;color:#007d72;font-weight:750;margin:8px 0}.recorded-voice-button[aria-pressed="true"]{background:#b9e9dc;border-color:#008d7c}

/* September 18: concise setup and contiguous mobile practice. */
.simple-retired[hidden]{display:none!important}
#recommendations.preset-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#recommendations .preset{min-width:0;min-height:92px;padding:10px 12px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;text-align:left;overflow:hidden}
#recommendations .preset b{font-size:15px;line-height:1.35;word-break:keep-all}
#recommendations .preset small{display:block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}
#recommendations .preset-level{font-size:11px;font-weight:750;opacity:.85}
#recommendations .custom{grid-column:1/-1;min-height:56px}
@media(max-width:900px){.player-panel .vowel-section{order:0;margin:8px 0;padding:10px 0}.player-panel .current-box{order:1}.player-panel .player-info{order:2}.player-panel .player-heading{order:-1}.instrument-panel .mode-bar{order:-2;margin:0 0 8px}.practice-workspace{gap:8px}.player-panel,.instrument-panel{padding:12px}.player-panel .current-box{margin:0}.player-panel .field-note{margin:6px 0}.player-panel .vowel-buttons{gap:5px}}
#recommendations .preset{height:auto!important}#recommendations .preset:after{display:none!important}
@media(max-width:900px){.player-panel .vowel-buttons{grid-template-columns:repeat(6,minmax(0,1fr))!important}.player-panel .vowel-buttons button{min-height:44px;padding:8px 0;font-size:20px}.player-panel .sound-special button{min-height:40px;padding:6px}.player-panel .vowel-section .section-heading{margin-bottom:8px}.player-panel .current-box{padding:12px 8px;min-height:0}.player-panel .big-vowel{font-size:48px;margin:8px 0}.player-panel .current-key{margin:0}.player-panel .solfege{margin:8px 0;line-height:1.5}.player-panel .player-heading{margin-bottom:4px}.player-panel .vowel-section{margin-top:0}.instrument-panel .mode-bar p{margin:4px 0;font-size:11px}.instrument-panel .mode-bar{padding:6px 0}.player-panel .current-pitch{margin:4px 0}}

/* Bright, visual exercise cards and reachable range controls. */
#recommendations .preset{align-items:center;text-align:center;gap:8px;min-height:100px;padding:12px 6px;border:1px solid transparent}
#recommendations .preset b{font-size:17px;font-weight:800;letter-spacing:-.4px}
#recommendations .preset-icon{display:block;width:36px;height:32px;margin:0}#recommendations .preset-icon svg{width:36px;height:32px}
#recommendations .warm{background:#ffb6d2;color:#92224c}#recommendations .basic{background:#abd0ff;color:#174c91}#recommendations .high{background:#92e0cd;color:#006457}#recommendations .jump-bright{background:#a6e2fa;color:#145b7e}#recommendations .range{background:#c6adf5;color:#58328e}#recommendations .high-bright{background:#ffc695;color:#91400d}#recommendations .custom{background:#ffdfa3;color:#78500c;min-height:46px}#recommendations .active{border-color:currentColor;box-shadow:inset 0 0 0 1px currentColor}
#cueOptions:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 10px}#cueOptions label{grid-column:1/-1}#cueOptions select{width:100%;min-width:0;margin:0}#cueOptions .cue-inline-note{font-size:12px;white-space:nowrap}
.superseded-high{display:none!important}.player-range-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding-top:10px;order:99}.player-range-settings button{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0;min-height:44px;border:1px solid #a9d9d3;border-radius:10px;padding:8px 10px;background:#f0faf8;color:#21475a}.player-range-settings button>span{font-size:12px}.player-range-settings b{font-size:18px}.player-range-settings button:hover{background:#d7f1ea}

.custom-editor{width:min(600px,94vw);max-height:90dvh;border:0;border-radius:18px;padding:18px;color:#21445c;overflow:auto}.custom-head,.custom-actions{display:flex;justify-content:space-between;gap:8px;align-items:center}.custom-editor p{font-size:13px;line-height:1.6}.custom-editor input{width:100%;padding:12px;box-sizing:border-box}.custom-palette{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:12px 0}.custom-editor button,.custom-editor select,.custom-new{min-height:44px;padding:8px;border:1px solid #a6d8d0;border-radius:8px;background:#effaf7;color:#175c55}.custom-sequence{display:flex;flex-wrap:wrap;gap:6px;min-height:60px;background:#f2f6f8;padding:10px;border-radius:10px}.custom-sequence [aria-pressed=true]{background:#a6e4d7;border:2px solid #008578}.custom-edit-controls{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:12px 0}.custom-actions{flex-wrap:wrap}.custom-actions .primary{background:#008c83;color:white}.custom-head button{font-size:24px}.custom-editor::backdrop{background:#123a5266}

.custom-piano{position:relative;display:flex;height:148px;margin:10px 0;touch-action:pan-y;user-select:none}.custom-piano .custom-white{flex:1;min-width:0;padding:0 0 8px;display:flex;align-items:flex-end;justify-content:center;background:white;border:1px solid #92aaa9;border-radius:0 0 6px 6px;color:#214b5a;font-size:12px}.custom-piano .custom-black{position:absolute;top:0;width:8%;height:90px;padding:0 0 7px;background:#183444;color:white;display:flex;align-items:flex-end;justify-content:center;border-radius:0 0 5px 5px;font-size:9px;z-index:1}.editor-key-range{margin:8px 0;color:#00796d}.mode-bar .make-custom-scale{margin-left:auto;flex-shrink:0}.instrument-options .make-custom-scale{font-size:11px;padding:6px}.instrument-options{flex-wrap:wrap}.custom-editor button{word-break:keep-all}@media(max-width:900px){.instrument-heading{gap:5px}.instrument-options{gap:3px}.instrument-options .chip{font-size:10px;padding:5px}.instrument-heading h2{font-size:13px}}

.custom-key-viewport{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;margin:10px 0;border-radius:8px;scrollbar-width:thin}.custom-key-viewport .custom-piano{width:187.5%;margin:0}.custom-key-viewport .custom-black{width:4.25%}.keyboard-wrap.keyboard-scrollable{overflow-x:auto!important;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin}.keyboard-scrollable #keyboard{max-width:none!important;flex-shrink:0}.make-custom-scale.chip{background:#ffd0e2!important;border:1px solid #f18bb5!important;color:#9c2456!important;font-weight:800!important;white-space:nowrap}.make-custom-scale.chip:hover{background:#ffb8d3!important}.custom-piano,#keyboard{user-select:none;cursor:grab}.custom-piano:active,#keyboard:active{cursor:grabbing}

/* Native finger scrolling; no scrollbar handles required. */
.custom-key-viewport,.keyboard-wrap.keyboard-scrollable{scrollbar-width:none!important;-ms-overflow-style:none;scroll-behavior:auto!important;-webkit-overflow-scrolling:touch;touch-action:auto!important}.custom-key-viewport::-webkit-scrollbar,.keyboard-wrap.keyboard-scrollable::-webkit-scrollbar{display:none;width:0;height:0}.custom-piano,.custom-piano button,#keyboard,#keyboard button{touch-action:auto!important;-webkit-user-select:none;user-select:none}

/* Preserve the original visual proportions; compact spacing only. */
#customPreset[hidden],.help-links[hidden]{display:none!important}
.compact-range-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.compact-range-row>label{display:flex!important;flex-direction:column;align-items:stretch!important;min-width:0;gap:5px}
.compact-range-row .picker-trigger{width:100%;min-width:0}
.move-step-controls{display:flex;gap:3px;min-width:0;align-items:center}.move-step-controls button{width:24px;flex:none;height:40px;border-radius:6px}.move-step-controls select{width:0!important;flex:1;max-width:none!important;min-width:0}
.scale-off{background:#eef1f4!important;border-color:#9aa8b6!important;color:#344454!important}.scale-off.active{background:#fce0eb!important;border-color:#d76696!important;color:#962750!important}
.selector-card[data-scale-choice="none"]{background:#fce0eb!important;border-color:#d76696!important}
.solo-tools>span{display:none}.solo-tools{display:flex;gap:8px}.solo-tools>button{flex:1}
.session-high{display:block!important}.session-high>div{display:flex;align-items:center;justify-content:center}.session-high button{width:28px!important;height:32px!important}.session-high output{min-width:35px!important;font-size:14px!important}
#stop{background:transparent!important;border:0!important;color:#202832!important;min-width:52px;padding:2px 6px}#stop span{font-size:15px!important;font-weight:750}#stop:disabled{opacity:.55}
.mode-bar{flex-wrap:wrap}.bottom-grid{grid-template-columns:1fr 1fr}
@media(min-width:901px){
 .details>.detail-card:not(.advanced-core)>label:not(.volume-field){display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;gap:6px;min-height:50px;font-size:13px}
 .details>.detail-card:not(.advanced-core)>label select{width:100%;max-width:100%;height:40px;min-height:40px;padding:5px;font-size:13px}
 .details .volume-field{display:grid;grid-template-columns:1fr auto;gap:8px;min-width:0}.details .volume-field input{grid-column:1/-1;width:100%;min-width:0;max-width:100%;margin:0}
 .practice-fullscreen .practice-workspace{height:100dvh;box-sizing:border-box;padding:10px 20px;gap:6px;overflow-y:auto}
 .practice-fullscreen .practice-workspace>.player-panel{flex:0 0 auto;grid-template-columns:minmax(180px,1.1fr) minmax(0,2fr) minmax(170px,.9fr);grid-template-rows:auto auto;padding:0}
 .practice-fullscreen .player-panel .current-box{min-height:0;height:clamp(178px,23vh,230px);padding:8px}
 .practice-fullscreen .player-panel .vowel-section,.practice-fullscreen .player-info{min-height:0;padding:8px}
 .practice-fullscreen .big-vowel{font-size:clamp(48px,7vh,72px)}
 .practice-fullscreen .practice-workspace>.instrument-panel{margin-top:0;flex:0 0 auto;padding:0}
 .practice-fullscreen .staff-wrap{height:clamp(100px,16vh,160px)}
 .practice-fullscreen .keyboard{height:clamp(120px,19vh,190px)}
 .practice-fullscreen .mode-bar{padding:5px 8px;margin:4px 0}
 .practice-fullscreen .transport{margin-top:5px;padding-top:5px;grid-template-columns:repeat(5,minmax(50px,1fr)) minmax(105px,1fr) minmax(110px,1fr);min-height:65px;height:auto}
 .practice-fullscreen .solo-tools{margin:4px 0}.practice-fullscreen .solo-tools button{min-height:30px;padding:4px}
 .practice-fullscreen .player-range-settings{padding-top:5px;margin:0;position:static}.practice-fullscreen .player-range-settings button{min-height:36px;padding:5px 8px}
 .practice-fullscreen .instrument-heading{margin-bottom:3px}.practice-fullscreen .player-heading{margin-bottom:5px}
}
@media(max-width:900px){body{overflow-anchor:none}.bottom-grid{grid-template-columns:1fr}.instrument-options{flex-wrap:wrap}
 .details>.detail-card:not(.advanced-core){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-content:start}
 .details>.detail-card>h3,.details>.detail-card>.field-note,.details>.detail-card>.setting-hint,.details .volume-field{grid-column:1/-1}
 .details>.detail-card:not(.advanced-core)>label:not(.volume-field){display:flex;flex-direction:column;align-items:stretch;gap:6px;margin:0;padding:0;border:0;min-width:0;font-size:13px}
 .details select{width:100%;max-width:100%;height:42px;min-height:42px;font-size:13px;padding:5px}
 .details .volume-field{display:grid;grid-template-columns:1fr auto;gap:6px}.details .volume-field input{grid-column:1/-1;width:100%;min-width:0}
}

@media(min-width:901px){.practice-fullscreen .player-panel .player-info{gap:5px;min-height:0}.practice-fullscreen .player-panel .vowel-section{align-self:stretch}.practice-fullscreen .practice-workspace{padding-bottom:6px}.practice-fullscreen .player-heading{min-height:30px}.practice-fullscreen .keyboard-legend{margin:4px 0}}
@media(min-width:901px) and (max-height:800px){.practice-fullscreen .player-panel .player-info{font-size:10px;gap:3px}.practice-fullscreen .current-box{height:178px!important}.practice-fullscreen .big-vowel{font-size:48px}.practice-fullscreen .vowel-section{padding:5px!important}.practice-fullscreen .vowel-help{display:none}.practice-fullscreen .staff-wrap{height:100px}.practice-fullscreen .keyboard{height:120px}.practice-fullscreen .instrument-heading{margin:0}.practice-fullscreen .transport{min-height:56px}.practice-fullscreen .player-range-settings{padding-top:2px}}
@media(min-width:901px) and (max-height:800px){.practice-fullscreen .player-panel{row-gap:3px}.practice-fullscreen .player-heading{height:30px;min-height:30px;margin:0}.practice-fullscreen .player-panel .vowel-section{max-height:178px}.practice-fullscreen .vowel-section .section-heading{margin-bottom:3px}.practice-fullscreen .vowel-buttons button{min-height:30px;padding:4px}.practice-fullscreen .sound-special{margin-top:4px}.practice-fullscreen .mode-bar{min-height:38px;padding:3px;margin:2px 0}.practice-fullscreen .mode-bar button{padding:5px 8px;min-height:30px}.practice-fullscreen .transport .pause{width:44px;height:44px}.practice-fullscreen .transport{padding:3px 0;margin:2px 0}.practice-fullscreen .solo-tools button{padding:2px;min-height:26px}.practice-fullscreen .player-panel .player-info{gap:2px}.practice-fullscreen .keyboard-legend{margin:2px 0}}
@media(min-width:901px) and (max-height:800px){.practice-fullscreen .practice-workspace{padding-top:3px;padding-bottom:3px;gap:3px}.practice-fullscreen .instrument-heading{height:29px;min-height:29px}}

/* PC settings only: remove excess card spacing, preserve practice layout. */
@media(min-width:901px){
 body:not(.practice-fullscreen) #details .advanced-core{padding:10px 16px}
 body:not(.practice-fullscreen) #details .advanced-core>h3{margin-bottom:4px}
 body:not(.practice-fullscreen) #details .advanced-core .scale-performance-row{margin-top:5px;padding-top:6px}
 body:not(.practice-fullscreen) #details .advanced-core .scale-field-title,
 body:not(.practice-fullscreen) #details .advanced-core .performance-options>h3{height:24px;min-height:24px;margin-bottom:4px}
 body:not(.practice-fullscreen) #details .advanced-core .scale-performance-row>label{gap:4px!important}
 body:not(.practice-fullscreen) #details .advanced-core .compact-range-row>label{margin-top:4px;padding-top:6px;gap:4px}
 body:not(.practice-fullscreen) #details .advanced-core .compact-range-row .picker-trigger{height:62px;min-height:62px;padding:7px 30px 7px 12px;gap:3px}
 body:not(.practice-fullscreen) #details .advanced-core>.field-note{margin-top:6px;font-size:12px}
}

/* Explicit mobile field geometry, independent of host-page label/select styles. */
@media(max-width:900px){
 #details>.detail-card:not(.advanced-core){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;min-width:0!important}
 #details>.detail-card:not(.advanced-core)>label:not(.volume-field){display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;width:auto!important;min-width:0!important;max-width:100%!important;height:auto!important;gap:6px!important;padding:0!important;margin:0!important;float:none!important}
 #details>.detail-card:not(.advanced-core)>label select{display:block!important;position:static!important;box-sizing:border-box!important;width:100%!important;min-width:0!important;max-width:100%!important;flex:none!important;height:42px!important;min-height:42px!important;margin:0!important;font-size:13px!important}
 #details .move-step-controls{width:100%!important;min-width:0!important;max-width:100%!important;display:flex!important}
 #details .move-step-controls select{width:0!important;flex:1 1 0!important}
 #details .volume-field{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;grid-column:1/-1!important;min-width:0!important;width:100%!important}
 #details .volume-field input{grid-column:1/-1!important;width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important}
}
/* Touch landscape uses available viewport height, never a fixed desktop canvas. */
@media(pointer:coarse) and (orientation:landscape),(max-width:1000px) and (max-height:600px){
 body.practice-fullscreen .practice-workspace{position:fixed!important;inset:0!important;height:100dvh!important;max-height:100dvh!important;overflow-y:auto!important;overflow-x:hidden!important;padding:8px max(10px,env(safe-area-inset-right)) 14px max(10px,env(safe-area-inset-left))!important;display:flex!important;gap:6px!important;-webkit-text-size-adjust:100%}
 body.practice-fullscreen .practice-workspace>.player-panel{display:grid!important;grid-template-columns:minmax(160px,1fr) minmax(0,2fr)!important;grid-template-rows:auto auto!important;flex:0 0 auto!important;min-height:0!important;height:auto!important;padding:0!important}
 body.practice-fullscreen .player-heading{grid-column:1/-1!important;grid-row:1!important;height:auto!important;min-height:28px!important}
 body.practice-fullscreen .player-panel .vowel-section{grid-column:1!important;grid-row:2!important;max-height:none!important;min-height:0!important;padding:5px!important}
 body.practice-fullscreen .player-panel .current-box{grid-column:2!important;grid-row:2!important;height:auto!important;min-height:140px!important;padding:5px!important}
 body.practice-fullscreen .player-panel .player-info{display:none!important}
 body.practice-fullscreen .big-vowel{font-size:44px!important}
 body.practice-fullscreen .practice-workspace>.instrument-panel{flex:0 0 auto!important;min-height:0!important;margin:0!important;padding:0!important}
 body.practice-fullscreen .staff-wrap{height:105px!important}
 body.practice-fullscreen .keyboard{height:110px!important}
 body.practice-fullscreen .transport{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;height:auto!important;min-height:60px!important;gap:5px!important}
 body.practice-fullscreen .player-range-settings{position:static!important;margin:0!important;padding-top:8px!important}
 body.practice-fullscreen .mobile-bottom,body.practice-fullscreen .mobile-screen-tabs{display:none!important}
 body.practice-fullscreen #toggleFullscreen{display:block!important}
}

.solo-tools{flex-wrap:wrap}.solo-meter{display:inline-flex;align-items:center;gap:6px;font-size:13px;white-space:nowrap}.solo-meter select{width:auto;min-width:68px;min-height:34px;padding:4px 8px;border:1px solid #e4a6c0;border-radius:8px;background:#fff;color:#9c2859}

/* Keep the metronome action and meter together on phone screens. */
@media(max-width:900px){
 .solo-tools{flex-wrap:nowrap;gap:6px;min-width:0}
 .solo-tools #soloMetronome{flex:1 1 auto;min-width:0;white-space:nowrap;font-size:12px;line-height:1.2;padding:8px 6px;min-height:42px}
 .solo-tools .solo-meter{flex:0 0 auto;margin:0;gap:4px;font-size:12px;white-space:nowrap}
 .solo-tools .solo-meter select{width:62px;min-width:62px;max-width:62px;min-height:42px;padding:4px}
}