:root{
  color-scheme: light;
  --bg:#eee9df;
  --paper:#fff;
  --ink:#332f2a;
  --muted:#766f66;
  --line:rgba(66,54,41,.16);
  --shadow:0 18px 60px rgba(45,35,25,.18);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",system-ui,sans-serif}
body{min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;user-select:none;-webkit-user-select:none}
.topbar{height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.68);backdrop-filter:blur(12px)}
.brand{display:flex;gap:10px;align-items:baseline}.title{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:20px;font-weight:700;letter-spacing:.08em}.subtitle{font-size:12px;color:var(--muted);letter-spacing:.12em}
.ghost{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 14px;color:var(--ink);cursor:pointer}
.viewer{min-height:0;display:grid;grid-template-columns:58px minmax(0,1fr) 58px;align-items:center;gap:8px;padding:12px 8px}
.book-stage{height:100%;min-height:0;display:grid;place-items:center;position:relative;touch-action:pan-y}
.page-shell{height:100%;max-height:calc(100svh - 150px);aspect-ratio:1/1.4142;max-width:100%;background:var(--paper);box-shadow:var(--shadow);position:relative;overflow:hidden;border-radius:2px}
.page-shell img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;-webkit-user-drag:none}
.protect-layer{position:absolute;inset:0;background:transparent;z-index:2}
.nav{width:48px;height:70px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.84);font-size:42px;font-weight:200;line-height:1;color:var(--ink);cursor:pointer;box-shadow:0 8px 24px rgba(45,35,25,.08)}
.nav:disabled{opacity:.25;cursor:default}.nav:not(:disabled):active{transform:translateY(1px)}
.loading{position:absolute;inset:auto 50% 20px auto;transform:translateX(50%);background:rgba(0,0,0,.68);color:#fff;padding:8px 12px;border-radius:999px;font-size:12px}
.controls{min-height:76px;padding:10px 18px 12px;border-top:1px solid var(--line);background:rgba(255,255,255,.72);backdrop-filter:blur(12px);display:grid;grid-template-columns:auto minmax(120px,560px) 1fr;align-items:center;gap:14px}
.counter{font-variant-numeric:tabular-nums;white-space:nowrap}.slider{width:100%;accent-color:#5d554b}.notice{text-align:right;color:var(--muted);font-size:11px;letter-spacing:.03em}
.page-shell.turn-next{animation:turnNext .22s ease-out}.page-shell.turn-prev{animation:turnPrev .22s ease-out}
@keyframes turnNext{from{opacity:.45;transform:translateX(18px) scale(.992)}to{opacity:1;transform:none}}
@keyframes turnPrev{from{opacity:.45;transform:translateX(-18px) scale(.992)}to{opacity:1;transform:none}}
@media (max-width:680px){
  .topbar{height:54px;padding:0 12px}.title{font-size:18px}.subtitle{display:none}.ghost{padding:7px 11px;font-size:12px}
  .viewer{grid-template-columns:42px minmax(0,1fr) 42px;gap:2px;padding:8px 2px}.nav{width:38px;height:58px;border-radius:14px;font-size:34px}
  .page-shell{max-height:calc(100svh - 132px)}
  .controls{min-height:70px;padding:8px 12px 10px;grid-template-columns:auto 1fr}.notice{grid-column:1/-1;text-align:center;font-size:10px}
}
@media (orientation:landscape) and (max-height:560px){.topbar{height:46px}.controls{min-height:52px}.notice{display:none}.page-shell{max-height:calc(100svh - 112px)}}
@media print{body{display:none!important}}