@charset "UTF-8";
:root {
  color-scheme: dark;
  --bg: #141413;
  --deep: #111110;
  --panel: #212120;
  --line: #3b3b35;
  --aqua: #00d9ff;
  --navy: #081322;
  --text: #ecebe6;
  --secondary: #a8a69d;
  --muted: #77766f;
  --green: #9be8cf;
  --sans: "SF Pro Display","Inter","Helvetica Neue",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  --mono: "SFMono-Regular",ui-monospace,Menlo,Monaco,Consolas,monospace;
  --gutter: clamp(22px,6vw,92px);
  --ease: cubic-bezier(.2,.8,.2,1)
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  background: var(--bg)
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--text);
  background: var(--bg);
  font: 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility
}

button,input {
  font: inherit;
  color: inherit
}

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

a {
  color: inherit;
  text-decoration: none
}

button {
  cursor: pointer
}

button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 4px
}

::selection {
  color: #041115;
  background: var(--aqua)
}

[hidden] {
  display: none!important
}

.section-shell {
  width: min(100%,1440px);
  margin-inline: auto;
  padding-inline: var(--gutter)
}

.eyebrow,.micro-label,.section-index {
  margin: 0;
  color: var(--secondary);
  font: 10px/1.5 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px
}

.live-dot,.sample-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--aqua);
  box-shadow: 0 0 10px #00d9ff70
}

.skip-link {
  position: fixed;
  z-index: 200;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  transform: translateY(-160%);
  color: var(--deep);
  background: var(--aqua);
  font-weight: 700
}

.skip-link:focus {
  transform: translateY(0)
}

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

.scroll-progress {
  position: fixed;
  z-index: 110;
  inset: 0 0 auto;
  height: 2px;
  pointer-events: none
}

.scroll-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--aqua);
  box-shadow: 0 0 10px #00d9ffcc
}

.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0 19px;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 650;
  transition: transform .25s var(--ease),background .25s,border-color .25s
}

.button:hover {
  transform: translateY(-2px)
}

.button-primary {
  color: #041115;
  background: var(--aqua)
}

.button-primary:hover {
  background: #78eaff
}

.button-quiet {
  border-color: var(--line);
  color: var(--text);
  background: #11111059
}

.button-quiet:hover {
  border-color: #00d9ff99
}

.mini-button {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid #ecebe629;
  color: var(--secondary);
  background: #ffffff04;
  font-size: 10px;
  transition: .2s
}

.mini-button:hover {
  border-color: #00d9ff80;
  color: var(--text)
}

.mini-button-accent {
  border-color: #00d9ff80;
  color: var(--aqua);
  background: #00d9ff0f
}

.mini-button-stop {
  color: #e0a0a0
}

.text-button,.control-button,.history-action {
  padding: 0;
  border: 0;
  color: var(--aqua);
  background: transparent;
  font-size: 12px
}

.text-button span,.control-button span {
  margin-left: 5px;
  transition: transform .2s
}

.text-button:hover span,.control-button:hover span {
  transform: translate(2px,-2px)
}

.reveal {
  opacity: 1;
  transform: none
}

.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--ease),transform .7s var(--ease)
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none
}

.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  border-bottom: 1px solid #ecebe614;
  background: #141413e0;
  backdrop-filter: blur(16px)
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 760;
  letter-spacing: .09em
}

.brand-mark {
  width: 33px;
  height: 33px
}

.brand-suffix {
  color: var(--secondary);
  font-weight: 500;
  letter-spacing: .02em
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px,3vw,42px);
  color: var(--secondary);
  font-size: 11px
}

.primary-nav a {
  transition: color .18s
}

.primary-nav a:hover {
  color: var(--text)
}

.primary-nav .nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  color: var(--text)
}

.primary-nav .nav-cta:hover {
  border-color: var(--aqua);
  color: var(--aqua)
}

.menu-toggle {
  display: none
}

.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  min-height: min(840px,calc(100svh - 72px));
  grid-template-columns: minmax(0,1.04fr) minmax(400px,.96fr);
  align-items: center;
  padding-top: 48px;
  padding-bottom: 112px
}

.hero:before {
  position: absolute;
  z-index: -1;
  top: 5%;
  right: 0;
  width: 60%;
  height: 75%;
  border-radius: 50%;
  background: radial-gradient(ellipse,#081322dc,#08132200 68%);
  content: ""
}

.hero-copy {
  position: relative;
  z-index: 2;
  padding-bottom: 25px
}

.hero-wordmark {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  margin: 28px 0 4px -8px;
  font-size: clamp(96px,17.3vw,248px);
  font-weight: 760;
  line-height: .79;
  letter-spacing: -.115em
}

.wordmark-orbit {
  position: absolute;
  top: 47%;
  right: 10%;
  width: 22%;
  height: 17%;
  border: 1px solid #00d9ffcc;
  border-radius: 50%;
  transform: rotate(-34deg);
  box-shadow: 0 0 20px #00d9ff26;
  pointer-events: none
}

.hero h1 {
  margin: 31px 0 17px;
  font-size: clamp(34px,4.1vw,58px);
  font-weight: 480;
  line-height: 1.04;
  letter-spacing: -.06em
}

.hero h1 em,.heading-grid h2 em,.compare-intro h2 em,.companion-copy h2 em,.action-heading h2 em,.setup-heading h2 em,.availability-copy h2 em,.faq-heading h2 em,.closing-section h2 em {
  color: var(--secondary);
  font-style: normal
}

.hero-lede {
  max-width: 440px;
  margin: 0;
  color: var(--secondary);
  font-size: 15px;
  line-height: 1.75
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 27px
}

.hero-note {
  margin: 15px 0 0;
  color: var(--muted);
  font: 9px var(--mono)
}

.hero-visual {
  position: relative;
  display: grid;
  min-height: 530px;
  place-items: center;
  margin-top: 10px
}

.orbit-art {
  position: relative;
  width: min(100%,650px);
  aspect-ratio: 1;
  isolation: isolate
}

.orbit-aura {
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  background: radial-gradient(circle,#00d9ff1c,#08132270 37%,transparent 70%);
  filter: blur(5px)
}

.orbit-core {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 31%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 43% 37%,#1a2830 0 4%,#05080a 33%,#020304 66%,#15212b 82%,#00d9ff73 100%);
  transform: translate(-50%,-50%);
  box-shadow: 0 0 35px 12px #000b,0 0 52px #00d9ff29
}

.orbit-core span {
  position: absolute;
  top: 0;
  right: 22%;
  width: 18%;
  height: 18%;
  border-radius: 50%;
  background: #ffffff1f;
  filter: blur(4px)
}

.orbit-disk {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 71%;
  height: 28%;
  border-radius: 50%;
  background: linear-gradient(180deg,transparent 0 25%,#00d9ff2b 31%,#69efffe8 42%,#0c4a6829 52%,transparent 75%);
  filter: drop-shadow(0 0 14px #00d9ff9e);
  transform: translate(-50%,-50%) rotate(-30deg)
}

.orbit-plane {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: 88%;
  height: 38%;
  border: 1px solid #00d9ff9e;
  border-radius: 50%;
  transform: translate(-50%,-50%) rotate(-30deg)
}

.orbit-plane-back {
  z-index: 1;
  width: 75%;
  height: 36%;
  border-color: #77e1f554;
  border-right-color: #00d9ff;
  box-shadow: 0 0 18px #00d9ff26;
  animation: orbit-turn 36s linear infinite
}

.orbit-plane-front {
  border-top-color: #ecebe6c2;
  border-bottom-color: #00d9ff52;
  box-shadow: 0 0 20px #00d9ff26
}

.orbit-arc {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  width: 97%;
  height: 47%;
  border: 1px solid transparent;
  border-top-color: #00d9ff80;
  border-bottom-color: #ecebe62e;
  border-radius: 50%;
  transform: translate(-50%,-50%) rotate(32deg)
}

.orbit-arc-two {
  width: 104%;
  height: 52%;
  border-top-color: #ecebe629;
  border-bottom-color: #00d9ff3d;
  transform: translate(-50%,-50%) rotate(-8deg)
}

.orbit-spark {
  position: absolute;
  z-index: 6;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #d7fbff;
  box-shadow: 0 0 14px 4px #00d9ffb3
}

.orbit-spark-one {
  top: 28%;
  left: 18%
}

.orbit-spark-two {
  top: 72%;
  right: 16%;
  width: 3px;
  height: 3px
}

.orbit-spark-three {
  top: 20%;
  right: 22%;
  width: 2px;
  height: 2px
}

.orbit-crosshair {
  position: absolute;
  z-index: 6;
  top: 50%;
  left: 50%;
  color: #ecebe65c;
  font: 11px var(--mono);
  transform: translate(-50%,-50%)
}

.hero-foot {
  position: absolute;
  right: var(--gutter);
  bottom: 24px;
  left: var(--gutter);
  display: flex;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font: 9px var(--mono);
  letter-spacing: .12em
}

.hero-foot a {
  color: var(--secondary);
  letter-spacing: .02em
}

.hero-foot a span {
  margin-left: 6px;
  color: var(--aqua)
}

@keyframes orbit-turn {
  to {
    transform: translate(-50%,-50%) rotate(330deg)
  }
}

.intro-strip {
  display: grid;
  grid-template-columns: .8fr 1.2fr auto;
  align-items: center;
  gap: 42px;
  padding-top: 33px;
  padding-bottom: 33px;
  border-block: 1px solid var(--line)
}

.intro-strip .section-index {
  color: var(--aqua)
}

.intro-strip>p:nth-child(2) {
  max-width: 620px;
  margin: 0;
  color: var(--secondary);
  font-size: 14px
}

.strip-mark {
  color: var(--aqua);
  font-size: 28px
}

.section-heading {
  margin-bottom: 50px
}

.section-heading>.eyebrow {
  margin-bottom: 22px
}

.heading-grid {
  display: grid;
  grid-template-columns: minmax(0,1.12fr) minmax(240px,.7fr);
  gap: clamp(36px,8vw,125px);
  align-items: end
}

.heading-grid h2,.section-heading h2,.compare-intro h2,.companion-copy h2,.action-heading h2,.setup-heading h2,.availability-copy h2,.faq-heading h2,.closing-section h2 {
  margin: 0;
  font-size: clamp(42px,6vw,82px);
  line-height: .98;
  letter-spacing: -.065em;
  font-weight: 530
}

.heading-grid>p {
  max-width: 430px;
  margin: 0 0 4px;
  color: var(--secondary);
  font-size: 15px;
  line-height: 1.8
}

.workflow-section {
  padding-top: 145px;
  padding-bottom: 150px
}

.workflow-demo {
  position: relative;
  padding: 25px;
  border: 1px solid var(--line);
  background: linear-gradient(140deg,#212120f0,#111110f5 72%);
  box-shadow: 0 30px 80px #0003
}

.workflow-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 22px;
  border-bottom: 1px solid #ecebe61f
}

.demo-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--secondary);
  font: 9px var(--mono);
  letter-spacing: .11em;
  text-transform: uppercase
}

.sample-dot {
  width: 6px;
  height: 6px
}

.task-source {
  display: flex;
  max-width: 610px;
  align-items: center;
  gap: 15px;
  margin: 25px auto 0;
  padding: 15px 18px;
  border: 1px solid #00d9ff42;
  background: #00d9ff09
}

.task-icon {
  display: grid;
  width: 29px;
  height: 29px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #00d9ff59;
  border-radius: 50%;
  color: var(--aqua);
  font: 16px var(--mono)
}

.task-source .micro-label {
  color: var(--aqua);
  font-size: 8px
}

.task-source p {
  margin: 4px 0 0;
  font-size: 12px
}

.source-status {
  margin-left: auto;
  color: var(--muted);
  font: 8px var(--mono);
  letter-spacing: .12em
}

.branch-rail {
  position: relative;
  display: flex;
  width: 67%;
  height: 46px;
  justify-content: space-between;
  margin: 0 auto;
  border-bottom: 1px solid #00d9ff4d
}

.branch-rail:before,.branch-rail span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  background: #00d9ff4d;
  content: ""
}

.branch-rail:before {
  right: 50%;
  left: auto
}

.branch-rail i {
  position: relative;
  bottom: -4px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--aqua);
  border-radius: 50%;
  background: var(--panel)
}

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

