/*
 * ShamVerse UI repair layer — 2026-08-16
 * Loaded after the legacy workspace stylesheet so public, auth, and shared
 * responsive foundations remain isolated from module-specific CSS.
 */

:root {
  --sv2-ink: #f8f7f2;
  --sv2-muted: #a8aca8;
  --sv2-night: #070908;
  --sv2-night-2: #0d100f;
  --sv2-lime: #d7ff5f;
  --sv2-blue: #94b8ff;
  --sv2-line: rgba(255, 255, 255, 0.14);
  --sv2-serif: "Iowan Old Style", "Palatino Linotype", Baskerville, Georgia, serif;
  --sv2-sans: Inter, "SF Pro Text", "Segoe UI", Arial, sans-serif;
}

/* Remote Access v4 — outbound encrypted control plane */
.remote-access-v4 {
  --text-color: var(--text);
  --muted-color: var(--muted);
  --surface-color: var(--surface);
  --border-color: var(--line);
  --page-bg: var(--bg);
  --remote-line: color-mix(in srgb, var(--line) 76%, transparent);
  --remote-soft: color-mix(in srgb, var(--surface) 92%, var(--text));
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 28px clamp(18px, 3vw, 38px) 56px;
  color: var(--text-color, #151515);
}

.remote-v4-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid var(--remote-line);
  border-radius: 28px;
  background:
    radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--text-color, #111) 8%, transparent), transparent 38%),
    var(--surface-color, #fff);
  box-shadow: 0 24px 70px color-mix(in srgb, #000 8%, transparent);
}

.remote-v4-hero > div:first-child { max-width: 760px; }
.remote-v4-hero h2 { margin: 10px 0 12px; max-width: 710px; font-size: clamp(2rem, 4.1vw, 3.7rem); line-height: .98; letter-spacing: -.055em; }
.remote-v4-hero p { max-width: 720px; margin: 0; color: var(--muted-color, #666); font-size: 1.02rem; line-height: 1.65; }
.remote-v4-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; min-width: max-content; }
.remote-v4-trust { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.remote-v4-trust span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid var(--remote-line); border-radius: 999px; background: var(--remote-soft); color: var(--muted-color, #555); font-size: .77rem; font-weight: 650; }
.remote-v4-trust svg, .remote-v4-actions svg { width: 15px; height: 15px; }

.remote-v4-status {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.remote-v4-status article { display: flex; align-items: center; gap: 12px; min-height: 94px; padding: 16px; border: 1px solid var(--remote-line); border-radius: 18px; background: var(--surface-color, #fff); }
.remote-v4-status article > span:not(.remote-v4-status-dot) { display: grid; place-items: center; width: 35px; height: 35px; flex: 0 0 35px; border-radius: 11px; background: var(--remote-soft); }
.remote-v4-status svg { width: 17px; height: 17px; }
.remote-v4-status div { display: grid; min-width: 0; gap: 1px; }
.remote-v4-status small, .remote-v4-status em { overflow: hidden; color: var(--muted-color, #777); font-size: .69rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.remote-v4-status strong { font-size: .96rem; letter-spacing: -.015em; }
.remote-v4-status-dot { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: #9b9b9b; box-shadow: 0 0 0 5px color-mix(in srgb, #999 12%, transparent); }
.remote-v4-status-dot.online { background: #29a568; box-shadow: 0 0 0 5px color-mix(in srgb, #29a568 15%, transparent); }

.remote-v4-pairing {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) minmax(220px, .75fr);
  gap: clamp(20px, 3vw, 34px);
  align-items: center;
  padding: clamp(22px, 3vw, 32px);
  margin: 14px 0;
  border: 1px solid var(--remote-line);
  border-radius: 24px;
  background: var(--surface-color);
  color: var(--text-color);
  box-shadow: 0 18px 54px color-mix(in srgb, #000 10%, transparent);
}
.remote-v4-qr { display: grid; gap: 8px; justify-items: center; }
.remote-v4-qr img { display: block; width: 174px; height: 174px; padding: 9px; border-radius: 16px; background: #fff; }
.remote-v4-qr span { color: var(--muted-color); font-size: .7rem; }
.remote-v4-qr .remote-v4-qr-blocked { width: 174px; min-height: 174px; padding: 18px; border: 1px dashed var(--remote-line); border-radius: 16px; display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--muted-color); text-align: center; font-size: .78rem; }
.remote-v4-qr .remote-v4-qr-blocked svg { width: 28px; height: 28px; }
.remote-v4-pairing .surface-kicker, .remote-v4-pairing p, .remote-v4-pairing small { color: var(--muted-color); }
.remote-v4-pair-copy h3 { margin: 7px 0 8px; font-size: 1.55rem; letter-spacing: -.035em; }
.remote-v4-pair-copy p { margin: 0 0 14px; line-height: 1.55; }
.remote-v4-pair-copy small { display: flex; align-items: center; gap: 7px; margin-top: 14px; line-height: 1.4; }
.remote-v4-pair-copy small svg { width: 14px; height: 14px; }
.remote-v4-code { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: min(100%, 360px); padding: 12px 12px 12px 17px; border: 1px solid var(--remote-line); border-radius: 13px; background: var(--remote-soft); }
.remote-v4-code strong { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 1.18rem; letter-spacing: .14em; }
.remote-v4-code .icon-button { color: inherit; }
.remote-v4-pair-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.remote-v4-pair-actions .mini-button { border-color: var(--remote-line); color: inherit; background: var(--remote-soft); }
.remote-v4-pair-steps { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }
.remote-v4-pair-steps li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; color: var(--muted-color); font-size: .78rem; line-height: 1.45; }
.remote-v4-pair-steps b { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid var(--remote-line); border-radius: 50%; color: var(--text-color); font-size: .7rem; }

.remote-v4-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 14px; margin-top: 14px; }
.remote-v4-grid.lower { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.remote-v4-panel { min-width: 0; padding: 20px; border: 1px solid var(--remote-line); border-radius: 22px; background: var(--surface-color, #fff); }
.remote-v4-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-bottom: 17px; border-bottom: 1px solid var(--remote-line); }
.remote-v4-panel > header > div { display: flex; align-items: center; gap: 11px; min-width: 0; }
.remote-v4-panel header h3 { margin: 0; font-size: 1rem; letter-spacing: -.02em; }
.remote-v4-panel header p { margin: 3px 0 0; color: var(--muted-color, #777); font-size: .73rem; }
.remote-v4-panel header > span { color: var(--muted-color, #777); font-size: .7rem; white-space: nowrap; }
.remote-v4-panel .panel-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 11px; background: var(--remote-soft); }
.remote-v4-panel .panel-icon svg { width: 16px; height: 16px; }
.remote-v4-host, .remote-v4-controller { display: flex; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--remote-line); }
.remote-v4-host > div:nth-child(2), .remote-v4-controller > div { display: grid; min-width: 0; gap: 3px; margin-right: auto; }
.remote-v4-host small, .remote-v4-controller small { color: var(--muted-color, #777); font-size: .71rem; }
.remote-v4-device-icon, .remote-v4-controller-mark { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 13px; background: var(--remote-soft); }
.remote-v4-device-icon svg, .remote-v4-controller-mark svg { width: 18px; height: 18px; }
.remote-v4-toggle { display: grid; grid-template-columns: auto 36px 1fr; gap: 10px; align-items: center; margin-top: 15px; cursor: pointer; }
.remote-v4-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.remote-v4-toggle > span { position: relative; width: 36px; height: 21px; border-radius: 999px; background: color-mix(in srgb, var(--text-color, #111) 18%, transparent); transition: background .2s ease; }
.remote-v4-toggle > span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: var(--surface-color, #fff); box-shadow: 0 1px 5px #0003; transition: transform .2s ease; }
.remote-v4-toggle input:checked + span { background: var(--text-color, #111); }
.remote-v4-toggle input:checked + span::after { transform: translateX(15px); }
.remote-v4-toggle div { display: grid; gap: 2px; }
.remote-v4-toggle small { color: var(--muted-color, #777); font-size: .7rem; }
.remote-v4-policy { display: flex; gap: 11px; margin-top: 16px; padding: 14px; border-radius: 15px; background: var(--remote-soft); }
.remote-v4-policy > span { flex: 0 0 auto; }
.remote-v4-policy svg { width: 17px; height: 17px; }
.remote-v4-policy strong { font-size: .8rem; }
.remote-v4-policy p { margin: 4px 0 0; color: var(--muted-color, #777); font-size: .7rem; line-height: 1.55; }
.remote-v4-device-list { display: grid; }
.remote-v4-controller:last-child { border-bottom: 0; padding-bottom: 0; }
.remote-v4-session-list, .remote-v4-event-list { display: grid; }
.remote-v4-session-list article, .remote-v4-event-list article { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 11px 2px; border-bottom: 1px solid var(--remote-line); }
.remote-v4-session-list article:last-child, .remote-v4-event-list article:last-child { border-bottom: 0; }
.remote-v4-session-list article div, .remote-v4-event-list article div { display: grid; min-width: 0; gap: 2px; margin-right: auto; }
.remote-v4-session-list small, .remote-v4-event-list small, .remote-v4-session-list em, .remote-v4-event-list em { color: var(--muted-color, #777); font-size: .69rem; font-style: normal; }
.remote-v4-event-list article > span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 9px; background: var(--remote-soft); }
.remote-v4-event-list svg { width: 13px; height: 13px; }
.remote-v4-danger { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 14px; padding: 18px 20px; border: 1px solid color-mix(in srgb, #c84343 28%, var(--remote-line)); border-radius: 20px; background: color-mix(in srgb, #c84343 4%, var(--surface-color, #fff)); }
.remote-v4-danger > div { display: flex; align-items: center; gap: 12px; }
.remote-v4-danger > div > span { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 12px; background: color-mix(in srgb, #c84343 10%, transparent); color: #c84343; }
.remote-v4-danger svg { width: 17px; height: 17px; }
.remote-v4-danger p { margin: 3px 0 0; color: var(--muted-color, #777); font-size: .73rem; }

@media (max-width: 960px) {
  .remote-v4-hero { align-items: flex-start; flex-direction: column; }
  .remote-v4-actions { justify-content: flex-start; }
  .remote-v4-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .remote-v4-pairing { grid-template-columns: 170px 1fr; }
  .remote-v4-pair-steps { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .remote-v4-grid, .remote-v4-grid.lower { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .remote-access-v4 { padding-inline: 12px; }
  .remote-v4-hero { padding: 24px 20px; border-radius: 22px; }
  .remote-v4-hero h2 { font-size: 2.25rem; }
  .remote-v4-actions, .remote-v4-actions .button { width: 100%; }
  .remote-v4-status { grid-template-columns: 1fr 1fr; }
  .remote-v4-status article { min-height: 82px; padding: 12px; }
  .remote-v4-pairing { grid-template-columns: 1fr; text-align: left; }
  .remote-v4-pair-steps { grid-column: auto; grid-template-columns: 1fr; }
  .remote-v4-danger { align-items: flex-start; flex-direction: column; }
  .remote-v4-danger .button { width: 100%; }
}

body.landing-active,
body.auth-active {
  overflow-x: hidden;
}

:is(.sham-cinema, .auth-v3) :focus-visible {
  outline: 3px solid rgba(215, 255, 95, 0.9);
  outline-offset: 3px;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* --------------------------------------------------------------------------
   Public website: restore the missing MotionSites composition
   -------------------------------------------------------------------------- */

.sham-cinema .liquid-glass {
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.045));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 24px 72px rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
}

.sham-cinema .liquid-glass::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--landing-pointer-x, 68%) var(--landing-pointer-y, 15%), rgba(255, 255, 255, 0.18), transparent 36%);
  content: "";
  pointer-events: none;
}

.motion-hero {
  position: relative;
  height: max(760px, 100svh);
  min-height: 100svh;
  overflow: hidden;
  color: #fff;
  background: #050706;
}

.motion-video-stack,
.motion-hero-image,
.motion-bg-video,
.motion-train-overlay,
.motion-hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.motion-video-stack {
  z-index: 0;
  overflow: hidden;
}

.motion-hero-image {
  object-fit: cover;
  object-position: center;
  filter: saturate(0.82) contrast(1.08) brightness(0.72);
  transform: scale(1.015);
}

.motion-bg-video {
  object-fit: cover;
  opacity: 0;
  transform: scale(1.035);
  transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1), transform 6s ease;
}

.motion-bg-video.is-active {
  opacity: 1;
  transform: scale(1);
}

.motion-train-overlay {
  z-index: 2;
  object-fit: cover;
  object-position: center bottom;
  opacity: 0.46;
  mix-blend-mode: screen;
  filter: contrast(1.08) saturate(0.8);
  pointer-events: none;
}

.motion-hero-shade {
  z-index: 3;
  background:
    linear-gradient(180deg, rgba(1, 3, 2, 0.58), rgba(1, 3, 2, 0.08) 28%, rgba(1, 3, 2, 0.2) 63%, rgba(1, 3, 2, 0.9)),
    radial-gradient(circle at 50% 42%, transparent 0 25%, rgba(1, 3, 2, 0.43) 88%);
}

.motion-header {
  position: absolute;
  z-index: 12;
  top: 22px;
  right: 0;
  left: 0;
  padding-inline: 22px;
}

.motion-nav {
  width: min(1180px, 100%);
  min-height: 64px;
  margin-inline: auto;
  padding: 8px 9px 8px 18px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  border-radius: 22px;
}

.motion-brand,
.motion-brand:visited {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
}

.motion-brand > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: #08100d;
  border-radius: 50%;
  background: var(--sv2-lime);
  box-shadow: 0 0 30px rgba(215, 255, 95, 0.23);
}

.motion-brand span svg { width: 18px; }
.motion-brand strong { font-size: 0.96rem; letter-spacing: -0.03em; }

.motion-nav nav {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.5vw, 36px);
}

.motion-nav nav a,
.motion-login {
  padding: 8px 0;
  color: rgba(255, 255, 255, 0.76);
  border: 0;
  background: transparent;
  font: 670 0.76rem var(--sv2-sans);
  text-decoration: none;
  cursor: pointer;
  transition: color 180ms ease;
}

.motion-nav nav a:hover,
.motion-login:hover { color: #fff; }

.motion-nav-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 17px;
}

.motion-header .motion-login {
  min-height: 46px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 15px;
  background: #050505;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.34);
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.motion-header .motion-login:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
  background: #151515;
  transform: translateY(-1px);
}

.motion-get-started {
  min-height: 46px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #07100e;
  border: 0;
  border-radius: 15px;
  background: var(--sv2-lime);
  box-shadow: 0 10px 32px rgba(215, 255, 95, 0.2);
  font: 800 0.76rem var(--sv2-sans);
  cursor: pointer;
}

.motion-header .motion-get-started {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: #050505;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.34);
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.motion-header .motion-get-started:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
  background: #151515;
  transform: translateY(-1px);
}

.motion-menu-toggle {
  width: 46px;
  height: 46px;
  padding: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  color: #fff;
  border-radius: 14px;
  cursor: pointer;
}

.motion-menu-toggle span { width: 17px; height: 1px; background: currentColor; }

.motion-mobile-menu {
  position: fixed;
  z-index: 50;
  inset: 0;
  padding: 28px;
  display: grid;
  align-content: center;
  gap: 34px;
  color: #fff;
  background: rgba(4, 6, 5, 0.97);
  -webkit-backdrop-filter: blur(28px);
  backdrop-filter: blur(28px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-18px);
  transition: opacity 240ms ease, transform 240ms ease, visibility 240ms;
}

.sham-cinema.menu-open .motion-mobile-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.motion-mobile-menu > button:first-child {
  position: absolute;
  top: 24px;
  right: 26px;
  width: 48px;
  height: 48px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: transparent;
  font-size: 1.8rem;
}

.motion-mobile-menu nav { display: grid; gap: 16px; }
.motion-mobile-menu nav a { color: #fff; font: 500 clamp(2.4rem, 9vw, 4.4rem)/1 var(--sv2-serif); text-decoration: none; }
.motion-mobile-menu .motion-get-started {
  width: 100%;
  min-height: 56px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: #050505;
}

.motion-hero-content {
  position: relative;
  z-index: 6;
  width: min(1180px, calc(100% - 44px));
  height: 100%;
  min-height: inherit;
  margin-inline: auto;
  padding: clamp(150px, 19vh, 215px) 0 118px;
  display: grid;
  place-items: center;
}

.motion-hero-copy {
  width: min(880px, 100%);
  text-align: center;
  text-wrap: balance;
}

.motion-badge {
  width: max-content;
  max-width: 100%;
  margin: 0 auto 24px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, 0.88);
  border-radius: 999px;
  font: 760 0.67rem var(--sv2-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.motion-badge i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--sv2-lime);
  box-shadow: 0 0 16px var(--sv2-lime);
}

.motion-hero-copy h1 {
  margin: 0;
  color: #fff;
  font: 500 clamp(4.7rem, 8vw, 8.5rem)/0.84 var(--sv2-serif);
  letter-spacing: -0.07em;
  text-shadow: 0 5px 42px rgba(0, 0, 0, 0.32);
}

.motion-hero-copy h1 em { color: var(--sv2-lime); font-weight: 400; }

.motion-hero-copy > p:not(.motion-badge) {
  width: min(690px, 100%);
  margin: 28px auto 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  line-height: 1.65;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.72);
}

.motion-email-pill {
  width: min(500px, 100%);
  min-height: 60px;
  margin: 28px auto 0;
  padding: 7px 7px 7px 19px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border-radius: 19px;
  text-align: left;
}

.motion-email-pill input,
.motion-waitlist-form input {
  width: 100%;
  min-width: 0;
  color: #fff;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
}

.motion-email-pill input::placeholder,
.motion-waitlist-form input::placeholder { color: rgba(255, 255, 255, 0.55); }

.motion-email-pill button,
.motion-waitlist-form button {
  min-height: 46px;
  padding-inline: 18px;
  color: #07100e;
  border: 0;
  border-radius: 13px;
  background: var(--sv2-lime);
  font: 800 0.76rem var(--sv2-sans);
}

.motion-email-pill small,
.motion-waitlist-form small { grid-column: 1 / -1; color: #ecffac; font-size: 0.73rem; }
.motion-email-pill small:empty,
.motion-waitlist-form small:empty { display: none; }

.motion-hero-links {
  margin-top: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
}

.motion-hero-links button,
.motion-hero-links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 0;
  color: rgba(255, 255, 255, 0.78);
  border: 0;
  background: transparent;
  font: 660 0.76rem var(--sv2-sans);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.motion-hero-links svg { width: 13px; }

.motion-scene-switcher {
  position: absolute;
  left: 0;
  bottom: 31px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.motion-scene-switcher button {
  min-height: 36px;
  padding: 0 13px;
  color: rgba(255, 255, 255, 0.52);
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  font: 730 0.68rem var(--sv2-sans);
}

.motion-scene-switcher button.is-active {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.11);
}

.motion-hero-facts {
  position: absolute;
  z-index: 7;
  right: max(22px, calc((100vw - 1180px) / 2));
  bottom: 42px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.61);
  font: 720 0.61rem var(--sv2-sans);
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.motion-hero-facts i { color: rgba(255, 255, 255, 0.22); font-style: normal; }

/* Public positioning: the AI production operating system story. */
.production-thesis,
.team-audience {
  padding-block: clamp(118px, 14vw, 210px);
}

.production-thesis {
  position: relative;
  isolation: isolate;
}

.production-thesis::before {
  position: absolute;
  z-index: -1;
  top: 4%;
  right: -18vw;
  width: min(68vw, 920px);
  aspect-ratio: 1;
  border: 1px solid rgba(148, 184, 255, 0.08);
  border-radius: 50%;
  box-shadow: 0 0 0 84px rgba(148, 184, 255, 0.018), 0 0 0 168px rgba(215, 255, 95, 0.012);
  content: "";
  pointer-events: none;
}

.production-thesis-lead {
  max-width: 1040px;
}

.production-thesis-lead h2,
.production-mission h2,
.team-audience .cine-section-heading h2 {
  margin: 22px 0 0;
  color: #fff;
  font: 500 clamp(3.6rem, 6.4vw, 7rem)/0.9 var(--sv2-serif);
  letter-spacing: -0.065em;
  text-wrap: balance;
}

.production-thesis-lead > p:last-child {
  max-width: 760px;
  margin: 30px 0 0;
  color: #b1b7b3;
  font-size: 1.03rem;
  line-height: 1.74;
}

.production-pain-grid {
  margin-top: 74px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.production-pain-grid article {
  min-height: 300px;
  padding: 30px clamp(24px, 3vw, 42px) 38px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 34px;
  transition: background 260ms ease, transform 260ms ease;
}

.production-pain-grid article + article { border-left: 1px solid rgba(255, 255, 255, 0.14); }
.production-pain-grid article:hover { background: rgba(255, 255, 255, 0.035); transform: translateY(-5px); }
.production-pain-grid span { color: rgba(255, 255, 255, 0.34); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; }
.production-pain-grid h3 { margin: auto 0 0; color: #fff; font-size: clamp(1.55rem, 2.2vw, 2.25rem); letter-spacing: -0.045em; }
.production-pain-grid p { max-width: 360px; margin: 0; color: #9da49f; font-size: 0.88rem; line-height: 1.67; }

.production-mission {
  position: relative;
  min-height: 510px;
  margin-top: clamp(74px, 10vw, 140px);
  padding: clamp(34px, 6vw, 76px);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.65fr);
  align-items: end;
  gap: clamp(44px, 8vw, 120px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 40px;
  background:
    radial-gradient(circle at 82% 8%, rgba(148, 184, 255, 0.24), transparent 27rem),
    radial-gradient(circle at 8% 100%, rgba(215, 255, 95, 0.09), transparent 26rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018));
  box-shadow: 0 42px 120px rgba(0, 0, 0, 0.28);
}

.production-mission::after {
  position: absolute;
  top: -160px;
  right: -110px;
  width: 440px;
  height: 440px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  box-shadow: 0 0 0 58px rgba(255, 255, 255, 0.025), 0 0 0 116px rgba(255, 255, 255, 0.015);
  content: "";
  pointer-events: none;
}

.production-mission > * { position: relative; z-index: 1; }
.production-mission h2 em { color: var(--sv2-lime); font-weight: 400; }
.production-mission > p { margin: 0 0 7px; color: rgba(255, 255, 255, 0.7); font-size: 1rem; line-height: 1.75; }

.model-research-note {
  margin-top: 18px;
  padding: 22px 25px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 20px;
  background: linear-gradient(90deg, rgba(215, 255, 95, 0.055), rgba(148, 184, 255, 0.04));
}

.model-research-note > svg {
  width: 48px;
  height: 48px;
  padding: 13px;
  color: #07100e;
  border-radius: 15px;
  background: var(--sv2-lime);
}

.model-research-note div { display: grid; gap: 5px; }
.model-research-note small { color: rgba(255, 255, 255, 0.48); font-size: 0.61rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.model-research-note strong { color: #fff; font-size: clamp(1rem, 1.7vw, 1.35rem); letter-spacing: -0.025em; }
.model-research-note strong span { color: rgba(255, 255, 255, 0.43); font-size: 0.62em; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; }
.model-research-note p { margin: 0; color: rgba(255, 255, 255, 0.52); font-size: 0.74rem; line-height: 1.55; }

.team-audience {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.team-audience-grid {
  margin-top: 76px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.team-audience-grid article {
  min-height: 255px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(148, 184, 255, 0.09), transparent 17rem),
    rgba(255, 255, 255, 0.028);
  transition: border-color 220ms ease, transform 220ms ease, background 220ms ease;
}

.team-audience-grid article:hover {
  border-color: rgba(215, 255, 95, 0.28);
  background: radial-gradient(circle at 100% 0%, rgba(215, 255, 95, 0.12), transparent 17rem), rgba(255, 255, 255, 0.04);
  transform: translateY(-5px);
}

.team-audience-grid span { color: rgba(255, 255, 255, 0.34); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em; }
.team-audience-grid h3 { margin: auto 0 0; color: #fff; font-size: clamp(1.35rem, 2vw, 1.85rem); letter-spacing: -0.04em; }
.team-audience-grid p { margin: 15px 0 0; color: #9ca39f; font-size: 0.84rem; line-height: 1.65; }

.research-spotlight,
.media-generation-story {
  padding-block: clamp(118px, 14vw, 210px);
}

.research-spotlight {
  border-block: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at 12% 18%, rgba(215, 255, 95, 0.08), transparent 28rem),
    radial-gradient(circle at 88% 72%, rgba(148, 184, 255, 0.11), transparent 31rem),
    rgba(255, 255, 255, 0.018);
}

.research-model-grid {
  margin-top: 74px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.research-model-grid article {
  position: relative;
  min-height: 530px;
  padding: clamp(28px, 4vw, 46px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.035);
}

.research-model-grid article::after {
  position: absolute;
  top: -110px;
  right: -120px;
  width: 330px;
  height: 330px;
  border: 1px solid rgba(215, 255, 95, 0.11);
  border-radius: 50%;
  box-shadow: 0 0 0 52px rgba(215, 255, 95, 0.016), 0 0 0 104px rgba(148, 184, 255, 0.012);
  content: "";
  pointer-events: none;
}

.research-model-mark {
  width: 92px;
  height: 92px;
  margin-bottom: auto;
  display: grid;
  place-items: center;
  color: #07100e;
  border-radius: 27px;
  background: var(--sv2-lime);
  box-shadow: 0 20px 55px rgba(215, 255, 95, 0.12);
  font: 800 1rem var(--sv2-sans);
}

.research-model-mark.image { color: #08111a; background: #9dc1ff; box-shadow: 0 20px 55px rgba(148, 184, 255, 0.14); }
.research-model-grid .cine-kicker { margin-top: 62px; }
.research-model-grid h3 { margin: 16px 0 0; color: #fff; font: 500 clamp(2.8rem, 4.7vw, 5.1rem)/0.9 var(--sv2-serif); letter-spacing: -0.06em; }
.research-model-grid article > p:not(.cine-kicker) { max-width: 580px; margin: 24px 0 0; color: #adb4af; line-height: 1.72; }
.research-model-grid ul { margin: 34px 0 0; padding: 0; display: grid; list-style: none; }
.research-model-grid li { padding: 13px 0; color: #e5e7e5; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.78rem; }

.research-direction {
  margin-top: 16px;
  padding: 24px 26px;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  background: rgba(7, 9, 8, 0.55);
}

.research-direction > span { width: 50px; height: 50px; display: grid; place-items: center; color: #07100e; border-radius: 16px; background: #f1f2ed; }
.research-direction svg { width: 21px; }
.research-direction div { display: grid; gap: 4px; }
.research-direction small { color: #8f9792; font-size: 0.61rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.research-direction strong { color: #fff; font-size: 0.96rem; }
.research-direction p { margin: 0; color: #929a95; font-size: 0.75rem; line-height: 1.55; }

.pipeline-audience-grid {
  margin-top: 76px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.pipeline-audience-card {
  position: relative;
  min-height: 620px;
  padding: clamp(30px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 34px;
  background: radial-gradient(circle at 100% 0%, rgba(215, 255, 95, 0.1), transparent 23rem), rgba(255, 255, 255, 0.03);
}

.pipeline-audience-card.business { background: radial-gradient(circle at 100% 0%, rgba(148, 184, 255, 0.14), transparent 23rem), rgba(255, 255, 255, 0.03); }
.pipeline-audience-index { position: absolute; top: 26px; right: 30px; color: rgba(255, 255, 255, 0.16); font: 500 clamp(3.5rem, 6vw, 6.5rem)/1 var(--sv2-serif); }
.pipeline-audience-card > .cine-kicker { margin-top: auto; }
.pipeline-audience-card h3 { max-width: 590px; margin: 18px 0 0; color: #fff; font: 500 clamp(2.6rem, 4.3vw, 4.5rem)/0.92 var(--sv2-serif); letter-spacing: -0.06em; }
.pipeline-audience-card > p:not(.cine-kicker) { max-width: 560px; margin: 25px 0 0; color: #aeb5b0; line-height: 1.7; }
.pipeline-audience-card ul { margin: 35px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; list-style: none; }
.pipeline-audience-card li { display: flex; align-items: center; gap: 8px; color: #e4e6e4; font-size: 0.76rem; }
.pipeline-audience-card li svg { width: 13px; color: var(--sv2-lime); }
.pipeline-audience-card.business li svg { color: #a9c7ff; }

.media-generation-story {
  border-block: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at 75% 5%, rgba(160, 112, 255, 0.13), transparent 28rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent);
}

.product-screenshot-frame {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 28px;
  background: #111312;
  box-shadow: 0 38px 110px rgba(0, 0, 0, 0.38);
}

.product-screenshot-frame img { width: 100%; height: auto; display: block; }
.product-screenshot-frame figcaption { padding: 17px 20px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid rgba(255, 255, 255, 0.09); }
.product-screenshot-frame figcaption span { color: var(--sv2-lime); font-size: 0.59rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.product-screenshot-frame figcaption strong { color: #d5dad7; font-size: 0.72rem; font-weight: 620; }
.media-agent-shot { margin-top: 72px; }

.generation-lane-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.generation-lane {
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.03);
}

.generation-lane.image-lane { background: radial-gradient(circle at 100% 0%, rgba(215, 255, 95, 0.09), transparent 19rem), rgba(255, 255, 255, 0.03); }
.generation-lane.video-lane { background: radial-gradient(circle at 100% 0%, rgba(148, 184, 255, 0.12), transparent 19rem), rgba(255, 255, 255, 0.03); }
.generation-lane header { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 18px; }
.generation-lane header > span { width: 58px; height: 58px; display: grid; place-items: center; color: #07100e; border-radius: 18px; background: var(--sv2-lime); }
.generation-lane.video-lane header > span { background: #a9c7ff; }
.generation-lane header svg { width: 25px; }
.generation-lane header small { color: #8f9792; font-size: 0.61rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.generation-lane h3 { margin: 6px 0 0; color: #fff; font-size: clamp(1.55rem, 2.5vw, 2.2rem); letter-spacing: -0.045em; }
.generation-lane ol { margin: 38px 0 0; padding: 0; display: grid; list-style: none; }
.generation-lane li { padding: 20px 0; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.generation-lane li > span { color: rgba(255, 255, 255, 0.38); font-size: 0.64rem; font-weight: 800; letter-spacing: 0.08em; }
.generation-lane li strong { color: #f5f6f5; font-size: 0.86rem; }
.generation-lane li p { margin: 7px 0 0; color: #9fa6a1; font-size: 0.76rem; line-height: 1.6; }

.product-walkthrough .cine-section-heading { margin-bottom: 72px; }
.walkthrough-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(340px, 0.62fr);
  align-items: center;
  gap: clamp(38px, 7vw, 96px);
}

.walkthrough-feature > div > span,
.walkthrough-grid article > div > span { color: rgba(255, 255, 255, 0.25); font: 500 clamp(3rem, 5vw, 5rem)/1 var(--sv2-serif); }
.walkthrough-feature h3,
.walkthrough-grid h3 { margin: 14px 0 0; color: #fff; font: 500 clamp(2.2rem, 3.8vw, 3.9rem)/0.94 var(--sv2-serif); letter-spacing: -0.055em; }
.walkthrough-feature > div > p:not(.cine-kicker),
.walkthrough-grid article > div > p:not(.cine-kicker) { margin: 22px 0 0; color: #aab1ac; line-height: 1.7; }
.walkthrough-feature ul { margin: 30px 0 0; padding: 0; display: grid; gap: 11px; list-style: none; }
.walkthrough-feature li { display: flex; align-items: center; gap: 8px; color: #dfe2e0; font-size: 0.78rem; }
.walkthrough-feature li svg { width: 13px; color: var(--sv2-lime); }

.walkthrough-grid { margin-top: 80px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.walkthrough-grid article { min-width: 0; }
.walkthrough-grid article > div { padding: 32px 8px 0; }
.walkthrough-grid .product-screenshot-frame { border-radius: 24px; }

.proof-media-pair {
  margin-top: 72px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.proof-media-pair .product-screenshot-frame {
  min-width: 0;
  border-radius: 26px;
}

.proof-media-pair .product-screenshot-frame img {
  aspect-ratio: 1329 / 912;
  object-fit: cover;
}

.product-proof-gallery {
  padding-block: clamp(118px, 14vw, 210px);
  overflow: hidden;
  border-block: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at 8% 14%, rgba(215, 255, 95, 0.08), transparent 26rem),
    radial-gradient(circle at 92% 64%, rgba(148, 184, 255, 0.1), transparent 32rem),
    #080a09;
}

.proof-honesty-note {
  margin-top: 52px;
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  border: 1px solid rgba(215, 255, 95, 0.2);
  border-radius: 22px;
  background: rgba(215, 255, 95, 0.055);
}

.proof-honesty-note > svg {
  width: 24px;
  height: 24px;
  color: var(--sv2-lime);
}

.proof-honesty-note div { display: grid; gap: 4px; }
.proof-honesty-note strong { color: #fff; font-size: 0.92rem; }
.proof-honesty-note p { margin: 0; color: #a7aea9; font-size: 0.76rem; line-height: 1.55; }

.proof-group {
  margin-top: 88px;
  padding-top: 34px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.proof-group > header {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.72fr);
  align-items: end;
  gap: 48px;
}

.proof-group > header h3 {
  max-width: 760px;
  margin: 12px 0 0;
  color: #fff;
  font: 500 clamp(2.4rem, 4.5vw, 4.8rem)/0.94 var(--sv2-serif);
  letter-spacing: -0.06em;
}

.proof-group > header > p {
  margin: 0;
  color: #9fa7a2;
  line-height: 1.68;
}

.proof-card-rail {
  width: min(100vw - 40px, 1540px);
  margin-top: 42px;
  padding: 0 max(0px, calc((100vw - 1540px) / 2)) 18px 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(350px, min(42vw, 560px));
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-color: rgba(215, 255, 95, 0.45) rgba(255, 255, 255, 0.06);
  scrollbar-width: thin;
}

.proof-card {
  min-width: 0;
  overflow: hidden;
  scroll-snap-align: start;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.035);
  transition: border-color 220ms ease, transform 220ms ease, background 220ms ease;
}

.proof-card:hover {
  border-color: rgba(215, 255, 95, 0.28);
  background: rgba(255, 255, 255, 0.052);
  transform: translateY(-4px);
}

.proof-card figure {
  margin: 0;
  aspect-ratio: 1329 / 912;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: #0d100f;
}

.proof-card figure img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
  transition: transform 500ms cubic-bezier(.2,.8,.2,1);
}

.proof-card:hover figure img { transform: scale(1.018); }

.proof-card > div {
  position: relative;
  min-height: 230px;
  padding: 26px 26px 30px;
}

.proof-card-icon {
  position: absolute;
  top: -27px;
  right: 24px;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  color: #07100e;
  border: 5px solid #111412;
  border-radius: 18px;
  background: var(--sv2-lime);
}

.proof-card-icon svg { width: 21px; height: 21px; }
.proof-card-state { width: fit-content; margin: 0; padding: 6px 9px; border-radius: 999px; font-size: 0.57rem; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; }
.proof-card-state.complete { color: #0a130c; background: var(--sv2-lime); }
.proof-card-state.ready { color: #d5e3ff; border: 1px solid rgba(169, 199, 255, 0.22); background: rgba(169, 199, 255, 0.09); }
.proof-card h4 { margin: 18px 0 0; color: #fff; font-size: clamp(1.5rem, 2.3vw, 2.15rem); letter-spacing: -0.045em; }
.proof-card > div > p:last-child { margin: 14px 0 0; color: #9fa7a2; font-size: 0.78rem; line-height: 1.62; }

.proof-gallery-cta {
  margin-top: 92px;
  padding: 34px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(215, 255, 95, 0.1), rgba(148, 184, 255, 0.07));
}

.proof-gallery-cta h3 { margin: 8px 0 0; color: #fff; font-size: clamp(1.55rem, 2.7vw, 2.6rem); letter-spacing: -0.045em; }
.proof-gallery-cta .cine-button { flex: 0 0 auto; }

@media (max-width: 900px) {
  .production-pain-grid { grid-template-columns: 1fr; }
  .production-pain-grid article { min-height: 230px; }
  .production-pain-grid article + article { border-top: 1px solid rgba(255, 255, 255, 0.14); border-left: 0; }
  .production-mission { grid-template-columns: 1fr; align-items: start; }
  .team-audience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .research-model-grid,
  .pipeline-audience-grid,
  .generation-lane-grid,
  .proof-media-pair,
  .walkthrough-feature,
  .walkthrough-grid { grid-template-columns: 1fr; }
  .proof-group > header { grid-template-columns: 1fr; align-items: start; gap: 20px; }
  .proof-card-rail { grid-auto-columns: minmax(330px, 76vw); }
  .research-model-grid article,
  .pipeline-audience-card { min-height: 500px; }
  .walkthrough-feature { align-items: start; }
}

@media (max-width: 580px) {
  .production-thesis-lead h2,
  .production-mission h2,
  .team-audience .cine-section-heading h2 { font-size: clamp(3rem, 14vw, 4.5rem); }
  .production-pain-grid { margin-top: 52px; }
  .production-pain-grid article { min-height: 210px; padding-inline: 18px; }
  .production-mission { min-height: 0; padding: 30px 24px; border-radius: 28px; }
  .model-research-note { grid-template-columns: 1fr; }
  .team-audience-grid { grid-template-columns: 1fr; margin-top: 52px; }
  .team-audience-grid article { min-height: 220px; }
  .research-model-grid { margin-top: 52px; }
  .research-model-grid article,
  .pipeline-audience-card { min-height: 0; padding: 28px 22px; border-radius: 26px; }
  .pipeline-audience-card > .cine-kicker { margin-top: 150px; }
  .pipeline-audience-card ul { grid-template-columns: 1fr; }
  .research-direction { grid-template-columns: 1fr; }
  .media-agent-shot { margin-top: 52px; }
  .product-screenshot-frame { border-radius: 18px; }
  .product-screenshot-frame figcaption { align-items: flex-start; flex-direction: column; gap: 6px; }
  .generation-lane { padding: 26px 20px; border-radius: 24px; }
  .generation-lane header { grid-template-columns: 48px minmax(0, 1fr); }
  .generation-lane header > span { width: 48px; height: 48px; }
  .walkthrough-grid { margin-top: 58px; }
  .walkthrough-grid article > div { padding-inline: 2px; }
  .proof-honesty-note { grid-template-columns: 1fr; }
  .proof-group { margin-top: 64px; }
  .proof-card-rail { width: calc(100vw - 20px); grid-auto-columns: minmax(285px, 87vw); }
  .proof-card { border-radius: 22px; }
  .proof-card > div { min-height: 215px; padding: 24px 20px 26px; }
  .proof-gallery-cta { margin-top: 64px; padding: 26px 22px; align-items: flex-start; flex-direction: column; }
}

.motion-footer-scene {
  position: relative;
  min-height: 1040px;
  padding: 110px 0 32px;
  overflow: hidden;
  color: #fff;
  background: #050706;
}

.motion-footer-image,
.motion-footer-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.motion-footer-image { object-fit: cover; filter: saturate(0.78) brightness(0.62); }
.motion-footer-shade { background: linear-gradient(180deg, #080a09, rgba(6, 8, 7, 0.45) 24%, rgba(6, 8, 7, 0.17) 56%, rgba(6, 8, 7, 0.68)), radial-gradient(circle at 50% 38%, transparent, rgba(3, 4, 4, 0.58) 80%); }

.motion-footer-content {
  position: relative;
  z-index: 2;
  min-height: 900px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 120px;
}

.motion-waitlist-card {
  width: min(1010px, 100%);
  margin-inline: auto;
  padding: clamp(36px, 5vw, 68px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(330px, 0.8fr);
  align-items: end;
  gap: 70px;
  border-radius: 36px;
}

.motion-waitlist-card h2 {
  margin: 10px 0 0;
  color: #fff;
  font: 500 clamp(4rem, 7vw, 7.6rem)/0.82 var(--sv2-serif);
  letter-spacing: -0.065em;
}

.motion-waitlist-card h2 em { color: var(--sv2-lime); font-weight: 400; }
.motion-waitlist-copy > p { margin: 0 0 24px; color: rgba(255, 255, 255, 0.76); line-height: 1.65; }

.motion-waitlist-form {
  padding: 7px 7px 7px 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  background: rgba(5, 7, 6, 0.4);
}

.motion-waitlist-form button { display: inline-flex; align-items: center; gap: 7px; }
.motion-waitlist-form svg { width: 13px; }

.motion-trust-row {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.68rem;
}

.motion-trust-row span { display: inline-flex; align-items: center; gap: 5px; }
.motion-trust-row svg { width: 12px; color: var(--sv2-lime); }

.motion-glass-footer { padding: 48px 48px 26px; border-radius: 34px; }

.motion-footer-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.8fr) repeat(3, minmax(120px, 0.65fr));
  gap: clamp(35px, 6vw, 86px);
}

.motion-footer-brand p { max-width: 340px; margin: 22px 0; color: rgba(255, 255, 255, 0.65); line-height: 1.65; }
.motion-footer-workspace { padding: 0; display: inline-flex; align-items: center; gap: 7px; color: var(--sv2-lime); border: 0; background: transparent; font: 740 0.78rem var(--sv2-sans); }
.motion-footer-workspace svg { width: 14px; }
.motion-footer-grid h3 { margin: 5px 0 19px; color: rgba(255, 255, 255, 0.46); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; }
.motion-footer-grid > div:not(.motion-footer-brand) { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; }
.motion-footer-grid a,
.motion-footer-grid > div:not(.motion-footer-brand) button { padding: 0; color: rgba(255, 255, 255, 0.81); border: 0; background: transparent; font: 0.78rem var(--sv2-sans); text-decoration: none; }
.motion-footer-grid a:hover,
.motion-footer-grid button:hover { color: #fff; }

.motion-footer-base {
  margin-top: 46px;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.46);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.7rem;
}

/* Public desktop download surfaces. */
.desktop-download-story {
  padding-top: clamp(72px, 10vw, 150px);
  padding-bottom: clamp(72px, 10vw, 150px);
}

.desktop-download-card {
  position: relative;
  min-height: 440px;
  padding: clamp(34px, 6vw, 76px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(330px, 0.7fr);
  align-items: center;
  gap: clamp(45px, 8vw, 110px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 38px;
  background:
    radial-gradient(circle at 88% 12%, rgba(148, 184, 255, 0.19), transparent 28rem),
    radial-gradient(circle at 12% 100%, rgba(215, 255, 95, 0.08), transparent 25rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018));
  box-shadow: 0 34px 110px rgba(0, 0, 0, 0.28);
}

.desktop-download-card::after {
  position: absolute;
  right: -120px;
  bottom: -180px;
  width: 460px;
  height: 460px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(255, 255, 255, 0.018), 0 0 0 140px rgba(255, 255, 255, 0.012);
  content: "";
  pointer-events: none;
}

.desktop-download-copy { position: relative; z-index: 1; }
.desktop-download-copy h2 { margin: 14px 0 0; color: #fff; font: 500 clamp(3.1rem, 5.6vw, 6.2rem)/0.88 var(--sv2-serif); letter-spacing: -0.065em; }
.desktop-download-copy > p:not(.cine-kicker) { max-width: 650px; margin: 26px 0 30px; color: rgba(255, 255, 255, 0.67); line-height: 1.72; }

.desktop-download-platforms { position: relative; z-index: 1; display: grid; gap: 12px; }
.desktop-download-platforms > div { min-height: 112px; padding: 20px; display: grid; grid-template-columns: 48px 1fr; align-content: center; gap: 1px 14px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 22px; background: rgba(3, 5, 4, 0.48); backdrop-filter: blur(18px); }
.desktop-download-platforms > div > span { grid-row: 1 / 3; width: 48px; height: 48px; display: grid; place-items: center; color: #07100e; border-radius: 15px; background: var(--sv2-lime); }
.desktop-download-platforms svg { width: 22px; }
.desktop-download-platforms strong { align-self: end; color: #fff; font-size: 1rem; }
.desktop-download-platforms small { color: rgba(255, 255, 255, 0.52); font-size: 0.68rem; }
.desktop-download-platforms .is-soon { opacity: 0.72; }
.desktop-download-platforms .is-soon > span { color: #e9ecff; background: rgba(148, 184, 255, 0.2); }

.download-page { background: #080a09; }
.download-page .motion-header { position: absolute; }
.download-page .motion-nav nav .is-active { color: #fff; }

.download-hero {
  position: relative;
  min-height: 900px;
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 78% 34%, rgba(118, 144, 255, 0.16), transparent 29rem),
    radial-gradient(circle at 18% 70%, rgba(215, 255, 95, 0.07), transparent 25rem),
    linear-gradient(180deg, #070908, #0b0e0c 72%, #080a09);
}

.download-ambient,
.download-ambient i { position: absolute; inset: 0; pointer-events: none; }
.download-ambient { z-index: -1; overflow: hidden; }
.download-ambient::before { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom, transparent 10%, #000 48%, transparent 95%); content: ""; }
.download-ambient i { width: 560px; height: 560px; margin: auto; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 50%; }
.download-ambient i:nth-child(2) { width: 760px; height: 760px; }
.download-ambient i:nth-child(3) { width: 960px; height: 960px; border-color: rgba(255, 255, 255, 0.035); }

.download-hero-inner { padding-top: 142px; padding-bottom: 90px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(430px, 0.88fr); align-items: center; gap: clamp(55px, 8vw, 110px); }
.download-eyebrow { width: max-content; max-width: 100%; margin: 0 0 24px; padding: 9px 13px; display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.72); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; background: rgba(255, 255, 255, 0.04); font-size: 0.67rem; font-weight: 740; letter-spacing: 0.045em; text-transform: uppercase; }
.download-eyebrow i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--sv2-lime); box-shadow: 0 0 16px rgba(215, 255, 95, 0.68); }
.download-hero-copy h1 { margin: 0; color: #fff; font: 500 clamp(4.4rem, 7.2vw, 8.2rem)/0.82 var(--sv2-serif); letter-spacing: -0.07em; }
.download-hero-copy h1 em { color: var(--sv2-lime); font-weight: 400; }
.download-hero-copy > p:not(.download-eyebrow) { max-width: 660px; margin: 30px 0 0; color: rgba(255, 255, 255, 0.66); font-size: 1rem; line-height: 1.72; }

.download-platform-actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 11px; }
.download-platform-button { min-height: 68px; min-width: 230px; padding: 10px 18px; display: inline-flex; align-items: center; gap: 13px; color: #fff; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 19px; background: rgba(255, 255, 255, 0.055); text-align: left; text-decoration: none; cursor: pointer; transition: transform 200ms ease, border-color 200ms ease, background 200ms ease; }
.download-platform-button.primary { color: #07100e; border-color: var(--sv2-lime); background: var(--sv2-lime); box-shadow: 0 18px 50px rgba(215, 255, 95, 0.14); }
.download-platform-button:hover:not(:disabled) { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.34); }
.download-platform-button:disabled { opacity: 0.48; cursor: not-allowed; }
.download-platform-button.is-disabled,
.download-os-grid .cine-button.is-disabled { opacity: 0.48; pointer-events: none; cursor: not-allowed; }
.download-platform-button > svg { width: 23px; height: 23px; flex: 0 0 auto; }
.download-platform-button > span { display: grid; gap: 2px; }
.download-platform-button strong { font-size: 0.84rem; }
.download-platform-button small { opacity: 0.68; font-size: 0.64rem; }
.download-install-link { width: max-content; margin-top: 20px; display: inline-flex; align-items: center; gap: 7px; color: rgba(255, 255, 255, 0.7); font-size: 0.74rem; font-weight: 680; text-decoration: none; }
.download-install-link svg { width: 13px; }

.download-product-visual { position: relative; perspective: 1200px; }
.download-window { overflow: hidden; border-radius: 30px; transform: rotateY(-7deg) rotateX(3deg); box-shadow: 0 55px 120px rgba(0, 0, 0, 0.42); }
.download-window > header { min-height: 60px; padding: 0 17px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); background: rgba(5, 7, 6, 0.74); }
.download-window > header .download-window-mark { width: 30px; height: 30px; margin-right: 4px; display: grid; place-items: center; color: #07100e; border-radius: 10px; background: var(--sv2-lime); }
.download-window-mark svg { width: 15px; }
.download-window > header strong { font-size: 0.77rem; }
.download-window > header small { margin-right: auto; color: rgba(255, 255, 255, 0.42); font-size: 0.62rem; }
.download-window > header > i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); }
.download-window-body { min-height: 430px; display: grid; grid-template-columns: 66px minmax(0, 1fr); background: linear-gradient(145deg, rgba(11, 14, 12, 0.94), rgba(17, 21, 18, 0.83)); }
.download-window-rail { padding-top: 34px; display: grid; align-content: start; justify-items: center; gap: 18px; border-right: 1px solid rgba(255, 255, 255, 0.08); }
.download-window-rail span { width: 27px; height: 27px; border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 9px; background: rgba(255, 255, 255, 0.035); }
.download-window-rail span:first-child { border-color: rgba(215, 255, 95, 0.34); background: rgba(215, 255, 95, 0.12); }
.download-window-content { padding: 68px 42px 40px; }
.download-window-content > small { color: var(--sv2-lime); font-size: 0.6rem; font-weight: 780; letter-spacing: 0.12em; }
.download-window-content h2 { margin: 12px 0 38px; color: #fff; font: 500 clamp(2.7rem, 4vw, 4.1rem)/0.89 var(--sv2-serif); letter-spacing: -0.055em; }
.download-window-content > div { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 14px; color: rgba(255, 255, 255, 0.54); border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.68rem; }
.download-window-content > div strong { color: rgba(255, 255, 255, 0.84); font-size: 0.65rem; }
.download-trust-chip { position: absolute; right: -8px; bottom: -24px; padding: 13px 16px; display: flex; align-items: center; gap: 9px; color: rgba(255, 255, 255, 0.82); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 14px; background: rgba(9, 12, 10, 0.88); box-shadow: 0 22px 55px rgba(0, 0, 0, 0.34); backdrop-filter: blur(18px); font-size: 0.66rem; }
.download-trust-chip svg { width: 16px; color: var(--sv2-lime); }

.download-specs { padding-top: clamp(90px, 12vw, 170px); padding-bottom: clamp(90px, 12vw, 170px); }
.download-section-heading { max-width: 760px; }
.download-section-heading h2 { margin: 13px 0 0; color: #fff; font: 500 clamp(3.2rem, 5vw, 5.7rem)/0.9 var(--sv2-serif); letter-spacing: -0.06em; }
.download-section-heading > p:last-child { max-width: 630px; margin: 25px 0 0; color: rgba(255, 255, 255, 0.6); line-height: 1.7; }
.download-os-grid { margin-top: 64px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.download-os-grid article { min-height: 500px; padding: clamp(28px, 4vw, 45px); display: flex; flex-direction: column; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 30px; background: rgba(255, 255, 255, 0.035); }
.download-os-grid article.is-available { background: radial-gradient(circle at 100% 0%, rgba(215, 255, 95, 0.1), transparent 20rem), rgba(255, 255, 255, 0.035); }
.download-os-grid article.is-coming-soon { background: radial-gradient(circle at 100% 0%, rgba(148, 184, 255, 0.1), transparent 20rem), rgba(255, 255, 255, 0.025); }
.download-os-grid header { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 15px; }
.download-os-grid header > span { width: 54px; height: 54px; display: grid; place-items: center; color: #07100e; border-radius: 17px; background: var(--sv2-lime); }
.download-os-grid .is-coming-soon header > span { color: #ecf0ff; background: rgba(148, 184, 255, 0.18); }
.download-os-grid header svg { width: 25px; }
.download-os-grid header small { color: rgba(255, 255, 255, 0.42); font-size: 0.58rem; font-weight: 760; letter-spacing: 0.08em; }
.download-os-grid h3 { margin: 2px 0 0; color: #fff; font-size: 1.25rem; }
.download-os-grid header > i { padding: 6px 9px; color: #07100e; border-radius: 999px; background: var(--sv2-lime); font-size: 0.58rem; font-style: normal; font-weight: 800; text-transform: uppercase; }
.download-os-grid .is-coming-soon header > i { color: rgba(255, 255, 255, 0.7); background: rgba(148, 184, 255, 0.14); }
.download-os-grid article > p { margin: 42px 0 0; color: rgba(255, 255, 255, 0.58); line-height: 1.7; }
.download-os-grid dl { margin: 36px 0; padding: 0; display: grid; border-top: 1px solid rgba(255, 255, 255, 0.11); }
.download-os-grid dl > div { min-height: 58px; display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.11); }
.download-os-grid dt { color: rgba(255, 255, 255, 0.38); font-size: 0.63rem; font-weight: 740; letter-spacing: 0.08em; text-transform: uppercase; }
.download-os-grid dd { margin: 0; color: rgba(255, 255, 255, 0.86); font-size: 0.78rem; }
.download-os-grid .download-checksum { overflow: hidden; color: rgba(255, 255, 255, 0.64); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.68rem; text-overflow: ellipsis; white-space: nowrap; }
.download-os-grid .cine-button { margin-top: auto; }
.download-os-grid .cine-button:disabled { opacity: 0.48; cursor: not-allowed; }

.download-install-section { padding: clamp(90px, 12vw, 160px) 0; border-top: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: linear-gradient(180deg, rgba(255, 255, 255, 0.022), transparent); }
.download-install-steps { margin: 70px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; }
.download-install-steps li { min-height: 300px; padding: 30px clamp(24px, 3vw, 40px); display: grid; grid-template-rows: auto 1fr; gap: 58px; border-top: 1px solid rgba(255, 255, 255, 0.15); border-right: 1px solid rgba(255, 255, 255, 0.11); }
.download-install-steps li:last-child { border-right: 0; }
.download-install-steps li > span { width: 46px; height: 46px; display: grid; place-items: center; color: #07100e; border-radius: 50%; background: var(--sv2-lime); font-size: 0.67rem; font-weight: 800; }
.download-install-steps small { color: rgba(255, 255, 255, 0.38); font-size: 0.59rem; font-weight: 760; letter-spacing: 0.1em; }
.download-install-steps h3 { margin: 9px 0 0; color: #fff; font-size: 1.25rem; }
.download-install-steps p { margin: 17px 0 0; color: rgba(255, 255, 255, 0.56); font-size: 0.84rem; line-height: 1.7; }
.download-install-steps p strong { color: rgba(255, 255, 255, 0.8); font-weight: 650; }

.download-footer { padding: 80px 0 26px; background: #050706; }
.download-footer-main { display: grid; grid-template-columns: minmax(260px, 1fr) auto; gap: 60px; align-items: start; }
.download-footer-main > div > p { max-width: 390px; margin: 22px 0 0; color: rgba(255, 255, 255, 0.48); font-size: 0.82rem; line-height: 1.65; }
.download-footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 15px 28px; }
.download-footer nav a,
.download-footer nav button { padding: 0; color: rgba(255, 255, 255, 0.68); border: 0; background: transparent; font-size: 0.77rem; text-decoration: none; cursor: pointer; }
.download-footer nav a:hover,
.download-footer nav button:hover { color: #fff; }
.download-footer-base { margin-top: 70px; padding-top: 22px; display: flex; justify-content: space-between; gap: 20px; color: rgba(255, 255, 255, 0.38); border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.68rem; }

/* --------------------------------------------------------------------------
   Authentication: redesigned from scratch
   -------------------------------------------------------------------------- */

.auth-v3 {
  position: relative;
  min-height: 100svh;
  padding: 24px clamp(20px, 4vw, 64px) 20px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 24px;
  overflow: hidden;
  color: var(--sv2-ink);
  background:
    radial-gradient(circle at 14% 18%, rgba(112, 153, 255, 0.17), transparent 29rem),
    radial-gradient(circle at 88% 84%, rgba(190, 255, 91, 0.09), transparent 31rem),
    linear-gradient(145deg, #070908, #0a0d0c 52%, #060807);
  font-family: var(--sv2-sans);
}

.auth-aurora,
.auth-aurora i { position: absolute; pointer-events: none; }
.auth-aurora { inset: 0; overflow: hidden; }
.auth-aurora::before { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(circle at center, black, transparent 72%); content: ""; }
.auth-aurora i { width: 360px; height: 360px; border-radius: 50%; filter: blur(85px); opacity: 0.18; }
.auth-aurora i:nth-child(1) { top: -170px; left: 18%; background: #6692ff; }
.auth-aurora i:nth-child(2) { right: -170px; bottom: 10%; background: #d7ff5f; }
.auth-aurora i:nth-child(3) { bottom: -220px; left: 36%; background: #ad70ff; }

.auth-v3-header,
.auth-v3-shell,
.auth-v3-footer { position: relative; z-index: 2; width: min(1220px, 100%); margin-inline: auto; }

.auth-v3-header { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.auth-v3-brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.auth-v3-brand > span { width: 38px; height: 38px; display: grid; place-items: center; color: #07100e; border-radius: 50%; background: var(--sv2-lime); }
.auth-v3-brand span svg { width: 19px; }
.auth-v3-brand strong { font-size: 1rem; letter-spacing: -0.03em; }

.auth-v3 .auth-back,
.auth-inline-back {
  min-height: 42px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  font: 680 0.76rem var(--sv2-sans);
}

.auth-v3 .auth-back svg,
.auth-inline-back svg { width: 14px; transform: rotate(180deg); }

.auth-v3-shell {
  align-self: center;
  min-height: min(760px, calc(100svh - 150px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(430px, 500px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 34px;
  background: rgba(11, 14, 13, 0.72);
  box-shadow: 0 34px 120px rgba(0, 0, 0, 0.48), inset 0 1px rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}

.auth-story {
  position: relative;
  min-width: 0;
  padding: clamp(42px, 6vw, 78px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 54px;
  overflow: hidden;
  background:
    radial-gradient(circle at 83% 12%, rgba(110, 147, 255, 0.22), transparent 24rem),
    linear-gradient(155deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
}

.auth-story::after { position: absolute; right: -140px; bottom: -170px; width: 430px; height: 430px; border: 1px solid rgba(215,255,95,.18); border-radius: 50%; box-shadow: 0 0 0 70px rgba(215,255,95,.025), 0 0 0 140px rgba(215,255,95,.018); content: ""; pointer-events: none; }
.auth-story-copy,
.auth-story-points,
.auth-story-foot { position: relative; z-index: 1; }

.auth-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sv2-lime);
  font-size: 0.69rem;
  font-weight: 780;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.auth-eyebrow::before { width: 22px; height: 1px; background: currentColor; content: ""; }

.auth-story h1 {
  max-width: 700px;
  margin: 20px 0 24px;
  color: #fff;
  font: 500 clamp(4rem, 6vw, 7.1rem)/0.87 var(--sv2-serif);
  letter-spacing: -0.065em;
  text-wrap: balance;
}

.auth-story-copy > p { max-width: 590px; color: rgba(255, 255, 255, 0.66); font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.68; }

.auth-story-points { display: grid; gap: 10px; }
.auth-story-points article { min-height: 72px; padding: 13px 15px; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 13px; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; background: rgba(255,255,255,.035); }
.auth-story-points article > span { width: 38px; height: 38px; display: grid; place-items: center; color: #deff82; border-radius: 12px; background: rgba(215,255,95,.09); }
.auth-story-points svg { width: 17px; }
.auth-story-points strong { display: block; color: #fff; font-size: 0.83rem; }
.auth-story-points p { margin-top: 3px; color: rgba(255,255,255,.52); font-size: 0.7rem; line-height: 1.45; }
.auth-story-foot { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.48); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
.auth-story-foot i { width: 7px; height: 7px; border-radius: 50%; background: var(--sv2-lime); box-shadow: 0 0 14px rgba(215,255,95,.7); }

.auth-v3 .auth-card {
  min-width: 0;
  padding: clamp(30px, 4vw, 52px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #171a18;
  border: 0;
  border-radius: 0;
  background: #f1f1ec;
  box-shadow: none;
}

.auth-mode-switch {
  width: 100%;
  margin-bottom: 34px;
  padding: 5px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  border: 1px solid #d6d8d1;
  border-radius: 14px;
  background: #e7e8e2;
}

.auth-mode-switch button {
  min-height: 42px;
  color: #71756f;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font: 750 0.76rem var(--sv2-sans);
}

.auth-mode-switch button.is-active { color: #151815; background: #fff; box-shadow: 0 4px 16px rgba(23,26,24,.08); }
.auth-inline-back { width: max-content; margin-bottom: 26px; color: #454944; border-color: #d3d6cf; background: #fff; }

.auth-v3 .auth-copy { display: block; }
.auth-v3 .auth-copy .secure-pill { width: max-content; max-width: 100%; margin: 0 0 18px; padding: 7px 10px; display: inline-flex; align-items: center; gap: 7px; color: #496119; border: 1px solid #cfe09a; border-radius: 999px; background: #e8f3c7; font-size: .66rem; font-weight: 730; }
.auth-v3 .auth-copy .secure-pill.blocked { color: #81463d; border-color: #e3c3bd; background: #f7e9e6; }
.auth-v3 .auth-copy .secure-pill svg { width: 13px; }
.auth-v3 .auth-copy h2 { margin: 0; color: #151815; font: 720 clamp(2.3rem, 3.7vw, 3.8rem)/.98 var(--sv2-sans); letter-spacing: -.055em; }
.auth-v3 .auth-copy > p { margin: 13px 0 0; color: #656a64; font-size: .9rem; line-height: 1.55; }

.auth-v3 .auth-alert { margin: 18px 0 0; padding: 12px 13px; color: #7d3c33; border: 1px solid #e4bcb6; border-radius: 12px; background: #fae9e6; font-size: .78rem; line-height: 1.45; }

.auth-v3 .auth-form { margin-top: 24px; display: grid; gap: 17px; }
.auth-field { display: grid; gap: 7px; }
.auth-field label { color: #242824; font-size: .74rem; font-weight: 760; }
.auth-field > small { color: #777c75; font-size: .65rem; line-height: 1.4; }

.auth-v3 .auth-card input {
  width: 100%;
  min-height: 52px;
  padding: 0 15px;
  color: #171a18;
  border: 1px solid #cbd0c8;
  border-radius: 13px;
  outline: 0;
  background: #fbfbf8;
  box-shadow: inset 0 1px 2px rgba(19,23,20,.035);
  font: .86rem var(--sv2-sans);
}

.auth-v3 .auth-card input::placeholder { color: #a0a49d; }
.auth-v3 .auth-card input:focus { border-color: #637049; box-shadow: 0 0 0 4px rgba(114,137,61,.12); }

.auth-v3 .password-field { position: relative; display: block; }
.auth-v3 .password-field input { padding-right: 74px; }
.auth-v3 .password-toggle { position: absolute; top: 6px; right: 6px; min-width: 58px; height: 40px; color: #4a4f48; border: 1px solid #d4d7d0; border-radius: 10px; background: #f0f1ec; font-size: .68rem; font-weight: 740; }

.auth-v3 .auth-submit {
  width: 100%;
  min-height: 54px;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #09100d;
  border: 0;
  border-radius: 13px;
  background: var(--sv2-lime);
  box-shadow: 0 12px 30px rgba(119,144,45,.2);
  font: 800 .8rem var(--sv2-sans);
}

.auth-v3 .auth-submit:hover { transform: translateY(-1px); box-shadow: 0 15px 34px rgba(119,144,45,.25); }
.auth-v3 .auth-submit:disabled,
.auth-v3 button:disabled { opacity: .48; cursor: not-allowed; }
.auth-v3 .auth-submit svg { width: 14px; }

.auth-v3 .oauth-divider { position: relative; margin: 25px 0 18px; text-align: center; }
.auth-v3 .oauth-divider::before { position: absolute; top: 50%; right: 0; left: 0; height: 1px; background: #d6d9d2; content: ""; }
.auth-v3 .oauth-divider span { position: relative; padding: 0 11px; color: #7b8079; background: #f1f1ec; font-size: .66rem; }

.auth-v3 .oauth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.auth-v3 .provider-button { min-height: 46px; padding: 0 12px; display: flex; align-items: center; gap: 10px; color: #282c28; border: 1px solid #ced2ca; border-radius: 12px; background: #fafaf7; font: inherit; }
.auth-v3 .provider-button:hover { border-color: #aeb4a9; background: #fff; }
.auth-v3 .provider-button > span { width: 25px; height: 25px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: #242824; font-size: .65rem; font-weight: 800; }
.auth-v3 .provider-button strong { color: inherit; font-size: .72rem; }

.auth-forgot { width: max-content; margin: 18px auto 0; padding: 6px; color: #4e554b; border: 0; background: transparent; font: 720 .72rem var(--sv2-sans); text-decoration: underline; text-underline-offset: 4px; }
.auth-v3 .fine-print { margin: 20px auto 0; max-width: 390px; color: #83877f; font-size: .63rem; line-height: 1.5; text-align: center; }

.auth-v3 .legal-consent-card { padding: 15px; display: grid; gap: 13px; color: #272b27; border: 1px solid #d1d5cd; border-radius: 14px; background: #e7e9e2; }
.auth-v3 .legal-consent-card > div:first-child { display: grid; gap: 3px; }
.auth-v3 .legal-consent-card strong { color: #242824; font-size: .76rem; }
.auth-v3 .legal-consent-card p { color: #6c716a; font-size: .66rem; line-height: 1.45; }
.auth-v3 .legal-read-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.auth-v3 .legal-read-card { min-height: 68px; padding: 10px; display: grid; align-content: space-between; gap: 9px; color: #2a2e2a; border: 1px solid #ccd0c7; border-radius: 11px; background: #f5f5f1; text-align: left; }
.auth-v3 .legal-read-card > span:first-child { display: flex; align-items: center; gap: 7px; font-size: .7rem; font-weight: 730; }
.auth-v3 .legal-read-card svg { width: 14px; }
.auth-v3 :is(.legal-pending, .legal-accepted) { width: max-content; display: inline-flex; align-items: center; gap: 5px; color: #747970; font-size: .61rem; font-weight: 720; }
.auth-v3 .legal-accepted { color: #4f6819; }

.auth-v3 .password-criteria { margin: -5px 0 0; padding: 11px 13px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; color: #72776f; border: 1px solid #d5d8d1; border-radius: 12px; background: #e9eae5; font-size: .62rem; list-style: none; }
.auth-v3 .password-criteria li { display: flex; align-items: center; gap: 6px; }
.auth-v3 .password-criteria li::before { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: #aeb3aa; content: ""; }
.auth-v3 .password-criteria li.valid { color: #50691d; }
.auth-v3 .password-criteria li.valid::before { background: #729331; }

.auth-v3-footer { min-height: 28px; display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.38); font-size: .66rem; }
.auth-v3 .legal-consent-backdrop { z-index: 80; }

/* --------------------------------------------------------------------------
   Shared workspace module repair
   -------------------------------------------------------------------------- */

.sv-shell,
.sv-main,
.page-stage,
.page-stage > * { min-width: 0; }

.page-stage { overflow-x: hidden; }
.page-stage > * { max-width: 100%; }

.page-stage .home-center { width: 100%; max-width: 100%; }
.page-stage :is(.workspace-composer, .task-composer, .knowledge-chat-composer),
.page-stage .home-center .workspace-composer {
  width: min(780px, 100%);
  max-width: 100%;
}
.page-stage :is(.workspace-composer, .task-composer, .knowledge-chat-composer) :is(.composer-input-shell, textarea) { max-width: 100%; }

.page-stage .plugins-v2 .plugin-category-filters {
  width: 100%;
  max-width: 100%;
  padding: 10px 16px 2px;
  display: flex;
  flex-wrap: wrap;
  overflow-x: visible;
}

.page-stage .plugins-v2 .plugin-category-filters button { flex: 0 0 auto; }

.page-stage .plugin-toolbar,
.page-stage .plugin-marketplace,
.page-stage .plugin-grid,
.page-stage .plugin-category-group,
.page-stage .plugin-category-items { min-width: 0; max-width: 100%; }

.page-stage .intelligence-stage-rail {
  width: 100%;
  max-width: 100%;
  grid-template-columns: repeat(6, minmax(72px, 1fr));
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.page-stage :is(.web-intelligence-v2, .messenger-workspace, .automation-workbench, .plugin-marketplace, .knowledge-v2-workspace) { min-width: 0; max-width: 100%; }

.page-stage .schedule-surface.automation-v2 > * {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

@media (max-width: 1180px) {
  .motion-nav { grid-template-columns: 1fr auto auto; }
  .motion-nav nav { display: none; }
  .motion-menu-toggle { display: flex; }
  .motion-scene-switcher { left: 50%; bottom: 68px; transform: translateX(-50%); }
  .motion-hero-facts { right: 20px; bottom: 20px; left: 20px; justify-content: center; }
  .motion-waitlist-card { grid-template-columns: 1fr; gap: 35px; }
  .motion-waitlist-copy { max-width: 600px; }
  .motion-footer-grid { grid-template-columns: 1.5fr repeat(3, .7fr); gap: 34px; }
  .download-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(370px, 0.76fr); gap: 45px; }
  .auth-v3-shell { grid-template-columns: minmax(0, 1fr) minmax(420px, 47%); }
}

@media (max-width: 900px) {
  .motion-header { top: 14px; padding-inline: 14px; }
  .motion-nav { min-height: 60px; padding: 7px 7px 7px 14px; border-radius: 19px; }
  .motion-nav-actions { display: none; }
  .motion-nav { grid-template-columns: 1fr auto; }
  .motion-hero-content { width: min(100% - 34px, 700px); padding-top: 138px; padding-bottom: 130px; }
  .motion-hero-copy h1 { font-size: clamp(4.1rem, 13vw, 6.8rem); }
  .motion-footer-scene { min-height: 1180px; padding-top: 74px; }
  .motion-footer-content { min-height: 1050px; gap: 80px; }
  .motion-glass-footer { padding: 38px 32px 24px; }
  .motion-footer-grid { grid-template-columns: repeat(3, 1fr); }
  .motion-footer-brand { grid-column: 1 / -1; }
  .desktop-download-card { grid-template-columns: 1fr; }
  .desktop-download-platforms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .download-page .motion-nav-actions { display: flex; }
  .download-page .motion-nav-actions .motion-login { display: none; }
  .download-hero { min-height: 0; }
  .download-hero-inner { padding-top: 140px; grid-template-columns: 1fr; }
  .download-product-visual { width: min(620px, 100%); margin: 15px auto 45px; }
  .download-os-grid { grid-template-columns: 1fr; }
  .download-install-steps { grid-template-columns: 1fr; }
  .download-install-steps li { min-height: 0; grid-template-columns: 54px 1fr; grid-template-rows: 1fr; gap: 20px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }

  .auth-v3 { padding: 16px; }
  .auth-v3-shell { min-height: min(760px, calc(100svh - 124px)); grid-template-columns: minmax(0, 1fr) minmax(360px, 46%); }
  .auth-story { min-height: 0; padding: 34px; gap: 30px; }
  .auth-story h1 { font-size: clamp(3.2rem, 6.7vw, 4.2rem); }
  .auth-story-points { grid-template-columns: 1fr; }
  .auth-story-points article { min-height: 64px; grid-template-columns: 38px 1fr; align-content: center; }
  .auth-v3 .auth-card { padding: 34px; }
}

@media (max-width: 720px) {
  .auth-v3-shell { min-height: 0; grid-template-columns: 1fr; }
  .auth-story { min-height: 258px; padding: 26px; justify-content: flex-start; gap: 16px; }
  .auth-story h1 { max-width: 330px; margin: 13px 0 0; font-size: clamp(2.75rem, 12.5vw, 3.7rem); line-height: .88; }
  .auth-story-copy > p,
  .auth-story-points,
  .auth-story-foot { display: none; }
  .auth-v3 .auth-card { padding: 30px 22px; }

  .sv-shell.sidebar-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
  .sv-shell.sidebar-collapsed .sv-sidebar.is-collapsed { width: 0; max-width: 0; overflow: visible; }
  .sv-shell.sidebar-collapsed .sv-sidebar.is-collapsed .sidebar-reveal { position: fixed; z-index: 160; top: 12px; left: 12px; }
  .sv-shell.sidebar-collapsed .sv-main { width: 100vw; }
  .page-stage .plugins-v2 .plugin-grid,
  .page-stage .plugins-v2 .plugin-category-items { grid-template-columns: 1fr; }
  .page-stage .plugin-toolbar { grid-template-columns: 1fr; }
  .page-stage .plugin-view-toggle { justify-content: flex-start; flex-wrap: wrap; }
}

@media (max-width: 580px) {
  .motion-hero { height: max(720px, 100svh); }
  .motion-hero-content { width: min(100% - 28px, 520px); padding: 126px 0 146px; }
  .motion-badge { margin-bottom: 18px; padding: 8px 11px; font-size: .58rem; }
  .motion-hero-copy h1 { font-size: clamp(3.2rem, 15vw, 4.6rem); line-height: .88; }
  .motion-hero-copy > p:not(.motion-badge) { margin-top: 21px; font-size: .9rem; line-height: 1.55; }
  .motion-email-pill { min-height: 0; margin-top: 22px; padding: 6px 6px 6px 14px; }
  .motion-email-pill input { font-size: .82rem; }
  .motion-email-pill button { min-height: 42px; padding-inline: 13px; }
  .motion-hero-links { flex-direction: column; gap: 9px; }
  .motion-hero-links button,
  .motion-hero-links a { font-size: .69rem; }
  .motion-scene-switcher { bottom: 72px; width: 100%; justify-content: center; gap: 1px; }
  .motion-scene-switcher button { min-height: 32px; padding: 0 9px; font-size: .6rem; }
  .motion-hero-facts { bottom: 17px; font-size: .54rem; }
  .motion-hero-facts span:nth-of-type(3),
  .motion-hero-facts span:nth-of-type(4),
  .motion-hero-facts i:nth-of-type(2),
  .motion-hero-facts i:nth-of-type(3) { display: none; }

  .motion-footer-scene { min-height: 1240px; padding: 54px 0 20px; }
  .motion-footer-content { min-height: 1160px; gap: 60px; }
  .motion-waitlist-card { padding: 28px 22px; gap: 30px; border-radius: 27px; }
  .motion-waitlist-card h2 { font-size: clamp(3.55rem, 17vw, 5.2rem); }
  .motion-waitlist-form { grid-template-columns: 1fr; padding: 7px; }
  .motion-waitlist-form input { min-height: 46px; padding-inline: 9px; }
  .motion-waitlist-form button { justify-content: center; }
  .motion-glass-footer { padding: 28px 22px 20px; border-radius: 27px; }
  .motion-footer-grid { grid-template-columns: 1fr 1fr; gap: 34px 24px; }
  .motion-footer-brand,
  .motion-footer-grid > div:last-child { grid-column: 1 / -1; }
  .motion-footer-base { margin-top: 34px; flex-direction: column; gap: 8px; }
  .desktop-download-card { padding: 28px 22px; border-radius: 27px; }
  .desktop-download-copy h2 { font-size: clamp(3rem, 14vw, 4.4rem); }
  .desktop-download-copy .cine-button { width: 100%; }
  .desktop-download-platforms { grid-template-columns: 1fr; }
  .download-page .motion-nav { grid-template-columns: 1fr auto; }
  .download-page .motion-nav-actions .motion-get-started { min-height: 42px; padding-inline: 12px; font-size: 0.68rem; }
  .download-hero-inner { width: min(100% - 28px, 520px); padding-top: 126px; padding-bottom: 75px; }
  .download-hero-copy h1 { font-size: clamp(3.65rem, 17vw, 5rem); }
  .download-platform-actions { display: grid; }
  .download-platform-button { width: 100%; min-width: 0; }
  .download-window { border-radius: 23px; transform: none; }
  .download-window-body { min-height: 350px; grid-template-columns: 48px minmax(0, 1fr); }
  .download-window-rail { gap: 13px; }
  .download-window-rail span { width: 23px; height: 23px; }
  .download-window-content { padding: 48px 22px 28px; }
  .download-window-content h2 { font-size: clamp(2.55rem, 12vw, 3.5rem); }
  .download-trust-chip { position: relative; right: auto; bottom: auto; width: fit-content; margin: 12px auto 0; }
  .download-section-heading h2 { font-size: clamp(3rem, 14vw, 4.5rem); }
  .download-os-grid { margin-top: 44px; }
  .download-os-grid article { min-height: 0; padding: 27px 22px; }
  .download-os-grid header { grid-template-columns: 50px 1fr; }
  .download-os-grid header > i { grid-column: 1 / -1; width: fit-content; margin-top: 8px; }
  .download-install-steps { margin-top: 46px; }
  .download-install-steps li { padding: 25px 4px; }
  .download-footer-main { grid-template-columns: 1fr; }
  .download-footer nav { justify-content: flex-start; }
  .download-footer-base { flex-direction: column; }

  .auth-v3 { padding: 12px; gap: 14px; overflow: visible; }
  .auth-v3-header { min-height: 46px; }
  .auth-v3 .auth-back { min-height: 38px; padding-inline: 11px; font-size: .68rem; }
  .auth-v3-shell { border-radius: 24px; }
  .auth-mode-switch { margin-bottom: 28px; }
  .auth-v3 .oauth-grid,
  .auth-v3 .legal-read-grid,
  .auth-v3 .password-criteria { grid-template-columns: 1fr; }
  .auth-v3-footer { padding-inline: 4px; flex-direction: column; align-items: flex-start; gap: 4px; }
}

@media (prefers-reduced-motion: no-preference) {
  .motion-train-overlay { animation: sv2Train 7s ease-in-out infinite alternate; }
  .motion-badge i,
  .auth-story-foot i { animation: sv2Pulse 2.4s ease-in-out infinite; }
  .auth-aurora i:nth-child(1) { animation: sv2Drift 13s ease-in-out infinite alternate; }
  .auth-aurora i:nth-child(2) { animation: sv2Drift 16s ease-in-out infinite alternate-reverse; }
}

@keyframes sv2Train { from { transform: scale(1.01) translateY(0); } to { transform: scale(1.045) translateY(-5px); } }
@keyframes sv2Pulse { 50% { opacity: .45; box-shadow: 0 0 4px var(--sv2-lime); } }
@keyframes sv2Drift { to { transform: translate3d(42px, 26px, 0) scale(1.12); } }

@media (prefers-reduced-motion: reduce) {
  .sham-cinema *,
  .sham-cinema *::before,
  .sham-cinema *::after,
  .auth-v3 *,
  .auth-v3 *::before,
  .auth-v3 *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* --------------------------------------------------------------------------
   ShamCut · browser creator editing studio
   -------------------------------------------------------------------------- */

.page-stage .shamverse-cut-page {
  --cut-bg: #080910;
  --cut-panel: #0f111b;
  --cut-panel-2: #141725;
  --cut-panel-3: #1a1d2d;
  --cut-line: rgba(180, 190, 232, .12);
  --cut-line-strong: rgba(180, 190, 232, .22);
  --cut-text: #f6f7fc;
  --cut-muted: #9097ad;
  --cut-blue: #6877ff;
  --cut-purple: #9d5cff;
  --cut-pink: #ff5fb8;
  width: min(1580px, 100%);
  max-width: none;
  min-width: 0;
  margin: 0 auto;
  padding: 0 0 30px;
  color: var(--cut-text);
}

.automation-product-tabs {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 12px;
  padding: 6px;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.automation-product-tabs button {
  min-width: 0;
  flex: 1 1 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 8px 13px;
  color: var(--muted);
  text-align: left;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
}

.automation-product-tabs button > svg {
  width: 18px;
  height: 18px;
  padding: 7px;
  overflow: visible;
  color: #9aa7c9;
  border-radius: 10px;
  background: rgb(115 129 177 / .1);
}

.automation-product-tabs button span { min-width: 0; display: grid; gap: 2px; }
.automation-product-tabs button strong { color: var(--text-soft); font-size: .76rem; }
.automation-product-tabs button small { overflow: hidden; font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }
.automation-product-tabs button.is-active { border-color: rgb(113 126 255 / .26); background: linear-gradient(135deg, rgb(83 98 255 / .13), rgb(186 71 255 / .08)); box-shadow: inset 0 1px rgb(255 255 255 / .04); }
.automation-product-tabs button.is-active > svg { color: #d9dcff; background: linear-gradient(135deg, #5d6dff, #9b5bff); box-shadow: 0 6px 18px rgb(80 75 255 / .2); }

.shamverse-cut-page button,
.shamverse-cut-page input,
.shamverse-cut-page select,
.shamverse-cut-page textarea { font: inherit; }

.shamverse-cut-page button { color: inherit; }

.cut-appbar {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(180px, 280px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 68px;
  padding: 10px 13px;
  border: 1px solid var(--cut-line);
  border-radius: 20px 20px 0 0;
  background: linear-gradient(120deg, #10121c, #0d0f18 55%, #131121);
  box-shadow: 0 20px 60px rgb(0 0 0 / .22);
}

.cut-brand { display: flex; align-items: center; gap: 10px; }
.cut-brand > span { width: 40px; height: 40px; display: grid; place-items: center; color: #fff; border-radius: 13px; background: linear-gradient(135deg, var(--cut-blue), var(--cut-purple) 52%, var(--cut-pink)); box-shadow: 0 8px 24px rgb(112 83 255 / .28); }
.cut-brand > span svg { width: 20px; height: 20px; }
.cut-brand > div { display: grid; line-height: 1; }
.cut-brand small { color: #9da4b9; font-size: .49rem; font-weight: 800; letter-spacing: .22em; }
.cut-brand strong { margin-top: 3px; font-size: .93rem; letter-spacing: .05em; }
.cut-brand em { margin-left: 3px; padding: 2px 4px; color: #d9b9ff; border: 1px solid rgb(185 119 255 / .28); border-radius: 4px; font-size: .44rem; font-style: normal; vertical-align: 2px; }

.cut-project-name { min-width: 0; display: flex; align-items: center; gap: 7px; padding: 0 9px; border: 1px solid transparent; border-radius: 9px; }
.cut-project-name:focus-within { border-color: var(--cut-line-strong); background: rgb(255 255 255 / .025); }
.cut-project-name svg { width: 13px; color: #757e99; }
.cut-project-name input { min-width: 0; width: 100%; height: 32px; padding: 0; color: #e9eaf3; border: 0; outline: 0; background: transparent; font-size: .73rem; font-weight: 650; }
.cut-project-switcher { min-width: 0; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 29px; align-items: center; }
.cut-project-menu-toggle { width: 27px; height: 27px; display: grid; place-items: center; color: #757e99; border: 1px solid transparent; border-radius: 7px; background: transparent; }
.cut-project-menu-toggle:hover, .cut-project-menu-toggle.is-active { color: #d9d5ff; border-color: var(--cut-line-strong); background: rgb(115 93 255 / .1); }
.cut-project-menu-toggle svg { width: 12px; transition: transform .16s ease; }
.cut-project-menu-toggle.is-active svg { transform: rotate(180deg); }
.cut-project-menu { position: absolute; z-index: 30; top: calc(100% + 9px); left: 0; width: min(320px, 82vw); overflow: hidden; border: 1px solid var(--cut-line-strong); border-radius: 13px; background: #121520; box-shadow: 0 20px 55px rgb(0 0 0 / .52); }
.cut-project-menu > header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--cut-line); }
.cut-project-menu > header > div { display: grid; gap: 2px; }
.cut-project-menu > header small { color: #69728a; font-size: .44rem; text-transform: uppercase; letter-spacing: .09em; }
.cut-project-menu > header strong { color: #e6e7f0; font-size: .62rem; }
.cut-project-menu > header > span { min-width: 22px; height: 22px; display: grid; place-items: center; color: #a99cff; border-radius: 7px; background: rgb(123 101 255 / .11); font-size: .48rem; }
.cut-project-list { max-height: 250px; display: grid; gap: 3px; padding: 6px; overflow-y: auto; }
.cut-project-list > button { min-width: 0; display: grid; grid-template-columns: 29px minmax(0, 1fr); align-items: center; gap: 8px; padding: 7px; text-align: left; border: 1px solid transparent; border-radius: 9px; background: transparent; }
.cut-project-list > button:hover, .cut-project-list > button.is-active { border-color: rgb(127 106 255 / .18); background: rgb(113 93 255 / .07); }
.cut-project-list > button > span:first-child { width: 27px; height: 27px; display: grid; place-items: center; color: #9587ef; border-radius: 8px; background: rgb(123 99 255 / .1); }
.cut-project-list svg { width: 12px; }
.cut-project-list > button > span:last-child { min-width: 0; display: grid; gap: 2px; }
.cut-project-list strong, .cut-project-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cut-project-list strong { color: #cfd2df; font-size: .55rem; }
.cut-project-list small { color: #687188; font-size: .43rem; }
.cut-project-menu > footer { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 7px; border-top: 1px solid var(--cut-line); }
.cut-project-menu > footer button { min-height: 29px; display: flex; align-items: center; justify-content: center; gap: 5px; color: #aaa4dc; border: 1px solid var(--cut-line); border-radius: 7px; background: #181b28; font-size: .47rem; }
.cut-project-menu > footer svg { width: 11px; }
.cut-appbar-center { min-width: 0; display: flex; justify-content: center; gap: 14px; color: #727b94; font-size: .59rem; }
.cut-appbar-center span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.cut-appbar-center svg { width: 12px; height: 12px; color: #53d39d; }
.cut-appbar-actions { display: flex; align-items: center; gap: 6px; }
.cut-appbar-actions > button { height: 36px; min-width: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; border: 1px solid var(--cut-line); border-radius: 10px; background: #171a27; font-size: .65rem; }
.cut-appbar-actions > button:disabled { opacity: .32; }
.cut-appbar-actions svg { width: 15px; height: 15px; }
.cut-appbar-actions .cut-export-button { padding-inline: 15px; border-color: rgb(148 92 255 / .44); background: linear-gradient(135deg, #596cff, #965cff 60%, #e259b7); box-shadow: 0 8px 24px rgb(99 78 255 / .22); font-weight: 750; }

.cut-command-deck {
  min-width: 0;
  display: grid;
  grid-template-columns: 230px minmax(320px, 1fr);
  gap: 10px 16px;
  padding: 12px 14px;
  color: var(--cut-text);
  border-inline: 1px solid var(--cut-line);
  border-bottom: 1px solid var(--cut-line);
  background: var(--cut-panel);
}
.cut-command-lead { min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 9px; align-items: start; }
.cut-command-lead > span { width: 32px; height: 32px; display: grid; place-items: center; color: var(--cut-text); border: 1px solid var(--cut-line); border-radius: 9px; background: var(--cut-panel-2); }
.cut-command-lead svg { width: 15px; }
.cut-command-lead > div { min-width: 0; display: grid; gap: 2px; }
.cut-command-lead small { color: var(--cut-muted); font-size: .43rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.cut-command-lead strong { font-size: .68rem; }
.cut-command-lead p { margin: 0; color: var(--cut-muted); font-size: .48rem; line-height: 1.4; }
.cut-command-form { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 7px; padding: 5px; border: 1px solid var(--cut-line-strong); border-radius: 12px; background: var(--cut-bg); }
.cut-command-form:focus-within { border-color: color-mix(in srgb, var(--cut-text) 38%, var(--cut-line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cut-text) 5%, transparent); }
.cut-command-form textarea { min-width: 0; width: 100%; min-height: 44px; max-height: 120px; resize: none; padding: 7px 8px; color: var(--cut-text); border: 0; outline: 0; background: transparent; font-size: .59rem; line-height: 1.45; }
.cut-command-form textarea::placeholder { color: color-mix(in srgb, var(--cut-muted) 72%, transparent); }
.cut-command-form > button { min-width: 88px; min-height: 38px; align-self: end; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 11px; color: var(--cut-bg); border: 1px solid var(--cut-text); border-radius: 9px; background: var(--cut-text); font-size: .52rem; font-weight: 720; }
.cut-command-form > button:disabled { opacity: .48; }
.cut-command-form > button svg { width: 13px; }
.cut-command-controls { grid-column: 2; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cut-command-scopes, .cut-command-examples { min-width: 0; display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.cut-command-scopes button, .cut-command-examples button { min-height: 25px; padding: 0 8px; color: var(--cut-muted); white-space: nowrap; border: 1px solid transparent; border-radius: 7px; background: transparent; font-size: .45rem; }
.cut-command-scopes { padding: 2px; border: 1px solid var(--cut-line); border-radius: 8px; background: var(--cut-bg); }
.cut-command-scopes button.is-active { color: var(--cut-text); border-color: var(--cut-line); background: var(--cut-panel-2); }
.cut-command-examples button { border-color: var(--cut-line); background: var(--cut-panel-2); }
.cut-command-examples button:hover { color: var(--cut-text); }
.cut-command-error { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; padding: 8px 9px; color: #d66d75; border: 1px solid color-mix(in srgb, #d66d75 28%, var(--cut-line)); border-radius: 9px; background: color-mix(in srgb, #d66d75 6%, var(--cut-panel)); font-size: .5rem; }
.cut-command-error svg { width: 13px; flex: 0 0 auto; }
.cut-command-plan { grid-column: 1 / -1; min-width: 0; display: grid; overflow: hidden; border: 1px solid var(--cut-line); border-radius: 12px; background: var(--cut-bg); }
.cut-command-plan > header { min-height: 47px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--cut-line); background: var(--cut-panel-2); }
.cut-command-plan > header > div { min-width: 0; display: grid; gap: 2px; }
.cut-command-plan > header small { color: var(--cut-muted); font-size: .44rem; }
.cut-command-plan > header strong { font-size: .59rem; }
.cut-command-plan > header > button { width: 27px; height: 27px; display: grid; place-items: center; color: var(--cut-muted); border: 0; border-radius: 7px; background: transparent; }
.cut-command-plan > header > button:hover { color: var(--cut-text); background: var(--cut-panel-3); }
.cut-command-plan > header svg { width: 11px; }
.cut-command-warnings { display: grid; gap: 3px; padding: 6px 9px 0; }
.cut-command-warnings p { display: flex; align-items: flex-start; gap: 6px; margin: 0; padding: 6px 7px; color: #b18445; border-radius: 7px; background: color-mix(in srgb, #b18445 7%, transparent); font-size: .47rem; line-height: 1.35; }
.cut-command-warnings svg { width: 11px; flex: 0 0 auto; margin-top: 1px; }
.cut-command-operations { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; margin: 0; padding: 8px; list-style: none; }
.cut-command-operations li { min-width: 0; display: grid; grid-template-columns: 27px minmax(0, 1fr) auto; align-items: center; gap: 7px; min-height: 47px; padding: 7px; border: 1px solid var(--cut-line); background: var(--cut-panel); }
.cut-command-operations li:first-child { border-radius: 8px 0 0 8px; }
.cut-command-operations li:last-child { border-radius: 0 8px 8px 0; }
.cut-command-operations li > span { width: 25px; height: 25px; display: grid; place-items: center; color: var(--cut-muted); border-radius: 7px; background: var(--cut-panel-2); }
.cut-command-operations li > span svg { width: 12px; }
.cut-command-operations li > div { min-width: 0; display: grid; gap: 2px; }
.cut-command-operations strong, .cut-command-operations small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cut-command-operations strong { font-size: .5rem; }
.cut-command-operations small { color: var(--cut-muted); font-size: .42rem; }
.cut-command-operations em { color: var(--cut-muted); font-size: .4rem; font-style: normal; text-transform: capitalize; }
.cut-command-operations li.is-completed > span { color: #4b9c73; background: color-mix(in srgb, #4b9c73 10%, var(--cut-panel-2)); }
.cut-command-operations li.is-failed > span { color: #d66d75; }
.cut-command-operations li.is-running > span svg { animation: cutCommandSpin .9s linear infinite; }
.cut-command-plan > footer { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 9px; border-top: 1px solid var(--cut-line); background: var(--cut-panel-2); }
.cut-command-plan > footer > span { display: inline-flex; align-items: center; gap: 5px; color: var(--cut-muted); font-size: .44rem; }
.cut-command-plan > footer > span svg { width: 11px; }
.cut-command-plan > footer > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.cut-command-plan > footer button { min-height: 30px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 9px; border-radius: 8px; font-size: .47rem; font-weight: 680; }
.cut-command-plan > footer button svg { width: 12px; }
.cut-command-secondary { color: var(--cut-text); border: 1px solid var(--cut-line); background: var(--cut-panel-3); }
.cut-command-plan > footer .cut-command-primary { color: var(--cut-bg); border: 1px solid var(--cut-text); background: var(--cut-text); }
.cut-command-plan > footer button:disabled { opacity: .38; }
@keyframes cutCommandSpin { to { transform: rotate(360deg); } }

.cut-status-rail {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 3px;
  min-height: 40px;
  padding: 4px 10px;
  overflow-x: auto;
  border-inline: 1px solid var(--cut-line);
  border-bottom: 1px solid var(--cut-line);
  background: #0b0d15;
  scrollbar-width: none;
}

.cut-status-rail > span { min-width: max-content; display: grid; grid-template-columns: 7px auto; column-gap: 7px; align-items: center; padding: 4px 10px; color: #8991a8; border-right: 1px solid var(--cut-line); }
.cut-status-rail > span:last-child { border-right: 0; }
.cut-status-rail i { grid-row: 1 / 3; width: 6px; height: 6px; border-radius: 999px; background: #68728a; }
.cut-status-rail i.is-browser { background: #7290ff; box-shadow: 0 0 0 3px rgb(114 144 255 / .09); }
.cut-status-rail i.is-ready { background: #53d39d; box-shadow: 0 0 0 3px rgb(83 211 157 / .09); }
.cut-status-rail strong { color: #b8bdcc; font-size: .56rem; font-weight: 680; }
.cut-status-rail small { font-size: .5rem; }
.cut-status-rail .cut-busy-state i { background: #ff72c1; animation: cutPulse 1s ease-in-out infinite; }

.cut-workspace {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(230px, 260px) minmax(500px, 1fr) minmax(250px, 292px);
  align-items: stretch;
  min-height: 760px;
  border: 1px solid var(--cut-line);
  border-top: 0;
  border-radius: 0 0 20px 20px;
  overflow: hidden;
  background: var(--cut-bg);
}

.cut-library-panel { min-width: 0; display: grid; grid-template-columns: 54px minmax(0, 1fr); border-right: 1px solid var(--cut-line); background: #0d0f18; }
.cut-library-tabs { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 8px 5px; border-right: 1px solid var(--cut-line); background: #090b12; }
.cut-library-tabs button { min-height: 49px; display: grid; place-items: center; gap: 2px; padding: 5px 2px; color: #6f7891; border: 0; border-radius: 9px; background: transparent; font-size: .47rem; }
.cut-library-tabs button svg { width: 16px; height: 16px; }
.cut-library-tabs button.is-active { color: #fff; background: linear-gradient(145deg, rgb(93 109 255 / .22), rgb(194 73 255 / .12)); box-shadow: inset 2px 0 #7c70ff; }
.cut-library-content { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.cut-library-content > header { flex: 0 0 auto; min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--cut-line); }
.cut-library-content > header > div { display: grid; gap: 2px; }
.cut-library-content > header small { color: #666f87; font-size: .48rem; text-transform: uppercase; letter-spacing: .12em; }
.cut-library-content > header strong { font-size: .72rem; }
.cut-library-content > header > button { width: 28px; height: 28px; display: grid; place-items: center; color: #cdd1df; border: 1px solid var(--cut-line); border-radius: 8px; background: #181b29; }
.cut-library-content > header svg { width: 13px; }
.cut-library-content > div:not(.cut-library-intro) { min-height: 0; }

.cut-library-intro { flex: 0 0 auto; padding: 10px 10px 4px; }
.cut-import-zone { width: 100%; min-height: 126px; display: grid; place-items: center; align-content: center; gap: 5px; padding: 14px; color: #aeb5c9; text-align: center; border: 1px dashed rgb(126 116 255 / .38); border-radius: 14px; background: radial-gradient(circle at 50% 20%, rgb(104 95 255 / .12), transparent 62%), #11131e; }
.cut-import-zone:hover { border-color: #8078ff; background-color: #141625; }
.cut-import-zone svg { width: 23px; height: 23px; padding: 8px; overflow: visible; color: #fff; border-radius: 10px; background: linear-gradient(135deg, #5e70ff, #985cff); }
.cut-import-zone strong { margin-top: 5px; color: #eff0f7; font-size: .68rem; }
.cut-import-zone span { font-size: .56rem; }
.cut-import-zone small { max-width: 170px; color: #626c86; font-size: .48rem; line-height: 1.4; }
.cut-asset-list { flex: 1 1 auto; display: grid; align-content: start; gap: 5px; padding: 7px 9px 12px; overflow-y: auto; scrollbar-width: thin; }
.cut-asset-card { min-width: 0; }
.cut-asset-card > button { width: 100%; min-width: 0; display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 8px; padding: 6px; text-align: left; border: 1px solid transparent; border-radius: 10px; background: transparent; }
.cut-asset-card > button:hover { border-color: var(--cut-line); background: #141725; }
.cut-asset-thumb { width: 52px; height: 42px; display: grid; place-items: center; overflow: hidden; color: #8993b0; border-radius: 7px; background: linear-gradient(135deg, #22263a, #171a29); }
.cut-asset-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cut-asset-thumb svg { width: 18px; }
.cut-asset-card button > span:last-child { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 4px; }
.cut-asset-card strong { grid-column: 1 / -1; overflow: hidden; color: #daddE8; font-size: .57rem; text-overflow: ellipsis; white-space: nowrap; }
.cut-asset-card small { color: #69728a; font-size: .48rem; }
.cut-asset-card em { color: #7c87a3; font-size: .43rem; font-style: normal; }
.cut-asset-card em.managed { color: #58d59f; }
.cut-asset-card em.ingesting { color: #f1ab67; }
.cut-empty-library { min-height: 190px; display: grid; place-items: center; align-content: center; gap: 7px; padding: 20px; color: #737c94; text-align: center; }
.cut-empty-library svg { width: 26px; height: 26px; }
.cut-empty-library strong { color: #c7cbd8; font-size: .67rem; }
.cut-empty-library p { margin: 0; font-size: .53rem; line-height: 1.5; }

.cut-panel-section { display: grid; gap: 6px; padding: 11px 10px; border-bottom: 1px solid var(--cut-line); }
.cut-panel-eyebrow { color: #68718a; font-size: .48rem; font-weight: 750; text-transform: uppercase; letter-spacing: .12em; }
.cut-preset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cut-preset-grid button { min-height: 74px; display: grid; place-items: center; align-content: center; gap: 5px; color: #9da5ba; border: 1px solid var(--cut-line); border-radius: 10px; background: #141724; font-size: .49rem; }
.cut-preset-grid button:hover { border-color: rgb(139 111 255 / .45); background: #191b2d; }
.cut-preset-grid b { color: #f0eff8; font-family: Georgia, serif; font-size: 1.15rem; }
.cut-feature-row { min-width: 0; display: grid; grid-template-columns: 29px minmax(0, 1fr) 13px; align-items: center; gap: 8px; padding: 8px; text-align: left; border: 1px solid transparent; border-radius: 10px; background: transparent; }
.cut-feature-row:hover { border-color: var(--cut-line); background: #141724; }
.cut-feature-row > svg:first-child { width: 15px; height: 15px; padding: 6px; overflow: visible; color: #b8b7ff; border-radius: 8px; background: rgb(105 111 255 / .1); }
.cut-feature-row > svg:last-child { width: 11px; color: #596179; }
.cut-feature-row > span { min-width: 0; display: grid; gap: 2px; }
.cut-feature-row strong { color: #d7d9e5; font-size: .57rem; }
.cut-feature-row small { color: #69728a; font-size: .47rem; }
.cut-audio-meter { display: grid; grid-template-columns: repeat(6, 3px) minmax(0, 1fr); align-items: center; gap: 3px; margin: 11px; padding: 12px; border: 1px solid var(--cut-line); border-radius: 12px; background: linear-gradient(135deg, rgb(57 216 195 / .07), #121520); }
.cut-audio-meter > span { width: 3px; height: 12px; border-radius: 4px; background: #4bd6c2; }
.cut-audio-meter > span:nth-child(2n) { height: 22px; }
.cut-audio-meter > span:nth-child(3n) { height: 17px; }
.cut-audio-meter > div { display: grid; gap: 2px; margin-left: 6px; }
.cut-audio-meter strong { font-size: .58rem; }
.cut-audio-meter small { color: #6e778e; font-size: .46rem; line-height: 1.35; }
.cut-audio-meter.is-recording > span { animation: cutMeter .7s ease-in-out infinite alternate; background: #ff657d; }
.cut-audio-meter.is-recording > span:nth-child(2n) { animation-delay: -.3s; }
.cut-wide-button { margin: 0 11px 7px; justify-content: center; font-size: .59rem; }
.cut-filter-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cut-filter-grid button { display: grid; gap: 5px; padding: 0 0 6px; overflow: hidden; color: #8f97ad; border: 1px solid var(--cut-line); border-radius: 8px; background: #141724; font-size: .44rem; }
.cut-filter-grid i { height: 36px; background: linear-gradient(135deg, color-mix(in srgb, var(--filter-color) 80%, #fff), color-mix(in srgb, var(--filter-color) 55%, #10121c)); }
.cut-template-list { display: grid; gap: 8px; padding: 10px; overflow-y: auto; }
.cut-template-card { position: relative; min-height: 128px; display: grid; align-content: end; gap: 3px; padding: 11px; overflow: hidden; text-align: left; border: 1px solid var(--cut-line); border-radius: 13px; background: #161928; }
.cut-template-card > span { position: absolute; inset: 0; opacity: .6; background: linear-gradient(145deg, #2b3d87, #892877); }
.cut-template-card.template-2 > span { background: linear-gradient(145deg, #554028, #173c5f); }
.cut-template-card.template-3 > span { background: linear-gradient(145deg, #13374d, #3d285e); }
.cut-template-card.template-4 > span { background: linear-gradient(145deg, #472764, #732e3c); }
.cut-template-card > span i { position: absolute; border: 1px solid rgb(255 255 255 / .2); background: rgb(255 255 255 / .08); }
.cut-template-card > span i:nth-child(1) { inset: 14px 15px 55px; }
.cut-template-card > span i:nth-child(2) { right: 21px; bottom: 58px; width: 35%; height: 14px; }
.cut-template-card > span i:nth-child(3) { left: 20px; bottom: 58px; width: 24px; height: 24px; border-radius: 99px; }
.cut-template-card strong, .cut-template-card small, .cut-template-card em { position: relative; z-index: 1; }
.cut-template-card strong { font-size: .62rem; }
.cut-template-card small { color: rgb(255 255 255 / .64); font-size: .46rem; }
.cut-template-card em { position: absolute; right: 9px; bottom: 9px; padding: 4px 6px; border: 1px solid rgb(255 255 255 / .2); border-radius: 6px; background: rgb(0 0 0 / .22); font-size: .43rem; font-style: normal; }
.cut-runtime-card { display: grid; grid-template-columns: 30px 1fr; gap: 8px; margin: 10px; padding: 10px; border: 1px solid rgb(255 163 82 / .2); border-radius: 11px; background: rgb(255 143 70 / .05); }
.cut-runtime-card.is-ready { border-color: rgb(83 211 157 / .2); background: rgb(83 211 157 / .05); }
.cut-runtime-card > span { width: 28px; height: 28px; display: grid; place-items: center; color: #ffc176; border-radius: 8px; background: rgb(255 160 70 / .1); }
.cut-runtime-card.is-ready > span { color: #58d59f; background: rgb(83 211 157 / .1); }
.cut-runtime-card svg { width: 14px; }
.cut-runtime-card > div { display: grid; gap: 3px; }
.cut-runtime-card strong { font-size: .56rem; }
.cut-runtime-card small { color: #747d94; font-size: .45rem; line-height: 1.4; }
.cut-ai-tool-list { display: grid; gap: 4px; padding: 0 9px 12px; }
.cut-ai-tool-list > button { min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px; text-align: left; border: 1px solid transparent; border-radius: 10px; background: transparent; }
.cut-ai-tool-list > button:hover { border-color: rgb(139 111 255 / .2); background: linear-gradient(135deg, rgb(92 108 255 / .08), rgb(196 72 255 / .05)); }
.cut-ai-tool-list > button > svg { width: 16px; height: 16px; padding: 7px; overflow: visible; color: #d1c2ff; border-radius: 9px; background: rgb(137 91 255 / .1); }
.cut-ai-tool-list button > span { min-width: 0; display: grid; gap: 2px; }
.cut-ai-tool-list strong { font-size: .56rem; }
.cut-ai-tool-list small { color: #6f7890; font-size: .45rem; }
.cut-ai-tool-list em { color: #8173d9; font-size: .42rem; font-style: normal; }

.cut-editor-center { min-width: 0; display: grid; grid-template-rows: minmax(390px, 1fr) 365px; overflow: hidden; background: #080910; }
.cut-stage-panel { min-width: 0; min-height: 0; display: grid; grid-template-rows: 43px minmax(0, 1fr) 52px; border-bottom: 1px solid var(--cut-line); background: radial-gradient(circle at 50% 40%, #171a2b, #090a11 62%); }
.cut-stage-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px; border-bottom: 1px solid var(--cut-line); background: rgb(10 11 18 / .75); }
.cut-stage-panel > header > div { display: flex; align-items: center; gap: 7px; }
.cut-stage-panel > header strong { font-size: .59rem; }
.cut-stage-panel > header small { color: #69728a; font-size: .48rem; }
.cut-live-dot { width: 6px; height: 6px; border-radius: 99px; background: #ff5e78; box-shadow: 0 0 0 3px rgb(255 94 120 / .08); }
.cut-stage-panel > header button { height: 27px; display: inline-flex; align-items: center; gap: 5px; padding: 0 7px; color: #858da4; border: 1px solid transparent; border-radius: 7px; background: transparent; font-size: .49rem; }
.cut-stage-panel > header button:hover { border-color: var(--cut-line); background: #171925; }
.cut-stage-panel > header svg { width: 13px; }
.cut-program-wrap { min-height: 0; display: grid; place-items: center; padding: 18px; overflow: hidden; }
.cut-program { position: relative; width: min(88%, 780px); aspect-ratio: 16 / 9; overflow: hidden; color: #f8f8fb; background: #030406; box-shadow: 0 24px 70px rgb(0 0 0 / .48), 0 0 0 1px rgb(255 255 255 / .08); isolation: isolate; }
.cut-program.ratio-9-16 { width: auto; height: min(95%, 500px); aspect-ratio: 9 / 16; }
.cut-program.ratio-1-1 { width: auto; height: min(90%, 500px); aspect-ratio: 1; }
.cut-program.ratio-4-5 { width: auto; height: min(92%, 500px); aspect-ratio: 4 / 5; }
.cut-program-wrap.is-fit .cut-program { width: 100%; height: 100%; max-width: none; object-fit: contain; }
.cut-preview-media { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; transform-origin: center; }
.cut-preview-overlay { z-index: 2; }
.cut-program-background { position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at 50% 35%, rgb(93 76 208 / .3), transparent 42%), linear-gradient(150deg, #17122d, #070810 62%); }
.cut-text-overlay { position: absolute; z-index: 4; max-width: 82%; text-align: center; font-weight: 850; line-height: 1.03; letter-spacing: -.035em; text-shadow: 0 3px 18px rgb(0 0 0 / .86); pointer-events: none; }
.cut-text-overlay span { padding: .08em .16em; box-decoration-break: clone; }
.cut-program-empty { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 8px; padding: 24px; color: #777f97; text-align: center; background: radial-gradient(circle at 50% 45%, rgb(99 87 255 / .14), transparent 42%), linear-gradient(145deg, #0b0d17, #06070b); }
.cut-program-empty > span { width: 50px; height: 50px; display: grid; place-items: center; color: #aa9dff; border: 1px solid rgb(154 117 255 / .22); border-radius: 17px; background: rgb(109 94 255 / .08); }
.cut-program-empty svg { width: 24px; }
.cut-program-empty strong { color: #e7e8f1; font-size: .82rem; }
.cut-program-empty p { max-width: 330px; margin: 0; font-size: .58rem; line-height: 1.5; }
.cut-program-empty .button { margin-top: 4px; font-size: .55rem; }
.cut-transport { min-width: 0; display: grid; grid-template-columns: repeat(5, 30px) auto minmax(70px, 1fr) auto 30px; align-items: center; justify-content: center; gap: 5px; padding: 7px 11px; border-top: 1px solid var(--cut-line); background: #0d0f18; }
.cut-transport button { width: 30px; height: 30px; display: grid; place-items: center; color: #929ab1; border: 0; border-radius: 8px; background: transparent; }
.cut-transport button:hover { color: #fff; background: #1b1e2d; }
.cut-transport .cut-play-button { color: #fff; background: linear-gradient(135deg, #5e70ff, #9b5cff); box-shadow: 0 5px 16px rgb(101 83 255 / .25); }
.cut-transport svg { width: 14px; height: 14px; }
.cut-transport time { color: #8c94aa; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .5rem; white-space: nowrap; }
.cut-transport input { min-width: 50px; width: 100%; height: 3px; accent-color: #866bff; }

.cut-properties-panel { min-width: 0; min-height: 0; display: flex; flex-direction: column; border-left: 1px solid var(--cut-line); background: #0e1019; }
.cut-properties-panel > header { flex: 0 0 auto; min-height: 54px; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 11px; border-bottom: 1px solid var(--cut-line); }
.cut-properties-panel > header > span { width: 29px; height: 29px; display: grid; place-items: center; color: #c0b5ff; border-radius: 9px; background: rgb(125 96 255 / .1); }
.cut-properties-panel > header svg { width: 14px; }
.cut-properties-panel > header > div { min-width: 0; display: grid; gap: 2px; }
.cut-properties-panel > header small { color: #656e87; font-size: .47rem; text-transform: uppercase; letter-spacing: .09em; }
.cut-properties-panel > header strong { overflow: hidden; font-size: .63rem; text-overflow: ellipsis; white-space: nowrap; }
.cut-properties-panel > header > button { width: 27px; height: 27px; display: grid; place-items: center; color: #6d758d; border: 0; border-radius: 7px; background: transparent; }
.cut-inspector-scroll { min-height: 0; flex: 1 1 auto; overflow-y: auto; scrollbar-width: thin; }
.cut-properties-empty { min-height: 230px; display: grid; place-items: center; align-content: center; gap: 8px; padding: 24px; color: #6e7790; text-align: center; }
.cut-properties-empty svg { width: 25px; }
.cut-properties-empty strong { color: #c6cad8; font-size: .66rem; }
.cut-properties-empty p { margin: 0; font-size: .5rem; line-height: 1.5; }
.cut-project-settings { display: grid; gap: 9px; padding: 12px; border-top: 1px solid var(--cut-line); }
.cut-property-group { display: grid; gap: 9px; padding: 12px; border-bottom: 1px solid var(--cut-line); }
.cut-property-group h4 { display: flex; align-items: center; gap: 6px; margin: 0; color: #a9afc1; font-size: .56rem; text-transform: uppercase; letter-spacing: .07em; }
.cut-property-group h4 svg { width: 13px; color: #8d7dff; }
.cut-project-settings label, .cut-property-group label { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; color: #8a92a8; font-size: .5rem; }
.cut-project-settings label { grid-template-columns: 1fr; }
.cut-property-group label > span { color: #646d85; font-family: ui-monospace, monospace; font-size: .45rem; }
.cut-property-group :is(input:not([type="range"]), select, textarea), .cut-project-settings select { grid-column: 1 / -1; width: 100%; min-width: 0; min-height: 31px; padding: 6px 8px; color: #d7dae6; border: 1px solid var(--cut-line); border-radius: 7px; outline: 0; background: #171a27; font-size: .55rem; }
.cut-property-group textarea { resize: vertical; line-height: 1.45; }
.cut-property-group input[type="color"] { min-height: 34px; padding: 3px; }
.cut-property-group input[type="range"] { grid-column: 1 / -1; width: 100%; height: 3px; accent-color: #826dff; }
.cut-property-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.cut-inline-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cut-inline-actions button { min-height: 31px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; color: #929bb2; border: 1px solid var(--cut-line); border-radius: 7px; background: #171a27; font-size: .5rem; }
.cut-inline-actions button.is-active { color: #d9d2ff; border-color: rgb(131 106 255 / .36); background: rgb(105 84 255 / .12); }
.cut-inline-actions svg { width: 13px; }
.cut-keyframe-button { min-height: 32px; display: flex; align-items: center; justify-content: center; gap: 6px; color: #c8c2ff; border: 1px solid rgb(134 108 255 / .25); border-radius: 8px; background: rgb(111 90 255 / .08); font-size: .49rem; }
.cut-keyframe-button svg { width: 12px; }
.cut-keyframe-list { display: grid; gap: 4px; }
.cut-keyframe-list > small { color: #646d84; font-size: .47rem; line-height: 1.5; }
.cut-keyframe-list button { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 6px; padding: 6px; color: #8b94aa; text-align: left; border: 0; border-radius: 6px; background: #161925; font-size: .46rem; }
.cut-keyframe-list i { width: 7px; height: 7px; transform: rotate(45deg); background: #9b72ff; }
.cut-keyframe-row { display: grid; grid-template-columns: minmax(0, 1fr) 25px; gap: 3px; }
.cut-keyframe-row > button:first-child { min-width: 0; }
.cut-keyframe-row > button:last-child { display: grid; grid-template-columns: 1fr; place-items: center; padding: 0; color: #6d758d; }
.cut-keyframe-row > button:last-child:hover { color: #ff8093; background: rgb(255 93 119 / .08); }
.cut-keyframe-row > button:last-child svg { width: 10px; }

.cut-timeline-panel { min-width: 0; min-height: 0; display: grid; grid-template-rows: 48px minmax(0, 1fr); overflow: hidden; background: #0b0d15; }
.cut-timeline-toolbar { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 10px; border-bottom: 1px solid var(--cut-line); background: #10121b; }
.cut-edit-tools, .cut-timeline-status { min-width: 0; display: flex; align-items: center; gap: 4px; }
.cut-track-adder { display: flex; align-items: center; gap: 4px; padding: 3px; border: 1px solid var(--cut-line); border-radius: 8px; background: #151824; }
.cut-track-adder select { width: 72px; height: 23px; padding: 0 4px; color: #8e97ae; border: 0; outline: 0; background: transparent; font-size: .46rem; }
.cut-track-adder button { height: 23px; display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; color: #c8c3ff; border: 0; border-radius: 6px; background: rgb(115 94 255 / .12); font-size: .46rem; }
.cut-track-adder svg { width: 11px; }
.cut-edit-tools > i { width: 1px; height: 20px; margin: 0 3px; background: var(--cut-line); }
.cut-edit-tools button, .cut-timeline-status button { min-width: 29px; height: 29px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 6px; color: #858ea6; border: 1px solid transparent; border-radius: 7px; background: transparent; font-size: .49rem; }
.cut-edit-tools button:hover, .cut-timeline-status button:hover, .cut-timeline-status button.is-active { color: #e4e5ed; border-color: var(--cut-line); background: #1a1d2a; }
.cut-edit-tools button:disabled { opacity: .28; }
.cut-edit-tools svg, .cut-timeline-status svg { width: 13px; height: 13px; }
.cut-timeline-status > span { color: #6b748c; font-size: .47rem; }
.cut-timeline-status label { display: flex; align-items: center; gap: 4px; padding-left: 5px; border-left: 1px solid var(--cut-line); }
.cut-timeline-status input { width: 64px; height: 3px; accent-color: #806cff; }
.cut-timeline-grid { min-width: 0; min-height: 0; display: grid; grid-template-columns: 118px minmax(0, 1fr); overflow: hidden; }
.cut-track-labels { min-width: 0; position: relative; z-index: 4; display: grid; grid-template-rows: 34px repeat(5, 54px); overflow-y: auto; border-right: 1px solid var(--cut-line); background: #0d0f17; scrollbar-width: none; }
.cut-ruler-corner { display: flex; align-items: center; padding: 0 10px; color: #555e75; border-bottom: 1px solid var(--cut-line); font-size: .44rem; font-weight: 700; letter-spacing: .1em; }
.cut-track-label { min-width: 0; display: grid; grid-template-columns: 26px minmax(0, 1fr) 19px 19px; align-items: center; gap: 5px; padding: 0 6px; border-bottom: 1px solid var(--cut-line); }
.cut-track-label.is-selected { background: linear-gradient(90deg, rgb(107 93 255 / .12), transparent); box-shadow: inset 2px 0 #8371ff; }
.cut-track-label > span { width: 24px; height: 24px; display: grid; place-items: center; color: var(--track-color); border-radius: 7px; background: color-mix(in srgb, var(--track-color) 10%, transparent); }
.cut-track-label > span svg { width: 12px; }
.cut-track-label > div { min-width: 0; display: grid; gap: 1px; }
.cut-track-label strong { overflow: hidden; color: #acb2c3; font-size: .49rem; text-overflow: ellipsis; white-space: nowrap; }
.cut-track-label small { color: #555e76; font-size: .4rem; }
.cut-track-label button { width: 18px; height: 18px; display: grid; place-items: center; padding: 0; color: #525b72; border: 0; border-radius: 5px; background: transparent; }
.cut-track-label button.is-active { color: #c2baff; background: rgb(117 94 255 / .12); }
.cut-track-label button svg { width: 10px; }
.cut-timeline-scroll { min-width: 0; min-height: 0; overflow: auto; scrollbar-color: #33384b #0c0e16; scrollbar-width: thin; }
.cut-timeline-inner { position: relative; min-height: 304px; }
.cut-ruler { position: relative; height: 34px; border-bottom: 1px solid var(--cut-line); background: #0d0f17; cursor: crosshair; }
.cut-ruler > span { position: absolute; inset-block: 0; width: 1px; color: #596177; background: rgb(167 178 218 / .12); pointer-events: none; }
.cut-ruler i { display: block; width: 4px; height: 5px; border-left: 1px solid #737c93; }
.cut-ruler time { position: absolute; top: 9px; left: 4px; font-family: ui-monospace, monospace; font-size: .39rem; }
.cut-track-lane { position: relative; height: 54px; overflow: hidden; border-bottom: 1px solid var(--cut-line); background-image: linear-gradient(90deg, rgb(160 170 215 / .035) 1px, transparent 1px); background-size: 48px 100%; cursor: crosshair; }
.cut-track-lane:nth-child(2n) { background-color: rgb(255 255 255 / .006); }
.cut-track-lane.is-selected { background-color: rgb(111 92 255 / .025); box-shadow: inset 0 0 0 1px rgb(129 109 255 / .08); }
.cut-track-lane.is-locked { opacity: .68; }
.cut-playhead { position: absolute; top: 0; bottom: 0; z-index: 8; width: 1px; pointer-events: none; background: #f4f5ff; box-shadow: 0 0 0 1px rgb(255 255 255 / .12); }
.cut-playhead i { position: absolute; top: 0; left: -5px; width: 11px; height: 10px; clip-path: polygon(0 0,100% 0,70% 100%,30% 100%); background: #f2f3fb; }
.cut-timeline-clip { position: absolute; top: 6px; bottom: 6px; z-index: 2; min-width: 18px; display: grid; grid-template-columns: 5px minmax(0, 1fr) 5px; align-items: stretch; padding: 0; overflow: hidden; color: #f7f7fb; text-align: left; border: 1px solid color-mix(in srgb, var(--clip-color) 70%, #fff); border-radius: 6px; background: linear-gradient(135deg, color-mix(in srgb, var(--clip-color) 62%, #1b1e2a), color-mix(in srgb, var(--clip-color) 36%, #11131c)); box-shadow: inset 0 1px rgb(255 255 255 / .12); cursor: grab; touch-action: none; }
.cut-timeline-clip.kind-audio { background: linear-gradient(135deg, rgb(35 130 127 / .9), rgb(27 70 79 / .9)); }
.cut-timeline-clip.kind-text { background: linear-gradient(135deg, rgb(177 52 129 / .88), rgb(91 37 101 / .9)); }
.cut-timeline-clip.kind-effect { background: linear-gradient(135deg, rgb(174 90 40 / .9), rgb(91 49 46 / .9)); }
.cut-timeline-clip.is-selected { z-index: 4; outline: 2px solid #fff; outline-offset: 1px; box-shadow: 0 0 0 4px rgb(130 108 255 / .2); }
.cut-timeline-clip.is-dragging { cursor: grabbing; opacity: .88; }
.cut-timeline-clip > span { min-width: 0; position: relative; display: grid; align-content: center; gap: 2px; padding: 2px 4px; overflow: hidden; }
.cut-timeline-clip strong { overflow: hidden; font-size: .46rem; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 3px rgb(0 0 0 / .4); }
.cut-timeline-clip small { opacity: .68; font-family: ui-monospace, monospace; font-size: .38rem; }
.cut-timeline-clip em { position: absolute; top: 2px; right: 2px; padding: 2px 3px; border-radius: 3px; background: rgb(0 0 0 / .24); font-size: .34rem; font-style: normal; }
.cut-resize-handle { position: relative; z-index: 2; background: rgb(255 255 255 / .06); cursor: ew-resize; }
.cut-resize-handle:hover { background: rgb(255 255 255 / .4); }
.cut-waveform { position: absolute; inset: 4px 0; opacity: .28; background: repeating-linear-gradient(90deg, transparent 0 2px, #fff 2px 3px); mask-image: linear-gradient(to bottom, transparent 10%, #000 10% 90%, transparent 90%); }

.cut-export-backdrop { position: fixed; inset: 0; z-index: 260; display: grid; place-items: center; padding: 20px; background: rgb(2 3 7 / .78); backdrop-filter: blur(14px); }
.cut-export-dialog { width: min(660px, 100%); max-height: min(760px, calc(100vh - 40px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; color: var(--cut-text); border: 1px solid rgb(157 128 255 / .25); border-radius: 22px; background: linear-gradient(145deg, #151827, #0d0f18 72%); box-shadow: 0 30px 100px rgb(0 0 0 / .62); }
.cut-export-dialog > header { min-height: 67px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 15px; border-bottom: 1px solid var(--cut-line); }
.cut-export-dialog > header > div { display: flex; align-items: center; gap: 10px; }
.cut-export-dialog > header > div > span { width: 39px; height: 39px; display: grid; place-items: center; color: #fff; border-radius: 12px; background: linear-gradient(135deg, #5d6fff, #9b5cff); }
.cut-export-dialog > header svg { width: 17px; }
.cut-export-dialog > header small { color: #767f98; font-size: .49rem; text-transform: uppercase; letter-spacing: .1em; }
.cut-export-dialog > header h3 { margin: 2px 0 0; font-size: .9rem; }
.cut-export-dialog > header > button { width: 31px; height: 31px; display: grid; place-items: center; color: #8c94aa; border: 1px solid var(--cut-line); border-radius: 9px; background: #191c29; }
.cut-export-body { display: grid; gap: 15px; padding: 16px; overflow-y: auto; }
.cut-export-body section { display: grid; gap: 8px; }
.cut-export-body h4 { margin: 0; color: #b5bacb; font-size: .55rem; text-transform: uppercase; letter-spacing: .09em; }
.cut-export-formats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.cut-export-formats button { min-height: 63px; display: grid; align-content: center; gap: 4px; padding: 9px; color: #a5acbe; text-align: left; border: 1px solid var(--cut-line); border-radius: 10px; background: #171a27; }
.cut-export-formats button.is-active { border-color: #806fff; background: linear-gradient(135deg, rgb(87 105 255 / .16), rgb(157 91 255 / .1)); box-shadow: inset 0 0 0 1px rgb(128 111 255 / .12); }
.cut-export-formats button:disabled { opacity: .42; }
.cut-export-formats strong { font-size: .62rem; }
.cut-export-formats small { color: #6e778f; font-size: .47rem; }
.cut-export-quality { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.cut-export-quality button { min-height: 91px; display: grid; grid-template-columns: 29px 1fr; align-content: center; align-items: center; gap: 2px 7px; padding: 10px; color: #a6adbf; text-align: left; border: 1px solid var(--cut-line); border-radius: 11px; background: #171a27; }
.cut-export-quality button.is-active { border-color: #846fff; background: linear-gradient(135deg, rgb(87 105 255 / .15), rgb(157 91 255 / .09)); }
.cut-export-quality button > span { grid-row: 1 / 4; width: 28px; height: 28px; display: grid; place-items: center; color: #bfb5ff; border-radius: 8px; background: rgb(125 98 255 / .1); }
.cut-export-quality svg { width: 14px; }
.cut-export-quality strong { font-size: .65rem; }
.cut-export-quality small { color: #707991; font-size: .45rem; }
.cut-export-quality em { color: #8a7de0; font-size: .42rem; font-style: normal; }
.cut-export-summary { display: grid; grid-template-columns: 28px 1fr; gap: 9px; padding: 10px; color: #7f879d; border: 1px solid var(--cut-line); border-radius: 10px; background: #11141f; }
.cut-export-summary > span { width: 27px; height: 27px; display: grid; place-items: center; color: #8290ff; border-radius: 8px; background: rgb(99 113 255 / .1); }
.cut-export-summary svg { width: 13px; }
.cut-export-summary p { margin: 0; font-size: .49rem; line-height: 1.55; }
.cut-export-progress { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; padding: 11px; border: 1px solid rgb(130 107 255 / .22); border-radius: 10px; background: rgb(103 84 255 / .06); }
.cut-export-progress > div { grid-column: 1 / -1; height: 6px; overflow: hidden; border-radius: 99px; background: #24283a; }
.cut-export-progress > div span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5d70ff, #a35dff, #ff5fb8); }
.cut-export-progress strong { font-size: .54rem; }
.cut-export-progress small { color: #7a839a; font-size: .47rem; }
.cut-export-ready { display: grid; grid-template-columns: 29px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 10px; border: 1px solid rgb(83 211 157 / .22); border-radius: 10px; background: rgb(83 211 157 / .05); }
.cut-export-ready > svg { width: 16px; color: #58d59f; }
.cut-export-ready > div { display: grid; gap: 2px; }
.cut-export-ready strong { font-size: .57rem; }
.cut-export-ready small { color: #768097; font-size: .46rem; }
.cut-export-ready .button { min-height: 31px; font-size: .5rem; }
.cut-export-cancelled { display: flex; align-items: center; gap: 9px; padding: 10px; color: #b4b9c9; border: 1px solid rgb(255 167 89 / .2); border-radius: 10px; background: rgb(255 154 83 / .05); }
.cut-export-cancelled > svg { width: 16px; color: #ffae6f; }
.cut-export-cancelled > span { display: grid; gap: 2px; }
.cut-export-cancelled strong { font-size: .56rem; }
.cut-export-cancelled small { color: #777f94; font-size: .46rem; }
.cut-export-dialog > footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 15px; border-top: 1px solid var(--cut-line); }
.cut-export-dialog > footer .button { min-height: 36px; font-size: .56rem; }
.cut-export-dialog > footer .cut-export-stop { color: #ffafb9; border: 1px solid rgb(255 102 126 / .28); background: rgb(255 76 108 / .08); }
.cut-export-primary { color: #fff; border-color: transparent; background: linear-gradient(135deg, #596cff, #965cff 60%, #e259b7); }
.cut-export-source article { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--cut-line); border-radius: 12px; background: #11141f; }
.cut-export-source article > span { width: 32px; height: 32px; display: grid; place-items: center; color: #ffb06c; border-radius: 9px; background: rgb(255 158 83 / .08); }
.cut-export-source article.is-ready > span { color: #56d7a0; background: rgb(72 211 154 / .08); }
.cut-export-source article svg { width: 15px; }
.cut-export-source article > div { min-width: 0; display: grid; gap: 3px; }
.cut-export-source article strong { overflow: hidden; color: var(--cut-text); font-size: .57rem; text-overflow: ellipsis; white-space: nowrap; }
.cut-export-source article em { padding: 4px 7px; color: #cabfff; border: 1px solid rgb(140 114 255 / .24); border-radius: 99px; background: rgb(125 96 255 / .08); font-size: .39rem; font-style: normal; font-weight: 800; letter-spacing: .08em; }
.cut-export-stages { display: grid; gap: 4px; margin: 0; padding: 8px; list-style: none; border: 1px solid var(--cut-line); border-radius: 11px; background: #0d1019; }
.cut-export-stages li { display: grid; grid-template-columns: 23px minmax(0, 1fr) auto; align-items: center; gap: 7px; min-height: 30px; padding: 3px 6px; color: #727b91; border-radius: 7px; }
.cut-export-stages li > span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; background: #171b27; }
.cut-export-stages li svg { width: 12px; }
.cut-export-stages li strong { font-size: .5rem; font-weight: 650; }
.cut-export-stages li em { font-size: .4rem; font-style: normal; text-transform: uppercase; letter-spacing: .07em; }
.cut-export-stages li.is-running { color: #d5d0ff; background: rgb(116 91 255 / .09); }
.cut-export-stages li.is-running svg { animation: cutSpin 1s linear infinite; }
.cut-export-stages li.is-complete { color: #82d9b2; }

@keyframes cutPulse { 50% { opacity: .35; transform: scale(.78); } }
@keyframes cutMeter { to { height: 27px; } }

@media (max-width: 1260px) {
  .cut-workspace { grid-template-columns: minmax(205px, 232px) minmax(460px, 1fr) minmax(226px, 255px); }
  .cut-appbar-center span:nth-child(3) { display: none; }
  .cut-edit-tools button span { display: none; }
}

@media (max-width: 1040px) {
  .cut-appbar { grid-template-columns: auto minmax(150px, 1fr) auto; }
  .cut-appbar-center { display: none; }
  .cut-command-deck { grid-template-columns: 1fr; }
  .cut-command-controls, .cut-command-plan, .cut-command-error { grid-column: 1; }
  .cut-command-lead { grid-template-columns: 32px minmax(0, 1fr); }
  .cut-workspace { grid-template-columns: 225px minmax(0, 1fr); }
  .cut-properties-panel { grid-column: 1 / -1; min-height: 280px; border-top: 1px solid var(--cut-line); border-left: 0; }
  .cut-inspector-scroll { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .cut-property-group { align-content: start; border-right: 1px solid var(--cut-line); }
  .cut-properties-empty { min-height: 150px; }
  .cut-project-settings { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  .page-stage .shamverse-cut-page { width: 100%; }
  .automation-product-tabs { border-radius: 14px; }
  .automation-product-tabs button { grid-template-columns: 28px 1fr; min-height: 47px; padding: 6px 8px; }
  .automation-product-tabs button > svg { width: 15px; height: 15px; padding: 6px; }
  .automation-product-tabs button small { display: none; }
  .cut-appbar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; border-radius: 15px 15px 0 0; }
  .cut-brand > div { display: none; }
  .cut-project-name { padding-inline: 4px; }
  .cut-appbar-actions > button:not(.cut-export-button) { display: none; }
  .cut-command-deck { padding: 10px; }
  .cut-command-form { grid-template-columns: minmax(0, 1fr) 42px; }
  .cut-command-form > button { min-width: 40px; padding: 0; }
  .cut-command-form > button span { display: none; }
  .cut-command-controls { align-items: stretch; flex-direction: column; }
  .cut-command-scopes, .cut-command-examples { width: 100%; }
  .cut-command-plan > footer { align-items: stretch; flex-direction: column; }
  .cut-command-plan > footer > div { justify-content: stretch; }
  .cut-command-plan > footer button { flex: 1 1 auto; }
  .cut-command-operations { grid-template-columns: 1fr; }
  .cut-command-operations li:first-child, .cut-command-operations li:last-child { border-radius: 7px; }
  .cut-status-rail > span:nth-child(2), .cut-status-rail > span:nth-child(3) { display: none; }
  .cut-workspace { display: flex; flex-direction: column; min-height: 0; border-radius: 0 0 15px 15px; overflow: visible; }
  .cut-library-panel { min-height: 310px; border-right: 0; border-bottom: 1px solid var(--cut-line); }
  .cut-library-tabs { position: sticky; top: 0; z-index: 4; }
  .cut-library-content { max-height: 310px; }
  .cut-editor-center { grid-template-rows: 390px 350px; }
  .cut-program-wrap { padding: 11px; }
  .cut-program { width: 96%; }
  .cut-transport { grid-template-columns: 26px 26px 31px 26px 26px minmax(0, 1fr); }
  .cut-transport input, .cut-transport time:last-of-type, .cut-transport button:last-child { display: none; }
  .cut-track-labels { grid-template-columns: 96px; }
  .cut-timeline-grid { grid-template-columns: 96px minmax(0, 1fr); }
  .cut-track-label { grid-template-columns: 24px 1fr 16px; padding-inline: 4px; }
  .cut-track-label button:last-child { display: none; }
  .cut-timeline-toolbar { overflow-x: auto; }
  .cut-track-adder { display: none; }
  .cut-timeline-status > span { display: none; }
  .cut-inspector-scroll { grid-template-columns: 1fr; }
  .cut-project-settings { grid-template-columns: 1fr; }
  .cut-export-formats, .cut-export-quality { grid-template-columns: 1fr; }
  .cut-export-quality button { min-height: 68px; }
  .cut-export-ready { grid-template-columns: 25px minmax(0, 1fr); }
  .cut-export-ready .button { grid-column: span 1; }
}

@media (prefers-reduced-motion: reduce) {
  .shamverse-cut-page *, .shamverse-cut-page *::before, .shamverse-cut-page *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ShamCut follows the same neutral tokens as the rest of ShamVerse in both themes. */
.page-stage .shamverse-cut-page {
  --cut-bg: var(--bg);
  --cut-panel: var(--surface);
  --cut-panel-2: var(--surface-2);
  --cut-panel-3: var(--surface-3);
  --cut-line: var(--line-soft);
  --cut-line-strong: var(--line);
  --cut-text: var(--text);
  --cut-muted: var(--muted);
  --cut-blue: var(--text);
  --cut-purple: var(--text-soft);
  --cut-pink: var(--muted);
  font-family: var(--sv2-sans);
}

.shamverse-cut-page :is(.cut-appbar, .cut-status-rail, .cut-library-panel, .cut-library-tabs, .cut-library-content, .cut-editor-center, .cut-stage-panel, .cut-stage-panel > header, .cut-properties-panel, .cut-timeline-panel, .cut-timeline-toolbar, .cut-track-labels, .cut-ruler, .cut-export-dialog, .cut-project-menu) {
  color: var(--cut-text);
  border-color: var(--cut-line);
  background: var(--cut-panel);
  box-shadow: none;
}

.shamverse-cut-page :is(.cut-library-tabs, .cut-status-rail, .cut-stage-panel > header, .cut-timeline-toolbar, .cut-ruler, .cut-track-labels, .cut-project-menu header, .cut-project-menu footer) { background: var(--cut-panel-2); }
.shamverse-cut-page :is(.cut-workspace, .cut-library-content, .cut-editor-center, .cut-timeline-panel, .cut-inspector-scroll) { background: var(--cut-bg); }
.shamverse-cut-page :is(input, select, textarea, .cut-project-name, .cut-track-adder, .cut-feature-row, .cut-asset-card, .cut-preset-grid button, .cut-template-card, .cut-project-list button, .cut-export-formats button, .cut-export-quality button, .cut-export-summary, .cut-export-dialog > header > button) {
  color: var(--cut-text);
  border-color: var(--cut-line);
  background: var(--cut-panel-2);
}

.shamverse-cut-page :is(.cut-brand small, .cut-status-rail small, .cut-panel-eyebrow, .cut-feature-row small, .cut-track-label small, .cut-timeline-status, .cut-properties-empty p, .cut-export-dialog small) { color: var(--cut-muted); }
.shamverse-cut-page :is(.cut-brand strong, .cut-project-name input, .cut-track-label strong, .cut-feature-row strong, .cut-export-dialog h3, .cut-export-dialog h4) { color: var(--cut-text); }
.cut-brand > span,
.cut-export-button,
.cut-export-primary,
.cut-export-dialog > header > div > span {
  color: var(--surface);
  border-color: var(--text);
  background: var(--text);
  box-shadow: none;
}

.shamverse-cut-page .cut-export-button,
.cut-export-dialog .cut-export-primary {
  color: #050505 !important;
}

.cut-brand em { color: var(--text-soft); border-color: var(--line); }
.cut-library-tabs button.is-active,
.cut-track-label.is-selected,
.cut-track-lane.is-selected,
.cut-export-formats button.is-active,
.cut-export-quality button.is-active {
  color: var(--text);
  border-color: var(--line);
  background: color-mix(in srgb, var(--text) 8%, var(--surface));
  box-shadow: inset 2px 0 var(--text);
}

.cut-timeline-scroll { scrollbar-color: var(--muted-2) var(--surface); }
.cut-track-lane { border-color: var(--line-soft); background-color: var(--surface); background-image: linear-gradient(90deg, color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px); }
.cut-timeline-clip { color: var(--bg); border-color: color-mix(in srgb, var(--clip-color) 70%, var(--text)); background: color-mix(in srgb, var(--clip-color) 80%, var(--surface)); box-shadow: none; }
.cut-timeline-clip.kind-audio,
.cut-timeline-clip.kind-text,
.cut-timeline-clip.kind-effect { background: color-mix(in srgb, var(--clip-color) 78%, var(--surface)); }
.cut-timeline-clip.is-selected { outline-color: var(--text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 16%, transparent); }
.cut-playhead,
.cut-playhead i { background: var(--text); }

.messenger-bot-purpose {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  color: var(--text-soft);
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-2);
}

.messenger-bot-purpose strong { font-size: .62rem; white-space: nowrap; }
.messenger-bot-purpose span { color: var(--muted); font-size: .54rem; line-height: 1.45; }
.messenger-bot-purpose button { padding: 7px 9px; color: var(--text); border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: .5rem; font-weight: 700; }
.messenger-settings-identity { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 11px; padding: 12px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--surface-2); }
.messenger-settings-identity > svg { width: 20px; height: 20px; padding: 8px; overflow: visible; border: 1px solid var(--line); border-radius: 10px; }
.messenger-settings-identity div { display: grid; gap: 3px; }
.messenger-settings-identity strong { font-size: .7rem; }
.messenger-settings-identity p { margin: 0; color: var(--muted); font-size: .58rem; line-height: 1.5; }
.messenger-memory-boundary { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: start; gap: 9px; padding: 11px; color: var(--text-soft); border: 1px solid var(--line-soft); border-radius: 11px; background: var(--surface); }
.messenger-memory-boundary > svg { width: 15px; color: var(--muted); }
.messenger-memory-boundary div { display: grid; gap: 3px; }
.messenger-memory-boundary strong { font-size: .61rem; }
.messenger-memory-boundary p { margin: 0; color: var(--muted); font-size: .54rem; line-height: 1.5; }

.pricing-plan.is-upgrade-target { outline: 2px solid var(--text); outline-offset: 3px; box-shadow: 0 0 0 7px color-mix(in srgb, var(--text) 8%, transparent); }

@media (max-width: 760px) {
  .messenger-bot-purpose { grid-template-columns: 1fr; }
  .messenger-bot-purpose button { justify-self: start; }
}

/* --------------------------------------------------------------------------
   Creator referrals: one shared web + desktop growth loop
   -------------------------------------------------------------------------- */

.auth-referral-banner {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  margin: 16px 0 0;
  padding: 11px 12px;
  color: #313927;
  border: 1px solid #d4dfa9;
  border-radius: 14px;
  background: linear-gradient(120deg, #f2f7df, #e8f1ca);
}

.auth-referral-banner > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: #53651f;
  border-radius: 11px;
  background: rgb(91 114 24 / .1);
}

.auth-referral-banner svg { width: 16px; }
.auth-referral-banner > svg { color: #6b8127; }
.auth-referral-banner > div { display: grid; gap: 3px; }
.auth-referral-banner strong { font-size: .75rem; }
.auth-referral-banner p { margin: 0; color: #68714d; font-size: .66rem; line-height: 1.4; }
.auth-referral-field label { display: flex; justify-content: space-between; }
.auth-referral-field label span { color: #8a8e87; font-size: .62rem; font-weight: 520; }
.auth-referral-field > div {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
  border: 1px solid #d9dcd7;
  border-radius: 12px;
  background: #fbfcfa;
}

.auth-referral-field > div:focus-within { border-color: #92a94a; box-shadow: 0 0 0 3px rgb(146 169 74 / .12); }
.auth-referral-field > div > span { height: 100%; display: grid; place-items: center; color: #6e7960; border-right: 1px solid #e3e5e0; }
.auth-referral-field svg { width: 14px; }
.auth-referral-field input { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }

.referral-loading-card {
  min-height: 180px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  background: var(--surface-2);
}

.referral-loading-card > span {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  color: #d7ff5f;
  border-radius: 16px;
  background: #20251b;
}

.referral-loading-card svg { width: 21px; }
.referral-loading-card > div { display: grid; gap: 5px; }
.referral-loading-card strong { font-size: .85rem; }
.referral-loading-card p { max-width: 560px; margin: 0; color: var(--muted); font-size: .7rem; line-height: 1.55; }

.referral-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(190px, .55fr);
  align-items: stretch;
  gap: 14px;
  overflow: hidden;
  padding: clamp(20px, 3vw, 34px);
  color: #f5f7f0;
  border: 1px solid rgb(255 255 255 / .11);
  border-radius: 22px;
  background:
    radial-gradient(circle at 10% 0%, rgb(215 255 95 / .13), transparent 37%),
    radial-gradient(circle at 96% 90%, rgb(128 151 255 / .12), transparent 38%),
    linear-gradient(140deg, #171a18, #0d100f 70%);
  box-shadow: 0 20px 54px rgb(0 0 0 / .16);
}

.referral-hero::before,
.referral-hero::after {
  position: absolute;
  z-index: -1;
  width: 170px;
  height: 170px;
  border: 1px solid rgb(215 255 95 / .12);
  border-radius: 50%;
  content: "";
}

.referral-hero::before { right: 9%; top: -115px; }
.referral-hero::after { right: -95px; bottom: -110px; width: 240px; height: 240px; }
.referral-hero-copy { display: grid; align-content: center; justify-items: start; gap: 11px; }
.referral-kicker { display: inline-flex; align-items: center; gap: 7px; color: #d7ff5f; font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.referral-kicker svg { width: 14px; }
.referral-hero h3 { max-width: 650px; margin: 0; color: #fff; font: 650 clamp(1.55rem, 3vw, 2.7rem)/1.02 var(--sv2-sans); letter-spacing: -.045em; }
.referral-hero p { max-width: 660px; margin: 0; color: #aeb4ac; font-size: .73rem; line-height: 1.65; }
.referral-hero p strong { color: #f1f4ea; }
.referral-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 5px; }
.referral-hero-actions .light-action { color: #11140d; border-color: #d7ff5f; background: #d7ff5f; }
.referral-credit-orbit {
  min-height: 175px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  padding: 18px;
  text-align: center;
  border: 1px solid rgb(215 255 95 / .18);
  border-radius: 18px;
  background: linear-gradient(145deg, rgb(255 255 255 / .07), rgb(215 255 95 / .035));
  backdrop-filter: blur(16px);
}

.referral-credit-orbit > span { width: 38px; height: 38px; display: grid; place-items: center; color: #d7ff5f; border-radius: 99px; background: rgb(215 255 95 / .1); }
.referral-credit-orbit svg { width: 17px; }
.referral-credit-orbit strong { margin-top: 5px; color: #fff; font-size: 1.75rem; letter-spacing: -.05em; }
.referral-credit-orbit small { color: #aeb5a9; font-size: .57rem; }
.referral-credit-orbit em { margin-top: 9px; padding: 5px 8px; color: #d7ff5f; border-radius: 99px; background: rgb(215 255 95 / .08); font-size: .52rem; font-style: normal; }

.referral-share-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, .3fr);
  gap: 10px;
  margin-top: 12px;
  padding: 13px;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: var(--surface-2);
}

.referral-share-field,
.referral-code-field { min-width: 0; display: grid; gap: 6px; }
.referral-share-panel label { color: var(--muted); font-size: .56rem; font-weight: 760; text-transform: uppercase; letter-spacing: .08em; }
.referral-share-field > div,
.referral-code-field > div { min-width: 0; min-height: 42px; display: grid; align-items: center; gap: 8px; overflow: hidden; border: 1px solid var(--line-soft); border-radius: 11px; background: var(--surface); }
.referral-share-field > div { grid-template-columns: minmax(0, 1fr) auto; }
.referral-code-field > div { grid-template-columns: minmax(0, 1fr) 37px; }
.referral-share-field code { min-width: 0; padding-left: 12px; overflow: hidden; color: var(--text-soft); font-size: .6rem; text-overflow: ellipsis; white-space: nowrap; }
.referral-share-field button,
.referral-code-field button { height: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; color: var(--text); border: 0; border-left: 1px solid var(--line-soft); background: color-mix(in srgb, var(--surface-2) 76%, #d7ff5f 5%); font-size: .6rem; font-weight: 720; }
.referral-share-panel button:hover { color: #a8c64f; }
.referral-share-panel svg { width: 13px; }
.referral-code-field strong { padding-left: 12px; font: 760 .78rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .1em; }

.referral-how-it-works { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 12px; }
.referral-how-it-works article { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 9px; padding: 13px; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--surface-2); }
.referral-how-it-works article > span { width: 29px; height: 29px; display: grid; place-items: center; color: #9bad5b; border: 1px solid color-mix(in srgb, var(--line-soft) 70%, #d7ff5f 30%); border-radius: 9px; font: 750 .55rem/1 ui-monospace, monospace; }
.referral-how-it-works article > div { display: grid; gap: 4px; }
.referral-how-it-works strong { font-size: .66rem; }
.referral-how-it-works p { margin: 0; color: var(--muted); font-size: .56rem; line-height: 1.45; }

.referral-score-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 18px; }
.referral-score-grid article { min-width: 0; display: grid; gap: 5px; padding: 14px; border: 1px solid var(--line-soft); border-radius: 15px; background: var(--surface-2); }
.referral-score-grid article.is-accent { border-color: color-mix(in srgb, var(--line-soft) 50%, #a8c64f 50%); background: color-mix(in srgb, var(--surface-2) 94%, #d7ff5f 6%); }
.referral-score-grid span { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .56rem; }
.referral-score-grid svg { width: 13px; color: #9bad5b; }
.referral-score-grid strong { font-size: 1.25rem; letter-spacing: -.035em; }
.referral-score-grid small { overflow: hidden; color: var(--muted); font-size: .5rem; text-overflow: ellipsis; white-space: nowrap; }

.referral-funnel-panel,
.referral-activity-panel,
.referral-growth-panel { margin-top: 12px; padding: 16px; border: 1px solid var(--line-soft); border-radius: 17px; background: var(--surface-2); }
.referral-funnel-panel > header,
.referral-activity-panel > header,
.referral-growth-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.referral-funnel-panel header > div,
.referral-activity-panel header > div { display: grid; gap: 3px; }
.referral-funnel-panel h3,
.referral-activity-panel h3,
.referral-growth-panel h3 { margin: 0; font-size: .79rem; }
.referral-funnel-panel header p,
.referral-activity-panel header p,
.referral-growth-panel header p { margin: 0; color: var(--muted); font-size: .56rem; line-height: 1.45; }
.referral-activity-panel > header > span { padding: 5px 8px; color: #8ea53d; border-radius: 99px; background: color-mix(in srgb, var(--surface) 88%, #d7ff5f 12%); font-size: .53rem; }
.referral-funnel-bars { display: grid; gap: 8px; }
.referral-funnel-bars article { display: grid; grid-template-columns: minmax(135px, .45fr) minmax(120px, 1fr) 42px; align-items: center; gap: 12px; }
.referral-funnel-bars article > div { display: grid; gap: 2px; }
.referral-funnel-bars strong { font-size: .6rem; }
.referral-funnel-bars small { color: var(--muted); font-size: .49rem; }
.referral-funnel-bars article > span { height: 7px; overflow: hidden; border-radius: 99px; background: color-mix(in srgb, var(--surface) 82%, #888 18%); }
.referral-funnel-bars i { display: block; height: 100%; min-width: 3px; border-radius: inherit; background: linear-gradient(90deg, #a1bd45, #d7ff5f); }
.referral-funnel-bars b { font-size: .62rem; text-align: right; }

.referral-activity-list { display: grid; gap: 6px; }
.referral-activity-list > article { display: grid; grid-template-columns: 36px minmax(120px, 1fr) minmax(130px, auto) minmax(75px, auto); align-items: center; gap: 10px; padding: 9px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--surface); }
.referral-creator-mark { width: 34px; height: 34px; display: grid; place-items: center; color: #cadc91; border-radius: 10px; background: color-mix(in srgb, var(--surface-2) 85%, #d7ff5f 15%); font-size: .58rem; font-weight: 800; }
.referral-activity-list article > div { min-width: 0; display: grid; gap: 3px; }
.referral-activity-list strong,
.referral-activity-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.referral-activity-list strong { font-size: .61rem; }
.referral-activity-list small { color: var(--muted); font-size: .49rem; }
.referral-activity-list em { padding: 5px 7px; color: #a3a9a0; border-radius: 99px; background: var(--surface-2); font-size: .49rem; font-style: normal; text-align: center; }
.referral-activity-list em.status-rewarded { color: #78952b; background: color-mix(in srgb, var(--surface-2) 88%, #d7ff5f 12%); }
.referral-activity-list em.status-attributed { color: #bd8b44; background: color-mix(in srgb, var(--surface-2) 90%, #f0ab55 10%); }
.referral-activity-list article > b { color: #8fa83d; font-size: .53rem; text-align: right; }
.referral-empty { min-height: 110px; display: grid; place-items: center; align-content: center; gap: 5px; color: var(--muted); text-align: center; }
.referral-empty svg { width: 21px; color: #8fa83d; }
.referral-empty strong { color: var(--text); font-size: .65rem; }
.referral-empty p { margin: 0; font-size: .53rem; }
.referral-activity-panel > footer { display: flex; align-items: flex-start; gap: 7px; margin-top: 11px; color: var(--muted); font-size: .5rem; line-height: 1.45; }
.referral-activity-panel > footer svg { flex: 0 0 auto; width: 13px; color: #8fa83d; }

.referral-growth-panel { background: color-mix(in srgb, var(--surface-2) 97%, #7183ff 3%); }
.referral-growth-panel > header > div:first-child { display: grid; gap: 4px; }
.referral-growth-panel > header > div:first-child > span { color: #8799ef; font-size: .51rem; font-weight: 780; text-transform: uppercase; letter-spacing: .1em; }
.referral-period-switch { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--line-soft); border-radius: 9px; background: var(--surface); }
.referral-period-switch button { min-width: 34px; height: 27px; color: var(--muted); border: 0; border-radius: 6px; background: transparent; font-size: .51rem; }
.referral-period-switch button.is-active { color: var(--text); background: var(--surface-2); box-shadow: 0 2px 8px rgb(0 0 0 / .1); }
.referral-growth-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.referral-growth-kpis article { min-width: 0; display: grid; gap: 4px; padding: 11px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--surface); }
.referral-growth-kpis span { overflow: hidden; color: var(--muted); font-size: .49rem; text-overflow: ellipsis; white-space: nowrap; }
.referral-growth-kpis strong { font-size: .9rem; }
.referral-growth-kpis small { overflow: hidden; color: #717975; font-size: .44rem; text-overflow: ellipsis; white-space: nowrap; }
.referral-growth-body { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 9px; margin-top: 9px; }
.referral-global-funnel,
.referral-channel-table { display: grid; align-content: start; gap: 7px; padding: 12px; border: 1px solid var(--line-soft); border-radius: 13px; background: var(--surface); }
.referral-growth-body h4 { margin: 0 0 3px; color: var(--muted); font-size: .53rem; text-transform: uppercase; letter-spacing: .07em; }
.referral-global-funnel article { display: grid; grid-template-columns: 75px minmax(0, 1fr) 35px; align-items: center; gap: 8px; }
.referral-global-funnel span,
.referral-global-funnel strong { font-size: .5rem; }
.referral-global-funnel strong { text-align: right; }
.referral-global-funnel article > div { height: 6px; overflow: hidden; border-radius: 99px; background: var(--surface-2); }
.referral-global-funnel i { display: block; height: 100%; min-width: 3px; border-radius: inherit; background: linear-gradient(90deg, #7085e7, #b0baff); }
.referral-channel-table article { display: grid; grid-template-columns: minmax(70px, 1fr) repeat(3, auto); align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.referral-channel-table article:last-child { border-bottom: 0; }
.referral-channel-table strong { overflow: hidden; font-size: .51rem; text-overflow: ellipsis; white-space: nowrap; }
.referral-channel-table span,
.referral-channel-table b { color: var(--muted); font-size: .46rem; font-weight: 520; }
.referral-channel-table b { color: #8799ef; }
.referral-channel-table > p { color: var(--muted); font-size: .52rem; }
.referral-metric-definitions { margin-top: 9px; padding: 9px 11px; border: 1px solid var(--line-soft); border-radius: 11px; background: var(--surface); }
.referral-metric-definitions summary { color: var(--muted); font-size: .51rem; cursor: pointer; }
.referral-metric-definitions > div { display: grid; gap: 7px; margin-top: 9px; }
.referral-metric-definitions p { display: grid; grid-template-columns: 130px 1fr; gap: 9px; margin: 0; font-size: .49rem; line-height: 1.45; }
.referral-metric-definitions strong { text-transform: capitalize; }
.referral-metric-definitions span { color: var(--muted); }
.referral-analytics-empty { min-height: 90px; display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--muted); font-size: .55rem; }
.referral-analytics-empty svg { width: 18px; color: #8799ef; }

@media (max-width: 1050px) {
  .referral-score-grid { grid-template-columns: repeat(2, 1fr); }
  .referral-growth-kpis { grid-template-columns: repeat(3, 1fr); }
  .referral-growth-body { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .auth-referral-banner { grid-template-columns: 34px minmax(0, 1fr); }
  .auth-referral-banner > svg { display: none; }
  .referral-loading-card,
  .referral-hero,
  .referral-share-panel,
  .referral-how-it-works { grid-template-columns: 1fr; }
  .referral-loading-card { justify-items: start; }
  .referral-credit-orbit { min-height: 145px; }
  .referral-score-grid,
  .referral-growth-kpis { grid-template-columns: 1fr 1fr; }
  .referral-funnel-bars article { grid-template-columns: minmax(115px, .7fr) 1fr 35px; gap: 7px; }
  .referral-activity-list > article { grid-template-columns: 36px minmax(0, 1fr); }
  .referral-activity-list em,
  .referral-activity-list article > b { grid-column: 2; justify-self: start; text-align: left; }
  .referral-growth-panel > header { align-items: flex-start; flex-direction: column; }
  .referral-channel-table article { grid-template-columns: minmax(80px, 1fr) auto; }
  .referral-channel-table article span { display: none; }
  .referral-metric-definitions p { grid-template-columns: 1fr; gap: 3px; }
}

@media (max-width: 460px) {
  .referral-score-grid,
  .referral-growth-kpis { grid-template-columns: 1fr; }
  .referral-share-field > div { grid-template-columns: minmax(0, 1fr) 40px; }
  .referral-share-field button { width: 40px; padding: 0; font-size: 0; }
  .referral-share-field button svg { width: 14px; }
}

/* Inspectable agent trajectory ------------------------------------------------ */
.active-agent-run {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  color: var(--text);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface-2);
  font: inherit;
  font-size: .72rem;
  cursor: pointer;
}

.active-agent-run:hover { border-color: var(--line); background: var(--surface-3); }
.active-agent-run > svg { width: 12px; color: var(--muted); }
.active-agent-run-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #77b785;
  box-shadow: 0 0 0 4px color-mix(in srgb, #77b785 14%, transparent);
  animation: trajectory-pulse 1.6s ease-in-out infinite;
}

.agent-trajectory {
  width: min(650px, 100%);
  overflow: hidden;
  color: var(--text-soft);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-2) 93%, transparent);
}

.agent-trajectory > summary {
  min-height: 52px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.agent-trajectory > summary::-webkit-details-marker { display: none; }
.agent-trajectory > summary:hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
.agent-trajectory > summary > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.agent-trajectory > summary strong { overflow: hidden; color: var(--text); font-size: .76rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.agent-trajectory > summary small { color: var(--muted); font-size: .62rem; }
.agent-trajectory > summary > svg { width: 13px; color: var(--muted); transition: transform .18s ease; }
.agent-trajectory[open] > summary > svg { transform: rotate(90deg); }

.agent-trajectory-state {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  color: #77b785;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.agent-trajectory-state > svg { width: 12px; }
.agent-trajectory-spinner {
  width: 11px;
  height: 11px;
  border: 1.5px solid color-mix(in srgb, var(--muted) 35%, transparent);
  border-top-color: var(--text);
  border-radius: 50%;
  animation: trajectory-spin .8s linear infinite;
}

.agent-trajectory-body { display: grid; gap: 8px; padding: 0 12px 11px 47px; }
.agent-trajectory-events { display: grid; gap: 1px; border-left: 1px solid var(--line-soft); }
.trajectory-event {
  min-width: 0;
  min-height: 39px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto 14px;
  align-items: center;
  gap: 8px;
  margin-left: -9px;
  padding: 5px 4px 5px 0;
  color: var(--text-soft);
  text-decoration: none;
  border-radius: 8px;
}

.trajectory-event:hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
.trajectory-event > svg:first-child {
  width: 17px;
  height: 17px;
  padding: 3px;
  color: var(--muted);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--surface-2);
}

.trajectory-event-copy { min-width: 0; display: grid; gap: 2px; }
.trajectory-event-copy strong,
.trajectory-event-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trajectory-event-copy strong { color: var(--text-soft); font-size: .69rem; font-weight: 570; }
.trajectory-event-copy small { color: var(--muted); font-size: .58rem; }
.trajectory-event time { color: var(--muted); font-size: .56rem; }
.trajectory-event-state { width: 13px; height: 13px; display: grid; place-items: center; color: #77b785; }
.trajectory-event-state svg { width: 11px; }
.trajectory-event.running > svg:first-child { color: var(--text); animation: trajectory-pulse 1.6s ease-in-out infinite; }
.trajectory-event.error > svg:first-child,
.trajectory-event.error .trajectory-event-state { color: #d47c73; }
.trajectory-event.warning > svg:first-child { color: #bd8b44; }
.trajectory-event.queued { opacity: .62; }

.agent-trajectory-disclosure {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 3px 0 0;
  color: var(--muted);
  font-size: .56rem;
  line-height: 1.45;
}

.agent-trajectory-disclosure svg { flex: 0 0 auto; width: 12px; margin-top: 1px; }

@keyframes trajectory-spin { to { transform: rotate(360deg); } }
@keyframes trajectory-pulse { 50% { opacity: .45; } }

@media (prefers-reduced-motion: reduce) {
  .active-agent-run-dot,
  .agent-trajectory-spinner,
  .trajectory-event.running > svg:first-child { animation: none; }
}

@media (max-width: 640px) {
  .active-agent-run { max-width: 128px; }
  .active-agent-run > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .agent-trajectory-body { padding-left: 38px; }
  .trajectory-event { grid-template-columns: 18px minmax(0, 1fr) 14px; }
  .trajectory-event time { display: none; }
}

/* Experimental Hub ---------------------------------------------------------- */
.experimental-hub-page {
  width: min(1240px, 100%);
  min-width: 0;
  display: grid;
  gap: 16px;
  margin: 0 auto;
  padding: 20px 22px 42px;
}

.experimental-hub-hero {
  min-height: 230px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 28px;
  overflow: hidden;
  padding: 34px;
  border: 1px solid var(--line-soft);
  border-radius: 26px;
  background:
    radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--text) 8%, transparent), transparent 33%),
    linear-gradient(145deg, var(--surface-2), color-mix(in srgb, var(--surface-3) 88%, var(--surface)));
  box-shadow: 0 22px 60px color-mix(in srgb, #000 12%, transparent);
}

.experimental-hub-identity { min-width: 0; display: flex; align-items: flex-start; gap: 20px; }
.experimental-hub-mark {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent);
}

.experimental-hub-mark svg { width: 25px; height: 25px; }
.experimental-hub-identity h2 { margin: 8px 0 9px; color: var(--text); font-size: clamp(2rem, 4vw, 3.6rem); font-weight: 630; letter-spacing: -.055em; line-height: .95; }
.experimental-hub-identity p { max-width: 680px; margin: 0; color: var(--text-soft); font-size: .92rem; line-height: 1.65; }

.experimental-hub-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(88px, auto));
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
}

.experimental-hub-summary article { min-height: 82px; display: grid; align-content: center; gap: 5px; padding: 14px 17px; border-right: 1px solid var(--line-soft); }
.experimental-hub-summary article:last-child { border-right: 0; }
.experimental-hub-summary strong { color: var(--text); font-size: .8rem; font-weight: 650; }
.experimental-hub-summary span { color: var(--muted); font-size: .62rem; }

.experimental-hub-notice {
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 14px;
  color: var(--text-soft);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--surface-2);
  font-size: .7rem;
  line-height: 1.5;
}

.experimental-hub-notice > svg { width: 17px; flex: 0 0 auto; color: #78a784; }
.experimental-hub-notice strong { color: var(--text); font-weight: 650; }
.experimental-tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.experimental-tool-card {
  min-width: 0;
  min-height: 270px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 24px;
  padding: 20px;
  border: 1px solid var(--line-soft);
  border-radius: 19px;
  background: var(--surface-2);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.experimental-tool-card:hover { transform: translateY(-2px); border-color: var(--line); background: color-mix(in srgb, var(--surface-3) 92%, var(--surface)); }
.experimental-tool-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.experimental-tool-icon { width: 42px; height: 42px; display: grid; place-items: center; color: var(--text); border: 1px solid var(--line-soft); border-radius: 13px; background: var(--surface); }
.experimental-tool-icon svg { width: 18px; }
.experimental-tool-index { color: var(--muted); font-size: .61rem; font-variant-numeric: tabular-nums; letter-spacing: .12em; }
.experimental-tool-copy { min-width: 0; align-self: end; }
.experimental-tool-copy small { color: var(--muted); font-size: .58rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.experimental-tool-copy h3 { margin: 7px 0 8px; color: var(--text); font-size: 1.08rem; font-weight: 650; letter-spacing: -.025em; }
.experimental-tool-copy p { margin: 0; color: var(--text-soft); font-size: .71rem; line-height: 1.55; }
.experimental-tool-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.experimental-tool-card > footer > div { min-width: 0; display: grid; grid-template-columns: 8px minmax(0, auto); align-items: center; column-gap: 7px; row-gap: 2px; }
.experimental-tool-card > footer strong { overflow: hidden; color: var(--text-soft); font-size: .63rem; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
.experimental-tool-card > footer small { grid-column: 2; color: var(--muted); font-size: .54rem; }
.experimental-status-dot { width: 7px; height: 7px; grid-row: span 2; border-radius: 50%; background: #78a784; box-shadow: 0 0 0 4px color-mix(in srgb, #78a784 12%, transparent); }
.experimental-tool-card.tone-live .experimental-status-dot { background: #70b97f; animation: trajectory-pulse 1.6s ease-in-out infinite; }
.experimental-tool-card.tone-setup .experimental-status-dot { background: #b48b50; box-shadow: 0 0 0 4px color-mix(in srgb, #b48b50 12%, transparent); }

.experimental-tool-open {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  color: var(--text);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface);
  font: inherit;
  font-size: .65rem;
  font-weight: 620;
  cursor: pointer;
}

.experimental-tool-open:hover { border-color: var(--line); background: var(--surface-3); }
.experimental-tool-open svg { width: 12px; }

.experimental-tool-frame { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.experimental-tool-content { min-width: 0; min-height: 0; }
.experimental-tool-content > * { min-width: 0; max-width: 100%; }
.experimental-tool-return {
  min-width: 0;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 22px 0;
  padding: 6px 8px;
  color: var(--muted);
  border: 1px solid var(--line-soft);
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface-2) 94%, transparent);
}

.experimental-tool-return > button { min-height: 32px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; color: var(--text); border: 0; border-radius: 9px; background: var(--surface); font: inherit; font-size: .65rem; font-weight: 620; cursor: pointer; }
.experimental-tool-return > button:hover { background: var(--surface-3); }
.experimental-tool-return > button svg { width: 14px; }
.experimental-tool-return > span { min-width: 0; display: flex; align-items: center; gap: 8px; }
.experimental-tool-return > span > svg { width: 10px; }
.experimental-tool-return strong { overflow: hidden; color: var(--text-soft); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.experimental-tool-return small { color: var(--muted); font-size: .58rem; white-space: nowrap; }

@media (max-width: 1040px) {
  .experimental-hub-hero { grid-template-columns: 1fr; align-items: start; }
  .experimental-hub-summary { justify-self: stretch; }
  .experimental-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .experimental-hub-page { padding: 12px 12px 30px; }
  .experimental-hub-hero { min-height: 0; gap: 22px; padding: 22px; border-radius: 19px; }
  .experimental-hub-identity { display: grid; gap: 14px; }
  .experimental-hub-summary { grid-template-columns: 1fr; }
  .experimental-hub-summary article { min-height: 58px; border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .experimental-hub-summary article:last-child { border-bottom: 0; }
  .experimental-tool-grid { grid-template-columns: 1fr; }
  .experimental-tool-card { min-height: 235px; }
  .experimental-tool-return { margin: 6px 12px 0; }
  .experimental-tool-return small { display: none; }
}

/* Resolved application theme -------------------------------------------------
   `data-theme` stores the user's preference. `data-color-mode` stores the
   effective palette, so System follows an OS theme change without inheriting
   legacy dark-only surfaces. */
.sv-sidebar > .side-nav {
  flex: 0 0 auto;
  min-height: max-content;
  overflow: visible;
}

.sv-sidebar > .sidebar-scroll-region {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.sv-sidebar.is-collapsed .collapsed-nav { overflow: visible; }

@media (max-width: 720px) {
  .sv-sidebar:not(.is-collapsed) { overflow: hidden; }
}

html[data-color-mode="light"] {
  --bg: #f6f6f5;
  --bg-deep: #ededeb;
  --rail: #ffffff;
  --surface: #ffffff;
  --surface-2: #f1f1ef;
  --surface-3: #e8e8e5;
  --line: #d9d9d4;
  --line-soft: #e7e7e3;
  --text: #171717;
  --text-soft: #343434;
  --muted: #696969;
  --muted-2: #777777;
  --shadow: 0 24px 70px rgb(0 0 0 / 0.12);
  --sv-studio-bg: #f6f6f5;
  --sv-studio-panel: #ffffff;
  --sv-studio-panel-2: #f1f1ef;
  --sv-studio-line: rgb(23 23 23 / 0.11);
  --sv-studio-soft: #64686b;
  scrollbar-color: #b9b9b3 #ededeb;
}

html[data-color-mode="light"] * { scrollbar-color: #b9b9b3 #ededeb; }
html[data-color-mode="light"] ::-webkit-scrollbar-track { background: #ededeb; }
html[data-color-mode="light"] ::-webkit-scrollbar-thumb {
  background: #b9b9b3;
  border-color: #ededeb;
}

html[data-color-mode="light"] :is(.sidebar-scroll-region, .collapsed-nav)::-webkit-scrollbar-thumb {
  background: #b7b7b1;
}

html[data-color-mode="light"] :is(input, textarea, select) {
  color: var(--text);
  border-color: var(--line);
  background: var(--surface-2);
}

html[data-color-mode="light"] :is(input, textarea)::placeholder { color: #858580; }
html[data-color-mode="light"] :is(input, textarea, select):disabled {
  color: var(--muted);
  border-color: var(--line-soft);
  background: var(--surface-3);
  opacity: 0.72;
}

html[data-color-mode="light"] :is(
  .side-link:hover,
  .side-link:focus-visible,
  .side-link.is-active,
  .thread-row.is-active,
  .collapsed-nav button:hover,
  .collapsed-nav button.is-active,
  .collapsed-bottom button:hover,
  .project-group.selected > .project-row .side-link,
  .thread-more:hover,
  .icon-button:hover,
  .icon-pill:hover,
  .credit-pill:hover,
  .avatar-button:hover,
  .prompt-chips button:hover,
  .scheduled-prompts button:hover
) {
  color: var(--text);
  border-color: var(--line);
  background: var(--surface-3);
}

html[data-color-mode="light"] .sidebar-reveal {
  color: var(--text-soft);
  border-color: var(--line);
  background: var(--surface-2);
}

html[data-color-mode="light"] .sidebar-reveal:hover,
html[data-color-mode="light"] .sidebar-reveal:focus-visible { background: var(--surface-3); }

html[data-color-mode="light"] :is(
  .usage-mini,
  .notify-card,
  .notification-panel,
  .thread-context-menu,
  .thread-project-list,
  .plan-pill,
  .starter-pill,
  .goal-plan-inline,
  .download-card
) {
  color: var(--text-soft);
  border-color: var(--line);
  background: var(--surface-2);
}

html[data-color-mode="light"] .thread-context-menu button:hover,
html[data-color-mode="light"] .starter-pill.is-active { background: var(--surface-3); }
html[data-color-mode="light"] .project-thread-tree,
html[data-color-mode="light"] .thread-context-menu hr { border-color: var(--line); }
html[data-color-mode="light"] .plan-pill > span:nth-child(2) { background: var(--line); }

html[data-color-mode="light"] :is(.round-tool, .tool-badge, .button, .mini-button) {
  color: var(--text);
  border-color: var(--line);
  background: var(--surface-2);
}

html[data-color-mode="light"] :is(.round-tool, .tool-badge, .button, .mini-button):hover:not(:disabled) {
  border-color: #c7c7c1;
  background: var(--surface-3);
}

html[data-color-mode="light"] :is(.button-primary, .round-tool.send) {
  color: #ffffff;
  border-color: #202020;
  background: #202020;
}

html[data-color-mode="light"] .round-tool.send:hover:not(:disabled) { background: #363636; }
html[data-color-mode="light"] .round-tool.speak-button {
  color: #164e78;
  border-color: rgb(47 132 205 / 0.28);
  background: linear-gradient(135deg, rgb(47 154 255 / 0.13), rgb(143 73 255 / 0.09));
}

html[data-color-mode="light"] .goal-toggle.is-active {
  color: var(--text);
  border-color: #bdbdb7;
  background: var(--surface-3);
}

/* Focused usage, billing, and device-permission settings ------------------- */
.settings-v3 .usage-summary,
.settings-v3 .billing-account-summary,
.settings-v3 .usage-analytics-panel,
.settings-v3 .usage-record-panel,
.settings-v3 .pricing-plans,
.settings-v3 .credit-packs,
.settings-v3 .device-permission-grid,
.settings-v3 .permission-privacy-note,
.settings-v3 .permission-browser-boundary {
  width: min(980px, 100%);
}

.settings-v3 .usage-summary .billing-balance,
.settings-v3 .billing-account-summary .billing-balance,
.settings-v3 .billing-account-summary .billing-security,
.settings-v3 .usage-explainer,
.settings-v3 .usage-record-panel,
.settings-v3 .device-permission-card,
.settings-v3 .permission-privacy-note,
.settings-v3 .permission-browser-boundary {
  color: var(--text);
  border: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
}

.settings-v3 .usage-summary .billing-balance span,
.settings-v3 .billing-account-summary .billing-balance span,
.settings-v3 .usage-explainer > span,
.settings-v3 .permission-privacy-note > span,
.settings-v3 .device-permission-card > header > span {
  color: var(--text-soft);
  border: 1px solid var(--line-soft);
  background: var(--surface-2);
}

.usage-explainer {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
}

.usage-explainer > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
}

.usage-explainer > span svg,
.permission-privacy-note > span svg,
.device-permission-card > header > span svg {
  width: 19px;
  height: 19px;
}

.usage-explainer > div {
  display: grid;
  gap: 5px;
}

.usage-explainer p,
.billing-plan-card p {
  margin: 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.55;
}

.usage-explainer > .button {
  grid-column: 2;
  justify-self: start;
}

.billing-plan-card > .button {
  justify-self: start;
}

.usage-record-panel {
  display: grid;
  gap: 14px;
  margin-top: 16px;
  padding: 18px;
  border-radius: 16px;
}

.usage-record-panel > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.usage-record-panel > header div {
  display: grid;
  gap: 4px;
}

.usage-record-panel h3,
.usage-record-panel p {
  margin: 0;
}

.usage-record-panel p {
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.5;
}

.usage-table-wrap {
  min-width: 0;
  overflow-x: auto;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
}

.usage-record-panel .usage-table {
  width: 100%;
  margin: 0;
}

.permission-privacy-note {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
  margin-bottom: 14px;
  padding: 16px;
  border-radius: 15px;
}

.permission-privacy-note > span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
}

.permission-privacy-note div {
  display: grid;
  gap: 5px;
}

.permission-privacy-note p {
  margin: 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.55;
}

.device-permission-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.device-permission-card {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 13px;
  min-height: 258px;
  padding: 16px;
  border-radius: 16px;
  transition: border-color .18s ease, background .18s ease;
}

.device-permission-card.is-enabled {
  border-color: color-mix(in srgb, var(--text-soft) 28%, var(--line-soft));
  background: color-mix(in srgb, var(--surface-2) 72%, var(--surface));
}

.device-permission-card.is-blocked {
  border-style: dashed;
}

.device-permission-card > header {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
}

.device-permission-card > header > span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
}

.device-permission-card > header > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.device-permission-card > header small {
  color: var(--muted);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.device-permission-card h3,
.device-permission-card p {
  margin: 0;
}

.device-permission-card > header p {
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.48;
}

.device-permission-card > header em {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 5px 8px;
  color: var(--text-soft);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: .62rem;
  font-style: normal;
  font-weight: 750;
}

.location-reading {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  background: var(--surface-2);
}

.location-reading > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
}

.location-reading > span svg {
  width: 16px;
  height: 16px;
}

.location-reading > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.location-reading strong,
.location-reading small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.location-reading strong {
  font-size: .72rem;
}

.location-reading small,
.device-permission-card > footer > span {
  color: var(--muted);
  font-size: .61rem;
}

.permission-error {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  padding: 9px;
  color: var(--text-soft);
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  font-size: .66rem;
  line-height: 1.45;
}

.permission-error svg {
  width: 15px;
  height: 15px;
}

.device-permission-card > footer {
  align-self: end;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 11px;
  border-top: 1px solid var(--line-soft);
}

.device-permission-card > footer > div {
  display: flex;
  gap: 6px;
}

.device-permission-card > footer .button {
  min-height: 31px;
  padding: 7px 9px;
  font-size: .65rem;
}

.permission-browser-boundary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 14px;
}

.permission-browser-boundary > div {
  min-width: 0;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
}

.permission-browser-boundary > div > svg {
  width: 18px;
  height: 18px;
}

.permission-browser-boundary > div > span {
  display: grid;
  gap: 3px;
}

.permission-browser-boundary small {
  color: var(--muted);
  font-size: .68rem;
  line-height: 1.45;
}

@media (max-width: 1040px) {
  .device-permission-grid { grid-template-columns: 1fr; }
  .device-permission-card { min-height: 0; }
}

@media (max-width: 680px) {
  .usage-record-panel > header,
  .permission-browser-boundary,
  .device-permission-card > footer {
    align-items: stretch;
    flex-direction: column;
  }
  .device-permission-card > footer > div { justify-content: flex-start; }
}

html[data-color-mode="light"] .theme-card {
  color: var(--text-soft);
  border-color: var(--line);
  background: var(--surface);
}

html[data-color-mode="light"] .theme-card.is-selected {
  color: var(--text);
  border-color: #60605c;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px #60605c;
}

html[data-color-mode="light"] .settings-v2 .settings-group > button.is-active .settings-nav-icon {
  color: #1769a7;
  background: rgb(47 155 255 / 0.12);
}

html[data-color-mode="light"] .page-stage :is(
  .automation-hero,
  .messenger-hero,
  .plugins-hero,
  .realtime-screen-hero,
  .live-vision-hero,
  .voice-page-hero,
  .creator-canvas-hero,
  .knowledge-base-hero
) {
  color: var(--text);
  border-color: var(--sv-studio-line);
  background:
    radial-gradient(circle at 88% 5%, rgb(47 155 255 / 0.09), transparent 34%),
    linear-gradient(145deg, #ffffff, #f2f2ef 76%);
  box-shadow: inset 0 1px rgb(255 255 255 / 0.8), 0 18px 42px rgb(0 0 0 / 0.07);
}

html[data-color-mode="light"] .page-stage :is(
  .automation-hero,
  .messenger-hero,
  .plugins-hero,
  .realtime-screen-hero,
  .live-vision-hero,
  .voice-page-hero,
  .creator-canvas-hero,
  .knowledge-base-hero
)::after {
  background-image: linear-gradient(rgb(20 25 28 / 0.025) 1px, transparent 1px), linear-gradient(90deg, rgb(20 25 28 / 0.025) 1px, transparent 1px);
}

html[data-color-mode="light"] .page-stage :is(
  .automation-command-strip,
  .plugin-command-strip,
  .realtime-command-strip,
  .live-vision-readiness,
  .voice-page-command-strip,
  .creator-canvas-command-strip,
  .knowledge-command-strip,
  .settings-control-strip,
  .remote-command-strip
) > article > span:first-child {
  color: #2e607f;
  border-color: var(--sv-studio-line);
  background: var(--surface-2);
}

html[data-color-mode="light"] :is(.composer-assist, .goal-planner-card) {
  color: var(--text);
  border-color: var(--line);
  background: color-mix(in srgb, var(--surface) 98%, transparent);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.14);
}

html[data-color-mode="light"] .composer-assist > header,
html[data-color-mode="light"] .composer-assist-option:hover,
html[data-color-mode="light"] .composer-assist-option.is-active,
html[data-color-mode="light"] .composer-assist-option > span,
html[data-color-mode="light"] .goal-planner-mark,
html[data-color-mode="light"] .automation-run-history article > span {
  color: var(--text-soft);
  border-color: var(--line);
  background: var(--surface-2);
}

html[data-color-mode="light"] .composer-assist kbd {
  color: var(--text);
  border-color: var(--line);
  background: var(--surface-3);
}

html[data-color-mode="light"] :is(
  .composer-assist > header small,
  .composer-assist-option small,
  .composer-assist-option em,
  .composer-assist-empty,
  .goal-planner-card > header small,
  .goal-planner-kicker,
  .goal-planner-input span,
  .goal-planner-card > footer,
  .automation-run-history article small,
  .automation-run-history article em
) { color: var(--muted); }

html[data-color-mode="light"] .goal-planner-input input,
html[data-color-mode="light"] .goal-planner-presets button {
  color: var(--text);
  border-color: var(--line);
  background: var(--surface-2);
}

html[data-color-mode="light"] .goal-planner-flow > span { color: var(--text-soft); }
html[data-color-mode="light"] .goal-planner-flow i { border-color: var(--line); }
html[data-color-mode="light"] .goal-planner-flow em,
html[data-color-mode="light"] .automation-run-history article { border-color: var(--line-soft); }

@media (prefers-reduced-motion: reduce) {
  .experimental-tool-card,
  .experimental-tool-card.tone-live .experimental-status-dot { animation: none; transition: none; }
}

/* Lean composer goal and neutral permission controls ------------------------ */
.goal-popup-wrap { position: relative; }

.goal-toggle.is-active {
  color: var(--text);
  border-color: var(--line);
  background: var(--surface-3);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent);
}

.goal-compact-menu {
  right: auto;
  left: 50%;
  width: min(340px, calc(100vw - 28px));
  gap: 0;
  padding: 0;
  overflow: hidden;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
  box-shadow: 0 20px 55px color-mix(in srgb, #000 34%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 4%, transparent);
  transform: translateX(-50%);
}

.goal-compact-menu > header {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px 8px 12px;
  border-bottom: 1px solid var(--line-soft);
}

.goal-compact-menu > header > div { display: flex; align-items: center; gap: 8px; }
.goal-compact-menu > header > div > svg { width: 14px; color: var(--muted); }
.goal-compact-menu > header strong { color: var(--text); font-size: .73rem; font-weight: 630; }
.goal-compact-menu > header > button {
  width: 28px;
  min-height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--muted);
  border-radius: 8px;
}

.goal-compact-menu > header > button:hover { color: var(--text); background: var(--surface-3); }
.goal-compact-menu > header > button svg { width: 12px; }
.goal-compact-menu > p { margin: 12px 12px 9px; color: var(--muted); font-size: .64rem; line-height: 1.45; }
.goal-compact-menu > label { margin: 0 12px 6px; color: var(--text-soft); font-size: .62rem; font-weight: 600; }
.task-composer .goal-compact-menu > textarea {
  width: calc(100% - 24px);
  min-height: 74px;
  max-height: 130px;
  margin: 0 12px;
  padding: 9px 10px;
  resize: vertical;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: 0;
  background: var(--surface);
  font: inherit;
  font-size: .7rem;
  line-height: 1.45;
}

.task-composer .goal-compact-menu > textarea:focus { border-color: color-mix(in srgb, var(--text) 34%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 4%, transparent); }
.task-composer .goal-compact-menu > textarea::placeholder { color: var(--muted); }
.goal-compact-menu > footer { display: flex; align-items: center; justify-content: flex-end; gap: 7px; padding: 10px 12px 12px; }
.goal-compact-menu > footer > button {
  min-height: 31px;
  padding: 6px 10px;
  color: var(--text-soft);
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: transparent;
  font-size: .64rem;
  font-weight: 610;
}

.goal-compact-menu > footer > button:hover:not(:disabled) { color: var(--text); border-color: var(--line); background: var(--surface-3); }
.goal-compact-menu > footer > button.goal-apply { color: var(--surface); border-color: var(--text); background: var(--text); }
.goal-compact-menu > footer > button:disabled { opacity: .38; cursor: not-allowed; }

.permission-pill,
.permission-pill:hover,
.permission-pill:focus-visible { color: var(--text-soft); }

.permission-menu {
  right: 0;
  left: auto;
  width: min(318px, calc(100vw - 28px));
  gap: 3px;
  padding: 6px;
  border-color: var(--line);
  background: var(--surface-2);
  box-shadow: 0 20px 55px color-mix(in srgb, #000 34%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 4%, transparent);
}

.permission-menu button {
  min-height: 64px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 9px;
  padding: 8px;
  color: var(--text-soft);
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
}

.permission-menu button:hover { color: var(--text); border-color: var(--line-soft); background: var(--surface-3); }
.permission-menu button.selected { color: var(--text); border-color: var(--line); background: var(--surface-3); }
.permission-mode-icon { width: 30px; height: 30px; display: grid; place-items: center; color: var(--muted); border: 1px solid var(--line-soft); border-radius: 8px; background: var(--surface); }
.permission-mode-icon svg { width: 13px; }
.permission-mode-copy { min-width: 0; display: grid; gap: 3px; }
.permission-mode-copy strong { color: inherit; font-size: .69rem; font-weight: 630; }
.permission-menu button .permission-mode-copy small {
  grid-column: auto;
  margin: 0;
  color: var(--muted);
  font-size: .59rem;
  font-weight: 450;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}

.permission-mode-check { width: 16px; height: 16px; display: grid; place-items: center; color: var(--text-soft); }
.permission-mode-check svg { width: 12px; }

@media (max-width: 620px) {
  .goal-compact-menu { right: auto; left: 0; transform: none; }
  .permission-menu { right: auto; left: 0; }
}

/* 2026 native tools — task-first browser/computer use and a real local shell. */
.embedded-browser-preview {
  grid-template-rows: 52px 42px 52px auto minmax(0, 1fr) auto;
  --native-blue: #6fb5ff;
  --native-green: #61d394;
}

.browser-agent-workspace {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  overflow: hidden;
  background: #080a0d;
}

.browser-agent-workspace .browser-viewport {
  position: relative;
  border-right: 1px solid var(--line-soft, #292c31);
  background: #0a0c0f;
}

.browser-agent-workspace .browser-viewport img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: default;
}

.browser-agent-workspace.is-takeover .browser-viewport img { cursor: crosshair; }
.browser-viewport-hint {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  color: #d9e2ec;
  border: 1px solid rgb(255 255 255 / .1);
  border-radius: 8px;
  background: rgb(10 12 15 / .82);
  box-shadow: 0 8px 24px rgb(0 0 0 / .3);
  font-size: .65rem;
  backdrop-filter: blur(12px);
}
.browser-viewport-hint svg { width: 13px; height: 13px; color: var(--native-blue); }

.browser-agent-run-rail,
.agent-run-rail {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 13px;
  padding: 15px;
  overflow: auto;
  background: color-mix(in srgb, var(--surface, #111317) 96%, #07101a);
}
.browser-agent-run-rail > header,
.agent-run-rail > header { min-height: 38px; display: flex; align-items: center; gap: 9px; }
.browser-agent-run-rail > header > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: rgb(111 181 255 / .11); }
.browser-agent-run-rail > header i { width: 7px; height: 7px; border-radius: 50%; background: #69717c; }
.browser-agent-run-rail > header i.is-live { background: var(--native-blue); box-shadow: 0 0 0 5px rgb(111 181 255 / .12); animation: pulse 1.2s ease-in-out infinite; }
.browser-agent-run-rail > header i.is-done { background: var(--native-green); }
.browser-agent-run-rail > header div,
.agent-run-rail > header div { min-width: 0; display: grid; gap: 2px; }
.browser-agent-run-rail small,
.agent-run-rail small { display: block; color: #7f8b98; font-size: .58rem; font-weight: 760; line-height: 1.25; text-transform: uppercase; letter-spacing: .09em; }
.browser-agent-run-rail strong,
.agent-run-rail strong { display: block; color: var(--text, #f2f4f7); font-size: .74rem; line-height: 1.35; }
.browser-agent-run-rail > p,
.agent-run-rail > p { margin: 0; color: var(--muted, #9aa3ae); font-size: .67rem; line-height: 1.55; }
.browser-agent-run-rail ol,
.agent-run-rail ol { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.browser-agent-run-rail li,
.agent-run-rail li { display: grid; grid-template-columns: 19px minmax(0, 1fr); align-items: center; gap: 7px; min-height: 31px; color: #7f8995; font-size: .64rem; }
.browser-agent-run-rail li i,
.agent-run-rail li i { width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid #343a42; border-radius: 50%; font-style: normal; }
.browser-agent-run-rail li i svg,
.agent-run-rail li i svg { width: 10px; height: 10px; }
.browser-agent-run-rail li.completed,
.agent-run-rail li.done,
.agent-run-rail li.completed { color: #d7dee7; }
.browser-agent-run-rail li.completed i,
.agent-run-rail li.done i,
.agent-run-rail li.completed i { color: #07110b; border-color: var(--native-green); background: var(--native-green); }
.browser-agent-events { display: grid; gap: 7px; padding-top: 10px; border-top: 1px solid var(--line-soft, #292c31); }
.browser-agent-events span { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 7px; color: #9aa4b0; font-size: .59rem; line-height: 1.35; }
.browser-agent-events time { color: #66717e; }

.agent-browser-dock { gap: 8px; padding: 10px 12px; }
.agent-browser-dock .browser-command { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 9px; padding: 0; border: 0; }
.agent-browser-dock .browser-command > svg { width: 16px; color: var(--native-blue); }
.agent-browser-dock textarea {
  min-height: 40px;
  max-height: 100px;
  padding: 10px 11px;
  resize: vertical;
  color: var(--text, #f2f4f7);
  border: 1px solid var(--line, #34383f);
  border-radius: 10px;
  outline: 0;
  background: var(--surface-2, #1b1e23);
  font: inherit;
  font-size: .72rem;
}
.agent-browser-dock textarea:focus { border-color: rgb(111 181 255 / .65); box-shadow: 0 0 0 3px rgb(111 181 255 / .09); }
.computer-utility-strip button.is-highlighted { color: #d9ecff; background: rgb(111 181 255 / .1); }
.computer-utility-strip button svg { width: 12px; height: 12px; vertical-align: -2px; }

.native-computer-sessionbar { display: flex; align-items: end; gap: 8px; }
.native-computer-sessionbar label { min-width: 190px; display: grid; flex: 1; gap: 5px; color: var(--muted, #969da8); font-size: .66rem; }
.native-computer-sessionbar select { width: 100%; min-height: 37px; padding: 0 30px 0 10px; color: var(--text, #f5f7fa); border: 1px solid var(--line, #34373d); border-radius: 9px; background: var(--surface-2, #1b1c1f); }
.native-computer-task { grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; padding: 10px; border: 1px solid color-mix(in srgb, #55d6be 30%, var(--line, #34373d)); border-radius: 14px; background: color-mix(in srgb, #55d6be 5%, var(--surface-2, #1b1c1f)); }
.native-task-mark { width: 32px; height: 32px; display: grid; place-items: center; color: #06110d; border-radius: 10px; background: #75dfc4; }
.native-task-mark svg { width: 15px; height: 15px; }
.native-computer-task textarea { min-height: 48px; }
.native-computer-model { grid-column: 2 / -1; color: var(--muted, #969da8); font-size: .64rem; }
.native-computer-model summary { cursor: pointer; user-select: none; }
.native-computer-model > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 12px; padding: 10px 0 2px; }
.native-computer-workspace { min-height: 320px; display: grid; grid-template-columns: minmax(0, 1fr) 250px; overflow: hidden; border: 1px solid var(--line, #34373d); border-radius: 14px; background: #080a0d; }
.native-computer-workspace .native-computer-stage { min-height: 320px; border: 0; border-right: 1px solid var(--line, #34373d); border-radius: 0; }
.native-computer-stage img { cursor: default; }
.native-computer-stage.is-takeover img { cursor: crosshair; }
.native-computer-stage > span { display: inline-flex; align-items: center; gap: 6px; }
.native-computer-stage > span svg { width: 12px; height: 12px; color: #55d6be; }
.agent-run-rail > header { justify-content: space-between; }
.agent-run-rail > header > span { color: #73808d; font-size: .57rem; }
.native-takeover { display: flex; align-items: center; gap: 9px; }
.native-takeover > button { min-height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; color: var(--muted, #969da8); border: 1px solid var(--line, #34373d); border-radius: 9px; background: transparent; font-size: .65rem; }
.native-takeover > button svg { width: 13px; height: 13px; }
.native-takeover .native-computer-quick { min-width: 0; flex: 1; }

.computer-terminal-preview { grid-template-rows: 52px 42px minmax(0, 1fr); }
.computer-terminal-panel {
  min-height: 0;
  display: grid;
  grid-template-rows: 39px minmax(0, 1fr) 48px 23px;
  overflow: hidden;
  color: #cccccc;
  background: #181818;
  font-family: Consolas, "Cascadia Mono", "SFMono-Regular", monospace;
}
.integrated-terminal-tabs { min-width: 0; display: flex; align-items: center; gap: 2px; padding: 0 7px; border-bottom: 1px solid #292929; background: #1f1f1f; }
.integrated-terminal-tabs button,
.integrated-terminal-tabs label { height: 31px; display: inline-flex; align-items: center; gap: 6px; color: #969696; border: 0; background: transparent; font: 11px/1 Consolas, "Cascadia Mono", monospace; }
.integrated-terminal-tabs button { padding: 0 8px; cursor: pointer; }
.integrated-terminal-tabs button:hover { color: #fff; background: #2a2d2e; }
.integrated-terminal-tabs button.is-active { position: relative; color: #fff; }
.integrated-terminal-tabs button.is-active::after { position: absolute; inset: auto 5px 0; height: 1px; content: ""; background: #2aaaff; }
.integrated-terminal-tabs button svg { width: 13px; height: 13px; }
.integrated-terminal-tabs button i { width: 6px; height: 6px; border-radius: 50%; background: #51c780; }
.integrated-terminal-tabs > span { min-width: 0; flex: 1; overflow: hidden; color: #767676; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.integrated-terminal-tabs label > span { color: #6f6f6f; }
.integrated-terminal-tabs select { height: 25px; padding: 0 22px 0 7px; color: #bababa; border: 1px solid #343434; border-radius: 3px; background: #242424; font: inherit; }
.native-terminal-screen { position: relative; min-height: 0; overflow: hidden; background: #0c0c0c; }
.native-terminal-screen pre { width: 100%; height: 100%; margin: 0; padding: 12px 14px 30px; overflow: auto; color: #e7e7e7; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 4; font: 13px/1.48 Consolas, "Cascadia Mono", "SFMono-Regular", monospace; scrollbar-color: #424242 #0c0c0c; }
.native-terminal-screen pre:focus { outline: none; }

.self-capture-evidence {
  margin: 10px 12px;
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 12px;
  background: rgb(10 12 13 / 0.72);
  overflow: hidden;
}
.self-capture-evidence > summary {
  min-height: 46px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto 16px;
  gap: 9px;
  align-items: center;
  padding: 8px 11px;
  color: #f3f5f4;
  cursor: pointer;
  list-style: none;
}
.self-capture-evidence > summary::-webkit-details-marker { display: none; }
.self-capture-evidence > summary > svg { width: 18px; height: 18px; color: #a5dfc2; }
.self-capture-evidence > summary span { display: grid; min-width: 0; gap: 2px; }
.self-capture-evidence > summary strong { font-size: 12px; }
.self-capture-evidence > summary small { color: #98a19d; font-size: 10px; }
.self-capture-evidence > summary em { min-width: 24px; padding: 3px 7px; border-radius: 999px; background: #213a30; color: #bcecd3; font: 700 10px/1 sans-serif; text-align: center; }
.self-capture-evidence > summary > svg:last-child { width: 13px; height: 13px; color: #98a19d; transition: transform 160ms ease; }
.self-capture-evidence[open] > summary > svg:last-child { transform: rotate(90deg); }
.self-capture-evidence > p { margin: 0; padding: 0 12px 12px 50px; color: #89918e; font-size: 11px; }
.self-capture-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 210px); gap: 8px; overflow-x: auto; padding: 0 10px 10px; }
.self-capture-strip a { display: grid; grid-template-rows: 84px auto; overflow: hidden; border: 1px solid rgb(255 255 255 / 0.1); border-radius: 9px; background: #171a1a; color: #f5f7f6; text-decoration: none; }
.self-capture-strip img { width: 100%; height: 84px; object-fit: cover; object-position: top left; background: #0c0c0c; }
.self-capture-strip span { display: grid; gap: 2px; padding: 7px 8px; }
.self-capture-strip strong { overflow: hidden; color: #e7ebe9; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.self-capture-strip small { color: #8e9793; font-size: 9px; }

.agent-tool-groups > header { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 14px; }
.agent-tool-groups > header div { display: grid; gap: 2px; }
.agent-tool-groups > header small { color: var(--muted, #6d746f); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.agent-tool-groups > header h3 { margin: 0; }
.agent-tool-groups > header > span { color: #3d6e59; font-size: 11px; font-weight: 750; }
.agent-tool-group-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.agent-tool-group-grid article { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: start; min-height: 104px; padding: 12px; border: 1px solid #dce2de; border-radius: 12px; background: #f6f8f6; }
.agent-tool-group-grid article > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; background: #e2ebe6; color: #38604f; }
.agent-tool-group-grid article > span svg { width: 17px; height: 17px; }
.agent-tool-group-grid article div { display: grid; min-width: 0; gap: 4px; }
.agent-tool-group-grid article strong { color: #18201c; font-size: 12px; }
.agent-tool-group-grid article small { color: #68706c; font-size: 10px; line-height: 1.35; }
.agent-tool-group-grid article em { color: #3d6e59; font-size: 9px; font-style: normal; font-weight: 750; text-transform: uppercase; }
.agent-tool-group-grid article.is-disabled { filter: grayscale(.75); opacity: .58; }

@media (max-width: 720px) {
  .agent-tool-group-grid { grid-template-columns: minmax(0, 1fr); }
  .self-capture-strip { grid-auto-columns: minmax(140px, 70vw); }
}
.terminal-boot { height: 100%; min-height: 290px; display: grid; place-items: center; align-content: center; gap: 9px; color: #8d8d8d; text-align: center; }
.terminal-boot > span { color: #7dd3fc; font-size: 30px; }
.terminal-boot strong { color: #e4e4e4; font: 14px/1.2 system-ui, sans-serif; }
.terminal-boot small { max-width: 460px; font: 11px/1.5 system-ui, sans-serif; }
.terminal-inline-error { margin: 0; padding: 8px 12px; color: #ff9b9b; background: #321b1b; font: 11px/1.4 system-ui, sans-serif; }
.native-terminal-input { min-height: 48px; display: grid; grid-template-columns: 18px minmax(0, 1fr) 36px; gap: 5px; align-items: center; padding: 5px 8px 6px 13px; border-top: 1px solid #262626; background: #0c0c0c; }
.native-terminal-input .terminal-prompt { color: #50c878; font-size: 15px; font-weight: 800; }
.native-terminal-input input { width: 100%; height: 35px; padding: 0 5px; color: #f1f1f1; border: 0; border-radius: 0; outline: 0; background: transparent; caret-color: #fff; font: 13px/1.3 Consolas, "Cascadia Mono", monospace; }
.native-terminal-input:focus-within { box-shadow: inset 2px 0 #007acc; }
.native-terminal-input > button { width: 32px; height: 32px; display: grid; place-items: center; color: #fff; border: 0; border-radius: 4px; background: #0e639c; }
.native-terminal-input > button svg { width: 14px; height: 14px; }
.native-terminal-input.is-disabled { grid-template-columns: 18px minmax(0, 1fr); opacity: .6; }
.terminal-statusbar { min-width: 0; display: flex; align-items: center; gap: 13px; padding: 0 9px; color: #fff; background: #007acc; font: 10px/1 Consolas, "Cascadia Mono", monospace; }
.terminal-statusbar span { display: inline-flex; align-items: center; gap: 4px; }
.terminal-statusbar svg { width: 10px; height: 10px; }
.terminal-statusbar button { margin-left: auto; padding: 0; color: #fff; border: 0; background: transparent; font: inherit; cursor: pointer; }
.terminal-review-card { position: absolute; z-index: 2; right: 14px; bottom: 14px; left: 14px; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; align-items: center; gap: 9px; padding: 11px; color: #e7e7e7; border: 1px solid #8b6c27; border-radius: 6px; background: #252017; box-shadow: 0 16px 45px rgb(0 0 0 / .5); font: 11px/1.4 system-ui, sans-serif; }
.terminal-review-card > span { width: 28px; height: 28px; display: grid; place-items: center; color: #f1c75b; }
.terminal-review-card > span svg { width: 17px; height: 17px; }
.terminal-review-card > div { min-width: 0; display: grid; gap: 2px; }
.terminal-review-card code { overflow: hidden; color: #fff; text-overflow: ellipsis; white-space: nowrap; font: 11px Consolas, monospace; }
.terminal-review-card small { color: #bdb59f; }
.terminal-review-card button { min-height: 28px; padding: 0 10px; color: #ddd; border: 1px solid #525252; border-radius: 4px; background: #2f2f2f; font-size: 10px; }
.terminal-review-card button.is-primary { color: #fff; border-color: #0e639c; background: #0e639c; }

@media (max-width: 900px) {
  .browser-agent-workspace,
  .native-computer-workspace { grid-template-columns: 1fr; }
  .browser-agent-run-rail,
  .agent-run-rail { display: none; }
  .native-computer-workspace .native-computer-stage { border-right: 0; }
}

@media (max-width: 680px) {
  .native-computer-sessionbar { align-items: stretch; flex-wrap: wrap; }
  .native-computer-sessionbar label { flex-basis: 100%; }
  .native-computer-task { grid-template-columns: 30px minmax(0, 1fr); }
  .native-computer-task > button,
  .native-computer-model { grid-column: 1 / -1; }
  .native-computer-model > div { grid-template-columns: 1fr; }
  .integrated-terminal-tabs > span,
  .integrated-terminal-tabs label { display: none; }
  .terminal-review-card { grid-template-columns: 28px minmax(0, 1fr); }
  .terminal-review-card button { grid-column: auto; }
  .terminal-statusbar span:nth-of-type(2) { display: none; }
}

.messenger-platform-chip.is-coworker { color: #b2f3df; border-color: color-mix(in srgb, #55d7b0 36%, var(--line)); background: color-mix(in srgb, #0a5e4e 27%, var(--surface)); }
html[data-color-mode="light"] .messenger-platform-chip.is-coworker { color: #087966; background: #e4f7f0; }

.page-stage .task-composer.is-coworker {
  border-color: color-mix(in srgb, #4fc9a7 42%, var(--line));
  background:
    radial-gradient(circle at 92% -18%, color-mix(in srgb, #36d1b0 15%, transparent), transparent 42%),
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 88%, #0b5549 12%), color-mix(in srgb, var(--surface) 94%, #163d61 6%));
  box-shadow: 0 18px 58px color-mix(in srgb, #032a25 34%, transparent), inset 0 1px 0 color-mix(in srgb, #b8ffea 10%, transparent);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.page-stage .task-composer.is-coworker .composer-input-shell {
  margin: -2px -2px 1px;
  padding: 7px 8px 5px;
  border: 1px solid color-mix(in srgb, #63d2b3 26%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, #071d1b 58%, transparent);
}

.page-stage .task-composer.is-coworker textarea::placeholder { color: color-mix(in srgb, #b9d8cf 62%, var(--muted)); }
.page-stage .task-composer.is-coworker:focus-within { border-color: color-mix(in srgb, #66e0bc 70%, var(--line)); box-shadow: 0 20px 64px color-mix(in srgb, #063e37 42%, transparent), 0 0 0 3px color-mix(in srgb, #56d3ad 10%, transparent); }

html[data-color-mode="light"] .page-stage .task-composer.is-coworker {
  border-color: color-mix(in srgb, #087966 40%, var(--line));
  background: linear-gradient(145deg, #effbf6, #edf6fb);
  box-shadow: 0 18px 52px rgb(29 91 78 / .14), inset 0 1px 0 #fff;
}

html[data-color-mode="light"] .page-stage .task-composer.is-coworker .composer-input-shell {
  border-color: color-mix(in srgb, #0c8d73 20%, var(--line));
  background: rgb(255 255 255 / .62);
}

.composer-agent-runtime {
  position: relative;
  z-index: 12;
  margin: 2px 10px 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}

.composer-runtime-summary {
  width: 100%;
  min-height: 34px;
  display: grid;
  grid-template-columns: 8px auto minmax(0, 1fr) 14px;
  align-items: center;
  gap: 8px;
  padding: 4px 3px;
  color: var(--text-soft);
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.composer-runtime-summary strong { font-size: .63rem; font-weight: 720; }
.composer-runtime-summary small { overflow: hidden; color: var(--muted); font-size: .57rem; text-overflow: ellipsis; white-space: nowrap; }
.composer-runtime-summary > svg { width: 12px; color: var(--muted); transition: transform .18s ease; }
.composer-agent-runtime:has(.composer-runtime-panel) .composer-runtime-summary > svg { transform: rotate(180deg); }
.composer-runtime-pulse { width: 7px; height: 7px; border-radius: 50%; background: #63d2a2; box-shadow: 0 0 0 4px color-mix(in srgb, #63d2a2 12%, transparent); }
.composer-agent-runtime.is-off .composer-runtime-pulse { background: var(--muted); box-shadow: none; }

.composer-runtime-panel {
  position: absolute;
  right: 0;
  bottom: 38px;
  width: min(560px, calc(100vw - 34px));
  overflow: hidden;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 96%, #0b725c 4%);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .32);
}

.composer-runtime-panel > header,
.composer-runtime-panel > header > div,
.composer-runtime-panel > header > div > div { display: flex; align-items: center; }
.composer-runtime-panel > header { justify-content: space-between; gap: 12px; padding: 13px 14px; border-bottom: 1px solid var(--line-soft); }
.composer-runtime-panel > header > div { gap: 9px; }
.composer-runtime-panel > header > div > span { width: 29px; height: 29px; display: grid; place-items: center; color: #80e1bc; border-radius: 9px; background: color-mix(in srgb, #54c79d 12%, transparent); }
.composer-runtime-panel > header > div > span svg { width: 15px; }
.composer-runtime-panel > header > div > div { align-items: flex-start; flex-direction: column; gap: 1px; }
.composer-runtime-panel > header strong { font-size: .75rem; }
.composer-runtime-panel > header small { color: var(--muted); font-size: .58rem; }
.composer-runtime-panel > header > button { width: 28px; height: 28px; display: grid; place-items: center; color: var(--muted); border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.composer-runtime-panel > header > button:hover { color: var(--text); background: var(--surface-2); }
.composer-runtime-panel > header > button svg { width: 13px; }

.composer-runtime-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px; }
.composer-runtime-grid article { min-width: 0; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 1px 8px; padding: 10px; border: 1px solid var(--line-soft); border-radius: 11px; background: var(--surface-2); }
.composer-runtime-grid article > span { grid-row: 1 / 3; width: 24px; height: 24px; display: grid; place-items: center; color: #79d8b3; border-radius: 7px; background: color-mix(in srgb, #54c79d 10%, transparent); }
.composer-runtime-grid article svg { width: 12px; }
.composer-runtime-grid article b { overflow: hidden; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.composer-runtime-grid article small { overflow: hidden; color: var(--muted); font-size: .54rem; text-overflow: ellipsis; white-space: nowrap; }
.composer-runtime-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 13px 12px; border-top: 1px solid var(--line-soft); }
.composer-runtime-footer label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.composer-runtime-footer label > span { display: grid; gap: 1px; }
.composer-runtime-footer label b { font-size: .63rem; }
.composer-runtime-footer label small,
.composer-runtime-footer > span { color: var(--muted); font-size: .54rem; }
.composer-runtime-footer > span { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.composer-runtime-footer > span svg { width: 11px; }
.composer-runtime-footer input { accent-color: #4ec394; }

/* Runtime telemetry inside each finished or active agent turn. */
.agent-runtime-telemetry { display: grid; gap: 8px; padding: 9px; border: 1px solid color-mix(in srgb, #5dca9f 23%, var(--line-soft)); border-radius: 11px; background: color-mix(in srgb, #52bd94 4%, var(--surface)); }
.agent-runtime-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); gap: 5px; }
.agent-runtime-metrics article { min-width: 0; display: grid; gap: 2px; padding: 7px; border-radius: 8px; background: color-mix(in srgb, var(--surface-2) 92%, transparent); }
.agent-runtime-metrics small { color: #69c9a5; font-size: .5rem; font-weight: 720; text-transform: uppercase; letter-spacing: .07em; }
.agent-runtime-metrics strong { overflow: hidden; color: var(--text); font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.agent-runtime-metrics span { overflow: hidden; color: var(--muted); font-size: .5rem; text-overflow: ellipsis; white-space: nowrap; }
.agent-context-meter { height: 2px; overflow: hidden; margin-top: 3px; border-radius: 99px; background: var(--line-soft); }
.agent-context-meter b { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #4ec394, #e0bc62); }
.agent-visible-plan { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.agent-visible-plan li { min-width: 0; display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: center; gap: 6px; color: var(--muted); }
.agent-visible-plan li > span { width: 15px; height: 15px; display: grid; place-items: center; border: 1px solid var(--line-soft); border-radius: 50%; }
.agent-visible-plan li > span svg { width: 9px; color: #67cc9f; }
.agent-visible-plan li.in_progress > span > i { width: 5px; height: 5px; border-radius: 50%; background: #e0bc62; box-shadow: 0 0 0 3px color-mix(in srgb, #e0bc62 15%, transparent); }
.agent-visible-plan li b { overflow: hidden; font-size: .58rem; font-weight: 560; text-overflow: ellipsis; white-space: nowrap; }
.agent-research-proof { display: flex; align-items: center; gap: 7px; padding: 7px 8px; color: #dff9ef; border: 1px solid color-mix(in srgb, #5dca9f 21%, var(--line-soft)); border-radius: 8px; background: color-mix(in srgb, #5dca9f 7%, transparent); }
.agent-research-proof > svg { flex: 0 0 auto; width: 13px; color: #69c9a5; }
.agent-research-proof > span { min-width: 0; display: grid; gap: 2px; }
.agent-research-proof b { font-size: .58rem; }
.agent-research-proof small { overflow: hidden; color: var(--muted); font-size: .5rem; text-overflow: ellipsis; white-space: nowrap; }
.agent-runtime-telemetry > footer { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: .5rem; }
.agent-runtime-telemetry > footer svg { width: 10px; }

@media (max-width: 700px) {
  .composer-runtime-grid { grid-template-columns: 1fr; }
  .composer-runtime-footer { align-items: flex-start; flex-direction: column; }
  .agent-runtime-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agent-runtime-metrics article:last-child { grid-column: 1 / -1; }
}

/* Task management: compact, functional overflow menu and saved task views. */
.task-view-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  margin: 1px 4px 7px;
  padding: 3px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
}

.task-view-switch button {
  min-width: 0;
  min-height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 6px;
  color: var(--muted);
  border: 0;
  border-radius: 7px;
  background: transparent;
  font-size: .65rem;
  font-weight: 620;
}

.task-view-switch button:hover,
.task-view-switch button.is-active {
  color: var(--text);
  background: var(--surface-3);
}

.task-view-switch button.is-active {
  box-shadow: inset 0 0 0 1px var(--line-soft), 0 2px 8px rgb(0 0 0 / .12);
}

.task-view-switch button span {
  min-width: 15px;
  padding: 1px 4px;
  color: var(--muted);
  border-radius: 99px;
  background: var(--surface);
  font-size: .56rem;
}

.thread-row.is-favorite > .side-link > svg { color: #d8bd71; }
.thread-row.is-archived { opacity: .8; }
.thread-row.is-archived:hover { opacity: 1; }

.thread-more {
  display: grid;
  place-items: center;
  padding: 0;
}

.thread-more svg {
  width: 16px;
  height: 16px;
}

.thread-more[aria-expanded="true"] {
  color: var(--text);
  background: var(--surface-3);
}

.thread-context-menu {
  position: fixed !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 120;
  width: 248px !important;
  max-height: min(410px, calc(100vh - 16px));
  display: grid;
  gap: 2px;
  overflow: auto;
  padding: 6px !important;
  color: var(--text);
  border: 1px solid var(--line) !important;
  border-radius: 13px !important;
  background: color-mix(in srgb, var(--surface) 97%, #000 3%) !important;
  box-shadow: 0 22px 58px rgb(0 0 0 / .38), inset 0 1px 0 rgb(255 255 255 / .03) !important;
  backdrop-filter: blur(20px);
}

.thread-context-menu > button,
.thread-project-list > button {
  width: 100%;
  min-height: 39px !important;
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 9px !important;
  padding: 6px 9px !important;
  color: var(--text-soft) !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  font-size: .76rem !important;
  text-align: left !important;
}

.thread-context-menu > button:hover,
.thread-context-menu > button.is-selected,
.thread-project-list > button:hover,
.thread-project-list > button.is-selected {
  color: var(--text) !important;
  background: var(--surface-3) !important;
}

.thread-menu-icon,
.thread-menu-state {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: var(--muted);
}

.thread-menu-icon svg,
.thread-menu-state svg {
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
}

.thread-menu-label {
  min-width: 0;
  display: grid;
  gap: 1px;
  overflow: hidden;
  color: inherit;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thread-menu-label strong { color: inherit; font: inherit; }
.thread-menu-label small { color: var(--muted); font-size: .61rem; }
.thread-context-menu .danger-text,
.thread-context-menu .danger-text .thread-menu-icon { color: var(--danger) !important; }
.thread-context-menu hr { margin: 4px 2px !important; border-color: var(--line-soft) !important; }

.thread-menu-header {
  min-height: 38px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 0 4px 4px;
  border-bottom: 1px solid var(--line-soft);
}

.thread-menu-header button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--muted);
  border: 0;
  border-radius: 7px;
  background: transparent;
}

.thread-menu-header button:hover { color: var(--text); background: var(--surface-3); }
.thread-menu-header button svg { width: 14px; transform: rotate(180deg); }
.thread-menu-header strong { font-size: .74rem; }

.thread-project-list {
  display: grid !important;
  gap: 2px !important;
  max-height: 245px;
  overflow: auto;
  margin: 0 !important;
  padding: 3px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.thread-action-dialog {
  width: min(460px, calc(100vw - 28px));
  display: grid;
  gap: 16px;
  padding: 20px;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 28px 90px rgb(0 0 0 / .48);
}

.thread-action-dialog > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.thread-action-dialog > header > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.thread-dialog-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--text-soft);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface-2);
}

.thread-dialog-icon svg { width: 16px; }
.thread-action-dialog header small { display: block; margin-bottom: 2px; color: var(--muted); font-size: .62rem; }
.thread-action-dialog h2 { margin: 0; font-size: 1.08rem; letter-spacing: -.025em; }
.thread-action-dialog > p { margin: 0; color: var(--muted); font-size: .77rem; line-height: 1.55; }
.project-dialog-note { margin: -4px auto 2px; max-width: 360px; color: var(--muted); font-size: .76rem; line-height: 1.5; text-align: center; }
.thread-action-dialog .modal-close { position: static; flex: 0 0 auto; }
.thread-action-dialog form { display: grid; gap: 8px; }
.thread-action-dialog form label { color: var(--text-soft); font-size: .68rem; font-weight: 650; }

.thread-action-dialog form input,
.thread-share-link input {
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 0 11px;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 9px;
  outline: 0;
  background: var(--surface-2);
  font: inherit;
  font-size: .78rem;
}

.thread-action-dialog form input:focus,
.thread-share-link input:focus { border-color: var(--text-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 9%, transparent); }
.thread-action-dialog .dialog-actions { justify-content: flex-end; margin-top: 7px; }

.thread-share-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}

.thread-share-link button {
  min-width: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-3);
}

.thread-share-link button svg { width: 14px; }
.danger-dialog .thread-dialog-icon { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, var(--line)); }
.danger-action { color: #fff; border-color: color-mix(in srgb, var(--danger) 70%, #000); background: color-mix(in srgb, var(--danger) 82%, #111); }
.danger-action:hover { background: var(--danger); }

@media (max-width: 520px) {
  .thread-context-menu { width: min(248px, calc(100vw - 16px)) !important; }
  .thread-action-dialog { padding: 17px; }
  .thread-share-link { grid-template-columns: 1fr; }
  .thread-share-link button { min-height: 40px; }
}

/* Workspace chrome: one Settings destination, header model routing, centered composer. */
.sidebar-bottom .bottom-tools {
  display: block;
  padding: 0 8px 2px;
}

.sidebar-settings-button {
  width: 100%;
  min-height: 40px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 10px;
  padding: 0 11px;
  color: var(--text-soft);
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
  font: inherit;
  font-size: .76rem;
  font-weight: 650;
  text-align: left;
}

.sidebar-settings-button:hover {
  color: var(--text);
  border-color: var(--line);
  background: var(--surface-3);
}

.sidebar-settings-button svg { width: 15px; }
.sidebar-settings-button svg:last-child { width: 12px; justify-self: end; }

.topbar-primary {
  min-width: 0;
  display: flex;
  align-items: center;
}

.topbar-model-control {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: .66rem;
  font-weight: 650;
}

.topbar-model-control > span {
  letter-spacing: .02em;
}

.topbar-model-select {
  width: clamp(210px, 25vw, 310px);
  height: 36px;
  min-width: 0;
  padding: 0 32px 0 12px;
  color: var(--text);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  outline: none;
  background-color: color-mix(in srgb, var(--surface-2) 90%, transparent);
  font: inherit;
  font-size: .76rem;
  font-weight: 600;
  text-overflow: ellipsis;
  cursor: pointer;
}

.topbar-model-select:hover { border-color: var(--line); background-color: var(--surface-3); }
.topbar-model-select:focus-visible { border-color: var(--text-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 9%, transparent); }
.topbar-model-select optgroup,
.topbar-model-select option { color: var(--text); background: var(--surface); }

.page-stage .home-center {
  width: min(900px, 100%);
  max-width: 900px;
  justify-items: center;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 42px);
  box-sizing: border-box;
}

.page-stage .home-center .workspace-composer {
  width: min(780px, 100%);
  max-width: 780px;
  justify-self: center;
  margin-inline: auto;
}

.page-stage .home-center .prompt-chips {
  width: 100%;
  justify-content: center;
}

@media (max-width: 680px) {
  .topbar-model-control > span { display: none; }
  .topbar-model-select { width: min(46vw, 220px); height: 34px; padding-inline: 9px 26px; font-size: .7rem; }
  .page-stage .home-center { padding-inline: 8px; }
}

/* Light-mode states that are intentionally inverse in the dark palette. */
html[data-color-mode="light"] .agents-directory-toolbar button.selected,
html[data-color-mode="light"] .plugin-view-toggle button.is-active,
html[data-color-mode="light"] .plugin-category-filters button.is-active {
  color: #ffffff;
  border-color: #242424;
  background: #242424;
}

html[data-color-mode="light"] .plugin-view-toggle button:not(.is-active),
html[data-color-mode="light"] .plugin-category-filters button:not(.is-active),
html[data-color-mode="light"] .library-layout-toggle {
  color: var(--text-soft);
  border-color: var(--line);
  background: var(--surface-2);
}

html[data-color-mode="light"] .library-layout-toggle button:hover,
html[data-color-mode="light"] .library-layout-toggle button.is-active {
  color: var(--text);
  background: var(--surface-3);
}

/* Progressive Film Director — chat-native cinematic production */
.cinema-setup-wrap { position: relative; }
.cinema-setup-toggle.is-active { color: var(--text); border-color: var(--line); background: var(--surface-3); }
.cinema-setup-menu {
  right: auto;
  left: 50%;
  width: min(680px, calc(100vw - 28px));
  max-height: min(680px, calc(100vh - 120px));
  display: grid;
  gap: 12px;
  padding: 14px;
  overflow: auto;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-2);
  box-shadow: 0 24px 70px rgb(0 0 0 / 38%);
  transform: translateX(-38%);
}
.cinema-setup-menu > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cinema-setup-menu > header > div { display: grid; gap: 2px; }
.cinema-setup-menu > header small { color: var(--muted); font-size: .56rem; letter-spacing: .08em; text-transform: uppercase; }
.cinema-setup-menu > header strong { font-size: .82rem; }
.cinema-setup-menu > header button { width: 28px; height: 28px; display: grid; place-items: center; color: var(--muted); border-radius: 8px; }
.cinema-setup-menu > header button:hover { color: var(--text); background: var(--surface-3); }
.cinema-setup-menu fieldset { min-width: 0; display: grid; gap: 6px; margin: 0; padding: 10px; border: 1px solid var(--line-soft); border-radius: 12px; }
.cinema-setup-menu legend { padding: 0 5px; color: var(--muted); font-size: .59rem; font-weight: 700; }
.cinema-deliverable-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cinema-deliverable-options legend { grid-column: 1 / -1; }
.cinema-deliverable-options label { min-width: 0; cursor: pointer; }
.cinema-deliverable-options input { position: absolute; opacity: 0; pointer-events: none; }
.cinema-deliverable-options label > span { min-height: 76px; display: grid; align-content: start; gap: 3px; padding: 9px; color: var(--text-soft); border: 1px solid var(--line-soft); border-radius: 10px; background: var(--surface); }
.cinema-deliverable-options label.selected > span,
.cinema-deliverable-options label:has(input:checked) > span { color: var(--text); border-color: color-mix(in srgb, var(--text) 30%, var(--line)); background: var(--surface-3); }
.cinema-deliverable-options svg { width: 15px; margin-bottom: 3px; color: var(--muted); }
.cinema-deliverable-options b { font-size: .65rem; }
.cinema-deliverable-options small { color: var(--muted); font-size: .53rem; line-height: 1.35; }
.cinema-setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cinema-check { min-width: 0; display: grid; grid-template-columns: 16px 1fr; align-items: start; gap: 8px; padding: 7px; cursor: pointer; }
.cinema-check input { margin: 2px 0 0; accent-color: var(--text); }
.cinema-check span { min-width: 0; display: grid; gap: 2px; }
.cinema-check b { font-size: .63rem; }
.cinema-check small { color: var(--muted); font-size: .54rem; line-height: 1.35; }
.cinema-field { display: grid; gap: 5px; color: var(--muted); font-size: .56rem; }
.task-composer .cinema-field select,
.task-composer .cinema-field input { width: 100%; min-height: 34px; padding: 0 9px; color: var(--text); border: 1px solid var(--line); border-radius: 9px; outline: 0; background: var(--surface); font: inherit; font-size: .63rem; box-sizing: border-box; }
.cinema-setup-menu > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cinema-setup-menu > footer > span { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .55rem; }
.cinema-setup-menu > footer svg { width: 12px; }
.cinema-setup-menu > footer .button { flex: 0 0 auto; min-height: 34px; font-size: .62rem; }

.cinema-project {
  --cinema-line: color-mix(in srgb, var(--text) 13%, transparent);
  --cinema-soft: color-mix(in srgb, var(--surface-3) 82%, transparent);
  width: 100%;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  border: 1px solid var(--cinema-line);
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% -8%, color-mix(in srgb, #7c3aed 15%, transparent), transparent 34%),
    radial-gradient(circle at 8% 0%, color-mix(in srgb, #0ea5e9 10%, transparent), transparent 30%),
    color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: 0 18px 60px rgb(0 0 0 / 16%);
}

.cinema-project.is-running { border-color: color-mix(in srgb, #8b5cf6 30%, var(--cinema-line)); }

.cinema-project-boot {
  min-height: 164px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 16px;
  padding: 24px;
}

.cinema-project-boot-mark,
.cinema-project-title > span {
  display: grid;
  place-items: center;
  color: #f5f3ff;
  background: linear-gradient(145deg, #4338ca, #7c3aed 58%, #c026d3);
  box-shadow: 0 10px 24px rgb(91 33 182 / 28%);
}

.cinema-project-boot-mark { width: 46px; height: 46px; border-radius: 14px; }
.cinema-project-boot-mark svg { width: 21px; }
.cinema-project-boot small { color: var(--muted); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; }
.cinema-project-boot h3 { margin: 3px 0 4px; font-size: 1.05rem; }
.cinema-project-boot p { margin: 0; color: var(--text-soft); font-size: .78rem; }
.cinema-project-boot.is-error { grid-template-columns: 46px minmax(0, 1fr); }
.cinema-project-boot.is-error .cinema-project-boot-mark { background: linear-gradient(145deg, #7f1d1d, #be123c); }
.cinema-project-boot .button { width: max-content; min-height: 32px; margin-top: 12px; font-size: .62rem; }

.cinema-project-header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 19px 20px 16px;
  border-bottom: 1px solid var(--cinema-line);
}

.cinema-project-title { min-width: 0; display: flex; align-items: center; gap: 12px; }
.cinema-project-title > span { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; }
.cinema-project-title > span svg { width: 18px; }
.cinema-project-title > div { min-width: 0; }
.cinema-project-title small { display: block; color: var(--muted); font-size: .6rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.cinema-project-title h3 { max-width: 480px; margin: 2px 0 0; overflow: hidden; font-size: .93rem; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.cinema-project-title p { max-width: 520px; margin: 3px 0 0; overflow: hidden; color: var(--muted); font-size: .54rem; text-overflow: ellipsis; white-space: nowrap; }

.cinema-project-metrics { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; }
.cinema-project-metrics > span,
.cinema-project-metrics > button {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  color: var(--text-soft);
  border: 1px solid var(--cinema-line);
  border-radius: 9px;
  background: var(--cinema-soft);
  font: inherit;
  font-size: .65rem;
}
.cinema-project-metrics b { color: var(--text); }
.cinema-project-metrics > button { color: #fca5a5; cursor: pointer; }
.cinema-project-metrics svg { width: 13px; }

.cinema-mode-switch {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 9px 20px;
  border-bottom: 1px solid var(--cinema-line);
}
.cinema-mode-switch > span { margin-right: 6px; color: var(--muted); font-size: .64rem; font-weight: 700; }
.cinema-mode-switch button {
  min-height: 27px;
  padding: 0 9px;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: .63rem;
  cursor: pointer;
}
.cinema-mode-switch button:hover { color: var(--text); background: var(--cinema-soft); }
.cinema-mode-switch button.selected { color: var(--text); border-color: var(--cinema-line); background: var(--surface-3); }

.cinema-stage-rail {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(8, minmax(118px, 1fr));
  gap: 0;
  margin: 0;
  padding: 15px 14px;
  overflow-x: auto;
  list-style: none;
  border-bottom: 1px solid var(--cinema-line);
  scrollbar-width: thin;
}
.cinema-stage-rail li {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  color: var(--muted);
}
.cinema-stage-rail li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -3px;
  width: 8px;
  height: 1px;
  background: var(--cinema-line);
}
.cinema-stage-rail li > span:first-child { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid var(--cinema-line); border-radius: 9px; background: var(--cinema-soft); }
.cinema-stage-rail li > span svg { width: 14px; }
.cinema-stage-rail li > div { min-width: 0; display: grid; }
.cinema-stage-rail small { font-size: .52rem; line-height: 1; opacity: .64; }
.cinema-stage-rail strong { overflow: hidden; font-size: .65rem; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.cinema-stage-rail em { overflow: hidden; font-size: .54rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.cinema-stage-rail li.ready { color: var(--text); }
.cinema-stage-rail li.ready > span:first-child { color: #bbf7d0; border-color: rgb(34 197 94 / 28%); background: rgb(34 197 94 / 10%); }
.cinema-stage-rail li.skipped { color: var(--muted); opacity: .7; }
.cinema-stage-rail li.running,
.cinema-stage-rail li.awaiting_approval { color: var(--text); }
.cinema-stage-rail li.running > span:first-child { color: #c4b5fd; border-color: rgb(139 92 246 / 34%); background: rgb(139 92 246 / 12%); }
.cinema-stage-rail li.awaiting_approval > span:first-child { color: #fde68a; border-color: rgb(245 158 11 / 30%); background: rgb(245 158 11 / 10%); }
.cinema-stage-rail li.stale { color: #fdba74; }
.cinema-stage-rail > li > svg:last-child { width: 13px; }

.cinema-stage-spinner {
  width: 13px;
  height: 13px;
  display: inline-block;
  border: 1.5px solid color-mix(in srgb, var(--text) 20%, transparent);
  border-top-color: #a78bfa;
  border-radius: 50%;
  animation: cinema-spin .85s linear infinite;
}
.cinema-stage-dot { width: 6px; height: 6px; display: inline-block; background: color-mix(in srgb, var(--text) 20%, transparent); border-radius: 50%; }
@keyframes cinema-spin { to { transform: rotate(360deg); } }

.cinema-stage-stack { display: grid; gap: 12px; padding: 14px; }
.cinema-stage-card { min-width: 0; overflow: hidden; border: 1px solid var(--cinema-line); border-radius: 13px; background: color-mix(in srgb, var(--surface-2) 88%, transparent); }
.cinema-stage-card.running { border-color: color-mix(in srgb, #8b5cf6 34%, var(--cinema-line)); }
.cinema-stage-card.skipped { opacity: .78; }
.cinema-stage-reference-tool { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--cinema-line); background: color-mix(in srgb, var(--cinema-soft) 72%, transparent); }
.cinema-stage-reference-tool .button { flex: 0 0 auto; min-height: 31px; padding-inline: 10px; cursor: pointer; font-size: .58rem; }
.cinema-stage-reference-tool .button svg { width: 13px; }
.cinema-stage-reference-tool small { color: var(--muted); font-size: .54rem; line-height: 1.4; }
.cinema-stage-heading { display: grid; grid-template-columns: 34px minmax(0, 1fr) 24px; align-items: center; gap: 9px; padding: 13px 14px; border-bottom: 1px solid var(--cinema-line); }
.cinema-stage-number { color: var(--muted); font-size: .62rem; font-variant-numeric: tabular-nums; }
.cinema-stage-heading small { display: block; color: var(--muted); font-size: .56rem; line-height: 1.2; }
.cinema-stage-heading h4 { margin: 1px 0 0; font-size: .8rem; }
.cinema-stage-state { display: grid; place-items: center; color: #c4b5fd; }
.cinema-stage-state svg { width: 14px; }

.cinema-inline-progress { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 10px 14px 12px; overflow: hidden; color: var(--text-soft); font-size: .64rem; }
.cinema-inline-progress i { position: absolute; inset: auto 0 0; width: var(--progress); height: 2px; background: linear-gradient(90deg, #2563eb, #7c3aed, #db2777); transition: width .25s ease; }
.cinema-inline-progress b { color: var(--muted); font-size: .58rem; }

.cinema-plan-card blockquote { margin: 0; padding: 18px 18px 11px; color: var(--text); font-size: 1rem; font-weight: 590; line-height: 1.45; }
.cinema-director-decision { display: grid; grid-template-columns: 28px 1fr; gap: 9px; margin: 0 14px 12px; padding: 11px; border: 1px solid color-mix(in srgb, #8b5cf6 22%, var(--cinema-line)); border-radius: 10px; background: color-mix(in srgb, #6d28d9 8%, transparent); }
.cinema-director-decision > span { width: 28px; height: 28px; display: grid; place-items: center; color: #c4b5fd; border-radius: 8px; background: rgb(124 58 237 / 13%); }
.cinema-director-decision svg { width: 14px; }
.cinema-director-decision strong { font-size: .66rem; }
.cinema-director-decision p { margin: 2px 0 0; color: var(--text-soft); font-size: .7rem; line-height: 1.5; }
.cinema-arc { display: grid; grid-template-columns: 100px 1fr; gap: 10px; margin: 0; padding: 10px 15px; border-block: 1px solid var(--cinema-line); font-size: .66rem; }
.cinema-arc span { color: var(--text-soft); }

.cinema-scene-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--cinema-line); }
.cinema-scene-list article { min-width: 0; display: grid; grid-template-columns: 27px 1fr; gap: 8px; padding: 12px; background: var(--surface-2); }
.cinema-scene-list article > span { color: var(--muted); font-size: .56rem; }
.cinema-scene-list strong { display: block; font-size: .7rem; }
.cinema-scene-list small { display: block; margin-top: 2px; color: var(--muted); font-size: .56rem; }
.cinema-scene-list p { margin: 6px 0 0; color: var(--text-soft); font-size: .64rem; line-height: 1.45; }
.cinema-assumptions { padding: 10px 14px; border-top: 1px solid var(--cinema-line); }
.cinema-assumptions summary { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: .62rem; cursor: pointer; }
.cinema-assumptions svg { width: 13px; }
.cinema-assumptions ul { margin: 9px 0 0 22px; padding: 0; color: var(--text-soft); font-size: .65rem; }

.cinema-reference-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 11px; }
.cinema-reference-grid figure { min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--cinema-line); border-radius: 10px; background: var(--surface); }
.cinema-image-button { width: 100%; aspect-ratio: 16 / 10; display: block; padding: 0; overflow: hidden; border: 0; background: #09090b; cursor: zoom-in; }
.cinema-image-button img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .25s ease; }
.cinema-image-button:hover img { transform: scale(1.025); }
.cinema-reference-grid figcaption { display: grid; gap: 2px; padding: 8px 9px; }
.cinema-reference-grid strong { overflow: hidden; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.cinema-reference-grid small { overflow: hidden; color: var(--muted); font-size: .52rem; text-overflow: ellipsis; white-space: nowrap; }
.cinema-identity-locks { display: flex; gap: 6px; padding: 0 11px 11px; overflow-x: auto; }
.cinema-identity-locks > span { flex: 0 0 auto; min-height: 28px; display: flex; align-items: center; gap: 5px; padding: 0 8px; border: 1px solid var(--cinema-line); border-radius: 8px; color: var(--text-soft); background: var(--cinema-soft); font-size: .58rem; }
.cinema-identity-locks svg { width: 11px; color: #c4b5fd; }
.cinema-identity-locks small { color: var(--muted); }
.cinema-stage-empty { display: flex; align-items: center; gap: 7px; margin: 0; padding: 12px 14px; color: var(--muted); font-size: .62rem; }
.cinema-stage-empty svg { width: 13px; }

.cinema-audio-assets { display: grid; gap: 1px; background: var(--cinema-line); }
.cinema-audio-assets article { min-width: 0; display: grid; grid-template-columns: 30px minmax(0, 1fr) 28px; align-items: center; gap: 9px; padding: 10px 12px; background: var(--surface-2); }
.cinema-audio-assets article > span { width: 30px; height: 30px; display: grid; place-items: center; color: #c4b5fd; border: 1px solid var(--cinema-line); border-radius: 9px; background: var(--cinema-soft); }
.cinema-audio-assets svg { width: 13px; }
.cinema-audio-assets article > div { min-width: 0; display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); align-items: center; gap: 9px; }
.cinema-audio-assets strong { overflow: hidden; font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.cinema-audio-assets small { color: var(--muted); font-size: .52rem; }
.cinema-audio-assets audio { grid-column: 1 / -1; width: 100%; height: 30px; }
.cinema-audio-assets a { width: 28px; height: 28px; display: grid; place-items: center; color: var(--muted); }

.cinema-storyboard-strip { display: grid; grid-auto-columns: minmax(190px, 42%); grid-auto-flow: column; gap: 8px; padding: 11px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.cinema-frame { min-width: 0; align-self: start; overflow: hidden; scroll-snap-align: start; border: 1px solid var(--cinema-line); border-radius: 10px; background: var(--surface); }
.cinema-frame.is-stale { border-color: rgb(249 115 22 / 42%); }
.cinema-frame summary { position: relative; display: grid; cursor: pointer; list-style: none; }
.cinema-frame summary::-webkit-details-marker { display: none; }
.cinema-frame summary > img,
.cinema-frame-loading { width: 100%; aspect-ratio: 16 / 9; display: block; object-fit: cover; background: #09090b; }
.cinema-frame-loading { display: grid; place-items: center; align-content: center; gap: 5px; color: #71717a; font-size: .6rem; }
.cinema-frame-loading svg { width: 18px; }
.cinema-frame-number { position: absolute; z-index: 1; top: 7px; left: 7px; min-width: 25px; height: 22px; display: grid; place-items: center; color: #fff; border: 1px solid rgb(255 255 255 / 20%); border-radius: 7px; background: rgb(0 0 0 / 64%); backdrop-filter: blur(8px); font-size: .55rem; }
.cinema-frame-caption { display: grid; padding: 8px 9px 9px; }
.cinema-frame-caption strong { overflow: hidden; font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.cinema-frame-caption small { color: var(--muted); font-size: .54rem; }
.cinema-frame-caption em { margin-top: 4px; color: #86efac; font-size: .52rem; font-style: normal; }
.cinema-frame-editor { display: grid; gap: 8px; padding: 10px; border-top: 1px solid var(--cinema-line); }
.cinema-frame-editor p { margin: 0; color: var(--text-soft); font-size: .62rem; line-height: 1.45; }
.cinema-frame-editor dl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; }
.cinema-frame-editor dl > div { padding: 6px 7px; border-radius: 7px; background: var(--cinema-soft); }
.cinema-frame-editor dt { color: var(--muted); font-size: .5rem; }
.cinema-frame-editor dd { margin: 1px 0 0; font-size: .58rem; }
.cinema-frame-editor label { display: grid; gap: 4px; color: var(--muted); font-size: .54rem; }
.cinema-frame-editor textarea,
.cinema-gate-copy textarea { width: 100%; resize: vertical; padding: 8px 9px; color: var(--text); border: 1px solid var(--cinema-line); border-radius: 8px; outline: 0; background: var(--surface); font: inherit; font-size: .62rem; line-height: 1.4; box-sizing: border-box; }
.cinema-frame-editor textarea:focus,
.cinema-gate-copy textarea:focus { border-color: color-mix(in srgb, #8b5cf6 62%, var(--cinema-line)); box-shadow: 0 0 0 3px rgb(124 58 237 / 9%); }
.cinema-frame-editor .button { min-height: 30px; font-size: .58rem; }

.cinema-video-player { display: grid; margin: 0; background: #08080a; }
.cinema-video-player { position: relative; }
.cinema-render-badge { position: absolute; z-index: 2; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid color-mix(in srgb, var(--line) 82%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--text-soft); box-shadow: 0 8px 24px rgba(0, 0, 0, .22); font-size: .56rem; font-weight: 700; letter-spacing: .03em; backdrop-filter: blur(12px); }
.cinema-render-badge svg { width: 12px; height: 12px; }
.cinema-video-player.is-neural-verified .cinema-render-badge { border-color: color-mix(in srgb, #83a98f 48%, var(--line)); color: color-mix(in srgb, #b9d9c1 70%, var(--text)); }
.cinema-video-player.is-animatic-only .cinema-render-badge { border-color: color-mix(in srgb, #b69368 48%, var(--line)); color: color-mix(in srgb, #e0c198 72%, var(--text)); }
.cinema-render-integrity { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 10px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--text-soft); }
.cinema-render-integrity.is-error { border-color: color-mix(in srgb, #b47777 42%, var(--line)); }
.cinema-render-integrity > svg { width: 15px; flex: 0 0 auto; margin-top: 1px; }
.cinema-render-integrity > span { display: grid; gap: 2px; }
.cinema-render-integrity strong { color: var(--text); font-size: .64rem; }
.cinema-render-integrity small { color: var(--muted); font-size: .57rem; line-height: 1.45; }
.cinema-video-player video { width: 100%; max-height: 460px; display: block; aspect-ratio: 16 / 9; background: #000; object-fit: contain; }
.cinema-video-player figcaption { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; color: var(--text); background: var(--surface-2); }
.cinema-video-player figcaption > span { min-width: 0; display: grid; }
.cinema-video-player strong { font-size: .68rem; }
.cinema-video-player small { overflow: hidden; color: var(--muted); font-size: .55rem; text-overflow: ellipsis; white-space: nowrap; }
.cinema-video-player a { display: inline-flex; align-items: center; gap: 5px; color: var(--text-soft); font-size: .6rem; text-decoration: none; }
.cinema-video-player a svg { width: 13px; }
.cinema-final-player figcaption > div { display: flex; gap: 6px; }
.cinema-final-player .button { min-height: 31px; padding-inline: 10px; font-size: .58rem; }

.cinema-approval-gate { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; margin: 0 14px 14px; padding: 14px; border: 1px solid rgb(245 158 11 / 32%); border-radius: 13px; background: linear-gradient(135deg, rgb(120 53 15 / 13%), color-mix(in srgb, var(--surface-2) 92%, transparent)); }
.cinema-gate-icon { width: 38px; height: 38px; display: grid; place-items: center; color: #fcd34d; border: 1px solid rgb(245 158 11 / 24%); border-radius: 11px; background: rgb(245 158 11 / 10%); }
.cinema-gate-icon svg { width: 17px; }
.cinema-gate-copy { min-width: 0; display: grid; gap: 8px; }
.cinema-gate-copy > small { color: #d6a85f; font-size: .56rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.cinema-gate-copy h4 { margin: -4px 0 0; font-size: .86rem; }
.cinema-gate-copy label { display: grid; gap: 4px; color: var(--muted); font-size: .55rem; }
.cinema-gate-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.cinema-gate-actions .button { min-height: 33px; padding-inline: 11px; font-size: .6rem; }

.cinema-production-history { margin: 0 14px 12px; border: 1px solid var(--cinema-line); border-radius: 11px; background: var(--cinema-soft); }
.cinema-production-history > summary { display: grid; grid-template-columns: 20px 1fr 14px; align-items: center; gap: 7px; padding: 10px 11px; cursor: pointer; list-style: none; }
.cinema-production-history > summary::-webkit-details-marker { display: none; }
.cinema-production-history > summary > svg { width: 13px; color: var(--muted); }
.cinema-production-history > summary > span { display: grid; }
.cinema-production-history strong { font-size: .62rem; }
.cinema-production-history small { color: var(--muted); font-size: .52rem; }
.cinema-history-body { display: grid; gap: 1px; max-height: 310px; overflow: auto; border-top: 1px solid var(--cinema-line); background: var(--cinema-line); }
.cinema-history-note,
.cinema-history-tool { display: grid; grid-template-columns: 21px 1fr; gap: 7px; padding: 9px 11px; background: var(--surface-2); }
.cinema-history-note > span,
.cinema-history-tool > span { color: #a78bfa; }
.cinema-history-note svg,
.cinema-history-tool svg { width: 12px; }
.cinema-history-note strong,
.cinema-history-tool strong { display: block; font-size: .59rem; text-transform: capitalize; }
.cinema-history-note p { margin: 2px 0 0; color: var(--text-soft); font-size: .59rem; line-height: 1.4; }
.cinema-history-tool small { display: block; color: var(--muted); font-size: .52rem; }
.cinema-history-tool.error > span { color: #fb7185; }
.cinema-transparency-note { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0 16px 14px; color: var(--muted); font-size: .55rem; }
.cinema-transparency-note svg { width: 12px; }

html[data-color-mode="light"] .cinema-project {
  box-shadow: 0 18px 50px rgb(15 23 42 / 8%);
  background:
    radial-gradient(circle at 92% -8%, rgb(124 58 237 / 9%), transparent 34%),
    radial-gradient(circle at 8% 0%, rgb(14 165 233 / 7%), transparent 30%),
    #fff;
}
html[data-color-mode="light"] .cinema-scene-list article,
html[data-color-mode="light"] .cinema-history-note,
html[data-color-mode="light"] .cinema-history-tool { background: #fff; }
html[data-color-mode="light"] .cinema-frame,
html[data-color-mode="light"] .cinema-reference-grid figure { background: #fff; }

@media (max-width: 720px) {
  .cinema-project-header { align-items: flex-start; padding: 15px; }
  .cinema-project-metrics > span { display: none; }
  .cinema-project-title h3 { max-width: 55vw; }
  .cinema-mode-switch { padding-inline: 14px; overflow-x: auto; }
  .cinema-mode-switch > span { display: none; }
  .cinema-stage-rail { grid-template-columns: repeat(8, 130px); }
  .cinema-stage-stack { padding: 9px; }
  .cinema-stage-reference-tool { align-items: flex-start; flex-direction: column; }
  .cinema-scene-list { grid-template-columns: 1fr; }
  .cinema-reference-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cinema-storyboard-strip { grid-auto-columns: 78%; }
  .cinema-video-player figcaption { align-items: flex-start; flex-direction: column; }
  .cinema-approval-gate { grid-template-columns: 1fr; margin: 0 9px 9px; }
  .cinema-gate-actions .button { flex: 1 1 145px; }
  .cinema-production-history { margin-inline: 9px; }
}

@media (max-width: 720px) {
  .cinema-setup-menu { right: auto; left: 0; width: min(560px, calc(100vw - 20px)); transform: none; }
  .cinema-deliverable-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cinema-setup-grid { grid-template-columns: 1fr; }
  .cinema-setup-menu > footer { align-items: stretch; flex-direction: column; }
  .cinema-audio-assets article > div { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .cinema-stage-spinner { animation-duration: 1.8s; }
  .cinema-image-button img,
  .cinema-inline-progress i { transition: none; }
}

/* VideoSEEASK -------------------------------------------------------------- */
.videoseeask-page {
  --vsa-ink: #f2f4f7;
  --vsa-dim: #9299a5;
  --vsa-line: rgb(255 255 255 / 9%);
  --vsa-panel: rgb(255 255 255 / 3.3%);
  --vsa-raised: rgb(255 255 255 / 5.4%);
  min-height: 100%;
  padding: 18px;
  color: var(--vsa-ink);
  background:
    radial-gradient(circle at 74% -8%, rgb(90 103 255 / 10%), transparent 31%),
    radial-gradient(circle at 12% 0%, rgb(44 210 175 / 6%), transparent 25%),
    var(--bg);
}

.vsa-hero {
  max-width: 1420px;
  min-height: 130px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin: 0 auto 12px;
  padding: 22px 26px;
  overflow: hidden;
  border: 1px solid var(--vsa-line);
  border-radius: 22px;
  background: linear-gradient(120deg, rgb(255 255 255 / 4.5%), rgb(255 255 255 / 1.5%));
  box-shadow: 0 24px 70px rgb(0 0 0 / 18%);
}

.vsa-hero > div:first-child { display: flex; align-items: flex-start; gap: 17px; min-width: 0; }
.vsa-mark {
  width: 47px; height: 47px; flex: 0 0 auto; display: grid; place-items: center;
  color: #d8f8ff; border: 1px solid rgb(108 220 255 / 30%); border-radius: 14px;
  background: linear-gradient(145deg, rgb(48 189 255 / 17%), rgb(120 90 255 / 14%));
  box-shadow: inset 0 1px rgb(255 255 255 / 12%), 0 12px 32px rgb(37 99 235 / 12%);
}
.vsa-mark svg { width: 24px; height: 24px; }
.vsa-hero h2 { margin: 4px 0 5px; font-size: clamp(1.65rem, 3vw, 2.55rem); letter-spacing: -.055em; }
.vsa-hero h2 span { color: #80dcff; }
.vsa-hero p { max-width: 720px; margin: 0; color: var(--vsa-dim); font-size: .78rem; line-height: 1.55; }
.vsa-architecture { display: flex; align-items: center; gap: 7px; padding-bottom: 3px; color: #aab1bc; font-size: .58rem; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.vsa-architecture span { padding: 7px 9px; border: 1px solid var(--vsa-line); border-radius: 99px; background: rgb(255 255 255 / 3%); }
.vsa-architecture svg { width: 10px; height: 10px; opacity: .48; }
.vsa-trust-strip { max-width: 1420px; display: flex; gap: 9px; margin: 0 auto 12px; overflow-x: auto; scrollbar-width: none; }
.vsa-trust-strip span { min-width: max-content; display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; color: var(--vsa-dim); border: 1px solid var(--vsa-line); border-radius: 99px; background: rgb(255 255 255 / 2.8%); font-size: .59rem; }
.vsa-trust-strip svg { width: 12px; height: 12px; color: #7bd9ff; }

.vsa-shell { max-width: 1420px; display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 12px; margin: 0 auto; }
.vsa-shell > main { min-width: 0; }
.vsa-project-list,
.vsa-source-panel,
.vsa-workspace { border: 1px solid var(--vsa-line); border-radius: 19px; background: rgb(20 20 22 / 72%); box-shadow: 0 18px 55px rgb(0 0 0 / 14%); }
.vsa-project-list { min-height: 590px; overflow: hidden; }
.vsa-project-list > header { min-height: 59px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 12px; border-bottom: 1px solid var(--vsa-line); }
.vsa-project-list > header div { display: grid; gap: 2px; }
.vsa-project-list > header small { color: var(--vsa-dim); font-size: .55rem; text-transform: uppercase; letter-spacing: .09em; }
.vsa-project-list > header strong { font-size: .71rem; }
.vsa-project-list > header > span { display: flex; gap: 3px; }
.vsa-project-list > header button { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; color: var(--vsa-dim); border: 1px solid transparent; border-radius: 8px; background: transparent; }
.vsa-project-list > header button:hover { color: var(--vsa-ink); border-color: var(--vsa-line); background: var(--vsa-raised); }
.vsa-project-list > header svg { width: 13px; height: 13px; }
.vsa-project-list > div { display: grid; gap: 3px; max-height: calc(100dvh - 310px); padding: 7px; overflow-y: auto; }
.vsa-project-entry { position: relative; min-width: 0; }
.vsa-project-row { width: 100%; min-width: 0; display: grid; grid-template-columns: 31px minmax(0, 1fr) 6px; align-items: center; gap: 8px; padding: 9px; color: var(--vsa-dim); border: 1px solid transparent; border-radius: 11px; background: transparent; text-align: left; }
.vsa-project-entry:hover .vsa-project-row,
.vsa-project-entry:focus-within .vsa-project-row { padding-right: 39px; }
.vsa-project-delete { position: absolute; top: 50%; right: 7px; width: 29px; height: 29px; display: grid; place-items: center; padding: 0; color: #fb7185; opacity: 0; transform: translateY(-50%); border: 1px solid transparent; border-radius: 8px; background: color-mix(in srgb, var(--vsa-panel) 88%, transparent); transition: opacity .14s ease, background .14s ease, border-color .14s ease; }
.vsa-project-entry:hover .vsa-project-delete,
.vsa-project-entry:focus-within .vsa-project-delete { opacity: 1; }
.vsa-project-delete:hover { border-color: rgb(251 113 133 / 32%); background: rgb(251 113 133 / 12%); }
.vsa-project-delete svg { width: 13px; height: 13px; }
@media (hover: none), (pointer: coarse) {
  .vsa-project-delete { opacity: 1; }
  .vsa-project-row { padding-right: 39px; }
}
.vsa-project-row:hover, .vsa-project-row.is-active { color: var(--vsa-ink); border-color: var(--vsa-line); background: var(--vsa-raised); }
.vsa-project-row > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.vsa-project-row strong, .vsa-project-row small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vsa-project-row strong { font-size: .68rem; }
.vsa-project-row small { color: var(--vsa-dim); font-size: .54rem; }
.vsa-project-source { width: 31px; height: 31px; display: grid; place-items: center; color: #b9dffd; border-radius: 9px; background: rgb(89 160 255 / 9%); }
.vsa-project-source svg { width: 14px; height: 14px; }
.vsa-project-row > i { width: 6px; height: 6px; border-radius: 50%; background: #6b7280; }
.vsa-project-row > i.tone-processing, .vsa-project-row > i.tone-resolving, .vsa-project-row > i.tone-queued { background: #60a5fa; box-shadow: 0 0 12px #60a5fa; animation: vsa-pulse 1.5s infinite; }
.vsa-project-row > i.tone-live { background: #34d399; box-shadow: 0 0 12px #34d399; animation: vsa-pulse 1.15s infinite; }
.vsa-project-row > i.tone-completed { background: #a7f3d0; }
.vsa-project-row > i.tone-failed { background: #fb7185; }
.vsa-project-empty { display: grid; place-items: center; gap: 7px; padding: 46px 16px; color: var(--vsa-dim); text-align: center; }
.vsa-project-empty svg { width: 25px; height: 25px; opacity: .55; }
.vsa-project-empty strong { color: var(--vsa-ink); font-size: .7rem; }
.vsa-project-empty p { margin: 0; font-size: .58rem; line-height: 1.5; }

.vsa-source-panel { max-width: 820px; min-height: 590px; margin: 0 auto; padding: 24px; }
.vsa-source-panel > header { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.vsa-source-panel > header small, .vsa-query-column > header small, .vsa-memory-column > header small { color: #7edcff; font-size: .56rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.vsa-source-panel h3, .vsa-memory-column h3, .vsa-query-column h3 { margin: 4px 0; font-size: 1.02rem; letter-spacing: -.025em; }
.vsa-source-panel > header p, .vsa-query-column > header p { max-width: 550px; margin: 0; color: var(--vsa-dim); font-size: .65rem; line-height: 1.5; }
.vsa-private-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; color: #a9e8d3; border: 1px solid rgb(52 211 153 / 18%); border-radius: 99px; background: rgb(52 211 153 / 6%); font-size: .56rem; white-space: nowrap; }
.vsa-private-pill svg { width: 12px; height: 12px; }
.vsa-source-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-bottom: 18px; padding: 4px; border: 1px solid var(--vsa-line); border-radius: 12px; background: rgb(0 0 0 / 18%); }
.vsa-source-tabs button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: var(--vsa-dim); border: 0; border-radius: 9px; background: transparent; font-size: .64rem; }
.vsa-source-tabs button.is-active { color: var(--vsa-ink); background: var(--vsa-raised); box-shadow: inset 0 0 0 1px var(--vsa-line); }
.vsa-source-tabs svg { width: 14px; height: 14px; }
.vsa-source-form { display: grid; gap: 15px; }
.vsa-source-form > label, .vsa-pipeline-config label { display: grid; gap: 7px; color: #c8ccd3; font-size: .61rem; }
.vsa-source-form label > span { display: flex; justify-content: space-between; font-weight: 720; }
.vsa-source-form label > span small { color: var(--vsa-dim); font-weight: 500; }
.vsa-source-form input, .vsa-source-form select, .vsa-query-column textarea { color: var(--vsa-ink); border: 1px solid var(--vsa-line); border-radius: 10px; background: rgb(255 255 255 / 3.4%); }
.vsa-source-form > label > input { min-height: 42px; padding: 0 12px; }
.vsa-url-input { min-height: 48px; display: flex; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid var(--vsa-line); border-radius: 11px; background: rgb(255 255 255 / 3.4%); }
.vsa-url-input:focus-within { border-color: rgb(111 191 255 / 42%); box-shadow: 0 0 0 3px rgb(59 130 246 / 9%); }
.vsa-url-input svg { width: 16px; height: 16px; color: #83d8ff; }
.vsa-url-input input { flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; outline: 0; }
.vsa-field-note { color: var(--vsa-dim); font-size: .54rem; line-height: 1.45; }
.vsa-file-drop { min-height: 138px; display: grid; place-items: center; align-content: center; gap: 8px; padding: 18px; color: var(--vsa-dim); border: 1px dashed rgb(143 151 166 / 34%); border-radius: 14px; background: rgb(255 255 255 / 2%); }
.vsa-file-drop:hover, .vsa-file-drop.is-ready { color: var(--vsa-ink); border-color: rgb(102 203 255 / 48%); background: rgb(75 160 255 / 5%); }
.vsa-file-drop > span { width: 34px; height: 34px; display: grid; place-items: center; color: #84ddff; border-radius: 10px; background: rgb(97 180 255 / 10%); }
.vsa-file-drop svg { width: 16px; height: 16px; }
.vsa-file-drop strong { font-size: .72rem; }
.vsa-file-drop small { font-size: .56rem; }
.vsa-upload-meter { width: 100%; height: 5px; overflow: hidden; border-radius: 999px; background: rgb(143 151 166 / 16%); }
.vsa-upload-meter > span { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #8a96a8, #d6dbe3); transition: width 180ms ease; }
.vsa-live-kind { display: flex; gap: 5px; }
.vsa-live-kind button { padding: 7px 11px; color: var(--vsa-dim); border: 1px solid var(--vsa-line); border-radius: 99px; background: transparent; font-size: .56rem; }
.vsa-live-kind button.is-active { color: #c8f6ff; border-color: rgb(110 211 255 / 30%); background: rgb(67 178 255 / 9%); }
.vsa-pipeline-config { border: 1px solid var(--vsa-line); border-radius: 12px; background: rgb(255 255 255 / 2%); }
.vsa-pipeline-config summary { display: flex; align-items: center; gap: 8px; padding: 11px 12px; color: #ccd1d8; cursor: pointer; font-size: .61rem; font-weight: 720; }
.vsa-pipeline-config summary svg { width: 14px; height: 14px; color: #8bdcff; }
.vsa-pipeline-config summary span { margin-left: auto; color: var(--vsa-dim); font-size: .53rem; font-weight: 500; }
.vsa-pipeline-config > div { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 2px 12px 12px; }
.vsa-pipeline-config select, .vsa-pipeline-config input { min-height: 36px; padding: 0 9px; font-size: .58rem; }
.vsa-pipeline-config fieldset { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 0; padding: 10px 12px 13px; border: 0; border-top: 1px solid var(--vsa-line); }
.vsa-pipeline-config legend { padding-top: 8px; color: var(--vsa-dim); font-size: .52rem; text-transform: uppercase; letter-spacing: .08em; }
.vsa-pipeline-config fieldset label { display: flex; align-items: center; gap: 5px; color: var(--vsa-dim); font-size: .55rem; }
.vsa-pipeline-config fieldset input { width: 13px; height: 13px; min-height: 0; }
.vsa-start-button { min-height: 54px; display: grid; grid-template-columns: 20px minmax(0, 1fr) 15px; align-items: center; gap: 11px; padding: 9px 14px; color: #f5fbff; border: 1px solid rgb(106 199 255 / 25%); border-radius: 12px; background: linear-gradient(110deg, rgb(37 132 209 / 65%), rgb(91 69 190 / 62%)); text-align: left; }
.vsa-start-button:hover { filter: brightness(1.1); transform: translateY(-1px); }
.vsa-start-button:disabled { opacity: .62; transform: none; }
.vsa-start-button > svg { width: 16px; height: 16px; }
.vsa-start-button span { display: grid; gap: 2px; }
.vsa-start-button strong { font-size: .66rem; }
.vsa-start-button small { color: rgb(235 246 255 / 68%); font-size: .52rem; }
.vsa-error { display: flex; align-items: flex-start; gap: 8px; padding: 10px 11px; color: #fecdd3; border: 1px solid rgb(251 113 133 / 22%); border-radius: 10px; background: rgb(127 29 29 / 13%); font-size: .58rem; line-height: 1.45; }
.vsa-error svg { width: 14px; height: 14px; flex: 0 0 auto; }
.vsa-error span { display: grid; gap: 3px; }

.vsa-workspace { min-width: 0; overflow: hidden; }
.vsa-project-head { min-height: 65px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--vsa-line); }
.vsa-project-head > div:first-child { min-width: 0; display: flex; align-items: center; gap: 10px; }
.vsa-project-head > div:first-child > span { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; color: #8addff; border-radius: 10px; background: rgb(80 173 255 / 9%); }
.vsa-project-head svg { width: 15px; height: 15px; }
.vsa-project-head small { color: var(--vsa-dim); font-size: .52rem; text-transform: uppercase; letter-spacing: .08em; }
.vsa-project-head h3 { max-width: 580px; margin: 2px 0 0; overflow: hidden; font-size: .83rem; white-space: nowrap; text-overflow: ellipsis; }
.vsa-project-actions { display: flex; gap: 5px; }
.vsa-project-actions button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; color: var(--vsa-dim); border: 1px solid var(--vsa-line); border-radius: 8px; background: transparent; font-size: .55rem; }
.vsa-project-actions button:hover { color: var(--vsa-ink); background: var(--vsa-raised); }
.vsa-project-actions button.danger { color: #fda4af; }
.vsa-progress-card { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 12px; margin: 12px; padding: 12px; border: 1px solid var(--vsa-line); border-radius: 13px; background: var(--vsa-panel); }
.vsa-progress-orb { width: 42px; height: 42px; display: grid; place-items: center; color: #8bdcff; border-radius: 13px; background: rgb(60 161 255 / 9%); }
.vsa-progress-orb svg { width: 19px; height: 19px; }
.vsa-progress-card > div:last-child { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; align-items: center; }
.vsa-progress-card small { color: #87dcff; font-size: .52rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.vsa-progress-card strong { overflow: hidden; font-size: .65rem; white-space: nowrap; text-overflow: ellipsis; }
.vsa-progress-card span { grid-column: 1 / -1; height: 3px; overflow: hidden; border-radius: 99px; background: rgb(255 255 255 / 7%); }
.vsa-progress-card span i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #56d8ff, #8478ff); transition: width .3s ease; }
.vsa-progress-card p { grid-column: 1 / -1; margin: 0; color: var(--vsa-dim); font-size: .52rem; }
.vsa-workspace > .vsa-error { margin: 0 12px 12px; }
.vsa-summary { margin: 0 12px 12px; padding: 12px; border: 1px solid var(--vsa-line); border-radius: 13px; background: linear-gradient(120deg, rgb(70 161 255 / 5%), rgb(142 91 255 / 4%)); }
.vsa-summary header { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.vsa-summary header > span { width: 27px; height: 27px; display: grid; place-items: center; color: #9bdfff; border-radius: 8px; background: rgb(87 176 255 / 8%); }
.vsa-summary svg { width: 13px; height: 13px; }
.vsa-summary header div { display: grid; gap: 1px; }
.vsa-summary small { color: var(--vsa-dim); font-size: .49rem; text-transform: uppercase; letter-spacing: .08em; }
.vsa-summary strong { font-size: .62rem; }
.vsa-summary p { max-height: 105px; margin: 0; overflow-y: auto; color: #bbc2cb; font-size: .58rem; line-height: 1.52; white-space: pre-wrap; }
.vsa-workspace-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(330px, .92fr); min-height: 430px; border-top: 1px solid var(--vsa-line); }
.vsa-memory-column, .vsa-query-column { min-width: 0; padding: 14px; }
.vsa-memory-column { border-right: 1px solid var(--vsa-line); }
.vsa-memory-column > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.vsa-memory-column > header span { color: var(--vsa-dim); font-size: .52rem; }
.vsa-query-column > header { margin-bottom: 10px; }
.vsa-timeline { display: grid; gap: 6px; max-height: 540px; padding-right: 3px; overflow-y: auto; }
.vsa-chunk { border: 1px solid var(--vsa-line); border-radius: 11px; background: rgb(255 255 255 / 2%); }
.vsa-chunk[open] { background: rgb(255 255 255 / 3.3%); }
.vsa-chunk summary { min-height: 58px; display: grid; grid-template-columns: 76px minmax(0, 1fr) 14px; align-items: center; gap: 9px; padding: 8px 10px; cursor: pointer; list-style: none; }
.vsa-chunk summary::-webkit-details-marker { display: none; }
.vsa-chunk summary time { align-self: start; padding-top: 3px; color: #83dbff; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .53rem; }
.vsa-chunk summary > span { min-width: 0; display: grid; gap: 4px; }
.vsa-chunk summary strong { display: -webkit-box; overflow: hidden; color: #d5d9df; font-size: .58rem; font-weight: 600; line-height: 1.4; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.vsa-chunk summary small { color: var(--vsa-dim); font-size: .48rem; }
.vsa-chunk summary > svg { width: 12px; height: 12px; color: var(--vsa-dim); transition: transform .16s ease; }
.vsa-chunk[open] summary > svg { transform: rotate(90deg); }
.vsa-chunk-body { display: grid; gap: 10px; padding: 0 10px 10px; border-top: 1px solid var(--vsa-line); }
.vsa-evidence-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding-top: 10px; }
.vsa-evidence-grid:empty { display: none; }
.vsa-evidence-grid a { position: relative; overflow: hidden; aspect-ratio: 16/10; border-radius: 7px; background: #09090a; }
.vsa-evidence-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .18s ease; }
.vsa-evidence-grid a:hover img { transform: scale(1.035); }
.vsa-evidence-grid span { position: absolute; left: 4px; bottom: 4px; padding: 2px 4px; color: #fff; border-radius: 4px; background: rgb(0 0 0 / 67%); font-size: .43rem; }
.vsa-cv-sections { display: grid; gap: 5px; }
.vsa-cv-sections section { display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 7px; padding: 7px; border-radius: 8px; background: rgb(0 0 0 / 13%); }
.vsa-cv-sections section > span { width: 25px; height: 25px; display: grid; place-items: center; color: #83d9ff; border-radius: 7px; background: rgb(71 168 255 / 8%); }
.vsa-cv-sections svg { width: 12px; height: 12px; }
.vsa-cv-sections section div { min-width: 0; }
.vsa-cv-sections strong { display: block; font-size: .53rem; }
.vsa-cv-sections p { margin: 2px 0; color: #b5bbc4; font-size: .51rem; line-height: 1.4; }
.vsa-cv-sections small { color: var(--vsa-dim); font-size: .46rem; }
.vsa-gap { display: flex; gap: 6px; margin-top: 9px; padding: 7px; color: #fdba74; border-radius: 7px; background: rgb(180 83 9 / 9%); font-size: .51rem; }
.vsa-gap svg { width: 12px; height: 12px; }
.vsa-diagnostics { padding: 8px; color: #d5d9df; border: 1px solid rgb(251 191 36 / 17%); border-radius: 8px; background: rgb(251 191 36 / 5%); font-size: .5rem; }
.vsa-diagnostics strong { display: flex; align-items: center; gap: 5px; color: #f7d38a; font-size: .52rem; }
.vsa-diagnostics strong svg { width: 12px; height: 12px; }
.vsa-diagnostics ul { margin: 5px 0 0; padding-left: 16px; }
.vsa-diagnostics li + li { margin-top: 3px; }
.vsa-timeline-empty, .vsa-query-empty { min-height: 230px; display: grid; place-items: center; align-content: center; gap: 8px; padding: 28px; color: var(--vsa-dim); border: 1px dashed var(--vsa-line); border-radius: 12px; text-align: center; }
.vsa-timeline-empty svg, .vsa-query-empty svg { width: 24px; height: 24px; opacity: .55; }
.vsa-timeline-empty strong, .vsa-query-empty strong { color: #cdd2d9; font-size: .65rem; }
.vsa-timeline-empty p, .vsa-query-empty p { max-width: 390px; margin: 0; font-size: .54rem; line-height: 1.5; }
.vsa-query-column form { display: grid; gap: 7px; margin-bottom: 10px; }
.vsa-query-column textarea { min-height: 78px; padding: 10px; resize: vertical; font-size: .61rem; line-height: 1.45; }
.vsa-query-column form button { min-height: 37px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: #eaf8ff; border: 1px solid rgb(100 197 255 / 25%); border-radius: 9px; background: rgb(52 127 195 / 36%); font-size: .59rem; font-weight: 720; }
.vsa-query-column form button svg { width: 13px; height: 13px; }
.vsa-answer { display: grid; gap: 10px; }
.vsa-answer > header { display: flex; align-items: center; gap: 8px; padding: 9px; border: 1px solid var(--vsa-line); border-radius: 10px; background: var(--vsa-panel); }
.vsa-answer > header > span { width: 27px; height: 27px; display: grid; place-items: center; color: #92e5ff; border-radius: 8px; background: rgb(78 178 255 / 9%); }
.vsa-answer > header svg { width: 13px; height: 13px; }
.vsa-answer > header div { display: grid; gap: 2px; }
.vsa-answer > header small { color: var(--vsa-dim); font-size: .48rem; text-transform: uppercase; letter-spacing: .08em; }
.vsa-answer > header strong { font-size: .57rem; }
.vsa-answer-copy { padding: 0 3px; color: #d1d5db; font-size: .58rem; line-height: 1.55; }
.vsa-answer-copy p { margin: 0 0 7px; }
.vsa-citations { display: grid; gap: 6px; }
.vsa-citations > article { padding: 9px; border: 1px solid var(--vsa-line); border-radius: 10px; background: rgb(255 255 255 / 2%); }
.vsa-citations article header { display: flex; justify-content: space-between; gap: 8px; color: #85dcff; font: 500 .49rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.vsa-citations article header span { color: var(--vsa-dim); }
.vsa-citations article p { margin: 7px 0; color: #bfc5ce; font-size: .53rem; line-height: 1.45; }
.vsa-citations article > div { display: flex; gap: 4px; overflow-x: auto; }
.vsa-citations article img { width: 72px; aspect-ratio: 16/10; object-fit: cover; border-radius: 6px; background: #09090a; }
.vsa-citations article button { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; padding: 5px 7px; color: var(--vsa-dim); border: 1px solid var(--vsa-line); border-radius: 7px; background: transparent; font-size: .48rem; }
.vsa-citations article button:hover { color: var(--vsa-ink); background: var(--vsa-raised); }
.vsa-citations article button svg { width: 11px; height: 11px; }

@keyframes vsa-pulse { 50% { opacity: .48; transform: scale(.82); } }

html[data-color-mode="light"] .videoseeask-page {
  --vsa-ink: #202124;
  --vsa-dim: #666b74;
  --vsa-line: rgb(20 24 32 / 10%);
  --vsa-panel: rgb(20 24 32 / 3.2%);
  --vsa-raised: rgb(20 24 32 / 5.5%);
}
html[data-color-mode="light"] :is(.vsa-project-list, .vsa-source-panel, .vsa-workspace) { background: rgb(255 255 255 / 88%); }
html[data-color-mode="light"] .vsa-chunk summary strong,
html[data-color-mode="light"] .vsa-timeline-empty strong,
html[data-color-mode="light"] .vsa-query-empty strong { color: #34373d; }
html[data-color-mode="light"] .vsa-source-form input,
html[data-color-mode="light"] .vsa-source-form select,
html[data-color-mode="light"] .vsa-query-column textarea { color: #202124; background: #fff; }

@media (max-width: 1040px) {
  .vsa-architecture { display: none; }
  .vsa-workspace-grid { grid-template-columns: 1fr; }
  .vsa-memory-column { border-right: 0; border-bottom: 1px solid var(--vsa-line); }
}

@media (max-width: 760px) {
  .videoseeask-page { padding: 8px; }
  .vsa-hero { min-height: 0; padding: 17px; }
  .vsa-hero p { font-size: .69rem; }
  .vsa-shell { grid-template-columns: 1fr; }
  .vsa-project-list { min-height: 0; }
  .vsa-project-list > div { max-height: 180px; }
  .vsa-source-panel { min-height: 0; padding: 16px; }
  .vsa-source-panel > header { flex-direction: column; }
  .vsa-private-pill { align-self: flex-start; }
  .vsa-source-tabs button { font-size: 0; }
  .vsa-source-tabs button svg { width: 17px; height: 17px; }
  .vsa-pipeline-config > div { grid-template-columns: 1fr; }
  .vsa-project-head { align-items: flex-start; }
  .vsa-project-actions button { font-size: 0; }
  .vsa-workspace-grid { grid-template-columns: 1fr; }
  .vsa-progress-card > div:last-child { grid-template-columns: 1fr; }
  .vsa-progress-card span, .vsa-progress-card p { grid-column: 1; }
  .vsa-evidence-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .vsa-project-row > i,
  .vsa-progress-card span i { animation: none; transition: none; }
}

/* Creator Canvas v4 --------------------------------------------------------
   A neutral, tool-first workspace. The canvas remains visually quiet while
   Art and Math affordances live in one contextual inspector. */
.page-stage .creator-canvas-v4 {
  --cc-bg: #111214;
  --cc-panel: #18191c;
  --cc-raised: #202126;
  --cc-canvas: #f7f6f2;
  --cc-ink: #f2f3f4;
  --cc-muted: #959aa3;
  --cc-line: rgb(255 255 255 / 9%);
  --cc-strong-line: rgb(255 255 255 / 15%);
  --cc-accent: #e7e8eb;
  --cc-accent-ink: #151619;
  --cc-focus: #8ab4ff;
  width: 100%;
  min-height: calc(100dvh - 18px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  color: var(--cc-ink);
  border: 1px solid var(--cc-line);
  border-radius: 18px;
  background: var(--cc-bg);
  box-shadow: 0 22px 70px rgb(0 0 0 / 24%);
}

.creator-canvas-v4 :is(button, input, textarea, select) { font: inherit; }
.creator-canvas-v4 button { color: inherit; }
.creator-canvas-v4 svg { width: 16px; height: 16px; }

.cc-topbar {
  min-height: 66px;
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr);
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--cc-line);
  background: rgb(24 25 28 / 92%);
  backdrop-filter: blur(18px);
}

.cc-title-block,
.cc-title-block > div,
.cc-top-actions,
.cc-save-state,
.cc-footer > div,
.cc-layer-card header,
.cc-history-card > header,
.cc-mode-card > header { display: flex; align-items: center; }

.cc-title-block { min-width: 0; gap: 10px; }
.cc-title-block > span {
  flex: 0 0 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: #d8dae0;
  border: 1px solid var(--cc-line);
  border-radius: 10px;
  background: var(--cc-raised);
}
.cc-title-block > div { min-width: 0; display: grid; gap: 2px; }
.cc-title-block small,
.cc-mode-card header small,
.cc-layer-card header small,
.cc-history-card > header small {
  color: var(--cc-muted);
  font-size: .57rem;
  font-weight: 740;
  letter-spacing: .12em;
}
.cc-title-block input {
  width: min(300px, 100%);
  padding: 0;
  color: var(--cc-ink);
  border: 0;
  outline: 0;
  background: transparent;
  font-size: .92rem;
  font-weight: 690;
}
.cc-title-block input:focus { text-decoration: underline; text-decoration-color: var(--cc-focus); text-underline-offset: 4px; }

.cc-mode-switch {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--cc-line);
  border-radius: 11px;
  background: #101114;
}
.cc-mode-switch button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  color: var(--cc-muted);
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: .69rem;
  font-weight: 680;
}
.cc-mode-switch button:hover { color: var(--cc-ink); background: rgb(255 255 255 / 5%); }
.cc-mode-switch button.active { color: var(--cc-accent-ink); background: var(--cc-accent); box-shadow: 0 4px 14px rgb(0 0 0 / 22%); }
.cc-mode-switch button.active svg { stroke-width: 2.2; }

.cc-top-actions { justify-content: flex-end; gap: 6px; }
.cc-top-actions button,
.cc-footer button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  color: #d2d5da;
  border: 1px solid var(--cc-line);
  border-radius: 9px;
  background: transparent;
  font-size: .63rem;
}
.cc-top-actions button:hover,
.cc-footer button:hover { color: var(--cc-ink); border-color: var(--cc-strong-line); background: var(--cc-raised); }
.cc-save-state { gap: 5px; margin-right: 4px; color: var(--cc-muted); font-size: .57rem; }
.cc-save-state svg { width: 13px; height: 13px; }
.cc-save-state.is-saving svg { animation: cc-spin .9s linear infinite; }

.cc-status-rail {
  min-height: 39px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  color: #686d76;
  border-bottom: 1px solid var(--cc-line);
  background: #141518;
  font-size: .58rem;
  font-weight: 650;
}
.cc-status-rail span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.cc-status-rail span i {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid var(--cc-line);
  border-radius: 50%;
  font-size: .51rem;
  font-style: normal;
}
.cc-status-rail span.is-active { color: #d2d5db; }
.cc-status-rail span.is-active i { color: #101114; border-color: #dadddf; background: #dadddf; }
.cc-status-rail b { width: 34px; height: 1px; background: var(--cc-line); }
.cc-status-rail em { margin-left: auto; color: var(--cc-muted); font-size: .56rem; font-style: normal; font-weight: 520; }

.cc-error-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: #fed7aa;
  border-bottom: 1px solid rgb(251 146 60 / 18%);
  background: rgb(124 45 18 / 20%);
}
.cc-error-banner > svg { flex: 0 0 18px; }
.cc-error-banner > div { min-width: 0; display: grid; gap: 2px; }
.cc-error-banner strong { font-size: .64rem; }
.cc-error-banner span { color: #d6bda8; font-size: .57rem; line-height: 1.4; }
.cc-error-banner button { margin-left: auto; padding: 5px; border: 0; background: transparent; }

.cc-workspace {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 338px;
  background: #0e0f11;
}
.cc-stage-shell { min-width: 0; min-height: 600px; position: relative; padding: 14px; }

.cc-floating-tools {
  position: absolute;
  z-index: 7;
  top: 26px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 2px;
  max-width: calc(100% - 48px);
  padding: 4px;
  overflow-x: auto;
  border: 1px solid rgb(18 19 22 / 12%);
  border-radius: 12px;
  background: rgb(255 255 255 / 94%);
  box-shadow: 0 12px 34px rgb(0 0 0 / 18%);
  transform: translateX(-50%);
  backdrop-filter: blur(14px);
}
.cc-floating-tools button,
.cc-floating-tools label {
  flex: 0 0 auto;
  min-width: 38px;
  min-height: 38px;
  display: grid;
  place-items: center;
  gap: 1px;
  margin: 0;
  padding: 4px 6px;
  color: #5f646d;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}
.cc-floating-tools button:hover,
.cc-floating-tools button.active { color: #17181b; background: #e9eaec; }
.cc-floating-tools button.active { box-shadow: inset 0 0 0 1px rgb(19 21 25 / 6%); }
.cc-floating-tools .cc-ai-fill-tool { color: #ae1658; }
.cc-floating-tools .cc-ai-fill-tool:hover,
.cc-floating-tools .cc-ai-fill-tool.active { color: #fff; background: linear-gradient(135deg, #ef2b83, #a629d6); }
.cc-floating-tools button:disabled { opacity: .32; cursor: default; }
.cc-floating-tools button svg { width: 15px; height: 15px; }
.cc-floating-tools span { font-size: .42rem; font-weight: 680; }
.cc-floating-tools > i { width: 1px; height: 28px; margin: 0 3px; background: rgb(18 19 22 / 10%); }
.cc-floating-tools label input[type="color"] { width: 19px; height: 19px; padding: 0; overflow: hidden; border: 1px solid #d4d5d7; border-radius: 50%; background: transparent; }
.cc-floating-tools label input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.cc-floating-tools label input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.cc-floating-tools .cc-stroke-size { width: 88px; align-content: center; }
.cc-floating-tools .cc-stroke-size input { width: 72px; accent-color: #25272c; }

.cc-canvas-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 570px;
  overflow: hidden;
  border: 1px solid rgb(17 19 23 / 14%);
  border-radius: 14px;
  outline: 0;
  background-color: var(--cc-canvas);
  box-shadow: 0 14px 50px rgb(0 0 0 / 18%);
  isolation: isolate;
}
.cc-canvas-viewport.has-grid {
  background-image: linear-gradient(rgb(15 18 23 / 4.5%) 1px, transparent 1px), linear-gradient(90deg, rgb(15 18 23 / 4.5%) 1px, transparent 1px);
  background-size: 24px 24px;
}
.cc-canvas-viewport:focus-visible { box-shadow: 0 0 0 3px rgb(138 180 255 / 45%), 0 14px 50px rgb(0 0 0 / 18%); }
.cc-canvas-viewport.is-panning { cursor: grabbing; }
.cc-canvas-viewport.is-ai-fill { cursor: crosshair; box-shadow: inset 0 0 0 2px rgb(240 45 135 / 28%), 0 14px 50px rgb(0 0 0 / 18%); }
.cc-canvas-viewport #creatorCanvasSurface {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
  background: transparent;
  touch-action: none;
}
.cc-ai-art-layer {
  position: absolute;
  z-index: 2;
  inset: 8%;
  width: 84%;
  height: 84%;
  object-fit: contain;
  border-radius: 8px;
  pointer-events: none;
}

.cc-canvas-hud,
.cc-canvas-hint {
  position: absolute;
  z-index: 8;
  display: flex;
  align-items: center;
  color: #666b73;
  border: 1px solid rgb(17 19 23 / 9%);
  background: rgb(255 255 255 / 88%);
  box-shadow: 0 6px 18px rgb(0 0 0 / 8%);
  backdrop-filter: blur(10px);
}
.cc-canvas-hud { right: 12px; bottom: 12px; gap: 3px; padding: 4px; border-radius: 9px; }
.cc-canvas-hud > span { padding: 0 6px; font-size: .49rem; }
.cc-canvas-hud button { min-width: 28px; height: 28px; display: grid; place-items: center; padding: 0 6px; color: #565b63; border: 0; border-radius: 6px; background: transparent; font-size: .5rem; }
.cc-canvas-hud button:hover { color: #151619; background: #eceef0; }
.cc-canvas-hud button svg { width: 13px; height: 13px; }
.cc-canvas-hint { left: 12px; bottom: 12px; gap: 5px; padding: 7px 9px; border-radius: 8px; font-size: .48rem; }
.cc-canvas-hint svg { width: 12px; height: 12px; }

.creator-canvas-v4 .creator-canvas-ai-note {
  position: absolute;
  z-index: 9;
  top: 48%;
  left: 58%;
  max-width: min(360px, 38%);
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 13px;
  color: #17181b;
  border: 1px solid rgb(17 19 23 / 11%);
  border-radius: 10px;
  background: rgb(255 255 255 / 94%);
  box-shadow: 0 14px 42px rgb(0 0 0 / 14%);
  backdrop-filter: blur(12px);
}
.creator-canvas-v4 .creator-canvas-ai-note[hidden] { display: none; }
.creator-canvas-v4 .creator-canvas-ai-note > span { flex: 0 0 25px; height: 25px; display: grid; place-items: center; color: #30333a; border-radius: 7px; background: #eceef0; }
.creator-canvas-v4 .creator-canvas-ai-note > span svg { width: 13px; height: 13px; }
.creator-canvas-v4 .creator-canvas-ai-note > div { min-width: 0; display: grid; gap: 4px; }
.creator-canvas-v4 .creator-canvas-ai-note small { color: #777c84; font-size: .48rem; }
.creator-canvas-v4 .creator-canvas-ai-note strong { color: #16171a; font-size: .8rem; line-height: 1.25; }
.creator-canvas-v4 .creator-canvas-ai-note code { overflow-wrap: anywhere; color: #42464d; font-size: .58rem; }
.creator-canvas-v4 .creator-canvas-ai-note details { color: #555a63; font-size: .52rem; }
.creator-canvas-v4 .creator-canvas-ai-note ol { margin: 6px 0 0; padding-left: 16px; }
.creator-canvas-v4 .creator-canvas-ai-note.is-thinking > span svg { animation: cc-spin .9s linear infinite; }

.cc-inspector {
  min-width: 0;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 12px;
  overflow-y: auto;
  border-left: 1px solid var(--cc-line);
  background: var(--cc-bg);
}
.cc-mode-card,
.cc-layer-card,
.cc-history-card {
  display: grid;
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--cc-line);
  border-radius: 12px;
  background: var(--cc-panel);
}
.cc-mode-card:not(.is-visible) { display: none; }
.cc-mode-card > header,
.cc-layer-card header,
.cc-history-card > header { gap: 9px; }
.cc-mode-card > header > span,
.cc-layer-card header > span,
.cc-history-card > header > span {
  flex: 0 0 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: #d7d9dd;
  border: 1px solid var(--cc-line);
  border-radius: 8px;
  background: var(--cc-raised);
}
.cc-mode-card > header > span svg,
.cc-layer-card header > span svg,
.cc-history-card > header > span svg { width: 14px; height: 14px; }
.cc-mode-card header > div,
.cc-layer-card header > div,
.cc-history-card > header > div { min-width: 0; display: grid; gap: 2px; }
.cc-mode-card header strong,
.cc-layer-card header strong,
.cc-history-card > header strong { font-size: .66rem; }
.cc-mode-card header > em { margin-left: auto; color: #d7a36a; font-size: .49rem; font-style: normal; }
.cc-mode-card header > em.is-ready { color: #9dcaa7; }

.cc-fill-card {
  display: grid;
  gap: 10px;
  padding: 11px;
  border: 1px solid rgb(240 45 135 / 20%);
  border-radius: 11px;
  background: linear-gradient(145deg, rgb(240 45 135 / 8%), rgb(166 41 214 / 4%));
}
.cc-fill-card.is-active { border-color: rgb(240 45 135 / 50%); box-shadow: 0 0 0 2px rgb(240 45 135 / 8%); }
.cc-fill-card > header { display: flex; align-items: center; gap: 8px; }
.cc-fill-card > header > span { width: 27px; height: 27px; display: grid; place-items: center; color: #f174aa; border-radius: 8px; background: rgb(240 45 135 / 12%); }
.cc-fill-card > header > div { min-width: 0; display: grid; gap: 2px; }
.cc-fill-card > header strong { font-size: .61rem; }
.cc-fill-card > header small { color: var(--cc-muted); font-size: .47rem; }
.cc-fill-card > header em { margin-left: auto; color: #ef7daf; font-size: .46rem; font-style: normal; }
.cc-section-label { display: flex; align-items: center; gap: 7px; color: var(--cc-muted); font-size: .47rem; }
.cc-section-label::before,
.cc-section-label::after { height: 1px; flex: 1; content: ""; background: var(--cc-line); }
.cc-section-label span { white-space: nowrap; }

.cc-field { display: grid; gap: 6px; }
.cc-field > span,
.cc-range > span { color: #c5c8cd; font-size: .56rem; font-weight: 620; }
.cc-field > span em { float: right; color: var(--cc-muted); font-size: .49rem; font-style: normal; font-weight: 480; }
.cc-field :is(input, textarea, select),
.cc-inline-fields select {
  width: 100%;
  padding: 9px 10px;
  color: var(--cc-ink);
  border: 1px solid var(--cc-line);
  border-radius: 8px;
  outline: 0;
  background: #111215;
  font-size: .59rem;
  line-height: 1.45;
}
.cc-field textarea { min-height: 72px; resize: vertical; }
.cc-field :is(input, textarea, select):focus,
.cc-inline-fields select:focus { border-color: rgb(138 180 255 / 52%); box-shadow: 0 0 0 2px rgb(138 180 255 / 10%); }
.cc-range { display: grid; gap: 7px; }
.cc-range > span { display: flex; align-items: center; justify-content: space-between; }
.cc-range output { color: var(--cc-muted); font-size: .52rem; }
.cc-range input { width: 100%; accent-color: #e2e4e8; }
.cc-range.compact { padding-top: 3px; }
.cc-inline-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.cc-inline-fields label { display: grid; gap: 5px; color: var(--cc-muted); font-size: .51rem; }
.cc-run-button { width: 100%; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 9px; font-size: .61rem; }
.creator-canvas-v4 .cc-run-button.button.primary { color: var(--cc-accent-ink); border: 1px solid var(--cc-accent); background: var(--cc-accent); }
.creator-canvas-v4 .cc-run-button:disabled { color: #73777e; border-color: var(--cc-line); background: var(--cc-raised); opacity: .72; cursor: not-allowed; }
.cc-runtime-note { display: flex; align-items: flex-start; gap: 6px; margin: -3px 0 0; color: #8fb69a; font-size: .5rem; line-height: 1.4; }
.cc-runtime-note.has-warning { color: #d0a06d; }
.cc-runtime-note svg { flex: 0 0 12px; width: 12px; height: 12px; margin-top: 1px; }
.cc-runtime-note > span { min-width: 0; display: grid; gap: 2px; }
.cc-runtime-note small { color: var(--cc-muted); font-size: .46rem; }

.creator-canvas-auto { display: flex; align-items: flex-start; gap: 8px; color: var(--cc-ink); }
.creator-canvas-auto input { margin-top: 2px; accent-color: #dfe1e5; }
.creator-canvas-auto > span { display: grid; gap: 3px; }
.creator-canvas-auto strong { font-size: .57rem; }
.creator-canvas-auto small { color: var(--cc-muted); font-size: .49rem; line-height: 1.4; }

.cc-layer-card > button {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  color: var(--cc-ink);
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  text-align: left;
}
.cc-layer-card > button:hover { border-color: var(--cc-line); background: var(--cc-raised); }
.cc-layer-card > button > span { width: 27px; height: 27px; display: grid; place-items: center; color: var(--cc-muted); border-radius: 7px; background: var(--cc-raised); }
.cc-layer-card > button > span svg { width: 13px; height: 13px; }
.cc-layer-card > button > div { min-width: 0; display: grid; gap: 2px; }
.cc-layer-card > button strong { font-size: .57rem; }
.cc-layer-card > button small { overflow: hidden; color: var(--cc-muted); font-size: .48rem; text-overflow: ellipsis; white-space: nowrap; }
.cc-layer-card > button em { color: #a9adb4; font-size: .49rem; font-style: normal; }

.cc-history-list { display: grid; gap: 7px; }
.cc-history-list article { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; }
.cc-history-list img,
.cc-history-list article > span { width: 42px; height: 36px; object-fit: cover; border-radius: 7px; background: var(--cc-raised); }
.cc-history-list article > span { display: grid; place-items: center; color: var(--cc-muted); }
.cc-history-list article > span svg { width: 14px; height: 14px; }
.cc-history-list article > div { min-width: 0; display: grid; gap: 2px; }
.cc-history-list strong { font-size: .54rem; }
.cc-history-list small { overflow: hidden; color: var(--cc-muted); font-size: .46rem; text-overflow: ellipsis; white-space: nowrap; }
.cc-history-list button { padding: 5px 7px; color: #bfc2c8; border: 1px solid var(--cc-line); border-radius: 7px; background: transparent; font-size: .47rem; }
.cc-empty-history { min-height: 110px; display: grid; place-items: center; align-content: center; gap: 5px; color: var(--cc-muted); text-align: center; }
.cc-empty-history svg { width: 18px; height: 18px; opacity: .65; }
.cc-empty-history strong { color: #bfc2c8; font-size: .56rem; }
.cc-empty-history span { max-width: 230px; font-size: .48rem; line-height: 1.4; }

.cc-job-progress {
  position: absolute;
  z-index: 10;
  right: 28px;
  bottom: 28px;
  width: min(330px, calc(100% - 56px));
  display: grid;
  gap: 7px;
  padding: 11px;
  color: #1a1b1e;
  border: 1px solid rgb(15 17 20 / 10%);
  border-radius: 10px;
  background: rgb(255 255 255 / 94%);
  box-shadow: 0 12px 36px rgb(0 0 0 / 16%);
  backdrop-filter: blur(12px);
}
.cc-job-progress > span { height: 3px; overflow: hidden; border-radius: 999px; background: #e4e6e9; }
.cc-job-progress > span i { display: block; height: 100%; border-radius: inherit; background: #31343a; transition: width .2s ease; }
.cc-job-progress > div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; font-size: .52rem; }
.cc-job-progress em { color: #727780; font-style: normal; }
.cc-job-progress button { padding: 3px 6px; color: #6a6e76; border: 1px solid rgb(15 17 20 / 10%); border-radius: 6px; background: transparent; font-size: .47rem; }
.cc-job-progress button:hover { color: #1b1c20; background: #eceef0; }

.cc-footer {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 14px;
  border-top: 1px solid var(--cc-line);
  background: #141518;
}
.cc-footer > div { gap: 12px; }
.cc-footer > div:first-child { color: var(--cc-muted); font-size: .5rem; }
.cc-footer span { display: inline-flex; align-items: center; gap: 5px; }
.cc-footer span svg { width: 12px; height: 12px; }
.cc-footer button.danger { color: #cf9999; }

html[data-color-mode="light"] .page-stage .creator-canvas-v4 {
  --cc-bg: #f3f3f1;
  --cc-panel: #ffffff;
  --cc-raised: #ededeb;
  --cc-ink: #191a1c;
  --cc-muted: #676b72;
  --cc-line: rgb(20 22 26 / 10%);
  --cc-strong-line: rgb(20 22 26 / 16%);
  --cc-accent: #24262a;
  --cc-accent-ink: #ffffff;
  background: #f3f3f1;
  box-shadow: 0 20px 60px rgb(20 22 26 / 10%);
}
html[data-color-mode="light"] .cc-topbar { background: rgb(255 255 255 / 92%); }
html[data-color-mode="light"] .cc-mode-switch { background: #ececea; }
html[data-color-mode="light"] .cc-mode-switch button.active { color: #fff; background: #24262a; }
html[data-color-mode="light"] .cc-status-rail,
html[data-color-mode="light"] .cc-footer { background: #fafaf9; }
html[data-color-mode="light"] .cc-workspace { background: #e9e9e6; }
html[data-color-mode="light"] .cc-field :is(input, textarea, select),
html[data-color-mode="light"] .cc-inline-fields select { color: #202124; background: #fff; }
html[data-color-mode="light"] .creator-canvas-v4 .cc-run-button.button.primary { color: #fff; background: #24262a; border-color: #24262a; }
html[data-color-mode="light"] .creator-canvas-v4 .cc-run-button:disabled { color: #85888d; background: #ededeb; border-color: var(--cc-line); }
html[data-color-mode="light"] .cc-range input,
html[data-color-mode="light"] .creator-canvas-auto input { accent-color: #2a2c31; }

@keyframes cc-spin { to { transform: rotate(360deg); } }

@media (max-width: 1100px) {
  .cc-topbar { grid-template-columns: minmax(160px, 1fr) auto; }
  .cc-mode-switch { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .cc-workspace { grid-template-columns: minmax(0, 1fr) 300px; }
  .cc-footer > div:first-child span:last-child { display: none; }
}

@media (max-width: 820px) {
  .page-stage .creator-canvas-v4 { min-height: calc(100dvh - 10px); border-radius: 12px; overflow: auto; }
  .cc-topbar { position: sticky; z-index: 20; top: 0; grid-template-columns: 1fr auto; gap: 8px; }
  .cc-mode-switch { width: 100%; }
  .cc-mode-switch button { flex: 1; justify-content: center; }
  .cc-save-state { display: none; }
  .cc-status-rail em { display: none; }
  .cc-workspace { grid-template-columns: 1fr; overflow: visible; }
  .cc-stage-shell { min-height: 530px; padding: 8px; }
  .cc-canvas-viewport { min-height: 510px; }
  .cc-inspector { overflow: visible; border-top: 1px solid var(--cc-line); border-left: 0; }
  .cc-floating-tools { top: 18px; max-width: calc(100% - 28px); }
  .cc-floating-tools span { display: none; }
  .cc-floating-tools button,
  .cc-floating-tools label { min-width: 34px; min-height: 34px; }
  .cc-floating-tools .cc-stroke-size { width: 76px; }
  .cc-floating-tools .cc-stroke-size input { width: 62px; }
  .cc-canvas-hint { display: none; }
  .creator-canvas-v4 .creator-canvas-ai-note { left: 12%; max-width: 76%; }
  .cc-footer { align-items: flex-start; flex-direction: column; }
  .cc-footer > div:last-child { width: 100%; }
  .cc-footer button { flex: 1; }
}

@media (max-width: 520px) {
  .cc-topbar { grid-template-columns: minmax(0, 1fr) auto; }
  .cc-title-block > span { display: none; }
  .cc-top-actions button { font-size: 0; }
  .cc-top-actions button svg { width: 16px; height: 16px; }
  .cc-status-rail { justify-content: center; }
  .cc-status-rail b { width: 16px; }
  .cc-stage-shell { min-height: 460px; }
  .cc-canvas-viewport { min-height: 440px; }
  .cc-floating-tools .cc-stroke-size { display: none; }
  .cc-canvas-hud > span:first-child { display: none; }
  .cc-inline-fields { grid-template-columns: 1fr; }
  .cc-footer > div:first-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-save-state.is-saving svg,
  .creator-canvas-v4 .creator-canvas-ai-note.is-thinking > span svg { animation: none; }
}

/* Real Time Screen v4 — minimal live multimodal workspace */
.page-stage .rts-page {
  --rts-bg: #0b0c0e;
  --rts-panel: #111317;
  --rts-panel-soft: #16191e;
  --rts-text: #f3f4f6;
  --rts-muted: #9298a3;
  --rts-line: rgb(255 255 255 / 9%);
  --rts-strong: #f5f5f4;
  width: min(1320px, 100%);
  min-height: calc(100dvh - 86px);
  margin: 0 auto;
  overflow: hidden;
  color: var(--rts-text);
  border: 1px solid var(--rts-line);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% -24%, rgb(255 255 255 / 8%), transparent 40%),
    var(--rts-bg);
  box-shadow: 0 24px 80px rgb(0 0 0 / 22%);
}

.rts-page button,
.rts-page input,
.rts-page select,
.rts-page textarea { font: inherit; }
.rts-page button { color: inherit; }
.rts-page svg { width: 18px; height: 18px; }

.rts-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  gap: 20px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--rts-line);
  background: rgb(11 12 14 / 88%);
  backdrop-filter: blur(18px);
}
.rts-title-lockup,
.rts-top-actions,
.rts-live-pill,
.rts-private-pill { display: flex; align-items: center; }
.rts-title-lockup { gap: 11px; min-width: 0; }
.rts-app-mark { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border: 1px solid var(--rts-line); border-radius: 12px; background: var(--rts-panel-soft); }
.rts-app-mark svg { width: 17px; height: 17px; }
.rts-title-lockup > div { display: grid; gap: 1px; min-width: 0; }
.rts-title-lockup span:not(.rts-app-mark) { color: var(--rts-muted); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; }
.rts-title-lockup h2 { margin: 0; font-size: 1rem; letter-spacing: -.025em; }
.rts-top-actions { gap: 8px; }
.rts-live-pill,
.rts-private-pill { gap: 7px; min-height: 34px; padding: 0 11px; border: 1px solid var(--rts-line); border-radius: 999px; color: var(--rts-muted); font-size: .72rem; font-weight: 650; }
.rts-live-pill i,
.rts-connection-state i,
.rts-session-source i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #aeb4bd; }
.rts-live-pill i,
.rts-session-source i.live { background: #ef4444; box-shadow: 0 0 0 5px rgb(239 68 68 / 12%); animation: rts-pulse 1.8s ease-in-out infinite; }
.rts-live-pill b { color: var(--rts-text); font-variant-numeric: tabular-nums; }
.rts-private-pill svg { width: 14px; height: 14px; }
.rts-icon-button,
.rts-stop-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border: 1px solid var(--rts-line);
  border-radius: 10px;
  background: var(--rts-panel-soft);
  cursor: pointer;
}
.rts-icon-button { width: 36px; padding: 0; }
.rts-icon-button svg { width: 15px; height: 15px; }
.rts-icon-button:disabled { opacity: .35; cursor: not-allowed; }
.rts-stop-button { gap: 7px; padding: 0 13px; color: #fecaca !important; border-color: rgb(239 68 68 / 26%); background: rgb(127 29 29 / 26%); font-size: .75rem; font-weight: 700; }
.rts-stop-button svg { width: 15px; height: 15px; }

.rts-welcome {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100dvh - 160px);
  padding: clamp(48px, 8vw, 100px) 22px;
  text-align: center;
}
.rts-welcome-orbit { position: relative; display: grid; place-items: center; width: 92px; height: 92px; margin-bottom: 26px; }
.rts-welcome-orbit > span { z-index: 2; display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid rgb(255 255 255 / 14%); border-radius: 19px; background: linear-gradient(145deg, #262a31, #111317); box-shadow: 0 16px 35px rgb(0 0 0 / 30%); }
.rts-welcome-orbit > span svg { width: 24px; height: 24px; }
.rts-welcome-orbit > i { position: absolute; inset: 2px; border: 1px solid rgb(255 255 255 / 8%); border-radius: 50%; animation: rts-orbit 8s linear infinite; }
.rts-welcome-orbit > i:last-child { inset: -9px; border-style: dashed; animation-direction: reverse; animation-duration: 12s; }
.rts-eyebrow { margin-bottom: 13px; color: var(--rts-muted); font-size: .7rem; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.rts-welcome h1 { max-width: 760px; margin: 0; font-size: clamp(2.65rem, 6vw, 5.4rem); font-weight: 590; line-height: .94; letter-spacing: -.068em; }
.rts-welcome > p { max-width: 690px; margin: 24px auto 29px; color: var(--rts-muted); font-size: clamp(.94rem, 1.5vw, 1.08rem); line-height: 1.7; }
.rts-start-button { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 22px; border: 0; border-radius: 14px; color: #111317 !important; background: var(--rts-strong); box-shadow: 0 10px 35px rgb(255 255 255 / 10%); font-weight: 760; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.rts-start-button:hover { transform: translateY(-1px); box-shadow: 0 14px 42px rgb(255 255 255 / 14%); }
.rts-start-button:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.rts-start-options { display: grid; width: min(620px, 100%); gap: 8px; margin-top: 26px; text-align: left; }
.rts-start-options label { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 58px; padding: 11px 13px; border: 1px solid var(--rts-line); border-radius: 14px; background: rgb(255 255 255 / 2.5%); }
.rts-start-options label > span { display: grid; gap: 2px; }
.rts-start-options strong { font-size: .8rem; }
.rts-start-options small { color: var(--rts-muted); font-size: .68rem; line-height: 1.35; }
.rts-start-options input { width: 16px; height: 16px; accent-color: #e5e7eb; }
.rts-start-options select { min-height: 34px; padding: 0 28px 0 10px; border: 1px solid var(--rts-line); border-radius: 9px; color: var(--rts-text); background: #15171b; font-size: .72rem; }
.rts-browser-note { margin-top: 18px; color: #6f7580; font-size: .67rem; }
.rts-browser-note.is-error { color: #fca5a5; }
.rts-inline-error { display: flex; align-items: flex-start; width: min(620px, 100%); gap: 9px; margin-top: 14px; padding: 12px 14px; border: 1px solid rgb(239 68 68 / 25%); border-radius: 12px; color: #fecaca; background: rgb(127 29 29 / 18%); font-size: .74rem; line-height: 1.5; text-align: left; }
.rts-inline-error svg { width: 16px; height: 16px; flex: 0 0 16px; }

.rts-session-layout { display: grid; grid-template-columns: minmax(0, 1fr) 286px; min-height: calc(100dvh - 160px); }
.rts-conversation { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; min-width: 0; border-right: 1px solid var(--rts-line); }
.rts-conversation-head { display: flex; align-items: center; justify-content: space-between; min-height: 58px; gap: 16px; padding: 10px 18px; border-bottom: 1px solid var(--rts-line); }
.rts-conversation-head > div { display: grid; min-width: 0; gap: 2px; }
.rts-conversation-head strong { overflow: hidden; font-size: .79rem; text-overflow: ellipsis; white-space: nowrap; }
.rts-conversation-head span { color: var(--rts-muted); font-size: .66rem; text-transform: capitalize; }
.rts-connection-state { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.rts-connection-state i { background: #5fce8a; box-shadow: 0 0 0 4px rgb(95 206 138 / 10%); }
.rts-connection-state.is-error { color: #fca5a5; }
.rts-connection-state.is-error i { background: #ef4444; }
.rts-transcript { min-height: 0; max-height: calc(100dvh - 322px); overflow-y: auto; padding: 28px clamp(18px, 4vw, 54px); scrollbar-width: thin; scrollbar-color: #34373d transparent; }
.rts-transcript-empty { display: grid; place-items: center; max-width: 430px; min-height: 360px; margin: auto; color: var(--rts-muted); text-align: center; }
.rts-transcript-empty > span { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 12px; border: 1px solid var(--rts-line); border-radius: 14px; background: var(--rts-panel-soft); }
.rts-transcript-empty strong { color: var(--rts-text); font-size: .92rem; }
.rts-transcript-empty p { max-width: 330px; margin: 7px 0 0; font-size: .74rem; line-height: 1.55; }
.rts-message { max-width: 760px; margin: 0 auto 26px; }
.rts-message-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.rts-message-meta strong { font-size: .7rem; letter-spacing: .02em; }
.rts-message-meta time { color: #6f7580; font-size: .63rem; }
.rts-message-copy { color: #d9dbe0; font-size: .91rem; line-height: 1.65; white-space: pre-wrap; }
.rts-message.user .rts-message-copy { width: fit-content; max-width: 82%; margin-left: auto; padding: 11px 14px; border: 1px solid var(--rts-line); border-radius: 15px 15px 4px 15px; color: var(--rts-text); background: var(--rts-panel-soft); }
.rts-message.user .rts-message-meta strong { margin-left: auto; }
.rts-message.user .rts-message-meta time { order: -1; }
.rts-message figure { width: min(520px, 86%); margin: 0 0 12px auto; overflow: hidden; border: 1px solid var(--rts-line); border-radius: 14px; background: #07080a; }
.rts-message figure img { display: block; width: 100%; max-height: 260px; object-fit: cover; }
.rts-message figcaption { display: flex; align-items: center; gap: 7px; padding: 8px 10px; color: var(--rts-muted); font-size: .62rem; }
.rts-message figcaption svg { width: 13px; height: 13px; }
.rts-message.is-interim { opacity: .62; }
.rts-stream-caret { display: inline-block; width: 6px; height: 1em; margin-left: 4px; vertical-align: -.14em; background: #d1d5db; animation: rts-caret .8s steps(2) infinite; }

.rts-composer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 10px; margin: 0 clamp(14px, 3vw, 36px) 18px; padding: 9px; border: 1px solid var(--rts-line); border-radius: 17px; background: #13161a; box-shadow: 0 16px 42px rgb(0 0 0 / 24%); }
.rts-composer textarea { width: 100%; min-height: 40px; max-height: 132px; padding: 10px 2px 7px; resize: none; border: 0; outline: 0; color: var(--rts-text); background: transparent; font-size: .82rem; line-height: 1.45; }
.rts-composer textarea::placeholder { color: #6e737d; }
.rts-mic-button,
.rts-send-button { position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 12px; cursor: pointer; }
.rts-mic-button { border: 1px solid var(--rts-line); background: #1b1e23; }
.rts-mic-button.is-muted { color: #fca5a5; background: rgb(127 29 29 / 20%); }
.rts-mic-button:disabled { opacity: .35; cursor: not-allowed; }
.rts-mic-button > svg { z-index: 2; width: 16px; height: 16px; }
.rts-voice-rings { position: absolute; inset: 4px; border: 1px solid rgb(255 255 255 / 22%); border-radius: 10px; opacity: var(--voice); }
.rts-send-button { color: #111317 !important; background: var(--rts-strong); }
.rts-send-button svg { width: 16px; height: 16px; }
.rts-session-warning { display: flex; align-items: flex-start; gap: 8px; margin: -8px 36px 13px; color: #fcd9a2; font-size: .67rem; line-height: 1.45; }
.rts-session-warning svg { width: 14px; height: 14px; flex: 0 0 14px; }

.rts-session-panel { display: flex; min-width: 0; flex-direction: column; gap: 0; background: #0d0f12; }
.rts-session-panel > section { padding: 18px; border-bottom: 1px solid var(--rts-line); }
.rts-panel-label { display: block; margin-bottom: 14px; color: #717782; font-size: .61rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.rts-session-source { display: flex; align-items: center; gap: 11px; }
.rts-session-source > span { display: grid; min-width: 0; gap: 3px; }
.rts-session-source strong { font-size: .75rem; }
.rts-session-source small { overflow: hidden; color: var(--rts-muted); font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.rts-wave-panel canvas { display: block; width: 100%; height: 52px; }
.rts-wave-panel > div { display: flex; justify-content: space-between; margin-top: 7px; color: var(--rts-muted); font-size: .63rem; }
.rts-wave-panel b { color: var(--rts-text); font-variant-numeric: tabular-nums; }
.rts-session-details { display: grid; gap: 13px; }
.rts-session-details div { display: flex; justify-content: space-between; gap: 12px; }
.rts-session-details span { color: var(--rts-muted); font-size: .65rem; }
.rts-session-details strong { overflow: hidden; max-width: 148px; font-size: .67rem; font-weight: 650; text-transform: capitalize; text-overflow: ellipsis; white-space: nowrap; }
.rts-privacy-copy { display: flex; gap: 10px; margin-top: auto; color: var(--rts-muted); }
.rts-privacy-copy > svg { width: 16px; height: 16px; flex: 0 0 16px; }
.rts-privacy-copy p { display: grid; gap: 4px; margin: 0; }
.rts-privacy-copy strong { color: var(--rts-text); font-size: .7rem; }
.rts-privacy-copy span { font-size: .63rem; line-height: 1.45; }

.rts-floating-preview { position: fixed; z-index: 140; right: 24px; bottom: 24px; display: grid; grid-template-rows: auto minmax(90px, 1fr) auto; width: min(340px, calc(100vw - 32px)); height: 236px; min-width: 230px; min-height: 168px; max-width: min(720px, calc(100vw - 20px)); max-height: min(520px, calc(100dvh - 20px)); overflow: hidden; resize: both; border: 1px solid rgb(255 255 255 / 15%); border-radius: 16px; color: #f3f4f6; background: #0a0b0d; box-shadow: 0 22px 70px rgb(0 0 0 / 46%); }
.rts-floating-preview > header,
.rts-floating-preview > footer { display: flex; align-items: center; justify-content: space-between; gap: 9px; min-height: 35px; padding: 6px 9px; background: rgb(18 20 24 / 96%); }
.rts-floating-preview > header { cursor: grab; user-select: none; }
.rts-floating-preview > header:active { cursor: grabbing; }
.rts-floating-preview > header > span { display: flex; align-items: center; gap: 7px; font-size: .65rem; font-weight: 700; }
.rts-floating-preview > header i { width: 6px; height: 6px; border-radius: 50%; background: #ef4444; }
.rts-floating-preview button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 8px; background: rgb(255 255 255 / 7%); cursor: pointer; }
.rts-floating-preview button svg { width: 13px; height: 13px; }
.rts-floating-preview video { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; background: #050506; }
.rts-floating-preview > footer { color: #9da3ae; font-size: .6rem; }
.rts-floating-preview > footer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rts-floating-preview.is-minimized { width: 190px; min-width: 190px; height: 38px; min-height: 38px; resize: none; }
.rts-floating-preview.is-minimized video,
.rts-floating-preview.is-minimized > footer { display: none; }

html[data-color-mode="light"] .page-stage .rts-page {
  --rts-bg: #f4f4f2;
  --rts-panel: #ffffff;
  --rts-panel-soft: #ececea;
  --rts-text: #1a1b1e;
  --rts-muted: #696e76;
  --rts-line: rgb(18 20 24 / 10%);
  --rts-strong: #232529;
  background: #f4f4f2;
  box-shadow: 0 24px 70px rgb(24 27 32 / 10%);
}
html[data-color-mode="light"] .rts-topbar { background: rgb(255 255 255 / 90%); }
html[data-color-mode="light"] .rts-start-button,
html[data-color-mode="light"] .rts-send-button { color: #fff !important; }
html[data-color-mode="light"] .rts-start-options select { color: #202124; background: #fff; }
html[data-color-mode="light"] .rts-conversation { background: #fafaf9; }
html[data-color-mode="light"] .rts-session-panel { background: #f0f0ee; }
html[data-color-mode="light"] .rts-composer { background: #fff; box-shadow: 0 16px 36px rgb(20 22 26 / 10%); }
html[data-color-mode="light"] .rts-message-copy { color: #373a40; }
html[data-color-mode="light"] .rts-stream-caret { background: #303238; }

@keyframes rts-pulse { 50% { opacity: .48; } }
@keyframes rts-orbit { to { transform: rotate(360deg); } }
@keyframes rts-caret { 50% { opacity: 0; } }

@media (max-width: 900px) {
  .page-stage .rts-page { min-height: calc(100dvh - 74px); border-radius: 16px; }
  .rts-session-layout { grid-template-columns: 1fr; }
  .rts-conversation { min-height: calc(100dvh - 150px); border-right: 0; }
  .rts-session-panel { display: none; }
  .rts-transcript { max-height: calc(100dvh - 310px); padding-inline: 18px; }
  .rts-floating-preview { right: 14px; bottom: 14px; }
}

@media (max-width: 600px) {
  .rts-topbar { min-height: 62px; padding: 10px 12px; }
  .rts-title-lockup > div > span,
  .rts-private-pill { display: none; }
  .rts-live-pill { padding-inline: 9px; }
  .rts-welcome { min-height: calc(100dvh - 130px); padding: 42px 16px; }
  .rts-welcome h1 { font-size: clamp(2.45rem, 13vw, 3.6rem); }
  .rts-start-options label { grid-template-columns: auto minmax(0, 1fr); }
  .rts-start-options select { grid-column: 1 / -1; width: 100%; }
  .rts-conversation-head { padding-inline: 13px; }
  .rts-conversation-head > div span { display: none; }
  .rts-message.user .rts-message-copy { max-width: 92%; }
  .rts-composer { margin-inline: 9px; margin-bottom: 10px; }
  .rts-floating-preview { width: 220px; height: 154px; min-width: 190px; min-height: 128px; }
}

@media (prefers-reduced-motion: reduce) {
  .rts-live-pill i,
  .rts-session-source i.live,
  .rts-welcome-orbit > i,
  .rts-stream-caret { animation: none; }
}
/* Voice Mode — full-duplex, task-bound, and intentionally minimal. */
.voice-live-overlay {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: 18px;
  background: color-mix(in srgb, var(--bg) 74%, transparent);
  backdrop-filter: blur(26px) saturate(0.8);
}

.voice-live-experience {
  --voice-input: 0;
  --voice-output: 0;
  position: relative;
  isolation: isolate;
  width: min(100%, 980px);
  min-height: min(760px, calc(100dvh - 138px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  overflow: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 42%, rgb(105 122 155 / 0.11), transparent 36%),
    color-mix(in srgb, var(--surface) 96%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--line) 82%, var(--text) 18%);
  border-radius: 28px;
  box-shadow: 0 32px 100px rgb(0 0 0 / 0.28);
}

.chat-message.voice-origin {
  position: relative;
}

.voice-origin-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: max-content;
  max-width: 100%;
  padding: 0.22rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--line, #383838) 78%, transparent);
  border-radius: 999px;
  color: var(--text-soft, #a4a4a4);
  background: color-mix(in srgb, var(--surface, #171717) 86%, transparent);
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.voice-origin-badge svg {
  width: 0.78rem;
  height: 0.78rem;
}

.voice-origin-badge.user {
  margin: 0 0 0.45rem auto;
}

.voice-live-experience.is-integrated {
  width: min(100%, 1060px);
  margin: 0 auto;
}

.voice-live-experience.is-overlay {
  min-height: min(820px, calc(100dvh - 36px));
  box-shadow: 0 44px 150px rgb(0 0 0 / 0.5);
}

.voice-live-header {
  min-width: 0;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.voice-live-header > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.voice-live-header > div:first-child {
  display: grid;
  gap: 3px;
}

.voice-live-header > div:first-child > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 720;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.voice-live-header svg {
  width: 16px;
  height: 16px;
}

.voice-live-header h2 {
  max-width: min(58vw, 560px);
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-live-privacy {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  color: var(--text-soft);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.7rem;
}

.voice-live-privacy i {
  width: 7px;
  height: 7px;
  background: #858a91;
  border-radius: 50%;
}

.voice-live-experience.listening .voice-live-privacy i,
.voice-live-experience.speaking .voice-live-privacy i,
.voice-live-experience.thinking .voice-live-privacy i {
  background: #ef5d5d;
  box-shadow: 0 0 0 4px rgb(239 93 93 / 0.12);
}

.voice-live-stage {
  position: relative;
  min-height: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 18px;
  padding: 26px clamp(18px, 4vw, 52px) 20px;
}

.voice-live-orb {
  position: relative;
  width: clamp(174px, 24vw, 246px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transform: scale(calc(1 + (var(--voice-input) * 0.13) + (var(--voice-output) * 0.09)));
  transition: transform 70ms linear, filter 180ms ease;
}

.voice-live-orb:disabled {
  cursor: default;
}

.voice-live-orb::before,
.voice-live-orb::after,
.voice-live-orb > i {
  content: "";
  position: absolute;
  border-radius: inherit;
}

.voice-live-orb::before {
  inset: 0;
  background:
    radial-gradient(circle at 35% 26%, rgb(255 255 255 / 0.92), transparent 18%),
    radial-gradient(circle at 66% 70%, #7487ff, transparent 48%),
    radial-gradient(circle at 30% 70%, #56d5e8, transparent 50%),
    linear-gradient(145deg, #dbe8ec, #808bff 55%, #7651bc);
  box-shadow: 0 24px 70px rgb(72 100 180 / 0.3), inset 0 1px rgb(255 255 255 / 0.5);
  animation: voiceLiveBreathe 3.4s ease-in-out infinite;
}

.voice-live-orb::after {
  inset: -15px;
  border: 1px solid rgb(130 155 205 / 0.22);
  box-shadow: 0 0 0 calc(4px + (var(--voice-input) * 20px)) rgb(95 176 210 / 0.05);
  animation: voiceLiveRing 2.8s ease-out infinite;
}

.voice-live-orb > i:nth-child(1) {
  inset: 15%;
  background: conic-gradient(from 40deg, transparent, rgb(255 255 255 / 0.28), transparent 52%);
  filter: blur(7px);
  animation: voiceLiveTurn 5.8s linear infinite;
}

.voice-live-orb > i:nth-child(2) {
  inset: 27%;
  background: rgb(255 255 255 / calc(0.08 + (var(--voice-output) * 0.28)));
  filter: blur(14px);
}

.voice-live-orb > i:nth-child(3) {
  inset: -34px;
  border: 1px solid rgb(129 148 200 / 0.1);
  transform: scale(calc(0.9 + (var(--voice-input) * 0.18)));
}

.voice-live-orb > span {
  position: relative;
  z-index: 2;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  color: rgb(255 255 255 / 0.9);
  background: rgb(6 10 17 / 0.15);
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: 50%;
  backdrop-filter: blur(8px);
}

.voice-live-orb > span svg {
  width: 23px;
  height: 23px;
}

.voice-live-orb.speaking::before {
  background:
    radial-gradient(circle at 33% 24%, #fff6d6, transparent 21%),
    radial-gradient(circle at 68% 68%, #ff6c8f, transparent 49%),
    radial-gradient(circle at 28% 72%, #ffac5d, transparent 52%),
    linear-gradient(145deg, #f8dca8, #e8709b 55%, #8c58c7);
  animation-duration: 1.2s;
}

.voice-live-orb.speaking::after {
  border-color: rgb(255 153 125 / 0.3);
  animation-duration: 1.1s;
}

.voice-live-orb.thinking::before {
  filter: saturate(0.65);
  animation: voiceLiveTurn 2.8s linear infinite;
}

.voice-live-orb.interrupted::before,
.voice-live-orb.error::before,
.voice-live-experience.muted .voice-live-orb::before {
  filter: grayscale(0.75) saturate(0.55);
}

.voice-live-state {
  max-width: 620px;
  display: grid;
  justify-items: center;
  gap: 5px;
  text-align: center;
}

.voice-live-state strong {
  color: var(--text);
  font-size: 1.05rem;
}

.voice-live-state p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.82rem;
  line-height: 1.5;
}

.voice-live-state small {
  color: var(--muted);
  font: 0.68rem/1.35 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-transform: capitalize;
}

.voice-live-captions {
  width: min(680px, 100%);
  max-height: 190px;
  display: grid;
  gap: 7px;
  padding: 3px 5px 3px 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.voice-live-caption {
  min-width: 0;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 9px 11px;
  color: var(--text-soft);
  background: color-mix(in srgb, var(--surface-2) 84%, transparent);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.voice-live-caption.user {
  background: color-mix(in srgb, var(--surface-2) 70%, #8293bd 7%);
}

.voice-live-caption span,
.voice-live-caption time {
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.45;
}

.voice-live-caption p {
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.45;
}

.voice-live-caption.is-partial {
  opacity: 0.68;
}

.voice-live-error {
  width: min(680px, 100%);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  color: color-mix(in srgb, var(--text) 88%, #e15151 12%);
  background: rgb(190 66 66 / 0.09);
  border: 1px solid rgb(215 88 88 / 0.2);
  border-radius: 12px;
  font-size: 0.74rem;
}

.voice-live-error svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.voice-live-controls {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
}

.voice-control-button,
.voice-start-button {
  display: inline-grid;
  place-items: center;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line);
  cursor: pointer;
}

.voice-control-button {
  width: 58px;
  height: 58px;
  border-radius: 50%;
}

.voice-control-button svg {
  width: 20px;
  height: 20px;
}

.voice-control-button span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.voice-control-button.interrupt {
  color: var(--text-soft);
}

.voice-control-button.end {
  color: white;
  background: #d84e4e;
  border-color: #d84e4e;
}

.voice-start-button {
  min-height: 48px;
  grid-auto-flow: column;
  gap: 9px;
  padding: 0 18px;
  color: var(--surface);
  background: var(--text);
  border-color: var(--text);
  border-radius: 999px;
  font-weight: 720;
}

.voice-start-button svg {
  width: 18px;
  height: 18px;
}

.voice-live-footnote {
  min-height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 16px 10px;
  color: var(--muted);
  font-size: 0.64rem;
  text-align: center;
}

.voice-live-footnote svg {
  width: 13px;
  height: 13px;
}

.voice-live-settings {
  z-index: 10;
  right: clamp(14px, 3vw, 34px);
  bottom: 18px;
  width: min(390px, calc(100% - 28px));
  padding: 16px;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  border-color: var(--line);
  box-shadow: 0 28px 90px rgb(0 0 0 / 0.35);
  backdrop-filter: blur(24px);
}

.voice-live-settings header > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.voice-live-settings header small,
.voice-live-settings .voice-toggle-row small {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 500;
}

.voice-live-settings select {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--line);
}

.voice-live-settings fieldset {
  min-width: 0;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.voice-live-settings legend {
  margin-bottom: 8px;
  color: var(--text-soft);
  font-size: 0.76rem;
  font-weight: 700;
}

.voice-intelligence-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.voice-live-settings .voice-intelligence-options label {
  position: relative;
  min-width: 0;
  display: block;
  cursor: pointer;
}

.voice-intelligence-options input {
  position: absolute;
  opacity: 0;
}

.voice-intelligence-options span {
  min-height: 62px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 9px;
  color: var(--text-soft);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 11px;
  text-align: center;
}

.voice-intelligence-options input:checked + span {
  color: var(--text);
  border-color: color-mix(in srgb, var(--text) 42%, var(--line));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 18%, transparent);
}

.voice-intelligence-options b {
  font-size: 0.72rem;
}

.voice-intelligence-options small {
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 500;
}

.voice-live-settings .voice-toggle-row > span {
  display: grid;
  gap: 2px;
}

@keyframes voiceLiveBreathe {
  0%, 100% { transform: scale(0.97) rotate(-1deg); filter: hue-rotate(0deg); }
  50% { transform: scale(1.025) rotate(1deg); filter: hue-rotate(8deg); }
}

@keyframes voiceLiveRing {
  0% { transform: scale(0.94); opacity: 0; }
  35% { opacity: 0.8; }
  100% { transform: scale(1.14); opacity: 0; }
}

@keyframes voiceLiveTurn {
  to { transform: rotate(360deg); }
}

@media (max-width: 720px) {
  .voice-live-overlay { padding: 0; }
  .voice-live-experience,
  .voice-live-experience.is-overlay,
  .voice-live-experience.is-integrated {
    width: 100%;
    min-height: 100dvh;
    border-width: 0;
    border-radius: 0;
  }
  .voice-live-experience.is-integrated {
    height: calc(100dvh - 120px);
    min-height: 0;
  }
  .voice-live-header { min-height: 64px; padding: 12px; }
  .voice-live-header h2 { max-width: 46vw; }
  .voice-live-privacy { display: none; }
  .voice-live-stage { gap: 14px; padding: 18px 14px; }
  .voice-live-orb { width: clamp(164px, 52vw, 220px); }
  .voice-live-captions { max-height: 220px; }
  .voice-live-caption { grid-template-columns: 54px minmax(0, 1fr); }
  .voice-live-caption time { display: none; }
  .voice-live-settings { position: fixed; inset: auto 8px 8px; width: auto; max-height: calc(100dvh - 92px); overflow-y: auto; }
  .voice-intelligence-options { grid-template-columns: 1fr; }
  .voice-live-controls { min-height: 72px; }
  .voice-control-button { width: 54px; height: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  .voice-live-orb,
  .voice-live-orb::before,
  .voice-live-orb::after,
  .voice-live-orb > i {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-height: 760px) and (min-width: 721px) {
  .voice-live-experience,
  .voice-live-experience.is-overlay,
  .voice-live-experience.is-integrated {
    min-height: 0;
  }

  .voice-live-experience.is-integrated { height: calc(100dvh - 138px); }
  .voice-live-experience.is-overlay { height: calc(100dvh - 36px); }

  .voice-live-header { min-height: 58px; padding: 10px 14px; }
  .voice-live-stage { gap: 8px; padding: 9px 28px 7px; overflow-y: auto; }
  .voice-live-orb { width: 128px; }
  .voice-live-state { gap: 2px; }
  .voice-live-captions { max-height: 86px; }
  .voice-live-controls { min-height: 60px; padding: 6px 14px; }
  .voice-control-button { width: 46px; height: 46px; }
  .voice-live-footnote { min-height: 26px; padding: 4px 12px 6px; }
}

/* Agent Studio — operational 2D tile-map view. */
.agent-studio-toggle {
  color: var(--text-soft);
}

.agent-studio-overlay {
  --studio-ink: #f8f3e8;
  --studio-muted: #a9b6ae;
  --studio-line: rgb(255 255 255 / 0.12);
  --studio-panel: rgb(25 31 32 / 0.96);
  position: fixed;
  inset: 0;
  z-index: 3200;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  overflow: hidden;
  color: var(--studio-ink);
  background: #1b2425;
  font-family: var(--sv2-sans, Inter, system-ui, sans-serif);
}

.agent-studio-head {
  z-index: 10;
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 16px 12px 20px;
  background:
    linear-gradient(90deg, rgb(29 39 37 / 0.98), rgb(33 38 43 / 0.98)),
    #202a2a;
  border-bottom: 1px solid var(--studio-line);
  box-shadow: 0 10px 34px rgb(0 0 0 / 0.22);
}

.agent-studio-title {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.agent-studio-title > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #9cc7ae;
  font-size: 0.65rem;
  font-weight: 760;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.agent-studio-title > span i,
.agent-studio-connection i {
  width: 7px;
  height: 7px;
  background: #738079;
  border-radius: 50%;
}

.agent-studio-title strong {
  color: var(--studio-ink);
  font: 760 1.16rem/1.15 Georgia, "Times New Roman", serif;
  letter-spacing: -0.02em;
}

.agent-studio-title p {
  margin: 0;
  color: var(--studio-muted);
  font-size: 0.72rem;
}

.agent-studio-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.agent-studio-actions .button {
  min-height: 37px;
  border-radius: 8px;
}

.agent-studio-connection {
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  color: var(--studio-muted);
  background: rgb(255 255 255 / 0.045);
  border: 1px solid var(--studio-line);
  border-radius: 999px;
  font-size: 0.67rem;
  font-weight: 680;
  text-transform: capitalize;
}

.agent-studio-connection.is-live i {
  background: #59d58d;
  box-shadow: 0 0 0 4px rgb(89 213 141 / 0.12);
}

.agent-studio-connection.is-reconnecting i,
.agent-studio-connection.is-loading i,
.agent-studio-connection.is-connecting i {
  background: #efbe5e;
  animation: agentStudioPulse 1.3s steps(2, end) infinite;
}

.agent-studio-connection.is-error i,
.agent-studio-connection.is-paused i {
  background: #e16868;
}

.agent-studio-close,
.agent-studio-assignment > header > button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
  color: var(--studio-muted);
  background: rgb(255 255 255 / 0.04);
  border: 1px solid var(--studio-line);
  border-radius: 8px;
}

.agent-studio-close svg,
.agent-studio-assignment > header > button svg {
  width: 16px;
  height: 16px;
}

.agent-studio-layout {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 210px minmax(420px, 1fr) 360px;
  transition: grid-template-columns 160ms ease;
}

.agent-studio-layout.floor-is-collapsed {
  grid-template-columns: 52px minmax(420px, 1fr) 360px;
}

.agent-studio-layout.task-panel-is-collapsed {
  grid-template-columns: 210px minmax(420px, 1fr) 52px;
}

.agent-studio-layout.floor-is-collapsed.task-panel-is-collapsed {
  grid-template-columns: 52px minmax(420px, 1fr) 52px;
}

.agent-studio-zone-rail,
.agent-studio-command-deck {
  position: relative;
  z-index: 6;
  min-width: 0;
  min-height: 0;
  background: var(--studio-panel);
}

.agent-studio-zone-rail {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 10px;
  padding: 13px 11px;
  border-right: 1px solid var(--studio-line);
}

.agent-studio-zone-rail > header,
.agent-studio-command-deck > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.agent-studio-task-panel-toggle {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
  color: #a8b4ae;
  border: 1px solid var(--studio-line);
  border-radius: 6px;
  background: rgb(255 255 255 / 0.04);
}

.agent-studio-task-panel-toggle:hover { color: #fff5dc; background: rgb(255 255 255 / 0.09); }
.agent-studio-task-panel-toggle svg { width: 13px; height: 13px; }
.agent-studio-command-deck:not(.is-collapsed) .agent-studio-task-panel-toggle svg { transform: rotate(180deg); }
.agent-studio-command-deck.is-collapsed { grid-template-rows: auto minmax(0, 1fr); }
.agent-studio-command-deck.is-collapsed > header { justify-content: center; padding: 10px 5px; }
.agent-studio-command-deck.is-collapsed > header > div,
.agent-studio-command-deck.is-collapsed > header > span { display: none; }
.agent-studio-collapsed-label {
  align-self: start;
  justify-self: center;
  margin-top: 14px;
  color: #84918b;
  font-size: 0.59rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

.agent-studio-zone-rail > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.agent-studio-zone-rail > header > small { grid-column: 1; }

.agent-studio-floor-toggle {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #9eaaa4;
  border: 1px solid var(--studio-line);
  border-radius: 6px;
  background: rgb(255 255 255 / 0.035);
}

.agent-studio-floor-toggle:hover { color: #f5f0df; background: rgb(255 255 255 / 0.08); }
.agent-studio-floor-toggle svg { width: 13px; height: 13px; transform: rotate(180deg); }
.agent-studio-layout.floor-is-collapsed .agent-studio-floor-toggle svg { transform: none; }

.agent-studio-zone-rail > header span,
.agent-studio-command-deck > header small {
  color: var(--studio-muted);
  font-size: 0.65rem;
  font-weight: 720;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.agent-studio-zone-rail > header small {
  color: #788780;
  font-size: 0.58rem;
}

#agentStudioMinimap {
  width: 100%;
  height: auto;
  aspect-ratio: 184 / 118;
  image-rendering: pixelated;
  background: #ead397;
  border: 2px solid #52625d;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18), 0 8px 22px rgb(0 0 0 / 0.18);
}

.agent-studio-zone-rail nav {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 3px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.agent-studio-zone-rail nav button {
  min-width: 0;
  min-height: 39px;
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 6px 7px;
  color: #bec8c1;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  text-align: left;
}

.agent-studio-zone-rail nav button:first-child {
  grid-template-columns: 16px minmax(0, 1fr);
  color: #dce4de;
}

.agent-studio-layout.floor-is-collapsed .agent-studio-zone-rail {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  padding: 13px 7px;
}

.agent-studio-layout.floor-is-collapsed .agent-studio-zone-rail > header {
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
}

.agent-studio-layout.floor-is-collapsed .agent-studio-zone-rail > header > :not(.agent-studio-floor-toggle),
.agent-studio-layout.floor-is-collapsed #agentStudioMinimap,
.agent-studio-layout.floor-is-collapsed .agent-studio-zone-rail nav button > span {
  display: none;
}

.agent-studio-layout.floor-is-collapsed .agent-studio-floor-toggle {
  grid-column: 1;
  grid-row: 1;
}

.agent-studio-layout.floor-is-collapsed .agent-studio-zone-rail nav {
  justify-items: center;
  overflow-x: hidden;
}

.agent-studio-layout.floor-is-collapsed .agent-studio-zone-rail nav button,
.agent-studio-layout.floor-is-collapsed .agent-studio-zone-rail nav button:first-child {
  width: 36px;
  min-height: 36px;
  grid-template-columns: 1fr;
  place-items: center;
  padding: 6px;
  text-align: center;
}

.agent-studio-zone-rail nav button:hover,
.agent-studio-zone-rail nav button.is-active {
  color: #fff8e9;
  background: rgb(255 255 255 / 0.055);
  border-color: var(--studio-line);
}

.agent-studio-zone-rail nav button > i {
  width: 7px;
  height: 7px;
  background: var(--zone-color, #90aaa0);
  border-radius: 2px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--zone-color, #90aaa0) 18%, transparent);
}

.agent-studio-zone-rail nav button svg {
  width: 14px;
  height: 14px;
}

.agent-studio-zone-rail nav button > span {
  min-width: 0;
  display: grid;
  gap: 1px;
  font-size: 0.69rem;
  font-weight: 680;
}

.agent-studio-zone-rail nav button small {
  overflow: hidden;
  color: #77837e;
  font-size: 0.56rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-studio-map-wrap {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #202c2d;
}

.agent-studio-canvas,
.agent-studio-surface {
  width: 100%;
  height: 100%;
  display: block;
}

.agent-studio-canvas {
  position: absolute;
  inset: 0;
}

.agent-studio-surface {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  outline: 0;
  cursor: grab;
  touch-action: none;
}

.agent-studio-surface.is-panning {
  cursor: grabbing;
}

.agent-studio-surface:focus-visible {
  box-shadow: inset 0 0 0 3px #fff3a6;
}

.agent-studio-loading {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  color: #f5f0df;
  background: #202b2c;
}

.agent-studio-loading i {
  width: 26px;
  height: 26px;
  border: 4px solid rgb(255 255 255 / 0.12);
  border-top-color: #eec865;
  border-radius: 50%;
  animation: agentStudioSpin 0.9s steps(8, end) infinite;
}

.agent-studio-loading strong {
  font: 700 0.83rem/1.2 Georgia, serif;
}

.agent-studio-loading span {
  color: var(--studio-muted);
  font-size: 0.67rem;
}

.agent-studio-camera-controls {
  position: absolute;
  z-index: 5;
  right: 13px;
  bottom: 40px;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 5px;
  color: #d9e1dc;
  background: rgb(28 34 35 / 0.9);
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 9px;
  box-shadow: 0 12px 34px rgb(0 0 0 / 0.25);
  backdrop-filter: blur(12px);
}

.agent-studio-camera-controls button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #b9c4bd;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
}

.agent-studio-camera-controls button:hover,
.agent-studio-camera-controls button.is-active {
  color: #fff6de;
  background: rgb(255 255 255 / 0.08);
  border-color: rgb(255 255 255 / 0.12);
}

.agent-studio-camera-controls svg {
  width: 15px;
  height: 15px;
}

.agent-studio-camera-controls > span {
  min-width: 40px;
  color: #93a39b;
  font: 650 0.61rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-align: center;
}

.agent-studio-map-legend {
  position: absolute;
  z-index: 5;
  bottom: 8px;
  left: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 5px 8px;
  color: #d4dbd7;
  background: rgb(30 35 35 / 0.84);
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 7px;
  font-size: 0.57rem;
  backdrop-filter: blur(10px);
}

.agent-studio-map-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.agent-studio-map-legend i,
.agent-studio-state-dot {
  width: 6px;
  height: 6px;
  border-radius: 2px;
}

.agent-studio-map-legend i.working,
.agent-studio-task.is-working .agent-studio-state-dot,
.agent-studio-task.is-collaborating .agent-studio-state-dot { background: #57c887; }
.agent-studio-map-legend i.moving,
.agent-studio-task.is-moving .agent-studio-state-dot,
.agent-studio-task.is-assigned .agent-studio-state-dot { background: #5ea9ef; }
.agent-studio-map-legend i.idle { background: #b8c5bb; }
.agent-studio-map-legend i.blocked,
.agent-studio-task.is-blocked .agent-studio-state-dot,
.agent-studio-task.is-failed .agent-studio-state-dot { background: #e06d6d; }
.agent-studio-task.is-complete .agent-studio-state-dot { background: #8bd6a3; }
.agent-studio-task.is-queued .agent-studio-state-dot { background: #e0b85d; }

.agent-studio-command-deck {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  border-left: 1px solid var(--studio-line);
}

.agent-studio-command-deck > header {
  min-height: 58px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--studio-line);
}

.agent-studio-command-deck > header > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.agent-studio-command-deck > header strong {
  overflow: hidden;
  color: #f4f1e7;
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-studio-command-deck > header > span {
  padding: 4px 7px;
  color: #92bda4;
  background: rgb(87 200 135 / 0.08);
  border: 1px solid rgb(87 200 135 / 0.18);
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 700;
}

.agent-studio-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--studio-line);
}

.agent-studio-metrics > span {
  min-width: 0;
  display: grid;
  gap: 1px;
  padding: 7px 5px;
  background: rgb(255 255 255 / 0.035);
  border: 1px solid rgb(255 255 255 / 0.07);
  border-radius: 6px;
}

.agent-studio-metrics strong {
  color: #f8f3e7;
  font: 720 0.9rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.agent-studio-metrics small {
  overflow: hidden;
  color: #7f8e86;
  font-size: 0.51rem;
  text-overflow: ellipsis;
}

.agent-studio-command-deck > nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  padding: 7px 10px 0;
}

.agent-studio-command-deck > nav button {
  min-height: 32px;
  color: #87938d;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  font-size: 0.67rem;
  font-weight: 700;
}

.agent-studio-command-deck > nav button.is-active {
  color: #f2eee4;
  border-bottom-color: #e6bd5e;
}

.agent-studio-panel {
  min-height: 0;
  padding: 9px 10px 12px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.agent-studio-task-list,
.agent-studio-agent-list,
.agent-studio-event-list {
  display: grid;
  align-content: start;
  gap: 7px;
}

.agent-studio-task {
  display: grid;
  gap: 8px;
  padding: 10px;
  background: rgb(255 255 255 / 0.035);
  border: 1px solid rgb(255 255 255 / 0.085);
  border-radius: 8px;
}

.agent-studio-task > header {
  min-width: 0;
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
}

.agent-studio-task > header > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.agent-studio-task strong {
  color: #ece9df;
  font-size: 0.69rem;
  line-height: 1.35;
}

.agent-studio-task small,
.agent-studio-task footer,
.agent-studio-task em {
  color: #829088;
  font-size: 0.56rem;
  font-style: normal;
}

.agent-studio-task em {
  padding: 3px 5px;
  color: #aebbb3;
  background: rgb(255 255 255 / 0.04);
  border-radius: 4px;
  text-transform: capitalize;
}

.agent-studio-progress {
  height: 3px;
  overflow: hidden;
  background: rgb(255 255 255 / 0.08);
  border-radius: 99px;
}

.agent-studio-progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #4fae91, #e5bc5c);
  border-radius: inherit;
  transition: width 180ms steps(8, end);
}

.agent-studio-task footer {
  display: flex;
  align-items: center;
  gap: 8px;
}

.agent-studio-task footer > span:first-child {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-studio-task footer button {
  padding: 2px 4px;
  color: #d98b8b;
  background: transparent;
  border: 0;
  font-size: 0.56rem;
}

.agent-studio-agent-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 8px;
  color: #e9ede9;
  background: rgb(255 255 255 / 0.025);
  border: 1px solid rgb(255 255 255 / 0.075);
  border-radius: 8px;
  text-align: left;
}

.agent-studio-agent-card:hover,
.agent-studio-agent-card.is-selected {
  background: rgb(255 255 255 / 0.06);
  border-color: rgb(231 190 95 / 0.3);
}

.agent-studio-avatar {
  position: relative;
  width: 30px;
  height: 30px;
  display: block;
  background: var(--agent-color, #69a7dc);
  border: 2px solid rgb(255 255 255 / 0.22);
  border-radius: 5px;
  image-rendering: pixelated;
}

.agent-studio-avatar::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 8px;
  width: 11px;
  height: 9px;
  background: #efbd94;
  box-shadow: 0 -3px #3d2d29;
}

.agent-studio-avatar i {
  position: absolute;
  left: 7px;
  bottom: 3px;
  width: 13px;
  height: 9px;
  background: color-mix(in srgb, var(--agent-color) 72%, #202a30);
}

.agent-studio-avatar.large {
  width: 42px;
  height: 42px;
}

.agent-studio-agent-card > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.agent-studio-agent-card strong { font-size: 0.68rem; }
.agent-studio-agent-card small { color: #8e9a94; font-size: 0.56rem; }
.agent-studio-agent-card em {
  overflow: hidden;
  color: #b9c2bd;
  font-size: 0.56rem;
  font-style: normal;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-studio-agent-state {
  align-self: start;
  color: #9ba8a1;
  font-size: 0.53rem;
  text-transform: capitalize;
}

.agent-studio-agent-state.is-working { color: #64ce90; }
.agent-studio-agent-state.is-collaborating { color: #e6a75d; }
.agent-studio-agent-state.is-moving { color: #67adee; }
.agent-studio-agent-state.is-blocked { color: #e07878; }

.agent-studio-capacity {
  grid-column: 2 / -1;
  position: relative;
  height: 10px;
  overflow: hidden;
  background: rgb(255 255 255 / 0.055);
  border-radius: 3px;
}

.agent-studio-capacity > i {
  position: absolute;
  inset: 0 auto 0 0;
  background: rgb(107 190 140 / 0.24);
}

.agent-studio-capacity small {
  position: relative;
  z-index: 1;
  display: block;
  padding-left: 4px;
  color: #91a19a;
  font: 0.47rem/10px ui-monospace, monospace;
}

.agent-studio-inspector {
  display: grid;
  gap: 10px;
  margin-bottom: 9px;
  padding: 10px;
  background: rgb(229 188 92 / 0.055);
  border: 1px solid rgb(229 188 92 / 0.16);
  border-radius: 8px;
}

.agent-studio-inspector > header {
  display: flex;
  align-items: center;
  gap: 9px;
}

.agent-studio-inspector > header > div {
  display: grid;
  gap: 1px;
}

.agent-studio-inspector > header small,
.agent-studio-inspector > header span { color: #8d9993; font-size: 0.55rem; }
.agent-studio-inspector > header strong { color: #f2ede2; font-size: 0.75rem; }
.agent-studio-inspector dl { display: grid; gap: 5px; margin: 0; }
.agent-studio-inspector dl > div { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 7px; }
.agent-studio-inspector dt { color: #7e8b85; font-size: 0.54rem; }
.agent-studio-inspector dd { margin: 0; color: #c5cdc8; font-size: 0.57rem; line-height: 1.35; }
.agent-studio-inspector .button { min-height: 30px; color: #d8dfda; border-color: rgb(255 255 255 / 0.12); }

.agent-studio-event-list article {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  gap: 8px;
  padding: 8px 2px 8px 0;
  border-bottom: 1px solid rgb(255 255 255 / 0.07);
}

.agent-studio-event-list article > i {
  width: 6px;
  height: 6px;
  margin-top: 4px;
  background: #5ba8dc;
  border-radius: 2px;
}

.agent-studio-event-list article > i.is-complete,
.agent-studio-event-list article > i.is-started { background: #58c98a; }
.agent-studio-event-list article > i.is-blocked,
.agent-studio-event-list article > i.is-failed { background: #de6b6b; }
.agent-studio-event-list article > div { min-width: 0; display: grid; gap: 2px; }
.agent-studio-event-list strong { color: #c8d0cb; font: 700 0.55rem/1.2 ui-monospace, monospace; text-transform: uppercase; }
.agent-studio-event-list p { margin: 0; color: #aeb8b2; font-size: 0.61rem; line-height: 1.4; }
.agent-studio-event-list small { color: #6f7d76; font-size: 0.51rem; }

.agent-studio-panel-empty {
  min-height: 210px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 7px;
  padding: 18px;
  color: #d7ded9;
  text-align: center;
}

.agent-studio-panel-empty > span {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  color: #d3b45e;
  background: rgb(211 180 94 / 0.08);
  border: 1px solid rgb(211 180 94 / 0.16);
  border-radius: 7px;
}

.agent-studio-panel-empty svg { width: 17px; height: 17px; }
.agent-studio-panel-empty strong { font: 700 0.82rem/1.2 Georgia, serif; }
.agent-studio-panel-empty p { max-width: 250px; margin: 0; color: #84918a; font-size: 0.63rem; line-height: 1.45; }
.agent-studio-panel-empty .button { margin-top: 6px; }

.agent-studio-truth-bar {
  z-index: 8;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 7px 14px;
  color: #88968f;
  background: #1a2323;
  border-top: 1px solid var(--studio-line);
  font-size: 0.58rem;
}

.agent-studio-truth-bar span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.agent-studio-truth-bar svg { width: 12px; height: 12px; }

.agent-studio-error {
  position: absolute;
  z-index: 20;
  bottom: 47px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: min(560px, calc(100% - 24px));
  padding: 8px 10px;
  transform: translateX(-50%);
  color: #f0c0c0;
  background: rgb(80 31 35 / 0.94);
  border: 1px solid rgb(232 112 112 / 0.3);
  border-radius: 7px;
  font-size: 0.65rem;
}

.agent-studio-error svg { width: 14px; height: 14px; }

.agent-studio-assignment-backdrop {
  position: absolute;
  z-index: 30;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgb(16 22 22 / 0.72);
  backdrop-filter: blur(10px);
}

.agent-studio-assignment {
  width: min(560px, 100%);
  display: grid;
  gap: 14px;
  padding: 18px;
  color: #eeeae0;
  background: #222b2b;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 12px;
  box-shadow: 0 32px 90px rgb(0 0 0 / 0.44);
}

.agent-studio-assignment > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.agent-studio-assignment > header > div { display: grid; gap: 3px; }
.agent-studio-assignment > header small { color: #8ca398; font-size: 0.59rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.agent-studio-assignment h3 { margin: 0; color: #f5f0e5; font: 740 1.08rem/1.2 Georgia, serif; }
.agent-studio-assignment header p,
.agent-studio-assignment > p { margin: 0; color: #98a69f; font-size: 0.65rem; line-height: 1.45; }
.agent-studio-assignment label { display: grid; gap: 6px; color: #c5cec8; font-size: 0.66rem; font-weight: 650; }
.agent-studio-assignment textarea,
.agent-studio-assignment select { color: #f1ede4; background: #1a2222; border-color: rgb(255 255 255 / 0.13); }
.agent-studio-assignment textarea { min-height: 110px; resize: vertical; }
.agent-studio-assignment-grid { display: grid; grid-template-columns: minmax(0, 1fr) 128px 118px; gap: 10px; }
.agent-studio-assignment > p { display: flex; align-items: flex-start; gap: 7px; padding: 9px; background: rgb(87 200 135 / 0.05); border: 1px solid rgb(87 200 135 / 0.12); border-radius: 7px; }
.agent-studio-assignment > p svg { width: 14px; height: 14px; flex: 0 0 auto; }
.agent-studio-assignment footer { display: flex; justify-content: flex-end; gap: 8px; }

@keyframes agentStudioSpin { to { transform: rotate(360deg); } }
@keyframes agentStudioPulse { 50% { opacity: 0.35; } }

@media (max-width: 1120px) {
  .agent-studio-layout { grid-template-columns: 164px minmax(360px, 1fr) 310px; }
  .agent-studio-layout.task-panel-is-collapsed { grid-template-columns: 164px minmax(360px, 1fr) 52px; }
  .agent-studio-layout.floor-is-collapsed.task-panel-is-collapsed { grid-template-columns: 52px minmax(360px, 1fr) 52px; }
  .agent-studio-title p { display: none; }
  .agent-studio-zone-rail { padding-inline: 8px; }
  .agent-studio-zone-rail nav button small { display: none; }
}

@media (max-width: 860px) {
  .agent-studio-head { min-height: 66px; padding: 9px 10px; }
  .agent-studio-title strong { font-size: 1rem; }
  .agent-studio-title > span { font-size: 0.58rem; }
  .agent-studio-connection { display: none; }
  .agent-studio-actions .button { min-width: 76px; width: auto; padding: 0 10px; color: #1d2925; font-size: 0.62rem; }
  .agent-studio-actions .button svg { width: 13px; color: #1d2925; }
  .agent-studio-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(230px, 38dvh); }
  .agent-studio-layout.floor-is-collapsed { grid-template-columns: minmax(0, 1fr); }
  .agent-studio-layout.task-panel-is-collapsed,
  .agent-studio-layout.floor-is-collapsed.task-panel-is-collapsed { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 52px; }
  .agent-studio-zone-rail { display: none; }
  .agent-studio-map-wrap { grid-row: 1; }
  .agent-studio-command-deck { grid-row: 2; border-top: 1px solid var(--studio-line); border-left: 0; }
  .agent-studio-command-deck.is-collapsed { display: block; }
  .agent-studio-command-deck.is-collapsed > header { min-height: 51px; }
  .agent-studio-command-deck.is-collapsed .agent-studio-collapsed-label { display: none; }
  .agent-studio-command-deck > header { min-height: 45px; }
  .agent-studio-metrics { padding-block: 5px; }
  .agent-studio-metrics > span { padding-block: 4px; }
  .agent-studio-panel { padding-bottom: 8px; }
  .agent-studio-task-list, .agent-studio-agent-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agent-studio-map-legend { max-width: calc(100% - 20px); overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; }
  .agent-studio-camera-controls { bottom: 9px; }
  .agent-studio-truth-bar { min-height: 31px; gap: 8px; }
  .agent-studio-truth-bar span:nth-child(2), .agent-studio-truth-bar span:last-child { display: none; }
}

@media (max-width: 560px) {
  .agent-studio-title > span { display: none; }
  .agent-studio-head { gap: 8px; }
  .agent-studio-layout { grid-template-rows: minmax(260px, 54dvh) minmax(220px, 1fr); }
  .agent-studio-command-deck > header { display: none; }
  .agent-studio-command-deck.is-collapsed > header { display: flex; }
  .agent-studio-command-deck { grid-template-rows: auto auto minmax(0, 1fr); }
  .agent-studio-metrics { grid-template-columns: repeat(4, 1fr); }
  .agent-studio-command-deck > nav { padding-top: 3px; }
  .agent-studio-task-list, .agent-studio-agent-list { grid-template-columns: 1fr; }
  .agent-studio-map-legend { display: none; }
  .agent-studio-camera-controls { right: 7px; bottom: 7px; }
  .agent-studio-camera-controls button { width: 29px; height: 29px; }
  .agent-studio-camera-controls > span { display: none; }
  .agent-studio-truth-bar { justify-content: flex-start; padding-inline: 8px; }
  .agent-studio-truth-bar span:nth-child(3) { display: none; }
  .agent-studio-assignment-backdrop { align-items: end; padding: 0; }
  .agent-studio-assignment { max-height: 92dvh; overflow-y: auto; border-radius: 13px 13px 0 0; }
  .agent-studio-assignment-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .agent-studio-loading i,
  .agent-studio-connection i,
  .agent-studio-progress i { animation: none !important; transition: none !important; }
}

/* --------------------------------------------------------------------------
   2026-08 workspace consistency pass
   -------------------------------------------------------------------------- */

/* The camera page owns the session surface. It scrolls as one stable document. */
.page-stage .live-vision-v2 {
  scroll-margin-block: 12px;
  outline: none;
}

.page-stage .live-vision-v2:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--text) 28%, transparent);
  outline-offset: 5px;
}

.page-stage .live-vision-v2 [data-live-vision-video] {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* The sidebar and HUD consume the same unread value and use the same badge. */
.collapsed-bottom .notification-trigger {
  position: relative;
}

.collapsed-bottom .notification-trigger small {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  padding: 2px 4px;
  color: var(--surface);
  border-radius: 999px;
  background: var(--text);
  font-size: .6rem;
  font-weight: 800;
  line-height: 1;
}

/* Prompt-local media execution was previously unstyled and collapsed into text. */
.browser-media-dock {
  min-width: 0;
  display: grid;
  gap: 12px;
  padding: 14px;
  color: var(--text);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: var(--surface);
}

.browser-media-dock > header {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.browser-media-orb {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-2);
}

.browser-media-orb svg { width: 17px; height: 17px; }
.browser-media-dock > header > div { min-width: 0; display: grid; gap: 2px; text-align: left; }
.browser-media-dock > header small { color: var(--muted); font-size: .62rem; }
.browser-media-dock > header strong { font-size: .78rem; }
.browser-media-dock > header p { margin: 0; overflow: hidden; color: var(--muted); font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }

.browser-media-capability {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  color: var(--muted);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: .61rem;
  white-space: nowrap;
}

.browser-media-capability i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.browser-media-capability.is-ready i { background: #4aa275; }

.browser-media-route {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(14px, 1fr) auto minmax(14px, 1fr) auto minmax(14px, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--surface-2);
}

.browser-media-route > span {
  min-width: 0;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 0 7px;
  text-align: left;
}

.browser-media-route > span > i {
  grid-row: 1 / 3;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  font-size: .58rem;
  font-style: normal;
}

.browser-media-route b { font-size: .62rem; white-space: nowrap; }
.browser-media-route small { overflow: hidden; color: var(--muted); font-size: .52rem; text-overflow: ellipsis; white-space: nowrap; }
.browser-media-route > em { height: 1px; background: var(--line); }
.browser-media-route > span.is-ready > i { color: var(--surface); border-color: var(--text); background: var(--text); }
.browser-media-route > span.is-active > i { box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 8%, transparent); }

.browser-media-controls {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.browser-media-controls > label {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: var(--muted);
  text-align: left;
  font-size: .6rem;
}

.browser-media-controls :is(input, select) {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-2);
}

.browser-media-folder,
.browser-media-run {
  min-width: 0;
  min-height: 47px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  color: var(--text);
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
}

.browser-media-run { grid-template-columns: 22px minmax(0, 1fr); color: var(--surface); border-color: var(--text); background: var(--text); }
.browser-media-run:disabled { opacity: .45; }
.browser-media-folder > span, .browser-media-run > span { min-width: 0; display: grid; gap: 2px; }
.browser-media-folder strong, .browser-media-run strong { overflow: hidden; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.browser-media-folder small, .browser-media-run small { overflow: hidden; color: var(--muted); font-size: .53rem; text-overflow: ellipsis; white-space: nowrap; }
.browser-media-run small { color: color-mix(in srgb, var(--surface) 68%, transparent); }
.browser-media-folder svg, .browser-media-run svg { width: 14px; height: 14px; }

.browser-media-dock > footer {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, .8fr);
  align-items: center;
  gap: 10px;
}

.browser-media-auto {
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0;
  color: var(--text);
  text-align: left;
  border: 0;
  background: transparent;
}

.browser-media-auto > i { position: relative; width: 30px; height: 18px; border-radius: 999px; background: var(--line); }
.browser-media-auto > i::after { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); content: ""; transition: transform .16s ease; }
.browser-media-auto.is-on > i { background: var(--text); }
.browser-media-auto.is-on > i::after { transform: translateX(12px); }
.browser-media-auto > span { min-width: 0; display: grid; gap: 2px; }
.browser-media-auto strong { font-size: .61rem; }
.browser-media-auto small { color: var(--muted); font-size: .52rem; line-height: 1.35; }

.browser-media-progress { min-width: 0; display: grid; gap: 5px; text-align: left; }
.browser-media-progress > span { height: 4px; overflow: hidden; border-radius: 999px; background: var(--surface-2); }
.browser-media-progress > span i { display: block; height: 100%; border-radius: inherit; background: var(--text); transition: width .2s ease; }
.browser-media-progress small { overflow: hidden; color: var(--muted); font-size: .53rem; text-overflow: ellipsis; white-space: nowrap; }

.browser-media-result { min-width: 0; display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(100px, 180px); align-items: center; gap: 9px; padding: 9px; border: 1px solid var(--line-soft); border-radius: 11px; background: var(--surface-2); text-align: left; }
.browser-media-result > span { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; }
.browser-media-result > span svg { width: 13px; }
.browser-media-result > div { min-width: 0; display: grid; gap: 2px; }
.browser-media-result strong, .browser-media-result small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browser-media-result strong { font-size: .65rem; }
.browser-media-result small { color: var(--muted); font-size: .53rem; }
.browser-media-result :is(img, video, audio) { width: 100%; max-height: 72px; border-radius: 8px; object-fit: cover; }

/* ShamCut: calm editor chrome, strong hierarchy, and theme-native surfaces. */
.page-stage .shamverse-cut-page {
  --cut-bg: var(--bg);
  --cut-panel: var(--surface);
  --cut-panel-2: var(--surface-2);
  --cut-panel-3: var(--surface-3);
  --cut-line: var(--line-soft);
  --cut-line-strong: var(--line);
  --cut-text: var(--text);
  --cut-muted: var(--muted);
  width: min(1500px, 100%);
}

.shamverse-cut-page .cut-appbar {
  grid-template-columns: auto minmax(180px, 1fr) auto;
  gap: 14px;
  min-height: 62px;
  padding: 10px 12px;
  border-color: var(--cut-line);
  border-radius: 16px 16px 0 0;
  background: var(--cut-panel);
  box-shadow: none;
}

.shamverse-cut-page .cut-appbar-center,
.shamverse-cut-page .cut-status-rail { display: none; }
.shamverse-cut-page .cut-brand > span { color: var(--surface); background: var(--text); box-shadow: none; }
.shamverse-cut-page .cut-brand small { color: var(--muted); letter-spacing: .12em; }
.shamverse-cut-page .cut-brand em { color: var(--muted); border-color: var(--line); }
.shamverse-cut-page .cut-appbar-actions > button,
.shamverse-cut-page .cut-appbar-actions .cut-export-button { color: var(--text); border-color: var(--line); background: var(--surface-2); box-shadow: none; }
.shamverse-cut-page .cut-appbar-actions .cut-export-button { color: var(--surface); border-color: var(--text); background: var(--text); }

.shamverse-cut-page .cut-command-deck {
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 10px 16px;
  padding: 13px;
  border-color: var(--cut-line);
  background: var(--cut-panel);
}

.shamverse-cut-page .cut-command-lead > span,
.shamverse-cut-page .cut-command-form,
.shamverse-cut-page .cut-command-scopes,
.shamverse-cut-page .cut-command-examples button,
.shamverse-cut-page .cut-command-plan { color: var(--text); border-color: var(--line); background: var(--surface-2); }
.shamverse-cut-page .cut-command-form textarea { color: var(--text); font-size: .67rem; }
.shamverse-cut-page .cut-command-form > button { color: var(--surface); border-color: var(--text); background: var(--text); }

.shamverse-cut-page .cut-workspace {
  grid-template-columns: minmax(220px, 250px) minmax(480px, 1fr) minmax(235px, 270px);
  min-height: 680px;
  border-color: var(--cut-line);
  border-radius: 0 0 16px 16px;
  background: var(--cut-bg);
}

.shamverse-cut-page :is(.cut-library-panel, .cut-library-tabs, .cut-library-content, .cut-stage-panel, .cut-stage-panel > header, .cut-properties-panel, .cut-timeline-panel, .cut-timeline-toolbar, .cut-track-labels, .cut-ruler) {
  color: var(--text);
  border-color: var(--cut-line);
  background: var(--cut-panel);
  box-shadow: none;
}

.shamverse-cut-page :is(.cut-library-tabs, .cut-stage-panel > header, .cut-timeline-toolbar, .cut-track-labels, .cut-ruler) { background: var(--cut-panel-2); }
.shamverse-cut-page .cut-library-tabs button { color: var(--muted); border-radius: 7px; }
.shamverse-cut-page .cut-library-tabs button.is-active { color: var(--text); background: var(--surface); box-shadow: inset 2px 0 var(--text); }
.shamverse-cut-page .cut-import-zone { color: var(--muted); border-color: var(--line); border-radius: 10px; background: var(--surface-2); }
.shamverse-cut-page .cut-import-zone:hover { color: var(--text); border-color: var(--text-soft); background: var(--surface-3); }
.shamverse-cut-page .cut-import-zone svg { color: var(--surface); background: var(--text); box-shadow: none; }
.shamverse-cut-page .cut-import-zone strong { color: var(--text); }

.shamverse-cut-page .cut-asset-card {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  align-items: center;
  gap: 3px;
  border: 1px solid transparent;
  border-radius: 10px;
}

.shamverse-cut-page .cut-asset-card:hover { border-color: var(--line); background: var(--surface-2); }
.shamverse-cut-page .cut-asset-card > .cut-asset-open { grid-template-columns: 48px minmax(0, 1fr); padding: 6px; border: 0; background: transparent; }
.shamverse-cut-page .cut-asset-card > .cut-asset-open:hover { border-color: transparent; background: transparent; }
.shamverse-cut-page .cut-asset-thumb { width: 48px; height: 40px; color: var(--muted); background: var(--surface-3); }
.shamverse-cut-page .cut-asset-card strong { color: var(--text); }
.shamverse-cut-page .cut-asset-card small,
.shamverse-cut-page .cut-asset-card em { color: var(--muted); }
.shamverse-cut-page .cut-asset-card > .cut-asset-delete {
  width: 28px;
  height: 28px;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  padding: 0;
  color: var(--muted);
  border: 0;
  border-radius: 7px;
  background: transparent;
}
.shamverse-cut-page .cut-asset-card > .cut-asset-delete:hover { color: #c84e56; background: color-mix(in srgb, #c84e56 9%, transparent); }
.shamverse-cut-page .cut-asset-delete svg { width: 13px; height: 13px; }

.shamverse-cut-page .cut-program-wrap { background: var(--bg-deep); }
.shamverse-cut-page .cut-timeline-scroll { scrollbar-color: var(--muted-2) var(--surface); }
.shamverse-cut-page .cut-track-lane { border-color: var(--line-soft); background-color: var(--surface); background-image: linear-gradient(90deg, color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px); }
.shamverse-cut-page .cut-track-label.is-selected,
.shamverse-cut-page .cut-track-lane.is-selected { background: color-mix(in srgb, var(--text) 5%, var(--surface)); box-shadow: inset 2px 0 var(--text); }
.shamverse-cut-page .cut-timeline-clip { color: var(--text); border-color: var(--line); background: var(--surface-3); box-shadow: none; }
.shamverse-cut-page .cut-timeline-clip.kind-audio { background: color-mix(in srgb, #488f79 23%, var(--surface-2)); }
.shamverse-cut-page .cut-timeline-clip.kind-text { background: color-mix(in srgb, #83658d 22%, var(--surface-2)); }
.shamverse-cut-page .cut-timeline-clip.kind-effect { background: color-mix(in srgb, #9a7a50 20%, var(--surface-2)); }
.shamverse-cut-page .cut-timeline-clip.is-selected { outline: 2px solid var(--text); outline-offset: 1px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 10%, transparent); }
.shamverse-cut-page .cut-edit-tools button[data-action="cut-delete"]::after { content: "Delete"; }

@media (max-width: 1040px) {
  .shamverse-cut-page .cut-workspace { grid-template-columns: 220px minmax(0, 1fr); }
  .shamverse-cut-page .cut-command-deck { grid-template-columns: 1fr; }
  .shamverse-cut-page .cut-command-controls,
  .shamverse-cut-page .cut-command-plan,
  .shamverse-cut-page .cut-command-error { grid-column: 1; }
}

@media (max-width: 680px) {
  .browser-media-dock > header { grid-template-columns: 38px minmax(0, 1fr); }
  .browser-media-capability { grid-column: 1 / -1; justify-self: start; }
  .browser-media-route { grid-template-columns: 1fr 1fr; }
  .browser-media-route > em { display: none; }
  .browser-media-controls,
  .browser-media-dock > footer { grid-template-columns: 1fr; }
  .browser-media-result { grid-template-columns: 30px minmax(0, 1fr); }
  .browser-media-result :is(img, video, audio) { grid-column: 1 / -1; max-height: 130px; }
  .shamverse-cut-page .cut-command-deck { padding: 10px; }
  .shamverse-cut-page .cut-workspace { display: flex; min-height: 0; }
}

/* Credit pricing and contrast repair -------------------------------------- */
.cine-pricing .cine-section-heading > p:last-child {
  color: #c4cbc7;
}

.pricing-credit-principle {
  width: min(880px, 100%);
  margin: 44px auto 0;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  color: #f7f8f7;
  border: 1px solid rgb(121 226 255 / 0.24);
  border-radius: 18px;
  background: linear-gradient(135deg, rgb(121 226 255 / 0.1), rgb(145 113 255 / 0.08));
}

.pricing-credit-principle > svg {
  width: 44px;
  height: 44px;
  padding: 11px;
  color: #071014;
  border-radius: 14px;
  background: #bdecf7;
}

.pricing-credit-principle strong { display: block; color: #ffffff; font-size: 0.92rem; }
.pricing-credit-principle p { margin-top: 5px; color: #c4cbc7; font-size: 0.8rem; line-height: 1.55; }

.cine-pricing .cine-plan-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}

.cine-pricing .cine-plan-grid article {
  min-height: 600px;
  padding: 30px;
  color: #f7f8f7;
}

.cine-pricing .cine-plan-grid article.experimental {
  border-color: rgb(255 201 112 / 0.34);
  background:
    radial-gradient(circle at 100% 0%, rgb(255 189 89 / 0.12), transparent 16rem),
    rgb(255 255 255 / 0.035);
}

.plan-badge.experimental { color: #201609; background: #ffd79b; }

.plan-credit-allowance {
  margin-top: 24px;
  padding: 15px;
  display: grid;
  gap: 2px;
  color: #ffffff;
  border: 1px solid rgb(255 255 255 / 0.11);
  border-radius: 14px;
  background: rgb(255 255 255 / 0.055);
}

.plan-credit-allowance strong { color: #ffffff; font-size: 1.4rem; letter-spacing: -0.035em; }
.plan-credit-allowance span { color: #aeb7b2; font-size: 0.68rem; font-weight: 680; letter-spacing: 0.04em; text-transform: uppercase; }

.landing-credit-packs {
  margin-top: 72px;
  padding-top: 42px;
  border-top: 1px solid var(--cine-line);
}

.landing-credit-packs > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.62fr);
  align-items: end;
  gap: 42px;
}

.landing-credit-packs h3 { margin-top: 12px; color: #ffffff; font: 500 clamp(2.2rem, 4vw, 4rem)/0.95 var(--sv2-serif); letter-spacing: -0.05em; }
.landing-credit-packs > header > p { color: #b9c0bc; font-size: 0.9rem; line-height: 1.65; }
.landing-credit-pack-grid { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

.landing-credit-pack-grid article {
  min-width: 0;
  padding: 25px;
  display: grid;
  gap: 13px;
  color: #f7f8f7;
  border: 1px solid var(--cine-line);
  border-radius: 22px;
  background: rgb(255 255 255 / 0.03);
}

.landing-credit-pack-grid article > span { color: #9feaff; font-size: 0.72rem; font-weight: 780; letter-spacing: 0.08em; text-transform: uppercase; }
.landing-credit-pack-grid article > strong { color: #ffffff; font-size: clamp(1.7rem, 3vw, 2.45rem); letter-spacing: -0.045em; }
.landing-credit-pack-grid article > strong small { color: #aeb6b1; font-size: 0.72rem; letter-spacing: 0; }
.landing-credit-pack-grid article > p { min-height: 44px; color: #b9c0bc; font-size: 0.78rem; line-height: 1.55; }
.cine-pricing .pricing-note { color: #aeb6b1; line-height: 1.6; }

/* Billing cards must inherit the resolved application palette. This prevents
   legacy white text from disappearing on light settings surfaces. */
.settings-v3 .pricing-plan,
.settings-v3 .credit-pack-grid article {
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.settings-v3 .pricing-plan-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.settings-v3 .pricing-plan :is(h4, strong, b, li),
.settings-v3 .credit-pack-grid article :is(strong, span) { color: var(--text); }
.settings-v3 .pricing-plan :is(header > span, p, small),
.settings-v3 .credit-pack-grid article p { color: var(--muted); }
.settings-v3 .pricing-plan h4 { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.settings-v3 .pricing-plan h4 em { padding: 4px 7px; color: #5c3908; border-radius: 999px; background: #ffe0aa; font-size: 0.58rem; font-style: normal; letter-spacing: 0.05em; text-transform: uppercase; }
.settings-v3 .pricing-plan > p b { font-size: 1rem; }
.settings-v3 .pricing-plan .button.light-action { color: #101314; border-color: #e9edf0; background: #f4f6f7; }
html[data-color-mode="light"] .settings-v3 .pricing-plan .button.light-action { color: #ffffff; border-color: #202020; background: #202020; }

@media (max-width: 1180px) {
  .cine-pricing .cine-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cine-pricing .cine-plan-grid article { min-height: 540px; }
  .settings-v3 .pricing-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .pricing-credit-principle { grid-template-columns: 36px minmax(0, 1fr); padding: 15px; }
  .pricing-credit-principle > svg { width: 36px; height: 36px; padding: 9px; }
  .cine-pricing .cine-plan-grid,
  .landing-credit-pack-grid,
  .settings-v3 .pricing-plan-grid { grid-template-columns: 1fr; }
  .cine-pricing .cine-plan-grid article { min-height: 0; }
  .landing-credit-packs > header { grid-template-columns: 1fr; gap: 16px; }
}

/* ShamVerse concise editorial landing ------------------------------------ */
.sv-lite {
  --sv-ink: #090a0b;
  --sv-paper: #f1f1ed;
  --sv-soft: #dedfd8;
  --sv-blue: #89dcff;
  overflow: clip;
  color: #f7f7f3;
  background: var(--sv-ink);
}

.sv-lite .cine-container { width: min(1240px, calc(100% - 56px)); }
.sv-lite .motion-header { z-index: 50; }
.sv-lite .motion-nav { border-color: rgb(255 255 255 / 0.17); background: rgb(245 246 243 / 0.86); box-shadow: 0 18px 70px rgb(0 0 0 / 0.18); }
.sv-lite .motion-brand { color: #0a0b0c; }
.sv-lite .motion-brand span { color: #ffffff; background: #0a0b0c; }
.sv-lite .motion-nav nav a { color: #34373a; }
.sv-lite .motion-nav nav a:hover { color: #000000; }
.sv-lite .motion-nav-actions :is(.motion-login, .motion-get-started),
.sv-lite .motion-mobile-menu .motion-get-started {
  color: #ffffff !important;
  border: 1px solid #050505 !important;
  background: #050505 !important;
}

.sv-lite .motion-menu-toggle { border-color: rgb(0 0 0 / 0.12); background: #ffffff; }
.sv-lite .motion-menu-toggle span { background: #0a0b0c; }

.sv-lite-hero {
  min-height: 940px;
  position: relative;
  display: grid;
  align-items: end;
  isolation: isolate;
  background: #0b0b0d;
}

.sv-hero-art,
.sv-hero-vignette { position: absolute; inset: 0; width: 100%; height: 100%; }
.sv-hero-art { z-index: -3; object-fit: cover; object-position: 50% 58%; opacity: 0.78; transform: translateY(var(--cinema-lift, 0)) scale(var(--cinema-scale, 1)); }
.sv-hero-vignette {
  z-index: -2;
  background:
    linear-gradient(90deg, rgb(5 7 10 / 0.96) 0%, rgb(5 7 10 / 0.72) 42%, rgb(5 7 10 / 0.18) 74%),
    linear-gradient(0deg, #08090b 0%, transparent 36%, rgb(2 3 6 / 0.45) 100%);
}

.sv-hero-grid {
  padding-top: 168px;
  padding-bottom: 112px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

.sv-hero-copy { max-width: 980px; position: relative; z-index: 2; }
.sv-hero-copy .motion-badge { width: fit-content; margin: 0 0 28px; color: #eef7f9; border-color: rgb(255 255 255 / 0.2); background: rgb(9 11 14 / 0.42); }
.sv-hero-copy h1 {
  max-width: 780px;
  margin: 0;
  color: #ffffff;
  font: 500 clamp(4rem, 7.6vw, 7.8rem)/0.86 var(--sv2-serif);
  letter-spacing: -0.074em;
}
.sv-hero-copy h1 em { color: #b6e9f9; font-style: italic; font-weight: 420; }
.sv-hero-copy > p:not(.motion-badge) { max-width: 570px; margin-top: 30px; color: #c5cccf; font-size: clamp(1rem, 1.35vw, 1.18rem); line-height: 1.65; }
.sv-hero-actions { margin-top: 34px; display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }

.sv-primary-button {
  min-height: 52px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #ffffff;
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 999px;
  background: #050505;
  box-shadow: 0 12px 34px rgb(0 0 0 / 0.24);
  font-weight: 760;
}
.sv-primary-button svg { width: 16px; height: 16px; }
.sv-primary-button:hover { color: #050505; background: #ffffff; transform: translateY(-2px); }
.sv-text-link { color: #ffffff; border-bottom: 1px solid rgb(255 255 255 / 0.48); font-size: 0.86rem; font-weight: 700; }
.sv-hero-proof { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 8px; }
.sv-hero-proof span { padding: 8px 11px; color: #cdd5d8; border: 1px solid rgb(255 255 255 / 0.12); border-radius: 999px; background: rgb(5 7 10 / 0.34); font-size: 0.68rem; font-weight: 720; }

.sv-product-stage {
  margin: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: 28px;
  background: #101318;
  box-shadow: 0 44px 100px rgb(0 0 0 / 0.52), 0 0 0 10px rgb(255 255 255 / 0.035);
  transform: perspective(1400px) rotateY(-4deg) rotateX(2deg);
}
.sv-product-stage::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.05); border-radius: inherit; }
.sv-product-stage img { display: block; width: 100%; aspect-ratio: 1.46; object-fit: cover; object-position: top; }
.sv-product-stage figcaption { padding: 17px 19px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #d8dddf; background: #0d1014; }
.sv-product-stage figcaption span { color: var(--sv-blue); font-size: 0.67rem; font-weight: 780; letter-spacing: 0.09em; text-transform: uppercase; }
.sv-product-stage figcaption strong { color: #ffffff; font-size: 0.78rem; }

.sv-signal-strip {
  min-height: 74px;
  padding: 20px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(14px, 3vw, 42px);
  color: #333537;
  border-bottom: 1px solid #d5d6cf;
  background: var(--sv-paper);
  font-size: 0.76rem;
  font-weight: 760;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.sv-signal-strip i { width: 4px; height: 4px; border-radius: 50%; background: #999d9d; }

.sv-platform { padding-block: clamp(100px, 11vw, 168px); position: relative; isolation: isolate; color: #161719; }
.sv-platform::before { content: ""; position: absolute; inset-block: 0; left: 50%; z-index: -1; width: 100vw; transform: translateX(-50%); background: var(--sv-paper); }
.sv-heading { max-width: 970px; }
.sv-heading.compact { max-width: 780px; }
.sv-heading.centered { margin-inline: auto; text-align: center; }
.sv-heading.split { max-width: none; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr); align-items: end; gap: 64px; }
.sv-heading .cine-kicker { color: #687073; }
.sv-heading h2 {
  margin-top: 17px;
  color: inherit;
  font: 500 clamp(3.1rem, 6.2vw, 6.4rem)/0.93 var(--sv2-serif);
  letter-spacing: -0.064em;
}
.sv-heading h2 em { color: #61747c; font-style: italic; font-weight: 430; }
.sv-heading > p:last-child,
.sv-heading.split > p { color: #656a6d; font-size: 0.94rem; line-height: 1.7; }

.sv-platform-grid { margin-top: 76px; display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(330px, 0.58fr); gap: 24px; align-items: stretch; }
.sv-wide-shot { margin: 0; overflow: hidden; border: 1px solid #d1d2cd; border-radius: 28px; background: #15181c; box-shadow: 0 28px 80px rgb(15 20 24 / 0.12); }
.sv-wide-shot img { width: 100%; height: auto; aspect-ratio: 1.72; display: block; object-fit: cover; object-position: top; }
.sv-wide-shot figcaption { padding: 17px 20px; color: #dce0e2; background: #111317; font-size: 0.78rem; }
.sv-capability-list { padding: 12px 28px; display: grid; align-content: center; border: 1px solid #d1d2cd; border-radius: 28px; background: #e5e5df; }
.sv-capability-list article { padding: 25px 0; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 15px; border-bottom: 1px solid #cacbc5; }
.sv-capability-list article:last-child { border-bottom: 0; }
.sv-capability-list article > span { padding-top: 3px; color: #808687; font-size: 0.68rem; font-weight: 760; }
.sv-capability-list h3 { color: #111315; font-size: 1.04rem; }
.sv-capability-list p { margin-top: 7px; color: #686c6d; font-size: 0.78rem; line-height: 1.5; }

.sv-standard { margin-top: 120px; padding: 0 0 0 clamp(30px, 5vw, 76px); display: grid; grid-template-columns: 0.42fr 1.2fr 0.85fr; align-items: end; gap: 42px; border-left: 2px solid #111315; }
.sv-standard .cine-kicker { align-self: start; color: #6d7173; }
.sv-standard h2 { color: #111315; font: 500 clamp(2.9rem, 5.2vw, 5.4rem)/0.9 var(--sv2-serif); letter-spacing: -0.058em; }
.sv-standard h2 em { color: #60737b; font-style: italic; }
.sv-standard > p:last-child { color: #64696b; font-size: 0.92rem; line-height: 1.7; }

.sv-runtime { padding-block: clamp(105px, 12vw, 178px); background: #0a0c0f; }
.sv-runtime .sv-heading { color: #f5f6f3; }
.sv-runtime .sv-heading .cine-kicker { color: #8edff7; }
.sv-runtime-grid { margin-top: 66px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sv-runtime-grid article { min-height: 260px; padding: 34px; display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 24px; border: 1px solid rgb(255 255 255 / 0.12); border-radius: 26px; background: linear-gradient(145deg, rgb(255 255 255 / 0.075), rgb(255 255 255 / 0.025)); }
.sv-runtime-grid article > span { width: 58px; height: 58px; display: grid; place-items: center; color: #0b1114; border-radius: 19px; background: #b7e8f4; }
.sv-runtime-grid article > span svg { width: 24px; height: 24px; }
.sv-runtime-grid small { color: #8edff7; font-size: 0.65rem; font-weight: 780; letter-spacing: 0.1em; text-transform: uppercase; }
.sv-runtime-grid h3 { margin-top: 18px; color: #ffffff; font: 500 clamp(1.8rem, 3vw, 3rem)/1 var(--sv2-serif); letter-spacing: -0.045em; }
.sv-runtime-grid p { margin-top: 16px; max-width: 430px; color: #aeb7bb; font-size: 0.83rem; line-height: 1.65; }

.sv-gallery { padding-block: clamp(105px, 11vw, 160px); color: #17191b; background: #e8e9e4; }
.sv-gallery-heading { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); align-items: end; gap: clamp(36px, 7vw, 96px); }
.sv-gallery-heading h2 { max-width: 850px; margin-top: 17px; color: inherit; font: 500 clamp(3.1rem, 6.2vw, 6.4rem)/.93 var(--sv2-serif); letter-spacing: -.064em; }
.sv-gallery-heading > div:last-child { padding-bottom: 8px; }
.sv-gallery-heading > div:last-child strong { color: #167bb6; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.sv-gallery-heading > div:last-child p { margin-top: 13px; color: #5c6879; font-size: .94rem; line-height: 1.7; }
.sv-gallery-groups { margin-top: clamp(32px, 5vw, 64px); display: grid; gap: 28px; }
.sv-gallery-group > summary { list-style: none; cursor: pointer; padding-bottom: 12px; }
.sv-gallery-group > summary::-webkit-details-marker { display: none; }
.sv-gallery-group > summary:focus-visible { outline: 2px solid #155d88; outline-offset: 6px; }
.sv-gallery-group { min-width: 0; padding-top: 24px; border-top: 1px solid #c8d6e1; }
.sv-gallery-group-header { display: grid; grid-template-columns: 48px minmax(280px, .92fr) minmax(280px, .7fr); align-items: start; gap: 22px; }
.sv-gallery-group-header > span { width: 38px; height: 38px; display: grid; place-items: center; color: #eaf8ff; border-radius: 50%; background: #0b2030; font-size: .66rem; font-weight: 780; letter-spacing: .05em; }
.sv-gallery-group-header small { color: #47718e; font-size: .62rem; font-weight: 780; letter-spacing: .1em; text-transform: uppercase; }
.sv-gallery-group-header h3 { max-width: 540px; margin-top: 8px; color: #111d29; font: 500 clamp(1.75rem, 3vw, 3rem)/1.02 var(--sv2-serif); letter-spacing: -.045em; }
.sv-gallery-group-header > p { color: #5c6879; font-size: .82rem; line-height: 1.65; }
.sv-gallery-grid { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sv-gallery-rail { margin-top: 64px; padding: 4px 4px 28px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(310px, 370px); gap: 14px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scrollbar-color: #7b8589 transparent; }
.sv-screen-card { overflow: hidden; scroll-snap-align: start; border: 1px solid #cbcdc7; border-radius: 22px; background: #f5f5f1; box-shadow: 0 14px 38px rgb(20 25 28 / 0.08); }
.sv-screen-card figure { margin: 0; overflow: hidden; aspect-ratio: 16 / 9; background: #14171b; }
.sv-screen-card img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top; transition: transform 380ms ease; }
.sv-screen-card:hover img { transform: scale(1.025); }
.sv-screen-card > div { min-height: 125px; padding: 18px; position: relative; }
.sv-screen-card small { color: #747a7d; font-size: 0.6rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
.sv-screen-card h3 { margin: 0 0 8px; color: #17191b; font-size: 1rem; }
.sv-screen-card > div > p { margin: 0 0 12px; color: #465569; font-size: .82rem; line-height: 1.6; }
.sv-screen-card > div > span { display: inline-block; padding: 6px 8px; color: #4b5558; border-radius: 999px; background: #e6e7e1; font-size: .65rem; font-weight: 650; }
.sv-screen-card > div > span.complete { color: #12543b; background: #d7f1e5; }

.sv-screen-edit { width: 100%; height: 100%; position: relative; display: block; padding: 0; overflow: hidden; border: 0; background: #14171b; cursor: pointer; }
.sv-screen-edit::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 58%, rgb(4 8 12 / 0.64)); opacity: 0; transition: opacity 180ms ease; }
.sv-screen-edit > span { position: absolute; right: 12px; bottom: 12px; z-index: 1; padding: 7px 10px; color: #f7fbff; border: 1px solid rgb(255 255 255 / 0.25); border-radius: 999px; background: rgb(8 13 18 / 0.78); backdrop-filter: blur(12px); opacity: 0; transform: translateY(5px); font-size: .62rem; font-weight: 780; letter-spacing: .04em; transition: opacity 180ms ease, transform 180ms ease; }
.sv-screen-edit:hover::after,
.sv-screen-edit:focus-visible::after,
.sv-screen-edit:hover > span,
.sv-screen-edit:focus-visible > span { opacity: 1; transform: translateY(0); }
.sv-screen-edit:focus-visible { outline: 3px solid #169fca; outline-offset: -3px; }
.sv-screen-card:hover .sv-screen-edit img { transform: scale(1.025); }

body.screenshot-editor-open { overflow: hidden; }
.screenshot-editor-backdrop { position: fixed; inset: 0; z-index: 10020; padding: 22px; display: grid; place-items: center; color: #eaf0f5; background: rgb(2 5 9 / .82); backdrop-filter: blur(18px); }
.screenshot-editor-dialog { width: min(1440px, 100%); max-height: calc(100vh - 44px); overflow: hidden; border: 1px solid rgb(255 255 255 / .14); border-radius: 24px; background: #0d1218; box-shadow: 0 34px 120px rgb(0 0 0 / .62); }
.screenshot-editor-dialog > header { min-height: 76px; padding: 15px 18px 15px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid rgb(255 255 255 / .1); background: #111820; }
.screenshot-editor-dialog > header small { color: #75cce7; font-size: .62rem; font-weight: 780; letter-spacing: .1em; text-transform: uppercase; }
.screenshot-editor-dialog > header h2 { margin-top: 4px; color: #f5f8fa; font-size: 1.08rem; letter-spacing: -.02em; }
.screenshot-editor-close { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; color: #dce4e9; border: 1px solid rgb(255 255 255 / .12); border-radius: 50%; background: rgb(255 255 255 / .04); font-size: 1.55rem; line-height: 1; cursor: pointer; }
.screenshot-editor-close:hover { color: #fff; background: rgb(255 255 255 / .1); }
.screenshot-editor-workspace { min-height: 0; height: min(770px, calc(100vh - 122px)); display: grid; grid-template-columns: minmax(0, 1fr) 330px; }
.screenshot-editor-stage { min-width: 0; min-height: 0; padding: 22px; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: 12px; background: #080c11; }
.screenshot-editor-canvas-wrap { min-height: 0; display: grid; place-items: center; overflow: hidden; border: 1px solid rgb(255 255 255 / .09); border-radius: 16px; background-color: #151b22; background-image: linear-gradient(45deg, #1c242d 25%, transparent 25%), linear-gradient(-45deg, #1c242d 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #1c242d 75%), linear-gradient(-45deg, transparent 75%, #1c242d 75%); background-position: 0 0, 0 10px, 10px -10px, -10px 0; background-size: 20px 20px; }
.screenshot-editor-canvas-wrap canvas { max-width: 100%; max-height: 100%; display: block; border-radius: 3px; box-shadow: 0 18px 50px rgb(0 0 0 / .52); cursor: grab; touch-action: none; }
.screenshot-editor-canvas-wrap canvas.dragging { cursor: grabbing; }
.screenshot-editor-stage-meta,
.screenshot-editor-nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.screenshot-editor-stage-meta { color: #7f8c96; font-size: .68rem; }
.screenshot-editor-stage-meta strong { color: #bcc7ce; font-weight: 700; }
.screenshot-editor-nav button { padding: 8px 11px; color: #abb8c1; border: 1px solid rgb(255 255 255 / .1); border-radius: 9px; background: rgb(255 255 255 / .035); font-size: .68rem; cursor: pointer; }
.screenshot-editor-nav button:hover { color: #fff; background: rgb(255 255 255 / .08); }
.screenshot-editor-controls { min-height: 0; padding: 20px; display: grid; align-content: start; gap: 16px; overflow-y: auto; border-left: 1px solid rgb(255 255 255 / .1); background: #111820; scrollbar-width: thin; }
.screenshot-editor-controls fieldset { min-width: 0; padding: 0; border: 0; }
.screenshot-editor-controls legend,
.screenshot-editor-slider > span { width: 100%; margin-bottom: 8px; display: flex; justify-content: space-between; color: #9eabb4; font-size: .66rem; font-weight: 720; letter-spacing: .05em; text-transform: uppercase; }
.screenshot-editor-slider b { color: #e6edf1; font-weight: 760; letter-spacing: 0; text-transform: none; }
.screenshot-editor-segments { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: hidden; border: 1px solid rgb(255 255 255 / .1); border-radius: 10px; }
.screenshot-editor-segments button { min-width: 0; padding: 9px 3px; color: #8c99a3; border: 0; border-right: 1px solid rgb(255 255 255 / .08); background: #0d1319; font-size: .58rem; cursor: pointer; }
.screenshot-editor-segments button:last-child { border-right: 0; }
.screenshot-editor-segments button.active { color: #041015; background: #75cce7; }
.screenshot-editor-tool-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.screenshot-editor-tool-row button,
.screenshot-editor-actions button { padding: 10px 8px; color: #c0cbd2; border: 1px solid rgb(255 255 255 / .11); border-radius: 9px; background: #18212a; font-size: .62rem; font-weight: 680; cursor: pointer; }
.screenshot-editor-tool-row button:hover,
.screenshot-editor-tool-row button.active,
.screenshot-editor-actions button:hover { color: #fff; border-color: rgb(117 204 231 / .45); background: #202d38; }
.screenshot-editor-slider { display: grid; }
.screenshot-editor-slider input[type="range"],
.screenshot-editor-quality input[type="range"] { width: 100%; accent-color: #75cce7; }
.screenshot-editor-export-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; }
.screenshot-editor-export-row label { display: grid; gap: 7px; color: #8f9ba4; font-size: .62rem; }
.screenshot-editor-export-row select { min-height: 36px; padding: 0 9px; color: #e6edf1; border: 1px solid rgb(255 255 255 / .11); border-radius: 8px; background: #18212a; }
.screenshot-editor-quality { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.screenshot-editor-quality input { grid-column: 1; }
.screenshot-editor-quality b { grid-column: 2; color: #dfe8ed; font-size: .62rem; }
.screenshot-editor-actions { display: grid; grid-template-columns: .7fr 1fr 1.2fr; gap: 7px; }
.screenshot-editor-actions button.primary { color: #061116; border-color: #75cce7; background: #75cce7; }
.screenshot-editor-controls > p { margin: -2px 0 0; color: #71808a; font-size: .62rem; line-height: 1.5; }

@media (max-width: 860px) {
  .screenshot-editor-backdrop { padding: 0; }
  .screenshot-editor-dialog { width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; }
  .screenshot-editor-dialog > header { min-height: 66px; }
  .screenshot-editor-workspace { height: calc(100vh - 66px); grid-template-columns: 1fr; grid-template-rows: minmax(300px, 52vh) minmax(0, 1fr); overflow-y: auto; }
  .screenshot-editor-stage { min-height: 300px; padding: 14px; }
  .screenshot-editor-controls { overflow: visible; border-top: 1px solid rgb(255 255 255 / .1); border-left: 0; }
}

.sv-audience { padding-block: clamp(105px, 12vw, 180px); position: relative; isolation: isolate; color: #151719; }
.sv-audience::before { content: ""; position: absolute; inset-block: 0; left: 50%; z-index: -1; width: 100vw; transform: translateX(-50%); background: #f6f6f2; }
.sv-audience-grid { margin-top: 62px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.sv-audience-grid article { min-height: 370px; padding: 38px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid #d8d9d4; border-radius: 28px; background: #ecece7; }
.sv-audience-grid article:last-child { color: #ffffff; border-color: #111315; background: #111315; }
.sv-audience-grid small { color: #6b7173; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; }
.sv-audience-grid article:last-child small { color: #9cdcf0; }
.sv-audience-grid h3 { max-width: 560px; color: inherit; font: 500 clamp(2.25rem, 4vw, 4rem)/0.98 var(--sv2-serif); letter-spacing: -0.052em; }
.sv-audience-grid article > div { display: flex; flex-wrap: wrap; gap: 7px; }
.sv-audience-grid article > div span { padding: 8px 10px; color: #4f5456; border: 1px solid #d0d2cc; border-radius: 999px; background: rgb(255 255 255 / 0.45); font-size: 0.66rem; font-weight: 700; }
.sv-audience-grid article:last-child > div span { color: #dfe4e5; border-color: rgb(255 255 255 / 0.14); background: rgb(255 255 255 / 0.06); }

.sv-workflow { padding-block: clamp(105px, 12vw, 180px); background: #0b0d10; }
.sv-workflow .sv-heading { color: #ffffff; }
.sv-workflow .sv-heading .cine-kicker { color: #8edff7; }
.sv-workflow-grid { margin-top: 60px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgb(255 255 255 / 0.16); }
.sv-workflow-grid article { padding: 30px 32px 38px 0; border-right: 1px solid rgb(255 255 255 / 0.12); }
.sv-workflow-grid article + article { padding-left: 32px; }
.sv-workflow-grid article:last-child { border-right: 0; }
.sv-workflow-grid article > span { color: #8edff7; font-size: 0.66rem; font-weight: 800; }
.sv-workflow-grid h3 { margin-top: 55px; color: #ffffff; font: 500 clamp(1.65rem, 2.5vw, 2.6rem)/1 var(--sv2-serif); letter-spacing: -0.04em; }
.sv-workflow-grid p { margin-top: 15px; color: #9fa8ac; font-size: 0.8rem; line-height: 1.6; }
.sv-workflow-shot { margin: 70px 0 0; overflow: hidden; border: 1px solid rgb(255 255 255 / 0.14); border-radius: 30px; box-shadow: 0 36px 90px rgb(0 0 0 / 0.36); }
.sv-workflow-shot img { width: 100%; max-height: 720px; display: block; object-fit: cover; object-position: top; }

.sv-control { margin-block: clamp(75px, 9vw, 120px); padding: 42px 48px; display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; align-items: center; gap: 30px; color: #151719; border-radius: 28px; background: #dfeae9; }
.sv-control > span { width: 58px; height: 58px; display: grid; place-items: center; color: #ffffff; border-radius: 18px; background: #111315; }
.sv-control > span svg { width: 24px; height: 24px; }
.sv-control .cine-kicker { color: #5e6c70; }
.sv-control h2 { margin-top: 8px; max-width: 820px; color: #151719; font: 500 clamp(1.5rem, 2.7vw, 2.65rem)/1.08 var(--sv2-serif); letter-spacing: -0.035em; }
.sv-control .cine-legal-actions button { color: #151719; border: 0; border-bottom: 1px solid #737c7e; background: transparent; }

.sv-pricing { padding-block: clamp(105px, 12vw, 180px); }
.sv-pricing .sv-heading { color: #ffffff; }
.sv-pricing .sv-heading .cine-kicker { color: #8edff7; }
.sv-pricing .sv-heading > p:last-child { color: #aeb6b9; }
.sv-plan-grid { margin-top: 58px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sv-plan-grid article { min-height: 320px; padding: 27px; position: relative; display: flex; flex-direction: column; color: #f4f5f2; border: 1px solid rgb(255 255 255 / 0.12); border-radius: 24px; background: rgb(255 255 255 / 0.045); }
.sv-plan-grid article.featured { color: #101214; border-color: #d9eeee; background: #d9eeee; transform: translateY(-12px); }
.sv-plan-grid article.experimental { border-color: rgb(255 202 116 / 0.35); }
.sv-plan-badge { width: fit-content; margin-bottom: 18px; padding: 5px 8px; color: #111315; border-radius: 999px; background: #a8e3f4; font-size: 0.56rem; font-weight: 820; letter-spacing: 0.08em; text-transform: uppercase; }
.sv-plan-grid article.featured .sv-plan-badge { background: #ffffff; }
.sv-plan-grid article > p { color: inherit; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.sv-plan-grid h3 { margin-top: 28px; color: inherit; font: 540 clamp(2.5rem, 4vw, 4rem)/0.9 var(--sv2-serif); letter-spacing: -0.055em; }
.sv-plan-grid h3 small { color: inherit; opacity: 0.62; font: 650 0.65rem/1 var(--sv2-sans); letter-spacing: 0; }
.sv-plan-grid article > strong { margin-top: 18px; color: inherit; font-size: 0.84rem; }
.sv-plan-grid article > button { min-height: 46px; margin-top: auto; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; color: #101214; border: 0; border-radius: 999px; background: #f1f2ef; font-weight: 760; }
.sv-plan-grid article.featured > button { color: #ffffff; background: #080a0b; }
.sv-plan-grid article > button svg { width: 15px; height: 15px; }
.sv-credit-packs { margin-top: 30px; padding-top: 25px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; border-top: 1px solid rgb(255 255 255 / 0.13); }
.sv-credit-packs > p { margin-right: auto; color: #aeb6b9; font-size: 0.73rem; font-weight: 760; }
.sv-credit-packs button { padding: 10px 13px; display: inline-flex; gap: 9px; color: #f5f6f3; border: 1px solid rgb(255 255 255 / 0.14); border-radius: 999px; background: rgb(255 255 255 / 0.04); }
.sv-credit-packs button span { color: #aeb6b9; }
.sv-pricing-note { margin-top: 22px; color: #7f888c; font-size: 0.68rem; text-align: center; }

.sv-faq { padding-block: clamp(95px, 11vw, 160px); position: relative; isolation: isolate; color: #161719; }
.sv-faq::before { content: ""; position: absolute; inset-block: 0; left: 50%; z-index: -1; width: 100vw; transform: translateX(-50%); background: var(--sv-paper); }
.sv-faq .cine-faq-list { margin-top: 45px; }
.sv-faq .cine-faq-list details { color: #17191b; border-color: #cbcfc9; }
.sv-faq .cine-faq-list summary { color: #17191b; }
.sv-faq .cine-faq-list details p { color: #5c6264; }

.sv-finale { min-height: 720px; padding: 110px 0 30px; position: relative; isolation: isolate; background: #08090b; }
.sv-finale > img,
.sv-finale-shade { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
.sv-finale > img { object-fit: cover; object-position: center; opacity: 0.66; }
.sv-finale-shade { z-index: -1; background: linear-gradient(180deg, #08090b 0%, rgb(8 9 11 / 0.2) 42%, #08090b 100%); }
.sv-finale-card { padding: clamp(32px, 5vw, 68px); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr); align-items: end; gap: 55px; border-color: rgb(255 255 255 / 0.2); background: rgb(8 10 13 / 0.66); }
.sv-finale-card .cine-kicker { color: #a6e6f8; }
.sv-finale-card h2 { margin-top: 16px; color: #ffffff; font: 500 clamp(3.2rem, 6vw, 6rem)/0.91 var(--sv2-serif); letter-spacing: -0.06em; }
.sv-finale-card h2 em { color: #a6e6f8; font-style: italic; }
.sv-finale-card > div:last-child { display: grid; gap: 18px; }
.sv-finale-card .landing-waitlist-form { display: grid; grid-template-columns: 1fr auto; }
.sv-finale-card input { min-width: 0; padding: 0 17px; color: #ffffff; border: 1px solid rgb(255 255 255 / 0.16); border-radius: 999px 0 0 999px; background: rgb(255 255 255 / 0.08); }
.sv-finale-card form > button { padding: 0 18px; color: #111315; border: 0; border-radius: 0 999px 999px 0; background: #ffffff; font-weight: 760; }
.sv-finale-card form small { grid-column: 1 / -1; color: #e9eeee; }
.sv-footer { min-height: 112px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; color: #d5dadd; }
.sv-footer .motion-brand { color: #ffffff; }
.sv-footer .motion-brand span { color: #0a0b0c; background: #ffffff; }
.sv-footer nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; }
.sv-footer nav :is(a, button) { padding: 0; color: #b4bdc1; border: 0; background: transparent; font-size: 0.72rem; }
.sv-footer > span { color: #7e898e; font-size: 0.68rem; }

@media (max-width: 1100px) {
  .sv-lite-hero { min-height: auto; }
  .sv-hero-grid { grid-template-columns: 1fr; padding-top: 170px; }
  .sv-product-stage { max-width: 900px; transform: none; }
  .sv-platform-grid { grid-template-columns: 1fr; }
  .sv-wide-shot img { height: auto; min-height: 0; }
  .sv-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-capability-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
  .sv-capability-list article:nth-last-child(2) { border-bottom: 0; }
  .sv-standard { grid-template-columns: 0.35fr 1fr; }
  .sv-standard > p:last-child { grid-column: 2; }
  .sv-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-plan-grid article.featured { transform: none; }
}

@media (max-width: 760px) {
  .sv-lite .cine-container { width: min(100% - 28px, 1240px); }
  .sv-lite .motion-nav { width: calc(100% - 24px); }
  .sv-hero-grid { padding-top: 142px; padding-bottom: 54px; gap: 46px; }
  .sv-hero-copy h1 { font-size: clamp(3.45rem, 16vw, 5.5rem); }
  .sv-hero-vignette { background: linear-gradient(0deg, #08090b 0%, rgb(5 7 10 / 0.62) 60%, rgb(2 3 6 / 0.82) 100%); }
  .sv-product-stage { border-radius: 18px; }
  .sv-product-stage figcaption { align-items: flex-start; flex-direction: column; }
  .sv-signal-strip { justify-content: flex-start; }
  .sv-heading.split { grid-template-columns: 1fr; gap: 20px; }
  .sv-gallery-heading { grid-template-columns: 1fr; gap: 22px; }
  .sv-gallery-group-header { grid-template-columns: 42px minmax(0, 1fr); gap: 16px; }
  .sv-gallery-group-header > p { grid-column: 2; }
  .sv-gallery-grid { grid-template-columns: 1fr; }
  .sv-platform-grid { margin-top: 45px; }
  .sv-capability-list { grid-template-columns: 1fr; padding-inline: 22px; }
  .sv-capability-list article:nth-last-child(2) { border-bottom: 1px solid #cacbc5; }
  .sv-standard { margin-top: 76px; padding-left: 24px; grid-template-columns: 1fr; gap: 24px; }
  .sv-standard > p:last-child { grid-column: auto; }
  .sv-runtime-grid,
  .sv-audience-grid,
  .sv-workflow-grid,
  .sv-plan-grid,
  .sv-finale-card { grid-template-columns: 1fr; }
  .sv-runtime-grid article { min-height: 0; padding: 25px; grid-template-columns: 48px 1fr; }
  .sv-runtime-grid article > span { width: 46px; height: 46px; border-radius: 15px; }
  .sv-gallery-rail { grid-auto-columns: minmax(276px, 84vw); }
  .sv-audience-grid article { min-height: 320px; padding: 28px; }
  .sv-workflow-grid { border-top: 0; }
  .sv-workflow-grid article,
  .sv-workflow-grid article + article { padding: 25px 0; border-top: 1px solid rgb(255 255 255 / 0.14); border-right: 0; }
  .sv-workflow-grid h3 { margin-top: 28px; }
  .sv-control { padding: 30px; grid-template-columns: 48px 1fr; }
  .sv-control > span { width: 48px; height: 48px; }
  .sv-control .cine-legal-actions { grid-column: 2; }
  .sv-credit-packs { align-items: stretch; flex-direction: column; }
  .sv-credit-packs button { justify-content: space-between; }
  .sv-finale { min-height: 650px; padding-top: 70px; }
  .sv-finale-card { align-items: stretch; gap: 35px; }
  .sv-finale-card .landing-waitlist-form { grid-template-columns: 1fr; gap: 8px; }
  .sv-finale-card input,
  .sv-finale-card form > button { min-height: 48px; border-radius: 999px; }
  .sv-footer { padding-block: 34px; grid-template-columns: 1fr; }
  .sv-footer nav { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .sv-product-stage,
  .sv-hero-art { transform: none; }
}

/* Palette and surface cohesion ------------------------------------------- */
.sv-lite {
  --sv-ink: #070914;
  --sv-night: #0b1022;
  --sv-paper: #f1f3f9;
  --sv-soft: #e3e7f2;
  --sv-blue: #8bdcff;
  --sv-violet: #9e8cff;
  --sv-lilac: #cbc5ff;
  --sv-line-light: #cbd2e3;
  --sv-muted-light: #626a7c;
  --sv-muted-dark: #aab5cf;
  background: var(--sv-ink);
}

.sv-lite .motion-nav {
  border-color: rgb(103 113 154 / 0.18);
  background: rgb(247 248 252 / 0.9);
  box-shadow: 0 18px 70px rgb(10 13 35 / 0.2);
}

.sv-lite .motion-brand span,
.sv-control > span {
  background: linear-gradient(145deg, #10152e, #2e2568);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
}

.sv-hero-vignette {
  background:
    linear-gradient(90deg, rgb(4 6 15 / 0.97) 0%, rgb(7 9 24 / 0.8) 42%, rgb(8 11 30 / 0.14) 75%),
    linear-gradient(0deg, #070914 0%, transparent 38%, rgb(3 5 15 / 0.5) 100%);
}

.sv-hero-copy h1 em,
.sv-finale-card h2 em {
  color: transparent;
  background: linear-gradient(90deg, #aee7ff 0%, #c9c1ff 58%, #a993ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.sv-hero-copy > p:not(.motion-badge) { color: #bdc7dd; }
.sv-hero-copy .motion-badge { color: #edf6ff; border-color: rgb(167 184 255 / 0.25); background: rgb(9 13 32 / 0.56); }
.sv-hero-proof span { color: #c5cce0; border-color: rgb(163 180 255 / 0.18); background: rgb(11 15 36 / 0.52); }
.sv-product-stage { border-color: rgb(177 166 255 / 0.38); background: #0d1228; box-shadow: 0 42px 100px rgb(1 3 15 / 0.64), 0 0 0 10px rgb(146 127 255 / 0.055), 0 0 70px rgb(91 105 255 / 0.16); }
.sv-product-stage figcaption { color: #d7dcef; background: #0a0f22; }

.sv-signal-strip {
  color: #3d4354;
  border-color: var(--sv-line-light);
  background: var(--sv-paper);
}
.sv-signal-strip i { background: linear-gradient(135deg, var(--sv-blue), var(--sv-violet)); }

.sv-platform::before,
.sv-faq::before { background: var(--sv-paper); }
.sv-platform,
.sv-audience,
.sv-faq,
.sv-gallery { color: #171a27; }
.sv-heading .cine-kicker,
.sv-standard .cine-kicker { color: #656f8c; }
.sv-heading h2 em,
.sv-standard h2 em { color: #6359a5; }
.sv-heading > p:last-child,
.sv-heading.split > p,
.sv-standard > p:last-child { color: var(--sv-muted-light); }

.sv-wide-shot,
.sv-capability-list,
.sv-screen-card,
.sv-audience-grid article {
  border-color: var(--sv-line-light);
  box-shadow: 0 24px 70px rgb(39 45 79 / 0.09);
}
.sv-wide-shot { background: #0e1329; }
.sv-wide-shot figcaption { color: #dce2f5; background: #0c1125; }
.sv-capability-list { background: linear-gradient(145deg, #e8ebf5, #dde2f0); }
.sv-capability-list article { border-color: #c9d0e0; }
.sv-capability-list article > span { color: #7065b4; }
.sv-capability-list h3 { color: #171a27; }
.sv-capability-list p { color: #646c7e; }
.sv-standard { border-left-color: var(--sv-violet); }
.sv-standard h2 { color: #151824; }

.sv-runtime,
.sv-workflow {
  position: relative;
  background:
    radial-gradient(circle at 88% 12%, rgb(106 83 255 / 0.18), transparent 28rem),
    radial-gradient(circle at 8% 88%, rgb(73 194 255 / 0.1), transparent 24rem),
    linear-gradient(155deg, #070a17 0%, #0c1126 56%, #090b19 100%);
}
.sv-runtime::after,
.sv-workflow::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgb(161 174 255 / 0.035) 1px, transparent 1px), linear-gradient(90deg, rgb(161 174 255 / 0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
.sv-runtime .cine-container,
.sv-workflow .cine-container { position: relative; z-index: 1; }
.sv-runtime .sv-heading .cine-kicker,
.sv-workflow .sv-heading .cine-kicker,
.sv-pricing .sv-heading .cine-kicker { color: #98ddff; }
.sv-runtime-grid article { border-color: rgb(168 179 255 / 0.17); background: linear-gradient(145deg, rgb(151 169 255 / 0.095), rgb(95 73 190 / 0.035)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.055); }
.sv-runtime-grid article:first-child > span { background: linear-gradient(145deg, #b7ecff, #8fd4ff); }
.sv-runtime-grid article:last-child > span { background: linear-gradient(145deg, #d3ccff, #aa96ff); }
.sv-runtime-grid p,
.sv-workflow-grid p { color: var(--sv-muted-dark); }

.sv-gallery { background: linear-gradient(180deg, #e5e9f4 0%, #edf0f7 100%); }
.sv-screen-card { background: #f8f9fc; }
.sv-screen-card figure { background: #0d1228; }
.sv-screen-card small { color: #6d7190; }
.sv-screen-card > div > span { color: #555d73; background: #e4e7f1; }
.sv-screen-card > div > span.complete { color: #324a72; background: #dbe8ff; }

.sv-audience::before { background: #f5f6fa; }
.sv-audience-grid article { background: linear-gradient(145deg, #eceffa, #e2e6f2); }
.sv-audience-grid article:last-child { border-color: #242153; background: radial-gradient(circle at 90% 10%, rgb(115 91 255 / 0.3), transparent 20rem), linear-gradient(145deg, #11162d, #171238); }
.sv-audience-grid article:last-child small { color: #a8e4ff; }
.sv-audience-grid article > div span { color: #535b70; border-color: #cbd1df; background: rgb(255 255 255 / 0.6); }
.sv-audience-grid article:last-child > div span { color: #e3e6f4; border-color: rgb(179 172 255 / 0.22); background: rgb(161 148 255 / 0.09); }

.sv-workflow-grid { border-color: rgb(177 185 255 / 0.18); }
.sv-workflow-grid article { border-color: rgb(177 185 255 / 0.14); }
.sv-workflow-grid article > span { color: #aaa0ff; }
.sv-workflow-shot { border-color: rgb(177 166 255 / 0.28); box-shadow: 0 42px 100px rgb(1 3 16 / 0.52), 0 0 60px rgb(89 77 216 / 0.1); }

.sv-control {
  color: #171a27;
  border: 1px solid #cbd5ed;
  background: linear-gradient(125deg, #e1f2ff 0%, #e6e4ff 58%, #f1efff 100%);
  box-shadow: 0 28px 80px rgb(57 54 114 / 0.12);
}
.sv-control h2 { color: #171a27; }
.sv-control .cine-kicker { color: #62599b; }

.sv-pricing { position: relative; }
.sv-plan-grid article { border-color: rgb(174 184 255 / 0.16); background: linear-gradient(155deg, rgb(159 175 255 / 0.075), rgb(255 255 255 / 0.025)); }
.sv-plan-grid article.featured { color: #111527; border-color: #c8c3ff; background: linear-gradient(145deg, #ddf4ff 0%, #e5e1ff 100%); box-shadow: 0 26px 70px rgb(69 60 159 / 0.25); }
.sv-plan-grid article.experimental { border-color: rgb(184 164 255 / 0.38); }
.sv-plan-badge { background: linear-gradient(90deg, #a9e7ff, #c5b8ff); }
.sv-credit-packs button { border-color: rgb(174 184 255 / 0.18); background: rgb(132 145 222 / 0.06); }

.sv-faq .cine-faq-list details { border-color: var(--sv-line-light); }
.sv-faq .cine-faq-list details p { color: var(--sv-muted-light); }

.sv-finale-shade { background: linear-gradient(180deg, #070914 0%, rgb(8 10 26 / 0.2) 42%, #070914 100%); }
.sv-finale-card { border-color: rgb(175 165 255 / 0.28); background: linear-gradient(135deg, rgb(8 12 31 / 0.78), rgb(19 15 50 / 0.7)); box-shadow: 0 30px 100px rgb(0 1 12 / 0.44); }
.sv-finale-card input { border-color: rgb(177 187 255 / 0.2); background: rgb(255 255 255 / 0.075); }

/* Strict midnight, cloud, and electric-blue landing ---------------------- */
.sv-lite {
  --sv-ink: #050811;
  --sv-night: #081421;
  --sv-paper: #f5f8fc;
  --sv-soft: #e8eef6;
  --sv-blue: #42b8ff;
  --sv-violet: #42b8ff;
  --sv-lilac: #bfe9ff;
  --sv-line-light: #d2deea;
  --sv-muted-light: #5c6879;
  --sv-muted-dark: #aebed0;
  color: #ffffff;
  background: #050811;
}

.sv-lite :is(img, video, canvas) {
  filter: none !important;
}

.sv-lite .motion-nav {
  border-color: #d4e0eb;
  background: rgb(248 251 254 / 0.94);
  box-shadow: 0 18px 64px rgb(3 18 31 / 0.24);
}
.sv-lite .motion-brand span,
.sv-control > span { color: #ffffff; background: #071827; box-shadow: inset 0 0 0 1px rgb(88 193 255 / 0.2); }
.sv-lite .motion-nav-actions :is(.motion-login, .motion-get-started),
.sv-lite .motion-mobile-menu .motion-get-started,
.sv-primary-button { color: #ffffff !important; border-color: #050811 !important; background: #050811 !important; }
.sv-primary-button:hover { color: #050811 !important; border-color: #ffffff !important; background: #ffffff !important; }

.sv-hero-vignette {
  background:
    linear-gradient(90deg, rgb(3 8 17 / 0.98) 0%, rgb(5 14 28 / 0.79) 44%, rgb(3 12 25 / 0.12) 76%),
    linear-gradient(0deg, #050811 0%, transparent 40%, rgb(2 8 18 / 0.52) 100%);
}
.sv-hero-copy h1 em,
.sv-finale-card h2 em {
  color: #79d2ff;
  background: none;
  -webkit-text-fill-color: #79d2ff;
}
.sv-hero-copy > p:not(.motion-badge) { color: #c3d1df; }
.sv-hero-copy .motion-badge { color: #e9f7ff; border-color: rgb(95 197 255 / 0.28); background: rgb(5 16 29 / 0.6); }
.sv-hero-copy .motion-badge i { background: #42b8ff; box-shadow: 0 0 0 4px rgb(66 184 255 / 0.14); }
.sv-hero-proof span { color: #c8d6e4; border-color: rgb(95 197 255 / 0.2); background: rgb(5 16 29 / 0.58); }
.sv-product-stage { border-color: #285b79; background: #07121d; box-shadow: 0 42px 100px rgb(0 3 10 / 0.72), 0 0 0 10px rgb(66 184 255 / 0.05); }
.sv-product-stage figcaption { color: #d9e7f2; background: #07121d; }
.sv-product-stage figcaption span { color: #79d2ff; }

.sv-signal-strip { color: #263748; border-color: #d4e0ea; background: #f5f8fc; }
.sv-signal-strip i { background: #42b8ff; }
.sv-platform::before,
.sv-audience::before,
.sv-faq::before { background: #f5f8fc; }
.sv-platform,
.sv-audience,
.sv-faq,
.sv-gallery { color: #111d29; }
.sv-heading .cine-kicker,
.sv-standard .cine-kicker { color: #47718e; }
.sv-heading h2 em,
.sv-standard h2 em { color: #167bb6; }
.sv-heading > p:last-child,
.sv-heading.split > p,
.sv-standard > p:last-child { color: #5c6879; }

.sv-wide-shot,
.sv-capability-list,
.sv-screen-card,
.sv-audience-grid article { border-color: #d2deea; box-shadow: 0 24px 64px rgb(23 64 91 / 0.1); }
.sv-wide-shot { background: #07121d; }
.sv-wide-shot figcaption { color: #deebf4; background: #07121d; }
.sv-capability-list { background: #e8eef6; }
.sv-capability-list article { border-color: #cedae5; }
.sv-capability-list article > span { color: #167bb6; }
.sv-capability-list h3 { color: #111d29; }
.sv-capability-list p { color: #5c6879; }
.sv-standard { border-left-color: #42b8ff; }
.sv-standard h2 { color: #111d29; }

.sv-runtime,
.sv-workflow {
  background: radial-gradient(circle at 88% 12%, rgb(66 184 255 / 0.13), transparent 28rem), #06101b;
}
.sv-runtime::after,
.sv-workflow::after { background-image: linear-gradient(rgb(92 193 250 / 0.05) 1px, transparent 1px), linear-gradient(90deg, rgb(92 193 250 / 0.05) 1px, transparent 1px); }
.sv-runtime .sv-heading .cine-kicker,
.sv-workflow .sv-heading .cine-kicker,
.sv-pricing .sv-heading .cine-kicker { color: #79d2ff; }
.sv-runtime-grid article { border-color: #1c4865; background: linear-gradient(145deg, #0d2131, #08131e); box-shadow: inset 0 1px 0 rgb(116 207 255 / 0.06); }
.sv-runtime-grid article:first-child > span,
.sv-runtime-grid article:last-child > span { color: #06101b; background: #bfe9ff; }
.sv-runtime-grid small { color: #79d2ff; }
.sv-runtime-grid p,
.sv-workflow-grid p { color: #aebed0; }

.sv-gallery { background: #e8eef6; }
.sv-screen-card { background: #f9fbfd; }
.sv-screen-card figure { background: #07121d; }
.sv-screen-card small { color: #5d7184; }
.sv-screen-card > div > span,
.sv-screen-card > div > span.complete { color: #155d88; background: #d9effb; }

.sv-audience-grid article { background: #e8eef6; }
.sv-audience-grid article:last-child { color: #ffffff; border-color: #123d59; background: #071827; }
.sv-audience-grid article:last-child small { color: #79d2ff; }
.sv-audience-grid article > div span { color: #405264; border-color: #cbd8e3; background: #f9fbfd; }
.sv-audience-grid article:last-child > div span { color: #e4f4fc; border-color: #28536d; background: #0d2536; }

.sv-workflow-grid { border-color: #1d455f; }
.sv-workflow-grid article { border-color: #193b52; }
.sv-workflow-grid article > span { color: #79d2ff; }
.sv-workflow-shot { border-color: #285b79; box-shadow: 0 42px 100px rgb(0 3 10 / 0.58); }

.sv-control { color: #111d29; border-color: #c7dceb; background: #e5f4fc; box-shadow: 0 28px 70px rgb(24 100 148 / 0.12); }
.sv-control h2 { color: #111d29; }
.sv-control .cine-kicker { color: #167bb6; }

.sv-plan-grid article { border-color: #1c425b; background: #0a1723; }
.sv-plan-grid article.featured { color: #07121d; border-color: #b9e2f8; background: #e5f4fc; box-shadow: 0 26px 70px rgb(35 133 190 / 0.2); }
.sv-plan-grid article.experimental { border-color: #2d6d96; }
.sv-plan-badge,
.sv-plan-grid article.featured .sv-plan-badge { color: #06101b; background: #79d2ff; }
.sv-plan-grid article > button { color: #07121d; background: #f5f8fc; }
.sv-plan-grid article.featured > button { color: #ffffff; background: #06101b; }
.sv-credit-packs button { color: #ffffff; border-color: #1c425b; background: #0a1723; }
.sv-credit-packs button span { color: #aebed0; }

.sv-faq .cine-faq-list details { border-color: #d2deea; }
.sv-faq .cine-faq-list details p { color: #5c6879; }

.sv-finale-shade { background: linear-gradient(180deg, #050811 0%, rgb(3 15 27 / 0.25) 42%, #050811 100%); }
.sv-finale-card { border-color: #285b79; background: rgb(5 16 29 / 0.78); box-shadow: 0 30px 100px rgb(0 3 10 / 0.58); }
.sv-finale-card .cine-kicker { color: #79d2ff; }
.sv-finale-card input { border-color: #28536d; background: #0a1c2a; }
.sv-finale-card form > button { color: #06101b; background: #bfe9ff; }

/* Computer Access settings: keep the verified folder and policy readable. */
.computer-access-shell {
  display: grid;
  gap: 18px;
  padding-bottom: 24px;
}

.computer-access-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 20px;
  border: 1px solid var(--line, #34373d);
  border-radius: 18px;
  background: var(--surface-2, #1b1c1f);
}

.computer-access-status-visual {
  display: flex;
  align-items: center;
  gap: 7px;
}

.computer-access-status-visual > span,
.computer-access-status-visual > b {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 11px;
  background: #25282e;
}

.computer-access-status-visual > i {
  width: 24px;
  height: 1px;
  background: #565b64;
}

.computer-access-status h3,
.computer-access-card h3,
.computer-access-status p,
.computer-access-card p {
  margin: 0;
}

.computer-access-status p,
.computer-access-card p,
.computer-access-card small,
.computer-access-actions > span {
  color: var(--text-muted, #9b9fa8);
}

.computer-access-status > div:nth-child(2) {
  display: grid;
  gap: 6px;
}

.computer-access-status > div:nth-child(2) > strong {
  display: inline-flex;
  gap: 7px;
  align-items: center;
}

.computer-access-health {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  white-space: nowrap;
}

.computer-access-health i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #80858f;
}

.computer-access-status.is-connected .computer-access-health i {
  background: #4bd295;
}

.computer-access-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, .92fr);
  gap: 18px;
}

.computer-access-card {
  display: grid;
  align-content: start;
  gap: 18px;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--line, #34373d);
  border-radius: 18px;
  background: var(--surface-2, #1b1c1f);
}

.computer-access-card > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.computer-access-card > header > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: #25282e;
}

.computer-access-card > header > div {
  display: grid;
  gap: 4px;
}

.computer-path-field {
  display: grid;
  gap: 8px;
}

.computer-path-field textarea {
  width: 100%;
  min-height: 88px;
  resize: vertical;
}

.computer-access-files {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.computer-access-files > span:first-child {
  grid-column: 1 / -1;
  color: var(--text-muted, #9b9fa8);
  font-size: 12px;
}

.computer-access-files > span:not(:first-child) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 7px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line, #34373d);
  border-radius: 11px;
  background: #15171a;
}

.computer-access-files > span:not(:first-child) svg {
  grid-row: 1 / span 2;
}

.computer-access-files strong,
.computer-access-files small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.computer-access-empty {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 14px;
  border: 1px dashed var(--line, #34373d);
  border-radius: 12px;
}

.computer-access-empty > span,
.computer-safety-list li > span {
  display: grid;
  gap: 3px;
}

.computer-safety-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.computer-safety-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 0;
  border-top: 1px solid var(--line, #34373d);
}

.computer-access-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 4px 2px;
}

.computer-access-actions > div {
  display: flex;
  gap: 10px;
}

@media (max-width: 980px) {
  .computer-access-grid { grid-template-columns: 1fr; }
  .computer-access-status { grid-template-columns: auto minmax(0, 1fr); }
  .computer-access-health { grid-column: 2; }
  .computer-access-actions { align-items: stretch; flex-direction: column; }
}

/* Voice Production Suite — full workflows below the live conversation surface. */
.voice-mode-production-page {
  width: min(1480px, calc(100% - 32px));
  display: grid;
  gap: 22px;
  margin: 0 auto;
  padding: 20px 0 44px;
}

.voice-mode-production-page > .voice-live-experience {
  width: 100%;
  min-height: min(660px, calc(100vh - 170px));
  margin: 0;
}

.voice-production-suite {
  display: grid;
  gap: 18px;
  padding: clamp(20px, 3vw, 34px);
  overflow: hidden;
  color: var(--text, #f4f6fb);
  background:
    radial-gradient(circle at 86% 0%, rgb(78 111 255 / .18), transparent 31%),
    linear-gradient(145deg, color-mix(in srgb, var(--surface, #17191f) 96%, #111b38), color-mix(in srgb, var(--surface-2, #20232a) 95%, #090d18));
  border: 1px solid color-mix(in srgb, var(--line, #343842) 78%, #7087ff);
  border-radius: 28px;
  box-shadow: 0 28px 90px rgb(0 0 0 / .24);
}

.voice-production-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.voice-production-header > div {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.voice-production-header small,
.voice-studio-workbench > header small {
  color: #94aaff;
  font-size: .69rem;
  font-weight: 760;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.voice-production-header h2,
.voice-studio-workbench h3 {
  margin: 0;
  color: var(--text, #f4f6fb);
}

.voice-production-header h2 {
  font-size: clamp(1.65rem, 3vw, 2.65rem);
  letter-spacing: -.045em;
}

.voice-production-header p,
.voice-studio-workbench > header p {
  max-width: 760px;
  margin: 0;
  color: var(--muted, #a5aab5);
  line-height: 1.55;
}

.voice-production-header > span,
.voice-studio-workbench > header > b {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 8px 11px;
  color: #c7d2ff;
  background: rgb(97 123 255 / .11);
  border: 1px solid rgb(126 149 255 / .2);
  border-radius: 999px;
  font-size: .72rem;
}

.voice-production-header > span svg,
.voice-production-trust svg {
  width: 14px;
  height: 14px;
}

.voice-studio-tools {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 9px;
}

.voice-studio-tools button {
  min-width: 0;
  min-height: 126px;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 7px;
  padding: 14px;
  color: var(--text, #f4f6fb);
  text-align: left;
  background: color-mix(in srgb, var(--surface-2, #20232a) 88%, #10162a);
  border: 1px solid var(--line, #343842);
  border-radius: 17px;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.voice-studio-tools button:hover,
.voice-studio-tools button.active {
  background: linear-gradient(145deg, rgb(91 119 255 / .17), rgb(53 70 137 / .08));
  border-color: rgb(125 148 255 / .52);
  transform: translateY(-2px);
}

.voice-studio-tools button > span,
.voice-studio-workbench > header > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: #afbdff;
  background: rgb(110 133 255 / .13);
  border: 1px solid rgb(128 149 255 / .2);
  border-radius: 11px;
}

.voice-studio-tools svg,
.voice-studio-workbench > header > span svg {
  width: 17px;
  height: 17px;
}

.voice-studio-tools strong {
  font-size: .82rem;
}

.voice-studio-tools small {
  color: var(--muted, #a5aab5);
  font-size: .69rem;
  line-height: 1.4;
}

.voice-studio-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 340px);
  gap: 18px;
  padding: 20px;
  background: color-mix(in srgb, var(--bg, #0c0e12) 76%, transparent);
  border: 1px solid var(--line, #343842);
  border-radius: 21px;
}

.voice-studio-workbench > header {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line, #343842);
}

.voice-studio-workbench > header > span {
  width: 44px;
  height: 44px;
  border-radius: 14px;
}

.voice-studio-workbench > header > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.voice-studio-workbench h3 {
  font-size: 1.2rem;
}

.voice-studio-controls {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 14px;
}

.voice-studio-workbench:not(:has(.voice-studio-result)) .voice-studio-controls {
  grid-column: 1 / -1;
}

.voice-studio-controls > label:not(.voice-studio-file, .voice-studio-consent),
.voice-studio-form-grid label {
  display: grid;
  gap: 7px;
  color: var(--text-soft, #d3d6df);
  font-size: .73rem;
  font-weight: 680;
}

.voice-studio-controls input:not([type="checkbox"]),
.voice-studio-controls select,
.voice-studio-controls textarea,
.voice-studio-result textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  color: var(--text, #f4f6fb);
  background: color-mix(in srgb, var(--surface-2, #20232a) 91%, #0d1020);
  border: 1px solid var(--line, #343842);
  border-radius: 12px;
  font: inherit;
  line-height: 1.5;
  resize: vertical;
}

.voice-studio-controls input:focus,
.voice-studio-controls select:focus,
.voice-studio-controls textarea:focus {
  outline: 2px solid rgb(118 143 255 / .42);
  outline-offset: 1px;
}

.voice-studio-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.voice-studio-file {
  min-height: 76px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 13px;
  color: var(--text, #f4f6fb);
  background: rgb(255 255 255 / .025);
  border: 1px dashed color-mix(in srgb, var(--line, #343842) 72%, #7d92ff);
  border-radius: 14px;
  cursor: pointer;
}

.voice-studio-file.has-file {
  background: rgb(80 187 133 / .06);
  border-color: rgb(80 187 133 / .35);
}

.voice-studio-file > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #aebcff;
  background: rgb(113 135 255 / .1);
  border-radius: 11px;
}

.voice-studio-file > span svg {
  width: 17px;
  height: 17px;
}

.voice-studio-file > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.voice-studio-file strong,
.voice-studio-file small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-studio-file strong { font-size: .8rem; }
.voice-studio-file small { color: var(--muted, #a5aab5); font-size: .68rem; }
.voice-studio-file > b { color: #b9c5ff; font-size: .72rem; }

.voice-studio-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px;
  background: rgb(255 255 255 / .025);
  border: 1px solid var(--line, #343842);
  border-radius: 13px;
}

.voice-studio-consent input,
.voice-studio-checks input {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  margin: 2px 0 0;
  accent-color: #7890ff;
}

.voice-studio-consent span {
  display: grid;
  gap: 4px;
}

.voice-studio-consent strong { color: var(--text, #f4f6fb); font-size: .76rem; }
.voice-studio-consent small { color: var(--muted, #a5aab5); font-size: .68rem; line-height: 1.45; }
.voice-studio-consent.compact { padding: 10px 12px; }

.voice-studio-checks,
.voice-studio-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.voice-studio-checks label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  color: var(--text-soft, #d3d6df);
  background: rgb(255 255 255 / .025);
  border: 1px solid var(--line, #343842);
  border-radius: 11px;
  font-size: .72rem;
}

.voice-studio-actions button,
.voice-studio-run,
.voice-studio-result button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  color: var(--text, #f4f6fb);
  background: rgb(255 255 255 / .05);
  border: 1px solid var(--line, #343842);
  border-radius: 12px;
  font-size: .74rem;
  font-weight: 720;
  cursor: pointer;
}

.voice-studio-actions button svg,
.voice-studio-run svg,
.voice-studio-result button svg {
  width: 15px;
  height: 15px;
}

.voice-studio-actions .voice-studio-run,
.voice-studio-run {
  color: #fff;
  background: linear-gradient(135deg, #6178ec, #7657cf);
  border-color: transparent;
}

.voice-dictation-pad {
  position: relative;
}

.voice-dictation-pad > div {
  position: absolute;
  top: 11px;
  right: 12px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 3px;
  opacity: .35;
}

.voice-dictation-pad > div span {
  width: 3px;
  height: 10px;
  background: #90a4ff;
  border-radius: 999px;
}

.voice-dictation-pad.is-listening > div { opacity: 1; }
.voice-dictation-pad.is-listening > div span { animation: voiceStudioWave .85s ease-in-out infinite alternate; }
.voice-dictation-pad.is-listening > div span:nth-child(2) { animation-delay: -.4s; height: 17px; }
.voice-dictation-pad.is-listening > div span:nth-child(3) { animation-delay: -.2s; height: 13px; }
.voice-dictation-pad.is-listening > div span:nth-child(4) { animation-delay: -.55s; height: 19px; }
.voice-dictation-pad.is-listening > div span:nth-child(5) { animation-delay: -.1s; }

@keyframes voiceStudioWave {
  from { transform: scaleY(.45); }
  to { transform: scaleY(1.15); }
}

.voice-studio-result {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 11px;
  padding: 15px;
  background: rgb(91 119 255 / .065);
  border: 1px solid rgb(107 133 255 / .2);
  border-radius: 15px;
}

.voice-studio-result.is-error {
  background: rgb(194 67 80 / .07);
  border-color: rgb(221 83 97 / .25);
}

.voice-studio-result header {
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.voice-studio-result header > span {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  color: #9eb0ff;
  background: rgb(104 129 255 / .1);
  border-radius: 9px;
}

.voice-studio-result header svg { width: 15px; height: 15px; }
.voice-studio-result header > div { display: grid; gap: 2px; }
.voice-studio-result header strong { font-size: .78rem; }
.voice-studio-result header small { color: var(--muted, #a5aab5); font-size: .67rem; }
.voice-studio-result p { margin: 0; color: #ffc9cf; font-size: .72rem; line-height: 1.5; }
.voice-studio-result textarea { min-height: 150px; font-size: .69rem; }

.voice-studio-progress {
  height: 4px;
  overflow: hidden;
  background: rgb(255 255 255 / .07);
  border-radius: 999px;
}

.voice-studio-progress i {
  height: 100%;
  display: block;
  background: linear-gradient(90deg, #7892ff, #8f71e8);
  border-radius: inherit;
  transition: width .25s ease;
}

.voice-production-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding-top: 2px;
  color: var(--muted, #a5aab5);
  font-size: .68rem;
}

.voice-production-trust span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 1180px) {
  .voice-studio-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .voice-mode-production-page { width: min(100% - 18px, 1480px); padding-top: 9px; }
  .voice-production-suite { padding: 16px; border-radius: 21px; }
  .voice-production-header { align-items: flex-start; flex-direction: column; gap: 13px; }
  .voice-studio-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voice-studio-tools button { min-height: 112px; }
  .voice-studio-workbench { grid-template-columns: 1fr; padding: 15px; }
  .voice-studio-workbench > header { grid-template-columns: 40px minmax(0, 1fr); }
  .voice-studio-workbench > header > b { grid-column: 1 / -1; justify-self: start; }
  .voice-studio-result { grid-column: 1; }
  .voice-studio-form-grid { grid-template-columns: 1fr; }
}

/* GAN Lab ----------------------------------------------------------------- */
.gan-lab-page {
  --gan-ink: #f7f7fb;
  --gan-soft: #b8b8c8;
  --gan-line: rgb(255 255 255 / .11);
  --gan-panel: rgb(17 18 26 / .88);
  --gan-violet: #8b7cff;
  --gan-cyan: #5ce1e6;
  --gan-lime: #c9f26b;
  width: min(1480px, calc(100% - 32px));
  margin: 0 auto;
  padding: 14px 0 44px;
  color: var(--gan-ink);
}

.gan-lab-hero {
  position: relative;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  overflow: hidden;
  padding: 30px 34px;
  border: 1px solid rgb(160 145 255 / .22);
  border-radius: 26px;
  background:
    radial-gradient(circle at 82% 20%, rgb(92 225 230 / .18), transparent 30%),
    radial-gradient(circle at 32% 110%, rgb(139 124 255 / .26), transparent 38%),
    linear-gradient(135deg, #161624, #0d111b 66%, #101d20);
  box-shadow: 0 26px 80px rgb(3 4 12 / .32);
}

.gan-lab-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .25;
  background-image: linear-gradient(rgb(255 255 255 / .06) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .06) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(90deg, black, transparent 76%);
}

.gan-lab-hero > div { position: relative; z-index: 1; min-width: 0; display: flex; align-items: center; gap: 22px; }
.gan-lab-mark {
  flex: 0 0 auto;
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  color: #11131a;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--gan-lime), var(--gan-cyan));
  box-shadow: 0 16px 50px rgb(92 225 230 / .2);
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: -.04em;
  transform: rotate(-4deg);
}

.gan-lab-hero small,
.gan-compose-panel > header small,
.gan-history header small { color: #a9a3f8; font-size: .62rem; font-weight: 760; letter-spacing: .1em; text-transform: uppercase; }
.gan-lab-hero h2 { margin: 6px 0 5px; font-size: clamp(1.75rem, 3vw, 3.05rem); line-height: .98; letter-spacing: -.055em; }
.gan-lab-hero p { max-width: 660px; margin: 0; color: var(--gan-soft); font-size: .82rem; line-height: 1.55; }
.gan-lab-hero aside { position: relative; z-index: 1; flex: 0 0 235px; display: grid; gap: 5px; padding: 17px 18px; border: 1px solid var(--gan-line); border-radius: 17px; background: rgb(3 5 12 / .42); backdrop-filter: blur(16px); }
.gan-lab-hero aside > span { display: inline-flex; align-items: center; gap: 8px; color: var(--gan-soft); font-size: .63rem; }
.gan-lab-hero aside > span i { width: 8px; height: 8px; border-radius: 50%; background: #e3b95f; box-shadow: 0 0 0 5px rgb(227 185 95 / .1); }
.gan-lab-hero aside > span.is-ready i { background: var(--gan-lime); box-shadow: 0 0 0 5px rgb(201 242 107 / .1); }
.gan-lab-hero aside strong { overflow: hidden; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.gan-lab-hero aside small { color: #777b8e; letter-spacing: 0; text-transform: none; }

.gan-operation-rail { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin: 14px 0; padding: 8px; border: 1px solid var(--gan-line); border-radius: 18px; background: #11131c; }
.gan-operation-rail button { min-width: 0; min-height: 64px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 10px; color: #898b9c; border: 1px solid transparent; border-radius: 12px; background: transparent; font: inherit; cursor: pointer; transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease; }
.gan-operation-rail button:hover { color: #e7e7f1; background: rgb(255 255 255 / .04); }
.gan-operation-rail button:disabled { cursor: wait; opacity: .62; }
.gan-operation-rail button.is-active { color: #11131a; border-color: rgb(201 242 107 / .34); background: linear-gradient(135deg, var(--gan-lime), #92e7c9); box-shadow: 0 10px 24px rgb(92 225 230 / .11); transform: translateY(-1px); }
.gan-operation-rail span { display: grid; place-items: center; }
.gan-operation-rail svg { width: 17px; height: 17px; }
.gan-operation-rail strong { overflow: hidden; font-size: .68rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }

.gan-lab-workspace { min-width: 0; display: grid; grid-template-columns: minmax(430px, .9fr) minmax(440px, 1.1fr); gap: 14px; }
.gan-compose-panel,
.gan-result-panel,
.gan-history { min-width: 0; border: 1px solid var(--gan-line); border-radius: 22px; background: linear-gradient(145deg, rgb(24 25 35 / .96), rgb(12 14 21 / .98)); box-shadow: 0 20px 60px rgb(0 0 0 / .16); }
.gan-compose-panel { padding: 22px; }
.gan-compose-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--gan-line); }
.gan-compose-panel > header h3 { max-width: 560px; margin: 5px 0 0; color: var(--gan-ink); font-size: 1.08rem; line-height: 1.35; }
.gan-compose-panel > header > span { max-width: 200px; padding: 7px 9px; color: #8fe2e5; border: 1px solid rgb(92 225 230 / .18); border-radius: 9px; background: rgb(92 225 230 / .06); font-size: .58rem; line-height: 1.35; text-align: right; }

.gan-source-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 16px 0; }
.gan-source-grid.has-aux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gan-source-slot { min-width: 0; overflow: hidden; border: 1px dashed rgb(255 255 255 / .16); border-radius: 16px; background: rgb(255 255 255 / .025); }
.gan-source-slot.is-ready { border-style: solid; border-color: rgb(92 225 230 / .28); }
.gan-source-slot > header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 0; color: #d7d7e1; font-size: .63rem; font-weight: 720; }
.gan-source-slot > header em { color: #747788; font-size: .54rem; font-style: normal; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.gan-source-slot > button { width: 100%; display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 12px 12px; color: inherit; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.gan-source-slot > button:disabled { cursor: wait; opacity: .68; }
.gan-source-slot > button > :is(img, video, .gan-empty-art) { width: 82px; height: 68px; display: grid; place-items: center; object-fit: cover; border-radius: 11px; background: linear-gradient(135deg, rgb(139 124 255 / .16), rgb(92 225 230 / .08)); }
.gan-empty-art { color: #9e97f2; }
.gan-empty-art svg { width: 24px; height: 24px; }
.gan-source-slot > button > span:last-child { min-width: 0; display: grid; gap: 4px; }
.gan-source-slot > button strong { overflow: hidden; color: var(--gan-ink); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.gan-source-slot > button small { color: #777b8e; font-size: .58rem; }

.gan-control-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 12px 0 16px; padding: 15px; border: 1px solid var(--gan-line); border-radius: 15px; background: rgb(255 255 255 / .025); }
.gan-control-group > label { min-width: 0; display: grid; gap: 7px; }
.gan-control-group label > span { display: flex; justify-content: space-between; gap: 8px; color: #d7d7e1; font-size: .62rem; font-weight: 690; }
.gan-control-group output { color: var(--gan-cyan); }
.gan-control-group :is(select, input[type="range"]) { width: 100%; }
.gan-control-group select { min-height: 38px; padding: 7px 10px; color: #ececf4; border: 1px solid var(--gan-line); border-radius: 10px; background: #10121a; font: inherit; font-size: .65rem; }
.gan-control-group input[type="range"] { accent-color: var(--gan-lime); }
.gan-control-group > p { grid-column: 1 / -1; margin: 0; color: #777b8e; font-size: .6rem; line-height: 1.5; }
.gan-control-group .gan-check { grid-template-columns: auto 1fr; align-items: center; justify-content: start; }
.gan-control-group .gan-consent { grid-column: 1 / -1; padding-top: 10px; border-top: 1px solid var(--gan-line); }
.gan-control-group .gan-consent > span { justify-content: flex-start; line-height: 1.45; }
.gan-lab-page:has(.gan-upload-progress) .gan-control-group { pointer-events: none; opacity: .66; }
.gan-check input { width: 16px; height: 16px; accent-color: var(--gan-lime); }
.gan-guidance { grid-column: 1 / -1; display: flex; gap: 10px; color: #dadbe5; }
.gan-guidance > svg { flex: 0 0 auto; width: 18px; color: var(--gan-cyan); }
.gan-guidance > span { display: grid; gap: 3px; }
.gan-guidance small { color: #838697; font-size: .59rem; line-height: 1.4; }

#ganLabForm { display: grid; grid-template-columns: 1fr minmax(190px, .72fr); gap: 10px; align-items: end; }
#ganLabForm > label { display: grid; gap: 7px; }
#ganLabForm > label > span { color: #858899; font-size: .59rem; font-weight: 700; }
#ganLabForm input { min-height: 48px; padding: 10px 13px; color: #f5f5fa; border: 1px solid var(--gan-line); border-radius: 12px; background: #0e1018; font: inherit; font-size: .7rem; }
.gan-run-button { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 13px; color: #12141a; border: 0; border-radius: 12px; background: linear-gradient(135deg, var(--gan-lime), #7de0cb); font: inherit; text-align: left; cursor: pointer; box-shadow: 0 12px 28px rgb(118 229 196 / .13); }
.gan-run-button:hover:not(:disabled) { filter: brightness(1.05); transform: translateY(-1px); }
.gan-run-button:disabled { color: #737584; background: #242631; box-shadow: none; cursor: not-allowed; }
.gan-run-button > svg { width: 18px; height: 18px; }
.gan-run-button > span { display: grid; gap: 2px; }
.gan-run-button strong { font-size: .67rem; }
.gan-run-button small { opacity: .72; font-size: .53rem; }
.gan-upload-progress { display: grid; gap: 7px; margin: 12px 0; }
.gan-upload-progress > div { height: 4px; overflow: hidden; border-radius: 99px; background: rgb(255 255 255 / .08); }
.gan-upload-progress > div span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gan-violet), var(--gan-cyan)); transition: width .2s ease; }
.gan-upload-progress strong { color: #999cad; font-size: .59rem; }

.gan-result-panel { min-height: 560px; padding: 12px; }
.gan-result-empty { min-height: 534px; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 40px; text-align: center; border: 1px dashed rgb(255 255 255 / .1); border-radius: 15px; background: radial-gradient(circle, rgb(139 124 255 / .09), transparent 48%); }
.gan-result-empty > span { width: 66px; height: 66px; display: grid; place-items: center; color: #b5acf8; border: 1px solid rgb(139 124 255 / .22); border-radius: 22px; background: rgb(139 124 255 / .08); }
.gan-result-empty svg { width: 25px; }
.gan-result-empty strong { margin-top: 7px; font-size: .85rem; }
.gan-result-empty p { max-width: 330px; margin: 0; color: #7c7f90; font-size: .65rem; line-height: 1.55; }
.gan-result-card { display: grid; gap: 12px; }
.gan-result-card > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 8px 0; }
.gan-result-card > header small { color: #888b9b; font-size: .55rem; text-transform: uppercase; letter-spacing: .08em; }
.gan-result-card > header h3 { margin: 3px 0 0; font-size: .9rem; }
.gan-result-card > header > span { padding: 6px 8px; color: #11131a; border-radius: 7px; background: var(--gan-lime); font-size: .53rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.gan-output-stage { position: relative; min-height: 380px; overflow: hidden; display: grid; place-items: center; border: 1px solid var(--gan-line); border-radius: 15px; background: #07080d; }
.gan-output-stage :is(img, video) { width: 100%; max-height: 510px; display: block; object-fit: contain; }
.gan-output-stage > a { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 9px 11px; color: #11131a; border-radius: 9px; background: rgb(247 247 251 / .92); backdrop-filter: blur(12px); font-size: .61rem; font-weight: 760; text-decoration: none; }
.gan-output-stage > a svg { width: 14px; }
.gan-proof-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.gan-proof-grid article { min-width: 0; display: grid; gap: 3px; padding: 10px; border: 1px solid var(--gan-line); border-radius: 11px; background: rgb(255 255 255 / .025); }
.gan-proof-grid span { color: #747788; font-size: .51rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.gan-proof-grid strong { overflow: hidden; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.gan-proof-grid small { overflow: hidden; color: #878a9b; font-size: .53rem; text-overflow: ellipsis; white-space: nowrap; }

.gan-progress { display: grid; gap: 13px; padding: 28px 20px; }
.gan-progress > div { height: 7px; overflow: hidden; border-radius: 99px; background: rgb(255 255 255 / .08); }
.gan-progress > div span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gan-violet), var(--gan-cyan), var(--gan-lime)); transition: width .4s ease; }
.gan-progress > strong { font-size: .78rem; }
.gan-progress ol { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.gan-progress li { display: flex; align-items: center; gap: 9px; color: #686b7b; font-size: .64rem; }
.gan-progress li svg { width: 14px; height: 14px; }
.gan-progress li.is-complete { color: #9ba0ad; }
.gan-progress li.is-complete svg { color: var(--gan-lime); }
.gan-progress li.is-running { color: #eef0f6; }
.gan-progress li.is-running svg { color: var(--gan-cyan); animation: trajectory-pulse 1s ease-in-out infinite; }
.gan-progress button { justify-self: start; padding: 7px 10px; color: #b3b5c2; border: 1px solid var(--gan-line); border-radius: 9px; background: transparent; font: inherit; font-size: .59rem; cursor: pointer; }
.gan-result-error { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0; padding: 12px; color: #ffd2d7; border: 1px solid rgb(240 93 112 / .24); border-radius: 12px; background: rgb(240 93 112 / .07); font-size: .64rem; line-height: 1.45; }
.gan-result-error > svg { flex: 0 0 auto; width: 16px; color: #ff8292; }
.gan-result-error > span { display: grid; gap: 3px; }
.gan-result-error small { color: #c699a0; }

.gan-history { margin-top: 14px; padding: 17px; }
.gan-history > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.gan-history > header > div { display: grid; gap: 4px; }
.gan-history > header strong { font-size: .76rem; }
.gan-history > header button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; color: #aeb0bd; border: 1px solid var(--gan-line); border-radius: 9px; background: transparent; font: inherit; font-size: .58rem; cursor: pointer; }
.gan-history > header button svg { width: 13px; }
.gan-history > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.gan-history > div > button { min-width: 0; display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; column-gap: 9px; row-gap: 3px; padding: 11px; color: inherit; border: 1px solid var(--gan-line); border-radius: 11px; background: rgb(255 255 255 / .022); font: inherit; text-align: left; cursor: pointer; }
.gan-history > div > button:hover { border-color: rgb(139 124 255 / .38); background: rgb(139 124 255 / .05); }
.gan-history > div > button > span { width: 7px; height: 7px; grid-row: span 2; border-radius: 50%; background: #e3b95f; }
.gan-history > div > button > span.status-completed { background: var(--gan-lime); }
.gan-history > div > button > span.status-failed { background: #ff7183; }
.gan-history > div > button strong,
.gan-history > div > button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gan-history > div > button strong { font-size: .63rem; }
.gan-history > div > button small { grid-column: 2; color: #747788; font-size: .52rem; }
.gan-history > div > button > svg { width: 11px; grid-row: span 2; color: #696c7c; }
.gan-history > div > p { grid-column: 1 / -1; margin: 0; padding: 24px; color: #777a8b; border: 1px dashed var(--gan-line); border-radius: 11px; font-size: .64rem; text-align: center; }

html[data-color-mode="light"] .gan-lab-page { --gan-ink: #f7f7fb; --gan-soft: #c6c6d3; }

@media (max-width: 1120px) {
  .gan-operation-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gan-lab-workspace { grid-template-columns: 1fr; }
  .gan-result-panel { min-height: 0; }
  .gan-history > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .gan-lab-page { width: min(100% - 20px, 1480px); padding-top: 8px; }
  .gan-lab-hero { min-height: 0; align-items: flex-start; flex-direction: column; padding: 22px; }
  .gan-lab-hero > div { align-items: flex-start; flex-direction: column; }
  .gan-lab-hero aside { width: 100%; flex-basis: auto; }
  .gan-operation-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gan-source-grid.has-aux,
  .gan-control-group,
  #ganLabForm { grid-template-columns: 1fr; }
  .gan-compose-panel > header { flex-direction: column; }
  .gan-compose-panel > header > span { max-width: none; text-align: left; }
  .gan-output-stage { min-height: 260px; }
  .gan-proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gan-history > div { grid-template-columns: 1fr; }
}

/* Native Computer Use — one selected window, one reviewed action at a time. */
.native-computer-preview { grid-template-rows: 52px 42px minmax(0, 1fr); }
.native-computer-body {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
  overflow: auto;
  background:
    radial-gradient(circle at 85% 0%, color-mix(in srgb, #55d6be 9%, transparent), transparent 28%),
    color-mix(in srgb, var(--surface, #111317) 97%, #071612);
}
.native-computer-trustbar,
.computer-native-access-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid color-mix(in srgb, #55d6be 34%, var(--line, #34373d));
  border-radius: 14px;
  background: color-mix(in srgb, #55d6be 7%, var(--surface-2, #1b1c1f));
}
.native-computer-trustbar > svg,
.computer-native-access-card > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #55d6be;
  border-radius: 10px;
  background: color-mix(in srgb, #55d6be 13%, transparent);
}
.native-computer-trustbar > svg { padding: 8px; }
.computer-native-access-card > span svg { width: 18px; height: 18px; }
.native-computer-trustbar span,
.computer-native-access-card > div { min-width: 0; display: grid; gap: 3px; }
.native-computer-trustbar small,
.computer-native-access-card p { color: var(--muted, #969da8); line-height: 1.45; }
.native-computer-trustbar em { color: #55d6be; font-size: .68rem; font-style: normal; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.native-computer-start {
  min-height: 340px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 10px;
  padding: 28px;
  color: var(--text, #f5f7fa);
  text-align: center;
  border: 1px dashed color-mix(in srgb, #55d6be 24%, var(--line, #34373d));
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-2, #1b1c1f) 82%, transparent);
}
.native-computer-start > span { width: 54px; height: 54px; display: grid; place-items: center; color: #071612; border-radius: 17px; background: #9cf0db; box-shadow: 0 14px 40px rgb(85 214 190 / .2); }
.native-computer-start > span svg { width: 24px; height: 24px; }
.native-computer-start h3,
.native-computer-start p { margin: 0; }
.native-computer-start p,
.native-computer-start small { max-width: 500px; color: var(--muted, #969da8); }
.native-computer-toolbar { display: flex; align-items: end; gap: 8px; }
.native-computer-toolbar label { min-width: 180px; display: grid; flex: 1; gap: 5px; color: var(--muted, #969da8); font-size: .68rem; }
.native-computer-toolbar select,
.native-computer-task :is(select, textarea),
.native-computer-quick input {
  width: 100%;
  color: var(--text, #f5f7fa);
  border: 1px solid var(--line, #34373d);
  border-radius: 9px;
  outline: none;
  background: var(--surface-2, #1b1c1f);
}
.native-computer-toolbar select { min-height: 36px; padding: 0 30px 0 10px; }
.native-computer-stage {
  position: relative;
  min-height: 280px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line, #34373d);
  border-radius: 14px;
  background: #080a0d;
}
.native-computer-stage img { width: 100%; height: 100%; max-height: 58vh; object-fit: contain; cursor: crosshair; }
.native-computer-stage > span { position: absolute; right: 9px; bottom: 9px; padding: 5px 8px; color: #cbd6d2; border-radius: 7px; background: rgb(4 8 9 / .78); font-size: .62rem; backdrop-filter: blur(8px); }
.native-computer-task { display: grid; grid-template-columns: minmax(0, 1fr) 150px auto; align-items: end; gap: 8px; }
.native-computer-task label,
.native-computer-quick label { min-width: 0; display: grid; gap: 5px; color: var(--muted, #969da8); font-size: .68rem; }
.native-computer-task textarea { min-height: 62px; resize: vertical; padding: 9px 10px; }
.native-computer-task select { min-height: 40px; padding: 0 28px 0 10px; }
.native-computer-task .native-cloud-consent { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 8px; color: var(--muted, #969da8); line-height: 1.4; }
.native-cloud-consent input { width: 14px; min-width: 14px; height: 14px; margin-top: 2px; accent-color: #55d6be; }
.native-computer-quick { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: end; gap: 7px; }
.native-computer-quick input { min-height: 36px; padding: 0 10px; }
.native-computer-run,
.native-computer-approvals { display: grid; gap: 9px; padding: 13px; border: 1px solid var(--line, #34373d); border-radius: 13px; background: var(--surface-2, #1b1c1f); }
.native-computer-run > header,
.native-computer-approvals > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.native-computer-run header span,
.native-computer-approvals header small,
.native-computer-run p { color: var(--muted, #969da8); font-size: .7rem; }
.native-computer-run p { margin: 0; line-height: 1.5; }
.native-computer-run > div { display: flex; flex-wrap: wrap; gap: 6px; }
.native-computer-run > div span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; color: var(--muted, #969da8); border-radius: 999px; background: color-mix(in srgb, var(--text, #fff) 5%, transparent); font-size: .63rem; }
.native-computer-run > div i { width: 5px; height: 5px; border-radius: 50%; background: #55d6be; }
.native-computer-approvals { border-color: color-mix(in srgb, #ffbd59 38%, var(--line, #34373d)); background: color-mix(in srgb, #ffbd59 6%, var(--surface-2, #1b1c1f)); }
.native-computer-approvals article { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; align-items: center; gap: 9px; padding-top: 9px; border-top: 1px solid color-mix(in srgb, #ffbd59 18%, var(--line, #34373d)); }
.native-computer-approvals article > span { width: 30px; height: 30px; display: grid; place-items: center; color: #ffbd59; border-radius: 9px; background: color-mix(in srgb, #ffbd59 10%, transparent); }
.native-computer-approvals article > span svg { width: 15px; height: 15px; }
.native-computer-approvals article > div { min-width: 0; display: grid; gap: 3px; }
.native-computer-approvals article small { color: var(--muted, #969da8); }
.native-computer-error { margin: 0; padding: 9px 11px; color: #ffb0ae; border: 1px solid rgb(255 112 107 / .24); border-radius: 9px; background: rgb(255 112 107 / .08); font-size: .72rem; }
.computer-native-access-card { margin-bottom: 0; }
.computer-native-access-card h3,
.computer-native-access-card p { margin: 0; }
.computer-native-access-card small { color: #55d6be; font-size: .66rem; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }

@media (max-width: 760px) {
  .native-computer-toolbar { align-items: stretch; flex-wrap: wrap; }
  .native-computer-toolbar label { flex-basis: 100%; }
  .native-computer-task { grid-template-columns: 1fr; }
  .native-computer-quick { grid-template-columns: 1fr 1fr; }
  .native-computer-quick label { grid-column: 1 / -1; }
  .native-computer-approvals article { grid-template-columns: 30px minmax(0, 1fr); }
  .native-computer-approvals article button { grid-column: auto; }
  .computer-native-access-card { grid-template-columns: auto minmax(0, 1fr); }
  .computer-native-access-card button { grid-column: 1 / -1; }
}

/* VideoSEEASK public product proof */
.sv-vsa-feature {
  position: relative;
  overflow: hidden;
  padding-block: clamp(90px, 11vw, 158px);
  color: #f8fbff;
  background:
    radial-gradient(circle at 15% 18%, rgb(76 202 255 / .16), transparent 34%),
    radial-gradient(circle at 86% 78%, rgb(144 116 255 / .15), transparent 37%),
    #07111b;
}
.sv-vsa-feature::before { content: ""; position: absolute; inset: 0; opacity: .28; background-image: linear-gradient(rgb(103 202 255 / .08) 1px, transparent 1px), linear-gradient(90deg, rgb(103 202 255 / .08) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; }
.sv-vsa-feature-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr); align-items: center; gap: clamp(44px, 7vw, 104px); }
.sv-vsa-feature-copy h2 { max-width: 720px; margin: 18px 0 0; color: #fff; font: 500 clamp(3.1rem, 6vw, 6.1rem)/.93 var(--sv2-serif); letter-spacing: -.064em; }
.sv-vsa-feature-copy h2 em { color: #8edcff; font-style: normal; }
.sv-vsa-feature-copy > p:not(.cine-kicker) { max-width: 590px; margin: 28px 0 0; color: #b6c7d8; font-size: clamp(.92rem, 1.25vw, 1.08rem); line-height: 1.72; }
.sv-vsa-signals { margin: 30px 0 34px; display: flex; flex-wrap: wrap; gap: 9px; }
.sv-vsa-signals span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; color: #d9efff; border: 1px solid rgb(126 211 255 / .22); border-radius: 999px; background: rgb(17 51 75 / .62); font-size: .69rem; font-weight: 720; }
.sv-vsa-signals svg { width: 14px; height: 14px; color: #7dd9ff; }
.sv-vsa-feature-shot { margin: 0; overflow: hidden; border: 1px solid rgb(135 209 255 / .3); border-radius: 28px; background: #0b1017; box-shadow: 0 44px 110px rgb(0 0 0 / .48), 0 0 70px rgb(74 183 255 / .11); transform: perspective(1400px) rotateY(-2deg); transform-origin: center right; }
.sv-vsa-feature-shot img { width: 100%; aspect-ratio: 16 / 10; display: block; object-fit: cover; object-position: top; }
.sv-vsa-feature-shot figcaption { display: grid; gap: 6px; padding: 18px 22px 20px; color: #9db1c4; border-top: 1px solid rgb(135 209 255 / .17); font-size: .72rem; line-height: 1.55; }
.sv-vsa-feature-shot figcaption strong { color: #fff; font-size: .76rem; }

@media (max-width: 980px) {
  .sv-vsa-feature-grid { grid-template-columns: 1fr; }
  .sv-vsa-feature-copy > p:not(.cine-kicker) { max-width: 760px; }
  .sv-vsa-feature-shot { transform: none; }
}

@media (max-width: 620px) {
  .sv-vsa-feature-copy h2 { font-size: clamp(2.75rem, 14vw, 4.2rem); }
  .sv-vsa-signals { gap: 7px; }
  .sv-vsa-signals span { padding: 8px 10px; }
  .sv-vsa-feature-shot { border-radius: 19px; }
}

/* Composer large-file intake — bounded, resumable, and batch-readable. */
.composer-upload-queue {
  --upload-accent: #74d7ff;
  width: 100%;
  overflow: hidden;
  color: var(--text, #f7f9fb);
  border: 1px solid color-mix(in srgb, var(--upload-accent) 30%, var(--line, #30343a));
  border-radius: 18px;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--upload-accent) 12%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface, #11151a) 94%, #000);
  box-shadow: 0 16px 42px rgb(0 0 0 / .18);
}
.composer-upload-queue.state-complete { --upload-accent: #82e6ad; }
.composer-upload-queue.state-partial,
.composer-upload-queue.state-failed { --upload-accent: #ffb86b; }
.composer-upload-queue.state-paused { --upload-accent: #b7a7ff; }
.composer-upload-queue > header {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 12px 13px 9px;
}
.composer-upload-queue-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: #051018;
  border-radius: 11px;
  background: var(--upload-accent);
}
.composer-upload-queue-icon svg { width: 17px; height: 17px; }
.composer-upload-queue > header > div:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
.composer-upload-queue > header strong { overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.composer-upload-queue > header small { color: var(--muted, #98a0aa); font-size: .65rem; }
.composer-upload-queue-actions { display: flex; align-items: center; gap: 6px; }
.composer-upload-queue-actions button {
  min-height: 29px;
  padding: 0 10px;
  color: var(--text, #f7f9fb);
  border: 1px solid color-mix(in srgb, var(--upload-accent) 25%, var(--line, #353a42));
  border-radius: 9px;
  background: color-mix(in srgb, var(--upload-accent) 9%, transparent);
  font: inherit;
  font-size: .64rem;
  font-weight: 720;
  cursor: pointer;
}
.composer-upload-queue-actions button:last-child { width: 29px; padding: 0; display: grid; place-items: center; }
.composer-upload-queue-actions svg { width: 13px; height: 13px; }
.composer-upload-overall { display: grid; grid-template-columns: minmax(0, 1fr) 38px; align-items: center; gap: 10px; padding: 0 13px 10px; }
.composer-upload-overall > span,
.composer-upload-list article em { display: block; overflow: hidden; height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--text, #fff) 10%, transparent); }
.composer-upload-overall i,
.composer-upload-list article em i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--upload-accent), color-mix(in srgb, var(--upload-accent) 60%, #fff)); transition: width .22s ease; }
.composer-upload-overall b { color: var(--upload-accent); font-size: .65rem; text-align: right; }
.composer-upload-list { max-height: 212px; overflow: auto; border-block: 1px solid color-mix(in srgb, var(--line, #333) 82%, transparent); scrollbar-width: thin; }
.composer-upload-list article {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 7px 13px;
  border-bottom: 1px solid color-mix(in srgb, var(--line, #333) 60%, transparent);
}
.composer-upload-list article:last-of-type { border-bottom: 0; }
.composer-upload-list article > span { display: grid; place-items: center; width: 25px; height: 25px; color: var(--upload-accent); border-radius: 8px; background: color-mix(in srgb, var(--upload-accent) 10%, transparent); }
.composer-upload-list article > span svg { width: 13px; height: 13px; }
.composer-upload-list article > div { display: grid; min-width: 0; gap: 3px; }
.composer-upload-list article strong,
.composer-upload-list article small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer-upload-list article strong { font-size: .68rem; }
.composer-upload-list article small { color: var(--muted, #98a0aa); font-size: .58rem; }
.composer-upload-list article > b { color: var(--muted, #98a0aa); font-size: .58rem; font-weight: 700; }
.composer-upload-list article.state-complete > b { color: #82e6ad; }
.composer-upload-list article.state-error > b { color: #ff8a91; }
.composer-upload-list article.state-paused > b { color: #b7a7ff; }
.composer-upload-more { margin: 0; padding: 10px 13px; color: var(--muted, #98a0aa); font-size: .62rem; text-align: center; }
.composer-upload-queue > footer { display: flex; align-items: center; gap: 7px; padding: 9px 13px 10px; color: var(--muted, #98a0aa); font-size: .58rem; }
.composer-upload-queue > footer svg { width: 12px; height: 12px; color: var(--upload-accent); }

@media (max-width: 620px) {
  .composer-upload-queue > header { grid-template-columns: 34px minmax(0, 1fr); }
  .composer-upload-queue-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .composer-upload-list { max-height: 174px; }
  .composer-upload-list article { grid-template-columns: 25px minmax(0, 1fr); }
.composer-upload-list article > b { grid-column: 2; }
}

/* Final native-tool specificity pass. */
.browser-agent-run-rail > header > div {
  display: flex !important;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
}
.browser-agent-run-rail > header > div > small,
.browser-agent-run-rail > header > div > strong {
  position: static !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

/* Task-first agent shell ---------------------------------------------------
   One prompt defines the goal. Tools stay behind one launcher and execution
   surfaces share a single workspace switcher. */
.task-composer .composer-agent-runtime {
  z-index: 18;
  margin: 0;
  border: 0;
}

.task-composer .composer-runtime-summary {
  width: auto;
  min-height: 34px;
  grid-template-columns: 7px auto 12px;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
}

.task-composer .composer-runtime-summary:hover {
  border-color: var(--line);
  background: var(--surface-3);
}

.task-composer .composer-runtime-panel {
  right: auto;
  bottom: 42px;
  left: 0;
  width: min(390px, calc(100vw - 32px));
  border-radius: 14px;
}

.task-composer .composer-runtime-grid {
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 8px;
}

.task-composer .composer-runtime-grid button {
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 2px 9px;
  padding: 10px;
  color: var(--text-soft);
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.task-composer .composer-runtime-grid button:hover,
.task-composer .composer-runtime-grid button.selected {
  color: var(--text);
  border-color: var(--line-soft);
  background: var(--surface-2);
}

.task-composer .composer-runtime-grid button > span {
  grid-row: 1 / 3;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: #79d8b3;
  border-radius: 8px;
  background: color-mix(in srgb, #54c79d 10%, transparent);
}

.task-composer .composer-runtime-grid button svg { width: 14px; }
.task-composer .composer-runtime-grid button b { font-size: .69rem; }
.task-composer .composer-runtime-grid button small { color: var(--muted); font-size: .58rem; line-height: 1.4; }
.task-composer .composer-runtime-footer { justify-content: flex-start; padding: 9px 12px 11px; }
.task-composer .composer-runtime-footer > span { white-space: normal; line-height: 1.4; }

.unified-tool-menu { width: min(330px, calc(100vw - 30px)); }
.unified-tool-menu > header { display: grid; gap: 3px; padding: 10px 11px; border-bottom: 1px solid var(--line-soft); }
.unified-tool-menu > header strong { font-size: .7rem; }
.unified-tool-menu > header small { color: var(--muted); font-size: .57rem; line-height: 1.4; }

.computer-surface-bar {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 10px;
  color: #929aa4;
  border-bottom: 1px solid #292d32;
  background: #17191d;
}

.computer-surface-bar label,
.computer-surface-bar > span { display: flex; align-items: center; gap: 7px; }
.computer-surface-bar label > svg,
.computer-surface-bar > span > svg { width: 13px; height: 13px; }
.computer-surface-bar label > span { color: #737b86; font-size: 10px; }
.computer-surface-bar select {
  min-height: 29px;
  padding: 0 28px 0 9px;
  color: #eef1f4;
  border: 1px solid #343941;
  border-radius: 7px;
  background: #22252a;
  font: 600 11px/1 system-ui, sans-serif;
}
.computer-surface-bar > span { font-size: 10px; }

.computer-terminal-preview { grid-template-rows: 52px 42px minmax(0, 1fr) auto; }
.computer-terminal-panel { grid-template-rows: 38px minmax(0, 1fr) 24px; }
.computer-terminal-panel .native-terminal-screen {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}
.computer-terminal-panel .native-terminal-screen pre { min-height: 0; padding-bottom: 12px; }
.computer-terminal-panel .native-terminal-input {
  min-height: 38px;
  grid-template-columns: auto minmax(90px, 1fr);
  gap: 7px;
  padding: 2px 12px 6px;
  border-top: 0;
}
.computer-terminal-panel .native-terminal-input .terminal-prompt {
  color: #e8e8e8;
  font: 13px/1.3 Consolas, "Cascadia Mono", monospace;
  white-space: nowrap;
}
.computer-terminal-panel .native-terminal-input input { height: 30px; padding: 0; }
.computer-terminal-preview .self-capture-evidence {
  margin: 0;
  border-width: 1px 0 0;
  border-radius: 0;
  background: #15171a;
}
.computer-terminal-preview .self-capture-evidence > summary { min-height: 31px; padding: 4px 10px; }
.computer-terminal-preview .self-capture-evidence > summary > svg:first-child { width: 14px; }
.computer-terminal-preview .self-capture-evidence > summary small { display: none; }
.computer-terminal-preview .self-capture-evidence > p { padding-bottom: 8px; }
.terminal-statusbar { background: #20242a; color: #aeb6bf; }
.terminal-statusbar button { color: #aeb6bf; }

.native-computer-preview { grid-template-rows: 52px 42px minmax(0, 1fr); }
.native-computer-body { gap: 8px; padding: 10px; }
.native-computer-trustbar { min-height: 48px; padding: 8px 10px; border-radius: 10px; }
.native-computer-trustbar > svg { width: 28px; height: 28px; padding: 7px; }
.native-computer-trustbar small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.native-computer-start { min-height: 260px; border-radius: 12px; }
.native-computer-sessionbar { align-items: center; }
.native-computer-sessionbar label { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; }
.native-computer-sessionbar label > span { font-size: 10px; }
.native-computer-task { min-height: 54px; padding: 7px 8px; border-radius: 11px; }
.native-computer-task label > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.native-computer-task textarea { min-height: 38px; max-height: 76px; padding: 9px 10px; resize: none; }
.native-computer-task .native-computer-model { grid-column: 2 / -1; }
.native-computer-workspace { min-height: 350px; grid-template-columns: minmax(0, 1fr) 220px; border-radius: 11px; }
.native-computer-workspace .native-computer-stage { min-height: 350px; }
.native-computer-run { border: 0; border-radius: 0; background: #111419; }
.native-computer-run > header { padding-bottom: 9px; border-bottom: 1px solid #252a31; }
.native-computer-run > p { color: #8f98a4; }
.native-computer-preview .self-capture-evidence { margin: 0; }

@media (max-width: 720px) {
  .computer-surface-bar > span { display: none; }
  .native-computer-trustbar small { white-space: normal; }
  .task-composer .composer-runtime-panel { right: auto; left: 0; }
}