/* AdaptOrch home: run explorer, ink band and cost trail.
   Derived from landing-lab-preview/assets/landing.css (reviewed preview, 9677b4365).
   Page-global rules (body background, smooth scroll, fixed grain) are removed. */
/* AdaptOrch / Paper Academic. Brand values retained from adaptor-page/styles.css.
   All application selectors are scoped. No font binaries or third-party assets. */
.ao-landing {
  --ao-paper: #ede6d6; --ao-paper-2: #f3ece0; --ao-paper-deep: #e4dcc6;
  --ao-surface: #f7f1e6; --ao-ink: #141414; --ao-ink-soft: #2a2a2a;
  --ao-muted: #5f5c54; --ao-accent: #b8261f; --ao-line: rgba(20,20,20,.17);
  --ao-line-soft: rgba(20,20,20,.085); --ao-font-display: 'Newsreader', 'Iowan Old Style', Georgia, 'Noto Serif Display', serif;
  --ao-font-body: 'IBM Plex Sans', Inter, 'Helvetica Neue', Arial, sans-serif;
  --ao-font-mono: 'JetBrains Mono', 'IBM Plex Mono', 'Liberation Mono', 'Courier New', monospace;
  color: var(--ao-ink); background: transparent; font-family: var(--ao-font-body);
  font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums; isolation: isolate; position: relative;
  overflow-wrap: break-word;
}
.ao-landing:lang(ko) { --ao-font-display: 'Noto Serif KR', 'Noto Serif CJK KR', Batang, serif; --ao-font-body: 'IBM Plex Sans', Pretendard, 'Apple SD Gothic Neo', 'Noto Sans CJK KR', 'Malgun Gothic', sans-serif; word-break: keep-all; }
.ao-landing:lang(zh-CN) { --ao-font-display: 'Noto Serif SC', 'Noto Serif CJK SC', 'Songti SC', serif; --ao-font-body: 'IBM Plex Sans', 'PingFang SC', 'Noto Sans CJK SC', sans-serif; }
.ao-landing *, .ao-landing *::before, .ao-landing *::after { box-sizing: border-box; }
.ao-landing * { -webkit-tap-highlight-color: rgba(184,38,31,.1); }
.ao-landing ::selection { color: var(--ao-paper); background: var(--ao-accent); }
.ao-landing [hidden] { display: none !important; }
.ao-landing h1, .ao-landing h2, .ao-landing h3, .ao-landing h4, .ao-landing p, .ao-landing ul, .ao-landing ol, .ao-landing figure { margin: 0; }
.ao-landing button, .ao-landing input, .ao-landing select { font: inherit; color: inherit; }
.ao-landing button { cursor: pointer; }
.ao-landing button:disabled { cursor: default; }
.ao-landing button:disabled:not(.ao-node) { opacity: .65; }
.ao-landing a { color: inherit; text-decoration: none; }
.ao-landing a, .ao-landing button { touch-action: manipulation; }
.ao-landing button { background: none; border: none; }
.ao-landing a:focus-visible, .ao-landing button:focus-visible, .ao-landing summary:focus-visible, .ao-landing input:focus-visible, .ao-landing [tabindex]:focus-visible { outline: 2px solid var(--ao-accent); outline-offset: 4px; }
.ao-landing a:hover { text-decoration-color: var(--ao-accent); }
.ao-landing svg { display: block; }
.ao-landing code { font-family: var(--ao-font-mono); }
.ao-landing section, .ao-landing [id] { scroll-margin-top: 32px; }
.ao-landing .ao-shell { width: min(1200px, calc(100% - 96px)); margin-inline: auto; position: relative; }
.ao-landing .ao-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip: rect(0,0,0,0); white-space: nowrap; overflow: hidden; border: 0; }
.ao-landing .ao-skip { position: absolute; top: -100px; left: 16px; z-index: 30; background: var(--ao-ink); color: var(--ao-paper); padding: 12px 20px; }
.ao-landing .ao-skip:focus { top: 12px; }
.ao-landing .ao-micro, .ao-landing .ao-section-meta, .ao-landing .ao-header-meta { font: 10px/1.5 var(--ao-font-mono); letter-spacing: 1px; text-transform: uppercase; }
.ao-landing .ao-micro { color: var(--ao-muted); }
.ao-landing .ao-header-meta { display: flex; justify-content: space-between; padding: 17px 0 10px; color: var(--ao-muted); border-bottom: 1px solid var(--ao-line); }
.ao-landing .ao-nav { display: flex; align-items: center; gap: 28px; min-height: 76px; border-bottom: 1px solid var(--ao-ink); }
.ao-landing .ao-brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.ao-landing .ao-brand svg { width: 38px; height: 38px; }
.ao-landing .ao-brand span { font: 600 23px/1.2 Inter, 'Helvetica Neue', Arial, sans-serif; letter-spacing: -.85px; }
.ao-landing .ao-desktop-nav { display: flex; gap: 24px; margin-left: auto; }
.ao-landing .ao-desktop-nav a { font-size: 12px; white-space: nowrap; }
.ao-landing .ao-desktop-nav sup { margin-right: 5px; color: var(--ao-muted); font: 8px var(--ao-font-mono); }
.ao-landing .ao-desktop-nav a:hover, .ao-landing .ao-nav-docs:hover { color: var(--ao-accent); }
.ao-landing .ao-nav-right { display: flex; gap: 20px; align-items: center; }
.ao-landing .ao-languages { display: flex; align-items: center; gap: 8px; font: 10px var(--ao-font-mono); }
.ao-landing .ao-languages a { padding: 10px 1px; color: var(--ao-muted); }
.ao-landing .ao-languages a[aria-current='page'] { color: var(--ao-accent); text-decoration: underline; text-underline-offset: 5px; }
.ao-landing .ao-nav-docs { font-size: 11px; white-space: nowrap; }
.ao-landing .ao-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 26px; min-height: 50px; padding: 12px 20px; background: var(--ao-ink); color: var(--ao-surface); border: 1px solid var(--ao-ink); border-radius: 3px; font-weight: 500; font-size: 13px; line-height: 1.45; transition: background .18s, transform .18s; }
.ao-landing .ao-button:hover { background: var(--ao-ink-soft); transform: translateY(-1px); }
.ao-landing .ao-button-small { min-height: 40px; padding: 9px 14px; font-size: 11px; gap: 20px; }
.ao-landing .ao-button-outline { color: var(--ao-ink); background: transparent; }
.ao-landing .ao-button-outline:hover { background: var(--ao-paper-deep); }
.ao-landing .ao-text-link { display: inline-flex; align-items: center; gap: 15px; min-height: 44px; padding: 4px 0; font-size: 13px; border-bottom: 1px solid var(--ao-line); line-height: 1.45; }
.ao-landing .ao-text-link:hover { color: var(--ao-accent); border-color: var(--ao-accent); }
.ao-landing .ao-mobile-menu { display: none; }
.ao-landing .ao-depth-rail { position: fixed; left: max(16px, calc((100vw - 1352px)/2)); top: 31vh; color: var(--ao-muted); z-index: 0; font: 9px var(--ao-font-mono); width: 28px; }
.ao-landing .ao-depth-rail > span { writing-mode: vertical-rl; letter-spacing: 2px; margin: 0 auto 17px; }
.ao-landing .ao-depth-rail b { position: absolute; left: 0; font-weight: 400; }
.ao-landing .ao-depth-rail b:nth-last-child(2) { top: 111px; }
.ao-landing .ao-depth-rail b:last-child { bottom: 0; }
.ao-landing .ao-depth-track { width: 1px; height: 158px; margin-left: 26px; background: var(--ao-line); }
.ao-landing .ao-depth-track i { display: block; height: 100%; background: var(--ao-accent); transform: scaleY(0); transform-origin: top; width: 2px; }
.ao-landing .ao-section-meta { display: flex; justify-content: space-between; gap: 16px; color: var(--ao-muted); }
.ao-landing .ao-section-meta > :last-child { text-align: right; }
.ao-landing .ao-hero { padding-top: 23px; }
.ao-landing .ao-hero-grid { display: grid; grid-template-columns: .86fr 1.14fr; gap: 42px; padding-top: 33px; align-items: center; }
.ao-landing .ao-hero-copy { padding: 10px 0 36px; position: relative; }
.ao-landing .ao-eyebrow { font: 10px/1.6 var(--ao-font-mono); letter-spacing: 1.25px; display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
.ao-landing .ao-eyebrow i { width: 5px; height: 5px; background: var(--ao-accent); flex: 0 0 auto; }
.ao-landing h1 { font-family: var(--ao-font-display); font-weight: 400; font-size: clamp(52px, 5.2vw, 76px); line-height: 1.06; letter-spacing: -3.6px; }
.ao-landing h1 em { color: var(--ao-accent); font-weight: 400; }
.ao-landing .ao-hero-body { max-width: 410px; margin-top: 26px; font-size: 16px; line-height: 1.7; color: var(--ao-ink-soft); }
.ao-landing .ao-hero-actions { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-top: 29px; }
.ao-landing .ao-hero-actions .ao-text-link { font-size: 12px; gap: 7px; border-bottom: 0; }
.ao-landing .ao-hero-note { margin-top: 13px; font-size: 10px; letter-spacing: 0; text-transform: none; }
.ao-landing .ao-hand-note { display: flex; align-items: center; gap: 12px; color: var(--ao-muted); margin-top: 27px; padding-left: 100px; }
.ao-landing .ao-hand-note svg { width: 75px; flex: 0 0 75px; transform: rotate(-15deg); }
.ao-landing .ao-hand-note span { font: italic 14px/1.45 var(--ao-font-display); max-width: 165px; }
.ao-landing .ao-playground { min-width: 0; border: 1px solid rgba(20,20,20,.33); border-radius: 4px; background: var(--ao-surface); box-shadow: 7px 9px 0 rgba(20,20,20,.035); position: relative; }
.ao-landing .ao-playground::before, .ao-landing .ao-playground::after { content: '+'; position: absolute; font: 14px var(--ao-font-mono); color: var(--ao-muted); top: -10px; left: -11px; }
.ao-landing .ao-playground::after { top: auto; left: auto; right: -11px; bottom: -11px; }
.ao-landing .ao-panel-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 17px; border-bottom: 1px solid var(--ao-line); background: var(--ao-paper-2); font: 9px/1.4 var(--ao-font-mono); letter-spacing: .6px; border-radius: 4px 4px 0 0; }
.ao-landing .ao-register { display: inline-flex; align-items: center; gap: 8px; }
.ao-landing .ao-register i { display: inline-block; width: 6px; height: 6px; border: 1px solid var(--ao-ink); border-radius: 50%; }
.ao-landing .ao-sample-tag { font: 8px/1.5 var(--ao-font-mono); letter-spacing: .6px; color: var(--ao-accent); border: 1px solid rgba(184,38,31,.3); padding: 2px 6px; white-space: nowrap; }
.ao-landing .ao-demo-heading { padding: 17px 18px 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ao-landing .ao-demo-heading h2 { font: 400 23px/1.25 var(--ao-font-display); letter-spacing: -.65px; }
.ao-landing .ao-demo-heading p { color: var(--ao-muted); font-size: 10px; margin-top: 3px; }
.ao-landing .ao-icon-button { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid var(--ao-line); border-radius: 3px; }
.ao-landing .ao-icon-button svg { width: 15px; height: 15px; }
.ao-landing .ao-icon-button:hover { background: var(--ao-paper); }
.ao-landing .ao-scenarios { margin: 0 18px; display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--ao-line); border-radius: 3px; overflow: visible; }
.ao-landing .ao-scenarios button { min-height: 36px; font-size: 10px; line-height: 1.4; padding: 8px 5px; position: relative; border-right: 1px solid var(--ao-line); }
.ao-landing .ao-scenarios button:last-child { border-right: 0; }
.ao-landing .ao-scenarios button[aria-pressed='true'] { background: var(--ao-ink); color: var(--ao-surface); }
.ao-landing .ao-scenarios button:hover:not([aria-pressed='true']) { background: var(--ao-paper); }
.ao-landing .ao-network { position: relative; width: 100%; aspect-ratio: 710/350; margin-top: 7px; }
.ao-landing .ao-wires { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--ao-muted); }
.ao-landing .ao-wires-mobile { display: none; }
.ao-landing .ao-chart-label { font: 8.5px var(--ao-font-mono); letter-spacing: 1px; fill: #5f5c54; }
.ao-landing .ao-wire { fill: none; stroke: #adab9e; stroke-width: 1.15; }
.ao-landing .ao-wire-pending { stroke-dasharray: 3 5; opacity: .7; }
.ao-landing .ao-wire-done { stroke: #6b675e; }
.ao-landing .ao-wire-active { stroke: var(--ao-accent); stroke-width: 1.6; stroke-dasharray: 5 5; }
.ao-landing .ao-playing .ao-wire-active { animation: ao-wire-travel 1.2s linear infinite; }
@keyframes ao-wire-travel { to { stroke-dashoffset: -20; } }
.ao-landing .ao-node { position: absolute; left: var(--x); top: var(--y); width: 17.1831%; height: 23.4%; border: 1px solid #c2bbac; padding: 8px 9px; text-align: left; background: var(--ao-surface); border-radius: 3px; line-height: 1.2; transition: border-color .18s, background .18s, box-shadow .18s; }
.ao-landing .ao-node:hover { border-color: var(--ao-ink); box-shadow: 0 2px 4px rgba(20,20,20,.07); }
.ao-landing .ao-node-top { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.ao-landing .ao-node-top svg { width: 13px; height: 13px; }
.ao-landing .ao-node-top span { font: 8px var(--ao-font-mono); color: var(--ao-muted); }
.ao-landing .ao-node-top i { margin-left: auto; height: 4px; width: 4px; border-radius: 50%; background: var(--ao-ink); }
.ao-landing .ao-node strong { display: block; font-size: 11px; font-weight: 500; letter-spacing: -.2px; white-space: nowrap; }
.ao-landing .ao-node-sub { display: block; font: 7.4px/1.5 var(--ao-font-mono); color: var(--ao-muted); margin-top: 4px; white-space: nowrap; }
.ao-landing .ao-node-status { display: none; }
.ao-landing .ao-node.ao-state-partial, .ao-landing .ao-node.ao-state-env { border-color: #be786d; background: #f4e7d9; }
.ao-landing .ao-node.ao-state-partial .ao-node-top i, .ao-landing .ao-node.ao-state-env .ao-node-top i { background: var(--ao-accent); }
.ao-landing .ao-node.ao-state-error { border-color: var(--ao-accent); background: #f1e0d3; }
.ao-landing .ao-node.ao-state-error .ao-node-top i { background: var(--ao-accent); border-radius: 0; transform: rotate(45deg); }
.ao-landing .ao-node.ao-state-running { border-color: var(--ao-accent); background: var(--ao-paper-2); box-shadow: 0 0 0 2px rgba(184,38,31,.1); }
.ao-landing .ao-node.ao-state-pending { border-style: dashed; background: var(--ao-paper-2); }
.ao-landing .ao-node.ao-state-pending .ao-node-top i { background: transparent; border: 1px solid var(--ao-muted); width: 5px; height: 5px; }
.ao-landing .ao-node.ao-selected { outline: 1px solid var(--ao-accent); outline-offset: 3px; }
.ao-landing .ao-graph-key { display: flex; justify-content: center; gap: 18px; font: 8px/1.5 var(--ao-font-mono); color: var(--ao-muted); margin: -3px 8px 12px; }
.ao-landing .ao-graph-key span { display: flex; align-items: center; gap: 5px; }
.ao-landing .ao-graph-key i { width: 4px; height: 4px; }
.ao-landing .ao-key-ink { background: var(--ao-ink); }
.ao-landing .ao-key-accent { background: var(--ao-accent); }
.ao-landing .ao-key-empty { border: 1px solid var(--ao-muted); }
.ao-landing .ao-inspector { margin: 0 18px; min-height: 110px; padding: 12px 13px 13px; background: var(--ao-paper-2); border: 1px solid var(--ao-line); border-left: 2px solid var(--ao-accent); }
.ao-landing .ao-inspector-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ao-landing .ao-inspector-head .ao-micro { font-size: 8px; }
.ao-landing .ao-inspector h3 { font-size: 12px; font-weight: 600; margin: 5px 0 4px; }
.ao-landing .ao-inspector > p { font-size: 10px; color: var(--ao-ink-soft); line-height: 1.55; }
.ao-landing .ao-status { font: 8px/1.5 var(--ao-font-mono); letter-spacing: .2px; padding: 3px 6px; border: 1px solid var(--ao-line); white-space: nowrap; }
.ao-landing .ao-status.ao-state-partial, .ao-landing .ao-status.ao-state-error, .ao-landing .ao-status.ao-state-env { color: var(--ao-accent); border-color: rgba(184,38,31,.33); }
.ao-landing .ao-player { display: flex; align-items: center; gap: 15px; padding: 11px 18px 4px; }
.ao-landing .ao-play-button { display: inline-flex; gap: 8px; align-items: center; font: 10px var(--ao-font-mono); min-width: 82px; min-height: 34px; padding: 0; }
.ao-landing .ao-play-button > :first-child { font-size: 17px; color: var(--ao-accent); }
.ao-landing .ao-progress { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.ao-landing .ao-progress input { width: 100%; min-width: 25px; height: 18px; accent-color: var(--ao-accent); cursor: pointer; }
.ao-landing .ao-progress > span:last-child { font: 8px var(--ao-font-mono); white-space: nowrap; }
.ao-landing .ao-player .ao-icon-button { height: 30px; width: 30px; }
.ao-landing .ao-demo-footnote { font: 8px/1.6 var(--ao-font-mono); color: var(--ao-muted); padding: 5px 18px 12px; }
.ao-landing .ao-conditions { font-size: 10px; line-height: 1.6; color: var(--ao-muted); max-width: 740px; margin-top: 25px; }
.ao-landing .ao-principles { margin-top: 39px; display: flex; align-items: center; gap: 28px; padding: 26px 0; border-top: 1px solid var(--ao-line); border-bottom: 1px solid var(--ao-ink); }
.ao-landing .ao-principles > span { font: 400 22px/1.4 var(--ao-font-display); letter-spacing: -.4px; }
.ao-landing .ao-principles > b { color: var(--ao-accent); font-weight: 400; }
.ao-landing .ao-principles p { font-size: 11px; color: var(--ao-muted); margin-left: auto; max-width: 190px; }
.ao-landing .ao-section { padding: 40px 0 80px; border-bottom: 1px solid var(--ao-line); }
.ao-landing .ao-section h2, .ao-landing .ao-final h2 { font-family: var(--ao-font-display); font-weight: 400; line-height: 1.1; font-size: clamp(34px, 3.5vw, 49px); letter-spacing: -2px; }
.ao-landing .ao-section h2 em { font-weight: 400; color: var(--ao-muted); }
.ao-landing .ao-product-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 74px; margin-top: 50px; align-items: center; }
.ao-landing .ao-section-copy > p { max-width: 375px; color: var(--ao-muted); font-size: 14px; line-height: 1.75; margin-top: 23px; }
.ao-landing .ao-feature-points { list-style: none; padding: 0; margin: 26px 0 16px; }
.ao-landing .ao-feature-points li { display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--ao-line); font-size: 12px; gap: 16px; }
.ao-landing .ao-feature-points span { color: var(--ao-accent); font: 9px var(--ao-font-mono); }
.ao-landing .ao-workspace { min-width: 0; background: var(--ao-surface); border: 1px solid #a8a293; border-radius: 5px; box-shadow: 0 12px 36px rgba(20,20,20,.035); }
.ao-landing .ao-window-bar { display: flex; align-items: center; gap: 15px; padding: 10px 14px; border-bottom: 1px solid var(--ao-line); font: 8px var(--ao-font-mono); letter-spacing: .6px; background: var(--ao-paper-2); border-radius: 5px 5px 0 0; }
.ao-landing .ao-window-dots { display: flex; gap: 4px; }
.ao-landing .ao-window-dots i { width: 4px; height: 4px; border: 1px solid #969181; border-radius: 50%; }
.ao-landing .ao-window-id { margin-left: auto; color: var(--ao-muted); }
.ao-landing .ao-workspace-head { display: flex; justify-content: space-between; align-items: center; padding: 21px 22px 16px; gap: 14px; }
.ao-landing .ao-workspace-head .ao-micro { font-size: 8px; letter-spacing: .5px; }
.ao-landing .ao-workspace-head h3 { margin-top: 6px; font-size: 16px; letter-spacing: -.4px; font-weight: 500; }
.ao-landing .ao-tabs { display: flex; padding: 0 21px; border-bottom: 1px solid var(--ao-line); gap: 23px; align-items: center; }
.ao-landing .ao-tabs button { font-size: 10px; border-bottom: 2px solid transparent; min-height: 42px; padding: 8px 3px; }
.ao-landing .ao-tabs button[aria-selected='true'] { border-bottom-color: var(--ao-accent); color: var(--ao-accent); }
.ao-landing .ao-tabs > span { margin-left: auto; color: var(--ao-muted); font: 7px var(--ao-font-mono); letter-spacing: .4px; }
.ao-landing .ao-tab-panel { padding: 21px 22px; min-height: 349px; }
.ao-landing .ao-review-banner { display: flex; align-items: center; gap: 12px; }
.ao-landing .ao-note-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--ao-accent); border: 1px solid rgba(184,38,31,.3); font: 20px/1 var(--ao-font-display); width: 32px; height: 36px; border-radius: 3px; flex: 0 0 auto; }
.ao-landing .ao-review-banner .ao-micro { font-size: 8px; color: var(--ao-accent); }
.ao-landing .ao-review-banner h4 { font-size: 15px; font-weight: 500; margin-top: 3px; letter-spacing: -.25px; }
.ao-landing .ao-result-description { margin-top: 14px; font-size: 11px; color: var(--ao-muted); line-height: 1.7; }
.ao-landing .ao-report-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 21px; }
.ao-landing .ao-report-columns .ao-micro { font-size: 8px; margin-bottom: 8px; }
.ao-landing .ao-file-list { list-style: none; padding: 0; }
.ao-landing .ao-file-list li, .ao-landing .ao-check-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 9px; padding: 7px 0; border-bottom: 1px solid var(--ao-line-soft); }
.ao-landing .ao-file-list code { font-size: 8.5px; }
.ao-landing .ao-file-list span { font: 8px var(--ao-font-mono); white-space: nowrap; }
.ao-landing .ao-outside-scope { color: var(--ao-accent); }
.ao-landing .ao-check-row b { font: 8px var(--ao-font-mono); white-space: nowrap; }
.ao-landing .ao-check-row .ao-neutral { color: var(--ao-muted); }
.ao-landing .ao-review-note { margin-top: 20px; padding: 12px; background: var(--ao-paper-2); border-left: 1px solid var(--ao-accent); }
.ao-landing .ao-review-note .ao-micro { font-size: 7.5px; letter-spacing: .5px; }
.ao-landing .ao-review-note > p:last-child { font-size: 10px; line-height: 1.65; margin-top: 5px; }
.ao-landing .ao-workspace-footer { padding: 12px 21px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: space-between; border-top: 1px solid var(--ao-line); font-size: 8px; color: var(--ao-muted); }
.ao-landing .ao-workspace-footer code { font-size: 8px; }
.ao-landing .ao-caption { font: 9px/1.6 var(--ao-font-mono); color: var(--ao-muted); margin-top: 22px; text-align: right; }
.ao-landing .ao-timeline { list-style: none; padding: 0; }
.ao-landing .ao-timeline li { position: relative; border-left: 1px solid var(--ao-line); padding: 1px 0 13px 18px; margin-left: 4px; }
.ao-landing .ao-timeline li:last-child { padding-bottom: 0; }
.ao-landing .ao-timeline li::before { content: ''; position: absolute; top: 5px; left: -3px; width: 5px; height: 5px; background: var(--ao-accent); }
.ao-landing .ao-timeline-top { display: flex; gap: 12px; justify-content: space-between; font-size: 10px; }
.ao-landing .ao-timeline p { font-size: 9px; line-height: 1.55; margin-top: 4px; color: var(--ao-muted); }
.ao-landing .ao-inline-usage strong { display: block; font: 400 48px/1.4 var(--ao-font-display); margin: 8px 0 20px; }
.ao-landing .ao-inline-usage > p:not(.ao-micro) { font-size: 12px; color: var(--ao-muted); max-width: 380px; }
.ao-landing .ao-inline-usage a { margin-top: 25px; }
.ao-landing .ao-section-heading { display: flex; gap: 70px; align-items: flex-end; justify-content: space-between; margin-top: 46px; }
.ao-landing .ao-section-heading > p { font-size: 13px; line-height: 1.75; color: var(--ao-muted); max-width: 360px; }
.ao-landing .ao-how-flow { display: flex; align-items: center; gap: 20px; padding: 38px 50px 28px; margin-top: 36px; background-image: radial-gradient(rgba(20,20,20,.12) .6px, transparent .6px); background-size: 16px 16px; }
.ao-landing .ao-how-flow > div { display: flex; flex-direction: column; align-items: center; width: 155px; flex: 0 0 155px; }
.ao-landing .ao-how-flow > div > span:last-child { font: 9px var(--ao-font-mono); letter-spacing: 1.1px; margin-top: 18px; }
.ao-landing .ao-how-flow > svg { height: 40px; width: 100%; min-width: 20px; color: var(--ao-muted); fill: none; stroke: currentColor; stroke-width: 1px; }
.ao-landing .ao-code-symbol, .ao-landing .ao-receipt-symbol { display: grid; place-items: center; width: 52px; height: 60px; border: 1px solid var(--ao-line); background: var(--ao-paper); border-radius: 3px; font: 22px var(--ao-font-mono); }
.ao-landing .ao-flow-brand svg { width: 66px; height: 66px; background: var(--ao-paper); }
.ao-landing .ao-steps-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 35px; margin: 24px 0 22px; }
.ao-landing .ao-step-card { border-top: 1px solid var(--ao-line); padding-top: 23px; }
.ao-landing .ao-step-number { font: 10px var(--ao-font-mono); color: var(--ao-accent); }
.ao-landing .ao-step-card h3 { font: 400 25px/1.3 var(--ao-font-display); margin-top: 13px; letter-spacing: -.7px; }
.ao-landing .ao-step-card p { margin-top: 12px; font-size: 12px; color: var(--ao-muted); max-width: 300px; line-height: 1.75; }
.ao-landing .ao-usage-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 85px; align-items: center; margin-top: 45px; }
.ao-landing .ao-usage-toggle { display: inline-flex; border: 1px solid var(--ao-line); border-radius: 3px; margin-top: 26px; }
.ao-landing .ao-usage-toggle button { padding: 11px 17px; min-height: 43px; font-size: 11px; }
.ao-landing .ao-usage-toggle button[aria-pressed='true'] { background: var(--ao-ink); color: var(--ao-paper); }
.ao-landing .ao-section-copy > .ao-usage-note { font-size: 10px; margin-top: 18px; letter-spacing: 0; text-transform: none; }
.ao-landing .ao-cost-card { background: var(--ao-surface); padding: 25px; border: 1px solid var(--ao-line); border-radius: 4px; min-width: 0; }
.ao-landing .ao-cost-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.ao-landing .ao-cost-heading .ao-micro { font-size: 9px; }
.ao-landing .ao-cost-total { display: flex; align-items: baseline; flex-wrap: wrap; gap: 20px; margin-top: 16px; }
.ao-landing .ao-cost-total > strong { font: 400 53px/1.15 var(--ao-font-display); letter-spacing: -2px; }
.ao-landing .ao-cost-total > span { color: var(--ao-accent); font: 10px var(--ao-font-mono); }
.ao-landing .ao-usage-stats { font: 9px/1.6 var(--ao-font-mono); color: var(--ao-muted); margin-top: 12px; }
.ao-landing .ao-cost-chart { display: flex; height: 8px; gap: 3px; margin-top: 22px; }
.ao-landing .ao-cost-chart span { background: var(--ao-ink); min-width: 4px; }
.ao-landing .ao-cost-chart .ao-chart-second { opacity: .48; }
.ao-landing .ao-cost-chart .ao-chart-unknown { flex: 0 0 30px; background: repeating-linear-gradient(135deg, transparent 0 3px, #b8261f 3px 4px); border: 1px solid var(--ao-accent); }
.ao-landing .ao-cost-table { width: 100%; border-collapse: collapse; margin-top: 22px; text-align: left; }
.ao-landing .ao-cost-table th { font: 8px var(--ao-font-mono); color: var(--ao-muted); padding-bottom: 10px; font-weight: 400; border-bottom: 1px solid var(--ao-line); }
.ao-landing .ao-cost-table td { padding: 9px 0; border-bottom: 1px solid var(--ao-line-soft); font-size: 10px; }
.ao-landing .ao-cost-table th:last-child, .ao-landing .ao-cost-table td:last-child { text-align: right; }
.ao-landing .ao-cost-table td:nth-child(2), .ao-landing .ao-cost-table td:last-child { font: 9px var(--ao-font-mono); }
.ao-landing .ao-cost-table .ao-unreported { color: var(--ao-accent); }
.ao-landing .ao-retry-note { margin-top: 13px; font-size: 8px; text-transform: none; letter-spacing: .3px; }
.ao-landing .ao-cost-disclaimer { font-size: 9px; color: var(--ao-muted); line-height: 1.65; margin-top: 15px; }
.ao-landing .ao-pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 38px; }
.ao-landing .ao-plan { padding: 30px; border: 1px solid var(--ao-line); display: flex; flex-direction: column; align-items: flex-start; border-radius: 3px; }
.ao-landing .ao-plan-free { background: var(--ao-surface); border-top: 2px solid var(--ao-ink); }
.ao-landing .ao-plan-price { display: flex; align-items: baseline; gap: 12px; margin: 15px 0; min-height: 60px; }
.ao-landing .ao-plan-price strong { font: 400 60px/1.2 var(--ao-font-display); letter-spacing: -2px; }
.ao-landing .ao-plan-price span { color: var(--ao-muted); font-size: 12px; }
.ao-landing .ao-plan-price .ao-pro-title { font-size: 44px; margin-top: 10px; letter-spacing: -1.5px; }
.ao-landing .ao-plan h3 { font-size: 16px; font-weight: 500; margin-bottom: 12px; }
.ao-landing .ao-plan > p:not(.ao-micro) { font-size: 12px; color: var(--ao-muted); line-height: 1.8; max-width: 400px; }
.ao-landing .ao-plan ul { list-style: none; padding: 0; margin: 22px 0 30px; }
.ao-landing .ao-plan li { font-size: 12px; padding: 6px 0 6px 20px; position: relative; }
.ao-landing .ao-plan li::before { content: '✓'; position: absolute; left: 0; color: var(--ao-muted); }
.ao-landing .ao-plan .ao-button { width: 100%; margin-top: auto; }
.ao-landing .ao-runner-callout { display: flex; justify-content: space-between; gap: 40px; align-items: center; padding: 26px 0 0; }
.ao-landing .ao-runner-callout h3 { font-size: 13px; font-weight: 500; }
.ao-landing .ao-runner-callout p { font-size: 11px; color: var(--ao-muted); margin-top: 6px; max-width: 680px; }
.ao-landing .ao-runner-callout a { flex: 0 0 auto; font-size: 11px; }
.ao-landing .ao-faq-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 60px; margin-top: 40px; }
.ao-landing .ao-faq-grid > div { border-top: 1px solid var(--ao-line); }
.ao-landing .ao-faq-item { border-bottom: 1px solid var(--ao-line); }
.ao-landing .ao-faq-item summary { display: flex; align-items: center; gap: 18px; cursor: pointer; list-style: none; min-height: 64px; padding: 15px 0; font-size: 13px; }
.ao-landing .ao-faq-item summary::-webkit-details-marker { display: none; }
.ao-landing .ao-faq-number { color: var(--ao-muted); font: 9px var(--ao-font-mono); }
.ao-landing .ao-plus { font-size: 19px; font-weight: 300; margin-left: auto; color: var(--ao-muted); }
.ao-landing .ao-faq-item[open] .ao-plus { transform: rotate(45deg); color: var(--ao-accent); }
.ao-landing .ao-faq-item > p { font-size: 12px; line-height: 1.8; color: var(--ao-muted); padding: 0 30px 22px; }
.ao-landing .ao-final { position: relative; padding: 78px 0 92px; overflow: hidden; }
.ao-landing .ao-final > .ao-micro { margin-bottom: 22px; }
.ao-landing .ao-final h2 { font-size: clamp(43px,5vw,70px); line-height: 1.07; letter-spacing: -3px; position: relative; }
.ao-landing .ao-final h2 em { color: var(--ao-accent); font-weight: 400; }
.ao-landing .ao-final > p:not(.ao-micro) { margin-top: 20px; font-size: 13px; color: var(--ao-muted); position: relative; }
.ao-landing .ao-final-actions { display: flex; gap: 30px; align-items: center; margin-top: 28px; position: relative; }
.ao-landing .ao-final-art { width: 420px; height: 420px; position: absolute; right: 40px; top: 31px; opacity: .09; transform: rotate(25deg); }
.ao-landing .ao-final-art svg { width: 100%; height: 100%; }
.ao-landing .ao-footer { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; border-top: 1px solid var(--ao-ink); padding: 31px 0 20px; gap: 24px; }
.ao-landing .ao-footer .ao-brand svg { height: 30px; width: 30px; }
.ao-landing .ao-footer .ao-brand span { font-size: 19px; }
.ao-landing .ao-footer p { font-size: 11px; color: var(--ao-muted); margin-top: 10px; }
.ao-landing .ao-footer nav { display: flex; gap: 26px; font-size: 11px; padding-top: 8px; }
.ao-landing .ao-footer nav a { min-height: 32px; display: inline-block; }
.ao-landing .ao-footer-bottom { flex: 1 0 100%; display: flex; gap: 25px; justify-content: space-between; color: var(--ao-muted); font: 9px/1.6 var(--ao-font-mono); border-top: 1px solid var(--ao-line); padding-top: 16px; margin-top: 12px; }
.ao-landing .ao-toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); background: var(--ao-ink); color: var(--ao-paper); padding: 13px 18px; font-size: 12px; max-width: calc(100% - 36px); z-index: 50; border-radius: 4px; box-shadow: 0 4px 20px rgba(0,0,0,.12); }
.ao-landing .ao-copy-fallback { position: fixed; bottom: 25px; right: 25px; z-index: 51; width: min(430px,calc(100% - 50px)); background: var(--ao-surface); border: 1px solid var(--ao-ink); padding: 18px; box-shadow: 0 3px 30px rgba(0,0,0,.1); }
.ao-landing .ao-copy-fallback label { display: block; font-size: 12px; }
.ao-landing .ao-copy-fallback input { width: 100%; background: var(--ao-paper); border: 1px solid var(--ao-line); padding: 10px; font-size: 11px; margin: 10px 0; }
.ao-landing .ao-copy-fallback button { border: 1px solid var(--ao-line); padding: 5px 12px; font-size: 12px; }
.ao-landing .ao-no-script { margin: 12px; font-size: 12px; border: 1px solid var(--ao-accent); padding: 12px; }
/* Language-specific optical corrections, not different branding. */
.ao-landing:lang(ko) h1 { font-size: clamp(40px,4.25vw,62px); letter-spacing: -2.6px; line-height: 1.28; }
.ao-landing:lang(ko) .ao-section h2 { font-size: clamp(29px,3vw,43px); line-height: 1.25; letter-spacing: -1.6px; }
.ao-landing:lang(ko) .ao-desktop-nav { gap: 17px; }
.ao-landing:lang(ko) .ao-hero-actions { gap: 13px; }
.ao-landing:lang(zh-CN) h1 { font-size: clamp(43px,4.3vw,63px); letter-spacing: -2px; line-height: 1.25; }
.ao-landing:lang(zh-CN) .ao-section h2 { line-height: 1.28; }
/* Tablet: keep the graph legible instead of shrinking a desktop dashboard. */
@media (max-width: 1250px) {
  .ao-landing .ao-shell { width: calc(100% - 64px); }
  .ao-landing .ao-depth-rail { display: none; }
  .ao-landing .ao-nav { gap: 20px; }
  .ao-landing .ao-nav-right { gap: 12px; }
  .ao-landing .ao-nav-docs, .ao-landing .ao-nav-right > .ao-languages { display: none; }
  .ao-landing .ao-desktop-nav { gap: 19px; }
  .ao-landing .ao-hero-grid { grid-template-columns: .8fr 1.2fr; gap: 30px; }
  .ao-landing h1 { font-size: 61px; letter-spacing: -3px; }
  .ao-landing .ao-hero-body { font-size: 15px; }
  .ao-landing .ao-hero-actions { gap: 12px; }
  .ao-landing .ao-hero-actions .ao-button { gap: 18px; }
  .ao-landing .ao-hero-copy { padding-bottom: 0; }
  .ao-landing .ao-product-grid, .ao-landing .ao-usage-grid { gap: 40px; }
  .ao-landing .ao-principles { gap: 20px; }
  .ao-landing .ao-node strong { font-size: 10.5px; }
  .ao-landing .ao-node-sub { font-size: 6.9px; }
  .ao-landing .ao-node { padding: 6px 8px; }
}
@media (max-width: 1000px) {
  .ao-landing .ao-desktop-nav { display: none; }
  .ao-landing .ao-nav-right { margin-left: auto; }
  .ao-landing .ao-nav-right > .ao-languages { display: flex; }
  .ao-landing .ao-mobile-menu { display: block; position: relative; }
  .ao-landing .ao-mobile-menu summary { width: 36px; height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; list-style: none; }
  .ao-landing .ao-mobile-menu summary::-webkit-details-marker { display: none; }
  .ao-landing .ao-mobile-menu summary span { display: block; width: 18px; height: 1px; background: var(--ao-ink); }
  .ao-landing .ao-mobile-menu > nav { position: absolute; top: 47px; right: 0; background: var(--ao-surface); border: 1px solid var(--ao-line); box-shadow: 0 8px 25px rgba(20,20,20,.08); padding: 14px 18px; min-width: 200px; z-index: 40; }
  .ao-landing .ao-mobile-menu > nav > a { display: block; padding: 10px 0; font-size: 13px; }
  .ao-landing .ao-hero-grid { grid-template-columns: 1fr; padding-top: 35px; gap: 28px; }
  .ao-landing .ao-hero-copy { display: grid; grid-template-columns: 1.05fr .95fr; column-gap: 35px; align-items: start; }
  .ao-landing .ao-eyebrow { grid-column: 1/-1; margin-bottom: 18px; }
  .ao-landing h1 { grid-row: 2/5; font-size: 64px; line-height: 1.03; }
  .ao-landing .ao-hero-body { margin-top: 3px; }
  .ao-landing .ao-hero-actions { margin-top: 19px; display: flex; }
  .ao-landing .ao-hero-note { margin-top: 10px; }
  .ao-landing .ao-hand-note { display: none; }
  .ao-landing .ao-playground { max-width: 750px; width: 100%; margin-inline: auto; }
  .ao-landing .ao-network { aspect-ratio: 710/350; }
  .ao-landing .ao-node { top: calc(var(--y) * .99); }
  .ao-landing .ao-node strong { font-size: 12px; }
  .ao-landing .ao-node-sub { font-size: 8px; }
  .ao-landing .ao-demo-heading h2 { font-size: 26px; }
  .ao-landing .ao-inspector { min-height: 100px; }
  .ao-landing .ao-inspector > p { font-size: 12px; }
  .ao-landing .ao-inspector h3 { font-size: 14px; }
  .ao-landing .ao-scenarios button { font-size: 12px; min-height: 42px; }
  .ao-landing .ao-conditions { margin-top: 20px; max-width: 100%; }
  .ao-landing .ao-principles > span { font-size: 20px; }
  .ao-landing .ao-principles p { max-width: 155px; font-size: 10px; }
  .ao-landing .ao-product-grid { grid-template-columns: 1fr; gap: 30px; }
  .ao-landing .ao-section-copy > p { max-width: 490px; }
  .ao-landing .ao-feature-points { display: flex; gap: 18px; }
  .ao-landing .ao-feature-points li { align-items: start; flex: 1; font-size: 11px; }
  .ao-landing .ao-workspace { max-width: 750px; width: 100%; margin-inline: auto; }
  .ao-landing .ao-section-heading { gap: 35px; }
  .ao-landing .ao-section-heading > p { max-width: 290px; }
  .ao-landing .ao-how-flow { padding-inline: 20px; }
  .ao-landing .ao-how-flow > div { flex-basis: 115px; width: 115px; }
  .ao-landing .ao-usage-grid { grid-template-columns: .85fr 1.15fr; gap: 30px; }
  .ao-landing .ao-cost-card { padding: 20px; }
  .ao-landing .ao-cost-total > strong { font-size: 44px; }
  .ao-landing .ao-cost-heading { align-items: flex-start; }
  .ao-landing .ao-cost-heading .ao-micro { font-size: 8px; }
  .ao-landing .ao-runner-callout { gap: 20px; }
  .ao-landing .ao-faq-grid { grid-template-columns: 1fr 1.5fr; gap: 32px; }
}
@media (max-width: 650px) {
  .ao-landing .ao-shell { width: calc(100% - 36px); }
  .ao-landing .ao-header-meta { padding: 12px 0 9px; font-size: 8px; letter-spacing: .7px; }
  .ao-landing .ao-nav { min-height: 66px; gap: 12px; }
  .ao-landing .ao-brand { gap: 6px; }
  .ao-landing .ao-brand svg { width: 30px; height: 30px; }
  .ao-landing .ao-brand span { font-size: 20px; }
  .ao-landing .ao-nav-right > .ao-languages { display: none; }
  .ao-landing .ao-button-small { font-size: 10px; gap: 10px; padding: 9px 10px; min-height: 37px; }
  .ao-landing .ao-mobile-menu summary { width: 26px; }
  .ao-landing .ao-section-meta { font-size: 8px; letter-spacing: .6px; }
  .ao-landing .ao-section-meta > :last-child { display: none; }
  .ao-landing .ao-hero { padding-top: 19px; }
  .ao-landing .ao-hero-grid { padding-top: 28px; gap: 31px; }
  .ao-landing .ao-hero-copy { display: block; padding-top: 0; }
  .ao-landing .ao-eyebrow { font-size: 8px; letter-spacing: .9px; margin-bottom: 19px; }
  .ao-landing h1 { font-size: clamp(47px,13.5vw,74px); line-height: 1.06; letter-spacing: -2.8px; }
  .ao-landing .ao-hero-body { font-size: 14px; line-height: 1.75; margin-top: 21px; max-width: 420px; }
  .ao-landing .ao-hero-actions { gap: 10px; margin-top: 23px; justify-content: space-between; }
  .ao-landing .ao-hero-actions .ao-button { font-size: 11px; padding: 13px 14px; min-height: 47px; gap: 18px; }
  .ao-landing .ao-hero-actions .ao-text-link { font-size: 10px; gap: 7px; }
  .ao-landing .ao-hero-note { font-size: 9px; margin-top: 11px; }
  .ao-landing .ao-panel-strip { padding: 9px 12px; font-size: 8px; }
  .ao-landing .ao-demo-heading { padding: 17px 12px 13px; }
  .ao-landing .ao-demo-heading h2 { font-size: 24px; }
  .ao-landing .ao-demo-heading p { font-size: 10px; }
  .ao-landing .ao-scenarios { margin-inline: 12px; }
  .ao-landing .ao-scenarios button { font-size: 10px; min-height: 42px; }
  .ao-landing .ao-network { display: block; height: 470px; aspect-ratio: auto; margin-top: 0; background-image: radial-gradient(rgba(20,20,20,.14) .65px,transparent .65px); background-size: 17px 17px; }
  .ao-landing .ao-wires { display: none; }
  .ao-landing .ao-wires-mobile { display: block; }
  .ao-landing .ao-node { position: absolute; width: 37.5%; height: 80px; min-height: 0; padding: 8px 9px; }
  .ao-landing .ao-node-candidate { left: 31.25%; top: 24px; }
  .ao-landing .ao-node-apply { left: 3.125%; top: 136px; }
  .ao-landing .ao-node-runner { left: 59.375%; top: 136px; }
  .ao-landing .ao-node-checks { left: 3.125%; top: 256px; }
  .ao-landing .ao-node-review { left: 59.375%; top: 256px; }
  .ao-landing .ao-node-report { left: 31.25%; top: 376px; }
  .ao-landing .ao-node-top { margin-bottom: 5px; }
  .ao-landing .ao-node-top svg { width: 13px; height: 13px; }
  .ao-landing .ao-node-top span { font-size: 8px; }
  .ao-landing .ao-node strong { font-size: 11px; }
  .ao-landing .ao-node-sub { display: none; }
  .ao-landing .ao-node-status { display: block; font: 8px/1.3 var(--ao-font-mono); margin-top: 7px; color: var(--ao-muted); }
  .ao-landing .ao-node.ao-state-partial .ao-node-status, .ao-landing .ao-node.ao-state-error .ao-node-status, .ao-landing .ao-node.ao-state-env .ao-node-status { color: var(--ao-accent); }
  .ao-landing .ao-graph-key { font-size: 8px; gap: 12px; margin: 0 8px 14px; }
  .ao-landing .ao-inspector { margin: 0 12px; min-height: 145px; padding: 12px; }
  .ao-landing .ao-inspector h3 { font-size: 13px; margin-top: 8px; }
  .ao-landing .ao-inspector > p { font-size: 11px; line-height: 1.7; }
  .ao-landing .ao-player { padding: 10px 12px 5px; gap: 10px; }
  .ao-landing .ao-progress { gap: 7px; }
  .ao-landing .ao-progress input { min-height: 30px; }
  .ao-landing .ao-play-button { min-width: 72px; font-size: 9px; min-height: 38px; }
  .ao-landing .ao-player .ao-icon-button { width: 34px; height: 38px; }
  .ao-landing .ao-demo-footnote { font-size: 7.5px; padding: 7px 12px 12px; }
  .ao-landing .ao-conditions { font-size: 10px; line-height: 1.75; margin-top: 20px; }
  .ao-landing .ao-principles { margin-top: 27px; gap: 12px; padding: 20px 0; flex-wrap: wrap; justify-content: space-between; }
  .ao-landing .ao-principles > span { font-size: 17px; letter-spacing: -.5px; }
  .ao-landing .ao-principles > b { font-size: 11px; }
  .ao-landing .ao-principles p { flex: 1 0 100%; max-width: 100%; margin: 1px 0 0; text-align: center; font-size: 10px; }
  .ao-landing .ao-section { padding: 29px 0 49px; }
  .ao-landing .ao-section h2 { font-size: 37px; letter-spacing: -1.65px; line-height: 1.12; }
  .ao-landing .ao-product-grid { margin-top: 30px; gap: 27px; }
  .ao-landing .ao-section-copy > p { margin-top: 18px; font-size: 13px; line-height: 1.75; }
  .ao-landing .ao-feature-points { display: block; margin-top: 20px; }
  .ao-landing .ao-feature-points li { font-size: 12px; }
  .ao-landing .ao-window-bar { font-size: 7px; padding: 10px; }
  .ao-landing .ao-window-id { font-size: 6.5px; }
  .ao-landing .ao-workspace-head { padding: 18px 13px 10px; gap: 7px; }
  .ao-landing .ao-workspace-head h3 { font-size: 13px; }
  .ao-landing .ao-workspace-head .ao-micro { font-size: 7px; }
  .ao-landing .ao-tabs { padding: 0 12px; gap: 21px; }
  .ao-landing .ao-tabs button { min-height: 45px; font-size: 11px; }
  .ao-landing .ao-tabs > span { display: none; }
  .ao-landing .ao-tab-panel { padding: 18px 13px; min-height: 510px; }
  .ao-landing .ao-review-banner { gap: 9px; }
  .ao-landing .ao-review-banner h4 { font-size: 14px; line-height: 1.4; }
  .ao-landing .ao-result-description { font-size: 11px; }
  .ao-landing .ao-report-columns { grid-template-columns: 1fr; gap: 19px; }
  .ao-landing .ao-file-list li, .ao-landing .ao-check-row { font-size: 11px; }
  .ao-landing .ao-file-list code { font-size: 10px; }
  .ao-landing .ao-file-list span, .ao-landing .ao-check-row b { font-size: 9px; }
  .ao-landing .ao-report-columns .ao-micro { font-size: 8px; }
  .ao-landing .ao-review-note > p:last-child { font-size: 11px; }
  .ao-landing .ao-workspace-footer { padding: 12px 13px; font-size: 8px; gap: 5px; }
  .ao-landing .ao-caption { text-align: left; font-size: 8px; }
  .ao-landing .ao-timeline p { font-size: 10px; }
  .ao-landing .ao-timeline li { padding-bottom: 17px; }
  .ao-landing .ao-section-heading { margin-top: 30px; display: block; }
  .ao-landing .ao-section-heading > p { margin-top: 19px; max-width: 100%; }
  .ao-landing .ao-how-flow { margin-top: 27px; padding: 23px 2px; gap: 5px; }
  .ao-landing .ao-how-flow > div { flex-basis: 83px; width: 83px; }
  .ao-landing .ao-how-flow > div > span:last-child { font-size: 7px; margin-top: 12px; letter-spacing: .3px; }
  .ao-landing .ao-flow-brand svg { width: 53px; height: 53px; }
  .ao-landing .ao-code-symbol, .ao-landing .ao-receipt-symbol { width: 42px; height: 46px; font-size: 19px; }
  .ao-landing .ao-how-flow > svg { min-width: 10px; }
  .ao-landing .ao-steps-grid { grid-template-columns: 1fr; gap: 21px; margin-top: 18px; }
  .ao-landing .ao-step-card { display: grid; grid-template-columns: 27px 1fr; column-gap: 14px; padding-top: 18px; }
  .ao-landing .ao-step-number { grid-row: span 2; padding-top: 5px; }
  .ao-landing .ao-step-card h3 { margin-top: 0; font-size: 25px; }
  .ao-landing .ao-step-card p { margin-top: 8px; max-width: none; font-size: 12px; }
  .ao-landing .ao-usage-grid { grid-template-columns: 1fr; gap: 25px; margin-top: 30px; }
  .ao-landing .ao-cost-card { padding: 20px 18px; }
  .ao-landing .ao-cost-total > strong { font-size: 51px; }
  .ao-landing .ao-usage-stats { font-size: 8.5px; }
  .ao-landing .ao-cost-table td { padding: 11px 0; }
  .ao-landing .ao-cost-disclaimer { font-size: 10px; }
  .ao-landing .ao-pricing-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 25px; }
  .ao-landing .ao-plan { padding: 25px 22px; }
  .ao-landing .ao-plan h3 { font-size: 15px; }
  .ao-landing .ao-plan ul { margin: 19px 0 25px; }
  .ao-landing .ao-runner-callout { display: block; padding-top: 23px; }
  .ao-landing .ao-runner-callout a { margin-top: 11px; }
  .ao-landing .ao-faq-grid { grid-template-columns: 1fr; gap: 26px; margin-top: 30px; }
  .ao-landing .ao-faq-item summary { font-size: 12px; gap: 11px; }
  .ao-landing .ao-faq-item > p { padding-left: 22px; padding-right: 10px; }
  .ao-landing .ao-final { padding: 45px 0 56px; }
  .ao-landing .ao-final h2 { font-size: 47px; letter-spacing: -2px; }
  .ao-landing .ao-final-art { width: 230px; height: 230px; right: -92px; top: 48px; opacity: .06; }
  .ao-landing .ao-final > p:not(.ao-micro) { max-width: 270px; font-size: 12px; }
  .ao-landing .ao-final-actions { display: flex; align-items: flex-start; flex-direction: column; gap: 13px; margin-top: 24px; }
  .ao-landing .ao-footer nav { display: grid; grid-template-columns: repeat(2,1fr); gap: 5px 23px; }
  .ao-landing .ao-footer-bottom { display: block; font-size: 8px; }
  .ao-landing .ao-footer-bottom span { display: block; margin-top: 7px; }
  .ao-landing:lang(ko) h1 { font-size: clamp(38px,10.5vw,60px); letter-spacing: -1.8px; line-height: 1.32; }
  .ao-landing:lang(ko) .ao-section h2 { font-size: 31px; }
  .ao-landing:lang(ko) .ao-principles { gap: 7px; }
  .ao-landing:lang(ko) .ao-principles > span { font-size: 13px; letter-spacing: -.7px; }
  .ao-landing:lang(ko) .ao-final h2 { font-size: 43px; line-height: 1.28; }
  .ao-landing:lang(zh-CN) h1 { font-size: clamp(36px,10vw,57px); line-height: 1.3; }
  .ao-landing:lang(zh-CN) .ao-principles > span { font-size: 14px; }
}
@media (max-width: 360px) {
  .ao-landing .ao-shell { width: calc(100% - 28px); }
  .ao-landing .ao-brand span { font-size: 18px; }
  .ao-landing .ao-nav { gap: 7px; }
  .ao-landing .ao-nav-right .ao-button { font-size: 9px; gap: 6px; padding-inline: 8px; }
  .ao-landing .ao-hero-actions { flex-direction: column; align-items: flex-start; gap: 4px; }
  .ao-landing .ao-principles { gap: 7px; }
  .ao-landing .ao-principles > span { font-size: 15px; }
  .ao-landing .ao-node strong { font-size: 11px; }
  .ao-landing .ao-graph-key { font-size: 7px; gap: 9px; }
  .ao-landing .ao-demo-heading h2 { font-size: 21px; }
  .ao-landing .ao-cost-total > strong { font-size: 47px; }
}
@media (prefers-reduced-motion: reduce) {
  .ao-landing *, .ao-landing *::before, .ao-landing *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .ao-landing .ao-button:hover { transform: none; }
}
@media (forced-colors: active) {
  .ao-landing .ao-node, .ao-landing .ao-button, .ao-landing .ao-status { border: 1px solid ButtonText; }
  .ao-landing .ao-node.ao-selected { outline: 2px solid Highlight; }
  .ao-landing .ao-scenarios button[aria-pressed='true'], .ao-landing .ao-usage-toggle button[aria-pressed='true'] { outline: 2px solid Highlight; outline-offset: -3px; }
}
@media print {
  .ao-landing .ao-depth-rail, .ao-landing .ao-player, .ao-landing .ao-nav-right, .ao-landing .ao-mobile-menu, .ao-landing .ao-toast { display: none; }
  .ao-landing .ao-shell { width: 100%; }
  .ao-landing .ao-playground, .ao-landing .ao-workspace, .ao-landing .ao-cost-card { break-inside: avoid; box-shadow: none; }
  .ao-landing .ao-section { padding-block: 30px; }
}

