:root{
--paper:#f3eadc;--ink:#2a2f24;--mute:#4e5644;--line:#d4c8b2;--tomato:#a53d24;--olive:#5e6644;
--serif:"Iowan Old Style","Palatino Linotype",Palatino,"Songti TC","PMingLiU",serif;
--sans:"PingFang TC","Hiragino Sans CNS","Noto Sans TC","Microsoft JhengHei",sans-serif
}
*{box-sizing:border-box}
html{background:var(--paper);color:var(--ink)}
body{margin:0;font-family:var(--sans);font-size:1.0625rem;line-height:1.7;background:var(--paper)}
img{max-width:100%;height:auto;display:block}
a{color:var(--tomato)}
a:hover{color:var(--ink)}
.skip{position:absolute;left:.5rem;top:.5rem;transform:translateY(-160%);background:var(--ink);color:var(--paper);padding:.75rem 1rem;min-height:44px;z-index:8;text-decoration:none}
.skip:focus{transform:none}
:focus-visible{outline:2px solid var(--tomato);outline-offset:3px}
.wrap{width:min(70rem,calc(100% - 2rem));margin-inline:auto}
header{border-bottom:1px solid var(--line);padding-block:.75rem;background:var(--paper)}
.head{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;justify-content:space-between}
.mast{margin:0;font-family:var(--serif);font-size:1.05rem}
nav{display:flex;flex-wrap:wrap;gap:.15rem}
nav a{min-height:44px;min-width:44px;display:inline-flex;align-items:center;padding:0 .7rem;color:var(--ink);text-decoration:none}
nav a:hover{color:var(--tomato)}
.intro{padding:1.75rem 0 1rem}
.kicker{margin:0 0 .4rem;color:var(--olive);letter-spacing:.12em;font-size:.75rem}
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.18;letter-spacing:-.02em;color:var(--ink)}
h1{margin:.2rem 0 .8rem;font-size:clamp(2.05rem,7vw,4.2rem);max-width:14ch}
h2{margin:.2rem 0 .7rem;font-size:clamp(1.45rem,3.4vw,2.05rem)}
h3{margin:1.2rem 0 .45rem;font-size:1.2rem}
.lede{font-size:1.14rem;max-width:38rem;color:var(--mute)}
.aside{color:var(--olive);border-left:3px solid var(--tomato);padding-left:.8rem}
.ghost,.row button,#replay,#static-toggle{min-height:44px;min-width:44px;padding:0 1rem;border:1px solid var(--ink);background:var(--paper);color:var(--ink);font:inherit;cursor:pointer}
.ghost{margin:.4rem 0 0}
.row{display:flex;flex-wrap:wrap;gap:.5rem;margin:.55rem 0}
.row button[aria-pressed="true"]{background:var(--tomato);color:var(--paper);border-color:var(--tomato)}
.status{margin:.2rem 0 .6rem;font-family:var(--serif)}
.result{padding:1rem 1.1rem;background:#efe6d4;border:1px solid var(--line);max-width:38rem}
.notes p{max-width:38rem}
.beat{padding-block:1.15rem 1.8rem;scroll-margin-top:.4rem}
.copy p{max-width:38rem}
.scene{position:relative;aspect-ratio:4/3;background:#e7dcc8;overflow:hidden;margin:0 0 1rem}
.scene>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#ch-pick .scene>img{object-position:center}
.stage[data-shape="long"][data-sauce="oil"] #ch-pick .scene>img{object-position:16% 50%}
.stage[data-shape="short"][data-sauce="tomato"] #ch-pick .scene>img{object-position:84% 50%}
.stage[data-shape="long"][data-sauce="tomato"] #ch-pick .scene>img,.stage[data-shape="short"][data-sauce="oil"] #ch-pick .scene>img{object-position:center}
.shelf{margin:1rem 0 0;padding:.65rem .8rem .75rem;background:#efe6d4;border:1px solid var(--line);max-width:16rem;min-height:7.5rem}
.shelf-label{margin:0 0 .35rem;font-size:.75rem;letter-spacing:.14em;color:var(--olive)}
.actors{position:relative;min-height:5.2rem;pointer-events:none}
.actor{position:absolute;left:8%;bottom:.2rem;width:72%;height:auto;opacity:0;transform:rotate(-8deg);filter:drop-shadow(0 4px 8px rgba(42,47,36,.18));transition:opacity .5s ease,filter .45s ease,transform .7s ease}
.stage[data-shape="long"] .actor-long,.stage[data-shape="short"] .actor-short{opacity:1}
.stage[data-chapter="2"][data-sauce="oil"] .actor,.stage[data-chapter="3"][data-sauce="oil"] .actor{filter:drop-shadow(0 4px 8px rgba(42,47,36,.18)) sepia(.22) saturate(1.12) hue-rotate(-6deg) brightness(1.05)}
.stage[data-chapter="2"][data-sauce="tomato"] .actor,.stage[data-chapter="3"][data-sauce="tomato"] .actor{filter:drop-shadow(0 4px 8px rgba(42,47,36,.18)) sepia(.36) saturate(1.35) hue-rotate(-14deg) brightness(.98)}
@keyframes nest-in{from{transform:rotate(-18deg) translate3d(-12%,16%,0);opacity:0}to{transform:rotate(-8deg);opacity:1}}
@keyframes nest-fade{from{opacity:0}to{opacity:1}}
@keyframes scene-in{from{opacity:.35}to{opacity:1}}
.stage.is-entering[data-chapter="0"][data-shape="long"] .actor-long,.stage.is-entering[data-chapter="0"][data-shape="short"] .actor-short{animation:nest-in 1.2s ease-out both}
.stage.is-gentle.is-entering[data-chapter="0"][data-shape="long"] .actor-long,.stage.is-gentle.is-entering[data-chapter="0"][data-shape="short"] .actor-short{animation:nest-fade .45s ease both}
.stage.is-entering[data-chapter="0"] .scene>img{animation:scene-in 1s ease both}
.stage.is-gentle.is-entering[data-chapter="0"] .scene>img{animation:nest-fade .45s ease both}
.stage.is-gentle .actor{transition:opacity .4s ease,filter .45s ease}
.stage.is-gentle .scene>img{transition:opacity .4s ease,object-position .4s ease}
.stage.is-static .scene{position:relative;top:auto;max-height:none}
.stage.is-static .actor,.stage.is-static .scene>img{animation:none!important;transition:none!important}
.guide{padding:2.6rem 0 3.4rem;border-top:1px solid var(--line);scroll-margin-top:.4rem}
.guide p{max-width:40rem}
.cta{margin-top:1.6rem}
footer{border-top:1px solid var(--line);padding:1.4rem 0 2.2rem;color:var(--mute);font-size:.95rem}
html.js .no-js-only{display:none}
@media (min-width:64rem){
.beat{display:grid;grid-template-columns:minmax(17rem,38%) 1fr;gap:1.6rem 3rem;align-items:start;padding-block:1.4rem 2.4rem}
.scene{position:sticky;top:1rem;margin:0;max-height:70vh}
.copy{padding-top:.35rem}
}
@media (max-width:23.75rem){
body{font-size:1.05rem}
.wrap{width:calc(100% - 1.25rem)}
h1{font-size:2.05rem}
}
@media (min-width:90rem){
.wrap{width:min(72rem,calc(100% - 4rem))}
.lede{font-size:1.22rem}
}