/* ==========================================================================
   Flight Deck — flightdeckapp.dev
   Palette is sampled from the app icon: a deep navy squircle, a glowing
   cyan chevron, and the receding stacked plates beneath it.
   ========================================================================== */

:root {
  /* Ground — the icon's squircle, darkest at the corners */
  --bg:            #070b14;
  --bg-raised:     #0d1424;
  --bg-panel:      #111a2c;
  --bg-inset:      #060a11;

  /* The chevron: cyan at the tip, blue where it meets the plates */
  --glow-cyan:     #4fe3ff;
  --glow-blue:     #1a92ff;
  --glow-deep:     #0f5fd0;

  /* macOS system accent (the unread dot tracks this in the real app) */
  --accent:        #0a84ff;
  --orange:        #ff9f0a;
  --green:         #30d158;
  --red:           #ff453a;

  /* Type */
  --fg:            #e9eef7;
  --fg-secondary:  #94a3bb;
  --fg-tertiary:   #5c6b85;
  --hairline:      #1e2942;
  --hairline-soft: #172136;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
          "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco,
          "Cascadia Mono", monospace;

  --radius:        14px;
  --radius-lg:     22px;
  --maxw:          1080px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* `clip`, not `hidden`. Both stop sideways overflow, but `hidden` makes the
     body a scroll container, and a sticky descendant then sticks to a box that
     never scrolls — so the demo's pin would silently do nothing. */
  overflow-x: clip;
}