.ao-landing .ao-inline-unknown { display:block; color:var(--ao-accent); font-size:12px; margin: 6px 0 16px; }

/* ==========================================================================
   SIGNATURE LAYER — ink plate, registration orbit, paper grain, live specimen.
   Same tokens and type as the system above; this only raises the print-room
   drama. Every motion is decorative and dies under prefers-reduced-motion.
   ========================================================================== */


.ao-landing { --ao-accent-bright: #e5534a; }


/* Oversized registration orbit behind the hero copy. The signature element. */
.ao-landing .ao-hero { position: relative; isolation: isolate; }
.ao-landing .ao-hero-grid { position: relative; z-index: 1; }
.ao-landing .ao-hero::before {
  content: "";
  position: absolute;
  left: -16%;
  top: -8%;
  width: min(760px, 66vw);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
  background:
    repeating-conic-gradient(from -.2deg, rgba(20,20,20,.22) 0deg .28deg, transparent .28deg 9deg),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 24.6%, rgba(20,20,20,.12) 24.6% 24.9%, transparent 24.9% 41%, rgba(20,20,20,.08) 41% 41.2%, transparent 41.2% 100%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 56%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0 56%, transparent 72%);
  animation: ao-orbit-drift 160s linear infinite;
}

/* Editorial rule off the eyebrow instead of another badge. */
.ao-landing .ao-eyebrow::after {
  content: "";
  height: 1px;
  width: min(110px, 18vw);
  background: var(--ao-line);
  margin-left: 4px;
}

