| :root { |
| color-scheme: dark; |
| --bg: #101318; |
| --band: #151a22; |
| --panel: #1b212b; |
| --panel-strong: #202938; |
| --text: #ecf2f8; |
| --muted: #95a3b5; |
| --line: #2c3544; |
| --accent: #6ee7b7; |
| --accent-2: #7dd3fc; |
| --warn: #fbbf24; |
| --bad: #fb7185; |
| --radius: 8px; |
| font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; |
| } |
|
|
| * { |
| box-sizing: border-box; |
| } |
|
|
| body { |
| margin: 0; |
| background: var(--bg); |
| color: var(--text); |
| } |
|
|
| .topbar { |
| position: sticky; |
| top: 0; |
| z-index: 10; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 14px 28px; |
| border-bottom: 1px solid var(--line); |
| background: rgba(16, 19, 24, 0.94); |
| backdrop-filter: blur(14px); |
| } |
|
|
| .brand { |
| display: inline-flex; |
| gap: 12px; |
| align-items: center; |
| color: var(--text); |
| text-decoration: none; |
| } |
|
|
| .brand-mark { |
| display: grid; |
| width: 38px; |
| height: 38px; |
| place-items: center; |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| background: #0f766e; |
| color: white; |
| font-weight: 800; |
| } |
|
|
| .brand small, |
| .eyebrow, |
| .panel-kicker, |
| .topnav a, |
| label { |
| color: var(--muted); |
| } |
|
|
| .brand strong, |
| .brand small { |
| display: block; |
| } |
|
|
| .topnav { |
| display: flex; |
| gap: 16px; |
| } |
|
|
| .topnav a { |
| text-decoration: none; |
| font-size: 14px; |
| } |
|
|
| .workspace { |
| width: min(1440px, 100%); |
| margin: 0 auto; |
| padding: 28px; |
| } |
|
|
| .hero { |
| display: grid; |
| grid-template-columns: minmax(0, 1fr) minmax(260px, 440px); |
| gap: 24px; |
| align-items: end; |
| margin-bottom: 24px; |
| } |
|
|
| .hero h1 { |
| margin: 4px 0 0; |
| font-size: clamp(34px, 5vw, 72px); |
| line-height: 0.95; |
| letter-spacing: 0; |
| } |
|
|
| .thesis { |
| margin: 0; |
| color: #c7d2df; |
| line-height: 1.55; |
| } |
|
|
| .theory-strip { |
| display: grid; |
| grid-template-columns: repeat(5, minmax(0, 1fr)); |
| gap: 12px; |
| margin-bottom: 18px; |
| } |
|
|
| .theory-strip article { |
| min-width: 0; |
| border: 1px solid var(--line); |
| border-radius: var(--radius); |
| background: var(--panel); |
| padding: 14px; |
| } |
|
|
| .theory-strip span { |
| color: var(--accent-2); |
| font-size: 12px; |
| font-weight: 900; |
| } |
|
|
| .theory-strip h3 { |
| margin: 8px 0 6px; |
| } |
|
|
| .theory-strip p { |
| margin: 0; |
| color: #c7d2df; |
| font-size: 14px; |
| line-height: 1.4; |
| } |
|
|
| .eyebrow, |
| .panel-kicker { |
| margin: 0 0 6px; |
| text-transform: uppercase; |
| letter-spacing: 0.08em; |
| font-size: 12px; |
| font-weight: 700; |
| } |
|
|
| .app-grid { |
| display: grid; |
| grid-template-columns: minmax(300px, 0.9fr) minmax(300px, 0.8fr) minmax(380px, 1.2fr); |
| gap: 18px; |
| align-items: stretch; |
| } |
|
|
| .lower-grid { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 18px; |
| margin-top: 18px; |
| } |
|
|
| .detail-grid { |
| display: grid; |
| grid-template-columns: repeat(4, minmax(0, 1fr)); |
| gap: 18px; |
| margin-top: 18px; |
| } |
|
|
| .panel { |
| min-width: 0; |
| border: 1px solid var(--line); |
| border-radius: var(--radius); |
| background: var(--panel); |
| padding: 18px; |
| } |
|
|
| .matrix-panel { |
| margin-top: 18px; |
| } |
|
|
| .panel-head { |
| display: flex; |
| justify-content: space-between; |
| gap: 14px; |
| align-items: flex-start; |
| margin-bottom: 14px; |
| } |
|
|
| .panel h2, |
| .panel h3 { |
| margin: 0; |
| } |
|
|
| .status-pill { |
| flex: 0 0 auto; |
| border: 1px solid rgba(110, 231, 183, 0.45); |
| border-radius: 999px; |
| padding: 5px 10px; |
| color: var(--accent); |
| background: rgba(110, 231, 183, 0.08); |
| font-size: 12px; |
| font-weight: 700; |
| } |
|
|
| .status-pill.muted { |
| border-color: var(--line); |
| color: var(--muted); |
| background: #151a22; |
| } |
|
|
| .status-pill.warn { |
| border-color: rgba(251, 191, 36, 0.55); |
| color: var(--warn); |
| } |
|
|
| .status-pill.bad { |
| border-color: rgba(251, 113, 133, 0.55); |
| color: var(--bad); |
| } |
|
|
| textarea, |
| select, |
| input { |
| width: 100%; |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| background: #101620; |
| color: var(--text); |
| font: inherit; |
| } |
|
|
| textarea { |
| min-height: 360px; |
| resize: vertical; |
| padding: 14px; |
| line-height: 1.45; |
| } |
|
|
| select, |
| input { |
| min-height: 42px; |
| padding: 0 10px; |
| } |
|
|
| .controls, |
| .sample-search { |
| display: grid; |
| grid-template-columns: 1fr 1fr auto; |
| gap: 12px; |
| align-items: end; |
| margin-top: 14px; |
| } |
|
|
| .button-row { |
| display: flex; |
| gap: 10px; |
| align-items: end; |
| } |
|
|
| .button-row button { |
| flex: 1 1 auto; |
| } |
|
|
| label { |
| display: grid; |
| gap: 6px; |
| font-size: 13px; |
| font-weight: 700; |
| } |
|
|
| button { |
| min-height: 42px; |
| border: 0; |
| border-radius: 8px; |
| padding: 0 16px; |
| background: var(--accent); |
| color: #062017; |
| font-weight: 800; |
| cursor: pointer; |
| } |
|
|
| button.secondary { |
| border: 1px solid var(--line); |
| background: var(--panel-strong); |
| color: var(--text); |
| } |
|
|
| button:disabled { |
| cursor: wait; |
| opacity: 0.6; |
| } |
|
|
| .pipeline { |
| display: grid; |
| gap: 12px; |
| } |
|
|
| .pipeline article { |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| background: var(--panel-strong); |
| padding: 14px; |
| } |
|
|
| .pipeline span { |
| color: var(--accent-2); |
| font-weight: 900; |
| font-size: 12px; |
| } |
|
|
| .pipeline p { |
| margin: 8px 0 0; |
| color: #c7d2df; |
| } |
|
|
| .warnings { |
| display: grid; |
| gap: 8px; |
| margin-top: 14px; |
| } |
|
|
| .warning { |
| border: 1px solid rgba(251, 191, 36, 0.45); |
| border-radius: 8px; |
| padding: 10px; |
| color: #fde68a; |
| background: rgba(251, 191, 36, 0.08); |
| font-size: 13px; |
| } |
|
|
| .warning.meta { |
| border-color: rgba(125, 211, 252, 0.45); |
| color: #bae6fd; |
| background: rgba(125, 211, 252, 0.08); |
| } |
|
|
| .detail-list { |
| display: grid; |
| gap: 10px; |
| margin-top: 12px; |
| } |
|
|
| .detail-item { |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| background: var(--panel-strong); |
| padding: 12px; |
| } |
|
|
| .detail-item strong { |
| display: block; |
| margin-bottom: 6px; |
| color: var(--accent-2); |
| font-size: 12px; |
| text-transform: uppercase; |
| letter-spacing: 0.06em; |
| } |
|
|
| .detail-item p, |
| .detail-item ul { |
| margin: 0; |
| color: #c7d2df; |
| font-size: 14px; |
| line-height: 1.4; |
| } |
|
|
| .detail-item ul { |
| padding-left: 18px; |
| } |
|
|
| .detail-item a { |
| color: var(--accent-2); |
| } |
|
|
| .matrix { |
| display: grid; |
| grid-template-columns: minmax(130px, 0.9fr) repeat(10, minmax(96px, 1fr)); |
| gap: 6px; |
| overflow-x: auto; |
| margin-top: 14px; |
| padding-bottom: 8px; |
| } |
|
|
| .matrix-label, |
| .matrix-cell { |
| min-width: 0; |
| min-height: 48px; |
| border-radius: 8px; |
| padding: 8px; |
| font-size: 12px; |
| } |
|
|
| .matrix-label { |
| display: grid; |
| place-items: center; |
| border: 1px solid var(--line); |
| background: #111822; |
| color: var(--muted); |
| font-weight: 800; |
| text-align: center; |
| } |
|
|
| .row-label { |
| justify-content: start; |
| text-align: left; |
| } |
|
|
| .matrix-cell { |
| border: 1px solid var(--line); |
| background: var(--panel-strong); |
| color: #c7d2df; |
| overflow-wrap: anywhere; |
| } |
|
|
| .matrix-cell:hover, |
| .matrix-cell:focus-visible, |
| .matrix-cell.is-active { |
| border-color: rgba(110, 231, 183, 0.8); |
| outline: none; |
| background: rgba(110, 231, 183, 0.12); |
| color: var(--text); |
| } |
|
|
| pre { |
| min-height: 560px; |
| max-height: 760px; |
| overflow: auto; |
| margin: 0; |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| padding: 16px; |
| background: #0d121a; |
| color: #e5edf5; |
| white-space: pre-wrap; |
| line-height: 1.45; |
| } |
|
|
| .list-stack { |
| display: grid; |
| gap: 10px; |
| } |
|
|
| .run-card, |
| .sample-card, |
| .score-card { |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| background: var(--panel-strong); |
| padding: 12px; |
| } |
|
|
| .run-card strong, |
| .sample-card strong, |
| .score-card strong { |
| display: block; |
| margin-bottom: 5px; |
| } |
|
|
| .run-card p, |
| .sample-card p { |
| margin: 0; |
| color: #c7d2df; |
| line-height: 1.4; |
| } |
|
|
| .meta { |
| margin-top: 8px; |
| color: var(--muted); |
| font-size: 12px; |
| } |
|
|
| .score-list { |
| display: grid; |
| gap: 10px; |
| } |
|
|
| .score-card { |
| display: grid; |
| gap: 8px; |
| } |
|
|
| .score-card div:first-child { |
| display: flex; |
| justify-content: space-between; |
| gap: 10px; |
| } |
|
|
| .score-card p { |
| margin: 0; |
| color: #c7d2df; |
| font-size: 13px; |
| line-height: 1.4; |
| } |
|
|
| .score-bar { |
| height: 8px; |
| overflow: hidden; |
| border-radius: 999px; |
| background: #111827; |
| } |
|
|
| .score-bar i { |
| display: block; |
| height: 100%; |
| border-radius: inherit; |
| background: var(--accent); |
| } |
|
|
| .export-panel pre { |
| min-height: 360px; |
| max-height: 560px; |
| } |
|
|
| .matrix-lab { |
| width: min(1760px, 100%); |
| padding: 18px 22px 30px; |
| } |
|
|
| .matrix-command-bar { |
| display: flex; |
| justify-content: space-between; |
| gap: 16px; |
| align-items: center; |
| margin-bottom: 14px; |
| } |
|
|
| .matrix-title-block { |
| display: flex; |
| min-width: 0; |
| gap: 14px; |
| align-items: baseline; |
| } |
|
|
| .matrix-lab h1 { |
| margin: 0; |
| font-size: clamp(28px, 3vw, 44px); |
| line-height: 1; |
| letter-spacing: 0; |
| } |
|
|
| .matrix-actions, |
| .segmented { |
| display: flex; |
| gap: 8px; |
| align-items: center; |
| flex-wrap: wrap; |
| } |
|
|
| .matrix-actions { |
| justify-content: flex-end; |
| } |
|
|
| .matrix-actions .status-pill { |
| min-width: 112px; |
| text-align: center; |
| white-space: nowrap; |
| } |
|
|
| .matrix-main-layout { |
| display: grid; |
| grid-template-columns: minmax(720px, 1fr) minmax(330px, 420px); |
| gap: 14px; |
| align-items: start; |
| } |
|
|
| .matrix-heatmap-panel { |
| display: flex; |
| min-height: calc(100vh - 128px); |
| flex-direction: column; |
| padding: 16px; |
| } |
|
|
| .matrix-heatmap-panel .panel-head { |
| align-items: center; |
| margin-bottom: 12px; |
| } |
|
|
| .matrix-heatmap-panel h2 { |
| max-width: 720px; |
| line-height: 1.15; |
| } |
|
|
| .matrix-lab .matrix-summary { |
| display: grid; |
| grid-template-columns: repeat(4, minmax(86px, 1fr)); |
| gap: 8px; |
| margin: 0 0 10px; |
| } |
|
|
| .matrix-lab .matrix-summary article { |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| background: var(--panel-strong); |
| padding: 10px; |
| } |
|
|
| .matrix-lab .matrix-summary strong { |
| display: block; |
| font-size: 24px; |
| line-height: 1; |
| } |
|
|
| .matrix-lab .matrix-summary span { |
| display: block; |
| margin-top: 4px; |
| color: var(--muted); |
| font-size: 12px; |
| } |
|
|
| .matrix-legend { |
| display: grid; |
| grid-template-columns: auto minmax(120px, 220px) auto auto auto; |
| gap: 8px; |
| align-items: center; |
| margin-bottom: 10px; |
| color: var(--muted); |
| font-size: 12px; |
| font-weight: 800; |
| } |
|
|
| .matrix-legend i { |
| display: block; |
| height: 10px; |
| border-radius: 999px; |
| background: linear-gradient(90deg, #1b2636, #14b8a6, #fbbf24); |
| } |
|
|
| .matrix-legend b { |
| justify-self: start; |
| min-width: 52px; |
| border: 1px solid rgba(34, 197, 94, 0.55); |
| border-radius: 999px; |
| padding: 3px 8px; |
| color: #bbf7d0; |
| background: rgba(34, 197, 94, 0.13); |
| text-align: center; |
| } |
|
|
| .matrix-legend b.risk { |
| border-color: rgba(251, 113, 133, 0.6); |
| color: #fecdd3; |
| background: rgba(251, 113, 133, 0.13); |
| } |
|
|
| .metric-tab { |
| min-height: 34px; |
| border: 1px solid var(--line); |
| background: var(--panel-strong); |
| color: var(--text); |
| } |
|
|
| .metric-tab.is-active { |
| border-color: rgba(110, 231, 183, 0.75); |
| background: rgba(110, 231, 183, 0.12); |
| color: var(--accent); |
| } |
|
|
| .matrix-heatmap-scroll { |
| flex: 1 1 auto; |
| min-height: 420px; |
| max-height: calc(100vh - 276px); |
| overflow: auto; |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| background: #0d121a; |
| padding: 10px; |
| } |
|
|
| .matrix-grid-lab { |
| display: grid; |
| grid-template-columns: minmax(132px, 0.85fr) repeat(var(--matrix-columns, 10), minmax(58px, 1fr)); |
| gap: 7px; |
| min-width: 0; |
| align-content: start; |
| } |
|
|
| .matrix-lab-label, |
| .matrix-lab-cell { |
| min-width: 0; |
| min-height: 54px; |
| border: 1px solid var(--line); |
| border-radius: 6px; |
| padding: 8px; |
| display: grid; |
| place-items: center; |
| text-align: center; |
| font-size: 13px; |
| overflow: hidden; |
| overflow-wrap: anywhere; |
| line-height: 1.18; |
| } |
|
|
| .matrix-lab-label { |
| background: #141c28; |
| color: #b7c4d5; |
| font-weight: 800; |
| } |
|
|
| .matrix-lab-label.corner { |
| position: sticky; |
| top: 0; |
| left: 0; |
| z-index: 5; |
| } |
|
|
| .matrix-lab-label.head:not(.row) { |
| position: sticky; |
| top: 0; |
| z-index: 4; |
| overflow-wrap: normal; |
| word-break: normal; |
| font-size: 12px; |
| } |
|
|
| .matrix-lab-label.row { |
| position: sticky; |
| left: 0; |
| z-index: 3; |
| justify-content: start; |
| text-align: left; |
| word-break: break-word; |
| } |
|
|
| .matrix-lab-cell { |
| color: white; |
| font-weight: 900; |
| overflow-wrap: anywhere; |
| text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45); |
| box-shadow: inset 0 -18px 30px rgba(0, 0, 0, 0.17); |
| gap: 4px; |
| grid-template-rows: auto minmax(12px, auto); |
| } |
|
|
| .matrix-lab-cell > span { |
| display: block; |
| } |
|
|
| .cell-badges { |
| display: flex; |
| min-height: 13px; |
| gap: 3px; |
| align-items: center; |
| justify-content: center; |
| } |
|
|
| .cell-badges b { |
| border: 1px solid rgba(255, 255, 255, 0.35); |
| border-radius: 999px; |
| padding: 1px 4px; |
| background: rgba(15, 23, 42, 0.45); |
| color: white; |
| font-size: 9px; |
| line-height: 1.1; |
| letter-spacing: 0; |
| } |
|
|
| .cell-badges b.danger { |
| border-color: rgba(251, 113, 133, 0.7); |
| background: rgba(127, 29, 29, 0.45); |
| } |
|
|
| .cell-badges b.info { |
| border-color: rgba(125, 211, 252, 0.65); |
| } |
|
|
| .cell-badges b.warn { |
| border-color: rgba(251, 191, 36, 0.7); |
| } |
|
|
| .matrix-lab-cell:hover, |
| .matrix-lab-cell:focus-visible, |
| .matrix-lab-cell.is-selected { |
| border-color: rgba(110, 231, 183, 0.95); |
| outline: none; |
| box-shadow: |
| inset 0 0 0 1px rgba(110, 231, 183, 0.72), |
| inset 0 -18px 30px rgba(0, 0, 0, 0.18), |
| 0 0 0 2px rgba(110, 231, 183, 0.18); |
| } |
|
|
| .matrix-side-rail { |
| position: sticky; |
| top: 82px; |
| display: grid; |
| gap: 14px; |
| max-height: calc(100vh - 96px); |
| overflow: auto; |
| } |
|
|
| .matrix-findings, |
| .matrix-inspector-panel .detail-list { |
| display: grid; |
| gap: 8px; |
| margin-top: 12px; |
| } |
|
|
| .finding-card, |
| .verdict-card { |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| background: var(--panel-strong); |
| padding: 11px; |
| } |
|
|
| .finding-card span, |
| .verdict-card span { |
| display: block; |
| color: var(--accent-2); |
| font-size: 11px; |
| font-weight: 900; |
| letter-spacing: 0.06em; |
| text-transform: uppercase; |
| } |
|
|
| .finding-card strong, |
| .verdict-card strong { |
| display: block; |
| margin-top: 5px; |
| color: var(--text); |
| font-size: 15px; |
| line-height: 1.25; |
| overflow-wrap: anywhere; |
| } |
|
|
| .finding-card p, |
| .verdict-card p { |
| margin: 6px 0 0; |
| color: #c7d2df; |
| font-size: 13px; |
| line-height: 1.35; |
| } |
|
|
| .finding-card.is-action, |
| .verdict-card.is-action { |
| border-color: rgba(110, 231, 183, 0.55); |
| background: rgba(110, 231, 183, 0.09); |
| } |
|
|
| .finding-card.is-danger, |
| .verdict-card.is-danger { |
| border-color: rgba(251, 113, 133, 0.62); |
| background: rgba(251, 113, 133, 0.1); |
| } |
|
|
| .finding-card.is-warn, |
| .verdict-card.is-warn { |
| border-color: rgba(251, 191, 36, 0.55); |
| background: rgba(251, 191, 36, 0.09); |
| } |
|
|
| .finding-card.is-ok, |
| .verdict-card.is-ok { |
| border-color: rgba(34, 197, 94, 0.52); |
| background: rgba(34, 197, 94, 0.08); |
| } |
|
|
| .comparison-item { |
| overflow: hidden; |
| } |
|
|
| .comparison-grid { |
| display: grid; |
| grid-template-columns: minmax(56px, 0.9fr) repeat(3, minmax(46px, 1fr)); |
| gap: 6px; |
| align-items: center; |
| color: #c7d2df; |
| font-size: 12px; |
| } |
|
|
| .comparison-grid span { |
| color: var(--muted); |
| } |
|
|
| .comparison-grid b, |
| .comparison-grid em { |
| min-width: 0; |
| border: 1px solid var(--line); |
| border-radius: 6px; |
| padding: 5px 6px; |
| background: rgba(15, 23, 42, 0.35); |
| color: var(--text); |
| font-style: normal; |
| text-align: center; |
| overflow-wrap: anywhere; |
| } |
|
|
| .matrix-input-panel textarea { |
| min-height: 144px; |
| max-height: 220px; |
| resize: vertical; |
| } |
|
|
| .matrix-cell-controls { |
| grid-template-columns: 1fr 1fr; |
| gap: 10px; |
| margin-top: 10px; |
| } |
|
|
| .matrix-input-panel .warning { |
| margin-top: 10px; |
| } |
|
|
| .matrix-preview-dock { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 14px; |
| margin-top: 14px; |
| } |
|
|
| .compact-pre { |
| min-height: 260px; |
| max-height: 420px; |
| font-size: 13px; |
| } |
|
|
| @media (max-width: 1100px) { |
| .app-grid, |
| .lower-grid, |
| .hero, |
| .detail-grid, |
| .theory-strip, |
| .matrix-main-layout, |
| .matrix-preview-dock { |
| grid-template-columns: 1fr; |
| } |
|
|
| .matrix-command-bar { |
| align-items: stretch; |
| flex-direction: column; |
| } |
|
|
| .matrix-side-rail { |
| position: static; |
| max-height: none; |
| overflow: visible; |
| } |
|
|
| .matrix-heatmap-panel { |
| min-height: 620px; |
| } |
|
|
| .matrix-heatmap-scroll { |
| max-height: none; |
| } |
| } |
|
|
| @media (max-width: 720px) { |
| .workspace, |
| .topbar { |
| padding: 18px; |
| } |
|
|
| .topnav { |
| display: none; |
| } |
|
|
| .controls, |
| .sample-search { |
| grid-template-columns: 1fr; |
| } |
|
|
| .button-row { |
| flex-direction: column; |
| align-items: stretch; |
| } |
|
|
| .matrix-actions { |
| align-items: stretch; |
| flex-direction: column; |
| } |
|
|
| .segmented { |
| flex-wrap: nowrap; |
| overflow-x: auto; |
| } |
|
|
| .metric-tab { |
| flex: 0 0 auto; |
| } |
|
|
| .matrix-title-block { |
| display: block; |
| } |
|
|
| .matrix-cell-controls { |
| grid-template-columns: 1fr; |
| } |
|
|
| .matrix-lab .matrix-summary { |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| } |
|
|
| .matrix-legend { |
| grid-template-columns: auto minmax(80px, 1fr) auto; |
| } |
|
|
| .matrix-grid-lab { |
| grid-template-columns: minmax(104px, 0.7fr) repeat(var(--matrix-columns, 10), minmax(68px, 1fr)); |
| min-width: 800px; |
| } |
|
|
| .matrix-heatmap-scroll { |
| min-height: 360px; |
| } |
|
|
| .matrix-lab-label, |
| .matrix-lab-cell { |
| min-height: 48px; |
| font-size: 12px; |
| } |
| } |
|
|
| body.matrix-page { |
| color-scheme: light; |
| --ink: #14201f; |
| --paper: #f7f3e8; |
| --paper-deep: #efe6d2; |
| --panel: rgba(255, 250, 240, 0.76); |
| --panel-strong: rgba(255, 250, 240, 0.9); |
| --text: #14201f; |
| --muted: #5f6d69; |
| --line: rgba(20, 32, 31, 0.16); |
| --accent: #326b5f; |
| --accent-2: #3e5f7c; |
| --warn: #b06b1e; |
| --bad: #b84f37; |
| --white: #fffaf0; |
| --shadow: 0 24px 80px rgba(29, 35, 32, 0.16); |
| background: |
| linear-gradient(90deg, rgba(20, 32, 31, 0.045) 1px, transparent 1px), |
| linear-gradient(rgba(20, 32, 31, 0.035) 1px, transparent 1px), |
| linear-gradient(180deg, var(--paper) 0%, #f1eadb 55%, #e8deca 100%); |
| background-size: 42px 42px, 42px 42px, auto; |
| color: var(--ink); |
| overflow-x: hidden; |
| } |
|
|
| body.matrix-page .topbar { |
| width: min(1360px, calc(100vw - 32px)); |
| margin: 16px auto 0; |
| border: 1px solid var(--line); |
| border-radius: var(--radius); |
| background: rgba(255, 250, 240, 0.72); |
| box-shadow: 0 14px 44px rgba(29, 35, 32, 0.1); |
| backdrop-filter: blur(14px); |
| } |
|
|
| body.matrix-page .brand, |
| body.matrix-page .topnav a { |
| color: var(--ink); |
| } |
|
|
| body.matrix-page .brand-mark { |
| border-color: rgba(20, 32, 31, 0.18); |
| background: var(--accent); |
| color: var(--white); |
| } |
|
|
| body.matrix-page .brand small, |
| body.matrix-page .topnav a, |
| body.matrix-page .eyebrow, |
| body.matrix-page .panel-kicker, |
| body.matrix-page label { |
| color: var(--muted); |
| } |
|
|
| body.matrix-page .matrix-lab { |
| position: relative; |
| width: min(1360px, calc(100vw - 32px)); |
| margin: 18px auto 64px; |
| overflow: hidden; |
| border: 1px solid var(--line); |
| border-radius: var(--radius); |
| background: |
| linear-gradient(120deg, rgba(255, 250, 240, 0.94), rgba(239, 230, 210, 0.78)), |
| radial-gradient(circle at 18% 14%, rgba(50, 107, 95, 0.14), transparent 34%), |
| radial-gradient(circle at 88% 22%, rgba(184, 79, 55, 0.15), transparent 32%); |
| box-shadow: var(--shadow); |
| } |
|
|
| #matrix-trace-canvas { |
| position: absolute; |
| inset: 0; |
| width: 100%; |
| height: 100%; |
| opacity: 0.75; |
| pointer-events: none; |
| } |
|
|
| body.matrix-page .matrix-command-bar, |
| body.matrix-page .matrix-main-layout, |
| body.matrix-page .matrix-preview-dock { |
| position: relative; |
| z-index: 1; |
| } |
|
|
| body.matrix-page .matrix-command-bar { |
| align-items: center; |
| padding: 2px 0 18px; |
| border-bottom: 1px solid var(--line); |
| } |
|
|
| body.matrix-page .matrix-title-block { |
| align-items: end; |
| } |
|
|
| body.matrix-page .matrix-title-block .eyebrow { |
| margin-bottom: 6px; |
| } |
|
|
| body.matrix-page h1, |
| body.matrix-page h2, |
| body.matrix-page h3, |
| body.matrix-page .matrix-summary strong, |
| body.matrix-page .meter-label b { |
| font-family: ui-serif, Georgia, "Times New Roman", serif; |
| color: var(--ink); |
| } |
|
|
| body.matrix-page .matrix-lab h1 { |
| font-size: clamp(3.4rem, 6.2vw, 6.2rem); |
| line-height: 0.9; |
| } |
|
|
| body.matrix-page .matrix-heatmap-panel h2 { |
| max-width: 13ch; |
| font-size: clamp(2.1rem, 3.7vw, 4.2rem); |
| line-height: 0.98; |
| } |
|
|
| body.matrix-page .panel, |
| body.matrix-page .matrix-heatmap-scroll, |
| body.matrix-page .detail-item, |
| body.matrix-page .finding-card, |
| body.matrix-page .verdict-card, |
| body.matrix-page pre { |
| border-color: var(--line); |
| background: var(--panel); |
| box-shadow: var(--shadow); |
| backdrop-filter: blur(16px); |
| } |
|
|
| body.matrix-page .matrix-heatmap-panel, |
| body.matrix-page .matrix-findings-panel, |
| body.matrix-page .matrix-inspector-panel, |
| body.matrix-page .matrix-input-panel { |
| background: rgba(255, 250, 240, 0.78); |
| } |
|
|
| body.matrix-page button { |
| border: 1px solid var(--accent); |
| background: var(--accent); |
| color: var(--white); |
| } |
|
|
| body.matrix-page button.secondary, |
| body.matrix-page .metric-tab { |
| border-color: var(--line); |
| background: rgba(255, 250, 240, 0.72); |
| color: var(--muted); |
| } |
|
|
| body.matrix-page .metric-tab.is-active { |
| border-color: var(--accent); |
| background: var(--accent); |
| color: var(--white); |
| } |
|
|
| body.matrix-page .status-pill { |
| border-color: var(--line); |
| background: rgba(20, 32, 31, 0.06); |
| color: var(--ink); |
| } |
|
|
| body.matrix-page .status-pill.bad { |
| border-color: rgba(184, 79, 55, 0.55); |
| color: var(--bad); |
| } |
|
|
| body.matrix-page .matrix-summary article { |
| border-color: var(--line); |
| background: rgba(255, 250, 240, 0.72); |
| } |
|
|
| body.matrix-page .matrix-summary span, |
| body.matrix-page .finding-card p, |
| body.matrix-page .verdict-card p, |
| body.matrix-page .detail-item p, |
| body.matrix-page .detail-item ul, |
| body.matrix-page .meta { |
| color: var(--muted); |
| } |
|
|
| body.matrix-page .matrix-legend { |
| color: var(--muted); |
| } |
|
|
| body.matrix-page .matrix-legend i { |
| background: linear-gradient(90deg, #3e5f7c, #326b5f, #b84f37); |
| } |
|
|
| body.matrix-page .matrix-legend b { |
| border-color: rgba(50, 107, 95, 0.4); |
| background: rgba(50, 107, 95, 0.12); |
| color: var(--accent); |
| } |
|
|
| body.matrix-page .matrix-legend b.risk { |
| border-color: rgba(184, 79, 55, 0.45); |
| background: rgba(184, 79, 55, 0.12); |
| color: var(--bad); |
| } |
|
|
| body.matrix-page .matrix-lab-label { |
| border-color: var(--line); |
| background: rgba(255, 250, 240, 0.74); |
| color: var(--ink); |
| } |
|
|
| body.matrix-page .matrix-lab-cell { |
| border-color: rgba(20, 32, 31, 0.18); |
| color: var(--white); |
| } |
|
|
| body.matrix-page .matrix-lab-cell:hover, |
| body.matrix-page .matrix-lab-cell:focus-visible, |
| body.matrix-page .matrix-lab-cell.is-selected { |
| border-color: var(--ink); |
| box-shadow: |
| inset 0 0 0 1px rgba(255, 250, 240, 0.72), |
| inset 0 -18px 30px rgba(20, 32, 31, 0.2), |
| 0 0 0 3px rgba(50, 107, 95, 0.16); |
| } |
|
|
| body.matrix-page .cell-badges b { |
| background: rgba(255, 250, 240, 0.2); |
| color: var(--white); |
| } |
|
|
| body.matrix-page .finding-card.is-action, |
| body.matrix-page .verdict-card.is-action, |
| body.matrix-page .finding-card.is-ok, |
| body.matrix-page .verdict-card.is-ok { |
| border-color: rgba(50, 107, 95, 0.34); |
| background: linear-gradient(180deg, rgba(255, 250, 240, 0.84), rgba(50, 107, 95, 0.12)); |
| } |
|
|
| body.matrix-page .finding-card.is-danger, |
| body.matrix-page .verdict-card.is-danger, |
| body.matrix-page .finding-card.is-warn, |
| body.matrix-page .verdict-card.is-warn { |
| border-color: rgba(184, 79, 55, 0.34); |
| background: linear-gradient(180deg, rgba(255, 250, 240, 0.84), rgba(184, 79, 55, 0.12)); |
| } |
|
|
| body.matrix-page .finding-card span, |
| body.matrix-page .verdict-card span, |
| body.matrix-page .detail-item strong { |
| color: var(--accent-2); |
| } |
|
|
| body.matrix-page .comparison-grid b, |
| body.matrix-page .comparison-grid em { |
| border-color: var(--line); |
| background: rgba(20, 32, 31, 0.05); |
| color: var(--ink); |
| } |
|
|
| body.matrix-page textarea, |
| body.matrix-page select, |
| body.matrix-page input, |
| body.matrix-page pre { |
| border-color: var(--line); |
| background: rgba(255, 250, 240, 0.76); |
| color: var(--ink); |
| } |
|
|
| body.matrix-page .warning, |
| body.matrix-page .warning.meta { |
| border-color: rgba(62, 95, 124, 0.3); |
| background: rgba(62, 95, 124, 0.08); |
| color: var(--steel, #3e5f7c); |
| } |
|
|
| body.matrix-page .compact-pre { |
| background: rgba(255, 250, 240, 0.76); |
| } |
|
|
| @media (max-width: 920px) { |
| body.matrix-page .topbar, |
| body.matrix-page .matrix-lab { |
| width: calc(100vw - 18px); |
| } |
|
|
| body.matrix-page .matrix-command-bar { |
| align-items: stretch; |
| } |
|
|
| body.matrix-page .matrix-lab h1 { |
| font-size: clamp(3rem, 14vw, 4.8rem); |
| } |
|
|
| body.matrix-page .matrix-heatmap-panel h2 { |
| max-width: 100%; |
| font-size: clamp(2.1rem, 8vw, 3rem); |
| } |
| } |
|
|
| @media (max-width: 640px) { |
| body.matrix-page .topbar { |
| align-items: flex-start; |
| flex-direction: column; |
| padding: 16px; |
| } |
|
|
| body.matrix-page .topnav { |
| display: flex; |
| width: 100%; |
| overflow-x: auto; |
| } |
|
|
| body.matrix-page .matrix-lab { |
| padding: 18px; |
| } |
|
|
| body.matrix-page .matrix-heatmap-panel .panel-head { |
| align-items: flex-start; |
| flex-direction: column; |
| } |
|
|
| body.matrix-page .matrix-heatmap-panel h2 { |
| max-width: calc(100vw - 72px); |
| font-size: clamp(1.8rem, 7vw, 2.25rem); |
| overflow-wrap: break-word; |
| word-break: break-word; |
| } |
| } |
|
|
