/* kit.css — the AiAD components, each as the showroom draws it (app/index.html, app/room.html). Load tokens.css first.
 * Every rule here is the showroom's own, value for value, with three changes and no others:
 *   1. the class names carry ak- (the kit), so they can stand on the Studio's page beside its own CSS;
 *   2. nothing is position: fixed — the host places a component, the component only draws itself;
 *   3. colours are read from the tokens by job (--ak-ice for the shell's misnamed --gold).
 * Where a component is new (the terminal's prompt and the brother's answer, the view cube made without WebGL, the browser's
 * open-work sections, the STUDIO door in the top bar), it is said so at its rule. */

.ak, .ak * { box-sizing: border-box }
.ak { color: var(--ak-ink); font: var(--ak-t-base)/var(--ak-lh) var(--ak-font) }
:where(.ak) :where(button, input, select) { font: inherit }  /* zero weight: a component's own size always wins */
.ak *, .ak { scrollbar-width: thin; scrollbar-color: var(--ak-scroll) transparent }
.ak ::-webkit-scrollbar { width: 7px; height: 7px }
.ak ::-webkit-scrollbar-track { background: transparent }
.ak ::-webkit-scrollbar-thumb { background: var(--ak-scroll); border-radius: 4px }
.ak ::-webkit-scrollbar-thumb:hover { background: var(--ak-gold) }
.ak ::-webkit-scrollbar-corner { background: transparent }
.ak ::-webkit-scrollbar-button { display: none; height: 0; width: 0 }

/* the ground the room stands on (#field) */
.ak-field { background: var(--ak-field-glow) }
.ak-body { background: var(--ak-body) }

/* an icon from icons.svg: <svg class="ak-i"><use href="#i-NAME"/></svg> */
.ak-i { width: var(--ak-icon); height: var(--ak-icon); flex: none; display: block; overflow: visible }

/* ---------------- THE TOP BAR (.top) ----------------
 * NEW HERE: the STUDIO door. His mark of 11 Oct: it leaves the corner and goes into the top bar. It stands after the menu,
 * in the gold of the mark, as the showroom's "Open AiAD Studio →" link is coloured. TTY1 is gone (his red mark). */
