@import url('../studio-heading.css');
:root {
  color-scheme: light;
  --bg: #ffffff;
  --panel: #ffffff;
  --panel-2: #f2f2f2;
  --line: #e5e5e5;
  --text: #0f0f0f;
  --muted: #606060;
  --accent: #229ed9;
  --accent-soft: #e5f4fb;
  --admin: #2da47a;
  --green: var(--accent);
  --blue: #606060;
  --yellow: var(--accent);
  --motion: #d99a00;
  --danger: #cc0000;
  --graph: #ffffff;
  --graph-edge: #b6b6b6;
  --graph-selected: #0f0f0f;
  --graph-internal-avatar: #e5f4fb;
  --graph-external-avatar: #f2f2f2;
  --graph-avatar-text: #0f0f0f;
  --graph-label-stroke: rgba(255,255,255,.94);
  --relation-text: #ffffff;
  --tooltip: rgba(255,255,255,.98);
  --radius: 10px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f0f0f;
  --panel: #0f0f0f;
  --panel-2: #1f1f21;
  --line: #303030;
  --text: #f1f1f1;
  --muted: #aaa;
  --accent: #229ed9;
  --accent-soft: rgba(34,158,217,.18);
  --admin: #43d3aa;
  --green: var(--accent);
  --blue: #aaa;
  --yellow: var(--accent);
  --motion: #ffd166;
  --danger: #ff6b6b;
  --graph: #0f0f0f;
  --graph-edge: #555;
  --graph-selected: #ffffff;
  --graph-internal-avatar: #1f1f21;
  --graph-external-avatar: #272727;
  --graph-avatar-text: #f1f1f1;
  --graph-label-stroke: rgba(8,11,16,.92);
  --relation-text: #ffffff;
  --tooltip: rgba(15,15,15,.96);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 "NeoSansPro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, input, select {
  font: inherit;
}

.layout {
  display: grid;
  grid-template-columns: 288px minmax(0, 1fr) 340px;
  height: 100vh;
}

.panel {
  overflow: auto;
  border-color: var(--line);
  background: var(--panel);
}

.controls {
  border-right: 1px solid var(--line);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
}

.details {
  border-left: 1px solid var(--line);
  padding: 18px;
}

h1, h2, h3, p { margin: 0; }
h1 { font-size: 20px; margin-bottom: 6px; }
h2 { font-size: 17px; margin-bottom: 8px; }
h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
#status {
  color: var(--muted);
  font-weight: 400;
}

a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

.field, .check {
  display: grid;
  gap: 7px;
  margin-top: 14px;
  color: var(--muted);
}

.check {
  grid-template-columns: 20px 1fr;
  align-items: center;
  color: var(--text);
}

.check:has(input:disabled) {
  color: var(--muted);
  opacity: .72;
}

.check input:disabled {
  border-color: var(--line);
  background: var(--panel-2);
  opacity: .55;
  cursor: not-allowed;
}

input, select, button {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
}

input, select { min-height: 36px; padding: 7px 9px; width: 100%; }
input[type="checkbox"] {
  width: 16px;
  min-height: 16px;
  padding: 0;
}
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  padding: 0;
  --range-progress: 0%;
  height: 36px;
  background: transparent;
  cursor: pointer;
}
input[type="range"]:disabled {
  cursor: default;
  opacity: .65;
}
input[type="range"]:disabled::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--muted) 0 var(--range-progress), var(--line) var(--range-progress) 100%);
}
input[type="range"]:disabled::-webkit-slider-thumb {
  border-color: var(--muted);
  background: var(--muted);
}
input[type="range"]:disabled::-moz-range-progress { background: var(--muted); }
input[type="range"]:disabled::-moz-range-thumb {
  border-color: var(--muted);
  background: var(--muted);
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--green) 0 var(--range-progress), var(--line) var(--range-progress) 100%);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border-radius: 999px;
  border: 2px solid var(--green);
  background: var(--green);
}
input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: var(--line);
}
input[type="range"]::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--green);
}
input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid var(--green);
  background: var(--green);
}
button { min-height: 36px; padding: 7px 10px; cursor: pointer; }
button:hover { border-color: var(--accent); }

.search-box {
  position: relative;
  display: block;
}
.search-box input { padding-right: 42px; }
.search-clear {
  position: absolute;
  right: 3px;
  top: 2px;
  display: none;
  width: 34px;
  min-height: 32px;
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: 0;
  font-size: 22px;
  line-height: 1;
}
.search-box.has-value .search-clear { display: block; }

.external-box, .filter-box {
  margin-top: 14px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255,255,255,.02);
}
summary {
  cursor: pointer;
  font-weight: 700;
}
.warning {
  margin-top: 8px;
  color: var(--danger);
  font-size: 12px;
}
.mobile-only-note {
  display: none;
  margin-top: 8px;
  color: var(--danger);
  font-size: 12px;
}

.range-field {
  display: grid;
  grid-template-columns: 1fr 68px;
  gap: 8px;
}

.filter-actions, .actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
.actions { grid-template-columns: 1fr; }

.category-item {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: start;
  gap: 6px;
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.24;
  min-height: 28px;
}
.category-item input { margin-top: 1px; }
.category-item span { padding-top: 1px; }

.legend {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}
.legend div {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}
.dot {
  display: inline-grid;
  place-items: center;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
}
.dot.internal { border: 2px solid var(--green); background: transparent; }
.dot.external { border: 2px solid var(--blue); background: transparent; }
.dot.relation { background: var(--yellow); color: var(--relation-text); }
.data-note, .mode-summary {
  margin-top: 16px;
  color: var(--muted);
  font-size: 12px;
}

.mode-summary {
  display: none;
}

.graph-wrap {
  position: relative;
  min-width: 0;
  background: var(--graph);
}

#graph-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}
#graph-canvas.is-panning {
  cursor: grabbing;
}

#graph-canvas.is-hidden,
#graph-3d[hidden] {
  display: none;
}

#graph-3d-options[hidden] {
  display: none;
}

#graph-3d {
  width: 100%;
  height: 100%;
  cursor: grab;
}

#graph-3d canvas {
  display: block;
}

.graph-3d-loading {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0;
  pointer-events: none;
  background: var(--graph);
}

.graph-3d-loading[hidden] {
  display: none;
}

.graph-tools {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  display: flex;
  gap: 8px;
}
.graph-tools button {
  width: 38px;
  min-height: 38px;
  padding: 0;
  border-color: var(--line);
  background: var(--tooltip);
  box-shadow: none;
}
.graph-tools button:hover {
  border-color: var(--accent);
}

.graph-tools button.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.timeline-control {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 6;
  display: grid;
  grid-template-columns: 38px auto minmax(160px, 360px) 112px;
  gap: 10px;
  align-items: center;
  width: min(620px, calc(100% - 36px));
  padding: 10px 12px;
  transform: translateX(-50%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--tooltip);
  box-shadow: 0 12px 36px rgba(0,0,0,.34);
}

.timeline-control[hidden] {
  display: none;
}

.timeline-control button {
  width: 38px;
  min-height: 34px;
  padding: 0;
}

.timeline-speeds {
  display: inline-flex;
  gap: 4px;
}

.timeline-speeds button {
  width: 34px;
  min-height: 30px;
  padding: 0;
  border-color: var(--line);
  color: var(--muted);
  font-size: 11px;
}

.timeline-speeds button[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text);
}

@media (max-width: 760px) {
  .timeline-control {
    grid-template-columns: 36px 1fr 82px;
  }
  .timeline-speeds {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: center;
  }
}

.timeline-control input {
  height: 30px;
}

.timeline-control span {
  color: var(--muted);
  font-size: 12px;
  text-align: right;
  white-space: nowrap;
}

#tooltip {
  position: absolute;
  z-index: 10;
  max-width: 260px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--tooltip);
  pointer-events: none;
  color: var(--text);
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
}
#tooltip strong,
#tooltip span {
  display: block;
}
#tooltip strong {
  margin-bottom: 4px;
}
#tooltip span {
  color: var(--muted);
  line-height: 1.35;
}

.details-header {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 30px;
  gap: 12px;
  align-items: center;
}
.details-header:has(.details-avatar-link[hidden]) {
  grid-template-columns: minmax(0, 1fr) 30px;
}
.details-header:has(.details-avatar-link[hidden]) .details-avatar-link {
  display: none;
}
.details-avatar-link img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 3px solid var(--green);
  object-fit: cover;
}
.details-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  justify-self: end;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 20px;
  line-height: 0;
  padding: 0;
  overflow: visible;
  cursor: pointer;
}
.details-close:hover {
  border-color: var(--green);
  color: var(--text);
}
.details-close[hidden] {
  display: none;
}
#details-desc {
  margin-top: 12px;
  color: var(--muted);
}
dl {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px 12px;
  margin: 18px 0 0;
}
dt { color: var(--muted); }
dd { margin: 0; color: var(--text); }

.section-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
  align-items: center;
}
#videos-count { color: var(--muted); font-size: 12px; }
#video-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
}
#video-list li {
  margin: 8px 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-2);
  overflow: hidden;
}
.example-video {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.example-video img {
  display: block;
  width: min(100%, 168px);
  aspect-ratio: 16 / 9;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  border-radius: 4px;
  background: var(--panel-2);
}
.example-direction,
.example-source-note {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.example-video a {
  display: block;
  overflow-wrap: anywhere;
  line-height: 1.25;
}
.example-thumb-placeholder {
  width: min(100%, 168px);
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  background: var(--panel-2);
}
.relation-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  cursor: pointer;
}
.relation-details .relation-row {
  list-style: none;
}
.relation-details .relation-row::-webkit-details-marker {
  display: none;
}
.relation-details .relation-row span:first-child::before {
  content: "▸ ";
  color: var(--muted);
}
.relation-details[open] .relation-row span:first-child::before {
  content: "▾ ";
}
.relation-examples {
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
}
.relation-example-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
#video-list .relation-example-list li {
  margin: 8px 0 0;
  padding: 8px;
  background: var(--panel-2);
}
.badge {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  min-height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--yellow);
  color: #1a1600;
  font-weight: 700;
}
.relation-controls {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.direction-toggle-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.toggle-pill {
  display: block;
  cursor: pointer;
}
.toggle-pill input { display: none; }
.toggle-pill span {
  display: grid;
  place-items: center;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  background: var(--panel-2);
}
.toggle-pill input:checked + span {
  border-color: var(--green);
  background: var(--accent-soft);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--accent-soft);
}

.collab-legal {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}
.collab-legal summary { font-weight: 400; }
.collab-legal p { margin-top: 8px; line-height: 1.35; }
.legal-links { display: grid; gap: 4px; margin-top: 10px; }
.legal-links a { color: var(--muted); text-decoration: none; }
.legal-links a:hover { color: var(--text); text-decoration: underline; }
.mobile-page-title { display: none; }
.filters-backdrop,
.mobile-filter-head,
.mobile-graph-toolbar,
.graph-reflow { display: none; }

@media (max-width: 900px) {
  body { overflow: auto; }
  .layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(420px, 70vh) auto;
    height: auto;
    min-height: 100vh;
  }
  .details {
    order: 1;
    border: 0;
    padding: 16px;
  }
  .mobile-page-title {
    display: block;
    margin: 0 0 12px;
    font-size: 20px;
  }
  .graph-wrap {
    order: 2;
    margin: 0 12px;
    min-height: 420px;
    border: 1px solid var(--line);
  }
  .controls {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 30;
    width: min(88vw, 360px);
    height: 100dvh;
    padding: 0 16px 20px;
    border: 0;
    border-left: 1px solid var(--line);
    box-shadow: -10px 0 28px rgba(0,0,0,.18);
    transform: translateX(105%);
    transition: transform .18s ease;
  }
  .controls.is-open { transform: translateX(0); }
  .filters-backdrop {
    position: fixed;
    inset: 0;
    z-index: 29;
    width: 100%;
    min-height: 100dvh;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(0,0,0,.35);
  }
  .filters-backdrop.is-open { display: block; }
  .mobile-filter-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 -16px 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--panel);
  }
  .mobile-filter-head h2 { margin: 0; font-size: 16px; }
  .mobile-filter-head button {
    width: 36px;
    min-height: 36px;
    padding: 0;
    font-size: 24px;
    line-height: 1;
  }
  .mobile-graph-toolbar {
    display: flex;
    gap: 8px;
    margin-top: 14px;
  }
  .collab-legal { margin-bottom: 12px; }
  .mobile-graph-toolbar .search-box { flex: 1; }
  .mobile-graph-toolbar input { min-height: 40px; }
  .mobile-graph-toolbar button {
    min-height: 40px;
    padding: 7px 12px;
    white-space: nowrap;
  }
  .graph-tools { top: 10px; right: 10px; gap: 6px; }
  .graph-tools button {
    width: 44px;
    min-height: 44px;
    font-size: 15px;
  }
  #fit-tight-overlay { width: 48px; }
  .controls .actions #reflow { display: none; }
  .graph-reflow {
    display: block;
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 5;
    min-height: 40px;
    padding: 7px 12px;
  }
  .mobile-only-note { display: block; }
}

.theme-recommendation {
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
}
:root[data-theme="dark"] .theme-recommendation {
  display: none;
}
/* Studio composition: unchanged graph engine and control IDs. */
:root{--bg:#f5f6f8;--panel:#fff;--panel-2:#eef0f5;--accent:#2859f6;--accent-soft:#e8edff;--radius:14px;--line:#e0e2e8;--graph:#f5f6f8}:root[data-theme=dark]{--bg:#101114;--panel:#1b1c21;--panel-2:#252730;--accent:#6688ff;--accent-soft:#282e47;--line:#303137;--graph:#101114}
body{font-family:'Segoe UI',system-ui,sans-serif}.layout{grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:auto minmax(0,1fr);gap:16px;padding:20px;height:100dvh}.studio-collab-bar{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:24px;padding-bottom:4px}.studio-collab-bar h1{font-size:30px;line-height:1.15;letter-spacing:-.045em}.studio-collab-bar header{min-width:0}.studio-collab-bar #status,.studio-collab-bar #filter-summary{font-size:12px}.studio-collab-bar .mobile-graph-toolbar{display:flex;margin:0;gap:8px;flex:1;max-width:520px}.studio-collab-bar .search-box{flex:1;min-width:0}.studio-collab-bar input{min-height:48px;width:100%}.studio-collab-bar #filters-open{padding:0 20px;min-height:48px}.graph-wrap{grid-row:2;grid-column:1;order:initial;margin:0;min-height:0;border:1px solid var(--line);border-radius:20px;overflow:hidden}.details{grid-row:2;grid-column:2;order:initial;border:1px solid var(--line);border-radius:20px;padding:24px}.details-header h2{font-size:22px;letter-spacing:-.035em;line-height:1.2}.details p{font-size:13px;line-height:1.7}.mobile-page-title{display:none}.graph-tools{top:16px;right:16px;padding:6px;border:1px solid var(--line);border-radius:16px;background:var(--panel);gap:4px}.graph-tools button{width:44px;min-height:44px;border-radius:10px;border:0}.controls{position:fixed;top:0;right:0;z-index:30;width:min(100vw,440px);height:100dvh;padding:0 24px 24px;border:0;border-left:1px solid var(--line);transform:translateX(105%);transition:transform 200ms cubic-bezier(.2,.8,.2,1)}.controls.is-open{transform:translateX(0)}.filters-backdrop{position:fixed;inset:0;z-index:29;width:100%;min-height:100dvh;padding:0;border:0;border-radius:0;background:#0008}.filters-backdrop.is-open{display:block}.mobile-filter-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;margin:0 -24px 16px;padding:20px 24px;border-bottom:1px solid var(--line);background:var(--panel)}.mobile-filter-head h2{font-size:24px}.mobile-filter-head button{height:44px;width:44px;font-size:24px}.controls .field,.controls .check{margin-top:20px}.controls details{border-radius:14px;padding:14px}.controls button{min-height:40px;border-radius:10px}.controls input:not([type=checkbox]):not([type=range]){min-height:40px}.controls :is(summary,label){font-size:14px}button:focus-visible,input:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:900px){body{overflow:auto}.layout{grid-template-columns:1fr;grid-template-rows:auto minmax(420px,65dvh) auto;height:auto;padding:16px;gap:16px}.studio-collab-bar{flex-direction:column;align-items:stretch;gap:16px}.studio-collab-bar .mobile-graph-toolbar{max-width:none}.studio-collab-bar h1{font-size:28px}.graph-wrap{grid-column:1;grid-row:2;min-height:420px}.details{grid-column:1;grid-row:3;padding:20px}.graph-tools{top:10px;right:10px;gap:2px}.graph-tools button{width:38px;min-height:44px}.controls{width:min(100vw,440px)}}
@media(prefers-reduced-motion:reduce){.controls{transition:none}}
@font-face{font-family:NeoSansPro;src:url('/fonts/NeoSansPro-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
body,button,input,select{font-family:NeoSansPro,system-ui,sans-serif}
:root{--accent:#229ED9;--accent-soft:#e6f3fb}:root[data-theme=dark]{--accent:#229ED9;--accent-soft:#163144}
.layout{grid-template-columns:248px minmax(0,1fr) 260px;padding:16px;gap:14px}
.controls,.controls.is-open{position:relative;inset:auto;transform:none;width:100%;height:100%;grid-column:1;grid-row:2;padding:0 12px 16px;border:1px solid var(--line);border-radius:12px;overflow-y:auto;visibility:visible;display:block}
.graph-wrap{grid-column:2}.details{grid-column:3;padding:18px}
#filters-open,#filters-close,.filters-backdrop{display:none!important}
.mobile-filter-head{margin:0 -12px 10px;padding:14px 12px}.mobile-filter-head h2{font-size:19px}
.controls .field,.controls .check{margin-top:10px}.controls details{padding:10px}.controls :is(label,summary){font-size:13px}.controls label{border-radius:6px;padding:4px}.controls label:hover{background:var(--accent-soft)}.controls button{min-height:32px}.controls :is(.category-item,.category-row){margin:1px 0;padding:4px}
@media(max-width:1000px){.layout{grid-template-columns:232px minmax(0,1fr);grid-template-rows:auto 650px auto;height:auto}.controls{grid-row:2/4}.details{grid-column:2;grid-row:3}.graph-wrap{grid-row:2}}
@media(max-width:760px){.layout{grid-template-columns:1fr;grid-template-rows:auto auto 500px auto}.controls{grid-column:1;grid-row:2;max-height:340px}.graph-wrap{grid-column:1;grid-row:3}.details{grid-column:1;grid-row:4}}
.collab-legal{position:sticky;bottom:-16px;background:var(--panel);padding:10px 0;margin:10px 0 0;border-top:1px solid var(--line);z-index:4}.collab-legal .legal-links{gap:6px}.collab-legal a{font-size:11px}.collab-legal details[open]{max-height:100px;overflow:auto}
.controls,.controls.is-open{display:flex;flex-direction:column;overflow:hidden}.controls>.mobile-filter-head{flex-shrink:0}.studio-filter-scroll{overflow:auto;min-height:0;flex:1;scrollbar-width:thin}.controls>.collab-legal{position:static;flex-shrink:0;margin-top:8px;padding-top:10px}.controls>.collab-legal .legal-links{display:flex;flex-direction:column;gap:5px}.controls>.collab-legal summary{font-size:11px}
.controls .mobile-filter-head,.controls>h2,.studio-filter-scroll>.field:has(#search),#categories-none{display:none!important}
.controls,.controls.is-open{padding-top:14px}.controls details.filter-box{border:0;padding:0;border-radius:0;background:transparent}.controls .filter-actions{margin:6px 0 0}.controls #categories-all{display:flex;align-items:center;gap:6px;width:100%;min-height:28px;padding:3px 4px;background:transparent;border:0;border-radius:6px;font-size:13px;text-align:left;font-weight:400}.controls #categories-all:hover{background:var(--accent-soft)}.studio-all-check{height:14px;width:14px;border:1px solid var(--accent);border-radius:3px;display:inline-grid;place-items:center;flex-shrink:0}#categories-all[aria-pressed=true] .studio-all-check{background:var(--accent);color:white}#categories-all[aria-pressed=true] .studio-all-check:after{content:'✓';font-size:11px}.controls #category-list label{min-height:28px;padding:3px 4px;margin:0;font-size:13px}.controls :is(button,label){max-width:100%;white-space:normal;overflow-wrap:anywhere}.controls #category-list{gap:0}.controls .collab-legal{margin-top:auto}.controls :is(details,input,button){border-radius:8px}.controls details{background:transparent}
.studio-collab-bar{gap:20px;padding:0;min-height:60px;flex-direction:row;align-items:center}.studio-collab-bar h1{font-size:25px;font-weight:500;margin:0 0 4px;letter-spacing:normal}.studio-collab-bar header{flex:1}.studio-collab-bar .mobile-graph-toolbar{flex:1;max-width:420px}.studio-collab-bar input{min-height:38px}.studio-collab-bar #status{display:inline-block;font-size:11px;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:4px 7px}.studio-collab-bar #filter-summary:empty{display:none}.layout{grid-template-columns:264px minmax(0,1fr) 250px;gap:12px;padding:10px 12px}.controls{border:0;border-right:1px solid var(--line);border-radius:0!important}
@media(max-width:1000px){.layout{grid-template-columns:248px minmax(0,1fr)}}
@media(max-width:760px){.layout{grid-template-columns:1fr}.studio-collab-bar{gap:10px;align-items:center}.studio-collab-bar h1{font-size:20px}.studio-collab-bar .mobile-graph-toolbar{min-width:120px}.studio-collab-bar input{font-size:12px}.controls,.controls.is-open{position:sticky;top:0;height:240px;max-height:240px;z-index:15;background:var(--panel)}.controls>.collab-legal .legal-links{flex-direction:row;flex-wrap:wrap;gap:4px 8px}.controls .collab-legal{padding:6px 0}.studio-collab-bar #status{font-size:10px}}
.controls .filter-actions{display:block}.controls #categories-all{width:100%}
@media(max-width:1000px){.controls,.controls.is-open{position:sticky;top:0;align-self:start;height:calc(100dvh - 20px);max-height:calc(100dvh - 20px)}}
@media(max-width:760px){.controls,.controls.is-open{height:220px;max-height:min(220px,calc(100dvh - 20px))}}
/* Shared SciTopus controls */
.studio-status-source{display:none!important}.studio-graph-badges{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}.studio-graph-badges>span{font-size:11px;padding:4px 7px;border:1px solid var(--line);background:var(--panel);border-radius:6px}.studio-collab-bar{justify-content:flex-start;gap:24px}.studio-collab-bar header{flex:0 1 auto}.studio-collab-bar .mobile-graph-toolbar{flex:0 1 340px;margin:0}.studio-collab-bar #filter-summary{margin:4px 0 0;font-size:11px}.graph-tools{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}.graph-tools button{background:var(--panel);border:1px solid var(--line)}.controls #categories-all,.controls #category-list label{font-size:12px;gap:4px;min-height:28px;padding:3px 4px;line-height:1}.controls #category-list input[type=checkbox]{appearance:none;width:14px;height:14px;min-width:14px;margin:0;border:1px solid var(--line);border-radius:3px;display:inline-grid;place-items:center;background:transparent}.controls #category-list input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}.controls #category-list input[type=checkbox]:checked:after{content:'✓';color:white;font-size:11px;line-height:1}.controls #category-list input[type=checkbox]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.studio-all-check{border-color:var(--line)}#categories-all[aria-pressed=true] .studio-all-check{border-color:var(--accent)}
@media(max-width:760px){.studio-collab-bar{gap:12px;flex-wrap:wrap}.studio-collab-bar .mobile-graph-toolbar{flex:1 1 160px}.studio-graph-badges{gap:4px}.studio-graph-badges>span{font-size:10px}}
.controls #categories-all,.controls #category-list label{font-size:13px}
/* Revision 6: one toolbar and one filter-row language. */
:root{--panel:#fff;--line:#dde2e9;--bg:#f5f6f8;--text:#17202c;--muted:#657181}:root[data-theme=dark]{--panel:#1b1c21;--line:#30323a;--bg:#101114;--text:#f2f3f7;--muted:#9d9fae}.layout{grid-template-columns:284px minmax(0,1fr) 280px}.studio-collab-bar{gap:18px;min-height:48px}.studio-collab-bar header{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.studio-collab-bar h1{margin:0;white-space:nowrap}.studio-graph-badges{margin:0;align-items:center}.studio-collab-bar .mobile-graph-toolbar{flex:1;max-width:380px}.studio-collab-bar input{background:var(--panel);border:1px solid var(--line);color:var(--text)}.studio-collab-bar #filter-summary{flex-basis:100%;margin:0}.studio-collab-bar #filter-summary:empty{display:none}.controls{padding:12px!important;background:var(--panel)}.controls .check,.controls #category-list label,.controls .category-item,.controls #categories-all{display:flex;align-items:center;gap:4px;margin:0!important;padding:2px 4px!important;min-height:26px;height:26px;line-height:1;font-size:13px;font-weight:400;border:0;border-radius:4px;overflow:hidden}.controls .check>span,.controls .category-item>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.controls .check:hover,.controls .category-item:hover{background:var(--accent-soft)}.controls input[type=checkbox]{appearance:none!important;width:14px!important;height:14px!important;min-width:14px;margin:0!important;border:1px solid var(--line)!important;border-radius:3px!important;display:inline-grid;place-items:center;background:transparent;flex-shrink:0}.controls input[type=checkbox]:checked{background:var(--accent)!important;border-color:var(--accent)!important}.controls input[type=checkbox]:checked:after{content:'✓';color:#fff;font-size:11px;line-height:1}.controls input[type=checkbox]:focus-visible{outline:2px solid var(--muted);outline-offset:2px}.controls .check-list,#category-list{display:flex;flex-direction:column;gap:0}.controls .external-box{padding:8px 0!important;margin:0 0 8px!important;border:0;border-bottom:1px solid var(--line);border-radius:0!important}.controls details.filter-box{margin-top:12px}.controls .field{padding:4px;margin-top:10px}.controls details>summary{font-size:13px;padding:4px 0}.collab-legal{border-top:1px solid var(--line);padding-top:10px!important}.collab-legal details{padding:0!important;border:0}.collab-legal details[open]{max-height:none;overflow:visible}.collab-legal details>summary{font-size:12px;padding:0;color:var(--muted)}.collab-legal details>p{font-size:11px;line-height:1.5;margin-top:8px}.collab-legal .legal-links{margin-top:8px;gap:4px!important}.collab-legal a{font-size:11px;line-height:1.5;color:var(--muted);padding:3px 0}.collab-legal a:hover{color:var(--accent)}.details{min-width:0;padding:16px}.details-header{min-width:0}.details-header h2{min-width:0;overflow-wrap:anywhere}.direction-toggle-group{display:flex;flex-direction:column;gap:6px}.toggle-pill{display:flex;width:100%;min-width:0;justify-content:flex-start;gap:6px;padding:8px;white-space:normal;font-size:12px}.toggle-pill span{min-width:0;overflow-wrap:anywhere}.relation-row{grid-template-columns:minmax(0,1fr) auto}.relation-row>span:first-child{overflow-wrap:anywhere}.section-head{flex-wrap:wrap;gap:4px}#details-meta{overflow-wrap:anywhere}#video-list{padding-left:0}
@media(max-width:1150px){.layout{grid-template-columns:284px minmax(0,1fr)}.details{grid-column:2;grid-row:3}.studio-collab-bar{flex-wrap:wrap}.studio-collab-bar header{gap:10px}.studio-collab-bar .mobile-graph-toolbar{min-width:200px}}
@media(max-width:760px){.layout{grid-template-columns:1fr}.details{grid-column:1;grid-row:4}.controls .check,.controls #category-list label,.controls .category-item,.controls #categories-all{height:28px;min-height:28px}.controls:has(.collab-legal details[open]){height:auto;max-height:calc(100dvh - 20px)}.collab-legal .legal-links{flex-direction:row;flex-wrap:wrap}.studio-collab-bar h1{font-size:20px}.studio-collab-bar header{gap:8px}.studio-collab-bar .mobile-graph-toolbar{min-width:160px}}
.controls .check,.controls .category-item,.controls #categories-all{color:var(--text)}
/* Revision 7: full-height filter rail, shared toolbar, independent inspector. */
:root{--panel-2:var(--panel);--accent:#229ed9;--accent-soft:#e6f3fb}:root[data-theme=dark]{--panel-2:var(--panel);--accent:#229ed9;--accent-soft:#163144}
body{overflow:hidden}.layout{height:100dvh;padding:0;gap:12px;grid-template-columns:284px minmax(0,1fr) 320px;grid-template-rows:76px minmax(0,1fr)}
.controls,.controls.is-open{position:relative;top:auto;grid-column:1;grid-row:1/3;height:100%;max-height:none;align-self:stretch;border-radius:0;border-right:1px solid var(--line)}
.studio-collab-bar{grid-column:2/4;grid-row:1;min-width:0;gap:16px;margin-right:12px;flex-wrap:nowrap;min-height:0}
.studio-collab-bar header{display:flex;align-items:center;flex-wrap:nowrap;gap:16px;flex:0 1 auto;min-width:0}.studio-collab-bar h1{font-size:30px;line-height:1.2;font-weight:500;letter-spacing:-.035em}.studio-graph-badges{gap:6px;flex-wrap:nowrap;flex-shrink:0}.studio-graph-badges>span{height:26px;padding:3px 7px;font-size:12px;line-height:18px;border-radius:6px;background:var(--panel);white-space:nowrap}.studio-collab-bar .mobile-graph-toolbar{flex:1;min-width:140px;max-width:300px}.studio-collab-bar input{height:44px;min-height:44px;border-radius:10px;background:var(--panel)}.studio-collab-bar input:focus{outline:none;box-shadow:none;border-color:var(--muted)}
.studio-collab-bar #filter-summary:not(:empty){position:absolute;top:57px;font-size:10px;white-space:nowrap;max-width:calc(100% - 320px);overflow:hidden;text-overflow:ellipsis}
.graph-wrap{grid-column:2;grid-row:2;border-radius:12px 12px 0 0;min-height:0}.details{grid-column:3;grid-row:2;border-radius:12px 0 0 0;display:flex;flex-direction:column;padding:0;overflow:hidden;min-height:0}.studio-inspector-scroll{flex:1;min-height:0;overflow:auto;padding:16px;scrollbar-width:thin}.studio-inspector-footer{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}.studio-inspector-footer>div{display:flex;gap:12px}.studio-inspector-footer a{display:flex;align-items:center;justify-content:center;min-height:32px;min-width:28px}.studio-inspector-footer a:hover{opacity:.7}
.studio-filter-scroll>.field:has(#min-count-range),.studio-filter-scroll>details.filter-box{border-top:1px solid var(--line)!important;padding-top:12px!important;margin-top:12px!important}.controls .external-box{border-bottom:1px solid var(--line)!important;padding-bottom:10px!important;margin-bottom:10px!important}.toggle-pill{height:auto;min-height:36px;max-width:100%;overflow-wrap:anywhere}.details button{white-space:normal;max-width:100%;overflow-wrap:anywhere}
@media(max-width:1250px){.layout{grid-template-columns:284px minmax(0,1fr) 290px}.studio-collab-bar h1{font-size:25px}.studio-collab-bar header{gap:10px}.studio-collab-bar{gap:10px}.studio-graph-badges>span{font-size:11px;padding:3px 5px}}
@media(max-width:1000px){body{overflow:auto}.layout{height:auto;min-height:100dvh;grid-template-columns:284px minmax(0,1fr);grid-template-rows:auto 650px auto}.controls,.controls.is-open{position:sticky;top:0;grid-row:1/4;height:100dvh;align-self:start}.studio-collab-bar{grid-column:2;grid-row:1;flex-wrap:wrap;padding-top:12px}.studio-collab-bar header{flex-wrap:wrap}.studio-collab-bar .mobile-graph-toolbar{max-width:none;flex-basis:100%}.studio-collab-bar #filter-summary:not(:empty){position:static;max-width:100%;white-space:normal}.graph-wrap{grid-column:2;grid-row:2}.details{grid-column:2;grid-row:3;max-height:650px}.studio-inspector-scroll{min-height:120px}}
@media(max-width:760px){.layout{grid-template-columns:1fr;grid-template-rows:auto auto 500px auto;gap:12px}.controls,.controls.is-open{grid-row:1;grid-column:1;height:220px;max-height:220px;z-index:15}.studio-collab-bar{grid-column:1;grid-row:2;margin:0;padding:0 12px}.studio-collab-bar h1{font-size:24px}.studio-collab-bar header{gap:8px}.graph-wrap{grid-column:1;grid-row:3;margin:0 12px}.details{grid-column:1;grid-row:4;margin:0 12px}.controls:has(.collab-legal details[open]){height:auto;max-height:calc(100dvh - 20px)}.studio-graph-badges>span{height:24px;line-height:16px}}
.studio-collab-bar h1{font-size:clamp(24px,3vw,44px)}
.studio-collab-bar{margin:0 12px 0 0!important}.studio-collab-bar>header{display:contents!important}.studio-collab-bar #filter-summary:not(:empty){top:60px}.layout{grid-template-rows:minmax(76px,auto) minmax(0,1fr)}
@media(max-width:1150px){.studio-collab-bar{padding:12px 0!important}.layout{grid-template-rows:auto minmax(0,1fr)}}
@media(max-width:1000px){.layout{grid-template-rows:auto 650px auto}}
@media(max-width:760px){.layout{grid-template-rows:auto auto 500px auto}.studio-collab-bar{padding:0 12px!important;margin:0!important}}
.studio-collab-bar{align-self:center!important;min-height:0!important}
@font-face{font-family:NeoSansPro;src:url('/fonts/NeoSansPro-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}

.studio-graph-badges > span { background: transparent; border: 1px solid var(--line); }

@media (max-width: 900px) {
  body { overflow: auto; }
  .layout { grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(380px,65dvh) auto; height: auto; min-height: 100dvh; padding: 12px; gap: 12px; }
  .studio-collab-bar { grid-column: 1; grid-row: 1; flex-wrap: wrap; gap: 10px; margin: 0 !important; padding: 0 !important; }
  .studio-collab-bar > header { display: flex !important; flex: 1 1 100%; flex-wrap: wrap; gap: 8px; }
  .studio-collab-bar h1 { font-size: 24px; white-space: normal; }
  .studio-collab-bar .mobile-graph-toolbar { flex: 1 1 100%; max-width: none; min-width: 0; }
  .studio-collab-bar #filter-summary:not(:empty) { position: static; max-width: 100%; white-space: normal; }
  .studio-graph-badges { flex-wrap: wrap; }
  .graph-wrap { grid-column: 1; grid-row: 2; min-height: 380px; margin: 0; }
  .details { grid-column: 1; grid-row: 3; max-height: none; margin: 0; }
  .controls,.controls.is-open { position: fixed !important; inset: 0 0 0 auto; z-index: 30; display: flex; flex-direction: column; width: min(88vw,360px); height: 100dvh !important; max-height: none !important; padding: 0 12px 12px !important; border: 0; border-left: 1px solid var(--line); background: var(--panel); box-shadow: -8px 0 24px #0003; transform: translateX(105%); visibility: hidden; }
  .controls.is-open { transform: translateX(0); visibility: visible; }
  #filters-open { display: inline-flex !important; align-items: center; justify-content: center; min-height: 44px; }
  .controls .mobile-filter-head { display: flex !important; flex-shrink: 0; margin: 0 -12px 8px; padding: 12px; }
  #filters-close { display: inline-flex !important; align-items: center; justify-content: center; }
  #filters-backdrop.is-open { display: block !important; }
  .controls .filter-actions { display: flex; gap: 6px; }
  .controls .filter-actions #categories-all,.controls .filter-actions #categories-none { display: inline-flex !important; flex: 1; width: auto; justify-content: center; min-height: 36px; }
}

.graph-tools button { display: grid; place-items: center; width: 40px; height: 40px; min-height: 40px; padding: 0; font: 500 13px/1 NeoSansPro,system-ui,sans-serif; }
.graph-tools button svg { display: block; width: 18px; height: 18px; }
#fit-tight-overlay { width: 40px; }
.controls > .collab-legal { padding-top: 5px !important; margin-top: 5px; }
.controls > .collab-legal .legal-links { margin-top: 4px; gap: 2px 8px !important; }
.controls > .collab-legal a { padding: 1px 0; line-height: 1.25; }
@media (max-width: 900px) {
  .studio-collab-bar #filters-open { height: 40px; min-height: 40px; padding: 0 14px; font: 500 13px/1 NeoSansPro,system-ui,sans-serif; }
  .controls .mobile-filter-head { min-height: 48px; margin-bottom: 6px; padding: 6px 12px; }
  .controls .mobile-filter-head h2 { font: 500 15px/1.25 NeoSansPro,system-ui,sans-serif; }
  .controls #filters-close { display: grid !important; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; min-height: 32px; padding: 0; }
  .controls #filters-close svg { display: block; width: 16px; height: 16px; }
}
@media (hover: none) and (pointer: coarse) {
  :is(a,button,input,select,summary) { -webkit-tap-highlight-color: transparent; }
  :is(a,button,input,select,summary):focus { outline: none !important; box-shadow: none !important; }
}