/* library.css: 3D books on wooden shelves, the library room (the fallback Learn page), the open bookcase overlay,
   and the Candlelit and Botanical decoration packs. Any palette. Load last. See library.md */
:root {
  --lib-arch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%23000'%3E%3Cpath stroke-width='2.4' d='M148 262V100A108 108 0 0 1 202 6.5A108 108 0 0 1 256 100V262'/%3E%3Cpath stroke-width='1.3' d='M156 262V102A92 92 0 0 1 202 22.3A92 92 0 0 1 248 102V262M156 168A46 46 0 0 1 179 128A46 46 0 0 1 202 168A46 46 0 0 1 225 128A46 46 0 0 1 248 168M202 168V232'/%3E%3Ccircle cx='202' cy='80' r='19' stroke-width='1.6'/%3E%3Ccircle cx='202' cy='80' r='9'/%3E%3Cpath stroke-width='3' stroke-dasharray='7 3' d='M92 0v47'/%3E%3Ccircle cx='92' cy='51' r='3' stroke-width='1.3'/%3E%3Cpath stroke-width='1.6' d='M82 70l3 32h14l3-32M89 70v32M95 70v32'/%3E%3C/g%3E%3Cpath d='M80 68L92 55L104 68ZM78 67h28v4H78ZM82 101h20v4H82ZM86 105h12l-6 10Z'/%3E%3Ccircle cx='92' cy='118' r='1.7'/%3E%3Cpath d='M134 232h126v6H134Z'/%3E%3Cpath d='M138 242h122' stroke='%23000'/%3E%3Cpath d='M164 231V168q0-2 2-2h8q2 0 2 2v14q-1.5 4-3 0V231ZM188 231V198q0-2 2-2h8q2 0 2 2V231ZM212 231V182q0-2 2-2h8q2 0 2 2v20q-1.5 4-3 0V231Z'/%3E%3Cpath d='M170 166v-6M194 196v-6M218 180v-6' stroke='%23000' stroke-width='1.2'/%3E%3Cpath d='M159 229h22v2a11 3 0 0 1-22 0ZM183 229h22v2a11 3 0 0 1-22 0ZM207 229h22v2a11 3 0 0 1-22 0Z'/%3E%3C/svg%3E");
  --lib-flames: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 260'%3E%3Cdefs%3E%3CradialGradient id='h'%3E%3Cstop offset='0' stop-opacity='.45'/%3E%3Cstop offset='1' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cpath id='f' d='M0 0C3.2 6 6 10 5.2 13.5S1.8 18 0 18-4.4 17-5.2 13.5-3.2 6 0 0Z'/%3E%3C/defs%3E%3Cg fill='url(%23h)'%3E%3Ccircle cx='170' cy='153' r='24'/%3E%3Ccircle cx='194' cy='182' r='22'/%3E%3Ccircle cx='218' cy='166' r='23'/%3E%3Ccircle cx='92' cy='87' r='19'/%3E%3C/g%3E%3Cuse href='%23f' x='170' y='142'/%3E%3Cuse href='%23f' transform='translate(194 173) scale(.9)'/%3E%3Cuse href='%23f' transform='translate(218 157) scale(.95)'/%3E%3Cuse href='%23f' transform='translate(92 79) scale(.8)'/%3E%3C/svg%3E");
  --lib-candle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 24'%3E%3Cpath d='M8 .5C10.6 3.5 10.8 6 8 8.6 5.2 6 5.4 3.5 8 .5ZM7.5 8.6h1v1.6h-1ZM5 10.2h6v9.8H5ZM11 10.2v3.6q-.8 1.6-1.6 0v-3.6ZM2 20h12q0 2.6-6 2.8Q2 22.6 2 20Z'/%3E%3C/svg%3E");
  --lib-ivy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 260'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' d='M262 5C196-4 122 30 34 12M250 4L249 1M221 4L220 7M187 8L186 4M152 12L151 16M114 16L114 13M75 17L74 14M44 14L42 16M212 9C226 44 196 74 206 116M215 40L212 41M207 72L210 75M205 112L205 115'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' d='M262 118Q206 124 166 232'/%3E%3Cpath d='M249 1C254 1 259-4 257-8L252-8L244-16L242-5L238-2C239 2 245 3 249 1zM220 7C217 4 210 4 209 8L212 11L212 23L221 16L226 17C229 13 225 8 220 7zM186 4C191 5 196 0 194-4L189-4L181-12L180-1L175 2C176 6 182 7 186 4zM151 16C147 13 141 15 140 19L145 22L147 33L154 24L159 24C161 19 156 15 151 16zM114 13C119 14 124 10 123 6L117 5L111-4L108 7L103 9C103 13 110 15 114 13zM74 14C78 13 82 8 80 4L75 5L66-1L66 10L62 13C64 18 70 18 74 14zM42 16C41 11 35 7 32 10L33 15L27 25L38 23L42 27C46 25 45 19 42 16zM212 41C212 36 208 32 204 34L204 39L197 47L208 47L211 51C215 50 215 44 212 41zM210 75C206 77 204 82 207 85L211 82L221 85L217 76L220 72C217 68 211 70 210 75zM205 115C201 114 196 117 196 121L201 122L205 131L210 122L214 121C215 116 209 114 205 115zM250 121q-3-8-12-10q3 8 12 10zM251 120q-6 6-4 15q6-6 4-15zM237 126q-6-8-16-9q6 8 16 9zM238 126q-5 9-1 18q5-9 1-18zM224 135q-7-6-16-5q7 6 16 5zM225 134q-3 9 2 16q3-9-2-16zM212 147q-7-5-15-2q7 5 15 2zM213 146q-1 8 4 14q1-8-4-14zM200 162q-6-3-13-1q6 3 13 1zM201 161q0 7 5 12q0-7-5-12zM189 181q-5-2-11 1q5 2 11-1zM190 179q0 6 5 9q0-6-5-9zM178 202q-4-1-8 1q4 1 8-1zM179 200q1 4 4 6q-1-4-4-6zM168 226q-2-1-4 1q2 1 4-1zM169 224q0 2 2 3q0-2-2-3z'/%3E%3C/svg%3E");
  --lib-sprig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 22C8 15 12 9 19 3' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M8.5 15.5C4 15 3 11 4 9c3 1 5 3 4.5 6.5ZM11 11c0-4 2-6.5 5-7 .5 3-1.5 6-5 7ZM12.5 13.5c3.5-.5 6.5 1 7.5 3.5-3 1-6 0-7.5-3.5ZM18 4c1-1.5 3-2.3 5-2-.5 1.8-2.5 2.8-5 2Z'/%3E%3C/svg%3E");
  --lib-shelf-candle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 70'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23ffcf6a' stop-opacity='.5'/%3E%3Cstop offset='1' stop-color='%23ffb040' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='w'%3E%3Cstop offset='0' stop-color='%23c9b68e'/%3E%3Cstop offset='.4' stop-color='%23f4ead0'/%3E%3Cstop offset='1' stop-color='%23b3a077'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='16' cy='13' r='14' fill='url(%23g)'/%3E%3Cpath d='M16 3c3 4.5 4.5 8 3.6 11.6S17.6 19 16 19s-3-1.4-3.6-4.4S13 7.5 16 3Z' fill='%23ffa630'/%3E%3Cpath d='M16 8.5c1.6 2.5 2 4.9 1.4 6.9S16.6 17.6 16 17.6s-1-.6-1.4-2.2S14.4 11 16 8.5Z' fill='%23fff1c2'/%3E%3Cpath d='M16 18.5v3' stroke='%232a1a0a' stroke-width='1.2'/%3E%3Crect x='11' y='20.5' width='10' height='40' rx='1' fill='url(%23w)'/%3E%3Cpath d='M4 60h24q0 3.5-12 4Q4 63.5 4 60ZM13 63h6l2 5H11Z' fill='%23c4953c'/%3E%3Cpath d='M4 60h24q0 1.2-12 1.5Q4 61.2 4 60Z' fill='%23e9c46a'/%3E%3C/svg%3E");
  --lib-shelf-plant: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 70'%3E%3Cpath d='M16 47C10 36 4 30 1 22M17 46C17 34 20 24 27 14M19 47C24 40 30 37 37 35M15 47C12 52 8 58 5 66' fill='none' stroke='%233f6b2c' stroke-width='1.3'/%3E%3Cg fill='%235f9a45'%3E%3Cpath d='M1 22c-1-6 3-10 7-9 0 5-3 8-7 9Z'/%3E%3Cpath d='M27 14c0-6 5-9 9-7-1 5-5 8-9 7Z'/%3E%3Cpath d='M37 35c3-5 8-5 10-2-3 3-6 4-10 2Z'/%3E%3Cpath d='M8 32c-4-3-5-8-2-11 3 2 4 7 2 11Z'/%3E%3Cpath d='M21 27c-2-5 0-9 4-10 1 4-1 8-4 10Z'/%3E%3Cpath d='M5 66c-4-2-5-6-3-9 3 1 4 5 3 9Z'/%3E%3C/g%3E%3Cg fill='%2381b85a'%3E%3Cpath d='M12 38c-5 0-8-4-7-8 4 0 7 4 7 8Z'/%3E%3Cpath d='M23 36c2-5 7-6 10-4-2 4-6 5-10 4Z'/%3E%3Cpath d='M10 56c-4-1-6-5-4-8 3 1 5 4 4 8Z'/%3E%3C/g%3E%3Cpath d='M5 45h30v6H5Z' fill='%23c2693d'/%3E%3Cpath d='M7 51h26l-3 19H10Z' fill='%23a8552f'/%3E%3Cpath d='M7 51h26v2H7Z' fill='%23000' opacity='.18'/%3E%3C/svg%3E");
  --lib-arcade: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10'%3E%3Cpath d='M0 .6C4.5 .6 6.5 2.2 8 7.2 9.5 2.2 11.5 .6 16 .6' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3Ccircle cx='8' cy='8.6' r='.9'/%3E%3C/svg%3E");
  --lib-vine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='14'%3E%3Cpath d='M0 7C8 3 16 3 24 7S40 11 48 7' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3Cpath d='M7 4.7q-1.3-2.7-4.3-2.5q1.3 2.7 4.3 2.5zM17 4q3-.3 3.8-3.2q-3 .3-3.8 3.2zM31 9.3q-3-.2-4.3 2.5q3 .2 4.3-2.5zM41 10q.8 2.9 3.8 3.2q-.8-2.9-3.8-3.2z'/%3E%3C/svg%3E");
  --lib-crest: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3E%3Cpath d='M0 8H4.5L7 3L9.5 8H14Z'/%3E%3Ccircle cx='7' cy='1.8' r='1.4'/%3E%3C/svg%3E");
}

