/* ==========================================================================
   STRUCTURAL COLOUR -- a concept theme for the home page          (#643)

   The idea: in living things the most vivid colour is not pigment. A morpho
   wing or a beetle shell is coloured by its STRUCTURE -- layers a few hundred
   nanometres apart that interfere with light -- and that structure is itself
   grown by pattern formation. The footer says it in the site's own words:
   "the same underlying structures, everywhere".

   So nothing on this page is painted a colour for its own sake. The ground is
   black velvet, the type is pale, and the colour comes from one place: a
   thin-film interference sheen that lives on the grown pattern (the culture in
   the hero, fig. 1, and the closing panel), on the mark, and on the actions.
   The cursor is the light. Move it and the sheen moves, the way tilting a
   shell does.

   Same structure and same copy as index.html; only the theme is new. Single
   dark world by design: no light variant, every colour set explicitly.
   ========================================================================== */

:root {
  color-scheme: dark;
  --velvet:   #050508;
  --raised:   #0e0f18;
  --hair:     rgba(214, 220, 255, .10);
  --hair-2:   rgba(214, 220, 255, .17);
  --hair-3:   rgba(214, 220, 255, .30);
  --text:     #EEF0F7;
  --text-2:   #CBCFDD;
  --dim:      #A6ACC2;
  --faint:    #8E95AD;

  /* the film: five stops of one thin-film sweep, pale enough that the action
     text on it (--on-film) measures above 8:1 on the darkest of them */
  --f1: #9FF2FF;
  --f2: #B8A8FF;
  --f3: #FFB4E1;
  --f4: #FFE0A6;
  --f5: #A9FFD9;
  --film: linear-gradient(105deg, var(--f1) 0%, var(--f2) 26%, var(--f3) 50%, var(--f4) 74%, var(--f5) 100%);
  --on-film: #0A0911;
  --ok:    #8EF2C6;
  --pilot: #FFD58C;

  --serif: Fraunces, "Bodoni 72", Georgia, "Times New Roman", serif;
  --serif-set: "opsz" 24, "SOFT" 40, "WONK" 1;
  --sans:  "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --bar-h: 64px;
  --gutter: clamp(18px, 4.2vw, 44px);
  --wrap: 1160px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --sheen: 50%;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--velvet);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}
