/* FurnLab design tokens — the one source (DESIGN.md §1-§4).
 *
 * Two things read this file and nothing else holds a copy of a value in it:
 *
 *   - `design/mockups/build.mjs` inlines it at build time into every artboard
 *     and every `preview/` page;
 *   - the review server serves it at `GET /ui/tokens.css`, and
 *     `apps/cli/src/review/page.ts` links it.
 *
 * `design/DESIGN.md` is still the rulebook: when it and this file disagree,
 * this file is the defect. What lives here is the *implementation* of §1-§4 —
 * the palette in both themes, the three materials with their collapses, the
 * type stack, the shape scale and the motion variables — not the reasoning,
 * which stays in DESIGN.md.
 *
 * Nothing below is a component. A rule that belongs to one screen belongs to
 * that screen's stylesheet; this file has to stay something both a static
 * artboard and a live page can adopt whole.
 *
 * The dark declarations are written twice on purpose (§1): once for the
 * explicit switch and once for the viewer who never touched one. A single
 * selector list cannot do both, because `:root:not([data-theme="light"])` only
 * means "dark" inside the media query. The light block is written twice for
 * the same reason plus a third: the `System` board shows both palettes on one
 * page by nesting a `[data-theme="light"]` block inside a `[data-theme="dark"]`
 * one, and a nested block can only carry the theme it names if that theme has a
 * selector of its own.
 */

/* --- Colour (§1) ------------------------------------------------------- */
:root {
  color: var(--ink);
  /* The rest of the phone's own chrome (§5 "The rest of the page", MOB-28): the CSS property
     matches the shipped `<meta name="color-scheme">`, since a page can carry the meta and
     still read `normal` here — the meta alone hints the UA before first paint, the property is
     what `getComputedStyle` and native form controls actually read. "light dark" defers to the
     system's own preference; the two `[data-theme]` blocks below name one explicitly once a
     person has picked it by hand, the same shape as every palette override in this file. */
  color-scheme: light dark;
  --paper: #FAFAF8; --surface: #FFFFFF; --sunken: #F3F2EE;
  --line: #E8E5DE; --line2: #D3CFC5;
  --ink: #1B1A17; --ink2: #5F5B53; --ink3: #6F6A62;
  --sys: #D97706; --sys-text: #A34A07; --sys-bg: #FEF3E2; --sys-line: #F5D9A8;
  --good: #15803D; --good-bg: #ECFDF3; --good-line: #BBE5C8; --good-text: #166534;
  --bad: #DC2626; --bad-bg: #FEF2F2; --bad-line: #F5C2C2; --bad-text: #B91C1C;
  --focus: #D97706;
  /* Text that sits on an ink fill, and on a --sys / --good / --bad fill. A
     filled mark carrying white text fills with --sys-text, never --sys (§1). */
  --on-ink: #FAFAF8; --on-fill: #FFFFFF;

  /* Materials (§2) */
  --glass-tint: rgba(250, 250, 248, .72);
  --glass-tint-strong: rgba(250, 250, 248, .86);
  --glass-edge: rgba(27, 26, 23, .08);
  --glass-highlight: rgba(255, 255, 255, .55);
  --glass-blur: blur(24px) saturate(160%);
  --sh-float: 0 8px 32px rgba(27, 26, 23, .12);
  --sh: 0 1px 2px rgba(27, 26, 23, .05);
  --sh-lift: 0 8px 32px rgba(27, 26, 23, .14);

  /* The drawing's own ink. DESIGN.md names no tokens for it — a drawing is
     neither chrome nor a reading surface — but it has to follow the theme, so
     it gets its own set rather than hexes inlined at each use. */
  --plan-fill: #EDEAE3; --plan-stroke: #1B1A17; --plan-thin: #5F5B53;
  --plan-void: #FFFFFF; --plan-module: #FFFFFF; --plan-hatch: #D3CFC5;
  --plan-space: #B9B4EA; --plan-space-line: #B9B4EA;

  /* Type (§3) */
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* Shape (§4): concentric radii, and the reading column. */
  --r-ctl: 10px; --r-card: 14px; --r-panel: 20px; --r-sheet: 24px; --r-pill: 999px;
  --read: 720px;

  /* Breakpoints, touch and fields (§5 "Phones"). §5's three widths are named here once so a
     screen's own stylesheet never repeats them as a literal (MOB-24) — a `@media` rule still
     has to write the pixel value (CSS cannot read a custom property inside a media feature),
     but every one of them is one of these three, and a script that needs a breakpoint in JS
     reads it here instead (`apps/cli/src/review/client/breakpoints.ts`) rather than carrying
     its own copy of 768 / 1024 / 1280. */
  --bp-tablet: 768px;  /* '< 768' = the phone layout (bottom tab bar, one bottom sheet) */
  --bp-drawer: 1024px; /* '<= 1024' = the icon rail + a bottom drawer instead of the panel */
  --bp-wide: 1280px;   /* '>= 1280' = the icon rail + the full 380 px right panel */
  /* The bottom drawer's collapsed height (<= 1024, §5): its handle row alone, with nothing of
     the panel's own content showing. `overlays.ts`'s drag/tap code reads this same number
     (`breakpoints.ts`'s `panelPeek()`) rather than carrying its own copy of 56 (UI-171). */
  --panel-peek: 56px;

  /* Touch sizes and fields (§5): every interactive element's hit area under
     `(pointer: coarse)`, made from padding, never from a bigger glyph; and the field text size
     that keeps iOS from zooming the page on focus. */
  --touch-target: 44px;
  --touch-target-min: 24px;
  --field-font-touch: 16px;

  /* Motion (§4). Curves first, then every duration the spec names — so a
     reduced-motion root has only the durations to redefine. */
  --ease-out: cubic-bezier(.22, 1, .36, 1);      /* anything that arrives */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);   /* one place to another */
  --spring: cubic-bezier(.32, .72, 0, 1);        /* panels, drawers, thumb */
  --d-micro: 120ms;     /* hover, focus */
  --d-press: 80ms;      /* press */
  --d-state: 200ms;     /* chip, row, toggle */
  --d-pop: 160ms;       /* popover */
  --d-panel: 380ms;     /* panel, rail, drawer */
  --d-recentre: 420ms;  /* the stage's re-centring pan */
  --d-screen: 300ms;    /* screen switch */
  --d-level: 300ms;     /* level cross-fade */
  --d-stack: 420ms;     /* the 3D stack lifting apart */
  --d-flip: 240ms;      /* a list reordering */
  --d-dim: 200ms;       /* the retrace dim */
  --d-pulse: 400ms;     /* a pin pulsing once */
}

