/* BD746833F3E6.css: A SITE'S THEME. Its address is its name: themes/c5e4cf47/css/BD746833F3E6.css (the site and the theme a page's address
 * carries). It holds a brand's VALUES and the rules of the SITE'S OWN places; no layout (core.css) and no technology
 * (technology.css).  1. THE VALUES, once per mode · 2. THE FONTS its slots name · 3. THE SITE'S PLACES. */

/* ── 1. THE VALUES · dark ── */
[data-brilliance-hierarchy="BD746833F3E6"][data-theme="dark"] {
  --active-color-01: #ED86FF;
  --active-color-02: #ED86FF;
  --active-color-03: #ED86FF;
  --active-color-04: #ED86FF;
  --active-color-05: #ED86FF;
  --active-color-06: #ED86FF;
  --active-color-07: #07CE3B;
  --active-color-08: #ED86FF;
  --active-color-09: #090409;
  --active-color-10: #111238;
  --active-color-11: #0C0810;
  --active-color-12: #ED86FF;
  --active-color-13: #090409;
  --active-color-14: #ED86FF;
  --active-color-15: #090409;
  --active-color-16: #ED86FF;
  --active-color-17: #ED86FF;
  --active-color-18: #ED86FF;
  --active-color-19: #07CE3B;
  --active-color-20: #090409;
  --active-color-21: #ED86FF;
  --active-color-22: #ED86FF;
  --active-color-23: #ED86FF;
  --active-color-24: #090409;
  --active-color-25: #ED86FF;
  --active-color-26: #090409;
  --active-color-27: #ED86FF;
  --active-color-28: #ED86FF;
  --active-color-29: #090409;
  --active-color-30: #090409;
  --active-color-31: #ED86FF;
  --active-color-32: #ED86FF;
  --active-color-33: #ED86FF;
  --active-color-34: #090409;
  --active-color-35: #ED86FF;
  --active-color-36: #ED86FF;
  --active-color-37: #ED86FF;
  --active-color-38: #090409;
  --active-color-39: #ED86FF;
  --active-color-40: #ED86FF;
  --active-color-41: #090409;
  --active-color-42: #ED86FF;
  --active-color-43: #ED86FF;
  --active-color-44: #090409;
  --active-color-45: #090409;
  --active-color-46: #090409;
  --active-color-47: #ED86FF;
  --active-color-48: #090409;
  --active-color-49: #ED86FF;
  --active-color-50: #090409;
  --active-color-51: #ED86FF;
  --active-color-52: #090409;
  --active-color-53: #ED86FF;
  --active-color-54: #090409;
  --active-color-55: #090409;
  --active-color-56: #ED86FF;
  --active-color-57: #ED86FF;
  --active-color-58: #ED86FF;
  --active-color-59: #ED86FF;
  --active-color-60: #ED86FF;
  --active-color-61: #ED86FF;
  --active-color-62: #090409;
  --active-color-63: #ED86FF;
  --active-color-64: #090409;
  --font-global-01: 'font_01_c5e4cf47', sans-serif;
  --font-global-02: 'font_02_c5e4cf47', sans-serif;
  --font-global-03: Helvetica, "Helvetica Neue", Arial, sans-serif;
  --font-global-04: 'font_04_c5e4cf47', 'font_05_c5e4cf47', monospace;
  --font-global-05: 'font_05_c5e4cf47', monospace;
  --font-heading: var(--font-global-02);
  --font-heading-wt: 900;
  --font-heading-sz: 3rem;
  --font-heading-tt: uppercase;
  --font-heading-td: none;
  --font-heading-fi: normal;
  --font-heading-ls: 1.5px;
  --font-heading-lh: 1.05;
  --font-title: var(--font-global-02);
  --font-title-wt: 900;
  --font-title-sz: 2rem;
  --font-title-tt: uppercase;
  --font-title-td: none;
  --font-title-fi: normal;
  --font-title-ls: 1.5px;
  --font-title-lh: 1.4;
  --font-subtitle: var(--font-global-02);
  --font-subtitle-wt: 900;
  --font-subtitle-sz: 0.9rem;
  --font-subtitle-tt: uppercase;
  --font-subtitle-td: none;
  --font-subtitle-fi: normal;
  --font-subtitle-ls: 1.5px;
  --font-subtitle-lh: 2.2;
  --font-body: var(--font-global-03);
  --font-body-wt: 300;
  --font-body-sz: 0.9rem;
  --font-body-tt: none;
  --font-body-td: none;
  --font-body-fi: normal;
  --font-body-ls: normal;
  --font-body-lh: 1.4;
  --font-caption: var(--font-global-01);
  --font-caption-wt: 600;
  --font-caption-sz: 0.7rem;
  --font-caption-tt: uppercase;
  --font-caption-td: none;
  --font-caption-fi: normal;
  --font-caption-ls: 1.5px;
  --font-caption-lh: 1.5;
  --font-label: var(--font-global-03);
  --font-label-wt: 500;
  --font-label-sz: 0.9rem;
  --font-label-tt: uppercase;
  --font-label-td: none;
  --font-label-fi: normal;
  --font-label-ls: normal;
  --font-label-lh: 1.4;
  --font-link: var(--font-global-01);
  --font-link-wt: 500;
  --font-link-sz: 0.9rem;
  --font-link-tt: none;
  --font-link-td: underline;
  --font-link-fi: normal;
  --font-link-ls: normal;
  --font-link-lh: 1.4;
  --font-nav: var(--font-global-01);
  --font-nav-wt: 400;
  --font-nav-sz: 0.7rem;
  --font-nav-tt: uppercase;
  --font-nav-td: none;
  --font-nav-fi: normal;
  --font-nav-ls: normal;
  --font-nav-lh: 1.4;
  --font-subnav: var(--font-global-01);
  --font-subnav-wt: 400;
  --font-subnav-sz: 0.9rem;
  --font-subnav-tt: uppercase;
  --font-subnav-td: none;
  --font-subnav-fi: normal;
  --font-subnav-ls: normal;
  --font-subnav-lh: 1.4;
  --font-callout: var(--font-global-04);
  --font-callout-wt: 500;
  --font-callout-sz: 1.1rem;
  --font-callout-tt: uppercase;
  --font-callout-td: none;
  --font-callout-fi: normal;
  --font-callout-ls: normal;
  --font-callout-lh: 1.8;
  --font-notes: var(--font-global-05);
  --font-notes-wt: 500;
  --font-notes-sz: 1.1rem;
  --font-notes-tt: uppercase;
  --font-notes-td: none;
  --font-notes-fi: normal;
  --font-notes-ls: normal;
  --font-notes-lh: 1.4;
  --font-annotation: var(--font-global-03);
  --font-annotation-wt: 300;
  --font-annotation-sz: 0.6rem;
  --font-annotation-tt: uppercase;
  --font-annotation-td: none;
  --font-annotation-fi: normal;
  --font-annotation-ls: normal;
  --font-annotation-lh: 1.4;
  --active-marquee: #07CE3B;
  --active-badge-bg: #910E0D;
  --active-badge-text: #FFFFFF;
  --ui-btn-padding-y: 18px;
  --ui-btn-padding-x: 15px;
  --ui-btn-border-width: 1px;
  --ui-btn-border-radius: 0px;
  --ui-btn-transition: 0.3s;
  --ui-btn-easing: ease;
  --ui-btn-hover-shadow: 30px;
  --ui-btn-hover-opacity: 0.9;
  --ui-btn-hover-lift: -2px;
  --active-logo-color: #07CE3B;
  --ui-announce-bg: var(--active-color-12);
  --ui-announce-text: var(--active-color-13);
  --ui-nav-bg: var(--active-color-14);
  --ui-nav-text: var(--active-color-15);
  --ui-nav-border: var(--active-color-16);
  --ui-subnav-text: var(--active-color-17);
  --ui-subnav-active: var(--active-color-18);
  --ui-subnav-indicator: var(--active-color-19);
  --ui-tools-bg: var(--active-color-20);
  --ui-tools-text: var(--active-color-21);
  --ui-tools-border: var(--active-color-22);
  --ui-tools-hover: var(--active-color-23);
  --ui-btn-text: var(--active-color-24);
  --ui-btn-bg: var(--active-color-25);
  --ui-btn-active-text: var(--active-color-26);
  --ui-btn-active-bg: var(--active-color-27);
  --ui-btn-hover-bg: var(--active-color-28);
  --ui-body-bg: var(--active-color-29);
  --ui-input-bg: var(--active-color-30);
  --ui-input-border: var(--active-color-31);
  --ui-input-focus: var(--active-color-32);
  --ui-placeholder: var(--active-color-33);
  --ui-card-bg: var(--active-color-34);
  --ui-card-border: var(--active-color-35);
  --ui-row-divider: var(--active-color-36);
  --ui-section-divider: var(--active-color-37);
  --ui-tag-text: var(--active-color-38);
  --ui-tag-bg: var(--active-color-39);
  --ui-tag-border: var(--active-color-40);
  --ui-sm-btn-text: var(--active-color-41);
  --ui-sm-btn-bg: var(--active-color-42);
  --ui-sm-btn-border: var(--active-color-43);
  --ui-surface-outer: var(--active-color-44);
  --ui-surface-inner: var(--active-color-45);
  --ui-success-text: var(--active-color-46);
  --ui-success-bg: var(--active-color-47);
  --ui-warn-text: var(--active-color-48);
  --ui-warn-bg: var(--active-color-49);
  --ui-error-text: var(--active-color-50);
  --ui-error-bg: var(--active-color-51);
  --ui-toast-text: var(--active-color-52);
  --ui-toast-bg: var(--active-color-53);
  --ui-gradient-start: var(--active-color-54);
  --ui-gradient-end: var(--active-color-55);
  --ui-gradient-text: var(--active-color-56);
  --ui-focus-ring: var(--active-color-57);
  --ui-progress-track: var(--active-color-58);
  --ui-progress-fill: var(--active-color-59);
  --ui-overlay: var(--active-color-60);
  --ui-footer-bg: var(--active-color-61);
  --ui-footer-text: var(--active-color-62);
  --ui-footer-border: var(--active-color-63);
  --ui-footer-link: var(--active-color-64);
  --font-size-xxxs: 0.6rem;
  --font-size-xxs: 0.7rem;
  --font-size-xs: 0.8rem;
  --font-size-s: 0.9rem;
  --font-size-m: 1.1rem;
  --font-size-l: 1.5rem;
  --font-size-xl: 2rem;
  --font-size-xxl: 3rem;
  --font-size-xxxl: 4.5rem;
  --font-size-xxxxl: 8rem;
  --font-size-key: 15.2px;
  --font-size-key-label: 10px;
  --font-size-button: 14.4px;
  --font-size-button-small: 11.2px;
  --font-size-fit: 11vw;
  --key-badge-copy: var(--active-color-07);
  --crt-ink: var(--active-color-01);
  --mood-lamp: var(--active-color-06);
  --mood-flood: var(--active-color-06);
  --dock-ink: var(--active-logo-color);
  --dock-caption: var(--active-marquee);
  --dock-activity: var(--active-color-01);
  --dock-glass: var(--glass);
  --dock-glass-filter: var(--glass-filter);
  --frame-glass: color-mix(in srgb, var(--ui-card-bg) 85%, transparent);
  --frame-glass-filter: blur(24px) saturate(1.4);
  --dock-toggle: var(--active-color-06);
  /* WORDS ON A FILL (2026-10-08): a control filled with the ink, the marquee or the lit token, and the words that stand on it in the ground's colour, each read a purpose of their own, so a ground reads a ground's and words read words' (CHROMA tells the two apart); the round button's line and icon the same */
  --ink-fill: var(--active-color-01);
  --marquee-fill: var(--active-marquee);
  --token-lit: var(--active-color-06);
  --ground-words: var(--active-color-09);
  --round-ink: var(--ui-btn-bg);
  --round-ground: color-mix(in srgb, var(--active-color-10) 55%, transparent);
  --round-line: color-mix(in srgb, var(--active-color-02) 28%, transparent);
  --round-filter: blur(14px) saturate(160%);
  --atom-ground: linear-gradient(90deg, color-mix(in srgb, var(--active-color-11) 70%, var(--active-color-09)), var(--active-color-09));
  --atom-line: color-mix(in srgb, var(--active-color-03) 35%, transparent);
  --atom-divider: color-mix(in srgb, var(--active-color-03) 28%, transparent);
  --atom-cap: color-mix(in srgb, var(--active-color-01) 60%, transparent);
  --atom-dot: #F3FE63;
  --atom-key-line: color-mix(in srgb, var(--active-color-03) 40%, transparent);
  --atom-input: color-mix(in srgb, var(--active-color-09) 75%, black);
  --atom-placeholder: color-mix(in srgb, var(--active-color-01) 42%, transparent);
  --atom-wire-line: color-mix(in srgb, var(--active-color-01) 22%, transparent);
  --atom-state: color-mix(in srgb, var(--active-color-01) 62%, transparent);
  --atom-veil: color-mix(in srgb, var(--active-color-11) 55%, transparent);
  --atom-veil-filter: blur(14px) saturate(1.2);
  --atom-row-line: color-mix(in srgb, var(--active-color-01) 14%, transparent);
  --key-badge-ring: color-mix(in srgb, var(--active-color-34) 25%, transparent);
  --key-glass-ground: linear-gradient(135deg, color-mix(in srgb, var(--active-color-01) 34%, transparent) 0%, color-mix(in srgb, var(--active-color-01) 16%, transparent) 55%, color-mix(in srgb, var(--active-color-01) 24%, transparent) 100%);
  --key-glass-sheen: linear-gradient(180deg, color-mix(in srgb, var(--active-color-01) 22%, transparent) 0%, transparent 48%);
  --key-glass-line: linear-gradient(135deg, color-mix(in srgb, var(--active-color-01) 92%, transparent) 0%, color-mix(in srgb, var(--active-color-01) 40%, transparent) 100%);
  --key-glass-filter: blur(18px) saturate(1.2);
  --key-glass-edge: color-mix(in srgb, var(--active-color-01) 60%, transparent);
  --key-glass-edge-low: color-mix(in srgb, var(--active-color-01) 18%, transparent);
  --key-glass-hash: color-mix(in srgb, var(--active-color-01) 34%, transparent);
  --key-glass-hash-ring: color-mix(in srgb, var(--active-color-01) 55%, transparent);
  --dock-line: color-mix(in srgb, var(--ui-tools-border) 25%, transparent);
  --agent-link: color-mix(in srgb, var(--active-color-04) 25%, transparent);
  --agent-shell-line: color-mix(in srgb, var(--active-color-01) 5%, transparent);
  --agent-shell-ground: linear-gradient(180deg, color-mix(in srgb, var(--active-color-01) 6%, transparent), color-mix(in srgb, var(--active-color-01) 1%, transparent) 55%, transparent);
  --agent-shell-cap: color-mix(in srgb, var(--active-color-01) 18%, transparent);
  --member-scale-large: 115%;
  --member-scale-xlarge: 130%;
  /* LIQUID GLASS (every glass surface reads these two: the button, the dock, the menu's buttons) */
  --glass: linear-gradient(135deg, color-mix(in srgb, var(--active-color-01) 18%, transparent) 0%, color-mix(in srgb, var(--active-color-01) 5%, transparent) 45%, transparent 100%);
  --glass-filter: blur(16px);
  --glass-words: var(--ui-btn-bg);
  --glass-line: var(--ui-btn-bg);
  --glass-hover: var(--ui-btn-hover-bg);
  --glass-hover-words: var(--active-color-09);
  --glass-pressed: var(--ui-btn-active-bg);
  --glass-glow: color-mix(in srgb, var(--ui-btn-bg) calc(var(--ui-btn-hover-opacity) * 100%), transparent);
  --background-fx: radial-gradient(ellipse 55% 38% at 46% 42%, color-mix(in srgb, var(--active-color-10) 16%, transparent) 0%, color-mix(in srgb, var(--active-color-10) 5%, transparent) 45%, transparent 75%), linear-gradient(to top, color-mix(in srgb, var(--active-color-10) 20%, transparent) 0%, color-mix(in srgb, var(--active-color-10) 6%, transparent) 10%, transparent 22%), linear-gradient(to right, rgb(0 0 0 / 1) 0%, rgb(0 0 0 / 0.75) 35%, rgb(0 0 0 / 0) 75%);
  --key-badge-label: #ED86FF;
  --key-badge-value: #ED86FF;
  --key-badge-hashbg: #090409;
  --key-badge-ground: linear-gradient(135deg, color-mix(in srgb, var(--key-badge-hashbg) 26%, transparent) 0%, transparent 38%, color-mix(in srgb, var(--key-badge-label) 10%, transparent) 72%, color-mix(in srgb, var(--key-badge-hashbg) 34%, transparent) 100%);
  --key-badge-sheen: linear-gradient(135deg, color-mix(in srgb, var(--key-badge-label) 20%, transparent) 0%, color-mix(in srgb, var(--key-badge-label) 5%, transparent) 45%, transparent 100%);
  --key-badge-line: linear-gradient(135deg, color-mix(in srgb, var(--key-badge-label) 70%, transparent) 0%, color-mix(in srgb, var(--key-badge-label) 14%, transparent) 55%, color-mix(in srgb, var(--key-badge-label) 42%, transparent) 100%);
  --key-badge-filter: blur(14px) saturate(1.4);
  --toggle-off: color-mix(in srgb, var(--active-color-03) 30%, transparent);
  --toggle-on: var(--active-color-07);
  --toggle-knob: var(--active-color-01);
  --toggle-knob-on: var(--active-color-09);
  --image-background: none;
  --image-background-words: transparent;
  --image-background_layer_01: none;
  --image-background_layer_01-words: var(--active-logo-color);
  --image-background_layer_02: none;
  --image-background_layer_02-words: var(--active-logo-color);
  --image-key_badge: none;
  --image-key_badge-words: var(--active-logo-color);
  --image-logo_header: url("../images/dark/logo_header.png");
  --image-logo_header-words: transparent;
  --image-logo_dock_01: url("../images/dark/logo_dock_01.png");
  --image-logo_dock_01-words: transparent;
  --image-logo_dock_02: url("../images/dark/logo_dock_02.png");
  --image-logo_dock_02-words: transparent;
  --image-logo_dock_03: url("../images/dark/logo_dock_03.png");
  --image-logo_dock_03-words: transparent;
  --image-logo_dock_04: url("../images/dark/logo_dock_04.png");
  --image-logo_dock_04-words: transparent;
  --image-logo_dock_05: url("../images/dark/logo_dock_05.png");
  --image-logo_dock_05-words: transparent;
  --image-logo_account_01: url("../images/dark/logo_account_01.png");
  --image-logo_account_01-words: transparent;
  --image-logo_account_02: url("../images/dark/logo_account_02.png");
  --image-logo_account_02-words: transparent;
  --image-logo_account_03: url("../images/dark/logo_account_03.png");
  --image-logo_account_03-words: transparent;
  --image-logo_account_04: url("../images/dark/logo_account_04.png");
  --image-logo_account_04-words: transparent;
  --image-logo_footer: url("../images/dark/logo_footer.png");
  --image-logo_footer-words: transparent;
  --image-logo_login: none;
  --image-logo_login-words: var(--active-logo-color);
  --image-logo_greeting: url("../images/dark/logo_greeting.png");
  --image-logo_greeting-words: transparent;
  --image-app_icon: none;
  --image-app_icon-words: var(--active-logo-color);
}

