:root {
  --ink: #e9edf1;
  --muted: #8d98a2;
  --dim: #59636d;
  --void: #05070a;
  --panel: #0a0e13;
  --panel-2: #0f141a;
  --line: rgba(186, 205, 220, .15);
  --acid: #d5f33f;
  --cyan: #45e1e9;
  --orange: #ff713e;
  --purple: #a783ff;
  --blue: #62a8ff;
  --green: #75db7d;
  --header-height: 78px;
  color-scheme: dark;
  font-family: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 73% -10%, rgba(91, 131, 141, .13), transparent 32rem),
    linear-gradient(180deg, #090c10, var(--void) 26rem);
  font-size: 15px;
  line-height: 1.5;
}
body::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  content: "";
  opacity: .16;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }

.skip-link { position: fixed; z-index: 100; top: -5rem; left: 1rem; padding: .7rem 1rem; background: var(--acid); color: #050608; }
.skip-link:focus { top: 1rem; }
.atmosphere {
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,255,255,.008) 4px);
}

.site-header {
  position: relative;
  z-index: 10;
  height: var(--header-height);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 clamp(1rem, 4vw, 4.5rem);
  border-bottom: 1px solid var(--line);
  background: rgba(5, 7, 10, .86);
  backdrop-filter: blur(14px);
}
.brand { display: inline-flex; align-items: center; gap: .8rem; width: max-content; }
.brand-mark { width: 34px; height: 34px; position: relative; transform: rotate(45deg); border: 1px solid var(--acid); }
.brand-mark::before, .brand-mark::after, .brand-mark i { position: absolute; content: ""; background: var(--acid); }
.brand-mark::before { inset: 7px 14px; }
.brand-mark::after { inset: 14px 7px; }
.brand-mark i { width: 6px; height: 6px; inset: 13px; box-shadow: 0 0 14px var(--acid); }
.brand strong { display: block; letter-spacing: .18em; font-size: 1rem; line-height: 1; }
.brand small { display: block; margin-top: .35rem; color: var(--dim); font: 600 .56rem/1 monospace; letter-spacing: .12em; }
.site-nav { display: flex; align-self: stretch; }
.site-nav a { position: relative; display: grid; place-items: center; min-width: 110px; color: var(--muted); font-size: .73rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav a[aria-current="page"]::after { position: absolute; right: 20%; bottom: -1px; left: 20%; height: 2px; content: ""; background: var(--acid); box-shadow: 0 0 12px var(--acid); }
.system-state { justify-self: end; color: var(--dim); font: 600 .58rem/1 monospace; letter-spacing: .12em; }
.system-state span { display: inline-block; width: 6px; height: 6px; margin-right: .5rem; border-radius: 50%; background: var(--acid); box-shadow: 0 0 9px var(--acid); }

main { min-height: calc(100vh - 150px); }
.hero-intro, .page-hero, .telemetry, .archive-grid, .control-rack, .result-line, .hero-grid, .level-npc-list, .level-report-list, .npc-search-results, .empty-state {
  width: min(1480px, calc(100% - clamp(2rem, 8vw, 9rem)));
  margin-inline: auto;
}

.hero-intro { min-height: 610px; display: grid; grid-template-columns: minmax(360px, .86fr) minmax(560px, 1.14fr); align-items: center; gap: 3vw; padding-block: 5rem 4rem; }
.eyebrow { margin: 0 0 1.2rem; color: var(--muted); font: 700 .63rem/1.4 monospace; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow span { color: var(--acid); }
.hero-copy h1, .page-hero h1 { margin: 0; font-size: clamp(3.4rem, 6.5vw, 7.2rem); line-height: .84; letter-spacing: -.07em; text-transform: uppercase; }
.hero-copy h1 em { color: transparent; font-style: normal; -webkit-text-stroke: 1px var(--acid); text-shadow: 0 0 30px rgba(213,243,63,.1); }
.lede { max-width: 580px; margin: 2rem 0 0; color: #aab3bb; font-size: 1.02rem; }
.hero-actions { display: flex; gap: .8rem; margin-top: 2rem; }
.button { display: inline-flex; align-items: center; gap: 2rem; padding: .9rem 1.1rem; border: 1px solid var(--line); font: 700 .66rem/1 monospace; letter-spacing: .12em; text-transform: uppercase; }
.button-primary { border-color: var(--acid); background: var(--acid); color: #080a06; }
.button-primary:hover { box-shadow: 0 0 28px rgba(213,243,63,.22); }
.button-quiet:hover { border-color: var(--muted); }

.specimen-array { position: relative; min-height: 500px; isolation: isolate; }
.specimen-array::before { position: absolute; inset: 50% auto auto 50%; width: 270px; height: 270px; content: ""; transform: translate(-50%, -50%); border: 1px solid rgba(213,243,63,.16); background: radial-gradient(circle, rgba(213,243,63,.08), transparent 66%); clip-path: polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%); }
.orbit { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(197,221,230,.1); border-radius: 50%; transform: translate(-50%, -50%); }
.orbit-a { width: 500px; height: 300px; transform: translate(-50%,-50%) rotate(-9deg); }
.orbit-b { width: 650px; height: 410px; transform: translate(-50%,-50%) rotate(12deg); }
.specimen { position: absolute; width: 190px; aspect-ratio: 1; margin: 0; clip-path: polygon(18% 0, 100% 0, 100% 82%, 82% 100%, 0 100%, 0 18%); background: linear-gradient(145deg, #151b22, #090c10); border: 1px solid var(--line); filter: drop-shadow(0 18px 18px rgba(0,0,0,.55)); }
.specimen::after { position: absolute; inset: 0; content: ""; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.specimen img { width: 100%; height: 100%; object-fit: cover; }
.specimen figcaption { position: absolute; right: .5rem; bottom: .5rem; left: .5rem; padding: .35rem; background: rgba(3,5,7,.75); color: var(--ink); font: 600 .58rem/1 monospace; letter-spacing: .1em; text-transform: uppercase; }
.specimen:nth-of-type(1) { z-index: 5; top: 29%; left: 38%; width: 220px; }
.specimen:nth-of-type(2) { z-index: 4; top: 5%; left: 10%; transform: rotate(-4deg); }
.specimen:nth-of-type(3) { z-index: 3; top: 4%; right: 4%; transform: rotate(3deg); }
.specimen:nth-of-type(4) { z-index: 2; bottom: 2%; left: 6%; transform: rotate(2deg); }
.specimen:nth-of-type(5) { z-index: 1; right: 1%; bottom: 3%; transform: rotate(-3deg); }
.specimen-cyber { outline: 1px solid rgba(98,168,255,.3); }
.specimen-chrono { outline: 1px solid rgba(167,131,255,.3); }
.specimen-bio { outline: 1px solid rgba(117,219,125,.3); }
.specimen-plasma { outline: 1px solid rgba(255,113,62,.3); }
.specimen-necro { outline: 1px solid rgba(69,225,233,.3); }
.array-label { position: absolute; z-index: 8; right: 0; bottom: -1rem; display: flex; gap: 1rem; align-items: center; color: var(--dim); font: .57rem/1 monospace; letter-spacing: .13em; }
.array-label b { color: var(--acid); }

.telemetry { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); }
.telemetry > div { position: relative; padding: 1.35rem 1.6rem; border-right: 1px solid var(--line); }
.telemetry > div:last-child { border-right: 0; }
.telemetry span, .telemetry small { display: block; color: var(--dim); font: 600 .56rem/1.3 monospace; letter-spacing: .12em; }
.telemetry strong { display: block; margin: .35rem 0; color: var(--acid); font: 300 2rem/1 monospace; }
.telemetry .word-stat { color: var(--cyan); font-size: 1.45rem; }

.archive-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1px; margin-block: 5rem; background: var(--line); border: 1px solid var(--line); }
.archive-panel { position: relative; min-height: 280px; padding: 2.2rem; overflow: hidden; background: linear-gradient(145deg, rgba(15,20,26,.96), rgba(7,10,14,.98)); }
.archive-panel-wide { grid-row: span 2; min-height: 561px; padding: 4rem; }
.archive-panel::before { position: absolute; right: -7rem; bottom: -10rem; width: 24rem; height: 24rem; content: ""; border: 1px solid var(--line); transform: rotate(45deg); }
.archive-panel h2 { margin: 0; font-size: clamp(2rem, 4vw, 4.5rem); line-height: 1; letter-spacing: -.04em; text-transform: uppercase; }
.archive-panel p:not(.eyebrow) { max-width: 590px; color: var(--muted); }
.panel-index { position: absolute; top: 1.4rem; right: 1.6rem; color: rgba(255,255,255,.08); font: 300 4rem/1 monospace; }
.panel-link { position: absolute; bottom: 2rem; left: 2.2rem; color: var(--acid); font: 700 .63rem/1 monospace; letter-spacing: .15em; }
.archive-panel-wide .panel-link { bottom: 4rem; left: 4rem; }
.panel-link span { margin-left: .7rem; font-size: 1rem; }
.element-strip { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 2.5rem; }
.element-strip span { padding: .5rem .6rem; border: 1px solid var(--line); color: var(--muted); font: 600 .58rem/1 monospace; }
.element-strip b { color: var(--ink); }

.page-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 3rem; padding-block: 5.5rem 3.5rem; border-bottom: 1px solid var(--line); }
.page-hero h1 { font-size: clamp(3.4rem, 6vw, 6.5rem); }
.page-hero p:not(.eyebrow) { max-width: 620px; margin: 1.4rem 0 0; color: var(--muted); }
.page-counter { display: flex; align-items: flex-end; gap: 1rem; padding-bottom: .5rem; }
.page-counter strong { color: var(--acid); font: 300 clamp(3rem, 6vw, 5.5rem)/.8 monospace; }
.page-counter span { color: var(--dim); font: 600 .56rem/1.4 monospace; letter-spacing: .12em; }

.control-rack { display: flex; align-items: flex-end; gap: 2.5rem; padding-block: 1.5rem; border-bottom: 1px solid var(--line); }
.control-rack.compact { justify-content: space-between; }
.search-control { flex: 1; max-width: 470px; }
.search-control > span, .filter-control > span { display: block; margin-bottom: .55rem; color: var(--dim); font: 600 .68rem/1 monospace; letter-spacing: .12em; }
.search-control input { width: 100%; padding: .72rem .8rem; border: 1px solid var(--line); border-left: 2px solid var(--acid); outline: 0; background: #070a0e; color: var(--ink); font: .75rem/1 monospace; }
.search-control input:focus { border-color: rgba(213,243,63,.55); box-shadow: 0 0 18px rgba(213,243,63,.07); }
.filter-control { display: flex; flex-wrap: wrap; gap: .35rem; align-items: flex-end; }
.filter-control > span { width: 100%; }
.filter-control button { padding: .68rem .82rem; border: 1px solid #41556a; background: linear-gradient(180deg, rgba(63,85,110,.32), rgba(10,14,19,.85)); color: #9ca8b1; cursor: pointer; font: 600 .68rem/1 monospace; letter-spacing: .05em; box-shadow: inset 0 1px rgba(218,235,252,.15); }
.filter-control button:hover, .filter-control button.is-active { border-color: var(--acid); color: #080a06; background: var(--acid); }
.filter-control small { margin-left: .25rem; opacity: .65; }
.legend { display: flex; gap: 1.3rem; color: var(--dim); font: 600 .56rem/1 monospace; letter-spacing: .1em; }
.legend i { display: inline-block; width: 6px; height: 6px; margin-right: .3rem; border-radius: 50%; }
.combat-dot { background: var(--orange); box-shadow: 0 0 8px var(--orange); }
.noun-dot { border: 1px solid var(--dim); }
.result-line { display: flex; align-items: center; gap: .45rem; padding-block: 1rem; color: var(--dim); font: 600 .68rem/1 monospace; letter-spacing: .1em; text-transform: uppercase; }
.result-line span { color: var(--acid); }
.result-line i { flex: 1; height: 1px; margin-left: .6rem; background: var(--line); }

.hero-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-bottom: 5rem; background: var(--line); border: 1px solid var(--line); }
.hero-card { position: relative; min-width: 0; background: var(--panel); overflow: hidden; }
.hero-card:hover { z-index: 2; box-shadow: 0 0 0 1px var(--element-color), 0 18px 40px rgba(0,0,0,.45); }
.element-cyber { --element-color: var(--blue); }
.element-chrono { --element-color: var(--purple); }
.element-bio { --element-color: var(--green); }
.element-plasma { --element-color: var(--orange); }
.element-necro { --element-color: var(--cyan); }
.card-scanline { position: absolute; z-index: 3; top: -25%; right: 0; left: 0; height: 20%; opacity: 0; background: linear-gradient(transparent, rgba(255,255,255,.07), transparent); pointer-events: none; }
.hero-card:hover .card-scanline { opacity: 1; animation: scan 1.6s linear infinite; }
@keyframes scan { to { transform: translateY(700%); } }
.hero-portrait { position: relative; aspect-ratio: 1.15; background: radial-gradient(circle at 50% 75%, color-mix(in srgb, var(--element-color) 14%, transparent), transparent 52%), #0b1015; overflow: hidden; }
.hero-portrait::before { position: absolute; inset: 10%; content: ""; border: 1px solid color-mix(in srgb, var(--element-color) 20%, transparent); border-radius: 50%; }
.hero-portrait img { position: relative; width: 100%; height: 100%; object-fit: contain; filter: saturate(.82) contrast(1.05); transition: transform .35s ease, filter .35s ease; }
.hero-card:hover img { transform: scale(1.035); filter: saturate(1) contrast(1.08); }
.hero-code { position: absolute; z-index: 2; top: .65rem; left: .7rem; color: var(--dim); font: .52rem/1 monospace; }
.element-badge { position: absolute; z-index: 2; right: .6rem; bottom: .6rem; padding: .35rem .45rem; border: 1px solid var(--element-color); background: rgba(5,7,10,.78); color: var(--element-color); font: 700 .52rem/1 monospace; letter-spacing: .1em; }
.hero-card-body { padding: 1.15rem; border-top: 2px solid var(--element-color); }
.hero-card-body > p { margin: 0; color: var(--element-color); font: 600 .55rem/1 monospace; letter-spacing: .1em; }
.hero-card-body h2 { margin: .35rem 0 1rem; font-size: 1.35rem; line-height: 1; text-transform: uppercase; }
.damage-meter { display: grid; grid-template-columns: 1fr auto; gap: .4rem; color: var(--dim); font: 600 .52rem/1 monospace; letter-spacing: .08em; }
.damage-meter b { color: var(--ink); }
.damage-meter i { position: relative; grid-column: 1/-1; height: 2px; background: #202730; }
.damage-meter i::before { position: absolute; inset: 0 auto 0 0; width: min(var(--meter), 100%); content: ""; background: var(--element-color); box-shadow: 0 0 7px var(--element-color); }
.hero-card details { margin-top: 1rem; border-top: 1px solid var(--line); }
.hero-card summary { display: flex; justify-content: space-between; padding-top: .8rem; color: var(--muted); cursor: pointer; font: 600 .56rem/1 monospace; text-transform: uppercase; }
.hero-card summary span { color: var(--element-color); }
.hero-card ul { margin: .8rem 0 0; padding: 0; list-style: none; }
.hero-card li { display: flex; justify-content: space-between; gap: .5rem; padding: .3rem 0; border-top: 1px dotted var(--line); font-size: .62rem; }
.hero-card li b { color: var(--muted); font-weight: 500; text-transform: uppercase; }
.hero-card code { overflow: hidden; color: var(--dim); text-overflow: ellipsis; white-space: nowrap; }

.level-npc-list, .level-report-list { margin-bottom: 5rem; }
.npc-level-group { margin-bottom: 3px; border: 1px solid #42576c; background: var(--panel); clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }
.npc-level-group > summary { display: grid; grid-template-columns: 1fr auto 32px; gap: 1rem; align-items: center; padding: 1rem 1.2rem; cursor: pointer; list-style: none; background: linear-gradient(180deg, rgba(57,79,103,.4), rgba(15,20,26,.98)); box-shadow: inset 0 1px rgba(218,234,250,.16); }
.npc-level-group > summary::-webkit-details-marker { display: none; }
.npc-level-group > summary:hover { background: #121820; }
.npc-level-group > summary div:first-child { display: flex; align-items: center; gap: 1rem; }
.npc-level-group[open] > summary { border-bottom: 1px solid var(--line); }
.npc-level-group[open] .report-toggle::after { transform: rotate(0); }
.npc-level-group h2 { margin: 0; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; }
.level-index { color: var(--acid); font: 600 .52rem/1 monospace; letter-spacing: .1em; }
.group-stats { color: var(--dim); font: 600 .55rem/1 monospace; letter-spacing: .08em; }
.group-stats b { margin-left: .8rem; color: var(--ink); }
.npc-table { display: grid; }
.npc-row { display: grid; grid-template-columns: 12px minmax(150px, 1fr) minmax(220px, 1.7fr) 150px 80px; gap: 1rem; align-items: center; min-height: 42px; padding: .55rem 1.2rem; border-bottom: 1px solid rgba(186,205,220,.07); }
.npc-row:last-child { border-bottom: 0; }
.npc-row:hover { background: rgba(255,255,255,.018); }
.npc-row strong { font-size: .78rem; font-weight: 600; }
.npc-row code { overflow: hidden; color: var(--dim); font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.npc-status { width: 6px; height: 6px; border: 1px solid var(--dim); border-radius: 50%; }
.npc-status.is-combat { border: 0; background: var(--orange); box-shadow: 0 0 7px var(--orange); }
.source-tags { display: flex; gap: .3rem; }
.source-tags i { padding: .25rem .35rem; border: 1px solid var(--line); color: var(--dim); font: normal .5rem/1 monospace; text-transform: uppercase; }
.hp-readout { color: var(--dim); text-align: right; font: .55rem/1 monospace; }
.hp-readout b { color: var(--orange); font-size: .72rem; }
.lazy-state, .result-limit { margin: 0; padding: 1.2rem; color: var(--dim); font: .6rem/1.5 monospace; letter-spacing: .06em; }
.npc-search-results { margin-bottom: 5rem; border: 1px solid var(--line); background: var(--panel); }

.level-report { margin-bottom: 3px; border: 1px solid #42576c; background: var(--panel); scroll-margin-top: 1rem; clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }
.level-report summary { display: grid; grid-template-columns: 64px 1fr 110px 100px 32px; gap: 1.2rem; align-items: center; min-height: 78px; padding: .8rem 1.2rem; cursor: pointer; list-style: none; background: linear-gradient(180deg, rgba(56,78,102,.42), rgba(15,20,26,.98)); box-shadow: inset 0 1px rgba(218,234,250,.16); }
.level-report summary::-webkit-details-marker { display: none; }
.level-report summary:hover { background: #121820; }
.report-id { color: rgba(255,255,255,.13); font: 300 2rem/1 monospace; }
.report-title small { display: block; margin-bottom: .3rem; color: var(--acid); font: 600 .5rem/1 monospace; letter-spacing: .1em; }
.report-title strong { font-size: 1.03rem; letter-spacing: .04em; text-transform: uppercase; }
.report-metric { color: var(--dim); font: 600 .64rem/1.3 monospace; letter-spacing: .06em; }
.report-metric b { display: block; color: var(--ink); font-size: .85rem; }
.report-toggle { width: 22px; height: 22px; position: relative; border: 1px solid var(--line); }
.report-toggle::before, .report-toggle::after { position: absolute; top: 10px; left: 5px; width: 10px; height: 1px; content: ""; background: var(--acid); }
.report-toggle::after { transform: rotate(90deg); transition: transform .2s ease; }
.level-report[open] .report-toggle::after { transform: rotate(0); }
.level-report[open] { border-color: rgba(213,243,63,.3); }
.report-body { padding: 1.3rem 1.5rem 1.6rem; border-top: 1px solid var(--line); }
.report-telemetry { display: grid; grid-template-columns: repeat(4,1fr); margin-bottom: 1.5rem; border: 1px solid var(--line); }
.report-telemetry div { padding: .8rem 1rem; border-right: 1px solid var(--line); }
.report-telemetry div:last-child { border: 0; }
.report-telemetry span { display: block; color: var(--dim); font: 600 .5rem/1 monospace; letter-spacing: .08em; }
.report-telemetry b { color: var(--cyan); font: 300 1.4rem/1.5 monospace; }
.report-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.report-columns h3 { margin: 0 0 .8rem; color: var(--muted); font: 600 .6rem/1 monospace; letter-spacing: .12em; text-transform: uppercase; }
.report-columns dl { margin: 0; }
.report-columns dl div { display: grid; grid-template-columns: 120px minmax(0,1fr); padding: .4rem 0; border-top: 1px dotted var(--line); }
.report-columns dt { color: var(--dim); font-size: .65rem; }
.report-columns dd { margin: 0; overflow: hidden; color: #aeb7bf; font: .65rem/1.4 monospace; text-overflow: ellipsis; white-space: nowrap; }
.noun-cloud { display: flex; flex-wrap: wrap; gap: .35rem; }
.noun-cloud span { padding: .35rem .45rem; border: 1px solid var(--line); background: rgba(255,255,255,.015); color: var(--muted); font: .56rem/1 monospace; }
.noun-cloud i { color: var(--dim); font-size: .7rem; }
.alias-line { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.alias-line span { margin-right: .4rem; color: var(--dim); font: 600 .5rem/1 monospace; letter-spacing: .1em; }
.alias-line code { color: var(--muted); font-size: .58rem; }
.empty-state { margin-block: 4rem; padding: 3rem; border: 1px dashed var(--line); color: var(--muted); text-align: center; }

.site-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 2rem clamp(1rem, 4vw, 4.5rem); border-top: 1px solid var(--line); color: var(--dim); font: 600 .52rem/1 monospace; letter-spacing: .1em; }
.footer-state { color: var(--acid); }

@media (max-width: 1120px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-nav { grid-column: 1/-1; position: fixed; right: 1rem; bottom: 1rem; left: 1rem; justify-content: center; height: 54px; border: 1px solid var(--line); background: rgba(5,7,10,.94); box-shadow: 0 10px 30px #000; }
  .site-nav a { min-width: 100px; }
  .system-state { display: none; }
  .hero-intro { grid-template-columns: 1fr; }
  .hero-copy { position: relative; z-index: 6; }
  .specimen-array { margin-top: -2rem; }
  .hero-grid { grid-template-columns: repeat(3, 1fr); }
  .control-rack { align-items: stretch; flex-direction: column; gap: 1rem; }
  .search-control { max-width: none; }
  .site-footer { padding-bottom: 6rem; }
}

@media (max-width: 760px) {
  .site-header { padding-inline: 1rem; }
  .brand small { display: none; }
  .hero-intro, .page-hero, .telemetry, .archive-grid, .control-rack, .result-line, .hero-grid, .level-npc-list, .level-report-list, .npc-search-results, .empty-state { width: calc(100% - 2rem); }
  .hero-intro { min-height: 0; padding-top: 3rem; }
  .hero-copy h1, .page-hero h1 { font-size: clamp(2.8rem, 15vw, 4.5rem); }
  .specimen-array { min-height: 380px; transform: scale(.78); transform-origin: center top; margin-inline: -20%; margin-bottom: -5rem; }
  .telemetry { grid-template-columns: 1fr 1fr; }
  .telemetry > div:nth-child(2) { border-right: 0; }
  .telemetry > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .archive-grid { grid-template-columns: 1fr; }
  .archive-panel-wide { min-height: 470px; padding: 2.2rem; }
  .archive-panel-wide .panel-link { left: 2.2rem; bottom: 2rem; }
  .page-hero { align-items: flex-start; flex-direction: column; padding-top: 3.5rem; }
  .page-counter { align-self: flex-end; }
  .hero-grid { grid-template-columns: 1fr 1fr; }
  .npc-row { grid-template-columns: 12px 1fr auto; gap: .6rem; }
  .npc-row code, .source-tags { display: none; }
  .level-report summary { grid-template-columns: 44px 1fr 26px; gap: .7rem; }
  .report-metric { display: none; }
  .report-columns { grid-template-columns: 1fr; }
  .report-telemetry { grid-template-columns: 1fr 1fr; }
  .report-telemetry div:nth-child(2) { border-right: 0; }
  .report-telemetry div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .legend { align-items: flex-start; flex-direction: column; }
  .site-footer { flex-direction: column; }
}

@media (max-width: 480px) {
  .hero-actions { align-items: stretch; flex-direction: column; }
  .button { justify-content: space-between; }
  .hero-grid { grid-template-columns: 1fr; }
  .filter-control button { flex: 1 0 30%; }
  .telemetry { grid-template-columns: 1fr; }
  .telemetry > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .site-nav a { flex: 1; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/* Control panel shell */
:root {
  --spore-blue: #496f9f;
  --spore-blue-deep: #172536;
  --spore-edge: #91a9c3;
  --spore-highlight: rgba(222, 238, 255, .72);
  --spore-cut: 10px;
}
body { background: #090c10; font-size: 15px; }
body::before { opacity: .08; background-size: 32px 32px; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 224px minmax(0, 1fr); grid-template-rows: 58px minmax(calc(100vh - 58px), auto); }
.topbar { position: sticky; z-index: 20; top: 0; grid-column: 1 / -1; display: grid; grid-template-columns: 224px 1fr auto; align-items: center; min-width: 0; border-bottom: 1px solid #7690ad; background: linear-gradient(180deg, rgba(79,112,153,.94) 0, rgba(35,53,74,.96) 9%, rgba(12,17,23,.98) 72%); box-shadow: inset 0 1px rgba(225,239,255,.55), inset 0 -3px rgba(134,163,195,.13), 0 2px 12px rgba(0,0,0,.55); backdrop-filter: blur(12px); }
.topbar .brand { height: 58px; padding: 0 18px; border-right: 1px solid #222a32; }
.topbar .brand-mark { width: 24px; height: 24px; }
.topbar .brand-mark::before { inset: 5px 10px; }
.topbar .brand-mark::after { inset: 10px 5px; }
.topbar .brand-mark i { width: 4px; height: 4px; inset: 9px; }
.topbar .brand strong { font-size: .82rem; }
.topbar .brand small { margin-top: .28rem; font-size: .62rem; }
.topbar-path { min-width: 0; padding: 0 22px; overflow: hidden; color: #83909c; font: 600 .68rem/1 monospace; letter-spacing: .08em; text-overflow: ellipsis; white-space: nowrap; }
.topbar-path span { color: var(--acid); }
.topbar-path i { margin: 0 .6rem; color: #3e4852; font-style: normal; }
.topbar .system-state { padding-right: 22px; }

.sidebar { position: sticky; top: 58px; height: calc(100vh - 58px); display: flex; flex-direction: column; grid-column: 1; grid-row: 2; min-width: 0; border-right: 1px solid #637b96; background: linear-gradient(90deg, #0a0e13, #111a24 94%, #273b52); box-shadow: inset -2px 0 rgba(180,204,230,.18), 3px 0 14px rgba(0,0,0,.42); }
.side-nav { padding: 16px 10px; }
.side-nav > p { margin: 0 10px 9px; color: #64717c; font: 600 .64rem/1 monospace; letter-spacing: .13em; }
.side-nav a { position: relative; display: grid; grid-template-columns: 30px minmax(0,1fr) auto; gap: 8px; align-items: center; min-height: 44px; padding: 0 10px; border: 1px solid transparent; color: #96a1aa; font-size: .78rem; font-weight: 600; letter-spacing: .02em; }
.side-nav a:hover { border-color: #536c88; background: linear-gradient(180deg, rgba(76,103,136,.34), rgba(17,25,34,.7)); color: #edf3f7; }
.side-nav a[aria-current="page"] { border-color: #8098b4; background: linear-gradient(180deg, rgba(88,120,160,.72), rgba(25,37,51,.86) 52%, rgba(10,15,20,.95)); color: #f5f8fa; box-shadow: inset 0 1px rgba(232,243,255,.46), inset 0 -2px rgba(102,139,177,.2); }
.side-nav a[aria-current="page"]::before { position: absolute; inset: 8px auto 8px -1px; width: 2px; content: ""; background: var(--acid); box-shadow: 0 0 8px var(--acid); }
.side-nav a i { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid #2b3540; color: #76838e; font: normal 600 .6rem/1 monospace; }
.side-nav a[aria-current="page"] i { border-color: var(--acid); color: var(--acid); }
.side-nav a b { color: #66737e; font: 500 .62rem/1 monospace; }
.sidebar-meta { margin: auto 18px 18px; padding-top: 16px; border-top: 1px solid #222a32; }
.sidebar-meta span, .sidebar-meta small { display: block; color: #65727d; font: .62rem/1.5 monospace; letter-spacing: .07em; }
.sidebar-meta b { display: block; margin: .35rem 0; color: #aab4bc; font: 600 .72rem/1 monospace; }

.workspace { grid-column: 2; grid-row: 2; min-width: 0; padding: 28px clamp(18px, 3vw, 42px) 0; overflow: hidden; }
.workspace > .hero-intro, .workspace > .page-hero, .workspace > .telemetry, .workspace > .archive-grid, .workspace > .control-rack, .workspace > .result-line, .workspace > .hero-grid, .workspace > .level-npc-list, .workspace > .level-report-list, .workspace > .npc-search-results, .workspace > .empty-state { width: 100%; max-width: none; margin-inline: 0; }
.workspace-heading { display: flex; justify-content: space-between; gap: 30px; align-items: flex-end; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid #252e37; }
.workspace-heading h1 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.45rem); line-height: 1; letter-spacing: -.035em; text-transform: uppercase; }
.workspace-heading p:not(.eyebrow) { margin: .65rem 0 0; color: #737f8a; font-size: .78rem; }
.heading-state { min-width: 190px; padding-left: 18px; border-left: 1px solid #27313a; }
.heading-state span, .heading-state small { display: block; color: #66737d; font: .62rem/1.4 monospace; letter-spacing: .1em; }
.heading-state b { display: block; margin: .35rem 0; color: #a9b3bc; font: 500 .7rem/1 monospace; }

.control-metric { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 1px; margin-bottom: 18px; border: 1px solid #536b84; background: #26303a; clip-path: polygon(var(--spore-cut) 0, calc(100% - var(--spore-cut)) 0, 100% var(--spore-cut), 100% calc(100% - var(--spore-cut)), calc(100% - var(--spore-cut)) 100%, var(--spore-cut) 100%, 0 calc(100% - var(--spore-cut)), 0 var(--spore-cut)); box-shadow: inset 0 1px rgba(218,235,251,.17); }
.control-metric > * { position: relative; min-width: 0; padding: 16px 17px; overflow: hidden; background: #0f141a; }
.control-metric > *:hover { background: #121920; }
.control-metric span, .control-metric small { display: block; overflow: hidden; color: #6e7a84; font: 600 .62rem/1.35 monospace; letter-spacing: .08em; text-overflow: ellipsis; white-space: nowrap; }
.control-metric strong { display: block; margin: .3rem 0; color: #dbe2e7; font: 300 1.7rem/1 monospace; }
.control-metric .word-stat { color: var(--acid); font-size: 1.05rem; line-height: 1.65rem; }
.control-metric > * > i { position: absolute; top: 14px; right: 14px; color: #46525d; font: normal 600 .62rem/1 monospace; }

.console-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(270px, .75fr); gap: 14px; }
.console-panel { position: relative; min-width: 0; border: 1px solid #4e6379; background: #0d1217; clip-path: polygon(var(--spore-cut) 0, calc(100% - var(--spore-cut)) 0, 100% var(--spore-cut), 100% calc(100% - var(--spore-cut)), calc(100% - var(--spore-cut)) 100%, var(--spore-cut) 100%, 0 calc(100% - var(--spore-cut)), 0 var(--spore-cut)); box-shadow: inset 0 0 18px rgba(61,92,126,.08); }
.console-panel > header { display: flex; justify-content: space-between; align-items: center; min-height: 46px; padding: 0 14px; border-bottom: 1px solid #60768e; background: linear-gradient(180deg, rgba(69,94,124,.64), rgba(27,39,53,.82) 48%, #11171d 100%); box-shadow: inset 0 1px rgba(225,239,253,.32), inset 0 -2px rgba(105,137,170,.15); }
.console-panel > header > div { display: flex; gap: 10px; align-items: center; }
.console-panel > header span { color: var(--acid); font: 500 .62rem/1 monospace; }
.console-panel > header h2 { margin: 0; color: #c4ccd2; font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; }
.console-panel > header small, .console-panel > header a { color: #6a7680; font: 600 .6rem/1 monospace; letter-spacing: .07em; }
.console-panel > header a:hover { color: var(--acid); }
.catalog-table { overflow-x: auto; }
.catalog-table > * { display: grid; grid-template-columns: minmax(130px, 1fr) 80px 110px 70px 22px; gap: 12px; align-items: center; min-width: 520px; min-height: 48px; padding: 0 14px; border-bottom: 1px solid #1e272f; }
.catalog-table > *:last-child { border-bottom: 0; }
.catalog-table a:hover { background: #111820; }
.catalog-table .catalog-head { min-height: 34px; color: #66737e; font: 600 .6rem/1 monospace; letter-spacing: .07em; }
.catalog-table strong { color: #bac3ca; font-size: .76rem; }
.catalog-table b { color: #d8dfe4; font: 400 .75rem/1 monospace; }
.catalog-table a span { color: #74808a; font: .62rem/1 monospace; }
.catalog-table a i { color: #9abc44; font: normal 600 .6rem/1 monospace; }
.catalog-table a em { color: #52606a; font-style: normal; text-align: right; }
.distribution-list { padding: 10px 14px 14px; }
.distribution-list > div { display: grid; grid-template-columns: 62px 1fr 25px; gap: 9px; align-items: center; min-height: 31px; }
.distribution-list span, .distribution-list strong { color: #84909a; font: 600 .62rem/1 monospace; }
.distribution-list strong { color: #aeb8c0; text-align: right; }
.distribution-list i { height: 3px; background: #232d35; }
.distribution-list i b { display: block; height: 100%; background: var(--element-color); box-shadow: 0 0 6px color-mix(in srgb, var(--element-color) 45%, transparent); }
.specimen-panel { grid-column: 1; }
.quicklook-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: #202a32; }
.quicklook-grid figure { min-width: 0; margin: 0; background: #0d1318; border-top: 2px solid var(--element-color); }
.quicklook-grid img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; background: radial-gradient(circle, color-mix(in srgb, var(--element-color) 10%, transparent), transparent 60%); }
.quicklook-grid figcaption { padding: 8px; }
.quicklook-grid figcaption b, .quicklook-grid figcaption span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quicklook-grid figcaption b { color: #bac2c8; font-size: .68rem; text-transform: uppercase; }
.quicklook-grid figcaption span { margin-top: .25rem; color: #68747e; font: .58rem/1 monospace; }
.system-panel { grid-column: 2; grid-row: 2; }
.system-panel dl { margin: 0; padding: 8px 14px; }
.system-panel dl div { display: grid; grid-template-columns: 90px 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px dotted #28313a; }
.system-panel dl div:last-child { border: 0; }
.system-panel dt { color: #697680; font-size: .66rem; }
.system-panel dd { margin: 0; color: #aab4bc; font: .66rem/1.4 monospace; text-align: right; }

.page-hero { align-items: flex-end; padding: 4px 0 18px; }
.page-hero h1 { font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1; letter-spacing: -.04em; }
.page-hero p:not(.eyebrow) { max-width: 650px; margin-top: .75rem; font-size: .75rem; }
.page-counter { padding: 0; }
.page-counter strong { font-size: clamp(2rem, 4vw, 3.3rem); }
.control-rack { gap: 20px; padding-block: 12px; }
.hero-grid { grid-template-columns: repeat(4, minmax(190px,1fr)); margin-bottom: 28px; }
.level-npc-list, .level-report-list { margin-bottom: 28px; }
.workspace-footer { display: flex; justify-content: space-between; gap: 16px; margin-top: 32px; padding: 16px 0; border-top: 1px solid #242e36; color: #64717c; font: .62rem/1 monospace; letter-spacing: .08em; }

.global-search { position: relative; width: min(520px, calc(100% - 30px)); margin-inline: auto; }
.global-search label { display: grid; grid-template-columns: 30px 1fr; align-items: center; height: 34px; border: 1px solid #2a343e; background: #080b0e; }
.global-search label:focus-within { border-color: rgba(213,243,63,.55); box-shadow: 0 0 0 1px rgba(213,243,63,.08); }
.global-search label > span { color: #66737d; text-align: center; }
.global-search input { min-width: 0; height: 100%; padding: 0 10px 0 0; border: 0; outline: 0; background: transparent; color: #d9e0e5; font: .72rem/1 monospace; }
.global-search input::placeholder { color: #4c5862; }
.global-search-result { position: absolute; z-index: 50; top: 39px; right: 0; left: 0; max-height: min(520px, 72vh); padding: 5px; overflow-y: auto; border: 1px solid #313c46; background: #0b1015; box-shadow: 0 18px 45px rgba(0,0,0,.65); color: #687581; font: .58rem/1.4 monospace; }
.global-search-result a { display: grid; grid-template-columns: 52px 1fr 20px; gap: 8px; align-items: center; min-height: 48px; padding: 6px 8px; border-bottom: 1px solid #1f2830; }
.global-search-result a:last-child { border-bottom: 0; }
.global-search-result a:hover { background: #141b22; }
.global-search-result a i { color: var(--acid); font: normal 600 .48rem/1 monospace; }
.global-search-result a span, .global-search-result a strong, .global-search-result a small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.global-search-result a strong { color: #c3cbd1; font-size: .64rem; }
.global-search-result a small { margin-top: .18rem; color: #596671; font-size: .48rem; }
.global-search-result a b { color: #52606b; text-align: right; }
.global-search-result p { margin: 0; padding: 16px; color: #596671; text-align: center; }

.hero-family-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 30px; }
.hero-family { scroll-margin-top: 70px; border: 1px solid #4d6278; background: #0d1217; clip-path: polygon(var(--spore-cut) 0, 100% 0, 100% calc(100% - var(--spore-cut)), calc(100% - var(--spore-cut)) 100%, 0 100%); }
.hero-family > header { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 8px 14px; border-bottom: 1px solid #536b84; border-left: 3px solid var(--element-color); background: linear-gradient(180deg, rgba(68,91,119,.46), rgba(17,23,29,.98)); box-shadow: inset 0 1px rgba(215,232,250,.22); }
.hero-family > header > div { display: flex; align-items: center; gap: 10px; }
.hero-family > header .element-badge { position: static; }
.hero-family h2 { margin: 0; color: #c8d0d6; font-size: .95rem; letter-spacing: .03em; text-transform: uppercase; }
.hero-family > header small, .family-code { color: #586570; font: .5rem/1 monospace; letter-spacing: .08em; }
.variant-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: #222c34; }
.variant-cell { min-width: 0; background: #0b1015; }
.variant-portrait { position: relative; display: block; aspect-ratio: 1.6; overflow: hidden; background: radial-gradient(circle, color-mix(in srgb, var(--element-color) 10%, transparent), transparent 65%); }
.variant-portrait img { width: 100%; height: 100%; object-fit: contain; }
.variant-portrait > span { position: absolute; right: 7px; bottom: 7px; padding: 3px 5px; border: 1px solid var(--element-color); background: rgba(7,10,13,.8); color: var(--element-color); font: 600 .48rem/1 monospace; text-transform: uppercase; }
.variant-data { padding: 9px 11px; border-top: 1px solid #202a32; }
.variant-data > strong { color: #abb5bd; font-size: .62rem; text-transform: uppercase; }
.variant-data > code { float: right; color: #4e5b65; font-size: .46rem; }
.variant-data dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 7px 0 0; }
.variant-data dl div { display: flex; justify-content: space-between; gap: 6px; border-top: 1px dotted #263039; padding-top: 5px; }
.variant-data dt, .variant-data dd { margin: 0; color: #53606b; font: .47rem/1 monospace; }
.variant-data dd { color: #939fa8; }
.hero-family-summary { display: grid; grid-template-columns: 128px minmax(0,1fr); min-height: 154px; }
.hero-family-portrait { position: relative; min-width: 0; overflow: hidden; border-right: 1px solid #26313a; background: radial-gradient(circle,color-mix(in srgb,var(--element-color) 13%,transparent),transparent 66%); }
.hero-family-portrait img { width: 100%; height: 100%; object-fit: contain; transition: transform .25s ease; }
.hero-family-portrait:hover img { transform: scale(1.025); }
.hero-family-portrait span { position: absolute; right: 6px; bottom: 6px; padding: 3px 5px; border: 1px solid var(--element-color); background: rgba(7,10,13,.9); color: var(--element-color); font: 600 .54rem/1 monospace; }
.hero-family-summary > div { min-width: 0; padding: 12px 14px; }
.hero-family-summary > div > em { display: block; overflow: hidden; color: var(--element-color); font: normal 600 .68rem/1.2 monospace; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.hero-family-summary > div > p { display: -webkit-box; min-height: 3.9em; margin: 8px 0 10px; overflow: hidden; color: #9ca8b0; font-size: .72rem; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.hero-family-summary dl { display: flex; gap: 14px; margin: 0 0 9px; }
.hero-family-summary dl div { display: flex; gap: 5px; }
.hero-family-summary dt, .hero-family-summary dd { margin: 0; color: #65727c; font: .58rem/1 monospace; }
.hero-family-summary dd { color: #a6b0b8; }
.hero-family-summary > div > a { display: inline-block; color: var(--acid); font: 600 .66rem/1 monospace; }

.npc-name { overflow: hidden; color: #aeb8c0; font-size: .78rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.npc-name:hover { color: var(--acid); }
.noun-cloud a { padding: .35rem .45rem; border: 1px solid var(--line); background: rgba(255,255,255,.015); color: var(--muted); font: .56rem/1 monospace; }
.noun-cloud a:hover { border-color: var(--acid); color: var(--acid); }
.npc-detail-heading .eyebrow a { color: var(--acid); }
.npc-detail-heading code { color: #65727d; font-size: .7rem; }
.entity-state { display: flex; align-items: center; gap: 8px; color: #687580; font: 600 .54rem/1 monospace; letter-spacing: .09em; }
.entity-state span { width: 7px; height: 7px; border: 1px solid #66737d; border-radius: 50%; }
.entity-state.is-combat { color: var(--orange); }
.entity-state.is-combat span { border: 0; background: var(--orange); box-shadow: 0 0 8px var(--orange); }
.detail-metric { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; margin: 14px 0; border: 1px solid #26303a; background: #26303a; }
.detail-metric > div { min-width: 0; padding: 14px; background: #0f141a; }
.detail-metric span, .detail-metric small { display: block; overflow: hidden; color: #596671; font: .49rem/1.4 monospace; letter-spacing: .08em; text-overflow: ellipsis; white-space: nowrap; }
.detail-metric strong { display: block; margin: .3rem 0; color: #d5dde2; font: 300 1.35rem/1 monospace; }
.detail-metric .detail-word { color: var(--acid); font-size: .85rem; line-height: 1.35rem; }
.detail-grid { display: grid; grid-template-columns: minmax(280px,.75fr) minmax(0,1.25fr); gap: 14px; }
.entity-card dl { margin: 0; padding: 8px 14px; }
.entity-card dl div { display: grid; grid-template-columns: 100px minmax(0,1fr); gap: 12px; padding: 8px 0; border-bottom: 1px dotted #28323a; }
.entity-card dl div:last-child { border: 0; }
.entity-card dt { color: #56636d; font-size: .58rem; }
.entity-card dd { min-width: 0; margin: 0; overflow: hidden; color: #a4afb7; font-size: .62rem; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.entity-card code { color: #77848e; }
.placement-table > * { display: grid; grid-template-columns: minmax(130px,1fr) 100px 20px; gap: 10px; align-items: center; min-height: 40px; padding: 0 14px; border-bottom: 1px solid #202930; }
.placement-table > *:last-child { border: 0; }
.placement-table .placement-head { min-height: 29px; color: #4f5b65; font: 600 .47rem/1 monospace; }
.placement-table a:hover { background: #131a20; }
.placement-table strong { color: #a7b1b9; font-size: .62rem; }
.placement-table a span { color: #5e6b76; font: .5rem/1 monospace; }
.placement-table em { color: #53606a; font-style: normal; text-align: right; }
.hero-detail-heading .eyebrow a { color: var(--acid); }
.detail-element { position: static; align-self: flex-end; padding: 8px 10px; color: var(--element-color); }
.hero-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hero-variant-detail { scroll-margin-top: 70px; min-width: 0; border: 1px solid #26313a; border-top: 2px solid var(--element-color); background: #0d1217; }
.hero-variant-detail > header { display: grid; grid-template-columns: 60px 1fr auto; gap: 10px; align-items: center; min-height: 46px; padding: 0 12px; border-bottom: 1px solid #26313a; background: #11171d; }
.hero-variant-detail > header span { color: var(--element-color); font: 600 .52rem/1 monospace; text-transform: uppercase; }
.hero-variant-detail > header h2 { margin: 0; color: #bdc6cd; font-size: .76rem; text-transform: uppercase; }
.hero-variant-detail > header code { color: #515e69; font-size: .48rem; }
.hero-variant-main { display: grid; grid-template-columns: minmax(150px,.8fr) minmax(190px,1.2fr); }
.hero-detail-portrait { min-width: 0; border-right: 1px solid #222c34; background: radial-gradient(circle, color-mix(in srgb, var(--element-color) 12%, transparent), transparent 64%); }
.hero-detail-portrait img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hero-variant-stat { min-width: 0; padding: 10px 12px; }
.hero-variant-stat dl { margin: 0; }
.hero-variant-stat dl div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dotted #27313a; }
.hero-variant-stat dt, .hero-variant-stat dd { margin: 0; color: #596671; font-size: .54rem; }
.hero-variant-stat dd { color: #a2adb5; font-family: monospace; }
.hero-variant-stat h3 { margin: 12px 0 6px; color: #65727d; font: 600 .5rem/1 monospace; letter-spacing: .08em; text-transform: uppercase; }
.hero-variant-stat ul { margin: 0; padding: 0; list-style: none; }
.hero-variant-stat li { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px dotted #222c34; }
.hero-variant-stat li b { color: #74818b; font-size: .48rem; }
.hero-variant-stat li code { max-width: 65%; overflow: hidden; color: #54616c; font-size: .48rem; text-overflow: ellipsis; white-space: nowrap; }
.hero-profile-console { margin-bottom: 24px; border-top: 2px solid var(--element-color); }
.hero-profile-tabs { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin: 14px 0; padding: 1px; border: 1px solid #2c3740; background: #2c3740; }
.hero-profile-tabs button { min-height: 44px; border: 0; background: #0e1419; color: #687680; font: 600 .7rem/1 monospace; cursor: pointer; }
.hero-profile-tabs button:hover { background: #141c23; color: #abb5bd; }
.hero-profile-tabs button.is-active { background: color-mix(in srgb,var(--element-color) 10%,#111820); box-shadow: inset 0 -2px var(--element-color); color: var(--element-color); }
.hero-profile-main { display: grid; grid-template-columns: minmax(300px,.85fr) minmax(390px,1.15fr); min-height: 570px; background: #080c0f; }
.hero-lore-panel { position: relative; min-width: 0; border-right: 1px solid #536a80; background: linear-gradient(145deg,rgba(72,92,105,.28),rgba(8,12,15,.98) 45%); }
.hero-lore-identity { display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 14px; align-items: center; min-height: 116px; padding: 8px; border-bottom: 1px solid #60788e; background: linear-gradient(180deg,rgba(138,164,178,.54),rgba(57,76,88,.48) 52%,rgba(16,23,28,.92)); box-shadow: inset 0 1px rgba(235,249,255,.35); }
.hero-canonical-portrait { position: relative; height: 100px; padding: 0; overflow: hidden; border: 1px solid #7d929e; background: radial-gradient(circle,color-mix(in srgb,var(--element-color) 22%,transparent),#11171b 72%); box-shadow: inset 0 0 18px rgba(190,221,236,.16); cursor: zoom-in; }
.hero-canonical-portrait:hover, .hero-canonical-portrait:focus-visible { border-color: #dcebf1; outline: 1px solid var(--element-color); outline-offset: 2px; }
.hero-canonical-portrait img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hero-canonical-portrait span { position: absolute; right: 4px; bottom: 4px; padding: 3px 5px; border: 1px solid var(--element-color); background: rgba(7,10,13,.9); color: var(--element-color); font: 600 .58rem/1 monospace; }
.hero-lore-identity > div:last-child { min-width: 0; }
.hero-lore-identity b, .hero-lore-identity strong, .hero-lore-identity > div:last-child span { display: block; }
.hero-lore-identity b { color: #edf5f7; font-size: 1.3rem; letter-spacing: .04em; }
.hero-lore-identity strong { margin-top: 4px; color: #d7e1e5; font-size: .8rem; letter-spacing: .04em; }
.hero-lore-identity > div:last-child span { margin-top: 13px; color: var(--element-color); font: 600 .7rem/1 monospace; }
.hero-portrait-preview { position: absolute; z-index: 12; top: 92px; left: 14px; width: min(300px,calc(100% - 28px)); padding: 8px; border: 1px solid #a7bac3; background: linear-gradient(180deg,#182126,#090d10 70%); box-shadow: 0 18px 42px rgba(0,0,0,.78), inset 0 1px rgba(240,250,255,.22); opacity: 0; pointer-events: none; transform: translateY(7px) scale(.98); transition: opacity .14s ease,transform .14s ease; }
.hero-portrait-preview img { display: block; width: 100%; aspect-ratio: 1; border: 1px solid #8da0aa; background: radial-gradient(circle,color-mix(in srgb,var(--element-color) 18%,transparent),#090d10 70%); object-fit: contain; }
.hero-portrait-preview p { margin: 9px 2px 2px; color: #d0d7da; font-size: .68rem; line-height: 1.45; }
@media (hover:hover) and (pointer:fine) {
  .hero-lore-panel:has(.hero-canonical-portrait:hover) .hero-portrait-preview,
  .hero-lore-panel:has(.hero-canonical-portrait:focus) .hero-portrait-preview { opacity: 1; transform: translateY(0) scale(1); }
}
.hero-biography { max-height: 460px; padding: 16px 18px 22px; overflow-y: auto; scrollbar-color: #526a7e #0a0f13; }
.hero-biography p { margin: 0 0 1rem; color: #c0c8cc; font-size: .78rem; line-height: 1.55; }
.hero-biography p:last-child { margin-bottom: 0; }
.hero-profile-data { min-width: 0; padding: 16px; }
.hero-profile-data > header { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid #2a3540; }
.hero-profile-data > header span { color: var(--element-color); font: 600 .66rem/1 monospace; }
.hero-profile-data > header h2 { margin: 5px 0 0; color: #c8d0d6; font-size: 1rem; text-transform: uppercase; }
.hero-profile-data > header code { color: #65727d; }
.hero-variant-ability { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; align-items: center; margin: 12px 0 0; padding: 10px 12px; border: 1px solid #303d47; background: linear-gradient(180deg,#111a20,#0a1014); }
.hero-variant-ability span, .hero-variant-ability small { color: #697681; font: 600 .58rem/1 monospace; letter-spacing: .06em; }
.hero-variant-ability strong, .hero-variant-ability a { overflow: hidden; color: var(--element-color); font: 600 .76rem/1 monospace; text-overflow: ellipsis; white-space: nowrap; }
.hero-variant-ability a:hover { color: #e9f7ef; }
.hero-profile-stat { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin: 14px 0; background: #2b363f; }
.hero-profile-stat > div { min-width: 0; padding: 13px; background: #0d1318; }
.hero-profile-stat span, .hero-profile-stat strong, .hero-profile-stat i { display: block; }
.hero-profile-stat span { color: #64717b; font: 600 .62rem/1 monospace; }
.hero-profile-stat strong { margin: 7px 0; color: #d1d8dd; font: 300 1.25rem/1 monospace; }
.hero-profile-stat i { overflow: hidden; color: var(--element-color); font: normal 600 .58rem/1 monospace; text-overflow: ellipsis; white-space: nowrap; }
.hero-profile-flags { margin: 0; }
.hero-profile-flags div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dotted #2b363f; }
.hero-profile-flags dt, .hero-profile-flags dd { min-width: 0; margin: 0; color: #66737d; font-size: .68rem; }
.hero-profile-flags dd { overflow: hidden; color: #a7b1b9; text-overflow: ellipsis; white-space: nowrap; }
.hero-profile-data > h3 { margin: 16px 0 8px; color: #687680; font: 600 .66rem/1 monospace; letter-spacing: .08em; }
.hero-profile-ability { margin: 0; padding: 0; list-style: none; }
.hero-profile-ability li { display: grid; grid-template-columns: 74px minmax(0,1fr); gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px dotted #27323b; }
.hero-profile-ability b { color: #7a8790; font-size: .64rem; }
.hero-profile-ability code { max-width: 68%; overflow: hidden; color: #64717b; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.hero-profile-ability a { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 9px; align-items: center; min-width: 0; color: #8da8ba; }
.hero-profile-ability a img { width: 40px; height: 40px; object-fit: contain; }
.hero-profile-ability a span, .hero-profile-ability a strong, .hero-profile-ability a small { display: block; min-width: 0; }
.hero-profile-ability a strong { overflow: hidden; font: 600 .68rem/1.2 monospace; text-overflow: ellipsis; white-space: nowrap; }
.hero-profile-ability a small { display: -webkit-box; margin-top: 4px; overflow: hidden; color: #687680; font: .57rem/1.25 monospace; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.hero-profile-ability a:hover { color: var(--acid); }

/* Squad-management hero profile */
.hero-detail-heading { padding: 16px 0 12px; border-bottom: 1px solid #26323b; }
.hero-detail-heading .eyebrow { margin: 0; }
.hero-game-card { --game-edge: #71889a; margin-bottom: 30px; overflow: visible; border: 1px solid var(--game-edge); border-top: 2px solid #a8bbc7; background: #070a0d; clip-path: polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px); box-shadow: 0 18px 50px rgba(0,0,0,.38), inset 0 1px rgba(231,245,255,.24); }
.hero-game-header { position: relative; display: grid; grid-template-columns: 96px minmax(0,1fr) auto; gap: 14px; align-items: center; min-height: 104px; padding: 8px 18px 8px 10px; border-bottom: 1px solid #8da2b0; background: linear-gradient(180deg,rgba(151,174,186,.72),rgba(83,106,119,.62) 48%,rgba(20,30,36,.96)); box-shadow: inset 0 1px rgba(241,251,255,.5), inset 0 -5px 12px rgba(3,8,11,.45); }
.hero-game-header::after { position: absolute; right: 20px; bottom: -2px; left: 116px; height: 2px; content: ""; background: linear-gradient(90deg,var(--element-color),transparent 75%); opacity: .65; }
.hero-game-portrait-wrap { position: relative; height: 86px; }
.hero-game-portrait-wrap .hero-canonical-portrait { width: 88px; height: 86px; }
.hero-game-portrait-wrap .hero-portrait-preview { top: 78px; left: 4px; }
@media (hover:hover) and (pointer:fine) {
  .hero-game-portrait-wrap:has(.hero-canonical-portrait:hover) .hero-portrait-preview,
  .hero-game-portrait-wrap:has(.hero-canonical-portrait:focus) .hero-portrait-preview { opacity: 1; transform: translateY(0) scale(1); }
}
.hero-game-identity { min-width: 0; text-transform: uppercase; }
.hero-game-identity > div { display: flex; align-items: flex-start; gap: 7px; }
.hero-game-identity strong { overflow: hidden; color: #f3f8fa; font-size: 1.55rem; line-height: 1; letter-spacing: .025em; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 4px #000; }
.hero-game-identity sup { color: #e8f4f8; font: 700 .62rem/1 monospace; }
.hero-game-identity h2 { margin: 5px 0 8px; color: #edf2f4; font-size: .96rem; line-height: 1; letter-spacing: .055em; }
.hero-game-identity p { display: flex; gap: 9px; align-items: center; margin: 0; color: #e2e9ec; font: 700 .68rem/1 monospace; }
.hero-game-identity p span:first-child { color: var(--element-color); }
.hero-game-identity p i { color: #9daeb7; font-style: normal; font-size: .48rem; }
.hero-game-profile-state { min-width: 132px; padding-left: 18px; border-left: 1px solid rgba(220,239,248,.28); text-align: right; }
.hero-game-profile-state span, .hero-game-profile-state strong, .hero-game-profile-state code { display: block; }
.hero-game-profile-state span { color: #d3dfe4; font: 700 .55rem/1 monospace; letter-spacing: .08em; }
.hero-game-profile-state strong { margin: 7px 0; color: var(--element-color); font: 400 1.35rem/1 monospace; }
.hero-game-profile-state code { color: #a9b8c0; font-size: .58rem; }
.hero-game-sticky > .hero-profile-tabs { width: min(440px,calc(100% - 24px)); margin: 10px 12px; border-color: #4c606f; background: #31404b; }
.hero-game-body { display: grid; grid-template-columns: minmax(360px,1.06fr) minmax(340px,.94fr); min-height: 560px; border-top: 1px solid #24313a; }
.hero-game-abilities { min-width: 0; padding: 12px; border-right: 1px solid #718696; background: linear-gradient(145deg,rgba(97,118,129,.33),rgba(20,29,34,.94) 48%,#0a0e11); }
.hero-game-section-head { display: flex; align-items: center; justify-content: space-between; min-height: 34px; padding: 0 8px 8px; border-bottom: 1px solid #516472; }
.hero-game-section-head > div { display: flex; align-items: center; gap: 9px; }
.hero-game-section-head span { color: var(--element-color); font: 700 .6rem/1 monospace; }
.hero-game-section-head h2 { margin: 0; color: #d9e1e5; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; }
.hero-game-section-head small { color: #82909a; font: 600 .56rem/1 monospace; }
.hero-game-abilities .hero-profile-ability { padding-top: 5px; }
.hero-game-abilities .hero-profile-ability li { grid-template-columns: 78px minmax(0,1fr); min-height: 76px; padding: 7px; border: 0; border-bottom: 1px solid #34434d; background: linear-gradient(180deg,rgba(122,143,153,.24),rgba(34,46,53,.3) 35%,rgba(8,12,15,.5)); }
.hero-game-abilities .hero-profile-ability li + li { margin-top: 4px; }
.hero-game-abilities .hero-profile-ability b { align-self: start; padding-top: 7px; color: #a5b5be; font-size: .58rem; letter-spacing: .05em; }
.hero-game-abilities .hero-profile-ability a { grid-template-columns: 52px minmax(0,1fr); gap: 10px; }
.hero-game-abilities .hero-profile-ability a img { width: 48px; height: 48px; padding: 3px; border: 1px solid #647987; background: radial-gradient(circle,rgba(255,255,255,.13),#11181c 70%); clip-path: polygon(12% 0,88% 0,100% 12%,100% 88%,88% 100%,12% 100%,0 88%,0 12%); }
.hero-game-abilities .hero-profile-ability a strong { color: #b9cfdb; font-size: .75rem; }
.hero-game-abilities .hero-profile-ability a small { margin-top: 6px; color: #c2cbd0; font: .66rem/1.35 sans-serif; -webkit-line-clamp: 2; }
.hero-game-abilities .hero-variant-ability { margin-top: 9px; }
.hero-game-lore { margin-top: 10px; border: 1px solid #34434d; background: rgba(5,9,11,.62); }
.hero-game-lore summary { display: flex; justify-content: space-between; padding: 10px 12px; color: #aebac1; cursor: pointer; font: 700 .62rem/1 monospace; letter-spacing: .06em; }
.hero-game-lore summary span { color: var(--element-color); font-size: .56rem; }
.hero-game-lore .hero-biography { max-height: 260px; padding: 14px; border-top: 1px solid #34434d; }
.hero-game-lore .hero-biography p { font-size: .72rem; }
.hero-game-telemetry { min-width: 0; padding: 12px; background: repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0,rgba(255,255,255,.012) 1px,transparent 1px,transparent 4px),#06090b; }
.hero-slot-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; min-height: 132px; padding: 12px 16px; border-bottom: 1px solid #34434d; }
.hero-slot-group { align-self: center; text-align: center; }
.hero-slot-row { display: grid; grid-template-columns: repeat(3,52px); justify-content: center; gap: 6px; }
.hero-slot-row i { display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid #27333b; background: linear-gradient(145deg,#12191e,#080b0e); color: #26343d; font-style: normal; font-size: 1.2rem; clip-path: polygon(18% 0,82% 0,100% 18%,100% 82%,82% 100%,18% 100%,0 82%,0 18%); box-shadow: inset 0 0 14px #030506; }
.hero-slot-group > strong { display: block; margin-top: 9px; color: #c2cbd0; font-size: .67rem; }
.hero-stat-panel { margin-top: 10px; border: 1px solid #455867; background: #090d10; }
.hero-stat-panel > header { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 0 12px; border-bottom: 1px solid #536978; background: linear-gradient(180deg,rgba(75,96,111,.5),rgba(19,27,32,.95)); }
.hero-stat-panel > header span, .hero-stat-panel > header small { color: var(--element-color); font: 700 .55rem/1 monospace; }
.hero-stat-panel > header h2 { margin: 4px 0 0; color: #d4dde1; font-size: .76rem; text-transform: uppercase; }
.hero-stat-panel > header small { color: #75858f; }
.hero-stat-block { border-bottom: 8px solid #050709; }
.hero-stat-block > div { display: grid; grid-template-columns: minmax(120px,1fr) auto minmax(90px,.7fr); gap: 10px; align-items: center; min-height: 42px; padding: 0 12px; border-bottom: 1px solid #1d272e; background: linear-gradient(90deg,#10161a,#070a0c); }
.hero-stat-block > div > span { color: #bdc8ce; font-size: .7rem; font-weight: 700; }
.hero-stat-block > div > strong { color: #d8e0e4; font: 700 .75rem/1 monospace; text-align: right; }
.hero-stat-block > div > strong b { font: inherit; }
.hero-stat-block > div > i { overflow: hidden; color: #71808a; font: normal 600 .52rem/1 monospace; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.hero-stat-block > div > i b { font: inherit; }
.hero-stat-block.is-primary > div > strong { color: var(--element-color); }
.hero-stat-panel .hero-profile-flags { padding: 4px 12px 10px; }
.hero-stat-panel .hero-profile-flags div { min-height: 28px; align-items: center; }
.hero-stat-panel .hero-profile-flags dt { color: #8a99a2; }
.hero-stat-panel .hero-profile-flags dd { color: #c5cfd4; font-family: monospace; }
.hero-game-telemetry .hero-profile-fragment { margin-top: 9px; color: var(--element-color); text-align: center; }

.ability-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-bottom: 30px; }
.ability-card { display: grid; grid-template-columns: 58px minmax(0,1fr) auto 18px; gap: 12px; align-items: center; min-width: 0; min-height: 92px; padding: 12px; border: 1px solid #384954; background: linear-gradient(145deg,#111920,#0a0f13); clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
.ability-card:hover { border-color: var(--acid); background: #121c23; }
.ability-card > div { min-width: 0; }
.ability-card small, .ability-card p, .ability-card > b { color: #66747e; font: 600 .58rem/1.2 monospace; }
.ability-card h2 { margin: 5px 0; overflow: hidden; color: #c5cdd3; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.ability-card p { display: -webkit-box; min-height: 2.4em; margin: 0; overflow: hidden; line-height: 1.2; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ability-card > b { white-space: nowrap; }
.ability-card > i { color: #52616c; font-style: normal; }
.ability-sigil { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid #617887; background: radial-gradient(circle at 38% 35%,rgba(199,230,244,.18),rgba(9,14,18,.95) 68%); color: #c8dae3; font: 600 .8rem/1 monospace; clip-path: polygon(14% 0,86% 0,100% 14%,100% 86%,86% 100%,14% 100%,0 86%,0 14%); box-shadow: inset 0 0 14px rgba(145,198,221,.12); }
.ability-sigil.slot-random { border-color: #9bdb31; color: #c8ff67; }
.ability-sigil.slot-passive { border-color: #9f83ca; color: #c9aff0; }
.ability-sigil.slot-special_1, .ability-sigil.slot-special_2 { border-color: #4ea2d2; color: #8fd5fa; }
.ability-sigil-large { width: 90px; height: 90px; font-size: 1.15rem; }
.ability-sigil img { display: block; width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 0 5px rgba(170,220,240,.2)); }
.ability-sigil-large img { width: 64px; height: 64px; image-rendering: auto; }
.ability-detail-grid { grid-template-columns: 1fr 1.15fr; }
.ability-summary-body { display: grid; grid-template-columns: 100px minmax(0,1fr); gap: 18px; align-items: start; padding: 18px; }
.ability-summary-body h2 { margin: 0 0 8px; color: #d4dce1; font-size: 1rem; }
.ability-summary-body p { color: #96a3ac; font-size: .75rem; line-height: 1.55; }
.ability-summary-body code { display: block; overflow: hidden; color: #64727c; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.ability-owner-list a { display: grid; grid-template-columns: auto minmax(0,1fr) auto 16px; gap: 10px; align-items: center; min-height: 58px; padding: 9px 12px; border-bottom: 1px solid #25313a; }
.ability-owner-list a:hover { background: #121a20; }
.ability-owner-list .element-badge { position: static; }
.ability-owner-list strong, .ability-owner-list small { display: block; }
.ability-owner-list strong { color: #bec8ce; font-size: .76rem; }
.ability-owner-list small, .ability-owner-list b { color: #687680; font: 600 .58rem/1.25 monospace; }
.ability-owner-list i { color: #52616b; font-style: normal; }
.ability-combat-panel { margin-top: 14px; }
.ability-combat-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
.ability-combat-grid > div { min-width: 0; min-height: 72px; padding: 14px 16px; border-right: 1px solid #25313a; border-bottom: 1px solid #25313a; background: linear-gradient(180deg,rgba(17,25,31,.75),rgba(8,13,17,.75)); }
.ability-combat-grid span, .ability-source span, .ability-source small { display: block; color: #64737d; font: 600 .57rem/1.25 monospace; letter-spacing: .08em; }
.ability-combat-grid strong { display: block; margin-top: 7px; overflow: hidden; color: #c9d3d9; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.ability-source { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 11px 16px; }
.ability-source code { overflow: hidden; color: #93a3ad; font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.hero-profile-fragment { display: block; margin-top: 14px; padding: 10px; border: 1px solid #34414b; background: #090d11; color: var(--acid); }

.term-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-bottom: 30px; }
.term-card { display: grid; grid-template-columns: 58px minmax(0,1fr) auto 18px; gap: 12px; align-items: center; min-width: 0; min-height: 112px; padding: 12px; border: 1px solid #384954; background: linear-gradient(145deg,#111920,#0a0f13); clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
.glossary-card { grid-template-columns: 58px minmax(0,1fr) 18px; }
.term-card:hover { border-color: var(--acid); background: #121c23; }
.term-card > div { min-width: 0; }
.term-card small, .term-card > b { color: #6e7d87; font: 600 .65rem/1.2 monospace; letter-spacing: .06em; }
.term-card h2 { margin: 5px 0; overflow: hidden; color: #d0d8dd; font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.term-card p { display: -webkit-box; min-height: 3.8em; margin: 0; overflow: hidden; color: #87959e; font: .7rem/1.3 monospace; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.term-card > b { white-space: nowrap; }
.term-card > i { color: #52616c; font-style: normal; }
.term-glyph { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid #60a2b8; background: radial-gradient(circle at 38% 35%,rgba(98,207,230,.18),rgba(9,14,18,.95) 68%); color: #9ce9f4; font: 700 .8rem/1 monospace; clip-path: polygon(14% 0,86% 0,100% 14%,100% 86%,86% 100%,14% 100%,0 86%,0 14%); box-shadow: inset 0 0 14px rgba(87,209,231,.12); }
.term-glyph img { width: 32px; height: 32px; image-rendering: auto; }
.term-glyph-large img { width: 48px; height: 48px; }
.effect-controls { justify-content: space-between; }
.effect-controls .search-control { max-width: 430px; }
.effect-controls .filter-control { min-width: 0; }
.effect-controls .filter-control button { padding: .56rem .66rem; }
.effect-index { border: 1px solid var(--line); background: #0b1015; }
.effect-row { display: grid; grid-template-columns: minmax(260px,1fr) minmax(220px,auto) 84px; gap: 14px; align-items: center; min-height: 48px; padding: 7px 10px 7px 15px; border-bottom: 1px solid #1d2831; scroll-margin-top: 78px; }
.effect-row:last-child { border-bottom: 0; }
.effect-row:hover, .effect-row:target { background: rgba(163,255,18,.055); }
.effect-row > code { overflow: hidden; color: #cbd5db; font: .76rem/1.35 monospace; text-overflow: ellipsis; white-space: nowrap; }
.effect-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.effect-tags span { padding: 4px 6px; border: 1px solid #34434d; color: #70808a; font: 700 .56rem/1 monospace; letter-spacing: .06em; }
.effect-tags .is-type { border-color: #5c7b35; color: #b9e66c; }
.effect-tags .is-context { border-color: #36556a; color: #82b9d8; }
.effect-tags .is-negative { border-color: #83493f; color: #f18b78; }
.effect-copy { display: flex; align-items: center; justify-content: center; gap: 6px; height: 32px; border: 1px solid #40515d; background: #101820; color: #8797a1; cursor: pointer; font: 700 .58rem/1 monospace; }
.effect-copy:hover, .effect-copy.is-copied { border-color: var(--acid); color: var(--acid); background: rgba(163,255,18,.06); }
.effect-copy svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.glossary-card .term-glyph { border-color: #809443; color: var(--acid); }
.term-glyph-large { width: 90px; height: 90px; font-size: 1.15rem; }
.term-detail-grid { grid-template-columns: 1fr 1fr; }
.term-definition { display: grid; grid-template-columns: 100px minmax(0,1fr); gap: 18px; align-items: start; padding: 18px; }
.term-definition h2 { margin: 0 0 8px; color: #d4dce1; font-size: 1rem; }
.term-definition p { margin: 0; color: #9ba8b0; font-size: .78rem; line-height: 1.6; }
.term-definition code { display: block; margin-top: 12px; overflow: hidden; color: #64727c; font-size: .63rem; text-overflow: ellipsis; white-space: nowrap; }
.term-primary-link, .term-link-list a { display: grid; gap: 12px; align-items: center; min-height: 52px; padding: 10px 14px; border-bottom: 1px solid #25313a; }
.term-primary-link { grid-template-columns: minmax(0,1fr) 18px; }
.term-link-list a { grid-template-columns: minmax(0,1fr) auto 18px; }
.term-primary-link:hover, .term-link-list a:hover { background: #121a20; }
.term-primary-link strong, .term-link-list strong { color: #c1cbd1; font-size: .76rem; }
.term-primary-link i, .term-link-list i { color: #5d6c76; font-style: normal; }
.term-link-list p { margin: 0; padding: 16px; color: #74818a; font-size: .72rem; }
.term-metric { grid-template-columns: repeat(3,minmax(0,1fr)); }
.ability-status-panel { margin-top: 14px; }

/* Readability floor for compact telemetry text. */
.eyebrow { font-size: .7rem; }
.control-metric span,
.control-metric small,
.console-panel > header span,
.console-panel > header small,
.console-panel > header a,
.catalog-table .catalog-head,
.catalog-table a span,
.catalog-table a i,
.distribution-list span,
.distribution-list strong,
.workspace-footer,
.hero-family > header small,
.family-code,
.variant-data > strong,
.variant-data dt,
.variant-data dd,
.detail-metric span,
.detail-metric small,
.entity-state,
.entity-card dt,
.entity-card dd,
.placement-table .placement-head,
.placement-table a span,
.hero-variant-detail > header span,
.hero-variant-detail > header code,
.hero-variant-stat dt,
.hero-variant-stat dd,
.hero-variant-stat h3,
.hero-variant-stat li b,
.hero-variant-stat li code { font-size: .68rem; }

@media (max-width: 1040px) {
  .hero-game-body { grid-template-columns: minmax(330px,1fr) minmax(310px,.9fr); }
  .hero-slot-row { grid-template-columns: repeat(3,42px); }
  .hero-slot-row i { width: 40px; height: 40px; }
  .effect-controls { align-items: stretch; flex-direction: column; }
  .effect-controls .search-control { max-width: none; }
  .app-shell { grid-template-columns: 72px minmax(0,1fr); }
  .topbar { grid-template-columns: 72px 1fr auto; }
  .topbar .brand { justify-content: center; padding: 0; }
  .topbar .brand > span:last-child { display: none; }
  .side-nav { padding-inline: 8px; }
  .side-nav > p, .side-nav a span, .side-nav a b, .sidebar-meta { display: none; }
  .side-nav a { grid-template-columns: 1fr; justify-items: center; padding: 0; }
  .side-nav a i { width: 30px; height: 30px; }
  .workspace { padding-inline: 24px; }
  .control-metric { grid-template-columns: 1fr 1fr; }
  .quicklook-grid { grid-template-columns: repeat(3, 1fr); }
  .hero-grid { grid-template-columns: repeat(3, minmax(180px,1fr)); }
  .variant-grid { grid-template-columns: 1fr 1fr; }
  .hero-family-list { grid-template-columns: 1fr; }
  .ability-grid { grid-template-columns: 1fr 1fr; }
  .term-grid { grid-template-columns: 1fr 1fr; }
  .ability-combat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 720px) {
	.hero-game-sticky { position: sticky; z-index: 14; top: 100px; border-bottom: 1px solid #607789; background: #070a0d; box-shadow: 0 10px 22px rgba(0,0,0,.68); }
	.hero-game-header { grid-template-columns: 60px minmax(0,1fr); min-height: 66px; padding: 5px 10px 5px 7px; }
	.hero-game-header::after { left: 72px; }
	.hero-game-portrait-wrap { height: 56px; }
	.hero-game-portrait-wrap .hero-canonical-portrait { width: 58px; height: 56px; }
	.hero-game-portrait-wrap .hero-canonical-portrait span { right: 2px; bottom: 2px; padding: 2px 3px; font-size: .42rem; }
	.hero-game-profile-state { display: none; }
	.hero-game-identity strong { font-size: 1rem; }
	.hero-game-identity h2 { font-size: .68rem; }
	.hero-game-identity p { margin-top: 5px; }
	.hero-game-sticky > .hero-profile-tabs { width: auto; margin: 0; border-width: 0; border-top-width: 1px; }
	.hero-game-sticky > .hero-profile-tabs button { min-height: 36px; }
	.hero-game-body { grid-template-columns: 1fr; min-height: 0; }
	.hero-game-abilities { border-right: 0; border-bottom: 1px solid #718696; }
	.hero-game-telemetry { padding: 10px; }
	.hero-slot-panel { min-height: 112px; }
	.effect-row { grid-template-columns: minmax(0,1fr) 40px; gap: 5px 10px; padding: 9px 8px 9px 11px; }
	.effect-tags { grid-column: 1; justify-content: flex-start; }
	.effect-copy { grid-column: 2; grid-row: 1 / span 2; width: 40px; height: 38px; }
	.effect-copy span { display: none; }
  .app-shell { display: block; padding-top: 52px; }
  .topbar { position: fixed; grid-template-columns: auto 1fr auto; height: 52px; }
  .topbar .brand { width: 52px; height: 52px; border-right: 0; }
  .topbar-path { padding-inline: 8px; font-size: .5rem; }
  .global-search { width: auto; margin: 0 8px; }
  .global-search label { height: 32px; }
  .global-search-result { position: fixed; top: 51px; right: 8px; left: 8px; max-height: 60vh; }
  .topbar .system-state { display: block; padding-right: 12px; font-size: 0; }
  .topbar .system-state span { margin: 0; }
  .sidebar { position: sticky; z-index: 15; top: 52px; width: 100%; height: 48px; display: block; border-right: 0; border-bottom: 1px solid #252f38; overflow-x: auto; }
  .side-nav { display: flex; min-width: 360px; height: 47px; padding: 4px 8px; }
  .side-nav a { flex: 1; min-height: 38px; grid-template-columns: 25px auto; gap: 6px; padding: 0 8px; }
  .side-nav a span { display: block; font-size: .68rem; white-space: nowrap; }
  .side-nav a i { width: 24px; height: 24px; }
  .workspace { padding: 20px 14px 0; overflow: visible; }
  .workspace-heading { align-items: flex-start; flex-direction: column; gap: 14px; }
  .heading-state { min-width: 0; padding: 0; border: 0; }
  .control-metric { grid-template-columns: 1fr 1fr; }
  .control-metric > * { padding: 13px; }
  .console-grid { grid-template-columns: 1fr; }
  .specimen-panel, .system-panel { grid-column: 1; grid-row: auto; }
  .quicklook-grid { grid-template-columns: repeat(3, 1fr); }
  .page-hero { align-items: flex-start; flex-direction: column; gap: 16px; padding-top: 0; }
  .page-counter { align-self: auto; }
  .control-rack { align-items: stretch; flex-direction: column; }
  .filter-control { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 3px; }
  .filter-control > span { display: none; }
  .filter-control button { flex: 0 0 auto; min-height: 38px; }
  .hero-grid { grid-template-columns: 1fr 1fr; }
  .hero-family > header > div { align-items: flex-start; flex-direction: column; gap: 5px; }
  .hero-family > header small, .family-code { display: none; }
  .variant-grid { grid-template-columns: 1fr 1fr; }
  .detail-metric { grid-template-columns: 1fr 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .hero-detail-grid { grid-template-columns: 1fr; }
  .hero-profile-main { grid-template-columns: 1fr; min-height: 0; }
  .ability-grid, .ability-detail-grid { grid-template-columns: 1fr; }
  .term-grid, .term-detail-grid { grid-template-columns: 1fr; }
  .hero-lore-panel { border-right: 0; border-bottom: 1px solid #536a80; }
  .hero-biography { max-height: 340px; }
  .hero-profile-stat { grid-template-columns: 1fr 1fr; }
  .npc-level-group > summary { grid-template-columns: 1fr 28px; }
  .npc-level-group .group-stats { display: none; }
  .workspace-footer { flex-wrap: wrap; }
}

@media (max-width: 460px) {
  .hero-game-section-head small { display: none; }
  .hero-game-abilities { padding: 8px; }
  .hero-game-abilities .hero-profile-ability li { grid-template-columns: 1fr; gap: 4px; }
  .hero-game-abilities .hero-profile-ability b { padding: 0 0 2px; }
  .hero-slot-panel { gap: 8px; padding-inline: 4px; }
  .hero-slot-row { grid-template-columns: repeat(3,34px); gap: 3px; }
  .hero-slot-row i { width: 32px; height: 32px; font-size: .8rem; }
  .hero-stat-block > div { grid-template-columns: minmax(100px,1fr) auto; }
  .hero-stat-block > div > i { grid-column: 1 / -1; padding-bottom: 7px; text-align: left; }
  .side-nav a { grid-template-columns: 1fr; }
  .side-nav a span { display: none; }
  .control-metric { grid-template-columns: 1fr; }
  .control-metric > * { min-height: 76px; }
  .quicklook-grid { grid-template-columns: 1fr 1fr; }
  .hero-grid { grid-template-columns: 1fr; }
  .variant-grid { grid-template-columns: 1fr; }
  .variant-portrait { aspect-ratio: 1.9; }
  .hero-variant-main { grid-template-columns: 1fr; }
  .hero-detail-portrait { max-height: 240px; border-right: 0; border-bottom: 1px solid #222c34; }
  .hero-family-summary { grid-template-columns: 104px minmax(0,1fr); }
  .hero-family-portrait { min-height: 0; border-right: 1px solid #26313a; border-bottom: 0; }
  .hero-profile-stat { grid-template-columns: 1fr; }
  .hero-variant-ability { grid-template-columns: 1fr; gap: 6px; }
  .hero-variant-ability small { display: none; }
  .ability-card { grid-template-columns: 52px minmax(0,1fr) 16px; }
  .ability-card > b { display: none; }
  .ability-sigil { width: 50px; height: 50px; }
  .ability-summary-body { grid-template-columns: 72px minmax(0,1fr); gap: 12px; }
  .ability-summary-body .ability-sigil-large { width: 70px; height: 70px; }
  .ability-owner-list a { grid-template-columns: auto minmax(0,1fr) 16px; }
  .ability-owner-list a > b { display: none; }
  .ability-source { grid-template-columns: 1fr; gap: 5px; }
  .term-card, .glossary-card { grid-template-columns: 50px minmax(0,1fr) 16px; }
  .term-card > b { display: none; }
  .term-glyph { width: 48px; height: 48px; }
  .term-definition { grid-template-columns: 72px minmax(0,1fr); gap: 12px; }
  .term-definition .term-glyph-large { width: 70px; height: 70px; }
  .term-metric { grid-template-columns: 1fr; }
  .hero-lore-identity { grid-template-columns: 96px minmax(0,1fr); }
  .hero-canonical-portrait { height: 86px; }
  .catalog-table > * { grid-template-columns: minmax(120px,1fr) 58px 52px 18px; min-width: 370px; }
  .catalog-table .catalog-head span:nth-child(3), .catalog-table a span { display: none; }
}

/* Linked archive breadcrumbs */
.eyebrow a { color: var(--acid); text-decoration: none; }
.eyebrow a:hover { color: #f1ff98; text-decoration: underline; text-underline-offset: .25rem; }

/* Campaign level index and detail records */
.level-group-index { display: grid; gap: 8px; margin-bottom: 30px; }
.level-group-card { border: 1px solid #4a6076; background: #0c1116; clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
.level-group-card > header { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; min-height: 62px; padding: 8px 16px; border-bottom: 1px solid #536b83; background: linear-gradient(180deg, rgba(69,94,124,.58), rgba(22,32,43,.9) 48%, #10161c); box-shadow: inset 0 1px rgba(224,239,255,.3); }
.level-group-card > header > div:first-child { display: flex; align-items: center; gap: 14px; }
.level-group-card h2 { margin: 0; color: #d0d7dc; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; }
.level-stage-list { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: #293642; }
.level-group-card:last-child .level-stage-list { grid-template-columns: repeat(3, minmax(0,1fr)); }
.level-stage-link { display: grid; grid-template-columns: 48px minmax(0,1fr) 16px; gap: 10px; align-items: center; min-height: 68px; padding: 10px 12px; background: #0d1318; }
.level-stage-link:hover { background: linear-gradient(180deg, rgba(65,91,119,.42), #111820); }
.level-stage-link .stage-number { color: var(--acid); font: 600 .75rem/1 monospace; }
.level-stage-link strong, .level-stage-link small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.level-stage-link strong { color: #b8c1c8; font-size: .72rem; }
.level-stage-link small { margin-top: .28rem; color: #697681; font: .62rem/1 monospace; }
.level-stage-link em { color: #61707c; font-style: normal; text-align: right; }
.level-detail-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr); gap: 14px; }
.level-system-panel { grid-column: 1 / -1; }
.level-enemy-list { display: grid; grid-template-columns: 1fr 1fr; }
.level-enemy-list > a { display: grid; grid-template-columns: minmax(110px,.7fr) minmax(0,1.3fr) 16px; gap: 10px; align-items: center; min-height: 46px; padding: 6px 14px; border-right: 1px solid #202a32; border-bottom: 1px solid #202a32; }
.level-enemy-list > a:hover { background: #141c23; }
.level-enemy-list strong { overflow: hidden; color: #b7c0c7; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.level-enemy-list code { overflow: hidden; color: #687580; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.level-enemy-list em { color: #62717c; font-style: normal; }
.empty-panel-state { margin: 0; padding: 28px 16px; color: #6b7781; }
.loot-placeholder, .item-status-body { padding: 22px; }
.loot-placeholder > span { color: var(--orange); font: 600 .66rem/1 monospace; letter-spacing: .09em; }
.loot-placeholder h3, .item-status-body h2 { margin: 12px 0 8px; color: #c4ccd2; font-size: 1rem; }
.loot-placeholder p, .item-status-body p { color: #7c8892; font-size: .76rem; line-height: 1.6; }
.loot-placeholder a { display: inline-block; margin-top: 12px; color: var(--acid); font: 600 .68rem/1 monospace; }
.level-system-list, .item-status-body dl { margin: 0; padding: 10px 16px; }
.level-system-list div, .item-status-body dl div { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 16px; padding: 9px 0; border-bottom: 1px dotted #2a3540; }
.level-system-list div:last-child, .item-status-body dl div:last-child { border: 0; }
.level-system-list dt, .item-status-body dt { color: #6a7781; font-size: .68rem; }
.level-system-list dd, .item-status-body dd { min-width: 0; margin: 0; overflow: hidden; color: #a8b2ba; font: .68rem/1.4 monospace; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.item-status-panel { max-width: 820px; }
.item-status-body .entity-state { margin-bottom: 14px; }

/* Decoded procedural item archive */
.item-metric { margin-bottom: 14px; }
.loot-rule-panel, .item-catalog-panel { margin-bottom: 14px; }
.loot-rule-grid { display: grid; grid-template-columns: minmax(260px,.7fr) minmax(0,1.3fr); }
.loot-rule-grid dl { margin: 0; padding: 12px 16px; border-right: 1px solid #27323b; }
.loot-rule-grid dl div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px dotted #2a3540; }
.loot-rule-grid dl div:last-child { border: 0; }
.loot-rule-grid dt, .loot-rule-grid dd { margin: 0; color: #687680; font-size: .7rem; }
.loot-rule-grid dd { color: #b1bbc2; font-family: monospace; }
.epic-curve { min-width: 0; padding: 18px; }
.epic-curve > div { display: flex; justify-content: space-between; color: #77848e; font: 600 .66rem/1 monospace; }
.epic-curve > div span { color: #53606a; }
.epic-curve ol { height: 112px; display: grid; grid-template-columns: repeat(18,minmax(4px,1fr)); gap: 4px; align-items: end; margin: 14px 0 0; padding: 0; list-style: none; }
.epic-curve li { height: 100%; display: flex; align-items: center; flex-direction: column; justify-content: flex-end; gap: 5px; border-bottom: 1px solid #34414b; }
.epic-curve i { width: 100%; height: calc((var(--chance) / 30) * 80%); min-height: 2px; background: linear-gradient(180deg,var(--acid),#668300); box-shadow: 0 0 5px rgba(215,255,36,.22); }
.epic-curve small { color: #61707a; font: .58rem/1 monospace; }
.loot-rule-note { margin: 0; padding: 11px 16px; border-top: 1px solid #27323b; color: #72808a; font-size: .72rem; }
.item-controls { margin: 0; border: 0; border-bottom: 1px solid #27323b; }
.item-controls .search-control { flex: 1 1 260px; }
.filter-control button b { margin-left: 5px; color: #63717b; font: inherit; }
.item-table { overflow-x: auto; }
.item-table .item-head, .item-row { display: grid; grid-template-columns: minmax(180px,1.2fr) 90px minmax(170px,1fr) 70px 18px; gap: 12px; align-items: center; min-width: 650px; padding: 0 14px; border-bottom: 1px solid #202a32; }
.item-table .item-head { min-height: 30px; color: #56636d; font: 600 .62rem/1 monospace; }
.item-row { min-height: 46px; }
.item-row:hover { background: #141c23; }
.item-row strong { overflow: hidden; color: #bbc4ca; font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; }
.item-row span, .item-row i, .item-row code { overflow: hidden; color: #6e7b85; font: .66rem/1 monospace; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.item-row span { color: var(--acid); }
.item-row em { color: #63727c; font-style: normal; }
.item-loading, .result-limit { margin: 0; padding: 20px 14px; color: #6b7882; font-size: .72rem; }
.result-limit { border-top: 1px solid #27323b; color: var(--orange); }
.item-detail-grid .item-asset-panel { grid-column: 1 / -1; }
.item-detail-grid .item-variation-panel { grid-column: 1 / -1; }
.item-configurator-shell { margin-bottom: 14px; }
.item-equipment-card { --item-cut: 11px; display: grid; grid-template-columns: 156px minmax(0,1fr); margin-bottom: 14px; border: 1px solid #718797; background: #080c0f; box-shadow: inset 0 1px rgba(229,244,252,.28),0 8px 24px rgba(0,0,0,.24); clip-path: polygon(var(--item-cut) 0,calc(100% - var(--item-cut)) 0,100% var(--item-cut),100% calc(100% - var(--item-cut)),calc(100% - var(--item-cut)) 100%,var(--item-cut) 100%,0 calc(100% - var(--item-cut)),0 var(--item-cut)); }
.item-equipment-icon { display: grid; place-items: center; min-height: 178px; padding: 16px; border-right: 1px solid #718797; background: linear-gradient(145deg,rgba(126,151,164,.35),rgba(20,28,33,.94) 38%,#090d10); }
.item-equipment-icon img { display: block; width: 124px; height: 124px; padding: 7px; border: 1px solid #8ca0aa; background: radial-gradient(circle,rgba(113,146,166,.2),#080c0f 72%); object-fit: contain; image-rendering: auto; }
.item-equipment-summary { min-width: 0; }
.item-equipment-summary > header { display: flex; justify-content: space-between; gap: 14px; align-items: center; min-height: 30px; padding: 0 14px; border-bottom: 1px solid #27343d; background: linear-gradient(180deg,#1c272e,#10161b); }
.item-equipment-summary > header span { color: var(--orange); font: 700 .66rem/1 monospace; letter-spacing: .06em; }
.item-equipment-summary > header code { color: #71808a; font-size: .62rem; }
.item-equipment-summary h2 { margin: 0; padding: 13px 14px 5px; overflow-wrap: anywhere; color: #edf2f4; font-size: 1.08rem; line-height: 1.25; }
.item-equipment-summary > p { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0; padding: 0 14px 12px; border-bottom: 1px solid #27343d; }
.item-equipment-summary > p strong { color: #aeb9bf; font-size: .7rem; }
.item-equipment-summary > p i { color: var(--acid); font: normal 600 .68rem/1.2 monospace; }
.item-equipment-stats { border-bottom: 1px solid #27323a; background: linear-gradient(90deg,rgba(8,13,16,.95),rgba(12,18,22,.78)); }
.item-equipment-stats > p { margin: 0; padding: 11px 14px; color: #64717b; font: .65rem/1.4 monospace; }
.item-equipment-stats > div { display: grid; grid-template-columns: 72px minmax(0,1fr) auto; gap: 10px; align-items: center; min-height: 35px; padding: 0 14px; border-bottom: 1px solid #202a31; }
.item-equipment-stats > div:last-child { border-bottom: 0; }
.item-equipment-stats span { color: #65737d; font: .56rem/1 monospace; letter-spacing: .08em; }
.item-equipment-stats strong { color: #7eff51; font: 700 .76rem/1.25 monospace; }
.item-equipment-stats small { color: #596772; font: .54rem/1.2 monospace; text-align: right; }
.item-equipment-summary ul { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 0; padding: 0; background: #26323a; list-style: none; }
.item-equipment-summary li { min-width: 0; padding: 10px 14px; border-right: 1px solid #26323a; background: #0b1014; }
.item-equipment-summary li:last-child { border-right: 0; }
.item-equipment-summary li span,.item-equipment-summary li b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-equipment-summary li span { color: #66747d; font: 600 .58rem/1 monospace; }
.item-equipment-summary li b { margin-top: 7px; color: #75d75b; font: 600 .7rem/1.2 monospace; }
.item-equipment-summary li.is-empty b { color: #4f5b63; font-weight: 400; }
.item-equipment-summary footer { display: flex; justify-content: space-between; gap: 14px; align-items: center; min-height: 34px; padding: 0 14px; border-top: 1px solid #41515d; background: linear-gradient(180deg,#151e24,#0d1317); }
.item-equipment-summary footer span { overflow: hidden; color: #697780; font: .58rem/1 monospace; text-overflow: ellipsis; white-space: nowrap; }
.item-equipment-summary footer strong { flex: 0 0 auto; color: #d8e0e3; font: 600 .7rem/1 monospace; }
.item-configurator { margin-bottom: 14px; }
.configurator-grid { display: grid; grid-template-columns: minmax(320px,1.2fr) minmax(280px,.8fr); }
.configurator-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; padding: 1px; background: #29343d; }
.configurator-controls label { min-width: 0; display: block; padding: 12px; background: #0e1419; }
.configurator-controls label > span { display: block; margin-bottom: 7px; color: #687680; font: 600 .66rem/1 monospace; }
.configurator-controls select { width: 100%; height: 38px; padding: 0 30px 0 9px; border: 1px solid #394751; border-radius: 0; background: #090d11; color: #aeb8bf; font: .7rem/1 monospace; color-scheme: dark; }
.configurator-controls select:focus { border-color: var(--acid); outline: 1px solid var(--acid); }
.configurator-controls .config-fixed { display: flex; align-items: center; width: 100%; min-height: 38px; padding: 0 9px; border: 1px solid #27333c; background: #0b1014; color: #78858e; font: .7rem/1.25 monospace; }
.configurator-preview { display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 14px; align-items: center; padding: 16px; border-left: 1px solid #2a3540; background: radial-gradient(circle at 48px 50%,rgba(112,143,164,.18),transparent 35%),#0b1015; }
.configurator-preview img { width: 96px; height: 96px; object-fit: contain; border: 1px solid #3a4853; background: #090d11; }
.configurator-preview span { color: #697780; font: 600 .62rem/1 monospace; }
.configurator-preview h3 { margin: 8px 0; color: #d0d7dc; font-size: .9rem; line-height: 1.25; }
.configurator-preview code { display: block; overflow: hidden; color: var(--acid); font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.summon-command { position: relative; grid-column: 1 / -1; }
.summon-command > span { display: block; margin-bottom: 7px; }
.summon-command > div { display: grid; grid-template-columns: minmax(0,1fr) 38px; min-height: 38px; border: 1px solid #536573; background: #090d11; }
.summon-command code { display: flex; align-items: center; min-width: 0; padding: 0 11px; overflow-x: auto; color: #d2e5c8; font-size: .72rem; text-overflow: clip; white-space: nowrap; }
.summon-command button { display: grid; place-items: center; border: 0; border-left: 1px solid #536573; background: linear-gradient(#1b252d,#10171d); color: #aeb8bf; cursor: pointer; }
.summon-command button svg { fill: currentColor; }
.summon-command button:hover,.summon-command button:focus-visible,.summon-command button.is-copied { color: var(--acid); outline: 0; }
.summon-command button:focus-visible { box-shadow: inset 0 0 0 1px var(--acid); }
.summon-command > small { position: absolute; right: 0; bottom: -15px; color: var(--acid); font: .56rem/1 monospace; }
.item-compatibility { padding: 10px 14px; }
.item-compatibility > div { padding: 10px 0; border-bottom: 1px dotted #29343d; }
.item-compatibility > div:last-child { border: 0; }
.item-compatibility span { display: block; margin-bottom: 7px; color: #63717b; font: 600 .66rem/1 monospace; }
.item-compatibility p { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.item-compatibility i, .item-compatibility code, .item-compatibility b { padding: 5px 7px; border: 1px solid #33404a; color: #9da8b0; font: .64rem/1 monospace; font-style: normal; }
.item-asset-panel > code { display: block; margin: 16px; padding: 14px; border: 1px solid #33404b; background: #090d11; color: var(--acid); overflow-wrap: anywhere; }
.item-asset-panel > p { margin: 0; padding: 0 16px 18px; color: #74818b; font-size: .74rem; line-height: 1.6; }
.item-variant-list { display: grid; grid-template-columns: 1fr 1fr; }
.item-variant-list > div { min-width: 0; display: grid; grid-template-columns: 64px minmax(120px,.7fr) minmax(100px,.5fr) minmax(150px,1.3fr); gap: 10px; align-items: center; padding: 11px 14px; border-right: 1px solid #202a32; border-bottom: 1px solid #202a32; }
.item-variant-list img { grid-row: 1 / span 2; width: 64px; height: 64px; object-fit: contain; border: 1px solid #35424d; background: radial-gradient(circle,rgba(115,143,166,.18),#090d11 72%); }
.item-variant-list strong, .item-variant-list span, .item-variant-list code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-variant-list strong { color: #b8c1c8; font-size: .72rem; }
.item-variant-list span { color: var(--acid); font: .62rem/1 monospace; }
.item-variant-list code { color: #687680; font-size: .6rem; }
.item-variant-list small { grid-column: 2 / -1; color: #56636d; font: .58rem/1 monospace; }
.variation-model { padding: 16px; }
.variation-equation { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 14px; border: 1px solid #33404a; background: #090d11; }
.variation-equation span, .variation-equation strong { padding: 6px 8px; border: 1px solid #3b4852; color: #86939d; font: 600 .66rem/1 monospace; }
.variation-equation strong { border-color: var(--acid); color: var(--acid); }
.variation-equation b { color: #52606a; font: .7rem/1 monospace; }
.variation-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 12px; background: #2b363f; }
.variation-summary > div { padding: 14px; background: #0e1419; }
.variation-summary strong, .variation-summary span, .variation-summary small { display: block; }
.variation-summary strong { color: #d0d7dc; font: 300 1.35rem/1 monospace; }
.variation-summary span { margin-top: 7px; color: var(--acid); font: 600 .66rem/1 monospace; }
.variation-summary small { margin-top: 5px; color: #64717b; font-size: .66rem; }
.suffix-example { padding: 14px 0; border-bottom: 1px dotted #2b363f; }
.suffix-example > span { color: #66747e; font: 600 .66rem/1 monospace; }
.suffix-example p { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0 0; }
.suffix-example i { padding: 6px 8px; border: 1px solid #34414b; color: #a7b1b9; font: .66rem/1 monospace; font-style: normal; }
.variation-model > p { margin: 14px 0 0; color: #74818b; font-size: .72rem; line-height: 1.6; }

@media (max-width: 900px) {
  .level-stage-list, .level-group-card:last-child .level-stage-list { grid-template-columns: 1fr 1fr; }
  .level-detail-grid { grid-template-columns: 1fr; }
  .level-system-panel { grid-column: 1; }
  .loot-rule-grid { grid-template-columns: 1fr; }
  .loot-rule-grid dl { border-right: 0; border-bottom: 1px solid #27323b; }
  .configurator-grid { grid-template-columns: 1fr; }
  .configurator-preview { border-top: 1px solid #2a3540; border-left: 0; }
}

@media (max-width: 560px) {
  .level-group-card > header { grid-template-columns: 1fr; }
  .level-group-card .group-stats { display: none; }
  .level-stage-list, .level-group-card:last-child .level-stage-list { grid-template-columns: 1fr; }
  .level-enemy-list { grid-template-columns: 1fr; }
  .level-enemy-list > a { border-right: 0; }
  .level-system-list div, .item-status-body dl div { grid-template-columns: 1fr; gap: 5px; }
  .level-system-list dd, .item-status-body dd { text-align: left; }
  .epic-curve { padding-inline: 10px; }
  .epic-curve ol { gap: 2px; }
  .epic-curve small { font-size: .5rem; }
  .item-detail-grid .item-asset-panel { grid-column: 1; }
  .item-detail-grid .item-variation-panel { grid-column: 1; }
  .variation-summary { grid-template-columns: 1fr; }
  .item-variant-list { grid-template-columns: 1fr; }
  .item-variant-list > div { grid-template-columns: 56px minmax(0,1fr); border-right: 0; }
  .item-variant-list img { grid-row: 1 / span 4; width: 56px; height: 56px; }
  .item-variant-list strong,.item-variant-list span,.item-variant-list code,.item-variant-list small { grid-column: 2; min-width: 0; }
  .item-variant-list code { white-space: normal; overflow-wrap: anywhere; }
  .item-variant-list small { grid-column: 2; }
  .configurator-controls { grid-template-columns: 1fr; }
  .configurator-preview { grid-template-columns: 72px minmax(0,1fr); }
  .configurator-preview img { width: 72px; height: 72px; }
  .item-equipment-card { grid-template-columns: 104px minmax(0,1fr); }
  .item-equipment-icon { min-height: 126px; padding: 10px; }
  .item-equipment-icon img { width: 82px; height: 82px; padding: 4px; }
  .item-equipment-summary ul { grid-template-columns: 1fr; }
  .item-equipment-summary li { padding-block: 8px; border-right: 0; border-bottom: 1px solid #26323a; }
  .item-equipment-summary li:last-child { border-bottom: 0; }
  .item-equipment-summary footer span { display: none; }
  .item-equipment-stats > div { grid-template-columns: 58px minmax(0,1fr); padding-block: 8px; }
  .item-equipment-stats small { grid-column: 2; text-align: left; }
}