:root {  color-scheme: dark;  --page-bg: #000;  --page-glow: rgba(255, 255, 255, 0.075);  --page-text: #f4f4f5;  --page-muted: #a1a1aa;  --page-subtle: #71717a;  --page-faint: #52525b;  --page-line: rgba(255, 255, 255, 0.08);  --control-bg: rgba(255, 255, 255, 0.04);  --control-border: rgba(255, 255, 255, 0.1);  --control-hover: rgba(255, 255, 255, 0.075);  --control-active: rgba(255, 255, 255, 0.12);  --control-text: #a1a1aa;  --control-active-text: #fff;  --primary-bg: #f4f4f5;  --primary-text: #09090b;  --primary-hover: #e4e4e7;  --apple-filter: none;  --header-height: 4rem;  --hero-bg: #000;  --hero-fade-end: var(--hero-bg);  --mockup-y: 10px;  --mockup-scale: 1.15;  --mockup-tune-width: 1920;  --mockup-fluid-max: 1.22;  --mockup-screen-margin-right: 50px;  /* Keep the MacBook right-aligned before site.js refines the viewport calculation. */  --mockup-x: max(calc(-32.777vw - 50px), calc(50vw - 1352.72px));  --mockup-artboard-ratio: 1.18;  /* Menubar: Figma 130/150px + scale 0.94, × visual correction (top ×1.308, right ×1.548, scale ×1.55) */  --menubar-scale: 1.457;  --menubar-icon-scale: 1.28;  --menubar-gap: 0.9cqw;  --popover-scale: 0.85;  --hud-anchor-top: 5.25%;  --hud-margin-right: 3.8%;  /* Panel: Figma formula × visual correction (top ×1.104, right ×1.322, scale ×0.934) */  --hud-panel-top: 8.5%;  --hud-panel-margin-right: 3.7%;  --hud-panel-width: 18.22%;  --hud-menu-nudge-x: 0px;  --hud-menu-nudge-y: 0px;  --hud-panel-nudge-x: 0px;  --hud-panel-nudge-y: 0px;  --glow-x: 331px;  --glow-y: -260px;  --glow-scale: 2.4;  --glow-opacity: 0.55;  --glow-blur: 72px;  --glow-color-a: #003c61;  --glow-color-b: #8000ff;  /* Hero entrance choreography (copy + mockup HUD) */  --hero-ease: cubic-bezier(0.23, 1, 0.32, 1);  --hero-reveal-duration: 420ms;  --hero-reveal-step: 40ms;  --hero-reveal-1: 0ms;  --hero-reveal-2: 40ms;  --hero-reveal-3: 80ms;  --hero-reveal-4: 125ms;  --hero-reveal-5: 170ms;  --hero-menubar-start: 100ms;  --hero-menubar-wave: 30ms;  --hero-mark-after-menubar: 30ms;  --hero-popover-after-mark: 60ms;  --mobile-mockup-stage-height: 33.5rem;  --mobile-mockup-stage-max-width: 26rem;  --mobile-stage-inline-gutter: 1.25rem;  --mobile-mockup-width: 251%;  --mobile-mockup-offset-x: -32px;  --mobile-mockup-offset-y: 18px;  --mobile-mockup-scale: 0.99;  --mobile-hud-anchor-top: 5.25%;  --mobile-hud-margin-right: 3.8%;  --mobile-hud-panel-top: 9.15%;  --mobile-hud-panel-margin-right: 6%;  --mobile-hud-panel-width: 20%;  --mobile-hud-menu-nudge-x: 0px;  --mobile-hud-menu-nudge-y: 0px;  --mobile-menubar-scale: 1.271;  --mobile-menubar-gap: 0.9cqw;  --mobile-popover-scale: 1.39;  --tablet-mockup-x: -247px;  --tablet-mockup-y: 13px;  --tablet-mockup-scale: 1.2;  --tablet-mockup-tune-width: 1022;  --tablet-mockup-fluid-max: 1.18;  --tablet-mockup-stage-height: 42rem;  /* Panel tablet tune @ 1020 → top 9.5%, scale 1.35 */  --tablet-hud-panel-top: 9.5%;  --tablet-hud-panel-margin-right: 3.7%;  --tablet-hud-panel-width: 18.22%;  --tablet-popover-scale: 1.35;} :root[data-theme="light"] {  color-scheme: light;  --page-bg: #f7f7f5;  --page-glow: rgba(0, 0, 0, 0.05);  --page-text: #18181b;  --page-muted: #52525b;  --page-subtle: #71717a;  --page-faint: #a1a1aa;  --page-line: rgba(0, 0, 0, 0.1);  --control-bg: rgba(0, 0, 0, 0.035);  --control-border: rgba(0, 0, 0, 0.11);  --control-hover: rgba(0, 0, 0, 0.065);  --control-active: rgba(0, 0, 0, 0.1);  --control-text: #71717a;  --control-active-text: #18181b;  --primary-bg: #18181b;  --primary-text: #fff;  --primary-hover: #3f3f46;  --apple-filter: brightness(0) invert(1);} html { scroll-behavior: smooth; } body {  margin: 0;  background:    radial-gradient(circle at 50% 76%, var(--page-glow), transparent 29rem),    var(--page-bg);  color: var(--page-text);  -webkit-font-smoothing: antialiased;} :where(a, button, [role="option"]):focus-visible {  outline: 3px solid #38bdf8;  outline-offset: 3px;} html.bg-black { background-color: var(--page-bg) !important; } ::selection { background: #0099ff; color: #fff; } .mockup-stage {  position: absolute;  inset: 0;  overflow: hidden;} .mockup-wrap {  position: absolute;  top: var(--header-height);  left: 50%;  width: 118%;  aspect-ratio: 6111 / 3239;  transform: translate(calc(-50% + var(--mockup-x)), var(--mockup-y))    scale(var(--mockup-layout-scale, calc(var(--mockup-scale) * clamp(1, calc(var(--mockup-tune-width) * 1px / 100vw), var(--mockup-fluid-max)))));  transform-origin: top center;  will-change: transform;} .mockup-wrap::after {  content: "";  position: absolute;  z-index: 6;  right: 0;  bottom: -1px;  left: 0;  height: 32%;  pointer-events: none;  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.58) 50%, #000 68%, #000 100%);} .mockup-glow {  position: absolute;  z-index: 0;  top: 34%;  left: 50%;  width: 68%;  height: 38%;  transform: translate(calc(-50% + var(--glow-x)), var(--glow-y)) scale(var(--glow-scale));  border-radius: 999px;  background:    radial-gradient(circle at 52% 50%, color-mix(in srgb, var(--glow-color-a) 28%, transparent), transparent 45%),    radial-gradient(circle at 42% 56%, color-mix(in srgb, var(--glow-color-b) 16%, transparent), transparent 58%);  filter: blur(var(--glow-blur));  opacity: var(--glow-opacity);  pointer-events: none;  will-change: transform, opacity, filter;} .mockup-wrap > img {  position: relative;  z-index: 1;} /* Desktop: tracks the mockup image transform; mobile: fills the clipped stage */.mockup-hud-layer {  position: absolute;  z-index: 2;  top: var(--header-height);  left: 50%;  width: 118%;  aspect-ratio: 6111 / 3239;  transform: translate(calc(-50% + var(--mockup-x)), var(--mockup-y))    scale(var(--mockup-layout-scale, calc(var(--mockup-scale) * clamp(1, calc(var(--mockup-tune-width) * 1px / 100vw), var(--mockup-fluid-max)))));  transform-origin: top center;  pointer-events: none;  will-change: transform;} /* HUD coordinates: percentages are relative to the full SVG artboard box */.mockup-artboard {  position: absolute;  inset: 0;  container-type: size;  container-name: mockup-artboard;  pointer-events: none;} .mockup-hud-anchor {  display: contents;} .system-menubar {  position: absolute;  top: var(--hud-anchor-top);  right: var(--hud-margin-right);  left: auto;  z-index: 3;  display: flex;  align-items: center;  gap: calc(var(--menubar-gap) / var(--menubar-scale));  overflow: visible;  transform: translate(var(--hud-menu-nudge-x), var(--hud-menu-nudge-y)) scale(var(--menubar-scale));  transform-origin: top right;  color: rgba(245, 245, 245, 0.94);  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;  font-size: clamp(0.48rem, 0.52cqw, 0.75rem);  font-weight: 650;  letter-spacing: -0.045em;  text-shadow: 0 0.08em 0.28em rgba(0, 0, 0, 0.74);  will-change: transform;  pointer-events: auto;} .menu-bar-mark {  position: relative;  flex: none;  width: calc(1em * var(--menubar-icon-scale));  height: calc(1em * var(--menubar-icon-scale));  transform: translateY(0.01em);  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));} .menu-bar-mark::before {  content: "";  position: absolute;  inset: -0.22em -0.3em;  border-radius: 999px;  background: rgba(255, 255, 255, 0.24);  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);} .menu-bar-mark span {  position: absolute;  z-index: 1;  left: 10%;  display: block;  width: 80%;  height: 22%;  overflow: hidden;  border-radius: 999px;  background: #a8aaa8;} .menu-bar-mark span::before {  content: "";  position: absolute;  inset: 0;  border-radius: inherit;  background: linear-gradient(90deg, #f5f5f3 0%, #e7e7e5 100%);  transform: scaleX(0);  transform-origin: left center;  transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1) var(--mark-bar-delay, 0ms);  will-change: transform;} .menu-bar-mark span:first-child {  top: 23%;  --mark-fill: 0.68;  --mark-bar-delay: 0ms;} .menu-bar-mark span:last-child {  bottom: 23%;  --mark-fill: 0.33;  --mark-bar-delay: 80ms;} .mockup-stage.is-mark-animated .menu-bar-mark span::before {  transform: scaleX(var(--mark-fill));} .system-menubar svg,.system-menubar .sf-symbol {  flex: none;  display: block;  width: calc(1em * var(--menubar-icon-scale));  height: calc(1em * var(--menubar-icon-scale));} .system-menubar svg {  overflow: visible;  color: #dbdbdb;  fill: none;  stroke: currentColor;  stroke-width: 2.35;  stroke-linecap: round;  stroke-linejoin: round;  filter: drop-shadow(0 0.08em 0.18em rgba(0, 0, 0, 0.58));} .system-menubar .sf-symbol {  object-fit: contain;  filter: brightness(0) invert(86%) drop-shadow(0 0.08em 0.18em rgba(0, 0, 0, 0.58));} .system-menubar .sf-symbol--openclaw {  filter: drop-shadow(0 0.08em 0.18em rgba(0, 0, 0, 0.58));} .system-menubar .time {  margin-left: calc(var(--menubar-gap) * -0.08 / var(--menubar-scale));  white-space: nowrap;  font-size: 0.8em;} .system-menubar > * {  opacity: 0;  transform: translateY(-0.42em);  transition:    opacity 280ms cubic-bezier(0.23, 1, 0.32, 1),    transform 280ms cubic-bezier(0.23, 1, 0.32, 1);  transition-delay: var(--menubar-enter-delay, 0ms);  will-change: opacity, transform;} .system-menubar > .menu-bar-mark {  transform: translateY(calc(0.01em - 0.42em));} .mockup-stage.is-menubar-entered .system-menubar > * {  opacity: 1;  transform: translateY(0);} .mockup-stage.is-menubar-entered .system-menubar > .menu-bar-mark {  transform: translateY(0.01em);} .codex-popover {  position: absolute;  top: var(--hud-panel-top);  right: var(--hud-panel-margin-right);  left: auto;  z-index: 4;  width: var(--hud-panel-width);  box-sizing: border-box;  padding: 0.78rem 0.82rem 0.9rem;  transform: translate(var(--hud-panel-nudge-x), calc(var(--hud-panel-nudge-y) + 8px))    scale(calc(var(--popover-scale) * 0.985));  transform-origin: top right;  overflow: hidden;  border: 1px solid rgba(255, 255, 255, 0.08);  border-radius: 1rem;  background: linear-gradient(180deg, rgba(35, 35, 38, 0.94), rgba(20, 20, 22, 0.97));  box-shadow:    inset 0 1px 0 rgba(255, 255, 255, 0.1),    inset 0 -1px 0 rgba(255, 255, 255, 0.08),    0 1.5rem 2.5rem rgba(0, 0, 0, 0.56);  color: rgba(244, 244, 245, 0.92);  font-size: clamp(0.45rem, 0.48cqw, 0.68rem);  letter-spacing: -0.035em;  line-height: 1.15;  backdrop-filter: blur(18px);  user-select: text;  -webkit-user-select: text;  opacity: 0;  pointer-events: auto;  transition:    opacity 300ms var(--hero-ease),    transform 360ms var(--hero-ease);  will-change: transform, opacity;} .mockup-stage.is-animated .codex-popover {  opacity: 1;  transform: translate(var(--hud-panel-nudge-x), var(--hud-panel-nudge-y)) scale(var(--popover-scale));} .popover-top,.popover-section,.popover-foot {  position: relative;  z-index: 1;} .popover-top {  display: grid;  grid-template-columns: 1fr auto;  gap: 0.35rem;  padding-bottom: 0.55rem;  border-bottom: 1px solid rgba(255, 255, 255, 0.16);} .popover-top strong,.popover-section h3,.popover-number strong,.popover-foot strong {  display: block;  color: rgba(244, 244, 245, 0.96);  font-weight: 780;} .popover-top span,.popover-number span,.popover-note,.popover-foot span {  color: rgba(244, 244, 245, 0.58);  font-weight: 650;} .popover-top .right { text-align: right; } .popover-section { margin-top: 0.9rem; }.popover-section h3 { margin-bottom: 0.42rem; font-size: 1.28em; } .usage-meter {  position: relative;  height: 0.42rem;  overflow: hidden;  border-radius: 999px;  background: rgba(255, 255, 255, 0.09);} .usage-meter::before {  content: "";  display: block;  width: var(--fill);  height: 100%;  border-radius: inherit;  background: #4fb6c3;  transform: scaleX(0);  transform-origin: left center;  transition: transform 500ms cubic-bezier(0.23, 1, 0.32, 1) var(--meter-delay, 70ms);} .usage-meter::after {  content: "";  position: absolute;  top: 0;  left: var(--danger);  width: 0.14rem;  height: 100%;  border-radius: 999px;  background: #ff4055;  opacity: 0;  transition: opacity 140ms ease calc(var(--meter-delay, 70ms) + 380ms);} .usage-meter i {  position: absolute;  top: 18%;  left: var(--tick);  width: 1px;  height: 64%;  background: rgba(255, 255, 255, 0.34);  opacity: 0;  transition: opacity 180ms ease calc(var(--meter-delay, 70ms) + 280ms);} .mockup-stage.is-animated .usage-meter::before { transform: scaleX(1); }.mockup-stage.is-animated .usage-meter::after,.mockup-stage.is-animated .usage-meter i { opacity: 1; } .usage-row {  display: grid;  grid-template-columns: 1fr auto;  gap: 0.75rem;  margin-top: 0.45rem;} .usage-row strong,.usage-row span {  display: block;  font-weight: 760;} .usage-row .right { text-align: right; color: rgba(244, 244, 245, 0.62); } .reset-credit {  display: grid;  grid-template-columns: 1fr auto;  gap: 0.75rem;  margin-top: 0.9rem;  padding-top: 0.86rem;

Lines 1–500 of 2607. Load more