:root{

  --font:'Google Sans Flex',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Urbanist',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display-alt:'Barlow Condensed',var(--font-display);

  --fs-axis:11px;
  --fs-label:12px;
  --fs-meta:13px;
  --fs-body:15px;
  --fs-title:15px;
  --fs-tab:20px;
  --fs-section:28px;
  --fs-num-sm:36px;
  --fs-num-kpi:56px;
  --fs-num:40px;
  --fs-display:clamp(48px, calc(1.125rem + 3.2vw), 64px);
  --fs-landing:clamp(4rem, calc(1.5rem + 10.5vw), 10rem);

  --fw-display:500;
  --fw-num:300;
  --fw-landing:300;
  --fw-title:500; --fw-ui:500; --fw-value:500;
  --fw-figure:400;
  --fw-text:400; --fw-label:400;
  --fw-strong:600;

  --tr-display:-0.01em; --tr-num:-0.02em; --tr-landing:-0.03em; --tr-text:0; --tr-label:.01em; --tr-eyebrow:.08em;

  --lh-tight:1; --lh-title:1.25; --lh-text:1.45;

  --gap-trim:calc(var(--fs-num) * .7 / 2);
  --trim-descent:.25em;
  --measure:31em;

  --r-slab:36px; --r-tile:24px; --r-ctl:14px; --r-pill:999px;

  --ctl:44px; --ctl-sm:32px; --ctl-lg:52px; --corner:30px;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px;
  --gutter:clamp(24px,3.2vw,40px);
  --gap:16px; --pad-slab:20px; --pad-tile:20px;

  --blur-chrome:24px;

  --ease:cubic-bezier(.2,.7,.3,1); --d-fast:160ms; --d-thumb:220ms; --d-reveal:500ms; --d-scene:300ms; --stagger:60ms;

  --knob:#FFFFFF;

  --lq-rim-w:3px; --lq-rim-w-sm:2px;
  --lq-band:16px;
  --lq-solid:linear-gradient(#000 0 0);
  --lens-res:.25;
  --lens-blur:1.5px; --lens-feather:6px;
  --lq-bead:radial-gradient(circle at 35% 28%,#FFFFFF 0 38%,#EEF0F3 70%,#D8DBE0 100%);
  --lq-bead-dark:radial-gradient(circle at 35% 28%,#4A4A50 0 30%,#1E1E22 75%,#121214 100%);
  --lq-bead-edge:inset 0 -1px 1px rgba(0,0,0,.14), 1px 2px 3px rgba(0,0,0,.22), 2px 5px 12px rgba(0,0,0,.14);
  --lq-dot:radial-gradient(circle at 35% 28%,rgba(255,255,255,.55),transparent 45%);
  --lq-toggle-gloss:linear-gradient(180deg,rgba(255,255,255,.30),transparent 55%);
}
@media (max-width:1223.98px){ :root{ --fs-num-kpi:48px; } }
@media (max-width:639.98px){ :root{ --fs-num:44px; --fs-num-kpi:44px; } }

[data-mode="smoke"]{
  color-scheme:dark;
  --scrim-a:rgba(14,14,18,.22); --scrim-b:rgba(14,14,18,.46);
  --scrim:linear-gradient(180deg,var(--scrim-a),var(--scrim-b));
  --stage:#2E2E33;
  --blur:8px; --sat:1.6;
  --slab:rgba(22,22,27,.52);
  --tile:rgba(255,255,255,.075); --tile2:rgba(255,255,255,.07); --tilehi:#FFFFFF;
  --tile-hover:rgba(255,255,255,.14);
  --ctl-bg:rgba(255,255,255,.085); --ctl-bg-hover:rgba(255,255,255,.15);
  --corner-bg:var(--ctl-bg); --corner-ink:var(--ink);
  --chrome:rgba(22,22,27,.80);
  --focus-halo:#16161B;
  --tile-edge:none;
  --line:rgba(255,255,255,.14);  --line2:rgba(255,255,255,.07);
  --mark-dim:rgba(255,255,255,.22);
  --shadow:24px 48px 90px -20px rgba(0,0,0,.62), 6px 12px 24px -6px rgba(0,0,0,.30);
  --lift:4px 10px 16px -4px rgba(0,0,0,.70), 1px 2px 3px rgba(0,0,0,.40); --inset:inset 0 2px 4px rgba(0,0,0,.40), inset 0 -1px 0 rgba(255,255,255,.08);
  --lift-tight:1px 3px 5px -2px rgba(0,0,0,.55);
  --ink:#FFFFFF; --ink2:rgba(255,255,255,.78); --ink3:rgba(255,255,255,.58);
  --ink-on-hi:#18181B;
  --grad:40;
  --ok:#B8E07A; --warn:#EED27A; --bad:#F2949E;
  --glow-1:#56484E; --glow-1-at:18% 44%;  --glow-2:#2E3A4F; --glow-2-at:70% 12%;  --glow-3:#24231F; --glow-3-at:40% 92%;

  --lq-spec:rgba(255,255,255,1); --lq-rim-lo:rgba(255,255,255,.20); --lq-return:rgba(255,255,255,.46);
  --lq-key:inset 2px 2px 0 0 rgba(255,255,255,.14), inset 9px 9px 10px -7px rgba(255,255,255,.34);
  --lq-glow:inset 0 0 10px 1px rgba(255,255,255,.12);
  --lq-thick:inset -2px -3px 3px -1px rgba(255,255,255,.22), inset 0 -10px 12px -10px rgba(0,0,0,.45);
  --lq-sheen:
    linear-gradient(118deg,rgba(205,220,255,.11) 0%,rgba(205,220,255,.03) 18%,rgba(205,220,255,0) 40%),
    linear-gradient(64deg,rgba(205,220,255,0) 37%,rgba(205,220,255,.05) 40.5%,rgba(205,220,255,0) 47%,rgba(205,220,255,0) 57%,rgba(205,220,255,.035) 60.5%,rgba(205,220,255,0) 67%),
    radial-gradient(42% 34% at 94% 100%,rgba(205,220,255,.16),rgba(205,220,255,0) 72%);
  --lq-sheen-tile:linear-gradient(140deg,rgba(205,220,255,.07),rgba(205,220,255,.015) 36%,rgba(205,220,255,0) 62%);
  --lq-hair:rgba(255,255,255,.30);
  --lq-slab-band:inset 0 0 8px 6px rgba(255,255,255,.055);
  --lq-float:8px 18px 30px -8px rgba(0,0,0,.72), 2px 3px 4px rgba(0,0,0,.40);
  --lq-hi-a:#FFFFFF; --lq-hi-a2:#FFFFFF; --lq-hi-b2:#D6D9E0; --lq-hi-b:#C2C6CF; --lq-hi-s1:36%; --lq-hi-s2:64%;
  --lq-hi-edge:inset 0 1px 0 #FFFFFF, inset 0 -2px 2px rgba(255,255,255,.65), inset 0 -1px 0 rgba(0,0,0,.22);
  --lq-ctl-edge:inset 1px 1px 0 rgba(255,255,255,.22), inset -1px -1px 0 rgba(255,255,255,.08);
  --lq-ctl-edge-hi:inset 1px 1px 0 rgba(255,255,255,.34), inset -1px -1px 0 rgba(255,255,255,.08);
  --lq-well-edge:inset -1px -1px 0 rgba(255,255,255,.14);
  --lq-ring-fill:rgba(22,22,27,.46); --lq-chrome-ring-fill:rgba(22,22,27,.40);
  --lq-accent-glow:2px 5px 12px -3px color-mix(in srgb,var(--acc-smoke) 32%,transparent);
  --lq-chip-bead:var(--lq-bead-dark); --lq-knob-mono:var(--lq-bead-dark);
  --lq-corner-fill:var(--corner-bg); --lq-corner-edge:var(--lq-ctl-edge);
  --lens-gain:1;
  --slab-solid:rgba(30,30,35,.96); --chrome-solid:rgba(22,22,27,.97);
}

[data-mode="frost"]{
  color-scheme:light;
  --scrim-a:rgba(255,255,255,.18); --scrim-b:rgba(255,255,255,.30);
  --scrim:linear-gradient(180deg,var(--scrim-a),var(--scrim-b));
  --stage:#ECEDEF;
  --blur:7px; --sat:1.7;
  --slab:rgba(255,255,255,.46); --tile:rgba(255,255,255,.28);
  --tile2:rgba(20,20,24,.09);   --tilehi:#0C0C0C;
  --tile-hover:rgba(255,255,255,.82);
  --ctl-bg:rgba(12,12,14,.09); --ctl-bg-hover:rgba(12,12,14,.15);
  --corner-bg:rgba(12,12,14,.78); --corner-ink:#FFFFFF;
  --chrome:rgba(255,255,255,.80);
  --focus-halo:#FFFFFF;
  --tile-edge:none;
  --line:rgba(255,255,255,.80); --line2:rgba(255,255,255,.45);
  --mark-dim:rgba(12,12,14,.14);
  --shadow:24px 48px 80px -20px rgba(30,30,40,.46), 6px 12px 24px -6px rgba(30,30,40,.18);
  --lift:4px 10px 16px -4px rgba(30,30,40,.42), 1px 2px 3px rgba(30,30,40,.22); --inset:inset 0 1px 2px rgba(20,20,30,.10);
  --lift-tight:1px 3px 5px -2px rgba(30,30,40,.30);
  --ink:#0B0B0C; --ink2:#3E3C3A; --ink3:#57534F;
  --ink-on-hi:#FFFFFF;
  --grad:0;
  --ok:#24874D; --warn:#A0740A; --bad:#C23B34;
  --glow-1:#F8F9FA; --glow-1-at:20% 25%;  --glow-2:#CCC5C0; --glow-2-at:72% 86%;  --glow-3:#CAC6C1; --glow-3-at:52% 40%;

  --lq-spec:rgba(255,255,255,1); --lq-rim-lo:rgba(255,255,255,.70); --lq-return:rgba(255,255,255,.85);
  --lq-key:inset 5px 5px 6px -3px rgba(255,255,255,.95);
  --lq-glow:inset 0 0 12px 4px rgba(36,40,56,.20);
  --lq-thick:inset -3px -4px 5px -2px rgba(255,255,255,.95), inset 0 -10px 12px -10px rgba(30,30,40,.22);
  --lq-sheen:
    linear-gradient(118deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.12) 18%,rgba(255,255,255,0) 40%),
    linear-gradient(64deg,rgba(255,255,255,0) 37%,rgba(255,255,255,.20) 40.5%,rgba(255,255,255,0) 47%,rgba(255,255,255,0) 57%,rgba(255,255,255,.15) 60.5%,rgba(255,255,255,0) 67%),
    radial-gradient(42% 34% at 94% 100%,rgba(255,255,255,.50),rgba(255,255,255,0) 72%),
    linear-gradient(304deg,rgba(130,176,255,.22) 0%,rgba(130,176,255,0) 30%);
  --lq-sheen-tile:linear-gradient(140deg,rgba(255,255,255,.40),rgba(255,255,255,.06) 36%,rgba(255,255,255,0) 62%);
  --lq-hair:rgba(255,255,255,.62);
  --lq-slab-band:inset 0 0 8px 6px rgba(36,40,56,.11), inset 0 0 0 1px rgba(255,255,255,.9);
  --lq-float:8px 20px 32px -10px rgba(30,30,40,.42), 2px 4px 6px -1px rgba(30,30,40,.22);
  --lq-hi-a:#5A5A61; --lq-hi-a2:#3A3A40; --lq-hi-b2:#141416; --lq-hi-b:var(--tilehi); --lq-hi-s1:40%; --lq-hi-s2:72%;
  --lq-hi-edge:inset 0 1px 0 rgba(255,255,255,.38), inset 0 -2px 2px rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.45);
  --lq-ctl-edge:inset 1px 1px 0 rgba(255,255,255,.80), inset -1px -1px 0 rgba(255,255,255,.30);
  --lq-ctl-edge-hi:inset 1px 1px 0 rgba(255,255,255,.92), inset -1px -1px 0 rgba(255,255,255,.30);
  --lq-well-edge:inset -1px -1px 0 rgba(255,255,255,.75);
  --lq-ring-fill:rgba(206,212,226,.42); --lq-chrome-ring-fill:rgba(22,22,27,.40);
  --lq-accent-glow:2px 5px 12px -3px color-mix(in srgb,var(--acc-d) 32%,transparent);
  --lq-chip-bead:var(--lq-bead); --lq-knob-mono:var(--lq-bead);
  --lq-corner-fill:var(--lq-bead-dark); --lq-corner-edge:var(--lq-bead-edge);
  --lens-gain:.8;
  --slab-solid:rgba(244,245,247,.96); --chrome-solid:rgba(22,22,27,.97);
}
[data-mode="frost"][data-warm]{ --tile:rgba(250,244,234,.30); }

[data-mode="night"]{
  color-scheme:dark;
  --scrim-a:rgba(0,0,0,.10); --scrim-b:rgba(0,0,0,.45);
  --scrim:linear-gradient(180deg,var(--scrim-a),var(--scrim-b));
  --stage:#05070D;
  --blur:8px; --sat:1.5;
  --slab:rgba(6,8,16,.80);
  --tile:rgba(255,255,255,.07); --tile2:rgba(255,255,255,.10); --tilehi:#FFFFFF;
  --tile-hover:rgba(255,255,255,.085);
  --ctl-bg:rgba(255,255,255,.09); --ctl-bg-hover:rgba(255,255,255,.16);
  --corner-bg:var(--ctl-bg); --corner-ink:var(--ink);
  --chrome:rgba(6,8,16,.85);
  --focus-halo:#060810;
  --tile-edge:none;
  --line:rgba(255,255,255,.16);  --line2:rgba(255,255,255,.10);
  --mark-dim:rgba(255,255,255,.16);
  --shadow:24px 48px 90px -20px rgba(0,0,0,.62), 6px 12px 24px -6px rgba(0,0,0,.30);
  --lift:4px 10px 16px -4px rgba(0,0,0,.70), 1px 2px 3px rgba(0,0,0,.40); --inset:inset 0 2px 4px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.10);
  --lift-tight:1px 3px 5px -2px rgba(0,0,0,.55);
  --ink:#F5F6F8; --ink2:#BABEC8; --ink3:#969BA8;
  --ink-on-hi:#0A0A0B;
  --grad:40;
  --ok:#B8E07A; --warn:#EED27A; --bad:#F2949E;
  --glow-1:#0F0F0F; --glow-1-at:8% 72%;  --glow-2:#1C1D1D; --glow-2-at:92% 62%;  --glow-3:#000000; --glow-3-at:50% 30%;

  --lq-spec:rgba(255,255,255,1); --lq-rim-lo:rgba(255,255,255,.26); --lq-return:rgba(255,255,255,.40);
  --lq-key:inset 2px 2px 0 0 rgba(255,255,255,.14), inset 9px 9px 10px -7px rgba(255,255,255,.34);
  --lq-glow:inset 0 0 10px 1px rgba(255,255,255,.12);
  --lq-thick:inset -2px -3px 3px -1px rgba(255,255,255,.22), inset 0 -10px 12px -10px rgba(0,0,0,.45);
  --lq-sheen:
    linear-gradient(118deg,rgba(190,206,255,.11) 0%,rgba(190,206,255,.03) 18%,rgba(190,206,255,0) 40%),
    linear-gradient(64deg,rgba(190,206,255,0) 37%,rgba(190,206,255,.05) 40.5%,rgba(190,206,255,0) 47%,rgba(190,206,255,0) 57%,rgba(190,206,255,.035) 60.5%,rgba(190,206,255,0) 67%),
    radial-gradient(42% 34% at 94% 100%,rgba(190,206,255,.16),rgba(190,206,255,0) 72%);
  --lq-sheen-tile:linear-gradient(140deg,rgba(190,206,255,.07),rgba(190,206,255,.015) 36%,rgba(190,206,255,0) 62%);
  --lq-hair:rgba(255,255,255,.26);
  --lq-slab-band:inset 0 0 8px 6px rgba(255,255,255,.055);
  --lq-float:8px 18px 30px -8px rgba(0,0,0,.85), 2px 3px 4px rgba(0,0,0,.55);
  --lq-hi-a:#FFFFFF; --lq-hi-a2:#FFFFFF; --lq-hi-b2:#D6D9E0; --lq-hi-b:#C2C6CF; --lq-hi-s1:36%; --lq-hi-s2:64%;
  --lq-hi-edge:inset 0 1px 0 #FFFFFF, inset 0 -2px 2px rgba(255,255,255,.65), inset 0 -1px 0 rgba(0,0,0,.22);
  --lq-ctl-edge:inset 1px 1px 0 rgba(255,255,255,.20), inset -1px -1px 0 rgba(255,255,255,.07);
  --lq-ctl-edge-hi:inset 1px 1px 0 rgba(255,255,255,.32), inset -1px -1px 0 rgba(255,255,255,.07);
  --lq-well-edge:inset -1px -1px 0 rgba(255,255,255,.14);
  --lq-ring-fill:rgba(6,8,16,.72); --lq-chrome-ring-fill:rgba(6,8,16,.45);
  --lq-accent-glow:2px 5px 12px -3px color-mix(in srgb,var(--acc-night) 32%,transparent);
  --lq-chip-bead:var(--lq-bead-dark); --lq-knob-mono:var(--lq-bead-dark);
  --lq-corner-fill:var(--corner-bg); --lq-corner-edge:var(--lq-ctl-edge);
  --lens-gain:1;
  --slab-solid:rgba(8,10,18,.97); --chrome-solid:rgba(6,8,16,.97);
}

