:root{color-scheme:light;--ink:#392b1e;--teal:#075c66;--gold:#bf9149;--cream:#fff5e5}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);font:16px Georgia,serif;background:linear-gradient(#3d291bc2,#49321cc9),url('/assets/reader/reference-room-v1.png') center/cover fixed}
button,input,textarea,select{font:16px Georgia,serif;color:inherit}
button,a,input,textarea,select{touch-action:manipulation}
button{cursor:pointer;border:1px solid #c7a579;background:#fff2dc;border-radius:8px;padding:7px 11px;min-height:44px}
button:hover{background:#ffe5b9}button:disabled{opacity:.6;cursor:default}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid #158a9a;outline-offset:3px}
input,textarea,select{width:100%;min-width:0;border:1px solid #c4a277;border-radius:6px;background:#fffcf4;padding:8px 10px;min-height:44px}
textarea{resize:vertical;line-height:1.45}
label,legend{font-size:16px}fieldset{margin:0;padding:0;border:0;min-width:0}legend{margin-bottom:5px}
small{font:13px system-ui;color:#725940;margin-left:8px}h1,h2,p{margin:0}h1{font-size:22px}h2{font-size:21px}
.topbar{height:54px;padding:5px 20px;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff3e2;box-shadow:0 2px 8px #2c190c22}
.topbar a{color:inherit;text-decoration:none;min-height:44px;display:flex;align-items:center;gap:6px}
.topbar button{border:0;background:transparent}
.topbar h1{margin-right:auto}.topbar .test-link{font:16px system-ui}
.genre-pickers{display:grid;grid-template-columns:1fr 1fr;gap:8px}.genre-pickers label{display:grid;gap:4px}.genre-pickers small{margin:0;font:12px system-ui;display:none}
.instrument-picker{display:grid;grid-template-columns:1fr 1fr auto;gap:5px}.selected-instruments{padding-top:7px}#instrument-status{font:13px/1.3 system-ui;min-height:17px;margin-top:3px}
main{max-width:1480px;width:calc(100% - 40px);margin:8px auto 36px;position:relative;isolation:isolate}
/* A shallow music-stand tray leaves its whole face available for tools. */
main::after{content:"";position:absolute;z-index:-1;top:80%;bottom:-36px;left:calc(50% - 14px);width:28px;background:linear-gradient(90deg,#352319,#b18a53 44%,#684827 68%,#2c1d15);border-radius:4px}
.book-tabs{display:flex;gap:8px;margin-bottom:8px;align-items:center;padding-right:76px}
.book-tabs button{background:#fff3e2;border-color:#c29a60}
.view-switch{display:none}
.songbook{position:relative;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:14px;height:calc(100dvh - 154px);min-height:440px;margin:0;padding:14px 14px 17px;background:linear-gradient(110deg,#614126,#39271d 60%,#75502c);border:1px solid #be9354;border-radius:12px 12px 5px 5px;box-shadow:0 9px 22px #160c0980}
.songbook::after{content:"";position:absolute;left:-5px;right:-5px;bottom:-10px;height:16px;border:1px solid #d0a363;border-radius:4px;background:linear-gradient(#ddb77d,#987044 45%,#624024 48%,#4b301e);box-shadow:0 7px 8px #1c100c66;pointer-events:none}
.paper{min-width:0;min-height:0;display:flex;flex-direction:column;padding:14px;background:linear-gradient(105deg,#fff9ed,#f8ecd7);border:1px solid #ddc59e;border-radius:3px;box-shadow:0 2px 4px #100b0940}
.writing-area{display:flex;flex-direction:column;gap:6px;min-height:0;flex:1;overflow-y:auto;scrollbar-width:thin;padding:2px}
.writing-area>label,.writing-area>input,.lyrics-heading{flex-shrink:0}
#song-idea{min-height:54px;max-height:100px;flex-shrink:0}
.lyrics-heading{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap}
.lyrics-heading>div{display:flex;gap:5px;flex-wrap:wrap}
.lyrics-heading button{padding:5px 8px}
#lyrics{flex:1;min-height:105px;resize:none;line-height:1.5;background:repeating-linear-gradient(transparent 0,transparent 23px,#ae88552b 24px),#fffcf4}
.paper-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:8px;flex-shrink:0}
#draft-status{font:13px/1.4 system-ui}
.style-area{display:flex;flex-direction:column;gap:10px;overflow-y:auto;min-height:0;flex:1;padding:2px 3px 7px;scrollbar-width:thin}
.choices{display:flex;flex-wrap:wrap;gap:5px}
.choices button{padding:5px 10px;border-color:#d5b68c}
.choices button[aria-pressed=true]{background:#075c66;border-color:#075c66;color:white}
.instrument-strip{display:flex;gap:5px;overflow-x:auto;padding:2px 2px 7px;scrollbar-width:thin;scrollbar-color:#b99458 transparent}
.instrument-strip button{flex:0 0 76px;min-height:66px;padding:4px}
.instrument-strip span{display:block;font-size:25px;margin-bottom:2px}
.instrument-strip button[aria-pressed=true]{border:2px solid #b68029;background:#fff3cb}
.mode-row{display:flex;align-items:center;justify-content:space-between;gap:5px;flex-wrap:wrap;margin-bottom:6px}
.text-button{border:0;background:transparent;padding:4px 6px;color:#075c66}
.recording-area{flex-shrink:0;padding-top:8px;border-top:1px solid #dfc9a8}
.primary{display:block;width:100%;border:1px solid #b2863a;background:#075c66;color:white;font-size:19px;font-weight:bold}
.primary:hover{background:#0b7680}
#recording-status{font:14px/1.4 system-ui;margin:7px 0 0}
.primary:disabled{background:#c7c1b6;border-color:#aaa194;color:#453f36;opacity:1;cursor:wait}
#song-waiting{margin-top:7px;padding:8px;background:#f3e7d2;border:1px solid #d7bd91;border-radius:7px;font:14px/1.35 system-ui}
#song-waiting[hidden]{display:none}
.waiting-heading{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.waiting-heading strong{font-size:16px}
#waiting-elapsed{margin-left:auto;font-variant-numeric:tabular-nums}
#song-waiting p{margin-top:4px}#waiting-sound{margin-top:5px;min-height:32px;padding:4px 8px;font-size:16px}
.waiting-spinner{width:16px;height:16px;border:2px solid #c8b897;border-top-color:#075c66;border-radius:50%;animation:waiting-turn 1.2s linear infinite}
@keyframes waiting-turn{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.waiting-spinner{animation:none}}
@media(max-width:700px){#waiting-sound{min-height:44px}}
audio{width:100%;height:38px;margin-top:5px}
/* The companion sits beside the toolbar, clear of both working surfaces. */
#music-friend{position:absolute;right:8px;top:-62px;width:66px;height:58px;pointer-events:none}
#music-friend .local-reading-genie{position:static!important;margin:0!important;padding:0!important;background:none!important;border:0!important;min-height:0!important;box-shadow:none!important}
#music-friend .genie-svg{width:66px!important;height:58px!important}
#music-friend .companion-caption,#music-friend .genie-label,#music-friend label,#music-friend input{display:none!important}
dialog{width:min(650px,calc(100% - 24px));max-height:calc(100dvh - 24px);padding:0;border:1px solid #b4915e;border-radius:12px;background:#fff8ec;color:var(--ink);box-shadow:0 14px 55px #160c0b55}
dialog[open]{display:flex;flex-direction:column}dialog::backdrop{background:#291a10a8}
dialog header{padding:10px 14px;border-bottom:1px solid #dfc9a8;flex-shrink:0}dialog h2{font-size:21px}
dialog footer{padding:8px 14px;display:flex;justify-content:flex-end;border-top:1px solid #dfc9a8;flex-shrink:0}
.dialog-body{padding:12px 14px;overflow:auto;min-height:0}
.dialog-body>p{line-height:1.5;margin-bottom:12px}
.options-grid{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:4px 8px;align-items:center}
#mode-hint{font:13px/1.35 system-ui;margin:0 0 7px}
.options-grid label{font-size:16px}.options-grid select{min-height:34px;padding:5px}
#options-dialog header{padding:8px 14px}#options-dialog .dialog-body{padding:10px 14px}#options-dialog footer{padding:6px 12px}#options-dialog footer button{min-height:34px;padding:5px 12px}
.saved-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #dbc6a7}
.saved-item button:first-child{flex:1;text-align:left}.saved-item small{display:block;margin:4px 0 0}
.tool-stack{display:grid;gap:9px}.tool-stack button{text-align:left}.tool-stack label{display:grid;gap:5px}
.rhyme-results{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.library-link{display:inline-block;color:#086778;margin:10px 0;min-height:44px}
#tool-body input{font-size:16px}
@media(min-width:701px) and (max-height:700px){.style-area{gap:7px}.style-area .choices{flex-wrap:nowrap;overflow-x:auto;padding-bottom:5px}.style-area .choices button{flex-shrink:0}.paper{padding:10px}.songbook{min-height:400px}}
@media(min-width:701px) and (max-width:1000px){main{width:calc(100% - 24px)}.songbook{gap:10px;padding:10px}.paper{padding:10px}.lyrics-heading>div{width:100%}.lyrics-heading button{flex:1}.mode-row{gap:2px}}
@media(max-width:700px){
 .topbar{padding:5px 10px}.topbar h1{font-size:20px}.topbar a span{display:none}.topbar button{padding:5px}
 .topbar{height:auto;min-height:54px;gap:7px;flex-wrap:wrap}.topbar h1{font-size:18px}.topbar .test-link,.topbar button{font-size:16px}
 .genre-pickers{gap:6px}.instrument-picker{grid-template-columns:1fr 1fr}.instrument-picker button{grid-column:1/-1}
 main{width:calc(100% - 16px);margin:8px auto 28px}
 .book-tabs{gap:5px;margin-bottom:7px;padding:0}.book-tabs button{flex:1;padding:5px;line-height:1.2}
 .view-switch{display:flex;gap:5px;margin-bottom:7px}.view-switch button{flex:1;background:#fff3e2}.view-switch [aria-pressed=true]{background:#075c66;color:#fff;border-color:#d7b36d}
 .songbook{display:block;height:auto;min-height:0;padding:8px 8px 12px}
 .paper{padding:10px}
 .songbook[data-view=lyrics] .right-page,.songbook[data-view=sound] .left-page{display:none}
 .writing-area{min-height:385px;overflow:visible}#lyrics{min-height:180px}
 .lyrics-heading{gap:5px}.lyrics-heading>div{width:100%;gap:4px}.lyrics-heading button{flex:1;padding:5px;font-size:16px}
 .style-area{overflow:visible;gap:12px}.choices button{min-height:44px}
 .paper-footer{align-items:center}#draft-status{max-width:155px}
 #music-friend{display:none}.mode-row{gap:5px}.recording-area{margin-top:6px}
 .options-grid{grid-template-columns:auto 1fr;gap:6px}.options-grid select,#options-dialog footer button{min-height:44px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.walking-notes{position:relative;height:26px;overflow:hidden;color:#906818}
.walking-notes span{position:absolute;left:-24px;font-size:24px;line-height:26px;animation:notes-walk 6s linear infinite}
.walking-notes span:nth-child(2){animation-delay:-1.5s}.walking-notes span:nth-child(3){animation-delay:-3s}.walking-notes span:nth-child(4){animation-delay:-4.5s}
@keyframes notes-walk{0%{left:-24px;transform:rotate(-12deg)}25%{transform:rotate(12deg) translateY(-3px)}50%{transform:rotate(-12deg)}75%{transform:rotate(12deg) translateY(-3px)}100%{left:100%;transform:rotate(-12deg)}}
@media(prefers-reduced-motion:reduce){.walking-notes span{animation:none;position:static;display:inline-block;margin-right:24px}}