/* CoDirect web: styles
   Warm paper, red glass, and Iris. No frameworks, no web fonts: the system font is SF Pro on
   Apple devices. Sections: tokens, base, components, stage and Iris, then one block per section. */

/* MARK: Tokens */

:root {
  color-scheme: light;
  --paper: #f7f4f0;
  --paper-2: #efe9e3;
  --paper-3: #e8e0d9;
  --ink: #1b1718;
  --ink-2: #5a5351;
  --ink-3: #8f8784;
  --line: rgba(27, 23, 24, 0.09);

  --red: #e93035;
  --red-core: #ee3a3e;
  --red-deep: #b01c21;
  --red-light: #ff424c;
  --red-ink: #d42a33;
  --pink: #ff7a8f;
  --rim: #ffc4c4;

  --c-video: #f43f5e;
  --c-image: #8b5cf6;
  --c-graphics: #f59e0b;
  --c-audio: #06b6d4;
  --c-doc: #10b981;

  --dark: #0d0c0f;
  --dark-2: #17151a;
  --dark-ink: #f4f1f2;
  --dark-ink-2: #b4acb0;

  --glass-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.54));
  --glass-line: rgba(255, 255, 255, 0.9);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 2px rgba(40, 10, 15, 0.06),
    0 12px 32px -12px rgba(60, 15, 22, 0.2);
  --lift-shadow: 0 2px 4px rgba(40, 10, 15, 0.05), 0 22px 60px -22px rgba(70, 18, 26, 0.32);

  --r-xl: 36px;
  --r-l: 28px;
  --r-m: 20px;
  --r-s: 14px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif;
  --font-round: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-spring: cubic-bezier(0.3, 1.45, 0.45, 1);
  --gutter: clamp(16px, 4vw, 40px);
}

@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* MARK: Base */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: pan-y;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
}

@supports (overflow: clip) {
  html { overflow-x: hidden; }
  main, .footer { overflow-x: clip; }
}

img, svg { display: block; }
button { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

::selection { background: rgba(233, 48, 53, 0.22); }

:focus-visible {
  outline: 3px solid rgba(233, 48, 53, 0.55);
  outline-offset: 3px;
  border-radius: 10px;
}

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

.skip {
  position: fixed;
  left: 16px; top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  transition: top 0.2s;
}
.skip:focus { top: 16px; }

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.center { text-align: center; }
.nowrap { white-space: nowrap; }

.section {
  position: relative;
  padding: clamp(96px, 13vw, 168px) 0;
}

.section-head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head.center { margin-left: auto; margin-right: auto; }
.section-head.center .lede { margin-left: auto; margin-right: auto; }
.section-head.split {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.eyebrow {
  margin-bottom: 14px;
  color: var(--red-ink);
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: 0.005em;
}

h2 {
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 4.9vw, 4.3rem);
  font-weight: 760;
  line-height: 1.03;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

h3 {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.lede {
  margin-top: 22px;
  max-width: 36em;
  color: var(--ink-2);
  font-size: clamp(1.07rem, 1.32vw, 1.27rem);
  line-height: 1.5;
  text-wrap: pretty;
}

.fine { margin-top: 18px; color: var(--ink-3); font-size: 0.9rem; }

/* MARK: Components */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  font-weight: 620;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s var(--ease-spring), box-shadow 0.25s, background 0.25s, filter 0.25s;
}
.btn svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.btn:active { transform: scale(0.96); }
.btn-primary {
  color: #fff;
  background: linear-gradient(180deg, #f5494e 0%, #e0272e 55%, #cf1f26 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(120, 0, 10, 0.25),
    0 10px 24px -10px rgba(217, 38, 44, 0.75);
}
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.06) saturate(1.05); }
.btn-ghost {
  background: var(--glass-bg);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shadow);
}
.btn-ghost:hover { transform: translateY(-1px); }
.btn-sm { height: 36px; padding: 0 16px; font-size: 0.9rem; }
.btn-xl { height: 62px; padding: 0 32px; font-size: 1.12rem; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.chip {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 17px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  box-shadow: var(--glass-shadow);
  font-size: 0.95rem;
  font-weight: 540;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.28s var(--ease-spring), box-shadow 0.25s, background 0.25s, color 0.2s;
}
.chip:hover { transform: translateY(-2px); }
.chip:active { transform: scale(0.95); }
.chip.is-primary { color: #fff; background: linear-gradient(180deg, #f5494e, #d9262c); border-color: transparent; }

.link-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--red-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  cursor: pointer;
}
.link-btn:hover { text-decoration-style: solid; }

.send {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(180deg, #f5494e, #d9262c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 6px 14px -6px rgba(217, 38, 44, 0.8);
  cursor: pointer;
  transition: transform 0.25s var(--ease-spring);
}
.send svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.send:hover { transform: scale(1.06); }
.send:active { transform: scale(0.92); }

.ask-plus svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* Gooey thinking dots (the native app's IrisThinkingDots). */
.goo-dots {
  display: inline-flex;
  gap: 5px;
  padding: 6px 4px;
  filter: url(#goo);
}
.goo-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--red);
  animation: goo 1.05s ease-in-out infinite;
}
.goo-dots i:nth-child(2) { animation-delay: 0.14s; }
.goo-dots i:nth-child(3) { animation-delay: 0.28s; }
@keyframes goo {
  0%, 100% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-6px) scale(1.18); }
  60% { transform: translateY(1px) scale(0.92); }
}

/* MARK: Nav */

.nav {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top, 0px)); left: 0; right: 0;
  z-index: 60;
  padding: 0 12px;
  pointer-events: none;
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 1120px;
  height: 58px;
  margin: 0 auto;
  padding: 0 10px 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.5));
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow: var(--glass-shadow);
  pointer-events: auto;
  transition: background 0.4s, box-shadow 0.4s, border-color 0.4s;
}
.nav.on-dark .nav-inner {
  border-color: rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, rgba(30, 27, 32, 0.72), rgba(20, 18, 22, 0.58));
  color: var(--dark-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 32px -12px rgba(0, 0, 0, 0.6);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 720;
  font-size: 1.08rem;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.brand img { border-radius: 8px; }
.nav-links { display: flex; gap: 4px; margin: 0 auto; }
.nav-links a {
  padding: 8px 13px;
  border-radius: 999px;
  color: inherit;
  opacity: 0.74;
  font-size: 0.92rem;
  font-weight: 520;
  text-decoration: none;
  transition: opacity 0.2s, background 0.2s;
}
.nav-links a:hover { opacity: 1; background: rgba(127, 127, 127, 0.12); }
.nav-links a.active { opacity: 1; }
.nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav-links + .nav-actions { margin-left: 0; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background 0.2s;
}
@media (hover: hover) {
  .icon-btn:hover { background: rgba(127, 127, 127, 0.14); }
}
.menu-btn, .menu-btn:hover { background: transparent; }
.menu-btn:active .menu-icon { transform: scale(0.88); }
.menu-icon { transition: transform 0.2s var(--ease-out); }
.sound-btn svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sound-btn .spk { fill: currentColor; stroke: none; opacity: 0.85; }
.sound-btn .wave { display: none; }
.sound-btn[aria-pressed="true"] .wave { display: inline; }
.sound-btn[aria-pressed="true"] .mute { display: none; }
.sound-btn[aria-pressed="true"] { color: var(--red); }

/* Phone and tablet menu: two lines that fold into an X, and a glass sheet that drops from the pill. */
.menu-btn, .nav-menu, .nav-scrim { display: none; }
.menu-icon { position: relative; display: block; width: 18px; height: 12px; }
.menu-icon i {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: top 0.25s var(--ease-out), transform 0.45s var(--ease-spring);
}
.menu-icon i:first-child { top: 2px; }
.menu-icon i:last-child { top: 8px; }
.nav.is-open .menu-icon i { top: 5px; }
.nav.is-open .menu-icon i:first-child { transform: rotate(45deg); }
.nav.is-open .menu-icon i:last-child { transform: rotate(-45deg); }

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(27, 23, 24, 0.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
}
.nav.is-open .nav-scrim { opacity: 1; pointer-events: auto; }

.nav-menu {
  position: absolute;
  left: 12px; right: 12px;
  top: calc(100% + 8px);
  max-height: calc(100vh - 84px);
  max-height: calc(100svh - 84px);
  padding: 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(252, 246, 247, 0.74));
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  box-shadow: var(--glass-shadow), 0 30px 70px -24px rgba(60, 15, 22, 0.45);
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.96);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity 0.22s, transform 0.4s var(--ease-out), visibility 0s linear 0.4s;
}
.nav.is-open .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: opacity 0.25s, transform 0.55s var(--ease-spring), visibility 0s;
}
.menu-head { display: flex; align-items: center; gap: 12px; padding: 4px 6px 12px; }
.menu-iris { position: relative; flex: none; width: 40px; height: 40px; }
.menu-head p { font-family: var(--font-display); font-size: 1.15rem; font-weight: 720; letter-spacing: -0.02em; }
.menu-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.menu-list a {
  display: block;
  height: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  transition: background 0.2s, transform 0.25s var(--ease-spring), border-color 0.2s;
}
.menu-list a:active { transform: scale(0.97); }
.menu-list a:hover { background: #fff; }
.menu-list b { display: block; font-size: 1rem; font-weight: 650; }
.menu-list small { display: block; margin-top: 2px; color: var(--ink-3); font-size: 0.8rem; line-height: 1.3; }
.menu-list a.active { border-color: rgba(233, 48, 53, 0.35); background: #fff; box-shadow: inset 3px 0 0 var(--red); }
.menu-list a.active b { color: var(--red-ink); }
.menu-cta { position: sticky; bottom: 0; z-index: 1; width: 100%; height: 52px; margin-top: 12px; }
.nav.is-open .menu-list li, .nav.is-open .menu-cta, .nav.is-open .menu-head {
  animation: menu-in 0.5s var(--ease-spring) both;
  animation-delay: calc(var(--i, 0) * 22ms + 40ms);
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px) scale(0.97); } to { opacity: 1; transform: none; } }

.nav.on-dark .nav-menu {
  border-color: rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, rgba(34, 30, 36, 0.86), rgba(22, 20, 25, 0.8));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 70px -24px rgba(0, 0, 0, 0.8);
  color: var(--dark-ink);
}
.nav.on-dark .menu-list a { border-color: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.06); }
.nav.on-dark .menu-list a:hover, .nav.on-dark .menu-list a.active { background: rgba(255, 255, 255, 0.12); }
.nav.on-dark .menu-list small { color: var(--dark-ink-2); }
.nav.on-dark .menu-list a.active b { color: #ff7a82; }
.nav.on-dark .nav-scrim { background: rgba(0, 0, 0, 0.4); }

html.menu-open, html.menu-open body { overflow: hidden; }

/* MARK: Stage, companion and bubble */

.stage {
  position: fixed;
  inset: 0;
  z-index: 45;
  overflow: hidden;
  pointer-events: none;
}
.fx-layer { position: fixed; inset: 0; z-index: 80; overflow: hidden; pointer-events: none; }
.companion {
  position: absolute;
  left: 0; top: 0;
  will-change: transform;
}
.companion.is-dragging .iris-hit { cursor: grabbing; }
.companion.is-parked .iris-hit { pointer-events: none; }

.bubble {
  position: absolute;
  left: 0; top: 0;
  max-width: min(300px, calc(100vw - 32px));
  padding: 11px 16px;
  border: 1px solid var(--glass-line);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78));
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  box-shadow: var(--glass-shadow);
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 560;
  line-height: 1.35;
  opacity: 0;
  scale: 0.85;
  transition: opacity 0.25s, scale 0.35s var(--ease-spring);
  will-change: transform;
}
.bubble.show { opacity: 1; scale: 1; }
.bubble[data-side="right"] { border-bottom-left-radius: 6px; transform-origin: left bottom; }
.bubble[data-side="left"] { border-bottom-right-radius: 6px; transform-origin: right bottom; }
.bubble-text:empty::after { content: "\200b"; }

/* MARK: Iris
   Proportions follow the native art: aura 1.34R, crescent cap, darker tongue, deep pool at the
   lower right, light along the left edge, a hairline rim, eyes 17.7% of the diameter. */

.iris {
  --d: 160px;
  --aura: 255, 70, 82;
  position: absolute;
  left: 0; top: 0;
  width: var(--d);
  height: var(--d);
  pointer-events: none;
}
.iris-float, .iris-jelly { position: absolute; inset: 0; }
.iris-jelly { transform-origin: 50% 50%; }
.iris-float > *, .iris-jelly > * { position: absolute; }

.iris-aura {
  inset: -17%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--aura), 0.38) 0%, rgba(var(--aura), 0.3) 72%, rgba(var(--aura), 0) 100%);
  transition: background 0.6s;
}

.iris-glass {
  inset: 0;
  border-radius: 50%;
  -webkit-backdrop-filter: blur(1.5px) saturate(1.7) brightness(1.04);
  backdrop-filter: blur(1.5px) saturate(1.7) brightness(1.04);
}

