:root {
  color-scheme: light;
  --paper: var(--world-paper);
  --sheet: var(--world-sheet);
  --ink: var(--world-ink);
  --muted: var(--world-muted);
  --pine: var(--world-accent);
  --wine: #863f4e;
  --line: var(--world-line);
  --radius: 22px;
  --wall-wash: #faecdc29;
  --room-wall: linear-gradient(var(--wall-wash), var(--wall-wash)), url("media/room/wallpaper-v4.webp") center top / 180px auto repeat, var(--paper);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--room-wall); color: var(--ink); }
img { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:disabled { opacity: .55; cursor: default; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #a86a32; outline-offset: 3px; }
button, a, input, select, textarea { touch-action: manipulation; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3, .brand-name { font-family: Georgia, "Times New Roman", serif; }
svg.icon { width: 20px; height: 20px; flex: none; }
.skip { position: fixed; left: 12px; top: -100px; padding: 14px; background: white; z-index: 99; }
.skip:focus { top: 12px; }
.shell { width: min(1140px, calc(100% - 48px)); margin-inline: auto; }
.header { border-bottom: 1px solid var(--line); background: var(--paper); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 78px; }
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand img { width: 42px; height: 42px; }
.brand-name { font-size: 24px; font-weight: 700; white-space: nowrap; }
.header-actions, .actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 12px; padding: 10px 16px; min-height: 46px; font-size: 15px; font-weight: 650; background: var(--sheet); color: var(--ink); text-align: center; }
.btn.primary { background: var(--pine); color: #fffaf0; }
.btn.secondary { background: var(--sheet); border-color: var(--line); color: var(--pine); }
.btn.ghost { background: transparent; color: var(--pine); }
.btn:hover { filter: brightness(.97); }
.btn.square { width: 46px; padding: 0; }
.btn .icon { width: 18px; height: 18px; }
.kicker { font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .18em; }
.view-title { font-weight: 500; font-size: clamp(31px,4vw,43px); letter-spacing: -.036em; }
.subtext { color: var(--muted); font-size: 15px; line-height: 1.5; margin-top: 5px; }
.library-wall { min-height: 100vh; }
.room-nav { display: flex; padding: 0 0 11px; }
.room-nav .room-return {
  min-height: 44px; padding: 7px 14px; background: #65485f; color: #fff6ed; border-color: #74576f;
  box-shadow: 0 2px 7px #5a3e5728;
}
.room-nav .room-return:hover { background: #553a51; }
.header, .reader-head { background: var(--room-wall); }
.library { max-width: 940px; padding-top: 20px; }
.create-hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,46%); align-items: center; gap: 4px; min-height: 162px; padding: 18px clamp(17px,4.5vw,45px); border-radius: 22px; background: linear-gradient(115deg,#56394e,#775165); color: #fff5dd; overflow: hidden; }
.create-copy h1 { margin-top: 8px; font-size: clamp(29px,6.9vw,57px); line-height: .98; letter-spacing: -.045em; font-weight: 500; text-wrap: balance; }
.create-copy p { margin-top: 8px; color: #f1dfec; font-size: clamp(12px,3.1vw,15px); line-height: 1.3; }
.create-badge { display: inline-block; padding: 4px 9px; border: 1px solid #d2d9bd55; border-radius: 99px; color: #ffe6aa; font-size: 10px; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
.create-hero img { width: min(100%,285px); height: auto; justify-self: end; }
.shelves {
  display: grid; grid-template-columns: minmax(0,1fr);
  gap: clamp(21px,5vw,37px); margin: 26px 0 20px;
}
.shelf { position: relative; min-width: 0; }
.shelf-head {
  position: relative; z-index: 1; min-height: 49px; display: flex; align-items: center;
  justify-content: space-between; gap: 6px; padding: 0 clamp(8px,2.6vw,22px);
}
.shelf-head h2 { font-size: clamp(26px,6.3vw,36px); font-weight: 500; letter-spacing: -.035em; }
.shelf-title-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; border-radius: 6px; }
.shelf-title-link .icon { width: 17px; height: 17px; color: var(--pine); }
.shelf-title-link:hover { color: var(--pine); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.shelf-controls { display: flex; gap: 4px; }
.shelf-controls .btn { width: 44px; min-height: 44px; border-radius: 50%; }
.shelf-controls .btn:disabled { opacity: .33; }
.shelf-bay { position: relative; }
.shelf-track { --slot: 49px; --book-expansion: 146px; --cover-width: 150px; --volume-height: 200px; --book-height: 262px; --focus: clamp(104px,38%,270px); position: relative; display: flex; align-items: end; overflow: hidden; padding: 9px 16px 0; }
.shelf-track.has-books { overflow-x: auto; overflow-y: hidden; min-height: var(--book-height); padding-inline: calc(var(--focus) - var(--slot) / 2) calc(100% - var(--focus) - var(--slot) / 2); scroll-padding-inline-start: calc(var(--focus) - var(--slot) / 2); scroll-snap-type: x mandatory; overscroll-behavior-x: contain; touch-action: pan-x pinch-zoom; scrollbar-width: none; }
.shelf-track::-webkit-scrollbar { display: none; }
.shelf-board {
  position: relative; z-index: 2; height: clamp(27px, 7.5vw, 58px); margin-top: -3px;
  background: url("media/room/floating-shelf-v6.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 6px 5px #593a344e); pointer-events: none;
}
.book { position: relative; flex: 0 0 var(--slot); height: var(--book-height); scroll-snap-align: start; pointer-events: none; --binding: #344d49; }
.book.is-open, .book:focus-within { z-index: 1; }
.book-display { position: absolute; left: 50%; bottom: 0; width: calc(var(--slot) + var(--book-extra-hit,0px)); height: 100%; transform: translateX(calc(-50% + var(--book-offset,0px))); pointer-events: auto; }
.book-link { position: absolute; inset: 0; display: block; perspective: 690px; border-radius: 9px; touch-action: pan-x pinch-zoom; user-select: none; -webkit-touch-callout: none; }
.book-link::before { content: ""; position: absolute; left: 13%; right: 12%; bottom: 0; height: 9px; border-radius: 50%; box-shadow: 0 3px 9px #23261880; background: #2932253d; }
.book-volume { --depth: clamp(33px,7vw,40px); position: absolute; bottom: 2px; left: 50%; width: var(--cover-width); height: var(--volume-height); margin-left: calc(var(--cover-width) / -2); transform-style: preserve-3d; transform-origin: center bottom; transform: translateY(var(--book-lift,0px)) scale3d(var(--book-scale,1),var(--book-scale,1),var(--book-scale,1)) rotateX(-14deg) rotateY(var(--book-turn,88deg)); pointer-events: none; }
.book.hold-ready { --book-lift: -6px; }
.book-front, .book-spine, .book-pages { position: absolute; backface-visibility: hidden; }
.book-front { inset: 0; overflow: hidden; border: 2px solid var(--binding); border-radius: 2px 5px 5px 2px; background: var(--binding); color: #fff8e8; transform: translateZ(calc(var(--depth) / 2)); }
.book[data-spine="1"] { --spine-art: url("media/spines/herbarium.svg"); }
.book[data-spine="2"] { --spine-art: url("media/spines/observatory.svg"); }
.book[data-spine="3"] { --spine-art: url("media/spines/medallion.svg"); }
.book[data-spine="4"] { --spine-art: url("media/spines/tide.svg"); }
.book[data-spine="5"] { --spine-art: url("media/spines/sunburst.svg"); }
.book-spine { top: 0; bottom: 0; left: calc(var(--depth) / -2); width: var(--depth); display: grid; place-items: center; padding-block: 23%; transform: rotateY(-90deg); border: 1px solid #ccb58d69; border-radius: 4px 4px 3px 3px; background: linear-gradient(90deg,#0006,transparent 23% 76%,#0008), var(--spine-art) center / 100% 100% no-repeat, var(--binding); color: #fff1d1; }
.book-spine span { writing-mode: vertical-rl; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: 100%; padding-block: 2px; font: 700 clamp(9px,2.45vw,12px)/1.12 Georgia,"Times New Roman",serif; letter-spacing: .015em; text-shadow: 0 1px 2px #1e1724; }
.book-pages { left: 2px; right: 1px; top: calc(var(--depth) / -2); height: var(--depth); transform: rotateX(90deg); border: 3px solid var(--binding); border-left: 0; background: repeating-linear-gradient(to bottom,#f4e8cb 0 2px,#bfa783 2px 3px); }
.cover { position: absolute; inset: 0; background: var(--binding); }
.cover img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,#2e19177a, #31262240 4px, #ffdca842 7px, transparent 11px); pointer-events: none; }
.cover-fallback { height: 100%; display: grid; place-items: center; color: #ffedb9; background: #56634a; }
.cover-fallback .icon { width: 52px; height: 52px; }
.shelf-empty { min-height: 49px; padding-bottom: 10px; display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.35; color: #485a48; }
.shelf-empty .icon { color: #536b54; }
.library-footer { display: flex; justify-content: center; }
.shelf-tip { margin: 2px 0 6px; color: var(--muted); font-size: 12px; line-height: 1.3; }
.book .favorite, .book-menu-trigger { position: absolute; z-index: 1; right: 1px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff1d9; opacity: 0; pointer-events: none; }
.book.is-open button, .book button:focus-visible { opacity: 1; pointer-events: auto; }
.book .favorite { top: 10px; }
.book-menu-trigger { top: 53px; }
.book .favorite svg, .book-menu-trigger svg { width: 29px; height: 29px; padding: 6px; border-radius: 50%; border: 1px solid #fff2d56b; background: #292e24e8; }
.book .favorite[aria-pressed="true"] svg { background: #873e4f; fill: currentColor; }
.catalog { padding-bottom: 36px; }
.catalog-back { padding-inline: 0 12px; }
.catalog-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin: 10px 0 17px; }
.catalog-count { color: var(--pine); border: 1px solid #bbc9b8; border-radius: 99px; padding: 5px 10px; background: #f5f6ed; font-size: 13px; font-weight: 650; white-space: nowrap; }
.catalog-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: clamp(10px,2.2vw,20px); }
.catalog-book { min-width: 0; display: flex; flex-direction: column; background: var(--sheet); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 4px 12px #38473519; }
.catalog-link.book-link { position: static; perspective: none; touch-action: manipulation; }
.catalog-link.book-link::before { content: none; }
.catalog-cover { aspect-ratio: 3 / 4; display: grid; place-items: center; background: var(--sheet); border-radius: 13px 13px 0 0; overflow: hidden; }
.catalog-cover img { width: 100%; height: 100%; object-fit: contain; }
.catalog-cover .cover-fallback { width: 100%; }
.catalog-link h2 { padding: 10px 9px 4px; font-size: clamp(16px,2.2vw,21px); line-height: 1.12; overflow-wrap: anywhere; }
.catalog-link:hover h2 { color: var(--pine); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.catalog-book.hold-ready { box-shadow: 0 0 0 2px #a86a32; }
.catalog-book-footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 2px; padding-left: 9px; }
.catalog-book-note { display: block; }
.catalog-book-footer p { font-size: 11px; line-height: 1.2; color: var(--muted); }
.catalog-actions { display: flex; }
.catalog-actions button { position: static; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--pine); opacity: 1; pointer-events: auto; }
.catalog-actions button:hover { background: #e8eddf; }
.catalog-actions .icon { width: 18px; height: 18px; padding: 0; border: 0; background: none; }
.catalog-actions .favorite[aria-pressed="true"] { color: var(--wine); }
.catalog-actions .favorite[aria-pressed="true"] .icon { fill: currentColor; }
.catalog-empty .icon { color: var(--pine); margin-bottom: 9px; }
.catalog-empty h2 { font-size: 25px; }
@media (max-width: 740px) { .catalog-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 540px) { .catalog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
.empty, .panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--sheet); padding: 22px; }
.empty p { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 8px 0 14px; }
.empty { min-height: 200px; display: flex; flex-direction: column; align-items: start; justify-content: center; }
.empty h3 { font-size: 23px; }
.continue { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-radius: 12px; padding: 7px 12px; margin: 12px 0 0; background: #f4f6ed; color: var(--pine); min-height: 48px; }
.continue strong { display: block; font-size: 13px; }
.continue small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.footer { margin-top: 18px; padding-block: 16px 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.reader-head { position: sticky; top: 0; z-index: 3; background: var(--room-wall); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); padding-top: env(safe-area-inset-top); }
.reader-tools { position: relative; display: flex; align-items: center; gap: 3px; min-height: 47px; width: min(640px,calc(100% - 12px)); }
.reader-tools .btn { padding: 0 6px; min-width: 44px; min-height: 44px; font-size: 13px; }
.reader-heading { flex: 1; min-width: 0; text-align: center; }
.reader-heading h1 { font: 650 13px/1.15 system-ui,sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-counter { display: block; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; margin-top: 2px; white-space: nowrap; }
.reader-shelves { color: var(--pine); white-space: nowrap; }
.reader-shelves .icon { width: 16px; height: 16px; }
.reading-line { height: 3px; background: #e6ddce; }
.reading-line span { display: block; height: 100%; width: var(--read-progress,0%); background: #508069; }
.reader-note { padding-block: 3px 7px; color: var(--muted); font-size: 13px; line-height: 18px; }
.reader-head:has(.reader-note) + .reader-scroll { --reader-note-height: 28px; }
.reader-scroll { height: calc(100vh - 51px - env(safe-area-inset-top) - var(--reader-note-height,0px)); height: calc(100dvh - 51px - env(safe-area-inset-top) - var(--reader-note-height,0px)); overflow: auto; overscroll-behavior-y: contain; }
.reader { position: relative; width: min(600px,calc(100% - 12px)); margin: 6px auto 56px; }
.viewport-meter, .page-measure { position: absolute; visibility: hidden; pointer-events: none; top: 0; left: 0; }
.viewport-meter { width: 0; height: 100vh; height: 100svh; }
.page { margin: 0 0 8px; border-radius: 14px; border: 1px solid var(--line); overflow: hidden; background: var(--sheet); }
.page.full-page { background: var(--sheet); }
.scene-screen { display: flow-root; }
.scene-screen.continued { border-top: 1px dashed var(--line); }
.illustration { position: relative; margin-inline: auto; width: min(100%, calc(var(--art-height, 450px) * var(--art-ratio))); height: var(--art-height, auto); overflow: hidden; }
.illustration img { width: 100%; height: 100%; object-fit: contain; }
.illustration.crop img { height: auto; }
.illustration img.motion-overlay { position: absolute; inset: 0 auto auto 0; height: auto; pointer-events: none; }
.scene-media.has-motion { display: grid; grid-template-columns: minmax(0,1fr) 64px; align-items: end; gap: 8px; padding-inline-end: 11px; }
.motion-button { width: 64px; display: grid; justify-items: center; gap: 4px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: #583731; font-size: 11px; line-height: 1.15; font-weight: 750; text-align: center; }
.motion-disc { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #fa9d84; color: #422920; box-shadow: inset 0 0 0 1px #a7523b50, 0 3px 7px #492c252d; }
.motion-disc .icon { width: 31px; height: 31px; }
.motion-button:active .motion-disc { background: #f38b70; transform: scale(.95); }
.motion-caption { min-height: 13px; white-space: nowrap; }
.motion-over-art .motion-button { position: absolute; z-index: 1; top: calc(var(--motion-edge, 58.3333%) - 10px); right: 10px; transform: translateY(-100%); min-height: 56px; width: auto; display: flex; align-items: center; gap: 7px; padding: 6px 12px; background: #286247; color: #fff8e9; font-size: 14px; box-shadow: 0 2px 8px #262a2470; cursor: pointer; }
.motion-over-art .motion-button[aria-busy="true"] { background: #a9312d; cursor: progress; }
.motion-over-art .motion-button:focus-visible { outline: 2px solid #fff8e9; outline-offset: 2px; }
.motion-over-art .motion-disc { width: 30px; height: 30px; box-shadow: none; background: #ffffff25; color: inherit; }
.motion-over-art .motion-disc .icon { width: 20px; height: 20px; }
.motion-over-art .motion-caption { min-height: 0; }
.page-body { padding: 10px clamp(12px,4vw,24px) 12px; }
.page-label { font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .12em; color: #776556; margin-bottom: 6px; }
.page-copy { font: clamp(18px,4.5vw,21px)/1.36 Georgia, "Times New Roman", serif; overflow-wrap: anywhere; }
.page-copy p + p { margin-top: .39em; }
.play-prompt { background: #e7eee0; border-radius: 8px; padding: 7px 10px; margin-top: 8px; color: #285341; line-height: 1.35; font-size: 14px; font-weight: 650; overflow-wrap: anywhere; }
.play-prompt .kicker { font-size: 9px; margin-right: 4px; }
.reader-end { background: #eee9da; border-radius: var(--radius); text-align: center; padding: 24px; margin-top: 22px; }
.reader-end h2 { font-size: 27px; margin-bottom: 12px; font-weight: 500; }
.reader-end .actions { justify-content: center; }
@media (max-width: 740px) {
  .reader-scroll { scroll-snap-type: y proximity; scroll-padding-top: 7px; }
  .reader-tools [data-action="record"] span { display: none; }
  .scene-screen, .reader-end { scroll-snap-align: start; }
}
.view { width: min(780px,calc(100% - 36px)); margin: 30px auto 48px; }
.view > .subtext { margin-bottom: 20px; }
.stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin: 16px 0 20px; }
.stat { border: 1px solid var(--line); border-radius: 14px; background: var(--sheet); padding: 14px; }
.stat strong { display: block; font: 32px Georgia,serif; color: var(--pine); }
.stat span { font-size: 12px; line-height: 1.35; color: var(--muted); }
.logs { list-style: none; padding: 0; margin: 0; }
.logs li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.logs li:last-child { border-bottom: 0; }
.logs strong { display: block; }
.logs small { color: var(--muted); display: block; margin-top: 4px; line-height: 1.5; }
.logs p { margin-top: 7px; white-space: pre-wrap; overflow-wrap: anywhere; }
.diary-section { margin-top: 18px; }
.diary-section h2 { font-weight: 500; font-size: 26px; }
.book-stats { display: grid; gap: 8px; margin-top: 12px; }
.book-stat { border-top: 1px solid var(--line); padding-top: 8px; font-size: 14px; }
.book-stat span { color: var(--muted); display: block; margin-top: 3px; }
label.field { display: block; margin: 0 0 14px; font-weight: 650; font-size: 14px; }
.field span { display: block; margin-bottom: 5px; }
input:not([type="radio"]), select, textarea { width: 100%; min-height: 46px; padding: 9px 11px; border: 1px solid #d9cbb8; border-radius: 9px; background: #fffef9; color: var(--ink); font-size: 16px; }
input[type="file"] { border-style: dashed; padding: 10px; }
textarea { min-height: 80px; resize: vertical; }
.form-note { font-size: 13px; line-height: 1.45; color: var(--muted); margin: -4px 0 15px; }
.form-error { color: #933743; font-size: 14px; margin: 12px 0; }
.upload-list { list-style: none; padding: 0; margin: 10px 0 18px; }
.upload-list li { border-top: 1px solid var(--line); padding: 8px 0; display: flex; align-items: center; gap: 8px; }
.upload-list img { width: 42px; height: 48px; object-fit: cover; border-radius: 5px; }
.upload-label { flex: 1; min-width: 0; font-size: 13px; overflow-wrap: anywhere; }
.upload-controls { display: flex; gap: 3px; }
.upload-controls .btn { min-height: 44px; width: 44px; padding: 0; }
.replace { display: inline-flex; color: var(--pine); font-size: 12px; align-items: center; min-height: 32px; cursor: pointer; }
.replace input { width: 1px; height: 1px; opacity: 0; position: absolute; }
dialog { color: var(--ink); border: 1px solid var(--line); border-radius: 20px; width: min(500px,calc(100% - 28px)); max-height: 90dvh; padding: 20px; background: var(--sheet); }
dialog::backdrop { background: #152c23a8; }
dialog h2 { font-size: 30px; font-weight: 500; }
dialog .dialog-top { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-bottom: 8px; }
dialog .subtext { margin-bottom: 12px; }
.shelf-choices { display: grid; gap: 7px; }
.shelf-choice { display: grid; grid-template-columns: 24px minmax(0,1fr) 20px; align-items: center; gap: 9px; padding: 8px 12px; min-height: 55px; width: 100%; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: #eef1e7; color: var(--pine); }
.shelf-choice strong, .shelf-choice small { display: block; }
.shelf-choice strong { font-size: 15px; }
.shelf-choice small, .shelf-menu-note { font-size: 12px; line-height: 1.35; }
.shelf-choice:disabled { opacity: 1; color: #626b5e; background: #f6f5ec; }
.shelf-menu-note { margin-top: 12px; color: var(--muted); }
.shelf-menu-note + .btn { margin-top: 9px; }
fieldset { padding: 0; border: 0; margin: 0 0 13px; }
legend { font-size: 14px; font-weight: 700; padding: 0; margin-bottom: 5px; }
.radio-row { display: flex; gap: 6px; flex-wrap: wrap; }
.radio-row label { display: flex; gap: 5px; align-items: center; min-height: 44px; padding: 5px 8px; background: #f2ede3; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.radio-row input { accent-color: var(--pine); }
.toast { position: fixed; z-index: 9; bottom: max(16px,env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px); padding: 12px 16px; border-radius: 12px; background: #183a2e; color: white; font-size: 14px; box-shadow: 0 4px 16px #0002; }
.load-state { padding: 32px; text-align: center; }
@media (max-width: 740px) {
  .shell { width: calc(100% - 28px); }
  .header-inner { min-height: 63px; gap: 5px; }
  .brand { gap: 7px; }
  .brand img { width: 34px; height: 34px; }
  .brand-name { font-size: 20px; }
  .header-actions { gap: 2px; }
  .header-actions .btn { width: 44px; min-height: 44px; padding: 0; }
  .header-actions .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .library { padding-top: 12px; }
  .create-hero { border-radius: 17px; }
  .shelf-track { --slot: 39px; --book-expansion: 116px; --cover-width: 122px; --volume-height: 163px; --book-height: 221px; }
  .panel, .empty { padding: 15px; }
  .stat { padding: 10px; }
}
@media (max-width: 340px) {
  .brand-name { font-size: 18px; }
  .reader-tools .btn { padding-inline: 7px; font-size: 13px; }
  .reader-tools .icon { width: 16px; height: 16px; }
  .upload-controls .btn { width: 38px; }
}

/* Keep the lighting control available in the library and while reading. */
.theme-control { display: inline-flex; align-items: center; gap: 5px; color: var(--pine); flex: none; }
.theme-control .icon { width: 17px; height: 17px; }
.theme-control .theme-select { width: auto; min-height: 44px; padding: 3px 4px 3px 6px; border-color: var(--line); border-radius: 10px; background: var(--sheet); color: inherit; font-size: 13px; }
.reader-tools .theme-control .icon { display: none; }
.illustration .motion-video { position: absolute; inset: 0 auto auto 0; display: block; width: 100%; height: auto; pointer-events: none; }
.motion-video:not(.is-playing) { opacity: 0; }
.motion-button-top .motion-button { top: 10px; transform: none; }
.motion-button-bottom-left .motion-button { right: auto; left: 10px; }
@media (max-width: 740px) {
  .header-actions .theme-control .icon { display: none; }
  .header-actions .theme-control .theme-select { font-size: 12px; }
}
@media (max-width: 360px) {
  .reader-tools [data-action="record"] span { display: none; }
  .reader-tools .theme-select { font-size: 12px; }
}

:root[data-theme="night"] {
  color-scheme: dark;
  --paper: var(--world-paper);
  --sheet: var(--world-sheet);
  --ink: var(--world-ink);
  --muted: var(--world-muted);
  --pine: var(--world-accent);
  --wine: #f0a4ad;
  --line: var(--world-line);
}
[data-theme="night"] .btn.primary { background: #66516a; color: #fcf1d8; }
[data-theme="night"] .create-hero { background: linear-gradient(115deg,#47354c,#534057); }
[data-theme="night"] .create-hero img,
[data-theme="night"] .cover img,
[data-theme="night"] .catalog-cover img { filter: brightness(.82) saturate(.88); }
[data-theme="night"] .shelf-bay { isolation: isolate; }
[data-theme="night"] .shelf-bay::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: -64px -10px -25px;
  background: radial-gradient(ellipse 145px 105px at calc(100% - 41px) 76px,#efb76738,#efb76714 42%,transparent 85%);
  mask-image: linear-gradient(90deg,#000 0 88%,transparent);
}
[data-theme="night"] .shelf-bay::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 2;
  top: 2px;
  right: 19px;
  width: 28px;
  height: 18px;
  border-radius: 60% 60% 4px 4px;
  background: linear-gradient(#6b4b36,#ba8455 76%,#ffd99a 78%);
  box-shadow: 0 4px 9px #f9be7466,0 10px 22px #ffc67332;
}
[data-theme="night"] .shelf-board { filter: brightness(.78) saturate(.78) drop-shadow(0 6px 5px #24182b7f); }
[data-theme="night"] .shelf-empty,
[data-theme="night"] .shelf-empty .icon,
[data-theme="night"] .page-label,
[data-theme="night"] .shelf-choice:disabled { color: var(--muted); }
[data-theme="night"] .continue,
[data-theme="night"] .catalog-count,
[data-theme="night"] .catalog-cover,
[data-theme="night"] .catalog-actions button:hover,
[data-theme="night"] .shelf-choice,
[data-theme="night"] .shelf-choice:disabled,
[data-theme="night"] .radio-row label,
[data-theme="night"] .play-prompt,
[data-theme="night"] input:not([type="radio"]),
[data-theme="night"] textarea,
[data-theme="night"] select,
[data-theme="night"] .skip { background: var(--sheet); border-color: var(--line); }
[data-theme="night"] .play-prompt { color: #d8d9b8; }
[data-theme="night"] .form-error { color: #ffabb0; }

[data-theme="night"] .reading-line { background: #414437; }
[data-theme="night"] .reading-line span { background: #869579; }
[data-theme="night"] .page.full-page { background: var(--sheet); }
[data-theme="night"] .page.full-page .illustration img,
[data-theme="night"] .page.full-page .motion-video { filter: brightness(.66) saturate(.86) sepia(.10); }
[data-theme="night"] .page:not(.full-page) .illustration img { filter: brightness(.78) saturate(.88); }
@media (max-width: 430px) {
  .header .brand-name { white-space: normal; line-height: 1.04; }
  .header-actions { flex-wrap: nowrap; }
}

:root[data-period="morning"] { --wall-wash: #ffecd247; }
:root[data-period="evening"] { --wall-wash: #7e495150; }
:root[data-period="night"] { --wall-wash: #261f37bc; }
@media (max-width: 740px) {
  .room-nav .room-return { min-height: 44px; width: 100%; justify-content: flex-start; }
}