/* Section index becomes a registration mark, not a tracked-out label. */
.ao-landing .ao-section-meta > :first-child { color: var(--ao-accent); }
.ao-landing .ao-section-meta > :first-child::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  margin-right: 8px;
  vertical-align: middle;
  background: var(--ao-accent);
}

/* Nav and action details. */
.ao-landing .ao-brand svg { transition: transform .55s cubic-bezier(.2,.8,.2,1); }
.ao-landing .ao-brand:hover svg { transform: rotate(28deg); }
.ao-landing .ao-desktop-nav a { position: relative; }
.ao-landing .ao-desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 1px;
  background: var(--ao-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .24s ease-out;
}
.ao-landing .ao-desktop-nav a:hover::after { transform: scaleX(1); }
.ao-landing .ao-button { position: relative; overflow: hidden; box-shadow: 0 1px 0 rgba(20,20,20,.14); }
.ao-landing .ao-button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--ao-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .26s ease-out;
}
.ao-landing .ao-button:hover::after, .ao-landing .ao-button:focus-visible::after { transform: scaleX(1); }
.ao-landing .ao-button:active { transform: translateY(1px); }
.ao-landing .ao-text-link > span:last-child { transition: transform .22s ease-out; }
.ao-landing .ao-text-link:hover > span:last-child { transform: translateX(3px); }

