:root {
    --bg: #050608;
    --panel: #0b0f14;
    --panel-2: #111820;
    --text: #e7edf5;
    --muted: #8d9aaa;
    --line: #334155;
    --orange: #f08a24;
    --branch-color-soft: rgba(138, 147, 160, .12);
    --branch-color-mid: rgba(138, 147, 160, .34);
    --shade-1: #ff005f;
    --shade-2: #ff8700;
    --shade-3: #ffd700;
    --shade-4: #00d700;
    --shade-5: #00afff;
    --shade-6: #5f5fff;
    --shade-7: #af00ff;
    --shade-8: #ff00af;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
html, body { min-height: 100%; margin: 0; background: var(--bg); color: var(--text); }
body { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
a { color: inherit; }

.map-shell {
    min-height: 100vh;
    padding: 22px clamp(14px, 3vw, 34px) 42px;
    background:
        radial-gradient(circle at 12% 0%, rgba(240, 138, 36, .18), transparent 24rem),
        radial-gradient(circle at 90% 8%, rgba(79, 140, 255, .12), transparent 28rem),
        radial-gradient(circle at 42% 100%, rgba(179, 107, 255, .10), transparent 30rem),
        linear-gradient(180deg, #07090d 0%, #050608 52%, #030405 100%);
}

.map-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin: 0 0 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(148, 163, 184, .18);
}

.map-title h1 {
    margin: 0;
    color: #fff7ed;
    font: 800 clamp(24px, 4vw, 42px)/1.05 ui-sans-serif, system-ui, sans-serif;
    letter-spacing: 0;
    text-shadow: 0 0 26px rgba(240, 138, 36, .18);
}

.map-title p {
    max-width: 760px;
    margin: 10px 0 0;
    color: var(--muted);
    font: 14px/1.6 ui-sans-serif, system-ui, sans-serif;
}

.map-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px;
    flex: 0 0 auto;
}

.map-actions a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid rgba(240, 138, 36, .42);
    border-radius: 4px;
    background: #130d08;
    color: #ffd19a;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
}

.map-actions a:hover { background: #211407; color: #fff2df; }

.map-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 22px;
}

.map-stat {
    min-width: 138px;
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 4px;
    background: rgba(11, 15, 20, .82);
}

.map-stat strong {
    display: block;
    color: #fff;
    font-size: 20px;
    line-height: 1.1;
}

.map-stat span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font: 11px/1.2 ui-sans-serif, system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.map-board {
    overflow: auto;
    max-width: 100%;
    min-height: 58vh;
    padding: 20px 18px 30px;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 6px;
    background:
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.018) 1px, transparent 1px),
        rgba(5, 7, 10, .86);
    background-size: 34px 34px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 24px 70px rgba(0, 0, 0, .38);
}

.tree, .tree ul {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0 0 0 26px;
}

.tree { min-width: max-content; padding-left: 0; }
.tree ul { margin-left: 14px; }

.tree ul::before {
    content: "";
    position: absolute;
    top: -7px;
    bottom: 13px;
    left: 7px;
    width: 2px;
    background: linear-gradient(180deg, var(--branch-color), color-mix(in srgb, var(--branch-color) 28%, transparent));
    opacity: .74;
    border-radius: 999px;
}

.tree li {
    position: relative;
    margin: 0;
    padding: 4px 0 4px 25px;
    --branch-base: #8a93a0;
    --branch-color: var(--branch-base);
    --branch-glow: rgba(138, 147, 160, .18);
    --branch-bg: rgba(138, 147, 160, .08);
}

.tree li::before {
    content: "";
    position: absolute;
    top: 15px;
    left: 7px;
    width: 18px;
    height: 2px;
    background: linear-gradient(90deg, var(--branch-color), color-mix(in srgb, var(--branch-color) 38%, transparent));
    opacity: .82;
    border-radius: 999px;
}

.tree > li { padding-left: 0; }
.tree > li::before { display: none; }

.group-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 880px;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--branch-bg), transparent 78%);
    color: var(--branch-color);
    text-decoration: none;
    text-shadow: 0 1px 0 #000, 0 0 16px var(--branch-glow);
    border-left: 4px solid var(--branch-color);
}

.group-swatch {
    width: 11px;
    height: 11px;
    flex: 0 0 11px;
    border-radius: 2px;
    background: currentColor;
    box-shadow: 0 0 14px currentColor;
}

