/* Atlas site: the Research Lab pages (/lab, /lab/open-pseudonym, /lab/oac), 2026-11-06. Same white, editorial look as the rest of
   the site; the sun is the one accent (the person's yes in the OAC figure, the dot on a project's line drawing). One dark band per
   project page (Install, like the dark band on Home) and one moving picture (the stage under the hero). */

/* ---------- hero ---------- */
.lab-hero { padding-bottom: 24px; }
.lab-eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.lab-eyebrow a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 4px; color: inherit; text-underline-offset: 3px; }
.pill-stage { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--field); border: 1px solid var(--line-2);
  color: var(--ink-2); font-size: 12px; font-weight: 600; letter-spacing: 0; }
.lab-meta { margin: 22px auto 0; font-size: 14px; color: var(--ink-2); text-wrap: balance; }
.lab-meta span { margin: 0 6px; color: var(--ink-3); }
.lab-meta b { font-weight: inherit; }
@media (max-width: 600px) { .lab-meta .lm-lic { display: none; } }   /* phones: one line; the licences are in the links and the footer of the repo */
@media (prefers-reduced-motion: no-preference) { .lab-meta { animation: rise-in 800ms var(--ease-out) 240ms both; } }
.lab-narrow { width: min(960px, var(--container)); margin-inline: auto; }
.lab-h3 { margin: 48px 0 6px; font-size: 21px; letter-spacing: -0.025em; line-height: 1.2; }
.lab-p { max-width: 44em; margin: 0 0 16px; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.sec .lab-small-h { margin: 0 0 16px; font-size: 22px; letter-spacing: -0.025em; line-height: 1.2; }
.page-lab .two .lead { margin-top: 14px; }

/* ---------- the stage: How it works on dotted paper, right under the hero ---------- */
.lab-stage-sec { padding-top: 8px; }
.lab-stage { position: relative; padding: 56px 48px 48px; border: 1px solid var(--line); border-radius: 32px; background-color: var(--field);
  background-image: radial-gradient(circle, rgba(29, 28, 26, .075) 1px, transparent 1.3px); background-size: 22px 22px; background-position: 11px 11px; }
.stage-head { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.stage-head h2 { font-size: 36px; }
.stage-head .lead { margin-top: 12px; font-size: 17.5px; }

/* ---------- how-it-works figures ---------- */
.lab-flow { max-width: 1100px; margin: 0 auto; --T: 10s; }
.lf-grid { display: grid; }
.lf-step { position: relative; transition: opacity .5s var(--ease-out); }
.lf-link { position: relative; background: var(--line-2); --fx: 0; --fy: 1; }
.lf-link::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform-origin: left center; transition: transform .6s var(--ease-out); }
.lf-link::before { content: ""; position: absolute; right: -1px; top: 50%; width: 8px; height: 8px; border-top: 1.6px solid var(--ink); border-right: 1.6px solid var(--ink);
  transform: translateY(-50%) rotate(45deg); }

/* Open Pseudonym: You type -> The model sees -> You read */
.lf-op { --T: 8s; }
.lf-op .lf-grid { grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr) 84px minmax(0, .8fr); align-items: start; }
.lf-lab { margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--ink-2); }
.lf-card { padding: 18px 20px; border: 1px solid var(--line-2); border-radius: 18px; background: #fff; font-size: 15.5px; line-height: 1.55; color: #3d3b38;
  box-shadow: 0 1px 2px rgba(29, 28, 26, .04), 0 18px 36px -28px rgba(29, 28, 26, .25); }
