/*
 * One stylesheet.
 *
 * Black ground, one ink, one accent, and a chat that looks like a chat. The
 * point of this screen is the conversation in it, so nothing else on the page
 * asks to be looked at: no cards, no shadows, no panels around things that are
 * already separated by space.
 *
 * English only, so there is no reading direction to switch.
 */
/*
 * One structure, five skins.
 *
 * The layout never moves — a bar, a thread, a box at the bottom — and the only
 * thing a lab changes is the tokens below: the ground, the ink, the shape of a
 * bubble, how round the box is, the one accent. No logo, no name, no wordmark;
 * the form is the whole of the resemblance, drawn by hand from each app rather
 * than fetched from anywhere. The default is OpenAI; the account's chosen lab
 * puts its name in data-lab on <html> and the block for it takes over.
 *
 * The content policy admits no outside fonts, so type is system stacks only —
 * a rounded one reads as one app, a serif as another, and the rest is colour
 * and radius.
 */
:root, :root[data-lab="openai"] {
  /* OpenAI · ChatGPT: charcoal ground, a grey user bubble, a quiet green. */
  --bg: #212121;
  --panel: #2f2f2f;
  --ink: #ececec;
  --dim: rgba(236, 236, 236, 0.64);
  --faint: rgba(236, 236, 236, 0.40);
  --line: rgba(236, 236, 236, 0.16);
  --hair: rgba(236, 236, 236, 0.08);
  --hover: rgba(236, 236, 236, 0.08);
  --them: #2f2f2f;
  --user-ink: #ececec;
  --edge: #19c37d;
  --warn: #ff8f6b;
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --r-bubble: 18px;
  --r-input: 26px;
  --r-btn: 10px;
  --r-card: 14px;
}

:root[data-lab="anthropic"] {
  /* Anthropic · Claude: warm dark paper, a serif voice, coral. */
  --bg: #262624;
  --panel: #30302c;
  --ink: #f4f3ee;
  --dim: rgba(244, 243, 238, 0.64);
  --faint: rgba(244, 243, 238, 0.42);
  --line: rgba(244, 243, 238, 0.16);
  --hair: rgba(244, 243, 238, 0.08);
  --hover: rgba(217, 119, 87, 0.12);
  --them: #3b3a33;
  --user-ink: #f4f3ee;
  --edge: #d97757;
  --warn: #cc785c;
  --sans: ui-serif, "Iowan Old Style", Palatino, Georgia, serif;
  --r-bubble: 14px;
  --r-input: 16px;
  --r-btn: 10px;
  --r-card: 12px;
}

:root[data-lab="google"] {
  /* Google · Gemini: cool dark, a rounded hand, blue, and a pill of an input. */
  --bg: #1e1f20;
  --panel: #2c2e30;
  --ink: #e3e3e3;
  --dim: rgba(227, 227, 227, 0.64);
  --faint: rgba(227, 227, 227, 0.42);
  --line: rgba(227, 227, 227, 0.16);
  --hair: rgba(227, 227, 227, 0.08);
  --hover: rgba(168, 199, 250, 0.14);
  --them: #333639;
  --user-ink: #e3e3e3;
  --edge: #a8c7fa;
  --warn: #f0a58a;
  --sans: ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
  --r-bubble: 20px;
  --r-input: 999px;
  --r-btn: 999px;
  --r-card: 16px;
}

:root[data-lab="x-ai"] {
  /* xAI · Grok: pure black and white, almost no colour, tight corners. */
  --bg: #000000;
  --panel: #101010;
  --ink: #ffffff;
  --dim: rgba(255, 255, 255, 0.60);
  --faint: rgba(255, 255, 255, 0.38);
  --line: rgba(255, 255, 255, 0.16);
  --hair: rgba(255, 255, 255, 0.08);
  --hover: rgba(255, 255, 255, 0.08);
  --them: #1a1a1a;
  --user-ink: #ffffff;
  --edge: #e6e6e6;
  --warn: #ff8f6b;
  --sans: ui-sans-serif, "Inter", "Helvetica Neue", Arial, sans-serif;
  --r-bubble: 8px;
  --r-input: 12px;
  --r-btn: 8px;
  --r-card: 8px;
}

:root[data-lab="deepseek"] {
  /* DeepSeek: deep-blue ink, and the user's turn in a blue bubble. */
  --bg: #1f2130;
  --panel: #2a2d40;
  --ink: #e8eaf3;
  --dim: rgba(232, 234, 243, 0.64);
  --faint: rgba(232, 234, 243, 0.42);
  --line: rgba(232, 234, 243, 0.16);
  --hair: rgba(232, 234, 243, 0.08);
  --hover: rgba(77, 107, 254, 0.16);
  --them: #4d6bfe;
  --user-ink: #ffffff;
  --edge: #6d86ff;
  --warn: #ff8f6b;
  --sans: ui-sans-serif, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --r-bubble: 16px;
  --r-input: 22px;
  --r-btn: 10px;
  --r-card: 12px;
}

* { box-sizing: border-box; }

/* Any rule that sets `display` beats the hidden attribute's UA style, which is
   how the header shipped showing the name and the field to rename it at once. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  height: 100%;
}

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}



a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
a:hover { border-bottom-color: var(--edge); }
h1, h2 { font-weight: 500; letter-spacing: -0.02em; margin: 0; }

button, .btn {
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  padding: 10px 16px;
  cursor: pointer;
}
button:hover, .btn:hover { border-color: var(--faint); }
.btn { display: inline-block; border-bottom: 1px solid var(--line); }
.danger:hover { border-color: var(--warn); color: var(--warn); }
:focus-visible { outline: 2px solid var(--edge); outline-offset: 2px; }

/* ── the Google restore link, and the charge ───────────────────── */
.google {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 15px;
}
.google .g {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ink);
  color: #000;
  font-weight: 700;
  font-size: 13px;
}

.charge {
  border-radius: 999px;
  padding: 14px 30px;
  font-size: 16px;
  border-color: var(--faint);
}
.charge:hover { border-color: var(--ink); }

/* ── the desk ──────────────────────────────────────────────────── */
/*
 * The shape of every chat anybody already uses: a bar, a thread that scrolls,
 * and a box pinned to the bottom. It was a form down the page before, and a
 * form is a thing you are made to fill in rather than a thing you are talking
 * to — which is what this is.
 *
 * `dvh` rather than `vh`, because on a phone the browser's own chrome slides
 * away as you scroll and `vh` does not notice; the box would sit under the
 * address bar for the first gesture of every session.
 */
