/* * myspice — theme system + tweakable token overrides * * Selectors switch on these attributes set on : * data-theme editorial | blueprint | phosphor | newsprint | labnotebook | brutalist * data-symbols iec | ansi * data-fontset system | plex | jetbrains | grotesk | serif | handwritten * data-viz standard | filled | glow * data-grid-style dots | lines | crosses | squares | off * data-grid-stride 1 | 2 | 4 * data-grid-size s | m | l | xl * data-grid-color theme | subtle | bold | warm | cool | accent * data-label-size xs | s | m | l | xl * * All tokens cascade through CSS custom properties; setting a different * combination on updates the entire app live without a redraw. */ :root { --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, "Helvetica Neue", sans-serif; --font-serif: Georgia, "Source Serif 4", "Times New Roman", serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --font-label: var(--font-serif); --font-label-style: italic; --canvas-bg: #ffffff; --canvas-bg-image: none; --canvas-bg-size: auto; --canvas-border-color: var(--border); --canvas-border-width: 1px; --canvas-radius: 4px; --chrome-bg: #ffffff; --panel-bg: var(--panel); --comp-fill: #ffffff; --comp-stroke-width: 1.8; --wire-stroke-width: 2; --filter-canvas: none; --filter-comp: none; --radius-btn: 6px; --btn-border-width: 1px; --header-tracking: -0.015em; --wordmark-color: #0d9488; --shadow-primary: 0 1px 2px rgba(13,148,136,.25); --label-current-weight: 400; } /* Apply variable font surfaces */ html, body { font-family: var(--font-sans); } .label-comp, .label-current, .label-node { font-family: var(--font-label); font-style: var(--font-label-style); } .meter-letter { font-family: var(--font-label); } .serif-italic { font-family: var(--font-label); font-style: var(--font-label-style); } kbd, .panel td.num, .panel .summary .v, .popup .slider-value, .time-scrubber .t-label, .time-scrubber .t-max-label, .problem-panel .p-expected, .footer-hint kbd { font-family: var(--font-mono); } header h1 { letter-spacing: var(--header-tracking); } header h1 .wordmark-mark path, header h1 .wordmark-mark line { stroke: var(--wordmark-color); } header button.primary { box-shadow: var(--shadow-primary); } /* Canvas/chrome wiring */ header, .toolbar, .footer-hint { background: var(--chrome-bg); } .modal-card { background: var(--chrome-bg); } .modal-card header { background: var(--panel-bg); } .popup { background: var(--chrome-bg); } .panel { background: var(--panel-bg); } .canvas-frame { background: var(--canvas-bg); background-image: var(--canvas-bg-image); background-size: var(--canvas-bg-size); } svg#canvas { background: var(--canvas-bg); background-image: var(--canvas-bg-image); background-size: var(--canvas-bg-size); border-color: var(--canvas-border-color); border-width: var(--canvas-border-width); border-radius: var(--canvas-radius); filter: var(--filter-canvas); } svg#canvas .ink, svg#canvas .wire, svg#canvas .ghost, svg#canvas .ground-symbol, svg#canvas .meter-dial { filter: var(--filter-comp); } .meter-dial { fill: var(--comp-fill) !important; } .ink, .ghost { stroke-width: var(--comp-stroke-width); } .wire { stroke-width: var(--wire-stroke-width); } /* Force header button bg/color across themes — scoped to top-level header buttons only (not children like mode-toggle / view-tabs / popup) so their active states remain visible. */ header > button, header .actions > button { background: var(--chrome-bg) !important; color: var(--ink); } header > button:hover:not(:disabled), header .actions > button:hover:not(:disabled) { background: color-mix(in srgb, var(--chrome-bg) 80%, var(--ink) 8%) !important; border-color: var(--accent); } header > button.primary, header .actions > button.primary { background: var(--accent) !important; color: var(--bg); } header > button.primary:hover, header .actions > button.primary:hover { background: var(--accent-strong) !important; } header button { background: var(--chrome-bg); } header button.primary { background: var(--accent); } .mode-toggle .mode-btn { background: var(--chrome-bg); color: var(--ink); } .mode-toggle .mode-btn.active { background: var(--ink); color: var(--bg); } .view-tabs .tab { background: var(--chrome-bg); } .view-tabs .tab.active { background: var(--ink); color: var(--bg); } .tool-btn { background: var(--chrome-bg); color: var(--ink); } .tool-btn.active { background: var(--accent); color: var(--bg); } .modal-card .search-bar { background: var(--chrome-bg); } .modal-card .search-bar input { background: var(--chrome-bg); color: var(--ink); } .filter-chip { background: var(--chrome-bg); color: var(--muted); } .filter-chip.active { background: var(--accent); color: var(--bg); border-color: var(--accent); } .popup input { background: var(--chrome-bg); color: var(--ink); } .popup button { background: var(--chrome-bg); color: var(--ink); } .popup button.primary { background: var(--accent); color: var(--bg); } .plot-canvas, .phasor-canvas { background: var(--canvas-bg); border-color: var(--canvas-border-color); } .time-scrubber { background: var(--panel-bg); } .time-scrubber input[type=text] { background: var(--chrome-bg); color: var(--ink); border-color: var(--border); } .time-scrubber input[type=range] { background: var(--border); } /* ============================================================ BLUEPRINT — engineering drawing on navy ============================================================ */ :root[data-theme="blueprint"] { --ink: #e6f1ff; --muted: #7aa3c8; --bg: #0c2138; --panel: #0a1a2d; --border: #1f3f63; --dot: #1a3556; --accent: #5cd7ff; --accent-soft: #14365a; --accent-strong: #9eeaff; --current: #ffd166; --plus: #ff8fa3; --minus: #82c0ff; --ghost: #4f7aaa; --success: #5cd7ff; --success-soft: #14365a; --success-border: #1f4a76; --error-soft: #3a1c2b; --error-border: #6c2f4a; --canvas-bg: #0c2138; --canvas-bg-image: linear-gradient(rgba(120,180,230,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(120,180,230,.10) 1px, transparent 1px); --canvas-bg-size: 20px 20px; --canvas-border-color: #244e7d; --canvas-radius: 2px; --chrome-bg: #0a1a2d; --panel-bg: #081424; --comp-fill: #0c2138; --comp-stroke-width: 1.6; --wire-stroke-width: 1.8; --wordmark-color: #5cd7ff; --shadow-primary: 0 0 0 1px rgba(92,215,255,.35); background: #0c2138; } :root[data-theme="blueprint"] .grid-dot { display: none; } :root[data-theme="blueprint"] header { border-bottom-color: #244e7d; } :root[data-theme="blueprint"] .toolbar { border-bottom-color: #244e7d; background: #0a1a2d; } :root[data-theme="blueprint"] .footer-hint { background: #081424; border-top-color: #244e7d; } :root[data-theme="blueprint"] .panel { border-left-color: #244e7d; } :root[data-theme="blueprint"] .canvas-frame { background: radial-gradient(at 50% 0%, #0e2a44 0%, #0a1a2d 60%); } :root[data-theme="blueprint"] header button { border-color: #244e7d; } :root[data-theme="blueprint"] header button.primary { background: #5cd7ff; color: #07182a; border-color: #5cd7ff; } :root[data-theme="blueprint"] header button.primary:hover { background: #9eeaff; } :root[data-theme="blueprint"] .tool-btn { border-color: #244e7d; } :root[data-theme="blueprint"] .tool-btn:hover:not(.active) { background: #14365a; border-color: #5cd7ff; } :root[data-theme="blueprint"] .tool-btn.active { background: #5cd7ff; color: #07182a; } :root[data-theme="blueprint"] .mode-toggle { border-color: #244e7d; } :root[data-theme="blueprint"] .mode-toggle .mode-btn { border-right-color: #244e7d; } :root[data-theme="blueprint"] .mode-toggle .mode-btn.active { background: #5cd7ff; color: #07182a; } :root[data-theme="blueprint"] .view-tabs { border-color: #244e7d; } :root[data-theme="blueprint"] .view-tabs .tab { border-right-color: #244e7d; } :root[data-theme="blueprint"] .view-tabs .tab.active { background: #5cd7ff; color: #07182a; } :root[data-theme="blueprint"] .filter-chip { border-color: #244e7d; } :root[data-theme="blueprint"] .filter-chip.active { color: #07182a; } :root[data-theme="blueprint"] .plot-canvas, :root[data-theme="blueprint"] .phasor-canvas { background: #0c2138; border-color: #244e7d; } /* ============================================================ PHOSPHOR — CRT oscilloscope, glowing green on black ============================================================ */ :root[data-theme="phosphor"] { --ink: #4cffa0; --muted: #5a8a72; --bg: #050a07; --panel: #0a1310; --border: #1a3a28; --dot: #163422; --accent: #ffb84d; --accent-soft: #2a1f0a; --accent-strong: #ffd17a; --current: #ffea4d; --plus: #ff8866; --minus: #66ddff; --ghost: #2d5a40; --success: #4cffa0; --success-soft: #0f2418; --success-border: #1f4a30; --error-soft: #2a0a0e; --error-border: #6a1a26; --canvas-bg: #050a07; --canvas-bg-image: radial-gradient(rgba(76,255,160,.12) 1px, transparent 1.5px); --canvas-bg-size: 12px 12px; --canvas-border-color: #1f4a30; --canvas-radius: 12px; --canvas-border-width: 2px; --chrome-bg: #0a1310; --panel-bg: #060c09; --comp-fill: #050a07; --comp-stroke-width: 1.6; --wire-stroke-width: 1.8; --filter-comp: drop-shadow(0 0 2px rgba(76,255,160,.85)) drop-shadow(0 0 6px rgba(76,255,160,.35)); --font-sans: 'JetBrains Mono', ui-monospace, monospace; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --font-label: 'JetBrains Mono', ui-monospace, monospace; --font-label-style: normal; --wordmark-color: #4cffa0; --header-tracking: 0.04em; --shadow-primary: 0 0 12px rgba(76,255,160,.45); background: #050a07; } :root[data-theme="phosphor"] body { background: #050a07; } :root[data-theme="phosphor"] header { border-bottom-color: #1a3a28; } :root[data-theme="phosphor"] .toolbar { border-bottom-color: #1a3a28; background: #0a1310; } :root[data-theme="phosphor"] .footer-hint { background: #060c09; border-top-color: #1a3a28; color: #5a8a72; } :root[data-theme="phosphor"] .panel { border-left-color: #1a3a28; } :root[data-theme="phosphor"] header h1 { text-transform: uppercase; letter-spacing: 0.14em; } :root[data-theme="phosphor"] header h1 .wordmark-mark { filter: drop-shadow(0 0 4px rgba(76,255,160,.7)); } :root[data-theme="phosphor"] header button { border-color: #1f4a30; color: #4cffa0; } :root[data-theme="phosphor"] header button:hover:not(:disabled) { background: #0f2418; border-color: #4cffa0; } :root[data-theme="phosphor"] header button.primary { background: transparent; color: #ffea4d; border-color: #ffea4d; text-shadow: 0 0 6px rgba(255,234,77,.6); font-weight: 700; } :root[data-theme="phosphor"] header button.primary:hover { background: rgba(255,234,77,.12); } :root[data-theme="phosphor"] .mode-toggle, :root[data-theme="phosphor"] .view-tabs, :root[data-theme="phosphor"] .filter-chip, :root[data-theme="phosphor"] .tool-btn { border-color: #1f4a30; } :root[data-theme="phosphor"] .mode-toggle .mode-btn { border-right-color: #1f4a30; color: #4cffa0; } :root[data-theme="phosphor"] .mode-toggle .mode-btn.active { background: #4cffa0; color: #050a07; } :root[data-theme="phosphor"] .view-tabs .tab { border-right-color: #1f4a30; color: #5a8a72; } :root[data-theme="phosphor"] .view-tabs .tab.active { background: #4cffa0; color: #050a07; } :root[data-theme="phosphor"] .tool-btn { color: #4cffa0; } :root[data-theme="phosphor"] .tool-btn:hover:not(.active) { background: #0f2418; border-color: #4cffa0; } :root[data-theme="phosphor"] .tool-btn.active { background: #4cffa0; color: #050a07; } :root[data-theme="phosphor"] .canvas-frame { background: radial-gradient(ellipse at center, #0a1812 0%, #050a07 70%); } :root[data-theme="phosphor"] svg#canvas { box-shadow: inset 0 0 60px rgba(76,255,160,.10), inset 0 0 8px rgba(76,255,160,.20), 0 0 24px rgba(76,255,160,.18); } :root[data-theme="phosphor"] .panel { color: #4cffa0; } :root[data-theme="phosphor"] .panel th { color: #5a8a72; } :root[data-theme="phosphor"] .plot-canvas, :root[data-theme="phosphor"] .phasor-canvas { background: #050a07; border-color: #1f4a30; filter: drop-shadow(0 0 4px rgba(76,255,160,.35)); } :root[data-theme="phosphor"] .label-comp, :root[data-theme="phosphor"] .label-current, :root[data-theme="phosphor"] .label-node, :root[data-theme="phosphor"] .meter-letter { text-shadow: 0 0 4px rgba(76,255,160,.6); } :root[data-theme="phosphor"] kbd { background: #0f2418; color: #4cffa0; border-color: #1f4a30; } /* ============================================================ NEWSPRINT — sepia textbook ============================================================ */ :root[data-theme="newsprint"] { --ink: #3a2818; --muted: #8a6a4a; --bg: #f6efe1; --panel: #efe5d2; --border: #d4c3a3; --dot: #c9b48d; --accent: #9b3a1f; --accent-soft: #f3e4d4; --accent-strong: #7a2912; --current: #2d5a3d; --plus: #9b3a1f; --minus: #1f3a6b; --ghost: #bba88a; --success: #2d5a3d; --success-soft: #e8e0c8; --success-border: #c5b285; --error-soft: #f3d8c8; --error-border: #c89066; --canvas-bg: #faf3e5; --canvas-border-color: #c9b48d; --canvas-radius: 1px; --chrome-bg: #f6efe1; --panel-bg: #efe5d2; --comp-fill: #faf3e5; --comp-stroke-width: 1.9; --wire-stroke-width: 2; --font-sans: 'Source Serif 4', Georgia, serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; --font-label: 'Source Serif 4', Georgia, serif; --font-label-style: italic; --wordmark-color: #3a2818; --shadow-primary: 0 1px 0 #3a2818; background: #f6efe1; } :root[data-theme="newsprint"] body { background: #f6efe1; } :root[data-theme="newsprint"] header { border-bottom: 3px double #3a2818; padding: 4px 18px 6px; } :root[data-theme="newsprint"] header h1 { font-weight: 700; font-size: 17px; font-family: 'IBM Plex Serif', Georgia, serif; } :root[data-theme="newsprint"] header h1 .muted { font-style: italic; } :root[data-theme="newsprint"] .toolbar { border-bottom: 1px solid #3a2818; background: #f6efe1; } :root[data-theme="newsprint"] .footer-hint { background: #efe5d2; border-top-color: #3a2818; font-style: italic; } :root[data-theme="newsprint"] header button { border-color: #3a2818; border-radius: 0; background: #faf3e5; } :root[data-theme="newsprint"] header button.primary { background: #3a2818; color: #faf3e5; border-color: #3a2818; } :root[data-theme="newsprint"] header button.primary:hover { background: #9b3a1f; border-color: #9b3a1f; } :root[data-theme="newsprint"] .tool-btn { border-color: #3a2818; border-radius: 0; } :root[data-theme="newsprint"] .tool-btn:hover:not(.active) { background: #efe5d2; } :root[data-theme="newsprint"] .tool-btn.active { background: #3a2818; color: #faf3e5; } :root[data-theme="newsprint"] .mode-toggle, :root[data-theme="newsprint"] .view-tabs { border-color: #3a2818; border-radius: 0; } :root[data-theme="newsprint"] .mode-toggle .mode-btn { border-right-color: #3a2818; } :root[data-theme="newsprint"] .mode-toggle .mode-btn.active { background: #3a2818; } :root[data-theme="newsprint"] .view-tabs .tab.active { background: #3a2818; } :root[data-theme="newsprint"] .filter-chip { border-color: #3a2818; } :root[data-theme="newsprint"] .panel h2 { font-family: 'IBM Plex Serif', serif; border-bottom: 2px solid #3a2818; padding-bottom: 4px; letter-spacing: 0.08em; } :root[data-theme="newsprint"] .panel table th { font-family: 'Source Serif 4', serif; font-style: italic; } :root[data-theme="newsprint"] .canvas-frame { background: #f6efe1; background-image: repeating-linear-gradient(0deg, transparent 0 4px, rgba(58,40,24,.015) 4px 5px); } :root[data-theme="newsprint"] .plot-canvas, :root[data-theme="newsprint"] .phasor-canvas { background: #faf3e5; border-color: #3a2818; } /* ============================================================ LAB NOTEBOOK — graph paper with handwritten labels ============================================================ */ :root[data-theme="labnotebook"] { --ink: #2a3340; --muted: #7a8694; --bg: #fbf9f0; --panel: #f5f1de; --border: #c8d0bc; --dot: #b8c9b0; --accent: #d97757; --accent-soft: #fbe9de; --accent-strong: #b85f3d; --current: #6b9b3a; --plus: #c0392b; --minus: #2c5a8a; --ghost: #b8bfa8; --success: #6b9b3a; --success-soft: #ecf3da; --success-border: #a8c285; --error-soft: #fadcd5; --error-border: #e09b8a; --canvas-bg: #fbf9f0; --canvas-bg-image: linear-gradient(rgba(155,180,200,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(155,180,200,.35) 1px, transparent 1px), linear-gradient(rgba(155,180,200,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(155,180,200,.18) 1px, transparent 1px); --canvas-bg-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; --canvas-border-color: #c8d0bc; --canvas-radius: 2px; --chrome-bg: #fbf9f0; --panel-bg: #f5f1de; --comp-fill: #fbf9f0; --comp-stroke-width: 2; --wire-stroke-width: 2.4; --font-sans: 'Source Serif 4', Georgia, serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --font-label: 'Caveat', 'Comic Sans MS', cursive; --font-label-style: normal; --wordmark-color: #2a3340; background: #fbf9f0; } :root[data-theme="labnotebook"] body { background: #fbf9f0; } :root[data-theme="labnotebook"] .grid-dot { display: none; } :root[data-theme="labnotebook"] .canvas-frame { background: #fbf9f0; background-image: linear-gradient(rgba(155,180,200,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(155,180,200,.35) 1px, transparent 1px), linear-gradient(rgba(155,180,200,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(155,180,200,.15) 1px, transparent 1px); background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; } :root[data-theme="labnotebook"] header { border-bottom: 2px solid #2a3340; background: #fbf9f0; } :root[data-theme="labnotebook"] header h1 { font-family: 'Caveat', cursive; font-size: 22px; font-weight: 700; } :root[data-theme="labnotebook"] header h1 .muted { font-family: 'Caveat', cursive; font-size: 16px; } :root[data-theme="labnotebook"] header button { font-family: 'Source Serif 4', serif; border-color: #2a3340; background: #fbf9f0; } :root[data-theme="labnotebook"] header button.primary { background: #d97757; border-color: #d97757; color: #fbf9f0; } :root[data-theme="labnotebook"] .toolbar { background: #fbf9f0; border-bottom-color: #c8d0bc; } :root[data-theme="labnotebook"] .footer-hint { background: #f5f1de; font-style: italic; } :root[data-theme="labnotebook"] .label-comp, :root[data-theme="labnotebook"] .label-current, :root[data-theme="labnotebook"] .label-node { font-size: 14px; font-weight: 500; } :root[data-theme="labnotebook"] svg#canvas .ink { stroke-linecap: round; stroke-linejoin: round; filter: url(#sketch-rough); } :root[data-theme="labnotebook"] svg#canvas .wire { stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.8; } :root[data-theme="labnotebook"] .panel h2 { font-family: 'Caveat', cursive; font-size: 18px; } :root[data-theme="labnotebook"] .panel { color: #2a3340; } :root[data-theme="labnotebook"] .tool-btn { font-family: 'Source Serif 4', serif; border-color: #c8d0bc; } :root[data-theme="labnotebook"] .tool-btn.active { background: #d97757; color: #fbf9f0; } /* ============================================================ BRUTALIST — heavy black borders, bright accents ============================================================ */ :root[data-theme="brutalist"] { --ink: #0a0a0a; --muted: #4a4a4a; --bg: #f5f5f0; --panel: #ffffff; --border: #0a0a0a; --dot: #c0c0bc; --accent: #ff2e6c; --accent-soft: #ffe6ee; --accent-strong: #d11f55; --current: #0a0a0a; --plus: #ff2e6c; --minus: #2563eb; --ghost: #a0a0a0; --success: #00b864; --success-soft: #d9ffec; --success-border: #0a0a0a; --error-soft: #ffe1e1; --error-border: #0a0a0a; --canvas-bg: #ffffff; --canvas-border-color: #0a0a0a; --canvas-border-width: 3px; --canvas-radius: 0; --chrome-bg: #f5f5f0; --panel-bg: #ffe96b; --comp-fill: #ffffff; --comp-stroke-width: 2.6; --wire-stroke-width: 3; --font-sans: 'Space Grotesk', system-ui, sans-serif; --font-mono: 'Space Mono', ui-monospace, monospace; --font-label: 'Space Mono', ui-monospace, monospace; --font-label-style: normal; --wordmark-color: #0a0a0a; --shadow-primary: 4px 4px 0 #0a0a0a; --radius-btn: 0; --header-tracking: -0.02em; background: #f5f5f0; } :root[data-theme="brutalist"] body { background: #f5f5f0; } :root[data-theme="brutalist"] header { border-bottom: 3px solid #0a0a0a; background: #f5f5f0; } :root[data-theme="brutalist"] header h1 { font-weight: 700; font-size: 18px; letter-spacing: -0.02em; } :root[data-theme="brutalist"] header h1 .muted { font-weight: 500; } :root[data-theme="brutalist"] .toolbar { border-bottom: 3px solid #0a0a0a; background: #f5f5f0; } :root[data-theme="brutalist"] .footer-hint { background: #0a0a0a; color: #f5f5f0; border-top: 3px solid #0a0a0a; padding: 8px 18px; font-weight: 600; } :root[data-theme="brutalist"] header button { border: 2px solid #0a0a0a; border-radius: 0; font-weight: 600; background: #ffffff; box-shadow: 3px 3px 0 #0a0a0a; transform: translate(-1px,-1px); } :root[data-theme="brutalist"] header button:hover:not(:disabled) { transform: translate(0,0); box-shadow: 1px 1px 0 #0a0a0a; } :root[data-theme="brutalist"] header button.primary { background: #ff2e6c; color: #ffffff; border: 2px solid #0a0a0a; } :root[data-theme="brutalist"] .tool-btn { border: 2px solid #0a0a0a; border-radius: 0; background: #ffffff; } :root[data-theme="brutalist"] .tool-btn.active { background: #ff2e6c; color: #ffffff; } :root[data-theme="brutalist"] .mode-toggle { border: 2px solid #0a0a0a; border-radius: 0; } :root[data-theme="brutalist"] .mode-toggle .mode-btn { border-right: 2px solid #0a0a0a; } :root[data-theme="brutalist"] .mode-toggle .mode-btn.active { background: #0a0a0a; color: #ffe96b; } :root[data-theme="brutalist"] .view-tabs { border: 2px solid #0a0a0a; border-radius: 0; } :root[data-theme="brutalist"] .view-tabs .tab { border-right: 2px solid #0a0a0a; } :root[data-theme="brutalist"] .view-tabs .tab.active { background: #0a0a0a; color: #ffe96b; } :root[data-theme="brutalist"] .filter-chip { border: 2px solid #0a0a0a; border-radius: 0; font-weight: 600; } :root[data-theme="brutalist"] .filter-chip.active { background: #0a0a0a; color: #ffe96b; } :root[data-theme="brutalist"] .panel h2 { background: #0a0a0a; color: #ffe96b; padding: 6px 8px; margin: 0 -16px 12px; letter-spacing: 0.1em; font-weight: 700; } :root[data-theme="brutalist"] .panel { border-left: 3px solid #0a0a0a; color: #0a0a0a; } :root[data-theme="brutalist"] .panel table th { border-bottom: 2px solid #0a0a0a; font-weight: 600; } :root[data-theme="brutalist"] .panel .summary { border-top: 2px dashed #0a0a0a; } :root[data-theme="brutalist"] .panel td.num { font-weight: 700; } :root[data-theme="brutalist"] .plot-canvas, :root[data-theme="brutalist"] .phasor-canvas { background: #ffffff; border: 3px solid #0a0a0a; border-radius: 0; } /* ============================================================ SYMBOL STYLE: ANSI variants (zigzag resistor, etc.) The JS reads data-symbols to render the right path. ============================================================ */ /* ============================================================ FONT SETS (independent of theme) ============================================================ */ :root[data-fontset="plex"] { --font-sans: 'IBM Plex Sans', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; --font-label: 'IBM Plex Serif', Georgia, serif; --font-label-style: italic; } :root[data-fontset="jetbrains"] { --font-sans: 'JetBrains Mono', ui-monospace, monospace; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --font-label: 'JetBrains Mono', ui-monospace, monospace; --font-label-style: normal; } :root[data-fontset="grotesk"] { --font-sans: 'Space Grotesk', system-ui, sans-serif; --font-mono: 'Space Mono', ui-monospace, monospace; --font-label: 'Space Mono', ui-monospace, monospace; --font-label-style: normal; } :root[data-fontset="serif"] { --font-sans: 'Source Serif 4', Georgia, serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --font-label: 'Source Serif 4', Georgia, serif; --font-label-style: italic; } :root[data-fontset="handwritten"] { --font-sans: 'Source Serif 4', Georgia, serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --font-label: 'Caveat', cursive; --font-label-style: normal; } /* ============================================================ GRID COLOR OVERRIDES (independent of theme) ============================================================ */ :root[data-grid-color="subtle"] { --dot: color-mix(in srgb, var(--ink) 8%, transparent); } :root[data-grid-color="bold"] { --dot: color-mix(in srgb, var(--ink) 28%, transparent); } :root[data-grid-color="accent"] { --dot: color-mix(in srgb, var(--accent) 50%, transparent); } :root[data-grid-color="warm"] { --dot: oklch(0.75 0.10 60); } :root[data-grid-color="cool"] { --dot: oklch(0.72 0.10 235); } /* ============================================================ LABEL FONT SIZE (canvas readouts: ΔV, I, V, P, etc.) ============================================================ */ :root { --label-size: 11px; --label-size-node: 10px; } :root[data-label-size="xs"] { --label-size: 9px; --label-size-node: 8px; } :root[data-label-size="s"] { --label-size: 10px; --label-size-node: 9px; } :root[data-label-size="m"] { --label-size: 11px; --label-size-node: 10px; } :root[data-label-size="l"] { --label-size: 13px; --label-size-node: 12px; } :root[data-label-size="xl"] { --label-size: 16px; --label-size-node: 14px; } .label-comp, .label-current { font-size: var(--label-size) !important; } .label-node { font-size: var(--label-size-node) !important; } .meter-letter { font-size: var(--label-size) !important; }