/* ===================================================== USERS base — reset, page atmosphere, typography, focus ===================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { height: 100%; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { min-height: 100dvh; background-color: var(--app-page-base); color: var(--app-text-primary); font-family: var(--app-font-body); font-size: var(--text-base); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; } /* Atmospheric background — shared Deep Space backdrop (from dashboard) */ body::before { content: ''; position: fixed; inset: 0; background: var(--app-atmos); pointer-events: none; z-index: 0; } /* Subtle noise texture overlay */ body::after { content: ''; position: fixed; inset: 0; opacity: var(--app-atmos-noise-opacity); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 256px 256px; pointer-events: none; z-index: 0; } body > * { position: relative; z-index: 1; } /* ---------- Typography ---------- */ h1, h2, h3, h4 { line-height: var(--leading-tight); text-wrap: balance; font-weight: 650; letter-spacing: -0.01em; } h1 { font-size: var(--text-xl); } h2 { font-size: var(--text-lg); } h3 { font-size: var(--text-md); } p { text-wrap: pretty; } small { font-size: var(--text-sm); color: var(--app-text-secondary); } code, pre, .mono { font-family: var(--app-font-mono); font-size: 0.92em; } a { color: var(--app-accent-primary); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } img, svg, video, canvas { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } ::selection { background: color-mix(in oklab, var(--app-accent-primary) 35%, transparent); } /* ---------- Focus ---------- */ :focus-visible { outline: 2px solid var(--app-accent-primary); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } /* ---------- Scrollbar ---------- */ @supports (scrollbar-width: thin) { * { scrollbar-width: thin; scrollbar-color: oklch(50% 0.06 263 / 0.6) transparent; } } /* ---------- Utilities ---------- */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .icon { width: 1.25em; height: 1.25em; flex: none; stroke-width: 2; } /* Offline marker — toggled by app.js on */ html.is-offline .hide-offline { display: none !important; } /* ---------- Motion safety ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Cross-document view transitions (Phase 3) — progressive enhancement; Chromium-only today */ @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }