:root {
  --ink:#263f37; --soft:#5a6f62; --paper:#e9e8dd; --light:#f6f4eb;
  --line:#c6cdbf; --moss:#698477; --seal:#8b5947;
  --sans:"PingFang SC","Microsoft YaHei",sans-serif;
  --serif:"Songti SC","STSong",serif;
  color-scheme:light; font-family:var(--serif); color:var(--ink); background:var(--ink);
}
* { box-sizing:border-box; }
body { margin:0; }
button,input,select { font:inherit; color:inherit; }
button { cursor:pointer; border:1px solid var(--line); background:transparent; border-radius:3px; padding:10px 14px; min-height:44px; }
button:disabled { cursor:default; opacity:.55; }
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible,select:focus-visible { outline:2px solid var(--seal); outline-offset:3px; }
input,select { font-size:16px; min-height:44px; width:100%; padding:9px; border:1px solid var(--line); border-radius:3px; background:var(--light); }
h1,h2,h3,p { margin:0; }
h2 { font-size:25px; font-weight:500; line-height:1.35; }
h3 { font-size:19px; font-weight:500; line-height:1.5; }
.loading { color:var(--paper); text-align:center; padding:30vh 0; }
.primary { background:var(--ink); color:var(--light); border-color:var(--ink); }
.small { font:12px/1.6 var(--sans); color:var(--soft); }
.error { color:#8b453b; font:13px/1.5 var(--sans); }
.quiet { border-color:transparent; }
.pane-note { font:13px/1.6 var(--sans); color:var(--soft); margin-top:8px; }
.prose { font-size:18px; line-height:1.95; max-width:35em; white-space:pre-line; }
.prose + .prose { margin-top:16px; }
.item-icon { width:34px; height:34px; object-fit:contain; vertical-align:middle; }
.opening { width:min(100%,960px); min-height:100svh; background:var(--paper); margin:auto; padding:clamp(24px,6vw,72px); display:grid; grid-template-columns:1.25fr 1fr; gap:52px; align-items:center; }
.opening-copy { position:relative; }
.seal { display:inline-block; border:1px solid var(--seal); color:var(--seal); padding:4px 7px; font-size:20px; line-height:1.2; }
.opening h1 { font-size:56px; letter-spacing:7px; font-weight:500; margin:18px 0; }
.lede { font-size:23px; }
.opening-prose { font-size:16px; line-height:1.9; color:var(--soft); margin-top:20px; }
.opening-farm { display:block; width:100%; margin-top:28px; }
#new-life { display:grid; gap:13px; }
#new-life label { font:13px/1.5 var(--sans); display:grid; gap:7px; }
#new-life details label { margin-top:12px; }
#new-life summary { font:13px/1.8 var(--sans); padding:8px 0; cursor:pointer; }
.start-links { display:flex; align-items:center; justify-content:space-between; font:12px var(--sans); }
.start-links a { color:var(--soft); text-decoration:none; padding:12px; }
.start-links button { border:0; padding-left:0; }

/* The shell stays still. This one middle region owns reading and list scrolling. */
.book { height:100svh; height:100dvh; width:min(100%,920px); margin:auto; display:flex; flex-direction:column; background:var(--paper); overflow:hidden; box-shadow:0 0 80px #10231c22; }
.book-header { display:flex; align-items:center; justify-content:space-between; padding:12px 28px; gap:12px; flex-shrink:0; border-bottom:1px solid var(--line); }
.wordmark { display:flex; align-items:center; gap:9px; font-size:18px; border:0; padding:0; }
.mini-seal { display:grid; place-items:center; width:29px; height:31px; font-size:17px; color:var(--paper); background:var(--seal); }
.date { text-align:center; }
.date b { font-weight:400; font-size:16px; }
.date small { display:block; font:11px/1.7 var(--sans); color:var(--soft); }
.time-control { border:0; padding:0; font:12px var(--sans); min-width:58px; }
.year-track { height:3px; background:#d9ded2; flex-shrink:0; }
.year-track span { height:100%; display:block; background:var(--moss); transition:width .25s linear; }
.context-bar { padding:7px 28px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); font:12px var(--sans); min-height:38px; flex-shrink:0; }
.context-bar button { min-height:28px; padding:3px 0; border:0; color:var(--seal); }
.book-page { flex:1 1 0; min-height:0; padding:26px clamp(22px,7vw,70px) 28px; overflow-y:auto; overflow-x:hidden; overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch; }
.scene-panel,.info-panel { width:100%; max-width:680px; margin:0 auto; }
.year-scroll { list-style:none; margin:0 0 18px; padding:0 0 0 5px; border-left:1px solid #a9b5a5; }
.year-entry { display:grid; grid-template-columns:38px minmax(0,1fr); gap:12px; align-items:start; position:relative; padding:0 0 15px 10px; color:var(--soft); }
.year-entry:before { content:''; position:absolute; left:-4px; top:17px; width:7px; height:7px; border:1px solid var(--moss); border-radius:50%; background:var(--paper); }
.age-seal { display:grid; place-items:center; width:32px; min-height:32px; background:#9a6957; color:var(--light); border-radius:3px; font-size:14px; }
.year-copy { padding-top:1px; }
.year-copy strong { display:block; font-size:14px; font-weight:500; color:var(--ink); }
.year-copy p { font-size:14px; line-height:1.55; margin-top:2px; }
.year-copy .year-turn { color:var(--seal); border-left:2px solid var(--seal); padding-left:8px; margin-top:7px; }
.event-letter { background:#f8f5e9; border:1px solid #c9bfa8; box-shadow:0 5px 18px #453a2520; padding:16px; margin:10px -8px 22px; }
.event-letter .scene-heading { margin-bottom:10px; }
.event-art { width:100%; height:clamp(140px,25vh,230px); display:block; object-fit:cover; object-position:center; margin:0 0 15px; border:1px solid #d8d0b8; }
.event-letter .scene-text h2 { font-size:24px; margin-bottom:10px; }
.event-letter .scene-text .prose { font-size:16px; line-height:1.7; }
.event-letter .scene-text .prose + .prose { margin-top:8px; }
.event-letter .decision-zone { position:sticky; bottom:-28px; margin-top:14px; padding:12px 0 5px; background:linear-gradient(#f8f5e9ee,#f8f5e9 12px); box-shadow:0 -8px 14px #f8f5e9d9; }
.event-letter .choices { gap:6px; }
.event-letter .choice { min-height:47px; padding:7px 10px; }
.event-letter .choice span { font-size:15px; }
.event-letter .choice small { font-size:11px; margin-top:1px; }
.event-letter .choice.unavailable { opacity:.8; }
.event-letter .choice .blocked-reason { color:#884e40; }
.latest-year { border-top:1px solid var(--line); padding:8px 0 0; color:var(--soft); }
.latest-year span { font:12px var(--sans); display:block; }
.latest-year strong { font-size:17px; font-weight:500; color:var(--ink); }
.latest-year p { font:12px/1.5 var(--sans); }
.scene-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; font:12px var(--sans); color:var(--soft); margin-bottom:14px; }
.scene-heading button { font:12px var(--sans); border:0; min-height:36px; padding:4px 0; }
.scene-text h2 { margin-bottom:20px; font-size:29px; }
.scene-text .prose { font-size:19px; line-height:1.95; }
.decision-zone { margin-top:24px; }
.choices { display:grid; gap:10px; }
.choice { text-align:left; width:100%; background:var(--light); padding:12px 16px; border-left:3px solid var(--moss); }
.choice span { display:block; font-size:17px; }
.choice small { display:block; font:12px/1.6 var(--sans); color:var(--soft); margin-top:4px; }
.choice:hover:enabled { background:#e0e7d9; border-color:var(--moss); }
.choice.unavailable { background:transparent; border-left-color:var(--line); opacity:.65; }
.quiet-actions { display:flex; gap:10px; margin:12px 0; flex-wrap:wrap; }
.quiet-actions button { font-size:15px; }
.book-footer { flex-shrink:0; padding-bottom:env(safe-area-inset-bottom); background:var(--ink); color:var(--paper); }
.playback { display:flex; align-items:center; justify-content:space-between; padding:3px 24px; border-bottom:1px solid #e9e8dd22; font:11px/1.5 var(--sans); }
.playback button { border:0; min-height:28px; padding:2px 8px; font:12px var(--sans); }
.dock { display:flex; }
.dock button { flex:1; min-height:54px; border:0; border-radius:0; font:14px var(--serif); opacity:.7; }
.dock button[aria-pressed=true] { background:#ffffff0b; opacity:1; box-shadow:inset 0 2px #b5c4a9; }
.pending-bar { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 20px; background:#dce3d5; border-top:1px solid var(--moss); flex-shrink:0; font:12px var(--sans); }
.pending-bar button { border:0; color:var(--seal); font:13px var(--sans); padding:5px 0; min-height:36px; }
.tabs { display:flex; gap:3px; position:sticky; top:0; z-index:2; background:var(--paper); border-bottom:1px solid var(--line); margin:10px 0 16px; }
.tabs button { flex:1; border:0; border-radius:0; padding:8px 3px; font-size:14px; }
.tabs button[aria-pressed=true] { box-shadow:inset 0 -2px var(--ink); background:#263f3708; }
.attribute { margin:18px 0; }
.attribute-label { display:flex; align-items:baseline; justify-content:space-between; font-size:15px; }
.attribute-label b { font-weight:500; font-variant-numeric:tabular-nums; }
.attribute-label small { font:11px var(--sans); color:var(--soft); }
.meter { height:7px; position:relative; margin:7px 0; background:#d8dfd1; border-radius:1px; }
.meter span { position:absolute; inset:0 auto 0 0; border-radius:1px; }
.meter .ghost { background:#b4c4b733; border:1px dashed #769584; }
.meter .actual { background:var(--moss); z-index:1; }
.meter i { position:absolute; top:-4px; bottom:-4px; border-left:1px dashed var(--seal); z-index:2; }
.attribute-hint { font:11px/1.4 var(--sans); color:var(--soft); }
.quality-list { display:grid; gap:13px; margin:16px 0; }
.quality-list .attribute { margin:0; }
.quality-list .meter { margin:6px 0 0; }
.stage-title { font-size:25px; margin:17px 0; }
.money-line { display:flex; align-items:center; gap:10px; margin:12px 0; font:15px var(--sans); }
.money-line span { margin-left:auto; font-size:12px; }
.bag-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:20px 0; }
.bag-grid>div { display:flex; flex-direction:column; align-items:center; gap:5px; font:12px var(--sans); }
.bag-grid .item-icon { width:58px; height:58px; }
.compact-actions { display:flex; gap:6px; flex-wrap:wrap; margin-top:20px; }
.compact-actions button { font:12px var(--sans); padding:8px; }
.plan-list { display:grid; gap:12px; margin-top:18px; }
.plan-list button { text-align:left; display:flex; align-items:center; gap:12px; background:var(--light); padding:15px; }
.plan-list strong { font-weight:500; font-size:17px; display:block; }
.plan-list small { font:12px/1.6 var(--sans); color:var(--soft); display:block; margin-top:5px; }
.plan-list .plan { display:block; }
.plan.selected { border-color:var(--moss); border-left-width:3px; }
.selected-mark { display:block; font:11px var(--sans); color:var(--seal); margin-top:6px; }
.friend-head { display:flex; align-items:center; gap:16px; margin:0 0 12px; }
.friend-seal { display:grid; place-items:center; width:46px; height:52px; border:1px solid var(--moss); font-size:23px; color:var(--soft); flex-shrink:0; }
.family-summary,.friend-section,.person-row { padding:20px 0; border-bottom:1px solid var(--line); }
.person-heading,.friend-head { display:flex; align-items:center; gap:14px; }
.person-heading img,.friend-portrait { width:58px; height:58px; border-radius:50%; object-fit:cover; object-position:75% 30%; border:2px solid #d1c5a9; flex-shrink:0; }
.friend-portrait { object-position:74% 30%; }
.family-summary p,.person-row>p { margin-top:8px; line-height:1.8; }
.person-row:last-child { border-bottom:0; }
.info-panel>.prose { font-size:17px; margin:14px 0; }
.timeline { list-style:none; padding:0; margin:14px 0 0; }
.timeline li { margin-left:15px; border-left:1px solid var(--moss); padding-left:18px; position:relative; }
.timeline li:before { content:''; position:absolute; left:-4px; top:19px; width:7px; height:7px; background:var(--moss); border-radius:50%; }
.timeline button { display:flex; text-align:left; gap:12px; border:0; width:100%; padding:12px 0; align-items:baseline; }
.timeline time { white-space:nowrap; font:12px var(--sans); color:var(--soft); }
.timeline strong { font-size:16px; font-weight:500; }
.timeline small { display:block; font:12px/1.65 var(--sans); color:var(--soft); margin-top:6px; }
.cause { border-left:2px solid var(--moss); margin-top:24px; padding-left:15px; font-size:16px; line-height:1.8; }
.cause small { font:12px var(--sans); color:var(--soft); }
.trace-filter { display:flex; justify-content:flex-end; }
.trace-filter button { border:0; padding:4px 0; min-height:36px; font:12px var(--sans); }
.year-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; font:12px var(--sans); color:var(--soft); margin-bottom:14px; }
.year-heading button { border:0; min-height:36px; padding:4px 0; font:12px var(--sans); }
.year-consequence { margin-top:20px; padding:10px 0; border-top:1px solid var(--line); font:13px/1.7 var(--sans); color:var(--soft); }
#notice { position:fixed; left:50%; bottom:calc(115px + env(safe-area-inset-bottom)); transform:translateX(-50%); width:max-content; max-width:85vw; padding:12px 18px; background:var(--ink); color:var(--light); box-shadow:0 6px 24px #0002; border-radius:4px; font:14px/1.6 var(--sans); opacity:0; pointer-events:none; transition:opacity .15s; z-index:9; }
#notice.visible { opacity:1; }
@media(max-width:600px) {
  .opening { display:flex; flex-direction:column; gap:22px; padding:28px 28px 18px; }
  .opening-copy { width:100%; text-align:center; }
  .opening h1 { font-size:40px; margin:9px 0; }
  .seal { display:none; }
  .lede { font-size:19px; }
  .opening-prose { font-size:14px; margin-top:12px; }
  .opening-farm { height:96px; object-fit:cover; margin-top:8px; }
  .opening form { width:100%; max-width:340px; }
  .book-header { padding:8px 15px; }
  .book-page { padding:18px 20px 24px; }
  .context-bar { padding:5px 15px; }
  .scene-text h2 { font-size:25px; margin-bottom:16px; }
  .scene-text .prose { font-size:17px; line-height:1.9; }
  .decision-zone { margin-top:22px; }
  .choice { padding:11px 12px; }
  .choice span { font-size:16px; }
  .choice small { font-size:12px; }
  .dock button { min-height:50px; }
  .tabs { margin:8px 0 14px; }
  .plan-list { gap:10px; margin-top:12px; }
  .plan-list button { padding:12px; }
  .quiet-actions button { font-size:14px; }
  .book-page { padding:12px 16px 20px; }
  .book-header { padding:7px 12px; }
  .wordmark span:last-child { display:none; }
  .date b { font-size:15px; }
  .date small { font-size:10px; }
  .event-letter { margin-left:-6px; margin-right:-6px; padding:12px; }
  .event-art { height:150px; }
}
@media(max-height:680px) {
  .book-header { padding-top:5px; padding-bottom:5px; }
  .book-page { padding-top:12px; }
  .scene-text h2,.info-panel h2 { font-size:23px; }
  .self-panel .tabs button { min-height:36px; }
  .quality-list { gap:10px; margin:12px 0; }
  .quality-list .meter { height:6px; }
}
@media(orientation:landscape) and (max-height:560px) {
  .book { max-width:100%; }
  .book-header { padding:3px 18px; }
  .date small { display:none; }
  .context-bar { min-height:28px; }
  .book-page { padding:12px 28px 24px; }
  .playback { display:none; }
  .dock button { min-height:44px; }
}
@media(prefers-reduced-motion:reduce) { * { transition:none!important; scroll-behavior:auto!important; } }