[data-theme="light"] {
  color: var(--ink);
  color-scheme: light;
  --paper: #FAFAF8; --surface: #FFFFFF; --sunken: #F3F2EE;
  --line: #E8E5DE; --line2: #D3CFC5;
  --ink: #1B1A17; --ink2: #5F5B53; --ink3: #6F6A62;
  --sys: #D97706; --sys-text: #A34A07; --sys-bg: #FEF3E2; --sys-line: #F5D9A8;
  --good: #15803D; --good-bg: #ECFDF3; --good-line: #BBE5C8; --good-text: #166534;
  --bad: #DC2626; --bad-bg: #FEF2F2; --bad-line: #F5C2C2; --bad-text: #B91C1C;
  --focus: #D97706;
  --on-ink: #FAFAF8; --on-fill: #FFFFFF;
  --glass-tint: rgba(250, 250, 248, .72);
  --glass-tint-strong: rgba(250, 250, 248, .86);
  --glass-edge: rgba(27, 26, 23, .08);
  --glass-highlight: rgba(255, 255, 255, .55);
  --sh-float: 0 8px 32px rgba(27, 26, 23, .12);
  --sh: 0 1px 2px rgba(27, 26, 23, .05);
  --sh-lift: 0 8px 32px rgba(27, 26, 23, .14);
  --plan-fill: #EDEAE3; --plan-stroke: #1B1A17; --plan-thin: #5F5B53;
  --plan-void: #FFFFFF; --plan-module: #FFFFFF; --plan-hatch: #D3CFC5;
  --plan-space: #B9B4EA; --plan-space-line: #B9B4EA;
}

[data-theme="dark"] {
  color: var(--ink);
  color-scheme: dark;
  --paper: #141311; --surface: #1C1B18; --sunken: #0F0E0C;
  --line: #2C2A25; --line2: #3A3731;
  --ink: #EDEBE6; --ink2: #A8A398; --ink3: #948F85;
  --sys: #F59E0B; --sys-text: #FBBF24; --sys-bg: #2A1F0C; --sys-line: #5A3F12;
  --good: #4ADE80; --good-bg: #0C2A18; --good-line: #1F5A34; --good-text: #4ADE80;
  --bad: #F87171; --bad-bg: #2E0F0F; --bad-line: #6B2020; --bad-text: #F87171;
  --focus: #F59E0B;
  --on-ink: #141311; --on-fill: #141311;
  --glass-tint: rgba(28, 27, 24, .62);
  --glass-tint-strong: rgba(28, 27, 24, .78);
  --glass-edge: rgba(255, 255, 255, .10);
  --glass-highlight: rgba(255, 255, 255, .08);
  --sh-float: 0 8px 32px rgba(0, 0, 0, .45);
  --sh: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-lift: 0 8px 32px rgba(0, 0, 0, .5);
  --plan-fill: #26241F; --plan-stroke: #EDEBE6; --plan-thin: #A8A398;
  --plan-void: #0F0E0C; --plan-module: #1C1B18; --plan-hatch: #3A3731;
  --plan-space: #4A4680; --plan-space-line: #4A4680;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color: var(--ink);
    color-scheme: dark;
    --paper: #141311; --surface: #1C1B18; --sunken: #0F0E0C;
    --line: #2C2A25; --line2: #3A3731;
    --ink: #EDEBE6; --ink2: #A8A398; --ink3: #948F85;
    --sys: #F59E0B; --sys-text: #FBBF24; --sys-bg: #2A1F0C; --sys-line: #5A3F12;
    --good: #4ADE80; --good-bg: #0C2A18; --good-line: #1F5A34; --good-text: #4ADE80;
    --bad: #F87171; --bad-bg: #2E0F0F; --bad-line: #6B2020; --bad-text: #F87171;
    --focus: #F59E0B;
    --on-ink: #141311; --on-fill: #141311;
    --glass-tint: rgba(28, 27, 24, .62);
    --glass-tint-strong: rgba(28, 27, 24, .78);
    --glass-edge: rgba(255, 255, 255, .10);
    --glass-highlight: rgba(255, 255, 255, .08);
    --sh-float: 0 8px 32px rgba(0, 0, 0, .45);
    --sh: 0 1px 2px rgba(0, 0, 0, .4);
    --sh-lift: 0 8px 32px rgba(0, 0, 0, .5);
    --plan-fill: #26241F; --plan-stroke: #EDEBE6; --plan-thin: #A8A398;
    --plan-void: #0F0E0C; --plan-module: #1C1B18; --plan-hatch: #3A3731;
    --plan-space: #4A4680; --plan-space-line: #4A4680;
  }
}

/* --- Motion: reduced (§4) ----------------------------------------------
   Every duration becomes 0 except the cross-fades, which become 80 ms. The
   `.reduced` class is the hand switch for a viewer that cannot emulate the
   media query (the prototype's `?reduced=1`, the review screen's own check). */
:root.reduced {
  --d-micro: 0ms; --d-press: 0ms; --d-state: 0ms; --d-pop: 0ms;
  --d-panel: 0ms; --d-recentre: 0ms; --d-flip: 0ms; --d-dim: 0ms;
  --d-pulse: 0ms; --d-stack: 0ms; --d-screen: 80ms; --d-level: 80ms;
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-micro: 0ms; --d-press: 0ms; --d-state: 0ms; --d-pop: 0ms;
    --d-panel: 0ms; --d-recentre: 0ms; --d-flip: 0ms; --d-dim: 0ms;
    --d-pulse: 0ms; --d-stack: 0ms; --d-screen: 80ms; --d-level: 80ms;
  }
}

/* --- Materials (§2) -----------------------------------------------------
   Glass is chrome and never a reading surface. `.glass-strong` is the glass
   that carries rows of text read against the drawing underneath; anything
   simply read sits on opaque `--surface` instead. */
.glass, .glass-strong {
  background: var(--glass-tint);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 0 0 1px var(--glass-edge), var(--sh-float);
}
.glass-strong { background: var(--glass-tint-strong); }

/* The segmented control's track is glass too (§4), so it collapses with the
   rest of it rather than staying translucent on a printed page. */
