/* Homepage presentations reused intact on the ThreatResponder page (see platform-investigate.js). The page shell's
   `.pg main svg` sizing is excluded for these sections in /threatresponder-platform/, as on the homepage. */
/* ---------- Forensically Investigate at Scale (?forensics=flow|off) ----------
   Five workflow steps telling one incident, four outcomes, and a line to the forensic lab. */
html:not([data-forensics="off"]) .fsx-old, html[data-forensics="off"] .fsx { display: none; }
.fsx { --head: #fff; --ink: #dfe6ff; --mut: #aab6e2; --card: rgba(255, 255, 255, .05); --card-line: rgba(174, 188, 239, .2); --sub: rgba(4, 12, 40, .4);
  --line: rgba(174, 188, 239, .16); --tile: rgba(255, 255, 255, .08); --code: #9fb0e0; --bar: #ff5a61; --ok: #3ecf8e; --run: #8fb0ff; --dim: rgba(174, 188, 239, .35);
  position: relative; padding: clamp(80px, 7vw, 120px) 0; color: var(--ink);
  background: radial-gradient(60% 50% at 50% 0%, rgba(80, 120, 230, .2), transparent 70%), linear-gradient(180deg, #13225a, #0f1c4d); }
.fsx.lt { --head: #0f1c4d; --ink: #1f2747; --mut: #5c6488; --card: #fff; --card-line: #e1e6f2; --sub: #f6f8fc;
  --line: #e3e8f3; --tile: #eef2fa; --code: #5d6a93; --bar: #e0343c; --ok: #13936a; --run: #2f5fd0; --dim: #c5cde0;
  background: linear-gradient(180deg, #fff, #f4f7fc); }
.fsx-in { width: min(1680px, 100% - 2 * var(--gut)); margin-inline: auto; }
.fsx-head { text-align: center; margin-bottom: clamp(40px, 3.4vw, 60px); }
.fsx-kick { margin: 0 0 16px; font-size: 12px; font-weight: 800; letter-spacing: .26em; text-transform: uppercase; color: var(--bar); }
.fsx-head h2 { font-size: clamp(32px, 3vw, 48px); font-weight: 900; line-height: 1.12; letter-spacing: -.01em; color: var(--head); }
.fsx-head h2::after { content: ""; display: block; width: 90px; height: 4px; margin: 22px auto 0; border-radius: 2px; background: var(--red); }
.fsx-head > p:last-child { max-width: 900px; text-wrap: balance; margin: 20px auto 0; font-size: clamp(17px, 1.25vw, 19px); line-height: 1.6; color: var(--mut); }
/* the five steps */
.fsx-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(20px, 1.6vw, 28px); }
.fsx-s { position: relative; display: flex; flex-direction: column; padding: 20px 18px 18px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-line); transition: box-shadow .5s; }
.fsx.lt .fsx-s { box-shadow: inset 0 0 0 1px var(--card-line), 0 18px 44px rgba(15, 28, 77, .07); }
.fsx-s.lit { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bar) 55%, transparent), 0 0 0 4px color-mix(in srgb, var(--bar) 10%, transparent); }
.fsx-s:not(:last-child)::after { content: ""; position: absolute; top: 34px; right: calc(-1 * clamp(20px, 1.6vw, 28px) / 2 - 7px); width: 14px; height: 14px; background: var(--mut); opacity: .55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.fsx-n { display: flex; align-items: center; gap: 12px; }
.fsx-n b { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 900; color: #fff; background: var(--bar); }
.fsx-n i { flex: 1; height: 1px; background: var(--line); }
.fsx-s h3 { margin-top: 16px; font-size: clamp(17px, 1.2vw, 20px); font-weight: 800; line-height: 1.25; color: var(--head); }
.fsx-s > p { margin: 8px 0 18px; font-size: 14px; line-height: 1.5; color: var(--mut); }
.fsx-v { margin-top: auto; height: 330px; padding: 12px; border-radius: 12px; background: var(--sub); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; font-size: 12.5px; }
.fsx-vh { margin-bottom: 10px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.fsx-vh code, .fsx-hosts span, .fsx-pn small, .fsx-tl small { font-family: "JetBrains Mono", Consolas, monospace; }
.fsx-vh code { font-size: 11px; color: var(--head); text-transform: none; letter-spacing: 0; }
.fsx-vh2 { display: flex; justify-content: space-between; margin: 10px 0 2px; }
.fsx-vh2 span { color: var(--bar); letter-spacing: .02em; text-transform: none; }
/* 1 agent */
.fsx-win { display: flex; gap: 5px; margin-bottom: 14px; }
.fsx-win span { width: 8px; height: 8px; border-radius: 50%; background: #f4a1a4; } .fsx-win span:nth-child(2) { background: #f3d18a; } .fsx-win span:nth-child(3) { background: #9edbb9; }
.fsx-ag { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 10px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.fsx-agi { flex: none; width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; color: var(--bar); background: color-mix(in srgb, var(--bar) 13%, transparent); }
.fsx-agi svg { width: 22px; height: 22px; }
.fsx-ag b { display: block; font-size: 13px; color: var(--head); }
.fsx-ag small { display: block; margin-top: 2px; font-size: 12px; color: var(--mut); }
.fsx-ck { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 13px; }
.fsx-ck li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--ink); opacity: .35; transition: opacity .4s; }
.fsx-ck i { width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; color: #fff; background: var(--dim); transition: background .4s; }
.fsx-ck i svg { width: 13px; height: 13px; stroke-width: 2.6; }
.fsx-s.on .fsx-ck li { opacity: 1; }
.fsx-s.on .fsx-ck i { background: var(--bar); }
.fsx-s.on .fsx-ck li:nth-child(2), .fsx-s.on .fsx-ck li:nth-child(2) i { transition-delay: .2s; }
.fsx-s.on .fsx-ck li:nth-child(3), .fsx-s.on .fsx-ck li:nth-child(3) i { transition-delay: .4s; }
.fsx-s.on .fsx-ck li:nth-child(4), .fsx-s.on .fsx-ck li:nth-child(4) i { transition-delay: .6s; }
/* 2 collection */
.fsx-sc-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; color: var(--mut); }
.fsx-sc-h b { font-size: 13px; color: var(--head); }
.fsx-sc-h em { font-style: normal; font-weight: 800; color: var(--head); font-variant-numeric: tabular-nums; }
.fsx-pb { height: 6px; margin: 10px 0 12px; border-radius: 3px; background: var(--line); overflow: hidden; }
.fsx-pb i { display: block; height: 100%; width: 3%; border-radius: 3px; background: var(--bar); transition: width 3.2s cubic-bezier(.3, .6, .3, 1); }
.fsx.go .fsx-s.on .fsx-pb i, .fsx.still .fsx-pb i { width: 93%; }
.fsx-hosts { list-style: none; margin: 0; padding: 0; }
.fsx-hosts li { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); }
.fsx-hosts span { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--head); }
.fsx-hosts span svg { width: 15px; height: 15px; color: var(--mut); }
.fsx-hosts em { font-style: normal; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--mut); }
.fsx-hosts em::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dim); }
.fsx-hosts em::after { content: "Queued"; }
.fsx-hosts li[data-st="run"] em { color: var(--run); } .fsx-hosts li[data-st="run"] em::before { background: var(--run); } .fsx-hosts li[data-st="run"] em::after { content: "Collecting"; }
.fsx-hosts li[data-st="done"] em { color: var(--ok); } .fsx-hosts li[data-st="done"] em::before { background: var(--ok); } .fsx-hosts li[data-st="done"] em::after { content: "Done"; }
.fsx-foot { display: flex; justify-content: space-between; margin-top: 12px; padding: 9px 11px; border-radius: 8px; font-size: 11.5px; color: var(--mut); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
/* 3 detections */
.fsx-det { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fsx-det li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 9px; border-radius: 10px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.fsx-di { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--bar); background: color-mix(in srgb, var(--bar) 13%, transparent); }
.fsx-di svg { width: 20px; height: 20px; }
.fsx-det b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--head); }
.fsx-det small { display: block; margin-top: 1px; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--mut); }
.fsx-det em { font-style: normal; min-width: 38px; padding: 5px 8px; border-radius: 999px; text-align: center; font-size: 12.5px; font-weight: 800; color: var(--bar); background: color-mix(in srgb, var(--bar) 13%, transparent); font-variant-numeric: tabular-nums; }
/* 4 process tree */
.fsx-tree { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.fsx-tree li { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; align-items: center; margin-left: calc(var(--d) * 11px); padding: 6px 8px; border-radius: 9px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line);
  opacity: .25; transition: opacity .4s calc(var(--k) * .22s); }
