@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap'); :root { /* Cool, high-contrast neutrals. The old palette was cream-on-cream, which made every surface melt into the page. */ --bg: #eef1f5; --bg-deep: #e4e9ef; --surface: #ffffff; --surface-strong: #ffffff; --surface-sunk: #f6f8fa; --line: #dfe4ea; --line-strong: #c3ccd6; --ink: #101720; --ink-soft: #33414f; --muted: #5d6b7a; --faint: #8895a3; --accent: #0d7a72; --accent-deep: #075b55; --accent-soft: #e2f2f0; --accent-glow: rgba(13, 122, 114, 0.28); --accent-2: #2563a8; --warm: #c2410c; --warm-soft: #fdeee6; --warm-glow: rgba(194, 65, 12, 0.26); --danger: #b42318; --ok: #15803d; --math-bg: #f8fafb; --math-border: #dce6e5; --derive-bg: #f4f8f8; --shadow: 0 1px 2px rgba(16, 23, 32, 0.04), 0 12px 32px -12px rgba(16, 23, 32, 0.16); --shadow-sm: 0 1px 2px rgba(16, 23, 32, 0.05), 0 4px 12px -6px rgba(16, 23, 32, 0.14); --shadow-lg: 0 2px 4px rgba(16, 23, 32, 0.04), 0 24px 56px -20px rgba(16, 23, 32, 0.24); --heading: 'Fraunces', 'Playfair Display', Georgia, serif; --body: 'Inter', -apple-system, 'Segoe UI', sans-serif; --mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace; --radius: 18px; --radius-sm: 14px; --radius-xs: 9px; /* Chart palette. The lab code reads these through MLUtils.chart colours so plots re-colour with the theme instead of hard-coding hex values that only work on a light background. */ --c-a: #0d7a72; --c-b: #c2410c; --c-c: #2563a8; --c-d: #7c3aed; --c-neutral: #6d6457; --c-faint: #c3ccd6; --c-danger: #b42318; --c-ink: #101720; --c-grid: rgba(16, 23, 32, 0.08); --c-axis: rgba(16, 23, 32, 0.24); --c-node-ring: #ffffff; --c-on-fill: #ffffff; --c-plot-bg: #f6f8fa; } /* ══════════════════════════════════════════════════════════════ DARK THEME Applied when the user's OS prefers dark, unless they have chosen a theme explicitly — [data-theme] on always wins. ══════════════════════════════════════════════════════════════ */ :root[data-theme="dark"] { --bg: #0f151c; --bg-deep: #0b1016; --surface: #161e27; --surface-strong: #1c2632; --surface-sunk: #111922; --line: #263240; --line-strong: #384759; --ink: #e8eef5; --ink-soft: #c2cddb; --muted: #93a3b5; --faint: #6b7c90; --accent: #2dd4bf; --accent-deep: #5eead4; --accent-soft: rgba(45, 212, 191, 0.14); --accent-glow: rgba(45, 212, 191, 0.32); --accent-2: #60a5fa; --warm: #fb923c; --warm-soft: rgba(251, 146, 60, 0.14); --warm-glow: rgba(251, 146, 60, 0.3); --danger: #f87171; --ok: #4ade80; --math-bg: #111922; --math-border: #2a3a44; --derive-bg: #131d26; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -12px rgba(0, 0, 0, 0.7); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px -6px rgba(0, 0, 0, 0.6); --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.5), 0 24px 56px -20px rgba(0, 0, 0, 0.8); --c-a: #2dd4bf; --c-b: #fb923c; --c-c: #60a5fa; --c-d: #c084fc; --c-neutral: #8b98a8; --c-faint: #3d4c5e; --c-danger: #f87171; --c-ink: #e8eef5; --c-grid: rgba(232, 238, 245, 0.09); --c-axis: rgba(232, 238, 245, 0.26); --c-node-ring: #0f151c; --c-on-fill: #0b1016; --c-plot-bg: #111922; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--ink); font-family: var(--body); font-size: 15px; line-height: 1.6; background: var(--bg); background-image: radial-gradient(900px 500px at 12% -8%, rgba(13, 122, 114, 0.07), transparent 60%), radial-gradient(700px 460px at 92% 4%, rgba(37, 99, 168, 0.07), transparent 60%); background-attachment: fixed; min-height: 100vh; -webkit-font-smoothing: antialiased; } a { color: inherit; } button, input, select, textarea { font: inherit; } /* ── Site Shell ─────────────────────────────────────────────── */ .site-shell { max-width: 1400px; margin: 0 auto; padding: 18px 24px 80px; } /* ── Topbar ─────────────────────────────────────────────────── */ .topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 12px 10px 20px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(18px) saturate(1.4); position: sticky; top: 12px; z-index: 30; box-shadow: var(--shadow-sm); transition: box-shadow 0.2s; } .topbar:hover { box-shadow: var(--shadow); } .brand { font-family: var(--heading); font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; text-transform: none; color: var(--ink); white-space: nowrap; } .brand::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 9px; border-radius: 3px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); transform: translateY(-1px); } .nav-links { display: flex; flex-wrap: wrap; gap: 8px; } .nav-links a { text-decoration: none; padding: 8px 13px; border-radius: 9px; color: var(--muted); background: transparent; border: 1px solid transparent; font-size: 0.875rem; font-weight: 500; transition: color 140ms ease, background 140ms ease; white-space: nowrap; } .nav-links a:hover { color: var(--ink); background: var(--surface-sunk); } .nav-links a[aria-current="page"] { color: var(--accent-deep); background: var(--accent-soft); font-weight: 600; } /* ── Hero ───────────────────────────────────────────────────── */ .hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.85fr); gap: 20px; padding: 26px 0 14px; align-items: stretch; } .hero-card, .page-hero, .module-card, .lab, .info-card, .mini-panel, .table-panel, .equation-card, .summary-card { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); } .hero-card { padding: 32px 34px; } .page-hero { padding: 24px 28px; margin: 18px 0; position: relative; overflow: hidden; } .page-hero::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--accent), var(--accent-2)); opacity: 0.5; pointer-events: none; } /* ── Eyebrow ────────────────────────────────────────────────── */ .eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 0.7rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent); font-weight: 700; } .eyebrow::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } /* ── Typography ─────────────────────────────────────────────── */ h1, h2, h3 { margin: 0; font-family: var(--heading); line-height: 1.12; font-weight: 700; letter-spacing: -0.018em; color: var(--ink); } h1 { font-size: clamp(1.75rem, 2.6vw, 2.5rem); margin-top: 8px; } h2 { font-size: clamp(1.3rem, 1.9vw, 1.65rem); } h3 { font-size: 1.05rem; line-height: 1.3; } .lead, .page-lead { color: var(--muted); font-size: 1rem; line-height: 1.62; max-width: 74ch; margin-top: 10px; } .hero-side { padding: 22px; } /* Compact fact strip used under algorithm-page headings. */ .hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .hero-meta span { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 500; color: var(--ink-soft); background: var(--surface-sunk); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; } .hero-meta span b { color: var(--accent-deep); font-weight: 700; } /* ── Grids ──────────────────────────────────────────────────── */ .stats-grid, .feature-grid, .module-grid, .info-grid, .lab-grid, .summary-grid { display: grid; gap: 18px; } .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat { padding: 18px; border-radius: 20px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.65); transition: transform 180ms ease; } .stat:hover { transform: translateY(-2px); } .stat strong { display: block; font-family: var(--heading); font-size: 2rem; background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .stat span { color: var(--muted); font-size: 0.9rem; } /* ── Buttons ────────────────────────────────────────────────── */ .hero-actions, .chip-row, .control-row, .button-row, .legend { display: flex; flex-wrap: wrap; gap: 12px; } .button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 16px; border-radius: var(--radius-xs); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: 0.875rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: all 150ms ease; white-space: nowrap; } .button:hover { border-color: var(--accent); color: var(--accent-deep); } .button.primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(13, 122, 114, 0.3); } .button.primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; } .button.secondary { background: var(--surface-sunk); } .button.ghost { background: transparent; border-color: var(--line); color: var(--muted); } .button.ghost:hover { color: var(--accent-deep); border-color: var(--accent); } .chip-row { margin-top: 22px; } .chip { padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.72); border: 1px solid var(--line); color: var(--muted); font-size: 0.88rem; font-weight: 500; } /* ── Sections ───────────────────────────────────────────────── */ .section { margin-top: 36px; } .section-header { display: flex; justify-content: space-between; align-items: end; gap: 18px; margin-bottom: 20px; } .section-copy { max-width: 70ch; color: var(--muted); line-height: 1.72; } .module-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .module-card { padding: 22px; } .module-card p, .info-card p, .summary-card p, .mini-panel p { color: var(--muted); line-height: 1.65; } .module-card ul, .lab-copy ul, .summary-card ul { margin: 14px 0 0; padding-left: 18px; color: var(--muted); line-height: 1.75; } .info-grid, .summary-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .info-card, .summary-card { padding: 22px; } .lab { padding: 22px 24px 24px; margin-top: 16px; } .lab-grid { grid-template-columns: minmax(330px, 430px) minmax(0, 1fr); align-items: start; gap: 20px; } .lab-copy { color: var(--muted); line-height: 1.7; } .section-intro { color: var(--muted); font-size: 0.95rem; line-height: 1.65; max-width: 88ch; margin: 0 0 18px; } /* ── Controls ───────────────────────────────────────────────── */ .controls, .readout, .steps, .plot-card, .table-panel, .equation-card, .mini-panel { border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); } .controls, .readout, .steps, .equation-card, .mini-panel { padding: 16px 18px; } .controls { display: grid; gap: 14px; background: var(--surface-sunk); position: sticky; top: 74px; max-height: calc(100vh - 96px); overflow-y: auto; overflow-x: hidden; min-width: 0; } /* Every grid child needs min-width:0 or the intrinsic width of an input keeps the column from shrinking and the panel clips. */ .control-group { display: grid; gap: 6px; min-width: 0; } .control-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-width: 0; } .controls input, .controls select, .controls textarea { max-width: 100%; } .controls > * { min-width: 0; max-width: 100%; } .controls { grid-template-columns: minmax(0, 1fr); } .range-row { min-width: 0; } .range-row input[type="range"] { min-width: 0; } .step-controls { display: flex; flex-wrap: wrap; gap: 8px; } .legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 0.78rem; color: var(--muted); } .legend span { display: inline-flex; align-items: center; gap: 6px; } .legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; } label { font-size: 0.88rem; font-weight: 600; color: var(--ink); } input[type="text"], input[type="number"], textarea, select { width: 100%; padding: 8px 11px; border-radius: var(--radius-xs); border: 1px solid var(--line-strong); background: #fff; color: var(--ink); font-size: 0.9rem; transition: border-color 140ms ease, box-shadow 140ms ease; } input[type="text"]:focus, input[type="number"]:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } input[type="range"] { width: 100%; accent-color: var(--accent); } textarea { min-height: 90px; resize: vertical; } .range-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; } .range-value, .metric-pill, .status-pill { font-family: var(--mono); font-size: 0.84rem; padding: 5px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 600; } .status-pill.warn { background: var(--warm-soft); color: var(--warm); } .status-pill.bad { background: rgba(176, 48, 48, 0.12); color: var(--danger); } /* ── Output Metrics ─────────────────────────────────────────── */ .output-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; } .output { border-radius: var(--radius-xs); padding: 12px 14px; background: var(--surface-sunk); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; transition: border-color 140ms ease; } .output:hover { border-color: var(--line-strong); } .output span { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); font-weight: 700; } .output strong { font-family: var(--mono); font-size: 1.18rem; font-weight: 600; color: var(--accent-deep); letter-spacing: -0.02em; line-height: 1.2; } /* ── Plot card ──────────────────────────────────────────────── */ .plot-card { padding: 14px; overflow: hidden; background: var(--surface); } .plot-card svg { border-radius: var(--radius-xs); background: var(--c-plot-bg); } .plot-card svg { display: block; width: 100%; height: auto; } /* ── Steps ──────────────────────────────────────────────────── */ .steps ol, .steps ul, .readout ol, .readout ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--muted); font-size: 0.88rem; line-height: 1.6; } .steps li { padding-left: 2px; } .steps li strong, .readout li strong { color: var(--ink); font-weight: 600; } .steps .current { color: var(--ink); background: var(--accent-soft); border-radius: var(--radius-xs); padding: 8px 10px; margin-left: -10px; list-style-position: inside; } .table-panel { padding: 4px 6px; overflow-x: auto; } /* Scoped to the wide data tables in the right-hand pane. The editors in the narrow control column set their own, much smaller, minimums. */ .table-panel table { width: 100%; border-collapse: collapse; min-width: 420px; } .data-editor table, .matrix-editor table { min-width: 0; } .table-panel th, .table-panel td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); } th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); font-weight: 700; background: rgba(255, 255, 255, 0.5); } td code, .mono { font-family: var(--mono); font-size: 0.88em; } tr:hover td { background: rgba(26, 122, 110, 0.04); } .two-column { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } /* ── Pills ──────────────────────────────────────────────────── */ .pill-list { display: flex; flex-wrap: wrap; gap: 8px; } .pill-list span { padding: 6px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.72); border: 1px solid var(--line); color: var(--muted); font-size: 0.84rem; } /* ── Footer ─────────────────────────────────────────────────── */ .footer-note { margin-top: 36px; color: var(--muted); line-height: 1.7; } /* ── Breadcrumbs ────────────────────────────────────────────── */ .breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: 0.78rem; color: var(--faint); margin-bottom: 12px; } .breadcrumbs a { text-decoration: none; } .breadcrumbs a:hover { color: var(--accent); } /* ── Algorithm Card Grid ────────────────────────────────────── */ .catalog-grid, .algorithm-list, .related-grid, .detail-grid, .math-grid { display: grid; gap: 18px; } .catalog-grid, .related-grid, .detail-grid, .math-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .algorithm-list { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .algorithm-card, .detail-card, .formula-card, .related-card, .category-banner, .algorithm-shell { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-sm); transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; } .algorithm-card:hover, .detail-card:hover, .formula-card:hover, .related-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line-strong); } .algorithm-card, .detail-card, .related-card, .category-banner { padding: 20px 22px; } .formula-card { overflow: hidden; border-left: 3px solid var(--accent); } .formula-card-body { padding: 18px 20px 16px; } .formula-card h3 { font-size: 1rem; margin-bottom: 6px; color: var(--ink); } .formula-card p { color: var(--muted); font-size: 0.88rem; line-height: 1.6; margin: 0 0 12px; } .formula { display: block; font-family: var(--mono); font-size: 0.83rem; line-height: 1.6; padding: 11px 13px; border-radius: var(--radius-xs); background: var(--math-bg); border: 1px solid var(--math-border); color: var(--ink-soft); overflow-x: auto; white-space: pre-wrap; } .derivation-chain { display: grid; gap: 2px; margin-top: 12px; border-radius: var(--radius-xs); overflow: hidden; background: var(--line); border: 1px solid var(--line); } .derive-line { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 12px; background: var(--derive-bg); font-size: 0.85rem; } .derive-num { font-family: var(--mono); font-size: 0.68rem; font-weight: 700; color: #fff; background: var(--accent); border-radius: 5px; width: 19px; height: 19px; display: grid; place-items: center; } .derive-expr { color: var(--ink-soft); overflow-x: auto; min-width: 0; } .derive-result { font-family: var(--mono); font-size: 0.85rem; font-weight: 700; color: var(--accent-deep); background: var(--accent-soft); padding: 3px 9px; border-radius: 6px; white-space: nowrap; } .derive-annotation { padding: 8px 12px 10px 46px; background: var(--surface); color: var(--muted); font-size: 0.8rem; line-height: 1.55; } .math-step-panel { background: var(--derive-bg); border: 1px solid var(--math-border); border-radius: var(--radius-sm); padding: 16px 18px; margin-top: 14px; } .math-step-panel h4 { font-family: var(--heading); font-size: 1rem; margin: 0 0 10px; color: var(--accent); letter-spacing: 0.01em; } .math-grid { display: grid; gap: 16px; } /* ── Insight Callout ────────────────────────────────────────── */ .callout { padding: 14px 18px; border-left: 4px solid var(--accent); background: var(--accent-soft); border-radius: 0 var(--radius-xs) var(--radius-xs) 0; color: var(--ink); line-height: 1.72; font-size: 0.92rem; } .callout.warm { border-left-color: var(--warm); background: var(--warm-soft); } .callout.danger { border-left-color: var(--danger); background: rgba(176, 48, 48, 0.08); } /* ── Insight box ────────────────────────────────────────────── */ .insight-box { margin-top: 12px; padding: 11px 13px; border-radius: var(--radius-xs); background: var(--warm-soft); border-left: 3px solid var(--warm); color: var(--ink-soft); font-size: 0.84rem; line-height: 1.6; } .insight-box strong { color: var(--accent); } /* ── Algorithm Shell ────────────────────────────────────────── */ .algorithm-shell { padding: 28px; margin-top: 24px; } .algorithm-hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.85fr); gap: 24px; } .algorithm-hero-side { display: grid; gap: 16px; } /* ── Detail Cards (bottom section) ─────────────────────────── */ .detail-card { padding: 24px; border-left: 4px solid transparent; } .detail-card:nth-child(1) { border-left-color: var(--accent); } .detail-card:nth-child(2) { border-left-color: var(--accent-2); } .detail-card:nth-child(3) { border-left-color: var(--ok); } .detail-card:nth-child(4) { border-left-color: var(--warm); } .detail-card h3 { margin-bottom: 12px; font-size: 1.15rem; } .detail-card p { color: var(--muted); line-height: 1.75; margin: 0 0 10px; } .detail-card .formula { font-size: 0.85rem; } .detail-card ul { margin: 10px 0 0; padding-left: 18px; color: var(--muted); line-height: 1.8; } .detail-card ul li + li { margin-top: 4px; } /* ── Workspace note ─────────────────────────────────────────── */ .workspace-note { color: var(--muted); line-height: 1.72; margin-top: 14px; font-size: 0.9rem; } .formula-card code, .detail-card code, .related-card code, .algorithm-card code { font-family: var(--mono); font-size: 0.88em; background: var(--accent-soft); padding: 1px 5px; border-radius: 4px; color: var(--accent); } /* ── Section intro ──────────────────────────────────────────── */ .section-intro { color: var(--muted); line-height: 1.72; margin: 0 0 20px; } .table-note { margin-top: 10px; color: var(--muted); font-size: 0.88rem; } /* ── Step controls ──────────────────────────────────────────── */ .step-controls { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; } /* ── Dense list ─────────────────────────────────────────────── */ .dense-list { margin: 0; padding-left: 18px; color: var(--muted); line-height: 1.72; } .dense-list li + li { margin-top: 8px; } .hero-stat-list { display: grid; gap: 12px; } .hero-stat-list .soft-box { background: rgba(255, 255, 255, 0.58); } .related-card a, .algorithm-card a, .category-banner a { text-decoration: none; } /* ── Algorithm card meta ────────────────────────────────────── */ .algorithm-card h3, .detail-card h3, .related-card h3, .category-banner h3 { margin-bottom: 10px; } .algorithm-card p, .related-card p, .category-banner p { color: var(--muted); line-height: 1.7; font-size: 0.92rem; } .algorithm-card .meta, .category-banner .meta, .detail-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .meta span, .detail-meta span { padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.72); border: 1px solid var(--line); color: var(--muted); font-size: 0.78rem; font-weight: 500; } /* ── Soft box ───────────────────────────────────────────────── */ .soft-box { padding: 16px; border-radius: 16px; background: var(--surface-sunk); border: 1px solid var(--line); } .caption { font-size: 0.88rem; color: var(--muted); } /* ── SVG Styles ─────────────────────────────────────────────── */ .svg-label { font-size: 11px; fill: var(--faint); font-family: var(--body); font-weight: 500; } .svg-title { font-size: 12.5px; fill: var(--ink); font-weight: 700; font-family: var(--body); letter-spacing: -0.01em; } .grid-line { stroke: var(--c-grid); stroke-width: 1; } .axis-line { stroke: var(--c-axis); stroke-width: 1.2; } .curve-primary { fill: none; stroke: var(--c-a); stroke-width: 2.8; } .curve-secondary { fill: none; stroke: var(--c-b); stroke-width: 2.8; stroke-dasharray: 6 6; } .point-a { fill: var(--c-a); } .point-b { fill: var(--c-b); } .point-neutral { fill: var(--c-neutral); } .highlight { stroke: var(--c-node-ring); stroke-width: 3; } .decision-line { stroke: var(--c-ink); stroke-width: 2.4; } .decision-fill-a { fill: rgba(26, 122, 110, 0.1); } .decision-fill-b { fill: rgba(201, 107, 40, 0.08); } .cluster-line { stroke: var(--c-axis); stroke-width: 2.2; } /* ── Responsive ─────────────────────────────────────────────── */ @media (max-width: 980px) { .hero, .lab-grid, .two-column, .algorithm-hero { grid-template-columns: 1fr; } .topbar { border-radius: 28px; } } @media (max-width: 720px) { .site-shell { padding: 14px 14px 60px; } .hero-card, .page-hero, .lab, .module-card, .info-card, .summary-card { border-radius: 20px; } .hero-card, .page-hero { padding: 22px; } .stats-grid, .control-grid { grid-template-columns: 1fr; } .formula { white-space: pre-wrap; font-size: 0.82rem; } .derive-line { grid-template-columns: 22px 1fr; } .derive-result { display: none; } } /* ── Animate formula cards ──────────────────────────────────── */ @keyframes cardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .formula-card { animation: cardIn 0.32s ease-out both; } /* ══════════════════════════════════════════════════════════════ EDITABLE INPUT COMPONENTS The data editor is the heart of "put your own values in and watch the concept move". It appears on every lab, so it has to feel light rather than like a spreadsheet bolted onto the page. ══════════════════════════════════════════════════════════════ */ .matrix-editor { overflow-x: auto; } .matrix-editor table { min-width: 100%; } .editor-slot { min-width: 0; max-width: 100%; } .data-editor, .matrix-editor { max-width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); padding: 14px 16px; box-shadow: none; } .data-editor + .data-editor, .data-editor + .matrix-editor, .matrix-editor + .matrix-editor { margin-top: 14px; } .data-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; } .data-editor-head h4 { margin: 0; font-family: var(--heading); font-size: 1rem; letter-spacing: 0.01em; } .data-editor-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .data-editor-actions .preset-select { width: auto; padding: 6px 10px; font-size: 0.8rem; border-radius: 999px; } .data-editor-hint { margin: 0 0 12px; font-size: 0.82rem; color: var(--muted); line-height: 1.5; } .data-editor-hint.subtle { margin: 10px 0 0; font-style: italic; opacity: 0.85; } .mini-button { border: 1px solid var(--line-strong); background: var(--surface-strong); color: var(--ink); border-radius: 7px; padding: 5px 11px; font-size: 0.76rem; font-weight: 600; cursor: pointer; transition: all 150ms ease; line-height: 1.4; } .mini-button:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-1px); } .mini-button.danger { padding: 2px 9px; font-size: 0.95rem; color: var(--muted); border-color: transparent; } .mini-button.danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; } /* The vertical scrollbar eats ~15px of client width while the table's width:100% still resolves against the wider padding box, which left a few pixels of phantom horizontal scroll. Reserving the gutter with padding removes it. */ .data-editor-scroll { max-height: 300px; overflow-y: auto; overflow-x: hidden; border-radius: var(--radius-xs); width: 100%; max-width: 100%; padding-right: 10px; scrollbar-gutter: stable; } .data-editor table { table-layout: fixed; width: 100%; max-width: 100%; } .data-editor .del-cell { width: 26px; padding-right: 0; } .data-editor tr > *:first-child { padding-left: 0; } .data-editor table, .matrix-editor table { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-size: 0.85rem; } .data-editor thead th, .matrix-editor thead th { position: sticky; top: 0; z-index: 1; text-align: left; padding: 6px 4px; overflow: hidden; text-overflow: ellipsis; font-size: 0.74rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); background: var(--surface-strong); font-weight: 700; } .matrix-editor tbody th { text-align: left; padding: 6px 10px 6px 4px; font-family: var(--mono); font-size: 0.8rem; color: var(--accent); white-space: nowrap; } .data-editor td, .matrix-editor td { padding: 2px 3px; } .data-editor input, .data-editor select, .matrix-editor input { padding: 6px 7px; border-radius: var(--radius-xs); font-family: var(--mono); font-size: 0.8rem; background: #fff; min-width: 0; width: 100%; } .matrix-editor input { text-align: center; } .data-editor tbody tr:hover input, .data-editor tbody tr:hover select { border-color: var(--accent); } /* ── Draggable scatter points ───────────────────────────────── */ .draggable-point { cursor: grab; transition: r 120ms ease, filter 120ms ease; } .draggable-point:hover { filter: drop-shadow(0 0 6px var(--accent-glow)); } .draggable-point:active { cursor: grabbing; } .drag-hint { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--muted); background: var(--accent-soft); border-radius: 999px; padding: 4px 12px; margin-top: 8px; } /* ── Formula substitution rows ──────────────────────────────── */ .substitution { display: grid; gap: 8px; margin-top: 12px; padding: 14px 16px; border-radius: var(--radius-xs); background: var(--derive-bg); border-left: 3px solid var(--accent); } .substitution-row { display: grid; grid-template-columns: minmax(74px, auto) 1fr auto; gap: 12px; align-items: baseline; } .substitution-label { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; } .substitution-expr { overflow-x: auto; } .substitution-value { font-family: var(--mono); font-weight: 700; color: var(--accent); font-size: 0.9rem; white-space: nowrap; } .substitution-note { margin: 0 0 4px; grid-column: 1 / -1; font-size: 0.8rem; color: var(--muted); line-height: 1.5; } /* ── KaTeX integration ──────────────────────────────────────── */ .katex { font-size: 1.03em; } .katex-display { margin: 10px 0; overflow-x: auto; overflow-y: hidden; padding: 2px 0; } .tex-fallback { font-family: var(--mono); font-size: 0.86rem; background: var(--math-bg); padding: 2px 6px; border-radius: 6px; } .formula-tex { display: block; padding: 14px 16px; border-radius: var(--radius-xs); background: var(--math-bg); border: 1px solid var(--math-border); overflow-x: auto; text-align: center; } /* Deep-dive key formulas: same KaTeX block as the lab formula cards, stacked with a little breathing room inside the detail card. */ .detail-formulas { display: grid; gap: 10px; margin-top: 12px; } .detail-formulas .formula-tex { padding: 12px 14px; } /* ── Concept "why it matters" band ──────────────────────────── */ .concept-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 18px 0 6px; } .concept-step { padding: 16px 18px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); position: relative; } .concept-step .idx { font-family: var(--mono); font-size: 0.72rem; font-weight: 700; color: var(--accent); letter-spacing: 0.1em; } .concept-step h4 { margin: 6px 0 6px; font-family: var(--heading); font-size: 0.98rem; } .concept-step p { margin: 0; font-size: 0.85rem; color: var(--muted); line-height: 1.55; } @media (max-width: 720px) { .substitution-row { grid-template-columns: 1fr; gap: 4px; } .data-editor, .matrix-editor { padding: 14px; } .data-editor input, .data-editor select, .matrix-editor input { min-width: 54px; } } /* ══════════════════════════════════════════════════════════════ TABLES — the labs lean on tables heavily (candidate splits, distance matrices, neighbour rankings), so they need to read as data, not as decoration. ══════════════════════════════════════════════════════════════ */ .table-panel table { width: 100%; border-collapse: collapse; font-size: 0.84rem; } .table-panel th { text-align: left; padding: 9px 12px; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); font-weight: 700; border-bottom: 1px solid var(--line-strong); white-space: nowrap; } .table-panel td { padding: 8px 12px; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-variant-numeric: tabular-nums; } .table-panel tbody tr:last-child td { border-bottom: none; } .table-panel tbody tr:hover td { background: var(--surface-sunk); } /* ── Callouts ───────────────────────────────────────────────── */ .callout { padding: 11px 14px; border-radius: var(--radius-xs); background: var(--accent-soft); border-left: 3px solid var(--accent); color: var(--ink-soft); font-size: 0.85rem; line-height: 1.55; } .callout.warm { background: var(--warm-soft); border-left-color: var(--warm); } .callout.danger { background: #fdecea; border-left-color: var(--danger); } /* ── Detail grid at the bottom of every algorithm page ──────── */ .detail-grid, .math-grid, .related-grid, .catalog-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .algorithm-list { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .detail-card h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .detail-card p { color: var(--muted); font-size: 0.9rem; line-height: 1.65; margin: 0 0 10px; } .detail-card ul { margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: 0.88rem; line-height: 1.6; } .detail-card li { margin-bottom: 5px; } /* ── Section headers ────────────────────────────────────────── */ .section { margin-top: 26px; } .section-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; } .section-header h2 { margin-top: 6px; } .section-copy { color: var(--muted); font-size: 0.9rem; max-width: 52ch; margin: 0; } /* ── Cards on index / category pages ────────────────────────── */ .algorithm-card .meta, .category-banner .meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .algorithm-card .meta span, .category-banner .meta span { font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: var(--faint); background: var(--surface-sunk); border: 1px solid var(--line); border-radius: 5px; padding: 3px 8px; } .algorithm-card p, .category-banner p, .related-card p { color: var(--muted); font-size: 0.88rem; line-height: 1.6; margin: 6px 0 0; } .pill-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .pill-list span { font-size: 0.75rem; color: var(--ink-soft); background: var(--surface-sunk); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; } .chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .chip { font-size: 0.78rem; font-weight: 500; color: var(--ink-soft); background: var(--surface-sunk); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; } .footer-note { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--faint); font-size: 0.85rem; line-height: 1.6; } .dense-list { margin: 6px 0 0; padding-left: 18px; color: var(--muted); font-size: 0.86rem; line-height: 1.6; } .dense-list li { margin-bottom: 4px; } .mini-panel h3 { font-size: 0.95rem; margin-bottom: 8px; } .caption { font-size: 0.8rem; color: var(--faint); line-height: 1.55; margin: 6px 0 0; } .mono { font-family: var(--mono); font-size: 0.88em; } /* ── Responsive ─────────────────────────────────────────────── */ @media (max-width: 1080px) { .lab-grid, .hero, .algorithm-hero { grid-template-columns: 1fr; } .controls { position: static; max-height: none; } } @media (max-width: 760px) { .site-shell { padding: 12px 14px 60px; } .topbar { flex-direction: column; align-items: stretch; gap: 10px; border-radius: 14px; } .nav-links { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .nav-links::-webkit-scrollbar { display: none; } .hero-card, .page-hero, .lab { padding: 18px; } .control-grid { grid-template-columns: 1fr; } .derive-line { grid-template-columns: 22px minmax(0, 1fr); } .derive-result { grid-column: 2; justify-self: start; } .derive-annotation { padding-left: 12px; } } /* ══════════════════════════════════════════════════════════════ CLICKABLE CARDS The whole card is the link — no separate "Open page" button. The affordance comes from the hover lift, the title turning accent, and the arrow sliding in. ══════════════════════════════════════════════════════════════ */ .card-link { display: block; text-decoration: none; color: inherit; cursor: pointer; position: relative; padding-right: 44px; } .card-link h3 { transition: color 150ms ease; padding-right: 4px; } .card-link::after { content: '→'; position: absolute; top: 20px; right: 20px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-sunk); border: 1px solid var(--line); color: var(--faint); font-size: 0.85rem; line-height: 1; transition: all 180ms ease; } .card-link:hover h3 { color: var(--accent-deep); } .card-link:hover::after { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateX(3px); } .card-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .card-link:active { transform: translateY(0); } /* Category banners are taller, so the arrow sits a little lower. */ .category-banner.card-link { padding-bottom: 22px; } /* concept-step cards on the Neural Networks index behave the same way */ .concept-step.card-link h4 { transition: color 150ms ease; } .concept-step.card-link:hover h4 { color: var(--accent-deep); } .concept-step.card-link::after { top: 16px; right: 16px; } .concept-step.card-link { transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; } .concept-step.card-link:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line-strong); } /* Two charts side by side inside a lab pane. */ .two-up { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; } /* ══════════════════════════════════════════════════════════════ SITE SHELL — sidebar, search palette, pager, footer ══════════════════════════════════════════════════════════════ */ .shell-layout { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 26px; align-items: start; } body.sidebar-closed .shell-layout { grid-template-columns: minmax(0, 1fr); } body.sidebar-closed .site-sidebar { display: none; } .shell-main { min-width: 0; } /* ── Sidebar ────────────────────────────────────────────────── */ .site-sidebar { position: sticky; top: 78px; max-height: calc(100vh - 100px); overflow-y: auto; padding: 4px 6px 24px 0; scrollbar-width: thin; } .site-sidebar::-webkit-scrollbar { width: 6px; } .site-sidebar::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; } .sidebar-head { padding: 14px 0 10px; } .sidebar-search { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 11px; border-radius: var(--radius-xs); border: 1px solid var(--line-strong); background: var(--surface); color: var(--faint); font-size: 0.84rem; cursor: pointer; transition: all 150ms ease; } .sidebar-search:hover { border-color: var(--accent); color: var(--ink-soft); } .sidebar-group { margin-bottom: 2px; } .sidebar-group-title { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: none; background: transparent; color: var(--ink); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; border-radius: var(--radius-xs); text-align: left; } .sidebar-group-title:hover { background: var(--surface-sunk); } .sidebar-group-title::before { content: '▸'; margin-right: 7px; font-size: 0.7rem; color: var(--faint); transition: transform 160ms ease; display: inline-block; } .sidebar-group.is-open .sidebar-group-title::before { transform: rotate(90deg); } .sidebar-group-title span:first-of-type { flex: 1; } .sidebar-count { font-family: var(--mono); font-size: 0.68rem; font-weight: 600; color: var(--faint); background: var(--surface-sunk); border-radius: 999px; padding: 1px 7px; } .sidebar-group-body { display: none; padding: 2px 0 8px 12px; } .sidebar-group.is-open .sidebar-group-body { display: block; } .sidebar-link { display: block; padding: 6px 10px; border-radius: var(--radius-xs); color: var(--muted); text-decoration: none; font-size: 0.85rem; line-height: 1.4; border-left: 2px solid transparent; transition: color 140ms ease, background 140ms ease, border-color 140ms ease; } .sidebar-link:hover { color: var(--ink); background: var(--surface-sunk); } .sidebar-link.is-current { color: var(--accent-deep); background: var(--accent-soft); border-left-color: var(--accent); font-weight: 600; } .sidebar-home { font-weight: 600; color: var(--ink-soft); margin-bottom: 8px; } .sidebar-overview { font-style: italic; opacity: 0.85; } /* ── Sidebar toggle in the topbar ───────────────────────────── */ .sidebar-toggle { display: grid; gap: 3px; padding: 8px; border: 1px solid transparent; background: transparent; border-radius: 8px; cursor: pointer; margin-right: 2px; } .sidebar-toggle span { display: block; width: 15px; height: 1.8px; background: var(--ink-soft); border-radius: 2px; } .sidebar-toggle:hover { background: var(--surface-sunk); } .topbar-search { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: var(--radius-xs); border: 1px solid var(--line-strong); background: var(--surface-sunk); color: var(--faint); font-size: 0.83rem; cursor: pointer; transition: all 150ms ease; white-space: nowrap; } .topbar-search:hover { border-color: var(--accent); color: var(--ink-soft); } kbd { font-family: var(--mono); font-size: 0.7rem; padding: 2px 5px; border-radius: 4px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--faint); line-height: 1.4; } /* ── Search palette ─────────────────────────────────────────── */ /* `display: flex` below would otherwise override the `hidden` attribute, leaving the palette permanently on screen. */ .palette-overlay[hidden] { display: none; } .palette-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(16, 23, 32, 0.42); backdrop-filter: blur(3px); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 20px 20px; } .palette { width: min(620px, 100%); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; animation: paletteIn 140ms ease-out; } @keyframes paletteIn { from { opacity: 0; transform: translateY(-8px) scale(0.99); } to { opacity: 1; transform: none; } } .palette input { width: 100%; border: none; border-bottom: 1px solid var(--line); border-radius: 0; padding: 16px 20px; font-size: 1rem; background: transparent; } .palette input:focus { outline: none; box-shadow: none; border-color: var(--line); } .palette-results { max-height: 46vh; overflow-y: auto; padding: 6px; } .palette-item { display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'kind title' 'kind sub'; gap: 1px 12px; padding: 9px 12px; border-radius: var(--radius-xs); text-decoration: none; color: inherit; } .palette-item.is-active { background: var(--accent-soft); } .palette-kind { grid-area: kind; align-self: center; font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: var(--faint); background: var(--surface-sunk); border: 1px solid var(--line); border-radius: 5px; padding: 3px 7px; white-space: nowrap; } .palette-item.is-active .palette-kind { color: var(--accent-deep); border-color: var(--accent); } .palette-title { grid-area: title; font-weight: 600; font-size: 0.92rem; color: var(--ink); } .palette-sub { grid-area: sub; font-size: 0.8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .palette-empty { padding: 26px 16px; text-align: center; color: var(--muted); font-size: 0.9rem; } .palette-foot { display: flex; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--line); background: var(--surface-sunk); font-size: 0.74rem; color: var(--faint); } .palette-foot span { display: inline-flex; align-items: center; gap: 5px; } body.palette-open { overflow: hidden; } /* ── Prev / next pager ──────────────────────────────────────── */ .pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; } .pager-link { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); text-decoration: none; transition: all 160ms ease; } .pager-link:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .pager-next { text-align: right; } .pager-dir { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: var(--faint); } .pager-title { font-weight: 600; color: var(--ink); font-size: 0.95rem; } .pager-link:hover .pager-title { color: var(--accent-deep); } /* ── Footer ─────────────────────────────────────────────────── */ .site-footer { margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--line); } /* Deliberately link-free — the sidebar, the home index and the search palette all already carry the full page list. */ .footer-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 0.82rem; color: var(--faint); } .footer-brand { display: grid; gap: 5px; } .footer-brand .brand { font-size: 0.95rem; } .footer-meta { display: grid; gap: 5px; text-align: right; } @media (max-width: 620px) { .footer-meta { text-align: left; } } /* ── Responsive shell ───────────────────────────────────────── */ @media (max-width: 1080px) { .shell-layout { grid-template-columns: minmax(0, 1fr); } .site-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 274px; z-index: 80; background: var(--surface); border-right: 1px solid var(--line); box-shadow: var(--shadow-lg); max-height: none; padding: 18px 14px 24px; } } @media (min-width: 1081px) { .site-sidebar { background: transparent; border: none; box-shadow: none; } } @media (max-width: 760px) { .pager { grid-template-columns: 1fr; } .pager-next { text-align: left; } .topbar-search-label { display: none; } .topbar-search kbd { display: none; } .palette-overlay { padding: 8vh 12px 12px; } .palette-item { grid-template-columns: 1fr; grid-template-areas: 'kind' 'title' 'sub'; gap: 3px; } .palette-kind { justify-self: start; } } /* The sidebar carries the full page tree, so the topbar's category links would just be a second copy of it. Keep the bar to brand + search and let the toggle restore the sidebar when it is collapsed. */ body.has-shell .topbar .nav-links { display: none; } body.has-shell .topbar { justify-content: flex-start; gap: 12px; } body.has-shell .topbar .brand { margin-right: auto; } /* ══════════════════════════════════════════════════════════════ THEME TOGGLE, SKIP LINK, FOCUS, REDUCED MOTION ══════════════════════════════════════════════════════════════ */ .theme-toggle { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-xs); border: 1px solid var(--line-strong); background: var(--surface-sunk); color: var(--ink-soft); font-size: 0.95rem; line-height: 1; cursor: pointer; transition: all 150ms ease; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent-deep); } /* Skip link — visually hidden until focused. */ .skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: var(--radius-xs); background: var(--accent); color: #fff; font-weight: 600; font-size: 0.88rem; text-decoration: none; transition: top 160ms ease; } .skip-link:focus { top: 12px; outline: 2px solid var(--ink); outline-offset: 2px; } /* A single visible focus treatment for everything interactive. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); } /* Dark-theme adjustments for surfaces that assumed a light backdrop. */ :root[data-theme="dark"] .topbar { background: rgba(22, 30, 39, 0.86); } :root[data-theme="dark"] .data-editor input, :root[data-theme="dark"] .data-editor select, :root[data-theme="dark"] .matrix-editor input { background: var(--surface-sunk); color: var(--ink); } :root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background: var(--surface-sunk); color: var(--ink); } :root[data-theme="dark"] .button.primary { color: #06231f; } :root[data-theme="dark"] .skip-link { color: #06231f; } :root[data-theme="dark"] .palette-overlay { background: rgba(0, 0, 0, 0.62); } :root[data-theme="dark"] .card-link::after { background: var(--surface-sunk); } :root[data-theme="dark"] .katex { color: var(--ink); } :root[data-theme="dark"] .formula-tex, :root[data-theme="dark"] .formula { background: var(--math-bg); } /* Respect a reduced-motion preference: keep state changes, drop the movement. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .card-link:hover, .pager-link:hover, .algorithm-card:hover, .detail-card:hover, .formula-card:hover, .related-card:hover, .concept-step.card-link:hover { transform: none; } } /* Scrollbars inside panels default to the light OS style, which reads as a bright stripe on a dark card. */ .controls, .data-editor-scroll, .palette-results, .site-sidebar, .table-panel { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } .controls::-webkit-scrollbar, .data-editor-scroll::-webkit-scrollbar, .palette-results::-webkit-scrollbar, .table-panel::-webkit-scrollbar { width: 8px; height: 8px; } .controls::-webkit-scrollbar-track, .data-editor-scroll::-webkit-scrollbar-track, .palette-results::-webkit-scrollbar-track, .table-panel::-webkit-scrollbar-track { background: transparent; } .controls::-webkit-scrollbar-thumb, .data-editor-scroll::-webkit-scrollbar-thumb, .palette-results::-webkit-scrollbar-thumb, .table-panel::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; } :root[data-theme="dark"] { color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } /* ══════════════════════════════════════════════════════════════ LIVE HERO The landing page opens inside a running demonstration rather than on a grid of links. ══════════════════════════════════════════════════════════════ */ .hero-live { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 0.95fr); gap: 34px; align-items: center; padding: 30px 0 20px; } .hero-copy h1 { font-size: clamp(2.1rem, 4vw, 3.2rem); line-height: 1.06; margin-top: 10px; } .hero-copy h1 em { font-style: normal; background: linear-gradient(120deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero-copy .lead { font-size: 1.05rem; max-width: 46ch; } .hero-scale { margin: 20px 0 0; font-size: 0.86rem; color: var(--muted); } .hero-scale strong { color: var(--accent-deep); font-weight: 700; } /* ── Stage ──────────────────────────────────────────────────── */ .hero-stage { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-lg); overflow: hidden; } .hero-stage-inner { position: relative; background: var(--c-plot-bg); border-bottom: 1px solid var(--line); } .hero-stage svg { display: block; width: 100%; height: auto; cursor: crosshair; } .hero-stage svg:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .hero-hint { position: absolute; left: 14px; bottom: 12px; font-size: 0.76rem; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; pointer-events: none; opacity: 0.92; animation: hintPulse 2.6s ease-in-out infinite; } /* Once someone has clicked, the instruction has done its job. */ .hero-stage.has-touched .hero-hint { display: none; } @keyframes hintPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } .hero-stat { position: absolute; right: 14px; top: 12px; font-family: var(--mono); font-size: 0.74rem; color: var(--accent-deep); background: var(--accent-soft); border-radius: 999px; padding: 4px 11px; pointer-events: none; } .hero-stage figcaption { padding: 15px 18px 16px; } .hero-caption-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 7px; } .hero-running { font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--faint); display: inline-flex; align-items: center; gap: 6px; } .hero-running::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: runningPulse 1.6s ease-in-out infinite; } @keyframes runningPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } } .hero-caption-head strong { font-family: var(--heading); font-size: 1.02rem; color: var(--ink); flex: 1; } .hero-stage figcaption p { margin: 0 0 12px; font-size: 0.86rem; line-height: 1.55; color: var(--muted); min-height: 2.7em; } .hero-chips { display: flex; flex-wrap: wrap; gap: 7px; } .hero-chip { border: 1px solid var(--line-strong); background: var(--surface-sunk); color: var(--muted); border-radius: 999px; padding: 5px 13px; font-size: 0.79rem; font-weight: 600; cursor: pointer; transition: all 150ms ease; } .hero-chip:hover { color: var(--ink); border-color: var(--accent); } .hero-chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; } :root[data-theme="dark"] .hero-chip.is-active { color: #06231f; } @media (max-width: 980px) { .hero-live { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 18px; } .hero-copy .lead { max-width: none; } } @media (prefers-reduced-motion: reduce) { .hero-hint, .hero-running::before { animation: none; } } /* ══════════════════════════════════════════════════════════════ QUESTION CARDS A reason to click, rather than a label. Each carries a generated sketch of the thing it leads to. ══════════════════════════════════════════════════════════════ */ .question-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 16px; } .q-card { display: grid; grid-template-rows: auto 1fr; text-decoration: none; color: inherit; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; } .q-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--accent); } /* Fixed height so the viewBox letterboxes into a thumbnail instead of scaling up into a poster on wide cards. */ .q-sketch { display: block; width: 100%; height: 132px; background: var(--c-plot-bg); border-bottom: 1px solid var(--line); } .q-body { padding: 16px 18px 18px; display: grid; align-content: start; gap: 7px; } .q-body h3 { font-size: 1.02rem; line-height: 1.32; font-family: var(--heading); transition: color 160ms ease; } .q-card:hover .q-body h3 { color: var(--accent-deep); } .q-body p { margin: 0; font-size: 0.86rem; line-height: 1.55; color: var(--muted); } .q-go { margin-top: 4px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; color: var(--faint); display: inline-flex; align-items: center; gap: 6px; transition: color 160ms ease, gap 160ms ease; } .q-card:hover .q-go { color: var(--accent); gap: 10px; } /* ══════════════════════════════════════════════════════════════ COMPACT INDEX Everything, as text, in columns — replaces a grid of 42 identical cards that duplicated the sidebar. ══════════════════════════════════════════════════════════════ */ /* Exactly one column per category on wide screens so the last one does not wrap onto a row of its own. */ .index-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 22px 24px; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); } .index-group h3 { display: flex; align-items: baseline; gap: 8px; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--body); font-weight: 700; color: var(--faint); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); } .index-group h3 a { color: var(--ink); text-decoration: none; } .index-group h3 a:hover { color: var(--accent-deep); } .index-group h3 span { margin-left: auto; font-family: var(--mono); font-size: 0.7rem; color: var(--faint); } .index-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; } .index-group a { color: var(--muted); text-decoration: none; font-size: 0.85rem; line-height: 1.4; display: block; padding: 2px 0; transition: color 140ms ease, padding-left 140ms ease; } .index-group li a:hover { color: var(--accent-deep); padding-left: 5px; } .index-section .section-copy kbd { margin: 0 2px; } @media (min-width: 1100px) { .index-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (max-width: 620px) { .index-grid { padding: 18px; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } } /* ══════════════════════════════════════════════════════════════ TRACK Category pages present their concepts as a numbered route with a connecting spine, not an unordered grid — these pages are meant to be read in order and every one links to the next. ══════════════════════════════════════════════════════════════ */ .track { display: grid; gap: 0; position: relative; margin-top: 18px; } .track-step { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 15px 18px 15px 0; text-decoration: none; color: inherit; border-bottom: 1px solid var(--line); position: relative; transition: background 160ms ease; } .track-step:first-child { border-top: 1px solid var(--line); } .track-step:hover { background: var(--surface-sunk); } /* The spine: a vertical line joining every step, broken at the ends. */ .track-step::before { content: ''; position: absolute; left: 28px; top: 0; bottom: 0; width: 2px; background: var(--line); } .track-step:first-child::before { top: 50%; } .track-step:last-child::before { bottom: 50%; } .track-num { position: relative; z-index: 1; justify-self: center; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-strong); font-family: var(--mono); font-size: 0.76rem; font-weight: 700; color: var(--faint); transition: all 180ms ease; } .track-step:hover .track-num { border-color: var(--accent); background: var(--accent); color: #fff; } :root[data-theme="dark"] .track-step:hover .track-num { color: #06231f; } .track-body { display: grid; gap: 3px; min-width: 0; } .track-title { font-family: var(--heading); font-size: 1.02rem; font-weight: 700; color: var(--ink); transition: color 160ms ease; } .track-step:hover .track-title { color: var(--accent-deep); } .track-summary { font-size: 0.86rem; line-height: 1.5; color: var(--muted); } .track-go { color: var(--faint); font-size: 1.05rem; transition: transform 180ms ease, color 180ms ease; } .track-step:hover .track-go { color: var(--accent); transform: translateX(4px); } @media (max-width: 620px) { .track-step { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding-right: 4px; } .track-step::before { left: 21px; } .track-num { width: 26px; height: 26px; font-size: 0.68rem; } .track-go { display: none; } }