/* "AI speed. Human craft." — under the gallery, the Generate page itself
   making an Instagram post. A faithful copy of the workspace's Generate view
   in dark theme (apps/web/src/editor/styles/generate-theme.css, styles/generate.css,
   styles/rail.css, styles/workspace-pages.css), then the dark Studio; the whole
   flow is dark, browser window included. Drawn at the app's own pixel sizes on a fixed virtual
   screen and scaled to fit (generate-demo.js sets --gm-k). The timeline in
   generate-demo.js drives the phases through data attributes. */

.gm-shell { margin-top: 64px; }
/* a colourful stage in the brand's lilac, aqua, lime and pink, its colours
   drifting slowly behind a dark Mac-style browser window that holds the app */
.gm-wrap {
  position: relative; isolation: isolate; overflow: hidden; padding: clamp(16px, 3.6vw, 52px);
  border-radius: var(--radius-surface, 8px); background: #ece6fb;
}
.gm-wrap::before {
  content: ""; position: absolute; inset: -25%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 46% at 16% 18%, #c9baff 0, #c9baff00 70%),
    radial-gradient(34% 42% at 86% 14%, #8fe3f6 0, #8fe3f600 70%),
    radial-gradient(40% 46% at 84% 86%, #dfef9a 0, #dfef9a00 70%),
    radial-gradient(36% 44% at 18% 84%, #ffc2df 0, #ffc2df00 70%),
    radial-gradient(30% 36% at 52% 50%, #f5f1ff 0, #f5f1ff00 70%);
  animation: gm-drift 26s ease-in-out infinite alternate;
}
@keyframes gm-drift { to { transform: translate(3%, -2%) rotate(7deg) scale(1.05); } }
.gm-wrap.is-paused::before { animation-play-state: paused; }
.gm-browser {
  overflow: hidden; border-radius: 8px; background: #201c26;
  box-shadow: 0 46px 90px -40px #2b1f4d99, 0 18px 36px -24px #2b1f4d59, 0 0 0 1px #0e0c13, inset 0 1px 0 #ffffff14;
}
/* Safari's toolbar in dark mode: traffic lights, sidebar and history, the address field, share / new tab / tabs */
.gm-bar { display: grid; grid-template-columns: 1fr minmax(0, 460px) 1fr; align-items: center; gap: 16px; height: 52px; padding: 0 16px; border-bottom: 1px solid #0e0c13; color: #8f8998; }
.gm-bar svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.gm-lights { display: flex; gap: 8px; grid-column: 1; grid-row: 1; }
.gm-lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px #0000002e; }
.gm-lights i:nth-child(2) { background: #febc2e; } .gm-lights i:nth-child(3) { background: #28c840; }
.gm-nav { display: flex; align-items: center; gap: 14px; grid-column: 1; grid-row: 1; margin-left: 84px; }
.gm-nav .is-off { opacity: .4; }
.gm-url {
  position: relative; grid-column: 2; display: flex; align-items: center; justify-content: center; gap: 6px; height: 32px;
  border-radius: 8px; background: #302b38; color: #f4f3f6; font: 500 13px/1 Inter, Arial, sans-serif; letter-spacing: 0;
}
.gm-url .gm-lock { width: 12px; height: 12px; stroke-width: 2; color: #ada7b5; }
.gm-url .gm-reload { position: absolute; right: 10px; width: 14px; height: 14px; }
.gm-side { display: flex; justify-content: flex-end; gap: 16px; grid-column: 3; }
.gm-demo {
  --gm-w: 1600px; --gm-h: 900px;
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #19151f;
}
.gm-demo[data-gm-size="narrow"] { --gm-w: 420px; --gm-h: 780px; aspect-ratio: 420 / 780; }
.gm-scale { position: absolute; left: 0; top: 0; width: var(--gm-w); height: var(--gm-h); transform: scale(var(--gm-k, 1)); transform-origin: 0 0; }
/* under the window: the caption, centred, and the sign-up call to action */
.gm-foot { display: flex; flex-direction: column; align-items: center; gap: 22px; margin-top: 26px; text-align: center; }
.gm-caption { max-width: 560px; font-size: 14px; line-height: 1.65; color: var(--muted); }

/* ── the workspace, dark theme tokens (workspace-pages.css, generate-theme.css,
   studio-theme.css, workspace-header.css): Generate's quieter secondary copy,
   the lilac prompt bubble, the lime Edit in Studio and the inverted tooltip */
.gm-app {
  --paper: #19151f; --wash: #201c26; --ink: #f4f3f6; --muted: #ada7b5; --line: #302b38;
  --lilac: #302b40; --active: #40354f; --bubble: #302b40; --focus: #c9baff; --canvas: #2f2b36; --dot: #4a4553;
  --gold: #ffce4d; --gold-ink: #ffdc70; --lime: #e4efbb; --dark: #25212c; --primary: #e4efbb; --primary-ink: #25212c; --tip-bg: #faf9fc; --tip-ink: #0e0c13;
  position: absolute; inset: 0; display: grid; grid-template-columns: 72px 360px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  overflow: hidden; background: var(--paper); color: var(--ink);
  font: 400 14px/1.5 Inter, Arial, sans-serif; letter-spacing: 0; text-align: left;
  -webkit-font-smoothing: antialiased;
}
.gm-app * { box-sizing: border-box; }
/* the camera (generate-demo.js) zooms the whole screen in Studio, from its corner */
.gm-app { transform-origin: 0 0; }
.gm-ic { display: block; flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Rail (components/Rail.tsx, collapsed) */
.gm-rail { grid-column: 1; display: flex; flex-direction: column; gap: 5px; padding: 20px 12px 14px; background: var(--wash); border-right: 1px solid var(--line); overflow: hidden; }
.gm-logo { display: flex; justify-content: center; align-items: center; height: 46px; margin: 0 0 10px; }
.gm-logo img { width: 46px; height: 46px; border-radius: 13px; }
.gm-rail-btn { display: flex; align-items: center; justify-content: center; height: 44px; flex: none; border-radius: 10px; color: var(--muted); }
.gm-rail-btn .gm-ic { width: 21px; height: 21px; }
.gm-rail-btn.is-on { background: var(--active); color: var(--ink); }
.gm-rail-toggle .gm-ic { width: 19px; height: 19px; }
.gm-rail-sep { display: block; flex: none; height: 1px; margin: 11px 13px; background: color-mix(in srgb, var(--ink) 20%, var(--wash)); }
.gm-rail-spacer { display: block; flex: 1; min-height: 28px; }
.gm-tabs { display: none; }

/* Left panel: header, thread, composer */
.gm-left { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: var(--paper); }
.gm-left-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 18px 18px 12px; border-bottom: 1px solid var(--line); }
.gm-back { display: grid; place-items: center; width: 32px; height: 32px; flex: none; color: var(--muted); }
.gm-back .gm-ic, .gm-new .gm-ic { width: 17px; height: 17px; }
.gm-heading { flex: 1; min-width: 0; }
.gm-heading b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 14px/1.35 Garet, Inter, sans-serif; letter-spacing: -.04em; }
.gm-heading span { display: block; margin-top: 3px; font-size: 11px; line-height: 1.4; color: var(--muted); white-space: nowrap; }
.gm-new { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 32px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 500; }
.gm-thread { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 28px; padding: 12px 18px 24px; overflow: hidden; }
.gm-msg { display: flex; flex-direction: column; gap: 10px; min-width: 0; max-width: 100%; }
.gm-user { align-self: flex-end; align-items: flex-end; max-width: 94%; }
.gm-assistant { align-self: flex-start; align-items: flex-start; width: 100%; }
.gm-bubble { padding: 12px 15px; border-radius: 16px 16px 5px 16px; background: var(--bubble); font-size: 13px; line-height: 1.75; white-space: pre-wrap; }
.gm-reply { margin: 0; font-size: 13px; line-height: 1.8; color: var(--ink); }
.gm-work { width: 100%; margin: 2px 0 4px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.gm-work-status { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 6px; color: var(--ink); }
.gm-work-status .gm-ic { width: 15px; height: 15px; margin-top: 3px; animation: gm-pulse 1.8s ease-in-out infinite; }
.gm-details { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 0; }
.gm-details > .gm-ic { width: 15px; height: 15px; }
.gm-details .gm-chev { width: 12px; height: 12px; }
.gm-meta { font-size: 11px; }
.gm-meta::before { content: "·"; margin-right: 8px; }
.gm-credits { display: flex; align-items: flex-start; gap: 8px; margin-top: 5px; font-size: 11px; line-height: 1.6; }
.gm-credits .gm-ic { width: 13px; height: 13px; margin-top: 2px; }
.gm-result { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--wash); color: var(--ink); font-size: 12px; font-weight: 500; line-height: 1.4; white-space: nowrap; }
.gm-result .gm-ic { width: 14px; height: 14px; color: var(--muted); }
.gm-gen { display: flex; gap: 10px; align-items: center; padding: 12px 0; }
.gm-gen-mark { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 10px; background: var(--lilac); color: var(--ink); }
.gm-gen-mark .gm-ic { width: 17px; height: 17px; }
.gm-gen > div { font-size: 12px; line-height: 1.6; }
.gm-dots { display: flex; align-items: center; gap: 3px; height: 12px; margin-top: 4px; }
.gm-dots i { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); animation: gm-breathe 1.6s ease-in-out infinite; }
.gm-dots i:nth-child(2) { animation-delay: .15s; }.gm-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes gm-breathe { 0%, 75%, 100% { opacity: .3; } 35% { opacity: 1; } }
@keyframes gm-pulse { 50% { opacity: .4; } }

/* the compact composer, and round it the app's border beam in dark theme:
   PromptBeam.tsx's BorderBeam (border-beam: size md, colorful, glowSize 1.05,
   brightness 1.4, saturation 1.6, 6s, static colours, radius 19), its generated
   CSS ported rule for rule. A turning conic mask lets the colour blobs round the
   edge through as a 1px stroke with a white highlight (::after), a soft inner glow
   of the same colours (::before) and a blurred bloom (.gm-beam); they fade in
   once, and the app's hidden line stays hidden. Insets are -1px because here the
   card itself carries the border, where the app's beam wraps the card. */
.gm-composer { position: relative; flex: none; margin: 0 12px 16px; padding: 12px; border: 1px solid var(--line); border-radius: 19px; background: var(--paper); box-shadow: 0 5px 20px -14px #30213915; }
@property --gm-beam-angle { syntax: "<angle>"; initial-value: 0deg; inherits: true; }
@property --gm-beam-on { syntax: "<number>"; initial-value: 0; inherits: true; }
.gm-composer { animation: gm-beam-spin 6s linear infinite, gm-beam-in .6s ease forwards; }
.gm-wrap.is-paused .gm-composer { animation-play-state: paused; }
.gm-composer::after {
  content: ""; position: absolute; inset: -1px; z-index: 2; border-radius: 18px; padding: 1px; clip-path: inset(0 round 19px); pointer-events: none;
  background: conic-gradient(from var(--gm-beam-angle), transparent 0%, transparent 54%, rgba(255, 255, 255, .1) 57%, rgba(255, 255, 255, .3) 60%,
      rgba(255, 255, 255, .6) 63%, rgba(255, 255, 255, .75) 66%, rgba(255, 255, 255, .6) 69%, rgba(255, 255, 255, .3) 72%, rgba(255, 255, 255, .1) 75%,
      transparent 78%, transparent 100%),
    radial-gradient(ellipse 70px 40px at 33% -7.4%, rgb(255, 50, 100), transparent),
    radial-gradient(ellipse 60px 35px at 12% -5%, rgb(40, 140, 255), transparent),
    radial-gradient(ellipse 40px 70px at 2.1% 68.3%, rgb(50, 200, 80), transparent),
    radial-gradient(ellipse 20px 35px at 2.1% 68.3%, rgb(30, 185, 170), transparent),
    radial-gradient(ellipse 180px 32px at 74.4% 100%, rgb(100, 70, 255), transparent),
    radial-gradient(ellipse 85px 26px at 55% 100%, rgb(40, 140, 255), transparent),
    radial-gradient(ellipse 74px 32px at 93.9% 0%, rgb(255, 120, 40), transparent),
    radial-gradient(ellipse 26px 42px at 100% 27.1%, rgb(240, 50, 180), transparent),
    radial-gradient(ellipse 52px 48px at 100% 27.1%, rgb(180, 40, 240), transparent);
  -webkit-mask: conic-gradient(from var(--gm-beam-angle), transparent 0%, transparent 30%, rgba(255, 255, 255, .1) 36%, rgba(255, 255, 255, .35) 44%,
      white 52%, white 80%, rgba(255, 255, 255, .35) 86%, rgba(255, 255, 255, .1) 92%, transparent 95%, transparent 100%),
    linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: source-in, xor;
  mask: conic-gradient(from var(--gm-beam-angle), transparent 0%, transparent 30%, rgba(255, 255, 255, .1) 36%, rgba(255, 255, 255, .35) 44%,
      white 52%, white 80%, rgba(255, 255, 255, .35) 86%, rgba(255, 255, 255, .1) 92%, transparent 95%, transparent 100%),
    linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: intersect, exclude;
  opacity: calc(var(--gm-beam-on) * .26);
}
.gm-composer::before {
  content: ""; position: absolute; inset: -1px; z-index: 1; border-radius: 19px; clip-path: inset(0 round 19px); pointer-events: none;
  background: radial-gradient(ellipse 63px 36px at 33% -7.4%, rgba(255, 50, 100, .45), transparent),
    radial-gradient(ellipse 54px 32px at 12% -5%, rgba(40, 140, 255, .45), transparent),
    radial-gradient(ellipse 36px 63px at 2.1% 68.3%, rgba(50, 200, 80, .45), transparent),
    radial-gradient(ellipse 18px 32px at 2.1% 68.3%, rgba(30, 185, 170, .45), transparent),
    radial-gradient(ellipse 162px 29px at 74.4% 100%, rgba(100, 70, 255, .45), transparent),
    radial-gradient(ellipse 77px 23px at 55% 100%, rgba(40, 140, 255, .45), transparent),
    radial-gradient(ellipse 67px 29px at 93.9% 0%, rgba(255, 120, 40, .45), transparent),
    radial-gradient(ellipse 23px 38px at 100% 27.1%, rgba(240, 50, 180, .45), transparent),
    radial-gradient(ellipse 47px 43px at 100% 27.1%, rgba(180, 40, 240, .45), transparent);
  box-shadow: inset 0 0 9px 1px rgba(255, 255, 255, .27);
  -webkit-mask-image: conic-gradient(from var(--gm-beam-angle), transparent 0%, transparent 30%, rgba(255, 255, 255, .1) 36%, rgba(255, 255, 255, .35) 44%,
      white 52%, white 80%, rgba(255, 255, 255, .35) 86%, rgba(255, 255, 255, .1) 92%, transparent 95%, transparent 100%),
    linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white),
    linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white);
  -webkit-mask-composite: source-in, source-over;
  mask-image: conic-gradient(from var(--gm-beam-angle), transparent 0%, transparent 30%, rgba(255, 255, 255, .1) 36%, rgba(255, 255, 255, .35) 44%,
      white 52%, white 80%, rgba(255, 255, 255, .35) 86%, rgba(255, 255, 255, .1) 92%, transparent 95%, transparent 100%),
    linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white),
    linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white);
  mask-composite: intersect, add;
  opacity: calc(var(--gm-beam-on) * .42);
}
.gm-beam {
  position: absolute; inset: -1px; z-index: 3; border-radius: 18px; clip-path: inset(0 round 19px); padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--gm-beam-angle), transparent 0%, transparent 58%, rgba(255, 255, 255, .03) 62%, rgba(255, 255, 255, .08) 65%,
    rgba(255, 255, 255, .2) 67%, rgba(255, 255, 255, .45) 69%, rgba(255, 255, 255, .85) 70%, rgba(255, 255, 255, .85) 70.5%, rgba(255, 255, 255, .45) 71.5%,
    rgba(255, 255, 255, .2) 73%, rgba(255, 255, 255, .08) 75%, rgba(255, 255, 255, .03) 78%, transparent 82%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude;
  filter: blur(8.4px) brightness(1.4) saturate(1.6);
  opacity: calc(var(--gm-beam-on) * .24);
}
@keyframes gm-beam-spin { to { --gm-beam-angle: 360deg; } }
@keyframes gm-beam-in { to { --gm-beam-on: 1; } }
.gm-ta { position: relative; min-height: 86px; padding: 8px 2px 16px; font-size: 13px; line-height: 1.7; color: var(--ink); white-space: pre-wrap; }
.gm-placeholder { position: absolute; left: 2px; top: 8px; color: var(--muted); }
.gm-demo:not([data-gm-typed="0"]) .gm-placeholder { display: none; }
.gm-caret { display: inline-block; width: 1px; height: 15px; margin-left: 1px; vertical-align: -3px; background: var(--ink); animation: gm-blink 1s steps(1) infinite; }
@keyframes gm-blink { 50% { opacity: 0; } }
.gm-demo:not([data-gm-phase="idle"]) .gm-caret { display: none; }
.gm-composer-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 12px 0 0; border-top: 1px solid var(--line); }
.gm-tools { display: flex; align-items: center; gap: 6px; }
.gm-plus { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--muted); }
.gm-pill { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 7px; font-size: 12px; color: var(--muted); }
.gm-pill .gm-ic { width: 14px; height: 14px; stroke-width: 1.9; }
.gm-send { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--wash); color: var(--muted); transition: background .2s, color .2s; }
.gm-send .gm-ic { width: 17px; height: 17px; }
.gm-demo[data-gm-phase="idle"]:not([data-gm-typed="0"]) .gm-send { background: var(--ink); color: var(--paper); }
.gm-spin { position: absolute; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--focus); animation: gm-spin .8s linear infinite; display: none; }
@keyframes gm-spin { to { transform: rotate(360deg); } }
.gm-demo:is([data-gm-phase="sent"], [data-gm-phase="plan"], [data-gm-phase="assets"], [data-gm-phase="compose"], [data-gm-phase="review"]) .gm-send .gm-ic { display: none; }
.gm-demo:is([data-gm-phase="sent"], [data-gm-phase="plan"], [data-gm-phase="assets"], [data-gm-phase="compose"], [data-gm-phase="review"]) .gm-spin { display: block; }

