/* ── tokens.css ── */
:root {
color-scheme: dark;
--fs-12: 0.75rem;
--fs-14: 0.875rem;
--fs-16: 1rem;
--fs-20: 1.25rem;
--fs-24: 1.5rem;
--fs-display: clamp(2.5rem, 1.66rem + 4.2vw, 3.75rem);
--fs-h1: clamp(2.25rem, 1.53rem + 3.6vw, 3.25rem);
--fs-h2: clamp(1.625rem, 1.105rem + 2.6vw, 2.25rem);
--fs-h3: clamp(1.1875rem, 0.9075rem + 1.4vw, 1.4375rem);
--fs-body-l: 1.0625rem;
--fs-meta: 0.8125rem;
--fs-meta-max: 0.875rem;
--fs-label: 0.75rem;
--lh-display: 0.98;
--lh-h1: 1.0;
--lh-h2: 1.05;
--lh-h3: 1.16;
--lh-tight: 1.1;
--lh-snug: 1.28;
--lh-body: 1.625;
--lh-lead: 1.5882;
--lh-meta: 1.4615;
--lh-label: 1.1667;
--fw-display: 650;
--fw-h1: 650;
--fw-h2: 640;
--fw-h3: 630;
--fw-lead: 430;
--fw-body: 420;
--fw-meta: 520;
--fw-label: 650;
--ls-display: -0.048em;
--ls-h1: -0.042em;
--ls-h2: -0.035em;
--ls-h3: -0.022em;
--ls-lead: -0.008em;
--ls-body: 0em;
--ls-meta: 0.005em;
--ls-label: 0.105em;
--ff-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
"Noto Sans", sans-serif;
--ff-sans: "Manrope", var(--ff-system);
--ff-display: "Manrope", var(--ff-system);
--ff-numeric: var(--ff-sans);
--fv-tabular: "tnum" 1, "lnum" 1;
--sp-4: 0.25rem;
--sp-8: 0.5rem;
--sp-12: 0.75rem;
--sp-16: 1rem;
--sp-24: 1.5rem;
--sp-32: 2rem;
--sp-48: 3rem;
--sp-64: 4rem;
--sp-96: 6rem;
--r-marker: 6px;
--r-12: 12px;
--r-16: 16px;
--r-18: 16px;
--r-24: 24px;
--r-full: 999px;
--oa-r-control: 12px;
--oa-r-surface: 16px;
--oa-r-showcase: 24px;
--oa-r-chart: 18px;
--oa-r-plane: 20px;
--oa-r-hero: 22px;
--oa-r-tip: 10px;
--content-max: 1320px;
--tool-max: 1260px;
--article-max: 720px;
--article-visual-max: 920px;
--measure: 68ch;
--measure-marketing: 52ch;
--grid-cols: 12;
--grid-gap: 24px;
--gutter: 32px;
--gutter-tablet: 24px;
--gutter-mobile: 18px;
--section-gap: 112px;
--section-gap-2: 88px;
--section-gap-mobile: 72px;
--section-gap-mobile-2: 56px;
--hero-pad-top: 92px;
--hero-pad-bottom: 88px;
--feature-hero-pad-top: 72px;
--nav-h: 68px;
--bp-wide: 1180px;
--bp-laptop: 1100px;
--bp-tablet: 720px;
--bp-phone: 480px;
--oa-shadow-1: 0 1px 2px rgba(0,0,0,.20), 0 4px 10px rgba(0,0,0,.16), 0 16px 32px rgba(0,0,0,.14);
--oa-shadow-2: 0 1px 2px rgba(0,0,0,.26), 0 8px 18px rgba(0,0,0,.22), 0 24px 48px rgba(0,0,0,.20), 0 48px 96px rgba(0,0,0,.16);
--oa-shadow-device: inset 0 1px 0 rgba(255,255,255,.065), inset 1px 0 0 rgba(255,255,255,.025), 0 1px 1px rgba(0,0,0,.40), 0 22px 54px rgba(0,0,0,.36), 0 58px 118px rgba(0,0,0,.28), 0 0 88px rgba(49,92,246,.10);
--oa-shadow-table: inset 0 1px 0 rgba(255,255,255,.025), 0 18px 48px rgba(0,0,0,.16);
--oa-shadow-chart: inset 0 1px 0 rgba(255,255,255,.045), 0 1px 1px rgba(0,0,0,.35), 0 18px 44px rgba(0,0,0,.22), 0 42px 90px rgba(0,0,0,.16);
--oa-shadow-hero: inset 0 1px 0 rgba(255,255,255,.055), 0 2px 4px rgba(0,0,0,.28), 0 24px 60px rgba(0,0,0,.33), 0 55px 120px rgba(0,0,0,.24), 0 0 90px rgba(77,71,220,.10);
--oa-shadow-plane: inset 0 1px 0 rgba(255,255,255,.035), 0 26px 70px rgba(0,0,0,.24);
--oa-bg-0: #070910;
--oa-bg-1: #0A0E17;
--oa-bg-2: #090D16;
--oa-surface-0: #0D121D;
--oa-surface-1: #111827;
--oa-surface-2: #162034;
--oa-surface-3: #1B2740;
--oa-ink-0: #F4F6FC;
--oa-ink-1: #C3CAD9;
--oa-ink-2: #98A3B6;
--oa-ink-3: #8791A6;
--oa-line-0: rgba(205, 214, 236, .08);
--oa-line-1: rgba(205, 214, 236, .13);
--oa-line-2: rgba(205, 214, 236, .22);
--oa-cobalt: #315CF6;
--oa-cobalt-hover: #426BFF;
--oa-cobalt-pressed: #294ED1;
--oa-iris: #7867F2;
--oa-accent-text: #A7B5FF;
--oa-positive: #50D7A5;
--oa-negative: #FF858E;
--oa-warning: #F0C66C;
--oa-paper: #F3F5F9;
--oa-paper-surface: #FFFFFF;
--oa-paper-ink: #111724;
--oa-paper-muted: #59657A;
--oa-paper-line: #DDE2EC;
--oa-band-hero: #070910;
--oa-band-track: #090D16;
--oa-band-understand: #080D16;
--oa-band-research: #080D16;
--oa-band-data: #090B12;
--oa-band-pricing: #090B12;
--oa-band-learn: #F3F5F9;
--oa-band-final: #070910;
--oa-band-header-stuck: #090C13;
--oa-band-edge: rgba(205, 214, 236, .055);
--oa-scene-cobalt: radial-gradient(62% 72% at 78% 18%, rgba(49,92,246,.20) 0%, rgba(49,92,246,.08) 34%, transparent 68%), radial-gradient(46% 56% at 62% 78%, rgba(120,103,242,.13) 0%, transparent 72%);
--oa-scene-iris: radial-gradient(58% 64% at 30% 28%, rgba(120,103,242,.16) 0%, rgba(120,103,242,.06) 38%, transparent 72%), radial-gradient(50% 60% at 78% 64%, rgba(49,92,246,.12) 0%, transparent 72%);
--oa-scene-research: radial-gradient(58% 60% at 70% 18%, rgba(49,92,246,.14) 0%, transparent 70%), radial-gradient(38% 48% at 88% 72%, rgba(92,181,255,.07) 0%, transparent 72%);
--oa-scene-track: radial-gradient(48% 58% at 22% 26%, rgba(49,92,246,.12) 0%, transparent 68%);
--oa-scene-final: radial-gradient(58% 78% at 50% 100%, rgba(49,92,246,.16) 0%, transparent 72%);
--oa-scene-neutral: none;
--oa-paper-edge: rgba(0, 0, 0, .34);
--oa-electric: #8D52FF;
--oa-chart-plane: #0D121D;
--oa-chart-ledger: #0C111B;
--oa-chart-compare: #0B1019;
--oa-chart-line: #7D69FF;
--oa-chart-cmp: #77839A;
--oa-chart-s2: #45C4B0;
--oa-chart-s3: #E0B15C;
--oa-chart-grid: rgba(208, 216, 237, .07);
--oa-chart-axis: #8E99AD;
--oa-chart-area-0: rgba(120, 103, 242, .22);
--oa-chart-area-1: rgba(120, 103, 242, .035);
--oa-chart-cross: rgba(255, 255, 255, .16);
--oa-chart-pt: #F4F6FC;
--oa-chart-pt-ring: #7867F2;
--oa-chart-tip: #171E2D;
--oa-chart-tip-line: rgba(255, 255, 255, .12);
--oa-chart-tip-shadow: 0 12px 32px rgba(0,0,0,.30);
--oa-chart-track: #20283A;
--oa-chart-bar: #687CFF;
--oa-chart-bar-sel: #9A71FF;
--oa-chart-desc: #AAB3C4;
--oa-chart-group: #78859A;
--oa-chart-row-hover: rgba(255, 255, 255, .025);
--oa-chart-col-hover: rgba(49, 92, 246, .045);
--oa-chart-rule: rgba(255, 255, 255, .06);
--oa-chart-vrule: rgba(255, 255, 255, .065);
--brand-600: #315CF6;
--brand-500: #426BFF;
--brand-700: #294ED1;
--brand-400: #5C7BFF;
--brand-300: #93A6FF;
--brand-text: #A7B5FF;
--iris: #7867F2;
--iris-text: #A79BF9;
--ink: #F4F6FC;
--ink-2: #C3CAD9;
--muted: #98A3B6;
--faint: #8791A6;
--surface: #111827;
--surface-raised: #162034;
--surface-2: #0D121D;
--surface-3: #1B2740;
--page: #090D16;
--page-deep: #070910;
--line: rgba(205, 214, 236, .13);
--line-quiet: rgba(205, 214, 236, .08);
--line-strong: rgba(205, 214, 236, .22);
--positive: #50D7A5;
--warning: #F0C66C;
--negative: #FF858E;
--positive-text: #50D7A5;
--warning-text: #F0C66C;
--negative-text: #FF858E;
--on-brand: #FFFFFF;
--on-brand-muted: rgba(255, 255, 255, 0.90);
--on-brand-hover: rgba(255, 255, 255, 0.92);
--focus: #8EA1FF;
--chip: rgba(49, 92, 246, 0.20);
--overflow-shadow: rgba(0, 0, 0, 0.55);
--shadow-sm: 0 1px 1px rgba(0,0,0,.28);
--shadow-md: 0 1px 1px rgba(0,0,0,.28), 0 8px 24px rgba(0,0,0,.16);
--shadow-lg: 0 1px 1px rgba(0,0,0,.34), 0 16px 38px rgba(0,0,0,.24), 0 36px 84px rgba(0,0,0,.18);
--mesh-a: rgba(49, 92, 246, 0.20);
--mesh-b: rgba(120, 103, 242, 0.13);
--mesh-c: rgba(49, 92, 246, 0.08);
--paper: #F3F5F9;
--paper-surface: #FFFFFF;
--paper-ink: #111724;
--paper-muted: #59657A;
--paper-line: #DDE2EC;
--stage-bg: #070910;
--stage-device: #0B0E16;
--stage-raised: #162034;
--stage-bezel: rgba(255, 255, 255, .12);
--stage-track: rgba(255, 255, 255, 0.10);
--stage-ink: #F4F6FC;
--stage-ink-2: #98A3B6;
--stage-ink-3: #8791A6;
--oa-fast: 120ms;
--oa-ui: 180ms;
--oa-state: 320ms;
--oa-scene: 520ms;
--oa-trace: 560ms;
--oa-accordion: 220ms;
--oa-rail: 260ms;
--oa-tooltip: 140ms;
--oa-view-transition: 260ms;
--oa-ease-out: cubic-bezier(.22, 1, .36, 1);
--oa-ease-standard: cubic-bezier(.2, 0, 0, 1);
--dur-fast: 120ms;
--dur-standard: 180ms;
--dur-emphasized: 320ms;
--dur-hero: 520ms;
--dur-nav-hover: 180ms;
--dur-accordion: 220ms;
--dur-demo-switch: 320ms;
--dur-chart-reveal: 320ms;
--dur-rail-selection: 260ms;
--dur-success: 320ms;
--dur-button-hover: 180ms;
--dur-button-press: 120ms;
--dur-card-hover: 180ms;
--dur-reveal: 520ms;
--dur-trace: 560ms;
--ease-standard: cubic-bezier(.2, 0, 0, 1);
--ease-out: cubic-bezier(.22, 1, .36, 1);
--ease-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
--ease-accel: cubic-bezier(0.3, 0, 0.8, 0.15);
}
:root[data-theme="light"] {
color-scheme: light;
--oa-bg-0: #FFFFFF;
--oa-bg-1: #FFFFFF;
--oa-bg-2: #F1F3F6;
--oa-surface-0: #FFFFFF;
--oa-surface-1: #FFFFFF;
--oa-surface-2: #F1F3F6;
--oa-surface-3: #E7EAEF;
--oa-ink-0: #0E1219;
--oa-ink-1: #333B47;
--oa-ink-2: #4B5462;
--oa-ink-3: #5E6674;
--oa-line-0: rgba(17, 22, 31, .08);
--oa-line-1: rgba(17, 22, 31, .14);
--oa-line-2: rgba(17, 22, 31, .24);
--oa-cobalt: #315CF6;
--oa-cobalt-hover: #284FDB;
--oa-cobalt-pressed: #203FAC;
--oa-iris: #6957DF;
--oa-accent-text: #2447C4;
--oa-positive: #07704E;
--oa-negative: #B01F29;
--oa-warning: #8A5808;
--oa-paper: #FFFFFF;
--oa-paper-surface: #FFFFFF;
--oa-paper-ink: #101522;
--oa-paper-muted: #525C6B;
--oa-paper-line: #DDE2EC;
--oa-band-hero: #FFFFFF;
--oa-band-track: #F1F3F6;
--oa-band-understand: #FFFFFF;
--oa-band-research: #F1F3F6;
--oa-band-data: #FFFFFF;
--oa-band-pricing: #F1F3F6;
--oa-band-learn: #FFFFFF;
--oa-band-final: #F6F7F9;
--oa-band-header-stuck: #FFFFFF;
--oa-band-edge: rgba(17, 22, 31, .10);
--oa-scene-cobalt: radial-gradient(60% 70% at 78% 16%, rgba(43,82,222,.055) 0%, transparent 66%);
--oa-scene-iris: radial-gradient(56% 62% at 30% 26%, rgba(105,87,223,.05) 0%, transparent 70%);
--oa-scene-research: radial-gradient(56% 58% at 70% 16%, rgba(43,82,222,.045) 0%, transparent 68%);
--oa-scene-track: none;
--oa-scene-final: radial-gradient(58% 78% at 50% 100%, rgba(43,82,222,.05) 0%, transparent 72%);
--oa-scene-neutral: none;
--oa-paper-edge: rgba(17, 22, 31, .12);
--oa-electric: #7538E8;
--oa-chart-plane: #FFFFFF;
--oa-chart-ledger: #FFFFFF;
--oa-chart-compare: #FFFFFF;
--oa-chart-line: #5646C9;
--oa-chart-cmp: #6A7385;
--oa-chart-s2: #0F8F7E;
--oa-chart-s3: #B07A1B;
--oa-chart-grid: rgba(17, 22, 31, .09);
--oa-chart-axis: #59616F;
--oa-chart-area-0: rgba(105, 87, 223, .17);
--oa-chart-area-1: rgba(105, 87, 223, .025);
--oa-chart-cross: rgba(17, 22, 31, .20);
--oa-chart-pt: #FFFFFF;
--oa-chart-pt-ring: #5646C9;
--oa-chart-tip: #FFFFFF;
--oa-chart-tip-line: rgba(17, 22, 31, .16);
--oa-chart-tip-shadow: 0 12px 32px rgba(17,22,31,.14);
--oa-chart-track: #E7EAF0;
--oa-chart-bar: #3F5AE0;
--oa-chart-bar-sel: #6B45D6;
--oa-chart-desc: #48505E;
--oa-chart-group: #5A6373;
--oa-chart-row-hover: rgba(17, 22, 31, .028);
--oa-chart-col-hover: rgba(49, 92, 246, .045);
--oa-chart-rule: rgba(17, 22, 31, .06);
--oa-chart-vrule: rgba(17, 22, 31, .065);
--brand-600: #315CF6;
--brand-500: #284FDB;
--brand-700: #203FAC;
--brand-400: #5C74E8;
--brand-300: #94A5F2;
--brand-text: #2447C4;
--iris: #6957DF;
--iris-text: #5646C9;
--ink: #0E1219;
--ink-2: #333B47;
--muted: #4B5462;
--faint: #5E6674;
--surface: #FFFFFF;
--surface-raised: #FFFFFF;
--surface-2: #F1F3F6;
--surface-3: #E7EAEF;
--page: #FFFFFF;
--page-deep: #F1F3F6;
--line: rgba(17, 22, 31, .14);
--line-quiet: rgba(17, 22, 31, .08);
--line-strong: rgba(17, 22, 31, .24);
--positive: #07704E;
--warning: #8A5808;
--negative: #B01F29;
--positive-text: #07704E;
--warning-text: #8A5808;
--negative-text: #B01F29;
--on-brand: #FFFFFF;
--on-brand-muted: rgba(255, 255, 255, 0.90);
--on-brand-hover: rgba(255, 255, 255, 0.92);
--focus: #315CF6;
--chip: rgba(43, 82, 222, 0.10);
--overflow-shadow: rgba(17, 22, 31, 0.16);
--shadow-sm: 0 1px 2px rgba(17,22,31,.05);
--shadow-md: 0 1px 2px rgba(17,22,31,.06), 0 6px 16px rgba(17,22,31,.06);
--shadow-lg: 0 1px 2px rgba(17,22,31,.06), 0 10px 24px rgba(17,22,31,.07), 0 30px 60px rgba(17,22,31,.07);
--mesh-a: rgba(43, 82, 222, 0.055);
--mesh-b: rgba(105, 87, 223, 0.04);
--mesh-c: rgba(43, 82, 222, 0.03);
--paper: #FFFFFF;
--paper-surface: #FFFFFF;
--paper-ink: #0E1219;
--paper-muted: #4B5462;
--paper-line: #E3E6EC;
--stage-bg: #F7F8FA;
--stage-device: #FFFFFF;
--stage-raised: #F4F5F8;
--stage-bezel: rgba(17, 22, 31, .14);
--stage-track: rgba(255, 255, 255, 0.10);
--stage-ink: #0E1219;
--stage-ink-2: #4B5462;
--stage-ink-3: #5E6674;
}
:root[data-theme="dark"] {
color-scheme: dark;
--oa-bg-0: #070910;
--oa-bg-1: #0A0E17;
--oa-bg-2: #090D16;
--oa-surface-0: #0D121D;
--oa-surface-1: #111827;
--oa-surface-2: #162034;
--oa-surface-3: #1B2740;
--oa-ink-0: #F4F6FC;
--oa-ink-1: #C3CAD9;
--oa-ink-2: #98A3B6;
--oa-ink-3: #8791A6;
--oa-line-0: rgba(205, 214, 236, .08);
--oa-line-1: rgba(205, 214, 236, .13);
--oa-line-2: rgba(205, 214, 236, .22);
--oa-cobalt: #315CF6;
--oa-cobalt-hover: #426BFF;
--oa-cobalt-pressed: #294ED1;
--oa-iris: #7867F2;
--oa-accent-text: #A7B5FF;
--oa-positive: #50D7A5;
--oa-negative: #FF858E;
--oa-warning: #F0C66C;
--oa-paper: #F3F5F9;
--oa-paper-surface: #FFFFFF;
--oa-paper-ink: #111724;
--oa-paper-muted: #59657A;
--oa-paper-line: #DDE2EC;
--oa-band-hero: #070910;
--oa-band-track: #090D16;
--oa-band-understand: #080D16;
--oa-band-research: #080D16;
--oa-band-data: #090B12;
--oa-band-pricing: #090B12;
--oa-band-learn: #F3F5F9;
--oa-band-final: #070910;
--oa-band-header-stuck: #090C13;
--oa-band-edge: rgba(205, 214, 236, .055);
--oa-scene-cobalt: radial-gradient(62% 72% at 78% 18%, rgba(49,92,246,.20) 0%, rgba(49,92,246,.08) 34%, transparent 68%), radial-gradient(46% 56% at 62% 78%, rgba(120,103,242,.13) 0%, transparent 72%);
--oa-scene-iris: radial-gradient(58% 64% at 30% 28%, rgba(120,103,242,.16) 0%, rgba(120,103,242,.06) 38%, transparent 72%), radial-gradient(50% 60% at 78% 64%, rgba(49,92,246,.12) 0%, transparent 72%);
--oa-scene-research: radial-gradient(58% 60% at 70% 18%, rgba(49,92,246,.14) 0%, transparent 70%), radial-gradient(38% 48% at 88% 72%, rgba(92,181,255,.07) 0%, transparent 72%);
--oa-scene-track: radial-gradient(48% 58% at 22% 26%, rgba(49,92,246,.12) 0%, transparent 68%);
--oa-scene-final: radial-gradient(58% 78% at 50% 100%, rgba(49,92,246,.16) 0%, transparent 72%);
--oa-scene-neutral: none;
--oa-paper-edge: rgba(0, 0, 0, .34);
--oa-electric: #8D52FF;
--oa-chart-plane: #0D121D;
--oa-chart-ledger: #0C111B;
--oa-chart-compare: #0B1019;
--oa-chart-line: #7D69FF;
--oa-chart-cmp: #77839A;
--oa-chart-s2: #45C4B0;
--oa-chart-s3: #E0B15C;
--oa-chart-grid: rgba(208, 216, 237, .07);
--oa-chart-axis: #8E99AD;
--oa-chart-area-0: rgba(120, 103, 242, .22);
--oa-chart-area-1: rgba(120, 103, 242, .035);
--oa-chart-cross: rgba(255, 255, 255, .16);
--oa-chart-pt: #F4F6FC;
--oa-chart-pt-ring: #7867F2;
--oa-chart-tip: #171E2D;
--oa-chart-tip-line: rgba(255, 255, 255, .12);
--oa-chart-tip-shadow: 0 12px 32px rgba(0,0,0,.30);
--oa-chart-track: #20283A;
--oa-chart-bar: #687CFF;
--oa-chart-bar-sel: #9A71FF;
--oa-chart-desc: #AAB3C4;
--oa-chart-group: #78859A;
--oa-chart-row-hover: rgba(255, 255, 255, .025);
--oa-chart-col-hover: rgba(49, 92, 246, .045);
--oa-chart-rule: rgba(255, 255, 255, .06);
--oa-chart-vrule: rgba(255, 255, 255, .065);
--brand-600: #315CF6;
--brand-500: #426BFF;
--brand-700: #294ED1;
--brand-400: #5C7BFF;
--brand-300: #93A6FF;
--brand-text: #A7B5FF;
--iris: #7867F2;
--iris-text: #A79BF9;
--ink: #F4F6FC;
--ink-2: #C3CAD9;
--muted: #98A3B6;
--faint: #8791A6;
--surface: #111827;
--surface-raised: #162034;
--surface-2: #0D121D;
--surface-3: #1B2740;
--page: #090D16;
--page-deep: #070910;
--line: rgba(205, 214, 236, .13);
--line-quiet: rgba(205, 214, 236, .08);
--line-strong: rgba(205, 214, 236, .22);
--positive: #50D7A5;
--warning: #F0C66C;
--negative: #FF858E;
--positive-text: #50D7A5;
--warning-text: #F0C66C;
--negative-text: #FF858E;
--on-brand: #FFFFFF;
--on-brand-muted: rgba(255, 255, 255, 0.90);
--on-brand-hover: rgba(255, 255, 255, 0.92);
--focus: #8EA1FF;
--chip: rgba(49, 92, 246, 0.20);
--overflow-shadow: rgba(0, 0, 0, 0.55);
--shadow-sm: 0 1px 1px rgba(0,0,0,.28);
--shadow-md: 0 1px 1px rgba(0,0,0,.28), 0 8px 24px rgba(0,0,0,.16);
--shadow-lg: 0 1px 1px rgba(0,0,0,.34), 0 16px 38px rgba(0,0,0,.24), 0 36px 84px rgba(0,0,0,.18);
--mesh-a: rgba(49, 92, 246, 0.20);
--mesh-b: rgba(120, 103, 242, 0.13);
--mesh-c: rgba(49, 92, 246, 0.08);
--paper: #F3F5F9;
--paper-surface: #FFFFFF;
--paper-ink: #111724;
--paper-muted: #59657A;
--paper-line: #DDE2EC;
--stage-bg: #070910;
--stage-device: #0B0E16;
--stage-raised: #162034;
--stage-bezel: rgba(255, 255, 255, .12);
--stage-track: rgba(255, 255, 255, 0.10);
--stage-ink: #F4F6FC;
--stage-ink-2: #98A3B6;
--stage-ink-3: #8791A6;
}
/* ── base.css ── */
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url("/assets/fonts/manrope-var.woff2?v=r53") format("woff2");
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--nav-h) + var(--sp-8));
scroll-padding-bottom: max(120px, 16vh);
}
body {
scroll-padding-top: calc(var(--nav-h) + var(--sp-8));
scroll-padding-bottom: max(120px, 16vh);
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
transition-delay: 0s !important;
scroll-behavior: auto !important;
}
}
body {
margin: 0;
background: var(--page);
color: var(--ink);
font-family: var(--ff-sans);
font-size: var(--fs-16);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: clip;
}
h1,
h2,
h3,
h4 {
margin: 0 0 var(--sp-16);
font-family: var(--ff-display);
line-height: var(--lh-tight);
letter-spacing: -0.015em;
font-weight: 700;
text-wrap: balance;
}
.display {
font-family: var(--ff-display);
font-size: var(--fs-display);
line-height: var(--lh-display);
letter-spacing: -0.02em;
font-weight: var(--fw-display);
}
h1 {
font-size: var(--fs-h1);
line-height: var(--lh-h1);
}
h2 {
font-size: var(--fs-h2);
line-height: var(--lh-h2);
font-weight: var(--fw-h2);
}
h3 {
font-size: var(--fs-h3);
line-height: var(--lh-h3);
font-weight: var(--fw-h3);
}
h4 {
font-size: var(--fs-20);
line-height: var(--lh-snug);
}
p {
margin: 0 0 var(--sp-16);
max-width: var(--measure);
color: var(--ink-2);
text-wrap: pretty;
}
a {
color: var(--brand-text);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
a:hover {
color: var(--brand-text);
}
:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 2px;
border-radius: var(--r-12);
}
img,
picture,
svg,
video {
display: block;
max-width: 100%;
height: auto;
}
ul,
ol {
margin: 0 0 var(--sp-16);
padding-left: var(--sp-24);
color: var(--ink-2);
}
li {
margin: var(--sp-4) 0;
}
hr {
border: 0;
border-top: 1px solid var(--line);
margin: var(--sp-48) 0;
}
code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.9em;
background: var(--surface-2);
padding: 0.15em 0.4em;
border-radius: var(--r-marker);
}
.wrap {
width: 100%;
max-width: var(--content-max);
margin-inline: auto;
padding-inline: var(--gutter);
}
@media (max-width: 960px) {
.wrap {
padding-inline: var(--gutter-tablet);
}
}
@media (max-width: 720px) {
.wrap {
padding-inline: var(--gutter-mobile);
}
}
.section {
padding-block: var(--section-gap);
}
@media (max-width: 720px) {
.section {
padding-block: var(--section-gap-mobile);
}
}
.grid {
display: grid;
grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
gap: var(--sp-32);
}
@media (max-width: 960px) {
.grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.grid {
grid-template-columns: minmax(0, 1fr);
gap: var(--sp-24);
}
}
.eyebrow {
font-size: var(--fs-12);
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--brand-text);
margin: 0 0 var(--sp-12);
}
.lede {
font-size: var(--fs-body-l);
line-height: var(--lh-lead);
color: var(--muted);
max-width: var(--measure);
}
.tnum {
font-family: var(--ff-numeric);
font-variant-numeric: tabular-nums;
font-feature-settings: var(--fv-tabular);
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
left: var(--sp-16);
top: -100px;
z-index: 100;
background: var(--surface);
color: var(--ink);
padding: var(--sp-12) var(--sp-16);
border-radius: var(--r-12);
box-shadow: var(--shadow-md);
transition: top var(--dur-fast) var(--ease-standard);
}
.skip-link:focus {
top: var(--sp-16);
}
[hidden] {
display: none !important;
}
/* ── components.css ── */
.nav {
position: sticky;
top: 0;
z-index: 50;
background: var(--surface);
border-bottom: 1px solid transparent;
transition: border-color var(--dur-standard) var(--ease-standard);
}
.nav.is-stuck {
border-bottom-color: var(--line);
}
.nav__inner {
display: flex;
align-items: center;
gap: var(--sp-16);
min-height: var(--nav-h);
}
.nav__brand {
display: inline-flex;
align-items: center;
gap: var(--sp-8);
font-family: var(--ff-display);
font-weight: 700;
font-size: var(--fs-16);
color: var(--ink);
text-decoration: none;
letter-spacing: -0.01em;
}
.nav__brand svg {
width: 26px;
height: 26px;
flex: none;
}
.nav__links {
display: flex;
align-items: center;
gap: var(--sp-4);
margin-left: var(--sp-16);
}
.nav__item {
position: relative;
}
.nav__link {
position: relative;
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 var(--sp-12);
color: var(--ink-2);
text-decoration: none;
font-size: var(--fs-14);
font-weight: 550;
border-radius: var(--r-12);
transition: color 140ms var(--ease-standard);
}
.nav__link::after {
content: "";
position: absolute;
left: var(--sp-12);
right: var(--sp-12);
bottom: 9px;
height: 2px;
background: var(--brand-600);
border-radius: var(--r-marker);
transform: scaleX(0);
transform-origin: left;
transition: transform 140ms var(--ease-standard);
}
.nav__link:hover,
.nav__link:focus-visible {
color: var(--brand-text);
}
.nav__link:hover::after,
.nav__item:focus-within > .nav__link::after {
transform: scaleX(1);
}
.nav__link.is-current {
color: var(--ink);
}
.nav__link.is-current::after {
transform: scaleX(1);
}
.nav__end {
display: flex;
align-items: center;
gap: var(--sp-8);
margin-left: auto;
}
.nav__cta {
min-height: 44px;
padding: 0 var(--sp-16);
font-size: var(--fs-14);
}
.mega {
position: absolute;
top: calc(100% + var(--sp-4));
left: 0;
padding: var(--sp-12);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-18);
box-shadow: var(--shadow-lg);
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity 160ms var(--ease-standard), transform 160ms var(--ease-standard),
visibility 0s linear 160ms;
z-index: 60;
}
.nav__item.is-dismissed .mega {
opacity: 0;
visibility: hidden;
transform: translateY(6px);
}
.nav__item:hover:not(.is-dismissed) .mega,
.nav__item:focus-within:not(.is-dismissed) .mega {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: opacity 160ms var(--ease-standard), transform 160ms var(--ease-standard),
visibility 0s linear 0s;
}
.mega__inner {
display: flex;
gap: var(--sp-16);
}
.mega--product .mega__inner {
min-width: 520px;
}
.mega--research .mega__inner {
min-width: 300px;
}
.mega--learn .mega__inner {
min-width: 460px;
}
.mega__col {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 240px;
}
.mega__title {
margin: 0 0 var(--sp-4);
padding: 0 var(--sp-12);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--faint);
}
.mega__link {
display: flex;
flex-direction: column;
gap: 2px;
padding: var(--sp-8) var(--sp-12);
border-radius: var(--r-12);
text-decoration: none;
transition: background-color 160ms var(--ease-standard);
}
.mega__link:hover,
.mega__link:focus-visible {
background: var(--chip);
}
.mega__name {
font-size: var(--fs-14);
font-weight: 650;
color: var(--ink);
}
.mega__desc {
font-size: var(--fs-meta);
color: var(--muted);
}
.nav__burger {
display: none;
}
.nav__mobile {
display: none;
}
@media (max-width: 900px) {
.nav__links {
display: none;
}
.nav__cta {
display: none;
}
.nav__burger {
display: inline-flex;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 44px;
height: 44px;
padding: 0 11px;
background: none;
border: 0;
cursor: pointer;
}
.nav__burger span {
display: block;
height: 2px;
background: var(--ink);
border-radius: var(--r-marker);
transition: transform 200ms var(--ease-standard), opacity 200ms var(--ease-standard);
}
.nav__burger[aria-expanded="true"] span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav__burger[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
}
.nav__burger[aria-expanded="true"] span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
.nav__mobile {
display: block;
border-top: 1px solid var(--line);
background: var(--surface);
max-height: calc(100vh - 64px);
overflow-y: auto;
}
.nav__mobile[hidden] {
display: none;
}
.navm__inner {
display: flex;
flex-direction: column;
gap: var(--sp-24);
padding-block: var(--sp-24);
}
.navm__group {
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
.navm__label {
margin: 0 0 var(--sp-4);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--faint);
}
.navm__group nav {
display: flex;
flex-direction: column;
}
.navm__group nav a {
min-height: 44px;
display: flex;
align-items: center;
color: var(--ink-2);
text-decoration: none;
font-size: var(--fs-16);
}
.navm__group nav a:hover {
color: var(--brand-text);
}
.navm__cta {
margin-top: var(--sp-8);
}
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-8);
min-height: 48px;
padding: 0 var(--sp-24);
border: 1px solid transparent;
border-radius: var(--r-12);
font: inherit;
font-size: var(--fs-16);
font-weight: 600;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
transition: transform var(--dur-fast) var(--ease-standard),
background-color var(--dur-fast) var(--ease-standard),
border-color var(--dur-fast) var(--ease-standard),
box-shadow var(--dur-fast) var(--ease-standard);
}
.btn:active {
transform: translateY(1px);
}
@media (prefers-reduced-motion: reduce) {
.btn:active {
transform: none;
}
}
.btn--primary {
background: var(--brand-600);
color: var(--on-brand);
box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
background: var(--brand-500);
color: var(--on-brand);
box-shadow: var(--shadow-md);
}
.btn--ghost {
background: transparent;
border-color: var(--line);
color: var(--ink);
}
.btn--ghost:hover {
background: var(--surface-2);
color: var(--ink);
}
.btn--block {
width: 100%;
}
.card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-18);
padding: var(--sp-24);
box-shadow: var(--shadow-sm);
}
.story {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: var(--sp-48);
align-items: center;
}
.story__copy {
grid-column: span 6;
}
.story__media {
grid-column: span 6;
}
.story--flip .story__copy {
order: 2;
}
@media (max-width: 900px) {
.story {
grid-template-columns: minmax(0, 1fr);
gap: var(--sp-32);
}
.story__copy,
.story__media {
grid-column: 1 / -1;
}
.story--flip .story__copy {
order: 0;
}
}
.proof {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--sp-16);
border-block: 1px solid var(--line);
padding-block: var(--sp-32);
}
.proof__item {
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
.proof__label {
font-size: var(--fs-14);
font-weight: 650;
color: var(--ink);
}
.proof__detail {
font-size: var(--fs-14);
color: var(--muted);
margin: 0;
}
@media (max-width: 900px) {
.proof {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sp-24);
}
}
.device {
position: relative;
margin-inline: auto;
width: min(280px, 100%);
border-radius: var(--r-18);
padding: 10px;
background: var(--surface-2);
border: 1px solid var(--line);
box-shadow: var(--shadow-lg);
}
.device img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 680 / 1432;
border-radius: var(--r-12);
background: var(--surface);
}
.device--lg {
width: min(340px, 100%);
}
.device--hero {
width: min(400px, 100%);
}
.device__caption {
margin: var(--sp-12) 0 0;
text-align: center;
font-size: var(--fs-12);
color: var(--ink-2);
}
.tiers {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--sp-16);
}
.tier {
display: flex;
flex-direction: column;
gap: var(--sp-8);
}
.tier__price {
font-size: var(--fs-h3);
font-weight: 700;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.tier__note {
font-size: var(--fs-14);
color: var(--muted);
margin: 0;
}
@media (max-width: 860px) {
.tiers {
grid-template-columns: minmax(0, 1fr);
}
}
.footer {
border-top: 1px solid var(--line);
padding-block: var(--sp-48);
color: var(--muted);
font-size: var(--fs-14);
}
.footer__grid {
display: grid;
grid-template-columns: 1.5fr repeat(4, 1fr);
gap: var(--sp-40, 40px) var(--sp-24);
align-items: start;
}
.footer__brand { display: flex; flex-direction: column; gap: var(--sp-8); max-width: 260px; }
.footer__logo { font-weight: 800; font-size: 1.15rem; color: var(--ink); text-decoration: none; }
.footer__tag { margin: 0; color: var(--muted); font-size: var(--fs-14); line-height: 1.45; }
.footer__cta {
align-self: flex-start;
margin-top: var(--sp-4);
padding: var(--sp-8) var(--sp-16);
min-height: 44px;
border: 1px solid var(--line);
border-radius: var(--r-12);
color: var(--ink) !important;
font-weight: 600;
}
.footer__cta:hover { border-color: var(--brand-400); }
.footer__copy { color: var(--faint); margin-top: var(--sp-8); }
.footer__col { display: flex; flex-direction: column; }
.footer__label {
display: inline-block;
margin: 0 0 var(--sp-8);
font-size: .74rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--faint);
text-decoration: none;
transition: color 140ms var(--ease-standard);
}
a.footer__label:hover,
a.footer__label:focus-visible {
color: var(--brand-text);
}
.footer__links { display: flex; flex-direction: column; gap: 0; }
.footer a {
color: var(--muted);
text-decoration: none;
display: inline-flex;
align-items: center;
min-height: 34px;
}
.footer a:hover { color: var(--ink); }
@media (max-width: 860px) {
.footer__grid { grid-template-columns: 1fr 1fr; }
.footer__brand { grid-column: 1 / -1; max-width: none; }
}
.theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 1px solid var(--line);
border-radius: var(--r-12);
background: transparent;
color: var(--ink-2);
cursor: pointer;
transition: background-color var(--dur-fast) var(--ease-standard),
color var(--dur-fast) var(--ease-standard);
}
.theme-toggle:hover {
background: var(--surface-2);
color: var(--ink);
}
.theme-toggle .icon-moon {
display: none;
}
.theme-toggle .icon-sun {
display: block;
}
:root[data-theme="light"] .theme-toggle .icon-moon {
display: block;
}
:root[data-theme="light"] .theme-toggle .icon-sun {
display: none;
}
.field {
display: block;
margin-block: var(--sp-16) var(--sp-8);
font-weight: 600;
font-size: var(--fs-14);
}
.input {
width: 100%;
min-height: 48px;
padding: var(--sp-12) var(--sp-16);
font: inherit;
color: var(--ink);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-12);
}
.input:focus-visible {
border-color: var(--brand-text);
}
.note {
font-size: var(--fs-14);
color: var(--muted);
}
.overflow {
position: relative;
}
.overflow > [data-overflow-scroller] {
overflow-x: auto;
overscroll-behavior-inline: contain;
scroll-padding-inline: var(--sp-32);
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.overflow > [data-overflow-scroller]::-webkit-scrollbar { display: none; }
.overflow > [data-overflow-scroller].is-dragging {
cursor: grabbing;
user-select: none;
}
.overflow.has-start > [data-overflow-scroller] {
mask-image: linear-gradient(to right, transparent 0, #000 34px, #000 100%);
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 34px, #000 100%);
}
.overflow.has-end > [data-overflow-scroller] {
mask-image: linear-gradient(to left, transparent 0, #000 34px, #000 100%);
-webkit-mask-image: linear-gradient(to left, transparent 0, #000 34px, #000 100%);
}
.overflow.has-start.has-end > [data-overflow-scroller] {
mask-image: linear-gradient(to right, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
-webkit-mask-image:
linear-gradient(to right, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
}
.overflow--rail,
.overflow--chips,
.overflow--tabs,
.overflow--carousel {
display: flex;
align-items: center;
gap: var(--sp-8);
}
.overflow--rail > [data-overflow-scroller],
.overflow--chips > [data-overflow-scroller],
.overflow--tabs > [data-overflow-scroller],
.overflow--carousel > [data-overflow-scroller] {
flex: 1 1 auto;
min-width: 0;
}
.overflow__btn {
flex: none;
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid var(--line);
border-radius: var(--r-12);
background: var(--surface);
color: var(--ink);
box-shadow: var(--shadow-sm);
cursor: pointer;
transition: border-color var(--dur-fast) var(--ease-standard),
background-color var(--dur-fast) var(--ease-standard);
}
.overflow__btn[hidden] { display: none; }
.overflow__btn.is-edge {
visibility: hidden;
pointer-events: none;
}
.overflow__btn:hover { border-color: var(--brand-400); }
.overflow__btn:active { background: var(--surface-2); }
.overflow__ico { width: 20px; height: 20px; }
.overflow--table > [data-overflow-scroller] {
mask-image: none;
-webkit-mask-image: none;
}
.overflow--table::before,
.overflow--table::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 22px;
z-index: 1;
pointer-events: none;
opacity: 0;
transition: opacity var(--dur-fast) var(--ease-standard);
}
.overflow--table::before {
inset-inline-start: 0;
background: linear-gradient(to right, var(--overflow-shadow), transparent);
}
.overflow--table::after {
inset-inline-end: 0;
background: linear-gradient(to left, var(--overflow-shadow), transparent);
}
.overflow--table.has-start::before { opacity: 1; }
.overflow--table.has-end::after { opacity: 1; }
.overflow--table[data-overflow-sticky-col] th:first-child,
.overflow--table[data-overflow-sticky-col] td:first-child {
position: sticky;
inset-inline-start: 0;
z-index: 1;
background: var(--oa-chart-ledger);
}
.overflow__cue {
margin: var(--sp-4) 0 0;
font-size: var(--fs-12);
font-weight: var(--fw-meta, 550);
color: var(--muted);
}
.overflow__cue[hidden] { display: none; }
.overflow--rail {
margin: var(--sp-16) 0 var(--sp-24);
}
.overflow--chips,
.overflow--tabs {
min-width: 0;
max-width: 100%;
}
.contextnav {
display: flex;
gap: var(--sp-8);
align-items: center;
overflow-x: auto;
padding-block: var(--sp-4, 4px);
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.contextnav::-webkit-scrollbar { display: none; }
.contextnav__item {
flex: 0 0 auto;
min-height: 44px;
display: inline-flex;
align-items: center;
gap: var(--sp-8);
padding: 0 var(--sp-16);
border: 1px solid var(--line);
border-radius: var(--r-full);
background: var(--surface);
color: var(--muted);
font-size: var(--fs-14);
font-weight: 600;
text-decoration: none;
white-space: nowrap;
transition: color var(--dur-fast) var(--ease-standard),
border-color var(--dur-fast) var(--ease-standard),
background-color var(--dur-fast) var(--ease-standard);
}
a.contextnav__item:hover,
a.contextnav__item:focus-visible {
color: var(--ink);
border-color: var(--brand-400);
}
.contextnav__item[aria-current="page"] {
background: var(--brand-600);
border-color: var(--brand-text);
color: var(--on-brand);
cursor: default;
}
.contextnav__item[aria-current="page"]::before {
content: "";
width: 6px;
height: 6px;
border-radius: var(--r-full);
background: currentColor;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(264px, 1fr));
gap: var(--sp-16);
margin-top: var(--sp-32, 32px);
}
.feature-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--sp-8);
padding: var(--sp-24);
border: 1px solid var(--line);
border-radius: var(--r-18);
background: var(--surface);
color: var(--ink);
text-decoration: none;
box-shadow: var(--shadow-sm);
transition: transform var(--dur-standard) var(--ease-standard),
box-shadow var(--dur-standard) var(--ease-standard),
border-color var(--dur-standard) var(--ease-standard);
}
.feature-card:hover,
.feature-card:focus-visible {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
border-color: var(--brand-400);
}
.feature-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: var(--r-12);
background: var(--chip);
color: var(--brand-text);
margin-bottom: var(--sp-4);
}
.feature-card h3 { margin: 0; font-size: 1.18rem; line-height: 1.2; }
.feature-card p { margin: 0; color: var(--muted); font-size: var(--fs-14); line-height: 1.5; }
.feature-card__go {
margin-top: var(--sp-4);
font-size: var(--fs-14);
font-weight: 600;
color: var(--brand-text);
transform: translateX(0);
transition: transform var(--dur-standard) var(--ease-standard);
}
.feature-card:hover .feature-card__go,
.feature-card:focus-visible .feature-card__go { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
.feature-card { transition: none; }
.feature-card:hover { transform: none; }
.feature-card__go { transition: none; }
}
.trio {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-24);
margin-block: var(--sp-24) var(--sp-32);
}
.trio__mod {
display: flex;
flex-direction: column;
gap: var(--sp-8);
padding: var(--sp-24);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-18);
}
.trio__mod h3 {
margin: 0;
font-size: var(--fs-h3, 1.375rem);
}
.trio__mod p {
margin: 0;
color: var(--muted);
font-size: var(--fs-14);
}
.trio__icon {
display: inline-flex;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
border-radius: var(--r-12);
background: var(--chip);
color: var(--brand-text);
margin-bottom: var(--sp-4);
}
@media (max-width: 820px) {
.trio {
grid-template-columns: 1fr;
gap: var(--sp-16);
}
}
.srcfilter {
display: flex;
flex-wrap: wrap;
gap: var(--sp-12);
align-items: center;
margin-block: var(--sp-24) var(--sp-16);
}
.srcfilter__search {
flex: 1;
min-width: 220px;
min-height: 44px;
padding: 0 var(--sp-16);
border: 1px solid var(--line);
border-radius: var(--r-12);
background: var(--surface);
color: var(--ink);
font: inherit;
font-size: var(--fs-14);
}
.srcfilter__chips {
display: flex;
gap: var(--sp-4);
}
.srcchip {
min-height: 44px;
padding: 0 var(--sp-16);
border: 1px solid var(--line);
border-radius: var(--r-full);
background: var(--surface);
color: var(--muted);
font: inherit;
font-size: var(--fs-14);
font-weight: 600;
cursor: pointer;
transition: color 160ms var(--ease-standard), background-color 160ms var(--ease-standard),
border-color 160ms var(--ease-standard);
}
.srcchip.is-active {
background: var(--brand-600);
color: var(--on-brand);
border-color: var(--brand-text);
}
.srctable {
width: 100%;
border-collapse: collapse;
}
.srctable th,
.srctable td {
text-align: left;
padding: var(--sp-12);
border-bottom: 1px solid var(--line);
font-size: var(--fs-14);
vertical-align: top;
}
.srctable th {
font-size: var(--fs-meta);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--faint);
font-weight: 700;
}
.srctable td:first-child {
font-weight: 650;
color: var(--ink);
white-space: nowrap;
}
.srctable__cadence {
display: inline-flex;
padding: 2px var(--sp-8);
border-radius: var(--r-full);
font-size: var(--fs-meta);
font-weight: 600;
}
.cad-daily {
background: var(--chip);
color: var(--brand-text);
}
.cad-monthly {
background: color-mix(in srgb, var(--iris) 16%, transparent);
color: var(--iris-text);
}
.srcempty {
color: var(--muted);
padding: var(--sp-16) 0;
}
.process {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--sp-12);
margin-block: var(--sp-24) var(--sp-32);
}
.process__step {
position: relative;
padding: var(--sp-16);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-12);
}
.process__step .n {
font-family: var(--ff-display);
font-size: var(--fs-meta);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--brand-text);
}
.process__step strong {
display: block;
margin-top: var(--sp-4);
font-size: var(--fs-14);
color: var(--ink);
}
.process__step:not(:last-child)::after {
content: "→";
position: absolute;
right: calc(-1 * var(--sp-12) / 2 - 6px);
top: 50%;
transform: translateY(-50%);
color: var(--faint);
font-size: var(--fs-14);
}
@media (max-width: 820px) {
.process {
grid-template-columns: 1fr;
}
.process__step:not(:last-child)::after {
content: "↓";
right: 50%;
top: auto;
bottom: calc(-1 * var(--sp-12) / 2 - 8px);
transform: translateX(50%);
}
}
.compare-tool {
margin-block: var(--sp-24) var(--sp-32);
padding: var(--sp-24);
background: var(--surface-raised);
border: 1px solid var(--line);
border-radius: var(--r-18);
box-shadow: var(--shadow-md);
}
.compare-tool__search {
display: flex;
align-items: center;
gap: var(--sp-8);
min-height: 48px;
padding: 0 var(--sp-16);
border: 1px solid var(--line);
border-radius: var(--r-12);
background: var(--surface);
color: var(--muted);
font-size: var(--fs-14);
}
.compare-tool__tray {
display: flex;
flex-wrap: wrap;
gap: var(--sp-8);
margin-top: var(--sp-16);
}
.compare-tool__chip {
display: inline-flex;
align-items: center;
gap: var(--sp-8);
padding: var(--sp-8) var(--sp-12);
border-radius: var(--r-full);
background: var(--chip);
color: var(--ink);
font-size: var(--fs-14);
font-weight: 550;
}
.compare-tool__grid {
width: 100%;
border-collapse: collapse;
margin-top: var(--sp-16);
}
.compare-tool__grid th,
.compare-tool__grid td {
text-align: left;
padding: var(--sp-8) var(--sp-12);
border-bottom: 1px solid var(--line);
font-size: var(--fs-14);
font-variant-numeric: tabular-nums;
}
.compare-tool__grid th {
font-size: var(--fs-meta);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--faint);
}
.btn:active,
.overflow__btn:active,
.theme-toggle:active,
.srcchip:active,
.nav__cta:active {
transform: translateY(1px);
}
.contextnav__item:active,
.mega__link:active,
.footer__cta:active {
background: var(--surface-2);
}
.btn[disabled],
.btn[aria-disabled="true"],
button[disabled],
.srcchip[disabled],
.overflow__btn[disabled],
input[disabled],
select[disabled],
textarea[disabled] {
opacity: 0.55;
cursor: not-allowed;
box-shadow: none;
transform: none;
}
.btn[disabled]:hover,
.btn[aria-disabled="true"]:hover,
button[disabled]:hover,
.srcchip[disabled]:hover {
background: inherit;
border-color: inherit;
box-shadow: none;
}
[aria-disabled="true"] {
pointer-events: none;
}
.input,
.srcfilter__search,
input[type="text"],
input[type="email"],
input[type="search"] {
transition: border-color var(--dur-button-hover) var(--ease-standard),
background-color var(--dur-button-hover) var(--ease-standard);
}
.input:hover,
.srcfilter__search:hover {
border-color: var(--brand-400);
}
.srcfilter__search:focus-visible,
.input:focus-visible {
border-color: var(--brand-text);
}
.card,
.bento__card,
.feature-card {
transition: transform var(--dur-card-hover) var(--ease-standard),
border-color var(--dur-card-hover) var(--ease-standard),
box-shadow var(--dur-card-hover) var(--ease-standard);
}
a.card:active,
a.bento__card:active,
a.feature-card:active {
transform: translateY(0);
}
.price {
display: inline-flex;
align-items: baseline;
gap: 1px;
font-family: var(--ff-display);
font-weight: 700;
color: var(--ink);
}
.price__cur {
font-size: 0.68em;
font-weight: 600;
color: var(--muted);
}
.price__val {
font-size: var(--fs-24);
font-variant-numeric: tabular-nums;
font-feature-settings: var(--fv-tabular);
letter-spacing: -0.02em;
}
.price__per {
margin-left: 2px;
font-family: var(--ff-sans);
font-size: var(--fs-meta);
font-weight: var(--fw-meta);
color: var(--muted);
}
.overflow--table table {
width: 100%;
margin: 0;
}
.index-list {
list-style: none;
margin: 0;
padding: var(--sp-8) var(--sp-24);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-18);
box-shadow: var(--shadow-sm);
counter-reset: idx;
}
.index-list li {
margin: 0;
}
.index-list li + li a {
border-top: 1px solid var(--line);
}
.index-list a {
display: grid;
grid-template-columns: 2.25rem minmax(0, 1fr) auto 1rem;
align-items: baseline;
column-gap: var(--sp-16);
min-height: 44px;
padding-block: var(--sp-16);
text-decoration: none;
counter-increment: idx;
transition: background-color var(--dur-nav-hover) var(--ease-standard);
}
.index-list a::before {
content: counter(idx, decimal-leading-zero);
font-variant-numeric: tabular-nums;
font-feature-settings: var(--fv-tabular);
font-size: var(--fs-meta);
font-weight: var(--fw-meta);
color: var(--faint);
}
.index-list a::after {
content: "→";
justify-self: end;
color: var(--faint);
transition: transform var(--dur-nav-hover) var(--ease-standard),
color var(--dur-nav-hover) var(--ease-standard);
}
.index-list a:hover,
.index-list a:focus-visible {
background: var(--chip);
}
.index-list a:hover::after,
.index-list a:focus-visible::after {
transform: translateX(3px);
color: var(--brand-text);
}
.index-list a:active {
background: var(--surface-2);
}
.index-list__text {
display: flex;
flex-direction: column;
gap: 2px;
max-width: 54ch;
}
.index-list__title {
font-family: var(--ff-display);
font-size: var(--fs-20);
font-weight: var(--fw-h3);
line-height: var(--lh-h3);
color: var(--ink);
transition: color var(--dur-nav-hover) var(--ease-standard);
}
.index-list a:hover .index-list__title {
color: var(--brand-text);
}
.index-list__desc {
font-size: var(--fs-14);
line-height: var(--lh-body);
color: var(--muted);
}
.index-list__meta {
font-size: var(--fs-meta);
line-height: var(--lh-meta);
font-weight: var(--fw-meta);
color: var(--faint);
white-space: nowrap;
}
.section-action {
align-self: end;
min-height: 44px;
display: inline-flex;
align-items: center;
gap: var(--sp-8);
font-size: var(--fs-14);
font-weight: 600;
color: var(--brand-text);
text-decoration: none;
white-space: nowrap;
}
.section-action:hover {
text-decoration: underline;
}
.section-action::after {
content: "→";
transition: transform var(--dur-nav-hover) var(--ease-standard);
}
.section-action:hover::after {
transform: translateX(3px);
}
@media (max-width: 720px) {
.index-list {
padding-inline: var(--sp-16);
}
.index-list a {
grid-template-columns: 1.75rem minmax(0, 1fr);
row-gap: var(--sp-4);
}
.index-list a::after {
display: none;
}
.index-list__meta {
grid-column: 2;
}
}
.stage {
position: relative;
isolation: isolate;
padding: var(--sp-24);
border-radius: var(--r-18);
background: var(--stage-bg);
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.stage::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(70% 55% at 78% 6%, var(--mesh-a), transparent 62%),
radial-gradient(55% 45% at 8% 96%, var(--mesh-b), transparent 58%);
pointer-events: none;
}
.canvas2 {
position: relative;
}
.device2 {
border-radius: var(--r-18);
background: var(--stage-device);
border: 1px solid var(--stage-bezel);
box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55);
overflow: hidden;
}
.device2__bar {
display: flex;
align-items: center;
gap: var(--sp-8);
padding: var(--sp-12) var(--sp-16);
border-bottom: 1px solid var(--stage-bezel);
}
.device2__bar::before {
content: "";
width: 6px;
height: 6px;
border-radius: var(--r-full);
background: var(--positive);
flex: none;
}
.device2__screen-name {
font-size: var(--fs-meta);
line-height: var(--lh-meta);
font-weight: var(--fw-meta);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--stage-ink-2);
}
.device2__screen {
min-height: 336px;
padding: var(--sp-16);
transition: opacity var(--dur-demo-switch) var(--ease-standard);
}
.device2__screen.is-swapping {
opacity: 0;
}
.feat-canvas,
.jobs__media {
position: relative;
isolation: isolate;
padding: var(--sp-24);
border-radius: var(--r-18);
background: var(--stage-bg);
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.feat-canvas::before,
.jobs__media::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(70% 55% at 78% 6%, var(--mesh-a), transparent 62%),
radial-gradient(55% 45% at 8% 96%, var(--mesh-b), transparent 58%);
pointer-events: none;
}
.pv {
display: flex;
flex-direction: column;
gap: var(--sp-16);
color: var(--stage-ink);
font-size: var(--fs-14);
}
.pv__eyebrow {
display: block;
font-size: var(--fs-12);
font-weight: var(--fw-meta);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--stage-ink-2);
}
.pv__money {
display: inline-flex;
align-items: baseline;
gap: 2px;
font-family: var(--ff-display);
font-weight: 700;
}
.pv__cur {
font-size: 0.62em;
font-weight: 600;
color: var(--stage-ink-2);
}
.pv__val {
font-variant-numeric: tabular-nums;
font-feature-settings: var(--fv-tabular);
letter-spacing: -0.02em;
}
.pv__money--hero {
font-size: 2rem;
line-height: 1.1;
}
.pv__delta {
margin: var(--sp-4) 0 0;
font-size: var(--fs-meta);
color: var(--positive);
}
.pv__up {
margin-right: 2px;
}
.pv__asof {
display: block;
margin: 2px 0 0;
font-size: var(--fs-12);
color: var(--stage-ink-3);
}
.pv__alloc {
display: flex;
flex-direction: column;
gap: var(--sp-12);
}
.pv__alloc-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 2px var(--sp-12);
align-items: center;
}
.pv__alloc-top {
display: flex;
justify-content: space-between;
gap: var(--sp-12);
grid-column: 1 / -1;
}
.pv__alloc-name {
color: var(--stage-ink);
}
.pv__alloc-amt {
color: var(--stage-ink-2);
font-variant-numeric: tabular-nums;
}
.pv__bar {
height: 6px;
border-radius: var(--r-marker);
background: var(--stage-track);
overflow: hidden;
}
.pv__bar-fill {
display: block;
height: 100%;
width: var(--pct);
border-radius: inherit;
background: var(--brand-600);
transform-origin: left center;
animation: pv-draw var(--dur-chart-reveal) var(--ease-decel) none;
animation-delay: calc(var(--i) * 60ms);
}
.pv__bar-fill--iris {
background: var(--iris);
}
.pv__bar-fill--brand-300 {
background: var(--brand-300);
}
.pv__bar-fill--line {
background: var(--stage-ink-3);
}
.pv__alloc-pct {
color: var(--stage-ink-2);
font-size: var(--fs-12);
}
@keyframes pv-draw {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
.pv__trace {
display: flex;
align-items: center;
gap: var(--sp-8);
}
.pv__trace-step {
display: flex;
align-items: center;
gap: var(--sp-8);
font-size: var(--fs-12);
color: var(--stage-ink-3);
animation: pv-trace var(--dur-emphasized) var(--ease-decel) none;
animation-delay: calc(var(--i) * 90ms);
}
.pv__trace-step + .pv__trace-step::before {
content: "";
width: 26px;
height: 1px;
background: var(--stage-bezel);
}
.pv__trace-dot {
width: 6px;
height: 6px;
border-radius: var(--r-full);
background: var(--stage-ink-3);
}
.pv__trace-step.is-active {
color: var(--stage-ink);
}
.pv__trace-step.is-active .pv__trace-dot {
width: 9px;
height: 9px;
background: var(--iris);
}
@keyframes pv-trace {
from { opacity: 0; }
to { opacity: 1; }
}
.pv__verdict {
display: flex;
align-items: center;
gap: var(--sp-12);
padding: var(--sp-12);
border-radius: var(--r-12);
background: var(--stage-raised);
}
.pv__status {
display: grid;
place-items: center;
width: 26px;
height: 26px;
flex: none;
border-radius: var(--r-full);
background: var(--positive);
color: var(--on-brand);
font-size: var(--fs-14);
}
.pv__verdict strong {
display: block;
color: var(--stage-ink);
}
.pv__findings {
display: flex;
flex-direction: column;
gap: var(--sp-8);
}
.pv__finding {
display: flex;
flex-direction: column;
gap: 2px;
padding: var(--sp-12);
border-radius: var(--r-12);
background: var(--stage-raised);
border-left: 2px solid var(--stage-ink-3);
animation: pv-trace var(--dur-standard) var(--ease-standard) none;
animation-delay: calc(var(--i) * 60ms + 120ms);
}
.pv__finding--warning {
border-left-color: var(--warning);
}
.pv__finding--positive {
border-left-color: var(--positive);
}
.pv__finding-title {
color: var(--stage-ink);
font-weight: 600;
}
.pv__finding-detail {
color: var(--stage-ink-2);
font-size: var(--fs-12);
}
.pv__search {
display: flex;
align-items: center;
gap: var(--sp-8);
padding: var(--sp-12) var(--sp-16);
border-radius: var(--r-12);
background: var(--stage-raised);
color: var(--stage-ink);
}
.pv__search-icon {
color: var(--stage-ink-3);
}
.pv__results {
display: flex;
flex-direction: column;
}
.pv__result {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--sp-12);
padding-block: var(--sp-12);
border-bottom: 1px solid var(--stage-bezel);
animation: pv-trace var(--dur-standard) var(--ease-standard) none;
animation-delay: calc(var(--i) * 60ms);
}
.pv__result-name {
display: block;
color: var(--stage-ink);
font-weight: 600;
}
.pv__result-meta {
display: block;
color: var(--stage-ink-3);
font-size: var(--fs-12);
}
.pv__result-val {
color: var(--stage-ink-2);
white-space: nowrap;
}
.pv__chip {
margin-left: var(--sp-8);
padding: 1px 7px;
border-radius: var(--r-full);
background: var(--chip);
color: var(--brand-300);
font-size: var(--fs-12);
font-weight: 600;
}
.pv__note {
margin: 0;
color: var(--stage-ink-3);
font-size: var(--fs-12);
}
@media (prefers-reduced-motion: reduce) {
.pv__bar-fill,
.pv__trace-step,
.pv__finding,
.pv__result {
animation: none;
}
}
.feat-canvas .device2,
.jobs__media .device2 {
width: 100%;
max-width: 26rem;
margin-inline: auto;
}
.stateregion {
display: flex;
align-items: baseline;
gap: var(--sp-8);
min-height: 24px;
padding-block: var(--sp-4);
}
.stateregion__msg {
margin: 0;
font-size: var(--fs-meta);
line-height: var(--lh-meta);
color: var(--oa-ink-2);
}
.stateregion__dot {
flex: none;
width: 7px;
height: 7px;
margin-top: 6px;
border-radius: var(--r-full);
background: var(--oa-ink-3);
}
.stateregion[data-state-current="loading"] .stateregion__dot { background: var(--oa-cobalt); }
.stateregion[data-state-current="success"] .stateregion__dot { background: var(--oa-positive); }
.stateregion[data-state-current="empty"]   .stateregion__dot { background: var(--oa-ink-3); }
.stateregion[data-state-current="error"]   .stateregion__dot { background: var(--oa-negative); }
.stateregion[data-state-current="error"] .stateregion__msg {
color: var(--negative-text);
font-weight: 560;
}
.field__err {
margin: var(--sp-4) 0 0;
font-size: var(--fs-meta);
line-height: var(--lh-meta);
color: var(--negative-text);
font-weight: 560;
}
.input[aria-invalid="true"] {
border-color: var(--negative-text);
}
.oa-consent {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 60;
width: min(360px, calc(100vw - 40px));
padding: 18px;
background: var(--oa-surface-2, #151C2B);
border: 1px solid var(--oa-line-2, rgba(198,210,238,.22));
border-radius: var(--oa-r-surface, 16px);
box-shadow: 0 1px 1px rgba(0,0,0,.34), 0 16px 38px rgba(0,0,0,.24);
opacity: 0;
transform: translateY(12px);
transition: opacity 180ms cubic-bezier(.22,1,.36,1), transform 180ms cubic-bezier(.22,1,.36,1);
}
.oa-consent.is-in { opacity: 1; transform: none; }
.oa-consent__body {
margin: 0 0 14px;
font-size: 14px;
line-height: 1.5;
color: var(--oa-ink-1, #CBD2E0);
}
.oa-consent__actions { display: flex; gap: 10px; align-items: center; }
.oa-consent__allow,
.oa-consent__deny {
min-height: 44px;
padding: 0 18px;
border-radius: var(--oa-r-control, 12px);
font: 600 14px/1 Manrope, system-ui, sans-serif;
cursor: pointer;
}
.oa-consent__allow {
background: var(--oa-cobalt, #315CF6);
border: 1px solid var(--oa-cobalt, #315CF6);
color: #fff;
}
.oa-consent__allow:hover { background: var(--oa-cobalt-hover, #426BFF); }
.oa-consent__deny {
background: transparent;
border: 1px solid var(--oa-line-2, rgba(198,210,238,.22));
color: var(--oa-ink-1, #CBD2E0);
}
.oa-consent__deny:hover { border-color: var(--oa-line-2, rgba(198,210,238,.4)); }
.oa-consent__link {
display: inline-block;
margin-top: 12px;
font-size: 13px;
color: var(--oa-accent-text, #A7B5FF);
}
.oa-consent__allow:focus-visible,
.oa-consent__deny:focus-visible,
.oa-consent__link:focus-visible {
outline: 3px solid var(--oa-accent-text, #A7B5FF);
outline-offset: 2px;
}
@media (max-width: 520px) {
.oa-consent { right: 12px; left: 12px; bottom: 12px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
.oa-consent { transition: opacity 120ms linear; transform: none; }
}
/* ── icons.css ── */
.oi {
display: inline-block;
flex: none;
width: var(--oi-size, 20px);
height: var(--oi-size, 20px);
vertical-align: -0.15em;
}
.oi--inline   { --oi-size: 18px; }
.oi--control  { --oi-size: 20px; }
.oi--nav      { --oi-size: 24px; }
.oi--feature  { --oi-size: 32px; }
/* ── motion.css ── */
@keyframes rise {
from {
opacity: 0;
transform: translate3d(0, 18px, 0);
}
to {
opacity: 1;
transform: none;
}
}
.rise {
animation: rise var(--dur-hero) var(--ease-decel) none;
animation-delay: calc(var(--i, 0) * 70ms);
}
.js-on .reveal.will-reveal {
opacity: 0;
transform: translate3d(0, 20px, 0);
transition: opacity var(--dur-hero) var(--ease-decel),
transform var(--dur-hero) var(--ease-decel);
transition-delay: calc(var(--i, 0) * 60ms);
will-change: opacity, transform;
}
.js-on .reveal.is-visible,
.js-on .reveal.will-reveal.is-visible {
opacity: 1;
transform: none;
}
.ring__seg {
stroke-dasharray: var(--dash);
stroke-dashoffset: calc(var(--dash) * var(--draw, 1));
transition: stroke-dashoffset var(--dur-hero) var(--ease-decel);
transition-delay: calc(var(--i, 0) * 90ms);
}
.ring.is-visible .ring__seg {
--draw: 0;
}
.tray {
transform-origin: bottom center;
transition: transform var(--dur-emphasized) var(--ease-decel),
opacity var(--dur-emphasized) var(--ease-decel),
border-radius var(--dur-emphasized) var(--ease-decel);
}
.tray[data-state="collapsed"] {
transform: translate3d(0, 8px, 0) scale(0.97);
opacity: 0.9;
border-radius: var(--r-full);
}
.tray[data-state="expanded"] {
transform: none;
opacity: 1;
border-radius: var(--r-16);
}
.ticker {
font-variant-numeric: tabular-nums;
font-feature-settings: var(--fv-tabular);
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
.js-on .reveal,
.js-on .reveal.will-reveal,
.reveal,
.rise {
opacity: 1 !important;
transform: none !important;
}
.ring__seg {
--draw: 0;
}
.tray[data-state="collapsed"] {
transform: none;
opacity: 1;
}
}
/* ── home.css ── */
.home-hero .oa-grid { align-items: center; row-gap: var(--sp-48); }
.home-hero__copy { align-self: center; }
.home-hero__facts {
margin: var(--sp-24) 0 0;
font-size: var(--fs-meta);
line-height: var(--lh-meta);
color: var(--oa-ink-2);
max-width: none;
}
.home-hero__stage { display: flex; flex-direction: column; gap: var(--sp-12); }
.home-canvas {
width: 100%;
min-height: 500px;
display: flex;
flex-direction: column;
padding: var(--sp-16);
gap: var(--sp-12);
}
.home-hero__example {
margin: 0;
font-size: var(--fs-meta);
color: var(--oa-ink-3);
max-width: none;
}
@media (max-width: 1100px) {
.home-canvas { min-height: 420px; }
}
@media (max-width: 560px) {
.home-canvas { min-height: 380px; padding: var(--sp-12); }
}
.home-canvas .overflow--tabs { flex: none; }
.canvas2__tabs {
display: flex;
gap: var(--sp-4);
padding: 4px;
background: var(--stage-track);
border-radius: var(--r-full);
width: max-content;
max-width: 100%;
}
.canvas2__tab {
min-height: 44px;
padding-inline: var(--sp-16);
border: 0;
border-radius: var(--r-full);
background: transparent;
color: var(--stage-ink-2);
font: inherit;
font-size: var(--fs-14);
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: color var(--oa-ui) var(--ease-out), background-color var(--oa-ui) var(--ease-out);
}
.canvas2__tab:hover { color: var(--stage-ink); }
.canvas2__tab:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.canvas2__tab.is-active { background: var(--oa-cobalt); color: #fff; }
.home-canvas .device2 { flex: 1; display: flex; flex-direction: column; }
.home-canvas .device2__screen { flex: 1; }
.home-canvas .overflow__btn {
background: var(--stage-raised);
border-color: var(--stage-bezel);
color: var(--stage-ink-2);
}
.home-canvas .overflow__btn:hover { color: var(--stage-ink); border-color: var(--oa-cobalt); }
.home-chapter__head {
max-width: 780px;
margin-bottom: var(--sp-48);
}
.home-chapter__head .oa-h2 + .oa-lead { margin-top: var(--sp-24); }
.home-stage {
padding: var(--sp-32) 0 0;
}
.home-after {
display: flex;
flex-wrap: wrap;
gap: var(--sp-32);
margin-top: var(--sp-32);
padding-top: var(--sp-24);
border-top: 1px solid var(--oa-line-1);
}
.link-arrow {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--brand-text);
font-size: var(--fs-14);
font-weight: 620;
text-decoration: none;
}
.link-arrow:hover { color: var(--oa-ink-0); }
.link-arrow:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.datalives { display: flex; flex-direction: column; }
.datalives__row {
display: grid;
grid-template-columns: 20px 96px minmax(0, 1fr);
grid-template-areas: "icon mode what" ". detail detail" ". link link";
column-gap: var(--sp-16);
row-gap: var(--sp-4);
padding-block: var(--sp-24);
border-top: 1px solid var(--oa-line-1);
}
.datalives__row:last-child { border-bottom: 1px solid var(--oa-line-1); }
.datalives__icon {
grid-area: icon;
display: block;
color: var(--oa-ink-2);
margin-top: 2px;
}
.datalives__icon svg { width: 20px; height: 20px; }
.datalives__mode {
grid-area: mode;
font-family: var(--ff-display);
font-size: var(--fs-16);
font-weight: 650;
color: var(--oa-ink-0);
}
.datalives__what { grid-area: what; color: var(--oa-ink-1); font-size: var(--fs-16); }
.datalives__detail { grid-area: detail; color: var(--oa-ink-2); font-size: var(--fs-14); line-height: var(--lh-body); }
.datalives__link {
grid-area: link;
justify-self: start;
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--brand-text);
font-size: var(--fs-14);
font-weight: 620;
text-decoration: none;
}
.datalives__link:hover { color: var(--oa-ink-0); }
@media (max-width: 560px) {
.datalives__row {
grid-template-columns: 20px minmax(0, 1fr);
grid-template-areas: "icon mode" ". what" ". detail" ". link";
}
}
.pricing {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
gap: var(--sp-24);
align-items: stretch;
}
.pricing__surface {
display: flex;
flex-direction: column;
gap: var(--sp-16);
padding: var(--sp-32);
border-radius: var(--oa-r-surface);
border: 1px solid var(--oa-line-1);
background: var(--oa-surface-1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), var(--oa-shadow-1);
}
.pricing__surface--premium {
background: var(--oa-surface-2);
border-color: var(--oa-line-2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), var(--oa-shadow-2);
}
.pricing__price { margin: 0; display: flex; align-items: baseline; gap: 2px; }
.pricing__cur { font-size: var(--fs-24); font-weight: 600; color: var(--oa-ink-2); }
.pricing__val {
font-family: var(--ff-display);
font-size: 52px;
line-height: 1;
font-weight: 700;
letter-spacing: -0.035em;
color: var(--oa-ink-0);
}
.pricing__note { margin: 0; color: var(--oa-ink-2); font-size: var(--fs-14); }
.pricing__ctl { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.pricing__opt {
display: inline-flex;
align-items: baseline;
gap: 1px;
min-height: 48px;
padding-inline: var(--sp-16);
border: 1px solid var(--oa-line-2);
border-radius: var(--oa-r-control);
background: transparent;
color: var(--oa-ink-2);
font: inherit;
cursor: pointer;
transition: color var(--oa-ui) var(--ease-out), border-color var(--oa-ui) var(--ease-out),
background-color var(--oa-ui) var(--ease-out);
}
.pricing__opt:hover { color: var(--oa-ink-0); }
.pricing__opt:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pricing__opt.is-active { border-color: var(--oa-cobalt); background: var(--chip); color: var(--oa-ink-0); }
.pricing__opt-cur { font-size: var(--fs-14); font-weight: 600; }
.pricing__opt-val {
font-family: var(--ff-display);
font-size: var(--fs-24);
font-weight: 700;
letter-spacing: -0.03em;
}
.pricing__opt-per { font-size: var(--fs-meta); color: var(--oa-ink-3); }
.pricing__allows { min-height: 24px; }
.pricing__allow { margin: 0; color: var(--oa-ink-1); font-size: var(--fs-14); font-weight: 600; }
.pricing__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.pricing__list li {
position: relative;
margin: 0;
padding: var(--sp-12) 0 var(--sp-12) var(--sp-24);
border-top: 1px solid var(--oa-line-0);
color: var(--oa-ink-1);
font-size: var(--fs-14);
line-height: var(--lh-body);
}
.pricing__list li::before {
content: "";
position: absolute;
left: 2px;
top: 21px;
width: 8px;
height: 8px;
border-radius: 2px;
background: var(--oa-cobalt);
opacity: 0.7;
}
.pricing__surface .btn { align-self: flex-start; margin-top: var(--sp-8); }
.pricing__byok {
margin: var(--sp-32) 0 0;
color: var(--oa-ink-2);
font-size: var(--fs-14);
max-width: 72ch;
}
.pricing__byok a { color: var(--brand-text); text-decoration: none; font-weight: 620; }
.pricing__byok a:hover { color: var(--oa-ink-0); }
@media (max-width: 900px) {
.pricing { grid-template-columns: minmax(0, 1fr); gap: var(--sp-16); }
.pricing__surface { padding: var(--sp-24); }
}
.learnband__head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--sp-16);
margin-bottom: var(--sp-48);
}
.learnband {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: var(--sp-48);
padding-bottom: var(--sp-32);
border-bottom: 1px solid var(--paper-line);
}
.learnband__lead {
display: flex;
flex-direction: column;
gap: var(--sp-8);
text-decoration: none;
}
.learnband__lead .learnband__title {
font-family: var(--ff-display);
font-size: var(--fs-h3);
line-height: var(--lh-h3);
font-weight: var(--fw-h3);
letter-spacing: var(--ls-h3);
}
.learnband__art {
width: 100%;
height: auto;
margin-top: var(--sp-16);
background: var(--oa-surface-2);
border: 1px solid var(--paper-line);
border-radius: var(--oa-r-control);
}
.learnband__art-line { stroke: var(--oa-cobalt); stroke-width: 2.4; stroke-linecap: round; }
.learnband__art-flows rect { fill: var(--oa-iris); opacity: 0.55; }
.learnband__lead .oa-lh { max-width: 540px; }
.learnband__secs { display: flex; flex-direction: column; }
.learnband__sec {
display: flex;
flex-direction: column;
gap: var(--sp-4);
padding: var(--sp-24) 0;
border-top: 1px solid var(--paper-line);
text-decoration: none;
}
.learnband__secs > :first-child { border-top: 0; padding-top: 0; }
.learnband__title { color: var(--paper-ink); font-size: var(--fs-20); font-weight: 640; letter-spacing: -0.02em; }
.learnband__desc { color: var(--paper-muted); font-size: var(--fs-14); line-height: var(--lh-body); max-width: 52ch; }
.learnband__meta {
order: -1;
color: var(--paper-muted);
font-size: var(--fs-meta);
font-weight: 600;
letter-spacing: 0.02em;
}
.learnband__lead:hover .learnband__title,
.learnband__sec:hover .learnband__title,
.learnband__row:hover .learnband__title { color: var(--brand-text); }
.learnband__rows {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
}
.learnband__row {
display: flex;
flex-direction: column;
gap: var(--sp-4);
padding: var(--sp-24) var(--sp-24) var(--sp-24) 0;
text-decoration: none;
}
.learnband__row + .learnband__row {
border-left: 1px solid var(--paper-line);
padding-left: var(--sp-24);
}
.learnband__row .learnband__title { font-size: var(--fs-16); }
@media (max-width: 900px) {
.learnband { grid-template-columns: minmax(0, 1fr); gap: var(--sp-32); }
.learnband__rows { grid-template-columns: minmax(0, 1fr); }
.learnband__row { padding: var(--sp-16) 0; border-top: 1px solid var(--paper-line); }
.learnband__row + .learnband__row { border-left: 0; padding-left: 0; }
}
.section-action {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--brand-text);
font-size: var(--fs-14);
font-weight: 620;
text-decoration: none;
}
.section-action:hover { color: var(--oa-ink-0); }
.section-action::after { content: " →"; }
.finalcta { position: relative; }
.finalcta__trace {
position: absolute;
inset: auto 0 0 0;
width: 100%;
height: 220px;
z-index: 0;
pointer-events: none;
}
.finalcta__trace path { stroke: var(--oa-cobalt); stroke-width: 1.5; opacity: 0.16; }
.finalcta__trace path:last-child { stroke: var(--oa-iris); opacity: 0.12; }
.finalcta__inner { position: relative; z-index: 1; max-width: 640px; }
.finalcta__inner .oa-h2 { color: var(--oa-ink-0); }
.finalcta__note {
margin: var(--sp-16) 0 0;
color: var(--oa-ink-3);
font-size: var(--fs-meta);
max-width: none;
}
@media (max-width: 720px) {
.home-chapter__head { margin-bottom: var(--sp-24); }
.home-stage { padding-top: 0; }
.home-after { margin-top: var(--sp-24); }
.home-hero .oa-grid { row-gap: var(--sp-32); }
.learnband__head { margin-bottom: var(--sp-24); }
.pricing__byok { margin-top: var(--sp-24); }
}
.pricing__free-note {
margin: auto 0 0;
color: var(--oa-ink-2);
font-size: var(--fs-14);
line-height: var(--lh-body);
padding-top: var(--sp-16);
border-top: 1px solid var(--oa-line-0);
}
.feat-close__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-8); }
.feat-close__copy .oa-body { margin-bottom: var(--sp-4); }
/* ── feature.css ── */
.feat-top {
padding-top: var(--sp-24);
background: var(--oa-band-hero);
}
.doc__breadcrumb {
margin: 0 0 var(--sp-12);
font-size: var(--fs-meta);
color: var(--oa-ink-3);
max-width: none;
}
.doc__breadcrumb a { color: var(--oa-ink-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.doc__breadcrumb a:hover { color: var(--oa-ink-0); }
.feat-hero-sec .oa-grid { align-items: start; row-gap: var(--sp-48); }
.feat-hero__copy .oa-h1 { margin-top: var(--sp-4); }
.feat-hero__stage { min-width: 0; }
.feat-proof {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--sp-32);
border-top: 1px solid var(--oa-line-1);
border-bottom: 1px solid var(--oa-line-1);
padding-block: var(--sp-32);
}
.feat-proof__item { display: flex; flex-direction: column; gap: var(--sp-4); }
.feat-proof__item strong {
font-family: var(--ff-display);
font-size: var(--fs-16);
font-weight: 640;
letter-spacing: -0.015em;
color: var(--oa-ink-0);
}
.feat-proof__item p {
margin: 0;
color: var(--oa-ink-2);
font-size: var(--fs-14);
line-height: var(--lh-body);
max-width: 44ch;
}
@media (max-width: 820px) {
.feat-proof { grid-template-columns: minmax(0, 1fr); gap: var(--sp-24); }
}
.feat-story__head { max-width: 760px; margin-bottom: var(--sp-32); }
.feat-story__head .oa-h2 + .oa-lead { margin-top: var(--sp-24); }
.feat-story__surface { max-width: var(--tool-max); }
.feat-detail__grid {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: var(--sp-48);
align-items: start;
}
@media (max-width: 1100px) {
.feat-detail__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-24); }
}
.feat-prose { max-width: var(--measure); }
.feat-prose h2 {
margin: var(--sp-32) 0 var(--sp-12);
font-family: var(--ff-display);
font-size: var(--fs-h3);
line-height: var(--lh-h3);
font-weight: var(--fw-h3);
letter-spacing: var(--ls-h3);
color: var(--oa-ink-0);
}
.feat-prose h2:first-child { margin-top: 0; }
.feat-prose p { color: var(--oa-ink-1); }
.feat-prose ul { margin: 0 0 var(--sp-16); padding-left: var(--sp-24); color: var(--oa-ink-1); }
.feat-prose li { margin-bottom: var(--sp-8); }
.feat-faq { max-width: var(--measure); }
.feat-faq details { border-bottom: 1px solid var(--oa-line-1); }
.feat-faq details:first-child { border-top: 1px solid var(--oa-line-1); }
.feat-faq summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-16);
min-height: 60px;
cursor: pointer;
font-weight: 640;
color: var(--oa-ink-0);
list-style: none;
}
.feat-faq summary::-webkit-details-marker { display: none; }
.feat-faq summary::after { content: "+"; color: var(--oa-ink-3); font-weight: 400; font-size: var(--fs-20); }
.feat-faq details[open] summary::after { content: "\2013"; }
.feat-faq summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.feat-faq details p {
margin: 0 0 var(--sp-16);
color: var(--oa-ink-2);
font-size: var(--fs-14);
line-height: var(--lh-body);
}
.feat-faq details[open] > p { animation: none; }
.feat-close .oa-grid { align-items: start; row-gap: var(--sp-48); }
.feat-close__next { display: flex; flex-direction: column; }
.feat-next {
display: flex;
flex-direction: column;
gap: 2px;
min-height: 72px;
justify-content: center;
padding: var(--sp-16) 0 var(--sp-16) var(--sp-16);
border-top: 1px solid var(--oa-line-1);
border-left: 2px solid transparent;
text-decoration: none;
transition: border-color var(--oa-ui) var(--ease-out), background-color var(--oa-ui) var(--ease-out);
}
.feat-close__next > :last-child { border-bottom: 1px solid var(--oa-line-1); }
.feat-next:hover,
.feat-next:focus-visible { border-left-color: var(--oa-cobalt); background: var(--chip); }
.feat-next__name {
font-family: var(--ff-display);
font-size: var(--fs-20);
font-weight: 640;
letter-spacing: -0.02em;
color: var(--oa-ink-0);
}
.feat-next__why { color: var(--oa-ink-2); font-size: var(--fs-14); }
.feat-close__cta { display: flex; flex-direction: column; gap: var(--sp-12); }
.feat-close__cta .oa-h3 { margin: 0; }
.feat-close__note { margin: 0; color: var(--oa-ink-3); font-size: var(--fs-meta); max-width: none; }
.hub-rows { display: flex; flex-direction: column; }
.hub-row {
display: flex;
flex-direction: column;
gap: var(--sp-4);
padding: var(--sp-20, var(--sp-16)) 0 var(--sp-16) var(--sp-16);
border-top: 1px solid var(--oa-line-1);
border-left: 2px solid transparent;
text-decoration: none;
transition: border-color var(--oa-ui) var(--ease-out), background-color var(--oa-ui) var(--ease-out);
}
.hub-rows > :last-child { border-bottom: 1px solid var(--oa-line-1); }
a.hub-row:hover,
a.hub-row:focus-visible { border-left-color: var(--oa-cobalt); background: var(--chip); }
.hub-row--static { border-left-color: var(--oa-line-2); }
.hub-row__name {
font-family: var(--ff-display);
font-size: var(--fs-16);
font-weight: 640;
letter-spacing: -0.015em;
color: var(--oa-ink-0);
}
.hub-row__desc { color: var(--oa-ink-2); font-size: var(--fs-14); line-height: var(--lh-body); max-width: 56ch; }
.doc-with-toc {
display: grid;
grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
gap: var(--sp-48);
align-items: start;
}
.doc-toc { position: sticky; top: calc(var(--nav-h) + var(--sp-24)); }
.doc-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.doc-toc li { margin: 0; }
.doc-toc a {
display: block;
padding: var(--sp-8) 0 var(--sp-8) var(--sp-12);
border-left: 2px solid var(--oa-line-1);
color: var(--oa-ink-2);
font-size: var(--fs-14);
text-decoration: none;
}
.doc-toc a:hover { color: var(--oa-ink-0); border-left-color: var(--oa-cobalt); }
.doc-body { width: 100%; max-width: var(--measure); min-width: 0; }
.doc-sec + .doc-sec { margin-top: var(--sp-48); }
.doc-sec h2 {
margin: 0 0 var(--sp-12);
font-family: var(--ff-display);
font-size: var(--fs-h3);
line-height: var(--lh-h3);
font-weight: var(--fw-h3);
letter-spacing: var(--ls-h3);
color: var(--oa-ink-0);
scroll-margin-top: calc(var(--nav-h) + var(--sp-24));
}
.doc-sec p { color: var(--oa-ink-1); }
@media (max-width: 1100px) {
.doc-with-toc { grid-template-columns: minmax(0, 1fr); gap: var(--sp-24); }
.doc-toc { position: static; }
.doc-toc ul { flex-direction: row; flex-wrap: wrap; gap: var(--sp-8); }
.doc-toc a { border-left: 0; border-bottom: 2px solid var(--oa-line-1); padding: var(--sp-8) var(--sp-4); }
}
.principles { display: flex; flex-direction: column; }
.principle {
display: grid;
grid-template-columns: 72px minmax(0, 1fr);
gap: var(--sp-24);
padding-block: var(--sp-48);
border-top: 1px solid var(--oa-line-1);
}
.principles > :first-child { border-top: 0; padding-top: 0; }
.principle__n {
font-family: var(--ff-display);
font-size: 56px;
line-height: 0.9;
font-weight: 700;
letter-spacing: -0.04em;
color: var(--oa-line-2);
}
.principle__body { max-width: var(--measure); }
.principle__claim {
margin: var(--sp-12) 0 var(--sp-24);
color: var(--oa-ink-1);
font-size: var(--fs-body-l);
line-height: var(--lh-lead);
max-width: 52ch;
}
@media (max-width: 720px) {
.principle { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); padding-block: var(--sp-32); }
.principle__n { font-size: 36px; }
}
.resp { display: flex; flex-direction: column; }
.resp-row {
display: grid;
grid-template-columns: 120px minmax(0, 1fr) auto;
grid-template-areas: "area who cta" "area what cta";
column-gap: var(--sp-24);
row-gap: var(--sp-4);
padding-block: var(--sp-24);
border-top: 1px solid var(--oa-line-1);
border-left: 2px solid transparent;
padding-left: var(--sp-16);
text-decoration: none;
transition: border-color var(--oa-ui) var(--ease-out), background-color var(--oa-ui) var(--ease-out);
}
.resp > :last-child { border-bottom: 1px solid var(--oa-line-1); }
.resp-row:hover,
.resp-row:focus-visible { border-left-color: var(--oa-cobalt); background: var(--chip); }
.resp-row .oa-label { grid-area: area; margin: 0; align-self: start; }
.resp-row__who { grid-area: who; color: var(--oa-ink-0); font-weight: 640; font-size: var(--fs-16); }
.resp-row__what { grid-area: what; color: var(--oa-ink-2); font-size: var(--fs-14); line-height: var(--lh-body); max-width: 56ch; }
.resp-row__cta { grid-area: cta; align-self: center; color: var(--brand-text); font-size: var(--fs-14); font-weight: 620; white-space: nowrap; }
@media (max-width: 820px) {
.resp-row {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "area" "who" "what" "cta";
}
.resp-row__cta { justify-self: start; }
}
.learn-lede { max-width: 760px; }
.learn-lede .oa-h1 { margin-top: var(--sp-4); }
.learn-foot { display: flex; flex-direction: column; gap: var(--sp-12); }
.learn-foot__rail { display: flex; flex-wrap: wrap; gap: var(--sp-24); }
.learn-foot__rail a {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--brand-text);
font-size: var(--fs-14);
font-weight: 620;
text-decoration: none;
}
.learn-foot__rail a:hover { color: var(--paper-ink); }
.oa-chapter.feat-proofband { padding-block: var(--sp-48); }
@media (max-width: 720px) {
.oa-chapter.feat-proofband { padding-block: var(--sp-32); }
.feat-story__head { margin-bottom: var(--sp-24); }
.feat-close .oa-grid { row-gap: var(--sp-24); }
.principle { padding-block: var(--sp-24); }
.principle__claim { margin: var(--sp-8) 0 var(--sp-16); }
.doc-sec + .doc-sec { margin-top: var(--sp-32); }
}
@media (min-width: 1101px) {
.feat-detail__grid > .oa-h2 {
position: sticky;
top: calc(var(--nav-h) + var(--sp-32));
}
}
.toolhero .oa-wrap { display: flex; flex-direction: column; gap: var(--sp-32); }
.toolhero__intro {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
align-items: end;
column-gap: var(--sp-48);
row-gap: var(--sp-24);
}
.toolhero__copy .oa-h1 { margin: 0; max-width: 16ch; }
.toolhero__cta {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--sp-24);
padding-bottom: var(--sp-4);
}
.toolhero__cta .oa-lead { margin: 0; max-width: 46ch; }
.toolhero--top .toolhero__intro { align-items: start; }
.toolhero__stage { min-width: 0; }
.toolhero__stage .oa-fig { margin: 0; }
@media (max-width: 900px) {
.toolhero__intro { grid-template-columns: minmax(0, 1fr); align-items: start; }
.toolhero__cta { padding-bottom: 0; }
.toolhero .oa-wrap { gap: var(--sp-24); }
}
/* ── learn.css ── */
.learn-hub {
max-width: 1000px;
margin-inline: auto;
padding-block: var(--sp-48) var(--sp-96);
}
.learn-hub__lede {
color: var(--ink-2);
max-width: 60ch;
margin-bottom: var(--sp-32);
}
.learn-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--sp-16);
}
.learn-card {
display: flex;
flex-direction: column;
gap: var(--sp-8);
border: 1px solid var(--line);
border-radius: var(--r-18);
background: var(--surface);
padding: var(--sp-24);
text-decoration: none;
color: inherit;
transition: border-color var(--dur-fast, 120ms) ease, transform var(--dur-fast, 120ms) ease;
}
@media (prefers-reduced-motion: no-preference) {
.learn-card:hover {
border-color: var(--brand-text);
transform: translateY(-2px);
}
}
.learn-card__eyebrow {
font-size: var(--fs-12);
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--brand-text);
font-weight: 650;
}
.learn-card__title {
font-size: var(--fs-20);
color: var(--ink);
}
.learn-card__desc {
color: var(--ink-2);
font-size: var(--fs-14);
margin: 0;
}
.doc__breadcrumb {
font-size: var(--fs-14);
color: var(--faint);
margin-bottom: var(--sp-16);
}
.doc__breadcrumb a {
color: var(--brand-text);
}
.doc__lede {
font-size: var(--fs-20);
color: var(--ink-2);
margin-bottom: var(--sp-32);
}
.faq {
margin-block: var(--sp-24);
}
.faq details {
border-bottom: 1px solid var(--line);
padding-block: var(--sp-16);
}
.faq summary {
cursor: pointer;
font-weight: 650;
color: var(--ink);
font-size: var(--fs-16);
}
.faq details p {
margin-top: var(--sp-12);
margin-bottom: 0;
}
.doc__cta {
margin-block: var(--sp-48) var(--sp-24);
padding: var(--sp-24);
border: 1px solid var(--line);
border-radius: var(--r-18);
background: var(--surface);
}
.doc__cta p {
margin-top: 0;
}
.learn-card {
transition: transform 180ms var(--ease-standard), border-color 180ms var(--ease-standard),
box-shadow 180ms var(--ease-standard);
}
.learn-card:hover {
transform: translateY(-2px);
border-color: var(--brand-400);
box-shadow: var(--shadow-md);
}
.learn-card__meta {
margin-top: var(--sp-8);
font-size: var(--fs-meta);
color: var(--faint);
font-variant-numeric: tabular-nums;
}
.learn-card--lead {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: var(--sp-24);
align-items: center;
}
.learn-card--lead .learn-card__title {
font-size: var(--fs-h3);
}
@media (max-width: 720px) {
.learn-card--lead {
grid-template-columns: 1fr;
}
}
.article {
padding-block: var(--sp-32) var(--sp-96);
}
.article__grid {
display: grid;
gap: var(--sp-48);
align-items: start;
margin-top: var(--sp-24);
}
@media (min-width: 1000px) {
.article__grid {
grid-template-columns: 220px minmax(0, 1fr);
}
}
.article__body {
max-width: 720px;
min-width: 0;
}
.article__toc {
display: none;
}
@media (min-width: 1000px) {
.article__toc {
display: block;
position: sticky;
top: var(--sp-64);
align-self: start;
}
}
.article__toc-label {
font-size: var(--fs-12);
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--faint);
margin-bottom: var(--sp-12);
}
.article__toc ul {
list-style: none;
margin: 0;
padding: 0;
border-left: 1px solid var(--line);
}
.article__toc li {
margin: 0;
}
.article__toc a {
display: block;
padding: var(--sp-8) var(--sp-16);
margin-left: -1px;
border-left: 2px solid transparent;
color: var(--ink-2);
font-size: var(--fs-14);
text-decoration: none;
}
.article__toc a:hover {
color: var(--brand-text);
border-left-color: var(--brand-400);
}
.article__eyebrow {
font-size: var(--fs-12);
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--brand-text);
font-weight: 650;
margin-bottom: var(--sp-8);
}
.article__body h1 {
font-size: var(--fs-h1);
line-height: 1.08;
margin-bottom: var(--sp-12);
}
.article__answer {
font-size: var(--fs-20);
color: var(--ink-2);
margin-bottom: var(--sp-8);
}
.article__meta {
color: var(--faint);
font-size: var(--fs-meta);
font-variant-numeric: tabular-nums;
margin-bottom: var(--sp-24);
}
.article__body h2 {
font-size: var(--fs-20);
margin-block: var(--sp-48) var(--sp-12);
padding-top: var(--sp-24);
border-top: 1px solid var(--line);
scroll-margin-top: var(--sp-64);
}
.article__body p,
.article__body li {
color: var(--ink-2);
}
.article__body a:not(.btn) {
color: var(--brand-text);
}
.article__body code {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 0.9em;
background: var(--surface-2, var(--chip));
padding: 0.1em 0.35em;
border-radius: var(--r-8, 6px);
}
.article__body table {
width: 100%;
border-collapse: collapse;
margin-block: var(--sp-16);
font-size: var(--fs-14);
}
.article__body th,
.article__body td {
text-align: left;
padding: var(--sp-8) var(--sp-12);
border-bottom: 1px solid var(--line);
}
.article__body th {
color: var(--ink);
font-weight: 650;
}
.keybox {
border: 1px solid var(--line);
border-left: 3px solid var(--brand-600);
border-radius: var(--r-12);
background: var(--surface);
padding: var(--sp-16) var(--sp-24);
margin-block: var(--sp-24);
}
.keybox__label {
font-size: var(--fs-12);
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--brand-text);
font-weight: 650;
margin-bottom: var(--sp-4);
}
.keybox p:last-child {
margin-bottom: 0;
color: var(--ink);
}
.example {
border: 1px solid var(--line);
border-radius: var(--r-12);
background: var(--surface-2, var(--chip));
padding: var(--sp-8) var(--sp-24) var(--sp-16);
margin-block: var(--sp-32);
}
.example h2 {
border-top: 0 !important;
padding-top: var(--sp-16) !important;
margin-top: var(--sp-8) !important;
}
.article__sources h2 {
font-size: var(--fs-20);
margin-block: var(--sp-48) var(--sp-12);
padding-top: var(--sp-24);
border-top: 1px solid var(--line);
}
.article__source-list {
list-style: none;
margin: 0;
padding: 0;
}
.article__source-list li {
padding: var(--sp-8) 0;
color: var(--ink-2);
font-size: var(--fs-14);
border-bottom: 1px solid var(--line);
}
.article__source-list strong {
color: var(--ink);
}
.article__related {
margin-top: var(--sp-48);
}
.article__related > h2 {
font-size: var(--fs-20);
margin-bottom: var(--sp-16);
}
.article__related-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--sp-16);
}
.article__related-card {
display: flex;
flex-direction: column;
gap: var(--sp-4);
border: 1px solid var(--line);
border-radius: var(--r-18);
background: var(--surface);
padding: var(--sp-16) var(--sp-20);
text-decoration: none;
color: inherit;
transition: transform 180ms var(--ease-standard), border-color 180ms var(--ease-standard),
box-shadow 180ms var(--ease-standard);
}
.article__related-card:hover {
transform: translateY(-2px);
border-color: var(--brand-400);
box-shadow: var(--shadow-md);
}
.article__related-card span {
font-size: var(--fs-12);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--brand-text);
font-weight: 650;
}
.article__related-card strong {
font-size: var(--fs-16);
color: var(--ink);
}
.article__related-card p {
font-size: var(--fs-14);
color: var(--ink-2);
margin: 0;
}
@media (max-width: 640px) {
.article__body h2,
.article__sources h2 {
margin-top: var(--sp-32);
}
}
.learn-hero { padding-block: var(--sp-48) var(--sp-64); }
.learn-hero__grid {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: var(--sp-48);
align-items: center;
min-height: 360px;
}
.learn-hero__copy { max-width: 560px; }
.learn-hero__copy .oa-h1 { margin-top: var(--sp-4); }
.learn-hero__meta {
margin: var(--sp-24) 0 0;
color: var(--oa-ink-3);
font-size: var(--fs-meta);
max-width: none;
}
.learn-hero__art { min-width: 0; }
.oa-lh { margin: 0; }
.oa-lh__svg { width: 100%; height: auto; }
@media (max-width: 1000px) {
.learn-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-24); min-height: 0; }
}
body.oa-paper-page .article { padding-block: var(--sp-64); }
body.oa-paper-page .feat-top { background: var(--oa-band-hero); }
body.oa-paper-page .learn-hero { margin-inline: 0; }
.learn-lede {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: var(--sp-48);
align-items: end;
max-width: none;
}
.learn-lede__copy { max-width: 640px; }
.learn-lede__facts { display: flex; flex-direction: column; }
.learn-lede__fact {
display: flex;
flex-direction: column;
gap: 2px;
padding: var(--sp-16) 0;
border-top: 1px solid var(--paper-line);
}
.learn-lede__fact:last-child { border-bottom: 1px solid var(--paper-line); }
.learn-lede__fact b {
font-family: var(--ff-display);
font-size: var(--fs-16);
font-weight: 640;
color: var(--paper-ink);
}
.learn-lede__fact span { color: var(--paper-muted); font-size: var(--fs-14); line-height: var(--lh-body); }
@media (max-width: 1000px) {
.learn-lede { grid-template-columns: minmax(0, 1fr); gap: var(--sp-24); align-items: start; }
}
.facts th .facts__sub{display:block;font-weight:400;font-size:.8125rem;line-height:1.35;color:var(--oa-ink-2,var(--ink-2,#7C8799));margin-top:2px}
.facts td{font-variant-numeric:tabular-nums}
/* ── legal.css ── */
.doc {
max-width: 760px;
margin-inline: auto;
padding-block: var(--sp-48) var(--sp-96);
}
.doc h1 {
margin-bottom: var(--sp-8);
}
.doc h2 {
font-size: var(--fs-20);
margin-block: var(--sp-48) var(--sp-12);
padding-top: var(--sp-24);
border-top: 1px solid var(--line);
scroll-margin-top: var(--sp-64);
}
.doc h3 {
font-size: var(--fs-16);
margin-block: var(--sp-24) var(--sp-8);
}
.doc p,
.doc li {
color: var(--ink-2);
}
.doc__meta {
color: var(--faint);
font-size: var(--fs-14);
margin-bottom: var(--sp-32);
}
.doc table {
width: 100%;
border-collapse: collapse;
margin-block: var(--sp-16);
font-size: var(--fs-14);
}
.doc th,
.doc td {
text-align: left;
padding: var(--sp-12);
border-bottom: 1px solid var(--line);
vertical-align: top;
}
.doc th {
color: var(--ink);
font-weight: 650;
}
.doc__scroll {
overflow-x: auto;
}
.doc__updated {
display: inline-block;
font-size: var(--fs-12);
font-weight: 600;
color: var(--on-brand);
background: var(--brand-600);
border-radius: var(--r-full);
padding: var(--sp-4) var(--sp-12);
margin-bottom: var(--sp-24);
}
.toc {
border: 1px solid var(--line);
border-radius: var(--r-12);
background: var(--surface);
padding: var(--sp-16) var(--sp-24);
margin-block: var(--sp-24);
}
.toc__label {
font-size: var(--fs-12);
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--faint);
margin-bottom: var(--sp-8);
}
.toc ul {
margin: 0;
padding: 0;
list-style: none;
columns: 2;
column-gap: var(--sp-24);
}
.toc li {
margin-block: var(--sp-4);
break-inside: avoid;
}
.toc a {
color: var(--brand-text);
}
@media (max-width: 560px) {
.toc ul {
columns: 1;
}
}
.callout {
border: 1px solid var(--line);
border-left: 3px solid var(--brand-600);
border-radius: var(--r-12);
background: var(--surface);
padding: var(--sp-16) var(--sp-24);
margin-block: var(--sp-24);
}
.callout--warn {
border-left-color: var(--warning);
}
.callout p:last-child {
margin-bottom: 0;
}
.status {
margin-block: var(--sp-16);
padding: var(--sp-12) var(--sp-16);
border-radius: var(--r-12);
font-size: var(--fs-14);
display: none;
}
.status[data-kind="info"] {
display: block;
background: var(--surface-2);
color: var(--ink-2);
}
.status[data-kind="ok"] {
display: block;
background: color-mix(in srgb, var(--positive) 12%, transparent);
color: var(--positive-text);
}
.status[data-kind="error"] {
display: block;
background: color-mix(in srgb, var(--negative) 12%, transparent);
color: var(--negative-text);
}
.step {
margin-block: var(--sp-32);
}
.step[hidden] {
display: none;
}
body.legal-page main.doc { max-width: 1000px; }
body.legal-page .legal-reader { overflow: clip visible; }
body.legal-page .doc-body a { scroll-margin-block: calc(var(--nav-h) + var(--sp-8)) max(120px, 16vh); }
body.legal-page .legal-reader { padding-block: var(--sp-64) var(--sp-96, var(--sp-64)); }
body.legal-page .doc-body { max-width: 68ch; }
body.legal-page .doc h1 {
font-family: var(--ff-display);
font-size: var(--fs-h2);
line-height: var(--lh-h2);
font-weight: var(--fw-h2);
letter-spacing: var(--ls-h2);
color: var(--paper-ink);
}
body.legal-page .doc h2 {
font-family: var(--ff-display);
font-size: var(--fs-h3);
line-height: var(--lh-h3);
font-weight: var(--fw-h3);
letter-spacing: var(--ls-h3);
color: var(--paper-ink);
scroll-margin-top: calc(var(--nav-h) + var(--sp-24));
}
body.legal-page .doc p,
body.legal-page .doc li { color: #2C3547; }
body.legal-page .doc table,
body.legal-page .overflow--table table {
border-collapse: separate;
border-spacing: 0;
background: var(--paper-surface);
border: 1px solid var(--paper-line);
border-radius: var(--oa-r-surface);
overflow: hidden;
}
body.legal-page .doc thead th {
height: 44px;
background: #EDF0F6;
color: var(--paper-muted);
font-family: var(--ff-display);
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: 0.055em;
text-transform: uppercase;
border-bottom: 1px solid var(--paper-line);
}
body.legal-page .doc tbody td,
body.legal-page .doc tbody th {
padding: 14px 16px;
border-bottom: 1px solid rgba(22, 34, 56, 0.07);
font-size: var(--fs-14);
}
body.legal-page .doc tbody tr:last-child td,
body.legal-page .doc tbody tr:last-child th { border-bottom: 0; }
body.legal-page .oa-enter,
body.legal-page .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
body.legal-page .doc__updated,
body.oa-paper-page .doc__updated {
background: transparent;
color: var(--paper-muted);
border: 0;
padding: 0;
font-size: var(--fs-meta);
}
.oa-privacy-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 14px 0 6px;
}
.oa-privacy-actions .btn { flex: 0 1 auto; min-height: 44px; }
@media (max-width: 520px) {
.oa-privacy-actions .btn { flex: 1 1 100%; }
}
/* ── scenes.css ── */
.oa-scene {
position: relative;
isolation: isolate;
overflow: clip;
background: var(--oa-bg-0);
}
.oa-scene::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: 1;
background: none;
}
.oa-scene--cobalt {
background: var(--oa-band-hero);
}
.oa-scene--cobalt::before {
background: var(--oa-scene-cobalt);
}
.oa-scene--track {
background: var(--oa-band-track);
}
.oa-scene--track::before {
background: var(--oa-scene-track);
}
.oa-scene--iris {
background: var(--oa-band-understand);
}
.oa-scene--iris::before {
background: var(--oa-scene-iris);
}
.oa-scene--research {
background: var(--oa-band-research);
}
.oa-scene--research::before {
background: var(--oa-scene-research);
}
.oa-scene--neutral {
background: var(--oa-band-data);
}
.oa-scene--neutral::before {
background: var(--oa-scene-neutral);
}
.oa-scene--deep {
background: var(--oa-band-pricing);
}
.oa-scene--deep::before {
background: none;
}
.oa-scene--final {
background: var(--oa-band-final);
}
.oa-scene--final::before {
background: var(--oa-scene-final);
}
.oa-paper,
.oa-scene--paper,
body.oa-paper-page main {
color-scheme: light;
--page: var(--paper);
--page-deep: var(--paper);
--surface: var(--paper-surface);
--surface-raised: var(--paper-surface);
--surface-2: #EDF0F6;
--surface-3: #E4E9F2;
--ink: var(--paper-ink);
--ink-2: #2C3547;
--muted: var(--paper-muted);
--faint: #5C6779;
--line: var(--paper-line);
--line-quiet: rgba(22, 34, 56, 0.07);
--line-strong: rgba(22, 34, 56, 0.2);
--brand-text: #284FD9;
--brand-600: #315CF6;
--iris-text: #5B49D6;
--focus: #315CF6;
--positive-text: #067049;
--warning-text: #8A5100;
--negative-text: #B4232D;
--chip: rgba(49, 92, 246, 0.1);
--shadow-sm: 0 1px 2px rgba(16, 20, 26, 0.06);
--shadow-md: 0 1px 1px rgba(16, 20, 26, 0.06), 0 8px 24px rgba(16, 20, 26, 0.08);
--shadow-lg: 0 1px 1px rgba(16, 20, 26, 0.08), 0 16px 38px rgba(16, 20, 26, 0.1);
--oa-ink-0: var(--paper-ink);
--oa-ink-1: #2C3547;
--oa-ink-2: var(--paper-muted);
--oa-ink-3: #566072;
--oa-line-0: rgba(22, 34, 56, 0.07);
--oa-line-1: rgba(22, 34, 56, 0.12);
--oa-line-2: rgba(22, 34, 56, 0.2);
--oa-surface-0: var(--paper-surface);
--oa-surface-1: var(--paper-surface);
--oa-surface-2: #EDF0F6;
--oa-surface-3: #E4E9F2;
--oa-bg-0: var(--paper);
--oa-shadow-1: 0 1px 1px rgba(16, 20, 26, 0.06), 0 8px 24px rgba(16, 20, 26, 0.07);
--oa-shadow-2: 0 1px 1px rgba(16, 20, 26, 0.08), 0 16px 38px rgba(16, 20, 26, 0.1);
--oa-shadow-table: 0 1px 1px rgba(16, 20, 26, 0.05), 0 18px 48px rgba(16, 20, 26, 0.07);
background: var(--paper);
color: var(--paper-ink);
}
.oa-scene--paper {
border-top: 1px solid var(--oa-paper-edge);
border-bottom: 1px solid var(--oa-paper-edge);
}
.oa-scene--paper::before {
background: none;
}
.oa-scene + .oa-scene { border-top: 1px solid var(--oa-band-edge); }
.oa-scene + .oa-scene--paper,
.oa-scene--paper + .oa-scene { border-top: 1px solid var(--oa-paper-edge); }
.oa-group {
background: transparent;
border: 0;
border-top: 1px solid var(--oa-line-1);
border-radius: 0;
box-shadow: none;
padding-block: var(--sp-24);
}
.oa-panel {
background: var(--oa-surface-1);
border: 1px solid var(--oa-line-1);
border-radius: var(--oa-r-surface);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.035),
var(--oa-shadow-1);
}
.oa-panel--floating {
background: var(--oa-surface-2);
border: 1px solid var(--oa-line-2);
border-radius: var(--oa-r-surface);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.045),
var(--oa-shadow-2);
}
.oa-device {
position: relative;
background: var(--stage-device);
border: 1px solid var(--stage-bezel);
border-radius: var(--oa-r-hero);
box-shadow: var(--oa-shadow-hero);
overflow: hidden;
}
.oa-device::before {
content: "";
position: absolute;
inset: 0 14% auto 14%;
height: 1px;
background: linear-gradient(
90deg,
transparent,
rgba(135, 151, 255, 0.18),
rgba(255, 255, 255, 0.16),
rgba(120, 103, 242, 0.18),
transparent
);
pointer-events: none;
z-index: 2;
}
@media (hover: hover) and (pointer: fine) {
.oa-interactive {
transition:
transform var(--oa-ui) var(--ease-out),
border-color var(--oa-ui) var(--ease-out),
background-color var(--oa-ui) var(--ease-out),
box-shadow var(--oa-ui) var(--ease-out);
}
.oa-interactive:hover {
transform: translateY(-2px);
border-color: rgba(143, 159, 255, 0.3);
background: color-mix(in srgb, var(--oa-surface-1) 94%, var(--oa-cobalt));
}
}
.oa-display {
font-family: var(--ff-display);
font-size: var(--fs-display);
line-height: var(--lh-display);
font-weight: var(--fw-display);
letter-spacing: var(--ls-display);
color: var(--oa-ink-0);
margin: 0;
text-wrap: balance;
}
.oa-h1 {
font-family: var(--ff-display);
font-size: var(--fs-h1);
line-height: var(--lh-h1);
font-weight: var(--fw-h1);
letter-spacing: var(--ls-h1);
color: var(--oa-ink-0);
margin: 0;
text-wrap: balance;
}
.oa-h2 {
font-family: var(--ff-display);
font-size: var(--fs-h2);
line-height: var(--lh-h2);
font-weight: var(--fw-h2);
letter-spacing: var(--ls-h2);
color: var(--oa-ink-0);
margin: 0;
max-width: 18em;
text-wrap: balance;
}
.oa-h3 {
font-family: var(--ff-display);
font-size: var(--fs-h3);
line-height: var(--lh-h3);
font-weight: var(--fw-h3);
letter-spacing: var(--ls-h3);
color: var(--oa-ink-0);
margin: 0;
}
.oa-lead {
margin: var(--sp-24) 0 0;
font-size: var(--fs-body-l);
line-height: var(--lh-lead);
font-weight: var(--fw-lead);
letter-spacing: var(--ls-lead);
color: var(--oa-ink-1);
max-width: min(48ch, 560px);
}
.oa-body {
font-size: var(--fs-16);
line-height: var(--lh-body);
font-weight: var(--fw-body);
color: var(--oa-ink-1);
max-width: var(--measure-marketing);
}
.oa-meta {
font-size: var(--fs-meta);
line-height: var(--lh-meta);
font-weight: var(--fw-meta);
letter-spacing: var(--ls-meta);
color: var(--oa-ink-2);
margin: 0;
}
.oa-label {
display: block;
font-family: var(--ff-display);
font-size: var(--fs-label);
line-height: var(--lh-label);
font-weight: var(--fw-label);
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--oa-ink-2);
margin: 0 0 var(--sp-16);
}
.oa-actions {
display: flex;
flex-wrap: wrap;
gap: var(--sp-12);
margin-top: 28px;
}
.oa-num,
.tnum {
font-variant-numeric: tabular-nums lining-nums;
font-feature-settings: var(--fv-tabular);
}
.oa-scene p {
max-width: min(var(--measure-marketing), 560px);
}
.oa-scene .oa-panel p,
.oa-scene .oa-device p {
font-size: var(--fs-14);
}
.oa-wrap {
width: min(var(--content-max), calc(100% - 64px));
margin-inline: auto;
}
.oa-grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--grid-gap);
}
.oa-col-5 { grid-column: 1 / span 5; }
.oa-col-7 { grid-column: 6 / -1; }
.oa-col-7-first { grid-column: 1 / span 7; }
.oa-col-5-last { grid-column: 8 / -1; }
.oa-col-stage { grid-column: 2 / 12; }
.oa-col-full { grid-column: 1 / -1; }
@media (max-width: 1100px) {
.oa-wrap { width: min(100% - 48px, 1120px); }
.oa-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 20px; }
.oa-col-5,
.oa-col-7,
.oa-col-7-first,
.oa-col-5-last,
.oa-col-stage,
.oa-col-full { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
.oa-wrap { width: calc(100% - 36px); }
.oa-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}
.oa-chapter {
padding-block: var(--section-gap);
}
.oa-chapter--secondary {
padding-block: var(--section-gap-2);
}
.oa-chapter--hero {
padding-block: var(--hero-pad-top) var(--hero-pad-bottom);
}
.oa-chapter--feature-hero {
padding-block: var(--feature-hero-pad-top) var(--hero-pad-bottom);
}
@media (max-width: 720px) {
.oa-chapter { padding-block: var(--section-gap-mobile); }
.oa-chapter--secondary { padding-block: var(--section-gap-mobile-2); }
.oa-chapter--hero,
.oa-chapter--feature-hero { padding-block: var(--section-gap-mobile-2) var(--section-gap-mobile); }
}
.oa-stage-media {
min-width: 0;
width: 100%;
}
@media (min-width: 1101px) {
.oa-stage-media { min-width: 420px; }
}
.oa-copy {
max-width: 560px;
}
.oa-article { max-width: var(--article-max); }
.oa-article-visual { max-width: var(--article-visual-max); }
.oa-tool { max-width: var(--tool-max); margin-inline: auto; }
.btn {
min-height: 48px;
border-radius: var(--oa-r-control);
padding-inline: 20px;
font-size: var(--fs-14);
font-weight: 600;
letter-spacing: 0;
}
.btn--primary {
background: var(--oa-cobalt);
border-color: var(--oa-cobalt);
color: #FFFFFF;
}
.btn--primary:hover {
background: var(--oa-cobalt-hover);
border-color: var(--oa-cobalt-hover);
color: #FFFFFF;
}
.btn--primary:active {
background: var(--oa-cobalt-pressed);
border-color: var(--oa-cobalt-pressed);
}
.btn--ghost {
background: var(--oa-surface-2);
border: 1px solid var(--oa-line-2);
color: var(--oa-ink-0);
}
.btn--ghost:hover {
background: var(--oa-surface-3);
border-color: rgba(143, 159, 255, 0.35);
color: var(--oa-ink-0);
}
.btn:focus-visible,
.oa-interactive:focus-visible,
.contextnav__item:focus-visible,
.nav__link:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 2px;
}
.nav {
height: var(--nav-h);
background: var(--oa-band-hero);
border-bottom: 1px solid transparent;
}
.nav.is-stuck {
background: var(--oa-band-header-stuck);
border-bottom-color: var(--oa-line-1);
box-shadow: none;
}
.nav__inner {
height: var(--nav-h);
}
.nav__link {
color: var(--oa-ink-1);
}
.nav__link:hover,
.nav__link.is-current {
color: var(--oa-ink-0);
}
.nav__link::after {
height: 2px;
background: var(--oa-cobalt);
}
@media (min-width: 721px) {
.contextnav__item {
height: 44px;
border: 0;
border-bottom: 2px solid transparent;
border-radius: 0;
background: transparent;
color: var(--oa-ink-2);
padding-inline: var(--sp-12);
}
.contextnav__item:hover {
background: transparent;
color: var(--oa-ink-0);
border-bottom-color: var(--oa-line-2);
}
.contextnav__item[aria-current="page"] {
background: transparent;
color: var(--oa-ink-0);
border-bottom-color: var(--oa-cobalt);
}
.contextnav__item[aria-current="page"]::before {
display: none;
}
}
@media (max-width: 720px) {
.contextnav__item {
border: 1px solid var(--oa-line-1);
background: var(--oa-surface-1);
color: var(--oa-ink-1);
}
.contextnav__item[aria-current="page"] {
border-color: var(--oa-cobalt);
color: var(--oa-ink-0);
}
}
.oa-icon {
color: var(--oa-ink-2);
flex: none;
}
.oa-icon--brand { color: var(--brand-text); }
.oa-row-icon {
width: 20px;
height: 20px;
color: var(--oa-ink-2);
flex: none;
}
.oa-table-shell {
overflow: hidden;
background: var(--oa-chart-ledger);
border: 1px solid var(--oa-line-1);
border-radius: var(--oa-r-chart);
box-shadow: var(--oa-shadow-table);
}
.oa-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
.oa-table thead th,
.oa-table tbody th,
.oa-table tbody td {
padding-inline: 12px;
text-align: left;
}
.oa-table thead th:first-child,
.oa-table tbody th:first-child,
.oa-table tbody td:first-child { padding-inline-start: 20px; }
.oa-table thead th:last-child,
.oa-table tbody th:last-child,
.oa-table tbody td:last-child { padding-inline-end: 20px; }
.oa-table thead th {
height: 44px;
padding-block: 0;
background: var(--oa-surface-1);
color: var(--oa-ink-2);
border-bottom: 1px solid var(--oa-line-1);
font-family: var(--ff-display);
font-size: 12px;
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.055em;
text-transform: uppercase;
white-space: nowrap;
}
.oa-table tbody td,
.oa-table tbody th {
height: 60px;
padding-block: 14px;
color: var(--oa-ink-1);
border-bottom: 1px solid var(--oa-chart-rule);
font-size: var(--fs-14);
font-weight: 450;
line-height: 1.45;
}
.oa-table tbody tr:last-child td,
.oa-table tbody tr:last-child th { border-bottom: 0; }
.oa-table tbody th[scope="row"] {
color: var(--oa-ink-0);
font-weight: 640;
}
.oa-table .is-primary {
font-weight: 650;
color: var(--oa-ink-0);
}
.oa-table .is-meta {
display: block;
font-size: var(--fs-meta);
font-weight: 450;
color: var(--oa-chart-desc);
}
@media (hover: hover) {
.oa-table tbody tr:hover td,
.oa-table tbody tr:hover th { background: var(--oa-chart-row-hover); }
}
.oa-table .num,
.oa-table td.num,
.oa-table th.num {
text-align: right;
font-variant-numeric: tabular-nums lining-nums;
}
.oa-table td.txt,
.oa-table th.txt { text-align: left; }
.oa-table .is-boundary { border-inline-start: 1px solid var(--oa-chart-vrule); }
.oa-sort {
display: inline-flex;
align-items: center;
gap: var(--sp-4);
min-height: 44px;
padding: 0;
border: 0;
background: none;
color: inherit;
font: inherit;
letter-spacing: inherit;
text-transform: inherit;
cursor: pointer;
}
.oa-sort:hover { color: var(--oa-ink-0); }
.oa-sort[aria-sort="ascending"]::after { content: "\2191"; }
.oa-sort[aria-sort="descending"]::after { content: "\2193"; }
.source-ledger {
background: var(--oa-chart-ledger);
border: 1px solid var(--oa-line-1);
border-radius: var(--oa-r-chart);
overflow: hidden;
box-shadow: var(--oa-shadow-table);
}
.source-ledger .oa-table thead th { background: var(--oa-surface-1); }
.source-ledger .oa-table tbody td,
.source-ledger .oa-table tbody th { height: 68px; }
.sl__name {
color: var(--oa-ink-0);
font-size: 15px;
font-weight: 650;
}
.sl__desc {
display: block;
color: var(--oa-chart-desc);
font-size: var(--fs-14);
font-weight: 430;
}
.sl__cadence {
display: inline-flex;
align-items: center;
gap: var(--sp-8);
color: var(--oa-ink-1);
font-size: var(--fs-14);
white-space: nowrap;
}
.sl__dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--positive);
flex: none;
}
.sl__dot--partial { background: var(--warning); }
.sl__state { color: var(--oa-ink-2); }
.sl__toggle {
display: inline-flex;
align-items: center;
gap: var(--sp-8);
min-height: 44px;
padding: 0;
border: 0;
background: none;
color: var(--brand-text);
font: inherit;
font-weight: 600;
cursor: pointer;
}
.sl__toggle::after {
content: "";
width: 7px;
height: 7px;
border-inline-end: 1.6px solid currentColor;
border-block-end: 1.6px solid currentColor;
transform: rotate(45deg) translate(-1px, -1px);
transition: transform var(--oa-ui) var(--ease-out);
}
.sl__toggle[aria-expanded="true"]::after { transform: rotate(225deg) translate(-2px, -2px); }
.sl__toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.source-ledger tr.sl__detail > td {
height: auto;
padding-block: 0 20px;
border-bottom: 1px solid var(--oa-chart-rule);
background: var(--oa-surface-0);
}
.sl__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: var(--sp-16) var(--sp-32);
padding-block-start: 4px;
}
.sl__cell { display: flex; flex-direction: column; gap: 3px; }
.sl__k {
font-family: var(--ff-display);
font-size: var(--fs-label);
font-weight: 650;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--oa-ink-3);
}
.sl__v { color: var(--oa-ink-1); font-size: var(--fs-14); }
.src-pipe {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 44px;
}
.src-pipe__rows { display: flex; flex-direction: column; }
.src-pipe__row {
display: grid;
grid-template-columns: minmax(96px, 0.55fr) minmax(0, 1.45fr) auto;
align-items: center;
gap: var(--sp-16);
min-height: 52px;
padding-block: var(--sp-8);
border-top: 1px solid var(--oa-line-0);
}
.src-pipe__row:first-child { border-top: 0; }
.src-pipe__src { color: var(--oa-ink-0); font-weight: 620; font-size: var(--fs-14); }
.src-pipe__gives { color: var(--oa-chart-desc); font-size: var(--fs-14); }
.src-pipe__spine {
position: relative;
border-inline-start: 1px solid var(--oa-line-1);
margin-inline-start: 21px;
}
.src-pipe__out {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
gap: 2px;
padding-block-start: var(--sp-16);
border-top: 1px solid var(--oa-line-1);
margin-block-start: var(--sp-16);
}
.src-pipe__out .oa-fig__label { color: var(--brand-text); }
@media (max-width: 720px) {
.src-pipe { grid-template-columns: minmax(0, 1fr); }
.src-pipe__spine { display: none; }
.src-pipe__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
.src-pipe__gives { grid-column: 1 / -1; }
}
.compare-plane {
background: var(--oa-chart-compare);
border: 1px solid var(--oa-line-1);
border-radius: var(--oa-r-plane);
box-shadow: var(--oa-shadow-plane);
overflow: hidden;
}
.compare-plane__head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--sp-12);
padding: var(--sp-24) var(--sp-24) var(--sp-16);
border-bottom: 1px solid var(--oa-line-1);
}
.compare-matrix { width: 100%; border-collapse: separate; border-spacing: 0; }
.compare-matrix th,
.compare-matrix td {
padding-inline: 16px;
text-align: left;
vertical-align: middle;
}
.compare-matrix th:first-child,
.compare-matrix td:first-child { padding-inline-start: 24px; }
.compare-matrix th:last-child,
.compare-matrix td:last-child { padding-inline-end: 24px; }
.compare-matrix thead th + th,
.compare-matrix tbody td + td { border-inline-start: 1px solid var(--oa-chart-vrule); }
.compare-matrix thead th {
padding-block: var(--sp-16);
background: transparent;
border-bottom: 1px solid var(--oa-line-1);
vertical-align: bottom;
}
.compare-matrix__fund {
display: block;
color: var(--oa-ink-0);
font-family: var(--ff-display);
font-size: 15px;
font-weight: 650;
letter-spacing: -0.01em;
text-transform: none;
}
.compare-matrix__cat {
display: block;
color: var(--oa-ink-3);
font-size: var(--fs-meta);
font-weight: 500;
text-transform: none;
letter-spacing: 0;
}
.compare-matrix__group th {
height: 34px;
padding-block: 0;
background: var(--oa-surface-0);
border-block: 1px solid var(--oa-chart-rule);
color: var(--oa-chart-group);
font-family: var(--ff-display);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.compare-matrix tbody td,
.compare-matrix tbody th[scope="row"] {
height: 58px;
padding-block: 0;
border-bottom: 1px solid var(--oa-chart-rule);
font-size: var(--fs-14);
}
.compare-matrix tbody th[scope="row"] {
color: var(--oa-ink-2);
font-weight: 500;
}
.compare-matrix tbody td {
color: var(--oa-ink-0);
font-weight: 620;
font-variant-numeric: tabular-nums lining-nums;
}
.compare-matrix tbody td .cm__sub {
display: block;
color: var(--oa-ink-3);
font-size: var(--fs-meta);
font-weight: 450;
}
@media (hover: hover) {
.compare-matrix tbody tr:not(.compare-matrix__group):hover td,
.compare-matrix tbody tr:not(.compare-matrix__group):hover th { background: var(--oa-chart-row-hover); }
.compare-matrix.is-col-1 tbody td:nth-child(2),
.compare-matrix.is-col-2 tbody td:nth-child(3),
.compare-matrix.is-col-3 tbody td:nth-child(4) { background: var(--oa-chart-col-hover); }
}
@media (max-width: 720px) {
.compare-matrix,
.compare-matrix tbody,
.compare-matrix tr,
.compare-matrix td,
.compare-matrix tbody th[scope="row"] {
display: block;
width: auto;
}
.compare-matrix thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.compare-matrix__group th {
display: block;
height: auto;
padding: var(--sp-16) var(--sp-16) var(--sp-8);
border-block: 1px solid var(--oa-chart-rule);
}
.compare-matrix tbody th[scope="row"] {
height: auto;
padding: var(--sp-16) var(--sp-16) var(--sp-4);
border-bottom: 0;
color: var(--oa-ink-0);
font-family: var(--ff-display);
font-weight: 640;
}
.compare-matrix tbody td {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--sp-16);
height: auto;
min-height: 40px;
padding: 6px var(--sp-16);
border-inline-start: 0;
border-bottom: 1px solid var(--oa-chart-rule);
text-align: left;
}
.compare-matrix tbody td::before {
content: attr(data-fund);
color: var(--oa-ink-2);
font-family: var(--ff-body);
font-size: var(--fs-meta);
font-weight: 500;
}
.compare-matrix tbody tr:last-child td:last-child { border-bottom: 0; }
.overflow--table[data-overflow-sticky-col] .compare-matrix th:first-child,
.overflow--table[data-overflow-sticky-col] .compare-matrix td:first-child {
position: static;
background: transparent;
}
}
.insight-rail {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
gap: var(--sp-24) var(--sp-32);
padding: var(--sp-24);
border-bottom: 1px solid var(--oa-line-1);
}
.insight {
display: flex;
flex-direction: column;
gap: 4px;
padding-inline-start: var(--sp-16);
border-inline-start: 2px solid var(--oa-cobalt);
}
.insight__k {
color: var(--oa-ink-0);
font-family: var(--ff-display);
font-size: var(--fs-14);
font-weight: 650;
}
.insight__v { color: var(--oa-chart-desc); font-size: var(--fs-14); line-height: 1.45; }
.fin-chart {
position: relative;
min-height: 320px;
background:
radial-gradient(70% 90% at 66% 0%, rgba(49, 92, 246, 0.10), transparent 68%),
var(--oa-chart-plane);
border: 1px solid var(--oa-line-1);
border-radius: var(--oa-r-chart);
box-shadow: var(--oa-shadow-chart);
overflow: hidden;
}
:root[data-theme="light"] .fin-chart,
.oa-paper .fin-chart,
body.oa-paper-page .fin-chart { background: var(--oa-chart-plane); }
.fin-chart__head {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: var(--sp-12) var(--sp-24);
padding: var(--sp-24) var(--sp-24) var(--sp-16);
}
.fin-chart__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fin-chart__title {
font-family: var(--ff-display);
font-size: var(--fs-label);
font-weight: 650;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--oa-ink-3);
}
.fin-chart__value {
font-family: var(--ff-display);
font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
font-weight: 700;
letter-spacing: -0.035em;
line-height: 1.1;
color: var(--oa-ink-0);
font-variant-numeric: tabular-nums lining-nums;
}
.fin-chart__delta {
font-size: var(--fs-14);
font-weight: 600;
color: var(--oa-ink-2);
font-variant-numeric: tabular-nums lining-nums;
}
.fin-chart__delta .is-pos { color: var(--positive-text); }
.fin-chart__delta .is-neg { color: var(--negative-text); }
.fin-range {
display: flex;
align-items: center;
gap: 2px;
padding: 3px;
border: 1px solid var(--oa-line-1);
border-radius: 10px;
background: var(--oa-surface-0);
}
.fin-range__btn {
position: relative;
height: 30px;
padding-inline: 11px;
border: 0;
border-radius: 7px;
background: none;
color: var(--oa-ink-2);
font-family: var(--ff-display);
font-size: var(--fs-meta);
font-weight: 620;
cursor: pointer;
transition: background-color var(--oa-ui) var(--ease-out), color var(--oa-ui) var(--ease-out);
}
.fin-range__btn::before {
content: "";
position: absolute;
inset: -7px 0;
}
.fin-range__btn:hover { color: var(--oa-ink-0); }
.fin-range__btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.fin-range__btn[aria-pressed="true"] {
background: var(--oa-surface-2);
color: var(--oa-ink-0);
}
.fin-chart__plot { position: relative; padding: 0 var(--sp-8) var(--sp-8); }
.fin-chart__svg { display: block; width: 100%; height: auto; overflow: visible; }
.fin-grid { stroke: var(--oa-chart-grid); stroke-width: 1; }
.fin-axis { stroke: var(--oa-line-1); stroke-width: 1; }
.fin-tick {
fill: var(--oa-chart-axis);
font-family: var(--ff-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0;
}
.fin-line {
fill: none;
stroke: var(--oa-chart-line);
stroke-width: 2.25;
stroke-linecap: round;
stroke-linejoin: round;
}
.fin-line--cmp {
stroke: var(--oa-chart-cmp);
stroke-width: 1.5;
stroke-dasharray: none;
}
.fin-area { fill: url(#oa-fin-area); }
.fin-cross {
stroke: var(--oa-chart-cross);
stroke-width: 1;
opacity: 0;
transition: opacity var(--oa-fast) linear;
}
.fin-chart.is-probing .fin-cross { opacity: 1; }
.fin-pt {
r: 7;
fill: var(--oa-chart-pt);
stroke: var(--oa-chart-pt-ring);
stroke-width: 3;
opacity: 0;
transition: opacity var(--oa-fast) linear;
}
.fin-chart.is-probing .fin-pt { opacity: 1; }
.fin-key {
display: flex;
flex-wrap: wrap;
gap: var(--sp-16) var(--sp-24);
padding: 0 var(--sp-24) var(--sp-24);
}
.fin-key__item {
display: inline-flex;
align-items: center;
gap: var(--sp-8);
color: var(--oa-ink-2);
font-size: var(--fs-meta);
}
.fin-key__item::before {
content: "";
width: 16px;
height: 2px;
border-radius: 1px;
background: var(--oa-chart-cmp);
}
.fin-key__item--primary::before { background: var(--oa-chart-line); height: 3px; }
.fin-key__val {
color: var(--oa-ink-0);
font-weight: 650;
font-variant-numeric: tabular-nums lining-nums;
}
.fin-tip {
position: absolute;
z-index: 3;
min-width: 178px;
padding: 10px 12px;
background: var(--oa-chart-tip);
border: 1px solid var(--oa-chart-tip-line);
border-radius: var(--oa-r-tip);
box-shadow: var(--oa-chart-tip-shadow);
pointer-events: none;
opacity: 0;
visibility: hidden;
left: 50%;
top: 40%;
transform: translate(-50%, -12px);
transition: opacity var(--oa-fast) linear;
}
.fin-chart.is-probing .fin-tip { opacity: 1; visibility: visible; }
.fin-tip__d {
display: block;
margin-bottom: 6px;
color: var(--oa-ink-2);
font-size: var(--fs-meta);
font-weight: 600;
}
.fin-tip__row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--sp-16);
font-size: var(--fs-meta);
line-height: 1.7;
}
.fin-tip__k { color: var(--oa-ink-2); }
.fin-tip__v {
color: var(--oa-ink-0);
font-weight: 650;
font-variant-numeric: tabular-nums lining-nums;
}
.fin-tip__row--diff {
margin-top: 4px;
padding-top: 5px;
border-top: 1px solid var(--oa-chart-tip-line);
}
.js-on .fin-chart .fin-plot-clip rect { transform-origin: left center; }
@media (prefers-reduced-motion: no-preference) {
.js-on .fin-chart.will-enter .fin-area,
.js-on .fin-chart.will-enter .fin-line { opacity: 0; }
.js-on .fin-chart.is-in .fin-line {
animation: fin-reveal 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.js-on .fin-chart.is-in .fin-area {
animation: fin-area-in 420ms cubic-bezier(0.22, 1, 0.36, 1) 100ms both;
}
.js-on .fin-chart.is-in .fin-chart__value,
.js-on .fin-chart.is-in .fin-chart__delta {
animation: fin-metric-in 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.fin-chart.is-morphing .fin-line,
.fin-chart.is-morphing .fin-area { opacity: 0.25; transition: opacity 100ms linear; }
.fin-chart .fin-line,
.fin-chart .fin-area { transition: opacity 180ms linear; }
}
@keyframes fin-reveal {
from { clip-path: inset(0 100% 0 0); opacity: 1; }
to { clip-path: inset(0 0 0 0); opacity: 1; }
}
@keyframes fin-area-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fin-metric-in { from { opacity: 0; } to { opacity: 1; } }
.pricing-plane {
display: grid;
grid-template-columns: 40fr 60fr;
background: var(--oa-chart-plane);
border: 1px solid var(--oa-line-1);
border-radius: var(--oa-r-plane);
box-shadow: var(--oa-shadow-plane);
overflow: hidden;
}
.pricing-plane__col {
padding: var(--sp-32);
display: flex;
flex-direction: column;
align-items: start;
gap: var(--sp-16);
}
.pricing-plane__list { flex: 1 1 auto; }
.pricing-plane__col > .btn { margin-block-start: var(--sp-8); }
.pricing-plane__col + .pricing-plane__col { border-inline-start: 1px solid var(--oa-chart-vrule); }
.pricing-plane__kind {
font-family: var(--ff-display);
font-size: var(--fs-label);
font-weight: 650;
letter-spacing: 0.105em;
text-transform: uppercase;
color: var(--oa-ink-3);
}
.pricing-plane__price {
font-family: var(--ff-display);
font-size: clamp(2.5rem, 2rem + 2.2vw, 3.5rem);
font-weight: 700;
line-height: 1;
letter-spacing: -0.04em;
color: var(--oa-ink-0);
font-variant-numeric: tabular-nums lining-nums;
}
.pricing-plane__note { color: var(--oa-chart-desc); font-size: var(--fs-14); max-width: 46ch; }
.pricing-plane__list {
list-style: none;
margin: 0;
padding: 0;
align-self: stretch;
display: flex;
flex-direction: column;
gap: var(--sp-8);
}
.pricing-plane__list li {
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
gap: var(--sp-12);
align-items: start;
color: var(--oa-ink-1);
font-size: var(--fs-14);
line-height: 1.5;
}
.pricing-plane__list li::before {
content: "";
width: 11px;
height: 6px;
margin-top: 6px;
border-inline-start: 2px solid var(--brand-text);
border-block-end: 2px solid var(--brand-text);
transform: rotate(-45deg);
}
.allowance {
display: flex;
align-items: center;
gap: 4px;
padding: 4px;
border: 1px solid var(--oa-line-1);
border-radius: 12px;
background: var(--oa-surface-0);
width: fit-content;
max-width: 100%;
flex-wrap: wrap;
}
.allowance__btn {
position: relative;
min-height: 40px;
padding-inline: var(--sp-16);
border: 0;
border-radius: 9px;
background: none;
color: var(--oa-ink-1);
font-family: var(--ff-display);
font-size: var(--fs-14);
font-weight: 640;
cursor: pointer;
font-variant-numeric: tabular-nums lining-nums;
transition: background-color var(--oa-ui) var(--ease-out), color var(--oa-ui) var(--ease-out);
}
.allowance__btn::before { content: ""; position: absolute; inset: -2px 0; }
.allowance__btn:hover { color: var(--oa-ink-0); }
.allowance__btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.allowance__btn[aria-pressed="true"] { background: var(--oa-cobalt); color: var(--on-brand); }
.pricing-plane__byok {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--sp-8) var(--sp-16);
padding-block-start: var(--sp-24);
color: var(--oa-ink-2);
font-size: var(--fs-14);
}
.pricing-facts { row-gap: var(--sp-24, 24px); }
.pricing-facts .hub-rows { margin-block-start: 0; }
@media (max-width: 860px) {
.pricing-plane { grid-template-columns: minmax(0, 1fr); }
.pricing-plane__col + .pricing-plane__col {
border-inline-start: 0;
border-block-start: 1px solid var(--oa-chart-vrule);
}
.pricing-plane__col { padding: var(--sp-24); }
}
.oa-enter {
transition:
opacity var(--oa-scene) var(--ease-out),
transform var(--oa-scene) var(--ease-out);
transition-delay: calc(var(--i, 0) * 70ms);
}
.js-on .oa-enter.will-enter {
opacity: 0;
transform: translateY(18px) scale(0.985);
will-change: opacity, transform;
}
.js-on .oa-enter.will-move {
transform: translateY(18px);
will-change: transform;
}
.js-on .oa-enter.will-enter.is-in,
.js-on .oa-enter.will-move.is-in,
.oa-enter.is-in {
opacity: 1;
transform: none;
}
.oa-morph {
transition:
opacity 240ms var(--ease-out),
transform 240ms var(--ease-out);
}
.oa-morph.is-out {
opacity: 0;
transform: translateY(8px);
transition-duration: 110ms;
}
.oa-trace-path {
stroke-dasharray: var(--trace-len, 1000);
stroke-dashoffset: var(--trace-len, 1000);
}
.is-in .oa-trace-path,
:root:not(.js-on) .oa-trace-path {
animation: oa-trace-draw var(--oa-trace) var(--ease-out) forwards;
}
@keyframes oa-trace-draw {
to { stroke-dashoffset: 0; }
}
.oa-trace-node {
opacity: 0;
}
.is-in .oa-trace-node,
:root:not(.js-on) .oa-trace-node {
animation: oa-trace-node var(--oa-state) var(--ease-out) forwards;
animation-delay: calc(220ms + var(--n, 0) * 110ms);
}
@keyframes oa-trace-node {
to { opacity: 1; }
}
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: var(--oa-view-transition);
animation-timing-function: var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
.oa-enter,
.js-on .oa-enter.will-enter,
.js-on .oa-enter.will-move,
.oa-enter.is-in {
opacity: 1;
transform: none;
transition: none;
}
.oa-morph,
.oa-morph.is-out {
opacity: 1;
transform: none;
transition: opacity 120ms linear;
}
.oa-trace-path,
.is-in .oa-trace-path {
stroke-dashoffset: 0;
animation: none;
}
.oa-trace-node,
.is-in .oa-trace-node {
opacity: 1;
animation: none;
}
@view-transition { navigation: none; }
}
body.oa-paper-page {
background: var(--paper);
}
body.oa-paper-page main {
border-bottom: 1px solid var(--oa-paper-edge);
}
body.oa-paper-page .footer {
background: var(--page);
}
:root:not([data-theme="light"]) body.oa-paper-page .feat-top,
:root:not([data-theme="light"]) body.oa-paper-page .oa-scene:not(.oa-scene--paper) {
--ink: var(--oa-ink-0);
--ink-2: #C3CAD9;
--muted: #98A3B6;
--faint: #8791A6;
--line: rgba(205, 214, 236, 0.13);
--line-quiet: rgba(205, 214, 236, 0.08);
--line-strong: rgba(205, 214, 236, 0.22);
--surface: #111827;
--surface-2: #162034;
--brand-text: #A7B5FF;
--iris-text: #A79BF9;
--oa-ink-0: #F4F6FC;
--oa-ink-1: #C3CAD9;
--oa-ink-2: #98A3B6;
--oa-ink-3: #8791A6;
--oa-line-0: rgba(205, 214, 236, 0.08);
--oa-line-1: rgba(205, 214, 236, 0.13);
--oa-line-2: rgba(205, 214, 236, 0.22);
--oa-surface-0: #0D111A;
--oa-surface-1: #101622;
--oa-surface-2: #151C2B;
--oa-surface-3: #1A2234;
--chip: rgba(49, 92, 246, 0.2);
color: var(--oa-ink-0);
}
.oa-device,
.device2,
.home-canvas {
--page: var(--stage-bg);
--surface: var(--stage-device);
--surface-raised: var(--stage-raised);
--surface-2: var(--stage-raised);
--ink: var(--stage-ink);
--ink-2: #C3CAD9;
--muted: var(--stage-ink-2);
--faint: var(--stage-ink-3);
--line: var(--stage-bezel);
--line-quiet: rgba(205, 214, 236, 0.08);
--line-strong: rgba(205, 214, 236, 0.22);
--oa-ink-0: var(--stage-ink);
--oa-ink-1: #C3CAD9;
--oa-ink-2: var(--stage-ink-2);
--oa-ink-3: var(--stage-ink-3);
--oa-line-0: rgba(205, 214, 236, 0.08);
--oa-line-1: rgba(205, 214, 236, 0.13);
--oa-line-2: rgba(205, 214, 236, 0.22);
--oa-surface-0: #0B0E16;
--oa-surface-1: var(--stage-device);
--oa-surface-2: var(--stage-raised);
--oa-surface-3: #22304C;
--oa-chart-plane: #0B0E16;
--oa-chart-ledger: #0B0E16;
--oa-chart-compare: #0B0E16;
--oa-chart-line: #7D69FF;
--oa-chart-cmp: #77839A;
--oa-chart-grid: rgba(208, 216, 237, 0.07);
--oa-chart-axis: #7E899E;
--oa-chart-track: #20283A;
--oa-chart-bar: #687CFF;
--oa-chart-bar-sel: #9A71FF;
--oa-chart-desc: #AAB3C4;
--oa-chart-group: #78859A;
--oa-chart-rule: rgba(255, 255, 255, 0.06);
--oa-chart-vrule: rgba(255, 255, 255, 0.065);
--oa-chart-row-hover: rgba(255, 255, 255, 0.025);
--oa-chart-col-hover: rgba(49, 92, 246, 0.045);
color: var(--stage-ink);
}
.oa-table thead .oa-unit {
margin-left: 0.35em;
font-weight: 500;
opacity: 0.75;
text-transform: none;
letter-spacing: 0;
}
.oa-panel,
.pricing__surface,
.pindex__view {
background: var(--oa-surface-1);
border: 1px solid var(--oa-line-1);
border-radius: var(--oa-r-surface);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.04),
var(--oa-shadow-1);
}
:root[data-theme="light"] .oa-panel,
:root[data-theme="light"] .pricing__surface,
:root[data-theme="light"] .pindex__view {
background: var(--oa-surface-0);
border-color: var(--oa-line-0);
box-shadow: var(--shadow-md);
}
.pricing__surface--premium,
:root[data-theme="light"] .pricing__surface--premium {
border-color: var(--oa-line-2);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
var(--oa-shadow-2);
}
:root[data-theme="light"] .pricing__surface--premium {
box-shadow: var(--shadow-lg);
}
.oa-tablectl { margin-block-end: var(--sp-16); }
.oa-tablecount {
margin-block-start: var(--sp-12);
color: var(--oa-ink-2);
font-size: var(--fs-meta);
}
.compare-plane--live { display: flex; flex-direction: column; gap: var(--sp-16); }
.compare-plane__body { display: flex; flex-direction: column; gap: var(--sp-16); }
.cmp-picker { position: relative; display: flex; flex-direction: column; gap: var(--sp-12); }
.cmp-picker__form {
display: flex;
align-items: center;
gap: var(--sp-12);
min-height: 52px;
padding-inline: var(--sp-16);
background: var(--oa-surface-2);
border: 1px solid var(--oa-line-2);
border-radius: var(--oa-r-control);
}
.cmp-picker__form:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--oa-cobalt); }
.cmp-picker__input {
flex: 1;
min-width: 0;
padding: 0;
border: 0;
background: none;
color: var(--oa-ink-0);
font: inherit;
font-size: var(--fs-body-l);
appearance: none;
}
.cmp-picker__input::placeholder { color: var(--oa-ink-3); }
.cmp-picker__input:focus { outline: none; }
.cmp-suggest {
display: flex;
flex-direction: column;
max-height: 288px;
overflow-y: auto;
background: var(--oa-surface-1);
border: 1px solid var(--oa-line-2);
border-radius: var(--oa-r-surface);
}
.cmp-suggest__row {
display: grid;
gap: 2px;
min-height: 56px;
padding: var(--sp-8) var(--sp-16);
border: 0;
border-bottom: 1px solid var(--oa-line-0);
background: none;
font: inherit;
text-align: left;
cursor: pointer;
}
.cmp-suggest__row:last-child { border-bottom: 0; }
.cmp-suggest__row:hover { background: var(--chip); }
.cmp-suggest__row:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.cmp-suggest__nm { color: var(--oa-ink-0); font-weight: 620; font-size: var(--fs-14); }
.cmp-suggest__mt { color: var(--oa-ink-2); font-size: var(--fs-meta); }
.cmp-chips { display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; }
.cmp-chip {
display: inline-flex;
align-items: center;
gap: var(--sp-8);
padding: 6px 6px 6px var(--sp-12);
background: var(--chip);
border: 1px solid var(--oa-line-2);
border-radius: var(--r-full);
}
.cmp-chip__nm { color: var(--oa-ink-0); font-size: var(--fs-meta); font-weight: 600; }
.cmp-chip__rm {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: 0;
border-radius: var(--r-full);
background: none;
color: var(--oa-ink-2);
font: inherit;
font-size: 18px;
line-height: 1;
cursor: pointer;
}
.cmp-chip__rm::before { content: ""; position: absolute; inset: -8px; }
.cmp-chip__rm:hover { color: var(--oa-ink-0); background: var(--oa-surface-3); }
.cmp-chip__rm:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cmp-chip__hint { color: var(--oa-ink-3); font-size: var(--fs-meta); }
.compare-plane__omitted {
margin: 0;
color: var(--oa-ink-3);
font-size: var(--fs-meta);
line-height: var(--lh-meta);
}
.compare-plane__body > .compare-plane__omitted,
.compare-plane__body > .oa-fig__meta-line { max-width: 80ch; padding-inline: var(--sp-24); }
.compare-plane__body > .oa-fig__meta-line:last-child { padding-bottom: var(--sp-24); }
.cmp-growth { margin: 0 var(--sp-24); }
.cmp-growth .fin-chart { min-height: 0; }
.fin-line--s2 { stroke: var(--oa-chart-s2); }
.fin-line--s3 { stroke: var(--oa-chart-s3); }
.fin-key__item--s2::before { background: var(--oa-chart-s2); }
.fin-key__item--s3::before { background: var(--oa-chart-s3); }
.cmp-holdings { padding: var(--sp-24); border-top: 1px solid var(--oa-line-1); }
.cmp-holdings__head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--sp-12);
margin-bottom: var(--sp-16);
}
.cmp-holdings__legend { display: inline-flex; align-items: center; gap: 6px; margin-left: var(--sp-12); }
.cmp-holdings__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--oa-cobalt); }
.cmp-holdings__grid {
display: grid;
grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr));
gap: var(--sp-24) var(--sp-32);
}
.cmp-holdings__col { display: flex; flex-direction: column; gap: var(--sp-8); min-width: 0; }
.cmp-holdings__fund {
color: var(--oa-ink-0);
font-family: var(--ff-display);
font-size: 15px;
font-weight: 650;
letter-spacing: -0.01em;
}
.cmp-holdings__date { color: var(--oa-ink-3); font-size: var(--fs-meta); }
.cmp-holdings__list { margin: var(--sp-4) 0 0; padding: 0; list-style: none; counter-reset: h; }
.cmp-holdings__item {
display: flex;
align-items: baseline;
gap: var(--sp-12);
min-height: 34px;
padding: 6px 0;
border-bottom: 1px solid var(--oa-chart-rule);
color: var(--oa-ink-1);
font-size: var(--fs-14);
counter-increment: h;
}
.cmp-holdings__item::before {
content: counter(h);
width: 18px;
flex: none;
color: var(--oa-ink-3);
font-size: var(--fs-meta);
font-variant-numeric: tabular-nums;
}
.cmp-holdings__nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-holdings__item.is-shared .cmp-holdings__nm::after {
content: "";
display: inline-block;
width: 8px;
height: 8px;
margin-left: 8px;
border-radius: 50%;
background: var(--oa-cobalt);
vertical-align: 1px;
}
.cmp-holdings__w { color: var(--oa-ink-0); font-weight: 620; font-variant-numeric: tabular-nums lining-nums; }
.cmp-holdings__sectors { display: flex; flex-direction: column; gap: 6px; margin-top: var(--sp-12); }
.cmp-holdings__sector {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(60px, 1.2fr) 52px;
align-items: center;
gap: var(--sp-12);
color: var(--oa-ink-2);
font-size: var(--fs-meta);
}
.cmp-holdings__sname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-holdings__bar { position: relative; height: 6px; border-radius: 3px; background: var(--oa-chart-track); overflow: hidden; }
.cmp-holdings__bar::after {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: var(--w, 0%);
border-radius: 3px;
background: var(--oa-chart-bar);
}
.cmp-holdings__sector .cmp-holdings__w { text-align: right; }
@media (max-width: 720px) {
.cmp-holdings__grid { grid-template-columns: minmax(0, 1fr); }
.cmp-growth { margin: 0 var(--sp-16); }
}
.compare-plane--sheet { box-shadow: none; }
.compare-plane__body .cmp-growth { margin: 0; border-bottom: 1px solid var(--oa-line-1); }
.compare-plane__body .cmp-growth .fin-chart,
:root[data-theme="light"] .compare-plane__body .cmp-growth .fin-chart {
border: 0;
border-radius: 0;
box-shadow: none;
background: transparent;
}
.fin-custom {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-12) var(--sp-16);
padding: 0 var(--sp-24) var(--sp-12);
}
.fin-custom__field {
display: inline-flex;
align-items: center;
gap: var(--sp-8);
color: var(--oa-ink-2);
font-size: var(--fs-meta);
font-weight: 600;
}
.fin-custom input[type="date"] {
min-height: 36px;
padding: 0 var(--sp-8);
border: 1px solid var(--oa-line-2);
border-radius: 8px;
background: var(--oa-surface-0);
color: var(--oa-ink-0);
font: inherit;
font-size: var(--fs-14);
color-scheme: dark;
}
:root[data-theme="light"] .fin-custom input[type="date"] { color-scheme: light; }
.fin-custom input[type="date"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.fin-note { flex-basis: 100%; margin: 0; color: var(--oa-ink-2); font-size: var(--fs-meta); line-height: var(--lh-meta); }
.fin-note:empty { display: none; }
.fin-note.is-warn { color: var(--warning); }
:root[data-theme="light"] .compare-plane {
border-color: var(--oa-line-1);
box-shadow: var(--shadow-lg);
}
:root[data-theme="light"] .compare-matrix thead th + th,
:root[data-theme="light"] .compare-matrix tbody td + td { border-inline-start-color: transparent; }
:root[data-theme="light"] .compare-matrix__group th { background: var(--oa-surface-2); }
@media (hover: hover) {
.compare-matrix.is-col-4 tbody td:nth-child(5) { background: var(--oa-chart-col-hover); }
}
.compare-plane__body.is-stale {
opacity: .38;
pointer-events: none;
}
/* ── figures.css ── */
.oa-fig {
margin: 0;
display: flex;
flex-direction: column;
gap: var(--sp-16);
min-width: 0;
}
.oa-fig text,
.oa-lh text,
.fin-chart__svg text {
stroke: none;
}
.oa-fig__svg,
.oa-lens__ring,
.oa-lens__trace,
.oa-xray__chart,
.oa-braid__wires,
.oa-ht__svg,
.oa-tp__svg,
.oa-db__svg,
.oa-wm__svg,
.oa-lh__svg {
width: 100%;
height: auto;
overflow: visible;
}
.oa-fig .oa-row-icon,
.oa-fig .oi {
width: 20px;
height: 20px;
flex: none;
}
.oa-fig__cap {
font-size: var(--fs-meta);
line-height: var(--lh-meta);
letter-spacing: var(--ls-meta);
color: var(--oa-ink-2);
}
.oa-fig__meta-line {
margin: 0;
font-size: var(--fs-meta);
line-height: var(--lh-meta);
color: var(--oa-ink-2);
max-width: 60ch;
}
.oa-fig__label,
.oa-fig .oa-fig__label {
font-family: var(--ff-display);
font-size: var(--fs-label);
font-weight: var(--fw-label);
letter-spacing: var(--ls-label);
text-transform: uppercase;
fill: var(--oa-ink-2);
color: var(--oa-ink-2);
}
.oa-fig__name { fill: var(--oa-ink-0); font-size: 15px; font-weight: 620; }
.oa-fig__meta { fill: var(--oa-ink-2); font-size: 13px; font-variant-numeric: tabular-nums lining-nums; }
.oa-fig__amt { fill: var(--oa-ink-1); font-variant-numeric: tabular-nums lining-nums; }
.oa-fig__miss { fill: var(--oa-ink-3); font-style: italic; }
.oa-fig__amt-lg {
fill: var(--oa-ink-0);
font-size: 20px;
font-weight: 650;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums lining-nums;
}
.oa-fig__hero {
fill: var(--oa-ink-0);
font-family: var(--ff-display);
font-size: 26px;
font-weight: 700;
letter-spacing: -0.035em;
font-variant-numeric: tabular-nums lining-nums;
}
.oa-fig__hero-html {
font-family: var(--ff-display);
font-size: 30px;
font-weight: 700;
letter-spacing: -0.035em;
color: var(--oa-ink-0);
font-variant-numeric: tabular-nums lining-nums;
}
.oa-cur {
font-size: 0.66em;
font-weight: 600;
color: var(--oa-ink-2);
margin-right: 0.12em;
}
.oa-fig__ctls {
display: flex;
flex-wrap: wrap;
gap: var(--sp-8);
}
.oa-fig__ctl {
min-height: 44px;
padding: 0 var(--sp-16);
border: 1px solid var(--oa-line-1);
border-radius: var(--r-full);
background: transparent;
color: var(--oa-ink-2);
font: inherit;
font-size: var(--fs-14);
font-weight: 550;
cursor: pointer;
transition: color var(--oa-ui) var(--ease-out), border-color var(--oa-ui) var(--ease-out),
background-color var(--oa-ui) var(--ease-out);
}
.oa-fig__ctl:hover { color: var(--oa-ink-0); border-color: var(--oa-line-2); }
.oa-fig__ctl:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.oa-fig__ctl:active { background: var(--oa-surface-2); }
.oa-fig__ctl.is-active {
color: var(--oa-ink-0);
border-color: var(--oa-cobalt);
background: var(--chip);
}
[data-scene-item] {
transition: opacity var(--oa-state) var(--ease-out);
}
[data-scene-item].is-dim rect,
[data-scene-item].is-dim circle,
[data-scene-item].is-dim path,
[data-scene-item].is-dim line,
[data-scene-item].is-dim polyline,
[data-scene-item].is-dim polygon { opacity: 0.28; }
[data-scene-item].is-dim text { opacity: 0.62; }
[data-scene-item].is-on { opacity: 1; }
.oa-lens {
display: grid;
grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
gap: var(--sp-32);
align-items: center;
}
.oa-ring__seg--brand { stroke: var(--oa-cobalt); }
.oa-ring__seg--iris { stroke: var(--oa-iris); }
.oa-ring__seg--brand-300 { stroke: var(--brand-300); }
.oa-ring__seg--line { stroke: var(--oa-chart-cmp); }
.oa-lens__legend { display: flex; flex-direction: column; }
.oa-lens__row {
display: grid;
grid-template-columns: 12px minmax(0, 1fr) auto auto;
align-items: center;
gap: var(--sp-12);
min-height: 44px;
padding: 0;
border: 0;
border-top: 1px solid var(--oa-line-0);
background: none;
color: var(--oa-ink-1);
font: inherit;
font-size: var(--fs-14);
text-align: left;
cursor: pointer;
}
.oa-lens__row:first-child { border-top: 0; }
.oa-lens__row:hover .oa-lens__name { color: var(--oa-ink-0); }
.oa-lens__row:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.oa-lens__row.is-active .oa-lens__name { color: var(--oa-ink-0); font-weight: 640; }
.oa-lens__swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--oa-chart-cmp); }
.oa-lens__swatch--brand { background: var(--oa-cobalt); }
.oa-lens__swatch--iris { background: var(--oa-iris); }
.oa-lens__swatch--brand-300 { background: var(--brand-300); }
.oa-lens__pct,
.oa-lens__amt { color: var(--oa-ink-2); }
.oa-lens__amt { color: var(--oa-ink-0); font-weight: 620; }
.oa-lens__holdings {
margin-top: var(--sp-16);
border-top: 1px solid var(--oa-line-1);
}
.oa-lens__hold {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
grid-template-areas: "name val pct" "meta val pct";
column-gap: var(--sp-16);
padding: var(--sp-12) 0;
border-bottom: 1px solid var(--oa-line-0);
font-size: var(--fs-14);
}
.oa-lens__hold:last-child { border-bottom: 0; }
.oa-lens__hold-name { grid-area: name; color: var(--oa-ink-0); font-weight: 600; }
.oa-lens__hold-meta { grid-area: meta; color: var(--oa-ink-3); font-size: var(--fs-meta); }
.oa-lens__hold-val { grid-area: val; align-self: center; color: var(--oa-ink-0); font-weight: 620; }
.oa-lens__hold-pct { grid-area: pct; align-self: center; color: var(--oa-ink-2); min-width: 3.5em; text-align: right; }
.oa-lens__foot { margin-top: var(--sp-24); display: flex; flex-direction: column; gap: var(--sp-8); }
@media (max-width: 900px) {
.oa-lens { grid-template-columns: minmax(0, 1fr); gap: var(--sp-24); }
.oa-lens__ring { max-width: 240px; margin-inline: auto; }
}
.oa-xray { display: flex; flex-direction: column; gap: var(--sp-16); }
.oa-xray__head { display: flex; flex-direction: column; gap: 2px; }
.oa-xray__name {
font-family: var(--ff-display);
font-size: var(--fs-h3);
font-weight: var(--fw-h3);
letter-spacing: var(--ls-h3);
color: var(--oa-ink-0);
}
.oa-xray__chart { width: 100%; height: auto; }
.oa-xray__fund { stroke: var(--oa-cobalt); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.oa-xray__bench {
stroke: var(--oa-ink-3);
stroke-width: 1.8;
stroke-dasharray: 5 5;
stroke-linecap: round;
transition: opacity var(--oa-state) var(--ease-out);
}
[data-scene="fund-xray"][data-active="fund"] .oa-xray__bench,
[data-scene="fund-xray"][data-active="fund"] .oa-xray__key--bench { opacity: 0; }
.oa-xray__legend { display: flex; flex-wrap: wrap; gap: var(--sp-24); font-size: var(--fs-meta); }
.oa-xray__key { display: inline-flex; align-items: center; gap: var(--sp-8); color: var(--oa-ink-2); }
.oa-xray__key::before { content: ""; width: 18px; height: 2px; background: var(--oa-ink-3); }
.oa-xray__key--fund::before { background: var(--oa-cobalt); height: 3px; }
.oa-xray__facts {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--sp-16);
border-top: 1px solid var(--oa-line-1);
border-bottom: 1px solid var(--oa-line-1);
padding-block: var(--sp-16);
}
.oa-xray__fact { display: flex; flex-direction: column; gap: 2px; }
.oa-xray__val {
font-size: var(--fs-20);
font-weight: 650;
letter-spacing: -0.02em;
color: var(--oa-ink-0);
}
.oa-xray__holds { display: flex; flex-direction: column; gap: var(--sp-8); }
.oa-xray__hold {
display: grid;
grid-template-columns: minmax(0, 150px) minmax(0, 1fr) 3.5em;
align-items: center;
gap: var(--sp-12);
font-size: var(--fs-14);
color: var(--oa-ink-1);
}
.oa-xray__hold .oa-num { text-align: right; color: var(--oa-ink-2); }
@media (max-width: 720px) {
.oa-xray__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.oa-bridge {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.55fr) minmax(0, 0.85fr);
gap: var(--sp-24);
align-items: center;
}
.oa-bridge__side { display: flex; flex-direction: column; gap: var(--sp-24); }
.oa-bridge__lane { display: flex; flex-direction: column; gap: var(--sp-8); }
.oa-bridge__row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "nm vl" "mt vl";
column-gap: var(--sp-12);
padding-block: var(--sp-8);
border-bottom: 1px solid var(--oa-line-0);
font-size: var(--fs-14);
}
.oa-bridge__nm { grid-area: nm; color: var(--oa-ink-0); font-weight: 600; }
.oa-bridge__mt { grid-area: mt; color: var(--oa-ink-3); font-size: var(--fs-meta); }
.oa-bridge__vl { grid-area: vl; align-self: center; color: var(--oa-ink-1); font-weight: 620; }
.oa-bridge__sum {
display: flex;
justify-content: space-between;
font-size: var(--fs-meta);
color: var(--oa-ink-2);
padding-top: var(--sp-4);
}
.oa-bridge__mid { position: relative; display: flex; align-items: center; justify-content: center; }
.oa-bridge__wire { position: absolute; inset: 0; width: 100%; height: 100%; }
.oa-bridge__path { fill: none; stroke: var(--oa-cobalt); stroke-width: 1.6; opacity: 0.45; }
.oa-bridge__path--us { stroke: var(--oa-iris); }
.oa-bridge__fx {
position: relative;
display: flex;
flex-direction: column;
gap: 2px;
align-items: center;
text-align: center;
padding: var(--sp-12) var(--sp-16);
background: var(--oa-surface-2);
border: 1px solid var(--oa-line-2);
border-radius: var(--oa-r-control);
}
.oa-bridge__fxrate { font-size: var(--fs-20); font-weight: 700; color: var(--oa-ink-0); }
.oa-bridge__out { display: flex; flex-direction: column; gap: var(--sp-8); }
@media (max-width: 900px) {
.oa-bridge { grid-template-columns: minmax(0, 1fr); }
.oa-bridge__wire { display: none; }
}
.oa-flow__spine,
.oa-flowb__path {
fill: none;
stroke: var(--oa-iris);
stroke-width: 1.8;
opacity: 0.5;
}
.oa-flow__spine { stroke: var(--oa-cobalt); opacity: 0.65; }
.oa-flowb__box { fill: var(--oa-surface-1); stroke: var(--oa-line-1); stroke-width: 1; }
.oa-flowb.is-on .oa-flowb__box { stroke: var(--oa-iris); }
.oa-braid { display: flex; flex-direction: column; gap: var(--sp-16); }
.oa-braid__head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
gap: var(--sp-16);
align-items: baseline;
font-size: var(--fs-14);
font-weight: 620;
color: var(--oa-ink-0);
padding-bottom: var(--sp-12);
border-bottom: 1px solid var(--oa-line-1);
}
.oa-braid__head > :last-child { text-align: right; }
.oa-braid__pct { color: var(--warning-text); font-weight: 700; }
.oa-braid__rows { display: flex; flex-direction: column; }
.oa-braid__row {
display: grid;
grid-template-columns: 52px minmax(24px, 1fr) auto minmax(24px, 1fr) 52px;
align-items: center;
gap: var(--sp-12);
min-height: 46px;
border-top: 1px solid var(--oa-line-0);
}
.oa-braid__wire {
height: var(--t);
border-radius: calc(var(--t) / 2);
background: var(--oa-chart-line);
opacity: 0.55;
transition: opacity var(--oa-state) var(--ease-out);
}
.oa-braid__row.is-dim .oa-braid__wire { opacity: 0.15; }
.oa-braid__a { text-align: left; color: var(--brand-text); font-weight: 620; }
.oa-braid__b { text-align: right; color: var(--iris-text); font-weight: 620; }
.oa-braid__nm { text-align: center; color: var(--oa-ink-2); }
.oa-braid__row.is-shared .oa-braid__nm { color: var(--oa-ink-0); font-weight: 620; }
[data-scene="holdings-braid"][data-active="shared"] .oa-braid__row:not(.is-shared) {
opacity: 0.22;
}
.oa-ht { display: flex; flex-direction: column; gap: var(--sp-24); }
.oa-ht__svg { width: 100%; height: auto; }
.oa-ht__spine { fill: none; stroke: var(--oa-iris); stroke-width: 2; }
.oa-ht__branch {
fill: none;
stroke: var(--oa-iris);
stroke-width: 1.6;
opacity: 0.4;
transition: opacity var(--oa-state) var(--ease-out), stroke-width var(--oa-state) var(--ease-out);
}
.oa-ht__branch.is-on { opacity: 1; stroke-width: 2.6; stroke: var(--oa-cobalt); }
.oa-ht__branch.is-dim { opacity: 0.12; }
.oa-ht__dot { fill: var(--oa-iris); }
.oa-ht__name {
fill: var(--oa-ink-0);
font-family: var(--ff-display);
font-size: 15px;
font-weight: 640;
}
.oa-ht__vt { fill: var(--positive-text); font-size: 15px; font-weight: 620; }
.oa-ht__stages { display: flex; flex-direction: column; gap: var(--sp-12); }
.oa-ht__detail { margin: 0; color: var(--oa-ink-1); font-size: var(--fs-14); max-width: 60ch; }
.oa-ht__detail strong { color: var(--oa-ink-0); }
.oa-ht__findings { display: flex; flex-direction: column; }
.oa-ht__finding {
display: grid;
grid-template-areas: "n title" "n ev";
grid-template-columns: 22px minmax(0, 1fr);
column-gap: var(--sp-12);
row-gap: 2px;
align-items: center;
min-height: 44px;
padding: var(--sp-12) 0 var(--sp-12) var(--sp-16);
border: 0;
border-top: 1px solid var(--oa-line-1);
border-left: 2px solid transparent;
background: none;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.oa-ht__finding:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.oa-ht__finding.is-active { border-left-color: var(--oa-cobalt); }
.oa-ht__f-title { grid-area: title; align-self: end; color: var(--oa-ink-0); font-size: var(--fs-14); font-weight: 620; }
.oa-ht__f-ev { grid-area: ev; align-self: start; color: var(--oa-chart-desc); font-size: var(--fs-meta); }
.oa-ht__finding--warning .oa-ht__f-title::before,
.oa-ht__finding--positive .oa-ht__f-title::before,
.oa-ht__finding--neutral .oa-ht__f-title::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
border-radius: 2px;
margin-right: var(--sp-8);
background: var(--oa-ink-3);
vertical-align: 1px;
}
.oa-ht__finding--warning .oa-ht__f-title::before { background: var(--warning); }
.oa-ht__finding--positive .oa-ht__f-title::before { background: var(--positive); }
.oa-rw {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
grid-template-areas: "search search" "list drawer";
gap: var(--sp-16) var(--sp-24);
}
.oa-rw__search {
grid-area: search;
display: flex;
align-items: center;
gap: var(--sp-12);
min-height: 52px;
padding-inline: var(--sp-16);
background: var(--oa-surface-2);
border: 1px solid var(--oa-line-2);
border-radius: var(--oa-r-control);
}
.oa-rw__q { color: var(--oa-ink-0); font-size: var(--fs-body-l); flex: 1; }
.oa-rw__count { color: var(--oa-ink-2); font-size: var(--fs-meta); }
.oa-rw__list { grid-area: list; display: flex; flex-direction: column; }
.oa-rw__row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "nm vl" "mt vl";
column-gap: var(--sp-12);
min-height: 60px;
padding: var(--sp-12) 0;
border: 0;
border-top: 1px solid var(--oa-line-0);
border-left: 2px solid transparent;
padding-left: var(--sp-12);
background: none;
font: inherit;
text-align: left;
cursor: pointer;
}
.oa-rw__row:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.oa-rw__row.is-active { border-left-color: var(--oa-cobalt); background: var(--chip); }
.oa-rw__nm { grid-area: nm; color: var(--oa-ink-0); font-weight: 620; font-size: var(--fs-14); }
.oa-rw__mt { grid-area: mt; color: var(--oa-ink-2); font-size: var(--fs-meta); }
.oa-rw__vl { grid-area: vl; align-self: center; color: var(--oa-ink-1); font-weight: 620; font-size: var(--fs-14); }
.oa-rw__drawer {
grid-area: drawer;
display: flex;
flex-direction: column;
gap: var(--sp-8);
padding: var(--sp-16);
background: var(--oa-surface-1);
border: 1px solid var(--oa-line-1);
border-radius: var(--oa-r-surface);
}
.oa-rw__title { color: var(--oa-ink-0); font-weight: 650; font-size: var(--fs-16); }
.oa-rw__facts { display: flex; flex-direction: column; gap: var(--sp-4); }
.oa-rw__fact {
display: flex;
justify-content: space-between;
gap: var(--sp-12);
font-size: var(--fs-meta);
color: var(--oa-ink-2);
padding-block: var(--sp-4);
border-bottom: 1px solid var(--oa-line-0);
}
.oa-rw__fact > :last-child { color: var(--oa-ink-0); font-weight: 600; }
.oa-rw__add {
margin-top: var(--sp-8);
align-self: flex-start;
padding: var(--sp-8) var(--sp-16);
border-radius: var(--oa-r-control);
background: var(--oa-cobalt);
color: #fff;
font-size: var(--fs-14);
font-weight: 600;
}
@media (max-width: 900px) {
.oa-rw { grid-template-columns: minmax(0, 1fr); grid-template-areas: "search" "list" "drawer"; }
}
.oa-cp { display: flex; flex-direction: column; gap: var(--sp-16); }
.oa-cp__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-16); }
.oa-cp .oa-table-shell { overflow-x: auto; }
.oa-cp .oa-table th[scope="row"] { position: sticky; left: 0; background: var(--oa-surface-0); }
.oa-wm {
display: grid;
grid-template-columns: minmax(420px, 1.05fr) minmax(0, 1fr);
gap: var(--sp-32);
align-items: center;
}
.oa-wm__svg { width: 100%; max-width: none; }
@media (max-width: 1100px) {
.oa-wm { grid-template-columns: minmax(0, 1fr); }
.oa-wm__svg { max-width: 460px; margin-inline: auto; }
}
.oa-wm__ring { stroke: var(--oa-line-1); stroke-width: 1; }
.oa-wm__dot { fill: var(--oa-cobalt); transition: r var(--oa-state) var(--ease-out), opacity var(--oa-state) var(--ease-out); }
.oa-wm__dot.is-on { r: 10; }
.oa-wm__dot.is-dim { opacity: .3; }
.oa-wm__tick {
fill: var(--oa-ink-2);
font-family: var(--ff-display);
font-size: 12px;
font-weight: 620;
letter-spacing: -0.005em;
transition: fill var(--oa-state) var(--ease-out), opacity var(--oa-state) var(--ease-out);
}
.oa-wm__tick.is-on { fill: var(--oa-ink-0); }
.oa-wm__tick.is-dim { opacity: .62; }
.oa-wm__hub { fill: var(--oa-surface-2); stroke: var(--oa-cobalt); stroke-width: 1.5; }
.oa-wm__hub-val {
fill: var(--oa-ink-0);
font-family: var(--ff-display);
font-size: 20px;
font-weight: 700;
letter-spacing: -0.03em;
font-variant-numeric: tabular-nums lining-nums;
}
.oa-wm__spoke {
fill: none;
stroke: var(--oa-cobalt);
stroke-width: 1.4;
opacity: 0.35;
transition: opacity var(--oa-state) var(--ease-out), stroke-width var(--oa-state) var(--ease-out);
}
.oa-wm__spoke.is-on { opacity: 1; stroke-width: 2.4; }
.oa-wm__spoke.is-dim { opacity: 0.12; }
.oa-wm__nodes { display: flex; flex-direction: column; }
.oa-wm__node {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 2px;
min-height: 56px;
padding: var(--sp-12) 0 var(--sp-12) var(--sp-16);
border-top: 1px solid var(--oa-line-1);
border-left: 2px solid transparent;
text-decoration: none;
transition: border-color var(--oa-ui) var(--ease-out), background-color var(--oa-ui) var(--ease-out);
}
.oa-wm__node:hover,
.oa-wm__node:focus-visible {
border-left-color: var(--oa-cobalt);
background: var(--chip);
}
.oa-wm__nm { color: var(--oa-ink-0); font-weight: 640; font-size: var(--fs-16); }
.oa-wm__dt { color: var(--oa-ink-2); font-size: var(--fs-14); }
@media (max-width: 900px) {
.oa-wm { grid-template-columns: minmax(0, 1fr); }
.oa-wm__svg { max-width: 260px; margin-inline: auto; }
}
.oa-tp { display: flex; flex-direction: column; gap: var(--sp-16); }
.oa-tp__spine { fill: none; stroke: var(--oa-iris); stroke-width: 2; }
.oa-tp__dot { fill: var(--oa-cobalt); }
.oa-tp__stage.is-on .oa-tp__dot { r: 11; }
.oa-tp__nm { fill: var(--oa-ink-0); font-family: var(--ff-display); font-size: 14px; font-weight: 640; }
.oa-tp__detail { margin: 0; color: var(--oa-ink-1); font-size: var(--fs-14); max-width: 62ch; }
.oa-tp__detail strong { color: var(--oa-ink-0); }
.oa-state {
display: inline-flex;
align-items: center;
gap: var(--sp-8);
font-size: var(--fs-meta);
font-weight: 600;
color: var(--oa-ink-2);
}
.oa-state::before {
content: "";
width: 8px;
height: 8px;
border-radius: 2px;
background: var(--oa-ink-3);
}
.oa-state--live { color: var(--positive-text); }
.oa-state--live::before { background: var(--positive); }
.oa-state--partial { color: var(--warning-text); }
.oa-state--partial::before { background: var(--warning); }
.oa-db { display: flex; flex-direction: column; gap: var(--sp-16); }
.oa-db__box { fill: var(--oa-surface-2); stroke: var(--oa-line-2); stroke-width: 1; }
.oa-db__node.is-on .oa-db__box { stroke: var(--oa-cobalt); fill: var(--chip); }
.oa-db__nm { fill: var(--oa-ink-0); font-size: 15px; font-weight: 640; }
.oa-db__edge {
fill: none;
stroke: var(--oa-cobalt);
stroke-width: 1.6;
opacity: 0.35;
marker-end: none;
stroke-dasharray: 4 6;
}
.oa-db__detail { margin: 0; color: var(--oa-ink-1); font-size: var(--fs-14); max-width: 62ch; }
.oa-db__detail strong { color: var(--oa-ink-0); }
@media (prefers-reduced-motion: reduce) {
[data-scene-item],
.oa-ring__seg,
.oa-braid__row,
.oa-xray__bench,
.oa-ht__branch,
.oa-wm__spoke {
transition: none;
}
}
.pindex .oa-h2 { margin-bottom: var(--sp-48); }
.pindex__lead {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
gap: var(--sp-48);
align-items: start;
padding: var(--sp-32) 0;
border-top: 1px solid var(--oa-line-1);
border-bottom: 1px solid var(--oa-line-1);
text-decoration: none;
transition: border-color var(--oa-ui) var(--ease-out);
}
.pindex__lead:hover,
.pindex__lead:focus-visible { border-color: var(--oa-line-2); }
.pindex__lead-copy { display: flex; flex-direction: column; max-width: 46ch; }
.pindex__lead-title {
font-family: var(--ff-display);
font-size: var(--fs-h3);
line-height: var(--lh-h3);
font-weight: var(--fw-h3);
letter-spacing: var(--ls-h3);
color: var(--oa-ink-0);
}
.pindex__lead-body {
margin-top: var(--sp-12);
color: var(--oa-ink-2);
font-size: var(--fs-16);
line-height: var(--lh-body);
}
.pindex__ev { display: flex; flex-direction: column; }
.pindex__ev-row {
display: flex;
flex-direction: column;
gap: 2px;
padding: var(--sp-12) 0 var(--sp-12) var(--sp-16);
border-top: 1px solid var(--oa-line-0);
border-left: 2px solid var(--oa-cobalt);
}
.pindex__ev-row:first-child { border-top: 0; }
.pindex__ev-t { color: var(--oa-ink-0); font-size: var(--fs-14); font-weight: 620; }
.pindex__ev-d { color: var(--oa-ink-3); font-size: var(--fs-meta); }
.pindex__pair {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
border-bottom: 1px solid var(--oa-line-1);
}
.pindex__half {
display: flex;
flex-direction: column;
gap: var(--sp-8);
padding: var(--sp-32) var(--sp-32) var(--sp-32) 0;
text-decoration: none;
}
.pindex__half + .pindex__half {
border-left: 1px solid var(--oa-line-1);
padding-left: var(--sp-32);
}
.oa-mini { width: 100%; max-width: 260px; height: auto; margin-bottom: var(--sp-8); }
.oa-mini path,
.oa-mini polyline { stroke: var(--oa-cobalt); stroke-width: 1.8; opacity: 0.65; }
.oa-mini rect { fill: var(--oa-cobalt); opacity: 0.55; }
.oa-mini__neg { stroke: var(--negative) !important; }
.oa-mini__wire { stroke: var(--oa-iris) !important; stroke-dasharray: 3 5; }
.oa-mini__hub { fill: var(--chip); stroke: var(--oa-cobalt); stroke-width: 1.5; }
.oa-mini__track { stroke: var(--oa-line-1); }
.oa-mini__seg-a { stroke: var(--oa-cobalt); }
.oa-mini__seg-b { stroke: var(--oa-iris); }
.oa-mini__bar { fill: var(--oa-ink-3); opacity: 0.5; }
.pindex__name {
font-family: var(--ff-display);
font-size: var(--fs-20);
font-weight: 640;
letter-spacing: -0.02em;
color: var(--oa-ink-0);
}
.pindex__desc { color: var(--oa-ink-2); font-size: var(--fs-14); line-height: var(--lh-body); max-width: 44ch; }
.pindex__index {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
gap: var(--sp-48);
align-items: start;
}
.pindex__rows { display: flex; flex-direction: column; }
.pindex__row {
display: flex;
flex-direction: column;
gap: 2px;
min-height: 72px;
justify-content: center;
padding: var(--sp-12) 0 var(--sp-12) var(--sp-16);
border-bottom: 1px solid var(--oa-line-0);
border-left: 2px solid transparent;
text-decoration: none;
transition: border-color var(--oa-ui) var(--ease-out), background-color var(--oa-ui) var(--ease-out);
}
.pindex__row:hover,
.pindex__row:focus-visible,
.pindex__row.is-active { border-left-color: var(--oa-cobalt); background: var(--chip); }
.pindex__row .pindex__name { font-size: var(--fs-16); }
.pindex__view {
display: flex;
flex-direction: column;
gap: var(--sp-8);
padding: var(--sp-24);
background: var(--oa-surface-1);
border: 1px solid var(--oa-line-1);
border-radius: var(--oa-r-surface);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), var(--oa-shadow-1);
justify-content: center;
}
.pindex__panel { display: flex; flex-direction: column; gap: var(--sp-4); }
.pindex__ptitle { color: var(--oa-ink-0); font-weight: 640; font-size: var(--fs-16); }
.pindex__pmeta { color: var(--oa-ink-2); font-size: var(--fs-meta); }
@media (max-width: 900px) {
.pindex__lead,
.pindex__index { grid-template-columns: minmax(0, 1fr); gap: var(--sp-24); }
.pindex .oa-h2 { margin-bottom: var(--sp-24); }
.pindex__lead { padding: var(--sp-24) 0; }
.pindex__pair { grid-template-columns: minmax(0, 1fr); }
.pindex__half { padding: var(--sp-24) 0; }
.pindex__half + .pindex__half { border-left: 0; border-top: 1px solid var(--oa-line-1); padding-left: 0; }
}
.overflow--table[data-overflow-sticky-col].has-start .oa-table tbody th:first-child,
.overflow--table[data-overflow-sticky-col].has-start .oa-table thead th:first-child {
background: var(--oa-bg-0);
}
.oa-lens__foot { margin-top: var(--sp-16); }
.oa-plot__axis { stroke: var(--oa-line-2); stroke-width: 1; }
.oa-plot__grid { stroke: var(--oa-line-0); stroke-width: 1; }
.oa-plot__tick {
fill: var(--oa-ink-3);
font-family: var(--ff-display);
font-size: 11px;
font-weight: 650;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.oa-plot__key {
fill: var(--oa-ink-2);
font-family: var(--ff-display);
font-size: 12px;
font-weight: 640;
}
.oa-plot__key--b { fill: var(--oa-ink-3); }
.oa-plot__a { stroke: var(--oa-cobalt); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.oa-plot__b {
stroke: var(--oa-ink-3);
stroke-width: 1.8;
stroke-dasharray: 6 5;
stroke-linecap: round;
stroke-linejoin: round;
}
.oa-plot__mark { fill: var(--oa-iris); }
.oa-plot__block { fill: var(--oa-cobalt); }
.oa-plot__dot { fill: var(--oa-cobalt); }
.oa-plot__gap { stroke: var(--warning); stroke-width: 2; }
.oa-plot__div { fill: var(--positive); }
.oa-plot__hold { fill: var(--oa-cobalt); opacity: 0.4; }
.oa-plot__hold--b { fill: var(--oa-iris); opacity: 0.4; }
.oa-plot__braid { stroke: var(--oa-cobalt); stroke-width: 2.4; opacity: 0.6; }
.oa-plot__track { fill: var(--oa-line-0); }
.oa-plot__now { fill: var(--oa-cobalt); }
.oa-ht__stages { min-height: 108px; }
.oa-ht__detail { min-height: 44px; }
.oa-wm__svg { overflow: visible; }
button.pindex__row {
width: 100%;
border: 0;
border-bottom: 1px solid var(--oa-line-0);
border-left: 2px solid transparent;
background: none;
font: inherit;
text-align: left;
cursor: pointer;
color: inherit;
}
button.pindex__row:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.pindex__after {
margin-top: var(--sp-24);
padding-top: var(--sp-16);
border-top: 1px solid var(--oa-line-1);
}
.oa-ht__branchg.is-on .oa-ht__branchg.is-dim { opacity: 0.28; }
.oa-ht__branchg.is-on
.oa-plot__note {
fill: var(--oa-ink-1);
font-family: var(--ff-display);
font-size: 12px;
font-weight: 620;
font-variant-numeric: tabular-nums lining-nums;
}
.oa-plot__note--b { fill: var(--oa-ink-3); font-weight: 550; }
.oa-plot__note--lead { fill: var(--oa-ink-2); font-weight: 600; font-size: 12.5px; }
.oa-nw__svg { width: 100%; height: auto; overflow: visible; }
.oa-nw__name {
fill: var(--oa-ink-0);
font-family: var(--ff-display);
font-size: 15px;
font-weight: 620;
}
.oa-nw__amt {
fill: var(--oa-ink-1);
font-size: 14px;
font-weight: 620;
font-variant-numeric: tabular-nums lining-nums;
}
.oa-nw__amt--miss { fill: var(--oa-ink-3); font-style: italic; font-weight: 450; }
.oa-nw__track { fill: var(--oa-chart-track); }
.oa-nw__fill { fill: var(--oa-chart-bar); }
.oa-nw__lane--neg .oa-nw__fill { fill: var(--negative); }
.oa-nw__lane--gap .oa-nw__fill {
fill: none;
stroke: var(--oa-line-2);
stroke-width: 1.25;
stroke-dasharray: 5 4;
}
.oa-nw__wire {
fill: none;
stroke: var(--oa-chart-bar);
stroke-width: 1.5;
opacity: 0.55;
transition: opacity var(--oa-state) var(--ease-out), stroke-width var(--oa-state) var(--ease-out);
}
.oa-nw__wire--neg { stroke: var(--negative); }
.oa-nw__wire--gap { stroke: var(--oa-line-2); stroke-dasharray: 4 4; }
.oa-nw__spine { stroke: var(--oa-line-2); stroke-width: 1.25; }
.oa-nw__total {
fill: var(--oa-ink-0);
font-family: var(--ff-display);
font-size: 26px;
font-weight: 700;
letter-spacing: -0.035em;
font-variant-numeric: tabular-nums lining-nums;
}
.oa-nw__asof { fill: var(--oa-ink-2); font-size: 12px; }
.oa-nw__lane,
.oa-nw__wire { transition: opacity var(--oa-state) var(--ease-out); }
.oa-nw__wire.is-dim { opacity: 0.3; }
.oa-nw__lane.is-dim rect { opacity: 0.3; }
.oa-nw__lane.is-dim text { opacity: 0.62; }
.oa-nw__wire.is-on { opacity: 1; stroke-width: 2.25; }
.oa-nw__lane.is-on .oa-nw__amt { fill: var(--oa-ink-0); }
.oa-lens__ring { width: 100%; max-width: 240px; }
.oa-ring__track { stroke: var(--oa-chart-track); }
.oa-ring__seg {
transition: opacity var(--oa-state) var(--ease-out), stroke-width var(--oa-state) var(--ease-out);
}
.oa-ring__seg.is-dim { opacity: 0.3; }
.oa-ring__seg.is-on { stroke-width: 38; }
.oa-lens__centre {
fill: var(--oa-ink-0);
font-family: var(--ff-display);
font-size: 22px;
font-weight: 700;
letter-spacing: -0.03em;
font-variant-numeric: tabular-nums lining-nums;
}
.oa-lens__row.is-active { background: rgba(120, 103, 242, 0.07); }
.oa-lens__holdings > .oa-fig__label { padding-block: var(--sp-12) var(--sp-4); }
.oa-xray__strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: var(--sp-16) var(--sp-24);
padding-block: var(--sp-16);
border-block: 1px solid var(--oa-line-0);
}
.oa-xray__hold {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(90px, 3fr) 46px;
align-items: center;
gap: var(--sp-16);
min-height: 34px;
}
.oa-xray__hnm { color: var(--oa-ink-1); font-size: var(--fs-14); }
.oa-xray__hpct {
color: var(--oa-ink-0);
font-size: var(--fs-14);
font-weight: 650;
text-align: right;
font-variant-numeric: tabular-nums lining-nums;
}
.oa-xray__bar {
display: block;
height: 8px;
border-radius: 3px;
background: var(--oa-chart-track);
overflow: hidden;
}
.oa-xray__bar-fill {
display: block;
width: var(--w);
height: 100%;
border-radius: 3px;
background: var(--oa-chart-bar);
}
.oa-xray__hold:hover .oa-xray__bar-fill { background: var(--oa-chart-bar-sel); }
.oa-node__box {
fill: var(--oa-surface-1);
stroke: var(--oa-line-1);
stroke-width: 1;
}
.oa-node__box--out {
fill: var(--oa-surface-2);
stroke: var(--oa-line-2);
}
.oa-lh__axis { stroke: var(--oa-line-2); stroke-width: 1; }
.oa-lh__axt {
fill: var(--oa-chart-axis);
font-family: var(--ff-display);
font-size: 11px;
font-weight: 650;
letter-spacing: 0.095em;
text-transform: uppercase;
}
.oa-lh__line {
stroke: var(--oa-chart-line);
stroke-width: 2.25;
stroke-linecap: round;
stroke-linejoin: round;
}
.oa-lh__line--b { stroke: var(--oa-chart-cmp); stroke-width: 1.5; }
.oa-lh__end { fill: var(--oa-chart-pt); stroke: var(--oa-chart-pt-ring); stroke-width: 3; }
.oa-lh__stem { stroke: var(--oa-chart-cmp); stroke-width: 1.25; }
.oa-lh__cf { fill: var(--oa-iris); }
.oa-lh__cflab {
fill: var(--oa-chart-axis);
font-size: 12px;
font-weight: 500;
}
.oa-lh__note {
fill: var(--oa-ink-0);
font-family: var(--ff-display);
font-size: 13px;
font-weight: 620;
font-variant-numeric: tabular-nums lining-nums;
}
.oa-lh__note--b { fill: var(--oa-ink-2); font-weight: 520; }
.oa-lh__leader { stroke: var(--oa-line-2); stroke-width: 1; }
.oa-lh__brk { stroke: var(--oa-chart-line); stroke-width: 1.5; fill: none; }
.oa-lh__brk--b { stroke: var(--oa-chart-cmp); }
.oa-lh__brkl {
fill: var(--oa-ink-1);
font-family: var(--ff-display);
font-size: 12.5px;
font-weight: 600;
}
.oa-lh__take {
fill: var(--oa-ink-1);
font-size: 13.5px;
font-weight: 500;
}
.oa-lh__gap { stroke: var(--warning); stroke-width: 2; }
.oa-lh__div { fill: var(--positive); }
.oa-lh__lump { fill: var(--oa-chart-bar); }
.oa-lh__hold { fill: var(--oa-chart-bar); opacity: 0.42; }
.oa-lh__hold--b { fill: var(--oa-iris); opacity: 0.42; }
.oa-lh__braid { stroke: var(--oa-chart-line); stroke-width: var(--w); opacity: 0.62; }
.oa-lh__track { fill: var(--oa-chart-track); }
.oa-lh__now { fill: var(--oa-chart-bar); }
.oa-ht__anchor {
fill: var(--oa-surface-2);
stroke: var(--oa-chart-line);
stroke-width: 1.5;
}
.oa-ht__anchor-n {
fill: var(--oa-ink-0);
font-family: var(--ff-display);
font-size: 12px;
font-weight: 650;
}
.oa-ht__branchg.is-on .oa-ht__anchor { fill: var(--oa-cobalt); stroke: var(--oa-cobalt); }
.oa-ht__branchg.is-dim { opacity: 0.28; }
.oa-ht__f-n {
grid-area: n;
display: grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: 50%;
border: 1.5px solid var(--oa-chart-line);
color: var(--oa-ink-0);
font-family: var(--ff-display);
font-size: 12px;
font-weight: 650;
}
.oa-ht__finding.is-active .oa-ht__f-n {
background: var(--oa-cobalt);
border-color: var(--oa-cobalt);
color: var(--on-brand);
}
.is-off { display: none; }
.oa-rw--live {
grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.75fr);
grid-template-areas: "search search" "browse browse" "state state" "table drawer" "tray drawer";
align-items: start;
}
.oa-rw--live .oa-rw__search { position: relative; }
.oa-rw__input {
min-width: 0;
flex: 1;
padding: 0;
border: 0;
background: none;
color: var(--oa-ink-0);
font: inherit;
font-size: var(--fs-body-l);
appearance: none;
}
.oa-rw__input::placeholder { color: var(--oa-ink-3); }
.oa-rw__input::-webkit-search-cancel-button { filter: grayscale(1) opacity(.6); }
.oa-rw__input:focus { outline: none; }
.oa-rw--live .oa-rw__search:focus-within {
outline: 3px solid var(--focus);
outline-offset: 2px;
border-color: var(--oa-cobalt);
}
.oa-rw--live .stateregion { grid-area: state; }
.oa-rw__browse { grid-area: browse; display: flex; flex-direction: column; gap: var(--sp-12); }
.oa-rw__seg {
display: flex;
flex-wrap: wrap;
gap: 4px;
align-self: flex-start;
padding: 4px;
background: var(--oa-surface-0);
border: 1px solid var(--oa-line-1);
border-radius: var(--oa-r-control);
}
.oa-rw__segbtn {
position: relative;
min-height: 36px;
padding: 0 var(--sp-16);
border: 0;
border-radius: 9px;
background: none;
color: var(--oa-ink-2);
font: inherit;
font-size: var(--fs-14);
font-weight: 600;
cursor: pointer;
transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.oa-rw__segbtn::before { content: ""; position: absolute; inset: -4px 0; }
.oa-rw__segbtn:hover { color: var(--oa-ink-0); }
.oa-rw__segbtn[aria-pressed="true"] {
background: var(--oa-surface-2);
color: var(--oa-ink-0);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.oa-rw__segbtn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.oa-rw__cats { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.oa-rw__chip {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--sp-8);
min-height: 36px;
padding: 0 var(--sp-12);
border: 1px solid var(--oa-line-1);
border-radius: var(--r-full);
background: var(--oa-surface-1);
color: var(--oa-ink-1);
font: inherit;
font-size: var(--fs-meta);
font-weight: 600;
cursor: pointer;
transition: border-color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard),
color var(--dur-fast) var(--ease-standard);
}
.oa-rw__chip::before { content: ""; position: absolute; inset: -4px 0; }
.oa-rw__chip:hover { border-color: var(--oa-line-2); color: var(--oa-ink-0); }
.oa-rw__chip[aria-pressed="true"] { background: var(--chip); border-color: var(--oa-cobalt); color: var(--oa-ink-0); }
.oa-rw__chip:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.oa-rw__chipn { color: var(--oa-ink-3); font-weight: 500; }
.oa-rw__chip[aria-pressed="true"] .oa-rw__chipn { color: var(--oa-ink-2); }
.oa-rw__table { grid-area: table; display: flex; flex-direction: column; min-width: 0; }
.oa-rw__tools {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-12);
flex-wrap: wrap;
padding-bottom: var(--sp-12);
}
.oa-rw__plan {
display: inline-flex;
gap: 2px;
padding: 3px;
border: 1px solid var(--oa-line-1);
border-radius: 10px;
background: var(--oa-surface-0);
}
.oa-rw__planbtn {
position: relative;
height: 30px;
padding-inline: 11px;
border: 0;
border-radius: 7px;
background: none;
color: var(--oa-ink-2);
font: inherit;
font-size: var(--fs-meta);
font-weight: 620;
cursor: pointer;
}
.oa-rw__planbtn::before { content: ""; position: absolute; inset: -7px 0; }
.oa-rw__planbtn:hover { color: var(--oa-ink-0); }
.oa-rw__planbtn[aria-pressed="true"] { background: var(--oa-surface-2); color: var(--oa-ink-0); }
.oa-rw__planbtn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.oa-rw__shown { color: var(--oa-ink-3); font-size: var(--fs-meta); }
.oa-rw--live .oa-rw__head,
.oa-rw--live .oa-rw__row {
display: grid;
grid-template-columns: minmax(0, 1fr) 64px 64px 64px 44px;
grid-template-areas: none;
column-gap: var(--sp-8);
align-items: center;
}
.oa-rw--live:not(.is-custom) [data-k="rc"],
.oa-rw--live:not(.is-custom) [data-rw-sort="rc"] { display: none; }
.oa-rw--live.is-custom .oa-rw__head,
.oa-rw--live.is-custom .oa-rw__row { grid-template-columns: minmax(0, 1fr) 64px 64px 64px 108px 44px; }
.oa-rw__hsort[data-rw-sort="rc"] { white-space: nowrap; }
.oa-rw__r[data-k="rc"] { color: var(--oa-cobalt); }
:root[data-theme="light"] .oa-rw__r[data-k="rc"] { color: var(--oa-cobalt-hover); }
.oa-rw__custom { flex-basis: 100%; padding: var(--sp-4) 0 0; }
.oa-rw__custom[hidden] { display: none; }
.oa-rw__head {
padding: 0 var(--sp-8) var(--sp-8) var(--sp-12);
border-bottom: 1px solid var(--oa-line-1);
color: var(--oa-ink-3);
font-size: var(--fs-label);
font-weight: var(--fw-label);
letter-spacing: var(--ls-label);
text-transform: uppercase;
}
.oa-rw__hsort {
position: relative;
justify-self: end;
display: inline-flex;
align-items: center;
gap: 4px;
min-height: 32px;
padding: 0 4px;
border: 0;
border-radius: 6px;
background: none;
color: inherit;
font: inherit;
letter-spacing: inherit;
text-transform: inherit;
cursor: pointer;
}
.oa-rw__hsort::before { content: ""; position: absolute; inset: -6px -4px; }
.oa-rw__hsort:hover,
.oa-rw__hsort[aria-pressed="true"] { color: var(--oa-ink-0); }
.oa-rw__hsort:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.oa-rw__hdir {
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid currentColor;
opacity: 0;
}
.oa-rw__hsort[data-rw-dir="desc"] .oa-rw__hdir { opacity: 1; }
.oa-rw__hsort[data-rw-dir="asc"] .oa-rw__hdir { opacity: 1; transform: rotate(180deg); }
.oa-rw--live .oa-rw__list { display: flex; flex-direction: column; }
.oa-rw--live .oa-rw__row {
min-height: 60px;
padding: 0 var(--sp-8) 0 0;
border: 0;
border-top: 1px solid var(--oa-line-0);
border-left: 2px solid transparent;
background: none;
cursor: default;
transition: background-color var(--dur-fast) var(--ease-standard);
}
.oa-rw--live .oa-rw__row:first-child { border-top-color: transparent; }
.oa-rw--live .oa-rw__row:hover { background: var(--chip); }
.oa-rw--live .oa-rw__row.is-active { border-left-color: var(--oa-cobalt); background: var(--chip); }
.oa-rw__open {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "nm" "mt";
justify-items: stretch;
gap: 2px;
min-width: 0;
min-height: 60px;
padding: var(--sp-8) var(--sp-12);
border: 0;
border-radius: 8px;
background: none;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.oa-rw__open:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.oa-rw__open .oa-rw__nm,
.oa-rw__open .oa-rw__mt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oa-rw__r {
justify-self: end;
color: var(--oa-ink-0);
font-size: var(--fs-14);
font-weight: 620;
font-variant-numeric: tabular-nums lining-nums;
}
.oa-rw__pick {
position: relative;
justify-self: end;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 1px solid var(--oa-line-2);
border-radius: 10px;
background: var(--oa-surface-1);
color: var(--oa-ink-1);
font: inherit;
font-size: 18px;
line-height: 1;
cursor: pointer;
transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard),
color var(--dur-fast) var(--ease-standard);
}
.oa-rw__pick::before { content: ""; position: absolute; inset: -4px; }
.oa-rw__pick:hover { border-color: var(--oa-cobalt); color: var(--oa-ink-0); }
.oa-rw__pick[aria-pressed="true"] { background: var(--oa-cobalt); border-color: var(--oa-cobalt); color: #fff; }
.oa-rw__pick:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.oa-rw__more {
align-self: center;
margin-top: var(--sp-12);
min-height: 44px;
padding: 0 var(--sp-24);
border: 1px solid var(--oa-line-2);
border-radius: var(--oa-r-control);
background: var(--oa-surface-1);
color: var(--oa-ink-0);
font: inherit;
font-weight: 600;
cursor: pointer;
}
.oa-rw__more:hover { border-color: var(--oa-cobalt); }
.oa-rw__more:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.oa-rw--live .oa-rw__drawer {
position: sticky;
top: calc(var(--nav-h) + var(--sp-16));
max-height: calc(100dvh - var(--nav-h) - var(--sp-16) * 2);
overflow-y: auto;
scrollbar-width: thin;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), var(--oa-shadow-1);
}
.oa-rw--live .oa-rw__dhead {
position: sticky;
top: 0;
z-index: 1;
display: flex;
flex-direction: column;
gap: var(--sp-8);
margin: calc(-1 * var(--sp-16)) calc(-1 * var(--sp-16)) 0;
padding: var(--sp-16) var(--sp-16) var(--sp-12);
background: inherit;
border-bottom: 1px solid var(--oa-line-0);
}
.oa-rw--live .oa-rw__dhead .oa-rw__actions { margin-top: var(--sp-4); }
:root[data-theme="light"] .oa-rw__drawer {
background: var(--oa-surface-0);
border-color: var(--oa-line-0);
box-shadow: var(--shadow-md);
}
.oa-rw__add[aria-pressed="true"] {
background: var(--chip);
color: var(--oa-ink-0);
border-color: var(--oa-cobalt);
}
.oa-rw__sub { color: var(--oa-ink-2); font-size: var(--fs-meta); }
.oa-rw__charttitle {
margin-top: var(--sp-4);
color: var(--oa-ink-3);
font-size: var(--fs-label);
font-weight: var(--fw-label);
letter-spacing: var(--ls-label);
text-transform: uppercase;
}
.oa-rw__chart { display: block; width: 100%; height: auto; margin-top: var(--sp-8); overflow: visible; }
.oa-rw__baseline { stroke: var(--oa-line-1); stroke-width: 1; }
.oa-rw__barfill { fill: var(--oa-chart-bar); }
.oa-rw__bar.is-neg .oa-rw__barfill { fill: var(--oa-negative); }
.oa-rw__chart text { stroke: none; font-family: var(--ff-body); }
.oa-rw__barval {
fill: var(--oa-ink-0);
font-size: 12.5px;
font-weight: 620;
font-variant-numeric: tabular-nums lining-nums;
}
.oa-rw__barkey { fill: var(--oa-ink-3); font-size: 11px; font-weight: 500; }
.oa-rw__actions { display: flex; align-items: center; gap: var(--sp-12); flex-wrap: wrap; margin-top: var(--sp-8); }
.oa-rw__actions .oa-rw__add { margin-top: 0; }
button.oa-rw__add {
border: 1px solid transparent;
font-family: inherit;
cursor: pointer;
min-height: 44px;
transition: background-color var(--dur-button-hover) var(--ease-standard);
}
button.oa-rw__add:hover:not(:disabled) { background: var(--oa-cobalt-hover); }
button.oa-rw__add:active:not(:disabled) { background: var(--oa-cobalt-pressed); }
button.oa-rw__add:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
button.oa-rw__add:disabled {
background: var(--chip);
color: var(--oa-ink-2);
border-color: var(--oa-line-1);
cursor: default;
}
.oa-rw__absent {
margin: var(--sp-8) 0 0;
color: var(--oa-ink-3);
font-size: var(--fs-meta);
line-height: var(--lh-meta);
}
.oa-rw__tray {
grid-area: tray;
position: sticky;
bottom: var(--sp-16);
z-index: 5;
display: flex;
align-items: center;
gap: var(--sp-12);
flex-wrap: wrap;
padding: var(--sp-12) var(--sp-16);
background: var(--oa-surface-2);
border: 1px solid var(--oa-line-2);
border-radius: var(--oa-r-surface);
box-shadow: var(--shadow-lg);
}
.oa-rw__traylbl { color: var(--oa-ink-0); font-weight: 620; font-size: var(--fs-14); white-space: nowrap; }
.oa-rw__traychips { display: flex; flex-wrap: wrap; gap: var(--sp-8); flex: 1; min-width: 0; }
.oa-rw__trayclear {
min-height: 44px;
padding: 0 var(--sp-12);
border: 0;
border-radius: 8px;
background: none;
color: var(--oa-ink-2);
font: inherit;
font-size: var(--fs-14);
font-weight: 600;
cursor: pointer;
}
.oa-rw__trayclear:hover { color: var(--oa-ink-0); background: var(--oa-surface-3); }
.oa-rw__trayclear:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.oa-rw__traygo { margin-left: auto; }
.oa-rw__traygo[aria-disabled="true"] { opacity: .55; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
.oa-rw__tray:not([hidden]) { animation: oa-rw-tray-in var(--dur-emphasized) var(--ease-standard) both; }
@keyframes oa-rw-tray-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
.oa-sheet {
width: min(1180px, calc(100vw - 32px));
max-width: none;
max-height: calc(100vh - 32px);
margin: auto;
padding: 0;
border: 1px solid var(--oa-line-2);
border-radius: var(--oa-r-plane);
background: var(--oa-surface-1);
color: var(--oa-ink-0);
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.oa-sheet[open] { display: flex; flex-direction: column; }
.oa-sheet::backdrop { background: rgba(6, 9, 16, .62); }
:root[data-theme="light"] .oa-sheet::backdrop { background: rgba(17, 22, 31, .42); }
.oa-sheet__head {
display: flex;
align-items: center;
gap: var(--sp-16);
padding: var(--sp-16) var(--sp-24);
border-bottom: 1px solid var(--oa-line-1);
background: var(--oa-surface-2);
}
.oa-sheet__id { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.oa-sheet__title {
margin: 0;
font-family: var(--ff-display);
font-size: 20px;
font-weight: 650;
letter-spacing: -0.01em;
color: var(--oa-ink-0);
}
.oa-sheet__link { font-size: var(--fs-14); white-space: nowrap; }
.oa-sheet__close {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid var(--oa-line-2);
border-radius: var(--r-12);
background: var(--oa-surface-1);
color: var(--oa-ink-1);
font: inherit;
font-size: 22px;
line-height: 1;
cursor: pointer;
}
.oa-sheet__close::before { content: ""; position: absolute; inset: -4px; }
.oa-sheet__close:hover { color: var(--oa-ink-0); border-color: var(--oa-cobalt); }
.oa-sheet__close:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.oa-sheet__body { overflow-y: auto; padding: var(--sp-24); overscroll-behavior: contain; }
.oa-sheet__body .oa-fig { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
.oa-sheet[open] { animation: oa-sheet-in var(--dur-emphasized) var(--ease-standard); }
.oa-sheet[open]::backdrop { animation: oa-sheet-fade var(--dur-standard) linear; }
@keyframes oa-sheet-in { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes oa-sheet-fade { from { opacity: 0; } to { opacity: 1; } }
}
@media (max-width: 720px) {
.oa-sheet { inset: 0; width: auto; height: auto; max-width: none; max-height: none; margin: 0; border: 0; border-radius: 0; }
.oa-sheet__head { padding: var(--sp-12) var(--sp-16); }
.oa-sheet__link { display: none; }
.oa-sheet__body { padding: var(--sp-16); }
}
@media (max-width: 900px) {
.oa-rw--live {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "search" "browse" "state" "table" "drawer" "tray";
}
.oa-rw--live .oa-rw__drawer { position: static; max-height: none; overflow: visible; }
.oa-rw--live .oa-rw__dhead { position: static; }
.oa-rw--live .oa-rw__head,
.oa-rw--live .oa-rw__row,
.oa-rw--live.is-custom .oa-rw__head,
.oa-rw--live.is-custom .oa-rw__row { grid-template-columns: minmax(0, 1fr) 72px 44px; }
.oa-rw__r[data-k="r1"],
.oa-rw__r[data-k="r5"],
.oa-rw__hsort[data-rw-sort="r1"],
.oa-rw__hsort[data-rw-sort="r5"] { display: none; }
.oa-rw--live.is-custom .oa-rw__r[data-k="r3"],
.oa-rw--live.is-custom .oa-rw__hsort[data-rw-sort="r3"] { display: none; }
}