@font-face{font-family:"Inter Variable";font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-latin-wght-normal.3100e775e8.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* The demos' stylesheet, linked in <head> by every page that has a demo, so a poster is styled before any script runs.
   scripts/build.ts inlines these imports, prepends the Inter @font-face and appends the posters' generated rules
   (container queries and hoisted styles). The kit parts' own `import "./x.css"` lines are stubbed out of the JS
   bundles for the same reason: every demo style is here, once. */
/* Stageshow kit: the stage. Tokens, the looks (theme, palette,
   fidelity), edge fades, the still and placing switches, the keyframes more
   than one part shares, and the guards against host CSS. Imported by
   stage.tsx; every other component imports its own file. */

@layer stageshow {
  /* Stageshow kit. Tokens, the stage, the cursor, window chrome and faux atoms.
     Copy this file with the rest of kit/ and import it once. */

  .ss-fit {
    position: relative;
    width: 100%;
    /* Stopped at its design size in a wider slot, a stage sits in the middle
       of it, not against its left edge */
    margin-inline: auto;
  }

  .ss-stage {
    /* Surfaces */
    --ss-canvas: #f6f5f4;
    --ss-surface: #fff;
    --ss-chrome: #fff;

    /* Placeholder ink, lightest to darkest. Faux UI lives in these five. */
    --ss-ink-1: rgba(0, 0, 0, 0.04);
    --ss-ink-2: rgba(0, 0, 0, 0.06);
    --ss-ink-3: rgba(0, 0, 0, 0.08);
    /* ink-3 flattened onto the surface: an opaque fill for shapes that overlap
       (avatars in a pile), so the overlap never paints darker */
    --ss-fill: #ebebeb;
    --ss-ink-4: rgba(0, 0, 0, 0.1);
    --ss-ink-5: rgba(0, 0, 0, 0.15);

    /* Lines and real text */
    --ss-line: rgba(0, 0, 0, 0.06);
    --ss-line-faint: rgba(0, 0, 0, 0.04);
    /* Opaque, so icons that inherit them are one solid color (a translucent
       color paints darker wherever strokes meet) */
    --ss-text: #7a7a7d;
    --ss-text-strong: #262628;
    --ss-text-faint: #9a9a9d;
    /* Icons: opaque, so strokes that overlap or meet never paint darker. Never
       color an icon with a translucent ink or text token. */
    --ss-icon: #707074;
    --ss-icon-faint: #c4c4c7;

    /* One accent, spent on the thing being acted on. Status colors only
       where status is the subject. */
    --ss-accent: #3b82f6;
    --ss-accent-soft: rgba(59, 130, 246, 0.12);
    --ss-success: #22c55e;
    --ss-danger: #ef4444;
    --ss-warning: #f59e0b;

    /* The stage behind a framed shot */
    --ss-well: #efeeec;

    /* Status tints for diffs, badges and pills: soft fill, strong text */
    --ss-success-soft: rgba(34, 197, 94, 0.12);
    --ss-success-text: #15803d;
    --ss-danger-soft: rgba(239, 68, 68, 0.1);
    --ss-danger-text: #b91c1c;
    --ss-warning-soft: rgba(245, 158, 11, 0.14);
    --ss-warning-text: #b45309;
    /* A second accent stop, for gradient meters and lines */
    --ss-accent-2: #8b5cf6;
    /* The accent as text (a link, a selected label). Darkened so it reads on
       white; a custom accent gets the same treatment automatically */
    --ss-accent-text: color-mix(in srgb, var(--ss-accent) 82%, #000);

    /* Depth */
    --ss-shadow-window: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.08);
    --ss-shadow-float: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12), 0 12px 32px rgba(0, 0, 0, 0.08);
    --ss-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04);
    /* Framing depth: the hero window on the stage, satellites over the hero */
    /* The ring gives every edge a line: the drop falls downward, so the top and
       a light sidebar on a light ground would otherwise vanish */
    --ss-shadow-hero: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3);
    /* Something picked up and carried (a dragged card) */
    --ss-shadow-lift: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 12px 28px -6px rgba(50, 50, 93, 0.28), 0 6px 12px -6px rgba(0, 0, 0, 0.16);
    /* Tight on purpose: a wide blur over a white window reads as a gray smear */
    --ss-raised: #fff;
    --ss-shadow-satellite: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 14px 32px -8px rgba(50, 50, 93, 0.24), 0 4px 10px -4px rgba(0, 0, 0, 0.1);
    /* A small window resting on the stage's ground, not over another window:
       a hairline and a long, faint fall. The satellite's tight, dark contact
       shadow reads harsh under a small window on open ground */
    --ss-shadow-ground: 0 0 0 1px rgba(50, 50, 93, 0.06), 0 24px 48px -24px rgba(50, 50, 93, 0.18);

    --ss-font: system-ui, -apple-system, sans-serif;
    --ss-mono: "SF Mono", "SFMono-Regular", ui-monospace, Consolas, monospace;

    /* Shape: the radius scale the product's own parts use. A look sets these
       to its design system's values; each rounded part reads one */
    --ss-radius-sm: 6px; /* a menu row, a segment's thumb */
    --ss-radius-md: 8px; /* a field, a segmented track, a drop slot */
    --ss-radius-lg: 10px; /* a popover, a toast */
    --ss-radius-window: 12px; /* the product window */
    --ss-radius-pill: 999px; /* badges and chips */

    /* Density: the heights the parts are built on */
    --ss-control: 34px; /* a text field */
    --ss-row: 26px; /* a menu row, a segment */

    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    font-family: var(--ss-font);
    -webkit-font-smoothing: antialiased;
    user-select: none;
    /* The baseline every demo is designed against, pinned here so the host
       page's type (a blog's 15px body, its letter-spacing) never reaches in */
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    word-spacing: normal;
    text-align: start;
    text-indent: 0;
    text-transform: none;
    white-space: normal;
    color: #000;
  }

  /* Orbs: a pale tile lit by a few huge, soft color orbs (Stage ground).
     Under everything in the scene (the stage is its own stacking context),
     so glass has color to take and white cards lift off it. Each orb is
     wider than the tile and mostly off it, so only its soft edge shows */
  .ss-ground {
    --ss-orb-1: #c9b8ff;
    --ss-orb-2: #ffc59a;
    --ss-orb-3: #a9d8ff;
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    /* A tile: set --ss-ground-radius to 0 for one that runs to the page's edges */
    border-radius: var(--ss-ground-radius, 20px);
    background:
      radial-gradient(60% 75% at 8% 4%, color-mix(in srgb, var(--ss-orb-1) 85%, transparent), transparent 70%),
      radial-gradient(55% 70% at 96% 92%, color-mix(in srgb, var(--ss-orb-2) 80%, transparent), transparent 70%),
      radial-gradient(45% 55% at 78% 8%, color-mix(in srgb, var(--ss-orb-3) 55%, transparent), transparent 70%),
      var(--ss-canvas);
    pointer-events: none;
  }

  .ss-stage[data-theme="dark"] .ss-ground {
    background:
      radial-gradient(60% 75% at 8% 4%, color-mix(in srgb, var(--ss-orb-1) 30%, transparent), transparent 70%),
      radial-gradient(55% 70% at 96% 92%, color-mix(in srgb, var(--ss-orb-2) 24%, transparent), transparent 70%),
      radial-gradient(45% 55% at 78% 8%, color-mix(in srgb, var(--ss-orb-3) 18%, transparent), transparent 70%),
      var(--ss-canvas);
  }

  .ss-stage[data-theme="dark"] {
    --ss-canvas: #111113;
    --ss-surface: #1a1a1d;
    --ss-chrome: #1d1d20;
    --ss-ink-1: rgba(255, 255, 255, 0.05);
    --ss-ink-2: rgba(255, 255, 255, 0.07);
    --ss-ink-3: rgba(255, 255, 255, 0.1);
    /* ink-3 flattened onto the surface: an opaque fill for shapes that overlap
       (avatars in a pile), so the overlap never paints darker */
    --ss-fill: #313134;
    --ss-ink-4: rgba(255, 255, 255, 0.13);
    --ss-ink-5: rgba(255, 255, 255, 0.2);
    --ss-line: rgba(255, 255, 255, 0.08);
    --ss-line-faint: rgba(255, 255, 255, 0.05);
    --ss-text: #9d9da1;
    --ss-text-strong: #ececee;
    --ss-text-faint: #6c6c70;
    --ss-icon: #9a9aa0;
    --ss-icon-faint: #4a4a50;
    --ss-accent-soft: rgba(59, 130, 246, 0.2);
    --ss-accent-text: color-mix(in srgb, var(--ss-accent) 70%, #fff);
    --ss-well: #0a0a0b;
    --ss-success-soft: rgba(34, 197, 94, 0.16);
    --ss-success-text: #4ade80;
    --ss-danger-soft: rgba(239, 68, 68, 0.16);
    --ss-danger-text: #f87171;
    --ss-warning-soft: rgba(245, 158, 11, 0.18);
    --ss-warning-text: #fbbf24;
    --ss-shadow-lift: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 12px 28px -6px rgba(0, 0, 0, 0.6);
    --ss-shadow-window: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 4px 16px rgba(0, 0, 0, 0.4);
    --ss-shadow-float: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 4px 16px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.3);
    --ss-shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.05);
    --ss-shadow-hero: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 60px -12px rgba(0, 0, 0, 0.6);
    /* On dark, depth comes mostly from a lighter surface: put satellites on
       --ss-raised. A wide blur on a dark window barely registers. */
    --ss-shadow-satellite: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 14px 32px -8px rgba(0, 0, 0, 0.7), 0 4px 10px -4px rgba(0, 0, 0, 0.5);
    --ss-shadow-ground: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 24px 48px -24px rgba(0, 0, 0, 0.6);
    --ss-raised: #26262a;
  }

  /* Blueprint: drawn, not painted. Surfaces become outlines on a blue ground. */
  .ss-stage[data-theme="blueprint"] {
    --ss-canvas: transparent;
    /* Opaque, a step lighter than the ground: the grid shows around UI, not
       through it */
    --ss-surface: #1857bd;
    --ss-raised: #1b5cc4;
    --ss-chrome: transparent;
    --ss-ink-1: rgba(214, 232, 255, 0.12);
    --ss-ink-2: rgba(214, 232, 255, 0.16);
    --ss-ink-3: rgba(214, 232, 255, 0.22);
    /* ink-3 flattened onto the surface: an opaque fill for shapes that overlap
       (avatars in a pile), so the overlap never paints darker */
    --ss-fill: #4277cc;
    --ss-ink-4: rgba(214, 232, 255, 0.3);
    --ss-ink-5: rgba(214, 232, 255, 0.45);
    --ss-line: rgba(214, 232, 255, 0.35);
    --ss-line-faint: rgba(214, 232, 255, 0.2);
    --ss-text: #b3c9ec;
    --ss-text-strong: #f0f6ff;
    --ss-text-faint: #7fa1da;
    --ss-icon: #c9dcf7;
    --ss-icon-faint: #6f97d6;
    --ss-accent: #ffffff;
    --ss-accent-soft: rgba(255, 255, 255, 0.15);
    --ss-success: #e6f0ff;
    --ss-danger: #e6f0ff;
    --ss-warning: #e6f0ff;
    /* Status reads by mark and word on blueprint, never by green or red */
    --ss-success-soft: rgba(255, 255, 255, 0.14);
    --ss-danger-soft: rgba(255, 255, 255, 0.14);
    --ss-warning-soft: rgba(255, 255, 255, 0.14);
    --ss-success-text: #ffffff;
    --ss-danger-text: #ffffff;
    --ss-warning-text: #ffffff;
    --ss-well: #1450b4;
    --ss-shadow-window: 0 0 0 1px rgba(214, 232, 255, 0.55);
    --ss-shadow-float: 0 0 0 1px rgba(214, 232, 255, 0.7);
    --ss-shadow-card: 0 0 0 1px rgba(214, 232, 255, 0.35);
    --ss-shadow-hero: 0 0 0 1px rgba(214, 232, 255, 0.55);
    --ss-shadow-satellite: 0 0 0 1px rgba(214, 232, 255, 0.8);
    --ss-shadow-ground: 0 0 0 1px rgba(214, 232, 255, 0.7);
    background-color: var(--ss-well);
    background-image:
      linear-gradient(rgba(214, 232, 255, 0.08) 1px, transparent 1px),
      linear-gradient(90deg, rgba(214, 232, 255, 0.08) 1px, transparent 1px);
    background-size: 16px 16px;
    /* Shift the grid so window edges sit on its lines: a 24px gutter wants 8px */
    background-position: var(--ss-grid-x, 0) var(--ss-grid-y, 0);
  }

  /* Glass: frosted, translucent panels over a soft color field drawn from the
     accent. Panels blur what's behind them; text and icons stay opaque. Give
     your own panels the class ss-glass to frost them too. */
  .ss-stage[data-theme="glass"] {
    --ss-canvas: rgba(255, 255, 255, 0.5);
    --ss-surface: rgba(255, 255, 255, 0.62);
    --ss-chrome: rgba(255, 255, 255, 0.38);
    --ss-raised: rgba(255, 255, 255, 0.74);
    --ss-line: rgba(255, 255, 255, 0.65);
    --ss-line-faint: rgba(255, 255, 255, 0.45);
    --ss-well: #ebe9f5;
    --ss-shadow-window: inset 0 0 0 1px rgba(255, 255, 255, 0.75), 0 20px 50px -14px rgba(40, 40, 90, 0.28);
    --ss-shadow-hero: inset 0 0 0 1px rgba(255, 255, 255, 0.75), 0 30px 60px -16px rgba(40, 40, 90, 0.3);
    --ss-shadow-satellite: inset 0 0 0 1px rgba(255, 255, 255, 0.85), 0 16px 36px -10px rgba(40, 40, 90, 0.32);
    --ss-shadow-float: inset 0 0 0 1px rgba(255, 255, 255, 0.85), 0 12px 32px -8px rgba(40, 40, 90, 0.28);
    --ss-shadow-ground: inset 0 0 0 1px rgba(255, 255, 255, 0.85), 0 24px 48px -24px rgba(40, 40, 90, 0.24);
    --ss-shadow-card: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
    background:
      radial-gradient(55% 65% at 12% 18%, color-mix(in srgb, var(--ss-accent) 42%, transparent), transparent 70%),
      radial-gradient(50% 60% at 88% 28%, color-mix(in srgb, var(--ss-accent-2) 38%, transparent), transparent 70%),
      radial-gradient(60% 55% at 58% 100%, rgba(255, 168, 120, 0.42), transparent 70%),
      var(--ss-well);
  }

  .ss-stage[data-theme="glass"] .ss-window,
  .ss-stage[data-theme="glass"] .ss-popover,
  .ss-stage[data-theme="glass"] .ss-glass {
    backdrop-filter: blur(24px) saturate(1.6);
    -webkit-backdrop-filter: blur(24px) saturate(1.6);
  }

  /* Cool grays (Stage greys="cool"): the canvas and well lose their warmth,
     for a scene that wants one cool family (macOS, a blue ground). Light
     theme only; dark, blueprint and glass have their own grounds */
  .ss-stage[data-greys="cool"]:not([data-theme="dark"], [data-theme="blueprint"], [data-theme="glass"]) {
    --ss-canvas: #f4f5f8;
    --ss-well: #eceef2;
  }

  /* Grayscale: the accent and status colors fall back to the strongest ink */
  .ss-stage[data-palette="mono"] {
    --ss-accent: #1a1a1a;
    --ss-accent-soft: rgba(0, 0, 0, 0.06);
    --ss-success: #1a1a1a;
    --ss-danger: #1a1a1a;
    --ss-warning: #1a1a1a;
    --ss-accent-2: #1a1a1a;
    --ss-success-text: #1a1a1a;
    --ss-danger-text: #1a1a1a;
    --ss-success-soft: rgba(0, 0, 0, 0.06);
    --ss-danger-soft: rgba(0, 0, 0, 0.04);
  }

  .ss-stage[data-palette="mono"][data-theme="dark"] {
    --ss-accent: #f2f2f2;
    --ss-accent-soft: rgba(255, 255, 255, 0.1);
    --ss-success: #f2f2f2;
    --ss-danger: #f2f2f2;
    --ss-warning: #f2f2f2;
    --ss-accent-2: #f2f2f2;
    --ss-success-text: #f2f2f2;
    --ss-danger-text: #f2f2f2;
    --ss-success-soft: rgba(255, 255, 255, 0.1);
    --ss-danger-soft: rgba(255, 255, 255, 0.06);
  }

  /* Images, logos and avatars lose their color in grayscale */
  .ss-stage[data-palette="mono"] img,
  .ss-stage[data-palette="mono"] .ss-keep-mono {
    filter: grayscale(1);
  }

  /* Edge fades. A crop must explain itself: content fades into the page
     instead of being sliced. Length via --ss-fade. */
  .ss-fade-b { mask-image: linear-gradient(to bottom, #000 calc(100% - var(--ss-fade, 64px)), transparent); }

  .ss-fade-r { mask-image: linear-gradient(to right, #000 calc(100% - var(--ss-fade, 64px)), transparent); }

  .ss-fade-br {
    mask-image:
      linear-gradient(to bottom, #000 calc(100% - var(--ss-fade, 64px)), transparent),
      linear-gradient(to right, #000 calc(100% - var(--ss-fade, 64px)), transparent);
    mask-composite: intersect;
  }

  /* A layer that steps back when another comes forward */
  .ss-recede {
    transition: opacity 0.3s ease;
  }

  .ss-recede[data-receded="true"] {
    opacity: 0.4;
  }

  /* Transitions off for one patch (act.snap), stage-wide or in one target */
  .ss-stage [data-instant],
  .ss-stage[data-instant] *,
  .ss-stage [data-instant] *,
  .ss-stage[data-instant] *::before,
  .ss-stage[data-instant] *::after {
    transition: none !important;
  }

  @keyframes ss-spin {
    to { transform: rotate(1turn); }
  }

  @keyframes ss-fade-in {
    from { opacity: 0; filter: blur(2px); transform: translateY(3px); }
  }

  /* A still (reduced motion, or no script) is the poster, settled: nothing in
     it transitions or animates, so it never shows a frame caught mid-fade */
  .ss-stage[data-still] *,
  .ss-stage[data-still] *::before,
  .ss-stage[data-still] *::after {
    transition: none !important;
    animation: none !important;
  }

  /* Offscreen resets settle immediately. Pausing keyframes alone leaves
     newly-created CSS transitions running after the story clock stops.
     Visible hover exits keep their normal glide; completed once scenes hold. */
  .ss-stage[data-offscreen],
  .ss-stage[data-offscreen] *,
  .ss-stage[data-offscreen] *::before,
  .ss-stage[data-offscreen] *::after {
    transition: none !important;
    animation-play-state: paused !important;
  }

  /* Settling (first paint, a layout switch): things placed from measurements
     arrive in place instead of traveling there. Entrance animations still play. */
  .ss-stage[data-placing] *,
  .ss-stage[data-placing] *::before,
  .ss-stage[data-placing] *::after {
    transition: none !important;
  }

  .ss-stage *,
  .ss-stage *::before,
  .ss-stage *::after {
    box-sizing: border-box;
  }

  /* The auto cursor's hit test (stage.tsx): for that one read, everything
     counts as hittable except the cursor itself */
  .ss-stage[data-hit] * {
    pointer-events: auto !important;
  }
}

/* Outside the layer, on purpose. Everything above is in @layer stageshow so
   a demo's own (unlayered) CSS always wins over the kit. These few rules are
   different: they exist to beat the host page's CSS, and an unlayered host
   rule (a blog's `p { margin }`, `img { max-width: 100% }`) would beat
   anything in a layer. So they stay unlayered.

   Their specificity is pitched between the two: three type selectors'
   worth (`:where()` adds nothing, each `:not(html)`-style test adds one
   type), so they beat a host's element rules (`p`, `article p`) but lose to
   any class, which keeps a demo's own class rules winning whatever order the
   files load in. A bundler can load the kit's CSS again after a demo's (one
   copy per lazily loaded chunk), so order can't be relied on here. */

/* A host page's element rules (a blog's p margins, link colors, list
   bullets) roll back to the browser's defaults inside a stage, which is what
   every demo is designed against. A host that styles prose through a class
   (.article p) out-ranks this: exclude stages there with
   :not(:where(.ss-stage *)). */
:where(.ss-stage) :is(p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, a, figure, figcaption, blockquote, pre, code, hr, table, th, td, button, input, label):not(html):not(body) {
  all: revert;
}

/* A universal reset (Tailwind v3's preflight: `* { border-width: 0;
   box-sizing: border-box }`) is unlayered, so it would beat the kit's own
   borders, box model and spacing (a bare `* { padding: 0 }` put window
   lights flush against the edge on a blog). revert-layer hands each property back to the kit's
   layer. One type selector's worth, so it beats `*` but not a host's element
   rules, which the guard above already handles */
:where(.ss-stage, .ss-stage *, .ss-stage ::before, .ss-stage ::after):not(html) {
  border-width: revert-layer;
  border-style: revert-layer;
  border-color: revert-layer;
  box-sizing: revert-layer;
  padding: revert-layer;
  margin: revert-layer;
}

/* Hosts often cap images and SVGs at their container (max-width: 100%),
   which squeezes an icon or ring drawn larger than its slot off-center.
   Tailwind v3 also aligns them to the middle */
:where(.ss-stage) :is(svg, img):not(html):not(body) {
  max-width: none;
  vertical-align: revert-layer;
}

/* What a Fly or an Expand carries stays inside it, so its own max-width has
   to beat the guard above, which a layered rule can't: one type more */
:where(.ss-stage :is(.ss-fly__lift, .ss-expand__face)) > :is(svg, img):not(html):not(body):not(head) {
  max-width: 100%;
}

/* Keystrokes (act.key): the keycap rows. */

@layer stageshow {
  .ss-keys {
    position: absolute;
    bottom: 16px;
    left: 50%;
    z-index: 99;
    display: flex;
    gap: 4px;
    opacity: 0;
    transform: translate(-50%, 6px) scale(0.96);
    transition: opacity 0.16s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
  }

  .ss-keys[data-show="true"] {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }

  .ss-keys[data-at="top"] {
    top: 16px;
    bottom: auto;
  }

  .ss-keys[data-at="bottom-left"],
  .ss-keys[data-at="bottom-right"] {
    left: auto;
    transform: translateY(6px) scale(0.96);
  }

  .ss-keys[data-at="bottom-left"] { left: 16px; }

  .ss-keys[data-at="bottom-right"] { right: 16px; }

  .ss-keys[data-at="bottom-left"][data-show="true"],
  .ss-keys[data-at="bottom-right"][data-show="true"] {
    transform: none;
  }

  .ss-key {
    display: grid;
    place-items: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 7px;
    background: rgba(24, 24, 27, 0.88);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.18);
    color: #fff;
    font: 500 13px/1 var(--ss-font);
    transition: transform 0.08s ease-out, box-shadow 0.08s ease-out;
  }

  .ss-key[data-down="true"] {
    transform: translateY(1px) scale(0.94);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.18);
  }
}

/* The cursor (cursor.tsx): glyphs, the five styles, press, idle, ripples. */

@layer stageshow {
  .ss-cursor {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    pointer-events: none;
    will-change: transform;
    transition: opacity 0.25s ease;
  }

  /* Sat still too long while the script plays: it steps out of the shot, and
     comes back the moment it moves */
  .ss-cursor[data-idle] {
    opacity: 0;
    transition-duration: 0.6s;
  }

  .ss-cursor__press {
    display: grid;
    /* The glyphs' hotspots meet at 0,0; pressing keeps that contact fixed. */
    transform-origin: 0 0;
    /* Lets go softly, as a finger lifting */
    transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .ss-cursor[data-pressed="true"] .ss-cursor__press {
    transform: scale(0.9);
    transition: transform 0.08s ease-out;
  }

  .ss-cursor__glyph {
    grid-area: 1 / 1;
    transform: scale(0);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .ss-cursor__glyph[data-active="true"] {
    transform: scale(var(--ss-cursor-size, 1));
    opacity: 1;
  }

  /* Into and out of a resize cursor, the arrow and the triangles cross over
     rather than pop: neither shrinks to nothing, and the ease is softer */
  .ss-cursor__glyph[data-glyph^="resize"] {
    transform: scale(calc(var(--ss-cursor-size, 1) * 0.5));
  }

  .ss-cursor[data-kind^="resize"] .ss-cursor__glyph:not([data-active="true"]) {
    transform: scale(calc(var(--ss-cursor-size, 1) * 0.6));
  }

  .ss-cursor[data-kind^="resize"] .ss-cursor__glyph,
  .ss-cursor__glyph[data-glyph^="resize"] {
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
  }

  .ss-cursor__glyph[data-glyph^="resize"][data-active="true"] {
    transform: scale(var(--ss-cursor-size, 1));
  }

  /* What it was leaves quickly, so no ghost of it trails the new shape */
  .ss-cursor[data-kind^="resize"] .ss-cursor__glyph:not([data-active="true"]),
  .ss-cursor:not([data-kind^="resize"]) .ss-cursor__glyph[data-glyph^="resize"] {
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.1s ease;
  }

  /* The open and closed hand are one hand: between them it closes and opens in
     place, and the press dip shows the grip, never one hand fading out as the
     other grows in */
  .ss-cursor:is([data-kind="open"], [data-kind="grab"]) .ss-cursor__glyph:is([data-glyph="open"], [data-glyph="grab"]) {
    transform: scale(var(--ss-cursor-size, 1));
    transition: opacity 0.08s linear;
  }

  .ss-cursor[data-style="large"] {
    --ss-cursor-size: 1.5;
  }

  /* The I-beam marks a text line, so it stays near the text's size */
  .ss-cursor[data-style="large"] .ss-cursor__glyph[data-glyph="ibeam"] {
    --ss-cursor-size: 1.15;
  }

  /* Gestural: a soft dot, no cursor kinds. Shrinks on press, fills while held. */
  .ss-cursor__dot {
    display: block;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    /* Glass, like the iPadOS pointer: no outline, a translucent tint that
       blurs and lifts what's under it, a soft top highlight and a faint shadow.
       The blur goes while pressed (below): the dot then sits on the thing
       being pressed (a checkbox, a row's words) and a blur smears it */
    border-radius: 50%;
    background: rgba(118, 118, 128, 0.26);
    backdrop-filter: blur(5px) saturate(1.8) brightness(1.04);
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.4),
      inset 0 -1px 1px rgba(0, 0, 0, 0.05),
      0 2px 10px rgba(0, 0, 0, 0.1);
    transition: background 0.15s ease;
  }

  /* Over text the glass circle narrows into an I-beam bar, as the iPad pointer does */
  .ss-cursor__dot {
    transition: background 0.15s ease, width 0.2s cubic-bezier(0.22, 1, 0.36, 1), height 0.2s cubic-bezier(0.22, 1, 0.36, 1),
      margin 0.2s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.2s ease;
  }

  .ss-cursor[data-style="circle"][data-kind="ibeam"] .ss-cursor__dot {
    width: 4px;
    height: 20px;
    margin: -10px 0 0 -2px;
    border-radius: 2px;
    background: rgba(60, 60, 67, 0.55);
  }

  .ss-stage[data-theme='dark'] .ss-cursor__dot {
    background: rgba(255, 255, 255, 0.2);
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.3),
      0 2px 10px rgba(0, 0, 0, 0.3);
  }

  .ss-cursor[data-style="circle"][data-pressed="true"] .ss-cursor__press {
    transform: scale(0.8);
  }

  .ss-cursor[data-style="circle"][data-pressed="true"] .ss-cursor__dot {
    backdrop-filter: none;
    background: rgba(118, 118, 128, 0.22);
  }

  .ss-stage[data-theme='dark'] .ss-cursor[data-style="circle"][data-pressed="true"] .ss-cursor__dot {
    background: rgba(255, 255, 255, 0.18);
  }

  .ss-cursor[data-style="circle"][data-pressed="true"] .ss-cursor__dot,
  .ss-cursor[data-style="circle"][data-kind="grab"] .ss-cursor__dot {
    background: rgba(118, 118, 128, 0.4);
  }

  /* Touch: nothing between taps. A press lands a soft dot that fades as the
     finger lifts; a drag keeps it while held (the kind is grab then). */
  .ss-cursor[data-style="touch"] .ss-cursor__dot {
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    background: rgba(118, 118, 128, 0.14);
    /* A finger, not glass: no backdrop blur, which smears the checkbox or
       row it presses */
    backdrop-filter: none;
    /* Not there until it touches: the script shows it just before a press
       or a swipe and lets it go after the lift */
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* The trail a finger leaves while it swipes: one soft streak from where
     it was a few frames ago to where it is, fading toward its tail. The
     script sizes and turns it each frame; it fades once the finger lifts */
  .ss-cursor__streak {
    position: absolute;
    left: 0;
    top: -13px;
    width: 0;
    height: 26px;
    border-radius: 13px;
    background: linear-gradient(to right, rgba(118, 118, 128, 0), rgba(118, 118, 128, 0.16));
    transform-origin: 100% 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease;
  }

  .ss-cursor[data-swiping] .ss-cursor__streak {
    opacity: 1;
    transition: none;
  }

  .ss-cursor[data-style="touch"][data-touching] .ss-cursor__dot {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.14s ease, transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .ss-cursor[data-style="touch"][data-pressed="true"] .ss-cursor__dot,
  .ss-cursor[data-style="touch"][data-swiping] .ss-cursor__dot {
    background: rgba(118, 118, 128, 0.22);
    transform: scale(0.82);
    transition: background 0.08s ease, transform 0.1s ease-out;
  }

  .ss-cursor__glyph svg {
    display: block;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
  }

  /* Arrow cursor: one solid, rounded arrowhead */
  .ss-cursor__arrow path {
    fill: var(--ss-cursor-ink, #111);
    stroke: var(--ss-cursor-ink, #111);
    stroke-width: 2.4;
    stroke-linejoin: round;
  }

  .ss-cursor__arrow {
    display: block;
    filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.18));
  }

  .ss-stage[data-theme="dark"] .ss-cursor__arrow,
  .ss-stage[data-theme="blueprint"] .ss-cursor__arrow {
    --ss-cursor-ink: #fff;
  }

  /* Line cursors (I-beam, crosshair) invert on a dark surface, as macOS's do */
  .ss-stage[data-theme="dark"] .ss-cursor,
  .ss-stage[data-theme="blueprint"] .ss-cursor {
    --ss-cursor-line: #fff;
    --ss-cursor-edge: rgba(0, 0, 0, 0.75);
  }

  /* Ripple clicks: a ring spreads from the point and fades */
  .ss-ripple {
    position: absolute;
    z-index: 99;
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    border-radius: 50%;
    border: 1.5px solid var(--ss-accent);
    background: color-mix(in srgb, var(--ss-accent) 10%, transparent);
    pointer-events: none;
    animation: ss-ripple 0.55s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
  }

  @keyframes ss-ripple {
    from { transform: scale(0.2); opacity: 1; }
    to { transform: scale(1); opacity: 0; }
  }

  .ss-stage[data-palette="mono"] .ss-ripple {
    border-color: var(--ss-text-strong);
    background: transparent;
  }

  .ss-stage[data-hit] :is(.ss-cursor, .ss-cursor *) {
    pointer-events: none !important;
  }
}

/* Window chrome (window.tsx): browser, app and sidebar app, plus the Bar and
   Text placeholders. */

@layer stageshow {
  /* Drawn: lights and fields are outlines, not fills */
  .ss-stage[data-theme="blueprint"] .ss-window__dot {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--ss-line);
  }

  .ss-stage[data-theme="blueprint"] .ss-window__url {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--ss-line-faint);
  }

  /* Traffic lights go gray too */
  .ss-stage[data-palette="mono"] .ss-window__dot {
    background: var(--ss-ink-5);
    box-shadow: none;
  }

  :where(.ss-window) {
    position: relative;
    /* Where the lights sit: their center's distance from the window's top
       (and from its left edge), their size, and the floating sidebar's
       inset. lightsSize, barSize and sidebarStyle set these */
    --ss-lights-y: 19px;
    --ss-dot: 9px;
    --ss-side-inset: 0px;
  }

  .ss-window {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--ss-canvas);
    border-radius: var(--ss-radius-window);
    box-shadow: var(--ss-shadow-window);
  }

  .ss-window__bar {
    /* A fixed height, so the traffic lights sit in the same place whether the
       bar holds an address, a title or nothing. */
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
    height: 38px;
    /* The lights sit as far from the left edge as from the top: (38 - 9) / 2 */
    padding: 0 calc(var(--ss-lights-y) - var(--ss-dot) / 2);
    background: var(--ss-chrome);
    border-bottom: 1px solid var(--ss-line);
  }

  .ss-window__lights {
    display: flex;
    flex-shrink: 0;
    /* macOS proportions: 12pt lights, 8pt apart */
    gap: 6px;
  }

  .ss-window__dot {
    width: var(--ss-dot);
    height: var(--ss-dot);
    border-radius: 50%;
    box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12);
  }

  .ss-window__dot:nth-child(1) { background: #ff5f57; }

  .ss-window__dot:nth-child(2) { background: #febc2e; }

  .ss-window__dot:nth-child(3) { background: #28c840; }

  .ss-window__url {
    flex: 1;
    min-width: 0;
    margin-left: 8px;
    padding: 4px 10px;
    overflow: hidden;
    background: var(--ss-ink-1);
    border-radius: 6px;
    /* Chrome type is the browser's, never the page's: small and quiet, whatever
       size the page inside sets */
    color: var(--ss-text-faint);
    font-size: 10.5px;
    line-height: 1.4;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* urlShape="pill": the round address field of current Safari and Chrome */
  .ss-window[data-url-shape="pill"] .ss-window__url {
    padding-inline: 12px;
    border-radius: 999px;
  }

  .ss-window__title {
    flex: 1;
    /* Optically centered: offsets the three dots on the left */
    margin-right: 36px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--ss-text-strong);
  }

  .ss-window__body {
    position: relative;
    flex: 1;
    min-height: 0;
  }

  .ss-window__spacer {
    flex: 1;
  }

  /* lights="grey": quiet lights for any chrome */
  .ss-window[data-lights="grey"] .ss-window__dot {
    background: rgba(186, 200, 218, 0.5);
    box-shadow: none;
  }

  /* lights="white": translucent white lights remain distinct over a strong
     color field, where gray lights can lose contrast. */
  .ss-window[data-lights="white"] .ss-window__dot {
    background: rgba(255, 255, 255, 0.5);
    box-shadow: none;
  }

  /* chrome="glass": a frosted frame that takes
     the color behind it, no bar fill or rule, the address centered on the
     window, and the page a white card inset in the frame. Nested radii: the
     frame's 12 is the card's 6 plus the 6 inset */
  .ss-window[data-chrome="glass"] {
    background: rgba(248, 250, 253, 0.45);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    box-shadow:
      0 0 0 1px rgba(229, 237, 245, 0.5),
      0 15px 35px rgba(23, 23, 23, 0.08);
  }

  .ss-window[data-chrome="glass"] > .ss-window__bar {
    display: grid;
    grid-template-columns: 1fr minmax(0, 262px) 1fr;
    gap: 12px;
    height: 35px;
    padding: 0 20px;
    background: none;
    border: 0;
  }

  .ss-window[data-chrome="glass"] .ss-window__lights {
    gap: 4px;
  }

  .ss-window[data-chrome="glass"] .ss-window__dot {
    width: 8px;
    height: 8px;
  }

  .ss-window[data-chrome="glass"] .ss-window__url {
    display: flex;
    grid-column: 2;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 20px;
    margin: 0;
    padding: 0 8px;
    background: rgba(255, 255, 255, 0.38);
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(229, 237, 245, 0.5);
    color: #50617a;
    font-size: 10px;
  }

  .ss-window__lock {
    flex-shrink: 0;
    color: #667691;
  }

  .ss-window__url-text {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ss-window[data-chrome="glass"] .ss-window__end {
    display: flex;
    grid-column: 3;
    justify-content: flex-end;
    gap: 6px;
  }

  /* The page is white, not the canvas tone: the step from frosted frame to
     clean white page is what draws the card */
  .ss-window[data-chrome="glass"] > .ss-window__body {
    margin: 0 6px 6px;
    overflow: hidden;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 3px 6px rgba(23, 23, 23, 0.06);
  }

  /* chrome="card": one white card. Pale dots and a wide pale address bar,
     no bar fill and no rule, so the page runs straight up into the chrome;
     the long, soft shadow lifts it */
  .ss-window[data-chrome="card"] {
    background: #fff;
    border-radius: 8px;
    box-shadow:
      0 50px 100px -20px rgba(50, 50, 93, 0.25),
      0 30px 60px -30px rgba(0, 0, 0, 0.3);
  }

  .ss-window[data-chrome="card"] > .ss-window__bar {
    gap: 14px;
    height: 44px;
    padding: 0 16px;
    background: none;
    border: 0;
  }

  .ss-window[data-chrome="card"]:not([data-lights="color"]) .ss-window__dot {
    background: #ecf2f7;
    box-shadow: none;
  }

  .ss-window[data-chrome="card"] .ss-window__url {
    flex: 1;
    height: 24px;
    margin: 0;
    padding: 0 10px;
    background: #ecf2f7;
    border-radius: 4px;
    box-shadow: none;
    color: #425466;
    font-size: 12px;
    font-weight: 300;
    line-height: 24px;
  }

  .ss-window[data-chrome="card"] .ss-window__end:empty {
    display: none;
  }

  .ss-window[data-chrome="card"] > .ss-window__body {
    background: #fff;
  }

  /* chrome="hairline": a short bar over a 1px rule, tiny dots, the address
     as bare centered text */
  .ss-window[data-chrome="hairline"] {
    background: #fff;
    border-radius: 8px;
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.06),
      0 12px 28px -12px rgba(50, 50, 93, 0.2);
  }

  .ss-window[data-chrome="hairline"] > .ss-window__bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    height: 20px;
    padding: 0 8px;
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

  .ss-window[data-chrome="hairline"] .ss-window__lights {
    gap: 3px;
  }

  .ss-window[data-chrome="hairline"] .ss-window__dot {
    width: 5px;
    height: 5px;
  }

  .ss-window[data-chrome="hairline"]:not([data-lights="color"]) .ss-window__dot {
    background: #e3e8ee;
    box-shadow: none;
  }

  .ss-window[data-chrome="hairline"] .ss-window__url {
    grid-column: 2;
    height: auto;
    margin: 0;
    padding: 0;
    background: none;
    box-shadow: none;
    color: #8792a2;
    font-size: 9px;
  }

  .ss-window[data-chrome="hairline"] .ss-window__end {
    grid-column: 3;
    justify-self: end;
  }

  /* chrome="terminal": one dark surface. The bar is the same color as the
     body with no rule, the title dim and centered on the window; a hairline
     light edge keeps the frame from melting into a dark stage */
  .ss-window[data-chrome="terminal"] {
    --ss-term-bg: #17171a;
    background: var(--ss-term-bg);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.07),
      var(--ss-shadow-hero, var(--ss-shadow-window));
  }

  .ss-window[data-chrome="terminal"] > .ss-window__bar {
    position: relative;
    background: none;
    border: 0;
  }

  .ss-window[data-chrome="terminal"][data-lights="grey"] .ss-window__dot {
    background: rgba(255, 255, 255, 0.16);
    box-shadow: none;
  }

  .ss-term__title {
    position: absolute;
    left: 50%;
    translate: -50% 0;
    color: rgba(255, 255, 255, 0.42);
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
  }

  /* Mono at a size that reads, lines with room: output a step dimmer than
     what was typed, so the command is what the eye finds */
  .ss-term {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 4px 16px 16px;
    overflow: hidden;
    color: #9d9da6;
    font: 11.5px/1.65 var(--ss-mono);
    font-variant-ligatures: none;
  }

  .ss-term > * + .ss-term__prompt {
    margin-top: 8px;
  }

  .ss-term__line,
  .ss-term > div,
  .ss-term > p {
    margin: 0;
    white-space: pre;
  }

  /* Terminal colors are tokens with these defaults: set --ss-term-path,
     --ss-term-sigil, --ss-term-ok, --ss-term-err or --ss-term-dim on the
     window (or any parent) to match a product's accent */
  .ss-term__path {
    color: var(--ss-term-path, #6f8ccf);
  }

  .ss-term__sigil {
    margin: 0 7px;
    color: var(--ss-term-sigil, #6ee7a8);
  }

  .ss-term__cmd {
    color: #f1f1f3;
  }

  /* Status color, sparingly: a pass, a failure, a dim aside */
  .ss-term .ok { color: var(--ss-term-ok, #6ee7a8); }
  .ss-term .err { color: var(--ss-term-err, #f87171); }
  .ss-term .dim { color: var(--ss-term-dim, #63636b); }

  .ss-term__caret {
    display: inline-block;
    width: 0.6em;
    height: 1.2em;
    margin-left: 1px;
    vertical-align: -0.22em;
    background: #e8e8ec;
    animation: ss-term-blink 1.06s steps(1) infinite;
  }

  .ss-term__caret[data-still] {
    animation: none;
  }

  @keyframes ss-term-blink {
    50% { opacity: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .ss-term__caret { animation: none; }
  }

  /* With toolbar controls the bar becomes a unified toolbar, as in Notes or
     Finder: the title goes left beside the lights and the controls go right. */
  .ss-window__title[data-toolbar] {
    margin: 0 0 0 14px;
    text-align: left;
  }

  .ss-window__nav {
    display: flex;
    flex-shrink: 0;
    gap: 6px;
    margin-left: 10px;
    color: var(--ss-text-faint);
  }

  .ss-window__nav + .ss-window__url {
    margin-left: 4px;
  }

  /* Browser with tabs: the strip holds the lights at the same 38px height; the
     active tab is the toolbar's color and joins it, the strip sits a step back. */
  .ss-window__tabs {
    display: flex;
    flex-shrink: 0;
    align-items: flex-end;
    gap: 2px;
    height: 38px;
    padding: 0 calc(var(--ss-lights-y) - var(--ss-dot) / 2);
    background: var(--ss-canvas);
  }

  .ss-window__tabs .ss-window__lights {
    align-self: center;
    margin-right: 14px;
  }

  .ss-window__tab {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 140px;
    min-width: 0;
    height: 30px;
    padding: 0 12px;
    border-radius: 8px 8px 0 0;
    font-size: 11px;
    color: var(--ss-text-faint);
  }

  .ss-window__tab[data-active] {
    background: var(--ss-chrome);
    color: var(--ss-text-strong);
  }

  .ss-window__tab-label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .ss-window__favicon {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--ss-ink-4);
  }

  .ss-window__tab[data-active] .ss-window__favicon {
    background: var(--ss-accent);
  }

  [data-kind="tabs"] > .ss-window__bar .ss-window__url {
    margin-left: 0;
  }

  [data-kind="tabs"] > .ss-window__bar .ss-window__nav {
    margin-left: 0;
  }

  /* Sidebar app: the sidebar runs the full height, the lights sit in its top
     38px at the same spot as every other chrome, and the content column has
     its own bar with a left-aligned title. */
  .ss-window[data-kind="sidebar"] {
    flex-direction: row;
  }

  .ss-window__side {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    background: var(--ss-canvas);
    border-right: 1px solid var(--ss-line);
  }

  .ss-window__side-top {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    /* Centers the lights --ss-lights-y down from the window's top, as far in
       from its left edge, inside a floating panel too */
    height: calc((var(--ss-lights-y) - var(--ss-side-inset)) * 2);
    padding: 0 calc(var(--ss-lights-y) - var(--ss-side-inset) - var(--ss-dot) / 2);
  }

  .ss-window__main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    background: var(--ss-surface);
  }

  .ss-window__main > .ss-window__bar {
    padding: 0 16px;
  }

  .ss-window__heading {
    font-size: 13px;
    font-weight: 600;
    color: var(--ss-text-strong);
  }

  .ss-bar {
    display: block;
    flex-shrink: 0;
  }

  /* A line gives way in a row too narrow for it, never past its container
     (Bar shrink, on by default for lines). Where it fits, nothing changes */
  .ss-bar[data-shrink] {
    flex-shrink: 1;
    min-width: 0;
    max-width: 100%;
  }

  /* lightsSize="large": macOS 26's 12pt lights, 8pt apart */
  .ss-window[data-lights-size="large"] {
    --ss-dot: 12px;
  }

  .ss-window[data-lights-size="large"] .ss-window__lights {
    gap: 8px;
  }

  /* barSize="tall": a 64px icon-and-label toolbar with no fill or rule.
     Controls are 32px at the top, so they center 26px down, with their
     labels under them; the lights and the title sit level with them */
  .ss-window[data-bar="tall"] {
    --ss-lights-y: 26px;
  }

  .ss-window[data-bar="tall"] > .ss-window__bar,
  .ss-window[data-bar="tall"] .ss-window__main > .ss-window__bar {
    align-items: flex-start;
    height: 64px;
    padding-top: 10px;
    background: none;
    border-bottom: 0;
  }

  .ss-window[data-bar="tall"] > .ss-window__bar > .ss-window__lights {
    margin-top: calc(16px - var(--ss-dot) / 2);
  }

  /* The address field is shorter than a control: center it on their row */
  .ss-window[data-bar="tall"] .ss-window__url {
    margin-top: 5px;
  }

  .ss-window[data-bar="tall"] .ss-window__title,
  .ss-window[data-bar="tall"] .ss-window__heading {
    line-height: 32px;
  }

  /* sidebarStyle="floating": macOS 26's sidebar, a rounded panel inset on
     the top, left and bottom with a faint edge and shadow. Nested radii: the
     window's 24 is the panel's 16 plus the 8 inset */
  .ss-window[data-side="floating"] {
    --ss-side-inset: 8px;
    border-radius: 24px;
    background: var(--ss-surface);
  }

  .ss-window[data-side="floating"] > .ss-window__side {
    position: relative;
    z-index: 1;
    margin: var(--ss-side-inset) 0 var(--ss-side-inset) var(--ss-side-inset);
    border-right: 0;
    border-radius: 16px;
    box-shadow:
      0 0 0 0.5px rgba(0, 0, 0, 0.07),
      inset 0 0.5px 0 rgba(255, 255, 255, 1),
      0 3px 14px rgba(20, 35, 70, 0.07);
  }

  .ss-stage[data-theme="dark"] .ss-window[data-side="floating"] > .ss-window__side {
    background: var(--ss-raised);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.08),
      0 3px 14px rgba(0, 0, 0, 0.3);
  }

  .ss-text {
    white-space: nowrap;
  }

  .ss-text[data-wrap] {
    white-space: normal;
  }
}

/* Collapse */

@layer stageshow {
  /* The space and the content move together, so there's never an empty band
     where a row was or is about to be. Closing, the content dims fast (to a
     third in the first 100ms, before the closing edge reaches it) and then
     dissolves over the rest of the height's travel, so it is faint while
     the edge passes and still there while the space closes: the fade and
     the height overlap to the end and no empty box is shown. A fade that
     finished before the height had moved left a blank band for about 100ms.
     Opening, the content comes in as the edge passes it. No mask, so no
     gradient wash. */
  .ss-collapse {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.42s cubic-bezier(0.4, 0, 0.2, 1) 0.05s, opacity 0.42s cubic-bezier(0, 0.8, 0.5, 1);
  }

  .ss-collapse[data-open] {
    grid-template-rows: 1fr;
    opacity: 1;
    transition: grid-template-rows 0.46s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.24s ease-out 0.15s;
  }

  /* solid: a surface unlike the ground opens and closes without fading
     (a dark panel would pass through gray); only the height moves */
  .ss-collapse[data-solid],
  .ss-collapse[data-solid][data-open] {
    opacity: 1;
  }

  .ss-collapse__inner {
    min-height: 0;
    overflow: clip;
    overflow-clip-margin: 3px;
  }

  /* A clip reveal unfolds from the content's middle line: the space clips it
     equally above and below, so a row's text (in its middle) is whole by about
     half the height and can be seen early without ever looking sliced. Closing
     folds back into that line. */
  .ss-collapse[data-reveal='clip'] > .ss-collapse__inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Thin rows side by side: a margin would let their windows overlap */
    overflow-clip-margin: 0;
  }

  /* Taller than a row (a comment, a card): it reveals from the top, and its
     content comes in as the space finishes opening, so no line is seen cut.
     Cards and messages read better with reveal="drop". */
  .ss-collapse[data-reveal='clip'][data-tall] > .ss-collapse__inner {
    justify-content: flex-start;
  }

  .ss-collapse[data-reveal='clip'][data-tall][data-open] {
    transition: grid-template-rows 0.46s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.24s ease-out 0.3s;
  }

  /* Settled open, nothing clips: a toolbar or popover can hang off a row */
  .ss-collapse[data-open]:not([data-moving]) > .ss-collapse__inner {
    overflow: visible;
  }

  /* drop: nothing clips; the content arrives whole into the opening space */
  .ss-collapse[data-reveal='drop'] > .ss-collapse__inner {
    overflow: visible;
  }

  /* The glide is a transform on a layer the content keeps for good. Moved by
     layout (top), text steps whole pixels while its box glides, so a count in
     a pill hops inside it; and text that ends a transform without a layer of
     its own is redrawn snapped and hops as it lands. On a lasting layer it
     moves as one picture and rests drawn exactly as it moved. */
  .ss-collapse[data-reveal='drop'] > .ss-collapse__inner > * {
    transform: translateY(-10px);
    will-change: transform;
    transition: transform 0.3s ease;
  }

  .ss-collapse[data-reveal='drop'][data-from='below'] > .ss-collapse__inner > * {
    transform: translateY(10px);
  }

  .ss-collapse[data-reveal='drop'][data-open] > .ss-collapse__inner > * {
    transform: none;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
  }

  /* Drop content is whole and unclipped, so it waits for most of its space:
     shown early, it would hang over whatever sits below the opening gap */
  .ss-collapse[data-reveal='drop'][data-open] {
    transition: grid-template-rows 0.5s cubic-bezier(0.45, 0, 0.2, 1), opacity 0.3s ease 0.24s;
  }
}

/* States */

@layer stageshow {
  .ss-states {
    display: inline-grid;
    align-items: center;
    justify-items: center;
  }

  /* The old state hands off to the new one: it's mostly gone as the new one
     starts, so they never read as two labels, but the control is never empty */
  .ss-states__item {
    display: inline-flex;
    grid-area: 1 / 1;
    align-items: center;
    gap: 6px;
    /* The item keeps the line box the plain label would have had: its text
       inherits the line-height of the spot it sits in, so a Roll or any
       other part that clips to its line (Roll's clip-path does) has a line
       to show in. A zero line box here once sized the item to its glyphs,
       which also clipped a Roll inside it to nothing and left a text-only
       States no height at all. A small line under a name sets its own
       line-height, as Row's subtitle does */
    opacity: 0;
    filter: blur(2px);
    /* Transform travel leaves the grid's baseline in place. Moving margins
       let the hidden first item shift the incoming label and adjacent text. */
    will-change: transform;
    transform: translate3d(0, 4px, 0);
    transition: opacity 0.15s ease, filter 0.15s ease, transform 0s 0.15s;
  }

  .ss-states__item[data-on] {
    opacity: 1;
    filter: none;
    transform: translate3d(0, 0, 0);
    transition: opacity 0.25s ease-out 0.07s, filter 0.25s ease-out 0.07s, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1) 0.07s;
  }

  .ss-states[data-align="start"] { justify-items: start; }

  .ss-states[data-align="end"] { justify-items: end; }

  .ss-states[data-reduced] > .ss-states__item {
    transform: translate3d(0, 0, 0);
    filter: none;
    transition: opacity 0.12s ease;
  }
}

/* Spinner */

@layer stageshow {
  .ss-spinner {
    flex: none;
    animation: ss-spin 0.8s linear infinite;
  }

  @media (prefers-reduced-motion: reduce) {
    .ss-spinner { animation: none; }
  }
}

/* A demo root (<div data-demo>) sizes its poster with container queries (src/demos/poster.tsx). */
[data-demo] {
  container-type: inline-size;
}

/* A poster is a still: nothing in it transitions while the page settles. */
.ss-poster * {
  /* biome-ignore lint/complexity/noImportantStyles: beats the kit's own transitions, which a poster never runs */
  transition: none !important;
}

/* The look of the product inside the demos: app.capdoux.com (apps/web/src/index.css), not the landing page around
   them. Its --ui-* tokens mapped to stageshow's (stageshow references/looks.md): the blue primary, the zinc grays,
   Inter, the 10px card radius. The page keeps its own green and Manrope.
   Dark follows the visitor's color scheme, like the page. The stage's own theme stays light (a prerendered poster
   cannot know the scheme), so every token the demos read is set here for both schemes, including the placeholder
   inks and the shadows the kit's dark theme would otherwise set. */

.cx-look .ss-stage {
  --ss-font:
    "Inter Variable", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", system-ui,
    sans-serif;

  /* --ui-background / --ui-card / --ui-muted / --ui-sidebar */
  --ss-canvas: #fafafa;
  --ss-surface: #ffffff;
  --ss-chrome: #ffffff;
  --ss-raised: #ffffff;
  --ss-well: #f4f4f5;
  --cx-sidebar: #f4f4f5;
  --cx-sidebar-accent: #e4e4e7;

  /* --ui-border, --ui-input */
  --ss-line: #e4e4e7;
  --ss-line-faint: #f4f4f5;
  --cx-input: #d4d4d8;

  /* --ui-foreground / --ui-muted-foreground */
  --ss-text-strong: #09090b;
  --ss-text: #5f5f69;
  --ss-text-faint: #8a8a93;
  --ss-icon: #52525b;
  --ss-icon-faint: #a1a1aa;

  /* --ui-primary, and the status pairs the app's Badge uses */
  --ss-accent: #2563eb;
  --ss-accent-2: #2563eb;
  --ss-accent-soft: #eff6ff;
  --ss-success: #15803d;
  --ss-success-soft: #ecfdf3;
  --ss-success-text: #15803d;
  --ss-warning: #a15c07;
  --ss-warning-soft: #fffaeb;
  --ss-warning-text: #a15c07;

  /* Zinc placeholder inks, opaque-looking on white */
  --ss-ink-1: rgb(9 9 11 / 0.04);
  --ss-ink-2: rgb(9 9 11 / 0.06);
  --ss-ink-3: rgb(9 9 11 / 0.09);
  --ss-ink-4: rgb(9 9 11 / 0.12);
  --ss-ink-5: rgb(9 9 11 / 0.2);

  /* --ui-radius 0.625rem: sm 6, md 8, lg 10 */
  --ss-radius-sm: 6px;
  --ss-radius-md: 8px;
  --ss-radius-lg: 10px;
  --ss-radius-window: 12px;

  --ss-shadow-hero:
    0 0 0 1px rgb(9 9 11 / 0.07), 0 30px 60px -12px rgb(24 24 48 / 0.22), 0 18px 36px -18px rgb(0 0 0 / 0.25);
  --ss-shadow-satellite:
    0 0 0 1px rgb(9 9 11 / 0.06), 0 14px 32px -8px rgb(24 24 48 / 0.22), 0 4px 10px -4px rgb(0 0 0 / 0.1);
  /* --shadow-xs */
  --cx-shadow-xs: 0 1px 2px 0 rgb(9 9 11 / 0.05);

  font-feature-settings: "cv11", "ss01";
}

@media (prefers-color-scheme: dark) {
  .cx-look .ss-stage {
    --ss-canvas: #09090b;
    --ss-surface: #18181b;
    --ss-chrome: #18181b;
    --ss-raised: #1f1f23;
    --ss-well: #0f0f12;
    --cx-sidebar: #0f0f12;
    --cx-sidebar-accent: #27272a;

    --ss-line: #27272a;
    --ss-line-faint: #1f1f23;
    --cx-input: #3f3f46;

    --ss-text-strong: #fafafa;
    --ss-text: #a1a1aa;
    --ss-text-faint: #71717a;
    --ss-icon: #a1a1aa;
    --ss-icon-faint: #52525b;

    --ss-accent: #2563eb;
    --ss-accent-2: #2563eb;
    --ss-accent-soft: #0f1f3d;
    --ss-success: #4ade80;
    --ss-success-soft: #0f2a1a;
    --ss-success-text: #4ade80;
    --ss-warning: #fbbf24;
    --ss-warning-soft: #2d2208;
    --ss-warning-text: #fbbf24;

    --ss-ink-1: rgb(255 255 255 / 0.05);
    --ss-ink-2: rgb(255 255 255 / 0.07);
    --ss-ink-3: rgb(255 255 255 / 0.1);
    --ss-ink-4: rgb(255 255 255 / 0.13);
    --ss-ink-5: rgb(255 255 255 / 0.2);

    --ss-shadow-hero: 0 0 0 1px rgb(255 255 255 / 0.09), 0 30px 60px -12px rgb(0 0 0 / 0.7);
    --ss-shadow-satellite:
      0 0 0 1px rgb(255 255 255 / 0.1), 0 14px 32px -8px rgb(0 0 0 / 0.7), 0 4px 10px -4px rgb(0 0 0 / 0.5);
    --cx-shadow-xs: none;
    color-scheme: dark;
  }
}

/* D1, the hero. Every rule is scoped under .cx-hero (the stage's .ss-fit), so nothing reaches the page and the page's
   classes (.badge, .card, .panel) never reach in. Sizes are design pixels: the stage scales them as one.
   The page is white and the stage transparent, so no edge of the window may end on the stage's invisible box: the
   window sits one gutter in from the top and both sides and fades out at its foot, over filler rows only (stageshow
   fade-crop). Wide: the guardrails card straddles its sidebar (stageshow subscriptions). Compact: the window alone. */

.cx-hero .ss-stage {
  --cx-gutter: 32px;
  overflow: clip;
  /* The foot fades out, window and shadow together: a mask, never a color over it */
  mask-image: linear-gradient(to bottom, #000 calc(100% - 112px), transparent calc(100% - 8px));
  color: var(--ss-text-strong);
  font-size: 14px;
  line-height: 1.4;
}

.cx-hero .cx-window {
  position: absolute;
  top: var(--cx-gutter);
  left: 192px;
  width: 656px;
  height: 640px;
  border-radius: var(--ss-radius-window);
  box-shadow: var(--ss-shadow-hero);
}

/* The window clips, never scrolls: a hidden box is a scroll container, and a batch changing height could scroll it */
.cx-hero .cx-window,
.cx-hero .cx-window .ss-window__body {
  overflow: clip;
}

.cx-hero .cx-app {
  display: flex;
  height: 100%;
}

/* ---- Sidebar (apps/web components/app-sidebar.tsx) ---- */

.cx-hero .cx-side {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 2px;
  width: 168px;
  padding: 12px 10px;
  border-right: 1px solid var(--ss-line);
  background: var(--cx-sidebar);
}

.cx-hero .cx-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  margin-bottom: 8px;
  padding: 0 6px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* 48 grid at 26px: bands 4 tall 8 in from the sides, 4 apart from the 8 square dot */
.cx-hero .cx-mark {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 26px;
  height: 26px;
  padding: 6.5px 4.33px;
  border-radius: 6.5px;
  background: #181818;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08);
}

.cx-hero .cx-mark-band {
  width: 100%;
  height: 2.17px;
  border-radius: 1px;
  background: #3fd3a0;
}

.cx-hero .cx-mark-dot {
  width: 4.33px;
  height: 4.33px;
  border-radius: 1px;
  background: #ffffff;
}

.cx-hero .cx-nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cx-hero .cx-nav-group + .cx-nav-group {
  margin-top: 14px;
}

.cx-hero .cx-nav-label {
  margin: 4px 8px 8px;
}

.cx-hero .cx-nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 8px;
  border-radius: var(--ss-radius-sm);
  color: var(--ss-icon);
}

.cx-hero .cx-nav svg {
  flex: none;
  width: 16px;
  height: 16px;
}

.cx-hero .cx-nav[data-active] {
  background: var(--cx-sidebar-accent);
  color: var(--ss-text-strong);
}

.cx-hero .cx-nav[data-active]::before {
  content: "";
  position: absolute;
  inset: 6px auto 6px 0;
  width: 2px;
  border-radius: 999px;
  background: var(--ss-accent);
}

/* ---- The page ---- */

.cx-hero .cx-main {
  flex: 1;
  min-width: 0;
  padding: 22px 24px 0;
  background: var(--ss-canvas);
}

.cx-hero .cx-head {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}

.cx-hero .cx-title {
  font-size: 17px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.01em;
}

/* One card holds the list (apps/web Card: border, 10px radius, shadow-xs) */
.cx-hero .cx-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius-lg);
  background: var(--ss-surface);
  box-shadow: var(--cx-shadow-xs);
  overflow: clip;
}

/* The newer batch sits on top. Its order only changes while it is closed, so nothing moves in view. */
.cx-hero .cx-batch[data-top] {
  order: -1;
}

.cx-hero .cx-row {
  display: grid;
  gap: 4px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ss-line);
}

.cx-hero .cx-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 22px;
}

.cx-hero .cx-kind {
  color: var(--ss-text);
  font-size: 12px;
  font-weight: 500;
}

/* Japanese wraps only at its spaces (Category キャンペーン ¥28,500), never inside a word */
.cx-hero .cx-target,
.cx-hero .cx-reason,
.cx-hero .cx-note {
  /* A line starting with 「 starts at its bracket's ink, in line with the label above */
  text-spacing-trim: trim-start;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.cx-hero .cx-target {
  font-size: 14.5px;
  font-weight: 500;
  line-height: 20px;
}

.cx-hero .cx-detail {
  display: grid;
  gap: 4px;
  padding-top: 6px;
}

.cx-hero .cx-reason {
  color: var(--ss-text);
  font-size: 13px;
  line-height: 18px;
}

.cx-hero .cx-note {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ss-text-faint);
  font-size: 12px;
  line-height: 16px;
}

.cx-hero .cx-note svg {
  flex: none;
  width: 12px;
  height: 12px;
}

.cx-hero .cx-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* apps/web Button size sm: h-8, rounded-md, text-xs (here 13), icons 16 */
.cx-hero .cx-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--ss-radius-md);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition:
    background-color 120ms ease,
    transform 120ms ease;
}

.cx-hero .cx-button svg {
  flex: none;
  width: 16px;
  height: 16px;
}

.cx-hero .cx-button-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cx-hero .cx-button[data-variant="primary"] {
  min-width: 96px;
  /* The press scales it: on a lasting layer its label does not hop as it lands */
  will-change: transform;
  background: var(--ss-accent);
  color: #fff;
  box-shadow: var(--cx-shadow-xs);
}

.cx-hero .cx-button[data-variant="primary"][data-hover] {
  background: #1d4ed8;
}

.cx-hero .cx-button[data-variant="primary"][data-pressed] {
  background: #1e40af;
  transform: scale(0.97);
}

.cx-hero .cx-button[data-variant="outline"] {
  border: 1px solid var(--cx-input);
  background: var(--ss-surface);
  color: var(--ss-text-strong);
}

.cx-hero .cx-button[data-variant="outline"] svg {
  color: var(--ss-icon);
}

.cx-hero .cx-button .ss-spinner {
  color: #fff;
}

/* apps/web Badge: rounded-md, px-2, text-xs, a ring in its own color, the status soft fill */
.cx-hero .cx-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--ss-radius-sm);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent);
}