.ak-top { display: flex; justify-content: space-between; align-items: baseline; padding: var(--ak-top-pad) var(--ak-edge) 0 }
.ak-top .lhs { display: flex; align-items: baseline; min-width: 0 }
.ak-mark { color: var(--ak-ink2); font-size: var(--ak-t-text); letter-spacing: var(--ak-ls-label); white-space: nowrap }
.ak-mark img { width: 19px; height: 19px; vertical-align: -4px; margin-right: 9px }
.ak-mark b { font-weight: 700 }
.ak-mark .aiad { color: var(--ak-gold) }
.ak-mark .room { color: #fff }
.ak-count { color: var(--ak-ink3); font-size: var(--ak-t-small); letter-spacing: var(--ak-ls-count) }
.ak-menu { display: flex; gap: 2px; margin-left: 26px; align-items: baseline }
.ak-menu > div { position: relative }
.ak-menu > div > span { color: var(--ak-ink2); font-size: var(--ak-t-text); letter-spacing: var(--ak-ls-menu); padding: 4px 10px; cursor: pointer; display: block }
.ak-menu > div:hover > span { color: var(--ak-ice) }
.ak-menu .drop { display: none; position: absolute; top: 100%; left: 0; min-width: 250px; z-index: 40; background: var(--ak-panel-menu);
  border: 1px solid var(--ak-hair); backdrop-filter: blur(var(--ak-blur)); padding: 6px 0 }
.ak-menu > div:hover .drop, .ak-menu > div:focus-within .drop { display: block }
.ak-menu .drop b { display: block; font-weight: 400; color: var(--ak-ink); font-size: var(--ak-t-text); letter-spacing: .1em; padding: 7px 14px; cursor: pointer; white-space: nowrap }
.ak-menu .drop b:hover { color: var(--ak-ice); background: var(--ak-wash2) }
.ak-menu .drop i { display: block; font-style: normal; color: var(--ak-ink3); font-size: var(--ak-t-head); letter-spacing: .02em; margin-top: 1px }
.ak-menu .drop hr { border: 0; border-top: 1px solid var(--ak-hair); margin: 5px 0 }
.ak-door { margin-left: 26px; background: transparent; border: 1px solid var(--ak-gold); color: var(--ak-gold); font-size: var(--ak-t-text);
  letter-spacing: var(--ak-ls-label); padding: 3px 12px; cursor: pointer; white-space: nowrap }
.ak-door:hover { background: var(--ak-gold-wash); color: var(--ak-gold-ink) }
.ak-door[aria-current="page"] { background: var(--ak-gold-wash) }

/* ---------------- THE RIBBON (#ribbon) ---------------- */
.ak-ribbon { height: var(--ak-ribbon-h); display: flex; flex-direction: column; background: var(--ak-panel); border: 1px solid var(--ak-hair);
  backdrop-filter: blur(var(--ak-blur)) }
.ak-ribbon .tabs { display: flex; gap: 2px; padding: 0 6px; border-bottom: 1px solid var(--ak-hair); flex: none; overflow-x: auto; overflow-y: hidden; scrollbar-width: none }
.ak-ribbon .tabs button { background: none; font-weight: 400; color: var(--ak-ink3); font-size: var(--ak-t-tab); letter-spacing: var(--ak-ls-label);
  padding: var(--ak-pad-tab); cursor: pointer; border: 1px solid transparent; border-bottom: 0; margin-bottom: -1px; white-space: nowrap }
.ak-ribbon .tabs button:hover { color: var(--ak-ink) }
.ak-ribbon .tabs button[aria-selected="true"] { color: var(--ak-ice); border-color: var(--ak-hair); background: var(--ak-panel-tab) }
.ak-ribbon .panels { display: flex; flex: 1; overflow-x: auto; overflow-y: hidden }
.ak-ribbon .grp { display: none; flex-direction: column; flex: none; border-right: 1px solid var(--ak-hair); padding: var(--ak-pad-group) }
.ak-ribbon .grp.on { display: flex }
.ak-ribbon .grp.last { border-right: 0 }
.ak-ribbon .tl { display: flex; gap: 1px; flex: 1; align-items: flex-start }
.ak-ribbon .nm { color: var(--ak-ink3); font-size: var(--ak-t-group); letter-spacing: var(--ak-ls-label); text-align: center; margin-top: 3px; white-space: nowrap }
.ak-tb { display: flex; flex-direction: column; align-items: center; gap: 1px; width: var(--ak-btn-w); padding: 4px 0 3px; background: transparent;
  border: 1px solid transparent; color: var(--ak-ink2); font-size: var(--ak-t-button); letter-spacing: var(--ak-ls-word); cursor: pointer;
  line-height: 1.15; text-align: center; white-space: pre-line }
.ak-tb .ak-i { width: var(--ak-icon); height: var(--ak-icon) }
.ak-tb:hover { border-color: var(--ak-hair); color: var(--ak-ink); background: var(--ak-wash) }
.ak-tb:focus-visible { outline: 2px solid var(--ak-gold); outline-offset: -2px }
.ak-tb.key { color: var(--ak-ice) }
.ak-tb.gold { border-color: var(--ak-ice); color: var(--ak-ice) }
.ak-tb[aria-pressed="true"] { border-color: var(--ak-ice); color: var(--ak-ice) }
.ak-tb[disabled] { opacity: .35; pointer-events: none }
/* a value field (the showroom's Gauge mm) */
.ak-tb.inp { cursor: default }
.ak-tb.inp input { width: 46px; margin-top: 2px; background: var(--ak-sunk); color: var(--ak-ink); border: 1px solid var(--ak-hair); font-size: var(--ak-t-small);
  padding: 3px 5px; text-align: center }
.ak-tb.inp input:focus-visible { outline: 2px solid var(--ak-gold); outline-offset: 0 }
/* a small group: three rows of small buttons */
.ak-ribbon .grp.small .tl { display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, 1fr); gap: 0 2px }
.ak-ribbon .grp.small .ak-tb { flex-direction: row; width: auto; min-width: 78px; justify-content: flex-start; gap: 5px; padding: 2px 5px 2px 3px; white-space: nowrap }
.ak-ribbon .grp.small .ak-tb .ak-i { width: var(--ak-icon-small); height: var(--ak-icon-small) }
.ak-ribbon .grp.small .ak-tb.inp input { width: 36px; margin: 0 0 0 2px; padding: 2px 3px }

