Spaces:
Sleeping
Sleeping
| @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 <html>. 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); | |
| } | |