:root{
  --paper:#FAF9F4; --pencil:#6E6A64; --ink:#1A1A1A; --desk:#D9D4CA;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --desk:#2A2824; } }
:root[data-theme="dark"]{ --desk:#2A2824; }
html{scroll-padding-top:env(safe-area-inset-top,0px);background:var(--desk)}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;min-height:100%;background:var(--desk);font-family:"Kiwi Maru","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;color:var(--pencil);-webkit-tap-highlight-color:transparent}
.book{position:relative;max-width:520px;margin:0 auto;min-height:100vh;background:var(--paper);transition:background 3s;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.book::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 30%,transparent 30%,rgba(40,44,70,var(--shade,0)) 100%)}
.rings{display:flex;justify-content:space-around;padding:0 18px;height:26px}
.rings i{width:10px;height:30px;margin-top:-12px;border:2.5px solid #8C8A86;border-radius:6px}
.scene{position:relative;aspect-ratio:1/1;max-height:70vh;width:100%;overflow:hidden}
.room{position:absolute;inset:0;width:100%;height:100%}
.ghost{position:absolute;bottom:12%;width:36%;left:32%;transition:left var(--walk,4s) ease-in-out;cursor:pointer;touch-action:manipulation;z-index:2}
.ghost .bob{animation:bob 3.2s ease-in-out infinite}
.ghost.slow .bob{animation-duration:6s}
.ghost.still .bob{animation:none}
.ghost svg{display:block;width:100%;height:auto;overflow:visible}
.ghost .flip{transition:transform .4s}
.ghost.right .flip{transform:scaleX(-1)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6%)}}
.note{position:absolute;font-size:.9rem;line-height:1.4;max-width:62%;pointer-events:none;transition:opacity 2s;z-index:1}
.note time{display:block;font-size:.72rem;opacity:.8}
.pages{padding:6px 26px 40px}
.pagehead{display:flex;align-items:center;justify-content:space-between;border-bottom:1.5px solid rgba(110,106,100,.35);padding-bottom:6px}
.pagehead h1,.pages h2{font-size:1.05rem;font-weight:500;margin:0;color:#4A4640}
.pages h2{margin:30px 0 6px;padding-bottom:6px;border-bottom:1.5px solid rgba(110,106,100,.35)}
.pagehead button{background:none;border:none;font:inherit;font-size:1.4rem;color:var(--pencil);padding:4px 12px;cursor:pointer}
.pagehead button:disabled{opacity:.2;cursor:default}
button:focus-visible{outline:2px solid var(--pencil);border-radius:6px}
.lines{margin:0;padding:0;list-style:none}
.lines li{display:flex;gap:14px;padding:7px 0;border-bottom:1px dashed rgba(110,106,100,.25);font-size:.95rem}
.lines time{min-width:3em;font-variant-numeric:tabular-nums;opacity:.75}
.lines .away{opacity:.6}
.blank{padding:18px 0;opacity:.7}
.treasures{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px;margin-top:10px}
.treasure{text-align:center;font-size:.8rem;line-height:1.4}
.treasure svg{width:40px;height:40px;display:block;margin:0 auto 2px}
.treasure small{display:block;opacity:.7;font-size:.7rem}
.foot{margin-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:.8rem;opacity:.75}
.foot label{display:flex;align-items:center;gap:6px}
.foot input{font:inherit;font-size:.8rem;color:inherit;background:transparent;border:none;border-bottom:1px dashed currentColor;padding:2px 0}
.foot button{background:none;border:none;font:inherit;color:inherit;text-decoration:underline;cursor:pointer;padding:0}
@media (prefers-reduced-motion: reduce){.ghost .bob{animation:none}.ghost{transition:none}}