:root {
  color-scheme: dark;
  --background: #090b13;
  --panel: #141724;
  --foreground: #f1f0fa;
  --muted: #a9aabe;
  --line: #c7b6ff20;
  --accent: #c7b6ff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; background: var(--background); }
body { min-width: 320px; margin: 0; color: var(--foreground); background: radial-gradient(ellipse at 15% 0%, #7564bf1a, transparent 45%), var(--background); -webkit-font-smoothing: antialiased; }
button, select { font: inherit; }
button { cursor: pointer; }
a { color: var(--accent); text-underline-offset: 4px; }
button:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.site-header { width: 100%; }
.topbar { width: min(100%, 1680px); min-height: 100px; margin: auto; padding: 0 48px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; }
.brand { display: inline-flex; align-items: center; gap: 10px; width: max-content; color: var(--foreground); font-size: 20px; font-weight: 650; letter-spacing: -.035em; text-decoration: none; white-space: nowrap; }
.brand > span > span { color: #b6b4ce; font-weight: 350; }
.brand-mark { width: 31px; height: 31px; color: var(--accent); flex: none; }
.main-nav { display: flex; align-items: center; gap: 2px; padding: 7px; border: 1px solid var(--line); border-radius: 18px; background: #1b1d29; }
.main-nav a { min-width: 96px; min-height: 44px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 12px; color: #a5a6b9; font-size: 12px; text-decoration: none; }
.main-nav svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.main-nav a:hover, .main-nav a:focus-visible { color: var(--accent); background: #c7b6ff10; }
.main-nav a[aria-current="page"] { color: var(--accent); background: #c7b6ff0f; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 18px; white-space: nowrap; }
.support-link { color: var(--accent); font-size: 12px; font-weight: 600; text-decoration: none; }
.support-link:hover { text-decoration: underline; }
.preview-badge { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid #c7b6ff30; border-radius: 999px; background: #c7b6ff0b; color: #c1bfd2; font-size: 11px; }
.preview-badge span, .signal { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #a8e0ce; box-shadow: 0 0 10px #a8e0ce80; }

.page { width: min(100%, 1680px); margin: auto; padding: 30px 48px 80px; }
.intro { max-width: 850px; margin: 0 0 38px; }
.eyebrow { margin: 0 0 13px; color: #aaaac2; font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.intro h1 { margin: 0; font-size: clamp(42px, 5vw, 64px); font-weight: 450; letter-spacing: -.055em; line-height: 1.09; }
.intro h1 em { color: var(--accent); font-family: Georgia, 'Times New Roman', serif; font-weight: 400; }
.intro > p:last-child { max-width: 67ch; margin: 16px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.workspace { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(410px, .95fr); align-items: start; gap: 28px; }
.viewer-panel { position: relative; overflow: hidden; min-width: 0; height: min(750px, 78vh); min-height: 560px; border: 1px solid var(--line); border-radius: 28px; background: radial-gradient(ellipse at 50% 42%, #4437645c, #17162680 56%, #11141e 100%); box-shadow: inset 0 1px #ffffff08; isolation: isolate; }
.viewer-panel::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .55; pointer-events: none; background-image: radial-gradient(circle at 18% 25%, #c7b6ff8c 0 1px, transparent 1.5px), radial-gradient(circle at 72% 48%, #c7b6ff70 0 1px, transparent 1.5px), radial-gradient(circle at 80% 18%, #c7b6ff60 0 1px, transparent 1.5px); background-size: 107px 121px, 147px 179px, 233px 189px; }
.viewer-top, .viewer-bottom { position: absolute; z-index: 3; left: 20px; right: 20px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.viewer-top { top: 18px; }
.viewer-bottom { bottom: 18px; }
.model-label { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid #c7b6ff2e; border-radius: 12px; background: #171626dd; color: #d9d5e8; font-size: 11px; font-weight: 600; letter-spacing: .02em; backdrop-filter: blur(12px); }
.view-controls, .zoom-controls { display: flex; align-items: center; gap: 3px; padding: 4px; border: 1px solid #c7b6ff2b; border-radius: 13px; background: #171626e6; backdrop-filter: blur(12px); }
.view-controls button, .zoom-controls button { min-width: 40px; min-height: 36px; padding: 0 11px; border: 0; border-radius: 9px; background: transparent; color: #b8b5cd; font-size: 11px; }
.view-controls button[aria-pressed="true"] { background: #c7b6ff19; color: var(--accent); }
.zoom-controls button { font-size: 18px; }
.zoom-controls button:last-child { font-size: 19px; }
.viewer-bottom > span { max-width: 65%; padding: 9px 11px; border: 1px solid #c7b6ff22; border-radius: 10px; background: #171626d9; color: #c6c3d5; font-size: 11px; line-height: 1.4; }
.canvas-wrap { position: absolute; inset: 0; }
#body-canvas { position: relative; z-index: 1; display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#body-canvas:active { cursor: grabbing; }
.canvas-glow { pointer-events: none; position: absolute; z-index: 0; width: 45%; height: 22%; left: 27.5%; bottom: 2%; border-radius: 50%; background: #9b80d326; filter: blur(27px); }
.model-status { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max-content; max-width: 80%; padding: 15px 18px; border: 1px solid #c7b6ff40; border-radius: 13px; background: #171626f0; box-shadow: 0 12px 40px #0007; color: #e2ddf2; font-size: 13px; text-align: center; }

.explore-panel { overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: var(--panel); box-shadow: inset 0 1px #ffffff08; }
.panel-head { padding: 29px 28px 15px; }
.panel-head .eyebrow { color: var(--accent); }
.panel-head h2 { margin: 0; color: var(--foreground); font-size: 29px; font-weight: 450; letter-spacing: -.045em; line-height: 1.13; }
.panel-head p:last-child { margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.site-picker { display: flex; flex-wrap: wrap; gap: 7px; padding: 9px 28px 21px; }
.site-picker button { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 11px; border: 1px solid #c7b6ff28; border-radius: 11px; background: #c7b6ff06; color: #bebbd1; font-size: 11px; font-weight: 600; }
.site-picker button:hover, .site-picker button:focus-visible { border-color: #c7b6ff75; }
.site-picker button[aria-pressed="true"] { border-color: #c7b6ff80; background: #c7b6ff18; color: var(--accent); }
.site-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.overview-dot { background: #ded9f4; }
.brain-dot { background: #d395a3; }
.airway-dot { background: #83d6d4; }
.gut-dot { background: #edae80; }
.skin-dot { background: #b38c82; }
.liver-dot { background: #c68270; }
.kidney-dot { background: #a79ad7; }
.pancreas-dot { background: #d6b385; }
.bladder-dot { background: #80b7cf; }
.vein-dot { background: #66aad8; }
.field-label { display: block; padding: 0 28px 8px; color: #a6a3ba; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
#organism-select { display: block; width: calc(100% - 56px); min-height: 46px; margin: 0 28px 25px; padding: 10px 13px; border: 1px solid #c7b6ff35; border-radius: 11px; background: #1b1d2b; color: var(--foreground); font-size: 12px; }
.site-readout { position: relative; padding: 23px 28px 25px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(150deg, #c7b6ff0b, transparent 70%); }
.readout-top { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.readout-top span:first-child { color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.readout-line { height: 1px; width: 34px; background: var(--accent); opacity: .55; }
.site-readout h3 { margin: 0 0 9px; font-size: 25px; font-weight: 450; letter-spacing: -.05em; }
.site-readout p { margin: 0 0 12px; color: #c1bfd0; font-size: 12px; line-height: 1.65; }
.site-readout .model-limit { color: #a5a2b8; font-size: 11px; }
.site-source { display: flex; flex-wrap: wrap; gap: 10px; }
.site-source a { font-size: 11px; }
.related { padding: 23px 28px 27px; }
.related h3 { margin: 0 0 12px; font-size: 13px; font-weight: 650; }
.related-list { display: grid; gap: 8px; }
.related-card { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid #c7b6ff22; border-radius: 12px; background: #c7b6ff05; color: var(--foreground); text-align: left; }
.related-card:hover, .related-card[aria-current="true"] { border-color: #c7b6ff6b; background: #c7b6ff12; }
.related-card strong { display: block; font-size: 12px; line-height: 1.35; }
.related-card small { display: block; margin-top: 4px; color: #aaa9bf; font-size: 10px; line-height: 1.5; }
.related-card span:last-child { color: var(--accent); font-size: 17px; }

.preview-notes { display: grid; grid-template-columns: 210px minmax(0, 1fr) minmax(0, 1fr); gap: 25px; margin-top: 24px; padding: 28px 32px; border: 1px solid var(--line); border-radius: 22px; background: var(--panel); }
.preview-notes h2 { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -.04em; }
.preview-notes p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.site-footer { border-top: 1px solid var(--line); }
.footer-inner { width: min(100%, 1680px); margin: auto; padding: 26px 48px 45px; }
.body-store-link { display: block; width: 180px; margin: 0 auto 20px; }
.body-store-link img { display: block; width: 100%; height: auto; }
.footer-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px; color: #9294ab; font-size: 12px; }
.footer-row nav { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-row a { color: #b6b4ce; text-decoration: none; }
.footer-row a:hover { color: var(--accent); text-decoration: underline; }

@media (max-width: 1200px) {
  .topbar { grid-template-columns: 1fr auto; }
  .main-nav { grid-column: 1 / -1; grid-row: 2; justify-self: center; margin-bottom: 12px; }
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .viewer-panel { height: 680px; }
  .preview-notes { grid-template-columns: 1fr 1fr; }
  .preview-notes > div { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .topbar { min-height: 76px; padding: 0 18px; }
  .brand { font-size: 18px; }
  .main-nav { position: fixed; z-index: 20; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); grid-column: auto; grid-row: auto; margin: 0 auto; width: min(100% - 20px, 360px); border-radius: 18px; background: #1b1d29ed; box-shadow: 0 10px 35px #0008; backdrop-filter: blur(12px); }
  .main-nav a { min-width: 0; min-height: 54px; flex: 1; flex-direction: column; gap: 4px; padding: 5px 3px; font-size: 9px; }
  .main-nav svg { width: 20px; height: 20px; }
  .support-link { display: none; }
  .preview-badge { padding: 7px 9px; font-size: 10px; }
  .page { padding: 23px 14px 68px; }
  .intro { margin: 0 7px 24px; }
  .intro h1 { font-size: 44px; }
  .intro > p:last-child { margin-top: 13px; font-size: 13px; }
  .workspace { gap: 12px; }
  .viewer-panel { height: min(72vh, 640px); min-height: 490px; border-radius: 20px; }
  .viewer-top, .viewer-bottom { left: 10px; right: 10px; }
  .viewer-top { top: 10px; }
  .viewer-bottom { bottom: 10px; }
  .model-label { padding: 8px; font-size: 9px; }
  .view-controls button { min-width: 44px; padding: 0 6px; }
  .viewer-bottom > span { max-width: 210px; padding: 8px; font-size: 9px; }
  .zoom-controls button { min-width: 33px; padding: 0 6px; }
  .explore-panel { border-radius: 20px; }
  .panel-head { padding: 23px 20px 13px; }
  .panel-head h2 { font-size: 25px; }
  .site-picker { padding: 9px 20px 20px; }
  .field-label { padding-left: 20px; }
  #organism-select { width: calc(100% - 40px); margin-left: 20px; margin-right: 20px; }
  .site-readout, .related { padding-left: 20px; padding-right: 20px; }
  .preview-notes { grid-template-columns: 1fr; gap: 13px; padding: 22px; }
  .preview-notes > div { grid-column: auto; }
  .footer-inner { padding: 26px 20px 115px; }
}
@media (max-width: 360px) {
  .preview-badge { font-size: 9px; padding: 7px 8px; }
  .model-label { max-width: 52%; line-height: 1.35; }
  .viewer-bottom > span { max-width: 160px; }
  .site-picker button { padding: 0 8px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }