:root{--paper:#e7e7e3;--mobile-sheet-paper:#e7e7e3;color:#26251f;background:var(--paper);font-family:system-ui,sans-serif;color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0;overflow:hidden;overscroll-behavior:none}
#app,.work-layout{position:fixed;inset:0;touch-action:none;overflow:hidden;background:var(--paper)}
.work-layout img{display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max(104vw,calc(104vh * var(--ratio,1)));width:max(104vw,calc(104dvh * var(--ratio,1)));max-width:none;height:auto;pointer-events:none;user-select:none}
.paper-turn{position:fixed;inset:0;z-index:55;overflow:hidden;pointer-events:none;isolation:isolate;background:var(--paper)}
.paper-under{position:absolute;inset:0;z-index:0;isolation:isolate;background:var(--paper);overflow:hidden;pointer-events:none}
.paper-turn>canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block}
button,select{font:inherit}
#lotus{position:fixed;z-index:60;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:#fff9;cursor:pointer}
.reader-lotus{width:26px;height:21px}
dialog{position:fixed;inset:auto 0 0;margin:0 auto;width:min(100%,36rem);max-width:none;max-height:85vh;border:0;border-radius:18px 18px 0 0;padding:1.5rem 1.5rem max(1.5rem,env(safe-area-inset-bottom));background:#fbf8f1;color:inherit}
dialog[open]{animation:slide-up .25s ease-out}
@keyframes slide-up{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){dialog[open]{animation:none}}
dialog::backdrop{background:#17151088}
.close{float:right;background:none;border:0;font-size:1.6rem;cursor:pointer}
ul{padding-left:1.4rem;line-height:2.2}

.work-layout{display:flex;flex-direction:column;align-items:center}
.identity{width:min(91vw,920px);flex:none;padding:clamp(10px,2vh,20px) 52px 0 0}
.number{font:500 11px system-ui,sans-serif;letter-spacing:.08em;color:#555d5c}
.identity h1{margin:4px 0 0;font:430 clamp(19px,4.5vw,27px)/1.35 var(--reader-serif,"OM Editorial Latin",serif);overflow-wrap:anywhere}
.reader-ko .identity h1{word-break:keep-all}
.work-layout img{position:static;transform:none;flex:none;width:min(91vw,calc((100vh - 90px) / 1.065),920px);height:auto;margin:clamp(12px,2.2vh,24px) auto 0;clip-path:inset(0 0 20.125% 0)}
#lotus{width:38px;height:38px}
.reader-lotus{width:23px;height:19px}