/* ==========================================================================
   Signal components  v0.2.0
   --------------------------------------------------------------------------
   Requires tokens.css (load it first) and class="sg" on <html>.
   Every class is prefixed sg-. Only tokens.css variables are used.

   State classes set by signal.js (never style these for decoration):
     html.sg-still    motion is off (switch or prefers-reduced-motion)
     html.sg-rv       scroll reveals are armed (set before first paint)
     html.sg-booting  the boot overlay is up
     .sg-in           element has been revealed
     .sg-lit / .sg-ok frame border drawn / frame finished
     .sg-typed        a prompt finished typing
     .sg-hit          the key choice the user just pressed
     .sg-open         the sheet that shows its abstract
     .sg-drag         a scroller thumb being dragged
   Hidden "before reveal" states only apply under html.sg-rv, so a page
   without JS (or with motion off) always shows final content.
   ========================================================================== */

/* ===== 0. base ============================================================ */
html.sg { -webkit-text-size-adjust: 100%; color-scheme: dark; }
.sg *, .sg *::before, .sg *::after { box-sizing: border-box; }
.sg body {
  margin: 0; background: var(--sg-bg); color: var(--sg-text);
  font: var(--sg-fw-regular) var(--sg-fs-15)/var(--sg-lh-body) var(--sg-sans);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
.sg :where(button, input, select, textarea) { font: inherit; color: inherit; }
.sg :where(button) { cursor: pointer; }
.sg :where(a) { color: inherit; }
.sg :where(pre, figure) { margin: 0; }
.sg :where(h1, h2, h3, h4) { margin: 0; font-weight: var(--sg-fw-medium); }
.sg :focus-visible { outline: 2px solid var(--sg-pink); outline-offset: 2px; }
.sg :where(code) {
  font-family: var(--sg-mono); font-size: .84em; background: rgba(255, 255, 255, .06);
  border: 1px solid var(--sg-line-2); border-radius: var(--sg-r-code); padding: 1px 6px;
}

@keyframes sg-blink   { 50% { opacity: 0; } }
@keyframes sg-draw    { to { stroke-dashoffset: 0; } }
@keyframes sg-mat-in  { from { opacity: 0; } }
@keyframes sg-fade    { from { opacity: .2; } }
@keyframes sg-beat    { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes sg-scan    { 0% { background-position: -56px 0; } 70%, 100% { background-position: calc(100% + 56px) 0; } }
@keyframes sg-pkt     { 0% { transform: translate(0, -50%); opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translate(var(--len, 80px), -50%); opacity: 0; } }
@keyframes sg-edge    { 0%, 100% { content: "│"; opacity: .28; } 50% { content: "┃"; opacity: 1; } }
@keyframes sg-pulse   { 50% { opacity: .35; } }
@keyframes sg-shake   { 20% { transform: translateX(-5px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes sg-row-in  { from { opacity: 0; transform: translateY(-4px); } }
@keyframes sg-row-out { to { opacity: 0; transform: translateX(10px); } }
@keyframes sg-sheet-in{ from { transform: translateX(100%); } }
@keyframes sg-flash   { 0%, 30% { stroke: var(--sg-pink); } 100% { stroke: var(--sg-line-3); } }
@keyframes sg-cols    { from { clip-path: inset(-24px 100% -24px -24px); } to { clip-path: inset(-24px -24px -24px -24px); } }

/* Motion off: no animation, no transition, anywhere. Final states never depend on either. */
html.sg-still *, html.sg-still *::before, html.sg-still *::after { animation: none !important; transition: none !important; }

/* ===== 1. utilities ======================================================= */
.sg-mono   { font-family: var(--sg-mono); font-size: .86em; letter-spacing: var(--sg-ls-mono); }
.sg-muted  { color: var(--sg-text-2); }
.sg-faint  { color: var(--sg-text-3); }
.sg-grow   { flex: 1; }
.sg-tnum   { font-variant-numeric: tabular-nums; }
.sg-sr     { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.sg-wrap   { max-width: var(--sg-wide); margin: 0 auto; padding: 0 var(--sg-gutter); }
.sg-row    { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sg-sp-8); }
.sg-cursor { display: inline-block; margin-left: 1px; color: var(--sg-text-2); animation: sg-blink var(--sg-blink) steps(1) infinite; }
.sg-cursor--you { color: var(--sg-pink); }
.sg-g      { color: var(--sg-dim); }          /* box-drawing glyphs inside text */
.sg-shake  { animation: sg-shake .42s ease; }

/* ===== 2. frames: the border draws itself, then the surface fills ========= */
:where([data-sg-reveal~="frame"], .sg-frame-wait) { position: relative; }
[data-sg-reveal~="frame"], .sg-frame-wait { transition: background-color var(--sg-dur-fill) ease, border-color .3s ease; }
svg.sg-draw { position: absolute; top: -1px; left: -1px; overflow: visible; pointer-events: none; z-index: 3; }
svg.sg-draw rect { fill: none; stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; animation: sg-draw var(--sg-dur-draw) var(--sg-ease) forwards; }
html.sg-rv [data-sg-reveal~="frame"]:not(.sg-lit),
.sg-frame-wait:not(.sg-lit) { border-color: transparent !important; background-color: transparent !important; box-shadow: none !important; }
html.sg-rv [data-sg-reveal~="frame"]:not(.sg-lit) > :not(.sg-draw),
.sg-frame-wait:not(.sg-lit) > :not(.sg-draw) { opacity: 0; }
.sg-lit:not(.sg-ok) > :not(.sg-draw) { animation: sg-mat-in var(--sg-dur-fill) ease both; }

/* ===== 3. character field + fx layer ===================================== */
.sg-field { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: var(--sg-z-field); pointer-events: none; display: block; }
.sg-main  { position: relative; z-index: var(--sg-z-content); }
.sg-fx    { position: fixed; inset: 0; z-index: var(--sg-z-fx); pointer-events: none; overflow: hidden; }
.sg-fx i  { position: absolute; left: 0; top: 0; font: var(--sg-fw-medium) var(--sg-fs-15)/1 var(--sg-mono); font-style: normal; color: var(--sg-text-2); white-space: pre; will-change: transform, opacity; }
.sg-fx i.sg-lift, .sg-fx i.sg-near { color: var(--sg-text); }

/* ===== 4. boot ============================================================ */
.sg-boot { display: none; position: fixed; inset: 0; z-index: var(--sg-z-boot); background: var(--sg-bg); align-items: center; justify-content: center; padding: var(--sg-sp-24); transition: opacity .3s ease; }
.sg-boot.sg-show, html.sg-booting .sg-boot { display: flex; }
.sg-boot.sg-gone { opacity: 0; pointer-events: none; }
html.sg-booting body { overflow: hidden; }
.sg-boot__in   { width: min(560px, 100%); }
.sg-boot__log  { font: var(--sg-fw-regular) var(--sg-fs-14)/1.9 var(--sg-mono); color: var(--sg-text-2); white-space: pre-wrap; min-height: 7.6em; }
.sg-boot__log .sg-ok  { color: var(--sg-text); }
.sg-boot__log .sg-ask { color: var(--sg-pink); }
.sg-boot__cursor { display: inline-block; width: .6em; height: 1.1em; vertical-align: -3px; background: var(--sg-text-2); animation: sg-blink 1s steps(1) infinite; }
.sg-boot__skip { display: block; margin-top: var(--sg-sp-24); font: var(--sg-fw-regular) var(--sg-fs-12) var(--sg-mono); color: var(--sg-text-3); }

/* ===== 5. top bar ========================================================= */
.sg-topbar { position: sticky; top: 0; z-index: var(--sg-z-sticky); background: var(--sg-topbar-bg); backdrop-filter: blur(var(--sg-blur-topbar)); -webkit-backdrop-filter: blur(var(--sg-blur-topbar)); border-bottom: 1px solid var(--sg-line); }
.sg-topbar__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sg-sp-24); padding: var(--sg-sp-12) var(--sg-gutter); max-width: var(--sg-wide); margin: 0 auto; }
.sg-topbar__end { display: flex; align-items: center; gap: var(--sg-sp-8); }
.sg-topbar__anchor { position: relative; }

/* context switcher: "project / branch" + chevron */
.sg-context { display: inline-flex; align-items: center; gap: 10px; background: none; border: 1px solid transparent; border-radius: var(--sg-r-pill); padding: 8px 12px 8px 10px; font-weight: var(--sg-fw-medium); white-space: nowrap; }
.sg-context:hover, .sg-context[aria-expanded="true"] { background: var(--sg-surface-2); }
.sg-context__sep { color: var(--sg-text-3); font-weight: var(--sg-fw-regular); }
.sg-context__sub { color: var(--sg-text-2); font-weight: var(--sg-fw-regular); }
.sg-context svg { color: var(--sg-text-3); }

.sg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sg-pink); flex: none; display: inline-block; }
.sg-dot--run  { background: var(--sg-done); }
.sg-dot--warn { background: var(--sg-amber); }
.sg-dot--off  { background: transparent; box-shadow: inset 0 0 0 1px var(--sg-text-3); }
.sg-dot--sm   { width: 7px; height: 7px; }

/* the command input: "> What should be built?" + one primary button */
.sg-command { display: flex; align-items: center; gap: var(--sg-sp-8); width: 100%; max-width: 640px; margin: 0 auto; background: var(--sg-surface); border: 1px solid var(--sg-line); border-radius: var(--sg-r-pill); padding: 5px 5px 5px 16px; transition: border-color var(--sg-dur-hover); }
.sg-command:focus-within { border-color: var(--sg-line-2); }
.sg-command.sg-nudge { border-color: var(--sg-text-3); }
.sg-command__prompt { font: var(--sg-fw-regular) var(--sg-fs-14) var(--sg-mono); color: var(--sg-text-3); }
.sg-command input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; padding: 6px 0; font-size: var(--sg-fs-15); }
.sg-command input::placeholder { color: var(--sg-text-3); }
.sg-command .sg-btn--primary.sg-busy { min-width: 68px; font-family: var(--sg-glyph); }

.sg-icon-btn { width: var(--sg-control-h); height: var(--sg-control-h); padding: 0; border-radius: 50%; display: inline-grid; place-items: center; border: 1px solid var(--sg-line); background: transparent; color: var(--sg-text-2); flex: none; }
.sg-icon-btn:hover { background: var(--sg-surface-2); color: var(--sg-text); }
.sg-icon-btn--sm { width: 30px; height: 30px; }

.sg-hotkey { display: inline-flex; align-items: center; height: var(--sg-control-h); padding: 0 12px; border-radius: var(--sg-r-pill); border: 1px solid var(--sg-line); background: transparent; color: var(--sg-text-3); font: var(--sg-fw-regular) var(--sg-fs-12) var(--sg-mono); white-space: nowrap; }
.sg-hotkey:hover, .sg-hotkey[aria-expanded="true"] { background: var(--sg-surface-2); color: var(--sg-text); }

/* motion switch: ⣿ Motion [on] */
.sg-motion { display: inline-flex; align-items: center; gap: var(--sg-sp-8); height: var(--sg-control-h); padding: 0 14px 0 12px; border-radius: var(--sg-r-pill); border: 1px solid var(--sg-line); background: transparent; color: var(--sg-text-2); font-size: var(--sg-fs-13); white-space: nowrap; }
.sg-motion:hover { background: var(--sg-surface-2); color: var(--sg-text); }
.sg-motion__glyph { font: var(--sg-fw-regular) var(--sg-fs-14)/1 var(--sg-glyph); color: var(--sg-text-3); width: 1ch; text-align: center; }
.sg-motion__state { font: var(--sg-fw-medium) var(--sg-fs-11)/1 var(--sg-mono); color: var(--sg-text); background: var(--sg-surface-3); border-radius: var(--sg-r-xs); padding: 3px 5px; }
.sg-motion[aria-pressed="false"] .sg-motion__state { color: var(--sg-text-3); background: transparent; box-shadow: inset 0 0 0 1px var(--sg-line-2); }