@supports (overflow: clip) { html { overflow-x: clip; } }
body {
  margin: 0;
  background: var(--velvet);
  color: var(--text);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: rgba(184, 168, 255, .38); color: #fff; }
:focus-visible { outline: 2px solid var(--f2); outline-offset: 3px; border-radius: 6px; }
.sc-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- the velvet: grain and the torch, both UNDER the content ------------- */
.sc-grain {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .045;
  background-image: var(--grain);
}
.sc-torch {
  position: fixed; left: 0; top: 0; z-index: 0; pointer-events: none;
  width: 1100px; height: 1100px; margin: -550px 0 0 -550px;
  background: radial-gradient(circle, rgba(150, 165, 255, .075) 0%, rgba(150, 165, 255, .03) 32%, transparent 62%);
  transform: translate3d(var(--tx, 50vw), var(--ty, 40vh), 0);
  display: none; opacity: 0; transition: opacity .6s;
}
.sc-torch.on { display: block; opacity: 1; }
main, footer { position: relative; z-index: 1; }

/* ---- the bar ---------------------------------------------------------------- */
.sc-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  background: linear-gradient(rgba(5, 5, 8, .74), rgba(5, 5, 8, .5));
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--hair);
}
.sc-bar .container {
  max-width: 1280px; margin: 0 auto; height: var(--bar-h);
  padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.logo {
  display: inline-flex; align-items: center; gap: 12px; text-decoration: none;
  font: 500 12.5px/1 var(--mono); letter-spacing: .32em; color: var(--text);
  white-space: nowrap;
}
.logo .kg-mark { width: 26px; height: 26px; flex: none; }
.nav-links { display: flex; align-items: center; gap: clamp(14px, 1.7vw, 26px); }
.nav-links > a:not(.kg-btn), .kg-worlds-toggle {
  position: relative; padding: 8px 0; border: 0; background: none; cursor: pointer;
  font: 500 14.5px/1 var(--sans); color: var(--dim); text-decoration: none;
  transition: color .2s;
}
.nav-links > a:not(.kg-btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 1px;
  background: var(--film); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav-links > a:not(.kg-btn):hover, .kg-worlds-toggle:hover,
.kg-worlds[data-open="true"] .kg-worlds-toggle { color: var(--text); }
.nav-links > a:not(.kg-btn):hover::after { transform: scaleX(1); }
.nav-github svg { width: 18px; height: 18px; fill: currentColor; }
.nav-signin { white-space: nowrap; }
.sc-bar .bar-cta { display: none; }   /* the phone's always-visible action; scoped so .kg-btn cannot win */
.mobile-note {
  margin-top: 18px; padding: 0 !important; border: 0 !important;
  font: 500 12px/1.4 var(--mono) !important; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim) !important; text-decoration: none;
}
.nav-links > a.nav-github::after { display: none; }

.kg-worlds { position: relative; }
.kg-worlds-toggle { display: inline-flex; align-items: center; gap: 6px; }
.kg-worlds-toggle svg { width: 10px; height: 10px; transition: rotate .25s var(--ease); }
.kg-worlds[data-open="true"] .kg-worlds-toggle svg { rotate: 180deg; }
.kg-worlds-panel {
  position: absolute; top: calc(100% + 12px); left: 50%; width: 470px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; padding: 14px;
  background: rgba(10, 10, 16, .94);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid var(--hair-2); border-radius: 18px;
  box-shadow: 0 40px 90px -24px rgba(0, 0, 0, .85);
  opacity: 0; visibility: hidden; transform: translate(-50%, -6px);
  transition: opacity .2s, transform .25s var(--ease), visibility 0s linear .25s;
}
.kg-worlds-panel::before { /* the bridge: the pointer can cross the gap */
  content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px;
}
.kg-worlds[data-open="true"] .kg-worlds-panel {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
  transition: opacity .2s, transform .25s var(--ease), visibility 0s;
}
.kg-worlds-panel a {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px;
  color: var(--text-2); text-decoration: none; font: 500 14.5px/1.2 var(--sans);
}
.kg-worlds-panel a:hover, .kg-worlds-panel a:focus-visible { background: rgba(214, 220, 255, .07); color: var(--text); }
.kg-worlds-panel .dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--c, var(--f1)); box-shadow: 0 0 10px var(--c, var(--f1));
}
.kg-worlds-panel a:nth-child(1)  { --c: #9FF2FF; }
.kg-worlds-panel a:nth-child(2)  { --c: #FFB4E1; }
.kg-worlds-panel a:nth-child(3)  { --c: #A9FFD9; }
.kg-worlds-panel a:nth-child(4)  { --c: #FFE0A6; }
.kg-worlds-panel a:nth-child(5)  { --c: #B9D2FF; }
.kg-worlds-panel a:nth-child(6)  { --c: #FFC9AE; }
.kg-worlds-panel a:nth-child(7)  { --c: #D2BCFF; }
.kg-worlds-panel a:nth-child(8)  { --c: #CFFFAE; }
.kg-worlds-panel a:nth-child(9)  { --c: #AEC3FF; }
.kg-worlds-panel a:nth-child(10) { --c: #FFAECB; }
.kg-worlds-panel a:nth-child(11) { --c: #AEFFF1; }
.kg-worlds-panel a:nth-child(12) { --c: #FFF1AE; }
.kg-worlds-panel a:nth-child(13) .dot { background: var(--film); box-shadow: 0 0 10px var(--f2); }
.kg-worlds-panel .kg-worlds-all {
  grid-column: 1 / -1; margin-top: 6px; padding-top: 13px; border-radius: 0 0 10px 10px;
  border-top: 1px solid var(--hair); color: var(--dim); font-size: 13.5px;
}

.hamburger {
  display: none; position: relative; width: 44px; height: 44px; margin-right: -10px;
  border: 0; background: none; cursor: pointer;
}
.hamburger span {
  position: absolute; left: 11px; right: 11px; height: 1.5px; border-radius: 2px;
  background: var(--text); transition: transform .3s var(--ease), opacity .2s;
}
.hamburger span:nth-child(1) { top: 15px; }
.hamburger span:nth-child(2) { top: 21px; }
.hamburger span:nth-child(3) { top: 27px; }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mobile-overlay {
  position: fixed; inset: 0; z-index: 45; overflow-y: auto;
  display: flex; flex-direction: column;
  padding: calc(var(--bar-h) + env(safe-area-inset-top, 0px) + 24px) var(--gutter) calc(40px + env(safe-area-inset-bottom, 0px));
  background: rgba(5, 5, 8, .95);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s linear .25s;
}
.mobile-overlay.open { opacity: 1; visibility: visible; transition: opacity .25s, visibility 0s; }
.mobile-overlay a:not(.kg-btn) {
  font: 400 30px/1.2 var(--serif); color: var(--text); text-decoration: none;
  padding: 13px 0; border-bottom: 1px solid var(--hair);
}
.mobile-overlay .kg-btn { align-self: flex-start; margin-top: 26px; }

/* ---- actions ---------------------------------------------------------------- */
.kg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 15.5px/1 var(--sans); letter-spacing: .01em; text-decoration: none; white-space: nowrap;
}
.kg-btn.primary {
  color: var(--on-film);
  background: var(--film);
  background-size: 240% 100%;
  background-position: var(--sheen) 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55),
              inset 0 -12px 20px -12px rgba(10, 9, 17, .25),
              0 12px 36px -14px rgba(184, 168, 255, .6);
  transition: box-shadow .3s, transform .3s var(--ease), background-position .7s var(--ease);
}
.kg-btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85), 0 16px 46px -12px rgba(255, 180, 225, .6);
}
.kg-btn.primary:active { transform: translateY(0) scale(.985); }
.kg-btn.small { padding: 10px 18px; font-size: 14px; }
.kg-mlink {
  display: inline-flex; align-items: center; gap: 8px; padding-bottom: 3px;
  color: var(--text); text-decoration: none; font: 500 15.5px/1.3 var(--sans);
  background: var(--film) left bottom / 100% 1px no-repeat;
}
.kg-mlink::after { content: "\2192"; transition: transform .3s var(--ease); }
.kg-mlink:hover::after { transform: translateX(4px); }
.kg-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 30px; }
/* The free tier was only stated in band 08, about 8,400px down. It is the single
   fact that decides whether a visitor tries this, so it sits with the action. */
.kg-hero-reassure {
  display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 18px 0 0;
  font: 500 11.5px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim);
}
.kg-hero-reassure span { white-space: nowrap; }

/* ---- type ------------------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--serif); font-weight: 500; text-wrap: balance;
  font-optical-sizing: none; font-variation-settings: var(--serif-set);
}
h1 {
  font-size: clamp(2.15rem, 1.1rem + 3vw, 3.75rem); line-height: 1.06;
  letter-spacing: -.012em; margin: 0 0 24px;
}
h2 {
  font-size: clamp(1.85rem, 1.15rem + 2.4vw, 3.05rem); line-height: 1.08;
  letter-spacing: -.01em; margin: 0 0 20px;
}
h1 em, h2 em { font-style: italic; font-weight: 500; color: var(--f2); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  h1 em, h2 em, .sc-film-text {
    background: var(--film); background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
    padding-right: .07em;
    animation: sc-drift 9s ease-in-out infinite alternate;
  }
}
@keyframes sc-drift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.kg-eyebrow {
  display: flex; align-items: center; gap: 10px; margin: 0 0 18px;
  font: 500 12px/1.35 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim);
}
.kg-lede {
  margin: 0; max-width: 62ch; color: var(--text-2);
  font-size: clamp(17px, 1rem + .3vw, 19.5px); line-height: 1.6;
}
.kg-note { margin: 18px 0 0; max-width: 76ch; color: var(--faint); font-size: 14px; line-height: 1.65; }
.kg-note a, .kg-method a, .kg-produce-oss a {
  color: var(--text-2); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(184, 168, 255, .6);
}
.kg-note a:hover, .kg-method a:hover, .kg-produce-oss a:hover { color: var(--text); text-decoration-color: var(--f3); }

/* ---- the hero --------------------------------------------------------------- */
.kg-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: center;
  padding: calc(var(--bar-h) + env(safe-area-inset-top, 0px) + clamp(36px, 6vh, 84px)) var(--gutter) clamp(48px, 7vh, 96px);
}
@media (min-width: 981px) { .kg-hero { min-height: min(92svh, 900px); } }
.sc-culture { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; opacity: 0; transition: opacity 1.4s ease; }
.sc-culture.live { opacity: 1; }
.sc-hero-veil {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 5, 8, .62) 0%, rgba(5, 5, 8, 0) 20%, rgba(5, 5, 8, 0) 70%, var(--velvet) 100%),
    radial-gradient(60% 70% at 26% 52%, rgba(5, 5, 8, .35), rgba(5, 5, 8, 0) 70%);
}
.sc-hero-veil::after, .sc-path-veil::after {
  content: ""; position: absolute; inset: 0; opacity: .045; background-image: var(--grain);
}
.kg-hero-grid {
  width: 100%; max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(28px, 4vw, 72px); align-items: center;
}
.kg-hero-panel {
  position: relative; padding: clamp(26px, 3vw, 46px); border-radius: 28px;
  background: rgba(6, 6, 10, .74);
  -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25);
  border: 1px solid var(--hair-2);
  box-shadow: 0 50px 120px -40px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.kg-hero-panel::before { /* four corner ticks, a slide label's registration marks */
  content: ""; position: absolute; inset: 12px; pointer-events: none; border-radius: 18px;
  --t: rgba(214, 220, 255, .38);
  background:
    linear-gradient(var(--t), var(--t)) left top / 14px 1px no-repeat,
    linear-gradient(var(--t), var(--t)) left top / 1px 14px no-repeat,
    linear-gradient(var(--t), var(--t)) right top / 14px 1px no-repeat,
    linear-gradient(var(--t), var(--t)) right top / 1px 14px no-repeat,
    linear-gradient(var(--t), var(--t)) left bottom / 14px 1px no-repeat,
    linear-gradient(var(--t), var(--t)) left bottom / 1px 14px no-repeat,
    linear-gradient(var(--t), var(--t)) right bottom / 14px 1px no-repeat,
    linear-gradient(var(--t), var(--t)) right bottom / 1px 14px no-repeat;
}
.kg-kron-badge-link {
  position: absolute; top: clamp(20px, 2.6vw, 32px); right: clamp(20px, 2.6vw, 32px);
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(214, 220, 255, .04); border: 1px solid var(--hair);
  transition: background .3s, border-color .3s;
}
.kg-kron-badge-link:hover { background: rgba(214, 220, 255, .08); border-color: var(--hair-3); }
.sc-kron { width: 32px; height: 32px; animation: sc-spin 40s linear infinite; }
@keyframes sc-spin { to { rotate: 360deg; } }
.kg-hero-eyebrow { padding-right: 56px; }
.kg-hero-eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--f5); box-shadow: 0 0 12px var(--f5);
  animation: sc-breathe 3.4s ease-in-out infinite;
}
@keyframes sc-breathe { 50% { opacity: .35; box-shadow: 0 0 4px var(--f5); } }
.kg-hero-differentiator { margin: 0 0 16px; color: var(--text-2); font: 500 15px/1.55 var(--sans); letter-spacing: .005em; }
.kg-lead { margin: 0; max-width: 54ch; color: var(--text-2); font-size: 18px; line-height: 1.6; }

.kg-stage-wrap { display: grid; place-items: center; padding-bottom: 26px; }
.kg-stage {
  position: relative; width: min(100%, 510px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 46%, rgba(12, 12, 20, .30), rgba(5, 5, 8, .70) 72%);
  -webkit-backdrop-filter: blur(9px) brightness(.6) saturate(1.2);
  backdrop-filter: blur(9px) brightness(.6) saturate(1.2);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 0 0 12px rgba(5, 5, 8, .45),
              0 0 0 13px rgba(255, 255, 255, .07), 0 60px 130px -40px rgba(0, 0, 0, .95);
}
.kg-stage::before, .kg-stage::after { /* the graticule: minor ticks every 6 degrees, major every 30 */
  content: ""; position: absolute; inset: 6px; border-radius: 50%; pointer-events: none;
}
.kg-stage::before {
  background: repeating-conic-gradient(from -.35deg, rgba(225, 230, 255, .34) 0 .7deg, transparent .7deg 6deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - 7px), #000 calc(100% - 7px));
  mask: radial-gradient(circle closest-side, transparent calc(100% - 7px), #000 calc(100% - 7px));
}
.kg-stage::after {
  background: repeating-conic-gradient(from -.5deg, rgba(235, 238, 255, .62) 0 1deg, transparent 1deg 30deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - 13px), #000 calc(100% - 13px));
  mask: radial-gradient(circle closest-side, transparent calc(100% - 13px), #000 calc(100% - 13px));
}
#scOrgs { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }
.kg-stage-link {
  position: absolute; left: 50%; bottom: -19px; transform: translateX(-50%); z-index: 2;
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  padding: 10px 16px; border-radius: 999px; text-decoration: none;
  font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text);
  background: rgba(8, 8, 13, .92); border: 1px solid var(--hair-3);
  transition: border-color .3s, background .3s;
}
.kg-stage-link:hover { border-color: rgba(255, 255, 255, .55); background: rgba(14, 14, 22, .96); }
.kg-stage-link svg { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.kg-stage-link:hover svg { transform: translateX(3px); }

/* ---- bands ------------------------------------------------------------------ */
.kg-band { position: relative; padding-block: clamp(64px, 7.5vw, 112px); }
.kg-band.sunken {
  background: linear-gradient(180deg, rgba(14, 15, 25, 0), rgba(14, 15, 25, .62) 14%, rgba(14, 15, 25, .62) 86%, rgba(14, 15, 25, 0));
}
.kg-wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.kg-band-head { max-width: 780px; margin-bottom: clamp(32px, 4vw, 54px); }
.kg-sec-mark { gap: 12px; }
.kg-sec-no {
  padding: 5px 7px 4px; border-radius: 6px; font-size: 11.5px; letter-spacing: .06em;
  color: var(--on-film); background: var(--film); background-size: 240% 100%; background-position: var(--sheen) 50%;
  transition: background-position .7s var(--ease);
}
.kg-sec-icon { width: 18px; height: 18px; color: var(--f2); flex: none; }
.sc-block { margin-top: clamp(22px, 3vw, 34px); }
.sc-block:first-child { margin-top: 0; }
.sc-surface, .sc-console, .kg-regimes, .kg-ledger-table, .kg-dev .kg-code {
  border: 1px solid var(--hair-2); border-radius: 20px;
  background: linear-gradient(180deg, rgba(18, 19, 31, .92), rgba(10, 10, 16, .92));
  box-shadow: 0 40px 100px -50px rgba(0, 0, 0, .95);
}

/* 01 the decision */
.sc-console { overflow: hidden; }
.kg-example { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); }
.kg-code {
  margin: 0; padding: 26px 28px; overflow-x: auto; white-space: pre; tab-size: 4;
  font: 400 13.5px/1.75 var(--mono); color: var(--text-2);
}
.kg-example .kg-code + .kg-code { border-left: 1px solid var(--hair); background: rgba(255, 255, 255, .018); }
.kg-code .c { color: var(--faint); }
.kg-code .s { color: #FFD3EC; }
.kg-code .v { color: var(--f1); border-radius: 3px; }
.kg-code .k { color: #C9BDFF; }
.kg-code .f { color: var(--f4); }
.kg-code .n { color: var(--f5); }
.kg-code .v.sc-flash, .kg-code .s.sc-flash { animation: sc-flash 1s var(--ease); }
@keyframes sc-flash {
  0%   { color: #fff; text-shadow: 0 0 16px rgba(159, 242, 255, .95), 0 0 2px #fff; background: rgba(159, 242, 255, .16); }
  100% { text-shadow: 0 0 0 transparent; background: transparent; }
}
.kg-example-note {
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 28px;
  border-top: 1px solid var(--hair);
  font: 500 12px/1.45 var(--mono); letter-spacing: .05em; color: var(--dim);
}
.kg-example-note::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--ok); box-shadow: 0 0 10px var(--ok);
}
.kg-regimes { overflow: hidden; }
.kg-regime-head, .kg-regime {
  display: grid; grid-template-columns: 1.05fr 2.15fr 1.6fr .8fr .75fr;
  gap: 16px; align-items: center; padding: 16px 24px;
}
.kg-regime-head {
  font: 500 11px/1 var(--mono); letter-spacing: .15em; text-transform: uppercase; color: var(--faint);
  border-bottom: 1px solid var(--hair);
}
.kg-regime {
  position: relative; width: 100%; margin: 0; border: 0; border-top: 1px solid var(--hair);
  background: transparent; color: var(--text-2); text-align: left; cursor: pointer;
  font: 400 15.5px/1.4 var(--sans); transition: background .25s;
}
.kg-regime-head + .kg-regime { border-top: 0; }
.kg-regime:hover { background: rgba(214, 220, 255, .035); }
.kg-regime[aria-selected="true"] {
  color: var(--text);
  background: linear-gradient(90deg, rgba(184, 168, 255, .13), rgba(159, 242, 255, .05) 55%, rgba(159, 242, 255, 0));
}
.kg-regime:focus-visible { outline-offset: -3px; border-radius: 0; }
.kg-regime-name { font: 500 14.5px/1.2 var(--mono); color: var(--text); }
.kg-regime-num {
  display: grid; grid-template-columns: 3.3em minmax(0, 1fr); align-items: center; gap: 8px;
  font: 500 14px/1 var(--mono);
}
.kg-regime-num::after { /* the budget, drawn to one linear scale: 4000 fills the track */
  content: ""; height: 4px; border-radius: 4px; min-width: 3px;
  width: calc(var(--w, 0) * 100%);
  background: var(--film); background-size: calc(100% / var(--w, 1)) 100%;
  opacity: .55; transform-origin: left center;
  transition: transform .9s var(--ease), opacity .3s, box-shadow .3s;
}
.kg-regime[aria-selected="true"] .kg-regime-num::after { opacity: 1; box-shadow: 0 0 14px rgba(184, 168, 255, .55); }
.kg-regime-tier, .kg-regime-cost { font: 400 13.5px/1.2 var(--mono); color: var(--dim); }
.kg-regime-cost { font: 600 16px/1 var(--sans); color: var(--text-2); letter-spacing: -.01em; white-space: nowrap; }
.kg-regime-cost small { font: 500 11px/1 var(--mono); color: var(--faint); letter-spacing: .04em; }
.kg-regime[aria-selected="true"] .kg-regime-tier, .kg-regime[aria-selected="true"] .kg-regime-cost { color: var(--text-2); }
.kg-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kg-fields > div {
  padding: 22px 24px; border-radius: 18px; border: 1px solid var(--hair); background: rgba(14, 15, 24, .6);
}
.kg-field-name { margin: 0 0 8px; }
.kg-field-name code { font: 500 15px/1.2 var(--mono); }
.kg-field-note { margin: 0; color: var(--text-2); font-size: 15.5px; line-height: 1.6; }

/* 02 the comparison */
.kg-ledger-table { overflow: hidden; }
.kg-lrow {
  display: grid; grid-template-columns: 1.45fr 1fr 1fr; gap: 20px; align-items: center;
  padding: 15px 24px; border-top: 1px solid var(--hair); transition: opacity .35s;
}
.kg-lrow-head {
  border-top: 0; font: 500 11px/1 var(--mono); letter-spacing: .15em; text-transform: uppercase; color: var(--faint);
}
.kg-step-label { color: var(--text); }
.kg-step-cost, .kg-total-value { position: relative; display: block; }
.kg-step-cost { padding-bottom: 12px; font: 500 14px/1.25 var(--mono); color: var(--text-2); }
.kg-step-cost::after, .kg-total-value::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; border-radius: 3px;
  width: calc(var(--w, 0) * 100%); transform-origin: left center;
  background: rgba(214, 220, 255, .30);
  transition: transform .65s var(--ease), width .4s var(--ease);
}
.kg-step-cost.routed::after, .kg-total-value.routed::after {
  background: var(--film); background-size: calc(100% / var(--w, 1)) 100%;
}
.kg-step-tier { display: block; margin-top: 4px; font: 400 11.5px/1.3 var(--mono); letter-spacing: .02em; color: var(--faint); }
.kg-step[data-pending="true"] { opacity: .26; }
.kg-step[data-pending="true"] .kg-step-cost::after { transform: scaleX(0); }
.kg-lrow-total { background: rgba(255, 255, 255, .025); padding-block: 20px; }
.kg-total-label { font: 500 12px/1 var(--mono); letter-spacing: .15em; text-transform: uppercase; color: var(--dim); }
.kg-total-value {
  padding-bottom: 14px;
  font: 600 clamp(1.7rem, 1.1rem + 1.5vw, 2.5rem)/1 var(--sans); letter-spacing: -.02em;
  font-variant-numeric: lining-nums tabular-nums; color: var(--text);
}
.kg-total-value::after { height: 5px; border-radius: 5px; }
.kg-verdict { margin: 26px 0 16px; max-width: 64ch; color: var(--text-2); font-size: 18px; line-height: 1.6; }
.kg-verdict strong { font: 500 1.08em/1 var(--mono); color: var(--text); white-space: nowrap; }
.kg-replay {
  display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; cursor: pointer;
  border: 1px solid var(--hair-3); border-radius: 999px; background: transparent; color: var(--text);
  font: 500 12.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  transition: background .25s, border-color .25s;
}
.kg-replay::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--f1); box-shadow: 0 0 10px var(--f1);
}
.kg-replay:hover { background: rgba(214, 220, 255, .05); border-color: rgba(214, 220, 255, .55); }
.kg-replay:disabled { cursor: default; opacity: .7; }
.kg-replay:disabled::before { animation: sc-breathe .9s ease-in-out infinite; }