/* Run explorer: deeper sheet, quieter grid, and a scan that only runs live. */
.ao-landing .ao-playground {
  border-color: rgba(20,20,20,.42);
  box-shadow: 9px 11px 0 rgba(20,20,20,.04), 0 30px 64px -46px rgba(20,20,20,.55);
}
.ao-landing .ao-playground::before { color: var(--ao-accent); }
.ao-landing .ao-demo-heading h2 { font-size: 25px; }
.ao-landing .ao-network { overflow: hidden; }
.ao-landing .ao-node { z-index: 1; transition: border-color .18s, background .18s, box-shadow .18s, transform .18s; }
.ao-landing .ao-node:hover { transform: translateY(-1px); box-shadow: 0 7px 16px rgba(20,20,20,.09); }
.ao-landing .ao-node.ao-selected {
  outline: 1px solid var(--ao-accent);
  outline-offset: 3px;
  background: var(--ao-paper-2);
  box-shadow: 0 0 0 5px rgba(184,38,31,.055), 0 10px 22px rgba(20,20,20,.10);
}
.ao-landing .ao-node.ao-state-partial .ao-node-top i,
.ao-landing .ao-node.ao-state-env .ao-node-top i,
.ao-landing .ao-node.ao-state-error .ao-node-top i { animation: ao-signal 2.4s ease-out infinite; }
.ao-landing .ao-wire-active { filter: drop-shadow(0 0 1.5px rgba(184,38,31,.35)); }
.ao-landing .ao-playground .ao-network::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(184,38,31,.07) 42%, rgba(184,38,31,.16) 50%, rgba(184,38,31,.07) 58%, transparent 100%);
}
.ao-landing .ao-playground.ao-playing .ao-network::after {
  opacity: 1;
  animation: ao-scan 4.6s cubic-bezier(.45,0,.55,1) infinite;
}
.ao-landing .ao-inspector {
  border-left-width: 3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.ao-landing .ao-play-button {
  border: 1px solid var(--ao-line);
  padding: 0 10px;
  border-radius: 2px;
  transition: background .18s, border-color .18s;
}
.ao-landing .ao-play-button:hover { background: var(--ao-paper-2); border-color: var(--ao-ink); }
.ao-landing .ao-graph-key i { width: 5px; height: 5px; }

/* Range thumb: same vermillion in every engine, not accent-color roulette. */
.ao-landing .ao-progress input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; height: 22px; }
.ao-landing .ao-progress input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--ao-ink); }
.ao-landing .ao-progress input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 9px;
  height: 9px;
  margin-top: -3.5px;
  border: 0;
  border-radius: 50%;
  background: var(--ao-accent);
  box-shadow: 0 0 0 3px var(--ao-surface);
}
.ao-landing .ao-progress input[type="range"]::-moz-range-track { height: 2px; background: var(--ao-ink); }
.ao-landing .ao-progress input[type="range"]::-moz-range-thumb {
  width: 9px;
  height: 9px;
  border: 0;
  border-radius: 50%;
  background: var(--ao-accent);
  box-shadow: 0 0 0 3px var(--ao-surface);
}

