:root{color-scheme:light;--red:#b31e2d;--ink:#202024;--line:#e7e7e9;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:white;font-size:16px}
*{box-sizing:border-box}body{margin:0;min-height:100vh;min-height:100dvh;display:grid;grid-template-rows:auto 1fr auto}button{font:inherit;font-size:.875rem;color:inherit;background:white;border:1px solid var(--line);border-radius:5px;padding:12px 18px;cursor:pointer;min-height:44px;touch-action:manipulation}button:hover:enabled{color:var(--red);border-color:var(--red)}button:disabled{opacity:.3;cursor:default}button:focus-visible,#detail-scroll:focus-visible{outline:3px solid var(--red);outline-offset:3px}header{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;gap:16px;border-top:4px solid var(--red)}h1{font-size:1rem;font-weight:600;margin:0;letter-spacing:.015em}h1 span{font-size:.875rem;font-weight:400;color:#666;display:inline-block;margin-left:20px}#zoom{color:var(--red)}main{min-height:0;display:grid;place-items:center;padding:10px 28px;position:relative}#stage{position:relative;perspective:1800px;width:100%;display:flex;align-items:center;justify-content:center;touch-action:pan-y;isolation:isolate}#page{display:block;width:100%;height:calc(100vh - 212px);height:calc(100dvh - 212px);object-fit:contain;user-select:none;background:white}#page-motion{position:absolute;pointer-events:none;perspective:1800px;z-index:2}#page-motion[hidden]{display:none}#turn{position:absolute;transform-style:preserve-3d;z-index:2;will-change:transform}.paper-crop,.paper-face{position:absolute;overflow:hidden;background:white}.paper-face{inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}.paper-back{transform:rotateY(180deg)}.paper-face img,.paper-crop img{position:absolute;max-width:none;user-select:none}.paper-face::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 2px 0 10px #0000000a}.paper-front{transform:translateZ(.1px)}footer{padding:14px 24px 18px}nav{display:flex;align-items:center;justify-content:center;gap:38px}nav button{min-width:132px}#position{min-width:76px;text-align:center;font-size:.875rem;font-variant-numeric:tabular-nums}#position strong{color:var(--red);font-weight:600}#position span{color:#777}.hint{text-align:center;color:#747478;font-size:.8125rem;margin:12px 0 0}#message{position:absolute;bottom:0;background:white;border:1px solid var(--line);padding:10px 16px;color:var(--red);font-size:.875rem}dialog{padding:0;border:0;width:100vw;max-width:none;height:100vh;height:100dvh;max-height:none;background:#f1f1f3}dialog::backdrop{background:#fff}.zoom-bar{height:70px;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 22px;background:white;border-bottom:1px solid var(--line);font-size:.875rem}.zoom-bar>div{display:flex;gap:8px;align-items:center}#scale{min-width:60px;text-align:center;font-variant-numeric:tabular-nums}#close{margin-left:10px;color:var(--red)}#detail-scroll{height:calc(100% - 70px);overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y pinch-zoom}#detail-image{display:block;max-width:none;margin:0 auto;background:white}body:has(dialog[open]){overflow:hidden}
@media(max-width:600px){header{padding:14px 16px}h1{font-size:.9375rem}h1 span{display:block;margin:5px 0 0;font-size:.8125rem}main{padding:4px}nav{gap:22px}nav button{min-width:62px;padding:12px}.label{display:none}footer{padding:12px 10px 18px}.hint{font-size:.75rem}#page{height:calc(100dvh - 207px)}.zoom-bar{padding:8px;gap:6px}.zoom-bar>span{max-width:82px}.zoom-bar button{padding:10px 12px}#close{margin-left:0}#scale{min-width:48px}}