:root{color-scheme:light;--ink:#232925;--quiet:#535c55;--paper:#faf9f5;--card:#fffefa;--line:#dedfd7;--accent:#245747;--tint:#e3eee3;--strong:#a9c9ac;font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);min-height:100vh}
body[data-mode=choice]{--accent:#774129;--tint:#f5e9dd;--strong:#e8bc9e}
body[data-mode=stories]{--accent:#2b5575;--tint:#e4edf4;--strong:#a7c3d9}
button,textarea{font:inherit}
button,a,summary{touch-action:manipulation}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
a{color:var(--accent);text-underline-offset:4px}
.top,main,footer{max-width:1120px;margin:auto;padding-inline:28px}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:22px;border-bottom:1px solid var(--line)}
.brand{font-weight:750;letter-spacing:.07em}.brand span{color:var(--accent);margin-right:4px}
.edition,.eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.1em;color:var(--accent)}
main{min-height:65vh;padding-block:52px 36px;outline:none}
.hero{display:grid;grid-template-columns:1.3fr 1fr;gap:30px;align-items:stretch}
.hero-copy,.hero-art{padding:42px;border-radius:24px}
.hero-copy{background:var(--card);border:1px solid var(--line)}
.hero-art{background:var(--tint);min-height:360px;position:relative;overflow:hidden;isolation:isolate;display:flex;justify-content:space-between;flex-direction:column}
.hero-number{font:italic 5.5rem Georgia,serif;color:var(--accent)}
.art-disc{position:absolute;z-index:-1;width:280px;height:280px;border-radius:50%;background:var(--strong);right:-32px;bottom:-38px}
.art-line{position:absolute;z-index:-1;width:250px;height:250px;border-radius:50%;border:1px solid var(--accent);right:32px;bottom:38px}
.art-label{color:var(--accent);font-weight:700}
.section-head{max-width:720px;margin-bottom:26px}
h1{font-size:clamp(2rem,4.8vw,3.35rem);line-height:1.15;letter-spacing:-.035em;margin:12px 0 14px}
h2,h3,p{margin:0}
.section-head p,.meta,.fine,.friction,.saved p{color:var(--quiet)}
.section-head p,.story,.friction,dialog p{line-height:1.7}
.filter-label{font-size:.9rem;font-weight:650;margin-bottom:10px}
.filters,.step-actions,.dialog-actions,.chips{display:flex;flex-wrap:wrap;gap:10px}
.filters{margin-bottom:22px}
.filters button,.button,.option{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:12px;min-height:44px;padding:9px 15px;cursor:pointer}
.filters button[aria-pressed=true]{background:var(--tint);border-color:var(--accent);color:var(--accent);font-weight:650}
.button:hover,.option:hover{border-color:var(--accent)}
.primary{background:var(--accent);color:white;border-color:var(--accent);font-weight:650}
.primary:hover{filter:brightness(1.12)}
.quiet{border-color:transparent;background:transparent;color:var(--accent)}
.fine{font-size:.78rem;margin-top:13px}
.progress{display:flex;gap:7px;margin-bottom:20px}
.progress span{width:34px;height:5px;border-radius:8px;background:var(--line)}
.progress .on{background:var(--accent)}
.narrow{max-width:690px;margin-inline:auto}
.options{display:grid;gap:12px}
.option{padding:16px 20px;text-align:left;line-height:1.5}
.step-actions{justify-content:space-between;margin-top:20px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.compare{grid-template-columns:repeat(2,minmax(0,1fr))}
.person{display:flex;align-items:flex-start;flex-direction:column;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:19px;min-width:0}
.person-top{display:flex;gap:10px;align-items:center}
.person h2{font-size:1.18rem}
.avatar{width:44px;height:44px;display:grid;place-items:center;flex-shrink:0;border-radius:50%;font:1.12rem Georgia,serif}
.sage{background:#dceadc}.sand{background:#f5e6c9}.blue{background:#ddebf4}.rose{background:#f2e1e5}
.meta{font-size:.82rem;margin-top:3px}
.story{font-size:.97rem;flex:1}
.friction{font-size:.87rem}
.chips span,.decision{background:var(--tint);color:var(--accent);border-radius:7px;padding:4px 8px;font-size:.78rem}
.more{margin-top:20px}
summary{cursor:pointer;color:var(--accent);padding-block:10px;font-weight:650}
.more .grid{margin-top:10px}
.saved{margin-top:28px;border-top:1px solid var(--line);padding-top:20px}
.saved h2{font-size:1.15rem;margin-bottom:6px}.saved ul{padding-left:16px}
footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:16px 30px;color:var(--quiet);font-size:.83rem}
footer div{display:flex;gap:16px;flex-wrap:wrap}
dialog{width:min(560px,calc(100vw - 28px));max-height:calc(100dvh - 28px);overflow:auto;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px}
dialog::backdrop{background:#202b25aa}
.dialog-head{display:flex;align-items:center;justify-content:space-between}
dialog h3,dialog label{margin-top:15px;font-size:.9rem;font-weight:700;display:block}
dialog p,.dialog-actions,.chips{margin-top:5px}
dialog textarea{display:block;width:100%;resize:vertical;margin:6px 0 12px;background:var(--paper);border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:10px}
@media(max-width:760px){.hero{grid-template-columns:1fr}.hero-art{min-height:150px;padding:20px}.hero-number{font-size:3rem}.art-disc{width:150px;height:150px}.art-line{width:140px;height:140px;bottom:14px}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-copy{padding:26px}.top,main,footer{padding-inline:18px}main{padding-top:26px}}
@media(max-width:490px){.grid{grid-template-columns:1fr}.top{padding-block:14px}.person{padding:15px}.hero{gap:14px}.hero-copy{padding:20px}.hero-art{min-height:118px}}