/* ── 1. THE VALUES · light ── */
[data-brilliance-hierarchy="BD746833F3E6"][data-theme="light"] {
  /* THE STREAMER'S ROOM (the owner 2026-10-03, one shot: "girl gamers bedrooms... a very pink purple teal style"): deep violet walls lit by LED strips, hot pink and purple glow, teal accents, pink-white words; backup: spine_steps/larry_llm_light_backup_20261003 */
  --active-color-01: #FFE6FA;
  --active-color-02: #F7C6EE;
  --active-color-03: #E3A6F5;
  --active-color-04: #FF4FD8;
  --active-color-05: #2EF2D8;
  --active-color-06: #E3A6F5;
  --active-color-07: #2EF2D8;
  --active-color-08: #FFE6FA;
  --active-color-09: #4D3365;
  --active-color-10: #432E55;
  --active-color-11: #5A397A;
  --active-color-12: #FF6AD5;
  --active-color-13: #3D2B4B;
  --active-color-14: #432E55;
  --active-color-15: #FFE6FA;
  --active-color-16: #6D3FA0;
  --active-color-17: #FFE6FA;
  --active-color-18: #FFE6FA;
  --active-color-19: #2EF2D8;
  --active-color-20: #432E55;
  --active-color-21: #FFE6FA;
  --active-color-22: #654086;
  --active-color-23: #4D3365;
  --active-color-24: #3D2B4B;
  --active-color-25: #2EF2D8;
  --active-color-26: #FFFFFF;
  --active-color-27: #A855F7;
  --active-color-28: #FF4FD8;
  --active-color-29: #4D3365;
  --active-color-30: #432E55;
  --active-color-31: #654086;
  --active-color-32: #2EF2D8;
  --active-color-33: #F7A8E8;
  --active-color-34: #5A397A;
  --active-color-35: #6D3FA0;
  --active-color-36: #654086;
  --active-color-37: #A855F7;
  --active-color-38: #3D2B4B;
  --active-color-39: #F7A8E8;
  --active-color-40: #E3A6F5;
  --active-color-41: #FFE6FA;
  --active-color-42: #654086;
  --active-color-43: #6D3FA0;
  --active-color-44: #432E55;
  --active-color-45: #5A397A;
  --active-color-46: #2EF2D8;
  --active-color-47: #432E55;
  --active-color-48: #FFD166;
  --active-color-49: #432E55;
  --active-color-50: #FF6B8A;
  --active-color-51: #432E55;
  --active-color-52: #3D2B4B;
  --active-color-53: #2EF2D8;
  --active-color-54: #000000;
  --active-color-55: #000000;
  --active-color-56: #FFFFFF;
  --active-color-57: #2EF2D8;
  --active-color-58: #654086;
  --active-color-59: #2EF2D8;
  --active-color-60: #432E55;
  --active-color-61: #432E55;
  --active-color-62: #E3A6F5;
  --active-color-63: #654086;
  --active-color-64: #2EF2D8;
  --font-global-01: 'font_01_c5e4cf47', sans-serif;
  --font-global-02: 'font_02_c5e4cf47', sans-serif;
  --font-global-03: Helvetica, "Helvetica Neue", Arial, sans-serif;
  --font-global-04: 'font_04_c5e4cf47', 'font_05_c5e4cf47', monospace;
  --font-global-05: 'font_05_c5e4cf47', monospace;
  --font-heading: var(--font-global-02);
  --font-heading-wt: 900;
  --font-heading-sz: 3rem;
  --font-heading-tt: uppercase;
  --font-heading-td: none;
  --font-heading-fi: normal;
  --font-heading-ls: 1.5px;
  --font-heading-lh: 1.05;
  --font-title: var(--font-global-02);
  --font-title-wt: 900;
  --font-title-sz: 2rem;
  --font-title-tt: uppercase;
  --font-title-td: none;
  --font-title-fi: normal;
  --font-title-ls: 1.5px;
  --font-title-lh: 1.4;
  --font-subtitle: var(--font-global-02);
  --font-subtitle-wt: 900;
  --font-subtitle-sz: 0.9rem;
  --font-subtitle-tt: uppercase;
  --font-subtitle-td: none;
  --font-subtitle-fi: normal;
  --font-subtitle-ls: 1.5px;
  --font-subtitle-lh: 2.2;
  --font-body: var(--font-global-03);
  --font-body-wt: 300;
  --font-body-sz: 0.9rem;
  --font-body-tt: none;
  --font-body-td: none;
  --font-body-fi: normal;
  --font-body-ls: normal;
  --font-body-lh: 1.4;
  --font-caption: var(--font-global-01);
  --font-caption-wt: 600;
  --font-caption-sz: 0.7rem;
  --font-caption-tt: uppercase;
  --font-caption-td: none;
  --font-caption-fi: normal;
  --font-caption-ls: 1.5px;
  --font-caption-lh: 1.5;
  --font-label: var(--font-global-03);
  --font-label-wt: 500;
  --font-label-sz: 0.9rem;
  --font-label-tt: uppercase;
  --font-label-td: none;
  --font-label-fi: normal;
  --font-label-ls: normal;
  --font-label-lh: 1.4;
  --font-link: var(--font-global-01);
  --font-link-wt: 500;
  --font-link-sz: 0.9rem;
  --font-link-tt: none;
  --font-link-td: underline;
  --font-link-fi: normal;
  --font-link-ls: normal;
  --font-link-lh: 1.4;
  --font-nav: var(--font-global-01);
  --font-nav-wt: 400;
  --font-nav-sz: 0.7rem;
  --font-nav-tt: uppercase;
  --font-nav-td: none;
  --font-nav-fi: normal;
  --font-nav-ls: normal;
  --font-nav-lh: 1.4;
  --font-subnav: var(--font-global-01);
  --font-subnav-wt: 400;
  --font-subnav-sz: 0.9rem;
  --font-subnav-tt: uppercase;
  --font-subnav-td: none;
  --font-subnav-fi: normal;
  --font-subnav-ls: normal;
  --font-subnav-lh: 1.4;
  --font-callout: var(--font-global-04);
  --font-callout-wt: 500;
  --font-callout-sz: 1.1rem;
  --font-callout-tt: uppercase;
  --font-callout-td: none;
  --font-callout-fi: normal;
  --font-callout-ls: normal;
  --font-callout-lh: 1.8;
  --font-notes: var(--font-global-05);
  --font-notes-wt: 500;
  --font-notes-sz: 1.1rem;
  --font-notes-tt: uppercase;
  --font-notes-td: none;
  --font-notes-fi: normal;
  --font-notes-ls: normal;
  --font-notes-lh: 1.4;
  --font-annotation: var(--font-global-03);
  --font-annotation-wt: 300;
  --font-annotation-sz: 0.6rem;
  --font-annotation-tt: uppercase;
  --font-annotation-td: none;
  --font-annotation-fi: normal;
  --font-annotation-ls: normal;
  --font-annotation-lh: 1.4;
  --active-marquee: #2EF2D8;
  --active-badge-bg: #910E0D;
  --active-badge-text: #FFFFFF;
  --ui-btn-padding-y: 18px;
  --ui-btn-padding-x: 15px;
  --ui-btn-border-width: 1px;
  --ui-btn-border-radius: 0px;
  --ui-btn-transition: 0.3s;
  --ui-btn-easing: ease;
  --ui-btn-hover-shadow: 30px;
  --ui-btn-hover-opacity: 0.9;
  --ui-btn-hover-lift: -2px;
  --active-logo-color: #2EF2D8;
  --ui-announce-bg: var(--active-color-12);
  --ui-announce-text: var(--active-color-13);
  --ui-nav-bg: var(--active-color-14);
  --ui-nav-text: var(--active-color-15);
  --ui-nav-border: var(--active-color-16);
  --ui-subnav-text: var(--active-color-17);
  --ui-subnav-active: var(--active-color-18);
  --ui-subnav-indicator: var(--active-color-19);
  --ui-tools-bg: var(--active-color-20);
  --ui-tools-text: var(--active-color-21);
  --ui-tools-border: var(--active-color-22);
  --ui-tools-hover: var(--active-color-23);
  --ui-btn-text: var(--active-color-24);
  --ui-btn-bg: var(--active-color-25);
  --ui-btn-active-text: var(--active-color-26);
  --ui-btn-active-bg: var(--active-color-27);
  --ui-btn-hover-bg: var(--active-color-28);
  --ui-body-bg: var(--active-color-29);
  --ui-input-bg: var(--active-color-30);
  --ui-input-border: var(--active-color-31);
  --ui-input-focus: var(--active-color-32);
  --ui-placeholder: var(--active-color-33);
  --ui-card-bg: var(--active-color-34);
  --ui-card-border: var(--active-color-35);
  --ui-row-divider: var(--active-color-36);
  --ui-section-divider: var(--active-color-37);
  --ui-tag-text: var(--active-color-38);
  --ui-tag-bg: var(--active-color-39);
  --ui-tag-border: var(--active-color-40);
  --ui-sm-btn-text: var(--active-color-41);
  --ui-sm-btn-bg: var(--active-color-42);
  --ui-sm-btn-border: var(--active-color-43);
  --ui-surface-outer: var(--active-color-44);
  --ui-surface-inner: var(--active-color-45);
  --ui-success-text: var(--active-color-46);
  --ui-success-bg: var(--active-color-47);
  --ui-warn-text: var(--active-color-48);
  --ui-warn-bg: var(--active-color-49);
  --ui-error-text: var(--active-color-50);
  --ui-error-bg: var(--active-color-51);
  --ui-toast-text: var(--active-color-52);
  --ui-toast-bg: var(--active-color-53);
  --ui-gradient-start: var(--active-color-54);
  --ui-gradient-end: var(--active-color-55);
  --ui-gradient-text: var(--active-color-56);
  --ui-focus-ring: var(--active-color-57);
  --ui-progress-track: var(--active-color-58);
  --ui-progress-fill: var(--active-color-59);
  --ui-overlay: var(--active-color-60);
  --ui-footer-bg: var(--active-color-61);
  --ui-footer-text: var(--active-color-62);
  --ui-footer-border: var(--active-color-63);
  --ui-footer-link: var(--active-color-64);
  --font-size-xxxs: 0.6rem;
  --font-size-xxs: 0.7rem;
  --font-size-xs: 0.8rem;
  --font-size-s: 0.9rem;
  --font-size-m: 1.1rem;
  --font-size-l: 1.5rem;
  --font-size-xl: 2rem;
  --font-size-xxl: 3rem;
  --font-size-xxxl: 4.5rem;
  --font-size-xxxxl: 8rem;
  --font-size-key: 15.2px;
  --font-size-key-label: 10px;
  --font-size-button: 14.4px;
  --font-size-button-small: 11.2px;
  --font-size-fit: 11vw;
  --key-badge-copy: var(--active-color-07);
  --crt-ink: var(--active-color-01);
  --mood-lamp: var(--active-color-56);
  --mood-flood: var(--dock-activity);
  --dock-ink: var(--active-logo-color);
  --dock-caption: var(--active-marquee);
  --dock-activity: var(--active-color-04);
  --dock-glass: linear-gradient(to bottom, color-mix(in srgb, var(--ui-gradient-end) 35%, transparent) 0%, color-mix(in srgb, var(--active-color-04) 30%, transparent) 100%);
  --dock-glass-filter: blur(24px) saturate(1.6) brightness(1.06);
  --frame-glass: color-mix(in srgb, var(--ui-card-bg) 92%, transparent);
  --frame-glass-filter: var(--glass-filter);
  --dock-toggle: var(--active-color-06);
  /* WORDS ON A FILL (2026-10-08): a control filled with the ink, the marquee or the lit token, and the words that stand on it in the ground's colour, each read a purpose of their own, so a ground reads a ground's and words read words' (CHROMA tells the two apart); the round button's line and icon the same */
  --ink-fill: var(--active-color-01);
  --marquee-fill: var(--active-marquee);
  --token-lit: var(--active-color-06);
  --ground-words: var(--active-color-09);
  --round-ink: var(--ui-btn-bg);
  --round-ground: color-mix(in srgb, var(--active-color-10) 55%, transparent);
  --round-line: color-mix(in srgb, var(--active-color-02) 28%, transparent);
  --round-filter: blur(14px) saturate(160%);
  --atom-ground: linear-gradient(90deg, color-mix(in srgb, var(--active-color-11) 70%, var(--active-color-09)), var(--active-color-09));
  --atom-line: color-mix(in srgb, var(--active-color-03) 35%, transparent);
  --atom-divider: color-mix(in srgb, var(--active-color-03) 28%, transparent);
  --atom-cap: color-mix(in srgb, var(--active-color-01) 60%, transparent);
  --atom-dot: #623718;
  --atom-key-line: color-mix(in srgb, var(--active-color-03) 40%, transparent);
  --atom-input: color-mix(in srgb, var(--active-color-09) 75%, black);
  --atom-placeholder: color-mix(in srgb, var(--active-color-01) 42%, transparent);
  --atom-wire-line: color-mix(in srgb, var(--active-color-01) 22%, transparent);
  --atom-state: color-mix(in srgb, var(--active-color-01) 62%, transparent);
  --atom-veil: color-mix(in srgb, var(--active-color-11) 55%, transparent);
  --atom-veil-filter: blur(14px) saturate(1.2);
  --atom-row-line: color-mix(in srgb, var(--active-color-01) 14%, transparent);
  --key-badge-ring: color-mix(in srgb, var(--active-color-34) 25%, transparent);
  --key-glass-ground: linear-gradient(135deg, color-mix(in srgb, var(--active-color-01) 34%, transparent) 0%, color-mix(in srgb, var(--active-color-01) 16%, transparent) 55%, color-mix(in srgb, var(--active-color-01) 24%, transparent) 100%);
  --key-glass-sheen: linear-gradient(180deg, color-mix(in srgb, var(--active-color-01) 22%, transparent) 0%, transparent 48%);
  --key-glass-line: linear-gradient(135deg, color-mix(in srgb, var(--active-color-01) 92%, transparent) 0%, color-mix(in srgb, var(--active-color-01) 40%, transparent) 100%);
  --key-glass-filter: blur(18px) saturate(1.2);
  --key-glass-edge: color-mix(in srgb, var(--active-color-01) 60%, transparent);
  --key-glass-edge-low: color-mix(in srgb, var(--active-color-01) 18%, transparent);
  --key-glass-hash: color-mix(in srgb, var(--active-color-01) 34%, transparent);
  --key-glass-hash-ring: color-mix(in srgb, var(--active-color-01) 55%, transparent);
  --dock-line: color-mix(in srgb, var(--active-color-04) 25%, transparent);
  --agent-link: color-mix(in srgb, var(--active-color-04) 25%, transparent);
  --agent-shell-line: color-mix(in srgb, var(--active-color-02) 12%, transparent);
  --agent-shell-ground: linear-gradient(180deg, color-mix(in srgb, var(--active-color-02) 9%, transparent), color-mix(in srgb, var(--active-color-02) 2%, transparent) 55%, transparent);
  --agent-shell-cap: color-mix(in srgb, var(--active-color-02) 40%, transparent);
  --member-scale-large: 115%;
  --member-scale-xlarge: 130%;
  /* LIQUID GLASS (every glass surface reads these two: the button, the dock, the menu's buttons) */
  --glass: linear-gradient(rgb(0 0 0 / 0.6), rgb(0 0 0 / 0.6));
  --glass-filter: blur(16px);
  --glass-words: var(--ui-btn-bg);
  --glass-line: var(--ui-btn-bg);
  --glass-hover: var(--ui-btn-hover-bg);
  --glass-hover-words: var(--active-color-09);
  --glass-pressed: var(--ui-btn-active-bg);
  --glass-glow: color-mix(in srgb, var(--ui-btn-bg) calc(var(--ui-btn-hover-opacity) * 100%), transparent);
  --background-fx: radial-gradient(ellipse 55% 38% at 46% 42%, color-mix(in srgb, var(--active-color-01) 16%, transparent) 0%, color-mix(in srgb, var(--active-color-01) 5%, transparent) 45%, transparent 75%), linear-gradient(to top, color-mix(in srgb, var(--active-color-01) 20%, transparent) 0%, color-mix(in srgb, var(--active-color-01) 6%, transparent) 10%, transparent 22%), radial-gradient(ellipse 75% 70% at 50% 45%, transparent 55%, color-mix(in srgb, var(--ui-gradient-start) 35%, transparent) 82%, color-mix(in srgb, var(--ui-gradient-end) 70%, transparent) 100%), linear-gradient(rgb(61 26 99 / 0.16), rgb(61 26 99 / 0.16)), linear-gradient(rgb(255 230 250 / 0.18), rgb(255 230 250 / 0.18)), radial-gradient(ellipse at 15% 20%, rgb(255 79 216 / 0.65) 0%, rgb(255 79 216 / 0) 55%), radial-gradient(ellipse at 85% 30%, rgb(46 242 216 / 0.45) 0%, rgb(46 242 216 / 0) 50%), radial-gradient(ellipse at 50% 100%, rgb(168 85 247 / 0.7) 0%, rgb(168 85 247 / 0) 60%), linear-gradient(160deg, rgb(255 79 216 / 0.35) 0%, rgb(124 58 237 / 0.45) 50%, rgb(46 242 216 / 0.25) 100%);
  --key-badge-label: #E3A6F5;
  --key-badge-value: #FFE6FA;
  --key-badge-hashbg: #432E55;
  --key-badge-ground: linear-gradient(135deg, color-mix(in srgb, var(--key-badge-hashbg) 26%, transparent) 0%, transparent 38%, color-mix(in srgb, var(--key-badge-label) 10%, transparent) 72%, color-mix(in srgb, var(--key-badge-hashbg) 34%, transparent) 100%);
  --key-badge-sheen: linear-gradient(135deg, color-mix(in srgb, var(--key-badge-label) 20%, transparent) 0%, color-mix(in srgb, var(--key-badge-label) 5%, transparent) 45%, transparent 100%);
  --key-badge-line: linear-gradient(135deg, color-mix(in srgb, var(--key-badge-label) 70%, transparent) 0%, color-mix(in srgb, var(--key-badge-label) 14%, transparent) 55%, color-mix(in srgb, var(--key-badge-label) 42%, transparent) 100%);
  --key-badge-filter: blur(14px) saturate(1.4);
  --toggle-off: color-mix(in srgb, var(--active-color-03) 30%, transparent);
  --toggle-on: var(--active-color-07);
  --toggle-knob: var(--active-color-01);
  --toggle-knob-on: var(--active-color-09);
  --image-background: none;
  --image-background-words: transparent;
  --image-background_layer_01: none;
  --image-background_layer_01-words: var(--active-logo-color);
  --image-background_layer_02: none;
  --image-background_layer_02-words: var(--active-logo-color);
  --image-key_badge: none;
  --image-key_badge-words: var(--active-logo-color);
  --image-logo_header: url("../images/light/logo_header.png");
  --image-logo_header-words: transparent;
  --image-logo_dock_01: url("../images/light/logo_dock_01.png");
  --image-logo_dock_01-words: transparent;
  --image-logo_dock_02: url("../images/light/logo_dock_02.png");
  --image-logo_dock_02-words: transparent;
  --image-logo_dock_03: url("../images/light/logo_dock_03.png");
  --image-logo_dock_03-words: transparent;
  --image-logo_dock_04: url("../images/light/logo_dock_04.png");
  --image-logo_dock_04-words: transparent;
  --image-logo_dock_05: url("../images/light/logo_dock_05.png");
  --image-logo_dock_05-words: transparent;
  --image-logo_account_01: url("../images/light/logo_account_01.png");
  --image-logo_account_01-words: transparent;
  --image-logo_account_02: url("../images/light/logo_account_02.png");
  --image-logo_account_02-words: transparent;
  --image-logo_account_03: url("../images/light/logo_account_03.png");
  --image-logo_account_03-words: transparent;
  --image-logo_account_04: url("../images/light/logo_account_04.png");
  --image-logo_account_04-words: transparent;
  --image-logo_footer: url("../images/light/logo_footer.png");
  --image-logo_footer-words: transparent;
  --image-logo_login: none;
  --image-logo_login-words: var(--active-logo-color);
  --image-logo_greeting: url("../images/light/logo_greeting.png");
  --image-logo_greeting-words: transparent;
  --image-app_icon: none;
  --image-app_icon-words: var(--active-logo-color);
}