/* 03 in the loop */
.kg-dev { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.kg-dev-side { display: grid; gap: 14px; align-content: start; }
.kg-install {
  position: relative; justify-self: start; display: inline-flex; align-items: center;
  padding: 18px 22px; border-radius: 14px; cursor: copy;
  font: 500 16px/1 var(--mono); color: var(--text);
  border: 1px solid var(--hair-2); background: rgba(14, 15, 24, .8);
}
.kg-install::after { /* a film edge that lights when it is pointed at */
  content: ""; position: absolute; inset: -1px; padding: 1px; border-radius: inherit; pointer-events: none;
  background: var(--film);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .3s;
}
.kg-install:hover::after, .kg-install:focus-visible::after, .kg-install.copied::after { opacity: 1; }
.kg-install-hint { margin: 0; font: 500 11.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.kg-dev .kg-code { padding: 28px 30px; }

/* 04 the objection */
.kg-objection { max-width: 780px; }
.kg-objection > p:not(.kg-note) {
  margin: 0 0 18px; color: var(--text-2);
  font-size: clamp(18px, 1.05rem + .35vw, 21px); line-height: 1.62;
}
.kg-objection > p:first-child { color: var(--text); }

/* 05 receipts */
.kg-proof {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--hair-2); border-bottom: 1px solid var(--hair-2);
}
.kg-proof > div { padding: 34px 30px 34px 0; }
.kg-proof > div + div { padding-left: 30px; border-left: 1px solid var(--hair); }
/* a receipts row of two fills its width rather than leaving a third column empty (#666/#629 left two) */
@media (min-width: 761px) { .kg-proof:has(> div:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kg-figure {
  margin: 0 0 16px; color: var(--text); letter-spacing: -.005em; text-wrap: balance;
  font: 500 clamp(1.75rem, 1.05rem + 1.6vw, 2.5rem)/1.1 var(--serif);
  font-variation-settings: var(--serif-set);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .kg-figure {
    /* at rest the window sits on the solid end of the gradient, so the figure
       reads as plain text before, after and without the sweep */
    background: linear-gradient(100deg, var(--text) 0 38%, var(--f1) 43%, var(--f2) 47%, var(--f3) 51%, var(--f4) 55%, var(--text) 61% 100%);
    background-size: 300% 100%; background-position: 100% 0;
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .kg-figure.sc-sweep { animation: sc-sweep 1.9s var(--ease) forwards; }
}
@keyframes sc-sweep { from { background-position: 100% 0; } to { background-position: 0% 0; } }
.kg-method { margin: 0; color: var(--dim); font-size: 15px; line-height: 1.6; }

/* 06 how it is grown */
.kg-story { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); }
.kg-fig { margin: 0; display: flex; flex-direction: column; }
.kg-fig-plate {
  position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 22px;
  border: 1px solid var(--hair-2);
  background: radial-gradient(circle at 50% 38%, #10111c, #07070c 76%);
}
.kg-fig-plate canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sc-dish canvas { inset: 7%; width: 86%; height: 86%; border-radius: 50%; }
.sc-dish::after { /* the glass of the dish */
  content: ""; position: absolute; inset: 7%; border-radius: 50%; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .20), inset 0 0 0 5px rgba(5, 5, 8, .55),
              inset 0 0 0 6px rgba(255, 255, 255, .08), inset 0 0 40px rgba(159, 242, 255, .07);
  background: conic-gradient(from 210deg, rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, .10) 30deg, rgba(255, 255, 255, 0) 70deg, rgba(255, 255, 255, 0) 360deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
  mask: radial-gradient(circle closest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
}
.sc-dish::before {
  content: ""; position: absolute; inset: 7%; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 24px 60px -20px rgba(0, 0, 0, .9);
}
.kg-fig-cap { margin: 18px 0 6px; font: 500 12px/1.45 var(--mono); letter-spacing: .05em; color: var(--dim); }
.kg-fig-no { margin-right: 6px; color: var(--f1); text-transform: uppercase; letter-spacing: .14em; }
.kg-fig-title { margin: 4px 0 10px; font-size: 1.5rem; line-height: 1.18; }
.kg-fig-body { margin: 0; color: var(--dim); font-size: 15.5px; line-height: 1.62; }

/* 07 products */
.kg-produce-group {
  display: flex; align-items: center; gap: 14px; margin: 0 0 14px;
  font: 500 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim);
}
.kg-produce-group::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
.kg-produce-list + .kg-produce-group { margin-top: 42px; }
.kg-produce-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kg-produce-item {
  display: block; padding: 22px 22px 24px; border-radius: 18px; border: 1px solid var(--hair);
  background: rgba(14, 15, 24, .58); color: inherit; text-decoration: none;
  transition: border-color .3s, background .3s, transform .45s var(--ease);
}
a.kg-produce-item:hover { border-color: var(--hair-3); background: rgba(18, 19, 30, .75); transform: translateY(-2px); }
/* only a card you can act on gets the affordance: Loop ships nothing yet, so it
   is deliberately not a link and must not look like one */
a.kg-produce-item .kg-produce-name::after {
  content: "\2192"; margin-left: auto; padding-left: 10px; color: var(--f2);
  font: 400 15px/1 var(--sans); opacity: 0; transform: translateX(-4px);
  transition: opacity .3s, transform .3s var(--ease);
}
a.kg-produce-item:hover .kg-produce-name::after, a.kg-produce-item:focus-visible .kg-produce-name::after { opacity: 1; transform: translateX(0); }
a.kg-produce-item:focus-visible { border-color: var(--hair-3); }
.kg-produce-name {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 8px 10px; margin: 0 0 10px;
  font: 600 17px/1.3 var(--sans); color: var(--text);
}
.kg-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px 5px 8px; border-radius: 999px;
  font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--dim); border: 1px solid var(--hair-2);
}
.kg-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .55; }
.kg-tag { flex: none; white-space: nowrap; }
.kg-tag.ok { color: var(--ok); border-color: rgba(142, 242, 198, .34); }
.kg-tag.ok::before { opacity: 1; box-shadow: 0 0 8px var(--ok); }
.kg-tag.pilot { color: var(--pilot); border-color: rgba(255, 213, 140, .34); }
.kg-tag.pilot::before { opacity: 1; }
.kg-produce-line { margin: 0; color: var(--dim); font-size: 15px; line-height: 1.62; }
.kg-produce-line code {
  padding: 2px 6px; border-radius: 6px; white-space: nowrap;
  font: 500 12.5px/1.4 var(--mono); color: var(--text);
  background: rgba(214, 220, 255, .06); border: 1px solid var(--hair);
}
.kg-produce-oss { margin: 30px 0 0; color: var(--dim); font-size: 15px; line-height: 1.7; }

