:root {
  color-scheme: dark;
  --bg: #080a12;
  --panel: rgba(18, 19, 34, .9);
  --panel-2: rgba(28, 27, 48, .84);
  --edge: rgba(214, 221, 255, .13);
  --edge-hot: rgba(255, 221, 143, .38);
  --ink: #f6f2e8;
  --muted: #aaa9b9;
  --faint: #6e6c80;
  --gold: #ffd36e;
  --amber: #e19a38;
  --violet: #a681ff;
  --cyan: #74e7ff;
  --green: #77e7a9;
  --red: #ff6578;
  --serif: "Palatino Linotype", Palatino, Georgia, serif;
  --sans: ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--sans);
  background:
    radial-gradient(55% 42% at 15% 10%, rgba(96, 62, 170, .22), transparent 72%),
    radial-gradient(45% 38% at 88% 18%, rgba(32, 139, 166, .13), transparent 72%),
    radial-gradient(48% 45% at 58% 100%, rgba(161, 85, 39, .13), transparent 72%),
    linear-gradient(145deg, #111322, #06070d 72%);
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .2;
  background-image:
    repeating-linear-gradient(118deg, transparent 0 22px, rgba(255,255,255,.026) 23px 24px),
    repeating-linear-gradient(28deg, transparent 0 29px, rgba(0,0,0,.16) 30px 31px);
}
button, a { font: inherit; -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

.lab-shell { position: relative; width: min(1540px, 100%); margin: 0 auto; padding: 22px clamp(12px, 2.5vw, 36px) 44px; }
.lab-header { display: flex; align-items: center; gap: 18px; }
.home-link {
  display: grid; place-items: center; flex: 0 0 42px; height: 42px;
  color: var(--muted); text-decoration: none; font-size: 24px;
  border: 1px solid var(--edge); border-radius: 50%; background: rgba(255,255,255,.035);
  transition: .18s ease;
}
.home-link:hover { color: var(--gold); transform: translateX(-3px); border-color: var(--edge-hot); }
.lab-title { flex: 1; min-width: 0; }
.kicker { color: #b8abd2; font-size: 9px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }
.lab-title h1 { margin: 3px 0 2px; font: 800 clamp(27px, 3.5vw, 46px)/1 var(--serif); letter-spacing: .025em; }
.lab-title p { margin: 0; color: var(--muted); font-size: 12px; }
.principle-chip {
  display: flex; flex-direction: column; min-width: 248px; padding: 10px 14px;
  border: 1px solid rgba(119,231,169,.25); border-radius: 14px;
  background: linear-gradient(145deg, rgba(53,139,98,.13), rgba(27,31,49,.66));
}
.principle-chip span { color: var(--green); font-size: 7px; font-weight: 900; letter-spacing: .2em; }
.principle-chip strong { margin: 2px 0; font: 700 13px var(--serif); }
.principle-chip small { color: var(--muted); font-size: 8px; }

.lab-tabs { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; margin: 20px 0 18px; padding: 5px; border: 1px solid var(--edge); border-radius: 16px; background: rgba(9,10,18,.58); }
.lab-tab {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 10px 14px;
  color: var(--muted); border: 1px solid transparent; border-radius: 11px; background: transparent; cursor: pointer; font-weight: 800; text-align: left;
}
.lab-tab > span { display: grid; place-items: center; width: 24px; height: 24px; color: var(--faint); border: 1px solid var(--edge); border-radius: 50%; font-size: 8px; }
.lab-tab small { color: var(--faint); font-size: 8px; font-weight: 700; }
.lab-tab:hover { color: var(--ink); background: rgba(255,255,255,.035); }
.lab-tab.active { color: #241a08; border-color: rgba(255,226,160,.82); background: linear-gradient(#ffe7a4, #e7af43); box-shadow: 0 7px 20px rgba(225,154,56,.18); }
.lab-tab.active > span { color: #392207; border-color: rgba(80,46,3,.28); }
.lab-tab.active small { color: rgba(52,32,7,.64); }

.lab-view { display: none; }
.lab-view.active { display: block; animation: view-in .32s ease both; }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } }
.section-intro { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin: 0 4px 14px; }
.section-intro h2 { margin: 3px 0 0; font: 700 clamp(19px, 2.3vw, 28px)/1.15 var(--serif); }
.section-intro > p { max-width: 510px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; text-align: right; }

.prototype-switcher { display: flex; gap: 7px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.prototype-switcher::-webkit-scrollbar { display: none; }
.variant-button {
  flex: 0 0 auto; min-width: 148px; padding: 9px 11px; color: var(--muted); text-align: left;
  border: 1px solid var(--edge); border-radius: 12px; background: rgba(255,255,255,.025); cursor: pointer;
  transition: transform .15s, border-color .15s, background .15s;
}
.variant-button:hover { transform: translateY(-2px); color: var(--ink); border-color: rgba(255,211,110,.35); }
.variant-button.active { color: var(--ink); border-color: var(--prototype-color, var(--gold)); background: color-mix(in srgb, var(--prototype-color, var(--gold)) 12%, rgba(18,19,34,.96)); box-shadow: inset 0 0 20px color-mix(in srgb, var(--prototype-color, var(--gold)) 8%, transparent); }
.variant-button span, .variant-button strong, .variant-button small { display: block; }
.variant-button span { color: var(--prototype-color, var(--gold)); font-size: 7px; font-weight: 900; letter-spacing: .14em; }
.variant-button strong { margin: 2px 0; font: 700 11px var(--serif); }
.variant-button small { color: var(--faint); font-size: 7px; }

.map-workbench, .tree-workbench { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 12px; margin-top: 10px; }
.map-stage, .tree-stage, .inspector-panel, .recommendation-card, .influence-strip {
  border: 1px solid var(--edge); border-radius: 20px; background: var(--panel); box-shadow: 0 20px 48px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.035); backdrop-filter: blur(14px);
}
.map-stage, .tree-stage { min-width: 0; padding: 16px; overflow: hidden; }
.stage-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; min-height: 58px; }
.stage-head h3 { margin: 2px 0 3px; font: 700 22px var(--serif); }
.stage-head p { max-width: 720px; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.stage-metrics { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.stage-metrics span { padding: 5px 8px; color: var(--muted); border: 1px solid var(--edge); border-radius: 99px; font-size: 7px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.stage-metrics button, .quiet-button, .earn-button {
  padding: 7px 10px; color: var(--muted); border: 1px solid var(--edge); border-radius: 9px; background: rgba(255,255,255,.035); cursor: pointer; font-size: 8px; font-weight: 800; letter-spacing: .06em;
}
.stage-metrics button:hover, .quiet-button:hover { color: var(--gold); border-color: var(--edge-hot); }

.map-canvas {
  --map-color: var(--gold); position: relative; min-height: 585px; margin-top: 10px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.1); border-radius: 16px;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--map-color) 11%, transparent), transparent 36%),
    linear-gradient(rgba(7,8,14,.58), rgba(7,8,14,.78)),
    url("../../web2/assets/themes/ironkeep-hall.jpg") center / cover;
  isolation: isolate;
}
.map-canvas[data-biome="sunken"] { background-image: radial-gradient(circle at 50% 48%, rgba(70,195,221,.13), transparent 35%), linear-gradient(rgba(4,16,25,.6),rgba(5,10,18,.84)), url("../../web2/assets/themes/aether-bloom.jpg"); }
.map-canvas[data-biome="lantern"] { background-image: radial-gradient(circle at 50% 48%, rgba(132,238,180,.12), transparent 35%), linear-gradient(rgba(7,18,14,.56),rgba(5,10,9,.86)), url("../../web2/assets/themes/verdant-reliquary.jpg"); }
.map-canvas[data-biome="codex"] { background-image: radial-gradient(circle at 50% 48%, rgba(184,119,255,.13), transparent 35%), linear-gradient(rgba(13,8,25,.58),rgba(7,5,13,.84)), url("../../web2/assets/themes/illuminated-codex.jpg"); }
.map-canvas::after { content: attr(data-watermark); position: absolute; top: 13px; right: 15px; color: rgba(255,255,255,.1); font: 700 9px var(--serif); letter-spacing: .22em; }
.map-edges { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; pointer-events: none; }
.map-edge { fill: none; stroke: var(--map-color); stroke-linecap: round; }
.map-edge.locked { stroke-width: 2.5; stroke-opacity: .28; stroke-dasharray: 6 9; }
.map-edge.open { stroke-width: 3.5; stroke-opacity: .9; stroke-dasharray: 8 8; animation: map-edge-flow 1s linear infinite; filter: drop-shadow(0 0 5px var(--map-color)); }
.map-edge.done { stroke-width: 4; stroke-opacity: .95; filter: drop-shadow(0 0 6px var(--map-color)); }
@keyframes map-edge-flow { to { stroke-dashoffset: -16; } }
.route-node {
  --node-color: var(--map-color); position: absolute; left: var(--x); top: var(--y); z-index: 2; display: flex; flex-direction: column; align-items: center; width: 130px; transform: translate(-50%,-50%); color: var(--ink); border: 0; background: transparent; cursor: pointer;
}
.route-node:disabled { cursor: not-allowed; }
.route-node-orb { position: relative; display: grid; place-items: center; width: 66px; height: 66px; border: 2px solid color-mix(in srgb, var(--node-color) 55%, #fff); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--node-color) 23%, #151724), #08090f 72%); box-shadow: 0 0 0 6px rgba(5,6,10,.65), 0 0 20px color-mix(in srgb, var(--node-color) 34%, transparent), inset 0 0 17px rgba(0,0,0,.6); transition: .18s cubic-bezier(.25,1.5,.4,1); }
.route-node-orb img { width: 87%; height: 87%; object-fit: contain; filter: drop-shadow(0 5px 6px rgba(0,0,0,.65)); }
.route-node:hover:not(:disabled) .route-node-orb, .route-node.selected .route-node-orb { transform: scale(1.1); filter: brightness(1.2); box-shadow: 0 0 0 6px rgba(5,6,10,.72), 0 0 31px color-mix(in srgb, var(--node-color) 62%, transparent); }
.route-node-label { width: 145px; margin-top: 8px; text-align: center; text-shadow: 0 2px 7px #000,0 2px 7px #000; }
.route-node-label strong, .route-node-label small { display: block; }
.route-node-label strong { font: 700 10px var(--serif); }
.route-node-label small { color: #bdb8c8; font-size: 7px; }
.route-node-tag { position: absolute; top: -14px; padding: 3px 6px; color: color-mix(in srgb, var(--node-color) 45%, white); border: 1px solid color-mix(in srgb, var(--node-color) 52%, transparent); border-radius: 99px; background: rgba(10,10,18,.9); font-size: 6px; font-weight: 900; letter-spacing: .08em; white-space: nowrap; }
.route-node.locked { opacity: .3; filter: grayscale(1); }
.route-node.cleared .route-node-orb { --node-color: var(--green); }
.route-node.cleared .route-node-orb::after { content: "✓"; position: absolute; right: -5px; top: -5px; display: grid; place-items: center; width: 18px; height: 18px; color: #082116; border: 2px solid #c8ffdd; border-radius: 50%; background: var(--green); font-size: 10px; font-weight: 900; }
.route-node.current .route-node-orb { animation: current-pulse 1.8s ease-in-out infinite; }
@keyframes current-pulse { 50% { box-shadow: 0 0 0 10px rgba(255,211,110,.05), 0 0 32px color-mix(in srgb,var(--node-color) 58%,transparent), inset 0 0 18px rgba(0,0,0,.6); } }
.route-node.secret-node .route-node-orb { border-style: dashed; }
.map-legend { display: flex; justify-content: center; gap: 20px; padding-top: 11px; color: var(--faint); font-size: 7px; }
.map-legend span { display: flex; align-items: center; gap: 5px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
.status-dot.current { background: var(--gold); box-shadow: 0 0 7px var(--gold); }
.status-dot.available { background: var(--cyan); }
.status-dot.cleared { background: var(--green); }
.status-dot.secret { border: 1px dashed var(--violet); background: transparent; }

.inspector-panel { position: relative; min-height: 698px; overflow: hidden; }
.inspector-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 698px; padding: 32px; text-align: center; }
.inspector-empty .empty-glyph { display: grid; place-items: center; width: 92px; height: 92px; margin-bottom: 17px; color: var(--gold); border: 1px solid var(--edge-hot); border-radius: 50%; background: radial-gradient(circle,rgba(255,211,110,.11),transparent 68%); font-size: 34px; }
.inspector-empty h3 { margin: 4px 0 7px; font: 700 20px var(--serif); }
.inspector-empty p { max-width: 260px; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.6; }
.inspector-content { padding: 16px; animation: inspector-in .23s ease both; }
@keyframes inspector-in { from { opacity: 0; transform: translateX(8px); } }
.inspector-art { display: grid; place-items: center; height: 218px; margin: 11px 0; overflow: hidden; border: 1px solid var(--edge); border-radius: 14px; background: radial-gradient(circle at 50% 58%, rgba(114,91,159,.25), transparent 48%), #0b0b14; }
.inspector-art img { max-width: 94%; max-height: 94%; object-fit: contain; filter: drop-shadow(0 10px 13px rgba(0,0,0,.72)); }
.inspector-content h3 { margin: 4px 0; font: 700 21px var(--serif); }
.inspector-content > p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.term-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin: 11px 0; }
.term { padding: 8px 5px; text-align: center; border: 1px solid var(--edge); border-radius: 9px; background: rgba(255,255,255,.025); }
.term span, .term strong { display: block; }
.term span { color: var(--faint); font-size: 6px; letter-spacing: .11em; }
.term strong { margin-top: 2px; font-size: 9px; }
.room-rule { margin: 9px 0; padding: 9px 10px; color: #d9cfb7; border-left: 2px solid var(--gold); background: rgba(255,211,110,.055); font-size: 8px; line-height: 1.5; }
.room-action, .restore-action, .secondary-action {
  width: 100%; padding: 10px 12px; border-radius: 10px; cursor: pointer; font-weight: 900; letter-spacing: .05em; transition: transform .15s, filter .15s;
}
.room-action, .restore-action { color: #271b05; border: 1px solid #ffe4a4; background: linear-gradient(#ffe8a8,#e7ad40); }
.secondary-action { margin-top: 7px; color: var(--muted); border: 1px solid var(--edge); background: rgba(255,255,255,.035); }
.room-action:hover:not(:disabled), .restore-action:hover:not(:disabled), .secondary-action:hover { transform: translateY(-2px); filter: brightness(1.12); }
.room-action:disabled, .restore-action:disabled { opacity: .42; cursor: default; }
.inspector-note { margin-top: 8px; color: var(--faint); font-size: 7px; text-align: center; line-height: 1.5; }

.tree-intro { align-items: center; }
.spark-wallet { position: relative; display: grid; grid-template-columns: auto auto; column-gap: 10px; min-width: 215px; padding: 10px 14px; border: 1px solid rgba(116,231,255,.27); border-radius: 13px; background: linear-gradient(145deg,rgba(46,135,158,.12),rgba(23,24,43,.7)); }
.spark-wallet span { align-self: end; color: var(--cyan); font-size: 7px; font-weight: 900; letter-spacing: .15em; }
.spark-wallet strong { grid-row: span 2; color: #d4f7ff; font: 800 28px var(--serif); text-shadow: 0 0 18px rgba(116,231,255,.55); }
.spark-wallet small { color: var(--faint); font-size: 7px; }
.spark-wallet.pulse { animation: wallet-pulse .55s ease; }
@keyframes wallet-pulse { 50% { transform: scale(1.08); box-shadow: 0 0 28px rgba(116,231,255,.28); } }
.tree-toolbar { display: flex; align-items: stretch; gap: 7px; }
.tree-toolbar .prototype-switcher { flex: 1; }
.precision-rebuild-link {
  display: flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 7px 11px;
  color: var(--cyan); text-decoration: none; border: 1px solid rgba(116,231,255,.3); border-radius: 9px;
  background: linear-gradient(145deg,rgba(46,135,158,.12),rgba(23,24,43,.7));
  font-size: 8px; font-weight: 900; letter-spacing: .05em;
}
.precision-rebuild-link span { padding: 2px 4px; color: #082028; border-radius: 4px; background: var(--cyan); font-size: 6px; }
.precision-rebuild-link:hover { border-color: rgba(116,231,255,.58); background: rgba(116,231,255,.09); }
.earn-button { flex: 0 0 auto; color: #0a281e; border-color: #baffd4; background: linear-gradient(#aaf2c7,#5bc98c); }
.quiet-button { flex: 0 0 auto; }
.tree-workbench { grid-template-columns: minmax(0,1fr) 350px; }
.tree-stage { padding-bottom: 14px; }
.tree-stage-head { align-items: center; }
.complexity-meter { display: flex; align-items: center; gap: 7px; color: var(--faint); font-size: 6px; font-weight: 900; letter-spacing: .12em; }
.complexity-meter > div { width: 96px; height: 6px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.07); }
.complexity-meter i { display: block; width: 20%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--cyan),var(--violet),var(--gold)); transition: width .35s ease; }
.tree-rule-bar { display: flex; justify-content: space-between; gap: 15px; margin: 8px 0; padding: 8px 10px; color: var(--muted); border: 1px solid var(--edge); border-radius: 10px; background: rgba(255,255,255,.025); font-size: 8px; }
.tree-rule-bar strong { color: var(--gold); }
.tree-canvas { --tree-color: var(--gold); position: relative; height: clamp(560px, 78vh, 860px); overflow: hidden; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; outline-offset: 3px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: linear-gradient(155deg,#121726,#090a10 76%); isolation: isolate; }
.tree-canvas::after { content: attr(data-watermark); position: absolute; top: 13px; right: 15px; color: rgba(255,255,255,.1); font: 700 9px var(--serif); letter-spacing: .2em; }
.tree-canvas.mode-living, .tree-canvas.mode-sanctuary { background: #070a12; }
.tree-inner.has-backdrop { background: linear-gradient(rgba(5,8,15,.18),rgba(4,6,12,.48)), url("./assets/soul-tree-sanctuary.png") 0 0 / 100% 100% no-repeat; }
.tree-canvas.mode-constellation { background: radial-gradient(circle at 50% 48%,rgba(132,103,255,.16),transparent 34%), radial-gradient(circle at 20% 20%,rgba(91,221,255,.1),transparent 25%), linear-gradient(#0a0920,#05060d); }
.tree-canvas.mode-boughs { background: radial-gradient(ellipse at 50% 100%,rgba(142,89,34,.28),transparent 46%), linear-gradient(155deg,#101a1a,#080a10 76%); }
.tree-canvas.mode-ladder { background: linear-gradient(90deg,transparent 33%,rgba(255,255,255,.025) 33% 34%,transparent 34% 66%,rgba(255,255,255,.025) 66% 67%,transparent 67%), linear-gradient(#111421,#080a10); }
.tree-canvas.mode-sanctuary::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg,rgba(4,6,12,.78) 0 21%,transparent 32% 68%,rgba(4,6,12,.78) 79% 100%); pointer-events: none; }
.tree-trunk { position: absolute; left: 50%; bottom: -18px; z-index: 0; width: 92px; height: 470px; transform: translateX(-50%); border-radius: 48% 48% 20% 20%; background: linear-gradient(90deg,#28180d,#815226 45%,#372010); box-shadow: inset 0 0 20px rgba(0,0,0,.6),0 0 34px rgba(225,154,56,.12); clip-path: polygon(29% 0,71% 0,83% 66%,100% 100%,63% 87%,50% 100%,37% 87%,0 100%,17% 66%); }
.soul-node {
  --node-color: var(--tree-color); --node-size: 58px; position: absolute; left: var(--x); top: var(--y); z-index: 4; display: block; width: var(--node-size); height: var(--node-size); transform: translate(-50%,-50%); padding: 0; color: var(--ink); border: 0; background: transparent; cursor: pointer;
}
.soul-node:disabled { cursor: not-allowed; }
.soul-node-socket { position: relative; display: grid; place-items: center; width: 100%; height: 100%; padding: 7px; border: 2px solid color-mix(in srgb,var(--node-color) 54%,#fff); border-radius: var(--node-radius,50%); background: radial-gradient(circle,color-mix(in srgb,var(--node-color) 20%,#1c1627),#08090f 72%); box-shadow: 0 0 0 5px rgba(5,6,10,.55),0 0 17px color-mix(in srgb,var(--node-color) 26%,transparent),inset 0 0 15px rgba(0,0,0,.62); transition: .2s cubic-bezier(.2,1.5,.4,1); }
.soul-node-socket img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(.85) brightness(.58) drop-shadow(0 4px 5px rgba(0,0,0,.6)); transition: filter .25s; }
.soul-node:hover:not(:disabled) .soul-node-socket, .soul-node.selected .soul-node-socket { transform: scale(1.1); filter: brightness(1.18); box-shadow: 0 0 0 5px rgba(5,6,10,.62),0 0 28px color-mix(in srgb,var(--node-color) 58%,transparent); }
.soul-node.locked { opacity: .34; filter: grayscale(.85); }
.soul-node.available .soul-node-socket { animation: node-breathe 2.2s ease-in-out infinite; }
@keyframes node-breathe { 50% { box-shadow: 0 0 0 8px color-mix(in srgb,var(--node-color) 7%,transparent),0 0 25px color-mix(in srgb,var(--node-color) 45%,transparent),inset 0 0 15px rgba(0,0,0,.62); } }
.soul-node.restored .soul-node-socket { border-color: #eaffe9; background: radial-gradient(circle,rgba(119,231,169,.25),#0b1714 72%); box-shadow: 0 0 0 5px rgba(5,6,10,.5),0 0 27px rgba(119,231,169,.58); }
.soul-node.restored .soul-node-socket img { filter: brightness(1.12) saturate(1.12) drop-shadow(0 0 8px rgba(255,211,110,.55)); }
.soul-node.restored .soul-node-socket::after { content: "✓"; position: absolute; right: -5px; top: -5px; display: grid; place-items: center; width: 17px; height: 17px; color: #082116; border: 2px solid #d6ffe6; border-radius: 50%; background: var(--green); font-size: 9px; font-weight: 900; }
.soul-node.capstone { --node-size: 76px; --node-radius: 24%; }
.soul-node.notable { --node-size: 66px; }
.soul-node-label { position: absolute; top: calc(100% + 11px); left: 50%; width: calc(150px * var(--label-scale,1)); transform: translateX(-50%); text-align: center; pointer-events: none; text-shadow: 0 2px 6px #000,0 2px 6px #000; }
.soul-node-label strong, .soul-node-label small { display: block; }
.soul-node-label strong { font: 700 calc(10px * var(--label-scale,1)) var(--serif); }
.soul-node-label small { color: #b9b6c3; font-size: calc(7px * var(--label-scale,1)); line-height: 1.25; }
.soul-cost { position: absolute; right: -8px; bottom: -6px; z-index: 2; display: flex; gap: 1px; padding: 3px 5px; color: #d9f9ff; border: 1px solid rgba(116,231,255,.55); border-radius: 99px; background: rgba(8,22,28,.94); font-size: 7px; font-weight: 900; box-shadow: 0 0 9px rgba(116,231,255,.25); }
.soul-cost i { font-style: normal; }
.tree-inner { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.tree-canvas.panning { cursor: grabbing; }
.tree-canvas.zoom-far .soul-node-label small { display: none; }
.tree-edges { position: absolute; left: 0; top: 0; z-index: 1; overflow: visible; pointer-events: none; }
.tree-edge { fill: none; stroke: var(--edge-color); stroke-linecap: round; transition: stroke-opacity .3s, stroke-width .3s; }
.tree-edge.locked { stroke-width: 3; stroke-opacity: .22; }
.tree-edge.open { stroke-width: 4; stroke-opacity: .85; stroke-dasharray: 3 11; animation: edge-flow 1.1s linear infinite; filter: drop-shadow(0 0 5px var(--edge-color)); }
.tree-edge.done { stroke-width: 5; stroke-opacity: .95; filter: drop-shadow(0 0 7px var(--edge-color)); }
.tree-edge.cross { stroke-width: 2.5; stroke-dasharray: 7 7; animation: none; }
.tree-edge.cross.locked { stroke-opacity: .3; }
.tree-edge.cross.open, .tree-edge.cross.done { stroke-opacity: .9; animation: edge-flow 1.6s linear infinite; }
@keyframes edge-flow { to { stroke-dashoffset: -28; } }
.tree-ui { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.tree-controls { position: absolute; left: 12px; bottom: 12px; display: flex; align-items: center; gap: 4px; padding: 5px; border: 1px solid var(--edge); border-radius: 11px; background: rgba(8,9,18,.88); backdrop-filter: blur(6px); pointer-events: auto; cursor: default; }
.tree-controls button { min-width: 32px; height: 30px; padding: 0 9px; color: var(--ink); border: 1px solid var(--edge); border-radius: 8px; background: rgba(255,255,255,.04); font: 700 11px var(--sans); cursor: pointer; }
.tree-controls button:hover { border-color: rgba(116,231,255,.55); background: rgba(116,231,255,.1); }
.tree-zoom-label { min-width: 42px; padding: 0 6px; color: var(--muted); font: 700 10px var(--sans); text-align: center; }
.tree-hint { position: absolute; right: 12px; bottom: 14px; padding: 5px 10px; color: var(--faint); border-radius: 99px; background: rgba(8,9,18,.7); font-size: 8px; letter-spacing: .06em; }
.soul-node.planned .soul-node-socket { outline: 2px dashed rgba(116,231,255,.85); outline-offset: 6px; }
.plan-order { position: absolute; left: -9px; top: -9px; display: grid; place-items: center; width: 20px; height: 20px; color: #06222b; border: 2px solid #d7f8ff; border-radius: 50%; background: var(--cyan); font: 900 10px var(--sans); }
.cross-note { margin: 8px 0; padding: 8px 10px; color: var(--muted); border: 1px dashed rgba(172,135,255,.5); border-radius: 10px; background: rgba(172,135,255,.07); font-size: 9px; line-height: 1.5; }
.cross-note span { margin-right: 5px; color: #c9b3ff; font-size: 7px; font-weight: 900; letter-spacing: .14em; }
.auto-bar { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 14px; margin: 0 0 8px; padding: 10px 12px; border: 1px solid rgba(116,231,255,.28); border-radius: 12px; background: linear-gradient(135deg,rgba(116,231,255,.06),rgba(255,255,255,.02)); }
.auto-head { grid-column: 1 / -1; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.auto-head strong { color: var(--cyan); font: 800 11px var(--serif); letter-spacing: .06em; }
.auto-head span { color: var(--muted); font-size: 9px; }
.auto-strategies { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.auto-chip { flex: 1 1 130px; min-width: 120px; padding: 7px 10px; text-align: left; color: var(--ink); border: 1px solid var(--edge); border-radius: 9px; background: rgba(255,255,255,.03); cursor: pointer; }
.auto-chip strong, .auto-chip small { display: block; }
.auto-chip strong { font: 700 10px var(--sans); }
.auto-chip small { margin-top: 2px; color: var(--faint); font-size: 7.5px; line-height: 1.3; }
.auto-chip:hover { border-color: rgba(116,231,255,.45); }
.auto-chip.active { border-color: var(--cyan); background: rgba(116,231,255,.12); box-shadow: 0 0 0 1px rgba(116,231,255,.25); }
.auto-plan { min-width: 0; color: var(--muted); font-size: 9px; }
.auto-plan-head { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.auto-plan-head strong { color: var(--ink); font-size: 10px; }
.auto-plan ol { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.auto-plan li { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 4px; border: 1px solid var(--edge); border-radius: 99px; background: rgba(255,255,255,.04); font-size: 8.5px; }
.auto-plan li b { display: grid; place-items: center; width: 15px; height: 15px; color: #06222b; border-radius: 50%; background: var(--cyan); font-size: 8px; }
.auto-plan li i { color: var(--cyan); font-style: normal; font-weight: 800; }
.auto-actions { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.auto-run { padding: 10px 16px; color: #05222b; border: 1px solid #c8f6ff; border-radius: 10px; background: linear-gradient(#a8efff,#4cc4e0); font: 800 11px var(--sans); cursor: pointer; white-space: nowrap; }
.auto-run:disabled { color: var(--faint); border-color: var(--edge); background: rgba(255,255,255,.05); cursor: not-allowed; }
.auto-actions .quiet-button[hidden] { display: none; }
.branch-banner { position: absolute; z-index: 2; transform: translateX(-50%); color: var(--branch-color); font: 700 10px var(--serif); letter-spacing: .08em; text-align: center; text-shadow: 0 2px 8px #000; }
.branch-banner small { display: block; margin-top: 2px; color: #a9a6b5; font: 600 6px var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.tree-inspector { min-height: 793px; }
.tree-inspector .inspector-empty { min-height: 793px; }
.gem-preview { display: flex; align-items: center; gap: 11px; padding: 10px; border: 1px solid var(--edge); border-radius: 12px; background: rgba(255,255,255,.025); }
.gem-preview img { width: 66px; height: 66px; object-fit: contain; filter: drop-shadow(0 0 11px rgba(255,211,110,.35)); }
.gem-preview span, .gem-preview strong, .gem-preview small { display: block; }
.gem-preview span { color: var(--gold); font-size: 6px; font-weight: 900; letter-spacing: .13em; }
.gem-preview strong { margin: 2px 0; font: 700 13px var(--serif); }
.gem-preview small { color: var(--muted); font-size: 8px; line-height: 1.4; }
.rescue-preview { margin: 10px 0; padding: 10px; border-left: 2px solid var(--cyan); background: rgba(116,231,255,.045); }
.rescue-preview span { color: var(--cyan); font-size: 6px; font-weight: 900; letter-spacing: .13em; }
.rescue-preview strong { display: block; margin: 3px 0; font: 700 11px var(--serif); }
.rescue-preview p { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.45; }
.mechanic-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 9px 0; }
.mechanic-tags span { padding: 4px 6px; color: #c7c1d6; border: 1px solid var(--edge); border-radius: 99px; background: rgba(255,255,255,.025); font-size: 6px; font-weight: 800; letter-spacing: .06em; }
.restored-record { margin-top: 9px; padding: 9px; color: var(--muted); border: 1px solid rgba(119,231,169,.25); border-radius: 10px; background: rgba(52,129,86,.08); font-size: 8px; line-height: 1.5; }
.restored-record strong { color: var(--green); }

/* ========================================================================== 
   150-node scale lab — CSS and JavaScript own the layout, never an image.
   ========================================================================== */
.scale-intro { align-items: center; }
.scale-topline { display: flex; align-items: stretch; gap: 9px; }
.scale-topline .prototype-switcher { flex: 1; }
.scale-stats { display: flex; flex: 0 0 auto; gap: 6px; }
.scale-stats span { display: flex; flex-direction: column; justify-content: center; min-width: 76px; padding: 6px 10px; color: var(--faint); border: 1px solid var(--edge); border-radius: 10px; background: rgba(255,255,255,.025); font-size: 6px; text-align: center; text-transform: uppercase; }
.scale-stats strong { color: var(--ink); font: 700 15px var(--serif); }
.scale-controls { display: flex; align-items: center; gap: 7px; margin-top: 9px; padding: 7px; border: 1px solid var(--edge); border-radius: 13px; background: rgba(7,8,14,.5); }
.scale-search { display: flex; align-items: center; flex: 0 1 250px; gap: 6px; padding: 0 9px; border: 1px solid var(--edge); border-radius: 9px; background: rgba(255,255,255,.035); }
.scale-search span { color: var(--cyan); font-size: 18px; }
.scale-search input { min-width: 0; width: 100%; padding: 8px 0; color: var(--ink); border: 0; outline: 0; background: transparent; font: 9px var(--sans); }
.scale-search input::placeholder { color: var(--faint); }
.scale-branches { display: flex; flex: 1; min-width: 0; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.scale-branches::-webkit-scrollbar { display: none; }
.scale-branch { flex: 0 0 auto; padding: 7px 8px; color: var(--muted); border: 1px solid var(--edge); border-radius: 8px; background: transparent; cursor: pointer; font-size: 7px; font-weight: 800; white-space: nowrap; }
.scale-branch i { margin-right: 4px; color: var(--branch,var(--gold)); font-style: normal; }
.scale-branch:hover,.scale-branch.active { color: var(--ink); border-color: var(--branch,var(--gold)); background: color-mix(in srgb,var(--branch,var(--gold)) 10%,transparent); }
.notable-toggle { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; color: var(--muted); font-size: 7px; white-space: nowrap; }
.notable-toggle input { accent-color: var(--gold); }
.zoom-control { display: flex; align-items: center; flex: 0 0 auto; border: 1px solid var(--edge); border-radius: 8px; overflow: hidden; }
.zoom-control button { width: 27px; height: 27px; color: var(--ink); border: 0; background: rgba(255,255,255,.04); cursor: pointer; }
.zoom-control button:hover { color: var(--gold); background: rgba(255,211,110,.08); }
.zoom-control span { min-width: 45px; color: var(--muted); font-size: 7px; text-align: center; }
.scale-workbench { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 12px; margin-top: 10px; }
.scale-stage { min-width: 0; padding: 16px; border: 1px solid var(--edge); border-radius: 20px; background: var(--panel); box-shadow: 0 20px 48px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.035); overflow: hidden; }
.scale-stage-head { min-height: 66px; }
.scale-verdict { display: flex; flex-direction: column; align-items: flex-end; min-width: 98px; padding: 7px 9px; border: 1px solid var(--edge-hot); border-radius: 9px; background: rgba(255,211,110,.045); }
.scale-verdict span { color: var(--faint); font-size: 6px; text-transform: uppercase; }
.scale-verdict strong { color: var(--gold); font: 700 10px var(--serif); }
.scale-canvas { --scale-accent:var(--gold); position: relative; min-height: 690px; margin-top: 7px; overflow: auto; border: 1px solid rgba(255,255,255,.1); border-radius: 15px; background: radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--scale-accent) 8%,transparent),transparent 42%),linear-gradient(155deg,#111422,#070810 78%); scrollbar-color: var(--edge-hot) transparent; }
.scale-footer { display: flex; justify-content: space-between; gap: 12px; padding-top: 9px; color: var(--faint); font-size: 7px; }
.scale-footer span:first-child { color: var(--cyan); font-weight: 800; }
.scale-inspector { min-height: 795px; }
.scale-inspector .inspector-empty { min-height: 795px; }

/* Shared 150-node gem buttons */
.scale-node { --branch:var(--gold); display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 72px; padding: 5px; color: var(--ink); border: 0; background: transparent; cursor: pointer; }
.scale-node-gem { position: relative; display: grid; place-items: center; width: 46px; height: 46px; padding: 5px; border: 1px solid color-mix(in srgb,var(--branch) 48%,white); border-radius: 50%; background: radial-gradient(circle,color-mix(in srgb,var(--branch) 18%,#191526),#08090f 73%); box-shadow: 0 0 0 4px rgba(4,5,9,.55),0 0 11px color-mix(in srgb,var(--branch) 20%,transparent); transition: transform .15s,filter .15s,box-shadow .15s; }
.scale-node-gem img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(.8) brightness(.58); }
.scale-node-gem i { position: absolute; right: -7px; bottom: -4px; padding: 2px 4px; color: #d9f9ff; border: 1px solid rgba(116,231,255,.5); border-radius: 99px; background: #08191f; font: 6px var(--sans); }
.scale-node > small { width: 78px; color: #a7a3b1; font: 6px/1.2 var(--sans); text-align: center; }
.scale-node:hover .scale-node-gem,.scale-node.selected .scale-node-gem { transform: scale(1.12); filter: brightness(1.2); box-shadow: 0 0 0 4px rgba(4,5,9,.6),0 0 20px color-mix(in srgb,var(--branch) 52%,transparent); }
.scale-node.awakened .scale-node-gem { border-color: #d5ffe5; box-shadow: 0 0 0 4px rgba(4,5,9,.52),0 0 18px rgba(119,231,169,.52); }
.scale-node.awakened .scale-node-gem img { filter: brightness(1.08) saturate(1.12); }
.scale-node.available .scale-node-gem { animation: scale-node-ready 2.4s ease-in-out infinite; }
@keyframes scale-node-ready { 50% { box-shadow: 0 0 0 7px color-mix(in srgb,var(--branch) 6%,transparent),0 0 18px color-mix(in srgb,var(--branch) 38%,transparent); } }
.scale-node.locked { opacity: .33; filter: grayscale(.8); }
.scale-node.notable .scale-node-gem { width: 54px; height: 54px; border-width: 2px; }
.scale-node.capstone .scale-node-gem { width: 63px; height: 63px; border-radius: 22%; border-color: var(--gold); }
.scale-node.with-text { flex-direction: row; justify-content: flex-start; width: 100%; min-width: 0; padding: 5px 7px; border: 1px solid transparent; border-radius: 8px; text-align: left; }
.scale-node.with-text:hover { border-color: color-mix(in srgb,var(--branch) 30%,transparent); background: color-mix(in srgb,var(--branch) 6%,transparent); }
.scale-node.with-text .scale-node-gem { flex: 0 0 auto; width: 35px; height: 35px; }
.scale-node-copy { min-width: 0; }
.scale-node-copy strong,.scale-node-copy small { display: block; }
.scale-node-copy strong { overflow: hidden; font: 700 7px var(--serif); text-overflow: ellipsis; white-space: nowrap; }
.scale-node-copy small { margin-top: 1px; overflow: hidden; color: var(--faint); font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }

/* Variant 1: five boughs, one focused at a time */
.orchard-overview { position: relative; min-width: 900px; min-height: 690px; overflow: hidden; }
.orchard-overview::before { content:""; position:absolute; left:50%; bottom:-120px; width:180px; height:520px; transform:translateX(-50%); border-radius:50% 50% 20% 20%; background:linear-gradient(90deg,#2a180c,#8b5827 48%,#321c0e); clip-path:polygon(32% 0,68% 0,78% 68%,100% 100%,63% 88%,50% 100%,37% 88%,0 100%,22% 68%); box-shadow:inset 0 0 22px rgba(0,0,0,.65),0 0 40px rgba(225,154,56,.12); }
.orchard-root { position:absolute; left:50%; bottom:82px; z-index:3; display:flex; flex-direction:column; align-items:center; transform:translateX(-50%); }
.orchard-root span { color:var(--gold); font:800 34px var(--serif); }
.orchard-root strong { font:700 11px var(--serif); }
.orchard-root small { color:var(--faint); font-size:7px; }
.orchard-bough { --branch:var(--gold); --angle:0deg; --counter:0deg; position:absolute; left:50%; bottom:245px; z-index:2; display:flex; flex-direction:column; align-items:center; width:150px; padding:14px 10px; transform-origin:50% 255px; transform:translateX(-50%) rotate(var(--angle)) translateY(-210px) rotate(var(--counter)); color:var(--ink); border:1px solid color-mix(in srgb,var(--branch) 45%,transparent); border-radius:18px; background:linear-gradient(155deg,color-mix(in srgb,var(--branch) 12%,#171522),#0a0a11); cursor:pointer; box-shadow:0 0 28px color-mix(in srgb,var(--branch) 16%,transparent); }
.orchard-bough::after { content:""; position:absolute; left:50%; top:100%; width:4px; height:205px; transform-origin:top; transform:rotate(calc(var(--angle) * .42)); background:linear-gradient(var(--branch),#754922); opacity:.4; z-index:-1; }
.orchard-bough i { display:grid; place-items:center; width:54px; height:54px; margin-bottom:7px; color:var(--branch); border:1px solid var(--branch); border-radius:50%; background:color-mix(in srgb,var(--branch) 10%,#090910); font:normal 22px var(--serif); }
.orchard-bough strong { font:700 12px var(--serif); }
.orchard-bough span { margin:3px 0; color:var(--branch); font-size:8px; font-weight:900; }
.orchard-bough small { color:var(--faint); font-size:7px; }
.orchard-bough:hover { filter:brightness(1.2); transform:translateX(-50%) rotate(var(--angle)) translateY(-215px) rotate(var(--counter)) scale(1.04); }
.orchard-focus { min-width:900px; min-height:690px; padding:10px; }
.focus-bough-head { display:flex; align-items:center; gap:10px; padding:8px 12px; border-bottom:1px solid color-mix(in srgb,var(--branch) 30%,transparent); }
.focus-bough-head i { display:grid; place-items:center; width:38px; height:38px; color:var(--branch); border:1px solid var(--branch); border-radius:50%; font-style:normal; }
.focus-bough-head div { flex:1; }
.focus-bough-head strong,.focus-bough-head small { display:block; }
.focus-bough-head strong { font:700 15px var(--serif); }
.focus-bough-head small { color:var(--faint); font-size:7px; }
.focus-bough-head button { padding:6px 9px; color:var(--muted); border:1px solid var(--edge); border-radius:8px; background:rgba(255,255,255,.03); cursor:pointer; font-size:7px; }
.tier-grid { width:860px; margin:6px auto; transform-origin:top center; transition:transform .18s; }
.tier-row { display:grid; grid-template-columns:100px 1fr; align-items:center; min-height:92px; border-bottom:1px solid rgba(255,255,255,.045); }
.tier-row > header span,.tier-row > header small { display:block; }
.tier-row > header span { color:var(--branch,var(--gold)); font-size:7px; font-weight:900; letter-spacing:.12em; }
.tier-row > header small { color:var(--faint); font-size:6px; }
.tier-row > div { display:grid; grid-template-columns:repeat(5,1fr); align-items:center; justify-items:center; }
.tier-row em { color:var(--faint); font-size:7px; }

/* Variant 2: compact columns */
.river-columns { display:flex; gap:8px; width:1100px; min-height:690px; padding:10px; transform-origin:top left; transition:transform .18s; }
.river-column { --branch:var(--gold); flex:1; min-width:195px; overflow:hidden; border:1px solid color-mix(in srgb,var(--branch) 25%,transparent); border-radius:12px; background:linear-gradient(color-mix(in srgb,var(--branch) 5%,transparent),rgba(255,255,255,.01)); }
.river-column > header { display:flex; align-items:center; gap:7px; padding:8px; border-bottom:1px solid color-mix(in srgb,var(--branch) 24%,transparent); }
.river-column > header i { color:var(--branch); font-style:normal; font-size:16px; }
.river-column > header div { flex:1; }
.river-column > header strong,.river-column > header small { display:block; }
.river-column > header strong { font:700 9px var(--serif); }
.river-column > header small { color:var(--faint); font-size:6px; }
.river-column > header span { color:var(--branch); font:700 10px var(--serif); }
.river-nodes { display:grid; gap:1px; padding:4px; }
.river-nodes > p { color:var(--faint); font-size:7px; text-align:center; }

/* Variant 3: radial tree */
.radial-world { position:relative; width:980px; height:980px; margin:0 auto; transform-origin:center; transition:transform .18s; }
.radial-root { position:absolute; left:50%; top:50%; z-index:3; display:grid; place-items:center; width:110px; height:110px; transform:translate(-50%,-50%); color:var(--gold); border:2px solid var(--gold); border-radius:50%; background:radial-gradient(circle,rgba(255,211,110,.22),#12101a 70%); box-shadow:0 0 36px rgba(255,211,110,.22); text-align:center; }
.radial-root span { font-size:25px; }
.radial-root strong { font:700 9px/1.05 var(--serif); }
.tier-ring { position:absolute; left:50%; top:50%; border:1px solid rgba(255,255,255,.07); border-radius:50%; transform:translate(-50%,-50%); }
.ring-1{width:184px;height:184px}.ring-2{width:318px;height:318px}.ring-3{width:452px;height:452px}.ring-4{width:586px;height:586px}.ring-5{width:720px;height:720px}.ring-6{width:854px;height:854px}
.radial-node { --branch:var(--gold); --counter:0deg; position:absolute; left:50%; top:50%; z-index:4; width:34px; height:34px; transform:rotate(var(--angle)) translateX(var(--radius)) rotate(var(--counter)); transform-origin:center; color:var(--ink); border:0; background:transparent; cursor:pointer; transition:opacity .2s,filter .2s; }
.radial-node > span { display:grid; place-items:center; width:100%; height:100%; padding:4px; border:1px solid var(--branch); border-radius:50%; background:#0b0a12; box-shadow:0 0 8px color-mix(in srgb,var(--branch) 22%,transparent); }
.radial-node img { width:100%; height:100%; object-fit:contain; filter:grayscale(.8) brightness(.62); }
.radial-node small { display:none; position:absolute; left:50%; top:110%; z-index:5; width:92px; transform:translateX(-50%); color:var(--ink); padding:3px 5px; border:1px solid var(--edge); border-radius:5px; background:rgba(6,6,11,.95); font-size:6px; text-align:center; }
.radial-node:hover small,.radial-node.show-label:not(.filtered) small { display:block; }
.radial-node:hover { z-index:8; filter:brightness(1.4); }
.radial-node.filtered { opacity:.06; pointer-events:none; }
.radial-node.notable { width:44px; height:44px; }
.radial-node.capstone { width:54px; height:54px; }
.radial-node.awakened img { filter:brightness(1.1); }
.radial-node.locked { opacity:.32; }

/* Variant 4: searchable constellation */
.atlas-field { position:relative; width:1060px; height:740px; transform-origin:top left; transition:transform .18s; background-image:radial-gradient(circle,rgba(255,255,255,.35) 0 1px,transparent 1.5px); background-size:53px 47px; }
.atlas-label { --branch:var(--gold); position:absolute; left:var(--x); top:var(--y); color:var(--branch); font:700 8px var(--serif); letter-spacing:.13em; opacity:.55; }
.atlas-node { --branch:var(--gold); position:absolute; left:var(--x); top:var(--y); z-index:2; display:grid; place-items:center; width:var(--size); height:var(--size); padding:4px; transform:translate(-50%,-50%); border:1px solid var(--branch); border-radius:50%; background:#090912; box-shadow:0 0 10px color-mix(in srgb,var(--branch) 23%,transparent); cursor:pointer; }
.atlas-node::after { content:""; position:absolute; left:50%; top:50%; z-index:-1; width:54px; height:1px; transform:rotate(calc((var(--x) + var(--y)) * 1deg)); transform-origin:left; background:linear-gradient(90deg,color-mix(in srgb,var(--branch) 28%,transparent),transparent); }
.atlas-node img { width:100%; height:100%; object-fit:contain; filter:grayscale(.85) brightness(.58); }
.atlas-node span { display:none; position:absolute; top:105%; width:96px; padding:3px; color:var(--ink); border:1px solid var(--edge); border-radius:5px; background:rgba(6,6,11,.96); font-size:6px; }
.atlas-node:hover { z-index:8; transform:translate(-50%,-50%) scale(1.25); filter:brightness(1.3); }
.atlas-node:hover span { display:block; }
.atlas-node.awakened img { filter:brightness(1.1); }
.atlas-node.locked { opacity:.4; }

/* Variant 5: focus-only path lens */
.lens-layout { min-width:860px; min-height:690px; padding:24px 30px; }
.lens-path { display:grid; grid-template-columns:1fr 70px 240px 70px 1fr; align-items:center; min-height:410px; }
.lens-group { display:flex; flex-direction:column; align-items:center; gap:8px; }
.lens-group > span { color:var(--faint); font-size:7px; font-weight:900; letter-spacing:.15em; }
.lens-group em { color:var(--faint); font-size:8px; }
.lens-link { height:2px; background:linear-gradient(90deg,transparent,var(--scale-accent),transparent); }
.lens-focus { display:grid; place-items:center; }
.lens-node { --branch:var(--gold); display:grid; grid-template-columns:48px 1fr; grid-template-areas:"art name" "art effect"; column-gap:9px; width:190px; padding:9px; color:var(--ink); text-align:left; border:1px solid color-mix(in srgb,var(--branch) 38%,transparent); border-radius:12px; background:linear-gradient(145deg,color-mix(in srgb,var(--branch) 8%,#151522),#090a11); cursor:pointer; }
.lens-node img { grid-area:art; width:48px; height:48px; object-fit:contain; filter:grayscale(.75) brightness(.65); }
.lens-node strong { grid-area:name; align-self:end; font:700 9px var(--serif); }
.lens-node small { grid-area:effect; align-self:start; color:var(--faint); font-size:6px; line-height:1.3; }
.lens-node.focus { display:flex; flex-direction:column; align-items:center; width:220px; padding:18px; text-align:center; border-color:var(--branch); box-shadow:0 0 35px color-mix(in srgb,var(--branch) 17%,transparent); }
.lens-node.focus img { width:110px; height:110px; filter:brightness(1); }
.lens-node.focus strong { margin-top:7px; font-size:15px; }
.lens-node.focus small { font-size:8px; }
.lens-node:hover { filter:brightness(1.2); }
.lens-node.awakened img { filter:brightness(1.1); }
.lens-node.locked { opacity:.43; }
.lens-siblings { padding:12px; border:1px solid var(--edge); border-radius:12px; background:rgba(255,255,255,.02); }
.lens-siblings > span { display:block; margin-bottom:8px; color:var(--faint); font-size:7px; font-weight:900; letter-spacing:.13em; }
.lens-siblings { display:flex; align-items:center; justify-content:center; gap:15px; }
.lens-minimap { margin-top:14px; padding:10px; border:1px solid var(--edge); border-radius:10px; background:rgba(0,0,0,.18); }
.lens-minimap > span { display:block; margin-bottom:7px; color:var(--faint); font-size:6px; letter-spacing:.13em; }
.lens-minimap > div { display:grid; grid-template-columns:repeat(30,1fr); gap:2px; margin:3px 0; }
.lens-minimap i { height:4px; border-radius:2px; background:color-mix(in srgb,var(--branch) 13%,#262532); }
.lens-minimap i.on { background:var(--green); }
.lens-minimap i.focus { background:var(--gold); box-shadow:0 0 6px var(--gold); transform:scaleY(2); }

/* Scale inspector */
.scale-node-detail .scale-detail-gem { display:flex; align-items:center; gap:12px; margin:11px 0; padding:12px; border:1px solid var(--edge); border-radius:12px; background:rgba(255,255,255,.025); }
.scale-detail-gem img { width:86px; height:86px; object-fit:contain; filter:drop-shadow(0 0 14px rgba(255,211,110,.4)); }
.scale-detail-gem span,.scale-detail-gem strong,.scale-detail-gem small { display:block; }
.scale-detail-gem span { color:var(--cyan); font-size:6px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.scale-detail-gem strong { margin:4px 0; font:700 11px/1.35 var(--serif); }
.scale-detail-gem small { color:var(--muted); font-size:7px; }
.scale-path-facts { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:9px 0; }
.scale-path-facts > div { padding:8px 4px; text-align:center; border:1px solid var(--edge); border-radius:8px; background:rgba(255,255,255,.02); }
.scale-path-facts span,.scale-path-facts strong { display:block; }
.scale-path-facts span { color:var(--faint); font-size:5px; letter-spacing:.1em; }
.scale-path-facts strong { margin-top:2px; font:700 10px var(--serif); }

.recommendation-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; }
.recommendation-card { min-height: 190px; padding: 18px; }
.recommendation-card.lead { grid-column: span 2; background: radial-gradient(circle at 80% 10%,rgba(119,231,169,.12),transparent 36%),var(--panel); border-color: rgba(119,231,169,.25); }
.rank-mark { color: var(--gold); font-size: 7px; font-weight: 900; letter-spacing: .18em; }
.recommendation-card h3 { margin: 5px 0 8px; font: 700 18px var(--serif); }
.recommendation-card p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.65; }
.recommendation-card em { color: var(--ink); }
.phase-line { display: grid; grid-template-columns: auto auto 1fr auto auto 1fr auto auto; align-items: center; gap: 7px; margin-top: 22px; }
.phase-line span { color: var(--faint); font-size: 6px; text-transform: uppercase; }
.phase-line b { font-size: 8px; }
.phase-line i { height: 2px; background: linear-gradient(90deg,var(--green),rgba(119,231,169,.1)); }
.influence-strip { display: grid; grid-template-columns: auto repeat(4,1fr); align-items: center; gap: 13px; margin-top: 12px; padding: 15px 18px; }
.influence-strip > div { padding-left: 12px; border-left: 1px solid var(--edge); }
.influence-strip strong, .influence-strip small { display: block; }
.influence-strip strong { font: 700 10px var(--serif); }
.influence-strip small { margin-top: 2px; color: var(--faint); font-size: 7px; }

.ceremony { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; opacity: 0; visibility: hidden; background: rgba(3,5,10,.86); backdrop-filter: blur(12px); transition: opacity .3s,visibility .3s; }
.ceremony.open { opacity: 1; visibility: visible; }
.ceremony-glow { position: absolute; width: min(650px,90vw); height: min(650px,90vw); border-radius: 50%; background: radial-gradient(circle,rgba(116,231,255,.22),rgba(166,129,255,.09) 35%,transparent 70%); animation: ceremony-glow 2.4s ease-in-out infinite; }
@keyframes ceremony-glow { 50% { transform: scale(1.08); filter: brightness(1.25); } }
.ceremony-card { position: relative; width: min(520px,100%); padding: 25px 26px 22px; overflow: hidden; text-align: center; border: 1px solid rgba(255,226,160,.5); border-radius: 24px; background: linear-gradient(165deg,rgba(32,29,55,.98),rgba(10,11,20,.98)); box-shadow: 0 30px 90px rgba(0,0,0,.72),0 0 50px rgba(116,231,255,.12); transform: scale(.84) translateY(16px); transition: transform .4s cubic-bezier(.2,1.4,.35,1); }
.ceremony.open .ceremony-card { transform: scale(1) translateY(0); }
.ceremony-close { position: absolute; right: 12px; top: 11px; width: 32px; height: 32px; color: var(--muted); border: 1px solid var(--edge); border-radius: 50%; background: rgba(255,255,255,.035); cursor: pointer; }
.ceremony-kicker { color: var(--cyan); font-size: 7px; font-weight: 900; letter-spacing: .2em; }
.soul-figures { display: flex; justify-content: center; gap: 8px; min-height: 68px; margin: 16px 0 7px; }
.soul-figure { position: relative; width: 40px; height: 60px; filter: drop-shadow(0 0 14px rgba(116,231,255,.75)); animation: soul-arrive .8s cubic-bezier(.2,1.4,.3,1) both; animation-delay: var(--delay); }
.soul-figure::before { content: ""; position: absolute; left: 50%; top: 0; width: 22px; height: 22px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 38% 34%,#fff,#adf3ff 38%,rgba(116,231,255,.18) 72%); }
.soul-figure::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 37px; height: 43px; transform: translateX(-50%); clip-path: polygon(50% 0,76% 20%,67% 71%,100% 100%,50% 83%,0 100%,33% 71%,24% 20%); background: linear-gradient(#d6f9ff,rgba(116,231,255,.18)); }
@keyframes soul-arrive { from { opacity: 0; transform: translateY(28px) scale(.4); filter: blur(8px); } }
.ceremony-card h2 { margin: 5px 0 7px; font: 700 24px var(--serif); }
.ceremony-card > p { margin: 0 auto; max-width: 420px; color: #cdc8d7; font: italic 12px/1.55 Georgia,serif; }
.parting-light { margin: 16px 0 12px; padding: 11px 14px; border: 1px solid rgba(255,211,110,.24); border-radius: 12px; background: rgba(255,211,110,.055); }
.parting-light span { display: block; margin-bottom: 4px; color: var(--gold); font-size: 6px; font-weight: 900; letter-spacing: .2em; }
.parting-light q { color: #f3e8c9; font: 13px/1.45 Georgia,serif; }
.gift-gem { display: flex; align-items: center; gap: 10px; padding: 9px 12px; text-align: left; border: 1px solid rgba(119,231,169,.28); border-radius: 12px; background: rgba(50,128,85,.09); }
.gift-gem img { width: 62px; height: 62px; object-fit: contain; filter: drop-shadow(0 0 13px rgba(255,211,110,.5)); }
.gift-gem span,.gift-gem strong,.gift-gem small { display: block; }
.gift-gem span { color: var(--green); font-size: 6px; font-weight: 900; letter-spacing: .15em; }
.gift-gem strong { margin: 2px 0; font: 700 13px var(--serif); }
.gift-gem small { color: var(--muted); font-size: 8px; }
.ceremony-continue { margin-top: 12px; padding: 9px 20px; color: #271b05; border: 1px solid #ffe4a4; border-radius: 10px; background: linear-gradient(#ffe8a8,#e7ad40); cursor: pointer; font-weight: 900; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 70; max-width: min(440px,calc(100vw - 30px)); padding: 11px 16px; opacity: 0; transform: translate(-50%,18px); color: var(--ink); border: 1px solid var(--edge-hot); border-radius: 12px; background: rgba(15,14,26,.97); box-shadow: 0 16px 44px rgba(0,0,0,.58); pointer-events: none; font-size: 10px; transition: opacity .2s,transform .2s; }
.toast.show { opacity: 1; transform: translate(-50%,0); }
.spark-flight { position: fixed; z-index: 60; width: 18px; height: 18px; pointer-events: none; border-radius: 50%; background: radial-gradient(circle,#fff 0 14%,#b8f4ff 24%,rgba(116,231,255,.65) 45%,transparent 72%); filter: drop-shadow(0 0 10px var(--cyan)); animation: spark-flight .8s cubic-bezier(.3,.05,.45,1) both; }
@keyframes spark-flight { 0% { left: var(--sx); top: var(--sy); opacity: 0; transform: scale(.4); } 18% { opacity: 1; } 65% { transform: translate(calc((var(--ex) - var(--sx)) * .7),calc((var(--ey) - var(--sy)) * .55 - 70px)) scale(1.15); } 100% { left: var(--ex); top: var(--ey); opacity: 0; transform: scale(.2); } }

@media (max-width: 1080px) {
  .map-workbench,.tree-workbench { grid-template-columns: 1fr; }
  .inspector-panel,.tree-inspector { min-height: 0; }
  .inspector-empty,.tree-inspector .inspector-empty { min-height: 330px; }
  .inspector-art { height: 200px; }
  .recommendation-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .influence-strip { grid-template-columns: repeat(2,1fr); }
  .influence-strip > .kicker { grid-column: 1 / -1; }
  .scale-workbench { grid-template-columns:1fr; }
  .scale-inspector,.scale-inspector .inspector-empty { min-height:330px; }
  .scale-controls { flex-wrap:wrap; }
  .scale-search { flex:1 1 260px; }
  .scale-branches { order:3; flex-basis:100%; }
}

@media (max-width: 720px) {
  .lab-shell { padding-inline: 9px; }
  .lab-header { align-items: flex-start; flex-wrap: wrap; }
  .lab-title { flex-basis: calc(100% - 64px); }
  .principle-chip { width: 100%; min-width: 0; }
  .lab-tabs { grid-template-columns: 1fr; }
  .section-intro { align-items: flex-start; flex-direction: column; gap: 7px; }
  .section-intro > p { text-align: left; }
  .tree-intro { flex-direction: row; align-items: center; }
  .spark-wallet { min-width: 175px; }
  .tree-toolbar { flex-wrap: wrap; }
  .tree-toolbar .prototype-switcher { flex-basis: 100%; }
  .earn-button,.quiet-button { flex: 1; }
  .stage-head { flex-direction: column; }
  .stage-metrics { justify-content: flex-start; }
  .map-canvas { min-height: 630px; }
  .tree-canvas { height: 72vh; }
  .tree-hint { display: none; }
  .auto-bar { grid-template-columns: 1fr; }
  .auto-actions { flex-direction: row; }
  .route-node { width: 105px; }
  .route-node-orb { width: 56px; height: 56px; }
  .route-node-label { width: 112px; }
  .recommendation-grid { grid-template-columns: 1fr; }
  .recommendation-card.lead { grid-column: auto; }
  .phase-line { grid-template-columns: auto 1fr; }
  .phase-line i { display: none; }
  .influence-strip { grid-template-columns: 1fr; }
  .influence-strip > .kicker { grid-column: auto; }
  .influence-strip > div { padding: 8px 0 0; border-left: 0; border-top: 1px solid var(--edge); }
  .scale-topline { flex-direction:column; }
  .scale-stats span { flex:1; }
  .scale-search { flex-basis:100%; }
  .scale-branches { flex-basis:100%; }
  .notable-toggle { flex:1; }
  .scale-footer { flex-direction:column; }
  .scale-canvas { min-height:620px; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}