/* Tell Me — the website's one stylesheet (issue #13).
   "Dial indigo", the look chosen in #31 (docs/mocks/claude-design/look.css),
   without the mock-only page switcher. Light by default; dark follows the system.
   Every colour is a token below, so a change of look is an edit to this block.
   The accent is indigo so it can never be mistaken for the green Answer or
   red Decline on a phone's own call screen, and so it is nowhere near чуй's amber. */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Schibsted+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root{
  --bg:#F6F5F1; --panel:#FFFFFF; --panel2:#EFEEE9; --sunk:#F1F0EB; --line:#E2E0DA; --line2:#EAE8E3;
  --text:#17171C; --dim:#5A5B66; --faint:#7C7D87;
  --accent:#4B4DED; --accent-ink:#3B3DD4; --on-accent:#FFFFFF; --accent-soft:#ECECFE; --accent-line:#C9CAFB;
  --green:#18814B; --green-soft:#E3F4EA; --green-line:#BFE3CD;
  --red:#C23B34; --red-soft:#FBE9E7; --red-line:#F1C6C2;
  --code-bg:#15161D; --code-text:#C9CAD6; --code-dim:#8D8E9C; --code-acc:#A3A5FF; --code-ok:#5BD69A;
  --shadow:0 1px 2px rgba(23,23,28,.05),0 8px 24px rgba(23,23,28,.06);
  --radius:18px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0F1016; --panel:#171821; --panel2:#1F2029; --sunk:#12131A; --line:#2A2B36; --line2:#22232D;
    --text:#ECECF2; --dim:#A0A1AE; --faint:#747583;
    --accent:#7C7EFF; --accent-ink:#A3A5FF; --on-accent:#0F1016; --accent-soft:#1C1D3A; --accent-line:#34366B;
    --green:#4CCB8B; --green-soft:#10261B; --green-line:#1D4430;
    --red:#F0746C; --red-soft:#2A1515; --red-line:#4A2522;
    --code-bg:#0A0B10;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0F1016; --panel:#171821; --panel2:#1F2029; --sunk:#12131A; --line:#2A2B36; --line2:#22232D;
  --text:#ECECF2; --dim:#A0A1AE; --faint:#747583;
  --accent:#7C7EFF; --accent-ink:#A3A5FF; --on-accent:#0F1016; --accent-soft:#1C1D3A; --accent-line:#34366B;
  --green:#4CCB8B; --green-soft:#10261B; --green-line:#1D4430;
  --red:#F0746C; --red-soft:#2A1515; --red-line:#4A2522;
  --code-bg:#0A0B10;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--text);
  font:16px/1.55 "Schibsted Grotesk",-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;text-wrap:pretty;overflow-x:hidden;
}
a{color:var(--accent-ink);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
code,kbd,.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:13px}
.serif{font-family:"Instrument Serif",Georgia,serif;font-weight:400}
.q{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400}

/* ── product chrome ───────────────────────────────────────────────────── */
.wrap{max-width:1060px;margin:0 auto;padding:44px 20px 96px}
.wrap.narrow{max-width:720px}
header.app{border-bottom:1px solid var(--line);background:var(--bg)}
header.app .in{max-width:1060px;margin:0 auto;padding:14px 20px;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.02em;font-size:17px}
/* the mark: a speech bubble holding a ringing dot — it rings you, and says why.
   Drawn as a mask so it takes the accent colour in both themes; the same
   drawing as icon.svg, which tools/make-icons.mjs turns into the tab icons. */