/* 08 pricing */
.kg-dial label {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px 16px;
  margin-bottom: 18px; color: var(--text-2);
}
.kg-dial-value {
  font: 500 clamp(1.9rem, 1.25rem + 1.9vw, 2.6rem)/1 var(--sans); letter-spacing: -.02em;
  font-variant-numeric: lining-nums tabular-nums; color: var(--text);
}
#kg-calls, .sc-range {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 36px; margin: 0;
  background: transparent; cursor: pointer;
  --track: linear-gradient(90deg, var(--f1), var(--f2) 30%, var(--f3) 60%, var(--f4)) 0 0 / calc(var(--p, .6667) * 100%) 100% no-repeat, rgba(214, 220, 255, .12);
}
#kg-calls::-webkit-slider-runnable-track, .sc-range::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: var(--track); }
#kg-calls::-moz-range-track, .sc-range::-moz-range-track { height: 6px; border-radius: 6px; background: rgba(214, 220, 255, .12); }
#kg-calls::-moz-range-progress, .sc-range::-moz-range-progress { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--f1), var(--f2), var(--f3)); }
#kg-calls::-webkit-slider-thumb, .sc-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border: 0; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff 0, var(--f1) 30%, var(--f2) 58%, var(--f3) 85%);
  box-shadow: 0 0 0 4px rgba(5, 5, 8, .92), 0 0 26px rgba(184, 168, 255, .85);
  transition: transform .2s var(--ease);
}
#kg-calls::-moz-range-thumb, .sc-range::-moz-range-thumb {
  width: 26px; height: 26px; border: 0; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff 0, var(--f1) 30%, var(--f2) 58%, var(--f3) 85%);
  box-shadow: 0 0 0 4px rgba(5, 5, 8, .92), 0 0 26px rgba(184, 168, 255, .85);
}
#kg-calls:active::-webkit-slider-thumb, .sc-range:active::-webkit-slider-thumb { transform: scale(1.12); }
#kg-calls:focus-visible, .sc-range:focus-visible { outline-offset: 6px; }
.kg-readout { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 16px; margin-top: 30px; }
.kg-readout-cell.main { border-color: rgba(184, 168, 255, .38); background: linear-gradient(160deg, rgba(184, 168, 255, .10), rgba(14, 15, 24, .62) 60%); }
.kg-readout-cell.main .kg-readout-value { font-size: clamp(2.1rem, 1.3rem + 2.4vw, 3.4rem); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .kg-readout-cell.main .kg-readout-value, .sc-anchor-cell.back .sc-anchor-num, .sc-scale-cell.kept .sc-scale-num {
    background: var(--film); background-size: 160% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}
.kg-readout-cell { display: flex; flex-direction: column; padding: 24px 26px; border-radius: 18px; border: 1px solid var(--hair-2); background: rgba(14, 15, 24, .62); }
.kg-readout-cell .kg-readout-value { margin-top: auto; }   /* values share a baseline even when a label wraps */
.kg-readout-label { margin: 0 0 12px; font: 500 11.5px/1.35 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.kg-readout-value {
  margin: 0; color: var(--text);
  font: 600 clamp(1.6rem, 1.1rem + 1.4vw, 2.3rem)/1.05 var(--sans); letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums;
}
.kg-readout-value.sc-pulse, .tm-num.sc-pulse { animation: sc-pulse .6s var(--ease); }
@keyframes sc-pulse { 0% { text-shadow: 0 0 22px rgba(184, 168, 255, .9); } 100% { text-shadow: 0 0 0 transparent; } }

/* 02: the illustrative loop, priced per million tokens -- the unit an LLM buyer
   already compares in. Same arithmetic as the verdict: $0.1358 of $0.4500. */
.sc-scale { margin-top: 26px; padding: 26px 28px; border-radius: 20px; border: 1px solid var(--hair-2);
  background: radial-gradient(120% 140% at 85% 0%, rgba(184, 168, 255, .10), rgba(14, 15, 24, .55) 60%); }
.sc-scale-label { margin: 0 0 16px; font: 500 11.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.sc-scale-row { display: grid; grid-template-columns: auto auto auto 1fr; align-items: end; gap: 14px 30px; }
.sc-scale-num { margin: 0; font: 600 clamp(2.3rem, 1.4rem + 2.8vw, 3.9rem)/.95 var(--sans); letter-spacing: -.03em;
  font-variant-numeric: lining-nums tabular-nums; color: var(--text); }
.sc-scale-cell:first-child .sc-scale-num { color: var(--dim); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(214, 220, 255, .35); }
.sc-scale-cap { margin: 8px 0 0; font-size: 14px; color: var(--dim); }
.sc-scale-arrow { color: var(--f2); padding-bottom: 30px; }
.sc-scale-arrow svg { width: 40px; height: 16px; }
.sc-scale-cell.kept { justify-self: end; text-align: right; }

/* 09: two anchors before the calculator -- what Kongen costs, and what comes back */
.sc-anchor { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 34px; }
.sc-anchor-cell { padding: 26px 28px; border-radius: 20px; border: 1px solid var(--hair-2); background: rgba(14, 15, 24, .62); }
.sc-anchor-cell.back { border-color: rgba(184, 168, 255, .38); background: linear-gradient(160deg, rgba(184, 168, 255, .10), rgba(14, 15, 24, .62) 60%); }
.sc-anchor-num { margin: 0; font: 600 clamp(2.5rem, 1.5rem + 3vw, 4.2rem)/.95 var(--sans); letter-spacing: -.03em;
  font-variant-numeric: lining-nums tabular-nums; color: var(--text); }
.sc-anchor-cap { margin: 10px 0 6px; font: 600 16px/1.35 var(--sans); color: var(--text); }
.sc-anchor-sub { margin: 0; font-size: 14px; line-height: 1.55; color: var(--dim); }

/* 04: the agent's shape. Roles keep one colour across all four diagrams. */
.ag-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ag-card { padding: 18px 18px 20px; border-radius: 18px; border: 1px solid var(--hair); background: rgba(14, 15, 24, .6);
  transition: border-color .3s, transform .45s var(--ease), background .3s; }
.ag-card:hover { border-color: var(--hair-3); background: rgba(18, 19, 30, .78); transform: translateY(-2px); }
.ag-svg { width: 100%; height: auto; margin-bottom: 12px; overflow: visible; }
.ag-svg text { font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; fill: var(--dim); text-anchor: middle; }
.ag-edge { fill: none; stroke: rgba(214, 220, 255, .22); stroke-width: 1.2; }
.ag-flow { fill: none; stroke: var(--f1); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1.5 13; opacity: .9;
  animation: ag-flow 1.8s linear infinite; }
.ag-card:hover .ag-flow { animation-duration: .9s; }
@keyframes ag-flow { to { stroke-dashoffset: -29; } }
.ag-node circle { fill: rgba(159, 242, 255, .13); stroke: var(--f1); stroke-width: 1.4; animation: ag-breathe 3.2s ease-in-out infinite; }
.ag-node.plan circle { fill: rgba(184, 168, 255, .15); stroke: var(--f2); }
.ag-node.check circle { fill: rgba(255, 224, 166, .14); stroke: var(--f4); }
.ag-box rect { fill: rgba(214, 220, 255, .05); stroke: rgba(214, 220, 255, .45); stroke-width: 1.2; }
.ag-box.answer rect { fill: rgba(169, 255, 217, .16); stroke: var(--f5); }
.ag-box.tool rect { fill: rgba(169, 255, 217, .10); stroke: var(--f5); }
@keyframes ag-breathe { 50% { fill-opacity: .55; } }
.ag-name { margin: 0 0 6px; font-size: 1.3rem; line-height: 1.15; }
.ag-regime { margin: 0 0 4px; font: 500 13px/1.4 var(--mono); color: var(--f1); }
.ag-meta { margin: 0; font: 400 13px/1.45 var(--mono); color: var(--dim); }
.ag-meta span { white-space: nowrap; }
.ag-foot { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 40px); margin-top: 22px; align-items: start; }
.ag-gate-title { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; font: 600 17px/1.3 var(--sans); color: var(--text); }
.ag-gate-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--f4); box-shadow: 0 0 12px var(--f4); flex: none; }
.ag-gate-body { margin: 0; color: var(--text-2); font-size: 16px; line-height: 1.62; }
.ag-foot .kg-code { border: 1px solid var(--hair-2); border-radius: 18px;
  background: linear-gradient(180deg, rgba(18, 19, 31, .92), rgba(10, 10, 16, .92)); padding: 24px 26px; }

