:root{color-scheme:light;--ink:#242721;--paper:#eae9e5;--muted:#777b73;--accent:#6b713a;font-family:Arial,Helvetica,sans-serif;font-size:16px}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--paper);overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{opacity:.28;cursor:default}:focus{outline:none}.keyboard-focus :is(button,a,[tabindex]):focus-visible{outline:1px solid currentColor;outline-offset:2px}button{border:0;background:none}#app,#scene{position:fixed;inset:0}#scene{touch-action:none}canvas{display:block;width:100%;height:100%}#masthead{position:absolute;top:48px;left:52px;pointer-events:none}.eyebrow{font-size:.75rem;letter-spacing:.15em;font-weight:600;margin:0 0 18px}h1{font:normal clamp(2rem,3.6vw,3.7rem)/1.05 Georgia,'Times New Roman',serif;letter-spacing:-.055em;margin:0}h1 span{color:var(--accent)}#count{font-size:.875rem;color:var(--muted);margin:17px 0}#top-actions{position:absolute;right:48px;top:49px}.quiet{font-size:.875rem;padding:10px 0;border-bottom:1px solid #aeafa6}.quiet span{margin-left:25px}#shelf-footer{position:absolute;bottom:30px;left:52px;right:48px;display:flex;align-items:end;justify-content:space-between;pointer-events:none}#shelf-footer p{font-size:.875rem;line-height:1.7;margin:0}#shelf-footer p span{color:var(--muted)}.zoom-controls{display:flex;align-items:center;border:1px solid #b6b8ae;border-radius:30px;pointer-events:auto;background:#eae9e5e6;position:absolute;left:auto;right:0;transform:none;bottom:0}.zoom-controls button{min-width:42px;min-height:42px}.zoom-controls button:first-child{font-size:24px}.zoom-controls button:last-child{font-size:21px}.zoom-controls #reset-view{font-size:.75rem;min-width:80px}#position-label{font-size:.75rem;letter-spacing:.13em;color:var(--muted)}#status{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:1.15rem Georgia,serif;text-align:center;max-width:300px}#status[hidden]{display:none}#hover-label{position:fixed;pointer-events:none;max-width:260px;padding:10px 14px;background:#22251eea;color:#f7f5ed;border-radius:3px;font-size:.8rem;line-height:1.4;box-shadow:0 4px 22px #0001}#index-panel{position:absolute;right:24px;top:24px;bottom:24px;width:min(400px,calc(100% - 48px));background:#f7f6f0f5;backdrop-filter:blur(16px);box-shadow:0 15px 60px #20251d20;border:1px solid #cecec4;z-index:5;overflow:auto}.index-head{position:sticky;top:0;background:#f7f6f0;display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid #deded3;font:1.3rem Georgia,serif}.round{width:44px;height:44px;border:1px solid currentColor;border-radius:50%;font-size:26px;line-height:1;font-weight:300}ol{list-style:none;margin:0;padding:10px 20px 24px}li button{width:100%;display:flex;gap:15px;text-align:left;padding:13px 0;border-bottom:1px solid #deded3;align-items:center}li .number{font-size:.75rem;color:var(--muted);min-width:20px}li .spine-swatch{height:30px;width:5px;flex-shrink:0}li strong{font-size:.875rem;font-weight:400;display:block}li small{font-size:.75rem;color:var(--muted);display:block;margin-top:4px}dialog{position:fixed;inset:0;border:0;padding:0;margin:0;width:100%;max-width:none;height:100%;max-height:none;background:transparent;color:#f3f1e9;overflow:hidden}dialog::backdrop{background:transparent}dialog:not([open]){display:none}.reader-close{position:absolute;right:42px;top:36px;z-index:4;color:#e9e8df;border-color:#ffffff40}.reader-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,100px);width:min(1020px,81vw);height:calc(100% - 190px);margin:85px auto 0;align-items:center}#cover-stage{width:100%;height:100%;max-height:570px;position:relative;pointer-events:none;display:flex;align-items:center;justify-content:center}#fallback-cover{max-height:100%;max-width:100%;object-fit:contain;box-shadow:15px 20px 40px #0007}#cover-unavailable{position:absolute;bottom:0;font-size:.75rem;color:#d9d7cf}#book-detail{max-height:100%;overflow:auto;padding:12px 6px 20px 0;scrollbar-width:thin;scrollbar-color:#ffffff40 transparent}#book-position{color:#c0c1ac;margin-bottom:22px}h2{font:normal clamp(2rem,4vw,3.8rem)/1.07 Georgia,'Times New Roman',serif;letter-spacing:-.035em;margin:0 0 18px}#book-author{font:italic 1.15rem/1.4 Georgia,serif;margin:0 0 30px;color:#d1d2c7}.rule{height:1px;background:#ffffff25;margin-bottom:25px}dl{display:flex;gap:45px;margin:0 0 25px}dt{font-size:.75rem;font-weight:600;letter-spacing:.13em;color:#afb19f;margin-bottom:9px}dd{font-size:.8125rem;margin:0;line-height:1.5}#book-synopsis{font-size:1rem;line-height:1.75;color:#e1e0d7;margin:0 0 22px}.book-links{display:flex;flex-wrap:wrap;gap:12px 24px}.book-links a{font-size:.875rem;color:#d8dcb5;text-underline-offset:4px}.reader-nav{position:absolute;bottom:27px;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:space-between;width:min(1020px,81vw);border-top:1px solid #ffffff25;padding-top:20px}.reader-nav button{font-size:1.25rem;min-height:44px;display:flex;gap:14px;align-items:center}.reader-nav button span{font-size:.875rem}.reader-nav p{font-size:.75rem;color:#bdc0b0}kbd{font-family:inherit;border:1px solid #ffffff30;padding:3px 6px;border-radius:3px;margin-left:3px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.fallback-scene{background:var(--paper)}body.webgl-failed #reader{background:#23271ef5}body.webgl-failed #cover-stage img:not([hidden]){display:block}body.webgl-failed #status{top:42%;line-height:1.6}
@media(max-width:700px){#masthead{top:27px;left:24px}.eyebrow{font-size:.75rem;margin-bottom:12px}h1{font-size:2.1rem}#count{font-size:.75rem;margin-top:12px}#top-actions{top:25px;right:24px}.quiet{font-size:.75rem}.quiet span{margin-left:10px}#shelf-footer{left:24px;right:24px;bottom:24px}#shelf-footer p{font-size:.75rem}#shelf-footer p span{display:none}#position-label{display:none}.zoom-controls{left:auto;right:0;transform:none}.reader-close{top:18px;right:20px;width:40px;height:40px}.reader-layout{display:flex;flex-direction:column;gap:20px;width:calc(100% - 48px);height:calc(100% - 145px);margin-top:59px;align-items:stretch}#cover-stage{height:42%;min-height:140px;flex-shrink:0}#book-detail{flex:1;min-height:0;padding:0 0 16px}#book-position{font-size:.75rem;margin-bottom:10px}h2{font-size:2rem;margin-bottom:10px}#book-author{font-size:1rem;margin-bottom:16px}.rule{margin-bottom:16px}dl{gap:32px;margin-bottom:15px}#book-synopsis{font-size:1rem;line-height:1.6}dt{font-size:.75rem}dd{font-size:.75rem}.reader-nav{bottom:13px;width:calc(100% - 48px);padding-top:8px}.reader-nav p{font-size:.75rem;text-align:center;max-width:130px;line-height:1.8}.reader-nav button{gap:8px}.reader-nav button span{font-size:.75rem}#hover-label{display:none}}
@media(max-height:580px) and (min-width:701px){.reader-layout{margin-top:45px;height:calc(100% - 130px)}h2{font-size:2.1rem}.reader-nav{bottom:12px;padding-top:8px}#book-author{margin-bottom:15px}.reader-close{top:17px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.text-arrow{font-family:Arial,Helvetica,sans-serif;font-variant-emoji:text}
.shelf-tabs{display:flex;gap:24px;pointer-events:auto;width:max-content;margin-bottom:18px;border-bottom:1px solid #b6b8ae}
.shelf-tabs button{min-height:44px;padding:10px 0 9px;margin-bottom:-1px;border-bottom:2px solid transparent;font-size:.875rem;color:var(--muted)}
.shelf-tabs button[aria-selected="true"]{border-bottom-color:var(--ink);color:var(--ink)}
#masthead #count{margin-bottom:6px}

/* Native modal top layer: page → backdrop → moving book → reader controls. */
body.reader-open #masthead,body.reader-open #top-actions,body.reader-open #shelf-footer,body.reader-open #index-panel,body.reader-open #hover-label{visibility:hidden}
#reader::backdrop{background:rgba(16,23,13,.86);transition:background 180ms ease}
#reader.reader-closing::backdrop{background:transparent}
#reader-scene{position:absolute;inset:0;pointer-events:none;z-index:0}
.reader-layout,.reader-nav,.reader-close{position:relative;z-index:1}
.reader-close{position:absolute}.reader-nav{position:absolute}
#reader.reader-closing .reader-layout,#reader.reader-closing .reader-nav,#reader.reader-closing .reader-close{visibility:hidden;pointer-events:none}
#book-detail{display:flex;flex-direction:column;overflow:hidden;min-height:0;padding-bottom:0}
#book-heading{flex:none;max-height:48%;overflow:auto;overscroll-behavior:contain}
#detail-scroll{min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ffffff40 transparent;padding:0 5px 12px 0}
#cover-stage{touch-action:none}#reader{overscroll-behavior:none}
@media(max-width:700px){
 .reader-layout{height:calc(100% - 135px);height:calc(100dvh - 135px);margin-top:54px;gap:18px}
 #cover-stage{height:34%;min-height:125px;max-height:300px}
 #book-detail{flex:1;max-height:none;padding:0}
 #book-heading{max-height:46%}
 #book-position{margin-bottom:8px}h2{font-size:1.8rem;line-height:1.08;margin-bottom:8px}
 #book-author{margin-bottom:14px}#book-synopsis{line-height:1.55}
 #detail-scroll .rule{margin-bottom:14px}
 .reader-nav{bottom:max(10px,env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){#reader::backdrop{transition:none}}

#book-heading{max-height:none;overflow:visible}
#reader.long-title h2{font-size:clamp(1.5rem,3vw,2.8rem)}
body.webgl-failed #reader-scene{visibility:hidden}
@media(max-width:700px){#reader.long-title h2{font-size:1.45rem}}

/* One quiet light source for the room, physical shelf, and interface relief. */
:root{--surface:#f2eee5;--border:#bdb9ab;--shadow-x:0px;--shadow-y:4px;--shadow-far-x:0px;--shadow-far-y:10px;--shadow-opacity:.2;--relief-shadow:var(--shadow-x) var(--shadow-y) 13px rgb(17 24 30 / var(--shadow-opacity)),var(--shadow-far-x) var(--shadow-far-y) 32px rgb(17 24 30 / .06),inset 0 1px 0 rgb(255 255 255 / .22)}
#app{isolation:isolate;background:var(--paper)}
#masthead h1{text-shadow:calc(var(--shadow-x) * .25) calc(var(--shadow-y) * .3) 4px rgb(17 24 30 / .13)}
.shelf-tabs{border-color:var(--border)}
.shelf-tabs button{padding-left:10px;padding-right:10px;margin-left:-10px;margin-right:-10px}
.shelf-tabs button[aria-selected="true"]{background:color-mix(in srgb,var(--surface) 66%,transparent);box-shadow:var(--relief-shadow);border-radius:3px 3px 0 0}
#top-actions{display:flex;flex-direction:column;align-items:flex-end;gap:17px;top:39px;right:48px}
#top-actions>.quiet{border-color:var(--border);text-shadow:calc(var(--shadow-x) * .12) 1px 3px rgb(17 24 30 / .1)}
.daylight-control{width:176px;padding:9px 12px 4px;border:1px solid color-mix(in srgb,var(--border) 65%,transparent);border-radius:12px;background:color-mix(in srgb,var(--surface) 88%,transparent);box-shadow:var(--relief-shadow)}
.daylight-readout{display:flex;justify-content:space-between;align-items:center;gap:8px;height:24px;font-size:.75rem;font-variant-numeric:tabular-nums}
#daylight-local{font-size:.75rem;color:var(--muted);padding:5px 0 5px 6px;min-height:32px;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px}
#daylight-local[aria-pressed="false"]{color:var(--ink);text-decoration-color:var(--border)}
#daylight-local:hover{text-decoration-color:currentColor}
.daylight-symbols{display:flex;justify-content:space-between;padding:8px 0 0;pointer-events:none;color:var(--muted)}
.daylight-symbols svg{display:block;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
#daylight-slider{display:block;appearance:none;-webkit-appearance:none;width:100%;height:30px;margin:0;background:transparent;cursor:ew-resize;touch-action:pan-y;direction:ltr}
#daylight-slider::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(90deg,#c6ad76,#a5afb8 50%,#c6ad76);box-shadow:inset 0 1px 2px #18202725}
#daylight-slider::-moz-range-track{height:3px;border-radius:3px;background:linear-gradient(90deg,#c6ad76,#a5afb8 50%,#c6ad76)}
#daylight-slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:14px;height:14px;margin-top:-5.5px;border-radius:50%;background:var(--surface);border:1px solid var(--muted);box-shadow:calc(var(--shadow-x) * .25) 2px 4px #10182030}
#daylight-slider::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--surface);border:1px solid var(--muted);box-shadow:calc(var(--shadow-x) * .25) 2px 4px #10182030}
.keyboard-focus #daylight-slider:focus-visible{outline:1px solid var(--ink);outline-offset:2px;border-radius:4px}
.zoom-controls{background:var(--surface);border-color:var(--border);box-shadow:var(--relief-shadow)}
#index-panel{background:color-mix(in srgb,var(--surface) 96%,transparent);border-color:var(--border);box-shadow:var(--relief-shadow)}
.index-head{background:var(--surface);border-color:var(--border)}
li button{border-color:color-mix(in srgb,var(--border) 60%,transparent)}
#index-panel .round{box-shadow:calc(var(--shadow-x) * .4) calc(var(--shadow-y) * .4) 7px #10182020,inset 0 1px 0 #ffffff25}
#hover-label{box-shadow:var(--relief-shadow)}
#shelf-footer p{text-shadow:calc(var(--shadow-x) * .08) 1px 3px #10182012}
#reader::backdrop{background:color-mix(in srgb,var(--paper) 12%,rgba(16,23,25,.92))}
#book-heading{text-shadow:calc(var(--shadow-x) * .3) calc(var(--shadow-y) * .3) 7px #0005}
.reader-close,.reader-nav button{filter:drop-shadow(calc(var(--shadow-x) * .2) 2px 3px #0004)}
#fallback-cover{box-shadow:var(--shadow-far-x) var(--shadow-far-y) 40px #0007}
@media(max-width:700px){#top-actions{top:25px;right:24px;gap:9px}.daylight-control{width:150px;padding:7px 10px 2px;border-radius:10px}#top-actions>.quiet{font-size:.75rem;padding:6px 0;min-height:32px}.daylight-symbols{padding-top:5px}.daylight-symbols svg{width:14px;height:14px}}
@media(max-width:360px){#masthead{left:18px}#top-actions{right:18px}.daylight-control{width:136px}#masthead h1{font-size:1.9rem}#shelf-footer{left:18px;right:18px}}
@media(max-height:500px) and (min-width:701px){#top-actions{top:22px}.daylight-control{padding-top:4px;padding-bottom:0}#masthead{top:24px}}
@media(prefers-reduced-motion:reduce){#reader::backdrop{transition:none}}

/* Title search uses the existing reader and either shelf's prepared catalog. */
.book-search{position:absolute;left:52px;top:218px;width:240px;z-index:6}
#search-toggle{position:absolute;left:3px;top:2px;width:36px;height:38px;display:flex;align-items:center;justify-content:center;pointer-events:none}
#search-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
#search-field{display:block}
#search-input{font:inherit;font-size:.875rem;width:100%;height:42px;border:1px solid var(--border);border-radius:8px;color:var(--ink);background:var(--surface);padding:0 12px 0 38px;box-shadow:var(--relief-shadow)}
#search-input::placeholder{color:var(--muted);opacity:1}
#search-input::-webkit-search-cancel-button{cursor:pointer}
.keyboard-focus #search-input:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
#search-dropdown{position:absolute;left:0;top:49px;width:320px;max-width:calc(100vw - 40px);background:var(--surface);border:1px solid var(--border);border-radius:9px;box-shadow:var(--relief-shadow);overflow:hidden}
#search-results{padding:5px;margin:0;list-style:none}
#search-results li{padding:12px 11px;cursor:pointer;border-radius:5px;line-height:1.4}
#search-results li[aria-selected="true"],#search-results li:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
#search-results li strong{font-size:.875rem;font-weight:400;display:block}
#search-results li small{font-size:.75rem;color:var(--muted);display:block;margin-top:4px}
#search-message{font-size:.875rem;line-height:1.5;padding:5px 15px 13px;margin:0;color:var(--muted)}
body.reader-open #book-search{visibility:hidden}
@media(max-width:700px){
 .book-search{left:125px;top:30px;width:36px;height:38px}
 #search-toggle{position:relative;left:0;top:0;width:36px;height:38px;pointer-events:auto;border-radius:7px}
 #search-toggle:hover{background:var(--surface)}
 #search-field{display:none}
 .book-search.expanded{left:24px;right:24px;top:24px;width:auto;height:44px}
 .book-search.expanded #search-field{display:block}
 .book-search.expanded #search-toggle{position:absolute;top:3px;left:2px}
 .book-search.expanded #search-input{height:44px;font-size:1rem;padding-left:40px}
 #search-dropdown{top:51px;width:100%;max-width:none}
}
@media(max-width:360px){.book-search{left:112px}.book-search.expanded{left:18px;right:18px}}
@media(max-height:500px) and (min-width:701px){.book-search{top:194px}}

/* Keep the bottom of the tower clear, as in the mobile offset layout. */
@media(min-width:701px){
 #position-label{position:absolute;right:0;bottom:60px}
}
@media(min-width:701px) and (max-width:900px){
 #shelf-footer{right:24px}
 .zoom-controls #reset-view{min-width:64px}
}
