:root {
  color-scheme: dark;
  --bg: #090a0e;
  --panel: #11131a;
  --panel-2: #171a22;
  --panel-3: #1d202a;
  --line: #292d38;
  --line-soft: #20232d;
  --text: #f6f7fb;
  --muted: #999fac;
  --muted-2: #717887;
  --red: #ee3124;
  --red-soft: rgba(238, 49, 36, .14);
  --cyan: #57d2e4;
  --green: #6bd59f;
  --amber: #f0b45d;
  --purple: #a99df5;
  --radius: 12px;
  font-family: "DM Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background:
    linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px),
    radial-gradient(circle at 15% -10%, rgba(238, 49, 36, .13), transparent 32rem),
    radial-gradient(circle at 90% 10%, rgba(76, 99, 177, .12), transparent 38rem),
    var(--bg);
  background-size: 34px 34px, 34px 34px, auto, auto, auto;
}

button, input, select { font: inherit; }
button, select { cursor: pointer; }

button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.topbar {
  min-height: 82px;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(90deg, rgba(12,13,18,.88), rgba(18,20,28,.82));
  box-shadow: 0 14px 38px rgba(0,0,0,.16);
}

.brand { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; }
.brand:hover .brand-mark { transform: translateY(-1px); box-shadow: 0 13px 34px rgba(238, 49, 36, .28); }
.brand-mark {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--red);
  box-shadow: 0 10px 28px rgba(238, 49, 36, .18);
  font-family: "IBM Plex Mono", monospace;
  font-size: 1.35rem;
  font-weight: 700;
}
.brand-mark span { transform: translateY(-1px); }
.eyebrow, .pane-kicker {
  color: var(--muted);
  font-family: "IBM Plex Mono", monospace;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.brand h1 { margin: 3px 0 0; font-size: 1.25rem; letter-spacing: -.02em; }
.brand h1 span { margin: 0 4px; color: var(--muted-2); font-weight: 400; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.overview-trigger {
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid rgba(87,210,228,.46);
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #f3fdff;
  background: linear-gradient(135deg, rgba(25,75,103,.96), rgba(57,44,116,.96));
  box-shadow: 0 8px 28px rgba(62,132,187,.18), inset 0 1px 0 rgba(255,255,255,.1);
  font-size: .84rem;
  font-weight: 700;
}
.overview-trigger:hover { border-color: rgba(108,226,242,.78); transform: translateY(-1px); box-shadow: 0 11px 34px rgba(62,132,187,.26), inset 0 1px 0 rgba(255,255,255,.14); }
.overview-trigger-mark { color: #8aeafa; font-size: .68rem; filter: drop-shadow(0 0 7px rgba(87,210,228,.7)); }
.ghost-button, .version-pill {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #cbd0db;
  background: rgba(20, 22, 29, .74);
  font-size: .85rem;
}
.ghost-button:hover { color: white; border-color: #444957; background: var(--panel-2); }
.ghost-button span { color: var(--muted); }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(107, 213, 159, .1); }

.control-deck {
  padding: 16px 24px 13px;
  display: grid;
  grid-template-columns: minmax(340px, 1fr) auto;
  grid-template-areas: "search lens" "topics topics";
  gap: 12px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.search-wrap {
  grid-area: search;
  position: relative;
  min-height: 48px;
  display: flex;
  align-items: center;
}
.search-wrap svg { position: absolute; left: 15px; width: 20px; fill: none; stroke: var(--muted); stroke-width: 1.8; }
.search-wrap input {
  width: 100%;
  height: 48px;
  padding: 0 48px 0 45px;
  border: 1px solid #333744;
  border-radius: 11px;
  color: white;
  background: rgba(19, 21, 28, .92);
  font-size: 1rem;
}
.search-wrap input::placeholder { color: #747b89; }
.search-wrap input:focus { border-color: #606777; background: var(--panel-2); outline: none; box-shadow: 0 0 0 3px rgba(87, 210, 228, .08); }
.search-wrap kbd { position: absolute; right: 13px; padding: 2px 7px; border: 1px solid var(--line); border-bottom-color: #3a3f4b; border-radius: 5px; color: var(--muted); background: #20232c; font-family: "IBM Plex Mono", monospace; font-size: .72rem; }
.quick-topics, .coverage-lens { display: flex; align-items: center; gap: 7px; }
.quick-topics { grid-area: topics; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.quick-topics::-webkit-scrollbar { display: none; }
.quick-topics > span, .coverage-lens > span { margin-right: 2px; color: var(--muted-2); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.quick-topics button, .coverage-lens button {
  flex: 0 0 auto;
  min-height: 31px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #b9bfcb;
  background: transparent;
  font-size: .8rem;
}
.quick-topics button:hover, .coverage-lens button:hover { border-color: #474c59; color: white; }
.coverage-lens { grid-area: lens; justify-content: flex-end; }
.coverage-lens button.active { border-color: rgba(238, 49, 36, .45); color: #ff9b93; background: var(--red-soft); }

.notice {
  min-height: 42px;
  padding: 9px 24px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #aeb4c0;
  background: rgba(240, 180, 93, .045);
  border-bottom: 1px solid rgba(240, 180, 93, .12);
  font-size: .79rem;
  line-height: 1.4;
}
.notice svg { flex: 0 0 auto; width: 17px; fill: none; stroke: var(--amber); stroke-width: 1.7; }
.notice strong { color: #d9dde5; }

.workspace {
  height: calc(100vh - 223px);
  min-height: 560px;
  padding: 14px 24px 24px;
  display: grid;
  grid-template-columns: 250px 340px minmax(420px, 1fr);
  gap: 12px;
}
.pane {
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(17, 19, 26, .88);
  overflow: hidden;
  box-shadow: 0 18px 55px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255,255,255,.018);
}
.pane-head {
  min-height: 68px;
  padding: 14px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.pane-kicker { margin: 0 0 4px; }
.pane-head h2 { margin: 0; font-size: 1.05rem; line-height: 1.2; letter-spacing: -.01em; }
.count-badge {
  min-width: 29px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: var(--panel-2);
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem;
}
.tactic-list, .technique-list { height: calc(100% - 68px); overflow-y: auto; scrollbar-color: #303440 transparent; scrollbar-width: thin; }
.tactic-button {
  width: 100%;
  min-height: 47px;
  padding: 8px 13px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: 4px 1fr auto;
  align-items: center;
  gap: 10px;
  color: #bfc4cf;
  background: transparent;
  text-align: left;
}
.tactic-button::before { content: ""; width: 3px; height: 24px; border-radius: 3px; background: var(--tactic-color, #596170); opacity: .6; }
.tactic-button:hover { color: white; background: rgba(255,255,255,.022); }
.tactic-button.active { color: white; background: linear-gradient(90deg, rgba(238,49,36,.13), rgba(238,49,36,.025)); }
.tactic-button.active::before { background: var(--red); opacity: 1; box-shadow: 0 0 14px rgba(238,49,36,.4); }
.tactic-button .name { font-size: .87rem; font-weight: 600; line-height: 1.2; }
.tactic-button .count { color: var(--muted-2); font-family: "IBM Plex Mono", monospace; font-size: .68rem; }

.technique-pane { display: flex; flex-direction: column; }
.list-tools {
  min-height: 62px;
  padding: 9px 12px;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 9px;
  border-bottom: 1px solid var(--line-soft);
}
.filter-field { min-width: 0; display: grid; gap: 4px; }
.filter-field > span { color: var(--muted-2); font-size: .62rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.list-tools select {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 0 28px 0 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: #c7ccd6;
  background: #171a22;
  font-size: .78rem;
}
.technique-list { height: calc(100% - 130px); }
.technique-button {
  width: 100%;
  min-height: 63px;
  padding: 10px 13px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  display: block;
  color: #d7dbe3;
  background: transparent;
  text-align: left;
}
.technique-button.sub { padding-left: 28px; }
.technique-button:hover { background: rgba(255,255,255,.025); }
.technique-button.active { background: #20232d; box-shadow: inset 3px 0 0 var(--red); }
.technique-button-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.technique-name { font-size: .88rem; font-weight: 600; line-height: 1.32; }
.technique-id { color: #8d94a2; font-family: "IBM Plex Mono", monospace; font-size: .67rem; white-space: nowrap; }
.technique-meta { margin-top: 6px; display: flex; align-items: center; gap: 7px; color: var(--muted-2); font-size: .7rem; }
.technique-meta .coverage-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.sub-label { color: var(--purple); }
.empty-state { padding: 34px 24px; color: var(--muted); text-align: center; }
.empty-state strong { display: block; margin-bottom: 6px; color: #d8dce4; }

.detail-pane { overflow-y: auto; scrollbar-color: #303440 transparent; scrollbar-width: thin; }
.detail-hero { padding: 23px 24px 20px; border-bottom: 1px solid var(--line-soft); background: linear-gradient(145deg, rgba(238,49,36,.07), transparent 45%); }
.detail-topline { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mitre-id { color: #ff8c84; font-family: "IBM Plex Mono", monospace; font-size: .78rem; font-weight: 600; }
.external-link { display: inline-flex; align-items: center; gap: 5px; color: #9ca3b1; font-size: .76rem; text-decoration: none; }
.external-link:hover { color: white; }
.detail-hero h2 { margin: 10px 0 9px; max-width: 900px; font-size: clamp(1.35rem, 2.1vw, 2rem); line-height: 1.15; letter-spacing: -.035em; }
.detail-description { max-width: 920px; margin: 0; color: #aeb4c0; font-size: .9rem; line-height: 1.62; }
.meta-row { margin-top: 17px; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.meta-chip { padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; color: #aeb4c0; background: rgba(21,23,30,.7); font-size: .7rem; }
.meta-chip.tactic { border-color: rgba(238,49,36,.25); color: #ff9e97; background: var(--red-soft); }

.coverage-section { padding: 20px 24px 30px; }
.coverage-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 15px; }
.coverage-heading h3 { margin: 0; font-size: 1rem; }
.coverage-heading p { margin: 5px 0 0; color: var(--muted); font-size: .78rem; }
.coverage-count { color: var(--muted); font-family: "IBM Plex Mono", monospace; font-size: .72rem; }
.coverage-group { margin-top: 20px; }
.group-label { margin: 0 0 9px; display: flex; align-items: center; gap: 8px; color: #8f96a4; font-family: "IBM Plex Mono", monospace; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; }
.group-label::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.product-card {
  position: relative;
  min-height: 220px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(29,32,42,.86), rgba(20,22,29,.9));
  overflow: hidden;
}
.product-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--pillar-color); opacity: .78; }
.product-card:hover { border-color: color-mix(in srgb, var(--pillar-color) 46%, #414653); transform: translateY(-2px); box-shadow: 0 13px 32px color-mix(in srgb, var(--pillar-color) 10%, transparent); }
.product-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.product-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.product-icon { flex: 0 0 auto; width: 31px; height: 31px; border-radius: 8px; display: grid; place-items: center; color: white; background: var(--product-color, #4d5565); font-family: "IBM Plex Mono", monospace; font-size: .7rem; font-weight: 600; }
.product-name { display: block; color: white; font-size: .86rem; font-weight: 700; line-height: 1.2; }
.product-category { display: block; margin-top: 3px; color: var(--muted-2); font-size: .68rem; }
.strength { flex: 0 0 auto; padding: 3px 6px; border-radius: 5px; font-family: "IBM Plex Mono", monospace; font-size: .62rem; text-transform: uppercase; }
.strength.direct { color: #8be5b7; background: rgba(107,213,159,.1); }
.strength.correlated { color: #85dce9; background: rgba(87,210,228,.1); }
.strength.supporting { color: #e7be80; background: rgba(240,180,93,.1); }
.product-context { margin-top: 10px; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.pillar-chip, .shared-chip, .release-chip { padding: 3px 6px; border: 1px solid var(--line); border-radius: 5px; font-size: .61rem; line-height: 1.25; }
.pillar-chip { border-color: color-mix(in srgb, var(--pillar-color) 46%, transparent); color: color-mix(in srgb, var(--pillar-color) 48%, white); background: color-mix(in srgb, var(--pillar-color) 11%, transparent); }
.shared-chip { color: #e8c27f; background: rgba(240,180,93,.07); }
.release-chip { color: #a9b0bd; background: rgba(255,255,255,.02); }
.product-rationale { margin: 11px 0 8px; color: #bec3cd; font-size: .75rem; line-height: 1.45; }
.current-capability { margin: 0 0 13px; color: #858d9c; font-size: .69rem; line-height: 1.45; }
.current-capability strong { color: #aeb5c2; font-weight: 600; }
.product-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mode-list { display: flex; flex-wrap: wrap; gap: 5px; }
.mode { padding: 2px 6px; border: 1px solid #303541; border-radius: 5px; color: #858d9b; font-size: .64rem; }
.product-links { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
.product-link { color: #969dab; text-decoration: none; font-size: .68rem; white-space: nowrap; }
.product-link:hover { color: white; }
.no-coverage { padding: 32px 20px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); text-align: center; }

.overview-dialog {
  width: min(1180px, calc(100vw - 28px));
  max-width: none;
  max-height: min(900px, calc(100vh - 28px));
  padding: 0;
  border: 1px solid rgba(113,131,165,.48);
  border-radius: 20px;
  color: var(--text);
  background: #0a0c13;
  box-shadow: 0 36px 140px rgba(0,0,0,.8), 0 0 64px rgba(57,108,180,.12);
  overflow: auto;
}
.overview-dialog::backdrop { background: rgba(3,4,8,.86); backdrop-filter: blur(11px) saturate(.8); }
.overview-dialog[open] { animation: overview-in .24s cubic-bezier(.2,.8,.2,1); }
.overview-shell {
  position: relative;
  isolation: isolate;
  min-height: 100%;
  background:
    radial-gradient(circle at 12% 9%, rgba(238,49,36,.16), transparent 25rem),
    radial-gradient(circle at 78% 2%, rgba(61,166,232,.15), transparent 29rem),
    radial-gradient(circle at 82% 66%, rgba(154,120,232,.11), transparent 28rem),
    linear-gradient(155deg, rgba(20,23,34,.96), rgba(8,10,16,.99) 60%);
  overflow: hidden;
}
.overview-shell::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .36;
  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: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 73%);
}
.overview-head {
  min-height: 78px;
  padding: 17px 22px 16px 27px;
  border-bottom: 1px solid rgba(124,141,173,.18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: rgba(10,12,19,.64);
  backdrop-filter: blur(18px);
}
.overview-kicker { margin: 0 0 5px; color: #7de4f2; font-family: "IBM Plex Mono", monospace; font-size: .7rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.overview-head h2 { margin: 0; font-size: clamp(1.08rem, 2vw, 1.35rem); letter-spacing: -.025em; }
.overview-close { flex: 0 0 auto; width: 38px; height: 38px; border: 1px solid rgba(132,145,172,.3); border-radius: 10px; color: #c8cfda; background: rgba(26,29,40,.78); font-size: 1.35rem; line-height: 1; }
.overview-close:hover { color: white; border-color: rgba(164,180,210,.62); background: rgba(37,41,54,.95); }
.overview-hero {
  padding: 34px 34px 28px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr);
  align-items: end;
  gap: 36px;
}
.live-story { display: inline-flex; align-items: center; gap: 9px; color: #a7e9d0; font-family: "IBM Plex Mono", monospace; font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.live-story i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(107,213,159,.09), 0 0 18px rgba(107,213,159,.55); }
.overview-copy h3 { max-width: 760px; margin: 14px 0 12px; font-size: clamp(2rem, 4.25vw, 3.65rem); line-height: .98; letter-spacing: -.058em; text-wrap: balance; }
.overview-copy h3::after { content: ""; width: 92px; height: 4px; margin-top: 18px; border-radius: 4px; display: block; background: linear-gradient(90deg, var(--red), var(--cyan), var(--purple)); box-shadow: 0 0 20px rgba(87,210,228,.3); }
.overview-copy p { max-width: 720px; margin: 0; color: #aeb9c9; font-size: 1rem; line-height: 1.58; }
.overview-metrics { border: 1px solid rgba(133,153,187,.24); border-radius: 16px; display: grid; grid-template-columns: repeat(2, 1fr); background: linear-gradient(145deg, rgba(29,34,49,.88), rgba(13,16,25,.88)); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 18px 48px rgba(0,0,0,.22); overflow: hidden; }
.overview-metrics div { min-width: 0; min-height: 112px; padding: 19px 13px 15px; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; }
.overview-metrics div + div { border-left: 1px solid rgba(133,153,187,.16); }
.overview-metrics div:nth-child(3) { border-left: 0; }
.overview-metrics div:nth-child(n+3) { border-top: 1px solid rgba(133,153,187,.16); }
.overview-metrics strong { font-family: "IBM Plex Mono", monospace; font-size: clamp(1.8rem, 3vw, 2.45rem); line-height: 1; letter-spacing: -.06em; background: linear-gradient(135deg, #fff, #7de4f2); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.overview-metrics span { margin-top: 10px; color: #8995a6; font-size: .7rem; line-height: 1.25; text-transform: uppercase; letter-spacing: .065em; }
.fabric-story { margin: 0 34px; padding: 23px 24px 25px; border: 1px solid rgba(129,148,181,.2); border-radius: 18px; background: rgba(11,14,22,.64); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
.attack-rail { padding: 0 5px 25px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; color: #8490a1; font-family: "IBM Plex Mono", monospace; font-size: .68rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.attack-source { color: #ff8178; }
.protected-outcome { color: #82ddb0; }
.rail-line { position: relative; height: 2px; border-radius: 2px; display: block; background: linear-gradient(90deg, rgba(238,49,36,.8), rgba(87,210,228,.78) 50%, rgba(107,213,159,.8)); box-shadow: 0 0 18px rgba(87,210,228,.15); overflow: visible; }
.rail-line::after { content: ""; position: absolute; inset: -3px 0; opacity: .32; background: inherit; filter: blur(6px); }
.rail-line i { position: absolute; z-index: 1; top: 50%; left: 0; width: 10px; height: 10px; border: 2px solid white; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 5px rgba(87,210,228,.11), 0 0 20px rgba(87,210,228,.85); transform: translate(-50%,-50%); animation: rail-pulse 4.2s ease-in-out infinite; }
.pillar-flow { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 15px; }
.pillar-story {
  --pillar-accent: #ee3124;
  position: relative;
  min-height: 284px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--pillar-accent) 35%, #323947);
  border-radius: 15px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--pillar-accent) 10%, #171b26), rgba(15,18,27,.97) 58%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.pillar-story::before { content: ""; position: absolute; top: -26px; left: 50%; width: 1px; height: 26px; background: linear-gradient(var(--pillar-accent), transparent); opacity: .72; }
.pillar-story::after { content: ""; position: absolute; inset: auto 18px 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--pillar-accent), transparent); opacity: .68; }
.pillar-story:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--pillar-accent) 68%, #fff); box-shadow: 0 18px 45px color-mix(in srgb, var(--pillar-accent) 13%, transparent), inset 0 1px 0 rgba(255,255,255,.06); }
.pillar-networking { --pillar-accent: #ee4b35; }
.pillar-sase { --pillar-accent: #43b7ed; }
.pillar-secops { --pillar-accent: #a67aee; }
.pillar-story-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pillar-number { color: color-mix(in srgb, var(--pillar-accent) 76%, white); font-family: "IBM Plex Mono", monospace; font-size: .72rem; font-weight: 600; }
.pillar-offering-count { color: #788395; font-family: "IBM Plex Mono", monospace; font-size: .64rem; letter-spacing: .04em; text-transform: uppercase; }
.pillar-offering-count strong { color: white; font-size: .78rem; }
.pillar-icon { width: 52px; height: 52px; margin-top: 17px; border: 1px solid color-mix(in srgb, var(--pillar-accent) 43%, transparent); border-radius: 14px; display: grid; place-items: center; color: color-mix(in srgb, var(--pillar-accent) 70%, white); background: color-mix(in srgb, var(--pillar-accent) 10%, transparent); box-shadow: 0 0 28px color-mix(in srgb, var(--pillar-accent) 12%, transparent); }
.pillar-icon svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pillar-story > p { margin: 16px 0 5px; color: color-mix(in srgb, var(--pillar-accent) 60%, white); font-family: "IBM Plex Mono", monospace; font-size: .72rem; font-weight: 600; letter-spacing: .055em; text-transform: uppercase; }
.pillar-story h4 { margin: 0; font-size: 1.32rem; line-height: 1.12; letter-spacing: -.025em; }
.pillar-explainer { min-height: 60px; margin-top: 10px; display: block; color: #929dac; font-size: .82rem; line-height: 1.48; }
.pillar-products { margin-top: 15px; display: flex; flex-wrap: wrap; gap: 6px; }
.pillar-products span { padding: 4px 7px; border: 1px solid rgba(147,160,183,.19); border-radius: 6px; color: #aeb7c6; background: rgba(255,255,255,.025); font-size: .67rem; }
.talk-track { margin: 18px 34px 0; padding: 21px 23px; border: 1px solid rgba(131,149,181,.17); border-radius: 16px; display: grid; grid-template-columns: minmax(190px,.58fr) minmax(0,1.42fr); align-items: center; gap: 30px; background: linear-gradient(110deg, rgba(238,49,36,.055), rgba(61,166,232,.035) 50%, rgba(154,120,232,.055)); }
.talk-track-heading > span { color: #ff8279; font-family: "IBM Plex Mono", monospace; font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.talk-track-heading h3 { margin: 7px 0 0; font-size: 1.12rem; line-height: 1.23; letter-spacing: -.02em; }
.talk-track-steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 19px; }
.talk-track-steps > div { min-width: 0; display: grid; grid-template-columns: 30px 1fr; gap: 10px; }
.talk-track-steps > div > span { width: 29px; height: 29px; border: 1px solid rgba(115,216,232,.32); border-radius: 50%; display: grid; place-items: center; color: #91e4f1; background: rgba(87,210,228,.06); font-family: "IBM Plex Mono", monospace; font-size: .7rem; }
.talk-track-steps p { margin: 0; color: #8792a3; font-size: .75rem; line-height: 1.42; }
.talk-track-steps strong { margin-bottom: 3px; display: block; color: #e5e9f0; font-size: .79rem; line-height: 1.3; }
.overview-actions { min-height: 83px; margin-top: 19px; padding: 16px 34px 20px; border-top: 1px solid rgba(124,141,173,.14); display: flex; align-items: center; justify-content: space-between; gap: 24px; background: rgba(8,10,16,.44); }
.overview-actions p { margin: 0; color: #8d98a8; font-size: .84rem; }
.overview-actions p strong { color: #e9edf4; }
.overview-actions > div { display: flex; align-items: center; gap: 9px; }
.overview-primary, .overview-secondary { min-height: 42px; padding: 0 15px; border-radius: 9px; color: #e7ebf2; font-size: .8rem; font-weight: 700; }
.overview-secondary { border: 1px solid #353b49; background: #191d27; }
.overview-secondary:hover { color: white; border-color: #566071; background: #222733; }
.overview-primary { border: 1px solid #ff5f54; display: inline-flex; align-items: center; gap: 8px; color: white; background: linear-gradient(135deg, #f13b2e, #bd211a); box-shadow: 0 10px 30px rgba(238,49,36,.2); }
.overview-primary:hover { transform: translateY(-1px); box-shadow: 0 13px 34px rgba(238,49,36,.3); }
.overview-primary span { font-size: .64rem; }

@keyframes overview-in {
  from { opacity: 0; transform: translateY(10px) scale(.988); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes rail-pulse {
  0% { left: 0; opacity: 0; }
  8%, 88% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

.products-dialog {
  width: min(1020px, calc(100vw - 32px));
  max-height: min(780px, calc(100vh - 32px));
  padding: 0;
  border: 1px solid #373c48;
  border-radius: 14px;
  color: var(--text);
  background: #11131a;
  box-shadow: 0 28px 100px rgba(0,0,0,.65);
}
.products-dialog::backdrop { background: rgba(4,5,8,.76); backdrop-filter: blur(7px); }
.dialog-head { padding: 20px 22px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); }
.dialog-head h2 { margin: 4px 0 4px; font-size: 1.25rem; }
.dialog-head p:not(.pane-kicker) { margin: 0; color: var(--muted); font-size: .85rem; }
.icon-button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; color: #b3b8c2; background: var(--panel-2); font-size: 1.2rem; }
.product-directory { max-height: calc(100vh - 155px); padding: 17px 20px 24px; overflow-y: auto; }
.portfolio-audit { padding: 14px 15px; border: 1px solid rgba(107,213,159,.22); border-radius: 10px; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: linear-gradient(110deg, rgba(107,213,159,.07), rgba(61,166,232,.035)); }
.portfolio-audit > div { min-width: 0; }
.portfolio-audit strong { display: block; margin-top: 5px; color: #e8ebf1; font-size: .87rem; }
.portfolio-audit p { max-width: 720px; margin: 4px 0 0; color: #9098a6; font-size: .72rem; line-height: 1.45; }
.portfolio-audit-links { flex: 0 0 auto; display: grid; justify-items: end; gap: 8px; }
.portfolio-audit-links a { color: #a8d9e6; font-size: .72rem; text-decoration: none; white-space: nowrap; }
.portfolio-audit-links a:hover { color: white; }
.audit-status { color: #8ee0b9; font-family: "IBM Plex Mono", monospace; font-size: .63rem; letter-spacing: .06em; text-transform: uppercase; }
.audit-status i { width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; display: inline-block; background: var(--green); box-shadow: 0 0 0 4px rgba(107,213,159,.08); }
.pillar-tabs { margin: 14px 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.pillar-tabs button { min-height: 31px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; color: #aeb5c0; background: transparent; font-size: .72rem; }
.pillar-tabs button span { margin-left: 3px; color: #727a88; font-family: "IBM Plex Mono", monospace; }
.pillar-tabs button:hover { border-color: #49505e; color: white; }
.pillar-tabs button.active { border-color: color-mix(in srgb, var(--pillar-color, var(--green)) 46%, #3b414d); color: color-mix(in srgb, var(--pillar-color, var(--green)) 48%, white); background: color-mix(in srgb, var(--pillar-color, var(--green)) 11%, transparent); }
.portfolio-note { margin: 10px 2px 0; color: #737b89; font-size: .68rem; line-height: 1.45; }
.directory-pillar { margin-top: 20px; }
.directory-pillar-head { margin-bottom: 9px; padding-left: 10px; border-left: 2px solid var(--pillar-color); display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.directory-pillar-head p { margin: 0; color: #e1e4eb; font-size: .83rem; font-weight: 700; }
.directory-pillar-head span { display: block; margin-top: 3px; color: #7f8795; font-size: .69rem; }
.directory-pillar-head > strong { flex: 0 0 auto; color: #767e8c; font-family: "IBM Plex Mono", monospace; font-size: .64rem; font-weight: 500; }
.directory-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.directory-card { border: 1px solid var(--line-soft); border-radius: 9px; color: #d4d8e0; background: var(--panel-2); overflow: hidden; }
.directory-card:hover { border-color: #484e5b; background: var(--panel-3); }
.directory-select { width: 100%; min-height: 156px; padding: 13px; border: 0; display: block; color: inherit; background: transparent; text-align: left; }
.directory-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; }
.directory-card-top strong { color: #eef0f5; font-size: .82rem; line-height: 1.25; }
.directory-card-top > span { flex: 0 0 auto; max-width: 48%; padding: 3px 5px; border-radius: 5px; color: #9da5b2; background: rgba(255,255,255,.035); font-family: "IBM Plex Mono", monospace; font-size: .56rem; line-height: 1.3; text-align: right; }
.directory-category { min-height: 29px; margin-top: 6px; display: block; color: #858d9b; font-size: .65rem; line-height: 1.35; }
.directory-current { margin-top: 8px; display: block; color: #a5acb8; font-size: .69rem; line-height: 1.42; }
.directory-filter-action { margin-top: 10px; display: block; color: color-mix(in srgb, var(--pillar-color) 45%, #c8d0dc); font-size: .66rem; }
.directory-links { min-height: 34px; padding: 8px 13px; border-top: 1px solid var(--line-soft); display: flex; align-items: center; gap: 10px; }
.directory-links a { color: #8d95a3; font-size: .65rem; text-decoration: none; }
.directory-links a:hover { color: white; }

@media (max-width: 1120px) {
  .workspace { grid-template-columns: 215px 310px minmax(390px, 1fr); padding-left: 14px; padding-right: 14px; }
  .topbar, .control-deck, .notice { padding-left: 16px; padding-right: 16px; }
  .product-grid { grid-template-columns: 1fr; }
  .directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .header-actions { flex-wrap: wrap; justify-content: flex-end; }
  .overview-hero { grid-template-columns: 1fr minmax(330px,.72fr); padding-left: 26px; padding-right: 26px; }
  .fabric-story, .talk-track { margin-left: 26px; margin-right: 26px; }
  .pillar-story { min-height: 300px; }
  .overview-actions { padding-left: 26px; padding-right: 26px; }
}

@media (max-width: 900px) {
  .workspace { height: auto; min-height: 0; grid-template-columns: 1fr 1.35fr; }
  .tactics-pane, .technique-pane { height: 620px; }
  .detail-pane { grid-column: 1 / -1; min-height: 700px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-hero { grid-template-columns: 1fr; gap: 23px; }
  .overview-metrics { max-width: 620px; }
  .pillar-flow { grid-template-columns: 1fr; }
  .pillar-story { min-height: 0; }
  .pillar-story::before { display: none; }
  .pillar-explainer { min-height: 0; }
  .talk-track { grid-template-columns: 1fr; gap: 17px; }
}

@media (max-width: 680px) {
  .topbar { align-items: flex-start; }
  .brand-mark { width: 40px; height: 40px; }
  .eyebrow { display: none; }
  .brand h1 { margin-top: 9px; font-size: 1rem; }
  .ghost-button { display: none; }
  .overview-trigger { min-height: 36px; padding: 0 10px; font-size: .73rem; }
  .overview-trigger-mark { display: none; }
  .version-pill { min-height: 34px; padding: 0 9px; font-size: .75rem; }
  .control-deck { grid-template-columns: 1fr; grid-template-areas: "search" "topics" "lens"; }
  .coverage-lens { justify-content: flex-start; overflow-x: auto; }
  .notice { align-items: flex-start; }
  .workspace { padding: 10px; grid-template-columns: 1fr; }
  .tactics-pane { height: auto; }
  .tactic-list { height: auto; display: flex; overflow-x: auto; }
  .tactic-button { min-width: 180px; border-right: 1px solid var(--line-soft); border-bottom: 0; }
  .technique-pane { height: 520px; }
  .detail-pane { grid-column: auto; min-height: 600px; }
  .product-grid { grid-template-columns: 1fr; }
  .detail-hero, .coverage-section { padding-left: 17px; padding-right: 17px; }
  .portfolio-audit { align-items: flex-start; flex-direction: column; gap: 10px; }
  .portfolio-audit-links { justify-items: start; }
  .directory-pillar-head { align-items: flex-start; flex-direction: column; gap: 5px; }
  .directory-grid { grid-template-columns: 1fr; }
  .overview-dialog { width: calc(100vw - 8px); max-height: calc(100vh - 8px); border-radius: 13px; }
  .overview-head { min-height: 68px; padding: 13px 14px 12px 17px; }
  .overview-kicker { font-size: .61rem; }
  .overview-head h2 { font-size: .98rem; }
  .overview-hero { padding: 25px 17px 21px; }
  .overview-copy h3 { font-size: clamp(2rem, 11vw, 3rem); }
  .overview-copy p { font-size: .9rem; }
  .overview-metrics div { min-height: 92px; padding: 15px 7px 12px; }
  .overview-metrics span { font-size: .58rem; }
  .fabric-story { margin: 0 17px; padding: 19px 13px; }
  .attack-rail { grid-template-columns: 1fr; gap: 8px; padding-bottom: 20px; }
  .protected-outcome { text-align: right; }
  .talk-track { margin: 15px 17px 0; padding: 18px 16px; }
  .talk-track-steps { grid-template-columns: 1fr; gap: 14px; }
  .overview-actions { padding: 17px; align-items: stretch; flex-direction: column; }
  .overview-actions > div { display: grid; grid-template-columns: 1fr; }
  .overview-primary, .overview-secondary { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .overview-dialog[open], .rail-line i, .overview-trigger:hover, .pillar-story:hover, .overview-primary:hover, .product-card:hover { animation: none; transform: none; }
}