/* 06: time first. The decision is a call in front of every step, so the time a
   model takes to decide is paid once per step, every step. The panel is a
   what-if -- the visitor sets their model's decision time -- against Kongen's
   p50 as published. No money delta: at current list prices a small-model
   decision costs less than 1 KT, so the only money claim made here is the one
   that holds on any basis, the flat fee. */
.tm { padding: 26px 28px 22px; border-radius: 22px; border: 1px solid rgba(184, 168, 255, .34);
  background: radial-gradient(120% 140% at 0% 0%, rgba(159, 242, 255, .09), rgba(14, 15, 24, .7) 55%); }
.tm-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 20px; }
.tm-title { margin: 0; font: 500 11.5px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.tm-who { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--hair-2); background: rgba(5, 5, 8, .5); }
.tm-who-btn { padding: 8px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--dim); cursor: pointer;
  font: 500 13px/1 var(--sans); transition: background .25s, color .25s; }
.tm-who-btn:hover { color: var(--text); }
.tm-who-btn[aria-checked="true"] { background: rgba(214, 220, 255, .12); color: var(--text); }
.tm-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 36px; }
.tm-ctl label { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 14px; margin-bottom: 10px; color: var(--text-2); font-size: 15.5px; }
.tm-val { font: 600 clamp(1.3rem, 1rem + .9vw, 1.7rem)/1 var(--sans); letter-spacing: -.01em; color: var(--text); font-variant-numeric: tabular-nums; }
.tm-out { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 36px; align-items: start; margin-top: 26px;
  padding-top: 24px; border-top: 1px solid var(--hair); }