/* ===== 6. tabs ============================================================ */
.sg-tabs { display: flex; gap: var(--sg-sp-4); max-width: var(--sg-wide); margin: 0 auto; padding: 0 12px; }
.sg-tab { position: relative; background: none; border: 0; padding: 12px 12px 14px; color: var(--sg-text-3); font-weight: var(--sg-fw-medium); font-size: var(--sg-fs-14); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sg-tab:hover, .sg-tab[aria-selected="true"] { color: var(--sg-text); }
.sg-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--sg-text); }
.sg-badge { min-width: 18px; height: 18px; padding: 0 6px; border-radius: var(--sg-r-pill); background: var(--sg-pink-soft); color: var(--sg-pink); font: var(--sg-fw-medium) var(--sg-fs-11)/18px var(--sg-mono); text-align: center; display: inline-block; }
.sg-badge[hidden] { display: none; }

/* ===== 7. buttons ========================================================= */
.sg-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sg-sp-8); border-radius: var(--sg-r-pill); border: 1px solid var(--sg-line-2); background: transparent; padding: 8px 16px; font-weight: var(--sg-fw-medium); font-size: var(--sg-fs-14); line-height: 20px; white-space: nowrap; text-decoration: none; transition: background var(--sg-dur-hover), border-color var(--sg-dur-hover), color var(--sg-dur-hover); }
.sg-btn:hover { background: var(--sg-surface-2); border-color: var(--sg-line-3); }
.sg-btn[disabled] { opacity: .55; cursor: default; }
.sg-btn--primary { background: var(--sg-pink); border-color: var(--sg-pink); color: var(--sg-pink-ink); font-weight: var(--sg-fw-semibold); }
.sg-btn--primary:hover { background: var(--sg-pink-hover); border-color: var(--sg-pink-hover); }
.sg-btn--strong { border-color: var(--sg-text-3); color: var(--sg-text); }
.sg-btn--strong:hover { border-color: var(--sg-text); background: var(--sg-surface-3); }
.sg-btn--sm { padding: 5px 12px; font-size: var(--sg-fs-13); }

/* secondary: outline mono, with a trailing glyph ("open the app ↗") */
.sg-btn-mono { display: inline-flex; align-items: center; gap: var(--sg-sp-8); height: var(--sg-control-h-sm); padding: 0 14px; border: 1px solid var(--sg-line-2); border-radius: var(--sg-r-pill); background: transparent; font: var(--sg-fw-regular) 12.5px var(--sg-mono); color: var(--sg-text-2); text-decoration: none; white-space: nowrap; transition: color var(--sg-dur-hover), border-color var(--sg-dur-hover), background var(--sg-dur-hover); }
.sg-btn-mono > span { color: var(--sg-text-3); transition: color var(--sg-dur-hover); }
.sg-btn-mono:hover, .sg-btn-mono:focus-visible { color: var(--sg-text); border-color: var(--sg-text-3); background: var(--sg-surface-2); }
.sg-btn-mono:hover > span, .sg-btn-mono:focus-visible > span { color: var(--sg-text); }
.sg-btn-mono--sm { height: 30px; padding: 0 12px; font-size: var(--sg-fs-12); }

/* ghost: a text link that is a button */
.sg-link { background: none; border: 0; padding: 4px 0; color: var(--sg-text); font-weight: var(--sg-fw-medium); display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.sg-link:hover { color: var(--sg-pink); }
.sg-link--quiet { font: var(--sg-fw-regular) var(--sg-fs-12) var(--sg-mono); color: var(--sg-text-2); }
.sg-link--quiet:hover { color: var(--sg-text); }

/* key-hint choice: [r] repair check */
.sg-key { display: inline-flex; align-items: center; gap: var(--sg-sp-8); background: none; border: 0; padding: 4px 0; font: var(--sg-fw-regular) var(--sg-fs-14) var(--sg-mono); color: var(--sg-text-2); border-radius: var(--sg-r-xs); }
.sg-key__k { color: var(--sg-text-3); }
.sg-key--primary .sg-key__k { color: var(--sg-pink); }
.sg-key--warn .sg-key__k { color: var(--sg-amber); }
.sg-key:hover, .sg-key:focus-visible, .sg-key.sg-hit, .sg-key.sg-hit .sg-key__k { color: var(--sg-text); }
.sg-keys { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; }

/* tiny in-row action */
.sg-mini { background: none; border: 1px solid var(--sg-line-2); border-radius: var(--sg-r-code); padding: 0 8px; font: var(--sg-fw-regular) var(--sg-fs-12)/20px var(--sg-mono); color: var(--sg-text-2); }
.sg-mini:hover, .sg-mini:focus-visible { color: var(--sg-text); border-color: var(--sg-text-3); }
/* "+ add worker" chip in a section head */
.sg-chip-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--sg-r-pill); border: 1px solid var(--sg-line-2); background: transparent; color: var(--sg-text-2); font: var(--sg-fw-regular) var(--sg-fs-12) var(--sg-mono); white-space: nowrap; }
.sg-chip-btn:hover, .sg-chip-btn[aria-expanded="true"] { color: var(--sg-text); border-color: var(--sg-text-3); background: var(--sg-surface-2); }
/* toggle for sample / demo behaviour: dashed = not real */
.sg-demo-toggle { display: inline-flex; align-items: center; gap: var(--sg-sp-8); height: 30px; padding: 0 12px; border-radius: var(--sg-r-pill); border: 1px dashed var(--sg-line-3); background: transparent; color: var(--sg-text-3); font: var(--sg-fw-regular) var(--sg-fs-12) var(--sg-mono); white-space: nowrap; }
.sg-demo-toggle:hover { color: var(--sg-text); border-color: var(--sg-text-3); }
.sg-demo-toggle[aria-pressed="true"] { color: var(--sg-text); border-style: solid; border-color: var(--sg-text-3); background: var(--sg-surface-2); }
.sg-demo-toggle .sg-box { color: var(--sg-text-3); }

/* ===== 8. inputs ========================================================== */
.sg-label { display: block; margin: 14px 0 6px; font: var(--sg-fw-regular) var(--sg-fs-12) var(--sg-mono); color: var(--sg-text-3); }
.sg-input { display: flex; align-items: center; gap: var(--sg-sp-8); padding: 0 12px; height: var(--sg-control-h); border: 1px solid var(--sg-line-2); border-radius: var(--sg-r-md); background: var(--sg-bg); }
.sg-input:focus-within { border-color: var(--sg-text-3); }
.sg-input__prompt { font: var(--sg-fw-regular) var(--sg-fs-13) var(--sg-mono); color: var(--sg-text-3); }
.sg-input input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; font: var(--sg-fw-regular) var(--sg-fs-14) var(--sg-sans); color: var(--sg-text); }
.sg-input--mono input { font-family: var(--sg-mono); }
.sg-input input::placeholder { color: var(--sg-text-3); }
.sg-input-hint { margin-top: 6px; font: var(--sg-fw-regular) var(--sg-fs-12) var(--sg-mono); color: var(--sg-text-3); }
.sg-input-hint b { font-weight: var(--sg-fw-regular); color: var(--sg-text-2); }
.sg-select { width: 100%; height: var(--sg-control-h-sm); padding: 0 10px; border: 1px solid var(--sg-line-2); border-radius: var(--sg-r-sm); background: var(--sg-bg); color: var(--sg-text); font: var(--sg-fw-regular) var(--sg-fs-13) var(--sg-mono); }
/* radio drawn as ( ) / (•) */
.sg-radio { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; margin: 0 -10px; border-radius: var(--sg-r-sm); cursor: pointer; }
.sg-radio:hover { background: var(--sg-surface-2); }
.sg-radio input { appearance: none; -webkit-appearance: none; margin: 0; font: var(--sg-fw-regular) var(--sg-fs-13) var(--sg-mono); color: var(--sg-text-3); cursor: pointer; outline: none; border-radius: var(--sg-r-xs); }
.sg-radio input::before { content: "( )"; white-space: pre; }
.sg-radio input:checked::before { content: "(•)"; color: var(--sg-text); }
.sg-radio input:focus-visible { outline: 2px solid var(--sg-pink); outline-offset: 2px; }
.sg-radio b { display: block; font-weight: var(--sg-fw-medium); font-size: var(--sg-fs-14); }
.sg-radio small { display: block; font-size: 12.5px; color: var(--sg-text-3); }
/* checkbox drawn as [ ] / [x] */
.sg-check-input { display: inline-flex; gap: var(--sg-sp-8); align-items: center; cursor: pointer; font-size: var(--sg-fs-14); }
.sg-check-input input { appearance: none; -webkit-appearance: none; margin: 0; font: var(--sg-fw-regular) var(--sg-fs-13) var(--sg-mono); color: var(--sg-text-3); cursor: pointer; outline: none; }
.sg-check-input input::before { content: "[ ]"; white-space: pre; }
.sg-check-input input:checked::before { content: "[x]"; color: var(--sg-text); }
.sg-check-input input:focus-visible { outline: 2px solid var(--sg-pink); outline-offset: 2px; }
/* segmented numbers */
.sg-seg { display: inline-flex; gap: var(--sg-sp-4); }
.sg-seg button { min-width: var(--sg-control-h-sm); height: var(--sg-control-h-sm); padding: 0 8px; border: 1px solid var(--sg-line-2); border-radius: var(--sg-r-sm); background: var(--sg-bg); color: var(--sg-text-3); font: var(--sg-fw-regular) var(--sg-fs-13) var(--sg-mono); }
.sg-seg button:hover { color: var(--sg-text); }
.sg-seg button[aria-checked="true"], .sg-seg button[aria-pressed="true"] { color: var(--sg-text); border-color: var(--sg-text-3); background: var(--sg-surface-2); }

/* ===== 9. section header: 01 / Title ─────────· readout =================== */
.sg-section-head { display: flex; align-items: center; gap: var(--sg-sp-12); margin: 0 0 var(--sg-sp-24); min-width: 0; }
.sg-section-head__no { font: var(--sg-fw-regular) var(--sg-fs-12) var(--sg-mono); color: var(--sg-text-3); white-space: nowrap; }
.sg-section-head__title { margin: 0; font-size: var(--sg-fs-22); font-weight: var(--sg-fw-medium); letter-spacing: var(--sg-ls-title); white-space: nowrap; line-height: var(--sg-lh-tight); }
.sg-section-head__aside { font-size: var(--sg-fs-13); color: var(--sg-text-3); background: none; border: 0; padding: 4px 0; white-space: nowrap; text-decoration: none; }
.sg-section-head__aside:hover { color: var(--sg-text); }
.sg-section-head--sm .sg-section-head__title { font-size: var(--sg-fs-17); letter-spacing: -.01em; }
.sg-section-head--sm { margin-bottom: var(--sg-sp-4); }

.sg-rule { position: relative; flex: 1 1 48px; min-width: 24px; height: 14px; overflow: hidden; font: var(--sg-fw-regular) var(--sg-fs-12)/14px var(--sg-box); color: var(--sg-line-3); white-space: pre; }
.sg-rule::before { display: block; content: "────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────"; }
.sg-rule::after { content: "·"; position: absolute; right: 0; top: 0; padding-left: .5ch; color: var(--sg-text-3); background: var(--sg-rule-bg, var(--sg-bg)); }
.sg-readout { display: inline-flex; align-items: center; gap: var(--sg-sp-8); font: var(--sg-fw-regular) var(--sg-fs-12) var(--sg-mono); color: var(--sg-text-3); white-space: nowrap; }
.sg-readout b { color: var(--sg-text-2); font-weight: var(--sg-fw-medium); }