/* ── 2. THE FONTS its slots name: each a file of this site's fonts folder, named by its slot ── */
@font-face { font-family: "font_01_c5e4cf47"; src: url("../fonts/font_01.otf"); font-display: swap; }
@font-face { font-family: "font_02_c5e4cf47"; src: url("../fonts/font_02.otf"); font-display: swap; }
@font-face { font-family: "font_04_c5e4cf47"; src: url("../fonts/font_04.otf"); font-display: swap; }
@font-face { font-family: "font_05_c5e4cf47"; src: url("../fonts/font_05.otf"); font-display: swap; }
/* ── 3. THE THEME'S PLACES: every rule only REFERS to a variable of section 1; none holds a colour, a font or an image;
      none gives a box its shape (core.css does); none names a technology (technology.css does). The same words in every
      theme: a theme differs by its values alone. A ground wears a ground slot, words and lines a text slot. ── */

/* 3.1 THE PAGE: its ground and its words; the member's own size of type. A link and a control wear the words around them unless their own place says more */
html[data-font-scale="large"] { font-size: var(--member-scale-large); }
html[data-font-scale="xlarge"] { font-size: var(--member-scale-xlarge); }
body { background-color: var(--active-color-09); background-image: var(--background-fx), var(--image-background); color: var(--active-color-01); font-family: var(--font-body); font-weight: var(--font-body-wt); }
[data-canvas-stage][data-filled] { background-color: var(--active-color-09); }   /* THE FILLED WINDOW (an iPhone's Safari, host_canvas.js; the owner 2026-10-15: "theme"): the page's own ground behind the picture */
a { color: inherit; text-decoration: var(--font-link-td); }   /* a link's line is the link role's own slot */
button, input, select, textarea { font: inherit; color: inherit; background-color: transparent; border-color: currentColor; }

