/* ROMbug Bio Anatomy Explorer
   ROMbug Bio brand: black chassis, blue #004afb leads, "Bio" in red (#ff4a28 on dark, #f52d0a on light).
   Space Grotesk for type, JetBrains Mono for figures. Flat colors, no gradients. */

:root {
  --blue: #004afb;
  --blue-deep: #0038c0;
  --blue-wash: #eef3ff;
  --green: #2fb300;
  --yellow: #ffb400;
  --red: #f52d0a;
  --red-lit: #ff4a28;
  --night-line: rgba(255, 255, 255, .16);
  --night-hover: #0a1a4a;
  --night-track: #1b2438;
  --black: #000000;
  --white: #ffffff;
  --ink-2: #3b4150;
  --line: #e3e7ef;
  --track: #edf0f5;

  --font: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --fs-xs: .78rem;
  --fs-sm: .875rem;
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.75rem;
  --fs-xxl: 2.75rem;

  --rail-w: 340px;
  --top-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
button { font: inherit; color: inherit; }
a { color: var(--blue); text-underline-offset: .18em; }
a:hover { color: var(--blue-deep); }
img { display: block; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--blue); color: var(--white); padding: 10px 14px; border-radius: 8px; font-weight: 700;
}
.skip:focus { top: 12px; color: var(--white); }