html.sg-rv [data-sg-reveal~="head"]:not(.sg-in) :is(.sg-section-head__no, .sg-section-head__title, .sg-readout, .sg-section-head__aside, .sg-chip-btn, .sg-demo-toggle) { opacity: 0; }
html.sg-rv [data-sg-reveal~="head"]:not(.sg-in) .sg-rule::before { clip-path: inset(0 100% 0 0); }
html.sg-rv [data-sg-reveal~="head"]:not(.sg-in) .sg-rule::after { opacity: 0; }
[data-sg-reveal~="head"].sg-in .sg-rule::before { transition: clip-path var(--sg-dur-rule) var(--sg-ease) var(--sg-rd, 0ms); }
[data-sg-reveal~="head"].sg-in .sg-rule::after { transition: opacity .3s ease calc(var(--sg-rd, 0ms) + 900ms); }
[data-sg-reveal~="head"].sg-in :is(.sg-readout, .sg-section-head__aside, .sg-chip-btn, .sg-demo-toggle) { transition: opacity .5s ease calc(var(--sg-rd, 0ms) + 450ms); }

/* readout glyphs */
.sg-spark { font: var(--sg-fw-regular) var(--sg-fs-15)/1 var(--sg-glyph); color: var(--sg-text-2); letter-spacing: 0; }
.sg-spark .sg-z { color: var(--sg-line-3); }
.sg-spark .sg-now { color: var(--sg-text); }
.sg-spin { font: var(--sg-fw-regular) var(--sg-fs-15)/1 var(--sg-glyph); display: inline-block; width: 1ch; text-align: center; color: var(--sg-text-2); }

/* ===== 10. layout ========================================================= */
.sg-hero { position: relative; border-bottom: 1px solid var(--sg-line); }
.sg-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--sg-sp-56); align-items: start; padding-top: var(--sg-sp-40); padding-bottom: var(--sg-sp-48); }
.sg-page { padding-top: var(--sg-sp-72); padding-bottom: var(--sg-sp-120); }
.sg-page > section + section, .sg-sections > section + section { margin-top: var(--sg-sp-96); }
.sg-tabpage { padding-top: 36px; padding-bottom: var(--sg-sp-96); }
.sg-split { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: var(--sg-sp-24); align-items: start; }
.sg-split--even { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.sg-meta-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sg-sp-8); color: var(--sg-text-3); font-size: var(--sg-fs-13); }
.sg-meta-line .sg-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--sg-text-3); }
.sg-lead { margin: var(--sg-sp-8) 0 0; color: var(--sg-text-2); font-size: var(--sg-fs-16); max-width: 60ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sg-status { display: flex; align-items: center; gap: 10px; color: var(--sg-text); font-weight: var(--sg-fw-medium); }
.sg-status--you { color: var(--sg-pink); }
.sg-status--you .sg-spin { color: var(--sg-pink); }
.sg-status .sg-faint { font-weight: var(--sg-fw-regular); }
.sg-endline { display: flex; align-items: center; gap: var(--sg-sp-12); margin-top: var(--sg-sp-72); padding-top: 20px; border-top: 1px solid var(--sg-line); font: var(--sg-fw-regular) var(--sg-fs-12) var(--sg-mono); color: var(--sg-text-3); }
.sg-corner { position: fixed; left: 16px; bottom: 16px; z-index: var(--sg-z-float); display: flex; align-items: center; gap: 10px; font: var(--sg-fw-medium) var(--sg-fs-11) var(--sg-mono); color: var(--sg-text-3); background: var(--sg-surface); border: 1px solid var(--sg-line); border-radius: var(--sg-r-pill); padding: 4px 6px 4px 12px; }
.sg-corner button { background: none; border: 0; border-left: 1px solid var(--sg-line-2); padding: 2px 6px 2px 10px; color: var(--sg-text-2); font: inherit; }
.sg-corner button:hover { color: var(--sg-text); }

/* ===== 11. big numbers: dot matrix + display word ========================= */
.sg-matrix { --sg-cell: 12px; display: grid; grid-template-columns: repeat(var(--cols, 5), var(--sg-cell)); grid-auto-rows: var(--sg-cell); gap: 2px; font-family: var(--sg-glyph); }
.sg-matrix span { display: block; width: var(--sg-cell); height: var(--sg-cell); overflow: hidden; text-align: center; font-size: calc(var(--sg-cell) * 1.6); line-height: var(--sg-cell); color: var(--sg-ghost); user-select: none; }
.sg-matrix span.sg-on { color: var(--sg-text); }
.sg-matrix--dim span.sg-on { color: var(--sg-text-3); }
.sg-matrix span.sg-scr { color: var(--sg-scramble); }
.sg-matrix span.sg-scr.sg-hi { color: var(--sg-text-2); }
.sg-matrix--sm { --sg-cell: 5px; gap: 1px; }
.sg-matrix--sm span { font-size: 8px; }
html.sg-rv [data-sg-reveal~="matrix"]:not(.sg-in) .sg-matrix span.sg-on { color: var(--sg-ghost); }

.sg-bignum { --sg-cell: clamp(9px, 1.18vw, 17px); display: inline-flex; align-items: flex-end; gap: calc(var(--sg-cell) * 1.3); padding: 6px; margin-left: -6px; background: none; border: 0; border-radius: var(--sg-r-md); color: inherit; }
.sg-bignum .sg-matrix { --sg-cell: inherit; }
button.sg-bignum { cursor: pointer; }
.sg-bignum__of { font: var(--sg-fw-light) calc(var(--sg-cell) * 2.6)/1 var(--sg-sans); letter-spacing: var(--sg-ls-display); color: var(--sg-text-3); }
.sg-bignum--sm { --sg-cell: clamp(8px, .9vw, 12px); }
.sg-hero .sg-bignum { margin-top: var(--sg-sp-32); }
.sg-word { margin-top: var(--sg-sp-12); font-weight: var(--sg-fw-light); font-size: var(--sg-fs-display); letter-spacing: var(--sg-ls-display); line-height: 1; color: var(--sg-text-2); }
.sg-inline-big { display: flex; align-items: baseline; gap: var(--sg-sp-8); white-space: nowrap; }
.sg-inline-big b { font: var(--sg-fw-medium) var(--sg-fs-26)/1 var(--sg-sans); letter-spacing: var(--sg-ls-display); font-variant-numeric: tabular-nums; }
.sg-inline-big span { color: var(--sg-text-2); font-size: var(--sg-fs-13); }

/* ===== 12. character progress bar ======================================== */
.sg-charbar { position: relative; display: flex; gap: 6px; font: var(--sg-fw-regular) var(--sg-fs-15)/1 var(--sg-glyph); overflow: hidden; }
.sg-charbar i { flex: 1; font-style: normal; white-space: nowrap; overflow: hidden; color: var(--sg-dim); letter-spacing: 0; height: 16px; line-height: 16px; transition: color .35s ease calc(var(--k, 0) * 70ms + var(--sg-rd, 0ms)); }
.sg-charbar i::before { content: "░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░"; }
.sg-charbar i:is(.sg-done, .sg-warn, .sg-needs)::before { content: "████████████████████████████████████████████████████████████████████████████████"; }
.sg-charbar i.sg-done  { color: var(--sg-done); }
.sg-charbar i.sg-warn  { color: var(--sg-amber); }
.sg-charbar i.sg-needs { color: var(--sg-pink); }
html.sg-rv [data-sg-reveal~="bar"]:not(.sg-in) i { color: var(--sg-line) !important; }
.sg-charbar__scan { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95), transparent) no-repeat; background-size: 56px 100%; background-position: -56px 0; opacity: 0; }
html.sg:not(.sg-still) .sg-charbar.sg-in .sg-charbar__scan,
html.sg:not(.sg-still) .sg-charbar:not([data-sg-reveal]) .sg-charbar__scan { opacity: 1; animation: sg-scan 4.6s linear 1.2s infinite; }
.sg-charbar--sm { gap: 4px; font-size: var(--sg-fs-13); }
.sg-charbar--sm i { height: 14px; line-height: 14px; }
.sg-legend { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: var(--sg-fs-13); color: var(--sg-text-2); }
.sg-legend > span { display: inline-flex; align-items: center; gap: var(--sg-sp-8); }
.sg-legend b { font-weight: var(--sg-fw-medium); color: var(--sg-text); font-variant-numeric: tabular-nums; }
.sg-legend__key { font: var(--sg-fw-regular) var(--sg-fs-12)/1 var(--sg-glyph); color: var(--sg-dim); }
.sg-legend__key.sg-done { color: var(--sg-done); }
.sg-legend__key.sg-warn { color: var(--sg-amber); }
html.sg-rv [data-sg-reveal~="count"]:not(.sg-in) [data-sg-to] { opacity: 0; }

/* stats strip */
.sg-stats { margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--sg-line); border-bottom: 1px solid var(--sg-line); }
.sg-stat { padding: 14px 0; }
.sg-stat + .sg-stat { padding-left: var(--sg-sp-24); border-left: 1px solid var(--sg-line); }
.sg-stat dt { font-size: var(--sg-fs-12); color: var(--sg-text-3); }
.sg-stat dd { margin: 4px 0 0; font-size: var(--sg-fs-17); font-weight: var(--sg-fw-medium); font-variant-numeric: tabular-nums; }
.sg-stat dd small { font-size: var(--sg-fs-13); color: var(--sg-text-3); font-weight: var(--sg-fw-regular); }

/* ===== 13. tags, chips, ids, avatars ====================================== */
.sg-tag { font: var(--sg-fw-medium) var(--sg-fs-12) var(--sg-mono); color: var(--sg-text-2); white-space: nowrap; }
.sg-tag::before { content: "["; color: var(--sg-text-3); font-weight: var(--sg-fw-regular); }
.sg-tag::after  { content: "]"; color: var(--sg-text-3); font-weight: var(--sg-fw-regular); }
.sg-tag--done  { color: var(--sg-done); }
.sg-tag--warn  { color: var(--sg-amber); }
.sg-tag--needs { color: var(--sg-pink); }
.sg-tag--muted { color: var(--sg-text-3); }
.sg-sample { display: inline-block; font: var(--sg-fw-regular) var(--sg-fs-11)/18px var(--sg-mono); padding: 0 7px; border-radius: var(--sg-r-tag); border: 1px dashed var(--sg-line-3); color: var(--sg-text-3); white-space: nowrap; vertical-align: 1px; }
.sg-new { font: var(--sg-fw-medium) var(--sg-fs-11)/18px var(--sg-mono); padding: 0 7px; border-radius: var(--sg-r-tag); background: var(--sg-pink-soft); color: var(--sg-pink); }
.sg-new--read { background: transparent; color: var(--sg-text-3); box-shadow: inset 0 0 0 1px var(--sg-line-2); }
.sg-kbd { font: var(--sg-fw-regular) var(--sg-fs-11) var(--sg-mono); color: var(--sg-text-3); border: 1px solid var(--sg-line-2); border-radius: var(--sg-r-xs); padding: 0 5px; }
.sg-id { font: var(--sg-fw-regular) var(--sg-fs-13) var(--sg-mono); color: var(--sg-text-3); white-space: pre; }
.sg-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--sg-surface-2); border: 1px solid var(--sg-line-2); display: grid; place-items: center; font: var(--sg-fw-medium) var(--sg-fs-11) var(--sg-mono); color: var(--sg-text-2); flex: none; }
.sg-avatar--sm { width: 22px; height: 22px; font-size: 9.5px; }
.sg-avatar--none { background: transparent; color: var(--sg-text-3); }
.sg-person { display: inline-flex; align-items: center; gap: var(--sg-sp-8); padding: 4px 10px 4px 4px; border-radius: var(--sg-r-pill); border: 1px solid var(--sg-line); color: var(--sg-text-2); background: var(--sg-bg); }
.sg-person .sg-avatar { width: 20px; height: 20px; font-size: 9px; }
.sg-person em { font-style: normal; color: var(--sg-text-3); font-family: var(--sg-mono); font-size: var(--sg-fs-12); }
.sg-person--off { opacity: .5; }
.sg-person--off em { text-decoration: line-through; }

