.aotoile {
  --aot-ink: #0f172a;
  --aot-muted: #64748b;
  --aot-line: #e2e8f0;
  --aot-comp: #4f46e5;
  --aot-beat: #dc2626;
  position: relative;
  width: 100%;
  height: clamp(430px, 36vw, 540px);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.4;
  color: var(--aot-ink);
}

.aot-canvas {
  position: absolute;
  inset: 0;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: contain;
  background-image: radial-gradient(#dde3ec 1px, transparent 1.3px);
  background-size: 26px 26px;
}

.aot-canvas.grabbing { cursor: grabbing; }

.aot-world { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }

.aot-svg {
  position: absolute; left: -2000px; top: -2000px;
  width: 4000px; height: 4000px;

  max-width: none;
  overflow: visible; pointer-events: none;
}
.aot-edge { fill: none; stroke: #c3ccd9; stroke-width: 1.6; transition: opacity .25s ease; }

.aot-node { position: absolute; transform: translate(-50%, -50%); touch-action: none; }
.aot-node.dragging { z-index: 60; }

.aot-hub {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: default; width: 170px; text-align: center;
}

.aot-hub .aot-dot {
  width: 34px; height: 34px; background: var(--aot-ink);
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(15, 23, 42, .22);
}

.aot-hub .aot-lbl { font-size: 12px; font-weight: 700; }

.aot-comp {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  cursor: pointer; width: 150px; text-align: center;
}

.aot-dot {
  border-radius: 50%;
  background: var(--aot-comp);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #c7d2fe;
  transition: transform .18s ease, box-shadow .18s ease;
}

.aot-comp:hover .aot-dot { transform: scale(1.12); }
.aot-comp.beat .aot-dot { background: var(--aot-beat); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #fecaca; }
.aot-comp.followed .aot-dot { background: #fff; box-shadow: 0 0 0 2.5px var(--aot-ink); }
.aot-comp.is-open .aot-dot { box-shadow: 0 0 0 2px #fff, 0 0 0 5px #a5b4fc; }

.aot-lbl {
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; color: #334155; max-width: 150px;
}

.aot-star { color: #f59e0b; }

.aot-chips {
  position: absolute; top: 12px; left: 12px; z-index: 70; pointer-events: none;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  max-width: calc(100% - 160px);
}

.aot-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: #334155;
  background: #fff; border: 1px solid var(--aot-line);
  border-radius: 999px; padding: 5px 12px;
}

.aot-chip b { font-size: 13px; color: var(--aot-ink); }

.aot-tools { position: absolute; top: 12px; right: 12px; z-index: 70; display: flex; gap: 6px; }

.aot-btn {
  appearance: none; border: 1px solid var(--aot-line); background: #fff;
  color: #334155; border-radius: 999px; width: 30px; height: 30px;
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .15s ease, color .15s ease;
}

.aot-btn.wide { width: auto; padding: 0 14px; font-size: 12px; }
.aot-btn:hover { border-color: #94a3b8; color: var(--aot-ink); }

.aot-legend {
  position: absolute; left: 12px; bottom: 12px; z-index: 70; pointer-events: none;
  display: flex; gap: 14px; align-items: center;
  background: rgba(255, 255, 255, .92); border: 1px solid var(--aot-line);
  border-radius: 999px; padding: 6px 14px; font-size: 11px; color: var(--aot-muted);
}

.aot-legend span { display: inline-flex; align-items: center; gap: 5px; }
.aot-legend .d { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

.aot-hint {
  position: absolute; right: 12px; bottom: 12px; z-index: 70; pointer-events: none;
  font-size: 11px; color: var(--aot-muted);
  background: rgba(255, 255, 255, .92); border: 1px solid var(--aot-line);
  border-radius: 999px; padding: 6px 14px; max-width: 46%;
}

.aot-card {
  position: absolute; top: 12px; right: 12px; bottom: 12px; z-index: 80;
  width: min(272px, 46%);
  background: #fff; border: 1px solid var(--aot-line); border-radius: 14px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .13);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateX(10px); pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}

.aot-card.open { opacity: 1; transform: none; pointer-events: auto; }

.aot-card-h { padding: 13px 14px 11px; border-bottom: 1px solid var(--aot-line); }
.aot-card-k { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #94a3b8; }
.aot-card-t { font-size: 14px; font-weight: 700; margin-top: 3px; overflow-wrap: anywhere; }

.aot-card-close {
  position: absolute; top: 10px; right: 10px;
  appearance: none; border: 0; background: none; color: #94a3b8;
  font: inherit; font-size: 16px; line-height: 1; cursor: pointer; padding: 4px;
}

.aot-card-close:hover { color: var(--aot-ink); }

.aot-kv { display: flex; gap: 14px; padding: 12px 14px; border-bottom: 1px solid var(--aot-line); }
.aot-kv div { min-width: 0; }
.aot-kv b { display: block; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.aot-kv span { font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; }

.aot-card-b { padding: 11px 14px; overflow-y: auto; }
.aot-sec { font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #94a3b8; margin: 0 0 7px; }
.aot-sec + .aot-sec, .aot-row + .aot-sec { margin-top: 14px; }

.aot-row {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 7px 0; border-top: 1px solid #f1f5f9; font-size: 12px;
}

.aot-row:first-of-type { border-top: 0; }
.aot-row i { font-style: normal; color: var(--aot-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.aot-why { font-size: 11.5px; color: var(--aot-muted); padding: 10px 14px; border-bottom: 1px solid var(--aot-line); }

@media (max-width: 860px) {
  .aotoile { height: clamp(360px, 78vw, 460px); }
  .aot-card { width: min(260px, 68%); }
  .aot-hint { display: none; }
  .aot-legend { font-size: 10px; padding: 5px 10px; gap: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .aot-dot, .aot-card, .aot-edge { transition: none; }
}