.alignment-visual{margin:24px;border:1px solid #284741;border-radius:14px;background:#0b171c;color:#d9eae4;padding:28px;font-size:18px;line-height:1.7;min-width:0}
.visual-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}.visual-eyebrow{font:13px/1.6 var(--mono);letter-spacing:1.8px;color:#85ac9c}.visual-heading h3{font-size:28px;color:#d9f4e4;margin:7px 0 12px;font-weight:500}.visual-tag{font-size:14px;white-space:nowrap;color:#a7ddba;border:1px solid #446b56;border-radius:30px;padding:5px 12px}.visual-intro{color:#a8c0b8;max-width:850px;margin-bottom:24px}.visual-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(270px,1fr);gap:28px;align-items:start}.visual-layout>div{min-width:0}.alignment-map{border:1px solid #2d484b;border-radius:9px;background:radial-gradient(ellipse at 70% 40%,#16352c,#0e1f26);overflow:hidden;cursor:crosshair}.alignment-map svg{display:block;width:100%;height:auto;fill:none;stroke:none}.alignment-map text{font:19px var(--mono);fill:#a6c8bb;stroke:none}.map-grid{stroke:#3b5556;stroke-width:1;stroke-dasharray:3 5}.map-route{stroke:#627b77;stroke-width:4;fill:none}.map-progress{stroke:#b4eec6;stroke-width:4;fill:none}.map-current{fill:#f2ce96;stroke:#263934;stroke-width:3}.visual-caption{font-size:15px;color:#94afa9;line-height:1.8;margin:12px 0}.visual-readout{min-height:320px;padding:20px 22px;border-left:2px solid #94cbae;background:#172b2a55;border-radius:0 8px 8px 0}.visual-readout p{font-size:16px;overflow-wrap:anywhere}.visual-step-name{color:#bad4c6}.visual-big-pair{font:52px/1.5 var(--mono);color:#d2f5e0;letter-spacing:7px;margin:10px 0}.visual-readout .visual-score-change{font-size:19px;color:#f2ce96;margin:14px 0 5px}.visual-readout .visual-total{font-size:25px;color:#c3ecd4}.visual-readout .visual-local-note{font-size:15px;color:#97b7ad;margin-top:12px}.visual-controls,.visual-grid-controls{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0 16px}.alignment-visual button{font-size:16px;border:1px solid #4c7064;border-radius:5px;padding:9px 13px;min-height:46px;color:#c9e8d6;background:#142e28}.alignment-visual button:hover:not(:disabled){background:#254a3c;border-color:#a8d7b4}.alignment-visual button[aria-pressed=true]{background:#b6e9c6;color:#133424}.alignment-visual button:disabled{opacity:.4}.visual-range-label{display:flex;justify-content:space-between;color:#c4dacf;font-size:17px;gap:16px}.alignment-visual input[type=range]{width:100%;accent-color:#badfc0;height:38px;margin:8px 0 20px;cursor:pointer}.visual-strip{display:flex;align-items:stretch;gap:7px;overflow-x:auto;padding:4px 3px 14px;scrollbar-width:thin}.alignment-visual .visual-column{display:flex;flex-direction:column;align-items:center;flex:0 0 56px;gap:5px;background:#182d2a;border-color:#365b4a;padding:9px 6px;min-width:0;color:#c8ead7}.visual-column strong,.visual-column-labels strong{font:26px/1.5 var(--mono)}.visual-column small,.visual-column-labels small{font:14px/1.5 var(--mono)}.visual-column .column-link,.visual-column-labels .column-link{height:17px;font-size:14px;line-height:17px}.alignment-visual .visual-column.different{background:#392d25;border-color:#795d39;color:#edce9f}.alignment-visual .visual-column.gap{background:#2d303b;border-color:#606778;color:#c8d0e3}.alignment-visual .visual-column.current{outline:3px solid #d9bc85;outline-offset:-2px;background:#244e3b;color:#f2f8e8}.visual-column-labels{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 4px;flex:0 0 24px;color:#96b5a6}.visual-matrix-details{border-top:1px solid #36514a;margin-top:14px;padding-top:18px}.visual-matrix-details summary{font-size:18px;cursor:pointer;color:#c9e8d6;min-height:44px}.visual-matrix-details p{font-size:16px;color:#9fb9ad;margin:12px 0}.visual-grid-controls{margin-top:16px}.visual-grid{overflow:auto;max-height:600px;border:1px solid #35514b;border-radius:7px;scrollbar-width:thin}.visual-score-table{border-spacing:4px;white-space:nowrap;width:max-content;font-family:var(--mono)}.visual-score-table th{font-size:15px;font-weight:400;padding:7px 9px;color:#b3cdbf;background:#0e2023;position:sticky;left:0;z-index:1}.visual-score-table thead{position:sticky;top:0;z-index:2}.alignment-visual .visual-score{font-size:17px;min-width:55px;height:46px;padding:5px 8px;background:#16282c;border-color:#344c50;border-radius:3px;color:#96b2b0}.alignment-visual .path-cell{background:#254e38;color:#d0f2d7;border-color:#54835b}.alignment-visual .visual-score.current{outline:2px solid #eed09a;outline-offset:-2px;color:#ffe0a9}.visual-cell-readout strong,.visual-cell-readout span{display:block}.visual-cell-readout strong{font-size:19px;color:#d4e5d8}.full-alignment{border-top:1px solid var(--line);padding:18px 0}.full-alignment summary{margin:0 24px;font-size:18px;cursor:pointer;color:#295945;min-height:44px}.full-alignment .alignment{font-size:18px}.full-alignment .residue{font-size:18px;width:23px;line-height:30px}.full-alignment .coordinate{font-size:15px;width:48px}.full-alignment .row-name{font-size:16px}
@media(max-width:1150px){.visual-layout{grid-template-columns:1fr}.visual-readout{min-height:0}.visual-big-pair{font-size:45px;margin:5px 0}.visual-controls{margin-top:18px}.visual-heading{align-items:flex-start}.visual-tag{display:none}}
@media(max-width:550px){.alignment-visual{margin:12px;padding:19px 14px}.visual-heading h3{font-size:25px;line-height:1.5}.visual-eyebrow{font-size:11px;letter-spacing:1px}.visual-intro{font-size:17px;margin-bottom:18px}.visual-layout{gap:12px}.visual-readout{padding:15px}.visual-controls{gap:8px}.alignment-visual button{font-size:16px;padding:9px 10px}.visual-controls button{flex:1 1 28%;white-space:nowrap}.visual-caption{font-size:15px}.visual-strip{gap:5px}.alignment-visual .visual-column{flex-basis:48px}.visual-range-label{font-size:16px}.visual-grid-controls{gap:7px}.visual-grid-controls button{padding:8px}.visual-grid{max-height:430px}.full-alignment summary{margin:0 16px}}
.visual-strip{position:relative}.alignment-visual{scroll-margin-top:20px}
@media(max-width:550px){.alignment-map text{font-size:32px}}