/* One product demo for every page (theme/template-parts/demo.php, assets/js/demo.js; inc/demo.php loads both on every
   page that prints the part; the umbrella's _workspace/nav-lab/DEMO_SPEC.md). The window copies the homepage's first
   docked Creator window in proportion and type: Creator as the fixed left column, the app with five tabs on
   the right. Every rule is scoped under .gsd and every class starts with gsd-; colors come from the theme's tokens
   (--panel, --sunk, --chip, --line, --line-2, --ink, --mute, --brand-red, --ok, --sans, --mono) with fallbacks, so
   the window follows the theme's dark mode and drops into any page. AI wears the product's primary violet, the brand
   orange is Creator's icon and the voice only; LinkedIn wears blue and email amber. Sizes follow the component's own
   width (container queries), not the page's.

   How the run shows: the markup is the finished run. demo.js adds .gsd-go to .gsd-win and then turns on, at its
   time, every element that carries data-t (class gsd-on) or data-x. Without the script, and under reduced motion,
   nothing is hidden and nothing moves. */

.gsd{
  --gsd-bg:var(--panel,#FFFFFF);--gsd-soft:var(--sunk,#F7F7F5);--gsd-sunk:var(--chip,#F1F0EC);--gsd-seg:var(--gsd-bg);
  --gsd-line:var(--line,#E4E3DE);--gsd-line2:var(--line-2,#EEEDE9);
  --gsd-ink:var(--ink,#16161A);--gsd-mute:var(--mute,#6C6B74);
  --gsd-text:color-mix(in srgb,var(--gsd-ink) 82%,var(--gsd-bg));
  --gsd-faint:color-mix(in srgb,var(--gsd-mute) 58%,var(--gsd-bg));
  /* AI is the product's primary (gs.front.app ThemeProvider colorPrimary #4B64FF, dark #8E92FF); the brand orange
     is Creator's own icon only (the founder, 2026-10-15). */
  --gsd-ai:#4B64FF;
  --gsd-ai-ink:color-mix(in srgb,var(--gsd-ai) 84%,var(--gsd-ink));
  --gsd-ai-soft:color-mix(in srgb,var(--gsd-ai) 8%,var(--gsd-bg));
  --gsd-ai-line:color-mix(in srgb,var(--gsd-ai) 28%,var(--gsd-bg));
  --gsd-creator:var(--brand-red,#F0432B);
  --gsd-halo:color-mix(in srgb,var(--gsd-creator) 24%,transparent);
  --gsd-ok:var(--ok,#12995F);
  --gsd-ok-ink:color-mix(in srgb,var(--gsd-ok) 84%,var(--gsd-ink));
  --gsd-ok-soft:color-mix(in srgb,var(--gsd-ok) 11%,var(--gsd-bg));
  --gsd-li:#0A66C2;--gsd-li-ink:#0A5BAE;
  --gsd-em:#E8862B;--gsd-em-ink:#A45A13;
  --gsd-li-soft:color-mix(in srgb,var(--gsd-li) 10%,var(--gsd-bg));
  /* the product's status hues (ThemeProvider colorInfo / colorWarning / colorError, tokens.scss --slate and the -ink
     ramp) and its quietest fill, for Signals' chips, the waiting card and the bubbles */
  --gsd-info:#3D6DEB;--gsd-info-ink:#1D4ED8;--gsd-warn:#D9880A;--gsd-warn-ink:#B45309;--gsd-bad:#DE4B4B;--gsd-slate:#64748B;
  --gsd-fill:color-mix(in srgb,var(--gsd-ink) 4%,var(--gsd-bg));--gsd-on-ai:#fff;
  --gsd-em-soft:color-mix(in srgb,var(--gsd-em) 12%,var(--gsd-bg));
  --gsd-sans:var(--sans,"Onest",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif);
  --gsd-mono:var(--mono,"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);
  --gsd-sh:0 1px 2px rgba(20,21,28,.05),0 8px 22px -12px rgba(20,21,28,.16);
  --gsd-sh-lg:0 1px 2px rgba(20,21,28,.05),0 2px 6px rgba(20,21,28,.03),0 40px 80px -40px rgba(20,21,28,.34);
  --gsd-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 10.5l3 3 6-7'/%3E%3C/svg%3E");
  --gsd-cgrad:radial-gradient(120% 120% at 30% 22%,color-mix(in srgb,var(--gsd-creator) 84%,#fff) 0%,var(--gsd-creator) 48%,color-mix(in srgb,var(--gsd-creator) 86%,#5A1E16) 100%);
  container:gsd / inline-size;
  position:relative;display:block;width:100%;max-width:1280px;margin:0 auto;padding:0;
  font-family:var(--gsd-sans);color:var(--gsd-text);text-align:left;line-height:1.4;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) .gsd{
    --gsd-seg:#2B2650;--gsd-li:#5BA3E8;--gsd-li-ink:#7DB6EE;--gsd-em:#F09A4E;--gsd-em-ink:#F3AE6E;
    --gsd-li-soft:rgba(91,163,232,.14);--gsd-em-soft:rgba(240,154,78,.14);
    --gsd-ai:#8E92FF;--gsd-ai-soft:rgba(142,146,255,.13);--gsd-ai-line:rgba(142,146,255,.36);--gsd-creator:var(--brand-red,#FF5A41);--gsd-ok-soft:rgba(44,194,131,.14);
    --gsd-info:#6E9BFF;--gsd-info-ink:#60A5FA;--gsd-warn:#F0B24A;--gsd-warn-ink:#F0B24A;--gsd-bad:#FF6B70;--gsd-slate:#94A3B8;--gsd-on-ai:#0C0D10;
    --gsd-fill:color-mix(in srgb,var(--gsd-ink) 5%,var(--gsd-bg));
    --gsd-sh:0 1px 2px rgba(0,0,0,.4),0 10px 26px -14px rgba(0,0,0,.7);
    --gsd-sh-lg:0 1px 2px rgba(0,0,0,.4),0 40px 80px -36px rgba(0,0,0,.9);
  }
  :root:not([data-theme=light]) .gsd .gsd-pbg{opacity:.22}
}
:root[data-theme=dark] .gsd{
  --gsd-seg:#2B2650;--gsd-li:#5BA3E8;--gsd-li-ink:#7DB6EE;--gsd-em:#F09A4E;--gsd-em-ink:#F3AE6E;
  --gsd-li-soft:rgba(91,163,232,.14);--gsd-em-soft:rgba(240,154,78,.14);
  --gsd-ai:#8E92FF;--gsd-ai-soft:rgba(142,146,255,.13);--gsd-ai-line:rgba(142,146,255,.36);--gsd-creator:var(--brand-red,#FF5A41);--gsd-ok-soft:rgba(44,194,131,.14);
  --gsd-info:#6E9BFF;--gsd-info-ink:#60A5FA;--gsd-warn:#F0B24A;--gsd-warn-ink:#F0B24A;--gsd-bad:#FF6B70;--gsd-slate:#94A3B8;--gsd-on-ai:#0C0D10;
  --gsd-fill:color-mix(in srgb,var(--gsd-ink) 5%,var(--gsd-bg));
  --gsd-sh:0 1px 2px rgba(0,0,0,.4),0 10px 26px -14px rgba(0,0,0,.7);
  --gsd-sh-lg:0 1px 2px rgba(0,0,0,.4),0 40px 80px -36px rgba(0,0,0,.9);
}
:root[data-theme=dark] .gsd .gsd-pbg{opacity:.22}
/* the agencies set's workspace tile, YourBrand: ink with the lime stroke on light (demo.js paints the tile from
   --gsd-yourbrand-tile, the sprite's gsd-i-ws-yb draws the stroke from --gsd-yourbrand-mk, the light pair as their
   fallback), lime with the ink stroke in dark, as the agency pages' own tiles flip; a rule of the set, so every page
   that prints it (/agencies/, /white-label/) gets it without a copy of its own */
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) .gsd[data-gsd-set=agencies]{--gsd-yourbrand-tile:#C8F051;--gsd-yourbrand-mk:#15171E}
}
:root[data-theme=dark] .gsd[data-gsd-set=agencies]{--gsd-yourbrand-tile:#C8F051;--gsd-yourbrand-mk:#15171E}

/* ---- base: a reset of its own, so the page around it changes nothing --------------------------------------------- */
.gsd *,.gsd *::before,.gsd *::after{box-sizing:border-box}
.gsd :is(p,ul,ol,li,dl,dt,dd,figcaption,header,footer,section,time,small,b,em,i){margin:0;padding:0}
.gsd :is(ul,ol){list-style:none}
.gsd svg{display:block;flex:none}
.gsd [hidden]{display:none !important}
.gsd .gsd-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.gsd .gsd-sprite{position:absolute;width:0;height:0;overflow:hidden}
.gsd button{margin:0;font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.gsd button:focus-visible{outline:2px solid var(--gsd-ink);outline-offset:2px}
.gsd .gsd-pbg{transition:opacity .2s}

/* ---- the window --------------------------------------------------------------------------------------------------- */
.gsd .gsd-win{position:relative;overflow:hidden;border:1px solid var(--gsd-line);border-radius:20px;background:var(--gsd-bg);box-shadow:var(--gsd-sh-lg);font-size:13px}
.gsd .gsd-bar{display:flex;align-items:center;gap:10px;height:46px;padding:0 10px 0 14px;border-bottom:1px solid var(--gsd-line);background:var(--gsd-soft)}
.gsd .gsd-ws{display:flex;align-items:center;gap:8px;min-width:0;font:500 13px/1 var(--gsd-sans);color:var(--gsd-text);white-space:nowrap}
.gsd .gsd-ws b{font-weight:600;color:var(--gsd-ink)}
/* the workspace's mark: the default set's is GetSales' own, the red "Get" circle on no tile; a set that names its colour
   (inc/demo.php prints it as the tile's style) wears its glyph on that tile */
.gsd .gsd-wmk{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:7px;color:#fff;box-shadow:inset 0 1px 1px rgba(255,255,255,.2)}
.gsd .gsd-wmk svg{width:14px;height:14px}
.gsd .gsd-wmk:not([style]){border-radius:50%;box-shadow:none}
.gsd .gsd-wmk:not([style]) svg{width:24px;height:24px}
.gsd .gsd-cl{display:inline-flex;align-items:center;gap:7px;min-width:0}
.gsd .gsd-cl i{flex:none;width:9px;height:9px;border-radius:3px;background:#5E8C3A;box-shadow:0 0 0 3px color-mix(in srgb,#5E8C3A 16%,transparent)}
.gsd .gsd-slash{width:14px;height:14px;fill:none;stroke:var(--gsd-faint);stroke-width:1.6;stroke-linecap:round}
.gsd .gsd-cv{width:14px;height:14px;margin-left:-3px;color:var(--gsd-mute)}
.gsd .gsd-host{display:flex;align-items:center;gap:6px;margin-left:auto;height:26px;padding:0 10px;border-radius:8px;background:var(--gsd-bg);box-shadow:inset 0 0 0 1px var(--gsd-line);font:400 12px/1 var(--gsd-mono);color:var(--gsd-mute);white-space:nowrap}
.gsd .gsd-host svg{width:12px;height:12px;color:var(--gsd-ok)}
.gsd .gsd-pp{position:relative;display:grid;place-items:center;flex:none;width:30px;height:30px;margin-left:auto;padding:0;border-radius:50%;color:var(--gsd-mute)}
.gsd .gsd-host:not([hidden])+.gsd-pp{margin-left:8px}
.gsd .gsd-pp:hover{color:var(--gsd-ink);background:var(--gsd-sunk)}
.gsd .gsd-pp>svg{grid-area:1/1}
.gsd .gsd-ring{width:30px;height:30px;transform:rotate(-90deg)}
.gsd .gsd-ring circle{fill:none;stroke:var(--gsd-line);stroke-width:2}
.gsd .gsd-ring .gsd-ring-p{stroke:var(--gsd-mute);stroke-dasharray:100 100;stroke-dashoffset:calc(100 - 100 * var(--gsd-t,1));stroke-linecap:round}
.gsd .gsd-pp-pause,.gsd .gsd-pp-play{width:14px;height:14px;fill:currentColor;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.gsd .gsd-pp-play,.gsd .gsd-pp[aria-pressed=true] .gsd-pp-pause{display:none}
.gsd .gsd-pp[aria-pressed=true] .gsd-pp-play{display:block}
/* the button's room is kept from the first paint wherever the script will show it, so nothing in the bar slides
   when it does (no script or reduced motion: no button, no room) */
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  .gsd .gsd-bar>.gsd-pp[hidden]{display:grid !important;visibility:hidden}
}

.gsd .gsd-ui{display:grid;grid-template-columns:344px minmax(0,1fr);height:640px}

/* ---- Creator ------------------------------------------------------------------------------------------------------ */
.gsd .gsd-cr{display:flex;flex-direction:column;min-width:0;min-height:0;border-right:1px solid var(--gsd-line);background:var(--gsd-bg)}
.gsd .gsd-crh{display:flex;align-items:center;gap:12px;flex:none;height:60px;padding:0 16px;border-bottom:1px solid var(--gsd-line2)}
/* Creator's mark, the app's CreatorMark (gs.front.app uiKit): the five bars in white on the logo's red, round, a light from
   the top left; the header's, the chat's and the plan card's alike (the founder, 2026-10-24: Creator's own icon, the
   orange one, everywhere, where the plan wore the AI sparkle) */
.gsd :is(.gsd-vd,.gsd-mk,.gsd-plmk){display:grid;place-items:center;flex:none;border-radius:50%;color:#fff;background:var(--gsd-cgrad);box-shadow:inset 0 1px 1px rgba(255,255,255,.22)}
.gsd :is(.gsd-vd,.gsd-mk,.gsd-plmk) svg{width:55%;height:55%}
.gsd .gsd-vd{width:36px;height:36px;box-shadow:0 6px 14px -7px color-mix(in srgb,var(--gsd-creator) 70%,transparent),inset 0 1px 1px rgba(255,255,255,.22)}
.gsd .gsd-crt{display:flex;flex-direction:column;gap:3px;min-width:0}
.gsd .gsd-crt b{font:600 15px/1.15 var(--gsd-sans);color:var(--gsd-ink)}
.gsd .gsd-crt small{font:400 12.5px/1.2 var(--gsd-sans);color:var(--gsd-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsd .gsd-chat{position:relative;flex:1;min-height:0;overflow:hidden}
.gsd .gsd-chat.gsd-scrolled,.gsd .gsd-win:not(.gsd-go) .gsd-chat{-webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.35) 14px,#000 40px);mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.35) 14px,#000 40px)}
.gsd .gsd-chat-in{position:relative;display:flex;flex-direction:column;gap:12px;padding:16px 14px 14px;transition:transform .6s cubic-bezier(.3,.7,.2,1)}
/* the finished run (no script, reduced motion): the chat reads from its newest message up. The list stands at the
   chat's top and a transform lifts it by what overflows (the chat a size container: 100cqh is its height), never
   anchored by its bottom, so when the script starts the run and the list reads from the top again its box has not
   moved: the window's first frame shifts no layout */
.gsd .gsd-win:not(.gsd-go) .gsd-chat{container-type:size}
.gsd .gsd-win:not(.gsd-go) .gsd-chat-in{position:absolute;left:0;right:0;top:0;transform:translateY(calc(100cqh - 100%))}
.gsd .gsd-greet{position:absolute;top:18px;left:18px;right:18px}
.gsd .gsd-gt{font:600 18px/1.3 var(--gsd-sans);letter-spacing:-.01em;color:var(--gsd-ink)}
.gsd .gsd-gs{margin-top:6px;font:400 14px/1.5 var(--gsd-sans);color:var(--gsd-mute)}
.gsd .gsd-u{align-self:flex-end;max-width:92%;padding:8px 12px 9px;border-radius:14px 14px 4px 14px;background:var(--gsd-sunk);font:500 13.5px/1.45 var(--gsd-sans);color:var(--gsd-ink)}
.gsd .gsd-by{display:flex;align-items:center;gap:5px;margin-bottom:3px;font:500 10.5px/1 var(--gsd-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--gsd-ai-ink)}
.gsd .gsd-by svg{width:13px;height:13px;color:var(--gsd-creator)}
.gsd .gsd-u-s{display:flex;align-items:center;gap:10px}
.gsd .gsd-u-s .gsd-by{margin:0}
.gsd .gsd-a{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;font:400 13.5px/1.45 var(--gsd-sans);color:var(--gsd-ink)}
.gsd .gsd-a p{padding-top:1px}
.gsd .gsd-mk{width:22px;height:22px}

/* the plan: the product's PlanBlock, the run's wizard */
.gsd .gsd-plan{border:1px solid var(--gsd-line);border-radius:14px;background:var(--gsd-bg);overflow:hidden;box-shadow:0 1px 2px rgba(20,21,28,.04)}
.gsd .gsd-plh{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px 0 9px;background:var(--gsd-soft)}
.gsd .gsd-plmk{width:24px;height:24px}
.gsd .gsd-plh b{font:600 13.5px/1 var(--gsd-sans);color:var(--gsd-ink)}
.gsd .gsd-pls{display:inline-flex;align-items:center;gap:6px;min-width:0;font:500 12.5px/1 var(--gsd-sans);color:var(--gsd-ok-ink)}
.gsd .gsd-pls i{position:relative;flex:none;width:7px;height:7px;border-radius:50%;background:var(--gsd-ok)}
.gsd .gsd-plc{margin-left:auto;font:500 11.5px/1 var(--gsd-mono);color:var(--gsd-mute);font-variant-numeric:tabular-nums;white-space:nowrap}
.gsd .gsd-plbar{position:relative;display:block;height:2px;background:var(--gsd-line2)}
.gsd .gsd-plbar i{position:absolute;inset:0 auto 0 0;width:var(--gsd-pp,100%);background:var(--gsd-ai);transition:width .5s ease}
.gsd .gsd-plt{display:flex;align-items:baseline;gap:8px;min-width:0;padding:10px 13px 3px;white-space:nowrap}
.gsd .gsd-plt b{min-width:0;overflow:hidden;text-overflow:ellipsis;font:600 12.5px/1.3 var(--gsd-sans);color:var(--gsd-ink)}
.gsd .gsd-plt span{flex:none;font:400 12px/1.3 var(--gsd-sans);color:var(--gsd-mute)}
.gsd ol.gsd-steps{padding:3px 5px 6px}
.gsd .gsd-ps{display:grid;grid-template-columns:16px 15px minmax(0,1fr) auto;gap:9px;align-items:center;width:100%;height:31px;padding:0 8px;border-radius:8px;text-align:left;transition:background .3s}
.gsd .gsd-ps:hover{background:var(--gsd-soft)}
.gsd .gsd-st{position:relative;width:16px;height:16px;border-radius:50%;background:var(--gsd-ok) var(--gsd-check) center/10px no-repeat}
.gsd .gsd-psi{width:15px;height:15px;color:var(--gsd-mute)}
.gsd .gsd-psn{min-width:0;font:500 13px/1.2 var(--gsd-sans);color:var(--gsd-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* a step's words for each state share one cell, so the cell is as wide as its widest state and the shown one sits at
   its right edge: a step changing state never moves its words or its neighbours */
.gsd .gsd-psm{display:grid;justify-items:end;font:400 12px/1.2 var(--gsd-sans);color:var(--gsd-mute);white-space:nowrap;font-variant-numeric:tabular-nums}
.gsd .gsd-psm>span{grid-area:1/1;visibility:hidden}
.gsd .gsd-psm>.gsd-m-d{visibility:visible}
.gsd .gsd-plf{display:flex;align-items:center;gap:8px;height:36px;padding:0 13px;border-top:1px solid var(--gsd-line2);font:400 12.5px/1.2 var(--gsd-sans);color:var(--gsd-text);white-space:nowrap;overflow:hidden}
.gsd .gsd-plf>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.gsd .gsd-plf-i{position:relative;flex:none;width:14px;height:14px;border-radius:50%;background:var(--gsd-ok) var(--gsd-check) center/9px no-repeat}

/* under 880px: the plan as one compact row of steps under the chat */
.gsd .gsd-mini{display:none;align-items:center;gap:12px;flex:none;padding:10px 14px;border-top:1px solid var(--gsd-line2)}
.gsd .gsd-mini-s{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;flex:none;width:118px}
.gsd .gsd-mini-s i{display:block;height:5px;border-radius:3px;background:var(--gsd-ok)}
.gsd .gsd-mini-t{display:flex;align-items:center;gap:8px;min-width:0;font:500 12.5px/1.2 var(--gsd-sans);color:var(--gsd-text);white-space:nowrap}
.gsd .gsd-mini-t>span{min-width:0;overflow:hidden;text-overflow:ellipsis}

/* the composer */
.gsd .gsd-box{flex:none;display:flex;flex-direction:column;gap:6px;margin:0 12px 12px;padding:9px 9px 8px 12px;border:1px solid var(--gsd-line);border-radius:12px;background:var(--gsd-bg);transition:border-color .2s,box-shadow .2s}
.gsd .gsd-field{position:relative;display:block;height:42px;height:2lh;overflow:hidden;font:400 14px/1.5 var(--gsd-sans);color:var(--gsd-ink);transition:height .28s cubic-bezier(.3,.7,.2,1)}
.gsd .gsd-box.gsd-long .gsd-field{display:flex;flex-direction:column;justify-content:flex-end;-webkit-mask-image:linear-gradient(180deg,transparent,#000 55%);mask-image:linear-gradient(180deg,transparent,#000 55%)}
/* the spoken words are an inline run in the field, so their caret is painted after the last word (below) and never
   moves a box; past six lines the run stands as a block at the field's foot */
.gsd .gsd-said{display:inline}
.gsd .gsd-box.gsd-long .gsd-said{display:block;flex:none}
.gsd .gsd-said:empty{display:none}
.gsd .gsd-hint{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--gsd-faint)}
.gsd .gsd-box.gsd-has-said .gsd-hint{display:none}
.gsd .gsd-ctl{display:flex;align-items:center;gap:8px;height:32px}
/* The voice, the app's dictation control (gs.front.app DictationControl): the five bars in the brand on a faint brand
   round, 32px beside send. While it records, a filled brand round with a stop square, its halo stepping with the voice,
   and the time before it (demo.js counts it); nothing else in the composer moves */
.gsd .gsd-vt{flex:none;margin-left:auto;font:400 12px/1 var(--gsd-mono);font-variant-numeric:tabular-nums;color:var(--gsd-mute)}
.gsd .gsd-mic{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;color:var(--gsd-creator);background:color-mix(in srgb,var(--gsd-creator) 11%,transparent);transition:background .2s,color .2s,box-shadow .12s}
.gsd .gsd-mic svg{grid-area:1/1;width:55%;height:55%}
.gsd .gsd-mic-s{visibility:hidden}
/* Send: the product's round primary button with the arrow up, dim while the field is empty */
.gsd .gsd-send{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;color:var(--gsd-faint);background:var(--gsd-sunk);transition:background .2s,color .2s,transform .15s}
.gsd .gsd-send svg{width:15px;height:15px}

/* ---- the app: tabs and panels -------------------------------------------------------------------------------------- */
.gsd .gsd-app{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--gsd-bg)}
.gsd .gsd-top{display:flex;align-items:center;flex:none;height:60px;padding:0 12px;border-bottom:1px solid var(--gsd-line2);container:gsd-tabs / inline-size}
.gsd .gsd-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;width:100%;padding:3px;border-radius:12px;background:var(--gsd-sunk)}
.gsd .gsd-tab{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;height:36px;padding:0 10px;border-radius:9px;font:600 14px/1 var(--gsd-sans);color:var(--gsd-mute);white-space:nowrap;transition:background .25s,color .25s,box-shadow .25s}
.gsd .gsd-tab:hover{color:var(--gsd-ink)}
.gsd .gsd-tab[aria-selected=true]{background:var(--gsd-seg);color:var(--gsd-ink);box-shadow:0 1px 2px rgba(20,21,28,.1),0 2px 8px -3px rgba(20,21,28,.14)}
.gsd .gsd-tab svg{width:18px;height:18px}
.gsd .gsd-tab[data-p=search][aria-selected=true] svg{color:var(--gsd-ai)}
.gsd .gsd-tn{min-width:0;overflow:hidden;text-overflow:ellipsis}
.gsd .gsd-tw{position:absolute;top:6px;right:7px;width:6px;height:6px;border-radius:50%;background:var(--gsd-ai);opacity:0;transform:scale(.4);transition:opacity .2s,transform .2s}
.gsd .gsd-tab.gsd-work .gsd-tw{opacity:1;transform:none}
@container gsd-tabs (max-width:620px){
  .gsd .gsd-tab{gap:6px;padding:0 6px;font-size:13px}
  .gsd .gsd-tab svg{width:16px;height:16px}
}
@container gsd-tabs (max-width:470px){
  .gsd .gsd-tabs{gap:1px}
  .gsd .gsd-tab{flex-direction:column;gap:4px;height:46px;padding:0 2px;font:600 11px/1.1 var(--gsd-sans);letter-spacing:-.01em}
  .gsd .gsd-tab svg{width:17px;height:17px}
  .gsd .gsd-tn{max-width:100%}
}

.gsd .gsd-panes{position:relative;flex:1;min-height:0}
.gsd .gsd-pn{position:absolute;inset:0;display:none;flex-direction:column;min-width:0;background:var(--gsd-bg)}
.gsd .gsd-win[data-tab=search] .gsd-pn[data-p=search],
.gsd .gsd-win[data-tab=table] .gsd-pn[data-p=table],
.gsd .gsd-win[data-tab=workflow] .gsd-pn[data-p=workflow],
.gsd .gsd-win[data-tab=sdr] .gsd-pn[data-p=sdr],
.gsd .gsd-win[data-tab=signals] .gsd-pn[data-p=signals]{display:flex}
.gsd .gsd-ph{position:relative;display:flex;align-items:center;gap:10px;flex:none;height:50px;padding:0 16px 0 18px;border-bottom:1px solid var(--gsd-line2);min-width:0}
.gsd .gsd-pt{display:flex;align-items:center;gap:9px;flex:1;min-width:0;font:600 14.5px/1.2 var(--gsd-sans);color:var(--gsd-ink)}
.gsd .gsd-pt>svg{width:17px;height:17px;color:var(--gsd-mute)}
.gsd .gsd-pt>.gsd-ai-i{color:var(--gsd-ai)}
.gsd .gsd-ptl{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsd .gsd-n{flex:none;padding:4px 7px;border-radius:6px;background:var(--gsd-sunk);font:500 11.5px/1 var(--gsd-mono);color:var(--gsd-text);font-variant-numeric:tabular-nums;white-space:nowrap}
.gsd .gsd-gb{flex:none;height:26px;padding:0 10px;border-radius:999px;border:1px solid var(--gsd-line);font:500 12px/24px var(--gsd-sans);color:var(--gsd-text);white-space:nowrap}
.gsd .gsd-meta{flex:none;font:400 12px/1.2 var(--gsd-sans);color:var(--gsd-mute);white-space:nowrap}
.gsd .gsd-stat{display:inline-flex;align-items:center;gap:6px;flex:none;height:24px;padding:0 9px;border-radius:999px;background:var(--gsd-sunk);font:500 12px/1 var(--gsd-sans);color:var(--gsd-text);white-space:nowrap}
.gsd .gsd-stat-ok{background:var(--gsd-ok-soft);color:var(--gsd-ok-ink)}
.gsd .gsd-stat-ok i{position:relative;width:6px;height:6px;border-radius:50%;background:var(--gsd-ok)}
.gsd .gsd-spin{flex:none;width:11px;height:11px;border-radius:50%;border:1.5px solid var(--gsd-line);border-top-color:var(--gsd-ink);animation:gsd-spin .8s linear infinite}
.gsd .gsd-pb{position:relative;flex:1;min-height:0;overflow:hidden}
.gsd .gsd-pf{display:flex;align-items:center;gap:16px;flex:none;height:42px;padding:0 16px 0 18px;border-top:1px solid var(--gsd-line2);font:400 12.5px/1.3 var(--gsd-sans);color:var(--gsd-mute);white-space:nowrap;min-width:0}
.gsd .gsd-pf>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.gsd .gsd-pf>.gsd-rng{flex:none;color:var(--gsd-text);font-variant-numeric:tabular-nums}
.gsd .gsd-av{width:30px;height:30px;border-radius:50%}
.gsd :is(.gsd-c1,.gsd-c2,.gsd-k1,.gsd-k2)>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.gsd :is(.gsd-c1,.gsd-c2,.gsd-k1,.gsd-k2) b{display:block;max-width:100%;font:600 13px/1.25 var(--gsd-sans);color:var(--gsd-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsd :is(.gsd-c1,.gsd-c2,.gsd-k1,.gsd-k2) small{display:block;max-width:100%;font:400 12px/1.25 var(--gsd-sans);color:var(--gsd-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- AI Search ---------------------------------------------------------------------------------------------------- */
.gsd .gsd-srch{display:flex;flex-direction:column;gap:10px;padding:18px 20px 0}
.gsd .gsd-lbl{font:500 12px/1 var(--gsd-sans);color:var(--gsd-mute)}
.gsd .gsd-desc{position:relative;min-height:46px;padding:12px 14px;border:1px solid var(--gsd-line);border-radius:12px;background:var(--gsd-bg);font:400 14px/1.45 var(--gsd-sans);color:var(--gsd-ink);transition:border-color .3s,box-shadow .3s}
.gsd .gsd-dph{position:absolute;left:14px;right:14px;top:12px;color:var(--gsd-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* a piece's description field carries the voice in its lower end corner, as the app's AI box does (DictationTextArea): the
   composer's voice at rest, a step smaller, and room on the end side so the last line never runs under it, the lines balanced so a narrow
   field never leaves one word alone (the full window prints none) */
.gsd .gsd-desc:has(>.gsd-dmic){padding-right:46px;text-wrap:balance}
.gsd .gsd-desc:has(>.gsd-dmic) .gsd-dph{right:46px}
.gsd .gsd-dmic{position:absolute;right:8px;bottom:8px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:var(--gsd-creator);background:color-mix(in srgb,var(--gsd-creator) 11%,transparent)}
.gsd .gsd-dmic svg{width:55%;height:55%}
.gsd .gsd-aih{display:flex;align-items:center;gap:7px;font:400 12.5px/1.2 var(--gsd-sans);color:var(--gsd-mute)}
.gsd .gsd-aih svg{width:15px;height:15px;color:var(--gsd-ai)}
.gsd .gsd-chips{display:flex;flex-wrap:wrap;gap:6px}
.gsd .gsd-chip{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 11px;border-radius:8px;border:1px solid var(--gsd-line);background:var(--gsd-soft);font:500 12.5px/1 var(--gsd-sans);color:var(--gsd-ink);white-space:nowrap;max-width:100%}
.gsd .gsd-chip i{font-style:normal;color:var(--gsd-mute)}
.gsd .gsd-chip span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.gsd .gsd-prog{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;margin-top:6px;font:500 12.5px/1 var(--gsd-sans);color:var(--gsd-text);white-space:nowrap}
.gsd .gsd-prog b{font-weight:600;color:var(--gsd-ink);font-variant-numeric:tabular-nums}
.gsd .gsd-bar-t{position:relative;display:block;height:5px;border-radius:3px;background:var(--gsd-line2);overflow:hidden}
.gsd .gsd-bar-t i{position:absolute;inset:0 auto 0 0;width:100%;border-radius:3px;background:var(--gsd-ink);transition:width .2s linear}
.gsd .gsd-res{position:relative;margin-top:4px;border:1px solid var(--gsd-line);border-radius:12px;overflow:hidden}
.gsd :is(.gsd-rh,.gsd-rr,.gsd-rskr){display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,.85fr);align-items:center}
.gsd .gsd-rh{height:32px;background:var(--gsd-soft);border-bottom:1px solid var(--gsd-line2);font:500 12px/1 var(--gsd-sans);color:var(--gsd-mute)}
.gsd .gsd-rh>span{display:flex;align-items:center;gap:7px;padding:0 12px}
.gsd .gsd-rh svg{width:14px;height:14px;color:var(--gsd-faint)}
.gsd .gsd-rr{position:relative;z-index:1;height:48px;border-bottom:1px solid var(--gsd-line2);background:var(--gsd-bg)}
.gsd .gsd-rsk{position:absolute;left:0;right:0;top:32px;z-index:0}
.gsd .gsd-rskr{height:48px;border-bottom:1px solid var(--gsd-line2)}
.gsd .gsd-rskr>span{display:flex;align-items:center;gap:10px;min-width:0;padding:0 12px}
.gsd .gsd-rskr>span>span{display:flex;flex-direction:column;gap:7px;flex:1;min-width:0}
.gsd .gsd-rskr i{display:block;flex:none;width:44%;height:8px;border-radius:5px;background:var(--gsd-line2)}
.gsd .gsd-rskr i+i{width:28%;height:7px}
.gsd .gsd-rskr .gsd-rska{width:30px;height:30px;border-radius:50%}
.gsd .gsd-rr:last-child{border-bottom:0}
.gsd .gsd-rr>span{display:flex;align-items:center;gap:10px;min-width:0;padding:0 12px}

/* ---- Playtables --------------------------------------------------------------------------------------------------- */
.gsd .gsd-grid{flex:1;min-height:0;overflow:hidden}
.gsd :is(.gsd-gh,.gsd-tr){display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.95fr) minmax(0,1.45fr) 112px minmax(0,1.7fr);border-bottom:1px solid var(--gsd-line2)}
.gsd .gsd-gh{height:34px;background:var(--gsd-soft)}
.gsd .gsd-gh>span{display:flex;align-items:center;gap:7px;min-width:0;padding:0 12px;border-right:1px solid var(--gsd-line2);font:500 12px/1 var(--gsd-sans);color:var(--gsd-mute);white-space:nowrap;overflow:hidden;transition:color .3s,box-shadow .3s}
.gsd :is(.gsd-gh,.gsd-tr)>span:last-child{border-right:0}
.gsd .gsd-gh svg{width:14px;height:14px;color:var(--gsd-faint)}
.gsd .gsd-gh .gsd-ghl{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gsd .gsd-gh .gsd-ai svg{color:var(--gsd-ai)}
.gsd .gsd-tr{position:relative;height:56px;transition:background .5s,opacity .45s,transform .45s}
.gsd .gsd-tr>span{position:relative;display:flex;align-items:center;gap:10px;min-width:0;padding:0 12px;border-right:1px solid var(--gsd-line2);overflow:hidden}
.gsd .gsd-sw{display:flex;align-items:center;gap:7px;min-width:0}
.gsd .gsd-em{min-width:0;font:400 12.5px/1.3 var(--gsd-sans);color:var(--gsd-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsd .gsd-vf{flex:none;width:15px;height:15px;border-radius:50%;background:var(--gsd-ok) var(--gsd-check) center/10px no-repeat}
.gsd .gsd-none{display:none;font:400 12.5px/1.3 var(--gsd-sans);color:var(--gsd-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsd .gsd-miss :is(.gsd-em,.gsd-vf){display:none}
.gsd .gsd-miss .gsd-none{display:block}
.gsd .gsd-fit{display:inline-flex;align-items:center;gap:2px;height:24px;padding:0 9px 0 8px;border-radius:999px;background:var(--gsd-sunk);font:500 11.5px/1 var(--gsd-sans);color:var(--gsd-text);white-space:nowrap}
.gsd .gsd-fit i{display:block;width:3px;height:9px;border-radius:2px;background:var(--gsd-line)}
.gsd .gsd-fit i:nth-child(2){height:11px}
.gsd .gsd-fit i:nth-child(3){height:13px;margin-right:5px}
.gsd :is(.gsd-f3 i,.gsd-f2 i:nth-child(-n+2),.gsd-f1 i:first-child){background:var(--gsd-ai)}
.gsd .gsd-f3{background:var(--gsd-ai-soft);color:var(--gsd-ink)}
.gsd .gsd-f1{color:var(--gsd-mute)}
.gsd .gsd-f1 i:first-child{background:var(--gsd-faint)}
.gsd .gsd-lw{align-self:stretch;align-items:center}
.gsd .gsd-ln{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font:400 12px/1.32 var(--gsd-sans);color:var(--gsd-text)}
.gsd .gsd-hl{display:none;height:22px;padding:0 9px;border-radius:999px;background:var(--gsd-sunk);font:500 11.5px/22px var(--gsd-sans);font-style:normal;color:var(--gsd-mute);white-space:nowrap}
.gsd .gsd-held .gsd-ln{display:none}
.gsd .gsd-held .gsd-hl{display:inline-block}
.gsd .gsd-sk{display:none;width:68%;height:8px;border-radius:5px;background:var(--gsd-line2)}
.gsd :is(.gsd-pe,.gsd-k1e){display:none}

/* ---- Workflows ---------------------------------------------------------------------------------------------------- */
.gsd .gsd-wf{display:flex;align-items:center;justify-content:center;padding:14px 18px;background-color:var(--gsd-soft);background-image:radial-gradient(circle at 1px 1px,var(--gsd-line) 1px,transparent 1.4px);background-size:16px 16px}
.gsd .gsd-wf-in{display:flex;flex-direction:column;align-items:center;width:100%;max-width:600px}
.gsd .gsd-src{display:flex;align-items:center;gap:8px;height:34px;padding:0 12px 0 5px;border:1px dashed var(--gsd-faint);border-radius:999px;background:var(--gsd-bg);font:400 12px/1 var(--gsd-sans);color:var(--gsd-mute);white-space:nowrap;max-width:100%}
.gsd .gsd-src>i{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--gsd-sunk);color:var(--gsd-text)}
.gsd .gsd-src>i svg{width:14px;height:14px}
.gsd .gsd-src b{font-weight:600;color:var(--gsd-ink);font-variant-numeric:tabular-nums}
.gsd .gsd-src small{font:inherit;min-width:0;overflow:hidden;text-overflow:ellipsis}
.gsd .gsd-sdot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--gsd-ok)}
.gsd .gsd-e{display:block;flex:none;width:2px;height:14px;background:var(--gsd-faint);transform-origin:50% 0}
.gsd .gsd-node{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;width:min(100%,276px);height:50px;padding:0 12px 0 10px;border:1px solid var(--gsd-line);border-radius:12px;background:var(--gsd-bg);box-shadow:0 1px 2px rgba(20,21,28,.04)}
.gsd .gsd-ni{position:relative;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--gsd-sunk);color:var(--gsd-text)}
.gsd .gsd-ni svg{width:16px;height:16px}
.gsd .gsd-li .gsd-ni{background:var(--gsd-li-soft);color:var(--gsd-li);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gsd-li) 22%,transparent)}
.gsd .gsd-em .gsd-ni{background:var(--gsd-em-soft);color:var(--gsd-em);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gsd-em) 26%,transparent)}
.gsd .gsd-node.gsd-li{box-shadow:inset 0 2px 0 -1px var(--gsd-li),0 1px 2px rgba(20,21,28,.04)}
.gsd .gsd-node.gsd-em{box-shadow:inset 0 2px 0 -1px var(--gsd-em),0 1px 2px rgba(20,21,28,.04)}
.gsd .gsd-node.gsd-wn{border-style:dashed;background:color-mix(in srgb,var(--gsd-bg) 76%,transparent);box-shadow:none}
.gsd .gsd-nt{display:flex;flex-direction:column;gap:2px;min-width:0}
.gsd .gsd-nt b{font:600 13px/1.2 var(--gsd-sans);color:var(--gsd-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsd .gsd-nt small{font:400 11.5px/1.2 var(--gsd-sans);color:var(--gsd-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsd .gsd-nc{font:500 11px/1 var(--gsd-mono);font-style:normal;color:var(--gsd-text);font-variant-numeric:tabular-nums;white-space:nowrap;transition:opacity .4s}
.gsd :is(.gsd-fork,.gsd-merge){display:block;flex:none;width:100%;overflow:visible}
.gsd .gsd-fork{height:30px}
.gsd .gsd-merge{height:24px}
.gsd :is(.gsd-fork,.gsd-merge) path{fill:none;stroke:var(--gsd-faint);stroke-width:2;vector-effect:non-scaling-stroke}
.gsd .gsd-fk-b{stroke-dasharray:5 4}
.gsd .gsd-brs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:100%}
.gsd .gsd-br{display:flex;flex-direction:column;align-items:center;min-width:0;padding:0 7px}
.gsd .gsd-bl{display:inline-flex;align-items:center;height:22px;margin-bottom:0;padding:0 9px;border-radius:999px;border:1px solid var(--gsd-line);background:var(--gsd-bg);font:500 11.5px/1 var(--gsd-sans);color:var(--gsd-text);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.gsd .gsd-br-b .gsd-bl{border-style:dashed}
.gsd .gsd-e-s{height:12px}
.gsd .gsd-br-b .gsd-e{background:repeating-linear-gradient(180deg,var(--gsd-faint) 0 5px,transparent 5px 9px)}
.gsd .gsd-end{display:flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;background:var(--gsd-ink);font:600 12px/1 var(--gsd-sans);color:var(--gsd-bg)}
.gsd .gsd-end i{width:6px;height:6px;border-radius:50%;background:var(--gsd-bg)}

/* ---- AI SDR ------------------------------------------------------------------------------------------------------- */
/* the agent's mode, as a status: a dot and the word in sentence case (BRANDBOOK section 20), the dot in the AI's
   colour and the word in the text ink, as the homepage's AI SDR stop draws the chosen mode (its radio in the AI's
   colour, its name in ink), so a state that follows it in the AI's ink (Unibox's Draft ready) reads as its own */
.gsd .gsd-mode{display:inline-flex;align-items:center;gap:6px;flex:none;font:500 12.5px/1 var(--gsd-sans);color:var(--gsd-text);white-space:nowrap}
.gsd .gsd-mode i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--gsd-ai)}
.gsd .gsd-ib{display:grid;grid-template-columns:288px minmax(0,1fr)}
.gsd .gsd-il{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;border-right:1px solid var(--gsd-line2);background:var(--gsd-soft)}
.gsd .gsd-ilh{display:flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-bottom:1px solid var(--gsd-line2);font:500 12px/1 var(--gsd-sans);color:var(--gsd-mute)}
.gsd .gsd-ilh .gsd-n{background:var(--gsd-bg);box-shadow:inset 0 0 0 1px var(--gsd-line)}
.gsd .gsd-empty{position:absolute;left:16px;right:16px;top:50%;display:flex;flex-direction:column;align-items:center;gap:8px;transform:translateY(-50%);font:400 12.5px/1.35 var(--gsd-sans);color:var(--gsd-faint);text-align:center}
.gsd .gsd-empty svg{width:22px;height:22px}
.gsd .gsd-il li{display:grid;grid-template-columns:30px minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;row-gap:5px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--gsd-line2);transition:opacity .45s,transform .45s,background .3s,box-shadow .3s}
.gsd .gsd-il li .gsd-av{grid-row:1/3;align-self:start}
.gsd .gsd-il li.gsd-open,.gsd .gsd-win:not(.gsd-go) .gsd-il li[data-x]{background:var(--gsd-bg);box-shadow:inset 2px 0 0 var(--gsd-ink)}
.gsd .gsd-i1,.gsd .gsd-i2{display:flex;align-items:center;gap:8px;min-width:0}
.gsd .gsd-i1 b{min-width:0;font:600 13px/1.2 var(--gsd-sans);color:var(--gsd-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsd .gsd-i1 time{margin-left:auto;font:400 11.5px/1 var(--gsd-sans);color:var(--gsd-faint);font-variant-numeric:tabular-nums}
.gsd .gsd-ch{display:inline-flex;align-items:center;gap:5px;flex:none;font:500 11px/1 var(--gsd-sans);white-space:nowrap}
.gsd .gsd-ch::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.gsd .gsd-ch-li{color:var(--gsd-li-ink)}
.gsd .gsd-ch-li::before{background:var(--gsd-li)}
.gsd .gsd-ch-em{color:var(--gsd-em-ink)}
.gsd .gsd-ch-em::before{background:var(--gsd-em)}
.gsd .gsd-i2{flex-direction:column;align-items:flex-start;gap:6px}
.gsd .gsd-msg{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-width:100%;min-width:0;overflow:hidden;font:400 12.5px/1.38 var(--gsd-sans);color:var(--gsd-text)}
.gsd .gsd-sc{display:inline-flex;align-items:center;flex:none;height:20px;padding:0 8px;border-radius:6px;background:var(--gsd-sunk);font:500 11px/1 var(--gsd-sans);color:var(--gsd-text);white-space:nowrap}
.gsd .gsd-sc-ok{background:var(--gsd-ok-soft);color:var(--gsd-ok-ink)}
.gsd .gsd-sum{display:flex;align-items:center;gap:9px;margin:auto 12px 12px;padding:9px 11px;border:1px solid var(--gsd-line);border-radius:10px;background:var(--gsd-bg);font:400 12px/1.25 var(--gsd-sans);color:var(--gsd-mute)}
.gsd .gsd-sum>span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.gsd .gsd-sum b{font:600 12.5px/1 var(--gsd-sans);color:var(--gsd-ink)}
.gsd .gsd-sum span span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--gsd-text)}
.gsd .gsd-ip{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0}
.gsd .gsd-setup{position:absolute;left:50%;top:50%;width:min(440px,100% - 40px);padding:14px 16px 6px;border:1px solid var(--gsd-line);border-radius:14px;background:var(--gsd-bg);box-shadow:var(--gsd-sh);translate:-50% -50%}
.gsd .gsd-suh{display:flex;align-items:center;gap:9px;padding-bottom:10px;border-bottom:1px solid var(--gsd-line2);font:400 12px/1.2 var(--gsd-sans);color:var(--gsd-mute)}
.gsd .gsd-suh b{font:600 13.5px/1.2 var(--gsd-sans);color:var(--gsd-ink)}
.gsd .gsd-suh>span:last-child{margin-left:auto}
.gsd .gsd-aimk{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:7px;background:var(--gsd-ai);color:#fff}
.gsd .gsd-aimk svg{width:14px;height:14px}
.gsd .gsd-setup dl>div{display:grid;grid-template-columns:104px minmax(0,1fr) 16px;gap:12px;align-items:center;min-height:40px;border-bottom:1px solid var(--gsd-line2)}
.gsd .gsd-setup dl>div:last-child{border-bottom:0}
.gsd .gsd-setup dt{font:400 12.5px/1.3 var(--gsd-sans);color:var(--gsd-mute)}
.gsd .gsd-setup dd{min-width:0;font:400 13px/1.35 var(--gsd-sans);color:var(--gsd-ink)}
.gsd .gsd-setup dd b{font-weight:600}
.gsd .gsd-ck{width:16px;height:16px;border-radius:50%;background:var(--gsd-ok) var(--gsd-check) center/10px no-repeat}
.gsd .gsd-th{display:flex;flex-direction:column;min-height:0;height:100%}
.gsd .gsd-thh{display:flex;align-items:center;gap:10px;flex:none;height:58px;padding:0 16px;border-bottom:1px solid var(--gsd-line2)}
.gsd .gsd-thh>span:not(.gsd-sc){display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.gsd .gsd-thh b{font:600 13.5px/1.2 var(--gsd-sans);color:var(--gsd-ink)}
.gsd .gsd-thh small{font:400 12px/1.2 var(--gsd-sans);color:var(--gsd-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsd .gsd-msgs{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:14px 16px 16px;overflow:hidden}
.gsd .gsd-note{align-self:center;display:flex;align-items:center;gap:8px;height:24px;padding:0 10px;border-radius:999px;background:var(--gsd-soft);font:400 11.5px/1 var(--gsd-sans);color:var(--gsd-mute);white-space:nowrap}
.gsd .gsd-out{align-self:flex-end;display:flex;flex-direction:column;align-items:flex-end;gap:4px;max-width:82%}
.gsd .gsd-out p{padding:9px 12px;border-radius:14px 14px 4px 14px;background:var(--gsd-sunk);font:400 13px/1.45 var(--gsd-sans);color:var(--gsd-ink)}
.gsd .gsd-out small{font:400 11px/1 var(--gsd-sans);color:var(--gsd-faint)}
.gsd .gsd-in{align-self:flex-start;display:flex;align-items:flex-end;gap:8px;max-width:82%}
.gsd .gsd-in .gsd-av{width:26px;height:26px}
.gsd .gsd-in p{padding:9px 12px;border-radius:14px 14px 14px 4px;border:1px solid var(--gsd-line);background:var(--gsd-bg);font:400 13px/1.45 var(--gsd-sans);color:var(--gsd-ink)}
.gsd .gsd-draft{padding:11px 12px 11px;border:1px solid var(--gsd-ai-line);border-radius:12px;background:linear-gradient(180deg,var(--gsd-ai-soft),var(--gsd-bg) 75%)}
.gsd .gsd-dh{display:flex;align-items:center;gap:8px;min-width:0;font:400 12px/1.25 var(--gsd-sans);color:var(--gsd-mute)}
.gsd .gsd-dh b{font:600 12.5px/1.2 var(--gsd-sans);color:var(--gsd-ink);white-space:nowrap}
.gsd .gsd-dh>span:last-child{margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsd .gsd-dt{margin-top:8px;font:400 13px/1.45 var(--gsd-sans);color:var(--gsd-ink)}
.gsd .gsd-dt .gsd-rest{visibility:hidden}
.gsd .gsd-acts{display:flex;align-items:center;gap:6px;margin-top:10px;transition:opacity .4s}
.gsd .gsd-acts small{margin-left:auto;font:400 11.5px/1 var(--gsd-sans);color:var(--gsd-mute);white-space:nowrap}
.gsd .gsd-btn{display:inline-flex;align-items:center;height:28px;padding:0 11px;border-radius:8px;border:1px solid var(--gsd-line);background:var(--gsd-bg);font:500 12.5px/1 var(--gsd-sans);color:var(--gsd-ink);white-space:nowrap}
.gsd .gsd-btn-1{border-color:var(--gsd-ink);background:var(--gsd-ink);color:var(--gsd-bg)}

/* ---- Signals: the product's feed of person stories (gs.front.app route/signals story/story.module.scss and
   card/eventCard.module.scss, the round-8 sheet): a card per person, the event's tile and line under the face, the
   open event's context and its one white backing (a hairline card, sections under hairlines, 560 wide at most), a
   line of our reaction bare. ----------------------------------------------------------------------------------------- */
.gsd .gsd-fbar{display:flex;align-items:center;gap:2px;flex:none;margin-left:auto;padding:3px;border-radius:12px;background:var(--gsd-sunk);box-shadow:inset 0 0 0 1px var(--gsd-line2)}
.gsd .gsd-fb{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:8px;font:500 12.5px/1 var(--gsd-sans);color:var(--gsd-mute);white-space:nowrap}
.gsd .gsd-fb-on{background:var(--gsd-seg);color:var(--gsd-ink);box-shadow:0 1px 2px rgba(20,21,28,.1),0 0 0 1px var(--gsd-line2)}
.gsd .gsd-fbn{display:inline-grid;font:500 12px/1 var(--gsd-sans);color:var(--gsd-faint);font-variant-numeric:tabular-nums}
.gsd .gsd-fbn>i{grid-area:1/1;font-style:normal}
.gsd .gsd-fbn>.gsd-fbn-on{color:var(--gsd-warn-ink);font-weight:600}
.gsd .gsd-feedw{padding:12px 20px 0;-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 36px),transparent)}
.gsd .gsd-feed-in{transition:transform .7s cubic-bezier(.3,.7,.2,1)}
.gsd .gsd-day{margin:0 0 8px 2px;font:500 11.5px/1 var(--gsd-sans);color:var(--gsd-mute)}
.gsd .gsd-feed{display:flex;flex-direction:column}
.gsd .gsd-ev{display:grid;grid-template-rows:1fr}
.gsd .gsd-ev-in{min-height:0;overflow:hidden;margin:0 -4px;padding:0 4px}
/* the spacing rides inside the clipped box, so a card not landed yet takes no room */
.gsd .gsd-ev+.gsd-ev .gsd-story{margin-top:8px}
.gsd .gsd-ev:last-child .gsd-story{margin-bottom:24px}
/* the card: the person on top, the event under the face */
.gsd .gsd-story{padding:13px 16px 14px;border:1px solid var(--gsd-line2);border-radius:12px;background:var(--gsd-bg);box-shadow:inset 3px 0 0 var(--gsd-ai),0 1px 2px rgba(20,21,28,.04);transition:border-color .35s,background-color .35s}
.gsd .gsd-story.gsd-waits{border-color:color-mix(in srgb,var(--gsd-warn) 45%,transparent);background:color-mix(in srgb,var(--gsd-warn) 5%,var(--gsd-bg))}
.gsd .gsd-sth{display:grid;grid-template-columns:36px minmax(0,1fr);gap:0 12px;align-items:center}
.gsd .gsd-sth>.gsd-av{width:36px;height:36px}
.gsd .gsd-sthb{min-width:0}
.gsd .gsd-nl{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;min-width:0;font:400 12.5px/20px var(--gsd-sans);color:var(--gsd-text)}
.gsd .gsd-nl b{font:600 14px/20px var(--gsd-sans);color:var(--gsd-ink)}
.gsd .gsd-nl>i{font-style:normal;color:var(--gsd-faint)}
.gsd .gsd-nlr{min-width:0;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gsd .gsd-stg,.gsd .gsd-tbl{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.gsd .gsd-tbl{color:var(--gsd-mute)}
.gsd .gsd-tbl svg{width:13px;height:13px}
.gsd .gsd-sring{width:14px;height:14px;color:var(--gsd-rg)}
.gsd .gsd-sring circle{fill:none;stroke:currentColor;stroke-width:1.5}
.gsd .gsd-sring path{fill:currentColor}
.gsd .gsd-rg-cold{--gsd-rg:#AEB6C4}
.gsd .gsd-rg-cold circle{stroke-dasharray:2.2 1.7}
.gsd .gsd-rg-appr{--gsd-rg:#9B8AFB}
/* the workflow chip under the name: the state's dot and word in its colour, the step as a token */
.gsd .gsd-wcw{display:flex;min-width:0;margin-top:2px}
.gsd .gsd-wc{display:inline-flex;align-items:center;gap:6px;height:22px;max-width:100%;padding:0 8px 0 6px;border-radius:999px;background:var(--gsd-fill);font:400 12px/20px var(--gsd-sans);color:var(--gsd-text);white-space:nowrap}
.gsd .gsd-wc>i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--gsd-wcd)}
.gsd .gsd-wc>span:not(.gsd-wcs){min-width:0;overflow:hidden;text-overflow:ellipsis}
.gsd .gsd-wc em{font-style:normal;color:var(--gsd-faint)}
.gsd .gsd-wc b{font-weight:600;color:var(--gsd-wci)}
.gsd .gsd-wcs{display:inline-grid;place-items:center;flex:none;height:16px;padding:0 4px;border-radius:4px;background:var(--gsd-bg);box-shadow:inset 0 0 0 1px var(--gsd-line);font:600 10.5px/16px var(--gsd-mono);color:var(--gsd-mute)}
.gsd .gsd-wc-info{--gsd-wcd:var(--gsd-info);--gsd-wci:var(--gsd-info-ink)}
.gsd .gsd-wc-warn{--gsd-wcd:var(--gsd-warn);--gsd-wci:var(--gsd-warn-ink)}
/* the event: its tile on the chain, the line, the open body under the words */
.gsd .gsd-chain{margin-top:12px}
.gsd .gsd-se{display:grid;grid-template-columns:36px minmax(0,1fr);gap:0 12px;align-items:start}
.gsd .gsd-tile{position:relative;display:grid;place-items:center;justify-self:center;width:22px;height:22px;border-radius:4px;color:var(--gsd-tl);background:color-mix(in srgb,var(--gsd-tl) 12%,var(--gsd-bg));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gsd-tl) 20%,transparent)}
.gsd .gsd-tile svg{width:13px;height:13px}
.gsd .gsd-tl-pr{--gsd-tl:var(--gsd-ai)}
.gsd .gsd-tl-li{--gsd-tl:var(--gsd-li)}
.gsd .gsd-seb{min-width:0}
.gsd .gsd-line{display:flex;align-items:center;gap:8px;min-height:22px}
.gsd .gsd-tri{display:grid;place-items:center;flex:none;width:16px;height:20px;margin-right:-2px;color:var(--gsd-mute)}
.gsd .gsd-tri svg{width:12px;height:12px;transform:rotate(90deg)}
.gsd .gsd-words{flex:1;min-width:0;font:600 14px/20px var(--gsd-sans);color:var(--gsd-ink)}
.gsd .gsd-tm{display:inline-flex;align-items:center;gap:6px;flex:none;font:600 11px/20px var(--gsd-mono);color:var(--gsd-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.gsd .gsd-tm::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gsd-ai)}
.gsd .gsd-sopen{padding-left:22px}
.gsd .gsd-ctx{display:flex;flex-wrap:wrap;gap:2px 6px;margin-top:2px;font:400 12.5px/18px var(--gsd-sans);color:var(--gsd-mute)}
.gsd .gsd-ctx>i{font-style:normal;color:var(--gsd-faint)}
.gsd .gsd-react{display:flex;flex-direction:column;margin-top:8px}
/* the white backing */
.gsd .gsd-eb{max-width:560px}
.gsd .gsd-card{overflow:hidden;border:1px solid var(--gsd-line2);border-radius:12px;background:var(--gsd-bg);font:400 13px/18px var(--gsd-sans);color:var(--gsd-ink)}
.gsd .gsd-card>*+*{border-top:1px solid var(--gsd-line2)}
.gsd .gsd-sec{padding:10px 14px}
.gsd .gsd-hd{display:flex;align-items:center;gap:6px;min-width:0;font:400 12.5px/18px var(--gsd-sans);color:var(--gsd-text)}
.gsd .gsd-hd svg{flex:none;width:13px;height:13px}
.gsd .gsd-hd b{font-weight:600;color:var(--gsd-ink)}
.gsd .gsd-hiw{color:var(--gsd-ai)}
.gsd .gsd-hid{color:var(--gsd-ok)}
.gsd .gsd-sbd{margin-top:6px;font:400 13px/1.5 var(--gsd-sans);color:var(--gsd-ink)}
.gsd .gsd-vb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.gsd .gsd-vb .gsd-btn{gap:6px;font-size:13px}
.gsd .gsd-vb .gsd-btn svg{width:13px;height:13px}
.gsd .gsd-btn-p{border-color:var(--gsd-ai);background:var(--gsd-ai);color:var(--gsd-on-ai)}
.gsd .gsd-go .gsd-btn-off:not(.gsd-ready){opacity:.45}
.gsd .gsd-sel{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;width:220px;max-width:100%;height:28px;padding:0 10px 0 11px;border:1px solid var(--gsd-line);border-radius:8px;background:var(--gsd-bg);font:400 13px/1 var(--gsd-sans);color:var(--gsd-ink)}
.gsd .gsd-sel-v{display:grid;min-width:0}
.gsd .gsd-sel-v>span{grid-area:1/1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsd .gsd-sel-ph{color:var(--gsd-faint)}
.gsd .gsd-sel svg{flex:none;width:11px;height:11px;color:var(--gsd-text)}
.gsd .gsd-bare{display:grid;grid-template-columns:13px minmax(0,1fr);gap:8px;align-items:start;font:400 12.5px/18px var(--gsd-sans);color:var(--gsd-text)}
.gsd .gsd-tq{width:13px;height:13px;margin-top:2.5px;color:var(--gsd-faint)}
.gsd .gsd-lk{margin-left:4px;font:500 12px/18px var(--gsd-sans);color:var(--gsd-ai);white-space:nowrap}
/* a post (look C): the words, the counts with the reaction stack, the bar, the thread */
.gsd .gsd-ptx{padding:10px 14px;font:400 13.5px/1.5 var(--gsd-sans);color:var(--gsd-ink)}
.gsd .gsd-more{color:var(--gsd-mute)}
.gsd .gsd-cnt{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:33px;padding:7px 14px;font:400 12px/18px var(--gsd-sans);color:var(--gsd-mute);white-space:nowrap}
.gsd .gsd-rcts{display:inline-flex;align-items:center;gap:4px;min-width:0}
.gsd .gsd-rcts>.gsd-ss{min-width:0;overflow:hidden;text-overflow:ellipsis}
.gsd .gsd-stk{display:inline-flex;align-items:center;flex:none}
.gsd .gsd-stk i{display:grid;place-items:center;width:16px;height:16px;margin-right:-6px;border-radius:50%;background:var(--gsd-rk);color:#fff;box-shadow:0 0 0 1.5px var(--gsd-bg)}
.gsd .gsd-stk i:last-child{margin-right:6px}
.gsd .gsd-stk svg{width:10px;height:10px}
.gsd .gsd-rk-like{--gsd-rk:var(--gsd-ai)}
.gsd .gsd-rk-emp{--gsd-rk:var(--gsd-bad)}
.gsd .gsd-rk-int{--gsd-rk:var(--gsd-warn)}
.gsd .gsd-pbar{display:flex;gap:18px;padding:4px 8px;background:color-mix(in srgb,var(--gsd-soft) 90%,transparent)}
.gsd .gsd-pv{display:inline-flex;flex:1;align-items:center;justify-content:center;gap:6px;min-width:0;height:36px;padding:0 8px;border-radius:8px;font:600 13px/1 var(--gsd-sans);color:var(--gsd-text);white-space:nowrap;transition:color .25s,transform .15s,background-color .2s}
.gsd .gsd-pv svg{flex:none;width:16px;height:16px}
/* Like turns into Liked in the primary; the finished run (no script) shows it liked */
.gsd .gsd-pv-1,.gsd :is(.gsd-pv.gsd-liked,.gsd-win:not(.gsd-go) .gsd-pv-like) .gsd-pv-0{display:none}
.gsd :is(.gsd-pv.gsd-liked,.gsd-win:not(.gsd-go) .gsd-pv-like) .gsd-pv-1{display:block}
.gsd :is(.gsd-pv.gsd-liked,.gsd-win:not(.gsd-go) .gsd-pv-like){color:var(--gsd-ai)}
.gsd .gsd-thread{display:flex;flex-direction:column;padding:10px 14px 14px}
.gsd .gsd-thread>*+*{margin-top:10px}
.gsd .gsd-thread>.gsd-grow{margin-top:0}
.gsd .gsd-grow{display:grid;grid-template-rows:1fr}
.gsd .gsd-gi{min-height:0;overflow:hidden}
.gsd .gsd-gi>*{margin-top:10px}
.gsd .gsd-cmt{display:flex;gap:8px;min-width:0}
.gsd .gsd-cmt>.gsd-av{width:32px;height:32px}
.gsd .gsd-nest{margin-left:40px}
.gsd .gsd-bub{flex:1;min-width:0;padding:8px 12px;border-radius:0 12px 12px;background:var(--gsd-fill)}
.gsd .gsd-bh{display:flex;align-items:baseline;gap:6px;min-width:0}
.gsd .gsd-bh b{flex:none;font:600 12.5px/18px var(--gsd-sans);color:var(--gsd-ink)}
.gsd .gsd-bh span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 11.5px/18px var(--gsd-sans);color:var(--gsd-mute)}
.gsd .gsd-bh time{flex:none;margin-left:auto;font:400 11px/18px var(--gsd-mono);color:var(--gsd-faint)}
.gsd .gsd-bt{margin-top:2px;font:400 13px/1.45 var(--gsd-sans);color:var(--gsd-ink)}
/* the composer: the pill with the AI's Draft, or a draft waiting in the primary */
.gsd .gsd-fld{display:flex;flex:1;align-items:center;gap:8px;min-width:0;min-height:34px;padding:6px 8px 6px 14px;border:1px solid var(--gsd-line);border-radius:999px;background:var(--gsd-bg);font:400 13px/1.2 var(--gsd-sans);color:var(--gsd-faint)}
.gsd .gsd-fldt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gsd .gsd-dchip{display:inline-flex;align-items:center;gap:4px;flex:none;height:20px;padding:0 8px;border-radius:999px;background:color-mix(in srgb,var(--gsd-ai) 14%,transparent);font:600 11px/1 var(--gsd-sans);color:var(--gsd-ai);transition:transform .15s,background-color .2s}
.gsd .gsd-dchip svg{width:11px;height:11px}
.gsd .gsd-dspin{display:none;width:10px;height:10px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--gsd-ai) 30%,transparent);border-top-color:var(--gsd-ai);animation:gsd-spin .8s linear infinite}
.gsd .gsd-dchip.gsd-busy svg{display:none}
.gsd .gsd-dchip.gsd-busy .gsd-dspin{display:block}
.gsd .gsd-dft{display:flex;flex:1;flex-direction:column;gap:6px;min-width:0;padding:10px 12px;border:1px solid color-mix(in srgb,var(--gsd-ai) 35%,transparent);border-radius:12px;background:var(--gsd-ai-soft)}
.gsd .gsd-dfh{padding-bottom:7px;border-bottom:1px solid color-mix(in srgb,var(--gsd-ai) 16%,transparent);font:400 12px/18px var(--gsd-sans);color:var(--gsd-ai-ink)}
.gsd .gsd-dftx{font:400 13px/1.5 var(--gsd-sans);color:var(--gsd-ink)}
.gsd .gsd-dft .gsd-vb{margin-top:2px}

/* ---- AI Search: the status each result ended in, the product's dot and word ------------------------------------------ */
.gsd .gsd-rs{display:flex;align-items:center;gap:7px;min-width:0}
.gsd .gsd-rs>i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--gsd-faint)}
.gsd .gsd-rs>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.gsd .gsd-rs b{font:500 12.5px/1.2 var(--gsd-sans);color:var(--gsd-text)}
.gsd .gsd-rs small{font:400 11.5px/1.25 var(--gsd-sans);color:var(--gsd-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsd .gsd-rs-ok>i{background:var(--gsd-ok)}
.gsd .gsd-rs-ok b{color:var(--gsd-ok-ink)}
.gsd .gsd-rs-dq>i{background:var(--gsd-slate)}
.gsd .gsd-c3 .gsd-sk{width:54%}
.gsd .gsd-pgs{display:inline-block;width:3px;height:3px;margin:0 8px 2px;border-radius:50%;background:var(--gsd-faint);vertical-align:middle}
/* a face with no photo: the initials on one of the product's avatar hues */
.gsd .gsd-ini{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--gsd-hue) 12%,var(--gsd-bg));font:700 11px/1 var(--gsd-sans);color:var(--gsd-hue);letter-spacing:.01em}
.gsd .gsd-ini-sm{width:32px;height:32px;font-size:11.5px}
/* a result row's face sits in the person cell, whose spans are columns: the disc keeps its own centring */
.gsd .gsd-c1>.gsd-ini{display:grid;flex-direction:row;gap:0}
.gsd .gsd-hue2{--gsd-hue:#D9880A}
.gsd .gsd-hue4{--gsd-hue:#8B5CF6}
.gsd .gsd-hue5{--gsd-hue:#0E9BA6}

/* ---- the run: the states the script steps through ------------------------------------------------------------------ */
/* Without .gsd-go (no script, reduced motion) the finished run shows: the transient layers stay out. */
.gsd .gsd-win:not(.gsd-go) .gsd-xf{display:none}
.gsd .gsd-go [data-t]{transition:opacity .45s ease,transform .45s ease}
.gsd .gsd-go [data-t]:not(.gsd-on){opacity:0;transform:translateY(6px)}
.gsd .gsd-go .gsd-tr[data-t]:not(.gsd-on){transform:translateY(-4px)}
.gsd .gsd-go .gsd-e[data-t]{transition:transform .35s ease,opacity .2s}
.gsd .gsd-go .gsd-e[data-t]:not(.gsd-on){transform:scaleY(0)}
.gsd .gsd-go :is(.gsd-fork,.gsd-merge)[data-t]:not(.gsd-on){transform:scaleY(0)}
.gsd .gsd-go :is(.gsd-fork,.gsd-merge)[data-t]{transform-origin:50% 0}
.gsd .gsd-go .gsd-node[data-t]:not(.gsd-on){transform:scale(.94)}
.gsd .gsd-go .gsd-ph .gsd-stat[data-t]:not(.gsd-on){position:absolute;right:16px;transform:none}
.gsd .gsd-go .gsd-setup[data-t]{transition:opacity .45s ease,translate .45s ease}
.gsd .gsd-go .gsd-setup[data-t]:not(.gsd-on){transform:none;translate:-50% calc(-50% + 8px)}
.gsd .gsd-go .gsd-ev{transition:grid-template-rows .55s cubic-bezier(.3,.7,.2,1),opacity .45s ease}
.gsd .gsd-go .gsd-ev[data-t]:not(.gsd-on){grid-template-rows:0fr;transform:none}
.gsd .gsd-go .gsd-eb{display:grid;grid-template-rows:1fr;transition:grid-template-rows .5s cubic-bezier(.3,.7,.2,1),margin-top .5s cubic-bezier(.3,.7,.2,1),opacity .45s ease .1s}
.gsd .gsd-go .gsd-ebi{min-height:0;overflow:hidden;margin:0 -3px -4px;padding:0 3px 4px}
.gsd .gsd-go .gsd-eb[data-t]:not(.gsd-on){grid-template-rows:0fr;margin-top:0;transform:none;transition-delay:0s}
/* Signals: a bubble or the composer grows into the thread; a state swaps in place (gsd-ss); a press dips the control */
.gsd .gsd-go .gsd-grow{transition:grid-template-rows .5s cubic-bezier(.3,.7,.2,1),opacity .4s ease .08s}
.gsd .gsd-go .gsd-grow[data-t]:not(.gsd-on){grid-template-rows:0fr;transform:none;transition-delay:0s}
.gsd .gsd-go .gsd-ss:not(.gsd-on){display:none}
/* a swap (demo-signals.php, every view but the full window, and the calm full window): the states of one place take
   turns in one cell, each growing in or out of it, so its top never moves and its height eases from one to the next;
   the one going out keeps its room until the one coming in has most of its own, and fades first */
.gsd .gsd-swap{display:grid}
.gsd .gsd-swap>*{grid-area:1/1;min-width:0}
.gsd .gsd-swap>.gsd-grow>.gsd-gi>*{margin-top:0}
.gsd .gsd-go .gsd-swap>.gsd-grow{transition:grid-template-rows .5s cubic-bezier(.3,.7,.2,1),opacity .3s ease .2s}
.gsd .gsd-go .gsd-swap>.gsd-grow[data-t]:not(.gsd-on){transition:grid-template-rows .3s cubic-bezier(.3,.7,.2,1) .25s,opacity .2s ease}
/* steady (demo.js stackFeed): the feed's cards out of the flow, each placed under the ones above it by a transform */
.gsd .gsd-feed.gsd-stack{position:relative;display:block}
.gsd .gsd-feed.gsd-stack>li{position:absolute;top:0;left:0;right:0}
.gsd .gsd-go .gsd-ss.gsd-on{animation:gsd-in .35s ease-out}
.gsd .gsd-go .gsd-dft .gsd-rest{visibility:hidden}
.gsd .gsd-go :is(.gsd-btn,.gsd-pv,.gsd-dchip){transition:transform .15s ease,background-color .2s,filter .2s,opacity .3s}
.gsd .gsd-go :is(.gsd-btn,.gsd-pv,.gsd-dchip).gsd-press{transform:scale(.94)}
.gsd .gsd-go .gsd-btn.gsd-press:not(.gsd-btn-p),.gsd .gsd-go .gsd-pv.gsd-press{background:var(--gsd-sunk)}
.gsd .gsd-go .gsd-btn-p.gsd-press{filter:brightness(.86)}
/* the panel that comes in */
.gsd .gsd-go .gsd-pn{animation:gsd-pane .38s ease-out}
/* the composer while the voice speaks */
.gsd .gsd-go .gsd-box.gsd-live{border-color:color-mix(in srgb,var(--gsd-ai) 55%,var(--gsd-line));box-shadow:0 0 0 3px color-mix(in srgb,var(--gsd-ai) 12%,transparent)}
.gsd .gsd-go .gsd-box.gsd-live .gsd-mic{color:#fff;background:var(--gsd-creator);animation:gsd-halo 1.8s steps(1) infinite}
.gsd .gsd-go .gsd-box.gsd-live .gsd-mic-v{visibility:hidden}
.gsd .gsd-go .gsd-box.gsd-live .gsd-mic-s{visibility:visible;width:45%;height:45%}
/* a still holds one width of the halo */
.gsd.gsd-still .gsd-go .gsd-box.gsd-live .gsd-mic{animation:none;box-shadow:0 0 0 4px var(--gsd-halo)}
.gsd .gsd-go .gsd-box.gsd-live .gsd-send{color:#fff;background:var(--gsd-ai)}
.gsd .gsd-go .gsd-send.gsd-press{color:#fff;background:var(--gsd-ai);transform:scale(.9)}
/* a caret is painted, not a box: the typed run's own background at its end (an inline box paints one strip across its
   lines, so it lands after the last letter), 1 px off it as before, so no box moves as the letters come. A typed text's
   caret takes no room either (it lies over the hidden rest), so its lines never rewrap while it types; the spoken words
   keep the 3 px the field has always measured them with. A long spoken text (a block at the field's foot) keeps the
   caret box after it. */
.gsd .gsd-typing>.gsd-typed{margin-right:-3px}
.gsd .gsd-typing>.gsd-typed,.gsd .gsd-box:not(.gsd-long) .gsd-said.gsd-typing{padding-right:3px;background:linear-gradient(var(--gsd-ai),var(--gsd-ai)) no-repeat right center/2px 1em;animation:gsd-blink-c 1s steps(2) infinite}
.gsd .gsd-box.gsd-long .gsd-said.gsd-typing::after{content:"";display:inline-block;width:2px;height:1em;margin-left:1px;vertical-align:-.15em;background:var(--gsd-ai);animation:gsd-blink 1s steps(2) infinite}
/* the plan: waiting, running, waiting for the person, done */
.gsd .gsd-go .gsd-plan:not(.gsd-done) .gsd-pls{color:var(--gsd-ink)}
.gsd .gsd-go .gsd-plan:not(.gsd-done) .gsd-pls i{background:var(--gsd-ai);animation:gsd-pulse 1.4s ease-in-out infinite}
.gsd .gsd-go .gsd-plan.gsd-ask .gsd-pls{color:var(--gsd-em-ink)}
.gsd .gsd-go .gsd-plan.gsd-ask .gsd-pls i{background:var(--gsd-em)}
.gsd .gsd-go .gsd-steps li:not(.gsd-done) .gsd-st{background:transparent;box-shadow:inset 0 0 0 1.5px var(--gsd-faint);border-radius:50%}
.gsd .gsd-go .gsd-steps li:not(.gsd-run):not(.gsd-ask):not(.gsd-done) .gsd-st{box-shadow:none;border:1.5px dashed var(--gsd-faint)}
.gsd .gsd-go .gsd-steps li:not(.gsd-run):not(.gsd-ask):not(.gsd-done) :is(.gsd-psn,.gsd-psi){color:var(--gsd-mute)}
.gsd .gsd-go .gsd-steps li:not(.gsd-run):not(.gsd-ask):not(.gsd-done) .gsd-psn{font-weight:400}
.gsd .gsd-go .gsd-steps li.gsd-run .gsd-ps{background:var(--gsd-soft)}
.gsd .gsd-go .gsd-steps li.gsd-run .gsd-psn{font-weight:600}
.gsd .gsd-go .gsd-steps li.gsd-run .gsd-st{box-shadow:inset 0 0 0 1.5px var(--gsd-line)}
.gsd .gsd-go .gsd-steps li.gsd-run .gsd-st::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid transparent;border-top-color:var(--gsd-ai);border-right-color:var(--gsd-ai);animation:gsd-spin .8s linear infinite}
.gsd .gsd-go .gsd-steps li.gsd-ask .gsd-st{box-shadow:inset 0 0 0 1.5px var(--gsd-em);background:radial-gradient(circle,var(--gsd-em) 0 3px,transparent 3.5px)}
.gsd .gsd-go .gsd-steps li.gsd-done .gsd-st{animation:gsd-pop .3s ease-out}
.gsd .gsd-go .gsd-steps li:not(.gsd-done) .gsd-m-d{visibility:hidden}
.gsd .gsd-go .gsd-steps li:not(.gsd-run):not(.gsd-ask):not(.gsd-done) .gsd-m-w{visibility:visible}
.gsd .gsd-go .gsd-steps li.gsd-run .gsd-m-r{visibility:visible;color:var(--gsd-ai-ink)}
.gsd .gsd-go .gsd-steps li.gsd-ask .gsd-m-a{visibility:visible;color:var(--gsd-em-ink)}
.gsd .gsd-go:not(.gsd-plan-done) .gsd-plf-i{background:none;border:1.5px solid var(--gsd-line);border-top-color:var(--gsd-ai);animation:gsd-spin .8s linear infinite}
.gsd .gsd-go.gsd-plan-idle .gsd-plf-i{border:0;animation:none;background:var(--gsd-ok) var(--gsd-check) center/9px no-repeat}
.gsd .gsd-go.gsd-plan-ask .gsd-plf-i{border-color:var(--gsd-em);animation:none;background:radial-gradient(circle,var(--gsd-em) 0 2.5px,transparent 3px)}
.gsd .gsd-go .gsd-mini-s i:not(.gsd-done){background:var(--gsd-line)}
.gsd .gsd-go .gsd-mini-s i.gsd-run{background:linear-gradient(90deg,var(--gsd-ai) 0 40%,var(--gsd-ai-line) 40%);background-size:250% 100%;animation:gsd-shim 1.1s linear infinite}
.gsd .gsd-go .gsd-mini-s i.gsd-ask{background:var(--gsd-em)}
/* AI Search: the description being written, the search walking */
.gsd .gsd-go .gsd-desc:has(.gsd-typing){border-color:color-mix(in srgb,var(--gsd-ai) 50%,var(--gsd-line));box-shadow:0 0 0 3px color-mix(in srgb,var(--gsd-ai) 10%,transparent)}
.gsd .gsd-go .gsd-dtx .gsd-rest{visibility:hidden}
/* Playtables: a value swaps in where a skeleton waited; the column being filled shimmers */
.gsd .gsd-go .gsd-sw:not(.gsd-on){display:none}
.gsd .gsd-go .gsd-sw:not(.gsd-on)+.gsd-sk{display:block}
.gsd .gsd-go .gsd-sw.gsd-on{animation:gsd-in .35s ease-out}
.gsd .gsd-go .gsd-lw .gsd-rest{visibility:hidden}
.gsd .gsd-go .gsd-tb.gsd-col-e .gsd-gh .gsd-k3,.gsd .gsd-go .gsd-tb.gsd-col-s .gsd-gh .gsd-k4,.gsd .gsd-go .gsd-tb.gsd-col-f .gsd-gh .gsd-k5{color:var(--gsd-ink);box-shadow:inset 0 -2px 0 var(--gsd-ink)}
.gsd .gsd-go .gsd-tb.gsd-col-s .gsd-gh .gsd-k4,.gsd .gsd-go .gsd-tb.gsd-col-f .gsd-gh .gsd-k5{box-shadow:inset 0 -2px 0 var(--gsd-ai)}
.gsd .gsd-go .gsd-tb.gsd-col-e :is(.gsd-k3,.gsd-pe) .gsd-sw:not(.gsd-on)+.gsd-sk,.gsd .gsd-go .gsd-tb.gsd-col-s .gsd-k4 .gsd-sw:not(.gsd-on)+.gsd-sk,.gsd .gsd-go .gsd-tb.gsd-col-f .gsd-k5 .gsd-sw:not(.gsd-on)+.gsd-sk{background:linear-gradient(90deg,var(--gsd-line2),var(--gsd-line),var(--gsd-line2));background-size:200% 100%;animation:gsd-shim 1.3s linear infinite}
.gsd .gsd-go .gsd-tb:is(.gsd-col-s,.gsd-col-f) :is(.gsd-k4,.gsd-k5) .gsd-sw:not(.gsd-on)+.gsd-sk{background-image:linear-gradient(90deg,var(--gsd-ai-soft),var(--gsd-ai-line),var(--gsd-ai-soft))}
.gsd .gsd-go .gsd-tb:not(.gsd-col-s) .gsd-k4 .gsd-sw:not(.gsd-on)+.gsd-sk,.gsd .gsd-go .gsd-tb:not(.gsd-col-f) .gsd-k5 .gsd-sw:not(.gsd-on)+.gsd-sk{background-image:none}
/* Workflows: before and after the spoken yes */
.gsd .gsd-go .gsd-wfp:not(.gsd-started) .gsd-nc{opacity:0}
.gsd .gsd-go .gsd-wfp:not(.gsd-started) .gsd-sdot{background:var(--gsd-faint)}
.gsd .gsd-go .gsd-wfp.gsd-started .gsd-sdot{box-shadow:0 0 0 3px color-mix(in srgb,var(--gsd-ok) 20%,transparent)}
.gsd .gsd-go .gsd-wfp.gsd-started .gsd-br:not(.gsd-br-b) .gsd-e,.gsd .gsd-go .gsd-wfp.gsd-started .gsd-wf-in>.gsd-e{background:linear-gradient(180deg,var(--gsd-faint) 0 35%,var(--gsd-ink) 50%,var(--gsd-faint) 65%);background-size:100% 300%;animation:gsd-down 1.6s linear infinite}
.gsd .gsd-go .gsd-wfp.gsd-started .gsd-ni::after{content:"";position:absolute;inset:-3px;border-radius:10px;border:1.5px solid currentColor;opacity:0;animation:gsd-sent 3.6s ease-out infinite}
.gsd .gsd-go .gsd-wfp.gsd-started .gsd-node:nth-of-type(2) .gsd-ni::after{animation-delay:.6s}
.gsd .gsd-go .gsd-wfp.gsd-started .gsd-br .gsd-node:first-of-type .gsd-ni::after{animation-delay:1.2s}
.gsd .gsd-go .gsd-wfp.gsd-started .gsd-br-b .gsd-node:first-of-type .gsd-ni::after{animation-delay:1.8s}
.gsd .gsd-go .gsd-wfp.gsd-started .gsd-br .gsd-node:last-child .gsd-ni::after{animation-delay:2.4s}
.gsd .gsd-go .gsd-wfp.gsd-started .gsd-br-b .gsd-node:last-child .gsd-ni::after{animation-delay:3s}
/* the live dots */
.gsd .gsd-go .gsd-stat-ok i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--gsd-ok);opacity:0;animation:gsd-ping 1.8s ease-out infinite}
/* the end of a loop: the content fades, the frame stays; a reset jumps with no transitions */
.gsd .gsd-fading :is(.gsd-chat,.gsd-mini-t,.gsd-pb>*,.gsd-ph>*:not(.gsd-pt),.gsd-n){opacity:0 !important;transition:opacity .7s ease !important}
.gsd .gsd-reset,.gsd .gsd-reset *,.gsd .gsd-reset *::before,.gsd .gsd-reset *::after{transition:none !important}
.gsd .gsd-reset :is(.gsd-sw,.gsd-st,.gsd-pn,.gsd-ss){animation:none !important}
.gsd .gsd-paused *,.gsd .gsd-paused *::before,.gsd .gsd-paused *::after{animation-play-state:paused !important}
.gsd .gsd-paused :is(.gsd-sw,.gsd-st,.gsd-pn,.gsd-ss){animation-play-state:running !important}
@media (prefers-reduced-motion:reduce){
  .gsd *,.gsd *::before,.gsd *::after{animation:none !important;transition:none !important}
}
@keyframes gsd-pane{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes gsd-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@keyframes gsd-shim{from{background-position:200% 0}to{background-position:0 0}}
@keyframes gsd-spin{to{transform:rotate(360deg)}}
@keyframes gsd-pop{0%{transform:scale(.6)}70%{transform:scale(1.12)}100%{transform:scale(1)}}
/* the voice's halo, the five widths the app's control steps through as the meter reads a voice (data-level 0 to 4) */
@keyframes gsd-halo{0%{box-shadow:0 0 0 2px var(--gsd-halo)}18%{box-shadow:0 0 0 6px var(--gsd-halo)}34%{box-shadow:0 0 0 4px var(--gsd-halo)}50%{box-shadow:0 0 0 8px var(--gsd-halo)}66%{box-shadow:0 0 0 3px var(--gsd-halo)}82%{box-shadow:0 0 0 6px var(--gsd-halo)}}
@keyframes gsd-blink{to{visibility:hidden}}
@keyframes gsd-blink-c{to{background-size:0 1em}}
@keyframes gsd-down{from{background-position:0 100%}to{background-position:0 0}}
@keyframes gsd-sent{0%{opacity:0;transform:scale(.9)}8%{opacity:.8}40%{opacity:0;transform:scale(1.35)}100%{opacity:0}}
@keyframes gsd-ping{0%{opacity:.8;transform:scale(.6)}100%{opacity:0;transform:scale(1.5)}}
@keyframes gsd-pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---- under 1220: five columns no longer fit, so the found email rides under the person's name (the title gives way)
   and the Work email column goes; the Company column stays to 1100 ------------------------------------------------- */
@container gsd (max-width:1219px){
  .gsd :is(.gsd-gh,.gsd-tr){grid-template-columns:minmax(0,1.45fr) minmax(0,1.05fr) 108px minmax(0,1.9fr)}
  .gsd :is(.gsd-gh,.gsd-tr)>.gsd-k3{display:none}
  .gsd .gsd-gh .gsd-k1e{display:inline}
  .gsd .gsd-go .gsd-tb.gsd-col-e .gsd-gh .gsd-k1{color:var(--gsd-ink);box-shadow:inset 0 -2px 0 var(--gsd-ink)}
  .gsd .gsd-tr .gsd-k1 small{display:none}
  .gsd .gsd-pe{display:block;min-width:0}
  .gsd .gsd-pe .gsd-sw{gap:6px}
  .gsd .gsd-pe .gsd-sk{width:118px;max-width:100%;height:7px;margin:5px 0 3px}
  .gsd .gsd-pe .gsd-vf{width:14px;height:14px;background-size:9px}
  .gsd .gsd-pe :is(.gsd-em,.gsd-none){font-size:12px}
}

/* ---- narrower: Creator 300px, the table without its Company column ------------------------------------------------ */
@container gsd (max-width:1099px){
  .gsd .gsd-ui{grid-template-columns:304px minmax(0,1fr)}
  .gsd .gsd-ps{grid-template-columns:16px minmax(0,1fr) auto}
  .gsd .gsd-psi{display:none}
  /* below 1100 the Company column goes too */
  .gsd :is(.gsd-gh,.gsd-tr){grid-template-columns:minmax(0,1.6fr) 108px minmax(0,1.9fr)}
  .gsd :is(.gsd-gh,.gsd-tr)>.gsd-k2{display:none}
  .gsd .gsd-ib{grid-template-columns:244px minmax(0,1fr)}
  .gsd .gsd-ph .gsd-meta{display:none}
}

/* ---- below 880px: Creator above the app, the plan as a compact row of steps -------------------------------------- */
@container gsd (max-width:879px){
  .gsd .gsd-ui{grid-template-columns:minmax(0,1fr);height:auto}
  .gsd .gsd-cr{border-right:0;border-bottom:1px solid var(--gsd-line)}
  .gsd .gsd-crh{height:54px}
  .gsd .gsd-chat{flex:none;height:calc(150px - var(--gsd-grow,0px));transition:height .28s cubic-bezier(.3,.7,.2,1)}
  .gsd .gsd-plan{display:none}
  .gsd .gsd-greet{top:14px;left:16px;right:16px}
  .gsd .gsd-gs{font-size:13.5px}
  .gsd .gsd-mini{display:flex}
  .gsd .gsd-box{margin-top:2px}
  .gsd .gsd-app{height:640px}
}

/* ---- phones ------------------------------------------------------------------------------------------------------- */
@container gsd (max-width:599px){
  .gsd .gsd-win{border-radius:16px}
  .gsd .gsd-bar{gap:8px;padding:0 8px 0 12px}
  .gsd .gsd-host,.gsd .gsd-cv{display:none !important}
  .gsd .gsd-host:not([hidden])+.gsd-pp{margin-left:auto}
  .gsd .gsd-ws b{max-width:9em;overflow:hidden;text-overflow:ellipsis}
  .gsd .gsd-crh{padding:0 14px}
  .gsd .gsd-chat{height:calc(160px - var(--gsd-grow,0px))}
  .gsd .gsd-chat-in{padding:14px 12px 12px}
  .gsd .gsd-u{font-size:13px;max-width:96%}
  .gsd .gsd-a{font-size:13px}
  .gsd .gsd-mini{padding:9px 12px}
  .gsd .gsd-mini-s{width:84px;gap:3px}
  .gsd .gsd-box{margin:0 10px 10px}
  .gsd .gsd-app{height:632px}
  .gsd .gsd-top{height:58px;padding:0 8px}
  .gsd .gsd-ph{height:46px;padding:0 12px 0 14px;gap:8px}
  .gsd .gsd-go .gsd-ph .gsd-stat[data-t]:not(.gsd-on){right:12px}
  .gsd .gsd-pt{font-size:14px}
  .gsd .gsd-gb{display:none}
  .gsd .gsd-pf{height:auto;min-height:40px;padding:8px 12px 8px 14px;white-space:normal;font-size:12px}
  .gsd .gsd-pf>span{white-space:normal}
  .gsd .gsd-pf>.gsd-rng{display:none}
  /* AI Search */
  .gsd .gsd-srch{gap:8px;padding:12px 14px 0}
  .gsd .gsd-desc{padding:10px 12px;font-size:13.5px}
  .gsd .gsd-chip{height:28px;padding:0 9px;font-size:12px}
  .gsd .gsd-prog{gap:10px;font-size:12px}
  .gsd .gsd-rh{display:none}
  /* the person and how the search left them: the company gives way */
  .gsd :is(.gsd-rr,.gsd-rskr){grid-template-columns:minmax(0,1fr) minmax(0,.9fr);height:48px}
  .gsd :is(.gsd-rr,.gsd-rskr)>:nth-child(2){display:none}
  .gsd :is(.gsd-rr,.gsd-rskr)>span{gap:9px;padding:0 10px}
  .gsd .gsd-rr .gsd-av,.gsd .gsd-rskr .gsd-rska{width:28px;height:28px}
  .gsd .gsd-rsk{top:0}
  /* Playtables */
  /* the person with the found email under the name, and the AI score: the first line does not fit a phone */
  .gsd :is(.gsd-gh,.gsd-tr){grid-template-columns:minmax(0,1fr) 108px}
  .gsd :is(.gsd-gh,.gsd-tr)>.gsd-k5{display:none}
  .gsd :is(.gsd-gh,.gsd-tr)>.gsd-k4{border-right:0}
  .gsd .gsd-gh>span,.gsd .gsd-tr>span{padding:0 10px;gap:9px}
  .gsd .gsd-tr{height:54px}
  .gsd .gsd-tr .gsd-av{width:28px;height:28px}
  .gsd .gsd-fit{padding:0 8px 0 7px;font-size:11.5px}
  /* Workflows */
  .gsd .gsd-wf{padding:12px 8px;align-items:flex-start}
  .gsd .gsd-src small{display:none}
  .gsd .gsd-node{grid-template-columns:24px minmax(0,1fr);height:auto;min-height:46px;padding:7px 8px;gap:8px;border-radius:10px}
  .gsd .gsd-ni{width:24px;height:24px;border-radius:7px}
  .gsd .gsd-ni svg{width:14px;height:14px}
  .gsd .gsd-nt b{font-size:12px}
  .gsd .gsd-nt small{font-size:11px}
  .gsd .gsd-nc{grid-column:2;margin-top:-2px;font-size:10.5px}
  .gsd .gsd-go .gsd-nc:not(.gsd-on){display:none}
  .gsd .gsd-br .gsd-nt :is(b,small){white-space:normal}
  .gsd .gsd-go .gsd-wfp.gsd-started .gsd-br .gsd-nt small{display:none}
  .gsd .gsd-br{padding:0 4px}
  .gsd .gsd-bl{font-size:11px;padding:0 7px}
  .gsd .gsd-e-s{height:10px}
  /* AI SDR */
  .gsd .gsd-ph .gsd-meta{display:none}
  .gsd .gsd-ib{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .gsd .gsd-il{border-right:0;border-bottom:1px solid var(--gsd-line2);min-height:106px}
  .gsd .gsd-ilh{display:none}
  .gsd .gsd-il li{padding:8px 12px;row-gap:3px}
  .gsd .gsd-il li .gsd-av{width:26px;height:26px}
  .gsd .gsd-il li:nth-child(n+3),.gsd .gsd-sum{display:none}
  .gsd .gsd-setup{width:calc(100% - 24px);padding:12px 12px 4px}
  .gsd .gsd-setup dl>div{grid-template-columns:86px minmax(0,1fr) 16px;gap:8px;min-height:36px}
  .gsd .gsd-setup dd{font-size:12.5px}
  .gsd .gsd-thh{height:50px;padding:0 12px}
  .gsd .gsd-note,.gsd .gsd-out{display:none}
  .gsd .gsd-msgs{padding:10px 12px 12px;gap:8px}
  .gsd .gsd-in{max-width:100%}
  .gsd .gsd-in p,.gsd .gsd-dt{font-size:12.5px}
  .gsd .gsd-acts small{display:none}
  /* Signals */
  /* Signals: the card a little tighter, the backing as wide as the card (under the tile too), the bar's three verbs on
     one line in the 12.5 type */
  .gsd .gsd-feedw{padding:10px 10px 0}
  .gsd .gsd-fbar{padding:2px}
  .gsd .gsd-fb-nc{display:none}
  .gsd .gsd-fb{height:24px;padding:0 8px;font-size:12px}
  .gsd .gsd-story{padding:11px 12px 12px}
  .gsd .gsd-sth{grid-template-columns:32px minmax(0,1fr);gap:0 10px;align-items:start}
  .gsd .gsd-sth>.gsd-av{width:32px;height:32px}
  .gsd .gsd-nl{font-size:12px;line-height:18px}
  .gsd .gsd-nl b{line-height:18px}
  .gsd .gsd-nlr{max-width:100%}
  .gsd .gsd-se{grid-template-columns:32px minmax(0,1fr);gap:0 10px}
  .gsd .gsd-line{align-items:flex-start}
  .gsd .gsd-words{font-size:13.5px}
  .gsd .gsd-sopen{margin-left:-42px;padding-left:0}
  .gsd .gsd-ctx{font-size:12px}
  .gsd .gsd-sec{padding:10px 12px}
  .gsd .gsd-ptx{padding:10px 12px;font-size:13px}
  .gsd .gsd-cnt{padding:7px 12px;font-size:11.5px}
  .gsd .gsd-pbar{gap:4px;padding:4px}
  .gsd .gsd-pv{gap:5px;padding:0 4px;font-size:12.5px}
  .gsd .gsd-pv svg{width:15px;height:15px}
  .gsd .gsd-thread{padding:10px 12px 12px}
  .gsd .gsd-nl>i:nth-of-type(3),.gsd .gsd-nl .gsd-tbl{display:none}
  .gsd .gsd-pv:nth-child(3),.gsd .gsd-rep{display:none}
  .gsd .gsd-nest{margin-left:16px}
  .gsd .gsd-cmt{gap:7px}
  .gsd .gsd-cmt>.gsd-av,.gsd .gsd-ini-sm{width:26px;height:26px;font-size:10px}
  .gsd .gsd-bub{padding:7px 10px}
  .gsd .gsd-dft{padding:9px 10px}
  .gsd .gsd-vb{gap:5px}
  .gsd .gsd-vb .gsd-btn{padding:0 9px;font-size:12.5px}
  .gsd .gsd-bt,.gsd .gsd-sbd,.gsd .gsd-dftx{font-size:12.5px}
}

/* ---- the views (template-parts/demo.php): one piece of the window, the plan card, a still ----------------------------
   The figure carries gsd-v-<view>; gsd-solo for one pane of the app (the window's bar over that pane, no tabs, no
   Creator); gsd-still for a still and the plan (rendered once: nothing moves); gsd-fit for a still with rows= or part=
   and every still of the workflow (it takes its content's height); data-gsd-part for a slice. The full window carries
   none of them and none of this applies to it.
   Each piece's width is its own screen in a hero: the pane as the product draws it, nothing cramped, nothing empty. */
.gsd.gsd-v-search{max-width:1000px}
.gsd.gsd-v-table{max-width:1120px}
.gsd.gsd-v-workflow{max-width:900px}
.gsd.gsd-v-sdr{max-width:1040px}
.gsd.gsd-v-signals{max-width:960px}
.gsd.gsd-v-creator{max-width:560px}
.gsd.gsd-v-plan{max-width:400px}
/* a pane alone: the height it has in the full window (640 less the tabs' 60) */
.gsd.gsd-solo .gsd-panes{position:relative;height:580px}

/* A pane alone is as wide as the figure, while the full window's container queries above count Creator's column in.
   So a piece undoes what they take away while its pane still has the room: the table keeps its five columns from 876 px
   (1220 less Creator's 344) and its Company column from 796 (1100 less 304), and the header's meta line from 796. Under 600 a pane is the figure in both, so the phone rules hold as they are. */
@container gsd (min-width:796px){
  .gsd.gsd-solo :is(.gsd-gh,.gsd-tr){grid-template-columns:minmax(0,1.45fr) minmax(0,1.05fr) 108px minmax(0,1.9fr)}
  .gsd.gsd-solo :is(.gsd-gh,.gsd-tr)>.gsd-k2{display:flex}
  .gsd.gsd-solo .gsd-ph .gsd-meta{display:block}
}
@container gsd (min-width:876px){
  .gsd.gsd-solo :is(.gsd-gh,.gsd-tr){grid-template-columns:minmax(0,1.2fr) minmax(0,.95fr) minmax(0,1.45fr) 112px minmax(0,1.7fr)}
  .gsd.gsd-solo :is(.gsd-gh,.gsd-tr)>.gsd-k3{display:flex}
  .gsd.gsd-solo .gsd-gh .gsd-k1e,.gsd.gsd-solo .gsd-pe{display:none}
  .gsd.gsd-solo .gsd-tr .gsd-k1 small{display:block}
  .gsd.gsd-solo .gsd-go .gsd-tb.gsd-col-e .gsd-gh .gsd-k1{color:var(--gsd-mute);box-shadow:none}
}

/* AI Search alone in a narrow cell (a block's still, about 600 px): the Status column takes the room Person and Company
   can spare, so a row's reason ("Already in Q3 outbound", "On your stoplist, never contacted") reads whole; on a phone,
   where the row keeps Person and Status, a piece, live or still, lets the reason take a second line, so our copy is
   never cut (a live row keeps its 48 px, which two lines fit; a still's row grows a little round them). The pane's
   footer line splits evenly instead of leaving a word alone. */
@container gsd (min-width:600px) and (max-width:799px){
  .gsd.gsd-solo :is(.gsd-rh,.gsd-rr,.gsd-rskr){grid-template-columns:minmax(0,.9fr) minmax(0,.82fr) minmax(0,1.28fr)}
}
.gsd.gsd-solo .gsd-pf>span{text-wrap:balance}
@container gsd (max-width:599px){
  .gsd.gsd-solo .gsd-rs small{display:-webkit-box;white-space:normal;text-overflow:clip;line-height:1.2;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .gsd.gsd-still .gsd-rr{height:auto;min-height:48px}
  .gsd.gsd-still .gsd-rr>span{padding-top:6px;padding-bottom:6px}
  /* a still keeps its head row (Person and Status), so a marked column's ring has its top edge */
  .gsd.gsd-still .gsd-rh{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
  .gsd.gsd-still .gsd-rh>:nth-child(2){display:none}
  .gsd.gsd-still .gsd-rh>span{padding:0 10px}
  .gsd.gsd-still .gsd-rsk{top:32px}
}

/* the workflow's own wait, in a piece (the full window waits in Creator): the plan's ask colour, then Active */
.gsd .gsd-stat-ask{background:var(--gsd-em-soft);color:var(--gsd-em-ink)}
.gsd .gsd-stat-ask i{width:6px;height:6px;border-radius:50%;background:var(--gsd-em)}

/* Creator alone: the column as one calm panel, the plan card in the chat at every width (no compact row). The empty
   chat is the product's: the greeting in its middle (gs.front.app Greeting, the greet block centred), so the column
   never opens on a blank band between the greeting and the composer. Scrolled, the chat stands on a message's top
   edge (demo.js), so its fade is only the gap above it. */
.gsd.gsd-v-creator .gsd-cr{height:640px;border:0}
.gsd.gsd-v-creator .gsd-crh{height:60px}
.gsd.gsd-v-creator .gsd-chat{flex:1;height:auto}
.gsd.gsd-v-creator .gsd-plan{display:block}
/* the greeting centres on the chat the visitor sees (the messages still to come keep their room in the chat's list) */
.gsd.gsd-v-creator .gsd-chat-in{position:static}
.gsd.gsd-v-creator .gsd-greet{top:50%;left:28px;right:28px;translate:0 -50%;text-align:center}
.gsd.gsd-v-creator .gsd-gs{font-size:14px;text-wrap:balance}
.gsd.gsd-v-creator :is(.gsd-a p,.gsd-ut){text-wrap:pretty}
.gsd.gsd-v-creator .gsd-chat.gsd-scrolled{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 8px);mask-image:linear-gradient(180deg,transparent 0,#000 8px)}
.gsd.gsd-v-creator .gsd-box{margin:0 12px 12px}
.gsd:is(.gsd-v-creator,.gsd-v-plan) .gsd-ps{grid-template-columns:16px 15px minmax(0,1fr) auto}
.gsd:is(.gsd-v-creator,.gsd-v-plan) .gsd-psi{display:block}

/* the plan alone: the plan is the window's body, straight under its bar (one outline, one radius, one shadow: the
   window's), never a card inside the window; its head turns white so it never reads as a second bar */
.gsd.gsd-v-plan .gsd-plan{display:block;border:0;border-radius:0;box-shadow:none;background:var(--gsd-bg)}
.gsd.gsd-v-plan .gsd-plh{background:var(--gsd-bg)}

/* a still: its moment and nothing after it, no spinner turning, no dot pinging, no caret blinking */
.gsd.gsd-still *,.gsd.gsd-still *::before,.gsd.gsd-still *::after{animation:none !important;transition:none !important}
.gsd.gsd-still .gsd-ps{cursor:default}
/* a still's composer takes the lines of the words it holds (the part prints them at its moment, demo.js keeps them),
   so it has its size from the first paint */
.gsd.gsd-still .gsd-field{height:auto;min-height:42px;min-height:2lh;max-height:126px;max-height:6lh}
.gsd.gsd-still li:not([data-gsd-hl])>.gsd-ps:hover{background:none}
/* a still with rows= or part=: the pane takes its content's height, the list ends where its rows end; a slice that
   opens on the walk or on the rows has no field above it, so it starts at the pane's own padding */
.gsd.gsd-solo.gsd-fit .gsd-panes{height:auto}
.gsd.gsd-fit[data-gsd-part=walk] .gsd-prog,.gsd.gsd-fit[data-gsd-part=results] .gsd-res{margin-top:0}
.gsd.gsd-fit .gsd-pn{position:relative}
.gsd.gsd-fit :is(.gsd-pb,.gsd-grid){flex:none}
.gsd.gsd-fit .gsd-srch{padding-bottom:18px}
.gsd.gsd-fit .gsd-feedw{padding-bottom:14px;-webkit-mask-image:none;mask-image:none}
.gsd.gsd-fit .gsd-ev:last-child .gsd-story{margin-bottom:0}

/* a still is read as a picture beside the page's own words (a block's cell, about 600 px at 1440): from 420 px of pane
   AI Search and Playtables step their type up (the AI SDR in demo-sdr.css), so every label reads at 13 px or more;
   under 420 (a phone) nothing falls below 12. The rows grow with it, so nothing is cut. */
@container gsd (min-width:420px){
  .gsd.gsd-still.gsd-v-search :is(.gsd-lbl,.gsd-prog){font-size:13px}
  .gsd.gsd-still.gsd-v-search .gsd-desc{font-size:15px}
  .gsd.gsd-still.gsd-v-search .gsd-aih{font-size:13px;line-height:16px}
  .gsd.gsd-still.gsd-v-search .gsd-chip{height:32px;font-size:13px}
  .gsd.gsd-still.gsd-v-search .gsd-rh{height:36px;font-size:13px}
  .gsd.gsd-still.gsd-v-search .gsd-rr{height:auto;min-height:56px}
  .gsd.gsd-still.gsd-v-search .gsd-rsk{top:36px}
  .gsd.gsd-still.gsd-v-search .gsd-rskr{height:56px}
  .gsd.gsd-still.gsd-v-search :is(.gsd-c1,.gsd-c2) b,.gsd.gsd-still.gsd-v-search .gsd-rs b{font-size:13.5px}
  .gsd.gsd-still.gsd-v-search :is(.gsd-c1,.gsd-c2) small,.gsd.gsd-still.gsd-v-search .gsd-rs small{font-size:13px}
  .gsd.gsd-still.gsd-v-table .gsd-gh{height:38px}
  .gsd.gsd-still.gsd-v-table .gsd-gh>span{font-size:13px}
  .gsd.gsd-still.gsd-v-table .gsd-tr{height:62px}
  .gsd.gsd-still.gsd-v-table :is(.gsd-k1,.gsd-k2) b{font-size:13.5px}
  .gsd.gsd-still.gsd-v-table :is(.gsd-k1,.gsd-k2) small,.gsd.gsd-still.gsd-v-table :is(.gsd-em,.gsd-none),.gsd.gsd-still.gsd-v-table .gsd-pe :is(.gsd-em,.gsd-none),.gsd.gsd-still.gsd-v-table .gsd-ln{font-size:13px}
  .gsd.gsd-still.gsd-v-table .gsd-fit{height:26px;font-size:12.5px}
  .gsd.gsd-still.gsd-v-table .gsd-hl{height:24px;font-size:13px;line-height:24px}
}
/* at a block's 600 px the larger words still read whole on one line: AI Search's Status column and the table's Person
   column (the work email under each name) take a little more of the row */
@container gsd (min-width:600px) and (max-width:799px){
  .gsd.gsd-still.gsd-v-search :is(.gsd-rh,.gsd-rr,.gsd-rskr){grid-template-columns:minmax(0,.84fr) minmax(0,.74fr) minmax(0,1.42fr)}
}
@container gsd (min-width:600px) and (max-width:795px){
  .gsd.gsd-still.gsd-v-table :is(.gsd-gh,.gsd-tr){grid-template-columns:minmax(0,1.85fr) 116px minmax(0,1.65fr)}
}
@container gsd (min-width:420px) and (max-width:599px){
  .gsd.gsd-still.gsd-v-table :is(.gsd-gh,.gsd-tr){grid-template-columns:minmax(0,1fr) 116px}
}
@container gsd (max-width:419px){
  /* the page walk of a phone still: the page and the counts on one line, the bar under them at full width */
  .gsd.gsd-still .gsd-prog{grid-template-columns:auto auto;justify-content:space-between;row-gap:10px}
  .gsd.gsd-still .gsd-prog>.gsd-bar-t{grid-column:1/-1;grid-row:2}
  .gsd.gsd-still.gsd-v-search .gsd-rs small,.gsd.gsd-still.gsd-v-table :is(.gsd-fit,.gsd-hl){font-size:12px}
}

/* lit and mark: one step or one element in the product's primary, a tint and a ring, nothing loud */
.gsd{--gsd-hl:color-mix(in srgb,var(--gsd-ai) 55%,transparent);--gsd-hl-tint:color-mix(in srgb,var(--gsd-ai) 6%,transparent)}
.gsd li[data-gsd-hl]>.gsd-ps{background:var(--gsd-ai-soft);box-shadow:inset 0 0 0 1px var(--gsd-ai-line)}
.gsd li[data-gsd-hl] .gsd-psi{color:var(--gsd-ai)}
.gsd li[data-gsd-hl] .gsd-psn{font-weight:600}
.gsd li[data-gsd-hl] .gsd-psm{color:var(--gsd-ai-ink)}
/* an element: the ring over its own edge, the tint under its words */
:where(.gsd [data-gsd-hl]:not(li)){position:relative}
.gsd [data-gsd-hl]:not(li){isolation:isolate;outline:1.5px solid var(--gsd-hl);outline-offset:-1px}
.gsd [data-gsd-hl]:not(li)::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--gsd-hl-tint);pointer-events:none}
/* a line of words or a row of chips has no edge of its own: the ring stands a little off it */
.gsd :is(.gsd-aih,.gsd-chips,.gsd-a)[data-gsd-hl]{border-radius:10px;outline-offset:6px}
.gsd :is(.gsd-aih,.gsd-chips,.gsd-a)[data-gsd-hl]::before{inset:-6px;border-radius:16px}
/* the page walk: the ring is its own padded box, as wide as the field and the rows, so it stays inside the column */
.gsd .gsd-prog[data-gsd-hl]{padding:10px 12px;border-radius:12px}
/* filters: the "AI built the filters" line and its chips under one ring, drawn by the chips up over the line; the ring
   is as wide as the field above it and its words sit inside it as the field's do (--gsd-hl-up: the line's 26 px box and
   the column's gap) */
.gsd .gsd-aih[data-gsd-hl]{outline:0;isolation:auto;margin-top:4px;padding:10px 12px 0;line-height:16px}
.gsd .gsd-aih[data-gsd-hl]::before{content:none}
.gsd .gsd-chips[data-gsd-hl]{--gsd-hl-up:36px;outline:0;padding:0 12px 12px}
.gsd .gsd-chips[data-gsd-hl]::before{inset:calc(0px - var(--gsd-hl-up)) 0 0;border-radius:12px;box-shadow:inset 0 0 0 1.5px var(--gsd-hl)}
.gsd .gsd-stat[data-gsd-hl]{outline-offset:2px}
.gsd .gsd-stat[data-gsd-hl]::before{inset:-2px}
/* a column of a table or of the search's rows: each cell tinted, the ring drawn down its sides, over its head and
   under its last row */
.gsd :is(.gsd-gh,.gsd-tr,.gsd-rh,.gsd-rr)>[data-gsd-hl]{outline:0;isolation:auto;background-color:color-mix(in srgb,var(--gsd-ai) 5%,var(--gsd-bg));box-shadow:inset 1.5px 0 0 var(--gsd-hl),inset -1.5px 0 0 var(--gsd-hl)}
.gsd :is(.gsd-gh,.gsd-rh)>[data-gsd-hl]{box-shadow:inset 1.5px 0 0 var(--gsd-hl),inset -1.5px 0 0 var(--gsd-hl),inset 0 1.5px 0 var(--gsd-hl)}
.gsd :is(.gsd-tr,.gsd-rr):last-child>[data-gsd-hl]{box-shadow:inset 1.5px 0 0 var(--gsd-hl),inset -1.5px 0 0 var(--gsd-hl),inset 0 -1.5px 0 var(--gsd-hl)}
.gsd :is(.gsd-gh,.gsd-tr,.gsd-rh,.gsd-rr)>[data-gsd-hl]::before{content:none}
.gsd :is(.gsd-rh,.gsd-rr)>[data-gsd-hl]{align-self:stretch}
/* the work email under the name, where its column gives way: the line itself */
.gsd .gsd-pe[data-gsd-hl]{border-radius:6px;outline-offset:2px}
.gsd .gsd-pe[data-gsd-hl]::before{inset:-2px}

/* Creator and the plan alone are narrower than 600 px, where the full window's phone rules start: from 400 px up they
   keep the desktop window's frame and Creator's desktop type, so the panel reads as the column it is in the full window */
@container gsd (min-width:400px){
  .gsd:is(.gsd-v-creator,.gsd-v-plan) .gsd-win{border-radius:20px}
  .gsd:is(.gsd-v-creator,.gsd-v-plan) .gsd-bar{gap:10px;padding:0 10px 0 14px}
  .gsd.gsd-v-creator .gsd-crh{padding:0 16px}
  .gsd.gsd-v-creator .gsd-chat-in{padding:16px 14px 14px}
  .gsd.gsd-v-creator .gsd-u{max-width:92%;font-size:13.5px}
  .gsd.gsd-v-creator .gsd-a{font-size:13.5px}
}
/* the plan alone from 460 px of card (a product page draws it at 480, in its run block and on the night): the card
   steps up one size, so its rows read at 14 px beside the page's own type; under 460 it keeps the chat's size */
@container gsd (min-width:460px){
  .gsd.gsd-v-plan .gsd-plh{gap:9px;height:46px;padding:0 14px 0 11px}
  .gsd.gsd-v-plan .gsd-plmk{width:26px;height:26px}
  .gsd.gsd-v-plan .gsd-plh b{font-size:14.5px}
  .gsd.gsd-v-plan .gsd-pls{font-size:13.5px}
  .gsd.gsd-v-plan .gsd-plc{font-size:12.5px}
  .gsd.gsd-v-plan .gsd-plt{padding:13px 15px 4px}
  .gsd.gsd-v-plan .gsd-plt b{font-size:14px}
  .gsd.gsd-v-plan .gsd-plt span{font-size:13px}
  .gsd.gsd-v-plan ol.gsd-steps{padding:4px 6px 8px}
  .gsd.gsd-v-plan .gsd-ps{grid-template-columns:17px 16px minmax(0,1fr) auto;gap:10px;height:36px;padding:0 10px}
  .gsd.gsd-v-plan .gsd-st{width:17px;height:17px}
  .gsd.gsd-v-plan .gsd-psi{width:16px;height:16px}
  .gsd.gsd-v-plan .gsd-psn{font-size:14px}
  .gsd.gsd-v-plan .gsd-psm{font-size:13px}
  .gsd.gsd-v-plan .gsd-plf{gap:9px;height:44px;padding:0 15px;font-size:14px}
  .gsd.gsd-v-plan .gsd-plf-i{width:15px;height:15px}
}
/* a lit step keeps its tint while it runs or waits for you (a plan still in the middle of the run) */
.gsd .gsd-go .gsd-steps li[data-gsd-hl]:is(.gsd-run,.gsd-ask) .gsd-ps{background:var(--gsd-ai-soft)}
/* phones: a pane alone is a little taller than on a desktop, so AI Search's wrapped description and chips still leave
   its last row in view; Creator alone a little shorter */
@container gsd (max-width:599px){
  .gsd.gsd-solo .gsd-panes{height:620px}
  .gsd .gsd-chips[data-gsd-hl]{--gsd-hl-up:34px}
}
@container gsd (max-width:419px){
  .gsd.gsd-v-creator .gsd-cr{height:600px}
}

/* ---- a loop that comes back in: a piece's finished screen dissolves into its first frame (demo.js dissolve): a still
   copy of the pane, or of Creator's chat, lies over the new loop at the same place, on the window's own ground, and
   fades out; nothing inside it moves ------------------------------------------------------------------------------ */
.gsd .gsd-ghost{position:absolute;z-index:3;margin:0;background:var(--gsd-bg);pointer-events:none;animation:gsd-ghost .9s ease-in-out both !important;animation-play-state:running !important}
/* the copy is never in the flow, whatever a piece's own rules give the body it copies (a pane alone is position:
   relative), so the window keeps one size through the seam; its content stays inside its box */
.gsd .gsd-win>.gsd-ghost{position:absolute !important;margin:0 !important;overflow:hidden;contain:layout paint}
.gsd .gsd-ghost *,.gsd .gsd-ghost *::before,.gsd .gsd-ghost *::after{animation:none !important;transition:none !important}
@keyframes gsd-ghost{from{opacity:1}to{opacity:0}}
/* until its script starts the clock, a live piece shows its window and bar, not the finished run the markup holds, so a
   page that paints before the script runs never shows the loop's end and then its first frame; should the script never
   run, the finished run shows after a moment (reduced motion keeps the markup's finished piece from the start) */
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  .gsd[data-gsd-view]:not(.gsd-still) .gsd-win:not(.gsd-go) :is(.gsd-panes,.gsd-chat){opacity:0;animation:gsd-late 0s linear 2.5s forwards}
  /* the first frame comes in once, a fade with no movement, when the clock starts; nothing restarts it (not the seam,
     not a pause) */
  .gsd[data-gsd-view]:not(.gsd-still) .gsd-win.gsd-go>.gsd-panes,
  .gsd[data-gsd-view]:not(.gsd-still) .gsd-win.gsd-go .gsd-cr>.gsd-chat{animation:gsd-show .45s ease-out both}
  .gsd[data-gsd-view] .gsd-paused>.gsd-panes,.gsd[data-gsd-view] .gsd-paused .gsd-cr>.gsd-chat{animation-play-state:running !important}
  /* the calm full window (a product page's hero) the same way: until the clock starts, its chat and panes are not the
     finished run, so the first frame never replaces the run's end on screen */
  .gsd[data-gsd-calm] .gsd-win:not(.gsd-go) :is(.gsd-panes,.gsd-cr>.gsd-chat){opacity:0;animation:gsd-late 0s linear 2.5s forwards}
  .gsd[data-gsd-calm] .gsd-win.gsd-go :is(.gsd-panes,.gsd-cr>.gsd-chat){animation:gsd-show .45s ease-out both}
  .gsd[data-gsd-calm] .gsd-paused :is(.gsd-panes,.gsd-cr>.gsd-chat){animation-play-state:running !important}
}
@keyframes gsd-late{to{opacity:1}}
@keyframes gsd-show{from{opacity:0}}
/* a piece has no tabs, so its pane never plays the full window's tab entrance (which a jump would restart: the pane
   rose 4 px at every seam) */
.gsd[data-gsd-view] .gsd-go .gsd-pn{animation:none}

/* ---- Creator, a step up: from 480 px of column (the hero's piece at 560, a block's still) Creator's type steps up one
   size, as the stills of the other pieces do, so the column reads beside the page's own words; the plan card in its
   chat with it. Under 480 (a phone) it keeps the window's own sizes. --------------------------------------------- */
@container gsd (min-width:480px){
  .gsd.gsd-v-creator .gsd-cr{height:660px}
  .gsd.gsd-v-creator .gsd-crh{gap:13px;height:64px;padding:0 18px}
  .gsd.gsd-v-creator .gsd-vd{width:38px;height:38px}
  .gsd.gsd-v-creator .gsd-crt b{font-size:16px}
  .gsd.gsd-v-creator .gsd-crt small{font-size:13.5px}
  .gsd.gsd-v-creator .gsd-chat-in{padding:18px 18px 16px}
  .gsd.gsd-v-creator .gsd-gt{font-size:20px}
  .gsd.gsd-v-creator .gsd-gs{margin-top:8px;font-size:15px}
  .gsd.gsd-v-creator .gsd-u{padding:9px 13px 10px;font-size:14.5px}
  .gsd.gsd-v-creator .gsd-by{gap:6px;margin-bottom:4px;font-size:12px}
  .gsd.gsd-v-creator .gsd-by svg{width:14px;height:14px}
  .gsd.gsd-v-creator .gsd-a{grid-template-columns:24px minmax(0,1fr);font-size:14.5px}
  .gsd.gsd-v-creator .gsd-mk{width:24px;height:24px}
  .gsd.gsd-v-creator .gsd-plh{height:42px;padding:0 13px 0 10px}
  .gsd.gsd-v-creator .gsd-plh b{font-size:14.5px}
  .gsd.gsd-v-creator .gsd-pls{font-size:13px}
  .gsd.gsd-v-creator .gsd-plc{font-size:12.5px}
  .gsd.gsd-v-creator .gsd-plt{padding:10px 14px 3px}
  .gsd.gsd-v-creator .gsd-plt b{font-size:13.5px}
  .gsd.gsd-v-creator .gsd-plt span{font-size:13px}
  .gsd.gsd-v-creator ol.gsd-steps{padding:3px 6px 6px}
  .gsd.gsd-v-creator .gsd-ps{grid-template-columns:17px 16px minmax(0,1fr) auto;gap:10px;height:32px;padding:0 9px}
  .gsd.gsd-v-creator .gsd-st{width:17px;height:17px}
  .gsd.gsd-v-creator .gsd-psi{width:16px;height:16px}
  .gsd.gsd-v-creator .gsd-psn{font-size:14px}
  .gsd.gsd-v-creator .gsd-psm{font-size:13px}
  .gsd.gsd-v-creator .gsd-plf{height:40px;padding:0 14px;font-size:13.5px}
  .gsd.gsd-v-creator .gsd-box{margin:0 14px 14px}
  .gsd.gsd-v-creator :is(.gsd-field,.gsd-hint){font-size:14.5px}
}

/* ---- Creator in a hero: live and from 1024 px of screen the piece stands landscape like its siblings (880 wide, as
   tall as a pane alone), its chat and composer one 600 px column in the middle, as a chat app lays out a wide window;
   under 1024, and every still, it keeps its 440 to 560 px column ------------------------------------------------- */
@media (min-width:1024px){
  .gsd.gsd-v-creator:not(.gsd-still){max-width:880px}
}
@container gsd (min-width:700px){
  .gsd.gsd-v-creator .gsd-cr{height:580px}
  .gsd.gsd-v-creator .gsd-chat-in{max-width:600px;margin:0 auto}
  .gsd.gsd-v-creator .gsd-box{width:calc(100% - 28px);max-width:600px;margin:0 auto 14px}
}

/* ---- a still stops every motion on a frame that reads as a state, never as a motion cut in half: a running step and
   the plan's status line wear a whole ring in the primary (the run's own colour), and the voice that records holds one
   width of its halo ------------------------------------------------------------------------ */
.gsd.gsd-still .gsd-go .gsd-steps li.gsd-run .gsd-st::after{border-color:var(--gsd-ai)}
.gsd.gsd-still .gsd-go:not(.gsd-plan-done):not(.gsd-plan-idle):not(.gsd-plan-ask) .gsd-plf-i{border-color:var(--gsd-ai)}

/* ---- the slices (part=, template-parts/demo-*.php): one point of a piece under the window's bar and the piece's own
   header, at its natural size (the figure carries gsd-fit, so it takes its content's height) -------------------------- */

/* Creator: the column as tall as the slice; composer under the header with its own margin; ask (the question and the
   spoken yes) in the chat's own padding */
.gsd.gsd-v-creator.gsd-fit .gsd-cr{height:auto}
.gsd.gsd-v-creator.gsd-fit .gsd-chat{flex:none}
.gsd.gsd-v-creator[data-gsd-part=composer] .gsd-box{margin-top:14px}

/* the plan alone with a step lit while the run waits for you: the lit row and the status line say it, so the head's own
   "Waits for you" stands down (one wait in the card, not three) */
.gsd.gsd-v-plan.gsd-still .gsd-plan.gsd-ask:has(li[data-gsd-hl]) .gsd-pls{visibility:hidden}

/* Playtables: the Person column (the name and the title) and the one column the block is about, no email under the
   name; the first line takes the room it needs, never cut, at every width. The AI score is a short column, so its
   slice is a narrow card at its content's width (the email and the first line take the stage's) */
.gsd.gsd-still.gsd-v-table[data-gsd-part=fit]{max-width:440px}
.gsd.gsd-still.gsd-v-table[data-gsd-part] :is(.gsd-gh,.gsd-tr){grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.gsd.gsd-still.gsd-v-table[data-gsd-part=fit] :is(.gsd-gh,.gsd-tr){grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.gsd.gsd-still.gsd-v-table[data-gsd-part=line] :is(.gsd-gh,.gsd-tr){grid-template-columns:minmax(0,.8fr) minmax(0,1.45fr)}
.gsd.gsd-still.gsd-v-table[data-gsd-part] :is(.gsd-gh,.gsd-tr)>:is(.gsd-k3,.gsd-k4,.gsd-k5){display:flex;border-right:0}
.gsd.gsd-still.gsd-v-table[data-gsd-part] .gsd-tr .gsd-k1 small{display:block}
.gsd.gsd-still.gsd-v-table[data-gsd-part] .gsd-tr{height:56px}
.gsd.gsd-still.gsd-v-table[data-gsd-part=line] .gsd-tr{height:auto;min-height:56px}
.gsd.gsd-still.gsd-v-table[data-gsd-part=line] .gsd-tr>span{padding-top:10px;padding-bottom:10px}
.gsd.gsd-still.gsd-v-table[data-gsd-part=line] .gsd-ln{-webkit-line-clamp:6}

/* Workflows (the piece's tree, its slices and marks are assets/css/demo-workflow.css): a still's canvas, and the steps
   slice's header names the sender profile every step goes out from, where the pane has the room */
.gsd.gsd-v-workflow.gsd-fit .gsd-wf{padding:20px 18px 22px}
@container gsd (min-width:600px){
  .gsd.gsd-v-workflow[data-gsd-part=steps] .gsd-ph .gsd-meta{display:block}
}

/* status: each reply's status, ringed where it sits */
.gsd .gsd-sc[data-gsd-hl]{outline-offset:2px}
.gsd .gsd-sc[data-gsd-hl]::before{inset:-2px}

/* Signals: a marked play wears the same ring as a marked event, inside the waiting card's amber outline too; the
   event's own line and context, ringed; the event's words split evenly in a still */
.gsd .gsd-seb[data-gsd-hl]{border-radius:10px;outline-offset:6px}
.gsd .gsd-seb[data-gsd-hl]::before{inset:-6px;border-radius:14px}
.gsd.gsd-still .gsd-words{text-wrap:pretty}
.gsd.gsd-still .gsd-vb{gap:6px 5px}
.gsd.gsd-still .gsd-vb .gsd-btn{padding:0 10px}
/* the name line of a card narrower than the full window's: the stage closes it and the table gives way (the workflow
   chip under the name, or the job change's own line, names the table), so no separator is left at a line's end */
@container gsd (max-width:799px){
  .gsd.gsd-v-signals .gsd-nl>i:nth-of-type(3),.gsd.gsd-v-signals .gsd-nl .gsd-tbl{display:none}
}
/* a play's words and its heading never leave one word alone on a line ("11:05.", "you") */
.gsd.gsd-v-signals :is(.gsd-sbd,.gsd-hd>span){text-wrap:pretty}

/* ---- the stills' step up, the pieces not covered above (Workflows, Signals): from 420 px of pane every label reads at
   13 px or more, the rows grow with it, nothing is cut -------------------------------------------------------------- */
@container gsd (min-width:420px){
  .gsd.gsd-still .gsd-ph .gsd-n{padding:4px 8px;font-size:12.5px}
  .gsd.gsd-still .gsd-ph .gsd-gb{height:28px;font-size:13px;line-height:26px}
  .gsd.gsd-still .gsd-ph .gsd-stat{height:26px;font-size:13px}
  .gsd.gsd-still.gsd-v-workflow .gsd-src{height:36px;font-size:13px}
  .gsd.gsd-still.gsd-v-workflow .gsd-end{font-size:13px}
  .gsd.gsd-still.gsd-v-signals .gsd-nl{font-size:13px}
  .gsd.gsd-still.gsd-v-signals .gsd-nl b,.gsd.gsd-still.gsd-v-signals .gsd-words{font-size:14.5px}
  .gsd.gsd-still.gsd-v-signals .gsd-wc{font-size:12.5px}
  .gsd.gsd-still.gsd-v-signals .gsd-wcs{height:18px;font-size:12px;line-height:18px}
  .gsd.gsd-still.gsd-v-signals .gsd-tm{font-size:12.5px}
  .gsd.gsd-still.gsd-v-signals :is(.gsd-ctx,.gsd-hd,.gsd-bare,.gsd-lk,.gsd-fb){font-size:13px}
  .gsd.gsd-still.gsd-v-signals .gsd-fbn{font-size:12.5px}
  .gsd.gsd-still.gsd-v-signals :is(.gsd-sbd,.gsd-ptx,.gsd-bt){font-size:13.5px}
  .gsd.gsd-still.gsd-v-signals .gsd-bh span{font-size:12.5px}
  .gsd.gsd-still.gsd-v-signals .gsd-bh time{font-size:12px}
}
/* a block's still of a card: the backing under the event runs the card's width, as on a phone, so a play's three
   answers sit on one row */
@container gsd (min-width:420px) and (max-width:799px){
  .gsd.gsd-still.gsd-v-signals .gsd-react>.gsd-eb{max-width:none;margin-left:-70px}
}

/* ---- phones: the pieces and the stills (the full window keeps its own phone rules above) ----------------------------- */
@container gsd (max-width:599px){
  /* Playtables, live: the pane as tall as its rows, each with the work email under the name and the pipeline stage
     beside it (demo-table.css), so the phone's hero holds on the email it promises and moves through the whole loop */
  .gsd.gsd-v-table:not(.gsd-still) .gsd-panes{height:auto}
  .gsd.gsd-v-table:not(.gsd-still) .gsd-pn{position:relative}
  .gsd.gsd-v-table:not(.gsd-still) .gsd-grid{flex:none}
  /* its footer is the table's range alone (the full window's line is not printed), so the range stays */
  .gsd.gsd-v-table .gsd-pf>.gsd-rng{display:block}
  /* Playtables, a slice: the name alone in the Person column where the one column needs the room */
  .gsd.gsd-still.gsd-v-table:is([data-gsd-part=email],[data-gsd-part=line]) :is(.gsd-gh,.gsd-tr){grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}
  .gsd.gsd-still.gsd-v-table:is([data-gsd-part=email],[data-gsd-part=line]) .gsd-tr .gsd-k1 small{display:none}
  .gsd.gsd-still.gsd-v-table[data-gsd-part=fit] :is(.gsd-gh,.gsd-tr){grid-template-columns:minmax(0,1fr) 116px}
  .gsd.gsd-still.gsd-v-table[data-gsd-part=line] .gsd-tr{min-height:54px}
  .gsd.gsd-still.gsd-v-table[data-gsd-part=line] .gsd-tr>span{padding-top:9px;padding-bottom:9px}
  /* Workflows, live or still: the header lets its status take a line of its own rather than cut the title */
  .gsd.gsd-v-workflow .gsd-ph{flex-wrap:wrap;height:auto;min-height:46px;padding-top:9px;padding-bottom:9px;row-gap:7px}
  .gsd.gsd-v-workflow .gsd-ph .gsd-pt{flex:1 0 auto;max-width:100%}
  /* Signals: a still of the job change keeps the count of what nothing covers (Needs me gives way instead) */
  .gsd.gsd-still.gsd-v-signals[data-gsd-part=job] .gsd-fb-nc{display:inline-flex}
  .gsd.gsd-still.gsd-v-signals[data-gsd-part=job] .gsd-fb:first-child{display:none}
}
@container gsd (max-width:419px){
  .gsd.gsd-still.gsd-v-signals .gsd-wcs{font-size:11px}
  .gsd.gsd-still .gsd-words{text-wrap:balance}
  /* a phone's still keeps every word (12 px at the least): a workflow chip (in the live piece too) and a comment's
     byline take a second line rather than an ellipsis (the workflow's branch labels: assets/css/demo-workflow.css) */
  .gsd.gsd-v-signals .gsd-wc{flex-wrap:wrap;height:auto;min-height:22px;padding:2px 8px 2px 6px;border-radius:11px;row-gap:0}
  .gsd.gsd-v-signals .gsd-wc>span:not(.gsd-wcs){white-space:normal}
  .gsd.gsd-still.gsd-v-signals .gsd-bh{flex-wrap:wrap}
  .gsd.gsd-still.gsd-v-signals .gsd-bh span{white-space:normal}
}
@container gsd (max-width:599px){
  /* a phone's card runs the event's context and backing under the tile (the phone rules above), so the event's ring
     takes the tile in too */
  .gsd .gsd-seb[data-gsd-hl]{outline:0}
  .gsd .gsd-seb[data-gsd-hl]::before{inset:-6px -6px -6px -48px;box-shadow:inset 0 0 0 1.5px var(--gsd-hl)}
}