:root{
  color-scheme:light;
  --bg:#fff6e5;--surface:#fffdf8;--raised:#ffffff;--line:#f1dfbf;--ink:#1f1a12;--mute:#7c6f5a;
  --accent:#e2452a;--card:#1f1a12;--card-ink:#fff6e5;--warm:#e8650a;--spy:#0f9f73;--smug:#2f7df6;--liar:#e62e6b;
  --display:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold",system-ui,sans-serif;
  --body:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-rounded,"SF Pro Rounded",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  color-scheme:dark;
  --bg:#101720;--surface:#18212c;--raised:#1e2936;--line:#2b3846;--ink:#fff6e5;--mute:#9eacbb;
  --accent:#ffd23f;--card:#fff6e5;--card-ink:#1f1a12;
}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;padding:20px 16px 48px}
main,header,footer{max-width:680px;margin-inline:auto}
header{display:flex;align-items:center;gap:10px;margin-bottom:28px}
header a{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font-family:var(--display);font-weight:800;font-size:22px}
.logo{width:36px;height:36px;flex:none}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.1;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(30px,9vw,44px);margin-bottom:12px;hyphens:auto;overflow-wrap:break-word}
h2{font-size:26px;margin:36px 0 10px}
h3{font-size:19px;margin:24px 0 6px}
p,ul{margin:0 0 12px}
a{color:var(--accent)}
.eyebrow{font-family:var(--display);font-weight:700;font-size:15px;color:var(--mute)}
.mute{color:var(--mute)}
.modes{display:grid;gap:12px;margin:24px 0}
.mode{border-radius:22px;padding:20px 22px;color:#fff}
.mode b{display:block;font-family:var(--display);font-size:24px;margin-bottom:4px}
.mode.mis{background:var(--card);color:var(--card-ink)}
.mode.job{background:var(--warm)}
.mode.mole{background:var(--spy)}
.mode.smug{background:var(--smug)}
.mode.liar{background:var(--liar)}
.mode.fake{background:#0891b2}
.box{background:var(--surface);border:1.5px solid var(--line);border-radius:18px;padding:18px 20px;margin:20px 0}
.todo{background:#fff3c4;color:#4a3b00;border-radius:6px;padding:0 4px}
footer{margin-top:48px;padding-top:18px;border-top:1.5px solid var(--line);font-size:15px;color:var(--mute);display:flex;flex-wrap:wrap;gap:8px 18px}
footer a{color:inherit}

a.store{display:inline-block;padding:14px 22px;border-radius:14px;background:var(--ink);color:var(--bg);font-weight:800;text-decoration:none}