:root { color-scheme: light; --surface-1: #fcfcfb; --page-plane: #f9f9f7; --text-primary: #201f1d; --text-secondary: #6b6a64; --text-muted: #9d9b93; --gridline: #edece7; --baseline: #d8d7cf; --border: rgba(11, 11, 11, 0.06); --series-blue: #2a78d6; --series-orange: #eb6834; --series-green: #1f9d55; --series-purple: #8b5cf6; --series-teal: #0f9b8e; --status-good: #0ca30c; --status-critical: #d03b3b; --tint-good: rgba(12, 163, 12, 0.05); --tint-bad: rgba(208, 59, 59, 0.05); } /* Light is the default regardless of OS setting. Dark is opt-in only, via the toggle button (adds data-theme="dark" to ). */ :root[data-theme="dark"] { color-scheme: dark; --surface-1: #1a1a19; --page-plane: #0d0d0d; --text-primary: #ffffff; --text-secondary: #c3c2b7; --text-muted: #898781; --gridline: #2c2c2a; --baseline: #383835; --border: rgba(255, 255, 255, 0.10); --series-blue: #3987e5; --series-orange: #d95926; --series-green: #3cb873; --series-purple: #a78bfa; --series-teal: #2dd4c4; --status-good: #0ca30c; --status-critical: #e66767; --tint-good: rgba(12, 163, 12, 0.10); --tint-bad: rgba(230, 103, 103, 0.10); } * { box-sizing: border-box; } /* Tool pages render inside the main site's own (via base.html), so this stylesheet must NOT touch html/body directly — that would override the shared sidebar layout's own background/font for every page on the site, not just /tools. Everything tool-specific is scoped to .tools-page instead (see below). */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Tool pages now render inside the main site's sidebar layout (#main-wrapper already supplies the outer padding AND the page background) — this caps reading width and adds a little breathing room, same pattern as .about-page/.search-page, and scopes the tool design system's own font/colors/overflow-safety to just this subtree instead of the whole document. No background of its own — it sits directly on the page, not in a separate boxed-off area. */ .tools-page { max-width: 1400px; padding: 4px 0 40px; margin: 0 auto; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.55; color: var(--text-primary); -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2 { font-weight: 600; letter-spacing: -0.01em; } /* ---------- Tools sub-nav ---------- */ /* Tool pages now live inside the site's own sidebar layout — Home, Interactive Tools, search, and the theme toggle are all handled by the shared sidebar/header. This is just the small ROC AUC / Regularization tab switcher for moving between the two guides. */ .tools-subnav { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 24px; } .tools-subnav a { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); text-decoration: none; white-space: nowrap; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--gridline); transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .tools-subnav a:hover { color: var(--text-primary); background: var(--page-plane); border-color: var(--baseline); } .tools-subnav a.is-active { color: #fff; background: var(--series-blue); border-color: var(--series-blue); } /* On phones and tablets, ~50 nav pills push all real content below the fold before a visitor sees anything. Collapse behind a toggle there; desktop is untouched (the toggle stays display:none above 1024px). */ .tools-subnav-toggle { display: none; } @media (max-width: 1024px) { .tools-subnav-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin-bottom: 12px; padding: 10px 14px; font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); background: var(--page-plane); border: 1px solid var(--gridline); border-radius: 10px; cursor: pointer; } .tools-subnav-toggle-icon { width: 16px; height: 16px; flex-shrink: 0; transition: transform 0.15s ease; } .tools-subnav-toggle.is-open .tools-subnav-toggle-icon { transform: rotate(180deg); } .tools-subnav { max-height: 0; overflow: hidden; margin-bottom: 0; } .tools-subnav.is-open { max-height: 3000px; margin-bottom: 24px; } } /* ---------- Hero ---------- */ .hero-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .kicker { margin: 0; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } .hero .kicker { margin-bottom: 10px; } .hero h1 { margin: 0 0 18px; font-size: clamp(1.7rem, 4vw, 2.35rem); line-height: 1.2; } .hero .lede { margin: 0; font-size: 1.05rem; color: var(--text-secondary); max-width: 62ch; } .hero--home { margin-bottom: 8px; } /* Regularization page: global toggle for the green test-set dots */ .reg-toggle { margin-top: 20px; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; } .reg-toggle input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .reg-toggle-switch { flex: 0 0 auto; width: 34px; height: 20px; border-radius: 999px; background: var(--gridline); border: 1px solid var(--border); position: relative; transition: background-color 0.15s ease; } .reg-toggle-switch::before { content: ""; position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface-1); box-shadow: 0 0 0 1px var(--border); transition: transform 0.15s ease; } .reg-toggle input:checked + .reg-toggle-switch { background: var(--series-green); border-color: var(--series-green); } .reg-toggle input:checked + .reg-toggle-switch::before { transform: translateX(14px); } .reg-toggle input:focus-visible + .reg-toggle-switch { box-shadow: 0 0 0 2px var(--series-green); } .reg-toggle-label { font-size: 0.85rem; color: var(--text-secondary); } .reg-toggle-label .key { margin: 0 1px; } .reg-svg.hide-test-dots .reg-test-dot { display: none; } .reg-toggle--inline { margin-top: 8px; gap: 8px; } .reg-toggle--inline .reg-toggle-switch { width: 28px; height: 16px; } .reg-toggle--inline .reg-toggle-switch::before { width: 12px; height: 12px; } .reg-toggle--inline input:checked + .reg-toggle-switch::before { transform: translateX(12px); } .reg-toggle--inline .reg-toggle-label { font-size: 0.78rem; } /* ---------- Home: search + flag filters ---------- */ .topic-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px; margin-top: 28px; } .topic-search { position: relative; margin-top: 0; max-width: 360px; flex: 1 1 260px; } .topic-search-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--text-muted); pointer-events: none; } .topic-search-input { width: 100%; padding: 9px 14px 9px 36px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary); font-family: inherit; font-size: 0.86rem; } .topic-search-input::placeholder { color: var(--text-muted); } .topic-search-input:focus { outline: none; border-color: var(--series-blue); } .topic-search-empty { margin-top: 20px; font-size: 0.86rem; color: var(--text-secondary); } .flag-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 auto; } .flag-chip { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); background: var(--surface-1); border: 1px solid var(--border); border-radius: 999px; padding: 6px 13px; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease; } .flag-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--chip-color, var(--text-muted)); flex: 0 0 auto; } .flag-chip:hover { border-color: var(--chip-color, var(--baseline)); color: var(--text-primary); } .flag-chip.is-active { background: var(--chip-color, var(--series-blue)); border-color: var(--chip-color, var(--series-blue)); color: #fff; } .flag-chip.is-active .flag-chip-dot { background: #fff; } .flag-chip.is-active:active { transform: scale(0.97); } .flag-clear { font: inherit; font-size: 0.76rem; font-weight: 600; color: var(--text-muted); background: none; border: none; cursor: pointer; padding: 6px 4px; text-decoration: underline; text-underline-offset: 2px; } .flag-clear:hover { color: var(--text-primary); } .topic-card-tags { display: flex; flex-wrap: wrap; gap: 5px 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--gridline); width: 100%; } .topic-card-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 0.66rem; font-weight: 600; color: var(--text-muted); } /* ---------- Home: topic grid ---------- */ .topic-grid { margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } .topic-card { display: flex; flex-direction: column; align-items: flex-start; padding: 18px 20px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; text-decoration: none; color: inherit; transition: border-color 0.15s ease, transform 0.15s ease; } /* The search box hides non-matching cards via the `hidden` attribute — but `.topic-card { display: flex }` above has the same specificity as the browser's own `[hidden]{display:none}` rule and comes later, so it wins and the "hidden" cards stayed visible. This makes hidden win again. */ .topic-card[hidden] { display: none; } .topic-card:hover { border-color: var(--series-blue); transform: translateY(-2px); } .topic-card-emoji { font-size: 1.3rem; margin-bottom: 10px; } .topic-card-eyebrow { margin: 0 0 5px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); } .topic-card-title { margin: 0 0 6px; font-size: 1.02rem; } .topic-card-blurb { margin: 0; font-size: 0.82rem; color: var(--text-secondary); flex: 1; } /* ---------- Basics ---------- */ .basics { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--border); } .basics-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: stretch; } .basics-text h2 { font-size: 1.05rem; margin: 0 0 8px; } .basics-text h2:not(:first-child) { margin-top: 22px; } .basics-text p { margin: 0; max-width: 65ch; color: var(--text-secondary); font-size: 0.97rem; } /* Fills the full height of the .basics-grid row (matches the text column instead of floating a short box above a lot of empty space below it). */ .matrix-explainer { display: flex; } .mini-matrix { display: grid; grid-template-columns: auto 1fr 1fr; gap: 4px; align-items: stretch; flex: 1; } .mini-matrix-corner {} .mini-matrix-colhead, .mini-matrix-rowhead { font-size: 0.72rem; color: var(--text-muted); display: flex; align-items: center; padding: 4px 2px; } .mini-matrix-colhead { justify-content: center; text-align: center; } .mini-matrix-rowhead { justify-content: flex-end; text-align: right; } .mini-cell { border-radius: 8px; padding: 20px; background: var(--surface-1); display: flex; flex-direction: column; justify-content: center; gap: 6px; border-left: 3px solid transparent; } .mini-cell--good { background: var(--tint-good); border-left-color: var(--status-good); } .mini-cell--bad { background: var(--tint-bad); border-left-color: var(--status-critical); } .mini-cell-label { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; } .mini-cell-name { font-size: 1.05rem; font-weight: 600; } .mini-cell-tag { font-size: 0.78rem; color: var(--text-secondary); font-weight: 600; } .transition { margin: 32px 0 0; padding: 16px 18px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; font-size: 0.95rem; color: var(--text-secondary); } .transition strong { color: var(--text-primary); } /* ---------- Glossary ---------- */ .glossary { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--border); } .glossary h2 { font-size: 1.05rem; margin: 0 0 8px; } .glossary-setup { margin: 0 0 22px; max-width: 75ch; font-size: 0.92rem; color: var(--text-secondary); } .glossary-setup strong { color: var(--text-primary); } .glossary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .glossary-term { min-width: 0; background: var(--surface-1); border: 1px solid var(--border); border-left: 3px solid var(--series-blue); border-radius: 10px; padding: 16px 18px; transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .glossary-term:hover { border-color: var(--baseline); border-left-color: var(--series-blue); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); } .glossary-name { font-size: 0.88rem; font-weight: 700; margin-bottom: 6px; } .glossary-alt { font-size: 0.72rem; font-weight: 500; color: var(--text-muted); margin-left: 4px; } .glossary-def { margin: 0; font-size: 0.85rem; line-height: 1.5; color: var(--text-secondary); } .glossary-def + .glossary-eq { margin-top: 8px; } .glossary-eq { column-gap: 6px; row-gap: 2px; } .glossary-eq .eq-label, .glossary-eq .eq-expr { font-size: 0.72rem; color: var(--text-muted); } .glossary-eq .eq-expr strong { color: var(--text-primary); } /* ---------- Scenario sections ---------- */ .scenario { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--border); } .eyebrow { margin: 0 0 6px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); } .scenario h2 { margin: 0 0 10px; font-size: 1.4rem; } .scenario-head { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: start; } @media (max-width: 860px) { .scenario-head { grid-template-columns: 1fr; } } .story { margin: 0; color: var(--text-secondary); max-width: 65ch; } .cost-chips { display: flex; flex-direction: column; gap: 10px; } .chip { padding: 12px 14px; border-radius: 8px; background: var(--tint-bad); border-left: 3px solid var(--status-critical); } .chip-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; } .chip-tag { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--status-critical); } .chip-value { flex: 0 0 auto; font-size: 1.15rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; } .chip-value-unit { font-size: 0.7rem; font-weight: 600; color: var(--text-secondary); margin-left: 3px; } .chip-text { display: block; font-size: 0.88rem; color: var(--text-secondary); } .chip-ratio { display: inline-block; margin-top: 6px; font-size: 0.74rem; font-weight: 700; color: var(--status-critical); } /* ---------- Panel layout ---------- */ .panel { margin-top: 22px; display: grid; grid-template-columns: minmax(240px, 280px) minmax(260px, 320px) 1fr; gap: 28px; padding: 26px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; } @media (max-width: 1180px) { .panel { grid-template-columns: 1fr 1fr; } .panel-col--charts { grid-column: 1 / -1; } } @media (max-width: 720px) { .panel { grid-template-columns: 1fr; } .panel-col--charts { grid-column: auto; } .basics-grid { grid-template-columns: 1fr; } } .panel-col--matrix { display: flex; flex-direction: column; gap: 18px; } .panel-col--metrics { margin: 0; display: flex; flex-direction: column; gap: 16px; } .panel-col--charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; align-content: start; } .panel-col--charts .metric--cost { grid-column: 1 / -1; } /* Confusion matrix */ .matrix { display: grid; grid-template-columns: auto 1fr 1fr; gap: 4px; align-items: stretch; } .matrix-corner {} .matrix-colhead, .matrix-rowhead { font-size: 0.72rem; color: var(--text-muted); display: flex; align-items: center; padding: 4px 2px; } .matrix-colhead { justify-content: center; text-align: center; } .matrix-cell { border-radius: 8px; padding: 10px 8px; text-align: center; border-left: 3px solid transparent; display: flex; flex-direction: column; gap: 2px; justify-content: center; } .matrix-cell--good { background: var(--tint-good); border-left-color: var(--status-good); } .matrix-cell--bad { background: var(--tint-bad); border-left-color: var(--status-critical); } .cell-value { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; } .cell-label { font-size: 0.68rem; color: var(--text-muted); } /* Metrics list */ .metrics { margin: 0; } .metric { padding: 10px 0; border-bottom: 1px solid var(--gridline); } .metric:last-child { border-bottom: none; } .metric dt { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 6px; } .formula-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .formula-eq { font-size: 0.8rem; color: var(--text-muted); } .frac { display: inline-flex; flex-direction: column; align-items: center; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.72rem; line-height: 1.4; font-variant-numeric: tabular-nums; } .frac-num, .frac-den { padding: 0 3px; white-space: nowrap; } .frac-num { border-bottom: 1.3px solid currentColor; } .frac--symbol { color: var(--text-muted); } .frac--value { color: var(--text-secondary); font-weight: 600; } .formula-symbol { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; } .formula-symbol--value { color: var(--text-secondary); font-weight: 600; } .metric dd { margin: 0 0 0 auto; font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; } /* Aligned equals-chain: label column + "= …" column, so every "=" lines up */ .eq-chain { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; row-gap: 3px; align-items: baseline; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .eq-label { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; } .eq-expr { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; } .eq-result { color: var(--text-secondary); font-weight: 700; } .metric--cost { padding: 12px 14px; background: var(--tint-bad); border-bottom: none; border-left: 3px solid var(--status-critical); border-radius: 8px; transition: background-color 0.15s ease, border-color 0.15s ease; } .metric--cost.metric dd.eq-chain { margin: 0; } .metric--cost .eq-result { font-size: 1.3rem; color: var(--text-primary); } .metric-unit { font-size: 0.78rem; font-weight: 500; color: var(--text-secondary); } .scenario.at-optimal .metric--cost { background: var(--tint-good); border-left-color: var(--status-good); } .scenario.at-optimal .metric--cost dt::after { content: " · lowest cost"; color: var(--status-good); font-weight: 600; } /* Slider */ .slider-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px; } .slider-row label { font-size: 0.78rem; color: var(--text-muted); } .slider-row output { font-size: 0.95rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-primary); } .slider-row input[type="range"] { grid-column: 1 / -1; -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--series-blue) 50%, var(--gridline) 50%); outline: none; } .slider-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--series-blue); border: 2px solid var(--surface-1); box-shadow: 0 0 0 1px var(--border); cursor: pointer; } .slider-row input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--series-blue); border: 2px solid var(--surface-1); box-shadow: 0 0 0 1px var(--border); cursor: pointer; } .slider-row input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--gridline); } /* Charts */ .chart-block { display: flex; flex-direction: column; gap: 6px; } .chart-title { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.85rem; font-weight: 600; } .chart-title-sub { font-size: 0.75rem; font-weight: 500; color: var(--text-muted); font-variant-numeric: tabular-nums; } .chart-formula { margin: 0; display: flex; flex-direction: column; gap: 2px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.7rem; color: var(--text-muted); } .chart-formula-line { white-space: nowrap; } .chart-formula-line:last-child { color: var(--text-secondary); font-weight: 600; } .chart-formula-eq { column-gap: 6px; row-gap: 2px; } .chart-formula-eq .eq-label, .chart-formula-eq .eq-expr { font-size: 0.68rem; } .chart-formula-eq .eq-result { color: var(--text-secondary); } svg.roc-svg, svg.cost-svg { width: 100%; height: auto; display: block; } .chart-grid { stroke: var(--gridline); stroke-width: 1; } .roc-axis, .cost-axis { stroke: var(--baseline); stroke-width: 1.2; } .roc-diag { stroke: var(--text-muted); stroke-width: 1.1; stroke-dasharray: 4 4; } .roc-line { fill: none; stroke: var(--series-blue); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .roc-fill { fill: var(--series-blue); opacity: 0.08; stroke: none; } .roc-marker { fill: var(--series-blue); stroke: var(--surface-1); stroke-width: 1.8; } .cost-line { fill: none; stroke: var(--series-orange); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .cost-fill { fill: var(--series-orange); opacity: 0.08; stroke: none; } .cost-refline { stroke: var(--gridline); stroke-width: 1.2; } .cost-current { stroke: var(--text-secondary); stroke-width: 1.1; opacity: 0.55; } .cost-marker { fill: var(--series-orange); stroke: var(--surface-1); stroke-width: 1.8; } .cost-optimal { fill: var(--status-good); stroke: var(--surface-1); stroke-width: 1.8; } .chart-axis-label { font-size: 9px; fill: var(--text-muted); } .chart-caption { margin: 0; font-size: 0.75rem; color: var(--text-muted); } .key { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 3px; vertical-align: middle; position: relative; top: -1px; } .key--blue { background: var(--series-blue); } .key--orange { background: var(--series-orange); } .key--good { background: var(--status-good); } .key--diag { background: none; border-top: 1px dashed var(--text-muted); height: 0; width: 12px; } /* Verdict */ .verdict { margin-top: 18px; padding: 16px 18px; border-radius: 10px; background: var(--surface-1); border: 1px solid var(--border); } .verdict p { margin: 0; font-size: 0.95rem; color: var(--text-secondary); } .verdict-stat { margin-top: 8px !important; font-weight: 600; color: var(--text-primary) !important; } /* Footer */ .page-footer { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--border); } .page-footer p { margin: 0; font-size: 0.76rem; color: var(--text-muted); } /* ---------- Regularization page ---------- */ .fit-triad { margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } @media (max-width: 720px) { .fit-triad { grid-template-columns: 1fr; } } .fit-triad-card { padding: 14px 16px; border-radius: 10px; border: 1px solid var(--border); border-left: 3px solid var(--baseline); background: var(--surface-1); } .fit-triad-card--bad { border-left-color: var(--status-critical); background: var(--tint-bad); } .fit-triad-card--good { border-left-color: var(--status-good); background: var(--tint-good); } .fit-triad-card h3 { margin: 0 0 4px; font-size: 0.88rem; } .fit-triad-card p { margin: 0; font-size: 0.82rem; color: var(--text-secondary); } .formula-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--gridline); color: var(--text-secondary); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.76rem; font-weight: 600; } svg.reg-svg { width: 100%; height: auto; display: block; } .reg-axis { stroke: var(--baseline); stroke-width: 1.2; } .reg-true-line { fill: none; stroke: var(--text-muted); stroke-width: 1.3; stroke-dasharray: 4 4; } .reg-fit-line { fill: none; stroke: var(--series-blue); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .reg-overfit-line { fill: none; stroke: var(--status-critical); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .reg-dot { fill: var(--text-secondary); stroke: var(--surface-1); stroke-width: 1.2; } .reg-test-dot { fill: var(--series-green); stroke: var(--surface-1); stroke-width: 1.2; } .reg-train-line { fill: none; stroke: var(--series-blue); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .reg-test-error-line { fill: none; stroke: var(--series-green); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .reg-trend-current { stroke: var(--text-secondary); stroke-width: 1.1; opacity: 0.5; } .reg-trend-marker { stroke: var(--surface-1); stroke-width: 1.6; } .reg-trend-marker--train { fill: var(--series-blue); } .reg-trend-marker--test { fill: var(--series-green); } .reg-trend-best { fill: none; stroke: var(--status-good); stroke-width: 1.6; } .reg-overfit-panel { margin-top: 22px; padding: 24px 26px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; align-items: center; } @media (max-width: 900px) { .reg-overfit-panel { grid-template-columns: minmax(0, 1fr); } } .reg-overfit-text { min-width: 0; } .reg-overfit-text h2 { margin: 0 0 10px; font-size: 1.1rem; } .reg-overfit-text p { margin: 0 0 10px; color: var(--text-secondary); font-size: 0.94rem; } .reg-overfit-stat { display: inline-flex; align-items: baseline; gap: 6px; margin-top: 6px; padding: 8px 12px; border-radius: 8px; background: var(--tint-bad); border-left: 3px solid var(--status-critical); font-size: 0.85rem; color: var(--text-secondary); } .reg-overfit-stat strong { font-size: 1rem; color: var(--text-primary); } .reg-overfit-stat--test { background: var(--tint-good); border-left-color: var(--series-green); } .reg-panel-trend .chart-title { margin-bottom: 4px; } .reg-method-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; } /* Full loss formula per method: MSE term (identical across all three) plus that method's own penalty. Same "loss(β)" label in every panel means the auto-sized label column — and so the "=" after it — lines up across all three sections even though each is its own independent grid. */ .reg-loss-eq { margin-bottom: 14px; } .reg-loss-eq .eq-label { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); } .reg-loss-eq .eq-expr { font-size: 0.85rem; color: var(--text-secondary); white-space: normal; overflow-wrap: anywhere; } .reg-penalty-term { color: var(--text-primary); font-weight: 700; } @media (max-width: 480px) { .reg-loss-eq { grid-template-columns: 1fr; row-gap: 2px; } } .reg-equation { min-width: 0; padding: 12px 14px; background: var(--page-plane); border: 1px solid var(--border); border-radius: 8px; display: flex; flex-direction: column; gap: 4px; overflow-x: auto; grid-column: 1 / -1; } .reg-equation-label { font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; } .reg-equation-text { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.86rem; color: var(--text-primary); white-space: nowrap; } /* On mobile, wrap long equations onto multiple lines instead of making the reader scroll a code-like box sideways to read them. */ @media (max-width: 640px) { .reg-equation-text { white-space: normal; overflow-wrap: anywhere; line-height: 1.5; } .reg-equation { overflow-x: visible; } } .reg-coef-chart { margin-top: 16px; } .reg-coef-chart .reg-calc-label { margin: 0 0 8px; } .reg-coef-bar { fill: var(--series-blue); } .reg-coef-bar--neg { fill: var(--series-orange); } .reg-coef-zero { stroke: var(--baseline); stroke-width: 1; } .reg-panel-grid { margin-top: 22px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr) minmax(0, 1fr); gap: 24px; padding: 24px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; align-items: start; } @media (max-width: 1180px) { .reg-panel-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .reg-panel-trend { grid-column: 1 / -1; } } @media (max-width: 760px) { .reg-panel-grid { grid-template-columns: minmax(0, 1fr); } .reg-panel-trend { grid-column: auto; } } .reg-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-top: 18px; } .reg-metrics--compact { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 0; } .reg-metrics--compact .reg-metric { padding: 8px 10px; } .reg-metrics--compact dd { font-size: 0.95rem; } .reg-metric { padding: 10px 12px; border-radius: 8px; background: var(--page-plane); border: 1px solid var(--border); } .reg-metric dt { margin: 0 0 4px; font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; } .reg-metric dd { margin: 0; font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; } .reg-slider-row { margin-top: 18px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px; } .reg-slider-row label { font-size: 0.78rem; color: var(--text-muted); } .reg-slider-row output { font-size: 0.95rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-primary); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .reg-slider-row input[type="range"] { grid-column: 1 / -1; -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; background: var(--gridline); outline: none; } .reg-slider-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--series-blue); border: 2px solid var(--surface-1); box-shadow: 0 0 0 1px var(--border); cursor: pointer; } .reg-slider-row input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--series-blue); border: 2px solid var(--surface-1); box-shadow: 0 0 0 1px var(--border); cursor: pointer; } .reg-sparsity-note { margin-top: 14px; font-size: 0.85rem; color: var(--text-secondary); } .reg-sparsity-note strong { color: var(--text-primary); } .reg-calc { margin-top: 16px; padding: 12px 14px; background: var(--page-plane); border: 1px solid var(--border); border-left: 3px solid var(--series-blue); border-radius: 8px; } .reg-calc-label { margin: 0 0 8px; font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; } .reg-calc .eq-chain { column-gap: 8px; row-gap: 4px; } .reg-calc .eq-label, .reg-calc .eq-expr { font-size: 0.76rem; } .reg-calc .eq-result { color: var(--text-primary); font-size: 0.95rem; } .lsc-cos-eq .eq-expr { white-space: normal; overflow-wrap: anywhere; } /* ---------- SVM page ---------- */ .algo-steps-card { background: var(--page-plane); border: 1px solid var(--border); border-radius: 12px; padding: 20px 22px; align-self: start; } .algo-steps-title { margin: 0 0 16px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); } .algo-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .algo-step { display: flex; gap: 12px; align-items: flex-start; } .algo-step-num { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--series-blue); color: #fff; font-size: 0.7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } .algo-step-body { min-width: 0; } .algo-step-title { margin: 0 0 2px; font-size: 0.85rem; font-weight: 600; color: var(--text-primary); } .algo-step-desc { margin: 0; font-size: 0.8rem; color: var(--text-secondary); } .svm-panel { margin-top: 22px; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(240px, 1fr); gap: 28px; padding: 26px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; } @media (max-width: 860px) { .svm-panel { grid-template-columns: 1fr; } } /* Ensemble page: chart | controls | table side by side, so a single demo's height is the tallest of the three columns, not their sum. */ .ens-panel { grid-template-columns: minmax(0, 1.15fr) minmax(220px, 0.85fr) minmax(0, 1fr) !important; } @media (max-width: 1100px) { .ens-panel { grid-template-columns: 1fr 1fr !important; } .ens-table-col { grid-column: 1 / -1; } } @media (max-width: 700px) { .ens-panel { grid-template-columns: 1fr !important; } .ens-table-col { grid-column: auto; } } .ens-table-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .ens-table-col .ens-table-wrap { margin-top: 0; flex: 1; } /* Hyperparameter Tuning page: model view | validation curve | controls, the same three-column idea as .ens-panel but sized for two charts of comparable importance instead of one chart dominating a table. */ .hpt-panel { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr) minmax(220px, 0.8fr) !important; } @media (max-width: 1100px) { .hpt-panel { grid-template-columns: 1fr 1fr !important; } .hpt-readouts-col { grid-column: 1 / -1; } } @media (max-width: 700px) { .hpt-panel { grid-template-columns: 1fr !important; } .hpt-readouts-col { grid-column: auto; } } .hpt-curve-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; } /* Law of Sines/Cosines: SSA ambiguous-case panel, controls | diagram. */ .lsc-ssa-panel { grid-template-columns: minmax(0, 0.9fr) minmax(280px, 1.1fr) !important; padding: 16px; gap: 16px; margin-top: 10px; } @media (max-width: 700px) { .lsc-ssa-panel { grid-template-columns: 1fr !important; } } .hpt-curve-caption { font-size: 0.76rem; color: var(--text-muted); line-height: 1.5; margin: 0; } .hpt-curve-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 0.72rem; color: var(--text-secondary); } .hpt-curve-legend .key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; } .hpt-marker-line { stroke: var(--text-primary); stroke-width: 1.3; stroke-dasharray: 3 3; opacity: 0.55; } .hpt-train-curve { fill: none; stroke: var(--series-teal); stroke-width: 2; } .hpt-val-curve { fill: none; stroke: var(--series-orange); stroke-width: 2.2; } .hpt-best-dot { fill: var(--status-good); stroke: var(--surface-1); stroke-width: 1.2; } .hpt-val-pos { fill: none; stroke: var(--series-blue); stroke-width: 1.8; } .hpt-val-neg { fill: none; stroke: var(--series-orange); stroke-width: 1.8; } .hpt-train-dot { fill: var(--series-teal); stroke: var(--surface-1); stroke-width: 1; } .hpt-val-dot { fill: none; stroke: var(--series-orange); stroke-width: 1.8; } .hpt-tree-step { fill: none; stroke: var(--series-purple); stroke-width: 2; stroke-linejoin: round; } .hpt-tree-split { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 2; } .hpt-centroid { stroke: var(--surface-1); stroke-width: 2; } .hpt-cluster-link { stroke-width: 1; opacity: 0.35; } .hpt-pca-bar { cursor: default; } .hpt-pca-bar-label { font-size: 0.68rem; fill: var(--text-muted); text-anchor: middle; } .hpt-pca-bar-value { font-size: 0.68rem; fill: var(--text-secondary); text-anchor: middle; font-weight: 600; } .hpt-sweet-spot { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 700; color: var(--status-good); } .hpt-sweet-spot::before { content: "\2713"; } .hpt-section { margin-top: 48px; } .hpt-section:first-of-type { margin-top: 40px; } .hpt-panel-title { font-size: 1.05rem; margin: 0 0 8px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; } .hpt-panel-hp { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.66rem; font-weight: 600; color: var(--text-muted); background: var(--gridline); border-radius: 999px; padding: 3px 10px; letter-spacing: 0.01em; } .hpt-panel-intro { margin: 0; max-width: 78ch; color: var(--text-secondary); font-size: 0.92rem; line-height: 1.55; } .hpt-code-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 10px 0 0; max-width: 78ch; } .hpt-code-line-tag { flex: none; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-muted); } .hpt-code-line code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.82rem; color: var(--text-secondary); background: var(--page-plane); border: 1px solid var(--gridline); border-radius: 6px; padding: 4px 10px; white-space: pre-wrap; word-break: break-word; } .hpt-code-line code mark { background: var(--tint-good); color: var(--status-good); border-radius: 3px; padding: 0 2px; } /* ---------- Distance Metrics page ---------- */ .dist-handle { cursor: grab; stroke: var(--surface-1); stroke-width: 2; touch-action: none; } .dist-handle:active { cursor: grabbing; } .dist-handle--a { fill: var(--series-blue); } .dist-handle--b { fill: var(--series-orange); } .dist-leg { stroke: var(--text-muted); stroke-width: 1.2; stroke-dasharray: 4 3; } .dist-line { fill: none; stroke-width: 2.2; stroke-linecap: round; } .dist-line--euclidean { stroke: var(--series-purple); } .dist-line--manhattan { stroke: var(--series-teal); stroke-linejoin: round; } .dist-line--euclidean-ghost { stroke: var(--text-muted); stroke-width: 1.4; stroke-dasharray: 4 3; opacity: 0.7; } .dist-line--minkowski { stroke: var(--series-purple); } .dist-mink-shape { fill: var(--series-purple); fill-opacity: 0.1; stroke: var(--series-purple); stroke-width: 2; } .dist-vec { stroke-width: 2.4; stroke-linecap: round; } .dist-vec--a { stroke: var(--series-blue); } .dist-vec--b { stroke: var(--series-orange); } .dist-arrowhead--a { fill: var(--series-blue); } .dist-arrowhead--b { fill: var(--series-orange); } .dist-cos-arc { fill: none; stroke: var(--text-secondary); stroke-width: 1.5; } .dist-tip-line { stroke: var(--text-muted); stroke-width: 1.4; stroke-dasharray: 4 3; opacity: 0.7; } .dist-value-label { font-size: 11px; font-weight: 700; fill: var(--text-primary); text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: var(--surface-1); stroke-width: 4px; stroke-linejoin: round; } .dist-value-label--sub { font-size: 9px; font-weight: 600; fill: var(--text-secondary); } .svm-chart-col { display: flex; flex-direction: column; gap: 10px; } .svm-instructions { margin: 0; font-size: 0.78rem; color: var(--text-muted); } svg.svm-svg, svg.svr-svg { width: 100%; height: auto; display: block; overflow: visible; } .svm-axis, .svr-axis { stroke: var(--baseline); stroke-width: 1.2; } .svm-plot-rect { fill: none; stroke: var(--gridline); stroke-width: 1; } .svm-line { stroke: var(--text-primary); stroke-width: 2; stroke-linecap: round; transition: stroke 0.15s ease; } .svm-svg.svm-invalid .svm-line { stroke: var(--status-critical); } .svm-band { stroke: var(--text-muted); stroke-width: 1.3; stroke-dasharray: 5 4; } .svm-svg.svm-invalid .svm-band { stroke: var(--status-critical); opacity: 0.6; } .svm-optimal-line { stroke: var(--status-good); stroke-width: 1.6; stroke-dasharray: 2 4; fill: none; opacity: 0; transition: opacity 0.15s ease; } .svm-optimal-band { stroke: var(--status-good); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0; transition: opacity 0.15s ease; } .svm-svg.show-optimal .svm-optimal-line, .svm-svg.show-optimal .svm-optimal-band { opacity: 0.55; } .svm-dot { stroke: var(--surface-1); stroke-width: 1.4; } .svm-dot--pos { fill: var(--series-blue); } .svm-dot--neg { fill: var(--series-orange); } .svm-dot--wrong { fill: var(--status-critical); stroke: var(--status-critical); stroke-width: 3; stroke-opacity: 0.25; } .svm-svg.show-optimal .svm-dist-line { stroke-width: 1.3; stroke-dasharray: 2 2; opacity: 0.85; } .svm-dist-line--a { stroke: var(--series-blue); } .svm-dist-line--b { stroke: var(--series-orange); } .svm-dist-text { font-size: 8px; font-weight: 700; paint-order: stroke; stroke: var(--surface-1); stroke-width: 3px; } .svm-dist-text--a { fill: var(--series-blue); } .svm-dist-text--b { fill: var(--series-orange); } .svm-dot--nearest { stroke: var(--text-primary); stroke-width: 2.5; } .svm-sv-label { font-size: 8px; font-weight: 700; fill: var(--status-good); opacity: 0; pointer-events: none; transition: opacity 0.15s ease; paint-order: stroke; stroke: var(--surface-1); stroke-width: 3px; } .svm-svg.show-optimal .svm-sv-label { opacity: 1; } .svm-dot--sv-eligible { stroke: var(--status-good); stroke-width: 3; } .svm-handle { fill: var(--surface-1); stroke: var(--text-primary); stroke-width: 2.5; cursor: grab; touch-action: none; } .svm-handle:active { cursor: grabbing; } .svm-svg.svm-invalid .svm-handle { stroke: var(--status-critical); } .svm-readouts { display: flex; flex-direction: column; gap: 16px; } .svm-status { padding: 10px 12px; border-radius: 8px; font-size: 0.82rem; font-weight: 600; border-left: 3px solid transparent; } .svm-status--good { background: var(--tint-good); border-left-color: var(--status-good); color: var(--text-primary); } .svm-status--bad { background: var(--tint-bad); border-left-color: var(--status-critical); color: var(--text-primary); } .svm-actions { display: flex; flex-wrap: wrap; gap: 8px; } .svm-btn { font: inherit; font-size: 0.78rem; font-weight: 600; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--page-plane); color: var(--text-primary); cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } .svm-btn:hover { background: var(--surface-1); border-color: var(--series-blue); } .svm-btn--primary { background: var(--series-blue); border-color: var(--series-blue); color: #fff; } .svm-btn--primary:hover { opacity: 0.9; background: var(--series-blue); } .svm-btn.is-active { background: var(--status-good); border-color: var(--status-good); color: #fff; } .metric--margin { padding: 12px 14px; background: var(--tint-good); border-bottom: none; border-left: 3px solid var(--status-good); border-radius: 8px; transition: background-color 0.15s ease, border-color 0.15s ease; } .metric--margin .eq-result { font-size: 1.3rem; color: var(--text-primary); } .metric--margin.is-invalid { background: var(--tint-bad); border-left-color: var(--status-critical); } .svm-vs-optimal { margin: 0; font-size: 0.8rem; color: var(--text-secondary); } .svm-vs-optimal strong { color: var(--text-primary); } /* ---------- SVR (regression) section ---------- */ .svr-panel { margin-top: 22px; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(220px, 1fr); gap: 28px; padding: 26px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; } @media (max-width: 860px) { .svr-panel { grid-template-columns: 1fr; } } .svr-fit-line { fill: none; stroke: var(--series-blue); stroke-width: 1.9; stroke-linecap: round; } .svr-tube-line { fill: none; stroke: var(--series-blue); stroke-width: 1.2; stroke-dasharray: 4 4; opacity: 0.6; } .svr-tube-fill { fill: var(--series-blue); opacity: 0.07; stroke: none; } .svr-dot { fill: var(--text-muted); stroke: var(--surface-1); stroke-width: 1.2; } .svr-dot--sv { fill: var(--series-orange); stroke: var(--surface-1); } .svr-tick-mark { stroke: var(--baseline); stroke-width: 1; } .svr-tick-label { font-size: 8px; fill: var(--text-muted); } .svr-axis-title { font-size: 9px; fill: var(--text-secondary); font-weight: 600; } .svr-sv-label { font-size: 8px; font-weight: 700; fill: var(--series-orange); opacity: 0; pointer-events: none; transition: opacity 0.15s ease; paint-order: stroke; stroke: var(--surface-1); stroke-width: 3px; } .svr-sv-label.is-visible { opacity: 1; } .svr-readouts { display: flex; flex-direction: column; gap: 16px; } .svr-equation-value { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85rem; color: var(--series-blue); } /* ---------- Kernel trick demo ---------- */ svg.kernel-svg { width: 100%; height: auto; display: block; overflow: visible; } .kernel-dot { stroke: var(--surface-1); stroke-width: 1.4; transition: cx 0.05s linear, cy 0.05s linear; } .kernel-dot--outer { fill: var(--series-blue); } .kernel-dot--inner { fill: var(--series-orange); } .kernel-separator { stroke: var(--status-good); stroke-width: 1.6; stroke-dasharray: 6 4; opacity: 0; } .kernel-separator-label { font-size: 9px; font-weight: 700; fill: var(--status-good); opacity: 0; } /* ---------- Gradient descent page ---------- */ .gd-panel { margin-top: 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 20px; padding: 20px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; } @media (max-width: 1080px) { .gd-panel { grid-template-columns: 1fr 1fr; } .gd-controls-bar { grid-column: 1 / -1; } } @media (max-width: 640px) { .gd-panel { grid-template-columns: 1fr; } } .gd-chart-col { display: flex; flex-direction: column; gap: 6px; } .gd-chart-col .chart-caption { font-size: 0.7rem; } .gd-controls-bar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding-top: 14px; border-top: 1px solid var(--border); } .gd-controls-slider { flex: 1 1 260px; min-width: 220px; margin: 0; } .gd-controls-slider label { font-size: 0.72rem; } .metrics--inline { display: flex; flex-wrap: wrap; gap: 6px 18px; flex: 1 1 auto; } .metrics--inline .metric { padding: 0; border-bottom: none; display: flex; align-items: baseline; gap: 6px; } .metrics--inline .metric dt { margin: 0; font-size: 0.7rem; white-space: nowrap; } .metrics--inline .metric dd { margin: 0; font-size: 0.9rem; } .metrics--inline .metric--margin { padding: 3px 10px; border-radius: 6px; border-left-width: 2px; } .gd-controls-bar .svm-status { margin: 0; flex: 1 1 100%; order: 10; } @media (min-width: 900px) { .gd-controls-bar .svm-status { flex: 0 1 auto; order: 0; } } svg.gd-svg { width: 100%; height: auto; display: block; overflow: visible; } /* Bowl chart */ .gd-bowl-ring { fill: none; stroke: var(--series-blue); stroke-width: 1.1; opacity: 0.55; } .gd-trail { fill: none; stroke: var(--status-critical); stroke-width: 1.6; stroke-dasharray: 3 3; opacity: 0.8; } .gd-ball { fill: var(--status-critical); stroke: var(--surface-1); stroke-width: 1.8; } /* Fit chart (scatter + line + residuals) */ .gd-fit-axis { stroke: var(--baseline); stroke-width: 1.2; } .gd-fit-tick-mark { stroke: var(--baseline); stroke-width: 1; } .gd-fit-tick-label { font-size: 8px; fill: var(--text-muted); } .gd-fit-line { stroke: var(--series-blue); stroke-width: 2; stroke-linecap: round; } .gd-fit-dot { fill: var(--text-secondary); stroke: var(--surface-1); stroke-width: 1.2; } .gd-residual { stroke: var(--status-critical); stroke-width: 1.2; opacity: 0.6; } /* 1D slice chart */ .gd-slice-curve { fill: none; stroke: var(--series-blue); stroke-width: 1.8; } .gd-slice-dot { fill: var(--status-critical); stroke: var(--surface-1); stroke-width: 1.6; } .gd-slice-trail-dot { fill: var(--status-critical); } /* Non-convexity aside */ .gd-nonconvex-panel { grid-template-columns: minmax(0, 1fr) minmax(280px, 1.1fr) !important; align-items: center; } @media (max-width: 720px) { .gd-nonconvex-panel { grid-template-columns: 1fr !important; } } .gd-nonconvex-text p { margin: 0 0 10px; } .gd-nonconvex-text .svm-btn { margin-top: 4px; } .gd-nonconvex-svg { overflow: visible; } .nc-click-area { fill: transparent; cursor: pointer; } .gd-nonconvex-fill { fill: var(--series-orange); opacity: 0.08; stroke: none; } .gd-nonconvex-curve { fill: none; stroke: var(--series-orange); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .gd-nonconvex-refline { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.6; } .gd-nonconvex-refline--global { stroke: var(--status-good); opacity: 0.8; } .gd-nonconvex-svg circle { fill: var(--text-muted); } .gd-nonconvex-svg circle.gd-nonconvex-ball { fill: var(--status-critical); stroke: var(--surface-1); stroke-width: 1.6; } .gd-nonconvex-svg circle.gd-nonconvex-global { fill: var(--status-good); stroke: var(--surface-1); stroke-width: 1.6; } .gd-nonconvex-svg text { font-size: 9.5px; fill: var(--text-muted); } .gd-nonconvex-svg text.gd-nonconvex-stuck-label { fill: var(--status-critical); font-weight: 700; } .gd-nonconvex-svg text.gd-nonconvex-global-label { fill: var(--status-good); font-weight: 700; } /* ---------- K-means page ---------- */ /* Main panel is now just the one big chart + controls, stacked — it isn't sharing a grid with the secondary charts anymore, so it can actually be large enough to see the assign/re-center mechanics happen. */ .km-panel { margin-top: 22px; display: flex; flex-direction: column; gap: 14px; padding: 22px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; } .km-main-title { margin: 0; font-size: 1rem; } .km-main-svg { max-height: 56vh; } .km-main-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 18px; align-items: start; } .km-main-col, .km-inertia-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; } @media (max-width: 900px) { .km-main-grid { grid-template-columns: 1fr; } } .km-controls-bar { border-top: 1px solid var(--border); padding-top: 16px; } .km-status-bar { flex: 1 1 100%; order: 10; font-size: 0.88rem; } @media (min-width: 900px) { .km-status-bar { flex: 1 1 260px; order: 0; } } .km-secondary-panel { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .km-secondary-panel--single { grid-template-columns: minmax(0, 1fr) !important; } @media (max-width: 640px) { .km-secondary-panel { grid-template-columns: 1fr !important; } } .km-elbow-line { stroke: var(--series-orange); } .km-elbow-dot { fill: var(--series-orange); stroke: var(--surface-1); stroke-width: 1.2; } .km-elbow-dot--current { fill: var(--status-good); r: 6; } /* Point-to-centroid links — always visible once assigned, so the grouping reads from structure, not just color (which can be hard to tell apart at a glance, especially in the overlap zone). */ .km-link { stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.5; transition: opacity 0.3s ease; } .km-link--c0 { stroke: var(--series-blue); } .km-link--c1 { stroke: var(--series-orange); } .km-link--c2 { stroke: var(--series-green); } .km-link--c3 { stroke: var(--series-purple); } .km-link--c4 { stroke: var(--series-teal); } /* The centroid diamond is a fixed shape at the origin, moved via transform on its wrapper — CSS can smoothly animate `transform`, which is what actually makes "the centroid slides to the new mean" visible instead of an instant, hard-to-follow jump. */ .km-centroid-wrap { transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); } .km-elbow-marker { stroke: var(--status-good); stroke-width: 1.5; stroke-dasharray: 3 3; opacity: 0.7; } svg.km-svg, svg.km-inertia-svg { overflow: visible; } .km-svg .nc-click-area { fill: transparent; cursor: crosshair; } .km-dot { fill: var(--text-muted); stroke: var(--surface-1); stroke-width: 1.2; transition: fill 0.2s ease, cx 0.4s ease, cy 0.4s ease; } .km-dot--c0 { fill: var(--series-blue); } .km-dot--c1 { fill: var(--series-orange); } .km-dot--c2 { fill: var(--series-green); } .km-dot--c3 { fill: var(--series-purple); } .km-dot--c4 { fill: var(--series-teal); } .km-centroid { stroke: var(--surface-1); stroke-width: 2.5; transition: cx 0.4s ease, cy 0.4s ease; } .km-centroid--c0 { fill: var(--series-blue); } .km-centroid--c1 { fill: var(--series-orange); } .km-centroid--c2 { fill: var(--series-green); } .km-centroid--c3 { fill: var(--series-purple); } .km-centroid--c4 { fill: var(--series-teal); } .km-inertia-line { fill: none; stroke: var(--series-blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .km-inertia-dot { fill: var(--series-blue); stroke: var(--surface-1); stroke-width: 1.2; } .km-k-picker { display: flex; align-items: center; gap: 8px; } .km-k-label { font-size: 0.78rem; color: var(--text-muted); font-weight: 600; } .km-k-buttons { display: flex; gap: 4px; } .km-k-btn { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--border); background: var(--page-plane); color: var(--text-primary); font: inherit; font-weight: 700; font-size: 0.82rem; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .km-k-btn:hover { border-color: var(--series-blue); } .km-k-btn.is-active { background: var(--series-blue); border-color: var(--series-blue); color: #fff; } .km-axis-title { font-size: 9.5px; font-weight: 700; fill: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.02em; } .km-chart-placeholder { font-size: 10.5px; fill: var(--text-muted); } .kmpp-toy-dist-line { stroke: var(--gridline); stroke-width: 1.2; stroke-dasharray: 3 3; } .kmpp-toy-winner-ring { fill: none; stroke: var(--status-good); stroke-width: 2; transition: opacity 0.2s ease; } .kmpp-toy-letter { font-size: 13px; font-weight: 700; fill: var(--text-primary); } .kmpp-toy-sublabel { font-size: 9.5px; fill: var(--text-muted); } .kmpp-toy-sublabel--pct { font-size: 11px; font-weight: 700; fill: var(--status-good); } /* ---------- K-nearest neighbors page ---------- */ svg.knn-svg { overflow: visible; } .knn-svg .nc-click-area { fill: transparent; cursor: crosshair; } .knn-region-cell { stroke: none; } .knn-region-cell--pos { fill: var(--series-blue); opacity: 0.12; } .knn-region-cell--neg { fill: var(--series-orange); opacity: 0.12; } .knn-dot { stroke: var(--surface-1); stroke-width: 1.2; } .knn-dot--pos { fill: var(--series-blue); } .knn-dot--neg { fill: var(--series-orange); } .knn-dot--neighbor { stroke: var(--status-good); stroke-width: 2.5; } .knn-link { stroke: var(--status-good); stroke-width: 1; stroke-dasharray: 2 2; opacity: 0.6; } .knn-query-marker { fill: none; stroke: var(--text-primary); stroke-width: 2.5; } .knn-query-marker--pos { stroke: var(--series-blue); } .knn-query-marker--neg { stroke: var(--series-orange); } .knn-reg-curve { fill: none; stroke: var(--series-blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .knn-reg-query-line { stroke: var(--text-muted); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: 0; } .knn-reg-dot { fill: var(--text-muted); stroke: var(--surface-1); stroke-width: 1.2; } .knn-reg-dot--neighbor { fill: var(--series-orange); } .knn-reg-query-dot { fill: var(--status-good); stroke: var(--surface-1); stroke-width: 2; } .knn-reg-band { fill: var(--series-orange); opacity: 0.08; stroke: none; } .knn-reg-carry { stroke: var(--series-orange); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: 0.65; } .knn-reg-carry-dot { fill: var(--series-orange); opacity: 0.85; } .knn-reg-avg-line { stroke: var(--status-good); stroke-width: 2; stroke-dasharray: 5 3; } .knn-reg-avg-label { fill: var(--status-good); font-size: 10px; font-weight: 600; } /* ---------- Logistic regression page ---------- */ .lr-sigmoid-curve { fill: none; stroke: var(--text-primary); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .lr-threshold-line { stroke: var(--text-muted); stroke-width: 1.2; stroke-dasharray: 4 3; } .lr-boundary-line { stroke: var(--status-good); stroke-width: 1.4; stroke-dasharray: 2 3; } .lr-query-drop { stroke: var(--series-orange); stroke-width: 1.3; stroke-dasharray: 3 3; opacity: 0.75; } .lr-region-cell { stroke: none; } .lr-region-cell--pos { fill: var(--series-blue); } .lr-region-cell--neg { fill: var(--series-orange); } .svm-svg .nc-click-area { cursor: crosshair; } /* ---------- Linear regression page ---------- */ .lin-residual-line { stroke: var(--series-orange); stroke-width: 1; opacity: 0.55; } .lin-residual-square { fill: var(--series-orange); stroke: var(--series-orange); stroke-width: 1; fill-opacity: 0.16; stroke-opacity: 0.4; } .lev-drag-point { stroke: var(--series-orange); stroke-width: 2.5; } /* ---------- Central tendency page ---------- */ .ct-drag-dot { fill: var(--text-muted); stroke: var(--surface-1); stroke-width: 1.4; cursor: grab; touch-action: none; } .ct-drag-dot:active { cursor: grabbing; } .ct-marker-line { stroke-width: 1.6; stroke-dasharray: 4 3; } .ct-marker-line--mean { stroke: var(--series-blue); } .ct-marker-line--median { stroke: var(--series-orange); } .ct-marker-line--mode { stroke: var(--status-good); } .ct-marker-tri { stroke: none; } .ct-marker-tri--mean { fill: var(--series-blue); } .ct-marker-tri--median { fill: var(--series-orange); } .ct-marker-tri--mode { fill: var(--status-good); } .ct-row-label { font-size: 11px; font-weight: 600; } .ct-row-label--mean { fill: var(--series-blue); } .ct-row-label--median { fill: var(--series-orange); } .ct-row-label--mode { fill: var(--status-good); } .ct-inline-label { font-size: 11px; font-weight: 700; paint-order: stroke; stroke: var(--surface-1); stroke-width: 3px; stroke-linejoin: round; } .ct-inline-label--mean { fill: var(--series-blue); } .ct-inline-label--median { fill: var(--series-orange); } .ct-inline-label--mode { fill: var(--status-good); } .ct-hist-bar { fill: var(--series-blue); fill-opacity: 0.28; stroke: var(--series-blue); stroke-width: 1.5; } .ct-numbers-list { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.82rem; background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; color: var(--text-secondary); word-break: break-word; line-height: 1.5; } .disp-calc { margin-top: 0; } .disp-calc .reg-calc-label { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.74rem; text-transform: none; letter-spacing: normal; } .disp-fraction-eq { align-items: center; } .disp-fraction { display: inline-flex !important; flex-direction: column; align-items: center; white-space: normal !important; padding: 2px 0; } .disp-fraction-num { padding: 0 4px 4px; border-bottom: 1.5px solid var(--text-secondary); text-align: center; line-height: 1.6; } .disp-fraction-den { padding: 4px 4px 0; text-align: center; } /* ---------- Dispersion page ---------- */ .disp-dev-line { stroke-width: 1.6; opacity: 0.7; } .disp-dev-line--above { stroke: var(--series-blue); } .disp-dev-line--below { stroke: var(--series-orange); } .box-whisker { stroke: var(--text-muted); stroke-width: 1.4; } .box-whisker-cap { stroke: var(--text-muted); stroke-width: 1.4; } .box-box { fill: var(--series-blue); fill-opacity: 0.18; stroke: var(--series-blue); stroke-width: 1.6; } .box-median { stroke: var(--series-orange); stroke-width: 2.2; } .box-strip-dot { fill: var(--text-muted); opacity: 0.55; } .box-outlier-dot { fill: none; stroke: var(--status-critical); stroke-width: 2; } /* ---------- Ensemble learning page ---------- */ .ens-true-curve { fill: none; stroke: var(--text-secondary); stroke-width: 2.2; stroke-dasharray: 7 4; } .ens-tree-curve { fill: none; stroke: var(--series-orange); stroke-width: 1.4; opacity: 0.55; } .ens-avg-curve { fill: none; stroke: var(--text-primary); stroke-width: 2.6; stroke-linejoin: round; } .ens-base-curve { fill: none; stroke-width: 1.8; stroke-dasharray: 6 4; } .ens-base-curve--linear { stroke: var(--series-orange); } .ens-base-curve--knn { stroke: var(--series-blue); } .ens-base-curve--tree { stroke: var(--series-purple); } .ens-query-line { stroke: var(--text-primary); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: 0.7; } .ens-tree-curve--latest { stroke: var(--status-critical) !important; opacity: 0.85 !important; stroke-width: 2.2 !important; } .ens-residual-line { stroke: var(--status-critical); stroke-width: 1.4; opacity: 0.6; } .flow-diagram { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; margin: 20px 0 4px; padding: 18px 16px; background: var(--page-plane); border: 1px solid var(--border); border-radius: 10px; } .flow-step { background: var(--surface-1); border: 1.5px solid var(--series-blue); border-radius: 8px; padding: 9px 13px; font-size: 0.78rem; font-weight: 600; color: var(--text-primary); text-align: center; line-height: 1.35; max-width: 150px; } .flow-step-sub { display: block; font-size: 0.68rem; font-weight: 400; color: var(--text-muted); margin-top: 2px; } .flow-step--start { border-color: var(--text-muted); border-style: dashed; } .flow-step--final { border-color: var(--status-good); background: var(--tint-good); } .flow-step-group { display: flex; flex-direction: column; gap: 6px; } .flow-arrow { font-size: 1.15rem; color: var(--text-muted); flex-shrink: 0; } .flow-note { flex-basis: 100%; text-align: center; font-size: 0.72rem; color: var(--text-muted); margin-top: 4px; } .ens-table-wrap { margin: 16px 0 4px; max-height: 260px; overflow-y: auto; overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; } .ens-table { width: 100%; border-collapse: collapse; font-size: 0.76rem; font-variant-numeric: tabular-nums; } .ens-table th, .ens-table td { padding: 5px 10px; text-align: center; white-space: nowrap; border-bottom: 1px solid var(--border); } .ens-table thead th { position: sticky; top: 0; background: var(--page-plane); color: var(--text-muted); font-weight: 600; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.02em; z-index: 1; } .ens-table tbody tr:nth-child(even) td { background: var(--page-plane); } .ens-table td.ens-cell--picked { background: var(--tint-good); font-weight: 700; color: var(--status-good); } .ens-table td.ens-cell--unpicked { color: var(--text-muted); opacity: 0.45; } .ens-table td.ens-cell--correct { color: var(--status-good); font-weight: 700; } .ens-table td.ens-cell--wrong { color: var(--status-critical); font-weight: 700; } .ens-table-caption { font-size: 0.72rem; color: var(--text-muted); margin: 6px 0 0; } /* ---------------------------------------------------------------------- */ /* DBSCAN */ /* ---------------------------------------------------------------------- */ svg.db-svg { overflow: visible; } .db-main-svg { max-width: 440px; max-height: 440px; margin: 0 auto; display: block; } .db-dot { fill: var(--text-muted); stroke: var(--surface-1); stroke-width: 1.2; transition: fill 0.2s ease; } .db-dot--core-c0 { fill: var(--series-blue); r: 7.5; } .db-dot--core-c1 { fill: var(--series-orange); r: 7.5; } .db-dot--core-c2 { fill: var(--series-green); r: 7.5; } .db-dot--core-c3 { fill: var(--series-purple); r: 7.5; } .db-dot--core-c4 { fill: var(--series-teal); r: 7.5; } .db-dot--border-c0, .db-dot--border-c1, .db-dot--border-c2, .db-dot--border-c3, .db-dot--border-c4 { fill: var(--surface-1); stroke-width: 2.4; r: 6; } .db-dot--border-c0 { stroke: var(--series-blue); } .db-dot--border-c1 { stroke: var(--series-orange); } .db-dot--border-c2 { stroke: var(--series-green); } .db-dot--border-c3 { stroke: var(--series-purple); } .db-dot--border-c4 { stroke: var(--series-teal); } .db-dot--noise { fill: var(--text-muted); opacity: 0.45; r: 3.5; } .db-dot--unvisited { fill: var(--text-muted); opacity: 0.35; r: 5; } .db-eps-circle { fill: none; stroke: var(--text-secondary); stroke-width: 1.5; stroke-dasharray: 4 3; pointer-events: none; } .db-legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: middle; } .db-legend-dot--core { background: var(--series-blue); } .db-legend-dot--border { background: var(--surface-1); border: 2px solid var(--series-blue); width: 6px; height: 6px; } .db-legend-dot--noise { background: var(--text-muted); opacity: 0.5; width: 6px; height: 6px; } .db-slider-group { display: flex; flex-direction: column; gap: 2px; min-width: 150px; } .db-slider-group--compact { min-width: 0; margin-top: 8px; } .db-slider-label { font-size: 0.72rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; } .db-slider { width: 100%; accent-color: var(--series-blue); } .db-compare-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 32px 0; } .db-compare-col { background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 16px; } .db-compare-col svg { width: 100%; height: auto; max-width: 300px; display: block; margin: 0 auto; } .db-compare-actions { margin: 10px 0 0; } @media (max-width: 800px) { .db-compare-panel { grid-template-columns: 1fr; } } /* ---------------------------------------------------------------------- */ /* Central Limit Theorem */ /* ---------------------------------------------------------------------- */ .clt-pop-bar { fill: var(--series-blue); fill-opacity: 0.28; stroke: var(--series-blue); stroke-width: 1.4; } .clt-sdm-bar { fill: var(--series-teal); fill-opacity: 0.32; stroke: var(--series-teal); stroke-width: 1.2; transition: y 0.2s ease, height 0.2s ease; } .clt-mean-line { stroke: var(--series-orange); stroke-width: 1.6; stroke-dasharray: 4 3; } .clt-mean-inline-label { font-size: 11px; font-weight: 700; fill: var(--series-orange); paint-order: stroke; stroke: var(--surface-1); stroke-width: 3px; } .clt-normal-curve { fill: none; stroke: var(--series-purple); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: d 0.2s ease; } .clt-sample-tick { stroke: var(--series-blue); stroke-width: 1.6; opacity: 0.75; } /* ---------------------------------------------------------------------- */ /* Conditional Probability & Bayes' Theorem */ /* ---------------------------------------------------------------------- */ .bp-cell { stroke: var(--surface-1); stroke-width: 2; transition: x 0.3s ease, y 0.3s ease, width 0.3s ease, height 0.3s ease, opacity 0.2s ease; } .bp-cell--tp { fill: var(--series-blue); } .bp-cell--fn { fill: var(--series-blue); opacity: 0.35; } .bp-cell--fp { fill: var(--series-orange); } .bp-cell--tn { fill: var(--text-muted); opacity: 0.35; } .bp-cell--in { stroke: var(--status-good); stroke-width: 3; } .bp-cell--out { opacity: 0.08 !important; } .bp-col-label { font-size: 11px; font-weight: 700; fill: var(--text-secondary); } .bp-formula-symbolic { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.72rem; color: var(--text-muted); line-height: 1.5; margin: 4px 0 0; } /* ---------------------------------------------------------------------- */ /* Naive Bayes */ /* ---------------------------------------------------------------------- */ .nb-row-label { font-size: 9.5px; fill: var(--text-secondary); } .nb-learn-bar--spam { fill: var(--status-critical); } .nb-learn-bar--ham { fill: var(--series-blue); } .nb-contrib-bar { transition: x 0.25s ease, width 0.25s ease; } .nb-contrib-bar--spam { fill: var(--status-critical); } .nb-contrib-bar--ham { fill: var(--series-blue); } .nb-contrib-bar--prior { opacity: 0.6; } .nb-word-chip { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .nb-word-chip.is-active { background: var(--status-critical); border-color: var(--status-critical); color: #fff; } /* ---------------------------------------------------------------------- */ /* Cross-Validation */ /* ---------------------------------------------------------------------- */ .cv-workflow-section, .cv-rounds-section, .cv-final-section, .cv-strat-section { margin-top: 26px; padding: 20px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; } .cv-hierarchy { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; } .cv-bar-row { display: flex; gap: 6px; } .cv-bar-row--folds { gap: 4px; } .cv-block { min-width: 0; padding: 10px 6px; border-radius: 8px; text-align: center; font-size: 0.76rem; font-weight: 700; color: #fff; white-space: normal; overflow-wrap: break-word; line-height: 1.25; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease, opacity 0.2s ease, outline 0.15s ease; } @media (max-width: 640px) { .cv-block { font-size: 0.64rem; padding: 8px 4px; } .cv-bar-row--folds { gap: 3px; } } .cv-block--all { background: var(--text-muted); } .cv-block--train { background: var(--series-blue); } .cv-block--test { background: var(--series-orange); } .cv-block--test-active { outline: 3px solid var(--status-good); outline-offset: 2px; } .cv-block--fold { background: var(--page-plane); color: var(--text-secondary); border: 1px solid var(--border); font-weight: 600; } .cv-block--validate { background: var(--status-good); color: #fff; } .cv-nested { min-width: 0; } .cv-spacer { min-width: 0; } .cv-stepper { display: flex; align-items: center; gap: 12px; margin: 14px 0 2px; } .cv-stepper-btn { padding: 6px 14px; font-size: 1rem; line-height: 1; } .cv-stepper-label { font-size: 0.9rem; font-weight: 700; min-width: 110px; text-align: center; } .cv-strat-section h2 { margin-top: 0; } .cv-strat-intro { color: var(--text-secondary); font-size: 0.9rem; max-width: 70ch; } .cv-strat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 16px; } @media (max-width: 800px) { .cv-strat-grid { grid-template-columns: 1fr; } } .cv-strat-title { margin: 0 0 10px; font-size: 0.82rem; font-weight: 700; color: var(--text-primary); } .cv-fold-comp-row { display: flex; flex-direction: column; gap: 8px; } .cv-fold-comp-block { display: flex; align-items: center; gap: 10px; } .cv-fold-comp-label { width: 52px; flex: none; font-size: 0.7rem; color: var(--text-muted); } .cv-fold-comp-bar { flex: 1; display: flex; height: 16px; border-radius: 4px; overflow: hidden; background: var(--border); } .cv-fold-comp-seg--fraud { background: var(--series-orange); height: 100%; } .cv-fold-comp-seg--legit { background: var(--series-blue); height: 100%; } .cv-fold-comp-recall { width: 92px; flex: none; font-size: 0.68rem; color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: right; } .cv-fold-comp-recall--undefined { color: var(--status-critical); font-weight: 700; } .cv-table-caption { margin: 14px 0 6px; font-size: 0.78rem; color: var(--text-secondary); } .cv-table-wrap { max-height: 320px; } .cv-round-table th, .cv-round-table td { padding: 5px 10px; font-size: 0.74rem; } .cv-round-table tr.cv-row--validate td { background: var(--tint-good) !important; font-weight: 600; } .cv-round-table td.cv-cell--fraud { color: var(--series-orange); font-weight: 700; } .cv-round-table td.cv-cell--correct { color: var(--status-good); } .cv-round-table td.cv-cell--wrong { color: var(--status-critical); font-weight: 700; } .cv-round-table td.cv-cell--na { color: var(--text-muted); } /* ---------------------------------------------------------------------- */ /* Eigenvalues & Eigenvectors */ /* ---------------------------------------------------------------------- */ svg.eig-svg { overflow: visible; } .eig-axis { stroke: var(--gridline); stroke-width: 1; } .eig-unit-circle { fill: none; stroke: var(--text-muted); stroke-width: 1.2; stroke-dasharray: 3 3; } .eig-vec { stroke-width: 2.6; transition: stroke 0.15s ease; } .eig-vec--v { stroke: var(--series-blue); } .eig-vec--mv { stroke: var(--series-orange); } .eig-vec--aligned { stroke: var(--status-good) !important; } .eig-arrowhead--v { fill: var(--series-blue); } .eig-arrowhead--mv { fill: var(--series-orange); } .eig-arrowhead--aligned { fill: var(--status-good); } .eig-handle { fill: var(--series-blue); stroke: var(--surface-1); stroke-width: 2; cursor: grab; transition: fill 0.15s ease; touch-action: none; } .eig-handle--aligned { fill: var(--status-good); } .eig-handle:active { cursor: grabbing; } .eig-matrix-display { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.95rem; white-space: pre; background: var(--page-plane); border: 1px solid var(--border); border-radius: 8px; padding: 8px 14px; margin: 8px 0 0; display: inline-block; } .eig-shape { fill: var(--series-purple); fill-opacity: 0.12; stroke: var(--series-purple); stroke-width: 2; } .eig-eigenline { stroke: var(--status-good); stroke-width: 1.6; stroke-dasharray: 5 4; } .eig-axis-title { font-size: 9.5px; font-weight: 700; fill: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.02em; } .eigpca-dot { fill: var(--text-muted); stroke: var(--surface-1); stroke-width: 1; } .eigpca-mean-dot { fill: var(--text-primary); stroke: var(--surface-1); stroke-width: 2; } .eig-vec--pc1 { stroke: var(--status-good); } .eig-vec--pc2 { stroke: var(--series-orange); } .eig-arrowhead--pc1 { fill: var(--status-good); } .eig-arrowhead--pc2 { fill: var(--series-orange); } /* ---------------------------------------------------------------------- */ /* Feature Scaling & Normalization */ /* ---------------------------------------------------------------------- */ .fs-formula-section { margin-top: 22px; } .fs-ruler-section { margin-top: 28px; } .fs-table-section { margin-top: 28px; } .fs-table-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; } .fs-table-intro { margin: 0; font-size: 0.85rem; color: var(--text-secondary); max-width: 62ch; } /* Every row here is centered as a group, and each eq-chain is only ever sized inside a flex row (never a bare block), so its "auto 1fr" grid columns shrink-wrap to the fraction's own content instead of stretching the second column across whatever width the card happens to have. */ .fs-formula-card { margin-bottom: 0; display: flex; flex-direction: column; align-items: center; text-align: center; } .fs-general-formula, .fs-formula-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; margin-top: 4px; } .fs-general-formula .eq-chain, .fs-formula-row .eq-chain { column-gap: 10px; width: auto; } .fs-general-formula .eq-label { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); } .fs-general-formula .disp-fraction-num, .fs-general-formula .disp-fraction-den { font-size: 0.95rem; } .fs-formula-divider { margin: 14px 0 4px; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .fs-ruler-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; } @media (max-width: 800px) { .fs-ruler-grid { grid-template-columns: 1fr; } } .fs-ruler-title { margin: 0 0 4px; font-size: 0.78rem; color: var(--text-secondary); font-weight: 600; } .fs-ruler-svg { display: block; width: 100%; height: auto; overflow: visible; } .fs-ruler-row-label { font-size: 10.5px; fill: var(--text-secondary); font-weight: 600; } .fs-ruler-value-label { font-size: 9.5px; fill: var(--text-muted); font-variant-numeric: tabular-nums; } .fs-ruler-track { stroke: var(--border); stroke-width: 6; stroke-linecap: round; } .fs-ruler-bar { stroke-width: 6; stroke-linecap: round; } .fs-ruler-bar--age { stroke: var(--series-blue); } .fs-ruler-bar--income { stroke: var(--series-orange); } .fs-ruler-axis { stroke: var(--baseline); stroke-width: 1; } .fs-ruler-zero { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 3 3; } .fs-table-wrap { max-height: 340px; } .fs-table th, .fs-table td { padding: 5px 10px; font-size: 0.76rem; } .fs-table td.fs-calc-cell { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.68rem; color: var(--text-muted); white-space: nowrap; } .fs-verdict { margin-top: 18px; } /* ---------------------------------------------------------------------- */ /* Sampling Techniques */ /* ---------------------------------------------------------------------- */ .st-taxonomy { margin-top: 26px; padding: 20px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; display: flex; flex-direction: column; align-items: center; text-align: center; } .st-root-box { margin-top: 10px; padding: 10px 20px; border-radius: 8px; background: var(--text-primary); color: var(--surface-1); font-weight: 700; font-size: 0.85rem; } .st-stem { width: 2px; height: 20px; background: var(--border); } .st-category-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 100%; } @media (max-width: 700px) { .st-category-grid { grid-template-columns: 1fr; } } .st-category-card { border-radius: 10px; border: 1.5px solid var(--border); padding: 14px; background: var(--page-plane); } .st-category-card--prob { border-top: 3px solid var(--series-blue); } .st-category-card--nonprob { border-top: 3px solid var(--series-orange); } .st-category-title { margin: 0; font-weight: 700; font-size: 0.88rem; } .st-category-desc { margin: 4px 0 12px; font-size: 0.74rem; color: var(--text-muted); } .st-leaf-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .st-leaf-btn { padding: 8px 6px; border-radius: 7px; border: 1.5px solid var(--border); background: var(--surface-1); color: var(--text-secondary); font-size: 0.74rem; font-weight: 600; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; } .st-leaf-btn:hover { border-color: var(--text-muted); } .st-leaf-btn.is-active { background: var(--text-primary); border-color: var(--text-primary); color: var(--surface-1); } .st-demo-section { margin-top: 26px; } .st-demo-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; } .st-demo-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: start; } @media (max-width: 900px) { .st-demo-grid { grid-template-columns: 1fr; } } .st-demo-col { min-width: 0; } .st-method-name { margin: 0 0 2px; font-size: 1.05rem; font-weight: 700; color: var(--text-primary); } .st-population-grid { display: grid; grid-template-rows: repeat(4, 1fr); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin: 12px 0 12px 15%; max-width: 400px; } .st-dot { width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--text-muted); transition: transform 0.15s ease, box-shadow 0.15s ease; } .st-dot--fresh { background: var(--series-blue); } .st-dot--soph { background: var(--series-orange); } .st-dot--senior { background: var(--series-purple); } .st-dot--selected { box-shadow: 0 0 0 3px var(--text-primary), 0 0 0 1px var(--surface-1) inset; transform: scale(1.1); } .st-redraw-btn { margin: 4px 0 16px; } .st-table-caption { margin: 0 0 6px; font-size: 0.76rem; color: var(--text-secondary); } .st-comp-table th, .st-comp-table td { padding: 6px 10px; font-size: 0.78rem; } .st-legend-ring { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 2.5px solid var(--text-primary); vertical-align: middle; } /* ========================================================================== Bias-Variance Tradeoff ========================================================================== */ .bv-panel { margin-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; padding: 20px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; } @media (max-width: 900px) { .bv-panel { grid-template-columns: 1fr; } } .bv-panel .gd-controls-bar { grid-column: 1 / -1; } .bv-panel > .gd-chart-col > .gd-svg { max-width: 72%; margin: 0 auto; } .bv-bottom-row { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 18px 24px; padding-top: 16px; border-top: 1px solid var(--border); } @media (max-width: 900px) { .bv-bottom-row { grid-template-columns: 1fr; } } .bv-bottom-col { min-width: 0; } .bv-compact-title { margin: 0 0 10px; font-size: 0.86rem; } .bv-true-curve { fill: none; stroke: var(--text-muted); stroke-width: 1.6; stroke-dasharray: 5 4; } .bv-fitted-curve { fill: none; stroke: var(--status-good); stroke-width: 2.2; transition: stroke 0.15s ease; } .bv-train-dot { fill: var(--series-blue); stroke: var(--surface-1); stroke-width: 0.6; } .bv-test-dot { fill: none; stroke: var(--series-orange); stroke-width: 1.6; } .bv-curve { fill: none; stroke-width: 2; } .bv-curve--bias { stroke: var(--series-blue); } .bv-curve--variance { stroke: var(--series-orange); } .bv-curve--error { stroke: var(--status-critical); stroke-width: 2.4; } .bv-marker-line { stroke: var(--text-primary); stroke-width: 1.4; stroke-dasharray: 3 3; opacity: 0.55; } .bv-zone { opacity: 1; } .bv-zone--bad { fill: var(--tint-bad); } .bv-zone--good { fill: var(--tint-good); } .bv-zone-label { font-size: 8px; fill: var(--text-muted); text-anchor: middle; text-transform: uppercase; letter-spacing: 0.04em; } .bv-classification-section { margin-top: 26px; padding: 20px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; } .bv-target-grid { display: grid; grid-template-columns: 32px repeat(2, minmax(0, 1fr)); gap: 5px; max-width: 280px; margin: 0 auto; align-items: center; } .bv-target-col-label, .bv-target-row-label { font-size: 0.58rem; font-weight: 700; color: var(--text-secondary); text-align: center; } .bv-target-row-label { line-height: 1.1; } .bv-target-cell { display: flex; flex-direction: column; align-items: center; padding: 3px; border: 2px solid transparent; border-radius: 9px; transition: border-color 0.15s ease, background 0.15s ease; } .bv-target-cell.is-active-region { border-color: var(--text-primary); background: var(--tint-good); } .bv-target-svg { width: 100%; max-width: 62px; height: auto; display: block; } .bv-target-ring { stroke: none; } .bv-target-dart { fill: var(--text-primary); stroke: var(--surface-1); stroke-width: 0.5; opacity: 0.85; } .bv-target-caption { margin: 2px 0 0; font-size: 0.56rem; text-align: center; color: var(--text-secondary); line-height: 1.15; } .bv-target-caption span { color: var(--text-muted); } .bv-class-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; } @media (max-width: 720px) { .bv-class-grid { grid-template-columns: 1fr; } } .bv-class-cell { display: flex; flex-direction: column; align-items: center; text-align: center; } .bv-class-svg { width: 100%; max-width: 220px; height: auto; } .bv-class-boundary { fill: none; stroke: var(--text-primary); stroke-width: 2; } .bv-class-a circle { fill: var(--series-green); } .bv-class-b path { stroke: var(--status-critical); stroke-width: 1.8; fill: none; stroke-linecap: round; } .bv-class-a circle.bv-class-noisy { stroke: var(--series-orange); stroke-width: 2; stroke-dasharray: 2 1.4; } .bv-class-b path.bv-class-noisy { stroke: var(--series-orange); } .bv-class-caption { margin: 8px 0 0; font-size: 0.76rem; color: var(--text-secondary); line-height: 1.4; } .bv-regime-table th[data-role].is-active { background: var(--tint-good); } .bv-regime-table td.is-active { background: var(--tint-good) !important; } .bv-table-num { color: var(--text-muted); font-size: 0.82em; } .bv-bottom-row .bv-regime-table th, .bv-bottom-row .bv-regime-table td { padding: 5px 7px; font-size: 0.64rem; white-space: nowrap; } .bv-bottom-row .bv-table-num { display: block; font-size: 0.85em; } /* ========================================================================== Class Imbalance & Resampling ========================================================================== */ .ci-panel { margin-top: 22px; padding: 20px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; } .ci-method-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .ci-tab { padding: 5px 12px; font-size: 0.74rem; font-weight: 600; color: var(--text-secondary); background: var(--page-plane); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .ci-tab:hover { border-color: var(--text-secondary); } .ci-tab.is-active { background: var(--series-blue); border-color: var(--series-blue); color: #fff; } .ci-main-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px 24px; } @media (max-width: 860px) { .ci-main-grid { grid-template-columns: 1fr; } } .ci-side-col { min-width: 0; } .ci-panel .gd-chart-col > .gd-svg { max-width: 80%; margin: 0 auto; } .ci-panel .metric { padding: 6px 0; } .ci-panel .metric dt { margin-bottom: 3px; } .ci-panel .metric dd { font-size: 0.95rem; } .ci-panel .svm-status { margin-top: 6px; padding: 8px 12px; font-size: 0.76rem; } .ci-majority-dot { fill: var(--series-blue); stroke: var(--surface-1); stroke-width: 0.6; } .ci-minority-dot { fill: var(--series-orange); stroke: var(--surface-1); stroke-width: 0.6; } .ci-dot--removed { fill: none; stroke: var(--text-muted); stroke-width: 1.4; opacity: 0.5; } .ci-dup-dot { fill: none; stroke: var(--series-orange); stroke-width: 1.6; opacity: 0.75; } .ci-synth-dot { fill: var(--series-purple); stroke: var(--surface-1); stroke-width: 0.6; } .ci-synth-line { stroke: var(--series-purple); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.45; } .ci-bars { display: flex; flex-direction: column; gap: 7px; margin: 8px 0 14px; } .ci-bar-row { display: flex; align-items: center; gap: 10px; } .ci-bar-label { width: 66px; flex: none; font-size: 0.76rem; color: var(--text-secondary); } .ci-bar-track { flex: 1; height: 16px; background: var(--page-plane); border-radius: 4px; overflow: hidden; } .ci-bar-fill { height: 100%; border-radius: 4px; transition: width 0.25s ease; } .ci-bar-fill--majority { background: var(--series-blue); } .ci-bar-fill--minority { background: var(--series-orange); } .ci-bar-count { width: 28px; flex: none; text-align: right; font-size: 0.78rem; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; } .ci-metrics-title { margin-top: 4px; } .ci-bottom-row { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); } .ci-compact-title { margin: 0 0 8px; font-size: 0.82rem; } .ci-method-table th[data-role].is-active { background: var(--tint-good); } .ci-method-table td.is-active { background: var(--tint-good) !important; } .ci-method-table th, .ci-method-table td { padding: 4px 8px; font-size: 0.68rem; } /* ========================================================================== Linear Discriminant Analysis ========================================================================== */ .lda-panel { margin-top: 22px; padding: 18px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; } .lda-controls-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--border); } .lda-slider { flex: 1 1 260px; min-width: 220px; margin: 0; } .lda-main-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 20px; } @media (max-width: 860px) { .lda-main-grid { grid-template-columns: 1fr; } } .lda-panel .gd-chart-col > .gd-svg { max-width: 68%; margin: 0 auto; } .lda-panel .chart-title { margin-bottom: 2px; font-size: 0.82rem; } .lda-panel .chart-caption { font-size: 0.68rem; margin-top: 2px; } .lda-dot { stroke: var(--surface-1); stroke-width: 0.6; } .lda-dot--a { fill: var(--series-blue); } .lda-dot--b { fill: var(--series-orange); } .lda-axis-line { stroke: var(--text-primary); stroke-width: 1.6; } .lda-projection-line { stroke: var(--text-muted); stroke-width: 0.6; opacity: 0.4; stroke-dasharray: 2 2; } .lda-fisher-curve { fill: none; stroke: var(--series-purple); stroke-width: 2.2; } .lda-marker-line { stroke-width: 1.4; stroke-dasharray: 4 3; opacity: 0.8; } .lda-marker-line--pca { stroke: var(--series-orange); } .lda-marker-line--lda { stroke: var(--status-good); } .lda-current-dot { fill: var(--text-primary); stroke: var(--surface-1); stroke-width: 1.2; } .lda-strip-row { margin-top: 8px; } .lda-strip-svg { width: 100%; max-width: 78%; height: auto; display: block; margin: 0 auto; } .lda-strip-axis { stroke: var(--baseline); stroke-width: 1.2; } .lda-strip-threshold { stroke: var(--text-primary); stroke-width: 1.4; stroke-dasharray: 3 3; opacity: 0.55; } .lda-strip-dot { stroke: var(--surface-1); stroke-width: 0.6; opacity: 0.9; } .lda-strip-dot--a { fill: var(--series-blue); } .lda-strip-dot--b { fill: var(--series-orange); } .lda-metrics-row { margin-top: 8px; padding-top: 10px; padding-bottom: 0; margin-bottom: 0; border-bottom: none; } .lda-method-table th[data-role].is-active { background: var(--tint-good); } .lda-method-table td.is-active { background: var(--tint-good) !important; } .lda-method-table th, .lda-method-table td { padding: 4px 8px; font-size: 0.68rem; } /* ========================================================================== Activation Functions ========================================================================== */ .act-panel { margin-top: 22px; padding: 18px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; } .act-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .act-formula { margin: 0 0 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.86rem; color: var(--text-secondary); background: var(--page-plane); border-radius: 8px; padding: 8px 12px; display: inline-block; } .act-panel .gd-chart-col > .gd-svg { max-width: 78%; margin: 0 auto; } .act-fn-curve { fill: none; stroke: var(--series-blue); stroke-width: 2.4; } .act-deriv-curve { fill: none; stroke: var(--series-purple); stroke-width: 2.4; } .act-marker-dot { fill: var(--text-primary); stroke: var(--surface-1); stroke-width: 1.4; } .act-marker-dot--deriv { fill: var(--series-purple); } .act-marker-drop { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.6; } .act-section { margin-top: 26px; padding: 20px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; } .act-vg-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px 28px; margin-top: 14px; align-items: start; } @media (max-width: 860px) { .act-vg-grid { grid-template-columns: 1fr; } } .act-section .gd-chart-col > .gd-svg { max-width: 92%; margin: 0 auto; } .act-vg-curve { fill: none; stroke-width: 2.2; } .act-vg-curve--sigmoid { stroke: var(--series-blue); } .act-vg-curve--tanh { stroke: var(--series-orange); } .act-vg-curve--relu { stroke: var(--status-good); stroke-width: 2.6; } .act-vg-note { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.5; margin: 0 0 10px; } .act-vg-table th, .act-vg-table td { padding: 5px 10px; font-size: 0.76rem; } .act-dead-toggle { display: flex; gap: 8px; margin: 14px 0 16px; } .act-dead-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .act-dead-chip { width: 44px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 0.68rem; font-variant-numeric: tabular-nums; font-weight: 600; transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease; } .act-dead-chip--alive { background: var(--tint-good); color: var(--status-good); border: 1px solid var(--status-good); } .act-dead-chip--dead { background: var(--page-plane); color: var(--text-muted); border: 1px dashed var(--text-muted); opacity: 0.6; text-decoration: line-through; } .act-dead-summary { font-size: 0.82rem; font-weight: 600; color: var(--text-primary); margin: 0; } .act-softmax-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 32px; margin-top: 14px; align-items: center; } @media (max-width: 860px) { .act-softmax-grid { grid-template-columns: 1fr; } } .act-softmax-sliders { display: flex; flex-direction: column; gap: 14px; } .act-softmax-slider-row { margin: 0; } .act-softmax-note { font-size: 0.76rem; color: var(--text-secondary); min-height: 2.2em; margin: 4px 0 0; } .act-softmax-bars { display: flex; align-items: flex-end; justify-content: space-around; gap: 20px; height: 220px; padding: 12px 12px 0; } .act-softmax-col { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1 1 0; height: 100%; justify-content: flex-end; } .act-softmax-pct { font-size: 0.82rem; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; } .act-softmax-bar-track { width: 100%; max-width: 64px; flex: 1 1 auto; display: flex; align-items: flex-end; } .act-softmax-bar { width: 100%; border-radius: 6px 6px 0 0; transition: height 0.2s ease; min-height: 2px; } .act-softmax-name { font-size: 0.74rem; color: var(--text-secondary); } .act-compare-table td { white-space: normal; text-align: left; } .act-compare-table th:first-child, .act-compare-table td:first-child { text-align: left; } /* ========================================================================== Perceptron ========================================================================== */ .perc-panel { margin-top: 22px; padding: 18px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; } .perc-panel .lda-main-grid { margin-top: 4px; } .perc-panel .gd-chart-col > .gd-svg { max-width: 62%; margin: 0 auto; } .perc-controls { display: flex; gap: 8px; flex-wrap: wrap; } .perc-dot { stroke: var(--surface-1); stroke-width: 1; } .perc-dot--pos { fill: var(--series-blue); } .perc-dot--neg { fill: var(--series-orange); } .perc-boundary-line { stroke: var(--text-primary); stroke-width: 2; } .perc-w-arrow { stroke: var(--status-good); stroke-width: 2.2; marker-end: none; } .perc-current-ring { fill: none; stroke: var(--text-primary); stroke-width: 2; stroke-dasharray: 3 2; opacity: 0; } .perc-compare-table th[data-role].is-active { background: var(--tint-good); } .perc-compare-table td.is-active { background: var(--tint-good) !important; } .perc-compare-table th, .perc-compare-table td { padding: 4px 8px; font-size: 0.68rem; } /* The neuron diagram */ .perc-neuron-wire { stroke: var(--text-muted); stroke-width: 1.4; } .perc-neuron-wire--out { stroke: var(--text-primary); stroke-width: 1.8; } .perc-neuron-wlabel { font-size: 9px; fill: var(--text-secondary); font-variant-numeric: tabular-nums; } .perc-neuron-node { stroke-width: 1.6; } .perc-neuron-node--input { fill: var(--surface-1); stroke: var(--series-blue); } .perc-neuron-node--bias { fill: var(--surface-1); stroke: var(--text-muted); stroke-dasharray: 2 2; } .perc-neuron-node--sum { fill: var(--surface-1); stroke: var(--series-purple); } .perc-neuron-node--act { fill: var(--surface-1); stroke: var(--series-purple); } .perc-neuron-node--output { fill: var(--page-plane); stroke: var(--text-muted); transition: fill 0.15s ease, stroke 0.15s ease; } .perc-neuron-node--output.perc-neuron-node--correct { fill: var(--tint-good); stroke: var(--status-good); } .perc-neuron-node--output.perc-neuron-node--wrong { fill: var(--tint-bad); stroke: var(--status-critical); } .perc-neuron-node-label { text-anchor: middle; font-size: 12px; font-weight: 700; fill: var(--text-primary); } .perc-neuron-node-label--bias { font-size: 10px; } .perc-neuron-node-sub { text-anchor: middle; font-size: 10px; fill: var(--text-muted); } .perc-neuron-step-icon { fill: none; stroke: var(--series-purple); stroke-width: 1.8; stroke-linejoin: round; } .perc-bottom-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 24px; align-items: start; } @media (max-width: 860px) { .perc-bottom-row { grid-template-columns: 1fr; } } .perc-bottom-col { min-width: 0; } .perc-xor-note { margin: 0 0 8px; font-size: 0.72rem; color: var(--text-secondary); line-height: 1.4; } .perc-xor-mini-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } .perc-xor-mini-col { text-align: center; } .perc-xor-mini-grid .gd-svg { width: 100%; max-width: 130px; display: block; margin: 0 auto; } .perc-mini-caption { margin: 2px 0 0; font-size: 0.62rem; color: var(--text-muted); } /* ========================================================================== Decision Tree ========================================================================== */ .dt-panel { margin-top: 22px; padding: 18px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; } .dt-panel .lda-main-grid { margin-top: 10px; } .dt-panel .gd-chart-col > .gd-svg { max-width: 66%; margin: 0 auto; } .dt-panel .ci-method-tabs { margin: 10px 0 4px; } .dt-dot-strip { display: flex; flex-wrap: wrap; gap: 6px; max-width: 220px; margin: 10px auto 0; } .dt-dot { width: 26px; height: 26px; border-radius: 50%; transition: background 0.15s ease; } .dt-dot--0 { background: var(--series-blue); } .dt-dot--1 { background: var(--series-orange); } .dt-curve { fill: none; stroke-width: 2.2; } .dt-curve--entropy { stroke: var(--series-blue); } .dt-curve--gini { stroke: var(--series-orange); } .dt-marker-line { stroke: var(--text-primary); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: 0.5; } .dt-marker-dot { stroke: var(--surface-1); stroke-width: 1.2; } .dt-marker-dot--entropy { fill: var(--series-blue); } .dt-marker-dot--gini { fill: var(--series-orange); } .dt-split-dot { stroke: var(--surface-1); stroke-width: 0.8; } .dt-split-dot--fail { fill: var(--series-orange); } .dt-split-dot--pass { fill: var(--series-blue); } .dt-threshold-line { stroke: var(--text-primary); stroke-width: 2; } .dt-tree-svg { max-width: 100% !important; } .dt-tree-link { stroke: var(--text-muted); stroke-width: 1.3; } .dt-tree-box { fill: var(--surface-1); stroke: var(--series-purple); stroke-width: 1.4; } .dt-tree-box--leaf { fill: var(--page-plane); stroke-width: 1.8; } .dt-tree-node.is-selected .dt-tree-box { stroke: var(--text-primary); stroke-width: 2.4; } .dt-tree-text { text-anchor: middle; fill: var(--text-primary); } .dt-tree-text--main { font-size: 9.5px; font-weight: 700; } .dt-tree-text--sub { font-size: 8px; fill: var(--text-muted); } .dt-scatter-dot { stroke: var(--surface-1); stroke-width: 0.8; transition: opacity 0.15s ease, r 0.15s ease; } .dt-scatter-dot--dim { opacity: 0.2; } .dt-scatter-dot--highlight { stroke: var(--text-primary); stroke-width: 1.6; } .dt-region-rect { fill: var(--tint-good); stroke: var(--status-good); stroke-width: 1.2; opacity: 0; transition: opacity 0.15s ease; } .dt-axis-title { text-anchor: middle; font-size: 9px; font-weight: 600; fill: var(--text-secondary); } /* ========================================================================== Derivatives & Integration ========================================================================== */ .calc-panel .gd-chart-col > .gd-svg { max-width: 56%; margin: 0 auto; } .calc-curve { fill: none; stroke: var(--text-primary); stroke-width: 2.2; } .calc-tangent-line { stroke: var(--status-good); stroke-width: 2; stroke-dasharray: 5 4; } .calc-secant-line { stroke: var(--series-blue); stroke-width: 2; } .calc-point { stroke: var(--surface-1); stroke-width: 1.4; } .calc-point--a { fill: var(--text-primary); } .calc-point--b { fill: var(--series-blue); } .calc-rect { fill: var(--series-orange); opacity: 0.35; stroke: var(--series-orange); stroke-width: 1; } .calc-area-fill { fill: var(--tint-good); stroke: none; } .calc-x-marker { stroke: var(--text-primary); stroke-width: 1.6; stroke-dasharray: 3 3; opacity: 0.6; } .calc-table th, .calc-table td { padding: 5px 10px; font-size: 0.76rem; text-align: center; } /* ========================================================================== Hypothesis Testing ========================================================================== */ .ht-panel { margin-top: 22px; padding: 18px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; } .ht-panel .lda-controls-row { flex-wrap: wrap; } .ht-panel .ci-method-tabs { margin: 0; } .ht-panel .gd-chart-col > .gd-svg { max-width: 62%; margin: 0 auto; } .ht-curve { fill: none; stroke-width: 2.2; } .ht-curve--h0 { stroke: var(--series-blue); } .ht-curve--h1 { stroke: var(--series-orange); } .ht-fill--alpha { fill: var(--status-critical); opacity: 0.3; stroke: none; } .ht-fill--beta { fill: var(--series-orange); opacity: 0.35; stroke: none; } .ht-fill--pval { fill: var(--status-critical); opacity: 0.35; stroke: none; } .ht-threshold-line { stroke: var(--text-primary); stroke-width: 1.8; stroke-dasharray: 4 3; } .ht-table th, .ht-table td { padding: 5px 10px; font-size: 0.76rem; }