:root, [data-theme="dark"] {
  --bg: #050505;
  --bg-subtle: #111;
  --text: #ccc;
  --text-bright: #fff;
  --text-secondary: #888;
  --text-dim: #777;
  --text-muted: #444;
  --tooltip-bg: rgba(10, 10, 10, 0.92);
  --tooltip-border: #333;
  --overlay-bg: rgba(5, 5, 5, 0.85);
}

[data-theme="light"] {
  --bg: #f5f5f0;
  --bg-subtle: #eee;
  --text: #333;
  --text-bright: #111;
  --text-secondary: #555;
  --text-dim: #666;
  --text-muted: #999;
  --tooltip-bg: rgba(245, 245, 240, 0.92);
  --tooltip-border: #ccc;
  --overlay-bg: rgba(245, 245, 240, 0.85);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: monospace;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
}

/* the three stacked render layers; only the top one takes events */
#bg-canvas, #gl-canvas, #canvas {
  position: fixed;
  top: 0;
  left: 0;
}
#bg-canvas, #gl-canvas {
  pointer-events: none;
  cursor: default;
}

canvas:active {
  cursor: grabbing;
}

/* header overlay */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  z-index: 10;
  pointer-events: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header > * {
  pointer-events: auto;
}

.header h1 {
  font-size: 12px;
  font-weight: normal;
}

.header h1 a.title {
  color: var(--text-secondary);
  text-decoration: none;
}

.header h1 a.title:hover {
  color: var(--text-bright);
}

.header .dim {
  color: var(--text-dim);
}

.header .nav {
  --ctl: 36px;
  font-size: 12px;
  display: flex;
  gap: 4px;
  align-items: center;
}

.header .nav a {
  color: var(--text-secondary);
  text-decoration: none;
  min-height: var(--ctl);
  padding: 0 10px;
  display: flex;
  align-items: center;
}

.header .nav a:hover {
  color: var(--text-bright);
}

.theme-toggle {
  cursor: pointer;
  color: var(--text-dim);
  user-select: none;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  font: inherit;
  padding: 0;
}

.theme-toggle:hover {
  color: var(--text-secondary);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--tooltip-border);
  outline-offset: 2px;
}

/* tooltip */
.tooltip {
  display: none;
  position: fixed;
  z-index: 20;
  background: var(--tooltip-bg);
  border: 1px solid var(--tooltip-border);
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.5;
  max-width: 320px;
  pointer-events: none;
  backdrop-filter: blur(8px);
}

.tooltip .title {
  color: var(--text-bright);
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tooltip .meta {
  color: var(--text-secondary);
  font-size: 11px;
}

.tooltip .platform-badge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 2px;
  margin-top: 2px;
}

/* loading overlay */
.loading-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 30;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: opacity 0.4s;
}

.loading-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.loading-overlay pub-loading {
  color: var(--text-dim);
  font-size: 13px;
}

/* bottom bar: legend + stats stacked */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 16px 10px;
}

.legend {
  pointer-events: auto;
  font-size: 10px;
  color: var(--text-dim);
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  justify-content: center;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
  padding: 6px 8px;
  border-radius: 4px;
  transition: opacity 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.legend-item:hover {
  background: rgba(128, 128, 128, 0.15);
}

.legend-item.dimmed {
  opacity: 0.3;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.legend-logo {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  flex-shrink: 0;
}

.stats {
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
}

/* search */
.search-form {
  display: flex;
  align-items: center;
  position: relative; /* anchor for typeahead dropdown */
}

#search-input {
  background: var(--bg-subtle);
  border: 1px solid var(--tooltip-border);
  color: var(--text);
  font-family: monospace;
  font-size: 11px;
  padding: 3px 8px;
  width: 140px;
  outline: none;
  transition: width 0.2s, border-color 0.2s;
}

#search-input:focus {
  width: 200px;
  border-color: var(--text-dim);
}

#search-input::placeholder {
  color: var(--text-muted);
}