/* ---------- Header ---------- */
.top {
  height: var(--top-h);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 0 28px;
  background: var(--black); color: var(--white);
  border-bottom: 4px solid var(--blue);
  position: relative; z-index: 5;
}
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--white); min-width: 0; }
.brand:hover { color: var(--white); }
/* ROMbug R mark, keyed from the corporate icon for use on black */
.r-mark {
  display: inline-block; flex: 0 0 auto; height: 40px; aspect-ratio: 209 / 140;
  background: url("data:image/webp;base64,UklGRtgtAABXRUJQVlA4TMwtAAAvmsAZEAGIkeSGbfw8iAZIqv+CCcJMKojo/wSoyFq6aXnp2UfvY4ws/iSXxuhIkrW9QKJDChCXngvdqYAujt6hd2+Vy2bg/yIM761CjZNax6lRcAqTBiXgSULjQWf2b6MESFIbVALcHRpJZEhSYPGcIpw9kjqYedg2ZgQZNzCL6BIS+cNvAWARowkkJWxoVUjM3UW39sv7vlpa70NuFv4Fo9hAes8FB1FuvFXOZjZnbc4511raqUjSeOGTqX7SHprzo37lx6W9m/3VB7Z+a53MwNu9qpn2mQwgRpLkSMn/R8tBa43/NmEBgQV6d3bucEBN20iS+eNbGO9ddbrKbSPZbjM/o/cu/GAF7L8agrGRIuFHQv8nAMkDUBmgcI2SRypGg0ZpMFAfYJ7HIPkILlnjDWCNmupgLnPn7exQdUyn9IPEJaegS0lsBKlkEGDKT4AlSwIAQYAsxdi/DIaI4CJjJ+NLxk2RCNDm7NHQAGR/6ZhImJKdjUhiIiOREUHGbwoOJjY6uj+go8OgIAF0PTImMjo6MhIdHR0d0ntAkjzIE1BrAYCVmtANwAYz8P+vDfP8BJPSJPBOGQGDpzRuaZiBQSNJYXbXv2vgoVUQERPA2K5V7u2pXvmovOr5hR94UenA0idPddPEN+lGD2pDT3DgmE0ZuqODTT2lrXK+skrtxqaCzWU4cXEkH04UoFe4EzkLDXFNdwJ06EicZ1tpOsBSoCeMFIijTBgHBLr7MBB/AGrpZ9qqX6FLP7Mz7b8qyc3/nHsbFsQamZmZ7YiZHY0ijIwxRjNrDili55rUITMzM8OCeLbp3nNOsD3bt+/05r8v0MaYQbBVY+ZImRWa2TNrhlulUNWmSFWnzLQiM2wqisbMTJmrTek1ZKqpmlgQmbomNcMqMjOzYDc1ZWKl8wVcdSPz2pGrppSatsTMqUJjihnOFxDFlLNtUiQ5b0RW9zKjdGKwQSc5oZNMYXRGVsgBecDMWt7u6aqMkFDbtqpl89zvGQ4BtAU1SAR9vhBEIcEvn9u971C7bduUJO197otI27Zdtm3bNvqb+RNs27bLtm1XJSOzMuLeMwF25f9XJVv5/dfePXINd3d3uO4e4v4ERITO4PIkdu0BcA/dSd1hpLu3rPXHnfwfUzURmp06+a09PMAuspNDTNGQ76obUv0EKztFZHMstXjmIOFJTz48wF1FPlUTnyLTne0Qa4hcIs14B0KGnH6EnSGpdjYpejS9fmMyYjLvHM+oclzb1nNsOTPMjLREO99SmKUCSw2mmdGf/49ybTuOJOcBiIzsGmotPaARtGL8oAcsf7iiIeMAtdy17snuzKgAPgXatk292d7nRm+kwchX27Zt27b127Zts7Zt221Q24393r1nAvDI/+dKtpSThWYHahdsgFWwCixWwNJmNYgdjLididzDbwMdF61VoTlGjrgO4o/mucSo5ybCTYSbKLdiVFsveoyDpo3jjuhCy0aOsiC6jTb5beAuYAqtoZxEyz+aEeWhn8WI5yKue2/Acw/CnYjcAMp70U55iI6Ocp6bxqg20Vo+C/GiXEQhbARt28bd+TP+VoqNJDmSJIuoBU5/ZcmTzoAcSZIkxWMP43sphQiIjxK8lulMgnCxgoTiUDYVwjRMs2oEw3CNu7ieg1llXY2CdUa4YBoxUlvkfEbeLBoXnK5xjHIOGmUBwxCQHJzL6NKmUcbNIqBRFtjQkFWGwbk5y4oRDhOsOhz5XBC3O/ZrWxqQ57k8UvyiMZJPze8AmQAEkBtBreTISh9EpT+xEXeP789T107AAxxDhGAiCIIgsAUDRAIEIgkyAYxkigRBACQIgDGCJJP4QAgE5n2mixUcALY/zof7gUI5v7Pc0FlzRDC8Kgfy8tJKMRA3h0AkogXHa1iIM3DC2tZOlsG1ZSsRaxpjxNlq6F+DeSqejazMVhzKRFZ5ogiYYMs6KMjSe8NkRxtbIIQ6lgLBLKvxXFZnNVsaWv4HnsioSC4gnEc0Jrk1CpjI3GlgSPG3W1NFcDYjJcQt20iybo3KaCRrJnU5zsKoV1GRG1lqnN5o/RKO0r5zxFkHwTAt+3TSPuvgy8QbjQBlrpxi5qaZQzHTioDYvGTYD9rTPGwdDWrfgAdKrBYNkrVk7d41cttMg7VY84xrdlOLLqdatTiaqrU1HuvUZIX0IdVUk5U2B+uMM98ByzKpagx7jkQamf6gJOvGHfWSDBpnGNlKIzgayEO+d1tKPgDWtmWvyflQH+02tBNceiu3XjWlEFIqlnqnBRqpr8JUk5OGSoRxh0bjJpG1G3fgUgr8UAQc1gQ9hrWVjYis5IBy1jjX1pB8QgkD1nBEdajDkzPAWja2NIBl/mug/NlQnNGSq0hJqdEYulK4IbUoC2sqQ83U2q2363TgDnC2EkZ/zadJgVfkqIgLCseLKsuVDNJ1xABlIwK452v1t/ZSFFVorarwJeQb0DYH8ojHBcxa0qPCoJenXS2p82fW8IjjHl2jYNEjFa1JmaqW0IG+0YZDKTSMqAvUuGRdGsFVzzQwLMaafZ9GSCYliSFMbkssKya0BJTD2rTQgv6KoExyVOI0T7UWa8JBl2oo9ahBreEo6JYJld34aqipkl0H8qjWcQcC0GEd1hm11uocGA3Ms0agIgH0ggyVxv0770Esog8q8BNqz/r0an6JqZqJJGReYkk1jXeGRmvU0QpjVWhXex26JUvJFtVSabSxpVpZzzqOWeHVD+XAkQx11mhJKhG4QdcoBIuK2MuhDEW8RmbDKwNyDE+VoNb8qXMfx8sxkI6tEaPRapo7R40KXeVg0S1Zc+1C10m3CezkxoBpt+pKqEBHJoHB7TuI08qjmiRwYFch5GRN0u8fgTEmAl8djehOzatUBLVkgOSG0Gt5KVex7FKcDHuUS7n6ynXIBb7UUoNWPSuOaS2plhpq36nKrBrRqOA3CDJby4RriqKyFtYirIOOERiNsVB4Ycw3ruFRFL+ssJO6HKklHwBuBmpeI57VIk6iWIMpV6IQpcILQleCMtS0qF1HptoFqta+dl2lhp0wVEuhhlJLPauplv4qqduCPCMyjYVMBSfOy/r+RnMc3laB1IoGqdoXDhmPIWR27do0iLLR0AmcqVRJur9qFGTBUEpH1LqwqDXUWR0sgSUoCjrWrlZSbqzKLnS1oiN6SVkLe5JsZMQBOf1Gyy2mPF9GNOprw7LAxRjLGi7NykxDYO1CDUeQpKkYQaB0WlXRSaOIrspgwVoLu25WpKsMATqrUkNR1Zxk0tHDGiTAYwYyRGwqVfwWRQ09u7vMK3m1oKEE9ldNZs83cEZLY1Yt6mgZOIQtW6VAIxZVAwNEt0GiolaOpCqhC2sWaq3jYbz2RbKCopCKOoXkyVKoRWWJATIMEPAyiEfOapWgA9etXz3OtAmcbo30VfMQCssQaleRpZGtlN0y9LWolmI0HR/1jgZqTbyxo6RObgxUdrUeqUpWIzKlVgCslUSPfSBoXtcxMSmRCEaESPhA/s7xXHcFMp0z2zvXWL4C08npLBPWbEoKRbIsnTTkOtTAda3TSqgWFmelyoA6sG6Z0NWgudRNV7URoIga4XsRlC4P2VNijqUAQAKkNyrW2Y+JM0bRHltiELht/R4wFzE2NBhuMs0O0nX1oHM0qZNUOK6lMI0LD4BCnU7Q1RDGRK2V66qoax13Min0AsZGiVj04FCkn5whp0ZRwD5fHkEPAItI4fpGiBAs13U5xmUL7TU8D97G1TK20LYWWbPFMhZdLqGUbsOOojtdVZ2ucqo6lHzUzWqu3aYvetduU0vVTVl0O901Iya1UVwECHOptXSFic6xhsoelqa+38nw4NAtAqzPw2LKaQsCV+mu72pDQKeYSeM7nQ/KfV+H1dn8ws2BkwjrurpcE4OsOEOdrAhZrhodLKoMO1GgAEBNXSKMXiE5LyIBV6TEkAooyL2Awt6zTO/Jnk4oKWK4MGJMkjVc3QgU+PhrTqxVz9Ao64ogomXrwXQWClPgTAuvGIyUJ4W3w/oUIdA3ZrHRYaX9oYgXTCOGo4oi89ozR41FmzjA9UuJMOAreOAkWVgjVBVYKDCFMJYLhSlhfMcGNLrpDJY8LIwcW5/Cb0S6xBZOs5LZKIfsAUmdSLPIJEMhWXqA9DSicYwSa6YiGweJIGRqlIOMwBLLJREQ2asRy1uyRXFZT9weReMliAUAYQw6QRzqpABozSqoFmIq/fAIF7U1EuciS6chzBqkKXU1GWh8LtAw8iRs+TQePIcPWTRWfJ2RaiwKRZYkoZN7Wp/tKQDLXgOYouIMAdZgilf23Wd1+lxgpmxwVBt4Ds82fm4bCdM+YqDKxVQzoOyIeyRkfXRaY9BR4Nko0EcAjYQaBYlMG07bohp98P3dlNvau+21HF9x6s6C7X8ltII9aKF0hhAAXgxoBP2RSeleiNTuWrYxd3xibJyVK8KrexkemjebxFQSSUrf970Qgr6PcZAIo4XIVk5ZCFyVWwdI7gIBAqmLEwaPnAFvhB9AeKCxKTigRxZHItUi3DSmo7GPJbL+baJUtkKs0JBSZ2foS9cvMVYWHgitKULzCackfKIPBrxBerWqHivvMmIQADqRPHZSo8HHkSRiDaqCGagYeQl/fq9VgJH/YnKyRlRKlpkxAIuTigJC56Qxi3jhWa9z02vHT2l2jKjQCEwTcYUlGFUOEIWM6SxlaXlcX2iYaJGb39S5gqeigUwkLsxcOhWOC3wId02KqWAng1AaS/85UYdkS25m9gMfEJgBaVTAFqW/sSQDLMLl7x4O0zXrIDEB6TARKRlty2ngnbfGsWobI+cPwMnKNYcRtXe7BlQibmjXFYiP6wS0275AIPvI3giMzCE9MCjDgmc+pxJ1MCs3BLtkPxrLbttayq+dcimRCWAiyYQEJhIASYKvJBFMTpqD8uJoZDyCIa5oLGlHxqhjcFUF1jQEGAEKMBElFcIHT5XzQwH8GyNdjJjOlOt//zsLAjyI5IIA+N9My8Eaaob20k8CyalXT/IsF08hz7gz5Gu85pxVAU2rpvbLUboCwBUayhqtAHC4OJT9geIhECMEPsNbeGYBW+7JOHpV/2EqPUFP9NeBcyC5rnc57DJvWKb+wEgsSllpnTaG1nbkF93+XRkTNYOLbimrJH663y11RzBdhkXNYy6R3HqY6PUIuGTPVgkBlW2yyURiMeYqhoEqAMQwULdjdnvQv3fk2f6baDbwjXjfi5shnFDHVh8PJBnaPPZbWsNFTUNNcI5qZh4CjZhmaj48A0O/CNqlxptz6f5OsBo4TslBe3Hor9vd8baD4DSqDrNc1ky7Bco1hAIulVe7MhIGNLo/sDhNtAcawKQCYuPp0nDU9lit1Qs49S+3EPs7QB4ENXO0ZKVEKhY7jlXOyqJSl0WcscbKytJIKYOKZRXrYHbXa3R2ojp/SLcUcMlBzpqz0wBiyBe14QlAUVjHIl6mPpLJI6g5VjyBY2yKUKQdWvEleUa0vzthhN6QrZl6TD2zVT4PRz4RnlOvaT8Ih81+mBTJij7ILc5LMG4MqvS0cOXifD8/VFL6JBYGSo9qHRIWZ943ypMAYOC5+WIy70xXHoHYlMyRkXayy5jt1M7kJfz5CWEh0DrKQpliUk9a4Qwo1s1JoNeEnKBgnsY86QByX3t/QW4TOi/G1lG4ctE2nFmxftWD0ixADK1UlJnM8auEngBo5Divu7jfjqYD6aA7PhcRSWkhEAHVmynDkuiMLR/pj/VVmei4N25qQWe4ZetITpFJLDoQmcSUBEhRIMGj6FFQgGCyNzIf0e6KG/pL4Awb8tOGA8zlEYAIQPCKAggpIOcxgHaf0DN1kAbD3xdrUqACUoNVVIlW58yngWxtzmvSGzabgrOQyYSsSMhC+qREvvE1ZpJAr84WC2k0BtuaeeyyWTfChd0yn2GLfg1cprPnEhBmhWdeJsCL1cxUZdDHNmJa9Bpgwk1xiLz+Etf5jN9cdXek4SDfcWu2rOZyA5y3dBVkYVKqNcJlpXosii6tlCUPNWdPyrASlFBz5hIYWWfg8x/RnrX17jiXe/q2vK9/UWEgBTer6DLgjUCC7zsQWWNOAqwukra7rTmNRmxvkFz4qdhFWQNLZc4A11mu7BpCIg9Cn64NnRPaQ5EILiuzEdYoQWRFP9T9IKGK82nErIjBCuBWOQKg3bnga2eAuAV4MkIVfTjxl3qoEpQelYlGAmAeCOsYgBkyNC4oicBevhR4/B6kI0wojSsuylGZIFuaEw0lTf8P8zTD5XD2VZXLRmNeyHTZc8isWeEV7IfqQUJQaKFqpcatAiox5bRuvPkBoJHdfb2J24bXDrzqqDGqh9frkWCytCBoBCBUIxVDiMMMkEkZWUcGamYVZQAbpFmAAgVPyBI0FmymxnwKvxMP0iE2rmhqDqaUNFiT1UkJHWmJqVcS4tzGy7siQ8Bl7ZOSXqaaOmpftcy7QIAxiR/PKU1YO3JnKw5qEFbAgc85w538A8/jl7MfwoN/6HnwQ8CDq0z6vB8DRxmWFfp5Ha01DXjVPsSJMZ0CWWMFmbmAMcigX1hV79np7ZvgOJ6lpGdMk2dPHQShnE/qDZxCZEGe0+FAQ+mCdiMCBO8z0EmKZgsuiEwyI3mwF2SJVL8owOCPMm5IC+4Y9hx+7gFNEytoRMIxfiL5SVRXrdSHpsEpxsiQ1OMYMrw6y4gBZYKUJTKFEYuMebji5tW+QsxhpC3BRVoaSRlTPTLQKAZ/Qy2hNHZZP8V8ROxtcQZm0jSXNt26WtwzMWZTFkQlLbJwO7NlG8+F33T5gQUn2gawjle1ukZzxhqdUVOWlACvuFob5YfCPHFSNgA1gkaLFhfk7SFGA0AXS+kqzx5ZTutq3jK82wLASeYAECARCQLIEsk0ub/98SjiKIhhHSTCewCCODisEUtdYv/GO7Ga3s1+TNJWoApaq/V2IgvWSDAwFBAGLJzObE8YwIeRw6yCTqfTbevmV1Qn406yBiSYJmTq2Ecu1kZYQ4AAh+IbijuleVVpUaOnng+kU7BQzvl/XpyPCHKjGke9gF49YATYaNBhLZ7oo2TSgr5HCSsfcnaSLCJSEqbOelTiIUjTBdUsfJji4Q14EB5gBEgkTqex2pfRsreCbmu5aXiFE99YyO6GzGWgE6BiqmBHRhBgljxU+KFDBiOTfxmUuQhdecSj0jwCGByx9auI1Hi3WjaTIKB3Imb2yIAgArxG9PSkRiB6AYAoEPQeROIBRjW6v61YG9K388W2UDlESXiDCqz31EJi6azVjmXUsPFpRgBettwy1JzztqXkB2pm43CKRkz2KZo5FG/ZOIun0kOBTEQS8RHlAWmfQNouEFgMNiKg7LG+suuJPos1Ykwjw2oa4RGtikiCDiBohFGQXhy0h89U5s3ZIl+UHNbLS5BGNxPtVH7nwAzaSg2qkYoTAWH+i11zK5NlsZWXm1rVmbRqnanTtjldToM1Wac6+JxZkD20ZCM0Z/HULAaL6mnsGE6g1KldnbkrATVeGI+A5+rqS6PRcO5qlHjpVB06Rcelk9ADGNYqXsX3NIASIOghupQIrsRQDFzKyceQthxgos2/qU3HkiZa5Aks0EiM0cn5QWfSUDqfy1Nc/wzTrED6RQFJ8WQWgl4YQVgjBysQkpEpjEiZMNN/sFYrtg2xP6lp8Y2ArUVxX+tHTIrEEQICCg/JFGMYxWuOvUAEIDJzjkA0GmTIGPyX5iJ00egGkbYKxSbOOyG5YA/CGto55IEcx5Nn8wz9LnLJDCqklM5q1VXqtw7rOjxfIImEFAkSBAAikkBCJIiESBApc1NOW6ZdHdFw5uKaRPKnONrEVNQuJAYjswZKsTZ6I4Cc0KFPggxFn73QOZwxHjRu2Xv4SGKWODz4JB2OjUP688EL/KkpFM7NxgE8sCahBpWyordN1dQko7M6DpbaFCnauE7JDAvnf5ex5Rr5MRjXZeu8S0JplGHOhcFoGwdY3Ygi0sbCuWB068b1tBuAkTImGfR0+/qneK6Tv0x6dxxgLI0RBkKbuVHifbbgmB0da6ROPQBwGBt44RBLXCPshCUkNZqR+VGmPMWzZOdIkEYHRJtoF192dXNQjwX1m37HSd8M4SXkQCvP9U/sueV5jZJyZPEikp2iZyeCaA0BeNFOCBgJGR6KUoncOPeiobsxfyB3hWqkDWCGa5BN2AQedJ4iBW2SpFenq6AmDizrvkzLEWHez9dCLNUJa5tOYYSPnJRhJJGyHzyIfXSahX1G7CCucFB6uBbiPJwZVr0CjbSaPqGwSyOVkLlQLzzCBZrYSPLx1cwd4AuWdKDWL3oQ3IFuYjVGfnvCTQecTZwUC70wykbgy5JRwUgAYHYC7iCMC4y7hIM9TndRAZA22PknBKoF38GKGChHSwiMotFh0NmOsgkbIAd/zPo+aKNYPeM1BowM41IA9Qrve0JHBIF6AFkQe7BSrag5IlVY4Xu02t45iBE1HhuHaPAbk1IibjD5JXDrIVOW2umFHP1eiWnYkbHTBzFSbGSNpEPN4CGW3GmYMAuQ4WQNgd9ouBov1iUkGOwj83/gkqwfTxeUwFJcKNBEm3zWyBst0XDuEg8x9Ufm9e4LnOmCYPfkV+UdFszB6aU0rjI2pouI1Lhcwwu9MxNIOvddEo70ngQJzRo6yOqHk7reAORWQa2RNkDX+zwjpLDkUVEDMcHkLGBiCqyfOrKoJGL1kpnUa/c5/R6tjbfXzpMCiOR7lgEqeVKgHqrB47eJZlQC+bjjPVP/r6l+envrmmVyBRjUqLFV4ljLWUk1tII1UtMmjk5cVCW38xOZOkDGPd4Te35iE4tQ4jGOtNCezwAx0BHQJTAeoNhTJCbKI73q3WP/Ar+Isf/g33QRkIDif/poJM6hWCmSMBK0FwNOtFIkAyMojAOiP+wjTd7DTg/4j0K8Q+1bR7XbYTXax0LahDhZWRupil9SI5GYPRWRGSOOyJ5H+nHp8ouh/kbsh9zJOxSbLngPIqSzkFPkg2MDAM9j0PPYIqrjeQnIuAKp6/mutPNd8nU8FIVTgJqIAlW0ryxYskCFP7ATZSOb1CuIDdpVweJ52fASVlQF5FUiFTdEFvKgf1WQJr2vPVFM2iIhb+6m9oYtC/X9g4UmVpF7vbbqjUP6pCMIgD8gxwdU+Ftj8BrBo1TinkJPEB4ZWUN7Xqw+HsGGs3nn0hT40LQdeY5BG/imjLWslXgBL/QmZwHtrIE3FGmKje2kojmjqvcJcZOmf0eZUnvuYUMKaLnfzz99C83SHLzy9OP5Ntvj7fMWe/O5ObZKalu259x+2920HXm++6ZvDzOh+yM/X3X/c2S2k4/4/IFITQ0jETkxOzlXGq1aNi4kQAA+woihi03rOz0NfAicOj8EMNJB+rUrALZImJm6mqSDNfViPLxcvIFR9MfmSQzoa0CmHBAY5e1xpzuzCqwo0lr/821sT5uzeZssPcRFN9/8m+38/1N61fKb9qwl5u3efHNz2k17T7/S2sWtFn6mNVxG2oY8nz9oY62sYr0hYKVbM0MAfK8+Lnr07Gl8g8aIZQ27PSQv61hJX9FYQmeKRKqODD6zKA2kxqbdcvHnWXAscUqz+EHvcMi4QZw1pk+jG1qQJlENK/mXUb6r3biz0yEMx2nOi662x1Nbm2/453vBYHbl1uvmNlycnd963f3uah6Z6mfeHO1/K24YwI0Yn19yBdD6rAtEwqIkwTUBQUGejCQjnMxHkQxoCBhCx857+jjRynP8BKrexfDUNUz3YkkVep/7nWFPb09RkjshBMj4NeN08Hr1pok3KbzOv69f/gE/fttm167xdDh9XLj0qqePm1+633WpDY87xq3Xbdim+cnb3hOmruvFHrtLoT9xagCU53v3/NADERmRx5yJYRCJcREBLyBEvaBxjPoSJFjC984Ke8SzqergU7HLg1wWBplkFFsX/VuLAuDT/yFRamOtGRqZc0ByMf0YeY4qqQzEOQHyH+A+549oQ7lh/ojmG/eO6U6T11lzxtOTv83cV++dnqBlnS/nzUVK/GgushqUqrbanmiplIJT6NelkJMwWcMYAWOXoQCpRpeacenR7sqUbxX8qhzRSOz1CTFgNnNy7S14mAe9RIsXKm20aISTtztgOmfL6RhPAWOiCs5v0wlQnn79/dbpd9tbD8qlpnrD7Xl81X++VGa/Rx7P2n295MXZ6Xn9Oq28iLGYM+6ZlDoSzAYgvnVQRcSRct6IRsiAGLnGGoB3Cq9hlCIKNG3ua36Xf1Ya23DUo6LIMIalQo8Hd4OJWQNYgneDeby85E4H7qLZgQYCfMSH8ME7S0IHpKatheGPd8PkEccuhuOA9W2POLn4uHjs0J6fl6fHxJMyo6LgSfQeTrmOmiCK8pOIDqupOkBWm+29PSQYc9BUI9eZE1iv/aRGVGfYyLqJ7EvBXP9w1F2hO3se/LMHH18T2/5T1HDDJGJQFFn8OjM3XaSJT7gBJf0MGzxQu8S4Dw0HF+QPuNFH9VjVdwm/gGRqoXxS+6d7nJ/Oyh9fSjxtT39jfdv60uFw67kdO20NAJbhnmqias4sJvbMg8oXRDaRkOzgwaA1rjqSXv1pzlk5q3EttUQ1EqJH6YNmpmA61jhCRjWZvf3gtm1Hyq7rL9OEMNkGYM3981/tFHCRb2s+cdZ2e7KyHeHcRwlOsk+QL/6InbclfGA+6aTdw+nJpeM3PJ6dP/amW+fzdTnd28LFxxXOW3ManvSB4JWHsCXmbfGpSewJF957WiPrZAmklGnEwkmilJVXeEQ4UnDLl89NG1DqmSd2yX2+TWzBeJTw86aGWx8TKGzw45PJu1wd3oyfswELt02OEB0I4OQCotN46nUL1G+n+R7ud1Juazctf3fTlm9Lp1u1+cVZe/rp7elemDOct398Su6y3byQHRjJTyNMf9Vlr71tl1ZFWpZspCkzQfjO2SKdcEY3v5TRDoaWfD90vP4Ksa+WWewU81QZG114HPCiL/l1CZdi377UHCXPs9oB++gUAkLhZOOGgPW7X2I7B8wj+eZ5etsHlEtzhyvlhOX69nGptNvzNt28OW/f9pjz9qRt98JuungSdn9ebpg86YjzKNbOHhoRaPfJEp27SWOQSYFkzIIjjM4ACBojkfv8bWzTp1dJHO6i6JCzQplzOqYMsGIpCSVd7duIsybW9Lt8agqEyw5+2XkEGo4edEByNb1lF6wrFji96Ul7Q2G6/nHlZL5O8zKf77I9edLxfL5OLcv5MSL/uN1r6n6RW5zQGa+a94hz+4V/ckEXBHVfXgBFEpdpJ+AxZFo3xdUQoMubleMct/QXkpgHpI7SEbGpB6aau5gbWhbFK71aNd508NMY6rWfchEyGV+F/Un+JQJwegFg9zlTLLE6E0ZUs/dP33bswulWuP70ArupfYyjx52Wx21Ga5uHbJ1+OfEhF9PFdP38j9vIFuuToCBxHTemA1OilOt6uLEc5uSjBmCtyNRGlkjJ5LIxSy/SjESetofT+yNut28QjWfuCGdHszpcqSvDi4bZeHFXYRA9E/Kgt9R8sBP7idJoT3+O8MBBnBvRTt3wBIQiM4wV7ltY8ttIR21Ds+tLWuNx85RcdFPi9djDPMxPH9eakHYfcSU+ZJOauC/+/dbUGRMJc1AF4c6DoBIaQz3Ng1JwWT4PQqHL2tgI7Mw/jHPzW9bh5meivbojcsfHMldlW2ks0WdqjvWmfEszFnc1eCFrSsVRMi/jbAvx4xSAhsMM3hDad6V8gDnXZMV9+L6M3I7z8rj5eu+E63m5PMcH/vG5xavu3i81x0McJRPd77anX//HkWlAKDhj5RunXToYGeW4tV3Stbf2VLRH79Gr8Pu3wIpfBsYDv1FbeXj8T/yJHXVEd30S09moG0L7rmcUqEqnitYjuOnQxR5b5E1Dg+PJP1RuLrDph7N/6QD2gWg4bW8YoO2b86zXpKRIfN0S9z3l8WSzO/+DNrWnp6m9yEssZR7bzUPCky5dWj+gCU/4Y5486TnoOrs5Vny8BIZlrYZrrwCxZ9I7MKprDqObapMk09hWVar3lwLnZUs9lqZO5olhWnhEhQnkTCXcDQhFk9cMH/L/eyyowivwGS3mFt9PsPm1hEtoOJ6XTvO2sk7MYkPIPgryQQbbhfPvOn/fm483yTA86SFA5I8PkXzI/W667pzf/ec32erkONy89zq7YXAI34Y9mutJMqoQ93zN8GLcutq+QRkV0X2+kDze/kw0YtN/lX7RG+bLbOP5kFGQk/2hC9we/CTc9yX3paBsUCPY+gisluWCQjtNy+YDLBEJK5HNsb4Wfv4nnuuQMuIJHUvYX73B8yvz9gP3kikb7qL9+c3T24A4b8/n8yt7u+c3ve2leXulDTUMiE1I0D48WyVnUAXgYtPEsV76DbsKNvbje9L4h264GnWuGkbwUfxeqgQvaWG2KLnoj33/6gsbE5pZktl1ze7oz7/Acdlj+X+xsnzBnOdXKclH7Dn/8110cLRBsrDlpt/V1H5m73zemrMnNVXDytPtt9Fj78cvD6GNN1+gNxzClyUiHeK7r0Ygp31CTsf4b9PswtZRuLayg196C4BN0WBvi6kichIfqopWg91C1xGIHPDeN3xEM/rNJV+gCFEwlIwFkqeyvaPuTWC1bO+69vBD317Ew45LeygKkgEyWen6neuRvcXn/ZY7OdgYuguAs8CXYvjCOwB40eMOwx+9MF4aLwS8LNrDF8AX3fMqALw0fel7AngR/MevAMAFsISDiys7hDo8AC/efD3/+rbKLDv1iQ6JfmqmFRE65L35+ryNps1HuXGIkCyeDL54A83YyY/T6yfZX75Gb/emVKX1zuieau1yEu912ZWwvacPAIJMVtrg7irM1mGdS7p0sALWaez3b9HD3NAlHiabaVwoFf9Bcut1SQ2QCDw7Yd37tCz7MTdBQ43wVzdrd2xNbuUtRMLL/ajE9t23L6PQnK3iOxUqBDIDCSmDnF4CHs6dDZRDV3kablyv8RNtALZ0Ui/3hokyXrXe5uD7wsXcc33Yxo2oAOu2iEYRtCCxM9zEjAaV+aktflOdbx37cvlOn5uKXax998pOjS1xLwIRPLszxLGpyCqRsedJ/vtp7mWzkXOpQ5q7YDUqEHooV103XE6TU62XsUgIgcSkKoSmk4m8sp2uDtAAuYFMdmLCGwHiktSoaKuHivYnsQNbInPk/X7J7o6LuxH2I+xrszNjYDCkbwShDjJ9rMul6UOs94sF6jRwiDOlsUUv1sawMMgY0vIFa2NVshJjw4JMuJI2s3pKyps2Wcn4MWBVHAoLWzmStUXfE35Ntdpv59HWzQn1dc7H9ves+9rtfnYUjhgEit+HVVhc7UbGsnPnvvLGSrgNOJMGcJCTKiMMUmmYCF1DKQdJIIsdIAcVhfm5BOordF0BZ5/qsaqEqQVQryxrOPdtJs8VgzNb/x2ptLduqGu0Rr+t4ykECeXiykoVPlJSYqp10XITcHs14HLbqI2NhBAhAGVEpyiX0xA5DFNTNzEkTP0Fm+Dtp/uJKCjMvvpdvtw/T8nJotOxZPJW6lTTSbH233E/lwAX5NEo2ju8GeglGo24tqyQpyRgBgTTAJDximluOEO7z2qVjOes1XwAGmDwcBTGz9TKnQGy9SVqzCE879s4Uey6Q977k9vPvq7AFVRSOUENahdjJym+P1VOsbIltPjpHP+5DTnzjubVztsRuqpB/bVV8gmeHS8tZ5YLDWgMAZEUpErBWCWkU+TtsT2dJSet1vhDtAHA+R+Kj15Wzxc9ROlnUU2hoEPA+60Chp3dbqz/Y2FSifxaTBQBU8nk6lXzLfyFoanpfLz9x/k5tdoFYCOv/1ner49k1qxPjwlN+DaFADMQY8YEC8aYoY3pvWTZ8vWGgRV6+Qog6wy+mXMGPbEM7gKrARyNuPNSRKteKvQSobsa8jgR86RAqjg7WVnkHV8u5P3+IkEWFiRuqC+T570sRaeaLiWHf6zNH7TYQtwCBiJmj8v34eVFbF8i9hh2oEcF0DRU0Pdgp4weYASiYg4WBvJBH16V80Pti4vVfAysgwaAquey2EWF9lRNobvVGlio4CnsCwXfLiEb97DrT9f/J3bRJWXQfP+fBFYzC88zdPzpjmwnGNs52870zDbiAYCNXWMuW8KPptzeddzTjBNaGChN+8yInshAD/qIHlgOctoq2mUtcPFePmX+YmDQwG3AMtgdJSx6HQ/fxsm3NpUy1KjQXVJqt9zIEDlPHFjFffh/6+bf8Ypfvynv/7Q1LzAqGf8LEiRLh9VOirBHbLal2N/jX+eIALCDF0mdB42yvAKFlZExKNADEpaVdjEpRsIZDwgBjxhFRLoBrK8tkdUvYoOCD2EmDQDHIjr+XDylMrFTQ61OpUpRCkRKMJJnAhusSS0okxPFSDhd4SFy4v8GyOAGyAAbjyWu1K9ng90aebsihgPV0w6r7Ak/cGoKALu4y1SBKpxGr2X5mWPuDq+OxezEb7HvENF7z95T4PeNpH55RuTYSWAmG9u+O1r5stowCBgI1HkaaU9A4oQnOcZeNk2VKpRbrURSYA7ZK30hX7Anldhvrvte/wav7MuDW15AezJyoO9z0C9eOmwuy3TBOjnKhsPJcrzHzgmiDQCSGIyN0+jtzk72KtrowaZKa1EKeAAHBGLkGOg5uRwTSFv2/itA3DQIwYfKwbEguqNtqLHsb9Hhu7JTm3wVimQoVFMJT/k2qSqkdkws9uv3+g/LoK0/ERMWboVIZogMXhh8G18YitQUSA4XxHRBhhOpzQkeTqY21452wQ0iCGAvCOo8jYxLgejX652iUNYVYh2qFaqlGmWw7wBEZxuLHzFlEciMfstKqZDiot7cbgtLERUjKvFcprmXKRZFclMgQwEnT4V0QQwFnxlQ9L9gl6BKVhW0iEDVvHmHUCLgYWgCxIuTtNDQyrhLXJWbS8npDB/OJqezF3rq6k5vaWsDAMKcHhLuERqOgjgADCEW5nBjxf/XCX2EjxMhSsSwlgLI8khj6LL79khc1j1lzSOixXNR0Yui+SpOhngRElhJpVDIF6k0pSrSKaRSS+g0+IpfKBQK+ULBL8Av+p7/y0RxgoeSVtkeWDRTaOTctstVK1wR3Fa0xFpzagWkP8h1bPzE1tFKVMP5t+VP9NimCl/pbi5Byv5yLGicRApRO/TDhJEI7VBYiAopLhmkj/O/HHFJrWqFob08KhmsJVJKYSFJtUhqAoWlQGrKQrBpiGiUBEWwjKAKQaJTtvZUCFDrULQPNoYWMTSK6Z413bfLA1nuhy5qTh60GauAvKqN6EDaseBAoM7TyP5P+viQCqLgGcTp2ApAFKAxve8zgZ6xINI+Bp+/eWKS0OAOgJrZOqY7EoEYH1eNbh49/DewmxNvhLf4360WYaEgsyMGnhafOq0S6rQKDXdbsDuuDPfmmTR6N3hiGTwW2AZ6erROw6XrOzt7U9nIQUqBdLXuBm8RBYdgJwC9E4ceji3wHD5pdXdi8+wnXJPl8okDsQywDOo8DbcbSxNy8qe2jBIAIgDEmBARIRkkDOfZrI6ezCoOy7ptNfjpGAB0DbW4lH55JaYf7+j3u/OukZRwmIzrsPHm3BqFVXQy42t7pEa2ZlczB0vEhUxDd+7HQ+Y=") center / contain no-repeat;
}
.r-mark-sm { height: 26px; }
.r-mark-xs { height: 17px; }
.lockup { display: inline-flex; align-items: center; gap: 9px; }
.brand-product { font-weight: 500; font-size: 1.05rem; padding-left: 14px; border-left: 2px solid var(--blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Wordmark: "ROMbug" white, "Bio" red, set tight as one word */
.wordmark { font-family: var(--font); font-weight: 700; font-size: 1.85rem; letter-spacing: -.03em; line-height: 1; color: var(--white); white-space: nowrap; }
.wordmark b { font-weight: 700; color: var(--red-lit); margin-left: .18em; }
.wordmark-sm { font-size: 1.25rem; }
.wordmark-xs { font-size: .95rem; }

.top-nav { display: flex; align-items: center; gap: 4px; }
.top-tag {
  font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; color: rgba(255, 255, 255, .62);
  margin-right: 14px; padding-right: 18px; border-right: 1px solid var(--night-line);
}
.top-contact {
  color: var(--white); text-decoration: none; font-weight: 600; font-size: var(--fs-sm);
  background: var(--blue); border: 0; border-radius: 8px; padding: 9px 18px; margin-left: 10px;
  transition: background .12s ease;
}
.top-contact:hover { background: var(--white); color: var(--blue); }
.top :focus-visible { outline-color: var(--yellow); }

.sex {
  flex: 0 0 auto;
  display: inline-flex; border: 2px solid var(--black); border-radius: 999px; padding: 2px; background: var(--white);
}
.sex button {
  border: 0; background: transparent; padding: 6px 16px; border-radius: 999px;
  font-weight: 700; font-size: var(--fs-sm); cursor: pointer;
}
.sex button[aria-checked="true"] { background: var(--blue); color: var(--white); }
.sex button:not([aria-checked="true"]):hover { background: var(--blue-wash); }

/* ---------- Layout ---------- */
.layout {
  display: grid;
  grid-template-columns: var(--rail-w) 1fr;
  height: calc(100vh - var(--top-h));
  height: calc(100dvh - var(--top-h));
}

/* ---------- Rail ---------- */
.rail {
  background: var(--black); color: var(--white);
  overflow-y: auto;
  padding: 26px 0 20px;
  display: flex; flex-direction: column;
}
.rail-title { font-size: 1.9rem; line-height: 1.1; letter-spacing: -.03em; font-weight: 700; margin: 0 24px 10px; }
.rail-lede { margin: 0 24px 16px; font-size: var(--fs-sm); }
.rail-key { display: flex; align-items: center; gap: 10px; margin: 0 24px 10px; font-size: var(--fs-xs); line-height: 1.35; }
.key-bar { flex: 0 0 28px; height: 6px; border-radius: 3px; background: var(--blue); }

.area-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--night-line); }
.area-list li { border-bottom: 1px solid var(--night-line); }
.area {
  width: 100%; border: 0; background: var(--black); color: var(--white); text-align: left; cursor: pointer;
  display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 6px; align-items: baseline;
  padding: 12px 24px 13px; position: relative;
}
.area:hover { background: var(--night-hover); }
.area[aria-current="true"] { background: var(--blue); }
.area[aria-current="true"] .area-bar { background: rgba(255, 255, 255, .3); }
.area[aria-current="true"] .area-bar i { background: var(--white); }
.area:focus-visible { outline-color: var(--yellow); outline-offset: -3px; }
.area-name { font-weight: 700; font-size: var(--fs-md); }
.area-pct { font-family: var(--mono); font-weight: 700; font-size: var(--fs-sm); }
.area-cancer { grid-column: 1; font-size: var(--fs-xs); }
.area-bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--night-track); overflow: hidden; }
.area-bar i { display: block; height: 100%; width: var(--w, 0%); background: var(--blue); border-radius: 3px; }