/* The statement strip becomes an ink plate: a deliberate mid-page band. */
.ao-landing .ao-principles {
  position: relative;
  overflow: hidden;
  padding: 30px 32px;
  color: var(--ao-paper);
  background: var(--ao-ink);
  border-top: 1px solid var(--ao-ink);
  border-bottom: 1px solid var(--ao-ink);
  box-shadow: 8px 8px 0 rgba(20,20,20,.055);
}
.ao-landing .ao-principles::before {
  content: "";
  position: absolute;
  right: -92px;
  top: 50%;
  width: 320px;
  height: 320px;
  translate: 0 -50%;
  border-radius: 50%;
  opacity: .28;
  pointer-events: none;
  background:
    repeating-conic-gradient(from 0deg, rgba(237,230,214,.35) 0deg .4deg, transparent .4deg 15deg),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 34%, rgba(237,230,214,.18) 34% 34.4%, transparent 34.4% 62%, rgba(237,230,214,.12) 62% 62.35%, transparent 62.35% 100%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 64%, transparent 78%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0 64%, transparent 78%);
}
.ao-landing .ao-principles > * { position: relative; z-index: 1; }
.ao-landing .ao-principles > span { color: var(--ao-paper); }
.ao-landing .ao-principles > b { color: var(--ao-accent-bright); }
.ao-landing .ao-principles p { color: rgba(237,230,214,.86); }