/* ---------------- A PANEL (.pn): the browser, the parts, a part's card, the terminal ---------------- */
/* ---------------- THE BOX (.ak-box; .ak-pn is the same box under its first name) ----------------
 * His word on 104: "i like the floating boxes we have in the showroom better ... the floating boxes hold what they need to
 * hold". One component: the showroom's .pn as its CSS writes it (no radius, no shadow, a hairline, the void blurred through
 * its ground), the ground and the blur by job (see BOX.md), the header and the body as the showroom draws them. */
.ak-box, .ak-pn { background: var(--ak-box-ground); border: 1px solid var(--ak-box-line); backdrop-filter: blur(var(--ak-box-blur)); border-radius: var(--ak-box-radius); box-shadow: var(--ak-box-shadow); display: flex; flex-direction: column; min-height: 0 }
.ak-box--term { background: var(--ak-box-ground-term) }
.ak-box--win { background: var(--ak-box-ground-solid); border-color: var(--ak-box-line-win); backdrop-filter: blur(var(--ak-box-blur-win)) }
.ak-box--card { background: var(--ak-box-ground-solid) }
.ak-box--menu { background: var(--ak-box-ground-menu) }
.ak-box--note { background: var(--ak-box-ground-note) }
.ak-box--tag { background: var(--ak-box-ground-tag); backdrop-filter: blur(var(--ak-box-blur-tag)) }
.ak-box > .hd { display: flex; justify-content: space-between; align-items: center; flex: none; padding: var(--ak-box-head-pad); border-bottom: 1px solid var(--ak-box-line);
  color: var(--ak-ink3); font-size: var(--ak-box-head-size); letter-spacing: var(--ak-box-head-ls); cursor: default; user-select: none }
.ak-box > .hd button { background: none; border: 0; cursor: pointer; color: var(--ak-ink3); font-weight: 400; padding: 0 3px; font-size: 11px; letter-spacing: 0 }
.ak-box > .hd button:hover { color: var(--ak-ice) }
.ak-box > .bd { flex: 1; overflow: auto; min-height: 0 }
.ak-box.min > .bd { display: none }
.ak-box.min > .hd { border-bottom: 0 }
.ak-pn > .hd { display: flex; justify-content: space-between; align-items: center; flex: none; padding: var(--ak-pad-head); border-bottom: 1px solid var(--ak-hair);
  color: var(--ak-ink3); font-size: var(--ak-t-head); letter-spacing: var(--ak-ls-label); cursor: default; user-select: none }
.ak-pn > .hd button { background: none; border: 0; cursor: pointer; color: var(--ak-ink3); font-weight: 400; padding: 0 3px; font-size: 11px; letter-spacing: 0 }
.ak-pn > .hd button.word { font-size: var(--ak-t-head); letter-spacing: var(--ak-ls-label) }
.ak-pn > .hd button:hover { color: var(--ak-ice) }
.ak-pn > .bd { flex: 1; overflow: auto; min-height: 0 }
.ak-pn.min > .bd { display: none }
.ak-pn.min > .hd { border-bottom: 0 }

/* ---------------- THE BROWSER (.works, #asm) ----------------
 * THE VAULT and IMAGINED as the showroom lists them; NEW HERE: the open work's BASE · HISTORY · PARTS under them, in the
 * parts list's own hand (#asm), each section folding on its own header. */
.ak-browser { width: var(--ak-browser-w) }
.ak-browser .bd { padding: 6px 0; overflow-x: hidden }
.ak-browser .sec > .sh { display: flex; justify-content: space-between; align-items: center; width: 100%; background: none; border: 0; text-align: left;
  color: var(--ak-ink3); font-size: var(--ak-t-head); letter-spacing: var(--ak-ls-label); padding: 6px 10px 4px; cursor: pointer }