.lf-card p + p { margin-top: 6px; }
.lf-op .n2 .lf-lab { color: var(--ink); }
mark.v { background: none; color: var(--ink); font-weight: 600; }
mark.s { padding: 1px 6px; border-radius: 6px; background: var(--field); border: 1px solid var(--line-2); color: var(--ink); font-weight: 600; white-space: nowrap; }
.lf-op .lf-link { height: 1.6px; margin: 0 14px; align-self: center; top: 12px; }
.lf-op .lf-link span { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.lf-base { display: flex; align-items: center; justify-content: center; gap: 10px; width: fit-content; max-width: 100%; margin: 28px auto 0; padding: 10px 18px;
  border: 1px dashed var(--ink-3); border-radius: 999px; background: #fff; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.lf-base .ic { flex: none; color: var(--ink); }

/* Open Action Consent: The agent asks -> Preview -> Your yes -> The action runs -> Receipt and Undo */
.lf-oac .lf-grid { grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr) 30px minmax(0, 1fr) 30px minmax(0, 1fr) 30px minmax(0, 1fr); align-items: stretch; }
.lf-oac .lf-step { display: flex; flex-direction: column; gap: 14px; padding: 18px 16px 20px; border: 1px solid var(--line-2); border-radius: 18px; background: #fff;
  box-shadow: 0 1px 2px rgba(29, 28, 26, .04), 0 18px 36px -28px rgba(29, 28, 26, .25); }
.lf-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--field); border: 1px solid var(--line-2); color: var(--ink); flex: none; }
.lf-oac .yes .lf-ic { background: var(--sun); border-color: var(--sun); }
.lf-oac .yes .lf-ic .ic { color: var(--ink); stroke: var(--ink); }   /* ink on the sun: about 7.6:1 */
.lf-oac b { display: block; font-size: 16px; letter-spacing: -0.015em; line-height: 1.3; }
.lf-sub { display: block; margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.lf-oac .lf-link { height: 1.6px; align-self: center; margin: 0 4px; }
.lf-note { margin: 24px auto 0; max-width: 40em; text-align: center; font-size: 14.5px; color: var(--ink-2); }

@media (max-width: 999px) {
  .lf-oac .lf-grid { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; }
  .lf-oac .lf-step { flex-direction: row; align-items: flex-start; gap: 16px; padding: 16px 18px; }
  .lf-oac .lf-link { width: 1.6px; height: 22px; margin: 0 0 0 39px; --fx: 1; --fy: 0; }
  .lf-oac .lf-link::after { transform-origin: center top; }
  .lf-oac .lf-link::before { right: auto; left: 50%; top: auto; bottom: 0; transform: translateX(-50%) rotate(135deg); }
}
@media (max-width: 860px) {
  .lf-op .lf-grid { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; }
  .lf-op .lf-link { width: 1.6px; height: 46px; margin: 8px 0 8px 28px; top: 0; --fx: 1; --fy: 0; }
  .lf-op .lf-link::after { transform-origin: center top; }
  .lf-op .lf-link::before { right: auto; left: 50%; top: auto; bottom: 0; transform: translateX(-50%) rotate(135deg); }
  .lf-op .lf-link span { left: 16px; bottom: auto; top: 50%; transform: translateY(-50%); }
  .lf-base { border-radius: 16px; text-align: left; }
}

/* The highlight. Side by side (.lf-run, added by lab.js?v=ab2fe61272 when the figure is on screen): one round, each step dims to .45 then lights
   up in turn as the line before it fills, and it rests in the finished state (which is also the static look). Stacked on narrow
   screens (.lf-scroll): each step and line lights as it scrolls into view, so nothing happens off screen. Reduce Motion: nothing. */
@media (prefers-reduced-motion: no-preference) {
  .lf-run .n1 { animation: lf-on-1 var(--T) var(--ease-out) 1 both; }
  .lf-run .n2 { animation: lf-on-2 var(--T) var(--ease-out) 1 both; }
  .lf-run .n3 { animation: lf-on-3 var(--T) var(--ease-out) 1 both; }
  .lf-run .n4 { animation: lf-on-4 var(--T) var(--ease-out) 1 both; }
  .lf-run .n5 { animation: lf-on-5 var(--T) var(--ease-out) 1 both; }
  .lf-run .c1::after { animation: lf-fill-1 var(--T) ease-in-out 1 both; }
  .lf-run .c2::after { animation: lf-fill-2 var(--T) ease-in-out 1 both; }
  .lf-run .c3::after { animation: lf-fill-3 var(--T) ease-in-out 1 both; }
  .lf-run .c4::after { animation: lf-fill-4 var(--T) ease-in-out 1 both; }
  .lf-scroll .lf-step:not(.lf-on) { opacity: .45; }
  .lf-scroll .lf-link:not(.lf-on)::after { transform: scale(var(--fx), var(--fy)); }
}
@keyframes lf-on-1 { 0%, 100% { opacity: 1; } 3%, 6% { opacity: .45; } 10% { opacity: 1; } }
@keyframes lf-on-2 { 0%, 100% { opacity: 1; } 3%, 20% { opacity: .45; } 24% { opacity: 1; } }
@keyframes lf-on-3 { 0%, 100% { opacity: 1; } 3%, 34% { opacity: .45; } 38% { opacity: 1; } }
@keyframes lf-on-4 { 0%, 100% { opacity: 1; } 3%, 48% { opacity: .45; } 52% { opacity: 1; } }
@keyframes lf-on-5 { 0%, 100% { opacity: 1; } 3%, 62% { opacity: .45; } 66% { opacity: 1; } }
@keyframes lf-fill-1 { 0%, 100% { transform: none; } 3%, 9% { transform: scale(var(--fx), var(--fy)); } 21% { transform: none; } }
@keyframes lf-fill-2 { 0%, 100% { transform: none; } 3%, 23% { transform: scale(var(--fx), var(--fy)); } 35% { transform: none; } }
@keyframes lf-fill-3 { 0%, 100% { transform: none; } 3%, 37% { transform: scale(var(--fx), var(--fy)); } 49% { transform: none; } }
@keyframes lf-fill-4 { 0%, 100% { transform: none; } 3%, 51% { transform: scale(var(--fx), var(--fy)); } 63% { transform: none; } }

/* ---------- feature cards ---------- */
.lab-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 760px) { .lab-feats.cols-2, .lab-feats.cols-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lab-feats.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .lab-feats.cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }   /* six cards: 2 x 3 on tablets, 3 x 2 on wide screens */
@media (min-width: 1000px) { .lab-feats.cols-2 { max-width: 1000px; margin-inline: auto; } }
@media (min-width: 760px) and (max-width: 999px) { .lab-feat { padding: 22px 20px 24px; } }
.lab-feat { padding: 26px 26px 28px; border: 1px solid var(--line-2); border-radius: 22px; background: #fff; transition: border-color .2s ease; }
.lab-feat:hover { border-color: var(--ink-3); }
.lab-feat-ic { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 18px; border-radius: 14px; background: var(--field); color: var(--ink); }
.lab-feat h3 { font-size: 19px; letter-spacing: -0.02em; line-height: 1.25; }
.lab-feat p { margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }

/* ---------- Install: the one dark band ---------- */
.lab-dark { background: var(--dark); color: #f3f1ec; }
.lab-dark h2, .lab-dark .lab-h3 { color: #fff; }
.lab-dark .lab-p { color: #b9b5ad; }
.lab-dark .lab-p code { background: rgba(255, 255, 255, .08); color: #f3f1ec; }
.cmds { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.cmds > li { min-width: 0; }
@media (min-width: 760px) { .cmds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cmd-lab { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: #b9b5ad; }
.cmd-box { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 7px 8px 7px 16px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; background: #262421; }
.cmd-box code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font: 500 14px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #fff;
  font-feature-settings: normal; font-variant-ligatures: none; scrollbar-width: none; }
.cmd-box code::-webkit-scrollbar { display: none; }
.cmd-box code::before { content: "$ "; color: #8f8b83; }
.copy { position: relative; flex: none; height: 32px; padding: 0 13px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; background: transparent; color: #d9d6cf;
  font: 500 13px/1 "Inter", system-ui, sans-serif; cursor: pointer; transition: color .15s ease, border-color .15s ease, background-color .15s ease; }
.copy::after { content: ""; position: absolute; inset: -6px; }   /* a 44px hit area around a 32px pill */
.copy:hover, .copy.done { color: #fff; border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .06); }
.code { position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; background: #262421; }
.code-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 6px 8px 6px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 12.5px; font-weight: 600; color: #b9b5ad; }
.code-head > span::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: #6f6b64; vertical-align: 1px; }
.code pre { margin: 0; padding: 18px 22px 20px; overflow-x: auto; font: 13.5px/1.7 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #f3f1ec; tab-size: 4;
  font-feature-settings: normal; font-variant-ligatures: none; scrollbar-color: rgba(255, 255, 255, .25) transparent; }
.code::after { content: ""; position: absolute; top: 47px; right: 0; bottom: 0; width: 28px; pointer-events: none; background: linear-gradient(90deg, rgba(38, 36, 33, 0), #262421); }
.code pre code { font: inherit; }
.tk-c { color: #8f8b83; }
.code-tabs { margin-top: 16px; }
.ct-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.code-tabs:not(.is-tabbed) .ct-row { display: none; }
.code-tabs:not(.is-tabbed) .ct-pane + .ct-pane { margin-top: 16px; }
.ct { height: 36px; padding: 0 15px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; background: transparent; color: #d9d6cf; font: 500 14px/1 "Inter", system-ui, sans-serif; cursor: pointer; }
.ct:hover { color: #fff; border-color: rgba(255, 255, 255, .4); }
.ct.on { background: #fff; border-color: #fff; color: var(--ink); }
.lab-dark :focus-visible { outline-color: #fff; }
.ct-pane[hidden] { display: none; }

/* ---------- limits, links, changelog timeline, the launch post ---------- */
.lab-list { list-style: none; margin: 0; padding: 0; }
.lab-list li { position: relative; padding: 14px 0 14px 24px; border-top: 1px solid var(--line-2); font-size: 16.5px; line-height: 1.55; color: #3d3b38; }
.lab-list li:last-child { border-bottom: 1px solid var(--line-2); }
.lab-list li::before { content: ""; position: absolute; left: 3px; top: 25px; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); }   /* a dot, never a dash */
.lab-links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 22px; font-size: 15px; font-weight: 500; line-height: 1.9; }
.lab-links a { text-underline-offset: 4px; white-space: nowrap; }
.log-tbl { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.55; }
.log-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.log-tbl th, .log-tbl td { text-align: left; vertical-align: top; padding: 0 0 30px; }
.log-tbl tbody th { position: relative; width: 104px; padding-left: 28px; }
.log-tbl tbody th::before { content: ""; position: absolute; left: 5px; top: 10px; width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 1.6px solid var(--ink); }
.log-tbl tbody tr:first-child th::before { background: var(--sun); border-color: var(--sun); }
.log-tbl tbody th::after { content: ""; position: absolute; left: 10px; top: 24px; bottom: -6px; width: 1.6px; background: var(--line-2); }
.log-tbl tbody tr:last-child th::after { display: none; }
.log-v { display: inline-block; padding: 2px 9px; border-radius: 8px; background: #fff; border: 1px solid var(--line-2); font: 600 13.5px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.log-tbl .log-date { width: 116px; padding-top: 3px; padding-right: 16px; white-space: nowrap; font-size: 14px; color: var(--ink-2); }
.log-tbl .log-what { color: #3d3b38; }
.lab-post-link { display: grid; gap: 4px; max-width: 780px; padding: 22px 24px; border: 1px solid var(--line-2); border-radius: 18px; background: #fff; color: inherit; text-decoration: none;
  transition: border-color .2s ease, transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.lab-post-link + .lab-post-link { margin-top: 12px; }
.lab-post-link:hover { border-color: var(--ink-3); transform: translateY(-2px); box-shadow: 0 18px 40px -30px rgba(29, 28, 26, .4); }
.lp-date { font-size: 13.5px; color: var(--ink-2); }
.lp-t { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
.lp-d { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }

/* ---------- /lab: the two project cards ---------- */
.lab-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
@media (min-width: 860px) { .lab-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lab-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line-2); border-radius: 24px; background: #fff;
  transition: border-color .2s ease, transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.lab-card:hover { border-color: var(--ink-3); transform: translateY(-3px); box-shadow: 0 24px 50px -36px rgba(29, 28, 26, .45); }
.lab-card-art { display: block; aspect-ratio: 16 / 6; border-bottom: 1px solid var(--line); background-color: var(--field);
  background-image: radial-gradient(circle, rgba(29, 28, 26, .07) 1px, transparent 1.3px); background-size: 20px 20px; }
.lab-card-art svg { display: block; width: 100%; height: 100%; }
.lab-card-art svg > rect:first-child { fill: none; }
.lab-card-body { padding: 24px 28px 28px; }
.lab-card-meta { font-size: 13.5px; color: var(--ink-2); }
.lab-card-t { margin-top: 8px; font-size: 30px; line-height: 1.1; letter-spacing: -0.035em; }
.lab-card-t a { text-decoration: none; }
.lab-card-t a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.lab-card-d { margin-top: 10px; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.lab-card .links-row { margin-top: 18px; font-size: 15px; }
.page-lab .phero + .sec.lab-index { padding-top: 24px; }
@media (hover: none) { .lab-card:hover, .lab-post-link:hover { transform: none; box-shadow: none; } }

@media (max-width: 767px) {
  .lab-card-art .ld-l { display: none; }
  .lab-stage { padding: 36px 18px 24px; border-radius: 24px; }
  .stage-head { margin-bottom: 28px; }
  .stage-head h2 { font-size: 28px; }
  .stage-head .lead { font-size: 16.5px; }
  .lab-meta span { margin: 0 4px; }
  .lab-h3 { margin-top: 40px; }
  .code pre { padding: 16px 16px 18px; font-size: 13px; }
  .code-head { padding-left: 16px; }
  .lf-card { font-size: 16px; }
  .lf-sub { font-size: 15px; }
  .lab-feat { padding: 22px 20px 24px; }
  .lab-feat p, .lp-d { font-size: 16px; }
  .lab-card-body { padding: 20px 20px 24px; }
  .lab-card-t { font-size: 26px; }
  .lab-card-art { aspect-ratio: 16 / 7; }
  .log-tbl tbody, .log-tbl tbody th, .log-tbl td { display: block; width: auto; }
  .log-tbl tbody tr { display: block; position: relative; padding: 0 0 26px 28px; }
  .log-tbl tbody th { position: static; padding: 0 0 4px; }
  .log-tbl tbody th::before { left: 5px; top: 6px; }
  .log-tbl tbody th::after { left: 10px; top: 20px; bottom: 0; }
  .log-tbl .log-date { padding: 0 0 4px; }
  .log-tbl td { padding: 0; }
  .ct { height: 44px; }
  .lab-post-link { padding: 18px 20px; }
}

/* ===================== Round 3 (2026-11-06): the technical Lab ===================== */
.lab-open-pseudonym { --lab: #1d7470; --lab-bg: var(--app-teal-bg); }   /* text-safe teal (see .page-lab) */
.lab-oac { --lab: var(--app-violet); --lab-bg: var(--app-violet-bg); }
.page-lab { --lab: #1d7470; --lab-bg: var(--app-teal-bg); }   /* a deeper teal than the app's: 4.76:1 on the tint, 5.55:1 on white */
.lab-tech { max-width: 44em !important; font-size: 18.5px !important; color: #4a4843 !important; }
.lab-hero .actions .quiet { font-size: 15px; }
.lab-stats { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 1080px; margin: 34px auto 0; padding: 0; }
@media (max-width: 767px) { .lab-stats li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 768px) { .lab-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); } .lab-stats li { grid-column: span 2; } .lab-stats li:nth-child(n+4) { grid-column: span 3; } }
@media (min-width: 1100px) { .lab-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); } .lab-stats li, .lab-stats li:nth-child(n+4) { grid-column: auto; } }
.lab-stats li { padding: 14px 18px 15px; border: 1px solid var(--line-2); border-radius: 16px; background: #fff; text-align: left; }
.lab-stats b { display: block; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--lab); }
.lab-stats span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--ink-2); }
.lab-head { max-width: 760px; }
.lab-head .lead { margin-top: 12px; }
.lab-h3-first { margin-top: 0; }
.tbl-scroll { overflow-x: auto; }
.lab-replay { display: flex; align-items: center; gap: 6px; height: 32px; margin: 18px auto 0; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 999px;
  background: #fff; color: var(--ink-2); font: 500 13px/1 "Inter", system-ui, sans-serif; cursor: pointer; }
.lab-replay[hidden] { visibility: hidden; }   /* keeps its space, so nothing below jumps when it appears */
.lab-replay:hover { color: var(--ink); border-color: var(--ink-3); }

/* the pipeline */
.pipe { position: relative; margin: 0; }
.pp-lane + .pp-vault, .pp-vault + .pp-lane { margin-top: 18px; }
.pp-lane-h { margin: 0 0 10px; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.pp-row { list-style: none; display: grid; gap: 14px; margin: 0; padding: 0; }
.pp-out { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.pp-in { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pp-node { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 13px 13px 14px; border: 1px solid var(--line-2); border-radius: 14px; background: #fff;
  transition: border-color .35s ease, background-color .35s ease, box-shadow .35s ease; }
.pp-node:not(:last-child)::after { content: ""; position: absolute; top: 24px; right: -14px; width: 14px; height: 1.6px; background: var(--ink-3); }
.pp-n { align-self: flex-start; padding: 1px 7px; border-radius: 6px; background: var(--lab-bg); color: var(--lab); font: 600 11.5px/1.5 ui-monospace, "SF Mono", Menlo, monospace; }
.pp-node b { font-size: 15px; letter-spacing: -0.01em; }
.pp-d { font: 12.5px/1.45 ui-monospace, "SF Mono", Menlo, monospace; color: #4a4843; }
.pp-x { font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.pp-node.hot { border-color: var(--lab); background: var(--lab-bg); box-shadow: 0 0 0 3px var(--lab-bg); }
.pp-vault { display: flex; align-items: flex-start; gap: 14px; padding: 14px 18px; border: 1px dashed var(--lab); border-radius: 16px; background: var(--lab-bg); }
.pp-key { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: #fff; color: var(--lab); }
.pp-vault b { display: block; font-size: 15px; }
.pp-vault span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.5; color: #4a4843; }
.pp-vault code, .lab-p code, .pm-p code, .px-src code, .lead code { font: 500 .88em/1 ui-monospace, "SF Mono", Menlo, monospace; padding: 2px 5px; border-radius: 5px; background: rgba(29, 28, 26, .06); }
.pp-packet { position: absolute; left: 0; top: 0; z-index: 3; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--lab);
  box-shadow: 0 0 0 5px rgba(34, 132, 127, .2); opacity: 0; pointer-events: none; }   /* teal: amber is kept for the person's yes */
@media (max-width: 1099px) {
  .pp-out { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pp-node:nth-child(4)::after { display: none; }
}
@media (max-width: 699px) {
  .pp-out, .pp-in { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pp-node::after, .pp-node:nth-child(4)::after { display: block; top: auto; bottom: -10px; right: auto; left: 26px; width: 1.6px; height: 10px; }
  .pp-node:last-child::after { display: none; }
}

/* the explorer: one message, five profiles (real SDK output) */
.px { display: grid; gap: 16px; }
@media (min-width: 1000px) { .px { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 18px 22px; } .px-restore, .px-src { grid-column: 1 / -1; } }
.px-lab { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.px-text { margin: 0; padding: 16px 18px; border: 1px solid var(--line-2); border-radius: 16px; background: #fff; white-space: pre-wrap; word-break: break-word;
  font: 14px/1.75 ui-monospace, "SF Mono", Menlo, monospace; color: var(--ink); font-feature-settings: normal; }
.px-text mark { padding: 1px 4px; border-radius: 5px; color: var(--ink); }
mark.t-in { background: var(--app-coral-bg); box-shadow: inset 0 -1.5px 0 var(--app-coral); }
mark.x-fake, .act.x-fake { background: var(--app-teal-bg); color: #145f5b; }
mark.x-shift, .act.x-shift { background: var(--app-blue-bg); color: #2f4f9e; }
mark.x-handle, .act.x-handle { background: var(--app-violet-bg); color: #4f3a9e; }
mark.x-drop, .act.x-drop { background: var(--app-coral-bg); color: #9d3a26; }
mark.x-tag, mark.x-gen, .act.x-tag, .act.x-gen { background: var(--field); color: var(--ink-2); }
.act { display: inline-block; padding: 1px 8px; border-radius: 999px; font: 600 12.5px/1.6 ui-monospace, "SF Mono", Menlo, monospace; }
.px-side .ct-row { margin-bottom: 12px; }
.page-lab .px .ct, .page-lab .objx .ct { height: 34px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; color: var(--ink-2); font: 500 13.5px/1 "Inter", system-ui, sans-serif; }
.page-lab .px .ct code, .page-lab .objx .ct code { font: 500 13px/1 ui-monospace, "SF Mono", Menlo, monospace; }
.page-lab .px .ct.on, .page-lab .objx .ct.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.px-pane[hidden], .ob-pane[hidden] { display: none; }
.px-pane { display: grid; gap: 14px; }
.px-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.px-tbl th, .px-tbl td { padding: 9px 10px 9px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.px-tbl thead th { border-top: 0; padding-top: 0; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.px-tbl code { font: 13px/1.5 ui-monospace, "SF Mono", Menlo, monospace; word-break: break-word; }
.px-notes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.px-notes li { padding: 10px 12px; border-radius: 12px; background: var(--app-violet-bg); font-size: 13.5px; line-height: 1.5; }
.px-notes code { font: 13px/1.5 ui-monospace, "SF Mono", Menlo, monospace; white-space: normal; }
.px-restore { display: grid; gap: 8px; padding: 16px 18px; border: 1px solid var(--line-2); border-radius: 16px; background: #fff; }
.px-rs { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.px-rs-k { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.px-rs code { font: 14px/1.6 ui-monospace, "SF Mono", Menlo, monospace; }
.px-src { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) {
  .is-tabbed .px-pane:not([hidden]) .px-text mark { animation: tok .55s var(--ease-out) both; }
  .is-tabbed .px-pane:not([hidden]) .px-text mark:nth-of-type(2) { animation-delay: .06s; } .is-tabbed .px-pane:not([hidden]) .px-text mark:nth-of-type(3) { animation-delay: .12s; }
  .is-tabbed .px-pane:not([hidden]) .px-text mark:nth-of-type(4) { animation-delay: .18s; } .is-tabbed .px-pane:not([hidden]) .px-text mark:nth-of-type(5) { animation-delay: .24s; }
  .is-tabbed .px-pane:not([hidden]) .px-text mark:nth-of-type(6) { animation-delay: .3s; } .is-tabbed .px-pane:not([hidden]) .px-text mark:nth-of-type(7) { animation-delay: .36s; }
}
@keyframes tok { from { opacity: 0; transform: translateY(-4px); filter: blur(2px); } }
.px-text mark { display: inline-block; }
@media (max-width: 699px) { .px-rs { grid-template-columns: minmax(0, 1fr); gap: 2px; } .px-text { font-size: 13px; } }

/* parameter cards */
.params { display: grid; gap: 16px; }
@media (min-width: 1000px) { .params { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pm-wide { grid-column: 1 / -1; } }
.pm-card { padding: 24px 24px 26px; border: 1px solid var(--line-2); border-radius: 20px; background: #fff; }
.pm-card h3 { font-size: 19px; letter-spacing: -0.02em; }
.pm-p { margin: 8px 0 14px; max-width: 60em; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.pm-tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.pm-tbl th, .pm-tbl td { padding: 10px 14px 10px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.5; }
.pm-tbl thead th { border-top: 0; padding-top: 0; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.pm-tbl tbody th { font-weight: 500; }
.pm-tbl code { font: 600 13.5px/1.5 ui-monospace, "SF Mono", Menlo, monospace; }
.str { display: inline-flex; gap: 3px; vertical-align: -1px; margin-right: 4px; }
.str i { width: 12px; height: 8px; border-radius: 3px; background: var(--line-2); }
.str i.on { background: var(--lab); }
.pm-types, .pm-codes { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.pm-types li, .pm-codes li { padding: 4px 9px; border-radius: 8px; background: var(--field); font-size: 13px; }
.pm-types code, .pm-codes code { font: 500 12.5px/1.4 ui-monospace, "SF Mono", Menlo, monospace; }
.pm-types li.sec { background: var(--app-violet-bg); color: #4f3a9e; }
.pm-dark { background: var(--dark); border-color: var(--dark); color: #f3f1ec; }
.pm-dark h3 { color: #fff; }
.pm-dark .pm-p { color: #b9b5ad; }
.pm-dark .pm-p code { background: rgba(255, 255, 255, .08); color: #f3f1ec; }
.pm-dark pre { margin: 0; padding: 16px 18px; overflow-x: auto; border-radius: 12px; background: #262421; font: 13px/1.7 ui-monospace, "SF Mono", Menlo, monospace; color: #f3f1ec; }
.bench { max-width: 980px; }
.bench th { width: 60%; }
.bench-note { margin-top: 14px; }

/* JSON in the dark panels */
.j-k { color: #c8b8ff; } .j-s { color: #a8dcc0; } .j-n { color: #f2c98d; } .j-l { color: #9cc3ff; } .j-p { color: #8f8b83; }
.proof { display: grid; gap: 16px; }
@media (min-width: 1000px) { .proof { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; } }
.proof-side { display: grid; gap: 16px; }
.proof-note { margin: 0; }
.rcpt h3 { margin: 0 0 10px; font-size: 16px; }
.rcpt-fields { display: grid; gap: 0; margin: 0; }
.rcpt-fields > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.rcpt-fields > div:first-child { border-top: 0; padding-top: 2px; }
.rcpt-fields dt code { font: 600 12.5px/1.5 ui-monospace, "SF Mono", Menlo, monospace; color: var(--app-violet); }
.rcpt-fields dd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.code pre code .tk-c { color: #8f8b83; }

/* the specification map */
.spec-map { list-style: none; display: grid; gap: 6px; margin: 22px 0 0; padding: 0; }
@media (min-width: 640px) { .spec-map { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.spec-map a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 12px; background: #fff;
  font-size: 14px; font-weight: 500; text-decoration: none; transition: border-color .2s ease; }
.spec-map a:hover { border-color: var(--lab); }
.spec-map a span:first-child { display: inline-grid; place-items: center; min-width: 26px; height: 22px; border-radius: 6px; background: var(--lab-bg); color: var(--lab);
  font: 600 12px/1 ui-monospace, "SF Mono", Menlo, monospace; }
.gaps th { width: 40%; font-weight: 600; }

/* the OAC sequence */
.seq { position: relative; margin: 0; }
.sq-heads { list-style: none; display: grid; grid-template-columns: 34px repeat(3, minmax(0, 1fr)); gap: 0 14px; margin: 0 0 6px; padding: 0; }
.sq-heads::before { content: ""; }
.sq-lane { position: relative; z-index: 1; text-align: center; }
.sq-lane b { display: inline-block; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 12px; background: #fff; font-size: 14px; }
.sq-life { position: absolute; top: 40px; bottom: 50px; width: 0; border-left: 1.5px dashed var(--line-2); }
.sq-life.l0 { left: calc(34px + 14px + (100% - 34px - 42px) / 6); }
.sq-life.l1 { left: calc(34px + 28px + (100% - 34px - 42px) / 2); }
.sq-life.l2 { left: calc(34px + 42px + (100% - 34px - 42px) * 5 / 6); }
.sq-msgs { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; position: relative; z-index: 1; }
.sq-msg { display: grid; grid-template-columns: 34px repeat(3, minmax(0, 1fr)); gap: 0 14px; align-items: center; transition: opacity .4s ease; }
.sq-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--lab); color: #fff; font-size: 13px; font-weight: 600; }
.sq-arrow { position: relative; padding: 10px 14px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--line-2); }
.sq-c01 { grid-column: 2 / 4; } .sq-c12 { grid-column: 3 / 5; } .sq-c11 { grid-column: 3 / 4; } .sq-c00 { grid-column: 2 / 3; } .sq-c22 { grid-column: 4 / 5; } .sq-c02 { grid-column: 2 / 5; }
.sq-right .sq-arrow::after, .sq-left .sq-arrow::after { content: ""; position: absolute; bottom: -1px; left: 14px; right: 14px; height: 2px; background: var(--lab);
  transform-origin: left center; transition: transform .6s var(--ease-out); }
.sq-left .sq-arrow::after { transform-origin: right center; }
.sq-right .sq-arrow::before { content: "\2192"; position: absolute; right: 12px; top: 8px; color: var(--lab); font-weight: 600; }
.sq-left .sq-arrow::before { content: "\2190"; position: absolute; right: 12px; top: 8px; color: var(--lab); font-weight: 600; }
.sq-self .sq-arrow { border-style: dashed; background: var(--lab-bg); }
.sq-yes .sq-arrow { border-color: #ecc98a; background: var(--soft); }   /* the person's yes: the one amber step */
.sq-yes .sq-arrow::after { background: var(--sun); } .sq-yes .sq-arrow::before { color: var(--amber-ink); } .sq-yes .sq-n { background: var(--sun); color: var(--ink); }
.vc-f { color: var(--ink-2); }
.nw { white-space: nowrap; }
.sq-who { display: none; font-size: 12px; font-weight: 600; color: var(--lab); }
.sq-arrow b { display: block; font-size: 14.5px; }
.sq-arrow code { display: block; margin-top: 3px; font: 12.5px/1.5 ui-monospace, "SF Mono", Menlo, monospace; color: #4a4843; word-break: break-word; }
.sq-note { margin-top: 18px; text-align: center; font-size: 14.5px; color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) {
  .seq.is-armed .sq-msg:not(.on) { opacity: .25; }
  .seq.is-armed .sq-msg:not(.on) .sq-arrow::after { transform: scaleX(0); }
}
@media (max-width: 899px) {
  .sq-heads, .sq-life { display: none; }
  .sq-msg { grid-template-columns: 34px minmax(0, 1fr); }
  .sq-msg .sq-arrow { grid-column: 2 / 3 !important; }
  .sq-who { display: block; margin-bottom: 2px; }
  .sq-right .sq-arrow::before, .sq-left .sq-arrow::before { display: none; }
}

/* OAC objects and verification */
.objx .ct-row { margin-bottom: 12px; }
.objx .code pre { max-height: 460px; overflow: auto; }
.verify { display: grid; gap: 20px; }
@media (min-width: 1000px) { .verify { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; } }
.vcs { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.vc { display: grid; grid-template-columns: 30px minmax(0, 1fr) 24px; gap: 12px; align-items: start; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 14px; background: #fff;
  transition: border-color .3s ease, background-color .3s ease; }
.vc-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--lab-bg); color: var(--lab); font: 600 12.5px/1 ui-monospace, "SF Mono", Menlo, monospace; }
.vc b { display: block; font-size: 14.5px; }
.vc code { display: block; margin-top: 3px; font: 12.5px/1.5 ui-monospace, "SF Mono", Menlo, monospace; color: var(--ink-2); word-break: break-word; }
.vc-ok { width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: var(--app-green-bg); position: relative; transition: transform .3s var(--ease-out), opacity .3s ease; }
.vc-ok::after { content: ""; position: absolute; left: 7px; top: 4px; width: 6px; height: 10px; border-right: 2px solid var(--app-green); border-bottom: 2px solid var(--app-green); transform: rotate(45deg); }
@media (prefers-reduced-motion: no-preference) { .vcs.is-armed .vc:not(.on) .vc-ok { opacity: 0; transform: scale(.4); } .vcs.is-armed .vc.on { border-color: var(--app-green-bg); } }
.vres { padding: 18px 20px; border: 1px solid var(--line-2); border-radius: 18px; background: #fff; }
.tier { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; font-weight: 700; font-size: 14px; }
.tier.tA { background: var(--app-green-bg); color: #2f6e44; } .tier.tB { background: var(--app-blue-bg); color: #2f4f9e; }
.tier.tC { background: var(--soft); color: var(--amber-ink); } .tier.tD { background: var(--app-coral-bg); color: #9d3a26; }
.binds { list-style: none; display: grid; gap: 14px; margin: 0; padding: 0; }
@media (min-width: 700px) { .binds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .binds { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.binds li { padding: 18px 20px; border: 1px solid var(--line-2); border-radius: 18px; background: #fff; }
.binds b { display: block; font-size: 16px; }
.binds span { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.binds code, .vres code { font: 500 .9em/1 ui-monospace, "SF Mono", Menlo, monospace; }
.defects li { background: var(--app-coral-bg); color: #8a3322; }

/* /lab cards with colour covers and numbers */
.lab-card-art { background-image: none; }
.lab-card-art .cv { width: 100%; height: 100%; }
.lab-card:hover .cv-a { transform: translate(-6px, -6px); }
.lab-card:hover .cv-b { transform: translate(8px, -4px); }
.lab-card-d { font-size: 16px; line-height: 1.55; }
.lab-card-stats { list-style: none; display: flex; flex-wrap: wrap; gap: 18px; margin: 16px 0 0; padding: 0; }
.lab-card-stats b { display: block; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--lab); font-variant-numeric: tabular-nums; }
.lab-card-stats span { display: block; font-size: 12.5px; color: var(--ink-2); }
@media (max-width: 767px) {
  .lab-tech { font-size: 17px !important; }
  .pm-card { padding: 20px 18px 22px; }
}
/* phones: every grid track may shrink below its content, so wide tables scroll inside their card instead of widening the page */
.params, .proof, .verify, .px, .px-pane, .binds, .spec-map, .vcs { grid-template-columns: minmax(0, 1fr); }
.params > *, .proof > *, .proof-side > *, .verify > *, .vcs-wrap, .px > *, .px-pane > *, .pm-card, .vres { min-width: 0; }
@media (min-width: 1000px) {
  .params { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .verify { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .px { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
}
@media (min-width: 640px) and (max-width: 1099px) { .spec-map { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .spec-map { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 700px) and (max-width: 1099px) { .binds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .binds { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.px-tbl { display: block; overflow-x: auto; }
@media (min-width: 700px) { .px-tbl { display: table; } }
@media (min-width: 1000px) { .px-in { margin-top: 46px; } }
/* A real run, wide screens: the message, then what came back, on the left; the profile tabs and their output on the right */
@media (min-width: 1000px) {
  .px { grid-template-rows: auto 1fr auto; }   /* the tall right column's extra height goes below what came back, not between */
  .px-in { grid-column: 1; grid-row: 1; }
  .px-side { grid-column: 2; grid-row: 1 / span 2; }
  .px-restore { grid-column: 1; grid-row: 2; align-self: start; }
  .px-src { grid-column: 1 / -1; grid-row: 3; }
  .px-restore .px-rs { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
/* phones: the replacements table keeps each cell on one line and scrolls sideways inside its box */
@media (max-width: 699px) { .px-tbl th, .px-tbl td { white-space: nowrap; } .px-tbl code { word-break: normal; } }
/* keyboard: scrollable code and tables take focus (so they can be scrolled with the arrow keys) and show it */
.code pre:focus-visible, .pm-dark pre:focus-visible, .tbl-scroll:focus-visible, .px-tbl:focus-visible { outline: 2px solid var(--lab); outline-offset: 2px; border-radius: 10px; }
.page-lab .lead code, .px-src code, .proof-note code, .pm-p code, .bench-note code { color: var(--ink); }