/* ===== 14. panels ========================================================= */
.sg-panel { --sg-frame: var(--sg-line-2); border: 1px solid var(--sg-line); border-radius: var(--sg-r-lg); background-color: var(--sg-surface); padding: 20px 22px 22px; }
.sg-panel--sunk { background-color: var(--sg-sunk); }
.sg-panel--bare { background-color: var(--sg-bg); }
.sg-panel--flush { padding: 0; overflow: hidden; }
.sg-panel--rows { padding: 8px 24px; }
.sg-panel--rows > * + * { border-top: 1px solid var(--sg-line); }
.sg-panel--needs { --sg-frame: var(--sg-pink-edge); border-color: var(--sg-pink-edge); }
.sg-panel__label { font: var(--sg-fw-regular) var(--sg-fs-12) var(--sg-mono); color: var(--sg-text-3); }
.sg-panel__title { display: flex; align-items: center; gap: 10px; margin-top: 10px; font: var(--sg-fw-medium) var(--sg-fs-22)/1.2 var(--sg-sans); letter-spacing: var(--sg-ls-title); }
.sg-panel__note { margin: 14px 0 0; font-size: var(--sg-fs-13); color: var(--sg-text-3); }
.sg-panel__note b { color: var(--sg-text-2); font-weight: var(--sg-fw-medium); }
.sg-panel__foot { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 12px 24px; border-top: 1px solid var(--sg-line); font: var(--sg-fw-regular) var(--sg-fs-12) var(--sg-mono); color: var(--sg-text-3); background: var(--sg-sunk); }
.sg-filetree { margin: 14px 0 18px; font: var(--sg-fw-regular) 12.5px/1.75 var(--sg-box); color: var(--sg-text-2); white-space: pre; overflow: hidden; }
.sg-filetree .sg-c { color: var(--sg-text-3); }

/* collapsible lane */
.sg-lane { border: 1px solid var(--sg-line); border-radius: var(--sg-r); background-color: var(--sg-bg); }
.sg-lane > button { width: 100%; display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; background: none; border: 0; border-radius: var(--sg-r); color: var(--sg-text-2); font-size: var(--sg-fs-13); }
.sg-lane > button:hover { background: var(--sg-surface); }
.sg-lane > button b { font-weight: var(--sg-fw-medium); color: var(--sg-text); }
.sg-lane > button em { font-style: normal; color: var(--sg-text-3); }
.sg-lane > button svg { color: var(--sg-text-3); transition: transform var(--sg-dur-hover); }
.sg-lane > button[aria-expanded="true"] svg { transform: rotate(90deg); }
.sg-lane__body { padding: 0 12px 12px 36px; color: var(--sg-text-3); font-size: var(--sg-fs-13); }
.sg-lane__body[hidden] { display: none; }

/* ===== 15. "needs you": the prompt block =================================== */
.sg-prompt { padding: 2px 0 4px; }
.sg-prompt__meta { display: flex; align-items: center; gap: 10px; font: var(--sg-fw-regular) var(--sg-fs-12) var(--sg-mono); color: var(--sg-text-3); }
.sg-prompt__meta a { color: var(--sg-text-2); text-decoration: none; border-bottom: 1px solid var(--sg-line-2); }
.sg-prompt__meta a:hover { color: var(--sg-text); }
.sg-prompt__mark { width: 20px; font: var(--sg-fw-semibold) 22px/1 var(--sg-mono); color: var(--sg-pink); }
.sg-prompt__text { margin: 10px 0 16px 30px; font-size: var(--sg-fs-19); line-height: 1.45; letter-spacing: -.01em; }
.sg-prompt__keys { margin-left: 30px; transition: opacity .3s ease; }
.sg-prompt__keys .sg-cursor { color: var(--sg-pink); }
.sg-prompt__echo, .sg-echo { margin: 6px 0 0 30px; font: var(--sg-fw-regular) 12.5px var(--sg-mono); color: var(--sg-text-3); min-height: 19px; }
.sg-echo { margin-left: 0; }
.sg-prompt__next { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--sg-line); font: var(--sg-fw-regular) var(--sg-fs-13) var(--sg-mono); color: var(--sg-text-2); transition: opacity .3s ease; }
.sg-prompt__next > :first-child { width: 20px; color: var(--sg-text-3); }
.sg-prompt__next .sg-key { margin-left: auto; font-size: var(--sg-fs-13); }
.sg-prompt--compact .sg-prompt__text { margin-left: 0; font-size: var(--sg-fs-15); margin-bottom: 12px; }
.sg-prompt--compact .sg-prompt__keys, .sg-prompt--compact .sg-prompt__echo { margin-left: 0; }
html.sg-rv [data-sg-reveal~="prompt"]:not(.sg-typed) :is(.sg-prompt__keys, .sg-prompt__next) { opacity: 0; }

/* typed text: a hidden copy reserves the space, the live copy types over it */
.sg-typing { position: relative; }
.sg-typing__ghost { visibility: hidden; }
.sg-typing__live { position: absolute; left: 0; top: 0; right: 0; }
.sg-typing__live code:empty { display: none; }

/* incoming transmission (a note from a system or agent, typed when it scrolls in) */
.sg-transmit { --sg-frame: var(--sg-line-2); padding: 14px 20px 18px; border: 1px solid var(--sg-line); border-radius: var(--sg-r-lg); background-color: var(--sg-bg); }
.sg-transmit__head { display: flex; align-items: center; gap: 10px; font: var(--sg-fw-regular) var(--sg-fs-12) var(--sg-mono); color: var(--sg-text-3); }
.sg-transmit__sig { font: var(--sg-fw-regular) var(--sg-fs-14)/1 var(--sg-glyph); color: var(--sg-text-2); letter-spacing: 0; white-space: pre; }
.sg-transmit__text { margin: 8px 0 0; font-size: var(--sg-fs-14); color: var(--sg-text-2); line-height: 1.55; }
.sg-transmit__text .sg-cursor { color: var(--sg-text-3); }

/* ===== 16. lists: inbox rows and tree rows ================================ */
.sg-inbox { list-style: none; margin: 0; padding: 0; }
.sg-inbox__row { display: grid; grid-template-columns: 8px 52px minmax(0, 1fr) auto; column-gap: 10px; align-items: baseline; padding: 14px 4px; border-bottom: 1px solid var(--sg-line); border-radius: 2px; }
.sg-inbox__row:last-child { border-bottom: 0; }
.sg-inbox__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sg-pink); align-self: start; margin-top: 8px; }
.sg-inbox__row--done .sg-inbox__dot { background: var(--sg-line-3); }
.sg-inbox__id { font: var(--sg-fw-regular) 12.5px var(--sg-mono); color: var(--sg-text-2); }
.sg-inbox__text { font-size: var(--sg-fs-15); line-height: var(--sg-lh-body); color: var(--sg-text); }
.sg-inbox__when { font: var(--sg-fw-regular) var(--sg-fs-12) var(--sg-mono); color: var(--sg-text-3); }
.sg-inbox__act { grid-column: 3 / -1; display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--sg-dur-fast) var(--sg-ease); }
.sg-inbox__act > div { min-height: 0; overflow: hidden; }
.sg-inbox__act .sg-keys { padding-top: 10px; }
.sg-inbox__row:hover .sg-inbox__act, .sg-inbox__row:focus-within .sg-inbox__act { grid-template-rows: 1fr; }
@media (hover: none) { .sg-inbox__act { grid-template-rows: 1fr; } }

.sg-tree-list { list-style: none; margin: 0; padding: 0; }
.sg-tree-head { display: flex; align-items: baseline; gap: 10px; padding: 0 8px 10px; font: var(--sg-fw-regular) var(--sg-fs-12) var(--sg-mono); color: var(--sg-text-3); }
.sg-tree-head b { font: var(--sg-fw-medium) var(--sg-fs-14) var(--sg-sans); color: var(--sg-text); }
.sg-tree-row { display: grid; grid-template-columns: 22px 60px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; width: 100%; text-align: left; background: none; border: 0; border-radius: var(--sg-r-sm); padding: 7px 8px; color: var(--sg-text); min-height: 36px; text-decoration: none; }
button.sg-tree-row:hover, a.sg-tree-row:hover { background: var(--sg-surface-2); }
.sg-tree-row__branch { font: var(--sg-fw-regular) var(--sg-fs-13) var(--sg-box); color: var(--sg-dim); }
.sg-tree-row__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-tree-row__why { display: block; font: var(--sg-fw-regular) var(--sg-fs-12) var(--sg-mono); color: var(--sg-text-3); margin-top: 2px; white-space: normal; }
.sg-tree-foot { display: flex; justify-content: space-between; gap: 16px; padding: 12px 8px 0; margin-top: 8px; border-top: 1px solid var(--sg-line); font-size: var(--sg-fs-13); color: var(--sg-text-3); }
html.sg-rv [data-sg-reveal~="lines"] [data-sg-line]:not(.sg-on) { visibility: hidden; }
.sg-pcur { display: inline-block; width: .55em; height: 1em; margin-left: 4px; vertical-align: -2px; background: var(--sg-text-3); animation: sg-blink 1s steps(1) infinite; }

/* checklist with evidence (requirements, acceptance criteria) */
.sg-checklist { --sg-frame: var(--sg-line-2); list-style: none; margin: 0; padding: 8px 24px; border: 1px solid var(--sg-line); border-radius: var(--sg-r-lg); background-color: var(--sg-surface); }
.sg-check { display: grid; grid-template-columns: 26px 40px 34px minmax(0, 1fr); gap: 4px 10px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--sg-line); }
.sg-check:first-child { border-top: 0; }
.sg-check__branch { font: var(--sg-fw-regular) var(--sg-fs-14) var(--sg-box); color: var(--sg-dim); }
.sg-check__box { font: var(--sg-fw-medium) var(--sg-fs-14) var(--sg-box); color: var(--sg-done); white-space: pre; }
.sg-check--open .sg-check__box { color: var(--sg-text-3); }
.sg-check--fail .sg-check__box { color: var(--sg-amber); }
.sg-check__id { font: var(--sg-fw-regular) var(--sg-fs-13) var(--sg-mono); color: var(--sg-text-3); }
.sg-check__text { margin: 0; font-size: var(--sg-fs-16); line-height: 1.45; color: var(--sg-text); }
.sg-evidence { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font: var(--sg-fw-regular) 12.5px var(--sg-mono); color: var(--sg-text-3); }
.sg-evidence .sg-ok { color: var(--sg-done); }
.sg-evidence .sg-bad { color: var(--sg-amber); }
.sg-evidence .sg-cmd { color: var(--sg-text-2); }
.sg-evidence time { color: var(--sg-text-4); }
html.sg-rv :is([data-sg-reveal~="typeparts"], [data-sg-reveal~="check"]):not(.sg-in) .sg-evidence { visibility: hidden; }

/* entries on a rail (report items, releases, a run history) */
.sg-rail-list { position: relative; display: flex; flex-direction: column; gap: var(--sg-sp-12); padding-left: 30px; }
.sg-rail-list::before { content: ""; position: absolute; left: 8px; top: 0; bottom: calc(var(--last-h, 90px) / 2); border-left: 1px solid var(--sg-line-3); }
.sg-rail-item { position: relative; --sg-frame: var(--sg-line); padding: 18px 18px 18px 22px; border: 1px solid var(--sg-line); border-radius: var(--sg-r-lg); background-color: var(--sg-surface); }
.sg-rail-item::before { content: ""; position: absolute; left: -22px; top: 50%; width: 21px; border-top: 1px solid var(--sg-line-3); }
.sg-rail-item::after { content: ""; position: absolute; left: -25px; top: calc(50% - 3px); width: 7px; height: 7px; border-radius: 50%; background: var(--sg-bg); box-shadow: inset 0 0 0 1px var(--sg-text-3); }
.sg-rail-item.sg-in::after, .sg-rail-item:not([data-sg-reveal])::after { background: var(--sg-done); box-shadow: none; transition: background .4s ease calc(var(--sg-rd, 0ms) + 600ms); }