.ak-browser .sec > .sh:hover { color: var(--ak-ink) }
.ak-browser .sec > .sh::after { content: "\25BE"; font-size: 11px; letter-spacing: 0 }
.ak-browser .sec.shut > .sh::after { content: "\25B8" }
.ak-browser .sec.shut > .rows { display: none }
.ak-browser .sec + .sec { border-top: 1px solid var(--ak-hair); margin-top: 6px; padding-top: 2px }
.ak-browser a, .ak-browser .row { display: block; color: var(--ak-ink2); font-size: var(--ak-t-text); letter-spacing: var(--ak-ls-item); padding: 3px 8px 3px 10px; cursor: pointer;
  text-decoration: none; border-left: 1px solid transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.ak-browser a:hover { color: var(--ak-ink); border-left-color: var(--ak-hair) }
.ak-browser a.live { color: var(--ak-warn) }
.ak-browser a.live::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--ak-warn); margin: 0 7px 2px 0; vertical-align: middle }
.ak-browser a.live.law { color: var(--ak-good) }
.ak-browser a.live.law::before { background: var(--ak-good) }
.ak-browser a.on, .ak-browser a[aria-current="true"] { color: var(--ak-ice); border-left-color: var(--ak-ice) }
.ak-browser a.sel { background: var(--ak-gold-wash); color: var(--ak-gold-ink) }
.ak-browser .row.sub { font-size: var(--ak-t-card); padding-left: 22px; color: var(--ak-ink3) }
.ak-browser .row.sub b { font-weight: 400; color: var(--ak-ink2) }
.ak-browser .gap { height: 14px }

/* ---------------- THE TERMINAL (.tty) ----------------
 * As the showroom draws it, with TTY1 gone (his red mark). NEW HERE, his word "we keep this terminal in the same look but
 * bringing the brother into it": a prompt line under the lines, where a command or a question is typed, and the
 * brother's answer written in the same voice (the same face, size and measure), told apart only by a gold rule at its left. */
.ak-tty { width: var(--ak-term-w); background: var(--ak-term); position: relative }
/* THE HISTORY BLOCK (the layout contract of 11 Oct, section 3, from his words of 12:51 on a picture of it): the block shows
   after an answer and MINIMIZES to the arrow alone after its time, a collapse of its height with no fade (the length reaches
   here as --ak-term-collapse from kit.js, TERMINAL_TIMES); opened by his click it grows to 40 vh with its own scroll. The
   chevron is 14 px, ink3, the icon's hand (1.6 wide, round), at the block's foot beside the gold mark: DOWN when minimized,
   UP when the history is viewed. The states on the root: .ak-history-min, .ak-history-open, .ak-held. */
.ak-tty .lines { max-height: var(--ak-term-lines); transition: max-height var(--ak-term-collapse, 280ms) ease, padding var(--ak-term-collapse, 280ms) ease }
.ak-tty.ak-history-min .lines { max-height: 0; padding-top: 0; padding-bottom: 0; overflow: hidden }
.ak-tty.ak-history-open .lines { max-height: 40vh }
.ak-tty .chev { background: none; border: 0; padding: 0; width: 14px; height: 14px; flex: none; align-self: center; color: var(--ak-ink3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center }
.ak-tty .chev svg { width: 14px; height: 14px; display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s }
.ak-tty .chev[data-dir="up"] svg { transform: rotate(180deg) }
.ak-tty .chev:hover, .ak-tty .chev:focus-visible { color: var(--ak-ice) }
/* the void variant: the brother's text over the void with no frame (his words of 04:55; the contract's section 1), a little smaller */
.ak-tty.ak-tty--void { background: none; border: 0; backdrop-filter: none; width: min(56vw, 720px) }
.ak-tty.ak-tty--void .hd { display: none }
.ak-tty.ak-tty--void .lines { font-size: var(--ak-t-term-void); padding-left: 0; padding-right: 0 }
.ak-tty.ak-tty--void .lines .bro { font-size: var(--ak-t-term-void-bro) }
.ak-tty.ak-tty--void .prompt { border-top: 0; padding-left: 0; padding-right: 0 }
.ak-tty.ak-tty--void .prompt:focus-within { box-shadow: none }
.ak-tty .lines { overflow-y: auto; padding: 8px 11px; font-size: var(--ak-t-text); line-height: 1.65 }
.ak-tty .lines div { white-space: pre-wrap; word-break: break-word }
.ak-tty .lines .live { color: var(--ak-live) }
.ak-tty .lines .dim { color: var(--ak-ink3) }
.ak-tty .lines .ok { color: var(--ak-good) }
.ak-tty .lines .no { color: var(--ak-bad) }
.ak-tty .lines .you { color: var(--ak-ink2) }
.ak-tty .lines .you::before { content: "\203A  "; color: var(--ak-gold) }
.ak-tty .lines .bro { color: var(--ak-ink); border-left: 1px solid var(--ak-gold); padding-left: 8px; margin: 2px 0 2px 1px }
.ak-tty .lines .bro.thinking { color: var(--ak-ink3) }
.ak-tty .prompt { display: flex; align-items: baseline; gap: 6px; flex: none; padding: 5px 11px 6px; border-top: 1px solid var(--ak-hair); font-size: var(--ak-t-text) }
.ak-tty .prompt b { color: var(--ak-gold); font-weight: 400 }
.ak-tty .prompt input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--ak-ink); font-size: var(--ak-t-text); padding: 0; letter-spacing: .02em }
.ak-tty .prompt input::placeholder { color: var(--ak-ink3) }
/* the prompt shows its own focus (12 Oct, the access floor's keyboard pass on 106's brother page): the faint ring on the parent
   alone was not seen, and over the view (--void) it is taken off, so a keyboard reached a prompt that showed nothing */