/* ---------- tokens: case, wood, brass plate, spines (dark palettes by default) ---------- */
:root {
  --bk-H: 236px; --bk-top: 20px; --plank: 14px; --cap-t: 17px; --cap-b: 11px; --lab: 32px; --bk-min: 44px; --bk-fs: 13px;
  --wood: #4b3020; --wood-dk: #24160d; --wood-lt: #77502f; --case-back: color-mix(in srgb, var(--bg) 70%, #000);
  --plate-1: #ecd59b; --plate-2: #bf9c55; --plate-ink: #2a1c08; --spine-ink: #f2dfae; --spine-gilt: #d6b25f; --slip: #efe4c8;
  --ribbon: var(--accent-2, var(--accent)); --glow: var(--accent); --obj: none; --cover-ink: #efd896;
  --screw: #3b2a10 1.2px, #fff5d599 1.6px 2.2px, transparent 2.6px;
  --spine-tex: repeating-linear-gradient(#ffffff08 0 1px, transparent 0 3px), repeating-linear-gradient(90deg, #0000000f 0 1px, transparent 0 3px);
  --sp0: #4a2a3a; --sp1: #23402f; --sp2: #26324f; --sp3: #5a3b1f; --sp4: #44284a; --sp5: #1f4243; --sp6: #5e2a22; --sp7: #34302c;
}
/* each theme hue at a fixed dark lightness, so the pale-gold titles always clear 4.5:1 */
@supports (color: oklch(from red l c h)) {
  :root {
    --sp0: oklch(from var(--accent) .37 min(c, .1) h); --sp1: oklch(from var(--accent-2, var(--accent)) .33 min(c, .1) h);
    --sp2: oklch(from var(--learn, var(--accent)) .39 min(c, .1) h); --sp3: oklch(from var(--r-ev, var(--accent)) .35 min(c, .09) h);
    --sp4: oklch(from var(--play, var(--accent)) .38 min(c, .1) h); --sp5: oklch(from var(--r-concl, var(--accent)) .36 min(c, .09) h);
    --sp6: oklch(from var(--coach, var(--accent)) .34 min(c, .1) h); --sp7: oklch(from var(--pace, var(--accent)) .4 min(c, .09) h);
  }
}
:root:is(:not([data-theme]), [data-theme="classic"], [data-theme="goth-light"], [data-theme="lavender"], [data-theme="mint"], [data-theme="bone"], [data-theme="sky"], [data-theme="peach"]) {
  --wood: #b78a5a; --wood-dk: #85603d; --wood-lt: #dcb98c; --case-back: color-mix(in srgb, #c7ab82 50%, var(--surface));
}
@media (prefers-color-scheme: dark) {
  :root:is(:not([data-theme]), [data-theme="classic"]) { --wood: #4b3020; --wood-dk: #24160d; --wood-lt: #77502f; --case-back: color-mix(in srgb, var(--bg) 70%, #000); }
}
/* Gothic Library: mahogany, leather, gold leaf, crimson silk */
:root[data-theme="library"] {
  --wood: #5a2618; --wood-dk: #2e1009; --wood-lt: #84402a; --case-back: #120a08; --spine-ink: #f0d9a0; --spine-gilt: #d8b15a; --ribbon: #c0303f;
  --spine-tex: radial-gradient(#ffffff0d .6px, transparent 1.2px) 0 0 / 4px 4px, radial-gradient(#00000024 .6px, transparent 1.2px) 2px 2px / 4px 4px;
  --sp0: #5c1a20; --sp1: #1f3a2b; --sp2: #1d2b45; --sp3: #5b3a1d; --sp4: #3d1f40; --sp5: #173b3c; --sp6: #6a2a17; --sp7: #2c2622;
}
/* Green Library: walnut on green-painted boards, cloth spines, brass, a red ribbon */
:root[data-theme="conservatory"] {
  --wood: #6b4a2c; --wood-dk: #3c2815; --wood-lt: #946d45; --case-back: #0c1d13; --spine-ink: #eedfb0; --spine-gilt: #cfa95e; --ribbon: #b8403a;
  --sp0: #234a32; --sp1: #424f1f; --sp2: #7a361d; --sp3: #1f4a4c; --sp4: #5a3a22; --sp5: #4a2a3c; --sp6: #5e4714; --sp7: #2b3a4a;
}

/* ---------- the bookcase ---------- */
.bookshelf {
  position: relative; margin: 30px 6px; border: 10px solid transparent; border-radius: 5px;
  background: linear-gradient(#00000080, transparent 26px) padding-box,
    repeating-linear-gradient(90deg, transparent 0 71px, #00000040 0 72px, #ffffff09 0 73px) padding-box,
    linear-gradient(var(--case-back), var(--case-back)) padding-box,
    repeating-linear-gradient(88deg, var(--wood) 0 5px, var(--wood-lt) 0 6px, var(--wood) 0 13px, var(--wood-dk) 0 14px) border-box;
  box-shadow: inset 0 0 0 1px #00000073, inset 0 0 18px #00000059, 0 16px 30px -14px #000000b3;
}
.bookshelf::before, .bookshelf::after {
  content: ""; position: absolute; left: -15px; right: -15px; top: -20px; height: 12px; border-radius: 3px; pointer-events: none;
  background: linear-gradient(var(--wood-lt), var(--wood) 45%, var(--wood-dk)); box-shadow: 0 3px 6px -2px #0009;
}
.bookshelf::after { top: auto; bottom: -18px; left: -13px; right: -13px; height: 9px; }
.shelf { position: relative; isolation: isolate; padding-top: 10px; }
.shelf + .shelf { background: linear-gradient(#00000052, transparent 12px) top / 100% 12px no-repeat; }
.shelf-label {
  width: fit-content; max-width: calc(100% - 24px); margin: 0 12px 4px; padding: 3px 17px; border-radius: 2px;
  font: small-caps 700 12.5px/1.3 var(--display); letter-spacing: .05em; color: var(--plate-ink); text-shadow: 0 1px 0 #ffffff4d;
  background: radial-gradient(circle at 7px 50%, var(--screw)), radial-gradient(circle at calc(100% - 7px) 50%, var(--screw)), linear-gradient(var(--plate-1), var(--plate-2));
  box-shadow: inset 0 1px 0 #ffffff73, inset 0 -1px 0 #0003, 0 0 0 1px #00000080, 0 2px 4px #00000073;
}
/* every book has the same outer height, so one repeating plank lands under each wrapped row */
.shelf-books {
  --per: calc(var(--bk-top) + var(--bk-H) + var(--plank)); --sh: calc(var(--bk-top) + var(--bk-H));
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--plank) 3px; padding: 0 12px var(--plank);
  background: repeating-linear-gradient(#00000059, transparent 12px var(--per)) 0 var(--per) / 100% 100% no-repeat,
    repeating-linear-gradient(transparent 0 var(--sh), var(--wood-lt) 0 calc(var(--sh) + 2px), var(--wood) 0 calc(var(--sh) + 6px),
      var(--wood-dk) 0 calc(var(--sh) + 7px), var(--wood) 0 calc(var(--per) - 3px), var(--wood-dk) 0 calc(var(--per) - 1px), #0009 0 var(--per)) 0 0 / 100% var(--per);
}
/* shelf end: a bookend, or a candle or a plant in the library packs (not on phones, where it would take a row) */
.shelf-books::after { content: ""; flex: none; width: 15px; height: 66px; margin: calc(var(--sh) - 66px) 0 0 2px; background: var(--obj); }
:root:not([data-deco="candlelit"], [data-deco="botanical"]) .shelf-books::after {
  background: linear-gradient(90deg, color-mix(in srgb, var(--wood-dk) 60%, #555), color-mix(in srgb, var(--spine-gilt) 55%, #ddd) 70%, color-mix(in srgb, var(--wood-dk) 50%, #444));
  clip-path: polygon(0 86%, 62% 86%, 62% 0, 100% 2%, 100% 100%, 0 100%);
}
:root:is([data-deco="candlelit"], [data-deco="botanical"]) .shelf-books::after { width: 32px; height: 70px; margin: calc(var(--sh) - 70px) 2px 0 auto; }
:root[data-deco="botanical"] .shelf-books::after { width: 46px; }
:root[data-deco="off"] .shelf-books::after { display: none; }

/* ---------- books: each one a small 3D object. The spine faces you, the page block shows on top (you look from a little
   above), and the front cover is a hidden side face that turns toward you when the book is pulled ---------- */
.book {
  --bh: calc(var(--h, 1) * var(--bk-H)); --bd: calc(var(--bh) * .66); --band: #0000006b; --hi: #ffffff2e; --page: #efe4c6; --page-ln: #cbbb93;
  --b-top: linear-gradient(transparent 4px, var(--hi) 0 5px, var(--band) 0 7px, #00000080 0 8px, transparent 0 10px, var(--hi) 0 11px, var(--band) 0 13px, #00000080 0 14px, transparent 0);
  position: relative; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; flex: none;
  height: var(--bh); margin-top: calc(var(--sh) - var(--bh)); min-width: var(--bk-min); max-width: 66px;
  padding: var(--cap-t) 5px var(--cap-b); border-radius: 3px 3px 2px 2px; color: var(--spine-ink); text-decoration: none;
  background: linear-gradient(90deg, #0006, #0000000d 13%, #ffffff14 21%, #ffffff05 33%, transparent 50%, #0000001a 78%, #00000073),
    var(--b-top) top / 100% 16px no-repeat,
    linear-gradient(transparent 1px, var(--hi) 0 2px, var(--band) 0 4px, #00000080 0 5px, transparent 0 6px, var(--hi) 0 7px, var(--band) 0 9px, #00000080 0 10px, transparent 0) bottom / 100% 11px no-repeat,
    var(--spine-tex), var(--spine, var(--sp0));
  box-shadow: inset 0 1px 0 #ffffff29, inset 0 -1px 0 #00000073, 0 2px 4px -1px #0009;
  transform-style: preserve-3d; transform-origin: 50% -45%;
  transform: perspective(900px) translate3d(var(--tx, 0px), var(--ty, 0px), var(--tz, 0px)) rotateY(var(--ry, 0deg));
}
:is(.book, .mini-book):is([style*="tone: 1"], [style*="tone:1"]) { --spine: var(--sp1); }
:is(.book, .mini-book):is([style*="tone: 2"], [style*="tone:2"]) { --spine: var(--sp2); }
:is(.book, .mini-book):is([style*="tone: 3"], [style*="tone:3"]) { --spine: var(--sp3); }
:is(.book, .mini-book):is([style*="tone: 4"], [style*="tone:4"]) { --spine: var(--sp4); }
:is(.book, .mini-book):is([style*="tone: 5"], [style*="tone:5"]) { --spine: var(--sp5); }
:is(.book, .mini-book):is([style*="tone: 6"], [style*="tone:6"]) { --spine: var(--sp6); }
:is(.book, .mini-book):is([style*="tone: 7"], [style*="tone:7"]) { --spine: var(--sp7); }
.book-title {
  flex: none; writing-mode: vertical-rl; height: calc(var(--bh) - var(--cap-t) - var(--cap-b) - var(--lab)); overflow: hidden;
  font: 700 var(--bk-fs)/1.14 var(--display); letter-spacing: .03em; text-align: center; text-wrap: balance; text-shadow: 0 1px 0 #000c, 0 -1px 0 #0000004d;
}
/* the meta line is a call-number sticker: horizontal, dark on cream */
.book-meta {
  width: 0; min-width: calc(100% + 4px); max-height: calc(var(--lab) - 5px); margin: auto -2px 0; padding: 3px 1px 2px; overflow: hidden;
  overflow-wrap: anywhere; border-radius: 2px; font: 700 9.5px/1.15 var(--ui); text-align: center; color: #2b2114;
  background: linear-gradient(#f4ecd6, #e2d4b1); box-shadow: 0 0 0 1px #0000004d, inset 0 1px 0 #fff9;
}
.book-meta:empty { display: none; }
.book:has(> .book-meta:empty), .book:not(:has(> .book-meta)) { --lab: 0px; }
/* the top of the page block: a horizontal plane hinged on the spine's top edge, receding into the shelf */
.book::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: var(--bd); pointer-events: none; transform-origin: 50% 0; transform: rotateX(-90deg);
  background: linear-gradient(var(--spine, var(--sp0)) 0 3px, transparent 0), linear-gradient(90deg, var(--spine, var(--sp0)) 0 2px, transparent 0 calc(100% - 2px), var(--spine, var(--sp0)) 0),
    linear-gradient(transparent 20%, #00000073), repeating-linear-gradient(90deg, var(--page) 0 1px, var(--page-ln) 0 1.6px);
}
/* the front cover: hinged on the spine's right edge and turned away, so it only shows when the book turns */
.book::after {
  content: attr(title); content: attr(title) / "";
  position: absolute; top: 0; left: 100%; box-sizing: border-box; width: var(--bd); height: 100%; padding: 28% 20px 0; pointer-events: none;
  transform-origin: 0 50%; transform: rotateY(90deg); backface-visibility: hidden; border-radius: 0 3px 3px 0;
  font: 700 15px/1.3 var(--display); letter-spacing: .03em; text-align: center; overflow-wrap: anywhere; color: var(--cover-ink); text-shadow: 0 1px 0 #000c;
  background: linear-gradient(90deg, #00000094, #0000001a 7px, #ffffff12 12px, transparent 30%, #00000038), var(--spine-tex), var(--spine, var(--sp0));
  outline: 3px double var(--spine-gilt); outline-offset: -12px; box-shadow: inset 0 0 0 1px #00000080, 0 26px 30px -14px #000d;
}
.book[data-title]::after { content: attr(data-title); content: attr(data-title) / ""; }
.book[style*="--spine-ink"]::after { color: var(--spine-ink); }
/* new: blind-tooled bands. read: gilt bands. tested: plus a paper slip. passed: a broad gilt band, gilt page edges, a silk ribbon */
.book:is(.status-read, .status-tested, .status-passed) { --band: var(--spine-gilt); --hi: #ffffff59; }
.book.status-passed {
  --page: #e8c565; --page-ln: #b38a34;
  --b-top: linear-gradient(transparent 3px, var(--hi) 0 4px, var(--band) 0 6px, color-mix(in srgb, var(--band) 55%, #fff) 0 7px, var(--band) 0 9px, #00000080 0 10px,
    transparent 0 11px, var(--band) 0 12px, transparent 0 13px, var(--band) 0 14px, transparent 0);
}
.book.next .book-title::before, .book:is(.status-passed, .status-tested) .book-title::after { content: ""; position: absolute; pointer-events: none; }
.book.status-passed .book-title::after {
  top: -12px; right: 21%; width: 7px; height: 12px; clip-path: polygon(0 0, 50% 30%, 100% 0, 100% 100%, 0 100%);
  background: linear-gradient(90deg, color-mix(in srgb, var(--ribbon) 65%, #000), var(--ribbon) 45%, color-mix(in srgb, var(--ribbon) 75%, #000));
}
.book.status-tested .book-title::after {
  top: -9px; left: 24%; width: 12px; height: 11px; border-radius: 1px; transform: rotate(-7deg); box-shadow: 0 0 0 .5px #0006;
  background: repeating-linear-gradient(transparent 0 3px, #46321a4d 0 3.6px) 0 2px no-repeat, var(--slip);
}
/* the suggested class stands proud and glows; the halo has a hole cut where the spine is, so it never washes the title */
.book.next { top: -3px; box-shadow: inset 0 1px 0 #ffffff29, 0 0 0 1.5px color-mix(in srgb, var(--glow) 70%, transparent), 0 0 18px 1px color-mix(in srgb, var(--glow) 45%, transparent); }
.book.next .book-title::before {
  inset: -22px -16px -4px; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--glow) 32%, transparent), transparent);
  mask: linear-gradient(#000 0 0) 16px 22px / calc(100% - 32px) calc(100% - 26px) no-repeat exclude, linear-gradient(#000 0 0);
}
/* hover lifts and turns a little so the cover peeks; pulled slides forward out of the row and turns to show the cover */
.book:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; --ty: -5px; --ry: -12deg; }
@media (hover: hover) { .book:hover { --ty: -6px; --ry: -14deg; } }
.book.pulled, .book.pulled:hover, .book.pulled:focus-visible { --tx: calc(var(--bd) * -.5); --ty: -10px; --tz: 70px; --ry: -74deg; z-index: 3; box-shadow: none; }
/* the turned cover is wider than a spine, so books at the ends of a shelf swing it inward */
.book.pulled:nth-child(-n+2) { --tx: calc(var(--bd) * -.22); }
.book.pulled:nth-last-child(-n+2) { --tx: calc(var(--bd) * -.8); }
@media (prefers-reduced-motion: no-preference) { .book { transition: transform .3s ease; } .book.pulled { transition: transform .65s cubic-bezier(.2, .8, .25, 1); } }
@media (max-width: 720px) {
  :root { --bk-H: 212px; --bk-top: 18px; --plank: 12px; --cap-t: 15px; --cap-b: 10px; --lab: 30px; --bk-min: 38px; --bk-fs: 12px; }
  .bookshelf { border-width: 7px; margin-inline: 4px; }
  .bookshelf::before, .bookshelf::after { left: -10px; right: -10px; }
  .shelf-books { column-gap: 2px; padding-inline: 8px; }
  .shelf-books::after { display: none; }
  .shelf-label { margin-inline: 8px; font-size: 12px; }
  .book { --bd: calc(var(--bh) * .6); padding-inline: 4px; max-width: 56px; }
  .book::after { padding-inline: 15px; font-size: 13px; outline-offset: -10px; }
}

/* ---------- the library room: a grid of small standing bookcases ---------- */
.library-room { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, calc(50% - 8px)), 1fr)); gap: 50px 22px; padding: 48px 4px 18px; }
.bookcase-mini {
  --mh: 34px; --mt: 6px; --mp: 5px; --msh: calc(var(--mt) + var(--mh)); --mper: calc(var(--msh) + var(--mp)); --lit: 0;
  position: relative; display: flex; flex-direction: column; align-items: center; min-height: 250px; aspect-ratio: 5 / 7; margin: 0;
  padding: 24px 16px 4px; border: 0; appearance: none; cursor: pointer; font: inherit; color: var(--plate-ink); text-align: center; transform-origin: 50% 100%;
  background: repeating-linear-gradient(90deg, #ffffff2e 0 3px, #00000059 0 5px) 0 9px / 100% 3px no-repeat,
    linear-gradient(var(--wood-lt) 0 2px, var(--wood-dk) 0 3px, var(--wood) 0 6px, var(--wood-dk) 9px, var(--wood) 0 12px, var(--wood-lt) 0 13px, var(--wood) 0 15px, var(--wood-dk) 0) 0 0 / 100% 16px no-repeat,
    linear-gradient(var(--wood-lt) 0 1px, var(--wood) 0 4px, var(--wood-dk) 0 5px, var(--wood) 0 calc(100% - 3px), var(--wood-dk) 0) 3px 100% / calc(100% - 6px) 26px no-repeat,
    repeating-linear-gradient(90deg, #ffffff12 0 1px, #0000 0 3px, #0000002e 0 4px) 7px 16px / calc(100% - 14px) calc(100% - 42px) no-repeat,
    repeating-linear-gradient(88deg, var(--wood) 0 5px, var(--wood-lt) 0 6px, var(--wood) 0 13px, var(--wood-dk) 0 14px) 7px 16px / calc(100% - 14px) calc(100% - 42px) no-repeat;
  filter: drop-shadow(0 12px 10px #0000008c);
}
/* the interior: shelves of old books behind the brass plate, a different stretch per case (--slice) */
.bookcase-mini::before, .case-count::before { content: ""; position: absolute; inset: 16px 16px 32px; pointer-events: none; }
.bookcase-mini::before {
  box-shadow: 0 0 0 1px #000000b3, 0 0 0 2px #ffffff1f;
  background: linear-gradient(#000000a6, transparent 22px), linear-gradient(90deg, #00000080, transparent 14px calc(100% - 14px), #00000080),
    linear-gradient(#0000004d, #0000004d),
    repeating-linear-gradient(transparent 0 33px, var(--wood-lt) 0 34px, var(--wood) 0 38px, var(--wood-dk) 0 39px),
    repeating-linear-gradient(var(--case-back) 0 5px, transparent 0 39px),
    repeating-linear-gradient(90deg, var(--sp0) 0 7px, transparent 0 8px, var(--sp3) 0 14px, var(--sp1) 0 21px, transparent 0 22px, var(--sp5) 0 27px, var(--sp2) 0 35px,
      var(--sp6) 0 41px, transparent 0 43px, var(--sp4) 0 49px, var(--sp7) 0 56px, var(--sp3) 0 61px, transparent 0 63px) calc(var(--slice, 0) * -23px) 0,
    var(--case-back);
}
/* warm light inside the case on hover and focus (candlelight in Candlelit) */
.case-count::before { opacity: var(--lit); background: radial-gradient(75% 60% at 50% 25%, color-mix(in srgb, #ffc46e 34%, transparent), transparent 75%); }
.case-plate, .case-name, .mini-books { position: relative; z-index: 1; align-self: stretch; }
.case-plate, .case-name { margin-inline: 4px; box-shadow: 0 2px 3px -1px #000000b3; }
.case-plate {
  padding: 4px 8px 1px; border-radius: 3px 3px 0 0; font: small-caps 700 10.5px/1.2 var(--display); letter-spacing: .12em;
  background: radial-gradient(circle at 6px 8px, var(--screw)), radial-gradient(circle at calc(100% - 6px) 8px, var(--screw)), linear-gradient(var(--plate-1), color-mix(in srgb, var(--plate-1) 50%, var(--plate-2)));
}
.case-name { padding: 0 8px 5px; border-radius: 0 0 3px 3px; font: 700 13px/1.2 var(--display); text-wrap: balance; background: linear-gradient(color-mix(in srgb, var(--plate-1) 50%, var(--plate-2)), var(--plate-2)); }
/* your books: a row of small spines on the bottom shelf, same colors and marks as the big ones */
.mini-books {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--mp) 1px; margin-top: auto; padding: 0 4px var(--mp);
  background: repeating-linear-gradient(transparent 0 var(--msh), var(--wood-lt) 0 calc(var(--msh) + 1px), var(--wood) 0 calc(var(--mper) - 1px), var(--wood-dk) 0 var(--mper)) 0 0 / 100% var(--mper),
    linear-gradient(transparent, color-mix(in srgb, var(--case-back) 88%, transparent) 9px);
}
.mini-book {
  --mb: calc(var(--h, 1) * var(--mh)); --band: #00000059; --bw: 1px;
  position: relative; flex: none; width: 7px; height: var(--mb); margin-top: calc(var(--msh) - var(--mb)); border-radius: 1px 1px 0 0;
  background: linear-gradient(90deg, #00000073, #ffffff26 35%, transparent 60%, #00000059),
    linear-gradient(transparent 3px, var(--band) 0 calc(3px + var(--bw)), transparent 0 calc(5px + var(--bw)), var(--band) 0 calc(6px + var(--bw)), transparent 0), var(--spine, var(--sp0));
}
.mini-book:is(.status-read, .status-tested, .status-passed) { --band: var(--spine-gilt); }
.mini-book.status-passed { --bw: 3px; }
.mini-book.status-tested::after { content: ""; position: absolute; top: -3px; left: 1px; width: 4px; height: 4px; background: var(--slip); transform: rotate(-8deg); }
.mini-book.next { top: -2px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--glow) 80%, transparent), 0 0 7px 1px color-mix(in srgb, var(--glow) 60%, transparent); }
/* the count is a card in a brass holder on the plinth */
.case-count {
  margin: 10px 0 4px; padding: 1px 7px; border-radius: 2px; font: 700 10.5px/16px var(--ui); white-space: nowrap; color: #2b2114;
  background: linear-gradient(#f4ecd6, #e2d4b1); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--spine-gilt) 70%, #000), 0 1px 2px #0009;
}
.bookcase-mini:is(:hover, :focus-visible) { --lit: 1; transform: translateY(-4px); filter: drop-shadow(0 16px 12px #00000099) drop-shadow(0 0 16px #ffc46e66); }
.bookcase-mini:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
@media (prefers-reduced-motion: no-preference) { .bookcase-mini { transition: transform .22s ease; } .case-count::before { transition: opacity .25s ease; } }
@media (max-width: 720px) { .library-room { gap: 48px 12px; } .case-name { font-size: 12px; } }

/* ---------- the open bookcase: a dialog over a dimmed room ---------- */
body.case-is-open { overflow: hidden; }
.case-open-wrap { position: fixed; inset: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 55%, #000000b3); backdrop-filter: blur(4px); }
/* the panel fills the viewport so its inline transform-origin (viewport px) is exact; its empty margins let taps reach the backdrop */
.case-open { position: fixed; inset: 0; overflow: hidden auto; overscroll-behavior: contain; padding: 24px 16px 40px; pointer-events: none; }
.case-open > * { pointer-events: auto; }
.case-open-head {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; max-width: 880px; margin: 0 auto 46px;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow);
}
.case-open-head h2 { margin: 2px 0; }
.case-open > .bookshelf { max-width: 880px; margin: 0 auto 36px; }
button.book { margin: 0; border: 0; font: inherit; cursor: pointer; appearance: none; }
/* the pulled book's first page: aged paper with foxing, a gutter shadow on the bound side, a deckle fore-edge and tail,
   ink-dark serif text and a rubricated drop cap. The paper is fixed cream in every palette, so the ink always reads */
.book-open {
  --deckle: #e2d1ab 1.3px, transparent 1.9px;
  position: relative; max-width: 620px; margin: 0 auto; padding: 30px 26px 26px 40px; border: 3px solid transparent; border-radius: 2px;
  color: #2a1d10; font-family: var(--read);
  background: radial-gradient(circle at 13% 22%, #8b5a2b24 0 2px, #8b5a2b14 5px, transparent 9px) padding-box,
    radial-gradient(circle at 86% 31%, #8b5a2b26 0 2px, #8b5a2b10 4px, transparent 7px) padding-box,
    radial-gradient(circle at 72% 84%, #8b5a2b24 0 3px, #8b5a2b0f 7px, transparent 12px) padding-box,
    radial-gradient(circle at 28% 74%, #8b5a2b21 0 2px, transparent 5px) padding-box,
    radial-gradient(circle at 93% 91%, #8b5a2b24 0 3px, transparent 8px) padding-box,
    linear-gradient(90deg, #5a3a1a4d, #5a3a1a14 14px, transparent 30px) padding-box,
    radial-gradient(130% 95% at 58% 42%, transparent 52%, #9a743c2e) padding-box,
    repeating-linear-gradient(#0000000a 0 1px, transparent 0 3px) padding-box,
    linear-gradient(#f6eed9, #ecdfc1) padding-box,
    radial-gradient(circle, var(--deckle)) right 0 top 0 / 4px 6px repeat-y border-box,
    radial-gradient(circle, var(--deckle)) right 1px top 3px / 3px 11px repeat-y border-box,
    radial-gradient(circle, var(--deckle)) left 0 bottom 0 / 7px 4px repeat-x border-box,
    radial-gradient(circle, var(--deckle)) left 3px bottom 1px / 10px 3px repeat-x border-box;
  box-shadow: 0 16px 34px -12px #000000e6;
}
.book-open::before { content: "\2766"; content: "\2766" / ""; position: absolute; top: 6px; left: 0; right: 0; text-align: center; font-size: 14px; line-height: 1; color: #7c1d1699; }
.book-open::after { content: ""; display: table; clear: both; }
.book-open h3 { margin: 0 0 12px; font: 700 1.3rem/1.25 var(--display); letter-spacing: .01em; color: #2a1d10; }
.book-open h3::first-letter { float: left; margin: 3px 8px 0 0; font-size: 2.9em; line-height: .8; color: #6e1812; text-shadow: 1px 1px 0 #c9a24a66; }
.book-open p { margin: 0 0 10px; line-height: 1.55; }
.book-open .muted { color: #4f3b26; }
@media (max-width: 720px) { .case-open { padding: 14px 12px 32px; } .case-open-head { margin-bottom: 40px; } }

/* ---------- the two library packs: shared pieces ---------- */
:root[data-deco="candlelit"] body::after,
:root:is([data-deco="candlelit"], [data-deco="botanical"]) .topbar::after, :root:is([data-deco="candlelit"], [data-deco="botanical"]) .card:not(.passage)::before, :root:is([data-deco="candlelit"], [data-deco="botanical"]) .shelf::before { content: ""; position: absolute; pointer-events: none; }
:root:is([data-deco="candlelit"], [data-deco="botanical"]) { --obj: var(--lib-shelf-candle) center bottom / contain no-repeat; }
:root:is([data-deco="candlelit"], [data-deco="botanical"]):not([data-deco="off"]) body::before { background: linear-gradient(200deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--accent-2, var(--accent)))); opacity: calc(var(--web-alpha, .14) * 1.5); }
:root:is([data-deco="candlelit"], [data-deco="botanical"]) .topbar::after { left: 0; right: 0; top: 100%; height: 10px; background: var(--gilt-l); opacity: .55; mask: var(--lib-arcade) 0 0 / 16px 10px repeat-x; }
:root:is([data-deco="candlelit"], [data-deco="botanical"]) .card:not(.passage) { position: relative; }
/* gilded edges: bright at the head, fading down the sides */
:root:is([data-deco="candlelit"], [data-deco="botanical"]) .card:not(.passage)::before {
  inset: -1px; padding: 1px; border-radius: inherit; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  background: linear-gradient(var(--gilt-l), color-mix(in srgb, var(--gilt-l) 25%, transparent) 35%, transparent 60%, color-mix(in srgb, var(--gilt-l) 45%, transparent));
}
:root:is([data-deco="candlelit"], [data-deco="botanical"]) .next-card {
  box-shadow: inset 4px 0 0 var(--accent), 0 0 0 1px color-mix(in srgb, var(--gilt-l, transparent) 50%, transparent), 0 0 36px -8px color-mix(in srgb, var(--glow) 55%, transparent), var(--shadow);
  background: radial-gradient(80% 60% at var(--sun, 50% 0%), color-mix(in srgb, var(--glow) 10%, transparent), transparent 70%), linear-gradient(165deg, color-mix(in srgb, var(--accent) 18%, var(--surface)), var(--surface) 70%);
}
:root:is([data-deco="candlelit"], [data-deco="botanical"]) .shelf::before { inset: 0; z-index: -1; background: radial-gradient(45% 70% at 92% 85%, color-mix(in srgb, var(--glow) 13%, transparent), transparent 70%); }

/* ================= Candlelit: arch window, chain lamp, candles; gilt ================= */
:root[data-deco="candlelit"] {
  --corner: var(--lib-arch); --emblem: var(--lib-candle); --emblem-w: 11px; --emblem-h: 17px; --glow: #ffb347; --gilt-l: color-mix(in srgb, #c8a45e 60%, var(--ink));
}
:root[data-theme="library"][data-deco="candlelit"] { --gilt-l: #d4ad57; }
/* flames are their own layer, so they flicker without the candles */
:root[data-deco="candlelit"] body::after {
  --fo: .55; top: 58px; right: 0; width: min(300px, 60vw); aspect-ratio: 1; z-index: -1; opacity: var(--fo);
  background: color-mix(in srgb, #ffb547 85%, var(--ink)); mask: var(--lib-flames) no-repeat top right / contain;
}
/* finials along the top of the bookcase */
:root[data-deco="candlelit"] .bookshelf::before { top: -27px; height: 19px; mask: linear-gradient(#000 0 0) bottom / 100% 12px no-repeat, var(--lib-crest) 0 0 / 14px 8px repeat-x; }

/* ================= Botanical: ivy, a fern, a potted plant; wood and sunlight ================= */
:root[data-deco="botanical"] {
  --corner: var(--lib-ivy); --emblem: var(--lib-sprig); --emblem-w: 16px; --emblem-h: 16px; --glow: #f3efb2; --sun: 0% 0%;
  --obj: var(--lib-shelf-plant) center bottom / contain no-repeat;
}
:root[data-deco="botanical"]:not([data-deco="off"]) body::before { background: linear-gradient(200deg, var(--accent-2, var(--accent)), var(--accent)); }
:root[data-deco="botanical"] .topbar::after { top: calc(100% - 4px); height: 14px; background: var(--accent-2, var(--accent)); mask: var(--lib-vine) 0 0 / 48px 14px repeat-x; }
/* a thin wooden frame just outside each card, so the card's own color edge stays visible */
:root[data-deco="botanical"] .card:not(.passage)::before {
  inset: -5px; padding: 4px; border-radius: calc(var(--radius, 14px) + 4px);
  background: linear-gradient(#ffffff2e, transparent 3px calc(100% - 3px), #0000004d),
    repeating-linear-gradient(97deg, transparent 0 7px, #0003 0 8px, transparent 0 13px, #ffffff17 0 14px),
    linear-gradient(90deg, var(--wood-dk), var(--wood) 10%, var(--wood-lt) 50%, var(--wood) 90%, var(--wood-dk));
}
/* sunlight: a shaft across the back boards and a beam on the suggested book */
:root[data-deco="botanical"] .shelf::before { background: linear-gradient(115deg, transparent 20%, color-mix(in srgb, var(--glow) 7%, transparent) 30% 42%, transparent 52%); }
:root[data-deco="botanical"] .book.next .book-title::before { background: radial-gradient(55% 45% at 25% 0%, color-mix(in srgb, var(--glow) 40%, transparent), transparent), radial-gradient(closest-side, color-mix(in srgb, var(--glow) 26%, transparent), transparent); }

/* ---------- Candlelit on the room: a candle on every case, alternating sides, and candlelight inside ---------- */
:root[data-deco="candlelit"] .bookcase-mini { --fo: .4; }
:root[data-deco="candlelit"] .bookcase-mini:is(:hover, :focus-visible) { --fo: 1; }
:root[data-deco="candlelit"] .bookcase-mini::after {
  content: ""; position: absolute; bottom: calc(100% - 2px); left: 14%; width: 20px; height: 44px; pointer-events: none; background: var(--lib-shelf-candle) center bottom / contain no-repeat;
}
:root[data-deco="candlelit"] .bookcase-mini:nth-child(even)::after { left: auto; right: 14%; }

/* ---------- motion only when wanted: candle flicker, a slow sun, the case zooming open ---------- */
@media (prefers-reduced-motion: no-preference) {
  :root[data-deco="candlelit"] body::after, :root[data-deco="candlelit"] .book.next .book-title::before { animation: lib-flicker 3.1s linear infinite; }
  :root[data-deco="botanical"] .book.next .book-title::before { animation: lib-sun 5s ease-in-out infinite alternate; }
  :root[data-deco="candlelit"] .case-count::before { animation: lib-flicker 2.9s linear infinite; }
  .case-open-wrap { animation: lib-fade .25s ease-out; }
  .case-open { animation: lib-zoom .4s cubic-bezier(.2, .8, .2, 1); }
}
@keyframes lib-fade { from { opacity: 0; } }
@keyframes lib-zoom { from { opacity: 0; transform: scale(.12); } }
@keyframes lib-flicker { 0%, 69%, 100% { opacity: var(--fo, 1); } 18% { opacity: calc(var(--fo, 1) * .78); } 34% { opacity: calc(var(--fo, 1) * .96); } 51% { opacity: calc(var(--fo, 1) * .7); } 84% { opacity: calc(var(--fo, 1) * .84); } }
@keyframes lib-sun { from { opacity: .6; } }
@media (max-width: 720px) { :root[data-deco="candlelit"] body::after { --fo: .25; } }
@media (forced-colors: active) {
  .book { border: 1px solid CanvasText; }
  .book::before, .book::after, .book-title::before, .book-title::after, .shelf-books::after, .bookshelf::before, .bookshelf::after, .shelf::before, .case-count::before, .bookcase-mini::after,
  :root:is([data-deco="candlelit"], [data-deco="botanical"]) :is(body, .topbar)::after, :root:is([data-deco="candlelit"], [data-deco="botanical"]) .card::before { display: none; }
}
@media print { :root[data-deco="candlelit"] body::after { display: none; } .book { transform: none; } }