.mark{position:relative;width:20px;height:20px;flex:none;background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='88 84 336 336'%3E%3Cmask id='m'%3E%3Crect x='0' y='0' width='512' height='512' fill='%23fff'/%3E%3Ccircle cx='256' cy='238' r='84' fill='none' stroke='%23000' stroke-opacity='.55' stroke-width='22'/%3E%3Ccircle cx='256' cy='238' r='46' fill='%23000'/%3E%3C/mask%3E%3Cpath mask='url(%23m)' d='M256 92c90 0 160 64 160 146s-70 146-160 146c-22 0-43-4-62-11l-86 35 22-78c-22-25-34-57-34-92 0-82 70-146 160-146z'/%3E%3C/svg%3E") center / contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='88 84 336 336'%3E%3Cmask id='m'%3E%3Crect x='0' y='0' width='512' height='512' fill='%23fff'/%3E%3Ccircle cx='256' cy='238' r='84' fill='none' stroke='%23000' stroke-opacity='.55' stroke-width='22'/%3E%3Ccircle cx='256' cy='238' r='46' fill='%23000'/%3E%3C/mask%3E%3Cpath mask='url(%23m)' d='M256 92c90 0 160 64 160 146s-70 146-160 146c-22 0-43-4-62-11l-86 35 22-78c-22-25-34-57-34-92 0-82 70-146 160-146z'/%3E%3C/svg%3E") center / contain no-repeat}
nav.app{display:flex;gap:4px;font-size:14px;flex-wrap:wrap}
nav.app a{color:var(--dim);padding:7px 13px;border-radius:99px}
nav.app a:hover{text-decoration:none;color:var(--text)}
nav.app a.on{background:var(--text);color:var(--bg)}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--panel2);border:1px solid var(--line);display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--text);flex:none}

/* ── type ─────────────────────────────────────────────────────────────── */
h1{font:400 44px/1.05 "Instrument Serif",Georgia,serif;letter-spacing:-.01em;margin:0 0 14px}
h1.hero{font-size:clamp(44px,7vw,72px);line-height:.98}
h1 em,h2 em{font-style:italic;color:var(--accent-ink)}
h2{font:400 28px/1.15 "Instrument Serif",Georgia,serif;margin:48px 0 14px}
h3{font-size:16px;font-weight:600;margin:0 0 8px;letter-spacing:-.01em}
p{margin:0 0 14px}
.lede{color:var(--dim);font-size:18px;margin-bottom:28px;max-width:38em}
.dim{color:var(--dim)} .faint{color:var(--faint)} .small{font-size:14px}
.eyebrow{font:500 11px/1.4 "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}

/* ── surfaces ─────────────────────────────────────────────────────────── */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.card + .card{margin-top:14px}
.card.flat{box-shadow:none;background:var(--sunk)}
.card.accent{border-color:var(--accent-line);background:var(--accent-soft);box-shadow:none}
.card.ok{border-color:var(--green-line);background:var(--green-soft);box-shadow:none}
a.card{display:block;color:inherit}
a.card:hover{text-decoration:none;border-color:var(--accent-line)}
.grid{display:grid;gap:14px}
/* The grid's gap spaces its cards; the stacking margin above would push every
   card after the first one down, so side-by-side cards start at different heights. */
.grid > .card + .card{margin-top:0}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:860px){.g2,.g3{grid-template-columns:minmax(0,1fr)}}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.spread{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.spread > div{min-width:0}
.divided > * + *{border-top:1px solid var(--line2);padding-top:14px;margin-top:14px}

/* ── controls ─────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;min-height:44px;
  background:var(--accent);color:var(--on-accent);border:1px solid transparent;border-radius:99px;
  padding:10px 20px;font:inherit;font-weight:600;font-size:15px;cursor:pointer;text-decoration:none;
}
.btn:hover{text-decoration:none;filter:brightness(1.07)}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn.ghost:hover{background:var(--panel2);filter:none}
.btn.ink{background:var(--text);color:var(--bg)}
.btn.sm{min-height:34px;padding:6px 14px;font-size:13px}
.btn.wide{width:100%}
.btn.danger{background:transparent;color:var(--red);border-color:var(--red-line)}
.btn[disabled]{opacity:.55;cursor:default}
.field{
  width:100%;min-height:46px;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:11px 14px;color:var(--text);font:inherit;
}
.field:focus{outline:2px solid var(--accent);outline-offset:1px}
label.lbl{display:block;font-size:13px;color:var(--dim);margin:0 0 6px}
.copybox{display:flex;align-items:center;gap:8px;background:var(--sunk);border:1px solid var(--line);border-radius:12px;padding:8px 8px 8px 14px;min-width:0}
.copybox .mono{flex:1;min-width:0;overflow-x:auto;white-space:nowrap}

.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;padding:4px 11px;border-radius:99px;border:1px solid var(--line);color:var(--dim);background:var(--panel);white-space:nowrap}
.pill.ok{color:var(--green);border-color:var(--green-line);background:var(--green-soft)}
.pill.warn{color:var(--accent-ink);border-color:var(--accent-line);background:var(--accent-soft)}
.pill.bad{color:var(--red);border-color:var(--red-line);background:var(--red-soft)}
.pill.on{color:var(--bg);background:var(--text);border-color:var(--text)}
.pill.live::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
@media (prefers-reduced-motion:no-preference){.pill.live::before{animation:blink 1.4s infinite}}
@keyframes blink{50%{opacity:.25}}

/* ── data ─────────────────────────────────────────────────────────────── */
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:620px}
th{text-align:left;font:500 11px "IBM Plex Mono",monospace;color:var(--faint);letter-spacing:.07em;text-transform:uppercase;padding:4px 12px 10px;border-bottom:1px solid var(--line)}
td{padding:14px 12px;border-bottom:1px solid var(--line2);vertical-align:top}
tr:last-child td{border-bottom:0}
tr.clickable:hover td{background:var(--sunk);cursor:pointer}
.num{font-variant-numeric:tabular-nums}
.meter{height:8px;border-radius:99px;background:var(--panel2);overflow:hidden}
.meter > i{display:block;height:100%;background:var(--accent);border-radius:99px}
.meter > i.green{background:var(--green)}