/* ===== 17. key / value ===================================================== */
.sg-kv { --sg-frame: var(--sg-line-2); margin: 0; font: var(--sg-fw-regular) 13.5px var(--sg-mono); }
.sg-kv__row { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; }
.sg-kv__row dt { color: var(--sg-text-3); white-space: nowrap; }
.sg-kv__lead { flex: 1; min-width: 16px; margin: 0; overflow: hidden; white-space: nowrap; color: var(--sg-line-3); transition: clip-path .8s var(--sg-ease) calc(var(--k, 0) * 80ms + var(--sg-rd, 0ms)); }
.sg-kv__lead::before { content: " ··································································································································································"; }
.sg-kv__row dd:last-child { margin: 0; color: var(--sg-text); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; transition: opacity .4s ease calc(var(--k, 0) * 80ms + var(--sg-rd, 0ms) + 300ms); }
.sg-kv__row dd .sg-faint { color: var(--sg-text-3); }
.sg-kv.sg-panel { padding: 10px 24px; }
html.sg-rv [data-sg-reveal~="leaders"]:not(.sg-in) .sg-kv__lead { clip-path: inset(0 100% 0 0); }
html.sg-rv [data-sg-reveal~="leaders"]:not(.sg-in) .sg-kv__row dd:last-child { opacity: 0; }
/* compact grid key/value inside detail panels */
.sg-kv-grid { margin: 20px 0 0; display: grid; grid-template-columns: 96px minmax(0, 1fr); row-gap: 10px; font-size: var(--sg-fs-13); }
.sg-kv-grid dt { color: var(--sg-text-3); }
.sg-kv-grid dd { margin: 0; display: flex; align-items: center; gap: var(--sg-sp-8); min-width: 0; flex-wrap: wrap; }
.sg-kv-grid .sg-sub { color: var(--sg-text-3); font-family: var(--sg-mono); font-size: var(--sg-fs-12); }
.sg-kv-grid .sg-bad { color: var(--sg-amber); }

/* ===== 18. meters (budgets) =============================================== */
.sg-meter { display: grid; grid-template-columns: 110px minmax(0, 1fr) 130px; gap: 20px; align-items: center; padding: 18px 0; }
.sg-meter__label { font-weight: var(--sg-fw-medium); }
.sg-meter__label small { display: block; font: var(--sg-fw-regular) var(--sg-fs-12) var(--sg-mono); color: var(--sg-text-3); margin-top: 2px; }
.sg-meter__bar { position: relative; display: block; height: 18px; font: var(--sg-fw-regular) var(--sg-fs-15)/18px var(--sg-glyph); white-space: pre; overflow: hidden; color: var(--sg-ghost); letter-spacing: 0; }
.sg-meter__bar::before, .sg-meter__fill::before { content: "░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░"; }
.sg-meter__fill { position: absolute; top: 0; bottom: 0; left: var(--v0, 0%); width: var(--v, 0%); overflow: hidden; color: var(--sg-done); transition: width 1s var(--sg-ease) calc(var(--sg-rd, 0ms) + 200ms), left 1s var(--sg-ease) calc(var(--sg-rd, 0ms) + 200ms); }
.sg-meter__fill::before { content: "████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████"; }
.sg-meter__fill--2 { color: var(--sg-text-3); }
.sg-meter__fill--2::before { content: "▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓"; }
.sg-meter__fill--warn { color: var(--sg-amber); }
.sg-meter__value { font-size: var(--sg-fs-17); font-weight: var(--sg-fw-medium); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.sg-meter__value small { font-size: var(--sg-fs-13); font-weight: var(--sg-fw-regular); color: var(--sg-text-3); }
html.sg-rv [data-sg-reveal~="meter"]:not(.sg-in) .sg-meter__fill { width: 0; left: 0; }
html.sg-rv [data-sg-reveal~="meter"]:not(.sg-in) .sg-meter__value b { opacity: 0; }

/* ===== 19. flow diagram: stage boxes + connectors ========================= */
.sg-flow { display: flex; align-items: stretch; min-width: 0; padding-top: 10px; }
.sg-flow__node { position: relative; flex: none; width: clamp(150px, 13vw, 192px); height: 111px; padding: 0; border: 0; border-radius: var(--sg-r-md); background-color: var(--sg-bg); text-align: left; color: inherit; }
.sg-flow__svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.sg-flow__svg rect { fill: none; stroke: var(--sg-line-3); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke .2s; }
.sg-flow__node:hover .sg-flow__svg rect { stroke: var(--sg-text-3); }
.sg-flow__node[aria-pressed="true"] .sg-flow__svg rect { stroke: var(--sg-text-3); }
.sg-flow__node.sg-flash .sg-flow__svg rect { animation: sg-flash 1.6s ease; }
.sg-flow__label { position: absolute; left: 12px; top: -9px; padding: 0 6px; background: var(--sg-bg); font: var(--sg-fw-medium) var(--sg-fs-13)/18px var(--sg-sans); color: var(--sg-text); transition: opacity .3s; }
.sg-flow__body { position: absolute; left: 16px; right: 14px; top: 22px; bottom: 12px; display: flex; align-items: center; gap: 14px; min-width: 0; transition: opacity .4s ease; }
.sg-flow__lines { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--sg-fs-12); line-height: 1.3; color: var(--sg-text-3); }
.sg-flow__lines > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-flow__lines .sg-mono-line { font: var(--sg-fw-regular) var(--sg-fs-12) var(--sg-mono); color: var(--sg-text-2); }
.sg-flow__lines .sg-warn { color: var(--sg-amber); }
.sg-flow__lines .sg-needs { color: var(--sg-pink); }
.sg-flow__meter { display: flex; gap: 2px; margin-top: 4px; }
.sg-flow__meter i, .sg-legend-chip i { width: 7px; height: 5px; border-radius: 1px; background: var(--sg-done); opacity: .7; }
.sg-flow__meter i.sg-warn, .sg-legend-chip i.sg-warn { background: var(--sg-amber); opacity: 1; }
.sg-flow__meter i.sg-warn { animation: sg-pulse 3.6s ease-in-out infinite; }
.sg-flow__meter i.sg-warn + i.sg-warn { animation-delay: .4s; }
.sg-flow__meter i.sg-warn + i.sg-warn + i.sg-warn { animation-delay: .8s; }
.sg-flow__link { position: relative; flex: 1 1 0; min-width: 28px; }
.sg-flow__link::before { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - .5px); height: 1px; background: var(--sg-line-3); transform-origin: 0 50%; transition: transform .5s var(--sg-ease); }
.sg-bead { position: absolute; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--sg-text-2); }
.sg-bead--tail { width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; background: var(--sg-text-3); }
.sg-flow__stall { position: absolute; right: 5px; top: 50%; width: 3px; height: 11px; margin-top: -5.5px; border-radius: 1px; background: var(--sg-amber); animation: sg-blink 1.6s steps(1) infinite; transition: opacity .4s; }
html.sg-rv .sg-flow:not(.sg-flowing) .sg-flow__link::before { transform: scaleX(0); }
html.sg-rv .sg-flow:not(.sg-flowing) .sg-flow__stall { opacity: 0; }
html.sg-rv .sg-flow__node:not(.sg-on) .sg-flow__label { opacity: 0; }
html.sg-rv .sg-flow__node:not(.sg-drawn) .sg-flow__body { opacity: 0; }
.sg-legend-row { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 22px; font: var(--sg-fw-regular) var(--sg-fs-12) var(--sg-mono); color: var(--sg-text-3); }
.sg-legend-row > span { display: inline-flex; gap: 10px; align-items: center; }
.sg-legend-chip { display: inline-flex; gap: 2px; position: relative; flex: none; }
.sg-legend-flow { display: inline-block; position: relative; width: 28px; height: 1px; background: var(--sg-line-3); }
.sg-legend-flow::after { content: ""; position: absolute; left: 12px; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--sg-text-2); }
.sg-legend-stall { display: inline-block; width: 3px; height: 11px; border-radius: 1px; background: var(--sg-amber); }

/* ===== 20. board: columns, cards, detail ================================== */
.sg-board-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--sg-sp-24); align-items: start; }
.sg-board-main { min-width: 0; display: flex; flex-direction: column; gap: var(--sg-sp-16); }
.sg-board { display: grid; gap: var(--sg-sp-12); align-items: start; grid-template-columns: var(--sg-board-cols, repeat(5, minmax(0, 1fr))); }
.sg-col { min-width: 0; }
.sg-col__head { display: flex; align-items: center; height: 28px; font: var(--sg-fw-regular) 12.5px/1 var(--sg-box); white-space: nowrap; }
.sg-col__tab { color: var(--sg-text-2); flex: none; }
.sg-col__tab b { font-weight: var(--sg-fw-medium); }
.sg-col__tab em { font-style: normal; color: var(--sg-text-3); }
.sg-col--active .sg-col__tab { color: var(--sg-text); }
.sg-col--active .sg-col__tab .sg-g { color: var(--sg-text-3); }
.sg-rail { position: relative; flex: 1; min-width: 6px; height: 1px; background: var(--sg-line); margin-left: 2px; transform-origin: 0 50%; transition: transform .9s var(--sg-ease) var(--sg-rd, 0ms); }
.sg-col:not(:last-child) .sg-rail { margin-right: -12px; }
.sg-col--flow .sg-rail { background: var(--sg-line-3); }
html.sg-rv [data-sg-reveal~="tab"]:not(.sg-in) .sg-rail { transform: scaleX(0); }
html.sg-rv [data-sg-reveal~="tab"]:not(.sg-in) .sg-col__tab { opacity: 0; }
.sg-packet { position: absolute; left: 0; top: 0; display: none; font: var(--sg-fw-regular) var(--sg-fs-11)/1 var(--sg-box); white-space: pre; color: var(--sg-text); padding: 0 2px; background: var(--sg-bg); transform: translate(0, -50%); will-change: transform; }
.sg-packet i { font-style: normal; opacity: .35; }
.sg-packet i + i { opacity: .7; }
.sg-packet b { font-weight: var(--sg-fw-regular); }
.sg-col--flow .sg-packet, .sg-rail--flow .sg-packet { display: block; animation: sg-pkt 3.2s linear infinite; }
html.sg-still .sg-packet { transform: translate(calc(var(--len, 80px) * .5), -50%); }
.sg-col__body { --sg-frame: var(--sg-line); margin-top: var(--sg-sp-8); border: 1px solid var(--sg-line); border-radius: var(--sg-r); padding: var(--sg-sp-8); background-color: var(--sg-sunk); }
.sg-col__role { padding: 2px 4px 8px; color: var(--sg-text-3); font-size: var(--sg-fs-12); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-col__empty { display: grid; place-items: center; min-height: 180px; color: var(--sg-text-3); font: var(--sg-fw-regular) var(--sg-fs-12) var(--sg-mono); }
.sg-cards { display: flex; flex-direction: column; gap: 6px; }
.sg-card { position: relative; display: block; width: 100%; text-align: left; background: var(--sg-surface); border: 1px solid var(--sg-line); border-radius: var(--sg-r-md); padding: 9px 12px 10px 14px; color: inherit; transition: background .12s, border-color .12s, opacity .3s; }
.sg-card:hover { background: var(--sg-surface-2); border-color: var(--sg-line-2); }
.sg-card[aria-pressed="true"] { border-color: var(--sg-dim); background: var(--sg-surface-2); }
.sg-card--needs { border-color: var(--sg-pink-edge); }
.sg-card--needs[aria-pressed="true"] { border-color: var(--sg-pink); }
html.sg-rv [data-sg-reveal~="card"]:not(.sg-in) { opacity: 0; }
.sg-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sg-sp-8); margin-bottom: 4px; }
.sg-card__top .sg-id { font-size: var(--sg-fs-12); }
.sg-card__title { font-size: 13.5px; line-height: var(--sg-lh-ui); margin-bottom: var(--sg-sp-8); overflow-wrap: anywhere; }
.sg-card__foot { display: flex; align-items: center; gap: var(--sg-sp-8); }
.sg-card__stuck { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--sg-line); color: var(--sg-amber); font: var(--sg-fw-regular) 11.5px var(--sg-mono); }
/* edge pulse: a slow │┃ breathing on the left edge of something waiting */
.sg-edge { position: absolute; left: 1px; top: 7px; bottom: 7px; width: 10px; overflow: hidden; font: var(--sg-fw-regular) var(--sg-fs-13)/12px var(--sg-glyph); color: var(--sg-amber); pointer-events: none; }
.sg-card--needs .sg-edge, .sg-edge--needs { color: var(--sg-pink); }
.sg-edge i { display: block; height: 12px; font-style: normal; text-align: center; }
.sg-edge i::before { content: "│"; opacity: .55; animation: sg-edge 3.6s ease-in-out infinite; animation-delay: inherit; }
.sg-card--needs .sg-edge i::before, .sg-edge--needs i::before { animation-duration: 2.6s; }
.sg-board-foot { display: flex; align-items: center; gap: var(--sg-sp-16); flex-wrap: wrap; padding-top: var(--sg-sp-16); border-top: 1px solid var(--sg-line); font-size: var(--sg-fs-13); color: var(--sg-text-3); }