/* 3.2 THE TEXT ROLES (the font colour law: each role wears one font role and one colour slot) */
.heading { font-family: var(--font-heading); font-size: var(--font-heading-sz); font-weight: var(--font-heading-wt); font-style: var(--font-heading-fi); line-height: var(--font-heading-lh); letter-spacing: var(--font-heading-ls); text-transform: var(--font-heading-tt); text-decoration: var(--font-heading-td); color: var(--active-color-01); }
.title { font-family: var(--font-title); font-size: var(--font-title-sz); font-weight: var(--font-title-wt); font-style: var(--font-title-fi); line-height: var(--font-title-lh); letter-spacing: var(--font-title-ls); text-transform: var(--font-title-tt); text-decoration: var(--font-title-td); color: var(--active-color-01); }
.subtitle { font-family: var(--font-subtitle); font-size: var(--font-subtitle-sz); font-weight: var(--font-subtitle-wt); font-style: var(--font-subtitle-fi); line-height: var(--font-subtitle-lh); letter-spacing: var(--font-subtitle-ls); text-transform: var(--font-subtitle-tt); text-decoration: var(--font-subtitle-td); color: var(--active-color-02); }
.body { font-family: var(--font-body); font-size: var(--font-body-sz); font-weight: var(--font-body-wt); font-style: var(--font-body-fi); line-height: var(--font-body-lh); letter-spacing: var(--font-body-ls); text-transform: var(--font-body-tt); text-decoration: var(--font-body-td); color: var(--active-color-02); }
.caption { font-family: var(--font-caption); font-size: var(--font-caption-sz); font-weight: var(--font-caption-wt); font-style: var(--font-caption-fi); line-height: var(--font-caption-lh); letter-spacing: var(--font-caption-ls); text-transform: var(--font-caption-tt); text-decoration: var(--font-caption-td); color: var(--active-color-03); }
.nav { font-family: var(--font-nav); font-size: var(--font-nav-sz); font-weight: var(--font-nav-wt); font-style: var(--font-nav-fi); line-height: var(--font-nav-lh); letter-spacing: var(--font-nav-ls); text-transform: var(--font-nav-tt); text-decoration: var(--font-nav-td); color: var(--active-color-04); }
.link { font-family: var(--font-link); font-size: var(--font-link-sz); font-weight: var(--font-link-wt); font-style: var(--font-link-fi); line-height: var(--font-link-lh); letter-spacing: var(--font-link-ls); text-transform: var(--font-link-tt); text-decoration: var(--font-link-td); color: var(--active-color-04); }
.callout { font-family: var(--font-callout); font-size: var(--font-callout-sz); font-weight: var(--font-callout-wt); font-style: var(--font-callout-fi); line-height: var(--font-callout-lh); letter-spacing: var(--font-callout-ls); text-transform: var(--font-callout-tt); text-decoration: var(--font-callout-td); color: var(--active-color-06); }
.emphasis { font-family: var(--font-callout); font-size: var(--font-callout-sz); font-weight: var(--font-callout-wt); font-style: var(--font-callout-fi); line-height: var(--font-callout-lh); letter-spacing: var(--font-callout-ls); text-transform: var(--font-callout-tt); text-decoration: var(--font-callout-td); color: var(--active-color-07); }
.notes { font-family: var(--font-notes); font-size: var(--font-notes-sz); font-weight: var(--font-notes-wt); font-style: var(--font-notes-fi); line-height: var(--font-notes-lh); letter-spacing: var(--font-notes-ls); text-transform: var(--font-notes-tt); text-decoration: var(--font-notes-td); color: var(--active-color-08); }
.annotation { font-family: var(--font-annotation); font-size: var(--font-annotation-sz); font-weight: var(--font-annotation-wt); font-style: var(--font-annotation-fi); line-height: var(--font-annotation-lh); letter-spacing: var(--font-annotation-ls); text-transform: var(--font-annotation-tt); text-decoration: var(--font-annotation-td); color: var(--active-color-08); }
.subnav { font-family: var(--font-subnav); font-size: var(--font-subnav-sz); font-weight: var(--font-subnav-wt); font-style: var(--font-subnav-fi); line-height: var(--font-subnav-lh); letter-spacing: var(--font-subnav-ls); text-transform: var(--font-subnav-tt); text-decoration: var(--font-subnav-td); color: var(--active-color-04); }
.label { font-family: var(--font-label); font-size: var(--font-label-sz); font-weight: var(--font-label-wt); font-style: var(--font-label-fi); line-height: var(--font-label-lh); letter-spacing: var(--font-label-ls); text-transform: var(--font-label-tt); text-decoration: var(--font-label-td); color: var(--active-color-03); }
.link:hover, .nav:hover, .subnav:hover { color: var(--active-color-05); }
/* AN IMAGE'S PLACE, while words stand in for the image (the owner: the placeholder's own colour, so words and an image's place are told apart) */
.login-logo { background-image: var(--image-logo_login); color: var(--image-logo_login-words); }   /* the door's logo: the look's picture, or the word in its colour, never both (the owner, 2026-10-07) */
.pf-dock__logo--01 { background-color: var(--dock-ink); -webkit-mask-image: var(--image-logo_dock_01); mask-image: var(--image-logo_dock_01); color: var(--image-logo_dock_01-words); }
.pf-dock__logo--02 { background-color: var(--dock-ink); -webkit-mask-image: var(--image-logo_dock_02); mask-image: var(--image-logo_dock_02); color: var(--image-logo_dock_02-words); }
.pf-dock__logo--03 { background-color: var(--dock-ink); -webkit-mask-image: var(--image-logo_dock_03); mask-image: var(--image-logo_dock_03); color: var(--image-logo_dock_03-words); }
.pf-dock__logo--04 { background-color: var(--dock-activity); -webkit-mask-image: var(--image-logo_dock_04); mask-image: var(--image-logo_dock_04); color: var(--image-logo_dock_04-words); }   /* THE ACTIVITY HEARTBEAT wears its own colour (the owner 2026-10-03: "the original larry d logo in the doc had its own color definition for each theme"): its picture as a mask, --dock-activity painting through */
.pf-dock__logo--05 { background-color: var(--dock-ink); -webkit-mask-image: var(--image-logo_dock_05); mask-image: var(--image-logo_dock_05); color: var(--image-logo_dock_05-words); }
.ac-logo--01 { background-image: var(--image-logo_account_01); color: var(--image-logo_account_01-words); }
.ac-logo--02 { background-image: var(--image-logo_account_02); color: var(--image-logo_account_02-words); }
.ac-logo--03 { background-image: var(--image-logo_account_03); color: var(--image-logo_account_03-words); }
.ac-logo--04 { background-image: var(--image-logo_account_04); color: var(--image-logo_account_04-words); }
/* AN IMAGE'S PLACE: the slot's picture when its file stands in the site's images folder, its words when not; the box and how the picture sits in it are the core's */
.layout--header__logo-link { background-image: var(--image-logo_header); }
.layout--footer__mark { background-image: var(--image-logo_footer); }
.layout--footer__mark .layout--footer__wordmark { color: var(--image-logo_footer-words); }
.amx-greet__mark { background-image: var(--image-logo_greeting); color: var(--image-logo_greeting-words); }
.key-badge__box { background-color: var(--active-color-34); background-image: var(--image-key_badge), var(--key-badge-ground); border-image: var(--key-badge-line) 1; -webkit-backdrop-filter: var(--key-badge-filter); backdrop-filter: var(--key-badge-filter); }

