/* ===== 1. TOKENS — light is the default ===== */
  :root{
    color-scheme:light;
    --paper:#ffffff; --sheet:#f5f2fc;
    --ink:#241a3b;   --ink-soft:#5b5075;
    --line:#ddd6ec;  --line-soft:#ebe6f5;
    --seen:#9a5c00;  --seen-soft:#fdf0d8;    /* amber: readable by any site      */
    --safe:#1e7f4f;  --safe-soft:#e7f5ec;    /* green: withheld, stays with you  */
    --violet:#6a4fd8; --violet-soft:#eee9fd; /* violet: the watcher, this page   */
    --mute:#6f6688;                           /* gray: not yet known              */
    --seen-display:#c27a05; --pupil:#241a3b;
    --eye-white:#f6f1fb; --eye-dark:#140f21; --shine:#ffffff;      /* the big eye is drawn in night colours in every theme */
    --halo-a:rgba(163,140,247,.32); --halo-b:rgba(163,140,247,.10); --halo-c:rgba(163,140,247,0);
    --sw-light:#ffffff; --sw-warm:#f3ece0; --sw-night:#140f21; --sw-contrast:#000000;   /* theme swatches */
    --sans:"Segoe UI Variable Text","Segoe UI","Avenir Next",system-ui,-apple-system,Roboto,sans-serif;
    --serif:Charter,"Bitstream Charter","Iowan Old Style",Georgia,"Times New Roman",serif;
    --mono:ui-monospace,"Cascadia Code","SF Mono",Menlo,Consolas,monospace;
    --r:6px;
  }
  /* themes: light is the default and loads first; the rest are chosen by the viewer */
  html[data-theme="warm"]{
    --paper:#fbf7f0; --sheet:#f3ece0; --ink:#2b2234; --ink-soft:#6b5d7a; --line:#dfd3c8; --line-soft:#ece4dc;
    --seen:#a3540a; --seen-soft:#f8e6cf; --safe:#2a7a4b; --safe-soft:#e3f1e6; --violet:#7a4fc2; --violet-soft:#f0e8f7;
    --mute:#8a7a90; --seen-display:#b8620a; --pupil:#2b2234;
  }
  html[data-theme="night"]{
    color-scheme:dark;
    --paper:#140f21; --sheet:#1c1530; --ink:#ede7f8; --ink-soft:#b5a9d1; --line:#332852; --line-soft:#261d3e;
    --seen:#f3b85a; --seen-soft:#3d2c10; --safe:#6bd7a3; --safe-soft:#143428; --violet:#a38cf7; --violet-soft:#2a2050;
    --mute:#8d82a8; --seen-display:#f6bd5e; --pupil:#140f21;
  }
  html[data-theme="contrast"]{
    --paper:#ffffff; --sheet:#f2f2f2; --ink:#000000; --ink-soft:#222222; --line:#000000; --line-soft:#777777;
    --seen:#7a3b00; --seen-soft:#ffe6c2; --safe:#005c2e; --safe-soft:#d6f2e0; --violet:#3b1fa8; --violet-soft:#e6ddff;
    --mute:#333333; --seen-display:#7a3b00; --pupil:#000000;
  }
  html[data-theme="contrast"] .btn{border-width:2px}

  /* ===== 2. RESET & TYPE ===== */
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
  body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 var(--sans)}
  h1,h2,h3,p,ul,ol{margin:0}
  a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
  a:hover{text-decoration-thickness:2px}
  :focus-visible{outline:2px solid var(--violet);outline-offset:2px;border-radius:3px}
  strong{font-weight:600}
  .voice{font-family:var(--serif);font-size:20px;line-height:1.5;max-width:34em}
  .small{font-size:13px;color:var(--ink-soft)}
  .mono{font-family:var(--mono)}
  .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .skip{position:absolute;left:-999px;top:8px;z-index:20;display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border-radius:var(--r);background:var(--ink);color:var(--paper);font-weight:600;text-decoration:none}
  .skip:focus{left:16px}
  #decoy{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

  /* ===== 3. LAYOUT ===== */
  .sheet{max-width:1040px;margin:0 auto;padding:0 16px 56px}
  header{display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px;margin:0 calc(50% - 50vw);padding:10px max(16px,calc(50vw - 50%));border-bottom:1px solid var(--line);background:var(--paper);color:var(--ink)}
  .brand{display:inline-flex;align-items:center;gap:8px;min-height:40px;font-weight:600;font-size:17px;text-decoration:none}
  .brand svg{width:24px;height:24px}
  nav{display:flex;flex-wrap:wrap;gap:0 16px;margin-left:auto}
  nav a{display:inline-block;padding:10px 0;font-size:14px;color:var(--ink-soft);text-decoration:none}
  nav a:hover{color:var(--ink);text-decoration:underline}
  section{margin-top:64px;scroll-margin-top:72px}
  .sec-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin-bottom:20px}
  h2{font-size:22px;font-weight:600;line-height:1.25}
  .lede{color:var(--ink-soft);max-width:60ch}

  /* ===== 4. COMPONENTS ===== */
  .btn{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px;border:1px solid var(--ink);border-radius:var(--r);background:var(--paper);color:var(--ink);font:600 15px var(--sans);text-decoration:none;cursor:pointer}
  .btn svg{width:16px;height:16px}
  .btn:hover{background:var(--sheet)}
  .btn.primary{background:var(--ink);color:var(--paper)}
  .btn.primary:hover{opacity:.9}
  .btn.quiet{border-color:var(--line)}
  .btn[aria-pressed="true"]{background:var(--sheet)}

  /* theme picker: four swatches, light first */
  .themes{display:inline-flex;gap:4px;margin-left:12px;padding:2px;border:1px solid var(--line);border-radius:999px;background:var(--paper)}
  .themes button{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 10px;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--ink-soft);font:600 13px var(--sans);cursor:pointer}
  .themes button .sw{width:12px;height:12px;border-radius:50%;border:1px solid var(--ink-soft);background:var(--p)}
  .themes button[aria-pressed="true"]{border-color:var(--violet);color:var(--ink);background:var(--sheet)}
  .themes .lbl{display:none}
  @media (min-width:1200px){.themes .lbl{display:inline}}
  body:not(.past) .themes .lbl{display:inline}
  @media (max-width:640px){body:not(.past) .themes .lbl{display:none}}

  /* section marks + reveal */
  .sec-head h2{position:relative;padding-left:14px}
  .sec-head h2::before{content:"";position:absolute;left:0;top:.3em;width:4px;height:.8em;border-radius:2px;background:var(--violet)}
  .reveal{opacity:0;transform:translateY(10px);transition:opacity .55s ease,transform .55s ease}
  .reveal.in{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
  section.band{background:var(--sheet);border:1px solid var(--line-soft);border-radius:10px;padding:26px 20px 28px}

  /* the eyes */
  .eye{transition:transform .09s ease-in;transform-origin:50% 50%}
  .eye.blink{transform:scaleY(.06)}
  .eye.doze{transform:scaleY(.45);transition:transform .7s ease}
  .eye.asleep{transform:scaleY(.12);transition:transform 1.2s ease}
  .eye.poke{transform:scale(1.06);transition:transform .12s ease-out}
  html[data-theme="night"] .eye .pupil{r:2.1px}
  .eye .lid{fill:none;stroke:var(--ink);stroke-width:.55}
  .eye .iris{fill:var(--seen-soft);stroke:var(--seen);stroke-width:.5}
  .eye .pupil{fill:var(--pupil,var(--ink));transition:r .25s ease}
  .eye.dilate .pupil{r:2.2px}
  .eye.contract .pupil{r:1.3px}
  .brand .eye .lid{stroke-width:1.75}
  .brand .eye .iris{stroke:none;fill:var(--seen)}
  .brand .eye .pupil{transition:none}
  @media (prefers-reduced-motion:reduce){.eye{transition:none}.eye.blink,.eye.doze,.eye.asleep,.eye.poke{transform:none}}

  /* the stage: one eye, one number, one sentence about you. Nothing else until you scroll. */
  /* the stage is always night, whatever the page theme: the eye lives in the dark, the explanation in daylight */
  .stage, body:not(.past) header{
    color-scheme:dark;
    --paper:#140f21; --sheet:#1c1530; --ink:#ede7f8; --ink-soft:#b5a9d1; --line:#332852; --line-soft:#261d3e;
    --seen:#f3b85a; --seen-soft:#3d2c10; --safe:#6bd7a3; --safe-soft:#143428; --violet:#a38cf7; --violet-soft:#2a2050;
    --mute:#8d82a8; --seen-display:#f6bd5e; --pupil:#140f21;
  }
  .stage{position:relative;display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:28px 48px;align-items:center;margin:0 calc(50% - 50vw);padding:16px max(16px,calc(50vw - 50%)) 56px;min-height:calc(100vh - 70px);min-height:calc(100svh - 70px);background:var(--paper);color:var(--ink)}
  header{transition:background .45s ease,border-color .45s ease,color .45s ease}
  body:not(.past) header{border-bottom-color:var(--paper)}
  .eye-wrap{text-align:center}
  .eye-box{position:relative;display:inline-block;width:100%;max-width:280px;aspect-ratio:1;animation:breathe 5.5s ease-in-out infinite}
  .eye-box::before{content:"";position:absolute;inset:-24%;border-radius:50%;background:radial-gradient(circle, var(--halo-a) 0%, var(--halo-b) 42%, var(--halo-c) 68%);pointer-events:none}
  @keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.015)}}
  .arc{position:absolute;inset:-7%;transform:rotate(-90deg);pointer-events:none;overflow:visible}
  .arc circle{fill:none;stroke-width:1.1}
  .arc-track{stroke:var(--line)}
  .arc-fill{stroke:var(--seen-display);stroke-linecap:round;stroke-dasharray:304.7;stroke-dashoffset:304.7;transition:stroke-dashoffset .1s linear}
  .eye-big{display:block;width:100%;height:100%;cursor:pointer}
  .eye-cap{font-size:13px;color:var(--ink-soft);margin-top:6px;min-height:40px}
  .eye .shine{fill:var(--shine)}
  .eye-big .lid{fill:var(--eye-white);stroke:var(--eye-white);stroke-width:.6}
  .eye-big .iris{fill:var(--seen-display);stroke:none}
  .eye-big .pupil{fill:var(--eye-dark);r:1.9px}
  .eye-big.dilate .pupil{r:2.5px}
  .eye-big.contract .pupil{r:1.4px}
  .eye.shut{transform:scaleY(.04)}
  .eye.opening{transition:transform .7s cubic-bezier(.2,.9,.2,1)}
  .ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--violet);opacity:0;pointer-events:none;transform:scale(.55)}
  .ring.go{animation:ring 1.1s ease-out}
  @keyframes ring{0%{transform:scale(.55);opacity:.9}100%{transform:scale(1.2);opacity:0}}
  h1{font-family:var(--serif);font-size:clamp(40px,6.5vw,64px);font-weight:700;line-height:1;letter-spacing:-.01em;margin:0 0 14px}
  .score{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 16px;margin:0 0 18px}
  .score .n{font:700 clamp(64px,10vw,112px)/1 var(--serif);color:var(--seen-display);font-variant-numeric:tabular-nums;letter-spacing:-.02em;min-width:1.1em}
  .score .lbl{font-size:clamp(16px,1.6vw,19px);line-height:1.35;color:var(--ink-soft);max-width:20em}
  .spoken{font-family:var(--serif);font-size:clamp(19px,2.3vw,27px);line-height:1.45;max-width:30em}
  .spoken .w{opacity:0;transition:opacity .35s ease}
  .spoken.on .w{opacity:1}
  .spoken .f{font-weight:700;color:var(--seen);background:var(--seen-soft);border-radius:4px;padding:0 .14em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
  @keyframes stamp{0%{background:var(--seen-display);color:var(--paper)}100%{background:var(--seen-soft);color:var(--seen)}}
  .spoken.on .f{animation:stamp .7s ease-out both}
  .kept{margin-top:16px;font-family:var(--serif);font-size:clamp(19px,2.3vw,27px);line-height:1.45;max-width:30em;opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease}
  .kept.on{opacity:1;transform:none}
  .kept .k{font-weight:700;color:var(--safe);background:var(--safe-soft);border-radius:4px;padding:0 .14em}
  .kept .proof{display:block;margin-top:6px;font:15px/1.5 var(--sans);color:var(--ink-soft)}
  .kept .proof strong{color:var(--ink)}
  .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
  .stage .actions{opacity:0;transition:opacity .5s ease .2s}
  .stage .actions.on{opacity:1}
  .cue{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;border-radius:50%;color:var(--violet)}
  .cue svg{width:22px;height:22px;animation:bob 1.6s ease-in-out infinite}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
  body.past .cue{display:none}
  nav{display:none}
  body.past nav{display:flex}
  .themes{margin-left:auto}
  body.past .themes{margin-left:12px}
  @media (prefers-reduced-motion:reduce){.spoken .w{transition:none;opacity:1}.kept,.stage .actions{transition:none;opacity:1;transform:none}.spoken.on .f{animation:none}.ring.go{animation:none}.eye.shut{transform:none}.cue svg{animation:none}.eye-box{animation:none}.arc-fill{transition:none}}

  /* the panel is scanned left to right as it fills */
  .panel{position:relative}
  .panel.scanning::after{content:"";position:absolute;top:0;bottom:0;left:-12%;width:12%;background:linear-gradient(90deg,transparent,var(--seen-soft),transparent);animation:sweep 1.3s ease-in-out forwards;pointer-events:none}
  @keyframes sweep{to{left:100%}}
  @media (prefers-reduced-motion:reduce){.panel.scanning::after{animation:none;display:none}}

  /* the sketch, drawn: a 5x5 mark derived from the hash */
  .glyph{display:inline-block;width:64px;height:64px;vertical-align:middle;margin-right:12px;border-radius:6px;border:1px solid var(--line)}
  .glyph rect{fill:var(--seen)}
  .fprow{display:flex;align-items:center;gap:4px;margin:8px 0 6px}

  /* spec-sheet panel */
  .legend{display:flex;flex-wrap:wrap;gap:4px 20px;margin-left:auto;font-size:14px;color:var(--ink-soft)}
  .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:1px;background:currentColor}
  .legend .seen{color:var(--seen)} .legend .safe{color:var(--safe)}
  .panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
  .cell{min-width:0;padding:14px 16px 16px;background:var(--paper);box-shadow:-1px -1px 0 0 var(--line),1px 1px 0 0 var(--line)}  /* hairlines per cell, so an empty grid slot stays paper */
  .cell-top{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-soft)}
  .cell-top svg{width:16px;height:16px;flex:none}
  .state{margin-left:auto;font-size:13px;white-space:nowrap;color:var(--mute)}
  .state::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px;background:currentColor}
  .cell.seen .state{color:var(--seen)} .cell.safe .state{color:var(--safe)}
  .val{margin-top:6px;font-weight:600;overflow-wrap:anywhere;border-radius:3px}
  .sub{font-size:13px;color:var(--ink-soft);margin-top:2px}
  .delta{display:inline-block;margin-left:6px;font-size:12px;font-weight:600;color:var(--safe)}
  @keyframes noticed{from{background:var(--seen-soft)}to{background:transparent}}
  .flash{animation:noticed .9s ease-out}
  @media (prefers-reduced-motion:reduce){.flash{animation:none}}
  .panel.summary{margin-top:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .cell h3{font-size:16px;font-weight:600}
  .fp{font:600 22px var(--mono);color:var(--seen);margin:8px 0 6px;overflow-wrap:anywhere}
  .unseen{list-style:none;padding:0;margin-top:8px}
  .unseen li{padding:4px 0;color:var(--ink)}
  .unseen li::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:10px;vertical-align:1px;background:var(--safe)}
  .remember{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  .try{margin-top:20px}

  /* per-tile: why it matters, how to hide it */
  .why{margin-top:6px}
  .why summary{display:flex;align-items:center;gap:6px;min-height:40px;padding:0;font-size:13px;font-weight:400;color:var(--ink-soft);cursor:pointer;list-style:none}
  .why summary::-webkit-details-marker{display:none}
  .why summary::before{content:"+";font-family:var(--serif);font-size:16px;line-height:1}
  .why[open] summary::before{content:"−"}
  .why p{font-size:13px;color:var(--ink-soft);padding:2px 0 4px}

  /* sequence: how it adds up */
  .flow{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
  .flow li{position:relative;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--sheet)}
  .flow li:last-child{background:var(--seen-soft);border-color:var(--seen)}
  .flow li:not(:last-child)::after{content:"→";position:absolute;right:-28px;top:14px;font-size:20px;color:var(--ink-soft)}
  .flow .num{display:block;font-size:13px;color:var(--ink-soft);margin-bottom:2px}
  .flow h3{font-size:16px;font-weight:600;margin-bottom:4px}
  .flow p{font-size:15px;color:var(--ink-soft)}
  .story{margin-top:28px;padding-left:18px;border-left:3px solid var(--seen)}
  .story + .story{margin-top:16px}

  /* your browser + ranked list */
  .yours{margin-bottom:24px;padding:16px 18px;border:1px solid var(--line);border-left:4px solid var(--safe);border-radius:var(--r);background:var(--safe-soft)}
  .yours h3{font-size:16px;font-weight:600;margin-bottom:6px}
  .yours ol{margin:0;padding-left:20px;display:grid;gap:6px}
  .yours p{margin-top:8px;font-size:13px;color:var(--ink-soft)}
  .moves{list-style:none;padding:0;max-width:66ch;counter-reset:m}
  .moves li{display:grid;grid-template-columns:30px 1fr;gap:2px 10px;padding:14px 0;border-top:1px solid var(--line-soft)}
  .moves li:last-child{border-bottom:1px solid var(--line-soft)}
  .moves li::before{counter-increment:m;content:counter(m);font-family:var(--serif);font-size:20px;line-height:1.2;color:var(--ink-soft);grid-row:span 2}
  .moves h3{font-size:16px;font-weight:600;display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline}
  .moves .effort{font-size:13px;font-weight:400;color:var(--ink-soft)}
  .moves p{color:var(--ink-soft)}
  .elsewhere{margin-top:28px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--sheet);max-width:66ch}
  .elsewhere h3{font-size:16px;font-weight:600;margin-bottom:6px}
  .elsewhere ul{margin:0;padding-left:20px;display:grid;gap:6px}
  .elsewhere p{margin-top:8px;font-size:13px;color:var(--ink-soft)}

  /* ===== 4b. PICTOGRAMS — one drawing per concept. Flat, two sizes, page colours only. =====
     .st structure · .hot the fact a site can read (amber; green once withheld; gray while unknown)
     .soft its pale field · .me this page, the watcher (violet) */
  .pic{display:block;width:100%;max-width:150px;height:auto;margin:10px 0 0;color:var(--ink-soft)}
  .pic .st{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
  .pic .hot{fill:var(--mute)} .pic .hot-s{stroke:var(--mute)} .pic .soft{fill:var(--sheet)} .pic .me{fill:var(--violet)}
  .cell.seen .pic .hot{fill:var(--seen)} .cell.seen .pic .hot-s{stroke:var(--seen)} .cell.seen .pic .soft{fill:var(--seen-soft)}
  .cell.safe .pic .hot{fill:var(--safe)} .cell.safe .pic .hot-s{stroke:var(--safe)} .cell.safe .pic .soft{fill:var(--safe-soft)}
  .panel.summary .pic .hot{fill:var(--seen)} .panel.summary .pic .hot-s{stroke:var(--seen)} .panel.summary .pic .soft{fill:var(--seen-soft)}
  .pic .hot,.pic .hot-s,.pic .soft{transition:fill .5s ease,stroke .5s ease}
  .cell-top svg{width:18px;height:18px}
  .cell h3.with-ico{display:flex;align-items:center;gap:8px}
  .cell h3.with-ico svg{width:18px;height:18px;flex:none;color:var(--violet)}
  .panel.summary .pic{margin:8px 0 10px}
  .panel.summary .pic.pic-safe .hot{fill:var(--safe)} .panel.summary .pic.pic-safe .hot-s{stroke:var(--safe)} .panel.summary .pic.pic-safe .soft{fill:var(--safe-soft)}
  .cell-top > span:first-of-type{min-width:0}
  .sec-pic{width:90px;height:36px;flex:none;align-self:center;color:var(--ink-soft)}
  .sec-pic .st{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
  .sec-pic .hot{fill:var(--seen)} .sec-pic .hot-s{stroke:var(--seen)} .sec-pic .soft{fill:var(--seen-soft)} .sec-pic .me{fill:var(--violet)}
  .sec-head{align-items:center}
  .sec-head .legend,.sec-head .lede{align-self:baseline}
  .li-ico{width:20px;height:20px;color:var(--violet);margin-bottom:6px;display:block}
  .moves li{grid-template-columns:30px 24px 1fr;gap:2px 10px}
  .moves li::before{grid-row:span 2}
  .moves .li-ico{grid-row:span 2;margin:3px 0 0}
  .moves h3,.moves p{grid-column:3}
  html[data-theme="contrast"] .pic .st,html[data-theme="contrast"] .sec-pic .st{stroke-width:1.8}
  @media (max-width:640px){.sec-pic{width:72px;height:29px}.pic{max-width:132px}}

  /* keep it running */
  .keep{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:start}
  .ledger{padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--sheet)}
  .ledger h3{font-size:16px;font-weight:600;margin-bottom:8px}
  .ledger dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:15px}
  .ledger dt{color:var(--ink-soft)}
  .ledger dd{margin:0;font-weight:600}

  /* owner */
  .owner{display:grid;gap:14px;max-width:34em;padding-left:18px;border-left:4px solid var(--violet)}
  .owner .voice{max-width:none}

  /* questions */
  #faq details{border-top:1px solid var(--line-soft)}
  #faq details:last-of-type{border-bottom:1px solid var(--line-soft)}
  #faq summary{display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 0;font-weight:600;cursor:pointer;list-style:none}
  #faq summary::-webkit-details-marker{display:none}
  #faq summary::after{content:"+";margin-left:auto;font-family:var(--serif);font-size:22px;color:var(--ink-soft)}
  #faq details[open] summary::after{content:"−"}
  #faq details .voice{font-size:18px;padding:0 0 16px}

  /* policy */
  .promises{list-style:none;padding:0;max-width:34em;font-family:var(--serif);font-size:18px;line-height:1.5}
  .promises li{position:relative;padding:6px 0 6px 28px}
  .promises li::before{content:"✓";position:absolute;left:0;top:6px;color:var(--safe);font-family:var(--sans);font-weight:700}

  footer{margin-top:64px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-soft);display:grid;gap:4px}

  /* ===== 5. RESPONSIVE ===== */
  @media (min-width:641px){header{position:sticky;top:0;z-index:10}}
  @media (max-width:640px){
    nav{order:3;width:100%;margin-left:0;gap:0 12px}
    .themes{margin-left:auto}
    section{margin-top:48px;scroll-margin-top:8px}
    .stage{grid-template-columns:108px 1fr;gap:6px 14px;min-height:0;padding:18px max(16px,calc(50vw - 50%)) 28px;align-items:center}
    .stage-text{display:contents}
    .stage-text > *{grid-column:1 / -1}
    .stage-text > h1{grid-column:2;margin:0;font-size:clamp(34px,10vw,44px)}
    .stage-text > .score{grid-column:2;margin:0;gap:2px 10px}
    .eye-wrap{grid-row:1 / 3;grid-column:1;text-align:left}
    .eye-cap{display:none}
    .score .n{font-size:58px}
    .score .lbl{font-size:14px}
    .spoken,.kept{margin-top:14px}
    .cue{display:none}
    .legend{margin-left:0;width:100%}
    .flow{grid-template-columns:1fr;gap:34px}
    .flow li:not(:last-child)::after{content:"↓";right:auto;left:18px;top:auto;bottom:-30px}
    .keep{grid-template-columns:1fr}
  }

  /* ===== 6. PRINT — always light ===== */
  @media print{
    .pic,.sec-pic,.li-ico{display:none}
    .moves li{grid-template-columns:30px 1fr} .moves h3,.moves p{grid-column:2}
    html[data-theme="night"],html[data-theme="warm"],html[data-theme="contrast"],.stage,header,body:not(.past) header{--paper:#ffffff;--sheet:#f5f2fc;--ink:#241a3b;--ink-soft:#5b5075;--line:#ddd6ec;--line-soft:#ebe6f5;--seen:#9a5c00;--seen-soft:#fdf0d8;--safe:#1e7f4f;--safe-soft:#e7f5ec;--violet:#6a4fd8;--mute:#6f6688;--seen-display:#c27a05;--pupil:#241a3b}
    .eye-box::before,.arc,.ring,.cue,.themes,.why,#keep,#owner,#policy,.stage .actions,.elsewhere,.yours,.try,.remember,#lastTime{display:none}
    .stage{min-height:0;display:grid;grid-template-columns:120px 1fr;gap:12px 24px;padding:0 0 12px;margin:0;background:var(--paper)}
    .eye-box{max-width:120px}
    .eye-big .lid{fill:var(--paper);stroke:var(--ink)}
    .score .n{font-size:56px}
    .spoken,.kept{font-size:17px}
    .kept .proof::after{content:" Printed from iseeyou.ai, a page that keeps nothing. Public domain."}
    section{margin-top:18px}
    .panel{grid-template-columns:repeat(3,1fr)}
    .cell{padding:8px 10px;break-inside:avoid}
    .val{font-size:14px} .sub{font-size:11px}
    .flow{gap:16px} .story{font-size:16px}
    .moves li{padding:8px 0} .moves p{font-size:14px}
    #faq{display:none}
    footer{display:none}
    .reveal{opacity:1;transform:none}
    section.band{background:var(--paper);border:0;padding:0}
    .panel{background:var(--paper)}
    header{border-bottom:1px solid var(--line)}
    .btn,.skip,nav{display:none}
    header{position:static}
    .voice .w,.spoken .w{opacity:1}
    .kept,.stage .actions{opacity:1;transform:none}
    details{break-inside:avoid}
  }
.ia1{--p:var(--sw-light)}
.ia2{--p:var(--sw-warm)}
.ia3{--p:var(--sw-night)}
.ia4{--p:var(--sw-contrast)}
.ia5{margin:0}
.ia6{margin-top:8px}
.ia7{margin-top:14px}
.ia8{margin-top:14px}
.ia9{margin-top:14px}