@media (prefers-reduced-transparency: reduce) {
  .glass, .glass-strong, .seg {
    background: var(--surface);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}
@media print {
  .glass, .glass-strong, .seg {
    background: var(--surface);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: 0 0 0 1px var(--line);
  }
}

/* An opaque card carries a 1 px edge and no shadow (§4); nothing inside one
   casts a shadow either. A well is the sunken ground a value sits in. */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.well { background: var(--sunken); border-radius: var(--r-card); }

/* GENERATED by scripts/buildPalettes.ts from design/mockups-v2/tokens-*.css — do not edit by hand.
 * The owner's five themes (card #1366): a `data-palette` attribute on <html> overrides the colour tokens of
 * design/tokens.css. Lime is the default for everyone (owner, 2026-10-15): it is also what a page without the attribute shows. */

/* petrol */
:root[data-palette="petrol"] {
  color: var(--ink);
  --paper: #F7F7F6;
  --surface: #FFFFFF;
  --sunken: #EFEFED;
  --line: #E5E5E2;
  --line2: #CDCDC9;
  --ink: #12202A;
  --ink2: #43525E;
  --ink3: #52616C;
  --brand: #2F6F8C;
  --brand-text: #1F5570;
  --brand-bg: #E2EEF4;
  --brand-line: #B5D1DE;
  --brand-deep: #1E3A4C;
  --brand-deep-2: #2F5A6E;
  --on-brand-deep: #F4EEE6;
  --brand-deep-text2: #B3D0DE;
  --brand-steel: #8DB4C8;
  --act: #1F5570;
  --act-hover: #173F54;
  --on-act: #FFFFFF;
  --sys: #EA580C;
  --sys-text: #B93C0A;
  --sys-bg: #FFEDD5;
  --sys-line: #FDBA74;
  --good: #1E7F45;
  --good-bg: #E5F4EA;
  --good-line: #B2DABF;
  --good-text: #166437;
  --bad: #C9203C;
  --bad-bg: #FCEBEE;
  --bad-line: #F0B9C3;
  --bad-text: #A8172F;
  --focus: #2F6F8C;
  --on-ink: #F5F1EA;
  --on-fill: #FFFFFF;
  --glass-tint: rgba(250, 250, 249, .74);
  --glass-tint-strong: rgba(252, 252, 251, .88);
  --glass-edge: rgba(18, 32, 42, .09);
  --glass-highlight: rgba(255, 255, 255, .6);
  --sh-float: 0 8px 32px rgba(18, 46, 62, .13);
  --sh: 0 1px 2px rgba(18, 32, 42, .06);
  --sh-lift: 0 8px 32px rgba(18, 46, 62, .16);
  --plan-fill: #C7D3DB;
  --plan-stroke: #12202A;
  --plan-thin: #43525E;
  --plan-void: #FFFFFF;
  --plan-module: #FFFFFF;
  --plan-hatch: #CBC2B3;
  --room-living: #DCEBF2;
  --room-sleep: #E6E2F3;
  --room-entry: #EEE8DC;
  --room-wet: #D6EEEC;
  --m3d-floor: #E6E4E0;
  --m3d-wall-a: #E1EBF1;
  --m3d-wall-b: #D2E0E8;
  --m3d-front: #FBF8F2;
  --m3d-carcass: #ECEBE8;
  --m3d-top: #A7A9AC;
  --m3d-edge: #1E3A4C;
  --lvl-1: #CFE2EC;
  --lvl-2: #B9D3E1;
  --lvl-3: #A3C4D6;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="petrol"]:not([data-theme="light"]) {
    color: var(--ink);
    --paper: #18191B;
    --surface: #212224;
    --sunken: #121314;
    --line: #2E2F32;
    --line2: #3F4044;
    --ink: #E8EEF2;
    --ink2: #A6B4C0;
    --ink3: #8F9EAA;
    --brand: #5DA2C2;
    --brand-text: #8CC3DB;
    --brand-bg: #12303E;
    --brand-line: #275A70;
    --brand-deep: #183444;
    --brand-deep-2: #24485C;
    --on-brand-deep: #F4EEE6;
    --brand-deep-text2: #B3D0DE;
    --brand-steel: #8DB4C8;
    --act: #2F7394;
    --act-hover: #286786;
    --on-act: #FFFFFF;
    --sys: #FB923C;
    --sys-text: #FDBA74;
    --sys-bg: #3B1D0A;
    --sys-line: #7C3A12;
    --good: #4CD487;
    --good-bg: #0C2919;
    --good-line: #1E5A37;
    --good-text: #5EDB94;
    --bad: #F0566E;
    --bad-bg: #2E0E15;
    --bad-line: #6E2233;
    --bad-text: #F57388;
    --focus: #5DA2C2;
    --on-ink: #0E141A;
    --on-fill: #0E141A;
    --glass-tint: rgba(33, 34, 36, .66);
    --glass-tint-strong: rgba(33, 34, 36, .84);
    --glass-edge: rgba(255, 255, 255, .09);
    --glass-highlight: rgba(255, 255, 255, .07);
    --sh-float: 0 8px 32px rgba(0, 0, 0, .5);
    --sh: 0 1px 2px rgba(0, 0, 0, .4);
    --sh-lift: 0 8px 32px rgba(0, 0, 0, .55);
    --plan-fill: #2A3946;
    --plan-stroke: #E8EEF2;
    --plan-thin: #A6B4C0;
    --plan-void: #0A0F13;
    --plan-module: #151E26;
    --plan-hatch: #33434F;
    --room-living: #1A2D42;
    --room-sleep: #262440;
    --room-entry: #2A2722;
    --room-wet: #11323B;
    --m3d-floor: #3F4044;
    --m3d-wall-a: #1E2C36;
    --m3d-wall-b: #18242D;
    --m3d-front: #2A3540;
    --m3d-carcass: #303134;
    --m3d-top: #6C6E72;
    --m3d-edge: #D9D6D0;
    --lvl-1: #1C3542;
    --lvl-2: #24485A;
    --lvl-3: #2E5C72;
  }
}
:root[data-palette="petrol"][data-theme="dark"] {
  color: var(--ink);
  --paper: #18191B;
  --surface: #212224;
  --sunken: #121314;
  --line: #2E2F32;
  --line2: #3F4044;
  --ink: #E8EEF2;
  --ink2: #A6B4C0;
  --ink3: #8F9EAA;
  --brand: #5DA2C2;
  --brand-text: #8CC3DB;
  --brand-bg: #12303E;
  --brand-line: #275A70;
  --brand-deep: #183444;
  --brand-deep-2: #24485C;
  --on-brand-deep: #F4EEE6;
  --brand-deep-text2: #B3D0DE;
  --brand-steel: #8DB4C8;
  --act: #2F7394;
  --act-hover: #286786;
  --on-act: #FFFFFF;
  --sys: #FB923C;
  --sys-text: #FDBA74;
  --sys-bg: #3B1D0A;
  --sys-line: #7C3A12;
  --good: #4CD487;
  --good-bg: #0C2919;
  --good-line: #1E5A37;
  --good-text: #5EDB94;
  --bad: #F0566E;
  --bad-bg: #2E0E15;
  --bad-line: #6E2233;
  --bad-text: #F57388;
  --focus: #5DA2C2;
  --on-ink: #0E141A;
  --on-fill: #0E141A;
  --glass-tint: rgba(33, 34, 36, .66);
  --glass-tint-strong: rgba(33, 34, 36, .84);
  --glass-edge: rgba(255, 255, 255, .09);
  --glass-highlight: rgba(255, 255, 255, .07);
  --sh-float: 0 8px 32px rgba(0, 0, 0, .5);
  --sh: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-lift: 0 8px 32px rgba(0, 0, 0, .55);
  --plan-fill: #2A3946;
  --plan-stroke: #E8EEF2;
  --plan-thin: #A6B4C0;
  --plan-void: #0A0F13;
  --plan-module: #151E26;
  --plan-hatch: #33434F;
  --room-living: #1A2D42;
  --room-sleep: #262440;
  --room-entry: #2A2722;
  --room-wet: #11323B;
  --m3d-floor: #3F4044;
  --m3d-wall-a: #1E2C36;
  --m3d-wall-b: #18242D;
  --m3d-front: #2A3540;
  --m3d-carcass: #303134;
  --m3d-top: #6C6E72;
  --m3d-edge: #D9D6D0;
  --lvl-1: #1C3542;
  --lvl-2: #24485A;
  --lvl-3: #2E5C72;
}