.fsx-s.on .fsx-tree li { opacity: 1; }
.fsx-tree li:not(:first-child)::before { content: ""; position: absolute; left: -8px; top: -8px; width: 7px; height: 29px; border-left: 1.5px solid var(--dim); border-bottom: 1.5px solid var(--dim); border-bottom-left-radius: 5px; }
.fsx-tree li.bad { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bar) 45%, transparent); background: color-mix(in srgb, var(--bar) 9%, var(--card)); }
.fsx-pi { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; color: var(--mut); background: var(--tile); }
.fsx-tree li.bad .fsx-pi { color: var(--bar); background: color-mix(in srgb, var(--bar) 14%, transparent); }
.fsx-pi svg { width: 15px; height: 15px; }
.fsx-pn { min-width: 0; }
.fsx-pn b { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--head); }
.fsx-pn small { display: block; font-size: 10.5px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fsx-tree em { font-style: normal; font: 700 10px "JetBrains Mono", Consolas, monospace; padding: 2px 5px; border-radius: 4px; color: var(--bar); background: color-mix(in srgb, var(--bar) 13%, transparent); }
/* 5 timeline + lateral movement */
.fsx-tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.fsx-tl li { display: grid; grid-template-columns: 38px 12px 1fr; gap: 6px; align-items: start; opacity: .25; transition: opacity .4s calc(var(--k) * .25s); }
.fsx-s.on .fsx-tl li { opacity: 1; }
.fsx-tl time { font: 600 11px "JetBrains Mono", Consolas, monospace; color: var(--mut); padding-top: 1px; }
.fsx-tl i { width: 9px; height: 9px; margin-top: 3px; border-radius: 50%; background: var(--bar); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bar) 18%, transparent); }
.fsx-tl b { display: block; font-size: 12.5px; color: var(--head); }
.fsx-tl small { display: block; font-size: 10.5px; color: var(--mut); line-height: 1.35; }
.fsx-lm { display: block; width: 100%; height: 92px; overflow: visible; }
.fsx-e { fill: none; stroke: var(--bar); stroke-width: 1.6; stroke-dasharray: 90; stroke-dashoffset: 90; transition: stroke-dashoffset .8s 1s; }
.fsx-e.q { stroke: var(--dim); stroke-dasharray: 3 4; stroke-dashoffset: 0; opacity: 0; transition: opacity .6s 1.6s; }
.fsx-s.on .fsx-e { stroke-dashoffset: 0; } .fsx-s.on .fsx-e.q { opacity: 1; }
.fsx-lm marker path { fill: var(--bar); }
.fsx-h circle { fill: var(--card); stroke: var(--dim); stroke-width: 1.5; }
.fsx-h.z circle { fill: var(--bar); stroke: none; }
.fsx-h.hit circle { stroke: var(--bar); }
.fsx-h text { fill: var(--mut); font: 700 8.5px "JetBrains Mono", Consolas, monospace; text-anchor: middle; }
.fsx-h.z text, .fsx-h.hit text { fill: var(--head); }
.fsx-h.ok text { fill: var(--mut); }
/* outcomes + the lab */
.fsx-out { list-style: none; margin: clamp(36px, 3vw, 52px) 0 0; padding: 30px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--card-line); }
.fsx-out li { display: flex; gap: 16px; align-items: flex-start; padding: 0 clamp(16px, 1.6vw, 28px); }
.fsx-out li + li { border-left: 1px solid var(--card-line); }
.fsx-out li:first-child { padding-left: 0; }
.fsx-out li > span { flex: none; width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; color: var(--bar); background: color-mix(in srgb, var(--bar) 12%, transparent); }
.fsx-out svg { width: 25px; height: 25px; }
.fsx-out b { display: block; font-size: 16.5px; font-weight: 800; color: var(--head); }
.fsx-out small { display: block; margin-top: 5px; font-size: 14.5px; line-height: 1.5; color: var(--mut); }
.fsx-lab { display: flex; align-items: center; gap: 18px; margin-top: clamp(30px, 2.6vw, 44px); padding: 16px 22px; border-radius: 14px; background: color-mix(in srgb, var(--bar) 8%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bar) 25%, transparent); }
.fsx-labi { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--bar); }
.fsx-labi svg { width: 20px; height: 20px; }
.fsx-lab p { flex: 1; font-size: 15.5px; color: var(--ink); }
.fsx-lab p b { color: var(--head); }
.fsx-labc { flex: none; padding: 11px 18px; border-radius: 10px; font-size: 14.5px; font-weight: 800; color: #fff; background: var(--bar); text-decoration: none; }
.fsx-labt { flex: none; font-size: 15px; font-weight: 800; color: var(--head); text-decoration: none; white-space: nowrap; }
/* the section after a light Forensics takes the dark tone */
.sec.fsx-dk { background: radial-gradient(70% 60% at 50% 0%, rgba(80, 120, 230, .22), transparent 70%), linear-gradient(180deg, #0f1c4d, #152560); }
.fsx-dk .pin h3 { color: #fff; } .fsx-dk .pin p, .fsx-dk .pin li { color: #c8d0ee; } .fsx-dk .pin li .pu-i { color: #8fb0ff; }
@media (max-width: 1500px) { .fsx-flow { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 26px; } .fsx-s { grid-column: span 2; } .fsx-s:nth-child(n+4) { grid-column: span 3; } .fsx-s::after { display: none; } .fsx-out { grid-template-columns: repeat(2, 1fr); row-gap: 26px; } .fsx-out li:nth-child(3) { border-left: 0; padding-left: 0; } }
@media (max-width: 900px) { .fsx-flow { grid-template-columns: 1fr; } .fsx-out { grid-template-columns: 1fr; } .fsx-out li { border-left: 0 !important; padding-left: 0; } .fsx-lab { flex-wrap: wrap; } }
/* ---------- ThreatResponder Forensics, standalone (?toolbox=on|off) ----------
   The DFIR toolbox for evidence already collected: sources → analyzers → answers. */
html[data-toolbox="off"] .tbx { display: none; }
.tbx { --head: #fff; --ink: #dfe6ff; --mut: #aab6e2; --card: rgba(255, 255, 255, .05); --card-line: rgba(174, 188, 239, .2); --sub: rgba(4, 12, 40, .4);
  --line: rgba(174, 188, 239, .16); --tile: rgba(255, 255, 255, .08); --chip: rgba(255, 255, 255, .07); --chip-ink: #c8d3f5; --bar: #ff5a61; --ok: #3ecf8e; --blue: #8fb0ff;
  --panel: rgba(255, 255, 255, .03);
  position: relative; padding: clamp(80px, 7vw, 120px) 0; color: var(--ink);
  background: radial-gradient(50% 40% at 80% 0%, rgba(80, 120, 230, .22), transparent 70%), linear-gradient(180deg, #13225a, #0f1c4d); }
.tbx.lt { --head: #0f1c4d; --ink: #1f2747; --mut: #5c6488; --card: #fff; --card-line: #e1e6f2; --sub: #f6f8fc;
  --line: #e3e8f3; --tile: #eef2fa; --chip: #f1f4fa; --chip-ink: #3a4670; --bar: #e0343c; --ok: #13936a; --blue: #2f5fd0; --panel: rgba(255, 255, 255, .6);
  background: radial-gradient(50% 40% at 80% 0%, #e6edfb, transparent 70%), linear-gradient(180deg, #f7f9fd, #eef2f9); }
.tbx-in { width: min(1680px, 100% - 2 * var(--gut)); margin-inline: auto; }
/* head: text left, the evidence → analysis → findings picture right */
.tbx-head { display: grid; grid-template-columns: 1fr minmax(0, 660px); gap: clamp(40px, 4vw, 80px); align-items: center; margin-bottom: clamp(40px, 3.4vw, 60px); }
.tbx-kick { margin: 0 0 16px; font-size: 12px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--bar); }
.tbx-head h2, .tbw-top h2, .tbc-top h2 { font-size: clamp(34px, 3.2vw, 52px); font-weight: 900; line-height: 1.1; letter-spacing: -.01em; color: var(--head); }
.tbx-head h2::after, .tbw-top h2::after, .tbc-top h2::after { content: ""; display: block; width: 90px; height: 4px; margin: 22px 0 0; border-radius: 2px; background: var(--red); }
.tbx-lead { margin-top: 22px; max-width: 760px; font-size: clamp(17px, 1.25vw, 19.5px); line-height: 1.6; color: var(--mut); }
.tbx-lead b { color: var(--head); font-weight: 700; }
.tbx-pts { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 26px; }
.tbx-pts li { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--head); }
.tbx-pts span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--bar); background: color-mix(in srgb, var(--bar) 12%, transparent); }
.tbx-pts svg { width: 17px; height: 17px; }
.tbx-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; padding: 13px 20px; border-radius: 10px; font-size: 15px; font-weight: 800; color: #fff; background: var(--bar); text-decoration: none; }
.tbx-cta svg { width: 17px; height: 17px; }
/* the picture */
.tbx-pic { position: relative; }
.tbx-flow { display: flex; justify-content: space-around; align-items: center; margin-bottom: 16px; }
.tbx-flow div { display: grid; justify-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--mut); }
.tbx-flow span { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--blue); background: var(--card); box-shadow: inset 0 0 0 1px var(--card-line); transition: color .4s, box-shadow .4s; }
.tbx-flow span svg { width: 21px; height: 21px; }
.tbx-flow div.on span { color: var(--bar); box-shadow: inset 0 0 0 1.5px var(--bar); }
.tbx-flow i { flex: 1; max-width: 90px; height: 0; border-top: 2px dashed var(--line); }
.tbx-cards { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 12px; }
.tbx-pc { padding: 14px; border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-line); font-size: 12.5px; }
.tbx.lt .tbx-pc { box-shadow: inset 0 0 0 1px var(--card-line), 0 18px 40px rgba(15, 28, 77, .08); }
.tbx-pc h4 { margin-bottom: 10px; font-size: 12.5px; font-weight: 800; color: var(--head); }
.tbx-ev { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tbx-ev li { display: flex; align-items: center; gap: 8px; color: var(--ink); opacity: .35; transition: opacity .35s; }
.tbx-ev li.on { opacity: 1; }
.tbx-ev svg { width: 15px; height: 15px; color: var(--mut); }
.tbx-pb { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin: 2px 0 12px; }
.tbx-pb i { display: block; height: 100%; width: var(--p, 0%); border-radius: 3px; background: var(--blue); transition: width .6s; }
.tbx-st { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tbx-st li { display: flex; align-items: center; gap: 8px; color: var(--mut); }
.tbx-st li i { width: 15px; height: 15px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line); display: grid; place-items: center; color: #fff; }
.tbx-st li.run i { box-shadow: none; border: 2px solid var(--blue); border-top-color: transparent; animation: tbx-spin .9s linear infinite; }
.tbx.still .tbx-st li.run i { animation: none; }
@keyframes tbx-spin { to { transform: rotate(1turn); } }
.tbx-st li.done { color: var(--ink); }
.tbx-st li.done i { background: var(--ok); box-shadow: none; }
.tbx-st li.done i svg { width: 10px; height: 10px; stroke-width: 3; }
.tbx-res { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.tbx-res li { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 8px; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.tbx-res b { min-width: 28px; font-variant-numeric: tabular-nums; }
.tbx-res .r1 { --c: var(--bar); } .tbx-res .r2 { --c: #f2a53a; } .tbx-res .r3 { --c: var(--blue); } .tbx-res .r4 { --c: var(--ok); }
.tbx.lt .tbx-res .r2 { --c: #b56d00; }
.tbx-res svg { width: 14px; height: 14px; }
/* numbered parts */
.tbx-part { padding: clamp(22px, 1.8vw, 30px); border-radius: 18px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--card-line); }
.tbx-part + .tbx-part, .tbx-duo { margin-top: clamp(16px, 1.4vw, 24px); }
.tbx-ph { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.tbx-no { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; font-weight: 900; color: var(--bar); background: color-mix(in srgb, var(--bar) 12%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--bar) 40%, transparent); }
.tbx-ph h3 { font-size: clamp(20px, 1.45vw, 25px); font-weight: 900; color: var(--head); line-height: 1.2; }
.tbx-ph p { margin-top: 3px; font-size: 15px; color: var(--mut); }
.tbx-ph .tbx-tags { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.tbx-tags span { padding: 6px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--chip-ink); background: var(--chip); box-shadow: inset 0 0 0 1px var(--line); }
/* 1 sources */
.tbx-src { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.tbx-sc { display: flex; flex-direction: column; padding: 18px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-line); transition: box-shadow .3s, transform .3s; cursor: default; }
.tbx-ic { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: var(--bar); background: color-mix(in srgb, var(--bar) 11%, transparent); }
.tbx-ic.b { color: var(--blue); background: color-mix(in srgb, var(--blue) 13%, transparent); }
.tbx-ic svg { width: 23px; height: 23px; }
.tbx-sc h4 { margin-top: 14px; font-size: 16.5px; font-weight: 800; color: var(--head); }
.tbx-sc p { margin: 6px 0 14px; font-size: 14px; line-height: 1.5; color: var(--mut); }
.tbx-fm { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.tbx-fm span { padding: 3px 8px; border-radius: 6px; font: 600 11.5px "JetBrains Mono", Consolas, monospace; color: var(--chip-ink); background: var(--chip); box-shadow: inset 0 0 0 1px var(--line); }
/* 2 analyzers + 3 answers */
.tbx-duo { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr); gap: clamp(16px, 1.4vw, 24px); }
.tbx-duo .tbx-part + .tbx-part { margin-top: 0; }
.tbx-an { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tbx-a { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-line); transition: box-shadow .3s, opacity .3s; }
.tbx-a .tbx-ic { width: 40px; height: 40px; border-radius: 11px; }
.tbx-a .tbx-ic svg { width: 21px; height: 21px; }
.tbx-a h4 { font-size: 15px; font-weight: 800; color: var(--head); }
.tbx-a p { font-size: 13.5px; line-height: 1.5; color: var(--mut); }
.tbx-ans { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tbx-ans li { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--line); }
.tbx-ans li:last-child { border-bottom: 0; }
.tbx-ans span { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, transparent); }
.tbx-ans svg { width: 19px; height: 19px; }
.tbx-ans b { display: block; font-size: 14.5px; font-weight: 800; color: var(--head); }
.tbx-ans small { display: block; margin-top: 2px; font-size: 13px; color: var(--mut); }
.tbx-pars { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; font-size: 13.5px; color: var(--mut); }
.tbx-pars b { color: var(--head); margin-right: 4px; }
.tbx-pars span { padding: 4px 9px; border-radius: 6px; font-size: 12.5px; font-weight: 600; color: var(--chip-ink); background: var(--chip); box-shadow: inset 0 0 0 1px var(--line); }
.tbx-more { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tbx-more .tbx-a { gap: 10px; }
.tbx-more .tbx-fm { margin-top: auto; padding-top: 4px; }
/* verbs */
.tbx-foot { display: flex; align-items: center; gap: 20px; margin-top: clamp(26px, 2.2vw, 36px); }
.tbx-foot p { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--head); }
.tbx-foot p svg { width: 20px; height: 20px; color: var(--bar); }
.tbx-verbs { margin-left: auto; display: flex; gap: 0; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.tbx-verbs span { padding: 0 18px; }
.tbx-verbs span + span { border-left: 1px solid var(--card-line); }
@media (max-width: 1500px) { .tbx-more { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tbx-src { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tbx-an { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1180px) { .tbx-head, .tbx-duo { grid-template-columns: 1fr; } .tbx-ph { flex-wrap: wrap; } .tbx-ph .tbx-tags { margin-left: 56px; justify-content: flex-start; } .tbx-foot { flex-wrap: wrap; } .tbx-verbs { margin-left: 0; } }
@media (max-width: 760px) { .tbx-src, .tbx-an, .tbx-cards { grid-template-columns: 1fr; } .tbx-verbs { flex-wrap: wrap; } }
/* download button + note (all variants) */
.tbx-dl { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin-top: 30px; }
.tbx-dl .tbx-cta { margin-top: 0; }
.tbx-dl small { font-size: 13.5px; color: var(--mut); }
/* ---- app tour: lists around the app window ---- */
.ta-head { text-align: center; margin-bottom: clamp(30px, 2.6vw, 44px); }
.ta-head h2 { font-size: clamp(34px, 3.2vw, 52px); font-weight: 900; line-height: 1.1; letter-spacing: -.01em; color: var(--head); }
.ta-head h2::after { content: ""; display: block; width: 90px; height: 4px; margin: 20px auto 0; border-radius: 2px; background: var(--red); }
.ta-head .tbx-lead { margin-inline: auto; max-width: 900px; }
/* the download, on its own row under the outputs */
.ta-dlrow .tbx-dl { justify-content: center; margin-top: clamp(22px, 1.8vw, 30px); }
.ta-grid { display: grid; grid-template-columns: minmax(230px, 270px) minmax(0, 1fr) minmax(230px, 270px); gap: clamp(14px, 1.2vw, 22px); align-items: start; }
.ta-col, .ta-outs { padding: 14px; border-radius: 18px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--card-line); }
.ta-lh { display: flex; align-items: center; gap: 12px; padding: 4px 4px 12px; }
.ta-lh .tbx-no { width: 34px; height: 34px; font-size: 15px; }
.ta-lh h3 { font-size: 17px; font-weight: 900; color: var(--head); }
.ta-lh p { margin-top: 2px; font-size: 13px; color: var(--mut); }
.ta-li { position: relative; overflow: hidden; display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center; width: 100%; margin-top: 6px; padding: 8px 12px; border: 0; border-radius: 12px; text-align: left; font: inherit; cursor: pointer;
  background: var(--card); box-shadow: inset 0 0 0 1px var(--card-line); transition: box-shadow .3s, background .3s; }
.ta-li .tbx-ic { width: 36px; height: 36px; border-radius: 10px; }
.ta-li .tbx-ic svg { width: 18px; height: 18px; }
.ta-li b { display: block; font-size: 14px; font-weight: 800; color: var(--head); }
.ta-li small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--mut); }
.ta-li.on { box-shadow: inset 0 0 0 1.5px var(--bar); background: color-mix(in srgb, var(--bar) 7%, var(--card)); }
.ta-li > i { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--bar); }
.ta-li.run > i { animation: tbc-prog var(--t, 4.8s) linear forwards; }
.ta-mid { min-width: 0; }
.ta-cap { margin: 10px 0 0; text-align: center; font-size: 14px; color: var(--mut); min-height: 1.5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-cap b { margin-right: 6px; color: var(--head); }
.ta-outs { margin-top: clamp(12px, 1vw, 18px); display: grid; grid-template-columns: minmax(230px, 270px) 1fr; gap: 14px; align-items: center; padding-block: 10px; }
.ta-outs .ta-lh { padding: 0 4px; }
.ta-orow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.ta-orow .ta-li { margin-top: 0; }
.ta-flogo { height: 26px; width: auto; }
.tbx-app .tbx-foot p { gap: 0; }
.tbx.lt .ta-flogo.lt, .tbx:not(.lt) .ta-flogo.dk { display: none; }
/* side by side, each list is exactly as tall as the window: the items share the height */
@media (min-width: 1501px) { .ta-col { height: var(--wh, auto); display: flex; flex-direction: column; } .ta-col .ta-lh { flex: none; } .ta-col .ta-li { flex: 1 1 0; min-height: 0; margin-top: 5px; padding: 6px 12px; }
  .ta-col .ta-li small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 1px; font-size: 11.5px; line-height: 1.35; } .ta-col .ta-li b { font-size: 13.5px; line-height: 1.25; } }
@media (max-width: 1500px) { .ta-cap { white-space: normal; } .ta-outs { grid-template-columns: 1fr; } .ta-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ta-mid { grid-column: 1 / -1; order: -1; } .ta-orow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .ta-grid, .ta-orow { grid-template-columns: 1fr; } }

/* ---- the app window (1280 × 760, scaled). Tokens follow the section tone: light section = the app's light mode ---- */
.ta-win { position: relative; overflow: hidden; border-radius: 12px; box-shadow: 0 0 0 1px var(--card-line), 0 40px 90px rgba(3, 10, 35, .35); }
.tbx.lt .ta-win { box-shadow: 0 0 0 1px var(--card-line), 0 30px 70px rgba(15, 28, 77, .16); }
.ta-app { --bg: #111827; --pn: #172033; --pn2: #1c2740; --ln: #2a3652; --ln2: #334062; --ink: #e6eaf3; --mu: #8f9bb6; --bl: #5b9dff; --rd: #ff6b6b; --or: #ff9346; --am: #f2b634; --gr: #3ecf8e; --tl: #2cc5d8; --pu: #b28cff; --pk: #f472b6;
  --soft: rgba(255, 255, 255, .06); --sel: rgba(91, 157, 255, .15); --mono: "JetBrains Mono", Consolas, monospace;
  position: absolute; left: 0; top: 0; width: 1280px; height: 760px; transform-origin: 0 0; overflow: hidden; background: var(--bg); color: var(--ink); font: 12px/1.45 Inter, "Segoe UI", system-ui, sans-serif; text-align: left; }
.tbx.lt .ta-app { --bg: #f4f6f9; --pn: #fff; --pn2: #f7f9fc; --ln: #e4e8ef; --ln2: #d5dbe5; --ink: #1c2433; --mu: #6b7589; --bl: #2f7cf6; --rd: #dc2626; --or: #ea580c; --am: #c27803; --gr: #16a34a; --tl: #0891b2; --pu: #7c3aed; --pk: #db2777;
  --soft: #eef1f6; --sel: #e8f0fe; }
.ta-app * { box-sizing: border-box; }
.ta-app svg { width: 14px; height: 14px; flex: none; }
.ta-app code, .ta-app pre, .ta-mono { font-family: var(--mono); }
.ta-app p, .ta-app h3, .ta-app h4, .ta-app h5, .ta-app h6 { margin: 0; }
.ta-v { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .45s, visibility 0s .45s; }
.ta-v.on { opacity: 1; visibility: visible; transition: opacity .45s; }
.ta-v.src { transition: opacity .25s, visibility 0s .25s; } .ta-v.src.on { transition: opacity .25s; }
.ta-top { flex: none; }
.ta-sps { position: relative; flex: 1; min-height: 0; }
.ta-sp { position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
.ta-sp.on { opacity: 1; visibility: visible; transition: opacity .35s; }
.ta-pg { flex: 1; min-height: 0; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.ta-mut { color: var(--mu); } .ta-app .mu { color: var(--mu); }
.ta-app :is(b, p, em, small, span).r { color: var(--rd); } .ta-app :is(b, p, em, small, span).o { color: var(--or); } .ta-app b.b, .ta-app :is(b, p, em, small, span).bl { color: var(--bl); }
.ta-app :is(b, p, em, small, span).g { color: var(--gr); } .ta-app :is(b, p, em, small, span).a { color: var(--am); } .ta-app b.mu { color: var(--mu); }

/* shared pieces */
.ta-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; margin-right: 4px; border-radius: 5px; font-size: 10.5px; font-weight: 600; color: var(--mu); background: var(--soft); white-space: nowrap; line-height: 1.4; }
.ta-tag.m { font-family: var(--mono); font-size: 9.5px; letter-spacing: .02em; }
.ta-tag.bl { color: var(--bl); background: color-mix(in srgb, var(--bl) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bl) 22%, transparent); }
.ta-tag.rd { color: var(--rd); background: color-mix(in srgb, var(--rd) 11%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rd) 22%, transparent); }
.ta-tag.am { color: var(--am); background: color-mix(in srgb, var(--am) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--am) 24%, transparent); }
.ta-tag.gr { color: var(--gr); background: color-mix(in srgb, var(--gr) 11%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gr) 22%, transparent); }
.ta-tag.o { color: var(--or); background: color-mix(in srgb, var(--or) 11%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--or) 22%, transparent); }
.ta-tag.pu { color: var(--pu); background: color-mix(in srgb, var(--pu) 11%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pu) 22%, transparent); }
.ta-tag.tl { color: var(--tl); background: color-mix(in srgb, var(--tl) 11%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tl) 22%, transparent); }
.ta-tag.pk { color: var(--pk); background: color-mix(in srgb, var(--pk) 11%, transparent); }
.ta-tag.o2 { color: var(--ink); background: var(--pn); box-shadow: inset 0 0 0 1px var(--ln2); }
.ta-tag.rdo { color: var(--rd); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rd) 45%, transparent); font-family: var(--mono); font-size: 9.5px; }
.ta-app .ta-tag.f { color: #fff; box-shadow: none; } .ta-tag.f.rd { background: var(--rd); } .ta-tag.f.o { background: var(--or); }
.ta-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ta-chips .ta-tag { margin: 0; }
.ta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 13px; border-radius: 7px; font-style: normal; font-size: 12px; font-weight: 600; color: var(--ink); background: var(--pn); box-shadow: inset 0 0 0 1px var(--ln2); white-space: nowrap; }
.ta-btn.pri { color: #fff; background: var(--bl); box-shadow: none; }
.ta-btn.grn { color: #fff; background: var(--gr); box-shadow: none; }
.ta-btn.soft { color: var(--bl); background: var(--sel); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bl) 30%, transparent); }
.ta-btn.ghost { background: transparent; box-shadow: none; color: var(--mu); }
.ta-btn.warn { color: var(--am); background: color-mix(in srgb, var(--am) 10%, var(--pn)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--am) 40%, transparent); }
.ta-btn.out { color: var(--bl); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bl) 45%, transparent); font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.ta-btn.dis { color: var(--mu); opacity: .7; }
.ta-btn.amb { color: #fff; background: #e89b1b; box-shadow: none; }
.ta-btn.on { color: var(--bl); background: var(--sel); }
.ta-btn.sm { padding: 5px 10px; font-size: 11px; } .ta-btn.xs { padding: 3px 8px; font-size: 10.5px; gap: 4px; } .ta-btn.xs svg { width: 12px; height: 12px; }
.ta-in { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 6px 10px; border-radius: 7px; color: var(--mu); background: var(--pn2); box-shadow: inset 0 0 0 1px var(--ln2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-in.mono { font-family: var(--mono); color: var(--ink); }
.ta-in.s { flex: none; }
.ta-sel { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: 7px; background: var(--pn); box-shadow: inset 0 0 0 1px var(--ln2); font-family: var(--mono); font-size: 11px; white-space: nowrap; }
.ta-sel::after { content: "⌄"; color: var(--mu); } .ta-sel.s { flex: none; }
.ta-filters { display: flex; gap: 8px; align-items: center; }
.ta-filters .ta-in { flex: 1; } .ta-filters .ta-sel { flex: 1; }
.ta-tabs { display: flex; align-items: flex-end; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--ln); background: var(--pn); white-space: nowrap; overflow: hidden; }
.ta-tabs span { display: inline-flex; align-items: center; gap: 6px; padding: 10px 10px 9px; font-size: 12.5px; font-weight: 500; color: var(--ink); border-bottom: 2px solid transparent; }
.ta-tabs span svg { color: var(--mu); width: 13px; height: 13px; }
.ta-tabs span.on { color: var(--bl); border-bottom-color: var(--bl); } .ta-tabs span.on svg { color: var(--bl); }
.ta-tabs span > i { font-style: normal; padding: 0 5px; border-radius: 4px; font: 700 9px/1.6 var(--mono); color: var(--mu); background: var(--soft); }
.ta-tabs span > i.r { color: var(--rd); background: color-mix(in srgb, var(--rd) 12%, transparent); } .ta-tabs span > i.a { color: var(--am); background: color-mix(in srgb, var(--am) 14%, transparent); } .ta-tabs span > i.b { color: var(--bl); background: color-mix(in srgb, var(--bl) 12%, transparent); }
.ta-tabs.sm { padding: 0; background: transparent; } .ta-tabs.sm span { padding: 8px 10px; font-size: 12px; }
.ta-tabs.pe span, .ta-tabs.inv span { padding-inline: 8px; font-size: 12px; }
.ta-acts { display: flex; justify-content: flex-end; gap: 6px; padding: 8px 16px; border-bottom: 1px dashed var(--ln); }
.ta-acts .ta-btn { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.ta-tbl { border-radius: 9px; background: var(--pn); box-shadow: inset 0 0 0 1px var(--ln); overflow: hidden; }
.ta-tr { display: grid; grid-template-columns: var(--tpl); gap: 10px; padding: 7px 12px; border-bottom: 1px solid var(--ln); align-items: center; }
.ta-tr:last-child { border-bottom: 0; }
.ta-tr > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-th { background: var(--pn2); font: 700 9.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mu); }
.ta-tr.hl { background: var(--sel); box-shadow: inset 3px 0 0 var(--bl); }
.ta-kpis { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 10px; flex: none; }
.ta-kpis > div { padding: 10px 12px; border-radius: 9px; background: var(--pn); box-shadow: inset 0 0 0 1px var(--ln); min-width: 0; }
.ta-kpis small { display: flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mu); }
.ta-kpis b { display: block; margin-top: 4px; font-size: 21px; font-weight: 700; color: var(--ink); }
.ta-kpis em { display: block; font-style: normal; font-size: 10.5px; color: var(--mu); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-kpis.mono small { font-family: var(--mono); } .ta-kpis.mono b { font-family: var(--mono); }
.ta-kpis.mini > div { padding: 7px 10px; background: var(--pn2); } .ta-kpis.mini b { font-size: 12px; font-weight: 500; margin-top: 2px; }
.ta-card { padding: 12px 14px; border-radius: 10px; background: var(--pn); box-shadow: inset 0 0 0 1px var(--ln); min-width: 0; min-height: 0; overflow: hidden; }
.ta-card.np { padding: 0; overflow: hidden; } .ta-card.np > .ta-tbl { box-shadow: none; border-radius: 0; }
.ta-cardh { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ta-cardh b { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink); } .ta-cardh b em { font-style: normal; font-weight: 400; color: var(--mu); }
.ta-cardh small { margin-left: auto; font-size: 11px; color: var(--mu); } .ta-cardh small.l { margin-left: 4px; } .ta-cardh small.bl { display: block; margin: 2px 0 0; font-family: var(--mono); }
.ta-cardh .ta-btn:first-of-type { margin-left: auto; }
.ta-cardh.x { margin: 0; flex: none; } .ta-cardh.p { padding: 12px 14px; margin: 0; border-bottom: 1px solid var(--ln); }
.ta-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-height: 0; }
.ta-kv { display: grid; grid-template-columns: max-content 1fr; gap: 3px 16px; font-size: 11.5px; }
.ta-kv > span { color: var(--mu); } .ta-kv > b { font-weight: 500; font-family: var(--mono); font-size: 11px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-kv.c2 { grid-template-columns: max-content 1fr max-content 1fr; }
.ta-box { flex: none; display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 3px; color: #fff; box-shadow: inset 0 0 0 1.5px var(--ln2); background: var(--pn); vertical-align: middle; }
.ta-box.on { background: var(--bl); box-shadow: none; } .ta-box svg { width: 10px; height: 10px; stroke-width: 3; }
.ta-si { flex: none; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: var(--mu); background: var(--soft); }
.ta-si svg { width: 17px; height: 17px; } .ta-si.g { color: var(--gr); background: color-mix(in srgb, var(--gr) 12%, transparent); } .ta-si.o { color: var(--am); background: color-mix(in srgb, var(--am) 13%, transparent); }
.ta-mh { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--pn); border-bottom: 1px solid var(--ln); }
.ta-mico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, #38a3f5, #2f7cf6); }
.ta-mico svg { width: 18px; height: 18px; }
.ta-mh > div > b { display: block; font-size: 15px; font-weight: 700; } .ta-mh > div > b em { font-style: normal; color: var(--bl); font-weight: 600; } .ta-mh > div > small { display: block; color: var(--mu); font-size: 11.5px; }
.ta-mhr { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.ta-lnk { color: var(--mu); font-size: 12px; }
.ta-file { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; padding: 8px 16px; background: var(--pn); border-bottom: 1px solid var(--ln); white-space: nowrap; overflow: hidden; }
.ta-file code { font-weight: 700; font-size: 11px; } .ta-file small { color: var(--mu); overflow: hidden; text-overflow: ellipsis; }
.ta-file > b { font-size: 14px; } .ta-file .ta-si { width: 30px; height: 30px; } .ta-file .ta-tag:first-of-type { margin-left: auto; }
.ta-sh { display: flex; align-items: baseline; gap: 8px; flex: none; }
.ta-sh > i { white-space: nowrap; font: 600 11px var(--mono); color: var(--bl); font-style: normal; } .ta-sh > b { font-size: 16px; font-weight: 600; white-space: nowrap; } .ta-sh > span { color: var(--mu); font-size: 12.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-sh .ta-chips { margin-left: auto; flex-wrap: nowrap; }
.ta-hunt { display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 10px; border-radius: 8px; background: var(--pn); box-shadow: inset 0 0 0 1px var(--ln2); color: var(--mu); }
.ta-hunt > span:not(.ta-btn) { flex: 1; font-family: var(--mono); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-hunt.big { padding: 6px 6px 6px 12px; margin-bottom: 8px; }
.ta-ex { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--mu); text-transform: uppercase; margin: 8px 0; }
.ta-ex code { margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ln2); }
.ta-rng { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ln2); margin-left: auto; }
.ta-rng i { font-style: normal; padding: 3px 9px; border-radius: 999px; font-size: 10.5px; color: var(--mu); } .ta-rng i.on { color: var(--bl); background: var(--sel); box-shadow: inset 0 0 0 1px var(--bl); }
.ta-subt { display: flex; gap: 6px; padding: 7px 14px; border-bottom: 1px solid var(--ln); background: var(--pn2); flex: none; }
.ta-subt span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 7px; color: var(--mu); font-size: 12px; }
.ta-subt span.on { color: var(--bl); background: var(--sel); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bl) 30%, transparent); }
.ta-subt span i { font-style: normal; font-size: 11px; } .ta-subt span i.r { padding: 0 6px; border-radius: 999px; color: #fff; background: var(--rd); font-size: 9.5px; font-weight: 700; }
.ta-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ta-g2 > div, .ta-g1 > div { padding: 6px 9px; border-radius: 6px; background: var(--pn2); box-shadow: inset 0 0 0 1px var(--ln); min-width: 0; }
.ta-g2 small, .ta-g1 small { display: block; font-size: 8.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mu); }
.ta-g2 span, .ta-g1 span { display: block; font-family: var(--mono); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-g1 { display: grid; gap: 5px; }
.ta-g2.k > div { background: none; box-shadow: none; padding: 3px 0; } .ta-g2.k span { font-family: inherit; white-space: normal; }

/* ---- 1. New Investigation (full page, no modal) ---- */
.ta-wz { display: flex; flex-direction: column; height: 100%; }
.ta-wzb { flex: 1; min-height: 0; display: grid; grid-template-columns: 228px 1fr; }
.ta-steps { display: flex; flex-direction: column; gap: 3px; padding: 16px 14px; border-right: 1px solid var(--ln); background: var(--pn2); }
.ta-steps > div { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; font-weight: 600; color: var(--mu); }
.ta-steps > div > i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 700; background: var(--soft); }
.ta-steps > .on { color: var(--ink); background: var(--sel); box-shadow: inset 3px 0 0 var(--bl); } .ta-steps > .on > i { color: #fff; background: var(--bl); }
.ta-steps > .ta-qi { display: block; padding: 12px 4px 0; border-radius: 0; font-weight: 400; color: var(--ink); background: none; box-shadow: none; }
.ta-qi { margin-top: auto; padding: 12px 4px 0; border-top: 1px solid var(--ln); font-size: 11.5px; }
.ta-qi h6 { margin-bottom: 6px; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mu); }
.ta-qi p { display: flex; justify-content: space-between; padding: 3px 0; color: var(--mu); } .ta-qi b { color: var(--ink); } .ta-qi b.bl { color: var(--bl); }
.ta-wzc { padding: 18px 26px; display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: hidden; background: var(--pn); }
.ta-wzc h3 { font-size: 17px; font-weight: 700; } .ta-sub { margin-top: -6px; color: var(--mu); }
.ta-srcs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ta-src { display: grid; grid-template-columns: 36px 1fr 16px; gap: 11px; align-items: center; padding: 11px 12px; border-radius: 10px; background: var(--pn2); box-shadow: inset 0 0 0 1px var(--ln2); }
.ta-src b { font-size: 13px; font-weight: 600; } .ta-src small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--mu); font-size: 11px; line-height: 1.4; }
.ta-src.on { background: var(--sel); box-shadow: inset 0 0 0 1.5px var(--bl); }
.ta-src .ta-si { width: 36px; height: 36px; } .ta-src.on .ta-si { color: var(--bl); background: color-mix(in srgb, var(--bl) 14%, transparent); }
.ta-radio { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ln2); }
.ta-radio.on { box-shadow: inset 0 0 0 1.5px var(--bl), inset 0 0 0 4px var(--pn), inset 0 0 0 9px var(--bl); }
.ta-det { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.ta-ready { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 10px; background: color-mix(in srgb, var(--gr) 7%, var(--pn)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gr) 28%, transparent); }
.ta-ready > i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--gr); background: color-mix(in srgb, var(--gr) 15%, transparent); }
.ta-ready > i svg { width: 16px; height: 16px; stroke-width: 2.4; } .ta-ready b { color: var(--gr); font-size: 13px; } .ta-ready small { display: block; color: var(--mu); }
.ta-host { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 14px; border-radius: 10px; background: var(--pn2); box-shadow: inset 0 0 0 1px var(--ln); }
.ta-host b { font-size: 12.5px; } .ta-host small { display: flex; align-items: center; gap: 6px; color: var(--mu); font-size: 11px; }
.ta-host .ta-in { width: 300px; font-family: var(--mono); color: var(--ink); background: var(--pn); }
.ta-okic { display: inline-grid; place-items: center; width: 13px; height: 13px; border-radius: 50%; color: #fff; background: var(--gr); } .ta-okic svg { width: 8px; height: 8px; stroke-width: 3.5; }
.ta-wic { color: var(--am); display: inline-flex; } .ta-wic svg { width: 12px; height: 12px; }
.ta-brw { padding: 11px 14px; border-radius: 10px; background: var(--pn2); box-shadow: inset 0 0 0 1px var(--ln); }
.ta-brh { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .ta-brh b { font-size: 12.5px; } .ta-brh small { display: block; color: var(--mu); font-size: 11px; } .ta-brh .ta-si { width: 30px; height: 30px; color: var(--bl); background: var(--sel); }
.ta-brr { display: flex; gap: 8px; align-items: stretch; } .ta-brr .ta-in { flex: 1; background: var(--pn); }
.ta-in.ml { white-space: normal; align-items: flex-start; line-height: 1.6; }
.ta-bcol { display: flex; flex-direction: column; gap: 6px; }
.ta-hint { margin-top: 7px; font-size: 10.5px; color: var(--mu); }
.ta-kbd { padding: 0 5px; border-radius: 4px; font-size: 10px; background: var(--pn); box-shadow: inset 0 0 0 1px var(--ln2); }
.ta-bitl { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 10px; background: color-mix(in srgb, var(--gr) 7%, var(--pn)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gr) 28%, transparent); }
.ta-bitl > i { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; color: var(--gr); background: color-mix(in srgb, var(--gr) 14%, transparent); } .ta-bitl > i svg { stroke-width: 2.6; }
.ta-bitl b { color: var(--gr); } .ta-bitl small { display: block; color: var(--mu); font-size: 11px; }
.ta-insp { display: flex; gap: 12px; padding: 11px 14px; border-radius: 10px; background: color-mix(in srgb, var(--gr) 5%, var(--pn)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gr) 26%, transparent); }
.ta-insp > div { flex: 1; min-width: 0; } .ta-insp > div > b { display: block; margin-bottom: 5px; color: var(--gr); font-size: 12.5px; }
.ta-okc { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: var(--gr); background: color-mix(in srgb, var(--gr) 14%, transparent); } .ta-okc svg { stroke-width: 2.6; }
.ta-insp .ta-kv { font-size: 11px; }
.ta-pls { display: flex; gap: 8px; margin-top: 8px; }
.ta-pls span { padding: 6px 10px; border-radius: 8px; background: var(--pn); box-shadow: inset 0 0 0 1px var(--ln2); font-size: 10.5px; color: var(--mu); } .ta-pls b { display: block; font-size: 11.5px; color: var(--ink); }
.ta-catp { flex: 1; min-height: 0; overflow: hidden; padding: 11px 14px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--ln); -webkit-mask-image: linear-gradient(#000 calc(100% - 26px), transparent); mask-image: linear-gradient(#000 calc(100% - 26px), transparent); }
.ta-catph { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; } .ta-catph b { font-size: 12.5px; } .ta-catph small { color: var(--mu); font-size: 11px; }
.ta-catg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.ta-catg > div { display: flex; gap: 9px; padding: 8px 10px; border-radius: 8px; background: var(--pn2); box-shadow: inset 0 0 0 1px var(--ln); min-width: 0; } .ta-catg .ta-box { margin-top: 1px; }
.ta-catg p { min-width: 0; } .ta-catg b { display: block; font-size: 11.5px; font-weight: 600; } .ta-catg small { display: block; font-size: 10.5px; color: var(--mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-catg > div.off { opacity: .55; background: none; }
.ta-cov { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--ln); }
.ta-cov > small { flex: none; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mu); }
.ta-wzf { flex: none; display: flex; justify-content: flex-end; gap: 10px; padding: 11px 18px; border-top: 1px solid var(--ln); background: var(--pn2); }

/* ---- memory forensics ---- */
.ta-imgs { display: flex; gap: 10px; padding: 10px 14px; background: var(--pn); border-bottom: 1px solid var(--ln); }
.ta-imgs > div { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 8px; }
.ta-imgs .on { background: var(--sel); box-shadow: inset 3px 0 0 var(--bl), inset 0 0 0 1px color-mix(in srgb, var(--bl) 30%, transparent); }
.ta-imgs .on .ta-si { width: 28px; height: 28px; color: var(--bl); background: var(--pn); }
.ta-imgs b { display: block; font-size: 12px; font-weight: 600; } .ta-imgs small { font: 10px var(--mono); color: var(--mu); }
.ta-imgs .add { box-shadow: inset 0 0 0 1px var(--ln2); border: 1px dashed transparent; color: var(--mu); } .ta-imgs .add b { color: var(--mu); font-weight: 500; }
.ta-vs { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); border-radius: 10px; background: var(--pn); box-shadow: inset 3px 0 0 var(--rd), inset 0 0 0 1px var(--ln); flex: none; }
.ta-vs > div { padding: 11px 16px; border-right: 1px dashed var(--ln2); min-width: 0; } .ta-vs > div:last-child { border: 0; }
.ta-vs small { display: block; font: 600 9px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mu); }
.ta-vs b { display: block; margin-top: 6px; font: 600 15px var(--mono); } .ta-vs b em { font-style: normal; font-weight: 400; font-size: 11px; color: var(--mu); }
.ta-vs p { margin-top: 5px; font: 700 9.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.ta-vs1 > b { display: inline-block !important; font: 800 24px Inter, system-ui, sans-serif !important; color: var(--rd); margin: 4px 8px 2px 0 !important; }
.ta-vs1 > p { font: 400 11.5px Inter, system-ui, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--mu); margin: 0 0 8px !important; }
.ta-conf { display: flex; align-items: center; gap: 12px; } .ta-conf i { height: 3px; border-radius: 2px; background: var(--rd); } .ta-conf em { margin-left: auto; font: 700 16px var(--mono); color: var(--rd); font-style: normal; }
.ta-why { padding: 9px 14px; border-radius: 10px; background: var(--pn2); box-shadow: inset 0 0 0 1px var(--ln); flex: none; }
.ta-why > p { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px dashed var(--ln); font-size: 11.5px; } .ta-why > p:last-child { border: 0; }
.ta-why > p:first-child small { font: 600 9px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mu); margin-right: 6px; } .ta-why > p:first-child .ta-btn { margin-left: auto; }
.ta-why > p > i { width: 14px; font-style: normal; color: var(--rd); font-weight: 700; } .ta-why .ta-tag { margin: 0; }
.ta-split.c { flex: 1; grid-template-columns: 1.5fr 1fr; }
.ta-stage { display: flex; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--ln); font-size: 11.5px; }
.ta-stage i { font: 10px var(--mono); color: var(--mu); font-style: normal; width: 16px; } .ta-stage > span { width: 7px; height: 7px; border-radius: 50%; background: var(--gr); } .ta-stage > span.a { background: var(--or); }
.ta-stage em { margin-left: auto; font: 600 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mu); font-style: normal; } .ta-stage em.a { color: var(--or); }
.ta-kv.mf { gap: 0 16px; } .ta-kv.mf > span, .ta-kv.mf > b { padding: 5px 0; border-bottom: 1px solid var(--ln); } .ta-kv.mf > span { font: 600 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.ta-split.p { flex: 1; grid-template-columns: 450px 1fr; }
.ta-ptree { padding: 10px 0 0; overflow: hidden; }
.ta-ptree .ta-cardh { padding: 0 12px; } .ta-ptree .ta-cardh .ta-in { flex: 1; font-family: var(--mono); font-size: 10px; padding: 5px 8px; } .ta-ptree .ta-cardh small { margin: 0; white-space: nowrap; }
.ta-seg2 { display: inline-flex; padding: 2px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--ln2); } .ta-seg2 i { font: 600 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border-radius: 4px; color: var(--mu); font-style: normal; } .ta-seg2 i.on { color: var(--bl); background: var(--sel); }
.ta-pr { display: flex; align-items: center; gap: 6px; padding: 5px 10px 5px calc(12px + var(--d) * 18px); font: 11.5px var(--mono); border-left: 1px solid transparent; }
.ta-pr b { font-weight: 600; } .ta-pr > i { font-style: normal; color: var(--mu); font-size: 10.5px; } .ta-pr > span { margin-left: auto; color: var(--mu); font-size: 10px; white-space: nowrap; }
.ta-pr .ta-tag { margin: 0; padding: 0 5px; }
.ta-pr.sel { background: var(--sel); box-shadow: inset 3px 0 0 var(--bl); } .ta-pr.bad b { color: var(--rd); } .ta-pr.sel b { color: var(--rd); }
.ta-pdet { display: flex; flex-direction: column; gap: 10px; }
.ta-pdh { display: flex; align-items: flex-start; gap: 12px; } .ta-pdh > div { flex: 1; } .ta-pdh b { font-size: 16px; font-weight: 700; } .ta-pdh small { display: block; margin: 2px 0 6px; font: 11px var(--mono); color: var(--mu); } .ta-pdh small b { font-size: 11px; }
.ta-pdh .ta-si { width: 40px; height: 40px; }
.ta-g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 8px; box-shadow: inset 0 0 0 1px var(--ln); overflow: hidden; }
.ta-g4 > div { padding: 6px 10px; border-right: 1px solid var(--ln); border-bottom: 1px solid var(--ln); min-width: 0; } .ta-g4 > div.w4 { grid-column: span 4; } .ta-g4 > div.e { background: var(--soft); }
.ta-g4 small { display: block; font: 600 8.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mu); }
.ta-g4 span { display: block; margin-top: 2px; font: 11px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-g4 .w4 span { display: flex; gap: 4px; }
.ta-cardh.x > div b { display: block; } .ta-cardh.x > div { margin-right: auto; }
.ta-hives { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ta-hv { position: relative; display: flex; gap: 8px; padding: 9px 10px; border-radius: 9px; background: var(--pn); box-shadow: inset 3px 0 0 var(--c), inset 0 0 0 1px var(--ln); min-width: 0; }
.ta-hv.p { --c: var(--am); } .ta-hv.e { --c: var(--gr); } .ta-hv.n { --c: color-mix(in srgb, var(--rd) 50%, transparent); } .ta-hv.n > div { opacity: .6; }
.ta-hv.on { background: var(--sel); box-shadow: inset 3px 0 0 var(--bl), inset 0 0 0 1px var(--bl); }
.ta-hv > div { flex: 1; min-width: 0; } .ta-hv b { display: block; font-size: 11.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 92px; }
.ta-hv small { display: block; margin-top: 3px; font: 9.5px var(--mono); color: var(--mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ta-hv small em { font-style: normal; }
.ta-hv p { margin-top: 2px; font-size: 10px; color: var(--am); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ta-hv.n p { color: var(--rd); }
.ta-hv > .ta-tag { position: absolute; right: 8px; top: 8px; }
.ta-tbl.ind .ta-tr { align-items: start; padding: 8px 12px; } .ta-tbl.ind .ta-tr > span { white-space: normal; font-family: var(--mono); font-size: 10.5px; line-height: 1.5; }
.ta-tbl.ind .ta-tr > span em { display: block; font-style: normal; color: var(--mu); font-size: 10px; margin-top: 3px; } .ta-tbl.ind .ta-tr > span i { color: var(--mu); font-style: normal; }
.ta-tbl.ind .ta-tag { margin: 0 3px 3px 0; }

/* ---- registry explorer ---- */
.ta-rgx { flex: 1; min-height: 0; display: grid; grid-template-columns: 290px 1fr; }
.ta-rgl { display: flex; flex-direction: column; gap: 7px; padding: 0 10px 10px; border-right: 1px solid var(--ln); background: var(--pn); overflow: hidden; }
.ta-bm { margin: 0 -10px; padding: 8px 12px; border-bottom: 1px solid var(--ln); }
.ta-bm h6 { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; } .ta-bm h6 svg { color: var(--am); fill: var(--am); }
.ta-bm p { display: flex; align-items: center; gap: 8px; padding: 3px 4px; font-size: 11.5px; color: var(--mu); } .ta-bm p svg { width: 11px; height: 11px; color: var(--or); fill: var(--or); }
.ta-rgn { display: flex; gap: 7px; padding: 7px 9px; border-radius: 7px; font-size: 10.5px; line-height: 1.4; background: var(--sel); } .ta-rgn svg { color: var(--bl); margin-top: 1px; }
.ta-rgl .ta-in { flex: none; }
.ta-hive { flex: none; display: flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: 7px; box-shadow: inset 3px 0 0 var(--tl), inset 0 0 0 1px var(--ln); font-size: 11px; white-space: nowrap; overflow: hidden; } .ta-hive svg { color: var(--tl); } .ta-hive small { color: var(--mu); font-size: 9.5px; overflow: hidden; text-overflow: ellipsis; }
.ta-key { display: flex; align-items: center; gap: 6px; padding: 3px 8px 3px calc(4px + var(--d) * 16px); border-radius: 6px; font-size: 12px; white-space: nowrap; }
.ta-key > i { width: 10px; font-style: normal; color: var(--mu); font-size: 10px; text-align: center; } .ta-key svg { width: 13px; height: 13px; color: #e3902a; fill: #e3a33e; }
.ta-key em { margin-left: auto; font-style: normal; font-size: 9.5px; padding: 0 6px; border-radius: 999px; background: var(--soft); color: var(--mu); }
.ta-key.on { color: #fff; background: var(--bl); } .ta-key.on svg { color: #fff; fill: rgba(255, 255, 255, .5); } .ta-key.on > i { color: #fff; } .ta-key.on em { color: #fff; background: rgba(255, 255, 255, .25); }
.ta-rgr { display: flex; flex-direction: column; min-width: 0; background: var(--pn2); }
.ta-rgp { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--pn); border-bottom: 1px solid var(--ln); font-size: 11.5px; } .ta-rgp svg { color: var(--tl); } .ta-rgp em { color: var(--am); font-style: normal; }
.ta-tabs.rg { background: var(--pn); padding: 4px 10px 0; } .ta-tabs.rg span { padding: 6px 12px; font-size: 11.5px; }
.ta-tbl.rg { border-radius: 0; box-shadow: none; } .ta-tbl.rg .ta-tr { padding: 8px 14px; } .ta-tbl.rg .ta-tr > span { font-size: 11.5px; } .ta-tbl.rg .ta-tr > span:nth-child(3) { font-family: var(--mono); font-size: 11px; }
.ta-vic { display: inline-flex; margin-right: 8px; vertical-align: -2px; color: var(--bl); } .ta-vic svg { width: 12px; height: 12px; }
.ta-rgd { margin-top: auto; border-top: 1px solid var(--ln); background: var(--pn); }
.ta-rgd .ta-tabs { background: transparent; }
.ta-rgd2 { display: grid; grid-template-columns: 300px 1fr; min-height: 170px; } .ta-rgd2 > div { padding: 10px 14px; } .ta-rgd2 > div:first-child { border-right: 1px solid var(--ln); }
.ta-rgd2 h6 { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mu); } .ta-rgd2 h6 small { letter-spacing: 0; text-transform: none; font-weight: 400; }
.ta-kv.rg { gap: 6px 14px; } .ta-kv.rg b { white-space: normal; }
.ta-hex { font: 11px/1.75 var(--mono); }
.ta-hex p { display: grid; grid-template-columns: 76px 390px 1fr; } .ta-hex i { font-style: normal; color: var(--mu); } .ta-hex em { font-style: normal; color: var(--bl); }
.ta-hex.sm p { grid-template-columns: 42px 262px 1fr; } .ta-hex.sm { padding: 8px 10px; border-radius: 7px; background: var(--pn2); box-shadow: inset 0 0 0 1px var(--ln); font-size: 9.5px; }
.ta-rgs { flex: none; display: flex; align-items: center; gap: 18px; padding: 6px 14px; border-top: 1px solid var(--ln); background: var(--pn); font-size: 10.5px; color: var(--mu); white-space: nowrap; overflow: hidden; }
.ta-rgs span { display: inline-flex; align-items: center; gap: 5px; } .ta-rgs span:first-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; } .ta-rgs svg { color: var(--bl); width: 12px; } .ta-rgs .r { margin-left: auto; color: var(--tl) !important; }

/* ---- filesystem explorer ---- */
.ta-seg { display: inline-flex; align-items: center; gap: 4px; padding: 4px; margin-right: 8px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--ln2); font-size: 11.5px; color: var(--mu); }
.ta-seg i { display: none; }
.ta-segbar { display: flex; justify-content: center; gap: 4px; padding: 8px; background: var(--pn); border-bottom: 1px solid var(--ln); }
.ta-segbar span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 7px; color: var(--mu); } .ta-segbar span.on { color: #fff; background: var(--bl); }
.ta-mh .ta-seg { display: none; }
.ta-disks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 12px 14px; background: var(--pn); border-bottom: 1px solid var(--ln); }
.ta-disk { display: grid; grid-template-columns: 34px 1fr auto; gap: 4px 10px; align-items: start; padding: 9px 10px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--ln2); }
.ta-disk.on { box-shadow: inset 0 0 0 1.5px var(--bl); background: var(--sel); }
.ta-disk b { display: block; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ta-disk small { color: var(--mu); font-size: 10px; } .ta-disk p { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ta-fsx { flex: 1; min-height: 0; display: grid; grid-template-columns: 250px 1fr; }
.ta-fst { padding: 10px; border-right: 1px solid var(--ln); background: var(--pn); overflow: hidden; } .ta-fst h6 { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; font-size: 12px; } .ta-fst h6 svg { color: var(--bl); }
.ta-fsm { display: flex; flex-direction: column; min-width: 0; }
.ta-fsb { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--pn); border-bottom: 1px solid var(--ln); } .ta-fsb code { margin-left: 8px; font-size: 10.5px; color: var(--mu); } .ta-fsb small { margin-left: auto; color: var(--mu); font-size: 10.5px; }
.ta-tbl.fs { flex: 1; border-radius: 0; box-shadow: none; } .ta-tbl.fs .ta-tr { padding: 6px 12px; font-size: 11px; } .ta-tbl.fs .ta-tr > span:nth-child(2), .ta-tbl.fs .ta-tr > span:nth-child(n+5) { font-family: var(--mono); font-size: 10.5px; }
.ta-tbl.fs b.n { font-weight: 500; } .ta-tbl.fs b.n.mu { color: var(--mu); }
.ta-tbl.fs.del .ta-tr > span:nth-child(4) i { color: var(--mu); font-style: normal; }
.ta-fsf { flex: none; display: flex; gap: 14px; padding: 7px 14px; border-top: 1px solid var(--ln); background: var(--pn); font-size: 10.5px; color: var(--mu); } .ta-fsf b { color: var(--ink); } .ta-fsf span { margin-left: auto; }
.ta-vssn { display: flex; gap: 10px; margin: 10px 14px 0; padding: 9px 12px; border-radius: 9px; background: var(--sel); font-size: 11.5px; } .ta-vssn b { display: block; } .ta-vssn small { color: var(--mu); } .ta-vssn svg { color: var(--bl); }
.ta-vols { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; padding: 10px 14px; }
.ta-vol { padding: 8px; border-radius: 9px; background: var(--pn); box-shadow: inset 0 0 0 1px var(--ln2); min-width: 0; } .ta-vol.on { box-shadow: inset 0 0 0 2px var(--bl); }
.ta-volh { display: flex; gap: 7px; } .ta-volh > div { min-width: 0; } .ta-volh .ta-si { width: 26px; height: 26px; color: var(--bl); background: var(--sel); } .ta-volh .ta-si.o { color: var(--am); background: color-mix(in srgb, var(--am) 14%, transparent); }
.ta-volh b { font-size: 11.5px; margin-right: 4px; } .ta-volh .ta-tag { padding: 0 4px; font-size: 8.5px; margin-right: 2px; } .ta-volh small { display: block; font-size: 9px; color: var(--mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-vn { display: grid; grid-template-columns: repeat(3, 1fr); margin: 7px 0; padding: 5px 0; border-radius: 6px; background: var(--pn2); text-align: center; font-size: 8px; letter-spacing: .06em; text-transform: uppercase; color: var(--mu); }
.ta-vn b { display: block; font-size: 11px; letter-spacing: 0; color: var(--ink); }
.ta-vol p { display: flex; gap: 4px; } .ta-vol .ta-btn { flex: 1; padding: 4px 4px; font-size: 10px; }
.ta-sp > .ta-cardh.x { padding: 4px 14px 8px; } .ta-cardh b.dl svg { color: var(--rd); }
.ta-sp > .ta-tbl.fs { margin: 0; border-top: 1px solid var(--ln); }

/* ---- event logs ---- */
.ta-bnr { display: flex; align-items: center; gap: 10px; padding: 8px 14px; font-size: 11.5px; background: var(--sel); border-bottom: 1px solid color-mix(in srgb, var(--bl) 25%, transparent); } .ta-bnr > svg { color: #fff; background: var(--bl); border-radius: 50%; padding: 2px; }
.ta-bnr .ta-btn { margin-left: auto; }
.ta-elx { flex: 1; min-height: 0; display: grid; grid-template-columns: 230px 1fr 290px; }
.ta-elb { padding: 10px 12px; border-right: 1px solid var(--ln); background: var(--pn); overflow: hidden; }
.ta-elb h6 { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--mu); } .ta-elb h6 i { font-style: normal; }
.ta-elb .ta-in { margin-bottom: 6px; font-size: 11px; }
.ta-elb h5 { margin: 8px 0 3px; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); font-weight: 700; }
.ta-elb p { display: flex; align-items: center; gap: 8px; padding: 3px 0 3px 12px; font-size: 11.5px; } .ta-elb p svg { width: 11px; height: 11px; color: var(--or); fill: color-mix(in srgb, var(--or) 30%, transparent); }
.ta-elm .ta-filters .ta-sel { flex: none; } .ta-elm .ta-filters .ta-in.s { width: 110px; }
.ta-elm { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; min-width: 0; overflow: hidden; }
.ta-etl { flex: none; } .ta-etl .ta-cardh > div b { display: block; font: 700 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; } .ta-etl .ta-cardh small.l { margin: 0; }
.ta-ebars { display: flex; align-items: flex-end; gap: 2px; height: 96px; padding: 4px 6px 0; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--ln); }
.ta-ebars i { flex: 1; height: var(--h); min-height: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(#2ec5e6, #1ea6d8); }
.ta-ax { display: flex; justify-content: space-between; margin-top: 4px; font-size: 9.5px; color: var(--mu); }
.ta-tbl.el { flex: 1; } .ta-tbl.el .ta-tr { padding: 7px 12px; font-size: 11px; } .ta-tbl.el .ta-tr > span:first-child { font-family: var(--mono); font-size: 10.5px; }
.ta-elm .ta-fsf { border: 0; background: none; padding: 0 2px; }
.ta-eld { padding: 12px 14px; border-left: 1px solid var(--ln); background: var(--pn); overflow: hidden; }
.ta-eld h4 { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 15px; } .ta-eld h4 i { font-style: normal; color: var(--mu); }
.ta-eld h6 { margin: 10px 0 5px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.ta-kv.ev { grid-template-columns: 1fr auto; gap: 0; font-size: 10.5px; } .ta-kv.ev > span, .ta-kv.ev > b { padding: 5px 0; border-bottom: 1px solid var(--ln); } .ta-kv.ev > b { text-align: right; max-width: 190px; font-size: 10px; }
.ta-kpis.el b { font-size: 22px; }
.ta-mitre { display: grid; gap: 8px; }
.ta-mitre.n8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .ta-mitre.n6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ta-tac { border-radius: 8px; background: var(--pn2); box-shadow: inset 0 0 0 1px var(--ln); overflow: hidden; padding-bottom: 4px; }
.ta-tac > b { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 7px 9px; font-size: 11px; color: #fff; background: var(--c); }
.ta-tac > b i { font-style: normal; font-size: 9.5px; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, .25); }
.ta-tac.big > b { flex-wrap: wrap; font-size: 12px; } .ta-tac.big > b small { order: 3; flex-basis: 100%; font: 9px var(--mono); opacity: .8; }
.ta-tac p { position: relative; margin: 5px 5px 0; padding: 5px 20px 5px 7px; border-radius: 6px; background: var(--pn); box-shadow: inset 0 0 0 1px var(--ln); font-size: 10.5px; line-height: 1.3; }
.ta-tac code { display: block; margin-bottom: 1px; font-size: 9px; color: var(--mu); }
.ta-tac em { position: absolute; right: 5px; top: 6px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px; display: grid; place-items: center; font: 700 9px sans-serif; font-style: normal; color: #fff; background: var(--bl); }
.ta-tac.big em { color: var(--bl); background: var(--sel); }
.ta-tac.k-ia { --c: #ef4444; } .ta-tac.k-ex { --c: #f97316; } .ta-tac.k-pe { --c: #eab308; } .ta-tac.k-pr { --c: #84cc16; } .ta-tac.k-st { --c: #22c55e; } .ta-tac.k-ca { --c: #14b8a6; } .ta-tac.k-lm { --c: #3b82f6; } .ta-tac.k-cc { --c: #a855f7; } .ta-tac.k-im { --c: #ec4899; }
.ta-threat { display: flex; align-items: flex-start; gap: 6px; padding: 10px 14px; border-radius: 9px; background: var(--pn); box-shadow: inset 3px 0 0 var(--or), inset 0 0 0 1px var(--ln); flex: none; }
.ta-threat > div { flex: 1; } .ta-threat b { font-size: 12.5px; font-weight: 600; } .ta-threat p { margin: 3px 0; color: var(--bl); font-size: 11px; } .ta-threat small { display: flex; align-items: center; gap: 5px; color: var(--mu); font-size: 10.5px; } .ta-threat small svg { width: 11px; height: 11px; }
.ta-h2 b { font-size: 16px; font-weight: 600; } .ta-h2 p { color: var(--mu); font-size: 11.5px; }
.ta-qbar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .ta-qbar .ta-chips { margin-right: auto; } .ta-qbar small { color: var(--mu); font-size: 10.5px; }
.ta-tbl.plain { box-shadow: inset 0 0 0 1px var(--ln); } .ta-tbl.plain .ta-tr { padding: 6px 12px; font-size: 11px; } .ta-tbl.plain .ta-th { font-family: inherit; font-size: 10px; }

/* ---- pcap ---- */
.ta-pc-x {}
.ta-kpis.pc b { font-size: 20px; }
.ta-lbl { display: flex; align-items: center; gap: 6px; font: 600 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mu); margin-bottom: 4px; }
.ta-dets { flex: 1; display: flex; flex-direction: column; gap: 7px; overflow: hidden; }
.ta-pills { display: flex; gap: 6px; padding-bottom: 4px; } .ta-pills span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 7px; font-size: 11px; box-shadow: inset 0 0 0 1px var(--ln2); }
.ta-pills span.on { color: var(--tl); background: color-mix(in srgb, var(--tl) 9%, var(--pn)); box-shadow: inset 0 0 0 1px var(--tl); }
.ta-fnd { display: flex; gap: 10px; padding: 9px 12px; border-radius: 9px; background: color-mix(in srgb, var(--am) 6%, var(--pn)); box-shadow: inset 3px 0 0 var(--am), inset 0 0 0 1px color-mix(in srgb, var(--am) 22%, var(--ln)); flex: none; }
.ta-fnd > i { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; color: var(--am); background: color-mix(in srgb, var(--am) 14%, transparent); } .ta-fnd > div { flex: 1; min-width: 0; }
.ta-fnd b { font-size: 12.5px; font-weight: 700; } .ta-fnd p { margin: 2px 0 5px; font-size: 10.5px; color: var(--mu); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ta-hb { padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; box-shadow: inset 3px 0 0 var(--bl), inset 0 0 0 1px var(--ln); }
.ta-flt { flex-wrap: nowrap; overflow: hidden; } .ta-flt span { flex: none; padding: 4px 10px; border-radius: 999px; font-size: 11px; box-shadow: inset 0 0 0 1px var(--ln2); background: var(--pn); } .ta-flt span i { font-style: normal; font-size: 9.5px; padding: 0 5px; border-radius: 999px; background: var(--soft); }
.ta-flt span.on { color: var(--bl); background: var(--sel); box-shadow: inset 0 0 0 1px var(--bl); }
.ta-split.f { flex: 1; grid-template-columns: 1fr 370px; }
.ta-tbl.pcf .ta-tr { align-items: start; padding: 8px 12px; } .ta-tbl.pcf .ta-tr > span { white-space: normal; font-size: 11px; } .ta-tbl.pcf code { font-size: 10px; color: var(--mu); }
.ta-tbl.pcf small { display: block; font: 9.5px var(--mono); color: var(--mu); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ta-tbl.pcf .ta-tr > span:nth-child(2) b { font-weight: 500; margin-right: 8px; }
.ta-bb { display: block; height: 4px; margin-top: 4px; width: 80%; border-radius: 2px; background: var(--tl); }
.ta-sig { display: block; margin-bottom: 3px; padding: 1px 8px; border-radius: 999px; font: 600 9.5px var(--mono); font-style: normal; background: var(--soft); }
.ta-fd { display: flex; flex-direction: column; gap: 7px; overflow: hidden; } .ta-fd h6 { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mu); }
.ta-fdh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; } .ta-fdh b { font: 700 13px var(--mono); color: var(--bl); } .ta-fdh small { flex-basis: 100%; order: 3; font: 10px var(--mono); color: var(--mu); } .ta-fdh i { margin-left: auto; font-style: normal; color: var(--mu); }
.ta-carve { padding: 9px 12px; border-radius: 9px; background: color-mix(in srgb, var(--rd) 6%, var(--pn)); box-shadow: inset 3px 0 0 var(--rd), inset 0 0 0 1px color-mix(in srgb, var(--rd) 25%, var(--ln)); }
.ta-carve b { display: block; } .ta-carve small { display: block; margin-bottom: 6px; color: var(--mu); font-size: 10.5px; }
.ta-colsel { display: flex; align-items: center; gap: 12px; font-size: 11px; } .ta-colsel span { display: inline-flex; align-items: center; gap: 5px; }
.ta-split.k { flex: 1; grid-template-columns: 1.55fr .9fr 1fr; }
.ta-tbl.pk .ta-tr { padding: 6px 12px; } .ta-tbl.pk .ta-tr > span { font-size: 10.5px; } .ta-tbl.pk code { font-size: 10px; }
.ta-links { display: flex; gap: 6px; margin-top: 8px; }
.ta-lay { margin-top: 6px; } .ta-lay > b { display: block; margin-bottom: 4px; font: 700 11px var(--mono); } .ta-lay > b small { font-weight: 400; color: var(--mu); }
.ta-kv.pk { padding-left: 14px; font-size: 10px; gap: 3px 12px; } .ta-kv.pk b { font-size: 10px; white-space: normal; text-align: right; }

/* ---- script analyzer ---- */
.ta-scb { display: flex; align-items: center; gap: 14px; padding: 8px 14px; background: var(--pn2); border-bottom: 1px solid var(--ln); font-size: 11px; white-space: nowrap; overflow: hidden; }
.ta-scb > b { font-size: 12.5px; } .ta-scb small { color: var(--mu); font-size: 9.5px; letter-spacing: .06em; } .ta-scb small b { color: var(--ink); font-size: 11px; letter-spacing: 0; } .ta-scb code { font-size: 10px; color: var(--ink); letter-spacing: 0; } .ta-scb .ta-btn { margin-left: auto; }
.ta-scx { flex: 1; min-height: 0; display: grid; grid-template-columns: 230px 1fr 410px; }
.ta-lys { padding: 10px; border-right: 1px solid var(--ln); background: var(--pn); overflow: hidden; }
.ta-lys h6 { margin: 6px 0; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mu); font-weight: 600; }
.ta-ly { position: relative; padding: 7px 10px; margin-bottom: 6px; border-radius: 8px; }
.ta-ly.on { background: var(--sel); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bl) 30%, transparent); } .ta-ly.c { box-shadow: inset 0 0 0 1px var(--ln2); }
.ta-ly b { display: block; font-size: 11.5px; font-weight: 600; } .ta-ly small { color: var(--mu); font-size: 10px; } .ta-ly.on:first-of-type b { color: var(--bl); }
.ta-ly em { float: left; margin: 3px 10px 0 0; font-style: normal; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--ln2); }
.ta-ly.d { padding-left: 22px; } .ta-ly .dt { position: absolute; left: 8px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--mu); } .ta-ly .dt.b { background: var(--bl); }
.ta-code { position: relative; margin: 0; padding: 6px 0; overflow: hidden; font-size: 11.5px; line-height: 1.62; background: var(--pn); }
.ta-code > span { display: block; white-space: pre; padding-right: 10px; } .ta-code > span > i { display: inline-block; width: 38px; margin-right: 12px; padding-right: 8px; text-align: right; font-style: normal; color: var(--mu); border-right: 1px solid var(--ln); }
.ta-code > span.cur { background: var(--sel); }
.ta-code .cm { color: var(--mu); } .ta-code .st { color: color-mix(in srgb, var(--ink) 85%, var(--bl)); }
.ta-code mark { padding: 1px 6px; border-radius: 999px; font-size: 10.5px; color: var(--ink); background: var(--pn); box-shadow: inset 0 0 0 1px var(--bl); }
.ta-code mark em { font-style: normal; color: var(--mu); } .ta-code mark u { text-decoration: none; padding: 0 6px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ln2); color: var(--mu); } .ta-code mark u.g { color: var(--gr); box-shadow: none; }
.ta-code mark.t { padding: 0 6px; font-size: 9.5px; color: var(--mu); box-shadow: inset 0 0 0 1px var(--ln2); } .ta-code mark.x.on { box-shadow: inset 0 0 0 1.5px var(--gr); }
.ta-code u.enc { text-decoration: underline; text-decoration-color: var(--bl); text-underline-offset: 3px; }
.ta-pop { position: absolute; left: 230px; top: 260px; width: 430px; padding: 10px 12px; border-radius: 9px; background: var(--pn); box-shadow: 0 14px 34px rgba(0, 0, 0, .22), inset 0 0 0 1px var(--ln2); white-space: normal; line-height: 1.5; font-family: Inter, system-ui, sans-serif; }
.ta-pop > b { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--ln); font-size: 12.5px; } .ta-pop > b small { margin-left: auto; font: 9.5px var(--mono); color: var(--mu); } .ta-pop > b i { font-style: normal; color: var(--mu); }
.ta-pop code { display: block; margin: 4px 0; padding: 6px 8px; border-radius: 6px; background: var(--pn2); font-size: 10px; white-space: nowrap; overflow: hidden; }
.ta-pop p { font-size: 10.5px; } .ta-pop p:last-child { display: flex; gap: 5px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--ln); }
.ta-insr { padding: 10px 14px; border-left: 1px solid var(--ln); background: var(--pn); overflow: hidden; display: flex; flex-direction: column; gap: 6px; }
.ta-insr h6 { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mu); font-weight: 600; } .ta-insr h6 small { text-transform: none; letter-spacing: 0; }
.ta-icard { padding: 9px 11px; border-radius: 9px; box-shadow: inset 3px 0 0 var(--or), inset 0 0 0 1px var(--ln); }
.ta-icard > p:first-child { display: flex; align-items: center; gap: 8px; } .ta-icard > p:first-child b { font-size: 12px; } .ta-icard > p:first-child .ta-tag, .ta-icard > p:first-child em { margin-left: auto; } .ta-icard em { font: 10px var(--mono); color: var(--mu); font-style: normal; }
.ta-icard .ta-mut { font-size: 10.5px; margin: 2px 0 5px; } .ta-icard h6 { margin: 4px 0; }
.ta-nd { padding: 7px 9px; border-radius: 7px; box-shadow: inset 0 0 0 1px var(--ln); } .ta-nd b { font-size: 11.5px; } .ta-nd em { float: right; font-style: normal; font-size: 10.5px; } .ta-nd p { font-size: 10.5px; margin-top: 2px; }
.ta-hh { display: flex; align-items: center; gap: 8px; } .ta-hh b { font-size: 12.5px; } .ta-hh + .ta-mut { font-size: 10.5px; }
.ta-chain { padding: 8px 10px; border-radius: 7px; font-size: 11px; background: color-mix(in srgb, var(--rd) 8%, var(--pn)); box-shadow: inset 3px 0 0 var(--rd); }
.ta-chain small { display: block; font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--rd); }
.ta-nds { display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-radius: 7px; box-shadow: inset 3px 0 0 var(--bl), inset 0 0 0 1px var(--ln); } .ta-nds > small { font-size: 8.5px; color: var(--mu); letter-spacing: .08em; text-transform: uppercase; }
.ta-nds b { display: block; font: 700 11px var(--mono); } .ta-nds small { font-size: 10px; color: var(--mu); } .ta-nds .ta-btn { margin-left: auto; }
.ta-obf { display: block; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--rd) 16%, var(--soft) 16%); }
.ta-sink { display: grid; grid-template-columns: 80px 1fr auto; gap: 8px; font-size: 11px; } .ta-sink small { font-size: 9px; letter-spacing: .06em; text-transform: uppercase; } .ta-sink small.bl { color: var(--bl); } .ta-sink small.pu { color: var(--pu); } .ta-sink small.rd { color: var(--rd); } .ta-sink small.am { color: var(--am); }
.ta-sink b { font: 600 11px var(--mono); } .ta-sink em { font: 9.5px var(--mono); color: var(--mu); font-style: normal; }
.ta-big { font-size: 14px; } .ta-btns { display: flex; flex-wrap: wrap; gap: 5px; }
.ta-kv.sc { font-size: 11px; } .ta-kv.sc b { white-space: normal; word-break: break-all; font-size: 10px; }

