/* Authorized CybermetriQ design foundation. See /brand-provenance.json. */ @font-face { font-family: "CybermetriQ Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/cybermetriq-sans-400-latin.df43763e.woff2") format("woff2"); unicode-range: U+0000-2FFF; } @font-face { font-family: "CybermetriQ Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/cybermetriq-sans-500-latin.3bbaba84.woff2") format("woff2"); unicode-range: U+0000-2FFF; } @font-face { font-family: "CybermetriQ Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/cybermetriq-sans-700-latin.9286426b.woff2") format("woff2"); unicode-range: U+0000-2FFF; } @font-face { font-family: "CybermetriQ Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/cybermetriq-sans-400-jp.bc92ea4d.woff2") format("woff2"); unicode-range: U+3000-FFEF; } @font-face { font-family: "CybermetriQ Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/cybermetriq-sans-500-jp.7bab9c1c.woff2") format("woff2"); unicode-range: U+3000-FFEF; } :root { --font-sans: "CybermetriQ Sans", "Noto Sans Arabic var", "Noto Sans Devanagari var", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", "Noto Sans CJK", "Yu Gothic UI", "Yu Gothic", "YuGothic", "Meiryo", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --font-display: "CybermetriQ Sans", var(--font-sans); --font-mono: "JetBrains Mono var", "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", "CybermetriQ Sans", "Hiragino Sans", "Yu Gothic UI", "Meiryo", monospace; --font-financial: var(--font-sans); --font-feature-default: "liga" 1, "calt" 1, "cv05" 1; --font-feature-financial: "tnum" 1, "zero" 1, "calt" 0; --font-feature-code: "liga" 0, "calt" 0, "zero" 1; --type-display-size: clamp(2.5rem, 0.75rem + 4.4vw, 3.75rem); --type-display-line: 1.0; --type-display-weight: 400; --type-display-track: -0.024em; --type-heading-1-size: clamp(1.75rem, 1.1rem + 1.7vw, 2.25rem); --type-heading-1-line: 1.12; --type-heading-1-weight: 400; --type-heading-1-track: -0.020em; --type-heading-2-size: 1.25rem; --type-heading-2-line: 1.3; --type-heading-2-weight: 500; --type-heading-2-track: -0.012em; --type-heading-3-size: 1.0625rem; --type-heading-3-line: 1.4; --type-heading-3-weight: 500; --type-heading-3-track: -0.006em; --type-body-size: 1.0625rem; --type-body-line: 1.65; --type-body-weight: 400; --type-body-track: 0em; --type-body-small-size: 0.9375rem; --type-body-small-line: 1.6; --type-body-small-weight: 400; --type-body-small-track: 0em; --type-label-size: 0.75rem; --type-label-line: 1.3; --type-label-weight: 500; --type-label-track: 0.005em; --type-eyebrow-size: 0.75rem; --type-eyebrow-line: 1.25; --type-eyebrow-weight: 500; --type-eyebrow-track: 0.16em; --type-control-weight: 500; --type-chrome-size: var(--type-body-small-size); --type-chrome-brand-size: clamp(1.0625rem, 1.25vw, 1.1875rem); --type-chrome-line: var(--type-body-small-line); --type-chrome-weight: 500; --type-chrome-track: 0em; --type-nav-size: var(--type-body-size); --type-nav-line: var(--type-body-line); --type-nav-weight: 500; --type-nav-track: 0em; --type-code-size: 0.9375rem; --type-code-line: 1.6; --type-code-weight: 400; --type-code-track: 0em; --type-financial-size: 1.0625rem; --type-financial-line: 1.5; --type-financial-weight: 500; --type-financial-track: 0em; --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 1.75rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; --rhythm-tight: var(--space-8); --rhythm-normal: var(--space-12); --rhythm-wide: var(--space-16); --rhythm-vast: var(--space-24); --control-size-compact: 44px; --control-size-default: 48px; --control-size-large: 56px; --radius-none: 0; --radius-small: 0; --radius-medium: 0.75rem; --radius-well: 1rem; --radius-large: 1.75rem; --radius-pill: var(--radius-small); --stroke-hairline: 1px; --stroke-medium: 1.5px; --stroke-strong: 2px; --focus-ring-width: 2px; --focus-ring-offset: 2px; --duration-instant: 0ms; --duration-fast: 140ms; --duration-base: 180ms; --duration-slow: 240ms; --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --container-prose: 68ch; --container-content: 75rem; --container-wide: 90rem; --gutter: var(--space-4); --grid-columns: 4; --masthead-offset-block: max(12px, env(safe-area-inset-top, 0px)); --masthead-pad-block: 6px; --masthead-block-size: calc(44px + (2 * var(--masthead-pad-block)) + var(--stroke-hairline)); --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-nav: 200; --z-modal: 1000; --z-toast: 1100; } @media (min-width: 48rem) { :root { --gutter: var(--space-6); --grid-columns: 8; --masthead-pad-block: 7px; } } @media (min-width: 64rem) { :root { --gutter: var(--space-8); --grid-columns: 12; } } :root { --gray-0: #ffffff; --gray-50: #eef2f8; --gray-100: #e2e7ef; --gray-150: #dee4ed; --gray-200: #d9dfe8; --gray-300: #cfd7e2; --gray-400: #c4cdda; --gray-500: #9aa8bd; --gray-600: #97a4b8; --gray-700: #8290a6; --gray-800: #6b7a90; --gray-850: #526074; --gray-900: #3d4a5c; --gray-950: #171e29; --gray-1000: #11171f; --night-line: #202834; --night-line-2: #27313f; --coral-50: #f5e6e1; --coral-100: #ebd8d1; --coral-150: #e3c8bf; --coral-200: #d6ab9b; --coral-300: #ff7a59; --coral-400: #a83818; --coral-800: var(--night-line-2); --coral-850: var(--night-line); --coral-900: var(--gray-950); --coral-950: var(--gray-1000); --teal-50: #cce1df; --teal-100: #bcd7d4; --teal-150: #a5e0d9; --teal-200: #7ddfd6; --teal-300: #4fd1c5; --teal-400: #23847a; --teal-600: #12605a; --teal-700: #0f5752; --teal-800: #0c4842; --teal-900: #08312d; --teal-975: #172b29; --blue-200: #a3b1c6; --blue-300: #8d9bb0; --blue-600: #3f5170; --blue-700: #33435e; --neu-light: rgb(255 255 255 / 0.52); --neu-dark: var(--gray-500); --neu-dark-2: var(--gray-700); --neu-out: var(--elev-2), var(--rim-raised); --neu-out-sm: none; --neu-in: var(--rim-recessed); --neu-in-sm: var(--rim-recessed); --neu-in-md: var(--rim-recessed); --neu-in-lg: inset 0 2px 6px color-mix(in srgb, var(--shadow-ink) 9%, transparent), inset 0 -1px 0 var(--rim-highlight); --neu-out-hover: var(--elev-3), var(--rim-raised); --neu-press-scale: 0.97; --glass-drop: 0 6px 14px -8px var(--neu-dark); --neu-recall: 600ms; --neu-ease: cubic-bezier(0.2, 0.8, 0.2, 1); } :root, [data-theme="light"] { color-scheme: light; --color-canvas: var(--gray-200); --browser-chrome-ground: #f8fafc; --color-surface: var(--gray-200); --color-surface-raised: var(--gray-100); --color-surface-sunken: var(--gray-300); --color-overlay: rgb(35 47 62 / 0.55); --radar-ground: var(--color-surface-sunken); --radar-grid: var(--gray-500); --radar-sweep: #c6dfd9; --radar-1: #9ad4cc; --radar-2: #86c7bf; --radar-3: var(--coral-150); --radar-4: var(--coral-100); --panel-bg: color-mix(in oklab, var(--gray-50) 82%, transparent); --panel-backdrop: var(--gm-glass-container-backdrop); --panel-bg-strong: color-mix(in oklab, var(--gray-50) 92%, transparent); --panel-border: rgb(151 164 184 / 0.26); --panel-shadow: var(--neu-out); --overlay-shadow: var(--elev-3), var(--rim-raised); --surface-rail-border: color-mix(in srgb, var(--color-border-default) 74%, transparent); --surface-hover-bg: color-mix(in srgb, var(--color-accent-wash) 64%, var(--color-canvas)); --surface-progress-color: var(--teal-300); --surface-progress-groove: var(--color-surface-sunken); --diagram-grid: rgb(154 168 189 / 0.30); --diagram-reticle: rgb(151 164 184 / 0.85); --glass-bg: rgba(217, 223, 232, 0.86); --glass-bg-strong: rgba(217, 223, 232, 0.97); --glass-border: rgba(151, 164, 184, 0.34); --glass-highlight: rgba(255, 255, 255, 0.85); --glass-shadow: var(--neu-out-sm); --color-text-primary: var(--gray-900); --color-text-secondary: var(--gray-850); --color-text-muted: var(--gray-850); --color-text-on-inverse: var(--gray-0); --color-text-on-accent: var(--gray-0); --color-text-disabled: var(--gray-600); --color-link: var(--teal-600); --color-link-hover: var(--teal-700); --color-accent: var(--teal-600); --color-accent-hover: var(--teal-700); --color-accent-border: var(--teal-400); --color-accent-solid: var(--teal-700); --color-accent-solid-hover: var(--teal-800); --color-accent-wash: var(--teal-50); --color-mark: var(--coral-300); --color-mark-ink: var(--coral-400); --color-mark-wash: var(--coral-100); --color-mark-ink-on-wash: var(--coral-400); --color-inverse: var(--teal-800); --color-inverse-hover: var(--teal-900); --color-border-subtle: var(--gray-400); --color-border-default: var(--gray-500); --color-border-interactive: var(--gray-800); --color-border-strong: var(--gray-850); --color-focus-ring: var(--teal-600); --color-status-neutral: var(--gray-850); --color-status-information: var(--blue-600); --color-status-success: #146e1c; --color-status-warning: #815700; --color-status-danger: #be0000; --color-status-blocked: var(--coral-400); --color-status-pending: var(--gray-850); --color-status-neutral-bg: var(--gray-100); --color-status-information-bg: #dde5f0; --color-status-success-bg: #d3e6d6; --color-status-warning-bg: #eae0cc; --color-status-danger-bg: #ecd5d5; --color-status-blocked-bg: var(--coral-100); --color-status-pending-bg: var(--gray-100); --color-status-neutral-border: var(--gray-800); --color-status-information-border: #66799a; --color-status-success-border: #4f8557; --color-status-warning-border: #8d743d; --color-status-danger-border: #a56660; --color-status-blocked-border: #a36858; --color-status-pending-border: var(--gray-800); --color-table-header-bg: var(--gray-300); --color-table-row-hover: var(--gray-100); --color-table-rule: var(--gray-400); --color-code-bg: var(--color-surface-sunken); --color-code-border: var(--gray-400); --elevation-none: none; --elevation-raised: var(--neu-out-sm); --elevation-modal: var(--neu-out); --control-tint: rgb(255 255 255 / 0.18); --control-tint-on-accent: rgb(255 255 255 / 0.08); --control-highlight: rgb(255 255 255 / 0.36); --control-highlight-on-accent: rgb(255 255 255 / 0.14); --elevation-control: var(--neu-out-sm); --elevation-control-hover: var(--neu-out-hover); --elevation-control-pressed: var(--neu-in-sm); --shadow-ink: var(--gray-1000); --band-recess: color-mix(in srgb, var(--shadow-ink) 5%, transparent); --elev-1: 0 1px 1px color-mix(in srgb, var(--shadow-ink) 4%, transparent), 0 2px 4px color-mix(in srgb, var(--shadow-ink) 4%, transparent), 0 4px 8px color-mix(in srgb, var(--shadow-ink) 3%, transparent); --elev-2: 0 1px 2px color-mix(in srgb, var(--shadow-ink) 5%, transparent), 0 4px 8px color-mix(in srgb, var(--shadow-ink) 4%, transparent), 0 12px 24px color-mix(in srgb, var(--shadow-ink) 4%, transparent), 0 24px 48px color-mix(in srgb, var(--shadow-ink) 3%, transparent); --elev-3: 0 2px 4px color-mix(in srgb, var(--shadow-ink) 6%, transparent), 0 8px 16px color-mix(in srgb, var(--shadow-ink) 5%, transparent), 0 24px 48px color-mix(in srgb, var(--shadow-ink) 5%, transparent), 0 48px 96px color-mix(in srgb, var(--shadow-ink) 4%, transparent); --rim-highlight: rgb(255 255 255 / 0.65); --rim-raised: inset 0 1px 0 var(--rim-highlight), inset 0 -1px 0 color-mix(in srgb, var(--shadow-ink) 4%, transparent); --rim-recessed: inset 0 1px 2px color-mix(in srgb, var(--shadow-ink) 7%, transparent), inset 0 -1px 0 var(--rim-highlight); --rim-on-ink: inset 0 1px 0 rgb(255 255 255 / 0.18), inset 0 -1px 0 rgb(0 0 0 / 0.25); --surface-recessed: color-mix(in srgb, var(--shadow-ink) 6%, transparent); --surface-recessed-hover: color-mix(in srgb, var(--shadow-ink) 3%, transparent); --surface-recessed-border: 1px solid color-mix(in srgb, var(--shadow-ink) 10%, transparent); --lit-pool: linear-gradient(180deg, color-mix(in oklab, white 95%, var(--color-canvas)) 0%, color-mix(in oklab, white 46%, var(--color-canvas)) 46%, var(--color-canvas) 92%); --lit-vignette: none; --lit-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.035'/%3E%3C/svg%3E"); --gm-ground-studio: var(--lit-grain), var(--lit-pool), var(--lit-vignette); --gm-ground-isometric: linear-gradient(180deg, #f8fafc 0%, #e8edf5 100%); --gm-glass-container-bg-tint: rgba(255, 255, 255, 0.82); --gm-glass-container-bg: linear-gradient(180deg, color-mix(in oklab, var(--gm-glass-container-bg-tint) 100%, white 14%) 0%, var(--gm-glass-container-bg-tint) 55%, color-mix(in oklab, var(--gm-glass-container-bg-tint) 100%, black 5%) 100%); --gm-glass-container-backdrop: blur(36px) saturate(190%); --gm-glass-container-border: 1px solid rgba(255, 255, 255, 0.85); --gm-glass-container-shadow: var(--elev-2), var(--rim-raised); --gm-glass-container-radius: 32px; --gm-glass-container-radius-mobile: 20px; --gm-glass-slab-bg-tint: rgba(255, 255, 255, 0.90); --gm-glass-slab-bg: linear-gradient(180deg, color-mix(in oklab, var(--gm-glass-slab-bg-tint) 100%, white 10%) 0%, var(--gm-glass-slab-bg-tint) 55%, color-mix(in oklab, var(--gm-glass-slab-bg-tint) 100%, black 4%) 100%); --gm-glass-slab-border: 1px solid rgba(255, 255, 255, 0.65); --gm-glass-slab-shadow: none; --gm-glass-slab-radius: 20px; --gm-glass-slab-radius-mobile: 14px; --gm-glass-pill-bg: rgba(255, 255, 255, 0.75); --gm-glass-pill-border: 1px solid rgba(255, 255, 255, 0.75); --gm-glass-pill-shadow: 0 2px 8px -1px rgba(15, 23, 42, 0.06), inset 0 1px 1.5px rgba(255, 255, 255, 0.95); --gm-glass-pill-hover: rgba(255, 255, 255, 0.95); --gm-glass-pill-hover-shadow: var(--elev-2), var(--rim-raised); --gm-glass-pill-radius: var(--radius-medium); --gm-primary-button-bg: rgba(13, 17, 23, 0.84); --gm-primary-button-ink: #ffffff; --gm-primary-button-border: 1px solid rgba(255, 255, 255, 0.30); --gm-primary-button-backdrop: blur(20px) saturate(175%); --gm-primary-button-material: linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 48%), radial-gradient(120% 140% at 18% -24%, rgba(127, 179, 173, 0.34), transparent 62%); --gm-primary-button-material-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.30), transparent 52%), radial-gradient(120% 140% at 18% -24%, rgba(127, 179, 173, 0.44), transparent 64%); --gm-primary-button-shadow: 0 8px 24px -10px rgba(13, 17, 23, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -1px 0 rgba(0, 0, 0, 0.24); --gm-metallic-rim: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(203, 213, 225, 0.4) 50%, rgba(255, 255, 255, 0.85) 100%); --gm-silicon-gold: #d97706; --gm-silicon-gold-glow: rgba(217, 119, 6, 0.25); --gm-silicon-amber-wash: rgba(254, 243, 199, 0.7); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --teal-200: #63a39f; --teal-300: #5ba19c; --teal-400: #437370; --teal-975: #141e1d; --color-canvas: var(--gray-1000); --browser-chrome-ground: #11171f; --color-surface: var(--gray-1000); --color-surface-raised: #1b2431; --color-surface-sunken: #0b0e14; --color-overlay: rgb(5 7 10 / 0.80); --neu-light: #2e394a; --neu-dark: #05070a; --neu-dark-2: #030405; --radar-ground: var(--color-surface-sunken); --radar-grid: #27313f; --radar-sweep: #0e1212; --radar-1: #1e2c2b; --radar-2: #253736; --radar-3: #2c2320; --radar-4: #1d1817; --panel-bg: color-mix(in oklab, var(--color-surface-raised) 80%, transparent); --panel-backdrop: var(--gm-glass-container-backdrop); --panel-bg-strong: color-mix(in oklab, var(--color-surface-raised) 90%, transparent); --panel-border: var(--night-line); --panel-shadow: var(--neu-out); --overlay-shadow: var(--elev-3), var(--rim-raised); --surface-progress-color: var(--teal-300); --surface-progress-groove: var(--color-surface-sunken); --diagram-grid: rgb(39 49 63 / 0.62); --diagram-reticle: rgb(152 164 182 / 0.72); --glass-bg: rgba(17, 23, 31, 0.86); --glass-bg-strong: rgba(17, 23, 31, 0.97); --glass-border: rgba(46, 57, 74, 0.8); --glass-highlight: rgba(46, 57, 74, 1); --glass-shadow: var(--neu-out-sm); --color-text-primary: #d9dfe8; --color-text-secondary: #98a4b6; --color-text-muted: #98a4b6; --color-text-on-inverse: #11171f; --color-text-on-accent: #11171f; --color-text-disabled: #6b7a90; --color-link: var(--teal-300); --color-link-hover: var(--teal-200); --color-accent: var(--teal-300); --color-accent-hover: var(--teal-200); --color-accent-border: var(--teal-400); --color-accent-solid: #7b9f9d; --color-accent-solid-hover: #92b0ae; --color-accent-wash: var(--teal-975); --color-mark: #8e5c4c; --color-mark-ink: #b27664; --color-mark-wash: #231a17; --color-mark-ink-on-wash: #b27664; --color-inverse: #92b0ae; --color-inverse-hover: #b6cac9; --color-border-subtle: var(--night-line); --color-border-default: var(--night-line-2); --color-border-interactive: #6b7a90; --color-border-strong: #98a4b6; --color-focus-ring: var(--teal-300); --color-status-neutral: #98a4b6; --color-status-information: var(--blue-300); --color-status-success: #49954f; --color-status-warning: #9d8147; --color-status-danger: #c36d6d; --color-status-blocked: #9b79a9; --color-status-pending: #98a4b6; --color-status-neutral-bg: var(--gray-950); --color-status-information-bg: #181e28; --color-status-success-bg: #141f15; --color-status-warning-bg: #1f1b14; --color-status-danger-bg: #241717; --color-status-blocked-bg: #201724; --color-status-pending-bg: var(--gray-950); --color-status-neutral-border: #98a4b6; --color-status-information-border: #8d9bb0; --color-status-success-border: #467249; --color-status-warning-border: #786847; --color-status-danger-border: #985959; --color-status-blocked-border: #7d608a; --color-status-pending-border: var(--teal-300); --color-table-header-bg: var(--color-surface-sunken); --color-table-row-hover: var(--gray-950); --color-table-rule: var(--night-line); --color-code-bg: var(--color-surface-sunken); --color-code-border: var(--night-line); --elevation-none: none; --elevation-raised: var(--neu-out-sm); --elevation-modal: var(--neu-out); --control-tint: rgb(255 255 255 / 0.045); --control-tint-on-accent: rgb(0 0 0 / 0.10); --control-highlight: rgb(46 57 74 / 0.9); --control-highlight-on-accent: rgb(255 255 255 / 0.28); --elevation-control: var(--neu-out-sm); --elevation-control-hover: var(--neu-out-hover); --elevation-control-pressed: var(--neu-in-sm); --lit-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E"); --lit-pool: linear-gradient(180deg, color-mix(in oklab, white 2%, var(--color-canvas)) 0%, color-mix(in oklab, black 46%, var(--color-canvas)) 46%, color-mix(in oklab, black 95%, var(--color-canvas)) 92%); --lit-vignette: none; --shadow-ink: var(--neu-dark-2); --elev-1: 0 1px 1px color-mix(in srgb, var(--shadow-ink) 9%, transparent), 0 2px 4px color-mix(in srgb, var(--shadow-ink) 9%, transparent), 0 4px 8px color-mix(in srgb, var(--shadow-ink) 7%, transparent); --elev-2: 0 1px 2px color-mix(in srgb, var(--shadow-ink) 11%, transparent), 0 4px 8px color-mix(in srgb, var(--shadow-ink) 9%, transparent), 0 12px 24px color-mix(in srgb, var(--shadow-ink) 9%, transparent), 0 24px 48px color-mix(in srgb, var(--shadow-ink) 7%, transparent); --elev-3: 0 2px 4px color-mix(in srgb, var(--shadow-ink) 13%, transparent), 0 8px 16px color-mix(in srgb, var(--shadow-ink) 11%, transparent), 0 24px 48px color-mix(in srgb, var(--shadow-ink) 11%, transparent), 0 48px 96px color-mix(in srgb, var(--shadow-ink) 9%, transparent); --rim-highlight: rgb(255 255 255 / 0.14); --rim-raised: inset 0 1px 0 var(--rim-highlight), inset 0 -1px 0 color-mix(in srgb, var(--shadow-ink) 10%, transparent); --rim-recessed: inset 0 1px 2px color-mix(in srgb, var(--shadow-ink) 16%, transparent), inset 0 -1px 0 var(--rim-highlight); --rim-on-ink: inset 0 1px 0 rgb(255 255 255 / 0.08), inset 0 -1px 0 rgb(0 0 0 / 0.35); --surface-recessed: color-mix(in srgb, var(--shadow-ink) 35%, transparent); --surface-recessed-hover: color-mix(in srgb, var(--shadow-ink) 22%, transparent); --surface-recessed-border: 1px solid rgb(255 255 255 / 0.05); --band-recess: color-mix(in srgb, var(--shadow-ink) 45%, transparent); --gm-ground-isometric: linear-gradient(180deg, #101114 0%, #08080a 100%); --gm-glass-container-bg-tint: color-mix(in oklab, color-mix(in oklab, var(--color-surface-raised) 100%, white 9%) 82%, transparent); --gm-glass-container-bg: linear-gradient(180deg, color-mix(in oklab, var(--gm-glass-container-bg-tint) 100%, white 7%) 0%, var(--gm-glass-container-bg-tint) 55%, color-mix(in oklab, var(--gm-glass-container-bg-tint) 100%, black 5%) 100%); --gm-glass-container-backdrop: blur(36px) saturate(190%); --gm-glass-container-border: 1px solid rgba(255, 255, 255, 0.14); --gm-glass-container-shadow: var(--elev-2), var(--rim-raised); --gm-glass-slab-bg-tint: color-mix(in oklab, color-mix(in oklab, var(--color-surface-raised) 100%, white 13%) 90%, transparent); --gm-glass-slab-bg: linear-gradient(180deg, color-mix(in oklab, var(--gm-glass-slab-bg-tint) 100%, white 6%) 0%, var(--gm-glass-slab-bg-tint) 55%, color-mix(in oklab, var(--gm-glass-slab-bg-tint) 100%, black 4%) 100%); --gm-glass-slab-border: 1px solid rgba(255, 255, 255, 0.09); --gm-glass-slab-shadow: none; --gm-glass-pill-bg: rgba(34, 37, 44, 0.65); --gm-glass-pill-border: 1px solid rgba(255, 255, 255, 0.16); --gm-glass-pill-shadow: 0 2px 8px -1px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.22); --gm-glass-pill-hover: rgba(50, 54, 64, 0.88); --gm-glass-pill-hover-shadow: var(--elev-2), var(--rim-raised); --gm-primary-button-bg: rgba(75, 150, 144, 0.62); --gm-primary-button-ink: #f4fffe; --gm-primary-button-border: 1px solid rgba(157, 225, 216, 0.50); --gm-primary-button-backdrop: blur(22px) saturate(185%); --gm-primary-button-material: linear-gradient(180deg, rgba(233, 255, 252, 0.28), transparent 48%), radial-gradient(120% 140% at 18% -24%, rgba(127, 179, 173, 0.54), transparent 64%); --gm-primary-button-material-hover: linear-gradient(180deg, rgba(244, 255, 254, 0.38), transparent 52%), radial-gradient(120% 140% at 18% -24%, rgba(127, 179, 173, 0.66), transparent 66%); --gm-primary-button-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.72), inset 0 1px 0 rgba(233, 255, 252, 0.52), inset 0 -1px 0 rgba(3, 18, 20, 0.30); --gm-metallic-rim: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(148, 163, 184, 0.15) 50%, rgba(255, 255, 255, 0.25) 100%); --gm-silicon-gold: #a78044; --gm-silicon-gold-glow: rgba(167, 128, 68, 0.20); --gm-silicon-amber-wash: rgba(60, 45, 24, 0.45); } } [data-theme="dark"] { color-scheme: dark; --teal-200: #63a39f; --teal-300: #5ba19c; --teal-400: #437370; --teal-975: #141e1d; --color-canvas: var(--gray-1000); --browser-chrome-ground: #11171f; --color-surface: var(--gray-1000); --color-surface-raised: #1b2431; --color-surface-sunken: #0b0e14; --color-overlay: rgb(5 7 10 / 0.80); --neu-light: #2e394a; --neu-dark: #05070a; --neu-dark-2: #030405; --radar-ground: var(--color-surface-sunken); --radar-grid: #27313f; --radar-sweep: #0e1212; --radar-1: #1e2c2b; --radar-2: #253736; --radar-3: #2c2320; --radar-4: #1d1817; --panel-bg: color-mix(in oklab, var(--color-surface-raised) 80%, transparent); --panel-backdrop: var(--gm-glass-container-backdrop); --panel-bg-strong: color-mix(in oklab, var(--color-surface-raised) 90%, transparent); --panel-border: var(--night-line); --panel-shadow: var(--neu-out); --overlay-shadow: var(--elev-3), var(--rim-raised); --surface-progress-color: var(--teal-300); --surface-progress-groove: var(--color-surface-sunken); --diagram-grid: rgb(39 49 63 / 0.62); --diagram-reticle: rgb(152 164 182 / 0.72); --glass-bg: rgba(17, 23, 31, 0.86); --glass-bg-strong: rgba(17, 23, 31, 0.97); --glass-border: rgba(46, 57, 74, 0.8); --glass-highlight: rgba(46, 57, 74, 1); --glass-shadow: var(--neu-out-sm); --color-text-primary: #d9dfe8; --color-text-secondary: #98a4b6; --color-text-muted: #98a4b6; --color-text-on-inverse: #11171f; --color-text-on-accent: #11171f; --color-text-disabled: #6b7a90; --color-link: var(--teal-300); --color-link-hover: var(--teal-200); --color-accent: var(--teal-300); --color-accent-hover: var(--teal-200); --color-accent-border: var(--teal-400); --color-accent-solid: #7b9f9d; --color-accent-solid-hover: #92b0ae; --color-accent-wash: var(--teal-975); --color-mark: #8e5c4c; --color-mark-ink: #b27664; --color-mark-wash: #231a17; --color-mark-ink-on-wash: #b27664; --color-inverse: #92b0ae; --color-inverse-hover: #b6cac9; --color-border-subtle: var(--night-line); --color-border-default: var(--night-line-2); --color-border-interactive: #6b7a90; --color-border-strong: #98a4b6; --color-focus-ring: var(--teal-300); --color-status-neutral: #98a4b6; --color-status-information: var(--blue-300); --color-status-success: #49954f; --color-status-warning: #9d8147; --color-status-danger: #c36d6d; --color-status-blocked: #9b79a9; --color-status-pending: #98a4b6; --color-status-neutral-bg: var(--gray-950); --color-status-information-bg: #181e28; --color-status-success-bg: #141f15; --color-status-warning-bg: #1f1b14; --color-status-danger-bg: #241717; --color-status-blocked-bg: #201724; --color-status-pending-bg: var(--gray-950); --color-status-neutral-border: #98a4b6; --color-status-information-border: #8d9bb0; --color-status-success-border: #467249; --color-status-warning-border: #786847; --color-status-danger-border: #985959; --color-status-blocked-border: #7d608a; --color-status-pending-border: var(--teal-300); --color-table-header-bg: var(--color-surface-sunken); --color-table-row-hover: var(--gray-950); --color-table-rule: var(--night-line); --color-code-bg: var(--color-surface-sunken); --color-code-border: var(--night-line); --elevation-none: none; --elevation-raised: var(--neu-out-sm); --elevation-modal: var(--neu-out); --control-tint: rgb(255 255 255 / 0.045); --control-tint-on-accent: rgb(0 0 0 / 0.10); --control-highlight: rgb(46 57 74 / 0.9); --control-highlight-on-accent: rgb(255 255 255 / 0.28); --elevation-control: var(--neu-out-sm); --elevation-control-hover: var(--neu-out-hover); --elevation-control-pressed: var(--neu-in-sm); --lit-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E"); --lit-pool: linear-gradient(180deg, color-mix(in oklab, white 2%, var(--color-canvas)) 0%, color-mix(in oklab, black 46%, var(--color-canvas)) 46%, color-mix(in oklab, black 95%, var(--color-canvas)) 92%); --lit-vignette: none; --shadow-ink: var(--neu-dark-2); --elev-1: 0 1px 1px color-mix(in srgb, var(--shadow-ink) 9%, transparent), 0 2px 4px color-mix(in srgb, var(--shadow-ink) 9%, transparent), 0 4px 8px color-mix(in srgb, var(--shadow-ink) 7%, transparent); --elev-2: 0 1px 2px color-mix(in srgb, var(--shadow-ink) 11%, transparent), 0 4px 8px color-mix(in srgb, var(--shadow-ink) 9%, transparent), 0 12px 24px color-mix(in srgb, var(--shadow-ink) 9%, transparent), 0 24px 48px color-mix(in srgb, var(--shadow-ink) 7%, transparent); --elev-3: 0 2px 4px color-mix(in srgb, var(--shadow-ink) 13%, transparent), 0 8px 16px color-mix(in srgb, var(--shadow-ink) 11%, transparent), 0 24px 48px color-mix(in srgb, var(--shadow-ink) 11%, transparent), 0 48px 96px color-mix(in srgb, var(--shadow-ink) 9%, transparent); --rim-highlight: rgb(255 255 255 / 0.14); --rim-raised: inset 0 1px 0 var(--rim-highlight), inset 0 -1px 0 color-mix(in srgb, var(--shadow-ink) 10%, transparent); --rim-recessed: inset 0 1px 2px color-mix(in srgb, var(--shadow-ink) 16%, transparent), inset 0 -1px 0 var(--rim-highlight); --rim-on-ink: inset 0 1px 0 rgb(255 255 255 / 0.08), inset 0 -1px 0 rgb(0 0 0 / 0.35); --surface-recessed: color-mix(in srgb, var(--shadow-ink) 35%, transparent); --surface-recessed-hover: color-mix(in srgb, var(--shadow-ink) 22%, transparent); --surface-recessed-border: 1px solid rgb(255 255 255 / 0.05); --band-recess: color-mix(in srgb, var(--shadow-ink) 45%, transparent); --gm-ground-isometric: linear-gradient(180deg, #101114 0%, #08080a 100%); --gm-glass-container-bg-tint: color-mix(in oklab, color-mix(in oklab, var(--color-surface-raised) 100%, white 9%) 82%, transparent); --gm-glass-container-bg: linear-gradient(180deg, color-mix(in oklab, var(--gm-glass-container-bg-tint) 100%, white 7%) 0%, var(--gm-glass-container-bg-tint) 55%, color-mix(in oklab, var(--gm-glass-container-bg-tint) 100%, black 5%) 100%); --gm-glass-container-backdrop: blur(36px) saturate(190%); --gm-glass-container-border: 1px solid rgba(255, 255, 255, 0.14); --gm-glass-container-shadow: var(--elev-2), var(--rim-raised); --gm-glass-slab-bg-tint: color-mix(in oklab, color-mix(in oklab, var(--color-surface-raised) 100%, white 13%) 90%, transparent); --gm-glass-slab-bg: linear-gradient(180deg, color-mix(in oklab, var(--gm-glass-slab-bg-tint) 100%, white 6%) 0%, var(--gm-glass-slab-bg-tint) 55%, color-mix(in oklab, var(--gm-glass-slab-bg-tint) 100%, black 4%) 100%); --gm-glass-slab-border: 1px solid rgba(255, 255, 255, 0.09); --gm-glass-slab-shadow: none; --gm-glass-pill-bg: rgba(34, 37, 44, 0.65); --gm-glass-pill-border: 1px solid rgba(255, 255, 255, 0.16); --gm-glass-pill-shadow: 0 2px 8px -1px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.22); --gm-glass-pill-hover: rgba(50, 54, 64, 0.88); --gm-glass-pill-hover-shadow: var(--elev-2), var(--rim-raised); --gm-primary-button-bg: rgba(75, 150, 144, 0.62); --gm-primary-button-ink: #f4fffe; --gm-primary-button-border: 1px solid rgba(157, 225, 216, 0.50); --gm-primary-button-backdrop: blur(22px) saturate(185%); --gm-primary-button-material: linear-gradient(180deg, rgba(233, 255, 252, 0.28), transparent 48%), radial-gradient(120% 140% at 18% -24%, rgba(127, 179, 173, 0.54), transparent 64%); --gm-primary-button-material-hover: linear-gradient(180deg, rgba(244, 255, 254, 0.38), transparent 52%), radial-gradient(120% 140% at 18% -24%, rgba(127, 179, 173, 0.66), transparent 66%); --gm-primary-button-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.72), inset 0 1px 0 rgba(233, 255, 252, 0.52), inset 0 -1px 0 rgba(3, 18, 20, 0.30); --gm-metallic-rim: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(148, 163, 184, 0.15) 50%, rgba(255, 255, 255, 0.25) 100%); --gm-silicon-gold: #a78044; --gm-silicon-gold-glow: rgba(167, 128, 68, 0.20); --gm-silicon-amber-wash: rgba(60, 45, 24, 0.45); } :lang(en) { --type-display-line: 1.02; --type-heading-1-line: 1.1; --type-heading-2-line: 1.25; --type-heading-3-line: 1.35; --type-body-line: 1.6; --type-body-small-line: 1.55; --type-label-line: 1.32; --type-display-weight: 500; --type-heading-1-weight: 500; --type-heading-2-weight: 500; --type-heading-3-weight: 500; } :lang(ja) { --type-display-line: 1.25; --type-heading-1-line: 1.35; --type-heading-2-line: 1.45; --type-heading-3-line: 1.55; --type-body-line: 1.8; --type-body-small-line: 1.75; --type-label-line: 1.5; --type-display-weight: 400; --type-heading-1-weight: 400; --type-heading-2-weight: 500; --type-heading-3-weight: 500; line-height: 1.8; line-break: strict; overflow-wrap: anywhere; word-break: normal; }