:root {
  color-scheme: dark;
  --bg: #05070b;
  --panel: rgba(10, 15, 24, 0.82);
  --panel-solid: #0b111b;
  --line: rgba(148, 163, 184, 0.2);
  --text: #f8fafc;
  --muted: #94a3b8;
  --cyan: #22d3ee;
  --blue: #60a5fa;
  --pink: #f472b6;
  --orange: #fb923c;
  --green: #34d399;
  --radius: 18px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; background: var(--bg); color: var(--text); }
body {
  background:
    radial-gradient(circle at 20% 0%, rgba(34,211,238,.10), transparent 35%),
    radial-gradient(circle at 85% 18%, rgba(244,114,182,.10), transparent 32%),
    #05070b;
  overflow-x: hidden;
}
button, input, select { font: inherit; }
button, select, input { color: inherit; }
button { cursor: pointer; }
a { color: #67e8f9; }
.skip-link { position: fixed; left: 1rem; top: -4rem; z-index: 100; background: white; color: black; padding: .75rem 1rem; border-radius: .5rem; }
.skip-link:focus { top: 1rem; }
.atlas-shell { width: min(1800px, 100%); margin: 0 auto; padding: clamp(14px, 2vw, 30px); }
.atlas-header { display: flex; justify-content: space-between; gap: 2rem; align-items: flex-end; margin-bottom: 20px; }
.eyebrow { margin: 0 0 8px; color: var(--cyan); font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(2.25rem, 5vw, 5.25rem); line-height: .9; letter-spacing: -.065em; max-width: 1100px; }
h1 span { color: transparent; background: linear-gradient(90deg, #fff, #67e8f9 45%, #f9a8d4); background-clip: text; -webkit-background-clip: text; }
.subtitle { max-width: 820px; color: var(--muted); font-size: clamp(.95rem, 1.3vw, 1.18rem); }
.header-status { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.status-pill { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: rgba(15,23,42,.75); color: #cbd5e1; font-size: .7rem; font-weight: 800; letter-spacing: .08em; white-space: nowrap; }
.status-partial { color: #fde68a; border-color: rgba(251,191,36,.35); background: rgba(120,53,15,.24); }
.toolbar { position: sticky; top: 10px; z-index: 20; display: grid; grid-template-columns: minmax(240px, 1.2fr) minmax(390px, 2fr) minmax(145px, .6fr) auto; gap: 12px; align-items: end; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(5, 9, 15, .82); backdrop-filter: blur(22px); box-shadow: 0 18px 50px rgba(0,0,0,.24); }
.toolbar label, .toolbar legend { color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.search-wrap { position: relative; display: grid; gap: 6px; }
input, select { width: 100%; min-height: 40px; border: 1px solid var(--line); border-radius: 10px; background: #080d15; padding: 0 12px; outline: none; }
input:focus, select:focus, button:focus-visible { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(34,211,238,.15); outline: none; }
.search-results { position: absolute; top: calc(100% + 6px); inset-inline: 0; max-height: 340px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; background: #090f19; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.search-result { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 10px 12px; border: 0; border-bottom: 1px solid rgba(148,163,184,.12); background: transparent; text-align: left; }
.search-result:hover { background: rgba(34,211,238,.08); }
.search-result small { color: var(--muted); }
.lens-control { display: flex; gap: 6px; margin: 0; padding: 0; border: 0; flex-wrap: wrap; }
.lens-control legend { width: 100%; margin-bottom: 6px; }
.lens-button, .toolbar-actions button, .trace-actions button { min-height: 40px; border: 1px solid var(--line); border-radius: 10px; background: #0a111c; padding: 0 12px; font-size: .78rem; font-weight: 750; }
.lens-button:hover, .toolbar-actions button:hover, .trace-actions button:hover { border-color: rgba(103,232,249,.55); background: rgba(34,211,238,.08); }
.lens-button.is-active { color: #061019; background: linear-gradient(135deg,#67e8f9,#a5f3fc); border-color: transparent; }
.filter-control { display: grid; gap: 6px; }
.toolbar-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 16px; min-height: min(76vh, 940px); margin-top: 16px; }
.viewport-panel, .inspector { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.viewport-panel { position: relative; min-height: 720px; background: radial-gradient(circle at 50% 45%, rgba(30,64,175,.13), transparent 38%), #04070c; }
#universe-canvas { display: block; width: 100%; height: 100%; min-height: 720px; touch-action: none; }
.loading-card { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-50%); display: grid; gap: 6px; padding: 18px 22px; border: 1px solid rgba(103,232,249,.3); border-radius: 14px; background: rgba(2,6,23,.9); text-align: center; transition: opacity .35s; }
.loading-card span { color: var(--muted); font-size: .8rem; }
[data-atlas-state="ready"] .loading-card { opacity: 0; pointer-events: none; }
[data-atlas-state="error"] .loading-card { border-color: rgba(248,113,113,.45); }
.node-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.node-label { position: absolute; transform: translate(-50%,-50%); padding: 4px 7px; border: 1px solid rgba(148,163,184,.24); border-radius: 999px; background: rgba(2,6,23,.78); color: #e2e8f0; font-size: .65rem; font-weight: 750; white-space: nowrap; opacity: .82; }
.node-label.is-selected { color: #001018; background: #67e8f9; border-color: transparent; opacity: 1; }
.hover-card { position: absolute; z-index: 12; max-width: 260px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(2,6,23,.93); box-shadow: 0 12px 40px rgba(0,0,0,.45); pointer-events: none; font-size: .78rem; }
.hover-card strong { display:block; margin-bottom:4px; }
.hover-card span { color:var(--muted); }
.map-hud { position: absolute; top: 16px; left: 16px; display: flex; gap: 18px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(2,6,23,.72); backdrop-filter: blur(12px); }
.map-hud > div { display:grid; gap:2px; }
.hud-label { color: var(--muted); font-size:.58rem; letter-spacing:.1em; font-weight:800; }
.map-hud strong { font-size:.78rem; }
.legend { position: absolute; right: 16px; top: 16px; display:grid; gap:6px; max-width: 190px; padding: 10px; border:1px solid var(--line); border-radius:12px; background:rgba(2,6,23,.72); }
.legend-item { display:flex; gap:7px; align-items:center; color:#cbd5e1; font-size:.68rem; }
.legend-dot { width:8px; height:8px; border-radius:50%; box-shadow:0 0 12px currentColor; }
.interaction-help { position:absolute; left:16px; bottom:12px; margin:0; color:rgba(203,213,225,.65); font-size:.68rem; }
.inspector { min-height: 720px; padding: 18px; overflow-y: auto; background: linear-gradient(180deg, rgba(15,23,42,.88), rgba(8,13,21,.94)); }
.inspector h2 { margin: 0; font-size: 1.42rem; line-height: 1.08; letter-spacing: -.035em; }
.inspector h3 { margin-top: 24px; font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; color:#cbd5e1; }
.inspector-empty > p:not(.eyebrow) { color:var(--muted); line-height:1.65; }
.inspector-heading { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
#clear-selection { width:34px; height:34px; flex:0 0 auto; border:1px solid var(--line); border-radius:50%; background:#080d15; font-size:1.2rem; }
#node-id { display:block; margin:12px 0; color:#67e8f9; font-size:.72rem; overflow-wrap:anywhere; }
.node-title-ko { min-height:1em; margin:.35rem 0 0; color:var(--muted); }
.node-description { color:#cbd5e1; line-height:1.6; font-size:.88rem; }
.node-badges { display:flex; flex-wrap:wrap; gap:6px; margin:14px 0; }
.node-badge { padding:4px 7px; border-radius:999px; border:1px solid var(--line); background:rgba(15,23,42,.8); font-size:.64rem; font-weight:800; }
.node-badge.verified { color:#6ee7b7; border-color:rgba(52,211,153,.3); }
.node-badge.partial { color:#fde68a; border-color:rgba(251,191,36,.3); }
.score-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.score-card { padding:10px; border:1px solid var(--line); border-radius:10px; background:rgba(2,6,23,.45); }
.score-card span { display:block; color:var(--muted); font-size:.62rem; line-height:1.2; }
.score-card strong { display:block; margin-top:5px; font-size:1.2rem; }
.trace-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:14px 0; }
.trace-actions button:last-child { grid-column:1/-1; }
.neighbor-list { display:grid; gap:6px; }
.neighbor-button { width:100%; display:grid; grid-template-columns:1fr auto; gap:8px; padding:9px 10px; border:1px solid var(--line); border-radius:9px; background:rgba(2,6,23,.4); text-align:left; }
.neighbor-button:hover { border-color:rgba(103,232,249,.5); }
.neighbor-button small { color:var(--muted); }
.market-baseline { display:grid; gap:7px; margin-top:18px; }
.market-row { display:grid; grid-template-columns:1fr auto; gap:10px; padding:9px 10px; border:1px solid var(--line); border-radius:9px; background:rgba(2,6,23,.35); }
.market-row span { color:var(--muted); font-size:.7rem; }
.market-row strong { font-size:.84rem; }
.method-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:16px 0; }
.method-strip > div { padding:16px; border:1px solid var(--line); border-radius:14px; background:var(--panel); }
.method-strip strong { display:block; font-size:clamp(1.1rem,2vw,1.6rem); }
.method-strip span { display:block; margin-top:4px; color:var(--muted); font-size:.75rem; }
.data-table-panel { margin-top:16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); }
.data-table-panel summary { cursor:pointer; padding:16px 18px; font-weight:800; }
.table-tools { display:flex; gap:10px; align-items:end; padding:0 18px 14px; }
.table-tools label { color:var(--muted); font-size:.72rem; }
.table-tools input { max-width:420px; }
.table-tools a { margin-left:auto; }
.table-scroll { overflow:auto; max-height:560px; border-top:1px solid var(--line); }
table { width:100%; border-collapse:collapse; font-size:.76rem; }
th, td { padding:9px 12px; border-bottom:1px solid rgba(148,163,184,.12); text-align:left; vertical-align:top; }
th { position:sticky; top:0; background:#0b111b; color:#cbd5e1; }
td:first-child { color:#67e8f9; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
footer { display:flex; justify-content:space-between; gap:20px; align-items:center; margin-top:20px; padding:18px 2px 30px; color:var(--muted); font-size:.76rem; }
footer p { max-width:920px; }
.noscript-card { margin:20px; padding:16px; background:#111827; border:1px solid #334155; }
@media (max-width: 1180px) {
  .toolbar { grid-template-columns:1fr 1.5fr; }
  .toolbar-actions { justify-content:flex-start; }
  .workspace { grid-template-columns:1fr; }
  .inspector { min-height:auto; max-height:none; }
  .viewport-panel, #universe-canvas { min-height:650px; }
}
@media (max-width: 720px) {
  .atlas-shell { padding:10px; }
  .atlas-header { display:block; }
  .header-status { justify-content:flex-start; margin-top:12px; }
  .toolbar { position:relative; top:auto; grid-template-columns:1fr; }
  .lens-control { display:grid; grid-template-columns:repeat(3,1fr); }
  .lens-control legend { grid-column:1/-1; }
  .lens-button { padding:0 8px; }
  .viewport-panel, #universe-canvas { min-height:520px; }
  .map-hud { top:10px; left:10px; gap:10px; }
  .legend { display:none; }
  .method-strip { grid-template-columns:1fr 1fr; }
  .score-grid { grid-template-columns:1fr; }
  .table-tools, footer { display:grid; align-items:stretch; }
  .table-tools a { margin-left:0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}