.iris-body {
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  opacity: 0.84;
  background: radial-gradient(ellipse 66% 66% at 42% 38%,
    #f03e42 0%, #e93035 32%, #d8262c 60%, #b81d22 84%, #a8191e 100%);
}
.iris-body > i { position: absolute; display: block; }

.iris-pool {
  inset: 0;
  background: radial-gradient(circle calc(var(--d) * 0.5) at 64% 81%, rgba(128, 14, 22, 0.5), rgba(128, 14, 22, 0));
}
.iris-cap {
  inset: 0.75%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 200, 200, 0.84) 0%, rgba(250, 152, 152, 0.56) 30%, rgba(245, 120, 120, 0) 71%);
  -webkit-mask: radial-gradient(circle calc(var(--d) * 0.4225) at 53.6% 63.7%, transparent 91%, #000 100%);
  mask: radial-gradient(circle calc(var(--d) * 0.4225) at 53.6% 63.7%, transparent 91%, #000 100%);
}
.iris-tongue {
  left: 42.5%;
  top: 12%;
  width: 15%;
  height: 37%;
  border-radius: 50%;
  background: rgba(231, 46, 52, 0.85);
  filter: blur(calc(var(--d) * 0.045));
}
.iris-edge {
  inset: 0;
  border-radius: 50%;
  background: rgba(255, 150, 150, 0.5);
  -webkit-mask: radial-gradient(circle calc(var(--d) * 0.465) at 52.75% 47.75%, transparent 94%, #000 100%);
  mask: radial-gradient(circle calc(var(--d) * 0.465) at 52.75% 47.75%, transparent 94%, #000 100%);
}
.iris-base {
  inset: 0;
  border-radius: 50%;
  background: rgba(255, 128, 128, 0.32);
  -webkit-mask: radial-gradient(circle calc(var(--d) * 0.4775) at 50% 47.5%, transparent 95%, #000 100%);
  mask: radial-gradient(circle calc(var(--d) * 0.4775) at 50% 47.5%, transparent 95%, #000 100%);
}
.iris-glow {
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle calc(var(--d) * 0.475) at 50% 52.5%, rgba(255, 120, 110, 0.6), rgba(255, 120, 110, 0));
  mix-blend-mode: screen;
}
@supports (mix-blend-mode: plus-lighter) {
  .iris-glow { mix-blend-mode: plus-lighter; background: radial-gradient(circle calc(var(--d) * 0.475) at 50% 52.5%, rgba(255, 120, 110, 0.42), rgba(255, 120, 110, 0)); }
}
.iris-rim {
  inset: 0;
  border-radius: 50%;
  padding: max(0.9px, calc(var(--d) * 0.015));
  background: linear-gradient(135deg, rgba(255, 214, 214, 0.95), rgba(255, 160, 160, 0.7) 55%, rgba(255, 146, 150, 0.85));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.iris-face { inset: 0; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 50%; pointer-events: none; }

.iris-hit {
  inset: 3%;
  border-radius: 50%;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.iris-shadow {
  display: none;
  left: 14%;
  top: 95%;
  width: 72%;
  height: 14%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(110, 10, 25, 0.3), rgba(110, 10, 25, 0));
}
.iris--shadow .iris-shadow { display: block; }

/* Thinking: motes orbit her. Each mote exists twice, once behind her and once in front, and
   each copy shows only on its half of the orbit, so the motes pass behind the body. */
.iris-motes { inset: 0; pointer-events: none; opacity: 0; transform: rotate(-12deg); transition: opacity 0.5s; }
.mood-thinking .iris-motes { opacity: 1; }
.iris-motes i {
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  animation: mote-x 2.6s ease-in-out infinite alternate;
}
.iris-motes b {
  position: absolute;
  left: calc(var(--d) * -0.035);
  top: calc(var(--d) * -0.035);
  width: calc(var(--d) * 0.07);
  height: calc(var(--d) * 0.07);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, rgba(var(--aura), 0.95) 60%);
  box-shadow: 0 0 calc(var(--d) * 0.06) rgba(var(--aura), 0.8);
  animation: mote-y-back 2.6s ease-in-out infinite alternate;
  animation-delay: -1.3s;
}
.iris-motes--front b { animation-name: mote-y-front; }
.iris-motes i:nth-child(2), .iris-motes i:nth-child(2) b { animation-duration: 3.4s; }
.iris-motes i:nth-child(2) { animation-delay: -1.1s; }
.iris-motes i:nth-child(2) b { animation-delay: -2.8s; scale: 0.7; }
.iris-motes i:nth-child(3), .iris-motes i:nth-child(3) b { animation-duration: 2.1s; }
.iris-motes i:nth-child(3) { animation-delay: -0.6s; }
.iris-motes i:nth-child(3) b { animation-delay: -1.65s; scale: 0.55; }
@keyframes mote-x { from { transform: translateX(calc(var(--d) * -0.68)); } to { transform: translateX(calc(var(--d) * 0.68)); } }
@keyframes mote-y-back {
  0% { transform: translateY(calc(var(--d) * -0.2)); opacity: 1; }
  49.9% { opacity: 1; }
  50% { opacity: 0; }
  100% { transform: translateY(calc(var(--d) * 0.2)); opacity: 0; }
}
@keyframes mote-y-front {
  0% { transform: translateY(calc(var(--d) * -0.2)); opacity: 0; }
  49.9% { opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateY(calc(var(--d) * 0.2)); opacity: 1; }
}

/* Listening: soft rings. */
.iris-rings { inset: 0; pointer-events: none; }
.iris-rings i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: max(1.5px, calc(var(--d) * 0.012)) solid rgba(var(--aura), 0.55);
  opacity: 0;
}
.mood-listening .iris-rings i { animation: ring 2.4s cubic-bezier(0.2, 0.6, 0.3, 1) infinite; }
.mood-listening .iris-rings i:nth-child(2) { animation-delay: 0.8s; }
.mood-listening .iris-rings i:nth-child(3) { animation-delay: 1.6s; }
@keyframes ring { 0% { transform: scale(1); opacity: 0.75; } 100% { transform: scale(1.9); opacity: 0; } }

/* Celebrating: sparkles. */
.iris-sparkles { inset: 0; pointer-events: none; }
.iris-sparkles i {
  position: absolute;
  width: calc(var(--d) * 0.13);
  height: calc(var(--d) * 0.13);
  background: #ffd36b;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  opacity: 0;
}
.iris-sparkles i:nth-child(1) { left: -10%; top: 8%; }
.iris-sparkles i:nth-child(2) { right: -8%; top: -4%; background: #fff; width: calc(var(--d) * 0.1); height: calc(var(--d) * 0.1); }
.iris-sparkles i:nth-child(3) { right: -14%; bottom: 26%; background: #ff9fb0; }
.iris-sparkles i:nth-child(4) { left: -6%; bottom: 8%; background: #fff; width: calc(var(--d) * 0.08); height: calc(var(--d) * 0.08); }
.mood-celebrating .iris-sparkles i { animation: sparkle 1.5s ease-in-out infinite; }
.mood-celebrating .iris-sparkles i:nth-child(2) { animation-delay: 0.35s; }
.mood-celebrating .iris-sparkles i:nth-child(3) { animation-delay: 0.7s; }
.mood-celebrating .iris-sparkles i:nth-child(4) { animation-delay: 1.05s; }
@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(0.2) rotate(0deg); }
  40% { opacity: 1; transform: scale(1) rotate(45deg); }
  70% { opacity: 0; transform: scale(0.5) rotate(90deg); }
}

/* Resting: z z Z. */
.iris-z {
  right: -6%;
  top: -10%;
  width: 40%;
  height: 40%;
  pointer-events: none;
  color: rgba(var(--aura), 0.95);
  font: 800 calc(var(--d) * 0.15) / 1 var(--font-round);
}
.iris-z i { position: absolute; left: 0; bottom: 0; font-style: normal; opacity: 0; }
.mood-resting .iris-z i { animation: zz 3.3s ease-in infinite; }
.mood-resting .iris-z i:nth-child(2) { animation-delay: 1.1s; }
.mood-resting .iris-z i:nth-child(3) { animation-delay: 2.2s; }
@keyframes zz {
  0% { transform: translate(0, 0) scale(0.55); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(90%, -150%) scale(1.15); opacity: 0; }
}

/* MARK: Slots (her seats in each section) */

.slot { aspect-ratio: 1; pointer-events: none; }

/* MARK: Reveal */

.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--delay, 0s);
}
.js .reveal.in { opacity: 1; transform: none; }

/* MARK: Hero */

.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 96px 0 84px;
  overflow: hidden;
  text-align: center;
}
.sky { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.blob {
  position: absolute;
  border-radius: 50%;
  animation: drift 24s ease-in-out infinite alternate;
}
.blob-a { width: 52vw; height: 52vw; left: -14vw; top: 2vh; background: radial-gradient(closest-side, rgba(255, 120, 128, 0.55), rgba(255, 120, 128, 0)); }
.blob-b { width: 46vw; height: 46vw; right: -10vw; top: -12vh; background: radial-gradient(closest-side, rgba(255, 190, 150, 0.6), rgba(255, 190, 150, 0)); animation-duration: 28s; }
.blob-c { width: 44vw; height: 44vw; left: 28vw; bottom: -22vh; background: radial-gradient(closest-side, rgba(204, 170, 255, 0.5), rgba(204, 170, 255, 0)); animation-duration: 32s; }
.blob-d { width: 26vw; height: 26vw; right: 12vw; bottom: 6vh; background: radial-gradient(closest-side, rgba(255, 80, 96, 0.35), rgba(255, 80, 96, 0)); animation-duration: 20s; }
@keyframes drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(4vw, 3vh, 0) scale(1.08); }
  100% { transform: translate3d(-3vw, -2vh, 0) scale(0.96); }
}
.hero-inner { position: relative; display: flex; flex-direction: column; align-items: center; }
.slot-hero { width: clamp(140px, 26vh, 280px); margin-bottom: clamp(14px, 2.4vh, 28px); }
.hero .eyebrow { margin-bottom: 10px; }
.hero .soon { margin-bottom: 18px; }
/* "Coming soon" pill and tag, used in the hero, the mobile section and the download section. */
.soon {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 22px;
  padding: 6px 14px 6px 12px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  box-shadow: var(--glass-shadow);
  color: var(--ink-2);
  font-size: 0.88rem;
  font-weight: 560;
}
.soon-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  animation: soon-pulse 2.2s ease-out infinite;
}
@keyframes soon-pulse {
  0% { box-shadow: 0 0 0 0 rgba(233, 48, 53, 0.45); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(233, 48, 53, 0); }
}
.soon-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(233, 48, 53, 0.1);
  color: var(--red-ink);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.platforms { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.platforms li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 16px;
  border: 1px solid var(--glass-line);
  border-radius: 16px;
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
}
.platforms b { font-size: 1.02rem; font-weight: 680; }
.platforms span { color: var(--ink-3); font-size: 0.86rem; }
.final .soon { margin: 20px 0 0; }

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(3.3rem, 8.4vw, 7.6rem);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.052em;
}
.hero-title em, .text-red {
  font-style: normal;
  background: linear-gradient(180deg, #ff5960 0%, #e3272e 60%, #b81d22 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub {
  max-width: 34em;
  margin-top: 22px;
  color: var(--ink-2);
  font-size: clamp(1.07rem, 1.45vw, 1.32rem);
  text-wrap: balance;
}

.ask {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(620px, 100%);
  height: 62px;
  margin-top: 26px;
  padding: 0 11px 0 18px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow: var(--glass-shadow), 0 0 0 0 rgba(233, 48, 53, 0);
  transition: box-shadow 0.3s, transform 0.3s var(--ease-spring);
}
.ask:focus-within { box-shadow: var(--glass-shadow), 0 0 0 5px rgba(233, 48, 53, 0.14); }
.ask-plus { color: var(--ink-3); }
.ask input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: none;
  color: var(--ink);
  font-size: 1.08rem;
}
.ask input::placeholder { color: var(--ink-3); }
.ask .goo-dots { display: none; }
.ask.is-thinking .goo-dots { display: inline-flex; }
.ask.is-thinking .send { opacity: 0.5; pointer-events: none; }
.ask-chips { margin-top: 18px; max-width: 680px; }

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  width: 26px;
  height: 40px;
  margin-left: -13px;
  border: 2px solid rgba(27, 23, 24, 0.25);
  border-radius: 14px;
}
.scroll-cue span {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--red);
  animation: cue 1.8s ease-in-out infinite;
}
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

/* MARK: Meet Iris */

