:root{font-family:'DM Sans',sans-serif;color:#2e342f;background:#f7f5ef;font-synthesis:none;--paper:#f7f5ef;--ink:#2e342f;--muted:#6c7169;--line:#dedfd5;--green:#335c48;--coral:#ed795e}*{box-sizing:border-box}body{margin:0}button,select,input{font:inherit}button,select{color:inherit}button,a,select,input{-webkit-tap-highlight-color:transparent}button,select{cursor:pointer}button{touch-action:manipulation}button:disabled{cursor:default}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #3155b0;outline-offset:5px}a{color:inherit;text-decoration:none}button{border:0}svg{display:block}button svg{width:20px;height:20px}button{transition:background .18s,transform .18s,box-shadow .18s}button:active:not(:disabled){transform:translateY(2px)}.app-shell{width:min(1120px,calc(100% - 96px));margin:auto}.site-header{height:112px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;font-family:'Outfit',sans-serif;font-weight:650;font-size:36px;letter-spacing:-1.8px}.brand-dot{color:var(--coral)}.brand-mark{display:flex;align-items:center;gap:4px;margin-right:11px}.brand-mark i{display:block;width:5px;height:14px;border-radius:4px;background:var(--coral)}.brand-mark i:nth-child(2){height:28px}.brand-mark i:nth-child(3){height:21px}.header-note{color:var(--muted);font-size:13px;letter-spacing:.15px;margin-left:40px}.help-button{display:flex;align-items:center;gap:8px;background:transparent;font-size:13px;font-weight:600;padding:10px 0}.help-button>span{border:1.5px solid var(--muted);border-radius:50%;width:19px;height:19px;display:grid;place-items:center;font-size:12px}.help-button:hover{color:var(--green)}.intro{display:flex;justify-content:space-between;align-items:center;padding:49px 0 39px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2.1px;display:flex;align-items:center;gap:8px;margin:0 0 13px}.eyebrow>span{width:6px;height:6px;background:var(--coral);border-radius:50%}h1,h2,p{margin:0}h1{font-family:'Outfit',sans-serif;font-size:clamp(40px,4.9vw,61px);font-weight:550;line-height:1.12;letter-spacing:-2.5px}.title-dot{color:var(--coral)}.intro-copy{margin-top:13px;color:var(--muted);font-size:15px;line-height:1.6}.sing-doodle{width:185px;transform:rotate(-8deg);margin-right:34px;margin-top:4px;color:#6b8d6d}.sing-doodle svg{width:145px;margin:auto}.sing-doodle span{display:block;font-size:11px;text-align:center;margin-top:-2px;color:#778168;letter-spacing:.3px}.key-panel{display:grid;grid-template-columns:1fr 1.3fr 1fr;align-items:center;background:#eeeee2;border:1px solid #e3e5d8;border-radius:18px;padding:26px 32px;gap:24px}.section-kicker{font-size:10px;font-weight:700;letter-spacing:1.6px}.key-description p{font-family:'Outfit',sans-serif;font-size:20px;line-height:1.35;margin-top:8px;font-weight:400;letter-spacing:-.3px}.key-description strong{font-weight:600}.key-stepper{display:flex;align-items:center;justify-content:center;gap:24px}.round-button{display:grid;place-items:center;border:1px solid #cdd1c2;width:44px;height:44px;border-radius:50%;background:transparent;font-size:26px;line-height:1}.round-button:hover:not(:disabled){background:#dce1d1;border-color:#a7b39b}.round-button:disabled{opacity:.3}.key-select-wrap{position:relative;text-align:center;min-width:120px;padding:0 2px}.key-select-wrap>select{position:absolute;inset:0;opacity:0;width:100%;height:100%}.key-select-wrap:focus-within{outline:3px solid #3155b0;outline-offset:5px;border-radius:4px}#key-display{display:block;font-family:'Outfit',sans-serif;font-size:49px;letter-spacing:-1.8px;line-height:1.05}#key-display small{font-family:'DM Sans',sans-serif;font-size:16px;letter-spacing:0;margin-left:4px}.select-hint{margin-top:10px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:9px;letter-spacing:1.5px;color:#616955;font-weight:600}.select-hint svg{width:12px;height:12px;stroke:currentColor;stroke-width:1.5}.octave-control{border-left:1px solid #d7daca;padding-left:35px;justify-self:end;width:205px}.octave-control>label{display:block;font-size:12px;font-weight:500;margin-bottom:8px}.select-box{display:flex;position:relative;width:165px;background:#f8f8f1;border:1px solid #d6daca;border-radius:7px}.select-box select{background:transparent;border:0;appearance:none;padding:9px 32px 9px 12px;width:100%;font-size:13px}.select-box>span{pointer-events:none;position:absolute;right:12px;top:6px}.octave-hint{display:block;font-size:11px;color:var(--muted);margin-top:8px}.notes-section{padding-top:35px}.section-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:15px}h2{font-family:'Outfit',sans-serif;font-size:20px;font-weight:500;letter-spacing:-.45px}.small-hint{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:10px}.small-hint>span{font-size:22px;line-height:1;color:#89947b}.note-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:11px}.note-button{position:relative;display:flex;flex-direction:column;align-items:center;border-radius:13px;padding:24px 5px 18px;color:var(--note-ink);background:var(--note-color);border:1px solid color-mix(in srgb,var(--note-ink) 12%,transparent);border-bottom:5px solid color-mix(in srgb,var(--note-color) 82%,var(--note-ink));min-height:184px;isolation:isolate}.note-button:hover{transform:translateY(-4px);box-shadow:0 6px 0 -3px color-mix(in srgb,var(--note-ink) 12%,transparent)}.note-button:active,.note-button.is-playing{transform:translateY(3px);box-shadow:inset 0 0 0 2px var(--note-ink);border-bottom-width:2px}.note-button.is-playing:before{content:'';position:absolute;top:11px;right:11px;width:6px;height:6px;border-radius:50%;background:currentColor;animation:pulse .75s ease-in-out infinite alternate}.degree{font-family:'Outfit',sans-serif;font-size:47px;font-weight:550;letter-spacing:-2px;line-height:1.2}.high-dot{position:absolute;top:12px;font-size:20px;line-height:10px}.solfege{font-family:'Outfit',sans-serif;font-size:18px;font-weight:500;margin-top:3px}.pitch-name{font-size:11px;opacity:.8;letter-spacing:.4px;margin-top:20px}.note-under{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:15px 0 25px;font-size:11px;color:var(--muted)}.note-under>span:first-child{display:flex;align-items:center;gap:7px}.little-dot{width:4px;height:4px;border-radius:50%;background:#8b947e;flex-shrink:0}.keyboard-hint{display:flex;align-items:center;gap:5px}kbd{font-family:inherit;border:1px solid #dddfd4;min-width:19px;padding:1px 4px;border-radius:4px;text-align:center;line-height:1.4;font-size:10px;color:var(--muted)}.keyboard-hint kbd:first-child{margin-left:5px}.playback-panel{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:23px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.scale-controls{display:flex;gap:19px;align-items:center}.play-button{background:var(--green);color:#faf9f1;border-radius:8px;min-height:46px;padding:12px 19px;display:flex;align-items:center;gap:11px;font-size:13px;font-weight:550;min-width:171px;justify-content:center}.play-button:hover{background:#244b38}.play-button svg{fill:currentColor;width:17px;height:17px}.direction-label select,.sound-controls select{border:0;background:transparent;padding:8px 18px 8px 0;font-size:12px}.sound-controls{display:flex;align-items:center;gap:23px}.sound-controls>label{font-size:12px;display:flex;gap:12px;align-items:center;color:var(--muted)}.sound-controls select{color:var(--ink)}.control-divider{width:1px;height:22px;background:var(--line)}.volume-control{gap:10px!important}.volume-control svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.volume-control input{width:80px;accent-color:var(--green);height:4px;cursor:pointer}.volume-control output{font-size:11px;min-width:28px}.session-strip{display:flex;justify-content:space-between;align-items:center;padding:14px 0;gap:15px;min-height:49px}.session-status{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}.status-dot{width:6px;height:6px;border-radius:50%;background:#a6ac9c;flex-shrink:0}.status-dot.active{background:var(--green);animation:pulse .6s ease-in-out infinite alternate}.stop-button{background:transparent;font-size:11px;display:flex;align-items:center;gap:7px;padding:4px 0}.stop-button>span{font-size:9px}.stop-button:disabled{opacity:.4}.stop-button kbd{margin-left:3px}.practice-tip{display:flex;gap:17px;align-items:center;background:#f0e9dc;border:1px solid #e7e1d4;border-radius:10px;padding:21px 25px;margin-top:18px;margin-bottom:40px}.tip-icon{font-size:34px;color:#b47a37;line-height:1}.practice-tip .section-kicker{font-size:9px;color:#8c683d}.practice-tip p{font-size:12px;line-height:1.7;margin-top:4px;color:#6b6456}.practice-tip strong{font-weight:600;color:#65543b}.tip-squiggle{font-size:38px;color:#c2ad89;margin-left:auto;margin-right:10px;transform:rotate(12deg)}footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:23px 0 27px;font-size:10px;color:#85887d}footer>span:last-child{display:flex;align-items:center;gap:12px}.footer-flower{color:var(--coral);font-size:18px}.practice-help{padding:22px 24px;background:#f2e9dd;border-radius:12px;margin-bottom:24px;display:grid;grid-template-columns:repeat(3,1fr);gap:15px;font-size:12px}.practice-help[hidden]{display:none}.practice-help b{font-size:12px}.practice-help p{line-height:1.6;margin-top:7px;color:#6a6256}.help-footnote{grid-column:1/-1;font-size:11px}#audio-error{background:#f8dfd9;border:1px solid #dca291;color:#783b2b;padding:14px;border-radius:8px;font-size:13px;line-height:1.5;margin-bottom:10px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes pulse{from{opacity:.4}to{opacity:1}}@media(min-width:1500px){.app-shell{width:1120px}.site-header{height:125px}.intro{padding-top:58px;padding-bottom:45px}.note-button{min-height:200px;padding-top:29px}.key-panel{padding-top:30px;padding-bottom:30px}.notes-section{padding-top:40px}.practice-tip{margin-top:24px;margin-bottom:45px}}@media(max-width:1000px){.app-shell{width:calc(100% - 56px)}.key-panel{padding:24px;gap:15px;grid-template-columns:1fr 1.3fr 1fr}.key-stepper{gap:12px}.octave-control{width:165px;padding-left:20px}.select-box{width:145px}.note-grid{gap:8px}.note-button{min-height:165px;padding-top:22px}.degree{font-size:41px}.pitch-name{margin-top:15px}.sound-controls{gap:14px}.scale-controls{gap:12px}.volume-control input{width:60px}.header-note{margin-left:0;font-size:11px}.keyboard-hint{display:none}}@media(max-width:760px){.app-shell{width:calc(100% - 40px)}.site-header{height:86px}.header-note{display:none}.brand{font-size:32px}.help-button{font-size:11px}.intro{padding:33px 0 30px}.eyebrow{font-size:8px;letter-spacing:1.7px}h1{font-size:46px;letter-spacing:-2px}.intro-copy{font-size:13px;max-width:230px;margin-top:12px}.sing-doodle{width:100px;margin:0 0 0 10px}.sing-doodle svg{width:100px}.sing-doodle span{font-size:8px}.key-panel{grid-template-columns:1fr 1fr;padding:20px;gap:22px 15px;border-radius:14px}.key-description{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:12px}.key-description p{margin:0;font-size:14px}.key-description p br{display:none}.section-kicker{font-size:8px;letter-spacing:1.3px}.key-stepper{justify-content:flex-start;gap:12px}.key-select-wrap{min-width:90px}#key-display{font-size:38px}#key-display small{font-size:12px;margin-left:2px}.round-button{width:35px;height:35px;flex-shrink:0;font-size:23px}.select-hint{font-size:7px;letter-spacing:1px;margin-top:7px}.octave-control{width:145px;padding-left:18px}.octave-control>label{font-size:10px}.select-box{width:125px}.select-box select{font-size:11px;padding:8px 27px 8px 9px}.octave-hint{font-size:9px}.section-top{margin-bottom:15px;align-items:flex-start}.notes-section{padding-top:27px}h2{font-size:17px;max-width:200px;line-height:1.3}.small-hint{font-size:10px;gap:5px;align-items:center;max-width:110px;line-height:1.5}.small-hint>span{font-size:19px}.note-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.note-button{min-height:137px;padding:14px 5px 12px;border-radius:10px}.degree{font-size:37px;letter-spacing:-1.5px}.solfege{font-size:15px;margin-top:1px}.pitch-name{font-size:10px;margin-top:12px}.high-dot{top:6px;font-size:16px}.note-under{padding:13px 0 20px;font-size:9px;line-height:1.5}.playback-panel{flex-direction:column;align-items:stretch;gap:19px;padding:20px 0}.scale-controls{justify-content:space-between}.play-button{min-width:165px;font-size:12px}.direction-label select{font-size:11px;padding-right:0}.sound-controls{justify-content:space-between;gap:12px}.sound-controls>label{font-size:11px;gap:13px}.sound-controls select{font-size:11px}.control-divider{margin-left:auto;margin-right:8px}.volume-control input{width:75px}.volume-control output{font-size:10px}.session-status{font-size:10px}.stop-button{font-size:10px}.stop-button kbd{display:none}.practice-tip{margin-top:14px;margin-bottom:29px;padding:18px 16px;gap:12px}.tip-icon{font-size:27px}.practice-tip p{font-size:11px;line-height:1.7}.tip-squiggle{display:none}.practice-tip .section-kicker{font-size:8px}footer{padding:18px 0 24px;font-size:8px;gap:15px;line-height:1.5}footer>span:last-child{gap:7px}.footer-flower{font-size:15px}.practice-help{grid-template-columns:1fr;padding:18px;gap:15px}.practice-help p{margin-top:3px}.help-footnote{margin:0}}@media(max-width:380px){.app-shell{width:calc(100% - 28px)}h1{font-size:40px}.sing-doodle{width:75px}.sing-doodle svg{width:75px}.sing-doodle span{font-size:7px}.key-panel{padding:16px;gap:20px 8px}.key-stepper{gap:7px}.key-select-wrap{min-width:77px}.octave-control{width:128px;padding-left:12px}.select-box{width:114px}.key-description p{font-size:12px}.note-grid{gap:8px}.note-button{min-height:128px}.volume-control input{width:55px}.play-button{min-width:150px;padding:12px 14px}.control-divider{margin-right:0}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

@media(max-width:760px){.key-panel{grid-template-columns:minmax(0,1fr) 125px}.key-description p{font-size:12px;max-width:145px;text-align:right}.key-stepper{gap:8px;min-width:0}.key-select-wrap{min-width:70px}#key-display{font-size:35px}.octave-control{width:125px;padding-left:12px}.select-box{width:112px}.select-box select{font-size:10px}.round-button{width:34px;height:34px}}
@media(max-width:380px){.key-panel{grid-template-columns:minmax(0,1fr) 110px}.key-stepper{gap:6px}.key-select-wrap{min-width:64px}.round-button{width:32px;height:32px}.octave-control{width:110px;padding-left:9px}.select-box{width:100px}.select-box select{padding-left:7px;padding-right:20px}.select-box>span{right:8px}.key-description p{max-width:125px;font-size:11px}}

/* Extended practice controls and display preferences. */
[hidden]{display:none!important}.header-actions{display:flex;align-items:center;gap:24px}.settings-link{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;padding:12px 0}.settings-link:hover,.back-link:hover{color:var(--green)}.settings-link[aria-current=page]{text-decoration:underline;text-underline-offset:6px}.original-key-strip{display:flex;align-items:center;gap:10px;padding:12px 4px 0;font-size:12px;color:var(--muted);flex-wrap:wrap}.mark-original{display:grid;place-items:center;border:1px solid var(--line);background:transparent;border-radius:50%;width:36px;height:36px;color:var(--green);flex-shrink:0}.mark-original svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}.mark-original:hover,.mark-original[aria-pressed=true]{background:#e5eadd;border-color:#a6b89d}#key-offset{margin-left:auto;background:#eeeee2;padding:7px 11px;border-radius:6px;font-size:11px;color:var(--green)}.notes-section{padding-top:28px}.range-group{margin:0 0 21px}.range-group h3{display:flex;align-items:center;gap:12px;margin:0 0 12px;font-weight:600;font-size:11px;color:var(--muted)}.range-group h3 span{font-weight:400;font-size:10px;opacity:.85}.neighboring-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-width:550px}.range-group:last-of-type .neighboring-grid{margin-left:auto}.range-group:last-of-type h3{justify-content:flex-end}.note-button{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none}.note-primary{font-family:'Outfit',sans-serif;font-size:42px;font-weight:550;line-height:1.2;letter-spacing:-1px;display:block}.note-secondary{font-family:'Outfit',sans-serif;font-size:18px;font-weight:500;margin-top:8px;display:block;line-height:1.3}.number-label{position:relative;display:inline-block}.higher-number:before,.lower-number:after{content:'·';position:absolute;left:50%;transform:translateX(-50%);font-size:.55em;line-height:.5}.higher-number:before{top:-.22em}.lower-number:after{bottom:-.2em}.neighboring-grid .note-button{min-height:136px;padding-top:17px;padding-bottom:14px}.neighboring-grid .note-primary{font-size:34px}.neighboring-grid .note-secondary{font-size:15px}.neighboring-grid .pitch-name{margin-top:13px}.back-link{display:inline-block;margin-top:32px;font-size:13px;color:var(--muted)}.settings-intro{padding:32px 0 40px}.label-setting{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:50px;padding:30px 0 40px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.toggle-row{position:relative;display:flex;align-items:center;gap:20px;margin-top:25px;cursor:pointer;font-size:15px;line-height:1.5}.toggle-row small{display:block;font-size:12px;color:var(--muted);margin-top:6px}.toggle-row input{position:absolute;opacity:0;width:1px;height:1px}.toggle-track{margin-left:auto;background:#b7bcaf;flex-shrink:0;width:46px;height:27px;border-radius:20px;padding:4px;transition:background .15s}.toggle-track:before{content:'';display:block;width:19px;height:19px;background:var(--paper);border-radius:50%;transition:transform .15s}.toggle-row input:checked+.toggle-track{background:var(--green)}.toggle-row input:checked+.toggle-track:before{transform:translateX(19px)}.toggle-row input:focus-visible+.toggle-track{outline:3px solid #3155b0;outline-offset:5px}.preview-wrap{text-align:center}.preview-wrap>.section-kicker{display:block;margin-bottom:20px}.preview-wrap .note-button{width:140px;margin:auto;min-height:180px}.preview-wrap p{font-size:11px;color:var(--muted);margin-top:15px}.settings-footnote{font-size:12px;color:var(--muted);margin:22px 0 60px}
@media(max-width:760px){.header-actions{gap:15px}.settings-link{font-size:11px}.settings-link span{display:none}.header-actions .help-button{font-size:0;gap:0}.header-actions .help-button>span{font-size:12px;width:24px;height:24px}.original-key-strip{gap:7px;font-size:10px;padding-top:10px}#key-offset{font-size:9px;padding:6px 8px}.mark-original{width:34px;height:34px}.range-group{margin-bottom:19px}.range-group h3{font-size:10px;gap:8px}.range-group h3 span{font-size:9px}.neighboring-grid{max-width:none}.range-group:last-of-type h3{justify-content:flex-start}.note-primary{font-size:32px;letter-spacing:-.8px}.note-secondary{font-size:15px;margin-top:7px}.neighboring-grid .note-button{min-height:121px;padding-top:15px;padding-bottom:12px}.neighboring-grid .note-primary{font-size:28px}.neighboring-grid .note-secondary{font-size:14px}.neighboring-grid .pitch-name{margin-top:10px}.label-setting{grid-template-columns:1fr;gap:35px;padding-top:25px}.toggle-row{font-size:13px;gap:15px}.toggle-row small{font-size:11px}.settings-intro{padding-bottom:30px}.settings-footnote{margin-bottom:40px}.preview-wrap .note-button{width:130px}.small-hint{max-width:116px}}
@media(max-width:380px){.note-primary{font-size:29px}.neighboring-grid .note-primary{font-size:25px}.note-secondary{font-size:14px}.range-group h3{font-size:9px}.original-key-strip{font-size:9px}#key-offset{font-size:8px;padding:6px}.header-actions{gap:13px}}
/* Route headings receive focus for screen readers, without a control outline. */
h1[tabindex="-1"]:focus{outline:none}

/* Language switching and release details. */
.language-toggle{border:1px solid var(--line);border-radius:6px;padding:7px 10px;background:transparent;font-size:12px;white-space:nowrap}.language-toggle:hover{background:#eeeee2}.language-toggle:focus-visible{outline:3px solid #3155b0;outline-offset:4px}.eyebrow>span[data-i18n]{width:auto;height:auto;background:none;border-radius:0}.help-button>span[data-i18n]{border:0;border-radius:0;width:auto;height:auto;display:inline;font:inherit}.small-hint>span[data-i18n]{font:inherit;color:inherit}.range-group h3>span[data-i18n]{font:inherit;opacity:1}.release-details{margin-top:28px;border-bottom:1px solid var(--line);padding-bottom:24px}.release-details summary{cursor:pointer;font-size:14px;font-weight:600;padding:10px 0;color:var(--green)}.release-details summary:focus-visible{outline:3px solid #3155b0;outline-offset:4px}.release-details h2{font-size:17px;margin:24px 0 18px}.release-date{font-size:12px;color:var(--muted);margin-top:7px}.release-history{list-style:none;padding:0;margin:0;max-width:620px}.release-history>li{padding:0 0 22px;margin:0}.release-history h3{font-size:13px;font-weight:600;margin:0 0 5px}.release-history time{font-size:11px;color:var(--muted)}.release-history ul{padding-left:18px;margin:10px 0 0;color:var(--muted);font-size:12px;line-height:1.8}.release-history li:last-child{padding-bottom:0}html[lang=zh-Hans]{font-family:'DM Sans','PingFang SC','Microsoft YaHei',sans-serif}html[lang=zh-Hans] h1{letter-spacing:-1px;line-height:1.25}html[lang=zh-Hans] .eyebrow,html[lang=zh-Hans] .section-kicker{letter-spacing:1px}html[lang=zh-Hans] .intro-copy,html[lang=zh-Hans] .practice-help{line-height:1.8}
@media(max-width:760px){.header-actions{gap:12px}.header-actions .help-button>span[data-i18n]{display:none}.language-toggle{padding:6px 8px;font-size:10px}.release-details{margin-top:22px}.release-history ul{font-size:11px}html[lang=zh-Hans] .key-description p{line-height:1.7}html[lang=zh-Hans] h1{font-size:39px}html[lang=zh-Hans] .section-top h2{font-size:16px;line-height:1.6}}
@media(max-width:380px){.header-actions{gap:9px}.language-toggle{padding:5px 7px}.settings-link{font-size:10px}html[lang=zh-Hans] h1{font-size:34px}}
.range-group h3 .range-description{font-size:10px;font-weight:400;opacity:.85}
@media(max-width:760px){.range-group h3 .range-description{font-size:9px}}
.stop-button>span[data-i18n]{font:inherit}
@media(max-width:760px){.settings-link>span[data-i18n]{display:inline}}

/* Vocal practice library. */
.practice-tabs{display:flex;align-items:stretch;gap:30px;border-bottom:1px solid var(--line);min-height:58px}.practice-tabs a{display:flex;align-items:center;position:relative;padding:17px 1px;font-size:13px;font-weight:550;color:var(--muted)}.practice-tabs a[aria-current=page]{color:var(--green)}.practice-tabs a[aria-current=page]:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--coral);border-radius:3px 3px 0 0}.warmups-intro{padding:40px 0 30px}.warmups-intro .eyebrow{margin-bottom:14px}.warmups-intro h1{font-size:clamp(36px,4.8vw,56px)}.warmup-key-strip{display:flex;align-items:center;justify-content:space-between;gap:24px;background:#eeeee2;border:1px solid #e3e5d8;border-radius:12px;padding:22px 25px;margin-bottom:28px}.warmup-key-strip p{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.6}.warmup-key-fields{display:flex;gap:16px}.warmup-key-fields label{display:grid;gap:7px;font-size:11px;color:var(--muted)}.warmup-key-fields select{background:#f8f8f1;border:1px solid #d6daca;border-radius:6px;min-height:36px;padding:7px 30px 7px 10px;font-size:12px;min-width:125px}.warmup-key-fields label:last-child select{min-width:95px}.exercise-library-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:0 0 18px}.exercise-library-heading>span{font-size:11px;color:var(--muted)}.exercise-list{display:flex;flex-direction:column;gap:15px}.exercise-card{display:grid;grid-template-columns:46px minmax(0,1fr) 237px;align-items:start;gap:20px;padding:26px;border:1px solid var(--line);border-radius:13px;background:#faf8f2;transition:border-color .18s}.exercise-card.is-active{border-color:#6e9277}.exercise-index{background:var(--exercise-color);width:42px;height:42px;display:grid;place-items:center;font-family:'Outfit',sans-serif;font-weight:550;font-size:20px;border-radius:50%;color:var(--green);margin-top:1px}.exercise-content{min-width:0}.exercise-card-heading{display:flex;align-items:center;gap:13px;flex-wrap:wrap}.exercise-card h3{font-family:'Outfit',sans-serif;font-weight:550;font-size:23px;letter-spacing:-.5px;margin:0}.exercise-kind{font-size:8px;letter-spacing:1.2px;color:#747b67;font-weight:650;border:1px solid #e2e4d8;border-radius:4px;padding:4px 6px;line-height:1}.exercise-description{font-size:12px;color:var(--muted);line-height:1.6;margin-top:7px}.exercise-card-pattern{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:15px}.exercise-step{display:inline-flex;align-items:center;justify-content:center;min-width:27px;min-height:29px;background:#eeeee3;border-radius:5px;padding:3px 5px;color:#5c6652;font-family:'Outfit',sans-serif;font-size:13px;font-weight:500;line-height:1.2}.exercise-step.is-current{color:#faf8f2;background:var(--green)}.exercise-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:10px;color:var(--muted);line-height:1.6}.exercise-meta>span{color:#89907f}.exercise-reference{display:inline-block;color:#7b8371;font-size:9px;text-decoration:underline;text-underline-offset:3px;margin-top:10px}.exercise-reference:hover{color:var(--green)}.exercise-card-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-self:center}.exercise-card-actions button{font-size:12px;min-height:39px;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:6px}.exercise-card-actions button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}.exercise-preview{background:#eeeee2;color:var(--green)}.exercise-preview svg{fill:currentColor!important;stroke:0!important}.exercise-preview:hover{background:#e1e6d6}.exercise-edit{background:transparent;border:1px solid #d7dccd}.exercise-edit:hover{background:#eeeee2}.exercise-card-actions .exercise-start{grid-column:1/-1;min-width:0;min-height:42px;justify-content:space-between;padding:10px 14px}.exercise-method{display:flex;align-items:flex-start;gap:16px;background:#f0e9dc;border:1px solid #e7e1d4;border-radius:10px;padding:22px 25px;margin-top:25px}.exercise-method h2{font-size:17px}.exercise-method p{font-size:11px;line-height:1.8;color:#6b6456;margin-top:8px;max-width:750px}.exercise-method .tip-icon{font-size:28px;margin-top:3px}.exercise-sources{font-size:10px;line-height:1.9;color:var(--muted);max-width:800px;margin:18px 0 35px}.exercise-sources a{color:var(--green);text-decoration:underline;text-underline-offset:3px;white-space:normal}.exercise-player{position:sticky;top:12px;z-index:5;padding:20px 24px;background:#e8ecdf;border:1px solid #bdcdb1;border-radius:12px;margin:0 0 25px;box-shadow:0 8px 18px -16px #546a48}.exercise-player-top{display:flex;align-items:center;justify-content:space-between;gap:15px}.exercise-player-top h2{margin-top:6px;font-size:21px}.exercise-player-top .section-kicker{color:#58704e;font-size:8px}.exercise-stop{font-size:11px;padding:9px 12px;background:#dce4d1;color:var(--green);border-radius:6px;white-space:nowrap}.exercise-stop:hover{background:#cfdbc2}#exercise-cue{font-size:12px;line-height:1.7;color:#5b6b52;margin-top:9px}.exercise-follow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:16px}.exercise-follow .exercise-step{min-width:37px;min-height:39px;font-size:19px;background:#f6f6ed;color:var(--green)}.exercise-follow .exercise-step.is-current{background:var(--green);color:#faf8f2}.exercise-progress{background:#cdd8c1;overflow:hidden;border-radius:2px;height:4px;margin-top:16px}.exercise-progress>span{display:block;height:100%;background:#5c8050;transform:scaleX(0);transform-origin:left center}#exercise-status{font-size:11px;color:#52664b;margin-top:11px;line-height:1.5;min-height:17px}#exercise-dialog{border:1px solid #dddccf;background:var(--paper);color:var(--ink);border-radius:16px;padding:28px;width:min(540px,calc(100% - 32px));max-height:calc(100dvh - 40px);overflow:auto}#exercise-dialog::backdrop{background:rgb(35 44 35 / .4)}.exercise-dialog-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.exercise-dialog-heading h2{font-size:25px;margin-top:7px;line-height:1.35}.exercise-dialog-heading .section-kicker{color:var(--muted);font-size:8px}.dialog-close{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:#eeeee2;color:var(--muted);font-size:25px;flex-shrink:0;line-height:1}.exercise-dialog-pattern{font-family:'Outfit',sans-serif;font-size:15px;color:#66755a;letter-spacing:2px;margin-top:15px;background:#eeeee2;padding:11px 13px;border-radius:7px;line-height:1.6;overflow-wrap:anywhere}.exercise-fields{display:grid;grid-template-columns:1fr 1fr;gap:22px 18px;margin-top:23px}.exercise-fields label{display:flex;flex-direction:column;gap:8px;min-width:0;font-size:12px;font-weight:500}.exercise-fields input,.exercise-fields select{background:#fcfbf5;border:1px solid #cfd6c5;color:var(--ink);border-radius:6px;padding:10px 11px;min-height:42px;width:100%;font-size:14px}.exercise-fields small{font-size:10px;color:var(--muted);font-weight:400;line-height:1.6}.exercise-plan-summary{font-size:11px;line-height:1.8;color:var(--green);background:#eeeee2;padding:11px 13px;border-radius:7px;margin-top:22px;min-height:42px}.exercise-dialog-actions{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-top:22px}.exercise-dialog-actions>button:first-child{background:transparent;border:1px solid var(--line);border-radius:6px;padding:11px 17px;font-size:12px}.exercise-dialog-actions .play-button{min-width:130px;font-size:12px}html[lang=zh-Hans] .exercise-card h3{letter-spacing:0}html[lang=zh-Hans] .warmups-intro h1{font-size:clamp(34px,4.4vw,50px)}
@media(max-width:1000px){.exercise-card{grid-template-columns:40px minmax(0,1fr) 200px;gap:16px;padding:22px}.exercise-card h3{font-size:21px}.exercise-card-actions{gap:8px}.exercise-card-actions button{font-size:11px}.exercise-meta{font-size:9px;gap:8px}.warmup-key-strip{padding:20px}.exercise-index{width:38px;height:38px;font-size:18px}}
@media(max-width:760px){.practice-tabs{min-height:48px;gap:25px}.practice-tabs a{font-size:12px;padding:14px 0}.warmups-intro{padding:30px 0 25px}.warmups-intro h1{font-size:38px;letter-spacing:-1.4px}.warmups-intro .intro-copy{max-width:none}.warmup-key-strip{flex-direction:column;align-items:stretch;gap:17px;padding:18px;margin-bottom:25px}.warmup-key-strip p{font-size:11px;margin-top:7px}.warmup-key-fields{gap:12px;display:grid;grid-template-columns:1fr 1fr}.warmup-key-fields select,.warmup-key-fields label:last-child select{min-width:0;width:100%;font-size:11px;padding-right:15px}.warmup-key-fields label{font-size:10px}.exercise-library-heading{align-items:flex-start;gap:12px;margin-bottom:16px}.exercise-library-heading h2{max-width:180px;font-size:17px}.exercise-library-heading>span{font-size:9px;white-space:nowrap;padding-top:3px}.exercise-card{grid-template-columns:30px minmax(0,1fr);gap:13px;padding:19px 16px}.exercise-index{width:29px;height:29px;font-size:15px}.exercise-card h3{font-size:20px;line-height:1.25}.exercise-card-heading{gap:7px}.exercise-kind{font-size:7px;letter-spacing:.6px;padding:3px 4px}.exercise-description{font-size:11px;line-height:1.7}.exercise-card-pattern{gap:4px;margin-top:13px}.exercise-step{font-size:11px;min-width:23px;min-height:26px;padding:3px 4px}.exercise-meta{gap:5px;font-size:9px;line-height:1.7}.exercise-reference{font-size:8px}.exercise-card-actions{grid-column:1/-1;grid-template-columns:1fr 1fr 1.1fr;gap:8px;margin-top:1px}.exercise-card-actions .exercise-start{grid-column:auto;padding:10px 12px;min-height:38px}.exercise-card-actions button{font-size:10px;gap:5px;min-height:38px}.exercise-card-actions button svg{width:13px;height:13px}.exercise-method{padding:18px 16px;gap:11px}.exercise-method h2{font-size:16px;max-width:none}.exercise-method p{font-size:10px}.exercise-method .tip-icon{font-size:23px}.exercise-sources{font-size:9px;margin-bottom:28px}.exercise-player{padding:17px 15px;top:8px;margin-bottom:22px}.exercise-player-top h2{font-size:18px;max-width:none}.exercise-stop{font-size:10px;padding:8px 10px}#exercise-cue{font-size:10px;margin-top:8px}.exercise-follow{gap:3px;margin-top:13px}.exercise-follow .exercise-step{min-width:25px;min-height:31px;font-size:13px;padding:3px}.exercise-progress{margin-top:12px}#exercise-status{font-size:10px;margin-top:9px}.exercise-player-top .section-kicker{font-size:7px}#exercise-dialog{padding:22px 18px;width:calc(100% - 26px);border-radius:12px;max-height:calc(100dvh - 28px)}.exercise-dialog-heading h2{font-size:21px}.exercise-fields{gap:18px 12px;margin-top:20px}.exercise-fields label{font-size:11px}.exercise-fields input,.exercise-fields select{font-size:12px;padding:9px 8px}.exercise-fields small{font-size:9px}.exercise-dialog-pattern{font-size:13px;margin-top:14px}.exercise-plan-summary{font-size:10px}.exercise-dialog-actions .play-button{min-width:120px;font-size:11px}.exercise-dialog-actions>button:first-child{font-size:11px}html[lang=zh-Hans] .warmups-intro h1{font-size:36px}}
@media(max-width:380px){.warmups-intro h1{font-size:35px}.exercise-card{padding:17px 13px;gap:11px}.exercise-card h3{font-size:18px}.exercise-kind{font-size:6px}.exercise-card-actions{gap:6px}.exercise-card-actions .exercise-start{padding:9px 10px}.exercise-player{padding:16px 13px}.exercise-follow .exercise-step{min-width:24px;padding:3px 2px}.exercise-fields{column-gap:10px}.exercise-dialog-heading h2{font-size:19px}}