:root {
  color-scheme:dark;
  --paper:#0b1321;
  --surface:#111d2f;
  --layer:#18283d;
  --raised:#1e344c;
  --ink:#eef4ff;
  --muted:#aabbd2;
  --line:#2a3b53;
  --line-strong:#3a506a;
  --accent:#91d8fa;
  --focus:#bbe8fc;
  --wash:#152b41;
  --loss:#ffc394;
  --loss-wash:#372b29;
  --heat-loss:#f37c87;
  --heat-gain:#6aa7f3;
  --heat-zero:#25364c;
  --plot-grid:#2d4058;
  --plot-axis:#637d9c;
  --plot-shade:#34282e;
  --radius:10px;
  --serif:Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"SFMono-Regular",Consolas,monospace;
}
* {box-sizing:border-box}
body {margin:0;min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(ellipse 780px 480px at 81% -230px,#203855,transparent 100%),var(--paper);color:var(--ink);font:14px/1.5 var(--sans)}
main {flex:1}
a {color:var(--accent);text-underline-offset:.22em}
button,select,input {font:inherit;color:inherit}
button,a,select,input {touch-action:manipulation}
button,summary {cursor:pointer}
button:disabled {cursor:default;opacity:.45}
:focus-visible {outline:2px solid var(--focus);outline-offset:3px}
.shell {max-width:1280px;width:calc(100% - 88px);margin:0 auto}
.skip-link {position:absolute;left:-999px;background:var(--surface);padding:12px;z-index:30}
.skip-link:focus {left:12px;top:12px}
.visually-hidden {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.header {background:#0e1929;border-bottom:1px solid var(--line)}
.header-inner {display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:60px}
.brand {display:inline-flex;align-items:center;gap:10px;flex-shrink:0;text-decoration:none;color:var(--ink)}
.brand img {width:34px;height:34px}
.brand strong {display:block;font-size:17px;font-weight:670;letter-spacing:-.02em;line-height:1.1}
.brand small {display:block;font-size:9px;font-weight:700;letter-spacing:.19em;margin-top:4px;color:var(--muted)}
.beta-tag {background:var(--wash);border:1px solid var(--line-strong);border-radius:4px;color:var(--accent);font-size:9px;font-weight:700;letter-spacing:.08em;line-height:1.2;padding:3px 5px;text-transform:uppercase}
.header nav {display:flex;align-items:center;gap:20px;overflow-x:auto;scrollbar-width:none}
.header nav a {white-space:nowrap;text-decoration:none;color:var(--muted);font-size:13px;font-weight:570;padding:19px 0 17px;border-bottom:2px solid transparent}
.header nav a:hover {color:var(--accent)}
.header nav a[aria-current="page"] {color:var(--accent);border-color:var(--accent);font-weight:700}
.header :focus-visible {outline-offset:-2px}
.loading {padding:70px 0;color:var(--muted)}
.muted {color:var(--muted)}
.mono {font-family:var(--mono);font-variant-numeric:tabular-nums}
.small {font-size:12.5px}
.number {text-align:right;font-variant-numeric:tabular-nums}
.bad {color:var(--loss)}
.good {color:var(--accent)}
.caption {font-size:12px;color:var(--muted);line-height:1.5;margin:9px 0 0}
.eyebrow,.figure-ref {display:block;color:var(--accent);font-size:10.5px;font-weight:730;letter-spacing:.115em;text-transform:uppercase}
.figure-ref {color:var(--muted)}
h1,h2,h3,p {margin-top:0}
h1 {font:400 clamp(44px,5.3vw,76px)/1.025 var(--serif);letter-spacing:-.052em;margin-bottom:18px}
h2 {font:400 28px/1.14 var(--serif);letter-spacing:-.033em;margin-bottom:9px}
h3 {font:680 14px/1.35 var(--sans);margin-bottom:7px}
p:last-child {margin-bottom:0}
.home-lead {display:grid;grid-template-columns:minmax(0,.91fr) minmax(0,1.09fr);align-items:center;gap:clamp(24px,5vw,82px);padding:50px 0 28px}
.hero-copy .eyebrow {margin-bottom:17px}
.hero-copy p {font-size:16px;color:var(--muted);max-width:42ch;margin-bottom:23px}
.buttons {display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.btn {display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:7px 13px;border:1px solid var(--line-strong);background:var(--surface);border-radius:var(--radius);color:var(--accent);font-weight:650;font-size:12.5px;text-decoration:none;white-space:nowrap}
.btn:hover:not(:disabled) {background:var(--wash);border-color:#5e7c9e}
.btn.primary {background:var(--accent);color:var(--paper);border-color:var(--accent)}
.btn.primary:hover {background:#bae8fe;border-color:#bae8fe}
.btn.smallbtn {min-height:32px;padding:5px 9px;font-size:11.5px}
.arrow {font-size:1.1em;line-height:1}
.result-frame {min-width:0;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);margin:0;padding:19px 20px 17px}
.result-frame .figure-ref {margin-bottom:4px}
.result-frame .panel-header {margin-bottom:4px}
.result-frame .caption {border-top:1px solid var(--line);padding-top:9px}
.scope-strip {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid var(--line-strong);padding:12px 0;margin-bottom:33px}
.scope-strip > span {display:flex;align-items:baseline;gap:9px;padding:2px 19px;border-right:1px solid var(--line);color:var(--muted);font-size:12px}
.scope-strip > span:first-child {padding-left:0}
.scope-strip > span:last-child {border-right:0}
.scope-strip strong {color:var(--accent);font:400 31px/1 var(--serif);letter-spacing:-.035em}
.question-section {padding-bottom:34px}
.question-section > h2 {margin-bottom:15px}
.question-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--line);background:var(--surface)}
.question {display:flex;flex-direction:column;align-items:start;padding:18px 21px 20px}
.question:nth-child(odd) {border-right:1px solid var(--line)}
.question:nth-child(n+3) {border-top:1px solid var(--line)}
.question h3 {font:400 23px/1.19 var(--serif);letter-spacing:-.024em;margin:6px 0 7px}
.question p {color:var(--muted);margin-bottom:10px;max-width:51ch}
.question a {font-size:12px;font-weight:690;margin-top:auto}
.glossary dl {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin:11px 0 14px}
.glossary dl > div {padding:12px 14px;background:var(--surface)}
.glossary dt {font-weight:680;margin-bottom:3px}
.glossary dd {margin:0;color:var(--muted);font-size:12.5px}
.page {padding:34px 0 36px}
.page-title {margin-bottom:22px}
.page-title .eyebrow {margin-bottom:8px}
.page-title h1 {font-size:clamp(37px,4.6vw,60px);margin-bottom:8px}
.page-title p {color:var(--muted);font-size:15px;max-width:74ch;margin:0}
.read-view {display:flex;gap:8px 14px;align-items:baseline;padding:9px 13px;margin:0 0 13px;border-left:2px solid var(--accent);background:var(--wash);color:var(--muted);font-size:12.5px}
.read-view strong {color:var(--accent);white-space:nowrap}
.read-view p {margin:0;max-width:92ch}
.panel {min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:19px}
.panel-header {display:flex;justify-content:space-between;align-items:start;gap:9px 14px;flex-wrap:wrap;margin-bottom:13px}
.panel-header h2,.panel-header h3 {margin-bottom:2px}
.panel-header .caption {margin-top:3px}
.two-col {display:grid;grid-template-columns:minmax(0,1.64fr) minmax(0,1fr);gap:16px;align-items:start}
.selected-panel,.dna-detail {border-top:2px solid #507ba4;background:#142135}
.selected-id {font-size:24px;margin-top:5px;overflow-wrap:anywhere}
.section-gap {margin-top:20px}
.subsection {margin-top:16px}
.badge {display:inline-flex;align-items:center;padding:3px 7px;border-radius:3px;background:var(--wash);color:var(--accent);font-size:10.5px;font-weight:700;white-space:nowrap}
.badge.muted-badge {background:var(--layer);color:var(--muted)}
.legend-dot {display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--swatch,var(--accent));flex:none}
.legend {display:flex;gap:6px 14px;flex-wrap:wrap;color:var(--muted);font-size:11.5px}
.legend span {display:inline-flex;gap:6px;align-items:center}
.analysis-toolbar {display:flex;flex-wrap:wrap;align-items:end;gap:10px 16px;margin-bottom:16px;padding:12px 0;border-block:1px solid var(--line-strong)}
.analysis-toolbar .push {margin-left:auto;align-self:end}
.analysis-toolbar .push .btn {min-height:36px}
.field {display:grid;gap:4px;min-width:0}
.field > span,.preset-row > span {font-size:11.5px;color:var(--muted);font-weight:680}
select,input[type="search"] {border:1px solid var(--line-strong);border-radius:var(--radius);min-height:36px;background:var(--surface);padding:6px 9px;font-size:12.5px;min-width:0;max-width:100%}
input[type="search"]::placeholder {color:#9bacbf}
.case-select select {min-width:192px}
.seg {display:inline-flex;align-items:center;flex-wrap:wrap;gap:2px;border:1px solid var(--line-strong);padding:2px;border-radius:var(--radius);background:#101a2a}
.seg button {border:1px solid transparent;background:transparent;border-radius:3px;min-height:29px;padding:4px 9px;font-weight:620;font-size:12px;color:var(--muted);white-space:nowrap}
.seg button[aria-pressed="true"] {border-color:var(--line-strong);background:var(--raised);color:var(--accent)}
.seg button:hover {color:var(--accent);background:var(--raised)}
.view-seg {gap:12px;border:0;border-radius:0;padding:0;background:none}
.view-seg :is(button,a) {border:0;border-bottom:2px solid transparent;border-radius:0;padding:5px 1px 6px}
.view-seg a {display:inline-flex;align-items:center;color:var(--muted);font-weight:620;text-decoration:none;white-space:nowrap}
.view-seg button[aria-pressed="true"] {border-color:var(--accent);background:none}
.view-seg :is(button,a):hover {color:var(--accent);background:none;text-decoration:underline;text-underline-offset:.25em}
.variant-page {padding-top:19px}
.variant-intro {display:grid;grid-template-columns:minmax(0,1.34fr) minmax(300px,1fr);align-items:center;gap:12px 24px;margin-bottom:12px}
.variant-heading .page-title {margin:0}
.variant-heading h1 {font:650 clamp(37px,4.2vw,54px)/1.02 var(--sans);letter-spacing:-.045em}
.variant-heading .page-title p {font-size:14px;max-width:56ch}
.variant-scope {display:flex;gap:5px 15px;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:12px;margin-top:9px}
.variant-scope strong {font-weight:680;color:var(--ink);font-variant-numeric:tabular-nums}
.variant-scope a {font-weight:680}
.structure-preview {display:grid;grid-template-columns:minmax(125px,.83fr) minmax(0,1.17fr);align-items:center;min-width:0;position:relative;isolation:isolate;margin:0;overflow:hidden;border:1px solid var(--line-strong);border-radius:var(--radius);background:linear-gradient(120deg,#142238,#0f1c2e);box-shadow:0 12px 27px #03091455}
.structure-preview figcaption {padding:12px 0 12px 15px;z-index:1}
.structure-preview h2 {font:650 19px/1.2 var(--sans);letter-spacing:-.03em;margin:4px 0 7px}
.structure-preview .figure-ref {font-size:9.5px}
.structure-preview .legend {gap:3px 9px}
.structure-preview a {display:inline-block;margin-top:8px;font-size:11.5px;font-weight:650}
.structure-preview .viewer {background:radial-gradient(ellipse at 52% 46%,#3c698467,transparent 72%),repeating-linear-gradient(90deg,#92c2e00c 0 1px,transparent 1px 21px),repeating-linear-gradient(0deg,#92c2e00c 0 1px,transparent 1px 21px)}
.structure-preview .viewer canvas {height:143px}
.structure-preview .viewer-label {display:none}
.preview-hint {position:absolute;right:7px;bottom:5px;color:var(--muted);font-size:9px;pointer-events:none}
.variant-navigation {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;margin-bottom:13px;border-bottom:1px solid var(--line-strong)}
.variant-navigation .view-seg {gap:16px}
.variant-navigation .view-seg :is(button,a) {min-height:38px;font-size:13px}
.variant-navigation > .btn {margin-bottom:5px}
.variant-workbench {display:grid;grid-template-columns:minmax(0,1fr) minmax(285px,.37fr);gap:14px;align-items:start}
.variant-chart {padding:13px 15px;box-shadow:0 6px 20px #040b1666}
.map-guide {display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;border-bottom:1px solid var(--line);padding-bottom:7px;margin-bottom:8px;color:var(--muted);font-size:11.5px}
.map-guide strong {color:var(--ink);font-weight:690;margin-right:3px}
.variant-controls {display:flex;align-items:end;flex-wrap:wrap;gap:8px 12px;margin-bottom:10px}
.variant-controls .variant-search {width:min(240px,100%)}
.variant-controls .btn {min-height:36px}
.matrix-measures {display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px 10px}
.matrix-count {font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;margin-left:auto}
.metric-explainer {font-size:11.5px;color:var(--muted);margin:6px 0 0}
.variant-inspector {padding:17px}
.variant-inspector .variant-name {font:650 39px/1.06 var(--sans);letter-spacing:-.04em;margin:7px 0 3px}
.variant-context {display:inline-block;margin-top:3px}
.variant-inspector .score-table td,.variant-inspector .score-table th {padding-inline:6px}
.variant-inspector .score-table td:first-child {padding-left:8px}
.change-card {--tone:var(--heat-gain);border:1px solid var(--line-strong);border-radius:7px;background:linear-gradient(123deg,color-mix(in srgb,var(--tone) 7%,var(--surface)),var(--surface));padding:9px 10px 4px}
.change-card.loss {--tone:var(--heat-loss)}
.change-card.neutral {--tone:var(--muted)}
.change-title {display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 8px;margin-bottom:7px}
.change-title > span {font-size:11px;font-weight:680;color:var(--muted)}
.change-title > strong {color:var(--tone);font-size:14px;letter-spacing:-.015em}
.change-values {display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 8px;color:var(--muted);font-size:11px}
.change-values span {display:flex;align-items:center;gap:5px}
.change-values strong {color:var(--ink);font-variant-numeric:tabular-nums}
.change-values .legend-dot {width:6px;height:6px}
.change-card .plot {margin-top:3px}
.delta-link {stroke-linecap:round}
@media(prefers-reduced-motion:no-preference) {
  .delta-link {stroke-dasharray:1;animation:draw-delta .32s ease-out}
  @keyframes draw-delta {from {stroke-dashoffset:1} to {stroke-dashoffset:0}}
}
.variant-jumps {display:flex;gap:5px 8px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:13px;padding-top:9px}
.variant-jumps > span {color:var(--muted);font-size:11.5px;font-weight:650}
.preset-row {display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin:-3px 0 14px}
.filter-note {color:var(--muted);font-size:12px;margin:-5px 0 14px}
.rank-controls,.table-tools {display:flex;align-items:end;flex-wrap:wrap;gap:10px;margin:10px 0}
.rank-controls .field {display:flex;align-items:center;gap:8px}
.rank-table,.scroll-table,.table-overflow {overflow:auto;max-width:100%}
.rank-table,.scroll-table {border:1px solid var(--line);border-radius:var(--radius)}
.scroll-table {max-height:267px}
.rank-table table {min-width:348px}
.scroll-table table {min-width:340px}
.table-overflow table {min-width:360px}
.data-table {border-collapse:collapse;width:100%;font-size:12px;font-variant-numeric:tabular-nums}
.data-table th,.data-table td {text-align:left;padding:7px 9px;border-bottom:1px solid var(--line)}
.data-table th {color:var(--muted);font-size:11px;background:var(--layer);font-weight:690}
.scroll-table th {position:sticky;top:0;z-index:1}
.data-table tr:last-child td {border-bottom:0}
.data-table tbody tr.active {background:var(--wash)}
.data-table tbody tr:has(.row-link):hover {background:var(--raised)}
.data-table .number {text-align:right}
.rank-table th:nth-child(2),.rank-table th:nth-child(3),.score-table th:not(:first-child),.score-table td:not(:first-child) {text-align:right}
.score-table td {padding-block:8px}
.score-table td:last-child {font-weight:650}
.row-link {color:var(--accent);font:700 11.5px var(--mono);border:0;background:none;padding:4px 0;text-decoration:underline;text-decoration-color:#647f9d;text-underline-offset:.22em;white-space:nowrap}
.row-link:hover {text-decoration-color:currentColor}
.direction {color:var(--muted);font-size:11px;white-space:nowrap}
.direction.adverse,.direction.favourable {display:inline-flex;align-items:center;gap:5px}
.direction.adverse {color:var(--loss)}
.direction.favourable {color:var(--accent)}
.direction.adverse::before,.direction.favourable::before {content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.site-caption {margin-bottom:10px}
.site-count {display:flex;justify-content:flex-end;align-items:center;gap:8px;white-space:nowrap;color:var(--loss)}
.count-track {display:block;flex:0 1 78px;height:5px;background:var(--loss-wash)}
.count-track > span {display:block;height:100%;background:#e59a63}
.pagination {display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--muted);font-size:11.5px;margin-top:10px}
.variant-name {font:400 43px/1.04 var(--serif);margin:0 0 4px;letter-spacing:-.042em}
.variant-name + .caption {margin:0 0 13px}
.position-note {display:flex;align-items:center;gap:10px;border-block:1px solid var(--line);padding:9px 0;margin:12px 0;color:var(--muted);font-size:11.5px}
.position-note strong {font:400 24px/1 var(--serif);letter-spacing:-.025em;white-space:nowrap;color:var(--accent)}
.stat-line {display:flex;flex-wrap:wrap;gap:7px 19px;padding:8px 11px;background:var(--wash);border:1px solid var(--line);border-radius:3px;font-size:12px;color:var(--muted);margin-bottom:5px}
.stat-line strong {color:var(--accent);font-size:17px;font-variant-numeric:tabular-nums;margin-right:3px}
.reference-row {display:flex;justify-content:space-between;gap:8px;padding:7px 9px;margin-bottom:9px;background:var(--wash);color:var(--muted);font-size:12px}
.reference-row strong {color:var(--ink);font-variant-numeric:tabular-nums}
.disclosure {border-top:1px solid var(--line);padding-top:9px;margin-top:12px;color:var(--muted);font-size:12px}
.disclosure summary {color:var(--accent);font-weight:680;margin-bottom:5px}
.disclosure[open] summary {margin-bottom:9px}
.disclosure .panel {padding:10px 11px}
.reference-note {display:flex;align-items:baseline;gap:9px 16px;padding:12px 0;margin-top:16px;border-top:1px solid var(--line-strong);font-size:12.5px}
.reference-note strong {white-space:nowrap}
.reference-note p {color:var(--muted);margin:0}
.mutant-window {border-top:1px solid var(--line);padding:7px 0;display:grid;grid-template-columns:63px minmax(0,1fr);gap:7px;font-size:12px}
.mutant-window .mono {font-size:13px;letter-spacing:.06em}
.mutant-window .badge {margin-left:3px}
.mutant-window .caption {margin-top:3px}
.metrics {display:grid;margin:8px 0}
.metric {display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:6px 0;border-bottom:1px solid var(--line);font-size:12px}
.metric:last-child {border-bottom:0}
.metric strong {font-size:16px;white-space:nowrap;font-variant-numeric:tabular-nums}
.plot {width:100%;display:block;overflow:visible}
.plot text {font-family:var(--sans)}
.plot .tick {fill:var(--muted);font-size:12px}
.plot .row-label {fill:var(--ink);font-size:13px;font-weight:650}
.plot .axis-label {fill:var(--muted);font-size:12px}
.plot .data-point {cursor:pointer}
.plot .data-point:hover {stroke:var(--ink);stroke-width:2}
.heat-note {background:var(--layer);border-left:2px solid var(--heat-loss);color:var(--muted);font-size:11.5px;margin:7px 0 0;padding:6px 9px}
.matrix-key {display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:5px 16px;padding:10px 0 8px}
.heat-legend {display:flex;align-items:start;gap:8px;color:var(--muted);font-size:11px;line-height:1.3}
.heat-legend span {display:grid;gap:2px}
.heat-legend strong {font-weight:650;color:var(--ink)}
.heat-loss,.heat-legend .heat-loss strong {color:var(--heat-loss)}
.heat-gain,.heat-legend .heat-gain strong {color:var(--heat-gain)}
.heat-legend small {font-size:10px;font-variant-numeric:tabular-nums}
.heat-legend span:last-child {text-align:right}
.ramp {width:clamp(74px,11vw,148px);height:8px;margin-top:3px;position:relative;border-radius:2px;background:linear-gradient(90deg,var(--ramp-start),var(--heat-zero),var(--ramp-end))}
.ramp small {position:absolute;top:10px;left:50%;transform:translateX(-50%)}
.heat-readout {padding:5px 8px;border:1px solid var(--line);border-radius:4px;background:#0d1829;color:var(--ink);font:600 11.5px/1.3 var(--mono);font-variant-numeric:tabular-nums}
.heat-wrap {max-height:clamp(286px,50vh,530px);overflow:auto;border:1px solid var(--line-strong);border-radius:5px;background:#0e1929;scrollbar-color:#526e8c #101a2a;scrollbar-width:thin}
.heat {width:100%;min-width:606px;table-layout:fixed;border-collapse:separate;border-spacing:0;font-size:11px}
.heat td,.heat th {text-align:center;padding:0}
.heat td {padding:1px}
.heat thead th {position:sticky;top:0;background:var(--layer);z-index:2;padding:6px 2px;border-bottom:1px solid var(--line-strong);font-weight:690}
.heat thead th:first-child {left:0;z-index:3;width:51px;text-align:left;padding-left:8px;border-right:1px solid var(--line)}
.heat thead th.active-alt {color:var(--accent);background:var(--raised);box-shadow:inset 0 -2px var(--accent)}
.heat tbody th {position:sticky;left:0;background:#142135;z-index:1;text-align:left;padding:0 8px;font:650 11px var(--mono);border-right:1px solid var(--line)}
.heat .active-site th {background:var(--raised);color:var(--accent);box-shadow:inset 2px 0 var(--accent)}
.heat .cell {width:100%;height:25px;border:0;display:block;background:var(--heat-zero);background:var(--cell);padding:0;border-radius:2px}
.heat .cell.dimmed {opacity:.24}
.heat .cell:hover,.heat .cell:focus-visible {opacity:1;outline:2px solid var(--ink);outline-offset:-2px}
.heat .cell[aria-pressed="true"] {opacity:1;outline:2px solid var(--ink);outline-offset:-1px;box-shadow:inset 0 0 0 2px #0b1423,0 0 8px #b4dfff64}
.heat .refcell,.wt-key {background:repeating-linear-gradient(135deg,#25364c 0 4px,#3c506a 4px 5px);color:#a9bad0;border-radius:2px}
.heat .refcell {display:block;height:25px;line-height:25px}
.matrix-caption {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:3px 9px;margin-top:7px;color:var(--muted);font-size:11px}
.matrix-caption > span:first-child {display:inline-flex;align-items:center;gap:5px}
.inspector-jump {display:none}
.wt-key {display:inline-grid;place-items:center;width:15px;height:15px;font-style:normal}
.sequence {display:flex;flex-wrap:wrap;gap:2px;align-items:center;margin:6px 0 10px}
.base {display:inline-grid;place-items:center;min-width:16px;height:21px;border-radius:2px;font:700 10.5px var(--mono);background:var(--layer);color:#bdd2e7}
.base.occurrence {box-shadow:inset 0 -2px #f0b875}
.base.contact {background:#285076;color:#e5f4ff}
.base.contact.occurrence {box-shadow:inset 0 -2px #ffd095}
.sequence-title {display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:11px}
.sequence-title strong {color:var(--ink)}
.bars {display:grid;gap:10px;margin:8px 0 12px}
.bar-track {display:flex;height:11px;background:var(--layer);border-radius:2px;overflow:hidden}
.bar-segment {height:100%;background:var(--swatch)}
.bar-caption {display:flex;justify-content:space-between;gap:8px;margin-bottom:4px;font-size:12px;color:var(--muted)}
.assembly-choice {display:flex;gap:4px;flex-wrap:wrap}
.assembly-choice button {width:31px;height:31px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);color:var(--accent);font-weight:670;font-size:12px}
.assembly-choice button[aria-pressed=true] {background:var(--accent);color:var(--paper);border-color:var(--accent)}
.reading-grid {display:grid;grid-template-columns:repeat(21,minmax(14px,1fr));gap:2px;min-width:335px;margin:6px 0 9px}
.reading-cell {text-align:center;border-radius:2px;background:var(--cell);padding:4px 0;font:700 10.5px var(--mono);color:var(--ink)}
.reading-scroll {overflow:auto}
.molecule-panel {padding:0;overflow:hidden;background:#101e31}
.molecule-top {display:flex;justify-content:space-between;align-items:center;gap:7px 12px;flex-wrap:wrap;padding:11px 16px 0}
.molecule-top:first-child {padding-top:15px}
.molecule-top strong {font-size:15px}
.viewer {position:relative;overflow:hidden;background:radial-gradient(ellipse at 51% 40%,#233953,#0b1423)}
.viewer.cartoon-view {background:radial-gradient(ellipse at 50% 41%,#28445d,#0a1424 78%)}
.viewer canvas {display:block;width:100%;height:335px;cursor:grab;touch-action:none}
.viewer canvas:active {cursor:grabbing}
.viewer canvas:focus-visible {outline-offset:-3px}
.viewer-group {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:10px}
.viewer-group .viewer {border:1px solid var(--line);border-radius:var(--radius)}
.viewer-group canvas {height:235px}
.viewer-label {position:absolute;top:8px;left:9px;background:#0d192bed;border:1px solid var(--line);border-radius:3px;padding:3px 6px;pointer-events:none;font-size:11px;font-weight:680}
.viewer-hint {color:var(--muted);font-size:11px}
.viewer-tools {display:flex;gap:5px;align-items:center}
.viewer-tools button {background:var(--surface);border:1px solid var(--line-strong);border-radius:3px;font-size:14px;min-width:29px;height:28px}
.viewer-tools button:hover {background:var(--raised)}
.molecule-foot {display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 16px}
.structure-note {padding:0 16px 13px;font-size:12px;color:var(--muted)}
.methods-grid {display:grid;grid-template-columns:1fr 1fr;gap:12px}
.methods-grid h2 {font-size:23px}
.methods-grid p,.methods-grid li {color:var(--muted);font-size:13px}
.about-authors {display:grid;grid-template-columns:minmax(0,1fr);gap:12px;max-width:740px}
.about-authors h3 {font-size:17px}
.about-authors h3 span {color:var(--muted);font-weight:500}
.about-authors p {max-width:58ch;color:var(--muted);font-size:13px}
.download-list {display:grid;gap:3px;margin-top:8px}
.download-row {display:flex;justify-content:space-between;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.download-row:last-child {border-bottom:0}
.download-row > div {min-width:0;overflow-wrap:anywhere}
.footer {border-top:1px solid var(--line-strong);color:var(--muted);font-size:11.5px}
.footer-inner {display:flex;justify-content:space-between;gap:9px;align-items:center;padding:15px 0}
.footer a {text-decoration:none;font-weight:650}
.empty {padding:22px 12px;color:var(--muted);text-align:center;font-size:12.5px}
@media(max-width:1080px) {
  .shell {width:calc(100% - 52px)}
  .header nav {gap:14px}
  .header nav a {font-size:12px}
  .panel {padding:15px}
  .molecule-panel {padding:0}
  .result-frame {padding:14px}
}
@media(max-width:950px) {
  .header-inner {align-items:start;flex-direction:column;gap:5px;padding:10px 0 0}
  .header nav {width:100%;flex-wrap:wrap;gap:0 16px}
  .header nav a {padding:7px 0 9px}
  .variant-workbench {grid-template-columns:1fr}
  .variant-inspector {width:100%}
  .inspector-jump {display:inline-flex}
}
@media(max-width:830px) {
  .shell {width:calc(100% - 36px)}
  .home-lead {gap:22px;padding-top:34px}
  .home-lead h1 {font-size:clamp(38px,6.6vw,58px)}
  .hero-copy p {font-size:14px}
  .two-col {grid-template-columns:1fr}
  .page {padding-top:25px}
  .viewer canvas {height:290px}
  .viewer-group canvas {height:185px}
  .glossary dl {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:590px) {
  .shell {width:calc(100% - 26px)}
  .header nav {flex-wrap:wrap;gap:0 12px}
  .header nav a {padding:6px 0}
  .home-lead,.question-grid,.methods-grid {grid-template-columns:1fr}
  .home-lead {padding:25px 0 17px;gap:16px}
  .home-lead h1 {max-width:11ch;font-size:clamp(40px,10.2vw,55px);margin-bottom:11px}
  .hero-copy .eyebrow {margin-bottom:10px}
  .hero-copy p {margin-bottom:15px}
  .scope-strip {margin-bottom:24px}
  .scope-strip > span {display:block;font-size:10.5px;padding-inline:9px}
  .scope-strip strong {display:block;font-size:26px;margin-bottom:3px}
  .question {padding:14px}
  .question:nth-child(odd) {border-right:0}
  .question + .question {border-top:1px solid var(--line)}
  .question h3 {font-size:21px}
  .page-title p {font-size:14px}
  .panel {padding:12px}
  .molecule-panel {padding:0}
  .molecule-top,.molecule-foot {padding-inline:11px}
  .analysis-toolbar {gap:8px 10px}
  .analysis-toolbar .push {margin-left:0}
  .seg button {padding-inline:6px;font-size:11.5px}
  .view-seg {gap:9px}
  .view-seg :is(button,a) {padding-inline:0}
  .variant-intro {grid-template-columns:1fr;gap:10px}
  .variant-heading .page-title p {font-size:13px}
  .structure-preview .viewer canvas {height:110px}
  .structure-preview h2 {font-size:17px}
  .structure-preview figcaption {padding-block:8px}
  .variant-navigation .view-seg {gap:8px 12px}
  .variant-navigation .view-seg :is(button,a) {font-size:12px;min-height:30px}
  .variant-controls {gap:7px 10px}
  .variant-controls .variant-search {width:auto;flex:1 1 122px}
  .variant-controls .field:not(.variant-search) {flex:1 1 132px}
  .heat .cell,.heat .refcell {height:28px}
  .heat .refcell {line-height:28px}
  .matrix-caption {justify-content:flex-start}
  .read-view {flex-direction:column;align-items:start;gap:3px}
  .glossary dl {grid-template-columns:1fr}
  .plot .tick,.plot .axis-label {font-size:17px}
  .plot .row-label {font-size:16px}
  .viewer-group {grid-template-columns:1fr}
  .viewer-group canvas {height:205px}
  .reference-note,.footer-inner {flex-direction:column;align-items:start}
}