.variant-v1 {
  --ig-bg: oklch(97% .009 240);
  --ig-surface: oklch(100% 0 0);
  --ig-raised: oklch(94% .018 235);
  --ig-line: oklch(87% .018 240);
  --ig-text: oklch(25% .035 252);
  --ig-muted: oklch(54% .03 248);
  --ig-blue: oklch(54% .17 241);
  --ig-cyan: oklch(80% .13 205);
  --ig-green: oklch(78% .15 150);
  --flow-width: 90rem;
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-out-quart: cubic-bezier(.25, 1, .5, 1);
  --motion-fast: 160ms;
  --motion-base: 260ms;
  --motion-focus: 420ms;
  --color-bg: var(--ig-bg);
  --color-bg-deep: var(--ig-bg);
  --color-surface: var(--ig-surface);
  --color-surface-raised: var(--ig-raised);
  --color-text: var(--ig-text);
  --color-muted: var(--ig-muted);
  --color-faint: var(--ig-muted);
  --color-action: var(--ig-blue);
  --color-action-hover: oklch(49% .18 241);
  --color-action-ink: white;
  --color-border: var(--ig-line);
  --color-border-strong: oklch(72% .03 245);
  --color-success: var(--ig-green);
  --color-focus: var(--ig-cyan);
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color-scheme: light;
  overflow-x: hidden;
  background: var(--ig-bg);
  color: var(--ig-text);
}

