html:has(.story-intro){scrollbar-gutter:auto;overflow:hidden}
.story-intro{position:fixed;inset:0;isolation:isolate;overflow:hidden;background:#14141f;color:#fff5e8;animation:intro-arrive 1.2s ease both}
.intro-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% center;z-index:-3;animation:intro-camera 32s ease-out both}
.intro-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#10121dd9 0%,#15152287 42%,#14121b15 78%),linear-gradient(0deg,#12131fea,transparent 74%)}
.intro-header{position:absolute;top:clamp(28px,5vh,64px);left:clamp(24px,6vw,120px);display:flex;align-items:center;gap:22px;color:#ebc1c5;font-size:12px;font-weight:650;letter-spacing:.24em}
.intro-chapter{border-left:1px solid #e7bdc357;padding-left:22px;font-size:10px;color:#d8d0d0}
.intro-sound{position:absolute;right:clamp(20px,4vw,64px);top:28px;z-index:5;--ink:#fff5e8;--muted:#d2c3d1;--surface:#292535;--surface-raised:#383041;--line:#ffffff24}
.intro-story{position:absolute;left:clamp(24px,7vw,140px);right:24px;bottom:clamp(132px,20vh,230px);max-width:740px;pointer-events:none}
.intro-rule{display:block;width:38px;height:2px;margin-bottom:28px;background:#e5b3b8;box-shadow:0 0 16px #e7a3b25c}
.intro-paragraph{margin:0;min-height:8em;font-family:'Nanum Myeongjo','Batang',serif;font-size:clamp(18px,1.55vw,25px);font-weight:500;line-height:2;letter-spacing:.015em;white-space:pre-line;word-break:keep-all;overflow-wrap:anywhere;text-shadow:0 2px 16px #090b15}
.intro-word{display:inline-block;white-space:nowrap}
.intro-letter{position:relative;display:inline-block;white-space:pre}
.intro-footer{position:absolute;left:clamp(24px,7vw,140px);right:clamp(24px,7vw,140px);bottom:clamp(32px,6vh,64px);display:flex;align-items:center;gap:16px;color:#ead8d3;pointer-events:none}
.intro-dots{display:flex;gap:8px;margin-right:auto;align-items:center}
.intro-dots i{display:block;width:5px;height:5px;border-radius:50%;background:#ebd5d140;transition:width .4s,background .4s}
.intro-dots i.is-done{background:#e6b9be}.intro-dots i.is-current{width:22px;border-radius:8px;background:#f0b7c0;box-shadow:0 0 12px #f0b7c052}
.intro-hint{font-size:12px;letter-spacing:.04em}.intro-next{display:grid;place-items:center;width:32px;height:32px;border:1px solid #f1d6da42;border-radius:50%;opacity:.5;transition:opacity .4s}
.intro-next .icon{width:15px;height:15px}.is-ready .intro-next{opacity:1;animation:intro-cue 2s ease-in-out infinite}
.intro-hit-area{position:absolute;inset:0;z-index:3;width:100%;height:100%;padding:0;border:0;border-radius:0;background:transparent;cursor:pointer;touch-action:manipulation}
.intro-hit-area:disabled{cursor:default}.intro-hit-area:focus{outline:none}
.is-leaving .intro-hint,.is-leaving .intro-next{opacity:0;transition:opacity .25s}
.intro-dust{position:absolute;inset:0;pointer-events:none;z-index:4}.intro-dust>i{position:absolute;width:3px;height:3px;border-radius:50%;background:#f2d3bc;box-shadow:0 0 6px #f8dbc878}
.intro-ambience{position:absolute;inset:0;z-index:-1;pointer-events:none}.intro-ambience>i{position:absolute;left:calc(9% + var(--mote)*7%);top:calc(18% + mod(var(--mote),5)*13%);width:2px;height:2px;border-radius:50%;background:#ffe1bd;opacity:0;animation:intro-mote 7s calc(var(--mote)*-.7s) ease-in-out infinite}
@keyframes intro-arrive{from{opacity:0}to{opacity:1}}@keyframes intro-camera{from{transform:scale(1.045)}to{transform:scale(1)}}
@keyframes intro-cue{50%{transform:translateX(4px)}}@keyframes intro-mote{50%{opacity:.35;transform:translate(14px,-22px)}}
@media(max-width:700px){.intro-background{object-position:77% center}.intro-shade{background:linear-gradient(0deg,#10121ff5 5%,#141522b8 48%,#14152218 86%)}.intro-header{top:28px;font-size:10px;gap:14px}.intro-chapter{padding-left:14px;font-size:9px}.intro-story{bottom:130px;max-width:none;left:26px;right:26px}.intro-paragraph{font-size:18px;line-height:1.95;min-height:13.65em}.intro-rule{margin-bottom:20px}.intro-footer{left:26px;right:26px;bottom:34px;gap:10px}.intro-hint{font-size:11px}.intro-next{width:28px;height:28px}}
@media(max-height:580px){.intro-story{bottom:85px;max-width:720px}.intro-paragraph{font-size:16px;line-height:1.75;min-height:7em}.intro-rule{margin-bottom:14px}.intro-footer{bottom:22px}.intro-header{top:20px}.intro-sound{top:14px}}

/* The epilogue uses the same reading rhythm, with the illustration beside the story. */
.story-epilogue{background:#221a24}
.story-epilogue .intro-background{filter:blur(38px);opacity:.24;transform:scale(1.12);animation:none;object-position:center;transition:opacity .8s}
.story-epilogue .intro-shade{background:linear-gradient(90deg,#211921f5 0%,#211921d9 33%,#21192138 72%),linear-gradient(0deg,#211921ed,transparent 50%,#21192196)}
.epilogue-art{position:absolute;right:4vw;top:16vh;bottom:16vh;width:60vw;margin:0;display:flex;align-items:center;justify-content:center;z-index:-1;opacity:0;transform:translateY(12px) scale(.98);transition:opacity 1.2s ease,transform 1.8s cubic-bezier(.16,.8,.25,1)}
.is-illustrated .epilogue-art{opacity:1;transform:none}
.epilogue-picture{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 16px 40px #100a1866)}
.story-epilogue .intro-story{left:6vw;right:auto;top:50%;bottom:auto;transform:translateY(-43%);width:28vw;max-width:540px}
.epilogue-scene-heading{animation:epilogue-heading 1.1s ease both}
.epilogue-dedication{display:block;color:#e4b7bf;font-size:clamp(11px,.85vw,14px);letter-spacing:.06em;margin-bottom:14px}
.epilogue-scene-heading h1{font-family:'Nanum Myeongjo','Batang',serif;font-size:clamp(25px,2.25vw,40px);font-weight:500;line-height:1.5;letter-spacing:-.03em;margin:0 0 24px;word-break:keep-all}
.story-epilogue .intro-rule{width:42px;margin-bottom:24px;background:#e9c4a7}
.story-epilogue .intro-paragraph{font-size:clamp(16px,1.22vw,21px);line-height:2;min-height:10em;color:#efe4e3}
.story-epilogue .intro-ambience{z-index:0}
.story-epilogue .intro-header{color:#edc7b5}
.story-epilogue .intro-footer{left:6vw;right:4vw}
.story-epilogue.is-leaving .epilogue-art{opacity:0;transform:translateY(-6px) scale(1.01);transition:opacity .75s ease,transform 1s ease}
.story-epilogue.is-leaving .epilogue-scene-heading{opacity:0;transition:opacity .6s}
.story-preload{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
@keyframes epilogue-heading{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:700px){
  .story-epilogue{display:grid;grid-template-rows:70px minmax(0,1fr) auto 76px}
  .story-epilogue .intro-shade{background:linear-gradient(0deg,#211921f5 0%,#211921de 40%,#21192144 85%)}
  .epilogue-art{position:relative;grid-row:2;inset:auto;align-self:stretch;width:auto;min-height:0;margin:0 16px}
  .story-epilogue .intro-story{position:relative;grid-row:3;inset:auto;transform:none;width:auto;max-width:none;margin:20px 26px 0}
  .story-epilogue .intro-paragraph{font-size:clamp(14px,4vw,17px);line-height:1.85;min-height:8em}
  .epilogue-dedication{font-size:11px;margin-bottom:7px}
  .epilogue-scene-heading h1{font-size:25px;margin-bottom:14px}
  .story-epilogue .intro-rule{margin-bottom:15px;width:30px}
  .story-epilogue .intro-footer{left:26px;right:26px;bottom:24px}
  .story-epilogue .intro-hint{font-size:10px}
}
@media(max-height:580px) and (min-width:701px){
  .story-epilogue .intro-story{width:38vw;top:52%}
  .story-epilogue .intro-paragraph{font-size:14px;line-height:1.8;min-height:7em}
  .epilogue-scene-heading h1{font-size:24px;margin-bottom:10px}
  .epilogue-dedication{margin-bottom:6px}.story-epilogue .intro-rule{margin-bottom:12px}
  .epilogue-art{width:50vw;top:16vh;bottom:17vh}
}
@media(max-height:580px) and (max-width:700px){
  .story-epilogue{grid-template-rows:58px minmax(0,1fr) auto 64px}
  .story-epilogue .intro-story{margin:12px 22px 0}
  .story-epilogue .intro-paragraph{font-size:14px;line-height:1.8;min-height:7.2em}
  .epilogue-scene-heading h1{font-size:22px;margin-bottom:10px}
  .story-epilogue .intro-rule{margin-bottom:12px}
  .story-epilogue .intro-footer{left:22px;right:22px;bottom:18px}
}