:root[data-temperature="warm"] {
  --bg-light: var(--swatch-warm);
  --surface-light: #ffffff;
  --pane-light: #f0ece3;
  --ink-light: #14120f;
  --muted-light: #5f5a52;
  --g-muted-light: #514d46;
  --line-light: #dfdad0;
  --line-strong-light: #bdb6a9;
  --field-light: #8a8478;
  --bg-dark: #131217;
  --surface-dark: #1d1b23;
  --pane-dark: #18171c;
  --ink-dark: #f2efe6;
  --muted-dark: #a5a1ae;
  --g-muted-dark: #dcdae0;  
  --line-dark: #2c2a33;
  --line-strong-dark: #4b4853;
  --field-dark: #77737f;
  --bg-deep: #0b0a0c;
  --surface-deep: #141317;
  --pane-deep: #0f0e11;
  --line-deep: #23212a;
  --line-strong-deep: #3d3a44;
  --field-deep: #6d6975;
}


:root,
:root[data-temperature="cool"] {
  --bg-light: var(--swatch-cool);
  --surface-light: #ffffff;
  --pane-light: #eceef3;
  --ink-light: #111318;
  --muted-light: #5d6270;
  --g-muted-light: #494d58;
  --line-light: #dcdfe6;
  --line-strong-light: #b9bec9;
  --field-light: #858a97;
  --bg-dark: #111217;
  --surface-dark: #1b1d25;
  --pane-dark: #16181e;
  --ink-dark: #eceef4;
  --muted-dark: #9da2af;
  --g-muted-dark: #dadce2;  
  --line-dark: #2a2d37;
  --line-strong-dark: #4a4f5c;
  --field-dark: #6f7484;
  --bg-deep: #0a0b0e;
  --surface-deep: #121318;
  --pane-deep: #0e0f13;
  --line-deep: #22242c;
  --line-strong-deep: #3e424d;
  --field-deep: #666b7a;
}


:root[data-temperature="neutral"] {
  --bg-light: var(--swatch-neutral);
  --surface-light: #ffffff;
  --pane-light: #ececec;
  --ink-light: #121212;
  --muted-light: #5c5c5c;
  --g-muted-light: #4d4d4d;
  --line-light: #dcdcdc;
  --line-strong-light: #bababa;
  --field-light: #878787;
  --bg-dark: #141414;
  --surface-dark: #1c1c1c;
  --pane-dark: #181818;
  --ink-dark: #efefef;
  --muted-dark: #a6a6a6;
  --g-muted-dark: #dadada;  
  --line-dark: #2b2b2b;
  --line-strong-dark: #4a4a4a;
  --field-dark: #767676;
  --bg-deep: #0b0b0b;
  --surface-deep: #131313;
  --pane-deep: #0f0f0f;
  --line-deep: #222222;
  --line-strong-deep: #3c3c3c;
  --field-deep: #6b6b6b;
}


@media (prefers-contrast: more) {
  :root,
  :root[data-temperature] {
    --line-light: var(--field-light);
    --line-strong-light: var(--field-light);
    --line-dark: var(--field-dark);
    --line-strong-dark: var(--field-dark);
    --line-deep: var(--field-deep);
    --line-strong-deep: var(--field-deep);
  }
}


:root,
.scheme[data-s="light"],
.swatch .paper {
  --bg: var(--bg-light);
  --surface: var(--surface-light);
  --pane: var(--pane-light);
  --ink: var(--ink-light);
  --muted: var(--muted-light);
  --line: var(--line-light);
  --line-strong: var(--line-strong-light);
  --field: var(--field-light);
  --shadow: var(--ink);
  --accent-text: color-mix(in srgb, var(--accent) 70%, var(--ink));
  --tint: color-mix(in srgb, var(--accent) 12%, var(--surface));
  --tint-ink: color-mix(in srgb, var(--accent) 60%, var(--ink));
  --here: var(--surface);
  --ok: #1d7a3c;
  --warn: #9a5b00;
  --bad: #b3261e;
  --code-kw: #a626a4;
  --code-fn: #2a5bd7;
  --code-type: #8a6100;
  --code-str: #2f7a32;
  --code-num: #c2410c;
  --code-punct: #0f766e;
  --code-com: #6b7280;
  --shadow-rest: 0 1px 2px rgba(20, 22, 28, 0.06), 0 1px 3px rgba(20, 22, 28, 0.04);
  --shadow-hover: 0 1px 2px rgba(20, 22, 28, 0.08), 0 2px 3px rgba(20, 22, 28, 0.06);
  --shadow-btn: 0 1px 2px rgba(20, 22, 28, 0.18);
  --shadow-pop: 0 1px 2px rgba(20, 22, 28, 0.08), 0 2px 3px rgba(20, 22, 28, 0.08);
  --g-fill: 62%;
  --g-muted: var(--g-muted-light);
  --g-edge: rgba(255, 255, 255, 0.8);
  --g-hi: rgba(255, 255, 255, 0.95);
  --g-blur: 22px;
  --g-shadow: inset 0 1px 0 var(--g-hi), 0 10px 30px rgba(24, 26, 50, 0.16), 0 1px 2px rgba(24, 26, 50, 0.1);
  --g-saturate: 1.7;
  --wall-1: var(--wall-1-light);
  --wall-2: var(--wall-2-light);
  --wall-3: var(--wall-3-light);
}


