/* ══════════════════════════════════════════════════════════════════════════ thm_depth · depth.tokens.css · v2.4 (2026-10-08) Depth, second edition: every design token, both themes in one file. HOW THE THEME WORKS. Colour roles are written with light-dark(LIGHT, DARK). The theme is `color-scheme` alone: :root -> follows the operating system (light dark) :root[data-theme="light"] -> light :root[data-theme="dark"] -> dark Any element may also set `color-scheme` itself; every role below resolves where it is used, so a light panel inside a dark page just works. RULES FOR EVERY APP THAT PULLS THIS FILE - One definition per token. Change a value here, never in an app. - Components read roles only (see depth.controls.css). Never a hex, a pixel size, a radius or a raw palette step in an app's own component rules. - Set these on :root only: data-theme, data-corners, --accent-base, --mark-base. The radius, accent and mark roles are derived at :root. - data-density="loose" or "compact" may sit on :root or on any container. Density moves space and control heights only, never text size (zoom does that). No control drops below --hit-min (24px, WCAG 2.2 target). - Named colour presets live in depth.accents.css (optional), not here. - The brand colour is just a value (--brand-red). Nothing here names an app or an organization. ══════════════════════════════════════════════════════════════════════════ */ :root { color-scheme: light dark; /* ── Planes: depth is five planes, not effects ─────────────────────────── */ --surface-floor: light-dark(#DFE4EC, #090C11); /* the page ground */ --surface-sunken: light-dark(#D6DCE6, #0E1219); /* fields, wells */ --surface-1: light-dark(#FFFFFF, #141922); /* panels, cards, bars */ --surface-2: light-dark(#F6F8FC, #1B2230); /* hover, selected row (a pressed button adds --press-tint) */ --surface-3: light-dark(#FFFFFF, #232C3C); /* menus, popovers, dialogs */ /* ── Lines ─────────────────────────────────────────────────────────────── */ --line-subtle: light-dark(#C4CEDC, #2A3343); /* dividers, card edges, table rules (decorative) */ --line-strong: light-dark(#637DA2, #61769B); /* field and control boundaries (3:1) */ /* ── Ink ───────────────────────────────────────────────────────────────── */ --ink-1: light-dark(#0D131C, #EAEFF7); /* text */ --ink-2: light-dark(#313C4B, #B4BFD1); /* secondary text, labels */ --ink-3: light-dark(#545F6E, #8895A9); /* meta, timestamps, placeholder */ --ink-disabled: color-mix(in srgb, var(--ink-3) 60%, transparent); /* exempt: disabled */ /* ── Accent ("go"): primary fill, selected mark, switch on ──────────────── One input, --accent-base. Every accent role is derived from it at a fixed OKLCH lightness, so any base keeps the measured contrast of the default. A theme-colour picker writes --accent-base on :root and nothing else. */ --accent-base: #18616D; --accent: light-dark(oklch(from var(--accent-base) 0.455 c h), oklch(from var(--accent-base) 0.720 calc(c * 1.2) h)); --accent-hover: light-dark(oklch(from var(--accent-base) 0.400 c h), oklch(from var(--accent-base) 0.780 calc(c * 1.2) h)); --accent-ink: light-dark(oklch(from var(--accent-base) 0.455 c h), oklch(from var(--accent-base) 0.740 calc(c * 1.35) h)); --focus-ring: light-dark(oklch(from var(--accent-base) 0.398 calc(c * 0.91) h), oklch(from var(--accent-base) 0.767 calc(c * 1.65) h)); --on-accent: light-dark(#FFFFFF, #0D131C); /* v2.1: dark mode fills are light, so their marks and text are dark */ --accent-wash: color-mix(in srgb, var(--accent) var(--mix-wash), transparent); /* container, exempt */ --press-tint: color-mix(in srgb, var(--ink-1) var(--mix-wash), transparent); /* v2.4: laid over a button's own ground while it is pressed */ /* ── Mark: the selected bar on nav and list rows. Follows the accent unless --mark-base is set (a brand may go in one colour and mark in another). */ --mark-base: var(--accent-base); --mark-ink: light-dark(oklch(from var(--mark-base) 0.455 c h), oklch(from var(--mark-base) 0.700 calc(c * 1.35) h)); /* ── Identity: marks only (logo, profile mark). Never an action, never a state. */ --brand-red: #B32839; /* ── Status: ink = text and marks, fill = solid backgrounds, on-* = text on fill */ --danger-ink: light-dark(#B3261E, #FF7A6B); --danger-fill: #B32839; --on-danger: #FFFFFF; --warning-ink: light-dark(#865700, #F39C12); --warning-fill: #F39C12; --on-warning: #201A05; --warning-line: light-dark(#BF6500, #F39C12); --success-ink: light-dark(#146B36, #2ECC71); --success-fill: #259050; --on-success: #041207; /* ── Mix strengths (percentages used inside color-mix) ─────────────────── */ --mix-wash: 10%; /* selected rows, pressed toggles, destructive hover, banners */ --mix-tag: 7%; /* tag fill (v2.1: 12% -> 7% so tag text keeps 4.5:1 on sunken wells) */ --mix-rim: 40%; /* tag border */ /* ── Shadow: only for what floats over content ─────────────────────────── */ --shadow-color: light-dark(rgba(20, 30, 45, .18), rgba(0, 0, 0, .55)); --scrim: light-dark(rgba(20, 30, 45, .32), rgba(0, 0, 0, .6)); --elev-0: none; --elev-float: 0 4px 12px var(--shadow-color); /* menu, popover, tooltip, toast */ --elev-dialog: 0 12px 32px var(--shadow-color); /* dialog, over a scrim */ /* ── Type ──────────────────────────────────────────────────────────────── */ --font-ui: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif; --font-display: Bahnschrift, "Segoe UI Variable Display", "Segoe UI", sans-serif; --font-mono: "Cascadia Mono", Consolas, ui-monospace, monospace; --fw-regular: 400; --fw-strong: 600; --fs-caption: 12px; --lh-caption: 16px; /* meta, tags, section labels */ --fs-dense: 13px; --lh-dense: 18px; /* table cells, compact menus */ --fs-body: 14px; --lh-body: 20px; /* body, buttons, fields, menus */ --fs-subtitle: 16px; --lh-subtitle: 22px; /* section headings, dialog titles */ --fs-title: 20px; --lh-title: 26px; /* page titles (display face) */ --fs-display: 28px; --lh-display: 34px; /* first-run and licence screens only */ /* ── Space (4-point). One meaning for every app (Carter, 2026-09-27): apps drop their own ── --sp-* copies; K9 had 22/30/42/60, settled on this ramp. --sp-8 added for K9. ── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* ── Size ──────────────────────────────────────────────────────────────── */ --ctl-h: 32px; /* buttons, fields, selects, segmented, menu rows */ --ctl-h-sm: 24px; /* table cells, bars */ --ctl-h-lg: 40px; /* first-run and licence screens */ --row-h: 36px; /* table rows, list rows, nav rows */ --cell-pad-x: var(--sp-3); --icon-sm: 16px; --icon-md: 20px; --icon-stroke-sm: 1.9; /* line weight in the glyph's 24-unit box: 1.27px at --icon-sm */ --icon-stroke-md: 1.7; /* 1.42px at --icon-md */ --icon-stroke: var(--icon-stroke-sm); /* alias kept so pinned apps keep working */ --hit-min: 24px; /* the smallest clickable box */ --mark-size: 16px; /* checkbox and radio */ --radio-dot: 6px; --glyph-stroke: 2px; --switch-w: 32px; --switch-h: 18px; --switch-knob: 12px; --dot-size: 8px; --badge-min: 18px; --tag-h: 20px; --tag-pad-x: 6px; --seg-pad: 2px; --chevron-size: 5px; --line-w: 1px; --bar-w: 3px; /* selected nav bar, banner edge */ --underline-w: 2px; /* selected tab */ --focus-w: 2px; --focus-offset: 2px; --focus-inset: -2px; /* rings drawn inside rows */ --focus-room: calc(var(--focus-w) + var(--focus-offset)); /* v2.4: padding a clipping box needs so a ring at its edge is not cut */ --menu-min: 200px; --tip-max: 280px; --dialog-sm: 440px; --dialog-md: 640px; --dialog-lg: 960px; --z-menu: 100; --z-tip: 200; --z-toast: 300; /* ── Radius: --r-scale is the corner switch (1 rounded, 0 square) ──────── */ --r-scale: 1; --radius-xs: calc(2px * var(--r-scale)); /* tags, checkbox */ --radius-ctl: calc(4px * var(--r-scale)); /* buttons, fields, menu rows, segmented */ --radius-surface: calc(8px * var(--r-scale)); /* cards, menus, dialogs, tiles */ --radius-round: 999px; /* count badge, avatar, switch, dot. Never a button. */ /* ── Motion: colours and opacity only; nothing moves on hover ──────────── */ --dur-fast: 100ms; --dur-base: 160ms; --ease: cubic-bezier(.2, 0, 0, 1); /* the one curve for every app (Carter, 2026-09-27; K9 had .4,0,.2,1) */ --tip-delay: 500ms; --transition-colors: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); /* ── The sky theme picker: fixed pictures, the same in both themes ─────── The one decorative control in the set, kept on purpose. Its words sit over a scrim; see .sky in depth.controls.css. */ --sky-over-x: -11%; --sky-over-y: -16%; --sky-day: linear-gradient(180deg, #9ED4EE 0%, #C6E9F8 100%); --sky-night: linear-gradient(135deg, #1A2038 0%, #33265B 45%, #4A3A80 100%); --sky-ink-day: #0B1220; --sky-sun: radial-gradient(circle at 35% 30%, #FFE45C 0%, #FFD400 55%, #F2B705 100%); --sky-moon: radial-gradient(circle at 30% 62%, rgba(148,155,168,.55) 0 3.6px, transparent 4.4px), radial-gradient(circle at 62% 34%, rgba(148,155,168,.5) 0 2.5px, transparent 3.2px), radial-gradient(circle at 68% 68%, rgba(148,155,168,.45) 0 2px, transparent 2.7px), radial-gradient(circle at 45% 20%, rgba(148,155,168,.4) 0 1.5px, transparent 2px), radial-gradient(circle at 35% 30%, #FFFFFF 0%, #EDEEF2 55%, #C9CDD6 100%); --sky-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 28'%3E%3Cg fill='white'%3E%3Cpolygon opacity='0.71' points='-3.3,-0.37 -3.12,0.05 -2.7,0.23 -3.12,0.41 -3.3,0.83 -3.48,0.41 -3.9,0.23 -3.48,0.05'/%3E%3Cpolygon opacity='0.69' points='-0.55,4.3 -0.39,4.68 -0,4.85 -0.39,5.01 -0.55,5.4 -0.72,5.01 -1.1,4.85 -0.72,4.68'/%3E%3Cpolygon opacity='0.96' points='3.63,11.37 3.85,11.91 4.39,12.13 3.85,12.36 3.63,12.89 3.4,12.36 2.87,12.13 3.4,11.91'/%3E%3Cpolygon opacity='0.68' points='-2.11,21.82 -1.93,22.24 -1.52,22.41 -1.93,22.59 -2.11,23 -2.29,22.59 -2.7,22.41 -2.29,22.24'/%3E%3Cpolygon opacity='0.76' points='3.58,26.7 4.29,28.36 5.95,29.07 4.29,29.78 3.58,31.44 2.87,29.78 1.21,29.07 2.87,28.36'/%3E%3Cpolygon opacity='0.7' points='8.94,-0.83 9.24,-0.14 9.93,0.16 9.24,0.46 8.94,1.15 8.64,0.46 7.95,0.16 8.64,-0.14'/%3E%3Cpolygon opacity='0.96' points='11.79,4.67 12.2,5.63 13.17,6.05 12.2,6.46 11.79,7.43 11.37,6.46 10.41,6.05 11.37,5.63'/%3E%3Cpolygon opacity='0.59' points='15.13,12.67 15.63,13.84 16.81,14.35 15.63,14.85 15.13,16.03 14.62,14.85 13.45,14.35 14.62,13.84'/%3E%3Cpolygon opacity='0.92' points='15.33,20.8 15.53,21.27 16,21.47 15.53,21.67 15.33,22.14 15.13,21.67 14.66,21.47 15.13,21.27'/%3E%3Cpolygon opacity='0.87' points='14.02,28.24 14.25,28.78 14.79,29.01 14.25,29.24 14.02,29.78 13.79,29.24 13.25,29.01 13.79,28.78'/%3E%3Cpolygon opacity='0.66' points='22.82,-1.92 23.09,-1.28 23.73,-1.01 23.09,-0.74 22.82,-0.1 22.54,-0.74 21.91,-1.01 22.54,-1.28'/%3E%3Cpolygon opacity='0.87' points='24.24,4.81 24.78,6.06 26.03,6.6 24.78,7.13 24.24,8.39 23.7,7.13 22.45,6.6 23.7,6.06'/%3E%3Cpolygon opacity='0.87' points='27.64,13.72 27.9,14.32 28.49,14.57 27.9,14.83 27.64,15.42 27.39,14.83 26.79,14.57 27.39,14.32'/%3E%3Cpolygon opacity='0.74' points='22.93,22.18 23.14,22.66 23.62,22.87 23.14,23.08 22.93,23.56 22.72,23.08 22.24,22.87 22.72,22.66'/%3E%3Cpolygon opacity='0.75' points='24.63,26.68 25.25,28.13 26.7,28.75 25.25,29.37 24.63,30.82 24.01,29.37 22.56,28.75 24.01,28.13'/%3E%3Cpolygon opacity='0.67' points='38.38,-2.06 38.83,-1.02 39.87,-0.57 38.83,-0.13 38.38,0.92 37.93,-0.13 36.89,-0.57 37.93,-1.02'/%3E%3Cpolygon opacity='0.59' points='33.99,5.36 34.51,6.57 35.72,7.09 34.51,7.61 33.99,8.82 33.48,7.61 32.26,7.09 33.48,6.57'/%3E%3Cpolygon opacity='0.61' points='34.04,13.17 34.3,13.79 34.93,14.06 34.3,14.33 34.04,14.95 33.77,14.33 33.15,14.06 33.77,13.79'/%3E%3Cpolygon opacity='0.7' points='39.1,21.63 39.35,22.22 39.95,22.48 39.35,22.73 39.1,23.33 38.84,22.73 38.25,22.48 38.84,22.22'/%3E%3Cpolygon opacity='0.83' points='37.52,24.46 38.18,26.01 39.73,26.67 38.18,27.33 37.52,28.88 36.86,27.33 35.31,26.67 36.86,26.01'/%3E%3Cpolygon opacity='0.75' points='46.7,-0.99 46.92,-0.49 47.41,-0.28 46.92,-0.06 46.7,0.43 46.49,-0.06 45.99,-0.28 46.49,-0.49'/%3E%3Cpolygon opacity='0.93' points='50.45,4.82 50.68,5.36 51.22,5.59 50.68,5.82 50.45,6.36 50.22,5.82 49.68,5.59 50.22,5.36'/%3E%3Cpolygon opacity='0.82' points='49.75,14.19 50.16,15.15 51.12,15.56 50.16,15.97 49.75,16.93 49.34,15.97 48.38,15.56 49.34,15.15'/%3E%3Cpolygon opacity='0.78' points='48.44,21.42 48.79,22.24 49.62,22.6 48.79,22.95 48.44,23.78 48.08,22.95 47.26,22.6 48.08,22.24'/%3E%3Cpolygon opacity='0.75' points='45.16,28.87 45.6,29.89 46.63,30.34 45.6,30.78 45.16,31.81 44.72,30.78 43.69,30.34 44.72,29.89'/%3E%3Cpolygon opacity='0.61' points='61.92,-3.96 62.64,-2.27 64.34,-1.54 62.64,-0.82 61.92,0.88 61.19,-0.82 59.5,-1.54 61.19,-2.27'/%3E%3Cpolygon opacity='0.69' points='60.64,3.53 61.08,4.56 62.1,4.99 61.08,5.43 60.64,6.45 60.21,5.43 59.18,4.99 60.21,4.56'/%3E%3Cpolygon opacity='0.93' points='57.88,11.32 58.05,11.7 58.43,11.87 58.05,12.03 57.88,12.42 57.72,12.03 57.33,11.87 57.72,11.7'/%3E%3Cpolygon opacity='0.78' points='60.69,17.41 61.34,18.92 62.85,19.57 61.34,20.21 60.69,21.73 60.04,20.21 58.53,19.57 60.04,18.92'/%3E%3Cpolygon opacity='0.86' points='56.53,25.09 56.92,25.99 57.82,26.38 56.92,26.77 56.53,27.67 56.14,26.77 55.24,26.38 56.14,25.99'/%3E%3Ccircle opacity='0.61' cx='-2.02' cy='-2.69' r='0.28'/%3E%3Ccircle opacity='0.64' cx='-5.02' cy='6.83' r='0.42'/%3E%3Ccircle opacity='0.77' cx='-2.6' cy='13.34' r='0.35'/%3E%3Ccircle opacity='0.85' cx='-4.88' cy='16.41' r='0.3'/%3E%3Ccircle opacity='0.49' cx='-1.73' cy='30.88' r='0.31'/%3E%3Ccircle opacity='0.63' cx='3.31' cy='-1.35' r='0.41'/%3E%3Ccircle opacity='0.44' cx='6.17' cy='3.75' r='0.28'/%3E%3Ccircle opacity='0.59' cx='3.33' cy='6.76' r='0.36'/%3E%3Ccircle opacity='0.52' cx='6.39' cy='12.98' r='0.21'/%3E%3Ccircle opacity='0.72' cx='6.21' cy='17.59' r='0.33'/%3E%3Ccircle opacity='0.67' cx='4.8' cy='25.08' r='0.42'/%3E%3Ccircle opacity='0.54' cx='8.28' cy='-0.18' r='0.42'/%3E%3Ccircle opacity='0.71' cx='9.88' cy='3.49' r='0.3'/%3E%3Ccircle opacity='0.87' cx='8.79' cy='13' r='0.16'/%3E%3Ccircle opacity='0.53' cx='8.67' cy='27.02' r='0.22'/%3E%3Ccircle opacity='0.78' cx='19.19' cy='-1.36' r='0.22'/%3E%3Ccircle opacity='0.7' cx='18.05' cy='11.56' r='0.32'/%3E%3Ccircle opacity='0.75' cx='18.54' cy='31.42' r='0.37'/%3E%3Ccircle opacity='0.67' cx='25.44' cy='1.77' r='0.2'/%3E%3Ccircle opacity='0.88' cx='23.33' cy='8.47' r='0.23'/%3E%3Ccircle opacity='0.67' cx='21.01' cy='10.82' r='0.31'/%3E%3Ccircle opacity='0.79' cx='22.63' cy='15.74' r='0.43'/%3E%3Ccircle opacity='0.71' cx='23.08' cy='23.82' r='0.38'/%3E%3Ccircle opacity='0.69' cx='21.92' cy='29.99' r='0.39'/%3E%3Ccircle opacity='0.79' cx='27.53' cy='-1.34' r='0.3'/%3E%3Ccircle opacity='0.83' cx='29.63' cy='1.93' r='0.37'/%3E%3Ccircle opacity='0.59' cx='29.73' cy='11.83' r='0.27'/%3E%3Ccircle opacity='0.62' cx='27.8' cy='16.79' r='0.35'/%3E%3Ccircle opacity='0.87' cx='28.11' cy='26.89' r='0.38'/%3E%3Ccircle opacity='0.43' cx='27.82' cy='30.76' r='0.4'/%3E%3Ccircle opacity='0.42' cx='35.96' cy='4.2' r='0.29'/%3E%3Ccircle opacity='0.48' cx='39.13' cy='19.95' r='0.36'/%3E%3Ccircle opacity='0.83' cx='37.96' cy='29.36' r='0.38'/%3E%3Ccircle opacity='0.84' cx='43.63' cy='-3.34' r='0.19'/%3E%3Ccircle opacity='0.82' cx='41.59' cy='1.7' r='0.41'/%3E%3Ccircle opacity='0.77' cx='44.75' cy='8.31' r='0.22'/%3E%3Ccircle opacity='0.58' cx='44.82' cy='13.06' r='0.26'/%3E%3Ccircle opacity='0.58' cx='44.69' cy='26.38' r='0.22'/%3E%3Ccircle opacity='0.79' cx='41.46' cy='31' r='0.42'/%3E%3Ccircle opacity='0.79' cx='48.65' cy='-0.23' r='0.19'/%3E%3Ccircle opacity='0.73' cx='49.09' cy='1.45' r='0.33'/%3E%3Ccircle opacity='0.53' cx='49.17' cy='8.63' r='0.2'/%3E%3Ccircle opacity='0.57' cx='49.37' cy='11.37' r='0.32'/%3E%3Ccircle opacity='0.57' cx='49.39' cy='16.72' r='0.38'/%3E%3Ccircle opacity='0.58' cx='48.81' cy='20.69' r='0.22'/%3E%3Ccircle opacity='0.44' cx='48.35' cy='30.76' r='0.27'/%3E%3Ccircle opacity='0.51' cx='57.64' cy='-0.39' r='0.25'/%3E%3Ccircle opacity='0.58' cx='54.93' cy='13' r='0.43'/%3E%3Ccircle opacity='0.87' cx='55.02' cy='17.7' r='0.16'/%3E%3Ccircle opacity='0.55' cx='57.57' cy='19.01' r='0.23'/%3E%3Ccircle opacity='0.7' cx='56.23' cy='31.55' r='0.22'/%3E%3Ccircle opacity='0.62' cx='62.15' cy='-3.22' r='0.44'/%3E%3Ccircle opacity='0.44' cx='63.4' cy='1.35' r='0.37'/%3E%3Ccircle opacity='0.45' cx='61.22' cy='10.78' r='0.37'/%3E%3Ccircle opacity='0.72' cx='65.29' cy='21.45' r='0.4'/%3E%3Ccircle opacity='0.57' cx='62.63' cy='24.1' r='0.32'/%3E%3Ccircle opacity='0.55' cx='62.58' cy='31.18' r='0.4'/%3E%3Cpolygon opacity='0.82' points='0.95,-0.69 1.5,0.59 2.78,1.14 1.5,1.69 0.95,2.97 0.4,1.69 -0.88,1.14 0.4,0.59'/%3E%3Cpolygon opacity='0.61' points='-2.19,7.13 -2.02,7.53 -1.62,7.7 -2.02,7.87 -2.19,8.27 -2.36,7.87 -2.76,7.7 -2.36,7.53'/%3E%3Cpolygon opacity='0.62' points='-2.63,20.17 -2.45,20.6 -2.01,20.79 -2.45,20.98 -2.63,21.41 -2.82,20.98 -3.26,20.79 -2.82,20.6'/%3E%3Cpolygon opacity='0.63' points='-3.38,26.24 -3.19,26.69 -2.74,26.88 -3.19,27.07 -3.38,27.52 -3.58,27.07 -4.02,26.88 -3.58,26.69'/%3E%3Cpolygon opacity='0.77' points='19.23,-0.21 19.72,0.94 20.88,1.44 19.72,1.93 19.23,3.08 18.74,1.93 17.58,1.44 18.74,0.94'/%3E%3Cpolygon opacity='0.60' points='11.9,9.84 12.4,11 13.55,11.49 12.4,11.98 11.9,13.13 11.41,11.98 10.26,11.49 11.41,11'/%3E%3Cpolygon opacity='0.68' points='18.31,18.73 18.65,19.54 19.46,19.89 18.65,20.24 18.31,21.04 17.96,20.24 17.15,19.89 17.96,19.54'/%3E%3Cpolygon opacity='0.69' points='20.39,27.38 20.9,28.56 22.08,29.07 20.9,29.58 20.39,30.76 19.89,29.58 18.7,29.07 19.89,28.56'/%3E%3Cpolygon opacity='0.71' points='30.37,2.58 30.58,3.07 31.06,3.27 30.58,3.48 30.37,3.96 30.16,3.48 29.68,3.27 30.16,3.07'/%3E%3Cpolygon opacity='0.88' points='30.23,7.46 30.78,8.73 32.05,9.28 30.78,9.83 30.23,11.1 29.69,9.83 28.41,9.28 29.69,8.73'/%3E%3Cpolygon opacity='0.67' points='34.15,16.42 34.64,17.56 35.78,18.05 34.64,18.54 34.15,19.68 33.66,18.54 32.52,18.05 33.66,17.56'/%3E%3Cpolygon opacity='0.62' points='33.31,24.19 34.04,25.88 35.73,26.61 34.04,27.33 33.31,29.02 32.59,27.33 30.9,26.61 32.59,25.88'/%3E%3Cpolygon opacity='0.61' points='43.33,-0.31 43.71,0.58 44.61,0.96 43.71,1.35 43.33,2.24 42.95,1.35 42.05,0.96 42.95,0.58'/%3E%3Cpolygon opacity='0.67' points='40.73,9.81 40.99,10.41 41.6,10.67 40.99,10.93 40.73,11.53 40.47,10.93 39.87,10.67 40.47,10.41'/%3E%3Cpolygon opacity='0.90' points='46.49,17.84 46.65,18.22 47.04,18.39 46.65,18.55 46.49,18.94 46.32,18.55 45.94,18.39 46.32,18.22'/%3E%3Cpolygon opacity='0.89' points='44.11,24.59 44.61,25.76 45.78,26.26 44.61,26.76 44.11,27.93 43.61,26.76 42.44,26.26 43.61,25.76'/%3E%3Cpolygon opacity='0.76' points='55.58,-0.63 56.03,0.41 57.07,0.86 56.03,1.3 55.58,2.34 55.14,1.3 54.1,0.86 55.14,0.41'/%3E%3Cpolygon opacity='0.92' points='55.54,9.24 55.75,9.73 56.24,9.94 55.75,10.15 55.54,10.64 55.33,10.15 54.84,9.94 55.33,9.73'/%3E%3Cpolygon opacity='0.90' points='54.13,19.9 54.38,20.5 54.98,20.75 54.38,21.01 54.13,21.6 53.88,21.01 53.28,20.75 53.88,20.5'/%3E%3Cpolygon opacity='0.91' points='56.38,24.53 56.58,25 57.05,25.2 56.58,25.4 56.38,25.87 56.18,25.4 55.72,25.2 56.18,25'/%3E%3Ccircle opacity='0.84' cx='-5.17' cy='-3.1' r='0.25'/%3E%3Ccircle opacity='0.85' cx='-2.72' cy='2.19' r='0.24'/%3E%3Ccircle opacity='0.43' cx='-1.69' cy='5.8' r='0.31'/%3E%3Ccircle opacity='0.78' cx='-4.91' cy='10.05' r='0.26'/%3E%3Ccircle opacity='0.79' cx='-2.42' cy='17.65' r='0.31'/%3E%3Ccircle opacity='0.53' cx='-1.6' cy='22.67' r='0.42'/%3E%3Ccircle opacity='0.55' cx='-2.43' cy='24.94' r='0.25'/%3E%3Ccircle opacity='0.62' cx='-5' cy='29.83' r='0.17'/%3E%3Ccircle opacity='0.54' cx='1.09' cy='-1.41' r='0.16'/%3E%3Ccircle opacity='0.70' cx='4.05' cy='1.04' r='0.3'/%3E%3Ccircle opacity='0.51' cx='2.46' cy='6.76' r='0.17'/%3E%3Ccircle opacity='0.65' cx='3.84' cy='12.86' r='0.38'/%3E%3Ccircle opacity='0.88' cx='3.1' cy='17.96' r='0.21'/%3E%3Ccircle opacity='0.78' cx='1.28' cy='21.38' r='0.41'/%3E%3Ccircle opacity='0.79' cx='0.57' cy='30.55' r='0.4'/%3E%3Ccircle opacity='0.58' cx='8.26' cy='0.9' r='0.38'/%3E%3Ccircle opacity='0.63' cx='8.3' cy='19.24' r='0.28'/%3E%3Ccircle opacity='0.83' cx='5.91' cy='21.04' r='0.36'/%3E%3Ccircle opacity='0.50' cx='9.69' cy='24.57' r='0.18'/%3E%3Ccircle opacity='0.45' cx='11.78' cy='-3.01' r='0.32'/%3E%3Ccircle opacity='0.60' cx='12.28' cy='3.08' r='0.31'/%3E%3Ccircle opacity='0.44' cx='14.95' cy='9.03' r='0.3'/%3E%3Ccircle opacity='0.88' cx='15.01' cy='14.04' r='0.39'/%3E%3Ccircle opacity='0.62' cx='11.35' cy='20.76' r='0.38'/%3E%3Ccircle opacity='0.83' cx='14.02' cy='26.28' r='0.31'/%3E%3Ccircle opacity='0.69' cx='15.04' cy='31.3' r='0.25'/%3E%3Ccircle opacity='0.72' cx='20.43' cy='2.74' r='0.18'/%3E%3Ccircle opacity='0.64' cx='19.26' cy='9.03' r='0.18'/%3E%3Ccircle opacity='0.71' cx='18.45' cy='14.99' r='0.41'/%3E%3Ccircle opacity='0.49' cx='16.95' cy='17.27' r='0.4'/%3E%3Ccircle opacity='0.72' cx='18.47' cy='20.86' r='0.39'/%3E%3Ccircle opacity='0.57' cx='19.43' cy='29.85' r='0.25'/%3E%3Ccircle opacity='0.79' cx='26.46' cy='2.62' r='0.19'/%3E%3Ccircle opacity='0.57' cx='22.29' cy='6.59' r='0.32'/%3E%3Ccircle opacity='0.51' cx='23.3' cy='14.29' r='0.3'/%3E%3Ccircle opacity='0.78' cx='23.99' cy='19.2' r='0.44'/%3E%3Ccircle opacity='0.62' cx='23.71' cy='21.82' r='0.27'/%3E%3Ccircle opacity='0.71' cx='25.43' cy='25.79' r='0.29'/%3E%3Ccircle opacity='0.85' cx='23.1' cy='28.44' r='0.31'/%3E%3Ccircle opacity='0.66' cx='29.62' cy='-0.73' r='0.28'/%3E%3Ccircle opacity='0.88' cx='28.36' cy='3.35' r='0.26'/%3E%3Ccircle opacity='0.80' cx='31.2' cy='9.26' r='0.35'/%3E%3Ccircle opacity='0.61' cx='28.06' cy='13.49' r='0.26'/%3E%3Ccircle opacity='0.61' cx='30.33' cy='17.38' r='0.41'/%3E%3Ccircle opacity='0.60' cx='31.65' cy='22.25' r='0.29'/%3E%3Ccircle opacity='0.44' cx='28.34' cy='31.48' r='0.16'/%3E%3Ccircle opacity='0.52' cx='34.23' cy='6.8' r='0.43'/%3E%3Ccircle opacity='0.50' cx='36.1' cy='13.49' r='0.24'/%3E%3Ccircle opacity='0.69' cx='36.52' cy='25.93' r='0.27'/%3E%3Ccircle opacity='0.49' cx='37.44' cy='30.9' r='0.27'/%3E%3Ccircle opacity='0.66' cx='42.33' cy='-0.72' r='0.31'/%3E%3Ccircle opacity='0.88' cx='40.39' cy='0.94' r='0.39'/%3E%3Ccircle opacity='0.52' cx='39.32' cy='9.45' r='0.22'/%3E%3Ccircle opacity='0.83' cx='41.33' cy='13.37' r='0.26'/%3E%3Ccircle opacity='0.69' cx='43.02' cy='19.04' r='0.37'/%3E%3Ccircle opacity='0.76' cx='40.33' cy='22.1' r='0.3'/%3E%3Ccircle opacity='0.44' cx='40.84' cy='26.64' r='0.22'/%3E%3Ccircle opacity='0.82' cx='41.25' cy='30.84' r='0.32'/%3E%3Ccircle opacity='0.53' cx='45.13' cy='-1.97' r='0.31'/%3E%3Ccircle opacity='0.84' cx='46.53' cy='5.47' r='0.18'/%3E%3Ccircle opacity='0.64' cx='47.43' cy='14.2' r='0.31'/%3E%3Ccircle opacity='0.63' cx='47.68' cy='17.04' r='0.18'/%3E%3Ccircle opacity='0.64' cx='46.46' cy='25.7' r='0.19'/%3E%3Ccircle opacity='0.43' cx='53.64' cy='-1.34' r='0.36'/%3E%3Ccircle opacity='0.86' cx='53.32' cy='1.55' r='0.29'/%3E%3Ccircle opacity='0.80' cx='51.35' cy='5.09' r='0.34'/%3E%3Ccircle opacity='0.62' cx='54.16' cy='10.34' r='0.19'/%3E%3Ccircle opacity='0.82' cx='53.32' cy='18.55' r='0.18'/%3E%3Ccircle opacity='0.84' cx='52.97' cy='26.43' r='0.19'/%3E%3Ccircle opacity='0.83' cx='59.84' cy='-3.49' r='0.16'/%3E%3Ccircle opacity='0.57' cx='59.22' cy='8.88' r='0.27'/%3E%3Ccircle opacity='0.45' cx='56.51' cy='14.81' r='0.18'/%3E%3Ccircle opacity='0.62' cx='58.27' cy='17.79' r='0.43'/%3E%3Ccircle opacity='0.71' cx='59.06' cy='22.48' r='0.22'/%3E%3Ccircle opacity='0.76' cx='59.04' cy='31.57' r='0.28'/%3E%3Ccircle opacity='0.74' cx='64.15' cy='-3.16' r='0.19'/%3E%3Ccircle opacity='0.75' cx='64.73' cy='0.77' r='0.19'/%3E%3Ccircle opacity='0.75' cx='61.16' cy='14.26' r='0.22'/%3E%3Ccircle opacity='0.75' cx='61.31' cy='16.88' r='0.44'/%3E%3C/g%3E%3C/svg%3E"); --sky-clouds: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 28'%3E%3Cdefs%3E%3Cg id='c'%3E%3Crect x='8' y='18' width='18' height='9' rx='4.5'/%3E%3Ccircle cx='11' cy='20.5' r='3.5'/%3E%3Ccircle cx='17' cy='19' r='5'/%3E%3Ccircle cx='23' cy='20' r='4'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='white' opacity='.95'%3E%3Cuse href='%23c' transform='translate(-14.4,-4.4) scale(1.52)'/%3E%3Cuse href='%23c' transform='translate(11.4,2.0) scale(1.16)'/%3E%3Cuse href='%23c' transform='translate(26.6,-4.9) scale(1.46)'/%3E%3C/g%3E%3C/svg%3E"); --sky-clouds-low: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 28'%3E%3Cdefs%3E%3Cg id='c'%3E%3Crect x='8' y='18' width='18' height='9' rx='4.5'/%3E%3Ccircle cx='11' cy='20.5' r='3.5'/%3E%3Ccircle cx='17' cy='19' r='5'/%3E%3Ccircle cx='23' cy='20' r='4'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='white' opacity='.85'%3E%3Cuse href='%23c' transform='translate(-17.0,1.4) scale(0.86)'/%3E%3Cuse href='%23c' transform='translate(-3.6,3.0) scale(0.80)'/%3E%3Cuse href='%23c' transform='translate(6.0,1.0) scale(0.92)'/%3E%3Cuse href='%23c' transform='translate(22.4,3.2) scale(0.74)'/%3E%3Cuse href='%23c' transform='translate(32.0,1.6) scale(0.88)'/%3E%3Cuse href='%23c' transform='translate(45.0,2.8) scale(0.72)'/%3E%3C/g%3E%3C/svg%3E"); --sky-scrim: linear-gradient(180deg, rgba(6,10,18,.06) 0%, rgba(6,10,18,.52) 100%); --sky-ink-night: #FFFFFF; --sky-sun-shadow: 0 2px 5px rgba(0,0,0,.42), 0 0 14px rgba(255,212,0,.55); --sky-moon-shadow: 0 2px 5px rgba(0,0,0,.5), 0 0 14px rgba(255,255,255,.35); --sky-ink-day-halo: 0 1px 0 rgba(255,255,255,.72), 0 0 8px rgba(255,255,255,.6); --sky-ink-night-halo: 0 1px 2px rgba(4,7,12,.85), 0 0 10px rgba(4,7,12,.6); --sky-tile-h: 52px; --sky-orb: 17px; --sky-orb-top: 7px; --sky-orb-right: 9px; --sky-gap: 5px; } /* ── Theme: color-scheme alone ─────────────────────────────────────────── */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* ── Corners ───────────────────────────────────────────────────────────── */ :root[data-corners="square"] { --r-scale: 0; } /* ── Density: Loose / Normal (no attribute) / Compact ────────────────────── Moves space and control heights only. Text size never changes with density (Carter, 2026-09-27: zoom does that). Every height stays >= --hit-min. v1 compact also shrank body text to 13/18; v2 drops that. */ [data-density="loose"] { --sp-1: 6px; --sp-2: 12px; --sp-3: 16px; --sp-4: 24px; --sp-5: 32px; --sp-6: 48px; --sp-7: 64px; --sp-8: 80px; --ctl-h: 40px; --ctl-h-sm: 28px; --ctl-h-lg: 48px; --row-h: 44px; --tag-h: 24px; --cell-pad-x: var(--sp-3); } [data-density="compact"] { --sp-1: 2px; --sp-2: 4px; --sp-3: 8px; --sp-4: 12px; --sp-5: 16px; --sp-6: 24px; --sp-7: 32px; --sp-8: 48px; --ctl-h: 28px; --ctl-h-sm: 24px; --ctl-h-lg: 32px; --row-h: 28px; --tag-h: 18px; --seg-pad: 1px; /* keeps .seg-item at --hit-min inside the 28px group */ --cell-pad-x: var(--sp-3); } /* ── Reduced motion zeroes every duration ──────────────────────────────── */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --tip-delay: 0ms; } }