@font-face {
font-family: "ACD Sans";
src: url("../assets/fonts/acd-sans-vf.woff2") format("woff2");
font-weight: 400 900;
font-stretch: 100% 125%;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Mattone";
src: url("../assets/fonts/mattone-black-latin.woff2") format("woff2");
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "GSF";
src: url("../assets/fonts/GoogleSansFlex-ui.woff2") format("woff2");
font-weight: 300 800;
font-stretch: 100% 125%;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "GSC";
src: url("../assets/fonts/GoogleSansCode-mono.woff2") format("woff2");
font-weight: 300 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "GSF Fallback";
src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans"), local("Arimo");
font-weight: 300 500;
size-adjust: 101.52%;
ascent-override: 95.16%;
descent-override: 28.17%;
line-gap-override: 0%;
}
@font-face {
font-family: "GSF Fallback";
src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Helvetica-Bold"), local("Liberation Sans Bold"), local("Arimo Bold");
font-weight: 600 800;
size-adjust: 101.1%;
ascent-override: 95.55%;
descent-override: 28.29%;
line-gap-override: 0%;
}
@font-face {
font-family: "GSC Fallback";
src: local("Courier New"), local("CourierNewPSMT"), local("Liberation Mono"), local("Cousine");
font-weight: 300 800;
size-adjust: 99.98%;
ascent-override: 96.62%;
descent-override: 28.6%;
line-gap-override: 0%;
}
@font-face {
font-family: "ACD Sans Fallback";
src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Helvetica-Bold"), local("Liberation Sans Bold"), local("Arimo Bold");
font-weight: 400 900;
size-adjust: 102.96%;
ascent-override: 105.87%;
descent-override: 31.08%;
line-gap-override: 0%;
}
@font-face {
font-family: "Mattone Fallback";
src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Helvetica-Bold"), local("Liberation Sans Bold"), local("Arimo Bold");
font-weight: 900;
size-adjust: 141.12%;
ascent-override: 77.24%;
descent-override: 24.09%;
line-gap-override: 10.63%;
}
@layer tokens {
:root {
--font-display: "ACD Sans", "ACD Sans Fallback", system-ui, sans-serif;
--font-wordmark: "Mattone", "Mattone Fallback", "ACD Sans", "ACD Sans Fallback", system-ui, sans-serif;
--font-ui: "GSF", "GSF Fallback", system-ui, sans-serif;
--font-mono: "GSC", "GSC Fallback", ui-monospace, monospace;
}
}
@layer tokens {
:root {
color-scheme: dark;
--md-sys-color-primary-palette-key-color: #5e8046;
--md-sys-color-secondary-palette-key-color: #6e7b62;
--md-sys-color-tertiary-palette-key-color: #517f7e;
--md-sys-color-neutral-palette-key-color: #75786f;
--md-sys-color-neutral-variant-palette-key-color: #74796d;
--md-sys-color-background: #11140e;
--md-sys-color-background-rgb: 17 20 14;
--md-sys-color-on-background: #e1e4d9;
--md-sys-color-on-background-rgb: 225 228 217;
--md-sys-color-surface: #11140e;
--md-sys-color-surface-rgb: 17 20 14;
--md-sys-color-surface-dim: #11140e;
--md-sys-color-surface-dim-rgb: 17 20 14;
--md-sys-color-surface-bright: #373a33;
--md-sys-color-surface-bright-rgb: 55 58 51;
--md-sys-color-surface-container-lowest: #0c0f09;
--md-sys-color-surface-container-lowest-rgb: 12 15 9;
--md-sys-color-surface-container-low: #191d16;
--md-sys-color-surface-container-low-rgb: 25 29 22;
--md-sys-color-surface-container: #1d211a;
--md-sys-color-surface-container-rgb: 29 33 26;
--md-sys-color-surface-container-high: #282b24;
--md-sys-color-surface-container-high-rgb: 40 43 36;
--md-sys-color-surface-container-highest: #33362f;
--md-sys-color-surface-container-highest-rgb: 51 54 47;
--md-sys-color-on-surface: #e1e4d9;
--md-sys-color-on-surface-rgb: 225 228 217;
--md-sys-color-surface-variant: #44483e;
--md-sys-color-surface-variant-rgb: 68 72 62;
--md-sys-color-on-surface-variant: #c4c8bb;
--md-sys-color-on-surface-variant-rgb: 196 200 187;
--md-sys-color-inverse-surface: #e1e4d9;
--md-sys-color-inverse-surface-rgb: 225 228 217;
--md-sys-color-inverse-on-surface: #2e312a;
--md-sys-color-inverse-on-surface-rgb: 46 49 42;
--md-sys-color-outline: #8e9286;
--md-sys-color-outline-rgb: 142 146 134;
--md-sys-color-outline-variant: #44483e;
--md-sys-color-outline-variant-rgb: 68 72 62;
--md-sys-color-shadow: #000000;
--md-sys-color-scrim: #000000;
--md-sys-color-surface-tint: #acd28f;
--md-sys-color-surface-tint-rgb: 172 210 143;
--md-sys-color-primary: #acd28f;
--md-sys-color-primary-rgb: 172 210 143;
--md-sys-color-on-primary: #1a3705;
--md-sys-color-on-primary-rgb: 26 55 5;
--md-sys-color-primary-container: #304f1a;
--md-sys-color-primary-container-rgb: 48 79 26;
--md-sys-color-on-primary-container: #c7eea9;
--md-sys-color-on-primary-container-rgb: 199 238 169;
--md-sys-color-inverse-primary: #476730;
--md-sys-color-inverse-primary-rgb: 71 103 48;
--md-sys-color-secondary: #bdcbaf;
--md-sys-color-secondary-rgb: 189 203 175;
--md-sys-color-on-secondary: #283420;
--md-sys-color-on-secondary-rgb: 40 52 32;
--md-sys-color-secondary-container: #3f4a35;
--md-sys-color-secondary-container-rgb: 63 74 53;
--md-sys-color-on-secondary-container: #d9e7ca;
--md-sys-color-on-secondary-container-rgb: 217 231 202;
--md-sys-color-tertiary: #a0cfce;
--md-sys-color-tertiary-rgb: 160 207 206;
--md-sys-color-on-tertiary: #003737;
--md-sys-color-on-tertiary-rgb: 0 55 55;
--md-sys-color-tertiary-container: #1e4e4d;
--md-sys-color-tertiary-container-rgb: 30 78 77;
--md-sys-color-on-tertiary-container: #bbecea;
--md-sys-color-on-tertiary-container-rgb: 187 236 234;
--md-sys-color-error: #ffb4ab;
--md-sys-color-error-rgb: 255 180 171;
--md-sys-color-on-error: #690005;
--md-sys-color-on-error-rgb: 105 0 5;
--md-sys-color-error-container: #93000a;
--md-sys-color-error-container-rgb: 147 0 10;
--md-sys-color-on-error-container: #ffdad6;
--md-sys-color-on-error-container-rgb: 255 218 214;
--md-sys-color-primary-fixed: #c7eea9;
--md-sys-color-primary-fixed-dim: #acd28f;
--md-sys-color-on-primary-fixed: #0a2000;
--md-sys-color-on-primary-fixed-variant: #304f1a;
--md-sys-color-secondary-fixed: #d9e7ca;
--md-sys-color-secondary-fixed-dim: #bdcbaf;
--md-sys-color-on-secondary-fixed: #141e0c;
--md-sys-color-on-secondary-fixed-variant: #3f4a35;
--md-sys-color-tertiary-fixed: #bbecea;
--md-sys-color-tertiary-fixed-dim: #a0cfce;
--md-sys-color-on-tertiary-fixed: #002020;
--md-sys-color-on-tertiary-fixed-variant: #1e4e4d;
--glass-tint: rgba(30, 60, 9, 0.34);
--glass-tint-strong: rgba(52, 83, 31, 0.52);
--glass-rim: rgba(230, 252, 210, 0.78);
--glass-glow: rgba(123, 195, 72, 0.5);
--glass-scrim: rgba(17, 20, 14, 0.5);
--glass-shadow-tint: rgba(4, 18, 0, 0.6);
--glass-accent: rgb(139, 212, 87);
--glass-accent-2: rgb(160, 207, 206);
--seed-dot: rgb(108, 178, 57);
}
html[data-seed="aurora"] {
color-scheme: dark;
--md-sys-color-primary-palette-key-color: #5e8046;
--md-sys-color-secondary-palette-key-color: #6e7b62;
--md-sys-color-tertiary-palette-key-color: #517f7e;
--md-sys-color-neutral-palette-key-color: #75786f;
--md-sys-color-neutral-variant-palette-key-color: #74796d;
--md-sys-color-background: #11140e;
--md-sys-color-background-rgb: 17 20 14;
--md-sys-color-on-background: #e1e4d9;
--md-sys-color-on-background-rgb: 225 228 217;
--md-sys-color-surface: #11140e;
--md-sys-color-surface-rgb: 17 20 14;
--md-sys-color-surface-dim: #11140e;
--md-sys-color-surface-dim-rgb: 17 20 14;
--md-sys-color-surface-bright: #373a33;
--md-sys-color-surface-bright-rgb: 55 58 51;
--md-sys-color-surface-container-lowest: #0c0f09;
--md-sys-color-surface-container-lowest-rgb: 12 15 9;
--md-sys-color-surface-container-low: #191d16;
--md-sys-color-surface-container-low-rgb: 25 29 22;
--md-sys-color-surface-container: #1d211a;
--md-sys-color-surface-container-rgb: 29 33 26;
--md-sys-color-surface-container-high: #282b24;
--md-sys-color-surface-container-high-rgb: 40 43 36;
--md-sys-color-surface-container-highest: #33362f;
--md-sys-color-surface-container-highest-rgb: 51 54 47;
--md-sys-color-on-surface: #e1e4d9;
--md-sys-color-on-surface-rgb: 225 228 217;
--md-sys-color-surface-variant: #44483e;
--md-sys-color-surface-variant-rgb: 68 72 62;
--md-sys-color-on-surface-variant: #c4c8bb;
--md-sys-color-on-surface-variant-rgb: 196 200 187;
--md-sys-color-inverse-surface: #e1e4d9;
--md-sys-color-inverse-surface-rgb: 225 228 217;
--md-sys-color-inverse-on-surface: #2e312a;
--md-sys-color-inverse-on-surface-rgb: 46 49 42;
--md-sys-color-outline: #8e9286;
--md-sys-color-outline-rgb: 142 146 134;
--md-sys-color-outline-variant: #44483e;
--md-sys-color-outline-variant-rgb: 68 72 62;
--md-sys-color-shadow: #000000;
--md-sys-color-scrim: #000000;
--md-sys-color-surface-tint: #acd28f;
--md-sys-color-surface-tint-rgb: 172 210 143;
--md-sys-color-primary: #acd28f;
--md-sys-color-primary-rgb: 172 210 143;
--md-sys-color-on-primary: #1a3705;
--md-sys-color-on-primary-rgb: 26 55 5;
--md-sys-color-primary-container: #304f1a;
--md-sys-color-primary-container-rgb: 48 79 26;
--md-sys-color-on-primary-container: #c7eea9;
--md-sys-color-on-primary-container-rgb: 199 238 169;
--md-sys-color-inverse-primary: #476730;
--md-sys-color-inverse-primary-rgb: 71 103 48;
--md-sys-color-secondary: #bdcbaf;
--md-sys-color-secondary-rgb: 189 203 175;
--md-sys-color-on-secondary: #283420;
--md-sys-color-on-secondary-rgb: 40 52 32;
--md-sys-color-secondary-container: #3f4a35;
--md-sys-color-secondary-container-rgb: 63 74 53;
--md-sys-color-on-secondary-container: #d9e7ca;
--md-sys-color-on-secondary-container-rgb: 217 231 202;
--md-sys-color-tertiary: #a0cfce;
--md-sys-color-tertiary-rgb: 160 207 206;
--md-sys-color-on-tertiary: #003737;
--md-sys-color-on-tertiary-rgb: 0 55 55;
--md-sys-color-tertiary-container: #1e4e4d;
--md-sys-color-tertiary-container-rgb: 30 78 77;
--md-sys-color-on-tertiary-container: #bbecea;
--md-sys-color-on-tertiary-container-rgb: 187 236 234;
--md-sys-color-error: #ffb4ab;
--md-sys-color-error-rgb: 255 180 171;
--md-sys-color-on-error: #690005;
--md-sys-color-on-error-rgb: 105 0 5;
--md-sys-color-error-container: #93000a;
--md-sys-color-error-container-rgb: 147 0 10;
--md-sys-color-on-error-container: #ffdad6;
--md-sys-color-on-error-container-rgb: 255 218 214;
--md-sys-color-primary-fixed: #c7eea9;
--md-sys-color-primary-fixed-dim: #acd28f;
--md-sys-color-on-primary-fixed: #0a2000;
--md-sys-color-on-primary-fixed-variant: #304f1a;
--md-sys-color-secondary-fixed: #d9e7ca;
--md-sys-color-secondary-fixed-dim: #bdcbaf;
--md-sys-color-on-secondary-fixed: #141e0c;
--md-sys-color-on-secondary-fixed-variant: #3f4a35;
--md-sys-color-tertiary-fixed: #bbecea;
--md-sys-color-tertiary-fixed-dim: #a0cfce;
--md-sys-color-on-tertiary-fixed: #002020;
--md-sys-color-on-tertiary-fixed-variant: #1e4e4d;
--glass-tint: rgba(30, 60, 9, 0.34);
--glass-tint-strong: rgba(52, 83, 31, 0.52);
--glass-rim: rgba(230, 252, 210, 0.78);
--glass-glow: rgba(123, 195, 72, 0.5);
--glass-scrim: rgba(17, 20, 14, 0.5);
--glass-shadow-tint: rgba(4, 18, 0, 0.6);
--glass-accent: rgb(139, 212, 87);
--glass-accent-2: rgb(160, 207, 206);
--seed-dot: rgb(108, 178, 57);
}
html[data-seed="magenta"] {
color-scheme: dark;
--md-sys-color-primary-palette-key-color: #996696;
--md-sys-color-secondary-palette-key-color: #877082;
--md-sys-color-tertiary-palette-key-color: #9d6a5e;
--md-sys-color-neutral-palette-key-color: #7e757a;
--md-sys-color-neutral-variant-palette-key-color: #7f747c;
--md-sys-color-background: #171216;
--md-sys-color-background-rgb: 23 18 22;
--md-sys-color-on-background: #ebdfe6;
--md-sys-color-on-background-rgb: 235 223 230;
--md-sys-color-surface: #171216;
--md-sys-color-surface-rgb: 23 18 22;
--md-sys-color-surface-dim: #171216;
--md-sys-color-surface-dim-rgb: 23 18 22;
--md-sys-color-surface-bright: #3e373c;
--md-sys-color-surface-bright-rgb: 62 55 60;
--md-sys-color-surface-container-lowest: #120d11;
--md-sys-color-surface-container-lowest-rgb: 18 13 17;
--md-sys-color-surface-container-low: #201a1e;
--md-sys-color-surface-container-low-rgb: 32 26 30;
--md-sys-color-surface-container: #241e22;
--md-sys-color-surface-container-rgb: 36 30 34;
--md-sys-color-surface-container-high: #2e282d;
--md-sys-color-surface-container-high-rgb: 46 40 45;
--md-sys-color-surface-container-highest: #3a3338;
--md-sys-color-surface-container-highest-rgb: 58 51 56;
--md-sys-color-on-surface: #ebdfe6;
--md-sys-color-on-surface-rgb: 235 223 230;
--md-sys-color-surface-variant: #4e444b;
--md-sys-color-surface-variant-rgb: 78 68 75;
--md-sys-color-on-surface-variant: #d1c3cc;
--md-sys-color-on-surface-variant-rgb: 209 195 204;
--md-sys-color-inverse-surface: #ebdfe6;
--md-sys-color-inverse-surface-rgb: 235 223 230;
--md-sys-color-inverse-on-surface: #352e33;
--md-sys-color-inverse-on-surface-rgb: 53 46 51;
--md-sys-color-outline: #9a8d96;
--md-sys-color-outline-rgb: 154 141 150;
--md-sys-color-outline-variant: #4e444b;
--md-sys-color-outline-variant-rgb: 78 68 75;
--md-sys-color-shadow: #000000;
--md-sys-color-scrim: #000000;
--md-sys-color-surface-tint: #efb4e8;
--md-sys-color-surface-tint-rgb: 239 180 232;
--md-sys-color-primary: #efb4e8;
--md-sys-color-primary-rgb: 239 180 232;
--md-sys-color-on-primary: #4b1f4a;
--md-sys-color-on-primary-rgb: 75 31 74;
--md-sys-color-primary-container: #643662;
--md-sys-color-primary-container-rgb: 100 54 98;
--md-sys-color-on-primary-container: #ffd6f8;
--md-sys-color-on-primary-container-rgb: 255 214 248;
--md-sys-color-inverse-primary: #7e4d7b;
--md-sys-color-inverse-primary-rgb: 126 77 123;
--md-sys-color-secondary: #d9bfd3;
--md-sys-color-secondary-rgb: 217 191 211;
--md-sys-color-on-secondary: #3c2b3a;
--md-sys-color-on-secondary-rgb: 60 43 58;
--md-sys-color-secondary-container: #544151;
--md-sys-color-secondary-container-rgb: 84 65 81;
--md-sys-color-on-secondary-container: #f6dbf0;
--md-sys-color-on-secondary-container-rgb: 246 219 240;
--md-sys-color-tertiary: #f6b8a9;
--md-sys-color-tertiary-rgb: 246 184 169;
--md-sys-color-on-tertiary: #4c261c;
--md-sys-color-on-tertiary-rgb: 76 38 28;
--md-sys-color-tertiary-container: #663b31;
--md-sys-color-tertiary-container-rgb: 102 59 49;
--md-sys-color-on-tertiary-container: #ffdad2;
--md-sys-color-on-tertiary-container-rgb: 255 218 210;
--md-sys-color-error: #ffb4ab;
--md-sys-color-error-rgb: 255 180 171;
--md-sys-color-on-error: #690005;
--md-sys-color-on-error-rgb: 105 0 5;
--md-sys-color-error-container: #93000a;
--md-sys-color-error-container-rgb: 147 0 10;
--md-sys-color-on-error-container: #ffdad6;
--md-sys-color-on-error-container-rgb: 255 218 214;
--md-sys-color-primary-fixed: #ffd6f8;
--md-sys-color-primary-fixed-dim: #efb4e8;
--md-sys-color-on-primary-fixed: #330834;
--md-sys-color-on-primary-fixed-variant: #643662;
--md-sys-color-secondary-fixed: #f6dbf0;
--md-sys-color-secondary-fixed-dim: #d9bfd3;
--md-sys-color-on-secondary-fixed: #261625;
--md-sys-color-on-secondary-fixed-variant: #544151;
--md-sys-color-tertiary-fixed: #ffdad2;
--md-sys-color-tertiary-fixed-dim: #f6b8a9;
--md-sys-color-on-tertiary-fixed: #321109;
--md-sys-color-on-tertiary-fixed-variant: #663b31;
--glass-tint: rgba(80, 36, 79, 0.34);
--glass-tint-strong: rgba(105, 59, 103, 0.52);
--glass-rim: rgba(255, 241, 250, 0.78);
--glass-glow: rgba(245, 137, 242, 0.5);
--glass-scrim: rgba(23, 18, 22, 0.5);
--glass-shadow-tint: rgba(33, 0, 35, 0.6);
--glass-accent: rgb(255, 160, 250);
--glass-accent-2: rgb(246, 184, 169);
--seed-dot: rgb(227, 121, 224);
}
html[data-seed="azure"] {
color-scheme: dark;
--md-sys-color-primary-palette-key-color: #6176ac;
--md-sys-color-secondary-palette-key-color: #71778b;
--md-sys-color-tertiary-palette-key-color: #8d6d8b;
--md-sys-color-neutral-palette-key-color: #76777d;
--md-sys-color-neutral-variant-palette-key-color: #757780;
--md-sys-color-background: #121318;
--md-sys-color-background-rgb: 18 19 24;
--md-sys-color-on-background: #e2e2e9;
--md-sys-color-on-background-rgb: 226 226 233;
--md-sys-color-surface: #121318;
--md-sys-color-surface-rgb: 18 19 24;
--md-sys-color-surface-dim: #121318;
--md-sys-color-surface-dim-rgb: 18 19 24;
--md-sys-color-surface-bright: #38393f;
--md-sys-color-surface-bright-rgb: 56 57 63;
--md-sys-color-surface-container-lowest: #0d0e13;
--md-sys-color-surface-container-lowest-rgb: 13 14 19;
--md-sys-color-surface-container-low: #1a1b21;
--md-sys-color-surface-container-low-rgb: 26 27 33;
--md-sys-color-surface-container: #1e1f25;
--md-sys-color-surface-container-rgb: 30 31 37;
--md-sys-color-surface-container-high: #282a2f;
--md-sys-color-surface-container-high-rgb: 40 42 47;
--md-sys-color-surface-container-highest: #33343a;
--md-sys-color-surface-container-highest-rgb: 51 52 58;
--md-sys-color-on-surface: #e2e2e9;
--md-sys-color-on-surface-rgb: 226 226 233;
--md-sys-color-surface-variant: #44464f;
--md-sys-color-surface-variant-rgb: 68 70 79;
--md-sys-color-on-surface-variant: #c5c6d0;
--md-sys-color-on-surface-variant-rgb: 197 198 208;
--md-sys-color-inverse-surface: #e2e2e9;
--md-sys-color-inverse-surface-rgb: 226 226 233;
--md-sys-color-inverse-on-surface: #2f3036;
--md-sys-color-inverse-on-surface-rgb: 47 48 54;
--md-sys-color-outline: #8f9099;
--md-sys-color-outline-rgb: 143 144 153;
--md-sys-color-outline-variant: #44464f;
--md-sys-color-outline-variant-rgb: 68 70 79;
--md-sys-color-shadow: #000000;
--md-sys-color-scrim: #000000;
--md-sys-color-surface-tint: #b1c5ff;
--md-sys-color-surface-tint-rgb: 177 197 255;
--md-sys-color-primary: #b1c5ff;
--md-sys-color-primary-rgb: 177 197 255;
--md-sys-color-on-primary: #162e60;
--md-sys-color-on-primary-rgb: 22 46 96;
--md-sys-color-primary-container: #2f4578;
--md-sys-color-primary-container-rgb: 47 69 120;
--md-sys-color-on-primary-container: #dae2ff;
--md-sys-color-on-primary-container-rgb: 218 226 255;
--md-sys-color-inverse-primary: #485d92;
--md-sys-color-inverse-primary-rgb: 72 93 146;
--md-sys-color-secondary: #c0c6dc;
--md-sys-color-secondary-rgb: 192 198 220;
--md-sys-color-on-secondary: #2a3042;
--md-sys-color-on-secondary-rgb: 42 48 66;
--md-sys-color-secondary-container: #404659;
--md-sys-color-secondary-container-rgb: 64 70 89;
--md-sys-color-on-secondary-container: #dce2f9;
--md-sys-color-on-secondary-container-rgb: 220 226 249;
--md-sys-color-tertiary: #e0bbdd;
--md-sys-color-tertiary-rgb: 224 187 221;
--md-sys-color-on-tertiary: #412742;
--md-sys-color-on-tertiary-rgb: 65 39 66;
--md-sys-color-tertiary-container: #593d59;
--md-sys-color-tertiary-container-rgb: 89 61 89;
--md-sys-color-on-tertiary-container: #fed7fa;
--md-sys-color-on-tertiary-container-rgb: 254 215 250;
--md-sys-color-error: #ffb4ab;
--md-sys-color-error-rgb: 255 180 171;
--md-sys-color-on-error: #690005;
--md-sys-color-on-error-rgb: 105 0 5;
--md-sys-color-error-container: #93000a;
--md-sys-color-error-container-rgb: 147 0 10;
--md-sys-color-on-error-container: #ffdad6;
--md-sys-color-on-error-container-rgb: 255 218 214;
--md-sys-color-primary-fixed: #dae2ff;
--md-sys-color-primary-fixed-dim: #b1c5ff;
--md-sys-color-on-primary-fixed: #001946;
--md-sys-color-on-primary-fixed-variant: #2f4578;
--md-sys-color-secondary-fixed: #dce2f9;
--md-sys-color-secondary-fixed-dim: #c0c6dc;
--md-sys-color-on-secondary-fixed: #151b2c;
--md-sys-color-on-secondary-fixed-variant: #404659;
--md-sys-color-tertiary-fixed: #fed7fa;
--md-sys-color-tertiary-fixed-dim: #e0bbdd;
--md-sys-color-on-tertiary-fixed: #2a122c;
--md-sys-color-on-tertiary-fixed-variant: #593d59;
--glass-tint: rgba(27, 51, 101, 0.34);
--glass-tint-strong: rgba(52, 74, 125, 0.52);
--glass-rim: rgba(244, 244, 255, 0.78);
--glass-glow: rgba(143, 175, 255, 0.5);
--glass-scrim: rgba(18, 19, 24, 0.5);
--glass-shadow-tint: rgba(0, 12, 43, 0.6);
--glass-accent: rgb(169, 192, 255);
--glass-accent-2: rgb(224, 187, 221);
--seed-dot: rgb(117, 158, 255);
}
html[data-seed="amber"] {
color-scheme: dark;
--md-sys-color-primary-palette-key-color: #ad6354;
--md-sys-color-secondary-palette-key-color: #926f68;
--md-sys-color-tertiary-palette-key-color: #897544;
--md-sys-color-neutral-palette-key-color: #827471;
--md-sys-color-neutral-variant-palette-key-color: #85736f;
--md-sys-color-background: #1a1110;
--md-sys-color-background-rgb: 26 17 16;
--md-sys-color-on-background: #f1dfdb;
--md-sys-color-on-background-rgb: 241 223 219;
--md-sys-color-surface: #1a1110;
--md-sys-color-surface-rgb: 26 17 16;
--md-sys-color-surface-dim: #1a1110;
--md-sys-color-surface-dim-rgb: 26 17 16;
--md-sys-color-surface-bright: #423734;
--md-sys-color-surface-bright-rgb: 66 55 52;
--md-sys-color-surface-container-lowest: #140c0b;
--md-sys-color-surface-container-lowest-rgb: 20 12 11;
--md-sys-color-surface-container-low: #231918;
--md-sys-color-surface-container-low-rgb: 35 25 24;
--md-sys-color-surface-container: #271d1c;
--md-sys-color-surface-container-rgb: 39 29 28;
--md-sys-color-surface-container-high: #322826;
--md-sys-color-surface-container-high-rgb: 50 40 38;
--md-sys-color-surface-container-highest: #3d3230;
--md-sys-color-surface-container-highest-rgb: 61 50 48;
--md-sys-color-on-surface: #f1dfdb;
--md-sys-color-on-surface-rgb: 241 223 219;
--md-sys-color-surface-variant: #534340;
--md-sys-color-surface-variant-rgb: 83 67 64;
--md-sys-color-on-surface-variant: #d8c2bd;
--md-sys-color-on-surface-variant-rgb: 216 194 189;
--md-sys-color-inverse-surface: #f1dfdb;
--md-sys-color-inverse-surface-rgb: 241 223 219;
--md-sys-color-inverse-on-surface: #392e2c;
--md-sys-color-inverse-on-surface-rgb: 57 46 44;
--md-sys-color-outline: #a08c89;
--md-sys-color-outline-rgb: 160 140 137;
--md-sys-color-outline-variant: #534340;
--md-sys-color-outline-variant-rgb: 83 67 64;
--md-sys-color-shadow: #000000;
--md-sys-color-scrim: #000000;
--md-sys-color-surface-tint: #ffb4a6;
--md-sys-color-surface-tint-rgb: 255 180 166;
--md-sys-color-primary: #ffb4a6;
--md-sys-color-primary-rgb: 255 180 166;
--md-sys-color-on-primary: #561e14;
--md-sys-color-on-primary-rgb: 86 30 20;
--md-sys-color-primary-container: #733428;
--md-sys-color-primary-container-rgb: 115 52 40;
--md-sys-color-on-primary-container: #ffdad3;
--md-sys-color-on-primary-container-rgb: 255 218 211;
--md-sys-color-inverse-primary: #904b3e;
--md-sys-color-inverse-primary-rgb: 144 75 62;
--md-sys-color-secondary: #e7bdb5;
--md-sys-color-secondary-rgb: 231 189 181;
--md-sys-color-on-secondary: #442a24;
--md-sys-color-on-secondary-rgb: 68 42 36;
--md-sys-color-secondary-container: #5d3f3a;
--md-sys-color-secondary-container-rgb: 93 63 58;
--md-sys-color-on-secondary-container: #ffdad3;
--md-sys-color-on-secondary-container-rgb: 255 218 211;
--md-sys-color-tertiary: #dcc48c;
--md-sys-color-tertiary-rgb: 220 196 140;
--md-sys-color-on-tertiary: #3d2e04;
--md-sys-color-on-tertiary-rgb: 61 46 4;
--md-sys-color-tertiary-container: #554519;
--md-sys-color-tertiary-container-rgb: 85 69 25;
--md-sys-color-on-tertiary-container: #fae0a6;
--md-sys-color-on-tertiary-container-rgb: 250 224 166;
--md-sys-color-error: #ffb4ab;
--md-sys-color-error-rgb: 255 180 171;
--md-sys-color-on-error: #690005;
--md-sys-color-on-error-rgb: 105 0 5;
--md-sys-color-error-container: #93000a;
--md-sys-color-error-container-rgb: 147 0 10;
--md-sys-color-on-error-container: #ffdad6;
--md-sys-color-on-error-container-rgb: 255 218 214;
--md-sys-color-primary-fixed: #ffdad3;
--md-sys-color-primary-fixed-dim: #ffb4a6;
--md-sys-color-on-primary-fixed: #3a0a03;
--md-sys-color-on-primary-fixed-variant: #733428;
--md-sys-color-secondary-fixed: #ffdad3;
--md-sys-color-secondary-fixed-dim: #e7bdb5;
--md-sys-color-on-secondary-fixed: #2c1511;
--md-sys-color-on-secondary-fixed-variant: #5d3f3a;
--md-sys-color-tertiary-fixed: #fae0a6;
--md-sys-color-tertiary-fixed-dim: #dcc48c;
--md-sys-color-on-tertiary-fixed: #241a00;
--md-sys-color-on-tertiary-fixed-variant: #554519;
--glass-tint: rgba(92, 35, 24, 0.34);
--glass-tint-strong: rgba(120, 57, 44, 0.52);
--glass-rim: rgba(255, 243, 240, 0.78);
--glass-glow: rgba(255, 147, 125, 0.5);
--glass-scrim: rgba(26, 17, 16, 0.5);
--glass-shadow-tint: rgba(38, 1, 0, 0.6);
--glass-accent: rgb(255, 172, 155);
--glass-accent-2: rgb(220, 196, 140);
--seed-dot: rgb(255, 119, 93);
}
}
@layer tokens {
:root {
--md-sys-shape-n: 5;
--md-sys-shape-superellipse-k: 2.321928;                         
--md-sys-shape-corner-shape: superellipse(2.321928);             
--md-sys-shape-corner-none: 0px;
--md-sys-shape-corner-extra-small: 4px;
--md-sys-shape-corner-small: 8px;
--md-sys-shape-corner-medium: 12px;
--md-sys-shape-corner-large: 16px;
--md-sys-shape-corner-large-increased: 20px;
--md-sys-shape-corner-extra-large: 28px;
--md-sys-shape-corner-extra-large-increased: 32px;
--md-sys-shape-corner-extra-extra-large: 48px;
--md-sys-shape-corner-full: 9999px;                               
--md-sys-shape-pane: var(--pane-r, clamp(28px, 3.4vw, 56px));     
--md-sys-shape-tile: clamp(24px, 2.6vw, 40px);
--md-sys-shape-control: var(--md-sys-shape-corner-full);          
--md-sys-shape-control-pressed: var(--md-sys-shape-corner-medium);
--md-sys-shape-control-selected: var(--md-sys-shape-corner-full);  
--md-sys-shape-chip: var(--md-sys-shape-corner-small);            
--md-sys-shape-sheet-top: var(--md-sys-shape-corner-extra-large); 
--md-sys-shape-fab: var(--md-sys-shape-corner-extra-large);       
--md-sys-size-button-xs: 32px;  --md-sys-size-button-s: 40px;  --md-sys-size-button-m: 56px;  --md-sys-size-button-l: 96px;  --md-sys-size-button-xl: 136px; 
--md-sys-size-fab: 56px;  --md-sys-size-fab-medium: 80px;  --md-sys-size-fab-large: 96px;   
--md-sys-size-search-bar: 56px;         
--md-sys-size-chip: 32px;               
--md-sys-size-toolbar: 64px;            
--md-sys-size-touch-target: 44px;       
--md-sys-motion-duration-short1: 50ms;   --md-sys-motion-duration-short2: 100ms;  --md-sys-motion-duration-short3: 150ms;  --md-sys-motion-duration-short4: 200ms;
--md-sys-motion-duration-medium1: 250ms; --md-sys-motion-duration-medium2: 300ms; --md-sys-motion-duration-medium3: 350ms; --md-sys-motion-duration-medium4: 400ms;
--md-sys-motion-duration-long1: 450ms;   --md-sys-motion-duration-long2: 500ms;   --md-sys-motion-duration-long3: 550ms;   --md-sys-motion-duration-long4: 600ms;
--md-sys-motion-duration-extra-long1: 700ms; --md-sys-motion-duration-extra-long2: 800ms; --md-sys-motion-duration-extra-long3: 900ms; --md-sys-motion-duration-extra-long4: 1000ms;
--md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
--md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
--md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
--md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
--md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
--md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
--md-sys-motion-easing-legacy: cubic-bezier(0.4, 0, 0.2, 1);
--md-sys-motion-easing-linear: cubic-bezier(0, 0, 1, 1);
--md-sys-motion-spring-spatial-fast: linear(0, 0.0292, 0.1046, 0.2099, 0.3314, 0.458, 0.5814, 0.6955, 0.7966, 0.8823, 0.952, 1.006, 1.0455, 1.072, 1.0876, 1.0942, 1.0938, 1.0883, 1.0794, 1.0684, 1.0565, 1.0446, 1.0333, 1.0232, 1.0144, 1.0072, 1.0014, 0.9971, 0.9941, 0.9922, 0.9912, 0.991, 0.9914, 0.9921, 0.9931, 0.9942, 0.9953, 0.9964, 0.9974, 0.9983, 0.999, 0.9996, 1.0001, 1.0005, 1);
--md-sys-motion-spring-spatial-fast-duration: 396ms;
--md-sys-motion-spring-spatial-default: linear(0, 0.0186, 0.0667, 0.1344, 0.2138, 0.2989, 0.3851, 0.469, 0.5483, 0.6215, 0.6877, 0.7465, 0.7979, 0.8422, 0.8797, 0.911, 0.9367, 0.9575, 0.9741, 0.9869, 0.9966, 1.0038, 1.0088, 1.0121, 1.0141, 1.015, 1.0151, 1.0147, 1.0139, 1.0128, 1.0115, 1.0102, 1.0089, 1.0077, 1.0065, 1.0054, 1.0044, 1.0036, 1.0028, 1.0022, 1.0017, 1.0012, 1.0009, 1.0006, 1);
--md-sys-motion-spring-spatial-default-duration: 460ms;
--md-sys-motion-spring-spatial-slow: linear(0, 0.0175, 0.063, 0.1274, 0.2033, 0.2853, 0.3688, 0.4507, 0.5288, 0.6014, 0.6676, 0.7269, 0.7793, 0.8248, 0.8638, 0.8968, 0.9243, 0.9469, 0.9651, 0.9796, 0.9908, 0.9993, 1.0055, 1.0099, 1.0127, 1.0144, 1.0151, 1.0151, 1.0146, 1.0138, 1.0127, 1.0115, 1.0102, 1.009, 1.0078, 1.0066, 1.0056, 1.0046, 1.0038, 1.003, 1.0024, 1.0018, 1.0014, 1.001, 1);
--md-sys-motion-spring-spatial-slow-duration: 614ms;
--md-sys-motion-spring-effects-fast: linear(0, 0.024, 0.0823, 0.1594, 0.2448, 0.3315, 0.4153, 0.4934, 0.5646, 0.6283, 0.6845, 0.7335, 0.7759, 0.8122, 0.8432, 0.8695, 0.8916, 0.9102, 0.9258, 0.9388, 0.9496, 0.9586, 0.9661, 0.9722, 0.9772, 0.9814, 0.9848, 0.9876, 0.9899, 0.9918, 0.9933, 0.9946, 0.9956, 0.9964, 0.9971, 0.9977, 0.9981, 0.9985, 0.9988, 0.999, 0.9992, 0.9993, 0.9995, 0.9996, 1);
--md-sys-motion-spring-effects-fast-duration: 169ms;
--md-sys-motion-spring-effects-default: linear(0, 0.0219, 0.0757, 0.1476, 0.2282, 0.3109, 0.3917, 0.468, 0.5382, 0.6018, 0.6585, 0.7086, 0.7523, 0.7903, 0.823, 0.8511, 0.875, 0.8954, 0.9126, 0.9271, 0.9394, 0.9496, 0.9582, 0.9654, 0.9714, 0.9763, 0.9805, 0.9839, 0.9867, 0.9891, 0.991, 0.9926, 0.994, 0.995, 0.9959, 0.9967, 0.9973, 0.9978, 0.9982, 0.9985, 0.9988, 0.999, 0.9992, 0.9993, 1);
--md-sys-motion-spring-effects-default-duration: 248ms;
--md-sys-motion-spring-effects-slow: linear(0, 0.0203, 0.0707, 0.1386, 0.2153, 0.2948, 0.3731, 0.4477, 0.5169, 0.5802, 0.6371, 0.6878, 0.7325, 0.7717, 0.8057, 0.8351, 0.8605, 0.8822, 0.9008, 0.9166, 0.93, 0.9413, 0.9509, 0.959, 0.9658, 0.9715, 0.9763, 0.9803, 0.9836, 0.9864, 0.9887, 0.9906, 0.9923, 0.9936, 0.9947, 0.9956, 0.9964, 0.997, 0.9975, 0.998, 0.9983, 0.9986, 0.9989, 0.9991, 1);
--md-sys-motion-spring-effects-slow-duration: 337ms;
--md-sys-state-hover-opacity: 0.08;
--md-sys-state-focus-opacity: 0.12;
--md-sys-state-pressed-opacity: 0.12;
--md-sys-state-dragged-opacity: 0.16;
--md-sys-state-disabled-content-opacity: 0.38;
--md-sys-state-disabled-container-opacity: 0.12;
--glass-bloom-hover: 0.2;
--glass-bloom-focus: 0.3;
--glass-bloom-pressed: 0.3;
--glass-bloom-dragged: 0.4;
--md-sys-elevation-level0: 0px;  --md-sys-elevation-level1: 1px;  --md-sys-elevation-level2: 3px;  --md-sys-elevation-level3: 6px;  --md-sys-elevation-level4: 8px;  --md-sys-elevation-level5: 12px;
--glass-elev-0-blur: 0px;   --glass-elev-0-dy: 0px;  --glass-elev-0-alpha: 0;
--glass-elev-1-blur: 10px;  --glass-elev-1-dy: 3px;  --glass-elev-1-alpha: 0.35;
--glass-elev-2-blur: 22px;  --glass-elev-2-dy: 8px;  --glass-elev-2-alpha: 0.42;
--glass-elev-3-blur: 36px;  --glass-elev-3-dy: 14px; --glass-elev-3-alpha: 0.5;
--glass-elev-4-blur: 52px;  --glass-elev-4-dy: 22px; --glass-elev-4-alpha: 0.55;
--glass-elev-5-blur: 72px;  --glass-elev-5-dy: 32px; --glass-elev-5-alpha: 0.6;
--md-sys-typescale-weight-regular: 400;
--md-sys-typescale-weight-medium: 500;
--md-sys-typescale-weight-bold: 700;
--md-sys-typescale-display-large-font: var(--font-display);  --md-sys-typescale-display-large-size: clamp(3.5625rem, 1.6rem + 7.4vw, 8rem);   --md-sys-typescale-display-large-line-height: 0.94;  --md-sys-typescale-display-large-tracking: -0.035em; --md-sys-typescale-display-large-weight: 400; --md-sys-typescale-display-large-emphasized-weight: 500;
--md-sys-typescale-display-medium-font: var(--font-display); --md-sys-typescale-display-medium-size: clamp(2.8125rem, 1.5rem + 4.9vw, 5.5rem); --md-sys-typescale-display-medium-line-height: 1;     --md-sys-typescale-display-medium-tracking: -0.03em;  --md-sys-typescale-display-medium-weight: 400; --md-sys-typescale-display-medium-emphasized-weight: 500;
--md-sys-typescale-display-small-font: var(--font-display);  --md-sys-typescale-display-small-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem);      --md-sys-typescale-display-small-line-height: 1.04;  --md-sys-typescale-display-small-tracking: -0.025em;  --md-sys-typescale-display-small-weight: 400; --md-sys-typescale-display-small-emphasized-weight: 500;
--md-sys-typescale-headline-large-font: var(--font-display);  --md-sys-typescale-headline-large-size: clamp(2rem, 1.35rem + 2.3vw, 3rem);       --md-sys-typescale-headline-large-line-height: 1.1;  --md-sys-typescale-headline-large-tracking: -0.02em;  --md-sys-typescale-headline-large-weight: 400; --md-sys-typescale-headline-large-emphasized-weight: 500;
--md-sys-typescale-headline-medium-font: var(--font-display); --md-sys-typescale-headline-medium-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.375rem); --md-sys-typescale-headline-medium-line-height: 1.14; --md-sys-typescale-headline-medium-tracking: -0.015em; --md-sys-typescale-headline-medium-weight: 400; --md-sys-typescale-headline-medium-emphasized-weight: 500;
--md-sys-typescale-headline-small-font: var(--font-display);  --md-sys-typescale-headline-small-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);   --md-sys-typescale-headline-small-line-height: 1.2;  --md-sys-typescale-headline-small-tracking: -0.01em;  --md-sys-typescale-headline-small-weight: 400; --md-sys-typescale-headline-small-emphasized-weight: 500;
--md-sys-typescale-title-large-font: var(--font-ui);  --md-sys-typescale-title-large-size: clamp(1.375rem, 1.2rem + 0.55vw, 1.625rem);  --md-sys-typescale-title-large-line-height: 1.25; --md-sys-typescale-title-large-tracking: -0.005em; --md-sys-typescale-title-large-weight: 400; --md-sys-typescale-title-large-emphasized-weight: 500;
--md-sys-typescale-title-medium-font: var(--font-ui); --md-sys-typescale-title-medium-size: clamp(1rem, 0.94rem + 0.25vw, 1.1875rem);    --md-sys-typescale-title-medium-line-height: 1.4;  --md-sys-typescale-title-medium-tracking: 0.0094em;  --md-sys-typescale-title-medium-weight: 500; --md-sys-typescale-title-medium-emphasized-weight: 700;
--md-sys-typescale-title-small-font: var(--font-ui);  --md-sys-typescale-title-small-size: clamp(0.875rem, 0.84rem + 0.15vw, 1rem);       --md-sys-typescale-title-small-line-height: 1.4;   --md-sys-typescale-title-small-tracking: 0.007em;   --md-sys-typescale-title-small-weight: 500; --md-sys-typescale-title-small-emphasized-weight: 700;
--md-sys-typescale-body-reading-font: var(--font-ui); --md-sys-typescale-body-reading-size: clamp(1.1875rem, 1.12rem + 0.3vw, 1.4375rem); --md-sys-typescale-body-reading-line-height: 1.55; --md-sys-typescale-body-reading-tracking: 0em; --md-sys-typescale-body-reading-weight: 400; --md-sys-typescale-body-reading-measure: 62ch;
--md-sys-typescale-body-large-font: var(--font-ui);  --md-sys-typescale-body-large-size: clamp(1rem, 0.95rem + 0.25vw, 1.1875rem);    --md-sys-typescale-body-large-line-height: 1.5;  --md-sys-typescale-body-large-tracking: 0.0313em; --md-sys-typescale-body-large-weight: 400; --md-sys-typescale-body-large-emphasized-weight: 500;
--md-sys-typescale-body-medium-font: var(--font-ui); --md-sys-typescale-body-medium-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem); --md-sys-typescale-body-medium-line-height: 1.45; --md-sys-typescale-body-medium-tracking: 0.0179em; --md-sys-typescale-body-medium-weight: 400; --md-sys-typescale-body-medium-emphasized-weight: 500;
--md-sys-typescale-body-small-font: var(--font-ui);  --md-sys-typescale-body-small-size: clamp(0.8125rem, 0.79rem + 0.1vw, 0.9375rem);  --md-sys-typescale-body-small-line-height: 1.4;  --md-sys-typescale-body-small-tracking: 0.0333em; --md-sys-typescale-body-small-weight: 400; --md-sys-typescale-body-small-emphasized-weight: 500;
--md-sys-typescale-label-large-font: var(--font-ui);  --md-sys-typescale-label-large-size: clamp(0.875rem, 0.85rem + 0.15vw, 1rem);      --md-sys-typescale-label-large-line-height: 1.3; --md-sys-typescale-label-large-tracking: 0.007em; --md-sys-typescale-label-large-weight: 500; --md-sys-typescale-label-large-emphasized-weight: 700;
--md-sys-typescale-label-medium-font: var(--font-ui); --md-sys-typescale-label-medium-size: clamp(0.8125rem, 0.79rem + 0.1vw, 0.9375rem); --md-sys-typescale-label-medium-line-height: 1.3; --md-sys-typescale-label-medium-tracking: 0.04em;  --md-sys-typescale-label-medium-weight: 500; --md-sys-typescale-label-medium-emphasized-weight: 700;
--md-sys-typescale-label-small-font: var(--font-mono); --md-sys-typescale-label-small-size: clamp(0.75rem, 0.73rem + 0.08vw, 0.8125rem);   --md-sys-typescale-label-small-line-height: 1.3; --md-sys-typescale-label-small-tracking: 0.06em;  --md-sys-typescale-label-small-weight: 500; --md-sys-typescale-label-small-emphasized-weight: 700;
}
}
@layer utilities {
.type-display-large { font-family: var(--md-sys-typescale-display-large-font); font-size: var(--md-sys-typescale-display-large-size); line-height: var(--md-sys-typescale-display-large-line-height); letter-spacing: var(--md-sys-typescale-display-large-tracking); font-weight: var(--md-sys-typescale-display-large-weight); }
.type-display-large.is-emphasized { font-weight: var(--md-sys-typescale-display-large-emphasized-weight); }
.type-display-medium { font-family: var(--md-sys-typescale-display-medium-font); font-size: var(--md-sys-typescale-display-medium-size); line-height: var(--md-sys-typescale-display-medium-line-height); letter-spacing: var(--md-sys-typescale-display-medium-tracking); font-weight: var(--md-sys-typescale-display-medium-weight); }
.type-display-medium.is-emphasized { font-weight: var(--md-sys-typescale-display-medium-emphasized-weight); }
.type-display-small { font-family: var(--md-sys-typescale-display-small-font); font-size: var(--md-sys-typescale-display-small-size); line-height: var(--md-sys-typescale-display-small-line-height); letter-spacing: var(--md-sys-typescale-display-small-tracking); font-weight: var(--md-sys-typescale-display-small-weight); }
.type-display-small.is-emphasized { font-weight: var(--md-sys-typescale-display-small-emphasized-weight); }
.type-headline-large { font-family: var(--md-sys-typescale-headline-large-font); font-size: var(--md-sys-typescale-headline-large-size); line-height: var(--md-sys-typescale-headline-large-line-height); letter-spacing: var(--md-sys-typescale-headline-large-tracking); font-weight: var(--md-sys-typescale-headline-large-weight); }
.type-headline-large.is-emphasized { font-weight: var(--md-sys-typescale-headline-large-emphasized-weight); }
.type-headline-medium { font-family: var(--md-sys-typescale-headline-medium-font); font-size: var(--md-sys-typescale-headline-medium-size); line-height: var(--md-sys-typescale-headline-medium-line-height); letter-spacing: var(--md-sys-typescale-headline-medium-tracking); font-weight: var(--md-sys-typescale-headline-medium-weight); }
.type-headline-medium.is-emphasized { font-weight: var(--md-sys-typescale-headline-medium-emphasized-weight); }
.type-headline-small { font-family: var(--md-sys-typescale-headline-small-font); font-size: var(--md-sys-typescale-headline-small-size); line-height: var(--md-sys-typescale-headline-small-line-height); letter-spacing: var(--md-sys-typescale-headline-small-tracking); font-weight: var(--md-sys-typescale-headline-small-weight); }
.type-headline-small.is-emphasized { font-weight: var(--md-sys-typescale-headline-small-emphasized-weight); }
.type-title-large { font-family: var(--md-sys-typescale-title-large-font); font-size: var(--md-sys-typescale-title-large-size); line-height: var(--md-sys-typescale-title-large-line-height); letter-spacing: var(--md-sys-typescale-title-large-tracking); font-weight: var(--md-sys-typescale-title-large-weight); }
.type-title-large.is-emphasized { font-weight: var(--md-sys-typescale-title-large-emphasized-weight); }
.type-title-medium { font-family: var(--md-sys-typescale-title-medium-font); font-size: var(--md-sys-typescale-title-medium-size); line-height: var(--md-sys-typescale-title-medium-line-height); letter-spacing: var(--md-sys-typescale-title-medium-tracking); font-weight: var(--md-sys-typescale-title-medium-weight); }
.type-title-medium.is-emphasized { font-weight: var(--md-sys-typescale-title-medium-emphasized-weight); }
.type-title-small { font-family: var(--md-sys-typescale-title-small-font); font-size: var(--md-sys-typescale-title-small-size); line-height: var(--md-sys-typescale-title-small-line-height); letter-spacing: var(--md-sys-typescale-title-small-tracking); font-weight: var(--md-sys-typescale-title-small-weight); }
.type-title-small.is-emphasized { font-weight: var(--md-sys-typescale-title-small-emphasized-weight); }
.type-body-large { font-family: var(--md-sys-typescale-body-large-font); font-size: var(--md-sys-typescale-body-large-size); line-height: var(--md-sys-typescale-body-large-line-height); letter-spacing: var(--md-sys-typescale-body-large-tracking); font-weight: var(--md-sys-typescale-body-large-weight); }
.type-body-large.is-emphasized { font-weight: var(--md-sys-typescale-body-large-emphasized-weight); }
.type-body-medium { font-family: var(--md-sys-typescale-body-medium-font); font-size: var(--md-sys-typescale-body-medium-size); line-height: var(--md-sys-typescale-body-medium-line-height); letter-spacing: var(--md-sys-typescale-body-medium-tracking); font-weight: var(--md-sys-typescale-body-medium-weight); }
.type-body-medium.is-emphasized { font-weight: var(--md-sys-typescale-body-medium-emphasized-weight); }
.type-body-small { font-family: var(--md-sys-typescale-body-small-font); font-size: var(--md-sys-typescale-body-small-size); line-height: var(--md-sys-typescale-body-small-line-height); letter-spacing: var(--md-sys-typescale-body-small-tracking); font-weight: var(--md-sys-typescale-body-small-weight); }
.type-body-small.is-emphasized { font-weight: var(--md-sys-typescale-body-small-emphasized-weight); }
.type-label-large { font-family: var(--md-sys-typescale-label-large-font); font-size: var(--md-sys-typescale-label-large-size); line-height: var(--md-sys-typescale-label-large-line-height); letter-spacing: var(--md-sys-typescale-label-large-tracking); font-weight: var(--md-sys-typescale-label-large-weight); }
.type-label-large.is-emphasized { font-weight: var(--md-sys-typescale-label-large-emphasized-weight); }
.type-label-medium { font-family: var(--md-sys-typescale-label-medium-font); font-size: var(--md-sys-typescale-label-medium-size); line-height: var(--md-sys-typescale-label-medium-line-height); letter-spacing: var(--md-sys-typescale-label-medium-tracking); font-weight: var(--md-sys-typescale-label-medium-weight); }
.type-label-medium.is-emphasized { font-weight: var(--md-sys-typescale-label-medium-emphasized-weight); }
.type-label-small { font-family: var(--md-sys-typescale-label-small-font); font-size: var(--md-sys-typescale-label-small-size); line-height: var(--md-sys-typescale-label-small-line-height); letter-spacing: var(--md-sys-typescale-label-small-tracking); font-weight: var(--md-sys-typescale-label-small-weight); }
.type-label-small.is-emphasized { font-weight: var(--md-sys-typescale-label-small-emphasized-weight); }
.type-body-reading { font-family: var(--md-sys-typescale-body-reading-font); font-size: var(--md-sys-typescale-body-reading-size); line-height: var(--md-sys-typescale-body-reading-line-height); letter-spacing: var(--md-sys-typescale-body-reading-tracking); font-weight: var(--md-sys-typescale-body-reading-weight); max-inline-size: var(--md-sys-typescale-body-reading-measure); }
.shape-g4 { border-radius: var(--r, var(--md-sys-shape-corner-extra-large)); }
@supports (corner-shape: superellipse(2)) { .shape-g4 { corner-shape: var(--md-sys-shape-corner-shape); } }
}
@layer tokens {
@media (prefers-reduced-motion: reduce) {
:root { --md-sys-motion-spring-spatial-fast-duration: 1ms; --md-sys-motion-spring-spatial-default-duration: 1ms; --md-sys-motion-spring-spatial-slow-duration: 1ms; }
}
}
@layer reset, tokens, base, glass, components, sections, utilities;
@layer tokens {
:root {
--gap: clamp(10px, 1.2vw, 18px);                       
--pad: clamp(20px, 3vw, 48px);                         
--pane-r: clamp(28px, 3.4vw, 56px);                    
--page-gutter: max(clamp(14px, 4vw, 64px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));   
--container-max: 1440px;
--section-y: clamp(3.5rem, 1.75rem + 5.8vw, 7rem);      
--head-wash-a: .38;                                   
--head-wash-fade: .7em;                                
--on-photo-muted: color-mix(in srgb, var(--md-sys-color-on-surface, #e1e4d9) 58%, var(--md-sys-color-on-surface-variant, #c4c8bb));   
--measure: 62ch;
--fs-group: calc(var(--fs-h3) * .75);                  
--nav-h: 56px;                                         
--nav-top: max(var(--gap), env(safe-area-inset-top, 0px));
--nav-space: calc(var(--nav-top) + var(--nav-h));
--dock-h: 0px;                                         
--hit: 44px;                                           
--bg-focus: 58% 62%;                                   
--hairline: 1px;
--ring-w: 2px;
--ring-gap: calc(var(--gap) / 4);                      
--space-1: .25rem;                                     
--space-2: .5rem;                                      
--space-3: .75rem;                                     
--space-4: 1rem;                                       
--space-5: 1.5rem;                                     
--space-6: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);     
--space-7: clamp(2.5rem, 1.9rem + 2.4vw, 4rem);        
--space-8: clamp(3.5rem, 2.4rem + 4.2vw, 6.5rem);      
--space-9: clamp(5rem, 3rem + 7vw, 10rem);             
--r-xs: 8px;
--r-sm: 14px;
--r-md: 20px;
--r-lg: 28px;
--r-xl: 40px;
--r-pane: var(--pane-r);
--r-full: 9999px;                                      
--corner-shape: superellipse(2.32193);                 
--r-k: 1;                                              
--font-display: "ACD Sans", "ACD Sans Fallback", system-ui, sans-serif;
--font-wordmark: "Mattone", "Mattone Fallback", "ACD Sans", system-ui, sans-serif;
--font-ui: "GSF", "GSF Fallback", system-ui, sans-serif;
--font-mono: "GSC", "GSC Fallback", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
--fs-wordmark: clamp(3.25rem, 9.5vw, 9.25rem);
--fs-display: clamp(2.75rem, 1.4rem + 5.6vw, 6.5rem);     
--fs-h2: clamp(2rem, 1.2rem + 3.2vw, 4.25rem);            
--fs-h3: clamp(1.5rem, 1.15rem + 1.2vw, 2.25rem);         
--fs-numeral: clamp(1.75rem, 1.2rem + 2.4vw, 3.5rem);     
--fs-lead: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);         
--fs-reading: clamp(1.1875rem, 1.12rem + .3vw, 1.4375rem);
--fs-body: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);      
--fs-small: clamp(.875rem, .85rem + .12vw, .9375rem);     
--fs-label: clamp(.75rem, .73rem + .1vw, .8125rem);       
--fs-mono: clamp(.8125rem, .79rem + .1vw, .875rem);       
--lh-tight: .98;
--lh-heading: 1.1;
--lh-lead: 1.4;
--lh-body: 1.58;
--lh-small: 1.5;
--lh-label: 1.3;
--lh-mono: 1.55;
--tr-wordmark: -.02em;
--tr-display: -.035em;
--tr-h2: -.02em;
--tr-h3: -.015em;
--tr-body: 0em;
--tr-small: .005em;
--tr-label: .13em;
--tr-mono: 0em;
--motion: 1;
--dur-fx: var(--md-sys-motion-spring-effects-fast-duration, 169ms);     
--ease-fx: var(--md-sys-motion-spring-effects-fast, cubic-bezier(.2, 0, 0, 1));
--dur-press: var(--md-sys-motion-spring-spatial-fast-duration, 396ms);  
--ease-press: var(--md-sys-motion-spring-spatial-fast, cubic-bezier(.2, 0, 0, 1));
--dur-move: var(--md-sys-motion-spring-spatial-default-duration, 460ms);
--ease-move: var(--md-sys-motion-spring-spatial-default, cubic-bezier(.2, 0, 0, 1));
--dur-slow: var(--md-sys-motion-spring-spatial-slow-duration, 614ms);
--ease-slow: var(--md-sys-motion-spring-spatial-slow, cubic-bezier(.2, 0, 0, 1));
--dur-link: 160ms;
--ease-link: var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(.05, .7, .1, 1));
--z-bg: -2;
--z-canvas: -1;
--z-base: 0;
--z-raised: 1;
--z-sticky: 20;
--z-nav: 30;
--z-dock: 30;
--z-popover: 40;
--z-dialog: 50;
--z-toast: 60;
--z-skip: 100;
}
@supports not (corner-shape: superellipse(2.3)) {
:root { --r-k: .5; }
}
@media (max-width: 899px) {
:root { --fs-wordmark: clamp(3rem, 15vw, 9rem); }
}
@media (max-width: 699px) {
:root { --nav-h: 52px; --dock-h: 60px; }
}
@media (prefers-reduced-motion: reduce) {
:root {
--motion: 0;
--dur-fx: 100ms; --ease-fx: ease-out;
--dur-press: 1ms; --ease-press: linear;
--dur-move: 1ms; --ease-move: linear;
--dur-slow: 1ms; --ease-slow: linear;
--dur-link: 1ms;
}
}
:root.reduced-motion {
--motion: 0;
--dur-fx: 100ms; --ease-fx: ease-out;
--dur-press: 1ms; --ease-press: linear;
--dur-move: 1ms; --ease-move: linear;
--dur-slow: 1ms; --ease-slow: linear;
--dur-link: 1ms;
}
}
@layer reset, tokens, base, glass, components, sections, utilities;
@layer reset {
*, *::before, *::after { box-sizing: border-box; }
:where(html) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; tab-size: 4; }
:where(body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, pre, hr, fieldset) { margin: 0; }
:where(h1, h2, h3, h4, h5, h6) { font-size: inherit; font-weight: inherit; }
:where(ul, ol)[class], :where(ul, ol)[role="list"] { list-style: none; margin: 0; padding: 0; }
:where(img, picture, video, canvas, svg) { display: block; max-inline-size: 100%; }
:where(img, video) { block-size: auto; }
:where(input, button, textarea, select) { font: inherit; letter-spacing: inherit; color: inherit; }
:where(button) { background: none; border: 0; padding: 0; text-align: inherit; }
:where(button, [role="button"], summary, select, label[for]) { cursor: pointer; }
:where(button, input, select, textarea):disabled { cursor: not-allowed; }
:where(a) { color: inherit; }
:where(a[class]) { text-decoration: none; }
:where(table) { border-collapse: collapse; }
:where(dialog) { margin: auto; padding: 0; border: 0; color: inherit; background: transparent; }
:where(dialog:not([open])) { display: none; }
[hidden]:not([hidden="until-found"]) { display: none !important; }
html:not(.js) .tile__detail[hidden] { display: grid !important; }
:where(p, li, dd, blockquote) { overflow-wrap: break-word; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
transition-property: opacity, color, background-color, border-color, outline-color, text-decoration-color, --gl-bloom, --gl-rim-a, --gl-rim-t, --gl-hair-a, --gl-dim !important;
transition-duration: 100ms !important; transition-delay: 0s !important;
scroll-behavior: auto !important;
}
}
html.reduced-motion *, html.reduced-motion *::before, html.reduced-motion *::after {
animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
transition-property: opacity, color, background-color, border-color, outline-color, text-decoration-color, --gl-bloom, --gl-rim-a, --gl-rim-t, --gl-hair-a, --gl-dim !important;
transition-duration: 100ms !important; transition-delay: 0s !important;
scroll-behavior: auto !important;
}
}
@layer base {
html {
color-scheme: dark;
background-color: var(--bg-dominant, #0b1020);
background-image: var(--bg-lqip, none);                 
background-size: cover;
background-position: var(--bg-focus, 58% 62%);
background-attachment: fixed;
accent-color: var(--md-sys-color-primary, #acd28f);
scrollbar-color: color-mix(in srgb, var(--md-sys-color-primary, #acd28f) 55%, transparent) transparent;
scrollbar-width: thin;
scroll-padding-top: calc(var(--nav-space) + var(--gap));
-webkit-tap-highlight-color: transparent;
overflow-x: clip;
}
@media (prefers-reduced-motion: no-preference) {
html:not(.reduced-motion) { scroll-behavior: smooth; }
}
@media (max-width: 699px) {
html { scroll-padding-bottom: calc(var(--dock-h) + max(var(--gap), env(safe-area-inset-bottom, 0px)) + var(--gap)); }
}
body {
min-block-size: 100vh;
min-block-size: 100svh;
background: transparent;                                
color: var(--md-sys-color-on-surface, #e1e4d9);
font: 400 var(--fs-body) / var(--lh-body) var(--font-ui);
letter-spacing: var(--tr-body);
font-synthesis: none;
font-optical-sizing: auto;
padding-block-end: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px));
overflow-wrap: break-word;
}
::selection { background: var(--md-sys-color-primary-container, #304f1a); color: var(--md-sys-color-on-primary-container, #c7eea9); }
::placeholder { color: color-mix(in srgb, var(--md-sys-color-on-surface-variant, #c4c8bb) 78%, transparent); opacity: 1; }
:where(main) { display: block; }
:where(h1) { font: 800 var(--fs-display) / var(--lh-tight) var(--font-display); font-stretch: 112%; letter-spacing: var(--tr-display); text-wrap: balance; }
:where(h2) { font: 800 var(--fs-h2) / 1.04 var(--font-display); font-stretch: 116%; letter-spacing: var(--tr-h2); text-wrap: balance; }
:where(h3) { font: 750 var(--fs-h3) / 1.12 var(--font-display); font-stretch: 112%; letter-spacing: var(--tr-h3); text-wrap: balance; }
:where(h4, h5, h6) { font: 650 var(--fs-body) / 1.3 var(--font-ui); letter-spacing: .005em; }
:where(p, li, dd) { text-wrap: pretty; }
:where(strong, b) { font-weight: 650; }
:where(code, kbd, samp) { font-family: var(--font-mono); font-size: .92em; }
:where(hr) { border: 0; border-block-start: var(--hairline) solid color-mix(in srgb, var(--md-sys-color-outline-variant, #44483e) 80%, transparent); }
.page-bg {
position: fixed; inset: 0 auto auto 0;
inline-size: 100%;
block-size: 100vh; block-size: 100lvh;
z-index: var(--z-bg);
pointer-events: none;
overflow: hidden;
background: transparent;
opacity: 1; visibility: visible;
transition: opacity 320ms linear, visibility 0s linear 0s;
}
.page-bg picture { display: block; inline-size: 100%; block-size: 100%; }
.page-bg__img {
display: block; inline-size: 100%; block-size: 100%; max-inline-size: none;
object-fit: cover; object-position: var(--bg-focus, 58% 62%);
user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
}
html.gl-on:not(.gl-lost) .page-bg { opacity: 0; visibility: hidden; transition: opacity 320ms linear, visibility 0s linear 320ms; }
.glass-canvas {
position: fixed; inset: 0 auto auto 0;
display: block;
inline-size: 100%;
block-size: 100vh; block-size: 100lvh;
z-index: var(--z-canvas);
pointer-events: none;
background: transparent;
}
html:not(.gl-on) .glass-canvas { opacity: 0; }            
.skip-link {
position: fixed; z-index: var(--z-skip);
inset-block-start: var(--nav-top); inset-inline-start: var(--page-gutter);
display: inline-flex; align-items: center; justify-content: center;
min-block-size: var(--hit);
padding-inline: 1.25em;
border-radius: calc(var(--r-md) * var(--r-k));
background: var(--md-sys-color-inverse-surface, #e1e4d9); color: var(--md-sys-color-inverse-on-surface, #11140e);
font: 650 var(--fs-small) / 1 var(--font-ui); text-decoration: none; white-space: nowrap;
clip-path: inset(50%); inline-size: 1px; block-size: 1px; overflow: hidden; padding-inline: 0; min-block-size: 0;
}
@supports (corner-shape: superellipse(2.3)) { .skip-link { corner-shape: var(--corner-shape); } }
.skip-link:focus, .skip-link:focus-visible {
clip-path: none; inline-size: auto; block-size: auto; overflow: visible; padding-inline: 1.25em; min-block-size: var(--hit);
}
:where(:focus-visible) {
outline: var(--ring-w) solid var(--glass-accent, #8bd457);
outline-offset: var(--ring-gap);
--focus-halo: 0 0 0 calc(var(--ring-gap) + var(--ring-w) + 1px) color-mix(in srgb, color-mix(in srgb, var(--md-sys-color-surface-dim, #11140e) 60%, #000) 88%, transparent);
box-shadow: var(--focus-halo);
}
:where(:focus):not(:focus-visible) { outline: none; }
main:focus-visible, [data-no-ring]:focus-visible { outline: none; box-shadow: none; }       
.glass:has(.tile__open:focus-visible), .ring-host:has(:focus-visible) {
outline: var(--ring-w) solid var(--glass-accent, #8bd457);
outline-offset: var(--ring-gap);
box-shadow: 0 0 0 calc(var(--ring-gap) + var(--ring-w) + 1px) color-mix(in srgb, color-mix(in srgb, var(--md-sys-color-surface-dim, #11140e) 60%, #000) 88%, transparent);
}
.tile__open:focus-visible, .ring-host :focus-visible { outline: none; box-shadow: none; }
:where(a:not([class])):focus-visible { border-radius: var(--r-xs); }
@media (forced-colors: active) {
:where(:focus-visible), .glass:has(.tile__open:focus-visible), .ring-host:has(:focus-visible) { outline: 3px solid Highlight; box-shadow: none; }
.page-bg, .glass-canvas { display: none; }
html { background: Canvas; }
.section__head :is(.section__kicker, .section__title, .section__intro)::before, .wash::before { display: none; }
}
:where(a:not([class])), .link {
color: var(--md-sys-color-primary, #acd28f);
text-decoration: none;
background-image:
linear-gradient(currentColor, currentColor),
linear-gradient(color-mix(in srgb, currentColor 38%, transparent), color-mix(in srgb, currentColor 38%, transparent));
background-repeat: no-repeat;
background-size: 0% 1.5px, 100% 1px;
background-position: 100% 100%, 0 100%;
padding-block-end: .12em;
-webkit-box-decoration-break: clone; box-decoration-break: clone;
transition: background-size var(--dur-link) var(--ease-link), background-position var(--dur-link) var(--ease-link), color var(--dur-fx) var(--ease-fx);
}
@media (hover: hover) and (pointer: fine) {
:where(a:not([class])):hover, .link:hover { background-size: 100% 1.5px, 100% 1px; background-position: 0 100%, 0 100%; }
}
:where(a:not([class])):focus-visible, .link:focus-visible,
:where(a:not([class])):active, .link:active { background-size: 100% 1.5px, 100% 1px; background-position: 0 100%, 0 100%; }
.link--ext::after {
content: ""; display: inline-block; inline-size: .78em; block-size: .78em; margin-inline-start: .28em; vertical-align: -.02em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8.5 7H17v8.5'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8.5 7H17v8.5'/%3E%3C/svg%3E") center / contain no-repeat;
transition: transform var(--dur-press) var(--ease-press);
}
@media (hover: hover) and (pointer: fine) {
.link--ext:hover::after { transform: translate(calc(var(--motion) * 1.5px), calc(var(--motion) * -1.5px)); }
}
@media (forced-colors: active) { :where(a:not([class])), .link { color: LinkText; background: none; text-decoration: underline; } }
.t-wordmark { font-family: var(--font-wordmark); font-weight: 900; font-size: var(--fs-wordmark); line-height: .9; letter-spacing: var(--tr-wordmark); font-synthesis: none; }
.t-display { font-family: var(--font-display); font-weight: 800; font-stretch: 112%; font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--tr-display); text-wrap: balance; }
.t-h2, .section__title { font-family: var(--font-display); font-weight: 800; font-stretch: 116%; font-size: var(--fs-h2); line-height: 1.04; letter-spacing: var(--tr-h2); text-wrap: balance; }
.t-h3 { font-family: var(--font-display); font-weight: 750; font-stretch: 112%; font-size: var(--fs-h3); line-height: 1.12; letter-spacing: var(--tr-h3); text-wrap: balance; }
.t-numeral { font-family: var(--font-display); font-weight: 800; font-stretch: 125%; font-size: var(--fs-numeral); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; }
.t-lead { font-family: var(--font-ui); font-weight: 400; font-size: var(--fs-lead); line-height: var(--lh-lead); letter-spacing: 0; text-wrap: pretty; }
.t-reading { font-family: var(--font-ui); font-weight: 400; font-size: var(--fs-reading); line-height: 1.55; letter-spacing: 0; max-inline-size: var(--measure); text-wrap: pretty; }
.t-body { font-family: var(--font-ui); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--tr-body); }
.t-small { font-family: var(--font-ui); font-weight: 450; font-size: var(--fs-small); line-height: var(--lh-small); letter-spacing: var(--tr-small); }
.t-label { font-family: var(--font-ui); font-weight: 600; font-stretch: 112%; font-size: var(--fs-label); line-height: var(--lh-label); letter-spacing: var(--tr-label); text-transform: uppercase; }
.t-mono { font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-mono); line-height: var(--lh-mono); letter-spacing: var(--tr-mono); font-variant-numeric: tabular-nums; }
.container { inline-size: min(100% - 2 * var(--page-gutter), var(--container-max)); margin-inline: auto; }
.section { position: relative; padding-block: var(--section-y); }
.section--screen { min-block-size: 100vh; min-block-size: 100svh; }
.section__head {
position: relative; isolation: isolate;                 
display: grid; gap: var(--space-4) var(--gap);
margin-block-end: var(--space-7);
text-shadow: 0 0 2px rgb(0 0 0 / .55), 0 0 .5em rgb(0 0 0 / .5), 0 1px 3px rgb(0 0 0 / .45);   
}
:where(.section__head) :where(.section__kicker, .section__title, .section__intro) { position: relative; justify-self: start; }       
.wash { position: relative; isolation: isolate; }
.section__head :is(.section__kicker, .section__intro)::before, .wash::before { --wash-fade: var(--head-wash-fade); }
.section__head .section__title::before { --wash-fade: calc(var(--head-wash-fade) * .38); }          
.section__head :is(.section__kicker, .section__title, .section__intro)::before, .wash::before {
--wash-c: color-mix(in srgb, var(--md-sys-color-surface-dim, #11140e) calc(var(--head-wash-a) * 100%), transparent);
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
border-radius: var(--wash-fade);
background: var(--wash-c);
box-shadow: 0 0 calc(var(--wash-fade) * .5) calc(var(--wash-fade) * .5) var(--wash-c);    
}
.section__kicker {
display: flex; flex-wrap: wrap; align-items: baseline; gap: .25em .9em;
font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-mono); line-height: var(--lh-label);
letter-spacing: .08em; text-transform: uppercase;
color: var(--on-photo-muted);
}
.section__kicker :where(.section__num) { color: var(--md-sys-color-primary, #acd28f); font-variant-numeric: tabular-nums lining-nums; }
.section__title { margin: 0; }
.section__intro {
margin: 0; max-inline-size: 52ch;
font-family: var(--font-ui); font-weight: 400; font-size: var(--fs-lead); line-height: var(--lh-lead);
color: var(--on-photo-muted); text-wrap: pretty;
}
@media (prefers-contrast: more) { :root { --head-wash-a: .6; } }
@media (min-width: 900px) {
.section__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
.section__kicker { grid-column: 1 / -1; }
.section__intro { justify-self: end; }
}
@media (min-width: 900px) {
.section__head--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.section__head--flip .section__kicker { justify-self: end; justify-content: flex-end; }
.section__head--flip .section__title { grid-column: 2; grid-row: 2; justify-self: end; text-align: end; }
.section__head--flip .section__intro { grid-column: 1; grid-row: 2; justify-self: start; }
}
.stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-4)); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--space-3)); }
.measure { max-inline-size: var(--measure); }
.cq { container-type: inline-size; }
}
@layer utilities {
.sr-only {
position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; border: 0;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.t-muted { color: var(--md-sys-color-on-surface-variant, #c4c8bb); }
.t-balance { text-wrap: balance; }
.t-pretty { text-wrap: pretty; }
.t-nowrap { white-space: nowrap; }
}
@layer utilities {
html:not(.js) :is(.tile__more, .stack__key-btn, [data-copy], .nav__search, .nav__seed, .dock__search) { display: none; }
html:not(.js) .tile { display: flex; flex-direction: column; align-items: stretch; }
html:not(.js) .tile__diagram { block-size: auto; }
html:not(.js) :is(.tile__open, .chip:is(button)) { pointer-events: none; cursor: default; }
html:not(.js) .tile__open:focus-visible { outline-offset: 2px; }
}
@layer utilities {
@media print {
:root { color-scheme: light; }
html, body { background: #fff; color: #000; }
body { padding-block-end: 0; min-block-size: 0; }
* { color: #000; -webkit-text-fill-color: #000; text-shadow: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
#gl, .page-bg, .nav, .dock, .skip-link, .noscript-note { display: none !important; }
.glass, .noscript-note { background: none; border: 1px solid #999; }
.glass::before, .glass:not(.chip)::after, .section__head :is(.section__kicker, .section__title, .section__intro)::before, .wash::before { display: none; }
a[href] { text-decoration: underline; background: none; }
section, .tile, .glass { break-inside: avoid; }
section, .section--screen { min-block-size: 0; }
.section { padding-block: var(--space-6); }
}
}
@layer reset, tokens, base, glass, components, sections, utilities;
@property --gl-bloom  { syntax: "<number>";     inherits: false; initial-value: 0; }
@property --gl-rim-a  { syntax: "<percentage>"; inherits: false; initial-value: 74%; }
@property --gl-rim-t  { syntax: "<length>";     inherits: false; initial-value: 2.2px; }
@property --gl-hair-a { syntax: "<percentage>"; inherits: false; initial-value: 24%; }
@property --gl-dim    { syntax: "<number>";     inherits: false; initial-value: 0; }
@layer glass {
:root {
--gl-ox: .678;
--gl-oy: .914;
}
.glass {
isolation: isolate;
--r: var(--r-lg);
border-radius: calc(var(--r) * var(--r-k));
--gl-blur: 20px;
--gl-sat: 1.45;
--gl-tint: var(--glass-tint);
--gl-scrim-k: 100%;
--gl-extra-dark: 0;
--gl-sheen: .12;
--gl-sky: .09;
--gl-dark-a: .22;
--gl-caustic: 32%;
--gl-hatch: linear-gradient(#0000, #0000);
--gl-border: 0px;
--gl-sh-x: 12px; --gl-sh-y: 16px; --gl-sh-dy: 6px; --gl-sh-blur: 34px; --gl-sh-spread: -10px; --gl-sh-k: 100%;
--gl-bloom-layer: radial-gradient(circle 240px at calc(var(--lit-x, .5) * 100%) calc(var(--lit-y, .3) * 100%),
color-mix(in srgb, var(--glass-glow) calc(var(--gl-bloom) * 180%), transparent), transparent 72%);
--gl-transitions: --gl-bloom var(--dur-fx) var(--ease-fx), --gl-rim-a var(--dur-fx) var(--ease-fx), --gl-rim-t var(--dur-fx) var(--ease-fx),
--gl-hair-a var(--dur-fx) var(--ease-fx), --gl-dim var(--dur-fx) var(--ease-fx);
transition: var(--gl-transitions);
--gl-bloom: 0; --gl-rim-a: 74%; --gl-rim-t: 2.2px; --gl-hair-a: 24%; --gl-dim: 0;
}
.glass::before, .glass::after { --gl-bloom: inherit; --gl-rim-a: inherit; --gl-rim-t: inherit; --gl-hair-a: inherit; --gl-dim: inherit; }
.glass:not(dialog, [popover]) { position: relative; }          
@supports (corner-shape: superellipse(2.3)) {
.glass, .glass::before, .glass::after { corner-shape: var(--corner-shape); }
.glass::before, .glass::after { corner-shape: inherit; }
}
.glass::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
box-sizing: border-box;
border: var(--gl-border) dashed transparent;
border-radius: inherit;
background:
var(--gl-hatch),
linear-gradient(rgb(0 0 0 / calc(var(--gl-dim) * .1)), rgb(0 0 0 / calc(var(--gl-dim) * .1))),
radial-gradient(130% 90% at calc((.5 - var(--gl-ox) * .5) * 100%) calc((.5 - var(--gl-oy) * .5) * 100%), rgb(255 255 255 / var(--gl-sheen)), transparent 62%),
linear-gradient(180deg, rgb(255 255 255 / var(--gl-sky)), rgb(255 255 255 / calc(var(--gl-sky) * .3)) 14%, transparent 34%),
linear-gradient(135deg, rgb(255 255 255 / .035), rgb(0 0 0 / .15)),
linear-gradient(rgb(0 0 0 / var(--gl-extra-dark)), rgb(0 0 0 / var(--gl-extra-dark))),
linear-gradient(var(--gl-tint), var(--gl-tint)),
linear-gradient(color-mix(in srgb, var(--glass-scrim) var(--gl-scrim-k), transparent), color-mix(in srgb, var(--glass-scrim) var(--gl-scrim-k), transparent));
-webkit-backdrop-filter: blur(var(--gl-blur)) saturate(var(--gl-sat));
backdrop-filter: blur(var(--gl-blur)) saturate(var(--gl-sat));
box-shadow:
inset calc(var(--gl-ox) * var(--gl-rim-t)) calc(var(--gl-oy) * var(--gl-rim-t)) 0 0
color-mix(in srgb, var(--glass-rim) calc(var(--gl-rim-a) * (1 - var(--gl-dim) * .45)), transparent),
inset 0 0 0 1px color-mix(in srgb, var(--glass-rim) calc(var(--gl-hair-a) * (1 - var(--gl-dim) * .45)), transparent),
inset 0 0 0 3px rgb(0 0 0 / var(--gl-dark-a)),
inset calc(var(--gl-ox) * 3px) calc(var(--gl-oy) * 3px) 9px -2px color-mix(in srgb, var(--glass-rim) 19%, transparent),
inset 0 0 18px -4px color-mix(in srgb, var(--glass-rim) 11%, transparent),
inset calc(var(--gl-ox) * -9px) calc(var(--gl-oy) * -9px) 20px -7px color-mix(in srgb, var(--glass-glow) var(--gl-caustic), transparent),
0 1px 2px color-mix(in srgb, var(--glass-shadow-tint) calc(var(--gl-sh-k) * .55), transparent),
calc(var(--gl-ox) * var(--gl-sh-x)) calc(var(--gl-oy) * var(--gl-sh-y) + var(--gl-sh-dy)) var(--gl-sh-blur) var(--gl-sh-spread)
color-mix(in srgb, var(--glass-shadow-tint) var(--gl-sh-k), transparent);
opacity: 1;
visibility: inherit;                                   
transition: opacity 280ms linear, visibility 0s linear 0s;
}
.glass::after {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
border-radius: inherit;
background: var(--gl-bloom-layer);
}
.glass[data-glass="slab"]   { --r: var(--pane-r); --gl-blur: 16px; }
.glass[data-glass="pane"]   { --r: clamp(24px, 2.8vw, 44px); --gl-blur: 15px; }
.glass[data-glass="pill"]   { --r: var(--r-full); --gl-blur: 14px; }
.glass[data-glass="chip"]   { --r: var(--r-sm); --gl-blur: 10px; --gl-sheen: .07; }
.glass[data-glass="button"] { --r: var(--r-full); --gl-blur: 12px; --gl-sheen: .075; }
.glass[data-glass="lens"]   { --r: var(--pane-r); --gl-blur: 3px; --gl-sat: 1.2; --gl-scrim-k: 0%; --gl-tint: color-mix(in srgb, var(--glass-tint) 45%, transparent); --gl-sheen: .1; }
.glass[data-glass="frost"]  {
--r: 0px; --gl-blur: 22px; --gl-sat: 1.25; --gl-scrim-k: 78%; --gl-sheen: 0; --gl-sky: 0; --gl-dark-a: 0; --gl-caustic: 0%; --gl-sh-k: 0%;
--gl-rim-a: 0%; --gl-rim-t: 0px; --gl-hair-a: 0%;
}
.glass:is(.chip, .btn, [data-glass="chip"], [data-glass="button"]):not([data-glass-mode="css"] .glass) { --gl-extra-dark: .14; }
.glass:is(.chip, .btn, [data-glass="chip"], [data-glass="button"]):not([data-glass-mode="css"] .glass)::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
.glass[data-glass-depth="2"],
.glass:is([data-glass="pill"], [data-glass="chip"], [data-glass="button"], [data-glass="lens"]):not([data-glass-depth]) {
--gl-sh-x: 5px; --gl-sh-y: 7px; --gl-sh-dy: 2px; --gl-sh-blur: 14px; --gl-sh-spread: -4px; --gl-sh-k: 90%;
}
.glass[data-glass-depth="3"],
.glass[data-glass="frost"]:not([data-glass-depth]),
.glass[data-glass-mode="css"]:not([data-glass-depth]) {
--gl-sh-x: 20px; --gl-sh-y: 26px; --gl-sh-dy: 10px; --gl-sh-blur: 58px; --gl-sh-spread: -14px; --gl-sh-k: 100%;
--gl-blur: 20px; --gl-extra-dark: .16; --gl-rim-a: 82%;
}
.glass[data-glass="frost"][data-glass-depth="3"], .glass[data-glass="frost"]:not([data-glass-depth]) { --gl-sh-k: 0%; --gl-rim-a: 0%; --gl-extra-dark: 0; }
html.is-scrolling .glass { --gl-transitions: visibility 0s; }
@media (hover: hover) and (pointer: fine) {
.glass:where(a[href], button, [role="button"], [role="tab"], [role="option"], summary, [tabindex]:not([tabindex="-1"])):hover:not(:disabled, [aria-disabled="true"]) {
--gl-bloom: var(--glass-bloom-hover, .2); --gl-rim-a: 92%; --gl-hair-a: 36%;
}
}
.glass[data-lit] { --gl-bloom: var(--glass-bloom-focus, .3); --gl-rim-a: 100%; --gl-rim-t: 3px; --gl-hair-a: 44%; }
:is([data-lit-within], [data-has-lit]) :is(.glass, [data-litable]):not([data-lit], [data-lit] *) { --gl-dim: 1; }
.glass:focus-visible { --gl-bloom: var(--glass-bloom-focus, .3); --gl-rim-a: 100%; --gl-rim-t: 2.8px; --gl-hair-a: 46%; }
.glass[data-role="open"] { --gl-tint: var(--glass-tint-strong); --gl-rim-a: 100%; --gl-rim-t: 3.4px; --gl-hair-a: 48%; }
.glass[data-role="mini"] { --r: var(--r-lg); --gl-blur: 16px; --gl-sh-x: 6px; --gl-sh-y: 9px; --gl-sh-dy: 3px; --gl-sh-blur: 18px; --gl-sh-spread: -6px; }
.glass[aria-pressed="true"], .glass[aria-expanded="true"]:not([data-role]) {
--gl-tint: var(--glass-tint-strong); --gl-rim-a: 100%; --gl-rim-t: 3.4px; --gl-hair-a: 52%; --gl-dark-a: .3;
}
.glass[data-glass="chip"][aria-pressed="true"] { --r: var(--r-full); }
.glass:is(a[href], button, [role="button"], summary):active:not(:disabled, [aria-disabled="true"]) {
--gl-bloom: var(--glass-bloom-pressed, .3); --gl-rim-t: 1.1px; --gl-dark-a: .36; --gl-hair-a: 30%;
--gl-sh-x: 2px; --gl-sh-y: 3px; --gl-sh-dy: 1px; --gl-sh-blur: 6px; --gl-sh-spread: -2px;
}
.glass[data-status="proposed"] {
--gl-blur: 34px; --gl-sat: 1.1; --gl-border: 1.5px; --gl-rim-t: 0px; --gl-rim-a: 0%; --gl-hair-a: 0%; --gl-sheen: .03; --gl-sky: .03; --gl-caustic: 6%; --gl-extra-dark: .2;
--gl-hatch: repeating-linear-gradient(135deg, rgb(255 255 255 / .075) 0 1px, transparent 1px 9px),
linear-gradient(rgb(255 255 255 / .03), rgb(255 255 255 / .03));
}
.glass[data-status="proposed"]::before { border-color: color-mix(in srgb, var(--glass-rim) 58%, transparent); }
.glass[data-status="proposed"][data-lit] { --gl-rim-t: 0px; --gl-hair-a: 0%; }
.glass[data-status="proposed"][data-lit]::before { border-color: var(--glass-rim); }
.glass[data-animating] { transition: none; }
.glass:is(button, a, [role="button"]):disabled, .glass[aria-disabled="true"] {
--gl-rim-a: 38%; --gl-hair-a: 12%; --gl-bloom: 0;
color: color-mix(in srgb, currentColor calc(var(--md-sys-state-disabled-content-opacity, .38) * 100%), transparent);   
}
dialog.glass, [popover].glass { color: var(--md-sys-color-on-surface, #e1e4d9); }
dialog[data-glass-mode="css"]::backdrop { background: rgb(0 0 0 / .32); }
[popover][data-glass-mode="css"]::backdrop { background: transparent; }
@media (prefers-contrast: more) {
.glass { --gl-hair-a: 70%; --gl-dark-a: .42; --gl-extra-dark: .12; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.glass::before { background: var(--gl-hatch), linear-gradient(var(--md-sys-color-surface-container-high, #282b24), var(--md-sys-color-surface-container-high, #282b24)); }
}
@media (prefers-reduced-transparency: reduce) {
.glass::before,
html.gl-on:not(.gl-lost) .glass:not([data-glass-mode="css"], [data-glass-mode="css"] .glass)::before {
-webkit-backdrop-filter: none; backdrop-filter: none;
background: var(--gl-hatch), linear-gradient(var(--md-sys-color-surface-container-high, #282b24), var(--md-sys-color-surface-container-high, #282b24));
opacity: 1; visibility: inherit; transition: none;
}
.glass[data-glass="frost"]::before { background: var(--md-sys-color-surface, #11140e); }
}
@media (forced-colors: active) {
.glass { background: Canvas; color: CanvasText; border: 1px solid CanvasText; --gl-transitions: none; transition: none; }
.glass::before, .glass:not(.chip)::after { display: none; }          
.glass[data-status="proposed"] { border-style: dashed; }
.glass:is([aria-pressed="true"], [aria-expanded="true"]:not([data-role]), [data-role="open"]):not(:focus-visible) { outline: 3px solid Highlight; outline-offset: -5px; }
.glass[data-glass="frost"] { border: 0; }
}
html.gl-on:not(.gl-lost) .glass:not([data-glass-mode="css"], [data-glass-mode="css"] .glass, [data-glass-skipped])::before {
opacity: 0; visibility: hidden;
transition: opacity 280ms linear, visibility 0s linear 280ms;
}
}
@property --g-radius     { syntax: "<length>"; inherits: false; initial-value: 24px; }
@property --g-n          { syntax: "<number>"; inherits: false; initial-value: 5; }
@property --g-bevel      { syntax: "<length>"; inherits: false; initial-value: 20px; }
@property --g-thickness  { syntax: "<length>"; inherits: false; initial-value: 36px; }
@property --g-ior        { syntax: "<number>"; inherits: false; initial-value: 1.5; }
@property --g-dispersion { syntax: "<number>"; inherits: false; initial-value: .3; }
@property --g-frost      { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --g-tint       { syntax: "<color>";  inherits: false; initial-value: transparent; }
@property --g-depth      { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --g-tilt       { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --g-shadow     { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --g-rim        { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --g-scrim      { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --g-warp       { syntax: "<number>"; inherits: false; initial-value: .35; }
@property --g-spec       { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --g-body       { syntax: "<number>"; inherits: false; initial-value: 1; }
@layer glass {
.glass {
--gb-bevel: 22px; --gb-thick: 40px; --gb-ior: 1.5; --gb-disp: .3; --gb-frost: .1; --gb-shadow: 1; --gb-scrim: 1; --gb-rim: 1; --gb-warp: .35; --gb-spec: 1; --gb-body: 1;
--gd-disp: 1; --gd-shadow: 1;
--gm-bevel: 1; --gm-thick: 1; --gm-rim: 1; --gm-shadow: 1; --gm-frost: 1;
--g-radius: var(--r);
--g-n: 5;
--g-bevel: min(calc(var(--gb-bevel) * var(--gm-bevel)), calc(var(--r) * .9));
--g-thickness: calc(var(--gb-thick) * var(--gm-thick));
--g-ior: var(--gb-ior);
--g-dispersion: calc(var(--gb-disp) * var(--gd-disp));
--g-frost: calc(var(--gb-frost) * var(--gm-frost));
--g-tint: color-mix(in srgb, var(--glass-tint) 40%, transparent);   
--g-depth: 1;
--g-tilt: 0;
--g-shadow: calc(var(--gb-shadow) * var(--gd-shadow) * var(--gm-shadow));
--g-rim: calc(var(--gb-rim) * var(--gm-rim));
--g-scrim: var(--gb-scrim);
--g-warp: var(--gb-warp);
--g-spec: var(--gb-spec);
--g-body: var(--gb-body);
}
.glass[data-glass="slab"]   { --gb-bevel: 36px; --gb-thick: 56px; --gb-frost: .1;  --gb-spec: 1;  --gb-warp: .5; --gb-rim: 1.5; }
.glass[data-glass="pane"]   { --gb-bevel: 34px; --gb-thick: 52px; --gb-frost: .1;  --gb-spec: 1;  --gb-warp: .5; --gb-rim: 1.5; }
.glass[data-glass="pill"]   { --gb-bevel: 12px; --gb-thick: 28px; --gb-frost: .05; --gb-shadow: .9; --gb-warp: .15; --gb-rim: 1.2; }
.glass[data-glass="chip"]   { --gb-bevel: 9px;  --gb-thick: 22px; --gb-frost: .03; --gb-shadow: .8; --gb-warp: .1; --gb-rim: 1.2; }
.glass[data-glass="button"] { --gb-bevel: 10px; --gb-thick: 24px; --gb-frost: .03; --gb-shadow: .85; --gb-warp: .1; --gb-rim: 1.2; }
.glass[data-glass="lens"]   { --gb-bevel: 30px; --gb-thick: 64px; --gb-frost: 0; --gb-disp: .5; --gb-ior: 1.45; --gb-scrim: 0; --gb-warp: .6; }
.glass[data-glass="frost"]  { --gb-bevel: 16px; --gb-thick: 30px; --gb-frost: .55; --gb-disp: .1; --gb-shadow: .7; --gb-scrim: 1; --gb-spec: .6; }
.glass[data-glass="wordmark"], [data-glass="wordmark"] {
--g-radius: 0px; --g-bevel: 14px; --g-thickness: 64px; --g-ior: 1.55; --g-dispersion: .5; --g-frost: 0;
--g-tint: color-mix(in srgb, var(--glass-rim) 50%, transparent);
--g-depth: 2; --g-shadow: .35; --g-rim: 1.3; --g-scrim: 0; --g-tilt: 0;
}
.glass[data-glass-depth="2"],
.glass:is([data-glass="pill"], [data-glass="chip"], [data-glass="button"], [data-glass="lens"]):not([data-glass-depth]) { --g-depth: 2; --gd-disp: .8; --gd-shadow: .95; }
.glass[data-glass-depth="3"],
.glass[data-glass="frost"]:not([data-glass-depth]) { --g-depth: 3; --gd-disp: .6; --gd-shadow: 1.1; }
.glass[data-glass-depth="1"] { --g-depth: 1; --gd-disp: 1; --gd-shadow: 1; }
.glass[data-lit] { --gm-rim: 1.5; --gm-bevel: 1.06; }
.glass[data-lit]:is([data-glass="slab"], [data-glass="pane"]) { --g-tilt: 2; }
.glass[data-role="open"] { --gm-thick: 1.2; --gm-bevel: 1.12; --gm-rim: 1.2; --g-tint: var(--glass-tint-strong); }
.glass[data-role="mini"] { --gm-thick: .8; }
.glass[aria-pressed="true"], .glass[aria-expanded="true"]:not([data-role]) { --gm-bevel: 1.6; --gm-thick: 1.3; --gm-rim: 1.3; --g-tint: var(--glass-tint-strong); }
.glass[data-status="proposed"] { --gm-frost: 4.5; --gm-thick: .72; --gm-rim: .45; }
.glass[data-status="proposed"][data-lit] { --gm-rim: .6; }
@media (hover: hover) and (pointer: fine) {
.glass:where(a[href], button, [role="button"], [role="tab"], [role="option"], summary, [tabindex]:not([tabindex="-1"])):hover:not(:disabled, [aria-disabled="true"]) {
--gm-rim: 1.3; --gm-bevel: 1.08; --g-tilt: 1.4;
}
}
.glass:where(a[href], button, [role="button"], [role="tab"], [role="option"], summary, [tabindex]:not([tabindex="-1"])):active:not(:disabled),
.glass:has(.tile__open:active) { --gm-bevel: .6; --gm-thick: .85; --gm-shadow: .6; }
.glass:has(:focus-visible), .glass:focus-visible { --gm-rim: 1.3; }
html.gl-on .glass[data-glass-skipped][data-glass-skipped][data-glass-skipped]::before {
opacity: 1; visibility: visible; transition: opacity 200ms linear, visibility 0s linear 0s;
}
html.gl-on:not(.gl-lost) .glass[data-glass-over][data-glass-over][data-glass-over]:not([data-glass-skipped], [data-glass-mode="css"])::before {
inset: calc(var(--g-bevel, 12px) * .7);
border-radius: max(0px, calc(var(--g-radius, 24px) - var(--g-bevel, 12px) * .7));
border-width: 0; box-shadow: none;
background: color-mix(in srgb, var(--glass-scrim) 18%, transparent);
-webkit-backdrop-filter: blur(14px) saturate(1.05); backdrop-filter: blur(14px) saturate(1.05);
opacity: 1; visibility: inherit; transition: none;
}
}
@layer reset, tokens, base, glass, components, sections, utilities;
@layer components {
.g4, .btn, .chip, .pill, .tag, .status, .kbd, .field, .pane { border-radius: calc(var(--r, var(--r-md)) * var(--r-k)); }
@supports (corner-shape: superellipse(2.3)) {
.g4, .btn, .chip, .pill, .tag, .status, .kbd, .field, .pane { corner-shape: var(--corner-shape); }
.btn::before, .btn::after, .chip::before, .chip::after { corner-shape: inherit; }
}
.icon { --icon-sw: 1.75; inline-size: 1.25em; block-size: 1.25em; flex: none; color: inherit; vertical-align: -.26em; pointer-events: none; }
.icon--sm { inline-size: 1em; block-size: 1em; vertical-align: -.17em; }
.icon--lg { inline-size: 1.75em; block-size: 1.75em; vertical-align: -.4em; }
.btn {
--r: var(--r-full);
position: relative; isolation: isolate;
display: inline-flex; align-items: center; justify-content: center; gap: .6em;
min-block-size: var(--hit); padding: .5em 1.4em;
font-family: var(--font-ui); font-weight: 650; font-stretch: 108%; font-size: var(--fs-small); line-height: 1.2; letter-spacing: .012em;
text-decoration: none; white-space: nowrap; text-align: center;
color: var(--md-sys-color-on-surface, #e1e4d9);
cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation;
-webkit-appearance: none; appearance: none;
transition: transform var(--dur-press) var(--ease-press), box-shadow var(--dur-fx) var(--ease-fx), color var(--dur-fx) var(--ease-fx), var(--gl-transitions, visibility 0s);
}
.btn > .icon:first-child:not(:only-child) { margin-inline-start: -.3em; }
.btn > .icon:last-child:not(:only-child) { margin-inline-end: -.3em; }
.btn:active { transform: translateY(calc(var(--motion) * 1px)); }
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; transform: none; color: color-mix(in srgb, currentColor calc(var(--md-sys-state-disabled-content-opacity, .38) * 100%), transparent); }
.btn--lg { min-block-size: 56px; padding-inline: 1.8em; font-size: var(--fs-body); }
.btn--icon { inline-size: var(--hit); block-size: var(--hit); padding: 0; flex: none; }
.btn--icon.btn--lg { inline-size: 56px; block-size: 56px; }
.btn:not(.glass)::after {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
border-radius: inherit;
background: var(--btn-state, currentColor);
opacity: 0;
transition: opacity var(--dur-fx) var(--ease-fx);
}
@media (hover: hover) and (pointer: fine) {
.btn:not(.glass):hover:not(:disabled, [aria-disabled="true"])::after { opacity: var(--btn-state-hover, var(--md-sys-state-hover-opacity, .08)); }
}
.btn:not(.glass):focus-visible::after { opacity: var(--btn-state-focus, var(--md-sys-state-focus-opacity, .12)); }
.btn:not(.glass):active:not(:disabled, [aria-disabled="true"])::after { opacity: var(--btn-state-press, var(--md-sys-state-pressed-opacity, .12)); }
.btn--primary {
color: var(--md-sys-color-on-primary, #1a3705);
background:
linear-gradient(180deg, rgb(255 255 255 / .26), rgb(255 255 255 / 0) 55%),
var(--md-sys-color-primary, #acd28f);
box-shadow:
var(--focus-halo, 0 0 #0000),
inset calc(var(--gl-ox, .68) * 1.3px) calc(var(--gl-oy, .9) * 1.3px) 0 0 rgb(255 255 255 / .6),
inset calc(var(--gl-ox, .68) * -1px) calc(var(--gl-oy, .9) * -1.6px) 0 0 rgb(0 0 0 / .2),
0 1px 2px rgb(0 0 0 / .4),
0 12px 24px -10px color-mix(in srgb, var(--md-sys-color-primary, #acd28f) 60%, transparent);
--btn-state: radial-gradient(circle at calc(var(--lit-x, .5) * 100%) calc(var(--lit-y, .25) * 100%), rgb(255 255 255 / .7), transparent 72%);
--btn-state-hover: .5; --btn-state-focus: .7; --btn-state-press: .9;
}
.btn--primary:active:not(:disabled, [aria-disabled="true"]) {
box-shadow:
var(--focus-halo, 0 0 #0000),
inset calc(var(--gl-ox, .68) * .6px) calc(var(--gl-oy, .9) * .6px) 0 0 rgb(255 255 255 / .42),
inset 0 -1px 2px 0 rgb(0 0 0 / .3),
0 0 1px rgb(0 0 0 / .5),
0 3px 8px -4px color-mix(in srgb, var(--md-sys-color-primary, #acd28f) 50%, transparent);
}
.btn--primary:disabled, .btn--primary[aria-disabled="true"] { background: color-mix(in srgb, var(--md-sys-color-on-surface, #e1e4d9) 12%, transparent); box-shadow: var(--focus-halo, 0 0 #0000); }
.btn--secondary:not(.glass) {
background: color-mix(in srgb, var(--md-sys-color-surface-container-high, #282b24) 72%, transparent);
box-shadow: var(--focus-halo, 0 0 #0000), inset 0 0 0 1px color-mix(in srgb, var(--md-sys-color-outline, #8e9286) 70%, transparent), inset 0 1px 0 rgb(255 255 255 / .12);
}
.btn--ghost {
--r: var(--r-md);
padding-inline: .5em;
background-image:
linear-gradient(currentColor, currentColor),
linear-gradient(color-mix(in srgb, currentColor 34%, transparent), color-mix(in srgb, currentColor 34%, transparent));
background-repeat: no-repeat;
background-size: 0% 1.5px, 100% 1px;
background-position: 100% calc(50% + .78em), 0 calc(50% + .78em);
background-clip: content-box;
padding-block: .5em;
transition: background-size var(--dur-link) var(--ease-link), background-position var(--dur-link) var(--ease-link), transform var(--dur-press) var(--ease-press), color var(--dur-fx) var(--ease-fx);
}
@media (hover: hover) and (pointer: fine) {
.btn--ghost:hover { background-size: 100% 1.5px, 100% 1px; background-position: 0 calc(50% + .78em), 0 calc(50% + .78em); }
}
.btn--ghost:focus-visible, .btn--ghost:active { background-size: 100% 1.5px, 100% 1px; background-position: 0 calc(50% + .78em), 0 calc(50% + .78em); }
.chip {
--r: var(--r-sm);
--chip-h: 40px;
--chip-glyph: none;
position: relative; isolation: isolate;
display: inline-flex; align-items: center; gap: .5em;
min-block-size: var(--chip-h);
padding: .35em 1.05em .35em calc(1em + .74em + .55em);
font-family: var(--font-ui); font-weight: 550; font-stretch: 104%; font-size: var(--fs-small); line-height: 1.2; letter-spacing: .008em;
white-space: nowrap; text-align: start;
color: var(--md-sys-color-on-surface, #e1e4d9);
cursor: default; user-select: none; -webkit-user-select: none; touch-action: manipulation;
transition: transform var(--dur-press) var(--ease-press), color var(--dur-fx) var(--ease-fx), var(--gl-transitions, visibility 0s);
}
button.chip, a.chip, .chip[role="button"] { cursor: pointer; }
button.chip:active { transform: translateY(calc(var(--motion) * 1px)); }
@media (pointer: coarse) { .chip { --chip-h: var(--hit); } }
.chip::after {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
border-radius: inherit;
background: var(--chip-glyph), var(--gl-bloom-layer, none);
}
.chip[data-state="used"] {
--chip-glyph: radial-gradient(circle closest-side, currentColor calc(100% - 1px), transparent) 1em 50% / .74em .74em no-repeat;
}
.chip[data-state="exploring"] {
--chip-glyph:
radial-gradient(circle .37em at 100% 50%, currentColor calc(100% - 1px), transparent) 1em 50% / .37em .74em no-repeat,
radial-gradient(circle closest-side, transparent calc(100% - 2.4px), currentColor calc(100% - 1.4px), currentColor calc(100% - 1px), transparent) 1em 50% / .74em .74em no-repeat;
}
.chip[data-state="learning"] {
--chip-glyph: radial-gradient(circle closest-side, transparent calc(100% - 2.4px), currentColor calc(100% - 1.4px), currentColor calc(100% - 1px), transparent) 1em 50% / .74em .74em no-repeat;
}
.chip:not([data-state]) { padding-inline: 1.05em; }
.chip:not(.glass) {
background: color-mix(in srgb, var(--md-sys-color-surface-container-highest, #33362f) 58%, transparent);
box-shadow: var(--focus-halo, 0 0 #0000), inset 0 0 0 1px color-mix(in srgb, var(--md-sys-color-outline, #8e9286) 55%, transparent);
}
.chip:not(.glass)[aria-pressed="true"] { --r: var(--r-full); background: var(--md-sys-color-secondary-container, #3f4a35); color: var(--md-sys-color-on-secondary-container, #d9e7ca); }
.pill {
--r: var(--r-full);
position: relative; isolation: isolate;
display: inline-flex; align-items: center; gap: .55em;
min-block-size: 36px; padding: .3em 1.15em;
font-family: var(--font-ui); font-weight: 550; font-stretch: 106%; font-size: var(--fs-small); line-height: 1.2; letter-spacing: .008em;
white-space: nowrap; text-decoration: none;
color: var(--md-sys-color-on-surface, #e1e4d9);
transition: transform var(--dur-press) var(--ease-press), var(--gl-transitions, visibility 0s);
}
a.pill, button.pill { cursor: pointer; }
.pill:not(.glass) {
background: color-mix(in srgb, var(--md-sys-color-surface-container-highest, #33362f) 52%, transparent);
box-shadow: var(--focus-halo, 0 0 #0000), inset 0 0 0 1px color-mix(in srgb, var(--md-sys-color-outline, #8e9286) 55%, transparent);
}
.tag {
--r: var(--r-xs);
display: inline-flex; align-items: center;
padding: .1em .62em; min-block-size: 1.9em;
font-family: var(--font-mono); font-weight: 450; font-size: var(--fs-mono); line-height: 1.3; letter-spacing: .01em; white-space: nowrap;
color: var(--md-sys-color-on-surface-variant, #c4c8bb);
background: color-mix(in srgb, var(--md-sys-color-surface-container-highest, #33362f) 40%, transparent);
box-shadow: var(--focus-halo, 0 0 #0000), inset 0 0 0 1px color-mix(in srgb, var(--md-sys-color-outline-variant, #44483e) 90%, transparent);
}
.status {
--r: var(--r-full);
--status-mark: .72em;
display: inline-flex; align-items: center; gap: .6em;
min-block-size: 30px; padding: .22em .95em .22em .8em;
border: 1px solid transparent;
font-family: var(--font-ui); font-weight: 620; font-stretch: 106%; font-size: max(var(--fs-label), .8125rem); line-height: 1.2; letter-spacing: .02em; white-space: nowrap;
color: var(--md-sys-color-on-surface, #e1e4d9);
background: color-mix(in srgb, var(--md-sys-color-surface-container-highest, #33362f) 64%, transparent);
box-shadow: var(--focus-halo, 0 0 #0000), inset 0 0 0 1px color-mix(in srgb, var(--md-sys-color-outline, #8e9286) 50%, transparent);
}
.status::before {
content: ""; flex: none; display: block; box-sizing: border-box;
inline-size: var(--status-mark); block-size: var(--status-mark);
border-radius: calc(3px * var(--r-k));
background: currentColor;
}
@supports (corner-shape: superellipse(2.3)) { .status::before { corner-shape: var(--corner-shape); } }
.status[data-status="built-partial"]::before  { background: linear-gradient(90deg, currentColor 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px currentColor; }
.status[data-status="built-tested"]::before   { background: currentColor; }
.status[data-status="built-terminal"]::before { inline-size: calc(var(--status-mark) * .5); block-size: calc(var(--status-mark) * 1.2); border-radius: calc(1.5px * var(--r-k)); background: currentColor; }
.status[data-status="proposed"] {
border: 1px dashed color-mix(in srgb, var(--md-sys-color-on-surface, #e1e4d9) 70%, transparent);
background:
repeating-linear-gradient(135deg, rgb(255 255 255 / .07) 0 1px, transparent 1px 7px),
color-mix(in srgb, var(--md-sys-color-surface-container-highest, #33362f) 30%, transparent);
box-shadow: var(--focus-halo, 0 0 #0000);
}
.status[data-status="proposed"]::before { background: transparent; border: 1.5px dashed currentColor; }
kbd, .kbd {
--r: var(--r-xs);
display: inline-flex; align-items: center; justify-content: center;
min-inline-size: 1.95em; block-size: 1.95em; padding-inline: .5em;
font-family: var(--font-mono); font-weight: 500; font-size: max(var(--fs-mono), .8125rem); line-height: 1; letter-spacing: .02em; white-space: nowrap;
color: var(--md-sys-color-on-surface-variant, #c4c8bb);
background: linear-gradient(180deg, rgb(255 255 255 / .15), rgb(255 255 255 / .05));
box-shadow:
var(--focus-halo, 0 0 #0000),
inset 0 1px 0 rgb(255 255 255 / .3),
inset 0 0 0 1px rgb(255 255 255 / .09),
0 1px 0 1px rgb(0 0 0 / .55),
0 4px 6px -2px rgb(0 0 0 / .45);
transition: transform var(--dur-press) var(--ease-press), box-shadow var(--dur-fx) var(--ease-fx), background-color var(--dur-fx) var(--ease-fx);
}
kbd:active, .kbd:active, .kbd[data-pressed] {
transform: translateY(calc(var(--motion) * 1px));
background: linear-gradient(180deg, rgb(255 255 255 / .26), rgb(255 255 255 / .12));
color: var(--md-sys-color-on-surface, #e1e4d9);
box-shadow:
var(--focus-halo, 0 0 #0000),
inset 0 1px 0 rgb(255 255 255 / .16),
inset 0 0 0 1px rgb(255 255 255 / .09),
0 0 0 1px rgb(0 0 0 / .55),
0 1px 2px rgb(0 0 0 / .4);
}
@supports (corner-shape: superellipse(2.3)) { kbd { corner-shape: var(--corner-shape); } }
kbd { border-radius: calc(var(--r-xs) * var(--r-k)); }
.field {
--r: var(--r-full);
position: relative;
display: flex; align-items: center; gap: .75em;
min-block-size: 52px; padding-inline: 1.1em 1em;
color: var(--md-sys-color-on-surface, #e1e4d9);
background: linear-gradient(rgb(0 0 0 / .30), rgb(0 0 0 / .22));
box-shadow:
var(--focus-halo, 0 0 #0000),
inset 0 2px 5px rgb(0 0 0 / .5),
inset 0 0 0 1px rgb(255 255 255 / .1),
0 1px 0 rgb(255 255 255 / .07);
cursor: text;
}
.field > .icon { color: var(--md-sys-color-on-surface-variant, #c4c8bb); }
.field__input {
flex: 1 1 auto; min-inline-size: 0; min-block-size: var(--hit); padding: 0;
border: 0; background: none; color: inherit;
font-family: var(--font-ui); font-weight: 450; font-size: var(--fs-body); line-height: 1.3;
caret-color: var(--glass-accent, #8bd457);
-webkit-appearance: none; appearance: none;
}
.field__input:focus, .field__input:focus-visible { outline: none; box-shadow: none; }
.field__input::-webkit-search-cancel-button { display: none; }
.field:has(.field__input:focus-visible) {
outline: var(--ring-w) solid var(--glass-accent, #8bd457); outline-offset: var(--ring-gap);
box-shadow:
0 0 0 calc(var(--ring-gap) + var(--ring-w) + 1px) color-mix(in srgb, color-mix(in srgb, var(--md-sys-color-surface-dim, #11140e) 60%, #000) 88%, transparent),
inset 0 2px 5px rgb(0 0 0 / .5), inset 0 0 0 1px rgb(255 255 255 / .16), 0 1px 0 rgb(255 255 255 / .07);
}
.divider {
display: block; border: 0; margin: var(--space-5) 0; block-size: 1px; inline-size: 100%; flex: none;
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--md-sys-color-outline, #8e9286) 58%, transparent) 10% 90%, transparent);
}
.divider--v {
margin: 0 var(--space-4); inline-size: 1px; block-size: auto; align-self: stretch;
background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--md-sys-color-outline, #8e9286) 58%, transparent) 10% 90%, transparent);
}
.pane { padding: var(--pad); min-inline-size: 0; color: var(--md-sys-color-on-surface, #e1e4d9); }
.pane--tight { padding: calc(var(--pad) * .6); }
.noscript-note {
display: block; position: relative; isolation: isolate;
inline-size: min(100% - 2 * var(--page-gutter), var(--container-max)); margin: calc(var(--nav-space) + var(--gap)) auto 0; 
padding: .7em 1.2em;
font: 450 var(--fs-small) / var(--lh-small) var(--font-ui); letter-spacing: var(--tr-small); text-align: center; text-wrap: balance;
color: var(--md-sys-color-on-surface, #e1e4d9);
border-radius: calc(var(--r-md) * var(--r-k));
background: linear-gradient(rgb(255 255 255 / .07), transparent 45%), linear-gradient(var(--glass-tint), var(--glass-tint)), linear-gradient(var(--glass-scrim), var(--glass-scrim));
-webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
box-shadow: inset 1px 1px 0 color-mix(in srgb, var(--glass-rim) 55%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--glass-rim) 22%, transparent),
inset 0 0 0 3px rgb(0 0 0 / .2), 0 8px 24px -10px color-mix(in srgb, var(--glass-shadow-tint) 90%, transparent);
}
@supports (corner-shape: superellipse(2.3)) { .noscript-note { corner-shape: var(--corner-shape); } }
@media (forced-colors: active) {
.btn, .chip, .pill, .tag, .status, kbd, .kbd, .field, .noscript-note { border: 1px solid ButtonText; box-shadow: none; }
.btn--primary, kbd, .kbd, .field, .noscript-note, .status[data-status="proposed"] { background-image: none; }
.btn--ghost { border-color: transparent; }
.btn:not(.glass)::after { display: none; }
.chip::after { forced-color-adjust: none; background: var(--chip-glyph); }          
.status[data-status="proposed"] { border-style: dashed; }
.status::before { forced-color-adjust: none; background: CanvasText; }
.status[data-status="built-partial"]::before { background: linear-gradient(90deg, CanvasText 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px CanvasText; }
.status[data-status="proposed"]::before { background: transparent; border-color: CanvasText; }
.btn:is(a, button):hover:not(:disabled, [aria-disabled="true"]), .chip:is(a, button):hover { border-color: Highlight; }
.btn:disabled, .btn[aria-disabled="true"], .chip[aria-disabled="true"] { color: GrayText; border-color: GrayText; }
.btn--primary[aria-pressed="true"], .chip[aria-pressed="true"] { outline: 3px solid Highlight; outline-offset: -5px; }
.btn--primary[aria-pressed="true"]:focus-visible, .chip[aria-pressed="true"]:focus-visible { outline-offset: var(--ring-gap); }
.nav__ws-link[aria-current="true"] .nav__ws-num, .nav__ws-pill::after, .dock__link[aria-current="true"] { text-decoration: underline 2px; text-underline-offset: .2em; }
.nav__ws-pill { outline: 2px solid Highlight; outline-offset: -2px; }
}
}
@layer sections {
.nav {
position: fixed;
inset: 0 0 auto 0;
z-index: var(--z-nav);
padding: var(--nav-top) var(--page-gutter) 0;
pointer-events: none;                      
}
.nav__bar,
.dock { pointer-events: auto; }
.nav__logo,
.nav__link,
.nav__ws-link,
.nav__ws-pill,
.nav__search,
.nav__seed,
.nav__ws-name,
.dock__link,
.dock__search {
border-radius: calc(var(--r, var(--r-sm)) * var(--r-k, 1));
corner-shape: var(--corner-shape);
}
.nav__frame {
container: nav / inline-size;
width: min(100%, var(--container-max));
margin-inline: auto;
}
.nav__bar {
--r: var(--r-full);
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
column-gap: var(--space-4);
width: 100%;
height: var(--nav-h);
padding-inline: var(--space-2);
color: var(--md-sys-color-on-surface);
}
.nav__start {
display: flex;
align-items: center;
gap: var(--space-1);
justify-self: start;
min-width: 0;
}
.nav__tools {
display: flex;
align-items: center;
gap: var(--space-2);
justify-self: end;
min-width: 0;
}
.nav__logo {
--r: var(--r-full);
display: grid;
place-items: center;
flex: none;
width: var(--hit);
height: var(--hit);
color: var(--md-sys-color-on-surface);
transition: background-color var(--dur-fx) var(--ease-fx);
}
.nav__logo-mark { width: 26px; height: 26px; display: block; }
@media (hover: hover) and (pointer: fine) {
.nav__logo:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent); }
}
.nav__logo:active { background: color-mix(in srgb, var(--md-sys-color-on-surface) 16%, transparent); }
.nav__links { display: flex; align-items: center; gap: 0; }
.nav__link {
--r: var(--r-sm);
position: relative;
display: inline-flex;
align-items: center;
height: 36px;
padding-inline: var(--space-3);
font-family: var(--font-ui);
font-size: var(--fs-small);
font-weight: 500;
line-height: 1;
letter-spacing: var(--tr-small);
color: var(--md-sys-color-on-surface-variant);
text-decoration: none;
transition: color var(--dur-fx) var(--ease-fx);
}
.nav__link::after {
content: "";
position: absolute;
inset-inline: var(--space-3);
bottom: 7px;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--dur-link) var(--ease-link);
}
.nav__link[aria-current="true"] { color: var(--md-sys-color-on-surface); }
.nav__link[aria-current="true"]::after {
height: 2px;
background: var(--glass-accent, currentColor);
transform: scaleX(1);
}
@media (hover: hover) and (pointer: fine) {
.nav__link:hover { color: var(--md-sys-color-on-surface); }
.nav__link:hover::after { transform: scaleX(1); }
}
.nav__link:active { color: var(--md-sys-color-on-surface); }
.nav__ws {
--ws-size: 32px;
--ws-x: 0px;
--ws-w: var(--ws-size);
position: relative;
display: flex;
align-items: center;
gap: 2px;
margin: 0;
padding: 0;
list-style: none;
}
.nav__ws-item { display: block; margin: 0; padding: 0; }
.nav__ws-link {
--r: var(--r-full);
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: var(--ws-size);
height: var(--ws-size);
font-family: var(--font-mono);
font-size: var(--fs-label);
font-weight: 500;
line-height: 1;
font-variant-numeric: tabular-nums;
color: var(--md-sys-color-on-surface-variant);
text-decoration: none;
transition: color var(--dur-fx) var(--ease-fx), background-color var(--dur-fx) var(--ease-fx);
}
.nav__ws-num { display: block; }
@media (hover: hover) and (pointer: fine) {
.nav__ws-link:hover { color: var(--md-sys-color-on-surface); background: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent); }
}
.nav__ws-link:active { background: color-mix(in srgb, var(--md-sys-color-on-surface) 16%, transparent); }
.nav__ws-link[data-visited]:not([aria-current="true"])::after {
content: "";
position: absolute;
left: 50%;
bottom: 4px;
width: 3px;
height: 3px;
margin-left: -1.5px;
border-radius: 50%;
background: currentColor;
opacity: .75;
}
.nav__ws-pill {
--r: var(--r-full);
position: absolute;
z-index: 2;
left: 0;
top: 50%;
display: grid;
place-items: center;
width: var(--ws-size);
height: var(--ws-size);
margin-top: calc(var(--ws-size) / -2);
translate: calc(var(--ws-x) + (var(--ws-w) - var(--ws-size)) / 2) 0;   
font-family: var(--font-mono);
font-size: var(--fs-label);
font-weight: 500;
line-height: 1;
font-variant-numeric: tabular-nums;
color: var(--md-sys-color-on-primary);
background: var(--md-sys-color-primary);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--md-sys-color-on-primary) 24%, transparent), 0 2px 10px color-mix(in srgb, var(--glass-accent, var(--md-sys-color-primary)) 40%, transparent);
pointer-events: none;
}
.nav__ws:has([data-ws-index="1"][aria-current="true"]) .nav__ws-pill::after { content: "1"; }
.nav__ws:has([data-ws-index="2"][aria-current="true"]) .nav__ws-pill::after { content: "2"; }
.nav__ws:has([data-ws-index="3"][aria-current="true"]) .nav__ws-pill::after { content: "3"; }
.nav__ws:has([data-ws-index="4"][aria-current="true"]) .nav__ws-pill::after { content: "4"; }
.nav__ws:has([data-ws-index="5"][aria-current="true"]) .nav__ws-pill::after { content: "5"; }
.nav__ws:has([data-ws-index="6"][aria-current="true"]) .nav__ws-pill::after { content: "6"; }
.nav__ws-link[aria-current="true"] {
color: var(--md-sys-color-on-primary);
background: var(--md-sys-color-primary);
}
.nav__ws:has(.nav__ws-pill) .nav__ws-link[aria-current="true"] {
color: var(--md-sys-color-on-surface-variant);
background: transparent;
}
.nav__ws-name {
--r: var(--r-xs);
position: absolute;
z-index: 2;
top: calc(100% + var(--space-3));
left: 50%;
padding: 5px 9px;
font-family: var(--font-mono);
font-size: var(--fs-label);
line-height: 1;
letter-spacing: .02em;
white-space: nowrap;
color: var(--md-sys-color-on-surface);
background: color-mix(in srgb, var(--md-sys-color-surface-container-high) 94%, transparent);
box-shadow: 0 0 0 1px var(--md-sys-color-outline-variant), 0 8px 24px rgb(0 0 0 / .35);
translate: -50% calc(var(--motion) * -4px);
opacity: 0;
pointer-events: none;
transition: opacity var(--dur-fx) var(--ease-fx), translate var(--dur-fx) var(--ease-fx);
}
.nav__ws-link:focus-visible .nav__ws-name { opacity: 1; translate: -50% 0; }
@media (hover: hover) and (pointer: fine) {
.nav__ws-link:hover .nav__ws-name { opacity: 1; translate: -50% 0; }
}
.nav__search {
--r: var(--r-full);
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-width: 15.5rem;
height: 38px;
padding: 0 var(--space-2) 0 var(--space-3);
font-family: var(--font-ui);
font-size: var(--fs-small);
font-weight: 400;
line-height: 1;
letter-spacing: var(--tr-small);
text-align: left;
color: var(--md-sys-color-on-surface-variant);
background: color-mix(in srgb, var(--md-sys-color-surface-dim) 52%, transparent);
box-shadow: var(--focus-halo, 0 0 #0000), inset 0 0 0 1px color-mix(in srgb, var(--md-sys-color-on-surface) 16%, transparent), inset 0 2px 6px rgb(0 0 0 / .28);
transition: color var(--dur-fx) var(--ease-fx), background-color var(--dur-fx) var(--ease-fx), box-shadow var(--dur-fx) var(--ease-fx);
}
.nav__search .icon { flex: none; width: 1.15rem; height: 1.15rem; }
.nav__search-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.35; }   
.nav__kbd { display: none; flex: none; }
@media (hover: hover) and (pointer: fine) {
.nav__kbd { display: inline-flex; }
html[data-shortcuts="off"] .nav__kbd { display: none; }
.nav__search:hover {
color: var(--md-sys-color-on-surface);
background: color-mix(in srgb, var(--md-sys-color-surface-dim) 68%, transparent);
box-shadow: var(--focus-halo, 0 0 #0000), inset 0 0 0 1px color-mix(in srgb, var(--md-sys-color-on-surface) 30%, transparent), inset 0 2px 6px rgb(0 0 0 / .28);
}
}
.nav__search:active { color: var(--md-sys-color-on-surface); }
.nav__seed {
--r: var(--r-full);
display: inline-flex;
align-items: center;
gap: var(--space-2);
height: 38px;
padding: 0 var(--space-3) 0 var(--space-2);
font-family: var(--font-ui);
font-size: var(--fs-small);
font-weight: 500;
line-height: 1;
letter-spacing: var(--tr-small);
color: var(--md-sys-color-on-surface-variant);
transition: color var(--dur-fx) var(--ease-fx), background-color var(--dur-fx) var(--ease-fx);
}
.nav__seed-dot {
flex: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--seed-dot, var(--md-sys-color-primary));
box-shadow: inset 0 0 0 1px rgb(255 255 255 / .38), inset 0 -3px 5px rgb(0 0 0 / .28), 0 0 0 3px color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
transition: box-shadow var(--dur-fx) var(--ease-fx);
}
@media (hover: hover) and (pointer: fine) {
.nav__seed:hover { color: var(--md-sys-color-on-surface); background: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent); }
.nav__seed:hover .nav__seed-dot { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .5), inset 0 -3px 5px rgb(0 0 0 / .28), 0 0 0 4px color-mix(in srgb, var(--md-sys-color-on-surface) 16%, transparent); }
}
.nav__seed:active { background: color-mix(in srgb, var(--md-sys-color-on-surface) 16%, transparent); }
.nav__seed[aria-expanded="true"] { color: var(--md-sys-color-on-surface); background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); }
@container nav (max-width: calc(370px + 35rem)) {          
.nav__bar { grid-template-columns: minmax(0, 1fr) auto; }
.nav__ws { display: none; }
}
@media (pointer: coarse) {
@container nav (max-width: calc(430px + 35rem)) {         
.nav__bar { grid-template-columns: minmax(0, 1fr) auto; }
.nav__ws { display: none; }
}
}
@container nav (max-width: max(51.5rem, calc(70px + 40rem))) {   
.nav__search { min-width: 0; width: 13rem; }
}
@media (min-width: 700px) {                                 
@container nav (max-width: calc(110px + 36rem)) {         
.nav__search { width: var(--hit); padding-inline: 0; justify-content: center; }
.nav__search-text, .nav__kbd, .nav__seed-text { display: none; }
.nav__bar { column-gap: var(--space-2); }
.nav__link { padding-inline: var(--space-2); }
}
}
.dock { display: none; }
@media (max-width: 699px) {
.nav__bar {
display: flex;
gap: var(--space-2);
padding-inline: var(--space-1) var(--space-2);
}
.nav__start { flex: none; }
.nav__links { display: none; }
.nav__tools { flex: 1 1 auto; justify-self: stretch; }
.nav__search { flex: 1 1 auto; width: auto; min-width: 0; height: var(--hit); }
.nav__seed { flex: none; width: var(--hit); height: var(--hit); padding: 0; justify-content: center; }
.nav__seed-text { display: none; }
.nav__seed-dot { width: 20px; height: 20px; }
.dock {
--r: var(--r-full);
position: fixed;
z-index: var(--z-dock);
inset-inline: var(--page-gutter);
bottom: max(var(--gap), env(safe-area-inset-bottom, 0px));
display: flex;
align-items: center;
gap: 2px;
height: var(--dock-h);
padding: var(--space-2);
color: var(--md-sys-color-on-surface);
}
.dock__link {
--r: var(--r-full);
flex: 1 1 0;
display: grid;
place-items: center;
min-width: 0;
min-height: var(--hit);
padding-inline: var(--space-2);
font-family: var(--font-ui);
font-size: var(--fs-small);
font-weight: 500;
line-height: 1;
letter-spacing: var(--tr-small);
color: var(--md-sys-color-on-surface-variant);
text-decoration: none;
transition: color var(--dur-fx) var(--ease-fx), background-color var(--dur-fx) var(--ease-fx);
}
.dock__link[aria-current="true"] {
color: var(--md-sys-color-on-primary-container);
background: var(--md-sys-color-primary-container);
}
.dock__link:active { background: color-mix(in srgb, var(--md-sys-color-on-surface) 16%, transparent); }
.dock__search {
--r: var(--r-full);
flex: none;
display: grid;
place-items: center;
width: var(--hit);
height: var(--hit);
margin-left: 2px;
color: var(--md-sys-color-on-surface);
background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
}
.dock__search:active { background: color-mix(in srgb, var(--md-sys-color-on-surface) 22%, transparent); }
}
@media (pointer: coarse) {
.nav__link { height: var(--hit); }
.nav__link::after { bottom: 11px; }                       
.nav__search,
.nav__seed { height: var(--hit); }
.nav__ws { --ws-hit: var(--hit); gap: 0; }                
.nav__ws-link { width: var(--ws-hit); height: var(--ws-hit); }
.nav__ws-link[data-visited]:not([aria-current="true"])::after { bottom: calc(4px + (var(--ws-hit) - var(--ws-size)) / 2); }
}
}
@layer sections {
.hero {
--hero-fit: 6.32;                      
--hero-indent: .5em;
position: relative;
display: grid;
min-block-size: 100vh;
min-block-size: 100svh;
padding-block-start: calc(var(--nav-space) + var(--gap));
padding-block-end: calc(var(--dock-h) + max(var(--gap), env(safe-area-inset-bottom, 0px)) + var(--gap));
}
.hero__grid {
display: grid;
grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
grid-template-rows: minmax(0, 1fr) auto;
column-gap: var(--gap);
row-gap: var(--gap);
align-self: stretch;
}
.hero__mark  { grid-column: 1; grid-row: 1; align-self: start; }
.hero__side  { grid-column: 2; grid-row: 1 / -1; align-self: end; }
.hero__chips { grid-column: 1; grid-row: 2; align-self: end; }
.hero__mark {
position: relative;                   
container-type: inline-size;
container-name: hero-mark;
}
.hero__eyebrow {
display: flex;
align-items: center;
gap: var(--space-3);
margin-block-end: var(--space-4);
font-family: var(--font-mono);
font-weight: 500;
font-size: var(--fs-label);
line-height: 1;
letter-spacing: var(--tr-label);
text-transform: uppercase;
color: var(--md-sys-color-on-surface-variant);
text-shadow: 0 0 .8em rgb(0 0 0 / .5), 0 1px 2px rgb(0 0 0 / .45);
}
.hero__eyebrow::before {
content: "";
flex: none;
inline-size: 2.2em;
block-size: 1px;
background: currentColor;
opacity: .7;
}
.hero__title {
font-size: calc(100cqi / var(--hero-fit));
line-height: .92;
color: var(--md-sys-color-on-surface);
padding-block-end: .2em;              
text-shadow:
0 -.010em 0 rgb(255 255 255 / .62),
0 .012em 0 rgb(0 0 0 / .38),
0 .035em .05em rgb(0 0 0 / .34),
0 .12em .26em rgb(0 0 0 / .42);
}
.hero__line {
display: block;
inline-size: max-content;             
max-inline-size: none;
}
.hero__line + .hero__line { margin-inline-start: var(--hero-indent); }
.hero__mark[data-wordmark-active] .hero__title,
.hero__mark[data-wordmark-active] .hero__line {
color: transparent;
text-shadow: none;
-webkit-text-stroke: 0;
}
.hero__side {
display: flex;
flex-direction: column;
gap: var(--gap);
min-inline-size: 0;
}
.hero__role,
.hero__intro {
--r: var(--r-xl);
padding: calc(var(--pad) * .62);
min-inline-size: 0;
}
.hero__roles { display: grid; gap: .2em; margin: 0; padding: 0; }
.hero__role-part {
position: relative;
font-family: var(--font-display);
font-weight: 650;
font-stretch: 114%;
font-size: clamp(1.375rem, 1rem + 1.15vw, 2.05rem);
line-height: 1.12;
letter-spacing: var(--tr-h3);
color: var(--md-sys-color-on-surface);
}
.hero__role-part:first-child {
display: flex;
align-items: center;
gap: var(--space-3);
margin-block-end: var(--space-3);
font-family: var(--font-mono);
font-weight: 500;
font-stretch: 100%;
font-size: var(--fs-label);
line-height: 1;
letter-spacing: var(--tr-label);
text-transform: uppercase;
color: var(--md-sys-color-on-surface-variant);
}
.hero__role-part:first-child::after {
content: "";
flex: 1 1 auto;
block-size: 1px;
background: color-mix(in srgb, var(--md-sys-color-outline) 70%, transparent);
}
.hero__intro { display: flex; flex-direction: column; gap: var(--space-5); }
.hero__tagline {
max-inline-size: 15em;
font-family: var(--font-display);
font-weight: 750;
font-stretch: 112%;
font-size: clamp(1.5rem, 1.05rem + 1.45vw, 2.45rem);
line-height: 1.1;
letter-spacing: var(--tr-h3);
text-wrap: balance;
color: var(--md-sys-color-on-surface);
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero__hint {
margin: 0;
font-family: var(--font-mono);
font-size: var(--fs-label);
line-height: 1.4;
letter-spacing: .02em;
color: var(--md-sys-color-on-surface-variant);
}
.hero__hint-fine { display: none; }
.hero__hint-touch { display: inline; }
@media (hover: hover) and (pointer: fine) {
.hero__hint-fine { display: inline; }
.hero__hint-touch { display: none; }
html[data-shortcuts="off"] .hero__hint,
html[data-shortcuts="off"] .hero__hint-fine { display: none; }   
}
.hero__chips { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--gap); }
.hero__next,
.hero__clock {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-block-size: var(--hit);
padding-inline: var(--space-4);
font-family: var(--font-ui);
font-size: var(--fs-small);
font-weight: 500;
line-height: 1;
letter-spacing: var(--tr-small);
color: var(--md-sys-color-on-surface);
text-decoration: none;
white-space: nowrap;
}
.hero__next .icon { flex: none; }
.hero__clock { font-family: var(--font-mono); font-weight: 450; font-variant-numeric: tabular-nums; }
.hero__clock .clock__time:empty { display: none; }
html.js .hero__clock .clock__time:empty { display: inline-block; min-inline-size: 5ch; }
.hero__clock-ahead {
padding-inline-start: var(--space-3);
border-inline-start: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 70%, transparent);
color: var(--md-sys-color-on-surface-variant);
}
@media (max-width: 999px) {
.hero__clock-ahead { display: none; }
}
@media (max-width: 899px) {
.hero { --hero-fit: 6.4; }
.hero__grid {
display: flex;
flex-direction: column;
gap: var(--gap);
}
.hero__side { margin-block-start: auto; }
.hero__mark, .hero__chips { align-self: stretch; }
}
@media (min-width: 700px) and (max-width: 899px) {
.hero__side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
}
@media (max-width: 699px) {
.hero { --hero-fit: 6.1; --hero-indent: .22em; }
.hero__next { display: none; }          
.hero__role, .hero__intro { padding: var(--space-5); }
.hero__role-part { font-size: clamp(1.25rem, 1rem + 1.8vw, 1.5rem); }
.hero__tagline { font-size: clamp(1.4rem, 1.05rem + 1.5vw, 1.75rem); }
}
@media (max-width: 699px) and (max-height: 700px) {
.hero__role, .hero__intro { padding: var(--space-3) var(--space-4); }
.hero__side { gap: var(--space-2); }
.hero__roles { display: flex; flex-wrap: wrap; gap: .1em var(--space-3); }
.hero__role-part { font-size: 1rem; line-height: 1.2; }
.hero__role-part:first-child { flex: 1 0 100%; margin-block-end: var(--space-1); }
.hero__intro { gap: var(--space-3); }
.hero__tagline { font-size: 1.2rem; }
.hero__ctas { flex-wrap: nowrap; gap: var(--space-2); }
.hero__cta { flex: 1 1 0; min-inline-size: 0; justify-content: center; padding-inline: var(--space-3); }
.hero__hint { display: none; }
}
}
@layer sections {
.about {  }
.about__head {
text-shadow:   
0 0 .45em color-mix(in srgb, var(--md-sys-color-scrim) 88%, transparent),
0 0 .9em color-mix(in srgb, var(--md-sys-color-scrim) 78%, transparent),
0 0 1.7em color-mix(in srgb, var(--md-sys-color-scrim) 58%, transparent),
0 1px 2px color-mix(in srgb, var(--md-sys-color-scrim) 60%, transparent);
}
.about__head .section__title {   
text-shadow:
0 0 .22em color-mix(in srgb, var(--md-sys-color-scrim) 70%, transparent),
0 0 .55em color-mix(in srgb, var(--md-sys-color-scrim) 48%, transparent),
0 1px 2px color-mix(in srgb, var(--md-sys-color-scrim) 55%, transparent);
}
.about__panes {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--gap);
}
.about__read,
.about__principles,
.about__focus {
min-inline-size: 0;
padding: var(--pad);
display: flex;
flex-direction: column;
}
.about__read { gap: var(--space-6); justify-content: space-between; container: about-read / inline-size; }
.about__lead {
margin: 0;
font-family: var(--font-display);
font-size: clamp(1.65rem, 5.6cqi, 2.9rem);      
font-weight: 480;
font-stretch: 106%;
line-height: 1.2;
letter-spacing: var(--tr-h3);
text-wrap: pretty;
}
.about__body {
margin: 0;
text-wrap: pretty;
padding-block-start: var(--space-5);
border-block-start: var(--hairline) solid color-mix(in srgb, var(--md-sys-color-outline) 55%, transparent);
}
.about__h3 {
margin: 0 0 var(--space-5);
color: color-mix(in srgb, var(--md-sys-color-on-surface) 88%, var(--md-sys-color-on-surface-variant));   
}
.about__list {
display: grid;
gap: var(--space-5);
margin: 0;
}
.about__principle {
display: grid;
grid-template-columns: minmax(2ch, auto) minmax(0, 1fr);
column-gap: var(--space-4);
align-items: start;
}
.about__principle-num {
font-family: var(--font-display);
font-weight: 800;
font-stretch: 125%;
font-size: var(--fs-numeral);
line-height: .8;
letter-spacing: -.02em;
font-variant-numeric: tabular-nums lining-nums;
color: var(--md-sys-color-primary);
margin-block-start: .06em;
}
.about__principle-text {
font-size: var(--fs-body);
line-height: 1.45;
text-wrap: pretty;
}
.about__pills { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
.about__pill {
display: inline-flex;
align-items: center;
min-block-size: var(--hit);
max-inline-size: 100%;
padding-block: .3em;
padding-inline: var(--space-4);
white-space: normal;   
font-family: var(--font-ui);
font-size: var(--fs-small);
font-weight: 520;
line-height: 1.2;
}
@media (min-width: 700px) and (max-width: 899px) {
.about__panes {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas: "read read" "principles focus";
}
.about__read { grid-area: read; }
.about__principles { grid-area: principles; }
.about__focus { grid-area: focus; }
}
@media (min-width: 900px) {
.about__panes {
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
grid-template-areas: "read principles" "read focus";
}
.about__read { grid-area: read; align-self: start; }   
.about__principles { grid-area: principles; }
.about__focus { grid-area: focus; }
}
[data-lit-within] :is(.about__read, .about__principles, .about__focus):not([data-lit]) { --gl-dim: 1; }
}
@layer sections {
.work {
--dg-ink: var(--md-sys-color-on-surface);
--dg-ink-2: var(--md-sys-color-on-surface-variant);
--dg-line: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 82%, transparent);
--dg-built-stroke: var(--glass-accent);
--dg-exp-stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 76%, transparent);
--dg-soft-stroke: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 88%, transparent);
--dg-hatch: color-mix(in srgb, var(--md-sys-color-on-surface) 26%, transparent);
}
.work__defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.diagram { display: block; inline-size: 100%; block-size: auto; overflow: visible; color: var(--dg-ink); }
.diagram__shape { fill: none; stroke: var(--dg-exp-stroke); stroke-width: 1.1; stroke-linejoin: round; }
.diagram__node[data-kind="built"] .diagram__shape { fill: url(#dg-built); stroke: var(--dg-built-stroke); stroke-width: 1.5; }
.diagram__node[data-kind="experiment"] .diagram__shape { fill: color-mix(in srgb, var(--md-sys-color-on-surface) 6%, transparent); stroke: var(--dg-exp-stroke); stroke-width: 1.1; }
.diagram__node[data-kind="planned"] .diagram__shape { fill: none; stroke: var(--dg-soft-stroke); stroke-dasharray: 5 4; }
.diagram__node[data-kind="proposed"] .diagram__shape { fill: url(#dg-hatch); stroke: var(--dg-soft-stroke); stroke-dasharray: 5 4; }
.diagram__node--gate .diagram__shape { stroke-width: 1.7; }
.diagram__node--gate .diagram__shape--inner { fill: none; stroke-width: 1.5; stroke-dasharray: 0.1 4; stroke-linecap: round; opacity: .85; }
.diagram__stop { stop-color: color-mix(in srgb, var(--md-sys-color-primary) 62%, var(--md-sys-color-surface)); }
.diagram__stop--hi { stop-opacity: .5; }
.diagram__stop--lo { stop-opacity: .2; }
.diagram__hatch { stroke: var(--dg-hatch); stroke-width: 1; }
.diagram__label, .diagram__elabel { text-rendering: geometricPrecision; }
.diagram__label { font: 600 12.5px var(--font-ui); fill: var(--dg-ink); letter-spacing: 0; }
.diagram--compact .diagram__label { font-size: 13px; }
.diagram__elabel { font: 500 10.5px var(--font-mono); letter-spacing: .02em; fill: var(--dg-ink-2); }
.tile__diagram .diagram--full .diagram__elabel { font-size: 11.6px; }
.diagram__edge, .diagram__arrow { fill: none; stroke: var(--dg-line); stroke-width: 1.25; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.diagram__edge--dashed { stroke-dasharray: 4 4; stroke-linecap: butt; }
.diagram__arrow--dashed { stroke-dasharray: none; }
.diagram__legend { display: flex; flex-wrap: wrap; gap: .35em 1.4em; margin: 0; padding: 0; list-style: none; }
.diagram__key { display: inline-flex; align-items: center; gap: .55em; font: 500 var(--fs-label)/1.2 var(--font-mono); letter-spacing: .04em; color: var(--md-sys-color-on-surface); }
.diagram__swatch { inline-size: 30px; block-size: 18px; flex: none; overflow: visible; }
.work__head { margin-block-end: var(--space-6); }
.work__board {
display: grid; gap: var(--gap); align-items: stretch;
grid-template-columns: minmax(0, 1fr);
min-block-size: 0;
overflow-anchor: none;                    
}
@media (min-width: 700px) {
.work__board { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "a a" "b b" "c d"; }
.tile[data-tile="aurorax"]   { grid-area: a; }
.tile[data-tile="gymledger"] { grid-area: b; }
.tile[data-tile="crm"]       { grid-area: c; }
.tile[data-tile="candidate"] { grid-area: d; }
}
@media (min-width: 1180px) {
.work__board {
grid-template-columns: minmax(0, 58fr) minmax(min(100%, 12rem), 21fr) minmax(min(100%, 12rem), 21fr);
grid-template-rows: minmax(min-content, 6fr) minmax(min-content, 7fr);
grid-template-areas: "a b b" "a c d";
min-block-size: clamp(640px, 52vw, 790px);
}
}
@media (min-width: 700px) {
.work__board[data-board-state="open"] {
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; grid-template-areas: none; min-block-size: 0;
}
.work__board[data-board-state="open"] > .tile { grid-area: auto; }
.work__board[data-board-state="open"] > .tile[data-role="open"] { grid-column: 1 / -1; grid-row: 2; }
.work__board[data-board-state="open"] > .tile[data-role="mini"] { grid-row: 1; align-self: stretch; }
}
@media (min-width: 1180px) {
.work__board[data-board-state="open"] { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: repeat(3, auto) 1fr; }
.work__board[data-board-state="open"] > .tile[data-role="open"] { grid-column: 1; grid-row: 1 / -1; }
.work__board[data-board-state="open"] > .tile[data-role="mini"] { grid-column: 2; grid-row: auto; align-self: start; }
}
.tile {
--tile-pad: clamp(18px, 1.9vw, 30px);
--tile-gap: clamp(8px, .85vw, 14px);
container: tile / inline-size;
display: grid; align-content: start; align-items: start;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
grid-template-areas: "head head" "title title" "sub sub" "line line" "dg dg" "tags more";
padding: var(--tile-pad);
min-inline-size: 0;
color: var(--md-sys-color-on-surface);
}
.tile__head { grid-area: head; order: -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px .8em; min-inline-size: 0; }
.tile__num { flex: none; font: 500 var(--fs-mono)/1 var(--font-mono); letter-spacing: .06em; color: var(--md-sys-color-on-surface); font-variant-numeric: tabular-nums; }
.tile__rule { flex: 1 1 0; block-size: 1px; background: color-mix(in srgb, var(--md-sys-color-on-surface) 24%, transparent); min-inline-size: 1em; }
.tile__status { flex: 0 1 auto; min-inline-size: 0; max-inline-size: 100%; white-space: normal; text-wrap: balance; }
.tile__status-short { display: none; }
.tile__title { grid-area: title; margin: var(--tile-gap) 0 0; min-inline-size: 0;
font-family: var(--font-display); font-weight: 760; font-stretch: 108%; line-height: 1.08; letter-spacing: var(--tr-h3); text-wrap: balance;
font-size: clamp(1.1rem, .86rem + .55vw, 1.4rem); }
.tile[data-tile="aurorax"]   .tile__title { font-size: var(--fs-h3); }
.tile[data-tile="gymledger"] .tile__title { font-size: clamp(1.4rem, 1rem + 1vw, 1.95rem); }
.tile__open { all: unset; box-sizing: border-box; display: block; inline-size: 100%; color: inherit; cursor: pointer; text-wrap: inherit; }
.tile__open::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.tile__open:focus-visible { outline: none; }
.tile__sub { grid-area: sub; display: none; margin: .5em 0 0; font: 600 var(--fs-label)/1.3 var(--font-ui); font-stretch: 112%; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--md-sys-color-on-surface); }
.tile[data-tile="aurorax"] .tile__sub { display: block; }
.tile__line { grid-area: line; margin: var(--tile-gap) 0 0; font: 400 var(--fs-small)/1.45 var(--font-ui); letter-spacing: var(--tr-small); color: var(--md-sys-color-on-surface); text-wrap: pretty; max-inline-size: 46ch; }
.tile[data-tile="aurorax"] .tile__line { font-size: clamp(1.05rem, .95rem + .45vw, 1.3rem); line-height: 1.38; max-inline-size: 40ch; }
.tile__tags, .detail__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tile__tags { grid-area: tags; align-self: end; margin-block-start: var(--tile-gap); }
.tag[data-state] { gap: .5em; }
.tag[data-state]::before { content: ""; flex: none; inline-size: .62em; block-size: .62em; border-radius: 50%; box-sizing: border-box; background: currentColor; opacity: .9; }
.tag[data-state="exploring"]::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); box-shadow: inset 0 0 0 1.25px currentColor; }
.tag[data-state="learning"]::before { background: transparent; box-shadow: inset 0 0 0 1.25px currentColor; }
.tile__diagram { grid-area: dg; margin: var(--tile-gap) 0 0; min-block-size: 0; block-size: 100%; container: tdg / size; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); place-items: center; }
.tile__diagram .diagram { inline-size: 100%; block-size: 100%; }
.tile__diagram .diagram--full { display: block; }
.tile__more { grid-area: more; align-self: end; justify-self: end; margin: var(--tile-gap) 0 0; display: inline-flex; align-items: center; gap: .45em; min-block-size: 24px;
font: 650 var(--fs-small)/1 var(--font-ui); font-stretch: 108%; letter-spacing: .02em; color: var(--md-sys-color-on-surface); }
.tile__more .icon { transition: transform var(--dur-press) var(--ease-press); }
@media (hover: hover) and (pointer: fine) {
.tile:hover .tile__more .icon { transform: translateX(calc(var(--motion) * 3px)); }
}
@media (min-width: 700px) {
.tile:is([data-tile="crm"], [data-tile="candidate"]):not([data-role]) {
grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
grid-template-areas: "head" "title" "line" "tags" "dg" "more";
}
.tile:is([data-tile="crm"], [data-tile="candidate"]) .tile__diagram { min-block-size: 96px; }
.tile:is([data-tile="crm"], [data-tile="candidate"]) .tile__title { font-size: clamp(1.05rem, 7.4cqi, 1.4rem); }
}
@media (min-width: 1180px) {
.tile[data-tile="gymledger"] { grid-template-areas: "head head" "title more" "line line" "dg dg"; grid-template-rows: auto auto auto minmax(0, 1fr); }
.tile[data-tile="gymledger"] .tile__more { align-self: center; }
}
@container tile (min-width: 430px) {
.tile__status-long { display: inline; } .tile__status-short { display: none; }
}
@container tile (max-width: 429px) {
.tile__status-long { display: none; } .tile__status-short { display: inline; }
}
@container tdg (max-width: 400px) { .diagram--compact .diagram__label, .diagram--compact .diagram__elabel { display: none; } }
@container tdg (max-width: 600px) { .diagram--full .diagram__label, .diagram--full .diagram__elabel { display: none; } }
@container tdg (max-height: 120px) { .diagram__label, .diagram__elabel { display: none; } }
@container tdg (max-height: 239px) { .diagram--full.diagram--tall .diagram__label, .diagram--full.diagram--tall .diagram__elabel { display: none; } }
@container tdg (max-height: 179px) { .diagram--compact.diagram--tall .diagram__label, .diagram--compact.diagram--tall .diagram__elabel { display: none; } }
@container tdg (max-height: 153px) { .diagram--full:not(.diagram--tall) .diagram__label, .diagram--full:not(.diagram--tall) .diagram__elabel { display: none; } }
.tile[data-status="proposed"] .tile__rule { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--md-sys-color-on-surface) 40%, transparent) 0 5px, transparent 5px 9px); }
.tile[data-role="mini"] {
grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; grid-template-areas: "num title" ". status";
column-gap: .9em; row-gap: .6em; padding: clamp(14px, 1.3vw, 20px) clamp(16px, 1.5vw, 22px);
align-items: start;
}
.tile[data-role="mini"] .tile__head { display: contents; }
.tile[data-role="mini"] .tile__num { grid-area: num; padding-block-start: .5em; }
.tile[data-role="mini"] .tile__rule { display: none; }
.tile[data-role="mini"] .tile__title { grid-area: title; margin: 0; font-size: clamp(1.05rem, .95rem + .35vw, 1.3rem); }
.tile[data-role="mini"] .tile__status { grid-area: status; justify-self: start; }
.tile[data-role="mini"] .tile__status-long { display: none; }
.tile[data-role="mini"] .tile__status-short { display: inline; }
.tile[data-role="mini"] :is(.tile__sub, .tile__line, .tile__tags, .tile__diagram, .tile__more, .tile__detail) { display: none; }
.tile[data-role="open"] {
grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; grid-template-areas: "head" "title" "sub" "detail";
padding: clamp(20px, 2.4vw, 40px);
}
.tile[data-role="open"] > :is(.tile__line, .tile__tags, .tile__diagram, .tile__more) { display: none; }
.tile[data-role="open"] .tile__sub { display: block; }
.tile[data-role="open"] .tile__title { font-size: var(--fs-h3); }
.tile[data-role="open"] .tile__status-long { display: inline; }
.tile[data-role="open"] .tile__status-short { display: none; }
.tile[data-role="open"] .tile__open::after { content: none; }
.tile[data-role="open"] .tile__open { cursor: default; }
.tile__detail { grid-area: detail; display: grid; gap: var(--space-5); margin-block-start: var(--space-5); min-inline-size: 0; }
.tile__detail[hidden] { display: none; }
.tile[data-role="mini"] .tile__detail { display: none; }
.detail__figure { --r: var(--r-lg); margin: 0; padding: clamp(14px, 1.6vw, 26px); display: grid; gap: var(--space-4);
background: color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 50%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--md-sys-color-outline) 42%, transparent); }
.detail__figure .diagram--compact { display: none; }
.detail__figure .diagram--full { max-inline-size: 860px; margin-inline: auto; }
.detail__caption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-5); }
.detail__note { margin: 0; font: 400 var(--fs-label)/1.4 var(--font-ui); letter-spacing: .01em; color: var(--md-sys-color-on-surface); max-inline-size: 52ch; }
.detail__top, .detail__cols { display: grid; gap: var(--space-5) var(--space-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .detail__top, .detail__cols { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: start; } }
.detail__col { display: grid; gap: var(--space-5); align-content: start; min-inline-size: 0; }
.detail__block { min-inline-size: 0; }
.detail__h { margin: 0 0 .7em; font: 600 var(--fs-label)/1.3 var(--font-ui); font-stretch: 112%; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--md-sys-color-on-surface); }
.detail__text { margin: 0; font: 400 var(--fs-small)/1.55 var(--font-ui); letter-spacing: var(--tr-small); color: var(--md-sys-color-on-surface); text-wrap: pretty; }
.detail__list { margin: 0; padding: 0; list-style: none; display: grid; gap: .5em; }
.detail__list > li { position: relative; padding-inline-start: 1.25em; font: 400 var(--fs-small)/1.5 var(--font-ui); letter-spacing: var(--tr-small); color: var(--md-sys-color-on-surface); text-wrap: pretty; }
.detail__list > li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .52em; inline-size: .5em; block-size: .5em; background: currentColor; border-radius: calc(2px * var(--r-k)); opacity: .9; }
.detail__list--planned > li::before, .tile[data-status="proposed"] .detail__list > li::before { background: transparent; box-shadow: inset 0 0 0 1.25px currentColor; }
.detail__list--planned > li::before { background: repeating-linear-gradient(135deg, currentColor 0 1px, transparent 1px 3px); }
.detail__list--not > li::before { background: transparent; box-shadow: inset 0 0 0 1.25px currentColor; border-radius: 50%; }
.detail__block--planned { padding: var(--space-4); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--md-sys-color-outline) 60%, transparent); border-radius: calc(var(--r-md) * var(--r-k)); corner-shape: var(--corner-shape); }
.detail__block--not { padding: var(--space-4) var(--space-4) calc(var(--space-4) - .1em); border-radius: calc(var(--r-md) * var(--r-k)); corner-shape: var(--corner-shape);
background: color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 58%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--md-sys-color-outline) 62%, transparent); }
.detail__block--not .detail__h { color: var(--md-sys-color-on-surface); }
.detail__tags .tag { min-block-size: 1.9em; }
.detail__tags--topics .tag { font-family: var(--font-ui); font-size: var(--fs-small); }
.work__bar {
--r: var(--r-full);
position: sticky; inset-block-start: calc(var(--nav-space) + var(--gap) * .5); z-index: var(--z-sticky);
display: flex; align-items: center; gap: var(--space-3) var(--space-4); flex-wrap: wrap;
margin-block-end: var(--gap); padding: 6px 10px 6px 8px; min-block-size: 56px;
color: var(--md-sys-color-on-surface);
}
.work__bar[hidden] { display: none; }
.work__bar-close { flex: none; padding-inline: .9em 1em; }
.work__bar-esc { margin-inline-start: .15em; font-size: .75rem; }
.work__bar-status { flex: 1 1 14rem; min-inline-size: 0; margin: 0; padding-inline: var(--space-2); display: flex; align-items: baseline; gap: .35em; font: 500 var(--fs-mono)/1.2 var(--font-mono); letter-spacing: .02em; }
.work__bar-title { min-inline-size: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
.work__bar-count { flex: none; white-space: nowrap; }
.work__bar-steps { flex: none; display: flex; gap: 8px; }
.work__bar-hint { flex: none; display: none; align-items: center; gap: 6px; margin: 0; padding-inline: var(--space-2) var(--space-3); font: 400 var(--fs-label)/1.2 var(--font-ui); color: var(--md-sys-color-on-surface); }
.work__bar-hint-text { margin-inline-start: .35em; }
@media (hover: hover) and (pointer: fine) and (min-width: 1280px) { .work__bar-hint { display: inline-flex; } }   
@media not ((hover: hover) and (pointer: fine)) { .work__bar-esc { display: none; } }
.tile[data-match] { outline: 2px solid color-mix(in srgb, var(--glass-accent) 90%, transparent); outline-offset: 4px; --gl-bloom: var(--glass-bloom-focus, .3); --gl-rim-a: 100%; --gl-rim-t: 3px; --gl-hair-a: 44%; }
.tile[data-match]:has(.tile__open:focus-visible) { outline: var(--ring-w) solid var(--glass-accent); outline-offset: var(--ring-gap); }   
.tile[data-match] .tile__num { color: var(--md-sys-color-on-surface); font-weight: 700; }
.tag[data-match] { color: var(--md-sys-color-on-primary); background: var(--md-sys-color-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--glass-accent) 55%, transparent); font-weight: 650; }
.work:is([data-lit-within], [data-has-lit]) .work__board > .tile:not([data-lit]) { --gl-dim: 1; }
@media (min-width: 700px) and (max-width: 1179px) {
.tile__diagram { block-size: clamp(96px, 13vw, 124px); }
.tile[data-tile="aurorax"] .tile__diagram { block-size: clamp(150px, 22vw, 200px); }
.tile[data-tile="gymledger"] .tile__diagram { block-size: clamp(124px, 17vw, 160px); }
}
@media (max-width: 699px) {
.work__board, .work__board[data-board-state="open"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: none; }
.work__board > .tile, .work__board[data-board-state="open"] > .tile { grid-area: auto; grid-column: auto; grid-row: auto; }
.tile { grid-template-areas: "head head" "title title" "sub sub" "line line" "tags tags" "more more"; grid-template-rows: none; --tile-pad: 18px; }
.tile__diagram { display: none; }
.tile .tile__sub { display: block; }
.tile__title, .tile[data-tile="aurorax"] .tile__title, .tile[data-tile="gymledger"] .tile__title { font-size: clamp(1.4rem, 1.05rem + 1.4vw, 1.75rem); }
.tile[data-tile="aurorax"] .tile__line { font-size: var(--fs-body); }
.tile__line { font-size: var(--fs-body); line-height: 1.5; }
.tile__status-long { display: inline; } .tile__status-short { display: none; }
.tile[data-role="open"] { grid-template-areas: "head" "title" "sub" "detail"; grid-template-rows: none; }
.tile[data-role="open"] .tile__diagram { display: none; }
.detail__figure .diagram--full { display: none; }
.detail__figure .diagram--compact { display: block; }
.detail__figure { padding: 10px 8px; margin-inline: -8px; }
.detail__figure .diagram--compact { max-inline-size: 440px; margin-inline: auto; }
.work__bar { inset-block-start: calc(var(--nav-space) + var(--gap) * .5); min-block-size: 52px; gap: 6px; padding: 5px 6px 5px 6px; }
.work__bar-esc { display: none; }
.work__bar-close { padding-inline: .7em .85em; }
.work__bar-steps { gap: 6px; margin-inline-start: auto; }
.work__bar-status { flex-basis: 100%; order: 3; padding-inline: 6px; font-size: .72rem; }   
}
@media (forced-colors: active) {
.diagram__shape, .diagram__node[data-kind] .diagram__shape { stroke: CanvasText; fill: none; }
.diagram__node[data-kind="built"] .diagram__shape { stroke-width: 2.4; }
.diagram__label, .diagram__elabel { fill: CanvasText; }
.diagram__edge, .diagram__arrow { stroke: CanvasText; }
.diagram__hatch { stroke: CanvasText; }
.tile[data-match] { outline: 3px solid Highlight; }
.tag[data-match] { background: Highlight; color: HighlightText; }
}
@media (prefers-contrast: more) {
.diagram__shape { stroke-width: 1.5; }
.diagram__edge, .diagram__arrow { stroke-width: 1.6; }
}
}
@layer sections {
.stack__head {
text-shadow:   
0 0 .45em color-mix(in srgb, var(--md-sys-color-scrim) 88%, transparent),
0 0 .9em color-mix(in srgb, var(--md-sys-color-scrim) 78%, transparent),
0 0 1.7em color-mix(in srgb, var(--md-sys-color-scrim) 58%, transparent),
0 1px 2px color-mix(in srgb, var(--md-sys-color-scrim) 60%, transparent);
}
.stack__head .section__title {   
text-shadow:
0 0 .22em color-mix(in srgb, var(--md-sys-color-scrim) 70%, transparent),
0 0 .55em color-mix(in srgb, var(--md-sys-color-scrim) 48%, transparent),
0 1px 2px color-mix(in srgb, var(--md-sys-color-scrim) 55%, transparent);
}
.stack__board {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--gap);
}
.stack__groups { display: contents; }
.stack__legend,
.stack__key,
.stack__group {
min-inline-size: 0;
display: flex;
flex-direction: column;
}
.stack__legend { gap: var(--space-5); }
.stack__legend-title,
.stack__key-label { margin: 0; color: color-mix(in srgb, var(--md-sys-color-on-surface) 88%, var(--md-sys-color-on-surface-variant)); }
.stack__legend-list {
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
align-items: center;
column-gap: var(--space-3);
row-gap: var(--space-4);
margin: 0;
flex: 1 1 auto;
align-content: space-evenly;
}
.stack__legend-item { display: contents; }
.stack__legend-item dt, .stack__legend-item dd { margin: 0; }
.stack__legend { container: stack-legend / inline-size; }
@container stack-legend (max-width: 22.5rem) {
.stack__legend-list { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-5); }
.stack__legend-item { display: grid; gap: var(--space-2); justify-items: start; }
}
.stack__legend-item dd {
font-size: var(--fs-small);
line-height: var(--lh-small);
color: color-mix(in srgb, var(--md-sys-color-on-surface) 88%, var(--md-sys-color-on-surface-variant));
}
.stack__key { gap: var(--space-4); }
.stack__key-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); flex: 1 1 auto; }
.stack__key-btn {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: .65em;
row-gap: .15em;
align-items: baseline;
align-content: center;
white-space: normal;
text-align: start;
padding-block: .5em;
}
.stack__key-btn .chip__num { grid-column: 1; grid-row: 1; }
.stack__key-btn .chip__label { grid-column: 2; grid-row: 1; min-inline-size: 0; text-wrap: balance; }
.stack__key-btn .chip__note { grid-column: 2; grid-row: 2; justify-self: start; }
.stack__key-foot {
margin-block-start: auto;
display: grid;
padding-block-start: var(--space-4);
border-block-start: var(--hairline) solid color-mix(in srgb, var(--md-sys-color-outline) 55%, transparent);
}
.stack__key-foot > * {
grid-area: 1 / 1;
margin: 0;
font-size: var(--fs-small);
line-height: var(--lh-small);
color: var(--md-sys-color-on-surface);
}
.stack__legend-note { padding-inline-end: max(0px, calc(100% - 64ch)); }   
.stack__legend-note-fine { display: none; }
.stack__legend-note-touch { display: inline; }
@media (hover: hover) and (pointer: fine) {
.stack__legend-note-fine { display: inline; }
.stack__legend-note-touch { display: none; }
}
.stack__key-hint { visibility: hidden; align-self: start; font-weight: 550; }
.stack__key:has(.stack__key-btn[data-empty]:is(:focus-visible, [aria-pressed="true"])) .stack__key-hint { visibility: visible; }
.stack__key:has(.stack__key-btn[data-empty]:is(:focus-visible, [aria-pressed="true"])) .stack__legend-note { visibility: hidden; }
@media (hover: hover) and (pointer: fine) {
.stack__key:has(.stack__key-btn[data-empty]:hover) .stack__key-hint { visibility: visible; }
.stack__key:has(.stack__key-btn[data-empty]:hover) .stack__legend-note { visibility: hidden; }
}
.chip__num,
.chip__note,
.chip__ref {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums lining-nums;
letter-spacing: .01em;
}
.chip__num { font-size: max(var(--fs-label), .8125rem); font-weight: 600; color: var(--md-sys-color-primary); }
.chip__note { font-size: max(var(--fs-label), .8125rem); font-weight: 450; color: var(--md-sys-color-on-surface-variant); white-space: normal; min-inline-size: 0; }
.chip__label { min-inline-size: 0; overflow-wrap: anywhere; }   
.chip__refs { display: inline-flex; gap: .3em; margin-inline-start: auto; }
.chip__note + .chip__refs { margin-inline-start: .1em; }
.chip__ref {
display: inline-block;
padding: .05em .4em;
font-size: max(var(--fs-label), .75rem);
font-weight: 600;
line-height: 1.35;
color: var(--md-sys-color-primary);
border-radius: calc(5px * var(--r-k));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--md-sys-color-primary) 55%, transparent);
}
.chip__ref::before { content: attr(data-n); }   
@supports (corner-shape: superellipse(2.3)) { .chip__ref { corner-shape: var(--corner-shape); } }
.stack__section { container: stack-board / inline-size; }
.stack__group { gap: var(--space-4); padding: calc(var(--pad) * .8); }
.stack__group-head { display: grid; gap: var(--space-2); }
.stack__group-title {
margin: 0;
font-family: var(--font-display);
font-weight: 750;
font-stretch: 112%;
font-size: calc(var(--fs-h3) * .64);
line-height: 1.12;
letter-spacing: var(--tr-h3);
text-wrap: balance;
}
.stack__group-note {
margin: 0;
font-size: var(--fs-small);
line-height: var(--lh-small);
color: color-mix(in srgb, var(--md-sys-color-on-surface) 88%, var(--md-sys-color-on-surface-variant));
}
.stack__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
.stack__item { display: flex; max-inline-size: 100%; }
.stack__item .chip { max-inline-size: 100%; white-space: normal; flex-wrap: wrap; row-gap: .1em; }   
@media (min-width: 700px) {
.stack__legend { grid-area: legend; }
.stack__key { grid-area: key; }
.stack__group[data-group="programming"] { grid-area: prog; }
.stack__group[data-group="systems"] { grid-area: sys; }
.stack__group[data-group="data"] { grid-area: data; }
.stack__group[data-group="networking"] { grid-area: net; }
.stack__group[data-group="other"] { grid-area: other; }
.stack__key-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stack__board {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas: "legend legend" "key key" "prog sys" "data net" "other other";
}
}
@container stack-board (min-width: 57.5rem) {
.stack__board {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr);
grid-template-areas:
"legend key  key"
"prog   sys  data"
"prog   sys  net"
"prog   sys  other";
}
.stack__group:is([data-group="programming"], [data-group="systems"]) .stack__chips {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-auto-rows: minmax(4rem, 1fr);
gap: var(--space-2);
flex: 1 1 auto;
}
.stack__group:is([data-group="programming"], [data-group="systems"]) .stack__item .chip {
inline-size: 100%;
block-size: 100%;
font-size: var(--fs-lead);
font-weight: 500;
flex-wrap: wrap;
align-content: center;
column-gap: .5em;
}
.stack__group:is([data-group="programming"], [data-group="systems"]) .chip__note { margin-inline-start: auto; }
.stack__group:is([data-group="programming"], [data-group="systems"]) .stack__group-title { font-size: calc(var(--fs-h3) * .9); }
}
.stack__group:is([data-group="programming"], [data-group="systems"]) .stack__group-head { container: stack-head / inline-size; font-size: var(--fs-small); }
@container stack-head (max-width: 22.5em) { .stack__group-note { min-block-size: 2lh; } }
[data-lit-within] .stack__group:not([data-lit]) { --gl-dim: 1; }
.stack__group:has(.chip[data-match], .chip[aria-pressed="true"]) { --gl-bloom: .16; }
.stack__item .chip,
.stack__key-btn {
transition: transform var(--dur-press) var(--ease-press), color var(--dur-fx) var(--ease-fx), box-shadow var(--dur-fx) var(--ease-fx), var(--gl-transitions, visibility 0s);
}
.stack__board .chip[data-match]:not([aria-pressed="true"]) {
--gl-bloom: .3; --gl-rim-a: 100%; --gl-rim-t: 3px; --gl-hair-a: 80%; --gl-extra-dark: .36;
box-shadow:
var(--focus-halo, 0 0 #0000),
0 0 0 1.5px color-mix(in srgb, var(--glass-rim) 90%, transparent),
0 0 22px 1px color-mix(in srgb, var(--glass-glow) 62%, transparent);
}
.stack__board .chip[data-match] .chip__label {
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: .24em;
}
.stack__board .chip[aria-pressed="true"] {
--gl-bloom: .06; --gl-extra-dark: .4;
box-shadow:
var(--focus-halo, 0 0 #0000),
0 0 0 2.5px var(--glass-accent),
0 0 26px 2px color-mix(in srgb, var(--glass-glow) 70%, transparent);
}
.stack__board .chip[aria-pressed="true"] :is(.chip__note, .chip__ref, .chip__num) { color: var(--md-sys-color-on-surface); }
.stack__section:has(.chip:is([data-match], [aria-pressed="true"])) .stack__board .chip:not([data-match], [aria-pressed="true"]) {
--gl-dim: 1;
}
@media (forced-colors: active) {
.stack__board .chip[data-match] { outline: 2px dashed Highlight; outline-offset: 2px; }
.stack__board .chip[aria-pressed="true"] { outline: 3px solid Highlight; outline-offset: 2px; }
}
}
@layer sections {
.beyond__tiles {
container: beyond-tiles / inline-size;
display: grid;
gap: var(--gap);
}
.beyond__pebbles {
--peb-row: clamp(7.5rem, 5.2rem + 5.6vw, 10.5rem);
display: grid;
gap: var(--gap);
grid-template-columns: minmax(0, 1fr);
grid-auto-rows: minmax(5.25rem, auto);
grid-template-areas: "desk" "self" "srv" "ard" "key" "kar" "fit" "cyc";
}
.beyond__pebble[data-pebble="linux-desktop"] { grid-area: desk; }
.beyond__pebble[data-pebble="self-hosting"]  { grid-area: self; }
.beyond__pebble[data-pebble="server-ops"]    { grid-area: srv; }
.beyond__pebble[data-pebble="arduino"]       { grid-area: ard; }
.beyond__pebble[data-pebble="keyboards"]     { grid-area: key; }
.beyond__pebble[data-pebble="karate"]        { grid-area: kar; }
.beyond__pebble[data-pebble="fitness"]       { grid-area: fit; }
.beyond__pebble[data-pebble="cycling"]       { grid-area: cyc; }
.beyond__pebble {
--r: var(--r-lg);
--peb-pad: clamp(1rem, .75rem + 1.1vw, 1.5rem);
--peb-icon: clamp(1.75rem, 1.3rem + 1.1vw, 2.5rem);
--peb-label: clamp(1.0625rem, .95rem + .55vw, 1.4375rem);
display: flex;
flex-direction: column;
gap: var(--space-4);
min-inline-size: 0;
padding: var(--peb-pad);
overflow-wrap: normal;                                    
hyphens: manual;
}
.beyond__icon {
flex: none;
inline-size: var(--peb-icon);
block-size: var(--peb-icon);
color: var(--md-sys-color-on-surface-variant);
transition: color var(--dur-fx) var(--ease-fx);
}
.beyond__pebble[data-lit] .beyond__icon { color: var(--md-sys-color-primary); }
.beyond__label {
margin-block-start: auto;                                 
font-family: var(--font-display);
font-weight: 720;
font-stretch: 110%;
font-size: var(--peb-label);
line-height: 1.08;
letter-spacing: -.012em;
text-wrap: balance;
color: var(--md-sys-color-on-surface);
}
.beyond__line {
max-inline-size: 32ch;
margin-block-start: calc(var(--space-2) * -1);
font-family: var(--font-ui);
font-size: var(--fs-small);
line-height: var(--lh-small);
letter-spacing: var(--tr-small);
color: var(--md-sys-color-on-surface-variant);
text-wrap: pretty;
}
.beyond__pebble[data-pebble="karate"] { --peb-icon: clamp(2.75rem, 2.2rem + 1.6vw, 3.75rem); }
.beyond__pebble[data-pebble="karate"] {
display: grid;
grid-template: auto auto / auto minmax(0, 1fr);
align-content: center;
align-items: center;
gap: var(--space-1) var(--space-5);
}
.beyond__pebble[data-pebble="karate"] .beyond__icon { grid-area: 1 / 1 / 3 / 2; }
.beyond__pebble[data-pebble="karate"] .beyond__label { grid-area: 1 / 2; margin-block-start: 0; align-self: end; }
.beyond__pebble[data-pebble="karate"] .beyond__line { grid-area: 2 / 2; margin-block-start: 0; align-self: start; }
@container beyond-tiles (max-width: 29.99rem) {
.beyond__pebble[data-pebble] {
display: grid;
grid-template: auto auto / 3rem minmax(0, 1fr);                 
align-content: center;
align-items: center;
gap: var(--space-1) var(--space-5);
}
.beyond__pebble .beyond__icon { grid-area: 1 / 1 / 3 / 2; justify-self: start; }
.beyond__pebble .beyond__label { grid-area: 1 / 2; margin-block-start: 0; align-self: end; }
.beyond__pebble .beyond__line { grid-area: 2 / 2; margin-block-start: 0; align-self: start; }
}
@container beyond-tiles (min-width: 30rem) {
.beyond__pebbles {
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-auto-rows: minmax(var(--peb-row), auto);
grid-template-areas:
"desk desk desk desk desk desk desk self self self self self"
"srv  srv  srv  srv  srv  ard  ard  ard  ard  ard  ard  ard"
"key  key  key  key  key  kar  kar  kar  kar  kar  kar  kar"
"fit  fit  fit  fit  fit  fit  fit  cyc  cyc  cyc  cyc  cyc";
}
}
@container beyond-tiles (min-width: 44rem) {
.beyond__pebbles {
grid-template-rows: minmax(calc(var(--peb-row) * 1.3), auto) repeat(2, minmax(var(--peb-row), auto));
grid-template-areas:
"desk desk desk desk desk desk desk self self self self self"
"srv  srv  srv  ard  ard  ard  ard  key  key  key  key  key"
"kar  kar  kar  kar  kar  fit  fit  fit  cyc  cyc  cyc  cyc";
}
.beyond__pebble[data-pebble="linux-desktop"],
.beyond__pebble[data-pebble="self-hosting"] { --r: var(--r-xl); --peb-icon: clamp(2.25rem, 1.8rem + 1.4vw, 3.25rem); }
}
@container beyond-tiles (min-width: 62rem) {
.beyond__pebbles {
grid-template-columns: repeat(24, minmax(0, 1fr));
grid-template-rows: repeat(3, minmax(var(--peb-row), auto));
grid-template-areas:
"desk desk desk desk desk desk desk desk desk desk self self self self self self kar  kar  kar  kar  kar  kar  kar  kar"
"desk desk desk desk desk desk desk desk desk desk self self self self self self fit  fit  fit  fit  fit  fit  fit  fit"
"srv  srv  srv  srv  srv  ard  ard  ard  ard  ard  ard  key  key  key  key  key  cyc  cyc  cyc  cyc  cyc  cyc  cyc  cyc";
}
.beyond__pebble[data-pebble="linux-desktop"],
.beyond__pebble[data-pebble="self-hosting"] {
--r: var(--r-xl);
--peb-icon: clamp(2.5rem, 2rem + 1.5vw, 3.5rem);
--peb-label: clamp(1.25rem, 1rem + 1vw, 1.875rem);
}
.beyond__pebble[data-pebble="server-ops"],
.beyond__pebble[data-pebble="arduino"],
.beyond__pebble[data-pebble="keyboards"] { --r: var(--r-md); --peb-label: clamp(1.0625rem, .85rem + .6vw, 1.3125rem); }
.beyond__pebble[data-pebble="fitness"],
.beyond__pebble[data-pebble="cycling"] {
--peb-icon: clamp(2.75rem, 2.2rem + 1.6vw, 3.75rem);
display: grid;
grid-template: auto auto / auto minmax(0, 1fr);
align-content: center;
align-items: center;
gap: var(--space-1) var(--space-5);
}
.beyond__pebble[data-pebble="fitness"] .beyond__icon,
.beyond__pebble[data-pebble="cycling"] .beyond__icon { grid-area: 1 / 1 / 3 / 2; }
.beyond__pebble[data-pebble="fitness"] .beyond__label,
.beyond__pebble[data-pebble="cycling"] .beyond__label { grid-area: 1 / 2; margin-block-start: 0; align-self: end; }
.beyond__pebble[data-pebble="fitness"] .beyond__line,
.beyond__pebble[data-pebble="cycling"] .beyond__line { grid-area: 2 / 2; margin-block-start: 0; align-self: start; }
}
.beyond__direction {
--r: var(--r-pane);
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--gap);
row-gap: var(--space-6);
padding: clamp(1.5rem, .6rem + 4.4vw, 4.5rem) clamp(1.25rem, .4rem + 4vw, 4.25rem);
}
.beyond__dir-head {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: .25em .9em;
font-family: var(--font-mono);
font-weight: 500;
font-size: var(--fs-mono);
line-height: var(--lh-label);
letter-spacing: .08em;
text-transform: uppercase;
}
.beyond__dir-kicker { color: color-mix(in srgb, var(--md-sys-color-primary) 55%, var(--md-sys-color-on-surface)); margin: 0; }
.beyond__dir-heading {
margin: 0;
font: inherit;
letter-spacing: inherit;
color: var(--md-sys-color-on-surface);
}
.beyond__statement {
grid-column: 1 / -1;
max-inline-size: 22ch;
font-family: var(--font-display);
font-weight: 800;
font-stretch: 118%;
font-size: clamp(2.25rem, .9rem + 4.9vw, 5.5rem);
line-height: .98;
letter-spacing: -.04em;
text-wrap: balance;
color: var(--md-sys-color-on-surface);
}
.beyond__full {
grid-column: 1 / -1;
max-inline-size: 54ch;
padding-block-start: var(--space-5);
border-block-start: var(--hairline) solid color-mix(in srgb, var(--md-sys-color-outline) 70%, transparent);
font-family: var(--font-ui);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--md-sys-color-on-surface-variant);
text-wrap: pretty;
}
@container beyond-tiles (min-width: 44rem) {
.beyond__statement { grid-column: 1 / span 10; }
.beyond__full { grid-column: 6 / -1; }
}
:is([data-lit-within], [data-has-lit]) .beyond__pebble:not([data-lit]),
:is([data-lit-within], [data-has-lit]) .beyond__direction:not([data-lit]) { --gl-dim: 1; }
}
@layer sections {
.contact { padding-block-end: 0; }                           
.contact__inner { container: contact / inline-size; }
.contact__grid {
display: grid;
gap: var(--gap);
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "hello" "discord" "links" "where";
}
.contact__hello   { grid-area: hello; }
.contact__discord { grid-area: discord; }
.contact__links   { grid-area: links; }
.contact__where   { grid-area: where; }
@container contact (min-width: 44rem) {
.contact__grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-areas: "hello hello" "discord links" "where links";
}
}
@container contact (min-width: 62rem) {
.contact__grid {
grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
grid-template-rows: auto 1fr auto;
grid-template-areas: "hello discord" "hello links" "hello where";
}
}
.contact__hello {
--r: var(--r-pane);
display: flex;
flex-direction: column;
padding: clamp(1.5rem, .4rem + 4vw, 4rem);
}
.contact__kicker { margin-block-end: var(--space-5); color: var(--md-sys-color-on-surface); }
.contact__kicker .section__num { color: color-mix(in srgb, var(--md-sys-color-primary) 55%, var(--md-sys-color-on-surface)); }
.contact__title {
font-family: var(--font-display);
font-weight: 800;
font-stretch: 125%;
font-size: clamp(3.25rem, 15.5cqi, 8rem);
line-height: .9;
letter-spacing: -.045em;
color: var(--md-sys-color-on-surface);
}
@media (forced-colors: active) { .contact__title { margin-block-start: .25em; } }
@container contact (min-width: 62rem) { .contact__title { font-size: clamp(3.5rem, 9.6cqi, 9.5rem); } }
.contact__intro {
max-inline-size: 36ch;
margin-block-start: var(--space-5);
font-family: var(--font-ui);
font-size: var(--fs-lead);
line-height: var(--lh-lead);
color: var(--md-sys-color-on-surface-variant);
text-wrap: pretty;
}
.contact__list { display: block; margin: 0; }
.contact__hello .contact__list { margin-block-start: var(--space-6); }
.contact__row { padding-block: var(--space-5); border-block-start: var(--hairline) solid color-mix(in srgb, var(--md-sys-color-outline) 62%, transparent); }
.contact__hello .contact__row:last-child { padding-block-end: 0; }
.contact__label {
display: inline-flex;
align-items: center;
gap: .7em;
margin: 0 0 var(--space-3);
font-family: var(--font-mono);
font-weight: 500;
font-size: var(--fs-mono);
line-height: var(--lh-label);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--md-sys-color-on-surface);                      
}
.contact__mark { flex: none; inline-size: 1.35em; block-size: 1.35em; color: var(--md-sys-color-primary); }
.contact__dd { margin: 0; }
.contact__line {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-3) var(--space-5);
}
.contact__value { min-inline-size: 0; max-inline-size: 100%; }
.contact__note {
max-inline-size: 60ch;
margin: var(--space-3) 0 0;
font-family: var(--font-ui);
font-size: var(--fs-small);
line-height: var(--lh-small);
letter-spacing: var(--tr-small);
color: var(--md-sys-color-on-surface-variant);
}
.contact__addr {
--e: max(0px, calc(var(--hit) + 1px - 1.38em));
display: inline-block;
padding-block: calc(.1em + var(--e) / 2) calc(.16em + var(--e) / 2);
margin-block: calc(var(--e) / -2);
font-family: var(--font-display);
font-weight: 650;
font-stretch: 106%;
font-size: clamp(1.25rem, .85rem + 1.6cqi, 2.25rem);
line-height: 1.12;
letter-spacing: -.018em;
overflow-wrap: anywhere;
color: var(--md-sys-color-on-surface);
background-image:
linear-gradient(var(--md-sys-color-primary), var(--md-sys-color-primary)),
linear-gradient(color-mix(in srgb, var(--md-sys-color-on-surface) 34%, transparent), color-mix(in srgb, var(--md-sys-color-on-surface) 34%, transparent));
background-repeat: no-repeat;
background-size: 0% 2px, 100% 1px;
background-origin: content-box;
background-position: 100% calc(100% + .16em), 0 calc(100% + .16em);
transition: background-size var(--dur-link) var(--ease-link), background-position var(--dur-link) var(--ease-link), color var(--dur-fx) var(--ease-fx);
}
@media (hover: hover) and (pointer: fine) {
.contact__addr:hover { background-size: 100% 2px, 100% 1px; background-position: 0 calc(100% + .16em), 0 calc(100% + .16em); color: var(--md-sys-color-primary); }
}
.contact__addr:active { background-size: 100% 2px, 100% 1px; background-position: 0 calc(100% + .16em), 0 calc(100% + .16em); }
.contact__copy { flex: none; min-inline-size: 8.5rem; justify-content: center; }    
.contact__copy .icon { flex: none; }
.contact__copy:not([data-copied]) .contact__ico-done,
.contact__copy[data-copied] .contact__ico-copy { display: none; }
.contact__copy[data-copied] { color: var(--md-sys-color-primary); }
.contact__discord,
.contact__links { --r: var(--r-xl); padding: clamp(1.25rem, .6rem + 2.6vw, 2.5rem); }
.contact__discord .contact__row { padding-block: 0; border: 0; }
.contact__discord .contact__label { margin-block-end: var(--space-4); }
.contact__handle {
display: inline-block;
font-family: var(--font-mono);
font-weight: 500;
font-kerning: none;
font-size: clamp(2rem, 1rem + 3.2cqi, 3.5rem);
line-height: 1.15;
letter-spacing: 0;
color: var(--md-sys-color-on-surface);
}
.contact__links { display: flex; flex-direction: column; }
.contact__ext-list { flex: 1; display: grid; grid-auto-rows: 1fr; gap: var(--space-3); }
.contact__ext-item { display: grid; align-content: center; gap: var(--space-1); }
.contact__ext-item + .contact__ext-item { padding-block-start: var(--space-3); border-block-start: var(--hairline) solid color-mix(in srgb, var(--md-sys-color-outline) 55%, transparent); }
.contact__ext {
--r: var(--r-md);
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: var(--space-4);
min-block-size: calc(var(--hit) + var(--space-4));
padding: var(--space-3) var(--space-4) var(--space-2);
margin-inline: calc(var(--space-4) * -1);                  
color: var(--md-sys-color-on-surface);
background-color: transparent;
transition: background-color var(--dur-fx) var(--ease-fx);
}
.contact__ext-text { display: grid; gap: .2em; min-inline-size: 0; }
.contact__ext-label {
font-family: var(--font-display);
font-weight: 700;
font-stretch: 110%;
font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
line-height: 1.05;
letter-spacing: -.02em;
background-image: linear-gradient(var(--md-sys-color-primary), var(--md-sys-color-primary));
background-repeat: no-repeat;
background-size: 0% 2px;
background-position: 0 100%;
padding-block-end: .1em;
inline-size: fit-content;
transition: background-size var(--dur-link) var(--ease-link);
}
.contact__ext-value {
font-family: var(--font-mono);
font-size: var(--fs-mono);
line-height: var(--lh-mono);
color: var(--md-sys-color-on-surface-variant);
overflow-wrap: anywhere;
}
.contact__arrow {
inline-size: 1.5rem;
block-size: 1.5rem;
color: var(--md-sys-color-primary);
transition: transform var(--dur-press) var(--ease-press);
}
@media (hover: hover) and (pointer: fine) {
.contact__ext:hover { background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 7%, transparent); }
.contact__ext:hover .contact__ext-label { background-size: 100% 2px; }
.contact__ext:hover .contact__arrow { transform: translate(calc(var(--motion) * 3px), calc(var(--motion) * -3px)); }
}
.contact__ext:active { background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); }
.contact__ext:focus-visible .contact__ext-label { background-size: 100% 2px; }
.contact__links .contact__note { margin-block-start: 0; padding-inline-start: calc(1.35rem + var(--space-4)); }   
.contact__where {
--r: var(--r-lg);
display: flex;
align-items: center;
gap: .7em;
margin: 0;
min-block-size: 3.5rem;
padding-inline: clamp(1.25rem, .6rem + 2.6vw, 2.5rem);
font-family: var(--font-mono);
font-weight: 500;
font-size: var(--fs-mono);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--md-sys-color-on-surface);
}
.contact__where .icon { color: var(--md-sys-color-primary); }
.contact__where-dot { opacity: .85; white-space: pre; }
:is([data-lit-within], [data-has-lit]) :is(.contact__hello, .contact__discord, .contact__links, .contact__where):not([data-lit]) { --gl-dim: 1; }
}
@layer sections {
.footer { padding-block: var(--gap) max(var(--space-6), env(safe-area-inset-bottom)); }
.footer__pane {
--r: var(--r-lg);
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-5) var(--space-6);
padding: var(--space-5) clamp(1.25rem, .6rem + 2.6vw, 2.5rem);
font-family: var(--font-ui);
font-size: var(--fs-small);
line-height: var(--lh-small);
letter-spacing: var(--tr-small);
color: var(--md-sys-color-on-surface-variant);
}
@media (min-width: 62rem) {
.footer__pane {
grid-template-columns: minmax(11rem, 1fr) minmax(0, 3.4fr) auto;
align-items: start;
}
}
.footer__lead { display: grid; gap: var(--space-2); }
.footer__title {
margin: 0;
font-family: var(--font-mono);
font-weight: 500;
font-stretch: 100%;
font-size: var(--fs-mono);
line-height: var(--lh-label);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--md-sys-color-on-surface);
}
.footer__privacy { margin: 0; color: var(--md-sys-color-on-surface); }
.footer__credits {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
gap: var(--space-4) var(--space-6);
margin: 0;
}
.footer__credit { display: grid; align-content: start; gap: var(--space-1); min-inline-size: 0; }
.footer__label {
font-family: var(--font-mono);
font-weight: 500;
font-size: var(--fs-label);
line-height: var(--lh-label);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--md-sys-color-on-surface-variant);
}
.footer__text { margin: 0; white-space: pre-line; text-wrap: balance; color: var(--md-sys-color-on-surface); overflow-wrap: anywhere; }
.footer__link {
--p: calc((var(--hit) - 1lh) / 2 + .5px);
display: inline-block;
padding: var(--p);
margin: calc(var(--p) * -1);
color: var(--md-sys-color-primary);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: .22em;
text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
transition: text-decoration-color var(--dur-link) var(--ease-link);
}
@media (hover: hover) and (pointer: fine) {
.footer__link:hover { text-decoration-thickness: 1.5px; text-decoration-color: currentColor; }
}
.footer__link:active { text-decoration-thickness: 1.5px; text-decoration-color: currentColor; }
.footer__link:focus-visible {
outline-offset: calc(var(--p) * -1 + var(--ring-gap));
box-shadow: none;
border-radius: var(--r-xs);
}
.footer__meta {
display: flex;
align-items: center;
gap: .8em;
margin: 0;
font-family: var(--font-mono);
font-size: var(--fs-mono);
line-height: var(--lh-mono);
white-space: nowrap;
color: var(--md-sys-color-on-surface);
}
.footer__version { color: var(--md-sys-color-on-surface-variant); font-variant-numeric: tabular-nums; }
.footer__copy { font-family: var(--font-ui); font-size: var(--fs-small); }
.footer__led {
flex: none;
inline-size: 6px;
block-size: 6px;
border-radius: 2px;
background: var(--md-sys-color-primary);
box-shadow: 0 0 0 1px rgb(0 0 0 / .35), 0 0 7px 1px color-mix(in srgb, var(--md-sys-color-primary) 70%, transparent);
animation: footer-pin13 2s steps(1, end) infinite;
}
@supports (corner-shape: superellipse(2.3)) { .footer__led { corner-shape: var(--corner-shape); } }
@keyframes footer-pin13 {
0%   { opacity: 1; }
50%  { opacity: .14; }
}
@media (prefers-reduced-motion: reduce) { .footer__led { animation: none; opacity: 1; } }
html.reduced-motion .footer__led { animation: none; opacity: 1; }
}
@layer sections {
:is(.palette, .shortcuts, .seed-picker)::before { opacity: var(--ov-o, 1); transition: none; }
:is(.palette, .shortcuts, .seed-picker) > * { opacity: var(--ov-o, 1); }
:is(.palette, .shortcuts)::backdrop { opacity: var(--ov-o, 1); }
:is(.palette, .shortcuts)[popover][data-glass-mode="css"]::backdrop { background: rgb(0 0 0 / .32); }
html[data-scroll-lock] { overflow: hidden; scrollbar-gutter: stable; }
:is(.palette__close, .palette__opt, .shortcuts__close, .shortcuts__toggle, .shortcuts__track, .shortcuts__thumb, .seed-picker__option, .seed-picker__swatch, .palette__swatch) {
border-radius: calc(var(--r, var(--r-md)) * var(--r-k));
}
@supports (corner-shape: superellipse(2.3)) {
:is(.palette__close, .palette__opt, .shortcuts__close, .shortcuts__toggle, .shortcuts__track, .shortcuts__thumb, .seed-picker__option, .seed-picker__swatch, .palette__swatch) {
corner-shape: var(--corner-shape);
}
}
.palette, .shortcuts {
--r: var(--r-lg);
--ov-top: clamp(var(--nav-space), 14vh, 10rem);                                    
--ov-side: max(var(--gap), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
--ov-gap-bottom: max(var(--gap), env(safe-area-inset-bottom, 0px));
}
.palette[open], .shortcuts[open] {
position: fixed;
inset: calc(var(--ov-top) + var(--vv-top, 0px)) 0 auto 0;                          
margin: 0 auto;
inline-size: min(40rem, 100% - 2 * var(--ov-side));
max-inline-size: none;
max-block-size: min(36rem, calc(var(--vv-h, 100dvh) - var(--ov-top) - var(--ov-gap-bottom)));
padding: 0;
overflow: visible;                                                                 
color: var(--md-sys-color-on-surface);
}
.shortcuts[open] { inline-size: min(36rem, 100% - 2 * var(--ov-side)); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 699px) {
.palette, .shortcuts { --ov-top: max(var(--gap), env(safe-area-inset-top, 0px)); }
.palette[open], .shortcuts[open] { inline-size: calc(100% - 2 * var(--ov-side)); }
.shortcuts[open] { max-block-size: calc(var(--vv-h, 100dvh) - var(--ov-top) - var(--ov-gap-bottom)); }   
}
.palette[open] { display: flex; flex-direction: column; }
.palette__bar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-3) var(--space-2); }
.palette__field { flex: 1 1 auto; min-inline-size: 0; }
.palette__input { text-overflow: ellipsis; }
.palette__input::placeholder { color: var(--md-sys-color-on-surface-variant); }                 
.palette__esc { margin-inline-start: auto; flex: none; }
.palette__close {
display: none; flex: none; place-items: center;
--r: var(--r-full);
inline-size: var(--hit); block-size: var(--hit);
color: var(--md-sys-color-on-surface-variant);
}
@media (pointer: coarse), (max-width: 699px) {
.palette__close { display: inline-grid; }
.palette__esc { display: none; }
}
.palette__list { position: relative; flex: 1 1 auto; min-block-size: 0; margin: 0; padding: 0 var(--space-2) var(--space-2); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.palette__set, .palette__group { list-style: none; margin: 0; padding: 0; }
.palette__group-label {
padding: var(--space-3) var(--space-3) var(--space-1);
color: var(--md-sys-color-on-surface-variant);
}
.palette__opt {
--r: var(--r-md);
position: relative;
display: flex; align-items: center; gap: var(--space-3);
min-block-size: var(--hit); padding: .45rem var(--space-3);
font-family: var(--font-ui); font-weight: 480; font-size: var(--fs-body); line-height: 1.3;
color: var(--md-sys-color-on-surface);
cursor: pointer; user-select: none; -webkit-user-select: none;
transition: background-color var(--dur-fx) var(--ease-fx), box-shadow var(--dur-fx) var(--ease-fx);
}
.palette__opt[aria-selected="true"] {
background: color-mix(in srgb, var(--glass-tint-strong) 78%, transparent);
box-shadow:
var(--focus-halo, 0 0 #0000),
inset 0 0 0 1.5px color-mix(in srgb, var(--glass-accent) 82%, transparent),
inset 0 1px 0 rgb(255 255 255 / .16);
}
.palette__label { min-inline-size: 0; overflow-wrap: anywhere; }
.palette__hit {
font-weight: 760;
text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em;
text-decoration-color: var(--glass-accent);
}
.palette__meta {
margin-inline-start: auto; flex: none; max-inline-size: 55%;
display: inline-flex; align-items: center; gap: var(--space-2);
font-family: var(--font-mono); font-size: var(--fs-mono); line-height: 1;
color: var(--md-sys-color-on-surface-variant);
}
.palette__value { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette__state { font-weight: 600; letter-spacing: .02em; line-height: 1.25; text-align: end; }
.palette__state[data-on] { color: var(--md-sys-color-on-surface); }
.palette__opt[aria-disabled="true"] { cursor: default; }                                      
.palette__meta .icon { inline-size: 1.05em; block-size: 1.05em; }
html[data-shortcuts="off"] .palette__kbd { display: none; }
:is(.palette__kbd, .palette__esc, .shortcuts__keys .kbd) { color: var(--md-sys-color-on-surface); }
.palette__swatch {
--r: var(--r-full);
display: grid; place-items: center; flex: none;
inline-size: 1.25rem; block-size: 1.25rem;
background: var(--seed-swatch);
box-shadow: inset 0 0 0 1px rgb(255 255 255 / .38), inset 0 -3px 5px rgb(0 0 0 / .26);
color: rgb(0 0 0 / .78);
}
.palette__swatch .icon { inline-size: .8rem; block-size: .8rem; --icon-sw: 2.6; }
.palette__swatch[data-current] { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .38), 0 0 0 2px var(--glass-accent); }
.palette__empty { margin: 0; padding: var(--space-3) calc(var(--space-2) + var(--space-3)) var(--space-1); color: var(--md-sys-color-on-surface-variant); }
.palette__hint {
flex: none; margin: 0; padding: var(--space-3) calc(var(--space-2) + var(--space-3));
border-block-start: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 70%, transparent);
font-family: var(--font-mono); font-size: var(--fs-label); line-height: 1.3; letter-spacing: .02em;
color: var(--md-sys-color-on-surface-variant);
}
@media (pointer: coarse) { .palette__hint { display: none; } }
@media (max-width: 559px) { .palette__value { display: none; } }
.shortcuts__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-3) var(--space-2) var(--space-5); }
.shortcuts__title { font: 750 var(--fs-lead) / 1.15 var(--font-display); font-stretch: 112%; letter-spacing: var(--tr-h3); }
.shortcuts__close {
--r: var(--r-full);
display: inline-grid; place-items: center; flex: none;
inline-size: var(--hit); block-size: var(--hit);
color: var(--md-sys-color-on-surface-variant);
}
.shortcuts__list { display: grid; margin: 0; padding: 0 var(--space-5); }
.shortcuts__row {
display: grid; grid-template-columns: minmax(7.5rem, 11.5rem) minmax(0, 1fr); align-items: center; column-gap: var(--space-4);
padding-block: var(--space-2);
border-block-start: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 55%, transparent);
}
.shortcuts__row:first-child { border-block-start: 0; }
.shortcuts__keys { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: 0; }
.shortcuts__or, .shortcuts__sep { padding-inline: .15rem; font-size: var(--fs-small); color: var(--md-sys-color-on-surface-variant); }
.shortcuts__text { margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); }
@media (max-width: 479px) { .shortcuts__row { grid-template-columns: minmax(0, 1fr); row-gap: .35rem; } }
.shortcuts__switch {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
margin: var(--space-3) var(--space-5) 0; padding-block-start: var(--space-3);
border-block-start: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 55%, transparent);
}
.shortcuts__switch-label { font-weight: 600; font-size: var(--fs-small); }
.shortcuts__control { display: inline-flex; align-items: center; gap: var(--space-3); }
.shortcuts__toggle { --r: var(--r-full); display: inline-flex; align-items: center; min-block-size: var(--hit); cursor: pointer; }
.shortcuts__track {
--r: var(--r-full);
position: relative; flex: none; inline-size: 3.4rem; block-size: 2rem;
background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--md-sys-color-outline) 85%, transparent), inset 0 2px 4px rgb(0 0 0 / .4);
transition: background-color var(--dur-fx) var(--ease-fx), box-shadow var(--dur-fx) var(--ease-fx);
}
.shortcuts__thumb {
--r: var(--r-full);
position: absolute; inset-block-start: 50%; inset-inline-start: .3rem; translate: 0 -50%;
inline-size: 1.3rem; block-size: 1.3rem;
background: var(--md-sys-color-on-surface-variant);
box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), 0 1px 3px rgb(0 0 0 / .5);
transition: inset-inline-start var(--dur-press) var(--ease-press), inline-size var(--dur-press) var(--ease-press), background-color var(--dur-fx) var(--ease-fx);
}
.shortcuts__toggle[aria-checked="true"] .shortcuts__track {
background: var(--glass-tint-strong);
box-shadow: inset 0 0 0 1.5px var(--glass-accent), inset 0 2px 4px rgb(0 0 0 / .35);
}
.shortcuts__toggle[aria-checked="true"] .shortcuts__thumb { inset-inline-start: calc(100% - 1.8rem); inline-size: 1.5rem; background: var(--glass-accent); }
.shortcuts__toggle:active .shortcuts__thumb { inline-size: 1.75rem; }
.shortcuts__toggle[aria-checked="true"]:active .shortcuts__thumb { inset-inline-start: calc(100% - 2.05rem); }
.shortcuts__state { min-inline-size: 2.2ch; font-size: var(--fs-small); font-weight: 650; }
.shortcuts__note { margin: var(--space-2) var(--space-5) 0; max-inline-size: 58ch; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--md-sys-color-on-surface-variant); }
.shortcuts__foot {
position: relative; margin: var(--space-4) var(--space-5) var(--space-5);
font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .04em; text-transform: lowercase;
color: var(--md-sys-color-on-surface-variant);
}
.shortcuts__gap { font: inherit; font-variant-numeric: tabular-nums; color: var(--md-sys-color-on-surface); }
.shortcuts__probe { position: absolute; inset: 0 auto auto 0; inline-size: var(--gap); block-size: 0; visibility: hidden; pointer-events: none; }
[data-seed-option="aurora"],  [data-swatch="aurora"]  { --seed-swatch: rgb(108 178 57); }
[data-seed-option="magenta"], [data-swatch="magenta"] { --seed-swatch: rgb(227 121 224); }
[data-seed-option="azure"],   [data-swatch="azure"]   { --seed-swatch: rgb(117 158 255); }
[data-seed-option="amber"],   [data-swatch="amber"]   { --seed-swatch: rgb(255 119 93); }
.seed-picker {
--r: var(--r-lg);
position: fixed; inset: 0 auto auto 0; z-index: var(--z-popover);              
display: grid; gap: 2px;
inline-size: min(17rem, 100% - 2 * var(--gap));
padding: var(--space-2);
color: var(--md-sys-color-on-surface);
}
.seed-picker__group { display: grid; gap: 2px; }
.seed-picker__title { margin: 0; padding: var(--space-2) var(--space-3) var(--space-1); }
.seed-picker__option {
--r: var(--r-md);
display: flex; align-items: center; gap: var(--space-3);
inline-size: 100%; min-block-size: var(--hit); padding: .3rem var(--space-3);
font-family: var(--font-ui); font-weight: 500; font-size: var(--fs-body); line-height: 1.2; text-align: start;
color: var(--md-sys-color-on-surface);
cursor: pointer;
transition: background-color var(--dur-fx) var(--ease-fx), box-shadow var(--dur-fx) var(--ease-fx);
}
@media (hover: hover) and (pointer: fine) {
.seed-picker__option:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
}
.seed-picker__option[aria-checked="true"] {
background: color-mix(in srgb, var(--glass-tint-strong) 78%, transparent);
box-shadow:
var(--focus-halo, 0 0 #0000),
inset 0 0 0 1.5px color-mix(in srgb, var(--glass-accent) 82%, transparent),
inset 0 1px 0 rgb(255 255 255 / .16);
}
.seed-picker__swatch {
--r: var(--r-full);
display: grid; place-items: center; flex: none;
inline-size: 1.75rem; block-size: 1.75rem;
background: var(--seed-swatch);
box-shadow: inset 0 0 0 1px rgb(255 255 255 / .4), inset 0 -4px 6px rgb(0 0 0 / .26), 0 1px 3px rgb(0 0 0 / .4);
color: rgb(0 0 0 / .78);
}
.seed-picker__swatch .icon { inline-size: 1rem; block-size: 1rem; --icon-sw: 2.6; opacity: 0; }
.seed-picker__option[aria-checked="true"] .seed-picker__swatch .icon { opacity: 1; }
.seed-picker__hint { margin: var(--space-1) 0 0; padding: var(--space-2) var(--space-3) var(--space-1); font-size: var(--fs-label); line-height: 1.35; color: var(--md-sys-color-on-surface-variant); }
@media (forced-colors: active) {
.palette__opt[aria-selected="true"], .seed-picker__option[aria-checked="true"] { background: Canvas; color: CanvasText; box-shadow: none; outline: 2px solid Highlight; outline-offset: -2px; }
.palette__opt[aria-selected="true"] .palette__meta { color: CanvasText; }
.palette__swatch, .seed-picker__swatch { forced-color-adjust: none; border: 1px solid CanvasText; }
.shortcuts__track { background: Canvas; border: 1px solid CanvasText; box-shadow: none; }
.shortcuts__thumb { background: CanvasText; box-shadow: none; }
.shortcuts__toggle[aria-checked="true"] .shortcuts__track { background: Highlight; }
.shortcuts__toggle[aria-checked="true"] .shortcuts__thumb { background: HighlightText; }
:is(.palette, .shortcuts)::backdrop { background: transparent; }
}
}