.assistant-lane {
  min-height: 165px;
  padding: 17px;
  border: 1px solid var(--line);
  background: #111110cc;
  transition: .3s
}

.lane-head {
  display: flex;
  align-items: center;
  gap: 9px
}

.lane-number {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--aqua);
  font: 10px var(--mono)
}

.lane-head .micro-label {
  font-size: 7px
}

.lane-head h3 {
  margin: 3px 0 0;
  font-size: 13px;
  font-weight: 600
}

.lane-state {
  margin-left: auto;
  color: var(--muted);
  font: 8px var(--mono)
}

.assistant-lane>p {
  min-height: 32px;
  margin: 14px 0;
  color: var(--secondary);
  font-size: 10px
}

.lane-output {
  display: flex;
  gap: 5px
}

.output-line {
  width: 28%;
  height: 3px;
  background: #00d9ff3d
}

.output-line.short {
  width: 16%;
  opacity: .56
}

.review-landing {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 16px 18px;
  border-top: 1px solid #ecebe61f;
  background: #00d9ff06
}

.review-check {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #00d9ff70;
  border-radius: 50%;
  color: var(--aqua)
}

.review-landing .micro-label {
  color: var(--aqua);
  font-size: 8px
}

.review-landing p {
  margin: 3px 0 0;
  font-size: 11px
}

.review-landing p span {
  color: var(--aqua)
}

.review-landing>a {
  margin-left: auto;
  color: var(--secondary);
  font-size: 10px;
  white-space: nowrap
}

.review-landing>a:hover {
  color: var(--aqua)
}

.demo-disclaimer {
  margin: 15px 0 0;
  color: var(--muted);
  font: 9px/1.6 var(--mono)
}

.workflow-demo.is-running .assistant-lane {
  border-color: #00d9ff70;
  background: #00d9ff0a;
  transform: translateY(-3px)
}

.workflow-demo.is-running .lane-number {
  border-color: var(--aqua);
  box-shadow: 0 0 18px #00d9ff2e
}

.workflow-demo.is-running .lane-state,.workflow-demo.is-running .source-status {
  color: var(--aqua)
}

.workflow-demo.is-running .lane-output .output-line {
  animation: signal .85s var(--ease) both
}

.workflow-demo.is-running .assistant-lane:nth-child(2) .output-line {
  animation-delay: .12s
}

.workflow-demo.is-running .assistant-lane:nth-child(3) .output-line {
  animation-delay: .24s
}

@keyframes signal {
  from {
    width: 0;
    opacity: .15
  }
  to {
    opacity: 1
  }
}

.workspace-section,.control-room {
  padding-top: 120px;
  padding-bottom: 142px;
  background: var(--deep)
}

.workspace-section .section-heading {
  margin-bottom: 40px
}

.product-stage {
  display: grid;
  grid-template-columns: 46px minmax(0,1fr);
  gap: 20px
}

.stage-aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0
}

.vertical-note {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: var(--muted);
  font: 8px var(--mono);
  letter-spacing: .15em
}

.stage-aside p {
  display: none
}

.stage-aside-index {
  color: var(--aqua);
  font: 9px var(--mono)
}

.app-window {
  overflow: hidden;
  border: 1px solid #45453e;
  background: #171817;
  box-shadow: 0 30px 90px #0006
}

.window-topbar {
  display: grid;
  height: 41px;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 14px;
  border-bottom: 1px solid #ecebe617;
  background: #1d1e1c
}

.window-controls {
  display: flex;
  gap: 5px
}

.window-controls i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #55564f
}

.window-controls i:first-child {
  background: #bd726d
}

.window-controls i:nth-child(2) {
  background: #aa9560
}

.window-controls i:nth-child(3) {
  background: #6e9776
}

.window-title {
  color: var(--secondary);
  font: 8px var(--mono)
}

.window-title b {
  padding: 0 4px;
  color: var(--muted);
  font-weight: 400
}

.window-badge {
  justify-self: end;
  padding: 3px 6px;
  border: 1px solid #00d9ff3d;
  color: var(--aqua);
  font: 7px var(--mono);
  letter-spacing: .1em
}

.app-layout {
  display: grid;
  min-height: 490px;
  grid-template-columns: 220px minmax(0,1fr)
}

.app-sidebar {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 15px 12px;
  border-right: 1px solid #ecebe617;
  background: #151615
}

.project-switcher {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 7px 16px;
  font-size: 10px
}

.project-monogram {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid #00d9ff59;
  color: var(--aqua);
  font: 10px var(--mono)
}

.project-switcher small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font: 7px var(--mono)
}

.chevron {
  margin-left: auto;
  color: var(--muted)
}

.side-label {
  padding: 12px 8px 6px;
  color: var(--muted);
  font: 7px var(--mono);
  letter-spacing: .15em
}

.side-link {
  display: flex;
  min-height: 29px;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  border: 0;
  color: var(--secondary);
  background: transparent;
  text-align: left;
  font-size: 9px
}

.side-link>span {
  width: 12px;
  color: var(--muted);
  text-align: center
}

.side-link:hover,.side-link.is-active {
  color: var(--text);
  background: #ecebe60e
}

.side-link.is-active>span {
  color: var(--aqua)
}

.side-rule {
  height: 1px;
  margin: 12px 3px 2px;
  background: #ecebe61f
}

.session-link {
  display: grid;
  grid-template-columns: 7px 1fr;
  gap: 7px;
  align-items: center;
  padding: 8px;
  color: var(--secondary);
  font-size: 8px
}

.session-link small {
  grid-column: 2;
  color: var(--muted);
  font: 7px var(--mono)
}

.session-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--aqua)
}

.session-dot.blue {
  background: #91add4
}

.session-dot.gray {
  background: #77766f
}

.sidebar-bottom {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: auto;
  padding: 12px 8px 0;
  border-top: 1px solid #ecebe61f;
  color: var(--muted);
  font-size: 8px
}

.app-main {
  min-width: 0;
  padding: 23px clamp(16px,3vw,38px) 16px
}

.app-view-header {
  display: flex;
  align-items: end;
  justify-content: space-between
}

.app-view-header .micro-label {
  color: var(--muted);
  font-size: 7px
}

.app-view-header h3 {
  margin: 4px 0 0;
  font-size: 17px;
  font-weight: 540;
  letter-spacing: -.035em
}

.demo-live-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font: 7px var(--mono);
  text-transform: uppercase
}

.demo-live-label i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--aqua)
}

.app-tabs {
  display: flex;
  gap: clamp(13px,2.5vw,27px);
  overflow-x: auto;
  margin-top: 20px;
  border-bottom: 1px solid #ecebe61f
}

.app-tab {
  position: relative;
  flex: 0 0 auto;
  padding: 0 0 10px;
  border: 0;
  color: var(--muted);
  background: transparent;
  font-size: 9px
}

