/* ================================================================ Transformers Deep Dive — course stylesheet Blueprint aesthetic: slate/blue ground, amber accent, fine grid. Fonts: DM Sans (body) + Fira Code (mono). ================================================================ */ :root { --font-body: 'DM Sans', system-ui, sans-serif; --font-mono: 'Fira Code', 'SF Mono', Consolas, monospace; --bg: #eef2f6; --grid-line: rgba(30, 58, 95, 0.055); --surface: #fbfcfd; --surface2: #e9eef4; --surface-elevated: #ffffff; --border: rgba(30, 58, 95, 0.13); --border-bright: rgba(30, 58, 95, 0.26); --text: #14273d; --text-dim: #5b7186; --blue: #0b4f75; --blue-dim: rgba(11, 79, 117, 0.07); --amber: #b45309; --amber-dim: rgba(180, 83, 9, 0.09); --sage: #4d7c0f; --sage-dim: rgba(77, 124, 15, 0.09); --rose: #9f1239; --rose-dim: rgba(159, 18, 57, 0.08); --steel: #475569; --steel-dim: rgba(71, 85, 105, 0.09); /* per-track accent, overridden on */ --accent: var(--blue); --accent-dim: var(--blue-dim); } body[data-track="efficiency"] { --accent: var(--amber); --accent-dim: var(--amber-dim); } body[data-track="practice"] { --accent: var(--sage); --accent-dim: var(--sage-dim); } body[data-track="synthesis"] { --accent: var(--rose); --accent-dim: var(--rose-dim); } @media (prefers-color-scheme: dark) { :root { --bg: #0b1622; --grid-line: rgba(125, 178, 222, 0.055); --surface: #121f2e; --surface2: #17273a; --surface-elevated: #1a2c41; --border: rgba(148, 187, 224, 0.13); --border-bright: rgba(148, 187, 224, 0.28); --text: #dbe8f5; --text-dim: #8ba6bf; --blue: #56b0e0; --blue-dim: rgba(86, 176, 224, 0.13); --amber: #e8a33d; --amber-dim: rgba(232, 163, 61, 0.14); --sage: #9ccc51; --sage-dim: rgba(156, 204, 81, 0.13); --rose: #f2718c; --rose-dim: rgba(242, 113, 140, 0.13); --steel: #93a7bd; --steel-dim: rgba(147, 167, 189, 0.13); } } /* ---------------- reset ---------------- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background-color: var(--bg); background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px), linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; background-attachment: fixed; color: var(--text); font-family: var(--font-body); font-size: 15.5px; line-height: 1.72; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; } .grid > *, .flex > * { min-width: 0; } @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .sec { animation: fadeUp .38s ease-out both; animation-delay: calc(var(--i,0) * .035s); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; } } /* ---------------- shell ---------------- */ .shell { max-width: 1500px; margin: 0 auto; display: grid; grid-template-columns: 236px minmax(0, 1fr) 190px; gap: 0 44px; padding: 32px 40px 90px; } .main { grid-column: 2; min-width: 0; max-width: 860px; } /* ---------------- left nav ---------------- */ .nav { grid-column: 1; grid-row: 1 / -1; position: sticky; top: 24px; align-self: start; max-height: calc(100dvh - 48px); overflow-y: auto; padding-right: 6px; } .nav::-webkit-scrollbar { width: 3px; } .nav::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 2px; } .nav__brand { display: block; text-decoration: none; color: inherit; margin-bottom: 20px; } .nav__brand-k { font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; color: var(--amber); display: flex; align-items: center; gap: 7px; } .nav__brand-k::before { content: ''; width: 18px; height: 1.5px; background: currentColor; } .nav__brand-t { font-size: 15px; font-weight: 700; letter-spacing: -.4px; margin-top: 5px; line-height: 1.25; } .nav__grp { font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: 1.9px; text-transform: uppercase; color: var(--text-dim); margin: 16px 0 7px; padding-bottom: 5px; border-bottom: 1px solid var(--border); } .nav__grp:first-of-type { margin-top: 0; } .nav a.nav__i { display: flex; gap: 9px; align-items: baseline; font-size: 11.8px; line-height: 1.4; color: var(--text-dim); text-decoration: none; padding: 5px 8px; border-radius: 5px; border-left: 2px solid transparent; margin-bottom: 1px; transition: color .14s, background .14s; } .nav a.nav__i:hover { color: var(--text); background: var(--surface2); } .nav a.nav__i.is-current { color: var(--text); background: var(--surface); border-left-color: var(--accent); font-weight: 500; } .nav__n { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-dim); flex-shrink: 0; } .nav a.nav__i.is-current .nav__n { color: var(--accent); } /* ---------------- right toc ---------------- */ .toc { grid-column: 3; grid-row: 1 / -1; position: sticky; top: 24px; align-self: start; max-height: calc(100dvh - 48px); overflow-y: auto; padding-top: 4px; } .toc::-webkit-scrollbar { width: 3px; } .toc::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 2px; } .toc__h { font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: 1.9px; text-transform: uppercase; color: var(--text-dim); padding-bottom: 6px; margin-bottom: 7px; border-bottom: 1px solid var(--border); } .toc a { display: block; font-size: 11px; line-height: 1.42; color: var(--text-dim); text-decoration: none; padding: 4px 7px; border-radius: 4px; border-left: 2px solid transparent; margin-bottom: 1px; transition: color .14s, background .14s; } .toc a:hover { color: var(--text); background: var(--surface2); } .toc a.active { color: var(--text); border-left-color: var(--accent); background: var(--surface); } /* ---------------- page header ---------------- */ .hd { margin-bottom: 34px; } .hd__k { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 2.3px; text-transform: uppercase; color: var(--accent); margin-bottom: 13px; display: flex; align-items: center; gap: 9px; } .hd__k::before { content: ''; width: 24px; height: 1.5px; background: currentColor; } .hd h1 { font-size: 40px; font-weight: 700; letter-spacing: -1.3px; line-height: 1.08; text-wrap: balance; } .prereq { margin-top: 20px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; padding: 15px 19px; font-size: 13.5px; line-height: 1.68; color: var(--text-dim); } .prereq p + p { margin-top: 5px; } .prereq strong { color: var(--text); font-weight: 600; } /* ---------------- sections ---------------- */ .sec { margin-bottom: 12px; scroll-margin-top: 22px; } .sec__h { display: flex; align-items: baseline; gap: 13px; margin: 46px 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border-bright); } .sec__n { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--accent); flex-shrink: 0; letter-spacing: .8px; } .sec__t { font-size: 22px; font-weight: 700; letter-spacing: -.5px; line-height: 1.25; } /* special sections */ .sec--takeaways .sec__h, .sec--selfcheck .sec__h, .sec--reconcile .sec__h { border-bottom-color: transparent; margin-bottom: 0; } .sec--takeaways .sec__body, .sec--selfcheck .sec__body, .sec--reconcile .sec__body { border: 1px solid var(--border); border-radius: 12px; padding: 20px 24px 6px; background: var(--surface); } .sec--takeaways .sec__body { background: color-mix(in srgb, var(--surface) 90%, var(--accent) 10%); border-color: color-mix(in srgb, var(--border) 45%, var(--accent) 55%); box-shadow: 0 3px 16px rgba(20,39,61,.07); } .sec--selfcheck .sec__body { border-left: 3px solid var(--amber); } .sec--reconcile .sec__body { background: color-mix(in srgb, var(--bg) 55%, var(--surface) 45%); box-shadow: inset 0 1px 3px rgba(20,39,61,.05); } /* ---------------- prose ---------------- */ .sec__body h3 { font-size: 16.5px; font-weight: 700; letter-spacing: -.2px; margin: 28px 0 10px; } .sec__body h4 { font-size: 14px; font-weight: 700; margin: 22px 0 8px; color: var(--text-dim); } .sec__body p { margin-bottom: 15px; } .sec__body > p:first-child { margin-top: 0; } .sec__body ul, .sec__body ol { margin: 0 0 16px; padding: 0; list-style: none; } .sec__body li { position: relative; padding-left: 20px; margin-bottom: 7px; } .sec__body ul > li::before { content: ''; position: absolute; left: 5px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: .55; } .sec__body ol { counter-reset: li; } .sec__body ol > li { padding-left: 27px; } .sec__body ol > li::before { counter-increment: li; content: counter(li); position: absolute; left: 0; top: 0; font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--accent); width: 20px; text-align: right; } .sec__body li > ul, .sec__body li > ol { margin-top: 7px; margin-bottom: 0; } .sec__body a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-dim); transition: border-color .14s; } .sec__body a:hover { border-bottom-color: var(--accent); } .sec__body strong { font-weight: 700; color: var(--text); } .sec__body em { font-style: italic; } code { font-family: var(--font-mono); font-size: .855em; background: var(--accent-dim); color: var(--accent); padding: 1.5px 5px; border-radius: 3px; word-break: break-word; } h1 code, h2 code, h3 code, .sec__t code { font-size: .82em; background: none; padding: 0; } hr { border: none; border-top: 1px solid var(--border); margin: 30px 0; } /* ---------------- callouts (blockquote) ---------------- */ .callout { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--amber); border-radius: 0 10px 10px 0; padding: 15px 20px; margin: 20px 0; font-size: 14px; line-height: 1.68; color: var(--text-dim); } .callout > p:last-child { margin-bottom: 0; } .callout strong { color: var(--text); } /* ---------------- code ---------------- */ .code-file { border: 1px solid var(--border); border-radius: 9px; overflow: hidden; margin: 18px 0; background: color-mix(in srgb, var(--bg) 66%, var(--surface) 34%); box-shadow: inset 0 1px 3px rgba(20,39,61,.05); } .code-file__hd { font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-dim); padding: 8px 15px; background: var(--surface2); border-bottom: 1px solid var(--border); } pre.code-block { font-family: var(--font-mono); font-size: 12.6px; line-height: 1.62; padding: 15px 17px; margin: 0; overflow-x: auto; white-space: pre; tab-size: 4; } pre.code-block code { background: none; color: var(--text); padding: 0; font-size: inherit; } pre.code-block--wrap { white-space: pre-wrap; word-break: break-word; } /* ---------------- tables ---------------- */ .table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 11px; overflow: hidden; margin: 20px 0; } .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } table.dt { width: 100%; border-collapse: collapse; font-size: 12.9px; line-height: 1.56; } table.dt th { background: var(--surface2); font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.05px; color: var(--text-dim); text-align: left; padding: 12px 14px; border-bottom: 2px solid var(--border-bright); white-space: nowrap; } table.dt td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: top; } table.dt tbody tr:last-child td { border-bottom: none; } table.dt tbody tr:nth-child(even) { background: var(--accent-dim); } table.dt tbody tr { transition: background .14s; } table.dt tbody tr:hover { background: var(--surface2); } table.dt td:first-child { font-weight: 600; } table.dt code { font-size: .88em; } table.dt p { margin: 0; } /* ---------------- math ---------------- */ .math-display { margin: 20px 0; padding: 4px 0; overflow-x: auto; overflow-y: hidden; text-align: center; max-width: 100%; } .math-inline { overflow-wrap: anywhere; } .katex { font-size: 1.03em; } .math-display .katex-display { margin: 0; } .math-raw { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-dim); } /* ---------------- mermaid ---------------- */ .diagram-shell { position: relative; margin: 22px 0; } .diagram-shell__hint { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); margin-bottom: 7px; opacity: .7; } .mermaid-wrap { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 26px 20px; overflow: hidden; display: flex; justify-content: center; align-items: center; min-height: 250px; cursor: grab; } .mermaid-wrap.is-panning { cursor: grabbing; user-select: none; } .zoom-controls { position: absolute; top: 8px; right: 8px; display: flex; gap: 2px; z-index: 10; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 2px; } .zoom-controls button { width: 27px; height: 27px; border: none; background: transparent; color: var(--text-dim); font-family: var(--font-mono); font-size: 12.5px; cursor: pointer; border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: background .14s, color .14s; } .zoom-controls button:hover { background: var(--surface2); color: var(--text); } .mermaid-viewport { position: relative; overflow: hidden; width: 100%; height: 100%; min-height: 210px; } .mermaid-canvas { position: absolute; top: 0; left: 0; } .zoom-label { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-dim); padding: 0 6px; white-space: nowrap; } .mermaid .nodeLabel { font-family: var(--font-body) !important; font-size: 16px !important; } .mermaid .edgeLabel { font-family: var(--font-mono) !important; font-size: 12px !important; } .mermaid .node rect, .mermaid .node circle, .mermaid .node polygon { stroke-width: 1.5px !important; } .mermaid .edge-pattern-solid { stroke-width: 1.5px !important; } .mermaid .cluster rect { rx: 8px !important; } /* ---------------- prev / next ---------------- */ .pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 54px; } .pager > * { min-width: 0; } .pager a { display: block; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: 15px 18px; transition: transform .15s, box-shadow .15s, border-color .15s; } .pager a:hover { transform: translateY(-2px); box-shadow: 0 5px 18px rgba(20,39,61,.09); border-color: var(--border-bright); } .pager__k { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 1.7px; text-transform: uppercase; color: var(--text-dim); } .pager__t { font-size: 14.5px; font-weight: 700; margin-top: 5px; letter-spacing: -.25px; line-height: 1.3; } .pager__next { text-align: right; } .pager__spacer { visibility: hidden; } .foot { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 11.5px; line-height: 1.7; color: var(--text-dim); } .foot a { color: var(--accent); text-decoration: none; } .foot code { font-size: 10.5px; background: var(--surface2); color: var(--text); } /* ---------------- mobile nav toggle ---------------- */ .navtoggle { display: none; } /* ---------------- responsive ---------------- */ @media (max-width: 1280px) { .shell { grid-template-columns: 220px minmax(0, 1fr); gap: 0 38px; } .toc { display: none; } } @media (max-width: 900px) { .shell { grid-template-columns: 1fr; padding: 0 20px 70px; gap: 0; } .main { grid-column: 1; max-width: none; padding-top: 22px; } .nav { grid-column: 1; grid-row: auto; position: sticky; top: 0; z-index: 200; max-height: none; background: var(--bg); border-bottom: 1px solid var(--border); margin: 0 -20px; padding: 0 20px; } .nav__brand { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 11px 0; } .nav__brand-t { font-size: 13px; margin-top: 2px; } .navtoggle { display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 6px 11px; cursor: pointer; flex-shrink: 0; } .nav__list { display: none; padding-bottom: 14px; max-height: 62dvh; overflow-y: auto; } .nav.is-open .nav__list { display: block; } .hd h1 { font-size: 27px; } .sec__t { font-size: 19px; } .pager { grid-template-columns: 1fr; } .pager__next { text-align: left; } body { font-size: 15px; } } /* ================================================================ SITE CHROME Added when the course theme was promoted to the site theme: a shared top bar, landing-page layout, and card grid. Everything below reuses the tokens defined at the top of this file. ================================================================ */ :root { --topbar-h: 52px; } /* ---------------- top bar ---------------- */ .topbar { position: sticky; top: 0; z-index: 300; height: var(--topbar-h); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border); } .topbar__in { max-width: 1500px; margin: 0 auto; height: 100%; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .topbar__brand { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; letter-spacing: -.35px; color: var(--text); text-decoration: none; white-space: nowrap; } .topbar__brand::before { content: ''; width: 16px; height: 1.5px; background: var(--accent); flex-shrink: 0; } .topbar__nav { display: flex; align-items: center; gap: 4px; } .topbar__l { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; color: var(--text-dim); text-decoration: none; padding: 6px 10px; border-radius: 6px; transition: color .14s, background .14s; } .topbar__l:hover { color: var(--text); background: var(--surface2); } .topbar__l.is-active { color: var(--accent); background: var(--accent-dim); } /* the course rail and page TOC sit below the bar */ .nav, .toc { top: calc(var(--topbar-h) + 20px); max-height: calc(100dvh - var(--topbar-h) - 44px); } /* ---------------- landing pages ---------------- */ .shell--plain { grid-template-columns: minmax(0, 1fr); gap: 0; } .shell--plain .main { grid-column: 1; } .main--wide { max-width: 1000px; margin: 0 auto; } .hd--hero h1 { font-size: 52px; letter-spacing: -2px; } .lede { font-size: 18px; color: var(--text-dim); line-height: 1.6; margin-top: 14px; max-width: 62ch; text-wrap: pretty; } .lp__sec { margin-top: 46px; } .lp__h { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 1.9px; text-transform: uppercase; color: var(--text-dim); padding-bottom: 9px; margin-bottom: 18px; border-bottom: 1px solid var(--border); } .lp__p { color: var(--text-dim); max-width: 68ch; } .lp__p a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-dim); } .lp__p a:hover { border-bottom-color: var(--accent); } /* ---------------- card grid ---------------- */ .cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); } .cards > * { min-width: 0; } .card { display: block; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: 20px 22px 22px; transition: transform .16s, box-shadow .16s, border-color .16s; } .card:hover { transform: translateY(-2px); border-color: var(--border-bright); box-shadow: 0 6px 22px rgba(20, 39, 61, .1); } .card__k { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 1.7px; text-transform: uppercase; color: var(--accent); } .card__t { font-size: 17px; font-weight: 700; letter-spacing: -.45px; line-height: 1.28; margin: 8px 0 9px; text-wrap: balance; } .card__b { font-size: 14px; color: var(--text-dim); line-height: 1.6; } .card__meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); } /* ---------------- responsive ---------------- */ @media (max-width: 900px) { :root { --topbar-h: 48px; } .topbar__in { padding: 0 20px; } .topbar__l { padding: 6px 7px; letter-spacing: 1px; } .nav { top: var(--topbar-h); } .hd--hero h1 { font-size: 33px; letter-spacing: -1.1px; } .lede { font-size: 16px; } .lp__sec { margin-top: 34px; } .shell--plain { padding-top: 26px; } } /* ================================================================ INTERACTIVE WIDGETS D3-driven figures embedded in notes (see /assets/linear-algebra.js). The markup ships inside the article as raw ```html blocks; every colour here — and every colour the script paints into SVG — comes from the tokens at the top of this file, so dark mode is automatic. ================================================================ */ .widget { background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: 20px 22px 22px; margin: 26px 0; } .widget__k { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 1.7px; text-transform: uppercase; color: var(--accent); } .widget__t { font-size: 16px; font-weight: 700; letter-spacing: -.35px; line-height: 1.28; margin: 7px 0 6px; } .sec__body .widget__t { margin: 7px 0 6px; color: var(--text); } .widget__hint { font-size: 12.8px; line-height: 1.6; color: var(--text-dim); margin: 0 0 15px; } .widget__hint strong { color: var(--text); font-weight: 600; } .sec__body .widget p { margin-bottom: 0; } /* --- formula strip --- */ .widget__eq { text-align: center; padding: 9px 14px; margin: 0 0 15px; background: var(--surface2); border: 1px solid var(--border); border-radius: 9px; } .widget__eq .katex-display { margin: 0; } /* --- control bar --- */ .widget__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 11px 14px; margin-bottom: 15px; background: color-mix(in srgb, var(--bg) 62%, var(--surface) 38%); border: 1px solid var(--border); border-radius: 9px; } .widget__group { display: flex; align-items: center; gap: 9px; } .widget__lbl { font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); } .widget__sep { width: 1px; height: 22px; background: var(--border-bright); flex-shrink: 0; } .widget__num { font-family: var(--font-mono); font-size: 12.5px; color: var(--text); width: 64px; padding: 6px 7px; text-align: center; background: var(--surface-elevated); border: 1px solid var(--border-bright); border-radius: 6px; transition: border-color .14s, box-shadow .14s; } .widget__num:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim); } .widget__btn { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-dim); background: var(--surface-elevated); border: 1px solid var(--border-bright); border-radius: 6px; padding: 8px 13px; cursor: pointer; transition: color .14s, background .14s, border-color .14s; } .widget__btn:hover { color: var(--text); background: var(--surface2); border-color: var(--text-dim); } .widget__btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-dim); border-color: var(--accent); } .widget__btn--accent { color: var(--accent); background: var(--accent-dim); border-color: color-mix(in srgb, var(--border) 35%, var(--accent) 65%); } .widget__btn--accent:hover { color: var(--accent); background: color-mix(in srgb, var(--accent-dim) 55%, var(--accent) 45%); border-color: var(--accent); } /* --- drawing surface --- */ .widget__stage { position: relative; overflow: hidden; background: color-mix(in srgb, var(--bg) 66%, var(--surface) 34%); border: 1px solid var(--border); border-radius: 9px; box-shadow: inset 0 1px 3px rgba(20, 39, 61, .05); } .widget__stage svg { display: block; width: 100%; height: auto; } .widget__stage text { font-family: var(--font-body); } .widget__stage .widget__mono { font-family: var(--font-mono); letter-spacing: .07em; } .widget__stage--matrix { display: flex; justify-content: center; padding: 18px 14px; } .widget__stage--svd { display: flex; justify-content: center; padding: 16px 12px; } .widget__stage--svd svg { max-width: 500px; } /* --- two-column figure (canvas + readout) --- */ .widget__split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; } .widget__side { display: flex; flex-direction: column; justify-content: center; gap: 11px; } .widget__vec { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12.5px; color: var(--text-dim); } .widget__dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; } .widget__dot--a { background: var(--blue); } .widget__dot--b { background: var(--rose); } .widget__readout { text-align: center; padding: 12px 10px; background: var(--accent-dim); border-radius: 9px; border: 1px solid color-mix(in srgb, var(--border) 40%, var(--accent) 60%); } .widget__val { font-family: var(--font-mono); font-size: 17px; font-weight: 600; color: var(--accent); letter-spacing: -.2px; } .widget__meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--text-dim); margin-top: 6px; } .widget__meta strong { color: var(--text); font-weight: 600; } .widget__note { min-height: 34px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--text-dim); } /* --- caption + legend --- */ .widget__cap { font-family: var(--font-mono); font-size: 10px; letter-spacing: .9px; color: var(--text-dim); text-align: center; margin-top: 11px; } .widget__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-top: 12px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; color: var(--text-dim); } .widget__legend span { display: inline-flex; align-items: center; gap: 7px; } /* micro-labels are uppercased; KaTeX inside them must not be */ .widget__legend .katex, .widget__cap .katex { text-transform: none; letter-spacing: normal; } .widget__key { width: 17px; height: 2.5px; border-radius: 2px; flex-shrink: 0; } .widget__key--pc1 { background: var(--rose); } .widget__key--pc2 { background: var(--blue); } .widget__key--line { background: var(--text); } /* --- matrix grid --- */ .widget__matrix { display: flex; flex-direction: column; gap: 7px; } .widget__mrow { display: flex; gap: 7px; } .widget__cell { font-family: var(--font-mono); font-size: 12.5px; color: var(--text); width: 78px; height: 42px; display: flex; align-items: center; justify-content: center; background: var(--surface-elevated); border: 1px solid var(--border); border-radius: 7px; transition: background .16s, border-color .16s, color .16s, transform .16s; } .widget__cell.is-hot { background: var(--amber-dim); border-color: var(--amber); color: var(--amber); transform: scale(1.05); } /* --- shared hover tooltip (appended to by the script) --- */ .widget-tip { position: absolute; z-index: 400; visibility: hidden; pointer-events: none; font-family: var(--font-mono); font-size: 10.5px; line-height: 1.55; color: var(--text); background: var(--surface-elevated); border: 1px solid var(--border-bright); border-radius: 7px; padding: 7px 10px; box-shadow: 0 6px 20px rgba(20, 39, 61, .16); } /* --- responsive --- */ @media (max-width: 760px) { .widget__split { grid-template-columns: minmax(0, 1fr); } .widget__sep { display: none; } } @media (max-width: 900px) { .widget { padding: 16px 15px 18px; } .widget__cell { width: 58px; height: 38px; font-size: 11px; } .widget__matrix, .widget__mrow { gap: 5px; } } /* ================================================================ BUILD STATUS PAGE The /status/ checklist rendered from content/roadmap.yml. Tokens only — dark mode follows from style.css. ================================================================ */ .tally { margin-top: 18px; padding: 10px 14px; display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .4px; color: var(--text-dim); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; } .tally strong { color: var(--accent); font-weight: 700; } /* ---------------- progress bar ---------------- */ .prog { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .prog__track { position: relative; flex: 1; height: 5px; min-width: 0; background: var(--surface2); border-radius: 3px; overflow: hidden; display: flex; } .prog__fill { height: 100%; background: var(--accent); border-radius: 3px 0 0 3px; } .prog__fill--p { background: var(--accent); opacity: .32; border-radius: 0; } .prog__n { font-family: var(--font-mono); font-size: 10px; letter-spacing: .5px; color: var(--text-dim); white-space: nowrap; flex-shrink: 0; } /* ---------------- checklist ---------------- */ .chks { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .chk { display: flex; gap: 14px; align-items: flex-start; padding: 13px 15px; margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; transition: border-color .14s; } .chk:hover { border-color: var(--border-bright); } /* neutralise the generic .sec__body li bullet styling */ .chk::before { content: none; } .chk__mark { flex-shrink: 0; width: 15px; height: 15px; margin-top: 4px; border-radius: 4px; border: 1.5px solid var(--border-bright); position: relative; } .chk--done .chk__mark { background: var(--sage); border-color: var(--sage); } .chk--done .chk__mark::after { content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 1.8px 1.8px 0; transform: rotate(42deg); } .chk--progress .chk__mark { border-color: var(--amber); } .chk--progress .chk__mark::after { content: ''; position: absolute; inset: 2.5px; background: var(--amber); border-radius: 1px; } .chk__body { min-width: 0; flex: 1; } .chk__t { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 15px; font-weight: 700; letter-spacing: -.25px; color: var(--text); line-height: 1.35; } .chk__s { font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; padding: 2.5px 7px; border-radius: 5px; white-space: nowrap; color: var(--text-dim); background: var(--surface2); } .chk--done .chk__s { color: var(--sage); background: var(--sage-dim); } .chk--progress .chk__s { color: var(--amber); background: var(--amber-dim); } .chk__d { margin: 5px 0 0; padding: 0; font-size: 13.5px; line-height: 1.6; color: var(--text-dim); max-width: 72ch; } .chk__d:empty { display: none; } .chk--planned { opacity: .78; } @media (max-width: 900px) { .chk { padding: 12px 13px; gap: 11px; } .chk__t { font-size: 14.5px; } .chk__d { font-size: 13px; } } /* ---------------- breadcrumb (topic -> its category) ---------------- */ .crumb { display: inline-block; margin-bottom: 10px; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-dim); text-decoration: none; transition: color .14s; } .crumb:hover { color: var(--accent); }