/* Design tokens, reset, and typography. Theme is switched via [data-theme] on ; both palettes share the same token names. */ :root { --font-ui: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace; --radius: 8px; --radius-sm: 6px; --ease: cubic-bezier(0.2, 0.7, 0.2, 1); } body[data-theme="dark"] { color-scheme: dark; --accent: #5b8cff; --accent-strong: #3f74f5; --accent-soft: rgba(91, 140, 255, 0.16); --accent-text: #cfe0ff; --bg: #131317; --surface: #1b1b21; --surface-2: #212129; --surface-3: #292932; --surface-hover: #2c2c36; --workspace: #0f0f12; --line: #2f2f3a; --line-soft: #26262f; --line-strong: #3c3c49; --text: #ecedf2; --text-dim: #a6a8b6; --text-faint: #71727f; --danger: #ff6b63; --shadow: 0 12px 34px rgba(0, 0, 0, 0.46); --shadow-pop: 0 16px 40px rgba(0, 0, 0, 0.55); } body[data-theme="light"] { color-scheme: light; --accent: #0d65e8; --accent-strong: #0d5dcc; --accent-soft: #eaf2ff; --accent-text: #0d5dcc; --bg: #ffffff; --surface: #ffffff; --surface-2: #f7f7f9; --surface-3: #eeeef2; --surface-hover: #f1f2f5; --workspace: #ededef; --line: #e0e1e6; --line-soft: #ececef; --line-strong: #d3d5dc; --text: #161922; --text-dim: #5c6371; --text-faint: #8c93a1; --danger: #c23127; --shadow: 0 12px 30px rgba(20, 30, 50, 0.14); --shadow-pop: 0 16px 38px rgba(20, 30, 50, 0.2); } * { box-sizing: border-box; } /* The hidden attribute must win even over component rules that set display (grid/flex). */ [hidden] { display: none !important; } html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--font-ui); font-size: 13px; font-synthesis: none; -webkit-font-smoothing: antialiased; } button, input, select { font: inherit; color: inherit; } button { margin: 0; cursor: pointer; } button:disabled, input:disabled, select:disabled { cursor: not-allowed; opacity: 0.4; } :focus-visible { outline: 2px solid color-mix(in srgb, var(--accent), transparent 35%); outline-offset: 1px; } ::selection { background: color-mix(in srgb, var(--accent), transparent 65%); } /* Hide number spinners for a tidy, tool-like look (values are edited directly or via sliders). */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; appearance: textfield; } /* Thin, unobtrusive scrollbars that match the surface. */ * { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: var(--line-strong); background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: padding-box; } .material-symbols-rounded { font-size: 20px; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20; line-height: 1; user-select: none; } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; } }