.app-tab:hover,.app-tab.is-active {
  color: var(--text)
}

.app-tab.is-active:after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--aqua);
  content: ""
}

.tab-panel {
  min-height: 330px;
  padding-top: 19px
}

.terminal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border: 1px solid #ecebe61a;
  background: #20211f
}

.terminal-toolbar>div {
  display: flex;
  align-items: center;
  gap: 7px
}

.terminal-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--aqua)
}

.terminal-toolbar strong {
  font: 8px var(--mono)
}

.terminal-path {
  color: var(--muted);
  font: 7px var(--mono)
}

.terminal-readonly {
  color: var(--muted);
  font: 6px var(--mono);
  letter-spacing: .09em
}

.terminal-body {
  min-height: 225px;
  padding: 13px 12px;
  border: 1px solid #ecebe61a;
  border-top: 0;
  background: #101110;
  color: #cccac1;
  font: 8px/1.9 var(--mono)
}

.terminal-body p {
  margin: 0
}

.prompt {
  padding-right: 6px;
  color: var(--aqua)
}

.muted-output {
  color: #777970
}

.tool-tag {
  display: inline-block;
  min-width: 40px;
  color: #91c3b4;
  font-size: 7px
}

.file-green {
  color: var(--green)
}

.terminal-cursor {
  display: inline-block;
  width: 5px;
  height: 10px;
  vertical-align: -2px;
  background: var(--aqua);
  animation: blink 1.2s steps(2,jump-none) infinite
}

@keyframes blink {
  50% {
    opacity: 0
  }
}

.terminal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  padding-top: 9px
}

.file-browser {
  display: grid;
  min-height: 302px;
  grid-template-columns: minmax(150px,.43fr) minmax(0,1fr);
  border: 1px solid #ecebe61a;
  background: #131413
}

.file-tree {
  padding: 12px 8px;
  border-right: 1px solid #ecebe61a
}

.file-tree-title {
  display: block;
  margin: 0 5px 9px;
  color: var(--muted);
  font: 7px var(--mono);
  letter-spacing: .1em
}

.file-node {
  display: block;
  width: 100%;
  padding: 7px 5px;
  overflow: hidden;
  border: 0;
  color: var(--secondary);
  background: transparent;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 7px var(--mono)
}

.file-node:hover,.file-node.is-selected {
  color: var(--aqua);
  background: #00d9ff0d
}

.file-node span {
  color: var(--muted)
}

.file-tree-note {
  display: block;
  margin: 12px 5px;
  color: var(--muted);
  font-size: 8px
}

.editor {
  display: flex;
  min-width: 0;
  flex-direction: column
}

.editor-tab {
  display: flex;
  justify-content: space-between;
  padding: 8px 11px;
  border-bottom: 1px solid #ecebe614;
  color: var(--secondary);
  font: 7px var(--mono)
}

.editor pre {
  flex: 1;
  margin: 0;
  padding: 13px 9px;
  overflow: auto;
  color: #d4d5d0;
  font: 8px/1.9 var(--mono)
}

.code-muted {
  color: #676a66
}

.code-key {
  color: #69d6ee
}

.code-fn {
  color: #e4d28f
}

.code-tag {
  color: #a5d9bd
}

.code-string {
  color: #da9d9b
}

.editor-footer {
  display: flex;
  justify-content: space-between;
  padding: 7px 10px;
  border-top: 1px solid #ecebe614;
  color: var(--muted);
  font: 6px var(--mono)
}

.runner-card,.history-list {
  border: 1px solid #ecebe61c;
  background: #151615
}

.runner-card {
  padding: 18px
}

.runner-card-top {
  display: flex;
  align-items: center;
  gap: 11px
}

.runner-icon {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 1px solid #00d9ff4d;
  color: var(--aqua)
}

.runner-card-top .micro-label {
  font-size: 7px
}

.runner-card h4 {
  margin: 3px 0 0;
  font: 10px var(--mono)
}

.runtime-chip {
  margin-left: auto;
  padding: 4px 6px;
  border: 1px solid #9be8cf3b;
  color: var(--green);
  font: 6px var(--mono)
}

.runner-card>p {
  color: var(--secondary);
  font-size: 9px
}

.runner-output {
  min-height: 75px;
  margin: 13px 0 0;
  padding: 11px;
  border: 1px solid #ecebe617;
  color: #9fc4b7;
  background: #0f100f;
  font: 8px/1.8 var(--mono);
  white-space: pre-wrap
}

.history-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  padding: 13px 15px;
  border-bottom: 1px solid #ecebe61f
}

.history-header .micro-label {
  font-size: 7px
}

.history-header h4 {
  margin: 3px 0 0;
  font-size: 13px;
  font-weight: 550
}

.history-count {
  color: var(--muted);
  font: 7px var(--mono)
}

.history-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 15px;
  padding: 12px 15px;
  border-bottom: 1px solid #ecebe612
}

.history-item:last-child {
  border-bottom: 0
}

.history-time {
  grid-column: 1/-1;
  color: var(--muted);
  font: 6px var(--mono);
  letter-spacing: .08em
}

.history-item strong {
  font-size: 9px;
  font-weight: 500
}

.history-result {
  grid-column: 1;
  color: var(--muted);
  font: 7px var(--mono)
}

.history-action,.history-check {
  grid-column: 2;
  grid-row: 2/4;
  align-self: center;
  font-size: 8px
}

.history-check {
  color: var(--green);
  font: 7px var(--mono)
}

.app-disclosure {
  margin: 12px 0 0;
  color: var(--muted);
  font: 7px/1.5 var(--mono)
}

.workspace-foot {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  margin: 22px 0 0 66px;
  padding-top: 16px;
  border-top: 1px solid var(--line)
}

.workspace-foot>span {
  flex: 0 0 auto;
  color: var(--aqua);
  font: 8px/1.8 var(--mono);
  letter-spacing: .08em
}

.workspace-foot p {
  max-width: 470px;
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  text-align: right
}

/* Compare and review */
.compare-section {
  display: grid;
  grid-template-columns: minmax(230px,.58fr) minmax(0,1.42fr);
  gap: clamp(38px,7vw,100px);
  align-items: center;
  padding-top: 150px;
  padding-bottom: 145px
}

.compare-intro>.eyebrow,.companion-copy>.eyebrow,.action-heading>.eyebrow,.availability-copy>.eyebrow,.faq-heading>.eyebrow {
  margin-bottom: 24px
}

.compare-intro h2 {
  font-size: clamp(42px,5.6vw,72px)
}

.compare-intro>p:not(.eyebrow) {
  max-width: 340px;
  margin: 22px 0;
  color: var(--secondary);
  font-size: 14px;
  line-height: 1.75
}

.security-note {
  display: block;
  max-width: 320px;
  padding-left: 12px;
  border-left: 1px solid var(--aqua);
  color: var(--muted);
  font: 9px/1.65 var(--mono)
}

.diff-demo {
  overflow: hidden;
  border: 1px solid #41413b;
  background: #191a19;
  box-shadow: 0 28px 80px #0004
}

.diff-topbar {
  display: flex;
  justify-content: space-between;
  padding: 12px 15px;
  border-bottom: 1px solid #ecebe61a;
  color: var(--secondary);
  font: 8px var(--mono)
}

.diff-topbar>span:first-child {
  display: flex;
  align-items: center;
  gap: 8px
}

.window-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--aqua)
}

.diff-sample-tag {
  color: var(--aqua);
  font-size: 7px;
  letter-spacing: .12em
}

.diff-layout {
  display: grid;
  grid-template-columns: minmax(175px,.52fr) minmax(0,1fr);
  min-height: 280px
}

.changed-files {
  padding: 15px 10px;
  border-right: 1px solid #ecebe61a
}

.changed-files>.micro-label {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 0 4px 10px;
  color: var(--muted);
  font-size: 7px
}

.changed-files>.micro-label b {
  color: var(--aqua);
  font-weight: 500;
  white-space: nowrap
}

.diff-file {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 7px;
  padding: 8px 5px;
  border: 0;
  border-left: 1px solid transparent;
  color: var(--secondary);
  background: transparent;
  text-align: left
}

.diff-file:hover,.diff-file.is-current {
  border-left-color: var(--aqua);
  color: var(--text);
  background: #00d9ff0d
}

.file-state {
  color: var(--green);
  font: 8px var(--mono)
}

.diff-file strong {
  display: block;
  font: 7px var(--mono)
}

.diff-file small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font: 6px var(--mono)
}

.file-arrow {
  margin-left: auto;
  color: var(--muted);
  font-size: 9px
}

.select-files {
  display: grid;
  gap: 9px;
  margin-top: 17px;
  padding: 13px 5px 0;
  border-top: 1px solid #ecebe61f
}

.select-files label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--secondary);
  font-size: 8px;
  cursor: pointer
}

.select-files input {
  width: 12px;
  height: 12px;
  margin: 0;
  accent-color: var(--aqua)
}

.diff-code {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 13px 14px
}

.diff-file-title {
  display: flex;
  justify-content: space-between;
  padding-bottom: 9px;
  border-bottom: 1px solid #ecebe61f;
  color: var(--secondary);
  font: 8px var(--mono)
}

.diff-file-title>span:last-child {
  color: var(--muted);
  font-size: 6px;
  letter-spacing: .1em
}

.diff-code pre {
  flex: 1;
  min-height: 150px;
  margin: 0;
  padding: 14px 0;
  overflow: auto;
  color: #c9c9c3;
  font: 8px/2 var(--mono);
  white-space: pre
}

.diff-line {
  display: block;
  padding: 0 7px
}

