:root{
  --canvas:#ede9e1;
  --canvas-2:#e4ded3;
  --ink:#39352f;
  --muted:#8a8277;
  --gold:#a78c58;
  --paper:#fff;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;min-width:320px;background:var(--canvas);color:var(--ink);overflow:hidden;overscroll-behavior:none}
html{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
body{min-height:100%;height:100vh;height:100dvh;overflow:hidden}
button{font:inherit}
.reader{touch-action:none}\n.scene,.book-viewport,.book{touch-action:none}
.reader{
  position:fixed;inset:0;
  width:100vw;
  height:100vh;
  height:100dvh;
  min-height:0;
  overflow:hidden;
  background:
    radial-gradient(900px 480px at 50% 49%,rgba(255,255,255,.72),transparent 70%),
    linear-gradient(180deg,#f2efe8 0%,var(--canvas) 56%,var(--canvas-2) 100%);
}
.reader::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.20;
  background:repeating-linear-gradient(0deg,rgba(72,62,48,.025) 0 1px,transparent 1px 4px);
}
.chrome{
  position:absolute;z-index:40;left:0;right:0;top:0;
  min-height:62px;padding:14px clamp(16px,2.4vw,42px) 8px;
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  pointer-events:none;
  transition:opacity .22s ease;
}
.identity{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;line-height:1}
.eyebrow{font-size:9px;letter-spacing:.28em;color:#a0988d}
.identity strong{font-family:Georgia,"Times New Roman",serif;font-size:17px;font-weight:400;color:#544a3e;letter-spacing:.01em}
.years,.page-status{font-size:10px;letter-spacing:.10em;color:#9b9389}
.page-status{padding-top:3px;text-transform:uppercase}
.scene{
  position:relative;z-index:2;
  width:100%;height:100vh;height:100dvh;
  display:flex;align-items:center;justify-content:center;
  padding:4px;
  perspective:2600px;
}
.book-viewport{
  position:relative;
  width:min(99.2vw,calc(200vh - 12px));
  width:min(99.2vw,calc(200dvh - 12px));
  max-width:none;
  display:flex;align-items:center;justify-content:center;
  min-width:0;
  transform-origin:center center;
  transform:translate3d(0,0,0) scale(1);
  will-change:transform;
  transition:transform .16s ease-out;
}
.book-viewport.zooming{transition:none!important}
.reader.zoomed .book{cursor:move}
.book{
  position:relative;z-index:5;
  width:100%;
  outline:none;
  cursor:grab;
  filter:drop-shadow(0 22px 18px rgba(54,45,33,.16)) drop-shadow(0 5px 5px rgba(54,45,33,.13));
}
.book:active{cursor:grabbing}
.book:focus-visible{outline:2px solid rgba(167,140,88,.75);outline-offset:5px}
.page{background:var(--paper);overflow:hidden}
.page>img{
  display:block;width:100%;height:100%;object-fit:cover;
  pointer-events:none;user-select:none;-webkit-user-drag:none;
}
/* Keep the engine's own fold geometry untouched. Only static page edges get a hairline. */
.stf__item.--simple{box-shadow:inset 0 0 0 1px rgba(80,68,52,.045)}
.stf__block{perspective:2400px!important}
.table-shadow{
  position:absolute;z-index:0;left:50%;top:73%;transform:translate(-50%,-50%);
  width:min(86vw,1500px);height:12%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(76,62,44,.24) 0%,rgba(76,62,44,.12) 38%,transparent 74%);
  filter:blur(22px);
}
.hint{
  position:absolute;z-index:20;right:clamp(18px,3vw,48px);bottom:75px;
  display:flex;align-items:center;gap:9px;
  color:rgba(84,75,65,.60);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  pointer-events:none;transition:opacity .35s ease,transform .35s ease;
}
.hint.hide{opacity:0;transform:translateY(5px)}
.corner-mark{width:18px;height:18px;border-right:1px solid rgba(167,140,88,.75);border-bottom:1px solid rgba(167,140,88,.75);border-radius:0 0 3px 0}
.controls{
  position:absolute;z-index:45;left:50%;bottom:max(8px,env(safe-area-inset-bottom));transform:translateX(-50%);
  display:flex;align-items:center;gap:7px;
}
.nav,.sound{
  border:1px solid rgba(77,65,49,.13);background:rgba(249,247,242,.82);color:#6f665c;
  min-height:42px;border-radius:999px;cursor:pointer;
  box-shadow:0 3px 14px rgba(83,70,52,.08);
  backdrop-filter:blur(10px);
  touch-action:manipulation;
}
.nav{width:42px;padding:0;font-family:Georgia,"Times New Roman",serif;font-size:25px;line-height:1}
.fullscreen{font-family:inherit;font-size:18px;font-weight:400}
.sound{padding:0 14px;font-size:10px;letter-spacing:.04em;min-width:86px}
.nav:disabled{opacity:.28;cursor:default}
.nav:focus-visible,.sound:focus-visible{outline:2px solid rgba(167,140,88,.70);outline-offset:2px}
.load-status{position:absolute;z-index:44;left:50%;bottom:58px;transform:translateX(-50%);margin:0;font-size:10px;color:#9b9389;transition:opacity .25s ease;white-space:nowrap}
.load-status.ready{opacity:0;pointer-events:none}

/* On browsers that cannot expose a true Fullscreen API, the button still enters a clean immersive reader mode. */
.reader.immersive-fallback .chrome,
.reader.immersive-fallback .hint,
.reader.immersive-fallback .load-status{opacity:0;pointer-events:none}
.reader:fullscreen,
.reader:-webkit-full-screen{width:100vw;height:100vh;max-width:none;max-height:none}

@media (hover:hover) and (pointer:fine){
  .nav:not(:disabled):hover,.sound:hover{background:#fff;color:#4f473e}
}
@media (max-width:760px){
  .chrome{min-height:48px;padding:10px 12px 6px;align-items:center}
  .eyebrow,.years{display:none}
  .identity strong{font-size:14px}
  .scene{padding:2px}
  .book-viewport{width:min(99vw,calc(200vh - 8px));width:min(99vw,calc(200dvh - 8px))}
  .controls{bottom:max(6px,env(safe-area-inset-bottom))}
  .nav{width:38px;min-height:38px}
  .sound{min-height:38px;padding:0 12px;min-width:80px}
  .hint{right:12px;bottom:60px;font-size:9px}
  .table-shadow{top:71%;width:92vw}
}
@media (max-height:650px) and (min-width:761px){
  .chrome{padding-top:7px}
  .controls{bottom:5px}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.001ms!important;animation-duration:.001ms!important}
}