@media (prefers-color-scheme: dark) {
  :root:not([data-scheme="light"]):not([data-scheme="deep"]) {
    --bg: var(--bg-dark);
    --surface: var(--surface-dark);
    --pane: var(--pane-dark);
    --ink: var(--ink-dark);
    --muted: var(--muted-dark);
    --line: var(--line-dark);
    --line-strong: var(--line-strong-dark);
    --field: var(--field-dark);
    --shadow: var(--accent);
    --accent-text: color-mix(in srgb, var(--accent) 55%, var(--ink));
    --tint: color-mix(in srgb, var(--accent) 15%, var(--surface));
    --tint-ink: color-mix(in srgb, var(--accent) 45%, var(--ink));
    --here: color-mix(in srgb, var(--accent) 10%, var(--surface));
    --ok: #4fbf74;
    --warn: #e0a84a;
    --bad: #ef6b62;
    --code-kw: #c678dd;
    --code-fn: #61afef;
    --code-type: #e5c07b;
    --code-str: #98c379;
    --code-num: #f09a5a;
    --code-punct: #56b6c2;
    --code-com: #8b929e;
    --shadow-rest: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-hover: 0 2px 3px rgba(0, 0, 0, 0.45);
    --shadow-btn: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-pop: 0 2px 3px rgba(0, 0, 0, 0.5);
    --g-fill: 58%;
    --g-muted: var(--g-muted-dark);
    --g-edge: rgba(255, 255, 255, 0.16);
    --g-hi: rgba(255, 255, 255, 0.24);
    --g-blur: 22px;
    --g-shadow: inset 0 1px 0 var(--g-hi), 0 10px 30px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
    --wall-1: var(--wall-1-dark);
    --wall-2: var(--wall-2-dark);
    --wall-3: var(--wall-3-dark);
  }
}
:root[data-scheme="dark"],
.scheme[data-s="dark"] {
  --bg: var(--bg-dark);
  --surface: var(--surface-dark);
  --pane: var(--pane-dark);
  --ink: var(--ink-dark);
  --muted: var(--muted-dark);
  --line: var(--line-dark);
  --line-strong: var(--line-strong-dark);
  --field: var(--field-dark);
  --shadow: var(--accent);
  --accent-text: color-mix(in srgb, var(--accent) 55%, var(--ink));
  --tint: color-mix(in srgb, var(--accent) 15%, var(--surface));
  --tint-ink: color-mix(in srgb, var(--accent) 45%, var(--ink));
  --here: color-mix(in srgb, var(--accent) 10%, var(--surface));
  --ok: #4fbf74;
  --warn: #e0a84a;
  --bad: #ef6b62;
  --code-kw: #c678dd;
  --code-fn: #61afef;
  --code-type: #e5c07b;
  --code-str: #98c379;
  --code-num: #f09a5a;
  --code-punct: #56b6c2;
  --code-com: #8b929e;
  --shadow-rest: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 2px 3px rgba(0, 0, 0, 0.45);
  --shadow-btn: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-pop: 0 2px 3px rgba(0, 0, 0, 0.5);
  --g-fill: 58%;
  --g-muted: var(--g-muted-dark);
  --g-edge: rgba(255, 255, 255, 0.16);
  --g-hi: rgba(255, 255, 255, 0.24);
  --g-blur: 22px;
  --g-shadow: inset 0 1px 0 var(--g-hi), 0 10px 30px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --wall-1: var(--wall-1-dark);
  --wall-2: var(--wall-2-dark);
  --wall-3: var(--wall-3-dark);
}