.group-link:hover {
    background: linear-gradient(90deg, color-mix(in srgb, var(--branch-color) 18%, transparent), rgba(255,255,255,.035) 82%);
    color: #fff;
    border-color: color-mix(in srgb, var(--branch-color) 62%, transparent);
    box-shadow: 0 0 0 1px rgba(255,255,255,.03), 0 0 22px var(--branch-glow);
}

.group-path {
    font-weight: 800;
    white-space: nowrap;
    font-size: 13px;
}

.group-name {
    color: #c6d0dd;
    font: 12px/1.2 ui-sans-serif, system-ui, sans-serif;
    white-space: nowrap;
}

.group-meta {
    color: color-mix(in srgb, var(--branch-color) 48%, #718096);
    font: 10px/1.2 ui-sans-serif, system-ui, sans-serif;
    white-space: nowrap;
}

.map-empty {
    padding: 28px;
    color: var(--muted);
    text-align: center;
}

.map-footer {
    margin-top: 12px;
    color: var(--muted);
    font: 12px/1.4 ui-sans-serif, system-ui, sans-serif;
}

.depth-0 { --branch-color: #ffaf00; }
.depth-1 { --branch-color: var(--shade-1); }
.depth-2 { --branch-color: var(--shade-2); }
.depth-3 { --branch-color: var(--shade-3); }
.depth-4 { --branch-color: var(--shade-4); }
.depth-5 { --branch-color: var(--shade-5); }
.depth-6 { --branch-color: var(--shade-6); }
.depth-7 { --branch-color: var(--shade-7); }
.depth-8 { --branch-color: var(--shade-8); }

.branch-comp { --shade-1:#005fff; --shade-2:#0087ff; --shade-3:#00afff; --shade-4:#00d7ff; --shade-5:#00ffff; --shade-6:#5fd7ff; --shade-7:#5fafff; --shade-8:#8787ff; --branch-glow: rgba(0,175,255,.34); --branch-bg: rgba(0,135,255,.15); }
.branch-news { --shade-1:#ff5f00; --shade-2:#ff8700; --shade-3:#ffaf00; --shade-4:#ffd700; --shade-5:#ffff00; --shade-6:#ffaf5f; --shade-7:#ff875f; --shade-8:#ff5f5f; --branch-glow: rgba(255,175,0,.34); --branch-bg: rgba(255,135,0,.15); }
.branch-rec { --shade-1:#008700; --shade-2:#00af00; --shade-3:#00d700; --shade-4:#00ff00; --shade-5:#5fff00; --shade-6:#87ff00; --shade-7:#afff00; --shade-8:#d7ff00; --branch-glow: rgba(0,215,0,.32); --branch-bg: rgba(0,175,0,.14); }
.branch-sci { --shade-1:#008787; --shade-2:#00afaf; --shade-3:#00d7d7; --shade-4:#00ffff; --shade-5:#5fffff; --shade-6:#87ffff; --shade-7:#5fd7d7; --shade-8:#5fafd7; --branch-glow: rgba(0,215,215,.32); --branch-bg: rgba(0,175,175,.14); }
.branch-arts { --shade-1:#8700ff; --shade-2:#af00ff; --shade-3:#d700ff; --shade-4:#ff00ff; --shade-5:#ff5fff; --shade-6:#ff87ff; --shade-7:#d75fff; --shade-8:#af5fff; --branch-glow: rgba(215,0,255,.34); --branch-bg: rgba(175,0,255,.15); }
.branch-humanities { --shade-1:#af8700; --shade-2:#d7af00; --shade-3:#ffd700; --shade-4:#ffff00; --shade-5:#d7ff00; --shade-6:#afff00; --shade-7:#ffd75f; --shade-8:#ffaf00; --branch-glow: rgba(255,215,0,.30); --branch-bg: rgba(215,175,0,.14); }
.branch-misc { --shade-1:#ff005f; --shade-2:#ff0087; --shade-3:#ff00af; --shade-4:#ff00d7; --shade-5:#ff00ff; --shade-6:#d700ff; --shade-7:#af00ff; --shade-8:#8700ff; --branch-glow: rgba(255,0,175,.30); --branch-bg: rgba(255,0,135,.14); }
.branch-meta { --shade-1:#ffaf00; --shade-2:#ff8700; --shade-3:#ff5f00; --shade-4:#ff005f; --shade-5:#ff0087; --shade-6:#d70087; --shade-7:#af005f; --shade-8:#87005f; --branch-glow: rgba(255,135,0,.30); --branch-bg: rgba(255,135,0,.14); }
.branch-alt { --shade-1:#005fd7; --shade-2:#0087ff; --shade-3:#00afff; --shade-4:#00d7ff; --shade-5:#00ffff; --shade-6:#5fd7ff; --shade-7:#5fafff; --shade-8:#5f87ff; --branch-glow: rgba(0,135,255,.34); --branch-bg: rgba(0,95,215,.15); }
.branch-free { --shade-1:#00af5f; --shade-2:#00d787; --shade-3:#00ffaf; --shade-4:#5fffd7; --shade-5:#87ffaf; --shade-6:#afff87; --shade-7:#87d75f; --shade-8:#5faf5f; --branch-glow: rgba(0,255,175,.30); --branch-bg: rgba(0,215,135,.14); }
.branch-de { --shade-1:#d7af00; --shade-2:#ffd700; --shade-3:#ffff00; --shade-4:#ffaf00; --shade-5:#ff8700; --shade-6:#d78700; --shade-7:#af8700; --shade-8:#878700; --branch-glow: rgba(255,215,0,.30); --branch-bg: rgba(255,175,0,.14); }
.branch-fr, .branch-uk { --shade-1:#005faf; --shade-2:#0087d7; --shade-3:#00afff; --shade-4:#5fafff; --shade-5:#0087ff; --shade-6:#005fff; --shade-7:#5f5fff; --shade-8:#875fff; --branch-glow: rgba(0,175,255,.30); --branch-bg: rgba(0,135,215,.14); }
.branch-it { --shade-1:#00875f; --shade-2:#00af87; --shade-3:#00d75f; --shade-4:#00ff87; --shade-5:#5fff87; --shade-6:#87ff5f; --shade-7:#5fd75f; --shade-8:#00af5f; --branch-glow: rgba(0,215,95,.30); --branch-bg: rgba(0,175,95,.14); }
.branch-nl, .branch-aus { --shade-1:#d75f00; --shade-2:#ff5f00; --shade-3:#ff8700; --shade-4:#ffaf00; --shade-5:#ffaf5f; --shade-6:#ff875f; --shade-7:#d78700; --shade-8:#af5f00; --branch-glow: rgba(255,135,0,.30); --branch-bg: rgba(215,95,0,.14); }
.branch-no { --shade-1:#005f87; --shade-2:#0087af; --shade-3:#00afd7; --shade-4:#00d7ff; --shade-5:#5fd7ff; --shade-6:#00afff; --shade-7:#0087d7; --shade-8:#005faf; --branch-glow: rgba(0,175,215,.30); --branch-bg: rgba(0,135,175,.14); }
.branch-pl, .branch-can { --shade-1:#d70000; --shade-2:#ff0000; --shade-3:#ff005f; --shade-4:#ff5f5f; --shade-5:#ff5f87; --shade-6:#d75f5f; --shade-7:#af0000; --shade-8:#870000; --branch-glow: rgba(255,0,0,.30); --branch-bg: rgba(215,0,0,.14); }
.branch-relcom { --shade-1:#5f00af; --shade-2:#8700d7; --shade-3:#af00ff; --shade-4:#d700ff; --shade-5:#af5fff; --shade-6:#875fff; --shade-7:#5f5fff; --shade-8:#5f00d7; --branch-glow: rgba(175,0,255,.30); --branch-bg: rgba(135,0,215,.14); }
.branch-fj { --shade-1:#d7005f; --shade-2:#ff0087; --shade-3:#ff00af; --shade-4:#ff5faf; --shade-5:#ff87af; --shade-6:#ff5f87; --shade-7:#d75f87; --shade-8:#af005f; --branch-glow: rgba(255,0,135,.30); --branch-bg: rgba(215,0,95,.14); }
.branch-cn { --shade-1:#af0000; --shade-2:#d70000; --shade-3:#ff0000; --shade-4:#ff5f00; --shade-5:#ff8700; --shade-6:#ff005f; --shade-7:#d7005f; --shade-8:#870000; --branch-glow: rgba(255,0,0,.30); --branch-bg: rgba(215,0,0,.14); }
.branch-tw { --shade-1:#0000ff; --shade-2:#005fff; --shade-3:#0087ff; --shade-4:#00afff; --shade-5:#5fafff; --shade-6:#875fff; --shade-7:#5f5fff; --shade-8:#005fd7; --branch-glow: rgba(0,95,255,.30); --branch-bg: rgba(0,95,255,.14); }
.branch-hk { --shade-1:#8700af; --shade-2:#af00d7; --shade-3:#d700ff; --shade-4:#ff00ff; --shade-5:#ff5fff; --shade-6:#d75fff; --shade-7:#af5fff; --shade-8:#8700d7; --branch-glow: rgba(215,0,255,.30); --branch-bg: rgba(175,0,215,.14); }
.branch-soc { --shade-1:#af005f; --shade-2:#d70087; --shade-3:#ff00af; --shade-4:#ff5fd7; --shade-5:#ff87d7; --shade-6:#d75faf; --shade-7:#af5f87; --shade-8:#87005f; --branch-glow: rgba(255,0,175,.30); --branch-bg: rgba(215,0,135,.14); }
.branch-talk { --shade-1:#af5f00; --shade-2:#d75f00; --shade-3:#ff8700; --shade-4:#ffaf00; --shade-5:#ffd700; --shade-6:#d7af00; --shade-7:#d78700; --shade-8:#af8700; --branch-glow: rgba(255,135,0,.30); --branch-bg: rgba(215,95,0,.14); }

.branch-alt.depth-1 > .group-link { color: #005fd7 !important; border-left-color: #005fd7 !important; }
.branch-alt.depth-2 > .group-link { color: #0087ff !important; border-left-color: #0087ff !important; }
.branch-alt.depth-3 > .group-link { color: #00afff !important; border-left-color: #00afff !important; }
.branch-alt.depth-4 > .group-link { color: #00d7ff !important; border-left-color: #00d7ff !important; }
.branch-alt.depth-5 > .group-link { color: #00ffff !important; border-left-color: #00ffff !important; }
.branch-alt.depth-6 > .group-link { color: #5fd7ff !important; border-left-color: #5fd7ff !important; }
.branch-alt.depth-7 > .group-link { color: #5fafff !important; border-left-color: #5fafff !important; }
.branch-alt.depth-8 > .group-link { color: #5f87ff !important; border-left-color: #5f87ff !important; }

.branch-comp.depth-1 > .group-link { color: #2f6fed !important; border-left-color: #2f6fed !important; }
.branch-comp.depth-2 > .group-link { color: #4f8cff !important; border-left-color: #4f8cff !important; }
.branch-comp.depth-3 > .group-link { color: #72a6ff !important; border-left-color: #72a6ff !important; }
.branch-comp.depth-4 > .group-link { color: #94bdff !important; border-left-color: #94bdff !important; }
.branch-comp.depth-5 > .group-link { color: #b3d0ff !important; border-left-color: #b3d0ff !important; }
.branch-comp.depth-6 > .group-link { color: #c9ddff !important; border-left-color: #c9ddff !important; }
.branch-comp.depth-7 > .group-link { color: #dae8ff !important; border-left-color: #dae8ff !important; }
.branch-comp.depth-8 > .group-link { color: #e8f1ff !important; border-left-color: #e8f1ff !important; }

.branch-arts.depth-1 > .group-link { color: #8848dc !important; border-left-color: #8848dc !important; }
.branch-arts.depth-2 > .group-link { color: #a15af1 !important; border-left-color: #a15af1 !important; }
.branch-arts.depth-3 > .group-link { color: #b36bff !important; border-left-color: #b36bff !important; }
.branch-arts.depth-4 > .group-link { color: #c285ff !important; border-left-color: #c285ff !important; }
.branch-arts.depth-5 > .group-link { color: #d09dff !important; border-left-color: #d09dff !important; }
.branch-arts.depth-6 > .group-link { color: #ddb8ff !important; border-left-color: #ddb8ff !important; }
.branch-arts.depth-7 > .group-link { color: #ead2ff !important; border-left-color: #ead2ff !important; }
.branch-arts.depth-8 > .group-link { color: #f4e6ff !important; border-left-color: #f4e6ff !important; }

.branch-news.depth-1 > .group-link { color: #d66a16 !important; border-left-color: #d66a16 !important; }
.branch-news.depth-2 > .group-link { color: #ff8a24 !important; border-left-color: #ff8a24 !important; }
.branch-news.depth-3 > .group-link { color: #ff9d3c !important; border-left-color: #ff9d3c !important; }
.branch-news.depth-4 > .group-link { color: #ffb15f !important; border-left-color: #ffb15f !important; }
.branch-news.depth-5 > .group-link { color: #ffc482 !important; border-left-color: #ffc482 !important; }
.branch-news.depth-6 > .group-link { color: #ffd5a3 !important; border-left-color: #ffd5a3 !important; }
.branch-news.depth-7 > .group-link { color: #ffe2bf !important; border-left-color: #ffe2bf !important; }
.branch-news.depth-8 > .group-link { color: #ffedd8 !important; border-left-color: #ffedd8 !important; }

.branch-rec.depth-1 > .group-link { color: #23884a !important; border-left-color: #23884a !important; }
.branch-rec.depth-2 > .group-link { color: #2fa95d !important; border-left-color: #2fa95d !important; }
.branch-rec.depth-3 > .group-link { color: #3dbe6c !important; border-left-color: #3dbe6c !important; }
.branch-rec.depth-4 > .group-link { color: #5bd184 !important; border-left-color: #5bd184 !important; }
.branch-rec.depth-5 > .group-link { color: #7bdd9b !important; border-left-color: #7bdd9b !important; }
.branch-rec.depth-6 > .group-link { color: #9ee8b6 !important; border-left-color: #9ee8b6 !important; }
.branch-rec.depth-7 > .group-link { color: #bff0ce !important; border-left-color: #bff0ce !important; }
.branch-rec.depth-8 > .group-link { color: #ddf8e7 !important; border-left-color: #ddf8e7 !important; }

.branch-sci.depth-1 > .group-link { color: #1596a5 !important; border-left-color: #1596a5 !important; }
.branch-sci.depth-2 > .group-link { color: #20b5c5 !important; border-left-color: #20b5c5 !important; }
.branch-sci.depth-3 > .group-link { color: #27c7d8 !important; border-left-color: #27c7d8 !important; }
.branch-sci.depth-4 > .group-link { color: #4fd6e4 !important; border-left-color: #4fd6e4 !important; }
.branch-sci.depth-5 > .group-link { color: #78e2ec !important; border-left-color: #78e2ec !important; }
.branch-sci.depth-6 > .group-link { color: #9cecf3 !important; border-left-color: #9cecf3 !important; }
.branch-sci.depth-7 > .group-link { color: #c1f5f8 !important; border-left-color: #c1f5f8 !important; }
.branch-sci.depth-8 > .group-link { color: #ddfbfd !important; border-left-color: #ddfbfd !important; }

.tree .depth-1 > .group-link { color: var(--shade-1) !important; border-left-color: var(--shade-1) !important; }
.tree .depth-2 > .group-link { color: var(--shade-2) !important; border-left-color: var(--shade-2) !important; }
.tree .depth-3 > .group-link { color: var(--shade-3) !important; border-left-color: var(--shade-3) !important; }
.tree .depth-4 > .group-link { color: var(--shade-4) !important; border-left-color: var(--shade-4) !important; }
.tree .depth-5 > .group-link { color: var(--shade-5) !important; border-left-color: var(--shade-5) !important; }
.tree .depth-6 > .group-link { color: var(--shade-6) !important; border-left-color: var(--shade-6) !important; }
.tree .depth-7 > .group-link { color: var(--shade-7) !important; border-left-color: var(--shade-7) !important; }
.tree .depth-8 > .group-link { color: var(--shade-8) !important; border-left-color: var(--shade-8) !important; }

@media (max-width: 760px) {
    .map-shell { padding: 16px 10px 28px; }
    .map-header { align-items: flex-start; flex-direction: column; }
    .map-actions { justify-content: flex-start; }
    .map-board { padding: 14px 10px 24px; }
    .tree, .tree ul { padding-left: 20px; }
    .tree { padding-left: 0; }
    .tree ul { margin-left: 8px; }
    .group-link { gap: 7px; padding: 5px 6px; }
    .group-name, .group-meta { display: none; }
}