:root{
  --bg:#eeeef0; --surface:#ffffff; --text:#1c1f24; --muted:#5c636c;
  --line:#dcdee2; --accent:#3f6273; --accent-weak:rgba(63,98,115,.10);
  --warm:#b06a4f; --cool:#4a6f9c; --flip:#b3423f; --flip-weak:rgba(179,66,63,.09);
  --serif:"Spectral",Georgia,serif; --sans:"Hanken Grotesk",system-ui,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
:root:not([data-theme="light"]){
  @media (prefers-color-scheme: dark){
    --bg:#14161a; --surface:#1b1e23; --text:#e8e6e0; --muted:#8b929b;
    --line:#2a2e35; --accent:#a9c4d1; --accent-weak:rgba(169,196,209,.14);
    --warm:#d3a08c; --cool:#8fb0d4; --flip:#e08a8a; --flip-weak:rgba(224,138,138,.12);
  }
}
:root[data-theme="dark"]{
  --bg:#14161a; --surface:#1b1e23; --text:#e8e6e0; --muted:#8b929b;
  --line:#2a2e35; --accent:#a9c4d1; --accent-weak:rgba(169,196,209,.14);
  --warm:#d3a08c; --cool:#8fb0d4; --flip:#e08a8a; --flip-weak:rgba(224,138,138,.12);
}
*{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100vh;
}

/* progress rail */
.rail{position:fixed;top:env(safe-area-inset-top,0);left:0;right:0;height:2px;background:transparent;z-index:20}
.rail__fill{height:100%;width:0;background:var(--accent);transition:width .5s cubic-bezier(.22,.61,.36,1)}

.theme-toggle{
  position:fixed;top:calc(env(safe-area-inset-top,0px) + 14px);right:16px;z-index:21;
  background:transparent;border:1px solid var(--line);color:var(--muted);
  font-family:var(--sans);font-size:12px;letter-spacing:.02em;
  padding:6px 11px;border-radius:100px;cursor:pointer;transition:color .2s,border-color .2s;
}
.theme-toggle:hover{color:var(--text);border-color:var(--muted)}

.stage{
  max-width:720px;margin:0 auto;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:88px 24px 72px;
}
.fade{opacity:1;transition:opacity .32s ease}
.fade.out{opacity:0}
@media (prefers-reduced-motion: reduce){
  .fade,.fade.out{transition:none}
  .rail__fill{transition:none}
}

.step-meta{display:flex;align-items:baseline;gap:14px;margin-bottom:26px;color:var(--muted);font-size:13.5px}
.step-meta .phase{color:var(--accent);font-weight:500}
.step-meta .count{margin-left:auto;font-variant-numeric:tabular-nums;letter-spacing:.03em}

.q{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(1.6rem,4.4vw,2.35rem);line-height:1.24;
  letter-spacing:-.01em;margin:0 0 8px;max-width:20ch;
}
.q--wide{max-width:26ch}
.lead{color:var(--muted);font-size:1rem;margin:2px 0 30px;max-width:52ch}

.opts{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.opt{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:var(--surface);border:1px solid var(--line);color:var(--text);
  font-family:var(--sans);font-size:1.02rem;line-height:1.35;
  padding:16px 18px;border-radius:12px;cursor:pointer;
  transition:border-color .18s,background .18s,transform .06s;
}
.opt:hover{border-color:var(--accent);background:var(--accent-weak)}
.opt:active{transform:translateY(1px)}
.opt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.opt .key{
  flex:none;width:24px;height:24px;border-radius:6px;border:1px solid var(--line);
  display:grid;place-items:center;font-size:12.5px;color:var(--muted);
  font-variant-numeric:tabular-nums;transition:border-color .18s,color .18s
}
.opt:hover .key{border-color:var(--accent);color:var(--accent)}

.nav{margin-top:30px;display:flex;align-items:center;gap:18px;min-height:24px}
.back{
  background:none;border:none;color:var(--muted);font-family:var(--sans);
  font-size:13.5px;cursor:pointer;padding:4px 0;
}
.back:hover{color:var(--text)}
.back[hidden]{display:none}

/* intro */
.intro .kicker{color:var(--accent);font-size:13.5px;font-weight:500;margin-bottom:22px}
.intro h1{
  font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:clamp(1.9rem,5.2vw,3rem);line-height:1.2;letter-spacing:-.015em;
  margin:0 0 26px;max-width:19ch;
}
.intro p{color:var(--muted);max-width:50ch;margin:0 0 14px;font-size:1.05rem}
.cta{
  margin-top:26px;align-self:flex-start;background:var(--accent);color:var(--bg);
  border:none;font-family:var(--sans);font-weight:600;font-size:1rem;
  padding:14px 30px;border-radius:100px;cursor:pointer;transition:opacity .18s,transform .06s;
}
.cta:hover{opacity:.9}
.cta:active{transform:translateY(1px)}
.cta:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.fineprint{margin-top:20px;font-size:12.5px;color:var(--muted)}

/* pivot echo */
.echo{
  border-left:2px solid var(--line);padding:2px 0 2px 18px;margin:0 0 26px;
  color:var(--muted);font-family:var(--serif);font-style:italic;
  font-size:1.05rem;line-height:1.5;max-width:46ch;
}

/* reveal */
.reveal{max-width:840px}
.reveal h2{
  font-family:var(--serif);font-weight:500;font-size:clamp(1.7rem,4.6vw,2.4rem);
  line-height:1.2;letter-spacing:-.01em;margin:0 0 6px;
}
.reveal .sub{color:var(--muted);margin:0 0 34px;max-width:56ch}
/* two checklists */
.checks{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:6px 0 4px}
.check{
  border:1px solid var(--line);border-radius:14px;background:var(--surface);
  overflow:hidden;display:flex;flex-direction:column;
}
.check__h{padding:14px 16px;font-weight:600;font-size:1.02rem;border-bottom:1px solid var(--line)}
.check--girl .check__h{color:var(--warm)}
.check--boy .check__h{color:var(--cool)}
.check__row{display:flex;gap:11px;padding:12px 16px;font-size:.92rem;line-height:1.36;align-items:flex-start}
.check__row + .check__row{border-top:1px solid var(--line)}
.mark{
  flex:none;width:20px;height:20px;border-radius:5px;margin-top:1px;
  display:grid;place-items:center;font-size:12px;font-weight:700;
  background:var(--flip-weak);color:var(--flip);
}
.check__empty{padding:14px 16px;color:var(--muted);font-size:.9rem;font-style:italic}
.check__foot{
  margin-top:auto;padding:12px 16px;border-top:1px solid var(--line);
  font-size:.82rem;font-weight:500;color:var(--muted);
}
.check--boy .check__foot{background:var(--flip-weak);color:var(--flip);font-weight:600}
.checks-cap{color:var(--muted);font-size:.9rem;margin:14px 0 0;max-width:60ch}

/* receipt of their own answers */
.receipt{margin-top:36px}
.receipt h3{font-family:var(--serif);font-weight:500;font-size:1.35rem;margin:0 0 4px}
.receipt .rintro{color:var(--muted);font-size:.96rem;margin:0 0 20px;max-width:58ch}
.ritem{border-left:2px solid var(--flip);padding:1px 0 1px 16px;margin-bottom:18px}
.ritem--ok{border-left-color:var(--accent)}
.ritem .said{font-family:var(--serif);font-size:1.06rem;line-height:1.4;color:var(--text)}
.ritem .said .ans{color:var(--accent);font-style:italic}
.ritem .ten{color:var(--muted);font-size:.92rem;margin-top:4px;line-height:1.45}
.rnote{
  border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-top:6px;
  color:var(--muted);font-size:.95rem;line-height:1.5;background:var(--surface);max-width:60ch;
}

.synth{margin:30px 0 0;max-width:58ch}
.synth p{margin:0 0 15px}
.synth strong{color:var(--text);font-weight:600}
.pull{
  font-family:var(--serif);font-size:1.28rem;line-height:1.4;color:var(--text);
  border:none;margin:26px 0;max-width:30ch;
}

details.arg{border-top:1px solid var(--line);padding:0}
details.arg:first-of-type{border-top:1px solid var(--line)}
.args-wrap{margin-top:40px}
.args-wrap>h3{
  font-family:var(--serif);font-weight:500;font-size:1.35rem;margin:0 0 4px;
}
.args-wrap>.note{color:var(--muted);font-size:.95rem;margin:0 0 14px;max-width:56ch}
details.arg summary{
  list-style:none;cursor:pointer;padding:16px 30px 16px 2px;position:relative;
  font-weight:500;font-size:1.02rem;color:var(--text);
}
details.arg summary::-webkit-details-marker{display:none}
details.arg summary::after{
  content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  color:var(--muted);font-size:1.2rem;transition:transform .2s
}
details.arg[open] summary::after{content:"\2013"}
details.arg .body{padding:0 2px 20px;color:var(--muted);max-width:60ch}
details.arg .body .reply{color:var(--text);margin-top:10px}
details.arg .body .reply::before{
  content:"The consistent reply";display:block;color:var(--accent);
  font-size:.8rem;font-weight:600;margin-bottom:3px;
}
details.arg .body .steel::before{
  content:"The objection";display:block;color:var(--muted);
  font-size:.8rem;font-weight:600;margin-bottom:3px;
}

.refs{margin-top:44px;border-top:1px solid var(--line);padding-top:22px}
.refs h3{font-family:var(--serif);font-weight:500;font-size:1.15rem;margin:0 0 12px}
.refs ul{margin:0;padding:0;list-style:none}
.refs li{font-size:.88rem;color:var(--muted);margin-bottom:10px;line-height:1.45;padding-left:16px;position:relative}
.refs li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:1px;background:var(--muted)}
.refs a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-weak)}
.refs a:hover{border-bottom-color:var(--accent)}

.endbar{margin-top:40px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.ghost{
  background:transparent;border:1px solid var(--line);color:var(--text);
  font-family:var(--sans);font-size:.95rem;padding:11px 22px;border-radius:100px;cursor:pointer;
  transition:border-color .18s
}
.ghost:hover{border-color:var(--accent)}

@media (max-width:560px){
  body{font-size:16px}
  .checks{grid-template-columns:1fr}
}