/* Canonical OKOA web CSS from okoa-design-mcp. Do not edit. */ /* OKOA Design System — all-variant theme picker stylesheet — bundle v2.0.0 Set to switch themes. */ :root { --okoa-backdrop-blur: saturate(180%) blur(8px); --okoa-bp-lg: 1024px; --okoa-bp-md: 768px; --okoa-bp-sm: 640px; --okoa-bp-xl: 1280px; --okoa-bp-xs: 0px; --okoa-bp-xxl: 1536px; --okoa-button-padding-x: 16px; --okoa-container-lg: 1024px; --okoa-container-md: 768px; --okoa-container-prose: 680px; --okoa-container-sm: 640px; --okoa-container-xl: 1200px; --okoa-control-height: 40px; --okoa-control-radius: 2px; --okoa-density-comfortable-control-height: 40px; --okoa-density-comfortable-gap: 12px; --okoa-density-comfortable-row-height: 44px; --okoa-density-compact-control-height: 32px; --okoa-density-compact-gap: 8px; --okoa-density-compact-row-height: 32px; --okoa-disabled-opacity: 0.4; --okoa-ease-in: cubic-bezier(0.4, 0, 1, 1); --okoa-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --okoa-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --okoa-ease-standard: cubic-bezier(0.2, 0, 0, 1); --okoa-elevation-hover: 0 4px 12px rgba(0, 0, 0, 0.08); --okoa-elevation-overlay: 0 12px 32px rgba(0, 0, 0, 0.12); --okoa-focus-ring-offset: 2px; --okoa-focus-ring-width: 2px; --okoa-grid-letter-columns: 16; --okoa-grid-letter-gutter: 8mm; --okoa-grid-letter-margin: 20mm; --okoa-grid-letter-page-height: 279mm; --okoa-grid-letter-page-width: 216mm; --okoa-grid-slide-columns: 12; --okoa-grid-slide-gutter: 4mm; --okoa-grid-slide-margin: 15mm; --okoa-grid-slide-page-height: 143mm; --okoa-grid-slide-page-width: 254mm; --okoa-hit-slop: 8px; --okoa-motion-default: 220ms; --okoa-motion-deliberate: 560ms; --okoa-motion-fast: 120ms; --okoa-motion-instant: 0ms; --okoa-motion-slow: 380ms; --okoa-motion-stagger: 40ms; --okoa-press-scale: 0.98; --okoa-radii-md: 4px; --okoa-radii-none: 0; --okoa-radii-pill: 9999px; --okoa-radii-sm: 2px; --okoa-rules-default: 1pt; --okoa-rules-emphasis: 1.2pt; --okoa-rules-hairline: 0.5pt; --okoa-scrim: rgba(0, 0, 0, 0.40); --okoa-sp-0: 0mm; --okoa-sp-1: 1mm; --okoa-sp-13: 13mm; --okoa-sp-2: 2mm; --okoa-sp-21: 21mm; --okoa-sp-3: 3mm; --okoa-sp-5: 5mm; --okoa-sp-8: 8mm; --okoa-space-0: 0; --okoa-space-1: 4px; --okoa-space-10: 64px; --okoa-space-2: 8px; --okoa-space-3: 12px; --okoa-space-4: 16px; --okoa-space-5: 24px; --okoa-space-6: 32px; --okoa-space-8: 48px; --okoa-touch-target-comfortable: 48px; --okoa-touch-target-min: 44px; --okoa-type-body-leading: 12pt; --okoa-type-body-size: 9pt; --okoa-type-body-strong-leading: 12pt; --okoa-type-body-strong-size: 9pt; --okoa-type-body-strong-weight: 650; --okoa-type-body-weight: 425; --okoa-type-caption-leading: 9pt; --okoa-type-caption-size: 7pt; --okoa-type-caption-weight: 450; --okoa-type-display-lg-leading: 72pt; --okoa-type-display-lg-size: 64pt; --okoa-type-display-lg-weight: 220; --okoa-type-display-md-leading: 54pt; --okoa-type-display-md-size: 48pt; --okoa-type-display-md-weight: 250; --okoa-type-display-sm-leading: 36pt; --okoa-type-display-sm-size: 32pt; --okoa-type-display-sm-weight: 250; --okoa-type-label-leading: 9pt; --okoa-type-label-size: 8pt; --okoa-type-label-weight: 600; --okoa-type-subhead-leading: 15pt; --okoa-type-subhead-size: 12pt; --okoa-type-subhead-weight: 650; --okoa-type-table-cell-leading: 9pt; --okoa-type-table-cell-size: 8pt; --okoa-type-table-cell-weight: 425; --okoa-type-table-header-leading: 9pt; --okoa-type-table-header-size: 8pt; --okoa-type-table-header-weight: 650; --okoa-type-title-leading: 24pt; --okoa-type-title-size: 20pt; --okoa-type-title-weight: 350; --okoa-z-base: 0; --okoa-z-modal: 1100; --okoa-z-overlay: 1000; --okoa-z-raised: 10; --okoa-z-sticky: 100; --okoa-z-toast: 1200; --okoa-z-tooltip: 1300; } :root, [data-style="ridgeline"] { --okoa-component-chrome-accent-rule: #FF795E; --okoa-component-chrome-breadcrumb: #6B6B6B; --okoa-component-chrome-footer-bg: #465D53; --okoa-component-chrome-footer-text: #FEFEFE; --okoa-component-chrome-page-number: #FEFEFE; --okoa-component-metric-label: #6B6B6B; --okoa-component-metric-rule: #D4D4D4; --okoa-component-metric-value: #3C3C3C; --okoa-component-table-header-bg: #465D53; --okoa-component-table-header-text: #FEFEFE; --okoa-component-table-rule: #D4D4D4; --okoa-component-table-total-rule: #3C3C3C; --okoa-focus-ring-color: #465D53; --okoa-semantic-border-accent: #FF795E; --okoa-semantic-border-default: #D4D4D4; --okoa-semantic-border-strong: #3C3C3C; --okoa-semantic-entity-primary: #465D53; --okoa-semantic-entity-secondary-a: #678CA7; --okoa-semantic-entity-secondary-b: #104473; --okoa-semantic-fg-accent: #FF795E; --okoa-semantic-fg-on-dark: #FEFEFE; --okoa-semantic-fg1: #3C3C3C; --okoa-semantic-fg2: #6B6B6B; --okoa-semantic-fg3: #757575; --okoa-semantic-surface-alt: #F0ECE9; --okoa-semantic-surface-chrome: #465D53; --okoa-semantic-surface-default: #FEFEFE; --okoa-semantic-surface-warm: #F5EEE4; --okoa-signal-caution: #8A6B22; --okoa-signal-caution-surface: #FDF8EF; --okoa-signal-info: #3A6480; --okoa-signal-info-surface: #EFF5FA; --okoa-signal-pass: #2D5E33; --okoa-signal-pass-surface: #F0FAF2; --okoa-signal-risk: #7A2E26; --okoa-signal-risk-surface: #FAF0F0; } [data-style="stillness"] { --okoa-component-chrome-accent-rule: #3D4F6F; --okoa-component-chrome-breadcrumb: #4A4A45; --okoa-component-chrome-footer-bg: #1A1A18; --okoa-component-chrome-footer-text: #F7F5F2; --okoa-component-chrome-page-number: #F7F5F2; --okoa-component-metric-label: #4A4A45; --okoa-component-metric-rule: #E0DDD8; --okoa-component-metric-value: #1A1A18; --okoa-component-table-header-bg: #1A1A18; --okoa-component-table-header-text: #F7F5F2; --okoa-component-table-rule: #E0DDD8; --okoa-component-table-total-rule: #1A1A18; --okoa-focus-ring-color: #1A1A18; --okoa-semantic-border-accent: #3D4F6F; --okoa-semantic-border-default: #E0DDD8; --okoa-semantic-border-strong: #1A1A18; --okoa-semantic-entity-primary: #1A1A18; --okoa-semantic-entity-secondary-a: #3D4F6F; --okoa-semantic-entity-secondary-b: #8B7355; --okoa-semantic-fg-accent: #3D4F6F; --okoa-semantic-fg-on-dark: #F7F5F2; --okoa-semantic-fg1: #1A1A18; --okoa-semantic-fg2: #4A4A45; --okoa-semantic-fg3: #6E6E66; --okoa-semantic-surface-alt: #EDEDEA; --okoa-semantic-surface-chrome: #1A1A18; --okoa-semantic-surface-default: #F7F5F2; --okoa-semantic-surface-warm: #FEFEFE; --okoa-signal-caution: #8A6B22; --okoa-signal-caution-surface: #FDF8EF; --okoa-signal-info: #3D4F6F; --okoa-signal-info-surface: #EDEDEA; --okoa-signal-pass: #2D5E33; --okoa-signal-pass-surface: #F0FAF2; --okoa-signal-risk: #7A2E26; --okoa-signal-risk-surface: #FAF0F0; } [data-style="voltage"] { --okoa-component-chrome-accent-rule: #00E676; --okoa-component-chrome-breadcrumb: #A0A0AF; --okoa-component-chrome-footer-bg: #1C1C28; --okoa-component-chrome-footer-text: #F0F0F5; --okoa-component-chrome-page-number: #F0F0F5; --okoa-component-metric-label: #A0A0AF; --okoa-component-metric-rule: #2A2A38; --okoa-component-metric-value: #F0F0F5; --okoa-component-table-header-bg: #1C1C28; --okoa-component-table-header-text: #F0F0F5; --okoa-component-table-rule: #2A2A38; --okoa-component-table-total-rule: #6B6B7A; --okoa-focus-ring-color: #00E676; --okoa-semantic-border-accent: #00E676; --okoa-semantic-border-default: #2A2A38; --okoa-semantic-border-strong: #6B6B7A; --okoa-semantic-entity-primary: #00E676; --okoa-semantic-entity-secondary-a: #00BCD4; --okoa-semantic-entity-secondary-b: #FFD740; --okoa-semantic-fg-accent: #00E676; --okoa-semantic-fg-on-dark: #F0F0F5; --okoa-semantic-fg1: #F0F0F5; --okoa-semantic-fg2: #A0A0AF; --okoa-semantic-fg3: #7A7A8A; --okoa-semantic-surface-alt: #2A2A38; --okoa-semantic-surface-chrome: #1C1C28; --okoa-semantic-surface-default: #0C0C14; --okoa-semantic-surface-warm: #1C1C28; --okoa-signal-caution: #FFD740; --okoa-signal-caution-surface: #1C1C10; --okoa-signal-info: #00BCD4; --okoa-signal-info-surface: #0C1C1C; --okoa-signal-pass: #00E676; --okoa-signal-pass-surface: #0C1C14; --okoa-signal-risk: #FF5252; --okoa-signal-risk-surface: #1C1018; } [data-style="japandi-dark"] { --okoa-component-chrome-accent-rule: #58A6FF; --okoa-component-chrome-breadcrumb: #8B949E; --okoa-component-chrome-footer-bg: #161B22; --okoa-component-chrome-footer-text: #F0F6FC; --okoa-component-chrome-page-number: #F0F6FC; --okoa-component-metric-label: #8B949E; --okoa-component-metric-rule: #30363D; --okoa-component-metric-value: #F0F6FC; --okoa-component-table-header-bg: #161B22; --okoa-component-table-header-text: #F0F6FC; --okoa-component-table-rule: #30363D; --okoa-component-table-total-rule: #3C3C3C; --okoa-focus-ring-color: #58A6FF; --okoa-semantic-border-accent: #58A6FF; --okoa-semantic-border-default: #30363D; --okoa-semantic-border-strong: #3C3C3C; --okoa-semantic-entity-primary: #58A6FF; --okoa-semantic-entity-secondary-a: #3FB950; --okoa-semantic-entity-secondary-b: #E3B341; --okoa-semantic-fg-accent: #58A6FF; --okoa-semantic-fg-on-dark: #F0F6FC; --okoa-semantic-fg1: #F0F6FC; --okoa-semantic-fg2: #8B949E; --okoa-semantic-fg3: #7D8590; --okoa-semantic-surface-alt: #21262D; --okoa-semantic-surface-chrome: #161B22; --okoa-semantic-surface-default: #0D1117; --okoa-semantic-surface-warm: #161B22; --okoa-signal-caution: #E3B341; --okoa-signal-caution-surface: #1A1810; --okoa-signal-info: #58A6FF; --okoa-signal-info-surface: #0D1520; --okoa-signal-pass: #3FB950; --okoa-signal-pass-surface: #0D1A14; --okoa-signal-risk: #FF7B72; --okoa-signal-risk-surface: #1C1214; } [data-style="japandi-warm"] { --okoa-component-chrome-accent-rule: #7A6B52; --okoa-component-chrome-breadcrumb: #7A6B52; --okoa-component-chrome-footer-bg: #5A4F3D; --okoa-component-chrome-footer-text: #F8F6F1; --okoa-component-chrome-page-number: #F8F6F1; --okoa-component-metric-label: #7A6B52; --okoa-component-metric-rule: #E5DFD2; --okoa-component-metric-value: #5A4F3D; --okoa-component-table-header-bg: #5A4F3D; --okoa-component-table-header-text: #F8F6F1; --okoa-component-table-rule: #E5DFD2; --okoa-component-table-total-rule: #3C3C3C; --okoa-focus-ring-color: #5C6655; --okoa-semantic-border-accent: #7A6B52; --okoa-semantic-border-default: #E5DFD2; --okoa-semantic-border-strong: #3C3C3C; --okoa-semantic-entity-primary: #5C6655; --okoa-semantic-entity-secondary-a: #9FAA93; --okoa-semantic-entity-secondary-b: #786357; --okoa-semantic-fg-accent: #7A6B52; --okoa-semantic-fg-on-dark: #F8F6F1; --okoa-semantic-fg1: #5A4F3D; --okoa-semantic-fg2: #7A6B52; --okoa-semantic-fg3: #786357; --okoa-semantic-surface-alt: #EDE8DF; --okoa-semantic-surface-chrome: #5A4F3D; --okoa-semantic-surface-default: #F8F6F1; --okoa-semantic-surface-warm: #F3F0E8; --okoa-signal-caution: #8A6B22; --okoa-signal-caution-surface: #FDF8EF; --okoa-signal-info: #3A6480; --okoa-signal-info-surface: #EFF5FA; --okoa-signal-pass: #2D5E33; --okoa-signal-pass-surface: #F0FAF2; --okoa-signal-risk: #7A2E26; --okoa-signal-risk-surface: #FAF0F0; } [data-style="japandi-sage"] { --okoa-component-chrome-accent-rule: #5C6655; --okoa-component-chrome-breadcrumb: #5C6655; --okoa-component-chrome-footer-bg: #434B3F; --okoa-component-chrome-footer-text: #F7F8F6; --okoa-component-chrome-page-number: #F7F8F6; --okoa-component-metric-label: #5C6655; --okoa-component-metric-rule: #DDE1D8; --okoa-component-metric-value: #434B3F; --okoa-component-table-header-bg: #434B3F; --okoa-component-table-header-text: #F7F8F6; --okoa-component-table-rule: #DDE1D8; --okoa-component-table-total-rule: #3C3C3C; --okoa-focus-ring-color: #5C6655; --okoa-semantic-border-accent: #5C6655; --okoa-semantic-border-default: #DDE1D8; --okoa-semantic-border-strong: #3C3C3C; --okoa-semantic-entity-primary: #5C6655; --okoa-semantic-entity-secondary-a: #7A8470; --okoa-semantic-entity-secondary-b: #687260; --okoa-semantic-fg-accent: #5C6655; --okoa-semantic-fg-on-dark: #F7F8F6; --okoa-semantic-fg1: #434B3F; --okoa-semantic-fg2: #5C6655; --okoa-semantic-fg3: #687260; --okoa-semantic-surface-alt: #E8EBE4; --okoa-semantic-surface-chrome: #434B3F; --okoa-semantic-surface-default: #F7F8F6; --okoa-semantic-surface-warm: #F0F2ED; --okoa-signal-caution: #8A6B22; --okoa-signal-caution-surface: #FDF8EF; --okoa-signal-info: #3A6480; --okoa-signal-info-surface: #EFF5FA; --okoa-signal-pass: #2D5E33; --okoa-signal-pass-surface: #F0FAF2; --okoa-signal-risk: #7A2E26; --okoa-signal-risk-surface: #FAF0F0; } [data-style="japandi-mauve"] { --okoa-component-chrome-accent-rule: #786357; --okoa-component-chrome-breadcrumb: #786357; --okoa-component-chrome-footer-bg: #5D4E45; --okoa-component-chrome-footer-text: #F8F5F4; --okoa-component-chrome-page-number: #F8F5F4; --okoa-component-metric-label: #786357; --okoa-component-metric-rule: #E6D9D1; --okoa-component-metric-value: #5D4E45; --okoa-component-table-header-bg: #5D4E45; --okoa-component-table-header-text: #F8F5F4; --okoa-component-table-rule: #E6D9D1; --okoa-component-table-total-rule: #3C3C3C; --okoa-focus-ring-color: #786357; --okoa-semantic-border-accent: #786357; --okoa-semantic-border-default: #E6D9D1; --okoa-semantic-border-strong: #3C3C3C; --okoa-semantic-entity-primary: #786357; --okoa-semantic-entity-secondary-a: #806A5A; --okoa-semantic-entity-secondary-b: #957E6E; --okoa-semantic-fg-accent: #786357; --okoa-semantic-fg-on-dark: #F8F5F4; --okoa-semantic-fg1: #5D4E45; --okoa-semantic-fg2: #786357; --okoa-semantic-fg3: #806A5A; --okoa-semantic-surface-alt: #EDE5DF; --okoa-semantic-surface-chrome: #5D4E45; --okoa-semantic-surface-default: #F8F5F4; --okoa-semantic-surface-warm: #F2EDE9; --okoa-signal-caution: #8A6B22; --okoa-signal-caution-surface: #FDF8EF; --okoa-signal-info: #3A6480; --okoa-signal-info-surface: #EFF5FA; --okoa-signal-pass: #2D5E33; --okoa-signal-pass-surface: #F0FAF2; --okoa-signal-risk: #7A2E26; --okoa-signal-risk-surface: #FAF0F0; } [data-style="japandi-ocean"] { --okoa-component-chrome-accent-rule: #5F6B72; --okoa-component-chrome-breadcrumb: #5F6B72; --okoa-component-chrome-footer-bg: #475159; --okoa-component-chrome-footer-text: #F6F7F8; --okoa-component-chrome-page-number: #F6F7F8; --okoa-component-metric-label: #5F6B72; --okoa-component-metric-rule: #D8DCDF; --okoa-component-metric-value: #475159; --okoa-component-table-header-bg: #475159; --okoa-component-table-header-text: #F6F7F8; --okoa-component-table-rule: #D8DCDF; --okoa-component-table-total-rule: #3C3C3C; --okoa-focus-ring-color: #475159; --okoa-semantic-border-accent: #5F6B72; --okoa-semantic-border-default: #D8DCDF; --okoa-semantic-border-strong: #3C3C3C; --okoa-semantic-entity-primary: #475159; --okoa-semantic-entity-secondary-a: #667078; --okoa-semantic-entity-secondary-b: #5F6B72; --okoa-semantic-fg-accent: #5F6B72; --okoa-semantic-fg-on-dark: #F6F7F8; --okoa-semantic-fg1: #475159; --okoa-semantic-fg2: #5F6B72; --okoa-semantic-fg3: #667078; --okoa-semantic-surface-alt: #E5E8EA; --okoa-semantic-surface-chrome: #475159; --okoa-semantic-surface-default: #F6F7F8; --okoa-semantic-surface-warm: #EFF1F2; --okoa-signal-caution: #8A6B22; --okoa-signal-caution-surface: #FDF8EF; --okoa-signal-info: #3A6480; --okoa-signal-info-surface: #EFF5FA; --okoa-signal-pass: #2D5E33; --okoa-signal-pass-surface: #F0FAF2; --okoa-signal-risk: #7A2E26; --okoa-signal-risk-surface: #FAF0F0; } [data-style="nordic-tech"] { --okoa-component-chrome-accent-rule: #202124; --okoa-component-chrome-breadcrumb: #3C4043; --okoa-component-chrome-footer-bg: #0F0F10; --okoa-component-chrome-footer-text: #FEFEFE; --okoa-component-chrome-page-number: #FEFEFE; --okoa-component-metric-label: #3C4043; --okoa-component-metric-rule: #E8EAED; --okoa-component-metric-value: #0F0F10; --okoa-component-table-header-bg: #0F0F10; --okoa-component-table-header-text: #FEFEFE; --okoa-component-table-rule: #E8EAED; --okoa-component-table-total-rule: #3C3C3C; --okoa-focus-ring-color: #0F0F10; --okoa-semantic-border-accent: #202124; --okoa-semantic-border-default: #E8EAED; --okoa-semantic-border-strong: #3C3C3C; --okoa-semantic-entity-primary: #0F0F10; --okoa-semantic-entity-secondary-a: #5F6368; --okoa-semantic-entity-secondary-b: #3C4043; --okoa-semantic-fg-accent: #202124; --okoa-semantic-fg-on-dark: #FEFEFE; --okoa-semantic-fg1: #0F0F10; --okoa-semantic-fg2: #3C4043; --okoa-semantic-fg3: #5F6368; --okoa-semantic-surface-alt: #F1F3F4; --okoa-semantic-surface-chrome: #0F0F10; --okoa-semantic-surface-default: #FEFEFE; --okoa-semantic-surface-warm: #F8F9FA; --okoa-signal-caution: #8A6B22; --okoa-signal-caution-surface: #FDF8EF; --okoa-signal-info: #3A6480; --okoa-signal-info-surface: #EFF5FA; --okoa-signal-pass: #2D5E33; --okoa-signal-pass-surface: #F0FAF2; --okoa-signal-risk: #7A2E26; --okoa-signal-risk-surface: #FAF0F0; } [data-style="studio-nordost"] { --okoa-component-chrome-accent-rule: #212121; --okoa-component-chrome-breadcrumb: #424242; --okoa-component-chrome-footer-bg: #121212; --okoa-component-chrome-footer-text: #FAFAFA; --okoa-component-chrome-page-number: #FAFAFA; --okoa-component-metric-label: #424242; --okoa-component-metric-rule: #E0E0E0; --okoa-component-metric-value: #121212; --okoa-component-table-header-bg: #121212; --okoa-component-table-header-text: #FAFAFA; --okoa-component-table-rule: #E0E0E0; --okoa-component-table-total-rule: #3C3C3C; --okoa-focus-ring-color: #121212; --okoa-semantic-border-accent: #212121; --okoa-semantic-border-default: #E0E0E0; --okoa-semantic-border-strong: #3C3C3C; --okoa-semantic-entity-primary: #121212; --okoa-semantic-entity-secondary-a: #757575; --okoa-semantic-entity-secondary-b: #424242; --okoa-semantic-fg-accent: #212121; --okoa-semantic-fg-on-dark: #FAFAFA; --okoa-semantic-fg1: #121212; --okoa-semantic-fg2: #424242; --okoa-semantic-fg3: #707070; --okoa-semantic-surface-alt: #EEEEEE; --okoa-semantic-surface-chrome: #121212; --okoa-semantic-surface-default: #FAFAFA; --okoa-semantic-surface-warm: #F5F5F5; --okoa-signal-caution: #8A6B22; --okoa-signal-caution-surface: #FDF8EF; --okoa-signal-info: #3A6480; --okoa-signal-info-surface: #EFF5FA; --okoa-signal-pass: #2D5E33; --okoa-signal-pass-surface: #F0FAF2; --okoa-signal-risk: #7A2E26; --okoa-signal-risk-surface: #FAF0F0; } [data-style="datum-tech"] { --okoa-component-chrome-accent-rule: #1A1A1A; --okoa-component-chrome-breadcrumb: #282828; --okoa-component-chrome-footer-bg: #0A0A0A; --okoa-component-chrome-footer-text: #F6F6F6; --okoa-component-chrome-page-number: #F6F6F6; --okoa-component-metric-label: #282828; --okoa-component-metric-rule: #D4D4D4; --okoa-component-metric-value: #0A0A0A; --okoa-component-table-header-bg: #0A0A0A; --okoa-component-table-header-text: #F6F6F6; --okoa-component-table-rule: #D4D4D4; --okoa-component-table-total-rule: #3C3C3C; --okoa-focus-ring-color: #0A0A0A; --okoa-semantic-border-accent: #1A1A1A; --okoa-semantic-border-default: #D4D4D4; --okoa-semantic-border-strong: #3C3C3C; --okoa-semantic-entity-primary: #0A0A0A; --okoa-semantic-entity-secondary-a: #6A6A6A; --okoa-semantic-entity-secondary-b: #282828; --okoa-semantic-fg-accent: #1A1A1A; --okoa-semantic-fg-on-dark: #F6F6F6; --okoa-semantic-fg1: #0A0A0A; --okoa-semantic-fg2: #282828; --okoa-semantic-fg3: #6A6A6A; --okoa-semantic-surface-alt: #E8E8E8; --okoa-semantic-surface-chrome: #0A0A0A; --okoa-semantic-surface-default: #F6F6F6; --okoa-semantic-surface-warm: #F0F0F0; --okoa-signal-caution: #8A6B22; --okoa-signal-caution-surface: #FDF8EF; --okoa-signal-info: #3A6480; --okoa-signal-info-surface: #EFF5FA; --okoa-signal-pass: #2D5E33; --okoa-signal-pass-surface: #F0FAF2; --okoa-signal-risk: #7A2E26; --okoa-signal-risk-surface: #FAF0F0; } [data-style="shibuya-light"] { --okoa-component-chrome-accent-rule: #4A90E2; --okoa-component-chrome-breadcrumb: #2C3E50; --okoa-component-chrome-footer-bg: #0D1117; --okoa-component-chrome-footer-text: #FDFDFE; --okoa-component-chrome-page-number: #FDFDFE; --okoa-component-metric-label: #2C3E50; --okoa-component-metric-rule: #E9ECEF; --okoa-component-metric-value: #0D1117; --okoa-component-table-header-bg: #0D1117; --okoa-component-table-header-text: #FDFDFE; --okoa-component-table-rule: #E9ECEF; --okoa-component-table-total-rule: #3C3C3C; --okoa-focus-ring-color: #4A90E2; --okoa-semantic-border-accent: #4A90E2; --okoa-semantic-border-default: #E9ECEF; --okoa-semantic-border-strong: #3C3C3C; --okoa-semantic-entity-primary: #4A90E2; --okoa-semantic-entity-secondary-a: #2C3E50; --okoa-semantic-entity-secondary-b: #FF6B6B; --okoa-semantic-fg-accent: #4A90E2; --okoa-semantic-fg-on-dark: #FDFDFE; --okoa-semantic-fg1: #0D1117; --okoa-semantic-fg2: #2C3E50; --okoa-semantic-fg3: #6C747C; --okoa-semantic-surface-alt: #F4F6F8; --okoa-semantic-surface-chrome: #0D1117; --okoa-semantic-surface-default: #FDFDFE; --okoa-semantic-surface-warm: #F9FAFB; --okoa-signal-caution: #8A6B22; --okoa-signal-caution-surface: #FDF8EF; --okoa-signal-info: #3A6480; --okoa-signal-info-surface: #EFF5FA; --okoa-signal-pass: #2D5E33; --okoa-signal-pass-surface: #F0FAF2; --okoa-signal-risk: #B03030; --okoa-signal-risk-surface: #FFF0F0; } [data-style="art-of-zen"] { --okoa-component-chrome-accent-rule: #606C5A; --okoa-component-chrome-breadcrumb: #606C5A; --okoa-component-chrome-footer-bg: #5E5E5E; --okoa-component-chrome-footer-text: #F3F0E8; --okoa-component-chrome-page-number: #F3F0E8; --okoa-component-metric-label: #606C5A; --okoa-component-metric-rule: #DFCABA; --okoa-component-metric-value: #5E5E5E; --okoa-component-table-header-bg: #5E5E5E; --okoa-component-table-header-text: #F3F0E8; --okoa-component-table-rule: #DFCABA; --okoa-component-table-total-rule: #3C3C3C; --okoa-focus-ring-color: #606C5A; --okoa-semantic-border-accent: #606C5A; --okoa-semantic-border-default: #DFCABA; --okoa-semantic-border-strong: #3C3C3C; --okoa-semantic-entity-primary: #606C5A; --okoa-semantic-entity-secondary-a: #B9B99D; --okoa-semantic-entity-secondary-b: #8F837A; --okoa-semantic-fg-accent: #606C5A; --okoa-semantic-fg-on-dark: #F3F0E8; --okoa-semantic-fg1: #5E5E5E; --okoa-semantic-fg2: #606C5A; --okoa-semantic-fg3: #706860; --okoa-semantic-surface-alt: #E0CFC3; --okoa-semantic-surface-chrome: #5E5E5E; --okoa-semantic-surface-default: #F3F0E8; --okoa-semantic-surface-warm: #E6E4E0; --okoa-signal-caution: #8A6B22; --okoa-signal-caution-surface: #FDF8EF; --okoa-signal-info: #3A6480; --okoa-signal-info-surface: #EFF5FA; --okoa-signal-pass: #2D5E33; --okoa-signal-pass-surface: #F0FAF2; --okoa-signal-risk: #7A2E26; --okoa-signal-risk-surface: #FAF0F0; } /* ── Named choreography (OKOA motion set) ───────────────────────────── */ @keyframes okoa-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes okoa-fade-in-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes okoa-slide-in-right { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } } @keyframes okoa-reveal { from { opacity: 0; } to { opacity: 1; } } @keyframes okoa-shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } } /* Entrance utilities — each maps to a communicative purpose. */ .okoa-fade-in { animation: okoa-fade-in var(--okoa-motion-default) var(--okoa-ease-out) both; } .okoa-fade-in-up { animation: okoa-fade-in-up var(--okoa-motion-default) var(--okoa-ease-out) both; } .okoa-slide-in-right { animation: okoa-slide-in-right var(--okoa-motion-slow) var(--okoa-ease-out) both; } .okoa-skeleton { background: linear-gradient(90deg, var(--okoa-semantic-surface-alt) 25%, var(--okoa-semantic-surface-warm) 37%, var(--okoa-semantic-surface-alt) 63%); background-size: 400% 100%; animation: okoa-shimmer 1200ms var(--okoa-ease-in-out) infinite; } /* ── Interaction: focus ring (never removed) + press feedback ───────── */ :where(a, button, [role="button"], input, select, textarea, [tabindex]):focus-visible { outline: var(--okoa-focus-ring-width) var(--okoa-focus-ring-color) solid; outline-offset: var(--okoa-focus-ring-offset); } :where(button, [role="button"]):active { transform: scale(var(--okoa-press-scale)); } :where([disabled], [aria-disabled="true"]) { opacity: var(--okoa-disabled-opacity); cursor: not-allowed; } /* ── Elevation: borders over shadows (hover-only) ───────────────────── */ .okoa-card { border: 1px solid var(--okoa-semantic-border-default); box-shadow: none; transition: border-color var(--okoa-motion-fast) var(--okoa-ease-out), box-shadow var(--okoa-motion-fast) var(--okoa-ease-out); } .okoa-card:hover { border-color: var(--okoa-focus-ring-color); box-shadow: var(--okoa-elevation-hover); } /* ── Accessibility: honor reduced motion (required) ─────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } :root{--serif:'Cormorant Garamond',Georgia,serif;--sans:'Inter','Helvetica Neue',Arial,sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace; --gut:clamp(1.25rem,5vw,4.5rem);--maxw:1320px;--ink:var(--okoa-semantic-fg1);--coral:var(--okoa-semantic-border-accent);--rule:color-mix(in srgb,var(--okoa-semantic-fg1) 12%,transparent);--btn-h:46px;--head-fs:.72rem;--head-h:76px;--pick-w:11.5rem;--logo-h:1.45rem;} *,*::before,*::after{box-sizing:border-box;} html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;} body{margin:0;font-family:var(--sans);font-size:1.0625rem;line-height:1.6;color:var(--ink);background:var(--okoa-semantic-surface-default); transition:background-color .4s var(--okoa-ease-out),color .4s var(--okoa-ease-out);overflow-x:hidden;} a{color:inherit;text-decoration:none;}p{margin:0;} .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);} .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut);} .mono{font-family:var(--mono);} /* ── type system: an oversized Cormorant wall replaces the divider ── */ .dxl{font-family:var(--serif);font-weight:500;font-size:clamp(3.1rem,1.4rem + 7.4vw,7.5rem);line-height:0.94;letter-spacing:-0.022em;} .dl{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,1.35rem + 2.3vw,3.5rem);line-height:1.0;letter-spacing:-0.016em;} .lead{font-size:clamp(1.15rem,1.02rem + 0.7vw,1.5rem);line-height:1.5;color:var(--okoa-semantic-fg2);max-width:34rem;} .kick{font-family:var(--mono);font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--okoa-semantic-fg2);display:inline-flex;align-items:center;gap:.7rem;} .kick::before{content:"";width:9px;height:9px;border:1.6px solid var(--coral);border-radius:50%;flex:none;} .ac{color:var(--coral);font-style:normal;} /* the accent lives in the periods */ /* ── reveal (reduced-motion safe) ── */ .r{opacity:0;transform:translateY(16px);} html.js .r{transition:opacity .7s var(--okoa-ease-out),transform .7s var(--okoa-ease-out);} html.js .r.in{opacity:1;transform:none;} .lines span{display:block;} html.js .lines .ln>span{opacity:0;transform:translateY(.36em);transition:opacity .8s var(--okoa-ease-out),transform .8s var(--okoa-ease-out);} html.js .lines.in .ln>span{opacity:1;transform:none;} html.js .lines.in .ln:nth-child(2)>span{transition-delay:.1s;} /* ── header ── */ .head{position:sticky;top:0;z-index:var(--okoa-z-sticky);background:color-mix(in srgb,var(--okoa-semantic-surface-default) 84%,transparent);backdrop-filter:var(--okoa-backdrop-blur);} .head .wrap{display:flex;align-items:center;justify-content:space-between;gap:clamp(.85rem,2vw,2.2rem);min-height:var(--head-h);} .head.scr{border-bottom:1px solid var(--rule);} .brand{flex:none;}.brand .logo{height:var(--logo-h);width:auto;display:block;color:var(--ink);} .nav{display:flex;align-items:center;gap:clamp(1rem,2vw,2rem);} .nav a{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--okoa-semantic-fg2);white-space:nowrap;} .nav a:hover{color:var(--ink);} .head-actions{display:flex;align-items:center;gap:clamp(.55rem,1.2vw,.9rem);flex:none;} /* the theme picker and the request button are a matched pair — identical font + height */ .cta,.theme-pick select{font-family:var(--mono);font-size:var(--head-fs);letter-spacing:.1em;text-transform:uppercase;height:var(--btn-h);white-space:nowrap;} .cta{display:inline-flex;align-items:center;gap:.5rem;padding:0 1.2rem;border:1.5px solid var(--ink);color:var(--ink);transition:background-color .12s var(--okoa-ease-out),color .12s var(--okoa-ease-out);} .cta-short{display:none;} .cta:hover{background:var(--ink);color:var(--okoa-semantic-surface-default);} .cta svg{transition:transform .22s var(--okoa-ease-out);}.cta:hover svg{transform:translateX(3px);} .theme-pick{position:relative;display:inline-flex;align-items:center;} .theme-pick select{appearance:none;-webkit-appearance:none;color:var(--okoa-semantic-fg2);background:transparent;border:1.5px solid var(--rule);border-radius:0;padding:0 1.85rem 0 .85rem;width:var(--pick-w);line-height:1.05;cursor:pointer;transition:border-color .12s var(--okoa-ease-out),color .12s;} .theme-pick select:hover{color:var(--ink);border-color:var(--okoa-semantic-border-default);} .theme-pick select:focus-visible{outline:2px solid var(--okoa-focus-ring-color);outline-offset:2px;} .theme-pick::after{content:"";position:absolute;right:.72rem;top:50%;width:7px;height:7px;border-right:1.5px solid var(--okoa-semantic-fg3);border-bottom:1.5px solid var(--okoa-semantic-fg3);transform:translateY(-65%) rotate(45deg);pointer-events:none;} /* nav collapses to the footer below desktop (single-page scroll); header stays logo + matched pair */ @media(max-width:1080px){.nav{display:none;}} @media(max-width:560px){:root{--head-fs:.64rem;--pick-w:9.6rem;}.cta{padding:0 .95rem;}.cta-full{display:none;}.cta-short{display:inline;}} @media(max-width:400px){:root{--head-fs:.58rem;--pick-w:8.2rem;--logo-h:1.15rem;}.head .wrap{padding-inline:.75rem;}.head-actions{gap:.4rem;}.cta{padding:0 .8rem;gap:0;}.cta svg{display:none;}.theme-pick select{padding:0 1.45rem 0 .6rem;}} /* ── hero: asymmetric, instrument on the right, a vertical hairline between ── */ .hero{padding-block:clamp(3rem,8vh,7rem) clamp(3rem,7vh,6rem);} .hero .wrap{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center;} .hero-l{position:relative;} .hero h1{margin:clamp(1.4rem,3vw,2.4rem) 0;} .hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:clamp(1.4rem,3vw,2.2rem);} .btn{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.55rem;height:52px;padding:0 1.6rem;cursor:pointer;border:1.5px solid var(--ink);background:transparent;color:var(--ink);transition:transform .12s var(--okoa-ease-out),background-color .12s,color .12s;} .btn--solid{background:var(--okoa-semantic-entity-primary);border-color:var(--okoa-semantic-entity-primary);color:var(--okoa-semantic-fg-on-dark);} .btn:hover{transform:translateY(-2px);}.btn svg{transition:transform .22s var(--okoa-ease-out);}.btn:hover svg{transform:translateX(3px);} .hero-r{position:relative;display:flex;justify-content:center;} .hero-r::before{content:"";position:absolute;left:calc(-1 * clamp(1rem,2.5vw,2.5rem));top:6%;bottom:6%;width:1px;background:var(--rule);} /* aperture instrument */ .aperture{width:min(82%,360px);height:auto;color:var(--okoa-semantic-border-default);} .ap-wrap{position:relative;width:100%;display:flex;justify-content:center;} .ap-c{position:absolute;inset:0;display:grid;place-items:center;text-align:center;} .ap-c b{font-family:var(--mono);font-weight:500;font-size:clamp(1.5rem,1rem + 1.5vw,2.15rem);letter-spacing:-0.02em;line-height:1;} .ap-c .ap-label{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--okoa-semantic-fg2);margin-top:.5rem;} /* odometer — split-flap roll: each digit is a 1em window over a 0-9,0-9 strip */ .odo{display:inline-flex;align-items:center;} .odo .odo-slot{display:inline-block;height:1em;line-height:1;overflow:hidden;font-size:inherit;letter-spacing:0;} .odo .odo-strip{display:block;} .odo .odo-strip span{display:block;height:1em;line-height:1;font-size:inherit;text-align:center;font-variant-numeric:tabular-nums;} .ap-ring{fill:none;stroke:var(--okoa-semantic-border-default);stroke-width:1.5;} .ap-mid{stroke:color-mix(in srgb,var(--okoa-semantic-entity-primary) 60%,transparent);} .ap-tick{fill:none;stroke:var(--okoa-semantic-fg3);stroke-width:2;} .ap-sweep{fill:none;stroke:var(--coral);stroke-width:3;stroke-linecap:round;stroke-dasharray:22 78;stroke-dashoffset:0;} html.js .ap-draw{stroke-dasharray:100;stroke-dashoffset:100;} html.js .ap-wrap.in .ap-draw{stroke-dashoffset:0;transition:stroke-dashoffset 1.3s var(--okoa-ease-out) .1s;} html.js .ap-wrap.in .ap-draw.ap-mid{transition-delay:.28s;} html.js .ap-wrap.in .ap-sweep{stroke-dashoffset:-56;transition:stroke-dashoffset 1.5s var(--okoa-ease-out) .35s;} .ap-readouts{display:flex;gap:clamp(1.2rem,3vw,2.2rem);justify-content:center;margin-top:clamp(1.4rem,3vw,2rem);flex-wrap:wrap;} .ap-readouts div{text-align:center;} .ap-readouts b{display:block;font-family:var(--mono);font-weight:500;font-size:1.05rem;letter-spacing:-0.01em;} .ap-readouts span{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--okoa-semantic-fg2);} /* ── marquee: one alive band, mono, paused under reduced-motion ── */ .marq{border-block:1px solid var(--rule);overflow:hidden;white-space:nowrap;padding-block:1.05rem;} .marq__t{display:inline-block;font-family:var(--mono);font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--okoa-semantic-fg2);animation:marq 38s linear infinite;} .marq__t span{padding-inline:1.3rem;}.marq__t i{color:var(--coral);font-style:normal;} @keyframes marq{from{transform:translateX(0);}to{transform:translateX(-50%);}} /* ── editorial section: a sticky mono index rail + the content ── */ .sec{padding-block:clamp(5rem,11vh,11rem);} .sec .wrap{display:grid;grid-template-columns:clamp(7rem,14vw,12rem) 1fr;gap:clamp(1.5rem,4vw,4rem);} .rail{position:sticky;top:108px;align-self:start;} .rail b{display:block;font-family:var(--mono);font-weight:500;font-size:clamp(1.6rem,1rem + 1.4vw,2.4rem);color:var(--coral);line-height:1;} .rail span{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--okoa-semantic-fg2);margin-top:.7rem;max-width:9rem;} .sec-head{max-width:26ch;margin-bottom:clamp(2.4rem,5vw,4rem);} .sec-head p{margin-top:1.3rem;} /* solutions — editorial broken grid, ring bullets, mono meta, no row rules */ .sols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem) clamp(2.5rem,5vw,5rem);} .sol{position:relative;padding-left:1.6rem;} .sol::before{content:"";position:absolute;left:0;top:.5rem;width:11px;height:11px;border:1.6px solid var(--coral);border-radius:50%;} .sol .grp{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--okoa-semantic-fg3);} .sol h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.7rem,1.2rem + 1.4vw,2.5rem);line-height:1.05;letter-spacing:-0.01em;margin:.3rem 0 .7rem;} .sol p{color:var(--okoa-semantic-fg2);font-size:1rem;} .sol .m{display:flex;justify-content:space-between;gap:1rem;margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--rule);font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--okoa-semantic-fg3);} .sol .m b{color:var(--ink);} @media(max-width:760px){.sols{grid-template-columns:1fr;}} /* track record — staggered figure grid + a mono ledger */ .figs{display:grid;grid-template-columns:1.7fr 1fr;grid-template-rows:auto auto;gap:clamp(1rem,2vw,1.5rem);margin-bottom:clamp(2.5rem,5vw,4rem);} .fig{position:relative;overflow:hidden;border:1px solid var(--rule);background:var(--okoa-semantic-surface-warm);} .fig--lead{grid-row:1 / span 2;aspect-ratio:auto;} .fig img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.55) contrast(1.03);transition:transform .7s var(--okoa-ease-out),filter .5s var(--okoa-ease-out);} .fig--lead img{min-height:clamp(320px,46vh,560px);} .fig:not(.fig--lead) img{height:clamp(150px,20vh,250px);} .fig:hover img{transform:scale(1.04);filter:saturate(.78) contrast(1.03);} .fig figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.5rem 1.3rem 1.2rem;color:#fff;background:linear-gradient(to top,rgba(0,0,0,.72),transparent);} .fig figcaption b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(1.3rem,1rem + 1vw,1.9rem);line-height:1.05;} .fig figcaption span{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;opacity:.85;} @media(max-width:760px){.figs{grid-template-columns:1fr;}.fig--lead{grid-row:auto;}} .ledger{font-family:var(--mono);} .lrow{display:grid;grid-template-columns:2.2rem 1.6fr 1fr .9fr auto;gap:1rem;align-items:baseline;padding:.95rem 0;border-bottom:1px solid var(--rule);font-size:.82rem;} .lrow:first-child{border-top:1px solid var(--rule);} .lrow .no{color:var(--okoa-semantic-fg3);} .lrow .nm{font-family:var(--serif);font-size:1.25rem;letter-spacing:-0.01em;color:var(--ink);} .lrow .me{color:var(--okoa-semantic-fg2);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;} .lrow .am{text-align:right;color:var(--ink);} .lrow .am::after{content:" →";color:var(--coral);opacity:0;transition:opacity .2s;} .lrow:hover .am::after{opacity:1;} @media(max-width:760px){.lrow{grid-template-columns:1.7rem 1fr auto;align-items:baseline;row-gap:.15rem;}.lrow .nm{grid-column:2;grid-row:1;}.lrow .am{grid-column:3;grid-row:1;}.lrow .loc{display:none;}.lrow .typ{grid-column:2;grid-row:2;font-size:.62rem;color:var(--okoa-semantic-fg3);}} .note{font-family:var(--mono);font-size:.72rem;color:var(--okoa-semantic-fg3);margin-top:1.6rem;} /* why — type-as-texture (a giant ring behind), statements not a list */ .why-sec{position:relative;overflow:hidden;} .why-wm{position:absolute;left:-8%;top:50%;transform:translateY(-50%);width:min(56vw,640px);height:auto;opacity:.05;color:var(--ink);pointer-events:none;} .whys{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem) clamp(2.5rem,5vw,5rem);position:relative;} .why{position:relative;padding-left:1.6rem;} .why::before{content:"";position:absolute;left:0;top:.55rem;width:11px;height:11px;border:1.6px solid var(--ink);border-radius:50%;} .why h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,1.1rem + 1.2vw,2.1rem);line-height:1.05;margin:0 0 .5rem;} .why p{color:var(--okoa-semantic-fg2);} @media(max-width:760px){.whys{grid-template-columns:1fr;}} /* partners — pull quote on a tonal band with ring watermark */ .band{position:relative;overflow:hidden;background:var(--okoa-semantic-surface-chrome);color:var(--okoa-semantic-fg-on-dark);} .band .wrap{display:block;} .ring-wm{position:absolute;right:-6%;top:50%;transform:translateY(-50%);width:min(46vw,520px);height:auto;opacity:.06;color:var(--okoa-semantic-fg-on-dark);pointer-events:none;} .pull{position:relative;font-family:var(--serif);font-weight:500;font-size:clamp(1.9rem,1.2rem + 2.6vw,3.4rem);line-height:1.16;letter-spacing:-0.01em;max-width:24ch;} .pull cite{display:block;margin-top:1.6rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-style:normal;color:color-mix(in srgb,var(--okoa-semantic-fg-on-dark) 70%,transparent);} /* team */ .team{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.5rem);} .mem .nm{font-family:var(--serif);font-weight:500;font-size:1.6rem;letter-spacing:-0.01em;} .mem .role{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--coral);margin:.3rem 0 .7rem;} .mem p{color:var(--okoa-semantic-fg2);font-size:.95rem;} @media(max-width:680px){.team{grid-template-columns:1fr;}} /* ── the ONE coral knockout band — the memory hook ── */ .coral{background:var(--coral);color:#fff;} .coral .wrap{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center;padding-block:clamp(4.5rem,9vh,8rem);} .coral h2{font-family:var(--serif);font-weight:500;font-size:clamp(2.2rem,1.5rem + 2.8vw,4.2rem);line-height:1.0;letter-spacing:-0.018em;} .coral p{margin-top:1.4rem;max-width:32rem;color:rgba(255,255,255,.86);} .coral .det{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;margin-top:1.8rem;color:rgba(255,255,255,.8);} .cform{display:grid;gap:.9rem;} .cform input{height:54px;padding:0 1.1rem;border:1.5px solid rgba(255,255,255,.45);background:rgba(255,255,255,.08);color:#fff;font:inherit;} .cform input::placeholder{color:rgba(255,255,255,.6);} .cform input:focus-visible{outline:2px solid #fff;outline-offset:2px;border-color:transparent;} .cform button{height:54px;background:#fff;color:var(--coral);border:none;font-family:var(--mono);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;transition:transform .12s var(--okoa-ease-out);} .cform button:hover{transform:translateY(-2px);} @media(max-width:760px){.coral .wrap{grid-template-columns:1fr;}} /* footer */ .foot{padding-block:clamp(3rem,6vh,5rem) 2rem;border-top:1px solid var(--rule);} .foot .wrap{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem;} .foot .logo{height:1.5rem;color:var(--ink);} .foot .tag{font-family:var(--serif);font-size:1.3rem;line-height:1.1;margin-top:1rem;color:var(--okoa-semantic-fg2);} .ticker{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--okoa-semantic-fg3);margin-top:1.2rem;} .ticker .dot{width:6px;height:6px;border-radius:50%;border:1.5px solid var(--coral);} .foot a{display:block;font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--okoa-semantic-fg2);padding:.3rem 0;} .foot a:hover{color:var(--ink);} .foot .legal{grid-column:1/-1;margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--rule);font-size:.74rem;color:var(--okoa-semantic-fg3);max-width:60rem;} @media(max-width:680px){.foot .wrap{grid-template-columns:1fr;}} /* responsive hero */ @media(max-width:860px){.hero .wrap{grid-template-columns:1fr;}.hero-r{order:-1;justify-content:flex-start;}.hero-r::before{display:none;}.sec .wrap{grid-template-columns:1fr;}.rail{position:static;display:flex;align-items:baseline;gap:1rem;}.rail span{margin-top:0;}} /* deployment chart — coral line draws on reveal; ring marker on the latest point */ .dchart{margin-bottom:clamp(2.5rem,5vw,4rem);} .dchart-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.9rem;} .dchart-lbl{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--okoa-semantic-fg2);} .dchart-val{font-family:var(--mono);font-weight:500;font-size:clamp(1.3rem,1rem + 1vw,1.9rem);letter-spacing:-0.01em;color:var(--ink);} .dchart-svg{width:100%;height:auto;display:block;overflow:visible;} .dbase{stroke:var(--rule);stroke-width:1;} .dline{fill:none;stroke:var(--coral);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;} .dchart-pt .hit{fill:transparent;}.dchart-pt .dot{fill:var(--coral);} .dchart .dx{font-family:var(--mono);font-size:11px;letter-spacing:.08em;fill:var(--okoa-semantic-fg3);} .dchart-note{font-family:var(--mono);font-size:.66rem;color:var(--okoa-semantic-fg3);margin-top:1rem;} html.js .dchart .dline{stroke-dasharray:1;stroke-dashoffset:1;} html.js .dchart.in .dline{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s cubic-bezier(0.22,1,0.36,1) .2s;} html.js .dchart .dot{opacity:0;transform:scale(0);transform-origin:center;transform-box:fill-box;} html.js .dchart.in .dot{opacity:1;transform:scale(1);transition:opacity .3s var(--okoa-ease-out) 1s,transform .35s cubic-bezier(0.22,1,0.36,1) 1s;} @media (prefers-reduced-motion: reduce){ .r,.lines .ln>span{opacity:1 !important;transform:none !important;} html.js .dchart .dline{stroke-dashoffset:0 !important;transition:none !important;} html.js .dchart .dot{opacity:1 !important;transform:none !important;transition:none !important;} .ap-draw,.ap-sweep{transition:none !important;stroke-dashoffset:0 !important;} .ap-sweep{stroke-dashoffset:-56 !important;} .marq__t{animation:none !important;} } /* ── signature: the OKOA precision reticle cursor (the ring motif) + data tag + scroll gauge. Pointer devices only; reduced-motion + touch keep the native cursor. ── */ .okoa-cursor,.okoa-tag,.scrollgauge{display:none;} @media (hover:hover) and (pointer:fine){ html.cur,html.cur *{cursor:none;} .okoa-cursor{display:block;position:fixed;left:0;top:0;z-index:var(--okoa-z-tooltip);pointer-events:none;mix-blend-mode:difference;will-change:transform;} .okoa-cursor .oc-ring{position:absolute;width:28px;height:28px;margin:-14px;border:1.3px solid #fff;border-radius:50%;transition:width .26s var(--okoa-ease-out),height .26s var(--okoa-ease-out),margin .26s var(--okoa-ease-out);} .okoa-cursor .oc-dot{position:absolute;width:5px;height:5px;margin:-2.5px;background:#fff;border-radius:50%;transition:opacity .2s var(--okoa-ease-out);} .okoa-cursor.lock .oc-ring{width:46px;height:46px;margin:-23px;} .okoa-cursor.lock .oc-dot{opacity:0;} /* chip is fg1-on-surface inverted: background fg1, text surface-default — a guaranteed-contrast pair (the WCAG-verified fg/surface relation) in light AND dark variants, so the text never goes light-on-light. */ .okoa-tag{display:block;position:fixed;left:0;top:0;z-index:var(--okoa-z-tooltip);pointer-events:none;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--okoa-semantic-surface-default);background:var(--okoa-semantic-fg1);padding:.3rem .5rem;white-space:nowrap;opacity:0;transition:opacity .18s var(--okoa-ease-out);will-change:transform;} .okoa-tag.show{opacity:1;} .scrollgauge{display:block;position:fixed;right:clamp(1.1rem,3vw,2.4rem);bottom:clamp(1.1rem,3vw,2.4rem);width:44px;height:44px;z-index:var(--okoa-z-sticky);pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity .4s var(--okoa-ease-out),transform .4s var(--okoa-ease-out);} .scrollgauge.show{opacity:1;transform:none;} .scrollgauge svg{width:100%;height:100%;transform:rotate(-90deg);} .scrollgauge .track{fill:none;stroke:var(--rule);stroke-width:2;} .scrollgauge .prog{fill:none;stroke:var(--coral);stroke-width:2;stroke-linecap:round;transition:stroke-dashoffset .12s linear;} .btn--solid,.cform button{transition:transform .2s var(--okoa-ease-out),background-color .12s var(--okoa-ease-out),color .12s var(--okoa-ease-out);} } /* ════ editorial queue #4–#7 ════════════════════════════════════════════ */ /* ── #4 deal sheet: a sticky sector index + grouped deals; a coral marker tracks scroll ── */ .dealsheet{display:grid;grid-template-columns:clamp(8rem,16vw,13rem) 1fr;gap:clamp(1.5rem,4vw,3.5rem);} .ds-index{position:sticky;top:120px;align-self:start;} .ds-index-h{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--okoa-semantic-fg3);margin:0 0 1rem;} .ds-index ul{list-style:none;margin:0;padding:0;display:grid;gap:.75rem;} .ds-index li{position:relative;font-family:var(--mono);font-size:.74rem;letter-spacing:.03em;color:var(--okoa-semantic-fg3);padding-left:1.15rem;transition:color .2s var(--okoa-ease-out);} .ds-index li::before{content:"";position:absolute;left:0;top:.4em;width:7px;height:7px;border-radius:50%;border:1.5px solid var(--rule);transition:border-color .25s var(--okoa-ease-out),background-color .25s var(--okoa-ease-out);} .ds-index li em{font-style:normal;opacity:.6;} .ds-index li.on{color:var(--ink);} .ds-index li.on::before{border-color:var(--coral);background:var(--coral);} .ds-groups{min-width:0;} .ds-group{scroll-margin-top:120px;} .ds-group-h{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--okoa-semantic-fg2);padding-bottom:.55rem;border-bottom:1px solid var(--rule);margin:clamp(1.8rem,3.5vw,2.6rem) 0 0;} .ds-group:first-child .ds-group-h{margin-top:0;} @media(max-width:760px){.dealsheet{grid-template-columns:1fr;}.ds-index{display:none;}} /* ── #5 scroll-scrubbed ring: the motif traces itself as you read the section (scrub var set by JS) ── */ .why-wm circle{stroke-dasharray:100;stroke-dashoffset:var(--scrub,100);} /* ── #6 list hover-preview: a deal row reveals a monochrome crop near the cursor (pointer only) ── */ .ds-preview{display:none;} @media (hover:hover) and (pointer:fine){ .ds-preview{display:block;position:fixed;left:0;top:0;z-index:var(--okoa-z-overlay);pointer-events:none;width:clamp(150px,18vw,220px);aspect-ratio:4/3;overflow:hidden;border:1px solid var(--okoa-semantic-fg1);background:var(--okoa-semantic-surface-warm);opacity:0;transform:translateY(8px) scale(.97);transition:opacity .2s var(--okoa-ease-out),transform .2s var(--okoa-ease-out);will-change:transform;} .ds-preview.show{opacity:1;transform:none;} .ds-preview img{width:100%;height:100%;object-fit:cover;filter:saturate(0) contrast(1.05);display:block;} } /* ── #7 load curtain: surface-chrome wipe with a ring-draw loader (JS-inserted overlay; page never gated on it) ── */ .curtain{position:fixed;inset:0;z-index:var(--okoa-z-modal);background:var(--okoa-semantic-surface-chrome);display:grid;place-items:center;transition:transform .6s var(--okoa-ease-out);} .curtain.up{transform:translateY(-101%);} .curtain svg{width:88px;height:auto;color:var(--okoa-semantic-fg-on-dark);} .curtain circle{fill:none;stroke:currentColor;stroke-width:2;} .curtain .cl-draw{stroke-dasharray:100;stroke-dashoffset:100;animation:cl-draw .9s var(--okoa-ease-out) forwards;} .curtain .cl-draw.cl-2{stroke:var(--coral);animation-delay:.16s;} @keyframes cl-draw{to{stroke-dashoffset:0;}} @media (prefers-reduced-motion: reduce){ .why-wm circle{stroke-dashoffset:0 !important;} .ds-preview{display:none !important;} .curtain{display:none !important;} }