.rail-foot { margin: auto 24px 0; padding-top: 26px; font-size: var(--fs-xs); }
.rail-foot p { margin: 10px 0 0; }
.rail-foot a { color: var(--white); font-weight: 700; }
.rail-foot a:hover { color: var(--red-lit); }

/* ---------- Stage ---------- */
.stage {
  position: relative; overflow: hidden;
  display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
  background: var(--white);
  cursor: grab;
}
.stage:focus-visible { outline-offset: -4px; }
.stage.dragging { cursor: grabbing; }

/* Toolbar above the model: body switch and the single message slot */
.stage-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 10px 20px 6px; }
/* flex-basis 0 with min-width 0 keeps the rotate controls from shifting when this text changes */
.stage-status { flex: 1 1 0; display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; font-size: var(--fs-sm); text-align: right; }
.stage-status p { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-status p { margin: 0; }
.controls { flex: 0 0 auto; }
.stage-status strong { font-weight: 700; color: var(--blue); margin-right: 4px; }

/* The model sits in its own row; nothing is layered over it */
.model-wrap { container-type: size; min-height: 0; display: grid; place-items: center; padding: 0 0 8px; }
.model { position: relative; height: min(100cqh, 1400px); aspect-ratio: 915 / 1600; max-width: 100cqw; }
.model-img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; mix-blend-mode: multiply; }
.hotspots { position: absolute; inset: 0; }