body.in { overflow: hidden; }
/* The company site: white, scrolls top to bottom. */
body.site { overflow-y: auto; height: auto; min-height: 100%; background: #ffffff; color: #0a0a0a; }

.desk {
  height: 100dvh;
  max-width: 740px;
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* ── the bar ───────────────────────────────────────────────────── */
/*
 * What is left, in the middle, where every tool of this shape puts the thing
 * you press for whatever is not on the screen. A way to start again on the
 * right. Nothing on the left: a button nobody needs is a button everybody has
 * to read past.
 */
.bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 10px 0;
}
.bar .pill { grid-column: 2; }
.bar .ghost { grid-column: 3; justify-self: end; }

.pill {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 14px;
  line-height: 1.3;
}
.pill:hover { color: var(--ink); border-color: var(--faint); }

/* An icon and its hit area, and nothing drawn around it. */
.ghost {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  color: var(--dim);
  background: transparent;
}
.ghost:hover { color: var(--ink); background: var(--hover); }

/* ── the thread ────────────────────────────────────────────────── */
.thread {
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 8px 0 16px;
}

/* Nothing said yet: one line, in the middle of the screen. */
.desk[data-empty] .thread { justify-content: center; align-items: center; }
.desk[data-empty] .tagline { font-size: 25px; letter-spacing: -0.02em; margin: 0; }

.msg {
  margin: 0;
  max-width: 78%;
  font-size: 15px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* Yours, in a pill on the right. Its answer, plain on the left. */
.msg.me {
  align-self: flex-end;
  background: var(--them);
  color: var(--user-ink);
  border-radius: var(--r-bubble);
  padding: 10px 15px;
}
.msg.it { align-self: flex-start; color: var(--dim); max-width: 100%; }
.msg.it.warn { color: var(--warn); }
/* A sent screenshot: shown in the pill, capped so it never runs the thread wide. */
.msg.me .shot { display: block; max-width: 260px; max-height: 320px; border-radius: 10px; }
.msg.me:has(.shot) { padding: 6px; }

/* ── the dock ──────────────────────────────────────────────────── */
.dock {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
  background: var(--bg);
}
.rest { display: contents; }

/*
 * The four, as one line above the box.
 *
 * Not a list down the page: a strip, the way a status line works, because by
 * now they are something you glance at between sentences rather than something
 * you read. What each means is one tap away, one at a time.
 */
.strip {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 4px;
  align-items: baseline;
  /* Four names and a chosen method is more than a narrow screen holds on one
     line, so it wraps rather than pushing the page sideways. */
  max-width: 100%;
}
.bit {
  font: inherit;
  font-size: 12px;
  color: var(--faint);
  background: transparent;
  border: 0;
  border-radius: var(--r-btn);
  padding: 3px 6px;
  cursor: pointer;
}
.bit:hover { color: var(--ink); background: var(--hover); }
.bit.done { color: var(--dim); }
.bit .tick { margin-right: 5px; font-variant-numeric: tabular-nums; }
.bit.done .tick { color: var(--edge); }
.bit .how { margin-left: 6px; color: var(--edge); }
/* Between them, so the strip reads as one line rather than four buttons. */
.bit + .bit { position: relative; }
.bit + .bit::before { content: "·"; position: absolute; left: -5px; color: var(--hair); }

/* What the machine will actually compare. Under the strip, in its own face. */
.judge {
  margin: 0;
  padding: 0 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--edge);
  font-variant-numeric: tabular-nums;
}
.judge.unread { color: var(--warn); }

/* Only after somebody asks, and only one of them at a time. */
.why { margin: 0; padding: 0 6px; font-size: 12px; color: var(--faint); line-height: 1.5; }

/*
 * While it is running: what it is doing, what it has cost, and a way out.
 * Never how many attacks, never which model — that is the receipt, and the
 * receipt is the part worth nothing.
 */
.live {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 6px;
  font-size: 12px;
  color: var(--dim);
}
.live .doing { color: var(--ink); }
.live .spent { font-variant-numeric: tabular-nums; }
.live .label { color: var(--faint); }
.quiet { padding: 4px 10px; font-size: 12px; border-radius: 8px; color: var(--dim); }
.quiet:hover { color: var(--ink); }

/* ── the stage: the question, centred, then the paper in its place ── */
.stage {
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 0;
  padding: 8px 0 16px;
}
.stage > * { min-width: 0; max-width: 100%; }
.ask {
  margin: 0 0 22px;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-align: center;
  text-wrap: balance;
}
.paper-wrap { width: 100%; }

/* ── the input: one box, the shape of a search field ──────────────── */
.search {
  width: 100%;
  max-width: 620px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 4px 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.search:focus-within { border-color: var(--edge); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22); }
.search[hidden] { display: none; }
.query {
  flex: 1 1 auto;
  min-width: 0;
  resize: none;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  padding: 7px 14px;
  max-height: 320px;
  overflow-y: auto;
}
.query::placeholder { color: var(--faint); }

/* Not researchable: a quiet line and two example questions that fill the box. */
.nudge { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin: 16px 0 0; max-width: 560px; }
.nudge[hidden] { display: none; }
.nudge .line { width: 100%; text-align: center; font-size: 14px; color: var(--dim); }
.nudge .eg {
  font: inherit;
  font-size: 13px;
  padding: 7px 14px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.nudge .eg:hover { border-color: var(--edge); }

/* The free-papers-left note under the box, quiet. */
.freeline { margin: 14px 0 0; font-size: 13px; color: var(--dim); }
.freeline[hidden] { display: none; }

/* The one line under an answer that failed on our side: no badge, plain. */
.fail {
  margin: 0;
  padding: 0 6px;
  font-size: 13px;
  color: var(--dim);
  text-align: center;
}

/* ── the one action, and the lab it runs with ─────────────────────── */
.controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.go {
  min-width: 0;
  max-width: 100%;
  padding: 12px 26px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  border: 0;
  border-radius: 999px;
  color: #000;
  background: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.go:hover { background: #fff; }
.go:disabled { opacity: 0.5; }

/* ── the company site: white, Palantir-style; thin rules and whitespace ── */
.site { min-height: 100dvh; padding-bottom: 72px; }
.site-head { max-width: 940px; margin: 0 auto; padding: 16px 20px 8px; }
.mark { font-weight: 700; font-size: 15px; letter-spacing: 0.06em; color: #0a0a0a; border: 0; }
.mark .region { color: rgba(10, 10, 10, 0.45); font-weight: 500; letter-spacing: 0.02em; }

/* The product row: the products, then one underlined line to the product page. */
.hero-b { max-width: 940px; margin: 0 auto; padding: 20px 20px 48px; }
.hero-prod { margin: 0 0 20px; font-size: 14px; letter-spacing: 0.02em; color: rgba(10, 10, 10, 0.55); }
.hero-head { max-width: 780px; font-size: 34px; font-weight: 700; line-height: 1.18; letter-spacing: -0.02em; color: #0a0a0a; margin: 0 0 28px; text-wrap: balance; }
.hero-body { max-width: 560px; margin-left: auto; }
.hero-body p { margin: 0 0 16px; font-size: 16px; line-height: 1.65; color: rgba(10, 10, 10, 0.72); }
.hero-more { display: inline-block; margin-top: 6px; font-size: 15px; color: #0a0a0a; border-bottom: 1px solid rgba(0, 0, 0, 0.4); }
.hero-more:hover { border-bottom-color: #0a0a0a; }
.prepline { margin: 6px 0 0; font-size: 13px; color: rgba(10, 10, 10, 0.5); }

/* The industries list: two columns, in the given order. */
.industries { max-width: 940px; margin: 0 auto; padding: 48px 20px; }
.ind-h { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: #0a0a0a; margin: 0 0 20px; }
.ind-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 20px; }
.ind-list li { font-size: 15px; line-height: 1.35; color: rgba(10, 10, 10, 0.78); min-width: 0; }

/* How it works: a small heading, then four numbered lines. */
.how { max-width: 940px; margin: 0 auto; padding: 48px 20px; }
.how-h { font-size: 14px; letter-spacing: 0.04em; font-weight: 600; color: rgba(10, 10, 10, 0.55); margin: 0 0 22px; }
.how-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.how-list li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: baseline; min-width: 0; }
.how-n { font-size: 13px; color: rgba(10, 10, 10, 0.4); font-variant-numeric: tabular-nums; }
.how-line { font-size: 16px; line-height: 1.5; color: rgba(10, 10, 10, 0.82); }

/* The C entry, near the top — not floated in the centre. */
.entry { max-width: 940px; margin: 0 auto; padding: 36px 20px; }
.entry > * { max-width: 620px; }
.entry-h { font-size: 20px; font-weight: 700; letter-spacing: 0.05em; color: #0a0a0a; margin: 0 0 16px; }
.rule { border: 0; border-top: 1px solid rgba(0, 0, 0, 0.14); max-width: 940px; margin: 0 auto; }

.soon-tag { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(10, 10, 10, 0.4); }
.sec-p { margin: 0 0 10px; max-width: 620px; font-size: 16px; line-height: 1.65; color: rgba(10, 10, 10, 0.72); }

/* The B block: Talk to STK (the "request a demo" place). */
.talk { max-width: 940px; margin: 0 auto; padding: 56px 20px; }
.talk-h { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: #0a0a0a; margin: 0 0 12px; }
.talk-line { margin: 0 0 22px; font-size: 16px; color: rgba(10, 10, 10, 0.6); }
.talk-btn { display: inline-block; font-size: 15px; color: #0a0a0a; border: 1px solid rgba(0, 0, 0, 0.4); padding: 12px 22px; }
.talk-btn:hover { border-color: #0a0a0a; }

/* The footer: a small grey category label, then its items. */
.site-foot { max-width: 940px; margin: 0 auto; padding: 24px 20px; border-top: 1px solid rgba(0, 0, 0, 0.14); }
.foot-row { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.foot-cat { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(10, 10, 10, 0.4); }
.foot-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.foot-item { font-size: 15px; color: rgba(10, 10, 10, 0.78); border: 0; }
a.foot-item:hover { color: #0a0a0a; text-decoration: underline; }
.foot-base { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-top: 20px; font-size: 12px; color: rgba(10, 10, 10, 0.45); }
.foot-copy { margin: 0; }
.foot-legal { color: rgba(10, 10, 10, 0.45); border: 0; }
.foot-legal:hover { color: #0a0a0a; }
.foot-lang { letter-spacing: 0.06em; }
.foot-x { display: grid; place-items: center; width: 30px; height: 30px; margin-left: auto; border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 999px; color: #0a0a0a; font-size: 13px; }
.foot-x:hover { border-color: #0a0a0a; }

/* The fixed bottom bar: ☰ left, Contact right, on a thin top rule. */
.bar-fixed { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: space-between; background: #fff; border-top: 1px solid rgba(0, 0, 0, 0.16); }
.bar-sq { display: grid; place-items: center; min-width: 56px; height: 52px; padding: 0 18px; border: 0; background: transparent; color: #0a0a0a; font-size: 14px; cursor: pointer; }
.bar-contact { border-left: 1px solid rgba(0, 0, 0, 0.12); }

/* The input and its in-place progress, on white. */
.site .search { background: #fff; border: 1px solid rgba(0, 0, 0, 0.24); border-radius: 6px; box-shadow: none; max-width: 620px; }
.site .search:focus-within { border-color: #0a0a0a; box-shadow: none; }
.site .query { color: #0a0a0a; }
.site .query::placeholder { color: rgba(10, 10, 10, 0.42); }
.site .checkbtn { flex: 0 0 auto; font: inherit; font-size: 15px; color: #fff; background: #0a0a0a; border: 0; border-radius: 5px; padding: 9px 20px; cursor: pointer; }
.site .checkbtn:hover { background: #333; }
.site .checkbtn[data-busy] { opacity: 0.55; }
.site .perline { margin: 8px 0 0; text-align: left; font-size: 13px; color: rgba(10, 10, 10, 0.5); font-variant-numeric: tabular-nums; }
.site .perline[hidden] { display: none; }
/* the three-line result: verdict, reason, one source */
/* The bare home: input, Check, count centred in the viewport; then a result
   that is one word. Nothing else on the screen. */
.home-bare { display: flex; flex-direction: column; min-height: 100dvh; }
.home-bare .entry { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: stretch; width: 100%; max-width: 600px; margin: 0 auto; padding: 0 20px 90px; }
.home-bare .search { margin: 0 auto; }
.home-bare .perline { text-align: center; }

.result { margin: 40px 0 0; text-align: center; }
.result[hidden] { display: none; }
.result .verdict { display: block; margin: 0 auto; font: inherit; background: none; border: 0; padding: 0; cursor: pointer; font-size: 54px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.result .v-confirmed { color: #0a7d33; }
.result .v-broken { color: #b00020; }
.result .v-pending { color: #9a6b00; }
.result .v-undecidable { color: rgba(10, 10, 10, 0.5); }
.result .source { display: inline-block; margin-top: 18px; font-size: 13px; color: rgba(10, 10, 10, 0.6); border-bottom: 1px solid rgba(0, 0, 0, 0.3); }
.result .source:hover { color: #0a0a0a; border-bottom-color: #0a0a0a; }
.result .reason { margin: 16px auto 0; max-width: 520px; font-size: 15px; line-height: 1.5; color: rgba(10, 10, 10, 0.72); }
.result .reason[hidden] { display: none; }
.site .doing, .site .spent, .site .live .label { color: rgba(10, 10, 10, 0.72); }
.site .live .btn { color: #0a0a0a; border-color: rgba(0, 0, 0, 0.24); }
.site .fail { color: #b00020; }
.site .nudge .line { color: rgba(10, 10, 10, 0.72); }
.site .nudge .eg { color: #0a0a0a; border-color: rgba(0, 0, 0, 0.2); }

/* ── the ☰ menu: a two-column table (category | items), white ──────── */
.menu-scrim { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.28); }
.menu-scrim[hidden] { display: none; }
.menu {
  display: none; position: fixed; top: 0; right: 0; z-index: 50;
  width: min(420px, 94vw); height: 100dvh; overflow-y: auto; overflow-x: hidden;
  padding: 52px 22px max(72px, env(safe-area-inset-bottom));
  background: #ffffff; color: #0a0a0a; border-left: 1px solid rgba(0, 0, 0, 0.14);
}
.menu[data-open] { display: block; }
.menu-close { position: absolute; top: 12px; right: 14px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; background: transparent; color: #0a0a0a; cursor: pointer; }
.menu-grid { display: flex; flex-direction: column; }
.menu-row { display: grid; grid-template-columns: 84px 1fr; gap: 14px; padding: 16px 0; border-top: 1px solid rgba(0, 0, 0, 0.12); }
.menu-cat { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(10, 10, 10, 0.4); padding-top: 4px; }
.menu-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.menu-item { display: inline-flex; align-items: baseline; gap: 8px; padding: 5px 0; font-size: 15px; color: #0a0a0a; border: 0; }
a.menu-item:hover { text-decoration: underline; }
.menu-item.is-soon { color: rgba(10, 10, 10, 0.38); }

/* The Account column: the working controls, kept small — half the padding. */
.menu-col.acct .set-item { max-width: none; margin: 0 0 12px; gap: 4px; }
.menu-col.acct .label { font-size: 11px; letter-spacing: 0.06em; color: rgba(10, 10, 10, 0.5); }
.menu-col.acct .amount { font-size: 16px; font-variant-numeric: tabular-nums; color: #0a0a0a; }
.menu-col.acct .charges { display: flex; gap: 6px; flex-wrap: wrap; }
.menu-col.acct .charge { border-color: rgba(0, 0, 0, 0.3); color: #0a0a0a; padding: 5px 12px; font-size: 12px; border-radius: 999px; }
.menu-col.acct .houses { display: flex; gap: 5px; flex-wrap: wrap; }
.menu-col.acct .house { color: rgba(10, 10, 10, 0.7); border-color: rgba(0, 0, 0, 0.2); padding: 4px 7px; font-size: 11px; }
.menu-col.acct .house.on, .menu-col.acct .house:has(input:checked) { border-color: #0a0a0a; color: #0a0a0a; }
.menu-col.acct input[type="text"] { border-color: rgba(0, 0, 0, 0.24); color: #0a0a0a; padding: 6px 10px; font-size: 13px; }
.menu-col.acct .restore { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.menu-col.acct .restore input { flex: 1 1 100%; min-width: 0; width: 100%; }
.menu-col.acct .btn { color: #0a0a0a; border-color: rgba(0, 0, 0, 0.24); padding: 6px 12px; font-size: 13px; }
.menu-col.acct .google { border-color: rgba(0, 0, 0, 0.24); color: #0a0a0a; margin-top: 8px; padding: 7px 14px; font-size: 13px; }
.menu-col.acct .google .g { background: #0a0a0a; color: #fff; }

/* ── the ORDER product page ───────────────────────────────────────── */
/* ── the /about page ──────────────────────────────────────────────── */
/* Why STK — a single narrow reading column on black. */
.why { max-width: 620px; margin: 0 auto; padding: 20px 20px 60px; }
.why-h { font-size: 22px; font-weight: 700; letter-spacing: 0.02em; color: #fff; margin: 0 0 40px; }
.why-p { font-size: 18px; line-height: 1.6; color: rgba(242, 242, 242, 0.86); margin: 0 0 28px; }
.why-sub { font-size: 14px; font-weight: 700; color: #fff; margin: 44px 0 14px; }
.why-not { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.why-contact { margin: 44px 0 0; }
.why-contact a { font-size: 16px; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.5); }
.why-contact a:hover { border-bottom-color: #fff; }

/* About: the founder line and the two profile links. */
.ab-links { margin: 36px 0 0; display: flex; gap: 22px; }
.ab-link { font-size: 16px; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.5); }
.ab-link:hover { border-bottom-color: #fff; }

/* ── the company home: the two products, white, thin rules ────────── */
.head-contact { font-size: 13px; color: #0a0a0a; border-bottom: 1px solid rgba(0, 0, 0, 0.4); }
.order-dark .head-contact { color: #f2f2f2; border-bottom-color: rgba(255, 255, 255, 0.4); }
.lead { max-width: 940px; margin: 0 auto; padding: 56px 20px 44px; }
.lead-h { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 16px; color: #0a0a0a; text-wrap: balance; }
.lead-sub { font-size: 18px; color: rgba(10, 10, 10, 0.6); margin: 0; }
.lead-two { margin: 22px 0 0; font-size: 15px; line-height: 1.7; font-weight: 400; color: rgba(10, 10, 10, 0.55); }
.prep-tag { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(10, 10, 10, 0.4); margin-left: 10px; }
.ind-line { margin: 0 0 22px; font-size: 16px; color: rgba(10, 10, 10, 0.6); }
.g-prep { margin: -10px 0 22px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(242, 242, 242, 0.5); }
select.f-in { -webkit-appearance: none; appearance: none; }
.prod { max-width: 940px; margin: 0 auto; padding: 48px 20px; }
.prod-name { font-size: 14px; letter-spacing: 0.04em; color: rgba(10, 10, 10, 0.55); margin: 0 0 16px; }
.prod-head { font-size: 28px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 18px; color: #0a0a0a; max-width: 720px; text-wrap: balance; }
.prod-body { font-size: 16px; line-height: 1.65; color: rgba(10, 10, 10, 0.72); max-width: 620px; margin: 0 0 20px; }
.prod-more, .whylink a { display: inline-block; font-size: 15px; color: #0a0a0a; border-bottom: 1px solid rgba(0, 0, 0, 0.4); }
.prod-more:hover, .whylink a:hover { border-bottom-color: #0a0a0a; }
.whylink { max-width: 940px; margin: 0 auto; padding: 40px 20px; }

/* The creed line, above the footer. */
.creed { max-width: 940px; margin: 0 auto; padding: 40px 20px; }
.creed-line { margin: 0; font-size: 18px; line-height: 1.5; color: #0a0a0a; max-width: 620px; }

/* the /contact form on the dark ground */
.contact { max-width: 620px; }
.contact .fform { margin-top: 24px; }
.c-thanks { margin: 24px 0 0; font-size: 17px; color: rgba(242, 242, 242, 0.86); }

/* ── the /order product page: Palantir Gotham, black ground ───────── */
body.order-dark { background: #0a0a0a; color: #f2f2f2; }
.order-dark { background: #0a0a0a; color: #f2f2f2; }
.order-dark .mark { color: #f2f2f2; }
.order-dark .mark .region { color: rgba(242, 242, 242, 0.5); }
.order-dark .rule { border-top-color: rgba(255, 255, 255, 0.16); }
.gotham { max-width: 860px; margin: 0 auto; padding: 24px 20px 60px; }
.g-title { font-size: 22px; font-weight: 700; letter-spacing: 0.06em; margin: 0 0 20px; color: #fff; }
.g-tag { max-width: 620px; margin: 0 0 64px auto; font-size: 22px; line-height: 1.4; letter-spacing: -0.01em; color: #f2f2f2; }
.g-sec { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 40px 0; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.g-sec.g-solo { grid-template-columns: 1fr; }
.g-num { font-size: 13px; letter-spacing: 0.1em; color: rgba(242, 242, 242, 0.5); padding-top: 6px; }
.g-body { min-width: 0; }
.g-h { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; color: #fff; margin: 0 0 16px; text-wrap: balance; }
.g-b { max-width: 620px; font-size: 16px; line-height: 1.65; color: rgba(242, 242, 242, 0.72); margin: 0 0 16px; }
.g-body > *:last-child { margin-bottom: 0; }
.g-lede { max-width: 620px; margin: 0 0 24px auto; font-size: 18px; line-height: 1.55; color: rgba(242, 242, 242, 0.86); }
.g-cta { margin: 0 0 8px; }
.g-cta a, .g-more a { font-size: 16px; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.5); }
.g-cta a:hover, .g-more a:hover { border-bottom-color: #fff; }
.g-more { margin: 16px 0 0; }
/* labelled lines in movements 04 and 05 */
.g-def { max-width: 620px; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.g-def:first-of-type { border-top: 0; }
.g-k { display: block; font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 4px; }
.g-v { display: block; font-size: 15px; line-height: 1.6; color: rgba(242, 242, 242, 0.7); }
.g-inds { max-width: 620px; margin: 8px 0 0; font-size: 15px; line-height: 1.9; color: rgba(242, 242, 242, 0.8); }
.g-contact { margin: 48px 0 0; }
.g-contact a { font-size: 16px; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.5); }
.g-contact a:hover { border-bottom-color: #fff; }
/* the header Contact on /order, top-right */
.order-head { display: flex; align-items: center; justify-content: space-between; }
.head-contact { font-size: 13px; color: #f2f2f2; border-bottom: 1px solid rgba(255, 255, 255, 0.4); }
/* the "Get started with ORDER" form */
.g-form { max-width: 620px; margin: 56px auto 0; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.g-title2 { font-size: 22px; font-weight: 700; color: #fff; margin: 0 0 24px; }
.fform { display: grid; gap: 16px; }
.f-row { display: grid; gap: 6px; }
.f-lab { font-size: 12px; letter-spacing: 0.04em; color: rgba(242, 242, 242, 0.6); }
.f-in { font: inherit; font-size: 15px; color: #fff; background: #141414; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 4px; padding: 10px 12px; }
.f-in:focus { outline: 0; border-color: rgba(255, 255, 255, 0.6); }
.f-submit { justify-self: start; margin-top: 4px; font-size: 15px; color: #0a0a0a; background: #fff; border: 0; border-radius: 4px; padding: 11px 26px; cursor: pointer; }
.f-submit:hover { background: #e6e6e6; }
.g-fine { max-width: 620px; margin: 18px 0 0; font-size: 12px; line-height: 1.6; color: rgba(242, 242, 242, 0.45); }
.g-fine a { color: rgba(242, 242, 242, 0.6); }
/* the single Contact line above the footer on the home */
.contact-line { max-width: 940px; margin: 0 auto; padding: 40px 20px; }
/* the shared footer and fixed bar, dark, on the /order page */
.order-dark .site-foot { border-top-color: rgba(255, 255, 255, 0.16); }
.order-dark .foot-row { border-bottom-color: rgba(255, 255, 255, 0.1); }
.order-dark .foot-cat, .order-dark .foot-base, .order-dark .foot-legal, .order-dark .foot-copy { color: rgba(242, 242, 242, 0.5); }
.order-dark .foot-item { color: rgba(242, 242, 242, 0.8); }
.order-dark a.foot-item:hover, .order-dark .foot-legal:hover { color: #fff; }
.order-dark .foot-x { color: #f2f2f2; border-color: rgba(255, 255, 255, 0.3); }
.order-dark .bar-fixed { background: #0a0a0a; border-top-color: rgba(255, 255, 255, 0.18); }
.order-dark .bar-sq { color: #f2f2f2; }
.order-dark .bar-contact { border-left-color: rgba(255, 255, 255, 0.14); }
.labline {
  font: inherit;
  font-size: 13px;
  color: var(--dim);
  background: transparent;
  border: 0;
  padding: 2px 6px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.labline:hover { color: var(--ink); }

/* ── the box ───────────────────────────────────────────────────── */
.composer {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 11px 6px 11px 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-input);
  background: var(--panel);
}
.composer:focus-within { border-color: var(--faint); }

.say {
  /*
   * `width: 0` with room to grow, because a textarea carries an intrinsic
   * width from `cols` that `min-width: 0` does not undo — and on a phone that
   * intrinsic width pushed the whole box, the send button and the edit icon
   * off the right of the screen.
   */
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 0;
  /*
   * One line means one line.
   *
   * A placeholder longer than a narrow box wraps, and a wrapped placeholder in
   * a one-row textarea showed its second line sliced along the bottom edge.
   * Clipping happens at the padding box, not the content box, so any vertical
   * padding here is a window the next line shows through — it belongs to the
   * composer around it instead. The box grows by rows as you type.
   */
  padding: 0 2px;
  resize: none;
  overflow: hidden;
}
.say:focus { outline: 0; }
.say::placeholder { color: var(--faint); }
.say:disabled { color: var(--dim); }

/* Round, on the right, the way they all are. */
.send {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: #000;
  background: var(--ink);
}
.send:hover { background: #fff; }

/* The one that costs money, beside send, and absent until it can be pressed. */
.break {
  flex: none;
  padding: 8px 13px;
  font-size: 13px;
  border-radius: 999px;
  border-color: var(--edge);
  color: var(--edge);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.break:hover { background: rgba(122, 217, 255, 0.1); }

/* ── the paper ─────────────────────────────────────────────────── */
/*
 * The only thing anybody is shown, so it is the only thing on this page set in
 * a reading measure with a serif. It should look like the thing it is.
 */
.paper {
  display: flex;
  flex-direction: column;
  gap: 22px;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.7;
}
.paper-title {
  font-family: inherit;
  font-size: clamp(24px, 5vw, 34px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
.paper .part { display: grid; gap: 6px; }
.paper h2 {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}
.paper p { margin: 0; color: var(--ink); }

/* The six-line head, above the title: label and value, in the sans face. */
.paper-head {
  display: grid;
  gap: 3px;
  font-family: var(--sans);
  font-size: 13px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.paper-head .hrow { display: flex; gap: 10px; align-items: baseline; min-width: 0; }
.paper-head .hlabel {
  flex: none;
  width: 3.2em;
  color: var(--dim);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.paper-head .hval { color: var(--dim); min-width: 0; overflow-wrap: anywhere; }
.paper-head .hval.held { color: var(--edge); }
.paper-head .hval.broke { color: var(--warn); }
.paper-head .verdict-row .hval { color: var(--ink); font-weight: 600; }

/* The results table: three columns, a hairline grid, digits aligned. */
.paper .ptable {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--sans);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  display: block;
  overflow-x: auto;
}
.paper .ptable th, .paper .ptable td {
  border: 1px solid var(--line);
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
}
.paper .ptable th { color: var(--dim); font-weight: 600; }

/*
 * The verdict, said in words before the paper says it in prose.
 *
 * Three states and three colours, and the third is not a failure state: an
 * honest "nothing today can settle this" is the answer that builds the most
 * trust, so it is not painted as a problem.
 */
.verdict {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  font-family: var(--sans);
}
.verdict strong { font-weight: 500; font-size: 17px; letter-spacing: -0.01em; }
.verdict span { font-size: 13px; color: var(--dim); }
.verdict.held { border-color: rgba(122, 217, 255, 0.45); }
.verdict.held strong { color: var(--edge); }
.verdict.broke { border-color: rgba(255, 143, 107, 0.45); }
.verdict.broke strong { color: var(--warn); }
.verdict.undecidable { border-color: var(--line); }
.verdict.undecidable strong { color: var(--ink); }

.paperpage { max-width: 680px; }

/* ── the account, which is the balance and the papers ──────────── */
.settings { gap: 22px; padding-top: 28px; }

/*
 * Every paper this account has. The verdict first, because that is what
 * somebody is scanning for, and the question after it in one line.
 */
.runs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.runs li { border-bottom: 1px solid var(--hair); }
.runs a {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 12px 0;
  border: 0;
  max-width: 100%;
}
.runs a:hover .q { color: var(--ink); }
/* A small fixed badge on the left, the claim taking the rest. */
.runs .v { font-size: 12px; letter-spacing: 0.04em; flex: none; width: 6.5em; }
.runs .v.held { color: var(--edge); }
.runs .v.broke { color: var(--warn); }
.runs .v.undecidable, .runs .v.none { color: var(--faint); }
/* flex children do not shrink below their content without min-width: 0, and
   without shrinking the ellipsis never engages and the row runs off-screen. */
.runs .q { flex: 1 1 0; display: block; min-width: 0; font-size: 14px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Settings: one hub, four items, each a one-word label and its control. No
   descriptions, no save button — the lab and author write on the tap, restore
   and charge are their own submit. */
.settings-form { display: contents; }
.set-item { display: grid; gap: 8px; max-width: 420px; margin-bottom: 22px; }
.set-item .label { font-size: 12px; color: var(--faint); letter-spacing: 0.04em; text-transform: uppercase; }
.set-item input[type="text"] {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--hair);
  border-radius: var(--r-btn);
  padding: 8px 10px;
}
.set-item input[type="text"]:focus { outline: 0; border-color: var(--edge); }
.set-item .restore { display: grid; gap: 8px; }
.set-item .restore button { justify-self: start; margin-top: 4px; }
.set-item .charges { display: flex; gap: 8px; flex-wrap: wrap; }
.set-item .google { margin-top: 4px; }

/* The account's few links, in a row: my papers, settings, log out. */
.acct-links { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.acct-links a, .acct-links .linky {
  font-size: 14px;
  color: var(--dim);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.acct-links a:hover, .acct-links .linky:hover { color: var(--ink); }
.acct-links form { display: contents; }

/* ── the plain pages ───────────────────────────────────────────── */
.sheet, .prose {
  max-width: 640px;
  margin: 0 auto;
  padding: 56px 24px 80px;
  display: grid;
  gap: 18px;
  align-content: start;
}
/*
 * A grid (and flex) child's default min-width is `auto`, not 0, so a child with
 * wide content — a long claim, a table, an unbroken number — refuses to shrink
 * and pushes the whole sheet past the screen, where the text is then clipped
 * with no ellipsis. Letting every child shrink to its track is what keeps the
 * account and the board inside 390px.
 */
.sheet > *, .prose > * { min-width: 0; }
.prose { max-width: 680px; }
.sheet h1, .prose h1 { font-size: 28px; }
.sheet h2, .prose h2 {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 20px;
}
.prose p { color: var(--dim); margin: 0 0 4px; }
.acts { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.acts form { display: contents; }
label { display: block; color: var(--dim); font-size: 14px; }
label input {
  display: block;
  margin-top: 6px;
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  padding: 9px 12px;
  width: 100%;
  max-width: 320px;
}
label input:focus { outline: 0; border-color: var(--edge); }

.dim { color: var(--dim); }
.tiny { font-size: 13px; }
.warn { color: var(--warn); }

.foot {
  display: flex;
  gap: 10px;
  align-items: baseline;
  color: var(--faint);
  font-size: 13px;
  margin-top: 12px;
}
.foot a { border: 0; color: var(--faint); }
.foot a:hover { color: var(--ink); }
/* What is behind the answers, said once, small. There is no model name on
   screen and no picker, so this is the whole of it. */
.foot .tag { margin-left: auto; opacity: 0.72; }
@media (max-width: 560px) {
  .foot { flex-wrap: wrap; }
  .foot .tag { margin-left: 0; flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ── one screenful under the fold ──────────────────────────────── */
/*
 * What it is, what happens, what comes out, what it costs, and where it sits
 * beside the thing people already use. Five short blocks and nothing else: no
 * testimonials, no feature grid, no second call to action.
 */
.below {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 560px;
  margin: 72px auto 0;
  padding: 40px 0 0;
  border-top: 1px solid var(--hair);
  text-align: left;
}

.below .oneline { margin: 0; font-size: 17px; color: var(--ink); }

.steps, .outcomes, .prices {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: var(--dim);
}
/* A sequence, so it is drawn as one: three things with arrows between them. */
.steps { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.steps li + li::before { content: "→"; color: var(--faint); margin-right: 10px; }

.outcomes { display: flex; flex-wrap: wrap; gap: 10px; }
.outcomes li + li::before { content: "／"; color: var(--faint); margin-right: 10px; }
.outcomes li:first-child { color: var(--edge); }

.prices { display: flex; flex-direction: column; gap: 5px; }

/* Two words against two words. The whole positioning, and no more of it. */
.place { margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.place div { display: flex; gap: 12px; align-items: baseline; }
.place dt { width: 7ch; color: var(--faint); }
.place dd { margin: 0; color: var(--ink); }

/* ── what you can do with a paper ──────────────────────────────── */
.after { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
/* The ordinary byline under the title: author · date. */
.paper .byline { margin: -12px 0 20px; font-family: var(--sans); font-size: 13px; color: var(--dim); }
.paper .byline .dot { opacity: 0.6; }

/* The record: disclosure kept off the paper, shown below it on the page only. */
.record-block { width: 100%; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.record-block h2 { margin: 0 0 6px; font-family: var(--sans); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.record-block p { margin: 2px 0; font-size: 13px; color: var(--dim); }
.record-block b { color: var(--ink); font-weight: 600; }
.receipt { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; font-size: 12px; color: var(--dim); width: 100%; padding-bottom: 6px; }
.receipt b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.receipt .tot { margin-left: auto; }
.after .btn { font-size: 13px; padding: 8px 14px; color: var(--dim); }
.after .btn:hover { color: var(--ink); border-color: var(--faint); }

/* Hidden to the eye, kept for the screen reader and for select/copy: the paper
   text stays in the DOM once the canvas image is shown in its place. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The paper as image(s): portrait pages at reading width, stacked, on the page
   ground so the white document sits in a frame. */
.paper-images { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.paper-page {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 1px 0 var(--line), 0 8px 30px rgba(0, 0, 0, 0.28);
}

/* ── printing, which is how a paper becomes a file ─────────────── */
/*
 * Save as PDF, in the browser's own print dialogue. It is the only way to get a
 * PDF with Japanese in it without shipping a font several megabytes wide to
 * everybody who opens the page — and the browser already has the fonts.
 *
 * Everything that is not the paper comes off: the balance, the box, the
 * checklist, the button, the footer. What prints is the paper.
 */
@media print {
  .bar, .dock, .composer, .strip, .judge, .why, .live, .after, .foot, .below, .tagline, .controls, .fail { display: none !important; }
  .desk { height: auto; display: block; }
  .thread, .stage { overflow: visible; display: block; }
  .msg { display: none !important; }
  html, body { background: #fff; color: #000; }
  .desk, .sheet { padding: 0; margin: 0; max-width: none; }
  .paper { font-size: 11pt; gap: 16px; }
  .paper h2 { color: #555; }
  .paper p { color: #000; }
  .verdict { border: 1px solid #999; break-inside: avoid; }
  .verdict strong, .verdict span { color: #000 !important; }
  .part { break-inside: avoid; }
}

/*
 * What the machine is going to compare.
 *
 * Under the condition, in the same face the program is written in, because it
 * is a machine's reading and not a person's sentence. It is here so that the
 * one thing nobody could see before — which number out of the several in a
 * condition became the record — is the one thing that cannot now be missed.
 */
.judge {
  grid-column: 2 / -1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--edge);
  font-variant-numeric: tabular-nums;
}
/* Nothing readable in there, so nothing is ticked and this says why. */
.judge.unread { color: var(--warn); }

.ignored {
  grid-column: 2 / -1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

/* ── the account page's own balance ────────────────────────────── */
/*
 * The bar and the Charge button the corner used to carry. They live here now,
 * behind the pill, which is where somebody looks when they want them and
 * nowhere at all when they do not.
 */
.purse { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.purse .amount { font-size: 15px; font-variant-numeric: tabular-nums; }
.purse .charges { display: flex; gap: 8px; flex-wrap: wrap; }
.purse .charge { padding: 5px 12px; font-size: 13px; border-radius: 8px; font-variant-numeric: tabular-nums; }

/* ── the houses, in settings and nowhere else ──────────────────── */
/*
 * Five names, and never a model. What is being chosen is whose best answer a
 * claim gets put to; a version number on a screen is a thing that goes stale.
 */
.houses { display: flex; flex-wrap: wrap; gap: 8px; }
.house {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.house:hover { color: var(--ink); border-color: var(--faint); }
.house.on, .house:has(input:checked) { border-color: var(--edge); color: var(--edge); }
/* The radio is visually hidden but stays inside its pill — without inset (and
   without a positioned parent) an absolute input escapes to the far right and
   pushes past the viewport edge. */
.house input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.models .label { font-size: 12px; color: var(--faint); letter-spacing: 0.04em; }

/* The full list of labs, folded away under the five. */
.more { margin-top: 4px; }
.more summary { font-size: 12px; color: var(--faint); cursor: pointer; padding: 4px 0; }
.more summary:hover { color: var(--ink); }
.more .houses { margin-top: 8px; }

/* ── the board ─────────────────────────────────────────────────── */
.board { max-width: 820px; margin: 0 auto; padding: 32px 20px 80px; }
.board h1 { font-size: 24px; }
.board .lead { color: var(--dim); font-size: 14px; margin: 4px 0 24px; }

/* This week's numbers: a row of big figures, each with its week-on-week change. */
.weeknums { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 28px; }
.weeknums li { display: flex; flex-direction: column; gap: 1px; }
.weeknums .big { font-size: 24px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.weeknums .cap { font-size: 11px; color: var(--faint); letter-spacing: 0.04em; }
.weeknums .wow { font-size: 12px; font-weight: 500; }
.weeknums .wow.up { color: var(--edge); }
.weeknums .wow.down { color: var(--faint); }

/*
 * The board's papers, newest first, as a stack of cards at every width — one
 * item per shared paper, never a comparison table.
 */
.board .cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.board .cards li { border-bottom: 1px solid var(--hair); }
.board .cards a { display: block; padding: 12px 0; border: 0; max-width: 100%; }
.board .cards .meta { margin: 0 0 4px; font-size: 12px; font-variant-numeric: tabular-nums; }
.board .cards .q {
  margin: 0 0 4px; font-size: 14px; color: var(--ink);
  white-space: normal; overflow-wrap: anywhere; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.board .cards .v { margin: 0; font-size: 13px; white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.board .cards .v.held { color: var(--edge); }
.board .cards .v.broke { color: var(--warn); }
.board .cards .v.undecidable, .board .cards .v.none { color: var(--faint); }

.scroll { overflow-x: hidden; }
.ledger { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.ledger th { text-align: left; font-weight: 500; color: var(--faint); font-size: 11px; letter-spacing: 0.04em; padding: 6px 10px 6px 0; border-bottom: 1px solid var(--line); }
.ledger td { padding: 11px 10px 11px 0; border-bottom: 1px solid var(--hair); vertical-align: top; overflow-wrap: anywhere; }
.ledger col.c-date { width: 5.5em; }
.ledger col.c-lab { width: 5em; }
.ledger col.c-link { width: 3.5em; }
/* The question, to two lines, then an ellipsis. */
.ledger td.q { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ledger td.v { white-space: normal; }
.ledger td.v.held { color: var(--edge); }
.ledger td.v.broke { color: var(--warn); }
.ledger .dim { color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── the discovery line, under an answer ───────────────────────── */
/*
 * One line: a verdict once there is one, with the exact comparison the box
 * made beside it — because with the section card gone this is the only place a
 * person sees the basis before a paper claims a break. Or 判定不能 and a tap to
 * restate. Never appended silently; when it is here it says which it is.
 */
.disco {
  align-self: flex-start;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  max-width: 100%;
  font-size: 13px;
  padding: 2px 0 4px;
}
.disco.pending { color: var(--faint); }
.disco .tag { font-weight: 500; }
.disco .tag.held { color: var(--edge); }
.disco .tag.broke { color: var(--warn); }
.disco .tag.none, .disco .tag.undecidable { color: var(--faint); }
.disco .ce { flex-basis: 100%; min-width: 0; color: var(--dim); white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.disco .basis {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--edge);
  font-variant-numeric: tabular-nums;
}
.disco .restate, .disco .paperbtn {
  font: inherit;
  font-size: 12px;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: var(--edge);
  cursor: pointer;
}
.disco .restate:hover, .disco .paperbtn:hover { color: var(--ink); }
.disco .paperbtn { color: var(--dim); }
.disco .paperbtn[data-have] { color: var(--edge); }

/* The fold: the old checklist, behind the tap, when a claim needs restating. */
.fold { display: flex; flex-direction: column; gap: 6px; }

/* The three starters, on the empty screen only, just above the box. */
.starters { display: flex; flex-direction: column; gap: 8px; align-items: center; margin-top: 22px; }
.starter {
  font: inherit;
  font-size: 14px;
  color: var(--dim);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
}
.starter:hover { color: var(--ink); border-color: var(--faint); }

/* The 原文 toggle at the foot of a translated paper. */
.linky {
  margin-top: 14px;
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 13px;
  color: var(--faint);
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.linky:hover { color: var(--ink); border-bottom-color: var(--edge); }

/* ── the company site: white ground, black text, thin grey rules ── */
body.px { background: #ffffff; color: #0a0a0a; padding-bottom: 72px; }
html:has(body.px) { background: #ffffff; }
.px-wrap { max-width: 980px; margin: 0 auto; padding: 0 20px; }
.px a { color: inherit; text-decoration: none; border: 0; }
.px-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; border-bottom: 1px solid #e5e5e5; }
.px-mark { font-weight: 700; font-size: 16px; letter-spacing: 0.08em; color: #0a0a0a; }
.px-nav { display: flex; gap: 22px; }
.px-nav a { font-size: 14px; color: #0a0a0a; white-space: nowrap; }
.px-nav a:hover { text-decoration: underline; text-decoration-color: #0a0a0a; text-underline-offset: 4px; }
.px-menu { display: none; }
.px-burger { list-style: none; cursor: pointer; font-size: 26px; line-height: 1; padding: 2px 4px; color: #0a0a0a; user-select: none; }
.px-burger::-webkit-details-marker { display: none; }
.px-menu-panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 40; min-height: calc(100vh - 62px); background: #ffffff; border-top: 1px solid #e5e5e5; padding: 4px 0 12px; }
.px-menu-row { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid #e5e5e5; }
.px-menu-row:last-child { border-bottom: 0; }
.px-menu-cat { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #666; padding-top: 3px; }
.px-menu-col { display: flex; flex-direction: column; gap: 12px; }
.px-menu-col a { font-size: 17px; color: #0a0a0a; }
@media (max-width: 640px) {
  .px-nav { display: none; }
  .px-menu { display: block; }
}
.px-hero { padding: 88px 0 72px; }
.px-h1 { margin: 0; font-size: clamp(42px, 8vw, 84px); line-height: 1.04; font-weight: 600; letter-spacing: -0.025em; color: #0a0a0a; text-wrap: balance; }
.px-sub { margin: 22px 0 0; font-size: clamp(19px, 2.4vw, 24px); line-height: 1.4; color: #666; }
.px-hero .px-more { margin-top: 36px; }
.px-label { margin: 0 0 18px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #666; }
.px-sec { padding: 52px 0; border-top: 1px solid #e5e5e5; max-width: 760px; }
.px-h2 { margin: 0 0 22px; font-size: clamp(26px, 4vw, 38px); line-height: 1.15; font-weight: 600; letter-spacing: -0.015em; color: #0a0a0a; text-wrap: balance; }
.px-line { margin: 0 0 12px; font-size: 18px; line-height: 1.55; color: #0a0a0a; }
.px-line:last-child { margin-bottom: 0; }
.px-num { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.px-num li { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: baseline; font-size: 18px; line-height: 1.55; color: #0a0a0a; }
.px-n { font-size: 13px; color: #666; font-variant-numeric: tabular-nums; }
.px-creed { margin: 0; font-size: clamp(24px, 3.4vw, 32px); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: #0a0a0a; text-wrap: balance; }
.px-more { margin: 32px 0 0; }
.px-sec > .px-more:first-child { margin-top: 0; }
.px-more a, .px-fine a { border-bottom: 1px solid #c8c8c8; padding-bottom: 2px; }
.px-more a { font-size: 17px; color: #0a0a0a; }
.px-more a:hover, .px-fine a:hover { border-bottom-color: #0a0a0a; }
.px-contact { max-width: 620px; }
.px-fine { margin: 18px 0 0; font-size: 12px; line-height: 1.6; color: #666; }
.px-fine a { color: #0a0a0a; }
.px .c-thanks { color: #0a0a0a; }
.px .f-lab { color: #666; }
.px .f-in { width: 100%; max-width: none; box-sizing: border-box; color: #0a0a0a; background: #ffffff; border: 1px solid #cfcfcf; }
.px .f-in:focus { border-color: #0a0a0a; }
.px .f-submit { color: #ffffff; background: #0a0a0a; }
.px .f-submit:hover { background: #333333; }
.px-foot { margin-top: 40px; padding: 36px 0 32px; border-top: 1px solid #e5e5e5; }
.px-foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.px-foot-colset { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.px-foot-cat { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #666; margin-bottom: 4px; }
.px-foot-item { font-size: 15px; color: #0a0a0a; }
.px-foot-item:hover { text-decoration: underline; }
.px-foot-base { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 36px; padding-top: 18px; border-top: 1px solid #e5e5e5; font-size: 12px; color: #666; }
.px-foot-base a { color: #666; }
.px-foot-base a:hover { color: #0a0a0a; }
.px-fab { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 30; background: #ffffff; color: #0a0a0a; border: 1px solid #0a0a0a !important; padding: 11px 20px; font-size: 14px; }
.px-fab:hover { background: #0a0a0a; color: #ffffff; }
body:has(.px-menu[open]) .px-fab { display: none; }
.px-menu:not([open]) .px-menu-panel { display: none; }