:root{
    /* Local stacks only. Ghost Ink makes no third-party network request, so a
       webfont CDN is not an option — see docs/THREAT-MODEL.md. */
    --font-sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --font-serif:Georgia,"Iowan Old Style","Palatino Linotype","Times New Roman",serif;
    --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  }
  :root{
    /* light: ink on warm paper, secret ink revealed in violet */
    --paper:#f7f4ee;
    --paper-2:#efe9df;
    --edge:#ddd4c4;
    --ink:#20242c;
    --ink-soft:#5b5f68;
    --ink-faint:#65686d;   /* 4.63:1 on --paper-2, the worst-case background */
    --uv:#7b2ff7;
    --on-uv:#ffffff;      /* 6.06:1 on --uv */
    --uv-soft:#efe4ff;
    --uv-line:#c9a9ff;
    --ok:#1f764b;
    --bad:#b23b3b;
    --warn:#925c10;
    --field:#ffffff;
    --shadow:0 1px 0 rgba(0,0,0,.04), 0 10px 30px -18px rgba(20,24,32,.35);
    --glow:none;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --paper:#0c1018;
      --paper-2:#121826;
      --edge:#22293a;
      --ink:#e8ecf5;
      --ink-soft:#a7afc2;
      --ink-faint:#7b8394; /* 4.63:1 on --paper-2 */
      --uv:#b98bff;
      --on-uv:#140b26;    /* the dark accent is light, so its text must be dark */
      --uv-soft:#241638;
      --uv-line:#5a3ba0;
      --ok:#57d998;
      --bad:#ff8a8a;
      --warn:#f0b74a;
      --field:#0f1524;
      --shadow:0 1px 0 rgba(255,255,255,.02), 0 18px 40px -22px rgba(0,0,0,.8);
      --glow:0 0 22px -2px rgba(185,139,255,.55);
    }
  }
  :root[data-theme="dark"]{
    --paper:#0c1018; --paper-2:#121826; --edge:#22293a;
    --ink:#e8ecf5; --ink-soft:#a7afc2; --ink-faint:#7b8394;
    --uv:#b98bff; --on-uv:#140b26; --uv-soft:#241638; --uv-line:#5a3ba0;
    --ok:#57d998; --bad:#ff8a8a; --warn:#f0b74a; --field:#0f1524;
    --shadow:0 1px 0 rgba(255,255,255,.02), 0 18px 40px -22px rgba(0,0,0,.8);
    --glow:0 0 22px -2px rgba(185,139,255,.55);
  }

  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:var(--font-sans);
    line-height:1.55; -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:940px; margin:0 auto; padding:clamp(20px,4vw,44px) clamp(16px,4vw,28px) 80px}
  /* respect notches / home indicator when installed on iPhone/iPad */
  @supports (padding: max(0px)){
    .wrap{
      padding-top:max(clamp(20px,4vw,44px), env(safe-area-inset-top));
      padding-left:max(clamp(16px,4vw,28px), env(safe-area-inset-left));
      padding-right:max(clamp(16px,4vw,28px), env(safe-area-inset-right));
      padding-bottom:max(80px, env(safe-area-inset-bottom));
    }
  }
  a{color:var(--uv)}
  h1,h2,h3{font-family:var(--font-serif); font-weight:600; line-height:1.15; margin:0}
  p{margin:0 0 1em}

  /* ---- top bar ---- */
  .top{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:30px}
  .brand{display:flex; align-items:baseline; gap:12px; flex:1 1 auto; min-width:220px}
  .brand .mark{font-size:26px; line-height:1; transform:translateY(2px)}
  .brand h1{font-size:clamp(26px,4.4vw,38px); letter-spacing:.2px}
  .subtitle{font-family:var(--font-mono); font-size:12.5px;
    color:var(--ink-faint); margin-top:5px}
  .controls{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
  .iconbtn{border:1px solid var(--edge); background:var(--paper-2); color:var(--ink-soft);
    border-radius:999px; width:38px; height:38px; cursor:pointer; font-size:15px}
  .pillbtn{border:1px solid var(--edge); background:var(--paper-2); color:var(--ink-soft);
    border-radius:999px; height:38px; padding:0 15px; cursor:pointer; font:inherit; font-size:13.5px;
    font-weight:500; display:inline-flex; align-items:center; gap:7px; white-space:nowrap}
  .pillbtn:hover{border-color:var(--uv-line); color:var(--ink)}
  .pillbtn.accent{background:var(--uv-soft); border-color:var(--uv-line); color:var(--uv); font-weight:600}
  .pillbtn[hidden]{display:none}
  .pillbtn:focus-visible, .iconbtn:focus-visible{outline:2px solid var(--uv); outline-offset:2px}
  .ioshint{margin:-18px 0 26px; border:1px solid var(--uv-line); background:var(--uv-soft); color:var(--ink);
    border-radius:10px; padding:11px 14px; font-size:13.5px; display:flex; gap:12px; align-items:flex-start}
  .ioshint[hidden]{display:none}
  .ioshint b{color:var(--uv)}
  .ioshint button{margin-left:auto; border:0; background:transparent; color:var(--ink-faint);
    cursor:pointer; font-size:17px; line-height:1; padding:0 2px}

  .lede{font-family:var(--font-serif); font-size:clamp(18px,2.6vw,22px); color:var(--ink-soft);
    max-width:60ch; margin:0 0 34px}

  /* ---- hero reveal ---- */
  .hero{border:1px solid var(--edge); border-radius:16px; background:
    radial-gradient(120% 140% at 100% 0%, var(--paper-2), var(--paper)); padding:clamp(18px,3vw,28px); box-shadow:var(--shadow)}
  .hero .eyebrow{text-align:center;font-size:13px; color:var(--ink-faint); margin-bottom:10px}
  .stage{text-align:center;font-family:var(--font-serif); font-size:clamp(19px,3vw,26px); line-height:1.5;
    word-break:break-word; margin-bottom:18px}
  .glyph{display:inline-block; min-width:.62em; text-align:center; border-radius:5px; padding:0 .05em}
  .glyph.concealed{width:0;min-width:0;padding:0;font-size:0;line-height:0}
  .glyph.cover-glyph{display:inline;min-width:0;padding:0}
  .glyph.lit{background:var(--uv-soft); color:var(--uv); box-shadow:var(--glow);
    outline:1px solid var(--uv-line)}
  .hero-row{display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center}
  .decoded{font-family:var(--font-mono); font-size:14px}
  .decoded b{color:var(--uv)}

  /* ---- buttons ---- */
  button.act{border:0; border-radius:10px; background:var(--uv); color:var(--on-uv); font:inherit; font-weight:600;
    padding:11px 18px; cursor:pointer; font-size:14.5px}
  button.act.ghost{background:transparent; color:var(--uv); border:1px solid var(--uv-line)}
  button.act.mini{padding:8px 13px; font-size:13px; font-weight:500}
  button.act:focus-visible, .iconbtn:focus-visible, input:focus-visible, textarea:focus-visible{
    outline:2px solid var(--uv); outline-offset:2px}
  button:disabled{opacity:.45; cursor:not-allowed}
  .pass-row{display:flex; gap:14px; align-items:center; margin-top:6px; font-size:12px; flex-wrap:wrap}
  .linkbtn{border:0; background:none; color:var(--uv); cursor:pointer; font:inherit; font-size:12px;
    padding:0; text-decoration:underline; text-underline-offset:2px}
  .linkbtn:focus-visible{outline:2px solid var(--uv); outline-offset:2px; border-radius:3px}
  .pass-strength{color:var(--ink-faint); margin-left:auto; font-family:var(--font-mono); font-size:11px}
  .pass-strength b{font-weight:600}
  .pass-strength.weak b{color:var(--bad)} .pass-strength.ok b{color:var(--warn)} .pass-strength.strong b{color:var(--ok)}

  /* ---- panels ---- */
  .grid{display:grid; gap:18px; grid-template-columns:1fr 1fr; margin-top:34px}
  @media (max-width:720px){ .grid{grid-template-columns:1fr} }
  .card{border:1px solid var(--edge); border-radius:14px; background:var(--paper-2); padding:20px; box-shadow:var(--shadow)}
  .card.span, .card.tour-active{grid-column:1 / -1}
  .card h3{font-size:19px; margin-bottom:4px}
  .card .hint{font-size:13px; color:var(--ink-faint); margin-bottom:14px}
  label.lab{display:block; font-size:12.5px; color:var(--ink-soft); margin:0 0 5px; font-weight:500}
  textarea, input[type=text], input[type=password]{
    width:100%; border:1px solid var(--edge); border-radius:9px; background:var(--field); color:var(--ink);
    font-family:var(--font-sans); font-size:14px; padding:10px 12px; resize:vertical}
  textarea{min-height:78px; line-height:1.5}
  .field-block{margin-bottom:13px}
  .opts{display:flex; gap:16px; flex-wrap:wrap; align-items:center; margin-bottom:13px; font-size:13px; color:var(--ink-soft)}
  .opts label{display:inline-flex; align-items:center; gap:7px; cursor:pointer}
  .actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
  .out{margin-top:14px; border-top:1px dashed var(--edge); padding-top:14px}
  .out.empty{color:var(--ink-faint); font-size:13.5px}
  .result-text{border:1px solid var(--edge); border-radius:9px; background:var(--field); padding:10px 12px;
    font-size:14px; word-break:break-word; min-height:20px; white-space:pre-wrap}
  .stat{font-size:12.5px; color:var(--ink-faint); margin-top:8px; font-family:var(--font-mono)}
  .msg{font-size:13px; margin-top:8px; min-height:1.2em}
  .msg.ok{color:var(--ok)} .msg.bad{color:var(--bad)}

  /* inspector rendering */
  .inspect{font-family:var(--font-serif); font-size:16px; line-height:1.9; word-break:break-word;
    border:1px solid var(--edge); border-radius:9px; background:var(--field); padding:12px; min-height:44px}
  .chip{display:inline-block; font-family:var(--font-mono); font-size:11px;
    background:var(--uv-soft); color:var(--uv); border:1px solid var(--uv-line); border-radius:5px;
    padding:1px 4px; margin:0 1px; vertical-align:baseline; transform:translateY(-1px)}
  /* per-category colours in the inspector */
  .chip.tags{background:var(--uv-soft); color:var(--uv); border-color:var(--uv-line)}
  .chip.vs{background:color-mix(in srgb, var(--ok) 16%, transparent); color:var(--ok); border-color:color-mix(in srgb, var(--ok) 55%, transparent)}
  .chip.zw{background:color-mix(in srgb, var(--warn) 16%, transparent); color:var(--warn); border-color:color-mix(in srgb, var(--warn) 55%, transparent)}
  .chip.bidi{background:color-mix(in srgb, var(--bad) 15%, transparent); color:var(--bad); border-color:color-mix(in srgb, var(--bad) 55%, transparent)}
  .chip.space{background:var(--paper); color:var(--ink-faint); border-color:var(--edge)}
  /* compact chips, for showing payload positions inline in a hide result */
  .chip.tight{font-size:10.5px; padding:0 3px; margin:0; border-radius:4px}
  .result-text.lit{line-height:2}
  .opts-lab{color:var(--ink-faint)}
  .carrier-note{font-size:12px; color:var(--ink-faint); margin:-6px 0 13px;
    font-family:var(--font-mono); line-height:1.7}
  .carrier-note b{color:var(--ink-soft); font-weight:600}
  /* show-your-work pipeline */
  .work{margin-top:12px; border:1px solid var(--edge); border-radius:9px; background:var(--field); overflow:hidden}
  .work .step{display:grid; grid-template-columns:132px 1fr; gap:12px; padding:9px 12px; font-size:12px;
    border-top:1px solid var(--edge); align-items:baseline}
  .work .step:first-child{border-top:0}
  .work .step .n{color:var(--ink-faint); font-family:var(--font-mono); font-size:11px}
  .work .step .v{font-family:var(--font-mono); word-break:break-all; color:var(--ink-soft)}
  .work .step .v em{color:var(--ink-faint); font-style:normal}
  @media (max-width:520px){ .work .step{grid-template-columns:1fr; gap:2px} }

  /* ---- Spot the Ghost ---- */
  .game-rows{display:grid; gap:8px; margin:14px 0}
  .ghostrow{display:grid; grid-template-columns:30px 1fr; gap:10px; align-items:start; width:100%; text-align:left;
    border:1px solid var(--edge); border-radius:10px; background:var(--field); color:var(--ink);
    font:inherit; font-size:14px; padding:10px 12px; cursor:pointer}
  .ghostrow:hover{border-color:var(--uv-line)}
  .ghostrow:focus-visible{outline:2px solid var(--uv); outline-offset:2px}
  .ghostrow .mark{font-size:15px; line-height:1.5; opacity:.25}
  .ghostrow.marked{border-color:var(--uv-line); background:var(--uv-soft)}
  .ghostrow.marked .mark{opacity:1}
  .ghostrow.right{border-color:var(--ok); background:color-mix(in srgb, var(--ok) 10%, transparent)}
  .ghostrow.wrong{border-color:var(--bad); background:color-mix(in srgb, var(--bad) 10%, transparent)}
  .ghostrow .verdict{display:block; margin-top:5px; font-size:11.5px; color:var(--ink-faint);
    font-family:var(--font-mono)}
  .score{font-size:15px; font-weight:600}
  .score.win{color:var(--ok)} .score.lose{color:var(--bad)}

  /* ---- model's-eye view ---- */
  .panes{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px}
  @media (max-width:640px){ .panes{grid-template-columns:1fr} }
  .panes[hidden]{display:none}
  .pane{border:1px solid var(--edge); border-radius:10px; overflow:hidden; background:var(--field)}
  .pane.danger{border-color:color-mix(in srgb, var(--bad) 45%, transparent)}
  .pane-h{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint);
    padding:7px 11px; border-bottom:1px solid var(--edge); font-family:var(--font-mono)}
  .pane.danger .pane-h{color:var(--bad); border-bottom-color:color-mix(in srgb, var(--bad) 30%, transparent)}
  .pane-b{padding:11px; font-size:14px; line-height:1.6; word-break:break-word; min-height:74px}
  .pane-b .smuggled{background:color-mix(in srgb, var(--bad) 16%, transparent); color:var(--bad);
    border-radius:4px; padding:1px 3px; font-weight:600}

  /* ---- survivability table ---- */
  .surv{width:100%; border-collapse:collapse; font-size:12.5px;
    font-family:var(--font-mono); margin-top:4px}
  .surv th, .surv td{text-align:left; padding:6px 8px; border-bottom:1px solid var(--edge)}
  .surv th{color:var(--ink-faint); font-weight:500; font-size:11px; letter-spacing:.05em; text-transform:uppercase}
  .surv td.num{text-align:right; width:64px}
  .surv .ok{color:var(--ok)} .surv .part{color:var(--warn)} .surv .gone{color:var(--bad)}

  /* ---- stamped copies ---- */
  .stamped{display:grid; gap:9px}
  .stamp{display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center;
    border:1px solid var(--edge); border-radius:9px; background:var(--field); padding:9px 11px}
  .stamp .who{font-size:13px; font-weight:600}
  .stamp .txt{font-size:11.5px; color:var(--ink-faint); font-family:var(--font-mono)}
  .traced{font-size:15px}
  .traced b{color:var(--bad)}

  /* ---- emoji carrier ---- */
  .emopick{border:1px solid var(--edge); background:var(--paper-2); border-radius:9px; cursor:pointer;
    font-size:19px; line-height:1; padding:6px 8px}
  .emopick:hover{border-color:var(--uv-line)}
  .emopick.on{border-color:var(--uv); background:var(--uv-soft)}
  .emopick:focus-visible{outline:2px solid var(--uv); outline-offset:2px}
  .bigglyph{font-size:52px; line-height:1.2; text-align:center; padding:10px;
    border:1px solid var(--edge); border-radius:10px; background:var(--field); word-break:break-all}

  /* ---- look-alike forge ---- */
  .versus{display:grid; grid-template-columns:1fr; gap:9px}
  .vrow{border:1px solid var(--edge); border-radius:9px; background:var(--field); padding:9px 11px}
  .vrow .vlab{font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint);
    font-family:var(--font-mono); margin-bottom:3px}
  .vrow .vval{font-size:19px; word-break:break-all}
  .vrow.fake{border-color:color-mix(in srgb, var(--warn) 50%, transparent)}
  .vrow.puny .vval{font-size:13px; font-family:var(--font-mono); color:var(--ok)}
  .swaps{margin-top:9px; font-size:11.5px; color:var(--ink-faint);
    font-family:var(--font-mono); line-height:1.8}
  .swaps b{color:var(--warn); font-weight:600}

  /* ---- disguises ---- */
  .codeblock{border:1px solid var(--edge); border-radius:9px; background:var(--field); padding:11px 13px;
    font-family:var(--font-mono); font-size:13px; white-space:pre-wrap; word-break:break-word}
  .pane-b.mono{font-family:var(--font-mono); font-size:13px; white-space:pre-wrap}
  /* one span per character defeats bidi reordering, so the DOM order you see is
     the storage order — which is the entire point of the comparison */
  .logical{font-family:var(--font-mono); font-size:13px; line-height:2}
  .logical > span{unicode-bidi:isolate; display:inline-block; white-space:pre}
  .rendered-frag{font-size:14px; line-height:1.6}
  .verdicts{display:grid; gap:8px}
  .verdict-row{display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center;
    border:1px solid var(--edge); border-radius:9px; background:var(--field); padding:9px 11px; font-size:13px}
  .verdict-row .form{font-family:var(--font-mono); font-size:12.5px; word-break:break-all}
  .verdict-row .tag{font-family:var(--font-mono); font-size:11px; white-space:nowrap;
    padding:2px 7px; border-radius:20px; border:1px solid}
  .tag.pass{color:var(--ok); border-color:color-mix(in srgb, var(--ok) 50%, transparent);
    background:color-mix(in srgb, var(--ok) 12%, transparent)}
  .tag.block{color:var(--bad); border-color:color-mix(in srgb, var(--bad) 50%, transparent);
    background:color-mix(in srgb, var(--bad) 12%, transparent)}
  .canvases{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; margin:14px 0}
  .canvases figure{margin:0}
  .canvases figcaption{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint);
    font-family:var(--font-mono); margin-bottom:5px}
  .canvases canvas{width:100%; height:auto; border:1px solid var(--edge); border-radius:9px;
    background:var(--field); display:block; image-rendering:pixelated}
  .legend{display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:12px; font-size:11.5px; color:var(--ink-faint);
    font-family:var(--font-mono)}
  .legend[hidden]{display:none}
  .legend .key{display:inline-flex; align-items:center; gap:6px}
  .legend .sw{width:11px; height:11px; border-radius:3px; border:1px solid}
  .legend .sw.tags{background:var(--uv-soft); border-color:var(--uv-line)}
  .legend .sw.vs{background:color-mix(in srgb, var(--ok) 30%, transparent); border-color:var(--ok)}
  .legend .sw.zw{background:color-mix(in srgb, var(--warn) 30%, transparent); border-color:var(--warn)}
  .legend .sw.bidi{background:color-mix(in srgb, var(--bad) 30%, transparent); border-color:var(--bad)}
  .legend .sw.space{background:var(--paper); border-color:var(--edge)}
  .chip.ws{background:var(--paper); color:var(--ink-faint); border-color:var(--ink-faint); border-style:dashed}
  .legend .sw.ws{background:var(--paper); border-color:var(--ink-faint); border-style:dashed}
  .homo{background:color-mix(in srgb, var(--warn) 20%, transparent); border-bottom:2px dotted var(--warn);
    border-radius:3px 3px 0 0; padding:0 1px; cursor:help}
  .legend .sw.homo{background:color-mix(in srgb, var(--warn) 30%, transparent); border-color:var(--warn); border-bottom-style:dotted}

  /* teach sections */
  .teach{margin-top:12px}
  .section{border-top:1px solid var(--edge); padding-top:26px; margin-top:34px}
  .section h2{font-size:23px; margin-bottom:12px}
  .section p, .section li{color:var(--ink-soft); max-width:70ch}
  .section li{margin-bottom:7px}
  code, .mono{font-family:var(--font-mono); font-size:.9em}
  .k{color:var(--uv)}
  .steps{display:grid; gap:10px; margin:14px 0; padding:0; list-style:none; counter-reset:s}
  .steps li{counter-increment:s; padding-left:34px; position:relative}
  .steps li::before{content:counter(s); position:absolute; left:0; top:0; width:24px; height:24px;
    border-radius:6px; background:var(--uv-soft); color:var(--uv); border:1px solid var(--uv-line);
    display:grid; place-items:center; font:600 12px var(--font-mono)}
  .callout{border-left:3px solid var(--uv); background:var(--paper-2); border-radius:0 9px 9px 0;
    padding:12px 16px; margin:14px 0; font-size:14px; color:var(--ink-soft)}
  .callout b{color:var(--ink)}
  footer{margin-top:48px; padding-top:20px; border-top:1px solid var(--edge);
    font-size:12.5px; color:var(--ink-faint); display:flex; gap:14px; flex-wrap:wrap; justify-content:space-between}
  footer a{color:var(--ink-faint); text-decoration:underline; text-underline-offset:2px}

  /* ---- "in the wild" section ---- */
  .two-lives{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:18px 0}
  @media (max-width:640px){ .two-lives{grid-template-columns:1fr} }
  .life{border:1px solid var(--edge); border-radius:12px; padding:16px 18px; background:var(--paper-2)}
  .life .tag{font-family:var(--font-mono); font-size:10.5px; color:var(--uv);
    text-transform:uppercase; letter-spacing:.09em; display:block; margin-bottom:6px}
  .life h3{font-size:16px; margin-bottom:6px}
  .life p{font-size:14px; margin:0; color:var(--ink-soft)}

  .stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px; margin:22px 0}
  .stat-card{border:1px solid var(--edge); border-radius:12px; background:var(--paper-2); padding:15px 16px}
  .stat-card .n{font-family:var(--font-serif); font-weight:600; line-height:1.05; color:var(--uv);
    font-size:clamp(24px,3.6vw,32px)}
  .stat-card .l{font-size:12px; color:var(--ink-faint); margin-top:7px; line-height:1.4}

  figure{margin:22px 0 6px}
  .chart-wrap{border:1px solid var(--edge); border-radius:12px; background:var(--paper-2); padding:16px 16px 8px}
  .chart-wrap svg{display:block; width:100%; height:auto}
  .bar{fill:var(--uv); opacity:.85}
  .bar.pre{opacity:.32}
  .axis{fill:none; stroke:var(--edge); stroke-width:1}
  .axlabel{fill:var(--ink-faint); font:11px var(--font-mono)}
  .annot{fill:var(--ink-soft); font:600 11px var(--font-sans)}
  .annot-line{stroke:var(--ink-faint); stroke-width:1; stroke-dasharray:2 2}
  figcaption{font-size:12px; color:var(--ink-faint); margin-top:10px; font-family:var(--font-mono); line-height:1.5}

  blockquote.pull{border-left:3px solid var(--uv); margin:22px 0; padding:4px 0 4px 20px;
    font-family:var(--font-serif); font-style:italic; font-size:clamp(17px,2.5vw,21px); color:var(--ink)}
  blockquote.pull cite{display:block; font-family:var(--font-sans); font-style:normal;
    font-size:13px; color:var(--ink-faint); margin-top:12px}
  .source-note{font-size:13px; color:var(--ink-faint); border-top:1px dashed var(--edge); margin-top:22px; padding-top:14px}
  .source-note a{color:var(--uv)}

  @media (prefers-reduced-motion: no-preference){
    .glyph.concealed{width:0;min-width:0;padding:0;font-size:0;line-height:0}
  .glyph.cover-glyph{display:inline;min-width:0;padding:0}
  .glyph.lit{animation:pop .28s ease}
    @keyframes pop{from{transform:scale(.8); opacity:.2} to{transform:scale(1); opacity:1}}
  }
  /* Utilities. These exist so that no markup needs a style attribute, which is
     what lets the page ship style-src without 'unsafe-inline'. */
  .u-hidden{display:none}
  .u-mt12{margin-top:12px}
  .u-mt16{margin-top:16px}
  .u-mt30{margin-top:30px}
  .u-faint{color:var(--ink-faint)}
  .u-note{font-size:12px; color:var(--ink-faint)}
  .u-clickable{cursor:pointer}
  .u-mono-sm{font:13px var(--font-mono)}

  /* the scraper panel's isolation boundary — a sandboxed iframe, not a styled div */
  .pane-b.pane-frame{padding:0}
  .sandbox{width:100%; height:160px; border:0; display:block; background:#fff; border-radius:0 0 9px 9px}

  /* published-figures chart */
  .bar.baseline{fill:var(--ink-faint)}
  .bar.sunday{fill:var(--ink-faint)}
  .bar.onset{fill:var(--uv)}
  .bar.hit{fill:var(--uv)}
  .bar.peak{fill:var(--bad)}
  .axlabel.sub{font-size:9px; fill:var(--ink-faint)}

  /* ---- layer navigation ---- */
  .layer-nav{display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:12px; margin-top:18px}
  .layer{display:block; border:1px solid var(--edge); border-radius:12px; background:var(--paper-2);
    padding:14px 15px; text-decoration:none; color:inherit}
  .layer:hover{border-color:var(--uv-line)}
  .layer-n{display:block; font-family:var(--font-serif); font-size:17px; font-weight:600; color:var(--uv)}
  .layer-b{display:block; font-size:13px; color:var(--ink-soft); margin-top:4px; line-height:1.5}
  .layer-c{display:block; font-size:11px; color:var(--ink-faint); margin-top:7px; font-family:var(--font-mono)}

  /* ---- comparison matrix ---- */
  .matrix-wrap{overflow-x:auto; margin-top:16px; border:1px solid var(--edge); border-radius:12px}
  .matrix{border-collapse:collapse; font-size:12.5px; min-width:900px; width:100%}
  .matrix caption{caption-side:bottom; text-align:left; padding:10px 12px; font-size:12px;
    color:var(--ink-faint); line-height:1.6}
  .matrix th, .matrix td{text-align:left; padding:9px 11px; border-bottom:1px solid var(--edge);
    vertical-align:top; line-height:1.5}
  .matrix thead th{font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint);
    font-family:var(--font-mono); font-weight:500; background:var(--paper-2); position:sticky; top:0}
  .matrix tbody th{font-weight:600; white-space:nowrap}
  .matrix tbody th a{color:var(--uv)}
  .matrix .yn{font-family:var(--font-mono); font-weight:600}
  .matrix .yn.y{color:var(--ok)}
  .matrix .yn.n{color:var(--bad)}
  .matrix tbody tr:last-child th, .matrix tbody tr:last-child td{border-bottom:0}

  /* ---- per-card detection boundary ---- */
  .boundary{margin-top:14px; border-top:1px dashed var(--edge); padding-top:11px;
    font-size:11.5px; font-family:var(--font-mono); line-height:1.65; color:var(--ink-faint)}
  .b-row{display:grid; grid-template-columns:82px 1fr; gap:8px}
  .b-lab{font-weight:600}
  .b-row.yes .b-lab{color:var(--ok)}
  .b-row.no .b-lab{color:var(--bad)}

  /* ---- accessibility ---- */
  .skip{position:absolute; left:-9999px; top:0; z-index:20; background:var(--uv); color:var(--on-uv);
    padding:10px 16px; border-radius:0 0 10px 0; font-weight:600}
  .skip:focus{left:0}
  /* A single visible focus treatment for everything focusable, so no control can
     take focus without showing it. e2e/a11y.spec.js asserts this. */
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
  select:focus-visible, summary:focus-visible, [tabindex]:focus-visible{
    outline:3px solid var(--uv); outline-offset:2px; border-radius:4px}
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
      animation-duration:0.001ms !important; animation-iteration-count:1 !important;
      transition-duration:0.001ms !important; scroll-behavior:auto !important}
    html{scroll-behavior:auto}
  }

  /* Guided learning uses the same paper, ink and focus styles as the exhibit. */
  .tour-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px;list-style:none;padding:0}
  .tour-steps li{padding:16px;border:1px solid var(--edge);border-radius:12px;background:var(--paper-2)}
  .tour-steps h3{margin-top:0}
  .challenge-options{border:1px solid var(--edge);border-radius:12px;padding:16px;min-width:0}
  .challenge-options legend{font-weight:600;padding:0 6px;max-width:100%}
  #challengeChoices{display:grid;gap:12px}
  #challengeChoices label{display:flex;gap:10px;align-items:baseline;cursor:pointer}
  #challengeChoices input{flex:none}
  #challengeFeedback{line-height:1.7}

  .tour-guide{border:1px solid var(--uv-line);border-radius:12px;padding:16px;background:var(--paper-2);margin-bottom:20px}
  .tour-guide h3{font-size:18px;margin:0 0 10px;color:var(--ink)}
  .tour-guide p{color:var(--ink-soft);font-size:14px}
  .tour-guide .actions{flex-wrap:wrap}
  #tourHeading, #walkthrough-h, #challenge-h, #secret-sentence, #scr-card, #img-card{scroll-margin-top:20px}
  .learn-more{border:1px solid var(--edge);border-radius:12px;background:var(--paper-2)}
  .learn-more summary{padding:16px;cursor:pointer;color:var(--uv);font-weight:600}
  .learn-body{padding:4px 16px 16px}

  .diff-zoom{margin:18px 0 8px;max-width:640px}
  .diff-zoom figcaption{font:11px var(--font-mono);color:var(--ink-faint);margin-bottom:8px}
  .diff-zoom canvas{display:block;width:100%;height:auto;border:1px solid var(--edge);border-radius:8px;background:#000;image-rendering:pixelated}

  .card.tour-active > .hint, .card.tour-active > .u-note{display:none}