.cx-hero .cx-badge svg {
  flex: none;
  width: 12px;
  height: 12px;
}

.cx-hero .cx-badge[data-tone="pending"] {
  background: var(--ss-well);
  color: var(--ss-icon);
}

.cx-hero .cx-badge[data-tone="applied"] {
  background: var(--ss-success-soft);
  color: var(--ss-success-text);
}

.cx-hero .cx-badge[data-tone="approval"] {
  background: var(--ss-warning-soft);
  color: var(--ss-warning-text);
}

/* ---- The guardrails card, straddling the sidebar ---- */

/* Below the menu's first group, so the active item stays whole and the card sits on filler rows only */
.cx-hero .cx-guard {
  position: absolute;
  top: 296px;
  left: var(--cx-gutter);
  z-index: 2;
  width: 224px;
  padding: 14px 16px 10px;
  border-radius: var(--ss-radius-lg);
  background: var(--ss-raised);
  box-shadow: var(--ss-shadow-satellite);
}

.cx-hero .cx-guard-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13.5px;
  font-weight: 600;
}

.cx-hero .cx-guard-head svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--ss-accent);
}

.cx-hero .cx-rule {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 -8px;
  padding: 7px 8px;
  border-radius: var(--ss-radius-sm);
  color: var(--ss-text);
  font-size: 13px;
  line-height: 18px;
  transition:
    background-color 300ms ease,
    color 300ms ease;
}