/* Cards gain a printed-sheet offset instead of another grey border. */
.ao-landing .ao-step-card { transition: border-color .24s, transform .24s; }
.ao-landing .ao-step-card:hover { border-top-color: var(--ao-accent); transform: translateY(-3px); }
.ao-landing .ao-workspace { box-shadow: 8px 8px 0 rgba(20,20,20,.035), 0 20px 50px -40px rgba(20,20,20,.45); }
.ao-landing .ao-cost-card { box-shadow: 8px 8px 0 rgba(20,20,20,.035); }
.ao-landing .ao-cost-total > strong {
  position: relative;
  background-image: linear-gradient(transparent 64%, rgba(184,38,31,.13) 64% 86%, transparent 86%);
}
.ao-landing .ao-cost-chart span { transform-origin: left; animation: ao-bar .8s cubic-bezier(.2,.7,.2,1) both; }
.ao-landing .ao-cost-chart span:nth-child(2) { animation-delay: .05s; }
.ao-landing .ao-cost-chart span:nth-child(3) { animation-delay: .1s; }
.ao-landing .ao-cost-chart span:nth-child(4) { animation-delay: .15s; }
.ao-landing .ao-cost-chart span:nth-child(5) { animation-delay: .2s; }
.ao-landing .ao-cost-chart span:nth-child(6) { animation-delay: .25s; }
.ao-landing .ao-plan { transition: border-color .24s, transform .24s, box-shadow .24s; }
.ao-landing .ao-plan:hover { border-color: rgba(20,20,20,.3); transform: translateY(-2px); box-shadow: 0 14px 30px -24px rgba(20,20,20,.5); }
.ao-landing .ao-plan-free { box-shadow: 8px 8px 0 rgba(20,20,20,.04); }
.ao-landing .ao-faq-item summary { transition: color .18s, background .18s; }
.ao-landing .ao-faq-item summary:hover { color: var(--ao-accent); }
.ao-landing .ao-faq-item[open] { background: rgba(20,20,20,.022); }
.ao-landing .ao-faq-item[open] .ao-plus { transform: rotate(45deg); }

