/* AKIKI.AI / D.AI.SY: light theme with a code-repository look. */

:root {
  color-scheme: light;
  --bg: #ffffff;
  --bg-subtle: #f6f8fa;
  --border: #d8dee4;
  --border-muted: #eaeef2;
  --hairline: 1px;
  --fg: #1f2328;
  --fg-muted: #59636e;
  --link: #11727a;
  --not: #7e57c2;
  --tab-line: #ec8e4a;
  --gutter: 16px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

@media (min-resolution: 2dppx) { :root { --hairline: 0.5px; } }
@media (min-width: 768px) { :root { --gutter: 24px; } }
@media (min-width: 1012px) { :root { --gutter: 32px; } }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.5 var(--sans);
  -webkit-text-size-adjust: 100%;
}

/* The page background: gentle pastel squares in the logo's colours, each gliding very slowly
   back and forth its own way, behind everything (drawn by tools/make_background.py). */
.drift { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.drift i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: calc(var(--s) * .12);
  background: var(--c);
  animation: drift var(--t) ease-in-out var(--p) infinite alternate;
}
@keyframes drift { to { transform: translate(var(--dx), var(--dy)); } }
@media (max-width: 700px) { .drift { display: none; } }   /* on phones the squares only peeked out between the cards */

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 6px; }

.icon { width: 16px; height: 16px; fill: currentColor; flex: none; vertical-align: text-bottom; }

.spin { animation: spin 90s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* The tulip sways on its stem instead of turning. */
.sway { animation: sway 6s ease-in-out infinite; transform-origin: 50% 96%; }
@keyframes sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .spin, .sway, .logo-word .cursor, .drift i { animation: none; }
}

/* One column, at a comfortable reading width. */
.container { max-width: 1012px; margin: 0 auto; padding: 0 var(--gutter); }

/* Header */

/* The header stays at the top of every page. Once the page scrolls it shrinks by a third
   (is-compact, set by switch.js): the brand row from --row to --row-c, the section bar from --tab
   to --tab-c. A margin as tall as what it gives up keeps the page below from jumping. */
.appheader {
  --row: 56px;
  --row-c: 37px;
  --tab: 48px;
  --tab-c: 32px;
  --shrink-ease: cubic-bezier(.2, .8, .2, 1);
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg-subtle);
  border-bottom: var(--hairline) solid var(--border);
  transition: margin-bottom .3s var(--shrink-ease), box-shadow .3s;
}
.appheader.is-compact { margin-bottom: calc(var(--row) - var(--row-c)); box-shadow: 0 6px 18px -10px rgba(31, 35, 40, .3); }
.appheader.is-compact:has(.tabs) { margin-bottom: calc(var(--row) - var(--row-c) + var(--tab) - var(--tab-c)); }
html { scroll-padding-top: calc(var(--row-c, 37px) + var(--tab-c, 32px) + 12px); }

.appheader-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  height: var(--row);
  transition: height .3s var(--shrink-ease);
}
.appheader.is-compact .appheader-top { height: var(--row-c); }
.appheader-top .brand img { width: 32px; height: 32px; transition: width .3s var(--shrink-ease), height .3s var(--shrink-ease); }
.appheader.is-compact .appheader-top .brand img { width: 22px; height: 22px; }
.appheader-top .logo-word { transition: font-size .3s var(--shrink-ease); }
.appheader.is-compact .appheader-top .logo-word { font-size: 21px; }

.brand { display: block; line-height: 0; }

.crumbs { font-size: 16px; }

/* The AKIKI logo word, drawn by its own colour font (fonts/akiki-pixel.woff2): typing "akiki" becomes the logo. */
@font-face {
  font-family: "AKIKI Pixel";
  src: url("fonts/akiki-pixel.woff2?v=4") format("woff2");
  font-display: block;
}
.logo-word {
  font-family: "AKIKI Pixel", var(--mono);
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0;
  font-variant-ligatures: common-ligatures;
  color: #2f4d5c;
}
.logo-word .cursor { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.crumbs .sep { margin: 0 4px; color: var(--fg-muted); }
.crumbs strong { font-weight: 600; }

.tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tabs a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  height: var(--tab);
  border-bottom: 1px solid transparent;
  transition: height .3s var(--shrink-ease);
  color: var(--fg);
  white-space: nowrap;
}
.tabs a:hover { text-decoration: none; border-bottom-color: var(--border); }
.tabs a .icon { color: var(--fg-muted); }
.tabs a[aria-current] { border-bottom-color: var(--tab-line); font-weight: 600; }
.appheader.is-compact .tabs a { height: var(--tab-c); }

.label {
  display: inline-block;
  padding: 0 7px;
  border: var(--hairline) solid var(--border);
  border-radius: 2em;
  color: var(--fg-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}

/* Layout */

.layout { padding: 24px 0 48px; }
.main-col { display: flex; flex-direction: column; gap: 16px; }

/* Boxes */

.box { border: var(--hairline) solid var(--border); border-radius: 6px; background: var(--bg); }

.box-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg-subtle);
  border-bottom: var(--hairline) solid var(--border);
  border-radius: 6px 6px 0 0;
}
.box-header .icon { color: var(--fg-muted); }
.box-header strong { font-weight: 600; }

