:root {
  --ink: oklch(16% 0.025 176);
  --ink-raised: oklch(20% 0.025 176);
  --ink-soft: oklch(27% 0.024 176);
  --paper: oklch(90% 0.038 82);
  --paper-muted: oklch(76% 0.05 76);
  --gold: oklch(78% 0.12 82);
  --gold-bright: oklch(89% 0.13 92);
  --red: oklch(56% 0.128 27);
  --red-light: oklch(68% 0.105 29);
  --leaf: oklch(68% 0.108 145);
  --mist: oklch(76% 0.038 178);
  --text: oklch(93% 0.02 88);
  --text-quiet: oklch(74% 0.03 89);
  --font-display: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
  --font-body: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body { min-width: 320px; color: var(--text); background: var(--ink); font-family: var(--font-body); line-height: 1.5; }
button { font: inherit; }
button:focus-visible, .map-viewport:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: 3px; }

.skip-link { position: fixed; z-index: 100; top: -5rem; left: 1rem; padding: 0.7rem 1rem; color: var(--ink); background: var(--gold-bright); transition: top 180ms var(--ease-out); }
.skip-link:focus { top: 1rem; }

.atlas-app { position: relative; height: 100dvh; overflow: hidden; background: radial-gradient(circle at 50% 0%, oklch(25% 0.04 170 / 0.9), transparent 41rem), var(--ink); }
.atlas-app::before { position: absolute; inset: 0; pointer-events: none; content: ""; opacity: 0.34; background-image: linear-gradient(oklch(87% 0.04 80 / 0.035) 1px, transparent 1px), linear-gradient(90deg, oklch(87% 0.04 80 / 0.03) 1px, transparent 1px); background-size: 2rem 2rem; mask-image: linear-gradient(to bottom, black, transparent 83%); }

.atlas-header { position: absolute; z-index: 20; top: 0; left: 0; display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 1rem; width: 100%; padding: max(1rem, env(safe-area-inset-top)) clamp(1rem, 3vw, 2.5rem) 0; pointer-events: none; }
.brand-lockup { pointer-events: auto; }
.brand-kicker { margin: 0 0 0.3rem; color: var(--gold); font-size: 0.52rem; font-weight: 700; letter-spacing: 0.15em; line-height: 1.25; }
h1 { margin: 0; color: var(--text); font-family: var(--font-display); font-size: clamp(1.3rem, 2.25vw, 2rem); font-weight: 700; letter-spacing: -0.07em; line-height: 1.16; }
h1 span { display: inline; margin-left: 0.2em; color: var(--gold); }
.map-legend { display: none; flex-wrap: wrap; justify-content: flex-end; gap: 0.35rem 0.8rem; max-width: 19rem; padding-top: 0.25rem; color: var(--text-quiet); font-size: 0.63rem; }
.map-legend span { display: inline-flex; align-items: center; gap: 0.3rem; }.map-legend b, .mobile-legend b { font-weight: inherit; }
.legend-line { display: block; width: 1.25rem; border-top: 2px solid; }
.legend-line.blood { border-color: var(--gold); }.legend-line.union { border-color: var(--red-light); }.legend-line.desire { border-color: var(--leaf); border-top-style: dashed; }.legend-line.bond { border-color: var(--mist); border-top-style: dashed; }.legend-line.tension { border-color: var(--red); border-top-style: dashed; }
.legend-toggle { display: none; pointer-events: auto; }
.map-instruction { position: absolute; z-index: 10; bottom: max(1.1rem, env(safe-area-inset-bottom)); left: max(1rem, env(safe-area-inset-left)); margin: 0; color: var(--text-quiet); font-size: 0.58rem; letter-spacing: 0.09em; }