/* Final plate: a larger, slower orbit and a vermillion start rule. */
.ao-landing .ao-final { isolation: isolate; }
.ao-landing .ao-final::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 92px;
  height: 2px;
  background: var(--ao-accent);
}
.ao-landing .ao-final h2 { font-size: clamp(46px, 5.4vw, 78px); }
.ao-landing .ao-final-art { width: 520px; height: 520px; right: -24px; top: 4px; opacity: .12; animation: ao-orbit-drift 210s linear infinite reverse; }

@keyframes ao-orbit-drift { to { transform: rotate(360deg); } }
@keyframes ao-scan { 0% { transform: translateY(-100%); } 58%, 100% { transform: translateY(100%); } }
@keyframes ao-signal { 0%, 100% { box-shadow: 0 0 0 0 rgba(184,38,31,.26); } 55% { box-shadow: 0 0 0 4px rgba(184,38,31,0); } }
@keyframes ao-bar { from { transform: scaleX(0); } }

@media (max-width: 1000px) {
  .ao-landing .ao-hero::before { width: 560px; left: -26%; top: -5%; opacity: .42; }
  .ao-landing .ao-principles { padding: 26px 24px; }
  .ao-landing .ao-final-art { width: 430px; height: 430px; right: -70px; }
}

@media (max-width: 760px) {
  .ao-landing .ao-principles { display: block; padding: 24px 20px; }
  .ao-landing .ao-principles > b { display: none; }
  .ao-landing .ao-principles > span { display: block; font-size: 21px; line-height: 1.35; }
  .ao-landing .ao-principles > span + span { margin-top: 6px; }
  .ao-landing .ao-principles p { margin: 14px 0 0; max-width: none; text-align: left; }
}

