:root { --bg: #0f172a; --surface: #1e293b; --surface-border: #334155; --text-main: #e2e8f0; --text-muted: #94a3b8; --primary: #38bdf8; --accent: #f59e0b; --exam: #38bdf8; --support: #a78bfa; --exam-bg: rgba(56, 189, 248, 0.12); --support-bg: rgba(167, 139, 250, 0.10); --flash: rgba(245, 158, 11, 0.45); } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: var(--bg); color: var(--text-main); line-height: 1.75; display: flex; justify-content: center; } .layout { display: grid; grid-template-columns: 1fr 340px; max-width: 1280px; width: 100%; min-height: 100vh; gap: 1.75rem; padding: 2rem 1.25rem; } main { background: var(--surface); border: 1px solid var(--surface-border); border-radius: 12px; padding: 2.75rem 2.5rem; min-width: 0; } h1 { font-size: 2rem; color: #fff; margin-bottom: 0.4rem; letter-spacing: -0.02em; line-height: 1.25; } .byline { color: var(--text-muted); font-size: 0.92rem; margin-bottom: 0.65rem; } .byline-note { color: var(--text-muted); font-size: 0.82rem; margin-bottom: 1.75rem; border-bottom: 1px solid var(--surface-border); padding-bottom: 1.1rem; } h2 { font-size: 1.28rem; color: var(--primary); margin-top: 2.5rem; margin-bottom: 1rem; padding-bottom: 0.3rem; border-bottom: 1px solid rgba(51, 65, 85, 0.6); line-height: 1.35; } p { margin-bottom: 1.2rem; font-size: 1.02rem; } code { background: rgba(0, 0, 0, 0.35); padding: 1px 5px; border-radius: 4px; font-family: Consolas, Monaco, "Courier New", monospace; color: #f1f5f9; font-size: 0.88em; border: 1px solid rgba(255, 255, 255, 0.08); } /* Prose marks, not hyperlinks: soft tint only so readers keep sentence context */ .term { cursor: inherit; font-weight: inherit; border-radius: 3px; padding: 0 2px; border-bottom: none; text-decoration: none; transition: background 0.15s, box-shadow 0.15s; } .term.exam { color: inherit; background: var(--exam-bg); } .term.support { color: inherit; background: var(--support-bg); } .term.exam:hover { background: rgba(56, 189, 248, 0.28); } .term.support:hover { background: rgba(167, 139, 250, 0.22); } .term.flash { background: var(--flash) !important; box-shadow: 0 0 0 3px var(--flash); } /* Exam-only filter: support marks become plain/muted unmarked */ body.filter-exam-only .term.support { color: inherit; background: transparent; border-bottom: none; cursor: inherit; font-weight: inherit; padding: 0; } body.filter-exam-only .term.support:hover { background: transparent; } #tooltip { position: absolute; display: none; background: #0f172a; border: 1px solid var(--primary); box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.7); border-radius: 8px; padding: 0.95rem 1.05rem; width: 320px; max-width: calc(100vw - 24px); z-index: 1000; pointer-events: none; font-size: 0.88rem; line-height: 1.45; } #tooltip.tier-support { border-color: var(--support); } #tooltip .tt-tier { display: inline-block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 6px; border-radius: 4px; margin-bottom: 0.45rem; font-weight: 600; } #tooltip .tt-tier.exam { background: rgba(56, 189, 248, 0.18); color: var(--exam); } #tooltip .tt-tier.support { background: rgba(167, 139, 250, 0.18); color: var(--support); } #tooltip .tt-title { font-weight: 700; color: #fff; font-size: 0.98rem; margin-bottom: 0.35rem; } #tooltip .tt-body { color: var(--text-main); } #tooltip .tt-context { color: var(--text-muted); margin-top: 0.45rem; font-size: 0.84rem; } aside { position: sticky; top: 1.25rem; height: calc(100vh - 2.5rem); background: var(--surface); border: 1px solid var(--surface-border); border-radius: 12px; padding: 1.25rem; display: flex; flex-direction: column; min-height: 0; } aside h3 { font-size: 1.05rem; margin-bottom: 0.35rem; color: #fff; } .sidebar-meta { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.75rem; } .filter-bar { display: flex; gap: 0.4rem; margin-bottom: 0.75rem; } .filter-bar button { flex: 1; padding: 0.45rem 0.5rem; border-radius: 6px; border: 1px solid var(--surface-border); background: #0f172a; color: var(--text-muted); font-size: 0.8rem; font-weight: 600; cursor: pointer; } .filter-bar button.active { border-color: var(--primary); color: #fff; background: rgba(56, 189, 248, 0.15); } #search-box { width: 100%; padding: 0.55rem 0.7rem; background: #0f172a; border: 1px solid var(--surface-border); border-radius: 6px; color: #fff; font-size: 0.86rem; margin-bottom: 0.75rem; } #search-box:focus { outline: 1px solid var(--primary); } .term-list { overflow-y: auto; flex: 1 1 auto; min-height: 0; padding-right: 2px; } .term-item { padding: 0.45rem 0.5rem; border-radius: 6px; cursor: pointer; font-size: 0.84rem; color: var(--text-muted); display: flex; justify-content: space-between; align-items: center; gap: 0.4rem; transition: background 0.15s; } .term-item:hover, .term-item.selected { background: #334155; color: #fff; } .term-item .badge { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.04em; flex-shrink: 0; padding: 1px 5px; border-radius: 3px; font-weight: 600; } .term-item .badge.exam { color: var(--exam); background: rgba(56, 189, 248, 0.12); } .term-item .badge.support { color: var(--support); background: rgba(167, 139, 250, 0.12); } .detail-panel { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--surface-border); flex: 0 0 auto; max-height: 42%; overflow-y: auto; } .detail-panel.empty { color: var(--text-muted); font-size: 0.8rem; } .detail-panel .d-title { font-weight: 700; color: #fff; font-size: 0.95rem; margin-bottom: 0.25rem; } .detail-panel .d-tier { display: inline-block; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 1px 6px; border-radius: 3px; margin-bottom: 0.45rem; font-weight: 600; } .detail-panel .d-tier.exam { background: rgba(56, 189, 248, 0.18); color: var(--exam); } .detail-panel .d-tier.support { background: rgba(167, 139, 250, 0.18); color: var(--support); } .detail-panel .d-def { font-size: 0.84rem; margin-bottom: 0.4rem; } .detail-panel .d-context { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.45rem; } .detail-panel .d-tags { font-size: 0.72rem; color: var(--accent); margin-bottom: 0.35rem; } .detail-panel .d-refs { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.35rem; } .detail-panel .d-refs li { margin-left: 1rem; margin-bottom: 0.2rem; } .legend { display: flex; gap: 0.85rem; font-size: 0.72rem; color: var(--text-muted); margin-bottom: 0.65rem; } .legend span::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: middle; } .legend .lg-exam::before { background: var(--exam-bg); box-shadow: inset 0 0 0 1px var(--exam); } .legend .lg-support::before { background: var(--support-bg); box-shadow: inset 0 0 0 1px var(--support); } @media (max-width: 960px) { .layout { grid-template-columns: 1fr; padding: 1rem; } aside { position: relative; top: 0; height: auto; max-height: none; } .term-list { max-height: 280px; } main { padding: 1.5rem 1.15rem; } h1 { font-size: 1.55rem; } }


/* Scene artifacts — tickets, consoles, dialogs, tables. Author in narrative.md fences. */
.artifact { margin: 0 0 1.45rem; }
.artifact figcaption {
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 0.4rem; font-weight: 600;
}
.artifact .term { font-size: inherit; }

.ticket-chrome, .alert-chrome, .gui-window, .console-body, .table-wrap, .proc-tree, .cert-chain, .meter-row {
  border: 1px solid var(--surface-border); border-radius: 8px; background: #0b1220;
  overflow: hidden;
}
.ticket-bar, .alert-bar, .gui-chrome {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.75rem;
  background: #111827; border-bottom: 1px solid var(--surface-border); font-size: 0.78rem;
}
.ticket-id, .alert-product { font-family: Consolas, Monaco, "Courier New", monospace; color: var(--primary); font-weight: 700; }
.ticket-status { margin-left: auto; color: var(--text-muted); }
.pri, .sev {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
}
.pri.high, .sev.high { background: rgba(239,68,68,0.18); color: #fca5a5; }
.pri.medium, .pri.med, .sev.medium { background: rgba(245,158,11,0.18); color: #fbbf24; }
.pri.low, .sev.low { background: rgba(52,211,153,0.15); color: #6ee7b7; }
.ticket-subject, .alert-title { padding: 0.7rem 0.85rem 0.2rem; font-weight: 650; color: #fff; font-size: 1.02rem; }
.ticket-meta, .alert-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem 1rem; padding: 0.65rem 0.85rem 0.9rem; }
.ticket-meta dt, .alert-meta dt { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.ticket-meta dd, .alert-meta dd { font-size: 0.88rem; color: var(--text-main); }
.alert-chrome > p { padding: 0 0.85rem 0.85rem; font-size: 0.9rem; color: var(--text-muted); }

.console-body {
  margin: 0; padding: 0.85rem 1rem; font-family: Consolas, Monaco, "Courier New", monospace;
  font-size: 0.82rem; line-height: 1.55; color: #d1fae5; white-space: pre-wrap; overflow-x: auto;
}
.console-body .cmd { color: #fde68a; }
.console-body .cmt { color: #64748b; }
.console-body .out { color: #cbd5e1; }

.gui-window { background: #1e293b; }
.gui-chrome { font-family: Consolas, Monaco, "Courier New", monospace; color: var(--text-muted); font-size: 0.75rem; }
.gui-body { display: grid; grid-template-columns: auto 1fr; gap: 0.85rem; padding: 1rem 1.1rem 0.4rem; }
.gui-icon { width: 42px; height: 42px; border-radius: 50%; background: #f59e0b; position: relative; }
.gui-icon::before { content: "!"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #111; font-size: 1.4rem; }
.kind-cert-warning .gui-icon, .kind-danger .gui-icon, .kind-ransomware .gui-icon { background: #ef4444; }
.kind-cert-warning .gui-icon::before, .kind-danger .gui-icon::before { content: "!"; color: #fff; }
.kind-ransomware .gui-icon::before { content: "🔒"; font-size: 1.1rem; }
.gui-copy h3 { color: #fff; font-size: 1.05rem; margin: 0 0 0.4rem; border: 0; padding: 0; }
.gui-copy p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 0.6rem; }
.gui-row { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.8rem; padding: 0.2rem 0; border-top: 1px solid rgba(51,65,85,0.5); }
.gui-row span { color: var(--text-muted); }
.gui-row strong { font-weight: 600; color: #e2e8f0; font-size: 0.8rem; }
.gui-actions { display: flex; justify-content: flex-end; gap: 0.4rem; padding: 0.7rem 1rem 0.9rem; }
.gui-actions button {
  pointer-events: none; padding: 0.35rem 0.75rem; border-radius: 6px; border: 1px solid var(--surface-border);
  background: #0f172a; color: var(--text-main); font-size: 0.8rem;
}
.gui-actions button:last-child { background: rgba(56,189,248,0.15); border-color: var(--primary); color: #fff; }

.proc-tree { list-style: none; padding: 0.7rem 0.9rem; margin: 0; font-family: Consolas, Monaco, "Courier New", monospace; font-size: 0.82rem; }
.proc-tree li { position: relative; padding: 0.18rem 0 0.18rem calc(var(--d, 0) * 1.15rem); color: #e2e8f0; }
.proc-tree li::before { content: "↳"; color: #64748b; margin-right: 0.35rem; }
.proc-tree li.d0::before { content: "•"; color: var(--primary); }

.cert-chain { list-style: none; padding: 0.6rem; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.cert-chain li {
  display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 0.8rem; padding: 0.55rem 0.7rem;
  border-radius: 6px; border: 1px solid var(--surface-border); background: #111827;
}
.cert-chain li + li { position: relative; }
.cert-chain li + li::before {
  content: ""; position: absolute; top: -0.45rem; left: 1.4rem; width: 2px; height: 0.45rem; background: #475569;
}
.chain-name { font-weight: 650; color: #fff; font-size: 0.9rem; }
.chain-state { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; align-self: start; padding: 2px 6px; border-radius: 4px; }
.chain-note { grid-column: 1 / -1; font-size: 0.78rem; color: var(--text-muted); }
.cert-chain .trusted .chain-state, .cert-chain .ok .chain-state { background: rgba(52,211,153,0.15); color: #6ee7b7; }
.cert-chain .missing .chain-state, .cert-chain .broken .chain-state { background: rgba(245,158,11,0.18); color: #fbbf24; }
.cert-chain .expired .chain-state, .cert-chain .mismatch .chain-state, .cert-chain .selfsigned .chain-state, .cert-chain .bad .chain-state {
  background: rgba(239,68,68,0.18); color: #fca5a5;
}

.table-wrap { overflow-x: auto; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.table-wrap th { text-align: left; font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--surface-border); background: #111827; }
.table-wrap td { padding: 0.55rem 0.75rem; border-bottom: 1px solid rgba(51,65,85,0.5); vertical-align: top; }
.table-wrap tr:last-child td { border-bottom: 0; }

.meter-row { display: grid; grid-template-columns: minmax(7rem,auto) 1fr auto; gap: 0.7rem; align-items: center; padding: 0.75rem 0.9rem; }
.meter-label { font-size: 0.85rem; }
.meter-track { height: 10px; background: #1e293b; border-radius: 999px; overflow: hidden; }
.meter-fill { display: block; height: 100%; background: linear-gradient(90deg, #f59e0b, #ef4444); }
.meter-val { font-family: Consolas, Monaco, "Courier New", monospace; font-size: 0.85rem; color: #fca5a5; }
.meter-note { font-size: 0.82rem; color: var(--text-muted); padding: 0 0.9rem 0.75rem; margin: 0; }

@media (max-width: 640px) {
  .ticket-meta, .alert-meta { grid-template-columns: 1fr; }
  .gui-body { grid-template-columns: 1fr; }
  .meter-row { grid-template-columns: 1fr auto; }
  .meter-label { grid-column: 1 / -1; }
}

/* Scene break (`* * *` on its own line in narrative.md): a small time skip, no heading. */
hr.scene-break { border: none; text-align: center; margin: 2rem 0; color: var(--text-muted); }
hr.scene-break::after { content: "\2042"; font-size: 1.1rem; letter-spacing: 0.2em; }

/* Formula bar (```formula fence): DAX or Excel formulas, one bar per line. */
.formula-body { border: 1px solid var(--surface-border); border-radius: 8px; background: #0b1220; overflow: hidden; }
.f-bar { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--surface-border); }
.f-bar:last-child { border-bottom: none; }
.f-icons { flex: 0 0 auto; font-size: 0.75rem; color: #64748b; letter-spacing: 0.1em; user-select: none; }
.f-icons i { font-family: Georgia, serif; font-style: italic; color: #94a3b8; }
.f-code { flex: 1 1 auto; font-family: Consolas, Monaco, "Courier New", monospace; font-size: 0.88rem; color: #e2e8f0; white-space: pre-wrap; overflow-wrap: anywhere; background: none; border: none; padding: 0; }
.f-name { color: #fde68a; font-weight: 600; }
.f-fn { color: #7dd3fc; font-weight: 600; }
.f-ref { color: #c4b5fd; }
.f-num, .f-str { color: #86efac; }
.f-result { padding: 0.35rem 0.75rem 0.55rem 3.4rem; font-size: 0.82rem; color: var(--text-muted); border-bottom: 1px solid var(--surface-border); }
.f-result:last-child { border-bottom: none; }
.f-result::before { content: "→ "; color: var(--primary); }

/* Numbered panel (```steps fence): Applied Steps, a process; "> " marks the current step. */
.steps-list { list-style: none; counter-reset: step; margin: 0; padding: 0.55rem 0.75rem; border: 1px solid var(--surface-border); border-radius: 8px; background: #0b1220; }
.steps-list li { counter-increment: step; position: relative; padding: 0.3rem 0.5rem 0.3rem 2.1rem; font-size: 0.88rem; color: #cbd5e1; border-radius: 6px; }
.steps-list li::before { content: counter(step); position: absolute; left: 0.45rem; top: 0.32rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: #1e293b; color: var(--text-muted); font-size: 0.72rem; text-align: center; line-height: 1.25rem; }
.steps-list li.current { background: rgba(56, 189, 248, 0.12); color: #fff; }
.steps-list li.current::before { background: var(--primary); color: #0b1220; font-weight: 700; }

/* Bridge card: links narrative units to companion operational workbenches */
.bridge-card {
  margin: 2.25rem 0;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-left: 5px solid var(--primary);
  border-radius: 8px;
  box-shadow: 0 4px 15px -2px rgba(0, 0, 0, 0.4);
}
.bridge-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.bridge-badge {
  color: #fff;
  background: rgba(56, 189, 248, 0.2);
  border: 1px solid var(--primary);
  padding: 2px 8px;
  border-radius: 4px;
}
.bridge-domain {
  color: var(--accent);
}
.bridge-title {
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}
.bridge-title a {
  color: #fff;
  text-decoration: none;
}
.bridge-title a:hover {
  color: var(--primary);
  text-decoration: underline;
}
.bridge-desc {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.55;
  margin-bottom: 0.85rem;
}
.bridge-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 0.75rem;
}
.bridge-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.1rem;
  background: var(--primary);
  color: #0b1220;
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s, transform 0.1s;
}
.bridge-btn:hover {
  background: #7dd3fc;
  transform: translateY(-1px);
}