.variant-v1 ::selection { background: color-mix(in oklch, var(--ig-blue) 24%, white); color: var(--ig-text); }
.variant-v1 .site-header {
  position: sticky;
  inset: 0 0 auto;
  z-index: 30;
  width: 100%;
  min-height: 3.75rem;
  margin: 0;
  padding-inline: max(var(--gutter), calc((100% - var(--flow-width)) / 2));
  border-bottom: var(--border) solid var(--ig-line);
  background: color-mix(in oklch, white 92%, transparent);
  backdrop-filter: blur(.75rem);
}
.variant-v1 .brand { min-height: 3.75rem; gap: var(--space-2); font-family: var(--font-body); text-decoration: none; }
.variant-v1 .brand-mark { position: relative; width: 1.6rem; height: 1.6rem; border-radius: .48rem; background: var(--ig-blue); }
.variant-v1 .brand-mark::before { content: ""; position: absolute; inset: .38rem; border: .125rem solid white; border-radius: 50%; }
.variant-v1 .brand-name { color: var(--ig-text); font-weight: 800; letter-spacing: -.025em; white-space: nowrap; }
.variant-v1 .header-actions { display: flex; align-items: center; gap: var(--space-3); }
.variant-v1 .header-method { color: var(--ig-muted); font: .6875rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.variant-v1 .motion-stop,
.variant-v1 .header-product-link { display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; border-radius: var(--radius-sm); font-size: var(--type-small); font-weight: 750; }
.variant-v1 .motion-stop { padding-inline: var(--space-3); border: var(--border) solid var(--ig-line); background: transparent; color: var(--ig-text); cursor: pointer; }
.variant-v1 .motion-stop[aria-pressed="true"] { color: var(--ig-muted); cursor: default; }
.variant-v1 .header-product-link { padding-inline: var(--space-4); background: var(--ig-blue); color: var(--color-action-ink); text-decoration: none; white-space: nowrap; }
.variant-v1 .review-switcher { gap: var(--space-1); }
.variant-v1 .review-switcher a { min-width: 2.75rem; min-height: 2.75rem; border-radius: var(--radius-sm); }
.variant-v1 .review-switcher a[aria-current="page"] { border-color: var(--ig-line); background: var(--ig-raised); color: var(--ig-text); }

.variant-v1 .hero {
  position: relative;
  display: block;
  width: 100%;
  min-height: 360svh;
  margin: 0;
  align-content: normal;
  overflow: clip;
  padding-block: 0;
  border-bottom: var(--border) solid var(--ig-line);
  background: linear-gradient(180deg, #f7fbfe 0%, var(--ig-bg) 48%, #e9f2f8 100%);
  text-align: center;
}
.variant-v1 .hero-stage {
  position: sticky;
  top: 3.75rem;
  display: grid;
  width: min(calc(100% - 2 * var(--gutter)), var(--flow-width));
  min-height: calc(100svh - 3.75rem);
  margin-inline: auto;
  align-items: start;
  justify-items: center;
  overflow: clip;
  padding: clamp(2.25rem, 6svh, 4.75rem) 0 clamp(1.5rem, 4svh, 3rem);
}
.variant-v1 .hero-copy {
  position: relative;
  z-index: 2;
  width: min(100%, 68rem);
  max-width: none;
  margin-top: clamp(.5rem, 1.5svh, 1rem);
}
.variant-v1 .hero h1 { max-width: 14ch; margin: 0 auto; font-size: clamp(3rem, 4.7vw, 5.2rem); font-weight: 790; line-height: .96; letter-spacing: -.04em; text-wrap: balance; }
.variant-v1 .hero h1 em { color: var(--ig-blue); font-style: normal; }
.variant-v1 .hero-subline { max-width: 42rem; margin: var(--space-3) auto 0; color: color-mix(in oklch, var(--ig-text) 76%, var(--ig-muted)); font-size: clamp(1rem, .92rem + .3vw, 1.16rem); line-height: 1.55; text-wrap: pretty; }
.variant-v1 .hero-cta { position: relative; z-index: 2; display: inline-flex; min-height: 3.75rem; align-items: center; gap: var(--space-3); margin-top: var(--space-5); padding-inline: var(--space-5); border-radius: .75rem; background: var(--ig-blue); color: var(--color-action-ink); font-weight: 850; text-decoration: none; box-shadow: 0 1rem 3rem color-mix(in oklch, var(--ig-blue) 16%, transparent); transition: background-color var(--motion-fast) var(--ease-out-expo); }
.variant-v1 .hero-cta svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; transition: transform var(--motion-fast) var(--ease-out-expo); }
.variant-v1 .hero-robot-visual {
  position: absolute;
  z-index: 3;
  inset: auto 0 7rem;
  height: min(52svh, 32rem);
  overflow: visible;
  opacity: var(--hero-robot-opacity, 0);
  pointer-events: none;
  transform: translate3d(0, var(--hero-robot-y, 2rem), 0);
}
.variant-v1 .hero.has-robot-canvas2d .hero-robot-visual::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 8% 2.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(37 85 113 / 17%), transparent 70%);
  filter: blur(.75rem);
}
.variant-v1 .hero-robot-canvas { display: block; width: 100%; height: 100%; opacity: 0; }
.variant-v1 .hero.has-robot-webgl .hero-robot-canvas,
.variant-v1 .hero.has-robot-canvas2d .hero-robot-canvas { opacity: 1; }
.variant-v1 .workflow-scene,
.variant-v1 .final-cta { width: min(calc(100% - 2 * var(--gutter)), var(--flow-width)); }
.variant-v1 .workflow-scene { position: relative; display: block; min-height: 180svh; padding: 0; border-top: var(--border) solid var(--ig-line); }
.variant-v1 .scene-stick {
  position: sticky;
  top: 3.75rem;
  display: grid;
  min-height: calc(100svh - 3.75rem);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(1rem, 2.2svh, 1.5rem);
  align-content: center;
  align-items: stretch;
  justify-items: center;
  padding-block: clamp(1rem, 2.4svh, 2rem);
}
.variant-v1 .scene-stick::before { content: ""; position: absolute; inset: 0 0 auto; height: .125rem; background: var(--ig-blue); transform: scaleX(var(--scene-progress, 0)); transform-origin: left; transition: transform 80ms linear; }
.variant-v1 .scene-heading { width: min(100%, 72rem); max-width: none; margin: 0 auto; text-align: center; }
.variant-v1 .scene-heading h2 { max-width: 30ch; margin: var(--space-2) auto 0; font-size: clamp(2rem, 1.55rem + 1.45vw, 3.25rem); font-weight: 780; line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; }
.variant-v1 .scene-heading > p:last-child { max-width: 64ch; margin: var(--space-3) auto 0; color: var(--ig-muted); font-size: clamp(1rem, .94rem + .18vw, 1.12rem); line-height: 1.48; text-wrap: pretty; }
.variant-v1 .scene-index { margin: 0; color: var(--ig-blue); font: 800 .8125rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.variant-v1 .product-window { width: min(100%, 76rem); min-width: 0; justify-self: center; overflow: hidden; border-radius: 1rem; background: var(--ig-surface); box-shadow: 0 1.5rem 4rem rgb(34 62 88 / 13%); }
.variant-v1 .final-cta { margin-block: var(--space-9); padding: var(--space-9); border: var(--border) solid var(--ig-line); border-radius: var(--radius-md); background: var(--ig-surface); text-align: center; }
.variant-v1 .final-cta h2 { max-width: 24ch; margin-inline: auto; font-size: clamp(2rem, 1.6rem + 1.2vw, 3rem); line-height: 1; letter-spacing: -.04em; }
.variant-v1 .final-cta .primary-link { margin: var(--space-6) auto 0; }
.variant-v1 .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.variant-v1 .concept-lab[hidden] { display: none; }
.variant-v1 .concept-lab { position: fixed; z-index: 60; left: 1rem; bottom: max(1rem, env(safe-area-inset-bottom)); display: grid; width: min(calc(100% - 2rem), 48rem); grid-template-columns: minmax(9rem, auto) minmax(0, 1fr); gap: var(--space-3); align-items: center; padding: .6rem; border: 1px solid rgb(35 69 91 / 16%); border-radius: .9rem; background: rgb(255 255 255 / 94%); box-shadow: 0 1rem 3rem rgb(26 55 76 / 19%); backdrop-filter: blur(1rem); transition: opacity var(--motion-fast) linear, translate var(--motion-base) var(--ease-out-quart); }
.variant-v1.hero-story-active .concept-lab { opacity: 0; translate: 0 calc(100% + 2rem); pointer-events: none; }
.variant-v1.concept-review { padding-bottom: 5.5rem; }
.variant-v1 .concept-lab-copy { min-width: 0; padding-inline: .45rem; }
.variant-v1 .concept-lab-copy strong,
.variant-v1 .concept-lab-copy span { display: block; }
.variant-v1 .concept-lab-copy strong { color: var(--ig-text); font-size: .76rem; }
.variant-v1 .concept-lab-copy span { margin-top: .18rem; overflow: hidden; color: var(--ig-muted); font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.variant-v1 .concept-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .35rem; }
.variant-v1 .concept-options button { display: grid; min-width: 0; min-height: 3.25rem; grid-template-rows: 1.3rem auto; justify-items: center; gap: .12rem; align-items: center; padding: .25rem .35rem; border: 1px solid transparent; border-radius: .65rem; background: #f2f6f9; color: var(--ig-muted); cursor: pointer; }
.variant-v1 .concept-options button[aria-pressed="true"] { border-color: color-mix(in oklch, var(--ig-blue) 52%, white); background: color-mix(in oklch, var(--ig-blue) 10%, white); color: var(--ig-text); box-shadow: inset 0 0 0 1px rgb(22 135 248 / 8%); }
.variant-v1 .concept-options button:focus-visible { outline: .16rem solid var(--ig-blue); outline-offset: .12rem; }
.variant-v1 .concept-options button b { min-width: 0; max-width: 100%; overflow: hidden; font-size: .64rem; text-overflow: ellipsis; }
.variant-v1 .concept-glyph { position: relative; display: block; width: 1.55rem; height: 1.3rem; overflow: hidden; border: 1px solid currentColor; border-radius: .22rem; color: var(--ig-blue); }
.variant-v1 .concept-glyph span { position: absolute; display: block; border-radius: .08rem; background: currentColor; opacity: .78; }
.variant-v1 .glyph-dialog span:nth-child(1) { inset: .22rem .52rem auto .2rem; height: .18rem; }
.variant-v1 .glyph-dialog span:nth-child(2) { inset: .52rem .2rem auto .48rem; height: .18rem; }
.variant-v1 .glyph-dialog span:nth-child(3) { inset: .82rem .62rem auto .2rem; height: .14rem; }
.variant-v1 .glyph-split span:nth-child(1) { inset: 0 auto 0 0; width: .38rem; border-radius: 0; opacity: .3; }
.variant-v1 .glyph-split span:nth-child(2) { inset: .25rem .18rem auto .58rem; height: .18rem; }
.variant-v1 .glyph-split span:nth-child(3) { inset: .62rem .18rem .2rem .58rem; }
.variant-v1 .glyph-edit { background: #0e1727; }
.variant-v1 .glyph-edit span:nth-child(1) { inset: .2rem; height: .15rem; background: #6bcaff; }
.variant-v1 .glyph-edit span:nth-child(2) { inset: .55rem .68rem .18rem .2rem; background: #44d49b; }
.variant-v1 .glyph-edit span:nth-child(3) { inset: .55rem .2rem .18rem .95rem; background: #ffcc60; }
.variant-v1 .glyph-board span:nth-child(1) { inset: .18rem .82rem .18rem .18rem; }
.variant-v1 .glyph-board span:nth-child(2) { inset: .18rem .18rem .72rem .92rem; }
.variant-v1 .glyph-board span:nth-child(3) { inset: .62rem .18rem .18rem .92rem; opacity: .38; }
.variant-v1 .glyph-sheet span:nth-child(1) { inset: .22rem .25rem auto; height: .14rem; }
.variant-v1 .glyph-sheet span:nth-child(2) { inset: .5rem .25rem auto; height: .12rem; opacity: .4; }
.variant-v1 .glyph-sheet span:nth-child(3) { inset: .76rem .55rem .18rem .25rem; opacity: .25; }

.variant-v1 .messenger-window { display: grid; height: min(47rem, calc(100svh - 15rem)); grid-template-rows: auto minmax(0, 1fr) auto; }
.variant-v1 .product-bar { display: grid; min-height: 4rem; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: .55rem var(--space-4); border-bottom: var(--border) solid var(--ig-line); background: white; }
.variant-v1 .product-mark { display: grid; width: 2.65rem; height: 2.65rem; place-items: center; border-radius: .7rem; background: var(--ig-blue); color: white; font-size: 1.05rem; font-weight: 900; }
.variant-v1 .product-bar strong,
.variant-v1 .product-bar small { display: block; }
.variant-v1 .product-bar strong { font-size: .95rem; }
.variant-v1 .product-bar small { margin-top: .15rem; overflow: hidden; color: var(--ig-muted); font-size: .8125rem; text-overflow: ellipsis; white-space: nowrap; }
.variant-v1 .product-bar > b { padding: .48rem .65rem; border-radius: .4rem; background: var(--ig-raised); color: var(--ig-blue); font: 800 .75rem/1 var(--font-mono); text-transform: uppercase; }

.variant-v1 .chat-thread { display: grid; min-height: 0; overflow: auto; align-content: start; gap: .7rem; padding: 1rem 1.25rem; background-color: #eaf3f8; background-image: radial-gradient(circle at center, rgb(79 132 165 / 8%) 1px, transparent 1px); background-size: 1.4rem 1.4rem; scrollbar-color: color-mix(in oklch, var(--ig-blue) 45%, white) transparent; }
.variant-v1 .chat-message { width: min(100%, 54rem); }
.variant-v1 .chat-message > span { display: block; margin-bottom: .35rem; color: var(--ig-muted); font: 800 .75rem/1 var(--font-mono); text-transform: uppercase; }
.variant-v1 .chat-message > p,
.variant-v1 .chat-message > div { margin: 0; padding: .85rem 1rem; border-radius: .75rem; font-size: clamp(.95rem, .9rem + .18vw, 1.06rem); line-height: 1.42; box-shadow: 0 .2rem .7rem rgb(42 72 96 / 9%); }
.variant-v1 .chat-user { justify-self: end; width: min(90%, 48rem); }
.variant-v1 .chat-user > span { text-align: right; }
.variant-v1 .chat-user > p { background: var(--ig-blue); color: white; font-weight: 700; }
.variant-v1 .chat-ai { justify-self: start; }
.variant-v1 .chat-ai > div { border: var(--border) solid #dce8ef; background: white; }
.variant-v1 .chat-ai strong { color: var(--ig-blue); }
.variant-v1 .chat-ai p { margin: var(--space-2) 0 0; }
.variant-v1 .chat-delivery { justify-self: end; margin: calc(-1 * var(--space-2)) 0 0; color: var(--ig-muted); font: 800 .75rem/1.3 var(--font-mono); }
.variant-v1 .chat-delivery span { color: var(--ig-blue); }
.variant-v1 .chat-context { display: flex; gap: var(--space-3); align-items: center; width: fit-content; padding: .55rem .75rem; border-radius: .5rem; background: rgb(255 255 255 / 76%); color: var(--ig-muted); font-size: .875rem; }
.variant-v1 .chat-context span { font-family: var(--font-mono); }
.variant-v1 .chat-context strong { color: var(--ig-text); }

.variant-v1 .ai-action-list { display: grid; width: min(100%, 44rem); gap: 0; margin: 0; padding: .12rem .85rem; border: var(--border) solid #dce8ef; border-radius: .75rem; background: rgb(255 255 255 / 88%); list-style: none; }
.variant-v1 .ai-action-list li { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: .6rem; align-items: center; padding-block: .36rem; border-bottom: var(--border) solid #e3edf2; }
.variant-v1 .ai-action-list li:last-child { border-bottom: 0; }
.variant-v1 .ai-action-list li > i { width: .68rem; height: .68rem; border: .12rem solid color-mix(in oklch, var(--ig-blue) 34%, white); border-radius: 50%; background: white; }
.variant-v1 .ai-action-list strong,
.variant-v1 .ai-action-list small { display: block; }
.variant-v1 .ai-action-list strong { font-size: .74rem; }
.variant-v1 .ai-action-list small { margin-top: .08rem; color: var(--ig-muted); font-size: .64rem; }
.variant-v1 .ai-action-list .is-active > i { border-color: var(--ig-blue); box-shadow: 0 0 0 .22rem color-mix(in oklch, var(--ig-blue) 14%, transparent); }
.variant-v1 .ai-action-list .is-complete > i { border-color: var(--ig-green); background: var(--ig-green); }
.variant-v1 .ai-focus-slot { display: grid; width: min(100%, 54rem); gap: .55rem; }
.variant-v1 .ai-focus-step { display: grid; min-height: 4.25rem; grid-template-columns: 1.7rem minmax(0, 1fr); gap: .85rem; align-items: center; padding: .75rem 1rem; border: var(--border) solid #d8e7ef; border-radius: .75rem; background: rgb(255 255 255 / 94%); box-shadow: 0 .3rem 1rem rgb(42 72 96 / 8%); }
.variant-v1 .ai-focus-step > i { position: relative; width: 1.55rem; height: 1.55rem; border: .12rem solid color-mix(in oklch, var(--ig-blue) 28%, white); border-radius: 50%; }
.variant-v1 .ai-focus-step > i::before { content: ""; position: absolute; inset: .27rem; border-radius: 50%; background: var(--ig-blue); }
.variant-v1 .ai-focus-step strong,
.variant-v1 .ai-focus-step small { display: block; }
.variant-v1 .ai-focus-step strong { font-size: .95rem; }
.variant-v1 .ai-focus-step small { margin-top: .22rem; color: var(--ig-muted); font-size: .8125rem; line-height: 1.4; }
.variant-v1 .idea-focus .ai-focus-step strong { overflow: hidden; font-size: clamp(.98rem, .9rem + .25vw, 1.15rem); text-overflow: ellipsis; white-space: nowrap; }
.variant-v1 .idea-focus .ai-focus-step { padding-inline: 0; border: 0; background: transparent; box-shadow: none; }

.variant-v1 .source-evidence { width: min(100%, 54rem); padding: .75rem; border: var(--border) solid #dce8ef; border-radius: .75rem; background: white; }
.variant-v1 .source-evidence > header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.variant-v1 .source-evidence > header span { color: var(--ig-muted); font: 750 .75rem/1 var(--font-mono); text-transform: uppercase; }
.variant-v1 .source-evidence > header strong { color: var(--ig-blue); font-size: .95rem; }
.variant-v1 .source-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); }
.variant-v1 .source-strip figure { position: relative; min-width: 0; overflow: hidden; aspect-ratio: 4 / 3.7; margin: 0; border-radius: .45rem; background: var(--ig-raised); }
.variant-v1 .source-strip img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.variant-v1 .source-strip figcaption { position: absolute; inset: auto .3rem .3rem; padding: .26rem .35rem; border-radius: .25rem; background: rgb(4 14 24 / 78%); color: white; font: 800 .6875rem/1 var(--font-mono); text-align: center; }
.variant-v1 .idea-answer { width: min(100%, 54rem); }
.variant-v1 .script-answer { width: min(100%, 58rem); }
.variant-v1 .simple-script-thread { gap: 1rem; align-content: start; padding: clamp(1rem, 2.5vw, 1.75rem); }
.variant-v1 .simple-script-thread .chat-user { width: min(86%, 45rem); }
.variant-v1 .script-ready { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-bottom: .5rem; border-bottom: var(--border) solid var(--ig-line); }
.variant-v1 .script-ready strong { color: var(--ig-text); }
.variant-v1 .script-ready span { padding: .35rem .5rem; border-radius: .35rem; background: #eaf5ff; color: #086cae; font: 800 .8125rem/1 var(--font-mono); white-space: nowrap; }
.variant-v1 .script-copy { padding-top: .35rem; }
.variant-v1 .script-copy p { margin: 0; padding-top: .62rem; font-size: clamp(1rem, .95rem + .12vw, 1.075rem); line-height: 1.5; }
.variant-v1 .product-input { display: grid; min-height: 3.5rem; grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem; gap: var(--space-2); align-items: center; padding: .35rem var(--space-3); border-top: var(--border) solid var(--ig-line); background: white; color: var(--ig-muted); }
.variant-v1 .composer-attach,
.variant-v1 .product-input > i { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: 50%; }
.variant-v1 .composer-field { min-width: 0; overflow: hidden; padding: .58rem var(--space-4); border: var(--border) solid var(--ig-line); border-radius: 1.5rem; background: #f7f9fb; text-overflow: ellipsis; white-space: nowrap; }
.variant-v1 .product-input > i { background: var(--ig-blue); color: white; font-style: normal; }
.variant-v1 .product-input svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.variant-v1 .editor-window { background: white; }
.variant-v1 .editor-window { height: min(47rem, calc(100svh - 15rem)); overflow: hidden; }
.variant-v1 .editor-toolbar { display: grid; grid-template-columns: 1fr auto; gap: .2rem var(--space-4); align-items: center; padding: var(--space-4) var(--space-5); border-bottom: var(--border) solid var(--ig-line); }
.variant-v1 .editor-toolbar span { color: var(--ig-muted); font-size: .875rem; }
.variant-v1 .editor-toolbar strong { grid-row: 1 / 3; grid-column: 2; color: oklch(43% .14 151); font: 900 clamp(2.75rem, 2.1rem + 1.8vw, 4.25rem)/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.variant-v1 .editor-toolbar small { font-weight: 750; }
.variant-v1 .timing-workspace { display: grid; gap: var(--space-3); min-height: 0; overflow: auto; padding: clamp(.85rem, 2vw, 1.4rem); background: #f7fafc; }
.variant-v1 .timing-focus { width: 100%; }
.variant-v1 .timing-script { min-width: 0; padding: .45rem clamp(.85rem, 2vw, 1.35rem); border: var(--border) solid #dce5ea; border-radius: .75rem; background: white; }
.variant-v1 .timing-script p { margin: 0; padding: .58rem 0; border-bottom: var(--border) solid var(--ig-line); font-size: clamp(1rem, .96rem + .12vw, 1.075rem); line-height: 1.52; }
.variant-v1 .timing-script p:last-child { border-bottom: 0; }
.variant-v1 .timing-script p > span { display: block; margin-bottom: .26rem; color: var(--ig-blue); font: 850 .75rem/1 var(--font-mono); text-transform: uppercase; }
.variant-v1 .timing-script del { padding: .06rem .12rem; background: #fff0c9; color: #765719; text-decoration: none; transition: color var(--motion-fast) linear, background var(--motion-fast) linear, opacity var(--motion-fast) linear; }
.variant-v1 .timing-script del.is-cutting { background: #ffe0de; color: #9a2f29; text-decoration: line-through; text-decoration-thickness: .11rem; }
.variant-v1 .timing-script del.is-removed { background: #ffe8e5; color: #9a4a43; text-decoration: line-through; text-decoration-thickness: .11rem; opacity: .72; }
.variant-v1 .editor-analysis { display: grid; grid-template-columns: 1fr auto; gap: .2rem var(--space-4); padding: var(--space-4) var(--space-5); border-top: var(--border) solid var(--ig-line); }
.variant-v1 .editor-analysis span { color: oklch(42% .13 151); font-weight: 800; }
.variant-v1 .editor-analysis strong { grid-row: 1 / 3; grid-column: 2; align-self: center; color: oklch(42% .13 151); font: 900 1.65rem/1 var(--font-mono); }
.variant-v1 .editor-analysis small { color: var(--ig-muted); }

.variant-v1 .cover-window { background: white; }
.variant-v1 .cover-window { height: min(47rem, calc(100svh - 15rem)); overflow: hidden; }
.variant-v1 .cover-builder { display: grid; height: calc(100% - 4rem); grid-template-columns: minmax(18rem, .88fr) minmax(24rem, 1.12fr); gap: clamp(1.25rem, 2.5vw, 2.4rem); align-items: center; padding: clamp(1rem, 2.5vw, 2rem); background: #edf3f7; }
.variant-v1 .cover-preview { position: relative; width: min(100%, 21rem); overflow: hidden; aspect-ratio: 9 / 16; margin-inline: auto; border-radius: .8rem; background: #101923; box-shadow: .45rem 1rem 2.6rem rgb(20 35 48 / 24%); }
.variant-v1 .cover-preview::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgb(5 12 20 / 1%), rgb(5 12 20 / 5%) 48%, rgb(5 12 20 / 76%)); }
.variant-v1 .cover-preview > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; transform: scale(2.16); transform-origin: 50% 0; transition: transform var(--motion-focus) var(--ease-out-expo), filter var(--motion-focus) var(--ease-out-expo); }
.variant-v1 .cover-scan { position: absolute; z-index: 3; inset: 0 0 auto; height: .16rem; background: #78e5ff; opacity: .7; box-shadow: 0 0 1rem #78e5ff; transform: translateY(calc(var(--scene-progress, 0) * 26rem)); }
.variant-v1 [data-complete="true"] .cover-scan { opacity: 0; }
.variant-v1 .cover-crop-guide { position: absolute; z-index: 4; inset: 8% 13% 43%; border: .12rem solid #77dcff; color: white; font-style: normal; filter: drop-shadow(0 .12rem .35rem rgb(0 0 0 / 58%)); }
.variant-v1 .cover-crop-guide::before,
.variant-v1 .cover-crop-guide::after { content: ""; position: absolute; inset: 50% auto auto; width: 100%; border-top: .06rem dashed rgb(255 255 255 / 68%); }
.variant-v1 .cover-crop-guide::after { inset: auto 50% 0 auto; width: 0; height: 100%; border-top: 0; border-left: .06rem dashed rgb(255 255 255 / 68%); }
.variant-v1 .cover-crop-guide > i { position: absolute; inset: -.12rem; border: .26rem solid transparent; border-block-start-color: white; border-inline-start-color: white; }
.variant-v1 .cover-crop-guide > b,
.variant-v1 .cover-crop-guide > em { position: absolute; padding: .28rem .4rem; border-radius: .28rem; background: rgb(4 22 34 / 78%); font: 800 .68rem/1 var(--font-mono); font-style: normal; white-space: nowrap; }
.variant-v1 .cover-crop-guide > b { inset: .35rem auto auto .35rem; }
.variant-v1 .cover-crop-guide > em { inset: auto .35rem .35rem auto; }
.variant-v1 .cover-palette { position: absolute; z-index: 4; inset: auto .8rem 27% auto; display: flex; align-items: center; gap: .3rem; padding: .42rem .5rem; border-radius: .45rem; background: rgb(4 22 34 / 82%); color: white; box-shadow: 0 .4rem 1.2rem rgb(0 0 0 / 24%); }
.variant-v1 .cover-palette > i { width: 1.15rem; height: 1.15rem; border: .08rem solid rgb(255 255 255 / 76%); border-radius: 50%; background: #1687f8; }
.variant-v1 .cover-palette > i:nth-child(2) { background: #f8fbfd; }
.variant-v1 .cover-palette > i:nth-child(3) { background: #0b1a25; }
.variant-v1 .cover-palette > b { margin-left: .2rem; font: 800 .68rem/1 var(--font-mono); }
.variant-v1 .cover-font-proof { position: absolute; z-index: 4; inset: auto auto 28% .8rem; display: grid; grid-template-columns: auto 1fr; gap: .4rem; align-items: center; padding: .4rem .52rem; border-radius: .45rem; background: rgb(255 255 255 / 90%); color: #102b3c; font: 950 1rem/1 var(--font-body); box-shadow: 0 .4rem 1.2rem rgb(0 0 0 / 18%); }
.variant-v1 .cover-font-proof b { font: 800 .65rem/1.15 var(--font-mono); }
.variant-v1 #demo-cover[data-complete="true"] .cover-crop-guide,
.variant-v1 #demo-cover[data-complete="true"] .cover-palette,
.variant-v1 #demo-cover[data-complete="true"] .cover-font-proof { opacity: 0; transform: translateY(-.35rem); filter: blur(.1rem); }
.variant-v1 .cover-title { position: absolute; z-index: 5; inset-inline: .9rem; top: 58%; color: white; font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.8rem); font-weight: 950; line-height: .88; letter-spacing: -.04em; text-align: center; text-shadow: 0 .18rem .55rem rgb(0 0 0 / 66%); }
.variant-v1 .cover-title b { display: inline-block; margin-top: .38rem; padding: .34rem .58rem .4rem; border-radius: .3rem; background: #1687f8; color: white; box-shadow: 0 .4rem 1.1rem rgb(0 51 116 / 28%); }
.variant-v1 [data-layout-position="top"] .cover-title { top: 13%; }
.variant-v1 [data-layout-position="bottom"] .cover-title { top: 70%; }
.variant-v1 .cover-preview > i { position: absolute; z-index: 6; inset: .75rem .75rem auto auto; padding: .42rem .55rem; border-radius: .35rem; background: #dff8e8; color: #145f35; font: 850 .75rem/1 var(--font-mono); font-style: normal; }
.variant-v1 .cover-console { display: grid; gap: var(--space-4); }
.variant-v1 .cover-focus { width: 100%; }
.variant-v1 .cover-controls { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); padding-top: var(--space-4); border-top: var(--border) solid #dce1e6; }
.variant-v1 .cover-control-group > p { margin: 0 0 var(--space-2); color: #5c6670; font-size: .875rem; font-weight: 800; }
.variant-v1 .cover-photo-options,
.variant-v1 .cover-layout-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.variant-v1 .cover-photo-options button,
.variant-v1 .cover-layout-options button { min-width: 0; min-height: 3.25rem; padding: .3rem; border: .1rem solid #dce1e6; border-radius: .55rem; background: #fff; color: #333; cursor: pointer; }
.variant-v1 .cover-photo-options button[aria-pressed="true"],
.variant-v1 .cover-layout-options button[aria-pressed="true"] { border-color: #1687f8; box-shadow: 0 0 0 .15rem rgb(22 135 248 / 14%); }
.variant-v1 .cover-photo-options img { display: block; width: 100%; height: 3.6rem; border-radius: .35rem; object-fit: cover; object-position: 50% 18%; }
.variant-v1 .cover-photo-options span { display: block; padding-block: .22rem .1rem; font-size: .75rem; font-weight: 800; }
.variant-v1 .cover-layout-options button { display: grid; gap: .25rem; justify-items: center; font-size: .72rem; font-weight: 800; }
.variant-v1 .cover-layout-options button > span { position: relative; display: block; width: 1.65rem; height: 2.2rem; border-radius: .2rem; background: #dce3e9; }
.variant-v1 .cover-layout-options button i { position: absolute; inset: .25rem .22rem auto; height: .25rem; border-radius: 1rem; background: #5b6670; }
.variant-v1 .cover-layout-options [data-layout-choice="middle"] i { inset-block: .95rem auto; }
.variant-v1 .cover-layout-options [data-layout-choice="bottom"] i { inset-block: auto .25rem; }
.variant-v1 .authentic-cover-builder { height: calc(100% - 4rem); grid-template-columns: minmax(17rem, .92fr) minmax(17rem, 1.08fr); grid-template-areas: "request request" "transform processing"; gap: var(--space-4) clamp(1.25rem, 3vw, 3rem); align-content: center; padding: clamp(1rem, 2.5vw, 2rem); }
.variant-v1 .cover-request { grid-area: request; justify-self: center; width: min(100%, 46rem); }
.variant-v1 .cover-request > span { display: block; margin-bottom: .35rem; color: var(--ig-muted); font: 800 .75rem/1 var(--font-mono); text-align: right; text-transform: uppercase; }
.variant-v1 .cover-request > p { margin: 0; padding: .85rem 1rem; border-radius: .75rem; background: var(--ig-blue); color: white; font-size: 1rem; font-weight: 700; line-height: 1.42; box-shadow: 0 .2rem .7rem rgb(42 72 96 / 9%); }
.variant-v1 .cover-transform { grid-area: transform; justify-self: end; width: min(100%, 22rem); min-width: 0; margin: 0; }
.variant-v1 .cover-transform-frame { --cover-reveal: clamp(0, calc((var(--scene-progress, 0) - .13) * 1.22), 1); position: relative; overflow: hidden; aspect-ratio: 9 / 16; border: var(--border) solid #c8d4dc; border-radius: .8rem; background: #080d12; box-shadow: .45rem 1rem 2.6rem rgb(20 35 48 / 24%); }
.variant-v1 .cover-transform-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.variant-v1 .cover-transform-raw { position: absolute; inset: 0; }
.variant-v1 .cover-transform-final { position: absolute; z-index: 2; inset: 0; overflow: hidden; clip-path: inset(0 calc(100% - (var(--cover-reveal) * 100%)) 0 0); will-change: clip-path; }
.variant-v1 .cover-transform-final img { position: absolute; inset: 0; }
.variant-v1 .cover-transform-scan { position: absolute; z-index: 4; inset: 0 auto 0 calc(var(--cover-reveal) * 100%); width: .16rem; background: white; box-shadow: 0 0 .35rem #31c4ff, 0 0 1rem rgb(49 196 255 / 72%); transform: translateX(-50%); transition: opacity var(--motion-fast) linear; }
.variant-v1 #demo-cover[data-complete="true"] .cover-transform-scan { opacity: 0; }
.variant-v1 .cover-before-label,
.variant-v1 .cover-after-label { position: absolute; z-index: 5; top: .7rem; padding: .32rem .5rem; border-radius: .35rem; background: rgb(6 19 29 / 76%); color: white; font: 850 .68rem/1 var(--font-mono); text-transform: uppercase; backdrop-filter: blur(.35rem); }
.variant-v1 .cover-before-label { left: .7rem; }
.variant-v1 .cover-after-label { right: .7rem; opacity: var(--cover-reveal); }
.variant-v1 .cover-transform figcaption { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: .55rem; color: var(--ig-muted); font-size: .8rem; font-weight: 750; }
.variant-v1 .cover-transform figcaption strong { color: #145f35; }
.variant-v1 .cover-processing { grid-area: processing; display: grid; gap: var(--space-3); align-self: center; margin: 0; padding: 0; list-style: none; }
.variant-v1 .cover-processing li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: var(--space-3); align-items: center; padding: .8rem .9rem; border: var(--border) solid #d5e0e7; border-radius: .7rem; background: rgb(255 255 255 / 76%); box-shadow: 0 .3rem 1rem rgb(34 62 88 / 6%); }
.variant-v1 .cover-processing li > span { display: grid; width: 2.15rem; aspect-ratio: 1; place-items: center; border-radius: 50%; background: #e1ebf2; color: #547084; font: 850 .68rem/1 var(--font-mono); }
.variant-v1 .cover-processing li.is-active { border-color: #55baf5; background: white; box-shadow: 0 0 0 .18rem rgb(22 135 248 / 12%), 0 .7rem 1.7rem rgb(34 62 88 / 10%); }
.variant-v1 .cover-processing li.is-complete > span { background: #dff8e8; color: #145f35; }
.variant-v1 .cover-processing strong,
.variant-v1 .cover-processing small { display: block; }
.variant-v1 .cover-processing strong { margin-bottom: .2rem; color: #102b3c; font-size: .95rem; }
.variant-v1 .cover-processing small { color: var(--ig-muted); font-size: .78rem; line-height: 1.35; }

.variant-v1 .instagram-window { display: grid; height: min(47rem, calc(100svh - 15rem)); grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; background: white; color: #111; color-scheme: light; }
.variant-v1 #demo-publish .instagram-window { width: min(100%, 76rem); height: min(68rem, calc(100svh - 13.5rem)); }
.variant-v1 .instagram-label { display: flex; min-height: 3.75rem; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid #ddd; background: #fafafa; font-size: .875rem; }
.variant-v1 .instagram-label span { font-weight: 800; }
.variant-v1 .publish-layout { display: grid; min-height: 0; justify-items: center; overflow: hidden; padding: var(--space-2); background: #edf3f7; }
.variant-v1 .instagram-profile { display: grid; width: min(100%, calc((100svh - 20rem) * .95), 56rem); height: 100%; min-width: 0; min-height: 0; grid-template-rows: auto auto auto auto minmax(0, 1fr); overflow: hidden; border: 1px solid #d8dee3; border-radius: .85rem; background: white; box-shadow: 0 1rem 2.5rem rgb(34 62 88 / 11%); }
.variant-v1 .instagram-profile-bar { display: flex; min-height: 3rem; align-items: center; padding: 0 var(--space-4); border-bottom: 1px solid #dedede; }
.variant-v1 .instagram-profile-bar strong { font-size: 1rem; }
.variant-v1 .instagram-profile-bar span { margin-left: .3rem; color: #1687f8; font-size: .62rem; }
.variant-v1 .instagram-profile-bar b { margin-left: auto; letter-spacing: .15em; }
.variant-v1 .profile-head { display: grid; grid-template-columns: 4.75rem repeat(3, minmax(0, 1fr)); gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); }
.variant-v1 .profile-avatar { display: block; width: 4.75rem; height: 4.75rem; border: .16rem solid #d62f85; border-radius: 50%; background: #f2f2f2; object-fit: cover; object-position: 50% 16%; }
.variant-v1 .profile-stat { display: grid; justify-items: center; gap: .12rem; min-width: 0; text-align: center; }
.variant-v1 .profile-stat b { font-size: .95rem; }
.variant-v1 .profile-stat span { overflow: hidden; max-width: 100%; color: #555; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.variant-v1 .profile-bio { padding: 0 var(--space-4) var(--space-3); font-size: .84rem; }
.variant-v1 .profile-bio p { margin: .12rem 0 0; color: #555; }
.variant-v1 .profile-tabs { display: grid; height: 2.4rem; grid-template-columns: repeat(3, 1fr); align-items: center; border-top: 1px solid #ddd; color: #555; text-align: center; }
.variant-v1 .profile-tabs svg { width: 1rem; height: 1rem; margin: auto; fill: none; stroke: currentColor; stroke-width: 1.5; }
.variant-v1 .profile-tabs svg:first-child { fill: currentColor; stroke: none; }
.variant-v1 .profile-tabs svg:nth-child(2) { width: 100%; height: 100%; padding: .68rem; border-bottom: .12rem solid #111; color: #111; }
.variant-v1 .reels-grid { display: grid; min-height: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: .16rem; }
.variant-v1 .reel-tile { position: relative; width: 100%; min-width: 0; min-height: 0; overflow: hidden; aspect-ratio: auto; background: #dbe2e6; }
.variant-v1 .reel-tile img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; }
.variant-v1 .reel-tile::before { display: none; }
.variant-v1 .reel-tile::after { content: ""; position: absolute; inset: 50% 0 0; width: auto; height: auto; border: 0; border-radius: 0; aspect-ratio: auto; background: linear-gradient(transparent, rgb(0 0 0 / 72%)); }
.variant-v1 .reel-tile > b { position: absolute; z-index: 2; inset: auto var(--space-2) var(--space-2); color: white; font: 850 .9rem/1 var(--font-mono); text-shadow: 0 .1rem .4rem #000; }
.variant-v1 .new-reel { box-shadow: inset 0 0 0 .16rem #1687f8; }
.variant-v1 .reel-tile > .reel-new-badge { position: absolute; z-index: 3; inset: var(--space-2) auto auto var(--space-2); padding: .28rem .4rem; border-radius: .25rem; background: white; color: #111; font: 850 .58rem/1 var(--font-mono); text-shadow: none; }
.variant-v1 .reel-tile > .reel-duration { position: absolute; z-index: 3; inset: var(--space-2) var(--space-2) auto auto; padding: .28rem .4rem; border-radius: .25rem; background: rgb(0 0 0 / 62%); color: white; font: 800 .58rem/1 var(--font-mono); text-shadow: none; }
.variant-v1 .reel-upload { position: absolute; z-index: 6; inset: 0; display: grid; align-content: center; justify-items: center; gap: .45rem; padding: var(--space-4); background: rgb(8 18 28 / 84%); color: white; text-align: center; backdrop-filter: blur(.22rem); }
.variant-v1 .reel-upload > strong { font-size: .8rem; }
.variant-v1 .reel-upload > span { color: rgb(255 255 255 / 72%); font: .6rem/1 var(--font-mono); }
.variant-v1 .reel-upload > div { width: min(100%, 8rem); height: .35rem; overflow: hidden; border-radius: 1rem; background: rgb(255 255 255 / 24%); }
.variant-v1 .reel-upload i { display: block; width: 100%; height: 100%; background: #67d5ff; transform: scaleX(1); transform-origin: left; }
.variant-v1 .reel-upload > b { font: 850 .72rem/1 var(--font-mono); }
.variant-v1 .reel-published { position: absolute; z-index: 6; inset: 0; display: grid; align-content: center; justify-items: center; gap: .55rem; background: rgb(8 18 28 / 76%); color: white; text-align: center; backdrop-filter: blur(.14rem); }
.variant-v1 .reel-published svg { width: 2.8rem; height: 2.8rem; padding: .65rem; border-radius: 50%; background: #dff8e8; color: #145f35; fill: none; stroke: currentColor; stroke-width: 2; }
.variant-v1 .reel-published strong { font-size: .8rem; }
.variant-v1 [data-complete="true"] .reel-upload,
.variant-v1 [data-complete="true"] .reel-published { opacity: 0; pointer-events: none; }
.variant-v1 .reel-live-metrics { position: absolute; z-index: 4; inset: auto var(--space-2) var(--space-2); display: flex; align-items: flex-end; justify-content: space-between; gap: .4rem; color: white; text-shadow: 0 .1rem .4rem #000; }
.variant-v1 .reel-live-age { padding: .28rem .38rem; border-radius: .25rem; background: rgb(0 0 0 / 64%); font: 750 .72rem/1 var(--font-mono); }
.variant-v1 .reel-live-metrics > b { display: inline-flex; align-items: center; gap: .24rem; font: 950 clamp(1.08rem, 1.5vw, 1.5rem)/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.variant-v1 .reel-live-metrics svg { width: 1.3rem; height: 1.3rem; fill: white; stroke: none; }
.variant-v1 .reel-time-sequence { display: none; }
.variant-v1 .views-disclaimer { margin: 0; padding: var(--space-3); background: #fff6dc; color: #704e00; text-align: center; }

/* Concept 2 — product split: persistent tool rail + workspace. */
.variant-v1[data-window-concept="2"] .product-window:not(.instagram-window) { display: grid; height: min(47rem, calc(100svh - 6.5rem)); grid-template-columns: 11.5rem minmax(0, 1fr); border-radius: .7rem; }
.variant-v1[data-window-concept="2"] .messenger-window { grid-template-rows: minmax(0, 1fr) auto; }
.variant-v1[data-window-concept="2"] .editor-window { grid-template-rows: auto minmax(0, 1fr) auto; }
.variant-v1[data-window-concept="2"] .cover-window { grid-template-rows: minmax(0, 1fr); }
.variant-v1[data-window-concept="2"] .product-window:not(.instagram-window) > .product-bar { grid-column: 1; grid-row: 1 / -1; display: flex; min-height: 0; flex-direction: column; align-items: flex-start; padding: 1.1rem; border-right: 1px solid #d6e3eb; border-bottom: 0; background: linear-gradient(180deg, #edf7fd, #f7fbfe); }
.variant-v1[data-window-concept="2"] .product-window:not(.instagram-window) > .product-bar > div { margin-top: .35rem; }
.variant-v1[data-window-concept="2"] .product-window:not(.instagram-window) > .product-bar > b { margin-top: auto; }
.variant-v1[data-window-concept="2"] .product-window:not(.instagram-window) > :not(.product-bar) { grid-column: 2; }
.variant-v1[data-window-concept="2"] .chat-thread { min-height: 0; overflow: hidden; background-color: #f8fbfd; background-image: none; }
.variant-v1[data-window-concept="2"] .ai-focus-step { border-color: #cce2ef; box-shadow: 0 .45rem 1.35rem rgb(24 78 112 / 9%); }
.variant-v1[data-window-concept="2"] .cover-builder,
.variant-v1[data-window-concept="2"] .timing-workspace { background: #f8fbfd; }

/* Concept 3 — editing room: dark, high-contrast production surface. */
.variant-v1[data-window-concept="3"] .product-window:not(.instagram-window) { border: 1px solid #263650; border-radius: .75rem; background: #0b1220; color: #eaf4ff; box-shadow: 0 1.7rem 4.5rem rgb(5 14 28 / 28%); }
.variant-v1[data-window-concept="3"] .product-window:not(.instagram-window) .product-bar { border-color: #263650; background: #111b2d; color: #edf7ff; }
.variant-v1[data-window-concept="3"] .product-window:not(.instagram-window) .product-bar small { color: #9cb0c8; }
.variant-v1[data-window-concept="3"] .product-window:not(.instagram-window) .product-bar > b { background: #192942; color: #73caff; }
.variant-v1[data-window-concept="3"] .chat-thread { background-color: #0c1423; background-image: radial-gradient(circle at center, rgb(94 167 220 / 11%) 1px, transparent 1px); }
.variant-v1[data-window-concept="3"] .chat-message > span,
.variant-v1[data-window-concept="3"] .chat-delivery,
.variant-v1[data-window-concept="3"] .ai-focus-step small,
.variant-v1[data-window-concept="3"] .source-evidence > header span { color: #96abc2; }
.variant-v1[data-window-concept="3"] .chat-ai > div,
.variant-v1[data-window-concept="3"] .ai-focus-step,
.variant-v1[data-window-concept="3"] .source-evidence,
.variant-v1[data-window-concept="3"] .timing-script { border-color: #293a55; background: #131e31; color: #e6f1fb; box-shadow: none; }
.variant-v1[data-window-concept="3"] .chat-ai strong,
.variant-v1[data-window-concept="3"] .source-evidence > header strong,
.variant-v1[data-window-concept="3"] .timing-script p > span { color: #6fc9ff; }
.variant-v1[data-window-concept="3"] .chat-context { background: #162239; color: #91a8c0; }
.variant-v1[data-window-concept="3"] .chat-context strong { color: #edf7ff; }
.variant-v1[data-window-concept="3"] .product-input,
.variant-v1[data-window-concept="3"] .editor-toolbar,
.variant-v1[data-window-concept="3"] .editor-analysis { border-color: #263650; background: #111b2d; color: #ddecf8; }
.variant-v1[data-window-concept="3"] .composer-field { border-color: #31445f; background: #0c1423; color: #9db1c8; }
.variant-v1[data-window-concept="3"] .timing-workspace,
.variant-v1[data-window-concept="3"] .cover-builder { background: #0c1423; }
.variant-v1[data-window-concept="3"] .timing-script p,
.variant-v1[data-window-concept="3"] .cover-controls { border-color: #293a55; }
.variant-v1[data-window-concept="3"] .editor-toolbar span,
.variant-v1[data-window-concept="3"] .editor-analysis small { color: #9db1c8; }

/* Concept 4 — storyboard: request and reasoning beside evidence and result. */
@media (min-width: 48.01rem) {
  .variant-v1[data-window-concept="4"] .messenger-window { border-radius: .55rem; }
  .variant-v1[data-window-concept="4"] .research-thread,
  .variant-v1[data-window-concept="4"] .script-thread { height: 39rem; min-height: 0; overflow: hidden; grid-template-columns: minmax(15rem, .78fr) minmax(22rem, 1.22fr); column-gap: 1.25rem; align-content: stretch; background-image: none; }
  .variant-v1[data-window-concept="4"] .research-thread { grid-template-areas: "query sources" "delivery sources" "focus sources" "answer answer"; grid-template-rows: auto auto minmax(5rem, 1fr) auto; }
  .variant-v1[data-window-concept="4"] .research-thread > .chat-user { grid-area: query; width: 100%; }
  .variant-v1[data-window-concept="4"] .research-thread > .chat-delivery { grid-area: delivery; }
  .variant-v1[data-window-concept="4"] .research-thread > .idea-focus { grid-area: focus; width: 100%; }
  .variant-v1[data-window-concept="4"] .research-thread > .source-evidence { grid-area: sources; width: 100%; height: 100%; min-height: 0; overflow: hidden; align-self: stretch; }
  .variant-v1[data-window-concept="4"] .research-thread > .idea-answer { grid-area: answer; width: 100%; }
  .variant-v1[data-window-concept="4"] .source-strip { height: calc(100% - 2rem); min-height: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); }
  .variant-v1[data-window-concept="4"] .source-strip figure { min-height: 0; aspect-ratio: auto; }
  .variant-v1[data-window-concept="4"] .source-strip figure:first-child { grid-row: span 2; }
  .variant-v1[data-window-concept="4"] .script-thread { grid-template-areas: "context answer" "query answer" "delivery answer" "focus answer"; grid-template-rows: auto auto auto minmax(0, 1fr); }
  .variant-v1[data-window-concept="4"] .script-thread > .chat-context { grid-area: context; }
  .variant-v1[data-window-concept="4"] .script-thread > .chat-user { grid-area: query; width: 100%; }
  .variant-v1[data-window-concept="4"] .script-thread > .chat-delivery { grid-area: delivery; }
  .variant-v1[data-window-concept="4"] .script-thread > .ai-focus-slot { grid-area: focus; width: 100%; }
  .variant-v1[data-window-concept="4"] .script-thread > .script-answer { grid-area: answer; width: 100%; min-height: 0; overflow: auto; align-self: stretch; }
  .variant-v1[data-window-concept="4"] .script-beats { grid-template-columns: 1fr; }
  .variant-v1[data-window-concept="4"] .script-beats p:last-child { grid-column: auto; }
}

/* Concept 5 — editorial sheet: flat hierarchy, typography first. */
.variant-v1[data-window-concept="5"] .product-window:not(.instagram-window) { overflow: visible; border-block: 2px solid #17364b; border-radius: 0; background: transparent; box-shadow: none; }
.variant-v1[data-window-concept="5"] .product-window:not(.instagram-window) .product-bar { min-height: 4rem; padding-inline: 0; border-color: #17364b; background: transparent; }
.variant-v1[data-window-concept="5"] .product-window:not(.instagram-window) .product-mark { border-radius: .25rem; background: #17364b; }
.variant-v1[data-window-concept="5"] .product-window:not(.instagram-window) .product-bar > b { border-radius: .2rem; background: transparent; }
.variant-v1[data-window-concept="5"] .chat-thread,
.variant-v1[data-window-concept="5"] .timing-workspace,
.variant-v1[data-window-concept="5"] .cover-builder { padding-inline: 0; background: transparent; background-image: none; }
.variant-v1[data-window-concept="5"] .chat-message > p,
.variant-v1[data-window-concept="5"] .chat-message > div,
.variant-v1[data-window-concept="5"] .source-evidence,
.variant-v1[data-window-concept="5"] .ai-focus-step,
.variant-v1[data-window-concept="5"] .timing-script { border-radius: .2rem; box-shadow: none; }
.variant-v1[data-window-concept="5"] .ai-focus-step { border-inline: 0; border-block-color: #9eb8c8; background: rgb(255 255 255 / 62%); }
.variant-v1[data-window-concept="5"] .source-evidence,
.variant-v1[data-window-concept="5"] .timing-script { border-inline: 0; }
.variant-v1[data-window-concept="5"] .product-input,
.variant-v1[data-window-concept="5"] .editor-toolbar,
.variant-v1[data-window-concept="5"] .editor-analysis { padding-inline: 0; background: transparent; }

.variant-v1.v1-scroll-ready [data-v1-scroll-scene]:not([data-complete="true"]) [data-v1-stage] { opacity: .12; transform: translateY(.55rem) scale(.995); filter: blur(.12rem); }
.variant-v1.v1-scroll-ready [data-v1-scroll-scene] [data-v1-stage].is-active,
.variant-v1.v1-scroll-ready [data-v1-scroll-scene] [data-v1-stage].is-complete { opacity: 1; transform: none; filter: none; }
.variant-v1.v1-scroll-ready [data-v1-scroll-scene] .ai-focus-slot { position: relative; min-height: 5.2rem; }
.variant-v1.v1-scroll-ready [data-v1-scroll-scene] .ai-focus-step { position: absolute; inset: 0; opacity: 0; transform: translateY(.7rem); filter: blur(.16rem); pointer-events: none; }
.variant-v1.v1-scroll-ready [data-v1-scroll-scene] [data-v1-focus-step].is-current { opacity: 1; transform: none; filter: none; }
.variant-v1.v1-scroll-ready [data-v1-scroll-scene] [data-v1-focus-step].is-complete:not(.is-current) { opacity: 0; transform: translateY(-.65rem); filter: blur(.12rem); pointer-events: none; }
.variant-v1.v1-scroll-ready [data-v1-scroll-scene] .reel-upload:not(.is-current),
.variant-v1.v1-scroll-ready [data-v1-scroll-scene] .reel-published:not(.is-current) { opacity: 0; transform: translateY(-.35rem); pointer-events: none; }
.variant-v1 #demo-publish[data-complete="true"] .reel-upload,
.variant-v1 #demo-publish[data-complete="true"] .reel-published { opacity: 0; transform: none; pointer-events: none; }
.variant-v1.v1-scroll-ready [data-v1-scroll-scene]:not([data-complete="true"]) .reel-upload i { transform: scaleX(0); }
.variant-v1 [data-v1-stage] { transition: opacity var(--motion-base) var(--ease-out-quart), transform var(--motion-focus) var(--ease-out-expo), filter var(--motion-base) var(--ease-out-quart), border-color var(--motion-base) var(--ease-out-quart); }
.variant-v1 .reel-upload i { transition: transform var(--motion-base) linear; }

@media (hover: hover) {
  .variant-v1 .hero-cta:hover svg { transform: translateY(.18rem); }
  .variant-v1 .motion-stop:not([aria-pressed="true"]):hover { border-color: var(--ig-blue); background: var(--ig-raised); }
  .variant-v1 .header-product-link:hover,
  .variant-v1 .hero-cta:hover { background: var(--color-action-hover); }
  .variant-v1 .cover-photo-options button:hover,
  .variant-v1 .cover-layout-options button:hover { border-color: #1687f8; }
  .variant-v1 .concept-options button:hover { border-color: color-mix(in oklch, var(--ig-blue) 32%, white); color: var(--ig-text); }
}

@media (min-width: 48.01rem) and (min-height: 43.76rem) {
  .variant-v1 #demo-scriptwriter .messenger-window { height: min(49rem, calc(100svh - 12.5rem)); }
  .variant-v1.v1-scroll-ready #demo-scriptwriter .script-thread { overflow: hidden; }
  .variant-v1 .simple-script-thread { gap: .7rem; padding: .75rem 1.25rem; }
  .variant-v1 .simple-script-thread .script-answer { width: 100%; }
  .variant-v1 .simple-script-thread .script-answer > span { display: none; }
  .variant-v1 .simple-script-thread .script-answer > div { padding: .72rem .9rem; }
  .variant-v1 .simple-script-thread .script-ready { padding-bottom: .35rem; }
  .variant-v1 .simple-script-thread .script-copy p { padding-top: .32rem; font-size: 1rem; line-height: 1.34; }
}

@media (max-width: 64rem) {
  .variant-v1 .scene-stick { gap: var(--space-4); }
  .variant-v1 .scene-heading h2 { font-size: clamp(1.85rem, 1.4rem + 1.5vw, 2.6rem); }
  .variant-v1 .chat-thread { padding: var(--space-4); }
}

@media (max-width: 48rem) {
  .variant-v1 .concept-lab { display: none; }
  .variant-v1 .site-header { padding-inline: var(--space-4); }
  .variant-v1 .header-method { display: none; }
  .variant-v1 .hero { width: 100%; min-height: 360svh; }
  .variant-v1 .hero-stage { position: sticky; top: 3.75rem; width: 100%; min-height: calc(100svh - 3.75rem); padding: clamp(1.25rem, 3.5svh, 2.25rem) var(--space-4) clamp(9rem, 22svh, 13rem); }
  .variant-v1 .hero h1 { max-width: 15ch; font-size: clamp(2.55rem, 10vw, 4rem); }
  .variant-v1 .hero-robot-visual { display: block; inset: auto -18vw max(.25rem, env(safe-area-inset-bottom)); height: min(48svh, 26rem); }
  .variant-v1 .workflow-scene,
  .variant-v1 .final-cta { width: calc(100% - 2 * var(--space-4)); }
  .variant-v1 .workflow-scene { min-height: auto; padding-block: var(--space-9); }
  .variant-v1 .scene-stick { position: relative; top: auto; min-height: auto; grid-template-columns: 1fr; gap: var(--space-5); padding: 0; }
  .variant-v1 .scene-stick::before { display: none; }
  .variant-v1.v1-scroll-ready [data-v1-scroll-scene] [data-v1-stage],
  .variant-v1.v1-scroll-ready [data-v1-scroll-scene] .ai-focus-step,
  .variant-v1.v1-scroll-ready [data-v1-scroll-scene] [data-v1-focus-step].is-complete:not(.is-current) {
    filter: none;
  }
  .variant-v1 .scene-heading { max-width: 34rem; }
  .variant-v1 .scene-heading > p:last-child { max-width: 44ch; }
  .variant-v1 .research-thread,
  .variant-v1 .script-thread,
  .variant-v1 .chat-thread { min-height: auto; }
  .variant-v1 .messenger-window,
  .variant-v1 .editor-window,
  .variant-v1 .cover-window { height: auto; }
  .variant-v1 .instagram-window { height: auto; overflow: visible; }
  .variant-v1 #demo-publish .instagram-window { width: 100%; height: auto; }
  .variant-v1 .publish-layout { overflow: visible; }
  .variant-v1 .instagram-profile { width: 100%; height: auto; }
  .variant-v1 .reels-grid { grid-template-rows: none; }
  .variant-v1 .reel-tile { aspect-ratio: 9 / 14; }
  .variant-v1 .cover-builder { height: auto; grid-template-columns: 1fr; }
  .variant-v1 .authentic-cover-builder { grid-template-columns: minmax(0, 1fr); grid-template-areas: "request" "transform" "processing"; }
  .variant-v1 .cover-transform { justify-self: center; width: min(100%, 20rem); }
  .variant-v1 .cover-transform-final { transition: clip-path 680ms var(--ease-out-quart); }
  .variant-v1 .cover-transform-scan { transition: left 680ms var(--ease-out-quart), opacity var(--motion-fast) linear; }
  .variant-v1 .cover-after-label { transition: opacity 680ms var(--ease-out-quart); }
  .variant-v1 .cover-preview { width: min(78vw, 19rem); }
  .variant-v1 .script-beats { grid-template-columns: 1fr; }
  .variant-v1 .script-beats p:last-child { grid-column: auto; }
  .variant-v1.concept-review { padding-bottom: 8.5rem; }
  .variant-v1 .concept-lab { left: 50%; bottom: max(.5rem, env(safe-area-inset-bottom)); width: calc(100% - 1rem); grid-template-columns: 1fr; gap: .4rem; transform: translateX(-50%); }
  .variant-v1 .concept-lab-copy { display: flex; gap: .4rem; align-items: baseline; }
  .variant-v1 .concept-lab-copy span { flex: 1; margin-top: 0; }
  .variant-v1 .concept-options { overflow-x: auto; grid-template-columns: none; grid-auto-columns: minmax(6.1rem, 1fr); grid-auto-flow: column; padding-bottom: .15rem; scrollbar-width: thin; }
  .variant-v1 .concept-options button { min-height: 3rem; }
  .variant-v1[data-window-concept="2"] .product-window:not(.instagram-window) { display: block; height: auto; border-radius: .7rem; }
  .variant-v1[data-window-concept="2"] .product-window:not(.instagram-window) > .product-bar { display: grid; min-height: 3.5rem; grid-template-columns: auto minmax(0, 1fr) auto; padding: .45rem var(--space-4); border-right: 0; border-bottom: 1px solid #d6e3eb; }
  .variant-v1[data-window-concept="2"] .product-window:not(.instagram-window) > .product-bar > div { margin-top: 0; }
  .variant-v1[data-window-concept="2"] .product-window:not(.instagram-window) > .product-bar > b { margin-top: 0; }
  .variant-v1[data-window-concept="2"] .product-window:not(.instagram-window) > :not(.product-bar) { grid-column: auto; }
}

@media (max-width: 35rem) {
  .variant-v1 .site-header { min-height: 3.75rem; align-items: center; padding-block: 0; }
  .variant-v1 .brand { min-height: 3.75rem; }
  .variant-v1 .brand-name { display: none; }
  .variant-v1 .header-actions { gap: var(--space-1); }
  .variant-v1 .motion-stop { padding-inline: var(--space-2); font-size: .6875rem; }
  .variant-v1 .header-product-link { padding-inline: var(--space-3); }
  .variant-v1 .hero-stage { padding-top: var(--space-7); }
  .variant-v1 .hero h1 { font-size: clamp(2.15rem, 10.8vw, 3.1rem); }
  .variant-v1 .hero-cta { width: 100%; justify-content: space-between; margin-top: var(--space-6); padding-inline: var(--space-4); }
  .variant-v1 .workflow-scene { padding-block: var(--space-8); }
  .variant-v1 .scene-heading h2 { font-size: 1.8rem; }
  .variant-v1 .scene-heading > p:last-child { font-size: .92rem; }
  .variant-v1 .product-bar { padding-inline: var(--space-3); }
  .variant-v1 .product-bar > b { display: none; }
  .variant-v1 .chat-thread { padding: var(--space-3); }
  .variant-v1 .chat-user { width: 94%; }
  .variant-v1 .chat-message > p,
  .variant-v1 .chat-message > div { padding: var(--space-3); font-size: .95rem; }
  .variant-v1 .chat-context { display: grid; gap: .2rem; }
  .variant-v1 .ai-action-list { padding-inline: var(--space-3); }
  .variant-v1 .ai-action-list small { font-size: .66rem; }
  .variant-v1 .ai-focus-step { min-height: 4.75rem; padding-inline: var(--space-3); }
  .variant-v1.v1-scroll-ready [data-v1-scroll-scene] .ai-focus-slot { min-height: 4.75rem; }
  .variant-v1 .source-strip { gap: var(--space-1); }
  .variant-v1 .source-strip figcaption { font-size: .62rem; }
  .variant-v1 .product-input { grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem; }
  .variant-v1 .composer-attach,
  .variant-v1 .product-input > i { width: 2.5rem; height: 2.5rem; }
  .variant-v1 .editor-toolbar,
  .variant-v1 .editor-analysis { padding-inline: var(--space-3); }
  .variant-v1 .editor-toolbar strong { font-size: 2rem; }
  .variant-v1 .timing-workspace { padding: var(--space-3); }
  .variant-v1 .cover-builder { padding: var(--space-3); }
  .variant-v1 .authentic-cover-builder { gap: var(--space-3) var(--space-2); }
  .variant-v1 .cover-transform { width: min(100%, 18rem); }
  .variant-v1 .cover-processing li { grid-template-columns: 2.15rem minmax(0, 1fr); padding: .7rem; }
  .variant-v1 .cover-controls { grid-template-columns: 1fr; }
  .variant-v1 .instagram-label { display: grid; padding-inline: var(--space-3); }
  .variant-v1 .publish-layout { padding: var(--space-3); }
  .variant-v1 .profile-head { grid-template-columns: 3.5rem repeat(3, minmax(0, 1fr)); gap: var(--space-2); padding-inline: var(--space-3); }
  .variant-v1 .profile-avatar { width: 3.5rem; height: 3.5rem; }
  .variant-v1 .profile-stat b { font-size: .74rem; }
  .variant-v1 .profile-stat span { font-size: .54rem; }
  .variant-v1 .reel-live-age { font-size: .62rem; }
  .variant-v1 .reel-live-metrics > b { font-size: .96rem; }
  .variant-v1 .final-cta { padding: var(--space-7) var(--space-5); }
  .review-mode.variant-v1 .brand,
  .review-mode.variant-v1 .motion-stop,
  .review-mode.variant-v1 .header-product-link { display: none; }
  .review-mode.variant-v1 .header-actions { width: 100%; justify-content: flex-end; }
  .review-mode.variant-v1 .review-switcher a { width: 2.75rem; min-width: 2.75rem; min-height: 2.75rem; padding: 0; }
}

@media (max-width: 21.25rem) {
  .variant-v1 .motion-stop { max-width: 5.25rem; line-height: 1.15; }
}

@media (max-height: 700px) {
  .variant-v1 .hero { min-height: 360svh; }
  .variant-v1 .hero-stage { position: sticky; top: 3.75rem; min-height: calc(100svh - 3.75rem); padding-block: clamp(.75rem, 3svh, 1.5rem); }
  .variant-v1 .hero-robot-visual { display: block; inset: auto -8vw -.5rem; height: min(68svh, 25rem); }
  .variant-v1 .workflow-scene { min-height: auto; padding-block: var(--space-8); }
  .variant-v1 .scene-stick { position: relative; top: auto; min-height: auto; padding: 0; }
  .variant-v1 .scene-stick::before { display: none; }
  .variant-v1 .messenger-window,
  .variant-v1 .editor-window,
  .variant-v1 .cover-window { height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .variant-v1 .cover-transform-frame { --cover-reveal: 1; }
  .variant-v1 .hero { min-height: calc(100svh - 3.75rem); }
  .variant-v1 .hero-stage { position: relative; top: auto; min-height: calc(100svh - 3.75rem); }
  .variant-v1 .hero-robot-visual { display: none; }
  .variant-v1 .workflow-scene { min-height: auto; padding-block: var(--space-9); }
  .variant-v1 .scene-stick { position: relative; top: auto; min-height: auto; padding: 0; }
  .variant-v1 .scene-stick::before { display: none; }
  .variant-v1 .hero-cta svg,
  .variant-v1 [data-v1-stage],
  .variant-v1 .upload-track i { transition-duration: .01ms; }
}