.search-status {
  font-size: 10px;
  color: var(--text-dim);
  margin-left: 6px;
  white-space: nowrap;
}

/* mobile */
@media (max-width: 600px) {
  .header { padding: 8px 10px; }
  .header h1 { font-size: 11px; }
  .header .nav { --ctl: 44px; gap: 2px; }
  #search-input { width: 80px; font-size: 10px; padding: 4px 6px; }
  #search-input:focus { width: 120px; }
  .bottom-bar { padding: 4px 8px 6px; gap: 2px; }
  .legend { gap: 0; }
  .legend-item { padding: 5px 6px; font-size: 9px; }
  .legend-dot { width: 6px; height: 6px; }
  .stats { font-size: 9px; }
  .tooltip { max-width: 260px; font-size: 11px; }
  .tooltip .meta { font-size: 10px; }
  .tooltip .platform-badge { font-size: 9px; }
}

#canvas {
  touch-action: none;
}
#node-detail {
  position: fixed;
  z-index: 30;
  width: 320px;
  max-width: calc(100vw - 24px);
  padding: 20px;
  box-sizing: border-box;
  border: 1px solid var(--tooltip-border);
  border-radius: 16px;
  background: var(--tooltip-bg);
  color: var(--text);
  backdrop-filter: blur(16px);
}
#node-detail[hidden] {
  display: none;
}
/* the document leads; where it sits and which topic it is in are metadata */
.node-detail-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-right: 28px;
}
.node-detail-head > div {
  flex: 1;
  min-width: 0;
}
#node-detail-title {
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-bright);
  overflow-wrap: anywhere;
}
#node-detail-meta, #node-detail-cluster {
  margin-top: 6px;
  color: var(--text-secondary);
  font: inherit;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
#node-detail-cluster {
  display: block;
  margin-top: 2px;
  padding: 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
#node-detail-cluster:hover {
  color: var(--text-bright);
  text-decoration: underline;
  text-underline-offset: 3px;
}
#node-detail-cluster[hidden], #node-detail-cover[hidden] {
  display: none;
}
#node-detail-cover {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 6px;
  object-fit: cover;
}
#node-detail-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin-top: 16px;
  padding: 0 14px;
  border: 1px solid var(--tooltip-border);
  border-radius: 18px;
  background: var(--bg-subtle);
  color: var(--text-bright);
  font-size: 12px;
  text-decoration: none;
}
#node-detail-link:hover {
  border-color: var(--text-secondary);
}
#node-detail-close {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 24px;
  cursor: pointer;
}
@media (max-width: 599px) {
  #node-detail {
    left: 12px;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    width: auto;
    max-height: 42dvh;
    overflow-y: auto;
  }
}

