.full-atlas {
  --fa-paper: #f6f5f0;
  --fa-ink: #1c172e;
  --fa-blue: #3627dc;
  --fa-red: #f35438;
  --fa-line: #cbc7d4;
  --fa-muted: #56506a;
  --fa-board-height: clamp(25rem, 54vw, 43rem);
  isolation: isolate;
  min-width: 0;
  margin-block: .9rem .75rem;
  border: 1px solid var(--fa-line);
  background: var(--fa-paper);
  color: var(--fa-ink);
  font-family: "studiohub Text", system-ui, sans-serif;
}

#full-atlas-title:focus { outline: none; }
.full-atlas *, .full-atlas *::before, .full-atlas *::after { box-sizing: border-box; }
.full-atlas button, .full-atlas input, .full-atlas select { font: inherit; }
.full-atlas button { cursor: pointer; color: inherit; }
.full-atlas button:disabled { cursor: default; }
.full-atlas :focus-visible { outline: 2px solid var(--fa-blue); outline-offset: 3px; }
.full-atlas .fa-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.fa-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "heading search controls";
  gap: .55rem clamp(.65rem, 2vw, 1.45rem);
  align-items: center;
  position: relative;
  padding: .75rem clamp(.8rem, 2.2vw, 1.65rem);
  border-bottom: 1px solid var(--fa-line);
  z-index: 4;
}

.fa-heading { grid-area: heading; display: flex; gap: .75rem; align-items: center; white-space: nowrap; }
.fa-mark { display: block; flex: none; width: 32px; height: 32px; }
.fa-heading h3, .fa-territory-head h3, .fa-detail h3, .fa-map-name { font-family: "studiohub Display", "studiohub Text", system-ui, sans-serif; }
.fa-heading h3 { margin: 0; font-size: clamp(1.18rem, 2vw, 1.8rem); letter-spacing: -.04em; line-height: 1; }
.fa-kicker { margin: 0; color: var(--fa-blue); font-size: .76rem; font-weight: 760; letter-spacing: .025em; }

