:root { --landing-smoke-filter: none; }
:root[data-accent="violet"] { --landing-smoke-filter: hue-rotate(278deg) saturate(1.08); }
:root[data-accent="blue"] { --landing-smoke-filter: hue-rotate(218deg) saturate(1.08); }
:root[data-accent="cyan"] { --landing-smoke-filter: hue-rotate(178deg) saturate(.98); }
:root[data-accent="green"] { --landing-smoke-filter: hue-rotate(118deg) saturate(.94); }
:root[data-accent="amber"] { --landing-smoke-filter: hue-rotate(48deg) saturate(1.04); }
:root[data-accent="obsidian"] { --landing-smoke-filter: grayscale(1) saturate(0) brightness(.68) contrast(1.18); }

#landing-smoke-canvas {
  filter: var(--landing-smoke-filter);
  transition: filter .55s ease;
}

.nav-actions { align-items: center; }
.landing-accent { position: relative; }
.accent-trigger { gap: 7px; }
.accent-trigger > i {
  width: 9px;
  height: 9px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 9px rgba(var(--accent-rgb),.75), 0 0 20px rgba(var(--accent-rgb),.22);
}
.accent-popover {
  position: absolute;
  z-index: 30;
  top: calc(100% + 10px);
  right: 0;
  width: 300px;
  padding: 17px;
  border: 1px solid rgba(var(--accent-hot-rgb),.24);
  border-radius: 13px;
  color: var(--text);
  background: radial-gradient(ellipse at 100% 0%,rgba(var(--accent-rgb),.1),transparent 48%),rgba(6,7,12,.97);
  backdrop-filter: blur(20px);
  box-shadow: 0 20px 60px rgba(0,0,0,.62),0 0 38px rgba(var(--accent-rgb),.06);
}
.accent-popover::before {
  content: "";
  position: absolute;
  top: -5px;
  right: 27px;
  width: 9px;
  height: 9px;
  border-top: 1px solid rgba(var(--accent-hot-rgb),.24);
  border-left: 1px solid rgba(var(--accent-hot-rgb),.24);
  background: #07080d;
  transform: rotate(45deg);
}
.accent-popover > strong { display:block; color:var(--ice-strong); font:500 14px/1.2 var(--font-signal); }
.accent-popover > p { margin:7px 0 14px; color:var(--muted); font-size:10px; line-height:1.55; }
.accent-popover > small { display:block; margin-top:12px; color:var(--faint); font-size:8px; line-height:1.4; }
.accent-lock-mark {
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  margin-bottom:11px;
  border:1px solid rgba(var(--accent-hot-rgb),.35);
  border-radius:50%;
  color:var(--accent-hot);
  background:rgba(var(--accent-rgb),.07);
}
.accent-lock-actions { display:grid; grid-template-columns:1fr 1.25fr; gap:7px; }
.accent-lock-actions button {
  min-height:34px;
  border:1px solid rgba(204,236,255,.13);
  border-radius:8px;
  color:#aebfca;
  background:rgba(204,236,255,.025);
  font-size:9px;
  cursor:pointer;
}
.accent-lock-actions button:last-child {
  border-color:rgba(var(--accent-hot-rgb),.38);
  color:#fff5f8;
  background:rgba(var(--accent-rgb),.09);
}
.landing-accent-options { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin:14px 0 4px; }
.landing-accent-swatch {
  aspect-ratio:1;
  border:1px solid rgba(255,255,255,.25);
  border-radius:9px;
  color:#fff;
  background:var(--swatch-color);
  cursor:pointer;
  box-shadow:0 0 14px color-mix(in srgb,var(--swatch-color) 35%,transparent);
}
.landing-accent-swatch.active { border-color:#fff; transform:translateY(-2px); }
.landing-accent-swatch[data-accent-option="obsidian"] { border-color:rgba(190,199,210,.58); background:radial-gradient(circle at 34% 28%,#30353d 0,#111318 46%,#050609 100%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 0 17px rgba(154,164,176,.18); }
.landing-accent-swatch:disabled { cursor:not-allowed; filter:saturate(.45); opacity:.55; transform:none; }
.nav-news,.nav-image-bank { position:relative; color:#d5e4ec; }
.nav-image-bank-short { display:none; }
.nav-news::after,.nav-image-bank::after {
  content:"";
  position:absolute;
  right:9px;
  bottom:7px;
  left:9px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--accent-hot),transparent);
  box-shadow:0 0 8px rgba(var(--accent-rgb),.6);
}
.demo-cta {
  min-height:47px;
  gap:15px;
  padding-inline:18px;
  border:1px solid rgba(204,236,255,.18);
  border-radius:13px;
  color:#c7d8e2;
  background:rgba(204,236,255,.025);
}
.demo-cta::after { content:"↓"; color:var(--accent-hot); font-size:13px; text-shadow:0 0 9px rgba(var(--accent-rgb),.65); }

.demo-showcase,.news-showcase {
  position:relative;
  z-index:2;
  padding:112px 0 118px;
  border-top:1px solid var(--line);
}
.showcase-header {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,.66fr);
  align-items:end;
  gap:60px;
  margin-bottom:42px;
}
.showcase-header h2 {
  margin:16px 0 0;
  color:var(--ice-strong);
  font:550 clamp(38px,4.4vw,58px)/.96 var(--font-route-display);
  letter-spacing:-.025em;
  text-transform:uppercase;
}
.showcase-header > p { max-width:470px; margin:0; color:var(--muted); font-family:var(--font-subheading); font-size:18px; font-weight:500; line-height:1.62; letter-spacing:.01em; }
.demo-layout {
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  border:1px solid var(--line);
  background:rgba(3,4,8,.46);
  box-shadow:0 40px 100px rgba(0,0,0,.34),inset 0 0 80px rgba(var(--accent-rgb),.016);
}
.demo-selector { min-width:0; border-right:1px solid var(--line); }
.demo-tab {
  position:relative;
  width:100%;
  min-height:76px;
  display:grid;
  grid-template-columns:27px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:13px 15px;
  overflow:hidden;
  border:0;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  background:transparent;
  text-align:left;
  cursor:pointer;
}
.demo-tab:last-child { border-bottom:0; }
.demo-tab::before {
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:2px;
  background:var(--accent-hot);
  box-shadow:var(--red-glow);
  opacity:0;
}
.demo-tab.is-active { color:var(--ice-strong); background:linear-gradient(90deg,rgba(var(--accent-rgb),.12),transparent 70%); }
.demo-tab.is-active::before { opacity:1; }
.demo-tab > span { color:var(--accent-hot); font:600 8px/1 ui-monospace,monospace; }
.demo-tab strong,.demo-tab small { display:block; }
.demo-tab strong { margin-bottom:5px; color:inherit; font:500 14px/1.1 var(--font-signal); }
.demo-tab small { overflow:hidden; color:var(--faint); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.demo-tab > i { color:#566976; font:500 8px/1 ui-monospace,monospace; font-style:normal; }
.demo-player {
  min-width:0;
  background:radial-gradient(ellipse at 72% 10%,rgba(var(--accent-rgb),.055),transparent 42%),#04050a;
}
.demo-player[data-kind="accent"] {
  --accent:#9754ff;
  --accent-hot:#b883ff;
  --accent-rgb:151,84,255;
  --accent-hot-rgb:184,131,255;
}
.demo-player-top {
  height:51px;
  display:grid;
  grid-template-columns:90px 1fr 90px;
  align-items:center;
  padding:0 18px;
  border-bottom:1px solid var(--line);
}
.demo-player-label { justify-self:center; color:#778a98; font:500 8px/1 ui-monospace,monospace; letter-spacing:.1em; text-transform:uppercase; }
.demo-player-label i {
  display:inline-block;
  width:5px;
  height:5px;
  margin-right:7px;
  border-radius:50%;
  background:var(--accent-hot);
  box-shadow:var(--red-glow);
  animation:demo-live 1.8s ease-in-out infinite;
}
.demo-pause {
  justify-self:end;
  width:30px;
  height:30px;
  border:1px solid rgba(204,236,255,.12);
  border-radius:50%;
  color:#9badb8;
  background:rgba(204,236,255,.025);
  cursor:pointer;
}
.demo-screen {
  position:relative;
  min-height:485px;
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.demo-side {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  padding-top:24px;
  border-right:1px solid var(--line);
  background:rgba(var(--accent-rgb),.018);
}
.demo-side .preview-logo { width:25px; height:25px; margin-bottom:11px; }
.demo-side > i { width:20px; height:3px; border-radius:3px; background:#29333e; }
.demo-chat { position:relative; min-width:0; overflow:hidden; padding:0; }
.demo-mode { display:flex; align-items:center; justify-content:space-between; min-height:25px; margin-bottom:29px; }
.demo-mode > span {
  min-height:24px;
  display:inline-flex;
  align-items:center;
  padding:0 9px;
  border:1px solid rgba(var(--accent-hot-rgb),.35);
  border-radius:999px;
  color:#ff86a3;
  background:rgba(var(--accent-rgb),.07);
  font:600 7px/1 ui-monospace,monospace;
  letter-spacing:.14em;
}
.demo-mode > small { color:#60717e; font:500 8px/1 ui-monospace,monospace; }
.demo-real-view,.demo-real-settings { display:none; }
.demo-screen[data-kind="dialogs"] .demo-real-dialogs,
.demo-screen[data-kind="files"] .demo-real-analysis { display:flex; }
.demo-screen[data-kind="prompt"],
.demo-screen[data-kind="video"] { grid-template-columns:minmax(0,1fr); min-height:680px; }
.demo-screen[data-kind="prompt"] .demo-side,
.demo-screen[data-kind="video"] .demo-side { display:none; }
.demo-screen[data-kind="prompt"] .demo-real-visual-lab,
.demo-screen[data-kind="video"] .demo-real-motion-lab { display:grid; }
.demo-screen[data-kind="accent"] .demo-real-accent { display:block; }
.demo-screen[data-kind="limits"] .demo-chat,
.demo-screen[data-kind="personality"] .demo-chat { padding:27px 31px 76px; }
.demo-screen[data-kind="limits"] .demo-real-limits,
.demo-screen[data-kind="personality"] .demo-real-personality {
  display:block;
  animation:demo-answer-in .55s ease both;
}
.demo-real-lab {
  min-height:680px;
  grid-template-rows:auto auto auto minmax(0,1fr);
  color:#bacbd5;
  background:radial-gradient(circle at 8% 0%,rgba(var(--accent-rgb),.11),transparent 31%),#030408;
  animation:demo-answer-in .55s ease both;
}
.demo-real-motion-lab { grid-template-rows:auto auto minmax(0,1fr); }
.demo-live-lab-hero {
  min-height:155px;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  padding:17px 24px 13px;
  border-bottom:1px solid rgba(204,236,255,.09);
  background:linear-gradient(100deg,rgba(var(--accent-rgb),.065),transparent 45%);
}
.demo-live-lab-hero > button { width:28px; height:28px; border:1px solid rgba(204,236,255,.16); border-radius:50%; color:#81939e; background:#07090d; font-size:10px; }
.demo-live-lab-hero > div { min-width:0; display:grid; grid-template-columns:auto minmax(220px,1fr); grid-template-rows:auto auto; align-items:center; column-gap:24px; }
.demo-live-lab-hero > div > span { grid-column:1; color:var(--accent-hot); font:700 6px/1 ui-monospace,monospace; letter-spacing:.17em; }
.demo-live-lab-hero .visual-lab-wordmark-art { grid-column:1; width:255px; height:82px; }
.demo-live-lab-hero .motion-lab-wordmark { grid-column:1; display:block; font-size:68px; line-height:.8; white-space:nowrap; }
.demo-live-lab-hero > div > small { grid-column:2; grid-row:1 / span 2; max-width:330px; color:#81909a; font-size:9px; line-height:1.5; }
.demo-live-lab-hero > i { align-self:start; display:inline-flex; align-items:center; gap:6px; margin-top:8px; padding:7px 9px; border:1px solid rgba(104,255,186,.16); border-radius:999px; color:#82a394; background:rgba(49,151,111,.05); font:700 6px/1 ui-monospace,monospace; font-style:normal; }
.demo-live-lab-hero > i b { width:5px; height:5px; border-radius:50%; background:#62f0ad; box-shadow:0 0 9px #62f0ad; }
.demo-live-lab-proof { display:flex; align-items:center; gap:12px; min-height:35px; padding:0 62px; border-bottom:1px solid rgba(204,236,255,.075); color:#758793; font:500 7px/1 ui-monospace,monospace; }
.demo-live-lab-proof span { display:flex; align-items:center; gap:6px; }.demo-live-lab-proof b { color:var(--accent-hot); }.demo-live-lab-proof i { color:#34414b; font-style:normal; }
.demo-live-lab-operation { display:grid; gap:7px; padding:10px 18px 0; }
.demo-live-lab-operation > small { color:#667984; font:600 6px/1 ui-monospace,monospace; letter-spacing:.14em; }
.demo-live-lab-operation > div { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; padding:3px; border:1px solid rgba(204,236,255,.1); border-radius:7px; background:#05070a; color:#738894; font-size:7px; text-align:center; }
.demo-live-lab-operation span,.demo-live-lab-operation b { min-height:26px; display:grid; place-items:center; border-radius:5px; }
.demo-live-lab-operation b { border:1px solid rgba(var(--accent-hot-rgb),.5); color:#fff; background:rgba(var(--accent-rgb),.14); }
.demo-live-lab-workspace { min-height:0; display:grid; grid-template-columns:minmax(0,1.45fr) minmax(260px,.72fr); gap:13px; padding:13px 18px 18px; }
.demo-live-builder-panel,.demo-live-preview { min-width:0; overflow:hidden; border:1px solid rgba(208,229,240,.11); border-radius:12px; background:linear-gradient(145deg,rgba(15,18,25,.91),rgba(7,9,13,.9)); }
.demo-live-builder-panel { align-content:start; display:grid; grid-template-columns:1fr 1fr; gap:9px 10px; padding:16px; }
.demo-live-builder-panel > header { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:3px; }
.demo-live-builder-panel > header > div { display:flex; align-items:center; gap:8px; }
.demo-live-builder-panel > header span { color:var(--accent-hot); font:700 7px/1 ui-monospace,monospace; }
.demo-live-builder-panel h4 { margin:0; color:#e7f0f5; font:560 13px/1.1 var(--font-signal); }
.demo-live-builder-panel > header small { color:#5d6c76; font-size:7px; }
.demo-live-builder-panel label { min-width:0; display:grid; gap:5px; }
.demo-live-builder-panel label.is-primary,.demo-live-builder-panel > label:last-of-type,.demo-live-motion-options { grid-column:1 / -1; }
.demo-live-builder-panel label > span { display:flex; justify-content:space-between; gap:8px; color:#8ba0ac; font-size:7px; }
.demo-live-builder-panel label > span i { color:#5c6b74; font:600 5px/1 ui-monospace,monospace; font-style:normal; text-transform:uppercase; }
.demo-live-builder-panel label > strong { min-height:34px; display:flex; align-items:center; overflow:hidden; padding:7px 9px; border:1px solid rgba(204,236,255,.11); border-radius:7px; color:#aebfc9; background:#040609; font-size:8px; font-weight:500; line-height:1.35; }
.demo-live-builder-panel label.is-primary > strong { min-height:42px; border-color:rgba(var(--accent-hot-rgb),.34); background:linear-gradient(105deg,rgba(var(--accent-rgb),.07),#040609 55%); color:#d9e5eb; font-size:9px; }
.demo-live-field-pair { grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.demo-live-motion-options { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:2px; }
.demo-live-motion-options > span { display:grid; gap:5px; }
.demo-live-motion-options small { color:#5f707a; font:600 6px/1 ui-monospace,monospace; }
.demo-live-motion-options b { min-height:29px; display:flex; align-items:center; padding:0 8px; border:1px solid rgba(204,236,255,.11); border-radius:7px; color:#c2d0d8; background:#040609; font-size:7px; font-weight:500; }
.demo-live-preview { display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
.demo-live-preview > header { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:36px; padding:0 11px; border-bottom:1px solid rgba(208,229,240,.1); color:#657781; font:700 6px/1 ui-monospace,monospace; letter-spacing:.1em; }
.demo-live-preview > header b { color:var(--accent-hot); font-weight:700; }
.demo-live-preview figure { position:relative; min-height:0; margin:0; overflow:hidden; background:#020306; }
.demo-live-preview img,.demo-live-preview video { display:block; width:100%; height:100%; min-height:205px; object-fit:cover; background:#020306; }
.demo-live-motion-preview video { object-fit:contain; }
.demo-live-preview figcaption { position:absolute; right:7px; bottom:7px; left:7px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 7px; border:1px solid rgba(204,236,255,.15); border-radius:6px; color:#9fb2bd; background:rgba(2,3,6,.8); font:600 6px/1 ui-monospace,monospace; letter-spacing:.08em; backdrop-filter:blur(6px); }
.demo-live-preview figcaption strong { color:#fff; }
.demo-live-shadow { display:grid; gap:4px; padding:9px 11px 10px; border-top:1px solid rgba(204,236,255,.08); }
.demo-live-shadow > span { color:var(--accent-hot); font:700 6px/1 ui-monospace,monospace; letter-spacing:.14em; }.demo-live-shadow strong { color:#c9d8df; font-size:8px; }.demo-live-shadow small { color:#667984; font-size:6px; line-height:1.4; }
.demo-real-dialogs,.demo-real-analysis {
  min-height:500px;
  height:100%;
  flex-direction:column;
  color:#b9c9d2;
  background:radial-gradient(circle at 88% 0%,rgba(var(--accent-rgb),.09),transparent 34%),#030408;
  animation:demo-answer-in .55s ease both;
}
.demo-live-chat-header {
  min-height:62px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:11px 18px;
  border-bottom:1px solid rgba(204,236,255,.1);
  background:rgba(7,8,13,.88);
}
.demo-live-chat-header > div { display:grid; gap:5px; }
.demo-live-chat-header > div > strong { color:#e9f2f7; font:500 12px/1 var(--font-signal); }
.demo-live-chat-header > div > small { display:flex; align-items:center; gap:6px; color:#71838e; font-size:7px; }
.demo-live-chat-header > div > small i { width:5px; height:5px; border-radius:50%; background:#69f5b6; box-shadow:0 0 9px #69f5b6; }
.demo-live-chat-header nav { display:flex; align-items:center; gap:6px; }
.demo-live-chat-header nav > span { min-height:27px; display:inline-flex; align-items:center; gap:5px; padding:0 9px; border:1px solid rgba(var(--accent-hot-rgb),.3); border-radius:999px; color:#d9e4ea; background:rgba(var(--accent-rgb),.05); font:600 6px/1 ui-monospace,monospace; letter-spacing:.08em; }
.demo-live-chat-header nav > span:first-child { color:var(--accent-hot); letter-spacing:.13em; }
.demo-live-chat-header nav b { width:6px; height:6px; border-radius:50%; background:var(--accent-hot); box-shadow:0 0 8px rgba(var(--accent-rgb),.8); }
.demo-live-chat-body { min-height:0; flex:1; display:flex; flex-direction:column; gap:22px; overflow:hidden; padding:24px 27px 18px; }
.demo-live-user-message { align-self:flex-end; width:min(78%,610px); padding:14px 16px; border:1px solid rgba(204,236,255,.13); border-radius:15px 15px 4px 15px; background:rgba(204,236,255,.045); }
.demo-live-user-message > small,.demo-live-assistant-message small { display:block; margin-bottom:7px; color:#71838e; font:700 6px/1 ui-monospace,monospace; letter-spacing:.13em; text-transform:uppercase; }
.demo-live-user-message p,.demo-live-assistant-message p { margin:0; color:#bdcbd4; font-size:10px; line-height:1.55; }
.demo-live-assistant-message { width:min(86%,690px); display:grid; grid-template-columns:27px minmax(0,1fr); gap:12px; }
.demo-live-assistant-message .mini-mark { width:26px; height:26px; display:grid; place-items:center; color:#fff; font:italic 600 15px/1 var(--font-signal); text-shadow:0 0 8px var(--accent-hot),0 0 18px var(--accent-hot); }
.demo-live-assistant-message h4 { margin:0 0 9px; color:#eff6fa; font:520 14px/1.3 var(--font-signal); }
.demo-live-assistant-message ul { display:grid; gap:5px; margin:11px 0 0; padding:0; list-style:none; }
.demo-live-assistant-message li { padding:6px 9px 6px 20px; border-left:1px solid rgba(var(--accent-hot-rgb),.32); color:#82949f; background:linear-gradient(90deg,rgba(var(--accent-rgb),.045),transparent); font-size:8px; line-height:1.35; }
.demo-live-assistant-message li::before { content:"•"; margin-left:-11px; margin-right:8px; color:var(--accent-hot); }
.demo-live-composer { min-height:53px; display:grid; grid-template-columns:28px 28px minmax(0,1fr) auto 35px; align-items:center; gap:4px; margin:0 18px 16px; padding:5px 6px; border:1px solid rgba(204,236,255,.14); border-radius:13px; color:#536570; background:rgba(6,8,13,.91); }
.demo-live-composer > span { width:26px; height:26px; display:grid; place-items:center; border:1px solid rgba(204,236,255,.1); border-radius:8px; color:#788b97; font-size:8px; }
.demo-live-composer > p { margin:0 0 0 7px; color:#465762; font-size:9px; }
.demo-live-composer > small { color:#52646f; font:500 6px/1 ui-monospace,monospace; }
.demo-live-composer > b { width:33px; height:33px; display:grid; place-items:center; border:1px solid rgba(var(--accent-hot-rgb),.5); border-radius:9px; color:#fff; background:rgba(var(--accent-rgb),.09); font-size:14px; }
.demo-live-file { display:flex; align-items:center; gap:9px; margin-bottom:10px; padding:9px 10px; border:1px solid rgba(var(--accent-hot-rgb),.25); border-radius:8px; background:rgba(var(--accent-rgb),.045); }
.demo-live-file > i { width:27px; height:27px; display:grid; place-items:center; border-radius:7px; color:var(--accent-hot); background:rgba(var(--accent-rgb),.1); font-size:12px; font-style:normal; }
.demo-live-file > div { display:grid; gap:3px; }.demo-live-file strong { color:#dfe9ee; font-size:9px; }.demo-live-file small { margin:0; color:#6f818c; font-size:7px; }
.demo-live-analysis-table { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:11px 0 10px; }
.demo-live-analysis-table span { display:grid; gap:5px; padding:9px 10px; border:1px solid rgba(204,236,255,.1); border-radius:8px; background:rgba(204,236,255,.02); }
.demo-live-analysis-table b { color:#aebfc9; font-size:8px; }.demo-live-analysis-table em { color:var(--accent-hot); font:600 9px/1 ui-monospace,monospace; font-style:normal; }
.demo-live-assistant-message button { min-height:29px; border:1px solid rgba(var(--accent-hot-rgb),.38); border-radius:8px; padding:0 10px; color:#f4dbe2; background:rgba(var(--accent-rgb),.07); font-size:7px; }
.demo-real-accent { position:relative; min-height:500px; overflow:hidden; background:#030408; animation:demo-answer-in .55s ease both; }
.demo-real-accent-background { position:absolute; inset:0; filter:blur(2px); opacity:.28; }
.demo-real-accent-background > div { display:grid; gap:8px; width:min(460px,80%); margin:90px auto 0; text-align:center; }
.demo-real-accent-background h4 { margin:0; color:#eff6fa; font:400 23px/1.1 var(--font-signal); }.demo-real-accent-background p { margin:0; color:#71838e; font-size:10px; }
.demo-real-accent-background > div > span { width:100%; height:31px; border:1px solid rgba(204,236,255,.1); border-radius:9px; }
.demo-live-accent-modal { position:absolute; z-index:2; top:50%; left:50%; width:min(430px,calc(100% - 42px)); padding:24px; border:1px solid rgba(204,236,255,.16); border-radius:16px; background:radial-gradient(ellipse at 90% 0%,rgba(var(--accent-rgb),.11),transparent 43%),rgba(7,8,13,.98); box-shadow:0 28px 90px rgba(0,0,0,.7),0 0 45px rgba(var(--accent-rgb),.08); transform:translate(-50%,-50%); }
.demo-live-accent-modal > button { position:absolute; top:13px; right:13px; width:28px; height:28px; border:1px solid rgba(204,236,255,.13); border-radius:50%; color:#7b8d98; background:#090b10; font-size:14px; }
.demo-live-accent-modal > span { color:var(--accent-hot); font:700 7px/1 ui-monospace,monospace; letter-spacing:.16em; }
.demo-live-accent-modal h4 { margin:12px 0 7px; color:#f1f7fa; font:400 29px/1 var(--font-signal); }
.demo-live-accent-modal p { margin:0; color:#8698a3; font-size:10px; }.demo-live-accent-modal > small { display:block; margin-top:14px; color:#657782; font-size:8px; line-height:1.45; }
.demo-live-accent-swatches { display:grid; grid-template-columns:repeat(7,1fr); gap:9px; margin-top:20px; }
.demo-live-accent-swatches i { position:relative; aspect-ratio:1; border:1px solid rgba(255,255,255,.23); border-radius:10px; background:#ff2b61; box-shadow:0 0 13px rgba(255,43,97,.18); }
.demo-live-accent-swatches i:nth-child(2) { background:#9754ff; }.demo-live-accent-swatches i:nth-child(3) { background:#2e77ff; }.demo-live-accent-swatches i:nth-child(4) { background:#00b8d9; }.demo-live-accent-swatches i:nth-child(5) { background:#1bc277; }.demo-live-accent-swatches i:nth-child(6) { background:#ff9d2e; }.demo-live-accent-swatches i:nth-child(7) { background:radial-gradient(circle at 34% 28%,#30353d,#050609 67%); }
.demo-live-accent-swatches i.is-active { outline:2px solid rgba(var(--accent-hot-rgb),.42); border:2px solid #fff; }.demo-live-accent-swatches i.is-active::after { content:"✓"; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font:700 14px/1 var(--font-signal); text-shadow:0 1px 4px #000; }
.demo-real-settings { width:min(640px,100%); margin:0 auto; }
.demo-settings-header { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-bottom:16px; color:var(--accent-hot); font:600 8px/1 ui-monospace,monospace; letter-spacing:.12em; }
.demo-settings-header > span { margin-right:auto; }
.demo-settings-header button { min-height:29px; display:inline-flex; align-items:center; gap:6px; border:1px solid rgba(var(--accent-hot-rgb),.35); border-radius:999px; padding:0 10px; color:#dce8ee; background:rgba(var(--accent-rgb),.07); font:600 7px/1 ui-monospace,monospace; }
.demo-settings-header button b { width:7px; height:7px; border-radius:50%; background:var(--accent-hot); box-shadow:0 0 8px rgba(var(--accent-rgb),.8); }
.demo-settings-modal,.demo-character-modal { padding:22px 24px 24px; border:1px solid rgba(204,236,255,.13); border-radius:16px; background:radial-gradient(ellipse at 90% 0%,rgba(var(--accent-rgb),.09),transparent 44%),rgba(7,8,13,.94); box-shadow:0 22px 60px rgba(0,0,0,.34),0 0 34px rgba(var(--accent-rgb),.05); }
.demo-settings-kicker { color:var(--accent-hot); font:600 7px/1 ui-monospace,monospace; letter-spacing:.14em; text-transform:uppercase; }
.demo-settings-modal h4,.demo-character-modal h4 { margin:10px 0 18px; color:#f2f7fb; font:400 28px/1 var(--font-signal); }
.demo-settings-profile { display:flex; align-items:center; gap:12px; padding-bottom:15px; border-bottom:1px solid rgba(204,236,255,.1); }
.demo-settings-profile > i { width:42px; height:42px; display:grid; place-items:center; flex:0 0 42px; border:1px solid rgba(var(--accent-hot-rgb),.42); border-radius:50%; color:#fff; background:rgba(var(--accent-rgb),.08); font:500 15px/1 var(--font-signal); font-style:normal; }
.demo-settings-profile > div { display:grid; gap:4px; }
.demo-settings-profile strong { color:#eef6fa; font:500 14px/1 var(--font-signal); }
.demo-settings-profile span,.demo-settings-row span { color:#72848f; font-size:9px; }
.demo-settings-balance { margin:16px 0; padding:14px; border:1px solid rgba(var(--accent-hot-rgb),.22); border-radius:12px; background:rgba(var(--accent-rgb),.035); }
.demo-settings-balance header,.demo-settings-balance > div { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.demo-settings-balance header strong { color:#eff7fa; font-size:12px; }
.demo-settings-balance header button,.demo-settings-row button { min-height:29px; border:1px solid rgba(var(--accent-hot-rgb),.42); border-radius:7px; padding:0 10px; color:#ffe2e9; background:rgba(var(--accent-rgb),.07); font-size:8px; }
.demo-settings-balance > div { margin-top:12px; }
.demo-settings-balance > div > span { display:grid; gap:4px; color:#7b8d98; font-size:9px; }
.demo-settings-balance b { color:#fff; font:500 20px/1 var(--font-signal); }
.demo-settings-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 0 0; border-top:1px solid rgba(204,236,255,.1); }
.demo-settings-row > div { display:grid; gap:4px; }
.demo-settings-row strong { color:#dce8ee; font-size:11px; }
.demo-character-modal { width:min(510px,100%); margin:0 auto; }
.demo-character-modal > p { margin:-7px 0 17px; color:#7f919c; font-size:10px; line-height:1.45; }
.demo-character-options { display:grid; gap:8px; }
.demo-character-options button { display:grid; grid-template-columns:24px minmax(0,1fr); align-items:center; gap:11px; width:100%; min-height:62px; border:1px solid rgba(204,236,255,.12); border-radius:10px; padding:11px 12px; color:#dce8ee; background:rgba(204,236,255,.018); text-align:left; }
.demo-character-options button.is-active { border-color:rgba(var(--accent-hot-rgb),.58); background:rgba(var(--accent-rgb),.09); box-shadow:inset 0 0 22px rgba(var(--accent-rgb),.04),0 0 18px rgba(var(--accent-rgb),.05); }
.demo-character-options button > i { width:22px; height:22px; display:grid; place-items:center; border:1px solid rgba(204,236,255,.2); border-radius:50%; color:var(--accent-hot); font-size:9px; font-style:normal; }
.demo-character-options button > span { display:grid; gap:4px; }
.demo-character-options strong { font:500 13px/1 var(--font-signal); }
.demo-character-options em { color:#748792; font-size:9px; font-style:normal; }
.demo-account-settings h4 {
  margin:20px 0 26px;
  color:#f2f7fb;
  font:400 28px/1 var(--font-signal);
}
.demo-accent-setting {
  padding:20px;
  border:1px solid rgba(204,236,255,.12);
  border-radius:13px;
  background:rgba(204,236,255,.018);
}
.demo-accent-setting strong { color:#eaf3f8; font:500 14px/1.2 var(--font-signal); }
.demo-accent-setting p { margin:7px 0 17px; color:#8799a6; font-size:10px; line-height:1.45; }
.demo-accent-swatches { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:11px; }
.demo-accent-swatches i {
  aspect-ratio:1.18;
  border:1px solid rgba(255,255,255,.22);
  border-radius:10px;
  background:#ff2b61;
  box-shadow:0 0 14px rgba(255,43,97,.12);
}
.demo-accent-swatches i:nth-child(2) { background:#9754ff; box-shadow:0 0 18px rgba(151,84,255,.45); }
.demo-accent-swatches i:nth-child(3) { background:#2e77ff; }
.demo-accent-swatches i:nth-child(4) { background:#00b8d9; }
.demo-accent-swatches i:nth-child(5) { background:#1bc277; }
.demo-accent-swatches i:nth-child(6) { background:#ff9d2e; }
.demo-accent-swatches i:nth-child(7) { border-color:rgba(190,199,210,.58); background:radial-gradient(circle at 34% 28%,#30353d 0,#111318 46%,#050609 100%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 0 17px rgba(154,164,176,.18); }
.demo-accent-swatches i.is-selected {
  position:relative;
  border:2px solid #f4edff;
  outline:2px solid rgba(184,131,255,.35);
}
.demo-accent-swatches i.is-selected::after {
  content:"✓";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#fff;
  font:600 17px/1 var(--font-signal);
  text-shadow:0 1px 5px rgba(0,0,0,.45);
}
.demo-accent-saved {
  display:flex;
  align-items:center;
  gap:8px;
  margin:15px 2px 0;
  color:#8fa2ae;
  font-size:9px;
}
.demo-accent-saved b { color:var(--accent-hot); font-size:13px; }
.demo-user-card {
  max-width:75%;
  margin-left:auto;
  padding:14px 16px;
  border:1px solid rgba(204,236,255,.13);
  border-radius:14px 14px 4px 14px;
  background:rgba(204,236,255,.045);
  animation:demo-user-in .5s ease both;
}
.demo-user-card small,.demo-answer-card small {
  display:block;
  margin-bottom:7px;
  color:#60727f;
  font:600 7px/1 ui-monospace,monospace;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.demo-user-card p,.demo-answer-card p { margin:0; color:#c5d3dc; font-size:12px; line-height:1.58; }
.demo-attachment {
  width:fit-content;
  margin-top:10px;
  padding:7px 9px;
  border:1px solid rgba(var(--accent-hot-rgb),.22);
  border-radius:7px;
  color:#aebfca;
  background:rgba(var(--accent-rgb),.045);
  font:500 12px/1.25 ui-monospace,monospace;
}
.demo-motion-media {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  width:min(100%,720px);
  gap:9px;
  margin:13px auto 0;
  animation:demo-answer-in .65s .08s ease both;
}
.demo-motion-frame {
  position:relative;
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(var(--accent-hot-rgb),.24);
  border-radius:10px;
  background:#020305;
  aspect-ratio:16/9;
}
.demo-motion-frame img,.demo-motion-frame video {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.demo-motion-frame > span {
  position:absolute;
  right:7px;
  bottom:7px;
  left:7px;
  padding:6px 7px;
  border:1px solid rgba(204,236,255,.16);
  border-radius:6px;
  color:#dceaf2;
  background:rgba(2,3,5,.78);
  font:500 12px/1.25 ui-monospace,monospace;
  letter-spacing:.04em;
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
}
.demo-image-media {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  width:min(100%,560px);
  gap:9px;
  margin:16px auto 0;
  animation:demo-answer-in .65s .08s ease both;
}
.demo-image-media article {
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(204,236,255,.14);
  border-radius:10px;
  background:#020305;
  box-shadow:0 12px 28px rgba(0,0,0,.3);
}
.demo-image-media article:last-child { border-color:rgba(var(--accent-hot-rgb),.38); box-shadow:0 12px 30px rgba(0,0,0,.34),0 0 22px rgba(var(--accent-rgb),.06); }
.demo-image-media img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.demo-image-media figcaption { display:grid; gap:3px; min-height:47px; align-content:center; padding:8px 10px; border-top:1px solid rgba(204,236,255,.1); }
.demo-image-media figcaption strong { color:var(--accent-hot); font:600 7px/1 ui-monospace,monospace; letter-spacing:.11em; }
.demo-image-media article:last-child figcaption strong { color:var(--ice); }
.demo-image-media figcaption span { overflow:hidden; color:#9eb0bb; font-size:8px; line-height:1.3; text-overflow:ellipsis; white-space:nowrap; }
.demo-screen[data-kind="video"] .demo-answer-card { margin-top:15px; }
.demo-screen[data-kind="image"] .demo-answer-card { margin-top:15px; }
.demo-screen[data-kind="video"] .demo-answer-card p { display:none; }
.demo-screen[data-kind="video"] .demo-result { margin-top:8px; }
.demo-answer-card {
  max-width:82%;
  display:grid;
  grid-template-columns:25px minmax(0,1fr);
  gap:13px;
  margin-top:27px;
  animation:demo-answer-in .65s .18s ease both;
}
.demo-answer-card .mini-mark { width:24px; height:24px; }
.demo-answer-card strong { display:block; margin:0 0 8px; color:#f2f9fd; font:500 14px/1.25 var(--font-signal); }
.demo-result { display:grid; gap:6px; margin-top:13px; }
.demo-result > span {
  position:relative;
  display:block;
  padding:7px 9px 7px 24px;
  border-left:1px solid rgba(var(--accent-hot-rgb),.28);
  color:#82949f;
  background:linear-gradient(90deg,rgba(var(--accent-rgb),.045),transparent);
  font-size:9px;
  line-height:1.35;
}
.demo-result > span::before {
  content:"";
  position:absolute;
  top:11px;
  left:10px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--accent-hot);
}
.demo-composer {
  position:absolute;
  right:24px;
  bottom:20px;
  left:24px;
  min-height:43px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 7px 0 15px;
  border:1px solid rgba(204,236,255,.14);
  border-radius:12px;
  color:#465663;
  background:rgba(6,8,13,.82);
  font-size:9px;
}
.demo-composer b {
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border:1px solid rgba(var(--accent-hot-rgb),.55);
  border-radius:8px;
  color:#fff;
}
.demo-screen[data-kind="personality"] .demo-result,
.demo-screen[data-kind="limits"] .demo-result,
.demo-screen[data-kind="image"] .demo-result,
.demo-screen[data-kind="video"] .demo-result { grid-template-columns:repeat(3,minmax(0,1fr)); }
.demo-screen[data-kind="prompt"] .demo-result { grid-template-columns:repeat(5,minmax(0,1fr)); }
.demo-screen[data-kind="prompt"] .demo-result > span,
.demo-screen[data-kind="personality"] .demo-result > span,
.demo-screen[data-kind="limits"] .demo-result > span {
  min-height:54px;
  padding:10px;
  border:1px solid rgba(var(--accent-hot-rgb),.16);
  border-radius:8px;
}
.demo-screen[data-kind="limits"] .demo-result > span {
  display:grid;
  place-items:center;
  color:var(--ice-strong);
  background:linear-gradient(145deg,rgba(var(--accent-rgb),.12),rgba(204,236,255,.025));
  font:600 9px/1.2 var(--font-ui);
  text-align:center;
}
.demo-screen[data-kind="image"] .demo-result > span,
.demo-screen[data-kind="video"] .demo-result > span {
  min-height:68px;
  display:grid;
  align-items:end;
  padding:9px;
  border:1px solid rgba(204,236,255,.11);
  border-radius:7px;
  color:#e5f0f6;
  background:linear-gradient(155deg,#19233a,#503147 48%,#151924);
}
.demo-screen[data-kind="accent"] .demo-result { grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }
.demo-screen[data-kind="accent"] .demo-result > span {
  min-height:53px;
  display:grid;
  place-items:end center;
  padding:7px 4px;
  border:1px solid rgba(255,255,255,.19);
  border-radius:9px;
  color:#fff;
  background:#ff2b61;
  font-size:7px;
}
.demo-screen[data-kind="accent"] .demo-result > span:nth-child(2) { background:#9754ff; box-shadow:0 0 16px rgba(151,84,255,.42); }
.demo-screen[data-kind="accent"] .demo-result > span:nth-child(3) { background:#2e77ff; }
.demo-screen[data-kind="accent"] .demo-result > span:nth-child(4) { background:#00b8d9; }
.demo-screen[data-kind="accent"] .demo-result > span:nth-child(5) { background:#1bc277; }
.demo-screen[data-kind="accent"] .demo-result > span:nth-child(6) { background:#ff9d2e; }
.demo-screen[data-kind="prompt"] .demo-result > span::before,
.demo-screen[data-kind="personality"] .demo-result > span::before,
.demo-screen[data-kind="limits"] .demo-result > span::before,
.demo-screen[data-kind="image"] .demo-result > span::before,
.demo-screen[data-kind="video"] .demo-result > span::before,
.demo-screen[data-kind="accent"] .demo-result > span::before { display:none; }
.demo-flash { position:absolute; inset:0; pointer-events:none; opacity:0; background:radial-gradient(circle at 62% 48%,rgba(var(--accent-hot-rgb),.14),transparent 42%); }
.demo-screen.is-changing .demo-flash { animation:demo-flash .5s ease; }
.demo-progress { height:2px; overflow:hidden; background:rgba(204,236,255,.06); }
.demo-progress span { display:block; width:0; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-hot),#ffd5df); }
.demo-progress span.is-running { animation:demo-progress var(--demo-time,18s) linear forwards; }
.demo-caption { display:grid; grid-template-columns:minmax(220px,.72fr) minmax(0,1fr); gap:36px; padding:24px 28px 28px; }
.demo-caption h3 { margin:9px 0 0; color:var(--ice-strong); font:400 21px/1.1 var(--font-signal); }
.demo-caption > p { margin:0; color:var(--muted); font-size:11px; line-height:1.7; }

.compact-capabilities { padding-top:100px; }
.compact-capabilities .capabilities-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.compact-capabilities .capabilities-grid article { min-height:190px; }
.news-showcase { padding-top:100px; }
.news-grid {
  display:grid;
  grid-template-columns:.78fr 1.32fr .78fr;
  grid-template-areas:"motion important packs";
  align-items:center;
  gap:16px;
}
.news-card {
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:330px;
  padding:25px;
  overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(145deg,rgba(204,236,255,.018),rgba(var(--accent-rgb),.018));
}
.news-card-important {
  grid-area:important;
  min-height:500px;
  padding:32px;
  border-color:rgba(var(--accent-hot-rgb),.34);
  background:radial-gradient(circle at 50% 12%,rgba(var(--accent-hot-rgb),.14),transparent 36%),linear-gradient(150deg,rgba(var(--accent-rgb),.1),transparent 54%),#05060b;
  box-shadow:0 0 28px rgba(var(--accent-rgb),.14),0 0 90px rgba(var(--accent-rgb),.08);
}
.news-card-motion { grid-area:motion; }
.news-card-packs { grid-area:packs; }
.news-meta { display:flex; justify-content:space-between; gap:12px; color:var(--faint); font:500 8px/1 ui-monospace,monospace; text-transform:uppercase; }
.news-meta > span { color:var(--accent-hot); }
.news-priority {
  width:fit-content;
  margin-top:62px;
  padding:7px 9px;
  border:1px solid rgba(var(--accent-hot-rgb),.36);
  border-radius:999px;
  color:var(--accent-hot);
  background:rgba(var(--accent-rgb),.08);
  font:600 8px/1 ui-monospace,monospace;
  text-transform:uppercase;
}
.news-index { display:block; margin-top:43px; color:rgba(var(--accent-hot-rgb),.35); font:300 48px/1 var(--font-signal); }
.news-card h3 { margin:18px 0 14px; color:var(--ice-strong); font:400 23px/1.14 var(--font-signal); }
.news-card-important h3 { max-width:560px; margin-top:24px; font-size:clamp(30px,3.1vw,43px); line-height:1.02; }
.news-card p { margin:0; color:var(--muted); font-size:11px; line-height:1.7; }
.news-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:20px; }
.news-tags span { padding:6px 8px; border:1px solid rgba(204,236,255,.1); border-radius:999px; color:#768996; font-size:8px; }
.news-card button { width:fit-content; margin-top:auto; padding:11px 0 0; border:0; color:#aabdc8; background:transparent; font-size:10px; cursor:pointer; }
.news-card button span { margin-left:9px; color:var(--accent-hot); }
.news-dialog {
  width:min(600px,calc(100% - 32px));
  padding:34px;
  border:1px solid rgba(var(--accent-hot-rgb),.25);
  border-radius:16px;
  color:var(--text);
  background:radial-gradient(ellipse at 85% 0%,rgba(var(--accent-rgb),.1),transparent 42%),#07080d;
  box-shadow:0 32px 100px rgba(0,0,0,.78);
}
.news-dialog::backdrop { background:rgba(0,0,0,.72); backdrop-filter:blur(7px); }
.news-dialog h2 { margin:13px 0 20px; color:var(--ice-strong); font:400 31px/1.08 var(--font-signal); }
.news-dialog div { color:var(--muted); font-size:13px; line-height:1.72; }
.news-dialog-close {
  position:absolute;
  top:14px;
  right:14px;
  width:32px;
  height:32px;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--muted);
  background:rgba(204,236,255,.025);
  cursor:pointer;
}

@keyframes demo-live { 0%,100%{opacity:.5;transform:scale(.8)} 50%{opacity:1;transform:scale(1)} }
@keyframes demo-user-in { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
@keyframes demo-answer-in { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
@keyframes demo-flash { 0%,100%{opacity:0} 45%{opacity:1} }
@keyframes demo-progress { from{width:0} to{width:100%} }

@media (max-width:980px) {
  .demo-layout { grid-template-columns:1fr; }
  .demo-selector { display:flex; overflow-x:auto; border-right:0; border-bottom:1px solid var(--line); }
  .demo-tab { flex:0 0 205px; border-right:1px solid var(--line); border-bottom:0; }
  .news-grid { grid-template-columns:1fr 1fr; grid-template-areas:"important important" "motion packs"; }
  .news-card-important { min-height:400px; }
}

@media (max-width:700px) {
  .landing-nav > .brand .version-badge { padding:3px 5px 2px; font-size:7px; }
  .accent-trigger { padding-inline:9px!important; }
  .landing-nav .accent-trigger,.landing-nav .nav-news,.landing-nav .nav-image-bank,.landing-nav .nav-login { display:inline-flex; }
  .accent-trigger > span { display:none; }
  .accent-popover { position:fixed; top:67px; right:14px; left:14px; width:auto; }
  .landing-nav .nav-news,.landing-nav .nav-image-bank,.landing-nav .nav-login { padding-inline:8px; font-size:11px; }
  .nav-image-bank-full { display:none; }
  .nav-image-bank-short { display:inline; }
  .showcase-header { grid-template-columns:1fr; gap:22px; }
  .showcase-header h2 { font-size:38px; }
  .showcase-header > p { font-size:17px; }
  .demo-showcase,.news-showcase { padding:76px 0 82px; }
  .demo-player-top { grid-template-columns:50px 1fr 50px; padding-inline:12px; }
  .demo-screen { min-height:470px; grid-template-columns:42px minmax(0,1fr); }
  .demo-screen[data-kind="prompt"] { min-height:850px; grid-template-columns:1fr; }
  .demo-screen[data-kind="prompt"] .demo-real-visual-lab { min-height:850px; }
  .demo-screen[data-kind="video"] { min-height:720px; }
  .demo-real-lab-header { min-height:82px; padding:14px; }
  .demo-real-lab-header > i { display:none; }
  .demo-real-lab-header strong { font-size:16px; }
  .demo-real-lab-header span { font-size:7px; }
  .demo-real-lab-header small { font-size:8px; }
  .demo-real-lab-workspace { grid-template-columns:1fr; }
  .demo-real-lab-controls { gap:9px; padding:13px 14px 15px; border-right:0; border-bottom:1px solid rgba(204,236,255,.1); }
  .demo-real-lab-note,.demo-real-lab-field > label,.demo-real-lab-pairs label,.demo-real-lab-segmented,.demo-real-lab-tabs { font-size:7px; }
  .demo-real-lab-textarea { min-height:60px; font-size:8px; }
  .demo-real-lab-pairs strong,.demo-real-lab-source small { font-size:7px; }
  .demo-real-lab-build,.demo-real-lab-generate { min-height:32px; font-size:8px; }
  .demo-real-lab-results { min-height:215px; padding:15px; }
  .demo-real-lab-result { width:100%; }
  .demo-real-lab-result-body > p { font-size:8px; }
  .demo-real-lab-result-body nav > * { font-size:7px; }
  .demo-side { padding-top:19px; }
  .demo-side > i { width:15px; }
  .demo-chat { padding:22px 14px 70px; }
  .demo-user-card,.demo-answer-card { max-width:94%; }
  .demo-composer { right:12px; bottom:14px; left:12px; }
  .demo-caption { grid-template-columns:1fr; gap:15px; padding:22px 18px 24px; }
  .demo-screen[data-kind="prompt"] .demo-result,.demo-screen[data-kind="personality"] .demo-result { grid-template-columns:1fr; }
  .demo-image-media { width:100%; grid-template-columns:minmax(0,1fr); }
  .demo-screen[data-kind="accent"] .demo-account-settings { padding:18px 16px; }
  .demo-screen[data-kind="accent"] .demo-account-settings h4 { margin:16px 0 20px; font-size:24px; }
  .demo-screen[data-kind="accent"] .demo-accent-setting { padding:15px; }
  .demo-screen[data-kind="accent"] .demo-accent-swatches { grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
  .demo-settings-modal,.demo-character-modal { padding:18px 16px; }
  .demo-settings-modal h4,.demo-character-modal h4 { font-size:24px; }
  .demo-settings-header { flex-wrap:wrap; }
  .demo-settings-balance > div { gap:7px; }
  .demo-screen[data-kind="dialogs"],.demo-screen[data-kind="files"],.demo-screen[data-kind="accent"] { grid-template-columns:1fr; }
  .demo-screen[data-kind="dialogs"] .demo-side,.demo-screen[data-kind="files"] .demo-side,.demo-screen[data-kind="accent"] .demo-side { display:none; }
  .demo-screen[data-kind="video"],.demo-screen[data-kind="prompt"] { min-height:920px; }
  .demo-real-lab { min-height:920px; }
  .demo-live-lab-hero { min-height:128px; grid-template-columns:30px minmax(0,1fr); gap:10px; padding:13px 12px; }
  .demo-live-lab-hero > div { grid-template-columns:1fr; grid-template-rows:auto auto auto; gap:5px; }
  .demo-live-lab-hero > div > span,.demo-live-lab-hero .visual-lab-wordmark-art,.demo-live-lab-hero .motion-lab-wordmark,.demo-live-lab-hero > div > small { grid-column:1; grid-row:auto; }
  .demo-live-lab-hero .visual-lab-wordmark-art { width:190px; height:59px; }
  .demo-live-lab-hero .motion-lab-wordmark { font-size:49px; }
  .demo-live-lab-hero > div > small { font-size:7px; }
  .demo-live-lab-hero > i { display:none; }
  .demo-live-lab-proof { gap:7px; overflow:hidden; padding:0 12px; white-space:nowrap; }
  .demo-live-lab-proof span { font-size:6px; }
  .demo-live-lab-workspace { grid-template-columns:1fr; }
  .demo-live-builder-panel { padding:12px; }
  .demo-live-preview img,.demo-live-preview video { min-height:280px; }
  .demo-live-motion-preview video { max-height:390px; }
  .demo-live-chat-header { align-items:flex-start; flex-direction:column; gap:8px; padding:11px 12px; }
  .demo-live-chat-header nav { width:100%; overflow:hidden; }
  .demo-live-chat-header nav > span { padding-inline:7px; white-space:nowrap; }
  .demo-live-chat-body { gap:17px; padding:18px 12px 14px; }
  .demo-live-user-message,.demo-live-assistant-message { width:100%; max-width:100%; }
  .demo-live-composer { grid-template-columns:25px 25px minmax(0,1fr) 31px; margin:0 10px 10px; }
  .demo-live-composer > small { display:none; }
  .demo-live-accent-modal { width:calc(100% - 24px); padding:20px 16px; }
  .demo-live-accent-swatches { gap:6px; }
  .compact-capabilities .capabilities-grid { grid-template-columns:1fr; }
  .news-grid { grid-template-columns:1fr; grid-template-areas:"important" "motion" "packs"; }
  .news-card-important { min-height:420px; padding:25px; }
}

/* The shared platform contract also applies to the landing demonstrations. */
#landing-view :is(
  .accent-popover > p,
  .demo-accent-setting p,
  .demo-caption > p,
  .news-card p
) {
  color: var(--copy-secondary);
  font-size: var(--type-helper) !important;
  font-weight: 400;
  line-height: var(--line-helper);
}

#landing-view :is(
  .demo-tab small,
  .demo-user-card small,
  .demo-answer-card small,
  .demo-result > span,
  .news-card button,
  .news-tags span
) {
  font-size: var(--type-caption) !important;
  font-weight: 400;
}

@media (min-width:1900px) and (min-height:800px) {
  #landing-view small { font-size:15px !important; }
  .demo-showcase,.news-showcase { padding:168px 0 177px; }
  .showcase-header { grid-template-columns:minmax(0,1fr) minmax(420px,.66fr); gap:90px; margin-bottom:63px; }
  .showcase-header h2 { margin-top:24px; font-size:68px; }
  .showcase-header > p { max-width:705px; font-size:20px; }
  .demo-layout { grid-template-columns:450px minmax(0,1fr); }
  .demo-tab { min-height:114px; grid-template-columns:41px minmax(0,1fr) auto; gap:15px; padding:20px 23px; }
  .demo-tab > span,.demo-tab > i { font-size:12px; }
  .demo-tab strong { margin-bottom:8px; font-size:21px; }
  .demo-tab small { font-size:14px; }
  .demo-player-top { height:77px; grid-template-columns:135px 1fr 135px; padding-inline:27px; }
  .demo-player-label { font-size:12px; }
  .demo-player-label i { width:8px; height:8px; margin-right:11px; }
  .demo-pause { width:45px; height:45px; font-size:18px; }
  .demo-screen { min-height:728px; grid-template-columns:87px minmax(0,1fr); }
  .demo-screen[data-kind="prompt"] { grid-template-columns:minmax(0,1fr); }
  .demo-screen[data-kind="prompt"] .demo-real-visual-lab { min-height:728px; }
  .demo-screen[data-kind="video"] { min-height:1050px; }
  .demo-real-lab-header { min-height:112px; padding:21px 27px; }
  .demo-real-lab-header span,.demo-real-lab-results header span,.demo-real-lab-source > span { font-size:9px; }
  .demo-real-lab-header strong { font-size:26px; }
  .demo-real-lab-header small,.demo-real-lab-header > i { font-size:11px; }
  .demo-real-lab-workspace { grid-template-columns:minmax(368px,38%) minmax(0,1fr); }
  .demo-real-lab-controls { gap:12px; padding:18px 21px; }
  .demo-real-lab-tabs,.demo-real-lab-segmented,.demo-real-lab-note,.demo-real-lab-field > label,.demo-real-lab-pairs label { font-size:9px; }
  .demo-real-lab-tabs > *,.demo-real-lab-segmented > * { min-height:31px; }
  .demo-real-lab-textarea { min-height:81px; padding:12px 14px; font-size:11px; }
  .demo-real-lab-pairs strong { min-height:39px; padding-inline:12px; font-size:9px; }
  .demo-real-lab-source { gap:5px; padding:11px 12px; }
  .demo-real-lab-source strong { font-size:11px; }
  .demo-real-lab-source small { font-size:9px; }
  .demo-real-lab-build,.demo-real-lab-generate { min-height:42px; padding-inline:14px; font-size:11px; }
  .demo-real-lab-generate { min-height:47px; }
  .demo-real-lab-results { padding:23px 26px; }
  .demo-real-lab-results header strong { font-size:21px; }
  .demo-real-lab-results header button { min-height:38px; padding-inline:14px; font-size:9px; }
  .demo-real-lab-result { width:min(620px,100%); border-radius:15px; }
  .demo-real-lab-result figcaption { right:11px; bottom:11px; left:11px; padding:9px 11px; border-radius:9px; font-size:9px; }
  .demo-real-lab-result-body { gap:10px; padding:14px 15px 15px; }
  .demo-real-lab-result-body > div { font-size:9px; }
  .demo-real-lab-result-body > p { font-size:11px; }
  .demo-real-lab-result-body nav { gap:8px; }
  .demo-real-lab-result-body nav > * { min-height:35px; padding-inline:11px; border-radius:9px; font-size:9px; }
  .demo-real-settings { width:min(920px,100%); }
  .demo-settings-header { gap:12px; margin-bottom:24px; font-size:12px; }
  .demo-settings-header button { min-height:44px; padding-inline:15px; font-size:11px; }
  .demo-settings-modal,.demo-character-modal { padding:33px 36px 36px; border-radius:24px; }
  .demo-settings-kicker { font-size:11px; }
  .demo-settings-modal h4,.demo-character-modal h4 { margin:15px 0 27px; font-size:42px; }
  .demo-settings-profile { gap:18px; padding-bottom:23px; }
  .demo-settings-profile > i { width:63px; height:63px; flex-basis:63px; font-size:23px; }
  .demo-settings-profile strong { font-size:21px; }
  .demo-settings-profile span,.demo-settings-row span { font-size:14px; }
  .demo-settings-balance { margin:24px 0; padding:21px; border-radius:18px; }
  .demo-settings-balance header strong { font-size:18px; }
  .demo-settings-balance header button,.demo-settings-row button { min-height:44px; padding-inline:15px; font-size:12px; }
  .demo-settings-balance > div { margin-top:18px; }
  .demo-settings-balance > div > span { gap:6px; font-size:14px; }
  .demo-settings-balance b { font-size:30px; }
  .demo-settings-row { gap:21px; padding-top:20px; }
  .demo-settings-row strong { font-size:17px; }
  .demo-character-modal { width:min(760px,100%); }
  .demo-character-modal > p { margin:-10px 0 26px; font-size:15px; }
  .demo-character-options { gap:12px; }
  .demo-character-options button { grid-template-columns:36px minmax(0,1fr); gap:17px; min-height:93px; padding:17px 18px; border-radius:15px; }
  .demo-character-options button > i { width:33px; height:33px; font-size:14px; }
  .demo-character-options strong { font-size:20px; }
  .demo-character-options em { font-size:14px; }
  .demo-real-dialogs,.demo-real-analysis,.demo-real-accent { min-height:728px; }
  .demo-live-chat-header { min-height:92px; padding:17px 27px; }
  .demo-live-chat-header > div > strong { font-size:18px; }.demo-live-chat-header > div > small { font-size:11px; }
  .demo-live-chat-header nav { gap:9px; }.demo-live-chat-header nav > span { min-height:41px; padding-inline:14px; font-size:10px; }
  .demo-live-chat-body { gap:33px; padding:36px 41px 27px; }
  .demo-live-user-message { padding:21px 24px; border-radius:22px 22px 6px 22px; }
  .demo-live-user-message > small,.demo-live-assistant-message small { margin-bottom:11px; font-size:10px; }
  .demo-live-user-message p,.demo-live-assistant-message p { font-size:15px; }
  .demo-live-assistant-message { grid-template-columns:41px minmax(0,1fr); gap:18px; }.demo-live-assistant-message .mini-mark { width:39px; height:39px; font-size:23px; }
  .demo-live-assistant-message h4 { margin-bottom:14px; font-size:21px; }.demo-live-assistant-message ul { gap:8px; margin-top:17px; }.demo-live-assistant-message li { padding:9px 14px 9px 30px; font-size:12px; }
  .demo-live-composer { min-height:80px; grid-template-columns:42px 42px minmax(0,1fr) auto 53px; gap:6px; margin:0 27px 24px; padding:8px 9px; border-radius:20px; }
  .demo-live-composer > span { width:39px; height:39px; border-radius:12px; font-size:12px; }.demo-live-composer > p { font-size:14px; }.demo-live-composer > small { font-size:10px; }.demo-live-composer > b { width:50px; height:50px; border-radius:14px; font-size:21px; }
  .demo-live-file { gap:14px; margin-bottom:15px; padding:14px 15px; }.demo-live-file > i { width:41px; height:41px; font-size:18px; }.demo-live-file strong { font-size:14px; }.demo-live-file small { font-size:11px; }
  .demo-live-analysis-table { gap:11px; margin:17px 0 15px; }.demo-live-analysis-table span { gap:8px; padding:14px 15px; }.demo-live-analysis-table b { font-size:12px; }.demo-live-analysis-table em { font-size:14px; }.demo-live-assistant-message button { min-height:44px; padding-inline:15px; font-size:11px; }
  .demo-real-lab { min-height:728px; }
  .demo-live-lab-hero { min-height:178px; grid-template-columns:57px minmax(0,1fr) auto; gap:27px; padding:22px 36px 18px; }.demo-live-lab-hero > button { width:42px; height:42px; font-size:15px; }
  .demo-live-lab-hero > div > span { font-size:9px; }.demo-live-lab-hero .visual-lab-wordmark-art { width:370px; height:118px; }.demo-live-lab-hero .motion-lab-wordmark { font-size:96px; }.demo-live-lab-hero > div > small { max-width:470px; font-size:13px; }.demo-live-lab-hero > i { padding:11px 14px; font-size:9px; }
  .demo-live-lab-proof { gap:18px; min-height:49px; padding-inline:93px; font-size:10px; }
  .demo-live-lab-operation { gap:10px; padding:15px 27px 0; }.demo-live-lab-operation > small { font-size:9px; }.demo-live-lab-operation > div { gap:5px; padding:5px; font-size:10px; }.demo-live-lab-operation span,.demo-live-lab-operation b { min-height:39px; }
  .demo-live-lab-workspace { grid-template-columns:minmax(0,1.45fr) minmax(390px,.72fr); gap:20px; padding:20px 27px 27px; }.demo-live-builder-panel { gap:14px 15px; padding:24px; }.demo-live-builder-panel > header span { font-size:10px; }.demo-live-builder-panel h4 { font-size:19px; }.demo-live-builder-panel > header small { font-size:10px; }.demo-live-builder-panel label > span { font-size:10px; }.demo-live-builder-panel label > strong { min-height:51px; padding:11px 14px; font-size:12px; }.demo-live-builder-panel label.is-primary > strong { min-height:63px; font-size:14px; }
  .demo-live-motion-options { gap:11px; }.demo-live-motion-options small { font-size:9px; }.demo-live-motion-options b { min-height:44px; padding-inline:12px; font-size:10px; }
  .demo-live-preview > header { min-height:54px; padding-inline:17px; font-size:9px; }.demo-live-preview img,.demo-live-preview video { min-height:310px; }.demo-live-preview figcaption { right:11px; bottom:11px; left:11px; padding:9px 11px; font-size:9px; }.demo-live-shadow { gap:6px; padding:14px 17px 15px; }.demo-live-shadow > span { font-size:9px; }.demo-live-shadow strong { font-size:12px; }.demo-live-shadow small { font-size:9px; }
  .demo-live-accent-modal { width:min(645px,calc(100% - 63px)); padding:36px; border-radius:24px; }.demo-live-accent-modal > button { top:20px; right:20px; width:42px; height:42px; font-size:21px; }.demo-live-accent-modal > span { font-size:11px; }.demo-live-accent-modal h4 { margin:18px 0 11px; font-size:44px; }.demo-live-accent-modal p { font-size:15px; }.demo-live-accent-modal > small { margin-top:21px; font-size:12px; }.demo-live-accent-swatches { gap:14px; margin-top:30px; }
  .demo-side { gap:27px; padding-top:36px; }
  .demo-side .preview-logo { width:38px; height:38px; margin-bottom:17px; }
  .demo-side > i { width:30px; height:5px; }
  .demo-chat { padding:41px 47px 114px; }
  .demo-mode { min-height:38px; margin-bottom:44px; }
  .demo-mode > span { min-height:36px; padding-inline:14px; font-size:11px; }
  .demo-mode > small { font-size:12px; }
  .demo-user-card { padding:21px 24px; border-radius:21px 21px 6px 21px; }
  .demo-user-card small,.demo-answer-card small { margin-bottom:11px; font-size:11px; }
  .demo-user-card p,.demo-answer-card p { font-size:18px; }
  .demo-answer-card { grid-template-columns:38px minmax(0,1fr); gap:20px; margin-top:41px; }
  .demo-answer-card .mini-mark { width:36px; height:36px; }
  .demo-answer-card strong { margin-bottom:12px; font-size:21px; }
  .demo-result { gap:9px; margin-top:20px; }
  .demo-result > span { padding:11px 14px 11px 36px; font-size:14px; }
  .demo-composer { right:36px; bottom:30px; left:36px; min-height:65px; padding:0 11px 0 23px; border-radius:18px; font-size:14px; }
  .demo-composer b { width:45px; height:45px; border-radius:12px; }
  .demo-caption { grid-template-columns:minmax(330px,.72fr) minmax(0,1fr); gap:54px; padding:36px 42px 42px; }
  .demo-caption h3 { margin-top:14px; font-size:32px; }
  .demo-caption > p { font-size:17px; }
  .compact-capabilities { padding-top:150px; }
  .compact-capabilities .capabilities-grid article { min-height:285px; }
  .news-showcase { padding-top:150px; }
  .news-grid { gap:24px; }
  .news-card { min-height:495px; padding:38px; }
  .news-card-important { min-height:750px; padding:48px; }
  .news-meta,.news-priority { font-size:12px; }
  .news-priority { margin-top:93px; padding:11px 14px; }
  .news-index { margin-top:65px; font-size:72px; }
  .news-card h3 { margin:27px 0 21px; font-size:35px; }
  .news-card-important h3 { max-width:840px; margin-top:36px; font-size:64px; }
  .news-card p { font-size:17px; }
  .news-tags { gap:9px; margin-top:30px; }
  .news-tags span { padding:9px 12px; font-size:12px; }
  .news-card button { padding-top:17px; font-size:15px; }
}

@media (prefers-reduced-motion:reduce) {
  #landing-smoke-canvas { transition:none; }
  .demo-player-label i,.demo-progress span.is-running,.demo-user-card,.demo-answer-card,.demo-screen.is-changing .demo-flash { animation:none; }
}