@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../vendor/fonts/IBMPlexSans-400.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../vendor/fonts/IBMPlexSans-500.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../vendor/fonts/IBMPlexSans-600.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../vendor/fonts/IBMPlexSans-700.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../vendor/fonts/IBMPlexMono-400.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../vendor/fonts/IBMPlexMono-500.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('../vendor/fonts/IBMPlexMono-600.woff2') format('woff2'); } :root { --bg: #0b0c0d; --sidebar-bg: #0e0f12; --surface: #131417; --surface-soft: #16171b; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.16); --text: #eef0f2; --text-muted: rgba(238, 240, 242, 0.62); --text-faint: rgba(238, 240, 242, 0.45); --text-ghost: rgba(238, 240, 242, 0.3); --overlay-2: rgba(255, 255, 255, 0.02); --overlay-3: rgba(255, 255, 255, 0.03); --overlay-4: rgba(255, 255, 255, 0.04); --overlay-5: rgba(255, 255, 255, 0.05); --overlay-6: rgba(255, 255, 255, 0.06); --overlay-8: rgba(255, 255, 255, 0.08); --overlay-9: rgba(255, 255, 255, 0.09); --overlay-12: rgba(255, 255, 255, 0.12); --overlay-14: rgba(255, 255, 255, 0.14); --overlay-16: rgba(255, 255, 255, 0.16); --overlay-18: rgba(255, 255, 255, 0.18); --overlay-28: rgba(255, 255, 255, 0.28); --accent-blue: #4c8dff; --accent-blue-soft: rgba(76, 141, 255, 0.14); --accent-cyan: #22d3ee; --accent-cyan-soft: rgba(34, 211, 238, 0.14); --warning: #f5a623; --warning-soft: rgba(245, 166, 35, 0.14); --danger: #f2718a; --danger-soft: rgba(242, 113, 138, 0.14); --positive: var(--accent-cyan); --positive-soft: var(--accent-cyan-soft); --negative: var(--danger); --negative-soft: var(--danger-soft); --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --sidebar-width: 230px; --sidebar-width-collapsed: 72px; --header-height: 62px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; } /* Light theme - toggled via data-theme="light" on . Neutral surfaces, text and translucent interaction layers switch together; semantic accent colours remain stable across both themes. */ :root[data-theme="light"] { --bg: #f2f3f5; --sidebar-bg: #ffffff; --surface: #ffffff; --surface-soft: #f7f8fa; --border: rgba(15, 23, 42, 0.09); --border-strong: rgba(15, 23, 42, 0.18); --text: #14161a; --text-muted: rgba(20, 22, 26, 0.62); --text-faint: rgba(20, 22, 26, 0.45); --text-ghost: rgba(20, 22, 26, 0.32); --overlay-2: rgba(15, 23, 42, 0.02); --overlay-3: rgba(15, 23, 42, 0.03); --overlay-4: rgba(15, 23, 42, 0.04); --overlay-5: rgba(15, 23, 42, 0.05); --overlay-6: rgba(15, 23, 42, 0.06); --overlay-8: rgba(15, 23, 42, 0.08); --overlay-9: rgba(15, 23, 42, 0.09); --overlay-12: rgba(15, 23, 42, 0.12); --overlay-14: rgba(15, 23, 42, 0.14); --overlay-16: rgba(15, 23, 42, 0.16); --overlay-18: rgba(15, 23, 42, 0.18); --overlay-28: rgba(15, 23, 42, 0.28); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; } a { color: var(--accent-blue); text-decoration: none; } a:hover { color: var(--accent-cyan); } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: var(--overlay-14); border-radius: 4px; } ::-webkit-scrollbar-track { background: transparent; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .pks-icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; } .pks-icon-span { display: inline-flex; }