@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Heebo:wght@400;500;600&display=swap');
:root{--ink:#253e36;--green:#2f6652;--paper:#f6f7f2;--line:#e1e5dc;--muted:#7c847b}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans','Heebo',sans-serif;font-size:14px}button,input,textarea,select{font:inherit}button{cursor:pointer;min-height:44px;border:0;border-radius:8px;background:transparent;color:inherit}button:hover{filter:brightness(.94)}button:focus-visible,a:focus-visible{outline:3px solid #c29c55;outline-offset:3px}input,textarea,select{width:100%;padding:13px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}input:focus,textarea:focus,select:focus{outline:2px solid #80a792}header{max-width:1200px;margin:auto;height:100px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-size:24px;font-weight:700;letter-spacing:-1px}.logo{display:grid;place-items:center;background:var(--green);color:#fff;width:38px;height:38px;border-radius:50%;font-size:25px}.badge{font-size:9px;letter-spacing:1.5px;color:var(--muted);border-left:1px solid #cdd3c9;margin-left:8px;padding-left:18px}.primary{background:var(--green);color:white;padding:0 20px;font-weight:600}.primary:disabled{opacity:.4;cursor:default}main{max-width:1200px;margin:auto;padding:0 36px}.intro{display:flex;justify-content:space-between;align-items:center;padding:46px 0 40px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:600;color:#8a947f}h1{font-size:54px;letter-spacing:-2px;line-height:1.06;margin:15px 0 18px;font-weight:500}h1 em{font-family:Georgia,serif;font-weight:400;color:#56806b}.intro p{color:var(--muted);font-size:14px}.intro-art{width:250px;text-align:center;transform:rotate(-7deg);padding-right:30px;color:#77947d}.intro-art>span{font-size:58px;display:block;line-height:1.4}.intro-art div{font-family:'Heebo',sans-serif;font-size:25px}.intro-art small{display:block;font-size:9px;letter-spacing:3px;margin-top:12px}.workspace{display:grid;grid-template-columns:270px 1fr;gap:26px;align-items:start}aside{padding:8px 0}h2{font-size:17px;margin:0}.library-head{display:flex;justify-content:space-between;align-items:center}.library-head h2 span{font-size:11px;color:var(--muted);background:#e8ece3;padding:3px 7px;margin-left:7px;border-radius:5px}.icon{width:42px;font-size:22px}.search{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;margin:15px 0;background:#fafbf8;padding-left:13px;gap:5px}.search span{font-size:23px;color:var(--muted)}.search input{border:0;background:transparent;padding:12px 8px;min-width:0}.song{width:100%;text-align:start;padding:17px 15px;display:block;border:1px solid transparent;margin-bottom:7px;min-height:90px}.song.active{border-color:#c6d4c5;background:#e9efe4}.song strong{display:block;font-size:15px;font-weight:600}.song small{display:block;margin-top:5px;color:var(--muted);font-size:12px}.song-meta{display:flex;align-items:center;justify-content:space-between;margin-top:12px;font-size:10px;color:#75806e}.mini-bar{width:65px;height:3px;background:#d8e1d2;border-radius:4px}.mini-bar i{display:block;height:100%;background:#6d927b}.library-bottom{border-top:1px solid var(--line);margin-top:22px;padding:12px 0}.text-btn{font-size:12px;color:var(--green);padding:0}.library-bottom p{font-size:11px;line-height:1.8;color:#969c90}.practice{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 8px 24px #253e3604}#song-head{padding:27px 30px 22px;display:flex;justify-content:space-between;align-items:center}#song-head h2{font-size:25px;font-weight:500}#song-head p{font-size:12px;color:var(--muted);margin:7px 0 0}.song-label{font-size:9px;letter-spacing:1.4px;color:#8b947e;margin-bottom:9px}.tabs{display:flex;border-bottom:1px solid var(--line);padding:0 30px;gap:26px}.tabs button{border-radius:0;min-height:49px;color:#a1a79a;font-size:10px;padding:0 2px;white-space:nowrap;border-bottom:2px solid transparent}.tabs span{font-size:12px;margin-left:8px}.tabs .selected{border-bottom-color:var(--green);color:var(--green)}#tools{display:flex;align-items:center;justify-content:space-between;padding:18px 30px;gap:12px;background:#fcfcfa;border-bottom:1px solid #eff1eb;font-size:11px;color:var(--muted)}#tools select{width:auto;padding:8px;max-width:155px;background:transparent;font-size:11px}#tools label{display:flex;align-items:center;gap:8px}input[type=range]{padding:0;width:86px;accent-color:var(--green)}.lyrics{font-family:'Heebo','DM Sans',sans-serif;font-size:24px;line-height:2.1;padding:27px 40px 35px;min-height:270px;white-space:pre-wrap;overflow-wrap:anywhere}.line{margin:0 0 4px}.word{font-family:inherit;font-size:inherit;line-height:inherit;min-height:0;padding:0 2px;margin:0;border-radius:4px;vertical-align:baseline}.word.masked{color:transparent;background:#eaf0e5;border-bottom:2px solid #c7d5c1;user-select:none}.word.masked:focus-visible{outline:2px solid var(--green)}.word.revealed{color:#73917c;background:#f1f5ed}.pending-line{color:#c5cdbd}.recall-next{color:#9aa48e;font-size:14px;padding-top:15px}.section-status{text-align:center;font-size:11px;color:var(--muted);padding:0 15px 12px}#actions{padding:0 30px 24px}.action-row{display:flex;gap:10px;justify-content:center}.secondary{border:1px solid var(--line);padding:0 18px;background:#fff;font-size:12px}.tip{border-top:1px solid var(--line);background:#fafbf7;padding:18px 20px;text-align:center;font-size:10px;color:#929a88}.tip span{color:#91a77b;margin-right:6px}.complete{background:#eaf1e4;padding:18px;text-align:center;border-radius:9px;margin-bottom:15px}.complete strong{display:block;margin-bottom:6px}.complete p{margin:0;font-size:12px}footer{display:flex;justify-content:space-between;font-size:10px;color:#969e8e;padding:30px 0}dialog{max-width:520px;width:calc(100% - 28px);max-height:90dvh;border:1px solid var(--line);border-radius:15px;padding:25px;color:var(--ink)}dialog::backdrop{background:#1c302780;backdrop-filter:blur(3px)}.dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}form>label{display:block;font-size:12px;margin:16px 0}form>label input,form>label textarea,form>label select{display:block;margin-top:7px}textarea{resize:vertical}.muted{font-size:11px;color:var(--muted)}.dialog-actions{display:flex;justify-content:space-between;margin-top:20px}.danger{color:#a4493e;font-size:12px}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:white;padding:12px 20px;border-radius:10px;display:none;max-width:90vw;z-index:5}.empty{padding:35px 20px;text-align:center;color:var(--muted);line-height:1.8}button:disabled{opacity:.4;cursor:default}@media(min-width:900px){.practice{min-height:580px}}@media(max-width:700px){header{height:78px;padding:0 20px}.brand{font-size:22px}.badge{display:none}.primary{padding:0 14px}main{padding:0 18px}.intro{padding:30px 2px 22px}.eyebrow{font-size:8px;letter-spacing:1.3px}h1{font-size:42px;margin:12px 0}.intro p{font-size:12px;max-width:240px;line-height:1.7}.intro-art{width:85px;padding:0;align-self:center}.intro-art>span{font-size:45px}.intro-art div,.intro-art small{display:none}.workspace{display:flex;flex-direction:column;gap:15px}aside{width:100%;padding:0}.library-head h2{font-size:14px}.search{margin:7px 0 12px}#songs{display:flex;overflow-x:auto;gap:8px;padding-bottom:4px}.song{min-width:170px;width:170px;flex-shrink:0;min-height:82px;margin:0;padding:12px}.song-meta{margin-top:9px}.library-bottom{margin:0;padding:0;display:flex;justify-content:space-between;align-items:center;border:0}.library-bottom p{font-size:9px;line-height:1.4}.library-bottom p br{display:none}.library-bottom p{max-width:180px;text-align:right}.practice{width:100%;border-radius:12px}#song-head{padding:23px 20px 17px}#song-head h2{font-size:23px}.tabs{padding:0 20px;justify-content:space-between;gap:10px}.tabs span{font-size:12px;margin-left:5px}#tools{padding:14px 16px;flex-wrap:wrap;gap:8px}.lyrics{padding:24px 23px;min-height:260px;font-size:23px}#actions{padding:0 18px 22px}.tip{line-height:1.6;padding:14px 18px}footer{font-size:9px;gap:18px;line-height:1.6;padding:22px 0}footer span:last-child{text-align:right}.action-row{flex-wrap:wrap}.intro-art{opacity:.7}}@media(prefers-reduced-motion:no-preference){.practice{animation:appear .4s ease}@keyframes appear{from{opacity:.4;transform:translateY(5px)}to{opacity:1;transform:none}}}