@font-face{
  font-family: "Mona Sans";
  src: url("MonaSans-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
}
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{ margin: 0; min-height: 100dvh; }
a{ color: inherit; }
button,input,textarea,select{ font: inherit; }
:root{
  --surface-rail: #0c1117;
  --surface-canvas: #f2efe7;
  --surface-default: #faf8f2;
  --surface-raised: #fffdf8;
  --surface-subtle: #f5f2ea;
  --surface-muted: #ebe7de;
  --border-subtle: #d8d3c8;
  --border-default: #c3bdb1;
  --border-control: #8b857b;
  --border-strong: #aaa397;
  --text-primary: #17191d;
  --text-secondary: #30343a;
  --text-muted: #62666c;
  --text-quiet: #686c71;
  --text-inverse: #f0ece4;
  --accent-solid: #ff5b35;
  --accent-solid-hover: #e54d2a;
  --accent-text: #a23820;
  --on-accent: #21100c;
  --agent-text: #426985;
  --agent-surface: #e5edf2;
  --success-text: #2b704a;
  --success-surface: #e3eee7;
  --neutral-surface: #ebe8e0;
  --body-font: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --type-display: clamp(3.5rem, 2.7rem + 3.4vw, 6.5rem);
  --type-heading: clamp(2.5rem, 2.1rem + 1.7vw, 3.75rem);
  --type-title: 1.5rem;
  --type-lead: 1.125rem;
  --type-body: 1rem;
  --type-control: .875rem;
  --type-label: .75rem;
  --type-wordmark: 1.125rem;
}
.concept-landing{
  background: var(--surface-canvas);
  color: var(--text-primary);
  font-family: var(--body-font);
  font-size: var(--type-body);
  font-weight: 420;
  line-height: 1.55;
  font-optical-sizing: auto;
  font-synthesis: none;
  overflow-wrap: anywhere;
}
.page-width{ width: min(1248px,calc(100% - 56px)); margin-inline: auto; }
.concept-head-inner{ min-height: 84px; padding-block: 16px; display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; }
.concept-brand{ width: max-content; display: flex; align-items: center; text-decoration: none; }
.concept-brand strong{ font-size: var(--type-wordmark); font-weight: 680; line-height: 1.333; letter-spacing: -.015em; }
.concept-head nav{ display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 32px; }
.concept-head nav a{ color: var(--text-muted); font-size: var(--type-control); font-weight: 560; line-height: 1.35; letter-spacing: 0; text-decoration: none; }
.small-cta{ min-height: 40px; padding: 0 15px; justify-self: end; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-radius: 4px; background: var(--text-primary); color: var(--text-inverse); font-size: var(--type-control); font-weight: 650; line-height: 1.35; letter-spacing: 0; text-decoration: none; }
.concept-head,.concept-hero{
  --text-primary: #f0ece4;
  --text-secondary: #c9c8c2;
  --text-muted: #9aa0a3;
  --text-inverse: #17191d;
  --accent-text: #ff947e;
  --agent-text: #91b8d0;
  --border-default: #354453;
  background: var(--surface-rail);
  color: var(--text-primary);
}
.concept-head{ position: relative; z-index: 2; }
.concept-head nav a{ color: var(--text-secondary); }
.concept-head .small-cta:hover{ background: var(--surface-muted); }
.concept-hero{
  --type-display: clamp(3.5rem, 2rem + 7vw, 8.5rem);
  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(100svh - 84px); padding: 44px 28px 0;
  display: grid; grid-template-rows: 1fr auto; align-items: center;
}
.hero-copy{ position: relative; z-index: 1; width: min(1100px,100%); margin: auto; padding: 24px 0 52px; text-align: center; }
.concept-eyebrow{ margin: 0 0 38px; color: var(--accent-text); font-size: var(--type-label); font-weight: 650; line-height: 1.35; letter-spacing: .06em; text-transform: uppercase; }
.concept-hero h1{ max-width: 100%; margin: 0; font-size: var(--type-display); font-weight: 680; line-height: .94; letter-spacing: -.015em; text-wrap: balance; }
.hero-lead{ max-width: 55ch; margin: 28px auto; color: var(--text-secondary); font-size: var(--type-lead); font-weight: 420; line-height: 1.55; letter-spacing: 0; }
.hero-actions{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; margin-bottom: 22px; }
.signup-offer{ flex-wrap: wrap; margin: 0 0 12px; display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: var(--type-control); font-weight: 450; line-height: 1.35; }
.signup-offer > span{ width: 7px; height: 7px; margin-right: 2px; flex: none; border-radius: 50%; background: var(--accent-solid); }
.signup-offer strong{ color: var(--text-primary); font-weight: 680; }
.solid-cta{ min-height: 52px; padding: 0 21px; display: inline-flex; align-items: center; justify-content: space-between; gap: 36px; border-radius: 4px; font-size: var(--type-control); font-weight: 650; line-height: 1.35; letter-spacing: 0; text-decoration: none; }
.solid-cta{ background: var(--accent-solid); color: var(--on-accent); }
.hero-tour{ min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; font-size: var(--type-control); font-weight: 620; text-decoration: none; }
.hero-tour span{ color: var(--accent-text); }
.hero-tour:hover{ text-decoration: underline; text-underline-offset: 4px; }
.concept-hero h1 span{ color: var(--accent-solid); }
.concept-hero .concept-eyebrow{ color: var(--text-secondary); margin-bottom: 28px; }
.concept-hero .signup-offer{ justify-content: center; color: var(--text-secondary); }
.concept-hero .hero-requirements{ margin-inline: auto; }
.hero-atmosphere{ position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-glow{ position: absolute; inset: 10% -20% -50%; background: radial-gradient(ellipse at 50% 65%,rgba(255,91,53,.22),transparent 52%); animation: hero-ignite 4.4s ease-out both; }
.hero-landscape{ position: absolute; width: 100%; height: 100%; inset: 0; animation: hero-reveal 3.6s cubic-bezier(.16,1,.3,1) both; }
.hero-contours{ stroke: var(--agent-text); stroke-width: 1; opacity: .13; }
.hero-plane{ fill: url(#hero-plane); stroke: var(--border-default); stroke-width: 1; }
.hero-plane-edge{ fill: none; stroke: var(--agent-text); opacity: .22; }
.hero-plane-far{ animation: hero-plane-rise 3.8s cubic-bezier(.16,1,.3,1) both; }
.hero-plane-near{ animation: hero-plane-rise 3.2s .15s cubic-bezier(.16,1,.3,1) both; }
.hero-plane-front{ animation: hero-plane-rise 3.4s .3s cubic-bezier(.16,1,.3,1) both; }
.hero-circuit{ stroke: url(#hero-trace); stroke-width: 1.5; opacity: .5; }
.hero-ignition{ stroke: var(--accent-solid); stroke-width: 2; stroke-dasharray: 110 2400; animation: hero-transmit 4.4s cubic-bezier(.2,.7,.3,1) both; }
.hero-nodes{ fill: var(--accent-solid); opacity: .6; }
.hero-veil{ position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 22%,var(--surface-rail) 10%,transparent 75%),linear-gradient(var(--surface-rail),transparent 40%); }
.hero-capabilities{ position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 44px; padding: 26px 0; border-top: 1px solid var(--border-default); color: var(--text-secondary); font-size: var(--type-label); }
@keyframes hero-reveal{ from{ transform: perspective(1000px) rotateX(12deg) scale(1.25) translateY(120px); opacity: .2; } to{ transform: none; opacity: 1; } }
@keyframes hero-plane-rise{ from{ transform: translateY(180px); } to{ transform: none; } }
@keyframes hero-transmit{ 0%{ stroke-dashoffset: 1900; opacity: 0; } 15%{ opacity: 1; } 80%{ opacity: 1; } 100%{ stroke-dashoffset: -1400; opacity: 0; } }
@keyframes hero-ignite{ 0%{ opacity: 0; transform: scale(.7); } 45%{ opacity: 1; } 100%{ opacity: .65; transform: scale(1); } }
@media(prefers-reduced-motion:reduce){ .hero-atmosphere *{ animation: none !important; } .hero-ignition{ opacity: 0; } }
.product-landscape{  position: relative; overflow: hidden; padding: 40px 0; background: url("terrain.svg") center/cover no-repeat; }
.landscape-label{ width: min(1248px,calc(100% - 56px)); margin: 0 auto; display: flex; gap: 0; color: var(--text-primary); }
.landscape-label span{ padding: 0; background: transparent; font-size: var(--type-label); font-weight: 650; line-height: 1.35; letter-spacing: .06em; text-transform: uppercase; }
.landscape-label span + span::before{ content: "/"; margin: 0 16px; color: rgba(25,36,50,.42); }
.product-window{ container: proof / inline-size; width: min(1180px,calc(100% - clamp(28px,4vw,56px))); margin: 32px auto; overflow: hidden; border: 0; border-radius: 12px; background: var(--surface-canvas); box-shadow: 0 40px 90px rgba(6,12,20,.38); }
.hero-requirements{ max-width: 43ch; color: var(--text-secondary); font-size: var(--type-control); }
.pricing-section{ padding: 80px 0; border-top: 1px solid var(--border-default); }
.pricing-section h2{ max-width: 24ch; font-size: var(--type-heading); font-weight: 620; line-height: 1.02; letter-spacing: -.01em; text-wrap: balance; }
.pricing-grid{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 60px; }
.pricing-grid article{ min-width: 0; }
.pricing-grid h3{ font-size: var(--type-title); line-height: 1.2; }
.pricing-grid p,.pricing-grid li{ max-width: 60ch; color: var(--text-muted); }
.pricing-grid ul{ padding-left: 1.2em; }
.pricing-grid li{ margin: .5em 0; }
.pricing-grid .price{ color: var(--text-primary); font-size: var(--type-heading); line-height: 1.2; margin: .5em 0; }
.price span{ color: var(--text-muted); font-size: var(--type-body); }

.section-index{ margin: 0; color: var(--accent-text); font-size: var(--type-label); font-weight: 650; line-height: 1.35; letter-spacing: .06em; text-transform: uppercase; }.workflow-band h2{ font-size: var(--type-heading); font-weight: 620; line-height: 1.02; letter-spacing: -.01em; text-wrap: balance; }.concept-faq details p{ margin-top: 0; color: var(--text-muted); font-size: var(--type-body); font-weight: 420; line-height: 1.55; letter-spacing: 0; }
.workflow-band{
  --surface-canvas: #141b22;
  --border-default: #354453;
  --text-primary: #f0ece4;
  --text-secondary: #c9c8c2;
  --accent-text: #ff947e;
  --on-accent: #24110c;
  padding: 90px 0;
  background: var(--surface-canvas);
  color: var(--text-primary);
}
.workflow-band header{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; }
.workflow-band .section-index{ color: var(--accent-text); }
.workflow-band h2{ margin: 0; }
.workflow-steps{ margin-top: 55px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0 70px; }
.workflow-steps article{ min-height: 155px; padding: 27px 0; display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 22px; border-top: 1px solid var(--border-default); }
.workflow-steps article > span{ width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-solid); color: var(--on-accent); font-size: var(--type-control); font-weight: 700; font-variant-numeric: tabular-nums; }
.workflow-steps h3{ margin: 3px 0 8px; font-size: var(--type-title); font-weight: 650; line-height: 1.2; letter-spacing: 0; }
.workflow-steps p{ max-width: 48ch; margin: 0; color: var(--text-secondary); font-size: var(--type-body); font-weight: 430; line-height: 1.55; letter-spacing: 0; }.concept-final > div > p{ font-size: var(--type-label); font-weight: 650; line-height: 1.35; letter-spacing: .06em; text-transform: uppercase; }
.concept-faq{ padding: 80px 0; display: grid; grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); gap: 100px; }
.concept-faq h2{ margin: 30px 0; font-size: var(--type-heading); font-weight: 640; line-height: 1.02; letter-spacing: -.01em; }
.concept-faq details{ padding: 0; border-top: 2px solid var(--border-default); }
.concept-faq details:last-child{ border-bottom: 2px solid var(--border-default); }
.concept-faq summary{ min-height: 76px; padding: 24px 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; cursor: pointer; list-style: none; font-size: var(--type-lead); font-weight: 620; line-height: 1.35; letter-spacing: 0; }
.concept-faq summary span{ float: right; color: var(--accent-text); }
.concept-faq summary .disclosure-icon{ flex: 0 0 16px; float: none; }
.concept-faq details p{ max-width: 65ch; margin: -5px 60px 25px 0; }
.concept-final{
  --accent-text: #ff947e;
  --text-secondary: #c9c8c2;
  padding: 80px 0;
  background: var(--surface-rail);
  color: var(--text-inverse);
}
.concept-final > div{ display: grid; grid-template-columns: 1fr auto; align-items: end; }
.concept-final > div > p{ grid-column: 1/-1; margin: 0 0 45px; color: var(--accent-text); }
.concept-final h2{ max-width: 12ch; margin: 0; font-size: var(--type-display); font-weight: 660; line-height: .94; letter-spacing: -.015em; text-wrap: balance; }
.final-acquisition{ align-self: end; margin-bottom: 8px; }
.concept-final .signup-offer{ color: var(--text-secondary); }
.concept-final .signup-offer strong{ color: var(--text-inverse); }
.concept-final .solid-cta{ margin: 0; }
.concept-foot{ min-height: 160px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.concept-foot > p,.concept-foot nav a{ color: var(--text-muted); font-size: var(--type-label); font-weight: 450; line-height: 1.35; letter-spacing: 0; }
.concept-foot .example-note{ grid-column: 1 / -1; margin: 0 0 24px; }
.concept-foot nav{ justify-self: end; display: flex; gap: 22px; }
.concept-foot nav a{ min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.icon{ display: block; width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.small-cta .icon,.solid-cta .icon{ width: 17px; height: 17px; transition: transform 160ms ease; }
.small-cta span,.small-cta .icon{ display: block; flex: none; }
.disclosure-icon{ position: relative; width: 16px; height: 16px; }
.disclosure-icon::before,.disclosure-icon::after{ content: ""; position: absolute; left: 3px; right: 3px; top: 7px; height: 1.5px; border-radius: 1px; background: var(--accent-text); transition: transform 160ms ease; }
.disclosure-icon::after{ transform: rotate(90deg); }
details[open] .disclosure-icon::after{ transform: rotate(0); }
.landing-skip-link{ position: fixed; z-index: 1000; top: 12px; left: 12px; padding: 10px 14px; border-radius: 4px; background: var(--text-primary); color: var(--text-inverse); font-size: var(--type-control); font-weight: 650; text-decoration: none; transform: translateY(-160%); transition: transform 140ms ease; }
.landing-skip-link:focus{ transform: translateY(0); }
:where(button,a,summary,[role="button"]){ -webkit-tap-highlight-color: transparent; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
:where(button,a,summary,input,select,textarea,[tabindex]):focus-visible{ outline: 2px solid var(--accent-text); outline-offset: 3px; }
.workflow-band :where(a,button,summary):focus-visible,.concept-final :where(a,button,summary):focus-visible{ outline-color: var(--accent-solid); }
:where(button,a,summary):active{ opacity: .78; }
button:disabled{ cursor: default; opacity: .45; }
::selection{ background: rgba(255,91,53,.28); color: inherit; }
.concept-head nav a,.small-cta,.solid-cta,.concept-foot a{ transition: color 140ms ease,background-color 140ms ease,border-color 140ms ease,opacity 140ms ease,transform 140ms ease,box-shadow 140ms ease; }
@media (hover:hover) and (pointer:fine){
  .concept-head nav a:hover,.concept-foot a:hover{ color: var(--text-primary); }
  .small-cta:hover{ background: var(--text-secondary); }
  .solid-cta:hover{ background: var(--accent-solid-hover); }
  .small-cta:hover .icon,.solid-cta:hover .icon{ transform: translate(2px,-2px); }
  .concept-faq summary:hover{ color: var(--text-secondary); }
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration: .01ms!important; animation-iteration-count: 1!important; scroll-behavior: auto!important; transition-duration: .01ms!important; }
}
@media (max-width:760px){
  .page-width{ width: calc(100% - 34px); }
  .concept-head-inner{ min-height: 68px; padding-block: 12px; }
  .concept-head nav{ display: none; }
  .concept-head .concept-brand,.concept-head .small-cta,.concept-foot .concept-brand,.concept-foot nav a{ min-height: 44px; }
  .small-cta{ min-width: 91px; padding: 0 12px 0 14px; }
  .concept-hero{ min-height: calc(100svh - 68px); padding: 28px 17px 0; }
  .hero-copy{ padding: 20px 0 32px; }
  .hero-capabilities{ width: 100%; gap: 10px 24px; padding: 22px 0; }
  .hero-landscape{ width: 160%; left: -30%; opacity: .7; }
  .concept-eyebrow{ margin-bottom: 28px; }
  .product-landscape{ padding: 30px 0; }
  .landscape-label{ width: calc(100% - 34px); flex-wrap: wrap; row-gap: 2px; }
  .landscape-label span + span::before{ margin-inline: 8px; }
  .landscape-label span:nth-child(3)::before{ display: none; }
  .pricing-grid{ grid-template-columns: minmax(0,1fr); gap: 24px; }
  .pricing-section{ padding: 65px 0; }
  .workflow-band{ padding: 65px 0; }
  .workflow-band header{ grid-template-columns: minmax(0,1fr); gap: 30px; }
  .workflow-steps{ margin-top: 35px; grid-template-columns: minmax(0,1fr); }
  .concept-faq{ padding: 65px 0; grid-template-columns: minmax(0,1fr); gap: 35px; }
  .concept-faq summary{ min-height: 72px; padding: 22px 0; }
  .concept-final{ padding: 65px 0; }
  .concept-final > div{ display: block; }
  .final-acquisition{ margin-top: 38px; }
  .concept-final .solid-cta{ margin: 0; }
  .concept-foot{ padding: 35px 0; grid-template-columns: minmax(0,1fr); gap: 16px; }
  .concept-foot nav{ justify-self: start; flex-wrap: wrap; column-gap: 22px; row-gap: 0; }
}
@media (max-width:480px){
  .concept-hero h1 br{ display: none; }
  .hero-actions{ display: grid; grid-template-columns: minmax(0,1fr); }
  .hero-actions .solid-cta{ width: 100%; }
}
@font-face{font-family:"Geist Mono";src:url("GeistMono-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
/* Product illustration mirrors the tonal application; the marketing layout is independent. */
.landing-product-mock{
  --proof-gutter:28px;--proof-mono:"Geist Mono",ui-monospace,monospace;
  --danger-text:#9f3f3b;--surface-rail:#e8e4da;--rail-highlight:#d3c7b5;--rail-mid:#eee8dc;
  width:100%;display:grid;grid-template-columns:244px minmax(0,1fr);overflow:hidden;
  background:var(--surface-canvas);color:var(--text-primary);font:400 14px/20px var(--body-font);text-align:left;
}
.landing-product-mock svg,.mock-attach svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mock-rail{
  min-width:0;padding:24px 16px 0;display:flex;flex-direction:column;
  background:linear-gradient(180deg,transparent,var(--surface-rail) min(42%,280px)),linear-gradient(140deg,var(--rail-highlight),var(--rail-mid) 120px,var(--surface-rail) 300px);color:var(--text-primary);
}
.mock-rail header,.mock-brand,.mock-rail-title,.mock-session span,.mock-title-line,.mock-msg-tag,.mock-attach{display:flex;align-items:center}
.mock-rail header{min-height:44px;justify-content:space-between;margin-bottom:14px}
.mock-brand{gap:8px}.mock-brand b{font-size:26px;font-weight:620;line-height:32px;letter-spacing:-.015em}
.mock-icon-button{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;background:var(--surface-raised);color:var(--accent-text);font-style:normal}.mock-icon-button svg{width:14px;height:14px}
.mock-search{height:44px;flex:none;margin-bottom:9px;padding:0 11px;display:flex;align-items:center;gap:9px;border-radius:8px;background:var(--surface-canvas);color:var(--text-muted);font-size:14px}.mock-search-icon{width:15px!important;height:15px!important;flex:none}
.mock-rail-title{min-height:32px;justify-content:space-between;margin:18px 0 7px}.mock-rail-title b{font-size:12px;font-weight:550}.mock-rail-title small{margin-right:auto;margin-left:6px;color:var(--text-muted);font-size:12px}.mock-rail-title span{color:var(--text-muted);font-size:12px;font-weight:550}
.mock-sessions{flex:1;min-height:0;display:grid;align-content:start;gap:8px;overflow:hidden}
.mock-session{height:78px;padding:7px 10px 6px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:36px 22px;align-content:center;align-items:center;gap:3px 8px;border-radius:10px}
.mock-session.selected{background:var(--surface-raised)}.mock-session b{grid-column:1/-1;grid-row:1;height:36px;padding-right:32px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;color:var(--text-secondary);font-size:14px;font-weight:550;line-height:18px;overflow-wrap:anywhere;white-space:normal}.mock-session.selected b{color:var(--text-primary);font-weight:630}.mock-session.unread b{color:var(--text-primary);font-weight:720}
.mock-provider-line{grid-column:1;grid-row:2;min-width:0;gap:8px;overflow:hidden;color:var(--text-muted);font-size:12px;line-height:18px}.mock-provider{width:18px;height:16px;display:grid;place-items:center;color:var(--text-muted);font-style:normal}.mock-provider img{width:13px;height:13px}.mock-provider.anthropic img{width:16px;height:12px}.mock-provider.xai{font-size:9px;font-weight:780;letter-spacing:-.025em}.mock-session time{min-width:0;overflow:hidden;color:var(--text-muted);font-size:12px;line-height:18px;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.mock-state{grid-column:2;grid-row:2;min-height:22px;padding:0 7px;justify-self:end;gap:5px;border-radius:4px;color:var(--text-muted);font-size:12px;font-weight:500;line-height:18px;white-space:nowrap}.mock-state.working{padding-right:5px;background:var(--agent-surface);color:var(--agent-text)}.mock-state.ready{color:var(--success-text)}.mock-session.unread .mock-state.ready{background:var(--success-surface);font-weight:690}.mock-orbit{width:14px!important;height:14px!important;display:block!important;flex:none;overflow:visible}.mock-orbit-track{opacity:.22}.mock-orbit-motion{transform-origin:7px 7px;animation:mock-orbit 1.25s linear infinite}.mock-orbit-dot{fill:currentColor;stroke:none}@keyframes mock-orbit{to{transform:rotate(360deg)}}
.mock-rail footer{margin:16px 0 12px;padding:16px 8px 8px;display:grid;gap:12px;border-radius:12px;background:var(--surface-canvas);color:var(--text-muted)}.mock-rail footer small{margin-inline:7px;overflow:hidden;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.mock-rail footer div{display:grid;grid-template-columns:1fr 1fr;gap:4px}.mock-rail footer svg{flex:none}.mock-rail footer span{min-height:44px;padding:7px 8px;display:flex;align-items:center;gap:7px;font:560 14px/16px var(--body-font)}
.mock-workspace{min-width:0;min-height:0;display:grid;align-content:start;background:var(--surface-canvas)}.mock-mobile-head{display:none}
.mock-session-head{min-width:0;padding:28px var(--proof-gutter) 20px;display:flex;align-items:center;justify-content:space-between;gap:20px}.mock-session-head>div{min-width:0}.mock-session-head>.mock-head-id{flex:1}.mock-title-line{gap:10px;min-width:0;flex-wrap:wrap}.mock-session-head h3{margin:0;font-size:28px;font-weight:580;line-height:36px;letter-spacing:-.015em;overflow-wrap:anywhere}
.mock-header-state{min-height:22px;padding:0 7px;display:inline-flex;align-items:center;flex:none;border-radius:4px;color:var(--text-muted);font-size:12px;font-weight:500;line-height:18px;white-space:nowrap}
.mock-session-head p{min-width:0;max-width:100%;margin:8px 0 0;display:flex;align-items:center;color:var(--text-muted);font:400 12px/18px var(--body-font);white-space:nowrap}
.mock-session-head p>span{min-width:0}.mock-session-head p>span:first-child{flex:none}.mock-session-head p i{margin:0 8px;font-style:normal}.mock-repositories{flex:1;overflow:hidden;text-overflow:ellipsis}.mock-session-head p .mock-context{display:none;flex:none}
.mock-head-side{display:flex;align-items:center;gap:20px;flex:none}.mock-context-meter{width:104px;color:var(--text-muted);font:400 12px/18px var(--body-font)}.mock-context-meter div{display:flex;justify-content:space-between;margin-bottom:4px}.mock-context-meter>i{height:3px;display:block;border-radius:3px;background:var(--surface-muted);overflow:hidden}.mock-context-meter>i::after{content:"";display:block;width:42%;height:100%;background:var(--agent-text)}

.mock-more{width:32px;height:32px;display:grid;place-items:center;flex:none;border-radius:8px;background:var(--surface-muted);color:var(--text-muted);font-style:normal}.mock-more svg{fill:currentColor;stroke:none}
.mock-tabs{min-height:52px;padding:4px 0;margin:0 var(--proof-gutter);display:flex;flex-wrap:nowrap;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none}.mock-tabs::-webkit-scrollbar{display:none}.mock-tabs>*{flex:none;min-height:44px;line-height:20px;padding:10px 14px;display:flex;align-items:center;border-radius:8px;color:var(--text-muted);font-size:14px;font-weight:550;white-space:nowrap}.mock-tabs b{background:var(--surface-raised);color:var(--text-primary)}
.mock-thread{min-width:0;min-height:0;padding:24px var(--proof-gutter);grid-auto-rows:max-content;display:grid;align-content:start;gap:20px;overflow:hidden}
.mock-msg{min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:20px;border-radius:8px;background:var(--surface-raised)}.mock-msg-tag{gap:10px;color:var(--accent-text);font-size:14px;font-weight:600;line-height:20px}.mock-msg-tag.agent{color:var(--agent-text)}.mock-msg-tag time{margin-left:auto;color:var(--text-muted);font-size:12px;font-weight:400;line-height:18px}.mock-msg-body{overflow-wrap:anywhere;color:var(--text-primary);font-size:16px;line-height:26px}
.mock-thinking,.mock-tool{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto 12px;align-items:center;min-width:0;min-height:48px;padding:12px 16px;gap:10px;border-radius:8px;background:var(--surface-muted)}
.mock-thread>:is(.mock-thinking,.mock-tool)+:is(.mock-thinking,.mock-tool){margin-top:-12px}
.mock-thinking b,.mock-tool b{grid-column:1;grid-row:1;color:var(--text-muted);font-size:14px;font-weight:600}.mock-thinking>span,.mock-tool code{grid-column:2;grid-row:1;min-width:0;overflow:hidden;color:var(--text-muted);font:400 14px/20px var(--body-font);text-overflow:ellipsis;white-space:nowrap}
.mock-thinking em,.mock-tool em{grid-column:4;grid-row:1;color:var(--success-text);font:400 12px/18px var(--body-font);font-style:normal;white-space:nowrap}.mock-thinking em::before,.mock-tool em::before{content:'✓';margin-right:4px}.mock-thinking>i,.mock-tool>i{grid-column:5;grid-row:1;width:7px;height:7px;margin-bottom:4px;border-right:1.5px solid var(--text-muted);border-bottom:1.5px solid var(--text-muted);transform:rotate(45deg)}.mock-diff-stats{grid-column:3;grid-row:1;color:var(--success-text);font:400 12px/18px var(--proof-mono);white-space:nowrap}.mock-diff-stats .is-delete{color:var(--danger-text)}.mock-turn-divider{padding:0 20px;color:var(--text-muted);font-size:12px;line-height:18px}
.example-result{min-width:0;color:var(--text-primary)}.example-result h4{margin:0;font:650 16px/26px var(--body-font);letter-spacing:-.01em}.example-result p{margin:6px 0 10px;font:400 16px/26px var(--body-font)}.example-result code{font:400 14px/22px var(--proof-mono)}.example-result pre{margin:0;padding:10px 13px;background:var(--surface-canvas);border-radius:6px;font:400 14px/22px var(--proof-mono);white-space:pre-wrap;overflow-wrap:anywhere}
.mock-composer{margin:12px var(--proof-gutter) 18px;display:flex;flex-direction:column;gap:8px;border-radius:12px;background:var(--surface-raised);overflow:hidden}.mock-composer p{height:97px;min-height:58px;margin:0;padding:14px 15px 5px;color:var(--text-muted);font:400 16px/26px var(--body-font)}.mock-composer footer{padding:7px 8px 9px 11px;display:flex;align-items:center;gap:10px;color:var(--text-muted);font:400 12px/16px var(--body-font)}.mock-attach{flex:none;height:32px;padding:0 7px;gap:7px;font:550 14px/20px var(--body-font)}.mock-attach svg{width:15px;height:15px}.mock-composer footer small{flex:1;color:var(--text-muted);font:400 12px/16px var(--body-font)}.mock-composer .mock-send{flex:none;height:32px;margin-left:auto;padding:0 11px;display:flex;align-items:center;gap:7px;border-radius:8px;background:var(--accent-solid);color:var(--on-accent);font:670 12px/20px var(--body-font)}.mock-send-icon{width:15px!important;height:15px!important;flex:0 0 15px}
@container proof (max-width:1100px){.mock-context-meter{display:none}.mock-session-head p .mock-context{display:inline}}
@container proof (max-width:700px){
  .landing-product-mock{--proof-gutter:13px;grid-template-columns:1fr}.mock-rail{display:none}
  .mock-mobile-head{min-height:52px;padding:4px 10.5px;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;background:var(--surface-rail);color:var(--text-primary)}.mock-mobile-head>svg{justify-self:center;width:18px;height:18px}.mock-mobile-brand{justify-self:center;transform:translateY(1px);font:680 17px/22px var(--body-font);letter-spacing:-.015em}.mock-mobile-brand b{font-weight:inherit}
  .mock-session-head{padding:16px var(--proof-gutter);gap:12px}.mock-session-head h3{font-size:22px;line-height:28px}.mock-tabs>*{padding-inline:12px}
  .mock-thread{padding-block:20px;gap:16px}.mock-msg{padding:16px}.mock-thread>:is(.mock-thinking,.mock-tool)+:is(.mock-thinking,.mock-tool){margin-top:-8px}
  .mock-thinking,.mock-tool{grid-template-columns:minmax(0,1fr) auto 12px;gap:4px 10px}.mock-thinking>span,.mock-tool code{grid-column:1/-1;grid-row:2}.mock-thinking em,.mock-tool em{grid-column:2}.mock-thinking>i,.mock-tool>i{grid-column:3}.mock-diff-stats{grid-column:1/-1;grid-row:3}
  .mock-turn-divider{padding-inline:16px}.mock-composer{gap:6px}.mock-composer p{height:96px;min-height:68px;padding:13px 14px 5px}.mock-composer footer{padding:7px 7px 8px 9px;gap:6px}.mock-composer footer small{display:none}.mock-attach{padding-inline:6px}.mock-composer .mock-send{padding-inline:10px}
}