@import url("/vendor/fonts-lane.css"); /* SevIQ design tokens — "field journal" edition. Dark (default): warm charcoal ground, bone ink, gilt accent, vermillion seal. Light: ivory paper, ink, vermillion leads. Toggle via [data-theme="light"] on . */ :root { color-scheme: dark; --bg: #14110d; --panel: #1d1812; --panel-soft: rgba(236, 229, 216, 0.055); --border: rgba(236, 229, 216, 0.15); --border-strong: rgba(236, 229, 216, 0.32); --text: #ece5d8; --muted: rgba(236, 229, 216, 0.70); --faint: rgba(236, 229, 216, 0.48); --accent: #d9a441; --accent-soft: rgba(217, 164, 65, 0.12); --accent-border: rgba(217, 164, 65, 0.45); --verm: #c9502e; --warn: #e0b35c; --ok: #8ab86f; --wave: #ece5d8; --display: "Newsreader", Georgia, "Times New Roman", serif; --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --mono: "JetBrains Mono", "IBM Plex Mono", Consolas, "SFMono-Regular", Menlo, monospace; /* Legacy aliases kept for chapter pages. */ --seviq-font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; --seviq-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* Diagram ink set — bone/gilt/vermillion/ok channels on the warm ground. */ --viz-ink: var(--text); --viz-muted: var(--muted); --viz-line: rgba(236, 229, 216, 0.84); --viz-panel: rgba(20, 17, 13, 0.46); --viz-panel-strong: rgba(29, 24, 18, 0.92); --viz-blue: var(--accent); --viz-cyan: var(--verm); --viz-green: var(--ok); --viz-red: var(--verm); --viz-amber: var(--warn); --viz-accent-flow: rgba(217, 164, 65, 0.32); --viz-ok-flow: rgba(138, 184, 111, 0.32); --viz-verm-flow: rgba(201, 80, 46, 0.24); } [data-theme="light"] { color-scheme: light; --bg: #f2ede3; --panel: #faf7ee; --panel-soft: rgba(26, 23, 20, 0.045); --border: rgba(26, 23, 20, 0.16); --border-strong: rgba(26, 23, 20, 0.34); --text: #1a1714; --muted: rgba(26, 23, 20, 0.72); --faint: rgba(26, 23, 20, 0.52); --accent: #b02e1b; --accent-soft: rgba(176, 46, 27, 0.09); --accent-border: rgba(176, 46, 27, 0.42); --verm: #b02e1b; --warn: #9a6a12; --ok: #4e7d3a; --wave: #1a1714; --viz-line: rgba(26, 23, 20, 0.84); --viz-panel: rgba(250, 247, 238, 0.60); --viz-panel-strong: rgba(250, 247, 238, 0.92); --viz-accent-flow: rgba(176, 46, 27, 0.30); --viz-ok-flow: rgba(78, 125, 58, 0.30); --viz-verm-flow: rgba(176, 46, 27, 0.20); } /* Theme toggle injected by /theme.js into .nav */ .theme-toggle { display: inline-flex; align-items: center; min-height: 32px; padding: 7px 11px; border-radius: 3px; border: 1px solid var(--border); background: var(--panel-soft); color: var(--text); font-family: var(--mono); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; cursor: pointer; } .theme-toggle:hover { border-color: var(--accent-border); color: var(--accent); } .teaching-figure { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--accent-soft), rgba(0, 0, 0, 0.10)), var(--panel-soft); } .teaching-figure::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--panel-soft) 1px, transparent 1px), linear-gradient(90deg, var(--panel-soft) 1px, transparent 1px); background-size: 40px 40px; mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.75), transparent 86%); } .teaching-figure figcaption { position: relative; } .learning-viz { position: relative; z-index: 1; display: block; width: 100%; height: auto; min-height: 240px; } .learning-viz text { font-family: var(--seviq-font-sans); letter-spacing: 0; } .learning-viz .viz-title { fill: var(--viz-muted); font-size: 12px; font-weight: 650; } .learning-viz .viz-axis-label { fill: var(--viz-muted); font-size: 13px; } .learning-viz .viz-measure-label { fill: var(--viz-muted); font-size: 14px; font-weight: 650; } .learning-viz .viz-label-strong { fill: var(--viz-ink); font-size: 14px; font-weight: 700; } .learning-viz .viz-label-muted { fill: var(--viz-muted); font-size: 12px; } .learning-viz .viz-label-blue { fill: var(--viz-blue); } .learning-viz .viz-label-amber { fill: var(--viz-amber); } .learning-viz .viz-label-green { fill: var(--viz-green); } .learning-viz .viz-label-verm { fill: var(--verm); } .learning-viz .viz-panel { fill: var(--viz-panel); stroke: var(--border); } .learning-viz .viz-wire, .learning-viz .viz-component { fill: none; stroke: var(--viz-line); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .learning-viz .viz-component { stroke-width: 2.5; } .learning-viz .viz-node { fill: var(--viz-ink); stroke: var(--bg); stroke-width: 2; } .learning-viz .viz-soft-line { fill: none; stroke: var(--border-strong); stroke-width: 2; stroke-linecap: round; } .learning-viz .viz-badge rect, .learning-viz .viz-label rect { fill: var(--viz-panel-strong); stroke: var(--border); } .learning-viz .viz-badge text, .learning-viz .viz-label text { fill: var(--viz-ink); font-weight: 700; } .learning-viz .viz-note { fill: var(--viz-muted); font-size: 13px; } .learning-viz .viz-muted { fill: var(--viz-muted); } .learning-viz .viz-small { fill: var(--viz-muted); font-size: 12px; } .learning-viz .viz-source { fill: var(--viz-green); } .learning-viz .viz-drop-text { fill: var(--viz-red); } .learning-viz .viz-flow-path { fill: none; stroke: var(--viz-accent-flow); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14 22; animation: viz-flow 5.5s linear infinite; } .learning-viz .viz-flow-path.current { stroke: var(--viz-ok-flow); } .learning-viz .viz-flow-dot { fill: var(--viz-blue); } .learning-viz .viz-flow-dot.current { fill: var(--viz-green); } .learning-viz .viz-flow-dot.viz-flow-dot-secondary { fill: var(--viz-cyan); opacity: 0.72; } .learning-viz .viz-drop { stroke: var(--viz-red); animation: viz-drop-pulse 2.8s ease-in-out infinite; } .learning-viz .viz-drop.delay-1 { animation-delay: 0.45s; } .learning-viz .viz-drop.delay-2 { animation-delay: 1.25s; } .learning-viz .viz-ledger-rail { stroke: var(--border-strong); stroke-width: 4; stroke-linecap: round; } .learning-viz .viz-ledger-step { fill: var(--panel-soft); stroke: var(--border-strong); } .learning-viz .viz-ledger-step.source { fill: var(--viz-ok-flow); stroke: var(--ok); } .learning-viz .viz-ledger-step.drop { fill: var(--viz-verm-flow); stroke: var(--verm); } .learning-viz .viz-ledger-step.done { fill: var(--accent-soft); stroke: var(--accent-border); } .learning-viz .viz-emphasis { animation: viz-emphasis 3.6s ease-in-out infinite; } @keyframes viz-flow { to { stroke-dashoffset: -72; } } @keyframes viz-drop-pulse { 0%, 100% { opacity: 0.45; stroke-width: 3; } 42% { opacity: 1; stroke-width: 5; } } @keyframes viz-emphasis { 0%, 100% { opacity: 0.78; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .learning-viz .viz-flow-path, .learning-viz .viz-drop, .learning-viz .viz-emphasis { animation: none; } .learning-viz .viz-flow-dot { display: none; } } @media (max-width: 700px) { .learning-viz { min-height: 280px; } }