.page{display:block}
header{padding:14px 22px 9px;align-items:center}h1{font-size:clamp(23px,3vw,35px)}
.compare-toolbar{position:relative;margin-bottom:12px}
.pick-row .tree-pick{flex:1 1 220px;min-width:0;max-width:520px}.pick-row .tree-pick summary{width:100%}#swap{padding:7px 12px;font-size:15px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 22px}
.side{min-width:0;border:1px solid var(--line);border-radius:13px;background:rgba(11,18,15,.6);padding:12px 14px 14px}
.side .art{position:relative;width:min(100%,56vh,520px);aspect-ratio:1/1;margin:0 auto;border-radius:10px;background:radial-gradient(circle,rgba(38,49,39,.28),rgba(4,9,7,.25) 68%);overflow:hidden}
.side canvas{display:block;width:100%;height:100%;cursor:crosshair}.side canvas:focus-visible{outline:2px solid var(--accent);outline-offset:-4px;border-radius:10px}
.side-chart{position:relative;height:150px;margin-top:10px;border:1px solid var(--line);border-radius:10px;background:rgba(11,18,15,.6);padding:6px 10px 24px}.side-chart canvas{display:block;width:100%;height:100%;cursor:crosshair}.side-chart[hidden]{display:none}.chart-note{position:absolute;left:12px;right:12px;bottom:7px;color:#6f7a6f;font:10px ui-monospace,Menlo,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side h2{margin:12px 0 2px;font:500 20px Georgia,serif}.side h2 a{color:inherit;text-decoration:none}.side h2 a:hover{color:var(--accent-ink)}
.classline{font:11px ui-monospace,Menlo,monospace;text-transform:uppercase}
.readout{min-height:34px;margin-top:10px;padding:7px 10px;border:1px solid rgba(111,191,138,.22);border-radius:7px;background:rgba(5,10,8,.7);color:#d9d1c0;font:11px/1.4 ui-monospace,Menlo,monospace}
.readout b{color:var(--accent-ink);font-weight:500}.readout .dim{color:#6f7a6f}
.timeline-block,.facts-block{margin:16px 22px 0}
.timeline-block h3,.facts-block h3{margin:0 0 8px;font:500 15px Georgia,serif;color:#d8d0bf}
.timeline-block .hint{margin-left:8px;color:#8f897d;font:11px ui-sans-serif,system-ui,sans-serif}
.timeline-wrap{border:1px solid var(--line);border-radius:10px;background:rgba(11,18,15,.6);padding:6px 10px}
#timeline{display:block;width:100%;height:150px}
.facts{width:100%;border-collapse:collapse;font-size:13px}
.facts th,.facts td{padding:8px 10px;border-top:1px solid var(--line);text-align:right}
.facts th:first-child,.facts td:first-child{text-align:left;color:#9e988b;font-weight:400}
.facts thead th{color:#d8d0bf;font:500 14px Georgia,serif;border-top:0}
.facts td{color:#eee9dd;font-family:ui-monospace,Menlo,monospace}.facts td.better{color:var(--accent)}
@media(max-width:800px){.pair{grid-template-columns:1fr;margin:0 10px}.timeline-block,.facts-block{margin-inline:10px}.pick-row .tree-pick{flex-basis:100%;max-width:100%}}