.hs {
  position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border: 0; padding: 0; background: transparent; cursor: pointer;
  display: grid; place-items: center;
}
.hs-dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--blue); border: 3px solid var(--white);
  box-shadow: 0 0 0 1px rgba(0, 74, 251, .35);
  transition: transform .15s ease;
}
.hs:hover .hs-dot, .hs:focus-visible .hs-dot { transform: scale(1.35); }
.hs[aria-current="true"] .hs-dot { background: var(--yellow); box-shadow: 0 0 0 4px var(--black); }
.hs:focus-visible { outline: none; }
.hs:focus-visible .hs-dot { box-shadow: 0 0 0 3px var(--black); }
.markers-off .hs-dot { opacity: 0; }
.markers-off .hs:hover .hs-dot, .markers-off .hs:focus-visible .hs-dot { opacity: 1; }


.btn-line {
  border: 2px solid var(--blue); background: var(--white); color: var(--blue);
  font-weight: 700; font-size: var(--fs-sm); padding: 6px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap;
}
.btn-line:hover { background: var(--blue); color: var(--white); }

.controls {
  display: flex; align-items: center; gap: 14px; flex: 0 0 auto;
}
.model-wrap { padding-bottom: 0; }
.drag-hint { margin: 0; font-size: var(--fs-xs); color: var(--ink-2); order: -1; }
/* A semicircular track that curves around the legs, with an arrow at each end */
.turntable {
  position: absolute; left: -6%; right: -6%; bottom: 2%; height: 30%;
  pointer-events: none;
}
.turn-arc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.turn-ring { fill: none; stroke: var(--blue); stroke-width: 2; opacity: .35; stroke-dasharray: 5 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.rot-btn {
  position: absolute; top: 0; transform: translateY(-50%); pointer-events: auto;
  width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid var(--black); background: var(--white); color: var(--black);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 10, 40, .12);
}
.rot-left { left: 0; }
.rot-right { right: 0; }
.rot-btn:hover { background: var(--blue); border-color: var(--blue); color: var(--white); }
.rot-btn:active { transform: translateY(calc(-50% + 1px)); }
.rot-btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.view-name {
  min-width: 88px; text-align: center; font-weight: 700; font-size: var(--fs-sm);
  color: var(--ink-2); white-space: nowrap;
}

.toggle { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle-track { width: 40px; height: 24px; border-radius: 999px; background: var(--track); border: 2px solid var(--black); position: relative; transition: background .15s; }
.toggle-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--black); transition: transform .15s; }
.toggle input:checked + .toggle-track { background: var(--blue); border-color: var(--blue); }
.toggle input:checked + .toggle-track .toggle-thumb { transform: translateX(16px); background: var(--white); }
.toggle input:focus-visible + .toggle-track { outline: 3px solid var(--blue); outline-offset: 2px; }

/* ---------- Scorecard ---------- */
.card {
  width: min(820px, calc(100vw - 32px));
  max-height: min(900px, calc(100dvh - 40px));
  padding: 0; border: 0; border-radius: 16px;
  background: var(--white); color: var(--black);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 20, 80, .28);
}
.card::backdrop { background: rgba(0, 10, 40, .55); }
.card[open] { display: flex; }
.card[open] .card-shell { animation: rise .22s cubic-bezier(.2, .8, .2, 1); }
@keyframes rise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

.card-shell { display: flex; flex-direction: column; width: 100%; max-height: inherit; min-height: 0; }

.band { background: var(--blue); color: var(--white); padding: 22px 28px 0; flex: 0 0 auto; }
.band-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.band-title { margin: 0; font-size: var(--fs-xxl); line-height: 1.05; font-weight: 700; letter-spacing: -.035em; }
.band-sub { margin: 8px 0 0; font-size: var(--fs-sm); font-weight: 500; opacity: .92; max-width: 60ch; }
.close {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--white);
  background: transparent; color: var(--white); display: grid; place-items: center; cursor: pointer;
}
.close:hover { background: var(--white); color: var(--blue); }
.close:focus-visible, .tabs button:focus-visible { outline-color: var(--yellow); }

