/* Doorman /agents and the agent guides: the approved comp "The cable".
   The prompt is a telegram you send; the reply cable is your agent's run. Plates carry the papers;
   every word, ruled stamp and seal on them is set here. --u is one comp pixel (1536x1024), scaled like the other heroes. */
@font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/courier-prime-latin.woff2) format("woff2"); }
:root { --type: "Courier Prime", "Courier New", ui-monospace, monospace; }

/* on short screens --u shrinks below the width unit; the spare width is split either side so the papers stay centred under the nav */
.cable-hero { --u: min(var(--uw), max(.8px, calc((100svh - 106px) / 905))); --off: calc(719 * (var(--uw) - var(--u))); padding: calc(20 * var(--u)) 0 0; color: var(--ink); }
.cable-hero .hang { margin-left: calc(50 * var(--uw) + var(--off) + 68 * var(--u)); margin-right: var(--gut); }
.cable-hero h1 { font: 700 calc(94 * var(--u))/1.08 var(--display); color: var(--ink-deep); letter-spacing: -0.015em; margin: 0; }

/* the two papers: comp region x50..1488, y262..724 */
.cables { position: relative; width: calc(1438 * var(--u)); height: calc(462 * var(--u)); margin: calc(33 * var(--u)) 0 0 calc(50 * var(--uw) + var(--off)); color: #10342A; }
/* the generated papers are drawn 16.5% shorter than the comp's; the plate is stretched to the comp's frame (x26..804, y24..430) */
.cables .plate { position: absolute; left: calc(-7 * var(--u)); top: calc(-42 * var(--u)); width: calc(100% + 0px); height: calc(538 * var(--u)); max-width: none; pointer-events: none; }
.cb .plate { left: 0; }
.tg { position: absolute; left: 0; top: 0; width: calc(840 * var(--u)); height: 100%; }
.cb { position: absolute; left: calc(834 * var(--u)); top: 0; width: calc(604 * var(--u)); height: 100%; }
.cables p, .cables ol, .cables ul { margin: 0; }

/* telegram head */
.tg-head { position: absolute; left: calc(48 * var(--u)); top: calc(34 * var(--u)); right: calc(56 * var(--u)); height: calc(92 * var(--u)); display: flex; align-items: center; gap: calc(22 * var(--u)); }
.tg-seal { flex: none; width: calc(88 * var(--u)); height: calc(88 * var(--u)); color: #10342A; }
.tg-title { display: grid; gap: calc(6 * var(--u)); padding-right: calc(28 * var(--u)); border-right: 1px solid rgba(16, 52, 42, .5); }
.tg-title span { font: 700 calc(32 * var(--u))/1 var(--display); letter-spacing: .26em; text-transform: uppercase; }
.tg-title small { font: 600 max(11px, calc(11.5 * var(--u)))/1 var(--text); letter-spacing: .24em; text-transform: uppercase; color: #0D2D1B; border-bottom: 1px solid rgba(16, 52, 42, .5); padding-bottom: calc(8 * var(--u)); }
.tg-to { align-self: flex-start; padding-top: calc(10 * var(--u)); font: 400 calc(18 * var(--u))/1.2 var(--type); letter-spacing: .03em; text-transform: uppercase; }
.tg-to span { display: block; font: 600 max(11px, calc(11 * var(--u))) var(--text); letter-spacing: .2em; color: #3D5C52; margin-bottom: calc(8 * var(--u)); }
/* the message sits on the plate's ruled lines: after the stretch they fall at y 110.6 + 27.96k */
.tg-msg { position: absolute; left: calc(84 * var(--u)); right: calc(70 * var(--u)); top: calc(142 * var(--u)); font: 400 calc(22 * var(--u))/calc(27.96 * var(--u)) var(--type); color: #10342A; overflow-wrap: anywhere; }
/* foot: on clean paper over the lower rules */
.tg-foot { position: absolute; left: calc(40 * var(--u)); right: calc(44 * var(--u)); top: calc(316 * var(--u)); height: calc(104 * var(--u)); padding: 0 calc(8 * var(--u)); display: flex; align-items: center; gap: calc(18 * var(--u)); background: #E2E7D9; -webkit-mask-image: linear-gradient(90deg, transparent, #000 calc(14 * var(--u)), #000 calc(100% - 14 * var(--u)), transparent), linear-gradient(transparent, #000 calc(10 * var(--u))); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 calc(14 * var(--u)), #000 calc(100% - 14 * var(--u)), transparent), linear-gradient(transparent, #000 calc(10 * var(--u))); mask-composite: intersect; }
.tg .seal { position: static; flex: none; width: calc(92 * var(--u)); height: calc(92 * var(--u)); color: #6A8C7A; overflow: visible; }
.tg .seal path { fill: none; stroke: currentColor; stroke-width: .4; vector-effect: non-scaling-stroke; stroke-dasharray: 1; }
.tg .seal .guide { opacity: .16; }
/* the Copy prompt stamp: overprint red, tilted, double rule */
.copy-prompt.stamp-copy { flex: none; display: inline-flex; align-items: center; gap: calc(10 * var(--u)); min-height: calc(54 * var(--u)); padding: 0 calc(14 * var(--u)); background: rgba(228, 226, 203, .6); color: #C21F2A; position: relative; border: 0; margin-left: calc(10 * var(--u)); transform: rotate(-4deg); font: 400 calc(19 * var(--u))/1 var(--text); letter-spacing: -.01em; cursor: pointer; }
.copy-prompt.stamp-copy:hover { background: rgba(194, 31, 42, .07); }
.copy-prompt.stamp-copy .cp-icons { display: none; }
.copy-prompt.stamp-copy::before { content: ""; width: calc(26 * var(--u)); height: calc(30 * var(--u)); flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 30'%3E%3Cg fill='none' stroke='%23C21F2A' stroke-width='1.6'%3E%3Crect x='7.5' y='1.5' width='16' height='20' rx='1.5'/%3E%3Cpath d='M7.5 7.5H3a1.5 1.5 0 0 0-1.5 1.5v17A1.5 1.5 0 0 0 3 27.5h13a1.5 1.5 0 0 0 1.5-1.5v-4.5'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
/* the inked rule is roughened like a rubber stamp; the words stay crisp */
.copy-prompt.stamp-copy::after { content: ""; position: absolute; inset: 0; border: calc(2.5 * var(--u)) solid #C21F2A; border-radius: calc(10 * var(--u)); filter: url(#rubber); pointer-events: none; }
.tg-agents { list-style: none; padding: 0; display: flex; gap: 0; margin-left: auto; }
.tg-agents li { display: grid; justify-items: center; align-content: start; gap: calc(4 * var(--u)); width: calc(54 * var(--u)); font: 400 max(11px, calc(10.5 * var(--u)))/1.1 var(--text); letter-spacing: -.01em; text-align: center; color: #10342A; }
/* the names fit at comp scale only; on smaller papers the icons stay and the names go to screen readers
   (every name is set full size in the Agents row just below) */
.tg-foot { container-type: inline-size; }
@container (max-width: 720px) { .tg-agents .nm { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .tg-agents { gap: calc(6 * var(--u)); } .tg-agents li { width: auto; } }
.tg-agents .ring { display: grid; place-items: center; width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: 50%; border: 1px solid rgba(16, 52, 42, .6); color: #10342A; }
.tg-agents svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }

/* the reply cable */
.cb-head { position: absolute; left: calc(51 * var(--u)); top: calc(30 * var(--u)); right: calc(40 * var(--u)); display: flex; align-items: center; gap: calc(14 * var(--u)); padding-bottom: calc(10 * var(--u)); border-bottom: 1px solid rgba(16, 52, 42, .4); font: 400 calc(18 * var(--u))/1 var(--type); letter-spacing: .14em; text-transform: uppercase; }
.cb-ico { width: calc(32 * var(--u)); height: calc(16 * var(--u)); flex: none; }
.cb-from { margin-left: auto; display: inline-flex; align-items: center; gap: calc(10 * var(--u)); letter-spacing: .26em; }
.cb-from i { position: relative; width: calc(24 * var(--u)); height: calc(24 * var(--u)); border: 1.5px solid currentColor; border-radius: 50%; }
.cb-from i::after { content: ""; position: absolute; left: 50%; top: 22%; width: 36%; height: 58%; transform: translateX(-50%); border: 1.5px solid currentColor; border-bottom: 0; border-radius: 99px 99px 0 0; }
.cb-run { position: absolute; left: calc(51 * var(--u)); right: calc(36 * var(--u)); top: calc(92 * var(--u)); list-style: none; padding: 0; display: grid; gap: calc(7 * var(--u)); font: 400 max(12px, calc(16 * var(--u)))/1.35 var(--type); }
.cb-run li { position: relative; display: grid; grid-template-columns: calc(64 * var(--u)) 1fr; }
.cb-run time { color: #3D5C52; }
.mark-stamp { position: absolute; left: calc(380 * var(--u)); width: calc(134 * var(--u)); top: calc(-9 * var(--u)); display: flex; justify-content: space-between; align-items: center; padding: calc(6 * var(--u)) calc(10 * var(--u)); font: 400 max(11.5px, calc(17 * var(--u)))/1.1 var(--type); letter-spacing: .06em; text-transform: uppercase; border: calc(2.2 * var(--u)) solid currentColor; border-radius: calc(5 * var(--u)); transform: rotate(-2deg); background: rgba(226, 232, 218, .55); filter: url(#rubber); }
.mark-stamp.genuine { color: #1F5F3A; }
/* the tick and cross are drawn strokes, inked like the stamp, not font glyphs */
.mark-stamp.genuine::after { content: ""; width: calc(7 * var(--u)); height: calc(14 * var(--u)); margin: 0 calc(3 * var(--u)) calc(4 * var(--u)) 0; border: solid currentColor; border-width: 0 calc(2.4 * var(--u)) calc(2.4 * var(--u)) 0; transform: rotate(40deg); }
.mark-stamp.void::after { content: ""; width: calc(13 * var(--u)); height: calc(13 * var(--u)); background: linear-gradient(45deg, transparent calc(50% - 1.1px), currentColor calc(50% - 1.1px) calc(50% + 1.1px), transparent calc(50% + 1.1px)), linear-gradient(-45deg, transparent calc(50% - 1.1px), currentColor calc(50% - 1.1px) calc(50% + 1.1px), transparent calc(50% + 1.1px)); }
.mark-stamp.void { top: calc(3 * var(--u)); background: rgba(240, 214, 206, .45); }
.mark-stamp.void { color: #A8161F; }
/* motion: the reply comes in over the wire a line at a time, then the two test results are stamped;
   copying the prompt strikes the stamp again. Nothing moves for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .cb-run li > time, .cb-run li > span { animation: wire .32s steps(6, end) both; }
  .cb-run li:nth-child(1) > :not(.mark-stamp) { animation-delay: 0.25s; }
  .cb-run li:nth-child(2) > :not(.mark-stamp) { animation-delay: 0.39s; }
  .cb-run li:nth-child(3) > :not(.mark-stamp) { animation-delay: 0.53s; }
  .cb-run li:nth-child(4) > :not(.mark-stamp) { animation-delay: 0.67s; }
  .cb-run li:nth-child(5) > :not(.mark-stamp) { animation-delay: 0.81s; }
  .cb-run li:nth-child(6) > :not(.mark-stamp) { animation-delay: 0.95s; }
  .cb-run li:nth-child(7) > :not(.mark-stamp) { animation-delay: 1.09s; }
  .cb-run li:nth-child(8) > :not(.mark-stamp) { animation-delay: 1.23s; }
  .cb-run li:nth-child(9) > :not(.mark-stamp) { animation-delay: 1.37s; }
  .cb-run li:nth-child(10) > :not(.mark-stamp) { animation-delay: 1.51s; }
  .mark-stamp { animation: strike .42s cubic-bezier(.2,.8,.2,1) both; }
  .mark-stamp.genuine { animation-delay: 1.45s; } .mark-stamp.void { animation-delay: 1.7s; }
  .copy-prompt.stamp-copy { transition: transform .12s ease-out; }
  .copy-prompt.stamp-copy:active { transform: rotate(-4deg) scale(.96); }
  .copy-prompt.stamp-copy[data-copied="true"] { animation: press .38s cubic-bezier(.2,.8,.2,1); }
}
@keyframes wire { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(-4px -4px -4px 0); } }
@keyframes strike { from { opacity: 0; transform: rotate(-2deg) scale(1.35); } to { opacity: 1; transform: rotate(-2deg) scale(1); } }
@keyframes press { 0% { transform: rotate(-4deg) scale(1.12); } 45% { transform: rotate(-4deg) scale(.95); } 100% { transform: rotate(-4deg) scale(1); } }

/* rule with a star, then the agents row (comp y 744..865) */
.rule-star { display: flex; align-items: center; gap: calc(14 * var(--u)); margin: calc(20 * var(--u)) calc(72 * var(--uw)) 0; color: var(--ink); }
.rule-star::before, .rule-star::after { content: ""; flex: 1; border-top: 1px solid color-mix(in srgb, var(--ink) 55%, transparent); }
.ag-row { display: flex; align-items: flex-start; gap: calc(40 * var(--u)); margin-top: calc(27 * var(--u)); margin-left: calc(88 * var(--uw)) !important; }
.ag-row .legend { flex: none; display: flex; align-items: center; gap: calc(14 * var(--u)); margin-top: calc(14 * var(--u)); font: 600 calc(13 * var(--u)) var(--text); letter-spacing: .26em; text-transform: uppercase; color: var(--ink-2); font-size: max(11px, calc(13 * var(--u))); }
.ag-row .legend::after { content: ""; width: calc(50 * var(--u)); border-top: 1px solid currentColor; }
.ag-row ul { list-style: none; margin: 0; padding: 0; flex: 1; display: grid; grid-template-columns: repeat(8, 1fr); }
.ag-row a { display: grid; justify-items: center; gap: calc(10 * var(--u)); color: var(--ink-2); text-decoration: none; font: 400 calc(17 * var(--u))/1.2 var(--text); text-align: center; min-height: 44px; }
.ag-row a svg { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
.ag-row a:hover span { text-decoration: underline; }

/* below the fold */
.agents #pick { --u: min(var(--uw), calc((100svh - 106px) / 905)); border-top: 0; padding-top: calc(57 * var(--u)); }
.agents #pick h2 { font-size: calc(88 * var(--u)); line-height: 1.05; word-spacing: .05em; max-width: none; }
@media (min-width: 901px) { .agents #pick h2 { margin-left: calc(88 * var(--uw) - max(var(--gut), (100vw - 1240px) / 2)); } }
.ag-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 28px 0 0; font: 600 12px var(--text); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
.ag-filter .chip { min-height: 40px; padding: 0 16px; font: 600 14px var(--text); letter-spacing: 0; text-transform: none; color: var(--ink); background: transparent; border: 1px solid var(--rule-2); cursor: pointer; }
.ag-filter .chip[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.ag-grid { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.ag-card[hidden] { display: none; }
.ag-card a { display: grid; gap: 10px; height: 100%; padding: 22px 22px 20px 0; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.ag-card:nth-child(3n+2) a, .ag-card:nth-child(3n+3) a { padding-left: 22px; border-left: 1px solid var(--rule); }
.ag-top { display: flex; gap: 14px; align-items: center; }
.ag-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--rule-2); color: var(--ink); flex: none; }
.ag-icon.lg { width: 64px; height: 64px; }
.ag-name { display: block; font: 700 22px/1.2 var(--display); }
.ag-blurb { color: var(--ink-2); font-size: 15.5px; }
.ag-go { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.ag-card a:hover .ag-name { text-decoration: underline; }
.agents .footnote a, .agents .intro a { color: var(--ink); }
.agents .register-table { margin-top: 36px; border-top: 3px double var(--ink); border-bottom: 3px double var(--ink); overflow-x: auto; }
.agents .cmp { width: 100%; border-collapse: collapse; font: 400 16px/1.4 var(--display); }
.agents .cmp th, .agents .cmp td { padding: 13px 14px; text-align: left; border-bottom: 1px solid var(--rule); }
.agents .cmp thead th { font: 600 11.5px var(--text); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); border-bottom: 1px solid var(--ink); }
.agents .cmp tbody th a { color: var(--ink); font: 700 17px var(--display); text-decoration: none; }
.agents .cmp code { font: 13px var(--mono); }
.agents .steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); counter-reset: s; }
.agents .steps li { position: relative; padding: 16px 0 16px 44px; border-bottom: 1px solid var(--rule); color: var(--ink-2); counter-increment: s; }
.agents .steps li::before { content: counter(s); position: absolute; left: 0; top: 13px; font: 700 22px var(--display); color: var(--ink); }
.agents .steps b { display: block; color: var(--ink); font-weight: 600; }
.agents code { font-family: var(--mono); font-size: .88em; }
.close-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 36px; }
/* the closing stamp: the hero's Copy prompt stamp, a size up, on its own scrap of paper */
.close-acts { --u: 1.15px; align-items: center; gap: 28px 36px; }
.close-acts .copy-prompt.stamp-copy { margin: 0; border-radius: calc(10 * var(--u)); background: #E2E7D9; box-shadow: 0 1px 0 rgba(16, 52, 42, .15), 0 8px 18px -10px rgba(16, 52, 42, .35); }
.close-acts .stub .main { min-height: 56px; }

/* ---------- guides: a reading page on the same paper ---------- */
.guide { max-width: 840px; margin: 0 auto; padding: 40px var(--gut) 96px; }
.guide .crumbs { font: 600 12px/1.2 var(--text); letter-spacing: .2em; text-transform: uppercase; }
.guide .crumbs a { color: inherit; text-decoration: none; }
.guide .crumbs a:hover { text-decoration: underline; }
.guide .crumbs span[aria-hidden] { margin: 0 .6em; color: var(--ink-2); }
.guide-head { display: flex; gap: 20px; align-items: center; margin-top: 26px; }
.guide-head h1 { font: 700 clamp(36px, 5vw, 58px)/1.06 var(--display); color: var(--ink-deep); }
.guide .lead { margin-top: 20px; font-size: 19px; line-height: 1.55; color: var(--ink-2); }
.guide-steps { list-style: none; margin: 40px 0 0; padding: 0; counter-reset: g; border-top: 3px double var(--ink); }
.guide-steps > li { position: relative; padding: 30px 0 30px 64px; border-bottom: 1px solid var(--rule); counter-increment: g; }
.guide-steps > li::before { content: counter(g); position: absolute; left: 0; top: 24px; width: 44px; height: 44px; display: grid; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; box-shadow: inset 0 0 0 3px var(--tint), inset 0 0 0 4px var(--ink); font: 700 20px var(--display); color: var(--ink); }
.guide-steps h2 { font: 700 26px/1.2 var(--display); margin: 6px 0 12px; }
.guide-steps p { color: var(--ink-2); margin: 0 0 14px; }
.guide-steps p a { color: var(--ink); }
.guide .hint { font-size: 14.5px; }
.guide .code { margin: 6px 0 14px; }
.guide .code .copy { position: relative; }
.guide .code pre { margin: 0; padding: 20px 18px 22px; font-size: 14px; line-height: 1.7; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; color: var(--code-ink); white-space: pre; }
.guide .copy > button { position: absolute; top: 10px; right: 10px; font: 600 11px var(--mono); background: rgba(255,255,255,.08); color: var(--code-ink); border: 1px solid rgba(255,255,255,.15); padding: 4px 8px; cursor: pointer; min-height: 32px; }
/* the prompt in a guide: a small telegram */
.tg.mini { position: relative; margin: 8px 0 14px; padding: 18px 20px 14px; background: #EFECD9; color: #10342A; border: 1px solid rgba(16,52,42,.6); outline: 1px solid rgba(16,52,42,.35); outline-offset: -6px; background-image: repeating-linear-gradient(180deg, transparent 0 29px, rgba(16,52,42,.22) 29px 30px); background-position: 0 44px; }
.tg.mini .tg-to { padding: 0 0 8px; font-size: 15px; color: #10342A; }
.tg.mini .tg-to span { color: #3D5C52; }
.tg.mini .tg-to span { display: inline; margin: 0 8px 0 0; font-size: 11px; }
.tg.mini .copy { position: relative; }
.tg.mini pre { margin: 0; padding: 0 70px 0 0; background: none; color: #10342A; font: 400 17px/30px var(--type); white-space: pre-wrap; overflow-wrap: anywhere; overflow: visible; }
.tg.mini .copy > button { top: -4px; right: 0; background: transparent; color: #C21F2A; border: 1.5px solid #C21F2A; font: 600 12px var(--text); padding: 6px 10px; min-height: 36px; }
.guide-foot { margin-top: 36px; }
.other-h { font: 700 28px var(--display); margin: 56px 0 14px; }
.guide > p { color: var(--ink-2); }
.ag-mini { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ag-mini a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px 0 6px; border: 1px solid var(--rule-2); color: var(--ink); text-decoration: none; font-weight: 500; }
.ag-mini .ag-icon { width: 32px; height: 32px; border: 0; }
.ag-mini a:hover { border-color: var(--ink); }

/* dark: the papers are lit objects on the night page, in daylight ink. The daylight plate's glow reads as fog on the
   deep green, so night swaps in the bare papers and the lamp behind them is drawn here, warm and tight */
.plate.night { display: none; }
.cables .plate.night { filter: drop-shadow(0 0 calc(10 * var(--u)) rgba(255, 214, 128, .55)) drop-shadow(0 0 calc(34 * var(--u)) rgba(255, 196, 92, .28)); }
:root[data-theme="dark"] .plate.day { display: none; }
:root[data-theme="dark"] .plate.night { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .plate.day { display: none; } :root:not([data-theme="light"]) .plate.night { display: block; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tg.mini { color: #10342A; } }

/* phones: the telegram and the reply stack as two papers; the bottom row wraps */
@media (max-width: 900px) {
  .cable-hero { --u: 1px; padding-top: 22px; }
  .cable-hero .hang { margin: 0 var(--gut); }
  .cable-hero h1 { font-size: clamp(40px, 11vw, 64px); }
  .cables { width: auto; height: auto; margin: 22px var(--gut) 0; display: grid; gap: 16px; }
  .cables .plate, .cables .plate.night { display: none !important; }
  /* the papers are rebuilt from the plates' own edges: engraved top and foot bands at full width, the frame (and the
     cable's perforations) tiled down the sides, the paper's colour between; the lamp glow is drawn round them */
  .tg, .cb { position: relative; left: auto; width: auto; height: auto; filter: drop-shadow(0 0 8px rgba(255, 214, 128, .5)) drop-shadow(0 0 26px rgba(255, 196, 92, .22)); }
  .tg { padding: 40px 26px 34px; background: url(/assets/plates/cut/tg-top.webp) top / 100% auto no-repeat, url(/assets/plates/cut/tg-bottom.webp) bottom / 100% auto no-repeat, url(/assets/plates/cut/tg-left.webp) left top / 5.27% auto repeat-y, url(/assets/plates/cut/tg-right.webp) right top / 3.68% auto repeat-y, #E7E4CE; }
  .cb { padding: 26px 30px 52px; background: url(/assets/plates/cut/cb-top.webp) top / 100% auto no-repeat, url(/assets/plates/cut/cb-bottom.webp) bottom / 100% auto no-repeat, url(/assets/plates/cut/cb-left.webp) left top / 6.2% auto repeat-y, url(/assets/plates/cut/cb-right.webp) right top / 6.2% auto repeat-y, #D6DDCF; }
  .tg-head, .tg-msg, .tg-foot, .cb-head, .cb-run { position: static; }
  .tg-head { height: auto; flex-wrap: wrap; gap: 12px 16px; }
  .tg-seal { width: 56px; height: 56px; }
  .tg-title span { font-size: 22px; }
  .tg-title { border-right: 0; padding-right: 0; }
  .tg-to { width: 100%; padding-bottom: 12px; border-bottom: 1px solid rgba(16, 52, 42, .5); }
  .tg-title small { font-size: 11px; }
  .tg-to { font-size: 15px; padding-top: 0; }
  .tg-msg { margin-top: 20px; overflow-wrap: break-word; font-size: 18px; line-height: 28px; background: repeating-linear-gradient(180deg, transparent 0 27px, rgba(16,52,42,.22) 27px 28px); }
  .tg-foot { margin-top: 18px; height: auto; flex-wrap: wrap; background: none; gap: 14px; }
  .tg .seal { width: 64px; height: 64px; }
  .copy-prompt.stamp-copy { min-height: 52px; font-size: 17px; padding: 0 16px; }
  .tg-agents { margin-left: 0; flex-wrap: wrap; width: 100%; }
  .tg-agents li { width: 64px; font-size: 11px; }
  .cb-head { font-size: 12px; letter-spacing: .1em; gap: 10px; white-space: nowrap; }
  .cb-run { margin-top: 14px; font-size: 15px; gap: 8px; }
  .cb-run li { grid-template-columns: 52px 1fr; padding-right: 0; }
  .mark-stamp { position: static; justify-self: start; grid-column: 2; margin-top: 6px; font-size: 14px; }
  .rule-star { margin: 26px var(--gut) 0; }
  .agents #pick { padding-top: 64px; }
  .ag-row { flex-direction: column; gap: 12px; margin: 18px var(--gut) 0 !important; }
  .ag-row ul { grid-template-columns: repeat(4, 1fr); row-gap: 14px; }
  .ag-row a { font-size: 13px; }
  .agents #pick h2 { font-size: clamp(38px, 10vw, 56px); }
  .ag-grid { grid-template-columns: 1fr; }
  .ag-card:nth-child(n) a { padding-left: 0; border-left: 0; }
  .agents .register-table { overflow: visible; }
  .agents .cmp, .agents .cmp tbody { display: block; }
  .agents .cmp thead { display: none; }
  .agents .cmp tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .agents .cmp th, .agents .cmp td { padding: 0; border: 0; min-width: 0; overflow-wrap: anywhere; }
  .agents .cmp tbody th { grid-column: 1 / -1; }
  .agents .cmp td::before { content: attr(data-label) " "; font: 600 11px var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin-right: 6px; }
  .guide-steps > li { padding-left: 0; padding-top: 70px; }
  .guide-steps > li::before { top: 22px; }
  .tg.mini pre { padding-right: 0; padding-top: 34px; }
  .tg.mini .copy > button { top: -6px; }
}
.cables .defs { position: absolute; width: 0; height: 0; }

/* agent marks are printed in the page's one ink, like everything else on the sheet; the Codex terminal glyph knocks out to the ground */
.tg-agents svg [fill], .ag-row svg [fill], .ag-icon svg [fill] { fill: currentColor; }
.tg-agents svg [stroke]:not([stroke="currentColor"]) { stroke: #E2E7D9; }
.ag-row svg [stroke]:not([stroke="currentColor"]), .ag-icon svg [stroke]:not([stroke="currentColor"]) { stroke: var(--tint); }
.ag-icon svg [fill="none"], .ag-row svg [fill="none"], .tg-agents svg [fill="none"] { fill: none; }