.diff-context {
  color: #96978f
}

.diff-remove {
  color: #e8b0b0;
  background: #a0393926
}

.diff-add {
  color: #b1e5d1;
  background: #2a886424
}

.diff-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  padding-top: 10px;
  border-top: 1px solid #ecebe61f
}

.diff-disclosure {
  margin: 0;
  padding: 10px 14px;
  border-top: 1px solid #00d9ff33;
  color: #b3c0bd;
  background: #00d9ff09;
  font: 8px/1.6 var(--mono)
}

/* Desktop companion */
.companion-section {
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(370px,1.1fr);
  gap: clamp(45px,8vw,130px);
  align-items: center;
  padding-top: 145px;
  padding-bottom: 145px;
  background: var(--deep)
}

.companion-copy h2 {
  font-size: clamp(44px,5.8vw,76px)
}

.companion-copy>p:not(.eyebrow) {
  max-width: 425px;
  margin: 23px 0;
  color: var(--secondary);
  font-size: 14px;
  line-height: 1.8
}

.feature-lines {
  display: grid;
  gap: 9px;
  margin: 27px 0;
  padding: 0;
  list-style: none;
  font-size: 11px
}

.feature-lines li:before {
  content: "—";
  margin-right: 10px;
  color: var(--aqua)
}

.companion-copy .replaceable-note {
  margin-top: 40px;
  color: var(--muted);
  font: 9px var(--mono)
}

.replaceable-note>span {
  color: var(--aqua)
}

.replaceable-note code {
  color: var(--secondary)
}

.companion-stage {
  overflow: hidden;
  border: 1px solid var(--line);
  background: #171918
}

.companion-topline {
  display: flex;
  justify-content: space-between;
  padding: 12px 13px;
  border-bottom: 1px solid #ecebe61f;
  color: var(--muted);
  font: 7px var(--mono);
  letter-spacing: .08em
}

.companion-presence {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--secondary);
  letter-spacing: 0
}

.companion-presence i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--aqua)
}

.desktop-frame {
  position: relative;
  display: grid;
  min-height: 280px;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(ellipse at 47% 62%,#1a4550,#122833 46%,#131b20 80%)
}

.desktop-frame:before {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(#ecebe607 1px,transparent 1px),linear-gradient(90deg,#ecebe607 1px,transparent 1px);
  background-size: 33px 33px;
  content: ""
}

.desktop-frame:after {
  position: absolute;
  right: -15%;
  bottom: -75%;
  left: -15%;
  height: 130%;
  border: 1px solid #00d9ff29;
  border-radius: 50%;
  box-shadow: 0 0 0 28px #00d9ff06,0 0 0 58px #00d9ff05;
  content: ""
}

.desktop-icons {
  position: absolute;
  top: 19px;
  right: 16px;
  display: grid;
  gap: 11px;
  color: #ecebe675;
  font-size: 12px
}

.desktop-companion {
  position: relative;
  z-index: 2;
  display: flex;
  width: 116px;
  flex-direction: column;
  align-items: center;
  transition: width .35s var(--ease)
}

.desktop-companion[data-companion-size="large"] {
  width: 150px
}

.companion-orbit {
  position: absolute;
  top: 41%;
  left: 50%;
  width: 150%;
  height: 46%;
  border: 1px solid #00d9ffa6;
  border-radius: 50%;
  transform: translate(-50%,-50%) rotate(-31deg);
  box-shadow: 0 0 15px #00d9ff26;
  animation: companion-drift 5s ease-in-out infinite alternate
}

.desktop-companion.is-still .companion-orbit {
  animation: none;
  opacity: .55
}

.companion-image {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 6/7;
  border: 1px solid #ecebe633;
  border-radius: 45% 45% 36% 36%;
  object-fit: cover;
  box-shadow: 0 18px 48px #0005
}

.companion-name {
  margin-top: 8px;
  padding: 4px 7px;
  border: 1px solid #ecebe630;
  background: #111110c7;
  font: 7px var(--mono)
}

.desktop-dock {
  position: absolute;
  z-index: 3;
  bottom: 12px;
  left: 50%;
  display: flex;
  gap: 8px;
  padding: 6px 11px;
  border: 1px solid #ecebe629;
  border-radius: 9px;
  background: #0e1112a0;
  transform: translateX(-50%)
}

.desktop-dock i {
  width: 15px;
  height: 15px;
  border: 1px solid #00d9ff47;
  border-radius: 4px;
  background: linear-gradient(145deg,#00d9ff47,#ecebe614)
}

@keyframes companion-drift {
  to {
    transform: translate(-50%,-47%) rotate(-24deg)
  }
}

.companion-controls {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 12px 14px;
  border-block: 1px solid #ecebe61f
}

.control-row {
  display: flex;
  min-height: 37px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px;
  border-right: 1px solid #ecebe61f;
  color: var(--secondary);
  font-size: 9px
}

.control-row:first-child {
  padding-left: 0
}

.control-row:last-child {
  border: 0
}

.control-button {
  white-space: nowrap;
  font-size: 8px
}

.segmented-control {
  display: flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line)
}

.segmented-control button {
  width: 20px;
  height: 21px;
  padding: 0;
  border: 0;
  color: var(--muted);
  background: transparent;
  font: 8px var(--mono)
}

.segmented-control button[aria-pressed="true"] {
  color: var(--deep);
  background: var(--aqua)
}

.toggle-control {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  color: var(--muted);
  background: transparent;
  font-size: 8px
}

.toggle-control>span {
  position: relative;
  width: 25px;
  height: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #101110;
  transition: .2s
}

.toggle-control>span:after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--secondary);
  content: "";
  transition: .2s
}

.toggle-control[aria-checked="true"]>span {
  border-color: #00d9ffa6;
  background: #00d9ff24
}

.toggle-control[aria-checked="true"]>span:after {
  background: var(--aqua);
  transform: translateX(11px)
}

.toggle-control b {
  color: var(--secondary);
  font-weight: 500
}

.message-draft {
  padding: 12px 14px 10px
}

.message-draft label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font: 7px var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase
}

.message-draft>div {
  display: flex;
  border: 1px solid var(--line)
}

.message-draft input {
  width: 100%;
  min-width: 0;
  padding: 8px 9px;
  border: 0;
  color: var(--text);
  background: #111211;
  font-size: 9px
}

.message-draft button {
  padding: 0 10px;
  border: 0;
  border-left: 1px solid var(--line);
  color: var(--aqua);
  background: #181a19;
  font-size: 8px
}

.message-draft p {
  min-height: 12px;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 8px
}

/* Mac action-plan sample */
.action-section {
  display: grid;
  grid-template-columns: minmax(260px,.72fr) minmax(0,1.28fr);
  gap: clamp(42px,9vw,145px);
  align-items: center;
  padding-top: 140px;
  padding-bottom: 150px
}

.action-heading h2 {
  font-size: clamp(43px,5.7vw,74px)
}

.action-heading>p:last-child {
  max-width: 390px;
  margin: 22px 0 0;
  color: var(--secondary);
  font-size: 14px;
  line-height: 1.8
}

.action-plan {
  border: 1px solid var(--line);
  background: linear-gradient(130deg,#202120,#171817);
  box-shadow: 0 26px 65px #0003
}

.plan-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-bottom: 1px solid #ecebe61f;
  color: var(--secondary);
  font: 8px var(--mono);
  letter-spacing: .08em
}

.plan-top>span:first-child {
  display: flex;
  align-items: center;
  gap: 7px
}

.plan-top b {
  color: var(--muted);
  font-weight: 400
}

.plan-shield {
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  border: 1px solid #00d9ff66;
  border-radius: 50%;
  color: var(--aqua);
  font-style: normal
}

.plan-review {
  color: var(--aqua);
  font-size: 7px;
  letter-spacing: .02em
}

.plan-steps {
  margin: 0;
  padding: 0 16px;
  list-style: none
}

.plan-steps li {
  display: grid;
  min-height: 57px;
  grid-template-columns: 32px minmax(0,1fr) auto;
  gap: 9px;
  align-items: center;
  border-bottom: 1px solid #ecebe612
}

.step-no {
  color: var(--muted);
  font: 8px var(--mono)
}

.plan-steps strong {
  display: block;
  font-size: 10px;
  font-weight: 550
}

.plan-steps small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font: 7px var(--mono)
}

.plan-steps button {
  padding: 5px 8px;
  border: 1px solid #ecebe626;
  color: var(--secondary);
  background: transparent;
  font-size: 8px
}

.plan-steps button:hover {
  border-color: var(--aqua);
  color: var(--aqua)
}

.plan-output {
  min-height: 33px;
  margin: 0 16px;
  padding: 10px 0;
  color: var(--muted);
  font: 8px/1.55 var(--mono)
}

.plan-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid #ecebe61f;
  color: var(--muted);
  font-size: 8px
}

/* Themes, voice and keep-awake */
.control-room {
  padding-top: 140px;
  padding-bottom: 150px
}

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