/* sapphire */
:root[data-palette="sapphire"] {
  color: var(--ink);
  --paper: #F7F7F6;
  --surface: #FFFFFF;
  --sunken: #EFEFED;
  --line: #E5E5E2;
  --line2: #CDCDC9;
  --ink: #0C090B;
  --ink2: #312B2F;
  --ink3: #525960;
  --brand: #5178BA;
  --brand-text: #385C99;
  --brand-bg: #E5ECF7;
  --brand-line: #B7C8E6;
  --brand-deep: #312B2F;
  --brand-deep-2: #3E373C;
  --on-brand-deep: #FFFFFF;
  --brand-deep-text2: #E4E9EB;
  --brand-steel: #767F88;
  --act: #4A6FAE;
  --act-hover: #3D5F98;
  --on-act: #FFFFFF;
  --sys: #EA580C;
  --sys-text: #B93C0A;
  --sys-bg: #FFEDD5;
  --sys-line: #FDBA74;
  --good: #1E7F45;
  --good-bg: #E5F4EA;
  --good-line: #B2DABF;
  --good-text: #166437;
  --bad: #C9203C;
  --bad-bg: #FCEBEE;
  --bad-line: #F0B9C3;
  --bad-text: #A8172F;
  --focus: #5178BA;
  --on-ink: #FFFFFF;
  --on-fill: #FFFFFF;
  --glass-tint: rgba(250, 250, 249, .74);
  --glass-tint-strong: rgba(252, 252, 251, .88);
  --glass-edge: rgba(12, 9, 11, .08);
  --glass-highlight: rgba(255, 255, 255, .7);
  --sh-float: 0 8px 32px rgba(12, 9, 11, .12);
  --sh: 0 1px 2px rgba(12, 9, 11, .06);
  --sh-lift: 0 8px 32px rgba(12, 9, 11, .16);
  --plan-fill: #D3D8DB;
  --plan-stroke: #0C090B;
  --plan-thin: #312B2F;
  --plan-void: #FFFFFF;
  --plan-module: #FFFFFF;
  --plan-hatch: #BDC4C9;
  --room-living: #E5EBF5;
  --room-sleep: #EAECED;
  --room-entry: #FBFCFC;
  --room-wet: #E0DFE0;
  --m3d-floor: #E6E4E0;
  --m3d-wall-a: #F4F6F7;
  --m3d-wall-b: #E4E9EB;
  --m3d-front: #FFFFFF;
  --m3d-carcass: #ECEBE8;
  --m3d-top: #A7A9AC;
  --m3d-edge: #0C090B;
  --lvl-1: #E4E9EB;
  --lvl-2: #CDD3D7;
  --lvl-3: #B5BCC2;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="sapphire"]:not([data-theme="light"]) {
    color: var(--ink);
    --paper: #18191B;
    --surface: #212224;
    --sunken: #121314;
    --line: #2E2F32;
    --line2: #3F4044;
    --ink: #F0F1F2;
    --ink2: #C6C9CC;
    --ink3: #A9ADB2;
    --brand: #8FAEE3;
    --brand-text: #A7C0EA;
    --brand-bg: #1E2A44;
    --brand-line: #33466E;
    --brand-deep: #3B5A8F;
    --brand-deep-2: #45659B;
    --on-brand-deep: #FFFFFF;
    --brand-deep-text2: #E4E9EB;
    --brand-steel: #767F88;
    --act: #8FAEE3;
    --act-hover: #A5BFEA;
    --on-act: #0C090B;
    --sys: #FB923C;
    --sys-text: #FDBA74;
    --sys-bg: #3B1D0A;
    --sys-line: #7C3A12;
    --good: #4CD487;
    --good-bg: #143425;
    --good-line: #2A6444;
    --good-text: #6BDC9C;
    --bad: #FF6B81;
    --bad-bg: #3B1A21;
    --bad-line: #7A3040;
    --bad-text: #FF8FA0;
    --focus: #8FAEE3;
    --on-ink: #1B2225;
    --on-fill: #1B2225;
    --glass-tint: rgba(33, 34, 36, .66);
    --glass-tint-strong: rgba(33, 34, 36, .84);
    --glass-edge: rgba(255, 255, 255, .10);
    --glass-highlight: rgba(255, 255, 255, .08);
    --sh-float: 0 8px 32px rgba(0, 0, 0, .34);
    --sh: 0 1px 2px rgba(0, 0, 0, .3);
    --sh-lift: 0 8px 32px rgba(0, 0, 0, .4);
    --plan-fill: #36333A;
    --plan-stroke: #F0F1F2;
    --plan-thin: #C6C9CC;
    --plan-void: #151B1D;
    --plan-module: #242D31;
    --plan-hatch: #414E54;
    --room-living: #1F2330;
    --room-sleep: #252428;
    --room-entry: #363538;
    --room-wet: #19171A;
    --m3d-floor: #3F4044;
    --m3d-wall-a: #2A272B;
    --m3d-wall-b: #242125;
    --m3d-front: #343036;
    --m3d-carcass: #303134;
    --m3d-top: #6C6E72;
    --m3d-edge: #D9D6D0;
    --lvl-1: #211E22;
    --lvl-2: #2D2A30;
    --lvl-3: #3D3A42;
  }
}
:root[data-palette="sapphire"][data-theme="dark"] {
  color: var(--ink);
  --paper: #18191B;
  --surface: #212224;
  --sunken: #121314;
  --line: #2E2F32;
  --line2: #3F4044;
  --ink: #F0F1F2;
  --ink2: #C6C9CC;
  --ink3: #A9ADB2;
  --brand: #8FAEE3;
  --brand-text: #A7C0EA;
  --brand-bg: #1E2A44;
  --brand-line: #33466E;
  --brand-deep: #3B5A8F;
  --brand-deep-2: #45659B;
  --on-brand-deep: #FFFFFF;
  --brand-deep-text2: #E4E9EB;
  --brand-steel: #767F88;
  --act: #8FAEE3;
  --act-hover: #A5BFEA;
  --on-act: #0C090B;
  --sys: #FB923C;
  --sys-text: #FDBA74;
  --sys-bg: #3B1D0A;
  --sys-line: #7C3A12;
  --good: #4CD487;
  --good-bg: #143425;
  --good-line: #2A6444;
  --good-text: #6BDC9C;
  --bad: #FF6B81;
  --bad-bg: #3B1A21;
  --bad-line: #7A3040;
  --bad-text: #FF8FA0;
  --focus: #8FAEE3;
  --on-ink: #1B2225;
  --on-fill: #1B2225;
  --glass-tint: rgba(33, 34, 36, .66);
  --glass-tint-strong: rgba(33, 34, 36, .84);
  --glass-edge: rgba(255, 255, 255, .10);
  --glass-highlight: rgba(255, 255, 255, .08);
  --sh-float: 0 8px 32px rgba(0, 0, 0, .34);
  --sh: 0 1px 2px rgba(0, 0, 0, .3);
  --sh-lift: 0 8px 32px rgba(0, 0, 0, .4);
  --plan-fill: #36333A;
  --plan-stroke: #F0F1F2;
  --plan-thin: #C6C9CC;
  --plan-void: #151B1D;
  --plan-module: #242D31;
  --plan-hatch: #414E54;
  --room-living: #1F2330;
  --room-sleep: #252428;
  --room-entry: #363538;
  --room-wet: #19171A;
  --m3d-floor: #3F4044;
  --m3d-wall-a: #2A272B;
  --m3d-wall-b: #242125;
  --m3d-front: #343036;
  --m3d-carcass: #303134;
  --m3d-top: #6C6E72;
  --m3d-edge: #D9D6D0;
  --lvl-1: #211E22;
  --lvl-2: #2D2A30;
  --lvl-3: #3D3A42;
}

