/* ============================================================
   Semco × QAECY workshop deck.
   reveal.js at 1280×720. Slides with data-scene="…" are transparent
   and show the 3D canvas (#three) behind them; all other slides set
   their own background colour.
   ============================================================ */
:root {
  --blue: #2859e1; --dblue: #1744c2; --lime: #e2f552; --turq: #00cacc;
  --ink: #121c2b; --ink2: #0e1827; --mid: #8394b0; --dmid: #404955; --line: #dde1e8;
  --canvas: #f5f6f9; --navy: #0b1220; --tint: rgba(40, 89, 225, .08);
  --ok: #22a366; --bad: #d9434f; --warn: #e5a012;
  --k-asset: #2859e1; --k-doc: #00a3a5; --k-req: #d9434f; --k-erp: #ee6c35; --k-crm: #7b5cfa; --k-sched: #e5a012; --k-loc: #22a366; --k-person: #e0569a;
  --shadow: 0 1px 1.5em rgba(18, 28, 43, .08);
}
html, body, .reveal-viewport { background: var(--canvas); }
.reveal { font-family: Poppins, system-ui, sans-serif; color: var(--ink); z-index: 1; }
.reveal .slides { text-align: left; }
.reveal .slides > section { padding: 52px 72px !important; box-sizing: border-box; height: 720px; font-size: 21px; line-height: 1.5; }
.reveal h1, .reveal h2, .reveal h3, .reveal h4 { font-family: Poppins, sans-serif; color: inherit; text-transform: none; letter-spacing: -.01em; margin: 0; text-shadow: none; }
.reveal h1 { font-size: 68px; line-height: 1.04; font-weight: 700; }
.reveal h2 { font-size: 42px; line-height: 1.14; font-weight: 700; margin-bottom: 14px; }
.reveal h3 { font-size: 22px; line-height: 1.3; font-weight: 600; }
.reveal p { margin: 0; }
.reveal b, .reveal strong { font-weight: 600; }
.reveal ul { margin: 0; padding-left: 1.1em; }
.reveal li { margin: .35em 0; }
.reveal li::marker { color: var(--blue); }
.reveal .controls { color: var(--blue); }
.reveal .progress { color: var(--blue); }
.reveal .slide-number { background: transparent; color: var(--mid); font-family: Poppins; font-size: 12px; }

.kick { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; }
.kick .n { width: 26px; height: 26px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-size: 12px; letter-spacing: 0; }
.lead { font-size: 22px; line-height: 1.5; color: var(--dmid); max-width: 34em; }
.small { font-size: 15px; line-height: 1.5; }
.tiny { font-size: 12.5px; line-height: 1.45; }
.muted { color: var(--mid); }
.hl { color: var(--blue); }
.row { display: flex; align-items: center; gap: 12px; }
.col { display: flex; flex-direction: column; gap: 12px; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: 1fr 1fr; } .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); }
.abs { position: absolute; }
.foot { position: absolute; left: 72px; right: 72px; bottom: 26px; font-size: 13px; color: var(--mid); }

/* dark & over-3D slides */
section.has-dark-background, section.over { color: #fff; }
.has-dark-background .lead, .over .lead { color: rgba(255, 255, 255, .78); }
.has-dark-background .kick, .over .kick { color: var(--lime); }
.has-dark-background .kick .n, .over .kick .n { background: var(--lime); color: var(--ink); }
.has-dark-background .hl, .over .hl { color: var(--lime); }
.has-dark-background .muted, .over .muted { color: rgba(255, 255, 255, .55); }
.has-dark-background li::marker, .over li::marker { color: var(--lime); }
.over h1, .over h2 { text-shadow: 0 2px 30px rgba(0, 0, 0, .45); }

/* surfaces */
.card { background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); padding: 20px 22px; }
.has-dark-background .card { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); box-shadow: none; }
.glass { background: rgba(6, 14, 32, .66); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .12); border-radius: 24px; padding: 26px 30px; color: #fff; }
.glass .lead { font-size: 19px; }
.glass ul { font-size: 18px; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px; font-size: 13px; line-height: 1.4; background: #fff; color: var(--dmid); white-space: nowrap; font-weight: 500; }
.chip.b { background: var(--tint); border-color: transparent; color: var(--blue); }
.chip.lime { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--blue)); }
.has-dark-background .chip, .over .chip { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); color: #dfe6f5; }
.has-dark-background .chip.lime, .over .chip.lime { background: var(--lime); color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
svg.i { width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.14em; flex: none; }
.ic { width: 46px; height: 46px; border-radius: 14px; background: var(--tint); color: var(--blue); display: grid; place-items: center; flex: none; font-size: 24px; }
.ic.sm { width: 36px; height: 36px; border-radius: 11px; font-size: 19px; }
.ic.lime { background: var(--lime); color: var(--ink); }
.has-dark-background .ic, .over .ic { background: rgba(127, 160, 255, .14); color: #afc3ff; }
.has-dark-background .ic.lime, .over .ic.lime { background: var(--lime); color: var(--ink); }

/* 3D layer */
#three { position: fixed; inset: 0; z-index: 0; opacity: 0; transition: opacity .42s ease; pointer-events: none; background: #050a15; }
#three.on { opacity: 1; }
#canvas, #labels { position: absolute; inset: 0; }
#labels { overflow: hidden; font-family: Poppins, sans-serif; }
.lbl { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .5s ease; --c: #6f93ff; will-change: transform; }
.lbl.on { opacity: 1; }
.lbl i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 30%, transparent); }
.lbl::before { content: ""; position: absolute; left: -.5px; bottom: 5px; width: 1px; height: 34px; background: linear-gradient(to top, var(--c), transparent); }
.lbl span { position: absolute; bottom: 38px; left: -14px; white-space: nowrap; background: rgba(6, 14, 32, .8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .14); border-left: 3px solid var(--c); border-radius: 10px; padding: 6px 12px; color: #fff; font-size: clamp(11px, .8vw, 16px); line-height: 1.3; }
.lbl b { display: block; font-weight: 600; }
.lbl em { display: block; font-style: normal; color: rgba(255, 255, 255, .66); font-size: .86em; }
.lbl.lime { --c: #e2f552; } .lbl.red { --c: #ff4d5e; } .lbl.amber { --c: #ffb020; } .lbl.green { --c: #3ddc84; } .lbl.turq { --c: #00cacc; } .lbl.pink { --c: #ff5fa8; }
.lbl.node::before { height: 16px; }
.lbl.node i { display: none; }
.lbl.node span { bottom: 18px; transform: translateX(-50%); left: 0; padding: 3px 10px; font-size: clamp(10px, .72vw, 14px); }
.lbl.pred::before, .lbl.pred i { display: none; }
.lbl.pred span { bottom: auto; top: -10px; left: 0; transform: translateX(-50%); background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; color: rgba(190, 205, 240, .7); font-size: clamp(9px, .62vw, 12px); font-style: italic; }
.lbl.pred.hot span { color: var(--lime); font-size: clamp(12px, .9vw, 18px); font-weight: 600; }

/* title & dividers */
.title-block { position: absolute; left: 72px; bottom: 120px; max-width: 820px; }
.title-block h1 { font-size: 76px; }
.logos { position: absolute; left: 72px; bottom: 46px; display: flex; align-items: center; gap: 14px; font-size: 14px; color: rgba(255, 255, 255, .6); }
.logos img { height: 30px; }
.logos img.qaecy { height: 26px; filter: brightness(0) invert(1); opacity: .85; }
.divider { position: absolute; left: 72px; bottom: 96px; max-width: 900px; }
.title-block::before, .divider::before { content: ""; position: absolute; inset: -140px -220px -140px -200px; background: radial-gradient(closest-side, rgba(5, 10, 21, .72), rgba(5, 10, 21, 0)); z-index: -1; pointer-events: none; }
.divider .num { font-size: 140px; font-weight: 800; line-height: .9; color: var(--lime); letter-spacing: -.03em; margin-bottom: 18px; text-shadow: 0 0 40px rgba(226, 245, 82, .25); }

/* client logo: Semco's colour logo on a white tile (their guideline: original colours only) */
.client { background: #fff; border-radius: 12px; padding: 8px 14px; display: inline-flex; align-items: center; }
.client img { height: 32px !important; width: auto; filter: none !important; opacity: 1 !important; }
.logos .x { font-size: 18px; color: rgba(255, 255, 255, .5); margin: 0 4px; }
.corner-logo { position: absolute; right: 72px; top: 44px; height: 46px; }

/* agenda */
.agenda { display: grid; grid-template-columns: 92px 1fr auto; gap: 0 20px; font-size: 19px; }
.agenda > div { padding: 9px 0; border-bottom: 1px solid var(--line); display: flex; align-items: center; }
.agenda .t { color: var(--mid); font-variant-numeric: tabular-nums; }
.agenda .brk { color: var(--mid); font-style: italic; }
.tag { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; }
.tag.i { background: var(--tint); color: var(--blue); }
.tag.e { background: #e9f8ef; color: var(--ok); }
.tag.w { background: var(--lime); color: var(--ink); }

/* team */
.team { display: flex; gap: 34px; margin-top: 26px; }
.team .p { display: flex; align-items: center; gap: 18px; }
.team img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.team b { display: block; font-size: 20px; }
.team span { font-size: 15px; color: var(--mid); }

/* system tiles */
.sys { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 18px; }
.sys .card { padding: 16px 16px 14px; border-radius: 18px; display: flex; flex-direction: column; gap: 8px; }
.sys b { font-size: 17px; }
.sys p { font-size: 13.5px; color: var(--mid); line-height: 1.4; }
.sys .mini { display: flex; gap: 4px; margin-top: auto; }
.sys .mini i { height: 6px; border-radius: 3px; background: var(--c, #c9d0dc); flex: 1; opacity: .7; }
.glue { margin-top: 18px; padding: 14px 20px; border-radius: 18px; border: 1.5px dashed #c9d0dc; display: flex; align-items: center; gap: 14px; font-size: 17px; color: var(--dmid); }
.punch { position: absolute; right: 72px; bottom: 44px; max-width: 540px; background: var(--ink); color: #fff; border-radius: 20px; padding: 18px 22px; font-size: 21px; font-weight: 600; line-height: 1.35; }
.punch span { color: var(--lime); }

/* charts */
svg.chart { width: 100%; height: auto; overflow: visible; font-family: Poppins, sans-serif; }
#lifeline .lbl-row { font-size: 15px; fill: var(--dmid); font-weight: 500; }
#lifeline .lbl-row.strong { fill: var(--blue); font-weight: 700; font-size: 17px; }
#lifeline .app { fill: #e7eaf0; }
#lifeline .app-t { font-size: 12px; fill: var(--mid); }
#lifeline .mig { fill: #fff; stroke: var(--bad); stroke-width: 2.5; }
#lifeline .data { fill: var(--blue); }
#lifeline .ev { fill: var(--lime); stroke: var(--ink); stroke-width: 1.5; }
#lifeline .ev-t { font-size: 13px; fill: var(--ink); font-weight: 500; }
.tick { font-size: 12.5px; fill: var(--mid); }
#lbms .band { fill: #fff; } #lbms .band.alt { fill: #f0f2f6; }
#lbms .loc { font-size: 13px; fill: var(--dmid); font-weight: 500; }
#lbms .wk { stroke: #e3e6ec; stroke-width: 1; }
#lbms .plan { stroke-width: 2.5; stroke-dasharray: 7 6; opacity: .8; }
#lbms .act { stroke-width: 4.5; stroke-linecap: round; }
#lbms .proj { stroke-width: 3; stroke-dasharray: 1 7; stroke-linecap: round; }
#lbms .tr { font-size: 13px; font-weight: 600; }
#lbms .today { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 3 4; }
#lbms .today-t { font-size: 13px; font-weight: 600; fill: var(--ink); }
#lbms .clash { fill: rgba(217, 67, 79, .15); stroke: var(--bad); stroke-width: 3; }
#lbms .callout { stroke: var(--bad); stroke-width: 1.5; }
.clash-box { background: #fff; border: 1.5px solid var(--bad); border-radius: 14px; padding: 10px 14px; font-size: 14px; line-height: 1.4; color: var(--dmid); box-shadow: var(--shadow); }
.clash-box b { display: block; color: var(--bad); font-size: 15px; }
#lrm .axis { stroke: #c9d0dc; stroke-width: 1.5; }
#lrm .phase { fill: #e9ecf2; }
#lrm .c-free { fill: none; stroke: var(--blue); stroke-width: 4; }
#lrm .c-free-t { font-size: 15px; font-weight: 600; fill: var(--blue); }
#lrm .c-trad { fill: none; stroke: var(--mid); stroke-width: 3; stroke-dasharray: 8 7; }
#lrm .c-trad-t { font-size: 15px; font-weight: 600; fill: var(--mid); }
#lrm .c-data { fill: none; stroke: var(--ok); stroke-width: 4; }
#lrm .c-data-t { font-size: 15px; font-weight: 600; fill: var(--ok); }
#lrm .gap { fill: rgba(217, 67, 79, .1); }
#lrm .gap-t { font-size: 14px; font-weight: 600; fill: var(--bad); }
#cycle .arc { fill: none; stroke: var(--blue); stroke-width: 2.5; }
#cycle .n { fill: #fff; stroke: var(--blue); stroke-width: 2.5; }
#cycle .n.hub { fill: var(--ink); stroke: var(--lime); stroke-width: 4; }
#cycle .n-num { font-size: 17px; font-weight: 700; fill: var(--blue); }
#cycle .hub + .n-num { fill: var(--lime); }
#cycle .mid-t { font-size: 20px; font-weight: 600; fill: var(--ink); }
.n-t { font-size: 15px; line-height: 1.3; color: var(--ink); font-weight: 500; }
#matrix .mx-bg { fill: #fff; stroke: var(--line); }
#matrix .mx-hot { fill: rgba(226, 245, 82, .35); }
#matrix .mx-l { stroke: #c9d0dc; stroke-dasharray: 4 5; }
#matrix .axis-t { font-size: 14px; fill: var(--dmid); font-weight: 500; }
#matrix .mx-q { font-size: 14px; font-weight: 700; fill: var(--ink); letter-spacing: .05em; text-transform: uppercase; }
.sticky { background: #fff8c9; border: 1px solid #eedf8a; border-radius: 6px; box-shadow: 0 3px 10px rgba(18, 28, 43, .12); font-size: 13px; line-height: 1.25; font-weight: 600; color: var(--ink); padding: 6px 8px; text-align: center; height: 44px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }

/* compare */
.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 8px; }
.cmp .card { padding: 24px 26px; }
.cmp h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cmp ul { list-style: none; padding: 0; font-size: 17.5px; }
.cmp li { display: flex; gap: 12px; align-items: flex-start; margin: 10px 0; line-height: 1.4; }
.cmp li svg { margin-top: 3px; font-size: 20px; }
.cmp .old { background: #eef0f4; box-shadow: none; }
.cmp .old li svg { color: var(--mid); }
.cmp .new { border: 2px solid var(--blue); }
.cmp .new li svg { color: var(--blue); }
.bottomline { margin-top: 20px; font-size: 19px; color: var(--dmid); display: flex; gap: 12px; align-items: center; }

/* hub with generated apps */
.apphub { position: relative; width: 520px; height: 520px; }
.apphub .core { position: absolute; left: 50%; top: 50%; width: 170px; height: 170px; margin: -85px 0 0 -85px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #3d6cff, var(--blue) 60%, #173a9e); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; font-weight: 700; font-size: 19px; line-height: 1.25; box-shadow: 0 0 60px rgba(40, 89, 225, .55); }
.apphub .core small { display: block; margin-top: 6px; font-weight: 400; font-size: 12px; opacity: .8; }
.apphub .app { position: absolute; transform: translate(-50%, -50%); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .18); border-radius: 14px; padding: 8px 12px; font-size: 14px; white-space: nowrap; display: flex; gap: 8px; align-items: center; }
.apphub .app svg { color: var(--lime); }
.apphub svg.spokes { position: absolute; inset: 0; width: 100%; height: 100%; }
.apphub svg.spokes line { stroke: rgba(226, 245, 82, .35); stroke-width: 1.5; stroke-dasharray: 3 5; }

/* triples */
.triples { display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.tri { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.tri .s, .tri .o { padding: 4px 10px; border-radius: 9px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); border-left: 3px solid var(--c); white-space: nowrap; }
.tri .p { font-style: italic; color: rgba(255, 255, 255, .62); white-space: nowrap; font-size: 13.5px; }
.tri .p::before { content: "— "; } .tri .p::after { content: " →"; }

/* converge */
.srcs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 10px; }
.srcs .card { padding: 16px 18px; }
.srcs b { display: flex; align-items: center; gap: 10px; font-size: 18px; margin-bottom: 4px; }
.srcs p { font-size: 14px; color: var(--mid); line-height: 1.4; }
.funnel { display: flex; justify-content: center; margin: 4px 0; }
.model-pill { margin: 0 auto; width: max-content; background: var(--ink); color: #fff; border-radius: 999px; padding: 12px 26px; font-size: 19px; font-weight: 600; display: flex; gap: 12px; align-items: center; }
.model-pill svg { color: var(--lime); }
.outs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; }
.outs .card { border: 2px solid var(--blue); font-size: 17px; font-weight: 500; display: flex; gap: 12px; align-items: center; padding: 14px 18px; }

/* chat & answers */
.qa { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
.qa .card { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; }
.bub { align-self: flex-start; background: var(--canvas); border: 1px solid var(--line); border-radius: 18px 18px 18px 6px; padding: 9px 14px; font-size: 16px; line-height: 1.4; font-weight: 500; }
.ans { font-size: 15px; color: var(--dmid); line-height: 1.45; display: flex; gap: 10px; }
.ans svg { color: var(--blue); flex: none; margin-top: 3px; }

/* use-case cards */
.uses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 6px; }
.use { display: flex; flex-direction: column; gap: 9px; padding: 18px 20px !important; }
.use .row h3 { font-size: 19px; }
.use p { font-size: 15px; color: var(--dmid); line-height: 1.42; flex: 1; }

/* spec page with mentions */
.page { background: #fff; color: var(--ink); border-radius: 12px; box-shadow: 0 2px 24px rgba(18, 28, 43, .12); padding: 22px 26px; font-size: 14.5px; line-height: 2.25; }
.page .ph { font-size: 11px; color: var(--mid); letter-spacing: .06em; display: flex; justify-content: space-between; line-height: 1.4; margin-bottom: 6px; text-transform: uppercase; }
.page h4 { font-size: 16px; font-weight: 700; margin: 0 0 2px; line-height: 1.5; }
.page p { margin: 0 0 4px; }
.m { --c: var(--k-asset); position: relative; border-radius: 4px; padding: 1px 3px; background: color-mix(in srgb, var(--c) 18%, transparent); box-shadow: inset 0 -2px 0 var(--c); }
.m .tg { position: absolute; left: -1px; bottom: calc(100% - 4px); font-size: 8.5px; line-height: 1; font-weight: 700; letter-spacing: .06em; color: #fff; background: var(--c); border-radius: 4px; padding: 2px 5px; white-space: nowrap; }
.k-asset { --c: var(--k-asset); } .k-doc { --c: var(--k-doc); } .k-req { --c: var(--k-req); } .k-erp { --c: var(--k-erp); } .k-crm { --c: var(--k-crm); } .k-sched { --c: var(--k-sched); } .k-loc { --c: var(--k-loc); } .k-person { --c: var(--k-person); } .k-val { --c: #a5835a; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-weight: 600; color: var(--mid); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.38; }
.tbl tr:last-child td { border-bottom: 0; }
.st { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.st.ok { color: var(--ok); } .st.bad { color: var(--bad); } .st.open { color: var(--warn); }
.has-dark-background .tbl th, .has-dark-background .tbl td { border-color: rgba(255, 255, 255, .12); }

/* work pack */
.pack { display: grid; grid-template-columns: 1fr; gap: 0; padding: 0 !important; overflow: hidden; }
.pack .hd { background: var(--ink); color: #fff; padding: 16px 22px; display: flex; align-items: center; gap: 14px; }
.pack .hd b { font-size: 19px; display: block; }
.pack .hd div span { font-size: 13px; color: rgba(255, 255, 255, .6); }
.pack .it { display: grid; grid-template-columns: 34px 150px 1fr auto; gap: 12px; align-items: center; padding: 10px 22px; border-top: 1px solid var(--line); font-size: 15px; }
.pack .it:first-of-type { border-top: 0; }
.pack .it .k { font-weight: 600; }
.pack .it .v { color: var(--dmid); line-height: 1.35; }
.pack .it.hot { background: #fffbe0; }
.pack .it svg { color: var(--blue); font-size: 19px; }

/* diff */
.diff { font-size: 15.5px; line-height: 1.45; display: flex; flex-direction: column; gap: 6px; }
.diff div { padding: 7px 12px 7px 34px; border-radius: 9px; position: relative; color: rgba(255, 255, 255, .7); }
.diff div::before { position: absolute; left: 12px; top: 7px; font-weight: 700; }
.diff .del { background: rgba(255, 77, 94, .13); color: #ffb3ba; text-decoration: line-through; text-decoration-color: rgba(255, 179, 186, .6); }
.diff .del::before { content: "−"; }
.diff .add { background: rgba(61, 220, 132, .14); color: #c2f5d8; }
.diff .add::before { content: "+"; }
.person { display: flex; gap: 16px; align-items: center; }
.avatar { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #ff7a1a, #e0569a); display: grid; place-items: center; font-weight: 700; font-size: 22px; color: #fff; flex: none; }

/* pipeline */
.pipe { display: grid; grid-template-columns: 250px 60px 270px 60px 1fr; align-items: center; gap: 0; margin-top: 14px; }
.pipe .arrow { color: var(--mid); font-size: 34px; display: grid; place-items: center; }
.pipe .srcl { display: flex; flex-direction: column; gap: 8px; }
.pipe .srcl .chip { justify-content: flex-start; font-size: 14px; padding: 6px 12px; }
.pipe .cue { background: var(--ink); color: #fff; border-radius: 24px; padding: 22px 22px; text-align: center; }
.pipe .cue img { height: 34px; margin-bottom: 10px; }
.pipe .cue p { font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .8); }
.pipe .cue b { color: var(--lime); }
.outs4 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.outs4 .card { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.outs4 b { font-size: 17px; }
.outs4 p { font-size: 13.5px; color: var(--mid); line-height: 1.4; }

/* podcast */
.player { background: linear-gradient(160deg, #18264a, #0e1827); border: 1px solid rgba(255, 255, 255, .12); border-radius: 26px; padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.cover { width: 100%; aspect-ratio: 1.6; border-radius: 18px; background: radial-gradient(circle at 25% 30%, rgba(226, 245, 82, .5), transparent 45%), radial-gradient(circle at 80% 70%, rgba(0, 202, 204, .55), transparent 50%), linear-gradient(135deg, #2859e1, #121c2b); display: flex; align-items: flex-end; padding: 18px; box-sizing: border-box; }
.cover b { font-size: 22px; line-height: 1.2; }
.wave { display: flex; align-items: center; gap: 3px; height: 46px; }
.wave i { flex: 1; background: var(--lime); border-radius: 3px; height: var(--h); animation: eq 1.1s ease-in-out infinite alternate; animation-delay: var(--d); opacity: .9; }
.wave i.past { background: var(--lime); } .wave i.fut { background: rgba(255, 255, 255, .25); animation: none; }
@keyframes eq { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
.ctl { display: flex; align-items: center; gap: 16px; font-size: 13px; color: rgba(255, 255, 255, .6); }
.ctl .play { width: 48px; height: 48px; border-radius: 50%; background: var(--lime); color: var(--ink); display: grid; place-items: center; font-size: 20px; }
.ctl .play svg { fill: currentColor; stroke: none; }
.script { display: flex; flex-direction: column; gap: 12px; font-size: 16.5px; line-height: 1.5; }
.script p { display: grid; grid-template-columns: 74px 1fr; gap: 10px; }
.script p b { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--lime); padding-top: 4px; }
.script p b.b { color: var(--turq); }

/* storyboard */
.story { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 8px; }
.frame { background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.frame .scr { position: relative; aspect-ratio: 16/10; background: linear-gradient(160deg, #13234a, #050a15); display: grid; place-items: center; }
.frame .scr svg { width: 74%; height: 74%; }
.frame .scr .tc { position: absolute; left: 10px; bottom: 8px; font-size: 11px; color: rgba(255, 255, 255, .7); font-variant-numeric: tabular-nums; }
.frame .scr .new { position: absolute; right: 10px; top: 10px; }
.frame .cap { padding: 12px 14px; font-size: 14.5px; line-height: 1.4; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.frame .cap b { font-size: 15px; }
.frame .cap .src { font-size: 12px; color: var(--mid); margin-top: auto; }

/* AR HUD */
.hud { position: absolute; inset: 18px; pointer-events: none; }
.hud::before, .hud::after { content: ""; position: absolute; width: 60px; height: 60px; border: 3px solid rgba(0, 202, 204, .8); }
.hud::before { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: 16px 0 0 0; }
.hud::after { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 16px 0; }
.hud .hbar { position: absolute; right: 20px; top: 14px; display: flex; gap: 16px; font-size: 13px; color: #7fe9ea; letter-spacing: .05em; }
.hud .hbar b { color: #fff; font-weight: 600; }

/* architecture layers */
.layers { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.layer { display: grid; grid-template-columns: 190px 1fr; gap: 16px; align-items: center; }
.layer > b { font-size: 15px; color: var(--mid); font-weight: 600; text-align: right; }
.layer .lane { border-radius: 18px; padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: #fff; border: 1px solid var(--line); }
.layer .lane .chip { font-size: 14px; padding: 5px 12px; }
.layer.core .lane { background: var(--ink); border: 0; padding: 16px 20px; color: #fff; justify-content: space-between; }
.layer.core .lane .chip { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); color: #fff; }
.layer.core img { height: 30px; }
.layer.gen .lane { border: 2px dashed var(--blue); background: var(--tint); }
.conn { display: grid; grid-template-columns: 190px 1fr; gap: 16px; }
.conn div { font-size: 13px; color: var(--mid); display: flex; align-items: center; gap: 8px; padding-left: 18px; }
.conn div::before { content: "↕"; color: var(--blue); font-size: 16px; }

/* agent plan & dashboard */
.plan { display: flex; flex-direction: column; gap: 10px; }
.pst { display: flex; align-items: center; gap: 12px; font-size: 16px; color: rgba(255, 255, 255, .85); }
.pst .rg { width: 22px; height: 22px; border-radius: 50%; background: var(--ok); display: grid; place-items: center; flex: none; color: #fff; font-size: 13px; }
.pst code { font-size: 13px; background: rgba(255, 255, 255, .08); border-radius: 6px; padding: 1px 6px; color: #c9d6ff; }
.dash { background: #fff; color: var(--ink); border-radius: 20px; padding: 18px 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, .4); }
.dash .top { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--mid); margin-bottom: 12px; }
.dash .top b { color: var(--ink); font-size: 16px; }
.zbars { display: flex; flex-direction: column; gap: 8px; }
.zbar { display: grid; grid-template-columns: 52px 1fr 64px; gap: 10px; align-items: center; font-size: 13px; }
.zbar .tr { position: relative; height: 16px; background: #eef0f4; border-radius: 8px; }
.zbar .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; background: var(--ok); }
.zbar .fill.bad { background: var(--bad); } .zbar .fill.warn { background: var(--warn); }
.zbar .pl { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); }
.zbar .v { text-align: right; font-variant-numeric: tabular-nums; color: var(--dmid); }

/* steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 30px; position: relative; }
.steps::before { content: ""; position: absolute; left: 30px; right: 30px; top: 30px; height: 3px; background: linear-gradient(90deg, var(--blue), var(--lime)); border-radius: 2px; }
.step { position: relative; padding-right: 22px; }
.step .dot { width: 60px; height: 60px; border-radius: 50%; background: #fff; border: 3px solid var(--blue); display: grid; place-items: center; font-size: 22px; font-weight: 700; color: var(--blue); position: relative; margin-bottom: 18px; }
.step:last-child .dot { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.step h3 { margin-bottom: 6px; }
.step p { font-size: 15.5px; color: var(--dmid); line-height: 1.45; }
.step .when { margin-top: 10px; }

/* exercises */
.ex { display: grid; grid-template-columns: 430px 1fr; gap: 34px; margin-top: 8px; }
.ex ol { margin: 0; padding-left: 1.2em; font-size: 18px; }
.ex ol li { margin: 10px 0; }
.ex ol li::marker { color: var(--blue); font-weight: 700; }
.timebox { display: inline-flex; gap: 8px; align-items: center; background: var(--ink); color: #fff; padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; margin-top: 10px; }
.timebox svg { color: var(--lime); }
.nouns { display: flex; flex-direction: column; gap: 14px; }
.nouns > div b { display: block; font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--mid); margin-bottom: 7px; }
.nouns .chip { font-size: 14.5px; padding: 5px 12px; }

/* takeaways */
.take { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; max-width: 980px; }
.take > div { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: center; font-size: 22px; line-height: 1.4; }
.take .n { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--lime); color: var(--lime); display: grid; place-items: center; font-weight: 700; font-size: 18px; }

.illus { position: absolute; right: 72px; bottom: 22px; font-size: 12px; color: var(--mid); }
.has-dark-background .illus, .over .illus { color: rgba(255, 255, 255, .45); }

/* boundary-condition chain */
.chain { display: grid; grid-template-columns: 1fr 22px 1fr 22px 1fr 22px 1fr 22px 1fr 22px 1fr; align-items: stretch; margin-top: 18px; }
.chain .lk { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 14px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow); }
.chain .lk:first-child { background: var(--ink); color: #fff; border: 0; }
.chain .lk:first-child span:not(.ic) { color: rgba(255, 255, 255, .7); }
.chain .lk b { font-size: 15.5px; line-height: 1.25; }
.chain .lk span:not(.ic) { font-size: 13px; color: var(--dmid); line-height: 1.4; }
.chain .ar { display: grid; place-items: center; color: var(--blue); font-size: 18px; }
.bcq { font-size: 13.5px !important; color: var(--blue) !important; font-style: italic; flex: none !important; }
.uses.g4c { grid-template-columns: repeat(4, 1fr); gap: 12px; }
.uses.g4c .use { padding: 14px 16px !important; gap: 6px; }
.uses.g4c .use h3 { font-size: 16.5px; }
.uses.g4c .use p { font-size: 13.5px; }

/* code */
.code { background: var(--ink); color: #dfe6f5; border-radius: 18px; padding: 18px 22px; font: 15px/1.65 ui-monospace, "SF Mono", Menlo, Consolas, monospace; white-space: pre; margin: 0; }
.code .c { color: #8394b0; } .code .k { color: #ff8ec4; } .code .v { color: var(--lime); } .code .p { color: #8fd8ff; } .code .t { color: #ffc46b; }
.has-dark-background .code { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }

/* ontology tree */
.tree { font-size: 17px; line-height: 1.9; }
.tree ul { list-style: none; padding-left: 22px; margin: 0; border-left: 2px solid #c9d0dc; }
.tree > ul { border: 0; padding-left: 0; }
.tree li { margin: 0; position: relative; }
.tree ul ul li::before { content: ""; position: absolute; left: -22px; top: .95em; width: 16px; border-top: 2px solid #c9d0dc; }
.tree .hit { background: var(--lime); border-radius: 6px; padding: 1px 8px; font-weight: 600; }
.tree .cls { color: var(--blue); font-weight: 600; }

/* RDS-PP code breakdown */
.rds { display: flex; gap: 10px; margin: 18px 0 8px; }
.rds .seg { display: flex; flex-direction: column; gap: 8px; }
.rds code { font: 600 44px/1 ui-monospace, "SF Mono", Menlo, monospace; padding: 12px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--line); border-bottom: 5px solid var(--c); }
.rds em { font-style: normal; font-size: 14px; color: var(--dmid); line-height: 1.35; padding-left: 4px; }
.rds em b { color: var(--ink); }
.aspect { display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: start; }
.aspect code { white-space: nowrap; }
.aspect .pf { font: 700 30px/1 ui-monospace, Menlo, monospace; color: var(--blue); background: var(--tint); border-radius: 12px; height: 54px; display: grid; place-items: center; }

/* graph diagrams */
svg.dia { width: 100%; height: auto; font-family: Poppins, sans-serif; overflow: visible; }
svg.dia .e { stroke: #9aa7bd; stroke-width: 2; fill: none; }
svg.dia .e.new { stroke: var(--blue); stroke-dasharray: 6 5; stroke-width: 2.5; }
svg.dia .el { font-size: 12.5px; fill: var(--dmid); font-style: italic; }
svg.dia .nl { font-size: 13.5px; font-weight: 600; fill: var(--ink); }
svg.dia .ty { font-size: 10.5px; fill: var(--mid); letter-spacing: .06em; text-transform: uppercase; }
svg.dia .pr { fill: #fff; stroke: var(--line); }
svg.dia .prt { font-size: 11.5px; fill: var(--dmid); }
.mini-h { font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--mid); margin-bottom: 6px; }

@media print { #three { display: none; } }