.cx-hero .cx-rule-value {
  color: var(--ss-text-strong);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  transition: color 300ms ease;
}

/* The mode, as the app's settings show it: a quiet chip */
.cx-hero .cx-rule-chip {
  padding: 1px 8px;
  border-radius: var(--ss-radius-sm);
  background: var(--ss-accent-soft);
  color: var(--ss-accent);
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
}

.cx-hero .cx-rest {
  position: absolute;
  top: 108px;
  left: 720px;
  width: 1px;
  height: 1px;
}

/* ---- Compact: the window alone, the words a size up so they read at 320 ---- */

.cx-hero .ss-stage[data-layout="compact"] {
  --cx-gutter: 16px;
}

/* The phone layout of the app: a 56px header (Shell.tsx h-14) over the page, the panel one gutter in, off the
   bottom. Not a desktop window, so no traffic lights. */
.cx-hero .cx-mobile {
  position: absolute;
  top: var(--cx-gutter);
  left: var(--cx-gutter);
  width: 326px;
  height: 740px;
  /* clip, not hidden: a hidden box is a scroll container, and a batch changing height above the fold scrolled it */
  overflow: clip;
  border-radius: var(--ss-radius-window);
  background: var(--ss-canvas);
  box-shadow: var(--ss-shadow-hero);
}