.map-world { position: absolute; inset: 0; overflow: hidden; }
.map-viewport { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.map-viewport.is-dragging { cursor: grabbing; }
.map-canvas { --node-scale: 1; --node-hover-scale: 1.04; --node-active-scale: 1.1; position: absolute; top: 0; left: 0; width: 1360px; height: 920px; transform-origin: 0 0; will-change: transform; }
.map-edges { position: absolute; inset: 0; width: 1360px; height: 920px; overflow: visible; }
.edge { fill: none; stroke-linecap: round; stroke-width: 2.15; opacity: 0.56; transition: opacity 280ms var(--ease-out), stroke-width 280ms var(--ease-out); }
.edge.blood { stroke: var(--gold); }.edge.union { stroke: var(--red-light); }.edge.desire { stroke: var(--leaf); stroke-dasharray: 6 6; }.edge.bond { stroke: var(--mist); stroke-dasharray: 10 6; }.edge.tension { stroke: var(--red); stroke-dasharray: 6 6; }
.edge.is-muted { opacity: 0.075; }.edge.is-active { opacity: 1; stroke-width: 4; animation: live-line 2.5s var(--ease-out) infinite alternate; }

.map-node { position: absolute; z-index: 2; width: 104px; padding: 0; border: 0; color: var(--text); background: transparent; text-align: center; transform: translate(-50%, -50%) scale(var(--node-scale)); transform-origin: center; transition: opacity 280ms var(--ease-out), filter 280ms var(--ease-out); user-select: none; -webkit-user-select: none; }
.map-node:hover { transform: translate(-50%, -50%) scale(var(--node-hover-scale)); }.map-node.is-muted { opacity: 0.2; filter: saturate(0.35); }.map-node.is-active { z-index: 4; transform: translate(-50%, -50%) scale(var(--node-active-scale)); }
.node-portrait { position: relative; display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto; overflow: hidden; border: 1px solid oklch(92% 0.02 86 / 0.46); background: var(--ink-soft); box-shadow: 0 0 0 5px oklch(16% 0.025 176 / 0.75); }
.map-node.is-active .node-portrait { border: 3px solid var(--gold-bright); box-shadow: 0 0 0 6px oklch(16% 0.025 176 / 0.92), 0 0 2rem oklch(78% 0.12 82 / 0.32); }
.node-portrait img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.82) contrast(1.04); -webkit-user-drag: none; }
.portrait-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: var(--gold); background: linear-gradient(135deg, oklch(22% 0.038 172), oklch(15% 0.025 176)); font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; }
.portrait-placeholder::after { position: absolute; inset: 5px; border: 1px solid oklch(82% 0.1 83 / 0.25); content: ""; }
.node-name { display: block; width: 100%; margin: 0.42rem 0 0; color: var(--text); font-family: var(--font-body); font-size: 0.64rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.42; text-shadow: 0 1px 0 var(--ink); }
.node-generation { display: block; margin-top: 0.16rem; color: var(--text-quiet); font-size: 0.48rem; font-weight: 500; letter-spacing: 0.11em; line-height: 1.3; }

.map-tools { position: absolute; z-index: 10; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); display: grid; overflow: hidden; border: 1px solid oklch(92% 0.02 86 / 0.25); background: oklch(15% 0.024 176 / 0.87); box-shadow: 0 0.5rem 2rem oklch(10% 0.02 180 / 0.36); backdrop-filter: blur(12px); }
.map-tools button { width: 38px; height: 34px; border: 0; border-bottom: 1px solid oklch(92% 0.02 86 / 0.16); color: var(--text); background: transparent; font-size: 1rem; transition: color 160ms var(--ease-out), background 160ms var(--ease-out); }.map-tools button:last-child { border-bottom: 0; font-size: 1.15rem; }.map-tools button:hover { color: var(--ink); background: var(--gold); }
.mobile-legend { display: none; }
.person-sheet { position: absolute; z-index: 30; right: 0.75rem; bottom: 0.75rem; left: 0.75rem; display: grid; grid-template-columns: 4.35rem 1fr auto; gap: 0.7rem; align-items: start; max-height: min(42dvh, 24rem); padding: 0.72rem; border: 1px solid oklch(92% 0.02 86 / 0.3); color: var(--text); background: oklch(18% 0.027 176 / 0.95); box-shadow: 0 1rem 4rem oklch(10% 0.02 180 / 0.54); backdrop-filter: blur(18px); opacity: 0; overflow-y: auto; pointer-events: none; transform: translateY(calc(100% + 1rem)); transition: transform 380ms var(--ease-out), opacity 220ms var(--ease-out); }
.person-sheet.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.sheet-portrait { position: relative; width: 4.35rem; height: 4.35rem; overflow: hidden; background: var(--ink-soft); }.sheet-portrait img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }.sheet-portrait .portrait-placeholder { font-size: 1.65rem; }
.sheet-meta { display: grid; min-width: 0; }.sheet-meta p { margin: 0; }.sheet-name { margin: 0 !important; font-family: var(--font-display); font-size: clamp(1.08rem, 2.7vw, 1.4rem); font-weight: 700; letter-spacing: -0.055em; line-height: 1.22; }.sheet-summary { margin-top: 0.22rem !important; color: var(--text); font-size: clamp(0.74rem, 1.3vw, 0.82rem); font-weight: 400; line-height: 1.62; }.sheet-close { display: grid; place-items: center; width: 1.85rem; height: 1.85rem; border: 1px solid oklch(92% 0.02 86 / 0.24); border-radius: 50%; color: var(--text); background: transparent; font-size: 1.05rem; }.sheet-close:hover { color: var(--ink); background: var(--gold); }
.sheet-relations { grid-column: 1 / -1; display: flex; gap: 0.3rem; overflow-x: auto; padding-top: 0.05rem; scrollbar-width: none; }.sheet-relation { flex: 0 0 auto; padding: 0.27rem 0.46rem; border: 1px solid oklch(92% 0.02 86 / 0.22); color: var(--text-quiet); background: transparent; font-size: 0.58rem; }.sheet-relation:hover { color: var(--ink); background: var(--gold); }

