/* GabesGrimoire — the room is the interface. Night-lit chrome: the UI stays out of the way of the glow. */
:root {
  --paper: #0d1017;
  --paper-2: #141823;
  --ink: #e9e6dc;
  --blue: #46e9ff;
  --accent-rgb: 70,233,255;
  --magenta: #ff4fd2;
  --line: #2b3040;
  --muted: #8d93a6;
  --serif: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  --sans: Arial, Helvetica, sans-serif;
  --mono: 'SF Mono', Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2,.7,.2,1);
  --header-height: 76px;
  --chrome: rgba(15,18,26,.9);
}
/* Paper style: ink on a light sheet. */
:root[data-style='ink'] { --paper: #dcd9df; --paper-2: #ebe8ee; --ink: #232230; --blue: #3644b3; --accent-rgb: 54,68,179; --magenta: #b8407a; --line: #b7b3c1; --muted: #6d6a7a; --chrome: rgba(236,234,239,.92); }
:root[data-style='ink'] .wordmark { text-shadow: none; }
:root[data-style='ink'] .primary-button { color: #fff; box-shadow: none; }
:root[data-style='ink'] .object-tooltip { background: var(--chrome); }
:root[data-style='ink'] .toast { background: var(--paper-2); box-shadow: 0 8px 30px #00000022; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
button, input, summary { font: inherit; }
button, input, a, summary { -webkit-tap-highlight-color: transparent; }
button, a, summary { touch-action: manipulation; }
button { border: 0; background: none; color: inherit; cursor: pointer; }
button:disabled { opacity: .34; cursor: default; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 5px; }
button:hover:not(:disabled), a:hover, summary:hover { color: var(--blue); }
[hidden] { display: none !important; }
::selection { background: #1e4f5c; }
kbd { margin-left: 8px; padding: 1px 5px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); font: 9px/1.4 var(--mono); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.site-shell { width: 100%; height: 100svh; }
.masthead { position: absolute; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; justify-content: space-between; height: var(--header-height); padding: 0 34px; pointer-events: none; }
.masthead > * { pointer-events: auto; }
.edit-button { margin-left: auto; margin-right: 18px; min-height: 44px; padding: 8px 12px; font: 10px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.edit-button[aria-pressed='true'] { color: var(--magenta); }
.wordmark { font: 29px/1 var(--serif); letter-spacing: -.065em; text-shadow: 0 0 18px rgba(var(--accent-rgb),.25); }
/* A compact native list of everything in the room; the room itself is the primary way in. */
.objects-panel { position: relative; }
.objects-panel > summary { display: flex; align-items: center; gap: 15px; min-height: 44px; padding: 8px 0 8px 16px; font: 10px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; list-style: none; cursor: pointer; }
.objects-panel > summary::-webkit-details-marker { display: none; }
.objects-panel > summary span { color: var(--blue); font-size: 15px; }
.objects-panel[open] > summary { color: var(--blue); }
.objects-sheet { position: absolute; right: -10px; top: calc(100% + 4px); width: min(560px, calc(100vw - 40px)); max-height: calc(100svh - var(--header-height) - 30px); overflow: auto; overscroll-behavior: contain; padding: 6px 22px 16px; border: 1px solid var(--line); border-radius: 4px; background: var(--chrome); box-shadow: 0 24px 80px #00000099, 0 0 0 1px rgba(var(--accent-rgb),.08); backdrop-filter: blur(16px); scrollbar-width: thin; scrollbar-color: #3a4152 transparent; }
.object-index { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 24px; }
.object-index + .object-index { margin-top: 14px; padding-top: 6px; border-top: 1px solid var(--line); }
.object-index:empty { display: none; }
.object-index button, .object-index a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 12px; text-align: left; }
.object-index button span, .object-index a span { color: var(--muted); font-size: 10px; }
.object-index button[aria-pressed='true'], .object-index button[aria-current='true'] { color: var(--blue); }
.object-index button.is-held { color: var(--magenta); }
.room { width: 100%; height: 100svh; padding-top: var(--header-height); }
.hardware { position: relative; isolation: isolate; width: 100%; height: calc(100svh - var(--header-height)); overflow: hidden; }
.scene-canvas { position: absolute; inset: 0; z-index: 1; }
.scene-canvas canvas { display: block; width: 100%; height: 100%; outline: none; touch-action: none; }
.scene-loading { position: absolute; left: 50%; top: 48%; z-index: 6; transform: translate(-50%,-50%); color: var(--muted); font: italic 22px/1.3 var(--serif); text-align: center; }
.scene-ready .scene-loading { display: none; }
.object-tooltip { position: fixed; z-index: 30; max-width: 280px; padding: 7px 12px; border: 1px solid rgba(var(--accent-rgb),.45); background: var(--chrome); color: var(--blue); font: 10px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; pointer-events: none; box-shadow: 0 3px 16px #00000066, 0 0 14px rgba(var(--accent-rgb),.14); }
.object-tooltip:before { content: '[ '; opacity: .55; }
.object-tooltip:after { content: ' ]'; opacity: .55; }
.room-chrome { position: fixed; left: 30px; right: 30px; bottom: max(20px,env(safe-area-inset-bottom)); z-index: 25; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; pointer-events: none; }
.room-chrome > * { pointer-events: auto; }
.scene-focus { display: flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 3px; background: var(--chrome); backdrop-filter: blur(10px); }
.view-button { min-width: 50px; min-height: 38px; padding: 9px 11px; color: var(--muted); font: 9px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.view-button.selected, .view-button[aria-pressed='true'] { color: var(--ink); }
.view-button.selected:after, .view-button[aria-pressed='true']:after { content: ''; display: block; width: 3px; height: 3px; margin: 4px auto -7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 6px var(--blue); }
.controls-panel { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); }
.controls-panel > summary { display: flex; align-items: center; justify-content: center; gap: 7px; width: 108px; min-height: 42px; margin: auto; padding: 10px; border: 1px solid var(--line); border-radius: 3px; background: var(--chrome); color: var(--muted); font: 9px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; list-style: none; cursor: pointer; backdrop-filter: blur(10px); }
.controls-panel > summary::-webkit-details-marker { display: none; }
.controls-panel > summary svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.15; }
.controls-panel[open] > summary { color: var(--ink); }
.player-controls { position: absolute; bottom: 51px; left: 50%; width: min(510px,calc(100vw - 40px)); padding: 8px 15px 3px; border: 1px solid var(--line); border-radius: 5px; background: var(--chrome); transform: translateX(-50%); box-shadow: 0 8px 40px #00000080; backdrop-filter: blur(16px); }
.transport { display: flex; align-items: center; gap: 8px; padding: 3px 0 5px; border-bottom: 1px solid var(--line); }
.transport button { display: flex; flex: 0 0 38px; align-items: center; justify-content: center; width: 38px; height: 40px; padding: 0; border-radius: 50%; font-size: 21px; }
.transport button:not(:disabled):hover { background: #1b2433; }
.transport svg { width: 13px; height: 13px; }
.transport input { flex: 1; min-width: 20px; accent-color: var(--blue); height: 3px; cursor: pointer; }
.transport input:disabled { cursor: default; }
.transport #time { color: var(--muted); white-space: nowrap; font: 9px var(--mono); font-variant-numeric: tabular-nums; }
.now-playing { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 33px; color: var(--muted); font-size: 9px; }
.now-playing button { padding: 9px 0 9px 8px; font-size: 9px; white-space: nowrap; }
.now-playing button span { margin-left: 7px; color: var(--blue); }
/* The in-hand bar. */
.held-tape { position: fixed; left: 50%; bottom: 84px; z-index: 26; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; max-width: calc(100vw - 30px); padding: 8px 10px 8px 18px; border: 1px solid rgba(var(--accent-rgb),.35); border-radius: 4px; background: var(--chrome); box-shadow: 0 14px 50px #000000aa, 0 0 22px rgba(var(--accent-rgb),.10); transform: translateX(-50%); backdrop-filter: blur(14px); }
.held-copy { min-width: 0; display: grid; gap: 5px; }
.held-heading { display: flex; align-items: baseline; gap: 10px; margin: 0; font: 17px/1.2 var(--serif); letter-spacing: -.02em; white-space: nowrap; }
.held-help { margin: 0; color: var(--muted); font: 10px/1.4 var(--sans); }
.held-face { padding: 2px 6px; border: 1px solid var(--line); color: var(--muted); font: 8px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.held-tape[data-face='back'] .held-face { color: var(--magenta); border-color: #5a2a52; }
.held-actions { display: flex; align-items: center; gap: 6px; }
.held-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 9px 12px; font-size: 11px; white-space: nowrap; }
.held-actions .primary-button { min-width: 0; min-height: 40px; margin: 0; padding: 9px 16px; }
.held-tape[data-phase='lifting'], .held-tape[data-phase='returning'], .held-tape[aria-busy='true'] { opacity: .55; }
/* A conventional player is still available if this device cannot draw the room. */
.fallback-player { position: absolute; left: 50%; top: 43%; width: min(650px,90vw,78svh); aspect-ratio: 1; container-type: inline-size; transform: translate(-50%,-50%); opacity: 0; pointer-events: none; }
.standard-player .fallback-player { opacity: 1; pointer-events: auto; }
.scene-ready .fallback-player { visibility: hidden; pointer-events: none; }
.hardware-image { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.crt-screen { position: absolute; left: 12.1%; top: 12.7%; width: 64.8%; height: 48.3%; overflow: hidden; border-radius: 9% / 12%; background: #050b13; }
.crt-screen video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; opacity: 0; filter: contrast(1.08) saturate(.9); }
.crt-screen.has-video video { opacity: 1; }
#video:fullscreen { visibility: visible; pointer-events: auto; opacity: 1; width: 100%; height: 100%; object-fit: contain; background: #000; filter: none; }
#video:-webkit-full-screen { visibility: visible; pointer-events: auto; opacity: 1; width: 100%; height: 100%; object-fit: contain; background: #000; filter: none; }
.screen-idle { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 17px; background: radial-gradient(ellipse at center,#102d54,#07121e 66%,#03070c); color: #b2cbec; text-align: center; }
.screen-idle strong { position: relative; z-index: 2; font: italic 32px/1.05 var(--serif); letter-spacing: -.04em; }
.idle-caption { z-index: 2; font-size: 7px; letter-spacing: .12em; }
.screen-corner { position: absolute; left: 8%; top: 8%; font-size: 10px; }
.idle-orb { position: absolute; width: 43%; aspect-ratio: 1; left: 28.5%; border-radius: 50%; background: repeating-radial-gradient(ellipse at center,transparent 0 4px,#4384d526 5px 6px,transparent 7px 9px); transform: rotate(-25deg); }
.glass { pointer-events: none; position: absolute; inset: 0; box-shadow: inset 0 0 22px 8px #000b; background: linear-gradient(130deg,#ffffff08,transparent 40%,transparent 80%,#8193a708); border-radius: inherit; }
.scanlines { pointer-events: none; position: absolute; inset: 0; background: repeating-linear-gradient(0deg,#0003 0 1px,transparent 1px 3px); opacity: .38; }
.screen-osd { position: absolute; left: 8%; top: 8%; z-index: 3; color: #d7e7ff; font-size: 12px; text-shadow: 0 0 6px #88aaff; }
.slot-target { position: absolute; left: 10.8%; top: 77.7%; width: 47%; height: 5.9%; z-index: 3; display: flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 4px; }
.slot-target span { opacity: 0; font-size: 10px; letter-spacing: .1em; }
.loaded-label { position: absolute; left: 13%; top: 78.5%; width: 43%; height: 4%; z-index: 2; display: none; align-items: center; justify-content: center; background: #bdc5d1; border: 2px solid #242831; color: #152872; font-size: 9px; }
.loaded-label.visible { display: flex; }
.hardware-clock { position: absolute; left: 68%; top: 77.6%; width: 17.3%; height: 4.7%; display: flex; align-items: center; justify-content: center; background: #061019; color: #3e90ff; font: italic 2cqw var(--sans); }
.physical-controls { position: absolute; left: 66.5%; top: 84.7%; width: 20.3%; height: 3%; display: flex; gap: 1%; }
.physical-controls button { flex: 1; padding: 0; border-radius: 3px; }
.physical-controls button:hover:not(:disabled) { background: #679aff55; }
h2 { margin: 0 0 16px; font: 32px/1.15 var(--serif); letter-spacing: -.04em; }
.muted { color: var(--muted); }
.primary-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 25px; min-width: 150px; min-height: 44px; margin-top: 12px; padding: 13px 20px; background: var(--blue); color: #061017; font-size: 12px; letter-spacing: .02em; box-shadow: 0 0 18px rgba(var(--accent-rgb),.28); }
.primary-button:hover:not(:disabled) { background: #7cf0ff; color: #061017; }
/* Object drawers are revealed only when someone asks to inspect something. */
dialog { max-width: calc(100vw - 32px); max-height: calc(100dvh - 40px); padding: 34px; overflow: auto; border: 1px solid var(--line); border-radius: 3px; background: var(--paper-2); color: var(--ink); box-shadow: 0 30px 120px #000000b3, 0 0 0 1px rgba(var(--accent-rgb),.06); }
dialog::backdrop { background: #05070c99; backdrop-filter: blur(8px); }
.close-dialog { position: absolute; right: 13px; top: 12px; z-index: 3; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; font-size: 29px; line-height: 1; }
.theater-dialog { width: min(1060px,calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 28px; border-color: #3a4148; border-radius: 4px; background: #0a0d12; color: #f1f2ea; box-shadow: 0 30px 140px #000c; }
.theater-dialog::backdrop { background: #04060ad9; backdrop-filter: blur(12px); }
.theater-dialog h2 { margin: 0 54px 20px 0; font-size: 27px; }
.theater-dialog .close-dialog { right: 17px; top: 17px; }
.theater-screen { width: 100%; aspect-ratio: 16/9; overflow: hidden; background: #000; }
.theater-screen #video { display: block; visibility: visible; pointer-events: auto; width: 100%; height: 100%; opacity: 1; object-fit: contain; background: #000; filter: none; }
.site-dialog { width: min(1200px,calc(100vw - 28px)); max-width: none; max-height: none; padding: 0; border: 0; background: transparent; color: #dcdace; overflow: visible; }
.site-dialog::backdrop { background: rgb(4 8 10 / .66); backdrop-filter: blur(3px); }
.computer-bezel { padding: clamp(12px,2vw,28px); padding-bottom: 0; border-radius: 22px 22px 14px 14px; border: 1px solid #535854; background: linear-gradient(125deg,#3b423d,#222a26 60%,#343b34); box-shadow: inset 1px 2px 2px #78817680, inset -2px -3px 4px #080d09, 0 22px 80px #0009; }
.site-frame { position: relative; width: 100%; height: min(70vh,780px); height: min(70dvh,780px); overflow: hidden; border: 7px solid #121916; border-radius: 10px; background: #000; box-shadow: 0 1px 1px #70796b; }
.site-frame iframe { position: relative; display: block; width: 100%; height: 100%; border: 0; background: #000; z-index: 1; }
.computer-boot { position: absolute; inset: 0; display: grid; place-content: center; gap: 12px; color: #b7d6ba; background: #0c1510; text-align: center; font: 14px monospace; pointer-events: none; z-index: 2; }
.computer-boot:has(#site-status[hidden]) { display: none; }
.computer-boot button { pointer-events: auto; }
.computer-footer { min-height: 64px; display: flex; align-items: center; gap: 20px; }
.computer-wordmark { font: 11px monospace; letter-spacing: .15em; color: #dadacb; }
.computer-wordmark span { display: block; font-size: 8px; letter-spacing: .13em; color: #949e8e; margin-top: 5px; }
#site-back { margin-left: auto; padding: 9px 12px; border: 1px solid #5b665a; border-radius: 3px; background: #252f26; color: #ebeadd; font-size: 12px; }
#site-back span { margin-left: 14px; font: 9px monospace; color: #8fa58c; }
.computer-led { width: 5px; height: 5px; margin-right: 8px; border-radius: 50%; background: #a1e898; box-shadow: 0 0 7px #74e45b; }
@media(max-width:600px) { .site-dialog { width: calc(100vw - 12px); } .computer-bezel { padding: 8px 8px 0; border-radius: 12px; } .site-frame { height: 79dvh; border-width: 3px; } .computer-footer { min-height: 52px; gap: 10px; } .computer-wordmark { font-size: 8px; letter-spacing: .04em; } .computer-wordmark span { font-size: 7px; } #site-back { padding: 9px; } #site-back span { display: none; } }

.toast { position: fixed; bottom: 25px; left: 50%; z-index: 50; max-width: calc(100vw - 30px); padding: 13px 22px; border: 1px solid rgba(var(--accent-rgb),.4); transform: translate(-50%,20px); background: #0f121a; color: var(--ink); font-size: 12px; line-height: 1.5; opacity: 0; pointer-events: none; box-shadow: 0 0 24px rgba(var(--accent-rgb),.18); transition: opacity .2s,transform .2s; }
.toast.visible { opacity: 1; transform: translate(-50%,0); }
/* Books stay paper: a physical object held up to the light. */
.book-dialog { width: 680px; padding: 42px 50px 20px; border-color: #d5d1bf; background: #f4f1e6; color: #22201b; box-shadow: inset 9px 0 15px #887b4220,0 30px 120px #000000b3; }
.book-dialog .close-dialog:hover { color: #1a4f9c; }
.book-sheet { min-height: 360px; }
.book-sheet h2 { margin: 6px 0 25px; font-size: 35px; }
.book-content { font: 17px/1.75 var(--serif); }
.book-content h3 { margin: 20px 0 12px; font: 24px/1.3 var(--serif); letter-spacing: -.03em; }
.book-content p { margin: 0 0 18px; }
.book-content ul { padding-left: 20px; }
.book-content img { display: block; max-width: 100%; height: auto; margin: 20px auto; }
.book-content a { color: #1a4f9c; text-decoration: underline; text-underline-offset: 3px; }
.book-navigation { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 24px; padding-top: 12px; border-top: 1px solid #d5d1bf; }
.book-navigation button { width: 44px; height: 44px; padding: 8px; font-size: 22px; }
.book-navigation button:hover:not(:disabled) { color: #1a4f9c; }
#book-page { color: #7a7566; font-size: 10px; font-variant-numeric: tabular-nums; }
.book-sketch { margin: 25px 0; color: #1a4f9c; text-align: center; font: 90px/1.3 Georgia,serif; }
.info-dialog { width: 510px; padding: 46px; }
.info-dialog h2 { margin-bottom: 25px; font-size: 36px; }
.info-content { font-size: 14px; line-height: 1.8; }
.info-content p { margin: 0 0 18px; }
.info-content a { display: inline-block; margin-bottom: 14px; color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }
.info-content img { display: block; width: 100%; height: auto; margin: 20px 0; }
.machine-controls { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; padding:10px 0; border-top:1px solid var(--line); font-size:10px; }
.machine-controls button { min-height:32px; padding:4px; }
.machine-controls button[aria-pressed='true'] { color:var(--blue); }
.machine-controls label { display:flex; align-items:center; gap:7px; }
.machine-controls select { max-width:140px; padding:5px; border:1px solid var(--line); background:var(--paper); color:var(--ink); font:inherit; }
.machine-controls input { width:85px; accent-color:var(--blue); }
@media (max-width: 700px) {
  :root { --header-height: 67px; }
  .masthead { padding: 0 20px; }
  .wordmark { font-size: 27px; }
  .objects-panel > summary { gap: 11px; font-size: 11px; }
  .objects-sheet { right: -8px; width: min(420px, calc(100vw - 24px)); padding: 4px 16px 14px; }
  .object-index { gap: 0 16px; }
  .object-index button, .object-index a { font-size: 11px; }
  .room-chrome { left: 15px; right: 15px; bottom: max(15px,env(safe-area-inset-bottom)); gap: 10px; }
  .scene-focus { padding: 0; }
  .view-button { min-width: 46px; min-height: 42px; padding: 9px; }
  .controls-panel > summary { width: 78px; gap: 6px; }
  .controls-panel > summary span { font-size: 9px; }
  .player-controls { padding: 8px 10px 2px; }
  .transport { gap: 5px; }
  .transport button { flex-basis: 34px; width: 34px; height: 40px; }
  .transport #time { font-size: 8px; }
  .scene-loading { font-size: 20px; }
  .held-tape { bottom: 80px; flex-direction: column; align-items: stretch; gap: 8px; width: calc(100vw - 30px); padding: 10px 12px 10px; }
  .held-heading { justify-content: space-between; font-size: 15px; white-space: normal; }
  .held-actions { justify-content: space-between; }
  .held-actions button { flex: 1; padding: 9px 6px; font-size: 11px; }
  .held-actions .primary-button { flex: 1.6; padding: 9px 6px; }
  .held-actions kbd { display: none; }
  .fallback-player { top: 42%; width: min(94vw,65svh); }
  .screen-idle strong { font-size: 24px; }
  dialog { max-width: calc(100vw - 24px); max-height: calc(100dvh - 28px); }
  .book-dialog { padding: 38px 28px 14px; }
  .book-sheet { min-height: 330px; }
  .book-sheet h2 { font-size: 30px; }
  .book-content { font-size: 16px; line-height: 1.7; }
  .info-dialog { padding: 40px 27px 27px; }
  .info-dialog h2 { font-size: 32px; }
  .info-content { font-size: 13px; }
  .theater-dialog { padding: 17px 12px 12px; }
  .theater-dialog h2 { margin-left: 5px; margin-bottom: 16px; font-size: 23px; }
  .theater-dialog .close-dialog { right: 5px; top: 8px; }
  .machine-controls select { max-width: 145px; font-size: 16px; }
  .player-controls { max-height: calc(100svh - 140px); overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-height: 600px) {
  .book-sheet { min-height: 240px; }
  .held-tape { bottom: 72px; }
}
@media (max-width: 360px) {
  .masthead { padding: 0 16px; }
  .wordmark { font-size: 25px; }
  .room-chrome { left: 10px; right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation: none !important; transition: none !important; }
}

/* Editor mode (?edit=1): a working panel, not part of the visitor experience. */
.editor { position: fixed; right: 16px; top: 88px; z-index: 40; width: 330px; max-height: calc(100svh - 110px); overflow: auto; padding: 14px 16px 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--chrome); color: var(--ink); font: 11px/1.5 var(--sans); box-shadow: 0 20px 60px #00000088; backdrop-filter: blur(12px); }
.editor header { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.editor header strong { font: 10px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.editor section { padding: 10px 0; border-top: 1px solid var(--line); }
.editor label { display: flex; flex-direction: column; gap: 3px; font: 9px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.editor select, .editor input[type='number'] { padding: 5px 6px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: 12px var(--sans); }
.editor input[type='range'] { accent-color: var(--blue); }
.editor-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px 10px; margin-top: 8px; }
.editor-look { grid-template-columns: repeat(2, minmax(0,1fr)); }
.editor-row { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 8px; }
.editor-row button, .editor-row a { min-height: 32px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 3px; font-size: 11px; }
.editor-row .primary-button { min-width: 0; margin: 0; border: 0; }
.editor-hint { color: var(--muted); font-size: 10px; }
.editor footer { padding-top: 10px; border-top: 1px solid var(--line); }
:root[data-editing='on'] .held-tape { bottom: 84px; }

/* View navigation occupies its own row on narrow screens; all hit targets remain separate. */
.back-view { position: fixed; z-index: 26; top: calc(var(--header-height) + 16px); left: 30px; min-height: 44px; padding: 10px 15px; background: var(--chrome); border: 1px solid var(--line); border-radius: 3px; font: 10px var(--mono); }
@media (max-width: 640px) {
  .room-chrome { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
  .scene-focus { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.35fr 1fr 1fr 1.7fr; width: 100%; }
  .view-button { min-width: 0; min-height: 44px; padding: 9px 6px; }
  .controls-panel { position: static; left: auto; bottom: auto; transform: none; justify-self: start; }
  .controls-panel > summary { margin: 0; }
  .room-chrome .player-controls { left: 0; bottom: calc(100% + 10px); max-height: calc(100svh - 200px - env(safe-area-inset-bottom)); transform: none; }
  .held-tape { bottom: 132px; }
  .back-view { left: 15px; top: calc(var(--header-height) + 10px); }
}

.reader-accessibility:not([hidden]){position:fixed;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.reader-accessibility:focus-within:not([hidden]){z-index:120;left:16px;right:16px;bottom:16px;width:auto;height:auto;clip-path:none;white-space:normal;padding:12px;background:#eee3cc;color:#28372d;display:flex;flex-wrap:wrap;gap:8px;}
.reader-accessibility p{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
.reader-accessibility button,.reader-accessibility a{min-height:44px;padding:8px 12px;color:inherit;}
@media (max-height:500px){html[data-book]:not([data-book="idle"]) .room-chrome{visibility:hidden;}}

.project-screening{position:fixed;z-index:130;bottom:22px;left:50%;transform:translateX(-50%);width:min(760px,calc(100% - 32px));padding:14px 18px;background:#111a20f2;border:1px solid #758c914d;box-shadow:0 16px 45px #0006;color:#e8ecdf;backdrop-filter:blur(12px);}
.project-screening[hidden]{display:none;}.screening-heading,.screening-transport,.screening-credit{display:flex;align-items:center;gap:14px;}.screening-heading{justify-content:space-between;}.screening-heading strong{font:20px/1.15 var(--serif);}.screening-heading button{margin-left:auto;}.project-screening button{min-height:42px;padding:8px 12px;border:1px solid #6d898c55;white-space:nowrap;}.project-screening button:hover,.project-screening a:hover{color:#ffd992;}.screening-transport input{flex:1;min-width:40px;accent-color:#e6c484;}.screening-transport span{font-variant-numeric:tabular-nums;font-size:10px;white-space:nowrap;}.screening-credit{justify-content:space-between;margin-top:8px;font-size:9px;line-height:1.5;color:#a3b3b5;}.screening-credit a{white-space:nowrap;}.project-screening p{margin:4px 0 8px;font-size:11px;color:#e8c784;}.project-screening p:empty{display:none;}
html[data-screening="on"] .room-chrome{visibility:hidden;}
@media(max-width:600px){.project-screening{bottom:12px;padding:10px 12px;}.screening-heading strong{font-size:17px;}.screening-credit span{max-width:64%;}.screening-transport{gap:7px;}.screening-transport button{padding:7px;}.screening-credit{font-size:8px;}}

.library-dialog{width:min(1040px,calc(100% - 28px));max-height:calc(100dvh - 40px);padding:38px;background:#ebe3cf;color:#28362f;border:1px solid #95896a;}.library-kicker{font:10px/1.5 var(--mono);letter-spacing:.15em;color:#73654e;}.library-dialog h2{font:38px/1.1 var(--serif);margin:6px 0 10px;}.library-intro{font:14px/1.5 var(--serif);margin:0 0 30px;color:#5b6257;}.library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:30px 24px;}.library-book{text-align:left;display:flex;flex-direction:column;align-items:stretch;color:inherit;gap:7px;}.library-cover{height:175px;display:flex;align-items:center;justify-content:center;background:var(--cover-color);box-shadow:4px 5px 0 #c3b69b;border-left:5px solid #0003;overflow:hidden;transition:transform .16s;}.library-cover img{width:100%;height:100%;object-fit:contain;}.library-cover>span{font:22px/1.1 var(--serif);padding:14px;color:#f8e9ce;}.library-book:hover .library-cover,.library-book:focus-visible .library-cover{transform:translateY(-4px);}.library-book strong{font:17px/1.2 var(--serif);margin-top:5px;}.library-author{font-size:10px;line-height:1.4;color:#69705f;}.library-length{font-size:9px;color:#81745c;}.reader-library{position:fixed;z-index:115;left:20px;top:96px;min-height:40px;padding:10px 14px;background:#16221fe8;color:#eee5cd;border:1px solid #77867977;}.reader-library[hidden]{display:none;}
@media(max-width:600px){.library-dialog{padding:26px 22px;}.library-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 18px;}.library-cover{height:155px;}.library-dialog h2{font-size:31px;}.reader-library{top:80px;left:14px;}}


/* Keep reading controls below the paper and the room navigation out of its way. */
html[data-book]:not([data-book="idle"]) .room-chrome{visibility:hidden;}
.book-reading-tools{position:fixed;z-index:115;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);padding:7px 10px;background:var(--chrome,#eee3cc);color:var(--ink,#28372d);border:1px solid #8f8169;border-radius:7px;box-shadow:var(--paper-shadow,1px 2px 0 #71624d);}
.book-reading-tools[hidden],.reader-zoom-controls[hidden]{display:none;}
.book-reading-row,.book-reading-pages,.reader-zoom-controls{display:flex;align-items:center;justify-content:center;gap:3px;}
.book-reading-row{flex-wrap:wrap;gap:8px;}
.book-reading-tools button{min-width:44px;min-height:44px;padding:7px 10px;border-radius:4px;color:inherit;font:14px/1.2 var(--sans);}
.book-reading-tools button:hover:not(:disabled){background:#dce2cb;color:#304d36;}
.book-reading-tools button:disabled{opacity:.42;}
#reader-enlarge{background:#526b50;color:#fff7e2;}
#reader-enlarge:hover:not(:disabled){background:#3f5942;color:#fff7e2;}
#reader-page-count{min-width:62px;text-align:center;font:12px/1.3 var(--sans);font-variant-numeric:tabular-nums;}
.book-reading-tools p{margin:2px 4px 1px;text-align:center;font:11px/1.4 var(--sans);color:#64634f;}
@media(max-width:600px){.book-reading-tools{bottom:max(12px,env(safe-area-inset-bottom));padding:6px;}.book-reading-row{gap:4px;}#reader-page-count{min-width:48px;}.book-reading-tools button{padding:7px 8px;}}
@media(max-height:500px){.book-reading-tools{bottom:8px;padding:4px 8px;}.book-reading-tools p{display:none;}}