/* technology.css: THE TECHNOLOGIES, all of them, in this ONE file (the owner: "all 4 technology are combined into this * one single file"; 2026-10-02: "technology is for all technology so there should be zero in the site css"). Every page * links it, under every theme. A rule is here because it names a technology: FROST, DA-M, mTok, LARRY LLM, the minis. * No layout (each core.css gives a box its shape) and nothing of a site. * * 1. A TECHNOLOGY'S VALUES, per mode, for its PLACE on another page (one root in the markup, data-place=""): * MADE by the look's maker from that technology's own brand record (themes/brnd.csv; look.technology), never typed * here. Inside a place the variables carry the technology's values under the names a theme uses. * 2. A TECHNOLOGY'S PLACE: rules that only REFER to those values. * 3. A TECHNOLOGY'S OWN APPLICATION AND PARTS: its pages' rules; each only REFERS to the variables of the theme the * page wears. * 4. THE FONTS: each technology's own, from its own site folder, named by its slot. */ /* ══ THE STATUS DOT (the owner 2026-10-02: "in the technology global level it can define the color dots for online offline and clear is not color"): its three colours, defined HERE ONCE for every page, every theme (CHROMA too) and every place; no theme and no brand has its own; clear is no colour at all ══ */ :root { --status-ok: #00FF00; --status-warn: #FFFF00; --status-error: #FF0000; } /* ══ GOOGLE'S MARK (the owner 2026-10-08: "add the google colors to the system.css"): another company's own mark, fixed by them; its four colours, defined HERE ONCE for every page, the same under every theme and both modes, as the status dot's are. FROST's sign-in door wears them (the Google button); no template types them. */ :root { --mark-google-red: #EA4335; --mark-google-blue: #4285F4; --mark-google-yellow: #FBBC05; --mark-google-green: #34A853; } .frost-google-red { fill: var(--mark-google-red); } .frost-google-blue { fill: var(--mark-google-blue); } .frost-google-yellow { fill: var(--mark-google-yellow); } .frost-google-green { fill: var(--mark-google-green); } /* ══ FROST · 1. its values ══ */ [data-theme="dark"] [data-place="frost"] { --active-color-01: #F3F0EE; --active-color-02: #F3F0EE; --active-color-03: #F3F0EE; --active-color-04: #F3F0EE; --active-color-05: #E9EAE1; --active-color-06: #F3F0EE; --active-color-07: #E9EAE1; --active-color-08: #F7CAC9; --active-color-09: #540807; --active-color-10: #7A0C0B; --active-color-11: #910E0D; --active-color-12: #910E0D; --active-color-13: #F3F0EE; --active-color-14: #540807; --active-color-15: #F3F0EE; --active-color-16: #F3F0EE; --active-color-17: #F3F0EE; --active-color-18: #F3F0EE; --active-color-19: #FFFFFF; --active-color-20: #7A0C0B; --active-color-21: #F3F0EE; --active-color-22: #F3F0EE; --active-color-23: #E9EAE1; --active-color-24: #540807; --active-color-25: #F3F0EE; --active-color-26: #F3F0EE; --active-color-27: #540807; --active-color-28: #E9EAE1; --active-color-29: #540807; --active-color-30: #000000; --active-color-31: #F3F0EE; --active-color-32: #F3F0EE; --active-color-33: #FFFFFF; --active-color-34: #7A0C0B; --active-color-35: #F3F0EE; --active-color-36: #F3F0EE; --active-color-37: #F3F0EE; --active-color-38: #F3F0EE; --active-color-39: #910E0D; --active-color-40: #F3F0EE; --active-color-41: #F3F0EE; --active-color-42: #7A0C0B; --active-color-43: #F3F0EE; --active-color-44: #7A0C0B; --active-color-45: #910E0D; --active-color-46: #E9EAE1; --active-color-47: #910E0D; --active-color-48: #E9EAE1; --active-color-49: #910E0D; --active-color-50: #E9EAE1; --active-color-51: #910E0D; --active-color-52: #F3F0EE; --active-color-53: #7A0C0B; --active-color-54: #540807; --active-color-55: #7A0C0B; --active-color-56: #F3F0EE; --active-color-57: #F3F0EE; --active-color-58: #910E0D; --active-color-59: #F3F0EE; --active-color-60: #540807; --active-color-61: #7A0C0B; --active-color-62: #F3F0EE; --active-color-63: #F3F0EE; --active-color-64: #F3F0EE; --font-global-01: 'font_01_30cc5f74', sans-serif; --font-global-02: 'font_02_30cc5f74', sans-serif; --font-global-03: Helvetica, "Helvetica Neue", Arial, sans-serif; --font-global-04: 'font_04_30cc5f74', 'font_05_30cc5f74', monospace; --font-global-05: 'font_05_30cc5f74', 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: #FFFFFF; --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: #F3F0EE; --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-label: #F3F0EE; --key-badge-value: #F3F0EE; --key-badge-hashbg: #540807; --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); --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); --key-badge-copy: var(--active-color-07); --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: var(--active-logo-color); --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("30cc5f74/images/dark/logo_header.png"); --image-logo_header-words: transparent; --image-logo_dock_01: url("30cc5f74/images/dark/logo_dock_01.png"); --image-logo_dock_01-words: transparent; --image-logo_dock_02: url("30cc5f74/images/dark/logo_dock_02.png"); --image-logo_dock_02-words: transparent; --image-logo_dock_03: url("30cc5f74/images/dark/logo_dock_03.png"); --image-logo_dock_03-words: transparent; --image-logo_dock_04: url("30cc5f74/images/dark/logo_dock_04.png"); --image-logo_dock_04-words: transparent; --image-logo_dock_05: url("30cc5f74/images/dark/logo_dock_05.png"); --image-logo_dock_05-words: transparent; --image-logo_account_01: url("30cc5f74/images/dark/logo_account_01.png"); --image-logo_account_01-words: transparent; --image-logo_account_02: url("30cc5f74/images/dark/logo_account_02.png"); --image-logo_account_02-words: transparent; --image-logo_account_03: url("30cc5f74/images/dark/logo_account_03.png"); --image-logo_account_03-words: transparent; --image-logo_account_04: url("30cc5f74/images/dark/logo_account_04.png"); --image-logo_account_04-words: transparent; --image-logo_footer: url("30cc5f74/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("30cc5f74/images/dark/logo_greeting.png"); --image-logo_greeting-words: transparent; --image-app_icon: none; --image-app_icon-words: var(--active-logo-color); } [data-theme="light"] [data-place="frost"] { --active-color-01: #0F0F10; --active-color-02: #0F0F10; --active-color-03: #0F0F10; --active-color-04: #0F0F10; --active-color-05: #360908; --active-color-06: #0F0F10; --active-color-07: #360908; --active-color-08: #1B0404; --active-color-09: #EFF0EA; --active-color-10: #E2E3D9; --active-color-11: #DBDDD0; --active-color-12: #DBDDD0; --active-color-13: #0F0F10; --active-color-14: #EFF0EA; --active-color-15: #0F0F10; --active-color-16: #0F0F10; --active-color-17: #0F0F10; --active-color-18: #0F0F10; --active-color-19: #360908; --active-color-20: #E2E3D9; --active-color-21: #0F0F10; --active-color-22: #0F0F10; --active-color-23: #360908; --active-color-24: #EFF0EA; --active-color-25: #0F0F10; --active-color-26: #0F0F10; --active-color-27: #EFF0EA; --active-color-28: #360908; --active-color-29: #EFF0EA; --active-color-30: #DBDDD0; --active-color-31: #0F0F10; --active-color-32: #0F0F10; --active-color-33: #0F0F10; --active-color-34: #E2E3D9; --active-color-35: #0F0F10; --active-color-36: #0F0F10; --active-color-37: #0F0F10; --active-color-38: #0F0F10; --active-color-39: #DBDDD0; --active-color-40: #0F0F10; --active-color-41: #0F0F10; --active-color-42: #E2E3D9; --active-color-43: #0F0F10; --active-color-44: #E2E3D9; --active-color-45: #DBDDD0; --active-color-46: #360908; --active-color-47: #DBDDD0; --active-color-48: #360908; --active-color-49: #DBDDD0; --active-color-50: #360908; --active-color-51: #DBDDD0; --active-color-52: #0F0F10; --active-color-53: #E2E3D9; --active-color-54: #EFF0EA; --active-color-55: #E2E3D9; --active-color-56: #0F0F10; --active-color-57: #0F0F10; --active-color-58: #DBDDD0; --active-color-59: #0F0F10; --active-color-60: #EFF0EA; --active-color-61: #E2E3D9; --active-color-62: #0F0F10; --active-color-63: #0F0F10; --active-color-64: #0F0F10; --font-global-01: 'font_01_30cc5f74', sans-serif; --font-global-02: 'font_02_30cc5f74', sans-serif; --font-global-03: Helvetica, "Helvetica Neue", Arial, sans-serif; --font-global-04: 'font_04_30cc5f74', 'font_05_30cc5f74', monospace; --font-global-05: 'font_05_30cc5f74', 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: #360908; --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: #0F0F10; --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-label: #0F0F10; --key-badge-value: #0F0F10; --key-badge-hashbg: #EFF0EA; --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); --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); --key-badge-copy: var(--active-color-07); --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: var(--active-logo-color); --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("30cc5f74/images/light/logo_header.png"); --image-logo_header-words: transparent; --image-logo_dock_01: url("30cc5f74/images/light/logo_dock_01.png"); --image-logo_dock_01-words: transparent; --image-logo_dock_02: url("30cc5f74/images/light/logo_dock_02.png"); --image-logo_dock_02-words: transparent; --image-logo_dock_03: url("30cc5f74/images/light/logo_dock_03.png"); --image-logo_dock_03-words: transparent; --image-logo_dock_04: url("30cc5f74/images/light/logo_dock_04.png"); --image-logo_dock_04-words: transparent; --image-logo_dock_05: url("30cc5f74/images/light/logo_dock_05.png"); --image-logo_dock_05-words: transparent; --image-logo_account_01: url("30cc5f74/images/light/logo_account_01.png"); --image-logo_account_01-words: transparent; --image-logo_account_02: url("30cc5f74/images/light/logo_account_02.png"); --image-logo_account_02-words: transparent; --image-logo_account_03: url("30cc5f74/images/light/logo_account_03.png"); --image-logo_account_03-words: transparent; --image-logo_account_04: url("30cc5f74/images/light/logo_account_04.png"); --image-logo_account_04-words: transparent; --image-logo_footer: url("30cc5f74/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("30cc5f74/images/light/logo_greeting.png"); --image-logo_greeting-words: transparent; --image-app_icon: none; --image-app_icon-words: var(--active-logo-color); } /* ══ DA-M · 1. its values ══ */ [data-theme="dark"] [data-place="dam"] { --active-color-01: #E9F372; --active-color-02: #F3FE63; --active-color-03: #F1FD59; --active-color-04: #ECF65B; --active-color-05: #E9F372; --active-color-06: #E9F372; --active-color-07: #E9F372; --active-color-08: #E9F372; --active-color-09: #676A0E; --active-color-10: #676A0E; --active-color-11: #676A0E; --active-color-12: #7B8521; --active-color-13: #0F0F10; --active-color-14: #676A0E; --active-color-15: #E9F372; --active-color-16: #F1FD59; --active-color-17: #ECF65B; --active-color-18: #ECF65B; --active-color-19: #E9F372; --active-color-20: #676A0E; --active-color-21: #E9F372; --active-color-22: #F1FD59; --active-color-23: #CAD265; --active-color-24: #676A0E; --active-color-25: #ECF65B; --active-color-26: #ECF65B; --active-color-27: #676A0E; --active-color-28: #CAD265; --active-color-29: #676A0E; --active-color-30: #676A0E; --active-color-31: #F1FD59; --active-color-32: #ECF65B; --active-color-33: #E9F372; --active-color-34: #676A0E; --active-color-35: #F1FD59; --active-color-36: #F1FD59; --active-color-37: #F3FE63; --active-color-38: #0F0F10; --active-color-39: #7B8521; --active-color-40: #F1FD59; --active-color-41: #0F0F10; --active-color-42: #92993E; --active-color-43: #F1FD59; --active-color-44: #676A0E; --active-color-45: #676A0E; --active-color-46: #0F0F10; --active-color-47: #7B8521; --active-color-48: #0F0F10; --active-color-49: #7B8521; --active-color-50: #0F0F10; --active-color-51: #7B8521; --active-color-52: #0F0F10; --active-color-53: #92993E; --active-color-54: #676A0E; --active-color-55: #92993E; --active-color-56: #0F0F10; --active-color-57: #ECF65B; --active-color-58: #7B8521; --active-color-59: #ECF65B; --active-color-60: #676A0E; --active-color-61: #92993E; --active-color-62: #0F0F10; --active-color-63: #F1FD59; --active-color-64: #0F0F10; --font-global-01: 'font_01_aad9b587', sans-serif; --font-global-02: 'font_02_aad9b587', sans-serif; --font-global-03: Helvetica, "Helvetica Neue", Arial, sans-serif; --font-global-04: 'font_04_aad9b587', 'font_05_aad9b587', monospace; --font-global-05: 'font_05_aad9b587', 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: #E9F372; --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: #CAD265; --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-label: #E9F372; --key-badge-value: #E9F372; --key-badge-hashbg: #676A0E; --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); --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); --key-badge-copy: var(--active-color-07); --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: var(--active-logo-color); --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("aad9b587/images/dark/logo_header.png"); --image-logo_header-words: transparent; --image-logo_dock_01: url("aad9b587/images/dark/logo_dock_01.png"); --image-logo_dock_01-words: transparent; --image-logo_dock_02: url("aad9b587/images/dark/logo_dock_02.png"); --image-logo_dock_02-words: transparent; --image-logo_dock_03: url("aad9b587/images/dark/logo_dock_03.png"); --image-logo_dock_03-words: transparent; --image-logo_dock_04: url("aad9b587/images/dark/logo_dock_04.png"); --image-logo_dock_04-words: transparent; --image-logo_dock_05: url("aad9b587/images/dark/logo_dock_05.png"); --image-logo_dock_05-words: transparent; --image-logo_account_01: url("aad9b587/images/dark/logo_account_01.png"); --image-logo_account_01-words: transparent; --image-logo_account_02: url("aad9b587/images/dark/logo_account_02.png"); --image-logo_account_02-words: transparent; --image-logo_account_03: url("aad9b587/images/dark/logo_account_03.png"); --image-logo_account_03-words: transparent; --image-logo_account_04: url("aad9b587/images/dark/logo_account_04.png"); --image-logo_account_04-words: transparent; --image-logo_footer: url("aad9b587/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("aad9b587/images/dark/logo_greeting.png"); --image-logo_greeting-words: transparent; --image-app_icon: none; --image-app_icon-words: var(--active-logo-color); } [data-theme="light"] [data-place="dam"] { --active-color-01: #0F0F10; --active-color-02: #0F0F10; --active-color-03: #0F0F10; --active-color-04: #0F0F10; --active-color-05: #0F0F10; --active-color-06: #0F0F10; --active-color-07: #0F0F10; --active-color-08: #0F0F10; --active-color-09: #92993E; --active-color-10: #C9D45A; --active-color-11: #E9F372; --active-color-12: #E9F372; --active-color-13: #623718; --active-color-14: #92993E; --active-color-15: #0F0F10; --active-color-16: #623718; --active-color-17: #0F0F10; --active-color-18: #0F0F10; --active-color-19: #0F0F10; --active-color-20: #C9D45A; --active-color-21: #623718; --active-color-22: #623718; --active-color-23: #623718; --active-color-24: #92993E; --active-color-25: #0F0F10; --active-color-26: #0F0F10; --active-color-27: #92993E; --active-color-28: #623718; --active-color-29: #92993E; --active-color-30: #E9F372; --active-color-31: #623718; --active-color-32: #623718; --active-color-33: #623718; --active-color-34: #C9D45A; --active-color-35: #623718; --active-color-36: #623718; --active-color-37: #623718; --active-color-38: #623718; --active-color-39: #E9F372; --active-color-40: #623718; --active-color-41: #623718; --active-color-42: #C9D45A; --active-color-43: #623718; --active-color-44: #C9D45A; --active-color-45: #E9F372; --active-color-46: #763617; --active-color-47: #E9F372; --active-color-48: #763617; --active-color-49: #E9F372; --active-color-50: #763617; --active-color-51: #E9F372; --active-color-52: #623718; --active-color-53: #C9D45A; --active-color-54: #92993E; --active-color-55: #C9D45A; --active-color-56: #0F0F10; --active-color-57: #623718; --active-color-58: #E9F372; --active-color-59: #623718; --active-color-60: #92993E; --active-color-61: #C9D45A; --active-color-62: #623718; --active-color-63: #623718; --active-color-64: #623718; --font-global-01: 'font_01_aad9b587', sans-serif; --font-global-02: 'font_02_aad9b587', sans-serif; --font-global-03: Helvetica, "Helvetica Neue", Arial, sans-serif; --font-global-04: 'font_04_aad9b587', 'font_05_aad9b587', monospace; --font-global-05: 'font_05_aad9b587', 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: #0F0F10; --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: #623718; --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-label: #0F0F10; --key-badge-value: #0F0F10; --key-badge-hashbg: #92993E; --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); --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); --key-badge-copy: var(--active-color-07); --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: var(--active-logo-color); --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("aad9b587/images/light/logo_header.png"); --image-logo_header-words: transparent; --image-logo_dock_01: url("aad9b587/images/light/logo_dock_01.png"); --image-logo_dock_01-words: transparent; --image-logo_dock_02: url("aad9b587/images/light/logo_dock_02.png"); --image-logo_dock_02-words: transparent; --image-logo_dock_03: url("aad9b587/images/light/logo_dock_03.png"); --image-logo_dock_03-words: transparent; --image-logo_dock_04: url("aad9b587/images/light/logo_dock_04.png"); --image-logo_dock_04-words: transparent; --image-logo_dock_05: url("aad9b587/images/light/logo_dock_05.png"); --image-logo_dock_05-words: transparent; --image-logo_account_01: url("aad9b587/images/light/logo_account_01.png"); --image-logo_account_01-words: transparent; --image-logo_account_02: url("aad9b587/images/light/logo_account_02.png"); --image-logo_account_02-words: transparent; --image-logo_account_03: url("aad9b587/images/light/logo_account_03.png"); --image-logo_account_03-words: transparent; --image-logo_account_04: url("aad9b587/images/light/logo_account_04.png"); --image-logo_account_04-words: transparent; --image-logo_footer: url("aad9b587/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("aad9b587/images/light/logo_greeting.png"); --image-logo_greeting-words: transparent; --image-app_icon: none; --image-app_icon-words: var(--active-logo-color); } /* ══ mTok · 1. its values ══ */ [data-theme="dark"] [data-place="mtok"] { --active-color-01: #DAAB79; --active-color-02: #DAAB79; --active-color-03: #DAAB79; --active-color-04: #DAAB79; --active-color-05: #F7AB5B; --active-color-06: #DAAB79; --active-color-07: #F7AB5B; --active-color-08: #FCE1C4; --active-color-09: #09101E; --active-color-10: #13213D; --active-color-11: #192C50; --active-color-12: #192C50; --active-color-13: #DAAB79; --active-color-14: #09101E; --active-color-15: #DAAB79; --active-color-16: #DAAB79; --active-color-17: #DAAB79; --active-color-18: #DAAB79; --active-color-19: #F7AB5B; --active-color-20: #13213D; --active-color-21: #DAAB79; --active-color-22: #DAAB79; --active-color-23: #F7AB5B; --active-color-24: #09101E; --active-color-25: #DAAB79; --active-color-26: #DAAB79; --active-color-27: #09101E; --active-color-28: #F7AB5B; --active-color-29: #09101E; --active-color-30: #192C50; --active-color-31: #DAAB79; --active-color-32: #DAAB79; --active-color-33: #DAAB79; --active-color-34: #13213D; --active-color-35: #DAAB79; --active-color-36: #DAAB79; --active-color-37: #DAAB79; --active-color-38: #DAAB79; --active-color-39: #192C50; --active-color-40: #DAAB79; --active-color-41: #DAAB79; --active-color-42: #13213D; --active-color-43: #DAAB79; --active-color-44: #13213D; --active-color-45: #192C50; --active-color-46: #F7AB5B; --active-color-47: #192C50; --active-color-48: #F7AB5B; --active-color-49: #192C50; --active-color-50: #F7AB5B; --active-color-51: #192C50; --active-color-52: #DAAB79; --active-color-53: #13213D; --active-color-54: #09101E; --active-color-55: #13213D; --active-color-56: #DAAB79; --active-color-57: #DAAB79; --active-color-58: #192C50; --active-color-59: #DAAB79; --active-color-60: #09101E; --active-color-61: #13213D; --active-color-62: #DAAB79; --active-color-63: #DAAB79; --active-color-64: #DAAB79; --font-global-01: 'font_01_c1e00b9e', sans-serif; --font-global-02: 'font_02_c1e00b9e', sans-serif; --font-global-03: Helvetica, "Helvetica Neue", Arial, sans-serif; --font-global-04: 'font_04_c1e00b9e', 'font_05_c1e00b9e', monospace; --font-global-05: 'font_05_c1e00b9e', 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: #F7AB5B; --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: #DAAB79; --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-label: #DAAB79; --key-badge-value: #DAAB79; --key-badge-hashbg: #09101E; --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); --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); --key-badge-copy: var(--active-color-07); --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: var(--active-logo-color); --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("c1e00b9e/images/dark/logo_header.png"); --image-logo_header-words: transparent; --image-logo_dock_01: url("c1e00b9e/images/dark/logo_dock_01.png"); --image-logo_dock_01-words: transparent; --image-logo_dock_02: url("c1e00b9e/images/dark/logo_dock_02.png"); --image-logo_dock_02-words: transparent; --image-logo_dock_03: url("c1e00b9e/images/dark/logo_dock_03.png"); --image-logo_dock_03-words: transparent; --image-logo_dock_04: url("c1e00b9e/images/dark/logo_dock_04.png"); --image-logo_dock_04-words: transparent; --image-logo_dock_05: url("c1e00b9e/images/dark/logo_dock_05.png"); --image-logo_dock_05-words: transparent; --image-logo_account_01: url("c1e00b9e/images/dark/logo_account_01.png"); --image-logo_account_01-words: transparent; --image-logo_account_02: url("c1e00b9e/images/dark/logo_account_02.png"); --image-logo_account_02-words: transparent; --image-logo_account_03: url("c1e00b9e/images/dark/logo_account_03.png"); --image-logo_account_03-words: transparent; --image-logo_account_04: url("c1e00b9e/images/dark/logo_account_04.png"); --image-logo_account_04-words: transparent; --image-logo_footer: url("c1e00b9e/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("c1e00b9e/images/dark/logo_greeting.png"); --image-logo_greeting-words: transparent; --image-app_icon: none; --image-app_icon-words: var(--active-logo-color); } [data-theme="light"] [data-place="mtok"] { --active-color-01: #0F0F10; --active-color-02: #0F0F10; --active-color-03: #0F0F10; --active-color-04: #0F0F10; --active-color-05: #644833; --active-color-06: #0F0F10; --active-color-07: #362412; --active-color-08: #322C26; --active-color-09: #DEE9EF; --active-color-10: #C6D7E4; --active-color-11: #DEE9EF; --active-color-12: #DEE9EF; --active-color-13: #0F0F10; --active-color-14: #DEE9EF; --active-color-15: #0F0F10; --active-color-16: #0F0F10; --active-color-17: #0F0F10; --active-color-18: #0F0F10; --active-color-19: #0F0F10; --active-color-20: #C6D7E4; --active-color-21: #0F0F10; --active-color-22: #0F0F10; --active-color-23: #644833; --active-color-24: #DEE9EF; --active-color-25: #0F0F10; --active-color-26: #0F0F10; --active-color-27: #DEE9EF; --active-color-28: #644833; --active-color-29: #DEE9EF; --active-color-30: #DEE9EF; --active-color-31: #0F0F10; --active-color-32: #0F0F10; --active-color-33: #0F0F10; --active-color-34: #C6D7E4; --active-color-35: #0F0F10; --active-color-36: #0F0F10; --active-color-37: #0F0F10; --active-color-38: #0F0F10; --active-color-39: #DEE9EF; --active-color-40: #0F0F10; --active-color-41: #0F0F10; --active-color-42: #C6D7E4; --active-color-43: #0F0F10; --active-color-44: #C6D7E4; --active-color-45: #DEE9EF; --active-color-46: #362412; --active-color-47: #DEE9EF; --active-color-48: #362412; --active-color-49: #DEE9EF; --active-color-50: #362412; --active-color-51: #DEE9EF; --active-color-52: #0F0F10; --active-color-53: #C6D7E4; --active-color-54: #DEE9EF; --active-color-55: #C6D7E4; --active-color-56: #0F0F10; --active-color-57: #0F0F10; --active-color-58: #DEE9EF; --active-color-59: #0F0F10; --active-color-60: #DEE9EF; --active-color-61: #C6D7E4; --active-color-62: #0F0F10; --active-color-63: #0F0F10; --active-color-64: #0F0F10; --font-global-01: 'font_01_c1e00b9e', sans-serif; --font-global-02: 'font_02_c1e00b9e', sans-serif; --font-global-03: Helvetica, "Helvetica Neue", Arial, sans-serif; --font-global-04: 'font_04_c1e00b9e', 'font_05_c1e00b9e', monospace; --font-global-05: 'font_05_c1e00b9e', 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: #0F0F10; --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: #644833; --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-label: #0F0F10; --key-badge-value: #0F0F10; --key-badge-hashbg: #DEE9EF; --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); --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); --key-badge-copy: var(--active-color-07); --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: var(--active-logo-color); --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("c1e00b9e/images/light/logo_header.png"); --image-logo_header-words: transparent; --image-logo_dock_01: url("c1e00b9e/images/light/logo_dock_01.png"); --image-logo_dock_01-words: transparent; --image-logo_dock_02: url("c1e00b9e/images/light/logo_dock_02.png"); --image-logo_dock_02-words: transparent; --image-logo_dock_03: url("c1e00b9e/images/light/logo_dock_03.png"); --image-logo_dock_03-words: transparent; --image-logo_dock_04: url("c1e00b9e/images/light/logo_dock_04.png"); --image-logo_dock_04-words: transparent; --image-logo_dock_05: url("c1e00b9e/images/light/logo_dock_05.png"); --image-logo_dock_05-words: transparent; --image-logo_account_01: url("c1e00b9e/images/light/logo_account_01.png"); --image-logo_account_01-words: transparent; --image-logo_account_02: url("c1e00b9e/images/light/logo_account_02.png"); --image-logo_account_02-words: transparent; --image-logo_account_03: url("c1e00b9e/images/light/logo_account_03.png"); --image-logo_account_03-words: transparent; --image-logo_account_04: url("c1e00b9e/images/light/logo_account_04.png"); --image-logo_account_04-words: transparent; --image-logo_footer: url("c1e00b9e/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("c1e00b9e/images/light/logo_greeting.png"); --image-logo_greeting-words: transparent; --image-app_icon: none; --image-app_icon-words: var(--active-logo-color); } /* ══ 3. THE TECHNOLOGIES' OWN APPLICATIONS AND PARTS: every rule only refers to the variables of the theme the page wears ══ */ /* FROST: its own application's pages and its parts on other pages */ .frost-foot { 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); } html[data-case="upper"] :is(.frost-body), html[data-case="upper"] :is(.frost-body) * { text-transform: uppercase; } html[data-case="mixed"] :is(.frost-body) * { text-transform: none; } .frost-input { background-color: var(--ui-input-bg); border-color: var(--ui-input-border); } .frost-input::placeholder { color: var(--ui-placeholder); } .frost-input:focus { border-color: var(--ui-input-focus); outline-color: var(--ui-focus-ring); } .frost-main h1 { font-family: var(--font-title); font-size: var(--font-title-sz); font-weight: var(--font-title-wt); line-height: var(--font-title-lh); letter-spacing: var(--font-title-ls); text-transform: var(--font-title-tt); color: var(--active-color-01); } .frost-main h2 { font-family: var(--font-subtitle); font-size: var(--font-subtitle-sz); font-weight: var(--font-subtitle-wt); line-height: var(--font-subtitle-lh); letter-spacing: var(--font-subtitle-ls); text-transform: var(--font-subtitle-tt); color: var(--active-color-02); } .frost-head a, .frost-icon-btn { color: inherit; text-decoration: none; } .frost-head a:hover, .frost-icon-btn:hover, .frost-icon-btn[aria-current] { color: var(--active-color-05); } .frost-head a { color: inherit; text-decoration: none; } .frost-head a:hover { color: var(--active-color-05); } .frost-refusal { color: var(--ui-error-text); background-color: var(--ui-error-bg); border-color: var(--ui-error-text); } .frost-languages > [aria-current] { border-bottom-color: var(--ui-subnav-indicator); } .frost-note, .frost-block, .frost-group { background-color: var(--ui-card-bg); border-color: var(--ui-card-border); } .frost-row + .frost-row { border-top-color: var(--ui-row-divider); } .frost-table th, .frost-table td { border-bottom-color: var(--ui-row-divider); } .frost-row, .frost-table td { font-family: var(--font-body); font-size: var(--font-body-sz); } .frost-table th, .frost-fine { font-family: var(--font-annotation); font-size: var(--font-annotation-sz); } .frost-count { text-decoration: none; color: inherit; } .frost-choice > input { accent-color: var(--active-color-07); } .frost-terms { border-color: var(--ui-card-border); } /* mTok: its own application's pages and its parts on other pages */ html[data-case="upper"] :is(.mtok-head, .mtok-main, .mtok-foot), html[data-case="upper"] :is(.mtok-head, .mtok-main, .mtok-foot) * { text-transform: uppercase; } html[data-case="mixed"] :is(.mtok-head, .mtok-main, .mtok-foot) * { text-transform: none; } .mtok-input, .mtok-form input, .mtok-form select { background-color: var(--ui-input-bg); border-color: var(--ui-input-border); } .mtok-input::placeholder, .mtok-form input::placeholder { color: var(--ui-placeholder); } .mtok-input:focus, .mtok-form input:focus, .mtok-form select:focus { border-color: var(--ui-input-focus); outline-color: var(--ui-focus-ring); } .mtok-group { background-color: var(--ui-card-bg); border-color: var(--ui-card-border); } .mtok-row + .mtok-row { border-top-color: var(--ui-row-divider); } .mtok-note { border-color: var(--ui-card-border); } .mtok-check input { accent-color: var(--active-color-07); } .mtok-main h1 { font-family: var(--font-title); font-size: var(--font-title-sz); font-weight: var(--font-title-wt); line-height: var(--font-title-lh); letter-spacing: var(--font-title-ls); text-transform: var(--font-title-tt); color: var(--active-color-01); } .mtok-main h2 { font-family: var(--font-subtitle); font-size: var(--font-size-l); font-weight: var(--font-subtitle-wt); line-height: var(--font-subtitle-lh); letter-spacing: var(--font-subtitle-ls); text-transform: var(--font-subtitle-tt); color: var(--active-color-02); } .mtok-head a { text-decoration: none; } .mtok-nav > [aria-current], .mtok-toggle > [aria-current] { border-bottom-color: var(--ui-subnav-indicator); } .mtok-main p > a:not([class]), .mtok-main td > a:not([class]) { color: var(--active-color-04); } .mtok-main p > a:not([class]):hover, .mtok-main td > a:not([class]):hover { color: var(--active-color-05); } .mtok-form label, .mtok-filters label, .mtok-act label, .mtok-table th { font-family: var(--font-label); font-size: var(--font-label-sz); font-weight: var(--font-label-wt); letter-spacing: var(--font-label-ls); text-transform: var(--font-label-tt); color: var(--active-color-03); } .mtok-tile { background-color: var(--ui-card-bg); border-color: var(--ui-card-border); } .mtok-big { font-size: var(--font-size-xl); } .mtok-table th { border-bottom-color: var(--ui-section-divider); } .mtok-table td { border-bottom-color: var(--ui-row-divider); } .mtok-gold { color: var(--active-color-07); } .mtok-neg { color: var(--active-color-02); } .mtok-sub { font-size: var(--font-size-xs); color: var(--active-color-08); } .mtok-caption, .mtok-fine, .mtok-row small { font-family: var(--font-caption); font-weight: var(--font-caption-wt); letter-spacing: var(--font-caption-ls); text-transform: var(--font-caption-tt); color: var(--active-color-03); } .mtok-panel { background-color: var(--active-color-10); } .mtok-inner { background-color: var(--active-color-11); border-color: var(--ui-card-border); } .mtok-picked { border-color: var(--ui-subnav-indicator); } /* DA-M: its own application's pages and its parts on other pages */ html[data-case="upper"] :is(.dam-body), html[data-case="upper"] :is(.dam-body) * { text-transform: uppercase; } html[data-case="mixed"] :is(.dam-body) * { text-transform: none; } .dam-input { background-color: var(--ui-input-bg); border-color: var(--ui-input-border); } .dam-input::placeholder { color: var(--ui-placeholder); } .dam-input:focus { border-color: var(--ui-input-focus); outline-color: var(--ui-focus-ring); } .dam-main h1 { font-family: var(--font-title); font-size: var(--font-title-sz); font-weight: var(--font-title-wt); line-height: var(--font-title-lh); letter-spacing: var(--font-title-ls); text-transform: var(--font-title-tt); color: var(--active-color-01); } .dam-main h2 { font-family: var(--font-subtitle); font-size: var(--font-subtitle-sz); font-weight: var(--font-subtitle-wt); line-height: var(--font-subtitle-lh); letter-spacing: var(--font-subtitle-ls); text-transform: var(--font-subtitle-tt); color: var(--active-color-02); } .dam-head a { color: inherit; text-decoration: none; } .dam-head a:hover { color: var(--active-color-05); } .dam-note, .dam-group, .dam-kind-tile { background-color: var(--ui-card-bg); border-color: var(--ui-card-border); } .dam-row + .dam-row { border-top-color: var(--ui-row-divider); } .dam-table th, .dam-table td { border-bottom-color: var(--ui-row-divider); } .dam-fine, .dam-eyebrow { 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(--active-color-06); } .dam-tile > a { text-decoration: none; } .dam-viewer > iframe { border-color: var(--ui-card-border); } /* THE MINIS (the offline shell): its own application's pages and its parts on other pages */ .mini-greet { 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); } .mini-fine, .mini-signed, .mini-foot { 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); } .mini-name { 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); } .mini-note { 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); } html[data-case="upper"] :is(.mini-body), html[data-case="upper"] :is(.mini-body) * { text-transform: uppercase; } html[data-case="mixed"] :is(.mini-body) * { text-transform: none; } html[data-case="upper"][data-case] :is(.mini-badge, .mini-file__name) { text-transform: none; } .mini-input { background-color: var(--ui-input-bg); border-color: var(--ui-input-border); } .mini-input::placeholder { color: var(--ui-placeholder); } .mini-input:focus { border-color: var(--ui-input-focus); outline-color: var(--ui-focus-ring); } .mini-badge { color: var(--ui-tag-text); background-color: var(--ui-tag-bg); border-color: var(--ui-tag-border); } .mini-group { background-color: var(--ui-card-bg); border-color: var(--ui-card-border); } .mini-row + .mini-row { border-top-color: var(--ui-row-divider); } .mini-main h1 { font-family: var(--font-title); font-size: var(--font-title-sz); font-weight: var(--font-title-wt); line-height: var(--font-title-lh); letter-spacing: var(--font-title-ls); text-transform: var(--font-title-tt); color: var(--active-color-01); } .mini-main h2 { font-family: var(--font-subtitle); font-size: var(--font-subtitle-sz); font-weight: var(--font-subtitle-wt); line-height: var(--font-subtitle-lh); letter-spacing: var(--font-subtitle-ls); text-transform: var(--font-subtitle-tt); color: var(--active-color-02); } .mini-head a { color: inherit; text-decoration: none; } .mini-main a, .mini-screen-settings > a { color: var(--active-color-04); } .mini-head a:hover, .mini-main a:hover { color: var(--active-color-05); } .mini-file { border-bottom-color: var(--ui-row-divider); } /* LARRY LLM: its own application's pages and its parts on other pages */ html[data-case="upper"] :is(.larry-head, .larry-main, .larry-foot), html[data-case="upper"] :is(.larry-head, .larry-main, .larry-foot) * { text-transform: uppercase; } html[data-case="mixed"] :is(.larry-head, .larry-main, .larry-foot) * { text-transform: none; } .pin-box, .ct-override, .ct-select, .scaf-acct-pick { background-color: var(--ui-input-bg); border-color: var(--ui-input-border); } .pin-box::placeholder, .ct-override::placeholder { color: var(--ui-placeholder); } .pin-box:focus, .ct-override:focus, .ct-select:focus, .scaf-acct-pick:focus { border-color: var(--ui-input-focus); outline-color: var(--ui-focus-ring); } .larry-head a { color: inherit; text-decoration: var(--font-link-td); } .larry-head a:hover { color: var(--active-color-05); } .larry-greet { font-size: var(--font-size-xl); } .tools-card { color: inherit; text-decoration: none; background-color: var(--ui-card-bg); border-color: var(--ui-card-border); } .tools-card:hover { border-color: var(--active-color-05); } .tools-card > span:first-child { 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-02); } .tools-card > p { font-family: var(--font-body); font-size: var(--font-body-sz); text-transform: var(--font-body-tt); color: var(--active-color-02); } .lsb { font-family: var(--font-notes); color: var(--active-color-01); } .lsb-mast { font-family: var(--font-heading); font-size: 1.1rem; font-weight: var(--font-heading-wt); letter-spacing: var(--font-heading-ls); text-transform: uppercase; } .lsb-stamp { font-family: var(--font-caption); font-size: 0.7rem; font-weight: var(--font-caption-wt); letter-spacing: var(--font-caption-ls); color: var(--active-color-01); opacity: .7; } .lsb-rule { border-top-color: var(--active-color-01); } .lsb-hero { background-color: var(--active-color-01); color: var(--active-color-09); } .lsb-hero::before { background: repeating-linear-gradient(0deg, transparent 0, transparent calc(16.66% - 1px), var(--active-color-09) calc(16.66% - 1px), var(--active-color-09) 16.66%); opacity: .12; } .lsb-big { font-family: var(--font-heading); font-size: clamp(3.4rem, 17cqw, 15rem); font-weight: var(--font-heading-wt); line-height: .78; letter-spacing: var(--font-heading-ls); text-transform: uppercase; } .lsb-hero--healthy .lsb-big { color: var(--active-color-09); } .lsb-hero--critical { background-color: var(--active-color-09); } /* CRITICAL is the board turned over (the owner 2026-10-11: pink on pink could not be read): the ground's own colour under the word, the word and its tags in the text's */ .lsb-hero--critical::before { background: repeating-linear-gradient(0deg, transparent 0, transparent calc(16.66% - 1px), var(--active-color-01) calc(16.66% - 1px), var(--active-color-01) 16.66%); } .lsb-hero--critical .lsb-big { color: var(--active-color-08); } .lsb-hero--critical .lsb-tag { color: var(--active-color-01); } .lsb-hero--info .lsb-big { color: var(--active-color-09); opacity: .55; } .lsb-tag { font-family: var(--font-caption); font-size: 0.7rem; font-weight: var(--font-caption-wt); letter-spacing: var(--font-caption-ls); text-transform: uppercase; color: var(--active-color-09); } .lsb-tag--tr { line-height: 1.75; } .smoke-panel { font-size: var(--font-body-sz); line-height: var(--font-body-lh); color: var(--active-color-01); } .smoke-section { border-color: var(--ui-card-border); } .smoke-section-title { font-size: var(--font-size-s); font-weight: var(--font-title-wt); letter-spacing: var(--font-title-ls); text-transform: var(--font-title-tt); } .smoke-section-caption, .smoke-summary, .smoke-note, .smoke-detail, .smoke-info { color: var(--active-color-08); } .smoke-summary strong { color: var(--active-color-01); } .smoke-frame, .smoke-offender-list, .smoke-inventory { background-color: var(--ui-card-bg); border-color: var(--ui-card-border); } .smoke-table { font-size: var(--font-size-xs); } .smoke-table th { 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); border-bottom-color: var(--ui-section-divider); } .smoke-table td { border-bottom-color: var(--ui-row-divider); } .smoke-check-name, .smoke-status { font-size: var(--font-label-sz); font-weight: var(--font-label-wt); } .smoke-status { letter-spacing: var(--font-label-ls); } .smoke-sub { font-size: var(--font-size-xs); font-weight: var(--font-callout-wt); letter-spacing: var(--font-callout-ls); text-transform: var(--font-callout-tt); } .smoke-offenders > summary { font-weight: var(--font-caption-wt); } .smoke-offender-list, .smoke-inventory, .smoke-term { font-family: var(--font-body); font-size: var(--font-body-sz); line-height: var(--font-body-lh); } .smoke-inventory { color: var(--active-color-08); } .smoke-term { background-color: var(--active-color-11); color: var(--active-color-02); border-color: var(--ui-card-border); } .smoke-pass { color: var(--ui-success-text); background-color: var(--ui-success-bg); } .smoke-fail, .smoke-offenders > summary { color: var(--ui-error-text); background-color: var(--ui-error-bg); } .larry-up { color: var(--active-color-07); } .larry-down { color: var(--active-color-01); opacity: .55; } .larry-native { color: var(--active-color-07); } .larry-dim { opacity: .55; } .larry-glass { background: var(--glass); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); } .scaf-panel { font-size: var(--font-size-l); color: var(--active-color-01); } .scaf-title, .scaf-epigraph, .scaf-db-title { font-size: var(--font-size-l); font-weight: var(--font-title-wt); letter-spacing: var(--font-title-ls); } .scaf-section-title { font-size: var(--font-size-xl); font-weight: var(--font-title-wt); letter-spacing: var(--font-title-ls); } .scaf-section-sub { font-size: var(--font-size-l); } .scaf-law-title { font-size: var(--font-size-m); font-weight: var(--font-title-wt); letter-spacing: var(--font-title-ls); } .scaf-hb-step { font-size: var(--font-size-m); font-weight: var(--font-subtitle-wt); letter-spacing: var(--font-subtitle-ls); border-bottom-color: var(--active-color-01); } .scaf-caption, .scaf-foot, .scaf-law-text, .scaf-detail { font-size: var(--font-callout-sz); } .scaf-caption, .scaf-section-sub, .scaf-foot, .scaf-detail, .scaf-src, .scaf-tile-l { color: var(--active-color-08); } .scaf-section, .scaf-law, .scaf-rulebox, .scaf-tile { border-color: var(--active-color-01); } .scaf-law, .scaf-tile { background-color: var(--ui-card-bg); } .scaf-rulebox { font-size: var(--font-size-l); } .scaf-rulebox, .scaf-rulebox * { font-weight: var(--font-heading-wt); } .scaf-notebox { font-size: var(--font-size-xl); font-weight: var(--font-caption-wt); background-color: var(--ui-card-bg); border-color: var(--ui-card-border); } .scaf-src { font-size: var(--font-body-sz); } .scaf-table { font-size: var(--font-size-s); } .scaf-table th { font-size: var(--font-label-sz); font-weight: var(--font-label-wt); letter-spacing: var(--font-label-ls); text-transform: var(--font-label-tt); color: var(--active-color-08); border-bottom-color: var(--ui-section-divider); } .scaf-table td { border-bottom-color: var(--ui-row-divider); } .scaf-row-alt td { background-color: var(--active-color-10); } /* every other step of the SCRUM MASTER's list on the theme's second ground (the owner 2026-10-12: "stronger so you can see it") */ .scaf-mono, .scaf-acct-pick { font-family: var(--font-callout); font-size: var(--font-callout-sz); } .scaf-tile-n { font-size: var(--font-size-s); font-weight: var(--font-title-wt); } .scaf-tile-l { font-size: var(--font-size-s); font-weight: var(--font-caption-wt); letter-spacing: var(--font-caption-ls); } .scaf-cols, .scaf-term { font-family: var(--font-body); font-size: var(--font-body-sz); line-height: var(--font-body-lh); } .scaf-fold > summary { font-weight: var(--font-caption-wt); letter-spacing: var(--font-caption-ls); } .scaf-amber-row { color: var(--active-color-04); } .scaf-term { background-color: var(--active-color-11); color: var(--active-color-02); } .scaf-term .t-dim { color: var(--active-color-08); } .scaf-n-green, .scaf-term .t-green { color: var(--active-color-07); } .scaf-n-red, .scaf-term .t-red { color: var(--active-color-04); } .moire-section-title, .moire-baseline-bar { border-color: var(--ui-section-divider); } .moire-subtitle, .moire-rule p, .moire-note, .moire-files summary { color: var(--active-color-06); } .moire-key-item, .moire-note, .moire-files summary { font-size: var(--font-body-sz); } .moire-key-item { color: var(--active-color-02); } .moire-table th { letter-spacing: var(--font-annotation-ls); border-bottom-color: var(--ui-section-divider); } .moire-table td { font-family: var(--font-body); font-size: var(--font-body-sz); border-bottom-color: var(--ui-row-divider); } .moire-dot-extra, .moire-key-extra { border-color: var(--active-color-04); } .moire-row-extra td, .moire-file-row-extra td { color: var(--active-color-04); } .moire-dot-empty, .moire-key-empty { border-color: var(--ui-placeholder); } .moire-row-empty td { color: var(--ui-placeholder); } .moire-dot-drift, .moire-key-drift { border-color: var(--active-color-04); } .moire-row-drift td, .moire-file-row-changed td { color: var(--active-color-04); } .moire-dot-matched, .moire-key-matched { border-color: var(--active-color-07); } .moire-row-matched td, .moire-file-row-matched td, .moire-zero-drift { color: var(--active-color-07); } .moire-dot-missing, .moire-key-missing { border-color: var(--active-color-04); } .moire-row-missing td, .moire-file-row-missing td, .moire-violation-text { color: var(--active-color-04); } .console-auth { border-color: var(--ui-card-border); color: var(--active-color-01); } .auth-title { font-size: var(--font-size-xl); font-weight: var(--font-callout-wt); letter-spacing: var(--font-callout-ls); border-bottom-color: var(--ui-section-divider); } .auth-legend { font-size: var(--font-size-s); } .auth-legend-lead { font-weight: var(--font-callout-wt); } .auth-hint { font-size: var(--font-size-m); color: var(--active-color-08); } .dvm-table th { font-size: var(--font-label-sz); letter-spacing: var(--font-label-ls); text-transform: var(--font-label-tt); border-bottom-color: var(--ui-section-divider); } .dvm-table td { border-bottom-color: var(--ui-row-divider); } .dvm-grouphead th { font-size: var(--font-caption-sz); font-weight: var(--font-caption-wt); letter-spacing: var(--font-caption-ls); border-color: var(--ui-row-divider); } .dvm-vth .vlabel { font-size: var(--font-caption-sz); } .dvm-key { font-weight: var(--font-body-wt); letter-spacing: var(--font-body-ls); text-transform: var(--font-body-tt); } .dvm-table .dvm-type { font-size: var(--font-label-sz); font-weight: var(--font-label-wt); letter-spacing: var(--font-label-ls); border-bottom-color: var(--ui-section-divider); } .dvm-row td > span:first-child { font-size: var(--font-size-xxs); } .dvm-row .auth-hint { font-family: var(--font-caption); font-size: var(--font-caption-sz); } .gcell { background-color: var(--ui-input-bg); border-color: var(--ui-input-border); } .gcell[data-v="2"] { border-color: var(--active-color-04); } .gcell[data-v="3"] { border-color: var(--active-color-01); } .gcell[data-v="1"] { border-color: var(--active-color-07); } .ct-panel { font-size: var(--font-body-sz); line-height: var(--font-body-lh); color: var(--active-color-01); } .ct-section, .ct-frame, .ct-col, .ct-box, .ct-step, .ct-log-table th, .ct-log-table td, .ct-pre, .ct-terminal, .ct-terminal-header { border-color: var(--ui-card-border); } .ct-card, .ct-backup-card, .ct-card-storage { border-color: var(--active-color-01); } .ct-card-stats-table td { border-bottom-color: var(--ui-row-divider); } .ct-card-stats-table td:first-child, .ct-caption, .ct-host { color: var(--active-color-08); } .ct-card-icon { color: var(--active-color-01); } .ct-big { font-family: var(--font-heading); font-size: var(--font-size-s); text-transform: var(--font-annotation-tt); color: var(--active-color-01); } .ct-meter { background-color: var(--ui-progress-track); border-color: var(--ui-card-border); accent-color: var(--ui-progress-fill); } .ct-meter::-webkit-progress-bar { background-color: var(--ui-progress-track); } .ct-meter::-webkit-progress-value { background-color: var(--ui-progress-fill); } .ct-pre { font-family: var(--font-body); font-size: var(--font-body-sz); line-height: var(--font-body-lh); background-color: var(--ui-card-bg); } .ct-select, .ct-override { font-family: var(--font-body); font-size: var(--font-body-sz); } .ct-terminal-header, .ct-terminal-body { background-color: var(--active-color-11); } .ct-terminal-title { font-family: var(--font-caption); font-size: var(--font-caption-sz); color: var(--active-color-08); } .ct-terminal-body { font-family: var(--font-caption); font-size: var(--font-caption-sz); line-height: var(--font-caption-lh); color: var(--active-color-02); } .ct-line-info { color: var(--active-color-06); } .ct-terminal-dot:nth-child(1) { border-color: var(--active-color-04); } .ct-terminal-dot:nth-child(2) { border-color: var(--active-color-02); } .ct-terminal-dot:nth-child(3) { border-color: var(--active-color-07); } .ct-ok, .ct-line-success { color: var(--ui-success-text); background-color: var(--ui-success-bg); } .ct-no, .ct-line-error { color: var(--ui-error-text); background-color: var(--ui-error-bg); } /* ══ 4. THE FONTS: each technology's own, in its own site folder (/fonts/font_NN.otf), named by its slot ══ */ @font-face { font-family: "font_01_30cc5f74"; src: url("30cc5f74/fonts/font_01.otf"); font-display: swap; } @font-face { font-family: "font_02_30cc5f74"; src: url("30cc5f74/fonts/font_02.otf"); font-display: swap; } @font-face { font-family: "font_04_30cc5f74"; src: url("30cc5f74/fonts/font_04.otf"); font-display: swap; } @font-face { font-family: "font_05_30cc5f74"; src: url("30cc5f74/fonts/font_05.otf"); font-display: swap; } @font-face { font-family: "font_01_aad9b587"; src: url("aad9b587/fonts/font_01.otf"); font-display: swap; } @font-face { font-family: "font_02_aad9b587"; src: url("aad9b587/fonts/font_02.otf"); font-display: swap; } @font-face { font-family: "font_04_aad9b587"; src: url("aad9b587/fonts/font_04.otf"); font-display: swap; } @font-face { font-family: "font_05_aad9b587"; src: url("aad9b587/fonts/font_05.otf"); font-display: swap; } @font-face { font-family: "font_01_c1e00b9e"; src: url("c1e00b9e/fonts/font_01.otf"); font-display: swap; } @font-face { font-family: "font_02_c1e00b9e"; src: url("c1e00b9e/fonts/font_02.otf"); font-display: swap; } @font-face { font-family: "font_04_c1e00b9e"; src: url("c1e00b9e/fonts/font_04.otf"); font-display: swap; } @font-face { font-family: "font_05_c1e00b9e"; src: url("c1e00b9e/fonts/font_05.otf"); font-display: swap; } @font-face { font-family: "font_01_c5e4cf47"; src: url("c5e4cf47/fonts/font_01.otf"); font-display: swap; } @font-face { font-family: "font_02_c5e4cf47"; src: url("c5e4cf47/fonts/font_02.otf"); font-display: swap; } @font-face { font-family: "font_04_c5e4cf47"; src: url("c5e4cf47/fonts/font_04.otf"); font-display: swap; } @font-face { font-family: "font_05_c5e4cf47"; src: url("c5e4cf47/fonts/font_05.otf"); font-display: swap; } /* ══ mTok · 2. its place: the top section of the ACCOUNT page (the balance panel): a box in mTok's own ground and words; the mark is its image slot; the meter and the links wear its link slot ══ */ [data-place="mtok"] { color: var(--active-color-01); background-color: var(--active-color-09); background-image: var(--image-background); border-color: var(--ui-card-border); font-family: var(--font-body); font-size: var(--font-body-sz); font-weight: var(--font-body-wt); } [data-place="mtok"] .mt-mark { background-image: var(--image-logo_header); font-family: var(--font-heading); font-size: var(--font-size-xxxl); font-weight: var(--font-heading-wt); line-height: var(--font-heading-lh); letter-spacing: var(--font-heading-ls); text-transform: var(--font-heading-tt); color: var(--image-logo_header-words); } [data-place="mtok"] .mt-num { font-family: var(--font-heading); font-size: var(--font-heading-sz); font-weight: var(--font-heading-wt); line-height: var(--font-heading-lh); letter-spacing: var(--font-heading-ls); color: var(--active-color-01); } [data-place="mtok"] .mt-num-own { font-family: var(--font-title); font-size: var(--font-title-sz); font-weight: var(--font-title-wt); line-height: var(--font-title-lh); letter-spacing: var(--font-title-ls); color: var(--active-color-01); } [data-place="mtok"] .mt-unit { font-family: var(--font-body); font-size: var(--font-body-sz); font-weight: var(--font-body-wt); text-transform: var(--font-body-tt); color: var(--active-color-02); } [data-place="mtok"] .mt-cap, [data-place="mtok"] .mt-ref, [data-place="mtok"] .mt-cycle-row, [data-place="mtok"] .mt-terms, [data-place="mtok"] .mt-th, [data-place="mtok"] .mt-k { 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(--active-color-03); } [data-place="mtok"] .mt-meter { color: var(--active-color-04); } [data-place="mtok"] .mt-label { font-family: var(--font-label); font-size: var(--font-label-sz); font-weight: var(--font-label-wt); letter-spacing: var(--font-label-ls); text-transform: var(--font-label-tt); color: var(--active-color-03); } [data-place="mtok"] .mt-note, [data-place="mtok"] .mt-cycle { font-family: var(--font-annotation); font-size: var(--font-annotation-sz); font-weight: var(--font-annotation-wt); letter-spacing: var(--font-annotation-ls); text-transform: var(--font-annotation-tt); color: var(--active-color-08); } [data-place="mtok"] .mt-link, [data-place="mtok"] .mt-badge { color: var(--active-color-04); text-decoration: var(--font-link-td); } [data-place="mtok"] .mt-link:hover, [data-place="mtok"] .mt-badge:hover { color: var(--active-color-05); } [data-place="mtok"] .mt-ref--row .mt-badge { text-decoration: none; } /* the member's key in the member's row: the columns' own type (the owner 2026-10-09: "the same font as Organize"), plain, no underline */ [data-place="mtok"] .mt-ref--top .mt-badge { font-family: var(--font-annotation); font-size: var(--font-annotation-sz); font-weight: var(--font-annotation-wt); letter-spacing: var(--font-annotation-ls); text-decoration: none; } /* the account's key at the panel's top right: small and plain (the owner 2026-10-09: "smaller font and no underline") */ [data-place="mtok"] .mt-buy, [data-place="mtok"] .mt-terms .mt-link { font-family: var(--font-body); font-size: var(--font-size-xxs); font-weight: var(--font-body-wt); letter-spacing: var(--font-body-ls); } [data-place="mtok"] .mt-block { border-top-color: var(--ui-section-divider); } [data-place="mtok"] .mt-tr + .mt-tr { border-top-color: var(--ui-row-divider); } [data-place="mtok"] .mt-who { font-family: var(--font-label); font-size: var(--font-label-sz); font-weight: var(--font-label-wt); letter-spacing: var(--font-label-ls); text-transform: var(--font-label-tt); color: var(--active-color-01); } [data-place="mtok"][data-pays="member"] .mt-acct, [data-place="mtok"][data-pays="account"] .mt-own { opacity: .45; } /* ══ FROST · 2. its place: the MEMBERS page: a box in FROST's own ground and words; an account a card; a state a tag; approve a button, the other actions small buttons; what was said the success pair, what waits the warning pair ══ */ [data-place="frost"] { color: var(--active-color-01); background-color: var(--active-color-09); font-family: var(--font-body); font-size: var(--font-body-sz); font-weight: var(--font-body-wt); } [data-place="frost"] .fm-members__cap { 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(--active-color-03); } [data-place="frost"] .fm-members__body { font-family: var(--font-body); font-size: var(--font-body-sz); font-weight: var(--font-body-wt); line-height: var(--font-body-lh); text-transform: var(--font-body-tt); color: var(--active-color-02); } [data-place="frost"] .fm-members__strong { color: var(--active-color-01); } [data-place="frost"] .fm-members__section-title { font-family: var(--font-subtitle); font-size: var(--font-subtitle-sz); font-weight: var(--font-subtitle-wt); line-height: var(--font-subtitle-lh); letter-spacing: var(--font-subtitle-ls); text-transform: var(--font-subtitle-tt); color: var(--active-color-02); } [data-place="frost"] .fm-members__label { font-family: var(--font-label); font-size: var(--font-label-sz); font-weight: var(--font-label-wt); letter-spacing: var(--font-label-ls); text-transform: var(--font-label-tt); color: var(--active-color-03); } [data-place="frost"] .fm-members__locked { color: var(--active-color-07); } [data-place="frost"] .fm-members__dim { color: var(--active-color-08); } [data-place="frost"] .fm-members__card { background-color: var(--ui-card-bg); border-color: var(--ui-card-border); } [data-place="frost"] .fm-members__list th, [data-place="frost"] .fm-members__list td { border-bottom-color: var(--ui-row-divider); } [data-place="frost"] .fm-members__pill { color: var(--ui-tag-text); background-color: var(--ui-tag-bg); border-color: var(--ui-tag-border); } [data-place="frost"] .fm-members__pill--off { color: var(--ui-error-text); background-color: var(--ui-error-bg); border-color: var(--ui-error-text); } [data-place="frost"] .fm-members__pending-banner { 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); text-decoration: none; color: var(--ui-warn-text); background-color: var(--ui-warn-bg); border-color: var(--ui-warn-text); } [data-place="frost"] .fm-members__input { font: inherit; color: var(--active-color-02); background-color: var(--ui-input-bg); border-color: var(--ui-input-border); } [data-place="frost"] .fm-members__input::placeholder { color: var(--ui-placeholder); } [data-place="frost"] .fm-members__badge { color: var(--active-color-04); text-decoration: none; border-color: var(--ui-tag-border); } /* FROST's place in FROST's own office (the members screens, fm-...) */ [data-place="frost"] .fm-link { color: var(--active-color-05); text-decoration: none; } [data-place="frost"] .fm-input::placeholder { color: var(--ui-placeholder); } [data-place="frost"] .fm-input { color: var(--ui-placeholder); background-color: var(--ui-input-bg); border-color: var(--ui-input-border); font-family: var(--font-body); font-size: var(--font-body-sz); } [data-place="frost"] .fm-field, [data-place="frost"] .fm-fine, [data-place="frost"] .fm-table th { font-family: var(--font-caption); font-size: var(--font-caption-sz); } [data-place="frost"] .fm-group, [data-place="frost"] .fm-card { background-color: var(--ui-card-bg); border-color: var(--ui-card-border); } [data-place="frost"].fm-place { border-color: var(--ui-card-border); background-image: var(--image-background); } [data-place="frost"] .fm-mark { background-image: var(--image-logo_header); color: var(--image-logo_header-words); font-family: var(--font-heading); font-size: var(--font-size-xl); font-weight: var(--font-heading-wt); } [data-place="frost"] .fm-kicker { font-family: var(--font-subnav); font-size: var(--font-subnav-sz); font-weight: var(--font-subnav-wt); line-height: var(--font-subnav-lh); letter-spacing: var(--font-subnav-ls); text-transform: var(--font-subnav-tt); font-size: var(--font-size-xxxs); color: var(--active-color-08); } [data-place="frost"] .fm-cardtitle { font-family: var(--font-title); font-size: var(--font-title-sz); font-weight: var(--font-title-wt); line-height: var(--font-title-lh); letter-spacing: var(--font-title-ls); text-transform: var(--font-title-tt); color: var(--active-color-01); } [data-place="frost"] .fm-cardsub { font-family: var(--font-subtitle); font-size: var(--font-subtitle-sz); font-weight: var(--font-subtitle-wt); line-height: var(--font-subtitle-lh); letter-spacing: var(--font-subtitle-ls); text-transform: var(--font-subtitle-tt); color: var(--active-color-02); } [data-place="frost"] .fm-cardnote { font-family: var(--font-notes); font-size: var(--font-size-s); font-weight: var(--font-notes-wt); color: var(--active-color-34); background-color: var(--active-color-33); border-color: var(--active-color-33); } [data-place="frost"] .fm-card .fm-leave, [data-place="frost"] .fm-card .fm-row { border-color: var(--ui-card-border); } [data-place="frost"] .fm-cardbar { background-color: var(--status-error); } [data-place="frost"] .fm-celllabel { font-family: var(--font-label); font-size: var(--font-label-sz); font-weight: var(--font-label-wt); line-height: var(--font-label-lh); letter-spacing: var(--font-label-ls); text-transform: var(--font-label-tt); color: var(--active-color-01); border-color: var(--ui-card-border); } [data-place="frost"] .fm-value { font-family: var(--font-body); font-size: var(--font-body-sz); font-weight: var(--font-body-wt); line-height: var(--font-body-lh); letter-spacing: var(--font-body-ls); text-transform: var(--font-body-tt); color: var(--ui-placeholder); background-color: var(--ui-input-bg); } [data-place="frost"] .fm-grouplabel { 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(--active-color-06); } [data-place="frost"] .fm-words { font-family: var(--font-body); font-size: var(--font-body-sz); font-weight: var(--font-body-wt); line-height: var(--font-body-lh); text-transform: var(--font-body-tt); color: var(--active-color-02); } [data-place="frost"] .fm-note { 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(--active-color-03); } [data-place="frost"] .fm-status { color: var(--active-color-08); } [data-place="frost"] .fm-group > * + * { border-top-color: var(--ui-row-divider); } [data-place="frost"] .fm-row + .fm-row { border-top-color: var(--ui-row-divider); } [data-place="frost"] .fm-row, [data-place="frost"] .fm-table td, [data-place="frost"] .fm-warn { font-family: var(--font-body); font-size: var(--font-body-sz); } [data-place="frost"] .fm-table th, [data-place="frost"] .fm-table td { border-bottom-color: var(--ui-row-divider); } /* ══ DA-M · 2. its place: the drop zone with its camera and progress line, a record's files (the same block wherever it is worn) ══ */ [data-place="dam"] { color: var(--active-color-01); background-color: var(--active-color-09); font-family: var(--font-body); font-size: var(--font-body-sz); font-weight: var(--font-body-wt); } [data-place="dam"] .dam-title { font-family: var(--font-title); font-size: var(--font-title-sz); font-weight: var(--font-title-wt); line-height: var(--font-title-lh); letter-spacing: var(--font-title-ls); text-transform: var(--font-title-tt); color: var(--active-color-01); } [data-place="dam"] .dam-drag { font-family: var(--font-subtitle); font-size: var(--font-subtitle-sz); font-weight: var(--font-subtitle-wt); line-height: var(--font-subtitle-lh); letter-spacing: var(--font-subtitle-ls); text-transform: var(--font-subtitle-tt); color: var(--active-color-02); } [data-place="dam"] .dam-caption, [data-place="dam"] .dam-cam-label, [data-place="dam"] .dam-file-kind { 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(--active-color-06); } [data-place="dam"] .dam-zone-note, [data-place="dam"] .dam-panel-body { font-family: var(--font-notes); font-size: var(--font-notes-sz); font-weight: var(--font-notes-wt); line-height: var(--font-notes-lh); letter-spacing: var(--font-notes-ls); text-transform: var(--font-notes-tt); color: var(--active-color-03); } [data-place="dam"] .dam-panel-name { font-family: var(--font-callout); font-size: var(--font-callout-sz); font-weight: var(--font-callout-wt); line-height: var(--font-callout-lh); letter-spacing: var(--font-callout-ls); text-transform: var(--font-callout-tt); color: var(--active-color-01); } [data-place="dam"] .dam-kind-count { font-family: var(--font-title); font-size: var(--font-title-sz); font-weight: var(--font-title-wt); line-height: var(--font-title-lh); letter-spacing: var(--font-title-ls); text-transform: var(--font-title-tt); color: var(--active-color-01); } [data-place="dam"] .dam-kind-size { font-family: var(--font-annotation); font-size: var(--font-annotation-sz); font-weight: var(--font-annotation-wt); line-height: var(--font-annotation-lh); letter-spacing: var(--font-annotation-ls); text-transform: var(--font-annotation-tt); color: var(--active-color-06); } [data-place="dam"] .dam-file-name { font-family: var(--font-body); font-size: var(--font-body-sz); font-weight: var(--font-body-wt); line-height: var(--font-body-lh); letter-spacing: var(--font-body-ls); text-transform: var(--font-body-tt); color: var(--active-color-01); } [data-place="dam"].dam-record { background-color: var(--active-color-10); } [data-place="dam"] .dam-frame { background-color: var(--active-color-11); border-color: var(--ui-card-border); } [data-place="dam"] .dam-frame .dam-zone { background-color: transparent; } [data-place="dam"] .dam-count { background-color: var(--active-color-09); border-color: var(--ui-card-border); } [data-place="dam"] .dam-mark, [data-place="dam"] .dam-logo { background-image: var(--image-logo_header); color: var(--image-logo_header-words); font-family: var(--font-subtitle); font-size: var(--font-subtitle-sz); font-weight: var(--font-subtitle-wt); line-height: var(--font-subtitle-lh); letter-spacing: var(--font-subtitle-ls); text-transform: var(--font-subtitle-tt); } [data-place="dam"] .dam-count-line { font-family: var(--font-notes); font-size: var(--font-notes-sz); font-weight: var(--font-notes-wt); line-height: var(--font-notes-lh); letter-spacing: var(--font-notes-ls); text-transform: var(--font-notes-tt); color: var(--active-color-01); } [data-place="dam"] .dam-drop-area { color: var(--active-color-04); background-color: var(--active-color-09); background-image: var(--image-background); border-color: var(--active-color-04); transition: border-color var(--ui-btn-transition) var(--ui-btn-easing); } [data-place="dam"] .dam-drop-area .dam-caption { color: var(--active-color-08); } [data-place="dam"] .dam-drop-area:hover, [data-place="dam"] .dam-drop-area--over { border-color: var(--active-color-05); } [data-place="dam"] .dam-upload-progress { background-color: var(--ui-progress-track); } [data-place="dam"] .dam-upload-progress-bar { background-color: var(--ui-progress-fill); } [data-place="dam"] .dam-cam-btn { background-color: transparent; border-color: var(--active-color-01); } [data-place="dam"] .dam-cam-dot { background-color: var(--active-color-01); } [data-place="dam"] .dam-cam-video { border-color: var(--ui-card-border); } [data-place="dam"] .dam-panel > summary { border-top-color: var(--ui-section-divider); } [data-place="dam"] .dam-panel--last { border-bottom-color: var(--ui-section-divider); } [data-place="dam"] .dam-caret { color: var(--active-color-06); } [data-place="dam"] .dam-kinds th { border-bottom-color: var(--ui-section-divider); } [data-place="dam"] .dam-filter { font-family: var(--font-annotation); font-size: var(--font-annotation-sz); font-weight: var(--font-annotation-wt); line-height: var(--font-annotation-lh); letter-spacing: var(--font-annotation-ls); text-transform: var(--font-annotation-tt); color: var(--active-color-01); background-color: var(--ui-input-bg); border-color: var(--ui-input-border); } [data-place="dam"] .dam-filter::placeholder { color: var(--ui-placeholder); } [data-place="dam"] .dam-filter:focus { border-color: var(--ui-input-focus); outline-color: var(--ui-focus-ring); } [data-place="dam"] .dam-file { border-bottom-color: var(--ui-row-divider); } [data-place="dam"] .dam-file-key { 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(--ui-tag-text); text-decoration: var(--font-link-td); } /* ══ CLARITY, the plain container (the owner 2026-10-08, 2026-10-16, 2026-10-19): the full original sheet (themes/clarity.css, md5 dfbd2a09, 11 Oct), every value as it was. Its three faces are the technology's own, already declared above in 4. THE FONTS: heading font_02, caption font_01, notes font_05 of 30cc5f74 ══ */ /* 2. THE VALUES, each once, by purpose. The second block gives the look's own names the original's values INSIDE the container, so a rule of the look that reads one of them draws as the original did */ .clarity { --clarity-ground: #EFF0EA; --clarity-ink: #0F0F10; --clarity-ink-notes: #1B0404; --clarity-control: #FFFFFF; --clarity-control-ink: #111111; --clarity-field-line: #444444; --clarity-ink-form-note: #333333; --clarity-placeholder: #999999; --clarity-dot-line: #BBBBBB; --clarity-dot-full: #1F9D55; --clarity-dot-own: #E0A516; --clarity-dot-own-line: #B6830C; --clarity-dot-system-line: #000000; --clarity-ok: #157A3F; --clarity-warn: #8A5A00; --clarity-bad: #B3261E; --clarity-screen: #0D0D0D; --clarity-screen-bar: #1A1A1A; --clarity-screen-ink: #D4D4D4; --clarity-screen-title: #888888; --clarity-screen-ok: #4EC9B0; --clarity-screen-warn: #CE9178; --clarity-screen-bad: #F44747; --clarity-face: Helvetica, "Helvetica Neue", Arial, sans-serif; --clarity-face-heading: "font_02_30cc5f74", Helvetica, "Helvetica Neue", Arial, sans-serif; --clarity-face-caption: "font_01_30cc5f74", Helvetica, "Helvetica Neue", Arial, sans-serif; --clarity-face-notes: "font_05_30cc5f74", ui-monospace, Menlo, monospace; } /* 2b. THE LOOK'S OWN NAMES, given the original's values inside the container, and given AGAIN inside a technology's own place (a place sets these names for itself: inside the container it reads the container's) */ .clarity, .clarity [data-place] { --active-color-01: var(--clarity-ink); --active-color-02: var(--clarity-screen-ink); --active-color-06: var(--clarity-screen-ink); --active-color-08: var(--clarity-ink-notes); --active-color-11: var(--clarity-screen); --ui-card-border: var(--clarity-ink); --ui-card-bg: var(--clarity-ground); --ui-row-divider: var(--clarity-ink); --ui-section-divider: var(--clarity-ink); --ui-input-bg: var(--clarity-control); --ui-input-border: var(--clarity-field-line); --ui-input-focus: var(--clarity-control-ink); --ui-focus-ring: var(--clarity-control-ink); --ui-placeholder: var(--clarity-field-line); --ui-progress-track: var(--clarity-control); --ui-progress-fill: var(--clarity-ink); --ui-success-text: var(--clarity-ok); --ui-warn-text: var(--clarity-warn); --ui-error-text: var(--clarity-bad); --ui-tag-text: var(--clarity-ink); --ui-tag-bg: var(--clarity-ground); --ui-tag-border: var(--clarity-ink); --toggle-off: var(--clarity-field-line); --toggle-on: var(--clarity-ok); --toggle-knob-off: var(--clarity-control); --toggle-knob-on: var(--clarity-control); --font-heading: var(--clarity-face-heading); --font-body: var(--clarity-face); --font-caption: var(--clarity-face); --font-size-s: 0.9rem; --font-body-sz: 0.9rem; --font-body-lh: 1.4; --font-caption-sz: 0.9rem; --font-caption-lh: 1.4; --font-label-sz: 0.9rem; --font-annotation-tt: uppercase; --active-color-03: var(--clarity-ink); --active-color-04: var(--clarity-ink); --active-color-05: var(--clarity-ink); --active-color-07: var(--clarity-ink-notes); --active-color-09: var(--clarity-ground); --ui-error-bg: var(--clarity-ground); --ui-success-bg: var(--clarity-ground); --ui-warn-bg: var(--clarity-ground); --image-background: none; --background-fx: none; --font-subtitle: var(--clarity-face-heading); --font-label: var(--clarity-face-caption); --font-body-wt: 300; --font-caption-wt: 600; --font-caption-ls: 1.5px; --font-caption-tt: uppercase; --font-body-tt: uppercase; --font-label-wt: 600; --font-label-ls: 1.5px; --font-label-tt: uppercase; } .clarity [data-place] { color: var(--clarity-ink); background-color: transparent; background-image: none; border-color: var(--clarity-ink); } /* a place's own page picture is handed to it after the page is up (on the place itself): nothing inside the container draws it */ .clarity [data-place] * { --image-background: none; } /* in a FORM's sheet a place's quiet words are the ink too (the terminal's pale ink is for the dark screen alone): every word of an add form can be read */ .clarity.clarity--form [data-place] { --active-color-02: var(--clarity-ink); --active-color-06: var(--clarity-ink); } /* 3. THE CONTAINER: the original's flat panel (one plain surface, square corners), and its room. CLARITY LIVES WHOLE IN THIS ONE FILE (the owner 2026-10-20: "technology.css and includes the clarity.css", "1 file now not two", platform wide and every website): no core.css, no device's sheet, no clarity.css anywhere else */ .clarity { border: 0; border-radius: 0; background-color: var(--clarity-ground); background-image: none; box-shadow: none; color: var(--clarity-ink); font-family: var(--clarity-face); font-size: 1rem; font-weight: 300; font-style: normal; line-height: normal; letter-spacing: normal; text-transform: uppercase; text-align: left; } /* 3b. ITS ROOM (moved here from every office's core.css and the devices' sheets, the same values): the panel's padding, the form's width, the phone's padding, and the record form's head, buttons, fields and verdict inside it */ .clarity { margin-bottom: 40px; padding: 44px 52px 40px; } .clarity--form { width: 560px; max-width: 100%; margin-left: auto; margin-right: auto; box-sizing: border-box; } @media (max-width: 768px) { .clarity { padding: 24px 16px; } } .clarity.clarity--form .wc-head .wc-title { text-align: center; } .clarity .wc-btnrow { flex-wrap: wrap; gap: 10px; } .clarity .wc-field { margin-bottom: 12px; } .clarity .wf-verdict { margin: 0 0 20px; } /* 4. THE WORDS, each role as the original page drew it (uppercase everywhere, as the original's page was) */ html .clarity, html .clarity * { text-shadow: none; } .clarity h1, .clarity .title { font-family: var(--clarity-face-heading); font-size: 2rem; font-weight: 900; font-style: normal; line-height: 1.4; letter-spacing: 1.5px; text-transform: uppercase; color: var(--clarity-ink); } .clarity h2, .clarity h3, .clarity .subtitle { font-family: var(--clarity-face-heading); font-size: 0.9rem; font-weight: 900; font-style: normal; line-height: 2.2; letter-spacing: 1.5px; text-transform: uppercase; color: var(--clarity-ink); } .clarity .body { font-family: var(--clarity-face); font-size: 0.9rem; font-weight: 300; font-style: normal; line-height: 1.4; letter-spacing: normal; text-transform: uppercase; color: var(--clarity-ink); } .clarity .notes { font-family: var(--clarity-face-notes); font-size: 1.1rem; font-weight: 500; font-style: normal; line-height: 1.4; letter-spacing: normal; text-transform: uppercase; color: var(--clarity-ink-notes); } /* the original's small line was 0.6rem; its own tower wrote most of them at the body's size (fs-95rem), which is the one kept here: every line of the container can be read */ .clarity .annotation { font-family: var(--clarity-face); font-size: 0.9rem; font-weight: 300; font-style: normal; line-height: 1.4; letter-spacing: normal; text-transform: uppercase; color: var(--clarity-ink-notes); } .clarity .caption { font-family: var(--clarity-face-caption); font-size: 0.7rem; font-weight: 600; font-style: normal; line-height: 1.5; letter-spacing: 1.5px; text-transform: uppercase; color: var(--clarity-ink); } .clarity .ct-big { font-family: var(--clarity-face-heading); font-size: 0.9rem; font-weight: 900; line-height: 1.1; letter-spacing: normal; text-transform: uppercase; color: var(--clarity-ink); } .clarity strong, .clarity b { font-weight: 700; } .clarity a { color: var(--clarity-ink); } /* 4b. A FORM in the container WEARS THE ORIGINAL CREATE ACCOUNT'S LOOK (the owner 2026-10-08, of production's own page: "this is the page"; "the form boxes as round and big and the style": the FROST VAULT sheet, fs members/register.html, value for value): a white sheet with a 2px line and round corners, headings on a 3px rule, big round fields, a black round button and its white ghost */ .clarity.clarity--form { border: 2px solid var(--clarity-control-ink); border-radius: 10px; background-color: var(--clarity-control); color: var(--clarity-control-ink); text-transform: none; } .clarity.clarity--form h1 { font-family: var(--clarity-face); font-size: 1.5rem; font-weight: 700; line-height: 1.3; letter-spacing: 1.5px; text-transform: uppercase; text-align: left; color: var(--clarity-control-ink); } .clarity.clarity--form h2 { font-family: var(--clarity-face); font-size: 1.5rem; font-weight: 700; line-height: 1.3; letter-spacing: normal; text-transform: uppercase; color: var(--clarity-control-ink); border-bottom: 3px solid var(--clarity-control-ink); padding-bottom: 6px; } .clarity.clarity--form .body { font-size: 1.1rem; text-transform: none; color: var(--clarity-ink-form-note); } .clarity label, .clarity legend, .clarity label.caption, .clarity legend.caption { font-family: var(--clarity-face); font-size: 1.1rem; font-weight: 500; line-height: 1.5; letter-spacing: normal; text-transform: uppercase; color: var(--clarity-control-ink); } .clarity input:not([type]), .clarity input[type="text"], .clarity input[type="password"], .clarity input[type="email"], .clarity input[type="tel"], .clarity input[type="number"], .clarity input[type="date"], .clarity input[type="url"], .clarity input[type="search"], .clarity input[type="file"], .clarity select, .clarity textarea { box-sizing: border-box; padding: 13px 14px; border: 2px solid var(--clarity-control-ink); border-radius: 8px; background-color: var(--clarity-control); color: var(--clarity-control-ink); font-family: var(--clarity-face); font-size: 1.1rem; text-transform: none; } .clarity input::placeholder, .clarity textarea::placeholder { color: var(--clarity-placeholder); } .clarity.clarity--form .btn { padding: 16px 34px; border: 2px solid var(--clarity-control-ink); border-radius: 8px; background-color: var(--clarity-control-ink); color: var(--clarity-control); font-family: var(--clarity-face); font-size: 1.1rem; font-weight: 500; line-height: 1.2; letter-spacing: normal; text-transform: uppercase; } .clarity.clarity--form .btn:hover { background-color: var(--clarity-control-ink); color: var(--clarity-control); opacity: 0.85; } .clarity.clarity--form a { color: var(--clarity-control-ink); } .clarity.clarity--form pre, .clarity.clarity--form pre.caption { border: 2px solid var(--clarity-control-ink); border-radius: 8px; } /* a record's ADD and EDIT form (the owner 2026-10-10): a tick box and its word, a message the page says (saved, not saved and why, a refusal) and a small note under a field are the form's own words: ink on the sheet, never the theme's glass */ .clarity input[type="checkbox"], .clarity input[type="radio"] { accent-color: var(--clarity-control-ink); } .clarity [role="status"], .clarity [role="alert"] { border: 2px solid var(--clarity-control-ink); border-radius: 8px; background: var(--clarity-ground); color: var(--clarity-control-ink); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; } .clarity [role="status"] > *, .clarity [role="alert"] > * { border: 0; background: none; color: var(--clarity-control-ink); } .clarity .callout { font-family: var(--clarity-face); font-size: 1.1rem; font-weight: 700; line-height: 1.5; letter-spacing: normal; text-transform: uppercase; color: var(--clarity-control-ink); } .clarity.clarity--form p, .clarity.clarity--form li { font-family: var(--clarity-face); font-size: 1.1rem; font-weight: 300; line-height: 1.5; letter-spacing: normal; text-transform: none; color: var(--clarity-ink-form-note); } /* 5. THE CONTROLS: the original's CLARITY RULE. A white button, black words, a black line; black with white words under the pointer; dimmed when it cannot be pressed. The fields are the form's (4b): round and big */ .clarity .btn, .clarity button, .clarity input[type="submit"], .clarity input[type="button"] { padding: 12px 20px; border: 1.5px solid var(--clarity-control-ink); border-radius: 0; background-color: var(--clarity-control); background-image: none; color: var(--clarity-control-ink); font-family: var(--clarity-face-heading); font-size: 0.9rem; font-weight: 900; line-height: 2.2; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; white-space: normal; max-width: 100%; box-shadow: none; opacity: 1; cursor: pointer; } .clarity .btn:hover, .clarity button:hover, .clarity input[type="submit"]:hover, .clarity input[type="button"]:hover { background-color: var(--clarity-control-ink); color: var(--clarity-control); border-color: var(--clarity-control-ink); box-shadow: none; } .clarity .btn[disabled], .clarity .btn[disabled]:hover, .clarity button:disabled, .clarity button:disabled:hover { background-color: var(--clarity-control); color: var(--clarity-control-ink); opacity: 0.45; cursor: not-allowed; } .clarity .btn[aria-pressed="true"] { background-color: var(--clarity-control-ink); color: var(--clarity-control); } /* 6. THE SWITCH keeps its own shape (never a button's): grey off, green on, a white knob */ .clarity .toggle, .clarity .toggle:hover, .clarity .toggle:disabled, .clarity .toggle:disabled:hover { padding: 0; border: 1px solid var(--clarity-field-line); border-radius: 22px; background-color: var(--clarity-field-line); opacity: 1; } .clarity .toggle[aria-pressed="true"], .clarity .toggle[aria-pressed="true"]:hover { border-color: var(--clarity-ok); background-color: var(--clarity-ok); } .clarity .toggle .toggle__knob { border-color: var(--clarity-control); background-color: var(--clarity-control); } /* 6b. THE ONE DOT of the authorization grids keeps its own round shape and its four states, as the original drew them (fs members/inc_onboarding_style.html): empty · solid green · half yellow · solid black. Never a button's look */ .clarity .gcell, .clarity .gcell:hover, .clarity .gcell:disabled, .clarity .gcell:disabled:hover { width: 20px; height: 20px; padding: 0; border: 2px solid var(--clarity-dot-line); border-radius: 50%; background-color: var(--clarity-control); background-image: none; font-size: 0; line-height: 0; opacity: 1; box-sizing: border-box; vertical-align: middle; } .clarity .gcell[data-v="1"], .clarity .gcell[data-v="1"]:hover { background-color: var(--clarity-dot-full); border-color: var(--clarity-ok); } .clarity .gcell[data-v="2"], .clarity .gcell[data-v="2"]:hover { background-color: var(--clarity-control); background-image: linear-gradient(90deg, var(--clarity-dot-own) 50%, var(--clarity-control) 50%); border-color: var(--clarity-dot-own-line); } .clarity .gcell[data-v="3"], .clarity .gcell[data-v="3"]:hover { background-color: var(--clarity-control-ink); border-color: var(--clarity-dot-system-line); } /* 6d. A RECORD'S KEY in the container keeps its own small shape (never a field's, never a button's): a white chip with the ink's line, the key in the notes' face, its hash turned over (white on ink); the tiny copy button is only its mark */ .clarity .key-badge__box { border: 1.5px solid var(--clarity-control-ink); border-image: none; background-color: var(--clarity-control); background-image: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; } .clarity .key-badge__box::after { background: none; } .clarity .key-badge__label { font-family: var(--clarity-face-caption); font-size: 0.7rem; font-weight: 600; line-height: 1.5; letter-spacing: 1.5px; text-transform: uppercase; color: var(--clarity-control-ink); } .clarity .key-badge__value { font-family: var(--clarity-face-notes); font-size: 0.9rem; font-weight: 500; letter-spacing: normal; text-transform: none; text-decoration: none; color: var(--clarity-control-ink); } .clarity .key-badge__hash { color: var(--clarity-control); background-color: var(--clarity-control-ink); box-shadow: none; } .clarity .key-badge__copy, .clarity .key-badge__copy:hover { padding: 0; border: 0; border-radius: 0; background-color: transparent; color: var(--clarity-control-ink); line-height: normal; opacity: 1; } /* 6c. A SMALL WINDOW OF WORDS (the terms a person signs, shown where they sign): white, ruled, its words tiny and as typed */ .clarity pre, .clarity pre.caption { padding: 10px 12px; border: 1px solid var(--clarity-field-line); background-color: var(--clarity-control); color: var(--clarity-control-ink); font-family: var(--clarity-face); font-size: 0.7rem; font-weight: 300; line-height: 1.5; letter-spacing: normal; text-transform: none; } /* 7. THE TABLES: the original's log table, ruled in the ink */ .clarity table { border-collapse: collapse; color: var(--clarity-ink); } .clarity th { font-family: var(--clarity-face); font-weight: 700; text-align: left; } .clarity td { font-family: var(--clarity-face); font-weight: 300; } .clarity .ct-log-table th, .clarity .ct-log-table td { font-size: 1rem; } /* a card inside the container is as wide as the container lets it be (the grid of dots needs the room) */ .clarity .console-auth { max-width: none; } /* the grid's column heads keep the original's small capitals size, so every column fits without a sideways scroll */ .clarity .dvm-vth .vlabel, .clarity .dvm-grouphead th { font-size: 0.7rem; } .clarity .dvm-table .dvm-vth { padding-left: 4px; padding-right: 4px; } /* 8. THE TERMINAL stays the original's dark screen */ .clarity .clarity-screen { --ui-success-text: var(--clarity-screen-ok); --ui-warn-text: var(--clarity-screen-warn); --ui-error-text: var(--clarity-screen-bad); background-color: var(--clarity-screen); color: var(--clarity-screen-ink); font-family: var(--clarity-face-notes); font-size: 0.8rem; line-height: 1.5; text-transform: none; } .clarity .clarity-screen * { text-transform: none; } .clarity .clarity-screen.clarity-screen-bar { background-color: var(--clarity-screen-bar); color: var(--clarity-screen-title); } /* 9. A NARROW SCREEN: the heading steps down, the rest stays */ @media (max-width: 768px) { .clarity h1, .clarity .title { font-size: 1.5rem; } }