/* =========================================================================
   Illustrative product views.
   Each window holds a drawn mock-up that explains one capability in the
   product's visual language. It is not a capture of the running app, and
   the content is fictional. Every mock is laid out in "design pixels"
   (--u = one pixel of a --dw-wide design), so it scales with its window
   the way an image would.
   ========================================================================= */
.win__media{container-type:inline-size}
.mock{--u:calc(100cqw / var(--dw));position:absolute;inset:0;overflow:hidden;background:#17181e;color:#c9cbd3;
  font-family:var(--f-sans);font-size:calc(14*var(--u));line-height:1.45;user-select:none;pointer-events:none;text-align:left}
.mock *,.mock *::before,.mock *::after{animation-play-state:paused}
.mock[data-play] *,.mock[data-play] *::before,.mock[data-play] *::after{animation-play-state:running}
.mock svg{display:block}
.mock p,.mock h5,.mock h6,.mock ul,.mock ol{margin:0;padding:0}
.mock ul,.mock ol{list-style:none}
.mock b{color:#f1f2f5;font-weight:600}
.mock .mn{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.x-b{color:#6aa8ff}.x-o{color:#f5b041}.x-p{color:#d39bff}.x-g{color:#5fe08d}.x-k{color:#f472b6}

/* Shared parts */
.m-pane{position:relative;background:#1e2027;border:1px solid rgba(255,255,255,.07);border-radius:calc(10*var(--u))}
.m-lbl{display:flex;align-items:center;justify-content:space-between;gap:calc(8*var(--u));font-family:var(--f-mono);font-size:calc(11.5*var(--u));letter-spacing:.03em;color:#8a8d98}
.m-lbl b{color:#e6e7eb;font-weight:500}
.m-st{display:inline-grid;place-items:center;min-width:calc(46*var(--u));height:calc(19*var(--u));padding:0 calc(6*var(--u));border-radius:calc(4*var(--u));
  font-family:var(--f-mono);font-size:calc(10*var(--u));font-weight:500;letter-spacing:.04em;color:var(--c);background:color-mix(in srgb,var(--c) 16%,transparent)}
.st-rep{--c:#6aa8ff}.st-log{--c:#5fe08d}.st-msg{--c:#f5b041}.st-wire{--c:#d39bff}
.m-tag{display:inline-flex;align-items:center;gap:calc(5*var(--u));padding:calc(1*var(--u)) calc(8*var(--u));border-radius:999px;background:#2a2c34;font-size:calc(11.5*var(--u));color:#d3d5dc;white-space:nowrap}
.m-tag i{width:calc(7*var(--u));height:calc(7*var(--u));border-radius:50%;background:var(--c)}
.m-cite{display:inline-grid;place-items:center;min-width:calc(18*var(--u));height:calc(17*var(--u));padding:0 calc(4*var(--u));margin:0 calc(1*var(--u));border-radius:calc(4*var(--u));
  background:#2c3a52;color:#9cc3ff;font-family:var(--f-mono);font-size:calc(10.5*var(--u));vertical-align:calc(1*var(--u))}
.m-av{display:inline-grid;place-items:center;flex:none;width:calc(30*var(--u));height:calc(30*var(--u));border-radius:50%;background:var(--c);color:#15161b;font-weight:700;font-size:calc(11.5*var(--u))}
.m-flag{display:flex;align-items:center;gap:calc(6*var(--u));color:#f87171;font-size:calc(12*var(--u))}
.m-flag::before{content:"";width:0;height:0;border:calc(6*var(--u)) solid transparent;border-bottom:calc(10*var(--u)) solid #f87171;border-top:0}
.m-bar{display:block;height:calc(7*var(--u));border-radius:calc(4*var(--u));background:#33353d}
/* Three-state cycle used to keep linked highlights in step. */
.c1,.c2,.c3{animation:m-on 12s steps(1,end) infinite}
.c2{animation-delay:4s}.c3{animation-delay:8s}
@keyframes m-on{0%{--on:1}33.333%,100%{--on:0}}
@property --on{syntax:"<number>";inherits:true;initial-value:0}
.hl{transition:none;box-shadow:0 0 0 calc(var(--on)*1.5*var(--u)) #57bbf6,0 0 calc(var(--on)*18*var(--u)) rgba(87,187,246,calc(var(--on)*.35))}
.fade{opacity:var(--on)}
@keyframes m-pulse{50%{opacity:.5;transform:scale(1.4)}}
@keyframes m-blink{50%{opacity:.25}}

/* ---------- case view (hero): sources resolving into one narrative ---------- */
.mk-case{display:grid;grid-template-rows:calc(56*var(--u)) minmax(0,1fr);padding:0 calc(20*var(--u)) calc(20*var(--u))}
.m-case__top{display:flex;align-items:center;gap:calc(12*var(--u))}
.m-case__top h5{font-size:calc(17*var(--u));color:#fff;font-weight:600;margin-right:calc(8*var(--u))}
.m-avs{margin-left:auto;display:flex}
.m-avs .m-av{width:calc(26*var(--u));height:calc(26*var(--u));margin-left:calc(-6*var(--u));box-shadow:0 0 0 calc(2*var(--u)) #17181e}
.m-case__grid{display:grid;grid-template-columns:calc(400*var(--u)) minmax(0,1fr) calc(470*var(--u));gap:calc(18*var(--u));min-height:0}
.m-case__grid > .m-pane{padding:calc(16*var(--u));overflow:hidden;display:flex;flex-direction:column;gap:calc(12*var(--u))}
.m-flow{position:relative;flex:1;overflow:hidden;-webkit-mask:linear-gradient(transparent,#000 6%,#000 85%,transparent);mask:linear-gradient(transparent,#000 6%,#000 85%,transparent)}
.m-flow ul{animation:m-up 26s linear infinite}
@keyframes m-up{to{transform:translateY(-50%)}}
.m-src{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:calc(10*var(--u));padding:calc(11*var(--u)) calc(12*var(--u));margin-bottom:calc(8*var(--u));border-radius:calc(8*var(--u));background:#24262d}
.m-src p{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#e1e2e7;font-size:calc(13*var(--u))}
.m-src span:last-child{font-size:calc(11*var(--u));color:#7d808b;font-family:var(--f-mono)}
.m-tl{position:relative;display:flex;flex-direction:column;gap:calc(12*var(--u));padding-left:calc(26*var(--u))}
.m-tl::before{content:"";position:absolute;left:calc(7*var(--u));top:calc(8*var(--u));bottom:0;width:calc(2*var(--u));background:#33343a}
.m-te{position:relative;padding:calc(12*var(--u)) calc(14*var(--u));border-radius:calc(8*var(--u));background:#25262d;border:1px solid rgba(255,255,255,.06)}
.m-te::before{content:"";position:absolute;left:calc(-24*var(--u));top:calc(15*var(--u));width:calc(10*var(--u));height:calc(10*var(--u));border-radius:50%;background:var(--c,#57bbf6);box-shadow:0 0 0 calc(3*var(--u)) #1e2027}
.m-te h6{margin:calc(3*var(--u)) 0 calc(7*var(--u));font-size:calc(14.5*var(--u));color:#fff;font-weight:600;line-height:1.3}
.m-te .mn{font-size:calc(11.5*var(--u));color:#8a8d98}
.m-te__foot{display:flex;flex-wrap:wrap;gap:calc(6*var(--u));align-items:center}
.m-te__foot .mn{margin-left:auto}
.m-te--bad{border-color:rgba(248,113,113,.45)}
.m-te--bad .m-flag{margin-top:calc(7*var(--u))}
.m-gap{display:flex;align-items:center;gap:calc(8*var(--u));padding:calc(4*var(--u)) 0;font-family:var(--f-mono);font-size:calc(11*var(--u));color:#7d808b}
.m-gap::after{content:"";flex:1;border-top:calc(1.5*var(--u)) dashed #3c3e47}
.m-te--new{animation:m-new 12s ease infinite}
@keyframes m-new{0%,6%{opacity:0;transform:translateY(calc(-10*var(--u)))}12%,100%{opacity:1;transform:none}}
.m-brief{background:linear-gradient(180deg,rgba(87,187,246,.08),transparent 40%),#1e2027;border-color:rgba(87,187,246,.35)}
.m-brief h6{font-size:calc(19*var(--u));line-height:1.3;color:#fff;font-weight:600}
.m-brief p{font-size:calc(13.5*var(--u));line-height:1.65;color:#d4d6dc}
.m-brief .m-cite{border-radius:calc(4*var(--u))}
.m-q{padding:calc(10*var(--u)) calc(12*var(--u));border-radius:calc(8*var(--u));border:1px dashed rgba(248,113,113,.5);font-size:calc(13*var(--u));color:#f3c4c4}
.m-brief__foot{margin-top:auto;padding-top:calc(12*var(--u));border-top:1px solid rgba(255,255,255,.07)}

/* ---------- event sequencing: a sourced event stream, read in time order ---------- */
.mk-seq{display:grid;grid-template-columns:calc(118*var(--u)) minmax(0,1fr)}
.m-rail{position:relative;display:grid;grid-template-columns:minmax(0,1fr) calc(34*var(--u));gap:calc(6*var(--u));padding:calc(30*var(--u)) calc(6*var(--u)) calc(10*var(--u));border-right:1px solid rgba(255,255,255,.06);background:#14151a}
.m-rail__date{position:absolute;top:calc(10*var(--u));right:calc(10*var(--u));font-size:calc(10*var(--u));color:#6d707b}
.m-sig{width:100%;height:100%}
.m-mini{position:relative;border-left:1px solid rgba(255,255,255,.06)}
.m-mini i{position:absolute;left:12%;width:calc(9*var(--u));height:calc(3*var(--u));border-radius:2px;background:var(--c);opacity:.85}
.m-mini__gap{position:absolute;left:0;right:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 calc(3*var(--u)),transparent 0 calc(6*var(--u)))}
.m-mini__view{position:absolute;left:calc(-3*var(--u));right:calc(2*var(--u));height:22%;border:calc(1.5*var(--u)) solid #6aa8ff;border-radius:calc(4*var(--u));background:rgba(87,187,246,.12);animation:m-view 36s linear infinite}
@keyframes m-view{from{top:30%}to{top:72%}}
.m-main{position:relative;display:grid;grid-template-rows:calc(54*var(--u)) minmax(0,1fr);min-width:0}
.m-ents{position:relative;display:flex;align-items:center;gap:calc(8*var(--u));padding:0 calc(18*var(--u));border-bottom:1px solid rgba(255,255,255,.06)}
.m-ent{display:inline-flex;align-items:center;line-height:1;white-space:nowrap;gap:calc(7*var(--u));padding:calc(7*var(--u)) calc(11*var(--u)) calc(7*var(--u)) calc(8*var(--u));border-radius:calc(6*var(--u));background:#22242b;color:#a7aab4;font-size:calc(15*var(--u))}
.m-ent::before{content:"";flex:none;width:calc(9*var(--u));height:calc(9*var(--u));margin:0 calc(2*var(--u));transform:rotate(45deg);border-radius:calc(2*var(--u));background:var(--c)}
.m-ent--tag::before{transform:none;width:calc(9*var(--u));height:calc(12*var(--u));margin:0 calc(2*var(--u));border-radius:0;clip-path:polygon(0 0,100% 0,100% 100%,50% 75%,0 100%)}
.m-ent.on{color:#fff;background:color-mix(in srgb,var(--c) 22%,#22242b);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 60%,transparent)}
.m-ent__add{color:#6d707b;font-size:calc(18*var(--u))}
.m-ents__meta{display:none;margin-left:auto;font-size:calc(13*var(--u));color:#7d808b}
.m-pop{position:absolute;top:calc(46*var(--u));left:calc(112*var(--u));z-index:3;display:grid;gap:calc(2*var(--u));padding:calc(9*var(--u)) calc(13*var(--u));border-radius:calc(8*var(--u));background:#2a2418;border:1px solid #c9922e;box-shadow:0 calc(10*var(--u)) calc(24*var(--u)) rgba(0,0,0,.45);animation:m-pop 12s ease infinite}
.m-pop b{color:#f5b041;font-size:calc(14*var(--u))}
.m-pop span{font-size:calc(11.5*var(--u));color:#d8cdb6}
@keyframes m-pop{0%,8%{opacity:0;transform:translateY(calc(-4*var(--u)))}12%,38%{opacity:1;transform:none}44%,100%{opacity:0}}
.m-stream{position:relative;overflow:hidden;-webkit-mask:linear-gradient(transparent,#000 5%,#000 88%,transparent);mask:linear-gradient(transparent,#000 5%,#000 88%,transparent)}
.m-stream__in{animation:m-up 36s linear infinite}
.m-run{position:relative;padding:calc(16*var(--u)) calc(18*var(--u)) 0 calc(40*var(--u))}
.m-run::before{content:"";position:absolute;left:calc(21*var(--u));top:0;bottom:0;border-left:calc(2*var(--u)) dashed rgba(245,176,65,.45)}
.m-ts{position:relative;margin:0 0 calc(10*var(--u));font-size:calc(17*var(--u));color:#e6e7eb;letter-spacing:-.01em}
.m-ts::before{content:"";position:absolute;left:calc(-24*var(--u));top:50%;width:calc(10*var(--u));height:calc(10*var(--u));margin-top:calc(-5*var(--u));border-radius:50%;background:#57bbf6;box-shadow:0 0 0 calc(4*var(--u)) #17181e}
.m-ts em{font-style:normal;color:#f87171;margin:0 calc(4*var(--u))}
.m-ts--x::before{background:#f87171}
.m-ec{padding:calc(16*var(--u)) calc(20*var(--u)) calc(14*var(--u));margin-bottom:calc(24*var(--u));background:#22242b;display:grid;gap:calc(9*var(--u))}
.m-ec h6{font-size:calc(19*var(--u));line-height:1.3;color:#fff;font-weight:600}
.m-ec p{font-size:calc(15.5*var(--u));line-height:1.6;color:#d3d5dc}
.m-ec sup,.m-ec__src sup{font-size:.7em;color:#8a8d98}
.m-ec--x{border-color:rgba(248,113,113,.5);background:linear-gradient(rgba(248,113,113,.06),rgba(248,113,113,.06)),#22242b}
.m-ec__foot{display:flex;align-items:center;gap:calc(8*var(--u));flex-wrap:wrap}
.m-chip{display:inline-flex;align-items:center;padding:calc(2*var(--u)) calc(9*var(--u));border-radius:999px;font-family:var(--f-mono);font-size:calc(13*var(--u));color:color-mix(in srgb,var(--c,#a7aab4) 85%,#fff);background:color-mix(in srgb,var(--c,#6d707b) 20%,transparent)}
.m-ec__src{margin-left:auto;font-size:calc(13*var(--u));color:#8a8d98}
.m-ec .m-flag{font-size:calc(15*var(--u))}
.m-gap{display:flex;align-items:center;gap:calc(10*var(--u));margin:calc(-6*var(--u)) 0 calc(22*var(--u));padding:calc(10*var(--u)) calc(14*var(--u));border:1px dashed #555865;border-radius:calc(8*var(--u));
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 calc(6*var(--u)),transparent 0 calc(12*var(--u)));font-size:calc(12.5*var(--u));color:#a7aab4}

/* ---------- narrative builder ---------- */
.mk-story{display:grid;grid-template-columns:calc(340*var(--u)) minmax(0,1fr);gap:calc(18*var(--u));padding:calc(22*var(--u))}
.m-picks{padding:calc(16*var(--u));display:flex;flex-direction:column;gap:calc(8*var(--u))}
.m-pick{display:grid;grid-template-columns:calc(18*var(--u)) minmax(0,1fr);gap:calc(10*var(--u));padding:calc(10*var(--u)) calc(12*var(--u));border-radius:calc(8*var(--u));background:#25262d;border:1px solid transparent}
.m-pick > i{width:calc(16*var(--u));height:calc(16*var(--u));margin-top:calc(2*var(--u));border-radius:calc(4*var(--u));border:calc(1.5*var(--u)) solid #5a5d68}
.m-pick.on > i{background:#57bbf6;border-color:#57bbf6;box-shadow:inset 0 0 0 calc(3*var(--u)) #57bbf6}
.m-pick.on > i::after{content:"";display:block;width:calc(5*var(--u));height:calc(9*var(--u));margin:calc(1*var(--u)) auto 0;border:solid #fff;border-width:0 calc(2*var(--u)) calc(2*var(--u)) 0;transform:rotate(45deg)}
.m-pick:not(.on){opacity:.55}
.m-pick h6{font-size:calc(13*var(--u));color:#fff;font-weight:500;line-height:1.35}
.m-pick .mn{font-size:calc(10.5*var(--u));color:#8a8d98}
.m-pick .m-cite{float:right}
.m-page{padding:calc(26*var(--u)) calc(30*var(--u));display:flex;flex-direction:column;gap:calc(16*var(--u));background:#202229}
.m-page__head{display:flex;align-items:center;gap:calc(10*var(--u))}
.m-page__head h5{font-size:calc(23*var(--u));font-weight:600;color:#fff;letter-spacing:-.01em;margin-right:auto}
.m-ver{font-family:var(--f-mono);font-size:calc(11*var(--u));padding:calc(2*var(--u)) calc(8*var(--u));border-radius:999px;border:1px solid #3a3c45;color:#b4b6bf}
.m-sec h6{margin-bottom:calc(6*var(--u));font-family:var(--f-mono);font-size:calc(11*var(--u));letter-spacing:.06em;text-transform:uppercase;color:#8a8d98;font-weight:500}
.m-sec p{font-size:calc(14.5*var(--u));line-height:1.65;color:#e0e1e6}
.m-when{position:relative;display:flex;justify-content:space-between;padding-top:calc(14*var(--u))}
.m-when::before{content:"";position:absolute;left:calc(6*var(--u));right:calc(6*var(--u));top:calc(19*var(--u));height:calc(2*var(--u));background:#3a3c45}
.m-when li{position:relative;display:flex;flex-direction:column;gap:calc(4*var(--u));font-size:calc(12*var(--u));color:#c9cbd3;max-width:calc(170*var(--u))}
.m-when li::before{content:"";width:calc(12*var(--u));height:calc(12*var(--u));border-radius:50%;background:var(--c);box-shadow:0 0 0 calc(3*var(--u)) #202229}
.m-when li:last-child{align-items:flex-end;text-align:right}
.m-when .mn{color:#8a8d98;font-size:calc(11*var(--u))}
.m-note{position:absolute;right:calc(-8*var(--u));bottom:calc(64*var(--u));width:calc(230*var(--u));padding:calc(10*var(--u)) calc(12*var(--u));border-radius:calc(8*var(--u));background:#3a3216;border:1px solid #6b5a1e;color:#f3e2a6;font-size:calc(12*var(--u));line-height:1.45;transform:rotate(1.5deg);box-shadow:0 calc(10*var(--u)) calc(24*var(--u)) rgba(0,0,0,.4)}
.m-note b{display:block;color:#fde68a;font-size:calc(11*var(--u));margin-bottom:calc(2*var(--u))}

/* ---------- chat ---------- */
.mk-chat{display:flex;flex-direction:column;gap:calc(14*var(--u));padding:calc(20*var(--u))}
.m-chat__head{display:flex;align-items:center;gap:calc(10*var(--u));padding-bottom:calc(12*var(--u));border-bottom:1px solid rgba(255,255,255,.07)}
.m-spark{width:calc(22*var(--u));height:calc(22*var(--u));border-radius:calc(6*var(--u));background:linear-gradient(135deg,#57bbf6,#8b5cf6)}
.m-chat__head b{font-size:calc(15*var(--u))}
.m-chat__head .mn{margin-left:auto;font-size:calc(11*var(--u));color:#8a8d98}
.m-ask{align-self:flex-end;max-width:80%;padding:calc(10*var(--u)) calc(14*var(--u));border-radius:calc(14*var(--u)) calc(14*var(--u)) calc(4*var(--u)) calc(14*var(--u));background:#2a3a57;color:#fff;font-size:calc(15*var(--u))}
.m-ans{font-size:calc(15*var(--u));line-height:1.7;color:#e3e4e9}
.m-ans li{position:relative;padding-left:calc(16*var(--u));margin-top:calc(6*var(--u))}
.m-ans li::before{content:"";position:absolute;left:0;top:calc(11*var(--u));width:calc(5*var(--u));height:calc(5*var(--u));border-radius:50%;background:#8a8d98}
.m-ans .m-cite{border-radius:calc(4*var(--u))}
.m-refs{display:flex;flex-direction:column;gap:calc(8*var(--u))}
.m-ref{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:calc(10*var(--u));align-items:center;padding:calc(10*var(--u)) calc(12*var(--u));border-radius:calc(8*var(--u));background:#24262d;border:1px solid rgba(255,255,255,.06)}
.m-ref h6{font-size:calc(13*var(--u));color:#fff;font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.m-ref .mn{font-size:calc(10.5*var(--u));color:#8a8d98}
.m-input{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding:calc(13*var(--u)) calc(16*var(--u));border-radius:calc(14*var(--u));background:#24262d;border:1px solid rgba(255,255,255,.08);color:#7d808b;font-size:calc(14*var(--u))}
.m-input i{width:calc(26*var(--u));height:calc(26*var(--u));border-radius:50%;background:#57bbf6}

/* ---------- comments ---------- */
.mk-com{display:grid;grid-template-columns:minmax(0,1fr) calc(300*var(--u));gap:calc(18*var(--u));padding:calc(22*var(--u))}
.m-thread{position:relative;display:flex;flex-direction:column}
.m-ev{padding:calc(16*var(--u)) calc(18*var(--u))}
.m-ev h6{margin:calc(4*var(--u)) 0 calc(6*var(--u));font-size:calc(17*var(--u));font-weight:600;color:#fff;line-height:1.3}
.m-ev p{font-size:calc(13.5*var(--u));line-height:1.6}
.m-ev .mn{font-size:calc(11.5*var(--u));color:#8a8d98}
.m-ev .m-flag{margin-top:calc(8*var(--u))}
.m-replies{position:relative;margin-left:calc(26*var(--u));padding:calc(14*var(--u)) 0 0 calc(26*var(--u));display:flex;flex-direction:column;gap:calc(14*var(--u))}
.m-replies::before{content:"";position:absolute;left:0;top:0;bottom:calc(20*var(--u));width:calc(2*var(--u));background:#33353d}
.m-c{position:relative;display:grid;grid-template-columns:calc(30*var(--u)) minmax(0,1fr);gap:calc(12*var(--u))}
.m-c::before{content:"";position:absolute;left:calc(-26*var(--u));top:calc(15*var(--u));width:calc(20*var(--u));height:calc(2*var(--u));background:#33353d}
.m-c__who{display:flex;align-items:baseline;gap:calc(8*var(--u));font-size:calc(13.5*var(--u))}
.m-c__who .mn{font-size:calc(11*var(--u));color:#8a8d98}
.m-role{font-size:calc(10.5*var(--u));padding:0 calc(6*var(--u));border-radius:calc(4*var(--u));background:#2a2c34;color:#b4b6bf}
.m-c p{margin-top:calc(2*var(--u));font-size:calc(14*var(--u));line-height:1.5;color:#e3e4e9}
.m-c__ref{display:inline-flex;margin-top:calc(6*var(--u));gap:calc(6*var(--u));align-items:center;font-size:calc(11.5*var(--u));color:#9cc3ff}
.m-c--new{animation:m-post 12s ease infinite}
@keyframes m-post{0%,55%{opacity:0;transform:translateY(calc(8*var(--u)))}60%,95%{opacity:1;transform:none}100%{opacity:0}}
.m-typing{display:flex;align-items:center;gap:calc(8*var(--u));font-size:calc(12*var(--u));color:#8a8d98;animation:m-typing 12s steps(1,end) infinite}
@keyframes m-typing{0%,20%{opacity:0}21%,58%{opacity:1}59%,100%{opacity:0}}
.m-typing i{width:calc(6*var(--u));height:calc(6*var(--u));border-radius:50%;background:#8a8d98;animation:m-blink 1s ease infinite}
.m-typing i:nth-child(3){animation-delay:.2s}.m-typing i:nth-child(4){animation-delay:.4s}
.m-audit{padding:calc(16*var(--u));display:flex;flex-direction:column;gap:calc(12*var(--u))}
.m-audit li{display:grid;grid-template-columns:calc(8*var(--u)) minmax(0,1fr);gap:calc(10*var(--u));font-size:calc(12.5*var(--u));color:#c9cbd3;line-height:1.45}
.m-audit li::before{content:"";width:calc(8*var(--u));height:calc(8*var(--u));margin-top:calc(5*var(--u));border-radius:50%;background:var(--c,#5a5d68)}
.m-audit .mn{display:block;font-size:calc(10.5*var(--u));color:#7d808b}
.m-audit__new{animation:m-post 12s ease infinite}

/* ---------- map ---------- */
.mk-map{background:#162230}
.mk-map > svg{position:absolute;inset:0;width:100%;height:100%}
.m-excerpt{position:absolute;left:calc(22*var(--u));bottom:calc(22*var(--u));width:calc(410*var(--u));padding:calc(16*var(--u));display:flex;flex-direction:column;gap:calc(10*var(--u));
  background:rgba(30,32,39,.94);box-shadow:0 calc(14*var(--u)) calc(30*var(--u)) rgba(0,0,0,.45)}
.m-excerpt p{font-size:calc(13.5*var(--u));line-height:1.65;color:#d4d6dc}
.m-place{color:#f472b6;font-weight:500;border-bottom:1px dashed rgba(244,114,182,.6)}
.m-place sup{font-family:var(--f-mono);font-size:.72em;margin-left:calc(2*var(--u));color:#f9a8d4}
.m-stats{position:absolute;right:calc(22*var(--u));top:calc(22*var(--u));display:flex;gap:calc(8*var(--u))}
.m-stats .m-tag{background:rgba(30,32,39,.94);font-size:calc(12.5*var(--u));padding:calc(4*var(--u)) calc(10*var(--u))}
.m-cl{transform-box:fill-box;transform-origin:center;animation:m-cl 10s ease infinite}
@keyframes m-cl{0%,30%{opacity:1;transform:none}38%,88%{opacity:0;transform:scale(1.8)}96%,100%{opacity:1;transform:none}}
.m-kids{animation:m-kids 10s ease infinite}
@keyframes m-kids{0%,32%{opacity:0}40%,86%{opacity:1}94%,100%{opacity:0}}
.m-ping{transform-box:fill-box;transform-origin:center;animation:m-pulse 2.6s ease-in-out infinite}
.m-slot{display:grid}
.m-slot > *{grid-area:1/1}
.m-typing{align-self:start}

/* ---------- hero stage: many sources become one record, then one brief ---------- */
.hero__stage{position:relative;container-type:inline-size;aspect-ratio:1600/720;border-radius:20px;overflow:hidden;border:1px solid var(--line-2);
  background:radial-gradient(55% 75% at 52% 50%,rgba(87,187,246,.18),transparent 70%),radial-gradient(35% 50% at 85% 50%,rgba(139,92,246,.12),transparent 70%),linear-gradient(#18191f,#121318);
  box-shadow:0 60px 120px -60px rgba(0,0,0,.95),0 0 0 1px rgba(87,187,246,.08) inset}
.mk-hero{background:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px) 0 0/calc(40*var(--u)) calc(40*var(--u)),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px) 0 0/calc(40*var(--u)) calc(40*var(--u))}
.m-canvas{position:absolute;top:0;left:0;width:calc(1600*var(--u));height:calc(720*var(--u))}
.m-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.m-wires path{fill:none}
.m-wires .base path{stroke-width:1.5;opacity:.28;stroke-dasharray:3 7;animation:m-dash 1.4s linear infinite}
@keyframes m-dash{to{stroke-dashoffset:-20}}
.m-wires .pulse path{stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-dasharray:70 1000;stroke-dashoffset:70;animation:m-run 4s cubic-bezier(.45,0,.55,1) infinite;filter:drop-shadow(0 0 6px currentColor)}
@keyframes m-run{0%{stroke-dashoffset:70}55%,100%{stroke-dashoffset:-500}}
.m-hlbl{position:absolute;top:calc(22*var(--u));font-size:calc(12*var(--u));letter-spacing:.06em;text-transform:uppercase;color:#8a8d98}
.m-hsrc{position:absolute;display:flex;align-items:center;gap:calc(10*var(--u));width:calc(330*var(--u));height:calc(46*var(--u));padding:0 calc(12*var(--u));border-radius:calc(10*var(--u));
  background:rgba(34,36,43,.92);border:1px solid rgba(255,255,255,.08);box-shadow:0 calc(10*var(--u)) calc(24*var(--u)) rgba(0,0,0,.35);animation:m-float 6s ease-in-out infinite}
.m-hsrc p{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:calc(13*var(--u));color:#dfe0e5}
@keyframes m-float{50%{transform:translate(calc(6*var(--u)),calc(-4*var(--u)))}}
.m-spine{position:absolute;left:calc(799*var(--u));top:calc(80*var(--u));height:calc(570*var(--u));width:calc(3*var(--u));border-radius:2px;
  background:linear-gradient(transparent,#57bbf6 12%,#8b5cf6 88%,transparent);box-shadow:0 0 calc(18*var(--u)) rgba(87,187,246,.7)}
.m-node{position:absolute;left:calc(793.5*var(--u));width:calc(14*var(--u));height:calc(14*var(--u));border-radius:50%;background:#17181e;border:calc(2.5*var(--u)) solid #57bbf6;animation:m-node 10s ease infinite}
@keyframes m-node{0%,16%{background:#9cc3ff;box-shadow:0 0 0 calc(6*var(--u)) rgba(87,187,246,.25),0 0 calc(26*var(--u)) #57bbf6}22%,100%{background:#17181e;box-shadow:none}}
.m-evc{position:absolute;left:calc(826*var(--u));width:calc(300*var(--u));padding:calc(10*var(--u)) calc(13*var(--u));border-radius:calc(10*var(--u));background:#202229;border:1px solid rgba(255,255,255,.08);animation:m-evc 10s ease infinite}
@keyframes m-evc{0%,16%{border-color:rgba(87,187,246,.75);background:#1f2740;transform:translateX(calc(6*var(--u)))}22%,100%{border-color:rgba(255,255,255,.08);background:#202229;transform:none}}
.m-evc .mn{font-size:calc(10.5*var(--u));color:#8a8d98}
.m-evc h6{margin-top:calc(2*var(--u));font-size:calc(14*var(--u));font-weight:600;color:#fff;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-evc--bad .mn{color:#f87171}
.m-evc--gap{background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 calc(6*var(--u)),transparent 0 calc(12*var(--u))),#1b1c22;border-style:dashed}
.m-hbrief{position:absolute;left:calc(1200*var(--u));top:calc(110*var(--u));width:calc(370*var(--u));height:calc(500*var(--u));display:flex;flex-direction:column;gap:calc(12*var(--u));padding:calc(20*var(--u));
  border-radius:calc(14*var(--u));background:linear-gradient(180deg,rgba(87,187,246,.12),transparent 45%),#1d1f27;border:1px solid rgba(87,187,246,.45);box-shadow:0 0 calc(50*var(--u)) rgba(87,187,246,.18)}
.m-hbrief h6{font-size:calc(20*var(--u));line-height:1.25;color:#fff;font-weight:600}
.m-hbrief p{font-size:calc(14*var(--u));line-height:1.65;color:#d6d8de}
.m-w{display:block;height:calc(8*var(--u));border-radius:calc(4*var(--u));background:linear-gradient(90deg,#3a3d47,#4b5060);transform-origin:left;animation:m-write 10s ease infinite}
@keyframes m-write{0%,4%{transform:scaleX(0)}14%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.m-hbrief .m-q{margin-top:auto}
@media (max-width:700px){
  .hero__stage{aspect-ratio:1050/720;border-radius:14px}
  .hero__stage .mock{--dw:1050 !important}
  .hero__stage .m-canvas{left:calc(-540*var(--u))}
}

/* Type scale tuned after layout review: these read at window size, not app size. */
.m-two .mn{font-size:calc(22*var(--u))}
.m-two p{font-size:calc(14*var(--u))}
.m-pick h6{font-size:calc(14.5*var(--u))}
.m-pick .mn{font-size:calc(11.5*var(--u))}
.m-page{gap:calc(20*var(--u))}
.m-page__head h5{font-size:calc(28*var(--u))}
.m-sec h6{font-size:calc(12.5*var(--u))}
.m-sec p{font-size:calc(17*var(--u))}
.m-when li{font-size:calc(14*var(--u));max-width:calc(200*var(--u))}
.m-when .mn{font-size:calc(12*var(--u))}
.m-note{bottom:calc(28*var(--u));font-size:calc(13.5*var(--u));width:calc(250*var(--u))}
.mk-chat{gap:calc(16*var(--u));padding:calc(24*var(--u))}
.m-chat__head b{font-size:calc(17*var(--u))}
.m-ask,.m-ans{font-size:calc(17.5*var(--u))}
.m-ans li::before{top:calc(13*var(--u))}
.mk-chat .m-lbl{font-size:calc(12.5*var(--u))}
.m-ref h6{font-size:calc(15*var(--u))}
.m-ref .mn{font-size:calc(11.5*var(--u))}
.m-input{font-size:calc(15.5*var(--u))}