[data-accent="blue"]  {--acc-smoke:#24B0FF; --acc-night:#24B0FF; --acc-d:#007AC0; --acc-on:#FFFFFF; --acc-knob:var(--lq-bead);}
[data-accent="violet"]{--acc-smoke:#B3A3FF; --acc-night:#9A84FF; --acc-d:#6444EC; --acc-on:#FFFFFF; --acc-knob:var(--lq-bead);}
[data-accent="butter"]{--acc-smoke:#D0A464; --acc-night:#D0A464; --acc-d:#986D2E; --acc-on:#FFFFFF; --acc-knob:var(--lq-bead);}
[data-accent="peach"] {--acc-smoke:#DCB295; --acc-night:#DCB295; --acc-d:#A66437; --acc-on:#FFFFFF; --acc-knob:var(--lq-bead);}
[data-accent="mono"]  {--acc-smoke:initial; --acc-night:initial; --acc-d:initial; --acc-on:initial; --acc-knob:initial;}

[data-mode="frost"]{ --accent:var(--acc-d, var(--ink)); }
[data-mode="smoke"]{ --accent:var(--acc-smoke, var(--ink)); }
[data-mode="night"]{ --accent:var(--acc-night, var(--ink)); }
[data-mode]{
  --accent-d:var(--acc-d, var(--tilehi));
  --on-accent:var(--acc-on, var(--ink-on-hi));
  --focus:var(--accent);
  color:var(--ink);

  --lq-rim:radial-gradient(60% 60% at 0 0,var(--lq-spec),transparent), radial-gradient(40% 40% at 100% 100%,var(--lq-return),transparent), linear-gradient(var(--lq-rim-lo),var(--lq-rim-lo));
  --lq-rim-flat:linear-gradient(var(--lq-rim-lo),var(--lq-rim-lo));
  --lq-hi:linear-gradient(180deg,var(--lq-hi-a) 0%,var(--lq-hi-a2) var(--lq-hi-s1),var(--lq-hi-b2) var(--lq-hi-s2),var(--lq-hi-b) 100%);
  --lq-edges:var(--lq-key), var(--lq-glow), var(--lq-thick);
  --lq-slab-edges:var(--lq-key), var(--lq-slab-band), var(--lq-thick);
}

[data-mode="frost"]{ --focus:var(--ink); }

[data-glass="frosted"], [data-glass="frosted"] [data-mode]{ --blur:36px; --sat:1.3; }
[data-glass="frosted"][data-mode="smoke"], [data-glass="frosted"] [data-mode="smoke"]{
  --slab:rgba(22,22,27,.42); --tile:rgba(255,255,255,.085); --tile2:rgba(255,255,255,.08);
  --lq-sheen:linear-gradient(transparent,transparent); --lq-sheen-tile:linear-gradient(transparent,transparent);
  --lq-ring-fill:rgba(255,255,255,.07); --lq-hair:transparent;
}
[data-glass="frosted"][data-mode="frost"], [data-glass="frosted"] [data-mode="frost"]{
  --slab:rgba(255,255,255,.42); --tile:rgba(255,255,255,.62);
  --lq-sheen:linear-gradient(160deg,rgba(255,255,255,.42),rgba(255,255,255,0) 42%);
  --lq-sheen-tile:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,0) 42%);
  --lq-hair:transparent;
}
[data-glass="frosted"][data-mode="frost"][data-warm], [data-glass="frosted"] [data-mode="frost"][data-warm]{ --tile:rgba(250,244,234,.70); }
[data-glass="frosted"][data-mode="night"], [data-glass="frosted"] [data-mode="night"]{
  --slab:rgba(6,8,16,.70); --tile:rgba(255,255,255,.08); --tile2:rgba(255,255,255,.10);
  --lq-sheen:linear-gradient(transparent,transparent); --lq-sheen-tile:linear-gradient(transparent,transparent);
  --lq-ring-fill:rgba(255,255,255,.05); --lq-hair:transparent;
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more){
  [data-mode], [data-glass="frosted"][data-mode], [data-glass="frosted"] [data-mode]{ --lq-sheen:linear-gradient(transparent,transparent); --lq-sheen-tile:linear-gradient(transparent,transparent); }
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  [data-mode="frost"]{ --slab:rgba(255,255,255,.58); --tile:rgba(255,255,255,.46); }
  [data-mode="frost"][data-warm]{ --tile:rgba(250,244,234,.50); }
  [data-mode="smoke"]{ --slab:rgba(22,22,27,.64); --tile:rgba(255,255,255,.10); }
  [data-mode="night"]{ --slab:rgba(6,8,16,.90); --tile:rgba(255,255,255,.08); }
}