@font-face {
font-family: "Abeer Display";
src: url("../assets-e2cf9e11/fonts/abeer-display.woff2") format("woff2");
font-weight: 500 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Abeer Text";
src: url("../assets-e2cf9e11/fonts/abeer-text.woff2") format("woff2");
font-weight: 300 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Abeer Mono";
src: url("../assets-e2cf9e11/fonts/GoogleSansCode-mono.woff2") format("woff2");
font-weight: 300 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Abeer Display Fallback";
src: local("Times New Roman Bold"), local("TimesNewRomanPS-BoldMT"), local("Liberation Serif Bold"), local("Tinos Bold");
font-weight: 500 900;
size-adjust: 109.7%;
ascent-override: 98.63%;
descent-override: 22.88%;
line-gap-override: 0%;
}
@font-face {
font-family: "Abeer Text Fallback";
src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans"), local("Arimo");
font-weight: 300 349;
size-adjust: 101.8%;
ascent-override: 104.72%;
descent-override: 29.47%;
line-gap-override: 0%;
}
@font-face {
font-family: "Abeer Text Fallback";
src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans"), local("Arimo");
font-weight: 350 399;
size-adjust: 102.0%;
ascent-override: 104.51%;
descent-override: 29.41%;
line-gap-override: 0%;
}
@font-face {
font-family: "Abeer Text Fallback";
src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans"), local("Arimo");
font-weight: 400 449;
size-adjust: 102.3%;
ascent-override: 104.20%;
descent-override: 29.33%;
line-gap-override: 0%;
}
@font-face {
font-family: "Abeer Text Fallback";
src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans"), local("Arimo");
font-weight: 450 599;
size-adjust: 105.8%;
ascent-override: 100.76%;
descent-override: 28.36%;
line-gap-override: 0%;
}
@font-face {
font-family: "Abeer Text Fallback";
src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Helvetica-Bold"), local("Liberation Sans Bold"), local("Arimo Bold");
font-weight: 600 649;
size-adjust: 99.2%;
ascent-override: 107.46%;
descent-override: 30.24%;
line-gap-override: 0%;
}
@font-face {
font-family: "Abeer Text Fallback";
src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Helvetica-Bold"), local("Liberation Sans Bold"), local("Arimo Bold");
font-weight: 650 700;
size-adjust: 100.6%;
ascent-override: 105.96%;
descent-override: 29.82%;
line-gap-override: 0%;
}
@font-face {
font-family: "Abeer Mono 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%;
}
@layer tokens {
:root {
--font-display: "Abeer Display", "Abeer Display Fallback", "Times New Roman", serif;
--font-ui: "Abeer Text", "Abeer Text Fallback", system-ui, sans-serif;
--font-mono: "Abeer Mono", "Abeer Mono Fallback", ui-monospace, monospace;
}
}
@layer tokens {
:root:not([data-seed]), :root[data-seed="magenta"] {
--md-sys-color-primary: light-dark(#874b6d, #fbb0d7);
--md-sys-color-on-primary: light-dark(#ffffff, #511d3d);
--md-sys-color-primary-container: light-dark(#ffd8ea, #6c3455);
--md-sys-color-on-primary-container: light-dark(#6c3455, #ffd8ea);
--md-sys-color-secondary: light-dark(#715764, #dfbecd);
--md-sys-color-on-secondary: light-dark(#ffffff, #402a35);
--md-sys-color-secondary-container: light-dark(#fcd9e9, #58404c);
--md-sys-color-on-secondary-container: light-dark(#58404c, #fcd9e9);
--md-sys-color-tertiary: light-dark(#80543c, #f3ba9c);
--md-sys-color-on-tertiary: light-dark(#ffffff, #4a2712);
--md-sys-color-tertiary-container: light-dark(#ffdbc9, #653d26);
--md-sys-color-on-tertiary-container: light-dark(#653d26, #ffdbc9);
}
:root[data-seed="aurora"] {
--md-sys-color-primary: light-dark(#476730, #acd28f);
--md-sys-color-on-primary: light-dark(#ffffff, #1a3705);
--md-sys-color-primary-container: light-dark(#c7eea9, #304f1a);
--md-sys-color-on-primary-container: light-dark(#304f1a, #c7eea9);
--md-sys-color-secondary: light-dark(#56624b, #bdcbaf);
--md-sys-color-on-secondary: light-dark(#ffffff, #283420);
--md-sys-color-secondary-container: light-dark(#d9e7ca, #3f4a35);
--md-sys-color-on-secondary-container: light-dark(#3f4a35, #d9e7ca);
--md-sys-color-tertiary: light-dark(#386665, #a0cfce);
--md-sys-color-on-tertiary: light-dark(#ffffff, #003737);
--md-sys-color-tertiary-container: light-dark(#bbecea, #1e4e4d);
--md-sys-color-on-tertiary-container: light-dark(#1e4e4d, #bbecea);
}
:root[data-seed="azure"] {
--md-sys-color-primary: light-dark(#485d92, #b1c5ff);
--md-sys-color-on-primary: light-dark(#ffffff, #162e60);
--md-sys-color-primary-container: light-dark(#dae2ff, #2f4578);
--md-sys-color-on-primary-container: light-dark(#2f4578, #dae2ff);
--md-sys-color-secondary: light-dark(#585e71, #c0c6dc);
--md-sys-color-on-secondary: light-dark(#ffffff, #2a3042);
--md-sys-color-secondary-container: light-dark(#dce2f9, #404659);
--md-sys-color-on-secondary-container: light-dark(#404659, #dce2f9);
--md-sys-color-tertiary: light-dark(#735572, #e0bbdd);
--md-sys-color-on-tertiary: light-dark(#ffffff, #412742);
--md-sys-color-tertiary-container: light-dark(#fed7fa, #593d59);
--md-sys-color-on-tertiary-container: light-dark(#593d59, #fed7fa);
}
:root[data-seed="amber"] {
--md-sys-color-primary: light-dark(#8e4d31, #ffb598);
--md-sys-color-on-primary: light-dark(#ffffff, #552008);
--md-sys-color-primary-container: light-dark(#ffdbce, #71361c);
--md-sys-color-on-primary-container: light-dark(#71361c, #ffdbce);
--md-sys-color-secondary: light-dark(#77574b, #e7beae);
--md-sys-color-on-secondary: light-dark(#ffffff, #442a20);
--md-sys-color-secondary-container: light-dark(#ffdbce, #5d4035);
--md-sys-color-on-secondary-container: light-dark(#5d4035, #ffdbce);
--md-sys-color-tertiary: light-dark(#685f30, #d3c78e);
--md-sys-color-on-tertiary: light-dark(#ffffff, #383006);
--md-sys-color-tertiary-container: light-dark(#f0e3a8, #4f471b);
--md-sys-color-on-tertiary-container: light-dark(#4f471b, #f0e3a8);
}
}
@layer reset, tokens, base, components, sections, utilities;
@layer tokens {
:root {
color-scheme: light dark;
--paper: light-dark(#ededed, #121110);              
--paper-raised: light-dark(#f6f5f2, #1b1a18);       
--paper-sunken: light-dark(#e2e1dd, #0d0c0b);       
--ink: light-dark(#111110, #f1efea);                
--ink-2: light-dark(#3f3e3b, #c9c6c0);              
--ink-3: light-dark(#5a5853, #9d9a94);              
--ink-rgb: 17 17 16;                                
--line: color-mix(in srgb, var(--ink) 14%, transparent);          
--line-strong: color-mix(in srgb, var(--ink) 50%, transparent);   
--scrim: light-dark(rgb(17 17 16 / .42), rgb(0 0 0 / .62));
--accent: var(--md-sys-color-primary);              
--accent-soft: var(--md-sys-color-primary-container);
--accent-soft-ink: var(--md-sys-color-on-primary-container);
--shadow-overlay: 0 1px 2px light-dark(rgb(17 17 16 / .08), rgb(0 0 0 / .4)), 0 14px 44px -8px light-dark(rgb(17 17 16 / .22), rgb(0 0 0 / .7));   
--blob-magenta-1: #ff9a3d; --blob-magenta-2: #ff3d8b; --blob-magenta-3: #a06bff; --blob-magenta-4: #4d83ff;
--blob-aurora-1: #8fe28a;  --blob-aurora-2: #2fc4b2;  --blob-aurora-3: #5b88e8;  --blob-aurora-4: #a070dc;
--blob-azure-1: #8fd3ff;   --blob-azure-2: #4ea3ff;   --blob-azure-3: #6f7cff;   --blob-azure-4: #b08cff;
--blob-amber-1: #ffd27a;   --blob-amber-2: #ff9a3d;   --blob-amber-3: #f2554a;   --blob-amber-4: #ff6fa0;
--blob-a: .92; --blob-lift: 0%; --grain-a: .3; --blob-blend: normal;   
--gutter: max(clamp(20px, 5vw, 72px), calc(env(safe-area-inset-left, 0px) + 16px), calc(env(safe-area-inset-right, 0px) + 16px));
--column: 1200px;                                  
--grid-gap: clamp(16px, 2vw, 32px);
--pad: clamp(20px, 3vw, 40px);
--section-y: clamp(72px, 10vh, 140px);              
--measure: calc(62 * .594em);                         
--nav-h: calc(64px + env(safe-area-inset-top, 0px));   
--nav-space: var(--nav-h);
--dock-h: 0px;                                     
--hit: 44px;                                       
--hairline: 1px;
--ring-w: 2px;
--ring-gap: 2px;
--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: 6px;
--r-sm: 10px;
--r-md: 16px;
--r-lg: 24px;
--r-full: 9999px;
--font-display: "Abeer Display", "Abeer Display Fallback", "Iowan Old Style", Georgia, "Times New Roman", serif;
--font-text: "Abeer Text", "Abeer Text Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: "Abeer Mono", "Abeer Mono Fallback", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
--fs-hero: clamp(3.75rem, 1.1rem + 13.2vw, 12.5rem);    
--fs-display: clamp(2.75rem, 1.4rem + 5.6vw, 6.5rem);    
--fs-h2: clamp(2.25rem, 1.3rem + 3.6vw, 4.75rem);        
--fs-h3: clamp(1.5rem, 1.15rem + 1.2vw, 2.25rem);        
--fs-sub: clamp(1.25rem, 1rem + 1.1vw, 1.75rem);         
--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(.75rem, .73rem + .1vw, .8125rem);       
--lh-tight: .92;
--lh-heading: 1.05;
--lh-lead: 1.4;
--lh-body: 1.6;
--lh-small: 1.5;
--lh-label: 1.3;
--tr-hero: -.045em;
--tr-display: -.035em;
--tr-h2: -.03em;
--tr-h3: -.02em;
--tr-label: .14em;
--tr-mono: .02em;
--motion: 1;
--ease-spring-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);
--dur-spring-fast: 396ms;
--ease-spring-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);
--dur-spring-default: 460ms;
--ease-spring-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);
--dur-spring-slow: 614ms;
--ease-fx-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);
--dur-fx-fast: 169ms;
--dur-fx: var(--dur-fx-fast);                      
--ease-fx: var(--ease-fx-fast);
--dur-press: var(--dur-spring-fast);               
--ease-press: var(--ease-spring-fast);
--dur-move: var(--dur-spring-default);             
--ease-move: var(--ease-spring-default);
--dur-slow: var(--dur-spring-slow);
--ease-slow: var(--ease-spring-slow);
--dur-link: 280ms;                                 
--ease-link: cubic-bezier(.2, 0, 0, 1);
--dur-reveal: 700ms;                               
--ease-reveal: cubic-bezier(.05, .7, .1, 1);
--reveal-y: 12px;
--z-blobs: -1;
--z-sticky: 20;
--z-nav: 30;
--z-dock: 30;
--z-popover: 40;
--z-dialog: 50;
--z-skip: 100;
}
@media (prefers-color-scheme: dark) {
:root:not([data-scheme="light"]) { --ink-rgb: 241 239 234; --blob-a: .9; --blob-lift: 12%; --grain-a: .18; --blob-blend: screen; }
}
:root[data-scheme="light"] { color-scheme: light; }
:root[data-scheme="dark"] { color-scheme: dark; --ink-rgb: 241 239 234; --blob-a: .9; --blob-lift: 12%; --grain-a: .18; --blob-blend: screen; }
@media (prefers-contrast: more) {
:root { --line: color-mix(in srgb, var(--ink) 40%, transparent); --line-strong: var(--ink); }
}
@media (max-width: 699px) {
:root { --nav-h: calc(56px + env(safe-area-inset-top, 0px)); --dock-h: 60px; --section-y: clamp(64px, 9vh, 100px); }
}
@media (prefers-reduced-motion: reduce) {
:root {
--motion: 0; --reveal-y: 0px;
--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; --dur-reveal: 1ms;
}
}
:root.reduced-motion {
--motion: 0; --reveal-y: 0px;
--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; --dur-reveal: 1ms;
}
}
@layer reset, tokens, base, 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; }
:where(p, li, dd, blockquote) { overflow-wrap: break-word; }
}
@layer base {
html {
background: var(--paper);
color: var(--ink);
scroll-padding-block-start: calc(var(--nav-space) + var(--space-5));
scroll-padding-block-end: calc(var(--dock-h) + var(--space-4));       
-webkit-tap-highlight-color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
html:not(.reduced-motion) { scroll-behavior: smooth; }
}
body {   
margin: 0;
min-block-size: 100vh; min-block-size: 100svh;
padding-block-end: var(--dock-h);
color: var(--ink);
font: 400 var(--fs-body) / var(--lh-body) var(--font-text);
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: clip;
}
::selection { background: var(--accent-soft); color: var(--accent-soft-ink); }
::placeholder { color: var(--ink-3); opacity: 1; }
:where(main) { display: block; position: relative; }
:where(h1, h2, h3) { font-family: var(--font-display); font-weight: var(--fw-display, 800); text-transform: lowercase; text-wrap: balance; }
:where(h1) { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--tr-display); }
:where(h2) { font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--tr-h2); }
:where(h3) { font-size: var(--fs-h3); line-height: 1.12; letter-spacing: var(--tr-h3); }
:where(h4, h5, h6) { font: 600 var(--fs-body) / 1.3 var(--font-text); }
:where(p, li, dd) { text-wrap: pretty; }
:where(strong, b) { font-weight: 650; }
:where(code, kbd, samp) { font-family: var(--font-mono); font-size: .9em; }
:where(hr) { border: 0; border-block-start: var(--hairline) solid var(--line); }
.t-hero { font-family: var(--font-display); font-weight: var(--fw-display, 800); font-size: var(--fs-hero); line-height: var(--lh-tight); letter-spacing: var(--tr-hero); text-transform: lowercase; text-wrap: balance; }
.section__title, .t-h2 { font-family: var(--font-display); font-weight: var(--fw-display, 800); font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--tr-h2); text-transform: lowercase; text-wrap: balance; }
.t-h3 { font-family: var(--font-display); font-weight: var(--fw-display, 800); font-size: var(--fs-h3); line-height: 1.12; letter-spacing: var(--tr-h3); text-transform: lowercase; }
.t-sub { font-family: var(--font-text); font-weight: 300; font-size: var(--fs-sub); line-height: 1.3; letter-spacing: -.01em; color: var(--ink-2); }
.t-lead { font-family: var(--font-text); font-weight: 350; font-size: var(--fs-lead); line-height: var(--lh-lead); letter-spacing: -.005em; }
.t-reading { font-family: var(--font-text); font-weight: 400; font-size: var(--fs-reading); line-height: 1.55; }
.t-body { font-family: var(--font-text); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); }
.t-small { font-family: var(--font-text); font-weight: 450; font-size: var(--fs-small); line-height: var(--lh-small); }
.t-label { font-family: var(--font-text); font-weight: 600; 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: 1.5; letter-spacing: var(--tr-mono); }
.t-balance { text-wrap: balance; }
.t-pretty { text-wrap: pretty; }
.container { inline-size: min(100% - 2 * var(--gutter), var(--column)); margin-inline: auto; }
.section { position: relative; padding-block: var(--section-y); }
.section + .section { padding-block-start: 0; }                          
.section__head { display: grid; gap: var(--space-4); margin-block-end: var(--space-8); max-inline-size: 48rem; }
.section__kicker { display: flex; align-items: center; gap: .9em; margin: 0; font: 600 var(--fs-label) / var(--lh-label) var(--font-text); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-3); }
.section__num { display: inline-flex; align-items: center; gap: .9em; font-family: var(--font-mono); font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--ink); }
.section__num::after { content: ""; inline-size: 2.4em; block-size: 1px; background: var(--line-strong); }
.section__title { margin: 0; }
.section__intro { margin: 0; max-inline-size: var(--measure); font: 350 var(--fs-lead) / var(--lh-lead) var(--font-text); color: var(--ink-2); }
.rule { border: 0; border-block-start: var(--hairline) solid var(--line); margin: 0; }
.stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-4)); }
.measure { max-inline-size: var(--measure); }
.sr-only {
position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden;
clip-path: inset(50%); white-space: nowrap; border: 0;
}
:where(a:not([class])), .link {
color: inherit;
text-decoration: none;
background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
padding-block-end: .06em;
transition: background-size var(--dur-link) var(--ease-link), color var(--dur-fx) linear;
}
:where(a:not([class])):hover, .link:hover { background-size: 100% 2px; }
.link-wipe {
color: inherit; text-decoration: none;
background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
padding-block-end: .15em;
transition: background-size var(--dur-link) var(--ease-link);
}
.link-wipe:hover, .link-wipe:focus-visible, .link-wipe[aria-current] { background-size: 100% 1px; }
:where(:focus-visible) { outline: var(--ring-w) solid var(--ink); outline-offset: var(--ring-gap); box-shadow: 0 0 0 var(--ring-gap) var(--paper); border-radius: var(--focus-r, inherit); }
:where(:focus):not(:focus-visible) { outline: none; }
main:focus-visible, [data-no-ring]:focus-visible { outline: none; box-shadow: none; }
:where(a:not([class])):focus-visible { border-radius: var(--r-xs); }
.skip-link {
position: fixed; inset-block-start: var(--space-3); inset-inline-start: var(--gutter); z-index: var(--z-skip);
padding: .75rem 1.25rem; border-radius: var(--r-full);
background: var(--ink); color: var(--paper);
font: 600 var(--fs-small) / 1 var(--font-text); text-decoration: none;
transform: translateY(-200%);
}
.skip-link:focus, .skip-link:focus-visible { transform: none; outline: 2px solid var(--paper); outline-offset: 2px; box-shadow: 0 0 0 4px var(--ink); }
html.reveal-on [data-reveal]:not([data-in]) { opacity: 0; transform: translateY(var(--reveal-y)); }
html.reveal-on [data-reveal] {
transition: opacity var(--dur-reveal) var(--ease-reveal) calc(var(--reveal-i, 0) * 70ms), transform var(--dur-reveal) var(--ease-reveal) calc(var(--reveal-i, 0) * 70ms);
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
[data-reveal] { opacity: 1 !important; transform: none !important; }
}
html.reduced-motion { scroll-behavior: auto; }
html.reduced-motion *, html.reduced-motion *::before, html.reduced-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
html.reduced-motion [data-reveal] { opacity: 1 !important; transform: none !important; }
html.reduced-motion :is(a, button, .btn, .chip, .tag, .field) { transition-duration: 100ms !important; }
@media (forced-colors: active) {
:where(:focus-visible) { outline: 2px solid Highlight; box-shadow: none; }
:where(a:not([class])), .link, .link-wipe { color: LinkText; background: none; text-decoration: underline; }
.link-wipe[aria-current] { text-decoration-thickness: 3px; text-underline-offset: .3em; }
.skip-link { background: Canvas; color: CanvasText; border: 2px solid CanvasText; }
::selection { background: Highlight; color: HighlightText; }
.blobs { display: none; }
}
@media (prefers-contrast: more) {
:root { --ink-2: var(--ink); --ink-3: var(--ink); }
}
}
@media print {
@page { margin: 16mm; }
:root, :root[data-scheme] {
--paper: #fff; --paper-raised: #fff; --paper-sunken: #fff;
--ink: #000; --ink-2: #222; --ink-3: #444; --ink-rgb: 0 0 0; --line: #999; --line-strong: #666;
}
html, body { background: #fff !important; color: #000 !important; }
body { font-size: 11pt; padding: 0; }
.blobs, .nav, .dock, .skip-link, #copy-status, dialog, [data-seed-open], .btn--icon, .btn--circle, .field { display: none !important; }
[data-reveal] { opacity: 1 !important; transform: none !important; }
.section { padding-block: 10mm; break-inside: avoid-page; }
h1, h2, h3 { break-after: avoid; }
a[href^="http"]:not(.btn)::after, a[href^="mailto:"]:not(.btn)::after { content: " (" attr(href) ")"; font-size: .85em; color: #444; }
*, *::before, *::after { animation: none !important; transition: none !important; box-shadow: none !important; text-shadow: none !important; }
}
@layer utilities {
html:not(.js) :is([data-copy], [data-seed-open], .nav__search, .nav__seed, .dock__search) { display: none; }
}
@layer components {
.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--thin { --icon-sw: 1; }
.btn {
--btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-strong);
position: relative; isolation: isolate;
display: inline-flex; align-items: center; justify-content: center; gap: .6em;
min-block-size: var(--hit); padding: .65em 1.4em;
border: 1px solid var(--btn-bd); border-radius: var(--r-full);
background: var(--btn-bg); color: var(--btn-fg);
font: 600 var(--fs-small) / 1.1 var(--font-text); letter-spacing: .01em; text-decoration: none; white-space: nowrap;
transition: background-color var(--dur-fx) linear, color var(--dur-fx) linear, border-color var(--dur-fx) linear, transform var(--dur-press) var(--ease-press);
}
.btn > .icon { transition: transform var(--dur-press) var(--ease-press); }
.btn:active { transform: scale(calc(1 - .02 * var(--motion))); }
.btn--primary { --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-bd: var(--ink); }                 
.btn--outline { --btn-bd: var(--line-strong); }                                       
@media (hover: hover) {
.btn--primary:hover { --btn-bg: var(--ink-2); --btn-bd: var(--ink-2); }
.btn--outline:hover { --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-bd: var(--ink); }
.btn:hover > .icon:last-child:not(:only-child) { transform: translateX(calc(3px * var(--motion))); }
}
.btn[aria-pressed="true"], .btn[aria-expanded="true"] { --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-bd: var(--ink); }
.btn[data-copied] { --btn-bg: var(--accent-soft); --btn-fg: var(--accent-soft-ink); --btn-bd: transparent; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .38; pointer-events: none; }
.btn--icon { inline-size: var(--hit); padding: 0; --btn-bd: transparent; }
.btn--icon.btn--outline { --btn-bd: var(--line-strong); }
@media (hover: hover) { .btn--icon:hover { --btn-bg: rgb(var(--ink-rgb) / .08); --btn-fg: var(--ink); } .btn--icon.btn--outline:hover { --btn-bg: var(--ink); --btn-fg: var(--paper); } }
.btn--circle {
--circle: 56px; --icon-sw: 1;
inline-size: var(--circle); block-size: var(--circle); min-block-size: 0; padding: 0; border-radius: 50%;
--btn-bd: var(--ink);
}
.btn--circle .icon { inline-size: 42%; block-size: 42%; }
.btn--circle-lg { --circle: clamp(88px, 8vw, 120px); }
@media (hover: hover) {
.btn--circle:hover { --btn-bg: var(--ink); --btn-fg: var(--paper); }
.btn--circle:hover .icon, .cta:hover .btn--circle .icon { transform: translate(calc(4px * var(--motion)), calc(-4px * var(--motion))); }
.cta:hover .btn--circle { --btn-bg: var(--ink); --btn-fg: var(--paper); }
}
.cta { display: inline-flex; align-items: center; gap: var(--space-4); color: var(--ink); text-decoration: none; border-radius: var(--r-full); }
.cta__label { font: 600 var(--fs-label) / 1 var(--font-text); letter-spacing: var(--tr-label); text-transform: uppercase; }
.chip {
--chip-bd: var(--line-strong);
display: inline-flex; align-items: center; gap: .55em;
min-block-size: var(--hit); padding: .4em 1em .4em .85em;
border: 1px solid var(--chip-bd); border-radius: var(--r-full);
background: transparent; color: var(--ink);
font: 500 var(--fs-small) / 1.1 var(--font-text); white-space: nowrap;
transition: background-color var(--dur-fx) linear, border-color var(--dur-fx) linear, color var(--dur-fx) linear, transform var(--dur-press) var(--ease-press);
}
.chip::before {
content: ""; flex: none; inline-size: .62em; block-size: .62em; border-radius: 50%; box-sizing: border-box;
border: 1.5px solid currentColor; background: currentColor;
}
.chip[data-state="exploring"]::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.chip[data-state="learning"]::before { background: transparent; }
.chip:not(button):not([role="button"]) { min-block-size: 0; padding-block: .3em; }
@media (hover: hover) { button.chip:hover, .chip[data-lit]:not([aria-pressed]) { --chip-bd: var(--ink); } }
.chip[aria-pressed="true"], .chip[data-on] { background: var(--ink); color: var(--paper); --chip-bd: var(--ink); }
.chip[data-dim] { opacity: .42; }
.tag {
display: inline-flex; align-items: center; gap: .4em; padding: .28em .8em;
border: 1px solid var(--line); border-radius: var(--r-full);
font: 500 var(--fs-label) / 1.2 var(--font-text); color: var(--ink-2); white-space: nowrap;
}
.status {
--mark: .72em;
display: inline-flex; align-items: center; gap: .55em; padding: .2em .1em;
font: 600 var(--fs-label) / 1.2 var(--font-text); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-2);
}
.status::before { content: ""; flex: none; inline-size: var(--mark); block-size: var(--mark); box-sizing: border-box; border: 1.5px solid currentColor; border-radius: 2px; background: currentColor; }
.status[data-status="built-partial"]::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.status[data-status="built-terminal"]::before { inline-size: calc(var(--mark) * .5); block-size: calc(var(--mark) * 1.2); border-radius: 1px; }
.status[data-status="proposed"] { padding-inline: .8em; border: 1px dashed currentColor; border-radius: var(--r-full); }
.status[data-status="proposed"]::before { background: transparent; border-style: dashed; }
.kbd, kbd {
display: inline-grid; place-items: center; min-inline-size: 1.7em; block-size: 1.7em; padding-inline: .45em;
border: 1px solid var(--line-strong); border-radius: var(--r-xs); border-block-end-width: 2px;
font: 500 .78rem / 1 var(--font-mono); color: var(--ink-2); background: transparent;
}
.field {
display: flex; align-items: center; gap: var(--space-3); min-block-size: 52px; padding-inline: var(--space-4);
border: 1px solid var(--line-strong); border-radius: var(--r-full); background: var(--paper-raised);
}
.field:focus-within { border-color: var(--ink); }
.field__input { flex: 1; min-inline-size: 0; border: 0; background: transparent; outline: 0; font: 400 var(--fs-body) / 1.3 var(--font-text); color: var(--ink); }
.field__input:focus-visible { outline: 0; box-shadow: none; }       
.field:has(:focus-visible) { outline: var(--ring-w) solid var(--ink); outline-offset: var(--ring-gap); }
.card { padding: var(--pad); border: 1px solid var(--line); border-radius: var(--r-lg); background: transparent; }
.rows { display: grid; border-block-start: 1px solid var(--line); }
.row { display: grid; align-items: center; gap: var(--space-4); padding-block: var(--space-5); border-block-end: 1px solid var(--line); color: inherit; text-decoration: none; }
a.row, button.row { transition: padding-inline var(--dur-move) var(--ease-move); }
@media (hover: hover) { a.row:hover, button.row:hover { padding-inline: var(--space-3); } }
.panel-art { background: var(--paper-sunken); border-radius: var(--r-lg); overflow: hidden; }   
.overlay {
background: var(--paper-raised); color: var(--ink);
border: 1px solid var(--line); border-radius: var(--r-lg);
box-shadow: var(--shadow-overlay);
}
dialog.overlay::backdrop, dialog[data-overlay]::backdrop { background: var(--scrim); }
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: calc(var(--z-dialog) - 1); }
.noscript-note { margin: var(--space-4) var(--gutter); padding: var(--space-3) var(--space-4); border: 1px dashed var(--line-strong); border-radius: var(--r-md); font: 400 var(--fs-small) / 1.5 var(--font-text); color: var(--ink-2); }
@media (forced-colors: active) {
.btn, .chip, .tag, .kbd, kbd, .field, .card, .overlay, .noscript-note { border: 1px solid ButtonText; background: ButtonFace; color: ButtonText; box-shadow: none; }
.btn--primary, .chip[aria-pressed="true"], .chip[data-on] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }   
.btn:disabled { color: GrayText; border-color: GrayText; }
.chip::before, .status::before { forced-color-adjust: none; border-color: CanvasText; background: CanvasText; }
.chip[data-state="exploring"]::before, .status[data-status="built-partial"]::before { background: linear-gradient(90deg, CanvasText 50%, transparent 50%); }
.chip[data-state="learning"]::before, .status[data-status="proposed"]::before { background: transparent; }
.chip[aria-pressed="true"]::before { border-color: HighlightText; }
.chip[aria-pressed="true"][data-state="used"]::before { background: HighlightText; }
.status[data-status="proposed"] { border-style: dashed; }
}
}
@layer components {
.has-blobs { position: relative; overflow: clip; }
.blobs {
--blob-1: var(--blob-magenta-1); --blob-2: var(--blob-magenta-2); --blob-3: var(--blob-magenta-3); --blob-4: var(--blob-magenta-4);
--blur: clamp(24px, 3.4vw, 52px);
--fade-top: 0%; --fade-bottom: 26%;                      
position: absolute; inset: 0; z-index: var(--z-blobs); pointer-events: none; overflow: clip; contain: layout paint;
mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent 100%);
}
html[data-seed="aurora"] .blobs { --blob-1: var(--blob-aurora-1); --blob-2: var(--blob-aurora-2); --blob-3: var(--blob-aurora-3); --blob-4: var(--blob-aurora-4); }
html[data-seed="azure"] .blobs { --blob-1: var(--blob-azure-1); --blob-2: var(--blob-azure-2); --blob-3: var(--blob-azure-3); --blob-4: var(--blob-azure-4); }
html[data-seed="amber"] .blobs { --blob-1: var(--blob-amber-1); --blob-2: var(--blob-amber-2); --blob-3: var(--blob-amber-3); --blob-4: var(--blob-amber-4); }
.blobs[data-blobs="quiet"], .blobs[data-blobs="corner"] { --fade-top: 14%; }
@media (prefers-contrast: more) { .blobs { opacity: .5; } }
.blob {
--x: 80; --y: 20; --s: 40; --par: 10; --dur: 64s; --delay: 0s; --tx: 4%; --ty: -6%; --rot: 24deg;
position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
inline-size: calc(var(--s) * 1%); aspect-ratio: 1; margin: calc(var(--s) * -.5%) 0 0 calc(var(--s) * -.5%);
translate: calc(var(--px, 0) * var(--par) * 1px) calc(var(--py, 0) * var(--par) * 1px);     
mix-blend-mode: var(--blob-blend);
animation: blob-drift var(--dur) ease-in-out var(--delay) infinite alternate paused;
}
.blob::before, .blob::after { content: ""; position: absolute; inset: 0; border-radius: 58% 42% 52% 48% / 46% 56% 44% 54%; }
.blob::before {
background:
radial-gradient(circle at 30% 32%, color-mix(in srgb, var(--ca), #fff var(--blob-lift)) 0%, transparent 66%),
radial-gradient(circle at 70% 68%, color-mix(in srgb, var(--cb), #fff var(--blob-lift)) 0%, transparent 64%);
opacity: var(--blob-a);
filter: blur(var(--blur));
}
.blob::after {
inset: -6%; border-radius: 50%;
background: url("../assets-e2cf9e11/grain.webp") 0 0 / 220px 220px repeat;
mix-blend-mode: overlay; opacity: var(--grain-a);
-webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent 100%); mask-image: radial-gradient(closest-side, #000 45%, transparent 100%);
}
.blob:nth-child(1) { --ca: var(--blob-1); --cb: var(--blob-2); }
.blob:nth-child(2) { --ca: var(--blob-2); --cb: var(--blob-3); --dur: 52s; --delay: -14s; --tx: -5%; --ty: 5%; --rot: -18deg; --par: -14; }
.blob:nth-child(3) { --ca: var(--blob-3); --cb: var(--blob-4); --dur: 72s; --delay: -30s; --tx: 3%; --ty: 7%; --rot: 30deg; --par: 8; }
.blob:nth-child(4) { --ca: var(--blob-4); --cb: var(--blob-1); --dur: 80s; --delay: -8s; --tx: -4%; --ty: -4%; --rot: -26deg; --par: -6; }
.blobs[data-active] .blob { animation-play-state: running; will-change: transform; }
html[data-tab-hidden] .blobs[data-active] .blob { animation-play-state: paused; }
@keyframes blob-drift {
from { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
to   { transform: translate3d(var(--tx), var(--ty), 0) scale(1.1) rotate(var(--rot)); }
}
.blobs[data-blobs="hero"] .blob:nth-child(1) { --x: 90; --y: 6;  --s: 46; }
.blobs[data-blobs="hero"] .blob:nth-child(2) { --x: 68; --y: 46; --s: 36; }
.blobs[data-blobs="hero"] .blob:nth-child(3) { --x: 98; --y: 64; --s: 40; }
.blobs[data-blobs="hero"] .blob:nth-child(4) { --x: 6;  --y: 108; --s: 32; --blob-a: .5; }
.blobs[data-blobs="corner"] .blob:nth-child(1) { --x: 96; --y: 104; --s: 48; }
.blobs[data-blobs="corner"] .blob:nth-child(2) { --x: 78; --y: 112; --s: 36; }
.blobs[data-blobs="corner"] .blob:nth-child(n+3) { display: none; }
.blobs[data-blobs="quiet"] { --blob-a: .55; }
.blobs[data-blobs="quiet"] .blob:nth-child(1) { --x: 100; --y: 20; --s: 34; }
.blobs[data-blobs="quiet"] .blob:nth-child(2) { --x: 88;  --y: 70; --s: 28; }
.blobs[data-blobs="quiet"] .blob:nth-child(3) { --x: 0;   --y: 90; --s: 26; }
.blobs[data-blobs="quiet"] .blob:nth-child(4) { display: none; }
@media (max-width: 699px) {
.blob { inline-size: calc(var(--s) * 1.5%); margin: calc(var(--s) * -.75%) 0 0 calc(var(--s) * -.75%); }
.blobs { --blur: 26px; }
.blobs[data-blobs="hero"] .blob:nth-child(1) { --x: 96; --y: 10; }
.blobs[data-blobs="hero"] .blob:nth-child(4) { display: none; }
}
@supports (-moz-appearance: none) { .blob { animation: none; will-change: auto; } }
@media (prefers-reduced-motion: reduce) { .blob { animation: none; translate: none; will-change: auto; } }
html.reduced-motion .blob { animation: none; translate: none; will-change: auto; }
@media (forced-colors: active), print { .blobs { display: none; } }
}
@layer sections {
.nav { position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav); }
.nav::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background: var(--paper); border-block-end: var(--hairline) solid var(--line);
opacity: 0; transition: opacity var(--dur-fx) linear;
}
.nav[data-scrolled="true"]::before, html:not(.js) .nav::before { opacity: 1; }
.nav__frame { inline-size: min(100% - 2 * var(--gutter), var(--column)); margin-inline: auto; }
.nav__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-5); padding-block-start: env(safe-area-inset-top, 0px); min-block-size: var(--nav-h); min-inline-size: 0; }      
.nav__logo {
display: inline-flex; align-items: center; gap: var(--space-3); min-block-size: var(--hit); margin-inline-end: auto; min-inline-size: var(--hit);
color: var(--ink); text-decoration: none; border-radius: var(--r-sm); --focus-r: var(--r-sm);
}
.nav__logo-mark { inline-size: 30px; block-size: 30px; flex: none; }
.nav__lockup { display: grid; gap: 1px; min-inline-size: 0; }
.nav__name { font: 600 var(--fs-body) / 1.25 var(--font-text); letter-spacing: -.005em; }
.nav__role { font: 400 var(--fs-label) / 1.1 var(--font-text); color: var(--ink-3); }
.nav__links { display: flex; align-items: center; gap: var(--space-5); }
.nav__link {
display: inline-flex; align-items: center; justify-content: center; min-block-size: var(--hit); min-inline-size: var(--hit);
font: 500 var(--fs-small) / 1 var(--font-text); color: var(--ink);
background-position: 0 calc(50% + .85em);
}
.nav__tools { display: flex; align-items: center; gap: var(--space-1); margin-inline-start: var(--space-2); }
.nav__search { inline-size: auto; min-inline-size: var(--hit); padding-inline: .7em; gap: .55em; }
.nav__kbd { display: none; color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
.nav__kbd { display: inline-grid; }
html[data-shortcuts="off"] .nav__kbd { display: none; }
}
.nav__seed-dot {
inline-size: 20px; block-size: 20px; border-radius: 50%;
background: var(--accent); box-shadow: inset 0 0 0 1.5px var(--ink);
}
.nav__social .icon, .nav__search .icon { inline-size: 1.3em; block-size: 1.3em; }
@media (min-width: 700px) and (max-width: 899px) { .nav__lockup { display: none; } .nav__links { gap: var(--space-3); } }
.dock { display: none; }
@media (max-width: 699px) {
.nav__bar { flex-wrap: nowrap; }
.nav__links, .nav__search, .nav__role { display: none; }
.nav__tools { margin-inline-start: 0; }
.dock {
position: fixed; inset: auto 0 0 0; z-index: var(--z-dock);
display: flex; align-items: stretch; justify-content: space-around; gap: var(--space-1);
min-block-size: var(--dock-h); padding: 0 max(var(--space-2), env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(var(--space-2), env(safe-area-inset-left, 0px));
background: var(--paper); border-block-start: var(--hairline) solid var(--line);
}
.dock__link, .dock__search {
flex: 1 1 0; min-inline-size: var(--hit); min-block-size: var(--hit); align-self: center; display: inline-flex; align-items: center; justify-content: center;
padding: 0 var(--space-2); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-2); --focus-r: var(--r-sm);
font: 500 var(--fs-small) / 1 var(--font-text); text-decoration: none; cursor: pointer;
transition: color var(--dur-fx) linear;
}
.dock__link[aria-current="page"] { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .45em; }
.dock__search { flex: 0 0 var(--hit); color: var(--ink); }
.dock__search .icon { inline-size: 1.3em; block-size: 1.3em; }
}
@media (max-width: 699px) and (hover: hover) { .dock__link:hover, .dock__search:hover { color: var(--ink); background: rgb(var(--ink-rgb) / .07); } }
.nav__link[aria-current="page"] { background-size: 100% 1px; }
html:not(.js) :is(.nav__search, .nav__seed, .dock__search) { display: none; }      
@media (forced-colors: active) {
.nav::before, .dock { background: Canvas; border-color: CanvasText; }
.nav__link[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .4em; background: none; }
.nav__seed-dot { forced-color-adjust: none; background: Highlight; box-shadow: inset 0 0 0 1.5px CanvasText; }
}
}
@layer sections {
.hero {
--hero-pad-top: calc(var(--nav-h) + var(--space-6));
min-block-size: 100svh;
display: flex; flex-direction: column;
padding-block: var(--hero-pad-top) calc(var(--space-5) + var(--dock-h));
}
.hero__inner {
flex: 1; display: flex; flex-direction: column; align-items: flex-start;
min-inline-size: 0;
}
.hero__eyebrow { margin: 0; color: var(--ink-2); }
.hero__title {
margin: var(--space-3) 0 0;
font-size: min(var(--fs-hero), 20svh);
padding-block-end: .08em;                       
text-wrap: nowrap;
}
.hero__line { display: block; }
.hero__line + .hero__line { margin-inline-start: .5em; }       
.hero__lede { margin-block: var(--space-6) 0; max-inline-size: 34ch; }
.hero__tagline { margin: 0; }
.hero__roles { margin: var(--space-2) 0 0; color: var(--ink-2); max-inline-size: none; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5) var(--space-6); margin-block-start: var(--space-6); }
.hero__cta { --focus-r: var(--r-full); }
.hero__hello { font: 500 var(--fs-body) / 1.2 var(--font-text); min-block-size: var(--hit); display: inline-flex; align-items: center; background-position: 0 calc(50% + .8em); }
.hero__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-6); }
.hero__hint { margin: 0; color: var(--ink-2); }
.hero__hint[hidden], html[data-shortcuts="off"] .hero__hint { display: none; }
.hero__hint-touch { display: none; }
@media (hover: none), (pointer: coarse) {
.hero__hint-fine { display: none; }
.hero__hint-touch { display: inline; }
}
.hero__foot {
inline-size: 100%; margin-block-start: auto; padding-block-start: var(--space-6);
display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3) var(--space-5);
}
.hero__clock { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); color: var(--ink-2); letter-spacing: .02em; }
.hero__clock-main { white-space: nowrap; }
html.js .hero__clock .clock__time:empty { display: inline-block; min-inline-size: 5ch; }          
.hero__clock-ahead { white-space: nowrap; }
.hero__next {
display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--hit);
font: 600 var(--fs-label) / 1 var(--font-text); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink);
background-position: 0 calc(50% + .9em);
}
.hero__next .icon { transition: transform var(--dur-press) var(--ease-press); }
@media (hover: hover) { .hero__next:hover .icon { transform: translateY(calc(3px * var(--motion))); } }
.hero .blobs { --blob-a: .9; }
.hero .blobs .blob:nth-child(2) { --x: 56; --y: 46; --s: 34; }              
.hero .blobs .blob:nth-child(4) { --x: 52; --y: 128; --blob-a: .45; }      
@media (prefers-color-scheme: dark) { :root:not([data-scheme="light"]) .hero .blobs { --blob-a: .36; } }
:root[data-scheme="dark"] .hero .blobs { --blob-a: .36; }                   
.hero__in { animation: hero-in var(--dur-reveal, 700ms) var(--ease-reveal, ease-out) both; animation-delay: calc(var(--i, 0) * 90ms + 60ms); }
@keyframes hero-in {
from { opacity: 0; transform: translateY(calc(var(--reveal-y, 12px) * var(--motion, 1))); }
to   { opacity: 1; transform: none; }
}
@media (max-width: 1023px) { .hero .blobs .blob:nth-child(2) { --x: 64; --y: 19; --s: 30; } }
@media (max-width: 699px) {
.hero { --hero-pad-top: calc(var(--nav-h) + var(--space-5)); }
.hero__title { font-size: min(var(--fs-hero), 21svh, 19vw); }
.hero__line + .hero__line { margin-inline-start: .3em; }
.hero__foot { flex-direction: column; align-items: flex-start; }
.hero__meta { flex-direction: column; gap: var(--space-1); }
.hero__roles { color: var(--ink); }
.hero .blobs .blob:nth-child(1) { --x: 100; --y: 2; --s: 40; }
.hero .blobs .blob:nth-child(2) { --x: 78; --y: 15; --s: 30; }
.hero .blobs .blob:nth-child(3) { --x: 70; --y: 104; --s: 34; }
.hero .blobs .blob:nth-child(4) { display: none; }
.hero__next { display: none; }              
}
@media (max-width: 699px) and (max-height: 700px) {
.hero__title { font-size: min(var(--fs-hero), 17svh, 19vw); }
.hero__lede, .hero__actions { margin-block-start: var(--space-4); }
.hero__cta .btn--circle-lg { --circle: 72px; }
.hero__hint { display: none; }
.hero__foot { padding-block-start: var(--space-4); }
}
@media (max-height: 780px) and (min-width: 700px) {
.hero__title { font-size: min(var(--fs-hero), 18svh); }
.hero__lede, .hero__actions { margin-block-start: var(--space-4); }
.hero__cta .btn--circle-lg { --circle: 80px; }
}
@media (max-height: 640px) and (min-width: 700px) {
.hero__title { font-size: min(var(--fs-hero), 16svh); }
.hero__foot { padding-block-start: var(--space-4); }
}
}
@layer sections {
.about { container: about / inline-size; }
.about__head { margin-block-end: var(--space-7); }
.about__layout { display: grid; gap: var(--space-8) var(--space-7); grid-template-columns: minmax(0, 1fr); }
.about__read { display: grid; gap: var(--space-6); align-content: start; }
.about__lead { margin: 0; max-inline-size: 34em; font-size: var(--fs-sub); font-weight: 350; line-height: 1.3; letter-spacing: -.012em; color: var(--ink); text-wrap: pretty; }
.about__body { margin: 0; max-inline-size: var(--measure); color: var(--ink-2); text-wrap: pretty; }
.about__facts { display: grid; gap: var(--space-7); align-content: start; }
.about__fact { min-inline-size: 0; }
.about__h3 { margin: 0 0 var(--space-3); color: var(--ink-3); }
.about__list { list-style: none; margin: 0; padding: 0; border-block-start: var(--hairline) solid var(--line-strong); }
.about__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); padding-block: var(--space-4); border-block-end: var(--hairline) solid var(--line); }
.about__row:has(.about__num) { grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--space-3); }
.about__num { font: 500 var(--fs-label) / 1.9 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-3); }
.about__text { font: 400 var(--fs-body) / 1.45 var(--font-text); color: var(--ink-2); overflow-wrap: anywhere; text-wrap: pretty; }
@container about (min-width: 62rem) {
.about__layout { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: start; }
.about__read { grid-column: 1 / span 7; }
.about__facts { grid-column: 8 / span 5; }
.about__facts { padding-block-start: .4rem; }
}
@container about (min-width: 40rem) and (max-width: 61.99rem) {
.about__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
}
@media (forced-colors: active) {
.about__list, .about__row { border-color: CanvasText; }
}
}
@layer sections {
.work {
--peek: min(72px, var(--gutter));                 
--dg-built-fill: var(--accent-soft);
}
.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(--ink); }
.diagram__shape { fill: none; stroke: var(--ink-2); stroke-width: 1.1; stroke-linejoin: round; }
.diagram__node[data-kind="built"] .diagram__shape { fill: var(--dg-built-fill); stroke: var(--ink); stroke-width: 1.5; }
.diagram__node[data-kind="experiment"] .diagram__shape { fill: none; stroke: var(--ink-2); stroke-width: 1.1; }
.diagram__node[data-kind="planned"] .diagram__shape { fill: none; stroke: var(--ink-3); stroke-dasharray: 5 4; }
.diagram__node[data-kind="proposed"] .diagram__shape { fill: url(#dg-hatch); stroke: var(--ink-3); 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; }
.diagram__hatch { stroke: var(--line-strong); stroke-width: 1; }
.diagram__label, .diagram__elabel { text-rendering: geometricPrecision; }
.diagram__label { font: 600 13.5px var(--font-text); fill: var(--ink); letter-spacing: 0; }
.diagram--compact .diagram__label { font-size: 15px; }
.diagram__node[data-kind="built"] .diagram__label { fill: var(--accent-soft-ink); }
.diagram__elabel { font: 500 12px var(--font-mono); letter-spacing: .02em; fill: var(--ink-2); }
.diagram__edge, .diagram__arrow { fill: none; stroke: var(--ink-3); 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: .4em 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.3 var(--font-mono); letter-spacing: .02em; color: var(--ink-2); }
.diagram__swatch { inline-size: 30px; block-size: 18px; flex: none; overflow: visible; }
.work__board { display: grid; gap: clamp(72px, 11vw, 168px); }
.work__head { margin-block-end: var(--space-8); }
.work__kicker { display: flex; flex-wrap: wrap; gap: 0 .6em; }
.work__kicker .section__num { margin-inline-end: 0; }
.work__legend { display: grid; gap: var(--space-2); margin-block-end: var(--space-9); }
.work__note { margin: 0; font: 400 var(--fs-label) / 1.4 var(--font-text); color: var(--ink-3); max-inline-size: 60ch; }
.work:has(.work__board[data-board-state="open"]) .work__legend { display: none; }
.tile { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6) var(--grid-gap); align-items: center; }
.tile[hidden] { display: none; }
.tile__art { margin: 0; container: tileart / inline-size; min-inline-size: 0; }
.tile__plate { position: relative; isolation: isolate; }                  
.tile__well { position: relative; padding: clamp(4px, 1.4vw, 12px); }
.tile__caption { display: none; gap: var(--space-2); margin-block-start: var(--space-4); }
.tile[data-role="open"] .tile__caption { display: grid; }
.tile__note { margin: 0; font: 400 var(--fs-label) / 1.4 var(--font-text); color: var(--ink-3); max-inline-size: 52ch; }
.tile__blobs {
--blob-a: .85; --grain-a: .45; --blur: clamp(30px, 4.5vw, 60px);
inset: calc(var(--peek) * -1) 0 0 calc(var(--peek) * -1);                  
-webkit-mask-image: linear-gradient(to right, transparent, #000 var(--peek)), linear-gradient(to bottom, transparent, #000 var(--peek)), linear-gradient(to top, transparent, #000 calc(var(--peek) * 1.4));
-webkit-mask-composite: source-in;
mask-image: linear-gradient(to right, transparent, #000 var(--peek)), linear-gradient(to bottom, transparent, #000 var(--peek)), linear-gradient(to top, transparent, #000 calc(var(--peek) * 1.4));
mask-composite: intersect;
}
.tile:nth-child(even) .tile__blobs {
inset: calc(var(--peek) * -1) calc(var(--peek) * -1) 0 0;
-webkit-mask-image: linear-gradient(to left, transparent, #000 var(--peek)), linear-gradient(to bottom, transparent, #000 var(--peek)), linear-gradient(to top, transparent, #000 calc(var(--peek) * 1.4));
mask-image: linear-gradient(to left, transparent, #000 var(--peek)), linear-gradient(to bottom, transparent, #000 var(--peek)), linear-gradient(to top, transparent, #000 calc(var(--peek) * 1.4));
}
.tile__blobs .blob { --s: 38; }
.tile:nth-child(1) .tile__blobs .blob:nth-child(1) { --x: 14; --y: 16; --ca: var(--blob-1); --cb: var(--blob-2); }
.tile:nth-child(1) .tile__blobs .blob:nth-child(2) { --x: 20; --y: 74; --s: 28; --ca: var(--blob-2); --cb: var(--blob-3); }
.tile:nth-child(2) .tile__blobs .blob:nth-child(1) { --x: 86; --y: 20; --ca: var(--blob-3); --cb: var(--blob-4); }
.tile:nth-child(2) .tile__blobs .blob:nth-child(2) { --x: 90; --y: 78; --s: 26; --ca: var(--blob-4); --cb: var(--blob-1); }
.tile:nth-child(3) .tile__blobs .blob:nth-child(1) { --x: 12; --y: 30; --s: 34; --ca: var(--blob-2); --cb: var(--blob-4); }
.tile:nth-child(3) .tile__blobs .blob:nth-child(2) { --x: 24; --y: 12; --s: 26; --ca: var(--blob-1); --cb: var(--blob-3); }
.tile:nth-child(4) .tile__blobs .blob:nth-child(1) { --x: 88; --y: 12; --s: 36; --ca: var(--blob-4); --cb: var(--blob-2); }
.tile:nth-child(4) .tile__blobs .blob:nth-child(2) { --x: 80; --y: 64; --s: 28; --ca: var(--blob-3); --cb: var(--blob-1); }
.tile__well .diagram--compact { display: none; inline-size: min(100%, 480px); margin-inline: auto; }
.tile__well .diagram--full { max-inline-size: 820px; margin-inline: auto; }
@container tileart (max-width: 729px) {
.tile__well .diagram--full { display: none; }
.tile__well .diagram--compact { display: block; }
}
.tile__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); justify-items: start; align-content: center; min-inline-size: 0; }
.tile__cat { margin: 0; color: var(--ink-3); }
.tile__num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--ink); margin-inline-end: .6em; }
.tile__title { margin: 0; overflow-wrap: anywhere; font-size: clamp(1.7rem, 1.2rem + 1.3vw, 2.4rem); line-height: 1.06; letter-spacing: -.01em; max-inline-size: 16em; text-wrap: balance; }
.tile__title--long { font-size: clamp(1.5rem, 1.05rem + 1vw, 2rem); }
.tile__line { margin: 0; font: 400 var(--fs-body) / 1.55 var(--font-text); color: var(--ink-2); max-inline-size: 38ch; text-wrap: balance; }
.tile__status { margin-block: var(--space-1) 0; padding-inline: 0; white-space: normal; max-inline-size: 100%; }
.tile__status[data-status="proposed"] { padding-inline: .9em; }
.tile__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.tile__tags .tag { padding-block: .22em; }
.tile__more { margin: var(--space-2) 0 0; }
.tile__open {
appearance: none; border: 0; background-color: transparent; margin: 0; padding: .5em 0 .12em; min-block-size: var(--hit); display: inline-flex; align-items: center;
font: 500 var(--fs-body) / 1.2 var(--font-text); color: var(--ink); cursor: pointer;
}
.tile__open::after { content: ""; position: absolute; inset: 0; }        
.tile[data-match] .tile__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.tag[data-match] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@media (hover: hover) {
.tile:hover .tile__open, .tile__open:focus-visible { background-size: 100% 2px; }
}
.tile__open:focus-visible { outline-offset: 4px; }
@media (min-width: 1100px) {
.tile { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--grid-gap); }
.tile__art { grid-column: 1 / span 8; grid-row: 1; }
.tile__body { grid-column: 9 / span 4; grid-row: 1; }
.tile:nth-child(even) .tile__art { grid-column: 5 / span 8; }
.tile:nth-child(even) .tile__body { grid-column: 1 / span 4; }
.tile__detail { grid-column: 1 / -1; grid-row: 2; }
}
.tile__detail { margin-block-start: var(--space-8); padding-block-start: var(--space-7); border-block-start: 1px solid var(--line); display: grid; gap: var(--space-8); min-inline-size: 0; }
.tile__title:focus { outline: none; }
.tile__title:focus-visible { outline: var(--ring-w) solid var(--ink); outline-offset: var(--ring-gap); }
html.js .tile:not([data-role="open"]) .tile__detail { display: none; }
.tile[data-role="open"] .tile__more { display: none; }
.tile[data-role="open"] .tile__open::after { display: none; }
.tile[data-role="open"] { animation: work-in var(--dur-reveal) var(--ease-reveal) both; }
.tile[data-role="open"] .tile__detail { animation: work-in var(--dur-reveal) var(--ease-reveal) 160ms both; }
html[data-vt] .tile[data-role="open"], html[data-vt] .tile[data-role="open"] .tile__detail { animation: none; }
@keyframes work-in { from { opacity: 0; transform: translateY(calc(32px * var(--motion))); } to { opacity: 1; transform: none; } }
::view-transition-group(work-art) { animation-duration: var(--dur-slow); animation-timing-function: var(--ease-slow); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 320ms; animation-timing-function: ease-in-out; }
.detail__top, .detail__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7) var(--grid-gap); align-items: start; }
.detail__top { row-gap: var(--space-6); }
.detail__col { display: grid; gap: var(--space-7); min-inline-size: 0; }
.detail__block { display: grid; gap: var(--space-3); min-inline-size: 0; }
.detail__h { margin: 0; font: 600 var(--fs-label) / var(--lh-label) var(--font-text); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-3); }
.detail__text { margin: 0; font: 400 var(--fs-reading) / 1.6 var(--font-text); color: var(--ink-2); max-inline-size: var(--measure); }
.detail__list { margin: 0; padding: 0; list-style: none; max-inline-size: var(--measure); }
.detail__list li { padding-block: .7em; border-block-start: 1px solid var(--line); font: 400 var(--fs-body) / 1.5 var(--font-text); color: var(--ink-2); }
.detail__list li:last-child { border-block-end: 1px solid var(--line); }
.detail__block--not { padding: var(--space-5); border: 1px dashed var(--line-strong); border-radius: var(--r-md); }
.detail__block--not .detail__list li:first-child { border-block-start: 0; padding-block-start: 0; }
.detail__block--not .detail__list li:last-child { border-block-end: 0; padding-block-end: 0; }
.detail__list--planned li { font-style: italic; }
.detail__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 1100px) {
.detail__top, .detail__cols { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.detail__top > :first-child, .detail__top > .detail__block--next, .detail__col--a { grid-column: 1 / span 7; }
.detail__top > .detail__block--not { grid-column: 9 / span 4; grid-row: 1 / span 2; }
.detail__col--b { grid-column: 9 / span 4; }
}
.work__bar {
position: sticky; inset-block-start: var(--nav-space); z-index: var(--z-sticky); isolation: isolate;
display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
padding-block: 8px; margin-block-end: var(--space-7); min-block-size: 60px;
}
.work__bar[hidden] { display: none; }
.work__bar::before { content: ""; position: absolute; inset: 0 calc(var(--gutter) * -1); z-index: -1; background: var(--paper); border-block-end: 1px solid var(--line); }
.work__bar-close { padding-inline: .9em 1em; gap: .35em; }
.work__bar-esc { margin-inline-start: .25em; }
.work__bar-status { flex: 1 1 12rem; min-inline-size: 0; margin: 0; padding-inline: var(--space-2); font: 500 var(--fs-small) / 1.3 var(--font-text); color: var(--ink); overflow-wrap: anywhere; }
.work__bar-title { font-family: var(--font-display); font-size: 1.25em; font-weight: var(--fw-display, 800); text-transform: lowercase; letter-spacing: var(--tr-h3); }
.work__bar-count { color: var(--ink-3); white-space: nowrap; }
.work__bar-steps { display: flex; gap: 8px; margin-inline-start: auto; }
.work__bar-hint { display: flex; align-items: center; gap: 6px; margin: 0; font: 500 var(--fs-label) / 1 var(--font-text); color: var(--ink-3); }
.work__bar-hint-text { margin-inline-start: 4px; }
@media (max-width: 1099px) {
.work__bar-hint { display: none; }
.tile__body { padding-inline: 0; }
.tile__title { max-inline-size: none; }
.tile__line { max-inline-size: 52ch; }
}
@media (max-width: 699px) {
.work__bar { min-block-size: 60px; }
.work__bar-esc { display: none; }
.work__bar-title { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   
.work__bar-count { color: var(--ink-2); }
.work__bar-status { flex: 1 1 4rem; text-align: center; }
.work__bar-steps { gap: 6px; }
.detail__block--not { padding: var(--space-4); }
}
html:not(.js) .tile__more, html:not(.js) .work__bar { display: none; }
@media print { html.js .tile:not([data-role="open"]) .tile__detail { display: grid; } .tile__blobs { display: none; } }
@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, .diagram__node[data-kind="built"] .diagram__label { fill: CanvasText; }
.diagram__edge, .diagram__arrow, .diagram__hatch { stroke: CanvasText; }
.tile[data-match] { outline: 3px solid Highlight; }
.tag[data-match] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
.work__bar::before { background: Canvas; border-color: CanvasText; }
.detail__block--not { border-color: CanvasText; }
}
@media (prefers-contrast: more) {
.diagram__shape { stroke-width: 1.5; }
.diagram__edge, .diagram__arrow { stroke-width: 1.6; }
}
}
@layer sections {
.stack__section { container: stack / inline-size; }
.stack__section .chip { --chip-bd: var(--line-strong); }
@media (hover: hover) { .stack__section button.chip:hover:not(:disabled) { --chip-bd: var(--ink); } }
.stack__head { margin-block-end: var(--space-7); }
.stack__legend, .stack__key, .stack__group {
display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3) var(--space-6);
padding-block: var(--space-5); border-block-start: var(--hairline) solid var(--line);
min-inline-size: 0;
}
.stack__controls { margin-block-end: var(--space-5); }
.stack__groups { border-block-end: var(--hairline) solid var(--line); }
.stack__label { margin: 0; color: var(--ink-3); align-self: start; padding-block-start: .85rem; }
@container stack (min-width: 48rem) {
.stack__legend, .stack__key, .stack__group { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: start; }
.stack__label, .stack__group-head { grid-column: 1 / span 4; }
.stack__key > :not(.stack__label), .stack__legend-list, .stack__chips { grid-column: 5 / span 8; }
.stack__key > .stack__label { grid-row: 1; }
}
.stack__group-head { display: grid; gap: var(--space-2); align-content: start; min-inline-size: 0; }
.stack__group-title { margin: 0; overflow-wrap: anywhere; }
.stack__group-note { margin: 0; max-inline-size: 28ch; font: 400 var(--fs-small) / var(--lh-small) var(--font-text); color: var(--ink-3); }
.stack__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); min-inline-size: 0; }
.stack__item { min-inline-size: 0; max-inline-size: 100%; display: flex; }
.stack__section .stack__item .chip, .stack__key-btn {
white-space: normal; flex-wrap: wrap; row-gap: .1em; max-inline-size: 100%; min-inline-size: 0; text-align: start;
}
.chip__label { min-inline-size: 0; overflow-wrap: anywhere; }
.chip__note { font-weight: 400; font-size: .92em; color: var(--ink-3); }
.chip__note::before { content: "\00B7\00A0"; }
.chip__refs { display: inline-flex; gap: .2em; margin-inline-start: .15em; }
.chip__ref::before {
content: attr(data-n); display: inline-grid; place-items: center; box-sizing: border-box;
min-inline-size: 1.9em; block-size: 1.9em; padding-inline: .2em; border: 1px solid currentColor; border-radius: var(--r-full);
font: 600 .72em / 1 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--ink-2);
}
.stack__legend-list { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3) var(--space-6); }
@container stack (min-width: 48rem) { .stack__legend-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--space-4) var(--space-6); } }
.stack__legend-item { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: var(--space-2); min-inline-size: 0; }
@container stack (min-width: 20rem) and (max-width: 47.99rem) { .stack__legend-item { grid-template-columns: 8rem minmax(0, 1fr); justify-items: stretch; align-items: center; gap: var(--space-1) var(--space-3); } .stack__legend-item dt { justify-self: start; } }
.stack__legend-item dd { margin: 0; font: 400 var(--fs-small) / var(--lh-small) var(--font-text); color: var(--ink-2); }
.stack__key-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.stack__key-btn { border-radius: var(--r-lg); padding-inline: .9em 1.1em; }
.stack__key-btn::before { display: none; }
.chip__num { font: 600 .8em / 1 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--ink-2); }
.stack__key-btn .chip__note { white-space: nowrap; margin-inline-start: .35em; }
.stack__key-btn .chip__note::before { content: none; }
.stack__legend-note { margin: 0; max-inline-size: 62ch; font: 400 var(--fs-small) / var(--lh-small) var(--font-text); color: var(--ink-3); }
.stack__legend-note-touch { display: none; }
@media (hover: none), (pointer: coarse) {
.stack__legend-note-fine { display: none; }
.stack__legend-note-touch { display: inline; }
}
.stack__key-hint { display: none; margin: 0; font: 400 var(--fs-small) / var(--lh-small) var(--font-text); color: var(--ink-2); }
.stack__key:has([data-empty][data-match]) .stack__key-hint { display: block; }
.stack__key:has([data-empty][data-match]) .stack__legend-note { display: none; }
.stack__section .chip[data-match]:not([aria-pressed="true"]) { --chip-bd: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.stack__section .chip[data-dim] { opacity: 1; }
.stack__section .chip[data-dim]:not([aria-pressed="true"]) { color: var(--ink-3); --chip-bd: var(--line-strong); }
.stack__section .chip[data-dim]:not([aria-pressed="true"]) :is(.chip__num, .chip__note) { color: var(--ink-3); }
.stack__section .chip[data-dim]:not([aria-pressed="true"]) .chip__ref::before { color: var(--ink-3); }
.stack__section .chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); --chip-bd: var(--ink); }
.stack__section .chip[aria-pressed="true"] :is(.chip__num, .chip__note), .stack__section .chip[aria-pressed="true"] .chip__ref::before { color: var(--paper); }
html:not(.js) .stack__key { display: none; }
.stack__section .chip:disabled { color: var(--ink); cursor: default; }
@media (forced-colors: active) {
.stack__legend, .stack__key, .stack__group, .stack__groups { border-color: CanvasText; }
.stack__section .chip[data-match] { outline: 2px solid Highlight; outline-offset: 1px; }
.stack__section .chip[data-dim]:not([aria-pressed="true"]) { color: GrayText; }
.stack__section .chip[aria-pressed="true"], .stack__section .chip[aria-pressed="true"] * { forced-color-adjust: none; color: HighlightText; }
.stack__section .chip[aria-pressed="true"] { background: Highlight; border-color: Highlight; }
.stack__section .chip[aria-pressed="true"] .chip__ref::before { color: HighlightText; border-color: HighlightText; }
.stack__section .chip:disabled { color: ButtonText; }
}
}
@layer sections {
.beyond__head { margin-block-end: var(--space-7); }
.beyond__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); border-block-end: var(--hairline) solid var(--line); }
.beyond__item {
display: grid;
grid-template-columns: var(--hit) minmax(0, 1fr);
column-gap: var(--space-4);
row-gap: var(--space-1);
align-items: center;
min-inline-size: 0;
padding-block: var(--space-5);
border-block-start: var(--hairline) solid var(--line);
}
.beyond__icon { grid-row: 1 / span 2; inline-size: 1.75rem; block-size: 1.75rem; color: var(--ink-2); justify-self: start; }
.beyond__label, .beyond__line { margin: 0; min-inline-size: 0; overflow-wrap: anywhere; hyphens: manual; }
.beyond__label { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: 1.12; letter-spacing: var(--tr-h3); text-transform: lowercase; text-wrap: balance; color: var(--ink); }
.beyond__line { font: 400 var(--fs-body) / var(--lh-body) var(--font-text); color: var(--ink-2); text-wrap: pretty; max-inline-size: 48ch; }
@media (min-width: 900px) {
.beyond__list { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); }
.beyond__item { grid-column: span 6; padding-block: var(--space-6); }
}
.beyond__direction { margin-block-start: var(--space-9); display: grid; gap: var(--space-6); }
.beyond__dir-head { display: grid; gap: var(--space-3); align-content: start; }
.beyond__dir-kicker { margin: 0; color: var(--ink-3); }
.beyond__dir-heading { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: 1.12; letter-spacing: var(--tr-h3); text-transform: lowercase; text-wrap: balance; }
.beyond__dir-body { display: grid; gap: var(--space-5); }
.beyond__statement { margin: 0; font: 300 var(--fs-sub) / 1.3 var(--font-text); letter-spacing: -.01em; color: var(--ink); max-inline-size: 30ch; }
.beyond__full { margin: 0; font: 400 var(--fs-body) / var(--lh-body) var(--font-text); color: var(--ink-2); max-inline-size: 52ch; }
@media (min-width: 900px) {
.beyond__direction { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); }
.beyond__dir-head { grid-column: 1 / span 4; }
.beyond__dir-body { grid-column: 6 / span 7; }
}
}
@layer sections {
.contact { padding-block-end: var(--space-9); }
.contact__inner { position: relative; }
.contact__kicker { margin: 0 0 var(--space-5); }
.contact__title {
margin: 0;
font-family: var(--font-display); font-weight: var(--fw-display, 800);
font-size: min(12.5rem, max(var(--fs-hero), 18vw)); line-height: .95; letter-spacing: var(--tr-hero);
text-transform: lowercase; text-wrap: balance;
}
.contact__intro { margin: var(--space-6) 0 0; max-inline-size: 38rem; font: 300 var(--fs-sub) / 1.3 var(--font-text); letter-spacing: -.01em; color: var(--ink-2); }
.contact__list { margin: var(--space-8) 0 0; padding: 0; border-block-end: var(--hairline) solid var(--line); }
.contact__row { display: grid; gap: var(--space-3); padding-block: var(--space-6); border-block-start: var(--hairline) solid var(--line); }
.contact__label { margin: 0; display: flex; align-items: center; gap: .6em; font: 600 var(--fs-label) / var(--lh-label) var(--font-text); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-3); }
.contact__mark { inline-size: 1.4em; block-size: 1.4em; color: var(--ink-2); }
.contact__dd { margin: 0; display: grid; gap: var(--space-3); min-inline-size: 0; }
.contact__line { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-5); row-gap: var(--space-3); }
.contact__value { min-inline-size: 0; }
.contact__value--big { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.375rem, .6rem + 3.4vw, 3.5rem); line-height: 1.1; letter-spacing: -.015em; overflow-wrap: anywhere; }
.contact__addr { display: inline-flex; align-items: center; min-block-size: var(--hit); padding-block: .12em; background: none; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .14em; transition: text-decoration-thickness var(--dur-link) var(--ease-link); }
.contact__addr:hover { text-decoration-thickness: 4px; }
.contact__row--sensitive .contact__value--big { font-size: var(--fs-h3); line-height: 1.15; }
.contact__row--sensitive { padding-block: var(--space-5); }
.contact__note { margin: 0; font: 400 var(--fs-small) / var(--lh-small) var(--font-text); color: var(--ink-3); text-wrap: pretty; }
.contact__copy { min-inline-size: 8.5rem; min-block-size: var(--hit); justify-content: center; }
html:not(.js) .contact__copy { display: none; }   
.contact__ico-done { display: none; }
.contact__copy[data-copied] .contact__ico-copy { display: none; }
.contact__copy[data-copied] .contact__ico-done { display: inline-block; }
.contact__more { display: grid; gap: var(--space-6); margin-block-start: var(--space-8); }
.contact__discord { display: grid; gap: var(--space-3); align-content: start; }
.contact__handle { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); line-height: 1.1; white-space: nowrap; }
.contact__ext-list { list-style: none; margin: 0; padding: 0; display: contents; }
.contact__ext-item > .contact__label { text-transform: none; letter-spacing: 0; font-weight: 450; font-size: var(--fs-small); overflow-wrap: anywhere; }
.contact__ext-item { display: grid; gap: var(--space-2); align-content: start; }
.contact__ext { display: inline-flex; align-items: center; gap: .4em; align-self: start; min-block-size: var(--hit); font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); line-height: 1.1; background: none; }
.contact__ext > span { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-block-end: .08em; transition: background-size var(--dur-link) var(--ease-link); }
.contact__ext:hover > span { background-size: 100% 2px; }
.contact__arrow { inline-size: .8em; block-size: .8em; transition: transform var(--dur-press) var(--ease-press); }
@media (hover: hover) { .contact__ext:hover .contact__arrow { transform: translate(calc(3px * var(--motion)), calc(-3px * var(--motion))); } }
.contact__more :is(.contact__note, .contact__label) { color: var(--ink); }   
.contact__where { margin: 0; display: flex; align-items: center; gap: .6em; color: var(--ink); }
@media (min-width: 56rem) {
.contact__more { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--grid-gap); }
.contact__where { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
.contact__row { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: baseline; }
.contact__row > .contact__label { grid-column: 1 / span 3; }
.contact__row > .contact__dd { grid-column: 4 / span 9; }
}
@media (forced-colors: active) { .contact__ext > span { background: none; text-decoration: underline; } }
}
@layer sections {
.footer { padding-block: var(--space-6) var(--space-7); border-block-start: var(--hairline) solid var(--line); font: 400 var(--fs-small) / var(--lh-small) var(--font-text); color: var(--ink-2); }
.footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: var(--space-6); row-gap: var(--space-3); }
.footer__copy, .footer__touch { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: .4em var(--space-3); }
.footer__copy { gap: .6em; }
.footer__mail, .footer__top { color: var(--ink); display: inline-flex; align-items: center; gap: .4em; min-block-size: var(--hit); }
.footer__mail { overflow-wrap: anywhere; min-inline-size: 0; }
.footer__row > * { min-inline-size: 0; max-inline-size: 100%; }
.footer__top-icon { transform: rotate(180deg); inline-size: 1em; block-size: 1em; }
.footer__socials { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-1); }
.footer__social { color: var(--ink); }
.footer__credits { margin: var(--space-2) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .25em var(--space-5); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-3); }
.footer__credits > span { text-wrap: pretty; }
.footer__credits a { color: inherit; display: inline-flex; align-items: center; min-block-size: var(--hit); }
.footer__led { inline-size: 6px; block-size: 6px; border-radius: var(--r-full); background: var(--ink-3); animation: footer-led 2s steps(1, end) infinite; }
@keyframes footer-led { 0% { opacity: 1; } 50% { opacity: .2; } }
:root.reduced-motion .footer__led { animation: none; }
@media (prefers-reduced-motion: reduce) { .footer__led { animation: none; } }
@media (max-width: 599px) {
.footer__row { flex-direction: column; align-items: flex-start; }
}
@media (forced-colors: active) { .footer__led { background: CanvasText; } }
}
@layer sections {
:is(.palette, .shortcuts, .seed-picker) { opacity: var(--ov-o, 1); }
:is(.palette, .shortcuts)::backdrop { opacity: var(--ov-o, 1); }
:is(.palette, .shortcuts)[popover]::backdrop { background: var(--scrim); }
html[data-scroll-lock] { overflow: hidden; }
html[data-scroll-lock][data-scrollbar] { scrollbar-gutter: stable; }
.palette, .shortcuts {
--ov-top: clamp(var(--nav-space), 14vh, 10rem);                                    
--ov-side: max(var(--gutter), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
--ov-gap-bottom: max(var(--space-4), 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;                                                                 
}
.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(--space-4), env(safe-area-inset-top, 0px)); }
.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); }
.palette__field { flex: 1 1 auto; min-inline-size: 0; border-radius: var(--r-md); background: var(--paper); }
.palette__input { text-overflow: ellipsis; }
.palette__input::placeholder { color: var(--ink-3); opacity: 1; }
.palette__esc { margin-inline-start: auto; flex: none; }
.palette__close { display: none; flex: none; min-inline-size: var(--hit); }
@media (pointer: coarse), (max-width: 699px) {
.palette__close { display: inline-flex; }
.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(--ink-3); }
.palette__opt {
position: relative;
display: flex; align-items: center; gap: var(--space-3);
min-block-size: var(--hit); padding: .45rem var(--space-3);
border-radius: var(--r-sm);
font: 500 var(--fs-body) / 1.3 var(--font-text);
color: var(--ink);
cursor: pointer; user-select: none; -webkit-user-select: none;
transition: background-color var(--dur-fx) var(--ease-fx);
}
.palette__opt[aria-selected="true"] { background: rgb(var(--ink-rgb) / .08); }
.palette__opt[aria-selected="true"]::before {
content: ""; position: absolute; inset-block: .55rem; inset-inline-start: 0;
inline-size: 3px; border-radius: var(--r-full); background: var(--ink);
}
.palette__label { min-inline-size: 0; overflow-wrap: anywhere; }
.palette__hit { font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; text-decoration-color: var(--ink); }
.palette__meta {
margin-inline-start: auto; flex: none; max-inline-size: 55%;
display: inline-flex; align-items: center; gap: var(--space-2);
font: 500 var(--fs-mono) / 1 var(--font-mono);
color: var(--ink-3);
}
.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(--ink); }
.palette__opt[aria-disabled="true"] { cursor: default; }                                      
.palette__meta .icon { inline-size: 1.05em; block-size: 1.05em; }
.palette__check { color: var(--ink); }
html[data-shortcuts="off"] .palette__kbd { display: none; }
.palette__kbd, .palette__esc, .shortcuts__keys .kbd { color: var(--ink-2); }
.palette__empty { margin: 0; padding: var(--space-3) calc(var(--space-2) + var(--space-3)) var(--space-1); color: var(--ink-2); }
.palette__hint {
flex: none; margin: 0; padding: var(--space-3) calc(var(--space-2) + var(--space-3));
border-block-start: 1px solid var(--line);
font: 500 var(--fs-label) / 1.3 var(--font-mono); letter-spacing: .02em;
color: var(--ink-3);
}
@media (pointer: coarse) { .palette__hint { display: none; } }
@media (max-width: 559px) { .palette__value { display: none; } }
.shortcuts__close { flex: none; min-inline-size: var(--hit); }
.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__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 var(--line);
}
.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(--ink-3); }
.shortcuts__text { margin: 0; font-size: var(--fs-small); line-height: 1.45; color: var(--ink-2); }
@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 var(--line);
}
.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 { display: inline-flex; align-items: center; min-block-size: var(--hit); border-radius: var(--r-full); cursor: pointer; }
.shortcuts__track {
position: relative; flex: none; inline-size: 3.2rem; block-size: 1.9rem; border-radius: var(--r-full);
background: transparent; border: 1px solid var(--line-strong);
transition: background-color var(--dur-fx) var(--ease-fx), border-color var(--dur-fx) var(--ease-fx);
}
.shortcuts__thumb {
position: absolute; inset-block-start: 50%; inset-inline-start: .3rem; translate: 0 -50%;
inline-size: 1.15rem; block-size: 1.15rem; border-radius: var(--r-full);
background: var(--ink-3);
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(--ink); border-color: var(--ink); }
.shortcuts__toggle[aria-checked="true"] .shortcuts__thumb { inset-inline-start: calc(100% - 1.45rem); background: var(--paper); }
.shortcuts__toggle:active .shortcuts__thumb { inline-size: 1.5rem; }
.shortcuts__toggle[aria-checked="true"]:active .shortcuts__thumb { inset-inline-start: calc(100% - 1.8rem); }
.shortcuts__state { min-inline-size: 2.2ch; font-size: var(--fs-small); font-weight: 650; }
.shortcuts__note { margin: var(--space-2) var(--space-5) var(--space-5); max-inline-size: 58ch; font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); }
[data-seed-option="aurora"] { --sw-1: var(--blob-aurora-1); --sw-2: var(--blob-aurora-2); --sw-3: var(--blob-aurora-3); --sw-4: var(--blob-aurora-4); }
[data-seed-option="magenta"] { --sw-1: var(--blob-magenta-1); --sw-2: var(--blob-magenta-2); --sw-3: var(--blob-magenta-3); --sw-4: var(--blob-magenta-4); }
[data-seed-option="azure"] { --sw-1: var(--blob-azure-1); --sw-2: var(--blob-azure-2); --sw-3: var(--blob-azure-3); --sw-4: var(--blob-azure-4); }
[data-seed-option="amber"] { --sw-1: var(--blob-amber-1); --sw-2: var(--blob-amber-2); --sw-3: var(--blob-amber-3); --sw-4: var(--blob-amber-4); }
.seed-picker {
position: fixed; inset: 0 auto auto 0; z-index: var(--z-popover);              
display: grid; gap: 2px;
inline-size: min(17rem, 100% - 2 * var(--gutter));
padding: var(--space-2);
}
.seed-picker[hidden] { display: none; }
.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 {
display: flex; align-items: center; gap: var(--space-3);
inline-size: 100%; min-block-size: var(--hit); padding: .3rem var(--space-3);
border-radius: var(--r-sm);
font: 500 var(--fs-body) / 1.2 var(--font-text); text-align: start;
color: var(--ink);
cursor: pointer;
transition: background-color var(--dur-fx) var(--ease-fx);
}
@media (hover: hover) and (pointer: fine) { .seed-picker__option:hover { background: rgb(var(--ink-rgb) / .06); } }
.seed-picker__option[aria-checked="true"] { background: rgb(var(--ink-rgb) / .08); }
.seed-picker__swatch {
flex: none; inline-size: 1.75rem; block-size: 1.75rem; border-radius: var(--r-full);
background:
radial-gradient(circle at 24% 28%, var(--sw-1) 0 34%, transparent 72%),
radial-gradient(circle at 78% 24%, var(--sw-2) 0 30%, transparent 70%),
radial-gradient(circle at 70% 82%, var(--sw-3) 0 30%, transparent 70%),
var(--sw-4);
box-shadow: inset 0 0 0 1px var(--line-strong);
}
.seed-picker__option[aria-checked="true"] .seed-picker__swatch { outline: 2px solid var(--ink); outline-offset: 2px; }
.seed-picker__check { margin-inline-start: auto; opacity: 0; }
.seed-picker__option[aria-checked="true"] .seed-picker__check { 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.4; color: var(--ink-3); }
.palette__swatch {
flex: none; inline-size: 1.25rem; block-size: 1.25rem; border-radius: var(--r-full);
background:
radial-gradient(circle at 24% 28%, var(--sw-1) 0 34%, transparent 72%),
radial-gradient(circle at 78% 24%, var(--sw-2) 0 30%, transparent 70%),
radial-gradient(circle at 70% 82%, var(--sw-3) 0 30%, transparent 70%),
var(--sw-4);
box-shadow: inset 0 0 0 1px var(--line-strong);
}
.palette__swatch[data-swatch="aurora"] { --sw-1: var(--blob-aurora-1); --sw-2: var(--blob-aurora-2); --sw-3: var(--blob-aurora-3); --sw-4: var(--blob-aurora-4); }
.palette__swatch[data-swatch="magenta"] { --sw-1: var(--blob-magenta-1); --sw-2: var(--blob-magenta-2); --sw-3: var(--blob-magenta-3); --sw-4: var(--blob-magenta-4); }
.palette__swatch[data-swatch="azure"] { --sw-1: var(--blob-azure-1); --sw-2: var(--blob-azure-2); --sw-3: var(--blob-azure-3); --sw-4: var(--blob-azure-4); }
.palette__swatch[data-swatch="amber"] { --sw-1: var(--blob-amber-1); --sw-2: var(--blob-amber-2); --sw-3: var(--blob-amber-3); --sw-4: var(--blob-amber-4); }
@media (prefers-reduced-motion: reduce) { .shortcuts__thumb { transition: none; } }
html.reduced-motion .shortcuts__thumb { transition: none; }
@media (forced-colors: active) {
.palette__opt[aria-selected="true"], .seed-picker__option[aria-checked="true"] { background: Canvas; color: CanvasText; outline: 2px solid Highlight; outline-offset: -2px; }
.palette__opt[aria-selected="true"]::before { background: Highlight; }
.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; }
.shortcuts__thumb { background: CanvasText; }
.shortcuts__toggle[aria-checked="true"] .shortcuts__track { background: Highlight; border-color: Highlight; }
.shortcuts__toggle[aria-checked="true"] .shortcuts__thumb { background: HighlightText; }
:is(.palette, .shortcuts)::backdrop { background: transparent; }
}
}