.sg-detail { --sg-frame: var(--sg-line-2); position: sticky; top: calc(var(--sg-top-h, 112px) + 16px); max-height: calc(100vh - var(--sg-top-h, 112px) - 32px); overflow: auto; border: 1px solid var(--sg-line); border-radius: var(--sg-r-lg); background-color: var(--sg-surface); }
.sg-detail__in { padding: 20px 20px 28px; }
.sg-detail__in.sg-swap { animation: sg-fade .16s ease; }
.sg-detail__meta { display: flex; align-items: center; gap: var(--sg-sp-8); color: var(--sg-text-3); font: var(--sg-fw-regular) var(--sg-fs-12) var(--sg-mono); }
.sg-detail__title { font-size: var(--sg-fs-20); font-weight: var(--sg-fw-medium); line-height: 1.25; letter-spacing: var(--sg-ls-title); margin: 8px 0 10px; }
.sg-detail__sec { margin-top: var(--sg-sp-24); }
.sg-detail__sec > h3 { font-size: var(--sg-fs-12); font-weight: var(--sg-fw-medium); color: var(--sg-text-3); margin: 0 0 8px; }
.sg-detail .sg-prompt { margin-top: 20px; padding: 14px 0 4px; border-top: 1px solid var(--sg-line); }
.sg-code-block { background: var(--sg-bg); border: 1px solid var(--sg-line); border-radius: var(--sg-r-sm); padding: 10px 12px; font: var(--sg-fw-regular) 12.5px/1.5 var(--sg-mono); white-space: pre-wrap; word-break: break-word; }
.sg-code-block .sg-pr { color: var(--sg-text-3); user-select: none; }
.sg-timeline { list-style: none; margin: 0; padding: 0; font-size: var(--sg-fs-13); }
.sg-timeline li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 6px; align-items: baseline; padding: 2px 0; color: var(--sg-text-2); }
.sg-timeline li > :first-child { font: var(--sg-fw-regular) var(--sg-fs-13) var(--sg-box); color: var(--sg-dim); }
.sg-timeline time { font: var(--sg-fw-regular) var(--sg-fs-12) var(--sg-mono); color: var(--sg-text-3); }
.sg-timeline .sg-warn { color: var(--sg-amber); }
.sg-timeline .sg-needs { color: var(--sg-pink); }

/* side sheet (the detail panel on phones, or any drawer) */
.sg-sheet { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100vw); background: var(--sg-surface); border-left: 1px solid var(--sg-line); z-index: var(--sg-z-sheet); display: flex; flex-direction: column; animation: sg-sheet-in var(--sg-dur-fast) var(--sg-ease-sheet); }
.sg-sheet[hidden] { display: none; }
.sg-sheet__head { display: flex; justify-content: flex-end; padding: 16px 16px 0; }
.sg-sheet__body { overflow-y: auto; }
.sg-sheet .sg-detail__in { padding-top: 0; }

/* ===== 21. overlays: popovers, menus, modal, palette ====================== */
.sg-scrim { position: fixed; inset: 0; z-index: var(--sg-z-modal-scrim); background: var(--sg-scrim); }
.sg-scrim--sheet { z-index: var(--sg-z-sheet-scrim); background: var(--sg-scrim-sheet); }
.sg-scrim[hidden] { display: none; }
.sg-pop { --sg-frame: var(--sg-line-3); --sg-rule-bg: var(--sg-surface); position: absolute; z-index: var(--sg-z-pop); background-color: var(--sg-surface); border: 1px solid var(--sg-line-2); border-radius: var(--sg-r-lg); box-shadow: var(--sg-shadow-overlay); }
.sg-pop[hidden] { display: none; }
.sg-pop--below { left: 0; top: calc(100% + 8px); width: min(460px, calc(100vw - 32px)); }
.sg-pop--menu { width: 244px; padding: 6px; }
.sg-filter { display: flex; align-items: center; gap: var(--sg-sp-8); padding: 12px 14px; border-bottom: 1px solid var(--sg-line); }
.sg-filter__prompt { font: var(--sg-fw-regular) var(--sg-fs-13) var(--sg-mono); color: var(--sg-text-3); }
.sg-filter input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; font: var(--sg-fw-regular) 13.5px var(--sg-mono); color: var(--sg-text); }
.sg-filter input::placeholder { color: var(--sg-text-3); }
.sg-pop__list { max-height: min(56vh, 420px); overflow: auto; padding: 6px; }
.sg-pop__section { display: flex; justify-content: space-between; align-items: center; gap: var(--sg-sp-8); padding: 10px 10px 4px; font: var(--sg-fw-regular) 11.5px var(--sg-mono); color: var(--sg-text-3); }
.sg-pop__section[hidden] { display: none; }
.sg-option { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 38px; padding: 6px 10px; border-radius: var(--sg-r-sm); font-size: var(--sg-fs-14); color: var(--sg-text); cursor: pointer; }
.sg-option[hidden] { display: none; }
.sg-option.sg-active, .sg-option[aria-selected="true"] { background: var(--sg-surface-2); }
.sg-option__glyph { font: var(--sg-fw-regular) var(--sg-fs-14) var(--sg-mono); color: var(--sg-text-3); text-align: center; display: grid; place-items: center; }
.sg-option__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-option__hint { font: var(--sg-fw-regular) var(--sg-fs-12) var(--sg-mono); color: var(--sg-text-3); white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.sg-pop__foot { display: flex; gap: 6px; padding: 6px; border-top: 1px solid var(--sg-line); }
.sg-pop__note { padding: 8px 14px 12px; font: var(--sg-fw-regular) 11.5px/1.5 var(--sg-mono); color: var(--sg-text-3); border-top: 1px solid var(--sg-line); }
.sg-menu-head { display: flex; align-items: baseline; gap: var(--sg-sp-8); padding: 8px 10px 6px; }
.sg-menu-head b { font-weight: var(--sg-fw-medium); }
.sg-menu-label { padding: 8px 10px 2px; font: var(--sg-fw-regular) var(--sg-fs-11) var(--sg-mono); color: var(--sg-text-3); }
.sg-menu-item { display: flex; align-items: center; gap: var(--sg-sp-8); width: 100%; min-height: 32px; padding: 4px 10px; border: 0; border-radius: 7px; background: none; color: var(--sg-text); font: var(--sg-fw-regular) var(--sg-fs-13) var(--sg-mono); text-align: left; }
.sg-menu-item:hover, .sg-menu-item:focus-visible { background: var(--sg-surface-2); outline: none; }
.sg-menu-item__ck { width: 14px; color: var(--sg-text-2); text-align: center; }
.sg-menu-sep { height: 1px; background: var(--sg-line); margin: 6px 4px; }
.sg-menu-confirm { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 6px 10px; }
.sg-menu-confirm[hidden] { display: none; }
.sg-modal { position: fixed; left: 50%; top: 11vh; transform: translateX(-50%); z-index: var(--sg-z-modal); width: min(520px, calc(100vw - 24px)); max-height: 82vh; overflow: auto; padding: 20px 24px 22px; }
.sg-modal__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.sg-modal__head h2 { margin: 0; font-size: 18px; font-weight: var(--sg-fw-medium); letter-spacing: -.01em; }
.sg-modal__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sg-sp-8); margin-top: 22px; }
.sg-modal__log { font: var(--sg-fw-regular) var(--sg-fs-13)/1.9 var(--sg-mono); color: var(--sg-text-2); white-space: pre-wrap; min-height: 7.6em; }
.sg-modal__log .sg-ok { color: var(--sg-text); }
.sg-palette { position: fixed; left: 50%; top: 13vh; transform: translateX(-50%); z-index: var(--sg-z-modal); width: min(560px, calc(100vw - 24px)); }

