:root{
  --bg: #ebf0f7;
  --hi: #fdfefe;
  --surface: #ebf0f7;
  --surface-dim: #d4d8de;
  --surface-container-lowest: #f1f5f9;
  --surface-container-low: #e6ebf2;
  --surface-container: #edf2f8;
  --surface-container-high: #e2e6ed;
  --surface-container-highest: #d8dde3;
  --text-strong: #1e293b;
  --text-muted: #475569;
  --text-placeholder: #94a3b8;
  --on-surface: #1e293b;
  --on-surface-variant: #475569;
  --outline: #475569;
  --outline-variant: #bac2cc;
  --accent-primary: #3b82f6;
  --accent-rose: #ec4899;
  --accent-cyan: #06b6d4;
  --accent-emerald: #10b981;
  --error: #ba1a1a;
  --warning: #f59e0b;
  --md-primary: #3472d8;
  --md-primary-container: #3b82f6;
  --secondary: #ec4899;
  --tertiary: #06b6d4;
  --error-container: #f5dddd;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 36px;
  --gutter: 20px;
  --margin: 24px;
  --radius-sm: 8px;
  --radius-default: 16px;
  --radius-md: 24px;
  --radius-lg: 32px;
  --radius-xl: 48px;
  --radius-full: 9999px;
  --radius-card: 24px;
  --radius-control: 9999px;
  --shadow-shallow: -4.2px 4.2px 12px rgba(136,139,143,0.45), 4.2px -4.2px 12px rgba(248,250,252,0.9);
  --shadow-card: 10.2px 10.2px 24px rgba(136,139,143,0.45), -8.67px -8.67px 20.4px rgba(248,250,252,0.9);
  --shadow-inset: inset 4.199999999999999px 4.199999999999999px 8.399999999999999px rgba(136,139,143,0.45), inset -4.199999999999999px -4.199999999999999px 8.399999999999999px rgba(248,250,252,0.9);
  --shadow-pressed: inset 3.1499999999999995px 3.1499999999999995px 7.139999999999999px rgba(136,139,143,0.45), inset -3.1499999999999995px -3.1499999999999995px 7.139999999999999px rgba(248,250,252,0.9);
  --shadow-orb: 13.26px 13.26px 31.200000000000003px rgba(136,139,143,0.45), -11.22px -11.22px 26.400000000000002px rgba(248,250,252,0.9);
  --font-sans: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-heading: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --t-display-lg-size: 40px; --t-display-lg-lh: 48px; --t-display-lg-wt: 700; --t-display-lg-ls: -0.02em;
  --t-headline-lg-size: 28px; --t-headline-lg-lh: 36px; --t-headline-lg-wt: 700; --t-headline-lg-ls: -0.01em;
  --t-headline-md-size: 22px; --t-headline-md-lh: 30px; --t-headline-md-wt: 600; --t-headline-md-ls: -0.005em;
  --t-headline-sm-size: 18px; --t-headline-sm-lh: 26px; --t-headline-sm-wt: 600; --t-headline-sm-ls: 0em;
  --t-body-lg-size: 16px; --t-body-lg-lh: 24px; --t-body-lg-wt: 400; --t-body-lg-ls: 0em;
  --t-body-md-size: 14px; --t-body-md-lh: 20px; --t-body-md-wt: 400; --t-body-md-ls: 0em;
  --t-label-lg-size: 14px; --t-label-lg-lh: 20px; --t-label-lg-wt: 600; --t-label-lg-ls: 0.01em;
  --t-label-md-size: 12px; --t-label-md-lh: 16px; --t-label-md-wt: 600; --t-label-md-ls: 0.02em;
  --t-label-sm-size: 11px; --t-label-sm-lh: 14px; --t-label-sm-wt: 500; --t-label-sm-ls: 0.02em;
  --t-data-size: 13px; --t-data-lh: 18px; --t-data-wt: 500; --t-data-ls: 0em;
}
[data-theme="dark"]{
  --bg: #2a2f37;
  --hi: #3f444b;
  --surface: #2a2f37;
  --surface-dim: #252930;
  --surface-container-lowest: #262a32;
  --surface-container-low: #30353d;
  --surface-container: #33373f;
  --surface-container-high: #3d4249;
  --surface-container-highest: #484c53;
  --text-strong: #e7ecf3;
  --text-muted: #a3adbb;
  --text-placeholder: #6b7585;
  --on-surface: #e7ecf3;
  --on-surface-variant: #a3adbb;
  --outline: #a3adbb;
  --outline-variant: #545b65;
  --accent-primary: #60a5fa;
  --accent-rose: #f472b6;
  --accent-cyan: #22d3ee;
  --accent-emerald: #34d399;
  --error: #ff6961;
  --warning: #fbbf24;
  --md-primary: #5491dc;
  --md-primary-container: #60a5fa;
  --secondary: #f472b6;
  --tertiary: #22d3ee;
  --error-container: #ffe9e7;
}

.neu-raised{background:var(--surface);border-radius:var(--radius-default);box-shadow:var(--shadow-shallow)}
.neu-card{background:var(--surface);border-radius:var(--radius-card);box-shadow:var(--shadow-card)}
.neu-inset{background:var(--surface-container-low);border-radius:var(--radius-default);box-shadow:var(--shadow-inset)}
.neu-pressed{box-shadow:var(--shadow-pressed)!important}
.neu-pill{border-radius:var(--radius-control)}

/* style: neumorphism — Neumorphism */
[data-style="neumorphism"] {
.neu-card{background:var(--surface);border-radius:var(--radius-card);box-shadow:var(--shadow-card)}
}