/* what the thread shows, phase by phase */
.gm-user, .gm-assistant, .gm-gen, .gm-reply, .gm-work-status { transition: opacity .35s, transform .35s; }
.gm-demo[data-gm-phase="idle"] .gm-user { opacity: 0; transform: translateY(8px); }
.gm-demo:is([data-gm-phase="idle"], [data-gm-phase="sent"]) .gm-assistant { display: none; }
.gm-demo:not([data-gm-phase="done"]) .gm-reply { display: none; }
.gm-demo[data-gm-phase="done"] .gm-work-status { display: none; }
.gm-demo:is([data-gm-phase="idle"], [data-gm-phase="done"]) .gm-gen { display: none; }
.gm-st { display: none; }
.gm-demo[data-gm-phase="plan"] .gm-st-plan, .gm-demo[data-gm-phase="assets"] .gm-st-assets,
.gm-demo[data-gm-phase="compose"] .gm-st-compose, .gm-demo[data-gm-phase="review"] .gm-st-review { display: block; }
.gm-demo:is([data-gm-phase="plan"], [data-gm-phase="assets"]) .gm-result { color: var(--muted); }
.gm-demo:is([data-gm-phase="plan"], [data-gm-phase="assets"]) .gm-result-arrow { display: none; }

/* Right panel: the canvas */
.gm-right {
  grid-column: 3; grid-row: 1; position: relative; min-width: 0; overflow: hidden; background-color: var(--canvas);
  background-image: radial-gradient(var(--dot) 1px, transparent 1.3px); background-size: 20px 20px; background-position: 10px 10px;
  --top: 104px; --h: 684px;
}
.gm-topbar { position: absolute; top: 20px; right: 24px; z-index: 8; display: flex; align-items: center; gap: 8px; }
.gm-credits-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--line)); background: color-mix(in srgb, var(--gold) 12%, var(--paper));
  color: var(--gold-ink); font: 500 13px/1 Inter, Arial, sans-serif; font-variant-numeric: tabular-nums;
}
.gm-coin { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.gm-credits-pill .gm-ic { width: 14px; height: 14px; opacity: .65; }
.gm-acct { display: flex; align-items: center; gap: 4px; padding: 4px 8px 4px 4px; }
.gm-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--lilac); color: var(--ink); font-weight: 700; font-size: 14px; }
.gm-acct > .gm-ic { width: 14px; height: 14px; color: var(--muted); }
.gm-draft {
  position: absolute; top: 14px; left: 16px; z-index: 2; display: flex; align-items: center; gap: 7px;
  padding: 7px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); color: var(--muted);
  font-size: 12px; line-height: 1.4; transition: opacity .3s;
}
.gm-draft .gm-ic { width: 14px; height: 14px; }
.gm-dr { display: none; }
.gm-demo[data-gm-phase="compose"] .gm-dr-compose, .gm-demo[data-gm-phase="review"] .gm-dr-review { display: block; }
.gm-demo:not(:is([data-gm-phase="compose"], [data-gm-phase="review"])) .gm-draft { opacity: 0; }
.gm-stage { position: absolute; inset: 0; }

