: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:#684222 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:11px;padding:8px 12px;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%;border:1px solid #c4a277;border-radius:9px;background:#fff7e9c9;padding:8px 11px;min-height:42px}textarea{resize:vertical;line-height:1.45}input{font-size:16px}label,legend{font-size:18px}fieldset{margin:0;padding:0;border:0;min-width:0}legend{margin-bottom:5px}small{font:12px system-ui;color:#725940;margin-left:8px}h1,h2,p{margin:0}h1{font-size:23px}h2{font-size:24px}.topbar{height:58px;padding:6px max(18px,calc((100% - 1240px)/2));display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff3e2f5;box-shadow:0 2px 8px #2c190c22}.topbar a{color:inherit;text-decoration:none;min-height:44px;display:flex;align-items:center;gap:8px;font-size:20px}.topbar button{border:0;background:transparent;font-size:19px}main{max-width:1240px;width:calc(100% - 148px);margin:16px auto 0}.book-tabs{display:flex;justify-content:center;gap:5px;margin:0 35px -8px;position:relative;z-index:2}.book-tabs button{min-height:48px;padding:10px 26px;border-radius:22px 22px 0 0;border-color:#c9a56a;background:linear-gradient(#fff6e7,#ecd3ae);box-shadow:0 -1px 3px #fff8}.book-tabs .selected{background:linear-gradient(#148791,#004d58);color:#fff;box-shadow:inset 0 0 0 2px #ceab64}.songbook{position:relative;display:grid;grid-template-columns:1fr 1fr;height:calc(100dvh - 139px);min-height:480px;max-height:760px;margin:0;padding:24px 40px 38px;background:url('/assets/reader/reference-hardcover-v1.png') center/100% 100% no-repeat;filter:drop-shadow(0 12px 8px #21140675);gap:28px}.paper{min-width:0;min-height:0;display:flex;flex-direction:column;padding:10px 12px 6px;background:linear-gradient(100deg,#fff1d9f2,#fff3e0ed);border-radius:22px 40px 9px 9px}.left-page{margin-left:10px}.right-page{margin-right:9px;background:linear-gradient(95deg,#f0d4abe8,#fff3e0ed 12%,#fff1d9f2)}.writing-area{display:flex;flex-direction:column;gap:8px;min-height:0;flex:1}.writing-area>label{margin-top:2px}#song-idea{min-height:62px;max-height:120px}.lyrics-heading{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:3px}.lyrics-heading>div{display:flex;gap:5px}.lyrics-heading button{font-size:14px;padding:5px 8px;min-height:38px}#lyrics{flex:1;min-height:100px;resize:none;font-size:16px;line-height:1.5;background:repeating-linear-gradient(transparent 0,transparent 23px,#ae885530 24px),#fff3df95;padding:8px 12px}.paper-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:8px;flex-shrink:0}#draft-status{font:12px/1.4 system-ui;max-width:220px}.style-area{display:flex;flex-direction:column;gap:9px;overflow-y:auto;min-height:0;flex:1;padding:0 3px 5px;scrollbar-width:thin}.choices{display:flex;flex-wrap:wrap;gap:5px}.choices button{font-size:15px;min-height:36px;padding:5px 10px;border-color:#d5b68c}.choices button[aria-pressed=true]{background:linear-gradient(#148993,#045663);border-color:#caac5c;color:white;box-shadow:0 0 0 1px #ddbc6a}.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 66px;min-height:66px;padding:4px;font-size:13px}.instrument-strip span{display:block;font-size:27px;margin-bottom:3px}.instrument-strip button[aria-pressed=true]{border:2px solid #c39437;background:#fffadf;box-shadow:0 0 4px #ddac49}.inline-fields{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:8px;align-items:center}.inline-fields label{font-size:16px}.inline-fields select{min-width:0;padding:6px}.mode-row{display:flex;align-items:center;justify-content:space-between;gap:5px}.text-button{border:0;background:transparent;padding:4px;color:#116874;font-size:14px}.recording-area{flex-shrink:0;padding-top:9px}.primary{display:block;width:92%;margin:auto;border:2px solid #c69738;border-radius:24px;background:linear-gradient(#12828d,#034b57);color:white;font-size:20px;font-weight:bold;box-shadow:0 2px 4px #60452755}.primary:hover{background:#0b7680}#recording-status{font:13px/1.4 system-ui;margin:8px 4px 4px}audio{width:100%;height:38px}#music-friend{position:absolute;right:-70px;bottom:6px;width:120px;height:148px;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:120px!important;height:145px!important;scale:-1 1}#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:14px;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:12px 16px;border-bottom:1px solid #dfc9a8;flex-shrink:0}dialog h2{font-size:23px}dialog footer{padding:9px 14px;display:flex;justify-content:flex-end;border-top:1px solid #dfc9a8;flex-shrink:0}.dialog-body{padding:14px 16px;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:10px;align-items:center}.options-grid label{font-size:16px}.options-grid select{min-height:34px;padding:5px}.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}.empty-note{color:#785d3f;font-size:16px}.rhyme-results{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.library-link{display:inline-block;color:#086778;margin:10px 0;min-height:30px}.saved-item .delete-song{font-size:14px}#tool-body input{font-size:16px}
@media(max-width:1100px){main{width:calc(100% - 54px)}.songbook{padding:21px 26px 30px;gap:17px}.paper{padding:8px}.left-page{margin-left:6px}.right-page{margin-right:5px}.book-tabs button{padding:8px 17px}.lyrics-heading{align-items:flex-start;flex-direction:column}.lyrics-heading>div{width:100%}.lyrics-heading button{flex:1}.inline-fields{gap:5px}.inline-fields label{font-size:14px}#music-friend{right:-29px;width:88px;height:110px;bottom:-10px}#music-friend .genie-svg{width:88px!important;height:106px!important}.mode-row{flex-wrap:wrap}.primary{width:100%}}
@media(max-width:700px){.topbar{padding:6px 10px;height:54px}.topbar h1{font-size:22px}.topbar a,.topbar button{font-size:16px}.topbar a span{display:none}main{width:calc(100% - 20px);margin:12px auto 18px}.book-tabs{margin:0 5px;gap:3px}.book-tabs button{font-size:14px;padding:6px;flex:1;min-height:50px;border-radius:14px 14px 0 0}.songbook{display:flex;flex-direction:column;gap:0;height:auto;max-height:none;min-height:0;padding:8px 7px 12px;background:#14565b;border:1px solid #c2994f;border-radius:9px;filter:none;box-shadow:0 6px 0 #b18b52,0 12px 22px #24190c88}.paper{margin:0;padding:14px;background:#fff0d8;border-radius:9px}.left-page{border-bottom:1px solid #cba97a;border-radius:9px 9px 0 0}.right-page{border-radius:0 0 9px 9px}.writing-area{min-height:485px}#lyrics{min-height:230px}.style-area{overflow:visible;gap:12px}.lyrics-heading{flex-direction:row;flex-wrap:wrap}.lyrics-heading>div{width:auto}.lyrics-heading button{min-height:44px}.choices button{min-height:44px}.inline-fields{grid-template-columns:auto 1fr}.inline-fields label{font-size:16px}#music-friend{display:none}.paper-footer{padding-bottom:7px}#draft-status{max-width:170px}.options-grid{grid-template-columns:auto 1fr}.options-grid select{min-height:44px}.recording-area{padding-top:14px}button{min-height:44px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
/* Let the actual curved paper show through; keep actions above its lower edge. */
@media(min-width:701px){.songbook{background-size:100% 110%;background-position:center top;padding:35px 88px 80px;gap:30px}.paper{background:transparent}.paper-footer{padding-top:6px}.recording-area{padding-top:5px}.mode-row{margin-bottom:8px}.style-area{gap:7px}#lyrics{background:repeating-linear-gradient(transparent 0,transparent 23px,#ae885530 24px),#fff3e6f7}.style-area .choices{flex-wrap:nowrap;overflow-x:auto;padding-bottom:5px;scrollbar-width:thin}.style-area .choices button{flex-shrink:0}#options-dialog header{padding:8px 14px}#options-dialog .dialog-body{padding:10px 14px;gap:8px}#options-dialog footer{padding:6px 12px}#options-dialog footer button{min-height:34px;padding:5px 12px}}
@media(min-width:701px) and (max-width:1100px){.songbook{padding-left:62px;padding-right:62px;gap:22px}.lyrics-heading{flex-direction:column}.mode-row .choices{flex-wrap:nowrap}.mode-row button{font-size:13px;padding:5px 7px}.recording-area .mode-row{gap:2px}}
.choices button{min-height:44px;font-size:16px}.lyrics-heading button{min-height:44px}#draft-status{background:#fff3dfef;border-radius:7px;padding:5px 7px}

/* Fit the writing surface at normal laptop zoom, including shorter windows. */
@media(min-width:701px){main{margin-top:8px}.book-tabs button{min-height:44px;padding-top:8px;padding-bottom:8px}.songbook{height:calc(100dvh - 117px);min-height:0;padding-top:28px;padding-bottom:65px}.writing-area{gap:5px;overflow-y:auto;scrollbar-width:thin}.writing-area>input{flex-shrink:0}.writing-area>label,.lyrics-heading{flex-shrink:0}#song-idea{min-height:48px;max-height:86px;flex-shrink:0}#lyrics{min-height:80px}.paper label,.paper legend{font-size:16px}}

/* Inset controls from the curved outer paper edges shown in the reference. */
@media(min-width:701px){.left-page{padding-left:32px;padding-right:6px}.right-page{padding-left:6px;padding-right:32px}.songbook{padding-bottom:80px}.lyrics-heading{flex-wrap:wrap}.lyrics-heading>div{flex-wrap:wrap}}
@media(min-width:701px) and (max-width:1100px){.left-page{padding-left:22px}.right-page{padding-right:22px}}