*{box-sizing:border-box}html{background:#eee6d8;color:#46392e;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}body{margin:0;min-height:100svh;padding:42px max(24px,env(safe-area-inset-right)) 24px max(24px,env(safe-area-inset-left))}main{max-width:580px;margin:auto}.eyebrow{font-size:10px;letter-spacing:.23em;color:#87715d;display:flex;justify-content:space-between;gap:12px;margin:0 0 24px}.eyebrow span{letter-spacing:.08em;font-size:10px}h1{font-family:"Songti SC","STSong",SimSun,serif;font-size:clamp(31px,7.5vw,46px);font-weight:400;line-height:1.48;letter-spacing:.05em;margin:0}.dedication{font-size:12px;line-height:1.8;margin:16px 0 0;color:#8e7965}.strings{height:76px;display:flex;flex-direction:column;justify-content:center;gap:7px;margin:20px 0 22px;transform:rotate(-2deg)}.strings i{height:1px;background:#b9a181}.strings i:nth-child(5){height:1.5px}.strings i:nth-child(6){height:2px}.song>p:first-child{font-size:10px;letter-spacing:.05em;color:#8e7965;margin:0 0 8px}h2{font-family:"Songti SC",SimSun,serif;font-size:23px;font-weight:400;line-height:1.5;margin:0}.where{font-size:12px;color:#8e7965;display:flex;gap:16px;align-items:center;margin:12px 0 0}.where #chord{font-family:Georgia,serif;font-size:15px;color:#a16a43}#lyric{font-size:15px;line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere;max-height:9.5em;overflow:auto;margin:15px 0 22px;min-height:1.9em}.controls{display:flex;flex-direction:column;gap:12px}.primary{background:#554334;color:#fff9ed;border:1px solid #554334;min-height:54px;font-size:15px}.secondary{display:flex;gap:10px}.secondary button{flex:1;border:1px solid #c4b6a3;background:transparent;color:#66533f;min-height:44px;font-size:13px}button{font-family:inherit;border-radius:3px;cursor:pointer;touch-action:manipulation}button:disabled{opacity:.4;cursor:default}button:focus-visible,select:focus-visible,.import-label:focus-within{outline:2px solid #ac603b;outline-offset:4px}#status{font-size:12px;line-height:1.8;min-height:3.6em;margin:14px 0 10px;color:#786857}footer{border-top:1px solid #dacdbd;padding-top:18px;display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;font-size:11px;color:#87715d}footer p{width:100%;margin:0;font-size:10px;line-height:1.8}select{max-width:185px;background:transparent;border:0;border-bottom:1px solid #c4b6a3;color:inherit;font:inherit;padding:4px}.import-label{position:relative;text-decoration:underline;text-underline-offset:4px;cursor:pointer}.import-label input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}details{font-size:11px;margin-top:20px}pre{white-space:pre-wrap;overflow-wrap:anywhere}body[data-playback=playing] .strings,body[data-playback=vamping] .strings{animation:breath 4s ease-in-out infinite}@keyframes breath{50%{opacity:.6}}@media(prefers-reduced-motion:reduce){.strings{animation:none!important}}@media(min-width:760px){body{padding-top:64px}main{max-width:650px}header{position:relative}.strings{margin-top:30px;margin-bottom:30px}h1 br{display:none}.controls{flex-direction:row}.primary{flex:1.3}.secondary{flex:1}#lyric{min-height:3.8em}}@media(max-height:450px) and (min-width:650px){body{padding-top:20px}main{max-width:790px;display:grid;grid-template-columns:1fr 1fr;gap:10px 32px}header{grid-row:1/4}.eyebrow{display:block;margin-bottom:15px}.eyebrow span{display:block;margin-top:7px}h1{font-size:30px}h1 br{display:block}.dedication{margin-top:10px}.strings{display:none}.song{grid-column:2;grid-row:1}.song>p:first-child{font-size:9px}h2{font-size:20px}.where{margin-top:4px}#lyric{min-height:0;max-height:4em;font-size:12px;margin:5px 0}.controls{grid-column:2;flex-direction:column;gap:6px}.primary{min-height:42px}.secondary button{min-height:36px}#status{grid-column:2;margin:0;min-height:1.8em}footer{grid-column:1/-1;padding-top:10px;gap:8px 18px}footer p{width:auto}.dedication{max-width:220px}}.listening{border-top:1px solid #dacdbd;margin:14px 0 20px;padding-top:16px;font-size:13px}.listening label{display:flex;gap:8px;align-items:center;min-height:32px}.listening input{accent-color:#78614b;width:18px;height:18px}.listening p{font-size:11px;line-height:1.8;margin:6px 0;color:#87715d}.hint{font-size:11px;line-height:1.8;color:#87715d}fieldset{border:0;padding:14px 0;margin:0;min-width:0}fieldset>label{display:block;margin:14px 0;font-size:12px}textarea{display:block;width:100%;resize:vertical;margin-top:8px;background:#f6f0e6;border:1px solid #c4b6a3;border-radius:3px;color:#46392e;padding:10px;font:inherit;line-height:1.6}.edit-row{display:flex;gap:18px}.edit-row label{flex:1;font-size:12px}.edit-row input{display:block;width:100%;max-width:150px;background:transparent;border:1px solid #c4b6a3;padding:9px;color:inherit;font:inherit;margin-top:8px}.back-home{display:inline-block;font-size:11px;color:#87715d;margin-top:24px;text-underline-offset:4px}@media(max-height:450px) and (min-width:650px){.listening,#library-editor,.back-home{grid-column:1/-1}.listening{margin:0;padding-top:10px}}

#progress{font-size:10px;color:#8e7965;margin:10px 0 0}#lyric{font-size:18px;line-height:1.85;margin:12px 0 6px;min-height:1.85em}#lyric-next{font-size:12px;color:#8e7965;line-height:1.8;min-height:1.8em;margin:0 0 20px;overflow-wrap:anywhere}body[data-playback=playing] header,body[data-playback=vamping] header{display:none}body[data-playback=playing] .strings,body[data-playback=vamping] .strings{height:30px;margin:4px 0 22px;gap:4px}@media(max-height:450px) and (min-width:650px){body[data-playback=playing] .song,body[data-playback=vamping] .song{grid-column:1;grid-row:1/4}#lyric{font-size:16px}#lyric-next{margin-bottom:8px}}

#session-options{padding:4px 0 20px}#session-options details label{display:block;margin:12px 0;line-height:1.8}.takes{font-size:11px;margin-top:24px;color:#786857;line-height:1.8}.takes a{display:inline-block;margin:0 14px 10px 0;color:inherit}.takes p{overflow-wrap:anywhere}#recordings>div{border-bottom:1px solid #dacdbd;padding:8px 0}footer button{border:1px solid #c4b6a3;background:transparent;color:inherit;padding:8px;font-size:11px}@media(max-height:450px) and (min-width:650px){#session-options,.takes{grid-column:1/-1}}

body[data-playback=playing] #session-options,body[data-playback=vamping] #session-options,body[data-playback=paused] #session-options,body[data-playback=ending] #session-options{display:none}

#login { margin: 1.5rem 0; }
#login input { display:block; width:100%; box-sizing:border-box; margin: .7rem 0; padding:.7rem; }
#logout { background:transparent; border:0; color:inherit; padding:0; font:inherit; cursor:pointer; text-decoration:underline; }