/* Themes for the Appearance picker. Generated by design/brand-kit/build-app-themes.js from the brand kit's schemes.js and fx.css.
   Edit those and rebuild; don't edit this file by hand. The theme's class (fx-<id>) sits on <html>; Marigold is the base in app.css. */
@font-face { font-family: "VT323"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/vt323.woff2) format("woff2"); size-adjust: 130%; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/barlow-condensed-bold.woff2) format("woff2"); }
@font-face { font-family: "Orbitron"; font-style: normal; font-weight: 700 900; font-display: swap; src: url(../fonts/orbitron.woff2) format("woff2"); }
@font-face { font-family: "Press Start 2P"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/press-start-2p.woff2) format("woff2"); size-adjust: 69%; }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/caveat.woff2) format("woff2"); size-adjust: 144%; }
@font-face { font-family: "Caveat Brush"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/caveat-brush.woff2) format("woff2"); size-adjust: 124%; }
@font-face { font-family: "Pixelify Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/pixelify-sans.woff2) format("woff2"); }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(../fonts/unbounded.woff2) format("woff2"); }

/* Lagoon */
:root.fx-lagoon:not([data-theme="dark"]) { --bg: #f0f7f7; --surface: #fdffff; --surface-2: #e1eded; --line: #d4e1e2; --ink: #011e20; --ink-2: #37595b; --ink-3: #4c6a6b; --accent: #22cde5; --accent-ink: #00667e; --accent-soft: #d1f7fb; --on-accent: #04222b; --focus: #00667e; --good: #1f8a5b; --good-soft: #dcf3e8; --bad: #c2384b; --bad-soft: #fbe1e5; --warn: #b26a00; --warn-soft: #fdecc8; --chip-l: 0.94; --chip-c: 0.04; --chipink-l: 0.42; --chipink-c: 0.1; --dot-l: 0.61; --dot-c: 0.11; --deep-l: 0.48; --deep-c: 0.1; --hk: 1; --ho: 10; --mk1: oklch(0.7 0.11 30); --mk2: oklch(0.76 0.11 105); --mk3: oklch(0.7 0.1 175); --mk4: oklch(0.65 0.11 255); --fxc: transparent; }
@media (prefers-color-scheme: dark) { :root.fx-lagoon:not([data-theme="light"]) { --bg: #021213; --surface: #051b1c; --surface-2: #0c2628; --line: #193637; --ink: #e7f1f1; --ink-2: #a6bdbe; --ink-3: #93aaab; --accent: #44d4e2; --accent-ink: #73dee9; --accent-soft: #003540; --on-accent: #04222b; --focus: #44d4e2; --good: #4cc993; --good-soft: #12352a; --bad: #f2788a; --bad-soft: #3d1a22; --warn: #f2b34c; --warn-soft: #3a2c10; --chip-l: 0.31; --chip-c: 0.05; --chipink-l: 0.88; --chipink-c: 0.07; --dot-l: 0.72; --dot-c: 0.11; --deep-l: 0.48; --deep-c: 0.1; --hk: 1; --ho: 10; --mk1: oklch(0.7 0.11 30); --mk2: oklch(0.76 0.11 105); --mk3: oklch(0.7 0.1 175); --mk4: oklch(0.65 0.11 255); --fxc: transparent; color-scheme: dark; } }
:root.fx-lagoon[data-theme="dark"] { --bg: #021213; --surface: #051b1c; --surface-2: #0c2628; --line: #193637; --ink: #e7f1f1; --ink-2: #a6bdbe; --ink-3: #93aaab; --accent: #44d4e2; --accent-ink: #73dee9; --accent-soft: #003540; --on-accent: #04222b; --focus: #44d4e2; --good: #4cc993; --good-soft: #12352a; --bad: #f2788a; --bad-soft: #3d1a22; --warn: #f2b34c; --warn-soft: #3a2c10; --chip-l: 0.31; --chip-c: 0.05; --chipink-l: 0.88; --chipink-c: 0.07; --dot-l: 0.72; --dot-c: 0.11; --deep-l: 0.48; --deep-c: 0.1; --hk: 1; --ho: 10; --mk1: oklch(0.7 0.11 30); --mk2: oklch(0.76 0.11 105); --mk3: oklch(0.7 0.1 175); --mk4: oklch(0.65 0.11 255); --fxc: transparent; color-scheme: dark; }

/* Ultraviolet */
:root.fx-ultraviolet:not([data-theme="dark"]) { --bg: #f5f4fc; --surface: #fefeff; --surface-2: #eae8f5; --line: #dddceb; --ink: #19152e; --ink-2: #524d70; --ink-3: #625f7e; --accent: #7436e3; --accent-ink: #6730cc; --accent-soft: #ebe7ff; --on-accent: #ffffff; --focus: #6730cc; --good: #1f8a5b; --good-soft: #dcf3e8; --bad: #c2384b; --bad-soft: #fbe1e5; --warn: #b26a00; --warn-soft: #fdecc8; --chip-l: 0.92; --chip-c: 0.06; --chipink-l: 0.38; --chipink-c: 0.15; --dot-l: 0.62; --dot-c: 0.17; --deep-l: 0.46; --deep-c: 0.15; --hk: 1; --ho: 0; --mk1: oklch(0.64 0.2 350); --mk2: oklch(0.72 0.16 60); --mk3: oklch(0.66 0.14 175); --mk4: oklch(0.58 0.2 280); --fxc: transparent; }
@media (prefers-color-scheme: dark) { :root.fx-ultraviolet:not([data-theme="light"]) { --bg: #0e0b1c; --surface: #171428; --surface-2: #211e36; --line: #302c47; --ink: #eeedf8; --ink-2: #b6b4cd; --ink-3: #a4a1ba; --accent: #b296ff; --accent-ink: #c3aeff; --accent-soft: #302356; --on-accent: #140728; --focus: #b296ff; --good: #4cc993; --good-soft: #12352a; --bad: #f2788a; --bad-soft: #3d1a22; --warn: #f2b34c; --warn-soft: #3a2c10; --chip-l: 0.3; --chip-c: 0.08; --chipink-l: 0.88; --chipink-c: 0.1; --dot-l: 0.72; --dot-c: 0.16; --deep-l: 0.46; --deep-c: 0.15; --hk: 1; --ho: 0; --mk1: oklch(0.64 0.2 350); --mk2: oklch(0.72 0.16 60); --mk3: oklch(0.66 0.14 175); --mk4: oklch(0.58 0.2 280); --fxc: transparent; color-scheme: dark; } }
:root.fx-ultraviolet[data-theme="dark"] { --bg: #0e0b1c; --surface: #171428; --surface-2: #211e36; --line: #302c47; --ink: #eeedf8; --ink-2: #b6b4cd; --ink-3: #a4a1ba; --accent: #b296ff; --accent-ink: #c3aeff; --accent-soft: #302356; --on-accent: #140728; --focus: #b296ff; --good: #4cc993; --good-soft: #12352a; --bad: #f2788a; --bad-soft: #3d1a22; --warn: #f2b34c; --warn-soft: #3a2c10; --chip-l: 0.3; --chip-c: 0.08; --chipink-l: 0.88; --chipink-c: 0.1; --dot-l: 0.72; --dot-c: 0.16; --deep-l: 0.46; --deep-c: 0.15; --hk: 1; --ho: 0; --mk1: oklch(0.64 0.2 350); --mk2: oklch(0.72 0.16 60); --mk3: oklch(0.66 0.14 175); --mk4: oklch(0.58 0.2 280); --fxc: transparent; color-scheme: dark; }

/* Tangerine */
:root.fx-tangerine:not([data-theme="dark"]) { --bg: #f8f4f1; --surface: #fffefd; --surface-2: #f0e9e3; --line: #e5dcd6; --ink: #24160a; --ink-2: #624e3f; --ink-3: #715f51; --accent: #fd8537; --accent-ink: #9d4616; --accent-soft: #ffe9d4; --on-accent: #2a0f00; --focus: #9d4616; --good: #1f8a5b; --good-soft: #dcf3e8; --bad: #c2384b; --bad-soft: #fbe1e5; --warn: #b26a00; --warn-soft: #fdecc8; --chip-l: 0.93; --chip-c: 0.06; --chipink-l: 0.4; --chipink-c: 0.13; --dot-l: 0.61; --dot-c: 0.15; --deep-l: 0.5; --deep-c: 0.13; --hk: 1; --ho: 0; --mk1: oklch(0.68 0.17 25); --mk2: oklch(0.8 0.15 90); --mk3: oklch(0.7 0.13 160); --mk4: oklch(0.64 0.14 245); --fxc: transparent; }
@media (prefers-color-scheme: dark) { :root.fx-tangerine:not([data-theme="light"]) { --bg: #160c05; --surface: #20140b; --surface-2: #2c1e13; --line: #3d2d20; --ink: #f3ede9; --ink-2: #c3b4a9; --ink-3: #b0a297; --accent: #ff9044; --accent-ink: #ffaf76; --accent-soft: #45240f; --on-accent: #2a0f00; --focus: #ff9044; --good: #4cc993; --good-soft: #12352a; --bad: #f2788a; --bad-soft: #3d1a22; --warn: #f2b34c; --warn-soft: #3a2c10; --chip-l: 0.32; --chip-c: 0.07; --chipink-l: 0.88; --chipink-c: 0.09; --dot-l: 0.74; --dot-c: 0.14; --deep-l: 0.5; --deep-c: 0.13; --hk: 1; --ho: 0; --mk1: oklch(0.68 0.17 25); --mk2: oklch(0.8 0.15 90); --mk3: oklch(0.7 0.13 160); --mk4: oklch(0.64 0.14 245); --fxc: transparent; color-scheme: dark; } }
:root.fx-tangerine[data-theme="dark"] { --bg: #160c05; --surface: #20140b; --surface-2: #2c1e13; --line: #3d2d20; --ink: #f3ede9; --ink-2: #c3b4a9; --ink-3: #b0a297; --accent: #ff9044; --accent-ink: #ffaf76; --accent-soft: #45240f; --on-accent: #2a0f00; --focus: #ff9044; --good: #4cc993; --good-soft: #12352a; --bad: #f2788a; --bad-soft: #3d1a22; --warn: #f2b34c; --warn-soft: #3a2c10; --chip-l: 0.32; --chip-c: 0.07; --chipink-l: 0.88; --chipink-c: 0.09; --dot-l: 0.74; --dot-c: 0.14; --deep-l: 0.5; --deep-c: 0.13; --hk: 1; --ho: 0; --mk1: oklch(0.68 0.17 25); --mk2: oklch(0.8 0.15 90); --mk3: oklch(0.7 0.13 160); --mk4: oklch(0.64 0.14 245); --fxc: transparent; color-scheme: dark; }

/* Graphite */
:root.fx-graphite:not([data-theme="dark"]) { --bg: #f4f5f6; --surface: #fefeff; --surface-2: #e9eaed; --line: #dcdee1; --ink: #161a1f; --ink-2: #4e535a; --ink-3: #5f636a; --accent: #2867e4; --accent-ink: #1e59cd; --accent-soft: #e0ecff; --on-accent: #ffffff; --focus: #1e59cd; --good: #1f8a5b; --good-soft: #dcf3e8; --bad: #c2384b; --bad-soft: #fbe1e5; --warn: #b26a00; --warn-soft: #fdecc8; --chip-l: 0.94; --chip-c: 0.03; --chipink-l: 0.42; --chipink-c: 0.08; --dot-l: 0.64; --dot-c: 0.08; --deep-l: 0.46; --deep-c: 0.08; --hk: 1; --ho: 0; --mk1: oklch(0.62 0.09 25); --mk2: oklch(0.74 0.09 85); --mk3: oklch(0.64 0.08 165); --mk4: oklch(0.56 0.09 255); --fxc: transparent; }
@media (prefers-color-scheme: dark) { :root.fx-graphite:not([data-theme="light"]) { --bg: #0c0e12; --surface: #15171c; --surface-2: #1f2227; --line: #2d3137; --ink: #edeef0; --ink-2: #b4b8bd; --ink-3: #a1a5aa; --accent: #70adfb; --accent-ink: #92c1fd; --accent-soft: #1a2d51; --on-accent: #06142e; --focus: #70adfb; --good: #4cc993; --good-soft: #12352a; --bad: #f2788a; --bad-soft: #3d1a22; --warn: #f2b34c; --warn-soft: #3a2c10; --chip-l: 0.3; --chip-c: 0.035; --chipink-l: 0.87; --chipink-c: 0.05; --dot-l: 0.72; --dot-c: 0.08; --deep-l: 0.46; --deep-c: 0.08; --hk: 1; --ho: 0; --mk1: oklch(0.62 0.09 25); --mk2: oklch(0.74 0.09 85); --mk3: oklch(0.64 0.08 165); --mk4: oklch(0.56 0.09 255); --fxc: transparent; color-scheme: dark; } }
:root.fx-graphite[data-theme="dark"] { --bg: #0c0e12; --surface: #15171c; --surface-2: #1f2227; --line: #2d3137; --ink: #edeef0; --ink-2: #b4b8bd; --ink-3: #a1a5aa; --accent: #70adfb; --accent-ink: #92c1fd; --accent-soft: #1a2d51; --on-accent: #06142e; --focus: #70adfb; --good: #4cc993; --good-soft: #12352a; --bad: #f2788a; --bad-soft: #3d1a22; --warn: #f2b34c; --warn-soft: #3a2c10; --chip-l: 0.3; --chip-c: 0.035; --chipink-l: 0.87; --chipink-c: 0.05; --dot-l: 0.72; --dot-c: 0.08; --deep-l: 0.46; --deep-c: 0.08; --hk: 1; --ho: 0; --mk1: oklch(0.62 0.09 25); --mk2: oklch(0.74 0.09 85); --mk3: oklch(0.64 0.08 165); --mk4: oklch(0.56 0.09 255); --fxc: transparent; color-scheme: dark; }

/* Playroom */
:root.fx-playroom:not([data-theme="dark"]) { --bg: #f7f4f6; --surface: #fffeff; --surface-2: #ede8ec; --line: #e1dce0; --ink: #1f161e; --ink-2: #5a4e59; --ink-3: #6a5f69; --accent: #f537a1; --accent-ink: #af0f6f; --accent-soft: #ffe5f1; --on-accent: #2b0414; --focus: #af0f6f; --good: #1f8a5b; --good-soft: #dcf3e8; --bad: #b4232f; --bad-soft: #fbe1e3; --warn: #b26a00; --warn-soft: #fdecc8; --chip-l: 0.92; --chip-c: 0.075; --chipink-l: 0.41; --chipink-c: 0.15; --dot-l: 0.61; --dot-c: 0.17; --deep-l: 0.5; --deep-c: 0.15; --hk: 1; --ho: -5; --mk1: oklch(0.68 0.2 10); --mk2: oklch(0.82 0.16 95); --mk3: oklch(0.74 0.16 170); --mk4: oklch(0.64 0.18 270); --fxc: transparent; }
@media (prefers-color-scheme: dark) { :root.fx-playroom:not([data-theme="light"]) { --bg: #120c11; --surface: #1c141b; --surface-2: #271e26; --line: #372d35; --ink: #f1edf0; --ink-2: #bdb4bc; --ink-3: #aaa1a9; --accent: #fd74b7; --accent-ink: #fd9ac6; --accent-soft: #4d1c34; --on-accent: #2b0414; --focus: #fd74b7; --good: #4cc993; --good-soft: #12352a; --bad: #f2788a; --bad-soft: #3d1a22; --warn: #f2b34c; --warn-soft: #3a2c10; --chip-l: 0.33; --chip-c: 0.09; --chipink-l: 0.89; --chipink-c: 0.1; --dot-l: 0.76; --dot-c: 0.16; --deep-l: 0.5; --deep-c: 0.15; --hk: 1; --ho: -5; --mk1: oklch(0.68 0.2 10); --mk2: oklch(0.82 0.16 95); --mk3: oklch(0.74 0.16 170); --mk4: oklch(0.64 0.18 270); --fxc: transparent; color-scheme: dark; } }
:root.fx-playroom[data-theme="dark"] { --bg: #120c11; --surface: #1c141b; --surface-2: #271e26; --line: #372d35; --ink: #f1edf0; --ink-2: #bdb4bc; --ink-3: #aaa1a9; --accent: #fd74b7; --accent-ink: #fd9ac6; --accent-soft: #4d1c34; --on-accent: #2b0414; --focus: #fd74b7; --good: #4cc993; --good-soft: #12352a; --bad: #f2788a; --bad-soft: #3d1a22; --warn: #f2b34c; --warn-soft: #3a2c10; --chip-l: 0.33; --chip-c: 0.09; --chipink-l: 0.89; --chipink-c: 0.1; --dot-l: 0.76; --dot-c: 0.16; --deep-l: 0.5; --deep-c: 0.15; --hk: 1; --ho: -5; --mk1: oklch(0.68 0.2 10); --mk2: oklch(0.82 0.16 95); --mk3: oklch(0.74 0.16 170); --mk4: oklch(0.64 0.18 270); --fxc: transparent; color-scheme: dark; }

/* Matrix */
:root.fx-matrix:not([data-theme="dark"]) { --bg: #eef6ec; --surface: #fbfefa; --surface-2: #deeeda; --line: #bcd8b8; --ink: #08210f; --ink-2: #28553a; --ink-3: #2f6542; --accent: #00d660; --accent-ink: #006b2c; --accent-soft: #d3f6de; --on-accent: #00210c; --focus: #006b2c; --good: #0a7a3a; --good-soft: #d6f3df; --bad: #b3261e; --bad-soft: #fbe2df; --warn: #8a6200; --warn-soft: #f6ecc6; --chip-l: 0.93; --chip-c: 0.06; --chipink-l: 0.4; --chipink-c: 0.12; --dot-l: 0.6; --dot-c: 0.16; --deep-l: 0.45; --deep-c: 0.12; --hk: 0.21; --ho: 120; --mk1: oklch(0.55 0.17 145); --mk2: oklch(0.7 0.2 145); --mk3: oklch(0.82 0.22 145); --mk4: oklch(0.93 0.2 145); --fxc: transparent; --f-display: "JetBrains Mono", ui-monospace, monospace; --f-body: "JetBrains Mono", ui-monospace, monospace; --r-s: 2px; --r: 3px; --r-l: 4px; }
@media (prefers-color-scheme: dark) { :root.fx-matrix:not([data-theme="light"]) { --bg: #010a04; --surface: #03130a; --surface-2: #072014; --line: #0f3a20; --ink: #c4ffd4; --ink-2: #6fe596; --ink-3: #4fcb78; --accent: #00ff6a; --accent-ink: #7dffaa; --accent-soft: #063019; --on-accent: #001a09; --focus: #00ff6a; --good: #7dffaa; --good-soft: #0b3a1f; --bad: #ff6f6f; --bad-soft: #3a1010; --warn: #e8e86a; --warn-soft: #2e2e08; --chip-l: 0.27; --chip-c: 0.07; --chipink-l: 0.9; --chipink-c: 0.17; --dot-l: 0.8; --dot-c: 0.2; --deep-l: 0.42; --deep-c: 0.12; --hk: 0.21; --ho: 120; --mk1: oklch(0.55 0.17 145); --mk2: oklch(0.7 0.2 145); --mk3: oklch(0.82 0.22 145); --mk4: oklch(0.93 0.2 145); --fxc: rgba(0,255,106,.45); --f-display: "JetBrains Mono", ui-monospace, monospace; --f-body: "JetBrains Mono", ui-monospace, monospace; --r-s: 2px; --r: 3px; --r-l: 4px; color-scheme: dark; } }
:root.fx-matrix[data-theme="dark"] { --bg: #010a04; --surface: #03130a; --surface-2: #072014; --line: #0f3a20; --ink: #c4ffd4; --ink-2: #6fe596; --ink-3: #4fcb78; --accent: #00ff6a; --accent-ink: #7dffaa; --accent-soft: #063019; --on-accent: #001a09; --focus: #00ff6a; --good: #7dffaa; --good-soft: #0b3a1f; --bad: #ff6f6f; --bad-soft: #3a1010; --warn: #e8e86a; --warn-soft: #2e2e08; --chip-l: 0.27; --chip-c: 0.07; --chipink-l: 0.9; --chipink-c: 0.17; --dot-l: 0.8; --dot-c: 0.2; --deep-l: 0.42; --deep-c: 0.12; --hk: 0.21; --ho: 120; --mk1: oklch(0.55 0.17 145); --mk2: oklch(0.7 0.2 145); --mk3: oklch(0.82 0.22 145); --mk4: oklch(0.93 0.2 145); --fxc: rgba(0,255,106,.45); --f-display: "JetBrains Mono", ui-monospace, monospace; --f-body: "JetBrains Mono", ui-monospace, monospace; --r-s: 2px; --r: 3px; --r-l: 4px; color-scheme: dark; }

/* Amber CRT */
:root.fx-crt:not([data-theme="dark"]) { --bg: #faf3e4; --surface: #fffbf2; --surface-2: #f0e4c8; --line: #e3d2ab; --ink: #2b1a00; --ink-2: #5e4310; --ink-3: #6d5018; --accent: #ffa800; --accent-ink: #8a4f00; --accent-soft: #ffeec4; --on-accent: #2b1a00; --focus: #8a4f00; --good: #1f8a5b; --good-soft: #dcf3e8; --bad: #c2384b; --bad-soft: #fbe1e5; --warn: #b26a00; --warn-soft: #fdecc8; --chip-l: 0.93; --chip-c: 0.06; --chipink-l: 0.42; --chipink-c: 0.11; --dot-l: 0.62; --dot-c: 0.15; --deep-l: 0.48; --deep-c: 0.12; --hk: 0.3; --ho: 8; --mk1: oklch(0.6 0.15 50); --mk2: oklch(0.7 0.16 62); --mk3: oklch(0.8 0.16 72); --mk4: oklch(0.88 0.14 80); --fxc: rgba(80,50,0,.05); --f-display: "VT323", "JetBrains Mono", monospace; --f-body: "JetBrains Mono", ui-monospace, monospace; --r-s: 0px; --r: 0px; --r-l: 0px; }
@media (prefers-color-scheme: dark) { :root.fx-crt:not([data-theme="light"]) { --bg: #110b02; --surface: #1a1104; --surface-2: #251907; --line: #3c2a0d; --ink: #ffd27f; --ink-2: #e8ac4c; --ink-3: #cf9640; --accent: #ffb000; --accent-ink: #ffd690; --accent-soft: #3a2706; --on-accent: #140c00; --focus: #ffb000; --good: #c8e86a; --good-soft: #26300a; --bad: #ff7a5c; --bad-soft: #3a160c; --warn: #ffd27f; --warn-soft: #3a2706; --chip-l: 0.28; --chip-c: 0.06; --chipink-l: 0.88; --chipink-c: 0.12; --dot-l: 0.78; --dot-c: 0.15; --deep-l: 0.46; --deep-c: 0.12; --hk: 0.3; --ho: 8; --mk1: oklch(0.6 0.15 50); --mk2: oklch(0.7 0.16 62); --mk3: oklch(0.8 0.16 72); --mk4: oklch(0.88 0.14 80); --fxc: rgba(0,0,0,.28); --f-display: "VT323", "JetBrains Mono", monospace; --f-body: "JetBrains Mono", ui-monospace, monospace; --r-s: 0px; --r: 0px; --r-l: 0px; color-scheme: dark; } }
:root.fx-crt[data-theme="dark"] { --bg: #110b02; --surface: #1a1104; --surface-2: #251907; --line: #3c2a0d; --ink: #ffd27f; --ink-2: #e8ac4c; --ink-3: #cf9640; --accent: #ffb000; --accent-ink: #ffd690; --accent-soft: #3a2706; --on-accent: #140c00; --focus: #ffb000; --good: #c8e86a; --good-soft: #26300a; --bad: #ff7a5c; --bad-soft: #3a160c; --warn: #ffd27f; --warn-soft: #3a2706; --chip-l: 0.28; --chip-c: 0.06; --chipink-l: 0.88; --chipink-c: 0.12; --dot-l: 0.78; --dot-c: 0.15; --deep-l: 0.46; --deep-c: 0.12; --hk: 0.3; --ho: 8; --mk1: oklch(0.6 0.15 50); --mk2: oklch(0.7 0.16 62); --mk3: oklch(0.8 0.16 72); --mk4: oklch(0.88 0.14 80); --fxc: rgba(0,0,0,.28); --f-display: "VT323", "JetBrains Mono", monospace; --f-body: "JetBrains Mono", ui-monospace, monospace; --r-s: 0px; --r: 0px; --r-l: 0px; color-scheme: dark; }

/* Terminal */
:root.fx-terminal:not([data-theme="dark"]) { --bg: #f7f7f5; --surface: #ffffff; --surface-2: #ececea; --line: #dcdcd8; --ink: #1d2128; --ink-2: #454c59; --ink-3: #535b68; --accent: #1d2128; --accent-ink: #1d2128; --accent-soft: #e6f0ff; --on-accent: #f7f7f5; --focus: #2563d9; --good: #1f8a5b; --good-soft: #dcf3e8; --bad: #c2384b; --bad-soft: #fbe1e5; --warn: #b26a00; --warn-soft: #fdecc8; --chip-l: 0.94; --chip-c: 0.05; --chipink-l: 0.42; --chipink-c: 0.14; --dot-l: 0.62; --dot-c: 0.17; --deep-l: 0.48; --deep-c: 0.14; --hk: 1; --ho: 0; --mk1: oklch(0.68 0.2 25); --mk2: oklch(0.84 0.16 100); --mk3: oklch(0.8 0.18 150); --mk4: oklch(0.75 0.13 230); --fxc: transparent; --f-display: "JetBrains Mono", ui-monospace, monospace; --f-body: "JetBrains Mono", ui-monospace, monospace; --r-s: 4px; --r: 6px; --r-l: 8px; }
@media (prefers-color-scheme: dark) { :root.fx-terminal:not([data-theme="light"]) { --bg: #16181d; --surface: #1d2027; --surface-2: #262a33; --line: #323743; --ink: #e6e8ec; --ink-2: #aeb4c0; --ink-3: #99a0ad; --accent: #f3f99d; --accent-ink: #f3f99d; --accent-soft: #33351c; --on-accent: #16181d; --focus: #57c7ff; --good: #5af78e; --good-soft: #143522; --bad: #ff5c57; --bad-soft: #3d1716; --warn: #f3f99d; --warn-soft: #33351c; --chip-l: 0.3; --chip-c: 0.07; --chipink-l: 0.86; --chipink-c: 0.14; --dot-l: 0.78; --dot-c: 0.16; --deep-l: 0.46; --deep-c: 0.13; --hk: 1; --ho: 0; --mk1: oklch(0.68 0.2 25); --mk2: oklch(0.84 0.16 100); --mk3: oklch(0.8 0.18 150); --mk4: oklch(0.75 0.13 230); --fxc: transparent; --f-display: "JetBrains Mono", ui-monospace, monospace; --f-body: "JetBrains Mono", ui-monospace, monospace; --r-s: 4px; --r: 6px; --r-l: 8px; color-scheme: dark; } }
:root.fx-terminal[data-theme="dark"] { --bg: #16181d; --surface: #1d2027; --surface-2: #262a33; --line: #323743; --ink: #e6e8ec; --ink-2: #aeb4c0; --ink-3: #99a0ad; --accent: #f3f99d; --accent-ink: #f3f99d; --accent-soft: #33351c; --on-accent: #16181d; --focus: #57c7ff; --good: #5af78e; --good-soft: #143522; --bad: #ff5c57; --bad-soft: #3d1716; --warn: #f3f99d; --warn-soft: #33351c; --chip-l: 0.3; --chip-c: 0.07; --chipink-l: 0.86; --chipink-c: 0.14; --dot-l: 0.78; --dot-c: 0.16; --deep-l: 0.46; --deep-c: 0.13; --hk: 1; --ho: 0; --mk1: oklch(0.68 0.2 25); --mk2: oklch(0.84 0.16 100); --mk3: oklch(0.8 0.18 150); --mk4: oklch(0.75 0.13 230); --fxc: transparent; --f-display: "JetBrains Mono", ui-monospace, monospace; --f-body: "JetBrains Mono", ui-monospace, monospace; --r-s: 4px; --r: 6px; --r-l: 8px; color-scheme: dark; }

/* Blueprint */
:root.fx-blueprint:not([data-theme="dark"]) { --bg: #f3f7fd; --surface: #fbfdff; --surface-2: #e3ecf8; --line: #b9cce8; --ink: #0c2a57; --ink-2: #2e4c7a; --ink-3: #3b5986; --accent: #ff7a2e; --accent-ink: #a83c00; --accent-soft: #ffe8d9; --on-accent: #2a0e00; --focus: #a83c00; --good: #1f8a5b; --good-soft: #dcf3e8; --bad: #c2384b; --bad-soft: #fbe1e5; --warn: #b26a00; --warn-soft: #fdecc8; --chip-l: 0.94; --chip-c: 0.04; --chipink-l: 0.4; --chipink-c: 0.11; --dot-l: 0.6; --dot-c: 0.12; --deep-l: 0.45; --deep-c: 0.11; --hk: 1; --ho: 0; --mk1: oklch(0.97 0 0); --mk2: oklch(0.88 0.04 250); --mk3: oklch(0.79 0.07 250); --mk4: oklch(0.7 0.18 45); --fxc: rgba(12,42,87,.07); --f-display: "Barlow Condensed", "Arial Narrow", sans-serif; --f-body: "Atkinson Hyperlegible", system-ui, sans-serif; --r-s: 2px; --r: 2px; --r-l: 3px; }
@media (prefers-color-scheme: dark) { :root.fx-blueprint:not([data-theme="light"]) { --bg: #0d3470; --surface: #12407f; --surface-2: #184b90; --line: #3e67a6; --ink: #f2f7ff; --ink-2: #cddcf3; --ink-3: #bccdea; --accent: #ff9a52; --accent-ink: #ffc49a; --accent-soft: #4a3a52; --on-accent: #2a0e00; --focus: #ffc49a; --good: #8ff0b8; --good-soft: #16506a; --bad: #ffb0b0; --bad-soft: #5a3060; --warn: #ffe08a; --warn-soft: #3d4a6a; --chip-l: 0.42; --chip-c: 0.06; --chipink-l: 0.95; --chipink-c: 0.05; --dot-l: 0.85; --dot-c: 0.1; --deep-l: 0.3; --deep-c: 0.08; --hk: 1; --ho: 0; --mk1: oklch(0.97 0 0); --mk2: oklch(0.88 0.04 250); --mk3: oklch(0.79 0.07 250); --mk4: oklch(0.7 0.18 45); --fxc: rgba(255,255,255,.09); --f-display: "Barlow Condensed", "Arial Narrow", sans-serif; --f-body: "Atkinson Hyperlegible", system-ui, sans-serif; --r-s: 2px; --r: 2px; --r-l: 3px; color-scheme: dark; } }
:root.fx-blueprint[data-theme="dark"] { --bg: #0d3470; --surface: #12407f; --surface-2: #184b90; --line: #3e67a6; --ink: #f2f7ff; --ink-2: #cddcf3; --ink-3: #bccdea; --accent: #ff9a52; --accent-ink: #ffc49a; --accent-soft: #4a3a52; --on-accent: #2a0e00; --focus: #ffc49a; --good: #8ff0b8; --good-soft: #16506a; --bad: #ffb0b0; --bad-soft: #5a3060; --warn: #ffe08a; --warn-soft: #3d4a6a; --chip-l: 0.42; --chip-c: 0.06; --chipink-l: 0.95; --chipink-c: 0.05; --dot-l: 0.85; --dot-c: 0.1; --deep-l: 0.3; --deep-c: 0.08; --hk: 1; --ho: 0; --mk1: oklch(0.97 0 0); --mk2: oklch(0.88 0.04 250); --mk3: oklch(0.79 0.07 250); --mk4: oklch(0.7 0.18 45); --fxc: rgba(255,255,255,.09); --f-display: "Barlow Condensed", "Arial Narrow", sans-serif; --f-body: "Atkinson Hyperlegible", system-ui, sans-serif; --r-s: 2px; --r: 2px; --r-l: 3px; color-scheme: dark; }

/* Risograph */
:root.fx-riso:not([data-theme="dark"]) { --bg: #f6f5f1; --surface: #fdfcf9; --surface-2: #ebe9e2; --line: #dcd9cf; --ink: #1f1d2b; --ink-2: #46435a; --ink-3: #545069; --accent: #ff48b0; --accent-ink: #b0126b; --accent-soft: #ffe0f1; --on-accent: #2a0018; --focus: #b0126b; --good: #1f8a5b; --good-soft: #dcf3e8; --bad: #c2384b; --bad-soft: #fbe1e5; --warn: #b26a00; --warn-soft: #fdecc8; --chip-l: 0.92; --chip-c: 0.07; --chipink-l: 0.42; --chipink-c: 0.14; --dot-l: 0.62; --dot-c: 0.17; --deep-l: 0.48; --deep-c: 0.14; --hk: 1; --ho: 0; --mk1: oklch(0.68 0.24 350); --mk2: oklch(0.55 0.16 245); --mk3: oklch(0.9 0.18 100); --mk4: oklch(0.6 0.11 200); --fxc: rgba(0,120,191,.55); }
@media (prefers-color-scheme: dark) { :root.fx-riso:not([data-theme="light"]) { --bg: #17151f; --surface: #1f1c29; --surface-2: #292534; --line: #3a3548; --ink: #f4f1fa; --ink-2: #bdb7cc; --ink-3: #a7a1b7; --accent: #ff6cc0; --accent-ink: #ff9ed6; --accent-soft: #45183a; --on-accent: #2a0018; --focus: #ff9ed6; --good: #4cc993; --good-soft: #12352a; --bad: #f2788a; --bad-soft: #3d1a22; --warn: #f2b34c; --warn-soft: #3a2c10; --chip-l: 0.32; --chip-c: 0.08; --chipink-l: 0.89; --chipink-c: 0.11; --dot-l: 0.76; --dot-c: 0.16; --deep-l: 0.47; --deep-c: 0.14; --hk: 1; --ho: 0; --mk1: oklch(0.68 0.24 350); --mk2: oklch(0.55 0.16 245); --mk3: oklch(0.9 0.18 100); --mk4: oklch(0.6 0.11 200); --fxc: rgba(0,150,230,.6); color-scheme: dark; } }
:root.fx-riso[data-theme="dark"] { --bg: #17151f; --surface: #1f1c29; --surface-2: #292534; --line: #3a3548; --ink: #f4f1fa; --ink-2: #bdb7cc; --ink-3: #a7a1b7; --accent: #ff6cc0; --accent-ink: #ff9ed6; --accent-soft: #45183a; --on-accent: #2a0018; --focus: #ff9ed6; --good: #4cc993; --good-soft: #12352a; --bad: #f2788a; --bad-soft: #3d1a22; --warn: #f2b34c; --warn-soft: #3a2c10; --chip-l: 0.32; --chip-c: 0.08; --chipink-l: 0.89; --chipink-c: 0.11; --dot-l: 0.76; --dot-c: 0.16; --deep-l: 0.47; --deep-c: 0.14; --hk: 1; --ho: 0; --mk1: oklch(0.68 0.24 350); --mk2: oklch(0.55 0.16 245); --mk3: oklch(0.9 0.18 100); --mk4: oklch(0.6 0.11 200); --fxc: rgba(0,150,230,.6); color-scheme: dark; }

/* Synthwave */
:root.fx-synthwave:not([data-theme="dark"]) { --bg: #fff4fb; --surface: #ffffff; --surface-2: #fbe3f3; --line: #f0cde6; --ink: #2a1040; --ink-2: #563872; --ink-3: #634481; --accent: #ff3dbb; --accent-ink: #a8107a; --accent-soft: #ffe0f4; --on-accent: #2a0018; --focus: #a8107a; --good: #1f8a5b; --good-soft: #dcf3e8; --bad: #c2384b; --bad-soft: #fbe1e5; --warn: #b26a00; --warn-soft: #fdecc8; --chip-l: 0.92; --chip-c: 0.07; --chipink-l: 0.42; --chipink-c: 0.15; --dot-l: 0.6; --dot-c: 0.18; --deep-l: 0.48; --deep-c: 0.16; --hk: 0.5; --ho: 180; --mk1: oklch(0.82 0.13 200); --mk2: oklch(0.62 0.2 300); --mk3: oklch(0.7 0.24 350); --mk4: oklch(0.88 0.15 90); --fxc: #00a6b4; --f-display: "Orbitron", "Bricolage Grotesque", sans-serif; --r-s: 10px; --r: 14px; --r-l: 20px; }
@media (prefers-color-scheme: dark) { :root.fx-synthwave:not([data-theme="light"]) { --bg: #120a24; --surface: #1b1033; --surface-2: #251645; --line: #3d2766; --ink: #fbeaff; --ink-2: #d4b8f0; --ink-3: #bb9cdb; --accent: #ff3dbb; --accent-ink: #ff8fd8; --accent-soft: #3f1240; --on-accent: #1a0012; --focus: #2de2e6; --good: #2de2a6; --good-soft: #0f3a3a; --bad: #ff7a8a; --bad-soft: #431a2a; --warn: #ffd166; --warn-soft: #3a2a10; --chip-l: 0.3; --chip-c: 0.1; --chipink-l: 0.88; --chipink-c: 0.12; --dot-l: 0.75; --dot-c: 0.18; --deep-l: 0.45; --deep-c: 0.17; --hk: 0.5; --ho: 180; --mk1: oklch(0.82 0.13 200); --mk2: oklch(0.62 0.2 300); --mk3: oklch(0.7 0.24 350); --mk4: oklch(0.88 0.15 90); --fxc: #2de2e6; --f-display: "Orbitron", "Bricolage Grotesque", sans-serif; --r-s: 10px; --r: 14px; --r-l: 20px; color-scheme: dark; } }
:root.fx-synthwave[data-theme="dark"] { --bg: #120a24; --surface: #1b1033; --surface-2: #251645; --line: #3d2766; --ink: #fbeaff; --ink-2: #d4b8f0; --ink-3: #bb9cdb; --accent: #ff3dbb; --accent-ink: #ff8fd8; --accent-soft: #3f1240; --on-accent: #1a0012; --focus: #2de2e6; --good: #2de2a6; --good-soft: #0f3a3a; --bad: #ff7a8a; --bad-soft: #431a2a; --warn: #ffd166; --warn-soft: #3a2a10; --chip-l: 0.3; --chip-c: 0.1; --chipink-l: 0.88; --chipink-c: 0.12; --dot-l: 0.75; --dot-c: 0.18; --deep-l: 0.45; --deep-c: 0.17; --hk: 0.5; --ho: 180; --mk1: oklch(0.82 0.13 200); --mk2: oklch(0.62 0.2 300); --mk3: oklch(0.7 0.24 350); --mk4: oklch(0.88 0.15 90); --fxc: #2de2e6; --f-display: "Orbitron", "Bricolage Grotesque", sans-serif; --r-s: 10px; --r: 14px; --r-l: 20px; color-scheme: dark; }

/* Pocket LCD */
:root.fx-lcd:not([data-theme="dark"]) { --bg: #9bbc0f; --surface: #b3cf3c; --surface-2: #a6c42c; --line: #5f7f0a; --ink: #0f380f; --ink-2: #123c12; --ink-3: #164016; --accent: #0f380f; --accent-ink: #0f380f; --accent-soft: #c6dc6a; --on-accent: #c6dc6a; --focus: #0f380f; --good: #0f380f; --good-soft: #c6dc6a; --bad: #5a1414; --bad-soft: #d4c46a; --warn: #3d3a05; --warn-soft: #c6dc6a; --chip-l: 0.86; --chip-c: 0.1; --chipink-l: 0.3; --chipink-c: 0.08; --dot-l: 0.36; --dot-c: 0.08; --deep-l: 0.32; --deep-c: 0.07; --hk: 0.12; --ho: 98; --mk1: oklch(0.3 0.06 140); --mk2: oklch(0.45 0.09 130); --mk3: oklch(0.62 0.13 120); --mk4: oklch(0.75 0.15 115); --fxc: #0f380f; --f-display: "Press Start 2P", "JetBrains Mono", monospace; --r-s: 0px; --r: 0px; --r-l: 0px; }
@media (prefers-color-scheme: dark) { :root.fx-lcd:not([data-theme="light"]) { --bg: #0d170d; --surface: #132213; --surface-2: #1a2e1a; --line: #2b4a2b; --ink: #c6e07a; --ink-2: #a8c662; --ink-3: #93b252; --accent: #9bbc0f; --accent-ink: #b8d84a; --accent-soft: #26381a; --on-accent: #0f380f; --focus: #9bbc0f; --good: #b8d84a; --good-soft: #26381a; --bad: #e8a070; --bad-soft: #3a2414; --warn: #e0d060; --warn-soft: #33300f; --chip-l: 0.3; --chip-c: 0.06; --chipink-l: 0.88; --chipink-c: 0.13; --dot-l: 0.72; --dot-c: 0.15; --deep-l: 0.38; --deep-c: 0.09; --hk: 0.12; --ho: 98; --mk1: oklch(0.3 0.06 140); --mk2: oklch(0.45 0.09 130); --mk3: oklch(0.62 0.13 120); --mk4: oklch(0.75 0.15 115); --fxc: #000000; --f-display: "Press Start 2P", "JetBrains Mono", monospace; --r-s: 0px; --r: 0px; --r-l: 0px; color-scheme: dark; } }
:root.fx-lcd[data-theme="dark"] { --bg: #0d170d; --surface: #132213; --surface-2: #1a2e1a; --line: #2b4a2b; --ink: #c6e07a; --ink-2: #a8c662; --ink-3: #93b252; --accent: #9bbc0f; --accent-ink: #b8d84a; --accent-soft: #26381a; --on-accent: #0f380f; --focus: #9bbc0f; --good: #b8d84a; --good-soft: #26381a; --bad: #e8a070; --bad-soft: #3a2414; --warn: #e0d060; --warn-soft: #33300f; --chip-l: 0.3; --chip-c: 0.06; --chipink-l: 0.88; --chipink-c: 0.13; --dot-l: 0.72; --dot-c: 0.15; --deep-l: 0.38; --deep-c: 0.09; --hk: 0.12; --ho: 98; --mk1: oklch(0.3 0.06 140); --mk2: oklch(0.45 0.09 130); --mk3: oklch(0.62 0.13 120); --mk4: oklch(0.75 0.15 115); --fxc: #000000; --f-display: "Press Start 2P", "JetBrains Mono", monospace; --r-s: 0px; --r: 0px; --r-l: 0px; color-scheme: dark; }

/* Chalkboard */
:root.fx-chalk:not([data-theme="dark"]) { --bg: #f4f6f6; --surface: #ffffff; --surface-2: #e8ecec; --line: #d0d8db; --ink: #1d2a33; --ink-2: #3e4d58; --ink-3: #4b5a65; --accent: #ffd400; --accent-ink: #7f6500; --accent-soft: #fff4b8; --on-accent: #222222; --focus: #7f6500; --good: #1f8a5b; --good-soft: #dcf3e8; --bad: #c2384b; --bad-soft: #fbe1e5; --warn: #b26a00; --warn-soft: #fdecc8; --chip-l: 0.93; --chip-c: 0.05; --chipink-l: 0.4; --chipink-c: 0.14; --dot-l: 0.6; --dot-c: 0.16; --deep-l: 0.47; --deep-c: 0.14; --hk: 1; --ho: 0; --mk1: oklch(0.8 0.1 20); --mk2: oklch(0.88 0.12 95); --mk3: oklch(0.82 0.1 160); --mk4: oklch(0.78 0.09 250); --fxc: transparent; --f-display: "Caveat Brush", "Bricolage Grotesque", cursive; --r-s: 6px; --r: 10px; --r-l: 14px; }
@media (prefers-color-scheme: dark) { :root.fx-chalk:not([data-theme="light"]) { --bg: #22392f; --surface: #284236; --surface-2: #2f4c3f; --line: #4a6352; --ink: #f4f1e8; --ink-2: #dcd7c8; --ink-3: #cbc5b3; --accent: #ffe066; --accent-ink: #ffe999; --accent-soft: #45482c; --on-accent: #2a2200; --focus: #ffe066; --good: #a6f0b8; --good-soft: #2d5a40; --bad: #ffb8b8; --bad-soft: #5a3a3a; --warn: #ffd08a; --warn-soft: #4a4430; --chip-l: 0.4; --chip-c: 0.05; --chipink-l: 0.95; --chipink-c: 0.05; --dot-l: 0.86; --dot-c: 0.1; --deep-l: 0.38; --deep-c: 0.08; --hk: 1; --ho: 0; --mk1: oklch(0.8 0.1 20); --mk2: oklch(0.88 0.12 95); --mk3: oklch(0.82 0.1 160); --mk4: oklch(0.78 0.09 250); --fxc: rgba(255,255,255,.3); --f-display: "Caveat Brush", "Bricolage Grotesque", cursive; --r-s: 6px; --r: 10px; --r-l: 14px; color-scheme: dark; } }
:root.fx-chalk[data-theme="dark"] { --bg: #22392f; --surface: #284236; --surface-2: #2f4c3f; --line: #4a6352; --ink: #f4f1e8; --ink-2: #dcd7c8; --ink-3: #cbc5b3; --accent: #ffe066; --accent-ink: #ffe999; --accent-soft: #45482c; --on-accent: #2a2200; --focus: #ffe066; --good: #a6f0b8; --good-soft: #2d5a40; --bad: #ffb8b8; --bad-soft: #5a3a3a; --warn: #ffd08a; --warn-soft: #4a4430; --chip-l: 0.4; --chip-c: 0.05; --chipink-l: 0.95; --chipink-c: 0.05; --dot-l: 0.86; --dot-c: 0.1; --deep-l: 0.38; --deep-c: 0.08; --hk: 1; --ho: 0; --mk1: oklch(0.8 0.1 20); --mk2: oklch(0.88 0.12 95); --mk3: oklch(0.82 0.1 160); --mk4: oklch(0.78 0.09 250); --fxc: rgba(255,255,255,.3); --f-display: "Caveat Brush", "Bricolage Grotesque", cursive; --r-s: 6px; --r: 10px; --r-l: 14px; color-scheme: dark; }

/* Desktop 95 */
:root.fx-desktop95:not([data-theme="dark"]) { --bg: #c3c3c3; --surface: #dcdcdc; --surface-2: #b4b4b4; --line: #808080; --ink: #000000; --ink-2: #1e1e1e; --ink-3: #2a2a2a; --accent: #000080; --accent-ink: #000080; --accent-soft: #c8c8ec; --on-accent: #ffffff; --focus: #000000; --good: #005a00; --good-soft: #c4e4c4; --bad: #900000; --bad-soft: #ecc4c4; --warn: #6a4f00; --warn-soft: #ece0b0; --chip-l: 0.9; --chip-c: 0.05; --chipink-l: 0.3; --chipink-c: 0.14; --dot-l: 0.45; --dot-c: 0.16; --deep-l: 0.42; --deep-c: 0.15; --hk: 1; --ho: 0; --mk1: oklch(0.58 0.2 28); --mk2: oklch(0.62 0.17 145); --mk3: oklch(0.5 0.2 265); --mk4: oklch(0.86 0.17 95); --fxc: #ffffff; --f-display: "Pixelify Sans", "JetBrains Mono", monospace; --f-body: Tahoma, Verdana, "Segoe UI", system-ui, sans-serif; --r-s: 0px; --r: 0px; --r-l: 0px; }
@media (prefers-color-scheme: dark) { :root.fx-desktop95:not([data-theme="light"]) { --bg: #000000; --surface: #0e0e0e; --surface-2: #1e1e1e; --line: #808080; --ink: #ffffff; --ink-2: #e6e6e6; --ink-3: #d0d0d0; --accent: #1aebff; --accent-ink: #ffff00; --accent-soft: #00343c; --on-accent: #000000; --focus: #ffff00; --good: #3fff3f; --good-soft: #003300; --bad: #ff6a6a; --bad-soft: #3a0000; --warn: #ffff00; --warn-soft: #333300; --chip-l: 0.3; --chip-c: 0.1; --chipink-l: 0.93; --chipink-c: 0.12; --dot-l: 0.8; --dot-c: 0.17; --deep-l: 0.42; --deep-c: 0.15; --hk: 1; --ho: 0; --mk1: oklch(0.58 0.2 28); --mk2: oklch(0.62 0.17 145); --mk3: oklch(0.5 0.2 265); --mk4: oklch(0.86 0.17 95); --fxc: #808080; --f-display: "Pixelify Sans", "JetBrains Mono", monospace; --f-body: Tahoma, Verdana, "Segoe UI", system-ui, sans-serif; --r-s: 0px; --r: 0px; --r-l: 0px; color-scheme: dark; } }
:root.fx-desktop95[data-theme="dark"] { --bg: #000000; --surface: #0e0e0e; --surface-2: #1e1e1e; --line: #808080; --ink: #ffffff; --ink-2: #e6e6e6; --ink-3: #d0d0d0; --accent: #1aebff; --accent-ink: #ffff00; --accent-soft: #00343c; --on-accent: #000000; --focus: #ffff00; --good: #3fff3f; --good-soft: #003300; --bad: #ff6a6a; --bad-soft: #3a0000; --warn: #ffff00; --warn-soft: #333300; --chip-l: 0.3; --chip-c: 0.1; --chipink-l: 0.93; --chipink-c: 0.12; --dot-l: 0.8; --dot-c: 0.17; --deep-l: 0.42; --deep-c: 0.15; --hk: 1; --ho: 0; --mk1: oklch(0.58 0.2 28); --mk2: oklch(0.62 0.17 145); --mk3: oklch(0.5 0.2 265); --mk4: oklch(0.86 0.17 95); --fxc: #808080; --f-display: "Pixelify Sans", "JetBrains Mono", monospace; --f-body: Tahoma, Verdana, "Segoe UI", system-ui, sans-serif; --r-s: 0px; --r: 0px; --r-l: 0px; color-scheme: dark; }

/* Bauhaus */
:root.fx-bauhaus:not([data-theme="dark"]) { --bg: #f2efe8; --surface: #ffffff; --surface-2: #e6e1d6; --line: #111111; --ink: #111111; --ink-2: #333333; --ink-3: #444444; --accent: #e63022; --accent-ink: #b3170d; --accent-soft: #fbd9d3; --on-accent: #000000; --focus: #111111; --good: #1f8a5b; --good-soft: #dcf3e8; --bad: #c2384b; --bad-soft: #fbe1e5; --warn: #b26a00; --warn-soft: #fdecc8; --chip-l: 0.9; --chip-c: 0.08; --chipink-l: 0.36; --chipink-c: 0.16; --dot-l: 0.6; --dot-c: 0.2; --deep-l: 0.45; --deep-c: 0.17; --hk: 1; --ho: 0; --mk1: oklch(0.6 0.22 28); --mk2: oklch(0.86 0.17 95); --mk3: oklch(0.48 0.2 262); --mk4: oklch(0.15 0 0); --fxc: #111111; --f-display: "Unbounded", "Bricolage Grotesque", sans-serif; --r-s: 0px; --r: 0px; --r-l: 0px; }
@media (prefers-color-scheme: dark) { :root.fx-bauhaus:not([data-theme="light"]) { --bg: #111111; --surface: #1a1a1a; --surface-2: #262626; --line: #f2efe8; --ink: #f2efe8; --ink-2: #d2cdc3; --ink-3: #bdb7ac; --accent: #ff4a3a; --accent-ink: #ff8a7e; --accent-soft: #3a1410; --on-accent: #111111; --focus: #ffd600; --good: #4cc993; --good-soft: #12352a; --bad: #f2788a; --bad-soft: #3d1a22; --warn: #f2b34c; --warn-soft: #3a2c10; --chip-l: 0.32; --chip-c: 0.09; --chipink-l: 0.9; --chipink-c: 0.12; --dot-l: 0.75; --dot-c: 0.18; --deep-l: 0.45; --deep-c: 0.17; --hk: 1; --ho: 0; --mk1: oklch(0.6 0.22 28); --mk2: oklch(0.86 0.17 95); --mk3: oklch(0.48 0.2 262); --mk4: oklch(0.15 0 0); --fxc: #f2efe8; --f-display: "Unbounded", "Bricolage Grotesque", sans-serif; --r-s: 0px; --r: 0px; --r-l: 0px; color-scheme: dark; } }
:root.fx-bauhaus[data-theme="dark"] { --bg: #111111; --surface: #1a1a1a; --surface-2: #262626; --line: #f2efe8; --ink: #f2efe8; --ink-2: #d2cdc3; --ink-3: #bdb7ac; --accent: #ff4a3a; --accent-ink: #ff8a7e; --accent-soft: #3a1410; --on-accent: #111111; --focus: #ffd600; --good: #4cc993; --good-soft: #12352a; --bad: #f2788a; --bad-soft: #3d1a22; --warn: #f2b34c; --warn-soft: #3a2c10; --chip-l: 0.32; --chip-c: 0.09; --chipink-l: 0.9; --chipink-c: 0.12; --dot-l: 0.75; --dot-c: 0.18; --deep-l: 0.45; --deep-c: 0.17; --hk: 1; --ho: 0; --mk1: oklch(0.6 0.22 28); --mk2: oklch(0.86 0.17 95); --mk3: oklch(0.48 0.2 262); --mk4: oklch(0.15 0 0); --fxc: #f2efe8; --f-display: "Unbounded", "Bricolage Grotesque", sans-serif; --r-s: 0px; --r: 0px; --r-l: 0px; color-scheme: dark; }

/* Notebook */
:root.fx-notebook:not([data-theme="dark"]) { --bg: #fdfdf8; --surface: #ffffff; --surface-2: #f0f0e6; --line: #cfd8e8; --ink: #1f2a44; --ink-2: #3d4866; --ink-3: #4a5573; --accent: #ffe14d; --accent-ink: #7a6000; --accent-soft: #fff6b0; --on-accent: #2a2400; --focus: #7a6000; --good: #1f8a5b; --good-soft: #dcf3e8; --bad: #c2384b; --bad-soft: #fbe1e5; --warn: #b26a00; --warn-soft: #fdecc8; --chip-l: 0.93; --chip-c: 0.05; --chipink-l: 0.42; --chipink-c: 0.13; --dot-l: 0.6; --dot-c: 0.15; --deep-l: 0.48; --deep-c: 0.13; --hk: 1; --ho: 0; --mk1: oklch(0.85 0.17 95); --mk2: oklch(0.82 0.14 140); --mk3: oklch(0.78 0.13 200); --mk4: oklch(0.75 0.15 350); --fxc: rgba(70,110,200,.16); --f-display: "Caveat", "Bricolage Grotesque", cursive; --r-s: 4px; --r: 6px; --r-l: 8px; }
@media (prefers-color-scheme: dark) { :root.fx-notebook:not([data-theme="light"]) { --bg: #1b1f2a; --surface: #222736; --surface-2: #2a3042; --line: #3a4258; --ink: #eef0f6; --ink-2: #c0c6d6; --ink-3: #a8afc2; --accent: #ffe14d; --accent-ink: #ffe98a; --accent-soft: #3d3818; --on-accent: #2a2400; --focus: #ffe14d; --good: #4cc993; --good-soft: #12352a; --bad: #f2788a; --bad-soft: #3d1a22; --warn: #f2b34c; --warn-soft: #3a2c10; --chip-l: 0.32; --chip-c: 0.07; --chipink-l: 0.88; --chipink-c: 0.09; --dot-l: 0.74; --dot-c: 0.14; --deep-l: 0.47; --deep-c: 0.13; --hk: 1; --ho: 0; --mk1: oklch(0.85 0.17 95); --mk2: oklch(0.82 0.14 140); --mk3: oklch(0.78 0.13 200); --mk4: oklch(0.75 0.15 350); --fxc: rgba(140,170,255,.12); --f-display: "Caveat", "Bricolage Grotesque", cursive; --r-s: 4px; --r: 6px; --r-l: 8px; color-scheme: dark; } }
:root.fx-notebook[data-theme="dark"] { --bg: #1b1f2a; --surface: #222736; --surface-2: #2a3042; --line: #3a4258; --ink: #eef0f6; --ink-2: #c0c6d6; --ink-3: #a8afc2; --accent: #ffe14d; --accent-ink: #ffe98a; --accent-soft: #3d3818; --on-accent: #2a2400; --focus: #ffe14d; --good: #4cc993; --good-soft: #12352a; --bad: #f2788a; --bad-soft: #3d1a22; --warn: #f2b34c; --warn-soft: #3a2c10; --chip-l: 0.32; --chip-c: 0.07; --chipink-l: 0.88; --chipink-c: 0.09; --dot-l: 0.74; --dot-c: 0.14; --deep-l: 0.47; --deep-c: 0.13; --hk: 1; --ho: 0; --mk1: oklch(0.85 0.17 95); --mk2: oklch(0.82 0.14 140); --mk3: oklch(0.78 0.13 200); --mk4: oklch(0.75 0.15 350); --fxc: rgba(140,170,255,.12); --f-display: "Caveat", "Bricolage Grotesque", cursive; --r-s: 4px; --r: 6px; --r-l: 8px; color-scheme: dark; }

/* One-off theme effects, shared by the brand kit and the app.
   The theme's class (fx-<id>) sits on <html>; in the kit it also sits on preview panels.
   Each theme sets --fxc, the effect color, and its own fonts and corners through tokens. */

/* Display faces with very different proportions get matched to Bricolage's x-height. */
.fx-crt :is(h1, h2, h3, h4, .mini-h, .lock), .fx-lcd :is(h1, h2, h3, h4, .mini-h, .lock),
.fx-chalk :is(h1, h2, h3, h4, .mini-h, .lock), .fx-notebook :is(h1, h2, h3, h4, .mini-h, .lock),
.fx-bauhaus :is(h1, h2, h3, h4, .mini-h, .lock), .fx-synthwave :is(h1, h2, h3, h4, .mini-h, .lock),
.fx-desktop95 :is(h1, h2, h3, h4, .mini-h, .lock) { font-size-adjust: 0.52; overflow-wrap: anywhere; }
.fx-crt :is(h1, h2, h3, h4, .mini-h, .lock), .fx-lcd :is(h1, h2, h3, h4, .mini-h, .lock), .fx-chalk :is(h1, h2, h3, h4, .mini-h),
.fx-notebook :is(h1, h2, h3, h4, .mini-h), .fx-desktop95 :is(h1, h2, h3, h4, .mini-h, .lock) { font-weight: 400 !important; letter-spacing: 0 !important; }
.fx-lcd :is(h1, h2, h3, .mini-h) { line-height: 1.25 !important; }
.fx-notebook :is(h1, h2, h3, .mini-h), .fx-chalk :is(h1, h2, h3, .mini-h) { font-weight: 700 !important; line-height: 1.05 !important; }
/* Question prompts and other h3s often run to three or four lines, where 1.05 made the handwriting touch. */
.fx-notebook :is(h3, .ph h3), .fx-chalk :is(h3, .ph h3) { line-height: 1.22 !important; }
.fx-synthwave :is(h1, h2, h3, h4, .mini-h) { letter-spacing: 0.01em !important; font-weight: 800 !important; }
.fx-bauhaus :is(h1, h2, .mini-h) { text-transform: uppercase; letter-spacing: -0.01em !important; }

/* Matrix: glowing headlines (rain is drawn by script). */
.fx-matrix :is(h1, h2, .mini-h) { text-shadow: 0 0 14px var(--fxc); }

/* Amber CRT: scanlines over the whole screen. */
html.fx-crt body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 60; background: repeating-linear-gradient(to bottom, transparent 0 2px, var(--fxc) 2px 3px); }
.fx-crt:not(html) { position: relative; }
.fx-crt:not(html)::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: repeating-linear-gradient(to bottom, transparent 0 2px, var(--fxc) 2px 3px); }
.fx-crt :is(h1, h2, .mini-h) { text-shadow: 0 0 10px color-mix(in oklab, var(--accent) 45%, transparent); }

/* Terminal: a prompt before headings and a blinking cursor on the main button. */
.fx-terminal :is(h1, h2, .mini-h)::before { content: "$ "; color: var(--ink-3); font-weight: 400; }
.fx-terminal .btn.primary::after { content: ""; width: .55em; height: 1em; background: currentColor; display: inline-block; animation: fx-blink 1s steps(1) infinite; }
@keyframes fx-blink { 50% { opacity: 0; } }

/* Matrix, Amber CRT and Terminal set body text in a monospace face, which is wider, so on phones the lesson's
   "Story only / + How it works / + The math" bar ran past the screen and the page scrolled sideways. */
@media (max-width: 520px) { :is(.fx-matrix, .fx-crt, .fx-terminal) .depth .seg button { font-size: 12px; padding-inline: 2px; gap: 5px; } }

/* Blueprint: drafting grid and condensed capitals. */
html.fx-blueprint body, .fx-blueprint:not(html) { background-image: linear-gradient(var(--fxc) 1px, transparent 1px), linear-gradient(90deg, var(--fxc) 1px, transparent 1px); background-size: 24px 24px; }
.fx-blueprint :is(h1, h2, h3, .mini-h) { text-transform: uppercase; letter-spacing: .01em !important; font-weight: 700 !important; }
.fx-blueprint :is(.tk, .tok) { box-shadow: inset 0 0 0 1.5px currentColor; }

/* Risograph: headlines print off-register in a second ink. */
.fx-riso :is(h1, h2, .mini-h) { text-shadow: 3px 2px 0 var(--fxc); }
.fx-riso :is(h1, h2, .mini-h) :is(.tk, .tok) { text-shadow: none; }

/* Synthwave: sunset headline, neon buttons, a glow on the horizon. */
html.fx-synthwave body { background-image: radial-gradient(120% 60% at 50% 110%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 70%); background-attachment: fixed; }
.fx-synthwave h1 { background: linear-gradient(180deg, var(--ink) 30%, var(--accent-ink) 75%, var(--fxc)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fx-synthwave h1 :is(.tk, .tok) { -webkit-text-fill-color: var(--chipink); }
.fx-synthwave .btn.primary { box-shadow: 0 0 18px color-mix(in oklab, var(--accent) 55%, transparent), 0 0 0 1px var(--accent); }
.fx-synthwave :is(h2, .mini-h) { text-shadow: 0 0 16px color-mix(in oklab, var(--fxc) 45%, transparent); }

/* Pocket LCD: hard pixel shadows, square buttons. */
.fx-lcd :is(.btn, .chip, .pchip, .opt, .tk, .tok, .ropt) { border-radius: 0 !important; }
.fx-lcd :is(.btn, .pcard, .gen, .now, .scheme, .panel, .demo, .continue, .donecard, .rule, .part) { box-shadow: 4px 4px 0 var(--fxc) !important; }
/* Press Start 2P is fine for titles but hard going for a whole sentence, so the lesson's opening line and the
   question prompts use the body face. Answered options also fade less: the LCD greens start closer together. */
.fx-lcd :is(.bigidea, .quiz h3, .ph h3) { font-family: var(--f-body); font-size-adjust: none; line-height: 1.35 !important; }
.fx-lcd :is(.quiz h3, .ph h3) { font-weight: 700 !important; }
.fx-lcd .quiz .opt:disabled:not(.right) { opacity: .7; }

/* Chalkboard: chalk dust on headings, smudges on the board. */
.fx-chalk :is(h1, h2, .mini-h) { text-shadow: 0 0 2px var(--fxc); }
html.fx-chalk body { background-image: radial-gradient(40% 30% at 20% 30%, color-mix(in oklab, var(--ink) 4%, transparent), transparent), radial-gradient(35% 25% at 80% 70%, color-mix(in oklab, var(--ink) 3%, transparent), transparent); background-attachment: fixed; }

/* Desktop 95: raised gray bevels, square everything. */
.fx-desktop95 :is(.btn, .chip, .pchip, .opt, .ropt, .tk, .tok, .use, .toc a, .picker button) { border-radius: 0 !important; }
.fx-desktop95 :is(.btn, .use, .pchip, .continue) { box-shadow: inset 1px 1px 0 var(--fxc), inset -1px -1px 0 var(--line), inset -2px -2px 0 var(--ink-3) !important; border-color: var(--surface-2) !important; }
.fx-desktop95 :is(.pcard, .gen, .now, .scheme, .panel, .demo, .donecard, .rule, .part, .mini) { box-shadow: inset 1px 1px 0 var(--fxc), inset -1px -1px 0 var(--line), 2px 2px 0 var(--ink-3) !important; }
.fx-desktop95 .btn.primary { background: linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 60%, #1084d0)); }

/* Bauhaus: heavy outlines and hard offset shadows. */
.fx-bauhaus :is(.btn, .chip, .pchip, .opt, .ropt, .tk, .tok, .use) { border-radius: 0 !important; }
.fx-bauhaus :is(.btn, .use) { border: 2.5px solid var(--fxc) !important; box-shadow: 4px 4px 0 var(--fxc); }
.fx-bauhaus :is(.pcard, .gen, .now, .scheme, .demo, .donecard, .continue) { border: 2.5px solid var(--fxc) !important; box-shadow: 6px 6px 0 var(--fxc) !important; }

/* Notebook: ruled lines with a red margin, highlighter tokens at a tilt. */
html.fx-notebook body, .fx-notebook:not(html) { background-image: linear-gradient(90deg, transparent 39px, rgba(214, 60, 80, .35) 39px 41px, transparent 41px), repeating-linear-gradient(to bottom, transparent 0 31px, var(--fxc) 31px 32px); }
@media (max-width: 760px) { html.fx-notebook body { background-image: repeating-linear-gradient(to bottom, transparent 0 31px, var(--fxc) 31px 32px); } }
.fx-notebook h1 :is(.tk, .tok), .fx-notebook .mini-h .tk { transform: rotate(-2deg); display: inline-block; }

@media (prefers-reduced-motion: reduce) { .fx-terminal .btn.primary::after { animation: none; } }