.cx-hero .cx-mobile-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 14px;
  border-bottom: 1px solid var(--ss-line);
  background: var(--ss-surface);
  color: var(--ss-icon);
}

.cx-hero .cx-mobile-bar svg {
  flex: none;
}

.cx-hero .cx-mobile-bar .cx-brand {
  height: auto;
  margin: 0;
  padding: 0;
  color: var(--ss-text-strong);
}

.cx-hero .ss-stage[data-layout="compact"] .cx-main {
  padding: 18px 14px 0;
}

.cx-hero .ss-stage[data-layout="compact"] .cx-target,
.cx-hero .ss-stage[data-layout="compact"] .cx-reason {
  text-wrap: balance;
}

.cx-hero .ss-stage[data-layout="compact"] .cx-title {
  font-size: 17px;
}

.cx-hero .ss-stage[data-layout="compact"] .cx-row {
  padding: 12px 14px;
}

.cx-hero .ss-stage[data-layout="compact"] .cx-kind {
  font-size: 13px;
}

.cx-hero .ss-stage[data-layout="compact"] .cx-badge {
  font-size: 13px;
  height: 24px;
}

.cx-hero .ss-stage[data-layout="compact"] .cx-target {
  font-size: 15px;
  line-height: 21px;
}

.cx-hero .ss-stage[data-layout="compact"] .cx-reason {
  font-size: 14px;
  line-height: 19px;
}