.tabs { display: flex; gap: 28px; margin-top: 20px; }
.tabs button {
  border: 0; background: transparent; color: var(--white); cursor: pointer;
  font-weight: 700; font-size: var(--fs-md); padding: 8px 0 12px; position: relative; opacity: .78;
}
.tabs button:hover { opacity: 1; }
.tabs button[aria-selected="true"] { opacity: 1; }
.tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--white); border-radius: 2px 2px 0 0; }

.card-body { position: relative; overflow-y: auto; padding: 26px 28px 8px; flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; }
.panel h3 { font-size: var(--fs-lg); letter-spacing: -.01em; margin: 30px 0 10px; line-height: 1.25; }
.panel h3:first-child { margin-top: 0; }
.panel p { margin: 0 0 12px; max-width: 70ch; }
.muted { color: var(--ink-2); }

/* Key figures */
.figures { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 0; border: 2px solid var(--black); border-radius: 12px; overflow: hidden; }
.fig { padding: 16px 18px; }
.fig + .fig { border-left: 1px solid var(--line); }
.fig-num { font-family: var(--mono); font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; display: block; }
.fig-lead .fig-num { font-size: var(--fs-xxl); color: var(--blue); }
.fig-label { display: block; font-size: var(--fs-sm); color: var(--ink-2); margin-top: 6px; line-height: 1.35; }