:root[data-scheme="deep"],
.scheme[data-s="deep"] {
  --bg: var(--bg-deep);
  --surface: var(--surface-deep);
  --pane: var(--pane-deep);
  --ink: var(--ink-dark);
  --muted: var(--muted-dark);
  --line: var(--line-deep);
  --line-strong: var(--line-strong-deep);
  --field: var(--field-deep);
  --shadow: var(--accent);
  --accent-text: color-mix(in srgb, var(--accent) 55%, var(--ink));
  --tint: color-mix(in srgb, var(--accent) 15%, var(--surface));
  --tint-ink: color-mix(in srgb, var(--accent) 45%, var(--ink));
  --here: color-mix(in srgb, var(--accent) 10%, var(--surface));
  --ok: #4fbf74;
  --warn: #e0a84a;
  --bad: #ef6b62;
  --code-kw: #c678dd;
  --code-fn: #61afef;
  --code-type: #e5c07b;
  --code-str: #98c379;
  --code-num: #f09a5a;
  --code-punct: #56b6c2;
  --code-com: #8b929e;
  --shadow-rest: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 2px 3px rgba(0, 0, 0, 0.45);
  --shadow-btn: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-pop: 0 2px 3px rgba(0, 0, 0, 0.5);
  --g-fill: 58%;
  --g-muted: var(--g-muted-dark);
  --g-edge: rgba(255, 255, 255, 0.16);
  --g-hi: rgba(255, 255, 255, 0.24);
  --g-blur: 22px;
  --g-shadow: inset 0 1px 0 var(--g-hi), 0 10px 30px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --wall-1: var(--wall-1-deep);
  --wall-2: var(--wall-2-deep);
  --wall-3: var(--wall-3-deep);
}


:root {
  --wall-1-light: #dcc6ff;
  --wall-2-light: #bfe3ff;
  --wall-3-light: #ffd9ec;
  --wall-1-dark: #43206e;
  --wall-2-dark: #17375f;
  --wall-3-dark: #4d1c48;
  --wall-1-deep: #2f1650;
  --wall-2-deep: #112a47;
  --wall-3-deep: #371434;
  --text-scale-large: 1.125;
  --text-scale-larger: 1.25;
}
:root,
.scheme[data-s],
.swatch .paper,
.wallchip {
  --wall-shown: radial-gradient(60% 50% at 12% 8%, var(--wall-1), transparent), radial-gradient(55% 45% at 92% 30%, var(--wall-2), transparent), radial-gradient(60% 50% at 30% 100%, var(--wall-3), transparent);
  --wall: var(--wall-shown);
}
:root[data-backdrop="plain"],
.wallchip[data-backdrop="plain"] {
  --wall: linear-gradient(var(--bg), var(--bg));
}


:root {
  --hover: color-mix(in srgb, var(--ink) 6%, transparent);
  --press: color-mix(in srgb, var(--ink) 10%, transparent);
  --accent-hover: color-mix(in srgb, var(--accent) 88%, var(--accent-away));
  --accent-press: color-mix(in srgb, var(--accent) 78%, var(--accent-away));
  --done-fill: color-mix(in srgb, var(--accent) 12%, var(--pane));
  --done-ring: color-mix(in srgb, var(--accent) 45%, transparent);
  --shadow-press: none;
}


:root {
  --swatch-warm: #f5f2ea;
  --swatch-cool: #f4f5f8;
  --swatch-neutral: #f2f2f2;
}


:root {
  --comfortable-border: 3px;
  --comfortable-lift: 6px;
  --comfortable-lift-hover: 4px;
  --comfortable-pad: 16px;
  --comfortable-gap: 16px;
  --compact-border: 2px;
  --compact-lift: 4px;
  --compact-lift-hover: 2px;
  --compact-pad: 10px;
  --compact-gap: 10px;
}
:root {
  --border: var(--comfortable-border);
  --lift: var(--comfortable-lift);
  --lift-hover: var(--comfortable-lift-hover);
  --pad: var(--comfortable-pad);
  --gap: var(--comfortable-gap);
}
:root[data-density="compact"] {
  --border: var(--compact-border);
  --lift: var(--compact-lift);
  --lift-hover: var(--compact-lift-hover);
  --pad: var(--compact-pad);
  --gap: var(--compact-gap);
}


:root {
  --radius: 10px;
  --radius-sm: 6px;
  --radius-btn: 8px;
  --radius-xs: 4px;
  --radius-pill: 999px;
  --radius-glass: 20px; 
  --radius-round: 50%;
  --rule: 1px;
  --border-thin: 2px;
  --touch: 24px;
  --ring: 2px;
  --focus: 3px;
  --focus-offset: 2px;
  --column: 780px;
  --side: 20px;
  
  --measure: 56ch;
  --card-min: 240px;
}


@font-face {
  font-family: "Inter";
  src: url("InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Funnel Display";
  src: url("FunnelDisplay.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans"), local("Arimo");
  font-weight: 100 599;
  font-style: normal;
  size-adjust: 107.50%;
  ascent-override: 90.14%;
  descent-override: 22.42%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial Bold"), local("Helvetica Bold"), local("Liberation Sans Bold"), local("Arimo Bold");
  font-weight: 600 900;
  font-style: normal;
  size-adjust: 100.87%;
  ascent-override: 96.07%;
  descent-override: 23.89%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback Hero";
  src: local("Arial Bold"), local("Helvetica Bold"), local("Liberation Sans Bold"), local("Arimo Bold");
  font-weight: 600 900;
  font-style: normal;
  size-adjust: 95.03%;
  ascent-override: 101.97%;
  descent-override: 25.36%;
  line-gap-override: 0%;
}
:root {
  --font-display: "Funnel Display", "Segoe UI Variable Display", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: "Inter", "Inter Fallback", "Segoe UI Variable Display", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hero: "Inter", "Inter Fallback Hero", "Segoe UI Variable Display", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui: "Inter", "Inter Fallback", "Segoe UI Variable Text", "SF Pro Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-lg: 1.125rem;
  --text-xl: 1.625rem;
  --text-hero: clamp(1.75rem, 5vw, 2.25rem);
  --lh-tight: 1.2;
  --lh-body: 1.5;
  --weight-display: 620;
  --weight-strong: 600;
  --weight-medium: 560;
  --tracking-tight: -0.02em;
  --tracking-wide: 0.08em;
}


:root {
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0, 1);
  --ease-in: cubic-bezier(0.3, 0, 1, 1);
  --ease-linear: linear;
  --tick: 90ms;
  --quick: 140ms;
  --swap: 0ms; 
  --base: 200ms;
  --page: var(--quick); 
  --slow: 300ms;
  --stagger: 40ms;
  --blink: 1s;
  --loader-delay: 150ms; 
  --loader-floor: 400ms; 
  --spring-settle: linear(0, 0.238, 0.545, 0.754, 0.874, 0.937, 0.969, 0.985, 0.993, 0.997, 0.998, 1);
  --spring-settle-duration: 508ms;
  --spring-flick: linear(0, 0.252, 0.617, 0.866, 0.985, 1.022, 1.023, 1.014, 1.006, 1.002, 1);
  --spring-flick-duration: 492ms;
}

@media (prefers-reduced-motion: reduce) { :root { --spring-settle: linear; --spring-settle-duration: var(--quick); --spring-flick: linear; --spring-flick-duration: var(--quick); --base: var(--quick); --slow: var(--quick); } }

:root[data-rm="on"] { --spring-settle: linear; --spring-settle-duration: var(--quick); --spring-flick: linear; --spring-flick-duration: var(--quick); --base: var(--quick); --slow: var(--quick); }




@property --g-fill-now { syntax: "<percentage>"; inherits: true; initial-value: 100%; }
@property --g-fill-btn { syntax: "<percentage>"; inherits: true; initial-value: 100%; }
@property --g-fill-field { syntax: "<percentage>"; inherits: true; initial-value: 100%; }
:root { --g-t: 1; --g-k-btn: calc(30 / 38); --g-k-field: 1; }
:root, [data-glass] {
  --g-fill-now: clamp(0%, 100% - (100% - var(--g-fill)) * var(--g-t), 100%);
  --g-fill-btn: clamp(0%, 100% - (100% - var(--g-fill)) * var(--g-t) * var(--g-k-btn), 100%);
  --g-fill-field: clamp(0%, 100% - (100% - var(--g-fill)) * var(--g-t) * var(--g-k-field), 100%);
}


:root { --accent: #b026ff; --accent-ink: #ffffff; --accent-away: #000000; }