.control-grid article {
  min-width: 0;
  padding: clamp(16px,2.2vw,28px);
  border: 1px solid var(--line);
  background: linear-gradient(150deg,#212120b8,#141413cc)
}

.feature-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.feature-card-head .eyebrow {
  font-size: 8px
}

.feature-glyph {
  color: var(--aqua);
  font-size: 18px
}

.control-grid h3 {
  margin: 23px 0 10px;
  font-size: 20px;
  font-weight: 520;
  line-height: 1.1;
  letter-spacing: -.045em
}

.control-grid article>p {
  min-height: 60px;
  margin: 0;
  color: var(--secondary);
  font-size: 10px;
  line-height: 1.7
}

.mini-preview {
  --mini-bg: #131716;
  --mini-panel: #202625;
  --mini-text: #dfe9e8;
  --mini-accent: #00d9ff;
  overflow: hidden;
  margin-top: 18px;
  border: 1px solid #ecebe624;
  color: var(--mini-text);
  background: var(--mini-bg);
  transition: background .25s,color .25s
}

.mini-preview[data-theme="paper"] {
  --mini-bg: #e9e8e1;
  --mini-panel: #f7f6f1;
  --mini-text: #282b2a;
  --mini-accent: #087f92
}

.mini-preview[data-theme="aqua"] {
  --mini-bg: #071925;
  --mini-panel: #0e2b3b;
  --mini-text: #defaff;
  --mini-accent: #60eaff
}

.mini-preview-top {
  display: flex;
  height: 27px;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  border-bottom: 1px solid #7fa0a23b;
  background: var(--mini-panel);
  font: 6px var(--mono)
}

.mini-orbit {
  width: 9px;
  height: 9px;
  border: 1px solid var(--mini-accent);
  border-radius: 50%;
  box-shadow: 4px 0 0 -2px var(--mini-accent)
}

.mini-preview-body {
  display: grid;
  min-height: 87px;
  grid-template-columns: 24px 1fr
}

.mini-preview-sidebar {
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 10px 7px;
  border-right: 1px solid #7fa0a233
}

.mini-preview-sidebar i {
  height: 3px;
  background: var(--mini-accent);
  opacity: .4
}

.mini-preview-content {
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 10px
}

.mini-preview-content span {
  width: 63%;
  height: 3px;
  background: #7fa0a261
}

.mini-preview-content span:nth-child(2) {
  width: 43%
}

.mini-preview-content span:nth-child(3) {
  width: 54%
}

.mini-preview-content b {
  margin-top: 3px;
  color: var(--mini-accent);
  font-size: 8px;
  font-weight: 500
}

.theme-options {
  display: flex;
  gap: 5px;
  margin-top: 12px
}

.theme-options button {
  flex: 1;
  min-height: 27px;
  padding: 0 5px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: transparent;
  font-size: 8px
}

.theme-options button[aria-pressed="true"] {
  border-color: #00d9ff8c;
  color: var(--aqua);
  background: #00d9ff0f
}

.voice-demo,.awake-setting {
  margin-top: 17px;
  padding: 12px;
  border: 1px solid #ecebe61c;
  background: #141615
}

.voice-transcript {
  min-height: 65px
}

.voice-transcript .micro-label {
  font-size: 7px
}

.voice-transcript p {
  margin: 5px 0 0;
  color: var(--text);
  font-size: 10px
}

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

.voice-actions .mini-button {
  min-height: 29px;
  padding: 0 7px;
  font-size: 7px
}

.voice-note {
  min-height: 30px;
  margin: 9px 0 0!important;
  color: var(--muted);
  font-size: 8px!important
}

.awake-setting {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px
}

.awake-setting>div {
  display: flex;
  align-items: center;
  gap: 9px
}

.awake-icon {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid var(--line);
  color: var(--aqua)
}

.awake-setting strong {
  display: block;
  font-size: 9px;
  font-weight: 500
}

.awake-setting small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 7px
}

.awake-status {
  min-height: 28px;
  margin: 9px 0 0!important;
  color: var(--muted);
  font-size: 8px!important
}

/* Setup, availability, answers */
.setup-section {
  padding-top: 145px;
  padding-bottom: 140px
}

.setup-heading {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 18px 30px;
  margin-bottom: 44px
}

.setup-heading .eyebrow {
  grid-column: 1/-1
}

.setup-heading h2 {
  font-size: clamp(44px,5.7vw,75px)
}

.setup-steps {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-block: 1px solid var(--line)
}

.setup-steps li {
  position: relative;
  display: flex;
  min-height: 180px;
  flex-direction: column;
  padding: 17px 18px 18px 0;
  border-right: 1px solid var(--line)
}

.setup-steps li:not(:first-child) {
  padding-left: 18px
}

.setup-steps li:last-child {
  border: 0
}

.setup-steps li>span {
  color: var(--aqua);
  font: 9px var(--mono)
}

.setup-steps h3 {
  margin: 36px 0 6px;
  font-size: 14px;
  font-weight: 550
}

.setup-steps p {
  max-width: 215px;
  margin: 0;
  color: var(--secondary);
  font-size: 10px;
  line-height: 1.7
}

.setup-steps li>i {
  position: absolute;
  right: 17px;
  bottom: 16px;
  color: var(--muted);
  font-style: normal
}

.provider-note {
  margin: 17px 0 0;
  color: var(--muted);
  font: 8px var(--mono)
}

.availability-section {
  position: relative;
  display: grid;
  min-height: 570px;
  grid-template-columns: .78fr 1.22fr;
  align-items: center;
  gap: 45px;
  overflow: hidden;
  padding-top: 88px;
  padding-bottom: 88px;
  border-block: 1px solid var(--line);
  background: radial-gradient(ellipse at 18% 53%,#081322d9,transparent 40%)
}

.availability-orbit {
  position: relative;
  display: grid;
  width: min(100%,400px);
  aspect-ratio: 1;
  place-items: center;
  margin: auto
}

.availability-orbit:before,.availability-orbit:after {
  position: absolute;
  inset: 10%;
  border: 1px solid #00d9ff3b;
  border-radius: 50%;
  transform: rotate(-35deg) scaleY(.42);
  content: ""
}

.availability-orbit:after {
  inset: 20% -4%;
  border-color: #ecebe62b;
  transform: rotate(29deg) scaleY(.46)
}

.availability-orbit>div {
  width: 30%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 39% 34%,#354350,#05080a 45%,#020304 78%);
  box-shadow: 0 0 30px 5px #00d9ff1f,0 0 0 22px #00d9ff09
}

.availability-copy {
  max-width: 620px
}

.availability-copy h2 {
  font-size: clamp(44px,5.4vw,70px)
}

.availability-copy>p:not(.eyebrow) {
  max-width: 530px;
  margin: 21px 0 27px;
  color: var(--secondary);
  font-size: 14px;
  line-height: 1.75
}

.availability-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line)
}

.availability-specs>div {
  display: grid;
  gap: 4px;
  padding: 12px 10px 12px 0;
  border-bottom: 1px solid var(--line)
}

.availability-specs>div:nth-child(even) {
  padding-left: 15px;
  border-left: 1px solid var(--line)
}

.availability-specs span {
  color: var(--muted);
  font: 7px var(--mono);
  letter-spacing: .1em
}

.availability-specs strong {
  font-size: 10px;
  font-weight: 500
}

.availability-specs strong .live-dot {
  width: 5px;
  height: 5px;
  margin-right: 5px;
  vertical-align: 1px
}

.availability-cta {
  margin-top: 20px;
  padding: 13px 15px;
  border: 1px solid #00d9ff66;
  background: #00d9ff0b
}

.availability-cta p {
  margin: 0;
  color: var(--aqua);
  font-size: 13px;
  font-weight: 550
}

.availability-cta span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font: 7px var(--mono)
}

.faq-section {
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  gap: clamp(45px,10vw,150px);
  padding-top: 145px;
  padding-bottom: 150px
}

.faq-heading h2 {
  font-size: clamp(42px,5vw,68px)
}

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

.faq-list details:first-child {
  border-top: 1px solid var(--line)
}

.faq-list summary {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  font-size: 12px;
  cursor: pointer;
  list-style: none
}

.faq-list summary::-webkit-details-marker {
  display: none
}

.faq-list summary span {
  color: var(--aqua);
  font: 17px var(--mono);
  transition: transform .2s
}

.faq-list details[open] summary span {
  transform: rotate(45deg)
}

.faq-list details p {
  max-width: 650px;
  margin: -2px 32px 17px 0;
  color: var(--secondary);
  font-size: 11px;
  line-height: 1.75
}

/* Last word */
.closing-section {
  position: relative;
  display: flex;
  min-height: 600px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  padding-top: 90px;
  padding-bottom: 90px;
  border-top: 1px solid var(--line);
  background: radial-gradient(ellipse at 80% 50%,#081322e6,transparent 48%)
}

.closing-orb {
  position: absolute;
  top: 50%;
  right: 6%;
  display: grid;
  width: min(42vw,500px);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid #00d9ff40;
  border-radius: 50%;
  transform: translateY(-50%) rotate(-26deg) scaleY(.42);
  box-shadow: 0 0 0 23px #00d9ff06,0 0 0 46px #00d9ff05
}

.closing-orb:before {
  position: absolute;
  inset: 10%;
  border: 1px solid #ecebe61f;
  border-radius: 50%;
  content: ""
}

.closing-orb span {
  width: 35%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,#07090c 45%,#010203 70%);
  box-shadow: 0 0 35px 12px #000c,0 0 45px #00d9ff1f
}

.closing-section>.eyebrow,.closing-section h2,.closing-section>p:not(.eyebrow),.closing-section .button,.closing-disclaimer {
  position: relative;
  z-index: 1
}

.closing-section>.eyebrow {
  color: var(--aqua)
}

.closing-section h2 {
  margin: 20px 0 17px;
  font-size: clamp(52px,8vw,106px)
}

.closing-section>p:not(.eyebrow) {
  max-width: 420px;
  margin: 0 0 22px;
  color: var(--secondary);
  font-size: 14px
}

.closing-disclaimer {
  margin-top: 12px;
  color: var(--muted);
  font: 8px var(--mono)
}

.site-footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 13px 30px;
  align-items: center;
  padding-top: 22px;
  padding-bottom: 23px;
  border-top: 1px solid var(--line)
}