/* 3.3 THE SIZES: a size named on an element stands over its role's own; a place's own size, written further down, stands over both */
.size--xxxs { font-size: var(--font-size-xxxs); }
.size--xxs { font-size: var(--font-size-xxs); }
.size--xs { font-size: var(--font-size-xs); }
.size--s { font-size: var(--font-size-s); }
.size--m { font-size: var(--font-size-m); }
.size--l { font-size: var(--font-size-l); }
.size--xl { font-size: var(--font-size-xl); }
.size--xxl { font-size: var(--font-size-xxl); }
.size--xxxl { font-size: var(--font-size-xxxl); }
.size--xxxxl { font-size: var(--font-size-xxxxl); }

/* 3.4 LETTER CASE (the member's, on <html>): UPPER, every word of the page's regions in capitals; MIXED, every word as typed. What a person typed, a key and code stay as typed always. */
html[data-case="upper"] :is(.main-container, .layout--footer, .layout--header, .pf-dock, .login-body), html[data-case="upper"] :is(.main-container, .layout--footer, .layout--header, .pf-dock, .login-body) * { text-transform: uppercase; }
html[data-case="mixed"] :is(.main-container, .layout--footer, .layout--header, .pf-dock, .login-body) * { text-transform: none; }
html[data-case="upper"][data-case] :is(input, textarea, select, option, code, pre, .key-badge__value, .key-badge__value *, .key-chip-badge, [data-verbatim], [data-verbatim] *) { text-transform: none; }
html[data-case="upper"] :is(input, textarea)::placeholder { text-transform: uppercase; }
html[data-case="mixed"] :is(input, textarea)::placeholder { text-transform: none; }

