.matrices { min-width: 0; }
.matrix-controls { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 28px; }
.matrix-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 14px; }
.matrix-select { max-width: 100%; min-height: 44px; padding: 8px 38px 8px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); font: 500 14px/1.4 var(--sans); }
.matrix-variant { margin: 0 0 9px; font: 500 13px/1.5 var(--mono); }
.matrix-context { margin: 20px 0 12px; max-width: 820px; font-size: 14px; color: var(--muted); }
.matrix-legend { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-bottom: 24px; }
.matrix-legend-item { display: flex; align-items: center; gap: 8px; font: 400 12px/1.5 var(--mono); white-space: nowrap; }
.matrix-legend-tile { display: block; width: 24px; height: 24px; border: 1px solid var(--matrix-text); border-radius: 3px; }
.matrix-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; min-width: 0; }
.matrix-panel { min-width: 0; padding-top: 18px; border-top: 1px solid var(--rule); }
.matrix-panel-title { margin: 0; font: 700 16px/1.4 var(--mono); }
.matrix-summary { margin: 8px 0 16px; font: 400 12px/1.6 var(--mono); color: var(--muted); }
.matrix-scroll { position: relative; max-width: 100%; min-width: 0; overflow-x: auto; padding: 4px 0 8px; }
.matrix-table { table-layout: fixed; width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 2px; font: 400 10px/1.3 var(--mono); font-variant-numeric: tabular-nums; text-align: center; }
.matrix-table th { height: 30px; font-weight: 400; color: var(--text); }
.matrix-table th:first-child { width: 48px; text-align: left; }
.matrix-table td { position: relative; height: 32px; padding: 4px 1px; border: 1px solid var(--rule); border-radius: 2px; }
.matrix-table .is-current-month { box-shadow: inset 0 0 0 1px var(--line); }
.matrix-table th.is-current-month { font-weight: 700; box-shadow: none; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.matrix-table td.is-pair { outline: 3px double var(--line); outline-offset: -3px; }
.matrix-diagonal { background: var(--matrix-bg); color: var(--matrix-text); }
.matrix-band-0 { background-color: var(--matrix-bg); color: var(--matrix-text); background-image: repeating-linear-gradient(135deg, transparent 0 9px, var(--matrix-panel) 9px 11px); }
.matrix-band-1 { background: var(--matrix-panel); color: var(--matrix-text); }
.matrix-band-2 { background: var(--matrix-accent); color: var(--matrix-onAccent); }
.matrix-band-3 { background: var(--matrix-text); color: var(--matrix-bg); }
.matrix-no-baseline { margin: 0; min-height: 420px; display: flex; align-items: center; justify-content: center; padding: 32px; border: 1px dashed var(--line); border-radius: 6px; font-size: 16px; }
.matrix-explorer { margin-top: 28px; padding: 20px 0; border-block: 1px solid var(--rule); }
.matrix-pair-controls { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.matrix-apply { min-height: 44px; padding: 8px 18px; border: 1px solid var(--accent); border-radius: 999px; background: var(--accent); color: var(--onAccent); font-size: 14px; font-weight: 600; }
.matrix-apply:disabled { cursor: default; background: var(--bg); color: var(--muted); border-color: var(--rule); }
.matrix-pair-result { margin: 16px 0 0; max-width: 880px; font: 400 13px/1.65 var(--mono); }
.matrix-method { margin-top: 20px; max-width: 880px; font-size: 14px; }
.matrix-method summary { padding-block: 8px; cursor: pointer; font-weight: 600; }
.matrix-method p { margin: 12px 0 0; }
.matrix-source-links { line-height: 1.8; }
@media (max-width: 1100px) { .matrix-panels { grid-template-columns: minmax(0, 1fr); gap: 32px; } .matrix-no-baseline { min-height: 180px; } }
@media (max-width: 480px) { .matrix-controls { gap: 12px; } .matrix-variant { margin: 0; } .matrix-pair-controls { gap: 12px; } .matrix-pair-controls .matrix-field { flex: 1 1 120px; } }
@media (forced-colors: active) { .matrix-table td { border: 1px solid CanvasText; } .matrix-table .is-current-month { outline: 1px solid Highlight; } .matrix-table td.is-pair { outline: 3px double Highlight; } .matrix-band-0 { border-style: dashed; } }