@keyframes live-line { from { stroke-dashoffset: 18; } to { stroke-dashoffset: 0; } }
@media (max-width: 759px) {
  .atlas-header { gap: 0.5rem; padding: max(0.7rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) 0 max(0.75rem, env(safe-area-inset-left)); }
  .brand-kicker { margin-bottom: 0.18rem; font-size: 0.45rem; letter-spacing: 0.12em; }
  h1 { font-size: clamp(1rem, 5.8vw, 1.35rem); letter-spacing: -0.06em; }

  .legend-toggle { display: inline-grid; place-items: center; min-width: 4.5rem; min-height: 2.75rem; padding: 0.45rem 0.55rem; border: 1px solid oklch(92% 0.02 86 / 0.28); color: var(--text); background: oklch(15% 0.024 176 / 0.82); box-shadow: 0 0.5rem 1.5rem oklch(10% 0.02 180 / 0.2); font-size: 0.62rem; letter-spacing: 0.03em; }
  .legend-toggle[aria-expanded="true"] { color: var(--ink); background: var(--gold); }
  .mobile-legend { position: absolute; z-index: 28; top: max(4.35rem, calc(env(safe-area-inset-top) + 3.7rem)); right: max(0.75rem, env(safe-area-inset-right)); display: grid; gap: 0.38rem; width: min(12.5rem, calc(100vw - 1.5rem)); padding: 0.75rem; border: 1px solid oklch(92% 0.02 86 / 0.28); color: var(--text-quiet); background: oklch(18% 0.027 176 / 0.96); box-shadow: 0 1rem 3rem oklch(10% 0.02 180 / 0.48); backdrop-filter: blur(16px); font-size: 0.64rem; opacity: 0; pointer-events: none; transform: translateY(-0.55rem); transition: opacity 180ms var(--ease-out), transform 240ms var(--ease-out); }
  .mobile-legend.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .mobile-legend p { margin: 0 0 0.12rem; color: var(--text); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.03em; }
  .mobile-legend span { display: inline-flex; align-items: center; gap: 0.45rem; }
  .mobile-legend .legend-line { width: 1.8rem; }

  .map-node { width: 84px; }
  .node-portrait { width: 58px; height: 58px; box-shadow: 0 0 0 4px oklch(16% 0.025 176 / 0.75); }
  .map-node.is-active .node-portrait { border-width: 2px; box-shadow: 0 0 0 5px oklch(16% 0.025 176 / 0.92), 0 0 1.5rem oklch(78% 0.12 82 / 0.28); }
  .node-name { margin-top: 0.32rem; font-size: 0.55rem; line-height: 1.35; }
  .node-generation { margin-top: 0.12rem; font-size: 0.43rem; letter-spacing: 0.09em; }
  .map-tools { right: max(0.75rem, env(safe-area-inset-right)); bottom: max(0.75rem, env(safe-area-inset-bottom)); }
  .map-tools button { width: 44px; height: 44px; }
  .map-instruction { bottom: max(0.9rem, env(safe-area-inset-bottom)); left: max(0.75rem, env(safe-area-inset-left)); font-size: 0.5rem; letter-spacing: 0.06em; }
  .person-sheet { right: 0.5rem; bottom: 0.5rem; left: 0.5rem; grid-template-columns: 3.5rem 1fr auto; gap: 0.58rem; max-height: min(42dvh, 22rem); padding: 0.6rem; }
  .sheet-portrait { width: 3.5rem; height: 3.5rem; }
  .sheet-portrait .portrait-placeholder { font-size: 1.35rem; }
  .sheet-name { font-size: 1rem; line-height: 1.24; }
  .sheet-summary { margin-top: 0.16rem !important; font-size: 0.71rem; line-height: 1.56; }
  .sheet-close { width: 2.5rem; height: 2.5rem; }
  .sheet-relations { gap: 0.25rem; }
  .sheet-relation { padding: 0.24rem 0.38rem; font-size: 0.54rem; }
}

@media (min-width: 760px) {
  .atlas-header { grid-template-columns: 1fr auto; }
  .map-legend { display: flex; }
  .person-sheet { right: 50%; bottom: 1.2rem; left: auto; width: min(39rem, calc(100vw - 4rem)); transform: translate(50%, calc(100% + 1.5rem)); }
  .person-sheet.is-open { transform: translate(50%, 0); }
  .map-tools { right: 1.5rem; bottom: 1.5rem; }
  .map-instruction { bottom: 1.5rem; left: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }