/* The reference's panel geometry owns the rhythm; no repeated caption cards. */
.dohwa-pian-story{background:#000;color:var(--dohwa-text-ink);padding:0;isolation:isolate}
.pian-hero{margin:0}
.pian-hero img{display:block;width:100%;height:auto}
.pian-panel{position:relative;width:100%;aspect-ratio:var(--panel-ratio);margin:var(--pian-join,0) 0 0;background:transparent}
/* Masks affect the painting only. HTML dialogue, hands/face inserts and charts
   stay above every painting, including where two adjacent canvases overlap. */
.pian-art{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:fill;z-index:0;-webkit-mask-image:var(--pian-edge-mask,none);mask-image:var(--pian-edge-mask,none);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mask-mode:alpha}
/* Approved 2026-10-01 artwork keeps its native ratio and existing scene masks. */
.pian-approved-art .pian-art{object-fit:contain}
.pian-thread-continuation{overflow:hidden}
.pian-thread-continuation>.pian-art{object-fit:contain;transform:translateY(-22%);-webkit-mask-image:none;mask-image:none}
/* An irregular local veil peels apart from the eyes. Text stays above it. */
.pian-eye-cue{position:absolute;top:42.5%;left:0;width:100%;height:5%;pointer-events:none}
.pian-eye-veil{position:absolute;inset:0;display:block;width:100%;height:100%;z-index:1;pointer-events:none}
/* Lift the original empty headroom; keep the introduction above the horns. */
.pian-p02{margin-top:calc(-180 * var(--dohwa-font-unit))}
.pian-p26a{margin-top:calc(64 * var(--dohwa-font-unit))}
.pian-p02>.pian-art,.pian-p02>.pian-eye-veil{clip-path:inset(calc(180 * var(--dohwa-font-unit)) 0 0)}
@media(prefers-reduced-motion:reduce){.pian-eye-veil{display:none}}
/* P08 uses only two generated assets. Clip the transparent sheet into complete
   strands; the six independent departures never move or blur the character. */
.pian-thread-scene{isolation:isolate}
.pian-thread-overlays{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;visibility:hidden;-webkit-mask-image:var(--pian-edge-mask,none);mask-image:var(--pian-edge-mask,none);-webkit-mask-size:100% 100%;mask-size:100% 100%}
.pian-thread-scene[data-thread-state="armed"] .pian-thread-overlays,.pian-thread-scene[data-thread-state="scattering"] .pian-thread-overlays{visibility:visible}
.pian-thread-strand{position:absolute;left:50%;top:var(--strand-top);width:150%;aspect-ratio:12/1;transform:translate(-50%,-50%) rotate(var(--strand-angle))}
.pian-thread-drift,.pian-thread-strip{position:absolute;inset:0;display:block}
.pian-thread-strip{overflow:hidden}
.pian-thread-strip img{position:absolute;left:0;top:calc(var(--strand-row) * -100%);width:100%;height:600%;max-width:none;object-fit:fill}
.pian-thread-cue{position:absolute;left:0;top:50%;width:100%;height:1px;pointer-events:none}
.pian-thread-scene[data-thread-state="scattering"] .pian-thread-drift{animation:pian-thread-release 2.4s cubic-bezier(.2,.55,.3,1) var(--strand-delay) both;will-change:transform,opacity}
@keyframes pian-thread-release{0%{opacity:1;transform:translate(0,0) rotate(0);filter:blur(0)}20%{opacity:.88}100%{opacity:0;transform:translate(var(--strand-x),var(--strand-y)) rotate(var(--strand-turn));filter:blur(2px)}}
@media(prefers-reduced-motion:reduce){.pian-thread-overlays{display:none}.pian-thread-drift{animation:none!important}}
/* Two registered 708x1980 halves form one continuous painting. No masks,
   transforms, gaps or independent object-fit crops at the internal seam. */
.pian-castle-sequence{position:relative;width:100%;margin:0;isolation:isolate}
.pian-castle-art-stack>img{display:block;width:100%;height:auto;margin:0;border:0}
.pian-castle-sequence>.pian-panel{position:absolute;left:0;aspect-ratio:auto;margin:0;pointer-events:none}
.pian-castle-middle-region{position:absolute;left:0;top:40%;width:100%;height:30%;pointer-events:none}
.pian-castle-sequence .pian-copy{pointer-events:auto}
.pian-copy{position:absolute;margin:0;text-align:center;z-index:2;white-space:normal;text-wrap:balance}
.pian-copy.pian-caption-box{box-sizing:border-box;padding:calc(14 * var(--dohwa-font-unit)) calc(12 * var(--dohwa-font-unit));background:#f6eadb;color:#24110e;border:1px solid #24110e;border-radius:0;box-shadow:calc(4 * var(--dohwa-font-unit)) calc(4 * var(--dohwa-font-unit)) 0 rgb(0 0 0 / 50%);text-shadow:none}
.pian-chart,.pian-portrait,.pian-place-preview,.pian-result-montage,.pian-portrait-note,.pian-place-note{z-index:1}
.pian-copy.pian-bubble{padding:calc(20 * var(--dohwa-font-unit)) calc(8 * var(--dohwa-font-unit));background:#f6eadb;color:#24110e;border-radius:50%;box-shadow:0 0 0 1px #eadac8;line-height:1.5}
.pian-copy.pian-bubble-tall{box-sizing:border-box;min-height:calc(216 * var(--dohwa-font-unit));padding:calc(35 * var(--dohwa-font-unit)) calc(8 * var(--dohwa-font-unit));line-height:1.6}
.pian-p10 .pian-copy-shade::before,.pian-p12a .pian-copy-shade::before,.pian-p12b .pian-copy-shade::before,.pian-p14b .pian-copy-shade::before{inset:calc(-8 * var(--dohwa-font-unit)) -2%;border-radius:25%;background:rgb(0 0 0 / 60%)}
.pian-copy-shade::before{content:"";position:absolute;inset:-12px 16%;z-index:-1;border-radius:50%;background:rgb(0 0 0 / 52%);filter:blur(12px);pointer-events:none}
.pian-p20 .pian-copy-shade::before,.pian-closing-visitor .pian-copy-shade::before,.pian-closing-timing .pian-copy-shade::before{inset:calc(-8 * var(--dohwa-font-unit)) -2%;border-radius:25%;background:rgb(0 0 0 / 62%);filter:blur(calc(12 * var(--dohwa-font-unit)))}
.pian-copy.pian-enter{animation:dohwa-copy-emerge .5s ease-out both}
.pian-note{margin:12px 0 0;color:#ab9990;font:400 calc(12 * var(--dohwa-font-unit))/1.65 var(--dohwa-font-dialogue);text-align:center;word-break:keep-all}
.pian-book-prose{position:absolute;top:51%;left:11%;width:78%;z-index:2}
.pian-book-prose p{margin:0}
.pian-book-paragraphs>.dohwa-type-reading{text-indent:0}
.pian-book-paragraphs>.dohwa-type-reading+.dohwa-type-reading{margin-top:1.2em}
.pian-masked-name{display:inline-block;position:relative;white-space:nowrap;vertical-align:baseline;border-radius:3px;background:rgb(235 206 186 / 16%);padding:0 .2em;user-select:none}
.pian-masked-name>span{display:inline-block;filter:blur(.23em);opacity:.7;letter-spacing:.12em}
.pian-book-prose .pian-note{margin-top:12px}
.pian-book-prose a,.pian-chart-empty a{color:#e4bc8e}
.pian-book-reading{aspect-ratio:auto;margin:0}
.pian-book-sheet{position:relative;aspect-ratio:2/3;display:flex;flex-direction:column;justify-content:center;gap:calc(24 * var(--dohwa-font-unit));padding:calc(70 * var(--dohwa-font-unit)) 11% calc(130 * var(--dohwa-font-unit))}
.pian-book-sheet .pian-art{-webkit-mask-image:linear-gradient(transparent,#000 5%);mask-image:linear-gradient(transparent,#000 5%)}
.pian-book-owner{position:relative;z-index:2;margin:0;color:var(--dohwa-text-accent,#e4bc8e)}
.pian-book-sheet .pian-book-prose{position:relative;top:auto;left:auto;width:auto}
/* The explanation sits in the empty castle background left of the hand. */
.pian-mirror-reveal{aspect-ratio:auto;padding:calc(56 * var(--dohwa-font-unit)) 0 0}
.pian-mirror-stage{position:relative;width:100%;aspect-ratio:2/3}
.pian-mirror-stage>.pian-art{position:relative;inset:auto;height:auto}
.pian-mirror-veil{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;fill:#030203;opacity:1;transition:opacity 3.2s cubic-bezier(.4,0,.2,1);filter:blur(.5px)}
.pian-mirror-stage.is-revealed .pian-mirror-veil{opacity:0}
@media(prefers-reduced-motion:reduce){.pian-mirror-veil{transition:none}}
.pian-mirror-reveal>.pian-copy{position:relative;left:auto!important;top:auto!important;width:86%!important;margin:0 auto calc(56 * var(--dohwa-font-unit))}
/* Halmae SajuTableOverlay + OkbunChart layout, scoped to Oni. The original
   four pillars, circular glyphs and ruled sections remain; paper becomes ink,
   rules become antique gold and the day pillar gets a restrained red accent. */
.pian-chart-scene{aspect-ratio:auto;margin-top:0}
.pian-chart-scene>.pian-copy{position:relative;left:auto!important;top:auto!important;width:90%!important;margin:calc(24 * var(--dohwa-font-unit)) auto calc(40 * var(--dohwa-font-unit))}
.pian-chart-book{position:relative;aspect-ratio:auto;padding:calc(46 * var(--dohwa-font-unit)) 9% calc(60 * var(--dohwa-font-unit));display:flex;flex-direction:column;gap:calc(24 * var(--dohwa-font-unit))}
.pian-chart-book>.pian-copy{position:relative;left:auto!important;top:auto!important;width:100%!important}
.pian-chart-book>.pian-art{object-fit:fill}
.pian-chart{position:relative;width:100%;min-width:0;box-sizing:border-box}
.pian-chart-empty{text-align:center;padding:calc(40 * var(--dohwa-font-unit)) 0}
.dohwa-saju-chart{--chart-ink:#f2dfbf;--chart-muted:#c2aa91;--chart-line:rgb(186 139 85 / 28%);--chart-seal:#ae4a42;color:var(--chart-ink);background:rgb(18 10 10 / 94%);border:1px solid #805439;padding:calc(16 * var(--dohwa-font-unit)) calc(8 * var(--dohwa-font-unit));font-family:var(--dohwa-font-reading)}
.dohwa-saju-chart .saju-header{text-align:center;margin:0 0 calc(14 * var(--dohwa-font-unit));padding:0 0 calc(14 * var(--dohwa-font-unit));border-bottom:1px solid var(--chart-line)}
.dohwa-saju-chart .saju-header p{margin:0;font-size:calc(18 * var(--dohwa-font-unit));font-weight:600;line-height:1.5}
.dohwa-saju-chart .birth-date{display:block;margin-top:calc(7 * var(--dohwa-font-unit));color:var(--chart-muted);font:400 calc(11 * var(--dohwa-font-unit))/1.5 var(--dohwa-font-dialogue)}
.dohwa-saju-chart .saju-pillar-container{display:flex;justify-content:space-between;width:100%;gap:0}
.dohwa-saju-chart .saju-pillar-card{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;padding:calc(10 * var(--dohwa-font-unit)) calc(3 * var(--dohwa-font-unit));border-top:2px solid transparent;border-bottom:2px solid transparent}
.dohwa-saju-chart .saju-pillar-card+.saju-pillar-card{border-left:1px solid var(--chart-line)}
.dohwa-saju-chart .saju-pillar-card.active-highlight{background:#331918;border-top-color:var(--chart-seal);border-bottom-color:var(--chart-seal)}
.dohwa-saju-chart .pillar-header{margin:0;padding:0 0 calc(10 * var(--dohwa-font-unit));font:600 calc(16 * var(--dohwa-font-unit))/1.5 var(--dohwa-font-reading)}
.dohwa-saju-chart .pillar-section{display:flex;flex-direction:column;align-items:center;width:100%;padding:calc(8 * var(--dohwa-font-unit)) 0;box-sizing:border-box}
.dohwa-saju-chart .pillar-section+.pillar-section{border-top:1px solid var(--chart-line)}
.dohwa-saju-chart .ten-god-label{display:flex;flex-direction:column;align-items:center;gap:calc(2 * var(--dohwa-font-unit));margin-bottom:calc(6 * var(--dohwa-font-unit));line-height:1.2}
.dohwa-saju-chart .hanja{font-size:calc(12 * var(--dohwa-font-unit))}
.dohwa-saju-chart .kor{font:400 calc(11 * var(--dohwa-font-unit))/1.3 var(--dohwa-font-dialogue);color:var(--chart-muted)}
.dohwa-saju-chart .element-bubble{width:calc(46 * var(--dohwa-font-unit));height:calc(46 * var(--dohwa-font-unit));border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;margin:calc(3 * var(--dohwa-font-unit)) auto;border:1px solid var(--chart-line);color:#f8ead3}
.dohwa-saju-chart .element-green{background:#263e34}.dohwa-saju-chart .element-red{background:#652823}.dohwa-saju-chart .element-yellow{background:#634d2b}.dohwa-saju-chart .element-white{background:#47433e}.dohwa-saju-chart .element-black{background:#202831}
.dohwa-saju-chart .pronun{font:400 calc(10 * var(--dohwa-font-unit))/1 var(--dohwa-font-dialogue);margin-bottom:calc(2 * var(--dohwa-font-unit))}
.dohwa-saju-chart .hanja-main{font:600 calc(25 * var(--dohwa-font-unit))/1 var(--dohwa-font-reading)}
.dohwa-saju-chart .element-desc{font-size:calc(11 * var(--dohwa-font-unit));line-height:1.5;color:var(--chart-muted);margin-top:calc(3 * var(--dohwa-font-unit))}
.dohwa-saju-chart .energy-label{display:flex;flex-direction:column;align-items:center;gap:calc(3 * var(--dohwa-font-unit))}
.dohwa-saju-chart .list-section{flex:1;gap:calc(5 * var(--dohwa-font-unit));min-height:calc(50 * var(--dohwa-font-unit))}
.dohwa-saju-chart .list-item{font:400 calc(11 * var(--dohwa-font-unit))/1.4 var(--dohwa-font-dialogue);text-align:center;overflow-wrap:anywhere}
.dohwa-saju-chart .animal-color-section{text-align:center;margin-top:auto;padding-top:calc(6 * var(--dohwa-font-unit));font:500 calc(11 * var(--dohwa-font-unit))/1.5 var(--dohwa-font-dialogue);word-break:keep-all;color:var(--chart-muted)}
.dohwa-saju-chart .pillar-empty-state{flex:1;display:flex;flex-direction:column;justify-content:center;gap:calc(6 * var(--dohwa-font-unit));text-align:center;color:var(--chart-muted);font:400 calc(12 * var(--dohwa-font-unit))/1.5 var(--dohwa-font-dialogue)}
.dohwa-saju-chart .pillar-empty-state small{font-size:calc(10 * var(--dohwa-font-unit))}
.pian-portrait{position:absolute;overflow:hidden;border-radius:12%;background:#17100e}
.pian-portrait img{display:block;width:100%;height:100%;object-fit:cover;filter:blur(9px);transform:scale(1.12)}
/* P15/P19 share a crisp frame and labels; only their photo and chosen glyphs blur. */
.pian-profile-scene{aspect-ratio:auto;padding:calc(28 * var(--dohwa-font-unit)) calc(16 * var(--dohwa-font-unit)) calc(20 * var(--dohwa-font-unit));box-sizing:border-box}
.pian-profile-card{position:relative;isolation:isolate;overflow:hidden;padding:calc(48 * var(--dohwa-font-unit)) calc(26 * var(--dohwa-font-unit)) calc(56 * var(--dohwa-font-unit));border:1px solid #b9854c;border-radius:calc(15 * var(--dohwa-font-unit));background:linear-gradient(165deg,#230907,#120706 48%,#210909);box-shadow:0 0 calc(24 * var(--dohwa-font-unit)) #7c111025}
.pian-profile-card::before{content:"";position:absolute;inset:calc(5 * var(--dohwa-font-unit));border:1px solid #a979404d;border-radius:calc(11 * var(--dohwa-font-unit));pointer-events:none;z-index:-1}
.pian-profile-ornament{position:absolute;left:0;width:100%;height:calc(160 * var(--dohwa-font-unit));overflow:hidden;pointer-events:none;z-index:-1;opacity:.65}
.pian-profile-ornament img{position:absolute;display:block;width:100%;height:auto}
.pian-profile-ornament-top{top:0;mask-image:linear-gradient(#000,transparent);-webkit-mask-image:linear-gradient(#000,transparent)}
.pian-profile-ornament-top img{top:0}
.pian-profile-ornament-bottom{bottom:0;mask-image:linear-gradient(transparent,#000);-webkit-mask-image:linear-gradient(transparent,#000)}
.pian-profile-ornament-bottom img{bottom:0}
.pian-profile-heading{position:relative;text-align:center;margin:0 0 calc(24 * var(--dohwa-font-unit))}
.pian-profile-heading p{margin:0 0 calc(7 * var(--dohwa-font-unit));font-size:calc(18 * var(--dohwa-font-unit));color:#e4bc8e;overflow-wrap:anywhere}
.pian-profile-heading h2{margin:0;color:#f1baad}
.pian-profile-photo{position:relative;overflow:hidden;aspect-ratio:4/5;border:1px solid #b77851;border-radius:calc(18 * var(--dohwa-font-unit));background:#322018}
.pian-profile-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 37%;filter:blur(calc(15 * var(--dohwa-font-unit)));transform:scale(1.1)}
.pian-profile-details{position:relative;margin:calc(28 * var(--dohwa-font-unit)) 0 0;padding:calc(24 * var(--dohwa-font-unit)) 0 0;border-top:1px solid #bb8b573d}
.pian-profile-row+.pian-profile-row{margin-top:calc(24 * var(--dohwa-font-unit))}
.pian-profile-row dt{margin:0 0 calc(10 * var(--dohwa-font-unit));color:#f6eadb}
.pian-profile-row dd{display:flex;flex-wrap:wrap;gap:calc(8 * var(--dohwa-font-unit));margin:0}
.pian-profile-chip{display:inline-flex;align-items:center;min-height:calc(38 * var(--dohwa-font-unit));box-sizing:border-box;padding:calc(7 * var(--dohwa-font-unit)) calc(12 * var(--dohwa-font-unit));border:1px solid #b98454;border-radius:999px;background:#9b38261c;color:#e4bc8e;font:500 calc(18 * var(--dohwa-font-unit))/1.4 var(--dohwa-font-dialogue);white-space:nowrap}
.pian-profile-chip.is-concealed{border-color:#8b6549;color:#f6eadb;background:#a86a4620;overflow:hidden}
.pian-profile-chip.is-concealed>span{display:block;filter:blur(calc(5 * var(--dohwa-font-unit)));user-select:none;pointer-events:none}
.pian-concealed-segment{display:inline-block;filter:blur(calc(5 * var(--dohwa-font-unit)));user-select:none;pointer-events:none}
.pian-profile-chip.is-partially-concealed{color:#f6eadb;overflow:hidden}
.pian-meeting-basis{margin:calc(10 * var(--dohwa-font-unit)) 0 0;color:#bf9f89;font:400 calc(12 * var(--dohwa-font-unit))/1.6 var(--dohwa-font-dialogue);word-break:keep-all}
.pian-mirror-preview{aspect-ratio:auto;padding-top:0}
/* Keep the P11 label, but overlay its copy on the preceding painting's foot.
   The mirror now follows without a separate caption row or reserved spacer. */
.pian-mirror-preview>.pian-copy{left:5%!important;top:auto!important;bottom:calc(100% + 24 * var(--dohwa-font-unit));width:90%!important;margin:0}
.pian-partner-mirror-stage{position:relative;width:100%;aspect-ratio:2/3}
.pian-partner-mirror-stage>.pian-art{position:relative;height:auto}
.pian-clip-defs{position:absolute;pointer-events:none}
.pian-portrait-p11{inset:0;border-radius:0;background:transparent;clip-path:url(#pian-partner-mirror-glass)}
.pian-portrait-p11 img{position:absolute;left:8%;top:3%;width:75%;height:64%;object-fit:cover;object-position:center 35%;filter:blur(calc(13 * var(--dohwa-font-unit)));transform:scale(1.025)}
.pian-portrait-note{position:absolute;top:66%;left:15%;width:70%}
.pian-mirror-note{top:87%}
.pian-offer-panel{aspect-ratio:auto;box-sizing:border-box;padding-inline:calc(16 * var(--dohwa-font-unit));margin:0 0 calc(48 * var(--dohwa-font-unit))}
.pian-offer-card{position:relative;width:100%;aspect-ratio:1/2;isolation:isolate}
.pian-offer-card-art{display:block;width:100%;height:auto}
#dohwa-final-offering{width:auto;margin-inline:calc(16 * var(--dohwa-font-unit))}
.pian-offer-two-plans{aspect-ratio:auto}
/* Keep the full artwork, including its price, CTA and bottom frame. */
.pian-offer-art-button{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;cursor:pointer;border-radius:calc(18 * var(--dohwa-font-unit))}
.pian-offer-art-button:focus-visible{outline:2px solid #ffe9bd;outline-offset:-6px}
.pian-offer-accessible{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* Normalized to the CTA painted at x30..857 / y1550..1705 in 887x1774. */
.pian-offer-hitarea{position:absolute;z-index:1;left:3.38%;top:87.37%;width:93.24%;height:8.74%;padding:0;border:0;border-radius:calc(17 * var(--dohwa-font-unit));background:transparent;color:transparent;box-shadow:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pian-offer-hitarea:focus-visible{outline:2px solid #fff0ca;outline-offset:calc(-7 * var(--dohwa-font-unit));box-shadow:inset 0 0 0 calc(9 * var(--dohwa-font-unit)) #0008}
.pian-result-montage{position:absolute;left:0;top:2%;width:100%;overflow:hidden}
.pian-result-montage-art{display:block;width:100%;height:auto;filter:blur(calc(2.6 * var(--dohwa-font-unit)));opacity:.9}
.pian-p26b .pian-copy-shade::before,.pian-p26c .pian-copy-shade::before{inset:calc(-10 * var(--dohwa-font-unit)) -5%;border-radius:25%;background:rgb(0 0 0 / 78%);filter:blur(calc(14 * var(--dohwa-font-unit)))}
/* P25's lacquer, gold and poppies frame real HTML questions. */
.pian-chapters{padding:calc(30 * var(--dohwa-font-unit)) calc(16 * var(--dohwa-font-unit)) 0}
.pian-chapters-intro{text-align:center;margin:0 calc(12 * var(--dohwa-font-unit)) calc(42 * var(--dohwa-font-unit))}
.pian-chapters-intro h2{margin:calc(20 * var(--dohwa-font-unit)) 0}
.pian-chapters-intro .dohwa-type-dialogue{margin:0}
.pian-chapter-guidance strong{font-weight:700}
.pian-chapter-recommended .pian-chapter-item{color:#ff8c81;font-weight:600}
.pian-chapter-recommended .pian-chapter-index{color:#ff8c81}
.pian-chapter{position:relative;margin:0 0 calc(26 * var(--dohwa-font-unit));padding:calc(58 * var(--dohwa-font-unit)) calc(30 * var(--dohwa-font-unit)) calc(50 * var(--dohwa-font-unit));background:#130707 url('../assets/tsubaki/dohwa-v2/closing-v1/chapter-frame.webp') center/100% 100%;text-align:center;border-radius:calc(20 * var(--dohwa-font-unit));isolation:isolate}
.pian-chapter-number{font:500 calc(15 * var(--dohwa-font-unit))/1.5 var(--dohwa-font-dialogue);color:#d6a777;margin:0 0 calc(18 * var(--dohwa-font-unit));letter-spacing:.04em}
.pian-chapter h2{margin:0 0 calc(18 * var(--dohwa-font-unit));text-wrap:balance}
.pian-chapter-promise{margin:0 0 calc(26 * var(--dohwa-font-unit));color:#cebca9}
.pian-chapter ol{padding:0;list-style:none;text-align:left;margin:0}
.pian-chapter li{border-top:1px solid #8b5c3559}
.pian-chapter-item{display:flex;align-items:center;gap:calc(12 * var(--dohwa-font-unit));min-height:52px;padding:calc(15 * var(--dohwa-font-unit)) 0;font:400 calc(18 * var(--dohwa-font-unit))/1.6 var(--dohwa-font-dialogue);text-decoration:none;color:#f6eadb;word-break:keep-all;overflow-wrap:anywhere}
.pian-chapter-index{flex:0 0 auto;font:500 calc(12 * var(--dohwa-font-unit))/1 var(--dohwa-font-dialogue);color:#df8067}
/* The finale follows knock / summons / farewell / reminder / timing / book. */
.pian-closing{padding-top:calc(40 * var(--dohwa-font-unit));background:#000;isolation:isolate}
.pian-closing-scene{position:relative;margin:0;text-align:center;background:transparent}
.pian-closing-art{display:block;position:relative;z-index:0;width:100%;height:auto;object-fit:contain;-webkit-mask-image:var(--closing-edge-mask,none);mask-image:var(--closing-edge-mask,none);-webkit-mask-size:100% 100%;mask-size:100% 100%;mask-repeat:no-repeat;mask-mode:alpha}
.pian-closing-copy{position:relative;z-index:2;text-align:center;margin:0 auto;width:90%;padding:calc(24 * var(--dohwa-font-unit)) 0;text-wrap:balance;text-shadow:0 calc(2 * var(--dohwa-font-unit)) calc(14 * var(--dohwa-font-unit)) #000}
.pian-closing-copy.pian-enter{animation:dohwa-copy-emerge .5s ease-out both}
.pian-closing-sound{position:absolute;top:12%;left:7%;width:46%;padding:0;color:#e4bc8e;letter-spacing:.1em;text-align:left}
/* Each incoming painting has room to become opaque before the lower edge of
   the preceding painting. Dialogue occupies negative space, never a spacer. */
.pian-closing-visitor{margin-top:calc(-150 * var(--dohwa-font-unit))}
.pian-closing-copy.pian-closing-attendant{position:absolute;top:22%;left:7%;width:46%;padding:0;font-size:var(--dohwa-dialogue-size);text-align:left}
.pian-closing-departure{margin-top:calc(-168 * var(--dohwa-font-unit))}
.pian-closing-departure>.pian-closing-copy{position:absolute;top:9%;left:6%;width:44%;padding:0;text-align:left}
.pian-closing-shot{position:relative}
.pian-closing-shot>.pian-closing-copy{position:absolute;left:5%;padding:0}
.pian-closing-reminder{margin-top:calc(-144 * var(--dohwa-font-unit))}
.pian-closing-summons>.pian-closing-copy{top:24%}
.pian-closing-warning{margin-top:calc(-144 * var(--dohwa-font-unit))}
.pian-closing-warning>.pian-closing-copy{bottom:18%}
.pian-closing-timing{margin-top:calc(-96 * var(--dohwa-font-unit))}
.pian-closing-timing-top{position:absolute;top:59%;left:5%;padding:0}
.pian-closing-timing>.pian-closing-copy:last-child{position:absolute;left:5%;bottom:8%;padding:0}
.pian-closing-book{margin-top:calc(-100 * var(--dohwa-font-unit))}
.pian-closing-door>.pian-closing-copy{bottom:18%;font-size:var(--dohwa-dialogue-size)}
.pian-closing-book-reveal{margin-top:calc(-100 * var(--dohwa-font-unit))}
.pian-closing-book-reveal>.pian-closing-copy{bottom:5%;font-size:var(--dohwa-impact-size)}
/* Yeokcheon's vertical review rhythm, in Oni's crimson / gold / ivory palette. */
.pian-closing-reviews{margin:calc(42 * var(--dohwa-font-unit)) calc(20 * var(--dohwa-font-unit)) calc(64 * var(--dohwa-font-unit));text-align:center}
.pian-closing-reviews h2{margin:0 0 calc(10 * var(--dohwa-font-unit));color:#f6eadb;text-align:left;white-space:nowrap;font:500 calc(15 * var(--dohwa-font-unit))/1.5 var(--dohwa-font-dialogue)}
.pian-review-viewport{position:relative;text-align:left}
.pian-review-group{list-style:none;margin:0;padding:0 0 calc(14 * var(--dohwa-font-unit));display:flex;flex-direction:column;gap:calc(14 * var(--dohwa-font-unit))}
.pian-review-card{box-sizing:border-box;min-height:calc(176 * var(--dohwa-font-unit));padding:calc(18 * var(--dohwa-font-unit));border:1px solid #6a422d;border-radius:calc(8 * var(--dohwa-font-unit));background:#160b0c;box-shadow:inset 0 0 0 calc(4 * var(--dohwa-font-unit)) #080404}
.pian-review-meta{display:flex;align-items:center;gap:calc(10 * var(--dohwa-font-unit));margin-bottom:calc(12 * var(--dohwa-font-unit));font:500 calc(15 * var(--dohwa-font-unit))/1.4 var(--dohwa-font-dialogue)}
.pian-review-seal{display:grid;place-items:center;flex:0 0 calc(28 * var(--dohwa-font-unit));height:calc(28 * var(--dohwa-font-unit));border:1px solid #b6423c;color:#e65b58;font-family:var(--dohwa-font-reading)}
.pian-review-author{display:flex;align-items:center;gap:calc(8 * var(--dohwa-font-unit));color:#f6eadb}
.pian-review-author small{font-size:calc(11 * var(--dohwa-font-unit));font-weight:400;color:#bc9787}
.pian-review-stars{margin-left:auto;white-space:nowrap;color:#e4bc8e;font-size:calc(14 * var(--dohwa-font-unit));letter-spacing:.06em}
.pian-review-card .dohwa-type-reading{margin:0;color:#e8d5be;overflow-wrap:anywhere;font-size:calc(16 * var(--dohwa-font-unit));line-height:1.7}
.pian-review-clone{display:none}
.pian-closing-reviews.is-animated:not(.is-paused) .pian-review-viewport{height:calc(570 * var(--dohwa-font-unit));overflow:hidden;mask-image:linear-gradient(to bottom,transparent,#000 4%,#000 96%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 4%,#000 96%,transparent)}
.pian-closing-reviews.is-animated:not(.is-paused) .pian-review-clone{display:flex}
.pian-closing-reviews.is-animated:not(.is-paused) .pian-review-track{animation:dohwa-review-roll var(--dohwa-review-duration,48s) linear infinite;animation-play-state:paused}
.pian-closing-reviews.is-animated.is-visible:not(.is-paused) .pian-review-track{animation-play-state:running}
@media(hover:hover){.pian-closing-reviews.is-animated.is-visible .pian-review-viewport:hover .pian-review-track{animation-play-state:paused}}
@keyframes dohwa-review-roll{to{transform:translateY(-50%)}}
.pian-final-offer{width:calc(100% - 32 * var(--dohwa-font-unit));margin:0 auto;padding:0}
html:has(.dohwa-pian-story),body:has(.dohwa-pian-story){overscroll-behavior-y:none}
@media(prefers-reduced-motion:reduce){.pian-closing-copy.pian-enter{animation:none}}
.pian-sticky{position:fixed;bottom:calc(10px + env(safe-area-inset-bottom,0px));left:50%;width:min(calc(100% - 32px),408px);transform:translate(-50%,120px);z-index:30;display:block;padding:0;background:transparent;border:0;border-radius:0;transition:transform .25s;box-shadow:none;visibility:hidden;cursor:pointer}
.pian-sticky.visible{transform:translate(-50%,0);visibility:visible}
.pian-sticky img{display:block;width:100%;height:calc(100 * var(--dohwa-font-unit));object-fit:cover;object-position:center;pointer-events:none}
.pian-sticky:focus-visible{outline:2px solid #e4bc8e;outline-offset:2px}
/* Review controls belong to the outside annotation rail, never the story flow. */
.pian-review-bar{display:none}
.pian-review-rail{overflow:clip}
.pian-review-rail .pian-review-bar{display:block;pointer-events:auto;margin-top:12px;padding:12px;border:1px solid #514031;border-radius:4px}
.pian-review-bar>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.pian-review-bar a,.pian-review-bar button{min-width:0;padding:8px 4px;text-align:center}
.pian-review-bar a:last-of-type,.pian-review-bar select{grid-column:1/-1}
.pian-review-bar select{width:100%;min-width:0}
@media(prefers-reduced-motion:reduce){.pian-copy.pian-enter{animation:none}.pian-sticky{transition:none}}

/* Follow-up copy remains in normal flow wherever a longer line needs space.
   The illustration stage keeps the original geometry and bubble coordinates. */
.pian-flow-scene{aspect-ratio:auto;display:flow-root}
.pian-scene-stage{position:relative;aspect-ratio:var(--panel-ratio)}
.pian-flow-scene>.pian-copy{position:relative;left:auto!important;top:auto!important;width:92%!important;margin:calc(24 * var(--dohwa-font-unit)) auto}
/* P12B shares its upper dark artwork with the caption so the two paintings
   can actually overlap. Only the artwork receives the incoming alpha mask. */
.pian-p12b.pian-flow-scene{display:grid}
.pian-p12b.pian-flow-scene>.pian-copy,.pian-p12b>.pian-scene-stage{grid-area:1/1;align-self:start}
.pian-p12b.pian-flow-scene>.pian-copy{margin-block:0 calc(30 * var(--dohwa-font-unit))}
.pian-copy-pause{display:block;height:calc(30 * var(--dohwa-font-unit))}
.pian-p16.pian-flow-scene{padding-top:calc(40 * var(--dohwa-font-unit))}
.pian-p16.pian-flow-scene>.pian-copy{margin-bottom:calc(42 * var(--dohwa-font-unit))}
.pian-p22.pian-flow-scene>.pian-copy{margin:calc(32 * var(--dohwa-font-unit)) auto}
.pian-p22.pian-flow-scene>.pian-scene-stage{margin-bottom:0}
.pian-p19 .pian-place-preview{left:30%;top:29%;width:40%;height:25%;border-radius:calc(4 * var(--dohwa-font-unit));border-color:#94734766}
.pian-p19 .pian-lock{max-width:70%}
.pian-masked-trait{display:inline-block;white-space:nowrap;vertical-align:baseline;user-select:none;padding:0 .12em;margin:0 .04em;border-radius:.1em;background:rgb(235 206 186 / 12%)}
.pian-masked-trait>span{display:inline-block;filter:blur(.28em);opacity:.85;letter-spacing:.13em}
/* A generated silk thread joins before the existing character offer card.
   The two masks meet at the same source pixel; only their approach animates. */
.pian-brand-intro{position:relative;margin:0 calc(-16 * var(--dohwa-font-unit)) calc(36 * var(--dohwa-font-unit))}
.pian-brand-art{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(transparent,#000 12%,#000 90%,transparent);mask-image:linear-gradient(transparent,#000 12%,#000 90%,transparent)}
.pian-brand-copy{position:absolute;z-index:1;left:5%;width:90%;margin:0;text-align:center}
.pian-brand-eyebrow{top:14%}
.pian-brand-promise{top:65%;text-shadow:0 calc(1 * var(--dohwa-font-unit)) calc(8 * var(--dohwa-font-unit)) #000}
.pian-fate-invitation{position:relative;margin:0 calc(-16 * var(--dohwa-font-unit)) calc(28 * var(--dohwa-font-unit));padding-top:calc(48 * var(--dohwa-font-unit));isolation:isolate}
.pian-fate-invitation::before{content:"";position:absolute;z-index:-1;inset:50% 0 calc(-140 * var(--dohwa-font-unit));pointer-events:none;background:radial-gradient(ellipse at 50% 80%,rgb(133 18 38 / 20%),transparent 68%)}
.pian-fate-invitation>p{position:relative;z-index:2;text-align:center;margin:0 auto;width:90%}
.pian-fate-join{position:relative;width:100%;aspect-ratio:1/1;margin-top:calc(8 * var(--dohwa-font-unit));overflow:hidden}
.pian-fate-half{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.pian-fate-left{clip-path:inset(0 50% 0 0)}
.pian-fate-right{clip-path:inset(0 0 0 50%)}
.pian-fate-glimmer{position:absolute;inset:38%;border-radius:50%;background:radial-gradient(circle,rgb(255 78 104 / 42%),rgb(190 22 48 / 12%) 35%,transparent 72%);opacity:0;pointer-events:none}
@media(prefers-reduced-motion:no-preference){
  .pian-fate-join:not(.pian-enter) .pian-fate-left{transform:translate(-7%,3%);opacity:.6}
  .pian-fate-join:not(.pian-enter) .pian-fate-right{transform:translate(7%,-3%);opacity:.6}
  .pian-fate-join.pian-enter .pian-fate-left{animation:pian-fate-join-left 3.2s cubic-bezier(.2,.6,.2,1) both}
  .pian-fate-join.pian-enter .pian-fate-right{animation:pian-fate-join-right 3.2s cubic-bezier(.2,.6,.2,1) both}
  .pian-fate-join.pian-enter .pian-fate-glimmer{animation:pian-fate-join-glow 2.4s 2.2s ease-out both}
}
@keyframes pian-fate-join-left{from{transform:translate(-7%,3%);opacity:.6}to{transform:translate(0,0);opacity:1}}
@keyframes pian-fate-join-right{from{transform:translate(7%,-3%);opacity:.6}to{transform:translate(0,0);opacity:1}}
@keyframes pian-fate-join-glow{0%{transform:scale(.5);opacity:0}28%{opacity:1}100%{transform:scale(1.5);opacity:0}}

/* Approved shared 6 × 24 edition. Artwork lives in each chapter opening. */
.pian-unified-chapter{padding:calc(40 * var(--dohwa-font-unit)) calc(25 * var(--dohwa-font-unit)) calc(30 * var(--dohwa-font-unit));background:#160806;border:1px solid #956438;border-radius:calc(5 * var(--dohwa-font-unit));overflow:hidden;box-shadow:inset 0 0 0 4px #090403,inset 0 0 0 5px #9c71462b}
.pian-unified-chapter .pian-chapter-number{font-size:calc(13 * var(--dohwa-font-unit));margin-bottom:calc(12 * var(--dohwa-font-unit))}
.pian-unified-chapter>h2{font-size:calc(26 * var(--dohwa-font-unit));margin-bottom:calc(24 * var(--dohwa-font-unit))}
.pian-chapter-new-art{display:block;width:calc(100% + 50 * var(--dohwa-font-unit));max-width:none;height:auto;margin:0 calc(-25 * var(--dohwa-font-unit));aspect-ratio:2/3;mask-image:linear-gradient(#000 86%,transparent);-webkit-mask-image:linear-gradient(#000 86%,transparent)}
.pian-unified-chapter .pian-chapter-promise{position:relative;margin:calc(-10 * var(--dohwa-font-unit)) 0 calc(25 * var(--dohwa-font-unit));font-size:calc(17 * var(--dohwa-font-unit));text-wrap:balance}
.pian-unified-montage{height:82%;padding:0;mask-image:linear-gradient(#000 94%,transparent);-webkit-mask-image:linear-gradient(#000 94%,transparent)}
.pian-book-miniatures{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:calc(4 * var(--dohwa-font-unit)) calc(3 * var(--dohwa-font-unit));height:100%;filter:blur(calc(.7 * var(--dohwa-font-unit)));pointer-events:none}
.pian-book-miniatures article{background:#090403;overflow:hidden;text-align:left;padding:0 calc(2 * var(--dohwa-font-unit));color:#d8cbbd}
.pian-miniature-bar{background:#320c08;color:#d9b797;font:400 calc(3 * var(--dohwa-font-unit))/2.2 var(--dohwa-font-dialogue);padding-inline:calc(2 * var(--dohwa-font-unit));white-space:nowrap}
.pian-book-miniatures img{display:block;width:calc(100% + 4 * var(--dohwa-font-unit));max-width:none;height:auto;margin:0 calc(-2 * var(--dohwa-font-unit)) calc(4 * var(--dohwa-font-unit))}
.pian-book-miniatures small{display:block;font:500 calc(3.6 * var(--dohwa-font-unit))/1.5 var(--dohwa-font-dialogue);color:#c59d76}
.pian-book-miniatures h3{font:600 calc(4.4 * var(--dohwa-font-unit))/1.5 var(--dohwa-font-dialogue);margin:calc(4 * var(--dohwa-font-unit)) 0;color:#f1e0cc}
.pian-book-miniatures h4{font:600 calc(3.8 * var(--dohwa-font-unit))/1.5 var(--dohwa-font-dialogue);margin:calc(5 * var(--dohwa-font-unit)) 0 calc(2 * var(--dohwa-font-unit));color:#eadcc8}
.pian-book-miniatures p{font:400 calc(3.4 * var(--dohwa-font-unit))/1.65 var(--dohwa-font-reading);margin:0 0 calc(3 * var(--dohwa-font-unit));word-break:normal;text-align:justify}
.dohwa-checkout-chapters{list-style:none;margin:12px 0 22px;padding:0;color:#d4b28d;font:400 calc(14 * var(--dohwa-font-unit))/1.9 var(--dohwa-font-dialogue)}

.pian-fate-join.is-paused .pian-fate-half,.pian-fate-join.is-paused .pian-fate-glimmer{animation-play-state:paused}