/* ===== 22. console ========================================================= */
.sg-console { --sg-frame: var(--sg-line-2); border: 1px solid var(--sg-line-2); border-radius: var(--sg-r-lg); background-color: var(--sg-sunk); font: var(--sg-fw-regular) 12.5px/var(--sg-lh-log) var(--sg-mono); overflow: hidden; }
.sg-console__head { display: flex; align-items: center; gap: var(--sg-sp-12); height: 42px; padding: 0 16px; border-bottom: 1px solid var(--sg-line); width: 100%; background: none; border-top: 0; border-left: 0; border-right: 0; color: inherit; font: inherit; text-align: left; }
.sg-console__head .sg-pr { color: var(--sg-text-3); }
.sg-console__title { color: var(--sg-text); font-weight: var(--sg-fw-medium); }
.sg-beat { display: inline-flex; align-items: center; gap: 6px; color: var(--sg-text-3); font-size: var(--sg-fs-12); white-space: nowrap; }
.sg-beat i { width: 6px; height: 6px; border-radius: 50%; background: var(--sg-done); animation: sg-beat 2.4s ease-in-out infinite; }
html.sg-still .sg-beat i { opacity: .5; }
.sg-console__body { height: 252px; overflow-y: auto; padding: 10px 0 14px; scrollbar-width: thin; scrollbar-color: var(--sg-line-2) transparent; }
.sg-log { list-style: none; margin: 0; padding: 0; }
.sg-log li { display: grid; grid-template-columns: 72px 56px minmax(0, 1fr) auto; gap: var(--sg-sp-12); padding: 1px 16px; color: var(--sg-text-2); }
.sg-log li:hover { background: rgba(255, 255, 255, .025); }
.sg-log time { color: var(--sg-text-4); }
.sg-log .sg-src { color: var(--sg-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-log .sg-msg { overflow-wrap: anywhere; }
.sg-log li.sg-warn :is(.sg-msg, .sg-src) { color: var(--sg-amber); }
.sg-log li.sg-needs :is(.sg-msg, .sg-src) { color: var(--sg-pink); }
.sg-log .sg-chip { align-self: center; font-size: var(--sg-fs-10); line-height: 16px; padding: 0 6px; border-radius: var(--sg-r-xs); border: 1px solid var(--sg-line-2); color: var(--sg-text-3); }
.sg-log li:last-child .sg-msg::after { content: "▌"; margin-left: 2px; color: var(--sg-text-3); animation: sg-blink var(--sg-blink) steps(1) infinite; }
/* docked drawer variant: fixed to the bottom, the head toggles it */
.sg-console--dock { position: fixed; left: 16px; right: 16px; bottom: 0; z-index: var(--sg-z-float); border-bottom: 0; border-radius: var(--sg-r-lg) var(--sg-r-lg) 0 0; box-shadow: var(--sg-shadow-overlay); max-width: var(--sg-wide); margin: 0 auto; }
.sg-console--dock .sg-console__head { cursor: pointer; border-bottom-color: transparent; }
.sg-console--dock[data-open="true"] .sg-console__head { border-bottom-color: var(--sg-line); }
.sg-console--dock .sg-console__body { height: 0; padding: 0; transition: height var(--sg-dur-fast) var(--sg-ease); }
.sg-console--dock[data-open="true"] .sg-console__body { height: 240px; padding: 10px 0 14px; }

/* ===== 23. oscilloscope channels ========================================== */
.sg-bank { --sg-frame: var(--sg-line-2); border: 1px solid var(--sg-line); border-radius: var(--sg-r-lg); background-color: var(--sg-surface); overflow: hidden; }
.sg-channel { position: relative; display: grid; grid-template-columns: 200px minmax(0, 1fr) 190px; align-items: center; gap: var(--sg-sp-24); padding: 18px 24px; border-top: 1px solid var(--sg-line); }
.sg-channel:first-child { border-top: 0; }
.sg-channel__id { display: flex; align-items: center; gap: var(--sg-sp-12); min-width: 0; }
.sg-channel__id b { display: block; font-weight: var(--sg-fw-medium); }
.sg-channel__id small { display: block; font: var(--sg-fw-regular) var(--sg-fs-12) var(--sg-mono); color: var(--sg-text-3); }
.sg-channel__state { display: flex; align-items: center; justify-content: flex-end; gap: var(--sg-sp-8); font: var(--sg-fw-regular) var(--sg-fs-12) var(--sg-mono); color: var(--sg-text-2); white-space: nowrap; }
.sg-channel__state .sg-spin { font-size: var(--sg-fs-14); color: var(--sg-text-3); }
.sg-channel--busy .sg-channel__state, .sg-channel--busy .sg-channel__state .sg-spin { color: var(--sg-text); }
.sg-channel--off .sg-channel__id { opacity: .55; }
.sg-channel--off .sg-channel__state { color: var(--sg-text-3); }
.sg-channel.sg-row-in { animation: sg-row-in .5s var(--sg-ease) both; }
.sg-channel.sg-row-out { animation: sg-row-out .34s ease forwards; }
.sg-scope { position: relative; height: 44px; padding: 2px 0; font: var(--sg-fw-regular) 18px/20px var(--sg-glyph); white-space: pre; overflow: hidden; color: var(--sg-text-3); letter-spacing: 0; border-radius: var(--sg-r-code);
  background-color: var(--sg-sunk);
  background-image: linear-gradient(90deg, var(--sg-ghost) 1px, transparent 1px), linear-gradient(transparent 21px, var(--sg-ghost) 21px, var(--sg-ghost) 22px, transparent 22px);
  background-size: 48px 100%, 100% 100%; }
.sg-scope .sg-hot { color: var(--sg-text); }
.sg-scope--busy { color: var(--sg-text-2); }
.sg-scope--off { font: var(--sg-fw-regular) var(--sg-fs-12)/40px var(--sg-mono); color: var(--sg-text-3); padding-left: 14px; background-image: none; }

/* ===== 24. ASCII images ==================================================== */
.sg-ascii { display: block; font-family: var(--sg-mono); white-space: pre; color: var(--sg-art); letter-spacing: 0; overflow: hidden; user-select: none; filter: blur(.45px); transition: color .6s ease, filter .6s ease; }
.sg-ascii b { font-weight: var(--sg-fw-regular); color: var(--sg-art-ink); transition: color .6s ease; }
.sg-ascii i { font-style: normal; }
.sg-ascii .sg-lat { color: var(--sg-art-latent); }
.sg-ascii .sg-scan { color: var(--sg-text); }
:is(.sg-viewer, .sg-thumb, .sg-develop-on-hover):is(:hover, :focus-within, [aria-pressed="true"]) .sg-ascii { color: var(--sg-text-2); filter: none; }
:is(.sg-viewer, .sg-thumb, .sg-develop-on-hover):is(:hover, :focus-within, [aria-pressed="true"]) .sg-ascii b { color: var(--sg-text); }
html.sg-rv [data-sg-reveal~="develop"]:not(.sg-in) .sg-ascii { opacity: 0; }
.sg-viewer { --sg-frame: var(--sg-line-2); border: 1px solid var(--sg-line); border-radius: var(--sg-r-lg); background-color: var(--sg-sunk); overflow: hidden; }
.sg-viewer__top { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--sg-line); font: var(--sg-fw-regular) var(--sg-fs-12) var(--sg-mono); color: var(--sg-text-3); min-width: 0; }
.sg-viewer__top b { font-weight: var(--sg-fw-medium); color: var(--sg-text-2); }
.sg-viewer__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-viewer__art { padding: 16px 16px 18px; cursor: crosshair; }
.sg-thumbs { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: var(--sg-sp-8); margin-top: var(--sg-sp-12); }
.sg-thumb { display: block; min-width: 0; padding: 6px 6px 8px; border: 1px solid var(--sg-line); border-radius: var(--sg-r-md); background-color: var(--sg-sunk); text-align: left; color: inherit; transition: border-color var(--sg-dur-hover), background-color var(--sg-dur-hover); }
.sg-thumb:hover { border-color: var(--sg-line-3); }
.sg-thumb[aria-pressed="true"] { border-color: var(--sg-text-3); background-color: var(--sg-surface); }
.sg-thumb__label { display: block; margin-top: 6px; font: var(--sg-fw-regular) var(--sg-fs-11) var(--sg-mono); color: var(--sg-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-thumb[aria-pressed="true"] .sg-thumb__label { color: var(--sg-text); }

/* ===== 25. documents ======================================================= */
.sg-prose { max-width: var(--sg-measure); }
.sg-prose p { margin: 0 0 14px; font-size: var(--sg-fs-16); line-height: var(--sg-lh-prose); color: var(--sg-text-2); }
.sg-prose p b { color: var(--sg-text); font-weight: var(--sg-fw-medium); }
.sg-figlet { width: min(100%, 520px); user-select: none; }
.sg-figlet svg { display: block; width: 100%; height: auto; overflow: visible; }
html.sg-rv [data-sg-reveal~="figlet"]:not(.sg-in) svg { clip-path: inset(-24px 100% -24px -24px); }
html.sg-rv [data-sg-reveal~="figlet"].sg-in:not(.sg-ok) svg { animation: sg-cols .9s steps(46, end) both; }
.sg-doc-meta { margin-top: 14px; font: var(--sg-fw-regular) var(--sg-fs-13) var(--sg-mono); color: var(--sg-text-3); }
html.sg-rv [data-sg-reveal~="type"]:not(.sg-in) { opacity: 0; }

/* ===== 26. empty states, toasts =========================================== */
.sg-empty { display: grid; place-items: center; gap: var(--sg-sp-8); min-height: 120px; padding: var(--sg-sp-24); text-align: center; color: var(--sg-text-3); font: var(--sg-fw-regular) var(--sg-fs-13) var(--sg-mono); }
.sg-empty p { margin: 0; max-width: 44ch; }
.sg-empty__glyph { font: var(--sg-fw-regular) var(--sg-fs-14) var(--sg-box); color: var(--sg-dim); white-space: pre; line-height: 1.2; }
.sg-toasts { position: fixed; right: 16px; bottom: 16px; z-index: var(--sg-z-toast); display: flex; flex-direction: column; align-items: flex-end; gap: var(--sg-sp-8); pointer-events: none; max-width: calc(100vw - 32px); }
.sg-toast { --sg-frame: var(--sg-line-3); pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid var(--sg-line-2); border-radius: var(--sg-r-pill); background-color: var(--sg-surface); box-shadow: var(--sg-shadow-overlay); font: var(--sg-fw-regular) 12.5px var(--sg-mono); color: var(--sg-text-2); max-width: 100%; transition: opacity .3s ease; }
.sg-toast > :first-child { color: var(--sg-text-3); }
.sg-toast--warn > :first-child { color: var(--sg-amber); }
.sg-toast--needs > :first-child { color: var(--sg-pink); }
.sg-toast.sg-gone { opacity: 0; }

/* ===== 27. personal pages: exhibit, desk, scroller, path, facts ============ */
/* For public-facing pages (portfolio, profile, landing). "You" is the visitor:
   pink marks the main action, what is live or available, the current
   selection and what is new. At most one pink accent per section. */

/* availability chip: the one fact a visitor should not miss */
.sg-avail { display: inline-flex; align-items: center; gap: 8px; font-size: var(--sg-fs-13); color: var(--sg-text-2); white-space: nowrap; }

/* exhibit: a big-type index of items + one sticky stage showing the chosen one */
.sg-exhibit { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr); gap: var(--sg-sp-48); align-items: start; }
.sg-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sg-line); }
.sg-index > li { border-bottom: 1px solid var(--sg-line); }
.sg-index__item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: baseline; gap: 8px; width: 100%; padding: 18px 4px 16px 0; background: none; border: 0; text-align: left; color: var(--sg-text-3); cursor: pointer; }
.sg-index__mark { font: var(--sg-fw-regular) var(--sg-fs-17) var(--sg-mono); color: transparent; transition: color var(--sg-dur-hover); }
.sg-index__name { font-size: clamp(26px, 2.8vw, 40px); font-weight: var(--sg-fw-medium); letter-spacing: -.03em; line-height: 1.05; transition: color var(--sg-dur-hover); overflow-wrap: anywhere; }
.sg-index__meta { font: var(--sg-fw-regular) var(--sg-fs-12)/1.5 var(--sg-mono); color: var(--sg-text-3); text-align: right; }
.sg-index__item:hover .sg-index__name { color: var(--sg-text-2); }
.sg-index__item[aria-pressed="true"] .sg-index__name { color: var(--sg-text); }
.sg-index__item[aria-pressed="true"] .sg-index__mark { color: var(--sg-pink); }
.sg-stage { --sg-frame: var(--sg-line-2); position: sticky; top: 132px; border: 1px solid var(--sg-line); border-radius: var(--sg-r-lg); background-color: var(--sg-sunk); overflow: hidden; }
.sg-stage__top { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--sg-line); font: var(--sg-fw-regular) var(--sg-fs-12) var(--sg-mono); color: var(--sg-text-3); min-width: 0; }
.sg-stage__top b { font-weight: var(--sg-fw-medium); color: var(--sg-text-2); }
.sg-stage__hint { color: var(--sg-text-4); font-size: var(--sg-fs-11); }
.sg-stage__art { position: relative; padding: 18px 18px 20px; cursor: zoom-in; }
.sg-stage__art pre { margin: 0; }
.sg-stage__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity .45s var(--sg-ease) .1s; }
.sg-stage__art:hover img, .sg-stage__art:focus-visible img { opacity: 1; }
.sg-stage .sg-scan { color: var(--sg-pink); }
.sg-stage__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sg-sp-16) var(--sg-sp-24); align-items: end; padding: 20px 20px 22px; border-top: 1px solid var(--sg-line); background-color: var(--sg-surface); }
.sg-stage__text { margin: 0; max-width: 52ch; font-size: var(--sg-fs-16); line-height: 1.5; color: var(--sg-text-2); }
.sg-links { display: flex; flex-wrap: wrap; gap: var(--sg-sp-8); }