/* neon */
:root[data-palette="neon"] {
  color: var(--ink);
  --paper: #F7F7F6;
  --surface: #FFFFFF;
  --sunken: #EFEFED;
  --line: #E5E5E2;
  --line2: #CDCDC9;
  --ink: #120223;
  --ink2: #3B2A4A;
  --ink3: #574766;
  --brand: #8C0286;
  --brand-text: #7A0275;
  --brand-bg: #F6E4F4;
  --brand-line: #E2B5DE;
  --brand-deep: #430357;
  --brand-deep-2: #52096A;
  --on-brand-deep: #FFFFFF;
  --brand-deep-text2: #F2D9F7;
  --brand-steel: #C40361;
  --act: #8C0286;
  --act-hover: #6E0269;
  --on-act: #FFFFFF;
  --sys: #EA580C;
  --sys-text: #B93C0A;
  --sys-bg: #FFEDD5;
  --sys-line: #FDBA74;
  --good: #1E7F45;
  --good-bg: #E5F4EA;
  --good-line: #B2DABF;
  --good-text: #166437;
  --bad: #C9203C;
  --bad-bg: #FCEBEE;
  --bad-line: #F0B9C3;
  --bad-text: #A8172F;
  --focus: #8C0286;
  --on-ink: #FFFFFF;
  --on-fill: #FFFFFF;
  --glass-tint: rgba(250, 250, 249, .74);
  --glass-tint-strong: rgba(252, 252, 251, .88);
  --glass-edge: rgba(18, 2, 35, .08);
  --glass-highlight: rgba(255, 255, 255, .7);
  --sh-float: 0 8px 32px rgba(67, 3, 87, .12);
  --sh: 0 1px 2px rgba(18, 2, 35, .06);
  --sh-lift: 0 8px 32px rgba(67, 3, 87, .16);
  --plan-fill: #DCD3E1;
  --plan-stroke: #120223;
  --plan-thin: #3B2A4A;
  --plan-void: #FFFFFF;
  --plan-module: #FFFFFF;
  --plan-hatch: #CDBDD6;
  --room-living: #EED9ED;
  --room-sleep: #E3D9E6;
  --room-entry: #F6D9E7;
  --room-wet: #E9D9E0;
  --m3d-floor: #E6E4E0;
  --m3d-wall-a: #F8F5FA;
  --m3d-wall-b: #ECE6F0;
  --m3d-front: #FFFFFF;
  --m3d-carcass: #ECEBE8;
  --m3d-top: #A7A9AC;
  --m3d-edge: #120223;
  --lvl-1: #F2E6F1;
  --lvl-2: #E5CCE3;
  --lvl-3: #D8B2D5;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="neon"]:not([data-theme="light"]) {
    color: var(--ink);
    --paper: #18191B;
    --surface: #212224;
    --sunken: #121314;
    --line: #2E2F32;
    --line2: #3F4044;
    --ink: #F5EEF8;
    --ink2: #CFC2D6;
    --ink3: #B2A3BB;
    --brand: #E07AD9;
    --brand-text: #EA9BE4;
    --brand-bg: #3A1240;
    --brand-line: #5E1F63;
    --brand-deep: #8C0286;
    --brand-deep-2: #9A1094;
    --on-brand-deep: #FFFFFF;
    --brand-deep-text2: #F7DDF5;
    --brand-steel: #C40361;
    --act: #E07AD9;
    --act-hover: #E896E2;
    --on-act: #1A0E26;
    --sys: #FB923C;
    --sys-text: #FDBA74;
    --sys-bg: #3B1D0A;
    --sys-line: #7C3A12;
    --good: #4CD487;
    --good-bg: #143425;
    --good-line: #2A6444;
    --good-text: #6BDC9C;
    --bad: #FF6B81;
    --bad-bg: #3B1A21;
    --bad-line: #7A3040;
    --bad-text: #FF8FA0;
    --focus: #E07AD9;
    --on-ink: #1B2225;
    --on-fill: #1B2225;
    --glass-tint: rgba(33, 34, 36, .66);
    --glass-tint-strong: rgba(33, 34, 36, .84);
    --glass-edge: rgba(255, 255, 255, .10);
    --glass-highlight: rgba(255, 255, 255, .08);
    --sh-float: 0 8px 32px rgba(0, 0, 0, .34);
    --sh: 0 1px 2px rgba(0, 0, 0, .3);
    --sh-lift: 0 8px 32px rgba(0, 0, 0, .4);
    --plan-fill: #3A2A44;
    --plan-stroke: #F5EEF8;
    --plan-thin: #CFC2D6;
    --plan-void: #151B1D;
    --plan-module: #242D31;
    --plan-hatch: #414E54;
    --room-living: #2C0C35;
    --room-sleep: #210C2E;
    --room-entry: #350C2F;
    --room-wet: #270C27;
    --m3d-floor: #3F4044;
    --m3d-wall-a: #2C1D36;
    --m3d-wall-b: #261830;
    --m3d-front: #352640;
    --m3d-carcass: #303134;
    --m3d-top: #6C6E72;
    --m3d-edge: #D9D6D0;
    --lvl-1: #2A1834;
    --lvl-2: #3A1E45;
    --lvl-3: #4E2259;
  }
}
:root[data-palette="neon"][data-theme="dark"] {
  color: var(--ink);
  --paper: #18191B;
  --surface: #212224;
  --sunken: #121314;
  --line: #2E2F32;
  --line2: #3F4044;
  --ink: #F5EEF8;
  --ink2: #CFC2D6;
  --ink3: #B2A3BB;
  --brand: #E07AD9;
  --brand-text: #EA9BE4;
  --brand-bg: #3A1240;
  --brand-line: #5E1F63;
  --brand-deep: #8C0286;
  --brand-deep-2: #9A1094;
  --on-brand-deep: #FFFFFF;
  --brand-deep-text2: #F7DDF5;
  --brand-steel: #C40361;
  --act: #E07AD9;
  --act-hover: #E896E2;
  --on-act: #1A0E26;
  --sys: #FB923C;
  --sys-text: #FDBA74;
  --sys-bg: #3B1D0A;
  --sys-line: #7C3A12;
  --good: #4CD487;
  --good-bg: #143425;
  --good-line: #2A6444;
  --good-text: #6BDC9C;
  --bad: #FF6B81;
  --bad-bg: #3B1A21;
  --bad-line: #7A3040;
  --bad-text: #FF8FA0;
  --focus: #E07AD9;
  --on-ink: #1B2225;
  --on-fill: #1B2225;
  --glass-tint: rgba(33, 34, 36, .66);
  --glass-tint-strong: rgba(33, 34, 36, .84);
  --glass-edge: rgba(255, 255, 255, .10);
  --glass-highlight: rgba(255, 255, 255, .08);
  --sh-float: 0 8px 32px rgba(0, 0, 0, .34);
  --sh: 0 1px 2px rgba(0, 0, 0, .3);
  --sh-lift: 0 8px 32px rgba(0, 0, 0, .4);
  --plan-fill: #3A2A44;
  --plan-stroke: #F5EEF8;
  --plan-thin: #CFC2D6;
  --plan-void: #151B1D;
  --plan-module: #242D31;
  --plan-hatch: #414E54;
  --room-living: #2C0C35;
  --room-sleep: #210C2E;
  --room-entry: #350C2F;
  --room-wet: #270C27;
  --m3d-floor: #3F4044;
  --m3d-wall-a: #2C1D36;
  --m3d-wall-b: #261830;
  --m3d-front: #352640;
  --m3d-carcass: #303134;
  --m3d-top: #6C6E72;
  --m3d-edge: #D9D6D0;
  --lvl-1: #2A1834;
  --lvl-2: #3A1E45;
  --lvl-3: #4E2259;
}