.ak-tty .prompt input:focus-visible { outline: 2px solid var(--ak-gold); outline-offset: 2px }
.ak-tty .prompt:focus-within { box-shadow: inset 0 0 0 1px rgba(233,184,114,.35) }

/* ---------------- A HOVER CARD (#hover) and A TOOL WINDOW (#toolwin) ---------------- */
.ak-hover { width: 276px; background: var(--ak-panel-solid); border: 1px solid var(--ak-hair); backdrop-filter: blur(var(--ak-blur)); padding: 10px 12px 8px; pointer-events: none }
.ak-hover h4 { margin: 0 0 3px; color: var(--ak-ice); font-size: var(--ak-t-text); letter-spacing: var(--ak-ls-title); font-weight: 400 }
.ak-hover p { margin: 0 0 8px; color: var(--ak-ink2); font-size: var(--ak-t-small); line-height: 1.5 }
.ak-hover .k { color: var(--ak-ink3); font-size: var(--ak-t-key); letter-spacing: var(--ak-ls-name); margin-top: 6px }
.ak-win { width: 540px; max-width: 100%; background: var(--ak-panel-solid); border: 1px solid var(--ak-ice); backdrop-filter: blur(var(--ak-blur-win)); padding: 16px 20px 14px }
.ak-win .hd { display: flex; align-items: center; gap: 12px; margin-bottom: 8px }
.ak-win .hd .ak-i { width: var(--ak-icon-win); height: var(--ak-icon-win) }
.ak-win h3 { margin: 0; color: var(--ak-ice); font-size: var(--ak-t-title); letter-spacing: var(--ak-ls-menu); font-weight: 400 }
.ak-win p { margin: 0 0 10px; color: var(--ak-ink2); font-size: var(--ak-t-text); line-height: 1.55 }
.ak-win select, .ak-win input[type="text"] { width: 100%; margin: 4px 0; background: var(--ak-sunk); color: var(--ak-ink); border: 1px solid var(--ak-hair); font-size: var(--ak-t-text); padding: 7px }
.ak-win .why { color: var(--ak-ink3); font-size: var(--ak-t-tab); letter-spacing: .02em; padding: 6px 0 2px; line-height: 1.5 }
.ak-win .bt { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px }
.ak-win .bt button { background: transparent; border: 1px solid var(--ak-hair); color: var(--ak-ink2); font-size: var(--ak-t-small); letter-spacing: var(--ak-ls-button); padding: 8px 16px; cursor: pointer }
.ak-win .bt button:hover { color: var(--ak-ink); border-color: var(--ak-volt2) }
.ak-win .bt button.run { color: var(--ak-ice); border-color: var(--ak-ice) }

/* ---------------- THE ROOM'S TAG AND THE SUBJECT (#room .tag, .subject) ---------------- */
.ak-tag { display: inline-flex; align-items: center; gap: 14px; padding: 4px 14px; font-size: var(--ak-t-tab); letter-spacing: var(--ak-ls-title); color: var(--ak-ink3);
  background: var(--ak-panel-tag); border: 1px solid var(--ak-hair); backdrop-filter: blur(var(--ak-blur-tag)) }
