:root{color-scheme:dark;--bg:#080f20;--panel:#0c172b;--muted:#798ba9;--line:#213048;--mint:#6ee7c8;--cyan:#68d6ed;--text:#e4edfa}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 45% 25%,#11233c 0,transparent 55%),var(--bg);font-family:'Noto Sans SC',system-ui,sans-serif;color:var(--text);font-size:14px}button,select,input{font:inherit}button{cursor:pointer;color:inherit}button:disabled,select:disabled{opacity:.45;cursor:default}button{border:0;background:none}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--mint);outline-offset:4px}header{height:88px;border-bottom:1px solid #ffffff0c;display:flex;align-items:center;max-width:1500px;margin:auto;padding:0 44px;gap:90px}.brand{display:flex;align-items:center;gap:12px;color:white;text-decoration:none;font-size:25px;font-weight:700;letter-spacing:3px}.brand-icon{height:42px;width:42px;border:1px solid #6ee7c848;border-radius:12px;display:grid;place-items:center;background:#6ee7c80d;color:var(--mint);font-size:28px}.brand-en{display:block;font-size:8px;color:#8fa4bd;letter-spacing:2px;margin-top:1px}nav{display:flex;gap:35px;height:100%}nav button{font-size:14px;color:var(--muted);padding:0 4px;position:relative}.nav-active{color:var(--mint)}.nav-active:after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--mint)}.help{margin-left:auto;color:#92a4bf;display:flex;gap:9px;align-items:center}.help:first-letter{border:1px solid var(--muted)}main{max-width:1440px;margin:auto;padding:0 44px}.intro{display:flex;align-items:center;justify-content:space-between;padding:36px 0 30px}.eyebrow{font-size:10px;letter-spacing:2.6px;color:#8ca3bf}.eyebrow>span,.live-dot{display:inline-block;width:6px;height:6px;background:var(--mint);border-radius:50%;box-shadow:0 0 10px #6ee7c85a;margin-right:8px}h1{font-size:34px;letter-spacing:1px;margin:12px 0 10px;font-weight:600}h1>span{color:var(--mint)}.intro p{color:var(--muted);font-size:12px;margin:0;letter-spacing:.8px}.intro-note{display:flex;gap:15px;align-items:center;color:#8da3bf;font-size:11px;line-height:1.9}.intro-note>span{font-size:42px;color:#6ee7c85a;transform:rotate(-12deg)}.intro-note b{font-weight:400;color:#b8c8df}.studio{border:1px solid #2c405b;border-radius:15px;overflow:hidden;box-shadow:0 20px 80px #0003;background:#0b1528}.toolbar{display:flex;align-items:center;justify-content:space-between;height:79px;padding:0 23px;border-bottom:1px solid var(--line);background:#111e33}.song-button{display:flex;align-items:center;gap:12px;text-align:left}.cover{background:linear-gradient(135deg,#267e83,#173b59);border:1px solid #6ee7c83d;display:grid;place-items:center;width:39px;height:39px;border-radius:8px;font-size:25px;color:#a2f0d8}.song-button strong{display:block;font-weight:500;font-size:14px;letter-spacing:1px}.song-button small{display:block;color:var(--muted);font-size:10px;margin-top:5px}.chevron{margin-left:24px;color:var(--muted)}.toolbar-right{display:flex;gap:18px;align-items:center}.speed{color:var(--muted);font-size:11px;display:flex;align-items:center;gap:9px}select{border:1px solid #30425b;background:#18273e;color:#c7d8ed;padding:8px 12px;border-radius:6px;font-size:11px}.tool{border:1px solid #30425b;padding:8px 10px;border-radius:6px;font-size:12px;color:#bbccdf}.tool[aria-pressed=true]{color:var(--mint);border-color:#6ee7c83a;background:#6ee7c808}.tool span{font-size:11px;margin-left:4px}.volume{display:flex;align-items:center;gap:8px;color:var(--muted)}input[type=range]{accent-color:var(--mint);width:65px;height:3px}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 238px}.play-area{min-width:0}.phrase-bar{padding:18px 25px 14px;background:linear-gradient(180deg,#14253b80,#10203630);height:127px}.phrase-label{font-size:10px;color:var(--muted);letter-spacing:1px}.phrase{font-size:22px;letter-spacing:6px;margin-top:12px;height:33px}.phrase span{position:relative}.phrase .current{color:var(--mint)}.phrase .done{color:#6e849d}.phrase-foot{display:flex;justify-content:space-between;color:#798da8;font-size:11px;letter-spacing:1.7px;margin-top:4px}.phrase-foot #pinyin{font-family:monospace;letter-spacing:2px}.track{height:310px;position:relative;background:radial-gradient(ellipse at bottom,#10405045,transparent 70%),#09172b;overflow:hidden}canvas{width:100%;height:100%;display:block}.track-caption{position:absolute;top:15px;left:20px;color:#6987a8;font-size:9px;letter-spacing:1px}.hit-line{position:absolute;bottom:45px;height:2px;width:100%;background:#6ee7c88a;box-shadow:0 0 15px #6ee7c83a;pointer-events:none}.hit-line:after{content:'';position:absolute;inset:0 0 -18px;background:linear-gradient(#6ee7c80e,transparent)}.hit-line>span{position:absolute;font-size:8px;right:10px;top:-13px;color:#6ee7c899;letter-spacing:2px}.lane-labels{position:absolute;bottom:12px;width:100%;display:grid;grid-template-columns:repeat(8,1fr);font-size:8px;color:#59718e;text-align:center}.judgement{position:absolute;top:42%;left:50%;transform:translateX(-50%);font-size:24px;font-weight:700;letter-spacing:3px;text-shadow:0 0 25px currentColor;pointer-events:none;z-index:4;opacity:0;transition:opacity .15s}.judgement.show{opacity:1}.start-overlay,.pause-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background:radial-gradient(ellipse,#10273be8,#09172bb8);z-index:5;backdrop-filter:blur(2px)}[hidden]{display:none!important}.overlay-symbol{font-size:36px;color:var(--mint);margin-bottom:10px;text-shadow:0 0 35px #6ee7c84a}.start-overlay .eyebrow{font-size:8px;color:#7ba4ac;letter-spacing:2px}.start-overlay h2,.pause-overlay h2{font-size:25px;letter-spacing:3px;font-weight:500;margin:12px 0 0}.start-overlay p{font-size:11px;color:#95adc4;letter-spacing:2px;margin:12px 0 20px}.primary{background:var(--mint);color:#092b2b;padding:13px 25px;font-size:13px;border-radius:7px;font-weight:600;box-shadow:0 0 28px #6ee7c818;transition:transform .15s,background .15s}.primary:hover{background:#9af3dc;transform:translateY(-1px)}kbd{display:inline-block;font-size:9px;border:1px solid currentColor;padding:2px 5px;border-radius:3px;opacity:.6;font-family:inherit}.primary kbd{margin-left:22px}.start-overlay small,.pause-overlay small{font-size:9px;color:#8197b1;margin-top:16px}.pause-overlay .primary{margin-top:20px}.piano{display:flex;position:relative;padding:0 13px;height:111px;background:#071225;border-top:7px solid #0b1c31;gap:2px}.white-key{flex:1;background:linear-gradient(#e3edf6,#b8ccdf);border:1px solid #869db2;border-radius:0 0 5px 5px;color:#5d7791;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:11px;min-width:0;box-shadow:0 4px #627b97;font-family:monospace;font-size:12px;transition:background .06s}.white-key:before{content:'';position:absolute;right:-28%;top:0;height:57%;width:53%;background:linear-gradient(#304766,#071325);border:1px solid #243c58;border-radius:0 0 3px 3px;z-index:1;box-shadow:0 3px 3px #0005}.white-key:nth-child(7n+3):before,.white-key:nth-child(7n):before,.white-key:last-child:before{display:none}.white-key.active{background:linear-gradient(#c6fff0,#6ee7c8);box-shadow:0 0 25px #6ee7c84d;z-index:2}.white-key.bad{background:linear-gradient(#ffc5cc,#f0808d)}.keyboard-caption{height:39px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;color:#728aa6;font-size:9px}.keyboard-caption i{width:5px;height:5px;background:var(--mint);display:inline-block;border-radius:50%;margin-right:7px}.keyboard-caption kbd{margin-right:5px}aside{border-left:1px solid var(--line);padding:21px 20px 0;background:#0e192e}.score-heading{font-size:11px;display:flex;align-items:center;justify-content:space-between;color:#9aaec8}.small-pill{font-size:8px;padding:3px 6px;border-radius:4px;background:#6ee7c810;color:var(--mint);letter-spacing:1px}.accuracy{text-align:center;margin:23px 0}.accuracy strong{font-size:55px;letter-spacing:-2px;color:var(--mint);line-height:1;font-weight:600;font-variant-numeric:tabular-nums}.accuracy small{font-size:20px;margin-left:3px}.accuracy>span{display:block;font-size:8px;letter-spacing:2px;color:#7289a8;margin-top:12px}.progress-label{display:flex;justify-content:space-between;font-size:9px;color:#7d94b1}.progress-label b{font-weight:400}.progress-track{height:4px;background:#26334a;border-radius:4px;margin:9px 0 23px;overflow:hidden}.progress-track i{display:block;height:100%;width:0;background:var(--mint);transition:width .2s}.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.stat-grid>div{padding:11px;background:#14223a;border:1px solid #23344e;border-radius:7px}.stat-grid span{font-size:9px;color:#8ba0bb;display:block}.stat-grid strong{font-size:21px;margin-top:5px;display:block;font-family:monospace;font-weight:500}.mint{color:var(--mint)}.coral{color:#f593a5}.mistake-section{border-top:1px solid var(--line);margin-top:21px;padding-top:18px}.section-title{font-size:10px;color:#9aacc2;display:flex;justify-content:space-between}.section-title span{font-size:8px;color:#596f8c;letter-spacing:1px}.mistakes{min-height:75px;display:flex;align-content:center;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;padding:14px 0}.mistakes p{font-size:10px;color:#607994;text-align:center;line-height:1.9;margin:0}.mistake-chip{padding:5px 8px;background:#f593a50c;color:#f5a0ae;border:1px solid #f593a52a;border-radius:4px;font-family:monospace;font-size:11px}.aside-bottom{font-size:9px;border-top:1px solid var(--line);padding:14px 0;color:#68859b}.aside-bottom .live-dot{height:4px;width:4px}.transport{height:72px;background:#111e33;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 25px}.transport-song{display:flex;gap:13px;align-items:center;min-width:200px}.transport-song>span:last-child{font-size:11px}.transport-song small{display:block;font-size:8px;color:#6e86a3;margin-top:5px}.equalizer{display:flex;align-items:center;gap:3px;height:24px}.equalizer i{width:3px;background:var(--mint);border-radius:3px;height:9px}.equalizer i:nth-child(2){height:20px}.equalizer i:nth-child(3){height:14px}.playing .equalizer i{animation:eq .65s ease-in-out infinite alternate}.playing .equalizer i:nth-child(2){animation-delay:.2s}.playing .equalizer i:nth-child(3){animation-delay:.4s}@keyframes eq{to{height:5px}}.transport-controls{display:flex;align-items:center;gap:18px}.circle{font-size:25px;color:#8fa5c2}.play-control{background:var(--mint);color:#123b3a;border-radius:50%;width:35px;height:35px;font-size:14px}.transport-time{font-size:10px;font-family:monospace;min-width:86px;color:#b6c9df}.transport-time i{font-style:normal;padding:0 6px;color:#4b647f}.beat-indicator{display:flex;align-items:center;gap:8px;min-width:200px;justify-content:flex-end}.beat-indicator span{font-size:8px;letter-spacing:2px;color:#7189a4;margin-right:5px}.beat-indicator i{height:6px;width:6px;border-radius:50%;background:#30415a}.beat-indicator i.on{background:var(--mint);box-shadow:0 0 10px #6ee7c87a}footer{display:flex;justify-content:space-between;align-items:center;padding:22px 2px 25px;font-size:9px;letter-spacing:.5px;color:#5c748f}footer i{font-style:normal;margin:0 8px}.footer-dot{color:#7fbaa9;margin-left:10px}dialog{background:#111f35;border:1px solid #3a516b;border-radius:16px;color:var(--text);max-width:570px;width:calc(100% - 40px);padding:34px;box-shadow:0 20px 100px #0008}dialog::backdrop{background:#030916b8;backdrop-filter:blur(7px)}.close{position:absolute;right:15px;top:10px;font-size:27px;color:#8da3bc}dialog h2{margin:6px 0 12px;font-size:25px;letter-spacing:1px}dialog p{color:#91a8c1;line-height:1.9;font-size:12px}dialog .eyebrow{color:var(--mint)}.song-card{display:flex;width:100%;align-items:center;gap:14px;border:1px solid #2e4561;border-radius:9px;padding:17px;margin-top:12px;text-align:left;background:#16263d}.song-card.selected{border-color:#6ee7c8;background:#6ee7c80b}.song-card strong{display:block;font-size:14px}.song-card small{display:block;margin-top:6px;color:#8ca4bd;font-size:10px}.song-card>span:last-child{margin-left:auto;color:var(--mint)}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0}.result-grid>div{background:#192c45;padding:15px 8px;text-align:center;border-radius:8px}.result-grid strong{display:block;font-size:25px;color:var(--mint)}.result-grid span{display:block;font-size:10px;color:#839db8;margin-top:5px}.result-actions{display:flex;gap:10px;margin-top:22px}.secondary{padding:12px 20px;border:1px solid #36506b;border-radius:7px;color:#b4c7de}.history-row{padding:14px 0;border-bottom:1px solid #2b3b52;font-size:12px;display:flex;justify-content:space-between;gap:12px}.history-row small{display:block;color:#8199b4;margin-top:7px;font-size:10px}.history-row>b{color:var(--mint);white-space:nowrap}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);border:1px solid #47627c;background:#172d43;padding:12px 22px;border-radius:8px;font-size:12px;opacity:0;pointer-events:none;z-index:20;transition:opacity .2s}.toast.show{opacity:1}.help-steps{padding-left:20px;color:#aac0d6;font-size:12px;line-height:2.3}.countdown{font-size:70px!important;color:var(--mint)}@media(min-height:1000px) and (min-width:1000px){.track{height:400px}.intro{padding-top:45px;padding-bottom:38px}}@media(min-width:1600px){main{max-width:1510px}.track{height:390px}}@media(max-width:1050px){header{padding:0 24px;gap:45px}main{padding:0 24px}.toolbar-right{gap:9px}.volume{display:none}.game-layout{grid-template-columns:minmax(0,1fr) 205px}aside{padding:18px 14px 0}.tool span{display:none}.piano{height:100px}.white-key{font-size:10px}.intro-note{display:none}}@media(max-width:740px){header{height:70px;padding:0 18px;gap:20px}.brand{font-size:21px}.brand-icon{width:34px;height:34px}.brand-en{font-size:6px}nav{gap:14px}nav button{font-size:11px}.help span{display:none}main{padding:0 12px}.intro{padding:26px 7px}.intro h1{font-size:27px}.intro p{font-size:10px}.game-layout{grid-template-columns:1fr}.toolbar{padding:0 12px;height:72px}.song-button{gap:8px}.chevron{margin-left:0}.toolbar-right{gap:5px}.speed{font-size:0}select{font-size:10px;padding:8px 3px}.tool{padding:7px}.cover{width:32px;height:32px}.song-button strong{font-size:12px}.song-button small{font-size:8px}.track{height:330px}.phrase-bar{padding-left:16px;padding-right:16px}.phrase{font-size:19px;letter-spacing:4px}.piano{height:90px;padding:0 5px;gap:1px}.white-key{font-size:9px;padding-bottom:10px}.white-key:before{height:48%}.keyboard-caption{font-size:8px;padding:0 9px}.lane-labels{font-size:7px}aside{display:grid;grid-template-columns:100px 1fr;gap:12px;padding:15px;border-left:0;border-top:1px solid var(--line)}.score-heading,.progress-label,.progress-track,.mistake-section,.aside-bottom{display:none}.accuracy{margin:10px 0}.accuracy strong{font-size:38px}.accuracy>span{font-size:6px;letter-spacing:1px}.stat-grid{grid-template-columns:repeat(3,1fr);gap:5px}.stat-grid>div{padding:7px}.stat-grid strong{font-size:16px}.stat-grid span{font-size:8px}.transport{padding:0 14px;height:65px}.transport-song{min-width:0}.transport-controls{gap:10px}.beat-indicator{display:none}.transport-time{min-width:70px;font-size:9px}footer{font-size:8px;line-height:1.8;padding:18px 5px}footer>span:last-child{display:none}.result-grid strong{font-size:21px}dialog{padding:28px 22px}.start-overlay h2{font-size:23px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}
/* Local song import */
.import-trigger{white-space:nowrap;border-color:#6ee7c84a;color:var(--mint)}.import-entry{display:flex;align-items:center;gap:14px;width:100%;border:1px dashed #6ee7c866;border-radius:9px;padding:17px;margin:18px 0;background:#6ee7c809;text-align:left}.import-entry>span{font-size:30px;color:var(--mint)}.import-entry strong{font-size:13px;font-weight:500}.import-entry small{display:block;font-size:10px;color:#8aa7ba;margin-top:5px}.import-entry>b{margin-left:auto;font-weight:400;color:var(--mint)}dialog{max-height:90vh;overflow-y:auto}.file-drop{display:flex;position:relative;align-items:center;flex-direction:column;padding:20px 14px;border:1px dashed #5b8b95;border-radius:10px;background:#6ee7c807;cursor:pointer;text-align:center;gap:8px}.file-drop>span{font-size:27px;color:var(--mint)}.file-drop strong{font-size:13px;max-width:100%;overflow-wrap:anywhere}.file-drop small{font-size:10px;color:#88a1b7}.file-drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.file-drop:focus-within{outline:2px solid var(--mint)}#importAudio{width:100%;height:36px;margin-top:14px}.import-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}.import-fields label,.import-label{font-size:11px;color:#b3c5d9}.field-with-button{display:flex;gap:6px;margin-top:8px}.field-with-button input{min-width:0;width:82px;flex:1}.field-with-button .secondary{font-size:10px;padding:9px 8px;white-space:nowrap}.import-fields input,.import-label textarea{background:#0c192e;border:1px solid #344e6b;border-radius:6px;color:#e2edf5;padding:9px;font:inherit}.import-fields input{font-variant-numeric:tabular-nums}.field-tip{font-size:10px!important;line-height:1.8!important;color:#849bb4!important;margin:10px 0 17px}.import-label{display:block;margin-top:15px}.import-label select{display:block;width:100%;margin-top:8px;padding:11px;font-size:12px}.import-label textarea{display:block;width:100%;margin-top:8px;resize:vertical;line-height:1.8;font-size:12px}.import-error{color:#f5a0ae!important;font-size:11px!important;min-height:0;margin:12px 0 0}.import-error:empty{display:none}.local-note{font-size:9px!important;margin-bottom:0;line-height:1.9!important;color:#7891ad!important}@media(max-width:1050px){.import-trigger span{display:inline}}@media(max-width:740px){.toolbar-right{gap:4px}.toolbar .import-trigger{padding:7px;font-size:11px}.toolbar .import-trigger span{display:none}.import-fields{grid-template-columns:1fr}.file-drop{padding:15px 10px}.toolbar-right .tool{padding:7px 6px}}
/* Keep the Chinese prompt easy to read while following the falling notes. */
.phrase-bar{height:auto;min-height:164px;padding:16px 25px 18px;background:linear-gradient(135deg,#19364b99,#10203670);border-bottom:1px solid #6ee7c82b}.phrase{font-size:38px;font-weight:700;letter-spacing:7px;line-height:1.65;min-height:64px;height:auto;margin-top:8px;text-align:center;color:#edf5ff;overflow-wrap:anywhere}.phrase span{display:inline-block;padding:0 3px;margin:0 1px;border-radius:7px}.phrase .current{color:#b5ffe9;background:#6ee7c81c;box-shadow:inset 0 -3px #6ee7c8,0 0 22px #6ee7c815;text-shadow:0 0 18px #6ee7c856}.phrase .done{color:#9bafc5}.phrase-foot{margin-top:10px;align-items:center;gap:16px}.phrase-foot #pinyin{font-size:15px;line-height:1.7;color:#a9c5dc;letter-spacing:2px;overflow-wrap:anywhere}.phrase-foot #phraseCounter{flex-shrink:0;font-size:10px}.phrase-label{font-size:11px;color:#9ab4cc}@media(max-width:740px){.phrase-bar{min-height:152px;padding:14px 16px 16px}.phrase{font-size:29px;letter-spacing:3px;line-height:1.8;min-height:55px}.phrase span{padding:0 2px}.phrase-foot #pinyin{font-size:13px;letter-spacing:1px}.phrase-foot{gap:9px}.phrase-foot #phraseCounter{font-size:8px}}
/* Search handoff and lyric practice */
.toolbar-right{gap:10px}.search-trigger{color:var(--mint);border-color:#6ee7c83a}.song-search-form{display:flex;gap:10px;margin:24px 0 18px}.song-search-form input{min-width:0;flex:1;border:1px solid #3d5b75;background:#0c192e;color:#edf5ff;padding:12px;border-radius:7px;font-size:13px}.song-search-form .primary{padding:12px 15px;font-size:11px;white-space:nowrap}.search-steps{display:flex;gap:15px;justify-content:space-between;color:#9eb3ca;font-size:10px;padding:13px 0;border-bottom:1px solid #2b4058}.search-steps b{color:var(--mint);font-size:10px;margin-right:6px;font-family:monospace}.search-empty{font-size:11px;color:#8ba3bd;padding:15px 0}.lyric-fields{margin-top:20px;border:1px solid #2e4d65;background:#6ee7c804;border-radius:9px;padding:16px}.lyric-section-title{display:flex;align-items:center;justify-content:space-between;gap:10px}.lyric-section-title strong{color:#b9f4e3;font-size:13px}.lyrics-file-button{position:relative;font-size:10px;color:var(--mint);padding:7px 10px;border:1px solid #6ee7c844;border-radius:5px;cursor:pointer}.lyrics-file-button input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.lyric-fields>textarea{display:block;width:100%;margin-top:8px;padding:10px;background:#0c192e;color:#dceaf4;border:1px solid #344e6b;border-radius:6px;font:inherit;font-size:12px;line-height:1.9;resize:vertical;min-height:120px}.lyric-fields select,.lyric-fields input[type=number]{width:100%;display:block;padding:10px;margin-top:8px;background:#0c192e;color:#dceaf4;border:1px solid #344e6b;border-radius:5px;font-size:11px}.lyric-preview-row{display:flex;align-items:center;gap:10px;margin-top:14px}.lyric-preview-row .secondary{padding:8px 10px;font-size:10px;flex-shrink:0}.lyric-preview-row>span{color:#8ea9c0;font-size:10px;line-height:1.8;overflow-wrap:anywhere}.lyric-preview-row>span.invalid{color:#f5a0ae}.lyric-fields .field-tip{margin-bottom:0}.phrase.long-phrase{font-size:28px;letter-spacing:3px}.phrase-foot #pinyin{max-width:85%}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@media(max-width:1100px){.toolbar .tool span{display:none}.toolbar-right{gap:7px}.volume{display:none}}@media(max-width:740px){.toolbar{flex-wrap:wrap;height:auto;min-height:100px;padding:12px;gap:12px}.toolbar-right{margin-left:auto;gap:6px}.toolbar .tool{padding:7px 9px}.toolbar .search-trigger{font-size:15px}.song-search-form{flex-direction:column}.song-search-form .primary{padding:12px}.search-steps{font-size:8px;gap:7px}.lyric-fields{padding:12px}.lyric-section-title{gap:5px}.lyrics-file-button{padding:7px;font-size:9px}.phrase.long-phrase{font-size:22px;letter-spacing:2px}}
/* Safari bookmark assistant */
.bookmark-install{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;margin:24px 0 20px;padding:22px;border:1px solid #a3f4da;border-radius:10px;background:linear-gradient(130deg,#6ee7c8,#a2e5e0);color:#103b39;text-decoration:none;font-size:19px;font-weight:700;cursor:grab;box-shadow:0 8px 30px #6ee7c815}.bookmark-install small{font-size:10px;font-weight:400;letter-spacing:1px}.help-steps a{color:var(--mint);text-underline-offset:3px}.result-actions a.secondary{display:inline-block;text-decoration:none;font-size:12px}.toolbar{height:auto;min-height:79px;padding-top:14px;padding-bottom:14px;gap:14px;flex-wrap:wrap}.toolbar-right{margin-left:auto;flex-wrap:wrap;justify-content:flex-end}.song-button strong{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:740px){.toolbar-right{width:100%;justify-content:space-between;margin-left:0}.toolbar .tool{padding:7px 8px}.bookmark-install{font-size:18px}}
/* Adjustable target-character density */
.density-control{display:flex;align-items:center;gap:8px;color:#a7bdd1;font-size:11px;white-space:nowrap;padding:8px 10px;border:1px solid #6ee7c840;border-radius:6px;background:#6ee7c808}.density-control input[type=range]{width:90px;height:4px;accent-color:var(--mint)}.density-control output{font:600 12px monospace;color:var(--mint);min-width:33px;text-align:right}.density-control:has(input:disabled){opacity:.5}.target-guide{font-size:11px;color:#9bb9c8;text-align:center;line-height:1.8;margin-top:8px;letter-spacing:.4px}.phrase .lyric-context{color:#71869e;font-weight:400;background:none;box-shadow:none;text-shadow:none}.phrase .lyric-target{color:#dcfff2;box-shadow:inset 0 -2px #6ee7c84d}.phrase .lyric-target.done{color:#9fb8bd;box-shadow:inset 0 -2px #6ee7c826}.phrase .lyric-target.current{color:#b5ffe9;background:#6ee7c81c;box-shadow:inset 0 -3px #6ee7c8,0 0 22px #6ee7c815}.phrase-bar{min-height:185px}.toolbar-right{gap:8px}@media(max-width:740px){.density-control{padding:7px 9px;flex-basis:100%;justify-content:center}.density-control input[type=range]{width:150px}.target-guide{font-size:9px;margin-top:7px}.phrase-bar{min-height:173px}}

/* Two-line lyrics keep the next sentence visible during rhythm practice. */
.phrase-bar{height:auto;min-height:245px;padding-bottom:17px}.current-line-label{display:flex;justify-content:space-between;gap:12px;margin-top:10px;color:#adc7d6;font-size:11px;letter-spacing:1px}.current-line-label #reactionHint{color:var(--mint);letter-spacing:.4px}.phrase{margin-top:7px}.next-line{display:flex;align-items:baseline;justify-content:center;gap:13px;margin:12px 0 11px;padding:10px 14px;border:1px solid #91b9d224;border-radius:8px;background:#08162955}.next-line>span{flex-shrink:0;color:#8ba8be;font-size:11px}.next-line>div{color:#b9ccdf;font-size:23px;line-height:1.55;letter-spacing:3px;overflow-wrap:anywhere}.next-line .last-line{font-size:13px;color:#7892ac;letter-spacing:1px}.phrase-foot{gap:12px}.phrase-foot #pinyin{overflow-wrap:anywhere}@media(max-width:740px){.phrase-bar{min-height:230px}.next-line{gap:9px;padding:8px 10px}.next-line>div{font-size:19px;letter-spacing:2px}.current-line-label #reactionHint{font-size:10px}}

.next-line .preview-target{color:#bdffe8;font-weight:650;background:#6ee7c817;border-radius:4px;box-shadow:inset 0 -2px #6ee7c87a;text-shadow:0 0 12px #6ee7c82b}.next-line .preview-context{color:#71869e;font-weight:400}

.piano button.active{filter:brightness(1.25);box-shadow:inset 0 0 20px #6ee7c899,0 -7px 27px #6ee7c87a!important}.judgement.show{filter:drop-shadow(0 0 13px currentColor)}

.pause-song{margin-top:12px;padding:9px 20px;font-size:12px;background:#10243a80}.pause-song:hover{color:var(--mint);border-color:var(--mint)}

/* Home / focus / review: one clear task per screen. */
body{background:radial-gradient(ellipse at 50% 0%,#142a3d 0,transparent 60%),#090f19}header{height:80px;border-bottom:0;max-width:1340px}.brand{font-size:23px}.brand-icon{background:#82e2c411;border-color:#82e2c42b;box-shadow:none}main{max-width:1280px}.intro{padding:62px 0 42px}.intro h1{font-size:clamp(32px,4vw,49px);letter-spacing:-1px;margin:15px 0}.intro p{font-size:14px;letter-spacing:.2px;color:#95a9b9}.intro-note{border-left:1px solid #ffffff14;padding-left:26px}.studio{border:1px solid #ffffff12;border-radius:20px;background:#101b29;box-shadow:0 28px 90px #0002}.home-panel{padding:30px}.setup-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}.setup-heading h2{font-size:22px;font-weight:550;margin:9px 0 26px;letter-spacing:.3px}.setup-note{color:#8297a9;font-size:12px}.toolbar{height:auto;flex-wrap:wrap;gap:22px;padding:0;background:none;border:0;align-items:stretch}.song-button{width:100%;border:1px solid #a1d9d41f;background:#152735;border-radius:12px;padding:18px}.song-button:hover{border-color:#6ee7c870}.song-button .chevron{margin-left:auto}.song-button strong{font-size:18px}.song-button small{font-size:12px}.cover{width:46px;height:46px;background:#6ee7c815;border:0;color:#9fe6d3}.toolbar-right{width:100%;display:flex;flex-wrap:wrap;gap:10px;align-items:center}.toolbar .tool span{display:inline}.toolbar .tool{font-size:12px;padding:11px 13px;border-color:#ffffff1c;background:#ffffff03}.density-control{padding:12px;background:#6ee7c80a;border-color:#6ee7c82c;margin-right:auto}.speed select{padding:10px;background:#152333}.volume{display:flex}.home-launch{margin-top:28px;padding-top:25px;border-top:1px solid #ffffff0e;display:flex;align-items:center;justify-content:space-between;gap:20px}.ready-badge{color:var(--mint);font-size:11px}.home-launch p{font-size:12px;color:#91a6b8;margin:9px 0 0}.home-launch .primary{border-radius:10px;padding:16px 27px;font-size:15px;min-width:180px}.home-launch .primary span{margin-left:25px}.home-features{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;padding:38px 4px}.home-features>div>span{font:10px monospace;letter-spacing:1px;color:#78918f}.home-features h3{font-size:15px;font-weight:500;margin:13px 0 8px}.home-features p{font-size:12px;color:#8196a8;line-height:1.8;margin:0}footer{border-top:1px solid #ffffff0b}.focus-topbar{display:none}.game-layout,.transport{display:none}.game-layout aside{display:none}
body[data-view="practice"] header,body[data-view="paused"] header,body[data-view="resuming"] header,body[data-view="practice"] .intro,body[data-view="paused"] .intro,body[data-view="resuming"] .intro,body[data-view="practice"] .home-panel,body[data-view="paused"] .home-panel,body[data-view="resuming"] .home-panel,body[data-view="practice"] .home-features,body[data-view="paused"] .home-features,body[data-view="resuming"] .home-features,body[data-view="practice"] footer,body[data-view="paused"] footer,body[data-view="resuming"] footer{display:none}
body:not([data-view="home"]) main{max-width:1440px;padding:20px 28px}body:not([data-view="home"]) .studio{border-radius:16px}body:not([data-view="home"]) .game-layout{display:grid;grid-template-columns:minmax(0,1fr)}body:not([data-view="home"]) .focus-topbar{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;border-bottom:1px solid #ffffff0b;font-size:12px;color:#9bb2bf}.focus-topbar>div{display:flex;align-items:center;gap:22px}.brand-mini{color:var(--mint);font-size:17px;letter-spacing:2px}.focus-topbar button{padding:9px 14px;border-radius:8px;border:1px solid #ffffff17;color:#aac2d2}.focus-topbar #focusPauseBtn{color:var(--mint);border-color:#6ee7c83b;background:#6ee7c808}body:not([data-view="home"]) .transport{display:flex;height:53px;background:#101c29;border-top-color:#ffffff0b}.transport #restartBtn,.transport #playBtn{display:none}body:not([data-view="home"]) .phrase-bar{min-height:215px;padding:18px 28px;background:linear-gradient(180deg,#14273670,#101c2900)}body:not([data-view="home"]) .phrase{font-size:clamp(30px,4vw,44px);margin-top:6px;line-height:1.5;min-height:58px}body:not([data-view="home"]) .phrase.long-phrase{font-size:clamp(23px,3vw,33px)}body:not([data-view="home"]) .target-guide{font-size:10px;margin-top:3px;color:#7899ab}body:not([data-view="home"]) .next-line{margin:10px 0;background:none;border:0;padding:0}body:not([data-view="home"]) .track{height:clamp(220px,calc(100dvh - 470px),540px)}body:not([data-view="home"]) .piano{height:100px}.phrase-label{font-size:10px}.pause-overlay{background:#0b1728ed;backdrop-filter:blur(12px)}.pause-overlay h2{font-size:25px}.pause-overlay p{color:#8aa6b9;font-size:12px;margin:0 18px 17px}.pause-overlay .overlay-symbol{display:none}.pause-overlay .eyebrow{margin-bottom:12px}.pause-overlay .primary{padding:12px 28px}.pause-overlay small{margin-top:12px}
body[data-view="paused"] .game-layout{grid-template-columns:minmax(0,1fr) 310px}body[data-view="paused"] .game-layout aside{display:block;background:#101d2e;padding:24px 22px 0;border-left:1px solid #ffffff10}body[data-view="paused"] .accuracy{margin:21px 0}body[data-view="paused"] .accuracy strong{font-size:58px}body[data-view="paused"] .stat-grid>div{padding:11px;background:#142438;border-color:#ffffff0d}body[data-view="paused"] .stat-grid strong{font-size:23px}body[data-view="paused"] .mistake-section{margin-top:16px;padding-top:16px}body[data-view="paused"] .aside-bottom{display:none}body[data-view="paused"] .track{min-height:300px}.resume-countdown{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#091321ef;backdrop-filter:blur(15px)}.resume-countdown[hidden]{display:none}.resume-countdown p{color:#b7cddd;font-size:21px;margin:25px 0 0}.resume-countdown strong{font-size:clamp(110px,20vw,190px);font-weight:500;line-height:1.4;color:#a7f5df;text-shadow:0 0 65px #6ee7c843;font-variant-numeric:tabular-nums}.resume-countdown small{color:#7f9bad;font-size:12px}.resume-countdown .eyebrow{color:var(--mint)}
@media(max-width:900px){.intro{padding:40px 0 30px}.setup-note{display:none}.home-panel{padding:24px}.volume{display:none}.toolbar-right{gap:8px}.density-control{margin-right:0}.home-features{gap:22px}body[data-view="paused"] .game-layout{grid-template-columns:minmax(0,1fr) 250px}body[data-view="paused"] .game-layout aside{padding:20px 14px}.focus-topbar>div{gap:12px}}
@media(max-width:740px){header{height:72px}.intro{padding:30px 6px}.intro h1{font-size:33px}.intro p{font-size:12px}.home-panel{padding:21px 17px}.setup-heading h2{font-size:19px}.song-button{padding:14px}.toolbar-right .density-control{flex-basis:100%}.home-launch{align-items:stretch;flex-direction:column;margin-top:23px;gap:18px}.home-launch .primary{width:100%}.home-features{grid-template-columns:1fr;gap:21px;padding:27px 9px}.home-features h3{margin:8px 0 5px}.home-features>div>span{font-size:9px}body:not([data-view="home"]) main{padding:8px}body:not([data-view="home"]) .focus-topbar{padding:10px 12px}.brand-mini{display:none}.focus-topbar>div{gap:8px}.focus-topbar button{padding:8px 10px;font-size:11px}body:not([data-view="home"]) .phrase-bar{padding:15px;min-height:215px}body:not([data-view="home"]) .track{height:calc(100dvh - 420px);min-height:210px}body:not([data-view="home"]) .piano{height:80px}.transport-song .equalizer{display:none}body[data-view="paused"] .game-layout{grid-template-columns:1fr}body[data-view="paused"] .game-layout aside{display:block;padding:22px;border:0;border-top:1px solid #ffffff10}body[data-view="paused"] .score-heading,body[data-view="paused"] .progress-label,body[data-view="paused"] .progress-track,body[data-view="paused"] .mistake-section{display:flex}body[data-view="paused"] .progress-track{display:block}body[data-view="paused"] .stat-grid{grid-template-columns:repeat(3,1fr)}body[data-view="paused"] .mistake-section{display:block}body[data-view="paused"] .accuracy{margin:17px 0}.pause-overlay h2{font-size:21px}.pause-overlay p{font-size:11px}body[data-view="paused"] .track{min-height:300px}.current-line-label #reactionHint{font-size:9px}}

.hit-line,.lane-labels{display:none}.track-caption{font-size:11px;top:12px}.current-line-label #reactionHint{font-variant-numeric:tabular-nums;color:#a9efd7;font-size:12px}

.frequency-control{display:flex;align-items:center;gap:12px;color:#a9c1cf;font-size:12px;margin-right:auto}.frequency-control select{padding:11px 13px;border-color:#6ee7c83a;background:#132b34;color:#b9f2df}.frequency-summary{color:#87a4b4;font-size:11px;line-height:1.9;margin:18px 0 0}.frequency-control:has(select:disabled){opacity:.5}@media(max-width:740px){.frequency-control{width:100%;justify-content:space-between}.frequency-control select{flex:1;max-width:240px}.frequency-summary{font-size:10px}}

.next-line-heading{display:flex;flex-direction:column;gap:4px;align-items:center}.next-line-heading #nextPhraseTime{color:var(--mint);font-size:11px;letter-spacing:0;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Keep instructions in the tutorial, leaving lyrics and input timing in focus. */
.phrase-label,.phrase-foot,.target-guide,.track-caption,.keyboard-caption,#hintBtn{display:none!important}
body:not([data-view="home"]) .phrase-bar{min-height:160px;padding-top:12px;padding-bottom:12px}
.current-line-label{justify-content:flex-end;min-height:18px;margin-top:0}
.tutorial .help-steps{padding-left:24px;margin:24px 0;display:grid;gap:16px}
.tutorial .help-steps li{padding-left:6px;margin:0;line-height:1.7;color:#9eb4c7}
.tutorial .help-steps strong{color:#dcecf4}.tutorial>.primary{width:100%}
@media(max-width:740px){body:not([data-view="home"]) .phrase-bar{min-height:150px}.tutorial h2{font-size:23px}.tutorial .help-steps{gap:12px;margin:18px 0}}
#tutorialTour{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#e7f2f5;overflow:hidden}
#tutorialTour::backdrop{background:#03091455;backdrop-filter:none}
.tour-spot{position:fixed;border:2px solid #8ae8cc;border-radius:10px;box-shadow:0 0 0 200vmax #030914a8,0 0 24px #8ae8cc33;pointer-events:none}
.tour-arrow{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.tour-card{position:fixed;box-sizing:border-box;padding:24px;background:#142233;border:1px solid #8ae8cc55;border-radius:16px;box-shadow:0 18px 60px #0008;max-height:calc(100dvh - 32px);overflow:auto}
.tour-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;color:#8ae8cc}.tour-top button{font-size:11px;color:#9eb0c1;padding:5px 0}
.tour-card h2{font-size:21px;line-height:1.5;margin:17px 0 10px;outline:none}.tour-card p{font-size:14px;line-height:1.9;color:#bdd0dd;margin:0 0 22px}.tour-actions{display:flex;justify-content:space-between;gap:14px}.tour-actions button{padding:11px 17px}.tour-actions button:disabled{opacity:.3}
@media(max-width:520px){.tour-card{padding:18px}.tour-card h2{font-size:19px;margin-top:12px}.tour-card p{font-size:13px;margin-bottom:16px}}