:root{color-scheme:dark;--bg:#101916;--panel:#18221d;--ink:#f5ecda;--muted:#bcc6b9;--mint:#bfd8c5;--line:#4b584e;--scene-url:url(assets/room.webp)}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);background:radial-gradient(ellipse at 38% -20%,#294036,transparent 55%),var(--bg);font:16px/1.65 "Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible{outline:2px solid #ebd89a;outline-offset:4px}
.wrap{width:min(1120px,calc(100% - 64px));margin-inline:auto}
.top{height:77px;display:flex;align-items:center;justify-content:space-between}
.brand{font-family:"Noto Serif SC","Songti SC",STSong,serif;letter-spacing:.19em;font-size:21px;font-weight:700}
.brand span{color:var(--mint)}
.archive,.footer{font-size:13px;letter-spacing:.09em;color:var(--muted)}
.archive span{margin-left:.35em}
.stage{position:relative;isolation:isolate;min-height:510px;display:flex;align-items:center;border:1px solid var(--line);overflow:hidden}
.scene{position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,#0c1513 1%,#0c1513e6 25%,#0c151363 68%,#0c15132a 100%),linear-gradient(0deg,#0c1513f2,transparent 31%),var(--scene-url) 70% 50%/cover no-repeat;transition:filter .25s}
.stage[data-chapter="1"] .scene{--scene-url:url(assets/cloth.webp);background-position:72% 70%}
.stage[data-chapter="2"] .scene{--scene-url:url(assets/flower.webp);background-position:75% 66%;filter:saturate(.64) brightness(.95)}
.stage[data-chapter="3"] .scene{--scene-url:url(assets/dock.webp)}
.stage[data-chapter="4"] .scene{--scene-url:url(assets/bowl.webp);background-position:70% 86%}
.stage[data-chapter="5"] .scene{--scene-url:url(assets/cinema.webp);background-position:73% 52%}
.stage[data-chapter="6"] .scene{--scene-url:url(assets/mill.webp);background-position:68% 54%}
.stage[data-chapter="7"] .scene{--scene-url:url(assets/market.webp);background-position:72% 55%}
.stage[data-chapter="8"] .scene{--scene-url:url(assets/banquet.webp);background-position:70% 55%}
.stage[data-chapter="9"] .scene{--scene-url:url(assets/kitchen.webp);background-position:70% 60%}
.stage[data-chapter="10"] .scene{--scene-url:url(assets/garage.webp)}
.stage[data-chapter="11"] .scene,.stage[data-chapter="12"] .scene{--scene-url:url(assets/banquet.webp)}
.stage[data-chapter="13"] .scene,.stage[data-chapter="17"] .scene{--scene-url:url(assets/garage.webp);filter:grayscale(.55)}
.stage[data-chapter="14"] .scene,.stage[data-chapter="18"] .scene{--scene-url:url(assets/mill.webp)}
.stage[data-chapter="15"] .scene,.stage[data-chapter="16"] .scene{--scene-url:url(assets/apartment.webp);background-position:70% 63%}
.stage[data-chapter="16"] .scene{filter:saturate(.55) brightness(.82)}
.stage[data-chapter="19"] .scene,.stage[data-chapter="20"] .scene{--scene-url:url(assets/chapel.webp);background-position:70% 57%}
.stage[data-chapter="20"] .scene{filter:sepia(.35) saturate(1.35)}
.stage-copy{padding:50px clamp(24px,6vw,80px) 78px;max-width:690px}
.kicker{margin:0 0 15px;color:var(--mint);letter-spacing:.2em;font-size:12px}
h1,h2,h3{font-family:"Noto Serif SC","Songti SC",STSong,serif;line-height:1.18;margin:0;font-weight:700}
h1{font-size:clamp(48px,9vw,100px);letter-spacing:.09em}
h2{font-size:clamp(27px,4vw,46px)}
h3{font-size:24px}
#chapter-description{margin:23px 0 30px;color:#dddcd0;max-width:34ch}
.primary{background:#cee0cf;border:1px solid #daeadd;padding:10px 19px;color:#18271e;font-weight:700}
.primary:hover{background:#edf1df}
.stage-footer{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;padding:15px 22px;color:#c8cdbf;font-size:12px;letter-spacing:.14em}
.stage-footer{align-items:center;justify-content:flex-start;gap:12px}
.stage-footer #chapter-motif{margin-inline-start:auto}
.back{font-size:inherit;color:inherit;background:transparent;border:1px solid var(--line);padding:4px 7px}
.back:hover{border-color:var(--mint)}
.roles button{background:#14201a;border:1px solid var(--line)}
.roles button[aria-pressed="true"]{background:#2b3c31;border-color:#a4bba7}
.roles button:hover{border-color:#a4bba7}
.reading{margin-top:44px;scroll-margin-top:20px}
.reading-head,.reading-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.reading-head>.kicker{flex-basis:100%;margin-bottom:-9px}
.roles{display:flex;gap:7px}
.roles button{padding:6px 12px}
.cards{display:grid;gap:10px;margin-top:19px}
.cards[data-layout="both"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{display:grid;grid-template-columns:clamp(92px,20vw,190px) 1fr;background:var(--panel);border:1px solid var(--line);min-height:218px;overflow:hidden}
.card img{width:100%;height:100%;min-height:210px;object-fit:cover;object-position:center 30%;align-self:stretch}
.card-copy{padding:22px}
.card .body{white-space:pre-line;margin:.9em 0;color:#e4e8db}
.reading-foot p{color:var(--muted);font-size:13px}
.reading-foot{margin:17px 0 0}
.footer{margin-block:30px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.footer button{font:inherit;color:inherit;background:none;border:0;padding:6px 0;text-decoration:underline;text-underline-offset:4px}
[hidden]{display:none!important}
@media(max-width:760px){.wrap{width:calc(100% - 28px)}.top{height:62px}.stage{min-height:440px}.scene{background-position:60% center}.cards[data-layout="both"]{grid-template-columns:1fr}.stage-footer{padding-inline:12px;gap:8px;letter-spacing:.04em}.card-copy{padding:16px}}
@media(max-width:410px){.card{grid-template-columns:74px 1fr}.card img{object-position:52% top}.footer{font-size:11px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.stage-copy{width:68%;min-width:0}
.stage h1{font-size:clamp(40px,7vw,86px);letter-spacing:.065em}
.object{position:absolute;z-index:1;right:clamp(18px,6vw,74px);bottom:61px;width:clamp(128px,24vw,260px);aspect-ratio:1;padding:0;border:1px solid #c0cdb469;border-radius:50%;background:#121a13;box-shadow:0 0 27px #c0cdb433;transition:border-color .2s,box-shadow .2s,transform .2s}
.object img{display:block;width:100%;height:100%;object-fit:contain;clip-path:circle(49.5%)}
.object:hover,.object:focus-visible{border-color:#f1e1a6;box-shadow:0 0 34px #e8dba770;transform:translateY(-3px)}
.object[aria-expanded="true"]{border-color:#c6ddc6}
.object-hint{position:absolute;right:clamp(18px,6vw,74px);bottom:36px;width:clamp(128px,24vw,260px);margin:0;text-align:center;font-size:12px;color:var(--muted);letter-spacing:.12em}
.memory{margin:0 0 30px;padding:17px 22px;border-inline-start:2px solid #b2b48a;background:#202a20}
.memory blockquote{margin:0;font-size:clamp(20px,3vw,32px);font-family:"Noto Serif SC","Songti SC",serif;scroll-margin-top:28px}
.memory figcaption{font-size:13px;color:var(--muted);margin-top:7px}
.interlude{margin-top:16px;padding:12px 16px;border:1px solid var(--line);color:var(--muted)}
.interlude summary{cursor:pointer}
.interlude p{margin:8px 0 0}
@media(max-width:640px){
  .stage{align-items:flex-start;min-height:490px}
  .stage-copy{width:100%;padding:34px 19px 0}
  .stage h1{font-size:clamp(34px,9vw,52px)}
  #chapter-description{margin:13px 0 0}
  .object{right:50%;transform:translateX(50%);bottom:63px;width:clamp(135px,43vw,190px)}
  .object:hover,.object:focus-visible{transform:translate(50%,-3px)}
  .object-hint{right:0;width:100%;bottom:42px}
  .stage-footer{font-size:11px}
}

.stage.has-interaction{min-height:350px}
.scene-interaction{margin-top:12px;padding:20px 24px;background:#161f19;border:1px solid var(--line)}
.scene-interaction h2{font:inherit;font-size:16px;color:var(--ink);font-weight:600}
.interaction-options{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.interaction-choice{display:flex;flex:1 1 150px;max-width:340px;align-items:center;gap:12px;text-align:left;padding:9px 13px;border:1px solid var(--line);background:#212e25;color:var(--ink);min-height:48px}
.interaction-choice img{width:54px;height:54px;object-fit:cover;border-radius:50%;flex:none}
.interaction-choice:hover,.interaction-choice[aria-pressed="true"]{border-color:var(--mint);background:#354a3a}
.interaction-choice.inspected{cursor:default;border-color:#73896c;color:var(--muted);background:#19271d}
.interaction-clues{padding-inline-start:24px;color:var(--muted);margin:14px 0 0}
.interaction-clues:empty,.interaction-feedback:empty{display:none}
.interaction-clues li + li{margin-top:8px}
.interaction-clues strong{color:var(--mint);font-size:14px}
.interaction-clues p{margin:1px 0}
.interaction-feedback{margin:12px 0 0;color:#efdaa6}
@media(max-width:640px){
  .stage.has-interaction{min-height:295px}
  .scene-interaction{padding:15px}
  .interaction-choice{max-width:none;padding:8px 10px}
}

.entry,.bottles{padding:clamp(22px,5vw,52px);border:1px solid var(--line);background:linear-gradient(125deg,#25382c,#111a16 72%)}
.entry h1,.bottles h1{font-size:clamp(30px,5vw,58px);letter-spacing:.035em}
#entry-note,.bottle-intro{color:var(--muted)}
.entry-options{display:grid;grid-template-columns:repeat(2,minmax(0,260px));gap:clamp(9px,3vw,22px);margin-top:24px}
.entry-role{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:4/5;background:#18271e;border:1px solid var(--line);padding:0;text-align:left}
.entry-role:hover{border-color:var(--mint)}
.entry-role img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 24%}
.entry-role span{position:absolute;inset:auto 0 0;padding:28px 16px 12px;background:linear-gradient(transparent,#101916);font-size:clamp(18px,3vw,24px)}
.directory{--line:#4b584e}
.directory-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:18px;margin-bottom:22px}
.directory-head h1{font-size:clamp(35px,6vw,68px);letter-spacing:.055em}
.directory-actions{display:flex;gap:10px}
.directory-actions .back{padding:8px 12px}
.directory-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.directory-card{overflow:hidden;border:1px solid var(--line);background:#17201b}
.directory-card-cover{position:relative;display:grid;align-items:end;min-height:125px;background:#18271e;isolation:isolate}
.directory-card-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.directory-card-cover h2{font-weight:650;line-height:1.5;font-size:17px;padding:18px 14px 11px;background:linear-gradient(transparent,#101612ef)}
.directory-card button{display:block;width:100%;text-align:left;border:0;border-top:1px solid #70806c40;background:none;padding:8px 14px}
.directory-card button:hover,.directory-card button[aria-current]{background:#394739}
.directory-card[data-tone="finale"] .directory-card-cover img{object-position:50% 28%}
.stage[data-tone="noir"]{--mint:#a8c9e4;--line:#445e74}
.stage[data-tone="noir"] .scene{background:linear-gradient(90deg,#101523fa 5%,#1015237a 47%,#1015230a 100%),var(--scene-url) 64% 55%/cover}
.stage[data-tone="noir"] .object{border-color:#789cba;background:#111c24;box-shadow:0 0 30px #85aec33d}
.stage[data-tone="amber"]{--mint:#f0cf8c;--line:#8b704e}
.stage[data-tone="amber"] .scene{background:linear-gradient(90deg,#1e140eec,#331b0666 50%,#140b020e),var(--scene-url) 65% 62%/cover}
.stage[data-tone="amber"] .object{border-color:#b59a64;background:#221810;box-shadow:0 0 34px #d2a54b40}
.stage[data-tone="archive"]{--mint:#d5d0c2;--line:#676d69;align-items:end}
.stage[data-tone="archive"] .scene{background:linear-gradient(0deg,#101312fb,#1013124a 73%),var(--scene-url) center/cover;filter:grayscale(.6)}
.stage[data-tone="coast"]{--ink:#30241b;--muted:#614c3f;--mint:#744e3d;--line:#b49a7a;background:#e5d4b6}
.stage[data-tone="coast"] .scene{background:linear-gradient(90deg,#eadaba 12%,#eadabaf5 29%,#eadaba40 68%,#e0cba300),var(--scene-url) 75% 68%/cover}
.stage[data-tone="coast"] #chapter-description,.stage[data-tone="coast"] .stage-footer{color:#3f2b23}
.stage[data-tone="coast"] .object-hint{color:var(--muted)}
.stage[data-tone="finale"]{--mint:#ffd3c8;--line:#96645f;background:#231517}
.stage[data-chapter="18"] .scene{--scene-url:url(assets/c-montage.webp)}
.stage[data-chapter="19"] .scene{--scene-url:url(assets/c-chapel.webp)}
.stage[data-chapter="20"] .scene{--scene-url:url(assets/c-fire.webp)}
.stage[data-tone="finale"] .scene{background:linear-gradient(90deg,#211217 4%,#211217c9 31%,#21121712 62%),var(--scene-url) right 27%/cover;filter:none}
.stage[data-chapter="19"],.stage[data-chapter="20"]{min-height:490px}
.stage[data-tone="finale"] h1{font-size:clamp(34px,5vw,68px);text-shadow:0 2px 12px #211217b0}
.stage[data-tone="finale"] #chapter-description{color:#f4dfd4}
@media(max-width:780px){.directory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
  .directory-head{align-items:start}
  .directory-grid{gap:9px}
  .directory-card-cover{min-height:108px}
  .directory-card-cover h2{font-size:14px;padding-inline:10px}
  .directory-card button{font-size:13px;padding-inline:10px}
  .stage[data-tone="archive"]{align-items:start}
  .stage[data-chapter="19"],.stage[data-chapter="20"]{min-height:450px}
  .stage[data-tone="finale"] .scene{background:linear-gradient(180deg,#211217ed,#21121765 48%,#21121722),var(--scene-url) 65% center/cover}
  .stage-footer #chapter-motif{display:none}
}

.bottles{background:linear-gradient(115deg,#192c2b,#111a16 76%);--mint:#b9d7ce}
.bottle-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:26px}
.bottle-card{border:1px solid var(--line);padding:16px;background:#111b19}
.bottle-card textarea{display:block;width:100%;margin:8px 0 0;resize:vertical;padding:10px;border:1px solid var(--line);color:var(--ink);background:#182723;font:inherit}
.bottle-actions{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px}
.bottle-actions output,.bottles figcaption{color:var(--muted);font-size:13px}
.bottles figure{margin:14px 0 0;padding:12px 14px;background:#e7dbbf;color:#362c22}
.bottles blockquote{margin:0 0 10px;white-space:pre-wrap;overflow-wrap:anywhere}
.bottles figcaption{color:#645244}
.bottle-status{min-height:1.5em;color:var(--mint)}
.bottles button:disabled{opacity:.6;cursor:wait}
@media(max-width:640px){.bottle-grid{grid-template-columns:1fr}}

.letter-people{display:flex;gap:14px;margin-top:24px}
.letter-person{width:min(190px,45%);aspect-ratio:4/5;position:relative;border:1px solid #829689;background:#182622;padding:0;overflow:hidden}
.letter-person img{display:block;width:100%;height:100%;object-fit:cover}
.letter-person span{position:absolute;inset:auto 0 0;padding:22px 8px 9px;background:linear-gradient(transparent,#161411e8);font-size:20px}
.letter-person:hover,.letter-person[aria-pressed="true"]{border-color:#f1d4a2;box-shadow:0 0 0 1px #f1d4a2}
.bottle-card label{font-weight:600}