.developer-editor {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: var(--deep);
      box-shadow: 0 15px 25px rgba(0, 0, 0, .12);
    }

    .developer-titlebar {
      display: flex;
      align-items: center;
      gap: 15px;
      min-height: 49px;
      padding: 12px 18px;
      border-bottom: 1px solid var(--line);
      color: var(--muted);
      font-size: .75rem;
    }

    .developer-lights {
      display: flex;
      gap: 5px;
      flex-shrink: 0;
    }

    .developer-lights i {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #e08775;
    }

    .developer-lights i:nth-child(2) {
      background: #d9bf70;
    }

    .developer-lights i:nth-child(3) {
      background: #92b07b;
    }

    .developer-mode {
      margin-left: auto;
      color: var(--text);
      font-size: .75rem;
    }

    .developer-editor-body {
      padding: 27px;
    }

    .developer-prompt {
      margin: 21px 0 0;
      color: var(--text);
      font-family: var(--mono);
      font-size: .9375rem;
      line-height: 1.85;
    }

    .developer-prompt p {
      overflow-wrap: anywhere;
    }

    .developer-prompt mark {
      background: var(--accent-tint);
      color: var(--accent);
      padding: .1em .25em;
      border-radius: 3px;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
    }

    .developer-prompt ul {
      padding: 0 0 0 18px;
      margin: 19px 0 0;
      font-size: .875rem;
      color: var(--muted);
    }

    .developer-prompt li+li {
      margin-top: 12px;
    }

    .agent-terminal .developer-titlebar {
      font-family: var(--mono);
    }

    .agent-terminal .developer-editor-body {
      padding: 23px 26px 20px;
    }

    .agent-terminal .developer-mode {
      color: var(--quiet);
    }

    .agent-command {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--text);
      font-family: var(--mono);
      font-size: .875rem;
    }

    .agent-command>span {
      color: var(--quiet);
    }

    .agent-terminal-greeting {
      margin-top: 13px;
      padding-bottom: 20px;
      border-bottom: 1px solid var(--line);
      color: var(--quiet);
      font-family: var(--mono);
      font-size: .8125rem;
    }

    .agent-terminal-workspace {
      display: grid;
      align-items: start;
      margin-top: 24px;
      min-height: 240px;
    }

    .agent-terminal-workspace>* {
      grid-area: 1 / 1;
      min-width: 0;
    }

    .agent-chat-input {
      align-self: start;
    }

    .agent-spoken {
      align-self: end;
      width: 100%;
      max-width: 390px;
      margin-inline: auto;
      padding: 0 8px;
      text-align: center;
      opacity: 0;
      visibility: hidden;
    }

    .agent-spoken p {
      color: var(--text);
      font-size: 1rem;
      line-height: 1.8;
    }

    .agent-spoken [data-spoken-word] {
      opacity: 0;
      transition: opacity .16s ease-out;
    }

    .agent-spoken [data-revealed="true"] {
      opacity: 1;
    }

    .agent-pasted {
      display: none;
      margin: 0;
      padding-left: 20px;
      position: relative;
      opacity: 0;
      visibility: hidden;
      transform: translateY(7px);
      transition: opacity .22s ease-out, transform .22s ease-out;
    }

    .agent-prompt-symbol {
      position: absolute;
      left: 0;
      top: 0;
      color: var(--accent);
    }

    .agent-pasted ul {
      margin-top: 14px;
      padding-left: 17px;
    }

    .agent-pasted li+li {
      margin-top: 9px;
    }

    .agent-working {
      display: none;
      align-items: baseline;
      gap: 9px;
      margin-top: 20px;
      font-family: var(--mono);
      font-size: .8125rem;
      line-height: 1.6;
      color: var(--accent);
    }

    .agent-working strong {
      font-weight: 600;
    }

    .agent-working-detail {
      color: var(--quiet);
    }

    .agent-working-dot {
      animation: agent-working-pulse 1.2s ease-in-out infinite;
    }

    .agent-terminal[data-demo-phase="ready"][data-demo-working="true"] .agent-working {
      display: flex;
    }

    .agent-terminal[data-demo-paused="true"] .agent-working-dot {
      animation-play-state: paused;
    }

    @keyframes agent-working-pulse {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: .4;
      }
    }

    .agent-indicator-slot {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 56px;
      margin-top: 19px;
      padding-top: 16px;
      font-family: var(--mono);
    }

    .agent-terminal-cursor {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 0 0 26px;
      color: var(--accent);
      font-size: 1rem;
      line-height: 1;
    }

    .agent-terminal-cursor i {
      display: block;
      width: 8px;
      height: 17px;
      background: var(--text);
      animation: agent-caret-blink 1s steps(1, end) infinite;
    }

    @keyframes agent-caret-blink {

      0%,
      49% {
        opacity: 1;
      }

      50%,
      100% {
        opacity: 0;
      }
    }

    .agent-recording-pill {
      display: none;
      align-items: center;
      gap: 9px;
      width: 190px;
      max-width: 100%;
      height: 38px;
      margin-inline: auto;
      padding: 5px 9px 5px 6px;
      border: 1.5px solid var(--record-ring);
      border-radius: 999px;
      background: var(--deep);
      box-shadow: 0 0 18px 2px var(--record-glow), inset 0 1px 0 #ffffff0b;
    }

    .agent-recording-mic {
      display: grid;
      place-items: center;
      flex: 0 0 24px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--record);
      color: var(--on-accent);
      box-shadow: 0 0 0 3px var(--record-ring);
    }

    .agent-recording-mic svg {
      width: 15px;
      height: 15px;
    }

    .agent-recording-mic .agent-transcribing-icon,
    .agent-transcribing-title,
    .agent-transcribing-spinner {
      display: none;
    }

    .agent-transcribing-title {
      flex: 1;
      color: var(--text);
      font-size: .75rem;
      font-weight: 600;
      white-space: nowrap;
    }

    .agent-transcribing-spinner {
      flex: 0 0 10px;
      width: 10px;
      height: 10px;
      border: 1.5px solid var(--text-faint);
      border-top-color: var(--text-spinner);
      border-radius: 50%;
      animation: agent-transcribing-spin .8s linear infinite;
    }

    .agent-terminal[data-demo-phase="transcribing"] .agent-recording-pill {
      display: flex;
      border-color: var(--accent-ring);
      box-shadow: 0 0 18px 2px var(--accent-glow), inset 0 1px 0 #ffffff0b;
    }

    .agent-terminal[data-demo-phase="transcribing"] .agent-recording-mic {
      background: var(--accent);
      color: var(--on-accent);
      box-shadow: 0 0 0 3px var(--accent-ring);
    }

    .agent-terminal[data-demo-phase="transcribing"] .agent-recording-icon,
    .agent-terminal[data-demo-phase="transcribing"] .agent-recording-wave,
    .agent-terminal[data-demo-phase="transcribing"] .agent-recording-time {
      display: none;
    }

    .agent-terminal[data-demo-phase="transcribing"] .agent-transcribing-icon,
    .agent-terminal[data-demo-phase="transcribing"] .agent-transcribing-title,
    .agent-terminal[data-demo-phase="transcribing"] .agent-transcribing-spinner {
      display: block;
    }

    .agent-terminal[data-demo-paused="true"] .agent-transcribing-spinner {
      animation-play-state: paused;
    }

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

    .agent-recording-wave {
      display: flex;
      flex: 1;
      min-width: 0;
      align-items: center;
      justify-content: space-between;
      gap: 2px;
      height: 18px;
    }

    .agent-recording-wave i {
      display: block;
      flex: 1 1 3px;
      max-width: 3px;
      height: 5px;
      border-radius: 3px;
      background: var(--meter-idle);
      transition: background-color .12s ease, height .12s ease;
    }

    .agent-recording-wave i[data-lit="true"] {
      height: 9px;
      background: var(--record);
    }

    .agent-recording-wave i[data-lit="true"]:nth-child(2n) {
      height: 12px;
    }

    .agent-recording-wave i[data-lit="true"]:nth-child(3n) {
      height: 7px;
    }

    .agent-recording-time {
      flex: 0 0 4ch;
      color: var(--text);
      font-size: .8125rem;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      line-height: 1;
    }

    .agent-demo-description {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
      border: 0;
    }

    .agent-terminal[data-demo-phase="recording"] .agent-spoken,
    .agent-terminal[data-demo-phase="transcribing"] .agent-spoken {
      opacity: 1;
      visibility: visible;
    }

    .agent-terminal[data-demo-phase="recording"] .agent-recording-pill {
      display: flex;
    }

    .agent-terminal[data-demo-phase="transcribing"] .agent-spoken {
      opacity: .55;
    }

    .agent-terminal[data-demo-phase="ready"] .agent-pasted {
      display: block;
      opacity: 1;
      visibility: visible;
      transform: none;
    }

    .agent-terminal[data-demo-phase="ready"] .agent-terminal-cursor {
      margin-top: 16px;
    }

    .agent-terminal[data-demo-paused="true"] .agent-recording-wave i {
      transition: none;
    }

    @media (prefers-reduced-motion: reduce) {

      .agent-pasted,
      .agent-spoken [data-spoken-word],
      .agent-recording-wave i {
        transition: none;
      }

      .agent-terminal-cursor i,
      .agent-transcribing-spinner,
      .agent-working-dot {
        animation: none;
      }
    }

    @media (max-width: 560px) {
      .agent-terminal .developer-editor-body {
        padding: 20px 18px 16px;
      }

      .agent-terminal .developer-mode {
        width: auto;
        margin-left: auto;
      }

      .agent-terminal-workspace {
        min-height: 270px;
      }

      .agent-spoken {
        padding: 0;
      }

      .agent-spoken p {
        font-size: .9375rem;
      }
    }

    .agent-terminal:focus-visible {
      outline: 3px solid var(--accent);
      outline-offset: 5px;
    }

    /* Indigo app theme. Primary tokens: MicMyDay/Models/AppTheme.swift.
   Overlay phases follow RecordingOverlay.swift: recording = record, transcribing = accent.
   Secondary web colors are derived for contrast. Screenshots remain the supplied originals. */
    :root {
      color-scheme: dark;
      --bg: #181B27;
      --deep: #141621;
      --surface: #1D2030;
      --raised: #282C40;
      --text: #EDEEF5;
      --muted: #B1B5CA;
      --quiet: #9AA0BB;
      --line: rgba(255, 255, 255, .09);
      --line-strong: rgba(255, 255, 255, .20);
      --accent: #A5AEFF;
      --accent-hover: #BBC1FF;
      --accent-press: #8C97F5;
      --on-accent: #1E2233;
      --accent-tint: rgba(165, 174, 255, .16);
      --accent-glow: rgba(165, 174, 255, .15);
      --accent-ring: rgba(165, 174, 255, .40);
      --record: #FFC61F;
      --record-ring: rgba(255, 198, 31, .40);
      --record-glow: rgba(255, 198, 31, .20);
      --ready: #45D6A0;
      --meter-idle: rgba(255, 255, 255, .10);
      --text-faint: rgba(237, 238, 245, .22);
      --text-spinner: rgba(237, 238, 245, .70);
      --hero-glow: rgba(165, 174, 255, .10);
      --glass: rgba(29, 32, 48, .94);
      --light-bg: #EDEEF5;
      --light-ink: #1E2233;
      --light-muted: #555D78;
      --light-accent: #2E3765;
      --light-line: rgba(30, 34, 51, .16);
      --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    }

    * {
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 112px
    }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font: 16px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      -webkit-font-smoothing: antialiased
    }

    h1,
    h2,
    h3,
    p,
    figure,
    blockquote {
      margin: 0
    }

    h1,
    h2,
    h3 {
      letter-spacing: -.05em;
      line-height: 1.08;
      font-weight: 550
    }

    a {
      color: inherit;
      text-underline-offset: 5px
    }

    button {
      font: inherit;
      cursor: pointer
    }

    button,
    a {
      -webkit-tap-highlight-color: transparent
    }

    button:focus-visible,
    a:focus-visible,
    summary:focus-visible,
    [tabindex]:focus-visible {
      outline: 3px solid var(--accent);
      outline-offset: 5px
    }

    img {
      display: block;
      max-width: 100%;
      height: auto
    }

    [hidden] {
      display: none !important
    }

    .wrap {
      width: min(1160px, calc(100% - 80px));
      margin-inline: auto
    }

    .skip {
      position: fixed;
      top: 12px;
      left: 12px;
      background: var(--accent);
      color: var(--bg);
      z-index: 100;
      padding: 12px;
      transform: translateY(-150%)
    }

    .skip:focus {
      transform: none
    }

    .nav {
      position: sticky;
      top: 16px;
      z-index: 20;
      width: min(1160px, calc(100% - 48px));
      margin: 20px auto 0;
      border: 1px solid var(--line-strong);
      background: var(--glass);
      backdrop-filter: blur(20px);
      border-radius: 18px
    }

    .nav-inner {
      min-height: 68px;
      padding: 10px 13px 10px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 25px
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: "Avenir Next", Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 1.2rem;
      font-weight: 800;
      letter-spacing: -.043em;
      text-decoration: none
    }

    .brand img {
      height: 32px;
      width: 32px
    }

    .brand-name {
      white-space: nowrap
    }

    .brand-period {
      color: #7c8531
    }

    .nav-links {
      display: flex;
      gap: 30px;
      font-size: .875rem;
      color: var(--muted)
    }

    .nav-links a {
      text-decoration: none
    }

    .nav-links a:hover {
      color: var(--accent)
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      padding: 14px 24px;
      border: 1px solid var(--line-strong);
      border-radius: 999px;
      text-decoration: none;
      font-size: .9375rem;
      line-height: 1.45;
      font-weight: 600;
      min-height: 51px;
      background: transparent;
      color: var(--text);
      transition: background .2s, transform .2s
    }

    .button:hover {
      background: var(--raised);
      transform: translateY(-2px)
    }

    .button-primary {
      background: var(--accent);
      border-color: var(--accent);
      color: var(--on-accent);
      box-shadow: 0 4px 22px var(--accent-glow)
    }

    .button-primary:hover {
      background: var(--accent-hover);
      color: var(--on-accent)
    }

    .button-small {
      font-size: .8125rem;
      min-height: 43px;
      padding: 11px 18px
    }

    .eyebrow {
      font: .8125rem/1.5 var(--mono);
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--accent)
    }

    .hero {
      text-align: center;
      padding: 83px 0 52px;
      background: radial-gradient(ellipse 50% 100% at 50% 110%, var(--hero-glow), transparent 85%)
    }

    .hero h1 {
      font-size: clamp(3.5rem, 6.7vw, 6.5rem);
      letter-spacing: -.065em;
      line-height: 1.04;
      margin: 24px auto 24px;
      font-weight: 550
    }

    .hero h1 span {
      color: var(--accent)
    }

    .hero h1 .hero-initial {
      color: inherit;
      margin-right: .02em
    }

    .hero .lead {
      color: var(--muted);
      max-width: 540px;
      margin: auto;
      font-size: 1.125rem;
      line-height: 1.75
    }

    .hero-underlined {
      position: relative;
      isolation: isolate;
      display: inline-block;
      white-space: nowrap
    }

    .hero-underlined svg {
      position: absolute;
      left: 0;
      top: 22px;
      width: 100%;
      height: .65em;
      z-index: -1;
      fill: var(--hero-underline, rgba(180, 180, 180, .6));
      opacity: .65;
      pointer-events: none
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 14px;
      align-items: center;
      margin-top: 28px
    }

    .hero-meta {
      margin-top: 20px;
      font-size: .8125rem;
      color: var(--quiet)
    }

    .meta-dot {
      margin: 0 10px;
      color: var(--quiet)
    }

    .workspace-section {
      padding: 4px 0 78px
    }

    .workspace {
      padding: 1px;
      border: 1px solid var(--line-strong);
      border-radius: 25px;
      overflow: hidden;
      background: linear-gradient(140deg, var(--raised), var(--deep));
      box-shadow: 0 32px 90px #0006;
      max-width: 970px;
      margin: auto
    }

    .workspace-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: 19px 25px;
      border-bottom: 1px solid var(--line)
    }

    .workspace-bar>p {
      color: var(--quiet);
      font-size: .8125rem
    }

    .tabs {
      display: flex;
      gap: 5px;
      flex-wrap: wrap
    }

    .tabs button {
      display: flex;
      align-items: center;
      gap: 8px;
      border: 0;
      padding: 10px 15px;
      border-radius: 10px;
      background: transparent;
      color: var(--muted);
      font-size: .875rem;
      min-height: 44px
    }

    .tabs img {
      width: 19px;
      height: 19px;
      object-fit: contain
    }

    .tabs button:hover {
      background: var(--raised);
      color: var(--text)
    }

    .tabs button[aria-selected="true"] {
      background: var(--accent-tint);
      color: var(--accent);
      box-shadow: inset 0 0 0 1px var(--line-strong)
    }

    .workspace-panel {
      padding: 27px;
      display: grid;
      grid-template-columns: 220px minmax(0, 1fr);
      gap: 35px;
      align-items: center;
      min-height: 477px
    }

    .workspace-copy {
      padding: 8px 0 8px 12px
    }

    .workspace-copy h2 {
      font-size: 1.65rem;
      letter-spacing: -.04em;
      margin-bottom: 18px
    }

    .workspace-copy p {
      color: var(--muted);
      font-size: .9375rem;
      line-height: 1.8
    }

    .workspace-copy p + p:not(.profile-tag) {
      margin-top: 1rem
    }

    .workspace-copy .profile-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding-top: 24px;
      font-size: .75rem;
      color: var(--accent)
    }

    .profile-tag:before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent)
    }

    .workspace .developer-editor {
      border-radius: 13px;
      background: var(--deep);
      border: 1px solid var(--line);
      box-shadow: 0 20px 25px #0002
    }

    .workspace .developer-titlebar {
      color: var(--muted);
      border-bottom-color: var(--line);
      min-height: 45px;
      background: var(--surface)
    }

    .workspace .developer-mode {
      color: var(--muted)
    }

    .workspace .agent-terminal-greeting {
      border-color: var(--line)
    }

    .workspace .agent-terminal-workspace {
      min-height: 208px
    }

    .workspace .agent-spoken {
      max-width: 380px
    }

    .workspace .agent-spoken p {
      font-size: 1rem
    }

    .workspace .agent-pasted {
      font-size: .875rem
    }

    .workspace .developer-prompt ul {
      font-size: .8125rem
    }

    .workspace .agent-indicator-slot {
      margin-top: 14px
    }

    .workspace .agent-terminal .developer-editor-body {
      padding: 21px 22px 15px
    }

    .workspace .agent-working {
      font-size: .75rem
    }

    .apps-section {
      padding-block: clamp(48px, 5vw, 72px);
      border-block: 1px solid var(--line)
    }

    .app-rail {
      text-align: center
    }

    .app-rail>p {
      color: var(--quiet);
      font-size: .8125rem
    }

    .app-rail-label {
      color: var(--quiet);
      font-size: .875rem;
      font-weight: 500;
      line-height: 1.5;
      letter-spacing: .1em
    }

    .app-rail>.app-rail-more {
      margin-top: 18px;
      font-size: .875rem;
      font-style: italic
    }

    .app-marquee {
      --app-gap: 34px;
      display: flex;
      width: 100%;
      overflow: hidden;
      gap: var(--app-gap);
      margin-top: 22px;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)
    }

    .app-marquee:focus-visible {
      outline: 2px solid var(--focus);
      outline-offset: 6px
    }

    .app-marquee-run {
      display: flex;
      flex: none;
      align-items: center;
      gap: var(--app-gap);
      list-style: none;
      margin: 0;
      padding: 0;
      animation: app-marquee-scroll 38s linear infinite
    }

    .app-marquee:hover .app-marquee-run,
    .app-marquee:focus-within .app-marquee-run {
      animation-play-state: paused
    }

    .app-marquee-run li {
      display: flex;
      flex: none;
      flex-direction: column;
      align-items: center;
      gap: 9px;
      width: 96px;
      color: var(--muted);
      font-size: .875rem;
      white-space: nowrap
    }

    .app-marquee-mark {
      width: 30px;
      height: 30px;
      background: currentColor;
      -webkit-mask: var(--app-icon) center / contain no-repeat;
      mask: var(--app-icon) center / contain no-repeat;
      opacity: .75;
      transition: opacity .18s ease
    }

    .app-marquee:hover .app-marquee-mark,
    .app-marquee:focus-within .app-marquee-mark {
      opacity: 1
    }

    @keyframes app-marquee-scroll {
      to { transform: translateX(calc(-100% - var(--app-gap))) }
    }

    @media (prefers-reduced-motion: reduce) {
      .app-marquee {
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none
      }
      .app-marquee-run {
        flex: 1 1 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 24px;
        animation: none
      }
      .app-marquee-run[aria-hidden="true"] { display: none }
      .app-marquee-mark { transition: none }
    }

    .section {
      padding: 95px 0;
      border-top: 1px solid var(--line)
    }

    .screenshot-new-tab {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%)
    }

    table {
      border-collapse: collapse;
      width: 100%;
      min-width: 590px;
      font-size: .8125rem;
      text-align: left
    }

    th,
    td {
      border-top: 1px solid var(--light-line);
      padding: 14px 14px 14px 0
    }

    th {
      font-weight: 600
    }

    td {
      color: var(--light-muted)
    }

    .thought-section {
      padding-block: 105px
    }

    .thought-head {
      text-align: center;
      max-width: 640px;
      margin: auto
    }

    .thought-head h2 {
      font-size: clamp(2.8rem, 4.5vw, 4.5rem);
      margin-top: 18px
    }

    .thought-head>p:last-child {
      color: var(--muted);
      margin: 22px auto 0;
      max-width: 510px;
      font-size: 1.0625rem
    }

    .faq-layout {
      display: grid;
      grid-template-columns: .65fr 1.35fr;
      gap: 85px
    }

    .faq-layout h2 {
      font-size: clamp(2.7rem, 4vw, 4rem);
      margin-top: 20px
    }

    .faq-layout .faq-contact {
      margin-top: 24px;
      color: var(--muted);
      font-size: .9375rem
    }

    .faq details {
      border-top: 1px solid var(--line);
      padding: 21px 0
    }

    .faq details:last-child {
      border-bottom: 1px solid var(--line)
    }

    .faq summary {
      list-style: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      cursor: pointer;
      font-size: 1rem;
      font-weight: 530
    }

    .faq summary:after {
      content: "+";
      color: var(--muted);
      font-size: 1.4rem
    }

    .faq details[open] summary:after {
      content: "−"
    }

    .faq details p {
      font-size: .9375rem;
      line-height: 1.85;
      color: var(--muted);
      margin-top: 16px;
      padding-right: 30px
    }

    summary::-webkit-details-marker {
      display: none
    }

    .final {
      text-align: center;
      padding: 90px 0 100px;
      background: radial-gradient(ellipse 45% 80% at 50% 65%, var(--accent-glow), transparent 85%)
    }

    .final img {
      width: 86px;
      height: 86px;
      margin: 0 auto 28px
    }

    .final h2 {
      font-size: clamp(3rem, 5.2vw, 5rem);
      line-height: 1.08
    }

    .final>div>p {
      color: var(--muted);
      font-size: 1.0625rem;
      margin-top: 20px
    }

    .final .hero-meta {
      font-size: .8125rem
    }

    .footer {
      border-top: 1px solid var(--line);
      padding: 34px 0
    }

    .footer-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px
    }

    .footer-links {
      display: flex;
      gap: 24px;
      flex-wrap: wrap;
      font-size: .8125rem;
      color: var(--muted)
    }

    .footer-links a {
      text-decoration: none
    }

    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      font-size: .75rem;
      color: var(--quiet);
      margin-top: 25px
    }

    @media(max-width:1050px) {
      .wrap {
        width: calc(100% - 64px)
      }

      .nav {
        width: calc(100% - 48px)
      }

      .workspace-panel {
        grid-template-columns: 180px minmax(0, 1fr);
        gap: 22px;
        padding: 22px
      }

      .workspace-copy {
        padding-left: 2px
      }

      .faq-layout {
        gap: 55px
      }
    }

    @media(max-width:780px) {
      .wrap {
        width: calc(100% - 40px)
      }

      .nav {
        width: calc(100% - 32px);
        top: 10px;
        margin-top: 14px;
        border-radius: 15px
      }

      .nav-inner {
        min-height: 61px;
        padding: 8px 9px 8px 14px;
        gap: 15px
      }

      .nav-links {
        display: none
      }

      .brand {
        font-size: 1.125rem
      }

      .brand img {
        width: 29px;
        height: 29px
      }

      .hero {
        padding: 60px 0 39px
      }

      .hero h1 {
        font-size: clamp(3rem, 8.7vw, 5rem);
        margin-top: 22px
      }

      .hero .lead {
        font-size: 1.0625rem;
        max-width: 475px
      }

      .hero-meta {
        font-size: .75rem
      }

      .workspace-bar {
        padding: 12px 15px;
        justify-content: center
      }

      .workspace-bar>p {
        display: none
      }

      .tabs {
        justify-content: center;
        gap: 0
      }

      .tabs button {
        padding: 10px 12px;
        font-size: .8125rem
      }

      .workspace-panel {
        grid-template-columns: 1fr;
        gap: 23px;
        min-height: 0;
        padding: 25px 20px
      }

      .workspace-copy {
        padding: 0;
        display: grid;
        grid-template-columns: 1fr 1.1fr;
        gap: 0 20px
      }

      .workspace-copy h2 {
        font-size: 1.55rem;
        grid-row: 1 / 3;
        margin: 0
      }

      .workspace-copy p {
        font-size: .875rem
      }

      .workspace-copy .profile-tag {
        padding-top: 12px;
        grid-column: 2
      }

      .workspace .agent-terminal-workspace {
        min-height: 215px
      }

      .workspace-section {
        padding-bottom: 60px
      }

      .section {
        padding: 68px 0
      }

      .thought-section {
        padding-block: 70px
      }

      .faq-layout {
        grid-template-columns: 1fr;
        gap: 32px
      }

      .faq-layout h2 br {
        display: none
      }

      .final {
        padding: 70px 0
      }

      .footer-row {
        align-items: start;
        flex-direction: column;
        gap: 25px
      }

      .footer-bottom {
        align-items: start;
        flex-direction: column;
        gap: 7px
      }
    }

    @media(max-width:440px) {
      .wrap {
        width: calc(100% - 30px)
      }

      .nav {
        width: calc(100% - 22px)
      }

      .button-small {
        font-size: .75rem;
        padding: 10px 13px
      }

      .hero {
        padding-top: 49px
      }

      .hero .eyebrow {
        font-size: .75rem
      }

      .hero h1 {
        font-size: clamp(2.65rem, 10.8vw, 3.2rem)
      }

      .hero-actions {
        gap: 10px
      }

      .button {
        font-size: .875rem;
        padding: 13px 20px
      }

      .hero-meta {
        line-height: 1.9
      }

      .meta-dot {
        margin: 0 5px
      }

      .workspace-panel {
        padding: 24px 13px 15px
      }

      .workspace-copy {
        display: block;
        padding: 0 8px
      }

      .workspace-copy h2 {
        margin-bottom: 13px
      }

      .workspace-copy .profile-tag {
        padding-top: 12px
      }

      .workspace {
        border-radius: 18px
      }

      .workspace .developer-titlebar {
        flex-wrap: wrap;
        gap: 7px;
        padding: 11px 13px
      }

      .workspace .developer-mode {
        font-size: .75rem;
        margin-left: auto
      }

      .workspace .agent-terminal .developer-editor-body {
        padding: 20px 16px 15px
      }

      .workspace .agent-terminal-workspace {
        min-height: 250px
      }

      .workspace .agent-working {
        font-size: .75rem
      }

      .workspace .agent-spoken p {
        font-size: .9375rem
      }

      .tabs button {
        font-size: .875rem;
        padding: 10px 11px
      }

      .tabs img {
        display: none
      }

      .footer-links {
        gap: 15px
      }
    }

    @media(prefers-reduced-motion:reduce) {
      html {
        scroll-behavior: auto
      }

      *,
      *:before,
      *:after {
        transition: none !important;
        animation: none !important
      }
    }

    .feature-carousel:not(.is-ready) {
      display: block
    }

    .button-primary:active {
      background: var(--accent-press);
      border-color: var(--accent-press)
    }

    /* Refined navigation and feature hierarchy, shared by the dark and bright versions. */
    .skip {
      color: var(--on-accent)
    }

    html {
      scroll-padding-top: 96px
    }

    :root {
      --focus: #A5AEFF;
      --on-record: #1E2233;
      --accent-ink: var(--accent)
    }

    .nav {
      top: 0;
      width: 100%;
      margin: 0;
      border: 0;
      border-bottom: 1px solid var(--line);
      border-radius: 0;
      background: var(--bg);
      backdrop-filter: none
    }

    .nav-inner {
      width: min(1160px, calc(100% - 80px));
      min-height: 76px;
      margin-inline: auto;
      padding: 13px 0;
      gap: 24px
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 12px
    }

    .github-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      flex-shrink: 0;
      border-radius: 50%;
      color: var(--muted)
    }

    .github-link svg {
      width: 22px;
      height: 22px
    }

    .github-link:hover {
      color: var(--text);
      background: var(--raised)
    }

    .theme-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      min-height: 42px;
      padding: 9px 12px;
      border: 1px solid var(--line-strong);
      border-radius: 999px;
      font-size: .875rem;
      line-height: 1.4;
      color: var(--muted);
      text-decoration: none
    }

    .theme-link svg {
      width: 17px;
      height: 17px;
      flex-shrink: 0
    }

    .theme-link:hover {
      color: var(--text);
      background: var(--raised)
    }

    button:focus-visible,
    a:focus-visible,
    summary:focus-visible,
    [tabindex]:focus-visible {
      outline-color: var(--focus)
    }

    .eyebrow,
    .workspace-copy .profile-tag {
      color: var(--accent-ink)
    }

    .nav-links a:hover {
      color: var(--accent-ink)
    }

    .tabs button[aria-selected="true"] {
      color: var(--accent-ink)
    }

    .agent-recording-mic {
      color: var(--on-record)
    }

    .agent-terminal[data-demo-phase="transcribing"] .agent-recording-mic {
      color: var(--on-accent)
    }

    @media(max-width:1050px) {
      .nav-inner {
        width: calc(100% - 64px)
      }

      .nav-links {
        gap: 22px
      }
    }

    @media(min-width:781px) and (max-width:900px) {
      .nav-inner,
      .nav-links {
        gap: 16px
      }

      .nav-actions {
        gap: 8px
      }
    }

    @media(max-width:780px) {
      html {
        scroll-padding-top: 84px
      }

      .nav {
        top: 0;
        width: 100%;
        margin: 0;
        border-radius: 0
      }

      .nav-inner {
        width: calc(100% - 40px);
        min-height: 66px;
        padding: 10px 0;
        gap: 15px
      }

      .nav-actions>.button {
        display: none
      }
    }

    @media(max-width:440px) {
      .nav {
        width: 100%
      }

      .nav-inner {
        width: calc(100% - 30px)
      }

      .nav-actions {
        gap: 0
      }

      .theme-link {
        font-size: .8125rem;
        padding: 9px 11px
      }
    }