/* Stage bars */
.stages { list-style: none; padding: 0; margin: 0; }
.stage-row { display: grid; grid-template-columns: 190px 1fr 84px; gap: 6px 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.stage-row:last-child { border-bottom: 0; }
.stage-name { font-weight: 700; }
.stage-desc { display: block; font-size: var(--fs-xs); color: var(--ink-2); font-weight: 400; }
.stage-track { height: 16px; background: var(--track); border-radius: 4px; overflow: hidden; }
.stage-fill { display: block; height: 100%; width: var(--w, 0%); border-radius: 4px; transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.s-loc .stage-fill { background: var(--green); }
.s-reg .stage-fill { background: var(--yellow); }
.s-dist .stage-fill { background: var(--red); }
.stage-val { font-family: var(--mono); font-weight: 700; font-size: 1.1rem; text-align: right; }
.stage-share { grid-column: 2 / -1; font-size: var(--fs-xs); color: var(--ink-2); margin-top: -2px; }

.note { border-left: 4px solid var(--blue); padding: 10px 14px; background: var(--blue-wash); border-radius: 0 8px 8px 0; margin: 0 0 12px; max-width: 70ch; }

.paths { margin: 0; padding: 0; }
.path { display: grid; grid-template-columns: 190px 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.path dt { font-weight: 700; }
.path dd { margin: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 8px; }
.chips li { border: 1.5px solid var(--black); border-radius: 999px; padding: 3px 12px; font-size: var(--fs-sm); }

.ext { font-weight: 700; }

/* Trials */
.landmarks { list-style: none; margin: 0; padding: 0; }
.landmark { display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.landmark-year { font-family: var(--mono); font-weight: 700; color: var(--blue); }
.landmark-name { font-weight: 700; display: block; }

.trials-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin: 0 0 10px; }
.trials-head h3 { margin: 0; }
.trials-count { font-size: var(--fs-sm); color: var(--ink-2); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.filters button {
  border: 2px solid var(--black); background: var(--white); border-radius: 999px; padding: 4px 14px;
  font-size: var(--fs-sm); font-weight: 700; cursor: pointer;
}
.filters button[aria-pressed="true"] { background: var(--black); color: var(--white); }
.filters button:not([aria-pressed="true"]):hover { background: var(--blue-wash); }

.trial-list { list-style: none; margin: 0; padding: 0; }
.trial { padding: 14px 0; border-top: 1px solid var(--line); }
.trial-title { font-weight: 700; display: block; margin-bottom: 6px; line-height: 1.35; }
.trial-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-sm); color: var(--ink-2); }
.phase { font-weight: 800; color: var(--black); background: var(--yellow); padding: 0 8px; border-radius: 4px; }
.phase.p3 { background: var(--green); color: var(--black); }
.phase.pna { background: var(--track); }
.trial-int { font-size: var(--fs-sm); margin-top: 4px; }

.state { padding: 16px; border: 2px dashed var(--line); border-radius: 12px; font-size: var(--fs-sm); }
.state .btn-line { margin-left: 8px; }
.loading-bar { height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; margin-top: 10px; }
.loading-bar i { display: block; width: 30%; height: 100%; background: var(--blue); border-radius: 3px; animation: slide 1.1s ease-in-out infinite; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(340%); } }

.more-link { display: inline-block; margin: 14px 0 6px; font-weight: 700; }

.card-foot { flex: 0 0 auto; display: flex; align-items: center; gap: 16px; background: var(--black); color: var(--white); padding: 11px 28px 12px; font-size: var(--fs-xs); }
.card-foot p { margin: 0; }
.card-foot a { color: var(--white); font-weight: 700; }
.card-foot a:hover { color: var(--red-lit); }

.noscript { padding: 20px; text-align: center; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  :root { --rail-w: 290px; }
  .drag-hint { display: none; }
  .drag-hint { display: none; }
}

@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; height: auto; }
  .stage { order: 1; height: min(82vh, 760px); height: min(82dvh, 760px); border-bottom: 1px solid var(--line); }
  .rail { order: 2; border-right: 0; overflow: visible; }
  .top-tag { display: none; }
  .brand { display: grid; grid-template-columns: auto auto; column-gap: 10px; row-gap: 3px; align-items: center; }
  .brand .r-mark { grid-row: 1 / span 2; }
  .brand-product { grid-column: 2; padding-left: 0; border-left: 0; font-size: .78rem; line-height: 1; }
  .brand .wordmark { align-self: end; }
  .top { padding: 0 16px; }
  .wordmark { font-size: 1.35rem; }
  .top .r-mark { height: 32px; }
  .stage-top { padding: 8px 12px 4px; gap: 8px 12px; }
}