/* 3.5 THE CONTROLS every screen shares, each kind written once. A FIELD wears the input slots. A BUTTON is LIQUID GLASS (the owner's original): its ground the theme's glass, its words and line the button's colour; filled when the pointer is on it. A SMALL BUTTON its own three slots, in the caption's font (the current one of a pair: the active pair). A TAG its own three. */
.login-input, .sub-search-input, .wf-input, .ps-select, .ac-q { background-color: var(--ui-input-bg); border-color: var(--ui-input-border); }
.login-input::placeholder, .sub-search-input::placeholder, .wf-input::placeholder { color: var(--ui-placeholder); }
.login-input:focus, .sub-search-input:focus, .wf-input:focus, .ps-select:focus { border-color: var(--ui-input-focus); outline-color: var(--ui-focus-ring); }
.sub-tag { color: var(--ui-tag-text); background-color: var(--ui-tag-bg); border-color: var(--ui-tag-border); }


/* 3.6 THE HEADER: it floats over the page (no ground of its own); its links and icons wear the page's words */
.layout--header a, .hdr-icon-btn { color: inherit; text-decoration: none; }
.layout--header a:hover, .hdr-icon-btn:hover { color: var(--active-color-05); }
.layout--header a.layout--header__logo-link, .layout--header a.layout--header__logo-link:hover { color: var(--image-logo_header-words); }   /* the image's words: the placeholder's colour, or none over its picture (after the header's own link colours, so it holds) */
.hdr-icon-btn { background-color: transparent; }
.hdr-text { font-family: var(--font-nav); font-size: var(--font-nav-sz); font-weight: var(--font-nav-wt); letter-spacing: var(--font-nav-ls); text-transform: var(--font-nav-tt); }
.hdr-status--success { fill: var(--status-ok); }
.hdr-status--warn { fill: var(--status-warn); }
.hdr-status--error { fill: var(--status-error); }
.hdr-status--null { fill: none; }
.hdr-net--fading { opacity: 0; transition: opacity 0.3s; }
.view-as-bar { background-color: var(--ui-announce-bg); color: var(--ui-announce-text); }

/* 3.7 THE MODULE STRIP and every navigation link of its kind; the current one's line */
.layout--nav__link { font-family: var(--font-subnav); font-size: var(--font-subnav-sz); font-weight: var(--font-subnav-wt); letter-spacing: var(--font-subnav-ls); text-transform: var(--font-subnav-tt); text-decoration: none; color: var(--ui-subnav-text); }
.layout--nav__link:hover { color: var(--active-color-05); }
.layout--nav__link[aria-current] { color: var(--ui-subnav-active); }
.pf-modstrip__inner > [aria-current] { border-bottom-color: var(--ui-subnav-indicator); }

/* 3.8 THE BAR UNDER THE HEADER (every page's own): its edge line, its read-out's lines, the lit token, the badges */
.tech-strip-bar { border-left-color: var(--active-color-07); }
.tech-strip-idlines { text-decoration: none; }
.tech-strip-token--active { color: var(--ground-words); background-color: var(--token-lit); line-height: 1; }
.tech-badge__top, .tech-badge__cap { text-decoration: none; }
.tech-badge__cap { color: var(--active-color-06); font-size: var(--font-size-xxxs); }

/* 3.9 THE HERO over a screen */
.amx-kicker { font-family: var(--font-caption); font-size: var(--font-caption-sz); font-weight: var(--font-caption-wt); letter-spacing: var(--font-caption-ls); text-transform: var(--font-caption-tt); color: var(--active-color-08); }
.amx-h1 { font-family: var(--font-heading); font-size: var(--font-heading-sz); font-weight: var(--font-heading-wt); line-height: var(--font-heading-lh); text-transform: var(--font-heading-tt); color: var(--active-color-08); }
.amx-greet__line { font-family: var(--font-callout); font-size: min(var(--font-heading-sz), var(--font-size-fit)); font-weight: var(--font-callout-wt); line-height: var(--font-heading-lh); letter-spacing: var(--font-callout-ls); text-transform: var(--font-callout-tt); color: var(--active-color-08); }   /* THE GREETING: the callout's font at the heading's size, so it is told apart from the heading over it */
.amx-sub { font-family: var(--font-subtitle); font-size: var(--font-subtitle-sz); font-weight: var(--font-subtitle-wt); letter-spacing: var(--font-subtitle-ls); text-transform: var(--font-subtitle-tt); color: var(--active-color-08); }

/* 3.10 THE BACK CIRCLE: a tool */
.ps-back { color: var(--ui-tools-text); border-color: var(--ui-tools-border); text-decoration: none; }

/* 3.11 MAIN NAV: its buttons' words (their colours are a button's, above) */

/* 3.12 THE FOOTER: no ground of its own; its words wear their roles */
.layout--footer__mark { text-decoration: none; }
.pfft-tm { font-size: var(--font-annotation-sz); }
.pfft-tags { font-size: var(--font-subtitle-sz); color: var(--active-color-01); }
.pfft-lnk { color: inherit; text-decoration: none; }
.pfft-resp { font-family: var(--font-global-02); font-size: var(--font-label-sz); line-height: var(--font-callout-lh); letter-spacing: var(--font-label-ls); text-transform: var(--font-label-tt); color: var(--active-color-01); }
.pfft-company { font-size: var(--font-subtitle-sz); }
.pfft-fine { color: var(--active-color-01); }

/* 3.13 THE DOCK: a tool bar over the page: its ground and its top line; an item, its caption and the current one's line wear the marquee; the badge its own two slots; HIDE and SHOW */
.pf-dock { background: var(--dock-glass); -webkit-backdrop-filter: var(--dock-glass-filter); backdrop-filter: var(--dock-glass-filter); border-top-color: var(--dock-line); }   /* THE DOCK'S OWN GLASS: dark mode the liquid glass; light mode the original's light dock, near-solid in the page's own ground (the owner 2026-10-03: light docks "hard to read and not professional looking") */   /* the line above the dock, dim as the original (the owner 2026-10-03: "maybe 25%") */
.pf-dock__item { color: var(--dock-caption); text-decoration: none; }
.pf-dock__cap { font-size: var(--font-size-xxxs); letter-spacing: var(--font-annotation-ls); color: var(--dock-caption); }   /* THE DOCK'S INK (the owner 2026-10-03: light mode "a new treatment so its readable and looks good"): every mark a mask in --dock-ink, the words in --dock-caption; dark mode the logo colour as before, light mode a readable ink on frosted white */
.pf-dock__item[aria-current] .pf-dock__cap { border-bottom-color: var(--dock-caption); }
.pf-dock__badge { background-color: var(--active-badge-bg); color: var(--active-badge-text); }
.pf-dock__toggle, .pf-dock__show { background-color: transparent; color: var(--dock-toggle); }
.pf-dock__toggle .pf-dock__cap, .pf-dock__show .pf-dock__cap { color: var(--dock-toggle); }

/* 3.14 THE DOOR and CREATE ACCOUNT: the stripe wears the announcement's pair; a refusal the error's pair */
.login-stripe { background-color: var(--ink-fill); color: var(--ground-words); font-family: var(--font-global-03); font-size: var(--font-size-xxs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }   /* the original's band: the ink's fill, the ground's words, bold and spaced (fs login.html) */
.signup-error { background-color: var(--ui-error-bg); color: var(--ui-error-text); }
.signup-form a { color: var(--active-color-04); }
.signup-agree input { accent-color: var(--active-color-07); }

/* 3.15 THE AGENT'S WORD (its link wears the link slot) */
.pb-atom > a { color: var(--agent-link); text-decoration: none; }   /* THE AGENT LINK: very dim, see-through, still there (the owner 2026-10-03: "very dim like the original") */
.pb-atom > a:hover { color: var(--active-color-05); }

/* 3.16 THE ROWS: a group is a card (its ground and its frame), a line between two rows the row divider; a row that is a link or one pick wears the page's words; the pill and the picker wear the input slots, the lit knob the input's focus */
.ios-group { background-color: var(--ui-card-bg); border-color: var(--ui-card-border); }
.ios-group > * + *, .ios-row + .ios-row { border-top-color: var(--ui-row-divider); }
.ios-row { color: inherit; text-decoration: none; }
.ios-row__pick { background-color: transparent; }
.theme-row { color: var(--active-color-01); background-color: var(--active-color-09); }
.ios-group > .theme-row { border-top-color: inherit; }
.theme-row .ios-row__pick, .theme-row .caption { color: var(--active-color-01); font-family: inherit; }
.toggle { border-color: var(--toggle-off); background-color: var(--toggle-off); transition: background-color var(--ui-btn-transition) var(--ui-btn-easing); }
.toggle[aria-pressed="true"] { border-color: var(--toggle-on); background-color: var(--toggle-on); }
.toggle__knob { border-color: var(--toggle-knob); background-color: var(--toggle-knob); transition: left var(--ui-btn-transition) var(--ui-btn-easing); }
.toggle[aria-pressed="true"] .toggle__knob { border-color: var(--toggle-knob-on); background-color: var(--toggle-knob-on); }
.admin-ops__bullet, .admin-ops .link { color: var(--active-color-07); }

/* 3.17 THE MENU: a button is a card */
.electric-button { color: inherit; text-decoration: none; background: var(--glass); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); border-color: var(--ui-card-border); }
.electric-button:hover { border-color: var(--active-color-05); }
.electric-button::before { background-image: linear-gradient(90deg, transparent, var(--glass-hover), transparent); }

