@property --lg-value { syntax: "<number>"; inherits: true; initial-value: 0; }
:root,
:root[data-theme="dark"] {
color-scheme: dark;
--lg-bg: #050B14;
--lg-bg-2: #081321;
--lg-surface: #0B1726;
--lg-surface-2: #102035;
--lg-surface-solid: #0B1726;
--lg-border: rgba(92, 164, 255, .18);
--lg-border-strong: #526D90;
--lg-border-hover: rgba(54, 199, 255, .5);
--lg-text: #F4F7FC;
--lg-text-2: #A7B4C5;
--lg-text-3: #8592A6;
--lg-muted: #6F7D91;
--lg-blue: #1677FF;
--lg-link: #5CA8FF;
--lg-cyan: #36C7FF;
--lg-success: #32DFA3;
--lg-warning: #F5B942;
--lg-high: #FF8A4C;
--lg-critical: #FF4D5E;
--lg-purple: #9B6CFF;
--lg-focus: #36C7FF;
--lg-on-primary: #04101F;
--lg-grad-primary: linear-gradient(100deg, #1677FF 0%, #36C7FF 100%);
--lg-grad-text: linear-gradient(95deg, #3D8BFF 0%, #36C7FF 70%);
--lg-grad-critical: linear-gradient(100deg, #FF4D5E 0%, #FF7A3D 100%);
--lg-grad-success: linear-gradient(100deg, #32DFA3 0%, #36C7FF 100%);
--lg-card-bg: linear-gradient(180deg, rgba(16, 32, 53, .72), rgba(11, 23, 38, .64));
--lg-card-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), inset 0 0 32px rgba(54, 199, 255, .025), 0 24px 48px -28px rgba(0, 0, 0, .85);
--lg-shadow-lg: 0 40px 80px -24px rgba(0, 0, 0, .7), 0 0 0 1px rgba(92, 164, 255, .08);
--lg-glow: 0 0 0 1px rgba(54, 199, 255, .35), 0 10px 36px -8px rgba(54, 199, 255, .5);
--lg-glow-soft: 0 18px 50px -24px rgba(54, 199, 255, .45);
--lg-glow-top: rgba(22, 119, 255, .16);
--lg-grid-line: rgba(92, 164, 255, .055);
--lg-nav-bg: rgba(5, 11, 20, .72);
--lg-scrim: rgba(2, 6, 12, .66);
--lg-code-bg: #060F1B;
--lg-input-bg: rgba(5, 11, 20, .6);
--lg-chip-bg: rgba(92, 164, 255, .06);
--lg-track: rgba(167, 180, 197, .16);
--lg-knob: #A7B4C5;
}
:root[data-theme="light"] {
color-scheme: light;
--lg-bg: #F5F8FC;
--lg-bg-2: #EEF3FA;
--lg-surface: #FFFFFF;
--lg-surface-2: #EEF3FA;
--lg-surface-solid: #FFFFFF;
--lg-border: rgba(11, 40, 90, .12);
--lg-border-strong: #7A889C;
--lg-border-hover: rgba(11, 92, 213, .45);
--lg-text: #0B1726;
--lg-text-2: #46566B;
--lg-text-3: #56667B;
--lg-muted: #8693A5;
--lg-blue: #0B5CD5;
--lg-link: #0B5CD5;
--lg-cyan: #00668F;
--lg-success: #046C4E;
--lg-warning: #875400;
--lg-high: #A83E15;
--lg-critical: #B91C30;
--lg-purple: #6A3FD0;
--lg-focus: #0B5CD5;
--lg-on-primary: #FFFFFF;
--lg-grad-primary: linear-gradient(100deg, #0B5CD5 0%, #0B6AA0 100%);
--lg-grad-text: linear-gradient(95deg, #0B5CD5 0%, #00668F 80%);
--lg-grad-critical: linear-gradient(100deg, #B91C30 0%, #A83E15 100%);
--lg-grad-success: linear-gradient(100deg, #046C4E 0%, #00668F 100%);
--lg-card-bg: #FFFFFF;
--lg-card-shadow: 0 1px 2px rgba(11, 23, 38, .05), 0 16px 40px -24px rgba(16, 45, 90, .24);
--lg-shadow-lg: 0 40px 80px -28px rgba(16, 45, 90, .35), 0 0 0 1px rgba(11, 40, 90, .06);
--lg-glow: 0 0 0 1px rgba(11, 92, 213, .25), 0 10px 28px -12px rgba(11, 92, 213, .5);
--lg-glow-soft: 0 22px 48px -26px rgba(11, 92, 213, .4);
--lg-glow-top: rgba(11, 92, 213, .07);
--lg-grid-line: rgba(11, 92, 213, .07);
--lg-nav-bg: rgba(245, 248, 252, .8);
--lg-scrim: rgba(11, 23, 38, .45);
--lg-code-bg: #F0F4FA;
--lg-input-bg: #FFFFFF;
--lg-chip-bg: rgba(11, 40, 90, .04);
--lg-track: rgba(11, 40, 90, .14);
--lg-knob: #56667B;
}
@media (prefers-color-scheme: light) {
:root:not([data-theme]) {
color-scheme: light;
--lg-bg: #F5F8FC; --lg-bg-2: #EEF3FA; --lg-surface: #FFFFFF; --lg-surface-2: #EEF3FA; --lg-surface-solid: #FFFFFF;
--lg-border: rgba(11, 40, 90, .12); --lg-border-strong: #7A889C; --lg-border-hover: rgba(11, 92, 213, .45);
--lg-text: #0B1726; --lg-text-2: #46566B; --lg-text-3: #56667B; --lg-muted: #8693A5;
--lg-blue: #0B5CD5;  --lg-link: #0B5CD5; --lg-cyan: #00668F; --lg-success: #046C4E; --lg-warning: #875400;
--lg-high: #A83E15; --lg-critical: #B91C30; --lg-purple: #6A3FD0; --lg-focus: #0B5CD5; --lg-on-primary: #FFFFFF;
--lg-grad-primary: linear-gradient(100deg, #0B5CD5 0%, #0B6AA0 100%);
--lg-grad-text: linear-gradient(95deg, #0B5CD5 0%, #00668F 80%);
--lg-grad-critical: linear-gradient(100deg, #B91C30 0%, #A83E15 100%);
--lg-grad-success: linear-gradient(100deg, #046C4E 0%, #00668F 100%);
--lg-card-bg: #FFFFFF;
--lg-card-shadow: 0 1px 2px rgba(11, 23, 38, .05), 0 16px 40px -24px rgba(16, 45, 90, .24);
--lg-shadow-lg: 0 40px 80px -28px rgba(16, 45, 90, .35), 0 0 0 1px rgba(11, 40, 90, .06);
--lg-glow: 0 0 0 1px rgba(11, 92, 213, .25), 0 10px 28px -12px rgba(11, 92, 213, .5);
--lg-glow-soft: 0 22px 48px -26px rgba(11, 92, 213, .4);
--lg-glow-top: rgba(11, 92, 213, .07); --lg-grid-line: rgba(11, 92, 213, .07);
--lg-nav-bg: rgba(245, 248, 252, .8); --lg-scrim: rgba(11, 23, 38, .45); --lg-code-bg: #F0F4FA;
--lg-input-bg: #FFFFFF; --lg-chip-bg: rgba(11, 40, 90, .04); --lg-track: rgba(11, 40, 90, .14); --lg-knob: #56667B;
}
}
:root {
--lg-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--lg-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
--lg-fs-display: clamp(2.75rem, 1.2rem + 5.6vw, 6.25rem);
--lg-fs-h1: clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem);
--lg-fs-h2: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem);
--lg-fs-h3: clamp(1.25rem, 1.08rem + .6vw, 1.6rem);
--lg-fs-h4: 1.125rem;
--lg-fs-lead: clamp(1.075rem, 1rem + .35vw, 1.3rem);
--lg-fs-body: 1rem;
--lg-fs-small: .875rem;
--lg-fs-label: .75rem;
--lg-space-1: 4px; --lg-space-2: 8px; --lg-space-3: 12px; --lg-space-4: 16px; --lg-space-5: 24px;
--lg-space-6: 32px; --lg-space-7: 48px; --lg-space-8: 64px; --lg-space-9: 96px; --lg-space-10: 128px;
--lg-r-sm: 8px; --lg-r: 14px; --lg-r-lg: 22px; --lg-r-pill: 999px;
--lg-max: 1440px;
--lg-content: 1280px;
--lg-gutter: clamp(16px, 3.5vw, 40px);
--lg-section-y: clamp(80px, 9vw, 152px);
--lg-nav-h: 72px;
--lg-ease: cubic-bezier(.2, .7, .2, 1);
--lg-ease-in-out: cubic-bezier(.65, 0, .35, 1);
--lg-dur: 240ms;
--lg-dur-slow: 700ms;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--lg-nav-h) + 16px); }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
table { border-collapse: collapse; }
body {
min-height: 100vh;
font: 400 var(--lg-fs-body)/1.65 var(--lg-font-sans);
color: var(--lg-text-2);
background-color: var(--lg-bg);
background-image: radial-gradient(1100px 620px at 72% -8%, var(--lg-glow-top), transparent 70%);
background-repeat: no-repeat;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: clip;
}
body::before {
content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
background-image: linear-gradient(var(--lg-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--lg-grid-line) 1px, transparent 1px);
background-size: 64px 64px; background-position: center top;
-webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 10%, #000 25%, transparent 85%);
mask-image: radial-gradient(ellipse 85% 75% at 50% 10%, #000 25%, transparent 85%);
}
h1, h2, h3, h4, h5, h6 { color: var(--lg-text); font-weight: 750; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: var(--lg-fs-h1); }
h2 { font-size: var(--lg-fs-h2); }
h3 { font-size: var(--lg-fs-h3); }
h4 { font-size: var(--lg-fs-h4); }
p, li { text-wrap: pretty; }
strong, b { color: var(--lg-text); font-weight: 650; }
a { color: var(--lg-link); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--lg-text); }
code, kbd, samp, pre { font-family: var(--lg-font-mono); font-size: .9em; }
:not(pre) > code { padding: .1em .35em; border-radius: 5px; background: var(--lg-chip-bg); border: 1px solid var(--lg-border); color: var(--lg-text); }
::selection { background: color-mix(in srgb, var(--lg-cyan) 32%, transparent); color: var(--lg-text); }
:focus-visible { outline: 2px solid var(--lg-focus); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
main:focus { outline: none; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.lg-skip {
position: fixed; left: 16px; top: 12px; z-index: 200; padding: 12px 18px; border-radius: 10px;
background: var(--lg-text); color: var(--lg-bg); font-weight: 700; text-decoration: none;
transform: translateY(-160%); transition: transform var(--lg-dur) var(--lg-ease);
}
.lg-skip:focus { transform: none; color: var(--lg-bg); }
.lg-container { width: 100%; max-width: calc(var(--lg-content) + 2 * var(--lg-gutter)); margin-inline: auto; padding-inline: var(--lg-gutter); }
.lg-wide { width: 100%; max-width: calc(var(--lg-max) + 2 * var(--lg-gutter)); margin-inline: auto; padding-inline: var(--lg-gutter); }
.lg-narrow { width: 100%; max-width: calc(760px + 2 * var(--lg-gutter)); margin-inline: auto; padding-inline: var(--lg-gutter); }
.lg-section { position: relative; padding-block: var(--lg-section-y); }
.lg-section--tight { padding-block: calc(var(--lg-section-y) * .6); }
.lg-section--alt { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--lg-bg-2) 70%, transparent) 18%, color-mix(in srgb, var(--lg-bg-2) 70%, transparent) 82%, transparent); }
.lg-section-head { display: grid; gap: var(--lg-space-4); max-width: 880px; margin-bottom: clamp(40px, 5vw, 72px); }
.lg-section-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.lg-grid { display: grid; gap: var(--lg-gap, 24px); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--lg-min, 280px)), 1fr)); }
.lg-stack > * + * { margin-top: var(--lg-stack, 16px); }
.lg-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lg-gap, 12px); }
.lg-split { display: grid; gap: clamp(32px, 5vw, 80px); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
@media (max-width: 899.98px) { .lg-split { grid-template-columns: 1fr; } }
.lg-scroll-x { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--lg-min, 220px)), 1fr)); }
@media (max-width: 719.98px) {
.lg-scroll-x { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(72%, 1fr); overflow-x: auto;
scroll-snap-type: x mandatory; padding-bottom: 8px; margin-inline: calc(-1 * var(--lg-gutter)); padding-inline: var(--lg-gutter); scroll-padding-inline: var(--lg-gutter); }
.lg-scroll-x > * { scroll-snap-align: start; }
}
.lg-display { font-size: var(--lg-fs-display); font-weight: 800; line-height: .94; letter-spacing: -.04em; text-transform: uppercase; color: var(--lg-text); }
.lg-title { font-size: var(--lg-fs-h2); font-weight: 800; line-height: 1; letter-spacing: -.03em; text-transform: uppercase; color: var(--lg-text); }
.lg-h3 { font-size: var(--lg-fs-h3); font-weight: 750; line-height: 1.15; letter-spacing: -.015em; color: var(--lg-text); }
.lg-lead { font-size: var(--lg-fs-lead); line-height: 1.55; color: var(--lg-text-2); max-width: 62ch; }
.lg-grad { background: var(--lg-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lg-mono { font-family: var(--lg-font-mono); }
.lg-label { font: 600 var(--lg-fs-label)/1.3 var(--lg-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--lg-text-3); }
.lg-eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 var(--lg-fs-label)/1.3 var(--lg-font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--lg-cyan); }
.lg-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 1px; background: currentColor; box-shadow: 0 0 10px currentColor; flex: none; }
:root[data-theme="light"] .lg-eyebrow::before { box-shadow: none; }
.lg-text-2 { color: var(--lg-text-2); }
.lg-text-3 { color: var(--lg-text-3); }
.lg-small { font-size: var(--lg-fs-small); }
.lg-prose { max-width: 70ch; font-size: 1.0625rem; line-height: 1.75; }
.lg-prose > * + * { margin-top: 1.1em; }
.lg-prose h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); margin-top: 2.2em; }
.lg-prose h3 { font-size: 1.25rem; margin-top: 1.8em; }
.lg-prose ul, .lg-prose ol { padding-left: 1.3em; }
.lg-prose li + li { margin-top: .45em; }
.lg-prose blockquote { padding: 4px 0 4px 20px; border-left: 2px solid var(--lg-cyan); color: var(--lg-text); }
.lg-kbd { display: inline-block; min-width: 2.2em; padding: 2px 8px; border: 1px solid var(--lg-border-strong); border-bottom-width: 2px; border-radius: 6px; font: 600 .75rem/1.6 var(--lg-font-mono); text-align: center; color: var(--lg-text); background: var(--lg-chip-bg); }
.lg-icon { display: inline-block; width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.lg-icon--lg { width: 28px; height: 28px; stroke-width: 1.5; }
.lg-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px;
border: 1px solid transparent; border-radius: 12px; position: relative; overflow: hidden; isolation: isolate;
font: 750 .8125rem/1.1 var(--lg-font-sans); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
cursor: pointer; transition: box-shadow var(--lg-dur) var(--lg-ease), border-color var(--lg-dur), background-color var(--lg-dur), color var(--lg-dur), transform var(--lg-dur) var(--lg-ease);
}
@media (max-width: 359.98px) { .lg-btn { white-space: normal; text-align: center; } }
.lg-btn .lg-icon { width: 18px; height: 18px; stroke-width: 2; transition: transform var(--lg-dur) var(--lg-ease); }
.lg-btn:hover .lg-icon:last-child { transform: translateX(3px); }
.lg-btn:active { transform: translateY(1px); }
.lg-btn--primary { color: var(--lg-on-primary); background: var(--lg-grad-primary); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 10px 28px -14px var(--lg-blue); }
.lg-btn--primary:hover, .lg-btn--primary:focus-visible { color: var(--lg-on-primary); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), var(--lg-glow); }
.lg-btn--primary::after {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .38) 50%, transparent 70%); transform: translateX(-120%);
}
.lg-btn--primary:hover::after { transform: translateX(120%); transition: transform .8s var(--lg-ease); }
.lg-btn--secondary { color: var(--lg-text); background: var(--lg-chip-bg); border-color: var(--lg-border-strong); }
.lg-btn--secondary:hover { color: var(--lg-text); border-color: var(--lg-cyan); box-shadow: var(--lg-glow-soft); }
.lg-btn--ghost { color: var(--lg-link); background: none; padding-inline: 10px; min-height: 44px; }
.lg-btn--ghost:hover { color: var(--lg-text); }
.lg-btn--block { width: 100%; }
.lg-btn--sm { min-height: 44px; padding: 0 16px; font-size: .75rem; }
.lg-btn[disabled], .lg-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.lg-icon-btn {
display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; border-radius: 12px;
border: 1px solid var(--lg-border); background: var(--lg-chip-bg); color: var(--lg-text); transition: border-color var(--lg-dur), color var(--lg-dur);
}
.lg-icon-btn:hover { border-color: var(--lg-border-hover); color: var(--lg-text); }
.lg-card { position: relative; padding: clamp(20px, 2.4vw, 32px); border: 1px solid var(--lg-border); border-radius: var(--lg-r-lg); background: var(--lg-card-bg); box-shadow: var(--lg-card-shadow); }
.lg-card--glass { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lg-card--flat { box-shadow: none; }
.lg-card--interactive { transition: transform var(--lg-dur) var(--lg-ease), border-color var(--lg-dur), box-shadow var(--lg-dur); }
.lg-card--interactive:hover, .lg-card--interactive:focus-within { transform: translateY(-3px); border-color: var(--lg-border-hover); box-shadow: var(--lg-card-shadow), var(--lg-glow-soft); }
.lg-frame { position: relative; }
.lg-frame::before {
--t: color-mix(in srgb, var(--lg-cyan) 70%, transparent);
content: ""; position: absolute; inset: -7px; pointer-events: none;
background:
linear-gradient(var(--t), var(--t)) left top / 14px 1.5px, linear-gradient(var(--t), var(--t)) left top / 1.5px 14px,
linear-gradient(var(--t), var(--t)) right top / 14px 1.5px, linear-gradient(var(--t), var(--t)) right top / 1.5px 14px,
linear-gradient(var(--t), var(--t)) left bottom / 14px 1.5px, linear-gradient(var(--t), var(--t)) left bottom / 1.5px 14px,
linear-gradient(var(--t), var(--t)) right bottom / 14px 1.5px, linear-gradient(var(--t), var(--t)) right bottom / 1.5px 14px;
background-repeat: no-repeat;
}
[data-status="pass"] { --lg-tone: var(--lg-success); }
[data-status="warning"] { --lg-tone: var(--lg-warning); }
[data-status="blocker"] { --lg-tone: var(--lg-critical); }
[data-status="review"] { --lg-tone: var(--lg-cyan); }
[data-status="unknown"] { --lg-tone: var(--lg-text-3); }
[data-sev="critical"] { --lg-tone: var(--lg-critical); --lg-pips: 4; }
[data-sev="high"] { --lg-tone: var(--lg-high); --lg-pips: 3; }
[data-sev="medium"] { --lg-tone: var(--lg-warning); --lg-pips: 2; }
[data-sev="low"] { --lg-tone: var(--lg-link); --lg-pips: 1; }
.lg-chip {
display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 4px 10px; border-radius: var(--lg-r-pill);
border: 1px solid var(--lg-border); background: var(--lg-chip-bg); color: var(--lg-text-2);
font: 600 .6875rem/1.2 var(--lg-font-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.lg-chip .lg-icon { width: 14px; height: 14px; }
button.lg-chip, .lg-chip--toggle { min-height: 44px; padding: 0 16px; cursor: pointer; transition: border-color var(--lg-dur), background-color var(--lg-dur), color var(--lg-dur); }
button.lg-chip:hover { border-color: var(--lg-border-hover); color: var(--lg-text); }
.lg-chip[aria-pressed="true"], .lg-chip[aria-checked="true"], .lg-chip[aria-selected="true"] { color: var(--lg-text); border-color: var(--lg-blue); background: color-mix(in srgb, var(--lg-blue) 16%, transparent); }
.lg-status {
display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 3px 10px 3px 7px; border-radius: var(--lg-r-pill);
font: 700 .6875rem/1.2 var(--lg-font-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
color: var(--lg-tone, var(--lg-text-3));
background: color-mix(in srgb, var(--lg-tone, var(--lg-text-3)) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--lg-tone, var(--lg-text-3)) 34%, transparent);
transition: color var(--lg-dur), background-color var(--lg-dur), border-color var(--lg-dur);
}
.lg-status .lg-icon { width: 14px; height: 14px; stroke-width: 2.25; }
.lg-status-panel {
display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 16px; padding: 16px 20px; border-radius: var(--lg-r);
border: 1px solid color-mix(in srgb, var(--lg-tone, var(--lg-text-3)) 45%, transparent);
background: linear-gradient(90deg, color-mix(in srgb, var(--lg-tone, var(--lg-text-3)) 15%, transparent), color-mix(in srgb, var(--lg-tone, var(--lg-text-3)) 4%, transparent));
transition: border-color var(--lg-dur-slow), background var(--lg-dur-slow);
}
.lg-status-panel__icon { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--lg-tone); background: color-mix(in srgb, var(--lg-tone, var(--lg-text-3)) 14%, transparent); box-shadow: 0 0 28px -6px color-mix(in srgb, var(--lg-tone, transparent) 70%, transparent); }
.lg-status-panel__icon .lg-icon { width: 24px; height: 24px; stroke-width: 2; }
.lg-status-panel__title { margin: 0; font: 800 clamp(1.05rem, .95rem + .5vw, 1.35rem)/1.1 var(--lg-font-sans); letter-spacing: .03em; text-transform: uppercase; color: var(--lg-tone, var(--lg-text)); }
.lg-status-panel__text { margin: 0; font-size: var(--lg-fs-small); color: var(--lg-text-2); }
:root[data-theme="light"] .lg-status-panel__icon { box-shadow: none; }
.lg-sev {
display: inline-flex; align-items: center; gap: 7px; min-height: 24px; padding: 3px 8px; border-radius: 6px;
font: 700 .6875rem/1.2 var(--lg-font-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
color: var(--lg-tone, var(--lg-text-3));
background: color-mix(in srgb, var(--lg-tone, var(--lg-text-3)) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--lg-tone, var(--lg-text-3)) 30%, transparent);
}
.lg-sev::before {
content: ""; width: 13px; height: 9px; flex: none;
background: linear-gradient(90deg, currentColor calc(var(--lg-pips, 0) * 25%), color-mix(in srgb, currentColor 22%, transparent) 0);
-webkit-mask: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 3.67px);
mask: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 3.67px);
}
.lg-sample-tag {
display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 3px 10px; border-radius: 6px;
border: 1px dashed var(--lg-border-strong); color: var(--lg-text-2);
font: 700 .6875rem/1.2 var(--lg-font-mono); letter-spacing: .12em; text-transform: uppercase;
}
.lg-disclaimer { padding: 12px 16px; border-left: 2px solid var(--lg-border-strong); font-size: var(--lg-fs-small); color: var(--lg-text-3); max-width: 70ch; }
.lg-field { display: grid; gap: 6px; }
.lg-field__label { font-size: var(--lg-fs-small); font-weight: 650; color: var(--lg-text); }
.lg-field__hint { font-size: .8125rem; color: var(--lg-text-3); }
.lg-field__error { display: flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 600; color: var(--lg-critical); }
.lg-input {
width: 100%; min-height: 52px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--lg-border-strong);
background: var(--lg-input-bg); color: var(--lg-text); transition: border-color var(--lg-dur), box-shadow var(--lg-dur);
}
textarea.lg-input { min-height: 120px; padding-block: 12px; resize: vertical; }
.lg-input::placeholder { color: var(--lg-text-3); opacity: 1; }
.lg-input:hover { border-color: var(--lg-border-hover); }
.lg-input:focus-visible { outline: 2px solid var(--lg-focus); outline-offset: 1px; }
.lg-input[aria-invalid="true"] { border-color: var(--lg-critical); }
.lg-inline-form { display: flex; gap: 10px; padding: 6px; border: 1px solid var(--lg-border-strong); border-radius: 16px; background: var(--lg-input-bg); }
.lg-inline-form:focus-within { border-color: var(--lg-focus); box-shadow: var(--lg-glow-soft); }
.lg-inline-form .lg-input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; min-height: 48px; }
.lg-inline-form .lg-btn { flex: none; }
.lg-inline-form .lg-input:focus-visible { outline: none; }
@media (max-width: 639.98px) { .lg-inline-form { flex-direction: column; } .lg-inline-form .lg-btn { width: 100%; } }
.lg-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; cursor: pointer; color: var(--lg-text); }
.lg-switch {
-webkit-appearance: none; appearance: none; flex: none; width: 46px; height: 28px; margin: 0; border-radius: var(--lg-r-pill); cursor: pointer;
border: 1px solid var(--lg-border-strong); background-color: var(--lg-track);
background-image: radial-gradient(circle at center, var(--lg-knob) 0 9px, transparent 9.5px);
background-size: 26px 26px; background-repeat: no-repeat; background-position: 0 50%;
transition: background-position var(--lg-dur) var(--lg-ease), background-color var(--lg-dur), border-color var(--lg-dur);
}
.lg-switch:checked { --lg-knob: #FFFFFF; background-color: var(--lg-blue); border-color: var(--lg-blue); background-position: 100% 50%; }
.lg-switch[data-status]:checked { --lg-knob: var(--lg-bg); background-color: var(--lg-tone); border-color: var(--lg-tone); }
.lg-range { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; }
.lg-range::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: var(--lg-track); }
.lg-range::-moz-range-track { height: 4px; border-radius: 4px; background: var(--lg-track); }
.lg-range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -11px; border-radius: 50%; background: var(--lg-cyan); border: 4px solid var(--lg-bg); box-shadow: 0 0 0 1px var(--lg-cyan), 0 0 16px -2px var(--lg-cyan); }
.lg-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--lg-cyan); border: 4px solid var(--lg-bg); box-shadow: 0 0 0 1px var(--lg-cyan); }
.lg-tablist { display: flex; gap: 2px; border-bottom: 1px solid var(--lg-border); overflow-x: auto; scrollbar-width: none; }
.lg-tablist::-webkit-scrollbar { display: none; }
.lg-tab {
position: relative; min-height: 44px; padding: 0 14px; border: 0; background: none; white-space: nowrap;
font: 700 .75rem/1 var(--lg-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--lg-text-3); transition: color var(--lg-dur);
}
.lg-tab:hover { color: var(--lg-text); }
.lg-tab[aria-selected="true"] { color: var(--lg-text); }
.lg-tab::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--lg-cyan); transform: scaleX(0); transition: transform var(--lg-dur) var(--lg-ease); }
.lg-tab[aria-selected="true"]::after { transform: scaleX(1); box-shadow: 0 0 10px var(--lg-cyan); }
.lg-tab:focus-visible { outline-offset: -2px; border-radius: 6px; }
.lg-tabpanel { padding-top: 18px; }
.lg-tabpanel:not([hidden]) { animation: lg-fade-in .32s var(--lg-ease); }
.lg-tabpanel:focus-visible { outline-offset: 4px; border-radius: 6px; }
.lg-accordion__item { border-bottom: 1px solid var(--lg-border); }
.lg-accordion__heading { margin: 0; font-size: inherit; letter-spacing: normal; }
.lg-accordion__trigger {
display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 60px; padding: 16px 0;
border: 0; background: none; text-align: left; font: 650 1.0625rem/1.4 var(--lg-font-sans); color: var(--lg-text);
}
.lg-accordion__trigger .lg-icon { color: var(--lg-text-3); transition: transform var(--lg-dur) var(--lg-ease); }
.lg-accordion__trigger[aria-expanded="true"] .lg-icon { transform: rotate(180deg); color: var(--lg-cyan); }
.lg-accordion__panel { padding: 0 0 22px; color: var(--lg-text-2); }
.lg-accordion__panel:not([hidden]) { animation: lg-fade-up-sm .3s var(--lg-ease); }
.lg-dialog {
width: min(640px, calc(100vw - 32px)); max-width: calc(100vw - 32px); max-height: min(88dvh, 880px); padding: 0; overflow: auto; overscroll-behavior: contain;
border: 1px solid var(--lg-border); border-radius: var(--lg-r-lg); background: var(--lg-surface-solid); color: var(--lg-text-2); box-shadow: var(--lg-shadow-lg);
}
.lg-dialog::backdrop { background: var(--lg-scrim); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.lg-dialog[open] { animation: lg-scale-in .28s var(--lg-ease); }
.lg-dialog__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px 16px 24px; border-bottom: 1px solid var(--lg-border); background: var(--lg-surface-solid); }
.lg-dialog__title { font-size: 1.25rem; margin: 0; }
.lg-dialog__body { padding: 24px; }
.lg-dialog__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--lg-border); }
html:has(dialog[open]), html.lg-nav-open { overflow: hidden; }
.lg-drawer { margin: 0 0 0 auto; width: min(560px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; border-width: 0 0 0 1px; border-radius: 0; }
.lg-drawer[open] { animation: lg-slide-in-right .34s var(--lg-ease); }
@media (max-width: 719.98px) {
.lg-drawer { margin: auto 0 0; width: 100vw; height: auto; max-height: 88dvh; border-width: 1px 0 0; border-radius: 22px 22px 0 0; }
.lg-drawer[open] { animation: lg-slide-in-up .34s var(--lg-ease); }
.lg-drawer .lg-dialog__head { padding-top: 26px; }
.lg-drawer .lg-dialog__head::before { content: ""; position: absolute; top: 10px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: var(--lg-border-strong); }
}
.lg-meter { height: 6px; border-radius: var(--lg-r-pill); background: var(--lg-track); overflow: hidden; }
.lg-meter__fill { display: block; height: 100%; width: calc(var(--lg-value, 0) * 1%); border-radius: inherit; background: var(--lg-tone, var(--lg-blue)); box-shadow: 0 0 12px color-mix(in srgb, var(--lg-tone, var(--lg-blue)) 60%, transparent); transition: width var(--lg-dur-slow) var(--lg-ease), background-color var(--lg-dur); }
.lg-meter--segments { height: 10px; border-radius: 2px; -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(10% - 3px), transparent calc(10% - 3px) 10%); mask: repeating-linear-gradient(90deg, #000 0 calc(10% - 3px), transparent calc(10% - 3px) 10%); }
.lg-ring { --size: 76px; --thick: 6px; position: relative; display: grid; place-items: center; width: var(--size); height: var(--size); flex: none; transition: --lg-value var(--lg-dur-slow) var(--lg-ease); }
.lg-ring::before {
content: ""; position: absolute; inset: 0; border-radius: 50%;
background: conic-gradient(var(--lg-tone, var(--lg-blue)) calc(var(--lg-value, 0) * 1%), var(--lg-track) 0);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--thick)), #000 calc(100% - var(--thick) + .5px));
mask: radial-gradient(farthest-side, transparent calc(100% - var(--thick)), #000 calc(100% - var(--thick) + .5px));
}
.lg-ring__value { position: relative; font: 750 1.25rem/1 var(--lg-font-sans); color: var(--lg-text); font-variant-numeric: tabular-nums; }
.lg-num { font-variant-numeric: tabular-nums; }
.lg-code { margin: 0; padding: 14px 16px; overflow-x: auto; border: 1px solid var(--lg-border); border-radius: var(--lg-r-sm); background: var(--lg-code-bg); color: var(--lg-text-2); font: 400 .8125rem/1.7 var(--lg-font-mono); tab-size: 2; }
.lg-code mark { padding: 1px 3px; border-radius: 3px; color: var(--lg-critical); background: color-mix(in srgb, var(--lg-critical) 14%, transparent); box-shadow: inset 0 -1px 0 var(--lg-critical); }
.lg-code mark[data-status="pass"] { color: var(--lg-success); background: color-mix(in srgb, var(--lg-success) 12%, transparent); box-shadow: inset 0 -1px 0 var(--lg-success); }
.lg-code .lg-code__c { color: var(--lg-text-3); }
.lg-nav { position: sticky; top: 0; z-index: 60; height: var(--lg-nav-h); }
.lg-nav::before { content: ""; position: absolute; inset: 0; z-index: -1; border-bottom: 1px solid var(--lg-border); background: var(--lg-nav-bg); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); opacity: 0; transition: opacity var(--lg-dur); }
.lg-nav.is-scrolled::before, .lg-nav.is-open::before { opacity: 1; }
.lg-nav__inner { display: flex; align-items: center; gap: 16px; height: 100%; }
.lg-brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--lg-text); text-decoration: none; flex: none; }
.lg-brand:hover { color: var(--lg-text); }
.lg-brand__mark { width: 34px; height: 34px; }
.lg-brand__mark .lg-brand__beam { stroke: var(--lg-cyan); }
.lg-brand__text { display: grid; gap: 3px; line-height: 1; }
.lg-brand__name { font-size: 1.125rem; font-weight: 800; letter-spacing: -.02em; }
.lg-brand__tag { font: 600 .5625rem/1 var(--lg-font-mono); letter-spacing: .16em; color: var(--lg-text-3); white-space: nowrap; }
.lg-nav__menu { margin-left: auto; }
.lg-nav__list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.lg-nav__group { position: relative; }
.lg-nav__link, .lg-nav__trigger {
position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: none;
font: 600 .9375rem/1 var(--lg-font-sans); color: var(--lg-text-2); text-decoration: none; transition: color var(--lg-dur), background-color var(--lg-dur);
}
.lg-nav__trigger .lg-icon { width: 16px; height: 16px; transition: transform var(--lg-dur) var(--lg-ease); }
.lg-nav__trigger[aria-expanded="true"] .lg-icon { transform: rotate(180deg); }
.lg-nav__link:hover, .lg-nav__trigger:hover, .lg-nav__trigger[aria-expanded="true"] { color: var(--lg-text); background: var(--lg-chip-bg); }
.lg-nav__link::after, .lg-nav__trigger::after {
content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--lg-cyan); box-shadow: 0 0 8px var(--lg-cyan);
transform: scaleX(0); transition: transform var(--lg-dur) var(--lg-ease);
}
.lg-nav__link[aria-current="page"], .lg-nav__link.is-active, .lg-nav__trigger.is-current { color: var(--lg-text); }
.lg-nav__link[aria-current="page"]::after, .lg-nav__link.is-active::after, .lg-nav__trigger.is-current::after { transform: scaleX(1); }
.lg-nav__sub {
display: none; position: absolute; top: calc(100% + 10px); left: -8px; min-width: 320px; margin: 0; padding: 8px; list-style: none;
border: 1px solid var(--lg-border); border-radius: var(--lg-r); background: var(--lg-surface-solid); box-shadow: var(--lg-shadow-lg);
}
.lg-nav__trigger[aria-expanded="true"] + .lg-nav__sub { display: grid; animation: lg-fade-up-sm .2s var(--lg-ease); }
html:not(.lg-js) .lg-nav__group:is(:hover, :focus-within) > .lg-nav__sub { display: grid; }
html:not(.lg-js) .lg-nav__sub::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 12px; }
.lg-nav__sub a { display: grid; gap: 2px; min-height: 44px; padding: 10px 12px; border-radius: 10px; color: var(--lg-text); text-decoration: none; font-weight: 600; font-size: .9375rem; }
.lg-nav__sub a:hover, .lg-nav__sub a[aria-current="page"] { background: var(--lg-chip-bg); color: var(--lg-text); }
.lg-nav__sub a[aria-current="page"] { box-shadow: inset 2px 0 0 var(--lg-cyan); }
.lg-nav__desc { font-size: .8125rem; font-weight: 400; color: var(--lg-text-3); }
.lg-nav__actions { display: flex; align-items: center; gap: 8px; flex: none; }
.lg-nav__burger, .lg-nav__panel-cta { display: none; }
.lg-theme { visibility: hidden; }
.lg-js .lg-theme { visibility: visible; }
.lg-theme .lg-icon { width: 20px; height: 20px; display: none; }
:root[data-theme-pref="system"] .lg-theme [data-for="system"], :root[data-theme-pref="light"] .lg-theme [data-for="light"], :root[data-theme-pref="dark"] .lg-theme [data-for="dark"] { display: block; }
.lg-nav::after { content: ""; position: fixed; inset: var(--lg-nav-h) 0 0 0; z-index: -1; background: var(--lg-scrim); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; pointer-events: none; }
.lg-nav__burger-close, .lg-nav__burger[aria-expanded="true"] .lg-nav__burger-open { display: none; }
.lg-nav__burger[aria-expanded="true"] .lg-nav__burger-close { display: block; }
@media (min-width: 1100px) and (max-width: 1239.98px), (max-width: 419.98px) { .lg-nav .lg-brand__tag { display: none; } }
@media (max-width: 1099.98px) {
.lg-nav__burger { display: inline-grid; }
html:not(.lg-js) .lg-nav__burger { display: none; }
.lg-nav__actions { margin-left: auto; }
.lg-nav__menu {
position: fixed; top: var(--lg-nav-h); right: 0; bottom: 0; width: min(420px, 100%); margin: 0; padding: 12px var(--lg-gutter) 32px; overflow-y: auto; overscroll-behavior: contain;
background: var(--lg-surface-solid); border-left: 1px solid var(--lg-border); transform: translateX(100%); visibility: hidden;
transition: transform .32s var(--lg-ease), visibility 0s .32s;
}
.lg-nav.is-open .lg-nav__menu { transform: none; visibility: visible; transition: transform .32s var(--lg-ease); }
.lg-nav--snap .lg-nav__menu { transition: none; }
.lg-nav.is-open::after { opacity: 1; visibility: visible; transition: opacity .3s; }
.lg-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
.lg-nav__list > li { border-bottom: 1px solid var(--lg-border); }
.lg-nav__link, .lg-nav__trigger { width: 100%; justify-content: space-between; min-height: 56px; padding: 0 4px; font-size: 1.0625rem; }
.lg-nav__link::after, .lg-nav__trigger::after { left: 4px; right: auto; width: 24px; bottom: 8px; }
.lg-nav__sub { position: static; min-width: 0; padding: 0 0 10px; border: 0; box-shadow: none; background: none; }
.lg-nav__panel-cta { display: flex; width: 100%; margin-top: 24px; }
}
@media (max-width: 639.98px) { .lg-nav__actions .lg-nav__cta { display: none; } }
.lg-path { display: none; }
@media (min-width: 1560px) {
.lg-path { display: block; position: fixed; z-index: 20; top: 50%; left: 24px; transform: translateY(-50%); }
.lg-path ol { position: relative; margin: 0; padding: 0; list-style: none; }
.lg-path ol::before { content: ""; position: absolute; left: 4px; top: 22px; bottom: 22px; width: 1px; background: var(--lg-border); }
.lg-path a { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; color: var(--lg-text-3); text-decoration: none; font: 600 .625rem/1 var(--lg-font-mono); letter-spacing: .16em; text-transform: uppercase; }
.lg-path a::before { content: ""; width: 9px; height: 9px; flex: none; border-radius: 2px; transform: rotate(45deg); border: 1px solid var(--lg-border-strong); background: var(--lg-bg); transition: background-color var(--lg-dur), border-color var(--lg-dur), box-shadow var(--lg-dur); }
.lg-path a:hover { color: var(--lg-text); }
.lg-path a.is-passed::before { background: var(--lg-border-strong); }
.lg-path a[aria-current="step"] { color: var(--lg-cyan); }
.lg-path a[aria-current="step"]::before { background: var(--lg-cyan); border-color: var(--lg-cyan); box-shadow: 0 0 10px var(--lg-cyan); }
}
.lg-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; font: 600 .6875rem/1.2 var(--lg-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--lg-text-3); }
.lg-breadcrumb li + li::before { content: "/"; margin: 0 10px; color: var(--lg-text-3); }
.lg-breadcrumb a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--lg-text-2); text-decoration: none; }
.lg-breadcrumb a:hover { color: var(--lg-text); text-decoration: underline; }
.lg-footer { position: relative; padding: clamp(56px, 7vw, 96px) 0 28px; border-top: 1px solid var(--lg-border); background: linear-gradient(180deg, transparent, var(--lg-bg-2) 40%); font-size: .9375rem; }
.lg-footer__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: 40px 32px; }
.lg-footer__brand { display: grid; align-content: start; gap: 16px; }
.lg-footer__brand p { max-width: 38ch; }
.lg-footer__title { margin: 0 0 6px; font: 600 var(--lg-fs-label)/1.3 var(--lg-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--lg-text-3); }
.lg-footer ul { margin: 0; padding: 0; list-style: none; }
.lg-footer__col a, .lg-footer__mail { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--lg-text-2); text-decoration: none; }
.lg-footer__col a:hover, .lg-footer__mail:hover { color: var(--lg-text); text-decoration: underline; }
.lg-footer__col .lg-icon { width: 14px; height: 14px; color: var(--lg-text-3); }
.lg-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--lg-border); font-size: .8125rem; color: var(--lg-text-3); }
.lg-footer__bottom p { max-width: 80ch; }
@media (max-width: 1099.98px) { .lg-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lg-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 719.98px) { .lg-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@keyframes lg-fade-in { from { opacity: 0; } }
@keyframes lg-fade-up { from { opacity: 0; transform: translateY(18px); } }
@keyframes lg-fade-up-sm { from { opacity: 0; transform: translateY(6px); } }
@keyframes lg-slide-left { from { opacity: 0; transform: translateX(28px); } }
@keyframes lg-slide-right { from { opacity: 0; transform: translateX(-28px); } }
@keyframes lg-scale-in { from { opacity: 0; transform: scale(.96); } }
@keyframes lg-slide-in-right { from { transform: translateX(100%); } }
@keyframes lg-slide-in-up { from { transform: translateY(100%); } }
@keyframes lg-scanner-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes lg-pulse-once { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lg-tone, var(--lg-cyan)) 55%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
@keyframes lg-finding-enter { from { opacity: 0; transform: translateY(8px) scale(.98); filter: blur(3px); } }
.lg-anim-fade-up { animation: lg-fade-up var(--lg-dur-slow) var(--lg-ease) both; }
.lg-anim-pulse-once { animation: lg-pulse-once 1.1s var(--lg-ease) 1; }
.lg-anim-finding-enter { animation: lg-finding-enter .5s var(--lg-ease) both; }
.lg-js [data-lg-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--lg-dur-slow) var(--lg-ease), transform var(--lg-dur-slow) var(--lg-ease); transition-delay: var(--lg-delay, 0ms); }
.lg-js [data-lg-reveal="fade-in"] { transform: none; }
.lg-js [data-lg-reveal="slide-left"] { transform: translateX(28px); }
.lg-js [data-lg-reveal="slide-right"] { transform: translateX(-28px); }
.lg-js [data-lg-reveal="scale-in"] { transform: scale(.96); }
.lg-js [data-lg-reveal].is-visible { opacity: 1; transform: none; }
.lg-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.lg-center { text-align: center; }
.lg-flow-0 { margin: 0; }
.lg-divider { height: 1px; border: 0; background: var(--lg-border); margin: 0; }
@media (max-width: 719.98px) { .lg-hide-mobile { display: none !important; } }
@media (min-width: 720px) { .lg-only-mobile { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
.lg-js [data-lg-reveal] { opacity: 1; transform: none; }
.lg-btn--primary::after { display: none; }
}
@media print { .lg-js [data-lg-reveal] { opacity: 1 !important; transform: none !important; } }
@media (forced-colors: active) {
.lg-status, .lg-sev, .lg-chip, .lg-btn, .lg-card { border: 1px solid CanvasText; }
.lg-switch:checked { background-color: Highlight; }
}