.comic-reader{--ink: #244744;--paper: #fff9e9;--paper-light: #fffdf5;--teal: #2e7772;--orange: #dd7455;--ending: 0;position:relative;height:330svh;color:var(--ink);background:#dceee8;isolation:isolate}.comic-reader:before{position:absolute;inset:0;z-index:-1;content:"";opacity:.72;background:radial-gradient(circle at 50% 18%,rgb(255 250 224 / 94%),transparent 36%),radial-gradient(circle at 12% 62%,rgb(102 191 184 / 16%),transparent 28%),repeating-linear-gradient(89deg,transparent 0 5px,rgb(35 93 88 / 2.2%) 6px 7px),#dceee8}.comic-stage{position:sticky;top:0;display:grid;width:100%;height:100svh;place-items:center;overflow:hidden;perspective:2100px}.comic-stage-light{position:absolute;inset:-15%;pointer-events:none;background:radial-gradient(ellipse at center,rgb(255 251 229 / 92%),transparent 55%)}.comic-book{position:relative;width:min(88vw,110.08svh,1120px);aspect-ratio:1.28;opacity:calc(1 - var(--ending));transform:translateY(calc(var(--ending) * -3vh)) translateZ(0) rotateX(.8deg) scale(calc(1 - var(--ending) * .04));transform-style:preserve-3d;transition:opacity .12s linear}.comic-book:after{position:absolute;right:1.5%;bottom:-2.4%;left:1.5%;z-index:-2;height:5%;content:"";filter:blur(18px);background:#2f5e583d;border-radius:50%}.comic-page{--turn: 0;--page-shade: 0;position:absolute;inset:0;transform-origin:0 50%;transform:rotateY(calc(var(--turn) * -179deg));transform-style:preserve-3d;will-change:transform}.comic-page-face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;background:var(--paper);border-radius:2px 7px 7px 2px;box-shadow:0 2px 1px #ffffffbf inset,-2px 0 #465b4a1f inset,9px 13px 34px #2b534c38}.comic-page-front:after{position:absolute;inset:0;z-index:20;content:"";pointer-events:none;opacity:calc(var(--page-shade) * .86);background:linear-gradient(90deg,rgb(34 75 70 / 48%),transparent 48%)}.comic-page-back{display:grid;place-items:center;transform:rotateY(180deg);color:#24474457;font:600 .66rem/1.2 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.2em;background:linear-gradient(90deg,rgb(38 91 84 / 10%),transparent 7%),repeating-linear-gradient(0deg,transparent 0 7px,rgb(59 84 72 / 2%) 8px 9px),var(--paper)}.comic-page-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1.42fr) minmax(0,1fr);gap:clamp(5px,.55vw,9px);height:100%;padding:clamp(8px,.9vw,15px);padding-bottom:clamp(14px,1.3vw,21px)}.comic-page-grid--2{grid-template-rows:minmax(0,1fr) minmax(0,1.42fr)}.comic-page-grid--3{grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr))}.comic-page-grid--4{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,.9fr) minmax(0,1.15fr) minmax(0,.9fr)}.comic-page-grid--5{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}.comic-panel{position:relative;min-width:0;min-height:0;margin:0;overflow:hidden;color:var(--ink);background:#e7f2e9;border:clamp(2px,.25vw,4px) solid var(--ink);box-shadow:0 0 0 1px #ffffff85 inset}.comic-panel--hero{grid-column:1 / -1}.comic-page-grid--2 .comic-panel--06{grid-row:2}.comic-panel>img{width:100%;height:100%;object-fit:cover;display:block}.comic-panel--01>img,.comic-panel--05>img,.comic-panel--06>img,.comic-panel--07>img,.comic-panel--08>img,.comic-panel--09>img,.comic-panel--10>img,.comic-panel--11>img,.comic-panel--12>img{object-position:center}.comic-panel--09>img,.comic-panel--11>img{object-position:center 30%}.comic-panel-shade{position:absolute;inset:0;pointer-events:none;box-shadow:0 0 22px #2d5f5814 inset}.comic-panel-number{position:absolute;right:.35rem;bottom:.25rem;z-index:3;color:#234642a3;font:700 clamp(.42rem,.52vw,.62rem)/1 system-ui,sans-serif;letter-spacing:.08em;text-shadow:0 1px 2px rgb(255 255 255 / 70%)}.comic-title{position:absolute;top:6%;left:3.4%;z-index:3;width:39%;color:#245b57;text-shadow:0 1px 0 rgb(255 255 255 / 75%)}.comic-title span{display:block;margin-bottom:.35em;color:#e38758;font:750 clamp(.42rem,.62vw,.72rem)/1.2 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.18em}.comic-title h1{max-width:7em;margin:0;font-family:Georgia,Times New Roman,serif;font-size:clamp(1.5rem,3.15vw,3.45rem);font-weight:400;line-height:.88;letter-spacing:-.055em}.comic-caption{position:absolute;z-index:4;padding:.72em .9em .76em 1.15em;color:#315651;font:560 clamp(.54rem,.76vw,.86rem)/1.34 system-ui,sans-serif;background:#fffcedf0;clip-path:polygon(1.5% 5%,98.5% 0,100% 92%,2.5% 100%)}.comic-caption:before{position:absolute;top:17%;bottom:17%;left:.55em;width:.18em;content:"";background:var(--orange);border-radius:999px}.comic-caption--01{right:2.5%;bottom:4%;width:38%}.comic-caption--02{top:3%;right:2.5%;width:50%}.comic-caption--05{right:2.5%;bottom:3%;width:48%}.comic-caption--06{right:2.5%;bottom:3%;width:52%}.comic-caption--07{top:4%;left:2.5%;width:38%}.comic-caption--08{bottom:4%;left:2.5%;width:42%}.comic-caption--05,.comic-caption--06,.comic-caption--07,.comic-caption--08{text-wrap:pretty}.comic-balloon{--tail-length: clamp(2.2rem, 5vw, 5rem);--tail-angle: 90deg;--tail-left: 50%;--tail-top: 100%;position:absolute;z-index:5;box-sizing:border-box;display:grid;gap:.22em;min-width:0;padding:.7em .85em .78em;color:#294d49;font:560 clamp(.54rem,.76vw,.86rem)/1.3 system-ui,sans-serif;text-align:left;text-wrap:pretty;overflow-wrap:break-word;-webkit-hyphens:none;hyphens:none;background:#fffdf3f5;border:clamp(1px,.11vw,1.5px) solid rgb(46 119 114 / 74%);border-radius:1.2em 1.55em 1.3em 1.7em/1.45em 1.15em 1.6em 1.2em;box-shadow:0 1px #ffffffd1 inset,.14em .16em #2e777217}.comic-balloon>span{min-width:0;max-width:100%}.comic-balloon>span:last-of-type{display:block}.comic-speaker{color:var(--orange);font-size:.7em;font-weight:800;line-height:1;text-transform:uppercase;letter-spacing:.12em}.comic-balloon>i{position:absolute;top:var(--tail-top);left:var(--tail-left);z-index:-1;width:var(--tail-length);height:1px;background:#2e7772d1;transform:rotate(var(--tail-angle));transform-origin:0 50%}.comic-balloon>i:after{position:absolute;top:-2px;right:-2px;width:5px;height:5px;content:"";background:var(--paper-light);border:1px solid rgb(46 119 114 / 82%);border-radius:50%}.comic-balloon--01{--tail-length: clamp(3rem, 8vw, 7rem);--tail-angle: 132deg;--tail-left: 35%;top:7%;right:3%;width:20%}.comic-balloon--03a{--tail-length: clamp(3.5rem, 6.5vw, 6rem);--tail-angle: 31deg;--tail-left: 90%;top:3%;left:2.5%;width:44%}.comic-balloon--03b{--tail-length: clamp(2.4rem, 3.4vw, 3.2rem);--tail-angle: 101deg;--tail-left: 22%;top:3%;right:2.2%;width:45%}.comic-balloon--04a{--tail-length: clamp(2.6rem, 4.3vw, 3.7rem);--tail-angle: 143deg;--tail-left: 12%;top:4%;right:3%;width:35%}.comic-balloon--04b{--tail-length: clamp(3.8rem, 7vw, 5.8rem);--tail-angle: -58deg;--tail-left: 88%;--tail-top: 4%;bottom:4%;left:3%;width:32%}.comic-balloon--05a{--tail-length: clamp(3.5rem, 5.8vw, 5rem);--tail-angle: 52deg;--tail-left: 90%;top:3%;left:2%;width:52%}.comic-balloon--05b{--tail-length: clamp(4.4rem, 7.5vw, 6.3rem);--tail-angle: 141deg;--tail-left: 4%;top:3%;right:2%;width:43%}.comic-balloon--08a{--tail-length: clamp(5rem, 9.5vw, 8rem);--tail-angle: 47deg;--tail-left: 90%;top:4%;left:45%;width:13%}.comic-balloon--08b{--tail-length: clamp(10rem, 20vw, 17rem);--tail-angle: 163deg;--tail-left: 2%;top:4%;right:4%;width:25%}.comic-balloon--08c{--tail-length: clamp(5rem, 10vw, 8rem);--tail-angle: 233deg;--tail-left: 2%;--tail-top: 18%;right:3%;bottom:4%;width:20%}.comic-balloon--09{--tail-length: clamp(2.2rem, 3.4vw, 3.2rem);--tail-angle: 24deg;--tail-left: 72%;top:3%;left:3%;width:43%}.comic-balloon--10{--tail-length: clamp(6rem, 12.5vw, 11rem);--tail-angle: 175deg;--tail-left: 5%;top:3%;right:3%;width:45%}.comic-balloon--12a{--tail-length: clamp(10rem, 20.5vw, 18rem);--tail-angle: 122deg;--tail-left: 4%;top:4%;right:3%;width:48%}.comic-balloon--12b{--tail-length: clamp(3.4rem, 6.2vw, 5.2rem);--tail-angle: 34deg;--tail-left: 92%;--tail-top: 54%;top:39%;left:4%;width:14%}.comic-balloon--12c{--tail-length: clamp(7rem, 14vw, 12rem);--tail-angle: 241deg;--tail-left: 2%;--tail-top: 18%;bottom:18%;left:44%;width:18%}.comic-page-folio{position:absolute;right:1.2%;bottom:.45%;z-index:5;color:#244744b8;font:700 clamp(.44rem,.52vw,.62rem)/1 system-ui,sans-serif}.comic-reader-ui{position:absolute;right:clamp(18px,3vw,48px);bottom:clamp(18px,3.2vh,36px);display:grid;width:clamp(120px,13vw,190px);gap:.55rem;color:#244744c2;font:700 .61rem/1 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.14em;opacity:calc(1 - var(--ending))}.comic-reader-ui>i{height:2px;overflow:hidden;background:#24474429}.comic-reader-ui b{display:block;height:100%;background:var(--orange);transition:width .42s ease}.comic-scroll-hint{position:absolute;bottom:clamp(18px,3.2vh,36px);left:clamp(18px,3vw,48px);display:flex;align-items:center;gap:.8rem;color:#244744ad;font:700 .57rem/1 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.15em;opacity:calc(1 - var(--ending))}.comic-scroll-hint i{position:relative;width:34px;height:1px;overflow:hidden;background:#2447442e}.comic-scroll-hint i:after{position:absolute;top:0;left:-100%;width:100%;height:100%;content:"";background:var(--orange);animation:comic-hint 2s ease-in-out infinite}.comic-ending{position:absolute;right:0;bottom:0;left:0;display:grid;height:80svh;padding-top:20svh;place-content:center;color:#245b57;text-align:center;opacity:var(--ending);pointer-events:none}.comic-ending span{color:var(--orange);font:750 .68rem/1 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.26em}.comic-ending p{max-width:13em;margin:1.2rem 0 0;font:400 clamp(2rem,4.4vw,4.8rem)/.98 Georgia,serif}@keyframes comic-hint{0%,10%{transform:translate(0)}75%,to{transform:translate(210%)}}@media(max-width:760px){.comic-reader{height:540svh}.comic-book{width:min(96vw,94.72svh)}.comic-scroll-hint,.comic-reader-ui{top:74svh;bottom:auto}.comic-balloon,.comic-caption,.comic-date{font-size:clamp(.38rem,1.55vw,.58rem)}.comic-title h1{font-size:clamp(1rem,5vw,1.6rem)}}@media(prefers-reduced-motion:reduce){.comic-page{transition:none}.comic-scroll-hint i:after{animation:none}}@media(max-width:900px){html,body{overflow-x:clip}.comic-reader{height:330svh;min-height:0;padding:0;overflow:visible}.comic-stage{position:sticky;top:0;display:grid;width:100%;height:100svh;min-height:0;padding:4.35rem .55rem 4.1rem;overflow:hidden;place-items:center;perspective:1550px}.comic-stage-light{position:absolute;inset:-15%;z-index:auto;opacity:1}.comic-book{position:relative;display:block;width:min(94vw,calc((100svh - 8.45rem)*.707),34rem);aspect-ratio:.707 / 1;margin:0;gap:0;opacity:calc(1 - var(--ending));transform:translateY(calc(var(--ending) * -3vh)) translateZ(0) rotateX(.8deg) scale(calc(1 - var(--ending) * .04));transform-style:preserve-3d;transition:opacity .12s linear}.comic-book:after{display:block}.comic-page{position:absolute;inset:0;z-index:auto;width:100%;aspect-ratio:auto;transform:rotateY(calc(var(--turn) * -179deg));transform-style:preserve-3d;will-change:transform}.comic-page-face{position:absolute;inset:0;width:auto;height:auto;overflow:hidden;border-radius:2px 6px 6px 2px;box-shadow:0 1px #ffffffd9 inset,0 0 0 1px #2d554d12,5px 9px 24px #2b534c2e;backface-visibility:hidden}.comic-page-front:after{display:block}.comic-page-back{display:grid}.comic-page-grid,.comic-page-grid--2,.comic-page-grid--3,.comic-page-grid--4,.comic-page-grid--5{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(3px,1vw,6px);height:100%;padding:clamp(5px,1.5vw,8px);padding-bottom:clamp(10px,2.8vw,15px)}.comic-page-grid{grid-template-rows:minmax(0,1.36fr) minmax(0,.78fr) minmax(0,.9fr)}.comic-page-grid--2{grid-template-rows:minmax(0,.95fr) minmax(0,1.08fr) minmax(0,.92fr)}.comic-page-grid--3{grid-template-rows:repeat(2,minmax(0,1fr))}.comic-page-grid--4{grid-template-rows:minmax(0,.92fr) minmax(0,1.08fr) minmax(0,.92fr)}.comic-page-grid--5{grid-template-rows:minmax(0,1fr)}.comic-panel,.comic-panel--hero,.comic-page-grid--2 .comic-panel--06{grid-column:1;grid-row:auto}.comic-panel{border-width:clamp(1.5px,.55vw,3px)}.comic-panel>img{object-position:center}.comic-panel--09>img,.comic-panel--11>img{object-position:center 30%}.comic-panel--12>img{object-fit:cover;object-position:40% center;background:#f9edd1}.comic-title{top:5%;left:3.5%;width:44%}.comic-title span{font-size:clamp(.38rem,1.55vw,.58rem)}.comic-title h1{font-size:clamp(1.18rem,5.7vw,1.95rem)}.comic-balloon,.comic-caption,.comic-date{font-size:clamp(.46rem,1.98vw,.65rem)}.comic-balloon{gap:.14em;padding:.46em .6em .52em;border-width:1px;box-shadow:0 1px #ffffffc7 inset}.comic-caption{padding:.5em .62em .55em .9em}.comic-caption:before{left:.38em}.comic-caption--01{right:2.5%;bottom:3%;width:43%}.comic-caption--02{top:4%;right:2.5%;width:44%}.comic-caption--05{right:2.5%;bottom:3%;width:47%}.comic-caption--06{right:2.5%;bottom:3%;width:49%}.comic-caption--07{top:3%;left:2.5%;width:39%}.comic-caption--08{bottom:3%;left:2.5%;width:40%}.comic-balloon--01{--tail-length: clamp(4rem, 18vw, 6rem);--tail-angle: 105deg;--tail-left: 55%;top:4%;right:2.5%;width:22%}.comic-balloon--03a{--tail-length: clamp(2.8rem, 14vw, 4.5rem);--tail-angle: 18deg;--tail-left: 95%;top:3%;left:2.5%;width:42%}.comic-balloon--03b{--tail-length: clamp(1.5rem, 7vw, 2.4rem);--tail-angle: 140deg;--tail-left: 20%;top:3%;right:2.5%;width:42%}.comic-balloon--04a{--tail-length: clamp(2rem, 9vw, 3rem);--tail-angle: 135deg;--tail-left: 15%;top:3%;right:2.5%;width:34%}.comic-balloon--04b{--tail-length: clamp(2.2rem, 10vw, 3.4rem);--tail-angle: -25deg;--tail-left: 88%;--tail-top: 5%;bottom:3%;left:2.5%;width:31%}.comic-balloon--05a{--tail-length: clamp(3.4rem, 15vw, 5.2rem);--tail-angle: 37deg;--tail-left: 90%;top:3%;left:2%;width:49%}.comic-balloon--05b{--tail-length: clamp(5rem, 24vw, 8rem);--tail-angle: 145deg;--tail-left: 4%;top:3%;right:2%;width:40%}.comic-balloon--08a{--tail-length: clamp(5.5rem, 25vw, 8rem);--tail-angle: 52deg;--tail-left: 88%;top:3%;left:47%;width:14%}.comic-balloon--08b{--tail-length: clamp(7rem, 32vw, 10.5rem);--tail-angle: 150deg;--tail-left: 2%;top:3%;right:3%;width:25%}.comic-balloon--08c{--tail-length: clamp(4rem, 18vw, 6.2rem);--tail-angle: 248deg;--tail-left: 5%;--tail-top: 18%;right:3%;bottom:3%;width:21%}.comic-balloon--09{--tail-length: clamp(1.7rem, 7vw, 2.4rem);--tail-angle: 52deg;--tail-left: 62%;top:3%;left:2.5%;width:44%}.comic-balloon--10{--tail-length: clamp(3.6rem, 17vw, 5.5rem);--tail-angle: 160deg;--tail-left: 4%;top:3%;right:2.5%;width:46%}.comic-balloon--12a{--tail-length: clamp(10rem, 48vw, 16rem);--tail-angle: 94deg;--tail-left: 5%;top:4%;right:3%;width:52%}.comic-balloon--12b{--tail-length: clamp(6rem, 29vw, 9.5rem);--tail-angle: 100deg;--tail-left: 84%;--tail-top: 60%;top:27%;left:4%;width:20%}.comic-balloon--12c{--tail-length: clamp(9rem, 45vw, 14.5rem);--tail-angle: 264deg;--tail-left: 4%;--tail-top: 18%;bottom:9%;left:50%;width:24%}.comic-panel-number{font-size:clamp(.4rem,1.6vw,.56rem)}.comic-page-folio{right:2.1%;bottom:.6%;font-size:clamp(.46rem,1.8vw,.64rem)}.comic-reader-ui{top:auto;right:.9rem;bottom:max(.85rem,env(safe-area-inset-bottom));display:grid;width:min(8.6rem,36vw);font-size:.54rem}.comic-scroll-hint{top:auto;bottom:max(.85rem,env(safe-area-inset-bottom));left:.9rem;font-size:.51rem}.comic-ending{position:absolute;inset:auto 0 0;height:80svh;min-height:0;padding:20svh 1rem 0;opacity:var(--ending)}.comic-ending p{font-size:clamp(2rem,10vw,3.6rem)}}@media(max-width:900px)and (orientation:landscape)and (max-height:520px){.comic-stage{padding:3.9rem .65rem 2.5rem}.comic-book{width:min(94vw,calc((100svh - 6.4rem)*1.28),46rem);aspect-ratio:1.28}.comic-page-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1.42fr) minmax(0,1fr);gap:4px;padding:5px 5px 10px}.comic-page-grid--2{grid-template-rows:minmax(0,1fr) minmax(0,1.42fr)}.comic-page-grid--3{grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr))}.comic-page-grid--4{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,.9fr) minmax(0,1.15fr) minmax(0,.9fr)}.comic-page-grid--5{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}.comic-panel{grid-column:auto;grid-row:auto}.comic-panel--hero{grid-column:1 / -1}.comic-page-grid--2 .comic-panel--06{grid-column:1 / -1;grid-row:2}.comic-title{top:6%;left:3.4%;width:39%}.comic-title h1{font-size:clamp(1rem,5vw,1.55rem)}.comic-balloon,.comic-caption,.comic-date{font-size:clamp(.4rem,1.4vw,.56rem)}.comic-caption--01{width:38%}.comic-caption--02{width:50%}.comic-caption--05{width:48%}.comic-caption--06{width:52%}.comic-caption--07{width:38%}.comic-caption--08{width:42%}.comic-balloon--01{--tail-length: clamp(2.8rem, 8vw, 5rem);--tail-angle: 125deg;--tail-left: 38%;top:6%;right:3%;width:20%}.comic-balloon--03a{--tail-length: clamp(2.7rem, 7vw, 4.5rem);--tail-angle: 28deg;--tail-left: 90%;width:42%}.comic-balloon--03b{--tail-length: clamp(1.8rem, 4vw, 2.8rem);--tail-angle: 105deg;--tail-left: 22%;width:43%}.comic-balloon--04a{--tail-length: clamp(2rem, 4.5vw, 3.2rem);--tail-angle: 143deg;--tail-left: 12%;width:34%}.comic-balloon--04b{--tail-length: clamp(2.8rem, 7vw, 4.5rem);--tail-angle: -48deg;--tail-left: 88%;--tail-top: 4%;width:31%}.comic-balloon--05a{--tail-length: clamp(3rem, 6vw, 4.6rem);--tail-angle: 48deg;--tail-left: 90%;width:50%}.comic-balloon--05b{--tail-length: clamp(3.5rem, 7.5vw, 5.6rem);--tail-angle: 141deg;--tail-left: 4%;width:41%}.comic-balloon--08a{--tail-length: clamp(3.8rem, 9vw, 6.3rem);--tail-angle: 45deg;--tail-left: 90%;left:45%;width:13%}.comic-balloon--08b{--tail-length: clamp(7rem, 19vw, 13rem);--tail-angle: 163deg;--tail-left: 2%;right:4%;width:24%}.comic-balloon--08c{--tail-length: clamp(4rem, 10vw, 7rem);--tail-angle: 233deg;--tail-left: 2%;right:3%;width:19%}.comic-balloon--09{--tail-length: clamp(1.8rem, 3.5vw, 2.8rem);--tail-angle: 24deg;--tail-left: 72%;width:42%}.comic-balloon--10{--tail-length: clamp(4rem, 12vw, 8rem);--tail-angle: 175deg;--tail-left: 5%;width:44%}.comic-balloon--12a{--tail-length: clamp(7rem, 20vw, 13rem);--tail-angle: 122deg;--tail-left: 4%;width:47%}.comic-balloon--12b{--tail-length: clamp(2.7rem, 6vw, 4.3rem);--tail-angle: 34deg;--tail-left: 92%;--tail-top: 54%;top:39%;width:13%}.comic-balloon--12c{--tail-length: clamp(5rem, 14vw, 9rem);--tail-angle: 241deg;--tail-left: 2%;--tail-top: 18%;bottom:18%;left:44%;width:17%}.comic-reader-ui,.comic-scroll-hint{bottom:max(.45rem,env(safe-area-inset-bottom))}}