@font-face {
  font-family: "Exo";
  src: url("../../../Tools/Font/Exo/Exo2-VariableFont_wght.ttf") format("truetype");
  font-display: swap;
  font-weight: 100 900;
}

:root {
  --ink: #061018;
  --ink-soft: #091922;
  --panel: #0d202a;
  --panel-raised: #102832;
  --line: rgba(166, 217, 224, .2);
  --line-strong: rgba(98, 231, 237, .42);
  --text: #edf7f5;
  --muted: #a9c0c2;
  --cyan: #62e7ed;
  --amber: #f2b84b;
  --max: 1440px;
  color-scheme: dark;
  font-family: "Exo", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; overflow-x: clip; color: var(--text); background: radial-gradient(circle at 74% 4%, rgba(44, 176, 187, .18), transparent 31rem), radial-gradient(circle at 8% 38%, rgba(242, 184, 75, .07), transparent 28rem), var(--ink); line-height: 1.55; }
body::before { position: fixed; z-index: -1; inset: 0; pointer-events: none; opacity: .38; background-image: linear-gradient(rgba(119, 203, 207, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(119, 203, 207, .04) 1px, transparent 1px); background-size: 48px 48px; content: ""; mask-image: linear-gradient(to bottom, #000, transparent 88%); }
a { color: inherit; }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 4px; }
[hidden] { display: none !important; }
.skip-link { position: fixed; z-index: 20; top: 1rem; left: 1rem; padding: .75rem 1rem; color: var(--ink); background: var(--cyan); transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }

main { width: min(calc(100% - 2rem), var(--max)); margin-inline: auto; }
h1, h2, h3, p { text-wrap: pretty; }
h1, h2, h3 { margin: 0; line-height: 1; letter-spacing: -.045em; }
.eyebrow { display: flex; margin: 0 0 .75rem; align-items: center; gap: .55rem; color: var(--cyan); font-size: .7rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.eyebrow span { width: 1.8rem; height: 1px; background: currentColor; }

.tree-hero { display: grid; min-height: 12.5rem; padding: clamp(1.6rem, 3vw, 2.5rem) clamp(0rem, 2vw, 2rem); align-items: center; grid-template-columns: minmax(0, 1fr) 9rem; gap: clamp(1.5rem, 4vw, 3rem); border-bottom: 1px solid var(--line); }
.tree-hero-copy { max-width: 55rem; }
.tree-hero h1 { font-size: clamp(2.5rem, 4vw, 3.9rem); }
.tree-hero h1 em { color: var(--cyan); font-style: normal; }
.tree-hero-copy > p:not(.eyebrow) { max-width: 46rem; margin: .65rem 0 0; color: var(--muted); font-size: .9rem; }
.coverage { display: flex; margin: 1rem 0 0; gap: 0; }
.coverage div { min-width: 6.5rem; padding: .05rem clamp(.8rem, 1.5vw, 1.25rem); border-left: 1px solid var(--line); }
.coverage div:first-child { padding-left: 0; border: 0; }
.coverage dt { color: var(--muted); font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.coverage dd { margin: 0; color: var(--text); font-size: 1.2rem; font-weight: 800; }
.hero-art { position: relative; display: grid; width: 8.5rem; aspect-ratio: 1; margin-inline: auto; place-items: center; }
.hero-art::before { position: absolute; width: 48%; aspect-ratio: 1; background: rgba(98, 231, 237, .1); border: 1px solid var(--line-strong); content: ""; transform: rotate(45deg); box-shadow: 0 0 35px rgba(98, 231, 237, .14); }
.hero-art img { position: relative; z-index: 2; width: 48%; height: auto; filter: drop-shadow(0 12px 12px rgba(0,0,0,.55)); transform: rotate(7deg); }
.hero-orbit { position: absolute; border: 1px solid rgba(98, 231, 237, .24); border-radius: 50%; }
.hero-orbit-a { inset: 8%; }
.hero-orbit-b { inset: 20%; border-style: dashed; }
.hero-orbit::before, .hero-orbit::after { position: absolute; width: .35rem; aspect-ratio: 1; background: var(--cyan); border-radius: 50%; box-shadow: 0 0 10px var(--cyan); content: ""; }
.hero-orbit-a::before { top: 11%; left: 18%; }
.hero-orbit-a::after { right: 3%; bottom: 31%; background: var(--amber); box-shadow: 0 0 14px var(--amber); }
.hero-level { position: absolute; z-index: 3; right: 7%; bottom: 12%; color: var(--ink); background: var(--amber); padding: .12rem .38rem; font-size: .7rem; font-weight: 900; transform: rotate(-4deg); }

.tree-workspace { display: grid; padding: clamp(1.35rem, 3vw, 2.5rem) 0 clamp(4rem, 8vw, 7rem); align-items: start; gap: 1.25rem; }
.tree-command { padding: 1rem; background: linear-gradient(120deg, rgba(16, 47, 58, .88), rgba(7, 23, 31, .94)); border: 1px solid var(--line); border-top: 2px solid var(--cyan); box-shadow: 0 20px 50px rgba(0, 7, 11, .2); }
.command-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.command-heading .eyebrow { margin-bottom: .3rem; }
.command-heading h2 { font-size: 1.4rem; }
.clear-button { padding: .35rem .55rem; color: var(--muted); background: transparent; border: 1px solid var(--line); font-size: .7rem; }
.clear-button:hover { color: var(--text); border-color: var(--cyan); }
.tree-command-row.catalog-controls { display: grid; margin-top: .85rem; align-items: end; grid-template-columns: minmax(15rem, 1fr) minmax(12rem, 17rem) auto; gap: .75rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
fieldset legend { display: block; margin-bottom: .55rem; color: var(--muted); font-size: .68rem; font-weight: 760; letter-spacing: .08em; text-transform: uppercase; }
.technology-search-control { min-width: 0; }
fieldset { display: grid; padding: 0; margin: 0; gap: .55rem; border: 0; }
.check-control { display: grid; padding: .65rem; align-items: center; grid-template-columns: auto 1fr; gap: .65rem; background: rgba(98, 231, 237, .035); border: 1px solid var(--line); cursor: pointer; }
.check-control:hover { border-color: var(--line-strong); }
.check-control input { position: absolute; opacity: 0; }
.check-box { display: grid; width: 1.1rem; height: 1.1rem; place-items: center; border: 1px solid var(--cyan); }
.check-control input:checked + .check-box::after { width: .55rem; height: .55rem; background: var(--cyan); content: ""; }
.check-control input:focus-visible + .check-box { outline: 3px solid var(--amber); outline-offset: 3px; }
.check-control--ancient .check-box { border-color: var(--amber); }
.check-control--ancient input:checked + .check-box::after { background: var(--amber); }
.check-control strong, .check-control small { display: block; }
.check-control strong { font-size: .78rem; }
.check-control small { color: var(--muted); font-size: .65rem; }
.range-fields { display: grid; align-items: end; grid-template-columns: 1fr auto 1fr; gap: .55rem; }
.range-fields label { color: var(--muted); font-size: .68rem; }
.range-fields input { display: block; width: 100%; min-height: 2.8rem; margin-top: .25rem; padding: .35rem .6rem; color: var(--text); background: rgba(3, 15, 21, .78); border: 1px solid var(--line); border-radius: 8px 2px 8px 2px; }
.range-fields > span { padding-bottom: .55rem; color: var(--cyan); }
.command-control { position: relative; min-width: 0; }
.level-picker-trigger { width: 100%; min-width: 12rem; justify-content: flex-start; text-transform: none; letter-spacing: 0; }
.filter-command-control .catalog-trigger { width: 100%; }
.empty-state button { padding: .55rem .85rem; color: var(--ink); background: var(--cyan); border: 0; font-weight: 800; }
.filter-trigger span[hidden] { display: none; }
.tree-command .catalog-trigger { gap: .55rem; }
.tree-command .filter-count-badge { margin-left: 0; }
.tree-command .catalog-trigger:hover, .tree-command .catalog-trigger[aria-expanded="true"] { color: var(--cyan); background: rgba(98, 231, 237, .12); box-shadow: 0 12px 28px rgba(0, 0, 0, .18); }

.command-popover { position: absolute; z-index: 160; top: calc(100% + .55rem); right: 0; width: min(31rem, calc(100vw - 2rem)); max-height: min(34rem, calc(100dvh - 1rem)); display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; color: var(--text); background: #091b24; border: 1px solid var(--line-strong); border-top: 2px solid var(--cyan); border-radius: 12px 2px 12px 2px; box-shadow: 0 28px 80px rgba(0, 0, 0, .62); }
.command-popover.is-above { top: auto; bottom: calc(100% + .55rem); }
.command-popover-header { padding: .8rem .9rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: #0d2631; border-bottom: 1px solid var(--line); }
.command-popover-header h2 { font-size: 1.2rem; }
.level-picker-body { min-height: 0; padding: .85rem; overflow-y: auto; }
.level-number-shell input { padding-right: 4.8rem; }
.level-number-shell button { position: absolute; right: .3rem; min-height: 2.65rem; padding: 0 .8rem; color: var(--ink); background: var(--cyan); border: 0; border-radius: 7px 2px 7px 2px; font-size: .68rem; font-weight: 800; }
.level-picker-grid { margin-top: .8rem; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: .35rem; }
.level-picker-grid button { min-width: 0; min-height: 2.55rem; padding: 0; color: var(--muted); background: rgba(98, 231, 237, .035); border: 1px solid var(--line); border-radius: 7px 2px 7px 2px; font-size: .7rem; font-variant-numeric: tabular-nums; }
.level-picker-grid button:hover, .level-picker-grid button:focus-visible { color: var(--ink); background: var(--cyan); border-color: var(--cyan); }
.level-picker-grid button[aria-current="true"] { color: var(--cyan); border-color: var(--cyan); background: rgba(98, 231, 237, .12); }

.tree-results { min-width: 0; }
.results-bar { display: flex; min-height: 4.25rem; padding-bottom: 1rem; align-items: end; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); }
.results-kicker { margin: 0 0 .2rem; color: var(--cyan); font-size: .67rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.results-bar h2 { font-size: clamp(1.4rem, 2vw, 1.85rem); }
.results-bar h2 strong { color: var(--cyan); }
#resultStatus { max-width: 26rem; margin: 0; color: var(--muted); font-size: .72rem; text-align: right; }
.loading-state { display: flex; min-height: 15rem; align-items: center; justify-content: center; gap: .8rem; color: var(--muted); }
.loading-state span { width: 1rem; aspect-ratio: 1; border: 2px solid var(--line); border-top-color: var(--cyan); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.technology-levels { position: relative; isolation: isolate; }
.level-section { position: relative; display: grid; min-width: 0; padding: 1.1rem 0 1.35rem; grid-template-columns: 5.25rem minmax(0, 1fr); gap: 1rem; scroll-margin-top: 1rem; border-bottom: 1px solid var(--line); }
.level-rail { position: relative; min-height: 12rem; }
.level-rail::before { position: absolute; top: -1.1rem; bottom: -1.35rem; left: 50%; width: 1px; background: linear-gradient(to bottom, rgba(98, 231, 237, .18), var(--cyan) 25%, var(--cyan) 75%, rgba(98, 231, 237, .18)); content: ""; box-shadow: 0 0 12px rgba(98, 231, 237, .4); transform: translateX(-50%); }
.level-marker { position: sticky; z-index: 1; top: 1.25rem; display: grid; width: 3.75rem; height: 3.75rem; margin: .9rem auto 0; place-items: center; color: var(--text); background: #071923; border: 1px solid var(--cyan); font-size: 1.2rem; font-weight: 850; font-variant-numeric: tabular-nums; transform: rotate(45deg); box-shadow: 0 0 16px rgba(98, 231, 237, .48), inset 0 0 20px rgba(98, 231, 237, .08); }
.level-marker::before { position: absolute; inset: .3rem; border: 1px solid rgba(98, 231, 237, .2); content: ""; }
.level-marker::after { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text); content: attr(data-level); text-shadow: 0 0 12px rgba(98, 231, 237, .55); transform: rotate(-45deg); }
.level-content { min-width: 0; }
.level-meta { display: flex; min-height: 1.5rem; margin-bottom: .55rem; align-items: center; justify-content: space-between; gap: 1rem; }
.level-meta h3 { color: var(--text); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
.level-total { color: var(--muted); font-size: .64rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.technology-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: .65rem; }
.tech-card { display: grid; min-width: 0; min-height: 184px; overflow: hidden; grid-template-rows: 112px minmax(2.35rem, auto) 1.75rem; background: #091b24; border: 1px solid rgba(98, 231, 237, .48); border-radius: .3rem; transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.tech-card:hover, .tech-card:focus-within { border-color: var(--cyan); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 5, 9, .34), 0 0 16px rgba(98, 231, 237, .09); }
.tech-card--ancient { background: #17150f; border-color: rgba(242, 184, 75, .62); }
.tech-card--ancient:hover { border-color: var(--amber); box-shadow: 0 10px 26px rgba(0, 5, 9, .34), 0 0 16px rgba(242, 184, 75, .1); }
.tech-media { position: relative; display: grid; overflow: hidden; place-items: center; background: radial-gradient(circle at 50% 55%, rgba(72, 157, 181, .22), transparent 55%), linear-gradient(155deg, #124666, #0b3147); border-bottom: 1px solid rgba(98, 231, 237, .24); }
.tech-card--ancient .tech-media { background: radial-gradient(circle at 50% 55%, rgba(242, 184, 75, .17), transparent 55%), linear-gradient(155deg, #554020, #241d12); border-bottom-color: rgba(242, 184, 75, .3); }
.tech-media img { display: block; width: 100px; height: 100px; object-fit: contain; filter: drop-shadow(0 8px 7px rgba(0, 0, 0, .42)); }
.tech-card--image-fallback .tech-media img { width: 72px; height: 72px; opacity: .65; }
.tech-cost { position: absolute; z-index: 1; top: 0; left: 0; right: auto; display: grid; min-width: 1.45rem; min-height: 1.45rem; padding: .12rem .35rem; place-items: center; color: #031017; background: var(--cyan); border-bottom-right-radius: .3rem; font-size: .72rem; font-weight: 900; font-variant-numeric: tabular-nums; box-shadow: 0 3px 12px rgba(0, 0, 0, .3); }
.tech-card--ancient .tech-cost { background: var(--amber); }
.tech-info-trigger { position: absolute; z-index: 2; top: 0; right: 0; display: grid; width: 2.75rem; height: 2.75rem; padding: 0; place-items: center; color: var(--cyan); background: transparent; border: 0; line-height: 0; }
.tech-info-trigger svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.85; pointer-events: none; filter: drop-shadow(0 0 7px rgba(98, 231, 237, .35)); }
.tech-info-trigger:hover, .tech-info-trigger[aria-expanded="true"] { color: #bfffff; }
.tech-info-trigger:focus-visible { outline: 3px solid var(--amber); outline-offset: -4px; }
.tech-card--ancient .tech-info-trigger { color: var(--amber); }
.tech-card--ancient .tech-info-trigger:hover, .tech-card--ancient .tech-info-trigger[aria-expanded="true"] { color: #ffe1a1; }
.tech-card h4 { display: grid; padding: .3rem .42rem .2rem; margin: 0; place-items: center; color: var(--text); font-size: .76rem; font-weight: 760; line-height: 1.15; letter-spacing: -.01em; text-align: center; }
.tech-card-footer { display: grid; grid-template-columns: 1fr auto; background: rgba(98, 231, 237, .07); border-top: 1px solid rgba(98, 231, 237, .14); }
.tech-kind { display: grid; padding-left: .4rem; align-items: center; color: #8eeef2; font-size: .52rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.materials-trigger { position: relative; min-width: 4.65rem; padding: .15rem .4rem; overflow: hidden; color: var(--text); background: rgba(98, 231, 237, .09); border: 0; border-left: 1px solid rgba(98, 231, 237, .2); font-size: .57rem; font-weight: 800; isolation: isolate; transition: color .2s ease, box-shadow .2s ease; }
.materials-trigger::before { position: absolute; z-index: -2; inset: 0; background: var(--cyan); content: ""; transform: scaleX(0); transform-origin: left center; transition: transform .28s cubic-bezier(.2, .75, .25, 1); }
.materials-trigger::after { position: absolute; z-index: -1; inset: 0; opacity: 0; background: linear-gradient(110deg, transparent 24%, rgba(255, 255, 255, .48) 49%, transparent 74%); content: ""; pointer-events: none; transform: translateX(-125%); }
.materials-trigger-label { position: relative; display: inline-flex; align-items: center; gap: .25rem; transition: transform .24s cubic-bezier(.2, .75, .25, 1); }
.materials-trigger-label svg { width: .75rem; height: .75rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.materials-trigger:hover, .materials-trigger:focus-visible { color: var(--ink); box-shadow: inset 0 -2px rgba(3, 16, 23, .22), 0 0 16px rgba(98, 231, 237, .22); }
.materials-trigger:hover::before, .materials-trigger:focus-visible::before, .materials-trigger[aria-expanded="true"]::before { transform: scaleX(1); }
.materials-trigger:hover .materials-trigger-label, .materials-trigger:focus-visible .materials-trigger-label { transform: translateX(2px); }
.materials-trigger:hover::after, .materials-trigger:focus-visible::after { animation: materials-sheen .48s cubic-bezier(.2, .75, .25, 1) 1; }
.materials-trigger[aria-expanded="true"] { color: var(--ink); box-shadow: inset 0 -2px rgba(3, 16, 23, .22), 0 0 14px rgba(98, 231, 237, .18); }
.materials-trigger[data-pinned="true"] .materials-trigger-label { transform: none; }
.materials-trigger[data-pinned="true"]::after { animation: none; opacity: 0; }
@keyframes materials-sheen { 0% { opacity: 0; transform: translateX(-125%); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateX(125%); } }
.tech-card--ancient .tech-card-footer { background: rgba(242, 184, 75, .08); border-top-color: rgba(242, 184, 75, .16); }
.tech-card--ancient .tech-kind { color: #ffd88e; }
.tech-card--ancient .materials-trigger { background: rgba(242, 184, 75, .1); border-left-color: rgba(242, 184, 75, .22); }
.tech-card--ancient .materials-trigger::before { background: var(--amber); }
.tech-card--ancient .materials-trigger[aria-expanded="true"] { color: var(--ink); }
.tech-card--ancient .materials-trigger:hover, .tech-card--ancient .materials-trigger:focus-visible { color: var(--ink); box-shadow: 0 7px 18px rgba(242, 184, 75, .23); }
.tech-card--ancient .materials-trigger[data-pinned="true"] { box-shadow: inset 0 -2px rgba(3, 16, 23, .22), 0 0 14px rgba(242, 184, 75, .2); }

.material-popover { position: fixed; z-index: 200; width: min(22rem, calc(100vw - 1rem)); max-height: min(34rem, calc(100dvh - 1rem)); overflow: hidden; color: var(--text); background: #0a202a; border: 1px solid var(--line-strong); border-top: 2px solid var(--cyan); box-shadow: 0 24px 70px rgba(0, 0, 0, .62), 0 0 25px rgba(98, 231, 237, .08); }
.material-popover.is-ancient { border-color: rgba(242, 184, 75, .7); border-top-color: var(--amber); }
.material-popover > header { padding: .75rem .8rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; background: linear-gradient(120deg, #123342, #0b222c); border-bottom: 1px solid var(--line); }
.material-popover > header p { margin: 0 0 .15rem; color: var(--cyan); font-size: .58rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.material-popover.is-ancient > header p { color: var(--amber); }
.material-popover > header h2 { max-width: 18rem; font-size: 1rem; line-height: 1.15; letter-spacing: -.02em; }
.material-popover-content { max-height: min(27rem, calc(100dvh - 6rem)); padding: .7rem .8rem .85rem; overflow-y: auto; scrollbar-color: var(--cyan) transparent; }
.recipe-group + .recipe-group { margin-top: .8rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.recipe-output { margin: 0 0 .45rem; display: flex; align-items: center; gap: .45rem; color: var(--amber); font-size: .68rem; font-weight: 800; }
.recipe-output img { width: 1.55rem; height: 1.55rem; object-fit: contain; }
.material-list { padding: 0; margin: 0; display: grid; gap: .32rem; list-style: none; }
.material-row { min-height: 2.2rem; padding: .28rem .4rem; display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: .45rem; background: rgba(98, 231, 237, .045); border: 1px solid rgba(166, 217, 224, .13); }
.material-row img { width: 1.8rem; height: 1.8rem; object-fit: contain; }
.material-row span { min-width: 0; color: #d8e8e7; font-size: .72rem; }
.material-row strong { min-width: 2.5rem; color: var(--cyan); font-size: .78rem; text-align: right; font-variant-numeric: tabular-nums; }
.is-ancient .material-row strong { color: var(--amber); }

.info-popover { position: fixed; z-index: 200; width: min(23rem, calc(100vw - 1rem)); max-height: min(34rem, calc(100dvh - 1rem)); overflow: hidden; color: var(--text); background: #0a202a; border: 1px solid var(--line-strong); border-top: 2px solid var(--cyan); box-shadow: 0 24px 70px rgba(0, 0, 0, .62), 0 0 25px rgba(98, 231, 237, .08); }
.info-popover.is-ancient { border-color: rgba(242, 184, 75, .7); border-top-color: var(--amber); }
.info-popover > header { padding: .75rem .8rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; background: linear-gradient(120deg, #123342, #0b222c); border-bottom: 1px solid var(--line); }
.info-popover > header p { margin: 0 0 .15rem; color: var(--cyan); font-size: .58rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.info-popover.is-ancient > header p { color: var(--amber); }
.info-popover > header h2 { max-width: 18rem; font-size: 1rem; line-height: 1.15; letter-spacing: -.02em; }
.info-popover-content { max-height: min(27rem, calc(100dvh - 6rem)); padding: .8rem; overflow-y: auto; }
.empty-state { padding: clamp(3rem, 7vw, 6rem) 1rem; text-align: center; }
.empty-state > span { display: block; color: var(--amber); font-size: 3rem; }
.empty-state h3 { margin-top: .4rem; font-size: 1.6rem; }
.empty-state p { max-width: 30rem; margin: .75rem auto 1.2rem; color: var(--muted); }

.source-note { display: grid; margin-bottom: clamp(4rem, 8vw, 7rem); padding: clamp(1.25rem, 3vw, 2.2rem); align-items: start; grid-template-columns: .7fr 1.4fr auto; gap: clamp(1.2rem, 3vw, 3rem); background: rgba(13, 32, 42, .7); border: 1px solid var(--line); border-left: 3px solid var(--amber); }
.source-note h2 { font-size: clamp(1.35rem, 2vw, 2rem); }
.source-note > p { margin: 0; color: var(--muted); font-size: .82rem; }
.source-links { display: grid; gap: .55rem; }
.source-links a { color: var(--cyan); font-size: .72rem; font-weight: 760; text-underline-offset: .2rem; }

@media (min-width: 561px) {
  .technology-levels[data-scroll-direction="down"] .level-section { z-index: var(--level-order); }
  .technology-levels[data-scroll-direction="up"] .level-section { z-index: var(--level-order-reverse); }
}

@media (max-width: 1120px) {
  .source-note { grid-template-columns: 1fr 2fr; }
  .source-links { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, max-content)); }
}
@media (max-width: 820px) {
  .tree-hero { min-height: 0; grid-template-columns: 1fr; }
  .hero-art { display: none; }
  .tree-command-row.catalog-controls { grid-template-columns: minmax(0, 1fr) minmax(12rem, .65fr); }
  .tree-command-row .technology-search-control { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .tree-hero { padding-block: 1.6rem; }
  .tree-hero h1 { font-size: clamp(2.2rem, 11vw, 3rem); }
  .coverage { justify-content: space-between; }
  .coverage div { min-width: 0; }
  .command-heading { align-items: start; }
  .tree-command { padding: .75rem; }
  .tree-command-row.catalog-controls { grid-template-columns: 1fr; }
  .tree-command-row .technology-search-control { grid-column: auto; }
  .filter-trigger, .level-picker-trigger { width: 100%; }
  .command-popover, .command-popover.is-above { position: fixed; z-index: 240; inset: auto 0 0; width: 100%; max-height: min(78dvh, 42rem); border-right: 0; border-bottom: 0; border-left: 0; border-radius: 16px 16px 0 0; }
  .level-picker-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .level-picker-grid button { min-height: 2.75rem; }
  .results-bar { display: block; }
  #resultStatus { margin-top: .5rem; text-align: left; }
  .level-section { display: block; padding: 1rem 0 1.25rem; }
  .level-rail { display: flex; min-height: 3.15rem; margin-bottom: .45rem; align-items: center; }
  .level-rail::before { top: 50%; right: 0; bottom: auto; left: 0; width: auto; height: 1px; background: linear-gradient(to right, var(--cyan), rgba(98, 231, 237, .12)); transform: none; }
  .level-marker { position: relative; top: auto; width: 2.75rem; height: 2.75rem; margin: 0 0 0 .45rem; font-size: 1rem; }
  .level-meta { margin-bottom: .45rem; }
  .technology-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .tech-card { min-height: 178px; grid-template-rows: 104px minmax(2.45rem, auto) 1.65rem; }
  .tech-media img { width: 94px; height: 94px; }
  .tech-card h4 { padding-inline: .3rem; font-size: .71rem; }
  .tech-kind { padding-left: .28rem; font-size: .46rem; }
  .materials-trigger { min-width: 4.1rem; padding-inline: .25rem; font-size: .52rem; }
  .material-popover, .info-popover { width: calc(100vw - 1rem); }
  .source-note { grid-template-columns: 1fr; }
  .source-links { grid-column: auto; grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .materials-trigger::before { transition: none; }
  .materials-trigger::after { display: none; animation: none; }
  .materials-trigger-label { transform: none !important; transition: none; }
}