/* Theme tokens also follow the system when JavaScript is unavailable. */
:root {
  color-scheme: light dark;
  --paper: light-dark(#f8faf8, #0c1422);
  --ink: light-dark(#10272d, #e9effb);
  --muted: light-dark(#56686c, #a5b3c8);
  --blue: light-dark(#315df3, #93b0ff);
  --line: light-dark(#dce3e0, #26354b);
  --white: light-dark(#ffffff, #142137);
  --pale: light-dark(#e9f0ff, #1a2b48);
  accent-color: var(--blue);
}
:root[data-theme="light"] {
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
}
[hidden] {
  display: none !important;
}
::selection {
  background: light-dark(#cddaff, #35549a);
  color: var(--ink);
}
.skip-link {
  background: #10272d;
  color: #fff;
}
.noscript-pricing {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  margin: 26px 0;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-left: auto;
}
.site-header .main-nav {
  margin-left: 80px;
  margin-right: auto;
}
@media (min-width: 761px) {
  .site-header .main-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
  }
}
.theme-toggle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  flex: none;
}
.theme-toggle:hover {
  background: var(--pale);
  border-color: var(--blue);
}
.theme-toggle .icon {
  width: 18px;
  height: 18px;
}
.theme-toggle .sun-icon {
  display: none;
}
.theme-toggle[aria-pressed="true"] .sun-icon {
  display: block;
}
.theme-toggle[aria-pressed="true"] .moon-icon {
  display: none;
}
.simple-header .theme-toggle {
  margin-left: 25px;
}
.launch-pill {
  border-color: light-dark(#bfcac7, #3a4a62);
}
.hero .eyebrow {
  color: light-dark(#6b778a, #9eafc8);
}
.hero-description {
  font-weight: 500;
}
.hero .extension-label {
  display: inline-block;
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--pale);
  color: var(--blue);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.7px;
}
.hero-description strong {
  color: var(--ink);
  font-weight: 800;
}
.primary,
.sample-download,
.launch-panel {
  background: #315df3;
  color: #fff;
}
.primary:hover,
.sample-download:hover {
  background: #244be0;
}
.secondary:hover {
  background: light-dark(#edf1ee, #20314a);
}
.light {
  background: #f8faf8;
  color: #10272d;
}
.light:hover {
  background: #fff;
}
.demo-area {
  position: relative;
  isolation: isolate;
  perspective: 1400px;
}
.demo-stage {
  position: relative;
  background: light-dark(#e8effb, #101e35);
  border-color: light-dark(#e0e8f6, #416dac);
  box-shadow:
    0 0 55px light-dark(#0000, #235de530),
    inset 0 0 16px light-dark(#0000, #3263d41a);
}
.browser-preview {
  background: var(--white);
  border-color: light-dark(#c9d5df, #344863);
  box-shadow: 0 16px 35px light-dark(#213c6317, #00000050);
  transform: rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
  transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.browser-bar {
  background: light-dark(#f7f9fc, #152238);
  border-color: var(--line);
  color: light-dark(#8b979f, #8fa1b9);
}
.address {
  background: light-dark(#fff, #0e192b);
  border-color: var(--line);
  color: light-dark(#697d8b, #a3b3cc);
}
.chat-sidebar {
  background: light-dark(#fff, #121e31);
  border-color: var(--line);
}
.chat-search {
  color: light-dark(#71818a, #94a6bf);
}
.chat-search > span {
  background: light-dark(#f1f4f6, #1a2b43);
  color: light-dark(#8a959c, #9aacc4);
}
.chat-row.selected {
  background: light-dark(#edf2ff, #243c64);
}
.chat-row p {
  color: light-dark(#76858c, #9fafc5);
}
.chat-row small {
  color: light-dark(#849398, #91a5c2);
}
.avatar-peach {
  background: light-dark(#f4dbd1, #634b47);
  color: light-dark(#8a513c, #f2c5b5);
}
.avatar-green {
  background: light-dark(#dfebe2, #334e4b);
  color: light-dark(#466554, #badcd1);
}
.avatar-purple {
  background: light-dark(#e9e0f0, #453c61);
  color: light-dark(#765b84, #d2c1eb);
}
.avatar-yellow {
  background: light-dark(#f1e6c7, #5a503c);
  color: light-dark(#79642f, #e3d1a2);
}
.avatar-grey {
  background: light-dark(#e7edef, #2a3b51);
  color: light-dark(#7b8d95, #a4b6ce);
}
.conversation {
  background: light-dark(#e8f0f7, #0e192b);
}
.conversation-header {
  background: light-dark(#fff, #17243a);
}
.conversation-header span {
  color: light-dark(#81909a, #9babc2);
}
.message-card {
  background: light-dark(#fff, #1a2a41);
}
.message-caption > span,
.sample-file span {
  color: light-dark(#7a8b94, #9eb0c9);
}
.sample-file {
  border-color: light-dark(#edf0f1, #2e405a);
}
.sample-file > .icon {
  color: light-dark(#7892a3, #a0b9dc);
}
.chat-date {
  background: light-dark(#d3dee8, #223752);
  color: light-dark(#516b7a, #afc2dc);
}
.chat-composer {
  background: light-dark(#fff, #1a2a41);
  color: light-dark(#8b9ba8, #9baec8);
}
.feature-icon {
  background: var(--pale);
  border-color: light-dark(#d9e2fc, #2d456c);
}
.feature-label,
.footer-fine {
  color: light-dark(#637976, #9dafc4);
}
.how-section {
  background: light-dark(#edf2ee, #101c2b);
  border-color: var(--line);
}
.step-number {
  border-color: var(--line);
}
.billing-control {
  background: light-dark(#edf1ed, #152238);
}
.billing-control button[aria-pressed="true"] {
  background: light-dark(#fff, #293d5f);
}
.plan {
  background: light-dark(#fff, #142137);
}
.plan.premium {
  background: light-dark(#f4f6ff, #192946);
  border-color: light-dark(#91a8fc, #5077c9);
}
.plan-badge {
  background: light-dark(#e5ebff, #2c416d);
  color: light-dark(#3154bd, #c0cfff);
}
.dialog-close:hover {
  background: var(--pale);
}
.notice {
  background: light-dark(#edf2ff, #192c4a);
  border-color: light-dark(#d4dffb, #354d75);
}

/* Decorative orbits and floating labels keep the actual preview usable. */
.demo-orbits {
  position: absolute;
  inset: -22px -8px 10px;
  z-index: -1;
  pointer-events: none;
  overflow: clip;
}
.demo-orbits::before,
.demo-orbits::after {
  content: "";
  position: absolute;
  width: 97%;
  height: 74%;
  left: 2%;
  top: 12%;
  border: 1px solid light-dark(#7c9ff64d, #517de769);
  border-radius: 50%;
  transform: rotate(-18deg);
}
.demo-orbits::after {
  transform: rotate(22deg);
  border-color: light-dark(#97b3ef44, #4263a34a);
  height: 85%;
  top: 6%;
}
.demo-glow {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    light-dark(#84aeff44, #2159dc45),
    transparent 70%
  );
  pointer-events: none;
}
.hero h1 > span:not(.headline-start) {
  background: linear-gradient(
    165deg,
    light-dark(#3968ff, #88adff) 5%,
    light-dark(#2349e5, #3b72ff) 94%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.demo-orbits > i {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: light-dark(#8ab5ff, #95c2ff);
  box-shadow: 0 0 12px #5797ff;
  top: 2%;
  left: 63%;
}
.demo-orbits > i:nth-child(2) {
  top: 45%;
  left: 0;
}
.demo-orbits > i:nth-child(3) {
  top: 85%;
  left: 96%;
}
.floating-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2;
  padding: 13px 17px;
  background: light-dark(#ffffffef, #192c48f5);
  color: var(--ink);
  border: 1px solid light-dark(#d5e1f8, #476694);
  border-radius: 11px;
  box-shadow: 0 12px 30px light-dark(#173d7417, #00000040);
  font-size: 11px;
  font-weight: 650;
  pointer-events: none;
}
.floating-chip .icon {
  color: var(--blue);
  width: 20px;
  height: 20px;
}
.chip-media {
  left: -16px;
  top: -13px;
}
.chip-save {
  right: 15px;
  bottom: 17px;
}
.chip-save.download-activated {
  border-color: light-dark(#58ae9a, #60cbb3);
}
.chip-save.download-activated .icon {
  color: light-dark(#208672, #7ee4c5);
}
.demo-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.demo-controls .demo-caption {
  margin-top: 17px;
}
.motion-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 8px;
  font-size: 9px;
  font-weight: 650;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: transparent;
  color: var(--muted);
  white-space: nowrap;
}
.motion-toggle:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.motion-toggle .icon {
  width: 10px;
  height: 10px;
}
.motion-toggle .play-icon,
.motion-toggle[aria-pressed="false"] .pause-icon {
  display: none;
}
.motion-toggle[aria-pressed="false"] .play-icon {
  display: block;
}
.sample-download::before {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px solid #77a0ffa6;
  border-radius: 50%;
  pointer-events: none;
}
.feature-icon,
.step-number {
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.feature:hover .feature-icon {
  transform: translateY(-4px) rotate(-5deg);
}
.steps li:hover .step-number {
  transform: translateX(4px);
}
@media (min-width: 1201px) {
  .hero h1 {
    font-size: clamp(70px, 5.73vw, 88px);
  }
  .sample-photo {
    aspect-ratio: 1.57;
  }
  .demo-controls .demo-caption {
    font-size: 11px;
  }
  .floating-chip {
    font-size: 12px;
    padding: 14px 18px;
  }
  .chip-media {
    left: -45px;
    top: -15px;
  }
  .chip-save {
    right: -14px;
    bottom: 8px;
  }
  .features h2 {
    word-spacing: 1px;
    letter-spacing: -1.2px;
  }
}
@media (max-width: 1200px) {
  .site-header .main-nav {
    margin-left: 35px;
  }
  .chip-media {
    left: -9px;
  }
  .floating-chip {
    font-size: 10px;
    padding: 10px 12px;
  }
  .chip-save {
    bottom: 11px;
    right: 9px;
  }
}
@media (max-width: 1000px) {
  .site-header .main-nav {
    margin-left: 22px;
    gap: 18px;
  }
  .site-header .main-nav a {
    font-size: 12px;
  }
  .header-actions {
    gap: 8px;
  }
  .demo-controls {
    gap: 4px;
    flex-wrap: wrap;
  }
  .demo-controls .demo-caption {
    width: 100%;
    min-height: 24px;
    margin-bottom: 0;
  }
  .motion-toggle {
    margin-bottom: 8px;
  }
}
@media (max-width: 760px) {
  .header-actions {
    margin-left: auto;
  }
  .site-header .main-nav {
    margin: 0;
  }
  .theme-toggle {
    width: 36px;
    height: 36px;
  }
  .menu-toggle {
    width: 36px;
    height: 36px;
  }
  .hero {
    gap: 45px;
  }
  .floating-chip {
    font-size: 10px;
  }
  .chip-media {
    left: 6px;
    top: -15px;
  }
  .chip-save {
    bottom: 14px;
    right: 5px;
  }
  .demo-stage {
    padding-top: 27px;
    padding-bottom: 27px;
  }
  .simple-header .theme-toggle {
    margin-left: 0;
  }
}
@media (max-width: 480px) {
  .site-header {
    gap: 8px;
  }
  .site-header .brand {
    font-size: 24px;
  }
  .header-actions {
    gap: 7px;
  }
  .launch-pill {
    padding: 8px 10px;
    font-size: 9px;
  }
  .launch-pill .status-dot {
    display: none;
  }
  .floating-chip {
    padding: 9px 11px;
    font-size: 9px;
  }
  .floating-chip .icon {
    width: 17px;
    height: 17px;
  }
  .chip-save {
    bottom: 15px;
  }
  .billing-control {
    width: 100%;
    justify-content: center;
  }
  .billing-control button {
    padding-inline: 9px;
    font-size: 11px;
  }
  .billing-control button span {
    font-size: 8px;
    margin-left: 3px;
  }
  .simple-header nav {
    gap: 13px;
  }
}
@media (max-width: 380px) {
  .launch-pill {
    display: none;
  }
  .hero h1 {
    font-size: 46px;
    letter-spacing: -2.9px;
  }
  .hero-actions {
    gap: 12px;
  }
  .hero-actions .text-link {
    font-size: 11px;
  }
  .plan {
    padding: 22px;
  }
  .plan-badge {
    padding-inline: 6px;
    font-size: 7px;
  }
  .plan-price > span {
    font-size: 43px;
  }
  .billing-control button {
    padding-inline: 7px;
    font-size: 10px;
  }
  .billing-control button span {
    font-size: 7px;
  }
}
@media (max-width: 760px) {
  .hero h1 .headline-start {
    font-size: 0.85em;
    white-space: nowrap;
    line-height: 1.2;
  }
}
@media (max-width: 760px) {
  :root:not([data-enhanced]) .site-header {
    flex-wrap: wrap;
  }
  :root:not([data-enhanced]) .main-nav {
    position: static;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    order: 5;
    width: 100%;
    box-shadow: none;
    border: 0;
    padding: 0;
    gap: 0;
  }
}

@keyframes hero-arrive {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes coastal-drift {
  0%,
  100% {
    transform: scale(1.015) translateY(0);
  }
  50% {
    transform: scale(1.055) translateY(-2px);
  }
}
@keyframes chip-float {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(7px) rotate(1deg);
  }
}
@keyframes orbit-breathe {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.97);
  }
  50% {
    opacity: 1;
    transform: scale(1.02);
  }
}
@keyframes download-beacon {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  20% {
    opacity: 0.8;
  }
  85%,
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}
@keyframes download-arrow {
  0%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(4px);
  }
  70% {
    transform: translateY(-2px);
  }
}
:root[data-motion="on"] {
  .hero-copy > .eyebrow {
    animation: hero-arrive 700ms 50ms both;
  }
  .hero h1 {
    animation: hero-arrive 850ms 130ms both;
  }
  .hero-description {
    animation: hero-arrive 850ms 230ms both;
  }
  .hero-actions,
  .hero-footnote {
    animation: hero-arrive 850ms 330ms both;
  }
  .demo-area {
    animation: hero-arrive 1000ms 200ms both;
  }
  .sample-photo > img {
    animation: coastal-drift 14s ease-in-out infinite;
  }
  .floating-chip {
    animation: chip-float 6s ease-in-out infinite;
  }
  .chip-save {
    animation-delay: -3s;
  }
  .demo-glow {
    animation: orbit-breathe 9s ease-in-out infinite;
  }
  .sample-download::before {
    animation: download-beacon 3.3s ease-out infinite;
  }
  .sample-download:hover .icon {
    animation: download-arrow 650ms ease-in-out;
  }
  .reveal-ready {
    opacity: 0;
    transform: translateY(22px);
    transition:
      opacity 650ms ease,
      transform 650ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .reveal-ready.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  .feature:nth-child(2),
  .steps li:nth-child(2) {
    transition-delay: 80ms;
  }
  .feature:nth-child(3),
  .steps li:nth-child(3) {
    transition-delay: 160ms;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 300ms;
  }
}
:root[data-motion="off"] {
  scroll-behavior: auto;
}
:root[data-motion="off"] .reveal-ready {
  opacity: 1;
  transform: none;
  transition: none;
}
:root[data-motion="off"] .browser-preview {
  transform: none;
  transition: none;
}
:root[data-motion="off"] .hero-copy > *,
:root[data-motion="off"] .demo-area {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="on"]) .reveal-ready {
    opacity: 1;
    transform: none;
  }
  :root:not([data-motion="on"]) .browser-preview {
    transform: none;
    transition: none;
  }
}
@media (forced-colors: active) {
  .hero h1 > span:not(.headline-start) {
    background: none;
    color: CanvasText;
  }
  .sample-download {
    forced-color-adjust: none;
  }
}