/* lime */
:root:not([data-palette]), :root[data-palette="lime"] {
  color: var(--ink);
  --paper: #F7F7F6;
  --surface: #FFFFFF;
  --sunken: #EFEFED;
  --line: #E5E5E2;
  --line2: #CDCDC9;
  --ink: #080118;
  --ink2: #353A2C;
  --ink3: #4E5444;
  --brand: #637713;
  --brand-text: #56680F;
  --brand-bg: #EFF5DA;
  --brand-line: #CFDE9C;
  --brand-deep: #3D4324;
  --brand-deep-2: #4A512C;
  --on-brand-deep: #FFFFFF;
  --brand-deep-text2: #C9F42D;
  --brand-steel: #C9F42D;
  --act: #3D4324;
  --act-hover: #2D321A;
  --on-act: #FFFFFF;
  --sys: #EA580C;
  --sys-text: #B93C0A;
  --sys-bg: #FFEDD5;
  --sys-line: #FDBA74;
  --good: #0B6E99;
  --good-bg: #E3F1F8;
  --good-line: #A9D3E8;
  --good-text: #095A7D;
  --bad: #C9203C;
  --bad-bg: #FCEBEE;
  --bad-line: #F0B9C3;
  --bad-text: #A8172F;
  --focus: #637713;
  --on-ink: #FFFFFF;
  --on-fill: #FFFFFF;
  --glass-tint: rgba(250, 250, 249, .74);
  --glass-tint-strong: rgba(252, 252, 251, .88);
  --glass-edge: rgba(8, 1, 24, .08);
  --glass-highlight: rgba(255, 255, 255, .7);
  --sh-float: 0 8px 32px rgba(61, 67, 36, .12);
  --sh: 0 1px 2px rgba(8, 1, 24, .06);
  --sh-lift: 0 8px 32px rgba(61, 67, 36, .16);
  --plan-fill: #D5D9C5;
  --plan-stroke: #080118;
  --plan-thin: #353A2C;
  --plan-void: #FFFFFF;
  --plan-module: #FFFFFF;
  --plan-hatch: #C6CBB2;
  --room-living: #F7FDE0;
  --room-sleep: #EEF4DC;
  --room-entry: #E8EBDC;
  --room-wet: #E2E3DE;
  --m3d-floor: #E6E4E0;
  --m3d-wall-a: #F8F9F4;
  --m3d-wall-b: #EAEDE1;
  --m3d-front: #FFFFFA;
  --m3d-carcass: #ECEBE8;
  --m3d-top: #A7A9AC;
  --m3d-edge: #080118;
  --lvl-1: #F1FAD0;
  --lvl-2: #E3F5A2;
  --lvl-3: #D6F075;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-palette]):not([data-theme="light"]), :root[data-palette="lime"]:not([data-theme="light"]) {
    color: var(--ink);
    --paper: #18191B;
    --surface: #212224;
    --sunken: #121314;
    --line: #2E2F32;
    --line2: #3F4044;
    --ink: #F2F1F5;
    --ink2: #C9C6D0;
    --ink3: #ACA8B4;
    --brand: #C9F42D;
    --brand-text: #D6F762;
    --brand-bg: #2C3416;
    --brand-line: #4A5822;
    --brand-deep: #3D4324;
    --brand-deep-2: #4A512C;
    --on-brand-deep: #FFFFFF;
    --brand-deep-text2: #E6FAA0;
    --brand-steel: #C9F42D;
    --act: #C9F42D;
    --act-hover: #D6F762;
    --on-act: #080118;
    --sys: #FB923C;
    --sys-text: #FDBA74;
    --sys-bg: #3B1D0A;
    --sys-line: #7C3A12;
    --good: #5BB8E0;
    --good-bg: #0E2E3D;
    --good-line: #1D4F66;
    --good-text: #6CC3E8;
    --bad: #FF6B81;
    --bad-bg: #3B1A21;
    --bad-line: #7A3040;
    --bad-text: #FF8FA0;
    --focus: #C9F42D;
    --on-ink: #1B2225;
    --on-fill: #1B2225;
    --glass-tint: rgba(33, 34, 36, .66);
    --glass-tint-strong: rgba(33, 34, 36, .84);
    --glass-edge: rgba(255, 255, 255, .10);
    --glass-highlight: rgba(255, 255, 255, .08);
    --sh-float: 0 8px 32px rgba(0, 0, 0, .34);
    --sh: 0 1px 2px rgba(0, 0, 0, .3);
    --sh-lift: 0 8px 32px rgba(0, 0, 0, .4);
    --plan-fill: #36343F;
    --plan-stroke: #F2F1F5;
    --plan-thin: #C9C6D0;
    --plan-void: #151B1D;
    --plan-module: #242D31;
    --plan-hatch: #414E54;
    --room-living: #333921;
    --room-sleep: #2A2F1E;
    --room-entry: #23251D;
    --room-wet: #1D1C20;
    --m3d-floor: #3F4044;
    --m3d-wall-a: #29272F;
    --m3d-wall-b: #24222A;
    --m3d-front: #323039;
    --m3d-carcass: #303134;
    --m3d-top: #6C6E72;
    --m3d-edge: #D9D6D0;
    --lvl-1: #23271C;
    --lvl-2: #2F3A1A;
    --lvl-3: #3D4324;
  }
}
:root:not([data-palette])[data-theme="dark"], :root[data-palette="lime"][data-theme="dark"] {
  color: var(--ink);
  --paper: #18191B;
  --surface: #212224;
  --sunken: #121314;
  --line: #2E2F32;
  --line2: #3F4044;
  --ink: #F2F1F5;
  --ink2: #C9C6D0;
  --ink3: #ACA8B4;
  --brand: #C9F42D;
  --brand-text: #D6F762;
  --brand-bg: #2C3416;
  --brand-line: #4A5822;
  --brand-deep: #3D4324;
  --brand-deep-2: #4A512C;
  --on-brand-deep: #FFFFFF;
  --brand-deep-text2: #E6FAA0;
  --brand-steel: #C9F42D;
  --act: #C9F42D;
  --act-hover: #D6F762;
  --on-act: #080118;
  --sys: #FB923C;
  --sys-text: #FDBA74;
  --sys-bg: #3B1D0A;
  --sys-line: #7C3A12;
  --good: #5BB8E0;
  --good-bg: #0E2E3D;
  --good-line: #1D4F66;
  --good-text: #6CC3E8;
  --bad: #FF6B81;
  --bad-bg: #3B1A21;
  --bad-line: #7A3040;
  --bad-text: #FF8FA0;
  --focus: #C9F42D;
  --on-ink: #1B2225;
  --on-fill: #1B2225;
  --glass-tint: rgba(33, 34, 36, .66);
  --glass-tint-strong: rgba(33, 34, 36, .84);
  --glass-edge: rgba(255, 255, 255, .10);
  --glass-highlight: rgba(255, 255, 255, .08);
  --sh-float: 0 8px 32px rgba(0, 0, 0, .34);
  --sh: 0 1px 2px rgba(0, 0, 0, .3);
  --sh-lift: 0 8px 32px rgba(0, 0, 0, .4);
  --plan-fill: #36343F;
  --plan-stroke: #F2F1F5;
  --plan-thin: #C9C6D0;
  --plan-void: #151B1D;
  --plan-module: #242D31;
  --plan-hatch: #414E54;
  --room-living: #333921;
  --room-sleep: #2A2F1E;
  --room-entry: #23251D;
  --room-wet: #1D1C20;
  --m3d-floor: #3F4044;
  --m3d-wall-a: #29272F;
  --m3d-wall-b: #24222A;
  --m3d-front: #323039;
  --m3d-carcass: #303134;
  --m3d-top: #6C6E72;
  --m3d-edge: #D9D6D0;
  --lvl-1: #23271C;
  --lvl-2: #2F3A1A;
  --lvl-3: #3D4324;
}

