:root{color-scheme:dark;font-family:"PingFang SC","Microsoft YaHei",sans-serif;color:#f7e8cd;background:#1f1914;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:0;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #f9d49a;outline-offset:6px}button:disabled{cursor:wait}button,a{touch-action:manipulation}#stage{position:relative;width:100%;height:100svh;min-height:280px;isolation:isolate;overflow:hidden;background:#1f1914}.picture{position:absolute;inset:0;overflow:hidden}#cover-art{width:100%;height:100%;object-fit:contain;object-position:center;animation:room-breath 16s ease-in-out infinite alternate;transform-origin:65% 56%}.lamp-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 26% 24%,#edb35b12,transparent 43%);animation:lamplight 5s ease-in-out infinite alternate}#film{position:absolute;inset:0;display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;background:#1f1914;opacity:0;transition:opacity .75s}#film.visible{opacity:1}.scene-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#20140e80,transparent 57%),linear-gradient(0deg,#1b13083d,transparent 35%);transition:opacity .8s}#cover{position:absolute;left:max(7%,calc((100vw - 177.7778svh)/2 + 6svh));top:50%;transform:translateY(-43%);max-width:43%;transition:opacity .7s,transform .9s}h1,h2,.primary,.chapter-place,#subtitle,#ending>p:not(.date){font-family:"STKaiti","Kaiti SC","KaiTi",serif;font-weight:400}h1{font-size:clamp(36px,5.4vw,82px);line-height:1.42;letter-spacing:.065em;margin:20px 0 34px;text-shadow:0 3px 26px #2b160963}.date{font-family:Georgia,serif;font-size:11px;letter-spacing:.34em;opacity:.65;margin:0}.primary{min-height:50px;padding:13px 26px;border:1px solid #f4d3a080;border-radius:50px;background:#d3aa6724;backdrop-filter:blur(10px);font-size:clamp(18px,1.7vw,26px);letter-spacing:.04em;display:inline-flex;align-items:center;justify-content:center;gap:14px;transition:background .25s,transform .25s}.primary:hover{background:#e4b87840;transform:translateY(-2px)}.triangle{width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:11px solid #fae8c8}.hint{font-size:clamp(10px,.9vw,13px);letter-spacing:.1em;opacity:.68;margin:15px 0 0 8px}#stage:not([data-state=cover]) #cover{opacity:0;transform:translateY(-38%);pointer-events:none}#stage:not([data-state=cover])>.scene-shade{opacity:0}#story-header{z-index:6;position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:max(20px,env(safe-area-inset-top)) max(28px,env(safe-area-inset-right));font-size:11px;letter-spacing:.1em;opacity:0;transition:opacity .3s;background:linear-gradient(#170d0780,transparent)}#story-header button{padding:10px;background:transparent;text-shadow:0 1px 10px #21140a}#chapter-status{opacity:.7;font-size:11px}#chapter-toggle span{margin-left:9px;font-size:14px}#controls{z-index:6;position:absolute;bottom:0;left:0;right:0;display:flex;gap:16px;align-items:center;padding:24px max(34px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom));background:linear-gradient(transparent,#170d07ad);font-size:10px;opacity:0;transition:opacity .3s}#controls button{background:transparent;width:32px;height:32px;font-size:20px;flex-shrink:0}#clock,#length{font-variant-numeric:tabular-nums;opacity:.7;font-size:10px}#timeline{appearance:none;-webkit-appearance:none;flex:1;min-width:0;height:18px;background:transparent;cursor:pointer}#timeline::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,#edc891 var(--progress,0%),#f0dfbd35 var(--progress,0%));border-radius:3px}#timeline::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:9px;height:9px;margin-top:-3.5px;background:#f4d6a5;border-radius:50%;box-shadow:0 0 12px #edc89166}#timeline::-moz-range-track{height:2px;background:#f0dfbd35}#timeline::-moz-range-thumb{background:#f4d6a5;width:9px;height:9px;border:none;border-radius:50%}#stage[data-state=paused] #controls,#stage[data-state=paused] #story-header,#stage[data-state=ending] #story-header,#stage.controls-on:not([data-state=cover]) #controls,#stage.controls-on:not([data-state=cover]) #story-header,#stage:focus-within:not([data-state=cover]) #controls,#stage:focus-within:not([data-state=cover]) #story-header{opacity:1}#chapter-menu{position:absolute;right:35px;top:74px;width:270px;padding:22px;background:#251b14ed;backdrop-filter:blur(18px);border:1px solid #dfb98230;box-shadow:0 20px 60px #130b0755;z-index:7}#chapter-menu>p{font-family:"STKaiti",serif;font-size:20px;margin:0 0 20px}#chapter-menu button{display:flex;align-items:center;gap:18px;width:100%;padding:16px 0;background:transparent;text-align:left;border-top:1px solid #f0d4a51a;font-size:14px}#chapter-menu span{font-family:Georgia,serif;font-size:12px;opacity:.55;width:18px}#chapter-menu small{margin-left:auto;font-size:10px;opacity:.4}#chapter-menu button:hover{color:#eec282}#chapter-caption{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;opacity:0;text-shadow:0 1px 3px #132d36cc,0 3px 24px #132d3699;transition:opacity .8s}#chapter-caption.show{opacity:1}.chapter-date{font:11px Georgia,serif;letter-spacing:.3em;opacity:.8;margin:0}#chapter-caption h2{font-size:clamp(54px,7vw,100px);letter-spacing:.3em;margin:15px -.3em 10px 0}.chapter-place{font-size:15px;letter-spacing:.2em;opacity:.8;margin:0}#subtitle{position:absolute;left:12%;right:12%;bottom:14%;text-align:center;font-size:clamp(20px,2.25vw,33px);letter-spacing:.08em;line-height:1.7;opacity:0;transform:translateY(6px);transition:opacity .55s,transform .55s;text-shadow:0 2px 18px #0c0812,0 0 38px #0c0812}#subtitle.show{opacity:1;transform:none}#turn-page{position:absolute;inset:0;background:#f0dab6;opacity:0;pointer-events:none}#turn-page.turning{animation:page-turn 1.1s ease both}#ending{z-index:4;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;background:#1e142177;backdrop-filter:blur(3px);animation:ending-in 1.4s ease both}#ending h2{font-size:clamp(37px,5vw,65px);letter-spacing:.08em;margin:22px 0 14px}#ending>p:not(.date){font-size:clamp(17px,1.9vw,25px);opacity:.8;margin:0 0 35px}#ending .primary{font-size:18px;padding:12px 25px}#ending>div{display:flex;align-items:center;gap:30px}.text-button{background:none;border-bottom:1px solid #f3dbad55;padding:10px 0;font-size:12px;opacity:.8}#error{position:absolute;inset:auto 10% 16%;background:#241a13e8;padding:24px;text-align:center;line-height:2}#error button,#error a{color:#f9d6a7;margin-left:12px;background:none}.no-js{position:absolute;bottom:20%;left:10%}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}[hidden]{display:none!important}#stage[data-state=paused] *{animation-play-state:paused}#stage[data-state=cover] #story-header,#stage[data-state=cover] #controls{pointer-events:none}@keyframes room-breath{from{transform:scale(1)}to{transform:scale(1.025)}}@keyframes lamplight{from{opacity:.6}to{opacity:1}}@keyframes page-turn{0%,100%{opacity:0}42%,55%{opacity:1}}@keyframes ending-in{from{opacity:0}to{opacity:1}}
@media(max-height:500px) and (orientation:landscape){#cover{transform:translateY(-42%)}h1{font-size:clamp(34px,5vw,52px);margin:12px 0 20px;line-height:1.3}.primary{min-height:44px;padding:10px 22px;font-size:18px}.date{font-size:9px}.hint{font-size:10px;margin-top:12px}#story-header{padding:8px 20px}#controls{padding:20px 24px 7px}#subtitle{bottom:18%;font-size:24px}#ending h2{font-size:38px;margin:12px 0}#ending>p:not(.date){font-size:19px;margin-bottom:21px}#ending .primary{font-size:16px;min-height:40px}}
@media(orientation:portrait){#cover-art{object-fit:contain;animation:none}.scene-shade{background:linear-gradient(0deg,#1f1914 10%,transparent 70%)}#cover{left:8%;right:8%;top:auto;bottom:max(7%,env(safe-area-inset-bottom));transform:none;max-width:none}h1{font-size:clamp(35px,8.9vw,55px);margin:16px 0 24px}.date{font-size:10px}.primary{font-size:18px;padding:12px 21px}.hint{font-size:10px}#stage:not([data-state=cover]) #cover{transform:translateY(10px)}#story-header{padding:14px 10px;font-size:10px}#chapter-status{font-size:10px}#home span{display:none}#controls{gap:8px;padding:22px 12px max(14px,env(safe-area-inset-bottom))}#chapter-caption h2{font-size:60px}#subtitle{left:8%;right:8%;bottom:22%;font-size:22px}#ending h2{font-size:36px}#ending>div{flex-direction:column;gap:15px}#chapter-menu{right:18px;top:60px}#ending{padding:0 20px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* Full thirteen-chapter sequence: keep the chapter list reachable on phones. */
#chapter-menu{max-height:calc(100svh - 150px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}#chapter-menu button[aria-current=true]{color:#f5d498}#ending .dedication{font-family:"STKaiti","Kaiti SC","KaiTi",serif;font-size:clamp(14px,1.6vw,22px);line-height:1.9;max-width:740px;opacity:.8;margin:0 28px 30px}#ending .ending-copy{margin-bottom:18px}#ending{background:#2119139c}#ending h2{margin-top:16px}@media(max-height:500px) and (orientation:landscape){#ending h2{font-size:34px;margin:10px 0}#ending .ending-copy{font-size:17px;margin-bottom:10px}#ending .dedication{font-size:14px;line-height:1.7;margin-bottom:18px}#ending .date{font-size:9px}}@media(orientation:portrait){#ending .dedication{font-size:16px;line-height:1.9;margin-bottom:28px}#ending h2{font-size:32px}#ending .ending-copy{font-size:17px}}
@media(orientation:portrait){#ending .dedication br{display:none}#ending .dedication{text-wrap:balance}}
/* The candle becomes an inhabited memory space; the final circle opens into a path. */
.romance-ambience,.romance-portal{position:absolute;inset:0;pointer-events:none;width:100%;height:100%}.romance-ambience{z-index:2}.romance-portal{z-index:5}.memory-space{position:absolute;inset:0;z-index:3;pointer-events:none;perspective:1100px}.memory-card{position:absolute;pointer-events:auto;padding:5px 5px 21px;background:#edddbd;color:#624b34;border:1px solid #ffe9bfbb;border-radius:3px;box-shadow:0 8px 24px #080c1f66,0 0 17px #efcb8d24;transform-origin:center;will-change:transform,opacity;transition:box-shadow .3s,filter .3s;overflow:visible}.memory-card img{display:block;width:100%;height:100%;object-fit:cover;border-radius:1px;pointer-events:none}.memory-label{font-family:"STKaiti","Kaiti SC",serif;position:absolute;left:8px;right:8px;bottom:4px;text-align:center;font-size:clamp(9px,1vw,15px);white-space:nowrap}.memory-card small{position:absolute;right:7px;top:7px;font:9px Georgia;color:#ffedc5;text-shadow:0 1px 5px #221c12}.memory-card:hover,.memory-card:focus-visible{box-shadow:0 10px 36px #02061488,0 0 30px #ffdf9e7a;filter:brightness(1.12)}.memory-card.starred{background:transparent;border-color:transparent;box-shadow:none;padding:0}.memory-card.starred img,.memory-card.starred .memory-label,.memory-card.starred small{opacity:0;transition:opacity .5s}.memory-card.starred::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;background:#ffebbf;box-shadow:0 0 8px 3px #f5d39277,0 0 20px #f5d39255;transform:translate(-50%,-50%)}.memory-card.starred:hover img,.memory-card.starred:focus-visible img,.memory-card.starred:hover .memory-label{opacity:1}.memory-card.starred:hover{background:#edddbd;padding:4px 4px 18px;border-color:#ffe0a2aa}.memory-card.starred:hover::after{opacity:0}.memory-verse{z-index:4;position:absolute;left:10%;right:10%;bottom:7%;margin:0;text-align:center;pointer-events:none;font-family:"STKaiti","Kaiti SC","KaiTi",serif;font-size:clamp(17px,2.1vw,30px);line-height:1.8;letter-spacing:.08em;color:#f6dfb3;text-shadow:0 2px 16px #0a101c;opacity:0;transform:translateY(8px);transition:opacity 1s,transform 1.4s}.memory-verse.show{opacity:1;transform:none}.memory-verse.finale-verse{top:43%;bottom:auto;transform:translateY(8px);font-size:clamp(22px,3vw,43px);letter-spacing:.09em}.memory-verse.finale-verse.show{transform:none}#stage[data-romance=finale] #subtitle{opacity:0!important}#chapter-caption,#subtitle{z-index:4}#stage[data-state=transition] #chapter-caption,#stage[data-state=transition] #subtitle{opacity:0!important}#stage[data-romance=finale] #ending{background:transparent;backdrop-filter:none;pointer-events:none;animation:ending-in 2.8s ease both}#stage[data-romance=finale] #ending button{pointer-events:auto}#stage[data-romance=finale] #ending h2{color:#ffe3ad;text-shadow:0 0 26px #dfaf5b33}#stage[data-romance=finale] #ending .dedication{color:#d8dfdf;opacity:.88}#stage[data-state=transition] #controls,#stage[data-state=transition] #story-header{opacity:0}#stage[data-state=paused] #controls,#stage[data-state=paused] #story-header{opacity:1}#turn-page{display:none!important}@media(orientation:portrait){.memory-verse:not(.finale-verse){bottom:22%;font-size:18px}.memory-verse.finale-verse{top:42%;left:12%;right:12%;font-size:26px;line-height:1.9}.memory-label{font-size:9px}.memory-card{padding:3px 3px 16px}.memory-label{bottom:3px}#stage[data-romance=finale] #ending{padding:0 28px}#stage[data-romance=finale] #ending .dedication{font-size:15px;line-height:2}}
#stage[data-romance=finale] #ending>.date{display:none}.memory-card[data-memory="13"].starred small{opacity:.75;top:calc(50% + 12px);left:0;right:0;text-align:center;font-size:11px;letter-spacing:.1em}
.memory-card.starred{min-width:60px;min-height:60px}
/* Birthday nickname: keep it together and preserve the original two-line title. */
#cover h1{white-space:nowrap;font-size:clamp(32px,4.9vw,76px)}
#sound-toggle{font-family:Georgia,serif;font-size:23px!important;letter-spacing:-3px}
.music-credit{position:absolute;z-index:6;left:28px;bottom:17px;font-size:10px;letter-spacing:.04em;color:#ead7b5;opacity:.5;text-decoration:none}
.music-credit:hover,.music-credit:focus-visible{opacity:1;text-decoration:underline}
#stage:not([data-state=cover])>.music-credit{display:none}
@media(max-height:500px) and (orientation:landscape){#cover h1{font-size:clamp(30px,4.9vw,45px)}.music-credit{font-size:8px;bottom:8px;left:24px}#controls{gap:9px}#stage[data-romance=finale] #ending h2{font-size:32px}}
@media(orientation:portrait){#cover h1{font-size:clamp(30px,8vw,48px)}.music-credit{left:8%;bottom:max(14px,env(safe-area-inset-bottom));font-size:9px}#stage[data-romance=finale] #ending h2{font-size:28px}}
/* A single-scene prose-poem study: text takes the empty space inside each shot. */
.scene-poetry{position:absolute;z-index:4;overflow:hidden;contain:paint;pointer-events:none;color:#fff1d8}
.poetry-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(31,18,29,.34),rgba(31,18,29,.12) 50%,transparent 76%)}
.scene-poetry[data-layout=together] .poetry-shade{background:linear-gradient(90deg,transparent 55%,rgba(23,15,23,.13) 70%,rgba(23,15,23,.44))}
.scene-poetry[data-layout=kept] .poetry-shade{background:radial-gradient(ellipse at 24% 28%,rgba(9,15,36,.37),transparent 64%)}
.poetry-stanza{position:absolute;margin:0;font-family:"STKaiti","Kaiti SC","KaiTi",serif;font-weight:400;line-height:1.35;text-align:left;letter-spacing:.065em;text-shadow:0 2px 18px #0e0c1e80,0 1px 3px #1c142766}
.poetry-line{display:block;white-space:nowrap;margin-top:var(--line-gap,12px)}
.poetry-line:first-child{margin-top:0}
.poetry-soft{font-size:var(--soft-size);color:#fae1c3;letter-spacing:.1em}
.poetry-body{font-size:var(--body-size);color:#fff0d8}
.poetry-heart{font-size:var(--heart-size);color:#fff0d3}
.poetry-hero{font-size:var(--hero-size);color:#ffe4b3;line-height:1.15;letter-spacing:.12em;margin-top:calc(var(--line-gap,12px)*.8)}
.poetry-letter{display:inline-block;will-change:opacity,transform,filter}
#stage[data-poetry] #subtitle{visibility:hidden}

@media(prefers-reduced-motion:reduce){.poetry-letter{filter:none!important;transform:none!important}}
/* Longer story names keep their rhythm without escaping the frame or card. */
#chapter-caption h2{font-size:var(--chapter-title-size,60px);letter-spacing:.12em;margin:15px -.12em 10px 0;max-width:90%;text-align:center;line-height:1.35;text-wrap:balance}
#chapter-status{min-width:0;text-align:center}
.chapter-menu-name{font-weight:400;flex:1;min-width:0;line-height:1.6}
#chapter-menu small{flex-shrink:0}
.memory-label{font-size:clamp(6px,.85vw,12px);line-height:1.15;white-space:normal;overflow-wrap:anywhere;text-wrap:balance;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;left:4px;right:4px}

/* Local scenery supplies the contrast; type stays off faces and the hands. */
.scene-poetry .poetry-shade{inset:auto;border-radius:50%;background:radial-gradient(ellipse,rgba(14,18,31,.32),rgba(14,18,31,.1) 50%,transparent 74%)}
.scene-poetry[data-ink=dark] .poetry-shade{background:radial-gradient(ellipse,rgba(227,238,236,.25),rgba(227,238,236,.06) 48%,transparent 74%)}
.scene-poetry[data-ink=dark] .poetry-stanza{color:#1b343d;text-shadow:0 1px 10px #edf3e970}
.scene-poetry[data-ink=dark] .poetry-soft{color:#30494e}
.scene-poetry[data-ink=dark] .poetry-body,.scene-poetry[data-ink=dark] .poetry-heart,.scene-poetry[data-ink=dark] .poetry-hero{color:#203b44}
.poetry-line{line-height:1.35}.poetry-hero{line-height:1.15;margin-top:var(--line-gap,12px)}
