.sheet{--top:31.05;--bottom:58;--strip-w:106.5;--pitch:102.5;--frame-top:208.6;--safe:env(safe-area-inset-bottom,0px);width:var(--sheet-w);height:100dvh;min-height:calc(560 * var(--u));background:var(--film);-webkit-user-select:none;user-select:none;margin:0 auto;position:relative;overflow:hidden}.topbar{height:calc(var(--top) * var(--u));background:var(--film);color:#f2f1ea;z-index:3;position:absolute;inset:0 0 auto}.back{left:calc(13.1 * var(--u));top:calc(8.7 * var(--u));height:calc(14.9 * var(--u));align-items:center;gap:calc(6 * var(--u));font-size:calc(12.9 * var(--u));letter-spacing:.005em;font-weight:500;display:flex;position:absolute}.back .arrow{width:calc(14.5 * var(--u));height:calc(14.5 * var(--u))}.meta{right:calc(10.9 * var(--u));top:calc(8.7 * var(--u));height:calc(14.9 * var(--u));font-size:calc(12.6 * var(--u));letter-spacing:.01em;align-items:center;margin:0;font-weight:500;display:flex;position:absolute}.arrow{display:block}.strip{right:0;top:calc(var(--top) * var(--u));bottom:calc(var(--bottom) * var(--u) + var(--safe));width:calc(var(--strip-w) * var(--u));background:var(--paper) url(/plates/paper.png) calc((var(--strip-w) - 390) * var(--u)) 0 / calc(137.5 * var(--u)) calc(102.6 * var(--u)) repeat;overscroll-behavior:contain;scrollbar-width:none;touch-action:pan-y;z-index:1;position:absolute;overflow:hidden auto}.strip::-webkit-scrollbar{display:none}.strip.dragging{cursor:grabbing}.film{width:100%;height:calc((var(--tail) + 80) * var(--u));--head:70;--tail:calc(200 + (var(--n) - 1) * var(--pitch) + 92 + 65);clip-path:polygon(0 calc((var(--head) + 1.2) * var(--u)), 100% calc((var(--head) - .8) * var(--u)), 100% calc((var(--tail) - 1) * var(--u)), 0 calc((var(--tail) + .6) * var(--u)));background-color:var(--film);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='75' height='170'%3E%3Crect width='75' height='74' rx='16' fill='%23f1efec'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='75' height='170'%3E%3Crect width='75' height='74' rx='16' fill='%23f1efec'/%3E%3C/svg%3E"),url(/plates/film-head.webp),url(/plates/film-tail.webp),url(/plates/film-base.webp);background-repeat:repeat-y,repeat-y,no-repeat,no-repeat,repeat-y;background-size:calc(7.5 * var(--u)) calc(102.5 / 6 * var(--u)), calc(7.5 * var(--u)) calc(102.5 / 6 * var(--u)), calc(106.5 * var(--u)) calc(190 * var(--u)), calc(106.5 * var(--u)) calc(95 * var(--u)), calc(106.5 * var(--u)) calc(410 * var(--u));background-position:calc(8 * var(--u)) calc(10.78 * var(--u)), calc(94 * var(--u)) calc(10.78 * var(--u)), 0 calc(var(--head) * var(--u)), 0 calc((var(--tail) - 95) * var(--u)), 0 0;position:relative}.frame{left:calc(22.3 * var(--u));top:calc((200 + (var(--i) - 1) * var(--pitch)) * var(--u));width:calc(68 * var(--u));height:calc(92 * var(--u));position:absolute;overflow:hidden}.frame img{object-fit:cover;width:100%;height:100%;display:block}.frame.locked img{filter:brightness(.42)contrast(.72)saturate(.45)sepia(.18)}.circle{z-index:1;left:calc(7.18 * var(--u));top:calc((200 + (var(--cur) - 1) * var(--pitch) - 11.75) * var(--u));width:calc(97.5 * var(--u));height:calc(106.22 * var(--u));pointer-events:none;display:block;position:absolute}@property --sweep{syntax:"<angle>";inherits:false;initial-value:360deg}.sheet[data-moved] .circle{-webkit-mask:conic-gradient(from 20deg, #000 var(--sweep), transparent 0);-webkit-mask:conic-gradient(from 20deg, #000 var(--sweep), transparent 0);mask:conic-gradient(from 20deg, #000 var(--sweep), transparent 0);animation:.48s cubic-bezier(.45,0,.25,1) .22s both circle-draw}@keyframes circle-draw{0%{--sweep:0deg}to{--sweep:360deg}}.edge{left:0;top:calc((200 + (var(--i) - 1) * var(--pitch) + 46) * var(--u));width:calc(8 * var(--u));writing-mode:vertical-rl;text-align:center;font-size:calc(8 * var(--u));line-height:calc(8 * var(--u));letter-spacing:.06em;font-feature-settings:"zero" 1;color:var(--amber);font-variant-numeric:tabular-nums;z-index:2;pointer-events:none;font-weight:500;position:absolute;transform:translateY(-50%)rotate(180deg)}.paper{left:0;right:calc(var(--strip-w) * var(--u));top:calc(var(--top) * var(--u));bottom:calc(var(--bottom) * var(--u) + var(--safe));padding:calc(22 * var(--u)) calc(14.9 * var(--u)) calc(24 * var(--u)) calc(18.2 * var(--u));background:var(--paper) url(/plates/paper.png) 0 0 / calc(137.5 * var(--u)) calc(102.6 * var(--u)) repeat;overscroll-behavior:contain;scrollbar-width:none;touch-action:pan-y;position:absolute;overflow-y:auto}.paper::-webkit-scrollbar{display:none}.line{max-width:calc(250 * var(--u));font-family:var(--font-speech);font-size:calc(var(--size) * var(--u));letter-spacing:0;text-wrap:pretty;color:var(--ink);-webkit-user-select:text;user-select:text;margin:0;font-weight:700;line-height:1.02}.print{--pb:5.6;--pw:239.2;--ph:316.95;margin:calc(12 * var(--u)) 0 0;width:calc((var(--pw) + 2 * var(--pb)) * var(--u));height:calc((var(--ph) + 2 * var(--pb)) * var(--u));background:var(--film);position:relative}.photo{left:calc(var(--pb) * var(--u));top:calc(var(--pb) * var(--u));width:calc(var(--pw) * var(--u));height:calc(var(--ph) * var(--u));object-fit:cover;display:block;position:absolute}.sheet[data-moved] .photo{animation:.36s ease-out both develop}@keyframes develop{0%{opacity:0;filter:brightness(1.25)contrast(.85)}to{opacity:1;filter:none}}.crop{left:calc((var(--pb) + var(--pw) * .0893) * var(--u));top:calc((var(--pb) + var(--ph) * var(--ct)) * var(--u));width:calc(var(--pw) * .8369 * var(--u));height:calc(var(--ph) * var(--ch) * var(--u));pointer-events:none;opacity:.9;position:absolute}.switch{left:calc((var(--pb) + var(--pw) / 2) * var(--u));bottom:calc(var(--pb) / 2 * var(--u));padding:calc(2.5 * var(--u));background:var(--film);white-space:nowrap;border-radius:999px;display:flex;position:absolute;transform:translate(-50%,50%)}.switch button{z-index:1;height:calc(24 * var(--u));padding:0 calc(9.5 * var(--u));font-size:calc(11.4 * var(--u));letter-spacing:.01em;color:#f2f1ea;border-radius:999px;font-weight:500;transition:color .2s;position:relative}.switch button:after{content:"";position:absolute;inset:-5px 0}.switch button.on{color:var(--ink)}.pill{top:calc(2.5 * var(--u));bottom:calc(2.5 * var(--u));width:calc(var(--w) * 1px);background:var(--button);transform:translateX(calc(var(--x) * 1px));border-radius:999px;transition:transform .28s cubic-bezier(.22,1,.36,1);position:absolute;left:0}.notes{margin:calc(14 * var(--u)) 0 0;max-width:calc(250.4 * var(--u));gap:calc(12 * var(--u));color:var(--ink);grid-template-columns:1fr 1fr;display:grid}.notes dt{font-size:calc(12.2 * var(--u));font-weight:700}.notes dd{margin:calc(2 * var(--u)) 0 0;font-size:calc(12.2 * var(--u));line-height:1.22}.more{margin:calc(28 * var(--u)) 0 0;padding-top:calc(14 * var(--u));max-width:calc(250.4 * var(--u));gap:calc(12 * var(--u));border-top:1px solid #1111102e;display:grid}.more dt{font-size:calc(12.4 * var(--u));color:var(--ink);font-weight:700}.more dd{margin:calc(2 * var(--u)) 0 0;font-size:calc(13.4 * var(--u));color:var(--ink-soft);line-height:1.3}.more-toggle{color:var(--ink);text-decoration:underline;-webkit-text-decoration-color:var(--pencil);text-decoration-color:var(--pencil);text-underline-offset:4px;min-height:32px;font-weight:700;text-decoration-thickness:2px}.more dd.more-line{font-family:var(--font-speech);font-weight:700;font-size:calc(16 * var(--u));color:var(--ink);line-height:1.2}.bottombar{height:calc(var(--bottom) * var(--u) + var(--safe));padding:0 calc(10.6 * var(--u)) var(--safe);align-items:center;gap:calc(14 * var(--u));background:var(--film-2);color:#f2f1ea;z-index:3;grid-template-columns:auto 1fr auto;display:grid;position:absolute;inset:auto 0 0}.nav{width:calc(37.2 * var(--u));height:calc(37.2 * var(--u));border-radius:50%;place-items:center;display:grid;position:relative}.nav:after{content:"";border-radius:50%;position:absolute;inset:-6px}.nav .arrow{width:calc(19 * var(--u));height:calc(19 * var(--u))}.next{background:var(--button);color:var(--film)}.prev{color:#f2f1ea;box-shadow:inset 0 0 0 1.5px #f2f1ea8c}.nav:disabled{opacity:.28;cursor:default}.nav:active:not(:disabled){transform:scale(.94)}.progress{align-items:flex-end;gap:calc(2.5 * var(--u));height:calc(12 * var(--u));display:flex}.seg{height:calc(5 * var(--u));background:#383733;border-radius:1px;flex:1;transition:background .3s}.seg.done{background:#f1cf2680}.seg.now{background:var(--amber);height:calc(12 * var(--u))}@media (prefers-reduced-motion:reduce){.pill{transition:none}.sheet[data-moved] .circle,.sheet[data-moved] .photo{animation:none;-webkit-mask:none;mask:none}}