/* moon */
:root[data-palette="moon"] {
  color: var(--ink);
  --paper: #F7F7F6;
  --surface: #FFFFFF;
  --sunken: #EFEFED;
  --line: #E5E5E2;
  --line2: #CDCDC9;
  --ink: #06151E;
  --ink2: #3E4648;
  --ink3: #4F5759;
  --brand: #5D6466;
  --brand-text: #4C5355;
  --brand-bg: #E9EBEB;
  --brand-line: #C3C7C8;
  --brand-deep: #06151E;
  --brand-deep-2: #13252F;
  --on-brand-deep: #FFFFFF;
  --brand-deep-text2: #CDCBC6;
  --brand-steel: #898A8C;
  --act: #5D6466;
  --act-hover: #474D4F;
  --on-act: #FFFFFF;
  --sys: #EA580C;
  --sys-text: #B93C0A;
  --sys-bg: #FFEDD5;
  --sys-line: #FDBA74;
  --good: #1E7F45;
  --good-bg: #E5F4EA;
  --good-line: #B2DABF;
  --good-text: #166437;
  --bad: #C9203C;
  --bad-bg: #FCEBEE;
  --bad-line: #F0B9C3;
  --bad-text: #A8172F;
  --focus: #5D6466;
  --on-ink: #FFFFFF;
  --on-fill: #FFFFFF;
  --glass-tint: rgba(250, 250, 249, .74);
  --glass-tint-strong: rgba(252, 252, 251, .88);
  --glass-edge: rgba(6, 21, 30, .08);
  --glass-highlight: rgba(255, 255, 255, .7);
  --sh-float: 0 8px 32px rgba(6, 21, 30, .12);
  --sh: 0 1px 2px rgba(6, 21, 30, .06);
  --sh-lift: 0 8px 32px rgba(6, 21, 30, .16);
  --plan-fill: #D6D2CC;
  --plan-stroke: #06151E;
  --plan-thin: #3E4648;
  --plan-void: #FFFFFF;
  --plan-module: #FFFFFF;
  --plan-hatch: #CDCBC6;
  --room-living: #E7E8E8;
  --room-sleep: #EDEDEE;
  --room-entry: #F8F7F6;
  --room-wet: #DADCDD;
  --m3d-floor: #E6E4E0;
  --m3d-wall-a: #F6F2EE;
  --m3d-wall-b: #E8E5E1;
  --m3d-front: #FFFDFA;
  --m3d-carcass: #ECEBE8;
  --m3d-top: #A7A9AC;
  --m3d-edge: #06151E;
  --lvl-1: #E8E6E2;
  --lvl-2: #D7D6D3;
  --lvl-3: #C6C6C5;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="moon"]:not([data-theme="light"]) {
    color: var(--ink);
    --paper: #18191B;
    --surface: #212224;
    --sunken: #121314;
    --line: #2E2F32;
    --line2: #3F4044;
    --ink: #F1EDE8;
    --ink2: #C7C6C3;
    --ink3: #AAABAA;
    --brand: #CDCBC6;
    --brand-text: #DAD8D4;
    --brand-bg: #2A3135;
    --brand-line: #454D51;
    --brand-deep: #4C5355;
    --brand-deep-2: #424849;
    --on-brand-deep: #FFFFFF;
    --brand-deep-text2: #FFFFFF;
    --brand-steel: #898A8C;
    --act: #CDCBC6;
    --act-hover: #DAD8D4;
    --on-act: #06151E;
    --sys: #FB923C;
    --sys-text: #FDBA74;
    --sys-bg: #3B1D0A;
    --sys-line: #7C3A12;
    --good: #4CD487;
    --good-bg: #143425;
    --good-line: #2A6444;
    --good-text: #6BDC9C;
    --bad: #FF6B81;
    --bad-bg: #3B1A21;
    --bad-line: #7A3040;
    --bad-text: #FF8FA0;
    --focus: #CDCBC6;
    --on-ink: #1B2225;
    --on-fill: #1B2225;
    --glass-tint: rgba(33, 34, 36, .66);
    --glass-tint-strong: rgba(33, 34, 36, .84);
    --glass-edge: rgba(255, 255, 255, .10);
    --glass-highlight: rgba(255, 255, 255, .08);
    --sh-float: 0 8px 32px rgba(0, 0, 0, .34);
    --sh: 0 1px 2px rgba(0, 0, 0, .3);
    --sh-lift: 0 8px 32px rgba(0, 0, 0, .4);
    --plan-fill: #2F3A40;
    --plan-stroke: #F1EDE8;
    --plan-thin: #C7C6C3;
    --plan-void: #151B1D;
    --plan-module: #242D31;
    --plan-hatch: #414E54;
    --room-living: #1C2327;
    --room-sleep: #23292D;
    --room-entry: #2E3436;
    --room-wet: #0E171B;
    --m3d-floor: #3F4044;
    --m3d-wall-a: #232D32;
    --m3d-wall-b: #1E272C;
    --m3d-front: #2C363C;
    --m3d-carcass: #303134;
    --m3d-top: #6C6E72;
    --m3d-edge: #D9D6D0;
    --lvl-1: #1D262B;
    --lvl-2: #283338;
    --lvl-3: #3A4448;
  }
}
:root[data-palette="moon"][data-theme="dark"] {
  color: var(--ink);
  --paper: #18191B;
  --surface: #212224;
  --sunken: #121314;
  --line: #2E2F32;
  --line2: #3F4044;
  --ink: #F1EDE8;
  --ink2: #C7C6C3;
  --ink3: #AAABAA;
  --brand: #CDCBC6;
  --brand-text: #DAD8D4;
  --brand-bg: #2A3135;
  --brand-line: #454D51;
  --brand-deep: #4C5355;
  --brand-deep-2: #424849;
  --on-brand-deep: #FFFFFF;
  --brand-deep-text2: #FFFFFF;
  --brand-steel: #898A8C;
  --act: #CDCBC6;
  --act-hover: #DAD8D4;
  --on-act: #06151E;
  --sys: #FB923C;
  --sys-text: #FDBA74;
  --sys-bg: #3B1D0A;
  --sys-line: #7C3A12;
  --good: #4CD487;
  --good-bg: #143425;
  --good-line: #2A6444;
  --good-text: #6BDC9C;
  --bad: #FF6B81;
  --bad-bg: #3B1A21;
  --bad-line: #7A3040;
  --bad-text: #FF8FA0;
  --focus: #CDCBC6;
  --on-ink: #1B2225;
  --on-fill: #1B2225;
  --glass-tint: rgba(33, 34, 36, .66);
  --glass-tint-strong: rgba(33, 34, 36, .84);
  --glass-edge: rgba(255, 255, 255, .10);
  --glass-highlight: rgba(255, 255, 255, .08);
  --sh-float: 0 8px 32px rgba(0, 0, 0, .34);
  --sh: 0 1px 2px rgba(0, 0, 0, .3);
  --sh-lift: 0 8px 32px rgba(0, 0, 0, .4);
  --plan-fill: #2F3A40;
  --plan-stroke: #F1EDE8;
  --plan-thin: #C7C6C3;
  --plan-void: #151B1D;
  --plan-module: #242D31;
  --plan-hatch: #414E54;
  --room-living: #1C2327;
  --room-sleep: #23292D;
  --room-entry: #2E3436;
  --room-wet: #0E171B;
  --m3d-floor: #3F4044;
  --m3d-wall-a: #232D32;
  --m3d-wall-b: #1E272C;
  --m3d-front: #2C363C;
  --m3d-carcass: #303134;
  --m3d-top: #6C6E72;
  --m3d-edge: #D9D6D0;
  --lvl-1: #1D262B;
  --lvl-2: #283338;
  --lvl-3: #3A4448;
}