@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Noto+Sans+TC:wght@400;500;600;700;800&display=swap";:root{font-family:DM Sans,Noto Sans TC,system-ui,sans-serif;color:#263248;background:#fff7f1;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}.app{min-height:100dvh;position:relative;overflow:hidden;background:radial-gradient(circle at 10% 0%,#fff2d7 0,transparent 24%),radial-gradient(circle at 95% 80%,#fce6f2 0,transparent 28%),#fffaf5}.rainbow-frame{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:20;border:8px solid transparent;border-image:linear-gradient(110deg,#f79f9c,#ffc987,#f8e58f,#a9ddba,#a8d5ec,#c6b0e3,#efb1d7) 1}.theme-peach .rainbow-frame{border-image:linear-gradient(110deg,#f49e8d,#ffc69b,#ffdcba,#ffacb8) 1}.theme-blue .rainbow-frame{border-image:linear-gradient(110deg,#8fc7eb,#a7e0df,#aebefa,#b3d5f0) 1}.app-shell{height:100dvh;min-height:0;padding:8px;display:flex;flex-direction:column}.portrait-message{display:none}.topbar{height:76px;display:grid;grid-template-columns:54px 1fr auto 1fr;align-items:center;gap:12px;padding:0 31px;border-bottom:1px solid #f0e6de;background:#fffcf9b8}.icon-button{border:0;background:transparent;width:42px;height:42px;display:grid;place-items:center;color:#344158;border-radius:12px}.icon-button:hover,.back-link:hover{background:#f8eee6}.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:18px;letter-spacing:.02em;white-space:nowrap}.brand-mark{font-family:Georgia,serif;font-size:36px;color:#e38a89;line-height:1}.song-selector{display:flex;align-items:center;gap:11px;padding:8px 15px 8px 9px;border:1px solid #eadfd5;background:#fff;border-radius:16px;box-shadow:0 4px 16px #996b4620;min-width:247px;text-align:left;color:#263248}.song-selector-emoji{display:grid;place-items:center;background:#fff3e0;width:39px;height:39px;border-radius:11px;font-size:21px}.song-selector strong,.song-selector small{display:block}.song-selector strong{font-size:14px}.song-selector small{font-size:10px;color:#89909c;margin-top:1px}.song-selector svg{margin-left:auto;color:#8f95a0}.mic-control{justify-self:end;border:1px solid #f2dbd9;background:#fff0ef;color:#bd696a;border-radius:24px;height:40px;padding:0 13px;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;white-space:nowrap}.mic-control.ready{background:#ecf8ec;border-color:#c7e8c9;color:#488f5e}.mic-control i{width:7px;height:7px;border-radius:50%;background:currentColor}.function-bar{height:76px;display:flex;align-items:center;gap:18px;padding:0 48px;border-bottom:1px solid #f2e8e0;background:#fffdfb91}.section-label{display:flex;align-items:center;gap:10px}.label-icon{width:39px;height:39px;border-radius:13px;background:#fff0e7;color:#de8d6d;display:grid;place-items:center}.section-label strong,.section-label small{display:block;white-space:nowrap}.section-label strong{font-size:13px}.section-label small{font-size:10px;color:#9aa0a8}.toggle{width:42px;height:24px;border:0;border-radius:20px;background:#d5d9df;padding:3px;transition:background .2s}.toggle span{display:block;width:18px;height:18px;background:#fff;border-radius:50%;box-shadow:0 1px 4px #0002;transition:transform .2s}.toggle.on{background:#83c498}.toggle.on span{transform:translate(18px)}.tempo-divider{height:29px;width:1px;background:#e8e1db}.tempo-control{display:flex;align-items:center;height:39px;background:#fff;border:1px solid #e9e2db;border-radius:12px;box-shadow:0 2px 7px #75614c10}.tempo-control>button{border:0;background:transparent;color:#687182;width:33px;height:37px;display:grid;place-items:center}.tempo-control label{height:32px;display:flex;align-items:baseline;gap:3px;padding:4px 8px;border-left:1px solid #eee7e0;border-right:1px solid #eee7e0}.tempo-control input{width:42px;border:0;background:transparent;color:#29354c;text-align:center;font-size:17px;font-weight:800;outline:0;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.tempo-control input::-webkit-inner-spin-button,.tempo-control input::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}.tempo-control label span{font-size:10px;color:#89919d;font-weight:700}.tempo-control.disabled{opacity:.48}.beat-indicator{font-size:11px;color:#848d99;display:flex;align-items:center;gap:7px;white-space:nowrap}.beat-indicator span{width:8px;height:8px;background:#b7cfbd;border-radius:50%;transition:transform .12s,background .12s}.beat-indicator.pulse span{background:#67b884;transform:scale(1.5)}.function-hint{margin-left:auto;color:#bd9990;font-size:11px;font-weight:600;display:flex;align-items:center;gap:7px;white-space:nowrap}.function-hint svg{color:#e2aa66}.practice-main{flex:1;min-height:0;padding:24px 49px 18px;display:flex;flex-direction:column}.score-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:0 0 19px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:.19em;color:#df978e}.score-heading h1,.page-title h1{margin:5px 0 4px;font-size:26px;line-height:1.3;letter-spacing:.015em}.score-heading h1 span{font-size:16px;font-weight:500;color:#818b99;margin-left:8px}.score-heading p{margin:0;color:#9ba2ad;font-size:12px}.score-heading p b{padding:0 8px;color:#d9c7bd}.score-progress{width:183px}.score-progress>span{font-size:10px;color:#8c96a2;font-weight:700}.score-progress strong{float:right;color:#d27f7d;font-size:14px}.score-progress strong small{color:#aeb5bb;font-weight:600}.progress-track{clear:both;width:100%;height:7px;border-radius:20px;background:#f3e9e3;margin-top:9px;overflow:hidden}.progress-track>div{height:100%;background:linear-gradient(90deg,#f5bc82,#e78c98);border-radius:20px;transition:width .3s}.score-paper{background:#fff;border:1px solid #eee7e0;border-radius:22px;box-shadow:0 14px 35px #75624d16;flex:1;min-height:280px;display:flex;flex-direction:column;overflow:hidden}.score-paper-top{height:43px;flex:none;border-bottom:1px solid #f4eee9;display:flex;align-items:center;justify-content:space-between;padding:0 24px;color:#a2a5ac;font-size:10px}.score-paper-top>span:first-child{display:flex;gap:6px;align-items:center;font-size:11px;font-weight:700;color:#6e7c90}.score-paper-top svg{color:#dc9b83}.staff-viewport{flex:1;min-height:0;overflow:hidden;position:relative;background:repeating-linear-gradient(0deg,transparent 0 74px,#fffefa 75px 76px);padding:8px 18px}.staff-roll{width:100%;height:max-content;transition:transform .95s cubic-bezier(.2,.65,.2,1)}.staff-svg{display:block;width:100%;height:clamp(115px,17vh,160px);overflow:visible}.staff-rule{stroke:#b8bec7;stroke-width:1.1}.bar-rule{stroke:#9ca5af;stroke-width:1.4}.line-number{font-size:13px;fill:#c0b5ad;font-weight:800}.bar-number{font-size:12px;fill:#a8abb3;font-weight:700}.clef{font-family:Georgia,serif;font-size:63px;fill:#4c5667}.key-sharp{font-size:17px;fill:#4c5667;font-family:Georgia,serif}.note-head{fill:#293649;stroke:#293649;stroke-width:2;transition:fill .2s}.note-head.hollow{fill:#fff}.note-head.note-hit{fill:#82cda2;stroke:#56a674}.note-head.note-miss{fill:#bec2c9;stroke:#aeb5bb}.note-head.note-active{fill:#f5a263;stroke:#e4844d}.note-stem{stroke:#344259;stroke-width:2.2}.active-note-glow{fill:#fff1df}.mini-star{fill:#e5a648;font-size:17px}.selectable-bar{cursor:pointer}.selectable-bar:hover>rect{fill:#fff8f1}.paper-bottom{height:47px;flex:none;border-top:1px solid #f2eee9;background:#fffefa;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 24px;color:#939daa;font-size:11px}.paper-bottom>span:first-child{white-space:nowrap}.paper-bottom strong{color:#42546a;font-size:13px;margin-left:3px}.current-dot{display:inline-block;width:8px;height:8px;background:#efa566;border-radius:50%;margin-right:6px}.heard em{font-style:normal;color:#5daa79;margin-left:6px;font-weight:700}.mic-error{margin:8px 0 0;color:#b75051;font-size:11px}.bottom-bar{height:90px;flex:none;background:#fffdfa;border-top:1px solid #f0e8e1;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:0 49px}.start-position{display:flex;align-items:center;gap:10px;color:#99a0aa;font-size:11px;white-space:nowrap}.start-position select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%237c8795' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;border:1px solid #e8e3de;border-radius:10px;padding:9px 31px 9px 12px;color:#48566c;font-size:11px;font-weight:700}.main-actions{display:flex;align-items:center;gap:10px}.primary-action,.secondary-action{border-radius:12px;height:43px;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;font-size:12px;white-space:nowrap}.primary-action{border:1px solid #ea8e82;background:linear-gradient(110deg,#f6a071,#e7828c);color:#fff;box-shadow:0 6px 14px #ea8e8052}.primary-action:hover{filter:brightness(1.03)}.secondary-action{border:1px solid #e5e0dc;background:#fff;color:#617087}.skip-action{width:42px;height:42px;border-radius:11px;border:1px solid #e5e0dc;background:#fff;color:#8491a2;display:grid;place-items:center}.history-link{justify-self:end;border:0;background:transparent;display:flex;align-items:center;gap:8px;color:#6d7a8e;font-size:11px;font-weight:700;padding:10px}.history-link:hover{color:#dc877f}.page-content{flex:1;padding:27px clamp(40px,8vw,125px);overflow:auto}.back-link{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;border-radius:9px;color:#7e8998;padding:7px 10px;margin-left:-10px;font-size:12px;font-weight:700}.page-title{margin:25px 0}.page-title h1{font-size:32px}.page-title h1 span{font-size:25px}.page-title p{font-size:13px;color:#99a1aa;margin:4px 0}.history-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;max-width:1100px}.history-card{display:flex;align-items:center;gap:15px;min-height:96px;border:1px solid #eee5de;border-radius:17px;background:#fff;text-align:left;padding:18px;color:#28364b;box-shadow:0 5px 18px #8c6a5012}.history-card:hover,.song-card:hover{border-color:#edb3a1;transform:translateY(-1px)}.history-card-icon{width:50px;height:50px;display:grid;place-items:center;background:#fff1e3;border-radius:14px;font-size:27px;flex:none}.history-card>span:nth-child(2){display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.history-card small{font-size:10px;color:#a0a7b0}.history-card strong{font-size:15px}.history-card em,.song-card em{font-size:10px;font-style:normal;color:#9ca4ae}.history-stars{display:flex;align-items:center;color:#e5ad55;font-size:17px;font-weight:800;gap:3px;white-space:nowrap}.history-stars small{font-size:11px}.history-card>svg:last-child{color:#b0b6c0}.empty-state{max-width:500px;margin:25px auto;padding:35px;text-align:center;background:#fff;border:1px solid #eee7e1;border-radius:24px}.empty-state>span{font-size:54px}.empty-state h2{font-size:20px;margin:9px 0}.empty-state p{font-size:12px;color:#97a0ac;line-height:1.7}.empty-state button{margin-top:10px}.song-card{width:min(680px,100%);display:flex;align-items:center;gap:18px;border:1px solid #eddbcc;background:#fff;border-radius:21px;padding:18px;text-align:left;color:#263248;box-shadow:0 10px 25px #9c684515}.song-card-art{width:86px;height:86px;display:grid;place-items:center;background:linear-gradient(130deg,#fce0c3,#f3b6bd);border-radius:16px;font-size:46px}.song-card>span:nth-child(2){display:flex;flex-direction:column;gap:4px;flex:1}.song-card small{font-size:10px;color:#d89382;font-weight:800}.song-card strong{font-size:18px}.selected-pill{display:flex;align-items:center;gap:4px;color:#d97973;font-size:11px;font-weight:800}.coming-soon{margin-top:17px;display:flex;align-items:center;gap:9px;color:#abb1b9;font-size:12px}.settings-card{max-width:620px;border:1px solid #eee4dc;background:#fff;border-radius:20px;padding:24px}.settings-card h2{margin:0 0 16px;font-size:16px}.theme-choices{display:flex;gap:12px}.theme-choice{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #e9e1da;border-radius:11px;padding:9px 14px;color:#647187;font-size:12px;font-weight:700}.theme-choice.chosen{border-color:#e68e8c;box-shadow:0 0 0 2px #f9e4e2}.theme-choice span{width:19px;height:19px;border-radius:50%;background:linear-gradient(135deg,#f6ac9d,#f8d989,#a2d8c0,#a7c8ed,#d3a8df)}.theme-choice.peach span{background:linear-gradient(135deg,#f6ab8f,#f8d4b2,#f0a4b0)}.theme-choice.blue span{background:linear-gradient(135deg,#89c7e9,#a8e0d9,#adaefa)}.settings-card p{font-size:11px;line-height:1.8;color:#9da5b0;margin-top:23px}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#25314a66;z-index:30}.drawer{height:100%;width:min(340px,88vw);background:#fffcf9;padding:24px;box-shadow:10px 0 35px #0002}.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;font-size:19px;font-weight:800;color:#344157}.drawer-head>span:first-letter{color:#e69183}.drawer>button{width:100%;display:flex;align-items:center;gap:13px;border:0;border-radius:12px;background:transparent;padding:14px 12px;color:#536277;text-align:left;font-size:13px;font-weight:700}.drawer>button:hover{background:#fff0e7}.drawer-note{margin-top:30px;padding:15px;display:flex;gap:9px;line-height:1.6;background:#fff3e5;border-radius:13px;color:#a78570;font-size:11px}.drawer-note svg{flex:none}.modal-overlay{display:grid;place-items:center;padding:20px}.result-modal,.history-detail{position:relative;background:#fffcf8;border-radius:24px;padding:30px 32px;box-shadow:0 25px 60px #1d2d4b38;text-align:center;width:min(440px,100%)}.modal-close{position:absolute;top:14px;right:14px;border:0;background:#f7f1ec;color:#7f8995;border-radius:9px;width:34px;height:34px;display:grid;place-items:center}.result-art{font-size:69px;line-height:1.2;margin-bottom:6px}.result-modal h2{font-size:23px;margin:9px 0 5px}.result-modal p{font-size:12px;color:#97a0ab;margin:0}.big-stars{display:flex;align-items:center;justify-content:center;gap:8px;color:#e4ab50;font-size:49px;font-weight:800;margin:5px 0}.big-stars small{font-size:16px}.result-detail{font-size:11px;color:#9ea6ae}.result-actions{display:flex;justify-content:center;gap:10px;margin-top:25px}.history-detail{text-align:left;width:min(620px,100%);max-height:80vh;overflow:auto}.history-detail h2{font-size:22px;margin:5px 0}.history-detail p{font-size:12px;color:#9ba5b0;margin:0}.detail-stars{display:flex;align-items:center;gap:7px;color:#dba34f;font-size:18px;font-weight:800;margin:15px 0}.note-results{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}.note-results>div{display:flex;flex-direction:column;align-items:center;border-radius:10px;background:#eaf7ed;padding:7px 2px;min-width:0}.note-results>div.missed{background:#f0f1f3}.note-results span{color:#65b47c}.note-results .missed span{color:#b5bbc2}.note-results strong{font-size:11px}.note-results small{font-size:8px;color:#89939f;white-space:nowrap}@media(max-width:900px)and (orientation:landscape){.topbar{height:62px;padding:0 20px}.function-bar{height:62px;padding:0 25px}.practice-main{padding:15px 25px 12px}.score-heading{margin-bottom:10px}.score-heading h1{font-size:20px}.score-paper{min-height:220px}.bottom-bar{height:72px;padding:0 25px}.function-hint{display:none}.staff-svg{height:clamp(95px,17vh,125px)}.brand{font-size:15px}.mic-control{font-size:0}.mic-control svg{width:20px}.mic-control i{display:none}.song-selector{min-width:205px}.song-selector small{display:none}}@media(max-height:760px)and (orientation:landscape){.topbar{height:59px}.function-bar{height:58px}.practice-main{padding-top:12px;padding-bottom:9px}.score-heading{margin-bottom:8px}.score-heading h1{font-size:20px}.score-heading p{display:none}.score-paper-top{height:32px}.paper-bottom{height:37px}.bottom-bar{height:66px}.staff-svg{height:clamp(83px,16vh,112px)}}@media(orientation:portrait){.app-shell{display:none}.portrait-message{min-height:100dvh;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:30px;color:#526076}.portrait-message svg{color:#e88f8b}.portrait-message h2{font-size:24px;margin:12px 0}.portrait-message p{font-size:14px;line-height:1.7;color:#939ca9}}.staff-roll .staff-svg{height:calc(100% / var(--score-line-count));width:100%;overflow:hidden}.vex-score-line svg{display:block;width:100%;height:100%;overflow:visible}.staff-viewport{padding-bottom:0;overflow:clip}.vex-active-glow{fill:#fff0df}.vex-active-glow.melody{fill:#def5e8}.vex-line-number{fill:#a5a1a1;font:800 13px DM Sans,sans-serif}.vex-bar-number{fill:#9aa2ad;font:700 12px DM Sans,sans-serif}.vex-dynamic{fill:#303a47;font:700 italic 20px Georgia,serif}.vex-tempo-mark{fill:#586174;font:italic 15px Georgia,serif}.vex-star{fill:#e2aa59;font:18px Georgia,serif}.vex-selectable-bar{cursor:pointer}.score-heading{align-items:center;min-height:48px;margin-bottom:10px}.score-heading>div:first-child{display:flex;align-items:baseline;gap:16px;min-width:0;white-space:nowrap}.score-heading .eyebrow{display:none}.score-heading h1{margin:0;font-size:clamp(20px,2vw,25px);white-space:nowrap}.score-heading p{display:block;margin:0;font-size:11px;white-space:nowrap}.score-progress{flex:none}.score-paper-top{height:36px}.paper-bottom{height:40px}@media(min-height:761px){.practice-main{padding-top:16px;padding-bottom:12px}}@media(max-height:760px)and (orientation:landscape){.score-paper-top{height:32px}.paper-bottom{height:37px}}@media(max-width:1080px){.score-heading p{display:none}}.note-name-control{margin-left:auto;display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:12px;font-weight:800;color:#4a5870}.note-name-control small{font-size:10px;font-weight:600;color:#a2a9b3;margin-left:4px}.note-name-control .toggle{flex:none}.function-hint{margin-left:8px}.vex-note-name{fill:#52627c;font:800 13px DM Sans,sans-serif;paint-order:stroke;stroke:#fffdf9;stroke-width:4px;stroke-linejoin:round}.vex-note-name.current{fill:#db874b}.vex-note-name.matched{fill:#4f9d6e}.vex-note-name.missed{fill:#9da5ae}.vex-note-name.melody{fill:#22935c}.melody-control{display:flex;align-items:center;justify-content:center;gap:7px;flex:none;min-width:114px;height:36px;padding:0 12px;border:1px solid #b9dfc8;border-radius:12px;background:#effaf2;color:#31875b;font-size:12px;font-weight:800;white-space:nowrap;box-shadow:0 2px 7px #3f9a6715}.melody-control:hover{background:#e2f5e9}.melody-control.playing{background:#4aa978;border-color:#4aa978;color:#fff}.melody-control.playing:hover{background:#358e63}@media(max-width:1450px){.function-hint{display:none}}@media(max-width:900px)and (orientation:landscape){.note-name-control small{display:none}.note-name-control{font-size:11px;gap:7px}.function-bar{gap:12px}}