#cluster-summary-button { font:inherit; color:var(--text-secondary); background:none; border:0; cursor:pointer; min-height:44px; padding:0 5px; }
#cluster-summary { position:fixed; z-index:35; top:72px; right:16px; width:360px; max-width:calc(100vw - 32px); max-height:calc(100dvh - 100px); overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; padding:0 18px 18px; background:var(--tooltip-bg); color:var(--text); border:1px solid var(--tooltip-border); border-radius:16px; backdrop-filter:blur(16px); }
#cluster-summary[hidden], #cluster-summary [hidden] { display:none; }
#cluster-summary:focus { outline:none; }
.cluster-summary-header { --ctl:36px; position:sticky; top:0; z-index:1; background:var(--bg); margin:0 -18px; padding:6px 6px 6px 18px; display:flex; justify-content:space-between; align-items:center; gap:8px; border-bottom:1px solid var(--tooltip-border); font-size:12px; color:var(--text-secondary); }
#cluster-summary-heading { line-height:var(--ctl); }
#cluster-summary-back, #cluster-summary-close { font:inherit; height:var(--ctl); background:none; border:0; border-radius:8px; color:var(--text-secondary); cursor:pointer; }
/* negative margin puts the label, not the hit area, on the panel's text edge */
#cluster-summary-back { padding:0 10px; margin-left:-10px; }
#cluster-summary-close { width:var(--ctl); font-size:20px; line-height:1; }
#cluster-summary-back:hover, #cluster-summary-close:hover { background:var(--bg-subtle); color:var(--text-bright); }
#cluster-summary-back:focus-visible, #cluster-summary-close:focus-visible { outline:1px solid var(--tooltip-border); outline-offset:-1px; }
#cluster-summary-title { font:600 16px/1.4 monospace; margin:16px 0 8px; color:var(--text-bright); }
#cluster-summary-text { font:15px/1.65 monospace; margin-bottom:18px; }
#cluster-summary-status { padding:12px 0; line-height:1.5; }
#cluster-summary-evidence { border:1px solid var(--tooltip-border); border-radius:10px; }
#cluster-summary summary { cursor:pointer; list-style:none; }
#cluster-summary summary::-webkit-details-marker { display:none; }
#cluster-summary summary::after { content:'›'; color:var(--text-secondary); transition:transform .15s; }
#cluster-summary details[open] > summary::after { transform:rotate(90deg); }
#cluster-summary-evidence > summary { display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:12px; padding:10px 12px; border-radius:10px; font-size:12px; }
#cluster-summary-evidence > summary::after { grid-column:2; grid-row:1 / span 2; font-size:18px; }
#cluster-summary-evidence > summary:hover { background:var(--bg-subtle); }
#cluster-summary-evidence > summary:hover::after { color:var(--text-bright); }
#cluster-summary-coverage { font-size:11px; color:var(--text-secondary); padding-top:3px; }
.cluster-summary-method { font-size:11px; line-height:1.6; color:var(--text-secondary); margin:2px 12px 10px; }
#cluster-summary-sources { list-style:none; padding:0 12px; }
#cluster-summary-sources li { padding:10px 0; border-top:1px solid var(--tooltip-border); overflow-wrap:anywhere; line-height:1.5; }
#cluster-summary-sources a, #cluster-documents a { color:var(--text); text-decoration:none; }
#cluster-summary-sources a:hover, #cluster-documents a:hover { color:var(--text-bright); text-decoration:underline; text-underline-offset:3px; }
#cluster-summary-sources a { display:block; }
#cluster-summary-sources details { color:var(--text-secondary); font-size:11px; }
#cluster-summary-sources summary { display:inline-flex; align-items:center; gap:6px; padding:6px 0 0; }
#cluster-summary-sources summary:hover { color:var(--text-bright); }
#cluster-summary-sources p { white-space:pre-wrap; line-height:1.6; padding-top:8px; font-size:12px; }
@media(max-width:599px) { #cluster-summary { top:auto; bottom:0; left:0; right:0; width:100%; max-width:none; max-height:55dvh; padding-bottom:max(18px,env(safe-area-inset-bottom)); border-radius:16px 16px 0 0; } .cluster-summary-header { --ctl:44px; padding:4px 4px 4px 18px; } #cluster-documents li { --ctl:44px; padding:0; } #cluster-documents a { padding:12px 0; } #cluster-summary-sources summary { min-height:36px; } #cluster-summary-button { min-height:44px; padding:0 16px; } #cluster-summary-text { font-size:14px; } }

#cluster-summary-button { pointer-events:auto; min-height:36px; padding:0 14px; font-size:12px; border:1px solid var(--tooltip-border); border-radius:24px; background:var(--tooltip-bg); color:var(--text-bright); box-shadow:0 2px 12px #0003; }
#cluster-summary-retry, #cluster-nearby-more, #cluster-documents-more { font:inherit; color:var(--text); background:var(--bg-subtle); border:1px solid var(--tooltip-border); border-radius:8px; padding:10px 12px; min-height:44px; cursor:pointer; }
#cluster-nearby, #cluster-documents { list-style:none; }
#cluster-nearby button { width:100%; min-height:64px; padding:12px 0; text-align:left; background:none; border:0; border-bottom:1px solid var(--tooltip-border); color:var(--text-bright); font:inherit; cursor:pointer; }
#cluster-nearby button span, #cluster-nearby button small { display:block; }
#cluster-nearby button small { color:var(--text-secondary); margin-top:6px; }
#cluster-nearby button:hover { background:var(--bg-subtle); }
.cluster-help, #cluster-nearby-empty { margin:14px 0 6px; line-height:1.6; color:var(--text-secondary); }
#cluster-document-count { font:inherit; font-size:12px; margin:22px 0 8px; color:var(--text-secondary); }
#cluster-documents li { --ctl:32px; display:flex; align-items:flex-start; gap:8px; padding:4px 0; border-top:1px solid var(--tooltip-border); }
#cluster-documents a { flex:1; min-width:0; line-height:1.5; overflow-wrap:anywhere; padding:6px 0; }
#cluster-documents img { flex:none; width:36px; height:36px; margin-top:2px; border-radius:4px; object-fit:cover; }
#cluster-documents button { flex:none; display:grid; place-items:center; width:var(--ctl); height:var(--ctl); margin-right:-8px; background:none; color:var(--text-dim); border:0; border-radius:8px; cursor:pointer; }
#cluster-documents button:hover { background:var(--bg-subtle); color:var(--text-bright); }
#cluster-documents-more, #cluster-nearby-more { margin-top:12px; }

#finder-trigger {
  display:flex; align-items:center; gap:8px; min-height:var(--ctl); padding:0 14px; margin-right:4px;
  border:1px solid var(--tooltip-border); border-radius:24px; background:var(--tooltip-bg);
  color:var(--text-bright); font:inherit; cursor:pointer; backdrop-filter:blur(16px);
}
#finder-trigger > span {font-size:18px;line-height:1;color:#95cfdb}
#finder-trigger kbd {font:11px monospace;color:var(--text-secondary);padding-left:8px}
#finder-trigger:disabled {opacity:.5;cursor:wait}
#atlas-finder {
  --finder-accent:#95cfdb; --finder-hover:#232d38;
  position:fixed; inset:9vh auto auto 50%; transform:translateX(-50%); margin:0;
  width:min(680px,calc(100vw - 40px)); height:min(560px,82dvh); max-height:82dvh;
  max-width:none; border:1px solid #414956; border-radius:20px;
  background:#15191f; color:#eef3f7; padding:0; box-shadow:0 32px 100px #0008;
  font:14px/1.45 monospace;
}
#atlas-finder[open] {display:flex;flex-direction:column}
#atlas-finder::backdrop {background:#07101d88;backdrop-filter:blur(7px)}
#atlas-finder button {font:inherit;color:inherit;cursor:pointer}
#atlas-finder button:focus-visible,#finder-trigger:focus-visible {outline:2px solid var(--finder-accent,#95cfdb);outline-offset:-3px}
#finder-close {border:0;background:none;min-width:44px;min-height:44px;font-size:27px!important;border-radius:12px}
#finder-close:hover {background:var(--finder-hover)}
#finder-trail {display:flex;align-items:center;gap:8px;margin:4px 26px 12px;font-size:12px;color:#a6b0bb;min-height:24px}
#finder-trail button {border:0;background:none;text-decoration:underline;text-underline-offset:3px}
#finder-trail span:last-child {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.finder-input-wrap {margin:0 24px;display:flex;align-items:center;gap:12px;padding:0 14px;border:1px solid #526170;background:#0d1219;border-radius:12px;flex-shrink:0}
.finder-input-wrap:focus-within {border-color:var(--finder-accent);box-shadow:0 0 0 3px #95cfdb19}
.finder-input-wrap > span {font-size:28px;color:var(--finder-accent)}
#atlas-finder #search-input,#atlas-finder #search-input:focus {width:100%;min-width:0;height:54px;padding:0;border:0;outline:0;background:transparent;box-shadow:none;font:400 16px monospace;color:inherit}
#atlas-finder #search-input::placeholder {color:#94a0af}
#finder-filters {display:flex;gap:4px;margin:14px 24px 10px;flex-shrink:0;overflow-x:auto;padding-bottom:5px}
#finder-filters[hidden] {display:none}
#finder-filters button {border:1px solid transparent;border-radius:8px;background:none;padding:7px 11px;font-size:12px;min-height:36px;color:#a6b0bb;white-space:nowrap}
#finder-filters button[aria-pressed=true] {background:#293744;color:#d4f4fa;border-color:#425868}
#finder-results {overflow-y:auto;overscroll-behavior:contain;min-height:0;flex:1;padding:0 14px 18px;scrollbar-width:thin}
#finder-results section {margin-top:12px}
#finder-results h3 {font-size:12px;font-weight:600;color:#a6b0bb;margin:0 12px 6px}
#finder-results ul {list-style:none}
#finder-results li {display:flex;align-items:stretch;border-radius:10px;margin:2px 0}
#finder-results li:focus-within,#finder-results li:hover {background:var(--finder-hover)}
.finder-result {display:flex;align-items:center;gap:12px;padding:12px;min-height:66px;flex:1;min-width:0;border:0;background:none;text-align:left;border-radius:10px}
.finder-symbol {font-size:26px;line-height:1;width:28px;flex-shrink:0;text-align:center;color:#b9abed}
.finder-symbol[data-kind=publication] {color:#edc68f}
.finder-symbol[data-kind=document] {color:#95cfdb;font-size:23px}
.finder-copy {min-width:0;flex:1}
.finder-copy strong {display:block;font-size:14px;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.finder-copy small {display:block;font-size:11px;color:#a6b0bb;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.finder-result-meta {font-size:11px;color:#a6b0bb;white-space:nowrap}
.finder-drill {border:0;background:none;border-left:1px solid #343d4833;flex-shrink:0;width:44px;border-radius:0 10px 10px 0;font-size:25px!important;color:#a6b0bb!important}
.finder-more {border:0;background:none;margin:4px 12px 6px;padding:5px 0;font-size:12px!important;color:var(--finder-accent)!important}
.finder-empty {padding:28px 14px;color:#a6b0bb;max-width:45ch}
.finder-footer {padding:12px 26px 16px;border-top:1px solid #343d48;flex-shrink:0;font-size:11px;color:#a6b0bb}
#finder-remote {background:none;border:0;display:block;padding:4px 0 12px;text-align:left;color:var(--finder-accent)!important;font-size:13px!important}
#finder-remote[hidden] {display:none}
.finder-keys {display:block;margin-top:4px;font-size:10px;opacity:.7}
[data-theme=light] #atlas-finder {--finder-accent:#176779;--finder-hover:#edf2f7;background:#fff;color:#17212b;border-color:#b8c4ce}
[data-theme=light] .finder-input-wrap {background:#f7fafc;border-color:#9caebb}
[data-theme=light] #finder-filters button[aria-pressed=true] {background:#e1f0f4;color:#174b58;border-color:#aacbd3}
[data-theme=light] #atlas-finder :is(small,h3,.finder-result-meta,.finder-heading p,#finder-trail,.finder-footer,.finder-empty) {color:#596b7a}
[data-theme=light] #finder-filters button {color:#596b7a}
[data-theme=light] .finder-drill {color:#596b7a!important}
[data-theme=light] #atlas-finder #search-input::placeholder {color:#596b7a}
[data-theme=light] .finder-footer {border-color:#d2dce4}
[data-theme=light] .finder-symbol {color:#765bb0}
[data-theme=light] .finder-symbol[data-kind=publication] {color:#92611c}
[data-theme=light] .finder-symbol[data-kind=document] {color:#176779}
@media(max-width:600px) {
  #finder-trigger {margin-right:0}
  #finder-trigger kbd {display:none}
  .header .nav>a {display:none}
  #atlas-finder {inset:0;transform:none;width:100%;height:100dvh;max-height:100dvh;border:0;border-radius:0;padding-top:env(safe-area-inset-top)}
  #finder-trail {margin-left:18px;margin-right:18px}
  .finder-input-wrap {margin:0 16px}
  #finder-filters {margin-left:16px;margin-right:16px}
  #finder-results {padding-left:6px;padding-right:6px}
  .finder-result {gap:8px}
  .finder-result-meta {display:none}
  .finder-copy strong {white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .finder-footer {padding:12px 18px max(16px,env(safe-area-inset-bottom))}
  .finder-keys {display:none}
}

.finder-sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#atlas-finder {border-radius:12px;border-color:#343d48;box-shadow:0 20px 70px #0006}
#atlas-finder::backdrop {background:#07101d66;backdrop-filter:blur(4px)}
.finder-input-wrap {margin:12px 16px 0;padding:0 0 0 10px;border:0;border-bottom:1px solid #343d48;background:transparent;border-radius:0;gap:10px}
.finder-input-wrap:focus-within {box-shadow:none;border-color:#667681}
.finder-input-wrap > span {font-size:22px;color:#a6b0bb}
#atlas-finder #search-input,#atlas-finder #search-input:focus {height:48px}
#finder-close {font-size:22px!important;border-radius:6px;color:#a6b0bb}
#finder-trail {margin:8px 26px 0;flex-shrink:0}
#finder-trail[hidden] {display:none}
#finder-filters {margin:4px 16px 0;gap:0;padding:0;min-height:44px}
#finder-filters button {min-height:44px;padding:6px 10px;border:0;border-radius:0;font-size:12px}
#finder-filters button[aria-pressed=true] {background:none;color:#eef3f7;box-shadow:inset 0 -1px #95cfdb}
.finder-result {min-height:58px;padding:9px 12px;gap:10px}
.finder-symbol {font-size:19px;width:22px;opacity:.8}
.finder-symbol[data-kind=document] {font-size:18px}
.finder-copy strong {font-weight:500}
.finder-drill {border-left:0;font-size:20px!important}
.finder-footer {padding:6px 26px 10px}
#finder-remote {min-height:36px;padding:6px 0;font-size:12px!important}
.finder-keys {display:none}
[data-theme=light] .finder-input-wrap {background:transparent;border-color:#d2dce4}
[data-theme=light] #finder-filters button[aria-pressed=true] {background:none;color:#17212b;border:0;box-shadow:inset 0 -1px #176779}
@media(max-width:600px) {
  #atlas-finder {border-radius:0;padding-top:0}
  .finder-input-wrap {margin:4px 12px 0}
  #finder-filters {margin:0 12px}
  #finder-trail {margin:6px 22px 0}
  .finder-footer {padding:0 18px max(0px,env(safe-area-inset-bottom))}
  #finder-remote {min-height:44px}
  #finder-status[data-state=ready] {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  #finder-status[data-state=error],#finder-status[data-state=loading] {padding:6px 0}
  .finder-footer:has(#finder-remote[hidden]) {border:0}
  #atlas-finder.finder-compact #finder-results {padding-bottom:4px}
  #atlas-finder.finder-compact .finder-result {min-height:52px;padding-top:6px;padding-bottom:6px}
  #atlas-finder.finder-compact #finder-results section {margin-top:6px}
  #atlas-finder.finder-compact #finder-results h3 {margin-bottom:2px}
}

.loading-overlay.hidden pub-loading { display:none; }
.loading-overlay p { max-width:32rem; padding:0 24px; text-align:center; line-height:1.6; }
.loading-overlay button { font:inherit; padding:12px 20px; border:1px solid var(--text-dim); border-radius:24px; background:var(--bg); color:var(--text); cursor:pointer; }
[data-theme=light] #finder-trigger > span {color:#176779}
#atlas-finder #search-input::-webkit-search-cancel-button {display:none}