/* The encounter: a quiet opening, a procedural interruption, an editorial archive. */
html body .hero-bottom{justify-content:space-between!important;align-items:flex-end;gap:24px;left:5vw!important;right:5vw!important;bottom:48px!important}
.opening-premise{max-width:480px;color:#fff;text-shadow:0 2px 15px #000}
.opening-meta,.protocol-label{font:500 10px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.opening-premise p{font:400 clamp(22px,2.5vw,38px)/1.15 var(--serif);margin-top:12px}
.hero-cta-group{gap:22px;flex-wrap:wrap}
.opening-watch{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:52px;padding:16px 24px;background:#eee9df;color:#161616;font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.1em;transition:background .2s,transform .2s}
.opening-watch:hover{background:#fff;transform:translateY(-2px)}
html body .hero-bottom .enter{letter-spacing:.1em;text-indent:0;min-height:48px;justify-content:center}
html body .hero-bottom .scroll-line{height:18px;margin-top:8px}
.sp-consent-note{font:11px/1.7 var(--mono);max-width:36em;margin:24px auto!important;color:#aaa}
/* A single quiet call to action, composed with the title and room. */
html body .hero-bottom{justify-content:center!important;bottom:54px!important;align-items:center!important}
.opening-premise{position:absolute;left:0;bottom:0;text-shadow:0 1px 4px #0008}
.opening-meta{font-size:9px;letter-spacing:.14em;opacity:.8}
.hero-cta-group{gap:34px;align-items:center}
.opening-watch{background:none;color:#fff;padding:0;min-height:54px;font-size:10px;letter-spacing:.16em;gap:13px;text-shadow:0 1px 4px #0008}
.opening-watch>span{width:48px;height:48px;border:1px solid #ffffff80;border-radius:50%;display:grid;place-items:center;padding-left:2px;font-size:10px;transition:background .3s}
.opening-watch:hover{background:none;transform:none}.opening-watch:hover>span{background:#ffffff20}
html body .hero-bottom .enter{opacity:.75!important;font-size:9px!important;letter-spacing:.12em;flex-direction:row;gap:14px}
html body .hero-bottom .scroll-line{height:24px;margin:0}
.sp-world{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 46%,#392f31 0%,#111a1c 45%,#040708 90%);overflow:hidden}
.sp-world::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 35% 65%,#7c061633,transparent 60%),linear-gradient(#0004,transparent 25%,transparent 70%,#0008);pointer-events:none}
.sp-world canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.sp-world-fallback{position:absolute;width:52%;height:76%;top:12%;left:24%;object-fit:contain;opacity:.55;filter:sepia(.2)}
.sp-world.is-rendered .sp-world-fallback{display:none}
.sp-sculpture-scene .sp-cap{z-index:2;text-shadow:0 2px 24px #0008!important}
.sp-sculpture-scene .sp-stage{background:#050809}
@media(max-width:650px){html body .hero-bottom{bottom:80px!important}.opening-premise{position:static;order:2;margin-top:16px}.hero-cta-group{gap:22px}.opening-watch{font-size:9px}.opening-watch>span{width:42px;height:42px}html body .hero-bottom .enter{font-size:8px!important}.sp-world-fallback{width:80%;left:10%}}
@mediaall{:where(html[data-koan-motion="reduced"]) .sp-sculpture-scene .sp-stage{min-height:85svh}:where(html[data-koan-motion="reduced"]) .sp-sculpture-scene .sp-world{position:absolute}:where(html[data-koan-motion="reduced"]) .opening-watch>span{transition:none}}
.opening-replay{font:18px var(--serif);opacity:.7;min-width:44px;min-height:44px;margin-left:10px;vertical-align:middle}
.cinema-opening{position:fixed;inset:0;border:0;margin:0;padding:0;width:100vw;height:100svh;max-width:none;max-height:none;background:#080909;color:#e8e3d9;overflow:hidden;clip-path:inset(0);transition:clip-path 1.4s cubic-bezier(.76,0,.24,1)}
.cinema-opening::backdrop{background:transparent}
.cinema-opening::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,#39434422,transparent 58%);pointer-events:none}
.cinema-studio{position:absolute;top:44px;left:0;width:100%;text-align:center;font:10px var(--mono);letter-spacing:.36em;color:#a5a79f}
.cinema-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;transition:opacity .35s}
.cinema-label{font:10px var(--mono);letter-spacing:.3em;text-transform:uppercase;animation:cinema-text 1.1s both}
.cinema-clock{font:300 clamp(76px,15vw,220px)/1.3 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.07em;margin:15px 0 25px;padding-right:.07em;animation:cinema-clock 1.6s both;text-shadow:0 0 50px #abc5c415}
.cinema-line{width:90px;height:1px;background:#b8c3b3;transform-origin:left;animation:cinema-line 2.4s both}
.cinema-note{font:400 clamp(16px,2vw,24px)/1.5 var(--serif);margin-top:30px!important;animation:cinema-text 1.1s .6s both;color:#b6b8ac}
.cinema-skip{position:absolute;bottom:36px;right:5vw;font:10px var(--mono);letter-spacing:.1em;min-height:44px;color:#b6b8ac}
.cinema-opening.is-revealing{clip-path:inset(50% 0)}
.cinema-opening.is-revealing .cinema-center,.cinema-opening.is-revealing .cinema-studio,.cinema-opening.is-revealing .cinema-skip{opacity:0;transition:opacity .3s}
@keyframes cinema-text{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes cinema-clock{from{opacity:0;filter:blur(9px);transform:scale(1.06)}to{opacity:1;filter:none;transform:scale(1)}}
@keyframes cinema-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@mediaall{:where(html[data-koan-motion="reduced"]) .cinema-opening{display:none}:where(html[data-koan-motion="reduced"]) .opening-replay{display:none}}
.sp-sculpture-scene .sp-cap{font:400 clamp(48px,7.2vw,106px)/1.04 var(--serif)!important;text-transform:none!important;letter-spacing:-.035em!important;max-width:950px!important}
.sp-sculpture-scene .sp-cap:first-of-type{--y:72%!important}
/* Illustrated epilogue: ultramarine space, warm printed sculpture, cyan edge light. */
.sp-world{background:radial-gradient(ellipse at 47% 44%,#41418c 0%,#22265d 36%,#090e29 78%,#050b1c 100%)}
.sp-world::after{background:radial-gradient(ellipse at 28% 73%,#d44d5530,transparent 55%),linear-gradient(#05091755,transparent 22%,transparent 75%,#050917bb)}
.sp-sculpture-scene .sp-cap{max-width:1050px!important;font-size:clamp(54px,8.5vw,130px)!important;line-height:.92!important;text-wrap:balance;color:#fff3de!important}
.sp-sculpture-scene .sp-cap:first-of-type{--y:68%!important;max-width:850px!important}
.sp-sculpture-scene .sp-last-cap{font-style:italic!important;max-width:940px!important}
.sp-world::after{background:linear-gradient(#05091733,transparent 25%,transparent 75%,#05091788)}
/* One shared world spans the break and the next morning. */
.sp-world-chapters{position:relative;isolation:isolate}
.sp-world-pin{position:sticky;top:0;height:100svh;margin-bottom:-100svh;z-index:0;pointer-events:none;overflow:hidden}
.sp-world-chapters>.sp-scene,.sp-world-chapters>.sp-news{position:relative;z-index:1;background:transparent!important}
.sp-world-chapters .sp-stage{background:transparent!important}
.sp-world-chapters .sp-news{padding-top:14svh!important;padding-bottom:18svh!important}
.sp-world-chapters .sp-article{width:min(76vw,980px);margin-inline:auto;box-shadow:0 35px 100px #0007;transform-origin:50% 0}
.sp-world-chapters .sp-news>.sp-label{width:min(76vw,980px);margin:0 auto 30px!important;font-size:12px!important;letter-spacing:.24em!important;color:#f3dec6!important}
.sp-sculpture-scene .sp-cap{max-width:1050px!important;font-style:normal!important;text-shadow:0 3px 35px #070815aa!important}
.sp-sculpture-scene .sp-cap .w{font-style:normal}
.sp-sculpture-scene .sp-cap:first-of-type{--y:62%!important}
.sp-sculpture-scene .sp-cap:first-of-type .w:nth-child(-n+2){font-size:.44em;letter-spacing:.015em;vertical-align:super;font-style:italic}
.sp-sculpture-scene .sp-cap:first-of-type .w:nth-child(3)::before{content:'';display:block}
.sp-sculpture-scene .sp-last-cap{font-size:clamp(62px,10vw,150px)!important;letter-spacing:-.055em!important;max-width:1000px!important}
.sp-sculpture-scene .sp-last-cap .w:nth-child(1){font-size:.44em;font-style:italic}
.sp-sculpture-scene .sp-last-cap .w:nth-child(2){font-style:italic}
.sp-sculpture-scene .sp-last-cap .w:nth-child(3),.sp-sculpture-scene .sp-last-cap .w:nth-child(4),.sp-sculpture-scene .sp-last-cap .w:nth-child(5){font-size:.48em;letter-spacing:0}
.sp-world-chapters .sp-headline{font:400 clamp(40px,5.8vw,84px)/.98 var(--serif)!important;letter-spacing:-.04em!important}
@media(max-width:650px){.sp-world-chapters .sp-article,.sp-world-chapters .sp-news>.sp-label{width:88vw}.sp-sculpture-scene .sp-last-cap{font-size:17vw!important}.sp-sculpture-scene .sp-cap:first-of-type{font-size:16vw!important}.sp-world-chapters .sp-news{padding-top:9svh!important}}
@mediaall{:where(html[data-koan-motion="reduced"]) .sp-world-pin{position:absolute;inset:0;height:100%;margin:0}:where(html[data-koan-motion="reduced"]) .sp-world-chapters .sp-world{height:100svh}:where(html[data-koan-motion="reduced"]) .sp-world-chapters .sp-news{background:#080c17!important}}
/* Set the English titles as compositions, with a genuine drawn italic face. */
@font-face{font-family:Koan Editorial;src:url('assets/fonts/oldstandard-400i.woff2') format('woff2');font-style:italic;font-weight:400;font-display:swap}
html:lang(en) .sp-sculpture-scene .sp-cap{display:grid;justify-content:center;grid-template-columns:max-content max-content;column-gap:.15em;row-gap:0;text-align:center;line-height:.82!important}
html:lang(en) .sp-sculpture-scene .sp-cap:first-of-type .w:nth-child(-n+2){font-family:Koan Editorial,serif;font-size:.34em;line-height:1.3;vertical-align:baseline;letter-spacing:-.035em}
html:lang(en) .sp-sculpture-scene .sp-cap:first-of-type .w:nth-child(1){justify-self:end}
html:lang(en) .sp-sculpture-scene .sp-cap:first-of-type .w:nth-child(2){justify-self:start}
html:lang(en) .sp-sculpture-scene .sp-cap:first-of-type .w:nth-child(3){justify-self:end}
html:lang(en) .sp-sculpture-scene .sp-cap:first-of-type .w:nth-child(4){justify-self:start}
html:lang(en) .sp-sculpture-scene .sp-last-cap{grid-template-columns:repeat(3,max-content);font-size:clamp(68px,12vw,180px)!important;column-gap:.12em;--y:54%!important}
html:lang(en) .sp-sculpture-scene .sp-last-cap .w:nth-child(1){grid-column:1/-1;font-family:Koan Editorial,serif;font-style:italic;font-size:.3em;line-height:1.1;justify-self:start;margin-left:.2em}
html:lang(en) .sp-sculpture-scene .sp-last-cap .w:nth-child(2){grid-column:1/-1;font-style:normal;letter-spacing:-.055em;line-height:.92}
html:lang(en) .sp-sculpture-scene .sp-last-cap .w:nth-child(n+3):nth-child(-n+5){font-family:Koan Editorial,serif;font-style:italic;font-size:.29em;line-height:1.65;letter-spacing:-.025em}
html:lang(en) .sp-sculpture-scene .sp-last-cap .w:nth-child(6){grid-column:1/-1;line-height:.8;letter-spacing:-.055em}
@media(max-width:650px){html:lang(en) .sp-sculpture-scene .sp-last-cap{font-size:19vw!important}}
/* The ceramic world persists through every chapter, beneath the narrative. */
.sp-world-chapters>section{position:relative;z-index:1;background:transparent!important}
.sp-world-chapters .sp-stage{background:transparent!important}
.sp-world-chapters .sp-cap,.sp-world-chapters .sp-num,.sp-world-chapters .sp-dis{color:#fff0d9;text-shadow:0 2px 3px #10070ae6,0 8px 28px #05030cf2,0 0 24px #ffbe7338,0 0 65px #f4924226!important}
.sp-world-chapters .sp-sculpture-scene .sp-cap{text-shadow:0 3px 5px #150909,0 12px 40px #05030cf2,0 0 28px #ffca864f,0 0 80px #e9954833!important}
.sp-world-chapters .sp-half{background-color:#10121cc9;backdrop-filter:blur(3px)}
.sp-world-chapters .sp-integri{color:#f6e9d4}
.sp-world-chapters .sp-statement img{opacity:.5}
.sp-world-chapters .sp-s-shock .sp-cap{--y:25%!important;font-size:clamp(38px,5.3vw,78px)!important;max-width:850px!important;line-height:1.02!important;letter-spacing:-.035em!important}
/* Contrast lives on each animated word, not only its parent caption. */
#spoiler .sp-world-chapters .sp-cap .w,
#spoiler .sp-world-chapters .sp-cap .sp-qi{
color:#fff5e4!important;
text-shadow:0 2px 2px #08050aff,0 0 5px #08050aff,0 5px 16px #08050aff,0 12px 32px #08050af2,0 0 24px #ffd39780,0 0 55px #ef9b4b45!important;
}
#spoiler .sp-sculpture-scene .sp-cap{isolation:isolate;overflow:visible}
/* Unified epilogue typography: Old Standard + the existing monospaced utility face. */
@font-face{font-family:Koan Editorial;src:url('assets/fonts/oldstandard-400.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
html:lang(en) body #spoiler .sp-world-chapters{--serif:'Koan Editorial',serif;--k-font-body:'Koan Editorial',serif;--k-font-display:'Koan Editorial',serif}
html:lang(en) body #spoiler .sp-cap,html:lang(en) body #spoiler .sp-bigcap,html:lang(en) body #spoiler .sp-faith,html:lang(en) body #spoiler .sp-num,html:lang(en) body #spoiler .sp-headline{font-family:'Koan Editorial',serif!important;font-weight:400!important;text-transform:none!important;letter-spacing:-.035em!important}
html:lang(en) body #spoiler .sp-cap{font-size:clamp(34px,5.3vw,80px)!important;line-height:1.08!important;max-width:15em!important}
html:lang(en) body #spoiler .sp-bigcap{font-size:clamp(48px,7.7vw,116px)!important;line-height:1!important;max-width:12em!important}
html:lang(en) body #spoiler .sp-bigcap .w{margin-right:0!important}
html:lang(en) body #spoiler .sp-num{font-size:clamp(66px,13vw,200px)!important;color:#fff3df!important;background:none!important;-webkit-text-fill-color:#fff3df!important;filter:none!important}
html body #spoiler .sp-num::after{display:none!important}
html body #spoiler .sp-world-chapters .sp-cap,html body #spoiler .sp-world-chapters .sp-cap .w,html body #spoiler .sp-world-chapters .sp-num,html body #spoiler .sp-world-chapters .sp-dis{color:#fff2df!important;text-shadow:0 0 18px #f4bf733d,0 0 48px #ef974126,0 6px 22px #070610c9!important;-webkit-text-stroke:0!important}
html body #spoiler .sp-s-spread .sp-rings{display:none}
html body #spoiler .sp-s-spread .sp-cap{--y:20%!important;font-size:clamp(36px,4.6vw,68px)!important;max-width:15em!important}
html:lang(en) body #spoiler .sp-sculpture-scene .sp-last-cap{font-size:clamp(68px,11vw,166px)!important}
@media(max-width:650px){html:lang(en) body #spoiler .sp-sculpture-scene .sp-last-cap{font-size:18vw!important}}
@font-face{font-family:Koan Script;src:url('assets/fonts/pinyon-script.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
/* Two expressive title voices: crisp editorial serif and restrained calligraphy. */
html:lang(en) body #spoiler .sp-sculpture-scene .sp-cap:first-of-type .w:nth-child(-n+2),
html:lang(en) body #spoiler .sp-sculpture-scene .sp-last-cap .w:first-child{font-family:'Koan Script',cursive!important;font-style:normal!important;font-size:.52em!important;line-height:1!important}
html:lang(en) body #spoiler .sp-cap .sp-qi{font-family:'Koan Script',cursive!important;font-size:1.35em!important;font-style:normal!important}
html:lang(en) body #spoiler .sp-s-shock .sp-cap .w:last-child{font-family:'Koan Script',cursive!important;font-size:1.3em!important;line-height:.85!important}
html:lang(en) body #spoiler .sp-faith{font-family:'Koan Editorial',serif!important}
/* ── 9 Oct, one look: black grain field, overhead light, luminous type (supersedes the colour experiments above) ── */
html body #spoiler .sp-world{background:radial-gradient(ellipse 60% 45% at 50% -5%,#4a3012 0%,#0e0a07 55%,#050404 100%)!important}
html body #spoiler .sp-world::after{background:none!important}
html body #spoiler .sp-s-fight,html body #spoiler .sp-s-spread,html body #spoiler .sp-s-riya2{background:transparent!important}
html body #spoiler .sp-stage .sp-flash{display:none!important}
#spoiler .sp-world-chapters{--glow:#fff6e6;--halo:255,208,140}
/* Words glow from within: a bright core, a soft bloom, a dark bed beneath so fragments never camouflage them. */
html body #spoiler .sp-world-chapters .sp-cap,html body #spoiler .sp-world-chapters .sp-cap .w,html body #spoiler .sp-world-chapters .sp-cap .sp-qi,
html body #spoiler .sp-world-chapters .sp-dis,html body #spoiler .sp-world-chapters .sp-dis-l,html body #spoiler .sp-world-chapters .sp-dis-r,
html body #spoiler .sp-world-chapters .sp-num,html body #spoiler .sp-world-chapters .sp-flow:not(.sp-news) p,html body #spoiler .sp-world-chapters .sp-line,
html body #spoiler .sp-world-chapters .sp-faith,html body #spoiler .sp-world-chapters .sp-count-label{
color:var(--glow)!important;-webkit-text-fill-color:currentColor!important;
text-shadow:0 0 1px rgba(var(--halo),1),0 0 8px rgba(var(--halo),.75),0 0 22px rgba(var(--halo),.5),0 0 55px rgba(var(--halo),.32),0 0 120px rgba(var(--halo),.18)!important}
html body #spoiler .sp-world-chapters .sp-note,html body #spoiler .sp-world-chapters .sp-label,html body #spoiler .sp-world-chapters .sp-count-label{--halo:255,214,170}
/* The Jamshedpur Night: the world floods crimson and the name burns red. */
html body #spoiler .sp-world-chapters .sp-red,html body #spoiler .sp-world-chapters .sp-red .w{
color:#ff4a36!important;-webkit-text-fill-color:#ff4a36!important;
text-shadow:0 0 2px #ff8a70,0 0 12px #ff2618d9,0 0 34px #e00a14b3,0 0 90px #b0000a99,0 6px 24px #000c!important}
/* The count: pale glowing numerals that fill with blood as you scroll. */
html body #spoiler .sp-world-chapters .sp-num{position:relative;display:block}
html body #spoiler .sp-world-chapters .sp-num::after{
display:block!important;content:attr(data-n);position:absolute;inset:0!important;pointer-events:none;
background:linear-gradient(180deg,#ff3b2a 0%,#c80c16 40%,#6e0009 100%)!important;
-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important;
text-shadow:none!important;filter:drop-shadow(0 0 10px #ff1d1d99) drop-shadow(0 0 34px #b0000a88);
-webkit-mask:url("data:image/svg+xml;utf8,") 0 calc(var(--fill,0)*100%)/240px 200% repeat-x;
mask:url("data:image/svg+xml;utf8,") 0 calc(var(--fill,0)*100%)/240px 200% repeat-x;
animation:sp-blood 2.6s linear infinite}
@keyframes sp-blood{from{-webkit-mask-position:0 calc(var(--fill,0)*100%);mask-position:0 calc(var(--fill,0)*100%)}to{-webkit-mask-position:240px calc(var(--fill,0)*100%);mask-position:240px calc(var(--fill,0)*100%)}}
@mediaall{html:where([data-koan-motion="reduced"]) body #spoiler .sp-world-chapters .sp-num::after{animation:none}}
html body #spoiler .sp-world-chapters .sp-cap::before{display:none!important}
/* With the shard crowds and map gone, those captions return to the centre of the frame. */
html body #spoiler .sp-world-chapters .sp-s-shock .sp-cap,html body #spoiler .sp-world-chapters .sp-s-spread .sp-cap{--y:50%!important}
/* The litany stays a quiet spaced label beneath its headline, as on the live site. */
html:lang(en) body #spoiler .sp-world-chapters .sp-stack.sp-stack-sub,html:lang(en) body #spoiler .sp-world-chapters .sp-stack.sp-stack-sub .w{font:400 clamp(12px,1.1vw,15px)/1.4 var(--k-font-mono)!important;letter-spacing:.32em!important;text-transform:uppercase!important;max-width:none!important}
/* ════ 9 Oct, second pass: a graded, grained, quieter film (overrides the size and glow rules above) ════ */
/* Film grain over the whole record, words included: coarse luminance grain in the mids, a whisper in the blacks. */
#spoiler .sp-grain{position:fixed;inset:-80px;z-index:45;pointer-events:none;opacity:.3;mix-blend-mode:overlay;
background:url("data:image/svg+xml;utf8,");
animation:sp-grain .8s steps(8) infinite}
#spoiler .sp-grain::after{content:'';position:absolute;inset:0;background:inherit;background-size:190px;mix-blend-mode:screen;opacity:.16;animation:sp-grain 1.1s steps(6) infinite reverse}
@keyframes sp-grain{0%{transform:translate(0,0)}12%{transform:translate(-31px,17px)}25%{transform:translate(22px,-29px)}37%{transform:translate(-14px,-41px)}50%{transform:translate(38px,12px)}62%{transform:translate(-40px,30px)}75%{transform:translate(9px,44px)}87%{transform:translate(29px,-9px)}100%{transform:translate(0,0)}}
@mediaall{:where(html[data-koan-motion="reduced"]) #spoiler .sp-grain,:where(html[data-koan-motion="reduced"]) #spoiler .sp-grain::after{animation:none}}
/* Restrained halation instead of neon: a fine core, a soft bloom, a warm fringe. */
#spoiler #sp-story .sp-world-chapters{--glow:#f6ecdb;--halo:255,214,160}
html body #spoiler #sp-story .sp-world-chapters :is(.sp-cap,.sp-cap .w,.sp-cap .sp-qi,.sp-dis,.sp-dis-l,.sp-dis-r,.sp-flow:not(.sp-news) p,.sp-line,.sp-faith,.sp-count-label){
color:var(--glow)!important;-webkit-text-fill-color:currentColor!important;
text-shadow:0 0 .6px rgba(var(--halo),.75),0 0 9px rgba(var(--halo),.3),0 0 30px rgba(var(--halo),.15),0 0 2px rgba(255,110,60,.18)!important}
/* Scale: titles, not billboards. */
html body #spoiler #sp-story .sp-world-chapters .sp-cap{font-size:clamp(24px,2.9vw,44px)!important;line-height:1.2!important;max-width:18em!important}
html body #spoiler #sp-story .sp-world-chapters .sp-bigcap{font-size:clamp(36px,4.8vw,76px)!important;line-height:1.04!important}
html body #spoiler #sp-story .sp-sculpture-scene .sp-cap{font-size:clamp(42px,6vw,96px)!important}
html body #spoiler #sp-story .sp-sculpture-scene .sp-last-cap{font-size:clamp(46px,6.6vw,104px)!important}
html body #spoiler #sp-story .sp-world-chapters .sp-stack-lead{font:400 clamp(28px,3.4vw,52px)/1.1 'Koan Editorial',serif!important;text-transform:none!important}
html body #spoiler #sp-story .sp-world-chapters :is(.sp-read,.sp-end,.sp-aman) p:not(.sp-ugly){font-size:clamp(18px,1.55vw,23px)!important;line-height:1.65!important}
html body #spoiler #sp-story .sp-world-chapters .sp-ugly{font:400 italic clamp(40px,5.4vw,86px)/1 'Koan Editorial',serif!important;text-transform:none!important;letter-spacing:-.02em!important}
html body #spoiler #sp-story .sp-world-chapters .sp-last p:not(.sp-since):not(.sp-legend){font:400 clamp(24px,2.7vw,40px)/1.15 'Koan Editorial',serif!important;text-transform:none!important}
html body #spoiler #sp-story .sp-world-chapters .sp-faith{font-size:clamp(30px,3.3vw,52px)!important;text-transform:none!important}
html body #spoiler #sp-story .sp-world-chapters .sp-dis-l{font:400 clamp(24px,3vw,46px)/1 'Koan Editorial',serif!important;text-transform:none!important}
html body #spoiler #sp-story .sp-world-chapters .sp-dis-r{font-size:clamp(28px,3.6vw,56px)!important}
html body #spoiler #sp-story .sp-world-chapters .sp-statement blockquote{font-size:clamp(22px,2.5vw,36px)!important}
@media(max-width:650px){html body #spoiler #sp-story .sp-sculpture-scene .sp-cap,html body #spoiler #sp-story .sp-sculpture-scene .sp-last-cap{font-size:12.5vw!important}}
/* The count: bone numerals; dark blood seeps up through them as you scroll. Quiet, not celebratory. */
html body #spoiler #sp-story .sp-world-chapters .sp-num{font-size:clamp(54px,8vw,128px)!important;color:#d6cdbd!important;-webkit-text-fill-color:#d6cdbd!important;letter-spacing:-.02em!important;
text-shadow:0 0 .5px #fff6,0 0 22px #b9a99022,0 14px 40px #000!important}
html body #spoiler #sp-story .sp-world-chapters .sp-num::after{background-image:linear-gradient(180deg,#8a0b12 0%,#560409 55%,#2e0104 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;filter:drop-shadow(0 0 5px #5a000a66)!important;animation-duration:7s!important}
html body #spoiler #sp-story .sp-world-chapters .sp-count-label{--halo:200,190,175;color:#f6ecdb9e!important}
/* The Jamshedpur Night: a light sweeps through the burning letters; heat bends the air around them. */
html body #spoiler #sp-story .sp-world-chapters .sp-cap.sp-red{filter:url(#sp-heat) drop-shadow(0 0 2px #ff9a7a) drop-shadow(0 0 12px #ff2a1acc) drop-shadow(0 0 44px #ff10148c)}
html body #spoiler #sp-story .sp-world-chapters .sp-cap.sp-red .w.w{text-shadow:none!important;color:transparent!important;-webkit-text-fill-color:transparent!important;
background:linear-gradient(100deg,#ff3a28 0%,#ff5a40 36%,#fff0e2 47%,#ff6248 56%,#ff3426 100%);background-size:320% 100%;-webkit-background-clip:text;background-clip:text;
animation:sp-shimmer 4.6s cubic-bezier(.55,0,.3,1) infinite;animation-delay:calc(var(--i)*.16s)}
@keyframes sp-shimmer{0%{background-position:110% 0}55%,100%{background-position:-10% 0}}
@mediaall{html:where([data-koan-motion="reduced"]) body #spoiler #sp-story .sp-world-chapters .sp-cap.sp-red .w.w{animation:none;background-position:50% 0}}
/* After the riots: one line per frame, carried sideways by the scroll, racked in and out of focus. */
#spoiler #sp-story .sp-s-lines .sp-hstage{overflow:hidden}
#spoiler #sp-story .sp-h-label{position:absolute;top:15svh;left:0;right:0;z-index:2;text-align:center;margin:0!important}
#spoiler #sp-story .sp-htrack{position:absolute;top:0;left:0;height:100%;width:400vw;display:flex;transform:translate3d(calc(var(--hp,var(--p))*-300vw),0,0);will-change:transform}
#spoiler #sp-story .sp-hpanel{--d:max(calc(var(--hp,var(--p))*3 - var(--i)),calc(var(--i) - var(--hp,var(--p))*3));flex:0 0 100vw;margin:0!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
opacity:calc(1 - min(var(--d),1)*.9);filter:blur(calc(min(var(--d),1)*8px));transform:scale(calc(1 - min(var(--d),1)*.05))}
#spoiler #sp-story .sp-hnum{font:400 10px/1 var(--k-font-mono);letter-spacing:.42em;text-transform:uppercase;color:#f6ecdb99}
html body #spoiler #sp-story .sp-world-chapters .sp-hpanel .sp-line{font:400 clamp(32px,4.4vw,70px)/1.08 'Koan Editorial',serif!important;text-transform:none!important;letter-spacing:-.03em!important;max-width:11em;text-align:center}
html body #spoiler #sp-story .sp-world-chapters .sp-hpanel-hard .sp-line{font-style:italic!important;font-size:clamp(38px,5.2vw,84px)!important}
#spoiler #sp-story .sp-hstage::after{content:'';position:absolute;left:38%;right:38%;bottom:17svh;height:1px;background:linear-gradient(90deg,#f6ecdbaa calc(var(--p)*100%),#f6ecdb22 0)}
@mediaall{:where(html[data-koan-motion="reduced"]) #spoiler #sp-story .sp-htrack{position:static;width:auto;transform:none;flex-direction:column}:where(html[data-koan-motion="reduced"]) #spoiler #sp-story .sp-hpanel{flex:none;min-height:40svh;opacity:1;filter:none;transform:none}:where(html[data-koan-motion="reduced"]) #spoiler #sp-story .sp-h-label{position:static}}
/* Kishōtenketsu: the act is marked quietly in the corner; its character rises and settles at each act. */
#spoiler .sp-act{position:absolute;inset:0;pointer-events:none}
#spoiler .sp-act p{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.8s ease}
#spoiler .sp-act span,#spoiler .sp-act em{position:absolute;left:clamp(16px,3vw,40px);bottom:clamp(20px,4.5svh,44px);font:400 10px/1 var(--k-font-mono);letter-spacing:.28em;text-transform:uppercase;color:#f3e6d0a0}
#spoiler .sp-act em{bottom:calc(clamp(20px,4.5svh,44px) + 18px);font:italic 400 15px/1 'Koan Editorial',serif;letter-spacing:0;text-transform:none;color:#f6ecdbcc}
#spoiler .sp-act b{position:absolute;right:clamp(14px,5vw,80px);top:50%;transform:translateY(-50%);font:400 clamp(90px,13vw,210px)/1 'Hiragino Mincho ProN','Yu Mincho','Noto Serif JP',serif;color:#fff;opacity:.045}
#spoiler [data-act="1"]>.sp-world-pin .sp-act p[data-act="1"],#spoiler [data-act="2"]>.sp-world-pin .sp-act p[data-act="2"],
#spoiler [data-act="3"]>.sp-world-pin .sp-act p[data-act="3"],#spoiler [data-act="4"]>.sp-world-pin .sp-act p[data-act="4"]{opacity:1}
#spoiler [data-act="1"]>.sp-world-pin .sp-act p[data-act="1"] b,#spoiler [data-act="2"]>.sp-world-pin .sp-act p[data-act="2"] b,
#spoiler [data-act="3"]>.sp-world-pin .sp-act p[data-act="3"] b,#spoiler [data-act="4"]>.sp-world-pin .sp-act p[data-act="4"] b{animation:sp-act 3.4s cubic-bezier(.2,.7,.2,1) both}
@keyframes sp-act{from{opacity:.32;filter:blur(0);transform:translateY(-50%) scale(1.06)}to{opacity:.045;filter:blur(.6px);transform:translateY(-50%) scale(1)}}
@media(max-width:650px){#spoiler .sp-act b{font-size:26vw;right:4vw;opacity:.035}#spoiler .sp-act em{display:none}}
/* The War of the Vase, under ice. Scrubbing clears it; it thaws as the war moves on. */
#spoiler #sp-story .sp-s-vase .sp-ice{position:absolute;inset:0;pointer-events:none;
--on:clamp(0,(var(--p) - .2)/.06,1);--off:clamp(0,(var(--p) - .62)/.12,1);opacity:calc(var(--on)*(1 - var(--off)));
-webkit-backdrop-filter:blur(12px) saturate(.45) brightness(.95) hue-rotate(-8deg);backdrop-filter:blur(12px) saturate(.45) brightness(.95) hue-rotate(-8deg);
background:url("data:image/svg+xml;utf8,"),
radial-gradient(ellipse 75% 70% at 50% 48%,#a9cfe40d 0%,#b8daee22 55%,#dcefff70 85%,#f2faffc0 100%);
-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
#spoiler #sp-story .sp-s-vase .sp-ice.is-clear{opacity:0;transition:opacity 2.6s ease}
#spoiler #sp-story .sp-ice-hint{position:absolute;left:0;right:0;bottom:21svh;text-align:center;font:400 10px/1 var(--k-font-mono);letter-spacing:.36em;text-transform:uppercase;color:#eef8ff;text-shadow:0 0 14px #8fc9ff;transition:opacity .9s}
#spoiler #sp-story .sp-ice.is-touched .sp-ice-hint{opacity:0}
@mediaall{:where(html[data-koan-motion="reduced"]) #spoiler #sp-story .sp-ice{display:none}}
html body #spoiler #sp-story .sp-world-chapters .sp-cap.sp-red{font-size:clamp(44px,6vw,96px)!important}
/* Feathered frost creeps in from the edges only; the centre stays glassy. */
#spoiler #sp-story .sp-s-vase .sp-ice::before{content:'';position:absolute;inset:0;opacity:.55;
background:url("data:image/svg+xml;utf8,") center/cover;
-webkit-mask:radial-gradient(ellipse 62% 58% at 50% 50%,transparent 45%,#000 100%);mask:radial-gradient(ellipse 62% 58% at 50% 50%,transparent 45%,#000 100%)}
#spoiler #sp-story .sp-s-vase .sp-ice{z-index:0}
#spoiler #sp-story .sp-s-vase .sp-stage{-webkit-user-select:none;user-select:none}
#spoiler #sp-story .sp-s-vase .sp-stage>.sp-cap{z-index:1}
/* ════ 9 Oct, third pass: composition, title cards, blanking, liquid count, ice ════ */
/* Narrative lines speak from opposite corners, like a dialogue across the frame. */
html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-cap.sp-at-l,html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-cap.sp-at-r{
top:auto;left:auto;right:auto;max-width:11.5em!important;font-size:clamp(28px,3.4vw,54px)!important;line-height:1.02!important;letter-spacing:-.03em!important;margin:0!important}
html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-cap.sp-at-l{top:22%;left:clamp(20px,8vw,140px);text-align:left}
html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-cap.sp-at-r{top:66%;right:clamp(20px,8vw,140px);text-align:right}
/* A calligraphic capital opens each line: the serif carries the sentence, the swash the voice. */
html body #spoiler #sp-story .sp-stage>.sp-cap:is(.sp-at-l,.sp-at-r,.sp-bigcap) .w:first-child::first-letter{font-family:'Koan Script',cursive;font-size:1.75em;line-height:.5;margin-right:-.06em;vertical-align:-.06em;font-style:normal}
html:lang(hi) body #spoiler #sp-story .sp-stage>.sp-cap .w:first-child::first-letter{font:inherit;margin:0}
/* Opening: the words on the left third, the vessel on the right. */
html:lang(en) body #spoiler #sp-story .sp-sculpture-scene .sp-cap{justify-content:start!important;left:clamp(20px,8vw,140px)!important;right:auto!important;text-align:left!important}
html:lang(en) body #spoiler #sp-story .sp-sculpture-scene .sp-cap .w{justify-self:start!important}
@media(max-width:650px){html:lang(en) body #spoiler #sp-story .sp-sculpture-scene .sp-cap{--y:80%!important}}
/* Act label only; no characters. */
#spoiler .sp-act b{display:none}
/* The Jamshedpur Night, a title card: black frame, a single red light from above, luminous script and serif. */
html body #spoiler #sp-story .sp-world-chapters .sp-cap.sp-red{display:grid!important;justify-items:center;font-size:clamp(70px,10.5vw,170px)!important;line-height:.86!important;filter:drop-shadow(0 0 2px #ffb3a8) drop-shadow(0 0 14px #ff2a2299) drop-shadow(0 0 48px #d0081466)!important;max-width:none!important}
html body #spoiler #sp-story .sp-world-chapters .sp-cap.sp-red .w.w{background:linear-gradient(100deg,#ffd6cf 0%,#ffe6e0 38%,#fffaf8 47%,#ffdcd4 56%,#ffc9bf 100%);background-size:320% 100%;-webkit-background-clip:text;background-clip:text;animation-duration:5.5s}
html body #spoiler #sp-story .sp-world-chapters .sp-cap.sp-red .w:nth-child(1){justify-self:start;font-family:'Koan Editorial',serif;font-style:italic;font-size:.3em;margin-left:.6em;line-height:1.2}
html body #spoiler #sp-story .sp-world-chapters .sp-cap.sp-red .w:nth-child(2)::first-letter{font-family:'Koan Script',cursive;font-size:1.5em;line-height:.6;margin-right:-.12em;vertical-align:-.08em}
html body #spoiler #sp-story .sp-world-chapters .sp-cap.sp-red .w:nth-child(3){justify-self:end;font-size:.42em;letter-spacing:-.02em;margin-right:.3em}
/* Output blanking: true black 2.39:1 bars that close in for title cards. */
#spoiler .sp-blank{position:fixed;inset:0;z-index:44;pointer-events:none}
#spoiler .sp-blank i{position:absolute;left:0;right:0;height:max(8svh,calc((100svh - 100vw / 2.39) / 2));background:#000;transform:scaleY(0);transition:transform 1.15s cubic-bezier(.76,0,.24,1)}
#spoiler .sp-blank i:first-child{top:0;transform-origin:50% 0}
#spoiler .sp-blank i:last-child{bottom:0;transform-origin:50% 100%}
#spoiler .sp-blank.is-on i{transform:scaleY(1)}
@mediaall{:where(html[data-koan-motion="reduced"]) #spoiler .sp-blank i{transition:none}}
/* The count, drawn as vector type: bone numerals with liquid blood inside. */
html body #spoiler #sp-story .sp-world-chapters .sp-num.is-liquid{color:transparent!important;-webkit-text-fill-color:transparent!important;text-shadow:none!important}
html body #spoiler #sp-story .sp-world-chapters .sp-num.is-liquid::after{display:none!important}
#spoiler .sp-blood{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
#spoiler .sp-blood .sp-bone{fill:#ddd4c5;filter:drop-shadow(0 0 18px rgba(220,200,180,.12)) drop-shadow(0 12px 30px #000)}
#spoiler .sp-num.is-liquid{cursor:crosshair}
/* The interview was copied: four acts of reproduction, each with its mark. */
html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-ico{left:var(--x)!important;right:auto!important;width:min(20vw,230px);text-align:center;letter-spacing:.3em!important;
transform:translate(-50%,calc(-50% + (1 - var(--tin)) * 26px - var(--tout) * 26px))!important}
html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-ico::before{display:none!important}
html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-ico::after{content:''!important;display:block!important;position:absolute;left:50%;top:-76px;width:54px!important;height:54px!important;margin:0 0 0 -27px!important;opacity:1!important;background:var(--icon) center/contain no-repeat!important;filter:drop-shadow(0 0 8px rgba(255,214,160,.35))}
html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-ico{border-top:1px solid #f6ecdb22;padding-top:22px!important}
/* And again: the line echoes downward, fainter each time. */
html body #spoiler #sp-story .sp-world-chapters .sp-stack.sp-slow .w{text-shadow:0 0 9px rgba(255,214,160,.3),0 .95em 0 rgba(246,236,219,.22),0 1.9em 0 rgba(246,236,219,.09),0 2.85em 0 rgba(246,236,219,.035)!important}
/* The ice: frost crystals on glass over the war; a ring shows what to do. */
#spoiler #sp-story .sp-s-vase .sp-ice{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:none!important;-webkit-mask:none!important;mask:none!important}
#spoiler #sp-story .sp-s-vase .sp-ice::before{display:none}
#spoiler #sp-story .sp-ice-blur{position:absolute;inset:0;-webkit-backdrop-filter:blur(16px) saturate(.4) brightness(1.08);backdrop-filter:blur(16px) saturate(.4) brightness(1.08);-webkit-mask-size:100% 100%;mask-size:100% 100%}
#spoiler #sp-story .sp-ice-frost{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen;opacity:.9}
#spoiler #sp-story .sp-ice-hint{--hx:50%;--hy:52%;position:absolute;inset:0;bottom:auto;top:0;height:100%;transition:opacity .9s;pointer-events:none}
#spoiler #sp-story .sp-ice-hint>span:last-child{position:absolute;left:0;right:0;bottom:24svh;text-align:center;font:400 11px/1 var(--k-font-mono);letter-spacing:.36em;text-transform:uppercase;color:#f2f9ff;text-shadow:0 0 14px #8fc9ff}
#spoiler #sp-story .sp-ice-ring{position:absolute;left:var(--hx);top:var(--hy);width:54px;height:54px;margin:-27px 0 0 -27px;border:1px solid #f2f9ffcc;border-radius:50%;box-shadow:0 0 20px #9fd3ff88,inset 0 0 12px #ffffff55;animation:sp-ring 2.4s ease-in-out infinite}
#spoiler #sp-story .sp-ice:not(.is-teaching) .sp-ice-ring{animation:sp-ring 2.4s ease-in-out infinite,sp-swipe 3.2s ease-in-out infinite}
@keyframes sp-ring{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.18);opacity:.55}}
@keyframes sp-swipe{0%,100%{left:40%}50%{left:60%}}
#spoiler #sp-story .sp-ice.is-touched .sp-ice-hint{opacity:0}
#spoiler #sp-story .sp-s-vase .sp-stage{cursor:url("data:image/svg+xml;utf8,") 20 20,auto}
/* Opening titles flow as text, not a grid: small italic voices set inline between the large words. */
html:lang(en) body #spoiler #sp-story .sp-sculpture-scene .sp-cap{display:block!important;max-width:9em!important}
html:lang(en) body #spoiler #sp-story .sp-sculpture-scene .sp-cap .w{display:inline-block!important;margin-right:.18em!important}
html:lang(en) body #spoiler #sp-story .sp-sculpture-scene .sp-cap:first-of-type .w:nth-child(2)::after,
html:lang(en) body #spoiler #sp-story .sp-sculpture-scene .sp-last-cap .w:nth-child(1)::after{content:'';display:block}
html:lang(en) body #spoiler #sp-story .sp-sculpture-scene .sp-last-cap .w:nth-child(2),html:lang(en) body #spoiler #sp-story .sp-sculpture-scene .sp-last-cap .w:nth-child(6){display:block!important}
html:lang(en) body #spoiler #sp-story .sp-sculpture-scene .sp-cap:first-of-type .w:nth-child(2){margin-right:0!important}
html:lang(en) body #spoiler #sp-story .sp-sculpture-scene .sp-cap:first-of-type .w:nth-child(3){display:block!important}
/* Jamshedpur: a compact title block, centred. */
html body #spoiler #sp-story .sp-world-chapters .sp-cap.sp-red{width:fit-content!important;margin:0 auto!important}
html body #spoiler #sp-story .sp-world-chapters .sp-cap.sp-red .w:nth-child(2)::first-letter{margin-right:.02em!important}
#spoiler .sp-ico-1{--icon:url("data:image/svg+xml;utf8,")}
#spoiler .sp-ico-2{--icon:url("data:image/svg+xml;utf8,")}
#spoiler .sp-ico-3{--icon:url("data:image/svg+xml;utf8,")}
#spoiler .sp-ico-4{--icon:url("data:image/svg+xml;utf8,")}
/* ════ 9 Oct, finishing pass ════ */
/* Type always separates from the fragments: a close dark shadow under the glow (on the glyphs, not a patch). */
html body #spoiler #sp-story .sp-world-chapters :is(.sp-cap,.sp-cap .w,.sp-cap .sp-qi,.sp-dis,.sp-dis-l,.sp-dis-r,.sp-flow:not(.sp-news) p,.sp-line,.sp-faith,.sp-count-label){
text-shadow:0 1px 2px rgba(0,0,0,.7),0 0 16px rgba(0,0,0,.45),0 0 .6px rgba(var(--halo),.75),0 0 10px rgba(var(--halo),.28),0 0 32px rgba(var(--halo),.14)!important}
/* Swash capitals only open corner lines; never on titles where they clip (“The”). */
html body #spoiler #sp-story .sp-stage>.sp-cap.sp-bigcap .w:first-child::first-letter{font:inherit!important;margin:0!important;vertical-align:baseline!important;line-height:inherit!important}
html body #spoiler #sp-story .sp-world-chapters .sp-cap.sp-red .w:nth-child(2)::first-letter{font-family:'Koan Script',cursive!important;font-size:1.5em!important;line-height:.6!important;vertical-align:-.08em!important;margin-right:.02em!important}
html body #spoiler #sp-story .sp-stage>.sp-cap:is(.sp-at-l,.sp-at-r){padding-left:.25em;overflow:visible}
/* Corners sit clear of the bars and the UI. */
html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-cap.sp-at-l{top:27%}
html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-cap.sp-at-r{top:69%}
/* The War of the Vase: the vessel stands on the right third; its titles take the left. */
@media(min-width:651px){
html body #spoiler #sp-story .sp-s-vase .sp-stage>.sp-cap:is(.sp-bigcap,.sp-note){left:clamp(20px,8vw,140px)!important;right:auto!important;text-align:left!important;max-width:9em!important}
}
/* The legend: grave. No colour, no glow, no calligraphy; plain small type in a black frame. */
html body #spoiler #sp-story .sp-s-legend .sp-stage>.sp-cap,html body #spoiler #sp-story .sp-s-legend .sp-stage>.sp-cap .w{
color:#cfc9c0!important;-webkit-text-fill-color:#cfc9c0!important;text-shadow:0 1px 2px #000!important;font-size:clamp(20px,2.1vw,30px)!important;line-height:1.45!important;letter-spacing:0!important}
html body #spoiler #sp-story .sp-s-legend .sp-stage>.sp-cap{max-width:24em!important}
html body #spoiler #sp-story .sp-s-legend .sp-stage>.sp-cap .w:first-child::first-letter{font:inherit!important;margin:0!important}
html body #spoiler #sp-story .sp-s-legend .sp-stage>.sp-cap.sp-strong{font-style:italic!important}
html body #spoiler #sp-story .sp-s-legend .sp-stage>.sp-cap .w{filter:none!important}
/* Top bar: quiet and legible over any grade. */
html body #spoiler .sp-bar{mix-blend-mode:normal!important;background:linear-gradient(#000000b3,#00000059 55%,transparent);padding-bottom:26px}
html body #spoiler .sp-bar-label{mix-blend-mode:normal!important;color:#efe6d6a8!important;letter-spacing:.24em!important;font-size:10px!important}
html body #spoiler .sp-close,html body #spoiler .sp-sound{background:#0b0a09a6!important;border-color:#efe6d633!important;color:#efe6d6d9!important}
html body #spoiler .sp-close:hover,html body #spoiler .sp-sound:hover{border-color:#efe6d6aa!important}
html body #spoiler .sp-progress{height:1px!important;background:#efe6d680!important}
html body #spoiler .sp-rail{mix-blend-mode:normal!important;background:#efe6d61f!important}
html body #spoiler .sp-rail i{background:#efe6d6aa!important}
html body #spoiler .sp-rail b{color:#efe6d699!important}
html body #spoiler .sp-cue span{mix-blend-mode:normal!important;background:#0b0a09a6!important;color:#efe6d6cc!important}
@media(min-width:651px){#spoiler #sp-story .sp-ice-hint{--hx:71%}#spoiler #sp-story .sp-ice:not(.is-teaching) .sp-ice-ring{animation:sp-ring 2.4s ease-in-out infinite,sp-swipe-r 3.2s ease-in-out infinite}#spoiler #sp-story .sp-ice-hint>span:last-child{left:52%}}
@keyframes sp-swipe-r{0%,100%{left:62%}50%{left:80%}}
/* ════ 9 Oct, director/editor/sound pass ════ */
/* Safe frame: corner lines always live inside the 2.39:1 picture, bars or not. */
#spoiler #sp-story{--bar:max(8svh,calc((100svh - 100vw / 2.39) / 2))}
html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-cap.sp-at-l{top:calc(var(--bar) + 13svh)}
html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-cap.sp-at-r{top:calc(100svh - var(--bar) - 16svh)}
/* Jamshedpur: every word gets room for its italic overhang, swash and descenders, since the fill is clipped to the word box. */
html body #spoiler #sp-story .sp-world-chapters .sp-cap.sp-red .w.w{padding:.18em .22em .3em .3em;margin:-.18em -.22em -.3em -.3em}
html body #spoiler #sp-story .sp-world-chapters .sp-cap.sp-red .w:nth-child(2){padding-left:.55em;margin-left:-.55em}
/* Blanking, cut like an editor: black arrives hard and fast for violence and death; white glides in for the sacred. */
#spoiler .sp-blank i{transition:transform .55s cubic-bezier(.9,0,.1,1),background-color .4s}
#spoiler .sp-blank.is-white i{background:#f3efe6;transition:transform 1.8s cubic-bezier(.45,0,.15,1),background-color 1.2s}
#spoiler .sp-blank.is-white i:first-child{box-shadow:0 18px 60px #f3efe633}
#spoiler .sp-blank.is-white i:last-child{box-shadow:0 -18px 60px #f3efe633}
/* Riya's swan rests on a dark lake: a horizon of light, slow ripples, and its reflection. */
#spoiler #sp-story .sp-s-riya2 .sp-swan{-webkit-box-reflect:below 4px linear-gradient(transparent 30%,rgba(255,255,255,.32))}
#spoiler #sp-story .sp-lake{height:clamp(120px,22svh,220px);pointer-events:none}
#spoiler #sp-story .sp-lake i{position:absolute;left:50%;top:0;width:min(78vw,1000px);height:100%;transform:translateX(-50%);
background:linear-gradient(180deg,rgba(255,228,236,.35) 0,rgba(255,228,236,.08) 2px,transparent 3px),
repeating-linear-gradient(180deg,rgba(255,220,230,.0) 0 7px,rgba(255,220,230,.07) 8px 9px),
linear-gradient(180deg,#2a0d1755,#0a020500);
background-size:100% 100%,100% 18px,100% 100%;
-webkit-mask:radial-gradient(ellipse 50% 100% at 50% 0,#000 35%,transparent 72%);mask:radial-gradient(ellipse 50% 100% at 50% 0,#000 35%,transparent 72%);
animation:sp-lake 7s linear infinite}
#spoiler #sp-story .sp-lake i::after{content:'';position:absolute;left:30%;right:30%;top:-1px;height:2px;background:radial-gradient(closest-side,rgba(255,236,242,.75),transparent);filter:blur(1px)}
@keyframes sp-lake{from{background-position:0 0,0 0,0 0}to{background-position:0 0,0 18px,0 0}}
@mediaall{:where(html[data-koan-motion="reduced"]) #spoiler #sp-story .sp-lake i{animation:none}}
/* The script R's flourishes rise well above the cap height: room on every side of that word. */
html body #spoiler #sp-story .sp-world-chapters .sp-cap.sp-red .w.w:nth-child(2){padding:.75em .35em .45em .8em!important;margin:-.75em -.35em -.45em -.8em!important}
/* The poster stands in only when the 3D world fails; never as a flash before it renders. */
#spoiler .sp-world-fallback{opacity:0!important;transition:opacity .8s}
#spoiler .sp-world.is-failed .sp-world-fallback{opacity:.55!important;display:block!important}
/* Icon row: marks and rules arrive with their own word and leave with the row; nothing shows before its beat. */
html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-ico{border-top:0!important;opacity:var(--t)!important}
html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-ico::after{opacity:var(--t)!important;transform:translateY(calc((1 - var(--tin)) * 12px))}
html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-ico::before{content:''!important;display:block!important;position:absolute;left:12%;right:12%;top:-2px;height:1px;width:auto!important;margin:0!important;background:#f6ecdb!important;opacity:calc(var(--t) * .22)!important;transform:scaleX(var(--tin));transform-origin:50% 50%}
/* Every scroll-placed line stays inside the picture when the bars are in, at any window proportion. */
html body #spoiler #sp-story .sp-world-chapters .sp-stage>[style*="--a"]:not(.sp-at-l):not(.sp-at-r):not(.sp-dis){top:clamp(calc(var(--bar) + 6svh),var(--y,50%),calc(100svh - var(--bar) - 7svh))}
/* Closing credit. */
html body #spoiler #sp-story .sp-world-chapters .sp-last p.sp-credit.sp-credit.sp-credit{display:grid;gap:12px;justify-items:center;margin:4px auto 56px!important;font:400 10px/1 var(--k-font-mono)!important;letter-spacing:.32em;text-transform:uppercase;color:#efe6d699!important;text-shadow:none!important}
html body #spoiler #sp-story .sp-last p.sp-credit b{font:400 clamp(26px,2.6vw,38px)/1.1 'Koan Editorial',serif;letter-spacing:-.01em;text-transform:none;font-weight:400;color:#f6ecdb;text-shadow:0 0 .6px rgba(255,214,160,.7),0 0 12px rgba(255,214,160,.28),0 0 34px rgba(255,214,160,.14)}
html body #spoiler #sp-story .sp-last p.sp-credit b::first-letter{font-family:'Koan Script',cursive;font-size:1.6em;line-height:.5;margin-right:.02em}
html:lang(hi) body #spoiler #sp-story .sp-last p.sp-credit span{letter-spacing:.04em}
/* Phones and portrait windows: 2.39:1 would leave a strip. Keep a cinematic band, never more than ~9% each. */
#spoiler{--bar-h:min(max(8svh,calc((100svh - 100vw / 2.39) / 2)),16svh)}
#spoiler #sp-story{--bar:var(--bar-h)}
#spoiler .sp-blank i{height:var(--bar-h)!important}
@media (max-aspect-ratio:1/1){#spoiler{--bar-h:9svh}}
/* Mobile opening: the words sit beneath the vessel, inside the picture. */
@media(max-width:650px){
html:lang(en) body #spoiler #sp-story .sp-sculpture-scene .sp-cap{--y:76%!important;font-size:13vw!important}
html:lang(en) body #spoiler #sp-story .sp-sculpture-scene .sp-last-cap{font-size:12vw!important}
}
/* The count block is tall: centre it in the picture, and keep its labels to one line on phones. */
html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-count{top:50%!important}
@media(max-width:650px){
html body #spoiler #sp-story .sp-world-chapters .sp-count-label{font-size:9px!important;letter-spacing:.14em!important;white-space:nowrap}
html body #spoiler #sp-story .sp-world-chapters .sp-num{font-size:17vw!important}
html body #spoiler #sp-story .sp-world-chapters .sp-count{gap:14px}
}
/* Phones and short windows: a slim band, never a slot. */
@media (max-width:700px),(max-height:560px){#spoiler{--bar-h:5.5svh}}
/* Type scales with the smaller of the window's width and height, so nothing collides on short screens. */
html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-cap.sp-at-l,html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-cap.sp-at-r{font-size:clamp(20px,min(3.4vw,5.4svh),54px)!important}
html body #spoiler #sp-story .sp-world-chapters .sp-cap{font-size:clamp(20px,min(2.9vw,5svh),44px)!important}
html body #spoiler #sp-story .sp-world-chapters .sp-bigcap{font-size:clamp(30px,min(4.8vw,8.5svh),76px)!important}
html body #spoiler #sp-story .sp-world-chapters .sp-cap.sp-red{font-size:clamp(54px,min(10.5vw,17svh),170px)!important}
html body #spoiler #sp-story .sp-world-chapters .sp-num{font-size:clamp(44px,min(8vw,12svh),128px)!important}
html body #spoiler #sp-story .sp-sculpture-scene .sp-cap{font-size:clamp(36px,min(6vw,11svh),96px)!important}
html body #spoiler #sp-story .sp-sculpture-scene .sp-last-cap{font-size:clamp(40px,min(6.6vw,12svh),104px)!important}
@media(max-width:650px){
html body #spoiler #sp-story .sp-world-chapters .sp-num{font-size:min(17vw,11svh)!important}
html:lang(en) body #spoiler #sp-story .sp-sculpture-scene .sp-cap,html:lang(en) body #spoiler #sp-story .sp-sculpture-scene .sp-last-cap{font-size:min(12.5vw,8svh)!important}
}
/* The count owns the upper picture; its line answers from the lower corner. */
html body #spoiler #sp-story .sp-world-chapters .sp-s-count .sp-stage>.sp-count{top:38%!important}
html body #spoiler #sp-story .sp-world-chapters .sp-s-count .sp-stage>.sp-cap.sp-at-r{top:calc(100svh - var(--bar) - 11svh)!important}
/* Icon row: one line per label, marks on a common baseline; a 2×2 grid on phones. */
html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-ico{white-space:nowrap;width:auto!important;font-size:clamp(9px,1vw,13px)!important;letter-spacing:clamp(.14em,.3vw,.3em)!important}
@media(max-width:760px){
html body #spoiler #sp-story .sp-ico-1{--x:30%!important;--y:42%!important}
html body #spoiler #sp-story .sp-ico-2{--x:70%!important;--y:42%!important}
html body #spoiler #sp-story .sp-ico-3{--x:30%!important;--y:62%!important}
html body #spoiler #sp-story .sp-ico-4{--x:70%!important;--y:62%!important}
html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-ico::after{width:40px!important;height:40px!important;margin-left:-20px!important;top:-56px}
html body #spoiler #sp-story .sp-world-chapters .sp-stack.sp-slow{--y:82%!important}
}
/* Corner lines enter from their own side, sharpening out of a blur, and lift away as they leave. */
html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-cap.sp-at-l{transform:translate(calc((1 - var(--tin)) * -34px),calc(-50% - var(--tout) * 22px))!important;filter:blur(calc((1 - var(--tin)) * 6px + var(--tout) * 6px))!important}
html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-cap.sp-at-r{transform:translate(calc((1 - var(--tin)) * 34px),calc(-50% - var(--tout) * 22px))!important;filter:blur(calc((1 - var(--tin)) * 6px + var(--tout) * 6px))!important}
/* The two faiths: on screens too small to hold both documents in one frame, they flow as readable panels. */
@media (max-width:760px),(max-height:700px){
html body #spoiler #sp-story .sp-s-split{height:auto!important}
html body #spoiler #sp-story .sp-s-split .sp-stage.sp-split{position:relative!important;height:auto!important;overflow:visible!important;display:block;padding:calc(var(--bar) + 4svh) 0}
html body #spoiler #sp-story .sp-s-split .sp-seam{display:none}
html body #spoiler #sp-story .sp-s-split .sp-half{position:relative!important;width:100%!important;height:auto!important;clip-path:none!important;inset:auto!important}
html body #spoiler #sp-story .sp-s-split .sp-half-in{height:auto!important;opacity:1!important;transform:none!important;padding:56px clamp(20px,6vw,64px)!important;justify-content:flex-start!important}
html body #spoiler #sp-story .sp-s-split .sp-half-bg{opacity:.18}
}
@media (max-width:760px),(max-height:700px){@media all{html:where([data-koan-motion="full"]) body #spoiler #sp-story .sp-s-split .sp-half-in{transition:none}}}
/* Riya: the sinner line yields before the swan's note arrives; the swan scales with the height of the screen. */
html body #spoiler #sp-story .sp-s-riya2 .sp-stage>.sp-cap.sp-strong{--c:.56;--d:.6}
html body #spoiler #sp-story .sp-s-riya2 .sp-swan-sm .sp-swan{width:min(34vw,190px,26svh)!important}
html body #spoiler #sp-story .sp-s-riya2 .sp-lake{height:min(22svh,200px)}
/* The cue belongs to the first screen only. */
#spoiler .sp-cue.is-hidden{opacity:0!important;visibility:hidden;transition:opacity .6s,visibility 0s .6s}
@media(max-width:760px){
html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-ico{font-size:9px!important;letter-spacing:.1em!important}
html body #spoiler #sp-story .sp-ico-1,html body #spoiler #sp-story .sp-ico-3{--x:28%!important}
html body #spoiler #sp-story .sp-ico-2,html body #spoiler #sp-story .sp-ico-4{--x:72%!important}
/* Winter Wars on a phone: the vessel stands centre; its titles sit beneath it. */
html body #spoiler #sp-story .sp-s-vase .sp-stage>.sp-cap.sp-note{--y:71%!important}
html body #spoiler #sp-story .sp-s-vase .sp-stage>.sp-cap.sp-bigcap{--y:80%!important;max-width:9em!important}
#spoiler #sp-story .sp-ice-frost{opacity:.6}
#spoiler #sp-story .sp-ice-blur{-webkit-backdrop-filter:blur(10px) saturate(.5);backdrop-filter:blur(10px) saturate(.5)}
}
@media(max-width:760px){#spoiler #sp-story .sp-ice-hint>span:last-child{bottom:auto;top:calc(var(--bar) + 9svh)}}
/* Depth parallax: the type is the nearest layer; it drifts against the cursor, titles least, corner lines most. */
@media (hover:hover){
html:where([data-koan-motion="full"]) body #spoiler #sp-story .sp-world-chapters .sp-stage>[style*="--a"]{translate:calc(var(--mx,0) * -10px) calc(var(--my,0) * -7px)}
html:where([data-koan-motion="full"]) body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-cap:is(.sp-at-l,.sp-at-r){translate:calc(var(--mx,0) * -18px) calc(var(--my,0) * -12px)}
html:where([data-koan-motion="full"]) body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-cap.sp-bigcap{translate:calc(var(--mx,0) * -6px) calc(var(--my,0) * -4px)}
html:where([data-koan-motion="full"]) body #spoiler #sp-story .sp-world-chapters .sp-article{translate:calc(var(--mx,0) * -8px) calc(var(--my,0) * -5px)}
}
/* Ice that lives: slow caustic light moves through the frost. */
#spoiler #sp-story .sp-s-vase .sp-ice::after{content:'';position:absolute;inset:-20%;pointer-events:none;mix-blend-mode:screen;opacity:.22;
background:radial-gradient(ellipse 30% 22% at 30% 40%,#dff4ff 0%,transparent 70%),radial-gradient(ellipse 26% 18% at 70% 62%,#cfeaff 0%,transparent 70%),radial-gradient(ellipse 18% 30% at 52% 30%,#ffffff 0%,transparent 70%);
filter:blur(18px);animation:sp-caustic 9s ease-in-out infinite alternate}
@keyframes sp-caustic{0%{transform:translate(-4%,2%) rotate(0deg) scale(1)}50%{transform:translate(3%,-3%) rotate(8deg) scale(1.08)}100%{transform:translate(-2%,4%) rotate(-6deg) scale(.96)}}
@mediaall{:where(html[data-koan-motion="reduced"]) #spoiler #sp-story .sp-s-vase .sp-ice::after{animation:none}}
/* Stronger depth parallax on the type layer. */
@media (hover:hover){
html:where([data-koan-motion="full"]) body #spoiler #sp-story .sp-world-chapters .sp-stage>[style*="--a"]{translate:calc(var(--mx,0) * -16px) calc(var(--my,0) * -11px)}
html:where([data-koan-motion="full"]) body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-cap:is(.sp-at-l,.sp-at-r){translate:calc(var(--mx,0) * -28px) calc(var(--my,0) * -18px)}
html:where([data-koan-motion="full"]) body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-cap.sp-bigcap{translate:calc(var(--mx,0) * -10px) calc(var(--my,0) * -7px)}
}
/* Stronger, filmic grain over everything, type included. */
#spoiler .sp-grain{opacity:.5!important}
#spoiler .sp-grain::after{opacity:.24!important}
/* Top bar: no band; the label carries its own soft shadow. */
html body #spoiler .sp-bar{background:none!important}
html body #spoiler .sp-bar-label{text-shadow:0 1px 2px #000c,0 0 14px #0009}
/* Corner lines stay legible while they move: a lighter blur on entry and exit. */
html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-cap:is(.sp-at-l,.sp-at-r){filter:blur(calc((1 - var(--tin)) * 3px + var(--tout) * 3px))!important}
/* The Fifteen: labels and marks read over any page or light — dark shadows beneath, glow above. */
html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-ico,html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-ico .w{
text-shadow:0 1px 2px #000,0 0 10px #000d,0 0 24px #0009,0 0 8px rgba(255,214,160,.25)!important;font-weight:500}
html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-ico::after{filter:drop-shadow(0 1px 2px #000) drop-shadow(0 0 10px #000c) drop-shadow(0 0 8px rgba(255,214,160,.35))!important}
html body #spoiler #sp-story .sp-world-chapters :is(.sp-note,.sp-label,.sp-count-label,.sp-hnum){text-shadow:0 1px 2px #000,0 0 12px #000c!important}
html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-ico .w+.w{margin-left:.55em!important}
/* ── Performance: nothing that forces the whole screen to recomposite or repaint every frame ── */
/* Grain without a blend mode: a light, fine noise laid on top (the 3D frame already carries its own grain). */
#spoiler .sp-grain{mix-blend-mode:normal!important;opacity:.13!important;background-size:220px!important;will-change:transform}
#spoiler .sp-grain::after{display:none!important}
/* Captions move with opacity and transform only: no live blur re-rasterised while scrolling. */
html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-cap,html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-cap:is(.sp-at-l,.sp-at-r){filter:none!important}
html body #spoiler #sp-story .sp-cap .w{filter:none!important}
html body #spoiler #sp-story .sp-world-chapters .sp-stage>[style*="--a"]{will-change:opacity,transform}
/* Tighter glows: the same light, a fraction of the paint. */
html body #spoiler #sp-story .sp-world-chapters :is(.sp-cap,.sp-cap .w,.sp-cap .sp-qi,.sp-dis,.sp-dis-l,.sp-dis-r,.sp-flow:not(.sp-news) p,.sp-line,.sp-faith,.sp-count-label){
text-shadow:0 1px 2px rgba(0,0,0,.75),0 0 .6px rgba(var(--halo),.75),0 0 10px rgba(var(--halo),.3),0 0 22px rgba(var(--halo),.14)!important}
/* Grain back to its blended form (blacks stay black); the bars sit above it, pure black. */
#spoiler .sp-grain{mix-blend-mode:overlay!important;opacity:.42!important}
#spoiler .sp-blank{z-index:46!important}
/* Grain at half strength. */
#spoiler .sp-grain{opacity:.21!important}
/* Light falls from beyond the top-right: the letters catch it on their upper edges.
A lit top band and a warm falloff are printed into each word; the glow sits beneath as a soft halation. */
html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-cap:not(.sp-red):not(.sp-stack-sub):not(.sp-ico) .w,
html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-cap:not(.sp-red) .sp-qi{
background-image:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,252,244,.9) 16%,rgba(255,255,255,0) 40%),linear-gradient(200deg,#fffaf0 0%,#f8edd9 30%,#e6d6bb 62%,#c7b496 100%)!important;
-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important;text-shadow:none!important;
padding:.12em .1em .22em;margin:-.12em -.1em -.22em}
html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-cap:not(.sp-red):not(.sp-stack-sub):not(.sp-ico){
filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.75)) drop-shadow(0 0 9px rgba(255,214,160,.26))!important}
/* the legend stays plain and grave */
html body #spoiler #sp-story .sp-s-legend .sp-stage>.sp-cap .w{background-image:none!important;color:#cfc9c0!important;-webkit-text-fill-color:#cfc9c0!important;text-shadow:0 1px 2px #000!important;padding:0;margin:0}
html body #spoiler #sp-story .sp-s-legend .sp-stage>.sp-cap{filter:none!important}
/* The Jamshedpur Night: its halation restored, with the same light catching the top of each letter. */
html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-cap.sp-red{filter:drop-shadow(0 0 2px #ffb3a8) drop-shadow(0 0 14px #ff2a2299) drop-shadow(0 0 48px #d0081466)!important}
html body #spoiler #sp-story .sp-world-chapters .sp-cap.sp-red .w.w{background-image:linear-gradient(180deg,rgba(255,255,255,.85) 0%,rgba(255,240,236,.6) 18%,rgba(255,255,255,0) 42%),linear-gradient(100deg,#ffd6cf 0%,#ffe6e0 38%,#fffaf8 47%,#ffdcd4 56%,#ffc9bf 100%)!important;background-size:100% 100%,320% 100%!important}
@keyframes sp-shimmer{0%{background-position:0 0,110% 0}55%,100%{background-position:0 0,-10% 0}}
/* Corner lines are anchored by their outer edge, so a long line grows into the frame, never out of it. */
html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-cap.sp-at-l{top:calc(var(--bar) + 8svh)!important;bottom:auto!important;
transform:translate(calc((1 - var(--tin)) * -34px),calc(0px - var(--tout) * 22px))!important}
html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-cap.sp-at-r{top:auto!important;bottom:calc(var(--bar) + 10svh)!important;
transform:translate(calc((1 - var(--tin)) * 34px),calc(0px - var(--tout) * 22px))!important}
/* room for italic overhangs and swash capitals at the edge of the lit letters */
html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-cap.sp-at-r{padding-right:.12em!important}
html body #spoiler #sp-story .sp-world-chapters .sp-s-count .sp-stage>.sp-cap.sp-at-r{top:auto!important;bottom:calc(var(--bar) + 7svh)!important}
/* Narrow screens: no cursor drift on the type, so corner lines keep their gutters exactly. */
@media (max-width:760px){html body #spoiler #sp-story .sp-world-chapters .sp-stage>[style*="--a"],html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-cap:is(.sp-at-l,.sp-at-r,.sp-bigcap){translate:none!important}}
/* The swash capital rises far above and before its word: the first word of each line gets room on every side,
so the lit lettering is never clipped (padding offset by an equal negative margin; layout unchanged). */
html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-cap:not(.sp-red):not(.sp-stack-sub):not(.sp-ico) .w:first-child{padding:1em .3em .35em .75em!important;margin:-1em -.3em -.35em -.75em!important}
html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-cap:not(.sp-red):not(.sp-stack-sub):not(.sp-ico) .w{padding-top:.3em;margin-top:-.3em;padding-bottom:.32em;margin-bottom:-.32em}
/* the page under the open record is fully covered: hold its CSS loops (grain jitter, gate weave, scratches) still */
html.k-record-open body > :not(dialog), html.k-record-open body > :not(dialog) * { animation-play-state: paused !important; }
/* A clean frame: floating controls only, no header strip or progress rulers. */
html body #spoiler.sp{scrollbar-width:none}
#spoiler::-webkit-scrollbar{display:none}
html body #spoiler .sp-bar{background:none!important;mix-blend-mode:normal!important}
#spoiler .sp-bar::before,#spoiler .sp-bar::after,#spoiler .sp-bar-label,#spoiler .sp-progress,#spoiler .sp-rail{display:none!important}
#spoiler .sp-bar{justify-content:flex-end}
#spoiler.sp-is-loading{overflow-y:hidden}
.sp-loading{--loaded:.06;position:fixed;inset:0;z-index:25;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 35%,#30231a 0%,#100f12 40%,#050608 80%);color:#f5ead8;transition:opacity .6s ease;overflow:hidden}
.sp-loading::before{content:'';position:absolute;inset:0;opacity:.07;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.sp-loading.is-ready{opacity:0;pointer-events:none}
.sp-loading-art{position:relative;width:100px;height:180px;margin-bottom:32px}
.sp-loading-art svg{width:100%;height:100%;overflow:visible;fill:#ded3ba0c;stroke:#e8d9b9;stroke-width:1.2;filter:drop-shadow(0 0 12px #ed965844)}
.sp-load-crack{fill:none;stroke:#b23d3d;stroke-dasharray:260;stroke-dashoffset:260;animation:sp-load-crack 4s ease-in-out infinite}
.sp-loading-art i{position:absolute;width:3px;height:3px;border-radius:50%;background:#ffb474;box-shadow:0 0 8px #e88742;bottom:20%;left:10%;animation:sp-load-ember 3.6s linear infinite}
.sp-loading-art i:nth-of-type(2){left:88%;animation-delay:-1.2s}.sp-loading-art i:nth-of-type(3){left:58%;animation-delay:-2.4s}
html body #spoiler .sp-loading-kicker{font:11px/1 var(--k-font-mono);letter-spacing:.5em;margin:0 0 18px!important;opacity:.55}
html body #spoiler .sp-loading-title{font:400 clamp(32px,5vw,60px)/1.1 'Koan Editorial',serif;margin:0 20px 20px!important;text-align:center;text-shadow:0 0 22px #f6bc7833}
html body #spoiler .sp-loading-note{font:10px/1.5 var(--k-font-mono);letter-spacing:.12em;opacity:.6;margin:0!important}
.sp-loading-track{width:120px;height:1px;background:#f5ead822;margin-top:24px}.sp-loading-track i{display:block;height:100%;background:#e8c199;transform:scaleX(var(--loaded));transform-origin:left;transition:transform .35s}
@keyframes sp-load-crack{0%,15%{stroke-dashoffset:260}65%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:-260}}
@keyframes sp-load-ember{from{transform:translateY(0);opacity:0}20%{opacity:.8}to{transform:translateY(-190px);opacity:0}}
@mediaall{:where(html[data-koan-motion="reduced"]) .sp-load-crack,:where(html[data-koan-motion="reduced"]) .sp-loading-art i{animation:none}:where(html[data-koan-motion="reduced"]) .sp-load-crack{stroke-dashoffset:0}}
/* Phone cinematography uses painted cells and native momentum scrolling. */
#spoiler.sp-phone{touch-action:pan-y;scroll-behavior:auto;-webkit-overflow-scrolling:touch}
#spoiler.sp-phone .sp-world{background:radial-gradient(ellipse at 65% 18%,#3a2e29,#121017 48%,#06070a 90%)!important}
#spoiler.sp-phone .sp-world[data-phone-chapter="2"]{background:radial-gradient(ellipse at 50% 90%,#330f13,#07080c 70%)!important}
#spoiler.sp-phone .sp-world[data-phone-chapter="3"]{background:radial-gradient(ellipse at 70% 25%,#28232f,#08090e 75%)!important}
#spoiler.sp-phone .sp-world[data-phone-chapter="4"]{background:radial-gradient(ellipse at 75% 25%,#243440,#060a11 75%)!important}
.sp-phone-vessel{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .4s}
.sp-phone-city{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 55% 60%,#471b2a,#100e19 70%)}
.sp-phone-layer{position:absolute;left:-70%;width:240%;height:100%;object-fit:contain;object-position:50% 65%;transform:translate3d(calc(var(--p)*-12px),0,0)}
.sp-phone-layer-0{opacity:.65;top:-9%}.sp-phone-layer-1{top:7%;transform:translate3d(calc(var(--p)*-28px),0,0)}
.sp-phone-layer-2{top:30%;transform:translate3d(calc(var(--p)*-48px),0,0)}
.sp-phone-smoke{position:absolute;width:230%;left:-65%;bottom:-12%;opacity:.55}
.sp-phone-paper{position:absolute;width:calc(66px + var(--i)*17px);left:calc(4% + var(--i)*36%);top:calc(16% + var(--i)*18%);transform:perspective(600px) translate3d(calc(var(--p)*30px),calc(var(--p)*-120px),calc(var(--p)*100px)) rotate(calc(-18deg + var(--i)*19deg));opacity:.8;box-shadow:0 0 12px #ff8c3833}
.sp-phone-war-vase{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:sepia(.25) hue-rotate(165deg);opacity:calc(clamp(0,(var(--p) - .13)*6,1)*(1 - clamp(0,(var(--p) - .72)*8,1)))}
html body #spoiler.sp-phone #sp-story .sp-world-chapters .sp-stage>.sp-cap{max-width:calc(100% - 48px)!important;width:calc(100% - 48px);left:24px!important;right:auto!important;top:var(--y,50%)!important;text-align:left;font-size:clamp(24px,7.2vw,32px)!important;line-height:1.25!important}
html body #spoiler.sp-phone #sp-story .sp-world-chapters .sp-stage>.sp-bigcap{font-size:clamp(36px,11vw,46px)!important;line-height:1.1!important}
html body #spoiler.sp-phone #sp-story .sp-s-open .sp-cap{top:73%!important;max-width:9em!important;width:80%!important;font-size:38px!important}
html body #spoiler.sp-phone #sp-story .sp-s-open .sp-cap:first-child .w:first-child{font-size:1em!important}
html body #spoiler.sp-phone #sp-story .sp-s-fight .sp-cap:not(.sp-red),html body #spoiler.sp-phone #sp-story .sp-s-spread .sp-cap{top:22%!important;max-width:11em!important}
html body #spoiler.sp-phone #sp-story .sp-world-chapters .sp-cap.sp-red{font-size:62px!important;left:0!important;width:100%;max-width:100%!important;text-align:center}
#spoiler.sp-phone .sp-stage{contain:layout paint}
#spoiler.sp-phone .sp-grain{animation:none;opacity:.07!important}
#spoiler.sp-phone .sp-cap .w{filter:none!important}
#spoiler.sp-phone .sp-cap.sp-red{filter:none!important}
#spoiler.sp-phone .sp-blank{display:none}
#spoiler.sp-phone .sp-s-split{height:auto!important}
#spoiler.sp-phone .sp-s-split .sp-stage{position:relative;height:auto;overflow:visible}
#spoiler.sp-phone .sp-half{position:relative!important;inset:auto!important;width:100%;height:auto;clip-path:none!important;opacity:1!important;transform:none!important;background:#171721!important;backdrop-filter:none!important;overflow:visible}
#spoiler.sp-phone .sp-half-in{height:auto;padding:80px 26px!important;justify-content:flex-start!important}
#spoiler.sp-phone .sp-half .sp-doc{font-size:16px;line-height:1.6}
#spoiler.sp-phone .sp-seam{display:none}
#spoiler.sp-phone .sp-article{width:calc(100% - 32px)!important;transform:none!important}
#spoiler.sp-phone .sp-art{padding:22px 18px!important}
#spoiler.sp-phone .sp-art p{font-size:17px!important;line-height:1.6!important}
#spoiler.sp-phone .sp-headline{font-size:36px!important}
#spoiler.sp-phone .sp-site-nav{display:none}
#spoiler.sp-phone .sp-hero img{transform:none!important}
html body #spoiler.sp-phone #sp-story .sp-world-chapters .sp-ico{font-size:11px!important;width:42%!important;max-width:42%!important;text-align:center!important}
html body #spoiler.sp-phone #sp-story .sp-world-chapters .sp-ico-1{left:5%!important;top:44%!important}
html body #spoiler.sp-phone #sp-story .sp-world-chapters .sp-ico-2{left:53%!important;top:44%!important}
html body #spoiler.sp-phone #sp-story .sp-world-chapters .sp-ico-3{left:5%!important;top:64%!important}
html body #spoiler.sp-phone #sp-story .sp-world-chapters .sp-ico-4{left:53%!important;top:64%!important}
#spoiler.sp-phone .sp-ice-blur{backdrop-filter:none!important}
#spoiler.sp-phone .sp-ice{pointer-events:none}
#spoiler.sp-phone .sp-statement img{display:none}
#spoiler.sp-phone .sp-count{width:calc(100% - 40px)}
html body #spoiler.sp-phone #sp-story .sp-world-chapters .sp-num{font-size:clamp(46px,14vw,58px)!important}
#spoiler.sp-phone .sp-bar-actions{margin-right:0;gap:8px}
#spoiler.sp-phone .sp-close,#spoiler.sp-phone .sp-sound{min-width:44px;min-height:44px}
html body #spoiler .sp-bar{position:fixed;left:0;right:0;top:0;height:0;padding-bottom:0!important}
#spoiler.sp-phone .sp-phone-vessel{top:-14%;mask-image:linear-gradient(#000 78%,transparent);-webkit-mask-image:linear-gradient(#000 78%,transparent)}
#spoiler .sp-half-bg,#spoiler .sp-statement img{display:none}
html body #spoiler.sp-phone #sp-story .sp-world-chapters .sp-stage>.sp-cap{bottom:auto!important}
#spoiler.sp-phone .sp-phone-layer,#spoiler.sp-phone .sp-phone-smoke{max-width:none!important}
html body #spoiler.sp-phone #sp-story .sp-world-chapters .sp-stage>.sp-cap.sp-ico{transform:translateY(-50%)!important;translate:none!important;font-size:10px!important;white-space:normal;line-height:1.5!important}
html body #spoiler.sp-phone #sp-story .sp-world-chapters .sp-stage>.sp-cap.sp-ico-1{left:5%!important;top:44%!important}
html body #spoiler.sp-phone #sp-story .sp-world-chapters .sp-stage>.sp-cap.sp-ico-2{left:53%!important;top:44%!important}
html body #spoiler.sp-phone #sp-story .sp-world-chapters .sp-stage>.sp-cap.sp-ico-3{left:5%!important;top:64%!important}
html body #spoiler.sp-phone #sp-story .sp-world-chapters .sp-stage>.sp-cap.sp-ico-4{left:53%!important;top:64%!important}
#spoiler.sp-phone .sp-news{padding-inline:0!important}
#spoiler.sp-phone .sp-half .sp-doc dd{font-size:16px!important;line-height:1.5!important}
#spoiler.sp-phone .sp-half .sp-doc dt{font-size:10px!important;line-height:1.5!important}
#spoiler.sp-phone .sp-half .sp-motto{font-size:16px!important;line-height:1.6!important}
#spoiler.sp-phone #sp-story{overflow-x:clip}
html body #spoiler.sp-phone #sp-story .sp-world-chapters .sp-stage>.sp-cap:not(.sp-ico){transform:translateY(-50%)!important;translate:none!important}
html body #spoiler.sp-phone #sp-story .sp-world-chapters .sp-stage>.sp-cap:not(.sp-red):not(.sp-stack-sub):not(.sp-ico) .w:first-child{padding:.3em .15em .25em .2em!important;margin:-.3em -.15em -.25em -.2em!important}
html body #spoiler.sp-phone #sp-story .sp-world-chapters .sp-stage>.sp-cap.sp-red{left:24px!important;width:calc(100% - 48px)!important;max-width:calc(100% - 48px)!important;font-size:54px!important;justify-items:center!important}
html body #spoiler.sp-phone #sp-story .sp-world-chapters .sp-cap.sp-red .w.w{justify-self:center!important;margin:0!important;padding:.12em .15em .15em!important}
html body #spoiler.sp-phone #sp-story .sp-world-chapters .sp-cap.sp-red .w:nth-child(2)::first-letter{font-size:1.3em!important}
#spoiler.sp-phone .sp-s-fight .sp-stage{background:radial-gradient(ellipse at 50% 35%,#3c050b,#090409 75%)!important}
#spoiler.sp-phone .sp-s-fight .sp-phone-city{opacity:calc(1 - clamp(0,(var(--p) - .64)/.22,1))}
.sp-phone-splinter{position:absolute;inset:-14% 0 auto;width:100%;height:100%;object-fit:cover;pointer-events:none;transform:translate3d(calc(var(--burst,0)*var(--dx)),calc(var(--burst,0)*var(--dy)),0) rotate(calc(var(--burst,0)*var(--turn)));transform-origin:50% 48%;opacity:0}
/* Scroll advances through separate inked locations; coloured fire lives in front of the cells. */
#spoiler.sp-phone .sp-phone-city{background:radial-gradient(ellipse at 55% 65%,#333,#080808 75%)}
#spoiler.sp-phone .sp-phone-layer{filter:grayscale(1);object-position:50% 50%;transform-origin:50% 65%;will-change:transform}
#spoiler.sp-phone .sp-phone-layer-0{top:-4%;transform:translate3d(0px,calc(var(--p)*-12px),0) scale(calc(1 + var(--p)*.18))}
#spoiler.sp-phone .sp-phone-layer-1{top:-10%;transform:translate3d(0px,calc(var(--p)*-28px),0) scale(calc(1 + var(--p)*.55))}
#spoiler.sp-phone .sp-phone-layer-2{top:8%;transform:translate3d(0px,calc(var(--p)*48px),0) scale(calc(1 + var(--p)*1.1))}
#spoiler.sp-phone .sp-phone-smoke{filter:grayscale(1);opacity:.3}
#spoiler.sp-phone .sp-phone-paper{filter:grayscale(1) drop-shadow(0 2px 3px #ff6b16);transform:perspective(600px) translate3d(calc(var(--p)*80px),calc(var(--p)*-280px),calc(var(--p)*250px)) rotateY(calc(-25deg + var(--p)*55deg)) rotate(calc(-18deg + var(--i)*19deg));clip-path:polygon(0 0,100% 0,100% calc(94% - var(--p)*35%),88% calc(98% - var(--p)*35%),76% calc(90% - var(--p)*35%),60% calc(96% - var(--p)*35%),45% calc(88% - var(--p)*35%),28% calc(97% - var(--p)*35%),14% calc(89% - var(--p)*35%),0 calc(95% - var(--p)*35%));opacity:1}
html body #spoiler #sp-story .sp-world-chapters :is(.sp-s-fight,.sp-s-spread) .sp-cap:not(.sp-red){left:6%!important;right:auto!important;top:20%!important;bottom:auto!important;height:auto!important;translate:none!important;width:38%;max-width:12em!important;text-align:left!important;transform:translateY(-50%)!important;font-size:clamp(30px,3.2vw,52px)!important}
html body #spoiler.sp-phone #sp-story .sp-world-chapters :is(.sp-s-fight,.sp-s-spread) .sp-cap:not(.sp-red){left:24px!important;width:calc(100% - 48px)!important;top:22%!important;font-size:clamp(24px,7.2vw,32px)!important}
#spoiler.sp-phone .sp-phone-layer-1{filter:none}
#spoiler.sp-phone .sp-phone-paper.is-burning{animation:sp-touch-burn 3.5s ease-in forwards}
@keyframes sp-touch-burn{to{clip-path:polygon(12% 0,92% 0,80% 22%,72% 34%,58% 24%,40% 36%,24% 20%,0 26%);opacity:.15}}
html body #spoiler #sp-story .sp-statement img{display:block!important;opacity:.7!important}
html body #spoiler #sp-story .sp-s-vase .sp-ice-blur{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html body #spoiler #sp-story .sp-s-vase .sp-ice::after{display:none!important}
html body #spoiler #sp-story .sp-s-vase .sp-ice-frost{opacity:.3!important}
html body #spoiler #sp-story .sp-s-vase .sp-cap{color:#f5f5ef!important;text-shadow:0 2px 3px #000,0 0 24px #000,0 0 48px #000!important}
html body #spoiler .sp-grain{animation:none!important;opacity:.05!important}
html body #spoiler.sp-phone .sp-phone-paper{filter:grayscale(1)!important;clip-path:polygon(0 0,100% 0,100% calc(94% - var(--p)*35%),80% calc(92% - var(--p)*35%),60% calc(96% - var(--p)*35%),40% calc(90% - var(--p)*35%),20% calc(96% - var(--p)*35%),0 calc(95% - var(--p)*35%));transform:perspective(600px) translate3d(calc(var(--p)*160px),calc(var(--p)*-180px),calc(var(--p)*520px)) rotateY(calc(-25deg + var(--p)*55deg)) rotate(calc(-18deg + var(--i)*19deg));opacity:calc(1 - clamp(0,(var(--p) - .28)*8,1))}
.sp-phone-war-ruins{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.7);opacity:.75}
#spoiler.sp-phone .sp-phone-layer-0{opacity:.18}
#spoiler.sp-phone .sp-phone-war-vase{mask-image:radial-gradient(ellipse 20% 42% at 50% 48%,#000 80%,transparent 100%)}
#spoiler.sp-phone .sp-phone-paper{left:calc(2% + mod(var(--i),3)*32%);top:calc(24% + var(--i)*12%)}
#spoiler.sp-phone .sp-phone-war-vase{z-index:1}
#spoiler.sp-phone .sp-phone-war-ruins{z-index:0}
#spoiler.sp-phone .sp-phone-war-vase{mask-image:none;clip-path:polygon(38% 20%,55% 20%,54% 28%,55% 34%,61% 47%,66% 58%,70% 69%,69% 77%,65% 82%,43% 84%,37% 79%,34% 72%,34% 58%,36% 47%,40% 35%,40% 28%);transform:translateX(19%) scale(.74);filter:saturate(.45) brightness(.85)!important}
#spoiler .sp-blank.is-night-transition i{transition:transform 1.3s cubic-bezier(.22,.61,.36,1),background-color .8s}
html body #spoiler.sp-phone .sp-phone-paper{--flight:clamp(0,var(--p)/.22,1);transform:perspective(600px) translate3d(calc(var(--flight)*200px),calc(var(--flight)*-200px),calc(var(--flight)*480px)) rotateY(calc(-25deg + var(--flight)*55deg)) rotate(calc(-18deg + var(--i)*19deg));opacity:calc(1 - clamp(0,(var(--p) - .12)/.1,1))}
html body #spoiler.sp-phone .sp-s-spread .sp-phone-paper{--flight:clamp(0,var(--p)/.38,1);opacity:calc(1 - clamp(0,(var(--p) - .28)/.1,1))}
#spoiler.sp-phone .sp-phone-layer-1{mask-image:linear-gradient(#000 0%,#000 68%,transparent 94%)}
/* Two deliberate confirmations before the record. */
.sp-confirmation[hidden]{display:none!important}
.sp-confirmation .sp-lede{font-size:clamp(24px,4vw,36px);line-height:1.25;margin:24px 0}
.sp-btn-back{margin-left:12px;opacity:.65}
.sp-btn-back:hover,.sp-btn-back:focus-visible{opacity:1}
.sp-phone-lightning{position:absolute;top:3%;left:55%;width:100px;height:220px;opacity:0;pointer-events:none;filter:drop-shadow(0 0 8px #acb9ca)}
.sp-phone-lightning svg{width:100%;height:100%;fill:none;stroke:#e6edf4;stroke-width:1.6;stroke-linejoin:miter}
.sp-phone-lightning.is-striking{animation:sp-storm .95s ease-out}
@keyframes sp-storm{0%{opacity:0}8%{opacity:1}24%{opacity:.25}33%{opacity:.65}100%{opacity:0}}
@mediaall{:where(html[data-koan-motion="reduced"]) .sp-phone-lightning{display:none}}
#spoiler.sp-phone .sp-phone-paper{pointer-events:auto}
html body #spoiler.sp-phone .sp-phone-paper{transform:perspective(600px) translate3d(calc(-50% + var(--flight)*var(--wind-x)),calc(-50% + var(--flight)*var(--wind-y)),calc(var(--flight)*480px)) rotateY(calc(var(--yaw) + var(--flight)*35deg)) rotate(var(--turn));box-shadow:none}
/* Cinematic revision: a consistent reading axis, live depth and quieter gold linework. */
html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-cap.sp-at-l{left:7%!important;right:auto!important;text-align:left!important;top:34%!important;max-width:16em!important;z-index:10}
html body #spoiler #sp-story .sp-s-open .sp-stage>.sp-cap:first-child{left:8.5%!important;right:auto!important;top:51%!important;width:32%!important;max-width:9em!important;text-align:left!important;transform:translateY(-50%)!important;font-family:var(--k-font-display)!important}
.sp-opening-kicker{display:block;font:italic 400 clamp(24px,2.3vw,38px)/1.2 var(--k-font-logo);margin-bottom:14px}
.sp-opening-title{display:block;font:400 clamp(46px,5.6vw,84px)/.98 var(--k-font-display);letter-spacing:-.035em}
html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-stack-lead{font:400 clamp(32px,3.4vw,54px)/1.04 var(--k-font-display)!important;text-transform:none!important;letter-spacing:-.02em!important;left:50%!important;top:33%!important;width:70%!important;max-width:20em!important;text-align:center!important;transform:translate(-50%,-50%)!important;color:#f0e4d0!important;text-shadow:0 2px 20px #050b10}
.sp-stack-lead em{font-weight:400}
html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-ico{top:60%!important;display:flex;flex-direction:column;gap:14px!important;line-height:1.4!important;width:20%!important;max-width:20%!important}
html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-ico small{display:block;font:400 10px/1.6 var(--k-font-mono);letter-spacing:.2em;white-space:normal;max-width:18em;text-transform:uppercase;color:#dcccad}
html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-ico::before{left:-50%!important;right:50%!important;top:-48px!important;opacity:calc(var(--t)*.4)!important}
html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-ico-1::before{display:none!important}
html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-ico::after{width:68px!important;height:68px!important;top:-83px!important;margin-left:-34px!important;filter:drop-shadow(0 0 5px #f6d6a344)!important}
#spoiler .sp-ico-1{--icon:url("data:image/svg+xml;utf8,")}
#spoiler .sp-ico-2{--icon:url("data:image/svg+xml;utf8,")}
#spoiler .sp-ico-3{--icon:url("data:image/svg+xml;utf8,")}
#spoiler .sp-ico-4{--icon:url("data:image/svg+xml;utf8,")}
html body #spoiler #sp-story .sp-s-copy .sp-slow{top:79%!important;font-size:22px!important;opacity:calc(var(--t)*.55)!important}
html body #spoiler #sp-story .sp-s-vase .sp-ice-frost{opacity:.9!important;mix-blend-mode:normal}
html body #spoiler #sp-story .sp-s-vase .sp-ice-blur{backdrop-filter:blur(7px) saturate(.35) brightness(.7)!important;-webkit-backdrop-filter:blur(7px) saturate(.35) brightness(.7)!important}
#spoiler .sp-blood{filter:drop-shadow(0 0 8px #fb233b88) drop-shadow(0 0 28px #b0002255)}
#spoiler .sp-s-count .sp-stage::before{content:'';position:absolute;inset:15%;background:radial-gradient(ellipse,#e5002918,transparent 70%);pointer-events:none;animation:sp-count-pulse 3.8s ease-in-out infinite}
#spoiler .sp-s-fight .sp-red{animation:sp-title-pulse 3.2s ease-in-out infinite}
@keyframes sp-count-pulse{50%{opacity:.45;transform:scale(1.06)}}
@keyframes sp-title-pulse{50%{text-shadow:0 0 30px #ff6248aa,0 0 70px #f30c2866}}
#spoiler .sp-sound,#spoiler .sp-close{background:#ffffff08;backdrop-filter:blur(4px);border:1px solid #ffffff22;box-shadow:inset 0 1px 1px #ffffff22}
#spoiler.sp-phone .sp-world.is-gold{background:url('assets/anime/gold-mist.webp?v=3') 35% 50%/cover!important}
#spoiler.sp-phone .sp-phone-city,#spoiler.sp-phone .sp-phone-copies{perspective:600px;perspective-origin:50% 50%}
.sp-phone-copies{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sp-phone-copy{position:absolute;pointer-events:none}
#spoiler.sp-phone .sp-phone-paper{clip-path:none!important;box-shadow:none;will-change:auto}
#spoiler.sp-phone .sp-phone-paper.is-burning{animation:sp-touch-burn var(--burn-time,4s) ease-in forwards;filter:grayscale(1) drop-shadow(0 0 4px #ff9018)!important}
.sp-phone-embers{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
#spoiler.sp-phone .sp-phone-layer{transform:translate3d(0,calc(var(--p)*10px),0)!important}
#spoiler.sp-phone .is-night-alive .sp-phone-city{animation:sp-night-shake .22s linear infinite alternate}
@keyframes sp-night-shake{0%{translate:0 -1.5px}30%{translate:.5px 1px}65%{translate:-.5px -1px}100%{translate:0 1.5px}}
#spoiler.sp-phone .sp-blank{display:block!important}
#spoiler.sp-phone .sp-phone-vessel{clip-path:polygon(38% 20%,55% 20%,54% 28%,55% 34%,61% 47%,66% 58%,70% 69%,69% 77%,65% 82%,43% 84%,37% 79%,34% 72%,34% 58%,36% 47%,40% 35%,40% 28%);object-fit:fill;transform:translateX(25%) scale(.85)}
@media(max-width:760px){
html body #spoiler.sp-phone #sp-story .sp-s-open .sp-stage>.sp-cap:first-child{left:24px!important;top:48%!important;width:42%!important;max-width:42%!important}
.sp-opening-kicker{font-size:20px}.sp-opening-title{font-size:42px}
html body #spoiler.sp-phone #sp-story .sp-world-chapters .sp-stage>.sp-stack-lead{left:50%!important;top:27%!important;width:90%!important;max-width:90%!important;font-size:32px!important;text-align:center!important;transform:translate(-50%,-50%)!important}
html body #spoiler.sp-phone #sp-story .sp-world-chapters .sp-stage>.sp-ico{width:40%!important;max-width:40%!important;transform:translateY(-50%)!important}
html body #spoiler.sp-phone #sp-story .sp-world-chapters .sp-stage>.sp-ico-1,html body #spoiler.sp-phone #sp-story .sp-world-chapters .sp-stage>.sp-ico-2{top:49%!important}
html body #spoiler.sp-phone #sp-story .sp-world-chapters .sp-stage>.sp-ico-3,html body #spoiler.sp-phone #sp-story .sp-world-chapters .sp-stage>.sp-ico-4{top:72%!important}
html body #spoiler.sp-phone #sp-story .sp-world-chapters .sp-stage>.sp-ico small{font-size:8px;letter-spacing:.08em}
html body #spoiler.sp-phone #sp-story .sp-world-chapters .sp-stage>.sp-ico::after{width:46px!important;height:46px!important;top:-61px!important;margin-left:-23px!important}
html body #spoiler.sp-phone #sp-story .sp-world-chapters .sp-stage>.sp-ico::before{display:none!important}
}
@mediaall{:where(html[data-koan-motion="reduced"]) #spoiler .sp-s-count .sp-stage::before,:where(html[data-koan-motion="reduced"]) #spoiler .sp-red,:where(html[data-koan-motion="reduced"]) #spoiler.sp-phone .is-night-alive .sp-phone-city{animation:none!important}}
.sp-phone-gpu-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#spoiler.sp-phone-gpu .sp-phone-city{background:transparent}
#spoiler.sp-phone-gpu .sp-phone-city :is(.sp-phone-layer,.sp-phone-smoke,.sp-phone-paper){display:none!important}
html body #spoiler.sp-phone-gpu #sp-story .sp-s-vase .sp-ice-blur{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html body #spoiler #sp-story .sp-s-open .sp-stage>.sp-cap:first-child{display:block!important}
html body #spoiler.sp-phone #sp-story .sp-world-chapters .sp-stage>.sp-cap.sp-stack.sp-stack-lead{transform:translate(-50%,-50%)!important;left:50%!important;right:auto!important;top:27%!important;max-width:90%!important;width:90%!important;text-align:center!important;white-space:normal!important;font-size:32px!important}
html body #spoiler.sp-phone #sp-story .sp-world-chapters .sp-stage>.sp-cap.sp-stack.sp-stack-lead span{white-space:normal}
/* A loading shot, with a tangible form and a quiet progress cue. */
#spoiler .sp-loading{background:#071016 url('assets/anime/gold-mist.webp?v=3') center/cover;justify-content:flex-end;padding-bottom:10svh}
#spoiler .sp-loading::before{opacity:.025}
#spoiler .sp-loading::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 30%,#071016cc);pointer-events:none}
#spoiler .sp-loading-art{position:absolute;top:12%;left:50%;width:190px;height:48svh;max-height:430px;transform:translateX(-50%);margin:0;z-index:1;animation:sp-load-float 7s ease-in-out infinite}
#spoiler .sp-loading-art svg{fill:url(#sp-load-ceramic);stroke:#e8ddc4;stroke-width:.8;filter:drop-shadow(0 12px 32px #0008) drop-shadow(-12px 0 28px #f8d6a122)}
#spoiler .sp-loading-art .sp-load-crack{fill:none;stroke:#c04b3d;stroke-width:1.4}
#spoiler .sp-loading-kicker,#spoiler .sp-loading-title,#spoiler .sp-loading-note,#spoiler .sp-loading-track{position:relative;z-index:1}
html body #spoiler .sp-loading-title{font-size:clamp(26px,3.2vw,44px);margin-bottom:22px!important}
#spoiler .sp-loading-track{width:min(250px,50vw);height:2px;background:#ffffff15}
#spoiler .sp-loading-track i{background:#efd8ac;box-shadow:0 0 12px #f9c57999}
@keyframes sp-load-float{50%{transform:translateX(-50%) translateY(-8px) rotateY(8deg)}}
@mediaall{:where(html[data-koan-motion="reduced"]) #spoiler .sp-loading-art{animation:none}}
#spoiler.sp-phone-gpu .sp-s-fight .sp-stage{background:transparent!important}
#spoiler.sp-phone-gpu .sp-s-fight .sp-stage::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 65% 35%,#c5192b,#18050d 80%);opacity:clamp(0,(var(--p) - .64)/.22,1);pointer-events:none}
html body #spoiler #sp-story .sp-world-chapters .sp-s-count .sp-stage>.sp-cap.sp-at-l{top:70%!important;width:70%!important;max-width:20em!important}
html body #spoiler.sp-phone #sp-story .sp-world-chapters .sp-s-count .sp-stage>.sp-cap.sp-at-l{top:67%!important;width:calc(100% - 48px)!important}
#spoiler .sp-blood text{-webkit-text-fill-color:initial}
/* Peace precedes the winter conflict; the ruins enter only with its next sentence. */
.sp-phone-peace{position:absolute;inset:-3%;width:106%;height:106%;object-fit:cover;object-position:60% center;opacity:calc(1 - var(--conflict,0));pointer-events:none;animation:sp-peace-breathe 24s ease-in-out infinite alternate}
#spoiler.sp-phone .sp-s-vase .sp-phone-war-ruins{opacity:calc(var(--conflict,0)*.75)}
#spoiler.sp-phone .sp-s-vase .sp-phone-war-vase{opacity:var(--conflict,0)}
@keyframes sp-peace-breathe{to{transform:translate3d(-1%,.5%,0) scale(1.035)}}
@mediaall{:where(html[data-koan-motion="reduced"]) .sp-phone-peace{animation:none}}
html body #spoiler #sp-story .sp-s-vase .sp-ice{opacity:var(--conflict,0);transition:opacity .4s}
.sp-phone-peace-character{position:absolute;right:0;bottom:7%;height:48%;width:65%;object-fit:contain;object-position:bottom;pointer-events:none;opacity:calc(1 - var(--conflict,0));filter:drop-shadow(0 10px 18px #08101855)}
.sp-phone-peace-fog{position:absolute;inset:45% -20% 0;pointer-events:none;opacity:calc((1 - var(--conflict,0))*.4);background:radial-gradient(ellipse at 30% 70%,#c6cede99,transparent 55%),radial-gradient(ellipse at 80% 60%,#aabbcf99,transparent 65%);filter:blur(18px);animation:sp-peace-fog 26s ease-in-out infinite alternate}
@keyframes sp-peace-fog{to{transform:translate3d(6%,2%,0)}}
@mediaall{:where(html[data-koan-motion="reduced"]) .sp-phone-peace-fog{animation:none}}
/* The riot title belongs to the burning city, not to a satin-red interlude. */
html body #spoiler #sp-story .sp-s-fight .sp-cap.sp-red{font-weight:700;letter-spacing:-.025em;filter:none!important;text-transform:uppercase;animation:none!important}
html body #spoiler #sp-story .sp-s-fight .sp-cap.sp-red .w.w{font-family:'Koan Editorial',serif!important;font-style:normal!important;background:none!important;color:#f2e5cf!important;-webkit-text-fill-color:#f2e5cf!important;text-shadow:0 2px 12px #000!important;animation:none!important}
html body #spoiler #sp-story .sp-s-fight .sp-cap.sp-red .w:nth-child(2)::first-letter{font-family:inherit!important;font-size:1em!important;vertical-align:baseline!important;margin:0!important}
#spoiler.sp-phone-gpu .sp-s-fight .sp-stage::before{background:linear-gradient(transparent,#17090499)!important;opacity:clamp(0,(var(--p) - .64)/.22,.5)}
html body #spoiler #sp-story .sp-world-chapters .sp-cap.sp-red.sp-night-title{display:flex!important;flex-direction:column;align-items:center;font-family:'Koan Editorial',serif!important;text-align:center;line-height:.93!important;filter:none!important;color:#eddfc7!important;-webkit-text-fill-color:#eddfc7!important;font-weight:700;text-shadow:0 3px 18px #000!important;gap:.18em}
.sp-night-title .sp-night-place{font-size:clamp(48px,8vw,124px);text-transform:uppercase;letter-spacing:-.035em}
.sp-night-title .sp-night-kicker{font-family:'Koan Mono',monospace;font-size:clamp(12px,1.5vw,20px);text-transform:uppercase;letter-spacing:.32em}
@media(max-width:760px){.sp-night-title .sp-night-place{font-size:clamp(28px,9vw,54px)}html body #spoiler.sp-phone #sp-story .sp-s-copy .sp-slow{left:50%!important;top:84%!important;text-align:center!important;transform:translate(-50%,-50%)!important;width:auto!important;max-width:90%!important}}
html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-cap.sp-red.sp-night-title{filter:none!important}
#spoiler .sp-key-hint{position:fixed;left:26px;bottom:22px;font:10px 'Koan Mono',monospace;letter-spacing:.08em;color:#e9dec2;opacity:0;z-index:40;pointer-events:none;text-shadow:0 1px 8px #000}#spoiler:has(.sp-world.is-rendered):not(.sp-is-loading) .sp-key-hint{opacity:.55}@media(pointer:coarse){#spoiler .sp-key-hint{display:none}}
#spoiler .sp-phone-peace-fog{inset:-8%;filter:blur(28px);background:linear-gradient(110deg,#31486e99,transparent 48%,#e6b29799),radial-gradient(ellipse at 40% 75%,#c6cedeaa,transparent 70%);opacity:calc((1 - var(--conflict,0))*.72)}
/* Aftermath: the visual follows the retreat, with the reading position held steady. */
html body #spoiler #sp-story .sp-s-lines .sp-htrack{position:absolute;inset:0;display:block;width:100%;transform:none!important;z-index:3}
html body #spoiler #sp-story .sp-s-lines .sp-hpanel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0 8vw;width:100%;text-align:left;gap:24px;transform:none!important}
html body #spoiler #sp-story .sp-s-lines .sp-line{max-width:12em;font-size:clamp(36px,4.5vw,68px);line-height:1.1;text-shadow:0 2px 25px #0009}
html body #spoiler #sp-story .sp-s-lines .sp-hnum{font-size:11px;opacity:.5;letter-spacing:.2em}
html body #spoiler #sp-story .sp-s-lines .sp-h-label{left:8vw;top:22%;transform:none;text-align:left}
.sp-army-scene{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:clamp(0,(.78 - var(--hp,0))*2,1);background:linear-gradient(#15202755,#68707933 65%,#10171b)}
.sp-army-scene img{position:absolute;max-width:none;width:120%;height:70%;object-fit:fill;bottom:-9%;filter:blur(.3px);opacity:.82}
.sp-army-scene .sp-army-far{width:110%;height:45%;bottom:7%;left:-5%;filter:blur(2px);opacity:.32;transform:translateX(calc(var(--hp,0)*-6%))}
.sp-army-scene .sp-army-near{left:-10%;transform:translateX(calc(var(--hp,0)*-17%))}
.sp-army-haze,.sp-army-fog{position:absolute;inset:0;background:radial-gradient(ellipse at 75% 55%,#a7afb844,transparent 60%);z-index:2}
.sp-army-fog{background:linear-gradient(transparent 40%,#a3adb333 70%,transparent);filter:blur(24px);animation:army-mist 18s ease-in-out infinite alternate}
@keyframes army-mist{from{transform:translateX(-5%)}to{transform:translateX(5%)}}
@media(max-width:760px){html body #spoiler #sp-story .sp-s-lines .sp-hpanel{padding:0 26px}html body #spoiler #sp-story .sp-s-lines .sp-line{font-size:34px;max-width:10em}html body #spoiler #sp-story .sp-s-lines .sp-h-label{left:26px;top:23%}.sp-army-scene img{width:240%;left:-70%!important;height:48%;bottom:0}.sp-army-scene .sp-army-far{width:220%;height:35%;bottom:12%}}
@mediaall{:where(html[data-koan-motion="reduced"]) .sp-army-fog{animation:none}}
html body #spoiler #sp-story .sp-world-chapters .sp-s-lines .sp-hpanel{filter:none!important}
html body #spoiler #sp-story .sp-world-chapters .sp-s-lines .sp-hpanel .sp-line{font-size:clamp(36px,4.5vw,68px)!important;text-align:left!important;line-height:1.1!important;max-width:12em}
html body #spoiler #sp-story .sp-s-lines .sp-hstage::after{left:8vw;right:auto;width:22vw;bottom:20%;opacity:.35}
@media(max-width:760px){html body #spoiler #sp-story .sp-world-chapters .sp-s-lines .sp-hpanel .sp-line{font-size:34px!important}html body #spoiler #sp-story .sp-s-lines .sp-hstage::after{left:26px;width:40vw}}
/* Doctrine remains present throughout its hold, rather than waiting through an empty chapter. */
html body #spoiler #sp-story .sp-s-split .sp-half{clip-path:none!important;backdrop-filter:none;background:linear-gradient(145deg,#202c32,#0c1419)!important;color:#e7e5da}
html body #spoiler #sp-story .sp-s-split .sp-maculati{background:linear-gradient(145deg,#2d211c,#100b0b)!important;color:#eee0cd}
html body #spoiler #sp-story .sp-s-split .sp-half-in{opacity:1!important;transform:none!important;padding:70px clamp(28px,5vw,80px) 45px}
html body #spoiler #sp-story .sp-s-split .sp-doc dd{font-size:17px;line-height:1.55}
html body #spoiler #sp-story .sp-s-split .sp-sigil{width:48px;opacity:.65}
html body #spoiler #sp-story .sp-s-split .sp-seam{transform:none;opacity:.15}
html body #spoiler #sp-story .sp-s-vase .sp-stage::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#12243e66,transparent 70%);opacity:calc(1 - var(--conflict,0))}
html body #spoiler #sp-story .sp-s-vase .sp-stage>.sp-cap{z-index:4;text-shadow:0 2px 20px #192338!important}
.sp-army-scene .sp-army-near{transform:translateX(calc(var(--hp,0)*-17% + var(--mx,0)*-2%)) translateY(calc(var(--my,0)*.8%))}
.sp-army-scene .sp-army-far{transform:translateX(calc(var(--hp,0)*-6% + var(--mx,0)*-.6%))}
@media(max-width:760px){html body #spoiler #sp-story .sp-s-split .sp-half-in{padding:65px 26px!important}html body #spoiler #sp-story .sp-s-split .sp-doc div{grid-template-columns:1fr;gap:8px}html body #spoiler #sp-story .sp-s-split .sp-doc dd{font-size:16px;line-height:1.6}}
html body #spoiler #sp-story .sp-s-lines .sp-h-label{position:absolute!important}
/* Layered reveals: preserve image proportions and keep the reading lane clear. */
html body #spoiler .sp-cue span{display:flex;align-items:center;gap:9px;padding:11px 22px;border:1px solid #ffffff55;background:linear-gradient(#ffffff30,#ffffff0a)!important;box-shadow:inset 0 1px 2px #ffffff66,0 4px 20px #0004;backdrop-filter:blur(12px);font:600 12px/1 var(--k-font-mono);letter-spacing:.07em;color:#fff!important}
.sp-cue b{width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 10px #ffffff88;animation:cue-pulse 2.6s ease-in-out infinite}
@keyframes cue-pulse{50%{box-shadow:0 0 15px #ffffffcc;opacity:.65}}
.sp-war-whiteout{position:absolute;inset:-5%;z-index:12;pointer-events:none;opacity:var(--whiteout,0);background:radial-gradient(ellipse at 35% 35%,#fff,#dce7ed 65%,#e8eff2);filter:blur(5px)}
.sp-war-whiteout::after{content:'';position:absolute;inset:-30%;background:radial-gradient(circle,#fff 0 2px,transparent 4px) 0 0/73px 93px,radial-gradient(circle,#fff 0 4px,transparent 8px) 31px 11px/139px 171px;animation:war-snow 1.5s linear infinite;opacity:.7}
@keyframes war-snow{to{transform:translate3d(50px,180px,0)}}
html body #spoiler #sp-story .sp-army-scene .sp-army-far{inset:-5%;width:110%;height:110%;object-fit:cover;opacity:.7;transform:translateX(calc(var(--mx,0)*-1%));filter:blur(1px)}
html body #spoiler #sp-story .sp-army-scene .sp-army-near{inset:auto -8% -6% auto;left:auto!important;width:95%;height:95%;object-fit:contain;object-position:right bottom;opacity:.9;transform:translate3d(calc(var(--mx,0)*-4%),calc(var(--my,0)*2%),0);filter:none}
.sp-phone-war-near{position:absolute;inset:auto -8% -2% auto;width:140%;height:75%;object-fit:contain;object-position:right bottom;opacity:var(--conflict,0);transform:translateY(calc(var(--p,0)*-28px));pointer-events:none}
@media(max-width:760px){html body #spoiler #sp-story .sp-army-scene .sp-army-near{width:170%;height:70%}#spoiler.sp-phone .sp-world.is-gold{background-position:38% 50%!important;background-size:cover!important}}
@mediaall{:where(html[data-koan-motion="reduced"]) .sp-cue b,:where(html[data-koan-motion="reduced"]) .sp-war-whiteout::after{animation:none}}
@media(max-width:760px){html body #spoiler #sp-story .sp-world-chapters .sp-stage>.sp-cap:not(.sp-red):not(.sp-ico):not(.sp-stack-lead):not(.sp-slow){font-size:clamp(28px,6.2vw,34px)!important;line-height:1.13!important;max-width:calc(100% - 48px)!important}html body #spoiler #sp-story .sp-world-chapters .sp-s-open .sp-opening-title{font-size:clamp(44px,11vw,62px)!important}html body #spoiler #sp-story .sp-world-chapters .sp-ico small{font-size:11px!important;line-height:1.5!important}}
html body #spoiler #sp-story .sp-army-scene .sp-army-far{left:-5%!important;right:-5%!important;filter:blur(2px);object-position:65% center}.sp-army-near,.sp-phone-war-near{display:none!important}.sp-army-fog{opacity:.45}html body #spoiler #sp-story .sp-s-vase .sp-ice-blur{backdrop-filter:blur(2px) saturate(.7) brightness(.86)!important;-webkit-backdrop-filter:blur(2px) saturate(.7) brightness(.86)!important}
.sp-phone-gpu-canvas.is-foreground{filter:blur(2.5px)}
@media(max-width:760px){html body #spoiler #sp-story .sp-world-chapters .sp-s-copy .sp-stage>.sp-ico.sp-ico{width:42%!important;max-width:42%!important;transform:translate(-50%,-50%)!important;font-size:11px!important;line-height:1.4!important;white-space:normal!important;padding-top:8px!important;text-align:center!important}html body #spoiler #sp-story .sp-world-chapters .sp-s-copy .sp-stage>.sp-ico.sp-ico-1{top:48%!important;left:26%!important}html body #spoiler #sp-story .sp-world-chapters .sp-s-copy .sp-stage>.sp-ico.sp-ico-2{top:48%!important;left:74%!important}html body #spoiler #sp-story .sp-world-chapters .sp-s-copy .sp-stage>.sp-ico.sp-ico-3{top:69%!important;left:26%!important}html body #spoiler #sp-story .sp-world-chapters .sp-s-copy .sp-stage>.sp-ico.sp-ico-4{top:69%!important;left:74%!important}html body #spoiler #sp-story .sp-world-chapters .sp-s-copy .sp-stage>.sp-ico.sp-ico small{max-width:13em;white-space:normal!important;margin:9px auto 0!important;font-size:11px!important}html body #spoiler .sp-phone-war-ruins{filter:blur(5px) brightness(.7);transform:scale(1.045);object-fit:cover}html body #spoiler #sp-story .sp-s-open .sp-stage>.sp-cap:first-child{max-width:42%!important;width:42%!important}}
html body #spoiler #sp-story .sp-s-vase .sp-stage>.sp-cap{z-index:14!important}html body #spoiler #sp-story .sp-s-vase.is-whiteout .sp-stage>.sp-cap,html body #spoiler #sp-story .sp-s-vase.is-whiteout .sp-stage>.sp-cap :is(.w,em,span){color:#23303a!important;-webkit-text-fill-color:#23303a!important;text-shadow:none!important}
/* Restore the scroll-driven horizontal sequence, sized to the dialog at every width. */
html body #spoiler #sp-story .sp-s-lines .sp-htrack{inset:0 auto 0 0;display:flex;flex-direction:row;width:400%;height:100%;transform:translate3d(calc(var(--hp,0)*-75%),0,0)!important}
html body #spoiler #sp-story .sp-s-lines .sp-hpanel{position:relative;inset:auto;flex:0 0 25%;width:25%;min-width:0;height:100%;box-sizing:border-box;opacity:1!important;filter:none!important;transform:none!important;align-items:flex-start;justify-content:center;padding:0 8vw}
html body #spoiler .sp-blank.is-white{display:none!important}
@media(max-width:760px){html body #spoiler #sp-story .sp-s-lines .sp-hpanel{padding:0 26px}html body #spoiler #sp-story .sp-world-chapters .sp-s-lines .sp-hpanel .sp-line{max-width:100%;font-size:32px!important;white-space:normal}html body #spoiler #sp-story .sp-s-lines .sp-h-label{position:absolute}}
html body #spoiler #sp-story .sp-s-vase .sp-stage::after{display:none!important}