.tm-big.money.more .tm-num { background: none; color: var(--text-2); -webkit-text-fill-color: currentColor; }
.tm-num { margin: 0; font: 600 clamp(3rem, 1.6rem + 5vw, 5.6rem)/.92 var(--sans); letter-spacing: -.035em; color: var(--text);
  font-variant-numeric: lining-nums tabular-nums; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .tm-num { background: var(--film); background-size: 160% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.tm-cap { margin: 12px 0 0; font: 600 17px/1.35 var(--sans); color: var(--text); }
/* the headline is a multiple with its unit set small beside it; the absolute figure is the line under it */
.tm-num .tm-unit { font-size: .42em; letter-spacing: -.01em; }
.tm-sub { margin: 12px 0 0; font: 500 17px/1.4 var(--sans); color: var(--text-2); }
.tm-sub strong { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.tm-sub strong.sc-pulse, .gain-x.sc-pulse { animation: sc-pulse .6s var(--ease); display: inline-block; }
.gain-x { background: var(--film); background-size: 160% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
/* the working under each figure: what sets it, so a control that leaves it still reads as meant */
.tm-work { margin: 8px 0 0; font: 500 12.5px/1.45 var(--mono); color: var(--dim); font-variant-numeric: tabular-nums; }
.tm-side { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 28px; margin: 22px 0 0; }
.tm-side div { display: flex; flex-direction: column; gap: 6px; padding: 12px 0 0; border-top: 1px solid var(--hair); }
.tm-side dt { color: var(--dim); font-size: 14px; }
.tm-side dd { margin: 0; font: 600 17px/1.3 var(--sans); color: var(--text); font-variant-numeric: tabular-nums; }
.tm .kg-note { margin-top: 16px; }
.race-cost { font: 500 13px/1 var(--mono); color: var(--dim); font-variant-numeric: tabular-nums; }
.race-clock { margin-left: auto; font: 600 15px/1 var(--sans); color: var(--text); font-variant-numeric: tabular-nums; min-width: 4.2em; text-align: right; }
.race-delta { margin: 14px 0 0; padding: 12px 16px; border-radius: 12px; background: rgba(159, 242, 255, .06); border: 1px solid rgba(159, 242, 255, .22);
  color: var(--text-2); font-size: 15.5px; }
.race-delta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.race-delta strong { font: 600 clamp(1.45rem, 1.05rem + 1.3vw, 2.05rem)/1.1 var(--sans); letter-spacing: -.02em;
  background: var(--film); background-size: 160% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.race-basis { font: 500 12.5px/1.45 var(--mono); color: var(--dim); }

/* 06: the same step decided twice. A Gantt of one step, two ways: the request,
   then the deciding, then the step itself. The step is the same length in both
   lanes; what differs is when it can start. Timing is illustrative and says so. */
.race { padding: 24px 26px 22px; border-radius: 20px; border: 1px solid var(--hair-2);
  background: linear-gradient(180deg, rgba(18, 19, 31, .92), rgba(10, 10, 16, .92)); box-shadow: 0 40px 100px -50px rgba(0, 0, 0, .95); }
.race-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; margin-bottom: 14px; }
.race-title { margin: 0; font: 500 11.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.race-prompt { margin: 0 0 6px; font: 400 13.5px/1.65 var(--mono); color: var(--text-2); }
.race-prompt .c { color: var(--faint); }
.race-lane { padding: 18px 0 16px; border-top: 1px solid var(--hair); }
.race-lane + .race-lane { margin-top: 2px; }
.race-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 12px; }
.race-name { margin: 0; font: 600 16px/1.2 var(--sans); color: var(--text); }
.race-state { padding: 6px 10px 5px; border-radius: 999px; border: 1px solid var(--hair-2); white-space: nowrap;
  font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); transition: color .2s, border-color .2s; }
.race-state.live { color: var(--text); border-color: var(--hair-3); }
.race-track { position: relative; height: 12px; border-radius: 7px; background: rgba(214, 220, 255, .06); }
.race-track .seg { position: absolute; top: 0; bottom: 0; border-radius: 7px; }
.seg.req, .sw.req { background: rgba(214, 220, 255, .30); }
.seg.gen, .sw.gen { background: var(--f3); }
.seg.calc, .sw.calc { background: var(--f1); box-shadow: 0 0 12px rgba(159, 242, 255, .7); }
.seg.step, .sw.step { background: var(--film); }
.race-playhead { position: absolute; top: -6px; bottom: -6px; left: 0; width: 2px; border-radius: 2px; background: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, .9); opacity: 0; transition: opacity .2s; }
.race.playing .race-playhead { opacity: 1; }
.race-out { margin: 12px 0 0; min-height: 1.7em; white-space: pre-wrap; word-break: break-word;
  font: 400 13.5px/1.7 var(--mono); color: var(--text-2); }
.race-out.flash { animation: sc-flash 1s var(--ease); }
.race-caret { display: inline-block; width: .55em; height: 1.05em; margin-left: 1px; vertical-align: -.16em; background: var(--f3);
  animation: race-blink .9s steps(2, jump-none) infinite; }
@keyframes race-blink { 50% { opacity: 0; } }
.race-runs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 12px 0 0;
  font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.race-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.race-chip { padding: 5px 9px 4px; border-radius: 999px; border: 1px solid var(--hair-2);
  font: 500 12px/1 var(--mono); letter-spacing: .02em; text-transform: none; color: var(--text-2); }
.race-chip.diff { border-color: rgba(255, 180, 225, .55); color: var(--f3); }
.race-verdict { margin-left: auto; font: 500 12px/1.3 var(--mono); letter-spacing: .02em; text-transform: none; }
.race-verdict.same { color: var(--ok); }
.race-verdict.diff { color: var(--f3); }
.race-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--hair);
  font: 500 11px/1.3 var(--mono); letter-spacing: .06em; color: var(--dim); }