/* ---- document analyzer ---- */
.ta-dah { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: var(--pn); border-bottom: 1px solid var(--ln); white-space: nowrap; overflow: hidden; }
.ta-dah > div { min-width: 0; flex: 1; } .ta-dah b { display: block; font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; } .ta-dah small { display: block; font: 10px var(--mono); color: var(--mu); overflow: hidden; text-overflow: ellipsis; }
.ta-dah .ta-si { width: 30px; height: 30px; background: var(--sel); color: var(--bl); } .ta-dah .ta-tag { border-radius: 999px; }
.ta-banner { flex: none; padding: 10px 16px; border-radius: 10px; background: color-mix(in srgb, var(--rd) 6%, var(--pn)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rd) 22%, transparent); }
.ta-banner small { color: var(--rd); font: 700 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; } .ta-banner b { display: block; margin: 2px 0; font-size: 17px; font-weight: 800; } .ta-banner b em { font-style: normal; color: var(--rd); }
.ta-banner p { color: var(--mu); font-size: 11px; margin-bottom: 6px; }
.ta-pd { display: flex; gap: 10px; padding: 8px 10px; margin-top: 6px; border-radius: 8px; background: color-mix(in srgb, var(--rd) 5%, var(--pn)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rd) 22%, transparent); }
.ta-pd > i { flex: none; width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; color: var(--rd); background: color-mix(in srgb, var(--rd) 12%, transparent); } .ta-pd > div { min-width: 0; }
.ta-pd p { margin-bottom: 4px; font-size: 11px; color: var(--mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ta-pd p b { color: var(--ink); font-size: 12px; }
.ta-pd .ta-tag { margin: 0 3px 0 0; }
.ta-comp { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 7px 10px; border-radius: 8px; box-shadow: inset 3px 0 0 var(--tl), inset 0 0 0 1px var(--ln); white-space: nowrap; overflow: hidden; } .ta-comp svg { color: var(--tl); }
.ta-comp code { font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; } .ta-comp em { font-family: Inter, sans-serif; font-style: normal; color: var(--mu); font-size: 10px; }
.ta-ac { display: flex; gap: 10px; margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--am) 6%, var(--pn)); box-shadow: inset 3px 0 0 var(--am), inset 0 0 0 1px var(--ln); }
.ta-ac > i { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: var(--am); background: color-mix(in srgb, var(--am) 14%, transparent); } .ta-ac > div { min-width: 0; }
.ta-ac p { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ta-ac code { font-size: 10.5px; } .ta-ac small { display: block; font-size: 9.5px; color: var(--mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-pays { display: grid; gap: 10px; } .ta-pays.c2 { grid-template-columns: 1fr 1fr; } .ta-pays.c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ta-pay { padding: 9px 10px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--ln2); background: var(--pn); min-width: 0; }
.ta-pay > p:first-child { display: flex; align-items: center; gap: 6px; } .ta-pay > p:first-child b { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ta-pay > p:first-child .ta-tag { margin: 0 0 0 auto; font-size: 8.5px; padding: 1px 5px; }
.ta-pay > small { display: block; font-size: 10px; color: var(--mu); margin-bottom: 5px; }
.ta-pf { margin-top: 5px; padding: 5px 8px; border-radius: 6px; background: var(--pn2); box-shadow: inset 0 0 0 1px var(--ln); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ta-pf small { display: block; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; color: var(--mu); }
.ta-pay > p:last-child { display: flex; gap: 4px; margin-top: 7px; } .ta-pays.c5 .ta-pay > p:last-child .ta-btn { padding: 3px 6px; font-size: 9.5px; }
.ta-pays.c5 .ta-pay > p:last-child .ta-btn:last-child { flex: 1; min-width: 0; overflow: hidden; }

/* ---- pe analyzer ---- */
.ta-pefs { display: flex; gap: 10px; padding: 10px 14px; background: var(--pn); border-bottom: 1px solid var(--ln); }
.ta-pefs > div { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 8px; box-shadow: inset 3px 0 0 var(--rd), inset 0 0 0 1px var(--ln2); min-width: 0; }
.ta-pefs > div.g { box-shadow: inset 3px 0 0 var(--gr), inset 0 0 0 1px var(--ln2); } .ta-pefs > div.on { background: var(--sel); box-shadow: inset 3px 0 0 var(--rd), inset 0 0 0 1px var(--bl); }
.ta-pefs .ta-si { width: 28px; height: 28px; color: var(--bl); background: color-mix(in srgb, var(--bl) 14%, transparent); }
.ta-pefs b { display: block; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ta-pefs small { font: 10px var(--mono); color: var(--mu); }
.ta-pefs .add { justify-content: center; flex-direction: column; gap: 2px; box-shadow: inset 0 0 0 1px var(--ln2) !important; color: var(--mu); padding: 5px 22px; } .ta-pefs .add b { color: var(--mu); font-weight: 500; }
.ta-peh { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--pn2); border-bottom: 1px solid var(--ln); } .ta-peh svg { color: var(--bl); } .ta-peh b { font-size: 14px; font-weight: 600; } .ta-peh .ta-btn { margin-left: auto; padding: 5px 12px; }
.ta-mono.mu { font-size: 10px; flex: none; }
.ta-warnb { display: flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 9px; background: color-mix(in srgb, var(--am) 8%, var(--pn)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--am) 25%, transparent); flex: none; } .ta-warnb > svg { color: var(--am); }
.ta-pdt { display: flex; align-items: flex-start; gap: 10px; margin-top: 6px; padding: 8px 12px; border-radius: 8px; box-shadow: inset 3px 0 0 var(--tl), inset 0 0 0 1px var(--ln); } .ta-pdt.l { box-shadow: inset 3px 0 0 var(--gr), inset 0 0 0 1px var(--ln); }
.ta-pdt > div { flex: 1; } .ta-pdt b { font-size: 12px; font-weight: 600; } .ta-pdt p { font-size: 11px; color: var(--mu); margin: 1px 0 4px; } .ta-pdt > em { font: 10px var(--mono); color: var(--mu); font-style: normal; }
.ta-api { display: flex; gap: 12px; padding: 8px 12px; margin-top: 6px; border-radius: 8px; background: var(--pn2); } .ta-api svg { color: var(--am); margin-top: 2px; } .ta-api b { font-size: 12px; font-weight: 600; } .ta-api p { font-size: 11px; color: var(--mu); margin-bottom: 3px; }
.ta-split.t3 { flex: 1; grid-template-columns: 1fr 1fr 1fr; }
.ta-tbl.imp { border-radius: 0; box-shadow: none; } .ta-tbl.imp .ta-tr { padding: 12px 14px; } .ta-tbl.imp code { font-size: 10.5px; }
.ta-empty { padding: 0; display: flex; flex-direction: column; background: var(--pn2); }
.ta-empty > div:last-child { flex: 1; display: flex; flex-direction: column; align-items: center; padding-top: 40px; text-align: center; } .ta-empty > div:last-child i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--mu); box-shadow: inset 0 0 0 2px var(--ln2); margin-bottom: 10px; }
.ta-empty > div:last-child i svg { width: 20px; height: 20px; } .ta-empty > div:last-child b { font-size: 13px; font-weight: 600; } .ta-empty > div:last-child p { color: var(--mu); font-size: 11px; }
.ta-big2 { display: block; font-size: 24px; font-weight: 800; } .ta-h5 { font-size: 13px; font-weight: 600; flex: none; }
.ta-ent { display: flex; align-items: flex-end; gap: 3px; height: 70px; flex: none; } .ta-ent i { flex: 1; height: var(--h); } .ta-ent .o { background: #f59e0b; } .ta-ent .g { background: #22c55e; } .ta-ent .r { background: #ef4444; }
.ta-tbl.ent .ta-tr { padding: 12px 16px; } .ta-eb { display: inline-block; width: 100px; height: 5px; margin-right: 12px; border-radius: 3px; vertical-align: middle; background: linear-gradient(90deg, var(--c) var(--w), var(--soft) var(--w)); }
.ta-eb.am { --c: #f59e0b; } .ta-eb.gr { --c: #22c55e; } .ta-eb.rd { --c: #ef4444; }

/* ---- outputs ---- */
.ta-invh { display: flex; justify-content: space-between; gap: 20px; padding: 12px 18px; background: var(--pn); }
.ta-invh p { display: flex; align-items: center; gap: 8px; } .ta-invh code { font-size: 10px; color: var(--mu); } .ta-invh p small { color: var(--mu); font-size: 10.5px; }
.ta-invh h4 { margin: 4px 0 6px; font-size: 19px; font-weight: 800; } .ta-invb { display: flex; gap: 6px; align-items: flex-start; }
.ta-view { display: flex; justify-content: flex-end; align-items: center; gap: 4px; padding: 6px 14px; background: var(--pn2); border-top: 1px solid var(--ln); font-size: 11px; }
.ta-view small { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mu); margin-right: 6px; } .ta-view span { padding: 4px 10px; border-radius: 6px; color: var(--mu); } .ta-view span.on { color: var(--bl); background: var(--sel); }
.ta-split.d3 { grid-template-columns: 1fr 1fr 1fr; flex: none; }
.ta-rows > small { font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mu); }
.ta-rows > b { display: block; margin: 4px 0; font-size: 28px; font-weight: 800; } .ta-rows > b.s { font-size: 14px; font-weight: 600; margin: 12px 0 6px; } .ta-rows > p.ta-mut { font-size: 11px; margin-bottom: 4px; } .ta-rows p.bl { font-size: 11px; font-weight: 600; margin-top: 8px; }
.ta-rows p:not(.ta-mut):not(.bl) { display: grid; grid-template-columns: 56px 1fr 30px; gap: 8px; align-items: center; font-size: 10.5px; color: var(--mu); }
.ta-rows p i { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--c) var(--w), var(--soft) var(--w)); } .ta-rows i.r { --c: var(--rd); } .ta-rows i.o { --c: var(--or); } .ta-rows i.b { --c: var(--tl); }
.ta-pth { display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: var(--pn); border-bottom: 1px solid var(--ln); } .ta-pth > svg { color: var(--bl); width: 17px; height: 17px; }
.ta-pth b { font-size: 14px; } .ta-pth code { font-size: 10px; color: var(--mu); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ta-pth i { margin-left: auto; font-style: normal; color: var(--mu); }
.ta-ptc { position: relative; flex: 1; background: var(--pn) radial-gradient(circle, var(--ln) 1px, transparent 1.2px) 0 0 / 22px 22px; }
.ta-ptc > svg { position: absolute; left: 0; top: 0; width: 1280px; height: 740px; } .ta-ptc > svg path { fill: none; stroke: var(--bl); stroke-width: 2; } .ta-ptc > svg circle { fill: var(--pn); stroke: var(--ln2); }
.ta-ptz { position: absolute; left: 16px; top: 14px; z-index: 1; display: flex; gap: 6px; padding: 6px; border-radius: 10px; background: var(--pn); box-shadow: 0 6px 16px rgba(0, 0, 0, .08), inset 0 0 0 1px var(--ln); }
.ta-ptz i { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; font-style: normal; font-size: 15px; box-shadow: inset 0 0 0 1px var(--ln2); }
.ta-pthint { position: absolute; right: 18px; top: 14px; font-size: 10.5px; color: var(--mu); }
.ta-ptc > svg { top: 30px; height: 700px; } .ta-ptc > svg path { stroke: color-mix(in srgb, var(--mu) 45%, transparent); stroke-width: 1.3; } .ta-ptc > svg path.ch { stroke: var(--bl); stroke-width: 2.2; }
.ta-tn { position: absolute; margin-top: 30px; width: 206px; height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: 6px; background: var(--pn); box-shadow: inset 0 0 0 1px var(--ln2); }
.ta-tn > span { flex: none; width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; color: #fff; }
.ta-tn > span svg { width: 13px; height: 13px; stroke-width: 2.4; } .ta-tn > div { min-width: 0; }
.ta-tn b { display: block; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ta-tn small { display: block; font-size: 10.5px; color: var(--mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-tn.ok > span { background: var(--gr); border-radius: 50%; width: 20px; height: 20px; margin: 0 3px; } .ta-tn.ok > span svg { width: 11px; height: 11px; stroke-width: 3.2; }
.ta-tn.tgt { box-shadow: inset 0 0 0 2px var(--bl), 0 0 0 4px color-mix(in srgb, var(--bl) 16%, transparent); } .ta-tn.tgt > span { color: var(--rd); background: color-mix(in srgb, var(--rd) 12%, transparent); } .ta-tn.tgt > span svg { width: 15px; height: 15px; stroke-width: 1.8; }
.ta-tn.file { background: color-mix(in srgb, var(--rd) 9%, var(--pn)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rd) 55%, transparent); } .ta-tn.file > span { background: var(--rd); }
.ta-tn.net > span { background: var(--pu); border-radius: 50%; }
.ta-tn.more { background: none; box-shadow: none; outline: 1.5px dashed color-mix(in srgb, var(--or) 70%, transparent); outline-offset: -1.5px; } .ta-tn.more > span { background: var(--or); border-radius: 50%; }
.ta-tn.hid { justify-content: space-between; flex-wrap: wrap; align-content: center; gap: 0 10px; background: repeating-linear-gradient(135deg, var(--pn) 0 6px, var(--pn2) 6px 12px); box-shadow: none; outline: 1.5px dashed var(--ln2); outline-offset: -1.5px; }
.ta-tn.hid i { font-style: normal; color: var(--mu); font-size: 15px; } .ta-tn.hid em { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; color: var(--mu); background: var(--soft); }
.ta-tn.hid small { display: none; }
.ta-leg { position: absolute; left: 16px; bottom: 16px; padding: 10px 14px; border-radius: 9px; background: var(--pn); box-shadow: 0 6px 16px rgba(0, 0, 0, .08), inset 0 0 0 1px var(--ln); font-size: 11px; }
.ta-leg b { display: block; margin-bottom: 4px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; } .ta-leg p { display: flex; align-items: center; gap: 8px; padding: 1px 0; }
.ta-leg i { width: 9px; height: 9px; border-radius: 50%; } .ta-leg i.g { background: var(--gr); } .ta-leg i.b { background: var(--bl); } .ta-leg i.o { background: var(--or); } .ta-leg i.r { background: var(--rd); } .ta-leg i.p { background: var(--pu); }
.ta-story2 { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.55fr 1fr; grid-template-rows: 1fr auto; gap: 10px; }
.ta-phs { display: flex; flex-direction: column; gap: 7px; padding: 12px 14px; border-radius: 10px; background: var(--pn); box-shadow: inset 3px 0 0 var(--c), inset 0 0 0 1px var(--ln); overflow: hidden; min-height: 0; }
.ta-phs.am { --c: var(--am); background: color-mix(in srgb, var(--am) 4%, var(--pn)); } .ta-phs.bl { --c: var(--tl); }
.ta-phh { display: flex; gap: 10px; } .ta-phh .ta-si { width: 28px; height: 28px; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); } .ta-phh b { font-size: 13px; font-weight: 700; } .ta-phh p { margin: 2px 0 5px; font-size: 10.5px; color: var(--mu); }
.ta-phs .ta-fnd { margin-left: 38px; }
.ta-evs { margin-left: 38px; } .ta-evs p { display: flex; align-items: center; gap: 8px; padding: 2px 0; font-size: 10.5px; white-space: nowrap; overflow: hidden; } .ta-evs p span { overflow: hidden; text-overflow: ellipsis; color: var(--mu); } .ta-evs code { font-size: 10px; color: var(--mu); } .ta-evs .ta-tag { flex: none; }
.ta-art { color: var(--mu); } .ta-art svg { width: 12px; } .ta-art small { color: var(--mu); }
.ta-none { margin-left: 38px; padding: 9px; border-radius: 7px; text-align: center; font-size: 11px; color: var(--mu); box-shadow: inset 0 0 0 1px var(--ln2); background-image: none; border: 1px dashed transparent; }
.ta-fl { color: var(--mu) !important; } .ta-fl { font-family: var(--mono); font-size: 10px !important; padding-left: 8px !important; }
.ta-lib { position: absolute; left: 340px; top: 170px; z-index: 2; width: 540px; padding: 8px; border-radius: 10px; background: var(--pn); box-shadow: 0 18px 40px rgba(0, 0, 0, .2), inset 0 0 0 1px var(--ln2); }
.ta-lib > div { padding: 7px 8px; border-bottom: 1px solid var(--ln); } .ta-lib > div:last-child { border: 0; }
.ta-lib > div p { display: flex; justify-content: space-between; } .ta-lib > div b { font-size: 12px; font-weight: 600; } .ta-lib code { display: block; font-size: 10.5px; color: var(--bl); } .ta-lib small { color: var(--mu); font-size: 10.5px; }
.ta-lib .ta-tag { font-size: 8.5px; text-transform: uppercase; letter-spacing: .08em; }
.ta-lg { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ln2); font-size: 10.5px; color: var(--bl); } .ta-lg em { font: 9px var(--mono); color: var(--mu); font-style: normal; }
.ta-lg i { width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--mu)); } .ta-lg.bl { --c: var(--bl); } .ta-lg.gr { --c: var(--gr); } .ta-lg.pk { --c: var(--pk); } .ta-lg.am { --c: var(--am); } .ta-lg.rd { --c: var(--rd); } .ta-lg.pu { --c: var(--pu); }
.ta-card .ta-filters { margin-bottom: 6px; } .ta-card .ta-filters .ta-in, .ta-card .ta-filters .ta-sel { flex: none; } .ta-card .ta-filters .ta-rng { margin-left: auto; }
.ta-tchart { position: relative; display: grid; grid-template-columns: 70px 1fr; grid-template-rows: 150px auto; margin-top: 8px; }
.ta-yax { display: flex; flex-direction: column; justify-content: space-between; padding-right: 8px; text-align: right; font-size: 9.5px; color: var(--mu); }
.ta-tbars { display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--ln2); background: repeating-linear-gradient(0deg, transparent 0 29px, var(--ln) 29px 30px); }
.ta-tbars i { flex: 1; height: 100%; display: flex; flex-direction: column-reverse; } .ta-tbars b { height: var(--h); } .ta-tbars .c0 { background: #a78bfa; } .ta-tbars .c1 { background: #ef4444; } .ta-tbars .c2 { background: #3b82f6; } .ta-tbars .c3 { background: #f59e0b; }
.ta-xax { grid-column: 2; display: flex; justify-content: space-between; padding-top: 3px; font-size: 9.5px; color: var(--mu); }
.ta-az { display: inline-flex; padding: 2px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--ln2); margin-left: auto; } .ta-az i { font-style: normal; padding: 2px 8px; font-size: 10.5px; color: var(--mu); } .ta-az i.on { color: var(--bl); background: var(--sel); border-radius: 4px; }
.ta-tbl.tl .ta-tr { align-items: start; padding: 10px 12px; } .ta-tbl.tl .ta-tr > span { white-space: normal; font-size: 11px; } .ta-tbl.tl .ta-tr > span b { display: block; margin-bottom: 4px; font-size: 12px; } .ta-tbl.tl small { display: block; margin-top: 4px; font-size: 10.5px; color: var(--mu); }
.ta-kv.tl { font-size: 10.5px; gap: 2px 12px; } .ta-kv.tl b { font-size: 10px; white-space: normal; word-break: break-all; }
.ta-stx { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 14px 18px; overflow: hidden; background: var(--pn2); }
.ta-sth { display: flex; justify-content: space-between; gap: 20px; } .ta-sth > div > small { font: 600 10px var(--mono); color: var(--am); letter-spacing: .12em; text-transform: uppercase; }
.ta-sth h4 { margin-top: 6px; font: 400 27px/1.15 Georgia, "Times New Roman", serif; max-width: 460px; }
.ta-hosts { max-width: 470px; text-align: right; font: 10px var(--mono); } .ta-hosts p { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; margin-bottom: 4px; } .ta-hosts code { padding: 2px 6px; border-radius: 4px; font-size: 10px; background: var(--pn); box-shadow: inset 0 0 0 1px var(--ln2); }
.ta-hosts > small { display: block; font-size: 8.5px; color: var(--mu); letter-spacing: .12em; text-transform: uppercase; margin-top: 4px; } .ta-hosts > b { display: block; font-weight: 400; font-size: 10.5px; }
.ta-stc { display: flex; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--ln); } .ta-stc span { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 4px; background: var(--pn); box-shadow: inset 0 0 0 1px var(--ln2); font: 600 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mu); }
.ta-stc b { font: 400 18px Georgia, serif; color: var(--ink); letter-spacing: 0; } .ta-stc .o b { color: var(--or); }
.ta-stb { display: flex; gap: 6px; } .ta-stb .amb { margin-left: auto; }
.ta-seg3 { display: inline-flex; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--ln2); background: var(--pn); margin-right: 8px; } .ta-seg3 i { font-style: normal; padding: 5px 12px; font-size: 11px; color: var(--mu); } .ta-seg3 i.on { color: var(--or); background: color-mix(in srgb, var(--or) 9%, var(--pn)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--or) 45%, transparent); border-radius: 6px; }
.ta-seg3 sup { font-size: 7px; }
.ta-stg { flex: 1; min-height: 0; display: grid; grid-template-columns: 290px 1fr; gap: 16px; }
.ta-chap { border-radius: 6px; box-shadow: inset 0 0 0 1px var(--ln2); background: var(--pn); overflow: hidden; }
.ta-chap h6 { display: flex; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid var(--ln); font: 600 9.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mu); }
.ta-chap > div { border-bottom: 1px solid var(--ln); box-shadow: inset 3px 0 0 var(--c); } .ta-chap > div.on { background: var(--sel); }
.ta-chap > div > p:first-child { display: flex; gap: 10px; padding: 7px 12px 5px; } .ta-chap > div > p:first-child i { width: 26px; font: italic 17px Georgia, serif; color: var(--c); }
.ta-chap > div > p:first-child b { flex: 1; font: 400 13.5px Georgia, serif; } .ta-chap b small { display: block; font: 8.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mu); } .ta-chap em { font: 10px var(--mono); color: var(--mu); font-style: normal; }
.ta-chap p.ev { display: flex; gap: 8px; padding: 2px 12px 5px 44px; font-size: 10.5px; line-height: 1.35; } .ta-chap p.ev small { flex: none; font: 9px var(--mono); color: var(--mu); } .ta-chap p.ev .ta-tag { padding: 0 4px; font-size: 8px; }
.ta-chap .g { --c: #94a3b8; } .ta-chap .o { --c: #f97316; } .ta-chap .b { --c: #38bdf8; } .ta-chap .gr { --c: #22c55e; } .ta-chap .y { --c: #eab308; }
.ta-chd { border-radius: 6px; box-shadow: inset 0 0 0 1px var(--ln2); background: var(--pn); overflow: hidden; }
.ta-chh { display: flex; gap: 22px; align-items: flex-start; padding: 12px 20px; box-shadow: inset 3px 0 0 var(--c); } .ta-chh.g { --c: #94a3b8; background: var(--pn2); } .ta-chh.o { --c: #f97316; background: color-mix(in srgb, #f97316 6%, var(--pn)); }
.ta-chh > i { font: italic 44px/1 Georgia, serif; color: var(--c); width: 40px; } .ta-chh > div { flex: 1; } .ta-chh small { font: 600 9px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--c); }
.ta-chh b { display: block; font: 400 22px Georgia, serif; } .ta-chh b em { font-style: italic; color: var(--mu); } .ta-chh p { font: italic 12px Georgia, serif; color: var(--mu); margin-top: 3px; }
.ta-chh > span { text-align: right; } .ta-chh > span b { font: italic 22px Georgia, serif; } .ta-chh > span small { display: block; color: var(--mu); font-size: 8.5px; margin-top: 2px; }
.ta-ev { display: flex; gap: 14px; padding: 12px 20px; border-top: 1px solid var(--ln); } .ta-ev > small.t { flex: none; width: 56px; font: 9px var(--mono); color: var(--mu); text-align: right; text-transform: uppercase; }
.ta-ev > div > small { font: 600 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mu); } .ta-ev > div > b { display: block; margin: 3px 0; font: 400 16px Georgia, serif; } .ta-ev > div > b em { color: var(--mu); font-size: 14px; }
.ta-ev > div > p { max-width: 560px; margin-bottom: 6px; font: 12.5px/1.5 Georgia, serif; } .ta-ev .ta-btn { margin-right: 4px; } .ta-ev .ta-mut { font: 9.5px var(--mono); }
.ta-chf { display: flex; justify-content: space-between; padding: 8px 20px; border-top: 1px solid var(--ln); background: var(--pn2); font: 9.5px var(--mono); color: var(--mu); }
.ta-anote { margin-top: 8px; max-width: 520px; padding: 8px 12px; font: italic 12px Georgia, serif; background: color-mix(in srgb, var(--am) 10%, var(--pn)); box-shadow: inset 3px 0 0 var(--am); }
.ta-anote small { font: 700 8.5px var(--mono); font-style: normal; color: var(--am); letter-spacing: .1em; text-transform: uppercase; }
/* ---------- ThreatResponder for MSSPs + Integrations (after the DFIR toolbox) ---------- */
.igx { --head: #fff; --ink: #dfe6ff; --mut: #aab6e2; --card: rgba(255, 255, 255, .05); --card-line: rgba(174, 188, 239, .18); --line: rgba(174, 188, 239, .16);
  --tile: rgba(255, 255, 255, .07); --acc: #6ea0ff; --bar: #ff5a61; --ok: #3ecf8e; --warn: #f2b634;
  --app: #0f1a3d; --app2: #142150; --app-line: rgba(174, 188, 239, .16);
  position: relative; padding: clamp(70px, 5.6vw, 100px) 0; color: var(--ink);
  background: radial-gradient(45% 55% at 85% 20%, rgba(70, 110, 230, .22), transparent 70%), linear-gradient(180deg, #13225a, #0f1c4d); }
.igx.lt { --head: #0f1c4d; --ink: #1f2747; --mut: #5c6488; --card: #fff; --card-line: #e1e6f2; --line: #e3e8f3; --tile: #eef2fa; --acc: #2f6fed; --bar: #e0343c; --ok: #13936a; --warn: #b7791f;
  --app: #fff; --app2: #f6f8fc; --app-line: #e4e8f1;
  background: radial-gradient(45% 55% at 85% 20%, #e3ebfb, transparent 70%), linear-gradient(180deg, #f7f9fd, #eef2f9); }
.igx-in { width: min(1680px, 100% - 2 * var(--gut)); margin-inline: auto; }
.igx svg { width: 18px; height: 18px; }
.igx-top { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 3.4vw, 64px); align-items: start; }
/* left: the MSSP story */
.igx-kick { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; font-size: 12px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--acc); }
.igx-kick::before { content: ""; width: 44px; height: 2px; background: currentColor; }
.igx h2 { font-size: clamp(34px, 2.6vw, 48px); font-weight: 900; line-height: 1.06; letter-spacing: -.015em; color: var(--head); }
.igx h2 em { font-style: normal; color: var(--acc); }
.igx-lead { margin-top: 20px; max-width: 600px; font-size: clamp(16px, 1.15vw, 18.5px); line-height: 1.6; color: var(--mut); }
.igx-pills { display: grid; gap: 10px; margin-top: 26px; }
.igx-pills > div { display: flex; align-items: center; gap: 14px; padding: 11px 16px; border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-line); }
.igx-pills span { flex: none; width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; color: var(--acc); background: color-mix(in srgb, var(--acc) 14%, transparent); }
.igx-pills b { display: block; font-size: 15px; font-weight: 800; color: var(--head); } .igx-pills small { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: var(--mut); }
.igx-ctas { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 26px; margin-top: 26px; }
.igx-cta { display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: 10px; font-size: 15px; font-weight: 800; color: #fff; background: var(--bar); text-decoration: none; }
.igx-link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--acc); text-decoration: none; }
.igx-cta svg, .igx-link svg { width: 17px; height: 17px; }
/* right: flow, the Integrations page, destinations */
.igx-flow { display: flex; align-items: stretch; margin-bottom: 16px; }
.igx-node { flex: 1 1 0; min-width: 0; display: grid; justify-items: center; align-content: start; gap: 4px; padding: 14px 8px 12px; border-radius: 12px; text-align: center; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-line); transition: box-shadow .35s, background .35s; }
.igx-node > span { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: var(--acc); background: color-mix(in srgb, var(--acc) 13%, transparent); }
.igx-node.tr > span { background: none; } .igx-node .tr-mark { --h: 34px; }
.igx-node b { font-size: 13px; font-weight: 800; color: var(--head); line-height: 1.25; } .igx-node small { font-size: 11.5px; color: var(--mut); }
.igx-node.lit { box-shadow: inset 0 0 0 1.5px var(--acc), 0 10px 26px color-mix(in srgb, var(--acc) 22%, transparent); background: color-mix(in srgb, var(--acc) 8%, var(--card)); }
.igx-wire { position: relative; flex: 0 0 clamp(14px, 1.4vw, 26px); align-self: center; height: 2px; background: var(--line); overflow: hidden; }
.igx-wire b { position: absolute; top: 0; left: -40%; width: 40%; height: 100%; background: var(--acc); opacity: 0; }
.igx-wire.run b { opacity: 1; animation: igx-run .45s linear forwards; }
@keyframes igx-run { to { left: 100%; } }
.igx-app { border-radius: 14px; padding: 14px 18px 12px; background: var(--app); box-shadow: inset 0 0 0 1px var(--app-line), 0 28px 60px rgba(3, 10, 35, .28); }
.igx.lt .igx-app { box-shadow: inset 0 0 0 1px var(--app-line), 0 22px 50px rgba(15, 28, 77, .1); }
.igx-ah { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.igx-ah b { display: block; font-size: 19px; font-weight: 800; color: var(--head); } .igx-ah small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--mut); }
.igx-ctx { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--acc); background: color-mix(in srgb, var(--acc) 12%, transparent); }
.igx-ctx svg { width: 14px; height: 14px; }
.igx-tabs { display: flex; gap: 4px; margin: 10px 0 10px; border-bottom: 1px solid var(--app-line); }
.igx-tabs span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; font-size: 12.5px; font-weight: 600; color: var(--mut); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.igx-tabs span svg { width: 14px; height: 14px; } .igx-tabs span.on { color: var(--acc); border-bottom-color: var(--acc); }
.igx-tabs i { font-style: normal; font-size: 10px; font-weight: 800; padding: 0 6px; border-radius: 999px; background: var(--tile); }
.igx-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.igx-bar b { display: block; font-size: 13.5px; color: var(--head); } .igx-bar small { display: block; font-size: 11.5px; color: var(--mut); }
.igx-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; font-size: 12px; font-weight: 800; color: #fff; background: #2f6fed; }
.igx-btn svg { width: 14px; height: 14px; }
.igx-search { display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; padding: 7px 10px; border-radius: 8px; font-size: 12px; color: var(--mut); background: var(--app2); box-shadow: inset 0 0 0 1px var(--app-line); }
.igx-search svg { width: 14px; height: 14px; }
.igx-row { position: relative; display: grid; grid-template-columns: 30px 1fr auto 104px; gap: 2px 12px; align-items: center; padding: 6px 8px; border-bottom: 1px solid var(--app-line); border-radius: 8px; transition: background .35s; }
.igx-row:last-child { border-bottom: 0; }
.igx-row p b { display: block; font-size: 13px; font-weight: 700; color: var(--head); } .igx-row p small { display: block; font-size: 11.5px; color: var(--mut); }
.igx-scope { font-size: 11.5px; color: var(--mut); padding: 2px 8px; border-radius: 6px; background: var(--tile); white-space: nowrap; }
.igx-st { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--ok); }
.igx-st i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent); }
.igx-st.pause { color: var(--warn); }
.igx-ev { grid-column: 2 / -1; font-style: normal; font: 11px "JetBrains Mono", Consolas, monospace; color: var(--acc); height: 0; overflow: hidden; opacity: 0; transition: height .35s, opacity .35s; }
.igx-row.hit { background: color-mix(in srgb, var(--acc) 8%, transparent); }
.igx-row.hit .igx-ev { height: 16px; opacity: 1; }
.igx-note { margin-top: 8px; font-size: 11.5px; color: var(--mut); }
.igx-mono { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font: 800 12px/1 Inter, system-ui, sans-serif; font-style: normal; color: #fff; background: var(--c); }
.igx-mono svg { width: 15px; height: 15px; }
.igx-dh { margin: clamp(24px, 2vw, 34px) 0 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--acc); }
.igx-dest { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.igx-dest > div { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-line); min-width: 0; }
.igx-dest b { display: block; font-size: 13px; font-weight: 800; color: var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .igx-dest small { display: block; font-size: 11.5px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* four cards */
.igx-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 20px); margin-top: clamp(14px, 1.2vw, 20px); }
.igx-cards article { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 4px 16px; padding: 18px 22px 20px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-line); }
.igx-cards span { grid-row: span 2; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--acc); background: color-mix(in srgb, var(--acc) 13%, transparent); }
.igx-cards span svg { width: 22px; height: 22px; }
.igx-cards em { position: absolute; right: 20px; top: 20px; font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--mut); }
.igx-cards h3 { margin: 2px 30px 0 0; font-size: 17px; font-weight: 800; color: var(--head); }
.igx-cards p { font-size: 14px; line-height: 1.55; color: var(--mut); }
@media (max-width: 1500px) { .igx-dest { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1280px) { .igx-top { grid-template-columns: 1fr; } .igx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .igx-flow { flex-wrap: wrap; gap: 8px; } .igx-wire { display: none; } .igx-node { flex-basis: 30%; } .igx-dest { grid-template-columns: repeat(2, minmax(0, 1fr)); } .igx-cards { grid-template-columns: 1fr; } .igx-row { grid-template-columns: 30px 1fr; } .igx-scope, .igx-st { grid-column: 2; } }
@media (prefers-reduced-motion: reduce) { .igx-wire.run b { animation: none; } }