/* strip + character scroller: a horizontal row with a ───━━━─── scrollbar */
.sg-strip { overflow-x: auto; scrollbar-width: none; }
.sg-strip::-webkit-scrollbar { display: none; }
.sg-scroller { display: flex; align-items: center; gap: var(--sg-sp-12); margin-top: var(--sg-sp-8); }
.sg-scroller[hidden] { display: none; }
.sg-scroller .sg-icon-btn { font: 18px/1 var(--sg-sans); }
.sg-scroller .sg-icon-btn:disabled { opacity: .35; cursor: default; }
.sg-scroller__track { position: relative; flex: 1; height: 24px; cursor: pointer; touch-action: none; }
.sg-scroller__track::before { content: "────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────"; position: absolute; inset: 0; overflow: hidden; white-space: nowrap; font: 14px/24px var(--sg-box); color: var(--sg-line-3); }
.sg-scroller__thumb { position: absolute; top: 0; height: 24px; overflow: hidden; cursor: grab; }
.sg-scroller__thumb::before { content: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"; display: block; white-space: nowrap; font: 14px/24px var(--sg-box); color: var(--sg-text-3); transition: color var(--sg-dur-hover); }
.sg-scroller__track:hover .sg-scroller__thumb::before, .sg-scroller.sg-drag .sg-scroller__thumb::before { color: var(--sg-text); }
.sg-scroller.sg-drag .sg-scroller__thumb { cursor: grabbing; }
.sg-scroller__count { min-width: 9ch; text-align: right; font: var(--sg-fw-regular) var(--sg-fs-12) var(--sg-mono); color: var(--sg-text-3); }

/* desk of sheets: documents as small title pages with pages stacked behind */
.sg-desk { display: grid; grid-auto-flow: column; grid-auto-columns: 360px; gap: var(--sg-sp-32); align-items: start; padding: 10px 16px 20px 0; }
.sg-sheet { --sg-frame: var(--sg-line-3); position: relative; display: flex; flex-direction: column; width: 100%; min-width: 0; aspect-ratio: 1 / 1.3; padding: 26px 28px 20px; border: 1px solid var(--sg-line-2); border-radius: var(--sg-r-xs); background-color: var(--sg-surface); cursor: pointer;
  box-shadow: 6px 6px 0 -1px var(--sg-surface), 6px 6px 0 0 var(--sg-line-2), 12px 12px 0 -1px var(--sg-sunk), 12px 12px 0 0 var(--sg-line-2);
  transition: border-color var(--sg-dur-hover), transform .35s var(--sg-ease); }
.sg-sheet:hover { border-color: var(--sg-line-3); transform: translateY(-4px); }
.sg-sheet.sg-open { border-color: var(--sg-text-3); cursor: default; }
.sg-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: var(--sg-fw-regular) var(--sg-fs-11) var(--sg-mono); color: var(--sg-text-3); }
.sg-sheet__h { margin: 26px 0 0; text-align: center; }
.sg-sheet__title { padding: 0; background: none; border: 0; font-size: var(--sg-fs-19); font-weight: var(--sg-fw-medium); line-height: 1.3; letter-spacing: -.01em; color: var(--sg-text); text-wrap: balance; cursor: pointer; }
.sg-sheet__authors { margin-top: 10px; text-align: center; font-size: var(--sg-fs-13); color: var(--sg-text-2); }
.sg-sheet__authors b { font-weight: var(--sg-fw-medium); color: var(--sg-text); }
.sg-sheet__venue { margin-top: 4px; text-align: center; font-size: var(--sg-fs-12); font-style: italic; color: var(--sg-text-3); }
.sg-sheet__label { margin: 22px 0 8px; text-align: center; font: var(--sg-fw-regular) var(--sg-fs-11) var(--sg-mono); color: var(--sg-text-3); }
.sg-sheet__abs { margin: 0; font-size: 13px; line-height: 1.62; color: var(--sg-text-2); text-align: justify; hyphens: auto; }
.sg-greek { font: 13px/1.62 var(--sg-box); color: var(--sg-dim); word-spacing: 3px; text-align: left; overflow-wrap: anywhere; }
.sg-sheet:hover .sg-greek { color: var(--sg-text-4); }
.sg-sheet__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; padding-top: 18px; }
.sg-sheet__foot a { text-decoration: none; }
.sg-sheet__aside { margin-left: auto; padding: 0; background: none; border: 0; font: var(--sg-fw-regular) var(--sg-fs-12) var(--sg-mono); color: var(--sg-text-3); cursor: pointer; text-decoration: none; }
.sg-sheet__aside:hover { color: var(--sg-text); }
.sg-sheet .sg-echo { margin-left: 0; }
.sg-sheet .sg-echo:empty { display: none; }
.sg-stamp { display: inline-block; padding: 1px 8px; border: 1px solid var(--sg-pink-edge); border-radius: var(--sg-r-xs); transform: rotate(-5deg); font: var(--sg-fw-regular) var(--sg-fs-11) var(--sg-mono); color: var(--sg-pink); }

/* path: a short history on a rail; current entries get a pink dot */
.sg-path { list-style: none; margin: 0; padding: 0; }
.sg-path li { position: relative; display: grid; grid-template-columns: 22px 112px minmax(0, 1fr); column-gap: 12px; padding-bottom: 22px; }
.sg-path li:last-child { padding-bottom: 0; }
.sg-path li:not(:last-child)::before { content: ""; position: absolute; left: 10.5px; top: 21px; bottom: 1px; border-left: 1px solid var(--sg-line-3); }
.sg-path__dot { font: 12px/24px var(--sg-glyph); color: var(--sg-text-3); text-align: center; }
.sg-path__now .sg-path__dot { color: var(--sg-pink); }
.sg-path__when { font: var(--sg-fw-regular) var(--sg-fs-12)/24px var(--sg-mono); color: var(--sg-text-3); white-space: nowrap; }
.sg-path__what { font-size: var(--sg-fs-16); line-height: 24px; font-weight: var(--sg-fw-medium); color: var(--sg-text); }
.sg-path__what span { font-weight: var(--sg-fw-regular); color: var(--sg-text-2); }
.sg-path__note { margin-top: 2px; font-size: var(--sg-fs-14); color: var(--sg-text-3); }

/* facts: short labelled answers, all visible at once */
.sg-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 48px; margin: 0; }
.sg-facts dt { font: var(--sg-fw-regular) var(--sg-fs-12) var(--sg-mono); color: var(--sg-text-3); }
.sg-facts dd { margin: 6px 0 0; font-size: var(--sg-fs-16); line-height: 1.5; color: var(--sg-text-2); }

/* portrait: a photo drawn in characters; the photo shows on hover */
.sg-portrait { --sg-frame: var(--sg-line-2); position: relative; margin: 0; border: 1px solid var(--sg-line); border-radius: var(--sg-r-lg); background-color: var(--sg-sunk); overflow: hidden; }
.sg-portrait__art { position: relative; padding: 14px; }
.sg-portrait__art pre { margin: 0; }
.sg-portrait__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s var(--sg-ease) .1s; }
.sg-portrait:hover img, .sg-portrait:focus-within img { opacity: 1; }
.sg-portrait .sg-ascii { color: var(--sg-text-3); filter: none; }
.sg-portrait .sg-ascii b { color: var(--sg-text); }
.sg-portrait figcaption { padding: 10px 14px; border-top: 1px solid var(--sg-line); font: var(--sg-fw-regular) var(--sg-fs-11) var(--sg-mono); color: var(--sg-text-3); }

/* big link: the final call to action on a public page (pink) */
.sg-big-link { display: inline-block; font-size: clamp(30px, 5.4vw, 72px); font-weight: var(--sg-fw-medium); letter-spacing: -.04em; line-height: 1.05; color: var(--sg-pink); text-decoration: none; overflow-wrap: anywhere; }
.sg-big-link:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }

@media (max-width: 900px) {
  .sg-exhibit { grid-template-columns: minmax(0, 1fr); }
  .sg-stage { position: static; margin: 0 0 18px; }
  .sg-index > li > .sg-stage { margin-top: 2px; }
  .sg-stage__body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .sg-index__meta { display: none; }
  .sg-desk { grid-auto-columns: 86%; scroll-snap-type: x mandatory; gap: var(--sg-sp-24); }
  .sg-sheet { scroll-snap-align: start; padding: 22px 20px 18px; }
  .sg-facts { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sg-path li { grid-template-columns: 22px minmax(0, 1fr); }
  .sg-path__when, .sg-path li > div { grid-column: 2; }
}
@media (hover: none) { .sg-stage__hint { display: none; } }

/* ===== 28. responsive ====================================================== */
@media (max-width: 1240px) {
  .sg-board-layout { grid-template-columns: minmax(0, 1fr) 320px; }
  .sg-board { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sg-board .sg-col:nth-child(3n) .sg-rail { margin-right: 0; }
  .sg-col__empty { min-height: 72px; }
  .sg-channel { grid-template-columns: 170px minmax(0, 1fr) 160px; }
}
@media (max-width: 1080px) {
  .sg-hero__grid { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sg-sp-40); }
  .sg-split, .sg-split--even { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .sg-topbar__row { grid-template-columns: 1fr auto; gap: var(--sg-sp-12); padding: 10px 16px; }
  .sg-topbar__row > .sg-command { grid-column: 1 / -1; grid-row: 2; max-width: none; }
  .sg-tabs { padding: 0 4px; overflow-x: auto; scrollbar-width: none; }
  .sg-tabs::-webkit-scrollbar { display: none; }
  .sg-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sg-sp-32); padding-top: 28px; padding-bottom: var(--sg-sp-40); }
  .sg-stats { grid-template-columns: 1fr 1fr; }
  .sg-stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .sg-stat:nth-child(n+3) { border-top: 1px solid var(--sg-line); }
  .sg-page { padding-top: var(--sg-sp-56); }
  .sg-page > section + section, .sg-sections > section + section { margin-top: var(--sg-sp-72); }
  .sg-flow { flex-direction: column; align-items: stretch; }
  .sg-flow__node { width: auto; height: 101px; }
  .sg-flow__link { flex: none; height: 44px; min-width: 0; }
  .sg-flow__link::before { left: calc(50% - .5px); right: auto; top: 0; bottom: 0; width: 1px; height: auto; transform-origin: 50% 0; }
  html.sg-rv .sg-flow:not(.sg-flowing) .sg-flow__link::before { transform: scaleY(0); }
  .sg-bead { left: 50%; }
  .sg-flow__stall { right: auto; left: 50%; top: auto; bottom: 5px; width: 11px; height: 3px; margin: 0 0 0 -5.5px; }
  .sg-channel { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; padding: 16px; }
  .sg-channel .sg-scope { grid-column: 1 / -1; grid-row: 2; }
  .sg-board-layout { grid-template-columns: minmax(0, 1fr); }
  .sg-board-layout > .sg-detail { display: none; }
  .sg-board { grid-template-columns: minmax(0, 1fr); }
  .sg-board .sg-rail { margin-right: 0 !important; }
  .sg-col--flow .sg-packet { display: none; }
  .sg-col__empty { min-height: 0; place-items: start; padding: 4px; }
  .sg-meter { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .sg-meter .sg-meter__bar { grid-column: 1 / -1; grid-row: 2; }
  .sg-rail-item { padding: 16px; }
}
@media (max-width: 520px) {
  .sg-motion__label { display: none; }
  .sg-motion { padding: 0 12px; }
  .sg-hotkey { display: none; }
  .sg-prompt__text { font-size: var(--sg-fs-17); margin-left: 0; }
  .sg-prompt__keys, .sg-prompt__echo { margin-left: 0; }
  .sg-transmit { padding: 12px 16px 16px; }
  .sg-section-head { flex-wrap: wrap; row-gap: 6px; }
  .sg-section-head__title { font-size: var(--sg-fs-20); }
  .sg-rule { flex-basis: 30px; }
  .sg-section-head > .sg-readout { flex-basis: 100%; order: 5; }
  .sg-readout { white-space: normal; flex-wrap: wrap; min-width: 0; }
  .sg-tree-row { grid-template-columns: 18px 50px minmax(0, 1fr); row-gap: 2px; }
  .sg-tree-row > .sg-tag { grid-column: 3; justify-self: start; }
  .sg-tree-row__title { white-space: normal; }
  .sg-thumbs { gap: 5px; }
  .sg-thumb { padding: 4px 4px 6px; }
  .sg-thumb__label { font-size: var(--sg-fs-10); }
  .sg-viewer__art { padding: 12px; }
  .sg-log li { grid-template-columns: 58px minmax(0, 1fr) auto; gap: var(--sg-sp-8); padding: 1px 12px; }
  .sg-log time { font-size: var(--sg-fs-11); }
  .sg-log .sg-src { display: none; }
  .sg-check { grid-template-columns: 20px 34px minmax(0, 1fr); gap: 4px 8px; }
  .sg-check__id { display: none; }
  .sg-checklist { padding: 4px 16px; }
  .sg-panel--rows, .sg-kv.sg-panel { padding-left: 16px; padding-right: 16px; }
  .sg-modal { top: 6vh; padding: 18px 18px 20px; }
  .sg-corner { left: auto; right: 10px; bottom: 10px; }
  .sg-corner > span { display: none; }
  .sg-corner button { border-left: 0; padding-left: 4px; }
  .sg-console--dock { left: 0; right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html.sg:not(.sg-motion-forced) *, html.sg:not(.sg-motion-forced) *::before, html.sg:not(.sg-motion-forced) *::after { transition-duration: 0s !important; }
}