@layer legacy-demo { :root { --void: #05080E; --ink-900: #0B1020; --ink-800: #141D31; --ink-700: #202C46; --slate-600: #2D3B5A; --slate-500: #4A5A78; --slate-400: #6B7C9C; --mist-300: #AEB8D0; --mist-200: #CDD5E4; --mist-100: #EFF3F9; --white: #FFFFFF; --green-bright:#2BF5A6; --green: #00E18C; --green-600: #00B85C; --green-700: #00A356; --green-800: #007138; --blue-bright: #5AA6FF; --blue: #2E6BFF; --blue-600: #1E6BFF; --blue-700: #1E4FD6; --blue-800: #143CA8; --violet-bright:#9B7BFF; --violet: #7A5CFF; --violet-600: #5F3FEF; --violet-700: #4A2FD0; --violet-800: #34209C; --indigo-bright:#5E7BFF; --indigo: #2D4BD8; --indigo-600: #243CB0; --indigo-700: #1B2E8A; --orange-bright:#FFA94D; --orange: #FF7A1A; --orange-600: #ED5E00; --orange-700: #C44A00; --orange-800: #8F3500; --red-bright: #FF6B6B; --vred: #F5333D; --vred-600: #D81E2A; --vred-700: #A8141F; --vred-800: #730C14; --yellow-bright:#FFD84D; --yellow: #FFC01E; --yellow-600: #E0A400; --yellow-700: #B07F00; --yellow-800: #6E4F00; --cyan: #19C7F5; --teal: #1AD4CF; --cyan-bright: #5FD0FF; --success: #00E18C; --warning: #FFB920; --error: #FF4D6A; --info: #3B9EFF; --brand: var(--green); --brand-bright: var(--green-bright); --brand-deep: var(--green-600); --brand-darker: var(--green-800); --brand-contrast: var(--ink-900); --brand-tint: rgba(0,225,140,0.12); --brand-tint-strong:rgba(0,225,140,0.22); --brand-glow: none; --brand-grad-to: var(--teal); --grad-brand: linear-gradient(120deg, var(--brand), var(--brand-grad-to)); --grad-word: linear-gradient(102deg, var(--white) 2%, var(--brand) 48%, var(--brand-grad-to) 86%); --glass-surface: color-mix(in srgb, var(--ink-800) 68%, transparent); --glass-border: rgba(207,232,247,0.20); --glass-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 0 0 1px rgba(255,255,255,0.02) inset, 0 28px 74px -34px rgba(0,0,0,0.94); --glass-blur: 26px; --glass-sheen: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.018) 34%, rgba(255,255,255,0) 60%); --glass-fill: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.018) 34%, transparent 60%), var(--glass-surface); --glass-hi: rgba(255,255,255,0.10); --ambient-glow: color-mix(in srgb, var(--brand) 8%, transparent); --ambient-glow-2: color-mix(in srgb, var(--brand-grad-to) 5%, transparent); --bg-base: var(--void); --bg-page: var(--ink-900); --surface-card: var(--ink-800); --surface-raised: var(--ink-700); --surface-sunken: var(--void); --surface-hover: var(--ink-700); --text-strong: var(--mist-100); --text-body: var(--mist-300); --text-muted: var(--slate-400); --text-faint: var(--slate-500); --text-on-brand: var(--ink-900); --border-subtle: rgba(174,184,208,0.10); --border-default: rgba(174,184,208,0.16); --border-strong: rgba(174,184,208,0.28); --border-brand: var(--brand); --ring: rgba(0,225,140,0.55); } [data-brand="payments"] { --brand: var(--green); --brand-bright: var(--green-bright); --brand-grad-to: var(--teal); --brand-deep: var(--green-600); --brand-darker: var(--green-800); --brand-tint: rgba(0,225,140,0.12); --brand-tint-strong: rgba(0,225,140,0.22); --brand-glow: none; --brand-contrast: var(--ink-900); --text-on-brand: var(--ink-900); --ring: rgba(0,225,140,0.55); } [data-brand="sign"] { --brand: var(--blue); --brand-bright: var(--blue-bright); --brand-grad-to: var(--cyan); --brand-deep: var(--blue-700); --brand-darker: var(--blue-800); --brand-tint: rgba(46,107,255,0.14); --brand-tint-strong: rgba(46,107,255,0.26); --brand-glow: none; --brand-contrast: var(--white); --text-on-brand: var(--white); --ring: rgba(46,107,255,0.60); } [data-brand="pos"] { --brand: var(--violet); --brand-bright: var(--violet-bright); --brand-grad-to: var(--violet-bright); --brand-deep: var(--violet-600); --brand-darker: var(--violet-800); --brand-tint: rgba(122,92,255,0.14); --brand-tint-strong: rgba(122,92,255,0.26); --brand-glow: none; --brand-contrast: var(--white); --text-on-brand: var(--white); --ring: rgba(122,92,255,0.60); } [data-brand="holdings"] { --brand: var(--indigo); --brand-bright: var(--indigo-bright); --brand-grad-to: var(--cyan-bright); --brand-deep: var(--indigo-600); --brand-darker: var(--indigo-700); --brand-tint: rgba(45,75,216,0.14); --brand-tint-strong: rgba(45,75,216,0.26); --brand-glow: none; --brand-contrast: var(--white); --text-on-brand: var(--white); --ring: rgba(45,75,216,0.60); } [data-brand="gateway"] { --brand: var(--orange); --brand-bright: var(--orange-bright); --brand-grad-to: var(--orange-bright); --brand-deep: var(--orange-600); --brand-darker: var(--orange-800); --brand-tint: rgba(255,122,26,0.14); --brand-tint-strong: rgba(255,122,26,0.26); --brand-glow: none; --brand-contrast: var(--ink-900); --text-on-brand: var(--ink-900); --ring: rgba(255,122,26,0.60); } [data-brand="vending"] { --brand: var(--vred); --brand-bright: var(--red-bright); --brand-grad-to: var(--red-bright); --brand-deep: var(--vred-600); --brand-darker: var(--vred-800); --brand-tint: rgba(245,51,61,0.14); --brand-tint-strong: rgba(245,51,61,0.26); --brand-glow: none; --brand-contrast: var(--white); --text-on-brand: var(--white); --ring: rgba(245,51,61,0.60); } [data-brand="screencast"] { --brand: var(--yellow); --brand-bright: var(--yellow-bright); --brand-grad-to: var(--yellow-bright); --brand-deep: var(--yellow-600); --brand-darker: var(--yellow-800); --brand-tint: rgba(255,192,30,0.14); --brand-tint-strong: rgba(255,192,30,0.26); --brand-glow: none; --brand-contrast: var(--ink-900); --text-on-brand: var(--ink-900); --ring: rgba(255,192,30,0.55); } [data-theme="light"] { --bg-base: var(--mist-100); --bg-page: var(--white); --surface-card: var(--white); --surface-raised: var(--mist-100); --surface-sunken: var(--mist-100); --surface-hover: var(--mist-100); --text-strong: var(--ink-900); --text-body: var(--ink-700); --text-muted: var(--slate-500); --text-faint: var(--slate-400); --border-subtle: rgba(11,16,32,0.08); --border-default: rgba(11,16,32,0.14); --border-strong: rgba(11,16,32,0.24); --warning: #B7791F; --error: #C81E4E; --amber: #B7791F; --red: #C81E4E; --danger: #C81E4E; --green-ink:#067A46; --glass-surface: color-mix(in srgb, #ffffff 74%, transparent); --glass-border: rgba(11,16,32,0.10); --glass-hi: rgba(255,255,255,0.85); --glass-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 0 0 1px rgba(11,16,32,0.04) inset, 0 18px 50px -28px rgba(16,24,40,0.22); } :root { --font-sans: var(--stz-font-body); --font-display: var(--stz-font-display); --font-mono: var(--stz-font-utility); --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; --fw-black: 800; --fs-display: 64px; --lh-display: 1.02; --ls-display: -1.5px; --fs-headline: 40px; --lh-headline: 1.08; --ls-headline: -1px; --fs-title: 28px; --lh-title: 1.15; --ls-title: -0.5px; --fs-subtitle: 20px; --lh-subtitle: 1.35; --ls-subtitle: 0px; --fs-body: 16px; --lh-body: 1.55; --ls-body: 0px; --fs-small: 14px; --lh-small: 1.5; --ls-small: 0px; --fs-caption: 13px; --lh-caption: 1.45; --ls-caption: 0px; --fs-overline: 11px; --lh-overline: 1.2; --ls-overline: 3px; --fs-metric: 26px; --fs-metric-sm: 20px; } :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --radius-xs: 4px; --radius-sm: 6px; --radius-md: var(--stz-radius-control); --radius-lg: var(--stz-radius-card); --radius-xl: var(--stz-radius-panel); --radius-2xl: var(--stz-radius-feature); --radius-full: 999px; --shadow-sm: 0 1px 2px rgba(0,0,0,0.40); --shadow-md: 0 6px 18px rgba(0,0,0,0.45); --shadow-lg: 0 18px 48px rgba(0,0,0,0.55); --shadow-xl: 0 32px 80px rgba(0,0,0,0.60); --shadow-edge: inset 0 1px 0 rgba(255,255,255,0.04); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; --dur-globe: 14s; --container: 1200px; --container-wide: 1440px; --grid-line: rgba(174,184,208,0.06); --grid-line-strong: rgba(174,184,208,0.10); --grid-size: 28px; --grid-size-lg: 60px; --grid-img: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); --grid-img-brand: linear-gradient(color-mix(in srgb, var(--brand) 16%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--brand) 16%, transparent) 1px, transparent 1px); --grid-img-dots: radial-gradient(var(--grid-line-strong) 1px, transparent 1.4px); } * { box-sizing: border-box; } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); background: var(--bg-page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--brand-tint-strong); color: var(--text-strong); } a { color: var(--brand); text-decoration: none; } a:hover { color: var(--brand-bright); } .t-display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: var(--fw-bold); color: var(--text-strong); } .t-headline { font-size: var(--fs-headline); line-height: var(--lh-headline); letter-spacing: var(--ls-headline); font-weight: var(--fw-bold); color: var(--text-strong); } .t-title { font-size: var(--fs-title); line-height: var(--lh-title); letter-spacing: var(--ls-title); font-weight: var(--fw-semibold); color: var(--text-strong); } .t-subtitle { font-size: var(--fs-subtitle); line-height: var(--lh-subtitle); letter-spacing: var(--ls-subtitle); font-weight: var(--fw-medium); color: var(--text-strong); } .t-body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); } .t-small { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-body); } .t-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); } .t-overline { font-size: var(--fs-overline); line-height: var(--lh-overline); letter-spacing: var(--ls-overline); text-transform: uppercase; font-weight: var(--fw-bold); color: var(--brand); } .t-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .t-amount { font-family: var(--font-mono); font-weight: var(--fw-medium); color: var(--brand); font-variant-numeric: tabular-nums; letter-spacing: 0.5px; } @keyframes lifted-spin { to { transform: rotate(360deg); } } @keyframes lifted-pulse { 0%,100% { opacity: .9; } 50% { opacity: 1; } } .lds-ambient { position: relative; isolation: isolate; background: radial-gradient(820px 480px at 84% -12%, var(--ambient-glow), transparent 60%), radial-gradient(720px 520px at 6% 108%, var(--ambient-glow-2), transparent 58%), var(--bg-page); } .lds-ambient::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(174,184,208,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(174,184,208,0.05) 1px, transparent 1px); background-size: 60px 60px; -webkit-mask-image: radial-gradient(circle at 50% -4%, #000, transparent 72%); mask-image: radial-gradient(circle at 50% -4%, #000, transparent 72%); } .lds-glass { position: relative; background: var(--glass-fill); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3); backdrop-filter: blur(var(--glass-blur)) saturate(1.3); box-shadow: var(--glass-shadow); } .lds-glass::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; border-radius: inherit; background: linear-gradient(90deg, transparent, var(--glass-hi) 22%, var(--glass-hi) 78%, transparent); pointer-events: none; } .lds-glass--edge { position: relative; } .lds-glass--edge::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; border-radius: inherit; background: linear-gradient(90deg, transparent, var(--brand) 20%, var(--brand-grad-to) 80%, transparent); opacity: 0.4; } .lds-wordmark { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; color: var(--text-strong); } .lds-display { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; color: var(--text-strong); } .lds-grid { background-image: var(--grid-img); background-size: var(--grid-size) var(--grid-size); } .lds-grid-lg { background-size: var(--grid-size-lg) var(--grid-size-lg); } .lds-grid-dots { background-image: var(--grid-img-dots); background-size: var(--grid-size) var(--grid-size); } .lds-grid--brand { background-image: var(--grid-img-brand); } .lds-grid--fade { position: relative; background-image: none !important; } .lds-grid--fade::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--grid-img); background-size: var(--grid-size) var(--grid-size); -webkit-mask-image: radial-gradient(120% 90% at 50% -10%, #000, transparent 75%); mask-image: radial-gradient(120% 90% at 50% -10%, #000, transparent 75%); } .lds-grid-lg.lds-grid--fade::after { background-size: var(--grid-size-lg) var(--grid-size-lg); } .lds-grid--brand.lds-grid--fade::after { background-image: var(--grid-img-brand); } .lds-grid--fade > * { position: relative; z-index: 1; } .lds-hud { position: relative; } .lds-hud > * { position: relative; z-index: 1; } .lds-hud::before, .lds-hud::after { content: ""; position: absolute; width: 10px; height: 10px; pointer-events: none; border: 1.5px solid var(--brand); opacity: .55; z-index: 0; } .lds-hud::before { top: 8px; left: 8px; border-right: none; border-bottom: none; } .lds-hud::after { bottom: 8px; right: 8px; border-left: none; border-top: none; } .lds-hud--2::before { top: 8px; left: 8px; } .lds-progress { position: fixed; top: 0; left: 0; height: 2px; z-index: 60; background: var(--brand); transition: width var(--dur-slow) var(--ease-out); } .lds-grad-text { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; } .lds-grad-fill { background: var(--grad-brand); } @media (prefers-reduced-motion: reduce) { .lds-progress { transition: none; } } :root { --stz-ink-950: #071521; --stz-navy-800: #0c3446; --stz-cyan-500: #00a7e1; --stz-cyan-700: #006d93; --stz-sky-300: #72dcff; --stz-lime-400: #b7f52b; --stz-foam-50: #f4f9f8; --stz-mist-100: #e8f2f3; --stz-paper: #ffffff; --stz-slate-600: #4b5d68; --stz-rule-300: #cedde2; --stz-coral-500: #ea5e3f; --stz-ink-900: #0a1e2e; --stz-slate-300: #9db0bc; --stz-text: var(--stz-ink-950); --stz-text-muted: var(--stz-slate-600); --stz-surface-canvas: var(--stz-foam-50); --stz-surface-panel: var(--stz-paper); --stz-surface-shell: var(--stz-ink-950); --stz-action-primary: var(--stz-lime-400); --stz-action-primary-border: #618906; --stz-action-secondary: var(--stz-cyan-700); --stz-focus: var(--stz-coral-500); --stz-status-success: #18794e; --stz-status-info: var(--stz-cyan-700); --stz-status-warning: #a15c00; --stz-status-danger: #c9382d; --stz-status-success-on-shell: #0eb86c; --stz-status-info-on-shell: var(--stz-cyan-500); --stz-status-warning-on-shell: #e68b0f; --stz-status-danger-on-shell: #fe776c; --stz-on-action-primary: var(--stz-ink-950); --stz-on-action-secondary: var(--stz-paper); --stz-on-surface-shell: var(--stz-foam-50); --stz-on-surface-shell-muted: var(--stz-slate-300); --stz-on-status-success: var(--stz-paper); --stz-on-status-info: var(--stz-paper); --stz-on-status-warning: var(--stz-paper); --stz-on-status-danger: var(--stz-paper); --stz-on-status-shell: var(--stz-ink-950); --stz-font-display: "Barlow Condensed", "Bahnschrift Condensed", "Arial Narrow", sans-serif; --stz-font-body: "Inter", "Segoe UI", Arial, sans-serif; --stz-font-utility: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace; --stz-leading-display: .92; --stz-leading-body: 1.55; --stz-radius-control: 10px; --stz-radius-card: 14px; --stz-radius-panel: 22px; --stz-radius-feature: 32px; --stz-shadow-card: 0 10px 30px rgba(7, 21, 33, .08); --stz-shadow-feature: 0 24px 80px rgba(7, 21, 33, .16); --stz-motion-fast: 120ms cubic-bezier(.2, .8, .2, 1); --stz-motion-standard: 180ms cubic-bezier(.2, .8, .2, 1); --stz-motion-route: 420ms cubic-bezier(.2, .8, .2, 1); --stz-space-1: 4px; --stz-space-2: 8px; --stz-space-3: 12px; --stz-space-4: 16px; --stz-space-5: 24px; --stz-space-6: 32px; --stz-space-7: 48px; --stz-space-8: 64px; --stz-content-wide: 1180px; } @media (prefers-reduced-motion: reduce) { :root { --stz-motion-fast: 1ms linear; --stz-motion-standard: 1ms linear; --stz-motion-route: 1ms linear; } } :root[data-theme="dark"] { color-scheme: dark; --stz-text: var(--stz-foam-50); --stz-text-muted: var(--stz-slate-300); --stz-surface-canvas: var(--stz-ink-900); --stz-surface-panel: var(--stz-navy-800); --stz-surface-shell: var(--stz-ink-950); --stz-action-secondary: var(--stz-cyan-500); --stz-status-info: var(--stz-status-info-on-shell); --stz-status-success: var(--stz-status-success-on-shell); --stz-status-warning: var(--stz-status-warning-on-shell); --stz-status-danger: var(--stz-status-danger-on-shell); --stz-on-action-secondary: var(--stz-ink-950); --stz-on-status-success: var(--stz-ink-950); --stz-on-status-info: var(--stz-ink-950); --stz-on-status-warning: var(--stz-ink-950); --stz-on-status-danger: var(--stz-ink-950); --stz-rule-300: #22414f; --stz-shadow-card: 0 10px 30px rgba(2, 8, 14, .5); --stz-shadow-feature: 0 24px 80px rgba(2, 8, 14, .62); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --stz-text: var(--stz-foam-50); --stz-text-muted: var(--stz-slate-300); --stz-surface-canvas: var(--stz-ink-900); --stz-surface-panel: var(--stz-navy-800); --stz-surface-shell: var(--stz-ink-950); --stz-action-secondary: var(--stz-cyan-500); --stz-status-info: var(--stz-status-info-on-shell); --stz-status-success: var(--stz-status-success-on-shell); --stz-status-warning: var(--stz-status-warning-on-shell); --stz-status-danger: var(--stz-status-danger-on-shell); --stz-on-action-secondary: var(--stz-ink-950); --stz-on-status-success: var(--stz-ink-950); --stz-on-status-info: var(--stz-ink-950); --stz-on-status-warning: var(--stz-ink-950); --stz-on-status-danger: var(--stz-ink-950); --stz-rule-300: #22414f; --stz-shadow-card: 0 10px 30px rgba(2, 8, 14, .5); --stz-shadow-feature: 0 24px 80px rgba(2, 8, 14, .62); } } :root, :root[data-theme], [data-brand], :root [data-brand] { --font-sans: var(--stz-font-body); --font-display: var(--stz-font-display); --font-mono: var(--stz-font-utility); --sans: var(--stz-font-body); --disp: var(--stz-font-display); --mono: var(--stz-font-utility); --p-display: var(--stz-font-display); --brand: var(--stz-action-secondary); --brand-bright: var(--stz-action-secondary); --brand-deep: var(--stz-action-secondary); --brand-darker: var(--stz-action-secondary); --brand-grad-to: var(--stz-action-secondary); --brand-contrast: var(--stz-on-action-secondary); --text-on-brand: var(--stz-on-action-secondary); --brand-tint: color-mix(in srgb, var(--stz-action-secondary) 12%, transparent); --brand-tint-strong: color-mix(in srgb, var(--stz-action-secondary) 22%, transparent); --brand-glow: none; --accent: var(--stz-action-secondary); --accent-2: var(--stz-action-secondary); --em: var(--stz-action-secondary); --em2: var(--stz-action-secondary); --blue: var(--stz-status-info); --green: var(--stz-status-success); --red: var(--stz-status-danger); --amber: var(--stz-status-warning); --success: var(--stz-status-success); --warning: var(--stz-status-warning); --danger: var(--stz-status-danger); --error: var(--stz-status-danger); --info: var(--stz-status-info); --bg: var(--stz-surface-canvas); --bg2: var(--stz-surface-canvas); --bg-page: var(--stz-surface-canvas); --surface: var(--stz-surface-panel); --surface-2: var(--stz-surface-canvas); --surface-3: var(--stz-surface-panel); --surface-card: var(--stz-surface-panel); --surface-panel: var(--stz-surface-panel); --surface-raised: var(--stz-surface-panel); --surface-input: var(--stz-surface-canvas); --surface-hover: var(--stz-surface-canvas); --text: var(--stz-text); --text-2: var(--stz-text-muted); --text-strong: var(--stz-text); --text-body: var(--stz-text); --text-muted: var(--stz-text-muted); --text-faint: var(--stz-text-muted); --muted: var(--stz-text-muted); --dim: var(--stz-text-muted); --ink: var(--stz-on-action-secondary); --border: var(--stz-rule-300); --border-2: var(--stz-text-muted); --border-subtle: var(--stz-rule-300); --border-default: var(--stz-rule-300); --border-strong: var(--stz-text-muted); --hair: var(--stz-rule-300); --ring: var(--stz-focus); --radius-md: var(--stz-radius-control); --radius-lg: var(--stz-radius-card); --radius-xl: var(--stz-radius-panel); --radius-2xl: var(--stz-radius-feature); --r: var(--stz-radius-card); --r-sm: var(--stz-radius-control); --r-lg: var(--stz-radius-panel); --r-xl: var(--stz-radius-feature); --dur-base: 180ms; --glass: var(--stz-surface-panel); --glass-2: var(--stz-surface-panel); --glass-fill: var(--stz-surface-panel); --glass-surface: var(--stz-surface-panel); --glass-panel: var(--stz-surface-panel); --glass-panel-strong: var(--stz-surface-panel); --glass-border: var(--stz-rule-300); --glass-border-strong: var(--stz-text-muted); --glass-blur: 0px; --glass-shadow: var(--stz-shadow-card); --glass-hi: transparent; --glass-sheen: none; --shadow-sm: var(--stz-shadow-card); --shadow-md: var(--stz-shadow-card); --shadow-lg: var(--stz-shadow-feature); --shadow-xl: var(--stz-shadow-feature); --shadow-edge: 0 0 transparent; --glow-em: none; --glow: transparent; --ambient-glow: transparent; --ambient-glow-2: transparent; --grad-brand: linear-gradient(var(--stz-action-secondary),var(--stz-action-secondary)); --grad-em: linear-gradient(var(--stz-action-secondary),var(--stz-action-secondary)); --grad-word: linear-gradient(var(--stz-text),var(--stz-text)); --grad-head: linear-gradient(var(--stz-surface-panel),var(--stz-surface-panel)); --grad-edge: none; --grid-img: none; --grid-img-brand: none; --grid-img-dots: none; } html body { background: var(--stz-surface-canvas); color: var(--stz-text); font-family: var(--stz-font-body); } body::before, body::after, .lds-ambient::before, .lds-ambient::after, .ambient, .ambient-grid, .ambient-glow, .noise, .grain, .aurora { display: none !important; } .lds-ambient { background: var(--stz-surface-canvas); } .lds-glass, .ap-card, .tile, .card, .panel, .lg-card, .view-sign .sg-stat, .view-sign .sg-tpl, .modal, .ap-modal { background: var(--stz-surface-panel); backdrop-filter: none; -webkit-backdrop-filter: none; } body *, body *::before, body *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .lds-glass::after, .lds-glass--edge::before, .lg-card::before { display: none; } .lds-globe { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; filter: none !important; animation: none !important; } .lds-globe img { display: block; object-fit: contain; max-width: 100%; } .stz-lockup { display: block; width: 176px; height: auto; max-width: 100%; } .ap-brand__wm, .lg-lock__wm, .lg-brand__wm, .brand-word { font-family: var(--stz-font-display); font-weight: 800; } h1, h2, .ap-h1, .ap-h2 { font-family: var(--stz-font-display); } html body :is(.ap-btn--primary, .btn.primary, .btn-primary, .btn.pri, .btn--primary, .button-primary, .primary-btn, .lds-btn--primary, .pay-btn, #payBtn, #signBtn, .p-btn-primary, .sg-btn-primary, .cta-primary, .btn-pri, .paybtn) { background: var(--stz-action-primary); color: var(--stz-on-action-primary); border: 1px solid var(--stz-action-primary-border); border-radius: var(--stz-radius-control); box-shadow: none; text-shadow: none; } html body :is(.ap-btn--primary, .btn.primary, .btn-primary, .btn.pri, .btn--primary, .button-primary, .primary-btn, .lds-btn--primary, .pay-btn, #payBtn, #signBtn, .p-btn-primary, .sg-btn-primary, .cta-primary, .btn-pri, .paybtn):hover { filter: brightness(.96); } html body #google-daily button.ap-btn:disabled { background: var(--stz-surface-canvas); color: var(--stz-text-muted); border-color: var(--stz-rule-300); box-shadow: none; filter: none; opacity: 1; cursor: not-allowed; } html body :focus-visible { outline: 3px solid var(--stz-focus) !important; outline-offset: 3px; } html body :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=range]) { color: var(--stz-text); background-color: var(--stz-surface-panel); border-color: var(--stz-text-muted); } .ap-side, .ap-top, .ap-rail, .ap-sidebar, .sidebar, .ap-topbar { background: var(--stz-surface-shell); color: var(--stz-on-surface-shell); --text: var(--stz-on-surface-shell); --text-strong: var(--stz-on-surface-shell); --text-body: var(--stz-on-surface-shell); --text-2: var(--stz-on-surface-shell-muted); --muted: var(--stz-on-surface-shell-muted); --text-muted: var(--stz-on-surface-shell-muted); --text-faint: var(--stz-on-surface-shell-muted); --dim: var(--stz-on-surface-shell-muted); --brand: var(--stz-cyan-500); --brand-bright: var(--stz-cyan-500); --success: var(--stz-status-success-on-shell); --error: var(--stz-status-danger-on-shell); --warning: var(--stz-status-warning-on-shell); --info: var(--stz-status-info-on-shell); } .stz-deployment-note { font-size: 12px; line-height: 1.5; color: var(--stz-text-muted); padding: 10px 16px; border-bottom: 1px solid var(--stz-rule-300); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 1ms !important; transition-duration: 1ms !important; } } html body .ap-main { background: var(--stz-surface-canvas); } .ap-main::before,.ap-main::after,.ap-side::before,.ap-side::after { display:none !important; } .ap-side { --glass-fill:var(--stz-navy-800); --surface-hover:var(--stz-navy-800); --surface-raised:var(--stz-navy-800); } .ap-brand { flex-wrap:wrap; } .ap-brand .stz-lockup { width:188px; } .ap-collapsed .stz-lockup { display:none; } .ap-dot { animation:none; box-shadow:none; } .lg-card,.ap-card,.card { border-radius:var(--stz-radius-card); } html body .paybtn { background:var(--stz-action-primary);color:var(--stz-on-action-primary);border:1px solid var(--stz-action-primary-border); } :root[data-stz-page="checkout"], :root[data-stz-page="og-sign"] { --ink:var(--stz-text); } html body .ap-btn--ghost { background:var(--stz-surface-panel);color:var(--stz-text);border:1px solid var(--stz-text-muted); } html body .ap-btn--ghost:hover { background:var(--stz-surface-canvas);color:var(--stz-text); } :root[data-payment-surface="portal"][data-theme="light"] .sidebar { background: var(--stz-surface-panel); color: var(--stz-text); --text: var(--stz-text); --text-strong: var(--stz-text); --text-body: var(--stz-text); --text-2: var(--stz-text-muted); --muted: var(--stz-text-muted); --text-muted: var(--stz-text-muted); --text-faint: var(--stz-text-muted); --dim: var(--stz-text-muted); --brand: var(--stz-action-secondary); --brand-bright: var(--stz-action-secondary); --accent: var(--stz-action-secondary); --accent-2: var(--stz-action-secondary); --success: var(--stz-status-success); --error: var(--stz-status-danger); --warning: var(--stz-status-warning); --info: var(--stz-status-info); } :root[data-payment-surface="portal"][data-theme="light"] #tab-invoices .scarlett-console { background: var(--stz-surface-panel); color: var(--stz-text); border-color: var(--stz-rule-300); box-shadow: var(--stz-shadow-card); --text: var(--stz-text); --text-1: var(--stz-text); --text-strong: var(--stz-text); --text-2: var(--stz-text-muted); --muted: var(--stz-text-muted); } :root[data-payment-surface="portal"][data-theme="light"] #tab-invoices .scarlett-console::before { display: none; } :root[data-payment-surface="portal"][data-theme="light"] #tab-invoices .scarlett-console :is(.scarlett-main, .scarlett-flow, .scarlett-stats, .scarlett-log, .scarlett-call-row) { border-color: var(--stz-rule-300); } :root[data-payment-surface="portal"][data-theme="light"] #tab-invoices .scarlett-console :is(.scarlett-step, .scarlett-stats > div, .scarlett-mode-pill) { background: var(--stz-surface-canvas); border-color: var(--stz-rule-300); } :root[data-payment-surface="portal"][data-theme="light"] #tab-invoices .scarlett-controls .btn-ghost { background: var(--stz-surface-panel); color: var(--stz-text); border-color: var(--stz-text-muted); } :root[data-payment-surface="portal"][data-theme="light"] #tab-invoices .scarlett-call-row { flex-wrap: wrap; overflow-wrap: anywhere; } :root[data-payment-surface="portal"][data-theme="light"] #tab-invoices .scarlett-call-row em { white-space: normal; } }