/* os-prefs.css — copied from Seamside v0 (tauri-app/src-tauri/chassis/dynamic/os-prefs.css), variable names unchanged so frames styled for v0 carry over. Served by the daemon at /v/prefs/os-prefs.css; a keeper's /prefs/os-prefs.css overrides it. Phosphor icon font not yet shipped; Geist/GeistMono are the variable faces. */ /* Full Phosphor glyph-class definitions (the woff2 below already contains every glyph; without this only the hand-copied subset in os.css resolves, so any other ph-* class silently renders blank). Must precede all other rules. */ /* OS user-selected style prefs CSS file, shared across the current OS, spaces, and frames. ---> Eventually this will auto-generated when user sets their color/style preferences. */ /* NOTE: keep this file un-nested (no `&` nesting or selector-inside-selector). Native CSS nesting is only available in recent WebView versions (Chrome 120+, Safari 17.2+, WebKitGTK 2.42+); leaving rules flat keeps rendering correct on every platform Seamside ships to. */ /* ============================================================================= FONT FACES ============================================================================= */ /* The default face set (2026-08-25) — themes may replace all of it. local() first on Inter: a keeper who already has Inter installed loads nothing. XCharter's static weights are range-mapped so token weights hit real faces, never synthesis. */ @font-face { font-family: 'Inter'; src: local('Inter'), url('../fonts/InterVariable.woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: local('Inter Italic'), url('../fonts/InterVariable-Italic.woff2') format('woff2-variations'); font-weight: 100 900; font-style: italic; font-display: swap; } /* XCharter — the voice (Bitstream Charter, extended). */ @font-face { font-family: 'XCharter'; src: url('../fonts/xcharter-regular.woff2') format('woff2'); font-weight: 100 599; font-style: normal; font-display: swap; } @font-face { font-family: 'XCharter'; src: url('../fonts/xcharter-italic.woff2') format('woff2'); font-weight: 100 599; font-style: italic; font-display: swap; } @font-face { font-family: 'XCharter'; src: url('../fonts/xcharter-bold.woff2') format('woff2'); font-weight: 600 900; font-style: normal; font-display: swap; } /* Commit Mono — literal machine text ("anonymous by design"; MIT). */ @font-face { font-family: 'Commit Mono'; src: local('Commit Mono'), url('../fonts/CommitMono-400-Regular.woff2') format('woff2'); font-weight: 100 599; font-style: normal; font-display: swap; } @font-face { font-family: 'Commit Mono'; src: local('Commit Mono Italic'), url('../fonts/CommitMono-400-Italic.woff2') format('woff2'); font-weight: 100 599; font-style: italic; font-display: swap; } @font-face { font-family: 'Commit Mono'; src: url('../fonts/CommitMono-700-Regular.woff2') format('woff2'); font-weight: 600 900; font-style: normal; font-display: swap; } /* ============================================================================= VARIABLES ============================================================================= */ :root { /* --- MODE TABLES — the only place color literals may live (theme model, docs/plans/2026-08-25-design-process.md). Ground: "gallery", confirmed 2026-08-25 — barely-cool chalk by day; by night a gallery×slate blend that carries a little hue the day side doesn't. The active mode maps these onto the --os-* roles below: prefers-color-scheme by default, .os-light / .os-dark to force a subtree (the atelier shows both side by side; the keeper's own toggle will hold the same handle). --- */ --os-day-bg: #f6f6f7; --os-day-bg-subtle: #f1f1f3; --os-day-bg-surface: #fcfcfd; --os-day-bg-elevated: #fefefe; --os-day-bg-inset: #ececef; --os-day-text: #1b1c1f; --os-day-text-secondary: #52545a; --os-day-text-muted: #74767d; --os-day-text-subtle: #9a9ca3; --os-day-text-disabled: #c6c7cc; --os-day-cError: #c61d3c; --os-day-cError-fg: #f2e4ec; /* Borders are the ink at a fixed alpha, not a gray: one literal cannot sit one step off five grounds, and a translucent line does over each of them (subtle ≈ 3 L* by day, 5 by night; plain twice that). */ --os-day-border-color: color-mix(in srgb, var(--os-day-text), transparent 90%); --os-day-border-color-subtle: color-mix(in srgb, var(--os-day-text), transparent 95%); --os-day-shadow-xs: 0 1px 2px rgba(27,28,31,0.05); --os-day-shadow-sm: 0 1px 3px rgba(27,28,31,0.07), 0 1px 2px rgba(27,28,31,0.04); --os-day-shadow-md: 0 4px 6px -1px rgba(27,28,31,0.07), 0 2px 4px -2px rgba(27,28,31,0.04); --os-day-shadow-lg: 0 10px 15px -3px rgba(27,28,31,0.09), 0 4px 6px -4px rgba(27,28,31,0.04); --os-day-shadow-xl: 0 20px 25px -5px rgba(27,28,31,0.11), 0 8px 10px -6px rgba(27,28,31,0.05); --os-day-shadow-lifted: 0 2px 4px rgba(27,28,31,0.04), 0 8px 16px rgba(27,28,31,0.06), 0 16px 32px -4px rgba(27,28,31,0.08); --os-day-scrim: color-mix(in srgb, #1b1c1f, transparent 70%); --os-day-scrim-subtle: color-mix(in srgb, #1b1c1f, transparent 85%); --os-day-contrast-surface: #0b0c0f; --os-day-contrast-surface-raised: #15161a; --os-day-contrast-text: #ffffff; --os-day-contrast-text-secondary: #d4d5d9; --os-day-contrast-text-muted: #8a8c95; --os-night-bg: #1d1e25; --os-night-bg-subtle: #22232b; --os-night-bg-surface: #26272f; --os-night-bg-elevated: #2c2d36; --os-night-bg-inset: #17181d; --os-night-text: #e7e8ee; --os-night-text-secondary: #a1a4b2; --os-night-text-muted: #75788b; --os-night-text-subtle: #5c5f70; --os-night-text-disabled: #454858; /* a coral red: the day's crimson is muddy and hard to read on the night ground */ --os-night-cError: #ef7a6d; --os-night-cError-fg: #3d1411; --os-night-border-color: color-mix(in srgb, var(--os-night-text), transparent 86%); --os-night-border-color-subtle: color-mix(in srgb, var(--os-night-text), transparent 93%); --os-night-shadow-xs: 0 1px 2px rgba(0,0,0,0.20); --os-night-shadow-sm: 0 1px 3px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.15); --os-night-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.30), 0 2px 4px -2px rgba(0,0,0,0.20); --os-night-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.35), 0 4px 6px -4px rgba(0,0,0,0.20); --os-night-shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.40), 0 8px 10px -6px rgba(0,0,0,0.25); --os-night-shadow-lifted: 0 2px 4px rgba(0,0,0,0.20), 0 8px 16px rgba(0,0,0,0.24), 0 16px 32px -4px rgba(0,0,0,0.28); --os-night-scrim: color-mix(in srgb, #000000, transparent 45%); --os-night-scrim-subtle: color-mix(in srgb, #000000, transparent 70%); --os-night-contrast-surface: #e7e8ee; --os-night-contrast-surface-raised: #f6f6f7; --os-night-contrast-text: #16171c; --os-night-contrast-text-secondary: #45474e; --os-night-contrast-text-muted: #74767d; /* --- Colors --- */ --os-c1: #3891a8; --os-c1-muted: color-mix(in srgb, var(--os-c1), var(--os-bg) 70%); --os-c1-fg: #e9f3f5; --os-c2: #e5695c; --os-c2-muted: color-mix(in srgb, var(--os-c2), var(--os-bg) 70%); --os-c2-fg: #fbe8e5; --os-c3: #7a6b9e; --os-c3-muted: color-mix(in srgb, var(--os-c3), var(--os-bg) 70%); --os-c3-fg: #e6e4ed; --os-c4: #e8b84b; --os-c4-muted: color-mix(in srgb, var(--os-c4), var(--os-bg) 70%); --os-c4-fg: #523b0a; --os-c5: #5a9e6f; --os-c5-muted: color-mix(in srgb, var(--os-c5), var(--os-bg) 70%); --os-c5-fg: #e4f0e8; --os-c6: #b06c8e; --os-c6-muted: color-mix(in srgb, var(--os-c6), var(--os-bg) 70%); --os-c6-fg: #f2e4ec; --os-c7: #6878a8; --os-c7-muted: color-mix(in srgb, var(--os-c7), var(--os-bg) 70%); --os-c7-fg: #e5e8f2; --os-c8: #c48d52; --os-c8-muted: color-mix(in srgb, var(--os-c8), var(--os-bg) 70%); --os-c8-fg: #4a3218; --os-c9: color-mix(in oklch longer hue, var(--os-c1), var(--os-c4)); --os-c9-muted: color-mix(in srgb, var(--os-c9), var(--os-bg) 70%); --os-c9-fg: #f5e8f3; /* c10-c12: long-path oklch pairwise, completing the 12-channel system. */ --os-c10: color-mix(in oklch longer hue, var(--os-c2), var(--os-c3)); --os-c10-muted: color-mix(in srgb, var(--os-c10), var(--os-bg) 70%); --os-c10-fg: #e4f2ec; --os-c11: color-mix(in oklch longer hue, var(--os-c1), var(--os-c3)); --os-c11-muted: color-mix(in srgb, var(--os-c11), var(--os-bg) 70%); --os-c11-fg: #f2ece0; --os-c12: color-mix(in oklch longer hue, var(--os-c2), var(--os-c4)); --os-c12-muted: color-mix(in srgb, var(--os-c12), var(--os-bg) 70%); --os-c12-fg: #0a3a52; /* --- Semantic Colors (only for things like Warn/Error/Success notifications) --- */ --os-cSuccess: #06b84d; --os-cSuccess-muted: color-mix(in srgb, var(--os-cSuccess), var(--os-bg) 70%); --os-cSuccess-fg: #e4f0e8; --os-cWarn: #bb6606; --os-cWarn-muted: color-mix(in srgb, var(--os-cWarn), var(--os-bg) 70%); --os-cWarn-fg: #523b0a; /* Seamside Plus — the paid tier's one callout, and the only place this colour is used. It is not severity and not a channel: it marks what a membership adds, so it must read as *extra* wherever it lands. */ /* Seamside Plus wears channel 3, the blue-violet of the first four (Matt, 2026-09-23) */ --os-cPlus: var(--os-c3); --os-cPlus-muted: color-mix(in srgb, var(--os-cPlus), var(--os-bg) 70%); --os-cPlus-fg: var(--os-c3-fg); /* --- Fonts --- */ --os-font-sans: 'Inter', system-ui, -apple-system, sans-serif; --os-font-mono: 'Commit Mono', ui-monospace, 'SF Mono', monospace; --os-font-serif: 'XCharter', Georgia, serif; /* --- Font Weights --- */ --os-weight-normal: 400; --os-weight-medium: 500; --os-weight-semibold: 600; --os-weight-bold: 700; /* --- Contrast surfaces (instrument panels — dark in light mode, light in dark mode) --- */ /* --- Community Bar --- */ --os-community-bar-height: 50px; --os-community-bar-bg: var(--os-bg); /* --- Frames --- */ --os-frame-border-radius: 8px; --os-frame-border-color: var(--os-border-color); --os-frame-border-color-managing: var(--os-c1); /* Selected-frame border. Must contrast with the space BACKDROP, not the frame — spaces with custom/dark backgrounds override this per-space (today: best-effort luminance flip in os-spaces-manager; eventually: part of the space theme). */ --os-frame-border-color-selected: var(--os-text); /* --- Space Header --- */ --os-space-header-height: 50px; --os-space-header-bg: var(--os-bg-surface); /* --- Border Radius --- */ --os-radius-xs: 4px; --os-radius-sm: 6px; --os-radius-md: 8px; --os-radius-lg: 12px; --os-radius-xl: 16px; --os-radius-2xl: 24px; --os-radius-full: 9999px; /* --- Transitions --- */ --os-transition-fast: 150ms cubic-bezier(0.22, 1, 0.36, 1); --os-transition-normal: 250ms cubic-bezier(0.22, 1, 0.36, 1); --os-transition-slow: 400ms cubic-bezier(0.22, 1, 0.36, 1); --os-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* --- Typography Scale --- */ --os-fs-2xs: 10px; --os-fs-xs: 11px; --os-fs-sm: 12px; --os-fs-base: 13px; --os-fs-md: 14px; --os-fs-lg: 16px; --os-fs-xl: 20px; --os-fs-2xl: 24px; --os-fs-3xl: 32px; /* --- Spacing Scale --- */ --os-sp-xs: 4px; --os-sp-sm: 8px; --os-sp-md: 12px; --os-sp-lg: 16px; --os-sp-xl: 24px; --os-sp-2xl: 32px; --os-sp-3xl: 48px; /* --- Focus --- */ --os-focus-color: color-mix(in srgb, var(--ch, var(--os-c1)), transparent 40%); --os-focus-ring: 0 0 0 2px var(--os-bg), 0 0 0 3px var(--os-focus-color); /* --- Easing --- */ --os-ease-out: cubic-bezier(0.2, 0, 0, 1); /* --- Tracking (letter-spacing) --- */ --os-tracking-tight: -0.01em; --os-tracking-wide: 0.02em; --os-tracking-wider: 0.04em; } /* the ring on anything with a shadow of its own or neighbours that paint: an outline, drawn above everything */ button:focus-visible, .btn:focus-visible, a:focus-visible, summary:focus-visible { outline: 1px solid var(--os-focus-color); outline-offset: 2px; } /* an icon glyph sits a pixel low in its line box beside a label's caps (measured on a 1x screen, 2026-09-09); lifted so the two share a centre */ button i, .btn i { position: relative; top: -1px; } /* The mode mappings: one line per role, identical lists. Day is the default; the media query follows OS intent; the classes force a subtree. */ :root, .os-light { --os-bg: var(--os-day-bg); --os-bg-subtle: var(--os-day-bg-subtle); --os-bg-surface: var(--os-day-bg-surface); --os-bg-elevated: var(--os-day-bg-elevated); --os-bg-inset: var(--os-day-bg-inset); --os-text: var(--os-day-text); --os-text-secondary: var(--os-day-text-secondary); --os-text-muted: var(--os-day-text-muted); --os-text-subtle: var(--os-day-text-subtle); --os-text-disabled: var(--os-day-text-disabled); --os-cError: var(--os-day-cError); --os-cError-fg: var(--os-day-cError-fg); --os-cError-muted: color-mix(in srgb, var(--os-cError), var(--os-bg) 70%); --os-border-color: var(--os-day-border-color); --os-border-color-subtle: var(--os-day-border-color-subtle); --os-shadow-xs: var(--os-day-shadow-xs); --os-shadow-sm: var(--os-day-shadow-sm); --os-shadow-md: var(--os-day-shadow-md); --os-shadow-lg: var(--os-day-shadow-lg); --os-shadow-xl: var(--os-day-shadow-xl); --os-shadow-lifted: var(--os-day-shadow-lifted); --os-scrim: var(--os-day-scrim); --os-scrim-subtle: var(--os-day-scrim-subtle); /* Conjure's yellow as words: too light to read on day's ground, so darkened toward black (in oklab, which keeps the hue) */ --os-c4-ink: color-mix(in oklab, var(--os-c4), black 40%); --os-contrast-surface: var(--os-day-contrast-surface); --os-contrast-surface-raised: var(--os-day-contrast-surface-raised); --os-contrast-text: var(--os-day-contrast-text); --os-contrast-text-secondary: var(--os-day-contrast-text-secondary); --os-contrast-text-muted: var(--os-day-contrast-text-muted); } @media (prefers-color-scheme: dark) { :root:not(.os-light) { --os-bg: var(--os-night-bg); --os-bg-subtle: var(--os-night-bg-subtle); --os-bg-surface: var(--os-night-bg-surface); --os-bg-elevated: var(--os-night-bg-elevated); --os-bg-inset: var(--os-night-bg-inset); --os-text: var(--os-night-text); --os-text-secondary: var(--os-night-text-secondary); --os-text-muted: var(--os-night-text-muted); --os-text-subtle: var(--os-night-text-subtle); --os-text-disabled: var(--os-night-text-disabled); --os-cError: var(--os-night-cError); --os-cError-fg: var(--os-night-cError-fg); --os-cError-muted: color-mix(in srgb, var(--os-cError), var(--os-bg) 70%); --os-border-color: var(--os-night-border-color); --os-border-color-subtle: var(--os-night-border-color-subtle); --os-shadow-xs: var(--os-night-shadow-xs); --os-shadow-sm: var(--os-night-shadow-sm); --os-shadow-md: var(--os-night-shadow-md); --os-shadow-lg: var(--os-night-shadow-lg); --os-shadow-xl: var(--os-night-shadow-xl); --os-shadow-lifted: var(--os-night-shadow-lifted); --os-scrim: var(--os-night-scrim); --os-scrim-subtle: var(--os-night-scrim-subtle); --os-c4-ink: var(--os-c4); --os-contrast-surface: var(--os-night-contrast-surface); --os-contrast-surface-raised: var(--os-night-contrast-surface-raised); --os-contrast-text: var(--os-night-contrast-text); --os-contrast-text-secondary: var(--os-night-contrast-text-secondary); --os-contrast-text-muted: var(--os-night-contrast-text-muted); } } .os-dark { --os-bg: var(--os-night-bg); --os-bg-subtle: var(--os-night-bg-subtle); --os-bg-surface: var(--os-night-bg-surface); --os-bg-elevated: var(--os-night-bg-elevated); --os-bg-inset: var(--os-night-bg-inset); --os-text: var(--os-night-text); --os-text-secondary: var(--os-night-text-secondary); --os-text-muted: var(--os-night-text-muted); --os-text-subtle: var(--os-night-text-subtle); --os-text-disabled: var(--os-night-text-disabled); --os-cError: var(--os-night-cError); --os-cError-fg: var(--os-night-cError-fg); --os-cError-muted: color-mix(in srgb, var(--os-cError), var(--os-bg) 70%); --os-border-color: var(--os-night-border-color); --os-border-color-subtle: var(--os-night-border-color-subtle); --os-shadow-xs: var(--os-night-shadow-xs); --os-shadow-sm: var(--os-night-shadow-sm); --os-shadow-md: var(--os-night-shadow-md); --os-shadow-lg: var(--os-night-shadow-lg); --os-shadow-xl: var(--os-night-shadow-xl); --os-shadow-lifted: var(--os-night-shadow-lifted); --os-scrim: var(--os-night-scrim); --os-scrim-subtle: var(--os-night-scrim-subtle); --os-c4-ink: var(--os-c4); --os-contrast-surface: var(--os-night-contrast-surface); --os-contrast-surface-raised: var(--os-night-contrast-surface-raised); --os-contrast-text: var(--os-night-contrast-text); --os-contrast-text-secondary: var(--os-night-contrast-text-secondary); --os-contrast-text-muted: var(--os-night-contrast-text-muted); } /* Dark mode: contrast panels invert (light-on-dark → dark-on-light) */ [data-theme="dark"] { --os-contrast-surface: #f5f4f2; --os-contrast-surface-raised: #ffffff; --os-contrast-text: #1c1917; --os-contrast-text-secondary: #44403c; --os-contrast-text-muted: #78716c; } /* --- Cursors: Phosphor glyphs baked as 24px PNG data-URIs. Ink with a thin cream halo; hands are the DUOTONE variants with the palm filled opaque shadow-tone (#e4e3e1 = 10% ink over cream) so content never shows through the hand. Hotspots at center, except hand-pointing at the fingertip (11 3). The set is the binary-status grammar applied to the pointer: dot-outline (rest) -> circle-dashed (frame under attention) -> circle (pressed/engaged) -> arrows-out-cardinal (in motion). hand-pointing replaces the native pointer; hand/hand-grabbing replace native grab/grabbing. Native cursors remain only for text, resize, and not-allowed. Themeable like any --os-* token. ENGINE NOTE: 1x bitmaps only, on purpose. WebKitGTK parses image-set in cursor but the GTK3 port renders the selected 2x bitmap WITHOUT scale normalization (cursor doubles in size — observed 2026-06-12 on 2.50.5, DPR 2). Until the webview can do scaled cursors, mild softness on hidpi is the platform ceiling for any custom cursor. --- */ :root { --os-cursor-default: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABX0lEQVR4nOxUMUvDQBR+L7HXi5ujv8PiYGldSiFY/BfFpVZqB5OhdXApOLaD9He0gmSymCyK/8FBoXHRKbkcSbyEKjo0CZVOzQfHfTze9753746TYM2QYM3IDTbAYCtrIudOJfRxL+IoB0+FwvZDFh2mJYRhiJyza0G6f+IAg2JR0dP0qSPijLXt+bx73unAfqkUr4i/27bmuW47TY8p3e9wz307bbXodDKB6mE1js/uZ3DUaMBwNHILhO4i4seyGol34DNWES1Qy7KgXq/DzXgcx0+aTTBNM6JU5ByI/XZZjeQRIcqLk0CR0p8wVZTfOSSpROIJZBI8Bx5AuVwGwzBA1zUI/CDmtVptkUMeVzZAVF4Yc656/X5PliUw7gyQJARVVUHT9egCL8X8XxNrQAaI13IGGA4E/Z6TAyFeEEqHadpMBhHiF8XdY7FzQpSp6Pwziy6zwarIf9Pc4P/4AgAA//9VAHcKAAAABklEQVQDAAfNeBhGSD1sAAAAAElFTkSuQmCC") 12 12, default; --os-cursor-pointer: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAELklEQVR4nKRVXVBUZRh+zrLsOTAgrAK7rEHMBNiQMxoqqNmkTkwZJt0kOV4IBTEtP5aINo2TymRUjFHcNMNNwwyBis2ARLKsxrgKzDBZl7FgZfw0WuzgzrR7/thzes8Bd+Rn11Wfm+893/ee9/nev+81IAxUVWUkiS+XRP9NSeT9tHokgb8iy/4XECGYcIey4D+qMkzj5OQkrl5xIiEhES8XFCA+Pp7+jMo1mUy/4kkI6Nbe4aGhVSWHDkGWZX3ParWgp7cXa9YknTexMW/hITCEOqDwJNKyqr29HdHR0ei+dAmff9GIO3fuwulwahrrEAGMIU9E0aL555mZQXZ2NixWK5JTUvSju//+Q/ZhQwQI6QEYhlnwBAZmXs1gWFBXFO08Ts+RqtoejyAMeJ5Hb+8PsX39/Y0C7/tDFPmDkiTlEZllqa4Rj4GWlpagXFZWxn504kQb1ABkKaAVxnC0ypQyHOdeRkA3iJVFsVxllAIZykwogrS0NNgrK9HT04PW1laIkoSpySlsyduCktLSbeC4i2RrI0U5ECSg5tkuiUKn996szeFwIDY2FoV7965I8NLOndi1ezdYjsXQ4CDOdXQgPT0dAwM/YXT0N3z1dfN6KuvnSfVn48LNk2RJuOpwXOYOV9cEa/73W7eWGee4GCSazfMyy+rr0WN1KCp6AydPfgyX67q+Z1DVDI1AT/KcyJcIPM8def8DxMRwOHX6NPLy89Dc3IypqalFBB3nO1BcXKzLySkWJCcnIzd303zo1j6Fe7OzuqwwSqJONP/BmBUqR0EQUFj4Ol7ds0dvqqSkJExPTy8iSE216Y13PxdaV2trKOgEVN5OLeY7XtyB/n4HEfHkSQyqqqvxpNAJjEbumgqM1dbWwuPxoK3tO/1Q82TDxg2w2lIjMub3+xEXF6fLlNf/tDX42M0JwmsKo/YerqkhL/rR1d0Fs3k1HgWVdjuiKBznLlwA9cKzWi8EO9nIcT9SGvqOH/8QSiCAprNNeFSMud3IeW69Jgpg2XFNWPRUmMDU2Nba5ioqKvRcDA0PIVJ0d3XD5/PhwMED2ucv1GTKMgJyaZxiduq9SjuezshAwydn4PV6H2r89u0/0fTlWdgpRFmZWWTU0Bi0uVSZkmOQJX7YPerOK9q3j1zO0TqTGoxb0fjgjRuor69HYkICHE4naMp9S4Po7ZAEGkRRzGGg3LzY2ckdq6tDZlYm7FVV2Lxps94DkxMTGB8fh+u6C47LffR07ELDZw2wWKwTJpbLofD4whJo0AY7PZDfX3O5LA1nPsXYmHuZTuYzmSiveBdv7t+vDSBnNMuVkPG/H9QJO5MpXPGyKDSR1jsjIyOg+azvZ6/Lxtb8rTCv1stYoOFzxGTivlnJRliC+6Bhks+ogVcUFdtpzm2jrb9UMH1RKgaiWNb1YEiW4n8AAAD//0XbgZQAAAAGSURBVAMAl9+p/0LnKFMAAAAASUVORK5CYII=") 11 3, pointer; --os-cursor-frame-hover: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAEXklEQVR4nJxWa0wcVRT+7u7OzO6wFBYT8AE2wA9TQCqgFnw06UJropC2SVtpm0YhVh5SW3/4SEz0l/rLV8WkadpibEmpSquVgolCNCaaWEQFaWTpLq+kFOwvSnfnwc7tuUN3Q5PCLj3J3Z1755zznXvOd+4dF5IUzrnDMIwC8SzL8iXGmJWMnSORgmFozYYevmgaWoTBGhJDPNPaH7oe2ZvInq3s3CgBjw60nTgRHh0NqLMz/9vrmfdmorioGLV7doPDsV5RlMGkASgVWaauPy8p6DIM63EGdrqstBTRhQU8uHatrTM5MQFJknHxz344OKuJMhZinG+RFKuTMXVqWQBd14sZor/QcrqYgjk3cmvhW8r3fXeKjqK5xpyOPdziPTRz0pijHT1FOxqKqTiWRJ4Gbp0LBALpFeXlfGRkRKH0HJQVTykYa2EOVNHYtDjYZlprkBTPOsuy9g8NDTqfqChHYDSwRvggX2tifl2xB9PU39G0cF5TQyNcTifLyckR2xum6K/S68+xjOi6Npabmwenw4lXGptwvuv7fAJ/m169Gd8BId5DP40ff/gRxsbG8FlrKzyq+p9Ldrcigciy8l6K1zv6yaeHEQwGcZj+GXgz+fTFAYiKhyKRsNrR0YEdO3fikZKSBZmKR9HPJQIQOqRbXfZoGd+2fTvaT50StfQuGNqrcQDi2mN9vX2Yn5/H/oaXacq/Y273ZSQppBsgm66GxkbbR19fLyyODfY7ewd65EtC3XdpeBglRElRSEny/IxViGlGKrmFn/4aGEBBYSGISW1EkHobgPLlJoUPYLGHGUMfseN93IWYeuRdzrGRmuMfCvAtSp9x21HBGdc4w1XcpZDtFBf9w+2+salq05TOlqNaRNt3ZXoaeXl5z5mmNiVJ7h9X45xsnqGGOx4KBZGdnS2WIjTqb9EUmb29vdhSVWXTlEf561ilCJtQKGT7EEUmeUj8LKaIsUF/pR+qquJ0e7so/WaqydPJOifdTWRTKSiakpICv7+SmMh+jQPIMo54PCr1wC6IXpicnIIVRTsVPzWRc6FjRfnJ8fEJfHXmDGprawWDyCc/EgdgzB2i4nQfONACb6oXL9XVIRy+kUMN+EYiAGqoQ+Fw+IH6F1+Az+dDc0uL6KPzjHnGxfv4WUTdeNCX4Ss/dux4xi7q5nGqRWFRUT7nWr6po5o5+b+kFrUDshwZnEdzXYrnpGFENgSDlzE7O4tvOjuRnpZ2TZIdr8X8sttzGa7gFvsBixQzKZK9dB98Qc8q7pyeKw4n2y0ajKYSjTk64ivpSu2P6biWGkiS+jsZraMLZwddOBcMAxXCeZXfDzqWkZWVZevNzMzA7fGgu6fnfopRlTgKTOBZSVG+puaaXuoz0ZVZRvzrP3f2LLovdNM5c91e93pTUV1Tg63bttKxwp+kwH5bzseKAIsgWhNdInWkup6mcmyZEvQ3seMoNWTbSl8YCQFicuuzpYgQTOLgSLKfLTcBAAD//7iYiSwAAAAGSURBVAMAm3LykSrUkRgAAAAASUVORK5CYII=") 12 12, pointer; --os-cursor-hand: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAEDklEQVR4nKRWXUwUVxT+ZtxfKgUCKKLE4qQFnwQEK6a1EdsHYklKk6b8LFti0hhSgqVNqSb2xVZbrA8VSdPYBG0bwVSSFkww1QbdFQim9YdarAuUVardZinYiuzuzMhez9zNEkfcZdEvmZl7c+79vnvOPffcEbEAqKrvBUX2t9Jzh54+RfG/zRizRJsjzEdKBFYiKhEYllN3n3d83HCyqwsWswWvvV4Kk8l8y2S25AmC4F2wgKr6X2RBdFFzsdZ3u93YUlyMQCDA7cnJKTjXcw5ma9x+s9nywaM4xEjkiqKsJfLuwy0tizcUrkfumjWoLC+HKIro6OxE477PMTHxL/rPn6dVshoeMtn/HWO+jAd5DIgYm5ntA5cvGT7evRtr8/ORviwdJ050IicnB0vT0pC6ZAkf1vHjDxgaGnpKklYVFhVtLlRkvExhlShkvqgCjGHThYsXeXvP3j1ITEzC4OAgRCHktOZJSKCDPxo2vrQRR775Nk1VZTt1v4oaInLbMvX/Hd7WyPk3IWHOuLzcPPx06hRsNhucDiffJ8KzYXtEgViRk5uDhMRErC8s5H2v16u5vzRsnw0RxS1JVQOlCCKfCSyVfEiJRSAcKlEMJSQLBnV2Q4jcl6HIgTOKIktOpxP/eDwoKSnBE0DQCSiycMbtHpWqq+y4eesmN2iHqaCgAI8JNitA+Z5HKSl9tGsXJ3+nthaTE5Noa2uFx/O3btYzmZm6vrRKQsbKlYgGgyDMJFFKYvruNLKys1Flt3PD2F9j6O3p0Q1u2PGhrn/0WBvmg2gwWIiF/bdpcxFc165hZHiYG+rfex9GoxFPCpFOnAxBbLHZKqlwmfD1oUPcsGLFclRQbmunNhZMT/v5Nz4+XtuBu7MC2stoNO+nwqW+WVYGh8OBkZE/ubGmpobXnVjgGnKBFovnsrK0ZV/SCZDBA4F9Wbe9DharFUcOt2ChGHa5+B6GwirqBUJeWD8hL/y1lEU/nz6NC7/+glgxOjqK/v5+2Kt4ggRJ5LewTXcfqLKvQVbUxpItr+L27UkcbW3lZSAatLuh2v4WUlKT8f3xdmJkB02muLo5HmgwmKxf0EYPHmg6gKmpKezcsZMI/BHJb1y/jppt2zA2dgOfftaona5hikTDg2N0ArQXipEJpdmrV/ubmpsxMHAZW6u3wnHWAZ+Pl3cqZuPo6+tFM9krKyoQkGUcb2+HJEmqICx6gzgCOs5HrexeIFAcFNix3p7ep/fSXfDH1atzxiQmJaGMsu7d+nraP5NbXMRsRmNc38PjIt7JVF1TVCXQRM3y369cwVlK3xlVxbL0dBSsW4fMcNlg7KDRbG14eOXzCoRBtSpfYDOvBMGepz+LDQyCTJNOUknvNpms3ZH+JsK4DwAA//8DO+5jAAAABklEQVQDACRLmNmjaltEAAAAAElFTkSuQmCC") 12 12, grab; --os-cursor-hand-grab: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAADjElEQVR4nNRVW0xUVxRd587cy0AgDDWtVdJMeQntB8WhNeXHppA6/cF+1jDU2lhtTKT2YRTj68tXfBAxJppgfEfCj0ZjjERJUAOEh6KGDxxnBjAZcdAwmsi987rHfa48ZjIwYKIfruTmnLPP3muf/Zg9Ej4wJHxgfPwOzLMpcM7lSCT4I6J6MUysC2Ay7UsYM7lMinKVMRZJZs+SXYZCoRI9GmmWJPbp9Nb8mSRJf5jNlmvv7IDIvwWPtne0t5t37tiJkRE/fl2xAlzX0dTUJO7x17p1qKmp0Uld4xyjjKFVVngtY2lP5uBg7IjH7V3/U0UF7KWlWLhgIa5cuWzcVVYuh++pDz3d3dizZy8Cr14iPz8P5eUVRMifySlpuZS6MaE7Yw04Z47bra2iBti1exes1iz09fUZd1u3b0MgMIqflzmwZUvtpM3SH5bi1Okz88Ph4Eo6HhMyKZ5UtYWC6jn62ii03EAgYMgFubFmZhpfrMy+2I7rzc2orq7GrdZb8Hq9QlwwwSlNkfP0cJB36rrubGm5WVZfX2/q6OjAbChZXIJMqxXfl5UZZ7/fL8gWTNxPpojCWsWBz1b9vhJ3bt+ZluzLnJy4c15uHmzjMuq0tw/V9biHx9RAz3d73Aa5CFd0yOmTJ9HQ0DCpsal2c5yD840XMBumHHA2/8XIc2MrwpVlGe8DMQ7wKj093diqqmasX9hsRhrmgtevVWPNyMgQXC8n5FNdJLH7iwoLQf0L12OXIXI4HHNKg0D/o37DVnAQ172ECBjTe0VaCgoW4VF/P94VLrIpLCoaT610LyECszm1V6zOaifa29owNDiIucLtdqONbERzEHRycnfy4bGKIU09zsHX/rK8EuqYihPURRaLJSm5pmn4zenEJ/Pm4eKlS+I3cFSxpK1PiEBATrH8Q7ny7j9wEAMDA1i7Zg2eDA3NSD5IOn+uXg2fz4dDdXVUWzyWU1I3xuokDDuaknaaol093T3S///9i+HhYVRVVaH4m2IUffU1IpEoXFTQBw8f4vzZs8jOzsbBQ3U0EO06mKlUUZTepA4EwuGxMj3KLgSDmq3+8GE0NjYiMDoap2PNyjIc/71hAxVW8TKJVylKWsJsmXFc02xKDQfVfZSyGnH2eDzo6uw0WvG7JUuQMzE2OD9CadlEcm06nqT/aOOOPg+FtApSLKfJvUyIaN/MGW9RlNQbROxPZv8GAAD//8+I9WAAAAAGSURBVAMA0Xxfkc9Kxu8AAAAASUVORK5CYII=") 12 12, grabbing; } /* ============================================================================= 1. RESET & BASE ============================================================================= */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; cursor: var(--os-cursor-default); background: var(--os-bg); color: var(--os-text); font-family: var(--os-font-sans); overflow: hidden; -webkit-user-select: none; /* Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+ */ user-select: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* A field's text is selectable whatever its ancestors say (Firefox inherits the rule above into inputs). */ input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; } /* Links without an explicit rule otherwise show the UA's native pointer */ a { cursor: var(--os-cursor-pointer, pointer); } /* --- Selection warmth --- */ ::selection { background: color-mix(in srgb, var(--os-c1), transparent 75%); color: var(--os-text); } /* --- Scrollbar warmth (WebKit) --- */ /* Fine pointers only: any ::-webkit-scrollbar rule turns Android WebView's overlay scrollbars into classic ones that reserve their 6px permanently. */ @media (pointer: fine) { ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--os-text-disabled); border-radius: var(--os-radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--os-text-subtle); } } /* ============================================================================= OS COMMON ============================================================================= */ @keyframes statusdot-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .statusdot { display: inline-block; height: 8px; width: 8px; flex-shrink: 0; margin: 0 var(--os-sp-xs); border-radius: var(--os-radius-full); } .statusdot.alive { animation: 3s ease-in-out 0s infinite normal none running statusdot-breathe; } .statusdot.alive:nth-child(2) { animation-delay: -1s; } .statusdot.alive:nth-child(3) { animation-delay: -2s; } .statusdot.c1 { background: var(--os-c1); } .statusdot.c2 { background: var(--os-c2); } .statusdot.c3 { background: var(--os-c3); } .statusdot.c4 { background: var(--os-c4); } .statusdot.c5 { background: var(--os-c5); } .statusdot.c6 { background: var(--os-c6); } .statusdot.c7 { background: var(--os-c7); } .statusdot.c8 { background: var(--os-c8); } /* ============================================================================= ICON HELPERS (using Phosphor-Light) Note: You can also include /lib/fonts/Phosphor-Icons/phosphor-light.css for quick access to all icons. ============================================================================= */ .ph-light { /* use !important to prevent issues with browser extensions that change fonts */ font-family: "Phosphor-Light" !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: inherit; /* Enable Ligatures ================ */ letter-spacing: 0; -webkit-font-feature-settings: "liga"; -moz-font-feature-settings: "liga=1"; -moz-font-feature-settings: "liga"; -ms-font-feature-settings: "liga" 1; font-feature-settings: "liga"; -webkit-font-variant-ligatures: discretionary-ligatures; font-variant-ligatures: discretionary-ligatures; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-xs { font-size: 14px; } .icon-sm { font-size: var(--os-fs-lg); } .icon-md { font-size: var(--os-fs-xl); } .icon-lg { font-size: 24px; } .icon-xl { font-size: 28px; }