a { color: var(--glow-cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: rgba(79, 227, 255, 0.28); }

:focus-visible {
  outline: 2px solid var(--glow-cyan);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* Ambient glow behind the whole page, echoing the icon's light source ------ */
.aurora {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(760px 480px at 50% -8%,  rgba(26, 146, 255, 0.20), transparent 70%),
    radial-gradient(520px 380px at 50% -2%,  rgba(79, 227, 255, 0.16), transparent 70%),
    radial-gradient(900px 700px at 85% 40%,  rgba(15, 95, 208, 0.10), transparent 70%);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 980px;
  font-size: 15px;
  font-weight: 590;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.25s ease, background 0.2s ease, border-color 0.2s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: linear-gradient(180deg, var(--glow-cyan) 0%, var(--glow-blue) 100%);
  color: #04121f;
  box-shadow: 0 6px 26px -6px rgba(26, 146, 255, 0.72),
              inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.btn-primary:hover {
  box-shadow: 0 12px 38px -8px rgba(26, 146, 255, 0.9),
              inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--hairline);
  color: var(--fg);
}
.btn-secondary:hover { background: rgba(255, 255, 255, 0.09); }

.btn-sm { padding: 7px 15px; font-size: 13.5px; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  z-index: 1;
  padding: 88px 0 0;
  text-align: center;
}

/* Finder icon + label ------------------------------------------------------
   Proportions follow Finder's icon view: the label sits directly beneath the
   icon in the system font at 13px, centred, wrapping to a second line rather
   than truncating, with the accent selection pill appearing on hover the way
   a selected item's does. */
/* The icon travels down the page as you scroll and the demo launches out of
   it, so it needs to pass *behind* the hero copy and buttons on the way. Those
   get a higher layer; the icon sits below them but above the page background. */
h1, .hero-sub, .hero-cta, .hero-note { position: relative; z-index: 3; }

.finder-item {
  /* Everything here is a ratio of the icon, the way Finder's icon view keeps
     label size, gap, and pill geometry in step with the icon-size slider.
     Change --icon and the whole item rescales. */
  --icon: 116px;
  position: relative;
  z-index: 1;
  cursor: pointer;
  will-change: transform;
  /* Driven by the scroll handler as the icon passes behind the hero copy.
     Kept as a custom property rather than an inline opacity so that the
     launch fade (.opened, higher specificity) still wins — an inline opacity
     would outrank the class and the icon would never dissolve. */
  opacity: var(--fade, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--icon) * 0.03);
  width: max-content;
  margin: 26px auto 34px;
  /* Opacity-only entrance, and `backwards` rather than `both`, because the
     scroll-driven travel owns this element's transform and the launch owns its
     opacity. A filled animation wins over inline styles in the cascade, so the
     shared `rise` keyframe's closing `transform: none` silently pinned the icon
     in place, and a persisted `opacity: 1` would likewise stop it fading out
     when the app opens. `backwards` still suppresses the pre-start flash. */
  animation: rise-fade 0.9s 0.16s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

@keyframes rise-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* The selection highlight Finder draws behind a selected icon: a translucent
   rounded rect, inset a little on every side rather than hugging the artwork.
   It lives on a wrapper, not the img, so the icon's blue glow keeps shadowing
   the artwork's own silhouette instead of this rectangle. */
.finder-icon {
  display: block;
  padding: calc(var(--icon) * 0.055);
  border-radius: calc(var(--icon) * 0.15);
  transition: background 0.15s ease;
}
.finder-item:hover .finder-icon {
  background: rgba(255, 255, 255, 0.14);
}

.hero-icon {
  display: block;
  width: var(--icon);
  height: var(--icon);
  border-radius: calc(var(--icon) * 0.224);
  filter: drop-shadow(0 22px 50px rgba(26, 146, 255, 0.45));
}

.finder-label {
  /* Matched to a real Finder icon label rather than eyeballed.

     Ratio: Finder's own defaults (com.apple.finder IconViewSettings and
     DesktopViewSettings) pair iconSize 64 with textSize 12 — so the label is
     0.1875 of the icon, at every icon size.

     Weight and tracking: Finder draws that label at 12px, where SF resolves
     to the *Text* optical cut. Scaling to ~22px here crosses SF's ~20px
     boundary into the *Display* cut, which is 7.1% lighter and 8.4% narrower
     per em — which is exactly why a straight 400 looked too thin. Measured
     against 12px/400 by ink coverage per em², weight 440 with 0.035em
     tracking reproduces the Text cut's colour and width to within 0.3%.

     Shipping at 590 rather than that matched 440: deliberate. This label is
     hero-scale white on a near-black ground, where the surrounding halation
     thins strokes optically, and it has to hold its own against a 92px
     headline directly beneath it. 440 is the fidelity number; keep it if this
     ever moves onto a light background or shrinks toward Finder's own size. */
  font-family: var(--font);
  font-size: calc(var(--icon) * 0.1875);
  font-weight: 590;
  line-height: 1.3;
  letter-spacing: 0.035em;
  color: #fff;
  /* Wide enough that "Flight Deck.app" stays on one line; Finder wraps a long
     name to the cell width, but a wrapped product name reads as a mistake. */
  max-width: calc(var(--icon) * 2.4);
  padding: calc(var(--icon) * 0.013) calc(var(--icon) * 0.055);
  border-radius: calc(var(--icon) * 0.036);
  text-align: center;
  /* Finder shadows desktop labels for legibility over the wallpaper — subtle,
     not the heavy drop it had before. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  transition: background 0.15s ease, color 0.15s ease, text-shadow 0.15s ease;
}
.finder-item:hover .finder-label {
  background: var(--accent);
  color: #fff;
  text-shadow: none;
}

/* The selection flash the launch fires just before the window zooms out of the
   icon — the same state hover shows, but snapped on rather than eased, because
   this one is a click landing, not a pointer arriving. */
.finder-item.selected .finder-icon {
  background: rgba(255, 255, 255, 0.14);
}
.finder-item.selected .finder-label {
  background: var(--accent);
  color: #fff;
  text-shadow: none;
}
.finder-item.selected .finder-icon,
.finder-item.selected .finder-label { transition-duration: 80ms; }

h1 {
  margin: 0 0 20px;
  /* One line at every width. The vw term and cap are checked against the
     measured text width in both SF Pro Display and the Arial/Helvetica
     fallback non-Apple platforms get — the fallback sets this string ~8%
     wider, and still clears the gutters from 320px up. */
  white-space: nowrap;
  font-size: clamp(24px, 7.4vw, 92px);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -0.035em;
  animation: rise 0.9s 0.1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
h1 .grad {
  background: linear-gradient(120deg, var(--glow-cyan) 10%, var(--glow-blue) 60%, var(--glow-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  max-width: 660px;
  margin: 0 auto 34px;
  font-size: clamp(17px, 2.1vw, 21px);
  line-height: 1.5;
  color: var(--fg-secondary);
  animation: rise 0.9s 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* Status glyphs set inline in prose — the same shapes and tints the sidebar
   uses, sized off the surrounding text rather than a fixed pixel size, so
   they scale with the hero's clamp(). Both are decorative: the words they
   precede already carry the meaning, so they stay out of the a11y tree. */
.inline-glyph {
  width: 0.92em;
  height: 0.92em;
  vertical-align: -0.13em;
  margin-right: 0.14em;
}
.hero-sub .spinner {
  --sp: 0.92em;
  display: inline-block;
  vertical-align: -0.13em;
  margin-right: 0.16em;
}

.hero-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  animation: rise 0.9s 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.hero-note {
  margin-top: 16px;
  font-size: 13px;
  color: var(--fg-tertiary);
  animation: rise 0.9s 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .finder-item, h1, .hero-sub, .hero-cta, .hero-note { animation: none; }
}

/* ==========================================================================
   The scroll-scrubbed demo — spans hero into the body
   ========================================================================== */

.demo {
  position: relative;
  z-index: 2;
  padding: 40px 20px 24px;
}

/* How far the demo holds at the top before releasing. Must be height inside
   .demo's content box, not padding on it: a sticky box is constrained to its
   containing block's content box, so padding-bottom here reads as zero travel
   and the pin silently never happens. */
.demo-track { height: 160px; }

.demo-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  /* Pins the moment the window reaches its landing offset — the same 76px the
     launch lands it at — so the demo holds still while you scroll past it. */
  position: sticky;
  top: 76px;
}

/* The demo is hidden until the app "launches" out of the travelling icon.
   Scoped under html.js — set by demo.js on startup — so that if the script
   never runs, the demo is simply visible rather than invisible forever. */
html.js .window { opacity: 0; }
html.js .demo-caption,
html.js .demo-rail {
  opacity: 0;
  transition: opacity 380ms ease 300ms;
}
html.js .demo.launched .demo-caption,
html.js .demo.launched .demo-rail { opacity: 1; }

/* "See what it does" reveals the demo outright, so the caption and rail come
   up with the window rather than trailing it — the staggered delay exists to
   let the zoom finish first, and there is no zoom on this path. */
html.js .demo.instant .demo-caption,
html.js .demo.instant .demo-rail { transition: opacity 10ms linear; }

/* The icon dissolves as the window grows out of it. */
html.js .finder-item { transition: opacity 260ms ease-out; }
html.js .finder-item.opened { opacity: 0; pointer-events: none; }

/* Caption above the window narrates the beat */
.demo-caption {
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
}
.demo-caption p {
  margin: 0;
  font-size: 15.5px;
  color: var(--fg-secondary);
  max-width: 640px;
  transition: opacity 0.32s ease, transform 0.32s ease;
}
.demo-caption p strong { color: var(--fg); font-weight: 600; }
.demo-caption p.swap { opacity: 0; transform: translateY(6px); }

/* Beat rail. The active pip doubles as the dwell timer: its fill runs the
   length of the beat, so the advance is predictable rather than abrupt. */
.demo-rail {
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
}
.demo-rail button {
  position: relative;
  width: 30px; height: 4px;
  padding: 0;
  border: none;
  border-radius: 980px;
  background: var(--hairline);
  cursor: pointer;
  overflow: hidden;
  transition: background 0.3s ease, width 0.3s ease;
}
.demo-rail button:hover { background: #2b3a5c; }
.demo-rail button[aria-current="true"] {
  width: 44px;
  background: rgba(79, 227, 255, 0.2);
}
.pip-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  border-radius: 980px;
  background: var(--glow-cyan);
  box-shadow: 0 0 12px rgba(79, 227, 255, 0.6);
}
@keyframes pip { from { width: 0; } to { width: 100%; } }

/* ==========================================================================
   The app window replica
   ========================================================================== */

.window {
  width: min(1000px, calc(100vw - 40px));
  height: min(620px, 74vh);
  min-height: 420px;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-panel);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow:
    0 60px 130px -30px rgba(0, 0, 0, 0.9),
    0 30px 60px -20px rgba(10, 30, 70, 0.7),
    0 0 0 1px rgba(0, 0, 0, 0.5);
}

/* --- Title bar (unified, as macOS draws it over a split view) ------------- */
.titlebar {
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 13px;
  background: linear-gradient(180deg, #202b40 0%, #1a2437 100%);
  border-bottom: 1px solid #0a0f1a;
  flex: none;
  position: relative;
}
.lights { display: flex; gap: 8px; }
.light {
  width: 12px; height: 12px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.28);
}
.light.r { background: #ff5f57; }
.light.y { background: #febc2e; }
.light.g { background: #28c840; }

.titlebar-title {
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 590;
  color: #b9c6dc;
  pointer-events: none;
  letter-spacing: -0.005em;
}

/* --- Split view ---------------------------------------------------------- */
.split { display: flex; flex: 1; min-height: 0; }

/* --- Sidebar ------------------------------------------------------------- */
.sidebar {
  width: 240px;
  flex: none;
  display: flex;
  flex-direction: column;
  /* NSVisualEffectView .sidebar material, over a dark window */
  background: rgba(28, 38, 58, 0.82);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border-right: 1px solid #0a0f1a;
  min-height: 0;
}

.sidebar-list {
  flex: 1;
  overflow: hidden;
  padding: 8px 0 4px;
  min-height: 0;
}

/* Rows share geometry with the app: 4px gap, ~22px row, 10px side inset */
.row {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  margin: 1px 9px;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--fg);
  cursor: default;
  position: relative;
  transition: background 0.12s ease-out;
}
/* Status glyph LEADS the title, in a reserved 16px slot (SessionRow's
   ZStack + Color.clear), so every title starts at the same x whether or not a
   glyph is showing. */
.row-session { padding-left: 24px; }
.row-session .slot {
  width: 16px;
  flex: none;
  display: flex;
  align-items: center;
}
.row-session:hover { background: rgba(255, 255, 255, 0.06); }

.row-session.selected {
  /* The terminal holds first responder nearly always, so the table is not
     emphasized and a selected row is the unemphasized GRAY fill, not accent
     (see ProjectHeaderRow.isEmphasized). */
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}
.row-session.selected .row-title { color: #fff; }

.row-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

/* Project header: chevron + semibold subheadline in secondary */
.row-project {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-secondary);
  letter-spacing: -0.005em;
  margin-top: 5px;
}
.row-project .chev {
  width: 12px; height: 12px;
  flex: none;
  color: var(--fg-tertiary);
  transition: transform 0.12s ease-out;
  transform: rotate(90deg);
}
.row-project.collapsed .chev { transform: rotate(0deg); }
.row-project .proj-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row-project .count {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--fg-secondary);
  margin-left: auto;
  padding-right: 2px;
}

/* Trailing status cluster */
.row .trail {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
}
.row-project .trail { margin-left: 0; }

/* SubagentCount: caption2, monospaced digits, tinted, at the trailing edge */
.subcount {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  line-height: 1;
}

/* Status glyphs (SF Symbol shapes, drawn as SVG) */
.glyph { width: 11px; height: 11px; flex: none; display: block; }
/* Read idle is .primary at 10% — the sidebar's resting state, deliberately
   near-invisible. The hero's inline glyph reuses this class, so only the
   sidebar rows get the faint version. */
.glyph-idle    { color: var(--fg-secondary); opacity: 0.8; }
.row .glyph-idle { color: #fff; opacity: 0.1; }
.glyph-unread  { color: var(--accent); opacity: 1; }
.glyph-waiting { color: var(--orange); }
.glyph-shell   { color: var(--green); }
/* BackgroundWorkBadge: a decoration beside the title, not a state of its own */
.glyph-bg { color: var(--green); width: 11px; height: 11px; flex: none; }

/* The macOS indeterminate spinner, for .busy. Every dimension derives from
   --sp so the same spoke geometry can be reused at text size in prose. */
.spinner {
  --sp: 12px;
  width: var(--sp); height: var(--sp);
  flex: none;
  position: relative;
  animation: spin-step 0.8s steps(8) infinite;
}
.spinner i {
  position: absolute;
  left: 50%; top: 50%;
  width: calc(var(--sp) * 0.1417);
  height: calc(var(--sp) * 0.3);
  margin: calc(var(--sp) * -0.45) 0 0 calc(var(--sp) * -0.0708);
  border-radius: 980px;
  background: var(--fg-secondary);
  transform-origin: 50% calc(var(--sp) * 0.45);
}
@keyframes spin-step { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }

/* Conflict marker */
.glyph-conflict { color: var(--fg-secondary); width: 13px; height: 13px; }

/* Hover-revealed close button — absent until hover, exactly as the app does it */
.row .close {
  display: none;
  width: 13px; height: 13px;
  color: var(--fg-secondary);
  flex: none;
}
.row:hover .close { display: block; }
.row-session.selected:hover .close { color: rgba(255, 255, 255, 0.9); }

.row-empty {
  padding-left: 30px;
  font-size: 12px;
  color: var(--fg-tertiary);
  height: 22px;
  display: flex;
  align-items: center;
  margin: 1px 9px;
}

/* safeAreaInset(.bottom) button */
.sidebar-foot {
  flex: none;
  padding: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.35);
}
.sidebar-foot .new-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 4px 6px;
  border: none;
  background: none;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  color: var(--fg);
  cursor: pointer;
  transition: background 0.12s ease;
}
.sidebar-foot .new-btn:hover { background: rgba(255, 255, 255, 0.07); }
.sidebar-foot .new-btn .kbd {
  margin-left: auto;
  color: var(--fg-secondary);
  font-size: 12px;
}
.sidebar-foot .new-btn svg { width: 12px; height: 12px; }

/* --- Terminal pane -------------------------------------------------------
   Claude Code as it actually draws itself, measured off a live `claude`
   (2.1.289) in tmux: ⏺ message and tool bullets, the ⎿ result gutter, the ✶
   spinner row, the ─ ruled composer, the ╌ ruled permission dialog. Colours are
   Claude's own dark-theme palette, not the site's. */
.terminal {
  --t-fg:     #f2f2f2;
  --t-sub:    #949494;   /* results, hints, stats */
  --t-rule:   #808080;   /* composer rules */
  --t-claude: #d77757;   /* spinner */
  --t-ok:     #4eba65;   /* finished tool bullet */
  --t-err:    #ff6b80;   /* failed tool bullet */
  --t-perm:   #b1b9f9;   /* permission dialog + inline code */
  --t-mode:   #afafff;   /* "accept edits on" */
  --t-shell:  #00d7d7;   /* "1 shell" */
  --t-user:   #373737;   /* submitted prompt block */
  flex: 1;
  min-width: 0;
  background: var(--bg-inset);
  padding: 12px 16px 10px;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.42;
  color: var(--t-fg);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
/* Lines are block elements, so the newlines *between* them in the source must
   collapse — otherwise every line renders double-spaced. Leading indentation
   inside a line is preserved by pre-wrap on the line itself. */
.term-body { white-space: normal; word-break: break-word; }
.term-body .l,
.term-foot .l {
  display: block;
  white-space: pre-wrap;
  min-height: 1.42em;
}
/* A wrapped message line hangs under its text, not under the bullet */
.l.hang { padding-left: 2ch; text-indent: -2ch; }

.t-sub    { color: var(--t-sub); }
.t-b      { font-weight: 700; }
.t-code   { color: var(--t-perm); }
.t-claude { color: var(--t-claude); }

/* ⏺ — white for the model's own words, then grey while a tool runs, green when
   it succeeded, pink when it failed */
.b-msg  { color: #fff; }
.b-run  { color: var(--t-sub); }
.b-ok   { color: var(--t-ok); }
.b-err  { color: var(--t-err); }
.t-err  { color: var(--t-err); }

/* The submitted prompt: a full-width grey block, ❯ in grey, text in white */
.l.user {
  background: var(--t-user);
  color: #fff;
  margin-bottom: 1.42em;
}
.l.user .t-sub { user-select: none; }

/* Diff: gutter number + sign, whole-line tint, as Update(...) prints it */
.l.df { white-space: pre; overflow: hidden; }
.l.df.ctx .g { color: #6b6b6b; }
.l.df.add { background: #225c2b; }
.l.df.del { background: #7a2936; }
.l.df.add .g { color: #4eba65; }
.l.df.del .g { color: #ff6b80; }
.k { color: #f92672; }   /* keyword */
.n { color: #66d9ef; }   /* storage / type */
.f { color: #a6e22e; }   /* function */
.v { color: #ae81ff; }   /* number */

/* ✶ Cogitating… (38s · ↓ 2.1k tokens) */
.spin-row { margin-top: 1.42em; }
.spin-row .glyph-s { color: var(--t-claude); display: inline-block; width: 2ch; }
.spin-row .verb { color: var(--t-claude); }
.spin-row .stat { color: var(--t-sub); }
.term-hint { color: var(--t-sub); }

/* Composer: ruled top and bottom, ❯ prompt between */
.term-foot { margin-top: 1.42em; }
.rule {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  color: var(--t-rule);
  line-height: 1.2;
  user-select: none;
}
.prompt { display: flex; align-items: center; color: var(--t-sub); }
.prompt .marker { margin-right: 1ch; }
.caret {
  display: inline-block;
  width: 1ch;
  height: 1.15em;
  background: var(--t-fg);
  animation: blink 1.1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .caret { animation: none; } }

.mode-row { color: var(--t-sub); margin-top: 1px; }
.mode-row .mode { color: var(--t-mode); }
.mode-row .shell { color: var(--t-shell); }

/* Permission dialog: replaces the composer, ruled in its own blue */
.dialog .rule     { color: var(--t-perm); }
.dialog .dash     { color: #4e4e4e; }
.dialog .title    { color: var(--t-perm); font-weight: 700; }
.dialog .opt-sel  { color: var(--t-perm); }

@media (max-width: 760px) {
  .sidebar { width: 190px; }
  .terminal { font-size: 10.5px; padding: 11px 12px 9px; }
}
@media (max-width: 560px) {
  .split { flex-direction: column; }
  .sidebar { width: 100%; height: 230px; border-right: none; border-bottom: 1px solid #0a0f1a; }
  .window { height: min(600px, 78vh); }
}

/* ==========================================================================
   Sections
   ========================================================================== */

.section { position: relative; z-index: 1; padding: 104px 0; }
.section-tight { padding: 72px 0; }

.section-head { max-width: 720px; margin: 0 auto 64px; text-align: center; }
.section-head .kicker {
  display: block;
  font-size: 12.5px;
  font-weight: 680;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--glow-cyan);
  margin-bottom: 14px;
}
.section-head h2 {
  margin: 0 0 16px;
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 700;
}
.section-head p {
  margin: 0;
  font-size: 18px;
  color: var(--fg-secondary);
  line-height: 1.55;
}

.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline), transparent);
  border: 0;
  margin: 0;
}

/* ==========================================================================
   Foundation strip
   ========================================================================== */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 20px;
}
.card {
  background: linear-gradient(180deg, rgba(20, 30, 50, 0.6), rgba(13, 20, 36, 0.45));
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius);
  padding: 26px 24px;
}
.card .ico {
  width: 34px; height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  margin-bottom: 15px;
  background: rgba(79, 227, 255, 0.11);
  border: 1px solid rgba(79, 227, 255, 0.2);
  color: var(--glow-cyan);
}
.card .ico svg { width: 17px; height: 17px; }
.card h3 {
  margin: 0 0 7px;
  font-size: 16.5px;
  font-weight: 620;
  letter-spacing: -0.015em;
}
.card p {
  margin: 0;
  font-size: 14.5px;
  color: var(--fg-secondary);
  line-height: 1.55;
}

/* ==========================================================================
   Status / honesty band
   ========================================================================== */

.status-band {
  background: linear-gradient(180deg, rgba(255, 159, 10, 0.055), transparent 70%);
  border-top: 1px solid var(--hairline-soft);
  border-bottom: 1px solid var(--hairline-soft);
}
.status-inner {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  max-width: 780px;
  margin: 0 auto;
  padding: 46px 0;
}
.status-inner .ico {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(255, 159, 10, 0.12);
  border: 1px solid rgba(255, 159, 10, 0.26);
  color: var(--orange);
}
.status-inner .ico svg { width: 19px; height: 19px; }
.status-inner h3 { margin: 0 0 9px; font-size: 19px; font-weight: 640; letter-spacing: -0.02em; }
.status-inner p { margin: 0 0 10px; font-size: 15.5px; color: var(--fg-secondary); line-height: 1.6; }
.status-inner p:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
  .status-inner { flex-direction: column; gap: 16px; padding: 36px 0; }
}

/* ==========================================================================
   Download CTA
   ========================================================================== */

.cta { text-align: center; position: relative; z-index: 1; padding: 110px 0; }
.cta-glow {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 700px; height: 400px;
  max-width: 100%;
  background: radial-gradient(closest-side, rgba(26, 146, 255, 0.20), transparent);
  pointer-events: none;
}
.cta h2 {
  position: relative;
  margin: 0 0 16px;
  font-size: clamp(30px, 4.6vw, 50px);
  letter-spacing: -0.032em;
  line-height: 1.1;
  font-weight: 700;
}
.cta p {
  position: relative;
  margin: 0 auto 32px;
  max-width: 540px;
  font-size: 17.5px;
  color: var(--fg-secondary);
}
.cta-meta {
  position: relative;
  margin-top: 20px;
  font-size: 13px;
  color: var(--fg-tertiary);
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}
.cta-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--fg-tertiary); }

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  border-top: 1px solid var(--hairline-soft);
  padding: 40px 0;
  position: relative;
  z-index: 1;
}
.footer-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--fg-tertiary);
}
.footer-inner img { width: 22px; height: 22px; border-radius: 6px; }
.footer-links { margin-left: auto; display: flex; gap: 22px; }
.footer-links a { color: var(--fg-secondary); }

/* ==========================================================================
   Scroll-reveal
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Skip link */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--bg-panel);
  color: var(--fg);
  padding: 10px 16px;
  border-radius: 8px;
  z-index: 100;
}

.skip:focus { left: 12px; top: 12px; }

/* ==========================================================================
   Hero "blocked" state carousel — appended by status-carousel.js, which
   also owns the width/height it sets inline. Rules only, no colours: the
   glyphs reuse .glyph-idle/.glyph-unread/.glyph-waiting/.glyph-shell/
   .glyph-conflict above so a state can never drift from the sidebar's tint.

   The slot is the last thing before the sentence's full stop, so nothing
   sits after it to jitter — its width shrink-wraps the current word instead
   of being pinned to the widest state, and that width is itself animated
   (JS drives the px value; width doesn't transition from auto) so the full
   stop slides with it instead of snapping. */

.status-carousel-viewport {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: -0.24em;
  /* Less than .hero-sub's line-height (1.5) on purpose — an inline-block
     this tall doesn't stretch the line box, it just clips inside it. */
  height: 1.15em;
  line-height: 1.15em;
  transition: width 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.status-carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  transition: transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1),
              opacity 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.status-carousel-item.is-entering { transform: translateY(100%); opacity: 0; }
.status-carousel-item.is-current  { transform: translateY(0);    opacity: 1; }
.status-carousel-item.is-leaving  { transform: translateY(-100%); opacity: 0; }

/* Screen-reader equivalent for the animated (aria-hidden) slot above. Fixed
   on the starting word rather than kept in sync with the rotation — an
   aria-live region here would re-announce a new word at every interval,
   which is noise, not information. */
.status-carousel-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* person.2.fill's own artwork sits smaller inside its 16-unit viewBox than
   the circle/questionmark/terminal paths do, so at a shared box size it
   reads as undersized next to them — the same cause the sidebar works
   around by bumping .glyph-conflict to 13px against .glyph's 11px (see
   demo.js's GLYPH.conflict/styles.css .glyph-conflict). Same fix, scoped to
   this slot: bump by that same ~1.18x ratio rather than touch demo.js. */
.status-carousel-item .glyph-conflict {
  width: 1.08em;
  height: 1.08em;
}

/* ==========================================================================
   Product shots — one per highlight, shown on the features stage (or in
   its dialog on narrow screens). Each panel's rules are scoped under
   .fviz-NN; panels are drawn for a 1000px stage and zoomed to fit.
   ========================================================================== */

.fviz { margin: 0; }

/* ==========================================================================
   Feature 01 — "Run a fleet, not a tab"
   The deck window (sidebar of projects + sessions) under the ⌘K scrim, the
   search card centred over the whole window as SearchPanel places it, and a
   `flightdeck ls` shell showing which agent drives each session.
   Reuses the site's .row / .glyph / .spinner classes so the sidebar is
   pixel-identical to the hero demo.
   ========================================================================== */

.fviz-01 {
  /* Claude Code's own dark palette (same values as .terminal in styles.css) */
  --t-fg:     #f2f2f2;
  --t-sub:    #949494;
  --t-claude: #d77757;
  --t-ok:     #4eba65;
  --t-user:   #373737;
  --fv-win-h: 322px;
}

.fviz-01 .fv-stage {
  position: relative;
  height: 398px;
  overflow: hidden;
  /* the window is wider than the card and cropped at the right, like a product shot */
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}

/* --- Window ------------------------------------------------------------- */
.fviz-01 .fv-win {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(100% + 200px);
  height: var(--fv-win-h);
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-panel);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 0, 0, 0.5);
}

.fviz-01 .fv-titlebar {
  flex: none;
  height: 32px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  position: relative;
  background: linear-gradient(180deg, #202b40 0%, #1a2437 100%);
  border-bottom: 1px solid #0a0f1a;
}
.fviz-01 .fv-lights { display: flex; gap: 8px; }
.fviz-01 .fv-lights i {
  width: 12px; height: 12px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.28);
}
.fviz-01 .fv-lights .r { background: #ff5f57; }
.fviz-01 .fv-lights .y { background: #febc2e; }
.fviz-01 .fv-lights .g { background: #28c840; }
/* centred on the visible crop, not the full (cropped) window width */
.fviz-01 .fv-wintitle {
  position: absolute;
  left: 0;
  width: calc(100% - 200px);
  text-align: center;
  font-size: 12.5px;
  font-weight: 590;
  color: #b9c6dc;
  letter-spacing: -0.005em;
}

.fviz-01 .fv-split { flex: 1; min-height: 0; display: flex; }

.fviz-01 .fv-side {
  width: 236px;
  flex: none;
  padding: 7px 0 4px;
  overflow: hidden;
  background: rgba(28, 38, 58, 0.82);
  border-right: 1px solid #0a0f1a;
}
.fviz-01 .fv-side .row-project:first-child { margin-top: 0; }

/* The selected tab's terminal, mostly hidden behind the card */
.fviz-01 .fv-term {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 12px 16px 14px;
  background: var(--bg-inset);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--t-fg);
  overflow: hidden;
}
.fviz-01 .fv-term .l { display: block; white-space: pre; }
.fviz-01 .fv-term .l.user {
  background: var(--t-user);
  color: #fff;
  margin-bottom: 1.45em;
  padding-right: 1ch;
  align-self: stretch;
}
.fviz-01 .fv-term .spin { margin-top: 1.45em; }
.fviz-01 .t-dim    { color: var(--t-sub); }
.fviz-01 .b-ok     { color: var(--t-ok); }
.fviz-01 .b-run    { color: var(--t-sub); }
.fviz-01 .t-claude { color: var(--t-claude); }

/* SearchOverlayRoot: Color.black.opacity(0.34) over the whole window */
.fviz-01 .fv-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.34);
}

/* --- ⌘K card ------------------------------------------------------------
   SearchOverlayView: 680pt wide (scaled), .regularMaterial, 12pt radius,
   field at 19pt, 46pt rows, top pinned at 18% of the window's height. */
.fviz-01 .fv-search {
  position: absolute;
  z-index: 2;
  top: calc(var(--fv-win-h) * 0.18);
  /* centre of the full (uncropped) window */
  left: calc((100% + 200px) / 2);
  transform: translateX(-50%);
  width: min(560px, calc(100% - 40px));
  border-radius: 12px;
  background: rgba(44, 52, 70, 0.80);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 12px 30px rgba(0, 0, 0, 0.55),
    0 30px 70px -20px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

.fviz-01 .fv-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.fviz-01 .fv-mag   { width: 17px; height: 17px; color: var(--fg-secondary); flex: none; }
.fviz-01 .fv-clear { width: 15px; height: 15px; color: var(--fg-tertiary); flex: none; margin-left: auto; }
.fviz-01 .fv-query {
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--fg);
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.fviz-01 .fv-caret {
  display: inline-block;
  width: 2px;
  height: 21px;
  margin-left: 1px;
  border-radius: 1px;
  background: var(--accent);
  animation: fv01-blink 1.1s steps(2) infinite;
}
@keyframes fv01-blink { 50% { opacity: 0; } }

/* One result: icon, heading + project + agent glyph, two-line detail, recency */
.fviz-01 .fv-res {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  height: 46px;
  padding: 6px 16px;
  overflow: hidden;
}
.fviz-01 .fv-res.sel { background: rgba(10, 132, 255, 0.22); }
.fviz-01 .fv-res-extra { display: none; }

.fviz-01 .fv-kind {
  width: 13px; height: 13px;
  flex: none;
  margin: 2px 1px 0 2px;
  color: var(--fg-tertiary);
}
.fviz-01 .fv-res.sel .fv-kind { color: var(--fg); }

.fviz-01 .fv-res-body { flex: 1; min-width: 0; }
.fviz-01 .fv-res-head {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 17px;
  white-space: nowrap;
}
.fviz-01 .fv-res-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.006em;
}
/* highlightedRanges → .stronglyEmphasized */
.fviz-01 .fv-res-title b { font-weight: 800; color: #fff; }
.fviz-01 .fv-res-proj { font-size: 11px; color: var(--fg-secondary); }
.fviz-01 .fv-agent { width: 11px; height: 11px; flex: none; color: var(--fg-secondary); }

.fviz-01 .fv-res-detail {
  font-size: 11px;
  line-height: 1.3;
  color: var(--fg-secondary);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* SearchSnippet: the FTS5-marked words, emphasised in place */
.fviz-01 .fv-res-detail b { font-weight: 700; color: var(--fg); }

.fviz-01 .fv-res-when {
  flex: none;
  font-size: 10px;
  color: var(--fg-tertiary);
  padding-top: 3px;
  font-variant-numeric: tabular-nums;
}

/* --- `flightdeck ls` ----------------------------------------------------- */
.fviz-01 .fv-cli {
  position: absolute;
  z-index: 3;
  right: 28px;
  bottom: 0;
  padding: 10px 14px 11px;
  border-radius: 10px;
  background: rgba(6, 10, 17, 0.94);
  border: 1px solid var(--hairline);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.85);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.45;
  color: var(--t-fg);
}
.fviz-01 .fv-cli .l { display: block; white-space: pre; }
.fviz-01 .fv-cli .l:nth-child(2) { color: var(--t-sub); }
.fviz-01 .fv-cli em { font-style: normal; color: var(--glow-cyan); }

/* --- Narrower layouts ---------------------------------------------------- */

/* No room for the shell beside the card: drop it */
@media (max-width: 960px) {
  .fviz-01 .fv-stage { height: 340px; }
  .fviz-01 .fv-cli { display: none; }
  .fviz-01 .fv-res-extra { display: flex; }
}

/* Phone: the sidebar alone, with the card riding up over its lower half */
@media (max-width: 680px) {
  .fviz-01 { --fv-win-h: auto; }
  .fviz-01 .fv-stage {
    height: auto;
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
    padding-bottom: 2px;
  }
  .fviz-01 .fv-win { position: relative; width: 100%; height: auto; }
  .fviz-01 .fv-wintitle { width: 100%; font-size: 12px; }
  .fviz-01 .fv-side { width: 100%; border-right: none; padding-bottom: 96px; }
  .fviz-01 .fv-term { display: none; }
  .fviz-01 .fv-search {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: auto;
    margin: -88px 10px 0;
  }
  .fviz-01 .fv-field { padding: 10px 13px; }
  .fviz-01 .fv-query { font-size: 17px; }
  .fviz-01 .fv-res { height: auto; padding: 7px 13px; gap: 9px; }
  .fviz-01 .fv-res-detail { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .fviz-01 .fv-res-proj { overflow: hidden; text-overflow: ellipsis; }
  .fviz-01 .fv-res-head { min-width: 0; }
  .fviz-01 .fv-res-title { overflow: hidden; text-overflow: ellipsis; }
  .fviz-01 .fv-res-when { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fviz-01 .fv-caret { animation: none; }
  .fviz-01 .spinner { animation: none; }
}

/* ==========================================================================
   Feature 02 — "Know who needs you, without looking"
   Left: Mac sidebar rows (SessionSidebar.swift / SessionStatusIcon.swift) with
   their tooltips. Right: the iPhone companion's SessionTimelineScreen with a
   PromptCard up. Every selector is scoped under .fviz-02.
   ========================================================================== */

.fviz-02 {
  /* iOS dark system colours, as the phone draws them */
  --ios-bg:   #000;
  --ios-bg2:  #1c1c1e;   /* secondarySystemBackground — the card */
  --ios-bg3:  #2c2c2e;   /* tertiarySystemBackground — option rows */
  --ios-fg:   #fff;
  --ios-fg2:  rgba(235, 235, 245, 0.6);
  --ios-fg3:  rgba(235, 235, 245, 0.3);
  --wire-y0:  155px;      /* centre of the blocked row */
  --wire-y1:  188px;      /* the card's leading edge, on the phone */
}

.fviz-02 .fv-stage {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(40px, 1fr) 300px;
  align-items: start;
  height: 380px;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--hairline-soft);
  background:
    radial-gradient(120% 90% at 82% 70%, rgba(255, 159, 10, 0.07), transparent 55%),
    radial-gradient(90% 80% at 12% 10%, rgba(26, 146, 255, 0.08), transparent 60%),
    var(--bg-inset);
  padding: 22px 26px 0;
  font-family: var(--font);
}

/* ---------------------------------------------------------------- Mac --- */

.fviz-02 .fv-mac { display: flex; align-items: flex-start; margin-top: 52px; }

.fviz-02 .fv-side {
  width: 220px;
  flex: none;
  border-radius: 11px;
  overflow: hidden;
  /* NSVisualEffectView .sidebar material over a dark window, as the hero demo */
  background: rgba(28, 38, 58, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow:
    0 30px 60px -24px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(0, 0, 0, 0.5);
  padding-bottom: 8px;
}

.fviz-02 .fv-tbar {
  height: 30px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
}
.fviz-02 .fv-tbar i {
  width: 11px; height: 11px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.28);
}
.fviz-02 .fv-tbar .r { background: #ff5f57; }
.fviz-02 .fv-tbar .y { background: #febc2e; }
.fviz-02 .fv-tbar .g { background: #28c840; }

.fviz-02 .fv-list { padding: 4px 0 0; }

/* Row geometry shared with the hero demo: 4px gap, 24px row, 9px inset */
.fviz-02 .fv-row {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  margin: 1px 9px;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--fg);
  white-space: nowrap;
}
.fviz-02 .fv-sess { padding-left: 24px; }
.fviz-02 .fv-slot { width: 16px; flex: none; display: flex; align-items: center; }
.fviz-02 .fv-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.fviz-02 .fv-proj {
  font-weight: 600;
  color: var(--fg-secondary);
  letter-spacing: -0.005em;
}
.fviz-02 .fv-collapsed { margin-top: 6px; }
.fviz-02 .fv-chev {
  width: 12px; height: 12px;
  flex: none;
  color: var(--fg-tertiary);
  transform: rotate(90deg);
}
.fviz-02 .fv-collapsed .fv-chev { transform: none; }
.fviz-02 .fv-pname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fviz-02 .fv-count {
  font-size: 11px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--fg-secondary);
  padding-right: 2px;
}

/* SubagentCount: caption2, monospaced digits, tinted, trailing */
.fviz-02 .fv-sub {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  line-height: 1;
  padding-right: 2px;
}

/* The blocked row: an illustrative halo, not app chrome */
.fviz-02 .fv-blocked {
  background: rgba(255, 159, 10, 0.10);
  box-shadow: inset 0 0 0 1px rgba(255, 159, 10, 0.30);
  animation: fv02-halo 2.6s ease-in-out infinite;
}
@keyframes fv02-halo {
  50% { box-shadow: inset 0 0 0 1px rgba(255, 159, 10, 0.55), 0 0 14px rgba(255, 159, 10, 0.22); }
}

/* Glyphs: SF Symbol silhouettes at sidebar size, tints as the app's */
.fviz-02 .fv-g { width: 11px; height: 11px; flex: none; display: block; }
.fviz-02 .fv-g-idle   { color: #fff; opacity: 0.1; }
.fviz-02 .fv-g-unread { color: var(--accent); }
.fviz-02 .fv-g-wait   { color: var(--orange); }
.fviz-02 .fv-g-bg     { color: var(--green); }
/* PhonePresenceBadge: iphone.gen3, green, breathing */
.fviz-02 .fv-g-phone {
  color: var(--green);
  width: 12px; height: 12px;
  filter: drop-shadow(0 0 3px rgba(48, 209, 88, 0.6));
  animation: fv02-breathe 1.6s ease-in-out infinite alternate;
}
@keyframes fv02-breathe {
  from { opacity: 0.55; transform: scale(0.88); filter: drop-shadow(0 0 1px rgba(48, 209, 88, 0.25)); }
  to   { opacity: 1;    transform: scale(1);    filter: drop-shadow(0 0 4px rgba(48, 209, 88, 0.9)); }
}

/* The macOS indeterminate spinner (.mini), 8 tapered spokes */
.fviz-02 .fv-spin {
  --sp: 12px;
  width: var(--sp); height: var(--sp);
  flex: none;
  position: relative;
  animation: fv02-spin 0.8s steps(8) infinite;
}
.fviz-02 .fv-spin i {
  position: absolute;
  left: 50%; top: 50%;
  width: calc(var(--sp) * 0.1417);
  height: calc(var(--sp) * 0.3);
  margin: calc(var(--sp) * -0.45) 0 0 calc(var(--sp) * -0.0708);
  border-radius: 980px;
  background: var(--fg-secondary);
  transform-origin: 50% calc(var(--sp) * 0.45);
}
.fviz-02 .fv-spin i:nth-child(1) { transform: rotate(0deg);   opacity: 0.22; }
.fviz-02 .fv-spin i:nth-child(2) { transform: rotate(45deg);  opacity: 0.32; }
.fviz-02 .fv-spin i:nth-child(3) { transform: rotate(90deg);  opacity: 0.42; }
.fviz-02 .fv-spin i:nth-child(4) { transform: rotate(135deg); opacity: 0.52; }
.fviz-02 .fv-spin i:nth-child(5) { transform: rotate(180deg); opacity: 0.62; }
.fviz-02 .fv-spin i:nth-child(6) { transform: rotate(225deg); opacity: 0.72; }
.fviz-02 .fv-spin i:nth-child(7) { transform: rotate(270deg); opacity: 0.82; }
.fviz-02 .fv-spin i:nth-child(8) { transform: rotate(315deg); opacity: 0.92; }
@keyframes fv02-spin { to { transform: rotate(360deg); } }

/* Tooltip legend, one line per row, on the same 26px pitch */
.fviz-02 .fv-legend {
  list-style: none;
  margin: 0;
  /* tbar 30 + list pad 4 + project row 26 + 1px border */
  padding: 61px 0 0;
  width: 236px;
  flex: none;
}
.fviz-02 .fv-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 26px;
  font-size: 12px;
  color: var(--fg-tertiary);
  white-space: nowrap;
  letter-spacing: -0.003em;
}
.fviz-02 .fv-legend li[data-k="fold"] { margin-top: 6px; }
.fviz-02 .fv-lead {
  width: 14px;
  flex: none;
  border-top: 1px dotted var(--hairline);
}
.fviz-02 .fv-legend .fv-hot { color: var(--orange); font-weight: 560; }
.fviz-02 .fv-legend .fv-hot .fv-lead { border-top: 1px solid rgba(255, 159, 10, 0.55); }
.fviz-02 .fv-legend .fv-hot::after {
  content: "";
  flex: 1;
  border-top: 1px solid rgba(255, 159, 10, 0.55);
}

/* ------------------------------------------------------------ Connector --- */

.fviz-02 .fv-wire {
  display: block;
  width: 100%;
  margin-top: calc(var(--wire-y0) - 0.5px);
  height: calc(var(--wire-y1) - var(--wire-y0));
  overflow: visible;
}
.fviz-02 .fv-wire path { stroke-width: 1px; stroke-linecap: round; }
.fviz-02 .fv-wire-base { stroke: rgba(255, 159, 10, 0.55); }
.fviz-02 .fv-wire-flow {
  stroke: #ffc46b;
  stroke-dasharray: 3 14;
  animation: fv02-flow 1.4s linear infinite;
  filter: drop-shadow(0 0 2px rgba(255, 159, 10, 0.9));
}
@keyframes fv02-flow { to { stroke-dashoffset: -17; } }

/* --------------------------------------------------------------- iPhone --- */

.fviz-02 .fv-phone {
  width: 300px;
  height: 392px;
  padding: 9px 9px 0;
  border-radius: 46px 46px 0 0;
  background: linear-gradient(180deg, #2a2d33, #16181c 40%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 0 0 2.5px #0b0c0e,
    0 30px 70px -20px rgba(0, 0, 0, 0.9),
    0 0 60px -10px rgba(255, 159, 10, 0.10);
  -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent);
          mask-image: linear-gradient(180deg, #000 88%, transparent);
}
.fviz-02 .fv-screen {
  height: 100%;
  border-radius: 38px 38px 0 0;
  background: var(--ios-bg);
  color: var(--ios-fg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
}

.fviz-02 .fv-status {
  height: 38px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 24px 0 30px;
  position: relative;
}
.fviz-02 .fv-time { font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em; }
.fviz-02 .fv-island {
  position: absolute;
  left: 50%; top: 8px;
  width: 78px; height: 23px;
  margin-left: -39px;
  border-radius: 980px;
  background: #000;
  box-shadow: inset 0 0 0 1px #0c0c0c;
}
.fviz-02 .fv-sicons { display: flex; gap: 5px; align-items: center; color: #fff; }
.fviz-02 .fv-sicons svg { height: 9px; width: auto; fill: currentColor; }

.fviz-02 .fv-nav {
  height: 36px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.fviz-02 .fv-back {
  position: absolute;
  left: 12px; top: 3px;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.18);
}
.fviz-02 .fv-back svg { width: 13px; height: 13px; }
.fviz-02 .fv-navtitle { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }

/* The foot of the conversation: the activity row SessionTimelineScreen ends on */
.fviz-02 .fv-feed {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 14px 2px;
}
.fviz-02 .fv-waiting {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 0 4px;
  font-size: 10px;
  color: var(--orange);
}
.fviz-02 .fv-waiting svg { width: 11px; height: 11px; flex: none; }

/* PromptCard + CardChrome: 12pt padding, 12pt radius, orange 50% hairline */
.fviz-02 .fv-card {
  flex: none;
  margin: 0 12px 20px;
  padding: 9.5px;
  border-radius: 10px;
  background: var(--ios-bg2);
  box-shadow: inset 0 0 0 0.8px rgba(255, 159, 10, 0.5);
  display: flex;
  flex-direction: column;
  gap: 6.5px;
}
.fviz-02 .fv-chead { display: flex; align-items: center; gap: 6px; }
.fviz-02 .fv-circ { width: 16px; height: 16px; flex: none; color: var(--ios-fg2); }
.fviz-02 .fv-x { margin-left: auto; }
.fviz-02 .fv-hdr {
  font-size: 8.8px;
  font-weight: 600;
  color: var(--orange);
  letter-spacing: 0.01em;
}
.fviz-02 .fv-q {
  font-size: 12.3px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.008em;
}
.fviz-02 .fv-opt {
  display: flex;
  flex-direction: column;
  gap: 1.5px;
  padding: 6px 8px;
  border-radius: 6.5px;
  background: var(--ios-bg3);
}
.fviz-02 .fv-opt b { font-size: 10.2px; font-weight: 500; }
.fviz-02 .fv-opt span { font-size: 8.8px; line-height: 1.3; color: var(--ios-fg2); }
/* A finger about to land — illustrative only */
.fviz-02 .fv-tap { animation: fv02-tap 3.2s ease-in-out infinite; }
@keyframes fv02-tap {
  0%, 62%, 100% { background: var(--ios-bg3); }
  70%, 80%      { background: #3a3a3c; }
}

.fviz-02 .fv-typed {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 6.5px;
  background: var(--ios-bg3);
}
.fviz-02 .fv-ph {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: 10.2px;
  color: var(--ios-fg3);
}
.fviz-02 .fv-caret {
  width: 1.5px; height: 12px;
  margin-right: 2px;
  border-radius: 1px;
  background: var(--orange);
  animation: fv02-blink 1.1s steps(1) infinite;
}
@keyframes fv02-blink { 50% { opacity: 0; } }
/* arrow.up.circle.fill, secondary while the field is empty */
.fviz-02 .fv-send { width: 16px; height: 16px; flex: none; color: var(--ios-fg2); }

/* ---------------------------------------------------------- Responsive --- */

/* Narrower card: the legend gives way to the wire, then goes */
@media (max-width: 1020px) {
  .fviz-02 .fv-legend { width: auto; padding-right: 10px; }
  .fviz-02 .fv-legend .fv-hot::after { display: none; }
}
@media (max-width: 900px) {
  .fviz-02 .fv-legend { display: none; }
}

/* Phone width: stack, drop the legend and the wire */
@media (max-width: 680px) {
  .fviz-02 .fv-stage {
    grid-template-columns: 1fr;
    justify-items: center;
    height: auto;
    padding: 18px 14px 0;
    row-gap: 18px;
  }
  .fviz-02 .fv-wire { display: none; }
  .fviz-02 .fv-mac { margin-top: 0; }
  .fviz-02 .fv-side { width: min(260px, 100%); }
  .fviz-02 .fv-phone { width: min(290px, 100%); height: 376px; }
}

@media (prefers-reduced-motion: reduce) {
  .fviz-02 .fv-spin,
  .fviz-02 .fv-blocked,
  .fviz-02 .fv-g-phone,
  .fviz-02 .fv-wire-flow,
  .fviz-02 .fv-tap,
  .fviz-02 .fv-caret { animation: none; }
  .fviz-02 .fv-g-phone { opacity: 1; transform: none; }
}

/* ==========================================================================
   Feature 03 — "Close the lid without losing the fleet"
   This Mac's deck after a relaunch, the paired hosts and what each is running,
   and the selected session's terminal streaming `flightdeck run --on`.
   Every selector is scoped under .fviz-03. Reuses the site's .spinner markup.
   ========================================================================== */

.fviz-03 {
  /* Terminal palette: the same values the demo window's .terminal uses */
  --fv3-t-fg:   #f2f2f2;
  --fv3-t-sub:  #949494;
  --fv3-t-ok:   #4eba65;
  --fv3-row:    26px;
}

.fviz-03 .fv3-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 14px;
  align-items: stretch;
  font-family: var(--font);
  -webkit-user-select: none;
  user-select: none;
}

.fviz-03 .fv3-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* --- Cards: vibrancy-ish sidebar material, hairline edge ------------------ */
.fviz-03 .fv3-card {
  background: rgba(28, 38, 58, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
  min-width: 0;
}

.fviz-03 .fv3-head {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
  background: linear-gradient(180deg, rgba(32, 43, 64, 0.9), rgba(26, 36, 55, 0.9));
}
.fviz-03 .fv3-ico { width: 15px; height: 15px; color: var(--fg-secondary); flex: none; }
.fviz-03 .fv3-head-title {
  font-size: 12.5px;
  font-weight: 600;
  color: #b9c6dc;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.fviz-03 .fv3-head-cap {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--fg-tertiary);
  white-space: nowrap;
}

/* --- Sidebar rows: the demo window's geometry ---------------------------- */
.fviz-03 .fv3-list { padding: 4px 0 6px; }

.fviz-03 .fv3-row {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  margin: 1px 8px;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--fg);
  white-space: nowrap;
}
.fviz-03 .fv3-proj {
  font-weight: 600;
  color: var(--fg-secondary);
  margin-top: 3px;
}
.fviz-03 .fv3-chev {
  width: 12px; height: 12px;
  flex: none;
  color: var(--fg-tertiary);
  transform: rotate(90deg);
}
.fviz-03 .fv3-collapsed .fv3-chev { transform: none; }
.fviz-03 .fv3-name { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fviz-03 .fv3-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--fg-secondary);
  padding-right: 3px;
}
.fviz-03 .fv3-slot-r { display: flex; width: 12px; justify-content: center; }

.fviz-03 .fv3-sess { padding-left: 24px; }
.fviz-03 .fv3-sel { background: rgba(255, 255, 255, 0.15); color: #fff; }
.fviz-03 .fv3-slot { width: 16px; flex: none; display: flex; align-items: center; }
.fviz-03 .fv3-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fviz-03 .fv3-sub {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  line-height: 1;
  padding-right: 2px;
}

.fviz-03 .fv3-dot { width: 11px; height: 11px; flex: none; display: block; }
.fviz-03 .fv3-unread  { color: var(--accent); }
.fviz-03 .fv3-waiting { color: var(--orange); }
.fviz-03 .fv3-bg { width: 11px; height: 11px; flex: none; color: var(--green); margin-right: 1px; }
.fviz-03 .spinner { --sp: 11px; }

/* --- Paired Hosts: HostsSettingsTab's rows, plus each host's runs -------- */
.fviz-03 .fv3-hostlist { list-style: none; margin: 0; padding: 2px 0; }
.fviz-03 .fv3-host {
  padding: 7px 12px 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.fviz-03 .fv3-host:first-child { border-top: none; }

.fviz-03 .fv3-hline {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 18px;
  font-size: 13px;
  white-space: nowrap;
  min-width: 0;
}
.fviz-03 .fv3-led {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: none;
  background: #8e8e93;
}
.fviz-03 .fv3-on {
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(48, 209, 88, 0.14);
}
.fviz-03 .fv3-hname { color: var(--fg); }
.fviz-03 .fv3-plat,
.fviz-03 .fv3-cloud,
.fviz-03 .fv3-cost,
.fviz-03 .fv3-detail {
  font-size: 11px;
  color: var(--fg-secondary);
}
.fviz-03 .fv3-cloud { display: inline-flex; align-items: center; gap: 3px; }
.fviz-03 .fv3-cloud svg { width: 12px; height: 12px; }
.fviz-03 .fv3-cost { font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fviz-03 .fv3-detail { margin-left: auto; padding-left: 6px; flex: none; }

.fviz-03 .fv3-run {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 5px 0 0 16px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-secondary);
  white-space: nowrap;
  min-width: 0;
}
.fviz-03 .fv3-run .spinner { --sp: 10px; }
.fviz-03 .fv3-ok { width: 11px; height: 11px; flex: none; color: var(--green); }
.fviz-03 .fv3-rid { color: var(--glow-cyan); flex: none; }
.fviz-03 .fv3-cmd { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fviz-03 .fv3-exit { color: var(--fg-tertiary); margin-left: auto; flex: none; }

/* --- Terminal window ------------------------------------------------------ */
.fviz-03 .fv3-term {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-inset);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow:
    0 40px 80px -30px rgba(0, 0, 0, 0.9),
    0 20px 40px -20px rgba(10, 30, 70, 0.7),
    0 0 0 1px rgba(0, 0, 0, 0.5);
}
.fviz-03 .fv3-tbar {
  position: relative;
  display: flex;
  align-items: center;
  height: 34px;
  padding: 0 12px;
  flex: none;
  background: linear-gradient(180deg, #202b40 0%, #1a2437 100%);
  border-bottom: 1px solid #0a0f1a;
}
.fviz-03 .fv3-lights { display: flex; gap: 7px; }
.fviz-03 .fv3-lights i {
  width: 11px; height: 11px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.28);
  background: #ff5f57;
}
.fviz-03 .fv3-lights i:nth-child(2) { background: #febc2e; }
.fviz-03 .fv3-lights i:nth-child(3) { background: #28c840; }
.fviz-03 .fv3-ttitle {
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  font-size: 12.5px;
  font-weight: 590;
  color: #b9c6dc;
  letter-spacing: -0.005em;
  pointer-events: none;
}

.fviz-03 .fv3-tbody {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 12px 14px 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--fv3-t-fg);
  overflow: hidden;
  /* Long xcodebuild lines run off the right edge, as in a narrow pane */
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
.fviz-03 .fv3-l { display: block; white-space: pre; min-height: 1.5em; }
.fviz-03 .fv3-ps { color: var(--glow-cyan); }
.fviz-03 .fv3-dim { color: var(--fv3-t-sub); }
.fviz-03 .fv3-early { opacity: 0.55; }
.fviz-03 .fv3-pass { color: var(--fv3-t-ok); }
.fviz-03 .fv3-caret {
  display: inline-block;
  width: 1ch;
  height: 1.15em;
  margin-left: 1ch;
  vertical-align: -0.2em;
  background: var(--fv3-t-fg);
  animation: fv3-blink 1.1s steps(2) infinite;
}

/* Streaming: the run's lines arrive one after another, then the caret blinks */
.fviz-03 .fv3-s { animation: fv3-arrive 0.28s ease-out both; }
.fviz-03 .s1 { animation-delay: 0.4s; }
.fviz-03 .s2 { animation-delay: 0.9s; }
.fviz-03 .s3 { animation-delay: 1.3s; }
.fviz-03 .s4 { animation-delay: 2.3s; }
.fviz-03 .s5 { animation-delay: 2.7s; }
.fviz-03 .s6 { animation-delay: 3.6s; }
.fviz-03 .s7 { animation-delay: 4.0s; }

@keyframes fv3-arrive { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes fv3-blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .fviz-03 .fv3-s { animation: none; }
  .fviz-03 .fv3-caret { animation: none; }
  .fviz-03 .spinner { animation: none; }
}

/* --- Narrow ---------------------------------------------------------------- */
@media (max-width: 860px) {
  .fviz-03 .fv3-stage { grid-template-columns: 1fr; }
  .fviz-03 .fv3-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .fviz-03 .fv3-tbody { min-height: 200px; }
}
@media (max-width: 640px) {
  .fviz-03 .fv3-col { display: flex; }
  .fviz-03 .fv3-cost { display: none; }
  .fviz-03 .fv3-head-cap { display: none; }
  .fviz-03 .fv3-early,
  .fviz-03 .fv3-gap { display: none; }
  .fviz-03 .fv3-tbody { min-height: 0; font-size: 10px; padding: 10px 11px; }
  .fviz-03 .fv3-l { min-height: 1.5em; }
}
@media (max-width: 420px) {
  .fviz-03 .fv3-plat { display: none; }
}

/* ==========================================================================
   Feature panel 04 — Flight Control
   The plan being annotated, beside the run's control bar, departures board and
   agent rows. Colours are the app's Instrument palette (dark halves):
   phosphor #DBE6F7 on near-black glass, blue #7CBCFF, amber #FFB340.
   ========================================================================== */

.fviz-04 {
  --fc-ph:     #dbe6f7;
  --fc-ph2:    rgba(219, 230, 247, 0.66);
  --fc-ph3:    rgba(219, 230, 247, 0.40);
  --fc-blue:   #7cbcff;
  --fc-amber:  #ffb340;
  --fc-acc:    var(--accent);
  --fc-hole:   #161e30;
  --fc-sec:    rgba(235, 240, 250, 0.58);
  --fc-ter:    rgba(235, 240, 250, 0.34);
  --fc-line:   rgba(255, 255, 255, 0.07);
}

.fviz-04 .fc-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.fviz-04 svg { display: block; fill: currentColor; }

/* --- Window -------------------------------------------------------------- */
.fviz-04 .fc-win {
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-panel);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow:
    0 30px 70px -30px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(0, 0, 0, 0.5);
  font-family: var(--font);
  color: var(--fg);
  font-size: 12px;
  line-height: 1.35;
  -webkit-user-select: none;
  user-select: none;
}

.fviz-04 .fc-titlebar {
  position: relative;
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  background: linear-gradient(180deg, #202b40 0%, #1a2437 100%);
  border-bottom: 1px solid #0a0f1a;
}
.fviz-04 .fc-lights { display: flex; gap: 7px; }
.fviz-04 .fc-lights i {
  width: 11px; height: 11px; border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.28);
}
.fviz-04 .fc-lights i:nth-child(1) { background: #ff5f57; }
.fviz-04 .fc-lights i:nth-child(2) { background: #febc2e; }
.fviz-04 .fc-lights i:nth-child(3) { background: #28c840; }
.fviz-04 .fc-title {
  position: absolute; left: 0; right: 0;
  display: flex; justify-content: center; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 590; color: #b9c6dc;
  pointer-events: none;
  white-space: nowrap;
}
.fviz-04 .fc-pill {
  font-size: 10.5px; font-weight: 600;
  padding: 1px 8px; border-radius: 980px;
  color: var(--green);
  background: rgba(48, 209, 88, 0.12);
  border: 1px solid rgba(48, 209, 88, 0.3);
}

.fviz-04 .fc-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 484px;
}

/* --- Plan pane ----------------------------------------------------------- */
.fviz-04 .fc-plan {
  padding: 10px 12px 10px 12px;
  min-width: 0;
  overflow: hidden;
  display: flex; flex-direction: column;
}

.fviz-04 .fc-viewbar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.fviz-04 .fc-seg {
  display: inline-flex;
  padding: 1px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.06);
  font-size: 10.5px;
  white-space: nowrap;
}
.fviz-04 .fc-seg > * {
  padding: 2px 8px;
  border-radius: 5px;
  color: var(--fc-sec);
  font-weight: 500;
}
.fviz-04 .fc-seg > * + span { border-left: 1px solid rgba(255, 255, 255, 0.08); }
.fviz-04 .fc-seg b {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.35);
  font-weight: 600;
}
.fviz-04 .fc-editchip {
  font-size: 10.5px;
  white-space: nowrap;
  color: var(--green);
  background: rgba(48, 209, 88, 0.12);
  padding: 2px 9px;
  border-radius: 980px;
}
.fviz-04 .fc-editchip i { font-style: normal; color: var(--fc-ter); }
.fviz-04 .fc-editchip b { font-weight: 650; }

/* The document: a quiet well, a churn gutter on the leading edge */
.fviz-04 .fc-doc {
  position: relative;
  background: rgba(255, 255, 255, 0.035);
  border-radius: 6px;
  padding: 6px 12px 0 0;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}
.fviz-04 .fc-doc { --gut: 98px; }
.fviz-04 .fc-sec {
  position: relative;
  padding-left: var(--gut);
}
.fviz-04 .fc-churn {
  position: absolute;
  left: 0; top: 7px;
  width: 92px;
  display: flex; justify-content: flex-end; align-items: flex-end; gap: 6px;
  padding-right: 10px;
  font-size: 9.5px;
  color: var(--fc-ter);
  white-space: nowrap;
}
.fviz-04 .fc-bars { display: flex; gap: 2px; align-items: flex-end; height: 13px; }
.fviz-04 .fc-bars i {
  width: 4px;
  height: calc(13px * var(--h));
  min-height: 3px;
  border-radius: 1px;
  background: var(--fc-sec);
}
.fviz-04 .fc-bars i.z { height: 1.5px; min-height: 0; background: var(--fc-ter); margin-bottom: 0; }
.fviz-04 .fc-hot .fc-churn { color: var(--fc-amber); font-weight: 600; }
.fviz-04 .fc-hot .fc-bars i { background: var(--fc-amber); }
/* The hot section's rule down its length */
.fviz-04 .fc-hot::before {
  content: "";
  position: absolute;
  left: 88px; top: 24px; bottom: 6px;
  width: 2px; border-radius: 1px;
  background: var(--fc-amber);
  opacity: 0.85;
}

.fviz-04 .fc-doc h5 {
  margin: 0;
  padding-top: 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.fviz-04 .fc-doc p {
  margin: 4px 0 8px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #d5deec;
}
.fviz-04 .fc-doc code {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fc-ph);
  background: rgba(255, 255, 255, 0.07);
  padding: 0 3px;
  border-radius: 3px;
}

/* A note's band: the one system find-highlight yellow, at 0.3 */
.fviz-04 .fc-note {
  color: inherit;
  background: rgba(255, 233, 0, 0.26);
  border-radius: 2px;
  padding: 0 1px;
}
/* The live selection */
.fviz-04 .fc-sel {
  background: rgba(10, 132, 255, 0.42);
  color: #fff;
  border-radius: 1px;
}
/* The human's own insertion: green tint and the "you" bar */
.fviz-04 .fc-edited { position: relative; }
.fviz-04 .fc-edited ins {
  text-decoration: none;
  background: rgba(48, 209, 88, 0.16);
  color: #e4f7e8;
  border-radius: 2px;
}
.fviz-04 .fc-edited::before {
  content: "";
  position: absolute;
  left: -7px; top: 3px; bottom: 3px;
  width: 3px; border-radius: 1.5px;
  background: var(--green);
}

/* Selection toolbar: a floating panel over the selection */
.fviz-04 .fc-selp { position: relative; margin-top: 38px !important; }
.fviz-04 .fc-toolbar {
  position: absolute;
  left: calc(4px - var(--gut)); bottom: calc(100% + 6px);
  z-index: 2;
  display: flex; align-items: center; gap: 1px;
  padding: 3px;
  border-radius: 9px;
  background: rgba(43, 43, 43, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
  line-height: 1;
}
.fviz-04 .fc-ti {
  display: inline-flex; align-items: center; gap: 3px;
  height: 21px;
  padding: 0 5px;
  border-radius: 6px;
  font-size: 10px;
  color: var(--fg);
}
.fviz-04 .fc-ti svg { width: 11px; height: 11px; color: var(--fc-sec); }
.fviz-04 .fc-ti.fc-hover { background: rgba(255, 255, 255, 0.1); }
.fviz-04 .fc-tsep { width: 1px; height: 15px; margin: 0 2px; background: rgba(255, 255, 255, 0.12); }

.fviz-04 .fc-fade { opacity: 0.55; }
.fviz-04 .fc-doc::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 26px;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(180deg, rgba(21, 30, 48, 0), #151e30);
  pointer-events: none;
}

/* --- Run pane ------------------------------------------------------------ */
.fviz-04 .fc-run {
  padding: 10px 10px 10px;
  border-left: 1px solid #0a0f1a;
  background: rgba(255, 255, 255, 0.025);
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0;
}

/* Control bar: transport cluster + LCD */
.fviz-04 .fc-ctrl {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 7px;
  border-radius: 9px;
  background: linear-gradient(180deg, #2f2f2f, #2a2a2a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}
.fviz-04 .fc-cluster {
  flex: none;
  display: flex; align-items: center;
  padding: 3px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.24);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.08);
}
.fviz-04 .fc-key {
  position: relative;
  width: 19px; height: 24px;
  display: grid; place-items: center;
  border-radius: 6px;
  color: #ececec;
}
.fviz-04 .fc-key svg { width: 12px; height: 12px; }
.fviz-04 .fc-key.fc-wide svg { width: 14px; }
.fviz-04 .fc-default::after {
  content: "";
  position: absolute; bottom: 2px; left: 50%;
  width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%;
  background: var(--fc-acc);
}
.fviz-04 .fc-csep { width: 1px; height: 17px; margin: 0 3px; background: rgba(255, 255, 255, 0.1); }

.fviz-04 .fc-lcd {
  flex: 1; min-width: 0;
  display: flex; align-items: stretch;
  height: 38px;
  border-radius: 8px;
  background: linear-gradient(180deg, #121418, #0d0f12);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.07), 0 1px 1.5px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.fviz-04 .fc-cell {
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  padding: 0 7px;
  white-space: nowrap;
  color: var(--fc-ph);
}
.fviz-04 .fc-cell + .fc-cell { border-left: 1px solid rgba(255, 255, 255, 0.05); }
.fviz-04 .fc-cell b {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}
.fviz-04 .fc-cell small {
  display: flex; align-items: center; gap: 3px;
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(219, 230, 247, 0.45);
  line-height: 1;
}
.fviz-04 .fc-conv { flex-direction: row; align-items: center; gap: 7px; }
.fviz-04 .fc-cw { display: flex; flex-direction: column; gap: 3px; }
.fviz-04 .fc-conv small { color: var(--fc-ph); }
.fviz-04 .fc-conv small svg { width: 7px; height: 7px; fill: none; }
.fviz-04 .fc-spark { width: 36px; height: 20px; overflow: visible; }
.fviz-04 .fc-spark path { fill: none; vector-effect: non-scaling-stroke; }
.fviz-04 .fc-spark .fl { stroke: rgba(219, 230, 247, 0.28); stroke-width: 1; stroke-dasharray: 2 2; }
.fviz-04 .fc-spark .ln {
  stroke: var(--fc-ph); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 2px rgba(219, 230, 247, 0.45));
}
.fviz-04 .fc-spark .dt { stroke: rgba(219, 230, 247, 0.6); stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 1 3; }
.fviz-04 .fc-spark .hol { fill: #0f1115; stroke: var(--fc-ph); stroke-width: 1.2; }
.fviz-04 .fc-spark .end { fill: var(--fc-ph); filter: drop-shadow(0 0 2.5px rgba(219, 230, 247, 0.6)); }

/* Departures board: glass, faint scan lines */
.fviz-04 .fc-board {
  border-radius: 10px;
  background:
    repeating-linear-gradient(180deg, rgba(219, 230, 247, 0.02) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #13161b, #0c0e11);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.08), 0 0.5px 1px rgba(0, 0, 0, 0.35);
  color: var(--fc-ph);
  overflow: hidden;
}
.fviz-04 .fc-fields {
  display: grid;
  grid-template-columns: 1.55fr 0.9fr 1.25fr;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent);
  border-bottom: 1px solid rgba(219, 230, 247, 0.08);
}
.fviz-04 .fc-f {
  display: flex; flex-direction: column;
  padding: 7px 12px 7px;
  min-width: 0;
}
.fviz-04 .fc-f + .fc-f { border-left: 1px solid rgba(219, 230, 247, 0.07); }
.fviz-04 .fc-lbl,
.fviz-04 .fc-foot,
.fviz-04 .fc-btitle {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--fc-ph3);
  line-height: 1;
  white-space: nowrap;
}
.fviz-04 .fc-val {
  display: flex; align-items: center; gap: 7px;
  height: 21px;
  margin-top: 2px;
  white-space: nowrap;
}
.fviz-04 .fc-now .fc-val b { font-size: 17px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.fviz-04 .fc-air .fc-val b {
  font-family: var(--mono);
  font-size: 19px; font-weight: 600; color: #fff;
  font-variant-numeric: tabular-nums;
}
.fviz-04 .fc-stop .fc-val b { font-size: 15px; font-weight: 700; color: var(--fc-blue); }
.fviz-04 .fc-chip {
  font-style: normal;
  font-family: var(--mono);
  font-size: 7.5px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--fc-ph);
  padding: 3px 5px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--fc-ph3);
}
.fviz-04 .fc-det { font-size: 10px; color: var(--fc-ph2); white-space: nowrap; line-height: 1.2; }

/* The tape */
.fviz-04 .fc-tape {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  padding: 16px 12px 0;
}
.fviz-04 .fc-bracket {
  position: absolute;
  top: 6px;
  /* RF1..RF3 are columns 3..5 of 8 */
  left: calc(12px + (100% - 24px) * 2 / 8 + 5px);
  width: calc((100% - 24px) * 3 / 8 - 10px);
  height: 6px;
  border: 1px solid rgba(219, 230, 247, 0.3);
  border-bottom: 0;
  margin-right: 20px;
}
.fviz-04 .fc-bracket { width: calc((100% - 24px) * 3 / 8 - 30px); }
.fviz-04 .fc-btitle {
  position: absolute; left: 4px; top: -5px;
  padding: 0 4px;
  font-size: 7.5px;
  letter-spacing: 0.12em;
  color: var(--fc-ph);
  background: #121519;
}
.fviz-04 .fc-bcode { display: none; }
.fviz-04 .fc-handle {
  position: absolute; right: -19px; top: -6px;
  width: 12px; height: 12px;
  display: grid; place-items: center;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--fc-ph3);
  color: var(--fc-ph2);
}
.fviz-04 .fc-handle svg { width: 8px; height: 8px; }

.fviz-04 .fc-slot {
  position: relative;
  display: flex; flex-direction: column;
  min-width: 0;
  padding-bottom: 14px;
}
.fviz-04 .fc-sl {
  display: flex; justify-content: center; align-items: center; gap: 2px;
  height: 14px;
  font-family: var(--mono);
  font-size: 9.5px; font-weight: 600;
  color: var(--fc-ph3);
  white-space: nowrap;
}
.fviz-04 .fc-sl sup { font-size: 7px; font-weight: 700; vertical-align: baseline; opacity: 0.75; }
.fviz-04 .fc-flag { width: 7px; height: 7px; color: var(--fc-amber); margin-left: 1px; }
.fviz-04 .fc-sb {
  position: relative;
  height: 20px;
  margin: 4px var(--r) 0 var(--l);
  border-radius: 5px;
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 9.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* quarter ticks under each slot, and its end tick */
.fviz-04 .fc-slot::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 6px; height: 4px;
  background:
    linear-gradient(rgba(219, 230, 247, 0.12), rgba(219, 230, 247, 0.12)) 25% 0 / 1px 100% no-repeat,
    linear-gradient(rgba(219, 230, 247, 0.12), rgba(219, 230, 247, 0.12)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(rgba(219, 230, 247, 0.12), rgba(219, 230, 247, 0.12)) 75% 0 / 1px 100% no-repeat;
}
.fviz-04 .fc-slot::after {
  content: "";
  position: absolute; right: 0; top: 40px;
  width: 1px; height: 7px;
  background: rgba(219, 230, 247, 0.16);
}
.fviz-04 .s-major::after { height: 13px; }
.fviz-04 .s-done::after { background: rgba(219, 230, 247, 0.4); }
/* a major checkpoint's gate rule, from the label row through the bar */
.fviz-04 .s-major:not(.s-last) .fc-sl::after {
  content: "";
  position: absolute; right: 0; top: 0;
  width: 1px; height: 38px;
  background: rgba(219, 230, 247, 0.34);
}
.fviz-04 .s-future.s-major:not(.s-last) .fc-sl::after { background: rgba(219, 230, 247, 0.14); }

.fviz-04 .s-done .fc-sl { color: var(--fc-ph2); }
.fviz-04 .s-done.s-major .fc-sl { color: var(--fc-ph); }
.fviz-04 .s-done .fc-sb {
  background: linear-gradient(180deg, rgba(219, 230, 247, 0.2), rgba(219, 230, 247, 0.13));
  color: var(--fc-ph);
}
.fviz-04 .s-done.s-major .fc-sb { background: linear-gradient(180deg, rgba(219, 230, 247, 0.28), rgba(219, 230, 247, 0.18)); }
.fviz-04 .s-live .fc-sl { color: #fff; }
.fviz-04 .s-live .fc-sb {
  background: rgba(10, 132, 255, 0.13);
  box-shadow: inset 0 0 0 1px rgba(10, 132, 255, 0.5);
  place-items: center start;
}
.fviz-04 .fc-head {
  position: relative;
  display: block;
  width: 18px; height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, rgba(10, 132, 255, 0.35), var(--fc-acc));
  box-shadow: 0 0 8px rgba(10, 132, 255, 0.7);
}
.fviz-04 .fc-head::after {
  content: "";
  position: absolute; right: -6px; top: 50%;
  width: 9px; height: 9px; margin-top: -4.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2.5px var(--fc-acc), 0 0 9px 2px rgba(10, 132, 255, 0.8);
}
.fviz-04 .s-future .fc-sb { box-shadow: inset 0 0 0 1px rgba(219, 230, 247, 0.13); }
.fviz-04 .s-future.s-major .fc-sl { color: var(--fc-ph2); }
.fviz-04 .s-target .fc-sl { color: var(--fc-blue); }
.fviz-04 .s-target .fc-sb {
  box-shadow: inset 0 0 0 1.75px var(--fc-acc), 0 0 9px rgba(10, 132, 255, 0.45);
}
.fviz-04 .fc-foot {
  display: flex; justify-content: space-between;
  padding: 0 12px 7px;
  font-size: 7.5px;
}

/* The round's agents */
.fviz-04 .fc-seats { display: flex; flex-direction: column; }
.fviz-04 .fc-sh { display: flex; align-items: center; gap: 8px; padding: 0 4px 3px; }
.fviz-04 .fc-rchip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 20px;
  padding: 0 4px 0 6px;
  border-radius: 980px;
  background: rgba(48, 209, 88, 0.13);
  box-shadow: inset 0 0 0 1px rgba(48, 209, 88, 0.55);
  font-size: 11px; font-weight: 600;
}
.fviz-04 .fc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin: 0 1px; }
.fviz-04 .fc-pp { width: 11px; height: 9px; color: var(--fc-sec); }
.fviz-04 .fc-stack { display: flex; }
.fviz-04 .fc-stack svg { width: 13px; height: 13px; }
.fviz-04 .fc-stack svg + svg { margin-left: -2px; }
.fviz-04 .fc-count { font-size: 10.5px; color: var(--fc-ter); font-variant-numeric: tabular-nums; }

.fviz-04 .fc-seat {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 3px 6px;
  border-radius: 7px;
}
.fviz-04 .fc-seat + .fc-seat { border-top: 1px solid var(--fc-line); border-top-left-radius: 0; border-top-right-radius: 0; }
.fviz-04 .fc-g { flex: none; width: 13px; height: 13px; margin-top: 1px; }
.fviz-04 .is-done .fc-g { color: var(--fc-sec); }
.fviz-04 .is-run .fc-g { color: var(--fc-acc); }
.fviz-04 .is-queued .fc-g { color: var(--fc-sec); }
.fviz-04 .fc-sm { flex: 1; min-width: 0; }
.fviz-04 .fc-id { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.fviz-04 .fc-role { font-size: 11.5px; font-weight: 600; color: var(--fg); }
.fviz-04 .is-done .fc-role,
.fviz-04 .is-queued .fc-role { font-weight: 500; color: var(--fc-sec); }
.fviz-04 .fc-who { font-size: 10.5px; color: var(--fc-ter); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fviz-04 .fc-t { margin-left: auto; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--fg); }
.fviz-04 .is-done .fc-t { color: var(--fc-sec); }
.fviz-04 .fc-out { font-size: 11px; color: var(--fc-sec); margin-top: 1px; }
.fviz-04 .fc-head1 { font-size: 12px; color: var(--fg); margin-top: 1px; }
.fviz-04 .fc-act {
  display: flex; align-items: center; gap: 10px;
  font-size: 10.5px; color: var(--fc-sec);
  margin-top: 1px;
  white-space: nowrap;
}
.fviz-04 .fc-act > span:first-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fviz-04 .fc-gauge { margin-left: auto; display: flex; align-items: center; gap: 5px; color: var(--fc-ter); font-size: 10px; font-variant-numeric: tabular-nums; }
.fviz-04 .fc-gauge i { display: block; width: 40px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.fviz-04 .fc-gauge b { display: block; height: 100%; background: var(--fc-sec); border-radius: 2px; }
.fviz-04 .fc-q { font-size: 11px; color: var(--fc-ter); margin-top: 1px; }

/* --- Motion: the live seat's pulse and the playhead's glow --------------- */
@keyframes fv4-pulse { 50% { opacity: 0.35; } }
@keyframes fv4-glow {
  50% { box-shadow: 0 0 0 2.5px var(--fc-acc), 0 0 14px 4px rgba(10, 132, 255, 0.95); }
}
.fviz-04 .is-run .fc-g { animation: fv4-pulse 1.6s ease-in-out infinite; }
.fviz-04 .fc-head::after { animation: fv4-glow 2.2s ease-in-out infinite; }
.fviz-04 .fc-dot { animation: fv4-pulse 2.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .fviz-04 .is-run .fc-g,
  .fviz-04 .fc-head::after,
  .fviz-04 .fc-dot { animation: none; }
}

/* --- Narrower cards ------------------------------------------------------ */
@media (max-width: 960px) {
  .fviz-04 .fc-body { grid-template-columns: minmax(0, 1fr) 430px; }
  .fviz-04 .fc-editchip { display: none; }
  .fviz-04 .fc-doc { --gut: 64px; }
  .fviz-04 .fc-opt { display: none; }
  .fviz-04 .fc-churn { width: 58px; }
  .fviz-04 .fc-cap { display: none; }
  .fviz-04 .fc-hot::before { left: 54px; }
  .fviz-04 .fc-cov { display: none; }
}

@media (max-width: 820px) {
  .fviz-04 .fc-body { grid-template-columns: 1fr; }
  .fviz-04 .fc-run { order: -1; border-left: 0; border-bottom: 1px solid #0a0f1a; }
  .fviz-04 .fc-cov { display: flex; }
  .fviz-04 .fc-doc { flex: none; height: 272px; }
  .fviz-04 .fc-opt { display: inline-flex; }
  .fviz-04 .fc-plan { padding-bottom: 0; }
}

@media (max-width: 560px) {
  .fviz-04 .fc-titlebar { height: 28px; }
  .fviz-04 .fc-title { left: 68px; right: 8px; justify-content: flex-start; font-size: 11.5px; }
  .fviz-04 .fc-title { overflow: hidden; }
  .fviz-04 .fc-pill { display: none; }
  .fviz-04 .fc-run { padding: 10px 8px; }
  .fviz-04 .fc-ctrl { padding: 6px; }
  .fviz-04 .fc-cluster { display: none; }
  .fviz-04 .fc-cov { display: none; }
  .fviz-04 .fc-cell { padding: 0 8px; }
  .fviz-04 .fc-fields { grid-template-columns: 1.5fr 1fr; }
  .fviz-04 .fc-stop { display: none; }
  .fviz-04 .fc-f { padding: 7px 9px; }
  .fviz-04 .fc-tape { padding: 18px 8px 0; }
  .fviz-04 .fc-bracket {
    left: calc(8px + (100% - 16px) * 2 / 8 + 4px);
    width: calc((100% - 16px) * 3 / 8 - 26px);
  }
  .fviz-04 .fc-sl { font-size: 8px; }
  .fviz-04 .fc-sl sup { display: none; }
  .fviz-04 .fc-sb { font-size: 8px; }
  .fviz-04 .fc-foot { padding: 0 8px 8px; }
  .fviz-04 .fc-who { display: none; }
  .fviz-04 .fc-gauge { display: none; }
  .fviz-04 .is-queued { display: none; }
  .fviz-04 .fc-plan { padding: 10px 8px 0; }
  .fviz-04 .fc-seg { font-size: 9.5px; }
  .fviz-04 .fc-seg > * { padding: 2px 5px; }
  .fviz-04 .fc-seg > :nth-child(2),
  .fviz-04 .fc-seg > :nth-child(4) { display: none; }
  .fviz-04 .fc-doc { --gut: 34px; }
  .fviz-04 .fc-churn { width: 30px; padding-right: 6px; }
  .fviz-04 .fc-hot::before { left: 26px; }
  .fviz-04 .fc-doc { height: 352px; padding-right: 8px; }
  .fviz-04 .fc-bfull { display: none; }
  .fviz-04 .fc-bcode { display: inline; }
  .fviz-04 .fc-doc p { font-size: 12px; }
  .fviz-04 .fc-selp { margin-top: 38px !important; }
  .fviz-04 .fc-ti { font-size: 0; gap: 0; padding: 0 6px; }
  .fviz-04 .fc-ti svg { width: 13px; height: 13px; color: var(--fg); }
  .fviz-04 .fc-opt { display: none; }
}

/* ==========================================================================
   Features — highlight tiles stacked on the left; the active one's product
   shot and details on a sticky stage at the right. highlights.js picks the
   tile crossing the middle of the viewport. Tile art is sized in container
   units so it scales with its box; its loop runs only on the active tile.
   ========================================================================== */

.hl-wrap { max-width: 1320px; }
.hl-scrolly {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.hl-list {
  list-style: none;
  margin: 0;
  padding: 0 0 36vh;
  display: grid;
  gap: 64px;
}
.hl-item { min-width: 0; }
.hl-tile {
  display: block;
  min-width: 0;
  cursor: pointer;
  border-radius: 18px;
  outline: none;
  opacity: 0.42;
  transition: opacity 0.35s ease;
}
.hl-tile:hover, .hl-tile.is-active { opacity: 1; }
/* Flight Control's loop is composed for a squarer box. */
.hl-tile.hl-01 .hl-art { aspect-ratio: 5 / 4; }
.hl-tile:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.hl-art {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, rgba(79, 227, 255, 0.07), transparent 60%), var(--bg-inset);
  border: 1px solid var(--hairline-soft);
  container-type: inline-size;
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.hl-tile.is-active .hl-art {
  border-color: rgba(79, 227, 255, 0.45);
  box-shadow: 0 0 0 1px rgba(79, 227, 255, 0.18), 0 18px 50px -20px rgba(26, 146, 255, 0.45);
}
.js .hl-tile:not(.is-active) .hl-art * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .hl-art * { animation: none !important; }
  .hl-tile, .hl-art, .hl-detail { transition: none !important; }
}
.hl-title { margin: 16px 0 6px; font-size: 17px; font-weight: 620; letter-spacing: -0.015em; }
.hl-blurb { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--fg-secondary); }

/* The stage: every detail sits in the same grid cell; only the active one shows. */
.hl-stage {
  position: sticky;
  top: max(16px, calc(50vh - 420px));
  display: grid;
}
.hl-detail {
  grid-area: 1 / 1;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
}
.hl-detail.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s;
}
.hl-detail:not(.is-active) * { animation-play-state: paused !important; }
.hl-shot { overflow: hidden; border-radius: 16px; }
.hl-shot .fviz { width: 1000px; }
.hl-d-title { display: none; }
.hl-points {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 32px;
}
.hl-points h4 { margin: 0 0 4px; font-size: 15px; font-weight: 600; letter-spacing: -0.012em; color: var(--fg); }
.hl-points p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--fg-secondary); }

/* No JS: no stage switching, so drop the stage and show each detail under its tile's list. */
html:not(.js) .hl-scrolly { display: block; }
html:not(.js) .hl-tile { opacity: 1; cursor: default; }
html:not(.js) .hl-stage { position: static; gap: 72px; margin-top: 72px; }
html:not(.js) .hl-detail { grid-area: auto; opacity: 1; visibility: visible; transform: none; }
html:not(.js) .hl-d-title { display: block; margin: 0 0 14px; font-size: 20px; }
html:not(.js) .hl-shot .fviz { width: auto; }

/* Narrow: tiles only; each opens its details in the dialog. */
@media (max-width: 900px) {
  .hl-scrolly { display: block; }
  .hl-list { padding: 0; gap: 40px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .js .hl-stage { display: none; }
  .hl-tile { opacity: 1; }
  .js .hl-tile .hl-title::after {
    content: "›";
    margin-left: 6px;
    color: var(--glow-cyan);
    font-weight: 500;
  }
}
@media (max-width: 620px) {
  .hl-list { grid-template-columns: 1fr; gap: 36px; }
}

.hl-modal {
  width: min(1040px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  background: var(--bg-raised);
  color: var(--fg);
  overflow: auto;
  overscroll-behavior: contain;
}
.hl-modal::backdrop { background: rgba(3, 6, 12, 0.72); backdrop-filter: blur(6px); }
.hl-modal-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 12px 20px;
  background: color-mix(in srgb, var(--bg-raised) 92%, transparent);
  border-bottom: 1px solid var(--hairline-soft);
}
.hl-modal-title { flex: 1; margin: 0; font-size: 17px; font-weight: 620; letter-spacing: -0.015em; }
.hl-modal-close {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--fg-secondary);
  cursor: pointer;
}
.hl-modal-close svg { width: 14px; height: 14px; }
.hl-modal-body { padding: 16px; }
.hl-modal .hl-detail { opacity: 1; visibility: visible; transform: none; transition: none; }
.hl-modal .hl-detail * { animation-play-state: running !important; }
.hl-modal .hl-points { grid-template-columns: 1fr; margin-top: 20px; }
@media (max-width: 640px) {
  /* Panels have their own phone layouts; show those at natural width. */
  .hl-modal .hl-shot .fviz { width: auto; zoom: 1 !important; }
}

/* ==== 01 Flight Control — a plan worked over in rounds until it settles (7 s loop) ====
   0–8%   your phone taps Start
   9–28   R1 (cyan family) sweeps the plan, marks 5 lines, a tall bar lands
   30–50  R2 cross-check (blue family, drawn hollow) marks 3, you leave a note in place
   52–67  R3 (third family) marks 2;  68–82 R4 marks 1, under the settled floor
   83–94  "settled" check; 94–100 everything fades for the next loop          */

.hl-01 .hl-art {
  --hl01-c: 79, 227, 255;   /* glow-cyan  */
  --hl01-b: 26, 146, 255;   /* glow-blue  */
  --hl01-f: 233, 238, 247;  /* fg         */
  --hl01-t: 7s;
  --hl01-ease: cubic-bezier(.45, 0, .25, 1);
  --hl01-txt: clamp(7px, 1.45cqw, 11px);
}

/* composition is 100 × 76 cqw, centred in whatever height the box has */
.hl-01 .hl01-stage {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 76cqw; margin-top: -38cqw;
}

/* ---------- the plan ---------- */
.hl-01 .hl01-doc {
  position: absolute; left: 5cqw; top: 3cqw; width: 50cqw; height: 70cqw;
  border-radius: 2.4cqw; background: var(--bg-panel);
  border: 1px solid var(--hairline);
  box-shadow: 0 2cqw 6cqw rgba(0, 0, 0, .45), 0 0 0 1px rgba(var(--hl01-c), .04);
  overflow: hidden;
}
.hl-01 .hl01-head {
  position: absolute; left: 0; right: 0; top: 0; height: 7cqw;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 3.4cqw; border-bottom: 1px solid var(--hairline-soft);
  background: var(--bg-raised);
}
.hl-01 .hl01-ttl {
  display: block; width: 18cqw; height: 1.7cqw; border-radius: 1cqw;
  background: var(--fg); opacity: .8;
}
.hl-01 .hl01-settled {
  display: flex; align-items: center; gap: .9cqw;
  font: 600 var(--hl01-txt) / 1 var(--mono); letter-spacing: .06em;
  text-transform: uppercase; color: var(--green);
  opacity: 0; transform: scale(.6);
  animation: hl01-settle var(--hl01-t) var(--hl01-ease) infinite;
}
.hl-01 .hl01-settled svg { width: 3.4cqw; height: 3.4cqw; overflow: visible; }
.hl-01 .hl01-settled circle { fill: rgba(48, 209, 88, .14); stroke: var(--green); stroke-width: 1.4; }
.hl-01 .hl01-settled path { fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hl-01 .hl01-settled b { font-weight: 600; }

.hl-01 .hl01-body {
  position: absolute; left: 0; right: 0; top: 7cqw; bottom: 0;
  padding: 3cqw 3.4cqw 3.4cqw;
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
}
.hl-01 .hl01-sec { display: flex; flex-direction: column; gap: 1.25cqw; }
.hl-01 .hl01-h,
.hl-01 .hl01-l { position: relative; display: block; border-radius: 1cqw; }
.hl-01 .hl01-h {
  width: var(--w, 34%); height: 1.6cqw; margin-bottom: .3cqw;
  background: var(--fg-secondary); opacity: .75;
}
.hl-01 .hl01-l {
  width: var(--w, 80%); height: 1.1cqw;
  background: var(--hairline);
}

/* a round's mark on a line: bright while its round runs, then folded in */
.hl-01 .hl01-mk {
  position: absolute; top: -.45cqw; bottom: -.45cqw;
  left: var(--x); width: var(--m);
  border-radius: .8cqw; opacity: 0; transform: scaleX(0); transform-origin: left center;
  animation-duration: var(--hl01-t); animation-timing-function: var(--hl01-ease);
  animation-iteration-count: infinite; animation-delay: var(--d, 0s);
  animation-fill-mode: both;
}
.hl-01 .hl01-r1 { background: rgba(var(--hl01-c), .32); box-shadow: inset .35cqw 0 0 rgba(var(--hl01-c), .95), 0 0 1.6cqw rgba(var(--hl01-c), .25); animation-name: hl01-mk1; }
.hl-01 .hl01-r2 { background: rgba(var(--hl01-b), .1); border: 1px dashed rgba(var(--hl01-b), .95); box-shadow: 0 0 1.6cqw rgba(var(--hl01-b), .25); animation-name: hl01-mk2; }
.hl-01 .hl01-r3 { background: rgba(var(--hl01-f), .22); box-shadow: inset .35cqw 0 0 rgba(var(--hl01-f), .9); animation-name: hl01-mk3; }
.hl-01 .hl01-r4 { background: rgba(var(--hl01-c), .32); box-shadow: inset .35cqw 0 0 rgba(var(--hl01-c), .95), 0 0 1.6cqw rgba(var(--hl01-c), .3); animation-name: hl01-mk4; }

/* the sweep: a coloured edge travelling down the plan, trailing a faint wash */
.hl-01 .hl01-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 100%;
  opacity: 0; transform: translateY(-100%); pointer-events: none;
  animation: var(--hl01-t) linear infinite both;
}
.hl-01 .hl01-s1 { --k: var(--hl01-c); animation-name: hl01-s1; }
.hl-01 .hl01-s2 { --k: var(--hl01-b); animation-name: hl01-s2; }
.hl-01 .hl01-s3 { --k: var(--hl01-f); animation-name: hl01-s3; }
.hl-01 .hl01-s4 { --k: var(--hl01-c); animation-name: hl01-s4; }
.hl-01 .hl01-scan {
  background: linear-gradient(to bottom, transparent 55%, rgba(var(--k), .07) 99.2%, rgba(var(--k), .95) 99.2%);
  filter: drop-shadow(0 0 .8cqw rgba(var(--k), .55));
}

/* your note, pinned beside the line you marked */
.hl-01 .hl01-you {
  position: absolute; left: 20%; width: 60%; bottom: -.9cqw; height: 2px;
  background: var(--fg); border-radius: 2px;
  transform: scaleX(0); transform-origin: left center; opacity: 0;
  animation: hl01-you var(--hl01-t) var(--hl01-ease) infinite;
}
.hl-01 .hl01-note {
  position: absolute; right: 3.4cqw; top: 31.5cqw;
  display: flex; align-items: center; gap: 1.2cqw;
  padding: 1.3cqw 1.6cqw; border-radius: 1.8cqw;
  background: var(--bg-raised); border: 1px solid rgba(var(--hl01-f), .35);
  box-shadow: 0 1.2cqw 3cqw rgba(0, 0, 0, .5);
  opacity: 0; transform: translateY(1.2cqw) scale(.9); transform-origin: left center;
  animation: hl01-note var(--hl01-t) var(--hl01-ease) infinite;
}
.hl-01 .hl01-avatar {
  display: block; width: 2.8cqw; height: 2.8cqw; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, var(--fg) 0 28%, transparent 30%),
              radial-gradient(circle at 50% 108%, var(--fg) 0 42%, transparent 44%),
              var(--fg-tertiary);
}
.hl-01 .hl01-note span { display: flex; flex-direction: column; gap: .8cqw; }
.hl-01 .hl01-note span i { display: block; height: .9cqw; border-radius: 1cqw; background: var(--fg-secondary); }
.hl-01 .hl01-note span i:first-child { width: 10cqw; }
.hl-01 .hl01-note span i:last-child { width: 6.5cqw; opacity: .6; }
.hl-01 .hl01-caret {
  position: absolute; left: calc(3.4cqw + 0.8 * (50cqw - 6.8cqw) * .72); top: 30.2cqw;
  width: 2px; height: 3.2cqw; background: var(--fg); border-radius: 1px;
  opacity: 0; animation: hl01-caret var(--hl01-t) steps(1, end) infinite;
}

/* ---------- the board ---------- */
.hl-01 .hl01-side { position: absolute; left: 60cqw; right: 5cqw; top: 3cqw; bottom: 3cqw; }

.hl-01 .hl01-chips { display: flex; gap: 1.3cqw; }
.hl-01 .hl01-chip {
  position: relative; flex: 1; display: flex; align-items: center; justify-content: center; gap: .8cqw;
  height: 5cqw; border-radius: 1.6cqw;
  background: var(--bg-raised); border: 1px solid var(--hairline);
  font: 600 var(--hl01-txt) / 1 var(--mono); color: var(--fg-secondary);
  opacity: .45;
  animation: var(--hl01-t) var(--hl01-ease) infinite both;
}
.hl-01 .hl01-chip::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  border: 1px solid rgba(var(--hl01-c), .9);
  box-shadow: 0 0 2cqw rgba(var(--hl01-c), .35), inset 0 0 1.2cqw rgba(var(--hl01-c), .15);
  opacity: 0; animation: inherit; animation-name: inherit;
}
.hl-01 .hl01-c1 { animation-name: hl01-c1; }
.hl-01 .hl01-c2 { animation-name: hl01-c2; }
.hl-01 .hl01-c3 { animation-name: hl01-c3; }
.hl-01 .hl01-c4 { animation-name: hl01-c4; }
.hl-01 .hl01-c1::after { animation-name: hl01-c1g; }
.hl-01 .hl01-c2::after { animation-name: hl01-c2g; border-color: rgba(var(--hl01-b), .95); box-shadow: 0 0 2cqw rgba(var(--hl01-b), .4); }
.hl-01 .hl01-c3::after { animation-name: hl01-c3g; border-color: rgba(var(--hl01-f), .8); box-shadow: 0 0 2cqw rgba(var(--hl01-f), .2); }
.hl-01 .hl01-c4::after { animation-name: hl01-c4g; }
.hl-01 .hl01-fam { display: block; width: 1.3cqw; height: 1.3cqw; border-radius: 50%; }
.hl-01 .hl01-fc { background: var(--glow-cyan); box-shadow: 0 0 .8cqw rgba(var(--hl01-c), .8); }
.hl-01 .hl01-fb { background: var(--glow-blue); }
.hl-01 .hl01-ff { background: var(--fg); }
.hl-01 .hl01-hollow { background: transparent; border: 1.5px solid var(--glow-blue); }

.hl-01 .hl01-chart {
  position: absolute; left: 0; right: 0; top: 8.5cqw; height: 35cqw;
  border-radius: 2.4cqw; background: var(--bg-raised); border: 1px solid var(--hairline-soft);
  padding: 2.6cqw 2.8cqw 2.8cqw;
}
.hl-01 .hl01-verdict { position: relative; height: 3cqw; font: 600 var(--hl01-txt) / 1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.hl-01 .hl01-verdict span { position: absolute; left: 0; top: 0; white-space: nowrap; }
.hl-01 .hl01-v1 { color: var(--glow-cyan); animation: hl01-v1 var(--hl01-t) var(--hl01-ease) infinite; }
.hl-01 .hl01-v2 { color: var(--green); opacity: 0; animation: hl01-v2 var(--hl01-t) var(--hl01-ease) infinite; }

.hl-01 .hl01-plot {
  position: absolute; left: 2.8cqw; right: 2.8cqw; top: 7cqw; bottom: 2.8cqw;
  border-bottom: 1px solid var(--hairline);
}
.hl-01 .hl01-floor {
  position: absolute; left: 0; right: 0; bottom: 20%; height: 0;
  border-top: 1px dashed var(--fg-tertiary);
}
.hl-01 .hl01-floor::after {
  content: ""; position: absolute; left: 0; right: 0; top: -1px;
  border-top: 1px dashed var(--green); opacity: 0;
  animation: hl01-v2 var(--hl01-t) var(--hl01-ease) infinite;
}
.hl-01 .hl01-bar {
  position: absolute; bottom: 0; width: 13%; margin-left: -6.5%;
  border-radius: 1cqw 1cqw .3cqw .3cqw;
  transform: scaleY(0); transform-origin: bottom center; opacity: 0;
  animation: var(--hl01-t) var(--hl01-ease) infinite both;
}
.hl-01 .hl01-b1 { left: 14%; height: 88%; background: linear-gradient(to top, rgba(var(--hl01-c), .25), rgba(var(--hl01-c), .75)); animation-name: hl01-b1; }
.hl-01 .hl01-b2 { left: 38%; height: 54%; border: 1.5px dashed rgba(var(--hl01-b), .95); background: rgba(var(--hl01-b), .08); animation-name: hl01-b2; }
.hl-01 .hl01-b3 { left: 62%; height: 30%; background: linear-gradient(to top, rgba(var(--hl01-f), .15), rgba(var(--hl01-f), .55)); animation-name: hl01-b3; }
.hl-01 .hl01-b4 { left: 86%; height: 14%; background: linear-gradient(to top, rgba(var(--hl01-c), .25), rgba(var(--hl01-c), .75)); animation-name: hl01-b4; }
.hl-01 .hl01-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hl-01 .hl01-seg {
  fill: none; stroke: var(--fg); stroke-width: .9; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: var(--hl01-t) var(--hl01-ease) infinite both;
}
.hl-01 .hl01-g1 { animation-name: hl01-g1; }
.hl-01 .hl01-g2 { animation-name: hl01-g2; }
.hl-01 .hl01-g3 { animation-name: hl01-g3; }

/* the phone that started it */
.hl-01 .hl01-phone {
  position: absolute; left: 50%; bottom: 0; width: 14cqw; height: 23cqw; margin-left: -7cqw;
  border-radius: 2.6cqw; background: var(--bg-panel);
  border: 1px solid var(--hairline); box-shadow: 0 1.5cqw 4cqw rgba(0, 0, 0, .45);
  padding: 3.4cqw 1.8cqw 1.8cqw;
  display: flex; flex-direction: column; gap: 1cqw;
}
.hl-01 .hl01-notch { position: absolute; left: 50%; top: 1.1cqw; width: 4cqw; height: .9cqw; margin-left: -2cqw; border-radius: 1cqw; background: var(--bg-inset); }
.hl-01 .hl01-pbar { display: block; width: var(--w); height: .9cqw; border-radius: 1cqw; background: var(--fg-tertiary); }
.hl-01 .hl01-pspark { display: flex; align-items: flex-end; gap: .7cqw; height: 4.2cqw; margin-top: .4cqw; }
.hl-01 .hl01-pspark i { display: block; flex: 1; border-radius: .4cqw .4cqw 0 0; background: rgba(var(--hl01-c), .45); }
.hl-01 .hl01-pspark i:nth-child(1) { height: 100%; }
.hl-01 .hl01-pspark i:nth-child(2) { height: 60%; background: transparent; border: 1px dashed rgba(var(--hl01-b), .9); border-bottom: 0; }
.hl-01 .hl01-pspark i:nth-child(3) { height: 34%; background: rgba(var(--hl01-f), .4); }
.hl-01 .hl01-pspark i:nth-child(4) { height: 16%; }
.hl-01 .hl01-btn {
  position: relative; margin: auto auto 0; width: 5.4cqw; height: 5.4cqw; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(var(--hl01-c), .14); border: 1px solid rgba(var(--hl01-c), .7);
  box-shadow: 0 0 1.8cqw rgba(var(--hl01-c), .3);
  animation: hl01-press var(--hl01-t) var(--hl01-ease) infinite;
}
.hl-01 .hl01-btn svg { width: 2.6cqw; height: 2.6cqw; fill: var(--glow-cyan); }
.hl-01 .hl01-ripple {
  position: absolute; inset: -1px; border-radius: 50%;
  border: 1.5px solid var(--glow-cyan); opacity: 0;
  animation: hl01-ripple var(--hl01-t) ease-out infinite;
}

/* ---------- keyframes (all on the shared 7 s clock) ---------- */
@keyframes hl01-press   { 0%, 2% { transform: scale(1); } 4% { transform: scale(.84); } 7%, 100% { transform: scale(1); } }
@keyframes hl01-ripple  { 0%, 3% { opacity: 0; transform: scale(1); } 4% { opacity: .9; transform: scale(1); } 12%, 100% { opacity: 0; transform: scale(2.4); } }

@keyframes hl01-s1 { 0%, 8% { opacity: 0; transform: translateY(-100%); } 9% { opacity: 1; } 24% { opacity: 1; transform: translateY(0); } 27%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes hl01-s2 { 0%, 30% { opacity: 0; transform: translateY(-100%); } 31% { opacity: 1; } 45% { opacity: 1; transform: translateY(0); } 48%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes hl01-s3 { 0%, 52% { opacity: 0; transform: translateY(-100%); } 53% { opacity: 1; } 63% { opacity: 1; transform: translateY(0); } 66%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes hl01-s4 { 0%, 68% { opacity: 0; transform: translateY(-100%); } 69% { opacity: 1; } 77% { opacity: 1; transform: translateY(0); } 80%, 100% { opacity: 0; transform: translateY(0); } }

@keyframes hl01-mk1 { 0%, 10% { opacity: 0; transform: scaleX(0); } 14% { opacity: 1; transform: scaleX(1); } 31% { opacity: 1; transform: scaleX(1); } 36%, 93% { opacity: .32; transform: scaleX(1); } 98%, 100% { opacity: 0; transform: scaleX(1); } }
@keyframes hl01-mk2 { 0%, 33% { opacity: 0; transform: scaleX(0); } 37% { opacity: 1; transform: scaleX(1); } 52% { opacity: 1; transform: scaleX(1); } 57%, 93% { opacity: .3; transform: scaleX(1); } 98%, 100% { opacity: 0; transform: scaleX(1); } }
@keyframes hl01-mk3 { 0%, 55% { opacity: 0; transform: scaleX(0); } 59% { opacity: 1; transform: scaleX(1); } 68% { opacity: 1; transform: scaleX(1); } 72%, 93% { opacity: .3; transform: scaleX(1); } 98%, 100% { opacity: 0; transform: scaleX(1); } }
@keyframes hl01-mk4 { 0%, 72% { opacity: 0; transform: scaleX(0); } 75% { opacity: 1; transform: scaleX(1); } 82% { opacity: 1; transform: scaleX(1); } 86%, 93% { opacity: .3; transform: scaleX(1); } 98%, 100% { opacity: 0; transform: scaleX(1); } }

@keyframes hl01-caret { 0%, 39% { opacity: 0; } 40% { opacity: 1; } 43% { opacity: 0; } 45% { opacity: 1; } 48% { opacity: 0; } 50% { opacity: 1; } 53%, 100% { opacity: 0; } }
@keyframes hl01-you  { 0%, 40% { opacity: 0; transform: scaleX(0); } 45% { opacity: .9; transform: scaleX(1); } 93% { opacity: .9; transform: scaleX(1); } 98%, 100% { opacity: 0; transform: scaleX(1); } }
@keyframes hl01-note { 0%, 44% { opacity: 0; transform: translateY(1.2cqw) scale(.9); } 49% { opacity: 1; transform: none; } 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }

@keyframes hl01-c1  { 0%, 7% { opacity: .45; } 9%, 93% { opacity: 1; } 98%, 100% { opacity: .45; } }
@keyframes hl01-c2  { 0%, 29% { opacity: .45; } 31%, 93% { opacity: 1; } 98%, 100% { opacity: .45; } }
@keyframes hl01-c3  { 0%, 51% { opacity: .45; } 53%, 93% { opacity: 1; } 98%, 100% { opacity: .45; } }
@keyframes hl01-c4  { 0%, 67% { opacity: .45; } 69%, 93% { opacity: 1; } 98%, 100% { opacity: .45; } }
@keyframes hl01-c1g { 0%, 7% { opacity: 0; } 9%, 26% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes hl01-c2g { 0%, 29% { opacity: 0; } 31%, 47% { opacity: 1; } 51%, 100% { opacity: 0; } }
@keyframes hl01-c3g { 0%, 51% { opacity: 0; } 53%, 64% { opacity: 1; } 68%, 100% { opacity: 0; } }
@keyframes hl01-c4g { 0%, 67% { opacity: 0; } 69%, 79% { opacity: 1; } 83%, 100% { opacity: 0; } }

@keyframes hl01-b1 { 0%, 23% { opacity: 0; transform: scaleY(0); } 24% { opacity: 1; } 29% { opacity: 1; transform: scaleY(1); } 93% { opacity: 1; transform: scaleY(1); } 98%, 100% { opacity: 0; transform: scaleY(1); } }
@keyframes hl01-b2 { 0%, 45% { opacity: 0; transform: scaleY(0); } 46% { opacity: 1; } 51% { opacity: 1; transform: scaleY(1); } 93% { opacity: 1; transform: scaleY(1); } 98%, 100% { opacity: 0; transform: scaleY(1); } }
@keyframes hl01-b3 { 0%, 62% { opacity: 0; transform: scaleY(0); } 63% { opacity: 1; } 68% { opacity: 1; transform: scaleY(1); } 93% { opacity: 1; transform: scaleY(1); } 98%, 100% { opacity: 0; transform: scaleY(1); } }
@keyframes hl01-b4 { 0%, 77% { opacity: 0; transform: scaleY(0); } 78% { opacity: 1; } 82% { opacity: 1; transform: scaleY(1); } 93% { opacity: 1; transform: scaleY(1); } 98%, 100% { opacity: 0; transform: scaleY(1); } }

@keyframes hl01-g1 { 0%, 49% { stroke-dashoffset: 1; opacity: 1; } 54%, 93% { stroke-dashoffset: 0; opacity: 1; } 98%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes hl01-g2 { 0%, 66% { stroke-dashoffset: 1; opacity: 1; } 71%, 93% { stroke-dashoffset: 0; opacity: 1; } 98%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes hl01-g3 { 0%, 80% { stroke-dashoffset: 1; opacity: 1; } 85%, 93% { stroke-dashoffset: 0; opacity: 1; } 98%, 100% { stroke-dashoffset: 0; opacity: 0; } }

@keyframes hl01-v1 { 0%, 83% { opacity: 1; } 86%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes hl01-v2 { 0%, 84% { opacity: 0; } 88%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes hl01-settle { 0%, 84% { opacity: 0; transform: scale(.6); } 88% { opacity: 1; transform: scale(1.08); } 90%, 94% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; transform: scale(1); } }

/* 02 — Every agent, one window: five scattered terminals snap into one window's sidebar. */
.hl-02 .hl-art s { display: block; text-decoration: none; }

/* Agent marks: shape does the telling, not a logo. */
.hl-02 .hl02-mk {
  display: block; width: 2cqw; height: 2cqw; flex: none;
  background: var(--c, var(--glow-cyan));
  box-shadow: 0 0 1.2cqw color-mix(in srgb, var(--c, var(--glow-cyan)) 45%, transparent);
}
.hl-02 .m-circle { --c: var(--glow-cyan); border-radius: 50%; }
.hl-02 .m-sq     { --c: var(--glow-blue); border-radius: .5cqw; }
.hl-02 .m-tri    { --c: var(--fg); clip-path: polygon(50% 4%, 97% 92%, 3% 92%); box-shadow: none; }
.hl-02 .m-dia    { --c: var(--fg-secondary); border-radius: .3cqw; transform: rotate(45deg) scale(.82); }
.hl-02 .m-ring   { --c: var(--glow-cyan); background: transparent; border: .5cqw solid var(--c); border-radius: 50%; box-shadow: none; }

/* The window they land in */
.hl-02 .hl02-win {
  position: absolute; left: 6cqw; top: 5cqw; width: 88cqw; height: 52.5cqw;
  border-radius: 2.4cqw; overflow: hidden;
  background: var(--bg-panel); border: 1px solid var(--hairline);
  box-shadow: 0 2cqw 6cqw rgba(0, 0, 0, .5), 0 0 4cqw rgba(79, 227, 255, .08);
  opacity: 0;
  animation: hl02-win 7s ease-in-out infinite;
}
.hl-02 .hl02-bar {
  height: 4.5cqw; display: flex; align-items: center; gap: 1cqw; padding-left: 2cqw;
  border-bottom: 1px solid var(--hairline-soft);
}
.hl-02 .hl02-bar i { width: 1.3cqw; height: 1.3cqw; border-radius: 50%; background: var(--hairline); }
.hl-02 .hl02-side {
  position: absolute; left: 0; top: 4.5cqw; bottom: 0; width: 26cqw;
  background: var(--bg-raised); border-right: 1px solid var(--hairline-soft);
}
.hl-02 .hl02-proj {
  position: absolute; left: 2.6cqw; width: 9cqw; height: 1.2cqw; margin-top: -4.5cqw;
  border-radius: .6cqw; background: var(--fg-tertiary); opacity: .7;
}
.hl-02 .hl02-row {
  position: absolute; left: 2cqw; width: 22cqw; height: 4cqw; margin-top: -4.5cqw;
  display: flex; align-items: center; gap: 1.6cqw; padding-left: 1.2cqw;
  border-radius: 1.2cqw; opacity: 0;
  animation: hl02-row 7s ease-in-out infinite; animation-delay: var(--d);
}
.hl-02 .hl02-row s { height: 1.1cqw; border-radius: .55cqw; background: var(--fg-secondary); opacity: .55; }
.hl-02 .hl02-row.is-sel::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: rgba(79, 227, 255, .12); box-shadow: inset 0 0 0 1px rgba(79, 227, 255, .22);
  opacity: 0; animation: hl02-sel 7s ease-in-out infinite;
}
.hl-02 .hl02-pane {
  position: absolute; left: 29cqw; top: 8cqw; right: 3cqw;
  display: flex; flex-direction: column; gap: 2.2cqw;
}
.hl-02 .hl02-pane s {
  height: 1.3cqw; border-radius: .65cqw; background: var(--fg-secondary); opacity: 0;
  transform-origin: 0 50%;
  animation: hl02-line 7s ease-out infinite; animation-delay: calc(var(--i) * .14s);
}
.hl-02 .hl02-pane s.p { background: var(--glow-cyan); }

/* The scattered terminals */
.hl-02 .hl02-fly {
  position: absolute; width: 24cqw; height: 15cqw; z-index: 2;
  border-radius: 1.8cqw; padding: 0 2cqw;
  background: var(--bg-panel);
  border: 1px solid color-mix(in srgb, var(--c, var(--glow-cyan)) 30%, var(--hairline));
  box-shadow: 0 1.5cqw 4cqw rgba(0, 0, 0, .5);
  transform-origin: 0 0; opacity: 0;
  animation: hl02-fly 7s cubic-bezier(.65, 0, .35, 1) infinite, hl02-flyfade 7s linear infinite;
  animation-delay: var(--d);
}
.hl-02 .hl02-fly:has(.m-circle) { --c: var(--glow-cyan); }
.hl-02 .hl02-fly:has(.m-sq)     { --c: var(--glow-blue); }
.hl-02 .hl02-fly:has(.m-tri)    { --c: var(--fg); }
.hl-02 .hl02-fly:has(.m-dia)    { --c: var(--fg-secondary); }
.hl-02 .hl02-ft {
  height: 4.2cqw; display: flex; align-items: center; margin: 0 -2cqw 1.6cqw; padding-left: 2cqw;
  border-bottom: 1px solid var(--hairline-soft);
}
.hl-02 .hl02-ft .hl02-mk { width: 1.7cqw; height: 1.7cqw; }
.hl-02 .hl02-fly s {
  height: 1.1cqw; border-radius: .55cqw; margin-bottom: 1.5cqw;
  background: var(--fg-tertiary);
}
.hl-02 .hl02-fly s:first-of-type { background: color-mix(in srgb, var(--c, var(--glow-cyan)) 70%, transparent); }

@keyframes hl02-fly {
  0%   { transform: translate(0, 1.5cqw) rotate(var(--r)); }
  10%  { transform: translate(0, 0) rotate(var(--r)); }
  30%  { transform: translate(0, -.8cqw) rotate(var(--r)); }
  50%, 100% { transform: translate(var(--dx), var(--dy)) rotate(0deg) scale(.917, .267); }
}
@keyframes hl02-flyfade {
  0% { opacity: 0; } 9%, 43% { opacity: 1; } 50%, 100% { opacity: 0; }
}
@keyframes hl02-win {
  0%, 26% { opacity: 0; transform: scale(.97); }
  38%, 89% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: scale(.985); }
}
@keyframes hl02-row {
  0%, 45% { opacity: 0; } 51%, 88% { opacity: 1; } 94%, 100% { opacity: 0; }
}
@keyframes hl02-sel {
  0%, 56% { opacity: 0; } 62%, 88% { opacity: 1; } 93%, 100% { opacity: 0; }
}
@keyframes hl02-line {
  0%, 57% { opacity: 0; transform: scaleX(0); }
  64%, 88% { opacity: .6; transform: scaleX(1); }
  94%, 100% { opacity: 0; transform: scaleX(1); }
}

/* 03 — Know who needs you: rows tick along; one turns orange "?", then its collapsed project does too. */
.hl-03 .hl-art s, .hl-03 .hl-art em { display: block; text-decoration: none; font-style: normal; }

.hl-03 .hl03-side {
  position: absolute; left: 16cqw; top: 5cqw; width: 68cqw; height: 52.5cqw;
  border-radius: 2.4cqw; background: var(--bg-raised); border: 1px solid var(--hairline);
  box-shadow: 0 2cqw 6cqw rgba(0, 0, 0, .45), 0 0 4cqw rgba(79, 227, 255, .06);
}
.hl-03 .hl03-row, .hl-03 .hl03-head {
  position: absolute; left: 2cqw; right: 2cqw; height: 5cqw;
  display: flex; align-items: center; gap: 1.8cqw; padding: 0 1.8cqw;
  border-radius: 1.3cqw;
}
.hl-03 .hl03-row s { height: 1.2cqw; border-radius: .6cqw; background: var(--fg-secondary); opacity: .5; }
.hl-03 .hl03-head { gap: 1.4cqw; padding-left: .8cqw; }
.hl-03 .hl03-head s { height: 1.3cqw; border-radius: .65cqw; background: var(--fg); opacity: .42; }
.hl-03 .hl03-chev { width: 2.2cqw; height: 2.2cqw; fill: none; stroke: var(--fg-tertiary); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.hl-03 .hl03-c { margin-left: auto; font: 500 2.6cqw/1 var(--mono); color: var(--fg-tertiary); }

/* Glyph slot */
.hl-03 .hl03-g { position: relative; width: 3cqw; height: 3cqw; flex: none; }
.hl-03 .hl03-g > * { position: absolute; inset: 0; width: 100%; height: 100%; }

.hl-03 .hl03-spin { stroke: var(--fg-secondary); stroke-width: 1.8; stroke-linecap: round; animation: hl03-rot .9s steps(8) infinite; }
.hl-03 .hl03-q { fill: none; overflow: visible; filter: drop-shadow(0 0 .9cqw rgba(255, 159, 10, .55)); }
.hl-03 .hl03-q circle { fill: var(--orange); }
.hl-03 .hl03-q path { stroke: var(--bg-inset); stroke-width: 1.8; stroke-linecap: round; }
.hl-03 .hl03-q circle.dot { fill: var(--bg-inset); }
.hl-03 .hl03-ring { border-radius: 50%; border: .35cqw solid var(--orange); opacity: 0; }
.hl-03 .hl03-dot { inset: 15% !important; width: auto !important; height: auto !important; border-radius: 50%; background: var(--accent); box-shadow: 0 0 1.2cqw rgba(10, 132, 255, .6); }
.hl-03 .hl03-dot.idle { background: var(--fg); opacity: .12; box-shadow: none; }
.hl-03 .hl03-term { width: 2.7cqw; height: 2.2cqw; flex: none; margin-left: -.4cqw; }
.hl-03 .hl03-term rect { fill: var(--green); }
.hl-03 .hl03-term path { fill: none; stroke: var(--bg-inset); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Subagent count, trailing: 3 -> 2 as one finishes */
.hl-03 .hl03-n { position: relative; margin-left: auto; width: 2cqw; height: 3cqw; font: 600 2.8cqw/3cqw var(--mono); color: var(--accent); text-align: center; }
.hl-03 .hl03-n em { position: absolute; inset: 0; }
.hl-03 .hl03-n .n3 { animation: hl03-n3 7s ease-in-out infinite; }
.hl-03 .hl03-n .n2 { opacity: 0; animation: hl03-n2 7s ease-in-out infinite; }

/* Row and header tint when blocked */
.hl-03 .hl03-blk::before, .hl-03 .hl03-blk2::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: rgba(255, 159, 10, .09); box-shadow: inset 0 0 0 1px rgba(255, 159, 10, .28);
  opacity: 0;
}
.hl-03 .hl03-blk::before  { animation: hl03-a-flush 7s ease-in-out infinite; }
.hl-03 .hl03-blk2::before { animation: hl03-b-flush 7s ease-in-out infinite; }

/* Unread: a turn finishes */
.hl-03 .hl03-unr .hl03-out { animation: hl03-rot .9s steps(8) infinite, hl03-u-out 7s ease-in-out infinite; }
.hl-03 .hl03-unr .hl03-in  { opacity: 0; animation: hl03-u-in 7s ease-in-out infinite; }
/* Blocked row */
.hl-03 .hl03-blk .hl03-out { animation: hl03-rot .9s steps(8) infinite, hl03-a-out 7s ease-in-out infinite; }
.hl-03 .hl03-blk .hl03-in  { opacity: 0; animation: hl03-a-in 7s ease-in-out infinite; }
.hl-03 .hl03-blk .hl03-ring { animation: hl03-a-ring 7s ease-out infinite; }
.hl-03 .hl03-blk .hl03-ring.r2 { animation-delay: .5s; }
/* Collapsed project inherits the most urgent child */
.hl-03 .hl03-blk2 .hl03-out { animation: hl03-rot .9s steps(8) infinite, hl03-b-out 7s ease-in-out infinite; }
.hl-03 .hl03-blk2 .hl03-in  { opacity: 0; animation: hl03-b-in 7s ease-in-out infinite; }
.hl-03 .hl03-blk2 .hl03-ring { animation: hl03-b-ring 7s ease-out infinite; }
.hl-03 .hl03-blk2 .hl03-ring.r2 { animation-delay: .5s; }

@keyframes hl03-rot { to { transform: rotate(360deg); } }

@keyframes hl03-u-out { 0%, 15% { opacity: 1; } 18%, 91% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes hl03-u-in  { 0%, 17% { opacity: 0; transform: scale(.3); } 21% { opacity: 1; transform: scale(1.25); }
                        24%, 91% { opacity: 1; transform: scale(1); } 95%, 100% { opacity: 0; transform: scale(.3); } }

@keyframes hl03-a-out { 0%, 29% { opacity: 1; } 31%, 91% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes hl03-a-in  { 0%, 30% { opacity: 0; transform: scale(.3); } 34% { opacity: 1; transform: scale(1.2); }
                        37%, 91% { opacity: 1; transform: scale(1); } 95%, 100% { opacity: 0; transform: scale(.3); } }
@keyframes hl03-a-ring { 0%, 32% { opacity: 0; transform: scale(1); } 33% { opacity: .8; transform: scale(1); }
                         45%, 100% { opacity: 0; transform: scale(2.9); } }
@keyframes hl03-a-flush { 0%, 31% { opacity: 0; } 36%, 90% { opacity: 1; } 95%, 100% { opacity: 0; } }

@keyframes hl03-n3 { 0%, 46% { opacity: 1; transform: none; } 50%, 93% { opacity: 0; transform: translateY(-1.4cqw); } 97%, 100% { opacity: 1; transform: none; } }
@keyframes hl03-n2 { 0%, 46% { opacity: 0; transform: translateY(1.4cqw); } 50%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(1.4cqw); } }

@keyframes hl03-b-out { 0%, 55% { opacity: 1; } 57%, 91% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes hl03-b-in  { 0%, 56% { opacity: 0; transform: scale(.3); } 60% { opacity: 1; transform: scale(1.2); }
                        63%, 91% { opacity: 1; transform: scale(1); } 95%, 100% { opacity: 0; transform: scale(.3); } }
@keyframes hl03-b-ring { 0%, 58% { opacity: 0; transform: scale(1); } 59% { opacity: .8; transform: scale(1); }
                         71%, 100% { opacity: 0; transform: scale(2.9); } }
@keyframes hl03-b-flush { 0%, 57% { opacity: 0; } 62%, 90% { opacity: 1; } 95%, 100% { opacity: 0; } }

/* 04 — The fleet in your pocket. 6 s loop: a Mac row stops to ask (orange ?),
   the question pulses to the phone, a chip is tapped, the answer pulses back
   and the row is working again. */
.hl-04 { --hl04-t: 6s; }

.hl-04 .hl04-mac {
  position: absolute; left: 5cqw; top: 8cqw; width: 51cqw; height: 46.5cqw;
  background: var(--bg-panel); border: 1px solid var(--hairline);
  border-radius: 2.8cqw; padding-top: 7cqw;
  display: flex; flex-direction: column; gap: 1.6cqw;
  box-shadow: 0 2cqw 6cqw rgba(0, 0, 0, .35);
}
.hl-04 .hl04-lights { position: absolute; top: 2.6cqw; left: 3cqw; display: flex; gap: 1.1cqw; }
.hl-04 .hl04-lights i { width: 1.3cqw; height: 1.3cqw; border-radius: 50%; background: var(--fg-tertiary); opacity: .45; }

.hl-04 .hl04-row {
  position: relative; height: 6.6cqw; margin: 0 2cqw; padding: 0 2.2cqw;
  border-radius: 1.8cqw; display: flex; align-items: center; gap: 2.2cqw;
}
.hl-04 .hl04-row b {
  position: relative; display: block; height: 1.5cqw; border-radius: 1cqw;
  background: var(--fg-tertiary); opacity: .55;
}
.hl-04 .hl04-subject { background: rgba(255, 255, 255, .035); }
.hl-04 .hl04-subject b { background: var(--fg-secondary); opacity: .6; }
.hl-04 .hl04-glow {
  position: absolute; inset: 0; border-radius: inherit;
  background: rgba(255, 159, 10, .09); box-shadow: inset 0 0 0 1px rgba(255, 159, 10, .35);
  opacity: 0; animation: hl04-ask var(--hl04-t) ease-in-out infinite;
}

.hl-04 .hl04-slot { position: relative; width: 3cqw; height: 3cqw; flex: none; display: grid; place-items: center; }
.hl-04 .spinner { --sp: 3cqw; }
.hl-04 .spinner i { background: var(--fg-secondary); }
.hl-04 .hl04-busy { position: absolute; inset: 0; display: grid; place-items: center;
  animation: hl04-busy var(--hl04-t) ease-in-out infinite; }
.hl-04 .hl04-ask {
  position: absolute; inset: -0.3cqw; width: 3.6cqw; height: 3.6cqw; color: var(--orange);
  filter: drop-shadow(0 0 1cqw rgba(255, 159, 10, .55));
  opacity: 0; transform: scale(.4);
  animation: hl04-pop var(--hl04-t) ease-in-out infinite;
}
.hl-04 .hl04-dot  { width: 2.6cqw; height: 2.6cqw; color: var(--accent); }
.hl-04 .hl04-idle { width: 2.6cqw; height: 2.6cqw; color: #fff; opacity: .1; }

/* the wire */
.hl-04 .hl04-wire { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hl-04 .hl04-wire path { fill: none; stroke-linecap: round; }
.hl-04 .hl04-track { stroke: var(--hairline); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.hl-04 .hl04-out, .hl-04 .hl04-back {
  stroke-width: .7; stroke-dasharray: 22 140; stroke-dashoffset: 22; opacity: 0;
  filter: drop-shadow(0 0 3px rgba(79, 227, 255, .8));
}
.hl-04 .hl04-out  { stroke: var(--orange); filter: drop-shadow(0 0 3px rgba(255, 159, 10, .8));
  animation: hl04-out var(--hl04-t) ease-in-out infinite; }
.hl-04 .hl04-back { stroke: var(--glow-cyan); animation: hl04-back var(--hl04-t) ease-in-out infinite; }

/* the phone */
.hl-04 .hl04-phone {
  position: absolute; left: 69cqw; top: 4.5cqw; width: 25cqw; height: 54cqw;
  border-radius: 4.6cqw; background: var(--bg-raised);
  border: .55cqw solid var(--hairline);
}
.hl-04 .hl04-phone::after {
  content: ""; position: absolute; inset: -.55cqw; border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(79, 227, 255, .35), 0 0 6cqw rgba(79, 227, 255, .22);
  opacity: 0; animation: hl04-lit var(--hl04-t) ease-in-out infinite;
}
.hl-04 .hl04-screen {
  position: absolute; inset: .9cqw; border-radius: 3.7cqw; overflow: hidden;
  background: var(--bg-inset);
}
.hl-04 .hl04-island {
  position: absolute; top: 1.5cqw; left: 50%; width: 7cqw; height: 1.9cqw; margin-left: -3.5cqw;
  border-radius: 2cqw; background: #000;
}
.hl-04 .hl04-lines { position: absolute; top: 6.5cqw; left: 2.2cqw; right: 2.2cqw;
  display: flex; flex-direction: column; gap: 1.7cqw; }
.hl-04 .hl04-lines b { display: block; height: 1.2cqw; border-radius: 1cqw; background: var(--fg-tertiary); opacity: .4; }

.hl-04 .hl04-card {
  position: absolute; left: 1.3cqw; right: 1.3cqw; bottom: 1.3cqw;
  padding: 1.8cqw; border-radius: 2.8cqw;
  background: var(--bg-panel); border: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 1.2cqw;
  transform: translateY(120%); opacity: 0;
  animation: hl04-card var(--hl04-t) ease-in-out infinite;
}
.hl-04 .hl04-q { display: flex; align-items: center; gap: 1.2cqw; height: 2.6cqw; }
.hl-04 .hl04-q svg { width: 2.6cqw; height: 2.6cqw; color: var(--orange); flex: none; }
.hl-04 .hl04-q b { flex: 1; height: 1.2cqw; border-radius: 1cqw; background: var(--fg-secondary); opacity: .5; }
.hl-04 .hl04-chip {
  position: relative; height: 4.4cqw; border-radius: 1.5cqw;
  border: 1px solid var(--hairline); display: grid; place-items: center;
  font: 500 2.3cqw/1 var(--mono); color: var(--fg-secondary); overflow: hidden;
}
.hl-04 .hl04-pick::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--glow-blue);
  opacity: 0; animation: hl04-fill var(--hl04-t) ease-in-out infinite;
}
.hl-04 .hl04-pick { isolation: isolate; color: var(--fg); }
.hl-04 .hl04-tap {
  position: absolute; left: 50%; top: 7.8cqw; width: 6cqw; height: 6cqw; margin: -3cqw 0 0 -3cqw;
  border-radius: 50%; background: rgba(79, 227, 255, .25); border: .35cqw solid var(--glow-cyan);
  opacity: 0; transform: scale(.3);
  animation: hl04-tap var(--hl04-t) ease-out infinite;
}

@keyframes hl04-busy { 0%, 13% { opacity: 1; } 17%, 61% { opacity: 0; } 66%, 100% { opacity: 1; } }
@keyframes hl04-pop {
  0%, 13% { opacity: 0; transform: scale(.4); }
  18% { opacity: 1; transform: scale(1.15); }
  21%, 60% { opacity: 1; transform: scale(1); }
  64%, 100% { opacity: 0; transform: scale(.4); }
}
@keyframes hl04-ask { 0%, 14% { opacity: 0; } 19%, 60% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes hl04-out {
  0%, 18% { stroke-dashoffset: 22; opacity: 0; }
  19% { opacity: 1; }
  29% { stroke-dashoffset: -100; opacity: 1; }
  30%, 100% { stroke-dashoffset: -100; opacity: 0; }
}
@keyframes hl04-lit { 0%, 26% { opacity: 0; } 31%, 64% { opacity: 1; } 76%, 100% { opacity: 0; } }
@keyframes hl04-card {
  0%, 28% { transform: translateY(120%); opacity: 0; }
  36%, 58% { transform: translateY(0); opacity: 1; }
  64%, 100% { transform: translateY(0); opacity: 0; }
}
@keyframes hl04-tap {
  0%, 43% { opacity: 0; transform: scale(.3); }
  45% { opacity: 1; transform: scale(.5); }
  52%, 100% { opacity: 0; transform: scale(1.5); }
}
@keyframes hl04-fill { 0%, 45% { opacity: 0; } 48%, 60% { opacity: .85; } 64%, 100% { opacity: 0; } }
@keyframes hl04-back {
  0%, 55% { stroke-dashoffset: 22; opacity: 0; }
  56% { opacity: 1; }
  64% { stroke-dashoffset: -100; opacity: 1; }
  65%, 100% { stroke-dashoffset: -100; opacity: 0; }
}

/* 05 — Agents that talk to each other. 6.5 s loop: a CLI send is typed, then a
   message travels api → web → tests → api; each arrival lands as a collapsed,
   dimmed "From …" header on the receiving tab. */
.hl-05 { --hl05-t: 6.5s; }

.hl-05 .hl05-row {
  position: absolute; left: 5cqw; width: 63cqw; height: 9cqw;
  padding: 0 2.4cqw; border-radius: 2.2cqw;
  background: var(--bg-panel); border: 1px solid var(--hairline-soft);
  display: flex; align-items: center; gap: 2cqw;
}
.hl-05 .hl05-r1 { top: 11cqw; }
.hl-05 .hl05-r2 { top: 26.5cqw; }
.hl-05 .hl05-r3 { top: 42cqw; }
.hl-05 .hl05-row b {
  display: block; height: 1.4cqw; border-radius: 1cqw; background: var(--fg-tertiary); opacity: .5; flex: none;
}
.hl-05 .hl05-name { font: 600 2.7cqw/1 var(--mono); color: var(--fg); width: 7.5cqw; flex: none; }
.hl-05 .hl05-slot { width: 3cqw; height: 3cqw; flex: none; display: grid; place-items: center; }
.hl-05 .spinner { --sp: 3cqw; }
.hl-05 .spinner i { background: var(--fg-secondary); }
.hl-05 .hl05-idle { width: 2.6cqw; height: 2.6cqw; color: #fff; opacity: .12; }

.hl-05 .hl05-flash {
  position: absolute; inset: -1px; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(79, 227, 255, .55), 0 0 4cqw rgba(79, 227, 255, .18);
  background: rgba(79, 227, 255, .05);
  opacity: 0; animation: hl05-flash var(--hl05-t) ease-out infinite;
}
.hl-05 .hl05-r1 .hl05-flash { animation-delay: calc(var(--hl05-t) * .735); }
.hl-05 .hl05-r2 .hl05-flash { animation-delay: calc(var(--hl05-t) * .255); }
.hl-05 .hl05-r3 .hl05-flash { animation-delay: calc(var(--hl05-t) * .475); }

/* the collapsed message header that arrives on a tab */
.hl-05 .hl05-msg {
  margin-left: auto; display: flex; align-items: center; gap: 1cqw;
  height: 5cqw; padding: 0 1.8cqw; border-radius: 1.4cqw;
  background: var(--bg-raised); border: 1px solid var(--hairline);
  font: 500 2.3cqw/1 var(--mono); color: var(--fg-secondary); white-space: nowrap;
  opacity: 0; transform: translateX(3cqw);
}
.hl-05 .hl05-msg i { font-style: normal; color: var(--glow-cyan); font-size: 2.8cqw; }
.hl-05 .hl05-m1 { animation: hl05-m1 var(--hl05-t) ease-in-out infinite; }
.hl-05 .hl05-m2 { animation: hl05-m2 var(--hl05-t) ease-in-out infinite; }
.hl-05 .hl05-m3 { animation: hl05-m3 var(--hl05-t) ease-in-out infinite; }

/* the arcs */
.hl-05 .hl05-arcs { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hl-05 .hl05-arcs path { fill: none; stroke-linecap: round; }
.hl-05 .hl05-track { stroke: var(--hairline); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.hl-05 .hl05-p {
  stroke: var(--glow-cyan); stroke-width: .7; stroke-dasharray: 24 160; stroke-dashoffset: 24; opacity: 0;
  filter: drop-shadow(0 0 3px rgba(79, 227, 255, .9));
}
.hl-05 .hl05-p1 { animation: hl05-p1 var(--hl05-t) ease-in-out infinite; }
.hl-05 .hl05-p2 { animation: hl05-p2 var(--hl05-t) ease-in-out infinite; }
.hl-05 .hl05-p3 { animation: hl05-p3 var(--hl05-t) ease-in-out infinite; }

/* the CLI line that starts it */
.hl-05 .hl05-cli {
  position: absolute; left: 5cqw; top: 54.5cqw; overflow: hidden;
  font: 500 2.5cqw/1.2 var(--mono); color: var(--fg-tertiary); white-space: nowrap;
  animation: hl05-cli var(--hl05-t) ease-in-out infinite;
}
.hl-05 .hl05-prompt { color: var(--green); }
.hl-05 .hl05-cover {
  position: absolute; inset: 0; background: var(--bg-inset);
  transform-origin: right; animation: hl05-type var(--hl05-t) steps(14, end) infinite;
}

@keyframes hl05-type { 0%, 3% { transform: scaleX(1); } 14%, 100% { transform: scaleX(0); } }
@keyframes hl05-cli  { 0%, 90% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes hl05-flash { 0% { opacity: 0; } 3% { opacity: 1; } 16%, 100% { opacity: 0; } }

@keyframes hl05-p1 {
  0%, 14% { stroke-dashoffset: 24; opacity: 0; } 15% { opacity: 1; }
  25% { stroke-dashoffset: -100; opacity: 1; } 26%, 100% { stroke-dashoffset: -100; opacity: 0; }
}
@keyframes hl05-p2 {
  0%, 36% { stroke-dashoffset: 24; opacity: 0; } 37% { opacity: 1; }
  47% { stroke-dashoffset: -100; opacity: 1; } 48%, 100% { stroke-dashoffset: -100; opacity: 0; }
}
@keyframes hl05-p3 {
  0%, 58% { stroke-dashoffset: 24; opacity: 0; } 59% { opacity: 1; }
  73% { stroke-dashoffset: -100; opacity: 1; } 74%, 100% { stroke-dashoffset: -100; opacity: 0; }
}
@keyframes hl05-m1 {
  0%, 25% { opacity: 0; transform: translateX(3cqw); }
  30%, 90% { opacity: .75; transform: none; }
  97%, 100% { opacity: 0; transform: none; }
}
@keyframes hl05-m2 {
  0%, 47% { opacity: 0; transform: translateX(3cqw); }
  52%, 90% { opacity: .75; transform: none; }
  97%, 100% { opacity: 0; transform: none; }
}
@keyframes hl05-m3 {
  0%, 73% { opacity: 0; transform: translateX(3cqw); }
  78%, 90% { opacity: .75; transform: none; }
  97%, 100% { opacity: 0; transform: none; }
}

/* 06 — Sessions that outlive the app.
   Loop (6 s): the window closes (red light flashes), its rows go with it, the
   session dots keep pulsing on their own ("still running"); the window comes
   back, rows slide back onto their dots, and one gets a "keep going" nudge.
   The third session is asleep throughout: dim, no pulse, a drifting z. */
.hl-06 .hl-art > * { position: absolute; }

.hl-06 .hl06-win {
  left: 11cqw; top: 6cqw; width: 78cqw; height: 49cqw;
  border-radius: 2.6cqw;
  background: var(--bg-panel);
  border: 1px solid var(--hairline);
  box-shadow: 0 3cqw 6cqw -3cqw rgba(0, 0, 0, .7);
  animation: hl06-win 6s ease-in-out infinite;
}
.hl-06 .hl06-tb {
  height: 7cqw; display: flex; align-items: center; gap: 1.4cqw; padding: 0 2.6cqw;
  border-bottom: 1px solid var(--hairline-soft);
}
.hl-06 .hl06-tb i {
  width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: var(--hairline); display: block;
}
.hl-06 .hl06-tb i:first-child { background: var(--red); opacity: .25; animation: hl06-close 6s ease-in-out infinite; }

.hl-06 .hl06-row {
  left: 16cqw; width: 68cqw; height: 8cqw;
  border-radius: 2cqw;
  background: var(--bg-raised);
  border: 1px solid var(--hairline-soft);
  display: flex; align-items: center; gap: 2cqw; padding-left: 9cqw;
  animation: hl06-row 6s ease-in-out infinite;
}
.hl-06 .hl06-r1 { top: 17cqw; }
.hl-06 .hl06-r2 { top: 28cqw; animation-delay: .08s; }
.hl-06 .hl06-r3 { top: 39cqw; animation-delay: .16s; }
.hl-06 .hl06-row b { display: block; height: 1.6cqw; width: 22cqw; border-radius: 1cqw; background: var(--fg-secondary); opacity: .55; }
.hl-06 .hl06-row b.s { width: 10cqw; background: var(--fg-tertiary); opacity: .6; }
.hl-06 .hl06-r3 b { opacity: .25; }
.hl-06 .hl06-r2 b:first-child { width: 17cqw; }

.hl-06 .hl06-kg {
  margin-left: auto; margin-right: 2.2cqw;
  font: 500 2.7cqw/1 var(--mono); letter-spacing: -.02em;
  color: var(--glow-cyan);
  padding: 1cqw 1.6cqw; border-radius: 1.4cqw;
  background: rgba(79, 227, 255, .1);
  border: 1px solid rgba(79, 227, 255, .28);
  opacity: 0;
  animation: hl06-kg 6s ease-in-out infinite;
}

/* The session processes — they never stop */
.hl-06 .hl06-d {
  left: 20cqw; width: 3cqw; height: 3cqw; margin: -1.5cqw 0 0 -1.5cqw;
  border-radius: 50%;
  background: var(--glow-cyan);
  box-shadow: 0 0 2.4cqw rgba(79, 227, 255, .55);
}
.hl-06 .hl06-d1 { top: 21cqw; }
.hl-06 .hl06-d2 { top: 32cqw; }
.hl-06 .hl06-d3 { top: 43cqw; background: var(--fg-tertiary); box-shadow: none; opacity: .7; }
.hl-06 .hl06-d1::after,
.hl-06 .hl06-d2::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid var(--glow-cyan);
  animation: hl06-ping 1.5s ease-out infinite;
}
.hl-06 .hl06-d2::after { animation-delay: .5s; }
.hl-06 .hl06-d3 em {
  position: absolute; left: 3.2cqw; top: -2.4cqw;
  font: 600 3cqw/1 var(--mono); font-style: normal; color: var(--fg-secondary);
  animation: hl06-z 3s ease-in-out infinite;
}

.hl-06 .hl06-lbl {
  left: 0; right: 0; top: 52cqw; text-align: center;
  font: 500 2.8cqw/1 var(--mono); letter-spacing: .04em; color: var(--glow-cyan);
  opacity: 0;
  animation: hl06-lbl 6s ease-in-out infinite;
}

@keyframes hl06-win {
  0%, 20%   { opacity: 1; transform: none; }
  27%, 60%  { opacity: 0; transform: scale(.94); }
  68%, 100% { opacity: 1; transform: none; }
}
@keyframes hl06-row {
  0%, 20%   { opacity: 1; transform: none; }
  26%, 62%  { opacity: 0; transform: translateX(4cqw); }
  71%, 100% { opacity: 1; transform: none; }
}
@keyframes hl06-close {
  0%, 12%  { opacity: .25; }
  16%, 21% { opacity: 1; }
  27%, 100% { opacity: .25; }
}
@keyframes hl06-kg {
  0%, 74%   { opacity: 0; transform: translateX(-2cqw); }
  79%, 93%  { opacity: 1; transform: none; }
  98%, 100% { opacity: 0; transform: none; }
}
@keyframes hl06-lbl {
  0%, 28%   { opacity: 0; transform: translateY(1cqw); }
  34%, 56%  { opacity: 1; transform: none; }
  62%, 100% { opacity: 0; transform: none; }
}
@keyframes hl06-ping {
  0%   { opacity: .8; transform: scale(1); }
  100% { opacity: 0;  transform: scale(2.8); }
}
@keyframes hl06-z {
  0%   { opacity: 0; transform: translate(0, 0); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translate(1.5cqw, -3cqw); }
}

/* 07 — Run it on another machine.
   Loop (6 s): a bundle of uncommitted file bars travels from the laptop to the
   host; the host's terminal fills while output bars stream back and land as
   lines on the laptop; the host goes green and a +/- diff rides home, lighting
   the laptop's changed file. */
.hl-07 .hl-art > * { position: absolute; }

.hl-07 .hl07-cmd {
  left: 5cqw; top: 5.2cqw;
  font: 500 2.9cqw/1 var(--mono); color: var(--fg-secondary); white-space: nowrap;
}
.hl-07 .hl07-cmd b { color: var(--glow-cyan); font-weight: 600; }

/* Laptop */
.hl-07 .hl07-mac {
  left: 6cqw; top: 12cqw; width: 33cqw; height: 31cqw;
  border-radius: 2.2cqw 2.2cqw .8cqw .8cqw;
  background: var(--bg-panel);
  border: 1px solid var(--hairline);
}
.hl-07 .hl07-base {
  left: 3cqw; top: 43.4cqw; width: 39cqw; height: 1.8cqw;
  border-radius: .4cqw .4cqw 1.4cqw 1.4cqw;
  background: var(--bg-raised); border: 1px solid var(--hairline);
}
.hl-07 .hl07-mac i, .hl-07 .hl07-host i { position: absolute; display: block; border-radius: 1cqw; }
.hl-07 .hl07-f { left: 3cqw; height: 2cqw; background: var(--fg-tertiary); opacity: .55; }
.hl-07 .hl07-f::before {
  content: ""; position: absolute; left: -2cqw; top: .5cqw; width: 1cqw; height: 1cqw;
  border-radius: 50%; background: var(--glow-cyan);
}
.hl-07 .hl07-f1 { top: 3.4cqw; width: 18cqw; }
.hl-07 .hl07-f2 { top: 7.2cqw; width: 24cqw; }
.hl-07 .hl07-f2::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--green); box-shadow: 0 0 1.6cqw rgba(48, 209, 88, .5);
  opacity: 0; animation: hl07-home 6s ease-in-out infinite;
}
.hl-07 .hl07-f3 { top: 11cqw; width: 14cqw; }
.hl-07 .hl07-o {
  left: 3cqw; height: 1.4cqw; background: var(--glow-cyan); opacity: 0;
  transform-origin: left center;
}
.hl-07 .hl07-o1 { top: 17.5cqw; width: 22cqw; animation: hl07-o 6s ease-out infinite .0s; }
.hl-07 .hl07-o2 { top: 21cqw;   width: 16cqw; animation: hl07-o 6s ease-out infinite .35s; }
.hl-07 .hl07-o3 { top: 24.5cqw; width: 25cqw; animation: hl07-o 6s ease-out infinite .7s; }

/* Host */
.hl-07 .hl07-host {
  left: 60cqw; top: 9cqw; width: 35cqw; height: 36.2cqw;
  border-radius: 2.6cqw;
  background: var(--bg-panel);
  border: 1px solid var(--hairline);
  box-shadow: 0 0 5cqw -1cqw rgba(79, 227, 255, .12);
}
.hl-07 .hl07-hname {
  position: absolute; left: 3cqw; top: 2.6cqw;
  font: 600 2.7cqw/1 var(--mono); color: var(--fg-secondary);
}
.hl-07 .hl07-ok {
  right: 3cqw; top: 2.5cqw; width: 2.8cqw; height: 2.8cqw; border-radius: 50% !important;
  background: var(--fg-tertiary); opacity: .5;
}
.hl-07 .hl07-ok::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 2cqw rgba(48, 209, 88, .6);
  opacity: 0; animation: hl07-ok 6s ease-in-out infinite;
}
.hl-07 .hl07-h {
  left: 3cqw; height: 1.6cqw; background: var(--fg-secondary); opacity: 0;
  transform-origin: left center;
}
.hl-07 .hl07-h1 { top: 9cqw;  width: 22cqw; animation: hl07-h 6s ease-out infinite 0s; }
.hl-07 .hl07-h2 { top: 13cqw; width: 26cqw; animation: hl07-h 6s ease-out infinite .3s; }
.hl-07 .hl07-h3 { top: 17cqw; width: 15cqw; animation: hl07-h 6s ease-out infinite .6s; }
.hl-07 .hl07-h4 { top: 21cqw; width: 24cqw; animation: hl07-h 6s ease-out infinite .9s; }

/* The link between them */
.hl-07 .hl07-wire {
  left: 41.5cqw; top: 27cqw; width: 17cqw; height: 0;
  border-top: 1px dashed var(--hairline);
}
.hl-07 .hl07-pkt {
  left: 41cqw; top: 23.6cqw; width: 8cqw; height: 6.8cqw;
  border-radius: 1.6cqw; padding: 1.2cqw 1.4cqw;
  display: flex; flex-direction: column; justify-content: space-between;
  background: rgba(79, 227, 255, .12); border: 1px solid rgba(79, 227, 255, .45);
  box-shadow: 0 0 3cqw rgba(79, 227, 255, .3);
  opacity: 0;
  animation: hl07-pkt 6s ease-in-out infinite;
}
.hl-07 .hl07-pkt i { display: block; height: 1cqw; border-radius: .5cqw; background: var(--glow-cyan); }
.hl-07 .hl07-pkt i:nth-child(2) { width: 70%; }
.hl-07 .hl07-pkt i:nth-child(3) { width: 45%; }

.hl-07 .hl07-s {
  left: 54cqw; top: 26.4cqw; width: 3.6cqw; height: 1.2cqw; border-radius: .6cqw;
  background: var(--glow-cyan); box-shadow: 0 0 1.6cqw rgba(79, 227, 255, .6);
  opacity: 0;
  animation: hl07-s 6s linear infinite;
}
.hl-07 .hl07-s2 { animation-delay: .35s; }
.hl-07 .hl07-s3 { animation-delay: .7s; }

.hl-07 .hl07-diff {
  left: 50cqw; top: 23.6cqw; width: 8cqw; height: 6.8cqw;
  border-radius: 1.6cqw; padding: 1.4cqw;
  display: flex; flex-direction: column; justify-content: space-around;
  background: var(--bg-raised); border: 1px solid var(--hairline);
  opacity: 0;
  animation: hl07-diff 6s ease-in-out infinite;
}
.hl-07 .hl07-diff i { display: block; height: 1.2cqw; border-radius: .6cqw; }
.hl-07 .hl07-diff .p { background: var(--green); width: 100%; }
.hl-07 .hl07-diff .m { background: var(--red); width: 60%; opacity: .85; }

.hl-07 .hl07-lbl {
  top: 50cqw; width: 33cqw; text-align: center;
  font: 500 2.6cqw/1 var(--mono); color: var(--fg-tertiary); letter-spacing: .03em;
}
.hl-07 .hl07-l1 { left: 6cqw; }
.hl-07 .hl07-l2 { left: 61cqw; }

/* Timeline — 0–12 rest, 12–32 bundle out, 34–62 run + stream back,
   64–80 diff home, 80–92 rest, 92–100 reset */
@keyframes hl07-pkt {
  0%, 10%   { opacity: 0; transform: translateX(-3cqw) scale(.85); }
  14%       { opacity: 1; transform: translateX(0) scale(1); }
  30%       { opacity: 1; transform: translateX(15cqw) scale(1); }
  34%, 100% { opacity: 0; transform: translateX(18cqw) scale(.7); }
}
@keyframes hl07-h {
  0%, 34%   { opacity: 0; transform: scaleX(0); }
  40%, 90%  { opacity: .6; transform: scaleX(1); }
  96%, 100% { opacity: 0; transform: scaleX(1); }
}
@keyframes hl07-s {
  0%, 38%   { opacity: 0; transform: translateX(0); }
  40%       { opacity: 1; }
  48%       { opacity: 1; transform: translateX(-13cqw); }
  50%, 100% { opacity: 0; transform: translateX(-15cqw); }
}
@keyframes hl07-o {
  0%, 47%   { opacity: 0; transform: scaleX(0); }
  52%, 90%  { opacity: .75; transform: scaleX(1); }
  96%, 100% { opacity: 0; transform: scaleX(1); }
}
@keyframes hl07-ok {
  0%, 60%   { opacity: 0; transform: scale(.4); }
  64%, 92%  { opacity: 1; transform: scale(1); }
  97%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes hl07-diff {
  0%, 63%   { opacity: 0; transform: translateX(3cqw) scale(.8); }
  67%       { opacity: 1; transform: translateX(0) scale(1); }
  79%       { opacity: 1; transform: translateX(-12cqw) scale(1); }
  83%, 100% { opacity: 0; transform: translateX(-16cqw) scale(.7); }
}
@keyframes hl07-home {
  0%, 80%   { opacity: 0; }
  84%, 92%  { opacity: 1; }
  98%, 100% { opacity: 0; }
}

/* 08 — Cloud machines on demand.
   Loop (6 s): a machine's outline draws itself under your cloud account and
   fills in; the cost meter ticks up toward the session cap while the odometer
   counts spend; near the cap it turns orange, the machine dissolves into bits
   and "destroyed" shows; the meter drains and the loop rests. */
.hl-08 .hl-art > * { position: absolute; }

.hl-08 .hl08-cloud {
  left: 39cqw; top: 2.6cqw; width: 22cqw; height: 11cqw; overflow: visible;
}
.hl-08 .hl08-cloud path {
  fill: rgba(79, 227, 255, .08); stroke: var(--glow-blue); stroke-opacity: .7; stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.hl-08 .hl08-acct {
  left: 0; right: 0; top: 14.6cqw; text-align: center;
  font: 500 2.4cqw/1 var(--mono); color: var(--fg-tertiary); letter-spacing: .03em;
}
.hl-08 .hl08-drop {
  left: 50cqw; top: 18.4cqw; width: 0; height: 3cqw;
  border-left: 1px dashed var(--hairline);
}

/* The machine */
.hl-08 .hl08-ghost {
  left: 34cqw; top: 22cqw; width: 32cqw; height: 18cqw; overflow: visible;
}
.hl-08 .hl08-ghost rect {
  fill: none; stroke: var(--glow-cyan); stroke-width: 1.2; vector-effect: non-scaling-stroke;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: hl08-draw 6s ease-in-out infinite;
}
.hl-08 .hl08-box {
  left: 34cqw; top: 22cqw; width: 32cqw; height: 18cqw;
  border-radius: 2.6cqw; padding: 3cqw 3cqw;
  background: linear-gradient(180deg, var(--bg-raised), var(--bg-panel));
  border: 1px solid rgba(79, 227, 255, .35);
  box-shadow: 0 0 5cqw -1cqw rgba(79, 227, 255, .35);
  display: flex; flex-direction: column; gap: 2.4cqw;
  opacity: 0;
  animation: hl08-box 6s ease-in-out infinite;
}
.hl-08 .hl08-slot {
  display: block; height: 3.6cqw; width: 18cqw; border-radius: 1cqw;
  background: var(--bg-inset); border: 1px solid var(--hairline);
}
.hl-08 .hl08-led {
  position: absolute; right: 3.4cqw; top: 3.6cqw; width: 2.2cqw; height: 2.2cqw;
  border-radius: 50%; background: var(--glow-cyan); box-shadow: 0 0 2cqw rgba(79, 227, 255, .8);
  animation: hl08-led 1s ease-in-out infinite;
}

.hl-08 .hl08-bit {
  width: 2.8cqw; height: 2.8cqw; border-radius: .7cqw;
  background: var(--glow-cyan); box-shadow: 0 0 2cqw rgba(79, 227, 255, .7); opacity: 0;
  animation: hl08-bit 6s ease-out infinite;
}
.hl-08 .hl08-b1 { left: 38cqw; top: 30cqw; --dx: -5cqw; --dy: -9cqw; }
.hl-08 .hl08-b2 { left: 46cqw; top: 26cqw; --dx: -1cqw; --dy: -12cqw; }
.hl-08 .hl08-b3 { left: 53cqw; top: 33cqw; --dx: 2cqw;  --dy: -10cqw; }
.hl-08 .hl08-b4 { left: 60cqw; top: 27cqw; --dx: 6cqw;  --dy: -11cqw; }
.hl-08 .hl08-b5 { left: 49cqw; top: 36cqw; --dx: 0cqw;  --dy: -7cqw; }

.hl-08 .hl08-gone {
  left: 0; right: 0; top: 29.6cqw; text-align: center;
  font: 500 2.8cqw/1 var(--mono); letter-spacing: .04em; color: var(--fg-secondary);
  opacity: 0;
  animation: hl08-gone 6s ease-in-out infinite;
}

/* Cost meter */
.hl-08 .hl08-meter { left: 12cqw; right: 12cqw; top: 44.5cqw; height: 12cqw; }
.hl-08 .hl08-rate, .hl-08 .hl08-odo, .hl-08 .hl08-cap {
  position: absolute; top: 0; font: 500 2.8cqw/1 var(--mono); white-space: nowrap;
}
.hl-08 .hl08-rate { left: 0; color: var(--fg-tertiary); }
.hl-08 .hl08-odo {
  left: 15cqw; height: 3.4cqw; overflow: hidden; color: var(--fg);
}
.hl-08 .hl08-odo > span {
  display: block; line-height: 3.4cqw;
  animation: hl08-odo 6s infinite;
}
.hl-08 .hl08-cap { right: 0; color: var(--fg-secondary); }
.hl-08 .hl08-track {
  position: absolute; left: 0; right: 0; top: 5.6cqw; height: 2cqw; border-radius: 1cqw;
  background: var(--bg-raised); border: 1px solid var(--hairline-soft); overflow: hidden;
}
.hl-08 .hl08-track i {
  position: absolute; inset: 0; border-radius: inherit; transform-origin: left center;
  transform: scaleX(0);
}
.hl-08 .hl08-fill {
  background: linear-gradient(90deg, var(--glow-blue), var(--glow-cyan));
  animation: hl08-fill 6s infinite;
}
.hl-08 .hl08-warn {
  background: linear-gradient(90deg, var(--glow-blue), var(--orange));
  opacity: 0;
  animation: hl08-fill 6s infinite, hl08-warn 6s ease-in-out infinite;
}

/* Timeline — 0–6 rest, 6–18 draw, 18–24 fill in, 24–66 metered, 62 warn,
   68–78 dissolve, 78–90 "destroyed", 90–100 meter drains */
@keyframes hl08-draw {
  0%, 6%    { stroke-dashoffset: 100; opacity: 1; }
  18%       { stroke-dashoffset: 0; opacity: 1; }
  26%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes hl08-box {
  0%, 16%   { opacity: 0; transform: scale(.96); }
  24%, 66%  { opacity: 1; transform: none; }
  76%, 100% { opacity: 0; transform: scale(.82); }
}
@keyframes hl08-led {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}
@keyframes hl08-bit {
  0%, 67%   { opacity: 0; transform: translate(0, 0) scale(1); }
  69%       { opacity: .9; }
  82%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); }
}
@keyframes hl08-gone {
  0%, 74%   { opacity: 0; }
  79%, 90%  { opacity: 1; }
  95%, 100% { opacity: 0; }
}
@keyframes hl08-fill {
  0%, 24%   { transform: scaleX(0);   animation-timing-function: linear; }
  66%       { transform: scaleX(1);   animation-timing-function: ease-in-out; }
  90%       { transform: scaleX(1);   animation-timing-function: ease-in-out; }
  98%, 100% { transform: scaleX(0); }
}
@keyframes hl08-warn {
  0%, 54%   { opacity: 0; }
  62%, 90%  { opacity: 1; }
  96%, 100% { opacity: 0; }
}
/* steps of one line (3.4cqw) each, in time with the fill */
@keyframes hl08-odo {
  0%, 24%   { transform: translateY(0); }
  25%, 34%  { transform: translateY(0); }
  35%, 44%  { transform: translateY(-3.4cqw); }
  45%, 54%  { transform: translateY(-6.8cqw); }
  55%, 64%  { transform: translateY(-10.2cqw); }
  66%, 92%  { transform: translateY(-13.6cqw); }
  96%, 100% { transform: translateY(0); }
}

/* 09 — Accounts, pools and usage. 6.5 s loop: the tab's login (A) fills past its
   soft line and then its hard line; the tab hops to C, the member still under
   soft, and C's meter starts to climb. Hatching marks usage past soft. */
.hl-09 { --hl09-t: 6.5s; }

.hl-09 .hl09-stage { position: absolute; inset: 0; animation: hl09-stage var(--hl09-t) ease-in-out infinite; }
.hl-09 .hl09-head {
  position: absolute; left: 19cqw; top: 5.2cqw;
  font: 500 2.4cqw/1 var(--mono); color: var(--fg-tertiary); letter-spacing: .02em;
}
.hl-09 .hl09-head span { color: var(--glow-cyan); }

.hl-09 .hl09-row {
  position: absolute; left: 19cqw; right: 4.5cqw; height: 10cqw;
  padding: 0 2.4cqw; border-radius: 2.2cqw;
  background: var(--bg-panel); border: 1px solid var(--hairline-soft);
  display: flex; align-items: center; gap: 2.4cqw;
}
.hl-09 .hl09-ra { top: 13cqw; }
.hl-09 .hl09-rb { top: 27cqw; }
.hl-09 .hl09-rc { top: 41cqw; }
.hl-09 .hl09-lease {
  position: absolute; inset: -1px; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(79, 227, 255, .55), 0 0 4cqw rgba(79, 227, 255, .16);
  opacity: 0;
}
.hl-09 .hl09-ra .hl09-lease { animation: hl09-leaseA var(--hl09-t) ease-in-out infinite; }
.hl-09 .hl09-rc .hl09-lease { animation: hl09-leaseC var(--hl09-t) ease-in-out infinite; }

.hl-09 .hl09-name { font: 600 2.5cqw/1 var(--mono); color: var(--fg); width: 10cqw; flex: none; white-space: nowrap; }
.hl-09 .hl09-reset { font: 500 2.3cqw/1 var(--mono); color: var(--fg-tertiary); width: 7cqw; flex: none; text-align: right; white-space: nowrap; }

.hl-09 .hl09-meter { position: relative; flex: 1; height: 2.4cqw; }
.hl-09 .hl09-clip {
  position: absolute; inset: 0; border-radius: 2cqw; overflow: hidden;
  background: var(--bg-inset); box-shadow: inset 0 0 0 1px var(--hairline);
}
.hl-09 .hl09-fill {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--glow-deep), var(--glow-blue) 40%, var(--glow-cyan) 70%, transparent 70%),
    repeating-linear-gradient(-45deg, rgba(79, 227, 255, .85) 0 .7cqw, rgba(79, 227, 255, .3) .7cqw 1.4cqw);
}
/* The cover hides the meter right of the reading; sliding it is the fill. */
.hl-09 .hl09-cover { position: absolute; inset: 0; background: var(--bg-inset); }
.hl-09 .hl09-ra .hl09-cover { transform: translateX(62%); animation: hl09-fillA var(--hl09-t) ease-in-out infinite; }
.hl-09 .hl09-rb .hl09-cover { transform: translateX(80%); }
.hl-09 .hl09-rc .hl09-cover { transform: translateX(22%); animation: hl09-fillC var(--hl09-t) ease-in-out infinite; }

.hl-09 .hl09-soft, .hl-09 .hl09-hard {
  position: absolute; top: -1cqw; bottom: -1cqw; width: .35cqw; margin-left: -.175cqw; border-radius: 1cqw;
}
.hl-09 .hl09-soft { left: 70%; background: var(--fg-secondary); opacity: .55; }
.hl-09 .hl09-hard { left: 90%; background: var(--red); opacity: .5; }
.hl-09 .hl09-ra .hl09-hard {
  box-shadow: 0 0 1.6cqw rgba(255, 69, 58, .9);
  animation: hl09-hard var(--hl09-t) ease-in-out infinite;
}

/* the tab */
.hl-09 .hl09-tab {
  position: absolute; left: 3.5cqw; top: 14.5cqw; width: 12.5cqw; height: 7cqw;
  border-radius: 1.8cqw; background: var(--bg-raised); border: 1px solid var(--hairline);
  display: flex; align-items: center; gap: 1.4cqw; padding: 0 1.8cqw;
  box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, .4), 0 0 3cqw rgba(79, 227, 255, .12);
  animation: hl09-hop var(--hl09-t) ease-in-out infinite;
}
.hl-09 .hl09-tab::after {
  content: ""; position: absolute; left: 100%; top: 50%; width: 3cqw; height: 1px;
  background: linear-gradient(90deg, var(--glow-cyan), transparent); opacity: .7;
}
.hl-09 .hl09-tab b { flex: 1; height: 1.3cqw; border-radius: 1cqw; background: var(--fg-secondary); opacity: .5; }
.hl-09 .spinner { --sp: 2.8cqw; }
.hl-09 .spinner i { background: var(--fg-secondary); }

@keyframes hl09-stage { 0% { opacity: 0; } 4%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes hl09-fillA {
  0%, 6% { transform: translateX(62%); }
  36%, 96% { transform: translateX(94%); }
  98%, 100% { transform: translateX(62%); }
}
@keyframes hl09-fillC {
  0%, 56% { transform: translateX(22%); }
  86%, 96% { transform: translateX(40%); }
  98%, 100% { transform: translateX(22%); }
}
@keyframes hl09-hard { 0%, 30% { opacity: .5; } 34%, 48% { opacity: 1; } 56%, 100% { opacity: .5; } }
@keyframes hl09-leaseA { 0%, 38% { opacity: 1; } 44%, 100% { opacity: 0; } }
@keyframes hl09-leaseC { 0%, 50% { opacity: 0; } 56%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes hl09-hop {
  0%, 40% { transform: translateY(0) scale(1); }
  47% { transform: translateY(14cqw) translateX(-1.5cqw) scale(1.08); }
  54%, 96% { transform: translateY(28cqw) scale(1); }
  98%, 100% { transform: translateY(0) scale(1); }
}

/* ==== 10 Swarms and task routing (7 s loop) ====
   0–6%    three released tasks wait; three model slots stand empty
   6–26    each task's rule lights and the task flies to the model that suits its kind
   14–54   agents work; the middle agent's account runs low
   56–64   it is handed to a fresh account (acct 1 → acct 2) without stopping
   68–84   Pause from the phone: spinners become pause bars, the swarm dims; Resume
   94–100  tasks fade back to the queue for the next loop                       */

.hl-10 .hl-art {
  --hl10-c: 79, 227, 255;
  --hl10-b: 26, 146, 255;
  --hl10-f: 233, 238, 247;
  --hl10-t: 7s;
  --hl10-ease: cubic-bezier(.45, 0, .25, 1);
  --hl10-txt: clamp(7px, 2.7cqw, 10.5px);
}

/* ---------- rules card ---------- */
.hl-10 .hl10-rules {
  position: absolute; left: 5cqw; top: 5cqw; width: 33.5cqw; height: 23cqw;
  border-radius: 2.4cqw; background: var(--bg-panel); border: 1px solid var(--hairline);
  padding: 2.4cqw 2.8cqw; display: flex; flex-direction: column; justify-content: space-between;
}
.hl-10 .hl10-cap { font: 600 var(--hl10-txt) / 1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-tertiary); }
.hl-10 .hl10-rule { position: relative; display: flex; align-items: center; gap: 1.6cqw; height: 3.2cqw; }
.hl-10 .hl10-rule::before {
  content: ""; position: absolute; inset: -.6cqw -1.2cqw; border-radius: 1.2cqw;
  background: rgba(var(--hl10-c), .1); border: 1px solid rgba(var(--hl10-c), .45);
  opacity: 0; animation: var(--hl10-t) var(--hl10-ease) infinite both;
}
.hl-10 .hl10-q1::before { animation-name: hl10-q1; }
.hl-10 .hl10-q2::before { animation-name: hl10-q2; }
.hl-10 .hl10-q3::before { animation-name: hl10-q3; }
.hl-10 .hl10-txt { display: block; width: var(--w); height: 1.3cqw; border-radius: 1cqw; background: var(--fg-secondary); opacity: .55; }
.hl-10 .hl10-to { flex: 1; height: 0; border-top: 1px dashed var(--fg-tertiary); }
.hl-10 .hl10-dot { display: block; width: 2.2cqw; height: 2.2cqw; border-radius: 50%; flex: none; }
.hl-10 .hl10-dc { background: var(--glow-cyan); box-shadow: 0 0 1.2cqw rgba(var(--hl10-c), .7); }
.hl-10 .hl10-db { background: var(--glow-blue); box-shadow: 0 0 1.2cqw rgba(var(--hl10-b), .7); }
.hl-10 .hl10-df { background: var(--fg); }

/* ---------- slots ---------- */
.hl-10 .hl10-slot {
  position: absolute; left: 50cqw; width: 45cqw; height: 15cqw;
  border-radius: 2.4cqw; background: rgba(13, 20, 36, .7); border: 1px solid var(--hairline-soft);
  animation: hl10-dim var(--hl10-t) var(--hl10-ease) infinite;
}
.hl-10 .hl10-sa { top: 4cqw; }
.hl-10 .hl10-sb { top: 21.5cqw; }
.hl-10 .hl10-sc { top: 39cqw; }
.hl-10 .hl10-model {
  position: absolute; left: 2.2cqw; top: 3.1cqw; width: 4.6cqw; height: 4.6cqw; border-radius: 50%;
  border: 1.5px solid var(--k1); background: var(--bg-raised);
}
.hl-10 .hl10-mc { --k1: var(--glow-cyan); --k: var(--hl10-c); }
.hl-10 .hl10-mb { --k1: var(--glow-blue); --k: var(--hl10-b); }
.hl-10 .hl10-mf { --k1: var(--fg); --k: var(--hl10-f); }
.hl-10 .hl10-model::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 1.4cqw; height: 1.4cqw; margin: -.7cqw 0 0 -.7cqw;
  border-radius: 50%; background: var(--k1); box-shadow: 0 0 1.2cqw rgba(var(--k), .8);
  animation: hl10-running var(--hl10-t) var(--hl10-ease) infinite;
}
.hl-10 .hl10-spin { position: absolute; inset: -1.1cqw; opacity: 0; animation: var(--hl10-t) var(--hl10-ease) infinite both; }
.hl-10 .hl10-spin::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid transparent; border-top-color: var(--k1); border-right-color: rgba(var(--k), .35);
  animation: hl10-rot .875s linear infinite;
}
.hl-10 .hl10-sb .hl10-spin { animation-name: hl10-spinB; }
.hl-10 .hl10-sa .hl10-spin { animation-name: hl10-spinA; }
.hl-10 .hl10-sc .hl10-spin { animation-name: hl10-spinC; }
/* pause bars beside the agent while the swarm is paused */
.hl-10 .hl10-pz {
  position: absolute; left: 50%; top: 50%; width: 1.8cqw; height: 1.8cqw; margin: -.9cqw 0 0 -.9cqw;
  background: linear-gradient(90deg, var(--fg-secondary) 0 35%, transparent 35% 65%, var(--fg-secondary) 65%);
  opacity: 0; animation: hl10-paused var(--hl10-t) var(--hl10-ease) infinite;
}
.hl-10 .hl10-land {
  position: absolute; left: calc(8.5cqw + 1px); top: calc(2.2cqw + 1px); width: calc(33.5cqw - 2px); height: calc(6.5cqw - 2px);
  border-radius: 1.6cqw; border: 1px dashed var(--hairline);
}
.hl-10 .hl10-acct {
  position: absolute; left: 8.5cqw; top: 10.3cqw; width: 33.5cqw; height: 2.4cqw;
  display: flex; align-items: center; gap: 1.6cqw;
}
.hl-10 .hl10-acct b { font: 600 calc(var(--hl10-txt) * .9) / 1 var(--mono); color: var(--fg-tertiary); white-space: nowrap; }
.hl-10 .hl10-acct::after {
  content: ""; position: absolute; right: 0; width: calc(100% - 9cqw); height: 1cqw; border-radius: 1cqw;
  background: var(--hairline); z-index: 0;
}
.hl-10 .hl10-meter {
  position: relative; z-index: 1; display: block; flex: 1; height: 1cqw; border-radius: 1cqw;
  background: linear-gradient(90deg, rgba(var(--hl10-c), .5), var(--glow-cyan));
  transform-origin: left center;
}
.hl-10 .hl10-ma  { animation: hl10-ma var(--hl10-t) linear infinite; }
.hl-10 .hl10-mc2 { animation: hl10-mcc var(--hl10-t) linear infinite; }
.hl-10 .hl10-drain { animation: hl10-drain var(--hl10-t) linear infinite; }
.hl-10 .hl10-old { animation: hl10-old var(--hl10-t) var(--hl10-ease) infinite; }
.hl-10 .hl10-new { opacity: 0; animation: hl10-new var(--hl10-t) var(--hl10-ease) infinite; }
.hl-10 .hl10-new b { color: var(--glow-cyan); }
.hl-10 .hl10-flash {
  position: absolute; inset: -1px; border-radius: inherit;
  border: 1px solid rgba(var(--hl10-c), .85); box-shadow: 0 0 3cqw rgba(var(--hl10-c), .3), inset 0 0 2cqw rgba(var(--hl10-c), .12);
  opacity: 0; animation: hl10-flash var(--hl10-t) var(--hl10-ease) infinite;
}

/* ---------- tasks ---------- */
.hl-10 .hl10-task {
  position: absolute; left: 5cqw; width: 33.5cqw; height: 6.5cqw; z-index: 2;
  display: flex; align-items: center; gap: 1.6cqw; padding: 0 2.2cqw;
  border-radius: 1.6cqw; background: var(--bg-raised); border: 1px solid var(--hairline);
  box-shadow: 0 1cqw 2.4cqw rgba(0, 0, 0, .45);
  animation: var(--hl10-t) var(--hl10-ease) infinite both;
}
.hl-10 .hl10-task b { font: 600 var(--hl10-txt) / 1 var(--mono); color: var(--fg); }
.hl-10 .hl10-tbar { display: block; flex: 1; height: 1.1cqw; border-radius: 1cqw; background: var(--hairline); }
.hl-10 .hl10-kdot { position: relative; display: block; width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: var(--fg-tertiary); flex: none; }
.hl-10 .hl10-kdot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--k1); box-shadow: 0 0 1cqw rgba(var(--k), .8);
  opacity: 0; animation: var(--hl10-t) var(--hl10-ease) infinite both;
}
.hl-10 .hl10-t1 { top: 32cqw; --k1: var(--glow-blue); --k: var(--hl10-b); animation-name: hl10-t1; }
.hl-10 .hl10-t2 { top: 40.5cqw; --k1: var(--glow-cyan); --k: var(--hl10-c); animation-name: hl10-t2; }
.hl-10 .hl10-t3 { top: 49cqw; --k1: var(--fg); --k: var(--hl10-f); animation-name: hl10-t3; }
.hl-10 .hl10-t1 .hl10-kdot::after { animation-name: hl10-k1; }
.hl-10 .hl10-t2 .hl10-kdot::after { animation-name: hl10-k2; }
.hl-10 .hl10-t3 .hl10-kdot::after { animation-name: hl10-k3; }

/* ---------- phone ---------- */
.hl-10 .hl10-phone {
  position: absolute; left: 40.5cqw; top: 44cqw; width: 7cqw; height: 12cqw;
  border-radius: 1.6cqw; background: var(--bg-panel); border: 1px solid var(--hairline);
  display: grid; place-items: center;
}
.hl-10 .hl10-btn {
  position: relative; width: 4.4cqw; height: 4.4cqw; border-radius: 50%;
  background: rgba(var(--hl10-c), .12); border: 1px solid rgba(var(--hl10-c), .6);
  animation: hl10-press var(--hl10-t) var(--hl10-ease) infinite;
}
.hl-10 .hl10-btn svg { position: absolute; left: 50%; top: 50%; width: 2.4cqw; height: 2.4cqw; margin: -1.2cqw 0 0 -1.2cqw; fill: var(--glow-cyan); }
.hl-10 .hl10-pause { animation: hl10-showpause var(--hl10-t) steps(1, end) infinite; }
.hl-10 .hl10-play { opacity: 0; animation: hl10-showplay var(--hl10-t) steps(1, end) infinite; }
.hl-10 .hl10-ripple {
  position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid var(--glow-cyan);
  opacity: 0; animation: hl10-ripple var(--hl10-t) ease-out infinite;
}

/* ---------- keyframes ---------- */
@keyframes hl10-rot { to { transform: rotate(360deg); } }

@keyframes hl10-q1 { 0%, 5% { opacity: 0; } 7% { opacity: 1; } 15%, 100% { opacity: 0; } }
@keyframes hl10-q2 { 0%, 11% { opacity: 0; } 13% { opacity: 1; } 21%, 100% { opacity: 0; } }
@keyframes hl10-q3 { 0%, 17% { opacity: 0; } 19% { opacity: 1; } 27%, 100% { opacity: 0; } }

/* fly: queue (left) → the slot its rule picked; dim while paused; fade for the reset */
@keyframes hl10-t1 {
  0% { opacity: 0; transform: none; } 3%, 7% { opacity: 1; transform: none; }
  14%, 69% { opacity: 1; transform: translate(53.5cqw, -8.3cqw); }
  72%, 83% { opacity: .45; transform: translate(53.5cqw, -8.3cqw); }
  86%, 93% { opacity: 1; transform: translate(53.5cqw, -8.3cqw); }
  98%, 100% { opacity: 0; transform: translate(53.5cqw, -8.3cqw); }
}
@keyframes hl10-t2 {
  0% { opacity: 0; transform: none; } 3%, 13% { opacity: 1; transform: none; }
  20%, 69% { opacity: 1; transform: translate(53.5cqw, -34.3cqw); }
  72%, 83% { opacity: .45; transform: translate(53.5cqw, -34.3cqw); }
  86%, 93% { opacity: 1; transform: translate(53.5cqw, -34.3cqw); }
  98%, 100% { opacity: 0; transform: translate(53.5cqw, -34.3cqw); }
}
@keyframes hl10-t3 {
  0% { opacity: 0; transform: none; } 3%, 19% { opacity: 1; transform: none; }
  26%, 69% { opacity: 1; transform: translate(53.5cqw, -7.8cqw); }
  72%, 83% { opacity: .45; transform: translate(53.5cqw, -7.8cqw); }
  86%, 93% { opacity: 1; transform: translate(53.5cqw, -7.8cqw); }
  98%, 100% { opacity: 0; transform: translate(53.5cqw, -7.8cqw); }
}
@keyframes hl10-k1 { 0%, 9% { opacity: 0; } 13%, 95% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes hl10-k2 { 0%, 15% { opacity: 0; } 19%, 95% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes hl10-k3 { 0%, 21% { opacity: 0; } 25%, 95% { opacity: 1; } 99%, 100% { opacity: 0; } }

@keyframes hl10-spinB { 0%, 13% { opacity: 0; } 15%, 69% { opacity: 1; } 71%, 84% { opacity: 0; } 86%, 93% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes hl10-spinA { 0%, 19% { opacity: 0; } 21%, 69% { opacity: 1; } 71%, 84% { opacity: 0; } 86%, 93% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes hl10-spinC { 0%, 25% { opacity: 0; } 27%, 69% { opacity: 1; } 71%, 84% { opacity: 0; } 86%, 93% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes hl10-paused { 0%, 70% { opacity: 0; } 72%, 83% { opacity: 1; } 85%, 100% { opacity: 0; } }
@keyframes hl10-running { 0%, 70% { opacity: 1; } 72%, 83% { opacity: 0; } 85%, 100% { opacity: 1; } }
@keyframes hl10-dim { 0%, 69% { opacity: 1; } 72%, 83% { opacity: .5; } 86%, 100% { opacity: 1; } }

@keyframes hl10-drain { 0%, 14% { transform: scaleX(1); } 54%, 100% { transform: scaleX(.1); } }
@keyframes hl10-ma  { 0%, 20% { transform: scaleX(1); } 70%, 84% { transform: scaleX(.72); } 96% { transform: scaleX(.66); } 100% { transform: scaleX(1); } }
@keyframes hl10-mcc { 0%, 26% { transform: scaleX(1); } 70%, 84% { transform: scaleX(.82); } 96% { transform: scaleX(.78); } 100% { transform: scaleX(1); } }
@keyframes hl10-old { 0%, 56% { opacity: 1; transform: none; } 61%, 96% { opacity: 0; transform: translateY(2.4cqw); } 100% { opacity: 1; transform: none; } }
@keyframes hl10-new { 0%, 57% { opacity: 0; transform: translateY(-2.4cqw); } 62%, 69% { opacity: 1; transform: none; } 72%, 83% { opacity: 1; transform: none; } 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes hl10-flash { 0%, 56% { opacity: 0; } 59% { opacity: 1; } 68%, 100% { opacity: 0; } }

@keyframes hl10-press { 0%, 67% { transform: scale(1); } 68.5% { transform: scale(.82); } 70%, 83% { transform: scale(1); } 84.5% { transform: scale(.82); } 86%, 100% { transform: scale(1); } }
@keyframes hl10-ripple { 0%, 67.5% { opacity: 0; transform: scale(1); } 68.5% { opacity: .9; transform: scale(1); } 76% { opacity: 0; transform: scale(2.3); } 83.5% { opacity: 0; transform: scale(1); } 84.5% { opacity: .9; transform: scale(1); } 92%, 100% { opacity: 0; transform: scale(2.3); } }
@keyframes hl10-showpause { 0% { opacity: 1; } 69% { opacity: 0; } 85% { opacity: 1; } }
@keyframes hl10-showplay  { 0% { opacity: 0; } 69% { opacity: 1; } 85% { opacity: 0; } }

/* 11 — Search every conversation: ⌘K, type, pick an old conversation, it reopens as a new tab. */
.hl-11 .hl-art s, .hl-11 .hl-art em, .hl-11 .hl-art u { display: block; text-decoration: none; font-style: normal; }

/* Agent marks (same set as tile 02) */
.hl-11 .hl11-mk {
  display: block; width: 2cqw; height: 2cqw; flex: none;
  background: var(--c, var(--glow-cyan));
  box-shadow: 0 0 1.2cqw color-mix(in srgb, var(--c, var(--glow-cyan)) 45%, transparent);
}
.hl-11 .m-circle { --c: var(--glow-cyan); border-radius: 50%; }
.hl-11 .m-sq     { --c: var(--glow-blue); border-radius: .5cqw; }
.hl-11 .m-tri    { --c: var(--fg); clip-path: polygon(50% 4%, 97% 92%, 3% 92%); box-shadow: none; }
.hl-11 .m-dia    { --c: var(--fg-secondary); border-radius: .3cqw; transform: rotate(45deg) scale(.82); }
.hl-11 .m-ring   { --c: var(--glow-cyan); background: transparent; border: .5cqw solid var(--c); border-radius: 50%; box-shadow: none; }

/* The window behind the palette */
.hl-11 .hl11-win {
  position: absolute; left: 4cqw; top: 4cqw; width: 92cqw; height: 54.5cqw; overflow: hidden;
  border-radius: 2.4cqw; background: var(--bg-panel); border: 1px solid var(--hairline);
}
.hl-11 .hl11-side {
  position: absolute; left: 0; top: 0; bottom: 0; width: 25cqw;
  background: var(--bg-raised); border-right: 1px solid var(--hairline-soft);
}
.hl-11 .hl11-srow {
  position: absolute; left: 1.6cqw; width: 21.8cqw; height: 4cqw;
  display: flex; align-items: center; gap: 1.6cqw; padding-left: 1.2cqw; border-radius: 1.2cqw;
}
.hl-11 .hl11-srow s { height: 1.1cqw; border-radius: .55cqw; background: var(--fg-secondary); opacity: .5; }
.hl-11 .hl11-new {
  background: rgba(79, 227, 255, .12); box-shadow: inset 0 0 0 1px rgba(79, 227, 255, .25);
  opacity: 0; animation: hl11-new 7s ease-in-out infinite;
}
.hl-11 .hl11-new s { background: var(--fg); opacity: .7; }
.hl-11 .hl11-pane { position: absolute; left: 28cqw; top: 4cqw; right: 3cqw; }
.hl-11 .hl11-old, .hl-11 .hl11-fresh { position: absolute; inset: 0 0 auto 0; display: flex; flex-direction: column; gap: 2.4cqw; }
.hl-11 .hl11-pane s { height: 1.3cqw; border-radius: .65cqw; background: var(--fg-secondary); opacity: .45; }
.hl-11 .hl11-old { animation: hl11-old 7s ease-in-out infinite; }
.hl-11 .hl11-fresh s { opacity: 0; transform-origin: 0 50%; animation: hl11-line 7s ease-out infinite; animation-delay: calc(var(--i) * .14s); }
.hl-11 .hl11-fresh s.p { background: var(--glow-cyan); }

.hl-11 .hl11-scrim { position: absolute; inset: 0; background: rgba(6, 10, 17, .62); opacity: 0; animation: hl11-scrim 7s ease-in-out infinite; }

/* The palette */
.hl-11 .hl11-pal {
  position: absolute; left: 11cqw; top: 6cqw; width: 78cqw;
  border-radius: 2.6cqw; background: var(--bg-panel); border: 1px solid var(--hairline);
  box-shadow: 0 3cqw 8cqw rgba(0, 0, 0, .6), 0 0 5cqw rgba(79, 227, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .04);
  opacity: 0; animation: hl11-pal 7s cubic-bezier(.3, .7, .3, 1) infinite;
}
.hl-11 .hl11-field {
  height: 8.5cqw; display: flex; align-items: center; gap: 2cqw; padding: 0 2.6cqw;
  border-bottom: 1px solid var(--hairline-soft);
}
.hl-11 .hl11-mag { width: 3cqw; height: 3cqw; flex: none; fill: none; stroke: var(--fg-secondary); stroke-width: 1.7; stroke-linecap: round; }
.hl-11 .hl11-q { position: relative; font: 500 3.3cqw/1 var(--mono); color: var(--fg); white-space: nowrap; overflow: hidden; padding-right: .6cqw; }
.hl-11 .hl11-cover {
  position: absolute; top: -.6cqw; bottom: -.6cqw; left: 0; width: 100%;
  background: var(--bg-panel); border-left: .35cqw solid var(--glow-cyan);
  animation: hl11-type 7s infinite;
}
.hl-11 .hl11-kbd {
  margin-left: auto; font: 500 2.5cqw/1 var(--mono); color: var(--fg-tertiary);
  padding: .7cqw 1cqw; border: 1px solid var(--hairline); border-radius: .9cqw;
}
.hl-11 .hl11-list { position: relative; padding: 1.2cqw; }
.hl-11 .hl11-sel {
  position: absolute; left: 1.2cqw; right: 1.2cqw; top: 1.2cqw; height: 8cqw; border-radius: 1.6cqw;
  background: rgba(79, 227, 255, .11); box-shadow: inset 0 0 0 1px rgba(79, 227, 255, .26);
  opacity: 0; animation: hl11-sel 7s ease-in-out infinite;
}
.hl-11 .hl11-res {
  position: relative; height: 8cqw; display: flex; align-items: center; gap: 2.2cqw; padding: 0 1.8cqw;
  opacity: 0; animation: hl11-res 7s ease-out infinite; animation-delay: calc(var(--i) * .16s);
}
.hl-11 .hl11-res > div { display: flex; flex-direction: column; gap: 1.2cqw; }
.hl-11 .hl11-res s.h { height: 1.3cqw; border-radius: .65cqw; background: var(--fg); opacity: .72; }
.hl-11 .hl11-res s.sn { position: relative; height: 1cqw; border-radius: .5cqw; background: var(--fg-tertiary); opacity: .9; }
.hl-11 .hl11-res s.sn u { position: absolute; top: -.15cqw; bottom: -.15cqw; width: 7cqw; border-radius: .6cqw; background: var(--glow-cyan); box-shadow: 0 0 1cqw rgba(79, 227, 255, .5); }
.hl-11 .hl11-res em { margin-left: auto; font: 500 2.4cqw/1 var(--mono); color: var(--fg-tertiary); }
.hl-11 .hl11-res em.live { color: var(--glow-cyan); display: flex; align-items: center; gap: .8cqw; }
.hl-11 .hl11-res em.live::before { content: ""; width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: var(--glow-cyan); box-shadow: 0 0 1cqw var(--glow-cyan); }
.hl-11 .hl11-res:nth-child(3)::after {
  content: ""; position: absolute; inset: 0; border-radius: 1.6cqw; background: rgba(79, 227, 255, .22);
  opacity: 0; animation: hl11-press 7s ease-out infinite;
}

@keyframes hl11-pal {
  0%, 4% { opacity: 0; transform: translateY(-1.2cqw) scale(.96); }
  11%, 61% { opacity: 1; transform: none; }
  67%, 100% { opacity: 0; transform: scale(.97); }
}
@keyframes hl11-scrim { 0%, 4% { opacity: 0; } 10%, 61% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes hl11-type {
  0%, 13% { transform: translateX(0); animation-timing-function: steps(13, end); }
  33%, 68% { transform: translateX(100%); }
  70%, 100% { transform: translateX(0); }
}
@keyframes hl11-res {
  0%, 22% { opacity: 0; transform: translateY(1cqw); }
  28%, 61% { opacity: 1; transform: none; }
  67%, 100% { opacity: 0; transform: none; }
}
@keyframes hl11-sel {
  0%, 34% { opacity: 0; transform: translateY(0); }
  38%, 45% { opacity: 1; transform: translateY(0); }
  50%, 61% { opacity: 1; transform: translateY(8cqw); }
  67%, 100% { opacity: 0; transform: translateY(8cqw); }
}
@keyframes hl11-press { 0%, 55% { opacity: 0; } 57% { opacity: 1; } 64%, 100% { opacity: 0; } }
@keyframes hl11-new {
  0%, 65% { opacity: 0; transform: translateX(-3cqw); }
  72%, 92% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; transform: none; }
}
@keyframes hl11-old { 0% { opacity: 0; } 6%, 63% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes hl11-line {
  0%, 68% { opacity: 0; transform: scaleX(0); }
  75%, 91% { opacity: .5; transform: scaleX(1); }
  95%, 100% { opacity: 0; transform: scaleX(1); }
}

/* ==== new previews: begin ==== */
/* ==========================================================================
   Highlight 05 — "Every agent, one window"
   The deck window: a sidebar of projects whose sessions run different agents,
   the selected session's Ghostty surface showing codex's own TUI (from the
   verbatim captures in Tests/FlightDeckTests/Fixtures/Codex), and the New
   Session split button's chevron menu held open over it.
   Design size: 1000 x 500. The window is 372 tall; the pull-down menu drops
   below its New Session bar, onto the desktop, as a menu does with room under it. Every selector is scoped under .fviz-05.
   ========================================================================== */

.fviz-05 {
  --fv5-t-fg:   #e8e8e8;
  --fv5-t-dim:  #8a8f98;
  --fv5-t-cyan: #8abeb7;   /* Ghostty dark palette 6 */
  --fv5-t-grn:  #b5bd68;   /* palette 2 */
  --fv5-t-red:  #cc6666;   /* palette 1 */
  --fv5-band:   rgba(255, 255, 255, 0.055);
  margin: 0;
  font-family: var(--font);
}

.fviz-05 .fv-stage {
  position: relative;
  width: 1000px;
  height: 500px;
}

/* --- Window ------------------------------------------------------------- */
.fviz-05 .fv-win {
  position: absolute;
  left: 0; top: 0; right: 0;
  height: 372px;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-panel);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 0, 0, 0.5);
}

.fviz-05 .fv-titlebar {
  flex: none;
  height: 32px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  position: relative;
  background: linear-gradient(180deg, #202b40 0%, #1a2437 100%);
  border-bottom: 1px solid #0a0f1a;
}
.fviz-05 .fv-lights { display: flex; gap: 8px; position: relative; z-index: 1; }
.fviz-05 .fv-lights i {
  width: 12px; height: 12px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.28);
}
.fviz-05 .fv-lights .r { background: #ff5f57; }
.fviz-05 .fv-lights .y { background: #febc2e; }
.fviz-05 .fv-lights .g { background: #28c840; }
.fviz-05 .fv-wintitle {
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  font-size: 12.5px;
  font-weight: 590;
  color: #b9c6dc;
  letter-spacing: -0.005em;
}

.fviz-05 .fv-split { flex: 1; min-height: 0; display: flex; }

/* --- Sidebar ------------------------------------------------------------ */
.fviz-05 .fv-side {
  width: 240px;
  flex: none;
  display: flex;
  flex-direction: column;
  background: rgba(28, 38, 58, 0.82);
  border-right: 1px solid #0a0f1a;
}
.fviz-05 .fv-list { flex: 1; min-height: 0; padding: 7px 0 4px; overflow: hidden; }

/* Row geometry shared with the hero demo: 4px gap, 24px row, 9px inset */
.fviz-05 .fv-row {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  margin: 1px 9px;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--fg);
  white-space: nowrap;
}
.fviz-05 .fv-sess { padding-left: 24px; }
.fviz-05 .fv-slot { width: 16px; flex: none; display: flex; align-items: center; }
.fviz-05 .fv-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Unemphasized selection: the terminal holds first responder */
.fviz-05 .fv-sel { background: rgba(255, 255, 255, 0.15); color: #fff; }

.fviz-05 .fv-proj {
  font-weight: 600;
  color: var(--fg-secondary);
  letter-spacing: -0.005em;
  margin-top: 5px;
}
.fviz-05 .fv-proj:first-child { margin-top: 0; }
.fviz-05 .fv-chev {
  width: 12px; height: 12px;
  flex: none;
  color: var(--fg-tertiary);
  transform: rotate(90deg);
}
.fviz-05 .fv-collapsed .fv-chev { transform: none; }
.fviz-05 .fv-pname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fviz-05 .fv-count {
  font-size: 11px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--fg-secondary);
  padding-right: 2px;
}
.fviz-05 .fv-sub {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  line-height: 1;
  padding-right: 2px;
}

.fviz-05 .fv-g { width: 11px; height: 11px; flex: none; display: block; }
.fviz-05 .fv-g-idle   { color: #fff; opacity: 0.1; }
.fviz-05 .fv-g-unread { color: var(--accent); }
.fviz-05 .fv-g-wait   { color: var(--orange); }

/* ProgressView .mini: 8 tapered spokes */
.fviz-05 .fv-spin {
  --sp: 12px;
  width: var(--sp); height: var(--sp);
  flex: none;
  position: relative;
  animation: fv05-spin 0.8s steps(8) infinite;
}
.fviz-05 .fv-spin i {
  position: absolute;
  left: 50%; top: 50%;
  width: calc(var(--sp) * 0.1417);
  height: calc(var(--sp) * 0.3);
  margin: calc(var(--sp) * -0.45) 0 0 calc(var(--sp) * -0.0708);
  border-radius: 980px;
  background: var(--fg-secondary);
  transform-origin: 50% calc(var(--sp) * 0.45);
}
.fviz-05 .fv-spin i:nth-child(1) { transform: rotate(0deg);   opacity: 0.22; }
.fviz-05 .fv-spin i:nth-child(2) { transform: rotate(45deg);  opacity: 0.32; }
.fviz-05 .fv-spin i:nth-child(3) { transform: rotate(90deg);  opacity: 0.42; }
.fviz-05 .fv-spin i:nth-child(4) { transform: rotate(135deg); opacity: 0.52; }
.fviz-05 .fv-spin i:nth-child(5) { transform: rotate(180deg); opacity: 0.62; }
.fviz-05 .fv-spin i:nth-child(6) { transform: rotate(225deg); opacity: 0.72; }
.fviz-05 .fv-spin i:nth-child(7) { transform: rotate(270deg); opacity: 0.82; }
.fviz-05 .fv-spin i:nth-child(8) { transform: rotate(315deg); opacity: 0.92; }
@keyframes fv05-spin { to { transform: rotate(360deg); } }

/* New Session bar: opaque windowBackgroundColor strip with a top divider,
   a full-width bordered button whose chevron sits inside the same pill */
.fviz-05 .fv-foot {
  flex: none;
  padding: 8px;
  background: #1e1e20;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.fviz-05 .fv-newbtn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 0 0 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.10), 0 0.5px 1px rgba(0, 0, 0, 0.4);
  font-size: 13px;
  color: var(--fg);
  white-space: nowrap;
}
.fviz-05 .fv-plus { width: 12px; height: 12px; flex: none; color: var(--fg); }
.fviz-05 .fv-newlabel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fviz-05 .fv-newkey { color: var(--fg-secondary); font-size: 12.5px; }
.fviz-05 .fv-divider { width: 1px; height: 14px; background: rgba(255, 255, 255, 0.16); margin-left: 2px; }
.fviz-05 .fv-drop {
  width: 18px; height: 24px;
  display: grid;
  place-items: center;
  margin-right: 3px;
  color: var(--fg-secondary);
}
.fviz-05 .fv-drop svg { width: 10px; height: 10px; }
.fviz-05 .fv-drop.open { color: var(--fg); }

/* --- Terminal: codex's TUI on the Ghostty surface ------------------------ */
.fviz-05 .fv-term {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 8px 14px 10px;
  background: var(--bg-inset);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.42;
  color: var(--fv5-t-fg);
  overflow: hidden;
}
.fviz-05 .fv-term .l { display: block; white-space: pre; min-height: 1.42em; }
.fviz-05 .fv-term strong { font-weight: 700; color: #fff; }
.fviz-05 .fv-term .b { color: #5a5f68; }
.fviz-05 .fv-term .d { color: var(--fv5-t-dim); }
.fviz-05 .fv-term .c { color: var(--fv5-t-cyan); }
.fviz-05 .fv-term .g { color: var(--fv5-t-grn); }
.fviz-05 .fv-term .r { color: var(--fv5-t-red); }
/* the user's turn and the composer sit on a faintly shaded band, full width */
.fviz-05 .fv-term .band {
  background: var(--fv5-band);
  margin: 0 -14px;
  padding: 0 14px;
}

/* "◦ Working": the bullet pulses, the word shimmers */
.fviz-05 .fv-bul { color: var(--fv5-t-dim); animation: fv05-pulse 1.2s steps(1) infinite; }
@keyframes fv05-pulse { 50% { color: #fff; } }
.fviz-05 .fv-term .fv-shim {
  color: transparent;
  background: linear-gradient(90deg, #8a8f98 0%, #8a8f98 35%, #ffffff 50%, #8a8f98 65%, #8a8f98 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  animation: fv05-shim 2.2s linear infinite;
}
@keyframes fv05-shim { from { background-position: 100% 0; } to { background-position: 0% 0; } }

/* --- The menu, over the window ----------------------------------------- */
.fviz-05 .fv-menu {
  position: absolute;
  z-index: 3;
  left: 212px;
  top: 368px;
  width: 232px;
  padding: 5px;
  border-radius: 8px;
  background: rgba(38, 40, 46, 0.86);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.18),
    0 0 0 0.5px rgba(0, 0, 0, 0.7),
    0 10px 30px rgba(0, 0, 0, 0.55);
  font-size: 13px;
  color: var(--fg);
}
.fviz-05 .fv-mi {
  display: flex;
  align-items: center;
  height: 22px;
  padding: 0 8px 0 4px;
  border-radius: 4px;
  white-space: nowrap;
  letter-spacing: -0.003em;
}
.fviz-05 .fv-mi.hot { background: var(--accent); color: #fff; }
.fviz-05 .fv-ck { width: 18px; flex: none; display: grid; place-items: center; }
.fviz-05 .fv-ck svg { width: 11px; height: 11px; }
.fviz-05 .fv-mt { flex: 1; }
.fviz-05 .fv-kq { color: rgba(235, 235, 245, 0.45); font-size: 12.5px; letter-spacing: 0.04em; }
.fviz-05 .fv-sm { width: 10px; height: 10px; flex: none; }

/* Opens off the highlighted row, to its right */
.fviz-05 .fv-submenu {
  left: 441px;
  top: 363px;
  width: 148px;
}

/* --- Phone width: the terminal, then the sidebar with its menu dropped below -- */
@media (max-width: 640px) {
  .fviz-05 .fv-stage { width: 100%; height: auto; padding-bottom: 4px; }
  .fviz-05 .fv-win { position: relative; height: auto; }
  .fviz-05 .fv-wintitle { font-size: 12px; padding-left: 64px; }
  .fviz-05 .fv-split { flex-direction: column; }
  .fviz-05 .fv-term {
    order: -1;
    height: calc(9 * 1.42em + 9px);
    flex: none;
    font-size: 9px;
    padding: 0 10px 8px;
    border-bottom: 1px solid #0a0f1a;
  }
  .fviz-05 .fv-term .band { margin: 0 -10px; padding: 0 10px; }
  .fviz-05 .fv-side { width: 100%; border-right: none; }
  .fviz-05 .fv-list { padding-bottom: 6px; }
  .fviz-05 .fv-menu {
    position: relative;
    left: auto; top: auto;
    width: 232px;
    max-width: calc(100% - 8px);
    margin: -6px 0 0 auto;
  }
  .fviz-05 .fv-submenu { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fviz-05 .fv-spin,
  .fviz-05 .fv-bul,
  .fviz-05 .fv-term .fv-shim { animation: none; }
  .fviz-05 .fv-term .fv-shim { color: #fff; background: none; }
}

/* ==========================================================================
   Highlight 06 — "Know who needs you"
   A close-up of the session sidebar with every row state (SessionStatusIcon),
   a subagent count under the pointer showing its tooltip (SubagentCount's
   .help(status.tooltip)), collapsed projects rolling up their most demanding
   child (SessionStore.collapsedStatus), and the banner SessionNotifier posts
   while another app is frontmost.
   Design size: 1000 x 480. Every selector is scoped under .fviz-06.
   ========================================================================== */

.fviz-06 {
  --fv6-z: 1.25;
  margin: 0;
  font-family: var(--font);
}

.fviz-06 .fv-stage {
  position: relative;
  width: 1000px;
  height: 480px;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--hairline-soft);
  background:
    radial-gradient(70% 70% at 88% 8%, rgba(255, 159, 10, 0.08), transparent 60%),
    radial-gradient(90% 80% at 10% 30%, rgba(26, 146, 255, 0.09), transparent 60%),
    var(--bg-inset);
}

/* --- Menu bar: only the status side; Flight Deck is not the frontmost app -- */
.fviz-06 .fv-menubar {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 0 16px;
  background: rgba(18, 24, 38, 0.72);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #e6ebf3;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.003em;
}
.fviz-06 .fv-mbi { height: 12px; width: auto; display: block; color: #e6ebf3; }
.fviz-06 .fv-clock { font-variant-numeric: tabular-nums; }

/* --- The sidebar, magnified ---------------------------------------------- */
.fviz-06 .fv-mac {
  position: absolute;
  left: 34px;
  top: 52px;
  display: flex;
  align-items: flex-start;
  zoom: var(--fv6-z);
}

.fviz-06 .fv-side {
  width: 236px;
  flex: none;
  border-radius: 11px;
  overflow: hidden;
  background: rgba(28, 38, 58, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(0, 0, 0, 0.5);
  padding-bottom: 8px;
}
/* An inactive window: the traffic lights go grey */
.fviz-06 .fv-tbar {
  height: 30px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
}
.fviz-06 .fv-tbar i {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #4a5163;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.3);
}
.fviz-06 .fv-list { padding: 4px 0 0; }

.fviz-06 .fv-row {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  margin: 1px 9px;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--fg);
  white-space: nowrap;
}
.fviz-06 .fv-sess { padding-left: 24px; }
.fviz-06 .fv-slot { width: 16px; flex: none; display: flex; align-items: center; }
.fviz-06 .fv-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fviz-06 .fv-sel { background: rgba(255, 255, 255, 0.15); color: #fff; }

.fviz-06 .fv-proj {
  font-weight: 600;
  color: var(--fg-secondary);
  letter-spacing: -0.005em;
  margin-top: 5px;
}
.fviz-06 .fv-proj:first-child { margin-top: 1px; }
.fviz-06 .fv-chev {
  width: 12px; height: 12px;
  flex: none;
  color: var(--fg-tertiary);
  transform: rotate(90deg);
}
.fviz-06 .fv-collapsed .fv-chev { transform: none; }
.fviz-06 .fv-next { margin-top: 1px; }
.fviz-06 .fv-pname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fviz-06 .fv-count {
  font-size: 11px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--fg-secondary);
  padding-right: 2px;
}
.fviz-06 .fv-sub {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  line-height: 1;
  padding-right: 2px;
}

/* The blocked row: an illustrative halo, not app chrome */
.fviz-06 .fv-blocked {
  background: rgba(255, 159, 10, 0.10);
  box-shadow: inset 0 0 0 1px rgba(255, 159, 10, 0.30);
  animation: fv06-halo 2.6s ease-in-out infinite;
}
@keyframes fv06-halo {
  50% { box-shadow: inset 0 0 0 1px rgba(255, 159, 10, 0.55), 0 0 14px rgba(255, 159, 10, 0.22); }
}

.fviz-06 .fv-g { width: 11px; height: 11px; flex: none; display: block; }
.fviz-06 .fv-g-idle   { color: #fff; opacity: 0.1; }
.fviz-06 .fv-g-unread { color: var(--accent); }
.fviz-06 .fv-g-wait   { color: var(--orange); }

.fviz-06 .fv-spin {
  --sp: 12px;
  width: var(--sp); height: var(--sp);
  flex: none;
  position: relative;
  animation: fv06-spin 0.8s steps(8) infinite;
}
.fviz-06 .fv-spin i {
  position: absolute;
  left: 50%; top: 50%;
  width: calc(var(--sp) * 0.1417);
  height: calc(var(--sp) * 0.3);
  margin: calc(var(--sp) * -0.45) 0 0 calc(var(--sp) * -0.0708);
  border-radius: 980px;
  background: var(--fg-secondary);
  transform-origin: 50% calc(var(--sp) * 0.45);
}
.fviz-06 .fv-spin i:nth-child(1) { transform: rotate(0deg);   opacity: 0.22; }
.fviz-06 .fv-spin i:nth-child(2) { transform: rotate(45deg);  opacity: 0.32; }
.fviz-06 .fv-spin i:nth-child(3) { transform: rotate(90deg);  opacity: 0.42; }
.fviz-06 .fv-spin i:nth-child(4) { transform: rotate(135deg); opacity: 0.52; }
.fviz-06 .fv-spin i:nth-child(5) { transform: rotate(180deg); opacity: 0.62; }
.fviz-06 .fv-spin i:nth-child(6) { transform: rotate(225deg); opacity: 0.72; }
.fviz-06 .fv-spin i:nth-child(7) { transform: rotate(270deg); opacity: 0.82; }
.fviz-06 .fv-spin i:nth-child(8) { transform: rotate(315deg); opacity: 0.92; }
@keyframes fv06-spin { to { transform: rotate(360deg); } }

/* --- Pointer and tooltip, in the sidebar's own (unzoomed) units ----------- */
.fviz-06 .fv-cursor {
  position: absolute;
  left: 215px;
  top: 151px;
  width: 11px;
  height: 17px;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.6));
}
/* macOS dark tooltip: a small opaque grey card under the pointer */
.fviz-06 .fv-tip {
  position: absolute;
  left: 218px;
  top: 171px;
  padding: 3px 7px 4px;
  border-radius: 5px;
  background: #2a2a2c;
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.16),
    0 0 0 0.5px rgba(0, 0, 0, 0.8),
    0 4px 12px rgba(0, 0, 0, 0.45);
  font-size: 11px;
  line-height: 1.3;
  color: #ececee;
  white-space: nowrap;
  letter-spacing: 0.002em;
  animation: fv06-tip 6s ease-in-out infinite;
}
@keyframes fv06-tip {
  0%, 12% { opacity: 0; }
  16%, 92% { opacity: 1; }
  100% { opacity: 0; }
}

/* --- The other rows' tooltips, on the same 26px pitch ---------------------- */
.fviz-06 .fv-legend {
  list-style: none;
  margin: 0 0 0 18px;
  padding: 35px 0 0;
  width: 230px;
  flex: none;
}
.fviz-06 .fv-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 24px;
  margin: 1px 0;
  font-size: 11px;
  color: var(--fg-tertiary);
  white-space: nowrap;
  letter-spacing: -0.003em;
}
.fviz-06 .fv-legend .fv-l-proj { margin-top: 5px; }
.fviz-06 .fv-legend .fv-l-proj:first-child { margin-top: 1px; }
.fviz-06 .fv-legend .fv-l-next { margin-top: 1px; }
.fviz-06 .fv-lead { width: 12px; flex: none; border-top: 1px dotted var(--hairline); }
.fviz-06 .fv-legend .fv-hot { color: var(--orange); font-weight: 560; }
.fviz-06 .fv-legend .fv-hot .fv-lead { border-top: 1px solid rgba(255, 159, 10, 0.55); }

/* --- Notification banner --------------------------------------------------- */
.fviz-06 .fv-banners {
  position: absolute;
  right: 14px;
  top: 38px;
  width: 352px;
}
.fviz-06 .fv-banner {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px 12px 11px;
  border-radius: 18px;
  background: rgba(46, 48, 56, 0.78);
  backdrop-filter: blur(26px) saturate(1.6);
  -webkit-backdrop-filter: blur(26px) saturate(1.6);
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.20),
    0 0 0 0.5px rgba(0, 0, 0, 0.6),
    0 12px 32px rgba(0, 0, 0, 0.5);
  color: #fff;
  animation: fv06-in 6s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}
@keyframes fv06-in {
  0%   { transform: translateX(380px); }
  10%, 100% { transform: none; }
}
.fviz-06 .fv-icon { width: 38px; height: 38px; flex: none; align-self: flex-start; margin-top: 1px; }
.fviz-06 .fv-btext { flex: 1; min-width: 0; }
.fviz-06 .fv-bhead { display: flex; align-items: baseline; gap: 8px; }
.fviz-06 .fv-btitle {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.006em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fviz-06 .fv-bwhen { font-size: 11.5px; color: rgba(235, 235, 245, 0.5); flex: none; }
.fviz-06 .fv-bsub,
.fviz-06 .fv-bbody {
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: -0.004em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fviz-06 .fv-bbody { white-space: normal; }
.fviz-06 .fv-bsub { font-weight: 600; color: rgba(255, 255, 255, 0.92); }
.fviz-06 .fv-bbody { color: rgba(235, 235, 245, 0.82); }

/* --- Connector ------------------------------------------------------------ */
.fviz-06 .fv-wire {
  position: absolute;
  left: 0; top: 0;
  width: 1000px; height: 480px;
  pointer-events: none;
}
.fviz-06 .fv-wire path { stroke-width: 1px; stroke-linecap: round; }
.fviz-06 .fv-wire-base { stroke: rgba(255, 159, 10, 0.45); }
.fviz-06 .fv-wire-flow {
  stroke: #ffc46b;
  stroke-dasharray: 3 14;
  animation: fv06-flow 1.4s linear infinite;
  filter: drop-shadow(0 0 2px rgba(255, 159, 10, 0.9));
}
@keyframes fv06-flow { to { stroke-dashoffset: 17; } }

/* --- Phone width: banner first, then the sidebar at natural size ----------- */
@media (max-width: 640px) {
  .fviz-06 .fv-stage {
    width: 100%;
    height: auto;
    padding: 0 0 18px;
    display: flex;
    flex-direction: column;
  }
  .fviz-06 .fv-menubar { order: -2; }
  .fviz-06 .fv-banners { order: -1; }
  .fviz-06 .fv-wire { display: none; }
  .fviz-06 .fv-menubar { position: relative; font-size: 12px; gap: 10px; padding: 0 12px; }
  .fviz-06 .fv-banners { position: relative; right: auto; top: auto; width: auto; margin: 10px 10px 0; }
  .fviz-06 .fv-banner { padding: 10px 12px 11px 10px; border-radius: 16px; }
  .fviz-06 .fv-bsub, .fviz-06 .fv-bbody { font-size: 12.5px; }
  .fviz-06 .fv-bbody { white-space: normal; }
  .fviz-06 .fv-mac {
    position: relative;
    left: auto; top: auto;
    zoom: 1;
    margin: 16px auto 0;
    width: min(270px, calc(100% - 28px));
    padding-bottom: 34px;
  }
  .fviz-06 .fv-side { width: 100%; }
  .fviz-06 .fv-legend { display: none; }
  .fviz-06 .fv-cursor { left: auto; right: 9px; }
  .fviz-06 .fv-tip { left: auto; right: -6px; white-space: normal; width: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  .fviz-06 .fv-spin,
  .fviz-06 .fv-blocked,
  .fviz-06 .fv-tip,
  .fviz-06 .fv-wire-flow,
  .fviz-06 .fv-banner { animation: none; }
}

/* ==========================================================================
   Preview 07 — "Agents that talk to each other"   (design: 1000 × 520)
   Left: the Mac window on the SENDING tab, a Claude Code turn that ran
   `flightdeck peer send … --notify-when-idle`, under the NSAlert sheet
   PeerMessagingService raises for a message that crosses permission classes.
   Right: the iPhone's SessionTimelineScreen for the RECEIVING tab: "From …"
   arrives collapsed to three lines at 0.8 opacity behind a leading chevron,
   and a short "To …" reply is drawn whole.
   Reuses the site's .row / .glyph / .spinner sidebar classes.
   ========================================================================== */

.fviz-07 {
  --t-fg:     #f2f2f2;
  --t-sub:    #949494;
  --t-claude: #d77757;
  --t-ok:     #4eba65;
  --t-user:   #373737;
  --ios-bg:   #000;
  --ios-bg2:  #1c1c1e;
  --ios-fg:   #fff;
  --ios-fg2:  rgba(235, 235, 245, 0.6);
  --ios-fg3:  rgba(235, 235, 245, 0.3);
  --ios-indigo: #5e5ce6;
  --ios-indigo-fg: #7d7aff;
  --ios-green: #30d158;
}

.fviz-07 .fv-stage {
  position: relative;
  width: 1000px;
  max-width: 100%;
  height: 520px;
  overflow: hidden;
}

/* --- Mac window ---------------------------------------------------------- */
.fviz-07 .fv-win {
  position: absolute;
  left: 0;
  top: 0;
  width: 606px;
  height: 520px;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-panel);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.fviz-07 .fv-titlebar {
  flex: none;
  height: 32px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  position: relative;
  background: linear-gradient(180deg, #202b40 0%, #1a2437 100%);
  border-bottom: 1px solid #0a0f1a;
}
.fviz-07 .fv-lights { display: flex; gap: 8px; }
.fviz-07 .fv-lights i {
  width: 12px; height: 12px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.28);
}
.fviz-07 .fv-lights .r { background: #ff5f57; }
.fviz-07 .fv-lights .y { background: #febc2e; }
.fviz-07 .fv-lights .g { background: #28c840; }
.fviz-07 .fv-wintitle {
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  font-size: 12.5px;
  font-weight: 590;
  color: #b9c6dc;
  letter-spacing: -0.005em;
  pointer-events: none;
}

.fviz-07 .fv-split { flex: 1; min-height: 0; display: flex; }
.fviz-07 .fv-side {
  width: 196px;
  flex: none;
  padding: 7px 0 4px;
  overflow: hidden;
  background: rgba(28, 38, 58, 0.82);
  border-right: 1px solid #0a0f1a;
}
.fviz-07 .fv-side .row-project:first-child { margin-top: 0; }

.fviz-07 .fv-term {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 12px 14px 14px;
  background: var(--bg-inset);
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--t-fg);
  overflow: hidden;
}
.fviz-07 .fv-term .l { display: block; white-space: pre; }
.fviz-07 .fv-term .l.user {
  align-self: flex-start;
  background: var(--t-user);
  color: #fff;
  margin-bottom: 1.5em;
  padding-right: 1ch;
}
.fviz-07 .fv-term .l.gap  { margin-top: 1.5em; }
.fviz-07 .fv-term .l.spin { margin-top: 1.5em; }
.fviz-07 .fv-term .fv-cmd { color: #d6d6d6; }
.fviz-07 .t-dim    { color: var(--t-sub); }
.fviz-07 .b-ok     { color: var(--t-ok); }
.fviz-07 .t-claude { color: var(--t-claude); }

/* --- NSAlert sheet --------------------------------------------------------
   Hangs from under the title bar, centred on the window. Modern alert layout:
   icon on top, bold message, small informative text, stacked full-width
   buttons with the first (Deny) as the default. */
.fviz-07 .fv-sheet {
  position: absolute;
  z-index: 3;
  top: 34px;
  left: 50%;
  width: 262px;
  margin-left: -131px;
  padding: 15px 15px 14px;
  border-radius: 14px;
  background: rgba(38, 46, 62, 0.97);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.13),
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 18px 44px rgba(0, 0, 0, 0.6);
  text-align: center;
  color: var(--fg);
  animation: fv07-sheet 9s ease-out infinite;
}
.fviz-07 .fv-appicon { width: 44px; height: 44px; display: block; margin: 0 auto 7px; }
.fviz-07 .fv-al-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.fviz-07 .fv-al-text,
.fviz-07 .fv-al-body {
  font-size: 10px;
  line-height: 1.35;
  color: rgba(233, 238, 247, 0.86);
}
.fviz-07 .fv-al-body {
  margin: 7px 0 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.fviz-07 .fv-al-btn {
  height: 23px;
  line-height: 23px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.12);
}
.fviz-07 .fv-al-btn + .fv-al-btn { margin-top: 7px; }
.fviz-07 .fv-al-btn.fv-default {
  background: linear-gradient(180deg, #2a8dff, #0a74f0);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.28), 0 0.5px 1px rgba(0, 0, 0, 0.4);
}

/* --- Wire: the send leaves the terminal and lands on the phone ---------- */
.fviz-07 .fv-wire {
  position: absolute;
  z-index: 1;
  left: 606px;
  top: 186px;
  width: 64px;
  height: 160px;
  overflow: visible;
}
.fviz-07 .fv-wire-base { stroke: rgba(125, 122, 255, 0.35); stroke-width: 1.4; }
.fviz-07 .fv-wire-flow {
  stroke: #7d7aff;
  stroke-width: 1.6;
  stroke-dasharray: 3 9;
  animation: fv07-flow 1.1s linear infinite;
}

/* --- iPhone ---------------------------------------------------------------- */
.fviz-07 .fv-phone {
  position: absolute;
  z-index: 2;
  right: 30px;
  top: 14px;
  width: 300px;
  height: 506px;
  padding: 9px 9px 0;
  border-radius: 46px 46px 0 0;
  background: linear-gradient(180deg, #2a2d33, #16181c 40%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 0 0 2.5px #0b0c0e,
    0 30px 70px -20px rgba(0, 0, 0, 0.9),
    0 0 60px -10px rgba(94, 92, 230, 0.14);
  -webkit-mask-image: linear-gradient(180deg, #000 90%, transparent);
          mask-image: linear-gradient(180deg, #000 90%, transparent);
}
.fviz-07 .fv-screen {
  height: 100%;
  border-radius: 38px 38px 0 0;
  background: var(--ios-bg);
  color: var(--ios-fg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
}
.fviz-07 .fv-status {
  height: 38px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 24px 0 30px;
  position: relative;
}
.fviz-07 .fv-time { font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em; }
.fviz-07 .fv-island {
  position: absolute;
  left: 50%; top: 8px;
  width: 78px; height: 23px;
  margin-left: -39px;
  border-radius: 980px;
  background: #000;
  box-shadow: inset 0 0 0 1px #0c0c0c;
}
.fviz-07 .fv-sicons { display: flex; gap: 5px; align-items: center; color: #fff; }
.fviz-07 .fv-sicons svg { height: 9px; width: auto; fill: currentColor; }
.fviz-07 .fv-nav {
  height: 36px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.fviz-07 .fv-back {
  position: absolute;
  left: 12px; top: 3px;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.18);
}
.fviz-07 .fv-back svg { width: 13px; height: 13px; }
.fviz-07 .fv-navtitle { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }

/* TimelineRow: header (symbol · heading · time), then content; 6pt inside */
.fviz-07 .fv-feed {
  flex: 1;
  min-height: 0;
  padding: 10px 14px 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
  overflow: hidden;
}
.fviz-07 .fv-item { display: flex; flex-direction: column; gap: 5px; }
.fviz-07 .fv-ihead {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 15px;
  white-space: nowrap;
}
.fviz-07 .fv-sym {
  width: 11px; height: 11px;
  flex: none;
  margin: 0 2.5px;
  color: var(--ios-fg);
}
.fviz-07 .fv-chev {
  width: 11px; height: 11px;
  flex: none;
  margin: 0 2.5px;
  color: var(--ios-fg2);
  transition: transform 0.25s ease;
}
.fviz-07 .fv-iname {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fviz-07 .fv-itime {
  margin-left: auto;
  padding-left: 8px;
  font-size: 10px;
  color: var(--ios-fg3);
  font-variant-numeric: tabular-nums;
}
.fviz-07 .fv-indigo { color: var(--ios-indigo-fg); }
.fviz-07 .fv-green  { color: var(--ios-green); }

.fviz-07 .fv-prose {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.38;
  color: var(--ios-fg);
  letter-spacing: -0.005em;
}
.fviz-07 .fv-prose code {
  font-family: var(--mono);
  font-size: 11px;
  padding: 0 3px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.10);
}

/* Collapsed peer message: first three lines, the whole row at 0.8 */
.fviz-07 .fv-peer { opacity: 0.8; animation: fv07-open 9s ease-in-out infinite; }
.fviz-07 .fv-peer .fv-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.fviz-07 .fv-peer .fv-chev { animation: fv07-chev 9s ease-in-out infinite; }

.fviz-07 .fv-tool {
  border-radius: 10px;
  background: var(--ios-bg2);
  padding: 7px 10px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ios-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Motion ---------------------------------------------------------------
   The sheet drops in; while it sits, the collapsed message on the phone is
   tapped open (chevron turns down, full opacity) and closes again. */
@keyframes fv07-flow  { to { stroke-dashoffset: -12; } }
@keyframes fv07-sheet {
  0%   { transform: translateY(-14px); opacity: 0; }
  6%   { transform: none; opacity: 1; }
  100% { transform: none; opacity: 1; }
}
@keyframes fv07-chev {
  0%, 38%  { transform: none; }
  44%, 82% { transform: rotate(90deg); }
  88%, 100% { transform: none; }
}
@keyframes fv07-open {
  0%, 38%  { opacity: 0.8; }
  44%, 82% { opacity: 1; }
  88%, 100% { opacity: 0.8; }
}
/* Expanded state: the clamp lifts between the same keyframes */
.fviz-07 .fv-peer .fv-clamp { animation: fv07-clamp 9s steps(1, end) infinite; }
@keyframes fv07-clamp {
  0%   { -webkit-line-clamp: 3; }
  41%  { -webkit-line-clamp: 8; }
  85%  { -webkit-line-clamp: 3; }
}

/* --- Phone-width modal: the receiving phone, then the sheet as a card -- */
@media (max-width: 640px) {
  .fviz-07 .fv-stage {
    width: auto;
    height: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .fviz-07 .fv-wire,
  .fviz-07 .fv-win .fv-titlebar,
  .fviz-07 .fv-win .fv-split { display: none; }
  .fviz-07 .fv-phone {
    position: relative;
    right: auto; top: auto;
    width: min(300px, 100%);
    height: 420px;
  }
  /* The window itself is hidden; only its sheet remains, below the phone */
  .fviz-07 .fv-win {
    position: relative;
    order: 2;
    width: min(290px, 100%);
    height: auto;
    background: none;
    border: 0;
    box-shadow: none;
    overflow: visible;
  }
  .fviz-07 .fv-sheet {
    position: relative;
    top: auto; left: auto;
    margin: 0;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fviz-07 .fv-sheet,
  .fviz-07 .fv-wire-flow,
  .fviz-07 .fv-peer,
  .fviz-07 .fv-peer .fv-chev,
  .fviz-07 .fv-peer .fv-clamp { animation: none; }
  .fviz-07 .spinner { animation: none; }
}

/* ==========================================================================
   Preview 08 — "Sessions that outlive the app"   (design: 1000 × 500)
   Left top: the Mac window after a restart. The selected tab was resumed and
   typed "Keep going"; idle tabs are asleep (they look idle: sleep has no glyph
   of its own); one tab stopped on an API error, its tooltip showing the retry.
   Left bottom: Settings › Shell & Environment, the Sleep and Recovery sections.
   Right: the iPhone's SessionTimelineScreen for that tab, the retry strip in
   its top inset counting down to the next "Keep going".
   Reuses the site's .row / .glyph / .spinner sidebar classes.
   ========================================================================== */

@property --fv08-n {
  syntax: '<integer>';
  inherits: false;
  initial-value: 54;
}

.fviz-08 {
  --t-fg:     #f2f2f2;
  --t-sub:    #949494;
  --t-claude: #d77757;
  --t-ok:     #4eba65;
  --t-user:   #373737;
  --ios-bg:   #000;
  --ios-bg2:  #1c1c1e;
  --ios-fg:   #fff;
  --ios-fg2:  rgba(235, 235, 245, 0.6);
  --ios-fg3:  rgba(235, 235, 245, 0.3);
  --ios-green: #30d158;
  --ios-red:   #ff453a;
  --ios-orange: #ff9f0a;
  --ios-accent: #0a84ff;
}

.fviz-08 .fv-stage {
  position: relative;
  width: 1000px;
  max-width: 100%;
  height: 500px;
  overflow: hidden;
}

/* --- Mac window ---------------------------------------------------------- */
.fviz-08 .fv-win {
  position: absolute;
  left: 0;
  top: 0;
  width: 620px;
  height: 288px;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-panel);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.fviz-08 .fv-titlebar {
  flex: none;
  height: 32px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  position: relative;
  background: linear-gradient(180deg, #202b40 0%, #1a2437 100%);
  border-bottom: 1px solid #0a0f1a;
}
.fviz-08 .fv-lights { display: flex; gap: 8px; }
.fviz-08 .fv-lights i {
  width: 12px; height: 12px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.28);
}
.fviz-08 .fv-lights .r { background: #ff5f57; }
.fviz-08 .fv-lights .y { background: #febc2e; }
.fviz-08 .fv-lights .g { background: #28c840; }
.fviz-08 .fv-wintitle {
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  font-size: 12.5px;
  font-weight: 590;
  color: #b9c6dc;
  letter-spacing: -0.005em;
  pointer-events: none;
}

.fviz-08 .fv-split { flex: 1; min-height: 0; display: flex; }
.fviz-08 .fv-side {
  width: 200px;
  flex: none;
  padding: 7px 0 4px;
  overflow: hidden;
  background: rgba(28, 38, 58, 0.82);
  border-right: 1px solid #0a0f1a;
}
.fviz-08 .fv-side .row-project:first-child { margin-top: 0; }
/* exclamationmark.triangle.fill, red */
.fviz-08 .fv-g-err { color: var(--red); width: 12px; height: 12px; }
.fviz-08 .fv-err { background: rgba(255, 255, 255, 0.06); }

.fviz-08 .fv-term {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 12px 14px 14px;
  background: var(--bg-inset);
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--t-fg);
  overflow: hidden;
}
.fviz-08 .fv-term .l { display: block; white-space: pre; }
.fviz-08 .fv-term .l.user {
  align-self: flex-start;
  background: var(--t-user);
  color: #fff;
  margin-bottom: 1.5em;
  padding-right: 1ch;
}
.fviz-08 .fv-term .l.fv-kg { margin-top: 1.5em; animation: fv08-kg 6s ease-out infinite; }
.fviz-08 .fv-term .l.spin { margin-top: 1.5em; }
.fviz-08 .t-dim    { color: var(--t-sub); }
.fviz-08 .b-ok     { color: var(--t-ok); }
.fviz-08 .b-run    { color: var(--t-sub); }
.fviz-08 .t-claude { color: var(--t-claude); }

/* The system tooltip under the error row (NSToolTip, dark appearance) */
.fviz-08 .fv-tip {
  position: absolute;
  z-index: 4;
  left: 104px;
  top: 285px;
  padding: 3px 7px;
  border-radius: 5px;
  font-size: 11px;
  line-height: 1.35;
  color: #e6e6e6;
  background: rgba(46, 48, 54, 0.98);
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.16), 0 4px 12px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
  animation: fv08-tip 6s ease-out infinite;
}

/* --- Settings window crop ------------------------------------------------- */
.fviz-08 .fv-prefs {
  position: absolute;
  left: 0;
  top: 302px;
  width: 620px;
  height: 260px;
  border-radius: 12px;
  overflow: hidden;
  background: #1c2436;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 0, 0, 0.5);
  -webkit-mask-image: linear-gradient(180deg, #000 64%, transparent 76%);
          mask-image: linear-gradient(180deg, #000 64%, transparent 76%);
}
.fviz-08 .fv-ptitle {
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 590;
  color: #b9c6dc;
  background: linear-gradient(180deg, #202b40 0%, #1a2437 100%);
  border-bottom: 1px solid #0a0f1a;
}
.fviz-08 .fv-form { padding: 9px 22px 0; }
.fviz-08 .fv-sechead {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 5px 2px;
}
.fviz-08 .fv-group {
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  margin-bottom: 10px;
}
.fviz-08 .fv-frow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 26px;
  padding: 0 10px;
  font-size: 12px;
  color: var(--fg);
}
.fviz-08 .fv-frow + .fv-frow { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.fviz-08 .fv-frow.fv-cap {
  display: block;
  padding: 6px 10px 7px;
  font-size: 10.5px;
  line-height: 1.38;
  color: var(--fg-secondary);
}
.fviz-08 .fv-switch {
  position: relative;
  width: 26px; height: 15px;
  border-radius: 980px;
  background: rgba(255, 255, 255, 0.2);
  flex: none;
}
.fviz-08 .fv-switch.on { background: var(--accent); }
.fviz-08 .fv-switch::after {
  content: "";
  position: absolute;
  top: 1.5px; left: 1.5px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.5px 1.5px rgba(0, 0, 0, 0.4);
}
.fviz-08 .fv-switch.on::after { left: 12.5px; }
.fviz-08 .fv-stepper {
  display: flex;
  border-radius: 5px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.12);
}
.fviz-08 .fv-stepper i {
  font-style: normal;
  width: 18px;
  height: 16px;
  line-height: 15px;
  text-align: center;
  font-size: 12px;
  color: #dfe5ef;
}
.fviz-08 .fv-stepper i + i { border-left: 1px solid rgba(0, 0, 0, 0.35); }

/* --- Wire: the error row to the phone ------------------------------------ */
.fviz-08 .fv-wire {
  position: absolute;
  z-index: 1;
  left: 620px;
  top: 118px;
  width: 54px;
  height: 154px;
  overflow: visible;
}
.fviz-08 .fv-wire-base { stroke: rgba(255, 159, 10, 0.32); stroke-width: 1.4; }
.fviz-08 .fv-wire-flow {
  stroke: var(--orange);
  stroke-width: 1.6;
  stroke-dasharray: 3 9;
  animation: fv08-flow 1.1s linear infinite;
}

/* --- iPhone ---------------------------------------------------------------- */
.fviz-08 .fv-phone {
  position: absolute;
  z-index: 2;
  right: 28px;
  top: 12px;
  width: 300px;
  height: 488px;
  padding: 9px 9px 0;
  border-radius: 46px 46px 0 0;
  background: linear-gradient(180deg, #2a2d33, #16181c 40%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 0 0 2.5px #0b0c0e,
    0 30px 70px -20px rgba(0, 0, 0, 0.9),
    0 0 60px -10px rgba(255, 159, 10, 0.10);
  -webkit-mask-image: linear-gradient(180deg, #000 92%, transparent);
          mask-image: linear-gradient(180deg, #000 92%, transparent);
}
.fviz-08 .fv-screen {
  height: 100%;
  border-radius: 38px 38px 0 0;
  background: var(--ios-bg);
  color: var(--ios-fg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
}
.fviz-08 .fv-status {
  height: 38px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 24px 0 30px;
  position: relative;
}
.fviz-08 .fv-time { font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em; }
.fviz-08 .fv-island {
  position: absolute;
  left: 50%; top: 8px;
  width: 78px; height: 23px;
  margin-left: -39px;
  border-radius: 980px;
  background: #000;
  box-shadow: inset 0 0 0 1px #0c0c0c;
}
.fviz-08 .fv-sicons { display: flex; gap: 5px; align-items: center; color: #fff; }
.fviz-08 .fv-sicons svg { height: 9px; width: auto; fill: currentColor; }
.fviz-08 .fv-nav {
  height: 36px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.fviz-08 .fv-back {
  position: absolute;
  left: 12px; top: 3px;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.18);
}
.fviz-08 .fv-back svg { width: 13px; height: 13px; }
.fviz-08 .fv-navtitle { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }

/* The retry strip: 16/10 padding, secondarySystemBackground, title3 arrow */
.fviz-08 .fv-retry {
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  margin-top: 4px;
  background: var(--ios-bg2);
}
.fviz-08 .fv-rarrow { width: 17px; height: 17px; flex: none; color: var(--ios-orange); }
.fviz-08 .fv-rtext {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* next in 54s … 45s: a pure-CSS countdown on an integer custom property */
.fviz-08 .fv-count {
  display: inline-block;
  min-width: 1.25em;
  text-align: right;
  --fv08-n: 54;
  counter-reset: fv08s var(--fv08-n);
  animation: fv08-tick 10s linear infinite;
}
.fviz-08 .fv-count .fv-static { display: none; }
.fviz-08 .fv-count::after { content: counter(fv08s); }

.fviz-08 .fv-feed {
  flex: 1;
  min-height: 0;
  padding: 0 14px 34px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px;
  overflow: hidden;
}
.fviz-08 .fv-item { display: flex; flex-direction: column; gap: 5px; flex: none; }
.fviz-08 .fv-ihead {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 15px;
  white-space: nowrap;
}
.fviz-08 .fv-sym {
  width: 11px; height: 11px;
  flex: none;
  margin: 0 2.5px;
  color: var(--ios-fg);
}
.fviz-08 .fv-iname {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.fviz-08 .fv-itime {
  margin-left: auto;
  padding-left: 8px;
  font-size: 10px;
  color: var(--ios-fg3);
  font-variant-numeric: tabular-nums;
}
.fviz-08 .fv-chip {
  font-size: 10px;
  font-weight: 600;
  color: var(--ios-red);
  padding: 1px 6px;
  border-radius: 980px;
  background: rgba(255, 69, 58, 0.12);
}
.fviz-08 .fv-accent { color: var(--ios-accent); }
.fviz-08 .fv-green  { color: var(--ios-green); }
.fviz-08 .fv-red    { color: var(--ios-red); }

.fviz-08 .fv-prose {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.38;
  color: var(--ios-fg);
  letter-spacing: -0.005em;
  overflow-wrap: anywhere;
}
/* A user's own turn: the one tinted panel */
.fviz-08 .fv-prose.fv-you {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(10, 132, 255, 0.16);
}
.fviz-08 .fv-tool {
  border-radius: 10px;
  background: var(--ios-bg2);
  font-family: var(--mono);
  overflow: hidden;
}
.fviz-08 .fv-tool span {
  display: block;
  padding: 7px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fviz-08 .fv-cmdl { font-size: 11px; color: var(--ios-fg); }
.fviz-08 .fv-out {
  font-size: 10px;
  color: var(--ios-fg2);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

/* --- Motion ---------------------------------------------------------------- */
@keyframes fv08-flow { to { stroke-dashoffset: -12; } }
@keyframes fv08-tick { from { --fv08-n: 54; } to { --fv08-n: 44; } }
@keyframes fv08-tip {
  0%, 4%    { opacity: 0; transform: translateY(-2px); }
  10%, 92%  { opacity: 1; transform: none; }
  100%      { opacity: 0; }
}
/* The nudge line lands with a brief cyan wash, then settles to the user-turn grey */
@keyframes fv08-kg {
  0%, 6%  { box-shadow: 0 0 0 0 rgba(79, 227, 255, 0); }
  14%     { box-shadow: 0 0 0 3px rgba(79, 227, 255, 0.35); }
  40%, 100% { box-shadow: 0 0 0 3px rgba(79, 227, 255, 0); }
}

/* --- Phone-width modal: phone, then the Mac rows, settings dropped -------- */
@media (max-width: 640px) {
  .fviz-08 .fv-stage {
    width: auto;
    height: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .fviz-08 .fv-wire,
  .fviz-08 .fv-prefs,
  .fviz-08 .fv-term { display: none; }
  .fviz-08 .fv-phone {
    position: relative;
    right: auto; top: auto;
    width: min(300px, 100%);
    height: 440px;
  }
  .fviz-08 .fv-win {
    position: relative;
    order: 2;
    width: 100%;
    height: auto;
  }
  .fviz-08 .fv-side { width: 100%; border-right: 0; }
  .fviz-08 .fv-tip {
    position: relative;
    order: 3;
    left: auto;
    top: auto;
    margin-top: -10px;
    max-width: 92%;
    white-space: normal;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fviz-08 .fv-wire-flow,
  .fviz-08 .fv-tip,
  .fviz-08 .fv-term .l.fv-kg,
  .fviz-08 .fv-count { animation: none; }
  .fviz-08 .fv-count::after { content: none; }
  .fviz-08 .fv-count .fv-static { display: inline; }
  .fviz-08 .spinner { animation: none; }
}

/* ==========================================================================
   Feature 09 — "Cloud machines on demand"
   Settings → Cloud (CloudSettingsTab: Accounts, Tailscale, Budget; its Machines
   section beside it), and a shell tab printing the session's budget and the
   cost line `flightdeck run --on` prints before a run lands on a cloud machine.
   Design size 1000 × 520. Every selector is scoped under .fviz-09.
   ========================================================================== */

.fviz-09 {
  --fv09-t-fg:  #f2f2f2;
  --fv09-t-sub: #949494;
  --fv09-t-ok:  #4eba65;
  --fv09-win:   #151d2d;
  --fv09-grp:   rgba(255, 255, 255, 0.045);
  --fv09-line:  rgba(255, 255, 255, 0.065);
  --fv09-sec:   #8c9ab2;
}

.fviz-09 .fv09-stage {
  position: relative;
  display: grid;
  grid-template-columns: 566px minmax(0, 1fr);
  grid-template-rows: 520px;
  gap: 14px;
  height: 520px;
  overflow: hidden;
  font-family: var(--font);
  -webkit-user-select: none;
  user-select: none;
}

/* --- Windows --------------------------------------------------------------- */
.fviz-09 .fv09-win {
  position: relative;
  min-width: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--fv09-win);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow:
    0 40px 80px -30px rgba(0, 0, 0, 0.9),
    0 20px 40px -20px rgba(10, 30, 70, 0.7),
    0 0 0 1px rgba(0, 0, 0, 0.5);
}
/* The Settings window runs on below the stage: its Machines section is the card beside it */
.fviz-09 .fv09-settings {
  height: 560px;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 70px), transparent calc(100% - 38px));
          mask-image: linear-gradient(180deg, #000 calc(100% - 70px), transparent calc(100% - 38px));
}

.fviz-09 .fv09-chrome {
  background: linear-gradient(180deg, #202b40 0%, #1a2437 100%);
  border-bottom: 1px solid #0a0f1a;
}
.fviz-09 .fv09-titlerow {
  position: relative;
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
}
.fviz-09 .fv09-lights { display: flex; gap: 7px; }
.fviz-09 .fv09-lights i {
  width: 11px; height: 11px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.28);
  background: #ff5f57;
}
.fviz-09 .fv09-lights i:nth-child(2) { background: #febc2e; }
.fviz-09 .fv09-lights i:nth-child(3) { background: #28c840; }
.fviz-09 .fv09-wintitle,
.fviz-09 .fv09-ttitle {
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  font-size: 12.5px;
  font-weight: 590;
  color: #b9c6dc;
  letter-spacing: -0.005em;
  pointer-events: none;
}

/* Toolbar tabs: PreferencesView's ten panes, Cloud selected */
.fviz-09 .fv09-tabs {
  display: flex;
  justify-content: center;
  gap: 1px;
  padding: 1px 6px 6px;
}
.fviz-09 .fv09-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px 5px 3px;
  border-radius: 6px;
  font-size: 9.5px;
  line-height: 1.1;
  color: var(--fg-secondary);
  white-space: nowrap;
}
.fviz-09 .fv09-tab svg { width: 18px; height: 16px; }
.fviz-09 .fv09-tab-on {
  background: rgba(255, 255, 255, 0.09);
  color: var(--accent);
}

/* --- Grouped form ------------------------------------------------------------ */
.fviz-09 .fv09-form { padding: 3px 20px 20px; }
.fviz-09 .fv09-sh {
  margin: 9px 2px 4px;
  font-size: 11.5px;
  font-weight: 650;
  color: #c4cfe0;
  letter-spacing: -0.003em;
}
.fviz-09 .fv09-group {
  border-radius: 8px;
  background: var(--fv09-grp);
  border: 1px solid rgba(255, 255, 255, 0.055);
}
.fviz-09 .fv09-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 23px;
  margin: 0 10px;
  font-size: 12px;
  color: var(--fg);
  border-top: 1px solid var(--fv09-line);
}
.fviz-09 .fv09-row:first-child { border-top: none; }
.fviz-09 .fv09-lab { flex: none; white-space: nowrap; }
.fviz-09 .fv09-val,
.fviz-09 .fv09-pop {
  margin-left: auto;
  min-width: 0;
  color: var(--fv09-sec);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.fviz-09 .fv09-pop { display: inline-flex; align-items: center; gap: 5px; color: var(--fg); }
.fviz-09 .fv09-pop svg { width: 8px; height: 11px; color: var(--fv09-sec); flex: none; }
.fviz-09 .fv09-mono { font-size: 11.5px; }

/* A macOS stepper: two halves of one small rounded control */
.fviz-09 .fv09-step {
  position: relative;
  margin-left: auto;
  width: 13px;
  height: 20px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.13);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.12), 0 0.5px 1px rgba(0, 0, 0, 0.4);
}
.fviz-09 .fv09-step::before,
.fviz-09 .fv09-step::after {
  content: "";
  position: absolute;
  left: 3.5px;
  border: 3px solid transparent;
}
.fviz-09 .fv09-step::before { top: 2px; border-bottom: 3.5px solid #c9d3e3; border-top-width: 0; }
.fviz-09 .fv09-step::after { bottom: 2px; border-top: 3.5px solid #c9d3e3; border-bottom-width: 0; }
.fviz-09 .fv09-step i {
  position: absolute;
  left: 2px; right: 2px; top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, 0.3);
}

.fviz-09 .fv09-caprow { padding: 5px 0 6px; align-items: center; }
.fviz-09 .fv09-cap {
  flex: 1;
  font-size: 10.5px;
  line-height: 1.38;
  color: var(--fv09-sec);
}
.fviz-09 .fv09-btn {
  flex: none;
  padding: 2px 9px 3px;
  border-radius: 5px;
  font-size: 12px;
  color: var(--fg);
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.14), 0 0.5px 1.5px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}
.fviz-09 .fv09-small { font-size: 11px; padding: 1px 8px 2px; }

/* --- Right column ------------------------------------------------------------ */
.fviz-09 .fv09-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 0;
}

/* Machines card: the same material as feature 03's cards */
.fviz-09 .fv09-card {
  flex: none;
  background: rgba(28, 38, 58, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
  min-width: 0;
}
.fviz-09 .fv09-head {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
  background: linear-gradient(180deg, rgba(32, 43, 64, 0.9), rgba(26, 36, 55, 0.9));
}
.fviz-09 .fv09-ico { width: 15px; height: 15px; color: var(--fg-secondary); flex: none; }
.fviz-09 .fv09-head-title { font-size: 12.5px; font-weight: 600; color: #b9c6dc; white-space: nowrap; }
.fviz-09 .fv09-head-cap {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--fg-tertiary);
  white-space: nowrap;
}
.fviz-09 .fv09-machines { list-style: none; margin: 0; padding: 0; }
.fviz-09 .fv09-m {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.fviz-09 .fv09-m:first-child { border-top: none; }
.fviz-09 .fv09-mtext { flex: 1; min-width: 0; }
.fviz-09 .fv09-mline { display: flex; align-items: baseline; gap: 6px; font-size: 12.5px; color: var(--fg); }
.fviz-09 .fv09-mstate { font-size: 10.5px; color: var(--fv09-sec); }
.fviz-09 .fv09-mcost {
  display: flex;
  margin-top: 2px;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--fv09-sec);
  white-space: nowrap;
}
/* .truncationMode(.middle): the head ellipsizes, the tail stays */
.fviz-09 .fv09-mcost b { font-weight: inherit; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fviz-09 .fv09-mcost i { font-style: normal; flex: none; }

/* --- Terminal ---------------------------------------------------------------- */
.fviz-09 .fv09-term {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-inset);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow:
    0 40px 80px -30px rgba(0, 0, 0, 0.9),
    0 20px 40px -20px rgba(10, 30, 70, 0.7),
    0 0 0 1px rgba(0, 0, 0, 0.5);
}
.fviz-09 .fv09-tbar {
  position: relative;
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  flex: none;
  background: linear-gradient(180deg, #202b40 0%, #1a2437 100%);
  border-bottom: 1px solid #0a0f1a;
}
.fviz-09 .fv09-tbody {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 10px 12px 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--fv09-t-fg);
  overflow: hidden;
}
/* A terminal hard-wraps at its last column, mid-word */
.fviz-09 .fv09-l { display: block; white-space: pre-wrap; word-break: break-all; min-height: 1.5em; }
.fviz-09 .fv09-ps { color: var(--glow-cyan); }
.fviz-09 .fv09-dim { color: var(--fv09-t-sub); }
.fviz-09 .fv09-early { opacity: 0.55; }
.fviz-09 .fv09-cost { color: #c8d4e6; }
.fviz-09 .fv09-ok { color: var(--fv09-t-ok); }
.fviz-09 .fv09-caret {
  display: inline-block;
  width: 1ch;
  height: 1.15em;
  margin-left: 0.2ch;
  vertical-align: -0.2em;
  background: var(--fv09-t-fg);
  animation: fv09-blink 1.1s steps(2) infinite;
}

/* The run's lines arrive in order, the cost line first */
.fviz-09 .fv09-s { animation: fv09-arrive 0.28s ease-out both; }
.fviz-09 .s1 { animation-delay: 0.4s; }
.fviz-09 .s2 { animation-delay: 0.8s; }
.fviz-09 .s3 { animation-delay: 1.5s; }
.fviz-09 .s4 { animation-delay: 1.9s; }
.fviz-09 .s5 { animation-delay: 2.7s; }
.fviz-09 .s6 { animation-delay: 3.6s; }
.fviz-09 .s7 { animation-delay: 4.3s; }

@keyframes fv09-arrive { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes fv09-blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .fviz-09 .fv09-s,
  .fviz-09 .fv09-caret { animation: none; }
}

/* --- Narrow: the phone modal stacks Budget, Machines and the terminal ------- */
@media (max-width: 640px) {
  .fviz-09 .fv09-stage { display: flex; grid-template-rows: none; flex-direction: column; gap: 12px; height: auto; overflow: visible; }
  .fviz-09 .fv09-settings { height: auto; -webkit-mask-image: none; mask-image: none; }
  .fviz-09 .fv09-tabs,
  .fviz-09 .fv09-x,
  .fviz-09 .fv09-xm { display: none; }
  .fviz-09 .fv09-form { padding: 2px 12px 12px; }
  .fviz-09 .fv09-row { margin: 0 9px; font-size: 11.5px; }
  .fviz-09 .fv09-head-cap { display: none; }
  .fviz-09 .fv09-early,
  .fviz-09 .fv09-gap,
  .fviz-09 .fv09-pyh,
  .fviz-09 .fv09-w { display: none; }
  .fviz-09 .fv09-term { flex: none; }
  .fviz-09 .fv09-tbody { padding: 10px 11px; font-size: 10px; }
}

/* ==========================================================================
   Feature 10 — "Accounts, pools and usage"
   Settings → Accounts (AccountsSettingsTab): logins grouped by agent, a pool
   with its accounts one level in, and each account's usage windows with their
   resets (AccountUsageCluster). Beside it, Settings → Projects resolving a
   project's account through its folder, and /switch-account in a claude tab.
   Design size 1000 × 500. Every selector is scoped under .fviz-10.
   ========================================================================== */

.fviz-10 {
  --fv10-t-fg:   #f2f2f2;
  --fv10-t-sub:  #949494;
  --fv10-t-ok:   #4eba65;
  --fv10-t-user: #373737;
  --fv10-t-sel:  #b1b9f9;
  --fv10-win:    #151d2d;
  --fv10-grp:    rgba(255, 255, 255, 0.045);
  --fv10-line:   rgba(255, 255, 255, 0.065);
  --fv10-sec:    #8c9ab2;
}

.fviz-10 .fv10-stage {
  position: relative;
  display: grid;
  grid-template-columns: 588px minmax(0, 1fr);
  grid-template-rows: 500px;
  gap: 14px;
  height: 500px;
  overflow: hidden;
  font-family: var(--font);
  -webkit-user-select: none;
  user-select: none;
}

/* --- Windows --------------------------------------------------------------- */
.fviz-10 .fv10-win {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--fv10-win);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow:
    0 40px 80px -30px rgba(0, 0, 0, 0.9),
    0 20px 40px -20px rgba(10, 30, 70, 0.7),
    0 0 0 1px rgba(0, 0, 0, 0.5);
}
.fviz-10 .fv10-chrome {
  flex: none;
  background: linear-gradient(180deg, #202b40 0%, #1a2437 100%);
  border-bottom: 1px solid #0a0f1a;
}
.fviz-10 .fv10-titlerow {
  position: relative;
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
}
.fviz-10 .fv10-lights { display: flex; gap: 7px; }
.fviz-10 .fv10-lights i {
  width: 11px; height: 11px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.28);
  background: #ff5f57;
}
.fviz-10 .fv10-lights i:nth-child(2) { background: #febc2e; }
.fviz-10 .fv10-lights i:nth-child(3) { background: #28c840; }
.fviz-10 .fv10-wintitle,
.fviz-10 .fv10-ttitle {
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  font-size: 12.5px;
  font-weight: 590;
  color: #b9c6dc;
  letter-spacing: -0.005em;
  pointer-events: none;
}
.fviz-10 .fv10-tabs {
  display: flex;
  justify-content: center;
  gap: 1px;
  padding: 1px 6px 6px;
}
.fviz-10 .fv10-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px 5px 3px;
  border-radius: 6px;
  font-size: 9.5px;
  line-height: 1.1;
  color: var(--fg-secondary);
  white-space: nowrap;
}
.fviz-10 .fv10-tab svg { width: 18px; height: 16px; }
.fviz-10 .fv10-tab-on { background: rgba(255, 255, 255, 0.09); color: var(--accent); }

/* --- Grouped form ------------------------------------------------------------ */
.fviz-10 .fv10-form {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 2px 18px 0;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent);
          mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent);
}
.fviz-10 .fv10-sh {
  display: flex;
  align-items: baseline;
  margin: 9px 2px 5px;
  font-size: 11.5px;
  font-weight: 650;
  color: #c4cfe0;
}
.fviz-10 .fv10-link {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 400;
  color: var(--accent);
}
.fviz-10 .fv10-group {
  border-radius: 8px;
  background: var(--fv10-grp);
  border: 1px solid rgba(255, 255, 255, 0.055);
}
.fviz-10 .fv10-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 39px;
  margin: 0 10px;
  border-top: 1px solid var(--fv10-line);
}
.fviz-10 .fv10-row:first-child { border-top: none; }
/* Members sit one icon column further in */
.fviz-10 .fv10-member { padding-left: 30px; }
.fviz-10 .fv10-empty { min-height: 28px; font-size: 12px; color: var(--fv10-sec); }

.fviz-10 .fv10-av { width: 22px; height: 22px; flex: none; color: #7f8ba1; }
.fviz-10 .fv10-stack { color: var(--accent); }
.fviz-10 .fv10-unsigned { color: var(--orange); }

.fviz-10 .fv10-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fviz-10 .fv10-name { font-size: 12.5px; color: var(--fg); white-space: nowrap; }
.fviz-10 .fv10-cap {
  font-size: 10.5px;
  color: var(--fv10-sec);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fviz-10 .fv10-default {
  flex: none;
  padding: 1px 6px 2px;
  border-radius: 99px;
  font-size: 10.5px;
  color: var(--fv10-sec);
  background: rgba(255, 255, 255, 0.075);
}
/* The Default slot is reserved on every account row so the clusters line up */
.fviz-10 .fv10-slot { flex: none; width: 48px; display: flex; justify-content: flex-end; }
.fviz-10 .fv10-ctl { width: 14px; height: 14px; flex: none; color: var(--fv10-sec); }
.fviz-10 .fv10-disc { transform: rotate(90deg); }

/* AccountUsageCluster: label · track (ticks at soft and hard) · percent · reset */
.fviz-10 .fv10-usage {
  flex: none;
  width: 172px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 10px;
}
.fviz-10 .fv10-u { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.fviz-10 .fv10-u b { width: 42px; text-align: right; font-weight: 400; color: var(--fv10-sec); }
.fviz-10 .fv10-u em { width: 30px; text-align: right; font-style: normal; color: var(--fg); font-variant-numeric: tabular-nums; }
.fviz-10 .fv10-u s { width: 52px; text-decoration: none; color: var(--fv10-sec); }
.fviz-10 .fv10-track {
  position: relative;
  width: 34px;
  height: 4px;
  border-radius: 2px;
  background: rgba(140, 154, 178, 0.22);
}
.fviz-10 .fv10-track::before,
.fviz-10 .fv10-track::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: rgba(233, 238, 247, 0.55);
}
.fviz-10 .fv10-track::before { left: calc(80% - 0.5px); }
.fviz-10 .fv10-track::after { left: calc(95% - 0.5px); }
.fviz-10 .fv10-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: calc(var(--f) * 100%);
  min-width: 2px;
  border-radius: 2px;
}
.fviz-10 .fv10-g { background: var(--green); }
.fviz-10 .fv10-o { background: var(--orange); }
.fviz-10 .fv10-msg { align-items: flex-end; justify-content: center; color: var(--fv10-sec); }

/* A live reading creeps up between polls */
.fviz-10 .fv10-a1 { animation: fv10-creep1 9s ease-in-out infinite alternate; }
.fviz-10 .fv10-a2 { animation: fv10-creep2 9s ease-in-out infinite alternate; }
@keyframes fv10-creep1 { from { width: 36%; } to { width: 38%; } }
@keyframes fv10-creep2 { from { width: 81%; } to { width: 83%; } }

.fviz-10 .fv10-foot {
  margin: 5px 2px 0;
  font-size: 10.5px;
  color: var(--fv10-sec);
}

.fviz-10 .fv10-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.45);
  font-size: 10.5px;
  color: var(--fv10-sec);
  white-space: nowrap;
}
.fviz-10 .fv10-bar svg { width: 13px; height: 13px; color: #c4cfe0; flex: none; }

/* --- Right column ------------------------------------------------------------ */
.fviz-10 .fv10-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; }

.fviz-10 .fv10-card {
  flex: none;
  background: rgba(28, 38, 58, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
  min-width: 0;
}
.fviz-10 .fv10-head {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
  background: linear-gradient(180deg, rgba(32, 43, 64, 0.9), rgba(26, 36, 55, 0.9));
}
.fviz-10 .fv10-ico { width: 15px; height: 15px; color: var(--fg-secondary); flex: none; }
.fviz-10 .fv10-head-title { font-size: 12.5px; font-weight: 600; color: #b9c6dc; white-space: nowrap; }
.fviz-10 .fv10-head-cap { margin-left: auto; font-size: 10.5px; color: var(--fg-tertiary); white-space: nowrap; }

/* Projects: the path list beside the selected project's detail */
.fviz-10 .fv10-split { display: grid; grid-template-columns: 124px minmax(0, 1fr); }
.fviz-10 .fv10-plist {
  list-style: none;
  margin: 0;
  padding: 5px 5px;
  border-right: 1px solid rgba(0, 0, 0, 0.4);
  background: rgba(10, 15, 26, 0.25);
}
.fviz-10 .fv10-plist li {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 6px 5px;
  border-radius: 5px;
  min-width: 0;
}
.fviz-10 .fv10-plist .fv10-psel { background: var(--accent); }
.fviz-10 .fv10-pn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--fg);
  white-space: nowrap;
}
.fviz-10 .fv10-pn svg { width: 11px; height: 11px; color: var(--fv10-sec); flex: none; }
.fviz-10 .fv10-pn em {
  margin-left: auto;
  padding: 0 4px;
  border-radius: 4px;
  font-style: normal;
  font-size: 9px;
  color: var(--fv10-sec);
  background: rgba(255, 255, 255, 0.08);
}
.fviz-10 .fv10-pp { font-size: 9.5px; color: var(--fv10-sec); white-space: nowrap; overflow: hidden; }
.fviz-10 .fv10-psel .fv10-pp { color: rgba(255, 255, 255, 0.78); }

.fviz-10 .fv10-pdetail { padding: 4px 10px 10px; min-width: 0; }
.fviz-10 .fv10-pgroup h6 {
  margin: 6px 2px 4px;
  font-size: 10.5px;
  font-weight: 650;
  color: #c4cfe0;
}
.fviz-10 .fv10-prow {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--fv10-grp);
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 11px;
  color: var(--fg);
}
.fviz-10 .fv10-prow + .fv10-prow { margin-top: -1px; border-radius: 0 0 6px 6px; }
.fviz-10 .fv10-pgroup .fv10-prow:first-of-type:not(:last-child) { border-radius: 6px 6px 0 0; }
.fviz-10 .fv10-plab { flex: none; }
.fviz-10 .fv10-pick {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  white-space: nowrap;
}
.fviz-10 .fv10-pick svg { width: 7px; height: 10px; color: var(--fv10-sec); flex: none; }
.fviz-10 .fv10-pgroup:first-child .fv10-pick { margin-left: 0; }
.fviz-10 .fv10-pfoot { margin: 5px 2px 0; font-size: 9.5px; line-height: 1.35; color: var(--fv10-sec); }

/* --- Terminal: a claude tab ------------------------------------------------- */
.fviz-10 .fv10-term {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-inset);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow:
    0 40px 80px -30px rgba(0, 0, 0, 0.9),
    0 20px 40px -20px rgba(10, 30, 70, 0.7),
    0 0 0 1px rgba(0, 0, 0, 0.5);
}
.fviz-10 .fv10-tbar {
  position: relative;
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  flex: none;
  background: linear-gradient(180deg, #202b40 0%, #1a2437 100%);
  border-bottom: 1px solid #0a0f1a;
}
.fviz-10 .fv10-tbody {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 10px 12px 12px;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.5;
  color: var(--fv10-t-fg);
  overflow: hidden;
}
.fviz-10 .fv10-l { display: block; white-space: pre-wrap; word-break: break-all; min-height: 1.5em; }
.fviz-10 .fv10-dim { color: var(--fv10-t-sub); }
.fviz-10 .fv10-okb { color: var(--fv10-t-ok); }
.fviz-10 .fv10-early { opacity: 0.55; }
.fviz-10 .fv10-user { background: var(--fv10-t-user); color: #fff; padding-right: 1ch; }

/* The plugin's pane: a titled box under the transcript */
.fviz-10 .fv10-pane {
  padding: 2px 0 0;
  border-top: 1px solid #3a3f4b;
}
.fviz-10 .fv10-ptitle { color: var(--fv10-t-sub); }
.fviz-10 .fv10-b { font-weight: 700; }
.fviz-10 .fv10-opt { padding-left: 2ch; }
.fviz-10 .fv10-focus { position: relative; color: var(--fv10-t-sel); }
.fviz-10 .fv10-focus::before { content: "❯"; position: absolute; left: 0; }

@media (prefers-reduced-motion: reduce) {
  .fviz-10 .fv10-a1,
  .fviz-10 .fv10-a2 { animation: none; }
}

/* --- Narrow: the phone modal shows the Claude group, then the picker -------- */
@media (max-width: 640px) {
  .fviz-10 .fv10-stage { display: flex; flex-direction: column; gap: 12px; height: auto; overflow: visible; }
  .fviz-10 .fv10-tabs,
  .fviz-10 .fv10-bar,
  .fviz-10 .fv10-link,
  .fviz-10 .fv10-x,
  .fviz-10 .fv10-proj,
  .fviz-10 .fv10-early,
  .fviz-10 .fv10-gap,
  .fviz-10 .fv10-slot,
  .fviz-10 .fv10-ctl,
  .fviz-10 .fv10-cap { display: none; }
  .fviz-10 .fv10-form { padding: 0 10px 12px; -webkit-mask-image: none; mask-image: none; }
  .fviz-10 .fv10-row { margin: 0 8px; gap: 7px; min-height: 36px; }
  .fviz-10 .fv10-member { padding-left: 16px; }
  .fviz-10 .fv10-pool .fv10-cap { display: none; }
  .fviz-10 .fv10-av { width: 19px; height: 19px; }
  .fviz-10 .fv10-usage { width: 156px; font-size: 9.5px; }
  .fviz-10 .fv10-u b { width: 40px; }
  .fviz-10 .fv10-u s { width: 46px; }
  .fviz-10 .fv10-term { flex: none; }
  .fviz-10 .fv10-tbody { padding: 9px 10px 11px; font-size: 9.5px; }
}

/* ==========================================================================
   Feature panel 11 — Swarms and task routing
   Left: Settings → Flight Control, its Routing section (rules over their
   compiled pills, the lightbulb's index hint open) and its Capability Index
   heatmap. Right: the main window's sidebar running a swarm, with the header
   menu's Swarm Details… popover, and the phone's SwarmCard.
   Design size: 1000 × 520.
   ========================================================================== */

.fviz-11 {
  --f11-sec:   rgba(235, 240, 250, 0.58);
  --f11-ter:   rgba(235, 240, 250, 0.34);
  --f11-line:  rgba(255, 255, 255, 0.07);
  --f11-acc:   #0a84ff;
  --f11-acct:  #3f9cff;
  --f11-pop:   #262b35;
  position: relative;
  height: 520px;
  font-family: var(--font);
  color: var(--fg);
  font-size: 12px;
  line-height: 1.35;
  -webkit-user-select: none;
  user-select: none;
}
.fviz-11 .fv11-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.fviz-11 svg { display: block; fill: currentColor; }

/* --- Windows ------------------------------------------------------------- */
.fviz-11 .fv11-win {
  position: absolute;
  border-radius: 11px;
  overflow: hidden;
  background: var(--bg-panel);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.fviz-11 .fv11-set  { left: 0; top: 0; width: 452px; padding-bottom: 10px; overflow: visible; z-index: 3; }
/* Cascaded behind the Routing window: only its body shows below it */
.fviz-11 .fv11-idx  { left: 0; top: 250px; width: 452px; height: 276px; z-index: 1; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.fviz-11 .fv11-main { left: 466px; top: 0; width: 534px; height: 520px; overflow: visible; z-index: 2; }

.fviz-11 .fv11-tb {
  position: relative;
  display: flex; align-items: center;
  height: 28px;
  padding: 0 11px;
  border-radius: 11px 11px 0 0;
  background: linear-gradient(180deg, #202b40 0%, #1a2437 100%);
  border-bottom: 1px solid #0a0f1a;
}
.fviz-11 .fv11-lights { display: flex; gap: 7px; }
.fviz-11 .fv11-lights i { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.28); }
.fviz-11 .fv11-lights i:nth-child(1) { background: #ff5f57; }
.fviz-11 .fv11-lights i:nth-child(2) { background: #febc2e; }
.fviz-11 .fv11-lights i:nth-child(3) { background: #28c840; }
.fviz-11 .fv11-wt {
  position: absolute; left: 0; right: 0;
  text-align: center;
  font-size: 12px; font-weight: 590; color: #b9c6dc;
  white-space: nowrap;
}

/* Section bar: the segmented control and the project picker */
.fviz-11 .fv11-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px 4px;
}
.fviz-11 .fv11-rule-b { padding-bottom: 8px; border-bottom: 1px solid rgba(0, 0, 0, 0.45); }
.fviz-11 .fv11-seg {
  display: inline-flex;
  padding: 1px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.06);
  font-size: 10px;
  white-space: nowrap;
}
.fviz-11 .fv11-seg > * { padding: 2px 6.5px; border-radius: 5px; color: var(--f11-sec); font-weight: 500; }
.fviz-11 .fv11-seg > * + * { border-left: 1px solid rgba(255, 255, 255, 0.08); }
.fviz-11 .fv11-seg > b + *, .fviz-11 .fv11-seg > b { border-left-color: transparent; }
.fviz-11 .fv11-seg b {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.35);
  font-weight: 600;
}
.fviz-11 .fv11-pick {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 5px;
  height: 19px;
  padding: 0 5px 0 7px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.4), inset 0 0.5px 0 rgba(255, 255, 255, 0.08);
  font-size: 10.5px;
  white-space: nowrap;
}
.fviz-11 .fv11-fold { width: 12px; height: 10px; color: var(--f11-acct); }
.fviz-11 .fv11-ud { width: 6px; height: 9px; color: var(--f11-sec); margin-left: 6px; }

/* --- Routing: a grouped form ------------------------------------------- */
.fviz-11 .fv11-form { padding: 2px 14px 0; }
.fviz-11 .fv11-sh {
  padding: 6px 4px 4px;
  font-size: 10.5px; font-weight: 600;
  color: var(--f11-sec);
}
.fviz-11 .fv11-group {
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.08);
  padding: 0 9px;
}
.fviz-11 .fv11-rule {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0;
}
.fviz-11 .fv11-group > * + * { border-top: 1px solid var(--f11-line); }
.fviz-11 .fv11-selrow::before {
  content: "";
  position: absolute; inset: 2px -6px;
  border-radius: 6px;
  background: rgba(10, 132, 255, 0.16);
}
.fviz-11 .fv11-rm { position: relative; flex: 1; min-width: 0; }
.fviz-11 .fv11-sent {
  font-size: 11.5px; color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fviz-11 .fv11-pills {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px 4px;
  margin-top: 4px;
}
.fviz-11 .fv11-pill {
  display: inline-flex; align-items: center;
  height: 17px;
  padding: 0 7px;
  border-radius: 8px;
  font-size: 10.5px; font-weight: 500;
  color: rgba(233, 238, 247, 0.85);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14);
  white-space: nowrap;
}
.fviz-11 .fv11-add {
  padding: 0 5px;
  background: none;
  box-shadow: none;
  border: 0.75px dashed rgba(255, 255, 255, 0.28);
  color: var(--f11-sec);
}
.fviz-11 .fv11-add svg { width: 8px; height: 8px; }
.fviz-11 .fv11-j { font-size: 10px; color: var(--f11-ter); }
.fviz-11 .fv11-to { display: inline-flex; align-items: center; gap: 5px; }
.fviz-11 .fv11-arr { width: 10px; height: 9px; color: var(--f11-ter); }
.fviz-11 .fv11-tgt {
  color: var(--f11-acct);
  background: rgba(10, 132, 255, 0.16);
  box-shadow: inset 0 0 0 0.5px rgba(10, 132, 255, 0.5);
}
.fviz-11 .fv11-st {
  position: relative;
  flex: none;
  min-width: 38px;
  display: flex; justify-content: flex-end; align-items: center; gap: 9px;
}
.fviz-11 .fv11-ok { width: 14px; height: 14px; color: var(--green); }
.fviz-11 .fv11-bulb { width: 13px; height: 13px; color: #ffd60a; }
.fviz-11 .fv11-use {
  font-size: 10.5px; font-weight: 600; color: #fff;
  padding: 1px 8px;
  border-radius: 5px;
  background: linear-gradient(180deg, #2b93ff, var(--f11-acc));
  box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.4), inset 0 0.5px 0 rgba(255, 255, 255, 0.2);
}
.fviz-11 .fv11-new {
  display: flex; align-items: center; gap: 8px;
  height: 25px;
  font-size: 11.5px; color: var(--f11-ter);
}
.fviz-11 .fv11-new svg { width: 9px; height: 9px; }
.fviz-11 .fv11-foot {
  display: flex; align-items: baseline; gap: 10px;
  padding: 6px 4px 0;
  font-size: 9.5px; color: var(--f11-sec);
}
.fviz-11 .fv11-foot span { flex: 1; min-width: 0; }
.fviz-11 .fv11-foot b { font-weight: 500; color: var(--f11-acct); white-space: nowrap; }

/* The lightbulb's popover, hanging below the bulb */
.fviz-11 .fv11-hint {
  position: absolute;
  right: -5px; top: calc(100% + 4px);
  width: 292px;
  z-index: 5;
  border-radius: 10px;
  background: var(--f11-pop);
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.16), 0 14px 34px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
}
.fviz-11 .fv11-hint::before {
  content: "";
  position: absolute; top: -6px; right: 28px;
  width: 12px; height: 12px;
  background: var(--f11-pop);
  transform: rotate(45deg);
  border-radius: 2px 0 0 0;
  box-shadow: -0.5px -0.5px 0 rgba(255, 255, 255, 0.16);
}
.fviz-11 .fv11-hbody { position: relative; display: flex; gap: 9px; padding: 13px 14px 12px; }
.fviz-11 .fv11-hbody .fv11-bulb { flex: none; margin-top: 1px; }
.fviz-11 .fv11-hbody b { font-size: 12px; font-weight: 700; color: var(--fg); }
.fviz-11 .fv11-hbody p { margin: 3px 0 0; font-size: 11px; color: var(--f11-sec); line-height: 1.4; }
.fviz-11 .fv11-hfoot {
  display: flex; justify-content: flex-end; gap: 7px;
  padding: 9px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.fviz-11 .fv11-btn {
  display: inline-flex; align-items: center;
  height: 19px;
  padding: 0 9px;
  border-radius: 5px;
  font-size: 10.5px; font-weight: 500;
  color: var(--fg);
  background: rgba(255, 255, 255, 0.13);
  box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.45), inset 0 0.5px 0 rgba(255, 255, 255, 0.1);
  white-space: nowrap;
}
.fviz-11 .fv11-def { color: #fff; background: linear-gradient(180deg, #2b93ff, var(--f11-acc)); }

/* --- Capability index ---------------------------------------------------- */
.fviz-11 .fv11-ix { padding: 14px 14px 0; }
.fviz-11 .fv11-ixh { display: flex; align-items: center; gap: 6px; }
.fviz-11 .fv11-ixh > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fviz-11 .fv11-ixh b { font-size: 13px; font-weight: 700; }
.fviz-11 .fv11-ixh span:not(.fv11-btn) { font-size: 10.5px; color: var(--f11-sec); white-space: nowrap; }
.fviz-11 .fv11-scl { margin: 9px 0 4px; font-size: 11.5px; font-weight: 700; }
.fviz-11 .fv11-hm {
  display: grid;
  grid-template-columns: 104px repeat(8, 42px);
  gap: 2px;
  align-items: center;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent);
}
.fviz-11 .fv11-hm > span { font-size: 9px; color: var(--f11-sec); text-align: center; white-space: nowrap; }
.fviz-11 .fv11-hm > .fv11-mh { text-align: left; font-weight: 700; color: var(--fg); font-size: 10px; }
.fviz-11 .fv11-hm > .fv11-m { text-align: left; font-size: 10.5px; color: var(--fg); }
.fviz-11 .fv11-hm i {
  font-style: normal;
  height: 19px;
  display: grid; place-items: center;
  border-radius: 3px;
  background: var(--c);
  font-family: var(--mono);
  font-size: 9.5px;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.fviz-11 .fv11-hm i.fv11-na { background: rgba(148, 163, 187, 0.08); color: var(--f11-sec); }
.fviz-11 .fv11-cap { margin: 6px 0 0; font-size: 9.5px; color: var(--f11-sec); }

/* --- Main window: sidebar + a glimpse of the selected tab ---------------- */
.fviz-11 .fv11-wt-r { font-size: 12px; }
.fviz-11 .fv11-mbody { display: flex; height: calc(100% - 28px); border-radius: 0 0 11px 11px; overflow: hidden; }
.fviz-11 .fv11-side {
  flex: none;
  width: 266px;
  padding: 6px 0;
  background: rgba(28, 38, 58, 0.72);
  border-right: 1px solid #0a0f1a;
}
.fviz-11 .fv11-row {
  display: flex; align-items: center; gap: 5px;
  height: 24px;
  margin: 1px 8px;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 12.5px;
  white-space: nowrap;
}
.fviz-11 .fv11-proj { font-weight: 600; color: var(--fg-secondary); margin-top: 3px; gap: 4px; }
.fviz-11 .fv11-chv { width: 11px; height: 11px; flex: none; color: var(--fg-tertiary); transform: rotate(90deg); }
.fviz-11 .fv11-coll .fv11-chv { transform: none; }
.fviz-11 .fv11-pn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fviz-11 .fv11-hchip {
  font-size: 9.5px; font-weight: 500;
  color: var(--fg);
  padding: 1px 5px;
  border-radius: 980px;
  background: rgba(255, 255, 255, 0.11);
}
.fviz-11 .fv11-cnt { font-size: 10.5px; font-weight: 400; color: var(--fg-secondary); font-variant-numeric: tabular-nums; }
.fviz-11 .fv11-sess { padding-left: 22px; }
.fviz-11 .fv11-sel { background: rgba(255, 255, 255, 0.15); }
.fviz-11 .fv11-slot { width: 15px; flex: none; display: flex; align-items: center; }
.fviz-11 .fv11-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; margin-right: 1px; }
.fviz-11 .fv11-g { width: 11px; height: 11px; flex: none; }
.fviz-11 .fv11-idle { color: rgba(255, 255, 255, 0.2); }
.fviz-11 .fv11-unread { color: var(--accent); }
.fviz-11 .fv11-chip {
  flex: none;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--fg);
  padding: 1px 5px;
  border-radius: 980px;
  background: rgba(255, 255, 255, 0.1);
}
.fviz-11 .fv11-mk { flex: none; font-size: 10px; color: var(--fg-secondary); }
/* RowMiniMeter: 28 × 4, soft and hard ticks */
.fviz-11 .fv11-mini {
  position: relative; flex: none;
  width: 28px; height: 4px;
  border-radius: 2px;
  background: rgba(148, 163, 187, 0.2);
}
.fviz-11 .fv11-mini b { position: absolute; left: 0; top: 0; bottom: 0; width: 88%; border-radius: 2px; background: var(--orange); }
.fviz-11 .fv11-mini u,
.fviz-11 .fv11-trk u { position: absolute; top: 0; bottom: 0; width: 1px; margin-left: -0.5px; background: rgba(233, 238, 247, 0.55); }

.fviz-11 .fv11-spin { --sp: 11px; position: relative; width: var(--sp); height: var(--sp); flex: none; animation: fv11-spin 0.8s steps(8) infinite; }
.fviz-11 .fv11-spin i {
  position: absolute; left: 50%; top: 50%;
  width: 1.6px; height: 3.3px;
  margin: -5px 0 0 -0.8px;
  border-radius: 980px;
  background: var(--fg-secondary);
  transform-origin: 50% 5px;
}
.fviz-11 .fv11-spin i:nth-child(1) { transform: rotate(0deg);   opacity: .22; }
.fviz-11 .fv11-spin i:nth-child(2) { transform: rotate(45deg);  opacity: .32; }
.fviz-11 .fv11-spin i:nth-child(3) { transform: rotate(90deg);  opacity: .42; }
.fviz-11 .fv11-spin i:nth-child(4) { transform: rotate(135deg); opacity: .52; }
.fviz-11 .fv11-spin i:nth-child(5) { transform: rotate(180deg); opacity: .62; }
.fviz-11 .fv11-spin i:nth-child(6) { transform: rotate(225deg); opacity: .72; }
.fviz-11 .fv11-spin i:nth-child(7) { transform: rotate(270deg); opacity: .82; }
.fviz-11 .fv11-spin i:nth-child(8) { transform: rotate(315deg); opacity: .92; }
@keyframes fv11-spin { to { transform: rotate(360deg); } }

.fviz-11 .fv11-term {
  flex: 1; min-width: 0;
  background: var(--bg-inset);
}

/* Swarm Details… : arrow on its leading edge, at the header row */
.fviz-11 .fv11-pop {
  position: absolute;
  left: 272px; top: 27px;
  width: 262px;
  z-index: 4;
  padding: 11px 12px 11px;
  border-radius: 10px;
  background: var(--f11-pop);
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.16), 0 14px 34px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
}
.fviz-11 .fv11-pop::before {
  content: "";
  position: absolute; left: -6px; top: 13px;
  width: 12px; height: 12px;
  background: var(--f11-pop);
  transform: rotate(45deg);
  border-radius: 0 0 0 2px;
  box-shadow: -0.5px 0.5px 0 rgba(255, 255, 255, 0.16);
}
.fviz-11 .fv11-ph { position: relative; font-size: 12.5px; font-weight: 700; }
.fviz-11 .fv11-pool { margin-top: 10px; display: flex; flex-direction: column; gap: 7px; }
.fviz-11 .fv11-pt { font-size: 11.5px; font-weight: 700; }
.fviz-11 .fv11-al { display: flex; justify-content: space-between; font-size: 11px; }
.fviz-11 .fv11-al span + span { color: var(--f11-sec); font-variant-numeric: tabular-nums; }
.fviz-11 .fv11-trk {
  position: relative;
  height: 5px; margin: 3px 0 3px;
  border-radius: 3px;
  background: rgba(148, 163, 187, 0.2);
}
.fviz-11 .fv11-trk b { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--green); }
.fviz-11 .fv11-trk b.fv11-soft { background: var(--orange); }
.fviz-11 .fv11-ac { font-size: 9.5px; color: var(--f11-sec); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fviz-11 .fv11-wh { margin-top: 10px; font-size: 11px; font-weight: 500; }
.fviz-11 .fv11-wl { margin-top: 3px; font-size: 9.5px; line-height: 1.4; }
.fviz-11 .fv11-links { margin-top: 8px; font-size: 11px; color: var(--f11-acct); }

/* --- iPhone: FleetListScreen with the SwarmCard at the top of a project -- */
.fviz-11 .fv11-phone {
  position: absolute;
  right: 6px; top: 336px;
  width: 226px; height: 184px;
  z-index: 6;
  padding: 7px 7px 0;
  border-radius: 36px 36px 0 0;
  background: linear-gradient(180deg, #2a2d33, #16181c 40%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 0 0 2.5px #0b0c0e,
    0 30px 70px -20px rgba(0, 0, 0, 0.9);
  -webkit-mask-image: linear-gradient(180deg, #000 90%, transparent);
          mask-image: linear-gradient(180deg, #000 90%, transparent);
}
.fviz-11 .fv11-scr {
  height: 100%;
  border-radius: 30px 30px 0 0;
  background: #000;
  color: #fff;
  overflow: hidden;
  padding: 0 0 0;
}
.fviz-11 .fv11-stat {
  position: relative;
  height: 27px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 18px 0 24px;
}
.fviz-11 .fv11-time { font-size: 11px; font-weight: 600; }
.fviz-11 .fv11-isl { position: absolute; left: 50%; top: 7px; width: 62px; height: 18px; margin-left: -31px; border-radius: 980px; background: #000; box-shadow: inset 0 0 0 1px #0c0c0c; }
.fviz-11 .fv11-sic { display: flex; gap: 4px; align-items: center; }
.fviz-11 .fv11-sic svg { height: 8px; width: auto; }
.fviz-11 .fv11-big { padding: 0 14px 2px; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.fviz-11 .fv11-phh {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 14px 4px 16px;
  font-family: var(--mono);
  font-size: 9.5px;
  color: rgba(235, 235, 245, 0.6);
}
.fviz-11 .fv11-pchv { width: 8px; height: 8px; transform: rotate(90deg); }
.fviz-11 .fv11-phh em { margin-left: auto; font-style: normal; font-size: 9.5px; }
.fviz-11 .fv11-pplus { width: 10px; height: 10px; color: var(--f11-acc); margin-left: 6px; }
.fviz-11 .fv11-cell {
  margin: 0 10px;
  padding: 8px 10px 9px;
  background: #1c1c1e;
  border-radius: 10px 10px 0 0;
}
.fviz-11 .fv11-cell + .fv11-cell { border-radius: 0; border-top: 0.5px solid rgba(84, 84, 88, 0.6); }
.fviz-11 .fv11-ct { font-size: 11px; font-weight: 600; margin-bottom: 3px; }
.fviz-11 .fv11-cm { font-family: var(--mono); font-size: 8.5px; line-height: 1.5; color: rgba(235, 235, 245, 0.6); font-variant-numeric: tabular-nums; }
.fviz-11 .fv11-cm.fv11-warn { color: var(--orange); }
.fviz-11 .fv11-pb {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 11px;
  border-radius: 980px;
  font-size: 10.5px; font-weight: 500;
  color: var(--f11-acct);
  background: rgba(10, 132, 255, 0.18);
}
.fviz-11 .fv11-srow { display: flex; align-items: center; gap: 8px; }
.fviz-11 .fv11-st2 { font-family: var(--mono); font-size: 11px; }
.fviz-11 .fv11-sc { font-family: var(--mono); font-size: 8.5px; color: rgba(235, 235, 245, 0.85); margin-top: 1px; }

/* --- Motion ---------------------------------------------------------------- */
@keyframes fv11-pulse { 50% { opacity: 0.45; } }
.fviz-11 .fv11-hint .fv11-bulb,
.fviz-11 .fv11-selrow .fv11-bulb { animation: fv11-pulse 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .fviz-11 .fv11-spin,
  .fviz-11 .fv11-bulb { animation: none !important; }
}

/* --- Phone-width modal ------------------------------------------------------ */
@media (max-width: 640px) {
  .fviz-11 { height: auto; display: flex; flex-direction: column; gap: 12px; }
  .fviz-11 .fv11-win,
  .fviz-11 .fv11-phone { position: relative; left: auto; right: auto; top: auto; width: auto; height: auto; }
  .fviz-11 .fv11-idx,
  .fviz-11 .fv11-phone,
  .fviz-11 .fv11-term,
  .fviz-11 .fv11-hint { display: none; }
  .fviz-11 .fv11-set { order: 2; }
  .fviz-11 .fv11-main { order: 1; }
  .fviz-11 .fv11-bar { flex-wrap: wrap; }
  .fviz-11 .fv11-seg { font-size: 9px; }
  .fviz-11 .fv11-seg > * { padding: 2px 4.5px; }
  .fviz-11 .fv11-pick { margin-left: 0; }
  .fviz-11 .fv11-form { padding-bottom: 4px; }
  .fviz-11 .fv11-foot { display: none; }
  .fviz-11 .fv11-mbody { flex-direction: column; height: auto; }
  .fviz-11 .fv11-side { width: auto; border-right: 0; }
  .fviz-11 .fv11-side .fv11-row:nth-child(n+7) { display: none; }
  .fviz-11 .fv11-pop { position: relative; left: auto; top: auto; width: auto; margin: 4px 10px 10px; }
  .fviz-11 .fv11-pop::before { left: 40px; top: -6px; border-radius: 2px 0 0 0; box-shadow: -0.5px -0.5px 0 rgba(255, 255, 255, 0.16); }
  .fviz-11 .fv11-wt-r { font-size: 11.5px; }
}
/* ==== new previews: end ==== */

/* ==========================================================================
   Highlight 12 — "One code index for every agent"
   Tile: four agents send short queries to one index and get short answers back.
   Shot (.fviz-12, drawn for 1000px): a Claude Code pane calling the index beside
   `flightdeck index status`, then paired bars of the measured numbers.
   ========================================================================== */

/* Tile art */
.hl-12 .hl-art s { display: block; text-decoration: none; }
.hl-12 .hl12-wires { position: absolute; inset: 0; width: 100%; height: 100%; }
.hl-12 .hl12-wires path { fill: none; stroke: var(--hairline); stroke-width: 1.5; stroke-dasharray: 3 4; }
.hl-12 .hl12-ag {
  position: absolute; width: 13cqw; height: 7.5cqw; display: flex; align-items: center; gap: 1.4cqw; padding-left: 1.4cqw;
  border-radius: 1.6cqw; background: var(--bg-panel); border: 1px solid var(--hairline);
  animation: hl12-ag 6s ease-in-out infinite; animation-delay: calc(var(--i) * .4s);
}
.hl-12 .hl12-ag s { height: 1cqw; border-radius: .5cqw; background: var(--fg-secondary); opacity: .55; }
.hl-12 .hl12-mk {
  display: block; width: 2.2cqw; height: 2.2cqw; flex: none;
  background: var(--c, var(--glow-cyan)); box-shadow: 0 0 1.2cqw color-mix(in srgb, var(--c, var(--glow-cyan)) 45%, transparent);
}
.hl-12 .m-circle { --c: var(--glow-cyan); border-radius: 50%; }
.hl-12 .m-sq     { --c: var(--glow-blue); border-radius: .5cqw; }
.hl-12 .m-tri    { --c: var(--fg); clip-path: polygon(50% 4%, 97% 92%, 3% 92%); box-shadow: none; }
.hl-12 .m-ring   { --c: var(--glow-cyan); background: transparent; border: .5cqw solid var(--c); border-radius: 50%; box-shadow: none; }
.hl-12 .hl12-hub {
  position: absolute; left: 41cqw; top: 22.5cqw; width: 18cqw; height: 17cqw; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.2cqw; border-radius: 2.4cqw;
  background: var(--bg-panel); border: 1px solid rgba(79, 227, 255, .45);
  box-shadow: 0 0 5cqw rgba(79, 227, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .04);
  animation: hl12-hub 6s ease-in-out infinite;
}
.hl-12 .hl12-hub i { width: 5cqw; height: 1.2cqw; border-radius: .6cqw; background: var(--glow-cyan); box-shadow: 0 0 1.4cqw var(--glow-cyan); }
.hl-12 .hl12-hub span { font: 600 2.6cqw/1 var(--mono); color: var(--fg); letter-spacing: .04em; }
.hl-12 .hl12-pip {
  position: absolute; border-radius: 50%; opacity: 0; animation-duration: 6s; animation-iteration-count: infinite;
  animation-delay: calc(var(--i) * .4s);
}
.hl-12 .hl12-pip.q { width: 2.6cqw; height: 1.2cqw; border-radius: .6cqw; background: var(--fg-secondary); animation-name: hl12-q; }
.hl-12 .hl12-pip.a { width: 1.8cqw; height: 1.8cqw; background: var(--glow-cyan); box-shadow: 0 0 1.6cqw var(--glow-cyan); animation-name: hl12-a; }
@keyframes hl12-q {
  0%, 6% { opacity: 0; transform: none; }
  10% { opacity: 1; transform: none; }
  30% { opacity: 1; transform: translate(var(--dx), var(--dy)); }
  33%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); }
}
@keyframes hl12-a {
  0%, 38% { opacity: 0; transform: none; }
  42% { opacity: 1; transform: none; }
  60% { opacity: 1; transform: translate(var(--dx), var(--dy)); }
  63%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); }
}
@keyframes hl12-hub { 0%, 28%, 44%, 100% { transform: none; } 34% { transform: scale(1.05); box-shadow: 0 0 7cqw rgba(79, 227, 255, .3); } }
@keyframes hl12-ag { 0%, 58%, 72%, 100% { border-color: var(--hairline); } 64% { border-color: rgba(79, 227, 255, .6); } }

/* Shot */
.fviz-12 {
  --t-fg: #f2f2f2; --t-sub: #949494; --t-ok: #4eba65; --t-user: #373737;
  --a: var(--glow-cyan); --b: #55627a;
  display: flex; flex-direction: column; gap: 14px; padding: 4px 0 2px;
}
.fviz-12 .fv12-top { display: flex; gap: 16px; align-items: stretch; }
.fviz-12 .fv12-win {
  flex: 1; min-width: 0; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden;
  background: var(--bg-panel); border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .8), 0 0 0 1px rgba(0, 0, 0, .5);
}
.fviz-12 .fv12-titlebar { height: 34px; display: flex; align-items: center; gap: 12px; padding: 0 14px; background: var(--bg-raised); border-bottom: 1px solid var(--hairline-soft); }
.fviz-12 .fv12-lights { display: flex; gap: 8px; }
.fviz-12 .fv12-lights i { width: 11px; height: 11px; border-radius: 50%; }
.fviz-12 .fv12-lights .r { background: #ff5f57; }
.fviz-12 .fv12-lights .y { background: #febc2e; }
.fviz-12 .fv12-lights .g { background: #28c840; }
.fviz-12 .fv12-wintitle { font-size: 12px; color: var(--fg-secondary); }
.fviz-12 .fv12-term {
  flex: 1; min-width: 0; padding: 12px 16px 14px; background: var(--bg-inset);
  font: 11.5px/1.45 var(--mono); color: var(--t-fg); overflow: hidden;
}
.fviz-12 .fv12-term .l { display: block; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.fviz-12 .fv12-term .l.user { background: var(--t-user); color: #fff; margin-bottom: 1.45em; padding-right: 1ch; }
.fviz-12 .fv12-term .fv12-gap { margin-top: 1.45em; }
.fviz-12 .t-dim { color: var(--t-sub); }
.fviz-12 .b-ok { color: var(--t-ok); }
.fviz-12 .b-run { color: var(--t-sub); }

.fviz-12 .fv12-status {
  width: 280px; flex: none; padding: 14px 16px; border-radius: 12px; background: var(--bg-inset);
  border: 1px solid rgba(255, 255, 255, .09); font: 11.5px/1.45 var(--mono); color: var(--t-fg);
}
.fviz-12 .fv12-cmd { margin-bottom: 10px; }
.fviz-12 .fv12-kv { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px solid var(--hairline-soft); }
.fviz-12 .fv12-kv span { color: var(--t-sub); }
.fviz-12 .fv12-kv b { font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.fviz-12 .fv12-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--t-ok); flex: none; display: inline-block; }
.fviz-12 .fv12-projs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; padding-top: 10px; border-top: 1px solid var(--hairline-soft); }
.fviz-12 .fv12-projs span { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-secondary); }

.fviz-12 .fv12-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 32px; padding: 18px 22px 14px;
  border-radius: 12px; background: var(--bg-panel); border: 1px solid var(--hairline);
}
.fviz-12 .fv12-col { min-width: 0; }
.fviz-12 .fv12-col h5 { margin: 0 0 6px; font-size: 13px; font-weight: 620; letter-spacing: -.01em; color: var(--fg); }
.fviz-12 .fv12-leg { display: flex; gap: 16px; margin-bottom: 8px; font-size: 11px; color: var(--fg-tertiary); }
.fviz-12 .fv12-leg i { display: inline-block; width: 14px; height: 7px; margin-right: 6px; border-radius: 2px; background: var(--b); }
.fviz-12 .fv12-leg i.a { background: var(--a); }
.fviz-12 .fv12-row { padding: 6px 0 7px; border-top: 1px solid var(--hairline-soft); }
.fviz-12 .fv12-m { font-size: 11.5px; color: var(--fg-secondary); margin-bottom: 4px; }
.fviz-12 .fv12-m em { font-style: normal; font-weight: 600; color: var(--a); margin-left: 6px; }
.fviz-12 .fv12-sub { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--hairline); font: 600 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-tertiary); }
.fviz-12 .fv12-bar { --c: var(--b); display: flex; align-items: center; gap: 8px; height: 16px; }
.fviz-12 .fv12-bar.a { --c: var(--a); }
.fviz-12 .fv12-bar::before { content: ""; flex: none; width: calc(var(--w) * .42); min-width: 3px; height: 9px; border-radius: 3px; background: var(--c); }
.fviz-12 .fv12-bar.a::before { box-shadow: 0 0 8px rgba(79, 227, 255, .35); }
.fviz-12 .fv12-bar b { font: 500 11.5px/1 var(--mono); color: var(--fg); white-space: nowrap; }
.fviz-12 .fv12-bar.b b { color: var(--fg-secondary); }
.fviz-12 .fv12-track { position: relative; height: 16px; border-radius: 3px; background: var(--hairline-soft); }
.fviz-12 .fv12-track i { position: absolute; top: 3px; bottom: 3px; left: 45%; width: 13%; border-radius: 3px; background: var(--b); }
.fviz-12 .fv12-track b { position: absolute; top: 0; left: calc(58% + 8px); line-height: 16px; font: 500 11.5px/16px var(--mono); color: var(--fg); }
.fviz-12 .fv12-foot { margin: 0; font-size: 11.5px; color: var(--fg-tertiary); text-align: right; }

@media (max-width: 640px) {
  .fviz-12 { gap: 12px; }
  .fviz-12 .fv12-top { flex-direction: column; }
  .fviz-12 .fv12-status { width: auto; }
  .fviz-12 .fv12-term { font-size: 10.5px; padding: 10px 12px; }
  .fviz-12 .fv12-term .l:nth-child(n+7):not(.fv12-gap) { display: none; }
  .fviz-12 .fv12-stats { grid-template-columns: 1fr; padding: 14px 14px 10px; gap: 18px; }
  .fviz-12 .fv12-bar::before { width: calc(var(--w) * .3); }
  .fviz-12 .fv12-bar b { white-space: normal; font-size: 11px; line-height: 1.2; }
  .fviz-12 .fv12-bar { height: auto; min-height: 16px; }
  .fviz-12 .fv12-foot { text-align: left; }
}