.ak-tag b { color: var(--ak-ice); font-weight: 400 }
.ak-tag i { font-style: normal; color: var(--ak-gold) }
.ak-subject { text-align: center }
.ak-subject .n { color: var(--ak-ink); font-size: var(--ak-t-subject); letter-spacing: var(--ak-ls-count) }
.ak-subject .d { color: var(--ak-ink3); font-size: var(--ak-t-small); letter-spacing: .1em; margin-top: 3px }

/* ---------------- THE VIEW CUBE ----------------
 * The showroom's navcube.js (white words on #0B3178 paper, gold under the hand, 112 px) made WITHOUT WebGL: six faces in
 * CSS 3D, each a 3 x 3 grid of places to click (a face, an edge, a corner, as the showroom's cube offers). A page keeps
 * ONE WebGL renderer (the one program's rule), and this cube asks for none. */
.ak-cube { width: var(--ak-cube); height: var(--ak-cube); perspective: 520px; user-select: none; cursor: grab; touch-action: none }
.ak-cube:active { cursor: grabbing }
.ak-cube .c { position: relative; width: 100%; height: 100%; transform-style: preserve-3d }
/* the box takes no hit and every cell takes its own (the finding of 11 Oct, measured: on a desktop the box lay over the faces in
   the hit test, so a real click on a face's middle cell did nothing; at 390 px the cell won). The drag still starts on a cell. */
.ak-cube .c { pointer-events: none }
.ak-cube .c i { pointer-events: auto }
.ak-cube .f { position: absolute; left: 22%; top: 22%; width: 56%; height: 56%; display: grid; grid-template: 22% 56% 22% / 22% 56% 22%;
  background: var(--ak-field); border: 1px solid rgba(234,240,255,.35); backface-visibility: hidden }