@media (max-width: 640px) {
  .card { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; margin: 0; }
  .band { padding: 16px 18px 0; }
  .band-title { font-size: 2rem; }
  .tabs { gap: 22px; margin-top: 14px; }
  .card-body { padding: 20px 18px 8px; }
  .card-foot { padding: 10px 18px 14px; }
  .figures { grid-template-columns: 1fr 1fr; }
  .fig-lead { grid-column: 1 / -1; border-bottom: 1px solid var(--line); }
  .fig + .fig { border-left: 0; }
  .fig:nth-child(3) { border-left: 1px solid var(--line); }
  .stage-row { grid-template-columns: 1fr 84px; }
  .stage-track { grid-column: 1 / -1; order: 3; }
  .stage-share { grid-column: 1 / -1; order: 4; }
  .path { grid-template-columns: 1fr; gap: 4px; }
  .stage-status { font-size: var(--fs-xs); }
  .stage-status.needs-turn p { display: none; }
  .sex button { padding: 6px 13px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- 404 ---------- */
.nf { max-width: 560px; margin: 12vh auto; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
.nf-band { background: var(--blue); color: var(--white); padding: 22px 28px; }
.nf-band h1 { margin: 0; font-size: var(--fs-xl); font-weight: 800; }
.nf-body { padding: 22px 28px 8px; }

/* Denser neck markers need smaller hit areas on narrow screens */
@media (max-width: 640px) {
  /* Markers sit close together in the abdomen and pelvis, so on a small model the hit
     area is kept near the size of the dot itself to stop neighbours stealing taps. */
  .hs { width: 18px; height: 18px; margin: -9px 0 0 -9px; }
  .hs-dot { width: 13px; height: 13px; border-width: 2px; }
}

/* ---------- Scorecard brand tag ---------- */
.band-brand { display: inline-flex; align-items: center; gap: 10px; background: var(--black); border-radius: 999px; padding: 5px 12px 5px 12px; margin-bottom: 12px; font-size: var(--fs-xs); font-weight: 600; }
.band-brand > span:last-child { padding-left: 10px; border-left: 1px solid var(--night-line); }
.trial-meta > span:nth-child(2) { font-family: var(--mono); font-size: .8rem; }

@media (max-width: 1280px) {
  .top-tag { display: none; }
}
@media (max-width: 640px) {
  .card-foot { flex-direction: column; align-items: flex-start; gap: 6px; }
  .band-brand { margin-bottom: 8px; }
}

.stage-source { font-size: var(--fs-xs); color: var(--ink-2); margin: -4px 0 6px !important; }
.note-alert { border-left-color: var(--yellow); background: #fff6df; margin-top: 18px; }

/* ---------- Explanations ---------- */
/* Header navigation: quiet by default, blue underline on hover */
.top-link {
  position: relative; border: 0; background: none; color: rgba(255, 255, 255, .82);
  font-weight: 600; font-size: var(--fs-sm); cursor: pointer; padding: 10px 14px; border-radius: 8px;
  transition: color .12s ease, background .12s ease;
}
.top-link::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px;
  background: var(--blue); border-radius: 2px; transform: scaleX(0); transform-origin: left;
  transition: transform .16s ease;
}
.top-link:hover { color: var(--white); }
.top-link:hover::after { transform: scaleX(1); }
.top-link:focus-visible { outline-offset: -2px; }
.rail-link { border: 0; background: none; padding: 0; color: var(--white); font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
.rail-link:hover { color: var(--red-lit); }
.rail-key > span:last-child { line-height: 1.45; }

.fig-help, .h-help, .foot-link {
  border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-weight: 700;
  color: var(--blue); text-decoration: underline; text-underline-offset: .2em;
}
.fig-help { display: inline-block; margin-top: 8px; font-size: var(--fs-xs); }
.h-help { font-size: var(--fs-xs); margin-left: 10px; vertical-align: middle; letter-spacing: 0; }
.foot-link { color: var(--white); font-size: inherit; margin-left: 6px; }
.foot-link:hover, .fig-help:hover, .h-help:hover { color: var(--red); }
.phase-help { margin: -4px 0 10px !important; }

/* Tap-to-define terms */
.term {
  display: inline; font: inherit; color: inherit; text-align: inherit; cursor: help; border-radius: 2px;
  text-decoration: underline dotted var(--blue); text-decoration-thickness: 2px; text-underline-offset: .22em;
}
.term:hover, .term[aria-expanded="true"] { background: var(--blue-wash); }
.term:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.term-pop {
  position: absolute; z-index: 6; background: var(--black); color: var(--white);
  border-radius: 10px; padding: 12px 14px; font-size: var(--fs-sm); line-height: 1.5;
  box-shadow: 0 12px 30px rgba(0, 10, 40, .3);
}
.term-pop strong { display: block; color: var(--white); margin-bottom: 4px; }
.term-pop::before { content: ""; position: absolute; top: -6px; left: 18px; width: 12px; height: 12px; background: var(--black); transform: rotate(45deg); }

/* Guide */
.guide-body section + section { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 4px; }
.guide-body h3 { font-size: var(--fs-lg); margin: 22px 0 10px; }
.guide-body section:first-child h3 { margin-top: 0; }
.guide-body h3:focus { outline: none; }
.guide-body h3:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.guide .band { padding-bottom: 22px; }
/* On phones the header has no room for text links, so they move to the list footer */
@media (max-width: 860px) { .top-link { display: none; } }

/* ---------- Save PDF button ---------- */
.band-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.print-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px 0 14px;
  border-radius: 999px; border: 2px solid var(--white); background: var(--white); color: var(--blue);
  font-weight: 700; font-size: var(--fs-sm); cursor: pointer; white-space: nowrap;
}
.print-btn:hover { background: var(--black); border-color: var(--black); color: var(--white); }
.print-btn:focus-visible { outline-color: var(--yellow); }
.print-btn.is-busy { opacity: .8; cursor: progress; }
@media (max-width: 640px) {
  .print-btn { padding: 0; width: 42px; justify-content: center; }
  .print-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* ---------- Print sheet (only visible when printing) ---------- */
.print-sheet { display: none; }

@page { size: auto; margin: 14mm 14mm 16mm; }

@media print {
  html, body { background: var(--white) !important; height: auto; overflow: visible; }
  body > *:not(.print-sheet) { display: none !important; }
  dialog { display: none !important; }
  .print-sheet { display: block !important; color: var(--black); font-size: 10.5pt; line-height: 1.45; }
  .print-sheet, .print-sheet * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .print-band { background: var(--blue); color: var(--white); border-radius: 10px; padding: 16px 20px 14px; position: relative; }
  .print-brand { display: inline-flex; align-items: center; gap: 9px; background: var(--black); border-radius: 999px; padding: 5px 12px; font-size: 9pt; font-weight: 600; }
  .print-brand .r-mark-sm { height: 18px; }
  .print-brand .wordmark-sm { font-size: 11pt; }
  .print-kind { padding-left: 9px; border-left: 1px solid rgba(255, 255, 255, .3); }
  .print-band h1 { margin: 10px 0 4px; font-size: 24pt; line-height: 1.05; letter-spacing: -.02em; font-weight: 700; }
  .print-sub { margin: 0; font-size: 10pt; }
  .print-date { position: absolute; top: 16px; right: 20px; margin: 0; font-size: 9pt; }

  /* Each blue-ruled section starts on its own page */
  .print-section { margin-top: 0; }
  .print-section + .print-section { break-before: page; }
  .print-section > h2 { font-size: 15pt; margin: 0 0 8px; padding-bottom: 5px; border-bottom: 3px solid var(--blue); break-after: avoid; }
  .print-section h3 { font-size: 12pt; margin: 14px 0 6px; break-after: avoid; }
  .print-section p { margin: 0 0 8px; max-width: none; }
  .print-section { break-inside: auto; }
  .print-section > h2 + * { break-before: avoid; }

  .print-sheet .panel h3:first-child { margin-top: 6px; }
  .print-sheet .figures { border-width: 1.5px; }
  .print-sheet .fig { padding: 10px 12px; }
  .print-sheet .fig-num { font-size: 16pt; }
  .print-sheet .fig-lead .fig-num { font-size: 22pt; }
  .print-sheet .stage-row { grid-template-columns: 150px 1fr 60px; padding: 7px 0; break-inside: avoid; }
  .print-sheet .stage-track { height: 11px; }
  .print-sheet .stage-val { font-size: 11pt; }
  .print-sheet .path { grid-template-columns: 150px 1fr; padding: 7px 0; break-inside: avoid; }
  .print-sheet .landmark, .print-sheet .trial, .print-sheet .fig, .print-sheet .note { break-inside: avoid; }
  .print-sheet .trial { padding: 8px 0; }
  .print-sheet .trial-title { color: var(--black); text-decoration: none; }
  .print-sheet .chips li { border-width: 1px; padding: 1px 8px; font-size: 9pt; }
  .print-sheet .print-meta { font-size: 9pt; color: var(--ink-2); }
  .print-sheet a.print-url::after { content: " " attr(href); font-weight: 400; font-size: 9pt; color: var(--ink-2); word-break: break-all; }
  .print-sheet a { color: var(--black); }

  .print-foot {
    margin-top: 18px; padding-top: 8px; border-top: 1px solid var(--line);
    display: flex; justify-content: space-between; gap: 12px; font-size: 8.5pt; color: var(--ink-2);
  }
  .print-foot .wordmark { color: var(--black); }
  .print-foot .wordmark b { color: var(--red); }
  .print-legal { margin: 8px 0 0; font-size: 7.5pt; line-height: 1.4; color: var(--ink-2); break-inside: avoid; }
}
.band-brand > span:last-child { white-space: nowrap; }
@media (max-width: 640px) { .band-brand > span:last-child { display: none; } }

/* Missing model image: show a labelled placeholder rather than blank space */
.model-img.is-missing { background: var(--track); border: 2px dashed var(--line); border-radius: 12px; }
.stage-status strong { color: var(--red); }

.s-situ .stage-fill { background: var(--blue); }
.s-stage4 .stage-fill { background: var(--red); }
.s-dist.has-four .stage-fill { background: var(--yellow); }
.figures-solo { grid-template-columns: 1fr; }

/* Subtype breakdown (leukemia) */
.subtype { display: grid; grid-template-columns: 1fr auto auto; gap: 6px 22px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); }
.subtype:last-child { border-bottom: 0; }
.subtype-num { font-family: var(--mono); font-weight: 700; font-size: .95rem; text-align: right; }
.subtype-lab { display: block; font-family: var(--font); font-weight: 400; font-size: var(--fs-xs); color: var(--ink-2); }
@media (max-width: 640px) { .subtype { grid-template-columns: 1fr auto auto; gap: 4px 14px; } }

/* Toolbar holds the body switch, the message and the rotate controls in one row */
@media (max-width: 860px) {
  .stage-status { order: 3; flex-basis: 100%; justify-content: flex-start; text-align: left; }
  .controls { margin-left: auto; }
}

/* Small screens: keep the whole toolbar inside the viewport */
@media (max-width: 1080px) {
  /* Narrower screens: the message drops to its own line so nothing is clipped */
  .stage-status { order: 3; flex: 1 1 100%; justify-content: flex-start; text-align: left; }
  .controls { margin-left: auto; }
}

@media (max-width: 700px) {
  .stage-top { flex-wrap: wrap; padding: 8px 12px 4px; }
  .sex { order: 1; }
  .controls { order: 2; margin-left: auto; gap: 10px; }
  .stage-status { order: 3; flex: 1 1 100%; justify-content: flex-start; text-align: left; }
  .view-name { min-width: 0; padding: 0 4px; font-size: var(--fs-xs); }
  .rot-btn { width: 30px; height: 30px; }
  .toggle { gap: 6px; }
  .toggle > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* The rotate buttons make turning obvious, so the hint only appears on wide screens */
@media (max-width: 1600px) { .drag-hint { display: none; } }

/* Five questions for a first appointment */
.first-q { margin-top: 30px; padding-top: 4px; border-top: 3px solid var(--blue); }
.first-q h3 { margin-top: 16px; }
.first-q-lede { font-size: var(--fs-sm); color: var(--ink-2); }
.questions { list-style: none; margin: 0; padding: 0; }
.questions li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line); }
.q-num {
  font-family: var(--mono); font-weight: 700; font-size: .78rem; color: var(--white); background: var(--blue);
  width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; transform: translateY(-2px);
}
.q-text { font-weight: 500; }
@media print {
  /* Keep the whole question set on one page, but don't start a new page for it */
  .first-q { border-top: 0; margin-top: 34px; break-inside: avoid; }
  .first-q h3 { margin-top: 10px; }
  .print-sheet .questions li { padding: 7px 0; break-inside: avoid; grid-template-columns: 24px 1fr; gap: 9px; }
  .print-sheet .q-num { width: 19px; height: 19px; font-size: 7.5pt; }
}

/* ---------- NeoAntigen Workbench panel ---------- */
.workbench { width: min(940px, calc(100vw - 32px)); }
.wb-figure { margin: 0 0 18px; }
.wb-figure img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); background: var(--black); }
.wb-lede { font-size: 1.05rem; }
.wb-qualifier {
  border-left: 4px solid var(--blue); padding: 2px 0 2px 14px; margin: 0 0 24px;
  color: var(--ink-2); font-size: var(--fs-sm); max-width: 70ch;
}
.wb-ruo { font-size: var(--fs-xs); color: var(--ink-2); border-top: 1px solid var(--line); padding-top: 12px; margin-top: 18px; }
.guide-body h3 + .wb-figure { margin-top: 4px; }
@media (max-width: 640px) { .wb-lede { font-size: var(--fs-md); } }

@media (prefers-reduced-motion: reduce) { .top-link::after { transition: none; } }

@media (max-width: 700px) {
  /* Keep the arrows on screen when the model nearly fills the width */
  .turntable { left: -2%; right: -2%; bottom: 1.5%; height: 28%; }
  .rot-btn { width: 38px; height: 38px; }
  .rot-btn { width: 38px; height: 38px; }
  .view-name { font-size: .7rem; padding: 2px 8px; }
}