/* 3.18 THE LIST: the controller a tool box (its frame, its rules); a card's line the row divider; the key badge a card's frame, its hash a tag's frame; the remove question a card over the overlay */
.sub-controller { border-color: var(--ui-tools-border); background-color: var(--ui-card-bg); }
.wl-glass { border-color: var(--dock-line); background: var(--dock-glass); -webkit-backdrop-filter: var(--dock-glass-filter); backdrop-filter: var(--dock-glass-filter); }   /* THE RECORD FRAME (the owner 2026-10-03): the outer ring, the dock's own glass beyond the border */
.wl-panel { border-color: var(--dock-line); background: var(--frame-glass); -webkit-backdrop-filter: var(--frame-glass-filter); backdrop-filter: var(--frame-glass-filter); }   /* the inner glass (list, card, add, edit, remove): in dark mode the controller's colour slightly see-through, in light mode the theme's light glass */
.wl-panel .sub-controller { background-color: var(--ui-card-bg); }   /* "the solid background is only for the controller area" */
.wl-rule, .wl-divider { border-color: var(--ui-section-divider); }
.mc-card { border-bottom-color: var(--ui-row-divider); }
.mc-tie { color: inherit; text-decoration: none; }
.mc-tie:hover { color: var(--active-color-05); }
.key-chip-badge { color: inherit; text-decoration: none; }
.key-chip-badge { border-color: var(--ui-tag-border); }
.rm-dialog { color: var(--active-color-01); background-color: var(--ui-card-bg); border-color: var(--ui-card-border); }
.rm-dialog::backdrop { background-color: var(--ui-overlay); }
.key-badge__box { border-color: transparent; }   /* the original's: no line of its own colour, the glass line (its border picture) draws it */
.key-badge__box::after { background: var(--key-badge-sheen); }
.key-badge__label { font-family: var(--font-caption); font-size: var(--font-caption-sz); font-weight: var(--font-caption-wt); line-height: var(--font-caption-lh); letter-spacing: var(--font-caption-ls); text-transform: var(--font-caption-tt); color: var(--key-badge-label); }
.key-badge__value { font-family: var(--font-notes); font-size: var(--font-size-key); font-weight: var(--font-notes-wt); letter-spacing: normal; color: var(--key-badge-value); text-decoration: none; }
.key-badge__hash { color: var(--active-color-34); background-color: var(--key-badge-value); box-shadow: inset 0 0 0 1px var(--key-badge-ring); }
.key-badge--glass .key-badge__box::after { background: var(--key-glass-sheen); }
.key-badge--glass .key-badge__box { background-color: transparent; background-image: var(--key-glass-ground); border-image: var(--key-glass-line) 1; -webkit-backdrop-filter: var(--key-glass-filter); backdrop-filter: var(--key-glass-filter); box-shadow: inset 0 1px 0 var(--key-glass-edge), inset 0 -1px 0 var(--key-glass-edge-low); color: var(--active-color-01); }   /* THE GLASS BADGE, the original shell's blank key badge value for value (so hub/pick_block_widget.css:184-188 .dblk-damkey--blank): the same box, its surface the first ink as glass */
.key-badge--glass .key-badge__label, .key-badge--glass .key-badge__value, .key-badge--glass .key-badge__copy { color: var(--active-color-01); }
.key-badge--glass .key-badge__hash { color: var(--active-color-01); background-color: var(--key-glass-hash); box-shadow: inset 0 0 0 1px var(--key-glass-hash-ring); }
.key-badge__copy { color: var(--key-badge-copy); background-color: transparent; }   /* THE TINY COPY BUTTON: a colour of its own (the owner 2026-10-03: "one of the other colors from the theme"), the key's on hover */
.key-badge__copy:hover { color: var(--key-badge-value); }
.key-badge--account .key-badge__label, .key-badge--account .key-badge__value, .key-badge--account .key-badge__copy { color: var(--active-color-11); }   /* tone=account: the original's colour by kind */
.key-badge--account .key-badge__hash { background-color: var(--active-color-11); }
.key-badge--member .key-badge__label, .key-badge--member .key-badge__value, .key-badge--member .key-badge__copy { color: var(--active-color-07); }   /* tone=member: the original's colour by kind */
.key-badge--member .key-badge__hash { background-color: var(--active-color-07); }
.key-badge--parcel .key-badge__label, .key-badge--parcel .key-badge__value, .key-badge--parcel .key-badge__copy { color: var(--active-color-08); }   /* tone=parcel: the original's colour by kind */
.key-badge--parcel .key-badge__hash { background-color: var(--active-color-08); }

/* 3.19 THE CARD: a section head's line and the line between the kinds the section divider; a look book tile a card change control's lines the row divider */
.wc-sectionhead { border-bottom-color: var(--ui-section-divider); }
.wc-divider { border-top-color: var(--ui-section-divider); }
.wc-field a { color: var(--active-color-04); }
.lb-open { color: inherit; text-decoration: none; background-color: var(--ui-card-bg); border-color: var(--ui-card-border); }
.cc-table th, .cc-table td, .fa-table th, .fa-table td { border-bottom-color: var(--ui-row-divider); }

/* 3.20 THE FORMS (add, edit): what the save said in a card's frame; a tick wears the emphasis */
.wf-verdict { border-color: var(--ui-card-border); }
.wf-check input { accent-color: var(--active-color-07); }

/* 3.21 THE FIELDS PAGES, AN AGENT'S CARD, THE DIAGNOSTICS PANELS: a field that may not be hidden says so in the emphasis; an agent's card and its art slot a card's ground and frame, the initials the logo colour; a diagnostics panel a card's frame */
.fa-ok { color: var(--active-color-07); }
.mk-card { background-color: var(--ui-card-bg); border-color: var(--ui-card-border); }
.mk-frame { border-color: var(--ui-card-border); }
.mk-initials { font-family: var(--font-heading); font-weight: var(--font-heading-wt); color: var(--active-logo-color); }
.diag { border-color: var(--ui-card-border); background-color: var(--ui-card-bg); }   /* the developer reports on the card's solid ground: readable (owner 2026-10-04) */