.steps{counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{counter-increment:s;position:relative;padding:0 0 24px 46px}
.steps li::before{content:counter(s);position:absolute;left:0;top:-3px;width:30px;height:30px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;font:600 13px "IBM Plex Mono",monospace}
.steps li::after{content:"";position:absolute;left:15px;top:30px;bottom:2px;width:1px;background:var(--line)}
.steps li:last-child{padding-bottom:0}
.steps li:last-child::after{display:none}

/* ── the phone: always a dark call screen, in either theme ────────────── */
.phone{
  width:280px;max-width:100%;height:576px;border-radius:44px;background:#07070B;border:9px solid #23242C;
  position:relative;overflow:hidden;box-shadow:0 30px 70px rgba(20,20,40,.35);flex:none;color:#F1F1F6;
}
.phone .notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:86px;height:24px;border-radius:99px;background:#000;z-index:3}
.phone .screen{position:absolute;inset:0;padding:54px 18px 24px;display:flex;flex-direction:column;justify-content:space-between;text-align:center}
.phone .who{font-size:12px;letter-spacing:.08em;color:#9A9BAA}
.phone .num{font-size:26px;margin:8px 0 2px;font-weight:500}
.phone .sub{font-size:12px;color:#9A9BAA}
.phone .said{margin-top:26px;padding:14px;border-radius:16px;background:#16172A;border:1px solid #2B2D55;text-align:left;font-size:15px;line-height:1.4}
.phone .said .eyebrow{color:#A3A5FF;margin-bottom:6px}
.phone .keys{display:flex;justify-content:space-between;padding:0 14px 8px}
.phone .key{display:grid;justify-items:center;gap:6px;font-size:11px;color:#9A9BAA}
.phone .key b{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;font-size:22px;color:#fff;font-weight:500}
.phone .key.no b{background:#E5484D} .phone .key.yes b{background:#30A46C}
/* rings behind the phone on the landing page */
.ringstage{position:relative;display:grid;place-items:center;padding:30px;flex:none;max-width:100%}
@media(max-width:600px){.ringstage{overflow:clip}} /* the rings are wider than a phone screen */
.ringstage::before,.ringstage::after{content:"";position:absolute;width:420px;height:420px;max-width:120%;aspect-ratio:1;border-radius:50%;border:1px solid var(--accent-line)}
.ringstage::after{width:560px;height:560px;opacity:.5}

/* ── misc ─────────────────────────────────────────────────────────────── */
.note{padding:14px 18px;border-radius:14px;background:var(--sunk);color:var(--dim);font-size:14px;margin:18px 0}
.note b{color:var(--text);font-weight:600}
.transcript{display:flex;flex-direction:column;gap:10px}
.line{display:flex;gap:10px;align-items:flex-start}
.line .who{width:58px;flex:none;color:var(--faint);font:500 11px/1.4 "IBM Plex Mono",monospace;padding-top:10px;text-transform:uppercase;letter-spacing:.05em}
.line .what{background:var(--panel2);border-radius:14px 14px 14px 4px;padding:9px 13px;font-size:15px;min-width:0}
.line.him{flex-direction:row-reverse}
.line.him .who{text-align:right}
.line.him .what{background:var(--accent);color:var(--on-accent);border-radius:14px 14px 4px 14px}
.code{background:var(--code-bg);color:var(--code-dim);border-radius:14px;padding:18px;font:13px/1.75 "IBM Plex Mono",monospace;overflow-x:auto}
.code .fn{color:var(--code-acc)} .code .ok{color:var(--code-ok)} .code .txt{color:var(--code-text)}
.tg{background:var(--panel);border:1px solid var(--line);border-radius:18px 18px 18px 6px;padding:18px}
hr.sep{border:0;border-top:1px solid var(--line);margin:34px 0}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 18px;font-size:14px;margin:0}
.kv dt{color:var(--dim)} .kv dd{margin:0}
.price{font:400 40px/1 "Instrument Serif",Georgia,serif}
.digits{font:500 24px "IBM Plex Mono",monospace;letter-spacing:.2em;text-align:center}
@media(max-width:560px){h1{font-size:36px}.wrap{padding:30px 16px 80px}header.app .in{padding:12px 16px}.card{padding:18px}}

/* ── added for the live site ──────────────────────────────────────────── */
[hidden]{display:none !important}
.logo{color:var(--text)} .logo:hover{text-decoration:none}
.who-am-i{display:flex;align-items:center;gap:10px}
.who-am-i form{margin:0}
.linkbtn{background:none;border:0;padding:0;font:inherit;font-size:14px;color:var(--dim);cursor:pointer}
.linkbtn:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.alert{padding:12px 16px;border-radius:12px;font-size:14px;margin:0 0 18px;border:1px solid var(--red-line);background:var(--red-soft);color:var(--red)}
.alert.ok{border-color:var(--green-line);background:var(--green-soft);color:var(--green)}
.alert.info{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent-ink)}
.loading{color:var(--faint);font-size:14px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.tabs button{font:inherit;cursor:pointer}
.code{white-space:pre-wrap;word-break:break-all;color:var(--code-text)}
footer.site{max-width:1060px;margin:0 auto;padding:0 20px 40px;color:var(--faint);font-size:14px}
@media(max-width:560px){footer.site{padding:0 16px 32px}}

/* ── footer, and the two legal pages (#10) ───────────────────────────── */
footer.app{max-width:1060px;margin:0 auto;padding:24px 20px 40px;border-top:1px solid var(--line);font-size:13px;color:var(--faint)}
footer.app a{color:var(--dim)}
.legal h1{font-size:40px}
.legal ul{padding-left:1.2em}
.legal li{margin:6px 0}
.legal table{margin:8px 0 18px}

/* ── arriving (#39): the checklist, the Ready line, the set-up page ──── */
/* the checklist: a numbered rail, one row per thing that must be true */
.ck{list-style:none;margin:0;padding:0}
.ck > li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:0 16px;position:relative;padding:0 0 22px}
.ck > li:last-child{padding-bottom:0}
.ck > li::before{content:"";position:absolute;left:17px;top:36px;bottom:0;width:2px;background:var(--line)}
.ck > li:last-child::before{display:none}
.ck > li.done::before{background:var(--green-line)}
.ck .n{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:14px;
  border:1.5px solid var(--line);background:var(--panel);color:var(--faint);position:relative;z-index:1}
.ck li.next .n{border-color:var(--accent);background:var(--accent);color:var(--on-accent);box-shadow:0 0 0 6px var(--accent-soft)}
.ck li.done .n{border-color:var(--green-line);background:var(--green-soft);color:var(--green)}
.ck li.bad .n{border-color:var(--red-line);background:var(--red-soft);color:var(--red)}
.ck .body{min-width:0;padding-top:6px}
.ck .t{font-weight:600;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.ck .d{font-size:14px;color:var(--dim);margin-top:2px}
.ck li.done .t{font-weight:500;color:var(--dim)}
.ck .act{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px}
.tag{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}

/* the Ready line: the whole checklist, shrunk once everything needed is green */
.ready{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:14px 18px;border-radius:99px;
  background:var(--panel);border:1px solid var(--green-line);box-shadow:var(--shadow)}
.ready .dot{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px var(--green-soft);flex:none}
.ready .sep{color:var(--line)}
@media (max-width:620px){.ready{border-radius:18px}.ready .sep{display:none}}

/* the front page: the same list, empty, read before signing in */
.preview-ck{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:860px){.preview-ck{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.preview-ck{grid-template-columns:minmax(0,1fr)}}
.preview-ck .card{padding:20px}
.preview-ck > .card + .card{margin-top:0}
.preview-ck .n{font:400 40px/1 "Instrument Serif",Georgia,serif;color:var(--accent-ink)}

/* the set-up page: one question per screen, nothing else on it (2026-10-03).
   The whole site appears only once the number is proved and an assistant connected. */
.quiet{min-height:100vh;display:flex;flex-direction:column}
.quiet .top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 28px}
.quiet .top .right{display:flex;align-items:center;gap:18px;font-size:14px}
.quiet .top .right a{color:var(--faint)}
.dots{display:flex;gap:6px}
.dots i{width:28px;height:4px;border-radius:4px;background:var(--line);transition:background .3s}
.dots i.on{background:var(--accent)}
.stage{flex:1;display:grid;place-items:center;padding:20px 16px 80px}
.q1{width:100%;max-width:460px;animation:rise .45s cubic-bezier(.2,.7,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.q1 .stepno{font-size:13px;color:var(--faint);letter-spacing:.04em;text-transform:uppercase;margin-bottom:14px}
.q1 h1{font-size:44px;line-height:1.04;margin:0 0 12px}
.q1 .sub{color:var(--dim);font-size:17px;margin:0 0 32px}
.q1 .alert{margin:0 0 16px}
.q1 .btn.big{width:100%;min-height:54px;font-size:16px;border-radius:14px}
.q1 .fine{font-size:13px;color:var(--faint);margin:14px 2px 0}
.q1 .back{background:none;border:0;color:var(--faint);font:inherit;font-size:14px;padding:0;margin-top:26px;cursor:pointer}
.q1 .back:hover{color:var(--text)}
.bigfield{display:flex;align-items:center;background:var(--panel);border:1.5px solid var(--line);border-radius:14px;box-shadow:var(--shadow);margin-bottom:14px}
.bigfield:focus-within{border-color:var(--accent)}
.bigfield select{border:0;background:none;font:inherit;font-size:18px;padding:16px 4px 16px 16px;color:var(--text);outline:0;max-width:42%}
.bigfield input{flex:1;min-width:0;border:0;background:none;font:500 22px "Schibsted Grotesk",sans-serif;padding:16px 16px 16px 6px;color:var(--text);outline:0}
.boxes{display:flex;gap:8px;margin:4px 0 18px}
.boxes input{width:100%;min-width:0;aspect-ratio:.82;text-align:center;font:500 30px "IBM Plex Mono",monospace;border:1.5px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);box-shadow:var(--shadow);outline:0;padding:0}
.boxes input:focus{border-color:var(--accent)}
.boxes.ok input{border-color:var(--green);background:var(--green-soft)}
.boxes.no{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.ringing{display:flex;align-items:center;gap:14px;background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:14px;padding:14px 16px;margin-bottom:26px;font-size:15px}
.pulse{position:relative;width:12px;height:12px;flex:none;border-radius:50%;background:var(--accent)}
.pulse::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--accent);animation:ping 1.4s ease-out infinite}
@keyframes ping{from{transform:scale(.5);opacity:1}to{transform:scale(1.6);opacity:0}}
.pick{display:grid;gap:10px}
.pick button{display:flex;align-items:center;gap:16px;text-align:left;width:100%;background:var(--panel);border:1.5px solid var(--line);border-radius:16px;padding:18px;color:var(--text);box-shadow:var(--shadow);font:inherit;cursor:pointer}
.pick button:hover{border-color:var(--accent)}
.pick b{display:block;font-size:17px}
.pick .d{color:var(--dim);font-size:14px}
.pick .chev{margin-left:auto;color:var(--faint);font-size:20px}
.tile{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-weight:700;font-size:19px;flex:none}
.tile.claude{background:#D97757;color:#fff}
.tile.codex,.tile.grok{background:#111;color:#fff;border:1px solid #333}
.q1 .more{background:none;border:0;color:var(--dim);font:inherit;font-size:14px;margin-top:8px;padding:6px 0;cursor:pointer;text-align:left}
.term{background:var(--code-bg);color:var(--code-text);border-radius:12px;padding:14px 64px 14px 16px;font:13px/1.7 "IBM Plex Mono",monospace;position:relative;margin-bottom:12px;overflow-x:auto;white-space:pre}
.term .p{color:var(--code-acc)}
.term button{position:absolute;top:10px;right:10px;background:#2A2B36;color:#fff;border:0;border-radius:8px;padding:4px 10px;font-size:12px;cursor:pointer}
.how{counter-reset:s;list-style:none;padding:0;margin:0 0 24px;display:grid;gap:14px}
.how li{counter-increment:s;display:grid;grid-template-columns:28px 1fr;gap:10px;font-size:15px;color:var(--dim)}
.how li::before{content:counter(s);width:24px;height:24px;border-radius:50%;background:var(--panel2);display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--text)}
.how b{color:var(--text)}
.waiting{display:flex;align-items:center;gap:12px;color:var(--dim);font-size:15px;padding:14px 4px}
.spin{width:16px;height:16px;flex:none;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.sayit{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px 22px;box-shadow:var(--shadow);margin-bottom:12px}
.sayit .who{font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.sayit p{font:italic 400 26px/1.2 "Instrument Serif",Georgia,serif;margin:0}
.bigcheck{width:64px;height:64px;border-radius:50%;background:var(--green-soft);color:var(--green);display:grid;place-items:center;font-size:30px;margin-bottom:22px;animation:pop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.q1 details{font-size:14px;color:var(--dim);margin-top:4px}
.q1 details summary{cursor:pointer;color:var(--faint)}
@media (max-width:520px){.q1 h1{font-size:36px}.quiet .top{padding:18px 16px}.dots i{width:18px}}
/* Pictures and files that went with a question or message (#54) */
.files{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;align-items:center}
.files .thumb{display:block;width:72px;height:72px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--sunk)}
.files .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.files .file{display:inline-block;padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:var(--sunk);text-decoration:none;max-width:100%;overflow-wrap:anywhere}
.files .file.gone{border-style:dashed}
.files.big .thumb{width:160px;height:160px}