/* the preview's placeholder frame before the first composition (GeneratingCanvas) */
.gm-frame, .gm-cover, .gm-ring { position: absolute; top: var(--top); height: var(--h); left: calc(50% - var(--h) * .4); aspect-ratio: 1080 / 1350; }
.gm-frame {
  container-type: size; overflow: hidden; isolation: isolate; border-radius: 18px; background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  box-shadow: 0 18px 50px -28px #0e0c1340, inset 0 1px 0 #ffffff12; transition: opacity .45s;
}
.gm-frame::before { content: ""; position: absolute; z-index: 1; top: 0; left: 15%; right: 15%; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 18%, transparent), transparent); }
.gm-mesh {
  display: none; /* the frame being created stays plain */
  position: absolute; inset: -20%; opacity: .6; transition: opacity .6s;
  background: radial-gradient(ellipse at 18% 12%, color-mix(in srgb, #a995ed 38%, transparent), transparent 54%),
    radial-gradient(ellipse at 85% 88%, color-mix(in srgb, #91b4cf 26%, transparent), transparent 52%),
    radial-gradient(ellipse at 85% 16%, color-mix(in srgb, #c79ec9 13%, transparent), transparent 46%);
  animation: gm-mesh 9s ease-in-out infinite alternate;
}
@keyframes gm-mesh { to { transform: translate(4%, -3%) rotate(6deg); } }
.gm-demo[data-gm-phase="idle"] .gm-mesh { opacity: .35; }
.gm-fstatus { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 24px; padding: 28px; text-align: center; }
.gm-symbol {
  position: relative; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 19px; color: var(--ink);
  background: linear-gradient(145deg, color-mix(in srgb, var(--lilac) 78%, var(--paper)), var(--paper));
  box-shadow: inset 0 1px 0 #ffffff30, 0 5px 18px #0e0c1308;
}
.gm-symbol::before { content: ""; position: absolute; inset: -8px; border: 1px solid color-mix(in srgb, #a995ed 26%, transparent); border-radius: 26px; }
.gm-sy { display: none; width: 25px; height: 25px; stroke-width: 1.5; }
.gm-demo[data-gm-phase="idle"] .gm-sy-wait, .gm-demo:is([data-gm-phase="sent"], [data-gm-phase="plan"]) .gm-sy-plan, .gm-demo[data-gm-phase="assets"] .gm-sy-assets { display: block; }
.gm-fcopy { display: grid; justify-items: center; gap: 9px; }
.gm-fcopy span { font: 500 20px/1.35 Garet, Inter, sans-serif; letter-spacing: -.035em; }
.gm-fcopy small { max-width: 26ch; font-size: 13px; line-height: 1.6; color: var(--muted); }
.gm-dim { position: absolute; right: 20px; bottom: 18px; font-size: 10px; line-height: 1; letter-spacing: .04em; color: var(--muted); font-variant-numeric: tabular-nums; }
.gm-demo:is([data-gm-phase="compose"], [data-gm-phase="review"], [data-gm-phase="done"]) .gm-frame { opacity: 0; }

/* ── the post, built layer by layer; every length in post widths ─────
   The Built Different poster from the tools section on a plain white
   background: the headline set behind the model cutout, and the small copy
   as live type fitted to the original poster. */
.gm-cover { container-type: inline-size; pointer-events: none; color: #161616; background: #fff; }
.gm-stage > .gm-cover { opacity: 0; transition: opacity .3s; box-shadow: 0 22px 50px -28px #19151f66; }
.gm-demo:is([data-gm-phase="compose"], [data-gm-phase="review"], [data-gm-phase="done"]) .gm-stage > .gm-cover { opacity: 1; }
.gm-l { position: absolute; opacity: 0; transition: opacity .3s ease, transform .35s cubic-bezier(.22, 1, .36, 1), filter .4s ease; }
.gm-l.is-in { opacity: 1; transform: none; filter: none; }
.gm-l-model img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gm-l-model { left: 30.926%; top: 12.815%; width: 49.537%; aspect-ratio: 357 / 785; transform: translateY(2cqw); filter: blur(6px); }
.gm-l-shirt { left: 30.926%; top: 12.815%; width: 49.537%; aspect-ratio: 357 / 785; transition: opacity .35s ease; }
.gm-l-shirt img { display: block; width: 100%; height: 100%; }
.gm-demo[data-gm-shirt="1"] .gs-frame .gm-l-shirt { opacity: 1; }
.gm-ants {
  position: absolute; z-index: 6; left: 30.926%; top: 12.815%; width: 49.537%; aspect-ratio: 357 / 785; pointer-events: none; opacity: 0; transition: opacity .2s;
  background: repeating-linear-gradient(45deg, #111 0 3px, #fff 3px 6px) 0 0 / 200% 200%;
  -webkit-mask: url("../images/tools/built-shirt-edge.webp") 0 0 / 100% 100% no-repeat; mask: url("../images/tools/built-shirt-edge.webp") 0 0 / 100% 100% no-repeat;
  animation: gm-ants 1.2s linear infinite;
}
@keyframes gm-ants { to { background-position: 17px 0; } }
.gm-demo[data-gm-ants="1"] .gs-frame .gm-ants { opacity: 1; }
.gm-tile-art :is(.gm-ants, .gm-l-shirt) { display: none; }
/* the headline's box hugs its ink; the lines sit in it as the poster set them */
.gm-l-head {
  left: 4.8cqw; top: 12.3cqw; width: 89.8cqw; height: 47.1cqw; transform: translateY(-2cqw);
  font: 400 34.13cqw/1 "Bebas Neue", "Arial Narrow", sans-serif; letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap;
}
/* a selection draws above every layer, as the editor's overlay does: the
   headline's box, though the model stands in front of the type */
.gm-sel {
  position: absolute; z-index: 7; border: 1.5px solid var(--focus); opacity: 0; pointer-events: none; transition: opacity .2s;
}
.gm-sel-head { left: 4.2cqw; top: 11.7cqw; width: 91cqw; height: 48.3cqw; }
.gm-sel-model { left: 30.926cqw; top: 16.02cqw; width: 49.537cqw; height: 108.93cqw; }
.gm-sel-shirt { left: 30.926cqw; top: 39.75cqw; width: 49.537cqw; height: 60.64cqw; }
.gm-sel b { display: none; position: absolute; width: 7px; height: 7px; background: #fff; border: 1px solid #4a88ff; }
.gm-sel b:nth-child(1) { left: -4px; top: -4px; } .gm-sel b:nth-child(2) { right: -4px; top: -4px; }
.gm-sel b:nth-child(3) { left: -4px; bottom: -4px; } .gm-sel b:nth-child(4) { right: -4px; bottom: -4px; }
.gm-tile-art .gm-sel { display: none; }
.gm-hl1, .gm-hl2 { position: absolute; left: -1.2cqw; color: #141414; transition: color .25s ease; }
.gm-hl1 { top: -3.4cqw; }
.gm-hl2 {
  top: 23.56cqw; font-size: .8605em;
  background: linear-gradient(#141414, #4c4c4c) 0 0 / 100% 100%; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.gm-l-kicker, .gm-l-spec { left: 4.333cqw; font-family: Inter, Arial, sans-serif; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.gm-l-kicker, .gm-l-spec, .gm-l-code, .gm-l-cta { transform: translateY(1cqw); }
.gm-l-kicker span, .gm-l-spec span { position: absolute; left: 0; }
.gm-l-kicker { top: 4.236cqw; }
.gm-l-kicker span:first-child { top: 0; font-size: 1.527cqw; font-weight: 600; letter-spacing: .083em; }
.gm-l-kicker span:last-child { top: 2.891cqw; left: -.027cqw; font-size: 1.718cqw; font-weight: 500; letter-spacing: .122em; }
.gm-l-code { left: 94.29cqw; top: 14.72cqw; font: 600 1.145cqw/1 Inter, Arial, sans-serif; letter-spacing: .084em; white-space: nowrap; rotate: -90deg; transform-origin: 0 0; }
.gm-l-spec { top: 115.903cqw; font-size: 1.527cqw; font-weight: 600; }
.gm-l-spec span:first-child { top: 0; letter-spacing: .106em; }
.gm-l-spec span:last-child { top: 2.5cqw; letter-spacing: .109em; }
.gm-l-cta { left: 78.677cqw; top: 117.857cqw; font: 400 1.786cqw/1 "Bebas Neue", "Arial Narrow", sans-serif; letter-spacing: .079em; text-transform: uppercase; white-space: nowrap; }

/* once the post is ready, the pointer waits beside it (the Edit in Studio pointer starts there) */
.gm-pointer {
  position: absolute; z-index: 9; left: 108cqw; top: 104cqw; width: 26px; height: 31px; overflow: visible;
  fill: #fff; stroke: #151821; stroke-width: 1.6; filter: drop-shadow(0 2px 3px #0005);
  opacity: 0; transition: left .45s cubic-bezier(.45, 0, .2, 1), top .45s cubic-bezier(.45, 0, .2, 1), opacity .2s;
}
.gm-demo[data-gm-phase="done"] .gm-pointer { opacity: 1; }

/* Results bar: versions, actions, zoom */
.gm-results { position: absolute; z-index: 3; left: 24px; right: 24px; bottom: 24px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 16px; transition: opacity .3s; }
.gm-thumbs { display: flex; gap: 5px; width: max-content; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); box-shadow: 0 3px 14px #0e0c1308; }
.gm-tile, .gm-tile-add { position: relative; display: grid; place-items: center; width: 45px; height: 56px; border-radius: 6px; background: var(--paper); }
.gm-tile { padding: 2px; border: 1px solid var(--focus); background: var(--lilac); }
.gm-tile b { position: absolute; z-index: 2; left: 3px; top: 3px; min-width: 12px; height: 13px; padding: 0 3px; display: grid; place-items: center; border-radius: 999px; background: color-mix(in srgb, var(--paper) 82%, transparent); font-size: 8px; font-weight: 500; }
.gm-tile-art { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 3px; }
.gm-tile-art .gm-cover { position: relative; top: auto; left: auto; height: 100%; margin: 0 auto; }
.gm-tile-art .gm-pointer { display: none; }
.gm-tile-add { border: 1px solid var(--line); color: var(--muted); }
.gm-tile-add .gm-ic { width: 17px; height: 17px; }
.gm-actions { display: flex; align-items: center; gap: 4px; padding: 5px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); box-shadow: 0 3px 14px #0e0c1308; }
.gm-dl { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--muted); }
.gm-dl .gm-ic { width: 17px; height: 17px; }
.gm-edit { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 15px; margin-left: 5px; border-radius: 999px; background: var(--primary); color: var(--primary-ink); font-size: 12px; font-weight: 500; transition: background .2s, box-shadow .3s; }
.gm-edit .gm-ic { width: 14px; height: 14px; }
.gm-zoom { justify-self: end; display: flex; align-items: center; gap: 2px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); font-size: 11px; font-variant-numeric: tabular-nums; }
.gm-zoom > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; }
.gm-zoom .gm-ic { width: 14px; height: 14px; }
.gm-zoom b { min-width: 36px; text-align: center; font-weight: 400; }
.gm-zoom i { width: 1px; height: 16px; margin: 0 2px; background: var(--line); }
/* before a frame exists only the (disabled) Edit in Studio shows, centred */
.gm-demo[data-gm-phase="idle"] .gm-results { opacity: 0; }
.gm-demo:is([data-gm-phase="sent"], [data-gm-phase="plan"], [data-gm-phase="assets"]) :is(.gm-thumbs, .gm-zoom, .gm-dl) { display: none; }
.gm-demo:is([data-gm-phase="sent"], [data-gm-phase="plan"], [data-gm-phase="assets"]) .gm-actions { grid-column: 1 / -1; justify-self: center; }
.gm-demo:is([data-gm-phase="sent"], [data-gm-phase="plan"], [data-gm-phase="assets"]) .gm-edit { margin-left: 0; }

/* the loop's soft reset */


/* ── narrow: the app's own phone layout (≤ 700px), one pane at a time ─ */
.gm-demo[data-gm-size="narrow"] .gm-app { grid-template-columns: 64px minmax(0, 1fr); }
.gm-demo[data-gm-size="narrow"] .gm-rail { padding-inline: 8px; }
.gm-demo[data-gm-size="narrow"] .gm-tabs {
  position: absolute; z-index: 4; inset: 76px 14px auto 78px; height: 36px; display: flex; gap: 5px; padding: 4px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--paper);
}
.gm-tabs span { flex: 1; display: grid; place-items: center; border-radius: 999px; font-size: 12px; color: var(--muted); transition: background .25s, color .25s; }
.gm-demo[data-gm-pane="chat"] .gm-tabs [data-tab="chat"], .gm-demo[data-gm-pane="design"] .gm-tabs [data-tab="design"] { background: var(--lilac); color: var(--ink); }
.gm-demo[data-gm-size="narrow"] :is(.gm-left, .gm-right) { grid-column: 2; grid-row: 1; }
.gm-demo[data-gm-size="narrow"] .gm-left { border: 0; padding-top: 124px; }
.gm-demo[data-gm-size="narrow"] .gm-left-head, .gm-demo[data-gm-size="narrow"] .gm-thread { padding-inline: 12px; }
.gm-demo[data-gm-size="narrow"] .gm-composer { margin-inline: 10px; }
.gm-demo[data-gm-size="narrow"][data-gm-pane="design"] .gm-left, .gm-demo[data-gm-size="narrow"][data-gm-pane="chat"] .gm-right { visibility: hidden; }
/* the account island sits over both panes, as in the app */
.gm-demo[data-gm-size="narrow"] .gm-topbar { visibility: visible; }
.gm-demo[data-gm-size="narrow"] .gm-right { --top: 166px; --h: 385px; }
.gm-demo[data-gm-size="narrow"] .gm-topbar { top: 14px; right: 14px; gap: 4px; }
.gm-demo[data-gm-size="narrow"] .gm-credits-pill { padding-inline: 10px; gap: 6px; font-size: 12px; }
.gm-demo[data-gm-size="narrow"] .gm-avatar { width: 32px; height: 32px; }
.gm-demo[data-gm-size="narrow"] .gm-draft { top: 128px; }
.gm-demo[data-gm-size="narrow"] .gm-results { left: 14px; right: 14px; bottom: 14px; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.gm-demo[data-gm-size="narrow"] .gm-actions { grid-column: 1 / -1; grid-row: 1; justify-self: end; }
.gm-demo[data-gm-size="narrow"] .gm-thumbs { grid-column: 1; grid-row: 2; }
.gm-demo[data-gm-size="narrow"] .gm-zoom { grid-column: 2; grid-row: 2; }
.gm-demo[data-gm-size="narrow"] .gm-fcopy span { font-size: 18px; }
.gm-demo[data-gm-size="narrow"] .gm-fstatus { gap: 20px; padding: 20px; }

@media (max-width: 900px) { .gm-nav, .gm-side { display: none; } .gm-bar { grid-template-columns: auto minmax(0, 1fr) 48px; } }
@media (max-width: 620px) {
  .gm-shell { margin-top: 44px; }
  .gm-wrap { padding: 14px; }
  .gm-browser { border-radius: 6px; }
  .gm-bar { height: 40px; padding: 0 12px; gap: 12px; grid-template-columns: auto minmax(0, 1fr) 30px; }
  .gm-lights { gap: 6px; } .gm-lights i { width: 10px; height: 10px; }
  .gm-url { height: 26px; font-size: 12px; }
  .gm-url .gm-reload { display: none; }
  .gm-caption { font-size: 13px; }
  .gm-foot { gap: 18px; margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .gm-demo *, .gm-demo *::before, .gm-demo *::after, .gm-wrap::before { animation: none !important; transition: none !important; }
}

/* ── Edit in Studio: the same cover opened in the editor ───────────────
   Measured from the dark Studio at 1600 × 900 (rail 56, Layers 296,
   Inspector islands 312 wide, dock and tool options centred on x 660,
   the A4 frame fitted at 21%). generate-demo.js clones the cover in. */
.gm-edit { transform-origin: center; }
.gm-demo[data-gm-click="1"] .gm-edit { transform: scale(.96); background: #d2df9a; }
.gs {
  --paper: #19151f; --ink: #f4f3f6; --muted: #ddd9e3; --focus: #c9baff; --canvas: #2f2b36; --lime: #e4efbb; --dark: #25212c;
  --s-panel: #201c26; --s-ctl: #25212c; --s-ctl-line: #3b3543; --s-line: #302b38; --s-sel: #372f44; --s-on: #40354f;
  --s-icon: #ada7b5; --s-sel-ink: #dfd2fa; --s-blue: #4a88ff;
  position: absolute; inset: 0; z-index: 20; display: block; background: var(--canvas); color: var(--ink);
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s .25s;
}
.gm-demo[data-gm-view="studio"] .gs { opacity: 1; visibility: visible; transition: opacity .25s ease, visibility 0s; }
.gs .gm-ic { width: 20px; height: 20px; }
.gs-chev { width: 12px !important; height: 12px !important; }

/* rail */
.gs-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 56px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px; background: var(--s-panel); }
.gs-logo { display: grid; place-items: center; width: 39px; height: 40px; margin-bottom: 8px; }
.gs-logo img { width: 32px; height: 32px; border-radius: 8px; }
.gs-rbtn { display: grid; place-items: center; width: 39px; height: 40px; flex: none; border-radius: 10px; color: var(--muted); }
.gs-rbtn.is-on { background: var(--s-on); color: var(--ink); }
.gs-rsep { display: block; width: 21px; height: 1px; margin: 4px 0 6px; background: #4a4750; }
.gs-rspacer { flex: 1; }

/* the canvas and the frame on it */
.gs-stage {
  position: absolute; left: 56px; top: 0; right: 0; bottom: 0; --dot: #4a4553;
  background-color: var(--canvas); background-image: radial-gradient(var(--dot) 1px, transparent 1.3px); background-size: 20px 20px; background-position: 6px 10px;
  --fx: 758px; --fy: 82px; --fh: 724px; /* centred on x 814: halfway between Layers (352) and the Inspector (1276) */
}
.gs-flabel { position: absolute; left: var(--fx); top: calc(var(--fy) - 18px); transform: translateX(calc(var(--fh) * -.4)); font-size: 11px; line-height: 1; color: var(--muted); white-space: nowrap; }
.gs-frame { position: absolute; left: var(--fx); top: var(--fy); height: var(--fh); aspect-ratio: 1080 / 1350; transform: translateX(-50%); }
.gs-frame .gm-cover { position: absolute; inset: 0; height: 100%; left: 0; top: 0; }
.gs-frame .gm-pointer { display: none; }
.gm-demo[data-gm-red="1"] .gs-frame .gm-hl2 { background-image: linear-gradient(#e2372c, #b8211b); }
/* the selection: the editor's blue box and corner handles */
.gs-frame .gm-sel { border: 1px solid var(--s-blue); transition: opacity .15s; }
.gs-frame .gm-sel b { display: block; }
.gm-demo[data-gm-sel="1"] .gs-frame .gm-sel-head { opacity: 1; }
.gm-demo[data-gm-edit="1"] .gs-frame .gm-sel-head b { display: none; }
.gm-demo[data-gm-msel="1"][data-gm-wand="0"][data-gm-copy="0"] .gs-frame .gm-sel-model { opacity: 1; }
.gm-demo[data-gm-copy="1"] .gs-frame .gm-sel-shirt { opacity: 1; }
.gs-textsel { position: absolute; left: -.4cqw; top: 25.4cqw; width: 90.6cqw; height: 22.8cqw; background: #4a88ff4d; opacity: 0; transition: opacity .15s; }
.gm-demo[data-gm-edit="1"] .gs-frame .gs-textsel { opacity: 1; }

/* Layers */
.gs-layers { position: absolute; left: 56px; top: 0; bottom: 0; width: 296px; padding: 10px 12px; background: var(--s-panel); border-left: 1px solid var(--s-line); }
.gs-lhead { display: flex; align-items: center; justify-content: space-between; height: 28px; padding-left: 4px; }
.gs-lhead b { font-size: 13px; font-weight: 500; }
.gs-lhead > span { display: flex; gap: 2px; }
.gs-x { display: grid; place-items: center; width: 28px; height: 28px; color: var(--s-icon); }
.gs-x .gm-ic { width: 17px; height: 17px; }
.gs-page { height: 34px; margin: 8px -2px 0; padding: 0 10px; display: flex; align-items: center; border-radius: 7px; background: var(--s-sel); font-size: 12px; font-weight: 500; }
.gs-lsep { display: block; height: 1px; margin: 10px -12px 8px; background: var(--s-line); }
.gs-tree { margin: 6px -2px 0; }
.gs-row { display: flex; align-items: center; gap: 6px; height: 32px; margin-top: 4px; padding: 0 8px 0 32px; border-radius: 6px; font-size: 11px; white-space: nowrap; overflow: hidden; transition: background .2s; }
.gs-row > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.gs-lic { display: grid; place-items: center; width: 18px; flex: none; color: var(--s-icon); transition: color .2s; }
.gs-lic .gm-ic { width: 16px; height: 16px; }
.gs-frow { height: 34px; margin-top: 0; padding-left: 4px; font-size: 12px; font-weight: 600; }
.gs-frow .gs-lic .gm-ic { width: 14px; height: 14px; }
.gs-caret { display: grid; place-items: center; width: 24px; color: var(--s-icon); }
.gs-caret .gm-ic { width: 12px; height: 12px; }
.gm-demo[data-gm-sel="1"] .gs-row[data-row="head"] { background: var(--s-sel); }
.gm-demo[data-gm-sel="1"] .gs-row[data-row="head"] .gs-lic { color: var(--s-sel-ink); }

/* Generate | Studio */
.gs-modes { position: absolute; left: 364px; top: 12px; display: flex; gap: 2px; padding: 4px; border: 1px solid var(--s-ctl-line); border-radius: 9px; background: var(--s-panel); box-shadow: 0 1px 3px #0e0c1322; }
.gs-modes span { display: grid; place-items: center; height: 32px; padding: 0 16px; border-radius: 6px; font-size: 12px; font-weight: 500; color: var(--muted); }
.gs-modes .is-on { background: var(--s-line); color: var(--ink); font-weight: 600; }

/* the dock and the selection's tool options above it */
.gs-dock, .gs-opts {
  position: absolute; left: 814px; transform: translateX(-50%); display: flex; align-items: center; gap: 3px;
  padding: 6px; border: 1px solid var(--s-ctl-line); border-radius: 12px; background: var(--s-panel);
  box-shadow: 0 5px 22px #0e0c1330, 0 1px 3px #0e0c1322;
}
.gs-dock { bottom: 22px; }
.gs-dock > i, .gs-opts > i { display: block; width: 1px; height: 24px; margin: 0 2px; background: var(--s-line); }
.gs-tb { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 7px; color: var(--s-icon); }
.gs-tb.is-on { background: var(--s-on); color: var(--s-sel-ink); }
.gs-split { display: flex; align-items: center; justify-content: center; gap: 2px; width: 51px; }
.gs-dock b { min-width: 42px; text-align: center; font-size: 12px; font-weight: 500; }
.gs-opts { bottom: 84px; padding: 4px; opacity: 0; transform: translate(-50%, 6px); transition: opacity .2s, transform .2s; }
.gs-opts .gs-tb { width: 32px; height: 32px; }
.gs-opts .gm-ic { width: 14px; height: 14px; }
.gs-opts > i { height: 18px; margin: 0 4px; }
.gm-demo[data-gm-sel="1"] .gs-opts-text { opacity: 1; transform: translate(-50%, 0); }

/* Inspector */
.gs-panel { position: absolute; top: 12px; right: 12px; bottom: 12px; width: 312px; display: flex; flex-direction: column; gap: 12px; }
.gs-island { border: 1px solid var(--s-ctl-line); border-radius: 12px; background: var(--s-panel); }
.gs-top { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 12px; }
.gs-acct { display: flex; align-items: center; gap: 4px; padding: 3px; margin-right: auto; color: var(--muted); }
.gs-avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--s-on); color: var(--s-sel-ink); font-size: 13px; font-weight: 700; }
.gs-ghost { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 6px; color: var(--s-icon); }
.gs-ghost .gm-ic { width: 16px; height: 16px; }
.gs-export { display: grid; place-items: center; height: 36px; padding: 0 16px; border-radius: 6px; background: var(--lime); color: var(--dark); font-size: 13px; font-weight: 600; }
.gs-body { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.gs-proj { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; height: 57px; padding: 0 16px; border-bottom: 1px solid var(--s-line); background: var(--s-panel); border-radius: 12px 12px 0 0; }
.gs-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; }
.gs-saved { font-size: 11.5px; font-weight: 550; color: var(--muted); }
.gs-toggle { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--s-ctl); color: var(--muted); }
.gs-toggle .gm-ic { width: 17px; height: 17px; transform: rotate(180deg); }
.gs-doc, .gs-text { position: absolute; left: 0; right: 0; top: 57px; transition: opacity .2s; }
.gs-text { opacity: 0; }
.gm-demo[data-gm-sel="1"] .gs-text { opacity: 1; }
.gm-demo[data-gm-sel="1"] .gs-doc { opacity: 0; }
.gs-sec { padding: 0 16px 18px; border-top: 1px solid var(--s-line); }
.gs-sec:first-child { border-top: 0; }
.gs-sec.is-empty { padding-bottom: 0; }
.gs-shead { display: flex; align-items: center; justify-content: space-between; height: 44px; font-size: 13px; font-weight: 500; }
.gs-act { display: grid; place-items: center; width: 28px; height: 28px; color: var(--s-icon); }
.gs-act .gm-ic { width: 17px; height: 17px; }
.gs-sub { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.gs-ctl { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border: 1px solid var(--s-ctl-line); border-radius: 7px; background: var(--s-ctl); font-size: 13px; }
.gs-ctl .gm-ic { width: 14px; height: 14px; }
.gs-select .gs-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-select > .gm-ic:last-child { color: var(--muted); }
.gs-lead { display: grid; place-items: center; min-width: 14px; font-size: 11px; font-weight: 600; color: var(--muted); }
.gs-num { flex: 1; min-width: 0; padding-left: 3px; }
.gs-two { display: grid; grid-template-columns: 160px 1fr; gap: 8px; }
.gs-row2 { display: grid; grid-template-columns: 150px 1fr; gap: 8px; margin-top: 8px; }
.gs-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; margin-top: 8px; }
.gs-grid .gs-sub { margin: 0 0 8px; }
.gs-grid .gs-ctl { margin-bottom: 8px; }
.gs-align { grid-template-columns: 132px 104px 1fr; align-items: center; margin-top: 0; }
.gs-seg { display: flex; gap: 2px; height: 36px; padding: 3px; border-radius: 7px; background: var(--s-ctl); }
.gs-seg span { flex: 1; display: grid; place-items: center; border-radius: 5px; color: var(--s-icon); }
.gs-seg .gm-ic { width: 17px; height: 17px; }
.gs-seg .is-on { background: var(--s-sel); color: var(--s-sel-ink); }
.gs-more { display: grid; place-items: center; height: 36px; color: var(--s-icon); }
.gs-more .gm-ic { width: 17px; height: 17px; }
.gs-fill { display: flex; align-items: center; gap: 6px; }
.gs-fillrow { flex: 1; gap: 0; padding: 0 6px 0 8px; }
.gs-chip { display: block; flex: none; width: 22px; height: 22px; margin-right: 10px; border-radius: 4px; background: #141414; box-shadow: inset 0 0 0 1px #0000001f; transition: background .45s; }
.gm-demo[data-gm-red="1"] .gs-text .gs-chip { background: #e2372c; }
.gs-hex { padding: 3px 4px; border-radius: 5px; font-weight: 500; letter-spacing: .01em; }
.gs-fill .gs-caret { display: none; }
.gs-chip { transition: background .3s, box-shadow .2s; }
.gm-demo[data-gm-pick="1"] .gs-text .gs-chip { box-shadow: 0 0 0 2px var(--s-panel), 0 0 0 3px var(--focus); }
.gs-pct { margin-left: auto; padding-right: 6px; color: var(--muted); }
.gs-eye { display: grid; place-items: center; width: 24px; color: var(--muted); }
.gs-eye .gm-ic { width: 17px; height: 17px; }
.gs-del { display: grid; place-items: center; width: 26px; color: var(--muted); }
.gs-del .gm-ic { width: 17px; height: 17px; }
.gs-note { margin: 0; font-size: 12px; line-height: 1.6; color: var(--muted); }

/* the pointer that clicks through: Edit in Studio, then the headline and its fill */
.gm-cursor {
  position: absolute; z-index: 60; left: 0; top: 0; width: 26px; height: 31px; overflow: visible; pointer-events: none;
  fill: #fff; stroke: #151821; stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 2px 3px #0005);
  opacity: 0; transition: left .27s cubic-bezier(.45, 0, .2, 1), top .27s cubic-bezier(.45, 0, .2, 1), opacity .15s, scale .08s;
}
.gm-demo[data-gm-cursor="1"] .gm-cursor { opacity: 1; }
.gm-demo[data-gm-press="1"] .gm-cursor { scale: .86; }
.gm-demo[data-gm-cursor="1"] .gm-stage .gm-pointer { opacity: 0; }

/* phone: the canvas, rail, dock and tool options only */
.gm-demo[data-gm-size="narrow"] .gs-stage { --fx: 182px; --fy: 150px; --fh: 400px; }
.gm-demo[data-gm-size="narrow"] :is(.gs-layers, .gs-panel, .gs-wide) { display: none; }
.gm-demo[data-gm-size="narrow"] .gs-modes { left: 68px; }
.gm-demo[data-gm-size="narrow"] :is(.gs-dock, .gs-opts) { left: 238px; }

/* while it generates: a light runs round the frame's edge, on the placeholder
   and then on the live preview, and stops once the design is ready */
@property --gm-run { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.gm-ring {
  z-index: 3; margin: -2px; box-sizing: content-box; padding: 2px; border-radius: 20px; pointer-events: none;
  background: conic-gradient(from var(--gm-run), #9272bd00 0deg, #9272bd 50deg, #5ec8f0 110deg, #f08ad0 160deg, #9272bd00 215deg, #9272bd00 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .5s, border-radius .5s; animation: gm-run 2.6s linear infinite;
}
@keyframes gm-run { to { --gm-run: 360deg; } }
/* and a soft glow of the same colours behind the frame */
.gm-glow {
  position: absolute; top: var(--top); height: var(--h); left: calc(50% - var(--h) * .4); aspect-ratio: 1080 / 1350; margin: -10px; box-sizing: content-box; padding: 10px;
  border-radius: 28px; pointer-events: none; filter: blur(22px); opacity: 0; transition: opacity .6s;
  background: conic-gradient(from var(--gm-run), #9272bd00 0deg, #9272bd 50deg, #5ec8f0 110deg, #f08ad0 160deg, #9272bd00 215deg, #9272bd00 360deg);
  animation: gm-run 2.6s linear infinite;
}
.gm-demo:is([data-gm-phase="sent"], [data-gm-phase="plan"], [data-gm-phase="assets"], [data-gm-phase="compose"], [data-gm-phase="review"]) .gm-ring { opacity: 1; }
.gm-demo:is([data-gm-phase="sent"], [data-gm-phase="plan"], [data-gm-phase="assets"], [data-gm-phase="compose"], [data-gm-phase="review"]) .gm-glow { opacity: .35; }
.gm-demo:is([data-gm-phase="compose"], [data-gm-phase="review"], [data-gm-phase="done"]) .gm-ring { border-radius: 2px; }
.gm-demo:is([data-gm-phase="idle"], [data-gm-phase="done"]) :is(.gm-ring, .gm-glow) { animation-play-state: paused; }

/* the colour picker (color/useColorPicker.tsx): 280 × 420 beside the Inspector */
.gs-pick {
  position: absolute; left: 984px; top: 372px; z-index: 30; width: 280px; overflow: hidden; /* below the headline, so the line it recolours stays in view */
  border: 1px solid var(--s-ctl-line); border-radius: 12px; background: var(--s-ctl);
  box-shadow: 0 20px 60px #0e0c1355, 0 4px 12px #0e0c1330;
  opacity: 0; transform: translateY(6px) scale(.98); transform-origin: 100% 0; transition: opacity .2s, transform .2s; pointer-events: none;
}
.gm-demo[data-gm-pick="1"] .gs-pick { opacity: 1; transform: none; }
.gs-pick-head { display: flex; align-items: center; justify-content: space-between; height: 42px; padding: 6px 8px 0 14px; }
.gs-pick-tabs { display: flex; gap: 16px; font-size: 13px; font-weight: 600; color: var(--muted); }
.gs-pick-tabs b { color: var(--ink); font-weight: 600; }
.gs-pick-body { padding: 15px 14px 14px; border-top: 1px solid var(--s-ctl-line); }
.gs-sv {
  --sv: #ff0000; position: relative; height: 176px; border-radius: 8px;
  background: linear-gradient(to top, #000, #0000), linear-gradient(to right, #fff, #fff0), var(--sv);
}
.gs-sv-dot {
  position: absolute; left: 0; top: 162px; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  border: 2.5px solid #fff; background: #141414; box-shadow: 0 1px 4px #0006;
  transition: left .35s cubic-bezier(.22, 1, .36, 1), top .35s cubic-bezier(.22, 1, .36, 1), background .2s;
}
.gm-demo[data-gm-red="1"] .gs-sv-dot { left: 201px; top: 20px; background: #e2372c; }
.gs-pick-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.gs-eyedrop { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border: 1px solid var(--s-ctl-line); border-radius: 6px; color: var(--s-icon); }
.gs-tracks { display: grid; gap: 10px; flex: 1; }
.gs-hue, .gs-alpha { position: relative; height: 14px; border-radius: 7px; }
.gs-hue { background: linear-gradient(to right, #f00 8px, #ff0 calc(16.6% + 2px), #0f0 calc(33.3% + 1px), #0ff 50%, #00f calc(66.6% - 1px), #f0f calc(83.3% - 2px), #f00 calc(100% - 8px)); }
.gs-alpha { background: linear-gradient(to right, #14141400 8px, var(--a, #141414) calc(100% - 8px)), repeating-conic-gradient(#3b3543 0 25%, #25212c 0 50%) 0 0 / 8px 8px; transition: --a .3s; }
.gm-demo[data-gm-red="1"] .gs-alpha { --a: #e2372c; }
.gs-hue i, .gs-alpha i { position: absolute; top: -1px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; border: 2.5px solid #fff; box-shadow: 0 1px 4px #0006; }
.gs-hue i { left: 8px; background: #f00; transition: left .35s; }
.gm-demo[data-gm-red="1"] .gs-hue i { left: 10px; }
.gs-alpha i { right: -8px; }
.gs-pick-fields { display: grid; grid-template-columns: 66px 1fr 62px; gap: 6px; margin-top: 12px; }
.gs-pick .gs-fmt { height: 32px; padding: 0 8px 0 11px; font-size: 12.5px; font-weight: 550; }
.gs-pfield { display: flex; align-items: center; height: 32px; padding: 0 11px; border: 1px solid var(--s-ctl-line); border-radius: 6px; font-size: 13px; font-weight: 500; }
.gs-pop { justify-content: space-between; font-size: 12.5px; }
.gs-pop em { font-style: normal; color: var(--muted); }
.gs-pick-sw { padding: 9px 14px 14px; border-top: 1px solid var(--s-ctl-line); }
.gs-sw-src { display: inline-flex; align-items: center; gap: 6px; height: 24px; margin-left: -6px; padding: 0 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.gs-sw-grid { display: flex; gap: 7px; margin-top: 8px; }
.gs-sw-grid i { width: 22px; height: 22px; border-radius: 6px; box-shadow: inset 0 0 0 1px #ffffff1f; }
.gs-sw-grid .is-on { box-shadow: 0 0 0 2px var(--s-ctl), 0 0 0 3px var(--focus); }
.gm-demo[data-gm-red="1"] .gs-sw-grid .is-on { box-shadow: inset 0 0 0 1px #ffffff1f; }

/* the t-shirt: a picture's toolbar, its Selection menu, the wand's bar, the
   picture's Inspector and the Filters palette */
.gm-demo[data-gm-msel="1"] .gs-row[data-row="head"] { background: none; }
.gm-demo[data-gm-msel="1"] .gs-row[data-row="head"] .gs-lic { color: var(--s-icon); }
.gm-demo[data-gm-msel="1"][data-gm-copy="0"] .gs-row[data-row="model"],
.gm-demo[data-gm-copy="1"] .gs-row[data-row="copy"] { background: var(--s-sel); }
.gm-demo[data-gm-msel="1"][data-gm-copy="0"] .gs-row[data-row="model"] .gs-lic,
.gm-demo[data-gm-copy="1"] .gs-row[data-row="copy"] .gs-lic { color: var(--s-sel-ink); }
.gs-row[data-row="copy"] { height: 0; margin-top: 0; opacity: 0; transition: height .25s, margin .25s, opacity .25s, background .2s; }
.gm-demo[data-gm-copy="1"] .gs-row[data-row="copy"] { height: 32px; margin-top: 4px; opacity: 1; }
/* which toolbar sits above the dock */
.gs-opts-photo { opacity: 0; transform: translate(-50%, 6px); pointer-events: none; }
.gm-demo[data-gm-msel="1"] .gs-opts-text { opacity: 0; }
.gm-demo[data-gm-msel="1"][data-gm-wand="0"] .gs-opts-photo { opacity: 1; transform: translate(-50%, 0); }
.gs-smenu {
  position: absolute; left: 775px; bottom: 134px; z-index: 25; display: grid; gap: 1px; width: 184px; padding: 4px;
  border: 1px solid var(--s-ctl-line); border-radius: 10px; background: var(--s-ctl); box-shadow: 0 20px 60px #0e0c1355;
  opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; pointer-events: none;
}
.gm-demo[data-gm-smenu="1"] .gs-smenu, .gm-demo[data-gm-smenu="2"] .gs-smenu { opacity: 1; transform: none; }
.gs-smenu span { display: flex; align-items: center; gap: 9px; height: 32px; padding: 0 9px; border-radius: 6px; font-size: 12.5px; color: var(--ink); }
.gs-smenu .gm-ic { width: 16px; height: 16px; color: var(--muted); }
.gm-demo[data-gm-smenu="2"] .gs-smenu .gs-wand { background: var(--s-line); }
/* the headline's AI menu, from the sparkle on its tool options (ToolOptions.tsx's
   RewritePopover): Rewrite, Shorten, Expand, Punchier, then Translate with its
   language list beside it */
.gs-ai {
  position: absolute; left: 751px; bottom: 134px; z-index: 25; display: grid; gap: 1px; width: 240px; padding: 4px;
  border: 1px solid var(--s-ctl-line); border-radius: 10px; background: var(--s-ctl); box-shadow: 0 20px 60px #0e0c1355;
  opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; pointer-events: none;
}
.gm-demo:is([data-gm-ai="1"], [data-gm-ai="2"]) .gs-ai { opacity: 1; transform: none; }
.gs-ai > span, .gs-ai-langs span { display: flex; align-items: center; gap: 9px; height: 32px; padding: 0 9px; border-radius: 6px; font-size: 12.5px; color: var(--ink); transition: background .12s; }
.gs-ai > i { display: block; height: 1px; margin: 4px; background: var(--s-line); }
.gs-ai .gm-ic { width: 15px; height: 15px; color: var(--muted); }
.gs-ai .gs-ai-chev { width: 13px; height: 13px; margin-left: auto; color: var(--s-icon); }
.gm-demo[data-gm-ai="2"] .gs-ai-tr, .gs-ai-langs .is-hot { background: var(--s-line); }
/* its bottom row level with Translate */
.gs-ai-langs {
  position: absolute; left: calc(100% + 4px); bottom: -1px; display: grid; gap: 1px; width: 172px; padding: 4px;
  border: 1px solid var(--s-ctl-line); border-radius: 10px; background: var(--s-ctl); box-shadow: 0 20px 60px #0e0c1355;
  opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s;
}
.gm-demo[data-gm-ai="2"] .gs-ai-langs { opacity: 1; transform: none; }
.gs-flag { width: 16px; height: 11px; flex: none; border-radius: 2px; box-shadow: 0 0 0 .5px #ffffff30; }
.gm-demo:is([data-gm-ai="1"], [data-gm-ai="2"]) .gs-opts-text .gs-tb:first-child { background: var(--s-on); color: var(--s-sel-ink); }
/* a language picked: the post's copy blurs out, is reset in it and comes back */
.gm-demo[data-gm-swap="1"] .gs-stage .gm-l:is(.gm-l-head, .gm-l-kicker, .gm-l-spec, .gm-l-cta) { opacity: 0; filter: blur(4px); }
/* the post's faces have no Japanese: the system's Gothic stands in, heavy in the headline */
.gs-frame .gm-cover[lang="ja"] :is(.gm-l-head, .gm-l-kicker, .gm-l-spec, .gm-l-cta) {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
}
/* both lines one size, the ink filling the headline's box top to bottom with the English lines' gap */
.gs-frame .gm-cover[lang="ja"] .gm-l-head { font-size: 23.4cqw; font-weight: 800; letter-spacing: 0; }
.gs-frame .gm-cover[lang="ja"] :is(.gm-hl1, .gm-hl2) { left: -.7cqw; }
.gs-frame .gm-cover[lang="ja"] .gm-hl1 { top: -.47cqw; }
.gs-frame .gm-cover[lang="ja"] .gm-hl2 { top: 24.4cqw; font-size: 1em; }
.gs-frame .gm-cover[lang="ja"] .gm-l-cta { font-weight: 600; letter-spacing: .02em; }
.gs-wandbar {
  position: absolute; left: 814px; bottom: 84px; z-index: 22; display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 12px; white-space: nowrap;
  border: 1px solid var(--s-ctl-line); border-radius: 12px; background: var(--s-panel); box-shadow: 0 5px 22px #0e0c1330;
  opacity: 0; transform: translate(-50%, 6px); transition: opacity .2s, transform .2s; pointer-events: none;
}
.gm-demo[data-gm-wand="1"] .gs-wandbar { opacity: 1; transform: translate(-50%, 0); }
.gs-wandbar > i { display: block; width: 1px; height: 18px; margin: 0 4px; background: var(--s-line); }
.gs-wtitle { display: grid; font-size: 12px; color: var(--muted); }
.gs-wtitle b { grid-area: 1 / 1; font-weight: 400; transition: opacity .15s; }
.gs-wtitle b + b, .gm-demo[data-gm-ants="1"] .gs-wtitle b:first-child { opacity: 0; }
.gm-demo[data-gm-ants="1"] .gs-wtitle b + b { opacity: 1; }
.gs-scrub { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border: 1px solid var(--s-ctl-line); border-radius: 7px; background: var(--s-ctl); font-size: 12px; }
.gs-scrub em { font-style: normal; color: var(--muted); }
.gs-segs { display: flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--s-ctl); }
.gs-seg-btn { display: grid; place-items: center; height: 32px; padding: 0 10px; border-radius: 7px; font-size: 12px; font-weight: 500; color: var(--muted); transition: opacity .2s, background .15s; }
.gs-segs .gs-seg-btn { height: 28px; }
.gs-seg-btn.is-on { background: var(--s-on); color: var(--s-sel-ink); }
.gs-need { opacity: .45; }
.gm-demo[data-gm-ants="1"] .gs-need { opacity: 1; }
.gs-done { background: var(--lime); color: var(--dark); font-weight: 600; }
/* a picture's Inspector */
.gs-image { position: absolute; left: 0; right: 0; top: 57px; opacity: 0; transition: opacity .2s, transform .35s ease; }
/* opening Adjustments scrolls the Inspector so its sliders and curve are in view */
.gm-demo[data-gm-adj="1"] .gs-image { transform: translateY(-169px); }
.gm-demo[data-gm-msel="1"] .gs-image { opacity: 1; }
.gm-demo[data-gm-msel="1"] :is(.gs-text, .gs-doc) { opacity: 0; }
.gs-image .gs-chev { width: 14px !important; height: 14px !important; }
.gs-fxrow { display: none; align-items: center; gap: 8px; height: 38px; margin: 0 0 4px; padding: 0 6px 0 8px; border: 1px solid var(--s-ctl-line); border-radius: 7px; background: var(--s-ctl); font-size: 13px; }
.gs-fxrow > span:nth-child(2) { flex: 1; }
.gs-fxchip { width: 22px; height: 22px; border-radius: 4px; background: linear-gradient(135deg, #0a201e, #427c6c); }
.gm-demo[data-gm-shirt="1"] .gs-fxrow { display: flex; }
.gm-demo[data-gm-shirt="1"] .gs-filters { padding-bottom: 14px; }
.gs-filters { padding-bottom: 0; }
/* the Filters palette: draggable, here set over the Layers panel so the picture stays in view */
.gs-fx {
  position: absolute; left: 60px; top: 170px; z-index: 28; width: 640px; height: 560px; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--s-ctl-line); border-radius: 12px; background: var(--s-ctl); box-shadow: 0 20px 60px #0e0c1355, 0 4px 12px #0e0c1330;
  opacity: 0; transform: translateY(8px) scale(.985); transition: opacity .2s, transform .2s; pointer-events: none;
}
.gm-demo[data-gm-fx="1"] .gs-fx { opacity: 1; transform: none; }
.gs-fx-head { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 10px 0 12px; border-bottom: 1px solid var(--s-ctl-line); }
.gs-fx-head b { font-size: 13.5px; font-weight: 600; }
.gs-fx-tabs { display: flex; gap: 2px; margin: 14px 18px 0; border-bottom: 1px solid var(--s-ctl-line); }
.gs-fx-tabs span { display: grid; place-items: center; height: 28px; padding: 0 9px; font-size: 12px; color: var(--muted); border-bottom: 1px solid transparent; margin-bottom: -1px; }
.gs-fx-tabs .gs-tab-all, .gm-demo[data-gm-fxtab="color"] .gs-fx-tabs .gs-tab-color { color: var(--ink); border-color: var(--focus); }
.gm-demo[data-gm-fxtab="color"] .gs-fx-tabs .gs-tab-all { color: var(--muted); border-color: transparent; }
.gs-fx-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(5, 108px); align-content: start; gap: 12px; padding: 12px 18px; overflow: hidden; }
.gs-grid-color, .gm-demo[data-gm-fxtab="color"] .gs-grid-all { display: none; }
.gm-demo[data-gm-fxtab="color"] .gs-grid-color { display: grid; }
.gs-tile { display: grid; gap: 4px; }
.gs-tthumb {
  display: grid; place-items: center; width: 108px; height: 108px; overflow: hidden; border-radius: 6px;
  background: repeating-conic-gradient(#302b38 0 25%, #2a2631 0 50%) 0 0 / 12px 12px;
}
.gs-tthumb img { width: 86%; height: 86%; object-fit: contain; }
.gs-tname { font-size: 10.5px; line-height: 13px; text-align: center; color: var(--muted); }
.gm-demo[data-gm-shirt="1"] .fx-duotone .gs-tthumb { box-shadow: 0 0 0 2px var(--s-ctl), 0 0 0 4px var(--focus); }
.fx-blur img { filter: blur(3px); } .fx-motion img { filter: blur(2px); } .fx-blur2 img { filter: blur(2.5px); } .fx-blur3 img { filter: blur(4px); }
.fx-sharp img { filter: contrast(1.3) brightness(1.2); } .fx-exposure img { filter: brightness(2.2); } .fx-contrast img { filter: contrast(2.2) brightness(1.5); }
.fx-levels img { filter: brightness(1.7) contrast(1.4); } .fx-hue img { filter: brightness(1.8) sepia(1) hue-rotate(250deg) saturate(2); }
.fx-balance img { filter: brightness(1.9) sepia(.7) hue-rotate(160deg); } .fx-grading img { filter: brightness(1.8) sepia(.8) hue-rotate(-20deg) saturate(1.6); }
.fx-temp img { filter: brightness(1.8) sepia(.9); } .fx-mono img { filter: grayscale(1) brightness(1.7); }
.fx-overlay img { filter: brightness(0) invert(27%) sepia(90%) saturate(4000%) hue-rotate(352deg); } .fx-gmap img { filter: brightness(2) sepia(1) hue-rotate(290deg) saturate(3); }
.fx-thermal img { filter: brightness(2.4) invert(1) hue-rotate(180deg) saturate(4); } .fx-matrix img { filter: brightness(1.8) sepia(.5) hue-rotate(90deg) saturate(3); }
.fx-rgb img { filter: brightness(1.7) sepia(.6) hue-rotate(110deg) saturate(2); } .fx-dither img { filter: grayscale(1) contrast(3) brightness(1.6); }
.gs-fx-foot { display: flex; justify-content: flex-end; align-items: center; height: 56px; padding: 0 14px; border-top: 1px solid var(--s-ctl-line); }
.gs-fx-done { display: grid; place-items: center; height: 34px; padding: 0 16px; border-radius: 6px; background: var(--lime); color: var(--dark); font-size: 13.5px; font-weight: 550; }
/* phones keep the canvas: no menus, bars or palette */
.gm-demo[data-gm-size="narrow"] :is(.gs-smenu, .gs-ai, .gs-wandbar, .gs-fx) { display: none; }
.gm-demo[data-gm-size="narrow"] .gs-opts-photo { left: 238px; }

/* Adjustments (the picture's Camera Raw sliders, ui/Slider.tsx): opened after
   the Duotone, Saturation dragged up; the picture follows */
.gs-adj { padding-bottom: 0; }
.gs-adj-head .gs-adj-chev .gm-ic { transition: transform .2s; }
.gm-demo[data-gm-adj="1"] .gs-adj-head .gs-adj-chev .gm-ic { transform: rotate(90deg); }
.gs-adj-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.gm-demo[data-gm-adj="1"] .gs-adj-body { grid-template-rows: 1fr; }
.gs-adj-inner { min-height: 0; overflow: hidden; }
.gm-demo[data-gm-adj="1"] .gs-adj-inner { padding-bottom: 14px; }
.gs-sl { --v: 0; display: grid; grid-template-columns: 78px minmax(0, 1fr) 44px; align-items: center; column-gap: 10px; min-height: 30px; }
.gs-sl-label { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.gs-sl-track {
  position: relative; height: 20px;
  background: linear-gradient(#5f5968, #5f5968) center / 1px 6px no-repeat, linear-gradient(var(--s-ctl-line), var(--s-ctl-line)) center / 100% 2px no-repeat;
}
.gs-sl-fill { position: absolute; top: 9px; height: 2px; left: 50%; width: calc(var(--v) * .5%); background: #8a7cb0; transition: width .55s ease; }
.gs-sl-thumb {
  position: absolute; top: 5px; left: calc(50% + var(--v) * .5%); width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
  background: var(--s-panel); border: 1px solid var(--muted); transition: left .55s ease;
}
.gs-sl-num { display: flex; align-items: center; height: 28px; padding: 0 7px; border: 1px solid var(--s-ctl-line); border-radius: 7px; background: var(--s-ctl); font-size: 13px; font-variant-numeric: tabular-nums; }
.gm-demo[data-gm-sat="1"] .gs-sl[data-k="saturation"] { --v: 35; }
.gm-demo[data-gm-sat="1"] .gs-sl[data-k="saturation"] .gs-sl-thumb { border-color: var(--ink); box-shadow: 0 0 0 3px #c9baff40; }
/* the picture's saturation, applied to the whole layer: skin warms, the shirt deepens */
.gs-frame :is(.gm-l-model, .gm-l-shirt) img { transition: filter .55s ease; }
.gm-demo[data-gm-sat="1"] .gs-frame .gm-l-model img { filter: saturate(1.35); }
.gm-demo[data-gm-sat="1"] .gs-frame .gm-l-shirt img { filter: saturate(1.45) brightness(1.03); }
.gm-demo[data-gm-drag="1"] .gm-cursor { transition-duration: .47s; }

/* the tone curve under the sliders: RGB / R / G / B, the curve, and the
   picture's histogram behind it, which shifts as Saturation goes up */
.gs-curve { margin-top: 12px; }
.gs-curve-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.gs-curve-bar > span:first-child { flex: 1; font-size: 12.5px; color: var(--muted); }
.gs-curve-tabs { display: flex; gap: 2px; padding: 2px; border-radius: 7px; background: var(--s-ctl); }
.gs-curve-tabs > * { display: flex; align-items: center; gap: 4px; height: 24px; padding: 0 7px; border-radius: 5px; font-size: 11.5px; font-weight: 500; color: var(--s-icon); }
.gs-curve-tabs b { background: var(--s-sel); color: var(--s-sel-ink); font-weight: 600; }
.gs-curve-tabs i { width: 7px; height: 7px; border-radius: 50%; }
.gs-curve-reset { display: grid; place-items: center; width: 24px; height: 24px; color: var(--s-icon); opacity: .35; }
.gs-curve-reset .gm-ic { width: 14px; height: 14px; }
.gs-curve-graph { display: block; width: 100%; height: auto; border-radius: 6px; background: #1c1922; }
.gs-hist path { opacity: .26; }
.gs-hist { transition: opacity .6s ease; }
.gs-hist-after, .gm-demo[data-gm-sat="1"] .gs-hist-before { opacity: 0; }
.gm-demo[data-gm-sat="1"] .gs-hist-after { opacity: 1; }
.gs-grid path { stroke: var(--s-line); stroke-width: 1; fill: none; }
.gs-diag { stroke: var(--s-ctl-line); stroke-width: 1; fill: none; }
.gs-line { stroke: var(--ink); stroke-width: 1.75; fill: none; }
.gs-pt { fill: var(--ink); stroke: var(--muted); stroke-width: 1.5; }

/* the ending: the frame selected (label, box, Frame panel), then the phone
   icon opens the editor's mobile preview with the post on Instagram */
.gs-fsel { position: absolute; left: var(--fx); top: var(--fy); height: var(--fh); aspect-ratio: 1080 / 1350; transform: translateX(-50%); border: 1px solid #4a88ff; opacity: 0; transition: opacity .15s; pointer-events: none; }
.gs-fsel b { position: absolute; width: 7px; height: 7px; background: #fff; border: 1px solid #4a88ff; }
.gs-fsel b:nth-child(1) { left: -4px; top: -4px; } .gs-fsel b:nth-child(2) { right: -4px; top: -4px; }
.gs-fsel b:nth-child(3) { left: -4px; bottom: -4px; } .gs-fsel b:nth-child(4) { right: -4px; bottom: -4px; }
.gm-demo[data-gm-fsel="1"] .gs-fsel { opacity: 1; }
.gs-flabel { transition: color .15s; }
/* then its Background, through the same colour picker: from white to a light
   blue, cool beside the red line and the pine shirt (HSV 205°, 20%, 97%: the
   hue moves to blue, then a click near the square's white corner) */
.gs { --gm-bg: #c6e3f7; }
.gs-frame .gm-cover { transition: background-color .45s ease; }
.gm-demo[data-gm-bg="1"] .gs-frame .gm-cover { background-color: var(--gm-bg); }
.gs-bgchip { background: #fff; transition: background .3s; }
.gm-demo[data-gm-bg="1"] .gs-bgchip { background: var(--gm-bg); }
.gm-demo[data-gm-bgpick="1"] .gs-pick { opacity: 1; transform: none; }
.gm-demo[data-gm-bgpick="1"] .gs-sv-dot { left: 0; top: 0; background: #fff; }
.gm-demo[data-gm-bgpick="1"] .gs-alpha { --a: #ffffff; }
.gm-demo[data-gm-bgpick="1"][data-gm-bg="0"] .gs-sw-grid i:nth-child(3) { box-shadow: 0 0 0 2px var(--s-ctl), 0 0 0 3px var(--focus); }
.gm-demo[data-gm-bghue="1"] .gs-sv { --sv: #0095ff; }
.gm-demo[data-gm-bghue="1"] .gs-hue i { left: 117px; background: #0095ff; }
.gm-demo[data-gm-bg="1"] .gs-sv-dot { left: 50px; top: 5px; background: var(--gm-bg); }
.gm-demo[data-gm-bg="1"] .gs-alpha { --a: var(--gm-bg); }
.gm-demo[data-gm-fsel="1"] .gs-flabel { color: #4a88ff; }
.gm-demo[data-gm-fsel="1"] .gs-frow { background: var(--s-sel); }
.gm-demo[data-gm-fsel="1"] .gs-frow .gs-lic { color: var(--s-sel-ink); }
.gs-frameinsp { position: absolute; left: 0; right: 0; top: 57px; opacity: 0; transition: opacity .2s; }
.gm-demo[data-gm-fsel="1"] .gs-frameinsp { opacity: 1; }
.gm-demo[data-gm-fsel="1"] .gs-doc { opacity: 0; }
.gs-dims { grid-template-columns: 1fr 1fr 26px; align-items: center; }
.gs-link { display: grid; place-items: center; color: var(--s-icon); }
.gs-link .gm-ic { width: 17px; height: 17px; }
.gs-flip { height: 38px; }
.gs-toggle-row { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.gs-switch { position: relative; width: 30px; height: 18px; border-radius: 99px; background: #514b59; }
.gs-switch::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); }
.gs-phone-btn { transition: background .15s, color .15s; }
.gm-demo[data-gm-phone="1"] .gs-phone-btn { background: var(--s-ctl-line); color: var(--ink); }

/* the floating preview (MobilePreview.tsx), the phone shell (preview-phone.css)
   and the Instagram post (SocialPhone.tsx / social-preview.css) at their sizes,
   floating on the right over the Inspector so the post on the canvas stays in view,
   in from the screen's edge, its bar ending just short of the Export button */
.gs-preview {
  position: absolute; right: 108px; top: 39px; z-index: 40; width: 340px; display: flex; flex-direction: column; align-items: center; gap: 12px;
  opacity: 0; transform: translateY(10px) scale(.98); transform-origin: 50% 0; transition: opacity .25s, transform .3s cubic-bezier(.22, 1, .36, 1); pointer-events: none;
}
.gm-demo[data-gm-phone="1"] .gs-preview { opacity: 1; transform: none; }
.gs-pbar, .gs-pfoot { display: flex; align-items: center; height: 38px; padding: 3px 6px; border: 1px solid var(--s-ctl-line); border-radius: 8px; background: #19151f; }
.gs-pbar { width: 100%; }
.gs-pfoot { gap: 4px; padding: 3px 4px; }
.gs-pbtn { display: grid; place-items: center; width: 34px; height: 30px; flex: none; border-radius: 7px; color: var(--s-icon); }
.gs-pbtn .gm-ic { width: 17px; height: 17px; }
.gs-pprev .gm-ic { transform: scaleX(-1); }
.gs-ppick { display: flex; align-items: center; justify-content: space-between; flex: 1; min-width: 0; height: 28px; padding: 0 6px; font-size: 13px; color: var(--ink); }
.gs-ppick .gm-ic { width: 14px; height: 14px; }
.gs-phone {
  position: relative; width: 340px; padding: 5px; border: 1px solid #b9b8b587; border-radius: 44px;
  background: linear-gradient(110deg, #d3d0c9, #7c7c78 8%, #bebbb4 48%, #777772 92%, #e2dfd7);
  box-shadow: inset 0 0 0 1px #ffffff36, inset 0 1px 2px #ffffffe0, 0 2px 2px #000a, 0 15px 24px #0004, 0 36px 55px #0006;
}
.gs-phone::before { content: ""; position: absolute; inset: 2px; border-radius: 42px; background: #08090b; }
.gs-pkey { position: absolute; width: 2px; background: linear-gradient(180deg, #d3d0c7, #74736e 35% 75%, #bbb8ae); }
.gs-pkey-a { left: -2px; top: 15%; height: 3%; border-radius: 2px 0 0 2px; }
.gs-pkey-v { left: -2px; top: 22%; height: 6%; border-radius: 2px 0 0 2px; box-shadow: 0 64px 0 0 #8a8984; }
.gs-pkey-p { right: -2px; top: 27%; height: 11%; border-radius: 0 2px 2px 0; }
.gs-pscreen {
  position: relative; z-index: 1; display: flex; flex-direction: column; width: 328px; height: 711px; overflow: hidden; border-radius: 39px;
  background: #fff; color: #191a1d; box-shadow: 0 0 0 1px #000; font: 400 12px/1.45 Inter, Arial, sans-serif; letter-spacing: 0;
}
.gs-pisland { position: absolute; z-index: 3; left: 50%; top: 9px; width: 95px; height: 26px; transform: translateX(-50%); border-radius: 33px; background: #08090b; }
.gs-pstatus { display: flex; justify-content: space-between; align-items: center; flex: 0 0 39px; padding: 0 23px; font-size: 13.1px; font-weight: 600; line-height: 1; }
.gs-picons { display: flex; align-items: center; gap: 4.6px; }
.gs-picons svg { display: block; width: 16px; height: 13px; fill: currentColor; }
.gs-picons svg:last-child { width: 23px; }
.gs-pappbar { display: flex; align-items: center; justify-content: space-between; flex: 0 0 39px; padding: 6.5px 13px; border-bottom: 1px solid #ededed; }
.gs-pappbar img { width: 112px; height: auto; }
.sp-ic { display: block; flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.gs-pfeed { flex: 1; min-height: 0; overflow: hidden; background: #fff; }
.gs-powner { display: flex; align-items: center; gap: 8px; padding: 10px 11.5px; }
.gs-powner > span:nth-child(2) { flex: 1; min-width: 0; }
.gs-powner strong { display: block; font-size: 12.5px; font-weight: 600; line-height: 18px; }
.gs-powner small { display: block; font-size: 9.5px; line-height: 14px; color: #5c5c60; }
.gs-powner .sp-kebab { width: 15px; height: 15px; }
.sp-av {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; padding: 1.6px; border: 1.6px solid transparent; border-radius: 50%;
  background: linear-gradient(#fff, #fff) padding-box, conic-gradient(#bc28ab, #704bdb, #fa9f35, #ed4264, #bc28ab) border-box;
}
.sp-av > span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #24212c; color: #fff; font-size: 13px; font-weight: 600; }
.sp-av-sm { width: 20px; height: 20px; padding: 1px; border-width: 1px; }
.sp-av-sm > span { font-size: 9.8px; }
.gs-pmedia { position: relative; width: 328px; height: 410px; overflow: hidden; background: #f4f3f6; }
.gs-pmedia .gs-frame { left: 0; top: 0; width: 100%; height: 100%; transform: none; }
.gs-phone-art :is(.gm-sel, .gm-ants, .gs-textsel, .gm-pointer) { display: none; }
.gs-pengage { display: flex; align-items: center; gap: 10px; padding: 10px 11.5px; }
.gs-pengage > span { display: flex; align-items: center; gap: 3px; }
.gs-pengage b { font-size: 10.5px; font-weight: 600; }
.gs-pengage .sp-save { margin-left: auto; }
.sp-liked .sp-ic { fill: #ff3040; stroke: #ff3040; }
.gs-pcaption { margin: 0; padding: 0 11.5px; font-size: 11.15px; line-height: 1.45; }
.gs-pcaption strong { font-weight: 600; }
.gs-pcaption span { color: #214f78; }
.gs-pcomments { margin: 4px 0 0; padding: 0 11.5px; font-size: 10.5px; color: #666; }
.gs-ptime { margin: 4px 0 0; padding: 0 11.5px; font-size: 8.9px; color: #666; }
.gs-pnav { display: flex; align-items: center; justify-content: space-around; flex: none; padding: 10px 13px 6.5px; border-top: 1px solid #ededed; background: #fff; }
.gs-phome { position: relative; display: block; flex: 0 0 16px; }
.gs-phome::after { content: ""; position: absolute; left: 34%; right: 34%; bottom: 6px; height: 4px; border-radius: 100px; background: #242527; }
.gm-demo[data-gm-size="narrow"] .gs-preview { left: 238px; right: auto; top: 8px; transform: translate(-50%, 10px) scale(.86); }
.gm-demo[data-gm-size="narrow"][data-gm-phone="1"] .gs-preview { transform: translate(-50%, 0) scale(.86); }