@media (max-width: 650px) {
  .ao-landing .ao-hero::before { width: 430px; left: -44%; top: -2%; opacity: .2; }
  .ao-landing .ao-eyebrow::after { width: 54px; }
  .ao-landing .ao-principles { padding: 22px 18px; box-shadow: 5px 5px 0 rgba(20,20,20,.055); }
  .ao-landing .ao-principles::before { width: 220px; height: 220px; right: -96px; }
  .ao-landing .ao-principles p { text-align: left; }
  .ao-landing .ao-demo-heading h2 { font-size: 24px; }
  .ao-landing .ao-final h2 { font-size: 47px; }
  .ao-landing .ao-final-art { width: 290px; height: 290px; right: -110px; }
  .ao-landing .ao-cost-total > strong { font-size: 51px; }
}

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

@media (forced-colors: active) {
  .ao-landing .ao-progress input[type="range"] { border: 1px solid ButtonText; }
  .ao-landing .ao-principles { border: 1px solid CanvasText; }
}

/* --------------------------------------------------------------------------
   MOTION LAYER — adapted from 21st.dev catalog components:
   Text Reveal (Mask) by soralabs, Magnetic Button by Mohammad Shehadeh,
   Animated Beam by magicui. Rebuilt in vanilla CSS/JS for this static page.
   -------------------------------------------------------------------------- */

/* Word-mask reveal: the unit rises out of its own line box. */
.ao-landing .ao-word-reveal .ao-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .16em;
  margin-bottom: -.16em;
}
.ao-landing .ao-word-reveal .ao-word > span {
  display: inline-block;
  transform: translateY(112%);
  opacity: 0;
}
.ao-landing .ao-word-reveal.ao-inview .ao-word > span {
  animation: ao-word-rise 1s cubic-bezier(.25,.46,.45,.94) both;
  animation-delay: calc(var(--ao-word-index, 0) * 44ms);
}

/* Magnetic CTA: JS writes the pointer offset into these custom properties. */
.ao-landing .ao-button { --ao-mx: 0px; --ao-my: 0px; transform: translate(var(--ao-mx), var(--ao-my)); }
.ao-landing .ao-button:hover { transform: translate(var(--ao-mx), calc(var(--ao-my) - 1px)); }
.ao-landing .ao-button:active { transform: translate(var(--ao-mx), calc(var(--ao-my) + 1px)); }
.ao-landing .ao-magnetic { will-change: transform; }

/* A single vermillion signal rides the active wire while the sample plays. */
.ao-landing .ao-wire-signal { pointer-events: none; }
.ao-landing .ao-wire-signal-halo { fill: var(--ao-accent); opacity: .16; }
.ao-landing .ao-wire-signal-dot { fill: var(--ao-accent); filter: drop-shadow(0 0 2px rgba(184,38,31,.45)); }

@keyframes ao-word-rise {
  from { transform: translateY(112%); opacity: 0; filter: blur(3px); }
  to { transform: translateY(0); opacity: 1; filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ao-landing .ao-word-reveal .ao-word > span { transform: none; opacity: 1; animation: none !important; }
}

@media print {
  .ao-landing .ao-hero::before, .ao-landing .ao-principles::before { display: none; }
  .ao-landing .ao-playground, .ao-landing .ao-workspace, .ao-landing .ao-cost-card, .ao-landing .ao-plan, .ao-landing .ao-principles { box-shadow: none; }
  .ao-landing .ao-word-reveal .ao-word > span { transform: none; opacity: 1; animation: none !important; }
}


/* ==========================================================================
   HOME INTEGRATION. The approved hero stays as it is. The run explorer gets
   its own section under the hero, the ink band follows it, and the cost trail
   sits before pricing. Only these components are scoped .ao-landing.
   ========================================================================== */
.ao-explorer-home { position: relative; isolation: isolate; overflow-x: clip; padding: clamp(36px, 5vw, 72px) 0 clamp(40px, 5vw, 64px); }
.ao-explorer-home > .fig-meta, .ao-explorer-home > .ao-explorer-grid { position: relative; z-index: 1; }
.ao-hero-orbit {
  content: "";
  position: absolute;
  left: -12%;
  top: 2%;
  width: min(760px, 66vw);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: .36;
  background:
    repeating-conic-gradient(from -.2deg, rgba(20,20,20,.22) 0deg .28deg, transparent .28deg 9deg),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 24.6%, rgba(20,20,20,.12) 24.6% 24.9%, transparent 24.9% 41%, rgba(20,20,20,.08) 41% 41.2%, transparent 41.2% 100%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 56%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0 56%, transparent 72%);
  animation: ao-orbit-drift 160s linear infinite;
}
.ao-explorer-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(28px, 4.5vw, 64px); align-items: center; margin-top: 30px; }
.ao-explorer-copy .fig-lede { margin-top: 22px; max-width: 430px; }
.ao-explorer-hint { display: flex; align-items: center; gap: 12px; margin-top: 30px; color: var(--ao-muted); }
.ao-explorer-hint svg { width: 72px; flex: 0 0 72px; transform: rotate(-12deg) scaleX(-1); }
.ao-explorer-hint span { font: italic 15px/1.45 var(--ao-font-display); max-width: 220px; }
.ao-explorer-note { margin-top: 16px; font: 10px/1.6 var(--ao-font-mono); letter-spacing: .4px; color: var(--ao-muted); }
.explorer-figure { min-width: 0; }
.explorer-figure .ao-playground { box-shadow: 10px 10px 0 rgba(20,20,20,.04), 0 24px 60px -44px rgba(20,20,20,.5); }
.ao-band { margin: 0 0 72px; }
.ao-band .ao-principles { margin-top: 0; }
.ao-usage-home { padding: clamp(56px, 7vw, 104px) 0 clamp(48px, 6vw, 88px); }
.ao-usage-home .fig-title { margin-top: 26px; }
.ao-usage-home .fig-lede { margin-top: 20px; max-width: 430px; }
.ao-usage-home .ao-usage-grid { margin-top: 18px; }
@media (max-width: 1000px) {
  .ao-explorer-grid { grid-template-columns: minmax(0, 1fr); }
  .ao-hero-orbit { width: 560px; left: -26%; top: 0; opacity: .3; }
}
@media (max-width: 650px) {
  .ao-hero-orbit { width: 420px; left: -44%; opacity: .16; }
  .ao-explorer-hint { display: none; }
  .ao-band { margin-bottom: 44px; }
}
@media (prefers-reduced-motion: reduce) { .ao-hero-orbit { animation: none; } }
@media print { .ao-hero-orbit { display: none; } }