.cx-hero .ss-stage[data-layout="compact"] .cx-note {
  font-size: 13px;
}

.cx-hero .ss-stage[data-layout="compact"] .cx-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.cx-hero .ss-stage[data-layout="compact"] .cx-button {
  height: 36px;
  font-size: 14px;
}

.cx-hero .ss-stage[data-layout="compact"] .cx-rest {
  top: 84px;
  left: 300px;
}


[data-demo="hero"] .ss-poster[data-poster="wide"] .ss-fit{height:calc(560px * var(--ss-poster-k)) !important}[data-demo="hero"] .ss-poster[data-poster="wide"] .ss-stage{transform:scale(var(--ss-poster-k)) !important}
[data-demo="hero"] .ss-poster[data-poster="compact"] .ss-fit{height:calc(640px * var(--ss-poster-k)) !important}[data-demo="hero"] .ss-poster[data-poster="compact"] .ss-stage{transform:scale(var(--ss-poster-k)) !important}
[data-demo="hero"] .ss-poster{--ss-poster-k:1}
[data-demo="hero"] .ss-poster[data-poster="compact"]{display:none}
@container (max-width: 639.98px){[data-demo="hero"] .ss-poster[data-poster="wide"]{display:none}[data-demo="hero"] .ss-poster[data-poster="compact"]{display:block}}
[data-demo="hero"] .ss-poster[data-poster="wide"]{--ss-poster-k:0.7273}
@container (min-width: 648px){[data-demo="hero"] .ss-poster[data-poster="wide"]{--ss-poster-k:0.7364}}
@container (min-width: 656px){[data-demo="hero"] .ss-poster[data-poster="wide"]{--ss-poster-k:0.7455}}
@container (min-width: 664px){[data-demo="hero"] .ss-poster[data-poster="wide"]{--ss-poster-k:0.7545}}
@container (min-width: 672px){[data-demo="hero"] .ss-poster[data-poster="wide"]{--ss-poster-k:0.7636}}
@container (min-width: 680px){[data-demo="hero"] .ss-poster[data-poster="wide"]{--ss-poster-k:0.7727}}
@container (min-width: 688px){[data-demo="hero"] .ss-poster[data-poster="wide"]{--ss-poster-k:0.7818}}
@container (min-width: 696px){[data-demo="hero"] .ss-poster[data-poster="wide"]{--ss-poster-k:0.7909}}
@container (min-width: 704px){[data-demo="hero"] .ss-poster[data-poster="wide"]{--ss-poster-k:0.8000}}
@container (min-width: 712px){[data-demo="hero"] .ss-poster[data-poster="wide"]{--ss-poster-k:0.8091}}
@container (min-width: 720px){[data-demo="hero"] .ss-poster[data-poster="wide"]{--ss-poster-k:0.8182}}
@container (min-width: 728px){[data-demo="hero"] .ss-poster[data-poster="wide"]{--ss-poster-k:0.8273}}
@container (min-width: 736px){[data-demo="hero"] .ss-poster[data-poster="wide"]{--ss-poster-k:0.8364}}
@container (min-width: 744px){[data-demo="hero"] .ss-poster[data-poster="wide"]{--ss-poster-k:0.8455}}
@container (min-width: 752px){[data-demo="hero"] .ss-poster[data-poster="wide"]{--ss-poster-k:0.8545}}
@container (min-width: 760px){[data-demo="hero"] .ss-poster[data-poster="wide"]{--ss-poster-k:0.8636}}
@container (min-width: 768px){[data-demo="hero"] .ss-poster[data-poster="wide"]{--ss-poster-k:0.8727}}
@container (min-width: 776px){[data-demo="hero"] .ss-poster[data-poster="wide"]{--ss-poster-k:0.8818}}
@container (min-width: 784px){[data-demo="hero"] .ss-poster[data-poster="wide"]{--ss-poster-k:0.8909}}
@container (min-width: 792px){[data-demo="hero"] .ss-poster[data-poster="wide"]{--ss-poster-k:0.9000}}
@container (min-width: 800px){[data-demo="hero"] .ss-poster[data-poster="wide"]{--ss-poster-k:0.9091}}
@container (min-width: 808px){[data-demo="hero"] .ss-poster[data-poster="wide"]{--ss-poster-k:0.9182}}
@container (min-width: 816px){[data-demo="hero"] .ss-poster[data-poster="wide"]{--ss-poster-k:0.9273}}
@container (min-width: 824px){[data-demo="hero"] .ss-poster[data-poster="wide"]{--ss-poster-k:0.9364}}
@container (min-width: 832px){[data-demo="hero"] .ss-poster[data-poster="wide"]{--ss-poster-k:0.9455}}
@container (min-width: 840px){[data-demo="hero"] .ss-poster[data-poster="wide"]{--ss-poster-k:0.9545}}
@container (min-width: 848px){[data-demo="hero"] .ss-poster[data-poster="wide"]{--ss-poster-k:0.9636}}
@container (min-width: 856px){[data-demo="hero"] .ss-poster[data-poster="wide"]{--ss-poster-k:0.9727}}
@container (min-width: 864px){[data-demo="hero"] .ss-poster[data-poster="wide"]{--ss-poster-k:0.9818}}
@container (min-width: 872px){[data-demo="hero"] .ss-poster[data-poster="wide"]{--ss-poster-k:0.9909}}
@container (min-width: 880px){[data-demo="hero"] .ss-poster[data-poster="wide"]{--ss-poster-k:1}}
[data-demo="hero"] .ss-poster[data-poster="compact"]{--ss-poster-k:0.6704}
@container (min-width: 244px){[data-demo="hero"] .ss-poster[data-poster="compact"]{--ss-poster-k:0.6816}}
@container (min-width: 248px){[data-demo="hero"] .ss-poster[data-poster="compact"]{--ss-poster-k:0.6927}}
@container (min-width: 252px){[data-demo="hero"] .ss-poster[data-poster="compact"]{--ss-poster-k:0.7039}}
@container (min-width: 256px){[data-demo="hero"] .ss-poster[data-poster="compact"]{--ss-poster-k:0.7151}}
@container (min-width: 260px){[data-demo="hero"] .ss-poster[data-poster="compact"]{--ss-poster-k:0.7263}}
@container (min-width: 264px){[data-demo="hero"] .ss-poster[data-poster="compact"]{--ss-poster-k:0.7374}}
@container (min-width: 268px){[data-demo="hero"] .ss-poster[data-poster="compact"]{--ss-poster-k:0.7486}}
@container (min-width: 272px){[data-demo="hero"] .ss-poster[data-poster="compact"]{--ss-poster-k:0.7598}}
@container (min-width: 276px){[data-demo="hero"] .ss-poster[data-poster="compact"]{--ss-poster-k:0.7709}}
@container (min-width: 280px){[data-demo="hero"] .ss-poster[data-poster="compact"]{--ss-poster-k:0.7821}}
@container (min-width: 284px){[data-demo="hero"] .ss-poster[data-poster="compact"]{--ss-poster-k:0.7933}}
@container (min-width: 288px){[data-demo="hero"] .ss-poster[data-poster="compact"]{--ss-poster-k:0.8045}}
@container (min-width: 292px){[data-demo="hero"] .ss-poster[data-poster="compact"]{--ss-poster-k:0.8156}}
@container (min-width: 296px){[data-demo="hero"] .ss-poster[data-poster="compact"]{--ss-poster-k:0.8268}}
@container (min-width: 300px){[data-demo="hero"] .ss-poster[data-poster="compact"]{--ss-poster-k:0.8380}}
@container (min-width: 304px){[data-demo="hero"] .ss-poster[data-poster="compact"]{--ss-poster-k:0.8492}}
@container (min-width: 308px){[data-demo="hero"] .ss-poster[data-poster="compact"]{--ss-poster-k:0.8603}}
@container (min-width: 312px){[data-demo="hero"] .ss-poster[data-poster="compact"]{--ss-poster-k:0.8715}}
@container (min-width: 316px){[data-demo="hero"] .ss-poster[data-poster="compact"]{--ss-poster-k:0.8827}}
@container (min-width: 320px){[data-demo="hero"] .ss-poster[data-poster="compact"]{--ss-poster-k:0.8939}}
@container (min-width: 324px){[data-demo="hero"] .ss-poster[data-poster="compact"]{--ss-poster-k:0.9050}}
@container (min-width: 328px){[data-demo="hero"] .ss-poster[data-poster="compact"]{--ss-poster-k:0.9162}}
@container (min-width: 332px){[data-demo="hero"] .ss-poster[data-poster="compact"]{--ss-poster-k:0.9274}}
@container (min-width: 336px){[data-demo="hero"] .ss-poster[data-poster="compact"]{--ss-poster-k:0.9385}}
@container (min-width: 340px){[data-demo="hero"] .ss-poster[data-poster="compact"]{--ss-poster-k:0.9497}}
@container (min-width: 344px){[data-demo="hero"] .ss-poster[data-poster="compact"]{--ss-poster-k:0.9609}}
@container (min-width: 348px){[data-demo="hero"] .ss-poster[data-poster="compact"]{--ss-poster-k:0.9721}}
@container (min-width: 352px){[data-demo="hero"] .ss-poster[data-poster="compact"]{--ss-poster-k:0.9832}}
@container (min-width: 356px){[data-demo="hero"] .ss-poster[data-poster="compact"]{--ss-poster-k:0.9944}}
@container (min-width: 358px){[data-demo="hero"] .ss-poster[data-poster="compact"]{--ss-poster-k:1}}
.ss-p-2bcc7bd717{width:52px !important;height:6px !important;border-radius:2px !important;background:var(--ss-ink-3) !important}
.ss-p-3c5efd13a9{width:56px !important;height:6px !important;border-radius:2px !important;background:var(--ss-ink-3) !important}
.ss-p-439354376d{width:358px !important;height:640px !important;transform:scale(1) !important}
.ss-p-507ace0498{width:50px !important;height:6px !important;border-radius:2px !important;background:var(--ss-ink-3) !important}
.ss-p-5ef75dd8f1{width:44px !important;height:6px !important;border-radius:2px !important;background:var(--ss-ink-3) !important}
.ss-p-68a440c441{width:36px !important;height:6px !important;border-radius:2px !important;background:var(--ss-ink-3) !important}
.ss-p-69ad88e663{max-width:880px !important;height:560px !important}
.ss-p-6aff96d731{width:210px !important;height:8px !important;border-radius:2px !important;background:var(--ss-ink-3) !important}
.ss-p-6ba44d036b{width:54px !important;height:6px !important;border-radius:2px !important;background:var(--ss-ink-3) !important}
.ss-p-7bcf0f7c30{max-width:358px !important;height:640px !important}
.ss-p-7f21a52441{width:46px !important;height:6px !important;border-radius:2px !important;background:var(--ss-ink-3) !important}
.ss-p-8f422cfd9d{width:58px !important;height:20px !important;border-radius:6px !important;background:var(--ss-ink-2) !important}
.ss-p-917afed09b{width:176px !important;height:8px !important;border-radius:2px !important;background:var(--ss-ink-3) !important}
.ss-p-a63dfaf6f5{width:58px !important;height:6px !important;border-radius:2px !important;background:var(--ss-ink-3) !important}
.ss-p-a7ae36ac32{width:60px !important;height:6px !important;border-radius:2px !important;background:var(--ss-ink-3) !important}
.ss-p-aa07159c88{width:880px !important;height:560px !important;transform:scale(1) !important}
.ss-p-b44fc4757b{width:192px !important;height:8px !important;border-radius:2px !important;background:var(--ss-ink-3) !important}
.ss-p-b55f646851{width:64px !important;height:6px !important;border-radius:2px !important;background:var(--ss-ink-5) !important}
.ss-p-beb15d85f9{width:62px !important;height:6px !important;border-radius:2px !important;background:var(--ss-ink-3) !important}
.ss-p-f24d435a2a{width:48px !important;height:5px !important;border-radius:2px !important;background:var(--ss-ink-2) !important}
.ss-p-f93fd1f64b{width:66px !important;height:6px !important;border-radius:2px !important;background:var(--ss-ink-3) !important}