.meet-grid {
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
.meet-stage {
  position: relative;
  aspect-ratio: 1 / 1.02;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--lift-shadow);
}
.scene {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #4d4291 0%, #9a5aa6 30%, #e07895 52%, #ff9a72 70%, #ffc78e 86%);
}
.scene-sun {
  position: absolute;
  left: 62%; top: 44%;
  width: 22%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fff7d8 0 42%, rgba(255, 228, 160, 0.6) 60%, rgba(255, 200, 140, 0) 72%);
  animation: sun 9s ease-in-out infinite alternate;
}
@keyframes sun { from { transform: translateY(0); } to { transform: translateY(-14%); } }
.scene-cloud {
  position: absolute;
  height: 9%;
  border-radius: 999px;
  background: rgba(255, 236, 240, 0.55);
  filter: blur(6px);
  animation: cloud 40s linear infinite;
}
.scene-cloud.c1 { width: 38%; top: 16%; left: -10%; }
.scene-cloud.c2 { width: 26%; top: 30%; left: 40%; opacity: 0.7; animation-duration: 55s; animation-delay: -20s; }
@keyframes cloud { from { transform: translateX(-40%); } to { transform: translateX(260%); } }
.scene-hills { position: absolute; left: 0; bottom: 0; width: 100%; height: 48%; }
.scene-hills .h1 { fill: #77406f; }
.scene-hills .h2 { fill: #4f2855; }
.scene-hills .h3 { fill: #2d1734; }
.slot-meet { position: absolute; left: 50%; top: 44%; width: 46%; transform: translate(-50%, -50%); }
.stage-hint {
  position: absolute;
  left: 18px; right: 18px; bottom: 18px;
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(20, 10, 24, 0.32);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.88rem;
  font-weight: 520;
}

.moods {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 32px;
}
.moods button {
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  font-size: 0.92rem;
  font-weight: 560;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.25s var(--ease-spring), border-color 0.2s;
}
.moods button:hover { transform: translateY(-1px); background: #fff; }
.moods button[aria-checked="true"] {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(180deg, #f5494e, #d9262c);
  box-shadow: 0 8px 18px -8px rgba(217, 38, 44, 0.8);
}
.mood-caption { min-height: 3em; margin-top: 18px; color: var(--ink-2); font-size: 1.05rem; }
.gestures { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 10px; color: var(--ink-3); font-size: 0.98rem; }

/* MARK: Guided questions */

.direct-grid {
  display: grid;
  grid-template-columns: 1fr 1.06fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.ticks { display: grid; gap: 12px; margin-top: 30px; color: var(--ink-2); }
.ticks li { position: relative; padding-left: 30px; }
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.3em;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(233, 48, 53, 0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23d42a33' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.direct-demo { position: relative; padding-left: 96px; }
.slot-direct { position: absolute; left: -34px; bottom: 4px; width: 112px; }

.chat {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 620px;
  max-height: 80vh;
  border: 1px solid var(--glass-line);
  border-radius: var(--r-l);
  background:
    radial-gradient(120% 70% at 0% 100%, rgba(255, 120, 135, 0.14), rgba(255, 120, 135, 0) 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(250, 244, 246, 0.7));
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  box-shadow: var(--glass-shadow), var(--lift-shadow);
  overflow: hidden;
}
.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 14px 0 20px;
  border-bottom: 1px solid var(--line);
}
.chat-title { font-weight: 650; font-size: 0.95rem; }
.chat-restart {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(127, 127, 127, 0.1);
  color: var(--ink-2);
  cursor: pointer;
}
.chat-restart svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chat-restart:hover { background: rgba(127, 127, 127, 0.18); }
.chat-log {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 20px 18px 10px;
  overflow-y: auto;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.chat-log::-webkit-scrollbar { display: none; }
.chat-foot { padding: 8px 14px 14px; }
.chat-chips { justify-content: flex-start; gap: 8px; min-height: 0; margin-bottom: 10px; }
.chat-chips:empty { margin-bottom: 0; }
.chat-chips .chip { height: 36px; padding: 0 14px; font-size: 0.9rem; animation: msg-in 0.5s var(--ease-spring) both; }
.chat-chips .chip:nth-child(2) { animation-delay: 0.05s; }
.chat-chips .chip:nth-child(3) { animation-delay: 0.1s; }
.chat-chips .chip:nth-child(4) { animation-delay: 0.15s; }
.chat-chips .chip:nth-child(5) { animation-delay: 0.2s; }
.chat-chips .chip.quiet { background: transparent; box-shadow: none; border-color: var(--line); color: var(--ink-2); }
.chat-input {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 7px 0 14px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 0 #fff, 0 6px 18px -10px rgba(60, 15, 22, 0.3);
}
.chat-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 1rem; color: var(--ink); }
.chat-input input::placeholder { color: var(--ink-3); }
.chat-input .ask-plus { color: var(--ink-3); }
.chat-input .send { width: 36px; height: 36px; }

.msg {
  max-width: 86%;
  padding: 11px 15px;
  border-radius: 20px;
  font-size: 0.97rem;
  line-height: 1.42;
  animation: msg-in 0.5s var(--ease-spring) both;
}
.msg.me {
  align-self: flex-end;
  border-bottom-right-radius: 7px;
  background: rgba(86, 78, 82, 0.86);
  color: #fff;
}
.msg.bot {
  align-self: flex-start;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-bottom-left-radius: 7px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 6px 18px -12px rgba(60, 15, 22, 0.35);
}
.msg.typing { padding: 8px 12px; }
.msg small { display: block; margin-top: 4px; color: var(--ink-3); font-size: 0.82rem; }
@keyframes msg-in { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } }

.prompt-card {
  align-self: stretch;
  padding: 16px 16px 14px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 30px -16px rgba(60, 15, 22, 0.4);
  font-size: 0.9rem;
  animation: msg-in 0.6s var(--ease-spring) both;
}
.prompt-card header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.prompt-card .tag {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(233, 48, 53, 0.1);
  color: var(--red-ink);
  font-size: 0.72rem;
  font-weight: 720;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.prompt-card header b { font-size: 0.92rem; }
.prompt-card dl { display: grid; grid-template-columns: 74px 1fr; gap: 7px 10px; margin: 0; }
.prompt-card dt { color: var(--ink-3); font-weight: 560; }
.prompt-card dd { margin: 0; color: var(--ink); }
.prompt-card .beats { display: grid; gap: 3px; }
.prompt-card .beats span { display: flex; gap: 8px; }
.prompt-card .beats em { flex: none; min-width: 64px; white-space: nowrap; color: var(--red-ink); font-style: normal; font-family: var(--font-mono); font-size: 0.8rem; padding-top: 1px; }
.prompt-card .changed { animation: flash 1.4s ease-out; border-radius: 6px; }
@keyframes flash { 0% { background: rgba(255, 210, 90, 0.7); } 100% { background: rgba(255, 210, 90, 0); } }
.prompt-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.prompt-actions .chip { height: 34px; padding: 0 13px; font-size: 0.86rem; }

/* MARK: Production (dark) */

.dark {
  background: var(--dark);
  color: var(--dark-ink);
}
.dark .lede { color: var(--dark-ink-2); }
.dark .eyebrow { color: #ff6b73; }
.dark .fine { color: #8f8689; }
.produce::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  width: min(1100px, 100%); height: 700px;
  margin: 0 auto;
  background: radial-gradient(closest-side, rgba(233, 48, 53, 0.22), rgba(233, 48, 53, 0));
  pointer-events: none;
}
.produce-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: clamp(32px, 5vw, 72px);
  margin-top: 24px;
}
.produce-sticky {
  position: sticky;
  top: max(150px, calc(50vh - 236px));
  align-self: start;
}
.monitor {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 22px;
  background: linear-gradient(180deg, #1b1920, #121115);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 40px 80px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.monitor-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  color: #cfc8cc;
  font-size: 0.84rem;
}
.rec { width: 9px; height: 9px; border-radius: 50%; background: #ff3b45; box-shadow: 0 0 10px #ff3b45; animation: blink 1.6s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0.25; } }
.monitor-title { font-weight: 600; }
.monitor-tc { margin-left: auto; font-family: var(--font-mono); color: #8d868a; font-variant-numeric: tabular-nums; }
.monitor-screen { position: relative; aspect-ratio: 16 / 10; }
.pane {
  position: absolute;
  inset: 0;
  padding: 18px;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.6s var(--ease-out), transform 0.7s var(--ease-out);
  pointer-events: none;
}
.monitor[data-step="1"] [data-pane="1"],
.monitor[data-step="2"] [data-pane="2"],
.monitor[data-step="3"] [data-pane="3"],
.monitor[data-step="4"] [data-pane="4"],
.monitor[data-step="5"] [data-pane="5"] { opacity: 1; transform: none; }
.slot-produce { position: absolute; right: 20px; top: -92px; width: 98px; }

/* Little painted scenes for the bakery Short. */
.sc-street {
  background:
    radial-gradient(circle at 72% 58%, #fff4d8 0 7%, rgba(255, 244, 216, 0) 13%),
    linear-gradient(to top, #2a1a39 0 22%, rgba(0, 0, 0, 0) 22%),
    linear-gradient(90deg, rgba(0, 0, 0, 0) 6%, #3a2448 6% 30%, rgba(0, 0, 0, 0) 30% 36%, #4b2c57 36% 55%, rgba(0, 0, 0, 0) 55% 84%, #3a2448 84% 96%, rgba(0, 0, 0, 0) 96%) bottom / 100% 64% no-repeat,
    linear-gradient(90deg, rgba(0, 0, 0, 0) 12%, #ffd27a 12% 17%, rgba(0, 0, 0, 0) 17% 42%, #ffcf70 42% 47%, rgba(0, 0, 0, 0) 47%) 0 62% / 100% 10% no-repeat,
    linear-gradient(180deg, #ff8f7a, #ffbf8a 60%, #ffdcaa);
}
.sc-oven {
  background:
    radial-gradient(ellipse 46% 30% at 50% 62%, #ffb547 0%, #ff7a2a 45%, rgba(255, 122, 42, 0) 72%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 54%, #c97a3a 54% 57%, rgba(0, 0, 0, 0) 57% 70%, #c97a3a 70% 73%, rgba(0, 0, 0, 0) 73%),
    linear-gradient(180deg, #2a1712, #3d2117 60%, #1f110d);
}
.sc-croissant {
  background:
    radial-gradient(ellipse 26% 14% at 50% 56%, #f6b25b 0 40%, #d9853a 62%, rgba(217, 133, 58, 0) 72%),
    radial-gradient(ellipse 40% 10% at 50% 66%, rgba(255, 255, 255, 0.8) 0 60%, rgba(255, 255, 255, 0) 72%),
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 40%),
    linear-gradient(160deg, #ffe2c0, #f4b98c 70%, #e79c74);
}
.sc-door {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0) 30%, #1f6f6a 30% 62%, rgba(0, 0, 0, 0) 62%) bottom / 100% 70% no-repeat,
    linear-gradient(90deg, rgba(0, 0, 0, 0) 38%, #ffe7a8 38% 54%, rgba(0, 0, 0, 0) 54%) 0 46% / 100% 9% no-repeat,
    linear-gradient(to top, #8a5a44 0 12%, rgba(0, 0, 0, 0) 12%),
    linear-gradient(180deg, #ffd3b0, #f7a98c);
}
.sc-beach {
  background:
    radial-gradient(circle at 70% 34%, #fff6d8 0 8%, rgba(255, 246, 216, 0) 14%),
    linear-gradient(to top, #f2d4a6 0 26%, rgba(0, 0, 0, 0) 26%),
    linear-gradient(to top, rgba(0, 0, 0, 0) 26%, #39a3c4 26% 44%, rgba(0, 0, 0, 0) 44%),
    linear-gradient(180deg, #7bc4e8, #bfe3f2 70%, #e8f4f6);
}
.sc-portrait {
  background:
    radial-gradient(circle at 50% 40%, #f0c3a8 0 13%, rgba(0, 0, 0, 0) 13.5%),
    radial-gradient(ellipse 30% 26% at 50% 86%, #2c2346 0 98%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle at 50% 36%, #3b2a2a 0 16%, rgba(0, 0, 0, 0) 16.5%),
    linear-gradient(160deg, #8a7bd8, #c79ad6 60%, #f4b6c0);
}
.sc-aurora {
  background:
    linear-gradient(to top, #0d1424 0 18%, rgba(0, 0, 0, 0) 18%),
    radial-gradient(ellipse 60% 30% at 40% 38%, rgba(80, 255, 170, 0.75), rgba(80, 255, 170, 0) 70%),
    radial-gradient(ellipse 40% 26% at 70% 30%, rgba(160, 120, 255, 0.6), rgba(160, 120, 255, 0) 70%),
    linear-gradient(180deg, #08102a, #1b2453 70%, #2c2f6a);
}

.pane-plan { display: grid; grid-template-rows: repeat(4, 1fr); gap: 10px; }
.plan-row {
  display: grid;
  grid-template-columns: 30px 86px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 8px 14px 8px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 0.5s, transform 0.6s var(--ease-out);
}
.monitor[data-step="1"] .plan-row { opacity: 1; transform: none; }
.monitor[data-step="1"] .plan-row:nth-child(2) { transition-delay: 0.1s; }
.monitor[data-step="1"] .plan-row:nth-child(3) { transition-delay: 0.2s; }
.monitor[data-step="1"] .plan-row:nth-child(4) { transition-delay: 0.3s; }
.plan-row b { color: #ff6b73; font-family: var(--font-mono); font-size: 0.85rem; }
.plan-row .thumb { height: 100%; min-height: 40px; border-radius: 8px; }
.plan-row strong { display: block; font-size: 0.95rem; font-weight: 620; }
.plan-row small { color: #a59ea2; font-size: 0.8rem; }
.plan-row em { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); color: #d8d1d4; font-size: 0.74rem; font-style: normal; white-space: nowrap; }

.pane-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.frame { position: relative; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.frame .ok {
  position: absolute;
  right: 10px; bottom: 10px;
  padding: 4px 10px 4px 22px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 7px center / 11px no-repeat;
  color: #fff;
  font-size: 0.74rem;
  font-weight: 650;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.3s, transform 0.45s var(--ease-spring);
}
.monitor[data-step="2"] .frame .ok { opacity: 1; transform: none; }
.monitor[data-step="2"] .frame:nth-child(1) .ok { transition-delay: 0.5s; }
.monitor[data-step="2"] .frame:nth-child(2) .ok { transition-delay: 0.9s; }
.monitor[data-step="2"] .frame:nth-child(3) .ok { transition-delay: 1.3s; }
.monitor[data-step="2"] .frame:nth-child(4) .ok { transition-delay: 1.7s; }

.pane-video { display: flex; flex-direction: column; gap: 12px; }
.video-frame { position: relative; flex: 1; border-radius: 14px; overflow: hidden; }
.video-frame::after { content: ""; position: absolute; inset: 0; background: inherit; animation: kenburns 9s ease-in-out infinite alternate; }
.video-frame { background-size: cover; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.16) translate(-2%, -2%); } }
.steam {
  position: absolute;
  z-index: 1;
  bottom: 40%;
  width: 7%;
  height: 26%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  filter: blur(8px);
  animation: steam 3.2s ease-in infinite;
}
.steam.s1 { left: 42%; }
.steam.s2 { left: 50%; animation-delay: 1s; }
.steam.s3 { left: 56%; animation-delay: 2s; }
@keyframes steam { 0% { transform: translateY(20%) scaleY(0.6); opacity: 0; } 30% { opacity: 0.8; } 100% { transform: translateY(-80%) scaleY(1.3) translateX(14%); opacity: 0; } }
.approve-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 10px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.85rem;
  color: #c7c0c4;
}
.approve-bar strong { color: #fff; margin-right: 4px; }
.mini-btn { flex: none; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 0.8rem; font-weight: 620; }
.mini-btn.on { background: #10b981; }
.progress { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.progress span { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, #ff5960, #ff9a72); }
.monitor[data-step="3"] .progress span { animation: progress 5s var(--ease-out) infinite; }
@keyframes progress { 0% { width: 4%; } 85%, 100% { width: 100%; } }
.progress-label { margin-top: -4px; color: #8f888c; font-size: 0.78rem; }

.pane-vo { display: flex; flex-direction: column; justify-content: center; gap: 28px; padding: 28px; }
.wave { display: flex; align-items: center; gap: 3px; height: 46%; }
.wave i {
  flex: 1;
  height: var(--h, 40%);
  border-radius: 3px;
  background: linear-gradient(180deg, #ff8a8f, #e93035);
  transform-origin: center;
  animation: bar 1.1s ease-in-out infinite alternate;
  animation-delay: var(--dl, 0s);
}
@keyframes bar { from { transform: scaleY(0.3); } to { transform: scaleY(1); } }
.karaoke { font-family: var(--font-display); font-size: clamp(1.2rem, 2.2vw, 1.8rem); font-weight: 700; letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.3); }
.monitor[data-step="4"] .karaoke span { animation: word 4.8s linear infinite; }
.karaoke span:nth-child(2) { animation-delay: 0.45s !important; }
.karaoke span:nth-child(3) { animation-delay: 0.9s !important; }
.karaoke span:nth-child(4) { animation-delay: 1.3s !important; }
.karaoke span:nth-child(5) { animation-delay: 1.85s !important; }
.karaoke span:nth-child(6) { animation-delay: 2.3s !important; }
.karaoke span:nth-child(7) { animation-delay: 2.8s !important; }
.karaoke span:nth-child(8) { animation-delay: 3.2s !important; }
@keyframes word { 0% { color: rgba(255, 255, 255, 0.3); } 4%, 80% { color: #fff; } 100% { color: rgba(255, 255, 255, 0.3); } }

.pane-cut { display: grid; grid-template-rows: 1fr auto; gap: 14px; }
.tracks { position: relative; display: grid; grid-template-rows: repeat(4, 1fr); gap: 8px; }
.track { position: relative; display: flex; align-items: center; gap: 5px; padding-left: 40px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); }
.track b { position: absolute; left: 10px; color: #8f888c; font-size: 0.75rem; font-family: var(--font-mono); }
.clip { height: 72%; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.clip.c1 { flex: 3; background: linear-gradient(90deg, #ff9a76, #ffc38b); }
.clip.c2 { flex: 4; background: linear-gradient(90deg, #6a2f2a, #c96a2c); }
.clip.c3 { flex: 2; background: linear-gradient(90deg, #f6b25b, #e79c74); }
.clip.c4 { flex: 5; background: linear-gradient(90deg, #1f6f6a, #ffd3b0); }
.cap { flex: 1; padding: 4px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 0.72rem; font-weight: 620; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vo { flex: 1; height: 60%; margin-right: 16%; border-radius: 6px; background: repeating-linear-gradient(90deg, #ff6b73 0 2px, rgba(255, 107, 115, 0.35) 2px 5px); }
.duck { flex: 1; height: 70%; margin-right: 4px; }
.duck path { fill: none; stroke: #06b6d4; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.playhead { position: absolute; top: -6px; bottom: -6px; left: 40px; width: 2px; background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); }
.monitor[data-step="5"] .playhead { animation: playhead 6s linear infinite; }
@keyframes playhead { from { left: 40px; } to { left: calc(100% - 4px); } }
.meter { display: flex; align-items: baseline; gap: 12px; padding: 12px 16px; border-radius: 14px; background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.25); }
.meter-val { color: #35e0a3; font-family: var(--font-display); font-weight: 760; font-size: 1.35rem; letter-spacing: -0.02em; }
.meter-sub { color: #a6dfc9; font-size: 0.84rem; }

.steps { counter-reset: none; }
.step {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 74vh;
  opacity: 0.28;
  transition: opacity 0.5s;
}
.step.on { opacity: 1; }
.step-n { color: #ff6b73; font-family: var(--font-mono); font-size: 0.9rem; font-weight: 600; }
.step h3 { margin: 8px 0 12px; font-size: clamp(1.7rem, 2.6vw, 2.3rem); letter-spacing: -0.03em; }
.step p { color: var(--dark-ink-2); font-size: 1.08rem; }
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 56px;
}
.stats li { padding: 26px; border-radius: var(--r-m); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); }
.stats b { display: block; font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 780; letter-spacing: -0.03em; }
.stats span { color: var(--dark-ink-2); }

/* MARK: Studio */

.studio-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 44px;
  padding: 6px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
}
.studio-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.25s, box-shadow 0.25s, color 0.25s;
}
.studio-tabs button i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent); }
.studio-tabs button[aria-selected="true"] { background: #fff; box-shadow: 0 4px 14px -6px rgba(60, 15, 22, 0.3), inset 0 0 0 1.5px var(--c); }
.studio-tabs button:hover:not([aria-selected="true"]) { background: rgba(255, 255, 255, 0.6); }

.studio-frame { position: relative; max-width: 1080px; margin: 0 auto; }
.slot-studio { position: absolute; right: 26px; top: -104px; width: 96px; }
.window {
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  background: #fbfaf9;
  box-shadow: var(--lift-shadow), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: background 0.5s;
}
.window-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 52px;
  padding: 0 12px 0 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  background: linear-gradient(180deg, #f6f4f2, #efedeb);
  transition: background 0.5s, border-color 0.5s, color 0.5s;
}
.lights { display: flex; gap: 8px; }
.lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15); }
.lights i:nth-child(2) { background: #febc2e; }
.lights i:nth-child(3) { background: #28c840; }
.window-title { font-weight: 650; font-size: 0.92rem; white-space: nowrap; }
.window-ask {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  max-width: 340px;
  height: 32px;
  margin: 0 auto;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.05);
  color: var(--ink-3);
  font-size: 0.84rem;
  white-space: nowrap;
  overflow: hidden;
}
.window-ask em { font-style: normal; color: var(--ink); }
.window-ask .spark { color: var(--red); }
.mode {
  position: relative;
  display: flex;
  padding: 3px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.07);
}
.mode button {
  position: relative;
  z-index: 1;
  height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  font-size: 0.84rem;
  font-weight: 620;
  cursor: pointer;
  transition: color 0.3s;
}
.mode-thumb {
  position: absolute;
  top: 3px; bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.25);
  transition: transform 0.45s var(--ease-spring), background 0.4s;
}
.window.is-advanced .mode-thumb { transform: translateX(100%); }
.window.is-advanced { background: #1c1b1f; border-color: rgba(255, 255, 255, 0.08); }
.window.is-advanced .window-bar { background: linear-gradient(180deg, #2a292e, #232227); border-color: rgba(255, 255, 255, 0.06); color: #e9e5e7; }
.window.is-advanced .window-ask { background: rgba(255, 255, 255, 0.07); color: #8d878b; }
.window.is-advanced .window-ask em { color: #f0ecee; }
.window.is-advanced .mode { background: rgba(255, 255, 255, 0.08); }
.window.is-advanced .mode-thumb { background: #4a484f; }
.window.is-advanced .mode button { color: #ddd8da; }
.window-body { position: relative; aspect-ratio: 16 / 9; padding: 14px; overflow: hidden; }
.window-body > .ui { animation: ui-in 0.55s var(--ease-out) both; }
@keyframes ui-in { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }

.studio-info {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  max-width: 1080px;
  margin: 32px auto 0;
}
.studio-info h3 { font-size: 1.5rem; }
.studio-like { margin-top: 4px; color: var(--ink-3); }
.pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: 640px; }
.pills li {
  padding: 8px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  font-size: 0.9rem;
  animation: msg-in 0.45s var(--ease-spring) both;
}
.pills li:nth-child(2) { animation-delay: 0.04s; }
.pills li:nth-child(3) { animation-delay: 0.08s; }
.pills li:nth-child(4) { animation-delay: 0.12s; }
.pills li:nth-child(5) { animation-delay: 0.16s; }
.pills li:nth-child(6) { animation-delay: 0.2s; }

/* Studio mock UIs. Light for Basic, dark for Advanced. */
.ui { position: absolute; inset: 14px; display: grid; gap: 12px; font-size: 0.8rem; }
.ui span, .ui b, .ui i, .ui label { display: block; }
.ui .accent { background: var(--c, var(--red)) !important; color: #fff !important; }
.ui-panel { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.07); color: #cfcacc; }
.ui-panel > p { margin-bottom: 8px; color: #8d878b; font-size: 0.7rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; }
.ui label { display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; gap: 8px; margin: 6px 0; color: inherit; font-size: 0.76rem; }
.ui label i { position: relative; height: 4px; border-radius: 2px; background: rgba(127, 127, 127, 0.3); }
.ui label i::after {
  content: "";
  position: absolute;
  left: calc(var(--v, 0.5) * 100% - 6px);
  top: -4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.ui label i::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v, 0.5) * 100%); border-radius: 2px; background: var(--c, var(--red)); }
.ui-btn { padding: 7px 10px; border-radius: 8px; background: rgba(127, 127, 127, 0.14); text-align: center; font-weight: 600; }
.ui-playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--c, var(--red)); box-shadow: 0 0 8px var(--c, var(--red)); animation: sweep 7s linear infinite; }
@keyframes sweep { from { left: 8%; } to { left: 96%; } }
.ui-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ui-tools span { padding: 9px 16px; border-radius: 999px; background: #fff; box-shadow: 0 2px 8px -4px rgba(0, 0, 0, 0.25); font-weight: 600; }
.ui-tools .rec { color: #e93035; }
.ui-layers li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; }
.ui-layers li i { width: 22px; height: 16px; border-radius: 3px; background: rgba(127, 127, 127, 0.35); }
.ui-layers li.on { background: color-mix(in srgb, var(--c, var(--red)) 30%, transparent); color: #fff; }

.ui-video-basic { grid-template-rows: 1fr auto auto; }
.ui-preview { position: relative; border-radius: 14px; overflow: hidden; }
.ui-preview .ui-caption {
  position: absolute;
  left: 50%; bottom: 12%;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font: 800 clamp(0.8rem, 1.8vw, 1.25rem) / 1 var(--font-display);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.ui-strip { position: relative; display: flex; gap: 4px; height: 52px; padding: 4px; border-radius: 12px; background: #e9e5e2; }
.ui-strip span { flex: 1; border-radius: 8px; }
.ui-video-adv { grid-template-columns: 1fr 2.4fr 1.3fr; grid-template-rows: 1fr 38%; }
.ui-bin { display: grid; grid-auto-rows: 1fr; gap: 6px; }
.ui-bin span { border-radius: 8px; }
.ui-viewer { position: relative; border-radius: 10px; }
.ui-tc { position: absolute; right: 8px; bottom: 8px; padding: 3px 7px; border-radius: 6px; background: rgba(0, 0, 0, 0.6); color: #fff; font-family: var(--font-mono); font-size: 0.72rem; }
.ui-video-adv .ui-panel { overflow: hidden; }
.ui-timeline { position: relative; grid-column: 1 / -1; display: grid; gap: 5px; padding: 8px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); }
.ui-track { position: relative; display: block; padding-left: 34px; border-radius: 6px; background: rgba(255, 255, 255, 0.03); }
.ui-track b { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: #8d878b; font-size: 0.7rem; font-family: var(--font-mono); }
.ui-track span {
  position: absolute;
  top: 12%; bottom: 12%;
  left: calc(34px + var(--x) * (100% - 34px) / 100);
  width: calc(var(--w) * (100% - 34px) / 100 - 3px);
  border-radius: 5px;
  background: linear-gradient(90deg, #5d6bd8, #8b7cf0);
}
.ui-track span.t-title { background: linear-gradient(90deg, #e9a23b, #f5c56b); }
.ui-track span.t-wave { background: repeating-linear-gradient(90deg, #10b981 0 2px, rgba(16, 185, 129, 0.4) 2px 4px); }
.ui-track span.t-music { background: repeating-linear-gradient(90deg, #06b6d4 0 2px, rgba(6, 182, 212, 0.4) 2px 5px); }

.ui-image-basic { grid-template-columns: 2.2fr 1fr; grid-template-rows: 1fr auto; }
.ui-photo { position: relative; border-radius: 14px; overflow: hidden; }
.ui-crop { position: absolute; inset: 9% 22%; border: 2px solid #fff; box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.35); }
.ui-crop::before, .ui-crop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 33%, rgba(255, 255, 255, 0.5) 33% calc(33% + 1px), transparent calc(33% + 1px) 66%, rgba(255, 255, 255, 0.5) 66% calc(66% + 1px), transparent calc(66% + 1px)); }
.ui-crop::after { transform: rotate(90deg) scale(1.78, 0.56); }
.ui-crop i { position: absolute; width: 14px; height: 14px; border: 3px solid #fff; }
.ui-crop i:nth-child(1) { left: -4px; top: -4px; border-right: 0; border-bottom: 0; }
.ui-crop i:nth-child(2) { right: -4px; top: -4px; border-left: 0; border-bottom: 0; }
.ui-crop i:nth-child(3) { left: -4px; bottom: -4px; border-right: 0; border-top: 0; }
.ui-crop i:nth-child(4) { right: -4px; bottom: -4px; border-left: 0; border-top: 0; }
.ui-side { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 14px; background: #fff; box-shadow: 0 2px 10px -6px rgba(0, 0, 0, 0.25); color: var(--ink-2); }
.ui-side .ui-btn { margin-top: 6px; background: #f1eeec; color: var(--ink); }
.ui-filters { grid-column: 1 / -1; display: flex; gap: 8px; }
.ui-filters span { position: relative; flex: 1; height: 58px; border-radius: 10px; }
.ui-filters span::after { content: attr(data-f); position: absolute; left: 0; right: 0; bottom: -2px; transform: translateY(100%); color: var(--ink-2); font-size: 0.7rem; font-weight: 600; text-align: center; }
.ui-filters span:first-child { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c); }
.ui-filters { margin-bottom: 14px; }
.f-vivid { filter: saturate(1.7) contrast(1.1); }
.f-warm { filter: sepia(0.35) saturate(1.3); }
.f-mono { filter: grayscale(1) contrast(1.1); }
.f-film { filter: sepia(0.2) contrast(0.9) brightness(1.08) hue-rotate(-10deg); }

.ui-image-adv { grid-template-columns: 38px 1fr 1fr; }
.ui-toolbar { display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); }
.ui-toolbar i { height: 24px; border-radius: 6px; background: rgba(255, 255, 255, 0.1); }
.ui-toolbar i:nth-child(4) { background: var(--c); }
.ui-canvas { position: relative; border-radius: 6px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); }
.ui-marquee { position: absolute; left: 32%; top: 22%; width: 36%; height: 34%; border-radius: 50%; outline: 1.5px dashed #fff; outline-offset: 2px; animation: ants 1.2s linear infinite; }
@keyframes ants { 50% { outline-color: rgba(0, 0, 0, 0.6); } }
.ui-image-adv .ui-panels, .ui-graphics-adv .ui-panels { display: grid; gap: 10px; align-content: start; }
.ui-curve { width: 100%; height: auto; aspect-ratio: 1.6; }
.ui-curve .g { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 0.5; }
.ui-curve .c { fill: none; stroke: #fff; stroke-width: 1.6; }
.ui-curve .hist { fill: rgba(139, 92, 246, 0.35); }

.ui-graphics-basic { grid-template-columns: 120px 1fr; }
.ui-rail { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 14px; background: #fff; box-shadow: 0 2px 10px -6px rgba(0, 0, 0, 0.25); }
.ui-rail span { padding: 9px 10px; border-radius: 9px; color: var(--ink-2); font-weight: 600; }
.ui-rail span.on { background: color-mix(in srgb, var(--c) 18%, white); color: var(--ink); }
.ui-templates { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 10px; }
.tpl {
  position: relative;
  display: flex !important;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px;
  border-radius: 12px;
  color: #fff;
  overflow: hidden;
  box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s var(--ease-spring);
}
.tpl:hover { transform: translateY(-3px) rotate(-0.6deg); }
.tpl b { font: 850 clamp(0.75rem, 1.7vw, 1.2rem) / 0.95 var(--font-display); letter-spacing: -0.02em; text-transform: none; }
.tpl small { font-size: 0.66rem; opacity: 0.85; font-weight: 600; }
.tpl-thumb { background: radial-gradient(circle at 78% 60%, #ffd3b0 0 18%, transparent 19%), linear-gradient(135deg, #ff3b45, #ff9a3c); }
.tpl-post { background: radial-gradient(ellipse 40% 22% at 50% 64%, #f6b25b 0 45%, transparent 47%), linear-gradient(160deg, #ffe2c0, #f4b98c); color: #6a2f2a; }
.tpl-story { background: linear-gradient(180deg, #8b5cf6, #ec4899); }
.tpl-poster { background: radial-gradient(circle at 50% 30%, #ffd36b 0 14%, transparent 15%), linear-gradient(180deg, #1b1340, #4d2b78); }
.tpl-flyer { background: repeating-linear-gradient(135deg, #111 0 14px, #1d1d1d 14px 28px); }
.tpl-flyer b { color: #00f0ff; text-shadow: 0 0 12px rgba(0, 240, 255, 0.7); }
.tpl-card { background: linear-gradient(135deg, #10b981, #0ea5e9); }

.ui-graphics-adv { grid-template-columns: 38px 1fr 0.9fr; }
.ui-artboard { display: grid; place-items: center; border-radius: 6px; background: repeating-conic-gradient(#232227 0 25%, #29282d 0 50%) 0 0 / 16px 16px; }
.art { position: relative; width: 62%; aspect-ratio: 3 / 4; border-radius: 3px; background: linear-gradient(180deg, #1b1340, #4d2b78); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
.art-sun { position: absolute; left: 34%; top: 14%; width: 32%; aspect-ratio: 1; border-radius: 50%; background: #ffd36b; box-shadow: 0 0 30px rgba(255, 211, 107, 0.6); }
.art-title { position: absolute; left: 10%; right: 10%; top: 58%; color: #fff; font: 900 clamp(0.8rem, 1.9vw, 1.35rem) / 0.95 var(--font-display); text-align: center; letter-spacing: -0.02em; }
.art-sub { position: absolute; left: 0; right: 0; top: 78%; color: #ffd36b; font-size: 0.7rem; font-weight: 700; text-align: center; }
.sel { position: absolute; left: 8%; right: 8%; top: 55%; height: 18%; border: 1.5px solid #3b82f6; }
.sel i { position: absolute; width: 7px; height: 7px; border: 1.5px solid #3b82f6; background: #fff; }
.sel i:nth-child(1) { left: -4px; top: -4px; } .sel i:nth-child(2) { right: -4px; top: -4px; }
.sel i:nth-child(3) { left: -4px; bottom: -4px; } .sel i:nth-child(4) { right: -4px; bottom: -4px; }
.guide { position: absolute; background: #ff3ea5; }
.guide.gv { left: 50%; top: -12%; bottom: -12%; width: 1px; }
.guide.gh { left: -12%; right: -12%; top: 50%; height: 1px; opacity: 0.6; }
.ui-xywh div { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ui-xywh span { padding: 5px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.07); font-family: var(--font-mono); font-size: 0.72rem; }

.ui-audio-basic { grid-template-rows: 1fr auto; }
.ui-bigwave { position: relative; display: flex; align-items: center; gap: 3px; padding: 18px 22px; border-radius: 16px; background: #fff; box-shadow: 0 2px 10px -6px rgba(0, 0, 0, 0.25); overflow: hidden; }
.ui-bigwave i { flex: 1; height: var(--h); border-radius: 3px; background: color-mix(in srgb, var(--c) 85%, white); }
.ui-bigwave i.out { opacity: 0.25; }
.trim { position: absolute; top: 10px; bottom: 10px; width: 10px; border-radius: 4px; background: #ffd36b; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); }
.trim.l { left: 14%; } .trim.r { right: 10%; }
.ui-audio-adv { grid-template-columns: 2.2fr 1fr; }
.ui-mt { position: relative; display: grid; gap: 6px; padding: 8px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); }
.ui-mt .ui-track { padding-left: 56px; }
.ui-mt .ui-track span { left: calc(56px + var(--x) * (100% - 56px) / 100); width: calc(var(--w) * (100% - 56px) / 100 - 3px); }
.ui-mt .w { background: repeating-linear-gradient(90deg, #06b6d4 0 2px, rgba(6, 182, 212, 0.35) 2px 4px) !important; }
.ui-mt .w.v { background: repeating-linear-gradient(90deg, #f43f5e 0 2px, rgba(244, 63, 94, 0.35) 2px 4px) !important; }
.ui-mt .w.s { background: repeating-linear-gradient(90deg, #f59e0b 0 2px, rgba(245, 158, 11, 0.35) 2px 4px) !important; }
.ui-mt .w.r { background: repeating-linear-gradient(90deg, #8b8b94 0 1px, rgba(139, 139, 148, 0.25) 1px 4px) !important; }
.ui-mt .auto { position: absolute; left: 56px; right: 4px; top: 10%; height: 80%; width: calc(100% - 60px); pointer-events: none; }
.ui-mt .auto path { fill: none; stroke: #ffd36b; stroke-width: 2; vector-effect: non-scaling-stroke; }
.ui-audio-adv .ui-panels { display: grid; gap: 10px; align-content: start; }
.eq { width: 100%; height: auto; aspect-ratio: 2; }
.eq .g { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 0.5; }
.eq .c { fill: rgba(6, 182, 212, 0.18); stroke: #06b6d4; stroke-width: 1.6; }
.knobs { display: flex; justify-content: space-between; }
.knobs i { position: relative; width: 34px; height: 34px; border-radius: 50%; background: conic-gradient(from 220deg, #06b6d4 calc(var(--v) * 280deg), rgba(255, 255, 255, 0.12) 0 280deg, transparent 0); }
.knobs i::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #2a292e; }
.lufs { font: 760 1.25rem / 1 var(--font-display); color: #35e0a3; }

.ui-doc-basic { grid-template-columns: 170px 1fr; }
.ui-notes { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 14px; background: #f3efe9; }
.ui-notes span { padding: 9px 10px; border-radius: 9px; color: var(--ink-2); font-weight: 600; }
.ui-notes span.on { background: #fff6c7; color: var(--ink); }
.ui-note { padding: 22px 26px; border-radius: 14px; background: #fff; box-shadow: 0 2px 10px -6px rgba(0, 0, 0, 0.25); color: var(--ink); font-size: 0.92rem; }
.ui-note h4 { font: 760 1.25rem / 1.2 var(--font-display); letter-spacing: -0.02em; }
.ui-note .d { margin: 4px 0 14px; color: var(--ink-3); font-size: 0.8rem; }
.ui-note li { position: relative; padding: 5px 0 5px 28px; }
.ui-note li::before { content: ""; position: absolute; left: 0; top: 6px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #c9c2bd; }
.ui-note li.done { color: var(--ink-3); text-decoration: line-through; }
.ui-note li.done::before { border-color: var(--c); background: var(--c) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
.ui-note .iris-line { margin-top: 14px; color: var(--red-ink); font-size: 0.82rem; font-weight: 600; }
.ui-doc-adv { grid-template-rows: auto 1fr; }
.ui-ribbon { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); color: #d8d3d5; }
.ui-ribbon span, .ui-ribbon b, .ui-ribbon em, .ui-ribbon u { padding: 4px 9px; border-radius: 6px; background: rgba(255, 255, 255, 0.07); font-size: 0.78rem; }
.ui-ribbon .dd { min-width: 90px; }
.ui-ribbon .sep { width: 1px; height: 18px; padding: 0; background: rgba(255, 255, 255, 0.15); }
.ui-docarea { display: grid; grid-template-columns: 150px 1fr; gap: 12px; min-height: 0; }
.ui-outline { padding: 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); color: #bdb7ba; }
.ui-outline > p { margin-bottom: 6px; color: #8d878b; font-size: 0.7rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; }
.ui-outline span { padding: 6px 8px; border-radius: 6px; }
.ui-outline span.on { background: color-mix(in srgb, var(--c) 30%, transparent); color: #fff; }
.ui-pagewrap { display: grid; place-items: start center; overflow: hidden; border-radius: 10px; background: #2a292e; padding-top: 14px; }
.ui-page { width: 72%; min-height: 120%; padding: 26px 30px; border-radius: 3px; background: #fff; color: var(--ink); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
.ui-page h4 { margin-bottom: 12px; font: 760 1.05rem / 1.2 var(--font-display); }
.ui-page .l { height: 6px; margin: 8px 0; border-radius: 3px; background: #e8e3df; }
.ui-page .l.short { width: 62%; }
.ui-page .caret { display: inline-block; width: 2px; height: 14px; margin-left: 2px; background: var(--c); vertical-align: middle; animation: blink 1s steps(1) infinite; }

/* MARK: On-device tasks */

.desk {
  display: grid;
  grid-template-columns: minmax(230px, 0.9fr) 1.1fr minmax(230px, 0.9fr);
  gap: 24px;
  min-height: 440px;
  padding: 26px;
  border: 1px solid var(--glass-line);
  border-radius: var(--r-xl);
  background:
    radial-gradient(60% 70% at 50% 50%, rgba(255, 120, 135, 0.16), rgba(255, 120, 135, 0) 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.45));
  box-shadow: var(--glass-shadow), var(--lift-shadow);
}
.desk-files { display: flex; flex-direction: column; gap: 10px; }
.file {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px 10px 10px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 14px -8px rgba(60, 15, 22, 0.35);
  text-align: left;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.3s var(--ease-spring), opacity 0.3s, box-shadow 0.25s;
}
.file:hover { transform: translateX(4px); box-shadow: 0 10px 22px -10px rgba(60, 15, 22, 0.4); }
.file b { display: block; font-size: 0.95rem; font-weight: 640; }
.file small { display: block; color: var(--ink-3); font-size: 0.82rem; }
.file.is-used { opacity: 0.4; pointer-events: none; }
.file.is-ghost {
  position: fixed;
  z-index: 70;
  width: 240px;
  margin: 0;
  pointer-events: none;
  box-shadow: 0 24px 50px -16px rgba(60, 15, 22, 0.5);
  transform: rotate(-3deg) scale(1.04);
  transition: none;
}
.file.is-ghost.is-flying { transition: left 0.5s var(--ease-out), top 0.5s var(--ease-out), transform 0.5s var(--ease-out), opacity 0.5s; }
.file-ico {
  position: relative;
  flex: none;
  width: 38px;
  height: 46px;
  border-radius: 6px 12px 6px 6px;
  background: linear-gradient(180deg, #f6f3f1, #e9e4e0);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.file-ico::after {
  content: attr(data-kind);
  position: absolute;
  left: 3px; right: 3px; bottom: 6px;
  padding: 2px 0;
  border-radius: 4px;
  background: var(--k, #e93035);
  color: #fff;
  font-size: 0.56rem;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.03em;
}
.file-ico[data-kind="HEIC"], .file-ico[data-kind="JPG"], .file-ico[data-kind="PNG"] { --k: #8b5cf6; }
.file-ico[data-kind="MOV"] { --k: #f43f5e; }
.file-ico[data-kind="WAV"], .file-ico[data-kind="M4A"] { --k: #06b6d4; }
.file-ico[data-kind="TXT"] { --k: #10b981; }
.desk-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.slot-tasks { width: clamp(150px, 16vw, 200px); }
.desk-hint { color: var(--ink-3); font-size: 0.92rem; text-align: center; }
.desk.is-over .desk-hint { color: var(--red-ink); }
.desk-results { display: flex; flex-direction: column; gap: 10px; }
.desk-empty { padding: 18px; border: 1.5px dashed rgba(27, 23, 24, 0.14); border-radius: 18px; color: var(--ink-3); font-size: 0.9rem; text-align: center; }
.result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 10px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(16, 185, 129, 0.25);
  box-shadow: 0 6px 18px -10px rgba(16, 120, 90, 0.45);
  animation: result-in 0.7s var(--ease-spring) both;
}
.result b { display: block; font-size: 0.92rem; font-weight: 640; }
.result small { display: block; color: var(--ink-3); font-size: 0.8rem; }
.result .ocr { margin-top: 4px; color: var(--ink-2); font-family: var(--font-mono); font-size: 0.74rem; line-height: 1.35; white-space: pre-line; }
@keyframes result-in { from { opacity: 0; transform: translateX(-60px) scale(0.6); } to { opacity: 1; transform: none; } }

.marquee { margin-top: clamp(56px, 7vw, 88px); display: grid; gap: 12px; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-row { overflow: hidden; }
.marquee-track { display: flex; gap: 12px; width: max-content; animation: marquee 48s linear infinite; }
.marquee-row.reverse .marquee-track { animation-direction: reverse; animation-duration: 56s; }
.marquee-track > span {
  padding: 12px 20px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 1rem;
  font-weight: 520;
  white-space: nowrap;
}
.marquee-track > span::before { content: "“"; color: var(--red); }
.marquee-track > span::after { content: "”"; color: var(--red); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* MARK: Everyday */

.slot-everyday { flex: none; width: clamp(96px, 10vw, 128px); margin-right: 3%; }
.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.card {
  display: flex;
  flex-direction: column;
  min-height: 360px;
  padding: 28px;
  border: 1px solid var(--glass-line);
  border-radius: var(--r-l);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  transition: transform 0.4s var(--ease-spring), box-shadow 0.4s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--glass-shadow), var(--lift-shadow); }
.card h3 { margin-bottom: 10px; }
.card > p { color: var(--ink-2); font-size: 0.98rem; }
.widget { margin-top: auto; padding-top: 22px; }
.card-approve { grid-column: span 2; display: grid; grid-template-columns: 1.15fr 1fr; gap: 0 28px; }
.card-approve .widget { grid-column: 1 / -1; }
.approve-copy p { color: var(--ink-2); font-size: 0.98rem; }
.today { align-self: start; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(255, 255, 255, 0.95); }
.today-label { margin-bottom: 8px; color: var(--red-ink); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.today li { display: flex; align-items: baseline; gap: 12px; padding: 6px 0; font-size: 0.92rem; }
.today li + li { border-top: 1px solid var(--line); }
.today time { flex: none; min-width: 52px; color: var(--ink-3); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.today .rem time { color: #c2410c; }
.card-facts, .card-web { min-height: 300px; }

.approve { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.approve-card {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 260px;
  padding: 14px 16px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 6px 18px -10px rgba(60, 15, 22, 0.35);
}
.approve-card b { display: block; font-size: 0.98rem; }
.approve-card small { color: var(--ink-3); }
.approve-ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; background: #fff1e6; color: #f97316; }
.approve-ico svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.approve-actions { display: flex; gap: 8px; }
.approve-done { flex-basis: 100%; color: #0f9f6e; font-weight: 600; }
.approve-done button { margin-left: 8px; }
.approve.is-done .approve-actions { display: none; }

.memory-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.memory-list li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 6px 6px 13px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  font-size: 0.86rem;
  animation: msg-in 0.45s var(--ease-spring) both;
}
.memory-list li.out { animation: pop-out 0.35s ease-in forwards; }
@keyframes pop-out { to { opacity: 0; transform: scale(0.6); } }
.memory-list button {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border: 0;
  border-radius: 50%;
  background: rgba(127, 127, 127, 0.12);
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}
.memory-list button:hover { background: rgba(233, 48, 53, 0.15); color: var(--red-ink); }
.memory-form { display: flex; align-items: center; gap: 6px; height: 42px; padding: 0 5px 0 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 0.88rem; }
.memory-form > span { flex: none; color: var(--ink-3); }
.memory-form input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 0.9rem; color: var(--ink); }
.memory-form .send { width: 30px; height: 30px; }

.project-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ring {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: conic-gradient(var(--red) calc(var(--p) * 360deg), rgba(127, 127, 127, 0.15) 0);
  transition: --p 0.6s;
}
.ring span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; font-size: 0.72rem; font-weight: 650; }
.checks { display: grid; gap: 4px; }
.checks label { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; cursor: pointer; font-size: 0.94rem; transition: background 0.2s; }
.checks label:hover { background: rgba(255, 255, 255, 0.7); }
.checks input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 20px; height: 20px;
  margin: 0;
  border: 1.5px solid #c9c2bd;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.3s var(--ease-spring);
}
.checks input:checked {
  border-color: var(--red);
  background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
  transform: scale(1.08);
}
.checks label:has(input:checked) { color: var(--ink-3); }

.multi-msg { margin-left: auto; max-width: 92%; padding: 11px 14px; border-radius: 18px 18px 6px 18px; background: rgba(86, 78, 82, 0.86); color: #fff; font-size: 0.88rem; }
.multi-steps { display: grid; gap: 6px; margin-top: 12px; }
.multi-steps li {
  position: relative;
  padding: 9px 12px 9px 36px;
  border-radius: 12px;
  background: #fff;
  font-size: 0.88rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s, transform 0.5s var(--ease-spring);
}
.multi-steps li::before {
  content: "";
  position: absolute;
  left: 11px; top: 50%;
  width: 16px; height: 16px;
  margin-top: -8px;
  border-radius: 50%;
  background: #10b981 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.multi-steps li:last-child::before { background: #f59e0b; }
.multi-steps em { margin-left: 6px; color: #b45309; font-style: normal; font-size: 0.78rem; }
.multi.play li { opacity: 1; transform: none; }
.multi.play li:nth-child(2) { transition-delay: 0.6s; }
.multi.play li:nth-child(3) { transition-delay: 1.2s; }

.facts { display: grid; gap: 12px; justify-items: start; }
.facts .chip { height: 38px; }
.facts-answer { min-height: 3em; color: var(--ink); font-size: 0.95rem; }
.facts-answer small { display: block; margin-top: 4px; color: var(--ink-3); font-size: 0.8rem; }

.web-bar { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink-2); font-size: 0.88rem; }
.web-bar svg { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.web-results { display: grid; gap: 10px; margin-top: 14px; }
.web-results li { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.7); }
.web-results b, .web-results i { display: block; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #ece6e2 0%, #f8f5f3 40%, #ece6e2 80%) 0 0 / 200% 100%; animation: shimmer 1.6s linear infinite; }
.web-results b { width: 58%; background-color: #e3dcd7; }
.web-results i { width: 88%; }
.web-results li:nth-child(2) b { width: 46%; }
.web-results li:nth-child(3) b { width: 66%; }
.web.done .web-results b { animation: none; background: rgba(233, 48, 53, 0.55); }
.web.done .web-results i { animation: none; background: #e8e2de; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* MARK: Shortcut and voice */

.slot-summon { width: clamp(120px, 13vw, 168px); margin: 0 auto 26px; }
.summon .lede { margin-left: auto; margin-right: auto; }
.keys { display: flex; justify-content: center; gap: 14px; margin-top: 44px; }
.key {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width: 96px;
  height: 96px;
  padding: 14px 14px 12px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff, #f2eeeb);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.07), 0 7px 0 #ddd5cf, 0 14px 24px -8px rgba(60, 15, 22, 0.35);
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, background 0.2s;
}
.key span { font-size: 1.6rem; line-height: 1; font-weight: 500; }
.key small { color: var(--ink-3); font-size: 0.8rem; font-weight: 560; }
.key-space { width: min(320px, 40vw); justify-content: flex-end; }
.key.down {
  transform: translateY(6px);
  background: linear-gradient(180deg, #fff3f3, #ffe1e1);
  box-shadow: inset 0 -2px 0 rgba(233, 48, 53, 0.12), 0 1px 0 #e9c6c6, 0 6px 20px -6px rgba(233, 48, 53, 0.55);
}
.key.down small { color: var(--red-ink); }
.keys-hint { margin-top: 26px; color: var(--ink-3); }
.talk-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 36px; }
.talk {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 26px 0 22px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  font-weight: 620;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.25s var(--ease-spring), background 0.25s, color 0.25s;
}
.talk svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.talk.on { color: #fff; background: linear-gradient(180deg, #f5494e, #d9262c); transform: scale(1.05); }
.talk.on::before, .talk.on::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 2px solid rgba(233, 48, 53, 0.5);
  animation: talk-ring 1.6s ease-out infinite;
}
.talk.on::after { animation-delay: 0.8s; }
@keyframes talk-ring { from { transform: scale(1); opacity: 1; } to { transform: scale(1.5, 1.9); opacity: 0; } }
.talk-text { min-height: 1.6em; color: var(--ink-2); font-size: 1.1rem; font-weight: 520; }

/* MARK: Edge dock (dark) */

.dock { overflow: hidden; }
.dock::before {
  content: "";
  position: absolute;
  left: -200px; top: 20%;
  width: 600px; height: 600px;
  background: radial-gradient(closest-side, rgba(233, 48, 53, 0.2), rgba(233, 48, 53, 0));
  pointer-events: none;
}
.dock-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.seg { display: inline-flex; gap: 4px; margin-top: 30px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); }
.seg button { height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: none; color: var(--dark-ink-2); font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background 0.2s, color 0.2s; }
.seg button[aria-checked="true"] { background: rgba(255, 255, 255, 0.14); color: #fff; }

.desktop {
  position: relative;
  aspect-ratio: 16 / 10.5;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 90px -30px rgba(0, 0, 0, 0.9);
  user-select: none;
  -webkit-user-select: none;
  --edge-y: 50%;
  --edge-level: 0.8;
}
.wall {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 60% at 85% 100%, rgba(255, 140, 90, 0.85), rgba(255, 140, 90, 0) 70%),
    radial-gradient(60% 60% at 20% 80%, rgba(220, 70, 140, 0.75), rgba(220, 70, 140, 0) 70%),
    radial-gradient(80% 70% at 60% 10%, rgba(90, 80, 220, 0.9), rgba(90, 80, 220, 0) 70%),
    linear-gradient(160deg, #241b4d, #4a2a6e 50%, #a24a6a);
}
.menubar {
  position: absolute;
  left: 0; right: 0; top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 24px;
  padding: 0 14px;
  background: rgba(20, 14, 30, 0.28);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.72rem;
}
.menubar .apple { width: 10px; height: 12px; border-radius: 50% 50% 45% 45%; background: rgba(255, 255, 255, 0.9); }
.menubar .clock { margin-left: auto; font-variant-numeric: tabular-nums; }
.mock-window {
  position: absolute;
  border-radius: 12px;
  background: rgba(250, 248, 247, 0.92);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.7), 0 0 0 0.5px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.mw1 { left: 22%; top: 14%; width: 46%; height: 62%; }
.mw2 { right: 6%; top: 30%; width: 34%; height: 50%; background: rgba(36, 34, 40, 0.9); }
.mw-bar { display: flex; gap: 6px; height: 26px; padding: 8px 10px; background: rgba(0, 0, 0, 0.04); }
.mw-bar i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.mw-bar i:nth-child(2) { background: #febc2e; }
.mw-bar i:nth-child(3) { background: #28c840; }
.mw-body { padding: 18px 20px; }
.mw-body .l { display: block; height: 7px; margin: 0 0 11px; border-radius: 4px; background: #e2dcd8; }
.mw-body .w70 { width: 70%; height: 12px; background: #cfc7c2; }
.mw-body .w90 { width: 90%; } .mw-body .w80 { width: 80%; } .mw-body .w60 { width: 60%; } .mw-body .w85 { width: 85%; }
.mw-body.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14px; }
.mw-body.grid span { aspect-ratio: 1; border-radius: 8px; background: linear-gradient(135deg, #5a4a8c, #b0587a); }
.mw-body.grid span:nth-child(2n) { background: linear-gradient(135deg, #2f6f8f, #6ab0a0); }
.mw-body.grid span:nth-child(3n) { background: linear-gradient(135deg, #b8743a, #e8b35a); }

.edge-light {
  position: absolute;
  z-index: 3;
  left: 0;
  top: var(--edge-y);
  width: calc(46px + 46px * var(--lean, 0));
  height: 44%;
  transform: translateY(-50%);
  background: radial-gradient(ellipse 100% 50% at 0% 50%, rgba(255, 70, 82, calc(1 * var(--edge-level))), rgba(255, 70, 82, calc(0.5 * var(--edge-level))) 40%, rgba(255, 70, 82, 0) 78%);
  pointer-events: none;
  transition: width 0.25s var(--ease-out), opacity 0.3s;
  animation: breathe-light 4s ease-in-out infinite;
}
.edge-light::before {
  content: "";
  position: absolute;
  left: 0; top: 18%; bottom: 18%;
  width: 2.5px;
  border-radius: 2px;
  background: rgba(255, 190, 196, calc(0.95 * var(--edge-level)));
  box-shadow: 0 0 12px rgba(255, 70, 82, 0.9);
}
@keyframes breathe-light { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } }
.desktop.is-open .edge-light { opacity: 0; }
.dock-iris { position: absolute; z-index: 4; left: 0; top: 0; width: 0; height: 0; }
.dock-chat {
  position: absolute;
  z-index: 3;
  left: 112px;
  bottom: 5%;
  width: min(56%, 360px);
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(30, 26, 34, 0.7), rgba(20, 16, 24, 0.62));
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  backdrop-filter: blur(26px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 30px 60px -20px rgba(0, 0, 0, 0.8);
  color: #f2eef0;
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  transform-origin: left bottom;
  pointer-events: none;
  transition: opacity 0.35s, transform 0.5s var(--ease-spring);
}
.desktop.is-open .dock-chat { opacity: 1; transform: none; pointer-events: auto; }
.dock-close { position: absolute; right: 10px; top: 8px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #fff; cursor: pointer; }
.dock-msg { padding: 10px 12px; margin: 14px 0 10px; border-radius: 16px 16px 16px 6px; background: rgba(255, 255, 255, 0.1); font-size: 0.82rem; line-height: 1.4; }
.dock-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.dock-chips span { padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); font-size: 0.72rem; font-weight: 600; }
.dock-input { padding: 10px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.55); font-size: 0.8rem; }
.dock-input span { margin-right: 6px; }
.slot-dock { position: absolute; left: 6px; top: 50%; width: 32px; transform: translateY(-50%); }
.desk-tip {
  position: absolute;
  z-index: 2;
  right: 14px;
  bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.78rem;
  transition: opacity 0.4s;
}

/* MARK: Privacy */

.private-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.slot-private { width: 124px; margin: 0 0 22px -8px; }
.private-panel { display: grid; gap: 16px; }
.models { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.models button {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 8px;
  padding: 16px;
  border: 1px solid var(--glass-line);
  border-radius: var(--r-m);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  text-align: left;
  cursor: pointer;
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s;
}
.models button:hover { transform: translateY(-2px); }
.models button[aria-checked="true"] { box-shadow: var(--glass-shadow), 0 0 0 2px var(--red); }
.models b { font-size: 0.98rem; }
.models small { color: var(--ink-3); font-size: 0.82rem; align-self: center; }
.models .speed { grid-column: 1 / -1; position: relative; height: 6px; margin: 8px 0 4px; border-radius: 3px; background: rgba(127, 127, 127, 0.15); overflow: hidden; }
.models .speed::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--s) * 100%); border-radius: 3px; background: linear-gradient(90deg, #ff8a8f, #e93035); }
.models em { grid-column: 1 / -1; color: var(--ink-3); font-size: 0.8rem; font-style: normal; font-weight: 600; }
.models button[aria-checked="true"] em { color: var(--red-ink); }
.rules {
  padding: 8px;
  border: 1px solid var(--glass-line);
  border-radius: var(--r-m);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
}
.rules li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 12px; font-size: 0.96rem; }
.rules li + li { border-top: 1px solid var(--line); }
.toggle {
  position: relative;
  flex: none;
  width: 50px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: #34c759;
  cursor: pointer;
  transition: background 0.25s;
}
.toggle::after {
  content: "";
  position: absolute;
  left: 2px; top: 2px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transform: translateX(20px);
  transition: transform 0.35s var(--ease-spring);
}
.toggle.nope { animation: nope 0.5s; }
.toggle.nope::after { animation: nope-knob 0.6s var(--ease-spring); }
@keyframes nope { 30% { background: #e5e5ea; } 100% { background: #34c759; } }
@keyframes nope-knob { 30% { transform: translateX(6px); } 100% { transform: translateX(20px); } }

/* MARK: iPhone */

.iphone { background: linear-gradient(180deg, var(--paper), #f6edf2 60%, var(--paper)); }
.iphone-grid { display: grid; grid-template-columns: 1fr 0.9fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.slot-iphone { width: 118px; margin-top: 36px; margin-left: auto; margin-right: 10%; }
.phone { display: grid; place-items: center; }
.phone-frame {
  position: relative;
  width: 310px;
  height: 640px;
  padding: 12px;
  border-radius: 54px;
  background: linear-gradient(145deg, #3a383d, #1c1b1e 40%, #2c2a2f);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.12), 0 50px 90px -30px rgba(60, 15, 22, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.5);
  transform: rotate(3deg);
  transition: transform 0.8s var(--ease-out);
}
.phone:hover .phone-frame { transform: rotate(0deg) translateY(-6px); }
.phone-island { position: absolute; z-index: 3; left: 50%; top: 22px; width: 96px; height: 28px; margin-left: -48px; border-radius: 999px; background: #000; }
.phone-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 43px;
  overflow: hidden;
  background:
    radial-gradient(380px 380px at 10% 0%, rgba(255, 66, 82, 0.15), rgba(255, 66, 82, 0)),
    radial-gradient(460px 460px at 100% 100%, rgba(255, 122, 143, 0.16), rgba(255, 122, 143, 0)),
    linear-gradient(180deg, #fcf9fb, #f7edf4);
}
.phone-status { display: flex; justify-content: space-between; align-items: center; height: 50px; padding: 14px 28px 0 34px; font-size: 0.82rem; }
.phone-icons { display: flex; gap: 4px; }
.phone-icons i { width: 15px; height: 9px; border-radius: 2px; background: var(--ink); }
.phone-icons i:first-child { width: 12px; clip-path: polygon(0 100%, 100% 0, 100% 100%); border-radius: 0; }
.phone-head { display: flex; align-items: center; gap: 10px; padding: 10px 18px 8px; }
.phone-iris { position: relative; flex: none; width: 40px; height: 40px; }
.phone-head b { font-size: 1rem; }
.phone-dot { width: 7px; height: 7px; border-radius: 50%; background: #34c759; }
.phone-log { display: flex; flex: 1; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 6px 14px; overflow: hidden; }
.phone-log .msg { max-width: 88%; padding: 9px 12px; border-radius: 18px; font-size: 0.8rem; }
.phone-log .msg.me { border-bottom-right-radius: 6px; }
.phone-log .msg.bot { border-bottom-left-radius: 6px; }
.phone-log .chips { justify-content: flex-start; gap: 6px; }
.phone-log .chip { height: 30px; padding: 0 12px; font-size: 0.76rem; }
.phone-card { align-self: flex-start; width: 84%; padding: 8px; border-radius: 18px; background: #fff; box-shadow: 0 8px 20px -12px rgba(60, 15, 22, 0.4); animation: msg-in 0.5s var(--ease-spring) both; }
.phone-card .img { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; }
.phone-card .img b { position: absolute; left: 8px; bottom: 6px; color: #fff; font: 900 0.95rem / 0.95 var(--font-display); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
.phone-card .img i { position: absolute; right: 10%; bottom: 0; width: 28%; height: 70%; border-radius: 50% 50% 0 0; background: #f0c3a8; box-shadow: 0 -28px 0 -6px #3b2a2a inset; }
.phone-card p { padding: 6px 4px 2px; font-size: 0.72rem; color: var(--ink-3); }
.phone-actions { display: flex; justify-content: space-between; gap: 6px; padding: 8px 14px; }
.phone-actions span { flex: 1; padding: 7px 0; border-radius: 999px; background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.9); font-size: 0.66rem; font-weight: 650; text-align: center; }
.phone-input { display: flex; align-items: center; gap: 8px; margin: 2px 14px 26px; padding: 0 12px; height: 44px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 4px 14px -8px rgba(60, 15, 22, 0.35); color: var(--ink-3); font-size: 0.82rem; }
.phone-input em { flex: 1; font-style: normal; }
.phone-input svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* MARK: Craft */

.slot-craft { width: 108px; margin: 0 auto 22px; }
.slot-craft-2 { width: 96px; margin: 36px auto -30px; }
.bento-iris { display: grid; place-items: center; min-height: 240px; }
.slot-everyday-2 { width: clamp(110px, 11vw, 150px); }
.specs { display: grid; gap: 12px; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.specs .marquee-track { animation-duration: 70s; }
.specs .marquee-row:nth-child(2) .marquee-track { animation-direction: reverse; animation-duration: 80s; }
.specs .marquee-row:nth-child(3) .marquee-track { animation-duration: 64s; }
.specs .marquee-row:hover .marquee-track { animation-play-state: paused; }
.spec {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s, border-color 0.2s;
}
.spec:hover { transform: translateY(-3px); box-shadow: 0 12px 26px -14px rgba(60, 15, 22, 0.4); border-color: rgba(233, 48, 53, 0.35); }
.spec b { font-size: 0.82rem; color: var(--ink-3); font-weight: 600; }
.spec span { font-family: var(--font-display); font-size: 1.05rem; font-weight: 680; letter-spacing: -0.01em; white-space: nowrap; }
.apps-label { margin-top: 64px; color: var(--ink-3); font-weight: 600; text-align: center; }
.apps { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; max-width: 900px; margin: 16px auto 0; }
.apps li { padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.6); border: 1px solid var(--line); color: var(--ink-2); font-size: 0.9rem; }

/* MARK: Pricing */

.pricing { padding-bottom: clamp(48px, 7vw, 96px); }
.slot-pricing-head { display: none; }
.plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 940px;
  margin: 0 auto;
  align-items: stretch;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 34px 32px 32px;
  border-radius: 32px;
}
.plan-free {
  border: 1px solid var(--glass-line);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow), var(--lift-shadow);
}
.plan-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 1.6rem;
  font-weight: 760;
  letter-spacing: -0.025em;
}
.plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-height: 64px; margin-top: 18px; }
.plan-price b { font-family: var(--font-display); font-size: 3.4rem; font-weight: 800; line-height: 1; letter-spacing: -0.045em; }
.plan-price b.price-soon { font-size: 2.3rem; letter-spacing: -0.035em; }
.plan-price span { color: var(--ink-3); font-size: 0.95rem; }
.plan-tagline { margin-top: 10px; color: var(--ink-2); }
.plan-cta { width: 100%; margin-top: 24px; }
.plan-cta[aria-disabled="true"] { cursor: default; filter: saturate(0.85); }
.plan-cta[aria-disabled="true"]:hover { transform: none; }
.plan-list { display: grid; gap: 13px; margin-top: 28px; }
.plan-list li { position: relative; padding-left: 30px; font-size: 0.98rem; line-height: 1.4; }
.plan-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.12em;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: rgba(233, 48, 53, 0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23d42a33' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* Pro: a dark card inside a slowly turning ring of Iris light. */
.plan-pro-wrap { position: relative; }
.plan-glow {
  position: absolute;
  inset: -2px;
  border-radius: 34px;
  background: conic-gradient(from var(--spin), #ff424c, #ff7a8f, #c084fc, #7c8cff, #ff6b9a, #ff424c);
  animation: spin-ring 7s linear infinite;
}
.plan-glow::after {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: inherit;
  background: inherit;
  filter: blur(34px);
  opacity: 0.5;
  transition: opacity 0.4s;
}
.plan-pro-wrap:hover .plan-glow::after { opacity: 0.8; }
@keyframes spin-ring { to { --spin: 360deg; } }
.plan-pro {
  color: var(--dark-ink);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(233, 48, 53, 0.22), rgba(233, 48, 53, 0) 60%),
    linear-gradient(180deg, #1d1a21, #121015);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.plan-pro .plan-price span, .plan-pro .plan-tagline { color: var(--dark-ink-2); }
.ii-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #ffc2cc;
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0;
}
.ii-badge > span { color: #c9a2ff; }
.plan-list--pro li::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l2.2 6.8L21 12l-6.8 2.2L12 21l-2.2-6.8L3 12l6.8-2.2z' fill='white'/%3E%3C/svg%3E") center / 11px no-repeat,
    linear-gradient(135deg, #ff5960, #c084fc);
}
.plan-list--pro li.plan-all { color: var(--dark-ink-2); }
.plan-list--pro li.plan-all::before {
  background: rgba(255, 255, 255, 0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.slot-pricing { position: absolute; right: 26px; top: -84px; width: 96px; }

/* MARK: Final and footer */

.final { overflow: hidden; padding-bottom: clamp(110px, 14vw, 180px); }
.sky-final .blob-a { left: -10vw; top: 10%; }
.sky-final .blob-c { left: auto; right: -8vw; bottom: -10%; }
.final-inner { position: relative; display: flex; flex-direction: column; align-items: center; }
.slot-final { width: clamp(150px, 18vw, 230px); margin-bottom: 30px; }
.final-title {
  font-size: clamp(3rem, 7.6vw, 6.8rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.98;
}
.final .lede { margin-left: auto; margin-right: auto; }
.final-cta { margin-top: 36px; }
.confetti { position: absolute; left: 0; top: 0; pointer-events: none; border-radius: 50%; will-change: transform, opacity; }
.toast {
  position: fixed;
  z-index: 90;
  left: 50%;
  bottom: 28px;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(27, 23, 24, 0.9);
  color: #fff;
  font-size: 0.92rem;
  transform: translate(-50%, 20px);
  opacity: 0;
  transition: opacity 0.3s, transform 0.4s var(--ease-spring);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.footer { padding: 36px 0 48px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 0.88rem; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.footer .brand { color: var(--ink); font-size: 0.98rem; }
.to-top { text-decoration: none; }
.to-top:hover { color: var(--ink); }

/* MARK: Responsive */

@media (max-width: 1080px) {
  .nav-links a { padding: 8px 9px; }
  .ui { font-size: 0.72rem; }
  .ui-video-adv { grid-template-columns: 0.9fr 2.4fr 1.4fr; }
}

@media (max-width: 920px) {
  .nav-links { display: none; }
  .nav-links + .nav-actions { margin-left: auto; }
  /* The menu lines sit as far from the right edge as the app icon sits from the left, while the
     button keeps a 44 pt tap target that reaches into the padding. */
  .nav-inner { padding-right: 16px; }
  .menu-btn { display: grid; width: 44px; height: 44px; margin-right: -13px; }
  .nav-menu, .nav-scrim { display: block; }
  .nav-menu { left: auto; width: min(560px, calc(100% - 24px)); }
  .meet-grid, .direct-grid, .dock-grid, .private-grid, .iphone-grid { grid-template-columns: 1fr; }
  .meet-stage { max-width: 560px; width: 100%; margin: 0 auto; }
  .direct-demo { padding-left: 0; padding-bottom: 96px; }
  .slot-direct { left: 4px; bottom: -4px; width: 96px; }
  .produce-grid { grid-template-columns: 1fr; gap: 0; }
  .produce-sticky { top: 76px; z-index: 2; padding-bottom: 12px; background: linear-gradient(180deg, var(--dark) 80%, rgba(13, 12, 15, 0)); }
  .slot-produce { top: auto; right: -6px; bottom: -30px; width: 84px; }
  .bento-iris { min-height: 200px; }
  .plans { grid-template-columns: 1fr; max-width: 520px; gap: 30px; }
  .slot-pricing { display: none; }
  .slot-pricing-head { display: block; width: 104px; margin: 0 auto 20px; }
  .step { min-height: 56vh; }
  .stats { grid-template-columns: 1fr; }
  .studio-info { flex-direction: column; gap: 16px; }
  .studio-tabs { margin-bottom: 14px; }
  .slot-studio { position: static; width: 88px; margin: 0 auto 12px; }
  .pills { justify-content: flex-start; }
  .window-ask { display: none; }
  .window-body { aspect-ratio: 4 / 3.2; }
  .desk { grid-template-columns: 1fr; }
  .desk-center { order: -1; padding: 10px 0; }
  .bento { grid-template-columns: 1fr 1fr; }
  .card-approve { grid-column: span 2; display: grid; grid-template-columns: 1.15fr 1fr; gap: 0 28px; }
.card-approve .widget { grid-column: 1 / -1; }
.approve-copy p { color: var(--ink-2); font-size: 0.98rem; }
.today { align-self: start; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(255, 255, 255, 0.95); }
.today-label { margin-bottom: 8px; color: var(--red-ink); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.today li { display: flex; align-items: baseline; gap: 12px; padding: 6px 0; font-size: 0.92rem; }
.today li + li { border-top: 1px solid var(--line); }
.today time { flex: none; min-width: 52px; color: var(--ink-3); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.today .rem time { color: #c2410c; }
  .slot-iphone { margin: 26px 0 0; }
  .phone { margin-top: 10px; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .nav { top: calc(8px + env(safe-area-inset-top, 0px)); padding: 0 8px; }
  .nav-inner { height: 54px; gap: 8px; }
  .nav-menu { left: 8px; right: 8px; width: auto; padding: 10px 10px 12px; border-radius: 26px; }
  .menu-head { gap: 10px; padding: 2px 4px 8px; }
  .menu-iris { width: 34px; height: 34px; }
  .menu-head p { font-size: 1.05rem; }
  .menu-list { gap: 6px; }
  .menu-list a { padding: 9px 12px; border-radius: 16px; }
  .menu-list b { font-size: 0.95rem; }
  .menu-list small { font-size: 0.74rem; }
  .menu-cta { height: 48px; margin-top: 10px; }
  .nav-actions { gap: 4px; }
  .nav-actions .btn-sm { padding: 0 14px; }
  .brand span { font-size: 1rem; }
  /* Phone hero: a smaller Iris, scaled to the screen height, so the whole first screen fits. */
  .hero { padding: 76px 0 36px; }
  .slot-hero { width: clamp(88px, 17vh, 150px); width: clamp(88px, 17svh, 150px); margin-bottom: 8px; }
  .hero .eyebrow { margin-bottom: 8px; font-size: 0.9rem; }
  .hero .soon { gap: 8px; margin-bottom: 14px; padding: 5px 12px 5px 10px; font-size: 0.8rem; }
  .hero-sub { margin-top: 14px; font-size: 1rem; line-height: 1.45; }
  .ask-chips { gap: 8px; margin-top: 12px; }
  .scroll-cue { display: none; }
  .ask { height: 52px; margin-top: 18px; }
  .ask-chips .chip { height: 34px; padding: 0 12px; font-size: 0.84rem; }
  .moods { grid-template-columns: repeat(2, 1fr); }
  .chat { height: 560px; }
  .plan-row { grid-template-columns: 24px 58px 1fr; gap: 10px; padding: 6px 10px; }
  .plan-row em { display: none; }
  .plan-row strong { font-size: 0.82rem; }
  .pane { padding: 12px; }
  .approve-bar p { font-size: 0.74rem; }
  .studio-tabs { flex-wrap: nowrap; justify-content: flex-start; gap: 2px; width: 100%; margin-bottom: 14px; padding: 4px; overflow-x: auto; scrollbar-width: none; touch-action: pan-x pan-y; }
  .studio-tabs::-webkit-scrollbar { display: none; }
  .studio-tabs button { flex: none; }
  .studio-tabs button { height: 36px; padding: 0 11px; font-size: 0.84rem; }
  .studio-tabs button i { display: none; }
  .window-title { display: none; }
  .window-bar { justify-content: space-between; }
  .window-body { aspect-ratio: 3 / 3.4; padding: 10px; }
  .ui { inset: 10px; gap: 8px; }
  .ui-video-adv, .ui-image-adv, .ui-graphics-adv, .ui-audio-adv { grid-template-columns: 1fr; grid-template-rows: auto; }
  .ui-video-adv .ui-bin, .ui-video-adv .ui-panel, .ui-image-adv .ui-toolbar, .ui-graphics-adv .ui-toolbar { display: none; }
  .ui-video-adv { grid-template-rows: 1fr 46%; }
  .ui-image-adv .ui-panels, .ui-graphics-adv .ui-panels, .ui-audio-adv .ui-panels { grid-template-columns: 1fr 1fr; }
  .ui-image-adv .ui-panels > :nth-child(n + 3), .ui-graphics-adv .ui-panels > :nth-child(n + 3), .ui-audio-adv .ui-panels > :nth-child(n + 3) { display: none; }
  .ui-image-basic { grid-template-columns: 1fr; }
  .ui-side { display: none; }
  .ui-graphics-basic { grid-template-columns: 1fr; }
  .ui-rail { display: none; }
  .ui-templates { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); }
  .ui-doc-basic { grid-template-columns: 1fr; }
  .ui-notes { display: none; }
  .ui-docarea { grid-template-columns: 1fr; }
  .ui-outline { display: none; }
  .ui-page { width: 90%; }
  .bento { grid-template-columns: 1fr; }
  .card-approve { grid-column: auto; grid-template-columns: 1fr; }
  .bento-iris { grid-column: auto; min-height: 150px; }
  .today { margin-top: 18px; }
  .card { min-height: 0; padding: 24px; }
  .section-head.split { flex-direction: row; align-items: center; }
  .keys { gap: 8px; }
  .key { width: 72px; height: 72px; padding: 10px; border-radius: 16px; }
  .key span { font-size: 1.3rem; }
  .key small { font-size: 0.7rem; }
  .desktop { aspect-ratio: 4 / 3.6; }
  .mw1 { left: 18%; width: 60%; }
  .mw2 { display: none; }
  .dock-chat { width: calc(100% - 124px); }
  .models { grid-template-columns: 1fr; }
  .phone-frame { width: 280px; height: 580px; }
  .plan { padding: 28px 24px 26px; border-radius: 28px; }
  .plan-glow { border-radius: 30px; }
  .plan-price b { font-size: 3rem; }
  .plan-price b.price-soon { font-size: 2rem; }
}

/* Very short phones: the menu drops its one-line descriptions so everything fits without scrolling. */
@media (max-width: 920px) and (max-height: 640px) {
  .menu-list small { display: none; }
  .menu-list a { padding: 10px 12px; }
}

/* Short phones (an iPhone SE, or any phone with the browser bars showing). */
@media (max-width: 640px) and (max-height: 700px) {
  .slot-hero { width: clamp(76px, 15vh, 112px); width: clamp(76px, 15svh, 112px); }
  .hero-title { font-size: 2.85rem; }
  .hero-sub { font-size: 0.94rem; line-height: 1.42; }
}
@media (max-width: 640px) and (max-height: 600px) {
  .hero { padding-top: 70px; }
  .hero-title { font-size: 2.55rem; }
  .hero-sub { margin-top: 10px; font-size: 0.9rem; }
  .hero .soon { margin-bottom: 10px; }
  .ask { height: 48px; margin-top: 14px; }
  .ask-chips .chip { height: 32px; }
}

/* Short laptop windows: keep the whole hero, chips included, on the first screen. */
@media (min-width: 641px) and (max-height: 780px) {
  .hero { padding-top: 86px; }
  .slot-hero { width: clamp(130px, 22vh, 220px); }
  .hero-sub { margin-top: 16px; }
  .ask { height: 56px; margin-top: 20px; }
  .hero .soon { margin-bottom: 14px; }
  .ask-chips { margin-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}