@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* Two chrome themes (light default, dark grey alt) toggled via [data-theme] on . The visualization STAGE is intentionally always dark, like an instrument screen — that's not theme-dependent, it's the canvas's own background drawn in engine.js (#0A0E1A), independent of chrome theme. */ :root, [data-theme="light"] { --bg: #F5F6FA; --surface: #FFFFFF; --surface-2: #EEF0F7; --surface-3: #E4E7F2; --border: #DEE1EE; --text: #1B1E2B; --text-dim: #6B7086; --text-faint: #9297AC; --brand: #6D5EF0; --brand-strong: #5B4CE0; --brand-tint: #EEECFE; --accent-teal: #16A3A3; --good-bg: #E7F8EF; --good-fg: #157F4A; --info-bg: #EAF1FF; --info-fg: #2557C7; --bad-bg: #FDEBEB; --bad-fg: #C23B3B; --shadow: 0 1px 2px rgba(20,22,40,0.04), 0 8px 24px rgba(20,22,40,0.06); } [data-theme="dark"] { --bg: #1B1D22; --surface: #232529; --surface-2: #2A2D33; --surface-3: #34373E; --border: #3A3D45; --text: #ECEDF2; --text-dim: #A6A9B4; --text-faint: #74777F; --brand: #8A7CFF; --brand-strong: #9D91FF; --brand-tint: #2C2A45; --accent-teal: #2FCFC4; --good-bg: #16301F; --good-fg: #56D690; --info-bg: #17233B; --info-fg: #7CAAFF; --bad-bg: #351B1B; --bad-fg: #F08282; --shadow: 0 1px 2px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.35); } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; background: var(--bg); color: var(--text); } body { font-family: 'Plus Jakarta Sans', sans-serif; -webkit-font-smoothing: antialiased; } .f-display { font-family: 'Sora', sans-serif; } .f-mono { font-family: 'JetBrains Mono', monospace; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; } ::-webkit-scrollbar-track { background: transparent; } a { color: inherit; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } input[type="range"] { accent-color: var(--brand); width: 100%; } select, input[type="text"], textarea { font-family: 'JetBrains Mono', monospace; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 6px 10px; } .pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border); } .pill-brand { background: var(--brand-tint); color: var(--brand-strong); border-color: transparent; } .pill-good { background: var(--good-bg); color: var(--good-fg); border-color: transparent; } .pill-info { background: var(--info-bg); color: var(--info-fg); border-color: transparent; } .pill-bad { background: var(--bad-bg); color: var(--bad-fg); border-color: transparent; } .btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 10px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); transition: background 0.15s ease, transform 0.1s ease; } .btn:hover { background: var(--surface-3); } .btn:active { transform: scale(0.97); } .btn-icon { padding: 8px; } .btn-brand { background: var(--brand); color: #fff; border-color: transparent; } .btn-brand:hover { background: var(--brand-strong); } .btn.is-active { background: var(--brand); color: #fff; border-color: transparent; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); }