/* 3.22 THE AGENT'S WHOLE SHELL: a tool box (its frame and lines the tools' border); the switch that is on the active button's pair; a point's mark and a wire's state the notes' colour; what a run said a card's frame */
.pipe-bleed .pipe-bg { background: var(--active-color-09); }   /* THE SHELLS' CONTAINER: a solid panel of the page's ground colour, the original's (ui/inc_pb_atom_css.html:17) */
.pb-atom-num { font-family: var(--font-title); font-weight: var(--font-body-wt); font-size: var(--font-title-sz); line-height: var(--font-title-lh); color: var(--active-color-01); }   /* THE ATOM CHROME, the original's value for value (ui/inc_pb_atom_css.html:23,27,41,42): the number in the title's face, the status column small, its cap dim, its word in the first ink */
.pb-atom-status { font-size: var(--font-size-xs); line-height: 1.25; }
.pb-atom-status-cap { text-transform: var(--font-annotation-tt); letter-spacing: var(--font-annotation-ls); color: var(--atom-cap); }
.pb-atom-status-word { font-family: var(--font-body); font-weight: var(--font-body-wt); text-transform: var(--font-annotation-tt); letter-spacing: var(--font-annotation-ls); color: var(--active-color-01); }
.dblk-block { background: var(--atom-ground); border-color: var(--atom-line); line-height: normal; }   /* THE AI AGENT SHELL, the original's value for value (the owner 2026-10-09: "make sure the entire shell itself with borders and button locations is the same too"; so hub/pick_block_widget.css and the board's seat, wid ui/inc_widget_board.html:390): the box on its own ground (the panel colour fading into the page's, left to right: the original's .dblk-block as the bench draws it), its line the third ink at 35% */
.dblk-divider { background-color: var(--atom-divider); }
.pipe-honest td { border-color: var(--ui-row-divider); }
.dblk-cap, .dblk-gate { font-size: var(--font-size-xs); text-transform: var(--font-annotation-tt); letter-spacing: var(--font-annotation-ls); color: var(--atom-cap); text-decoration: none; }
.dblk--reduced { background: transparent; border-color: var(--agent-shell-line); }   /* THE REDUCED SHELL (the agent layer of a board whose screen holds a sequence agent), the original's value for value (so hub/pick_block_widget.css:49-54, its pf layer): no ground of its own, a faint line, a faint wash from its top, the word AGENT very dim */
.dblk--reduced::before { background: var(--agent-shell-ground); }
.dblk--reduced .dblk-gate { color: var(--agent-shell-cap); }
.dblk-gate:hover, .dblk-gate:focus-visible { color: var(--active-color-01); }
.dblk-sub { font-size: var(--font-caption-sz); line-height: 1.25; text-transform: var(--font-caption-tt); color: var(--active-color-01); }
.dblk-name { font-size: var(--font-size-s); font-weight: var(--font-caption-wt); letter-spacing: var(--font-caption-ls); text-transform: var(--font-caption-tt); color: var(--active-color-01); }
.dblk-dot { background-color: var(--atom-dot); }
.btn--small.dblk-add, .btn--small.dblk-remove, .btn--small.dblk-add-agent, .btn--small.dblk-remove-agent, .btn--small.dblk-add[disabled], .btn--small.dblk-remove[disabled], .btn--small.dblk-add-agent[disabled], .btn--small.dblk-remove-agent[disabled] { font-family: var(--font-caption); font-weight: var(--font-annotation-wt); font-size: var(--font-annotation-sz); text-transform: var(--font-caption-tt); letter-spacing: var(--font-caption-ls); line-height: var(--font-caption-lh); color: var(--active-color-01); background: transparent; border-color: var(--atom-key-line); }   /* THE SHELL'S SMALL KEYS (the original's .dblk-add, .dblk-remove, .dblk-add-agent, .dblk-remove-agent): the one small button, in the shell's own face */
.btn--small.dblk-add[disabled] { opacity: .5; }
.btn--small.dblk-remove[disabled], .btn--small.dblk-add-agent[disabled], .btn--small.dblk-remove-agent[disabled] { opacity: .35; }
.mfb-blank { font-size: var(--font-caption-sz); }
.mfb-pt, .dblk-hd { font-size: var(--font-caption-sz); font-weight: var(--font-caption-wt); letter-spacing: var(--font-caption-ls); text-transform: var(--font-caption-tt); color: var(--active-color-01); }
.mfb-lock { font-size: var(--font-size-xs); font-weight: var(--font-body-wt); letter-spacing: normal; text-transform: none; opacity: .68; color: var(--active-color-01); }
.dblk-noteslbl, .dblk-wires .ac-cap { font-size: var(--font-size-xs); opacity: .68; color: var(--active-color-01); }
.dblk-notes { font-size: var(--font-size-s); line-height: 1.4; color: var(--active-color-01); }
.dblk-agentmf .pipe-honest td { font-size: var(--font-annotation-sz); letter-spacing: var(--font-annotation-ls); border-color: currentColor; }
.dblk-agentmf .pipe-honest td:first-child { text-transform: var(--font-annotation-tt); }
.dblk-agentmf .pb-bold { font-weight: var(--font-caption-wt); }
.dblk-agentmf .ac-pt { color: var(--active-color-06); }
.ac-pt { color: var(--active-color-08); }
.dblk-wires .ac-wire { border-top-color: var(--atom-wire-line); }
.dblk-wires .dblk-wire--quiet { opacity: .45; }
.dblk-wires .dblk-wire--quiet:hover { opacity: 1; }
.dblk-wires .ac-q { font-family: var(--font-notes); font-size: var(--font-annotation-sz); font-weight: 400; letter-spacing: .04em; text-transform: uppercase; color: var(--active-color-01); background-color: var(--atom-input); border-color: var(--atom-key-line); }
.dblk-wires .ac-q::placeholder { color: var(--atom-placeholder); }
.dblk-wires .btn--small.ac-go, .dblk-wires .btn--small.ac-go[disabled] { font-family: var(--font-caption); font-weight: var(--font-caption-wt); font-size: var(--font-caption-sz); text-transform: var(--font-caption-tt); letter-spacing: var(--font-caption-ls); color: var(--active-color-01); background: transparent; border-color: var(--atom-key-line); }
.dblk-wires .ac-wire-state { font-size: var(--font-size-xs); font-weight: var(--font-caption-wt); color: var(--atom-state); }
.pfap { color: var(--active-color-01); background: var(--atom-ground); border-color: var(--atom-line); }   /* THE AGENT PICKER (the owner 2026-10-09: "the original had a modal to pick the agent not a dropdown"), the original's value for value (so hub/pick_block_widget.css:191-209, 224): the box on the shell's own ground and line (the original's .pfap has the shell's), over the page dimmed by the panel colour at 55% under a 14px blur; its head: the name in the logo's colour, the title in the first ink, the count dim; a row's line the first ink at 14%, its name in the caption's type, its key in the notes' face; a row under the pointer the second ink; CLOSE the shell's key */
.pfap::backdrop { background: var(--atom-veil); -webkit-backdrop-filter: var(--atom-veil-filter); backdrop-filter: var(--atom-veil-filter); }
.pfap-brand { font-size: var(--font-caption-sz); letter-spacing: var(--font-caption-ls); text-transform: uppercase; color: var(--active-color-01); }
.pfap-title { font-size: var(--font-caption-sz); letter-spacing: var(--font-caption-ls); text-transform: uppercase; color: var(--active-color-01); }
.pfap-count { font-size: var(--font-size-xs); text-transform: uppercase; color: var(--atom-cap); }
.pfap-agent { font-weight: 400; color: var(--active-color-01); background: transparent; border-bottom-color: var(--atom-row-line); }
.pfap-agent:hover { color: var(--active-color-02); }
.pfap-agent-name { font-size: var(--font-caption-sz); font-weight: var(--font-caption-wt); letter-spacing: var(--font-caption-ls); text-transform: var(--font-caption-tt); }
.pfap-agent-key { font-family: var(--font-notes); font-size: var(--font-annotation-sz); opacity: .7; }
.pfap-empty { font-size: var(--font-caption-sz); letter-spacing: var(--font-caption-ls); text-transform: uppercase; color: var(--active-color-01); opacity: .55; }
.btn--small.pfap-close { font-family: var(--font-caption); font-weight: var(--font-caption-wt); font-size: var(--font-caption-sz); letter-spacing: var(--font-caption-ls); text-transform: var(--font-caption-tt); color: var(--active-color-01); background: transparent; border-color: var(--atom-key-line); }

/* 3.19 THE TWO BUTTONS (the owner 2026-10-03: "one single big button with a single font, one single small button with a single font... a total of 2"; "1 font and not tied to the theme, based on global settings like the key badge"; "should not change based on font size"): button.html draws every button; one font, the global sizes (px, so the member's font size never moves them), the colours the theme's */
.btn { text-decoration: none; transition: all var(--ui-btn-transition) var(--ui-btn-easing); }
.btn--big { font-family: var(--font-global-01); font-size: var(--font-size-button); font-weight: 400; letter-spacing: normal; text-transform: uppercase; color: var(--glass-words); background: var(--glass); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); border-color: var(--glass-line); }
.btn--big:hover { color: var(--glass-hover-words); background: var(--glass-hover); border-color: var(--glass-hover); box-shadow: 0 0 var(--ui-btn-hover-shadow) var(--glass-glow); }
.btn--small.round, .btn--small.round[disabled] { color: var(--active-color-02); border-color: var(--round-line); background: var(--round-ground); -webkit-backdrop-filter: var(--round-filter); backdrop-filter: var(--round-filter); box-shadow: none; }   /* THE ONE CIRCLE BUTTON AT REST, the original AI agent shell's circle value for value (the owner 2026-10-09: "1 to 1 with the ai agent shell from production A"; so hub/pick_block_widget.css:144 .dblk-circ): its icon and its line in the second ink, the line at 28%, the ground the panel colour at 55% under a 14px blur; it does not move (core's: behaviour is never a theme's). The run circle rests the same (the original's .dblk-play is read before .dblk-circ, which wins the colour, the line, the ground and the blur) */
.btn--small.round:hover { border-color: var(--active-color-02); }   /* HOVER, the original's (.dblk-circ:hover): the line at full ink, nothing else */
.btn--small.round[disabled] { opacity: .35; }   /* DIMMED, the original's (.dblk-circ[disabled]: .35), its colours kept */
.btn--small.round--run, .btn--small.round--run[disabled] { transition: all var(--ui-btn-transition) var(--ui-btn-easing); }   /* THE RUN CIRCLE (the original's .dblk-play:105): what is left to it at rest is its transition */
.btn--small.round--run:hover { color: var(--ground-words); background: var(--ui-btn-hover-bg); box-shadow: 0 0 var(--ui-btn-hover-shadow) var(--glass-glow); }   /* THE RUN CIRCLE'S HOVER (the original's .dblk-play:hover:106): the hover colour fills it, its icon in the words a ground carries (the ground's colour: a word wears the text key, CHROMA BY MEANING, the owner 2026-10-13), the glow; the line at full ink is the circle's own hover */
.btn--big:active { color: var(--glass-hover-words); background: var(--glass-pressed); border-color: var(--glass-pressed); }
.btn--small.login-login { color: var(--ground-words); background-color: var(--ink-fill); border-color: var(--active-color-01); }   /* LOGIN: the original's filled key under the fields */
.login-stack .btn--big { font-family: var(--font-label); font-size: var(--font-label-sz); font-weight: var(--font-label-wt); letter-spacing: var(--font-label-ls); line-height: var(--font-label-lh); }   /* the door's three: the original's label type (.login-google-button) */
.login-label { color: var(--active-color-06); }   /* CONTINUE WITH, the original's dim ink */
.login-new { color: var(--active-marquee); letter-spacing: 0.05em; }   /* NEW HERE: the marquee's colour (the original's .login-new-here) */
.login-panel > summary { opacity: .75; }
.login-panel > summary:hover { opacity: 1; }
.login-commit { font-family: var(--font-global-02); font-size: var(--font-size-m); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.8; color: var(--active-color-01); }   /* the commitment: the original's display type in the ink */
.login-bottom .annotation { color: var(--active-color-06); }   /* the copyright and the trademark line: the original's dim ink, the footer's small line (the owner, 2026-10-01) */
.btn--small.login-login { font-family: var(--font-global-03); font-size: var(--font-size-xxs); font-weight: 400; letter-spacing: normal; }
.btn--big.login-create { color: var(--ground-words); background: var(--marquee-fill); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--active-marquee); font-weight: 700; }   /* CREATE ACCOUNT: the original door's third button, the marquee's fill on the ground's ink, bold (the owner, 2026-10-07: "1 to 1 with the original") */
.btn--big.login-create:hover { color: var(--ground-words); background: var(--ink-fill); border-color: var(--active-color-01); }
.btn--small { font-family: var(--font-global-01); font-size: var(--font-size-button-small); font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ui-sm-btn-text); background-color: var(--ui-sm-btn-bg); border-color: var(--ui-sm-btn-border); }
.btn--small[aria-pressed="true"], .btn--small[aria-current] { color: var(--ui-btn-active-text); background-color: var(--ui-btn-active-bg); }
.btn[disabled] { color: var(--ui-placeholder); border-color: var(--ui-placeholder); box-shadow: none; }