.matrix-grid { display:grid; max-width:360px; aspect-ratio:1; gap:8px; touch-action:none; margin:16px 0; }
.matrix-grid button { min-width:44px; min-height:44px; font-size:1.2rem; border:3px solid transparent; }
[data-optic="12"] { background:#183a64; color:#fff; }
[data-optic="18"] { background:#295b5a; color:#fff; }
[data-optic="30"] { background:#72501d; color:#fff; }
[data-optic="50"] { background:#66365d; color:#fff; }
.matrix-grid [aria-pressed="true"],#matrixPalette [aria-pressed="true"] { border:3px solid #fff; box-shadow:0 0 0 2px #35b8f0; }
.matrix-controls { display:flex; gap:8px; flex-wrap:wrap; margin:12px 0; }
.matrix-controls button,.matrix-presets button { min-height:44px; }
.matrix-controls label { flex:1; min-width:110px; }
.matrix-presets { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.matrix-mini { display:grid; gap:2px; margin:6px auto; max-width:140px; }
.matrix-mini span { padding:3px; font-size:11px; }
.matrix-notice { margin:12px 0; padding:12px; border:1px solid #a9b9ca; border-radius:8px; font-size:13px; }
.matrix-notice.caution { border:2px solid #f7b64a; background:#402e16; color:#fff2d8; }
.matrix-notice summary { cursor:pointer; min-height:30px; }
.matrix-notice p { margin:6px 0; }
#matrixResultNotice { width:100%; }
#matrixInspectorNotice { flex-shrink:0; }
@media print { .matrix-notice,.matrix-notice.caution { display:block; color:#000; background:#fff; border-color:#555; break-inside:avoid; } .matrix-notice[hidden] { display:none; } }