/* ==========================================================================
   SYSTEMS PAGE: states, anatomy, tokens, theming, handoff, adoption.
   Each visual is a design-tool window, rebuilt 1:1 from the Figma page
   "Site · Systems" (frames S1 to S7): a dot-grid canvas on the left and a
   white inspector on the right.
   ========================================================================== */
.chap { color: var(--ink-3); }

/* ---------- The window, shared by every visual ---------- */
.win {
  --side: 360px;
  display: grid; grid-template-columns: minmax(0, 1fr) var(--side);
  border-radius: var(--r-l);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-2);
  overflow: hidden;
}
.win__canvas {
  position: relative;
  background-color: #F1F1EE;
  background-image: radial-gradient(rgba(28, 28, 31, 0.1) 0.9px, transparent 1.2px);
  background-size: 16px 16px;
  background-position: 8px 8px;
}
.win__side { display: flex; flex-direction: column; min-width: 0; background: var(--surface); box-shadow: inset 1px 0 0 var(--line-2); }
.wtabs { display: flex; align-items: center; gap: 20px; flex: none; height: 48px; padding: 0 24px; box-shadow: inset 0 -1px 0 var(--line-2); font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-3); }
.wtabs .is-on { font-weight: 600; color: var(--ink); }
.wtabs .t-mono { margin-left: auto; font-size: 11px; font-weight: 400; }
.whead { display: flex; gap: 10px; align-items: flex-start; flex: none; padding: 19px 24px 21px; box-shadow: inset 0 -1px 0 var(--line-2); }
.whead__icon { flex: none; width: 14px; height: 14px; margin-top: 5px; color: var(--component); }
.whead__name { font-size: 16px; line-height: 24px; font-weight: 600; }
.whead:not(.whead--tok) .whead__name { color: var(--component); }
.whead__name.t-mono { font-size: 15px; font-weight: 500; }
.whead__sub { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.wsec { padding: 19px 24px 20px; }
.wsec + .wsec { box-shadow: inset 0 1px 0 var(--line-2); }
.wsec__h { display: flex; justify-content: space-between; align-items: center; min-height: 16px; margin-bottom: 12px; font-size: 12px; line-height: 16px; font-weight: 600; }
.wsec__v { font-weight: 400; color: var(--ink-3); }
.wchip { padding: 4px 8px; border-radius: 6px; background: #F1F1EE; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink); }
.flabel { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; }
.flabel svg { flex: none; width: 10px; height: 10px; }
.flabel--frame span { font-family: var(--font-mono); color: var(--ink-3); margin-right: 2px; }
.win__canvas > .flabel { position: absolute; left: 32px; top: 28px; z-index: 2; }
/* Components, instances and selections wear Figma's component purple; plain frames stay ink. */
.flabel:not(.flabel--frame) { color: var(--component); }
.wbadge { padding: 4px 8px; border-radius: 6px; background: var(--component); color: #FFFFFF; font-size: 11px; line-height: 14px; font-weight: 500; white-space: nowrap; }
.hdl { position: absolute; width: 8px; height: 8px; border-radius: 1px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--component); }
.hdl--tl { left: -4px; top: -4px; } .hdl--tr { right: -4px; top: -4px; }
.hdl--bl { left: -4px; bottom: -4px; } .hdl--br { right: -4px; bottom: -4px; }

/* ==========================================================================
   S1 · STATES: just a button
   ========================================================================== */
.sys-hero { padding-top: calc(var(--nav-h) + 96px); padding-bottom: 64px; }
.sys-hero__copy { display: grid; gap: 24px; max-width: 880px; }
.sys-hero__copy .t-lead { max-width: 620px; }
.sys-hero__title {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 104px);
  line-height: 1;
  font-weight: 600;
  font-stretch: 94%;
  letter-spacing: -0.045em;
}
.states { --side: 320px; margin-top: 64px; }
.states__stage { display: grid; place-items: center; min-height: 560px; padding: 32px; }
.states__stage > .states__one-wrap, .states__stage > .sheet { grid-area: 1 / 1; }
.states__one-wrap { position: relative; outline: 1.5px solid var(--component); transition: opacity 320ms var(--ease-out), scale 480ms var(--ease-out); }
.states__one-wrap > .flabel { position: absolute; left: 0; bottom: calc(100% + 8px); }
.states__one-wrap > .wbadge { position: absolute; left: 50%; top: calc(100% + 14px); translate: -50% 0; }
.states__one {
  display: block; height: 56px; padding: 0 32px;
  border-radius: var(--r-pill);
  background: var(--ink); color: #F5F5F2;
  font-size: 18px; line-height: 24px; font-weight: 500;
  transition: background-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}
@media (hover: hover) { .states__one:hover { background: var(--mark); color: var(--on-mark); } }
[data-states].is-open .states__one-wrap { opacity: 0; scale: 0.9; pointer-events: none; }

.wprops { flex: none; padding: 19px 24px 20px; }
.wrow { display: grid; grid-template-columns: 72px 32px minmax(0, 1fr); align-items: center; }
.wrow + .wrow { margin-top: 12px; }
.wrow__k { font-size: 12px; line-height: 32px; color: var(--ink-2); }
.wrow__n { font-size: 11px; color: var(--ink-3); opacity: 0; transition: opacity var(--t-base) var(--ease-out); }
.win__side.is-open .wrow__n { opacity: 1; }
.wfield { position: relative; display: block; height: 32px; border-radius: 8px; background: #F1F1EE; transition: box-shadow var(--t-base) var(--ease-out); }
.wfield select { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 32px; padding: 0 30px 0 10px; border: 0; border-radius: 8px; background: transparent; font: 500 12px/32px var(--font-sans); color: var(--ink); cursor: pointer; }
.wfield select:focus-visible { outline: 2px solid var(--component); outline-offset: 1px; }
.wfield svg { position: absolute; right: 12px; top: 13px; width: 10px; height: 6px; color: var(--ink-3); pointer-events: none; }
@media (hover: hover) { .wfield:hover { box-shadow: inset 0 0 0 1px var(--line); } }
.states__pv { flex: none; padding: 15px 24px 16px; box-shadow: inset 0 1px 0 var(--line-2); }
.states__pv .wsec__h { margin-bottom: 8px; }
.states__sum { flex: none; padding: 16px 24px 0; box-shadow: inset 0 1px 0 var(--line-2); font-size: 13px; line-height: 20px; color: var(--ink-3); }
.states__sum p + p { margin-top: 6px; }
.states__f { color: var(--ink-2); }
.states__total { margin-left: 4px; padding: 2px 6px; border-radius: 4px; background: var(--mark); color: var(--on-mark); font-weight: 500; }
.states__stage { position: relative; }
.states__back {
  position: absolute; right: 32px; top: 62px; z-index: 3;
  height: 32px; padding: 0 14px;
  border-radius: var(--r-pill);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  font-size: 12px; font-weight: 500;
  transition: background-color var(--t-base) var(--ease-out);
}
@media (hover: hover) { .states__back:hover { background: var(--mark); color: var(--on-mark); box-shadow: none; } }
/* The selection: purple outline and handles around the chosen variant */
.sheet__sel { position: absolute; z-index: 2; border-radius: 999px; outline: 1.5px solid var(--component); pointer-events: none; transition: left 220ms var(--ease-out), top 220ms var(--ease-out), width 220ms var(--ease-out), height 220ms var(--ease-out); }
.sheet__sel i { position: absolute; width: 6px; height: 6px; border-radius: 1px; background: #FFFFFF; box-shadow: inset 0 0 0 1.25px var(--component); }
.sheet__sel i:nth-child(1) { left: -3px; top: -3px; } .sheet__sel i:nth-child(2) { right: -3px; top: -3px; }
.sheet__sel i:nth-child(3) { left: -3px; bottom: -3px; } .sheet__sel i:nth-child(4) { right: -3px; bottom: -3px; }
.sheet:not(.is-in) .sheet__sel { opacity: 0; }
.sheet.is-in .sheet__sel { animation: fade-in 300ms var(--ease-out) 1000ms both; }
.sheet .mb { cursor: pointer; }
/* The preview: the selected variant, at real size, on its theme */
.pv { display: grid; place-items: center; height: 56px; border-radius: 10px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color var(--t-base) var(--ease-out); }
.pv--dark { background: #1F1F22; box-shadow: none; }
.pvb { display: inline-flex; align-items: center; justify-content: center; gap: 4px; border-radius: var(--r-pill); font-weight: 600; white-space: nowrap; transition: background-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), scale var(--t-base) var(--ease-out); }
.pvb--l { height: 40px; padding: 0 18px; font-size: 14px; }
.pvb--m { height: 32px; padding: 0 14px; font-size: 13px; }
.pvb--s { height: 24px; padding: 0 10px; font-size: 12px; }
.pvb i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.pvb.is-pressed { scale: 0.96; }
.pvb.is-disabled { opacity: 0.32; }
.pv--light .pvb--primary { background: #1C1C1F; color: #F5F5F2; }
.pv--light .pvb--primary.is-hover { background: #F2DC7A; color: #1C1C1F; }
.pv--light .pvb--primary.is-pressed { background: #E3C95A; color: #1C1C1F; }
.pv--light .pvb--secondary { background: #FFFFFF; color: #1C1C1F; box-shadow: inset 0 0 0 1px rgba(28, 28, 31, 0.2); }
.pv--light .pvb--secondary.is-hover { background: #F5F5F2; }
.pv--light .pvb--secondary.is-pressed { background: #E6E6E0; }
.pv--light .pvb--soft { background: #F8EDBF; color: #3B3208; }
.pv--light .pvb--soft.is-hover { background: #F2DC7A; }
.pv--light .pvb--soft.is-pressed { background: #E3C95A; }
.pv--light .pvb--ghost { color: #1C1C1F; }
.pv--light .pvb--ghost.is-hover { background: rgba(28, 28, 31, 0.07); }
.pv--light .pvb--ghost.is-pressed { background: rgba(28, 28, 31, 0.13); }
.pv--light .pvb.is-focus { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3.5px #1C1C1F; }
.pv--light .pvb--secondary.is-focus { box-shadow: inset 0 0 0 1px rgba(28, 28, 31, 0.2), 0 0 0 2px #FFFFFF, 0 0 0 3.5px #1C1C1F; }
.pv--dark .pvb--primary { background: #EDEDEA; color: #1F1F22; }
.pv--dark .pvb--primary.is-hover { background: #F2DC7A; color: #1C1C1F; }
.pv--dark .pvb--primary.is-pressed { background: #E3C95A; color: #1C1C1F; }
.pv--dark .pvb--secondary { background: #2E2E32; color: #EDEDEA; box-shadow: inset 0 0 0 1px rgba(237, 237, 234, 0.16); }
.pv--dark .pvb--secondary.is-hover { background: #36363B; }
.pv--dark .pvb--secondary.is-pressed { background: #3F3F45; }
.pv--dark .pvb--soft { background: rgba(242, 220, 122, 0.16); color: #F2DC7A; }
.pv--dark .pvb--soft.is-hover { background: rgba(242, 220, 122, 0.24); }
.pv--dark .pvb--soft.is-pressed { background: rgba(242, 220, 122, 0.32); }
.pv--dark .pvb--ghost { color: #EDEDEA; }
.pv--dark .pvb--ghost.is-hover { background: rgba(237, 237, 234, 0.08); }
.pv--dark .pvb--ghost.is-pressed { background: rgba(237, 237, 234, 0.15); }
.pv--dark .pvb.is-focus { box-shadow: 0 0 0 2px #1F1F22, 0 0 0 3.5px #F2DC7A; }
.pv--dark .pvb--secondary.is-focus { box-shadow: inset 0 0 0 1px rgba(237, 237, 234, 0.16), 0 0 0 2px #1F1F22, 0 0 0 3.5px #F2DC7A; }

.toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 56px; }
.toc a {
  display: inline-flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 16px;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: var(--fs-small); font-weight: 500;
  transition: background-color var(--t-base) var(--ease-out);
}
.toc .t-mono { color: var(--ink-3); }
@media (hover: hover) { .toc a:hover { background: var(--mark); color: var(--on-mark); } .toc a:hover .t-mono { color: inherit; } }

/* The component set: light and dark panels inside a dashed set outline */
.sheet { width: 100%; align-self: center; }
.sheet > .flabel { margin-bottom: 8px; }
.sheet__set { position: relative; display: grid; gap: 12px; padding: 12px; border-radius: 16px; outline: 1px dashed var(--component); outline-offset: -1px; }
.sheet__panel {
  display: grid;
  grid-template-columns: 76px repeat(18, minmax(0, 1fr));
  align-items: center;
  gap: 10px 4px;
  padding: 14px 16px 16px;
  border-radius: 12px;
}
.sheet__panel--light { background: #FFFFFF; color: #1C1C1F; box-shadow: inset 0 0 0 1px rgba(28, 28, 31, 0.06); }
.sheet__panel--dark { background: #1F1F22; color: #EDEDEA; }
.sheet__corner, .sheet__state { margin-bottom: 4px; font-size: 11px; line-height: 16px; }
.sheet__corner { font-weight: 600; opacity: 0.5; }
.sheet__state { grid-column: span 3; text-align: center; opacity: 0.56; }
.sheet__variant { font-size: 12px; line-height: 16px; font-weight: 500; opacity: 0.72; }
.sheet.is-in .sheet__state, .sheet.is-in .sheet__variant, .sheet.is-in .sheet__corner, .sheet.is-in > .flabel { animation: fade-in 600ms var(--ease-out) 500ms both; }
.sheet.is-out .sheet__state, .sheet.is-out .sheet__variant, .sheet.is-out .sheet__corner, .sheet.is-out > .flabel { opacity: 0; transition: opacity 200ms; }
@keyframes fade-in { from { opacity: 0; } }

.mb { position: relative; display: block; justify-self: center; border-radius: var(--r-pill); }
.mb--l { width: 100%; height: 22px; }
.mb--m { width: 84%; height: 18px; }
.mb--s { width: 66%; height: 14px; }
.mb::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 44%; height: 2px; border-radius: 1px;
  translate: -50% -50%;
  background: currentColor;
}
.mb.is-loading::before { width: 13px; height: 3px; background: radial-gradient(circle closest-side, currentColor 92%, transparent) 0 50% / 5px 3px repeat-x; }
.mb.is-disabled { opacity: 0.32; }
.mb.is-pressed { transform: scale(0.92); }
@media (hover: hover) { .sheet.is-in .mb:hover { outline: 1.5px solid currentColor; outline-offset: 3px; } }

.sheet__panel--light .mb--primary { background: #1C1C1F; color: #F5F5F2; }
.sheet__panel--light .mb--primary.is-hover { background: #F2DC7A; color: #1C1C1F; }
.sheet__panel--light .mb--primary.is-pressed { background: #E3C95A; color: #1C1C1F; }
.sheet__panel--light .mb--secondary { background: #FFFFFF; color: #1C1C1F; box-shadow: inset 0 0 0 1px rgba(28, 28, 31, 0.2); }
.sheet__panel--light .mb--secondary.is-hover { background: #F5F5F2; }
.sheet__panel--light .mb--secondary.is-pressed { background: #E6E6E0; }
.sheet__panel--light .mb--soft { background: #F8EDBF; color: #3B3208; }
.sheet__panel--light .mb--soft.is-hover { background: #F2DC7A; }
.sheet__panel--light .mb--soft.is-pressed { background: #E3C95A; }
.sheet__panel--light .mb--ghost { color: #1C1C1F; }
.sheet__panel--light .mb--ghost.is-hover { background: rgba(28, 28, 31, 0.07); }
.sheet__panel--light .mb--ghost.is-pressed { background: rgba(28, 28, 31, 0.13); }
.sheet__panel--light .mb.is-focus { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3.5px #1C1C1F; }
.sheet__panel--light .mb--secondary.is-focus { box-shadow: inset 0 0 0 1px rgba(28, 28, 31, 0.2), 0 0 0 2px #FFFFFF, 0 0 0 3.5px #1C1C1F; }

.sheet__panel--dark .mb--primary { background: #EDEDEA; color: #1F1F22; }
.sheet__panel--dark .mb--primary.is-hover { background: #F2DC7A; color: #1C1C1F; }
.sheet__panel--dark .mb--primary.is-pressed { background: #E3C95A; color: #1C1C1F; }
.sheet__panel--dark .mb--secondary { background: #2E2E32; color: #EDEDEA; box-shadow: inset 0 0 0 1px rgba(237, 237, 234, 0.16); }
.sheet__panel--dark .mb--secondary.is-hover { background: #36363B; }
.sheet__panel--dark .mb--secondary.is-pressed { background: #3F3F45; }
.sheet__panel--dark .mb--soft { background: rgba(242, 220, 122, 0.16); color: #F2DC7A; }
.sheet__panel--dark .mb--soft.is-hover { background: rgba(242, 220, 122, 0.24); }
.sheet__panel--dark .mb--soft.is-pressed { background: rgba(242, 220, 122, 0.32); }
.sheet__panel--dark .mb--ghost { color: #EDEDEA; }
.sheet__panel--dark .mb--ghost.is-hover { background: rgba(237, 237, 234, 0.08); }
.sheet__panel--dark .mb--ghost.is-pressed { background: rgba(237, 237, 234, 0.15); }
.sheet__panel--dark .mb.is-focus { box-shadow: 0 0 0 2px #1F1F22, 0 0 0 3.5px #F2DC7A; }
.sheet__panel--dark .mb--secondary.is-focus { box-shadow: inset 0 0 0 1px rgba(237, 237, 234, 0.16), 0 0 0 2px #1F1F22, 0 0 0 3.5px #F2DC7A; }

/* The set settles in while the buttons unfold out of the one you clicked */
.sheet__set { transition: opacity 560ms var(--ease-out), transform 800ms var(--ease-out); }
.sheet:not(.is-in) .sheet__set { opacity: 0; transform: translateY(12px) scale(0.985); }
.sheet.is-in .mb, .sheet.is-out .mb { will-change: transform, opacity; }
.sheet.is-in .mb { animation: fly-in 1000ms cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(var(--fd, 0ms) * 0.22 + 60ms); }
.sheet.is-out .mb { animation: fly-out 480ms cubic-bezier(0.55, 0, 0.45, 1) both; animation-delay: calc(var(--fd, 0ms) * 0.08); }
@keyframes fly-in {
  0% { transform: translate3d(var(--fx), var(--fy), 0) scale(0.4); opacity: 0; }
  30% { opacity: 1; }
}
@keyframes fly-out { to { transform: translate3d(var(--fx), var(--fy), 0) scale(0.4); opacity: 0; } }

/* ==========================================================================
   CHAPTERS
   ========================================================================== */
.chapter { padding-block: calc(var(--section) * 0.7); }

/* ---------- S2 · Anatomy ---------- */
.ana { --side: 400px; }
.ana__stage { display: grid; place-items: center; min-height: 480px; overflow: hidden; }
.ana__btn {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 16px;
  height: 96px; padding: 0 48px;
  border-radius: var(--r-pill);
  background: var(--inverse); color: var(--on-inverse);
  font-size: 32px; line-height: 48px; font-weight: 500;
  cursor: default;
}
.ana__btn svg { width: 32px; height: 32px; }
.ana__scale { position: absolute; right: 24px; bottom: 20px; font-size: 11px; color: var(--ink-3); }
.ana__marks { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.am { position: absolute; color: var(--ink-2); opacity: 0.6; transition: opacity var(--t-slow) var(--ease-out); }
.am--v { border-left: 1.25px solid; }
.am--v::before, .am--v::after { content: ""; position: absolute; left: -5.6px; width: 10px; border-top: 1.25px solid; }
.am--v::before { top: 0; } .am--v::after { bottom: 0; }
.am--h { border-top: 1.25px solid; }
.am--h::before, .am--h::after { content: ""; position: absolute; top: -5.6px; height: 10px; border-left: 1.25px solid; }
.am--h::before { left: 0; } .am--h::after { right: 0; }
.am--h[data-k="padding"] { color: var(--ink); }
.am--box { outline: 1.25px dashed; outline-offset: 0; border-radius: 4px; }
.am--r { border-top: 1.25px dashed; border-right: 1.25px dashed; border-top-right-radius: 100%; }
.am--dot::before { content: ""; position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--mark); box-shadow: 0 0 0 2px var(--ink); }
.am--ring { border-radius: var(--r-pill); outline: 1.25px dashed; }
.am--band {
  z-index: 1;
  border-radius: 999px 0 0 999px;
  background: repeating-linear-gradient(-45deg, #F2DC7A 0 1.25px, transparent 1.25px 7px), rgba(242, 220, 122, 0.18);
  opacity: 0.3;
}
.at {
  position: absolute; z-index: 3;
  translate: -50% -50%;
  padding: 0 6px; border-radius: 4px;
  background: var(--mark); color: var(--on-mark);
  font: 500 11px/18px var(--font-mono);
  white-space: nowrap;
  transition: opacity var(--t-slow) var(--ease-out);
}
[data-anatomy][data-active]:not([data-active=""]) .am:not(.is-on) { opacity: 0.3; }
[data-anatomy][data-active]:not([data-active=""]) .at:not(.is-on) { opacity: 0.45; }
.am.is-on { opacity: 1; }
.am--band.is-on { opacity: 1; }
[data-anatomy][data-active="focus"] .am--ring { outline-style: solid; }

.ana__list { display: grid; align-content: start; padding: 8px 12px; }
.ana__row {
  position: relative;
  display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 0; align-items: center;
  width: 100%; min-height: 42px; padding: 0 12px;
  border-radius: 8px;
  text-align: left;
  transition: background-color var(--t-base) var(--ease-out);
}
.ana__list li + li .ana__row::before { content: ""; position: absolute; left: 12px; right: 12px; top: 0; border-top: 1px solid var(--line-2); }
.ana__row.is-on { background: var(--mark-soft); }
.ana__row.is-on::before, .ana__row.is-on + * .ana__row::before, li:has(.ana__row.is-on) + li .ana__row::before { opacity: 0; }
.ana__part { font-size: 12px; line-height: 16px; color: var(--ink-2); }
.ana__row.is-on .ana__part { font-weight: 500; color: var(--ink); }
.ana__token { justify-self: start; padding: 4px 8px; border-radius: 6px; background: #F1F1EE; font: 500 12px/16px var(--font-mono); transition: background-color var(--t-base) var(--ease-out); }
.ana__row.is-on .ana__token { background: var(--mark); color: var(--on-mark); }
.ana__value { font-size: 11px; color: var(--ink-3); }

/* ---------- S3 · Tokens ---------- */
.gwin { --side: 320px; }
.gph { display: grid; align-items: center; min-height: 520px; padding: 60px 32px 32px; }
.gph__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.gph__lines path { fill: none; stroke: var(--ink); stroke-opacity: 0.14; stroke-width: 1; transition: stroke-opacity var(--t-base) var(--ease-out), stroke-width var(--t-base) var(--ease-out); }
.gph__lines circle { fill: #FFFFFF; stroke: var(--ink); stroke-opacity: 0.25; stroke-width: 1; transition: fill var(--t-base) var(--ease-out), stroke-opacity var(--t-base) var(--ease-out); }
.gph__lines g.is-on path { stroke-opacity: 1; stroke-width: 1.5; }
.gph__lines g.is-on circle { fill: var(--ink); stroke-opacity: 1; }
.gph__cols { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.gcol { width: 252px; padding-bottom: 4px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.gcol__h { display: flex; justify-content: space-between; padding: 14px 16px; margin-bottom: 4px; box-shadow: inset 0 -1px 0 var(--line-2); font-size: 12px; line-height: 16px; font-weight: 600; }
.gcol__h .t-mono { font-weight: 400; color: var(--ink-3); }
.gcol li { padding: 1px 4px; }
.tok {
  display: flex; align-items: center; gap: 10px;
  width: 100%; height: 30px; padding: 0 10px 0 12px;
  border-radius: 8px;
  transition: opacity var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out);
}
.tok i { flex: none; width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(28, 28, 31, 0.1); }
.tok code { font: 500 12px/16px var(--font-mono); }
.tok__v { margin-left: auto; font-size: 11px; color: var(--ink-3); }
.gph.has-focus .tok:not(.is-on) { opacity: 0.4; }
.tok.is-on { background: var(--mark-soft); }
.gsw { flex: none; width: 18px; height: 18px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(28, 28, 31, 0.1); }
.whead--tok { align-items: center; }
.whead--tok .gsw { margin-top: 0; }
.gchain { display: grid; gap: 20px; }
.gchain li { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; }
.gchain li .gsw { margin-top: 3px; }
.gchain li:not(:last-child)::after { content: ""; position: absolute; left: 9px; top: 28px; bottom: -16px; border-left: 1.25px solid rgba(28, 28, 31, 0.3); }
.gchain p.t-mono { font-size: 13px; line-height: 24px; font-weight: 500; }
.gchain p:not(.t-mono) { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.gside__foot { padding: 19px 24px 24px; box-shadow: inset 0 1px 0 var(--line-2); font-size: 13px; line-height: 20px; color: var(--ink-2); }
.gside__foot b { font-weight: 600; color: var(--ink); }

/* ---------- S4 · Theming ---------- */
.mixer { --side: 360px; }
.mixer__stage { display: grid; place-items: center; min-height: 560px; padding: 72px 32px 96px; }
.swatches { display: flex; gap: 12px; padding: 4px 0; }
.swatches button {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--sw);
  box-shadow: inset 0 0 0 1px rgba(28, 28, 31, 0.08);
  transition: box-shadow var(--t-base) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.swatches button:active { transform: scale(0.92); }
.swatches button[aria-checked="true"] { box-shadow: inset 0 0 0 1px rgba(28, 28, 31, 0.08), 0 0 0 2.5px var(--surface), 0 0 0 4px var(--ink); }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 2px; border-radius: 10px; background: #F1F1EE; }
.seg button {
  height: 32px; border-radius: 8px;
  font-size: 12px; font-weight: 500; color: var(--ink-3);
  transition: background-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.seg button[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(28, 28, 31, 0.1); }
.range {
  --fill: 50%;
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 20px;
  background: transparent; cursor: pointer;
}
.range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--ink) var(--fill), #E4E4E0 var(--fill)); }
.range::-moz-range-track { height: 4px; border-radius: 2px; background: #E4E4E0; }
.range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--ink); }
.range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px rgba(28, 28, 31, 0.12), 0 1px 3px rgba(28, 28, 31, 0.12); }
.range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--surface); border: 1px solid rgba(28, 28, 31, 0.12); }
.range:focus-visible { outline: none; }
.range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--ink); outline-offset: 2px; }
.range__ticks { display: flex; justify-content: space-between; margin-top: 6px; padding: 0 4px; font-size: 10px; line-height: 12px; color: var(--ink-3); }
.range__ticks span { width: 12px; text-align: center; }
.mixer__tokens { display: grid; gap: 4px; margin: 0; font-size: 11px; line-height: 20px; white-space: normal; }
.tk { display: flex; justify-content: space-between; gap: 12px; }
.tk span { color: var(--ink-3); }
.tk b { font-weight: 500; text-align: right; }
.tk--map b { background: var(--mark-soft); padding: 0 4px; border-radius: 4px; }
.mini { --m-brand: #F2DC7A; --m-on-brand: #1C1C1F; --m-r: 12px; --m-s: 16px; position: relative; width: min(100%, 400px); color: var(--ink); }
.mini * { transition: border-radius 320ms var(--ease-out), padding 320ms var(--ease-out), gap 320ms var(--ease-out), background-color 320ms var(--ease-out), color 320ms var(--ease-out); }
.mini__card { display: grid; gap: calc(var(--m-s) * 0.75); padding: var(--m-s); border-radius: calc(var(--m-r) + var(--m-s)); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2), 0 1px 2px rgba(28, 28, 31, 0.05), 0 12px 28px -12px rgba(28, 28, 31, 0.08); }
.mini__head { display: flex; align-items: center; gap: calc(var(--m-s) * 0.75); padding-bottom: calc(var(--m-s) * 0.25); }
.mini__avatar { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: min(var(--m-r), 20px); background: var(--m-brand); color: var(--m-on-brand); font-size: 13px; font-weight: 600; }
.mini__title b { display: block; font-size: 15px; line-height: 20px; font-weight: 600; }
.mini__title small { font-size: 13px; line-height: 16px; color: var(--ink-3); }
.mini__chip { margin-left: auto; padding: 2px 8px; border-radius: calc(var(--m-r) / 2); box-shadow: inset 0 0 0 1.5px var(--m-brand); font-size: 12px; line-height: 16px; font-weight: 600; }
.mini__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: calc(var(--m-s) * 0.75) var(--m-s); border-radius: var(--m-r); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 14px; line-height: 20px; }
.mini__toggle { position: relative; flex: none; width: 40px; height: 24px; border-radius: var(--r-pill); background: #E4E4E0; }
.mini__toggle::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24); transition: transform var(--t-slow) var(--ease-out); }
.mini__toggle[aria-checked="true"] { background: var(--m-brand); }
.mini__toggle[aria-checked="true"]::after { transform: translateX(16px); }
.mini__field > span { font-size: 13px; line-height: 16px; font-weight: 500; color: var(--ink-2); }
.mini__input { display: flex; align-items: center; height: 44px; margin-top: 8px; padding: 0 var(--m-s); border-radius: var(--m-r); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; }
.mini__actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: calc(var(--m-s) * 0.25); }
.mini__btn { height: 40px; padding: 0 var(--m-s); border-radius: var(--m-r); background: var(--m-brand); color: var(--m-on-brand); font-size: 14px; font-weight: 600; }
.mini__btn:active { transform: scale(0.97); }
.mini__btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.mini__toast { position: absolute; left: 50%; bottom: -64px; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: var(--m-r); background: var(--inverse); color: var(--on-inverse); font-size: 13px; line-height: 20px; white-space: nowrap; translate: -50% 0; opacity: 0; transform: translateY(8px); transition: opacity var(--t-base) var(--ease-out), transform var(--t-slow) var(--ease-out), border-radius 320ms var(--ease-out); }
.mini__toast i { width: 8px; height: 8px; border-radius: 50%; background: var(--m-brand); }
.mini__toast.is-on { opacity: 1; transform: none; }

/* ==========================================================================
   S5 · HANDOFF: the live card and its code
   ========================================================================== */
.handoff {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 560px;
  border-radius: var(--r-l);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-2);
  overflow: hidden;
}
.handoff__design { display: flex; flex-direction: column; min-width: 0; }
.handoff__code { display: flex; flex-direction: column; min-width: 0; background: var(--surface-2); box-shadow: inset 1px 0 0 var(--line-2); }
.handoff__bar {
  display: flex; align-items: center; gap: 12px;
  height: 48px; padding: 0 24px 0 16px;
  background: var(--surface);
  box-shadow: inset 0 -1px 0 var(--line-2), inset 1px 0 0 var(--line-2);
}
.handoff__file { margin-left: auto; font-size: 11px; color: var(--ink-3); }
.handoff__tabs { display: flex; gap: 4px; }
.handoff__tabs button {
  height: 32px; padding: 0 12px;
  border-radius: var(--r-pill);
  font-size: 13px; font-weight: 500; color: var(--ink-3);
  transition: background-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}
.handoff__tabs button[aria-selected="true"] { background: #F1F1EE; color: var(--ink); }
@media (hover: hover) { .handoff__tabs button:hover { color: var(--ink); } }

.handoff__canvas {
  flex: 1;
  display: grid; place-items: center;
  min-height: 520px; padding: 72px 24px 48px;
  overflow: hidden;
}
.pc {
  --w: 360px; --p: 24px; --gap: 16px; --r: 20px; --fs: 24px;
  position: relative;
  display: grid; gap: var(--gap);
  width: var(--w); max-width: 100%;
  padding: var(--p);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(28, 28, 31, 0.05), 0 0 0 1.5px var(--component);
}
.pc__top { display: flex; align-items: center; gap: var(--gap); }
.pc__top > div { min-width: 0; }
.pc__avatar { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--bg-2); }
.pc__name { font-family: var(--font-display); font-size: var(--fs); line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
.pc__role { font-size: 14px; line-height: 20px; color: var(--ink-3); }
.pc__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.pc__status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; line-height: 20px; color: var(--ink-2); white-space: nowrap; }
.pc__status i { width: 8px; height: 8px; border-radius: 50%; background: #2F7A55; }
.pc__cta {
  flex: none; height: 36px; padding: 0 16px;
  border-radius: var(--r-pill);
  background: var(--inverse); color: var(--on-inverse);
  font-size: 13px; font-weight: 600; white-space: nowrap;
  transition: background-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}
@media (hover: hover) { .pc__cta:hover { background: var(--mark); color: var(--on-mark); } }
.pc__resize {
  position: absolute; right: -6px; top: 50%; z-index: 3;
  width: 10px; height: 28px; margin-top: -14px;
  border-radius: 4px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--component);
  cursor: ew-resize;
  touch-action: none;
}

/* Redlines, measured from the card's real DOM */
.rl { position: absolute; inset: 0; pointer-events: none; }
.rl__band {
  position: absolute;
  background: repeating-linear-gradient(-45deg, #F2DC7A 0 1px, transparent 1px 7px), rgba(242, 220, 122, 0.16);
  opacity: 0.35;
  transition: opacity var(--t-base) var(--ease-out);
}
.rl__m { position: absolute; color: var(--ink-2); transition: opacity var(--t-base) var(--ease-out); }
.rl__m--w { border-top: 1.25px solid; }
.rl__m--w::before, .rl__m--w::after { content: ""; position: absolute; top: -5.6px; height: 10px; border-left: 1.25px solid; }
.rl__m--w::before { left: 0; } .rl__m--w::after { right: 0; }
.rl__m--r { border-top: 1.25px dashed; border-right: 1.25px dashed; border-top-right-radius: 100%; }
.rl__val, .rl__tag b {
  padding: 0 6px; border-radius: 4px;
  background: var(--mark); color: var(--on-mark);
  font: 500 11px/18px var(--font-mono);
  white-space: nowrap;
}
.rl__val { position: absolute; translate: -50% -50%; transition: opacity var(--t-base) var(--ease-out), scale var(--t-base) var(--ease-spring); }
.rl__val b { font-weight: 500; }
.rl__tag { position: absolute; display: flex; align-items: center; translate: calc(-100% - 18px) -50%; transition: opacity var(--t-base) var(--ease-out); }
.rl__tag::after { content: ""; position: absolute; left: calc(100% + 2px); top: 50%; width: 14px; border-top: 1px dashed var(--ink-3); }
.handoff[class*="is-focus-"] .rl__m, .handoff[class*="is-focus-"] .rl__val, .handoff[class*="is-focus-"] .rl__tag { opacity: 0.3; }
.is-focus-w .rl__m[data-k="w"], .is-focus-w .rl__val[data-k="w"],
.is-focus-r .rl__m[data-k="r"], .is-focus-r .rl__val[data-k="r"],
.is-focus-p .rl__tag[data-k="p"], .is-focus-gap .rl__tag[data-k="gap"] { opacity: 1 !important; }
.is-focus-w .rl__val[data-k="w"], .is-focus-r .rl__val[data-k="r"] { scale: 1.12; }
.is-focus-p .rl__band[data-k="p"], .is-focus-gap .rl__band[data-k="gap"] { opacity: 1; }
.is-focus-fs .pc__name { outline: 1.5px dashed var(--ink); outline-offset: 4px; border-radius: 2px; }

.codebox {
  flex: 1;
  margin: 0; padding: 28px 24px;
  font: 400 14px/26px var(--font-mono);
  color: var(--ink);
  white-space: pre;
  overflow-x: auto;
  tab-size: 2;
}
.c-sel { font-weight: 500; }
.c-prop, .c-str { color: var(--ink-2); }
.c-dim { color: var(--ink-3); }
.num {
  padding: 1px 4px; margin: 0 -1px;
  border-radius: 4px;
  background: var(--mark-soft); color: var(--ink);
  cursor: ew-resize;
  user-select: none; -webkit-user-select: none;
  touch-action: none;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.num:focus-visible, .num.is-drag { outline: none; background: var(--mark); color: var(--on-mark); }
@media (hover: hover) { .num:hover { background: var(--mark); } }
.is-scrubbing, .is-scrubbing * { cursor: ew-resize !important; }
.handoff__hint { padding: 18px 24px 20px; box-shadow: inset 0 1px 0 var(--line-2); font-size: 13px; line-height: 20px; color: var(--ink-3); }

/* ---------- S6 · Adoption ---------- */
.adopt { display: grid; }
.adopt > div { display: grid; grid-template-columns: minmax(0, 1fr) 640px; gap: 48px; padding: 40px 0; border-top: 1px solid var(--line); }
.adopt dt { font-family: var(--font-display); font-size: 40px; line-height: 44px; font-weight: 600; font-stretch: 94%; letter-spacing: -0.03em; }
.adopt dd { max-width: 520px; margin-top: 20px; font-size: 16px; line-height: 26px; color: var(--ink-2); }
.adopt dd b { display: block; margin-bottom: 4px; font-size: 18px; line-height: 28px; color: var(--ink); font-weight: 600; }
.adopt__pic { position: relative; height: 260px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line-2); overflow: hidden; }
.adopt__pic > * { position: absolute; left: 0; top: 0; width: 640px; height: 260px; }
.adopt__pic .flabel svg { width: 10px; height: 10px; }
.paper { background: var(--surface); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-2); }

/* Coverage: system parts vs one-offs on one screen */
.cov__sys { display: block; border-radius: 4px; background: rgba(28, 28, 31, 0.08); box-shadow: inset 0 0 0 1px rgba(28, 28, 31, 0.16); }
.cov__oneoff { position: relative; display: block; border-radius: 8px; background: repeating-linear-gradient(-45deg, #D9BF4E 0 1px, transparent 1px 6px), rgba(242, 220, 122, 0.22); box-shadow: inset 0 0 0 1px #D9BF4E; }
.cov__oneoff span { position: absolute; left: 8px; top: 8px; padding: 1px 5px; border-radius: 4px; background: var(--surface); font-size: 10px; line-height: 14px; color: var(--on-mark); }
.cov__screen { position: absolute; left: 32px; top: 24px; display: grid; grid-template-columns: 134px 130px; align-content: start; gap: 8px; width: 300px; height: 212px; padding: 12px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.cov__foot { grid-column: 1 / -1; display: flex; gap: 6px; margin-top: 4px; }
.cov__legend { position: absolute; left: 368px; top: 72px; display: grid; gap: 20px; }
.cov__legend li { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 12px; }
.cov__legend i { grid-row: span 2; width: 16px; height: 16px; margin-top: 2px; border-radius: 4px; }
.cov__legend b { font-size: 13px; line-height: 20px; font-weight: 500; }
.cov__legend span { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cov__formula { position: absolute; left: 368px; top: 212px; font-size: 11px; line-height: 16px; color: var(--ink-3); }

/* Detaches: three in one place make a variant */
.det__layers { position: absolute; left: 32px; top: 24px; width: 292px; height: 212px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.det__head { display: flex; justify-content: space-between; height: 39px; padding: 12px 14px 0; box-shadow: inset 0 -1px 0 var(--line-2); font-size: 12px; line-height: 16px; }
.det__head b { font-weight: 600; }
.det__head span { color: var(--ink-3); }
.det__layers ul { display: grid; gap: 4px; padding: 5px 6px; }
.det__layers li { display: flex; align-items: center; gap: 10px; height: 28px; padding: 0 6px 0 10px; border-radius: 6px; font-size: 12px; font-weight: 500; color: var(--ink-2); }
.det__layers li svg { flex: none; width: 10px; height: 10px; color: var(--component); }
.det__layers li:not(.is-det) { color: var(--component); }
.det__layers li.is-det { background: var(--mark-soft); color: var(--ink); }
.det__layers li.is-det svg { color: var(--ink-2); }
.det__layers li span { margin-left: auto; padding: 0 7px; border-radius: 6px; background: var(--surface); font-size: 11px; line-height: 18px; color: var(--on-mark); }
.det__arrow { position: absolute; left: 344px; top: 124px; width: 40px; height: 12px; color: var(--ink); }
.det__new { position: absolute; left: 396px; top: 64px; width: 220px; height: 132px; padding: 14px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.det__k { font-size: 10px; line-height: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.det__name { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; line-height: 20px; font-weight: 600; color: var(--component); }
.det__name svg { width: 10px; height: 10px; }
.det__btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; margin-top: 16px; padding: 0 8px 0 16px; border-radius: 18px; background: var(--ink); color: #F5F5F2; font-size: 13px; font-weight: 600; }
.det__btn i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 10px; background: var(--mark); color: var(--on-mark); font-size: 11px; font-style: normal; }

/* Requests: one queue and a changelog */
.req__q { position: absolute; left: 32px; top: 24px; width: 576px; border-collapse: separate; border-spacing: 0; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 13px; text-align: left; }
.req__q th { height: 39px; padding: 0 16px; box-shadow: inset 0 -1px 0 var(--line-2); font-size: 11px; font-weight: 400; color: var(--ink-3); }
.req__q td { height: 40px; padding: 0 16px; color: var(--ink-2); }
.req__q td:first-child { font-weight: 500; color: var(--ink); }
.req__q tr + tr td { box-shadow: inset 0 1px 0 var(--line-2); }
.req__q tr + tr td:first-child { box-shadow: inset 16px 0 0 var(--surface), inset 0 1px 0 var(--line-2); }
.req__q tr + tr td:last-child { box-shadow: inset -16px 0 0 var(--surface), inset 0 1px 0 var(--line-2); }
.req__q th:nth-child(1) { width: 284px; } .req__q th:nth-child(2) { width: 140px; }
.req__st { display: inline-block; padding: 0 7px; border-radius: 6px; background: #F1F1EE; font-size: 11px; line-height: 20px; font-weight: 500; color: var(--ink-2); }
.req__st.is-done { background: #D6EBE2; color: #123C30; }
.req__log { position: absolute; left: 32px; top: 196px; display: flex; align-items: center; gap: 12px; width: 576px; height: 44px; padding: 0 12px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 13px; color: var(--ink-2); }
.req__log .t-mono { padding: 0 7px; border-radius: 6px; background: var(--mark); color: var(--on-mark); font-size: 11px; line-height: 20px; font-weight: 500; }

/* ---------- S7 · Phrasebook marquee ---------- */
.phrasebook {
  margin-top: 120px;
  padding-block: 34px;
  border-block: 1px solid var(--line);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.pb__track { display: flex; width: max-content; }
.motion .pb__track { animation: marquee 72s linear infinite; }
.phrasebook:hover .pb__track { animation-play-state: paused; }
.pb__list { display: flex; flex: none; }
.pb__list li { display: flex; align-items: center; gap: 16px; padding-right: 17px; white-space: nowrap; }
.pb__say { font-family: var(--font-display); font-size: 32px; line-height: 40px; font-weight: 600; letter-spacing: -0.03em; }
.pb__means { display: flex; color: var(--ink-3); }
.pb__means svg { width: 20px; height: 10px; }
.pb__hear { height: 32px; padding: 0 14px; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font: 500 14px/32px var(--font-mono); }
.pb__dot { width: 6px; height: 6px; margin-left: 17px; border-radius: 50%; background: var(--mark); }
@keyframes marquee { to { transform: translateX(-50%); } }

.sys-next { padding-block: 96px 128px; text-align: center; }

/* ---------- Narrower screens: the inspector moves under the canvas ---------- */
@media (width < 1100px) {
  .win, .handoff { grid-template-columns: 1fr; }
  .win__side { box-shadow: inset 0 1px 0 var(--line-2); }
  .handoff__code { box-shadow: inset 0 1px 0 var(--line-2); }
  .states__back { margin-top: 20px; }
  .gside__foot { margin-top: 0; }
  .adopt > div { grid-template-columns: 1fr; gap: 24px; }
}
@media (width < 760px) {
  .states__stage { min-height: 420px; padding: 56px 12px 24px; }
  .sheet__panel { grid-template-columns: repeat(18, minmax(0, 1fr)); padding: 12px 8px; gap: 8px 2px; }
  .sheet__corner { grid-column: 1 / -1; }
  .sheet__variant { grid-column: 1 / -1; font-size: 11px; }
  .sheet__state { font-size: 8px; }
  .sheet__set { padding: 8px; gap: 8px; }
  .mb--l { height: 14px; } .mb--m { height: 12px; } .mb--s { height: 10px; }
  .mb::before { width: 50%; height: 1.5px; }
  .mb.is-loading::before { width: 9px; height: 2px; background-size: 3.5px 2px; }
  .sheet__panel--light .mb.is-focus, .sheet__panel--light .mb--secondary.is-focus { box-shadow: 0 0 0 1px #FFFFFF, 0 0 0 2px #1C1C1F; }
  .sheet__panel--dark .mb.is-focus, .sheet__panel--dark .mb--secondary.is-focus { box-shadow: 0 0 0 1px #1F1F22, 0 0 0 2px #F2DC7A; }
  .ana__stage { min-height: 320px; }
  .ana__btn { height: 64px; padding: 0 32px; gap: 10px; font-size: 22px; line-height: 32px; }
  .ana__btn svg { width: 22px; height: 22px; }
  .ana__row { grid-template-columns: 1fr auto; padding-block: 8px; }
  .ana__token { grid-column: 1 / -1; grid-row: 2; margin-top: 4px; }
  .gph { padding: 60px 16px 24px; }
  .gph__cols { flex-direction: column; align-items: stretch; gap: 16px; }
  .gcol { width: 100%; }
  .gph__lines { display: none; }
  .mixer__stage { padding: 64px 16px 88px; min-height: 0; }
  .handoff__canvas { min-height: 400px; }
  .codebox { font-size: 13px; line-height: 24px; padding: 20px 16px; }
  .rl__m--r, .rl__val[data-k="r"] { display: none; }
  .adopt dt { font-size: 32px; line-height: 36px; }
  .adopt__pic { height: auto; aspect-ratio: 640 / 260; }
  .adopt__pic > * { transform-origin: 0 0; scale: var(--pic-scale, 0.53); }
  .pb__say { font-size: 26px; line-height: 34px; }
  .phrasebook { margin-top: 80px; }
}