.site-footer .brand {
  font-size: 11px
}

.site-footer .brand-mark {
  width: 27px;
  height: 27px
}

.site-footer>p {
  margin: 0;
  color: var(--muted);
  font-size: 9px;
  text-align: center
}

.back-top {
  color: var(--secondary);
  font-size: 9px
}

.back-top:hover {
  color: var(--aqua)
}

.footer-copyright {
  grid-column: 1/-1;
  color: #77766f;
  font: 7px var(--mono)
}

.toast {
  position: fixed;
  z-index: 150;
  right: 18px;
  bottom: 18px;
  max-width: min(360px,calc(100vw - 36px));
  padding: 12px 15px;
  border: 1px solid #00d9ff73;
  color: var(--text);
  background: #111110f5;
  box-shadow: 0 12px 38px #0006;
  font-size: 11px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: .2s
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0)
}

@media(max-width:1050px) {
  :root {
    --gutter: clamp(24px,5vw,56px)
  }
  .hero {
    grid-template-columns: minmax(0,1fr) minmax(340px,.88fr)
  }
  .hero-wordmark {
    font-size: clamp(100px,16vw,180px)
  }
  .app-layout {
    grid-template-columns: 185px minmax(0,1fr)
  }
  .companion-section {
    grid-template-columns: minmax(0,.85fr) minmax(350px,1.15fr);
    gap: 45px
  }
  .control-grid {
    grid-template-columns: repeat(2,minmax(0,1fr))
  }
  .awake-card {
    grid-column: 1/-1
  }
  .awake-card>p {
    min-height: auto!important
  }
  .awake-setting {
    max-width: 460px
  }
}

@media(max-width:800px) {
  .site-header {
    min-height: 64px
  }
  .primary-nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 9px var(--gutter) 17px;
    border-bottom: 1px solid var(--line);
    background: #111110fa
  }
  .primary-nav.is-open {
    display: flex
  }
  .primary-nav a {
    padding: 13px 0;
    border-bottom: 1px solid #ecebe612
  }
  .primary-nav .nav-cta {
    justify-content: space-between;
    margin-top: 8px;
    padding: 12px;
    border: 1px solid var(--line)
  }
  .menu-toggle {
    display: grid;
    width: 40px;
    height: 40px;
    align-content: center;
    justify-items: center;
    gap: 6px;
    border: 1px solid var(--line);
    background: transparent
  }
  .menu-toggle span {
    width: 15px;
    height: 1px;
    background: var(--text);
    transition: transform .2s
  }
  .menu-toggle[aria-expanded=true] span:first-child {
    transform: translateY(3.5px) rotate(45deg)
  }
  .menu-toggle[aria-expanded=true] span:last-child {
    transform: translateY(-3.5px) rotate(-45deg)
  }
  .hero {
    min-height: auto;
    grid-template-columns: 1fr;
    padding-top: 72px;
    padding-bottom: 100px
  }
  .hero-copy {
    max-width: 700px
  }
  .hero-wordmark {
    font-size: clamp(125px,24vw,210px)
  }
  .hero-visual {
    min-height: 410px;
    margin-top: -20px
  }
  .orbit-art {
    width: min(100%,500px)
  }
  .intro-strip {
    grid-template-columns: 1fr auto;
    gap: 14px 25px
  }
  .intro-strip>p:nth-child(2) {
    grid-column: 1
  }
  .strip-mark {
    grid-column: 2;
    grid-row: 1/3
  }
  .heading-grid {
    grid-template-columns: 1fr;
    gap: 18px
  }
  .heading-grid>p {
    max-width: 600px
  }
  .compare-section,.action-section,.faq-section {
    grid-template-columns: 1fr;
    gap: 35px
  }
  .compare-intro>p:not(.eyebrow) {
    max-width: 540px
  }
  .companion-section {
    grid-template-columns: 1fr;
    gap: 35px
  }
  .companion-copy>p:not(.eyebrow) {
    max-width: 620px
  }
  .companion-stage {
    max-width: 640px
  }
  .availability-section {
    grid-template-columns: .65fr 1.35fr;
    gap: 24px
  }
  .availability-orbit {
    width: 100%
  }
  .faq-section {
    gap: 30px
  }
  .setup-heading {
    grid-template-columns: 1fr;
    gap: 18px
  }
  .setup-heading .eyebrow {
    grid-column: auto
  }
}

