:root{
    --bg:#0a0a0c;
    --surface:#131317;
    --surface-2:#17171c;
    --line:#26262d;
    --track:#26262d;
    --text:#e9e9ee;
    --muted:#8a8a95;
    --faint:#5c5c66;
    --accent:#f2a93b;
    --accent-dim:#7a5a24;
    --accent-soft:#ffdca0;
    --tint:#1c1710;
    --code-bg:#000000;
    --on-accent:#1a1206;
    color-scheme:dark;
  }
   :root{
     --bg:#f6f5f1;
     --surface:#ffffff;
     --surface-2:#f0eee7;
     --line:#dcd8ce;
     --track:#e4e1d7;
     --text:#17171b;
     --muted:#5c5a53;
     --faint:#8a887f;
     --accent:#b45f06;
     --accent-dim:#d9b988;
     --accent-soft:#8a4d05;
     --tint:#f7ecda;
     --code-bg:#eceadf;
     --on-accent:#fff8ef;
     color-scheme:light;
   }
 }
  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;background:var(--bg);color:var(--text);
    font:400 17px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{background:var(--accent);color:var(--on-accent)}
  a{color:var(--accent)}
  a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
    outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;
  }
  .visually-hidden{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
  [hidden]{display:none !important}
  .wrap{width:min(680px,100% - 2.5rem);margin-inline:auto}

  /* ---------- Page header ---------- */
  .site-head{
    display:flex;justify-content:space-between;align-items:center;
    padding:1.3rem 0;border-bottom:1px solid var(--line);
  }
  .wordmark{
    font-weight:800;font-size:1rem;letter-spacing:-.01em;margin:0;
    text-decoration:none;color:var(--text);
  }
  .wordmark .strike{position:relative;color:var(--accent)}
  .wordmark .strike::after{
    content:"";position:absolute;left:-3%;right:-3%;top:54%;height:.085em;
    background:var(--accent);transform:rotate(-2.5deg);border-radius:1px;
  }
  .head-link{color:var(--muted);text-decoration:none;font-size:.92rem}
  .head-link:hover{color:var(--text);text-decoration:underline}

  /* ---------- Screens ---------- */
  .screen{padding:clamp(2.6rem,7vw,4rem) 0;border-bottom:1px solid var(--line)}
  .screen:last-of-type{border-bottom:0}
  h1{font-size:clamp(1.9rem,4.6vw,2.9rem);line-height:1.12;letter-spacing:-.02em;margin:0;font-weight:800;max-width:20ch;text-wrap:balance}
  h2{
    font-size:13px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--accent);margin:0 0 1.2rem;font-weight:600;
  }
  .q-sub{margin:1.1rem 0 0;color:var(--muted);font-size:1.05rem;max-width:52ch;text-wrap:pretty}
  .punchline{
    font-size:clamp(1.9rem,4.6vw,2.7rem);font-weight:800;letter-spacing:-.02em;
    margin:1.8rem 0 0;color:var(--text);text-wrap:balance;
  }

  /* Honest reduced-motion note (only shown under prefers-reduced-motion) */
  .motion-note{
    display:none;margin:1.4rem 0 0;padding:.8rem 1rem;font-size:.88rem;color:var(--muted);
    border-left:3px solid var(--accent);background:var(--surface);
  }
  @media (prefers-reduced-motion: reduce){.motion-note{display:block}}

  /* ---------- Verdict controls (radio styled as option cards; pick = submit = lock) ---------- */
  .verdict{border:0;margin:1.6rem 0 0;padding:0}
  .verdict legend{padding:0;font-size:1.15rem;font-weight:700;letter-spacing:-.01em}
  .legend-hint{font-weight:400;color:var(--faint);font-size:.85rem}
  .verdict-options{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.1rem}
  .opt{position:relative}
  .opt input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
  .opt span{
    display:inline-block;padding:.8rem 1.4rem;border:1px solid var(--line);
    border-radius:12px;font-weight:650;cursor:pointer;user-select:none;
    background:var(--surface);
    transition:border-color .15s,background .15s,color .15s,opacity .2s;
  }
  .opt:hover span{border-color:var(--accent)}
  .opt input:focus-visible+span{outline:2px solid var(--accent);outline-offset:3px}
  /* Verdict options are phrases here: tinted selection */
  .opt input:checked+span{
    border-color:var(--accent);background:var(--tint);color:var(--accent-soft);
  }
  .verdict.locked .opt input{cursor:default}
  .verdict.locked .opt span{cursor:default}
  .verdict.locked .opt input:not(:checked)+span{opacity:.35}
  .verdict.pending{opacity:.55}
  .verdict.pending .opt input{cursor:default}
  .verdict.pending .opt span{cursor:default}

  /* ---------- Anti-spoiler mask ---------- */
  .masked{transition:filter .5s ease,opacity .5s ease}
  .masked[data-masked]{filter:blur(14px);opacity:.3;pointer-events:none;user-select:none}
  /* Unlock choreography: children rise in with a ~200ms cascade */
  .masked:not([data-masked])>*{animation:rise .45s ease both}
  .masked:not([data-masked])>*:nth-child(2){animation-delay:.05s}
  .masked:not([data-masked])>*:nth-child(3){animation-delay:.1s}
  .masked:not([data-masked])>*:nth-child(4){animation-delay:.15s}
  .masked:not([data-masked])>*:nth-child(5){animation-delay:.2s}
  .masked:not([data-masked])>*:nth-child(6){animation-delay:.25s}
  .masked:not([data-masked])>*:nth-child(n+7){animation-delay:.3s}
  @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

  /* ---------- Demo shell ---------- */
  .demo{
    position:relative;
    background:var(--surface);border:1px solid var(--line);border-radius:16px;
    padding:clamp(1.4rem,4vw,2.2rem);margin-top:1.8rem;
  }
  .fig-tag{
    position:absolute;top:.9rem;right:1rem;font-size:.65rem;letter-spacing:.14em;
    text-transform:uppercase;color:var(--faint);border:1px solid var(--line);
    border-radius:999px;padding:.2rem .55rem;font-weight:600;pointer-events:none;
  }
  .rerun-note{font-size:.85rem;color:var(--faint)}

  /* ---------- Door stage ---------- */
  .stage-status{margin:0;padding-top:.8rem;font-size:.95rem;color:var(--muted);max-width:44ch}
  .stage-status strong{color:var(--text)}
  .doors{
    position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;
    margin:1.3rem 0 0;padding-bottom:.65rem;perspective:900px;
  }
  .doors::after{
    content:"";position:absolute;z-index:0;left:1%;right:1%;bottom:.2rem;height:1px;
    background:linear-gradient(90deg,transparent,var(--line-strong,var(--line)) 14% 86%,transparent);
  }
  .door{
    position:relative;z-index:1;aspect-ratio:3/4;padding:0;font:inherit;color:var(--text);
    background:var(--bg);border:1px solid var(--line-strong,var(--line));border-radius:13px 13px 4px 4px;cursor:pointer;
    perspective:520px;transform-style:preserve-3d;
    box-shadow:0 9px 18px color-mix(in srgb,var(--bg) 62%,transparent),inset 0 0 0 3px var(--bg);
    transition:border-color .2s ease,box-shadow .28s ease,transform .28s ease;
  }
  .door:hover:not(:disabled){border-color:var(--accent);transform:translateY(-2px)}
  .door:disabled{cursor:default}
  .door-interior,.door-face{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    border-radius:11px 11px 2px 2px;
  }
  .door-interior{
    overflow:hidden;background:
      radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 48%),
      var(--bg-raised,var(--bg));
    box-shadow:inset 0 0 20px color-mix(in srgb,var(--bg) 70%,transparent);
  }
  .door-interior::after{
    content:"";position:absolute;left:15%;right:15%;bottom:12%;height:1px;
    background:var(--line-strong,var(--line));opacity:.65;
  }
  .door-face{
    z-index:2;background:linear-gradient(145deg,var(--surface-2),var(--surface));
    transform:rotateY(0deg) translateZ(1px);transform-origin:left center;backface-visibility:hidden;
    transition:transform .52s cubic-bezier(.2,.72,.2,1),box-shadow .52s ease,filter .3s ease;
    box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--line) 48%,transparent),0 0 0 transparent;
    will-change:transform;
  }
  .door-face::before{
    content:"";position:absolute;inset:14% 17%;border:1px solid color-mix(in srgb,var(--line-strong,var(--line)) 72%,transparent);
    border-radius:8px 8px 2px 2px;box-shadow:inset 0 0 0 4px color-mix(in srgb,var(--surface) 52%,transparent);
  }
  .door-face::after{
    content:"";position:absolute;right:12%;top:54%;width:6px;aspect-ratio:1;
    border:1px solid color-mix(in srgb,var(--accent) 62%,var(--line));border-radius:50%;
    background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent);
  }
  .door-num{position:relative;z-index:1;font-size:clamp(1.6rem,5vw,2.2rem);font-weight:800;font-variant-numeric:tabular-nums;color:var(--faint)}
  .door.picked{border-color:var(--accent);box-shadow:0 9px 18px color-mix(in srgb,var(--bg) 62%,transparent),inset 0 0 0 1px var(--accent)}
  .door.picked .door-num{color:var(--accent)}
  .door.open .door-face{
    transform:rotateY(-84deg) translateZ(1px);filter:brightness(.84);
    box-shadow:inset -12px 0 18px color-mix(in srgb,var(--bg) 52%,transparent),12px 4px 22px color-mix(in srgb,var(--bg) 58%,transparent);
  }
  .door.reveal-primary .door-face{transition-delay:.08s}
  .door.reveal-secondary .door-face{transition-delay:.3s}
  .door[data-decision]{border-color:var(--line-strong,var(--line))}
  .door[data-decision]:hover{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
  .door.round-choice{box-shadow:0 0 0 2px var(--accent)}
  .door-back{
    position:relative;z-index:1;opacity:0;transform:translateY(7px);
    font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:.82rem;color:var(--muted);
  }
  .door.open .door-back{animation:prize-in .28s .34s ease both}
  .door.reveal-primary .door-back{animation-delay:.48s}
  .door.reveal-secondary .door-back{animation-delay:.7s}
  .door-back[data-prize="car"]{color:var(--accent)}
  .door-tag{
    position:absolute;z-index:4;top:.5rem;left:.55rem;right:.55rem;font-size:.58rem;letter-spacing:.1em;
    transform:translateZ(4px);backface-visibility:hidden;
    text-transform:uppercase;color:var(--accent);font-weight:750;text-align:left;
  }
  .host-rule{
    margin:1.1rem 0 0;padding:.9rem 1rem;border-left:3px solid var(--accent);
    border-radius:0 10px 10px 0;background:var(--tint);color:var(--text);
    animation:evidence-in .28s ease both;
  }
  .host-rule-label{display:block;margin-bottom:.2rem;color:var(--accent-soft);font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
  .decision-hint{margin:1rem 0 .7rem;color:var(--muted);font-size:.9rem}
  .equal-choice{width:100%;min-height:44px}
  .decision-hint,.equal-choice{animation:evidence-in .28s .06s ease both}
  @keyframes evidence-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @keyframes prize-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

  /* ---------- Three-world explanation ---------- */
  .case-proof{margin:1.6rem 0;padding:1.2rem;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
  .case-proof h3{margin:0;font-size:1.2rem}
  .case-intro{margin:.45rem 0 0;color:var(--muted);font-size:.9rem}
  .case-grid{display:grid;gap:.75rem;margin-top:1rem}
  @media (min-width:640px){.case-grid{grid-template-columns:repeat(3,1fr)}}
  .case-card{padding:.85rem;border:1px solid var(--line);border-radius:10px;background:var(--bg-raised)}
  .case-label{display:block;color:var(--faint);font-size:.68rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase}
  .case-doors{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem;margin-top:.65rem}
  .case-door{display:grid;place-items:center;min-height:54px;border:1px solid var(--line-strong);border-radius:7px 7px 2px 2px;color:var(--muted);font-size:.58rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
  .case-door--pick{border-color:var(--accent)}
  .case-door--open{border-style:dashed;color:var(--muted)}
  .case-outcome{display:block;margin-top:.65rem;color:var(--accent-soft);font-size:.78rem;font-weight:800}
  .case-summary{margin:1rem 0 0;font-weight:750}

  /* ---------- Simulation meters ---------- */
  .sim{display:grid;gap:1.1rem;margin-top:1.4rem}
  .sim-row{display:grid;gap:.45rem}
  .sim-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
  .sim-label{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);font-weight:600}
  .sim-val{font-variant-numeric:tabular-nums;color:var(--accent);font-weight:700}
  .sim-sub{font-size:.82rem;color:var(--faint);font-variant-numeric:tabular-nums}
  .sim-track{height:12px;border-radius:999px;background:var(--track);overflow:hidden}
  .sim-fill{height:100%;width:0%;background:var(--accent);border-radius:999px;transition:width .12s linear}
  .demo-tools{display:flex;align-items:center;flex-wrap:wrap;gap:.9rem;margin-top:1.5rem}

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-block;padding:.75rem 1.4rem;font:inherit;font-weight:700;cursor:pointer;
    background:var(--accent);color:var(--on-accent);border:0;border-radius:10px;
    transition:filter .2s;
  }
  .btn:hover{filter:brightness(1.08)}
  .btn:disabled{opacity:.45;cursor:default;filter:none}
  .btn--ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
  .btn--ghost:hover{border-color:var(--accent);filter:none}

  /* ---------- Rebuilt model card ---------- */
  .model-card{
    border:1px solid var(--line);border-left:3px solid var(--accent);
    border-radius:12px;background:var(--surface);padding:1.5rem;margin-top:1.4rem;
  }
  .model-card dl{margin:0}
  .model-card dt{
    font-size:12px;letter-spacing:.13em;text-transform:uppercase;
    color:var(--accent);font-weight:700;margin:0 0 .35rem;
  }
  .model-card dd{margin:0 0 1.15rem;color:var(--text)}
  .model-card dd:last-of-type{margin-bottom:0}
  code{
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;
    background:var(--code-bg);color:var(--accent);padding:.1em .4em;border-radius:5px;
  }
  .model-card .btn{margin-top:1.3rem}

  /* ---------- Evidence ---------- */
  .sources{list-style:none;margin:0 0 1.4rem;padding:0}
  .sources li{padding:.9rem 0;border-top:1px solid var(--line);color:var(--muted)}
  .sources li:first-child{border-top:0;padding-top:0}
  .sources .cite{display:block;color:var(--faint);font-size:.82rem;margin-top:.25rem}
  details.try{
    border:1px solid var(--line);border-radius:12px;background:var(--surface);
    padding:0;margin:0 0 1.4rem;
  }
  details.try summary{cursor:pointer;font-weight:700;padding:1rem 1.2rem;list-style:none}
  details.try summary::-webkit-details-marker{display:none}
  details.try summary::after{content:"+";float:right;color:var(--accent);font-weight:700}
  details.try[open] summary::after{content:"\2212"}
  details.try ol{margin:.2rem 0 0;padding:0 1.2rem 1.2rem 2.4rem;color:var(--muted)}
  details.try li{margin:.45rem 0}
  details.try>p{margin:.2rem 0 0;padding:0 1.2rem 1.2rem;color:var(--muted)}
  .boundary{
    font-size:.82rem;color:var(--faint);margin:0;
    border-left:2px solid var(--line);padding-left:1rem;line-height:1.6;
  }

  /* ---------- Playground (Evidence) ---------- */
  .playground{
    position:relative;border:1px solid var(--line);border-radius:12px;
    background:var(--surface);padding:1.1rem 1.2rem;margin:0 0 1.4rem;
  }
  .pg-label{margin:0 0 .9rem;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);font-weight:600}
  .pg-slider-label{font-size:.85rem;color:var(--muted);display:block;margin:.9rem 0 .2rem}
  .playground input[type=range]{width:100%;accent-color:var(--accent);margin:.2rem 0 .4rem}
  .pg-caption{margin:.4rem 0 0;font-size:.85rem;color:var(--muted)}
  .playground .fig-tag{top:.7rem;right:.8rem}

  /* ---------- Take it with you ---------- */
  .rule-card{margin-top:0}
  .scene-grid{display:grid;gap:1rem;margin-top:1.4rem}
  @media (min-width:640px){.scene-grid{grid-template-columns:repeat(3,1fr)}}
  .scene-card{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:1.1rem 1.2rem}
  .scene-card p{margin:.5rem 0 0;font-size:.92rem;color:var(--muted)}
  .scene-card em{color:var(--text);font-style:normal;font-weight:650}
  .miniapp{
    position:relative;border:1px solid var(--line);border-radius:14px;
    background:var(--surface);padding:1.3rem 1.3rem 1.4rem;margin-top:1.6rem;
  }
  .mock-dialog{
    background:var(--surface-2);border:1px solid var(--line);border-radius:12px;
    padding:1rem 1.2rem;margin-top:.4rem;
  }
  .mock-title{margin:0;font-size:.92rem;color:var(--muted);font-weight:600}

  /* ---------- Related ---------- */
  .rel-grid{display:grid;gap:1rem;margin-top:1.4rem}
  @media (min-width:560px){.rel-grid{grid-template-columns:1fr 1fr}}
  .rel-card{
    display:flex;flex-direction:column;gap:.6rem;padding:1.2rem 1.2rem 1.3rem;
    border:1px dashed var(--line);border-radius:14px;color:var(--muted);
  }
  a.rel-card{text-decoration:none}
  a.rel-card:hover{border-color:var(--accent)}
  .rel-dir{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:600}
  .rel-title{font-weight:700;color:var(--text);font-size:1.02rem;line-height:1.35}
  .rel-note{font-size:.85rem;color:var(--faint)}

  /* ---------- Share ---------- */
  .share{
    border:1px dashed var(--line);border-radius:14px;background:var(--surface);
    padding:1.3rem 1.3rem 1.4rem;margin-top:1.4rem;
    display:flex;flex-wrap:wrap;align-items:center;gap:1rem;justify-content:space-between;
  }
  .share p{margin:0;color:var(--muted);font-size:.95rem;flex:1 1 260px}

  /* ---------- Notify / footer ---------- */
  .notify-copy{margin:0;font-size:clamp(1.2rem,2.6vw,1.4rem);font-weight:700;letter-spacing:-.01em;max-width:24ch}
  .notify-form{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.3rem}
  .notify-form input{
    flex:1 1 220px;padding:.8rem 1rem;font:inherit;color:var(--text);
    background:var(--bg);border:1px solid var(--line);border-radius:10px;
  }
  .notify-form input::placeholder{color:var(--faint)}
  .notify-done{margin:1rem 0 0;color:var(--accent);font-weight:650}

  footer{border-top:1px solid var(--line);padding:2.6rem 0 3.2rem;font-size:.9rem;color:var(--muted)}
  .foot-nav{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin-bottom:1.6rem}
  .foot-nav a{color:var(--muted);text-decoration:none}
  .foot-nav a:hover{color:var(--text);text-decoration:underline}
  .honesty{margin:0 0 .4rem;font-size:.82rem;color:var(--faint)}
  .copy{margin:0;font-size:.82rem;color:var(--faint)}

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{transition:none !important;animation:none !important}
    .door.open .door-back{opacity:1;transform:none}
  }
  @media (forced-colors:active){
    .door.picked,.door[data-decision],.door.round-choice{border:2px solid Highlight}
    .host-rule{border-left-color:Highlight}
  }