.fa-search { grid-area: search; position: relative; width: min(100%, 25rem); min-width: 0; margin: 0; }
.fa-search input { width: 100%; height: 44px; padding: 0 .85rem; border: 1px solid var(--fa-line); background: #fffefa; color: var(--fa-ink); border-radius: 2px; font-size: .84rem; }
.fa-search ul { position: absolute; left: 0; right: 0; top: calc(100% + 5px); margin: 0; padding: .25rem; max-height: min(45dvh, 24rem); overflow: auto; border: 1px solid var(--fa-line); background: #fffefa; box-shadow: 0 12px 24px #1c172e1f; list-style: none; }
.fa-search li button { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: .6rem; min-height: 44px; padding: .4rem .65rem; border: 0; background: transparent; font-size: .84rem; text-align: left; }
.fa-search li button:hover, .fa-search li button:focus-visible { background: #eeebff; }
.fa-search li button span, .fa-no-result { color: var(--fa-muted); font-size: .76rem; }
.fa-no-result { padding: .65rem; }

.fa-controls { grid-area: controls; display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.fa-controls button, .full-atlas #fa-touch { min-height: 44px; padding: 0 .7rem; border: 1px solid var(--fa-line); border-radius: 2px; background: transparent; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.fa-controls button:enabled:hover, .full-atlas #fa-touch:hover { background: #ece9fa; }
.fa-controls .fa-home { border-color: var(--fa-blue); color: #fff; background: var(--fa-blue); }
.fa-controls button.fa-home:enabled:hover { background: #2718ad; }
.fa-zoom { display: flex; align-items: center; }
.fa-zoom button { width: 34px; padding: 0; font-size: 1.05rem; }
.fa-zoom button:disabled { color: #746e85; }
.fa-zoom output { display: grid; place-items: center; width: 53px; height: 44px; border-block: 1px solid var(--fa-line); font-size: .72rem; font-variant-numeric: tabular-nums; }
#fa-links[aria-pressed="true"] { border-color: var(--fa-blue); color: var(--fa-blue); background: #ece9fa; }
.full-atlas #fa-touch { display: none; padding-inline: .52rem; }
.full-atlas #fa-touch[aria-pressed="true"] { border-color: var(--fa-blue); color: #fff; background: var(--fa-blue); }
.full-atlas #fa-touch[aria-pressed="true"]:hover { color: #fff; background: #2718ad; }

.fa-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .34rem .52rem;
  min-height: 3.05rem;
  padding: .35rem clamp(.8rem, 2.2vw, 1.65rem);
  border-bottom: 1px solid var(--fa-line);
  background: #fffefa;
  position: relative;
  z-index: 3;
}
.fa-topic-label { font-size: .76rem; font-weight: 750; }
.full-atlas #fa-topic {
  min-width: 0;
  max-width: 100%;
  min-height: 2.38rem;
  padding: .32rem .55rem;
  border: 1px solid var(--fa-line);
  border-radius: 0;
  background: var(--fa-paper);
  color: var(--fa-ink);
  font-size: .8rem;
}
.fa-filter-count { color: var(--fa-muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
.fa-legend { position: relative; margin-inline-start: auto; }
.fa-legend summary { min-height: 2.38rem; align-content: center; padding-inline: .35rem; cursor: pointer; font-size: .76rem; font-weight: 750; white-space: nowrap; }
.fa-legend summary:hover { color: var(--fa-blue); }
.fa-legend-card {
  position: absolute;
  top: calc(100% + .3rem);
  right: 0;
  width: min(19rem, calc(100vw - 2.6rem));
  padding: .9rem 1rem;
  border: 1px solid var(--fa-line);
  background: #fffefa;
  color: var(--fa-ink);
  box-shadow: 0 10px 18px #1c172e1a;
  font-size: .76rem;
}
.fa-legend-card p { margin: 0; }
.fa-topic-key { display: grid; gap: .4rem; margin-block: .7rem; list-style: none; }
.fa-topic-key li { display: flex; align-items: center; gap: .45rem; }
.fa-topic-dot { flex: none; width: .62rem; height: .62rem; border-radius: 50%; background: var(--topic); }
.fa-topic-key [data-topic="format"] .fa-topic-dot { border-radius: 0; }
.fa-legend-edge { display: flex; align-items: center; gap: .4rem; }
.fa-legend-edge i { flex: none; }

.fa-body { display: flex; min-width: 0; }
.fa-viewport {
  position: relative;
  flex: 1;
  min-width: 0;
  height: var(--fa-board-height);
  overflow: hidden;
  background: #e8e6f1 radial-gradient(#81769f3d .7px, transparent .7px) 0 0 / 14px 14px;
  user-select: none;
}
.fa-viewport.fa-touch-active { touch-action: none; }
.fa-viewport:focus-visible { outline-offset: -3px; }
.fa-viewport.fa-can-pan { cursor: grab; }
.fa-viewport.fa-dragging, .fa-viewport.fa-dragging .fa-point { cursor: grabbing; }
.fa-plane { position: absolute; top: 0; left: 0; transform-origin: top left; background: var(--fa-paper); border: 1px solid #bcb6ce; box-shadow: 0 5px 26px #1c172e18; }
.fa-map-label { position: absolute; top: 26px; left: 32px; right: 32px; display: flex; gap: 15px; justify-content: space-between; align-items: center; padding-bottom: 14px; border-bottom: 1px solid #b0a9c6; }
.fa-map-name { color: var(--fa-blue); font-size: 27px; font-weight: 750; letter-spacing: -.045em; line-height: 1; }
.fa-map-note { color: var(--fa-muted); font-size: 12px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }

.fa-territory, .fa-point { --fa-zone: #3d31ad; --fa-tint: #efedf9; }
.fa-territory[data-zone="web"], .fa-point[data-zone="web"] { --fa-zone: var(--role-web); --fa-tint: #f4f7d9; }
.fa-territory[data-zone="keynote"], .fa-point[data-zone="keynote"] { --fa-zone: var(--role-keynote); --fa-tint: #f1eaf7; }
.fa-territory[data-zone="motion"], .fa-point[data-zone="motion"] { --fa-zone: var(--role-motion); --fa-tint: #e5f0ec; }
.fa-territory[data-zone="format"], .fa-point[data-zone="format"] { --fa-zone: var(--output); --fa-tint: #f7eedb; }
.fa-territory { position: absolute; padding: 17px 20px; border: 1px solid #c7c0d1; border-top: 4px solid var(--fa-zone); background: var(--fa-tint); }
.fa-territory-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.fa-territory-head > div { flex: 1; min-width: 0; }
.fa-territory-mark { flex: none; width: 48px; height: 24px; }
.fa-territory-head h3 { margin: 0 0 5px; color: var(--fa-ink); font-size: 24px; font-weight: 740; line-height: 1; letter-spacing: -.045em; }
.fa-studio-prefix { color: var(--fa-zone); }
.fa-territory[data-zone="web"] .fa-studio-prefix { color: var(--role-web-ink); background: var(--role-web); }
.fa-territory[data-zone="web"] .fa-territory-count { color: var(--role-web-ink); }
.fa-territory[data-zone="format"] .fa-territory-count { color: var(--fa-ink); }
.fa-territory-head p { margin: 0; color: var(--fa-muted); font-size: 12px; line-height: 1.2; }
.fa-territory-count { color: var(--fa-zone); font-size: 22px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.fa-points, .fa-edges { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fa-edges .fa-edge { opacity: 0; fill: none; stroke: #4c4273; stroke-width: 1.1; stroke-dasharray: 5 3; }
.fa-edges.fa-show-all .fa-edge { opacity: .19; }
.fa-edges.fa-show-all .fa-muted-edge { opacity: .045; }
.fa-edges .fa-edge.fa-edge-related { opacity: .86; stroke: var(--fa-blue); stroke-width: 1.6; }

.fa-points .fa-point { position: absolute; display: flex; align-items: center; gap: 6px; padding: 0 7px; overflow: hidden; border: 1px solid #bcb5cc; border-radius: 0; background: #fcfbf8; color: var(--fa-ink); text-align: left; pointer-events: auto; }
.fa-dot { width: 5px; height: 5px; flex: none; border-radius: 50%; background: var(--topic, var(--fa-zone)); }
.fa-point[data-topic="platform"] .fa-dot, [data-topic="platform"] .fa-topic-dot { box-shadow: 0 0 0 1px var(--role-web-ink); }
.fa-points .fa-format { border-inline-start: 2px solid var(--output); }
.fa-format-icon { flex: none; width: 14px; height: 14px; }
.fa-point[aria-pressed="true"] .fa-format-icon { filter: brightness(0) invert(1); }
.fa-point-name { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 11px; font-weight: 690; line-height: 1.03; }
.fa-point:hover, .fa-point.fa-neighbor { border-color: var(--fa-blue); background: #fff; }
.fa-point[aria-pressed="true"] { border-color: var(--fa-blue); background: var(--fa-blue); color: #fff; }
.fa-point[aria-pressed="true"] .fa-dot { background: #fff; }
.fa-point.fa-muted-point, .fa-mini-point.fa-muted-point { opacity: .3; }
.fa-point.fa-muted-point:hover { opacity: 1; }

.fa-mini { flex: none; width: clamp(5.75rem, 12vw, 9.5rem); padding: 5px; border: 1px solid #aaa0c3; background: #fffefa; text-align: left; }
.fa-mini:hover { border-color: var(--fa-blue); }
.fa-mini span { display: block; padding: 0 1px 4px; color: var(--fa-muted); font-size: .61rem; font-weight: 720; }
.fa-mini svg { display: block; width: 100%; height: auto; background: #f5f3f9; }
.fa-mini-zone { fill: #d8d3ec; }
.fa-mini-point { fill: var(--topic, #6c618c); }
.fa-mini-window { fill: #3627dc24; stroke: var(--fa-blue); stroke-width: 13; }
.fa-mini-selection { fill: var(--fa-red); stroke: #fff; stroke-width: 6; }

.fa-detail { flex: 0 0 clamp(220px, 24vw, 325px); min-width: 0; max-height: var(--fa-board-height); padding: 1.05rem 1.15rem; overflow: auto; border-left: 1px solid var(--fa-line); background: #fffefa; }
.fa-detail-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .2rem .7rem; }
.full-atlas .fa-clear { min-height: 2.75rem; padding: .2rem 0; border: 0; background: transparent; color: var(--fa-muted); font-size: .76rem; text-decoration: underline; }
.full-atlas .fa-clear:hover { color: var(--fa-blue); }
.fa-detail h3 { margin: .28rem 0 .7rem; font-size: clamp(1.35rem, 2vw, 1.85rem); letter-spacing: -.045em; line-height: 1.04; overflow-wrap: anywhere; }
.fa-detail h3:focus-visible { outline-offset: 2px; }
.fa-summary { margin: 0 0 .65rem; color: var(--fa-muted); font-size: .84rem; line-height: 1.46; }
.fa-memberships { margin: 0 0 .7rem; font-size: .75rem; font-weight: 730; line-height: 1.42; }
.fa-detail-link { display: inline-flex; align-items: center; min-height: 40px; margin-bottom: .25rem; color: var(--fa-blue); font-size: .76rem; font-weight: 720; }
.fa-related { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--fa-line); }
.fa-related summary { min-height: 2.5rem; align-content: center; color: var(--fa-muted); font-size: .77rem; font-weight: 730; cursor: pointer; }
.fa-related summary:hover { color: var(--fa-blue); }
.fa-related ul { padding: 0; margin: 0; list-style: none; }
.fa-related button { display: block; width: 100%; min-height: 38px; padding: .3rem .35rem; border: 0; background: transparent; color: var(--fa-ink); font-size: .79rem; text-align: left; }
.fa-related button:hover { background: #ece9fa; color: var(--fa-blue); }

.fa-footer { display: flex; justify-content: space-between; align-items: center; gap: .65rem; padding: .65rem clamp(.8rem, 2.2vw, 1.65rem); border-top: 1px solid var(--fa-line); color: var(--fa-muted); font-size: .75rem; }
.fa-footer-copy { display: flex; flex-wrap: wrap; align-items: center; gap: .18rem 1rem; min-width: 0; }
.fa-footer-copy p { flex-basis: 100%; }
.fa-footer-copy a { display: inline-flex; align-items: center; gap: .3rem; min-height: 2.4rem; color: var(--fa-blue); font-weight: 730; }
.fa-help-touch { display: none; }
.fa-key { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.fa-key i, .fa-legend-edge i { display: inline-block; position: relative; width: 1rem; border-top: 1px dashed var(--fa-blue); }
.fa-key i::after, .fa-legend-edge i::after {
  content: "";
  position: absolute;
  right: 0;
  width: .27rem;
  height: .27rem;
  border-top: 1px solid var(--fa-blue);
  border-right: 1px solid var(--fa-blue);
  transform: translateY(-.17rem) rotate(45deg);
}

@media (max-width: 940px) {
  .fa-header { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "heading search" "controls controls"; }
  .fa-search { justify-self: end; }
}

@media (max-width: 820px) {
  .full-atlas { --fa-board-height: clamp(13.5rem, 62vw, 31rem); }
  .fa-body { display: block; }
  .fa-detail { max-height: none; overflow: visible; padding: .85rem; border-left: 0; border-top: 1px solid var(--fa-line); }
  .fa-detail h3 { margin: .2rem 0 .42rem; }
}

@media (max-width: 680px) {
  .fa-header { padding: .55rem .7rem; }
  .fa-heading { gap: .45rem; }
  .fa-mark { width: 24px; height: 24px; }
  .fa-search { width: 100%; }
  .full-atlas .fa-search input, .full-atlas #fa-topic { font-size: 1rem; }
  .fa-search input { padding-inline: .48rem; }
  .fa-filter-count, .fa-topic-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .fa-tools { min-height: 2.8rem; padding-inline: .7rem; }
  .fa-controls { gap: .34rem; }
  .fa-controls button { padding-inline: .48rem; }
  .fa-zoom button { width: 32px; padding: 0; }
  .fa-zoom output { width: 45px; }
  .fa-footer { padding-inline: .7rem; }
}

@media (any-pointer: coarse), (max-width: 680px) {
  .full-atlas #fa-touch { display: inline-block; }
  .full-atlas #fa-topic, .fa-legend summary { min-height: 44px; }
  .fa-help-pointer { display: none; }
  .fa-help-touch { display: inline; }
}