@media(max-width:600px) {
  :root {
    --gutter: 21px
  }
  body {
    font-size: 15px
  }
  .site-header {
    min-height: 60px
  }
  .brand-mark {
    width: 30px;
    height: 30px
  }
  .hero {
    padding-top: 58px;
    padding-bottom: 86px
  }
  .hero .eyebrow {
    font-size: 8px
  }
  .hero-wordmark {
    margin: 31px 0 6px -4px;
    font-size: clamp(92px,25vw,145px)
  }
  .hero h1 {
    margin-top: 25px;
    font-size: clamp(36px,9.5vw,48px)
  }
  .hero-lede {
    max-width: 350px;
    font-size: 13px
  }
  .hero-actions {
    gap: 8px;
    margin-top: 21px
  }
  .button {
    min-height: 45px;
    padding: 0 14px;
    font-size: 11px
  }
  .hero-visual {
    min-height: 330px;
    margin: 8px -18px -14px
  }
  .orbit-art {
    width: min(100%,380px)
  }
  .hero-foot {
    right: var(--gutter);
    left: var(--gutter);
    gap: 12px;
    font-size: 7px
  }
  .hero-foot a {
    white-space: nowrap
  }
  .intro-strip {
    padding-block: 22px
  }
  .intro-strip .section-index {
    font-size: 8px
  }
  .intro-strip>p:nth-child(2) {
    font-size: 12px
  }
  .section-heading {
    margin-bottom: 32px
  }
  .section-heading>.eyebrow,.compare-intro>.eyebrow,.companion-copy>.eyebrow,.action-heading>.eyebrow,.setup-heading .eyebrow,.availability-copy>.eyebrow,.faq-heading>.eyebrow {
    margin-bottom: 17px
  }
  .heading-grid h2,.section-heading h2,.compare-intro h2,.companion-copy h2,.action-heading h2,.setup-heading h2,.availability-copy h2,.faq-heading h2 {
    font-size: clamp(40px,10vw,54px)
  }
  .heading-grid>p,.compare-intro>p:not(.eyebrow),.companion-copy>p:not(.eyebrow),.action-heading>p:last-child,.availability-copy>p:not(.eyebrow) {
    font-size: 12px
  }
  .workflow-section,.compare-section,.companion-section,.action-section,.setup-section,.faq-section {
    padding-top: 92px;
    padding-bottom: 95px
  }
  .workflow-demo {
    padding: 15px
  }
  .workflow-topline {
    padding-bottom: 14px
  }
  .task-source {
    gap: 10px;
    margin-top: 17px;
    padding: 12px 10px
  }
  .task-source p {
    max-width: 210px;
    font-size: 10px
  }
  .source-status {
    font-size: 6px
  }
  .branch-rail {
    width: 76%;
    height: 30px
  }
  .assistant-lanes {
    grid-template-columns: 1fr;
    gap: 7px
  }
  .assistant-lane {
    min-height: 0;
    padding: 11px 12px
  }
  .assistant-lane>p {
    min-height: 0;
    margin: 8px 0
  }
  .lane-output {
    max-width: 190px
  }
  .review-landing {
    flex-wrap: wrap;
    gap: 9px;
    padding: 12px 3px
  }
  .review-landing p {
    font-size: 9px;
    line-height: 1.6
  }
  .review-landing>a {
    margin-left: 38px
  }
  .demo-disclaimer {
    font-size: 7px
  }
  .workspace-section,.control-room {
    padding-top: 92px;
    padding-bottom: 95px
  }
  .product-stage {
    display: block
  }
  .stage-aside {
    display: none
  }
  .app-window {
    margin: 0 -8px
  }
  .window-topbar {
    height: 36px;
    padding: 0 9px
  }
  .window-title {
    font-size: 7px
  }
  .app-layout {
    display: block;
    min-height: 0
  }
  .app-sidebar {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 3px;
    padding: 7px;
    border-right: 0;
    border-bottom: 1px solid #ecebe61a
  }
  .project-switcher,.side-label,.side-rule,.session-link,.sidebar-bottom {
    display: none
  }
  .side-link {
    justify-content: center;
    min-height: 32px;
    gap: 5px;
    padding: 0 3px;
    font-size: 7px
  }
  .side-link>span {
    width: auto;
    font-size: 10px
  }
  .app-main {
    padding: 15px 11px 11px
  }
  .app-view-header h3 {
    font-size: 15px
  }
  .demo-live-label {
    font-size: 6px
  }
  .app-tabs {
    gap: 18px;
    margin-top: 14px
  }
  .app-tab {
    padding-bottom: 8px;
    font-size: 8px
  }
  .tab-panel {
    min-height: 0;
    padding-top: 12px
  }
  .terminal-toolbar {
    align-items: flex-start;
    gap: 4px;
    padding: 7px
  }
  .terminal-toolbar>div {
    flex-wrap: wrap
  }
  .terminal-path {
    flex-basis: 100%;
    margin-left: 13px
  }
  .terminal-readonly {
    font-size: 5px
  }
  .terminal-body {
    min-height: 200px;
    padding: 10px 7px;
    font-size: 7px
  }
  .terminal-actions {
    flex-wrap: wrap
  }
  .mini-button {
    min-height: 32px;
    font-size: 8px
  }
  .file-browser {
    grid-template-columns: 110px minmax(0,1fr);
    min-height: 260px
  }
  .file-tree {
    padding: 9px 5px
  }
  .file-node {
    font-size: 6px;
    white-space: normal;
    overflow-wrap: anywhere
  }
  .editor pre {
    padding: 10px 5px;
    font-size: 6px
  }
  .runner-card {
    padding: 12px
  }
  .runtime-chip {
    font-size: 5px
  }
  .history-item {
    gap: 4px 7px;
    padding: 10px
  }
  .history-item strong {
    font-size: 8px
  }
  .history-action {
    font-size: 7px
  }
  .app-disclosure {
    font-size: 6px
  }
  .workspace-foot {
    display: block;
    margin-left: 0
  }
  .workspace-foot>span {
    font-size: 7px
  }
  .workspace-foot p {
    margin-top: 8px;
    font-size: 9px;
    text-align: left
  }
  .diff-layout {
    grid-template-columns: 1fr
  }
  .changed-files {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 4px;
    padding: 11px;
    border-right: 0;
    border-bottom: 1px solid #ecebe61a
  }
  .changed-files>.micro-label {
    grid-column: 1/-1
  }
  .diff-file {
    gap: 4px;
    padding: 6px 4px
  }
  .diff-file strong {
    overflow-wrap: anywhere;
    font-size: 6px
  }
  .diff-file small {
    font-size: 5px
  }
  .file-arrow {
    display: none
  }
  .select-files {
    grid-column: 1/-1;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 7px;
    padding-top: 10px
  }
  .select-files label {
    font-size: 7px
  }
  .diff-code {
    min-height: 240px;
    padding: 12px 10px
  }
  .diff-code pre {
    font-size: 7px
  }
  .diff-actions {
    flex-wrap: wrap
  }
  .companion-stage {
    margin-inline: -7px
  }
  .desktop-frame {
    min-height: 245px
  }
  .companion-controls {
    grid-template-columns: 1fr;
    padding: 5px 11px
  }
  .control-row {
    min-height: 37px;
    padding: 0;
    border-right: 0;
    border-bottom: 1px solid #ecebe61f
  }
  .control-row:last-child {
    border: 0
  }
  .control-button {
    font-size: 9px
  }
  .message-draft {
    padding: 10px 11px
  }
  .action-plan {
    margin-inline: -6px
  }
  .plan-top {
    padding: 11px;
    font-size: 7px
  }
  .plan-review {
    max-width: 90px;
    text-align: right
  }
  .plan-steps {
    padding-inline: 11px
  }
  .plan-steps li {
    grid-template-columns: 25px minmax(0,1fr) auto;
    gap: 6px
  }
  .plan-steps button {
    padding: 5px;
    font-size: 7px
  }
  .plan-foot {
    flex-direction: column;
    gap: 4px;
    padding: 9px 11px
  }
  .control-grid {
    grid-template-columns: 1fr
  }
  .control-grid article {
    padding: 19px
  }
  .control-grid h3 {
    margin-top: 18px;
    font-size: 22px
  }
  .control-grid article>p {
    min-height: 0;
    font-size: 11px
  }
  .mini-preview,.voice-demo {
    max-width: 450px
  }
  .awake-card {
    grid-column: auto
  }
  .setup-steps {
    grid-template-columns: 1fr 1fr
  }
  .setup-steps li {
    min-height: 150px;
    padding: 13px 12px 14px 0
  }
  .setup-steps li:not(:first-child) {
    padding-left: 12px
  }
  .setup-steps li:nth-child(2) {
    border-right: 0
  }
  .setup-steps li:nth-child(1),.setup-steps li:nth-child(2) {
    border-bottom: 1px solid var(--line)
  }
  .setup-steps h3 {
    margin-top: 25px;
    font-size: 12px
  }
  .setup-steps p {
    font-size: 9px
  }
  .setup-steps li>i {
    right: 10px;
    bottom: 12px
  }
  .availability-section {
    grid-template-columns: 1fr;
    gap: 8px;
    padding-top: 79px;
    padding-bottom: 80px
  }
  .availability-orbit {
    width: min(70%,255px);
    margin-bottom: 5px
  }
  .availability-copy {
    max-width: none
  }
  .availability-specs strong {
    font-size: 9px
  }
  .availability-cta p {
    font-size: 11px
  }
  .faq-list summary {
    min-height: 55px;
    font-size: 10px
  }
  .faq-list details p {
    font-size: 10px
  }
  .closing-section {
    min-height: 520px;
    padding-top: 72px;
    padding-bottom: 72px
  }
  .closing-section>.eyebrow {
    max-width: 230px;
    font-size: 8px
  }
  .closing-section h2 {
    font-size: clamp(48px,12vw,64px)
  }
  .closing-section>p:not(.eyebrow) {
    max-width: 290px;
    font-size: 12px
  }
  .closing-orb {
    top: auto;
    right: -17%;
    bottom: 0;
    width: 64vw;
    transform: rotate(-26deg) scaleY(.42);
    opacity: .6
  }
  .site-footer {
    grid-template-columns: 1fr auto;
    gap: 10px
  }
  .site-footer>p {
    grid-column: 1/-1;
    grid-row: 2;
    text-align: left
  }
  .back-top {
    justify-self: end
  }
  .footer-copyright {
    grid-row: 3
  }
}

@media(max-width:380px) {
  :root {
    --gutter: 17px
  }
  .hero-wordmark {
    font-size: 24vw
  }
  .hero h1 {
    font-size: 35px
  }
  .diff-file strong {
    font-size: 5px
  }
  .voice-actions .mini-button {
    font-size: 6px
  }
}

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


/* Cinematic hero layer and replaceable, explicitly illustrative Zeno UI preview. */
.hero-visual {
  isolation: isolate;
  overflow: visible;
}

.hero-scene {
  position: absolute;
  z-index: 0;
  inset: 2% -7% 11% -4%;
  overflow: hidden;
  border-radius: 50%;
  background: #081322 url("assets/zeno-orbit-poster.jpg") 56% 50% / cover no-repeat;
  -webkit-mask-image: radial-gradient(ellipse at 58% 48%, #000 20%, #000b 58%, transparent 84%);
  mask-image: radial-gradient(ellipse at 58% 48%, #000 20%, #000b 58%, transparent 84%);
  pointer-events: none;
}

.hero-cinematic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 56% 50%;
  opacity: .62;
  filter: saturate(.82) contrast(1.04);
}

.hero-visual .orbit-art {
  z-index: 2;
  width: min(94%, 600px);
}

.hero-ui-window {
  position: absolute;
  z-index: 12;
  right: -2%;
  bottom: 5%;
  width: min(96%, 590px);
  overflow: hidden;
  border: 1px solid #dffaff30;
  border-radius: 9px;
  background: #121516f2;
  box-shadow: 0 28px 74px #000a, 0 0 0 1px #ffffff08, 0 0 34px #00d9ff13;
  backdrop-filter: blur(14px);
  transform: perspective(1500px) rotateY(-5deg) rotateX(1.2deg);
  transform-origin: 70% 65%;
}

.hero-ui-topbar {
  display: grid;
  min-height: 31px;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 0 11px;
  border-bottom: 1px solid #ecebe614;
  color: #cfcec8;
  font: 8px var(--mono);
}

.hero-ui-topbar b {
  color: var(--aqua);
  font-weight: 500;
}

.hero-ui-window-dots {
  display: flex;
  gap: 4px;
}

.hero-ui-window-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #777b7b;
}

.hero-ui-window-dots i:first-child {
  background: #00d9ff;
}

.hero-ui-layout {
  display: grid;
  min-height: 224px;
  grid-template-columns: 112px minmax(0, 1fr);
}

.hero-ui-sidebar {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 13px 8px;
  border-right: 1px solid #ecebe614;
  background: #16191a;
  color: #aaa9a1;
  font: 8px var(--mono);
}

.hero-ui-sidebar-title {
  margin: 1px 0 2px;
  color: #82837e;
  font-size: 7px;
  letter-spacing: .1em;
}

.hero-ui-side-link {
  display: flex;
  min-height: 22px;
  align-items: center;
  gap: 6px;
  padding: 0 5px;
  border-radius: 3px;
  color: #b9b8b1;
}

.hero-ui-side-link i {
  overflow: hidden;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-ui-side-link.is-active {
  color: #dffaff;
  background: #00d9ff13;
}

.hero-ui-assistants-label {
  margin-top: 10px;
}

.hero-ui-assistant {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #d1d0c9;
  font: 7.5px var(--mono);
}

.hero-ui-assistant i,
.hero-ui-project span:last-child i {
  display: inline-block;
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--aqua);
  box-shadow: 0 0 8px #00d9ff70;
}

.hero-ui-assistant:nth-last-child(1) i {
  background: #7897ff;
  box-shadow: 0 0 8px #7897ff70;
}

.hero-ui-main {
  min-width: 0;
  padding: 11px 12px 8px;
}

.hero-ui-project {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  color: #e4e2dc;
  font: 8px var(--mono);
}

.hero-ui-project span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-ui-project span:last-child {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #96968f;
  font-size: 7px;
  white-space: nowrap;
}

.hero-ui-intro {
  display: grid;
  gap: 4px;
  margin: 13px 0 10px;
}

.hero-ui-intro>span {
  color: var(--aqua);
  font: 7px var(--mono);
  letter-spacing: .1em;
}

.hero-ui-intro strong {
  color: #f0efea;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.035em;
}

.hero-ui-intro small {
  color: #a3a39d;
  font-size: 8px;
}

.hero-ui-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.hero-ui-card {
  min-width: 0;
  overflow: hidden;
  padding: 8px;
  border: 1px solid #ecebe61b;
  border-radius: 4px;
  background: #1b1e1f;
}

.hero-ui-card-head {
  display: flex;
  min-height: 13px;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  color: #b6b5ae;
  font: 6.5px var(--mono);
  letter-spacing: .04em;
}

.hero-ui-card-head i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--aqua);
}

.hero-ui-card-head small {
  color: #8c8b84;
  font-size: 6px;
}

.hero-ui-card pre {
  min-height: 42px;
  margin: 6px 0 0;
  color: #cccac2;
  font: 7px/1.65 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.hero-ui-card pre b,
.hero-ui-plus,
.hero-ui-good {
  color: var(--aqua);
  font-weight: 500;
}

.hero-ui-card pre>span:first-of-type {
  color: #b4b8bb;
}

.hero-ui-minus {
  color: #aaa69d;
}

.hero-ui-footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 9px;
  color: #858680;
  font: 6.5px var(--mono);
  letter-spacing: .06em;
}

/* Installer slots are intentionally informational, never fake download buttons. */
.download-section {
  padding-top: 120px;
  padding-bottom: 110px;
  border-top: 1px solid var(--line);
}

.download-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 34px;
}

.download-card {
  display: flex;
  min-height: 228px;
  flex-direction: column;
  padding: 21px;
  border: 1px dashed #3b3b35;
  background: linear-gradient(145deg, #202120, #151615 78%);
}

.download-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.download-symbol {
  display: grid;
  width: 37px;
  height: 37px;
  place-items: center;
  border: 1px solid #00d9ff55;
  border-radius: 50%;
  color: var(--aqua);
  font: 8px var(--mono);
  letter-spacing: .03em;
}

.platform-index {
  color: var(--muted);
  font: 7px var(--mono);
  letter-spacing: .1em;
}

.download-card h3 {
  margin: 23px 0 5px;
  color: var(--text);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -.04em;
}

.download-card p {
  margin: 0;
  color: var(--secondary);
  font-size: 10px;
  line-height: 1.65;
}

.download-unavailable {
  align-self: flex-start;
  margin-top: auto;
  padding: 7px 9px;
  border: 1px solid #ecebe61c;
  color: #b4b2a9;
  font: 7px var(--mono);
  letter-spacing: .03em;
}

.download-footnote {
  max-width: 740px;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.7;
}

/* Optional, visitor-started three-round signal memory game. */
.mini-game-section {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr);
  align-items: center;
  gap: clamp(38px, 8vw, 112px);
  padding-top: 125px;
  padding-bottom: 130px;
  border-top: 1px solid var(--line);
}

.mini-game-copy h2 {
  margin: 19px 0 17px;
  font-size: clamp(43px, 5.4vw, 69px);
  font-weight: 480;
  line-height: 1.02;
  letter-spacing: -.065em;
}

.mini-game-copy h2 em {
  color: var(--secondary);
  font-style: normal;
}

.mini-game-copy>p:not(.eyebrow) {
  max-width: 460px;
  color: var(--secondary);
  font-size: 12px;
  line-height: 1.8;
}

.mini-game-status {
  min-height: 48px;
  margin: 21px 0 13px;
  padding: 11px 13px;
  border-left: 2px solid var(--aqua);
  background: #00d9ff0a;
  color: var(--text);
  font-size: 10px;
  line-height: 1.55;
}

.mini-game-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.mini-game-actions button:disabled {
  opacity: .47;
  cursor: not-allowed;
  transform: none;
}

.mini-game-note {
  color: var(--muted) !important;
  font: 8px/1.7 var(--mono) !important;
}

.mini-game-playfield {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 19px;
  border: 1px solid var(--line);
  background: radial-gradient(ellipse at center, #081322c7, #141413 72%);
}

.game-board {
  position: relative;
  width: min(100%, 330px);
  aspect-ratio: 1;
  isolation: isolate;
}

.game-board-ring,
.game-board-ring::before,
.game-board-ring::after {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid #00d9ff48;
  border-radius: 50%;
  content: "";
  transform: translate(-50%, -50%);
}

.game-board-ring {
  width: 67%;
  height: 67%;
  box-shadow: 0 0 35px #00d9ff0c;
}

.game-board-ring::before {
  width: 125%;
  height: 31%;
  border-color: #ecebe637;
  transform: translate(-50%, -50%) rotate(-31deg);
}

.game-board-ring::after {
  width: 34%;
  height: 125%;
  border-color: #00d9ff35;
  transform: translate(-50%, -50%) rotate(28deg);
}

.game-board-core {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: grid;
  width: 25%;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid #00d9ff70;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 38%, #20292b, #040708 70%);
  box-shadow: 0 0 30px #0009, 0 0 25px #00d9ff20;
  color: var(--aqua);
  font: 15px var(--mono);
  transform: translate(-50%, -50%);
}

.game-node {
  position: absolute;
  z-index: 3;
  display: flex;
  width: 68px;
  min-height: 59px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 4px;
  border: 1px solid #ecebe632;
  border-radius: 5px;
  background: #171918;
  color: var(--secondary);
  font-size: 9px;
  transition: border-color .15s, background .15s, box-shadow .15s, color .15s;
}

.game-node:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 4px;
}

.game-node:disabled {
  opacity: .64;
  cursor: not-allowed;
}

.game-node:not(:disabled) {
  cursor: pointer;
}

.game-node:not(:disabled):hover,
.game-node.is-lit {
  border-color: var(--aqua);
  background: #00d9ff15;
  box-shadow: 0 0 22px #00d9ff35;
  color: var(--text);
}

.game-node.is-wrong {
  border-color: #e5a2a2;
  box-shadow: 0 0 22px #e5a2a230;
}

.game-node i {
  width: 9px;
  height: 9px;
  border: 1px solid #00d9ff83;
  border-radius: 50%;
  background: #00d9ff30;
}

.game-node.is-lit i {
  background: #d6fbff;
  box-shadow: 0 0 15px 4px #00d9ffb8;
}

.game-node-north {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.game-node-east {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.game-node-south {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.game-node-west {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.game-sequence {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.game-sequence li {
  padding: 6px 9px;
  border: 1px solid #00d9ff42;
  color: var(--text);
  font: 8px var(--mono);
}

.game-disclosure {
  max-width: 420px;
  margin: 0;
  color: var(--muted);
  font: 7px/1.7 var(--mono);
  text-align: center;
}

@media (max-width: 1050px) {
  .primary-nav {
    gap: clamp(10px, 1.35vw, 18px);
    font-size: 10px;
  }

  .hero-ui-window {
    right: -1%;
    width: min(98%, 560px);
  }
}

@media (max-width: 800px) {
  .hero-visual {
    min-height: 490px;
  }

  .hero-ui-window {
    right: 1%;
    bottom: 5%;
    width: min(96%, 540px);
    transform: perspective(1300px) rotateY(-2deg);
  }

  .mini-game-section {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .mini-game-copy {
    max-width: 660px;
  }

  .mini-game-playfield {
    width: min(100%, 530px);
    justify-self: center;
  }
}

@media (max-width: 700px) {
  .download-grid {
    grid-template-columns: 1fr;
  }

  .download-card {
    min-height: 194px;
  }
}

@media (max-width: 600px) {
  .hero-visual {
    min-height: 465px;
  }

  .hero-scene {
    inset: 1% -10% 8% -10%;
  }

  .hero-visual .orbit-art {
    width: min(98%, 470px);
  }

  .hero-ui-window {
    right: 0;
    bottom: 6%;
    width: 100%;
    transform: none;
  }

  .hero-ui-layout {
    grid-template-columns: 87px minmax(0, 1fr);
  }

  .hero-ui-sidebar {
    gap: 6px;
    padding: 11px 6px;
  }

  .hero-ui-main {
    padding: 9px 8px 7px;
  }

  .hero-ui-intro strong {
    font-size: 12px;
  }

  .hero-ui-card {
    padding: 6px;
  }

  .hero-ui-card pre {
    font-size: 6.5px;
  }

  .download-section,
  .mini-game-section {
    padding-top: 86px;
    padding-bottom: 88px;
  }

  .download-grid {
    gap: 10px;
    margin-top: 24px;
  }

  .download-card {
    min-height: 180px;
    padding: 17px;
  }

  .mini-game-playfield {
    padding: 12px;
  }

  .game-board {
    width: min(100%, 300px);
  }
}

@media (max-width: 420px) {
  .hero-visual {
    min-height: 520px;
  }

  .hero-ui-layout {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .hero-ui-sidebar {
    align-items: center;
    padding: 10px 4px;
  }

  .hero-ui-sidebar-title,
  .hero-ui-side-link i,
  .hero-ui-assistant {
    display: none;
  }

  .hero-ui-side-link {
    width: 32px;
    justify-content: center;
    padding: 0;
  }

  .hero-ui-assistants-label {
    display: none;
  }

  .hero-ui-cards {
    grid-template-columns: 1fr;
  }

  .hero-ui-card:nth-child(2) {
    display: none;
  }

  .hero-ui-card pre {
    min-height: 34px;
    font-size: 7px;
  }

  .hero-ui-project span:last-child {
    display: none;
  }

  .game-board {
    width: min(100%, 270px);
  }

  .game-node {
    width: 62px;
    min-height: 54px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-cinematic {
    display: none;
  }

  .hero-visual .orbit-plane-back {
    animation: none;
  }

  .game-node {
    transition: none;
  }
}