.race-legend span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.race-legend .sw { display: inline-block; width: 16px; height: 8px; border-radius: 4px; }
.race-note { margin-top: 12px; }

/* the three gains the race shows, said plainly */
.gain { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gain-cell { padding: 20px 22px 22px; border-radius: 18px; border: 1px solid var(--hair); background: rgba(14, 15, 24, .6); }
.gain-name { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font: 600 17px/1.3 var(--sans); color: var(--text); }
.gain-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.gain-dot.fast { background: var(--f1); box-shadow: 0 0 12px var(--f1); }
.gain-dot.same { background: var(--ok); box-shadow: 0 0 12px var(--ok); }
.gain-dot.cost { background: var(--f4); box-shadow: 0 0 12px var(--f4); }
.gain-body { margin: 0; color: var(--text-2); font-size: 15.5px; line-height: 1.6; }
.gain-body a { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(184, 168, 255, .6); }

/* conversion points: an action at the moment of intent, not only at the end */
.sc-try { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
  padding: 14px 28px 16px; border-top: 1px solid var(--hair); background: rgba(184, 168, 255, .06); }
.sc-try-text { margin: 0; color: var(--text-2); font-size: 15.5px; }
.sc-try-text strong { color: var(--text); font-weight: 600; }
.tm-cta { margin-top: 22px; }

/* bars grow in once, the first time their band is seen. Only bands that start
   below the fold are ever set back, so nothing in the first screen waits. The
   figures beside every bar are text and are never hidden. */
.sc-pre .kg-regime-num::after, .sc-pre .kg-step-cost::after, .sc-pre .kg-total-value::after { transform: scaleX(0); }
.sc-grow .kg-regime:nth-of-type(2) .kg-regime-num::after, .sc-grow .kg-step:nth-child(3) .kg-step-cost::after { transition-delay: 70ms; }
.sc-grow .kg-regime:nth-of-type(3) .kg-regime-num::after, .sc-grow .kg-step:nth-child(4) .kg-step-cost::after { transition-delay: 140ms; }
.sc-grow .kg-regime:nth-of-type(4) .kg-regime-num::after, .sc-grow .kg-step:nth-child(5) .kg-step-cost::after { transition-delay: 210ms; }
.sc-grow .kg-regime:nth-of-type(5) .kg-regime-num::after, .sc-grow .kg-step:nth-child(6) .kg-step-cost::after { transition-delay: 280ms; }
.sc-grow .kg-step:nth-child(7) .kg-step-cost::after { transition-delay: 350ms; }
.sc-grow .kg-total-value::after { transition-delay: 460ms; }

/* the closing panel: one spark wakes the garden */
.kg-path-section { position: relative; z-index: 1; padding: 0 var(--gutter) clamp(84px, 10vw, 140px); }
.kg-panel.kg-path {
  position: relative; isolation: isolate; overflow: hidden; max-width: 1240px; margin: 0 auto;
  display: flex; align-items: center; min-height: clamp(470px, 46vw, 620px);
  padding: clamp(32px, 6vw, 86px); border-radius: 32px; border: 1px solid var(--hair-2); background: #06060a;
}
.sc-path-veil {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(5, 5, 8, .94) 0%, rgba(5, 5, 8, .80) 40%, rgba(5, 5, 8, .12) 72%, rgba(5, 5, 8, 0) 100%);
}
.kg-path .kg-focus { max-width: 560px; }
.kg-path .kg-focus > p:not(.kg-eyebrow) { margin: 0; color: var(--text-2); font-size: 18px; line-height: 1.62; }
.kg-produce { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.kg-produce span {
  padding: 9px 13px 8px; border-radius: 999px; border: 1px solid var(--hair-3); background: rgba(5, 5, 8, .55);
  font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text);
}

/* the footer */
footer.kg-night {
  padding: clamp(64px, 8vw, 110px) var(--gutter) calc(48px + env(safe-area-inset-bottom, 0px));
  text-align: center; border-top: 1px solid var(--hair);
  background: radial-gradient(70% 60% at 50% 0%, rgba(184, 168, 255, .07), rgba(184, 168, 255, 0) 70%), var(--velvet);
}
footer .container { max-width: 1000px; margin: 0 auto; }
.footer-quote {
  max-width: 34ch; margin: 0 auto 44px; color: var(--text-2); text-wrap: balance;
  font: italic 500 clamp(1.4rem, 1rem + 1.4vw, 2.1rem)/1.32 var(--serif);
  font-variation-settings: var(--serif-set);
}
.kg-footer-mark { width: 48px; height: 48px; margin: 0 auto 16px; }
.footer-word { margin: 0 0 26px; padding-left: .34em; font: 500 13px/1 var(--mono); letter-spacing: .34em; color: var(--text); }
.footer-word strong { font-weight: 500; }
.footer-nav { max-width: 80ch; margin: 0 auto; color: var(--faint); font-size: 15px; line-height: 1.95; }
.footer-nav a { color: var(--text-2); text-decoration: none; }
.footer-nav a:hover { color: var(--text); text-decoration: underline; text-decoration-color: var(--f2); text-underline-offset: 3px; }
.footer-small { margin-top: 12px; font-size: 13.5px; }
.footer-copy { margin: 20px 0 0; font: 500 12px/1 var(--mono); letter-spacing: .08em; color: var(--faint); }