.ak-cube .f > i { display: block; font-style: normal }
.ak-cube .f > i.mid { display: flex; align-items: center; justify-content: center; color: var(--ak-ink); font: 700 8.5px/1 var(--ak-font); letter-spacing: .04em }
.ak-cube .f > i:hover, .ak-cube .f > i.lit { background: rgba(233,184,114,.55); color: #fff }
.ak-cube .f > i.mid:hover, .ak-cube .f > i.mid.lit { background: rgba(233,184,114,.4) }

/* ---------------- FEEDBACK: PRESSED, BUSY, THE ACTIVITY LINE, THE TERMINAL'S WORK LINE ----------------
 * His words of 11 Oct, 03:45: "when clicking on something in the product we need a visual feedback that the clicked was
 * pressed and whatever need to load is loading and you see it loading ... the product need to say what is happening".
 *   - PRESSED: at once, on pointerdown (kit.js sets .pressed; :active covers a keyboard press), a step down into gold.
 *   - BUSY: the button whose work is running carries aria-busy="true" and a small turning mark at its corner.
 *   - THE ACTIVITY LINE: a hair of gold travelling along the top bar's foot while anything runs.
 *   - THE WORK LINE: the terminal names the work with "…" and a quiet pulse, then says it is made, in N s.
 * With reduced motion asked for, nothing turns or travels: the mark is a still ring and the line a still gold hair. */
.ak-tb.pressed, .ak-tb:active { transform: translateY(1px); border-color: var(--ak-gold); background: var(--ak-gold-wash); color: var(--ak-ink) }
.ak-door.pressed, .ak-door:active, .ak-win .bt button.pressed, .ak-win .bt button:active { transform: translateY(1px); background: var(--ak-gold-wash) }
.ak-browser a.pressed { background: var(--ak-gold-wash); color: var(--ak-gold-ink) }
.ak-tb, .ak-door { position: relative }
.ak-tb[aria-busy="true"], .ak-browser a[aria-busy="true"] { color: var(--ak-ink) }
.ak-tb[aria-busy="true"]::after, .ak-browser a[aria-busy="true"]::after {
  content: ""; position: absolute; top: 3px; right: 3px; width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid rgba(233,184,114,.25); border-top-color: var(--ak-gold); animation: ak-turn .8s linear infinite }
.ak-browser a { position: relative }
.ak-browser a[aria-busy="true"]::after { top: 50%; margin-top: -5px; right: 6px }
@keyframes ak-turn { to { transform: rotate(360deg) } }
.ak-activity { position: relative; height: 2px; overflow: hidden; background: transparent }
.ak-activity.on { background: rgba(233,184,114,.12) }
.ak-activity.on::before { content: ""; position: absolute; top: 0; bottom: 0; left: -30%; width: 30%;
  background: linear-gradient(90deg, transparent, var(--ak-gold), transparent); animation: ak-travel 1.1s ease-in-out infinite }
@keyframes ak-travel { to { left: 100% } }
.ak-tty .lines .work { color: var(--ak-live); animation: ak-pulse 1.6s ease-in-out infinite }
.ak-tty .lines .work.made { color: var(--ak-good); animation: none }
.ak-tty .lines .work.failed { color: var(--ak-bad); animation: none }
@keyframes ak-pulse { 50% { opacity: .55 } }
@media (prefers-reduced-motion: reduce) {
  .ak-tb[aria-busy="true"]::after, .ak-browser a[aria-busy="true"]::after { animation: none; border-color: var(--ak-gold); border-style: dotted }
  .ak-activity.on::before { animation: none; left: 0; width: 100%; background: var(--ak-gold); opacity: .6 }
  .ak-tty .lines .work { animation: none }
  .ak-tty .lines, .ak-tty .chev svg { transition: none }
}

/* ---------------- THE BROTHER'S MARK (.ak-brother; .ak-mark is the wordmark's) ----------------
 * His ask of 11 Oct 14:35: the infinity animated by what the brother is doing, from the kit's gold glyphs. The drawing is kit.js's
 * (brotherMark: the mark's own path, the icons by state); here the size and the period (tokens --ak-mark-size, --ak-mark-period),
 * the gold on every glyph, the word under it, and the prompt mark's breath at rest. Reduced motion: no breath (the kit draws no
 * animation then). */
/* 110 r4: the mark's own sizes, set here (the brother's page drew it from an unset token); the word at 12 px, never the 9 px head */
.ak-brother { --ak-mark-size: 72px; --ak-mark-period: 2400ms; display: inline-flex; flex-direction: column; align-items: center; gap: 4px; width: var(--ak-mark-size) }
.ak-brother svg { width: var(--ak-mark-size); height: calc(var(--ak-mark-size) * 26 / 36); display: block; overflow: visible; color: var(--ak-gold);
  --ak-icon-line: var(--ak-gold); --ak-icon-accent: var(--ak-gold); --ak-icon-context: var(--ak-gold) }
.ak-brother .word { color: var(--ak-ink3); font-size: 12px; line-height: 1.2; letter-spacing: var(--ak-ls-label); min-height: 14px }
.ak-brother.mut-mark-ring .word { font-size: var(--ak-t-head); }   /* the mutation mark-ring: the 9 px word as before */
.ak-brother .word[lang=he], .ak-brother .word[lang=ar] { letter-spacing: normal; }   /* a label's spacing never in Hebrew, and Arabic's letters stay joined */
.ak-brother .breath { animation: ak-breath var(--ak-mark-period) ease-in-out infinite }
/* 110 r4 (his word: "The marks are approved"): the light inside the line - a faint base loop, the lit strokes in the logo's rainbow */
.ak-brother svg .lb-base { fill: none; stroke: rgba(237,239,246,.16); stroke-width: 2.6; stroke-linecap: round }
.ak-brother svg .lb-lit { fill: none; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 1.4px rgba(255,214,150,.55)) }
.ak-brother svg .lb-ink { filter: drop-shadow(0 0 1.2px #FFD38A) }
@keyframes ak-lb-run { from { stroke-dashoffset: 100 } to { stroke-dashoffset: 0 } }
@keyframes ak-lb-trace { 0% { stroke-dashoffset: 100; opacity: 1 } 55% { stroke-dashoffset: 0; opacity: 1 } 80% { stroke-dashoffset: 0; opacity: 1 } 100% { stroke-dashoffset: 0; opacity: 0 } }
@keyframes ak-lb-lobeA { 0%, 100% { opacity: 1 } 45%, 55% { opacity: .08 } }
@keyframes ak-lb-lobeB { 0%, 100% { opacity: .08 } 45%, 55% { opacity: 1 } }
@keyframes ak-lb-piece { 0% { opacity: 0; stroke-width: 0 } 6% { opacity: 1; stroke-width: 3.4 } 10% { stroke-width: 3 } 78% { opacity: 1 } 92%, 100% { opacity: 0 } }
@keyframes ak-breath { 0%, 100% { opacity: .55 } 50% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .ak-brother .breath { animation: none; opacity: 1 } }