.commit-msg { color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.commit-meta { display: flex; align-items: center; gap: 6px; margin-left: auto; color: var(--fg-muted); white-space: nowrap; }

/* File list */

.file-list { margin: 0; padding: 0; list-style: none; }
.file-list li + li { border-top: var(--hairline) solid var(--border-muted); }

.file-list a {
  display: grid;
  grid-template-columns: 16px minmax(0, 170px) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 8px 16px;
  color: var(--fg);
}
.file-list a:hover { background: var(--bg-subtle); text-decoration: none; }
.file-list a:hover .name { color: var(--link); text-decoration: underline; }
.file-list li:last-child a { border-radius: 0 0 6px 6px; }

.file-list .flower { --center: #f2b632; }
.file-list .leaf { color: #3aa56f; }
.file-list .msg { color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-list .when { color: var(--fg-muted); white-space: nowrap; }

@media (max-width: 543px) {
  .commit-msg { display: none; }
  .file-list a {
    grid-template-columns: 16px minmax(0, 1fr);
    grid-template-areas: "icon name" ". msg";
    row-gap: 0;
  }
  .file-list .icon { grid-area: icon; }
  .file-list .name { grid-area: name; }
  .file-list .msg { grid-area: msg; white-space: normal; }
  .file-list .when { display: none; }
}

/* README */

.markdown { padding: 24px 32px 32px; font-size: 16px; line-height: 1.6; }
@media (max-width: 543px) { .markdown { padding: 20px 16px; } }

.markdown > :first-child { margin-top: 0; }
.markdown h2 {
  margin: 32px 0 16px;
  padding-bottom: 0.3em;
  border-bottom: var(--hairline) solid var(--border-muted);
  font-size: 1.5em;
  font-weight: 600;
  line-height: 1.25;
  scroll-margin-top: 16px;
}
.markdown p, .markdown ul, .markdown ol { margin: 0 0 16px; }
.markdown ul { padding-left: 1.5em; }
.markdown li + li { margin-top: 0.5em; }
.markdown hr { height: 1px; margin: 24px 0; border: 0; background: var(--border-muted); }

.hero { text-align: center; scroll-margin-top: 16px; }
.hero-logo { width: clamp(128px, 30vw, 152px); height: auto; }
.hero h1 {
  margin: 12px 0 20px;
  font-size: clamp(2.25rem, 7vw, 3.5rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
/* The motto in the logo's own pixel font; "AI" takes the logo's colours. */
.hero h1.pixel-title {
  font-family: "AKIKI Pixel", var(--mono);
  font-size: clamp(22px, 6.4vw, 54px);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.3;
  letter-spacing: 0;
  font-variant-ligatures: common-ligatures;
  color: #2f4d5c;
}

/* The pixel stripe into the models, after mistral.ai's "sunset stripe": rows of logo pixels
   (pixel-band.svg, drawn by tools/make_pixel_band.py). 13 rows of 8px, 6px on phones,
   running edge to edge across the README. */
.pixel-band {
  --px: 8px;
  height: calc(13 * var(--px));
  margin: 40px -32px 0;
  background: url("pixel-band.svg") 50% 0 / auto 100% repeat-x;
}
.markdown .pixel-band + h2 { margin-top: 28px; }
@media (max-width: 543px) {
  .pixel-band { --px: 6px; margin: 32px -16px 0; }
}

/* Your data: the DNA helix (drawn by tools/make_dna.py). Every rung carries its phase in --p;
   one angle, --dna, turns them all, so each node rises and falls with sin() and grows as it comes
   to the front with cos(). Visitors who ask for less motion see it standing still, twisted. */
@property --dna { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
.dna-frame { margin: 32px 0 20px; scroll-margin-top: 16px; }
.dna { display: block; width: 100%; height: auto; overflow: visible; animation: dna-turn 16s linear infinite; }
@keyframes dna-turn { to { --dna: 360deg; } }
.dna g { --s: sin(var(--dna) + var(--p)); --k: cos(var(--dna) + var(--p)); }
.dna line { stroke: #2f4d5c; stroke-opacity: .18; stroke-width: 1.5; stroke-linecap: round;
  transform-box: fill-box; transform-origin: center; transform: scaleY(var(--s)); }
.dna circle { transform-box: fill-box; transform-origin: center; }
.dna .a { transform: translateY(calc(var(--s) * -40px)) scale(calc(1 + var(--k) * .4)); opacity: calc(.75 + var(--k) * .25); }
.dna .b { transform: translateY(calc(var(--s) * 40px)) scale(calc(1 - var(--k) * .4)); opacity: calc(.75 - var(--k) * .25); }
.markdown .love { font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .dna { animation: none; } }
@media (max-width: 543px) {   /* on phones the helix is shown larger, its two ends cut off */
  .dna-frame { overflow: hidden; padding: 8px 0; margin-left: -16px; margin-right: -16px; }   /* edge to edge */
  .dna { width: 170%; margin-left: -35%; }
}

/* Model profile cards. Each card has its own colour (--c): it marks the top edge, the tint, the
   stat tiles and the score bars; the text itself stays in the page's ink. */

.modules { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0 0 16px; }   /* a card never grows wider than the screen */
.module {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 20px;
  border: var(--hairline) solid var(--border);
  border-top: 3px solid var(--c);
  border-radius: 6px;
  background: linear-gradient(color-mix(in srgb, var(--c) 8%, var(--bg)), var(--bg) 180px);
  scroll-margin-top: 16px;
}
.module-body { flex: 1; min-width: 0; }
.module:target { border-color: var(--tab-line); box-shadow: 0 0 0 1px var(--tab-line); }
.module img { flex: none; width: 120px; height: 120px; }
.module .px-logo { flex: none; width: 96px; height: 96px; margin: 12px; border-radius: 6px; }   /* a pixel icon in place of a drawn logo */
.module h3 { margin: 0 4px 0 0; font-size: 1.25em; font-weight: 600; line-height: 1.25; }
.module-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* Model names in the logo's pixel font. */
.module h3.pixel-name {
  font-family: "AKIKI Pixel", var(--mono);
  font-size: 30px;
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0;
  line-height: 1;
  color: #2f4d5c;
  margin-right: 8px;
}
.chip {
  padding: 0 8px;
  border: var(--hairline) solid var(--border);
  border-radius: 2em;
  background: var(--bg-subtle);
  color: var(--fg-muted);
  font: 12px/20px var(--mono);
  white-space: nowrap;
}
.chip.status { display: inline-flex; align-items: center; gap: 6px; color: var(--fg); background: var(--bg); }
.chip.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.markdown .module-role { margin: 2px 0 8px; color: var(--fg-muted); font-style: italic; }
.markdown .module p:last-child { margin-bottom: 0; }

/* Stat tiles: the number in ink, the model's colour as a bar beside it. */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 16px 0; }
.stats div {
  padding: 8px 10px;
  border-left: 3px solid var(--c);
  border-radius: 0 4px 4px 0;
  background: color-mix(in srgb, var(--c) 7%, var(--bg));
}
.stats dt { color: var(--fg-muted); font-size: 12px; line-height: 1.3; }
.stats dd { margin: 2px 0 0; color: var(--fg); font-size: 20px; font-weight: 600; line-height: 1.2; }

/* Headline scores: label, value, and a bar on a lighter track of the same colour. */
.markdown .scores { display: grid; gap: 10px; margin: 0 0 14px; padding: 0; list-style: none; font-size: 14px; }
.markdown .scores li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; margin: 0; }
.scores b { font-weight: 600; }
.scores i {
  grid-column: 1 / -1;
  height: 6px;
  margin-top: 4px;
  border-radius: 3px;
  background: linear-gradient(var(--c), var(--c)) 0 0 / var(--v) 100% no-repeat, color-mix(in srgb, var(--c) 18%, var(--bg));
}
.markdown .scores .note { display: block; color: var(--fg-muted); }

/* Version notes: a version's details, folded away under its results. The arrow turns as it opens;
   versions.js animates the height, and keeps the notes of a card's tabs open or shut together.
   Without a script they still open and shut, just without the motion. */
.vnotes { margin: 4px 0 0; }
.vnotes > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  list-style: none;
  cursor: pointer;
  color: var(--c, var(--fg));
  font: 600 13px/1.2 var(--mono);
}
.vnotes > summary::-webkit-details-marker { display: none; }
.vnotes > summary::before {
  content: "";
  width: 6px;
  height: 6px;
  margin: 0 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.vnotes[open] > summary::before, .vnotes.is-opening > summary::before { transform: rotate(45deg); }
.vnotes.is-closing > summary::before { transform: rotate(-45deg); }
.vnotes > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.vnotes-body { padding-top: 8px; overflow: hidden; }
.markdown .scores-note { color: var(--fg-muted); font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .vnotes > summary::before { transition: none; } }
.markdown .module .arch { color: var(--fg-muted); font: 12px/1.5 var(--mono); }

/* Version tabs on a model card: one radio button per version, newest first and open. Each tab
   has a little tulip, coloured in rainbow order; the checked radio shows its panel. This works
   without a script. versions.js adds the motion: the coloured line glides to the chosen tab, its
   tulip blooms, and the new version opens in a circle growing from the tulip, with a band of
   rounded pixels in the tab's colour on the circle's edge (--r is that circle's radius). */
@property --r { syntax: "<length>"; inherits: true; initial-value: 0px; }
.versions { margin-top: 16px; }
.version-pick { position: absolute; opacity: 0; pointer-events: none; }
.markdown .version-tabs { position: relative; display: flex; flex-wrap: wrap; gap: 4px; margin: 0; border-bottom: var(--hairline) solid var(--border); }
.version-tabs label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: -1px;
  padding: 6px 10px 7px;
  border-bottom: 2px solid transparent;
  color: var(--fg-muted);
  font: 13px/1.2 var(--mono);
  cursor: pointer;
}
.version-tabs label:hover { color: var(--fg); border-bottom-color: var(--border); }
.version-tabs .icon { --leaf: #3aa56f; --center: #f2b632; width: 20px; height: 20px; color: var(--t); transform-origin: 50% 90%; }
.version-tabs label:nth-of-type(1) { --t: #e65b56; }   /* red */
.version-tabs label:nth-of-type(2) { --t: #ec8e4a; }   /* orange */
.version-tabs label:nth-of-type(3) { --t: #f2b632; }   /* yellow */
.version-tabs label:nth-of-type(4) { --t: #3aa56f; }   /* green */
.version-tabs label:nth-of-type(5) { --t: #6592b4; }   /* blue */
.version-tabs label:nth-of-type(6) { --t: #7c8acb; }   /* indigo */
.version-tabs label:nth-of-type(7) { --t: #a06fc2; }   /* violet */
.version { display: none; }
.version-pick:nth-of-type(1):checked ~ .version-panels > .version:nth-of-type(1),
.version-pick:nth-of-type(2):checked ~ .version-panels > .version:nth-of-type(2),
.version-pick:nth-of-type(3):checked ~ .version-panels > .version:nth-of-type(3),
.version-pick:nth-of-type(4):checked ~ .version-panels > .version:nth-of-type(4),
.version-pick:nth-of-type(5):checked ~ .version-panels > .version:nth-of-type(5),
.version-pick:nth-of-type(6):checked ~ .version-panels > .version:nth-of-type(6),
.version-pick:nth-of-type(7):checked ~ .version-panels > .version:nth-of-type(7) { display: block; }
.version-pick:nth-of-type(1):checked ~ .version-tabs label:nth-of-type(1),
.version-pick:nth-of-type(2):checked ~ .version-tabs label:nth-of-type(2),
.version-pick:nth-of-type(3):checked ~ .version-tabs label:nth-of-type(3),
.version-pick:nth-of-type(4):checked ~ .version-tabs label:nth-of-type(4),
.version-pick:nth-of-type(5):checked ~ .version-tabs label:nth-of-type(5),
.version-pick:nth-of-type(6):checked ~ .version-tabs label:nth-of-type(6),
.version-pick:nth-of-type(7):checked ~ .version-tabs label:nth-of-type(7) {
  border-bottom-color: var(--tab-line, var(--t));
  color: var(--fg);
  font-weight: 600;
}
.version-pick:nth-of-type(1):focus-visible ~ .version-tabs label:nth-of-type(1),
.version-pick:nth-of-type(2):focus-visible ~ .version-tabs label:nth-of-type(2),
.version-pick:nth-of-type(3):focus-visible ~ .version-tabs label:nth-of-type(3),
.version-pick:nth-of-type(4):focus-visible ~ .version-tabs label:nth-of-type(4),
.version-pick:nth-of-type(5):focus-visible ~ .version-tabs label:nth-of-type(5),
.version-pick:nth-of-type(6):focus-visible ~ .version-tabs label:nth-of-type(6),
.version-pick:nth-of-type(7):focus-visible ~ .version-tabs label:nth-of-type(7) {
  outline: 2px solid var(--link);
  outline-offset: -2px;
  border-radius: 6px 6px 0 0;
}
.markdown .version-lead { margin: 0 0 16px; color: var(--fg-muted); font-size: 13px; }   /* under the results, so tabs switch without the figures moving */
.markdown .version-new { font-size: 14px; }
.scores span small { color: var(--fg-muted); font-size: 12px; }   /* a comparison beside a score's label */
.markdown .versions + .version-new { margin-top: 16px; }   /* a card's line after its version tabs */
.nowrap { white-space: nowrap; }
.stats dd small { color: var(--fg-muted); font-size: 12px; font-weight: 400; }
.stats dd.pending { color: var(--fg-muted); font-weight: 400; }
@media (min-width: 544px) { .stats:has(> div:nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); } }   /* a card with five figures keeps them on one row */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Each time a version opens, its score bars fill up. */
.version .scores i { animation: meter-fill .8s cubic-bezier(.2, .8, .2, 1) .25s both; }
.version .scores li:nth-child(2) i { animation-delay: .33s; }
.version .scores li:nth-child(4) i { animation-delay: .49s; }
.version .scores li:nth-child(5) i { animation-delay: .57s; }
.version .scores li:nth-child(6) i { animation-delay: .65s; }
.version .scores li:nth-child(3) i { animation-delay: .41s; }
@keyframes meter-fill { from { background-size: 0 100%; } }

/* The motion added by versions.js. */
.version-ink { display: none; }
.versions.is-live { --tab-line: transparent; }
.versions.is-live .version-ink {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: var(--ink-w, 0);
  height: 2px;
  border-radius: 1px;
  background: var(--ink-c, transparent);
  transform: translate(var(--ink-x, 0), var(--ink-y, 0));
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), width .5s cubic-bezier(.2, .8, .2, 1), background-color .5s;
}
.version-tabs.is-still .version-ink { transition: none; }
.version-tabs label.is-blooming .icon { animation: tulip-bloom .7s cubic-bezier(.2, .8, .2, 1); }
@keyframes tulip-bloom {
  0% { transform: scale(.5) rotate(-16deg); }
  50% { transform: scale(1.22) rotate(8deg); }
  78% { transform: scale(.95) rotate(-3deg); }
  100% { transform: none; }
}
.version-panels { position: relative; }
.version-panels.is-switching {
  overflow: hidden;
  transition: height .55s cubic-bezier(.2, .8, .2, 1);
  animation: bloom-open 1s cubic-bezier(.4, .1, .2, 1) both;
}
@keyframes bloom-open { from { --r: 0px; } to { --r: var(--reach); } }
.version.is-entering { clip-path: circle(var(--r) at var(--ox) var(--oy)); }
.version.is-leaving {
  display: block;
  position: absolute;
  inset: 0 0 auto;
  mask: radial-gradient(circle at var(--ox) var(--oy), transparent var(--r), #000 calc(var(--r) + 1px));
  opacity: .75;
}
.version.is-leaving * { animation: none !important; }
.version-panels.is-switching::before,
.version-panels.is-switching::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  mask-composite: intersect;
}
/* the edge: a band of rounded pixels, full at the front, thinning out behind it */
.version-panels.is-switching::after {
  background: color-mix(in srgb, var(--ring) 78%, var(--bg));
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Crect x='1' y='1' width='8' height='8' rx='2'/%3E%3C/svg%3E") 0 0 / 10px 10px,
        radial-gradient(circle at var(--ox) var(--oy), transparent calc(var(--r) - 22px), #000 calc(var(--r) - 21px), #000 var(--r), transparent calc(var(--r) + 1px));
  mask-composite: intersect;
}
.version-panels.is-switching::before {
  background: color-mix(in srgb, var(--ring) 45%, var(--bg));
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect x='1' y='1' width='8' height='8' rx='2'/%3E%3Crect x='11' y='11' width='8' height='8' rx='2'/%3E%3C/svg%3E") 0 0 / 20px 20px,
        radial-gradient(circle at var(--ox) var(--oy), transparent calc(var(--r) - 52px), #000 calc(var(--r) - 51px), #000 calc(var(--r) - 22px), transparent calc(var(--r) - 21px));
  mask-composite: intersect;
}
@media (prefers-reduced-motion: reduce) {
  .version .scores i, .version-tabs label.is-blooming .icon { animation: none; }
  .versions.is-live .version-ink { transition: none; }
}

@media (max-width: 543px) {
  .module { flex-direction: column; align-items: center; gap: 12px; }
  .module-body { align-self: stretch; }
  .module-head, .markdown .module-role { justify-content: center; text-align: center; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Footer */

.footer { border-top: var(--hairline) solid var(--border-muted); }
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding-top: 32px;
  padding-bottom: 32px;
  color: var(--fg-muted);
  font-size: 12px;
}
.footer-inner img { opacity: 0.7; }
.footer-motto { margin-left: auto; font-style: italic; }

/* The box stack at the top, after mistral.ai's: the bouquet, the small models and what they
   run on. Behind the boxes turns one gear train (gears.svg, drawn by tools/make_gears.py), seen
   through the grey slots. A box slides a fifth of its size out of its slot when the mouse is on
   it (or it has keyboard focus), showing corner handles and the gears behind. Everything is
   sized in --u, one box. */

.stack { container-type: inline-size; margin: 0 0 8px; }
.stack-frame {
  --u: min(172px, 100cqw / 5.1);
  position: relative;
  width: calc(5 * var(--u));
  height: calc(3.3 * var(--u));
  margin: 0 auto;
}
.stack-frame > * {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w, 1) * var(--u));
  height: var(--u);
}
.stack-slot { background: #eef1f4; box-shadow: 0 0 0 var(--hairline) var(--border); }
.stack-frame > .stack-gears { left: 0; top: 0; width: 100%; height: 100%; opacity: .5; pointer-events: none; }
.stack-gears img { display: block; width: 100%; height: 100%; }
.stack-diamond {
  width: calc(.42 * var(--u));
  height: calc(.42 * var(--u));
  margin: calc(-.21 * var(--u)) 0 0 calc(-.21 * var(--u));
  transform: rotate(45deg);
  background: var(--bg-subtle);
  box-shadow: 0 0 0 var(--hairline) var(--border);
}
.stack-box {
  display: flex;
  flex-direction: column;
  padding: calc(.09 * var(--u));
  background: var(--bg);
  box-shadow: 0 0 0 var(--hairline) var(--border);
  color: var(--fg);
  z-index: 1;
  animation: stack-in .6s ease-out calc(var(--i) * .08s) both;
  /* sliding back, a box stays on top until it is home */
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), z-index 0s .45s;
}
.stack-box[data-plan] { box-shadow: 0 0 0 var(--hairline) var(--border), inset 0 calc(.03 * var(--u)) 0 var(--pc); }   /* the plan's own colour along the top edge */
.stack-box:hover { background: var(--bg-subtle); text-decoration: none; }
.stack-box:hover .stack-name { color: var(--link); }
.stack-box:focus-visible,
.stack-box:focus-visible .stack-handles { transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .2s, z-index 0s; }
.stack-box:focus-visible { z-index: 2; transform: translate(calc(var(--mx, 0) * var(--u)), calc(var(--my, 0) * var(--u))); }
.stack-box:focus-visible .stack-handles { opacity: 1; }
@media (hover: hover) {
  .stack-box:hover { z-index: 2; transform: translate(calc(var(--mx, 0) * var(--u)), calc(var(--my, 0) * var(--u))); transition: transform .45s cubic-bezier(.2, .8, .2, 1), z-index 0s; }
  .stack-box:hover .stack-handles { opacity: 1; }
}
.stack-icon { flex: none; width: calc(.22 * var(--u)); height: calc(.22 * var(--u)); }
.stack-computer .stack-icon { width: calc(.55 * var(--u)); }   /* the farm is 15 pixels wide, not 5 */
.stack-spec { position: absolute; top: calc(.09 * var(--u)); right: calc(.09 * var(--u)); color: var(--fg-muted); font: 11px/1 var(--mono); }
.stack-name {
  margin-top: auto;
  font-family: "AKIKI Pixel", var(--mono);
  font-size: calc(.14 * var(--u));
  line-height: 1;
  color: #2f4d5c;
}
.stack-text { margin-top: calc(.06 * var(--u)); font-size: max(12.5px, calc(.08 * var(--u))); line-height: 1.35; }
.stack-handles {
  --h: linear-gradient(var(--fg), var(--fg));
  position: absolute;
  inset: -3px;
  opacity: 0;
  pointer-events: none;
  background: var(--h) left top / 6px 6px no-repeat, var(--h) right top / 6px 6px no-repeat,
              var(--h) left bottom / 6px 6px no-repeat, var(--h) right bottom / 6px 6px no-repeat;
  transition: opacity .2s;
}

/* Where each box sits, and which way (--mx, --my, in boxes) it slides: towards open space. */
.stack-bouquet { --x: 1.5; --y: .15; --w: 2; --i: 0; --my: -.2; }
.stack-orchid { --x: .5; --y: 1.15; --i: 1; --mx: -.2; }
.stack-tulip { --x: 1.5; --y: 1.15; --i: 2; --mx: -.2; }
.stack-jasmine { --x: 2.5; --y: 1.15; --i: 3; --my: .2; }
.stack-daisy { --x: 3.5; --y: 1.15; --i: 4; --mx: .2; }
.stack-magnolia { --x: 3.5; --y: 2.15; --i: 7; --mx: .2; }
.stack-iris { --x: 3.5; --y: .15; --i: 8; --my: -.2; }
.stack-lily { --x: .5; --y: .15; --i: 9; --my: -.2; }
.stack-data { --x: .5; --y: 2.15; --i: 5; --mx: -.2; }
.stack-computer { --x: 1.5; --y: 2.15; --i: 6; --my: .2; }
.stack-thistle { --x: 2.5; --y: 2.15; --i: 10; --my: .2; }

@keyframes stack-in { from { opacity: 0; } }

/* Narrow screens: two columns, no slots, nothing slides. */
@container (max-width: 719px) {
  .stack-frame { --u: 150px; display: grid; grid-template-columns: 1fr 1fr; width: auto; height: auto; }
  .stack-frame > * { position: relative; left: auto; top: auto; width: auto; }
  .stack-slot, .stack-frame > .stack-gears, .stack-diamond, .stack-handles { display: none; }
  .stack-bouquet, .stack-wide { grid-column: span 2; }
  .stack-box.stack-box { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .stack-box { animation: none; transition: none; }
}

/* Two pages, Daisy's team and Butterfly's: the logo and name in the header open a page switcher,
   a dropdown like a code host's repository picker, with a filter and the current page ticked.
   It works as a plain <details> without a script; switch.js adds closing on Escape or a click
   elsewhere, the filter, and arrow keys. Pages cross-fade where the browser supports it. */
@view-transition { navigation: auto; }
.switch { position: relative; }
.switch > summary {
  display: flex;
  align-items: center;
  gap: 8px 12px;
  padding: 2px 6px 2px 0;
  border-radius: 6px;
  list-style: none;
  cursor: pointer;
}
.switch > summary::-webkit-details-marker { display: none; }
.switch > summary:hover .crumbs strong { color: var(--link); }
.switch > summary:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.switch-caret { width: 16px; height: 16px; color: var(--fg-muted); transition: transform .25s; }
.switch[open] .switch-caret { transform: rotate(180deg); }
.switch-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: 0;
  width: min(360px, calc(100vw - 32px));
  padding: 8px;
  border: var(--hairline) solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  box-shadow: 0 8px 24px rgba(31, 35, 40, .14);
  transform-origin: 24px 0;
}
.switch[open] .switch-menu { animation: switch-open .22s cubic-bezier(.2, .8, .2, 1); }
@keyframes switch-open { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.switch-head { padding: 4px 8px 8px; color: var(--fg-muted); font: 600 12px/1.2 var(--mono); }
.switch-filter {
  display: block;
  width: 100%;
  margin: 0 0 6px;
  padding: 6px 10px;
  border: var(--hairline) solid var(--border);
  border-radius: 6px;
  background: var(--bg-subtle);
  color: var(--fg);
  font: 14px/1.4 var(--sans);
}
.switch-filter:focus { outline: 2px solid var(--link); outline-offset: -1px; background: var(--bg); }
.switch-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 6px;
  color: var(--fg);
}
.switch-item:hover, .switch-item:focus-visible, .switch-item.is-active { background: var(--bg-subtle); text-decoration: none; outline: none; }
.switch-item img { flex: none; }
.switch-text { display: grid; gap: 2px; min-width: 0; }
.switch-name { font: 14px/1.3 var(--mono); }
.switch-desc { color: var(--fg-muted); font-size: 12px; line-height: 1.35; }
.switch-check { flex: none; width: 16px; height: 16px; margin-left: auto; color: var(--link); visibility: hidden; }
.switch-item[aria-current] .switch-check { visibility: visible; }
.switch-none { margin: 4px 8px; color: var(--fg-muted); font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .switch[open] .switch-menu { animation: none; } .switch-caret { transition: none; } }

/* The butterfly beats its wings instead of turning. */
.flutter { animation: flutter 3.2s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes flutter { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.8); } }
@media (prefers-reduced-motion: reduce) { .flutter { animation: none; } }
/* Siren's shell rides a gentle swell. */
.float { animation: float 7s ease-in-out infinite; transform-origin: 50% 60%; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .float { animation: none; } }

/* Tables in a card's text, as a code repository shows them; wide ones scroll on their own. */
.table-wrap { margin: 0 0 16px; overflow-x: auto; }
.markdown table { width: 100%; border-collapse: collapse; font-size: 14px; }
.markdown th, .markdown td { padding: 7px 12px; border: var(--hairline) solid var(--border); text-align: left; vertical-align: top; }
.markdown th { background: var(--bg-subtle); font-weight: 600; }
.markdown tbody tr:nth-child(2n) { background: #fbfcfd; }
.markdown td .ti { width: 18px; height: 18px; margin-right: 6px; border-radius: 4px; vertical-align: -4px; }   /* a model's tile, beside its name */
.markdown td .ti + .ti { margin-left: -2px; }

/* Section bar: Overview, one chip per model in its colour, Status. switch.js marks the section
   being read and keeps its chip in view. */
.tabs .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--fg-muted)); }
.tabs a[style] { --tab-line: var(--c); }

/* Phones. The header stays at hand and shrinks by a third once the page scrolls, like on a
   larger screen. The page switcher opens as a sheet from the bottom.
   The box stack becomes compact cards; a button brings the reader back to the top. */
.to-top { display: none; }
@media (max-width: 700px) {
  .markdown h2, .module, .hero, .dna-frame { scroll-margin-top: 0; }
  body { padding-bottom: env(safe-area-inset-bottom); }
  html, body { overflow-x: clip; }   /* nothing may widen the page, or the phone zooms out and leaves a white strip */
  .appheader-top > .switch { min-width: 0; }
  .switch > summary { min-width: 0; }
  .crumbs { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

  .appheader {
    --row: 44px;
    --row-c: 30px;
    --tab: 48px;
    --tab-c: 32px;
    border-bottom: 0;
  }
  .appheader::before {   /* frosted glass, on a layer of its own so the sheet can still be fixed */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in srgb, var(--bg-subtle) 82%, transparent);
    -webkit-backdrop-filter: saturate(1.8) blur(14px);
    backdrop-filter: saturate(1.8) blur(14px);
    border-bottom: var(--hairline) solid var(--border);
  }
  .appheader-top {
    flex-wrap: nowrap;
    justify-content: space-between;
    height: calc(var(--row) + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
  }
  .appheader.is-compact .appheader-top { height: calc(var(--row-c) + env(safe-area-inset-top)); }
  .appheader-top .brand img { width: 28px; height: 28px; }
  .appheader.is-compact .appheader-top .brand img { width: 19px; height: 19px; }
  .logo-word { font-size: 25px; }
  .appheader.is-compact .appheader-top .logo-word { font-size: 18px; }
  .crumbs { font-size: 15px; white-space: nowrap; }
  .appheader-top .label { flex: none; font-size: 11px; }
  @media (max-width: 400px) { .appheader-top .label { display: none; } }

  .tabs {
    gap: 6px;
    padding-top: 4px;
    padding-bottom: 10px;
    scroll-snap-type: x proximity;
    scroll-padding: 0 var(--gutter);
    transition: padding .3s var(--shrink-ease);
  }
  .appheader.is-compact .tabs { padding-top: 2px; padding-bottom: 4px; }
  .appheader.is-compact .tabs a { height: 26px; }
  .tabs a {
    flex: none;
    gap: 6px;
    height: 34px;
    padding: 0 13px;
    border: var(--hairline) solid var(--border);
    border-radius: 999px;
    background: var(--bg);
    font-size: 14px;
    scroll-snap-align: start;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .25s, border-color .25s, color .25s, transform .15s;
  }
  .tabs a:hover { border-bottom-color: var(--border); }
  .tabs a:active { transform: scale(.95); }
  .tabs a .icon { width: 14px; height: 14px; }
  .tabs a[aria-current] {
    border-color: color-mix(in srgb, var(--c, var(--fg)) 55%, transparent);
    background: color-mix(in srgb, var(--c, var(--fg)) 14%, var(--bg));
    font-weight: 600;
  }

  /* The page switcher as a bottom sheet */
  .switch > summary { padding: 4px 6px 4px 0; -webkit-tap-highlight-color: transparent; }
  .switch[open] > summary::after {   /* the dimmed page behind; a tap on it closes the sheet */
    content: "";
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(15, 23, 30, .42);
    animation: sheet-dim .25s ease-out;
    cursor: default;
  }
  .switch-menu {
    position: fixed;
    z-index: 41;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-height: 80vh;
    overflow-y: auto;
    padding: 6px 12px calc(16px + env(safe-area-inset-bottom));
    border: 0;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 40px rgba(15, 23, 30, .25);
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
  .switch-menu::before {   /* the drag handle */
    content: "";
    display: block;
    width: 40px;
    height: 5px;
    margin: 4px auto 10px;
    border-radius: 3px;
    background: var(--border);
  }
  .switch[open] .switch-menu { animation: sheet-up .38s cubic-bezier(.2, .9, .25, 1); }
  .switch-menu.is-dragging { transition: none; }
  .switch-menu.is-leaving { transition: transform .25s ease-in; }
  .switch-head { padding: 0 8px 10px; font-size: 13px; text-align: center; }
  .switch-filter { padding: 10px 12px; border-radius: 10px; font-size: 16px; margin-bottom: 8px; }
  .switch-item { gap: 14px; padding: 14px 12px; border-radius: 12px; -webkit-tap-highlight-color: transparent; }
  .switch-item + .switch-item { margin-top: 2px; }
  .switch-item img { width: 36px; height: 36px; padding: 6px; border-radius: 10px; background: var(--bg-subtle); }
  .switch-item[aria-current] { background: color-mix(in srgb, var(--link) 9%, var(--bg)); }
  .switch-item:active { background: var(--bg-subtle); }
  .switch-name { font-size: 15px; }
  .switch-desc { font-size: 13px; }
  .switch-check { width: 20px; height: 20px; }
  body:has(.switch[open]) { overflow: hidden; }

  /* Room for the cards: the README frame steps back on phones */
  .readme.box { border-left: 0; border-right: 0; border-radius: 0; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
  .module { border-radius: 14px; }

  .to-top {
    position: fixed;
    z-index: 25;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: var(--hairline) solid var(--border);
    border-radius: 50%;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 20px rgba(31, 35, 40, .18);
    color: var(--fg);
    opacity: 0;
    transform: translateY(12px) scale(.9);
    pointer-events: none;
    transition: opacity .25s, transform .25s cubic-bezier(.2, .8, .2, 1);
    -webkit-tap-highlight-color: transparent;
  }
  .to-top.is-shown { opacity: 1; transform: none; pointer-events: auto; }
  .to-top svg { width: 20px; height: 20px; }
}
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes sheet-dim { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .appheader, .appheader-top, .appheader-top .brand img, .appheader-top .logo-word, .tabs, .tabs a, .to-top { transition: none; }
  .switch[open] .switch-menu, .switch[open] > summary::after { animation: none; }
}

/* The stack on phones: compact cards, the icon beside the name, two to a row. */
@container (max-width: 719px) {
  .stack-frame { gap: 8px; }
  .stack-frame > .stack-box {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    align-content: start;
    column-gap: 10px;
    row-gap: 6px;
    height: auto;
    padding: 12px;
    border-radius: 12px;
    animation-delay: calc(var(--i) * .04s);
  }
  .stack-box .stack-icon { width: 30px; height: 30px; }
  .stack-computer .stack-icon { width: 66px; }
  .stack-box .stack-name { min-width: 0; margin: 0; font-size: min(20px, 4.4cqw); }
  .stack-box .stack-text { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--fg-muted); }
  .stack-box .stack-spec { position: static; grid-row: 3; grid-column: 1 / -1; font-size: 11px; }
  .stack-box:active { background: var(--bg-subtle); }
}

/* Read more: a model's description shows its first two lines, fading out, until "Read more"
   opens it (switch.js; the height is animated there). */
.markdown .desc > :last-child { margin-bottom: 0; }
.markdown .desc { margin-bottom: 8px; }
.markdown .desc.is-short { margin-bottom: 16px; }
.desc.is-shut, .desc.is-moving { overflow: hidden; }
.desc.is-shut { height: 3.2em; height: 2lh; -webkit-mask: linear-gradient(#000 50%, transparent); mask: linear-gradient(#000 50%, transparent); }
.desc-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 16px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--c, var(--link));
  font: 600 13px/1.4 var(--mono);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.desc-more:hover span { text-decoration: underline; }
.desc-more:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 4px; }
.desc-more svg { width: 16px; height: 16px; transition: transform .3s; }
.desc-more[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .desc-more svg { transition: none; } }

/* Home: the whole team on one square board, Daisy's flowers (PLAN 1) and Butterfly's insects
   (PLAN 2), with a few empty slots. home.js swaps neighbours every five seconds: one tile lifts
   over the other, or a tile slides into an empty slot. Each tile leads to its model's card. */
.board-wrap {
  display: grid;
  place-items: center;
  min-height: calc(100svh - 56px - var(--hairline));   /* the screen under the header */
  padding: 32px var(--gutter) 48px;
}
.board {
  --gap: clamp(8px, 1.6vw, 14px);
  --pad: clamp(10px, 2vw, 18px);
  --cell: min(118px, (100vw - 2 * var(--gutter) - 2 * var(--pad) - 4 * var(--gap)) / 5);
  --step: calc(var(--cell) + var(--gap));
  position: relative;
  width: calc(5 * var(--cell) + 4 * var(--gap) + 2 * var(--pad));
  aspect-ratio: 1;
  border: var(--hairline) solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  box-shadow: 0 1px 2px rgba(31, 35, 40, .04), 0 18px 48px -28px rgba(31, 35, 40, .35);
}
.slot, .tile {
  position: absolute;
  left: calc(var(--pad) + var(--x) * var(--step));
  top: calc(var(--pad) + var(--y) * var(--step));
  width: var(--cell);
  height: var(--cell);
  border-radius: 8px;
}
.slot { background: #eef1f4; box-shadow: inset 0 0 0 var(--hairline) var(--border); }
.tile {
  z-index: 2;
  box-shadow: 0 1px 2px rgba(31, 35, 40, .12), 0 6px 14px -8px rgba(31, 35, 40, .35);
  transition: box-shadow .45s;
}
.tile svg { display: block; width: 100%; height: 100%; border-radius: 8px; }
.tile.is-over { z-index: 4; box-shadow: 0 2px 4px rgba(31, 35, 40, .12), 0 22px 34px -14px rgba(31, 35, 40, .45); }
.tile.is-under { z-index: 1; }
.tile::after {   /* the model's name, on hover or keyboard focus */
  content: attr(aria-label);
  position: absolute;
  left: 50%;
  top: 100%;
  z-index: 5;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--fg);
  color: #fff;
  font: 12px/1.3 var(--mono);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 2px);
  transition: opacity .15s, transform .15s;
  pointer-events: none;
}
.tile:hover, .tile:focus-visible { z-index: 5; text-decoration: none; }
.tile:hover::after, .tile:focus-visible::after { opacity: 1; transform: translate(-50%, 8px); }
.tile:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }

/* Workbench (workbench.html): the template field on the left; on the right, a panel a quarter of
   the page wide (its left edge can be dragged) with two screens above the tiles. Tiles move between
   the panel and the field's squares; dropped near another tile, a tile is pulled into the square
   beside it and a magnet bar joins the two. The screens add up the size and the latency of the
   joined group. workbench.js does the moving and the counting. */
.bench-page { overflow: hidden; }
.bench {
  --tray: 25%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 12px var(--tray);
  height: calc(100svh - 57px);
}
.field {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 52px 28px 28px 180px;   /* the screens and the keys stand in the left-hand margin (28 + 124 + 28) */
  overflow: hidden;
  background:
    radial-gradient(ellipse at 22% 18%, rgba(53, 173, 176, .18), transparent 55%),
    radial-gradient(ellipse at 85% 92%, rgba(194, 84, 158, .14), transparent 50%),
    linear-gradient(160deg, #1d2833, #11181f);
  color: #c9d4de;
  user-select: none;
  -webkit-user-select: none;
}
.field::before {   /* a fine dot grid, like a cutting mat */
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1.6px);
  background-size: 18px 18px;
  pointer-events: none;
}
.field-head {
  position: absolute;
  top: 14px;
  left: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.field-title { font-family: "AKIKI Pixel", var(--mono); font-size: 18px; line-height: 1; color: rgba(255, 255, 255, .38); }
.gridsize { position: relative; z-index: 9; }   /* the grid's size, where the field's title was (workbench.js) */
.gridsize-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 9px 0 11px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 9px;
  background: rgba(255, 255, 255, .05);
  color: #ffc14d;
  font: 400 18px/1 "AKIKI Pixel", var(--mono);
  text-shadow: 0 0 8px rgba(255, 170, 40, .55);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s, border-color .15s;
}
.gridsize-btn:hover, .gridsize.is-open .gridsize-btn { background: rgba(255, 255, 255, .11); border-color: rgba(255, 193, 77, .45); }
.gridsize-btn:focus-visible { outline: 2px solid #7fd6d8; outline-offset: 2px; }
.gridsize-caret { width: 14px; height: 14px; color: rgba(255, 255, 255, .6); transition: transform .2s; }
.gridsize.is-open .gridsize-caret { transform: rotate(180deg); }
.gridsize-list {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  min-width: 100%;
  margin: 0;
  padding: 5px;
  list-style: none;
  border-radius: 10px;
  background: rgba(9, 13, 18, .96);
  box-shadow: 0 0 0 1px rgba(255, 193, 77, .35), 0 16px 30px -10px #000;
  transform-origin: 50% 0;
}
.gridsize-list[hidden] { display: none; }
.gridsize-list:focus { outline: none; }
.gridsize-list li { padding: 8px 12px; border-radius: 6px; color: rgba(255, 228, 180, .8); font: 400 17px/1 "AKIKI Pixel", var(--mono); white-space: nowrap; cursor: pointer; }
.gridsize-list li:hover, .gridsize-list li.is-hot { background: rgba(255, 193, 77, .14); color: #ffc14d; }
.gridsize-list li[aria-selected="true"] { color: #ffc14d; text-shadow: 0 0 8px rgba(255, 170, 40, .6); }
.gridsize-list li[aria-selected="true"]::after { content: " \2022"; }
.field-clear {
  padding: 4px 11px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .62);
  font: 12px/1.4 var(--mono);
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.field-clear:hover { background: rgba(255, 255, 255, .13); color: #fff; }
.field-clear:focus-visible { outline: 2px solid #7fd6d8; outline-offset: 2px; }
.field-grid {
  --cell: 96px;
  --gap: 12px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols, 8), var(--cell));
  grid-auto-rows: var(--cell);
  gap: var(--gap);
}
.cell {
  position: relative;
  border-radius: 10px;
  background: rgba(255, 255, 255, .03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  transition: background-color .15s, box-shadow .15s;
}
.cell::before {   /* a small cross at the centre of each empty square */
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  background: linear-gradient(rgba(255, 255, 255, .14), rgba(255, 255, 255, .14)) center / 1px 100% no-repeat,
              linear-gradient(rgba(255, 255, 255, .14), rgba(255, 255, 255, .14)) center / 100% 1px no-repeat;
}
.cell.is-target {
  background: color-mix(in srgb, var(--tc) 20%, transparent);
  box-shadow: inset 0 0 0 2px var(--tc), 0 0 24px color-mix(in srgb, var(--tc) 50%, transparent);
}
.cell.is-target.is-magnet { animation: magnet-pull .55s ease-in-out infinite alternate; }
@keyframes magnet-pull { to { box-shadow: inset 0 0 0 3px var(--tc), 0 0 34px color-mix(in srgb, var(--tc) 75%, transparent); } }
.joint {   /* the magnet bar between two joined tiles */
  position: absolute;
  z-index: 1;
  border-radius: 5px;
  background: linear-gradient(var(--dir), var(--a), var(--b));
  box-shadow: 0 0 10px color-mix(in srgb, var(--a) 55%, transparent);
  opacity: .55;
  pointer-events: none;
  transition: opacity .3s;
}
.joint.is-active { opacity: 1; box-shadow: 0 0 16px color-mix(in srgb, var(--a) 80%, transparent), 0 0 4px #fff; }
.joint.is-new { animation: joint-in .45s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes joint-in { from { transform: scale(0); opacity: 0; } 40% { opacity: 1; filter: brightness(2); } }

.wtile {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 8px 18px -10px rgba(0, 0, 0, .55);
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow .3s;
}
.wtile svg { display: block; width: 100%; height: 100%; border-radius: 9px; }
.wtile:focus-visible { outline: 2px solid #7fd6d8; outline-offset: 3px; }
.cell .wtile.is-active { box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 0 24px 3px color-mix(in srgb, var(--tc) 70%, transparent); }
.wtile.is-dragging {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  cursor: grabbing;
  pointer-events: none;
  box-shadow: 0 22px 44px -14px rgba(0, 0, 0, .55), 0 0 0 2px rgba(255, 255, 255, .6);
  transition: width .18s ease-out, height .18s ease-out;
}
.cell .wtile::after {   /* the name, on hover or keyboard focus */
  content: attr(data-name);
  position: absolute;
  left: 50%;
  top: 100%;
  z-index: 5;
  padding: 3px 9px;
  border-radius: 999px;
  background: #f6f8fa;
  color: #1f2328;
  font: 12px/1.3 var(--mono);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 2px);
  transition: opacity .15s, transform .15s;
  pointer-events: none;
}
.cell .wtile:hover, .cell .wtile:focus-visible { z-index: 6; }
.cell .wtile:hover::after, .cell .wtile:focus-visible::after { opacity: 1; transform: translate(-50%, 7px); }

/* Roles (tiles.js; workbench.js). Every tile keeps its own icon and colour; a badge at its top right,
   lettered, says its role: I an input (blue) takes the data in, Fn a function
   (amber) works on it, O an output (teal) gives the result, in the site's mono capitals (the pixel
   font is unicase, and these are capitals). The three share one badge: the same
   square, size, edge and letters, only the colour and the letter change. The Chat window, both an
   input and an output, is split in both colours and says both in the panel; on the field it wears the
   one it plays (workbench.js sets data-badge and data-plays). An attachment (a brain, a database, a
   folder) keeps a small hollow square, the lens a small round mark. The badge has a white edge and a
   faint dark outline, so it reads on light and dark tiles alike; each role colour is above 4.5:1
   against its white letters. It scales with the tile (container units) but never below 12px. */
.bench { --role-start: #1f6fd1; --role-middle: #b35f00; --role-end: #0d7f86; --role-att: #5f6b7a; --role-lens: #7048c8; }
.wtile { --rc: var(--role-middle); }
.wtile[data-role="start"] { --rc: var(--role-start); }
.wtile[data-role="end"] { --rc: var(--role-end); }
.wtile[data-role="both"] { --rc: var(--role-start); }
.wtile[data-role="attachment"] { --rc: var(--role-att); }
.wtile { container-type: inline-size; }
.wtile::before {   /* the role square: a small mark for an attachment or the lens; the badge below for I, Fn and O */
  content: "";
  position: absolute;
  left: 87%;
  top: 12%;
  z-index: 1;
  width: max(6px, 11.5%);
  aspect-ratio: 1;
  box-sizing: border-box;
  border: 1.5px solid #fff;
  border-radius: 2px;
  background: var(--rc);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .3);
  pointer-events: none;
}
.wtile[data-badge]::before {   /* the role badge */
  content: attr(data-badge);
  left: auto;
  right: 4%;
  top: 4%;
  display: grid;
  place-items: center;
  width: auto;
  min-width: max(12px, 27cqw);
  height: max(12px, 27cqw);
  aspect-ratio: auto;
  padding: 0 max(1px, 3cqw);
  border-width: max(1px, 1.6cqw);
  border-radius: max(2px, 4.5cqw);
  color: #fff;
  font: 700 max(8.5px, 14cqw)/1 var(--mono);
  letter-spacing: -.02em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
  white-space: nowrap;
}
.wtile[data-role="both"]::before { background: linear-gradient(135deg, var(--role-start) 50%, var(--role-end) 50%); }
.wtile[data-role="attachment"]::before { background: transparent; }
.wtile[data-role="lens"]::before { border-radius: 50%; background: var(--role-lens); }   /* a lens: a round mark */
.wtile[data-plays="start"]::before { background: var(--role-start); }   /* on the field: the role it plays now */
.wtile[data-plays="middle"]::before { background: var(--role-middle); }
.wtile[data-plays="end"]::before { background: var(--role-end); }
.dock .wtile::before { display: none; }   /* docked, an attachment says what it is by where it sits */
.wtile.is-ghost { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; transform-origin: top left; }

/* The live guide (workbench.js). The square under a just-placed or dragged tile glows softly green
   (it joins rightly) or red (it does not), with a tick or a cross so colour is not the only sign;
   the cross gives its reason when hovered or pressed. Ghosts: faint tiles in a free square, each
   with one word, that a press places. A complete team marks its "input" and "output"; FLOW sends an
   arrow through it. */
.cell.is-ok, .cell.is-target.is-ok { box-shadow: 0 0 0 2px rgba(63, 201, 128, .85), 0 0 20px rgba(63, 201, 128, .4); }
.cell.is-bad, .cell.is-target.is-bad { box-shadow: 0 0 0 2px rgba(255, 107, 99, .9), 0 0 20px rgba(255, 90, 80, .4); }
.fit-mark {
  position: absolute; left: -7px; top: -7px; z-index: 8;
  display: grid; place-items: center; width: 18px; height: 18px; padding: 0;
  border: 1.5px solid #fff; border-radius: 50%;
  background: #1f8f55; color: #fff; font: 700 10px/1 var(--mono);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5); cursor: help;
}
.cell.is-bad > .fit-mark { background: #c8372f; }
.ghost { position: absolute; inset: 0; z-index: 2; }
.ghost-face {
  position: absolute; inset: 0; padding: 0; border: 1.5px dashed rgba(255, 255, 255, .55); border-radius: 9px;
  background: transparent; opacity: .5; cursor: pointer; transition: opacity .15s;
  color: color-mix(in srgb, var(--tc) 55%, #fff);
}
.ghost-face[data-kind="code"] { border-radius: 2px; }
.ghost-face:hover, .ghost-face:focus-visible { opacity: .9; outline: none; }
.ghost-face svg { display: block; width: 100%; height: 100%; border-radius: 8px; }
.ghost-word { position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); padding: 1px 6px; border-radius: 999px; background: rgba(9, 13, 18, .85); color: #fff; font: 600 10px/1.4 var(--mono); white-space: nowrap; }
.ghost-more { position: absolute; right: -6px; top: -6px; z-index: 3; padding: 1px 5px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 999px; background: rgba(9, 13, 18, .9); color: #ffe2a8; font: 600 10px/1.4 var(--mono); cursor: pointer; }
.chain-mark { position: absolute; left: 50%; top: -9px; z-index: 7; transform: translateX(-50%); padding: 0 6px; border-radius: 4px; background: #ffc14d; color: #1b1405; font: 400 11px/1.5 "AKIKI Pixel", var(--mono); white-space: nowrap; pointer-events: none; box-shadow: 0 0 10px rgba(255, 170, 40, .55); }
.flow-layer { position: absolute; inset: 0; z-index: 9; pointer-events: none; }
.flow-arrow { position: absolute; left: 0; top: 0; width: 0; height: 0; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 16px solid #ffc14d; margin: -9px 0 0 -8px; filter: drop-shadow(0 0 6px rgba(255, 170, 40, .95)); transform-origin: 8px 9px; }
.flow-path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flow-path line { stroke: #ffc14d; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 7; filter: drop-shadow(0 0 4px rgba(255, 170, 40, .9)); }
.flow-arrow.is-fix { border-left-color: #ff8a80; filter: drop-shadow(0 0 6px rgba(255, 110, 100, .95)); }   /* the fix round: the brain sends one function back to work */
.flow-path line.is-fix { stroke: #ff8a80; stroke-dasharray: 8 5; filter: drop-shadow(0 0 4px rgba(255, 110, 100, .9)); }
.key-word { font: 400 20px/1 "AKIKI Pixel", var(--mono); letter-spacing: .04em; text-shadow: 0 0 6px rgba(255, 170, 40, .85); }
.key-flow.is-off .key-face, .key-try.is-off .key-face { filter: saturate(.3) brightness(.7); }
.key-try[aria-expanded="true"] .key-face {   /* the chat open: the key glows, as CODE's does */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .17), inset 0 0 0 1px rgba(255, 193, 77, .6), 0 0 20px rgba(255, 170, 40, .3);
}
.key-flow.is-running .key-face { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .17), inset 0 0 0 1px rgba(255, 193, 77, .6), 0 0 20px rgba(255, 170, 40, .3); }

/* Three looks (tiles.js "kind"). An AI model is filled with its colour, rounded, and glows softly,
   as if alive: brains and the lens attach to these. CODE (no brain, always does the same) is a
   blueprint: outlined in its colour, square corners, a faint grid, a "</>" instead of a creature,
   no glow. A hybrid (a model plus code checks) is an AI tile with a small "</>" in its corner.
   Data keeps its own look. On the dark field a code tile's ink is lightened to stay above 3:1. */
.wtile[data-kind="ai"] svg, .wtile[data-kind="hybrid"] svg:not(.hy-mark) { animation: alive 5s ease-in-out infinite alternate; }
@keyframes alive {
  from { filter: drop-shadow(0 0 2px color-mix(in srgb, var(--tc) 35%, transparent)); }
  to { filter: drop-shadow(0 0 7px color-mix(in srgb, var(--tc) 60%, transparent)); }
}
.wtile[data-kind="code"] {
  --ink: color-mix(in srgb, var(--tc) 82%, #000);
  border-radius: 2px;
  color: var(--ink);
  background-color: color-mix(in srgb, var(--tc) 9%, #fff);
  background-image:
    linear-gradient(color-mix(in srgb, var(--tc) 16%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--tc) 16%, transparent) 1px, transparent 1px);
  background-size: 12.5% 12.5%;
  box-shadow: inset 0 0 0 2px var(--ink);
}
.cell .wtile[data-kind="code"] { --ink: color-mix(in srgb, var(--tc) 55%, #fff); background-color: color-mix(in srgb, var(--tc) 14%, #0e141a); }
.wtile[data-kind="code"] svg { border-radius: 2px; }
.cell .wtile[data-kind="code"].is-active { box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 2px rgba(255, 255, 255, .9); }
.wtile .hy-mark { position: absolute; left: 6%; bottom: 6%; width: 30%; height: auto; aspect-ratio: 1; padding: 1px; box-sizing: border-box; border-radius: 3px; background: rgba(15, 20, 26, .78); color: #fff; }
.field-legend .lg-kind i { border: 0; border-radius: 3px; background: #c9d4de; box-shadow: 0 0 6px rgba(201, 212, 222, .7); }
.field-legend .lg-team { display: inline-flex; align-items: center; gap: 6px; padding: 0 6px; border: 1px dashed rgba(255, 255, 255, .28); border-radius: 6px; background: none; color: inherit; font: inherit; cursor: help; pointer-events: auto; }
.field-legend .lg-team:hover { border-color: rgba(255, 193, 77, .6); color: #ffc14d; }
.field-legend .lg-team:focus-visible { outline: 2px solid #7fd6d8; outline-offset: 2px; }
.field-legend .lg-team i { border: 0; width: 7px; height: 12px; border-radius: 1px; background: linear-gradient(var(--role-middle) 0 5px, transparent 5px 7px, var(--role-middle) 7px); box-shadow: none; }   /* two function squares, one above the other */
.field-legend .lg-kind[data-kind="code"] i { border-radius: 0; background: transparent; box-shadow: inset 0 0 0 1.5px #c9d4de; }
.field-legend .lg-kind[data-kind="data"] i { background: #5f6b7a; box-shadow: none; }
.field-legend .lg-kind:first-of-type { margin-left: 10px; }

/* A fitted joint (workbench.js, joints): the facing sides of two tiles that fit are notched, and a
   key in their two colours sits in both notches. The notch depths are animatable properties, so a
   new joint keys in. A pair that does not fit keeps the plain magnet bar. */
@property --nl { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@property --nr { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@property --nt { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@property --nb { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.wtile.is-keyed svg:not(.hy-mark) {
  -webkit-mask:
    linear-gradient(#000 0 0) left center / var(--nl) 30% no-repeat,
    linear-gradient(#000 0 0) right center / var(--nr) 30% no-repeat,
    linear-gradient(#000 0 0) center top / 30% var(--nt) no-repeat,
    linear-gradient(#000 0 0) center bottom / 30% var(--nb) no-repeat,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) left center / var(--nl) 30% no-repeat,
    linear-gradient(#000 0 0) right center / var(--nr) 30% no-repeat,
    linear-gradient(#000 0 0) center top / 30% var(--nt) no-repeat,
    linear-gradient(#000 0 0) center bottom / 30% var(--nb) no-repeat,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.wtile svg { transition: --nl .32s cubic-bezier(.3, 1.4, .5, 1), --nr .32s cubic-bezier(.3, 1.4, .5, 1), --nt .32s cubic-bezier(.3, 1.4, .5, 1), --nb .32s cubic-bezier(.3, 1.4, .5, 1); }
.joint.is-keyed { z-index: 3; border-radius: 2px; opacity: 1; background: linear-gradient(var(--dir), var(--a) 0 50%, var(--b) 50%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.joint.is-keyed.is-active { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 0 10px color-mix(in srgb, var(--a) 70%, transparent); }
/* A lens on the model it serves: a glass lens across the gap, not the key that passes work on. */
.joint.is-lens {
  z-index: 3;
  opacity: 1;
  border: 2px solid rgba(255, 255, 255, .85);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .75), rgba(184, 160, 255, .45) 45%, rgba(112, 72, 200, .55));
  box-shadow: 0 0 0 1px rgba(112, 72, 200, .7), 0 0 14px rgba(160, 130, 255, .55);
}
.joint.is-lens.is-new { animation: key-in .5s .12s cubic-bezier(.3, 1.5, .5, 1) both; }
.joint.is-keyed.is-new { animation: key-in .5s .12s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes key-in { from { transform: scale(.2); opacity: 0; filter: brightness(2); } 55% { opacity: 1; } }

/* Attachments docked on a tile of the field: small, at its lower right corner. */
.dock { position: absolute; right: -9%; bottom: -9%; z-index: 7; display: flex; flex-direction: row-reverse; gap: 3px; pointer-events: none; transition: opacity .2s; }
.dock .wtile { width: calc(var(--cell) * .4); height: calc(var(--cell) * .4); border-radius: 7px; pointer-events: auto; box-shadow: 0 0 0 2px #151e27, 0 4px 10px rgba(0, 0, 0, .5); }
.dock .wtile svg { border-radius: 7px; }
.dock .wtile::before { inset: 2px; border-width: 1px; border-radius: 5px; }
.dock.is-away { opacity: .25; }
/* A tile using its team's brain (workbench.js, teamBrains): a faded copy of that brain, dashed, at its corner. */
.team-brain { pointer-events: none; position: absolute; right: -9%; bottom: -9%; z-index: 6; width: calc(var(--cell) * .34); height: calc(var(--cell) * .34); border-radius: 7px; opacity: .72; outline: 1.5px dashed rgba(255, 255, 255, .85); outline-offset: -1px; box-shadow: 0 0 0 2px #151e27; }
.team-brain svg { display: block; width: 100%; height: 100%; border-radius: 7px; }
.cell.is-host > .wtile { box-shadow: 0 0 0 3px #fff, 0 0 26px rgba(255, 255, 255, .55); }

/* TesT's verdict on a tile at fault: a red ring, and its name under it. */
.cell .wtile.is-wrong { z-index: 5; box-shadow: 0 0 0 3px #ff6b63, 0 0 26px 6px rgba(255, 90, 80, .6); animation: wrong-glow 1.1s ease-in-out infinite alternate; }
.cell .wtile.is-wrong::after { opacity: 1; transform: translate(-50%, 7px); background: #ff6b63; color: #fff; }
@keyframes wrong-glow { to { box-shadow: 0 0 0 3px #ff6b63, 0 0 10px 2px rgba(255, 90, 80, .35); } }

/* The colours' key, under the squares; and a short line the field says (an attachment with nowhere to go). */
.field-legend { position: absolute; left: 180px; right: 24px; bottom: 6px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; color: rgba(255, 255, 255, .7); font: 11px/1.3 var(--mono); pointer-events: none; }
.field-legend span { display: inline-flex; align-items: center; gap: 6px; }
.field-legend i { box-sizing: border-box; width: 11px; height: 11px; border: 2px solid #fff; border-radius: 3px; background: var(--role-middle); }   /* the role squares, as on the tiles */
.field-legend [data-role="start"] i { background: var(--role-start); }
.field-legend [data-role="end"] i { background: var(--role-end); }
.field-legend [data-role="both"] i { background: linear-gradient(135deg, var(--role-start) 50%, var(--role-end) 50%); }
.field-legend [data-role="attachment"] i { background: transparent; }
.field-legend [data-role="lens"] i { border-radius: 50%; background: var(--role-lens); }
.field-tip { position: absolute; left: 50%; top: 46px; z-index: 8; max-width: min(460px, calc(100% - 32px)); margin: 0; padding: 7px 13px; border-radius: 10px; background: rgba(9, 13, 18, .92); box-shadow: 0 0 0 1px rgba(255, 193, 77, .5); color: #ffe2a8; font: 12px/1.4 var(--mono); text-align: center; transform: translateX(-50%); pointer-events: none; }
.field-tip[hidden] { display: none; }
@media (min-width: 701px) { .field-tip { left: calc(50% + 76px); max-width: min(460px, calc(100% - 196px)); } }   /* centred over the squares, clear of the screens and keys at the left */

/* What TesT found, above the panel's tiles: the reason in one sentence and, when a tile is at
   fault, the "Fits here" filter showing only the tiles that could take its place. */
.fix { margin: 10px 16px 0; padding: 10px 12px; border: 1px solid #f0b4ae; border-radius: 8px; background: #fff4f3; color: var(--fg); font-size: 12.5px; line-height: 1.45; }
.fix[hidden], .filters .chip[hidden] { display: none; }
.fix.is-pass { border-color: #9fd3cf; background: #effaf9; }
.fix-say { margin: 0; font-weight: 600; }
.fix-what { margin: 4px 0 0; color: var(--fg-muted); }
.fix-what:empty { display: none; }
.fix-all { margin-top: 8px; padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--fg); font: 600 11px/1.4 var(--mono); cursor: pointer; }
.fix-all:hover { border-color: #afb8c1; }
.fix-all:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.fix.is-pass .fix-all { display: none; }
.chip-fix[aria-pressed="true"] { border-color: #b3261e; background: #b3261e; }

/* The keys, at the field's left: dark keycaps with amber pixel letters, like the screens. TesT's
   row of lights, in the rainbow order of the version tabs, runs while a test runs and tells how it
   ended. Download is not ready yet. CODE opens the code that joins the team, in the panel; TRY opens
   the chat that asks Daisy for real (on a chain that passes TesT). The three screens stand ABOVE the
   keys, on a plate of their own (Laurent, 2026-10-08: "I like the way the numbers look (the pixels).
   Just make sure it fits and looks good in the context of the buttons"): same width, same face. */
.field-keys {
  position: absolute;
  top: 50%;
  left: 28px;
  z-index: 3;
  display: grid;
  gap: 14px;
  width: 124px;
  transform: translateY(-50%);
}
.field-keys .key { height: 72px; }   /* a little shorter than they were (82 px): the screens stand above them now */
/* The screens' plate: a key's face that is not pressed, holding the three readouts; each readout is
   its label with its unit at the right, over a screen the plate's full width (the canvas paints its
   digits to whatever size the screen is, so the pixels stay as large as they were in the panel). */
.field-keys .meters {
  display: grid;
  gap: 9px;
  margin-bottom: 7px;   /* the plate's side, drawn under it as a key's is */
  padding: 10px 9px 11px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(#2e3c4a, #1b252f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .17), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 7px 0 #06090d, 0 7px 0 1px rgba(255, 255, 255, .07), 0 25px 30px -14px rgba(0, 0, 0, .95);
}
.field-keys .meter { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 4px; row-gap: 4px; }
.field-keys .meter-label { color: #9fb0bf; font-size: 8px; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.field-keys .meter-row { display: contents; }
.field-keys .screen {
  grid-column: 1 / -1;
  grid-row: 2;
  flex: none;
  width: 100%;
  height: 28px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 2px 6px rgba(0, 0, 0, .65), 0 0 0 1px #06090d, 0 1px 0 1px rgba(255, 255, 255, .08);
}
.field-keys .unit { grid-column: 2; grid-row: 1; min-width: 0; color: #ffc14d; font: 700 9px/1 var(--mono); text-shadow: 0 0 5px rgba(255, 170, 40, .7); }
.field-keys .meter-note {
  display: -webkit-box;
  overflow: hidden;
  padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: #9fb0bf;
  font-size: 10px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;   /* the whole note in its title (workbench.js) */
}
.field-keys .meter-note[hidden] { display: none; }
.key {
  position: relative;
  display: block;
  width: 100%;
  height: 82px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: #06090d;   /* the key's side, seen under its face */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 18px 30px -14px rgba(0, 0, 0, .95);
  color: #ffc14d;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.key-face {
  position: absolute;
  inset: 0 0 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border-radius: 14px;
  background: linear-gradient(#2e3c4a, #1b252f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .17), inset 0 0 0 1px rgba(255, 255, 255, .06);
  transition: transform .09s, filter .2s;
}
.key:hover .key-face { filter: brightness(1.16); }
.key:active .key-face { transform: translateY(5px); }
.key:focus-visible { outline: 2px solid #7fd6d8; outline-offset: 3px; }
.key-label { display: block; height: 20px; overflow: visible; filter: drop-shadow(0 0 3px rgba(255, 170, 40, .85)); }   /* dot-matrix letters: capitals stay capitals */
.key-label path { fill: none; stroke: currentColor; stroke-width: .78; stroke-linecap: round; }
.key-label .off { opacity: .1; }
.key-download .key-label { height: 14px; }
.key-soon, .key-download.is-soon .key-label:not(.key-soon) { display: none; }
.key-download.is-soon .key-soon { display: block; }
.key-icon { width: 13px; height: 19px; fill: currentColor; filter: drop-shadow(0 0 4px rgba(255, 170, 40, .8)); }
.key-icon.is-wide { width: 30px; height: 13px; }
.key-code[aria-expanded="true"] .key-face {   /* open: the key glows */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .17), inset 0 0 0 1px rgba(255, 193, 77, .6), 0 0 20px rgba(255, 170, 40, .3);
}
.key-code[aria-expanded="true"] .key-icon { filter: drop-shadow(0 0 7px rgba(255, 170, 40, 1)); }
.key-leds { display: flex; gap: 5px; }
.key-leds i { width: 7px; height: 7px; border-radius: 2px; background: var(--c); opacity: .25; transition: opacity .3s, box-shadow .3s; }
.key-leds i:nth-child(1) { --c: #e65b56; }
.key-leds i:nth-child(2) { --c: #ec8e4a; animation-delay: .1s; }
.key-leds i:nth-child(3) { --c: #f2b632; animation-delay: .2s; }
.key-leds i:nth-child(4) { --c: #3aa56f; animation-delay: .3s; }
.key-leds i:nth-child(5) { --c: #6592b4; animation-delay: .4s; }
.key-leds i:nth-child(6) { --c: #7c8acb; animation-delay: .5s; }
.key-leds i:nth-child(7) { --c: #a06fc2; animation-delay: .6s; }
.key-test:hover .key-leds i { opacity: .5; }
.key-test.is-running .key-leds i { animation-name: led-run; animation-duration: .7s; animation-timing-function: linear; animation-iteration-count: infinite; }   /* longhands: each light keeps its delay */
.key-test.is-pass .key-leds i { opacity: 1; box-shadow: 0 0 9px var(--c); }
.key-test.is-fail .key-leds i { --c: #ff6b63; opacity: 1; box-shadow: 0 0 9px var(--c); animation: led-fail .36s steps(1) 4; }
@keyframes led-run { 0%, 32%, 100% { opacity: .25; box-shadow: none; } 10% { opacity: 1; box-shadow: 0 0 9px var(--c); } }
@keyframes led-fail { 50% { opacity: .15; box-shadow: none; } }

/* The test (workbench.js). A spark leaves the TesT key for the nearest tile, and the signal runs
   from tile to tile along the magnet bars, lighting each tile it reaches. If it reaches every tile
   on the field, one line is drawn round them all: they make one model. Tiles it cannot reach turn
   red. */
.test-plate, .test-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.test-plate { z-index: 1; }
.test-plate path { fill: rgba(255, 193, 77, .14); }
.test-layer { z-index: 4; }
.test-layer > svg { position: absolute; left: 0; top: 0; overflow: visible; }
.test-line { fill: none; stroke: #ffd98a; stroke-width: 2.5; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgba(255, 176, 50, .95)); }
.test-line.is-loose { stroke: #ff8077; stroke-dasharray: 7 6; filter: drop-shadow(0 0 4px rgba(255, 80, 70, .85)); }
.spark {
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px 2px #ffd98a, 0 0 18px 7px rgba(255, 170, 40, .7);
}
.spark.is-trail { width: 6px; height: 6px; margin: -3px 0 0 -3px; box-shadow: 0 0 8px 3px rgba(255, 170, 40, .6); }
.current { position: absolute; border-radius: 4px; background: linear-gradient(var(--dir), #fff6df, #ffc14d); box-shadow: 0 0 12px 2px rgba(255, 186, 70, .85); }
.ring { position: absolute; border: 2px solid #ffd98a; border-radius: 14px; box-shadow: 0 0 16px rgba(255, 186, 70, .75), inset 0 0 12px rgba(255, 186, 70, .45); }
.test-x { position: absolute; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; fill: #ff6b63; filter: drop-shadow(0 0 5px rgba(255, 80, 70, .9)); }
.cell .wtile.is-live { box-shadow: 0 0 0 2px #ffe6b0, 0 0 30px 6px color-mix(in srgb, var(--tc) 55%, #ffb733); }
.cell .wtile.is-dead { filter: saturate(.3) brightness(.7); box-shadow: 0 0 0 2px #ff6b63, 0 0 22px 4px rgba(255, 90, 80, .55); }
.verdict {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 15px 9px 12px;
  border-radius: 12px;
  background: rgba(9, 13, 18, .9);
  box-shadow: 0 0 0 1px rgba(255, 193, 77, .6), 0 0 26px rgba(255, 170, 40, .35), 0 14px 30px -12px #000;
  color: #ffc14d;
  white-space: nowrap;
  translate: -50% -100%;
  transform-origin: 50% 100%;
}
.verdict.is-below { translate: -50% 0; transform-origin: 50% 0; }
.verdict svg { flex: none; width: 15px; height: 15px; fill: currentColor; filter: drop-shadow(0 0 4px currentColor); }
.verdict b { display: block; font: 400 19px/1 "AKIKI Pixel", var(--mono); text-shadow: 0 0 10px rgba(255, 170, 40, .7); }
.verdict span { display: block; margin-top: 5px; color: rgba(255, 228, 180, .72); font: 11px/1.2 var(--mono); }
.verdict.is-fail { color: #ff8a80; box-shadow: 0 0 0 1px rgba(255, 110, 100, .65), 0 0 26px rgba(255, 90, 80, .3), 0 14px 30px -12px #000; }
.verdict.is-fail b { text-shadow: 0 0 10px rgba(255, 90, 80, .7); }

.splitter {
  position: relative;
  background: var(--bg-subtle);
  border-left: var(--hairline) solid var(--border);
  border-right: var(--hairline) solid var(--border);
  cursor: col-resize;
  touch-action: none;
  transition: background-color .15s;
}
.splitter::after {   /* the grip */
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 32px;
  margin: -16px 0 0 -2px;
  border-radius: 2px;
  background: radial-gradient(circle, #8c959f 1.2px, transparent 1.6px) center top / 4px 8px repeat-y;
}
.splitter:hover, .splitter.is-dragging { background: color-mix(in srgb, var(--link) 12%, var(--bg)); }
.splitter:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }

.tray { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); }
/* The screens are half the size they were (2026-10-07, "to let more space to the tiles"): half as
   tall, half as wide as the row used to give them (the row minus its old 10 px gap and the old
   unit's 1.7em of 22 px), their digits and units half as large. The labels stop at 9 px, not half. */
.meters { display: grid; gap: 6px; padding: 8px 16px 7px; border-bottom: var(--hairline) solid var(--border); }
.meter-label { color: var(--fg-muted); font: 600 9px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.meter-row { display: flex; align-items: center; gap: 5px; margin-top: 3px; }
.screen {
  position: relative;
  flex: 0 0 min((100% - 47.4px) / 2, (25vw - 79.4px) / 2);   /* the second: half the old screen in the old quarter-page panel, however wide the panel is now */
  min-width: 0;
  height: 28px;
  border-radius: 4px;
  background: radial-gradient(ellipse at 50% 0%, #1c2630, #0d1318 75%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 2px 6px rgba(0, 0, 0, .65), 0 0 0 1.5px #e3e8ed, 0 .5px 0 2px #fff;
  overflow: hidden;
}
.screen canvas { display: block; width: 100%; height: 100%; }
.screen::after {   /* scan lines */
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(transparent 0 1px, rgba(0, 0, 0, .16) 1px 1.5px);
  pointer-events: none;
}
.screen.is-changing { animation: screen-flash .5s ease-out; }
@keyframes screen-flash { from { filter: brightness(1.35); } }
.unit { flex: none; min-width: 1.7em; color: #2f4d5c; font: 700 11px/1 var(--mono); }   /* M and B, not the pixel font's m, which reads like "milli" */
.meter-note { margin: 0; color: var(--fg-muted); font-size: 12px; line-height: 1.4; }
/* The teams (workbench.js; presets in tiles.js): one button per plan, each in its plan's own colour,
   squarer than the round filter chips, which only show tiles: a team places tiles on the field.
   The border is the plan's colour darkened to stay above 3:1 on the panel's white; the text is ink. */
.presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 14px 16px 0; }
.presets-label { margin-right: 2px; color: var(--fg-muted); font: 600 11px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.preset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px 0 8px;
  border: 1.5px solid color-mix(in srgb, var(--pc) 78%, #000);
  border-radius: 7px;
  background: color-mix(in srgb, var(--pc) 14%, #fff);
  color: #1f2328;
  font: 600 12px/1 var(--mono);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s, transform .09s;
}
.preset i { width: 10px; height: 10px; border-radius: 2px; background: var(--pc); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.preset b { color: #57606a; font-size: 10.5px; font-weight: 400; }
.preset:hover { background: color-mix(in srgb, var(--pc) 26%, #fff); }
.preset:active { transform: translateY(1px); }
.preset:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
/* The filters (workbench.js): one chip per kind of tile, made from the tiles' own tags (data-tags)
   and, for Ready, from whether a tile has measured figures, each with how many tiles it holds. */
.filters { display: flex; flex-wrap: wrap; gap: 6px 5px; padding: 12px 16px 2px; }
.filters[hidden], .tray-grid[hidden], .tray-slot[hidden] { display: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg-muted);
  font: 600 11px/1 var(--mono);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s, border-color .15s, color .15s;
}
.chip b { color: #8c959f; font-weight: 400; }   /* how many */
.chip:hover { border-color: #afb8c1; color: var(--fg); }
.chip[aria-pressed="true"] { border-color: #2f4d5c; background: #2f4d5c; color: #fff; }
.chip[aria-pressed="true"] b { color: rgba(255, 255, 255, .65); }
.chip:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.filter-none { margin: 20px 0 4px; color: var(--fg-muted); font-size: 12px; text-align: center; }
.tray-scroll.is-target { background: color-mix(in srgb, var(--tc) 6%, var(--bg)); box-shadow: inset 0 0 0 2px var(--tc); }   /* with a filter on, a tile dropped here goes back to its place */
.tray-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px 24px; }
.tray-head { margin: 16px 0 10px; color: var(--fg-muted); font: 600 11px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.tray-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 14px 10px; }
/* Inputs, Functions, Outputs: three columns side by side, each two tiles wide, scrolling with the
   panel as one (workbench.js). On a phone, or in a panel dragged too narrow for three such columns,
   the three groups stack, each still two tiles wide. The other sections follow underneath as before. */
.tray-scroll { container: inventory / inline-size; }
.tray-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; align-items: start; }
.tray-cols:empty { display: none; }
.tray-col { min-width: 0; }
.tray-col .tray-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 8px; }
.tray-col .cap { overflow-wrap: break-word; hyphens: auto; }
@container inventory (max-width: 330px) {
  .tray-cols { grid-template-columns: minmax(0, 1fr); }
}
.tray-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.tray-slot .sq {
  width: 100%;
  max-width: 72px;
  aspect-ratio: 1;
  border-radius: 10px;
  background: #f1f4f7;
  box-shadow: inset 0 0 0 1px var(--border);
  transition: background-color .15s, box-shadow .15s;
}
.tray-slot.is-empty .sq { background: repeating-linear-gradient(-45deg, #f6f8fa 0 6px, #eef1f4 6px 12px); box-shadow: inset 0 0 0 1px var(--border); }
.tray-slot.is-target .sq { background: color-mix(in srgb, var(--tc) 16%, var(--bg)); box-shadow: inset 0 0 0 2px var(--tc); }
.cap { margin: 0; min-height: 2.7em; color: var(--fg-muted); font-size: 11px; line-height: 1.3; text-align: center; }
.cap b { display: block; color: #2f4d5c; font: 400 13px/1.2 "AKIKI Pixel", var(--mono); }
.tray-slot.is-empty .cap { visibility: hidden; }
/* The lenses of the model being worked on (workbench.js, lensHints): solid ring = it needs this lens, dashed = works best with it. */
.tray-slot.is-lens-need .sq { box-shadow: 0 0 0 3px var(--role-lens), 0 0 14px rgba(112, 72, 200, .45); }
.tray-slot.is-lens-best .sq { outline: 2px dashed var(--role-lens); outline-offset: 3px; }

/* The code (workbench.js). The CODE key opens an editor above the screens that writes, live, the
   Python joining the team on the field: each model loaded from its own folder, then called with
   what the models joined to it hand on. New lines are typed in; lines that go fold away. Each kind
   of code has its colour, each model its tile's colour, with a bar of that colour by its lines;
   during a test, a model's lines light up as the signal reaches its tile. */
.code-wrap {
  display: grid;
  grid-template-rows: 0fr;
  padding: 0 16px;
  transition: grid-template-rows .45s cubic-bezier(.2, .8, .2, 1), padding .45s cubic-bezier(.2, .8, .2, 1);
}
.code-wrap.is-open { grid-template-rows: 1fr; padding: 14px 16px 2px; }
.code {
  min-height: 0;
  overflow: hidden;
  border-radius: 10px;
  background: #0f151b;
  box-shadow: 0 0 0 1px rgba(15, 21, 27, .9), 0 14px 30px -16px rgba(15, 21, 27, .9);
  color: #c9d4de;
  font: 12px/18px var(--mono);
}
.code-bar { display: flex; height: 32px; background: #161f28; box-shadow: inset 0 -1px #0a0f14; }
.code-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px 0 13px;
  background: #0f151b;
  color: #e6edf3;
}
.code-tab::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: #ffc14d; box-shadow: 0 0 8px rgba(255, 170, 40, .7); }   /* the open tab, in the screens' amber */
.code-badge { width: 12px; height: 12px; }
.code-close { display: grid; place-items: center; width: 34px; margin-left: auto; border: 0; background: none; color: #7d8b97; cursor: pointer; }
.code-close svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.code-close:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.code-close:focus-visible, .code-view:focus-visible { outline: 2px solid #7fd6d8; outline-offset: -2px; }
.code-crumbs { overflow: hidden; padding: 4px 14px 3px; color: #75838f; font-size: 11px; line-height: 16px; white-space: nowrap; text-overflow: ellipsis; }
.code-crumbs i { margin: 0 6px; color: #46535e; font-style: normal; }
.code-crumbs b { color: #7fd6d8; font-weight: 400; }
.code-view {
  --gut: 46px;
  height: clamp(150px, 27vh, 262px);
  margin: 0;
  padding: 6px 0 12px;
  overflow: auto;
  counter-reset: line;
  font: inherit;
  scrollbar-color: #2a3742 transparent;
  scrollbar-width: thin;
}
.code-view code { display: block; min-width: max-content; font: inherit; }
.ln { position: relative; display: block; min-height: 18px; padding: 0 16px 0 var(--gut); white-space: pre; transition: background-color .7s; }
.ln::before { content: counter(line); counter-increment: line; position: absolute; left: 0; width: calc(var(--gut) - 20px); color: #46535e; text-align: right; }
.ln.is-gone::before { content: none; counter-increment: none; }
.ln[data-model]::after { content: ""; position: absolute; top: 3px; bottom: 3px; left: calc(var(--gut) - 11px); width: 3px; border-radius: 2px; background: var(--tc); }   /* the model's colour, by its lines */
.ln.is-cur { background: rgba(255, 255, 255, .035); }
.ln.is-cur::before { color: #c9d4de; }
.ln.is-hot { background: color-mix(in srgb, var(--tc) 24%, transparent); transition-duration: .2s; }
.caret { display: inline-block; width: 2px; height: 15px; margin-left: 1px; vertical-align: -3px; background: #ffd27a; box-shadow: 0 0 6px rgba(255, 190, 80, .8); animation: blink 1.05s steps(1) infinite; }
.is-writing .caret { animation: none; }
.c-kw { color: #d3a7ef; }                     /* keywords: from, import, def, return */
.c-fn { color: #7fd6d8; }                     /* functions: load, team */
.c-str { color: #f2c46d; }                    /* strings: each model's folder */
.c-com { color: #6d7f8d; font-style: italic; }   /* comments */
.c-var { color: #9cc8ec; }                    /* what one model hands on to the next */
.c-prm { color: #9cc8ec; font-style: italic; }   /* what the team is given */
.c-pkg { color: #e6edf3; }                    /* the akiki package */
.c-op { color: #8b98a4; }                     /* signs */
.c-mdl { color: color-mix(in srgb, var(--tc) 70%, #fff); font-weight: 600; }   /* each model, in its tile's colour */
.code-status {
  display: flex;
  gap: 13px;
  overflow: hidden;
  height: 22px;
  padding: 0 10px;
  background: #0e5d64;
  color: #dcf1f2;
  font-size: 11px;
  line-height: 22px;
  white-space: nowrap;
}
.code-status > span { flex: none; }

/* Try it (workbench.js): the Text output, a chat in the panel's code look. What the visitor typed sits
   at the right; Daisy's reply at the left: what she did in one sentence, her spec and the SQL in code
   boxes, the rows under them (on the sample), her notes, and a quiet line with the request's id. */
.try-wrap { display: grid; grid-template-rows: 0fr; padding: 0 16px; transition: grid-template-rows .45s cubic-bezier(.2, .8, .2, 1), padding .45s cubic-bezier(.2, .8, .2, 1); }
.try-wrap.is-open { grid-template-rows: 1fr; padding: 14px 16px 2px; }
.try { min-height: 0; overflow: hidden; border-radius: 10px; background: #0f151b; box-shadow: 0 0 0 1px rgba(15, 21, 27, .9), 0 14px 30px -16px rgba(15, 21, 27, .9); color: #c9d4de; font: 12px/18px var(--mono); }
/* the bar, the tab and the close button as the code panel draws them, under names of the chat's own */
.try-bar { display: flex; height: 32px; background: #161f28; box-shadow: inset 0 -1px #0a0f14; }
.try-tab { position: relative; display: flex; align-items: center; gap: 7px; padding: 0 16px 0 13px; background: #0f151b; color: #e6edf3; }
.try-tab::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: #ffc14d; box-shadow: 0 0 8px rgba(255, 170, 40, .7); }
.try-badge { width: 11px; height: 10px; color: #ffc14d; }
.try-close { display: grid; place-items: center; width: 34px; margin-left: auto; border: 0; background: none; color: #7d8b97; cursor: pointer; }
.try-close svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.try-close:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.try-close:focus-visible { outline: 2px solid #7fd6d8; outline-offset: -2px; }
.try-model { align-self: center; margin-left: 10px; color: #75838f; font-size: 11px; }
.try-log { display: flex; flex-direction: column; gap: 9px; height: clamp(170px, 30vh, 360px); padding: 12px 12px 8px; overflow: auto; overscroll-behavior: contain; }
.try-log:focus-visible { outline: 2px solid #7fd6d8; outline-offset: -2px; }
.try-msg { margin: 0; overflow-wrap: anywhere; }
.try-msg.is-system { color: #8d9aa6; font-size: 11px; line-height: 16px; }
.try-msg.is-system.is-bad { padding: 6px 9px; border-left: 2px solid #ff8077; border-radius: 3px; background: rgba(255, 107, 99, .08); color: #ffb3ad; }
.try-msg.is-you { align-self: flex-end; max-width: 85%; padding: 6px 10px; border-radius: 10px 10px 2px 10px; background: #1f6fd1; color: #fff; white-space: pre-wrap; }
.try-msg.is-you.is-tables { padding: 2px 8px; background: none; color: #7d8b97; font-size: 11px; }
.try-msg.is-daisy { display: grid; gap: 6px; padding: 8px 10px 7px; border: 1px solid #22303c; border-radius: 10px 10px 10px 2px; background: #131c24; }
.try-verdict { justify-self: start; padding: 0 7px; border-radius: 999px; background: rgba(58, 165, 111, .18); color: #7ee2ad; font: 700 10px/16px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.try-verdict[data-verdict="ask-back"] { background: rgba(242, 182, 50, .16); color: #ffd27a; }
.try-verdict[data-verdict="cannot"] { background: rgba(255, 107, 99, .14); color: #ffa39c; }
.try-say { margin: 0; color: #e6edf3; }
.try-note, .try-none, .try-meta { margin: 0; color: #8d9aa6; font-size: 11px; line-height: 16px; }
.try-meta { color: #5f6d79; }
.try-code { position: relative; }
.try-code-label { display: block; margin-bottom: 2px; color: #ffc14d; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.try-code pre { margin: 0; padding: 6px 8px; overflow-x: auto; border-radius: 6px; background: #0a0f14; color: #b8e3e4; font: 11px/16px var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.try-rows { max-height: 180px; overflow: auto; border-radius: 6px; background: #0a0f14; }
.try-rows table { width: 100%; border-collapse: collapse; font: 11px/16px var(--mono); }
.try-rows th, .try-rows td { padding: 3px 8px; border-bottom: 1px solid #1b2630; text-align: left; white-space: nowrap; }
.try-rows th { position: sticky; top: 0; background: #16202a; color: #ffc14d; font-weight: 400; }
.try-rows td.is-null { color: #4c5a66; }
.try-choice { display: grid; gap: 4px; padding: 6px 8px; border-left: 2px solid #f2b632; }
.try-choice p { margin: 0; }
.try-form { display: grid; gap: 7px; padding: 9px 12px 11px; border-top: 1px solid #1b2630; background: #121a21; }
.try-tables { margin: 0; color: #8d9aa6; font-size: 11px; line-height: 16px; }
.try-samples { display: flex; flex-wrap: wrap; gap: 5px; }
.try-sample { padding: 2px 8px; border: 1px solid #2a3946; border-radius: 999px; background: #0f151b; color: #b8c4cf; font: 11px/16px var(--mono); cursor: pointer; }
.try-sample:hover { border-color: #ffc14d; color: #ffd98a; }
.try-ask { display: block; }
.try-text, .try-paste-text { box-sizing: border-box; display: block; width: 100%; padding: 7px 9px; border: 1px solid #2a3946; border-radius: 8px; background: #0a0f14; color: #e6edf3; font: 12px/18px var(--mono); resize: vertical; }
.try-text:focus, .try-paste-text:focus { border-color: #7fd6d8; outline: none; box-shadow: 0 0 0 2px rgba(127, 214, 216, .25); }
.try-paste summary { color: #b8c4cf; font-size: 11px; cursor: pointer; }
.try-paste summary:focus-visible { outline: 2px solid #7fd6d8; outline-offset: 2px; }
.try-help { margin: 6px 0; color: #8d9aa6; font-size: 11px; line-height: 16px; }
.try-help b { color: #ffd98a; font-weight: 400; }
.try-row { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.try-state { margin-right: auto; color: #8d9aa6; font-size: 11px; }
.try-send { flex: none; width: auto; padding: 5px 16px; border: 0; border-radius: 8px; background: #ffc14d; color: #1b252f; font: 700 12px/18px var(--mono); letter-spacing: .04em; cursor: pointer; }
.try-send:hover { filter: brightness(1.08); }
.try-send:disabled { background: #3a4651; color: #7d8b97; cursor: default; filter: none; }
.try-send:focus-visible, .try-sample:focus-visible { outline: 2px solid #7fd6d8; outline-offset: 2px; }
/* Try it with Sketch (PLAN 7): the Picture screen, the same look as Daisy's, with the drawing on a white card. */
.try-sample:disabled { opacity: .45; cursor: default; }
.try-sample:disabled:hover { border-color: #2a3946; color: #b8c4cf; }
.sk-figures { margin: 0; color: #8d9aa6; font-size: 11px; line-height: 16px; }
.sk-wrap .try-log { height: clamp(260px, 46vh, 470px); }   /* room for a whole picture */
.sk-frame { justify-self: start; width: min(100%, 240px); padding: 10px; border-radius: 8px; background: #fff; }
.sk-pic { display: block; width: 100%; height: auto; max-height: 220px; object-fit: contain; }
.sk-save { justify-self: start; color: #7fd6d8; font-size: 11px; }
.sk-save:focus-visible, .sk-recipe summary:focus-visible { outline: 2px solid #7fd6d8; outline-offset: 2px; }
.sk-recipe summary { color: #8d9aa6; font-size: 11px; cursor: pointer; }
.sk-recipe pre { margin: 4px 0 0; padding: 6px 8px; border-radius: 6px; background: #0a0f14; color: #b8e3e4; font: 11px/16px var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.code-branch::before {   /* a branch */
  content: "";
  display: inline-block;
  width: 9px;
  height: 11px;
  margin-right: 5px;
  vertical-align: -1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 11' fill='none' stroke='%23dcf1f2' stroke-width='1.3'%3E%3Ccircle cx='2' cy='2' r='1.3'/%3E%3Ccircle cx='2' cy='9' r='1.3'/%3E%3Ccircle cx='7' cy='3.5' r='1.3'/%3E%3Cpath d='M2 3.3v4.4M7 4.8c0 2-5 1.4-5 2.9'/%3E%3C/svg%3E") center / contain no-repeat;
}
.code-live::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #7dffb0; box-shadow: 0 0 6px #7dffb0; vertical-align: 1px; }
.is-writing .code-live::before { animation: live .45s ease-in-out infinite alternate; }
@keyframes live { to { opacity: .25; box-shadow: none; } }
.code-pos { margin-left: auto; }

/* The tabs over the workbench (workbench.js, "The tabs"): MODELS and ROBOTS, in the field's own dark
   and the keys' amber, in capitals like the screens' labels (the pixel font is unicase); the open tab carries the code tab's amber line. */
.bench[hidden] { display: none; }
.bench-tabs {
  display: flex;
  gap: 4px;
  height: 40px;
  padding: 0 24px;
  align-items: flex-end;
  background: #11181f;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.bench-tab {
  position: relative;
  height: 32px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
  background: rgba(255, 255, 255, .03);
  color: rgba(255, 228, 180, .5);
  font: 700 12.5px/1 var(--mono);
  letter-spacing: .14em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s, color .15s;
}
.bench-tab:hover { color: #ffc14d; background: rgba(255, 255, 255, .07); }
.bench-tab[aria-selected="true"] { color: #ffc14d; background: #1d2833; border-color: rgba(255, 193, 77, .35); text-shadow: 0 0 8px rgba(255, 170, 40, .55); }
.bench-tab[aria-selected="true"]::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; border-radius: 9px 9px 0 0; background: #ffc14d; box-shadow: 0 0 8px rgba(255, 170, 40, .7); }
.bench-tab:focus-visible { outline: 2px solid #7fd6d8; outline-offset: -2px; }
.has-bench-tabs .bench { height: calc(100svh - 57px - 40px); }

@media (max-width: 700px) {
  .bench-page { overflow: auto; }
  .bench, .has-bench-tabs .bench { grid-template-columns: minmax(0, 1fr); height: auto; }
  .bench-tabs { padding: 0 12px; }
  .splitter { display: none; }
  .field { padding: 48px 12px 16px; row-gap: 18px; }
  .field-keys { position: static; grid-template-columns: repeat(5, minmax(0, 96px)); gap: 8px; width: 100%; justify-content: center; transform: none; }   /* under the squares, side by side */
  .key { height: 72px; }
  .field-keys .meters { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 10px; margin-bottom: 11px; }   /* the plate over the whole row of keys, its screens side by side */
  .field-keys .meter-note { grid-column: 1 / -1; }
  .key-label { max-width: calc(100% - 8px); }
  .key-leds { gap: 3px; }   /* five keys in a row: the lights fit inside TesT */
  .key-leds i { width: 5px; height: 5px; }
  .field-keys .meter-label { font-size: 7.5px; letter-spacing: .02em; }   /* the three labels side by side on a 360 px phone */
  .tray-scroll { overflow: visible; }
  .screen { flex-basis: calc((100% - 47.4px) / 2); }   /* the panel is the page's width here */
  .tray-cols { grid-template-columns: minmax(0, 1fr); }   /* the three groups stacked, each two tiles wide */
  .field-legend { position: static; gap: 4px 12px; }
}
@media (min-width: 701px) and (max-height: 860px) {   /* a short screen: the plate and five keys still fit */
  .field-keys { gap: 10px; }
  .field-keys .key { height: 58px; }
  .key-face { gap: 6px; }
}
@media (min-width: 701px) and (max-height: 780px) {
  .field-keys { gap: 8px; }
  .field-keys .key { height: 50px; }
  .key-face { gap: 4px; }
  .key-label { height: 15px; }
  .key-icon { height: 14px; }
  .key-icon.is-wide { height: 10px; }
  .key-word { font-size: 16px; }
  .field-keys .meters { gap: 6px; padding: 8px 9px 9px; }
  .field-keys .screen { height: 24px; }
}
@media (min-width: 701px) and (max-height: 660px) {
  .field-keys { gap: 6px; }
  .field-keys .key { height: 42px; }
  .key-face { inset: 0 0 5px; flex-direction: row; gap: 6px; }   /* icon and word side by side */
  .key-test .key-face { flex-direction: column; gap: 3px; }   /* its lights stay over its word */
  .key-test .key-label { height: 13px; }
  .field-keys .meter-note { -webkit-line-clamp: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .cell.is-target.is-magnet, .joint.is-new, .screen.is-changing, .key-test .key-leds i, .is-writing .code-live::before, .cell .wtile.is-wrong { animation: none; }
  .code-wrap, .try-wrap { transition: none; }
  .wtile.is-dragging, .wtile svg { transition: none; }
  .wtile[data-kind] svg { animation: none !important; }
  .joint.is-keyed.is-new, .joint.is-lens.is-new { animation: none; }
}

/* Home, second screen: the workbench, under the board. A little scroll either way settles the
   page on one or the other, the workbench filling the screen under the shrunk header. */
html:has(> body.home) { scroll-snap-type: y mandatory; scroll-padding-top: calc(37px + var(--hairline)); }
.home .board-wrap { position: relative; scroll-snap-align: start; scroll-margin-top: 100px; }   /* the margin reaches past the header: the board snaps to the very top */
.home .bench { height: calc(100svh - 37px - var(--hairline)); scroll-snap-align: start; }
.board-next {   /* the way down to the workbench */
  position: absolute;
  left: 50%;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 32px;
  margin-left: -22px;
  border-radius: 8px;
  color: #8c959f;
  animation: next-bob 2.4s ease-in-out infinite;
}
.board-next svg { width: 19px; height: 11px; fill: currentColor; }
.board-next:hover { color: var(--link); }
@keyframes next-bob { 50% { transform: translateY(5px); } }
@media (max-width: 700px) {
  html:has(> body.home) { scroll-snap-type: y proximity; scroll-padding-top: calc(30px + env(safe-area-inset-top)); }   /* the workbench is taller than a phone: no forced stops */
  .home .board-wrap { min-height: calc(100svh - 44px - env(safe-area-inset-top)); }   /* the phone header draws its line outside its height */
  .home .bench { height: auto; }
}
@media (prefers-reduced-motion: reduce) { .board-next { animation: none; } }
/* Held at the workbench (snap.js): once the page has come down to the workbench, scrolling no longer
   takes it back up; this pull tab does. It stands on the workbench's top edge, in the field's dark and
   the keys' amber, like the open tab over the workbench page, and shows only while the page is held. */
.home .bench { position: relative; }
.bench-up {
  position: absolute;
  left: 50%;
  bottom: 100%;
  z-index: 31;   /* over the sticky header, which the tab reaches into */
  display: grid;
  place-items: center;
  width: 56px;
  height: 24px;
  margin-left: -28px;
  padding: 0;
  border: 1px solid rgba(255, 193, 77, .35);
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
  background: #1d2833;
  color: #ffc14d;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s, color .15s;
}
.bench-up[hidden] { display: none; }
.bench-up::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; border-radius: 9px 9px 0 0; background: #ffc14d; box-shadow: 0 0 8px rgba(255, 170, 40, .7); }
.bench-up svg { width: 19px; height: 11px; fill: currentColor; filter: drop-shadow(0 0 4px rgba(255, 170, 40, .6)); }
.bench-up:hover { background: #26333f; color: #ffd27a; }
.bench-up:focus-visible { outline: 2px solid #7fd6d8; outline-offset: 2px; }

/* The Siren page: the animated squares, then the profiles under them. The same little-scroll glide as the
   home page (snap.js does it on a wide screen), but the profiles are taller than a screen, so there the
   page is never held to a stop: the snapping is for phones only, and only pulls from near a stop. */
html:has(> body.snap) { scroll-snap-type: none; scroll-padding-top: calc(37px + var(--hairline)); }
@media (max-width: 700px) { html:has(> body.snap) { scroll-snap-type: y proximity; } }
.snap .stack { scroll-snap-align: start; scroll-margin-top: 100px; }   /* the margin reaches past the header: the squares snap to the very top */
.snap #voice { scroll-snap-align: start; }
@media (max-width: 700px) { html:has(> body.snap) { scroll-padding-top: calc(30px + env(safe-area-inset-top)); } }

/* The brain chooser (workbench.js, "The brain chooser"): when TesT finds a team with no brain, a panel
   in the field's dark and the keys' amber asks which brain it should use, one card per brain in
   tiles.js. Over the field on a wide screen; a bottom sheet on a phone, its whole control area on
   screen even in a short landscape view. The motion (a pulse, the panel unfolding in pixel steps, the
   cards one by one, the chosen brain flying onto its tile) is all in workbench.js, and none of it runs
   with reduced motion. */
.brainpick-wrap { position: fixed; inset: 0; z-index: 90; }
.brainpick-shade { position: absolute; inset: 0; background: rgba(9, 13, 18, .45); }
.brainpick {
  position: fixed;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  padding: 14px 16px 16px;
  border-radius: 12px;
  background: linear-gradient(160deg, #1d2833, #11181f);
  box-shadow: 0 0 0 1px rgba(255, 193, 77, .35), 0 24px 48px -16px #000;
  color: #c9d4de;
}
.brainpick::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: #ffc14d; box-shadow: 0 0 8px rgba(255, 170, 40, .7); }
.brainpick-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex: none; }
.brainpick-title { margin: 0; color: #ffc14d; font: 400 18px/1.25 "AKIKI Pixel", var(--mono); text-shadow: 0 0 8px rgba(255, 170, 40, .5); }
.brainpick-say { flex: none; margin: 8px 0 12px; color: rgba(255, 228, 180, .78); font: 12px/1.45 var(--mono); }
.brainpick-cancel {
  flex: none;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px;
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .78);
  font: 12px/1 var(--mono);
  cursor: pointer;
}
.brainpick-cancel:hover { background: rgba(255, 255, 255, .13); color: #fff; }
.brainpick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; min-height: 0; overflow-y: auto; padding: 3px; margin: -3px; }
.brainpick-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 193, 77, .22);
  border-radius: 9px;
  background: rgba(255, 255, 255, .04);
  color: #e6edf3;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s, border-color .15s, transform .09s;
}
.brainpick-card:hover { background: rgba(255, 193, 77, .1); border-color: rgba(255, 193, 77, .6); }
.brainpick-card:active { transform: translateY(1px); }
.brainpick-card:focus-visible, .brainpick-cancel:focus-visible { outline: 2px solid #7fd6d8; outline-offset: 2px; }
.brainpick-card.is-picked { border-color: #ffc14d; box-shadow: 0 0 18px rgba(255, 170, 40, .5); }
.bp-icon { flex: none; width: 34px; height: 34px; }
.bp-icon svg { display: block; width: 100%; height: 100%; border-radius: 7px; }
.bp-text { display: grid; gap: 2px; min-width: 0; }
.bp-name { font: 400 14px/1.2 "AKIKI Pixel", var(--mono); color: #fff; }
.bp-where { justify-self: start; padding: 0 5px; border-radius: 4px; font: 700 9.5px/1.6 var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; background: rgba(125, 255, 176, .14); color: #7dffb0; }
.bp-where[data-where="remote"] { background: rgba(127, 214, 216, .14); color: #7fd6d8; }
.bp-fig { color: rgba(201, 212, 222, .8); font: 11px/1.35 var(--mono); }
.brainpick-pulse { position: fixed; left: 0; top: 0; z-index: 91; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 2px; background: #ffc14d; box-shadow: 0 0 12px 4px rgba(255, 170, 40, .75); pointer-events: none; }
.brainpick-pulse.is-trail { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; opacity: .6; }
.brainpick-fly { position: fixed; left: 0; top: 0; z-index: 95; transform-origin: top left; border-radius: 7px; pointer-events: none; box-shadow: 0 0 16px rgba(255, 170, 40, .7); }
.brainpick-spark { position: fixed; left: 0; top: 0; z-index: 96; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 1px; background: #ffc14d; box-shadow: 0 0 6px rgba(255, 170, 40, .9); pointer-events: none; }
@media (max-width: 700px) {   /* a bottom sheet */
  .brainpick { left: 0; right: 0; bottom: 0; max-height: 100%; border-radius: 14px 14px 0 0; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); }
  .brainpick-list { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
}
@media (max-height: 420px) {   /* a short landscape view: one line per card, everything on screen */
  .brainpick { padding-top: 8px; padding-bottom: 8px; }
  .brainpick-title { font-size: 15px; }
  .brainpick-say { display: none; }
  .brainpick-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
  .brainpick-card { min-height: 0; padding: 5px 8px; gap: 8px; }
  .bp-icon { width: 24px; height: 24px; }
  .bp-fig { display: none; }
}

/* The sections, told apart at a glance (Laurent, 2026-10-07: "make sure that the separations between
   sections (input, functions and output) is clear"): each of Inputs, Functions and Outputs is its own
   panel, tinted with its role's colour (the badges' blue, amber, teal) and edged in it, under a heading
   bar in that colour carrying the section's letter (I, Fn, O), with a gutter between the panels. The
   add-ons (lenses, skills, brains, data) sit below in an area of their own, under a rule and a heading.
   The text on the tints stays above 4.5:1 (muted ink on a 5% tint, white on each role colour). */
.tray-col { --sc: var(--role-middle); }
.tray-col[data-section="starters"] { --sc: var(--role-start); }
.tray-col[data-section="outputs"] { --sc: var(--role-end); }
.tray-cols { gap: 14px 12px; margin-top: 10px; }
.tray-col {
  padding: 0 4px 12px;
  border: 1.5px solid color-mix(in srgb, var(--sc) 45%, #fff);
  border-radius: 10px;
  background: color-mix(in srgb, var(--sc) 5%, #fff);
  transition: box-shadow .15s, background-color .15s;
}
.tray-col > .tray-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 -4px 12px;
  padding: 7px 6px;
  border-radius: 8px 8px 0 0;
  background: var(--sc);
  color: #fff;
  letter-spacing: .06em;
}
.tray-col > .tray-head::before {   /* the section's letter, as on its tiles' badges */
  content: attr(data-badge);
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 3px;
  border: 1.5px solid #fff;
  border-radius: 4px;
  font: 700 10px/1 var(--mono);
  letter-spacing: -.02em;
  text-transform: none;
}
.tray-col .tray-slot .sq { background: #fff; }
.tray-col .tray-grid { column-gap: 6px; }
.tray-col .cap { color: #4d5661; }
.tray-addons { margin-top: 20px; padding-top: 4px; border-top: 2px solid var(--border); }
.tray-addons-head { margin: 10px 0 0; color: var(--fg); font: 700 12px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.tray-addons-head span { color: var(--fg-muted); font-weight: 400; letter-spacing: 0; text-transform: none; }

/* The Workbench's admin page (/admin, workbench-admin.php and workbench-admin.js): a control room for
   the Workbench. Its head is the Workbench's own dark bench (the dot grid, the keys' amber pixel
   letters); a summary of lit numbers, like the bench's screens, stays in view while the page scrolls;
   then cards: the tiles, each section in its panel colour (Inputs blue, Functions amber, Outputs teal,
   as the panel draws them), one row per tile with its icon, a chip per fact and a switch; the archived
   tiles; your password and the admins. Every class here starts with wadm- (this sheet is the whole
   site's), and so does every colour token, set on body.wadm-page: light by default, the bench's dark
   when the device asks for dark. A note beside the control pressed shows a turning ring while the
   server works, then a tick, or what went wrong; with reduced motion nothing turns or slides. */
body.wadm-page {
  --wa-page: #f2f5f8;
  --wa-card: #ffffff;
  --wa-sunk: #f6f8fa;
  --wa-line: #d8dee4;
  --wa-line-soft: #e8ecf0;
  --wa-ink: #1f2328;
  --wa-muted: #59636e;
  --wa-faint: #6e7781;
  --wa-accent: #11727a;
  --wa-accent-hover: #0d5f66;
  --wa-accent-ink: #ffffff;
  --wa-accent-soft: #e2f2f2;
  --wa-ok: #1a7f4b;
  --wa-ok-soft: #e3f4ea;
  --wa-bad: #b42318;
  --wa-bad-soft: #fdeceb;
  --wa-warn: #8a5a00;
  --wa-track: #b9c3cd;
  --wa-shadow: 0 1px 2px rgba(31, 35, 40, .05), 0 10px 28px -16px rgba(31, 35, 40, .22);
  --wa-amber: #ffc14d;
  --wa-top: calc(56px + var(--hairline));   /* under the site's header, which stays at the top */
  background: var(--wa-page);
  color: var(--wa-ink);
}
@media (prefers-color-scheme: dark) {
  html:has(> body.wadm-page) { color-scheme: dark; background: #0b1015; }
  body.wadm-page {
    --bg: #0f161c;
    --bg-subtle: #121a21;
    --border: #2a3642;
    --border-muted: #1f2a34;
    --fg: #e6edf3;
    --fg-muted: #9fb0bf;
    --link: #5fc9cd;
    --wa-page: #0b1015;
    --wa-card: #131b22;
    --wa-sunk: #0f161c;
    --wa-line: #2a3642;
    --wa-line-soft: #1e2831;
    --wa-ink: #e6edf3;
    --wa-muted: #9fb0bf;
    --wa-faint: #8496a6;
    --wa-accent: #5fc9cd;
    --wa-accent-hover: #86dadd;
    --wa-accent-ink: #062a2c;
    --wa-accent-soft: rgba(95, 201, 205, .13);
    --wa-ok: #5ad19a;
    --wa-ok-soft: rgba(90, 209, 154, .13);
    --wa-bad: #ff8f85;
    --wa-bad-soft: rgba(255, 143, 133, .12);
    --wa-warn: #f0b85a;
    --wa-track: #3b4956;
    --wa-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 12px 30px -18px rgba(0, 0, 0, .9);
  }
  .wadm-page .logo-word { color: #c9d4de; }
  .wadm-page .appheader-top .brand img { filter: invert(.85); }
  .wadm-page .wadm-icon { box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
  .wadm-page .wadm-summary { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 1px 0 rgba(255, 255, 255, .1), 0 12px 26px -16px #000; }
}
@media (max-width: 700px) { body.wadm-page { --wa-top: calc(44px + env(safe-area-inset-top)); } }

.wadm { padding-top: 20px; padding-bottom: 56px; }
.wadm h1, .wadm h2, .wadm h3 { color: var(--wa-ink); }
.wadm a { color: var(--wa-accent); }

/* The head: the Workbench's bench, its dot grid, the title in the keys' amber pixels. */
.wadm-hero {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  margin: 0 0 14px;
  padding: 24px 24px 22px;
  overflow: hidden;
  border-radius: 16px;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(53, 173, 176, .22), transparent 55%),
    radial-gradient(ellipse at 92% 110%, rgba(194, 84, 158, .18), transparent 50%),
    linear-gradient(160deg, #1d2833, #11181f);
  color: #c9d4de;
  box-shadow: var(--wa-shadow);
}
.wadm-hero::before {   /* a fine dot grid, like the bench's cutting mat */
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1.6px);
  background-size: 18px 18px;
  pointer-events: none;
}
.wadm-hero > * { position: relative; }
.wadm-hero-text { min-width: 0; flex: 1 1 320px; }
.wadm-kicker { margin: 0 0 8px; color: #7fd6d8; font: 600 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.wadm .wadm-hero h1 {
  margin: 0;
  color: var(--wa-amber);
  font: 400 32px/1.05 "AKIKI Pixel", var(--mono);
  letter-spacing: .02em;
  text-shadow: 0 0 10px rgba(255, 170, 40, .55);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.wadm-hero-lead { margin: 10px 0 0; max-width: 56ch; color: #9fb0bf; font-size: 14px; }
.wadm-out { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.wadm-who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; margin-right: 4px; color: #c9d4de; font-size: 13px; overflow-wrap: anywhere; }
.wadm-who strong { color: #fff; }
.wadm-hero .wadm-key, .wadm .wadm-hero a.wadm-key {   /* a small keycap: light on the bench (Sign out is one too) */
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  background: linear-gradient(#2e3c4a, #1b252f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 2px 0 #06090d;
  color: #e6edf3;
  font: 600 13px/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition: color .15s, border-color .15s, transform .08s;
}
.wadm-hero .wadm-key:hover { color: #ffd27a; border-color: rgba(255, 193, 77, .45); text-decoration: none; }
.wadm-hero .wadm-key:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 0 #06090d; }
.wadm-hero .wadm-key:focus-visible { outline: 2px solid #7fd6d8; outline-offset: 2px; }
.wadm-avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: hsl(var(--h, 185) 48% 38%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
  color: #fff;
  font: 700 15px/1 var(--sans);
}
.wadm-hero .wadm-avatar { background: #11727a; }

/* The messages ?m= may put on the page. */
.wadm-say {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--wa-ok) 35%, transparent);
  border-radius: 12px;
  background: var(--wa-ok-soft);
  color: var(--wa-ink);
}
.wadm-say::before {
  content: "\2713";
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--wa-ok);
  color: var(--wa-card);
  font: 700 12px/1 var(--sans);
}
.wadm-say.is-bad { border-color: color-mix(in srgb, var(--wa-bad) 35%, transparent); background: var(--wa-bad-soft); }
.wadm-say.is-bad::before { content: "!"; background: var(--wa-bad); }

/* The summary: lit numbers in the bench's screens, and when the list was last saved and by whom. It
   stays under the site's header while the page scrolls (not on a screen too short to spare it). */
.wadm-summary {
  position: sticky;
  top: var(--wa-top);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin: 0 0 18px;
  padding: 10px 12px;
  border-radius: 14px;
  background: linear-gradient(#24313d, #18212a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 12px 26px -16px rgba(13, 19, 24, .8);
  color: #9fb0bf;
}
.wadm-leds { display: flex; gap: 6px; min-width: 0; }
.wadm-led {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 10px 6px;
  overflow: hidden;
  border-radius: 8px;
  background: radial-gradient(ellipse at 50% 0%, #1c2630, #0d1318 75%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 2px 6px rgba(0, 0, 0, .65), 0 1px 0 rgba(255, 255, 255, .07);
}
.wadm-led::after {   /* scan lines, as on the bench's screens */
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(transparent 0 1px, rgba(0, 0, 0, .16) 1px 1.5px);
  pointer-events: none;
}
.wadm-led b { min-width: 2ch; color: var(--wa-amber); font: 400 22px/1 "AKIKI Pixel", var(--mono); text-align: right; text-shadow: 0 0 6px rgba(255, 170, 40, .75); }
.wadm-led[data-led="off"] b { color: #ff9e7a; text-shadow: 0 0 6px rgba(255, 120, 80, .6); }
.wadm-led[data-led="arch"] b { color: #b7c6d3; text-shadow: 0 0 6px rgba(160, 190, 215, .45); }
.wadm-led i { color: #9fb0bf; font: 600 10px/1 var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
.wadm-led b.is-changing { animation: wadm-flash .5s ease-out; }
@keyframes wadm-flash { from { filter: brightness(1.8); } }
.wadm-sumtext { display: flex; flex-direction: column; min-width: 0; flex: 1 1 200px; }
.wadm-count {   /* the same numbers in a sentence, for a screen reader (the lit numbers say it on screen) */
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.wadm-saved { color: #c9d4de; font-size: 12.5px; overflow-wrap: anywhere; border-radius: 4px; }
.wadm-saved.is-changing { animation: wadm-saved 1.4s ease-out; }
@keyframes wadm-saved { from { color: var(--wa-amber); text-shadow: 0 0 8px rgba(255, 170, 40, .6); } }

/* Cards */
.wadm-part {
  margin: 0 0 18px;
  padding: 20px;
  border: 1px solid var(--wa-line);
  border-radius: 16px;
  background: var(--wa-card);
  box-shadow: var(--wa-shadow);
}
.wadm-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin: 0 0 16px; }
.wadm-head-text { min-width: 0; flex: 1 1 360px; }
.wadm-part h2 { margin: 0 0 4px; font-size: 18px; line-height: 1.3; }
.wadm-part h3 { margin: 0 0 10px; font-size: 15px; }
.wadm-lead { margin: 0; max-width: 72ch; color: var(--wa-muted); font-size: 13.5px; }
.wadm-tools { margin: 0; justify-content: flex-end; }
.wadm-tools .wadm-allnote { flex: 1 1 100%; text-align: right; }

/* Buttons */
.wadm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: auto;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--wa-accent);
  color: var(--wa-accent-ink);
  font: 600 14px/1.2 var(--sans);
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .08s;
}
.wadm-btn:hover { background: var(--wa-accent-hover); }
.wadm-btn:active { transform: translateY(1px); }
.wadm-btn.wadm-all, .wadm-btn.wadm-mini { border-color: var(--wa-line); background: var(--wa-card); color: var(--wa-ink); font-weight: 500; }
.wadm-btn.wadm-all:hover, .wadm-btn.wadm-mini:hover { border-color: color-mix(in srgb, var(--wa-accent) 55%, var(--wa-line)); background: var(--wa-sunk); }
.wadm-btn.wadm-mini { min-height: 34px; padding: 0 11px; font-size: 13px; }
.wadm-btn:disabled { opacity: .55; cursor: progress; transform: none; }
.wadm-btn.is-off { border-style: dashed; color: var(--wa-faint); cursor: help; }
.wadm-btn.is-off:hover { border-color: var(--wa-line); background: var(--wa-card); }
.wadm-btn:focus-visible, .wadm-link:focus-visible { outline: 2px solid var(--wa-accent); outline-offset: 2px; }
.wadm-link { width: auto; padding: 0; border: 0; background: none; color: var(--wa-accent); font: inherit; cursor: pointer; }
.wadm-get::before, .wadm-arch::before, .wadm-restore::before {   /* a small line icon in the button's own colour */
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: var(--wa-ico) center / contain no-repeat;
  mask: var(--wa-ico) center / contain no-repeat;
}
.wadm-get { --wa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v8M4.5 6.75 8 10.25l3.5-3.5M2.75 13.5h10.5'/%3E%3C/svg%3E"); }
.wadm-arch { --wa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.75' y='2.75' width='12.5' height='3' rx='.75'/%3E%3Cpath d='M2.75 5.75v6.5c0 .55.45 1 1 1h8.5c.55 0 1-.45 1-1v-6.5M6.5 8.75h3'/%3E%3C/svg%3E"); }
.wadm-restore { --wa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.75 8a5.25 5.25 0 1 0 1.6-3.77M2.75 2.25V5.5H6'/%3E%3C/svg%3E"); }
.wadm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0 0; }

/* The tiles: a panel per section, headed in its colour with its letter, as on the Workbench. */
.wadm-sec {
  --sc: #5f6b7a;
  margin: 0 0 16px;
  overflow: hidden;
  border: 1.5px solid color-mix(in srgb, var(--sc) 42%, var(--wa-card));
  border-radius: 12px;
  background: color-mix(in srgb, var(--sc) 4%, var(--wa-card));
}
.wadm-sec:last-child { margin-bottom: 0; }
.wadm-sec[data-section="starters"] { --sc: #1f6fd1; --sl: "I"; }
.wadm-sec[data-section="functions"] { --sc: #b35f00; --sl: "Fn"; }
.wadm-sec[data-section="outputs"] { --sc: #0d7f86; --sl: "O"; }
.wadm-sec[data-section="lenses"] { --sc: #7048c8; --sl: "L"; }
.wadm-sec[data-section="skills"] { --sl: "S"; }
.wadm-sec[data-section="brains"] { --sl: "B"; }
.wadm-sec[data-section="data"] { --sl: "D"; }
.wadm-sec > h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 12px;
  background: var(--sc);
  color: #fff;
  font: 700 11.5px/1.2 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.wadm-sec > h3::before {   /* the section's letter, as on its tiles' badges */
  content: var(--sl, "");
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 3px;
  border: 1.5px solid #fff;
  border-radius: 5px;
  font: 700 10px/1 var(--mono);
  letter-spacing: -.02em;
  text-transform: none;
}
.wadm-sec-n { margin-left: auto; font-weight: 500; letter-spacing: .02em; text-transform: none; opacity: .9; }

/* One row per tile: its icon, its words and chips, its switch; Download and Archive; a note. */
.wadm-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7rem auto auto auto;
  align-items: center;
  gap: 6px 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--wa-line-soft);
  background: var(--wa-card);
  transition: opacity .25s ease, transform .25s ease, background-color .2s ease;
}
.wadm-sec > h3 + .wadm-row { border-top: 0; }
.wadm-row:hover { background: color-mix(in srgb, var(--sc, var(--wa-accent)) 4%, var(--wa-card)); }
.wadm-pick { display: flex; align-items: center; gap: 12px; min-width: 0; grid-column: 1; grid-row: 1; cursor: pointer; }
.wadm-row.is-archived .wadm-pick { cursor: default; }
.wadm-acts { display: contents; }
.wadm-get { grid-column: 3; grid-row: 1; }
.wadm-arch, .wadm-restore { grid-column: 4; grid-row: 1; }
.wadm-row > .wadm-switch { grid-column: 5; grid-row: 1; margin: -8px -8px -8px 2px; }
.wadm-row > .wadm-acts > .wadm-note { grid-column: 2; grid-row: 1; justify-self: end; text-align: right; }
.wadm-row > .wadm-acts > .wadm-note.is-long, .wadm-row > .wadm-acts > .wadm-note.is-err {   /* a long note goes under the row, the switch stays put */
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: stretch;
  margin-left: 52px;
  text-align: left;
}
.wadm-files { grid-column: 1 / -1; grid-row: 3; }
.wadm-icon { width: 40px; height: 40px; flex: none; border-radius: 9px; box-shadow: 0 1px 2px rgba(0, 0, 0, .18); transition: filter .2s, opacity .2s; }
.wadm-icon:empty { outline: 1.5px dashed var(--wa-line); outline-offset: -1.5px; box-shadow: none; }   /* a tile no longer in tiles.js */
.wadm-text { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.wadm-text strong { color: var(--wa-ink); font-size: 14.5px; line-height: 1.3; }
.wadm-words { color: var(--wa-muted); font-size: 13px; line-height: 1.35; }
.wadm-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 5px; }
.wadm-meta code { color: var(--wa-faint); font: 11px/1 var(--mono); }
.wadm-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 8px;
  border: 1px solid var(--wa-line);
  border-radius: 999px;
  background: var(--wa-sunk);
  color: var(--wa-muted);
  font: 600 10.5px/1 var(--mono);
  letter-spacing: .02em;
  white-space: nowrap;
}
.wadm-chip.wadm-state { color: var(--wa-ok); border-color: color-mix(in srgb, var(--wa-ok) 40%, transparent); background: var(--wa-ok-soft); }
.wadm-chip.wadm-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.wadm-row:has(.wadm-switch:not(:checked)) .wadm-chip.wadm-state { color: var(--wa-muted); border-color: var(--wa-line); background: var(--wa-sunk); }
.wadm-row:has(.wadm-switch:not(:checked)) .wadm-chip.wadm-state::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.wadm-row:has(.wadm-switch:checked) .wadm-off, .wadm-row:has(.wadm-switch:not(:checked)) .wadm-on { display: none; }
.wadm-chip.is-arch { color: var(--wa-warn); border-color: color-mix(in srgb, var(--wa-warn) 40%, transparent); background: color-mix(in srgb, var(--wa-warn) 10%, var(--wa-card)); }
.wadm-chip.is-arch::before { background: currentColor; border-radius: 2px; }
.wadm-chip.is-file { color: var(--wa-accent); border-color: color-mix(in srgb, var(--wa-accent) 40%, transparent); background: var(--wa-accent-soft); }
.wadm-chip.is-bad { color: var(--wa-bad); border-color: color-mix(in srgb, var(--wa-bad) 40%, transparent); background: var(--wa-bad-soft); }
.wadm-chip.is-group { background: transparent; }

/* The switch: a track and a knob, drawn in the box's own background (no pseudo-element, so every
   browser draws it) and clipped to its content box, so the box itself is a 44 px target around a
   46 x 28 track; the tile's icon and words are its label and press it too. */
.wadm-switch {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 62px;
  height: 44px;
  margin: 0;
  padding: 8px;
  border-radius: 999px;
  background-clip: content-box;
  background-origin: content-box;
  background-color: var(--wa-track);
  background-image: radial-gradient(circle closest-side, #fff 88%, rgba(255, 255, 255, 0) 100%), radial-gradient(circle closest-side, rgba(0, 0, 0, .3) 40%, rgba(0, 0, 0, 0) 100%);
  background-size: 22px 22px, 26px 26px;
  background-position: 3px 50%, 1px calc(50% + 1px);
  background-repeat: no-repeat;
  cursor: pointer;
  transition: background-color .2s ease, background-position .22s cubic-bezier(.3, 1.4, .5, 1), opacity .2s;
}
.wadm-switch:checked { background-color: var(--wa-accent); background-position: 21px 50%, 19px calc(50% + 1px); }
.wadm-switch:focus-visible { outline: 2px solid var(--wa-accent); outline-offset: -5px; }
.wadm-row:has(.wadm-note.is-busy) .wadm-switch { opacity: .65; }
@media (forced-colors: active) { .wadm-switch { -webkit-appearance: auto; appearance: auto; width: 20px; height: 20px; } }

/* A tile switched off, or archived, is drawn faded. */
.wadm-row:has(.wadm-switch:not(:checked)) .wadm-icon, .wadm-row.is-archived .wadm-icon { filter: grayscale(.85); opacity: .5; }
.wadm-row:has(.wadm-switch:not(:checked)) .wadm-text strong, .wadm-row:has(.wadm-switch:not(:checked)) .wadm-words,
.wadm-row.is-archived .wadm-text strong, .wadm-row.is-archived .wadm-words { opacity: .62; }
.wadm-row.is-leaving { opacity: 0; transform: translateX(16px); }
.wadm-row.is-arrived { animation: wadm-arrive 1.2s ease; }
@keyframes wadm-arrive { from { background-color: var(--wa-accent-soft); box-shadow: inset 3px 0 0 var(--wa-accent); } }

/* The archived tiles */
.wadm-archlist { --sc: #8a96a3; overflow: hidden; border: 1px solid var(--wa-line); border-radius: 12px; }
.wadm-archlist:has(> .wadm-none) { overflow: visible; border: 0; }
.wadm-archlist > .wadm-row:first-child { border-top: 0; }

/* A model's files, one button each, when they are too big for one zip */
.wadm-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; padding: 10px 12px; border-radius: 10px; background: var(--wa-sunk); }
.wadm-files[hidden] { display: none; }
.wadm-files p { flex: 1 1 100%; margin: 0; color: var(--wa-muted); font-size: 12.5px; }
.wadm-files .wadm-btn { max-width: 100%; font: 12px/1.3 var(--mono); text-align: left; overflow-wrap: anywhere; }

/* Empty: said plainly, in a dashed box */
.wadm-none {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 26px 16px;
  border: 1.5px dashed var(--wa-line);
  border-radius: 12px;
  color: var(--wa-muted);
  font-weight: 600;
  text-align: center;
}
.wadm-none::before {
  content: "";
  width: 30px;
  height: 30px;
  margin-bottom: 4px;
  background: var(--wa-faint);
  opacity: .7;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.75' y='2.75' width='12.5' height='3' rx='.75'/%3E%3Cpath d='M2.75 5.75v6.5c0 .55.45 1 1 1h8.5c.55 0 1-.45 1-1v-6.5M6.5 8.75h3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.75' y='2.75' width='12.5' height='3' rx='.75'/%3E%3Cpath d='M2.75 5.75v6.5c0 .55.45 1 1 1h8.5c.55 0 1-.45 1-1v-6.5M6.5 8.75h3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wadm-none small { max-width: 44ch; color: var(--wa-faint); font-size: 12.5px; font-weight: 400; }

/* Notes: working (a turning ring), done (a tick, which fades), what went wrong */
.wadm-note { min-width: 0; color: var(--wa-muted); font-size: 12.5px; line-height: 1.35; overflow-wrap: anywhere; }
.wadm-note:empty { display: none; }
.wadm-note.is-busy::before, .wadm-note.is-ok::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  vertical-align: -2px;
  box-sizing: border-box;
}
.wadm-note.is-busy::before { border: 2px solid var(--wa-line); border-top-color: var(--wa-accent); border-radius: 50%; animation: wadm-spin .8s linear infinite; }
.wadm-note.is-ok { color: var(--wa-ok); font-weight: 600; }
.wadm-note.is-ok::before {
  width: 6px;
  height: 11px;
  margin: 0 8px 0 3px;
  vertical-align: 0;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  animation: wadm-tick .35s cubic-bezier(.3, 1.6, .5, 1);
}
.wadm-row .wadm-note.is-ok, .wadm-allnote.is-ok { animation: wadm-fade 4s ease forwards; }   /* these clear themselves at 4 s */
.wadm-note.is-err { padding: 7px 10px; border-radius: 8px; background: var(--wa-bad-soft); color: var(--wa-bad); font-weight: 600; }
.wadm-note.is-info { padding: 7px 10px; border-radius: 8px; background: var(--wa-sunk); color: var(--wa-muted); }
.wadm-tools .wadm-note.is-err, .wadm-tools .wadm-note.is-info { text-align: left; }
@keyframes wadm-spin { to { transform: rotate(360deg); } }
@keyframes wadm-tick { from { opacity: 0; transform: rotate(45deg) scale(.3); } }
@keyframes wadm-fade { 0%, 82% { opacity: 1; } to { opacity: .15; } }

/* Forms */
.wadm-form { display: grid; gap: 4px; margin: 0; }
.wadm-form label, .wadm-login label { margin-top: 10px; color: var(--wa-muted); font-size: 13px; font-weight: 600; }
.wadm-form label:first-child, .wadm-login label:first-child { margin-top: 0; }
.wadm-form p { margin: 0 0 4px; color: var(--wa-ink); }
.wadm-login input, .wadm-form input:not([type=hidden]) {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--wa-line);
  border-radius: 10px;
  background: var(--wa-card);
  color: var(--wa-ink);
  font: 15px var(--sans);
  transition: border-color .15s, box-shadow .15s;
}
.wadm-login input:hover, .wadm-form input:not([type=hidden]):hover { border-color: color-mix(in srgb, var(--wa-accent) 35%, var(--wa-line)); }
.wadm-login input:focus, .wadm-form input:not([type=hidden]):focus {
  outline: 2px solid transparent;
  border-color: var(--wa-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wa-accent) 28%, transparent);
}
.wadm-form .wadm-bar { margin-top: 14px; }
.wadm-made { padding: 8px 10px; border: 1px dashed color-mix(in srgb, var(--wa-accent) 55%, transparent); border-radius: 8px; background: var(--wa-accent-soft); color: var(--wa-ink); font: 13px/1.4 var(--mono); overflow-wrap: anywhere; user-select: all; }
.wadm-made:empty { display: none; }

/* Your password and the admins: side by side when there is room */
.wadm-duo { display: grid; gap: 18px; align-items: start; }
.wadm-duo > .wadm-part { margin: 0; }
@media (min-width: 900px) { .wadm-duo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.wadm-people { margin: 0; padding: 0; list-style: none; }
.wadm-person {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  padding: 12px 0;
  border-top: 1px solid var(--wa-line-soft);
}
.wadm-person:first-child { border-top: 0; padding-top: 0; }
.wadm-person .wadm-avatar { width: 36px; height: 36px; }
.wadm-person .wadm-text strong { font-size: 14px; }
.wadm-person.is-me .wadm-avatar { box-shadow: 0 0 0 2px var(--wa-card), 0 0 0 4px var(--wa-accent); }
.wadm-person .wadm-acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.wadm-person .wadm-form { grid-column: 1 / -1; margin-top: 4px; padding: 14px; border-radius: 12px; background: var(--wa-sunk); animation: wadm-open .22s ease; }
@keyframes wadm-open { from { opacity: 0; transform: translateY(-4px); } }
.wadm-people-note:not(:empty) { display: block; margin-top: 8px; }
.wadm-addbox { margin-top: 18px; padding: 16px; border: 1px solid var(--wa-line-soft); border-radius: 12px; background: var(--wa-sunk); }
.wadm-addbox .wadm-form input:not([type=hidden]) { background: var(--wa-card); }

/* The sign-in */
.wadm-signin { max-width: 560px; }
.wadm-signin .wadm-hero { display: block; }
.wadm-login { display: grid; gap: 4px; margin: 0; }
.wadm-login .wadm-btn { width: 100%; margin-top: 16px; min-height: 44px; }
.wadm-signcard .wadm-lead { margin-top: 16px; }
.wadm-back { margin: 16px 0 0; font-size: 14px; }

/* Phones: rows in two lines (the tile and its switch, then its buttons), and every control 44 px. */
@media (max-width: 700px) {
  .wadm { padding-top: 14px; }
  .wadm-hero { padding: 20px 16px 18px; border-radius: 14px; }
  .wadm .wadm-hero h1 { font-size: 26px; }
  .wadm-out { width: 100%; }
  .wadm-who { flex: 1 1 100%; }
  .wadm-hero .wadm-key, .wadm .wadm-hero a.wadm-key { min-height: 44px; flex: 1 1 auto; justify-content: center; }
  .wadm-part { padding: 16px 12px; border-radius: 14px; }
  .wadm-head { margin-bottom: 14px; }
  .wadm-tools { justify-content: stretch; width: 100%; }
  .wadm-tools .wadm-all { flex: 1 1 0; }
  .wadm-tools .wadm-allnote { text-align: left; }
  .wadm-summary { gap: 6px 12px; padding: 8px 10px; border-radius: 12px; }
  .wadm-led { padding: 6px 8px 5px; gap: 5px; }
  .wadm-led b { font-size: 18px; }
  .wadm-led i { font-size: 9px; }
  .wadm-saved { font-size: 11.5px; }
  .wadm-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; padding: 12px; }
  .wadm-pick { grid-column: 1 / 3; align-items: flex-start; }
  .wadm-row.is-archived .wadm-pick { grid-column: 1 / -1; }
  .wadm-row > .wadm-switch { grid-column: 3; align-self: start; margin: -2px -8px 0 0; }
  .wadm-get { grid-column: 1; grid-row: 2; }
  .wadm-arch, .wadm-restore { grid-column: 2; grid-row: 2; }
  .wadm-row > .wadm-acts > .wadm-note, .wadm-row > .wadm-acts > .wadm-note.is-long, .wadm-row > .wadm-acts > .wadm-note.is-err {
    grid-column: 1 / -1; grid-row: 3; justify-self: start; margin-left: 0; text-align: left;
  }
  .wadm-files { grid-row: 4; }
  .wadm-btn, .wadm-btn.wadm-mini { min-height: 44px; }
  .wadm-row .wadm-btn.wadm-mini { padding: 0 8px; }
  .wadm-meta code { display: none; }
  .wadm-person { grid-template-columns: 36px minmax(0, 1fr); }
  .wadm-person .wadm-acts { grid-column: 1 / -1; justify-content: stretch; }
  .wadm-person .wadm-acts .wadm-btn { flex: 1 1 0; }
  .wadm-addbox { padding: 12px; }
}
@media (pointer: coarse) { .wadm-btn, .wadm-btn.wadm-mini, .wadm-hero .wadm-key, .wadm .wadm-hero a.wadm-key { min-height: 44px; } }
@media (max-height: 500px) { .wadm-summary { position: static; } }   /* a phone on its side: the header is enough to keep in view */

@media (prefers-reduced-motion: reduce) {
  .wadm-row, .wadm-row.is-arrived, .wadm-note.is-ok::before, .wadm-switch, .wadm-btn, .wadm-key,
  .wadm-row .wadm-note.is-ok, .wadm-allnote.is-ok, .wadm-led b.is-changing, .wadm-saved.is-changing, .wadm-person .wadm-form { transition: none; animation: none; }
  .wadm-row.is-leaving { transform: none; }
  .wadm-note.is-busy::before { animation: none; border-top-color: var(--wa-accent); border-right-color: var(--wa-accent); }
}