/* ============================================================================= * VHDL for Firmware Engineers — stylesheet * Dark theme by default; [data-theme="light"] on switches to light. * Colours live in CSS custom properties so the SVG diagrams/waveforms (which * carry semantic classes like .sig-1, .wire, .gate) stay themeable. * ========================================================================== */ /* ---- Theme tokens -------------------------------------------------------- */ :root { --bg: #0e1320; --bg-2: #151c2c; --bg-3: #1c2638; --panel: #131a28; --panel-2: #0b1019; --border: #283348; --border-2: #34425e; --text: #e6edf7; --text-dim: #9fb0c9; --text-faint:#6b7c98; --accent: #38e0c8; /* teal — primary */ --accent-2: #5aa9ff; /* blue */ --accent-3: #b78bff; /* violet */ --warn: #ffb547; --danger: #ff5d6c; --ok: #4fd67e; /* logic-value palette (used by waveforms + diagrams) */ --sig-0: #5b7aa8; /* logic 0 — calm blue-grey */ --sig-1: #38e0c8; /* logic 1 — bright teal */ --sig-x: #ff5d6c; /* unknown / conflict */ --sig-z: #ffb547; /* high impedance */ --sig-u: #b78bff; /* uninitialised */ --wire: #6b7c98; --wire-hot: #38e0c8; --cursor: #ffd479; --edge: #ffd479; --grid: #233049; --code-bg: #0b1019; --shadow: 0 8px 30px rgba(0,0,0,.45); --radius: 12px; --radius-sm: 8px; --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace; --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --sidebar-w: 270px; --maxw: 1040px; } html[data-theme="light"] { --bg: #f5f7fb; --bg-2: #ffffff; --bg-3: #eef2f8; --panel: #ffffff; --panel-2: #f0f3f9; --border: #d8e0ee; --border-2: #c3cee0; --text: #15202e; --text-dim: #4a5b73; --text-faint:#7d8ba3; --accent: #0fae97; --accent-2: #2f7ff0; --accent-3: #7c4dff; --warn: #b9760a; --danger: #d62a3c; --ok: #1f9d52; --sig-0: #7f93b4; --sig-1: #0fae97; --sig-x: #d62a3c; --sig-z: #b9760a; --sig-u: #7c4dff; --wire: #8493ad; --wire-hot: #0fae97; --cursor: #e08a00; --edge: #e08a00; --grid: #dde4f0; --code-bg: #f3f6fb; --shadow: 0 8px 24px rgba(20,40,80,.12); } /* ---- Base ---------------------------------------------------------------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 24px; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; } a { color: var(--accent-2); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { line-height: 1.25; font-weight: 700; } code, kbd, pre { font-family: var(--mono); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* ---- App shell ----------------------------------------------------------- */ .app { display: flex; align-items: flex-start; } .sidebar { position: sticky; top: 0; width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); height: 100vh; overflow-y: auto; background: var(--panel-2); border-right: 1px solid var(--border); padding: 18px 14px 40px; } .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; } .sidebar-brand .logo { width: 34px; height: 34px; border-radius: 9px; flex: 0 0 34px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: grid; place-items: center; color: #05121b; font-weight: 800; font-family: var(--mono); } .sidebar-brand .title { font-size: 14px; font-weight: 700; letter-spacing: .2px; } .sidebar-brand .subtitle { font-size: 11.5px; color: var(--text-faint); } .toc { list-style: none; margin: 8px 0 0; padding: 0; } .toc-section-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-faint); padding: 14px 10px 6px; font-weight: 700; } .toc a { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; color: var(--text-dim); font-size: 13.5px; line-height: 1.3; border-left: 2px solid transparent; } .toc a:hover { background: var(--bg-3); color: var(--text); text-decoration: none; } .toc a.is-active { background: var(--bg-3); color: var(--text); border-left-color: var(--accent); } .toc a .num { font-family: var(--mono); font-size: 11px; color: var(--text-faint); min-width: 18px; text-align: right; } .toc a.is-active .num { color: var(--accent); } .toc .dots { margin-left: auto; letter-spacing: -1px; font-size: 9px; color: var(--accent-3); } .main { flex: 1 1 auto; min-width: 0; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 28px 100px; } /* ---- Topbar (theme toggle / mobile menu) -------------------------------- */ .topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 12px 28px; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } .topbar .spacer { flex: 1; } .menu-btn { display: none; } .icon-btn { background: var(--bg-3); border: 1px solid var(--border); color: var(--text); width: 38px; height: 38px; border-radius: 9px; cursor: pointer; font-size: 16px; display: grid; place-items: center; } .icon-btn:hover { border-color: var(--border-2); } .topbar .progress-label { font-size: 12px; color: var(--text-faint); font-family: var(--mono); } /* ---- Hero ---------------------------------------------------------------- */ .hero { padding: 40px 0 8px; } .hero h1 { font-size: clamp(28px, 4vw, 44px); margin: 0 0 10px; letter-spacing: -.5px; } .hero h1 .grad { background: linear-gradient(120deg, var(--accent), var(--accent-2) 60%, var(--accent-3)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero .lede { font-size: 18px; color: var(--text-dim); max-width: 70ch; } .hero .pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; } .pill { font-size: 12.5px; padding: 5px 11px; border-radius: 999px; background: var(--bg-3); border: 1px solid var(--border); color: var(--text-dim); } .pill b { color: var(--accent); font-weight: 700; } .legend { margin: 26px 0; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); } .legend h3 { margin: 0 0 10px; font-size: 14px; color: var(--text-dim); } .legend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 22px; } .legend-item { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--text-dim); } .legend-item .k { flex: 0 0 auto; } /* ---- Example sections ---------------------------------------------------- */ .example { padding: 40px 0; border-top: 1px solid var(--border); scroll-margin-top: 70px; } .example-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .example-num { font-family: var(--mono); font-size: 13px; color: var(--accent); border: 1px solid var(--border-2); border-radius: 7px; padding: 2px 8px; background: var(--bg-3); } .example h2 { font-size: 26px; margin: 0; letter-spacing: -.3px; } .example .star { color: var(--warn); } .badge-adv { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--accent-3); border: 1px solid var(--accent-3); border-radius: 6px; padding: 2px 7px; } .meta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 12px 0 6px; } .difficulty { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-faint); } .difficulty .dots { letter-spacing: 1px; } .difficulty .dot { color: var(--border-2); } .difficulty .dot.on { color: var(--accent); } .tags { display: flex; flex-wrap: wrap; gap: 6px; } .tag { font-size: 11.5px; font-family: var(--mono); padding: 2px 8px; border-radius: 6px; background: var(--bg-3); border: 1px solid var(--border); color: var(--text-dim); } .idea { font-size: 17px; color: var(--text); margin: 14px 0 18px; max-width: 74ch; } .idea strong { color: var(--accent); } .walkthrough { max-width: 76ch; } .walkthrough h4 { margin: 22px 0 8px; font-size: 15px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; } .walkthrough ul, .walkthrough ol { padding-left: 22px; } .walkthrough li { margin: 6px 0; } /* ---- Two-column layout for code + viz ----------------------------------- */ .split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin: 8px 0 6px; } @media (min-width: 1180px) { .split.wide { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; } } @media (min-width: 1440px) { :root { --maxw: 1180px; } } @media (min-width: 1760px) { :root { --maxw: 1280px; } } /* ---- Per-box viz expand -------------------------------------------------- */ /* Toggle button sits above the viz; hidden below 1180px where split is already 1-col */ .viz-tools { display: flex; justify-content: flex-end; margin-bottom: 6px; } @media (max-width: 1179px) { .viz-tools { display: none; } } /* When expanded: force the wide split to a single column so viz gets full width */ @media (min-width: 1180px) { .example.expanded .split.wide { grid-template-columns: minmax(0, 1fr); } } /* ---- Code blocks --------------------------------------------------------- */ .codewrap { position: relative; } .codewrap .filename { font-family: var(--mono); font-size: 11.5px; color: var(--text-faint); background: var(--bg-3); border: 1px solid var(--border); border-bottom: none; display: inline-block; padding: 4px 12px; border-radius: 8px 8px 0 0; } pre[class*="language-"] { margin: 0; border: 1px solid var(--border); border-radius: 0 var(--radius-sm) var(--radius-sm) var(--radius-sm); background: var(--code-bg) !important; font-size: 13.2px; line-height: 1.6; padding: 16px 16px; overflow: auto; max-height: 85vh; min-height: 120px; resize: vertical; } code[class*="language-"] { font-family: var(--mono); text-shadow: none !important; } /* graceful fallback when Prism fails to load (e.g. offline) */ pre.plain { font-family: var(--mono); color: var(--text); } /* Token colours tuned for the dark theme (override Prism's default theme) */ .token.comment { color: #6f86a6; font-style: italic; } .token.keyword { color: var(--accent-3); font-weight: 600; } .token.string { color: #8fdca0; } .token.number { color: #ffcaa0; } .token.operator { color: var(--accent); background: none; } .token.function { color: var(--accent-2); } .token.punctuation { color: var(--text-dim); } html[data-theme="light"] .token.comment { color: #7d8ba3; } /* Prism line-highlight plugin */ .line-highlight { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent 80%); box-shadow: inset 3px 0 0 var(--accent); } /* ---- Callouts ------------------------------------------------------------ */ .callout { border-radius: var(--radius-sm); padding: 14px 16px 14px 46px; position: relative; margin: 16px 0; font-size: 14.5px; } .callout::before { position: absolute; left: 14px; top: 13px; font-size: 18px; } .callout p { margin: 6px 0; } .callout p:first-child { margin-top: 0; } .callout p:last-child { margin-bottom: 0; } .callout code { background: rgba(127,127,127,.16); padding: 1px 5px; border-radius: 4px; font-size: .92em; } .callout .ctitle { font-weight: 700; display: block; margin-bottom: 2px; } .callout.analogy { background: color-mix(in srgb, var(--accent-2) 12%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent-2) 40%, var(--border)); } .callout.analogy::before { content: "💡"; } .callout.analogy .ctitle { color: var(--accent-2); } .callout.gotcha { background: color-mix(in srgb, var(--danger) 11%, var(--panel)); border: 1px solid color-mix(in srgb, var(--danger) 38%, var(--border)); } .callout.gotcha::before { content: "⚠️"; } .callout.gotcha .ctitle { color: var(--danger); } .callout.note { background: var(--panel); border: 1px solid var(--border); padding-left: 46px; } .callout.note::before { content: "📌"; } /* ---- Visualisation panels ------------------------------------------------ */ .viz { margin: 6px 0 4px; } .panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .panel + .panel { margin-top: 14px; } .panel-title { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); padding: 9px 14px; border-bottom: 1px solid var(--border); background: var(--panel-2); font-weight: 700; } .panel-body { padding: 14px; } .vl-svg { display: block; width: 100%; height: auto; } .scroll-x { overflow-x: auto; } /* ---- Controls ------------------------------------------------------------ */ .controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; background: var(--panel-2); border-bottom: 1px solid var(--border); } .controls.bare { background: none; border: none; padding: 12px 0; } .btn { font: inherit; font-size: 13.5px; cursor: pointer; color: var(--text); background: var(--bg-3); border: 1px solid var(--border-2); border-radius: 8px; padding: 7px 13px; display: inline-flex; align-items: center; gap: 7px; transition: background .12s, border-color .12s; } .btn:hover { background: var(--bg-2); border-color: var(--accent); } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: #05121b; border-color: var(--accent); font-weight: 600; } .btn-primary:hover { background: color-mix(in srgb, var(--accent) 85%, #fff); } .btn-sm { font-size: 12px; padding: 4px 9px; } .btn[disabled] { opacity: .45; cursor: not-allowed; } .toggle { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; font-size: 13.5px; } .toggle-input { position: absolute; opacity: 0; width: 0; height: 0; } .toggle-track { width: 40px; height: 22px; border-radius: 999px; background: var(--border-2); position: relative; transition: background .15s; flex: 0 0 auto; } .toggle-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; } .toggle-input:checked + .toggle-track { background: var(--accent); } .toggle-input:checked + .toggle-track .toggle-knob { transform: translateX(18px); } .toggle-input:focus-visible + .toggle-track { outline: 2px solid var(--accent); outline-offset: 2px; } .toggle-label { font-family: var(--mono); } .slider { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; } .slider-label { font-family: var(--mono); color: var(--text-dim); } .slider-input { accent-color: var(--accent); width: 150px; } .slider-value { font-family: var(--mono); color: var(--accent); min-width: 22px; text-align: center; } .segmented { display: inline-flex; border: 1px solid var(--border-2); border-radius: 8px; overflow: hidden; } .seg-btn { font: inherit; font-family: var(--mono); font-size: 12.5px; cursor: pointer; background: var(--bg-3); color: var(--text-dim); border: none; padding: 6px 11px; border-right: 1px solid var(--border); } .seg-btn:last-child { border-right: none; } .seg-btn:hover { color: var(--text); } .seg-btn.is-active { background: var(--accent); color: #05121b; font-weight: 600; } .readout { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 13.5px; } .readout-label { color: var(--text-dim); } .readout-value { color: var(--accent); background: var(--code-bg); border: 1px solid var(--border); padding: 2px 9px; border-radius: 6px; min-width: 20px; text-align: center; } .readout-value.flash { animation: flash .5s ease; } @keyframes flash { 0% { background: var(--accent); color: #05121b; } 100% {} } /* ---- Truth table --------------------------------------------------------- */ .truth { border-collapse: collapse; font-family: var(--mono); font-size: 13px; width: 100%; } .truth th, .truth td { border: 1px solid var(--border); padding: 6px 12px; text-align: center; } .truth th { background: var(--panel-2); color: var(--text-dim); font-weight: 600; } .truth td { color: var(--text-dim); } .truth tr.is-active td { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--text); } .truth td.out-1 { color: var(--sig-1); font-weight: 700; } .truth td.out-0 { color: var(--sig-0); } /* ---- Waveform ------------------------------------------------------------ */ .wave-grid { stroke: var(--grid); stroke-width: 1; } .wave-label { fill: var(--text-dim); font-family: var(--mono); font-size: 12px; } .wave-name-bg { fill: var(--panel-2); } .wave-trace { fill: none; stroke: var(--sig-1); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; } /* decorative — let hovers reach the value cells beneath */ .wave-bus-fill { fill: color-mix(in srgb, var(--accent) 14%, transparent); stroke: var(--sig-1); stroke-width: 2; } .wave-bus-text { fill: var(--text); font-family: var(--mono); font-size: 11.5px; text-anchor: middle; dominant-baseline: middle; } .wave-x-fill { fill: color-mix(in srgb, var(--sig-x) 30%, transparent); stroke: var(--sig-x); } .wave-u-fill { fill: color-mix(in srgb, var(--sig-u) 30%, transparent); stroke: var(--sig-u); } .wave-help { cursor: help; } .wave-help:hover { filter: brightness(1.25); } .wave-z-fill { fill: color-mix(in srgb, var(--sig-z) 18%, transparent); stroke: var(--sig-z); stroke-dasharray: 4 3; } .wave-clk { stroke: var(--accent-2); } .wave-clk-rise { fill: var(--accent-2); } .wave-clk-fall { fill: color-mix(in srgb, var(--accent-2) 40%, transparent); } .wave-cursor { stroke: var(--cursor); stroke-width: 2; } .wave-cursor-band { fill: color-mix(in srgb, var(--cursor) 13%, transparent); } .wave-edge { stroke: var(--edge); stroke-width: 2.5; } .wave-edge-mark { fill: var(--edge); } .wave-cyclelbl { fill: var(--text-faint); font-family: var(--mono); font-size: 10.5px; text-anchor: middle; } .wave-arrow { stroke: var(--cursor); stroke-width: 1.6; fill: none; marker-end: url(#wf-arrow); } .wf-anim { transition: transform .28s cubic-bezier(.4,0,.2,1); pointer-events: none; } /* cursor band paints on top but lets hovers reach the cells beneath */ .wave-caption { font-family: var(--mono); font-size: 11px; color: var(--text-faint); padding: 4px 0 0 78px; } /* ---- Generic diagram element classes ------------------------------------ */ .gate { fill: var(--bg-3); stroke: var(--border-2); stroke-width: 2; } .gate-label { fill: var(--text-dim); font-family: var(--mono); font-size: 12px; text-anchor: middle; dominant-baseline: middle; } .wire { stroke: var(--wire); stroke-width: 2.4; fill: none; transition: stroke .18s; } .wire.hot { stroke: var(--sig-1); } .wire.lo { stroke: var(--sig-0); } .node { stroke-width: 2; } .node-0 { fill: color-mix(in srgb, var(--sig-0) 30%, var(--bg-3)); stroke: var(--sig-0); } .node-1 { fill: color-mix(in srgb, var(--sig-1) 35%, var(--bg-3)); stroke: var(--sig-1); } .io-label { fill: var(--text); font-family: var(--mono); font-size: 13px; dominant-baseline: middle; } .io-val { font-family: var(--mono); font-size: 14px; font-weight: 700; dominant-baseline: middle; text-anchor: middle; } .io-val.v0 { fill: var(--sig-0); } .io-val.v1 { fill: var(--sig-1); } .io-val.vx { fill: var(--sig-x); } .io-val.vz { fill: var(--sig-z); } .io-val.vu { fill: var(--sig-u); } .blk { fill: var(--panel); stroke: var(--accent); stroke-width: 2; } .blk-title { fill: var(--text); font-family: var(--mono); font-weight: 700; font-size: 14px; text-anchor: middle; } .port-pin { stroke: var(--wire); stroke-width: 2; } .port-name { fill: var(--text-dim); font-family: var(--mono); font-size: 12px; } .port-hit { fill: transparent; cursor: pointer; } .port-grp.is-sel .port-pin { stroke: var(--accent); } .port-grp.is-sel .port-name { fill: var(--accent); } .ff-body { fill: var(--bg-3); stroke: var(--border-2); stroke-width: 2; } .ff-body.captured { stroke: var(--cursor); } .ff-label { fill: var(--text-dim); font-family: var(--mono); font-size: 12px; } .ff-clk-tri { fill: none; stroke: var(--text-dim); stroke-width: 1.6; } .cell { fill: var(--bg-3); stroke: var(--border-2); stroke-width: 1.5; } .cell.bit1 { fill: color-mix(in srgb, var(--sig-1) 30%, var(--bg-3)); stroke: var(--sig-1); } .cell-text { fill: var(--text); font-family: var(--mono); font-size: 13px; text-anchor: middle; dominant-baseline: middle; } /* FSM bubbles */ .fsm-state { fill: var(--bg-3); stroke: var(--border-2); stroke-width: 2; transition: fill .2s, stroke .2s; } .fsm-state.is-current { fill: color-mix(in srgb, var(--accent) 28%, var(--bg-3)); stroke: var(--accent); } .fsm-state-label { fill: var(--text); font-family: var(--mono); font-size: 12.5px; text-anchor: middle; dominant-baseline: middle; } .fsm-edge { stroke: var(--wire); stroke-width: 1.8; fill: none; marker-end: url(#fsm-arrow); } .fsm-edge.is-active { stroke: var(--accent); } .fsm-edge-label { fill: var(--text-faint); font-family: var(--mono); font-size: 10.5px; } /* FIFO */ .fifo-slot { fill: var(--bg-3); stroke: var(--border-2); stroke-width: 1.5; transition: fill .18s; } .fifo-slot.filled { fill: color-mix(in srgb, var(--accent) 26%, var(--bg-3)); stroke: var(--accent); } .fifo-ptr { fill: var(--cursor); } .fifo-ptr-label { fill: var(--cursor); font-family: var(--mono); font-size: 11px; text-anchor: middle; } .flag { font-family: var(--mono); font-size: 12px; } .flag.on { fill: var(--warn); font-weight: 700; } .flag.off { fill: var(--text-faint); } /* light-up token for pipelines */ .token-box { stroke-width: 2; } /* ---- Glossary terms + tooltip ------------------------------------------- */ .term { border-bottom: 1.5px dotted var(--accent); cursor: help; color: inherit; font-weight: inherit; } .term:hover, .term:focus { background: color-mix(in srgb, var(--accent) 16%, transparent); border-radius: 3px; } #gloss-tip { position: fixed; z-index: 100; max-width: 340px; pointer-events: none; background: var(--bg-2); border: 1px solid var(--accent); border-radius: 10px; box-shadow: var(--shadow); padding: 12px 14px; font-size: 13.5px; line-height: 1.55; opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s; visibility: hidden; } #gloss-tip.show { opacity: 1; transform: translateY(0); visibility: visible; } #gloss-tip.pinned { pointer-events: auto; } #gloss-tip .gt-term { font-weight: 700; color: var(--accent); font-family: var(--mono); display: block; margin-bottom: 4px; } #gloss-tip .gt-def { color: var(--text); } #gloss-tip .gt-analogy { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); color: var(--text-dim); font-size: 12.8px; } #gloss-tip .gt-analogy b { color: var(--accent-2); } #gloss-tip code { background: rgba(127,127,127,.18); padding: 1px 4px; border-radius: 3px; } /* ---- Glossary section ---------------------------------------------------- */ .gloss-search { width: 100%; max-width: 420px; font: inherit; font-size: 15px; background: var(--code-bg); color: var(--text); border: 1px solid var(--border-2); border-radius: 10px; padding: 10px 14px; margin: 6px 0 18px; } .gloss-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } .gloss-card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; } .gloss-card.hidden { display: none; } .gloss-card .gc-term { font-family: var(--mono); font-weight: 700; color: var(--accent); margin: 0 0 4px; } .gloss-card .gc-def { font-size: 13.8px; color: var(--text-dim); margin: 0; } .gloss-card .gc-analogy { font-size: 12.8px; color: var(--text-faint); margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--border); } .gloss-empty { color: var(--text-faint); font-style: italic; } /* ---- Footer -------------------------------------------------------------- */ .footer { border-top: 1px solid var(--border); margin-top: 40px; padding: 28px 0 0; color: var(--text-dim); font-size: 14px; } .footer a { color: var(--accent); } .footer .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; } .footer h4 { margin: 0 0 8px; color: var(--text); font-size: 14px; } .footer ul { list-style: none; padding: 0; margin: 0; } .footer li { margin: 4px 0; } /* ---- Hero "parallel race" demo ------------------------------------------ */ .race-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 10px 0; } .race-panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; } .race-panel.fpga { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .race-h { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; } .race-h b { font-size: 15px; } .race-sub { font-size: 12px; color: var(--text-faint); } .cyclecount { font-family: var(--mono); font-size: 12px; color: var(--accent); margin-top: 4px; min-height: 16px; } .codeline { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 13.5px; padding: 5px 8px; border-radius: 6px; color: var(--text-dim); } .codeline code { color: var(--text); white-space: pre; } .codeline.is-active { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text); } .codeline.done { color: var(--text-faint); } .pc { color: var(--accent); opacity: 0; transition: opacity .12s; } .codeline.is-active .pc { opacity: 1; } .fpga .codeline .pc { display: none; } .resbadge { margin-left: auto; font-family: var(--mono); font-size: 12.5px; color: var(--ok); } .resbadge.stale { color: var(--text-faint); text-decoration: line-through; } .race-note { font-size: 13px; color: var(--text-faint); } .flash { animation: flash .55s ease; } @media (max-width: 760px) { .race-grid { grid-template-columns: 1fr; } } /* ---- Responsive ---------------------------------------------------------- */ @media (max-width: 920px) { .sidebar { position: fixed; left: 0; top: 0; z-index: 50; transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--shadow); } .app.nav-open .sidebar { transform: translateX(0); } .menu-btn { display: grid; } .container { padding: 0 18px 80px; } .nav-scrim { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 40; } .app.nav-open .nav-scrim { display: block; } } /* ---- Reduced motion ------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .wf-anim, .wire, .fsm-state, .fsm-edge, .toggle-track, .toggle-knob, #gloss-tip { transition: none !important; } * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; } }