/* ---- narrow ----------------------------------------------------------------- */
@media (max-width: 1100px) {
  .ag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .nav-links { display: none; }
  .hamburger { display: block; }
  .sc-bar .bar-cta { display: inline-flex; margin-left: auto; }
  .kg-hero { padding-top: calc(var(--bar-h) + env(safe-area-inset-top, 0px) + 24px); padding-bottom: 56px; }
  .kg-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .kg-stage { width: min(100%, 400px); }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .sc-bar .container { gap: 12px; }
  .sc-bar .bar-cta { padding: 9px 15px; font-size: 13.5px; }
  .kg-hero-reassure { font-size: 10.5px; letter-spacing: .08em; }
  .kg-hero-panel { padding: 26px 22px 28px; border-radius: 22px; }
  .kg-hero-panel::before { inset: 9px; }
  .kg-kron-badge-link { top: 18px; right: 18px; width: 40px; height: 40px; }
  .sc-kron { width: 28px; height: 28px; }
  .kg-lead { font-size: 17px; }
  .kg-example { grid-template-columns: minmax(0, 1fr); }
  .kg-example .kg-code + .kg-code { border-left: 0; border-top: 1px solid var(--hair); }
  .kg-code { padding: 20px 18px; font-size: 12.5px; }
  .kg-example-note { padding: 13px 18px; }
  .sc-try { padding: 14px 18px 16px; }
  .kg-regime-head { display: none; }
  .kg-regime {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name cost" "what tier" "num num";
    gap: 6px 14px; padding: 16px 18px;
  }
  .kg-regime-head + .kg-regime { border-top: 0; }
  .kg-regime-name { grid-area: name; }
  .kg-regime-what { grid-area: what; font-size: 14.5px; color: var(--dim); }
  .kg-regime-num { grid-area: num; margin-top: 6px; }
  .kg-regime-tier { grid-area: tier; justify-self: end; }
  .kg-regime-cost { grid-area: cost; justify-self: end; }
  .kg-fields { grid-template-columns: minmax(0, 1fr); }
  .kg-lrow { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 13px 16px; font-size: 14.5px; }
  .kg-step-cost { font-size: 13px; }
  .kg-step-tier { font-size: 10.5px; }
  .kg-dev { grid-template-columns: minmax(0, 1fr); }
  .kg-dev .kg-code { padding: 20px 18px; }
  .kg-proof { grid-template-columns: minmax(0, 1fr); }
  .kg-proof > div, .kg-proof > div + div { padding: 26px 0; border-left: 0; }
  .kg-proof > div + div { border-top: 1px solid var(--hair); }
  .kg-story { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .kg-produce-list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .kg-readout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sc-scale { padding: 22px 20px; }
  .sc-scale-row { grid-template-columns: auto auto; gap: 18px 20px; }
  .sc-scale-arrow { display: none; }
  .sc-scale-cell.kept { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .sc-anchor { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sc-anchor-cell { padding: 22px 20px; }
  .ag-grid { grid-template-columns: minmax(0, 1fr); }
  .ag-foot { grid-template-columns: minmax(0, 1fr); }
  .ag-foot .kg-code { padding: 20px 18px; }
  .race { padding: 20px 18px 18px; }
  /* name on its own line, then the clock, the cost and the state: four items
     do not fit one row at 320px */
  .race-name { flex-basis: 100%; }
  .race-clock { margin-left: 0; min-width: 0; text-align: left; }
  .race-state { margin-left: auto; }
  .tm { padding: 22px 20px 20px; }
  .tm-controls, .tm-out, .tm-side { grid-template-columns: minmax(0, 1fr); }
  .tm-who { width: 100%; } .tm-who-btn { flex: 1; }
  .race-prompt { font-size: 12.5px; }
  .race-out { font-size: 12.5px; }
  .race-verdict { margin-left: 0; flex-basis: 100%; }
  .gain { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .kg-panel.kg-path { align-items: flex-start; min-height: 0; padding: 30px 22px 250px; border-radius: 24px; }
  .sc-path-veil { background: linear-gradient(180deg, rgba(5, 5, 8, .95) 0%, rgba(5, 5, 8, .84) 52%, rgba(5, 5, 8, .1) 82%, rgba(5, 5, 8, 0) 100%); }
  .kg-worlds-panel { width: 320px; grid-template-columns: 1fr; }
}

/* Below ~380px the wordmark and the bar's action cannot both fit (measured: the
   wordmark needs 139px, the gap at 360px is 152px and at 320px only 112px), so
   the mark stands alone and the action keeps its room. */
@media (max-width: 379px) {
  .logo { font-size: 0; gap: 0; }
  .logo .kg-mark { width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   THE PAGE GROUND (sc-theme.js 7b) -- a culture behind the first block of any
   page without a hero culture of its own. Behind the content (z-index -1), so
   the page's body steps aside for it (.sc-has-ground) and the velvet is <html>'s.
   ========================================================================== */
.sc-ground { position: absolute; left: 0; right: 0; top: 0; height: min(100vh, 860px); z-index: -1; pointer-events: none; overflow: hidden; }
.sc-ground .sc-culture { position: absolute; inset: 0; width: 100%; height: 100%; }
.sc-ground-veil { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5, 5, 8, .55) 0%, rgba(5, 5, 8, .50) 35%, rgba(5, 5, 8, .80) 70%, #050508 100%),
              radial-gradient(70% 60% at 50% 30%, rgba(5, 5, 8, .30), rgba(5, 5, 8, 0) 70%); }
body.sc-has-ground { background: transparent; }
@media (max-width: 760px) { .sc-ground { height: min(92vh, 720px); } }

/* ==========================================================================
   ONE HERO EDGE (#658, Fiz: "the hero position changes ... the vertical margins
   are not consistent"). Every page's hero starts the same distance below the
   bar: its first block -- a panel, or its first line where there is none -- at
   --hero-gap. 78px on a 900px-tall window, which is where the home page's panel
   sat, scaling with the window's height; 24px on a phone, the home page's own
   phone rule. Heroes start at the top rather than centring in the screen, so a
   short hero and a tall one begin at the same place.
   ========================================================================== */
:root { --hero-gap: clamp(36px, 8.7vh, 96px); }
@media (max-width: 980px) { :root { --hero-gap: 24px; } }
.kg-hero { padding-top: calc(var(--bar-h) + env(safe-area-inset-top, 0px) + var(--hero-gap)); align-items: start; }

/* ---- the world pages' organisms, drawn as the dial draws them (#658) --------
   assets/sc-theme.js 7c puts a canvas where the glyph card's SVG and the worlds
   index marks were. The card's canvas takes the SVG's box; the index mark keeps
   its disc, and draws edge to edge (no padding) so the bitmap is not squeezed. */
.kg-glyph-card > canvas.kg-glyph-live { width: 100%; max-width: 300px; aspect-ratio: 1 / 1; height: auto; }
canvas.kg-world-mark-live { padding: 0; }

/* ---- the frontier-model picker (#710): the home dial and the pricing calculator ----
   The same pill as band 02's decider toggle, under a class of its own, because band
   02's script binds every .tm-who-btn on the page. */
.sc-pick-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 18px; }
.sc-pick-label { font: 500 13px/1.35 var(--sans); color: var(--dim); }
.sc-pick { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--hair-2); background: rgba(5, 5, 8, .5); }
.sc-pick-btn { padding: 8px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--dim); cursor: pointer; font: 500 13px/1 var(--sans); white-space: nowrap; transition: background .25s, color .25s; }
.sc-pick-btn:hover { color: var(--text); }
.sc-pick-btn[aria-checked="true"] { background: rgba(214, 220, 255, .12); color: var(--text); }
.sc-pick-price::before { content: "\00B7\00A0"; }
/* Narrow: three equal columns, the price under the name. On one line the three need
   about 332px, so a 360px phone would wrap them into two rows inside the pill. */
@media (max-width: 520px) {
  .sc-pick { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; border-radius: 16px; }
  .sc-pick-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 4px; border-radius: 13px; white-space: normal; }
  .sc-pick-price { font-size: 12px; }
  .sc-pick-price::before { content: none; }
}