/* =========================================================================
   SafeAll Asia - product pages (assets/product.css, loaded with assets/product.js)
   Design: ui-ux spec "5 product pages" (3 Nov 2026). Tokens come from styles.css, nothing is redefined here.

   Rules this file keeps:
   - The default markup is the FINAL state of every mock (no JS, reduced motion, print). JS adds .mk--armed and
     walks the .is-bN classes; every "before" look is keyed on .mk--armed, never on the bare element.
   - --ok / --warn / --crit / --offline appear in a mock only as the state of the customer's equipment.
     Selection and "on" are white/neutral. Our own states (running, resuming, not measured) are neutral.
   - Animation = transform / opacity / stroke-dashoffset only (the one exception is data-box, wall windows).
   - No @property, no :has(), no animation-timeline (Safari / iOS).

   ========================================================================= */

/* ---------- hero: pose poster (fallback and first paint) + the stage canvas at >= 900px (boot.js pose mode) ----------
   Posters: assets/img/pose-<id>-800.webp / -1600.webp, rendered from the stage (R15: regenerate if TOUR changes).
   Pages only set data-scene="product" data-pose="<id>". These rules override both generic .hero--page[data-scene] poster rules. */
.hero--page[data-scene="product"] { --scene-h: 340px; --poster-y: 50%; background-color: var(--bg); background-position: 50% var(--poster-y); }
.hero--page[data-scene="product"][data-pose="recorder"] { background-image: url(img/pose-recorder-800.webp); }
.hero--page[data-scene="product"][data-pose="health"] { background-image: url(img/pose-health-800.webp); }
.hero--page[data-scene="product"][data-pose="sharing"] { background-image: url(img/pose-sharing-800.webp); }
.hero--page[data-scene="product"][data-pose="wall"] { background-image: url(img/pose-wall-800.webp); }
.hero--page[data-scene="product"][data-pose="csim"] { background-image: url(img/pose-csim-800.webp); }
@media (min-width: 701px) {
  .hero--page[data-scene="product"] { --poster-y: 50%; }
  .hero--page[data-scene="product"][data-pose="recorder"] { background-image: url(img/pose-recorder-1600.webp); }
  .hero--page[data-scene="product"][data-pose="health"] { background-image: url(img/pose-health-1600.webp); }
  .hero--page[data-scene="product"][data-pose="sharing"] { background-image: url(img/pose-sharing-1600.webp); }
  .hero--page[data-scene="product"][data-pose="wall"] { background-image: url(img/pose-wall-1600.webp); }
  .hero--page[data-scene="product"][data-pose="csim"] { background-image: url(img/pose-csim-1600.webp); }
}
@media (min-width: 900px) {
  .hero--page[data-scene="product"] { min-height: clamp(520px, 74svh, 700px); }
}
/* the base .hero is a flex row with align-items:center; the product hero keeps the text block at the top-left of the band */
.hero--page[data-scene="product"] .hero__in { width: 100%; }
.hero--page[data-scene="product"] .btn-row { margin-top: 28px; }

/* breadcrumb: one line at 360px (the product name is at most 17 characters) */
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; list-style: none; margin: 0 0 14px; padding: 0; font-size: 13px; line-height: var(--lh-th); color: var(--muted); }
.crumb li { display: inline-flex; align-items: center; min-height: 44px; min-width: 0; }
.crumb li + li::before { content: "\203A"; margin-right: 6px; color: var(--muted); }
.crumb a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.crumb a:hover { color: #fff; }
.crumb [aria-current="page"] { color: var(--muted); }

/* product switcher: the shared .modnav row, not sticky here (the page already has a sticky header) */
.modnav--static { position: static; top: auto; background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
.modnav--static a[aria-current="true"] { background: rgba(255, 255, 255, 0.10); border-color: var(--text); color: #fff; }

/* section heading helper (kit block titles) */
.psec__head { max-width: 70ch; margin-bottom: 34px; }
.psec__head .h2 { text-wrap: balance; }
.pwrap-narrow { max-width: 70ch; }

/* ---------- problem / how / use cases / deploy / docs / cta ---------- */
.checks--ask li > span { min-width: 0; overflow-wrap: break-word; line-height: var(--lh-th); }

/* how: the connector draws once and each step number lights in order (reveal only, about 1.2 s) */
.pflow { position: relative; }
.pflow .card { min-width: 0; overflow-wrap: break-word; position: relative; }
.pflow .card h3 { line-height: var(--lh-th); }
/* connector: one segment per step, drawn beside the number and carried to the next card's edge
   (card padding 22 + border 1 + grid gap 20 = 43px), so it works for any step count and never crosses card text */
@media (min-width: 941px) {
  .pflow .card:not(:last-child) .step__no { display: flex; align-items: center; gap: 10px; }
  .pflow .card:not(:last-child) .step__no::after { content: ""; flex: 1; height: 1px; margin-right: -43px; background: var(--line); transform-origin: 0 50%; pointer-events: none; }
}
.pm-armed .pflow .step__no { transition: color .4s var(--ease); transition-delay: calc(var(--pi, 0) * 300ms); }
.pm-armed .pflow:not(.is-in) .step__no { color: var(--muted); }
@media (min-width: 941px) {
  .pm-armed .pflow .card:not(:last-child) .step__no::after { transition: transform 600ms var(--ease); transition-delay: calc(var(--pi, 0) * 300ms + 200ms); }
  .pm-armed .pflow:not(.is-in) .card:not(:last-child) .step__no::after { transform: scaleX(0); }
}

.grid--auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid--auto > * { min-width: 0; }
.grid--auto .card { overflow-wrap: break-word; }
.grid--auto .card h3 { line-height: var(--lh-th); }
.grid--auto .card p { line-height: var(--lh-th); }

.facts--deploy { margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.facts--deploy li { min-width: 0; }
.facts--deploy li span { margin-top: 0; font-size: clamp(16px, 1.6vw, 19px); color: var(--text); line-height: var(--lh-th); overflow-wrap: break-word; }
@media (max-width: 640px) { .facts--deploy { grid-template-columns: 1fr; } }

.docs { display: grid; gap: 12px; max-width: 760px; }
.docs li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); min-width: 0; }
.docs__title { flex: 1 1 260px; min-width: 0; line-height: var(--lh-th); overflow-wrap: break-word; }
.docs .btn { min-height: 44px; padding-block: 8px; }
@media (max-width: 620px) { .docs .btn { width: 100%; } }
.pnote { margin: 22px auto 0; max-width: 70ch; text-align: center; line-height: var(--lh-th); }
.pnote a { text-decoration: underline; text-underline-offset: 3px; }
.cta h2 { text-wrap: balance; }
.cta .lead { line-height: var(--lh-th); }

/* ---------- chapters ---------- */
.chap { display: grid; grid-template-columns: minmax(0, 1fr); padding-block: clamp(28px, 5vw, 56px); border-top: 1px solid var(--line-soft); min-width: 0; }
.chap:first-of-type { border-top: 0; }
.chap__text { display: contents; }
.chap__text > .h3 { order: 1; line-height: var(--lh-th); overflow-wrap: break-word; }
.chap .mk { order: 2; margin: 16px auto 20px; width: 100%; max-width: 640px; }
.chap__text > ul { order: 3; margin-top: 0; }
.chap__text li { min-width: 0; overflow-wrap: break-word; line-height: var(--lh-th); }
.chap__text li b { font-weight: 600; color: var(--text); }
.chap__text li > span, .chap__text li > div { min-width: 0; }

@media (min-width: 1000px) and (min-height: 640px) {
  .chap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4vw, 64px); align-items: start; padding-block: 12svh; }
  .chap__text { display: block; position: relative; padding-left: 22px; min-width: 0; }
  .chap__text::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--line); }
  .chap__text > .h3 { margin-bottom: 4px; }
  .chap .mk { position: sticky; top: calc(70px + var(--tourbar, 0px) + 24px); align-self: start; margin: 0; max-width: none; grid-column: 2; grid-row: 1; }
  .chap__text li { min-block-size: 26svh; padding-block: 3svh; position: relative; }
  .chap--dense .chap__text li { min-block-size: 20svh; }
  .chap__text li::after { content: ""; position: absolute; left: -22px; top: 0; bottom: 0; width: 2px; background: transparent; transition: background .3s var(--ease); }
  .chap--live .chap__text li { transition: color .3s var(--ease); }
  .chap--live .chap__text li:not(.is-cur), .chap--live .chap__text li:not(.is-cur) b { color: var(--muted); }
  .chap--live .chap__text li.is-cur::after { background: var(--text-2); }
}

/* ---------- mock frame ---------- */
.mk { position: relative; min-width: 0; overflow: hidden; overflow: clip; margin-inline: auto; }
.mk .console__bar { min-width: 0; }
.mk .console__bar > span:first-child { min-width: 0; overflow-wrap: break-word; line-height: var(--lh-th); }
.mk__tag { margin-left: auto; flex: none; white-space: nowrap; font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; }
.mk .console__body { padding: 14px; gap: 10px; min-width: 0; font-size: 13px; line-height: var(--lh-th); color: var(--text-2); }
.mk .console__body > * { min-width: 0; }
.mk * { min-width: 0; }
.mk .chip { font-size: 12.5px; padding: 4px 11px; line-height: var(--lh-th); overflow-wrap: break-word; }
.mk--time { cursor: pointer; }
/* qualifier chip: the copy's own hedge (ในยี่ห้อที่รองรับ, ตามรุ่น, ...) travels with the picture. Neutral, dashed. */
.mk__qual { display: inline-flex; align-items: center; align-self: start; max-width: 100%; padding: 3px 11px; border: 1px dashed var(--muted); border-radius: 999px; font-size: 12px; line-height: var(--lh-th); color: var(--text-2); background: transparent; overflow-wrap: break-word; }
.mk__cap { font: 600 12px/1.5 var(--font); color: var(--text-2); letter-spacing: 0; overflow-wrap: break-word; }
.mk__cap time, .mk__cap code { font-family: var(--mono); }
.mk__panels { display: grid; min-width: 0; }
.mk__panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; display: grid; gap: 10px; align-content: start; min-width: 0; transition: opacity .25s var(--ease), visibility 0s linear .25s; }
@media (min-width: 1000px) and (min-height: 640px) {
  .mk .console__body { max-height: calc(min(520px, 100svh - 118px) - 44px); overflow: hidden; overflow: clip; }
}

/* ---------- engine base: transitions of the keyed elements ---------- */
.mk [data-s], .mk [data-x], .mk [data-only], .mk [data-v], .mk [data-box], .mk [data-draw] {
  transition: opacity .4s var(--ease), transform .5s var(--ease), left .5s var(--ease), top .5s var(--ease), width .5s var(--ease), height .5s var(--ease), stroke-dashoffset .6s var(--ease);
  transition-delay: calc(var(--k, 0) * 110ms + var(--d, 0ms));
}
.mk [data-v] {
  transform: translate(var(--vx, 0px), var(--vy, 0px)) rotate(var(--vr, 0deg)) scale(var(--vs, 1)) scaleX(var(--vf, 1));
  opacity: var(--vo, 1);
}
.mk [data-box] { position: absolute; left: var(--vl); top: var(--vt); width: var(--vw); height: var(--vh); }
.mk .mk-vert[data-v] { transform: translate(var(--vx, 0px), var(--vy, 0px)) scaleY(var(--vf, 1)); transform-origin: 50% 0; }
.mk [data-grow] { transform-origin: 0 50%; }
.mk [data-draw] { stroke-dasharray: 1; stroke-dashoffset: 0; fill: none; }

/* animations (played once when the beat is reached, only when JS armed the mock) */
.mk [data-a="pass"], .mk [data-a="flash"] { opacity: 0; }
.mk [data-a="pass"] { --an: mk-pass; }
.mk [data-a="flash"] { --an: mk-flash; --t: 380ms; }
.mk [data-a="hop"] { --an: mk-hop; --t: 1500ms; }
.mk [data-a="lit"] { --an: mk-lit; --t: 700ms; }
.mk [data-a="lithold"] { --an: mk-lithold; --t: 400ms; border-color: var(--text); color: var(--text); background: rgba(255, 255, 255, 0.12); }
.mk [data-a="resume"] { --an: mk-resume; --t: 2200ms; }
@keyframes mk-pass { 0% { opacity: 0; } 14% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes mk-flash { 0% { opacity: 0; } 25% { opacity: .85; } 100% { opacity: 0; } }
@keyframes mk-hop { 0% { transform: translate(0, 0); } 25% { transform: translate(100%, 0); } 50% { transform: translate(100%, 100%); } 75% { transform: translate(0, 100%); } 100% { transform: translate(100%, 0); } }
@keyframes mk-lit { 0% { border-color: var(--line); color: var(--text-2); background: var(--bg-alt); } 15%, 85% { border-color: var(--text); color: var(--text); background: rgba(255, 255, 255, 0.12); } 100% { border-color: var(--line); color: var(--text-2); background: var(--bg-alt); } }
@keyframes mk-lithold { from { border-color: var(--line); color: var(--text-2); background: var(--bg-alt); } to { border-color: var(--text); color: var(--text); background: rgba(255, 255, 255, 0.12); } }
@keyframes mk-resume { 0% { transform: scaleX(0); } 30% { transform: scaleX(.55); } 62% { transform: scaleX(.55); } 100% { transform: scaleX(1); } }

/* loops: paused unless the mock is on screen (.mk--run); with no JS they never run */
.mk [data-loop] { animation-duration: 1800ms; animation-iteration-count: infinite; animation-timing-function: linear; animation-play-state: paused; }
.mk--run [data-loop] { animation-play-state: running; }
.mk [data-loop="pulse"] { animation-name: mk-pulse; }
.mk [data-loop="pkt"] { animation-name: mk-pkt; animation-duration: 1500ms; }
.mk [data-loop="sweep"] { animation-name: mk-sweep; animation-duration: 2400ms; }
.mk [data-loop="beat"] { animation-name: mk-beat; animation-duration: 1200ms; }
@keyframes mk-pulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.1); opacity: 0; } }
@keyframes mk-pkt { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(36px); opacity: 0; } }
@keyframes mk-sweep { 0% { transform: translateX(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateX(var(--sw, 240px)); opacity: 0; } }
@keyframes mk-beat { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .5; } }

/* ==== GENERATED by gen_engine_css.py: beat-keyed engine rules (beats 1..8, channels x y r s o f l t w h) ==== */
.mk [data-v], .mk [data-box] {
  --x0:initial;
  --x1:initial;
  --x2:initial;
  --x3:initial;
  --x4:initial;
  --x5:initial;
  --x6:initial;
  --x7:initial;
  --x8:initial;
  --y0:initial;
  --y1:initial;
  --y2:initial;
  --y3:initial;
  --y4:initial;
  --y5:initial;
  --y6:initial;
  --y7:initial;
  --y8:initial;
  --r0:initial;
  --r1:initial;
  --r2:initial;
  --r3:initial;
  --r4:initial;
  --r5:initial;
  --r6:initial;
  --r7:initial;
  --r8:initial;
  --s0:initial;
  --s1:initial;
  --s2:initial;
  --s3:initial;
  --s4:initial;
  --s5:initial;
  --s6:initial;
  --s7:initial;
  --s8:initial;
  --o0:initial;
  --o1:initial;
  --o2:initial;
  --o3:initial;
  --o4:initial;
  --o5:initial;
  --o6:initial;
  --o7:initial;
  --o8:initial;
  --f0:initial;
  --f1:initial;
  --f2:initial;
  --f3:initial;
  --f4:initial;
  --f5:initial;
  --f6:initial;
  --f7:initial;
  --f8:initial;
  --l0:initial;
  --l1:initial;
  --l2:initial;
  --l3:initial;
  --l4:initial;
  --l5:initial;
  --l6:initial;
  --l7:initial;
  --l8:initial;
  --t0:initial;
  --t1:initial;
  --t2:initial;
  --t3:initial;
  --t4:initial;
  --t5:initial;
  --t6:initial;
  --t7:initial;
  --t8:initial;
  --w0:initial;
  --w1:initial;
  --w2:initial;
  --w3:initial;
  --w4:initial;
  --w5:initial;
  --w6:initial;
  --w7:initial;
  --w8:initial;
  --h0:initial;
  --h1:initial;
  --h2:initial;
  --h3:initial;
  --h4:initial;
  --h5:initial;
  --h6:initial;
  --h7:initial;
  --h8:initial;
}
.mk [data-v], .mk [data-box] {
  --cx0:var(--x0,0px);
  --cx1:var(--x1,var(--cx0));
  --cx2:var(--x2,var(--cx1));
  --cx3:var(--x3,var(--cx2));
  --cx4:var(--x4,var(--cx3));
  --cx5:var(--x5,var(--cx4));
  --cx6:var(--x6,var(--cx5));
  --cx7:var(--x7,var(--cx6));
  --cx8:var(--x8,var(--cx7));
  --cy0:var(--y0,0px);
  --cy1:var(--y1,var(--cy0));
  --cy2:var(--y2,var(--cy1));
  --cy3:var(--y3,var(--cy2));
  --cy4:var(--y4,var(--cy3));
  --cy5:var(--y5,var(--cy4));
  --cy6:var(--y6,var(--cy5));
  --cy7:var(--y7,var(--cy6));
  --cy8:var(--y8,var(--cy7));
  --cr0:var(--r0,0deg);
  --cr1:var(--r1,var(--cr0));
  --cr2:var(--r2,var(--cr1));
  --cr3:var(--r3,var(--cr2));
  --cr4:var(--r4,var(--cr3));
  --cr5:var(--r5,var(--cr4));
  --cr6:var(--r6,var(--cr5));
  --cr7:var(--r7,var(--cr6));
  --cr8:var(--r8,var(--cr7));
  --cs0:var(--s0,1);
  --cs1:var(--s1,var(--cs0));
  --cs2:var(--s2,var(--cs1));
  --cs3:var(--s3,var(--cs2));
  --cs4:var(--s4,var(--cs3));
  --cs5:var(--s5,var(--cs4));
  --cs6:var(--s6,var(--cs5));
  --cs7:var(--s7,var(--cs6));
  --cs8:var(--s8,var(--cs7));
  --co0:var(--o0,1);
  --co1:var(--o1,var(--co0));
  --co2:var(--o2,var(--co1));
  --co3:var(--o3,var(--co2));
  --co4:var(--o4,var(--co3));
  --co5:var(--o5,var(--co4));
  --co6:var(--o6,var(--co5));
  --co7:var(--o7,var(--co6));
  --co8:var(--o8,var(--co7));
  --cf0:var(--f0,1);
  --cf1:var(--f1,var(--cf0));
  --cf2:var(--f2,var(--cf1));
  --cf3:var(--f3,var(--cf2));
  --cf4:var(--f4,var(--cf3));
  --cf5:var(--f5,var(--cf4));
  --cf6:var(--f6,var(--cf5));
  --cf7:var(--f7,var(--cf6));
  --cf8:var(--f8,var(--cf7));
  --cl0:var(--l0,auto);
  --cl1:var(--l1,var(--cl0));
  --cl2:var(--l2,var(--cl1));
  --cl3:var(--l3,var(--cl2));
  --cl4:var(--l4,var(--cl3));
  --cl5:var(--l5,var(--cl4));
  --cl6:var(--l6,var(--cl5));
  --cl7:var(--l7,var(--cl6));
  --cl8:var(--l8,var(--cl7));
  --ct0:var(--t0,auto);
  --ct1:var(--t1,var(--ct0));
  --ct2:var(--t2,var(--ct1));
  --ct3:var(--t3,var(--ct2));
  --ct4:var(--t4,var(--ct3));
  --ct5:var(--t5,var(--ct4));
  --ct6:var(--t6,var(--ct5));
  --ct7:var(--t7,var(--ct6));
  --ct8:var(--t8,var(--ct7));
  --cw0:var(--w0,auto);
  --cw1:var(--w1,var(--cw0));
  --cw2:var(--w2,var(--cw1));
  --cw3:var(--w3,var(--cw2));
  --cw4:var(--w4,var(--cw3));
  --cw5:var(--w5,var(--cw4));
  --cw6:var(--w6,var(--cw5));
  --cw7:var(--w7,var(--cw6));
  --cw8:var(--w8,var(--cw7));
  --ch0:var(--h0,auto);
  --ch1:var(--h1,var(--ch0));
  --ch2:var(--h2,var(--ch1));
  --ch3:var(--h3,var(--ch2));
  --ch4:var(--h4,var(--ch3));
  --ch5:var(--h5,var(--ch4));
  --ch6:var(--h6,var(--ch5));
  --ch7:var(--h7,var(--ch6));
  --ch8:var(--h8,var(--ch7));
}
.mk [data-v], .mk [data-box] {--vx:var(--cx0);--vy:var(--cy0);--vr:var(--cr0);--vs:var(--cs0);--vo:var(--co0);--vf:var(--cf0);--vl:var(--cl0);--vt:var(--ct0);--vw:var(--cw0);--vh:var(--ch0)}
.mk.is-b1 [data-v], .mk.is-b1 [data-box] {--vx:var(--cx1);--vy:var(--cy1);--vr:var(--cr1);--vs:var(--cs1);--vo:var(--co1);--vf:var(--cf1);--vl:var(--cl1);--vt:var(--ct1);--vw:var(--cw1);--vh:var(--ch1)}
.mk.is-b2 [data-v], .mk.is-b2 [data-box] {--vx:var(--cx2);--vy:var(--cy2);--vr:var(--cr2);--vs:var(--cs2);--vo:var(--co2);--vf:var(--cf2);--vl:var(--cl2);--vt:var(--ct2);--vw:var(--cw2);--vh:var(--ch2)}
.mk.is-b3 [data-v], .mk.is-b3 [data-box] {--vx:var(--cx3);--vy:var(--cy3);--vr:var(--cr3);--vs:var(--cs3);--vo:var(--co3);--vf:var(--cf3);--vl:var(--cl3);--vt:var(--ct3);--vw:var(--cw3);--vh:var(--ch3)}
.mk.is-b4 [data-v], .mk.is-b4 [data-box] {--vx:var(--cx4);--vy:var(--cy4);--vr:var(--cr4);--vs:var(--cs4);--vo:var(--co4);--vf:var(--cf4);--vl:var(--cl4);--vt:var(--ct4);--vw:var(--cw4);--vh:var(--ch4)}
.mk.is-b5 [data-v], .mk.is-b5 [data-box] {--vx:var(--cx5);--vy:var(--cy5);--vr:var(--cr5);--vs:var(--cs5);--vo:var(--co5);--vf:var(--cf5);--vl:var(--cl5);--vt:var(--ct5);--vw:var(--cw5);--vh:var(--ch5)}
.mk.is-b6 [data-v], .mk.is-b6 [data-box] {--vx:var(--cx6);--vy:var(--cy6);--vr:var(--cr6);--vs:var(--cs6);--vo:var(--co6);--vf:var(--cf6);--vl:var(--cl6);--vt:var(--ct6);--vw:var(--cw6);--vh:var(--ch6)}
.mk.is-b7 [data-v], .mk.is-b7 [data-box] {--vx:var(--cx7);--vy:var(--cy7);--vr:var(--cr7);--vs:var(--cs7);--vo:var(--co7);--vf:var(--cf7);--vl:var(--cl7);--vt:var(--ct7);--vw:var(--cw7);--vh:var(--ch7)}
.mk.is-b8 [data-v], .mk.is-b8 [data-box] {--vx:var(--cx8);--vy:var(--cy8);--vr:var(--cr8);--vs:var(--cs8);--vo:var(--co8);--vf:var(--cf8);--vl:var(--cl8);--vt:var(--ct8);--vw:var(--cw8);--vh:var(--ch8)}
.mk--armed:not(.is-b1) [data-s="1"]:not([data-draw]) { opacity: 0; transform: translateY(8px); transition-delay: 0s; }
.mk--armed:not(.is-b1) [data-s="1"][data-draw] { stroke-dashoffset: 1; transition-delay: 0s; }
.mk--armed:not(.is-b1) [data-s="1"][data-grow] { transform: scaleX(0); opacity: 1; transition-delay: 0s; }
.mk.is-b1 [data-x="1"] { opacity: 0; }
.mk:not([data-b="1"]) [data-only="1"] { opacity: 0; transition-delay: 0s; }
.mk--armed:not(.is-b1) [data-a="hop"][data-at="1"] { opacity: 0; }
.mk--armed:not(.is-b1) [data-a="lithold"][data-at="1"] { border-color: var(--line); color: var(--text-2); background: var(--bg-alt); }
.mk--armed.is-b1 [data-a][data-at="1"] { animation: var(--an) var(--t, 700ms) linear var(--d, 0ms) 1 both; }
.mk.is-b1 .chip[data-on="1"] { border-color: var(--text); color: var(--text); background: rgba(255, 255, 255, 0.12); }
.mk.is-b1 .chip[data-off="1"] { border-color: var(--line); color: var(--text-2); background: var(--bg-alt); }
.mk--armed:not(.is-b2) [data-s="2"]:not([data-draw]) { opacity: 0; transform: translateY(8px); transition-delay: 0s; }
.mk--armed:not(.is-b2) [data-s="2"][data-draw] { stroke-dashoffset: 1; transition-delay: 0s; }
.mk--armed:not(.is-b2) [data-s="2"][data-grow] { transform: scaleX(0); opacity: 1; transition-delay: 0s; }
.mk.is-b2 [data-x="2"] { opacity: 0; }
.mk:not([data-b="2"]) [data-only="2"] { opacity: 0; transition-delay: 0s; }
.mk--armed:not(.is-b2) [data-a="hop"][data-at="2"] { opacity: 0; }
.mk--armed:not(.is-b2) [data-a="lithold"][data-at="2"] { border-color: var(--line); color: var(--text-2); background: var(--bg-alt); }
.mk--armed.is-b2 [data-a][data-at="2"] { animation: var(--an) var(--t, 700ms) linear var(--d, 0ms) 1 both; }
.mk.is-b2 .chip[data-on="2"] { border-color: var(--text); color: var(--text); background: rgba(255, 255, 255, 0.12); }
.mk.is-b2 .chip[data-off="2"] { border-color: var(--line); color: var(--text-2); background: var(--bg-alt); }
.mk--armed:not(.is-b3) [data-s="3"]:not([data-draw]) { opacity: 0; transform: translateY(8px); transition-delay: 0s; }
.mk--armed:not(.is-b3) [data-s="3"][data-draw] { stroke-dashoffset: 1; transition-delay: 0s; }
.mk--armed:not(.is-b3) [data-s="3"][data-grow] { transform: scaleX(0); opacity: 1; transition-delay: 0s; }
.mk.is-b3 [data-x="3"] { opacity: 0; }
.mk:not([data-b="3"]) [data-only="3"] { opacity: 0; transition-delay: 0s; }
.mk--armed:not(.is-b3) [data-a="hop"][data-at="3"] { opacity: 0; }
.mk--armed:not(.is-b3) [data-a="lithold"][data-at="3"] { border-color: var(--line); color: var(--text-2); background: var(--bg-alt); }
.mk--armed.is-b3 [data-a][data-at="3"] { animation: var(--an) var(--t, 700ms) linear var(--d, 0ms) 1 both; }
.mk.is-b3 .chip[data-on="3"] { border-color: var(--text); color: var(--text); background: rgba(255, 255, 255, 0.12); }
.mk.is-b3 .chip[data-off="3"] { border-color: var(--line); color: var(--text-2); background: var(--bg-alt); }
.mk--armed:not(.is-b4) [data-s="4"]:not([data-draw]) { opacity: 0; transform: translateY(8px); transition-delay: 0s; }
.mk--armed:not(.is-b4) [data-s="4"][data-draw] { stroke-dashoffset: 1; transition-delay: 0s; }
.mk--armed:not(.is-b4) [data-s="4"][data-grow] { transform: scaleX(0); opacity: 1; transition-delay: 0s; }
.mk.is-b4 [data-x="4"] { opacity: 0; }
.mk:not([data-b="4"]) [data-only="4"] { opacity: 0; transition-delay: 0s; }
.mk--armed:not(.is-b4) [data-a="hop"][data-at="4"] { opacity: 0; }
.mk--armed:not(.is-b4) [data-a="lithold"][data-at="4"] { border-color: var(--line); color: var(--text-2); background: var(--bg-alt); }
.mk--armed.is-b4 [data-a][data-at="4"] { animation: var(--an) var(--t, 700ms) linear var(--d, 0ms) 1 both; }
.mk.is-b4 .chip[data-on="4"] { border-color: var(--text); color: var(--text); background: rgba(255, 255, 255, 0.12); }
.mk.is-b4 .chip[data-off="4"] { border-color: var(--line); color: var(--text-2); background: var(--bg-alt); }
.mk--armed:not(.is-b5) [data-s="5"]:not([data-draw]) { opacity: 0; transform: translateY(8px); transition-delay: 0s; }
.mk--armed:not(.is-b5) [data-s="5"][data-draw] { stroke-dashoffset: 1; transition-delay: 0s; }
.mk--armed:not(.is-b5) [data-s="5"][data-grow] { transform: scaleX(0); opacity: 1; transition-delay: 0s; }
.mk.is-b5 [data-x="5"] { opacity: 0; }
.mk:not([data-b="5"]) [data-only="5"] { opacity: 0; transition-delay: 0s; }
.mk--armed:not(.is-b5) [data-a="hop"][data-at="5"] { opacity: 0; }
.mk--armed:not(.is-b5) [data-a="lithold"][data-at="5"] { border-color: var(--line); color: var(--text-2); background: var(--bg-alt); }
.mk--armed.is-b5 [data-a][data-at="5"] { animation: var(--an) var(--t, 700ms) linear var(--d, 0ms) 1 both; }
.mk.is-b5 .chip[data-on="5"] { border-color: var(--text); color: var(--text); background: rgba(255, 255, 255, 0.12); }
.mk.is-b5 .chip[data-off="5"] { border-color: var(--line); color: var(--text-2); background: var(--bg-alt); }
.mk--armed:not(.is-b6) [data-s="6"]:not([data-draw]) { opacity: 0; transform: translateY(8px); transition-delay: 0s; }
.mk--armed:not(.is-b6) [data-s="6"][data-draw] { stroke-dashoffset: 1; transition-delay: 0s; }
.mk--armed:not(.is-b6) [data-s="6"][data-grow] { transform: scaleX(0); opacity: 1; transition-delay: 0s; }
.mk.is-b6 [data-x="6"] { opacity: 0; }
.mk:not([data-b="6"]) [data-only="6"] { opacity: 0; transition-delay: 0s; }
.mk--armed:not(.is-b6) [data-a="hop"][data-at="6"] { opacity: 0; }
.mk--armed:not(.is-b6) [data-a="lithold"][data-at="6"] { border-color: var(--line); color: var(--text-2); background: var(--bg-alt); }
.mk--armed.is-b6 [data-a][data-at="6"] { animation: var(--an) var(--t, 700ms) linear var(--d, 0ms) 1 both; }
.mk.is-b6 .chip[data-on="6"] { border-color: var(--text); color: var(--text); background: rgba(255, 255, 255, 0.12); }
.mk.is-b6 .chip[data-off="6"] { border-color: var(--line); color: var(--text-2); background: var(--bg-alt); }
.mk--armed:not(.is-b7) [data-s="7"]:not([data-draw]) { opacity: 0; transform: translateY(8px); transition-delay: 0s; }
.mk--armed:not(.is-b7) [data-s="7"][data-draw] { stroke-dashoffset: 1; transition-delay: 0s; }
.mk--armed:not(.is-b7) [data-s="7"][data-grow] { transform: scaleX(0); opacity: 1; transition-delay: 0s; }
.mk.is-b7 [data-x="7"] { opacity: 0; }
.mk:not([data-b="7"]) [data-only="7"] { opacity: 0; transition-delay: 0s; }
.mk--armed:not(.is-b7) [data-a="hop"][data-at="7"] { opacity: 0; }
.mk--armed:not(.is-b7) [data-a="lithold"][data-at="7"] { border-color: var(--line); color: var(--text-2); background: var(--bg-alt); }
.mk--armed.is-b7 [data-a][data-at="7"] { animation: var(--an) var(--t, 700ms) linear var(--d, 0ms) 1 both; }
.mk.is-b7 .chip[data-on="7"] { border-color: var(--text); color: var(--text); background: rgba(255, 255, 255, 0.12); }
.mk.is-b7 .chip[data-off="7"] { border-color: var(--line); color: var(--text-2); background: var(--bg-alt); }
.mk--armed:not(.is-b8) [data-s="8"]:not([data-draw]) { opacity: 0; transform: translateY(8px); transition-delay: 0s; }
.mk--armed:not(.is-b8) [data-s="8"][data-draw] { stroke-dashoffset: 1; transition-delay: 0s; }
.mk--armed:not(.is-b8) [data-s="8"][data-grow] { transform: scaleX(0); opacity: 1; transition-delay: 0s; }
.mk.is-b8 [data-x="8"] { opacity: 0; }
.mk:not([data-b="8"]) [data-only="8"] { opacity: 0; transition-delay: 0s; }
.mk--armed:not(.is-b8) [data-a="hop"][data-at="8"] { opacity: 0; }
.mk--armed:not(.is-b8) [data-a="lithold"][data-at="8"] { border-color: var(--line); color: var(--text-2); background: var(--bg-alt); }
.mk--armed.is-b8 [data-a][data-at="8"] { animation: var(--an) var(--t, 700ms) linear var(--d, 0ms) 1 both; }
.mk.is-b8 .chip[data-on="8"] { border-color: var(--text); color: var(--text); background: rgba(255, 255, 255, 0.12); }
.mk.is-b8 .chip[data-off="8"] { border-color: var(--line); color: var(--text-2); background: var(--bg-alt); }
.mk[data-panel="a"] .mk__panel[data-p="a"] { opacity: 1; visibility: visible; transition-delay: 0s; }
.mk[data-panel="b"] .mk__panel[data-p="b"] { opacity: 1; visibility: visible; transition-delay: 0s; }
.mk[data-panel="c"] .mk__panel[data-p="c"] { opacity: 1; visibility: visible; transition-delay: 0s; }

/* =========================================================================
   PRIMITIVES (looks only; behaviour comes from the keyed engine rules above)
   ========================================================================= */

/* ---- shared bits ---- */
.mk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.mk-lbl { font: 600 12px/1.5 var(--mono); color: var(--text-2); }
.mk-box { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-alt); min-width: 0; }
.mk-box--dash { border-style: dashed; border-color: var(--muted); }
.mk-st { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; line-height: var(--lh-th); }
.mk-st::before { content: ""; width: 10px; height: 10px; flex: none; background: currentColor; border-radius: 50%; }
.mk-st--ok { color: var(--ok); }
.mk-st--warn { color: var(--warn); }
.mk-st--warn::before { border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.mk-st--crit { color: var(--text); } /* word stays readable (#C00000 on dark is about 2.3:1); the red lives in the mark */
.mk-st--crit::before { border-radius: 2px; background: var(--crit); }
.mk-st--off { color: var(--muted); }
.mk-st--off::before { background: transparent; border: 2px solid var(--offline); }
.mk-st--unk { color: var(--text-2); }
.mk-st--unk::before { background: transparent; border: 1px dashed var(--muted); }
.mk-st--crit.mk-st--x::before { content: "\2715"; width: auto; height: auto; background: none; color: var(--crit); font-size: 12px; line-height: 1; }
.mk-glyph { display: inline-block; width: 16px; height: 16px; flex: none; }
.mk-hatch { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0 3px, transparent 3px 7px); }
.mk-stack { display: grid; }
.mk-stack > * { grid-area: 1 / 1; }

/* ---- P1 grid ---- */
.mk-grid { position: relative; display: grid; min-height: 220px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-alt); overflow: hidden; overflow: clip; }
.mk-grid > .mk-lay { grid-area: 1 / 1; }
.mk-lay { display: grid; gap: 3px; padding: 3px; min-width: 0; }
.mk-lay--1 { grid-template-columns: 1fr; }
.mk-lay--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk-lay--16 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mk-lay--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk-lay--1 { background: var(--bg-alt); }
.mk-lay[data-a="pass"] { z-index: 1; }
.mk-cell { position: relative; display: grid; grid-template-rows: auto 1fr; min-width: 0; min-height: 40px; overflow: hidden; overflow: clip; border-radius: 3px; background: #1d1d22; }
.mk-cell__bar { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 1px 6px; font: 600 11px/1.5 var(--mono); color: var(--text-2); background: rgba(0, 0, 0, 0.4); position: relative; z-index: 1; }
.mk-cell__bar .mk-tagc { font: 600 11px/1.5 var(--font); color: var(--text); border: 1px solid var(--text-2); border-radius: 999px; padding: 0 7px; white-space: nowrap; }
.mk-cell__bar .mk-tagc--dash { border-style: dashed; color: var(--text-2); }
.mk-cell__pic { min-height: 30px; background:
  repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px),
  linear-gradient(135deg, #2b2b32, #1a1a1f 60%, #25252b); }
.mk-cell:nth-child(3n) .mk-cell__pic { filter: brightness(.82); }
.mk-cell:nth-child(4n+2) .mk-cell__pic { filter: brightness(1.12); }
.mk-cell--big { min-height: 150px; }
.mk-hop { position: absolute; left: 3px; top: 3px; width: calc((100% - 15px) / 4); height: calc((100% - 15px) / 4); margin: 0; border: 2px solid var(--text); border-radius: 3px; pointer-events: none; z-index: 2; box-sizing: border-box; transform: translate(100%, 0); }
.mk-screen2 { position: absolute; right: 8px; bottom: 8px; width: 38%; z-index: 3; border: 1px solid var(--text-2); border-radius: 4px; background: var(--surface-2); box-shadow: 0 6px 18px rgba(0, 0, 0, .5); overflow: hidden; }
.mk-screen2 .mk-cell__bar { background: var(--surface-2); }
.mk-screen2 .mk-cell__pic { min-height: 44px; }
.mk-zoomchip { position: absolute; left: 6px; bottom: 6px; z-index: 3; padding: 1px 8px; border-radius: 999px; background: rgba(16, 16, 18, .85); border: 1px solid var(--text-2); font-size: 12px; color: var(--text); }
.mk-flash { position: absolute; inset: 0; background: #fff; z-index: 4; pointer-events: none; }
.mk-strip { display: flex; gap: 6px; align-items: center; min-height: 28px; }
.mk-snap { width: 44px; height: 26px; border-radius: 3px; border: 1px solid var(--text-2); background: linear-gradient(135deg, #3a3a42, #1f1f24); flex: none; }
.mk-ptz { position: absolute; inset: auto 0 0 auto; }
.mk-ptzwrap { position: relative; display: grid; place-items: center; min-height: 170px; }
.mk-ring { position: relative; width: 132px; height: 132px; border-radius: 50%; border: 1px solid var(--line); background: rgba(16, 16, 18, 0.5); }
.mk-ring > i { position: absolute; left: 50%; top: 0; width: 2px; height: 9px; margin-left: -1px; background: var(--muted); transform-origin: 50% 66px; border-radius: 1px; }
.mk-ring__hand { position: absolute; inset: 0; }
.mk-ring__hand::after { content: ""; position: absolute; left: 50%; top: -2px; width: 8px; height: 14px; margin-left: -4px; border-radius: 2px; background: var(--text); }
.mk-ring__mid { position: absolute; inset: 24px; border-radius: 50%; overflow: hidden; overflow: clip; }
.mk-ring__mid .mk-cell__pic { position: absolute; inset: -12px; }
.mk-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-presets .chip { min-width: 30px; text-align: center; padding-inline: 8px; }

/* ---- P2 timeline ---- */
.mk-frame { position: relative; min-height: 96px; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; overflow: clip; background:
  repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px), linear-gradient(135deg, #2b2b32, #1a1a1f 60%, #25252b); }
.mk-frame .mk-lbl { position: absolute; left: 8px; top: 6px; }
.mk .tl__track { position: relative; overflow: hidden; overflow: clip; }
.tl__headw { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.tl__head { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--text); }
.mk-cal { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 3px; }
.mk-cal > i { position: relative; height: 22px; border: 1px solid var(--line); border-radius: 3px; background: var(--bg-alt); }
.mk-cal > i > b { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--text-2); }
.mk-cal > i.is-gap { border-style: dashed; border-color: var(--muted); }
.mk-sched { position: relative; height: 34px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-alt); }
.mk-sched > i { position: absolute; top: 6px; bottom: 6px; border-radius: 3px; background: rgba(255, 255, 255, .34); }
.mk-sched > b { position: absolute; top: 2px; bottom: 2px; width: 0; border-left: 2px dashed var(--text); }

/* ---- P3 job ---- */
.mk-fmt { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-bar { position: relative; height: 10px; border-radius: 999px; background: var(--bg-alt); border: 1px solid var(--line); overflow: hidden; overflow: clip; }
.mk-bar > i { position: absolute; inset: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.4); transform-origin: 0 50%; }
.mk-lanes { display: grid; gap: 8px; }
.mk-lane { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 8px; }
.mk-lane__bar { position: relative; height: 8px; border-radius: 999px; background: var(--bg-alt); border: 1px solid var(--line); overflow: hidden; overflow: clip; }
.mk-lane__bar > i { position: absolute; inset: 0; background: rgba(255, 255, 255, .42); transform-origin: 0 50%; }
.mk-lane { position: relative; }
.mk-lane__lbl { position: absolute; right: 0; top: -22px; z-index: 1; font-size: 12px; line-height: 1.5; color: var(--text-2); border: 1px dashed var(--muted); border-radius: 999px; padding: 0 10px; background: var(--surface); }
.mk-wm { position: absolute; inset: auto 8px 8px auto; display: flex; gap: 6px; align-items: center; z-index: 2; }
.mk-wm__t { font: 600 12px/1.5 var(--mono); color: rgba(255, 255, 255, .8); border: 1px solid rgba(255, 255, 255, .5); padding: 0 8px; border-radius: 3px; background: rgba(0, 0, 0, .25); }
.mk-wm__i { width: 22px; height: 22px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 4px; background: rgba(255, 255, 255, .18); }
.mk-log { border-left-width: 3px; border-left-color: var(--line); flex-wrap: wrap; gap: 4px 12px; align-items: flex-start; }
.mk-log .mocktxt { flex: 1 1 200px; min-width: 0; font-size: 13px; }
.mk-split { display: flex; gap: 6px; }
.mk-split > i { flex: 1 1 0; height: 12px; border-radius: 3px; background: rgba(255, 255, 255, .4); }

/* ---- P4 map ---- */
.mk-map { position: relative; min-height: 200px; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; overflow: clip; background-color: var(--bg-alt);
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 32px 32px; }
.mk-road { position: absolute; background: rgba(255, 255, 255, 0.07); }
.mk-pin { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--text-2); border: 2px solid var(--bg-alt); box-sizing: border-box; }
.mk-pin--ring { box-shadow: 0 0 0 2px var(--text); }
.mk-pin--crit { width: 18px; height: 18px; margin: -9px 0 0 -9px; background: var(--crit); }
.mk-pin--crit::after { content: "\2715"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; line-height: 1; color: #fff; }
.mk-pulse { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 2px solid var(--crit); }
.mk-cone { position: absolute; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: conic-gradient(from calc(var(--a, 0deg) - 30deg), rgba(255, 255, 255, 0.30) 0deg, rgba(255, 255, 255, 0.30) 60deg, transparent 60deg); pointer-events: none; }
.mk-rec { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 3px; background: var(--surface-2); border: 2px solid var(--text-2); box-sizing: border-box; }
.mk-rec--sel { border-color: var(--text); box-shadow: 0 0 0 3px rgba(255, 255, 255, .22); }
.mk-route { position: absolute; inset: 0; width: 100%; height: 100%; }
.mk-route path { stroke: var(--text); stroke-width: 1.1; stroke-linecap: round; }
.mk-layers { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-search { display: flex; align-items: center; min-height: 34px; padding: 4px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-alt); color: var(--text); font-size: 13px; line-height: var(--lh-th); }
.mk-side { position: absolute; right: 0; top: 0; bottom: 0; width: 46%; padding: 10px; background: var(--surface-2); border-left: 1px solid var(--line); z-index: 3; display: grid; gap: 6px; align-content: start; }
.mk-plan { position: absolute; inset: 0; }
.mk-plan > i { position: absolute; border: 1px solid var(--text-2); background: rgba(255, 255, 255, .04); }
.mk-plan > i.is-zone { border: 2px solid var(--text); background: rgba(255, 255, 255, .12); }
.mk-mini4 { position: absolute; right: 8px; bottom: 8px; width: 42%; z-index: 3; display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; padding: 3px; background: var(--surface-2); border: 1px solid var(--text-2); border-radius: 4px; }
.mk-mini4 .mk-cell { min-height: 32px; }
.mk-badge { position: absolute; z-index: 2; padding: 1px 8px; border-radius: 999px; background: rgba(16, 16, 18, .88); border: 1px solid var(--text-2); font-size: 12px; color: var(--text); }

/* ---- P5 rows ---- */
.mk-toggle { position: relative; width: 28px; height: 16px; flex: none; border-radius: 999px; border: 1px solid var(--muted); background: transparent; }
.mk-toggle > i { position: absolute; left: 2px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--text-2); }
.mk-toggle.is-on { background: rgba(255, 255, 255, .22); border-color: var(--text); }
.mk-toggle.is-on > i { background: var(--text); left: 14px; }
.mk-aud { display: flex; align-items: center; gap: 10px; padding: 5px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-alt); font-size: 12.5px; line-height: var(--lh-th); }
.mk-aud time { font: 12px var(--mono); color: var(--muted); flex: none; }
.mk-matrix { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 4px; align-items: center; }
.mk-matrix > span { font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; line-height: var(--lh-th); }
.mk-matrix > em { position: relative; display: block; height: 24px; border: 1px dashed var(--muted); border-radius: 4px; }
.mk-matrix em > i { position: absolute; inset: -1px; border: 1px solid var(--text); background: rgba(255, 255, 255, .22); border-radius: 4px; }
.mk-sqx { display: inline-grid; place-items: center; width: 14px; height: 14px; margin-right: 6px; background: var(--crit); color: #fff; border-radius: 3px; font-size: 9px; line-height: 1; font-style: normal; vertical-align: -2px; }
.mk-queue .mk-card { min-height: 34px; display: flex; align-items: center; min-width: 0; overflow-wrap: break-word; line-height: var(--lh-th); }
.mk-map--r { aspect-ratio: 5 / 3; min-height: 0; }
.mk-step { display: flex; gap: 6px; align-items: center; }
.mk-step > i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--muted); }
.mk-step > i.is-on { background: var(--text); border-color: var(--text); }
.mk-code { font: 12.5px/1.6 var(--mono); padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-alt); color: var(--text-2); overflow-wrap: anywhere; }
.mk-chipgroup { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---- P6 wall ---- */
.mk-wall { position: relative; border: 6px solid #2a2a30; border-radius: 6px; background: #0c0c0e; aspect-ratio: 16 / 7; min-height: 150px; overflow: hidden; overflow: clip; }
.mk-screens { position: absolute; inset: 0; display: grid; gap: 4px; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); background: #000; }
.mk-screens > i { background: #111115; border: 1px solid #1f1f25; }
.mk-win { position: absolute; display: grid; place-items: center; min-width: 0; padding: 2px; border: 1px solid var(--text-2); border-radius: 3px; background: linear-gradient(135deg, #2b2b32, #1a1a1f); font-size: 12px; line-height: 1.3; color: var(--text); text-align: center; overflow: hidden; overflow: clip; overflow-wrap: anywhere; }
.mk-win--ok { border-color: var(--ok); }
.mk-win--warn { border-color: var(--warn); }
.mk-win--off { border-color: var(--offline); border-style: solid; } /* Offline = grey, same as Health Monitor (.mk-st--off); Critical is the only red */
.mk-win--none { border: 1px dashed var(--muted); background: transparent; color: var(--text-2); }
.mk-win--conn { border-color: var(--text-2); border-style: dotted; }
.mk-state { display: inline-flex; gap: 5px; align-items: center; font-size: 12px; }
.mk-tray { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-src { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-alt); font-size: 12.5px; color: var(--text-2); }
.mk-ghost { position: absolute; z-index: 5; padding: 2px 8px; border: 1px solid var(--text); border-radius: var(--radius-sm); background: rgba(16, 16, 18, .9); font-size: 12px; color: var(--text); }
.mk-guide { position: absolute; background: rgba(255, 255, 255, .6); }
.mk-guide--v { top: 0; bottom: 0; width: 1px; }
.mk-guide--h { left: 0; right: 0; height: 1px; }
.mk-scn { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mk-mini > div { aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: 3px; background: linear-gradient(135deg, #2b2b32, #1a1a1f); font-size: 11px; display: grid; place-items: center; color: var(--text-2); }

/* ---- P7 tiles ---- */
.mk-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.mk-tile { display: grid; gap: 4px; align-content: start; min-height: 58px; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-alt); text-align: left; }
.mk-tile__n { font-size: 12px; color: var(--text); line-height: var(--lh-th); overflow-wrap: break-word; }
.mk-tile--unk { border-style: dashed; border-color: var(--muted); }
.mk-tile--unk .mk-tile__n { color: var(--text-2); }
.mk-tile--mute { border-style: dashed; border-color: var(--muted); background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .08) 0 3px, transparent 3px 7px); }
.mk-ports { display: flex; flex-wrap: wrap; gap: 4px; }
.mk-ports > i { width: 14px; height: 14px; border-radius: 3px; background: var(--ok); }
.mk-ports > i.is-off { background: transparent; border: 2px solid var(--offline); }
.mk-ports > i.is-warn { background: var(--warn); }
.mk-gauge { position: relative; height: 12px; border-radius: 999px; background: linear-gradient(90deg, rgba(255, 255, 255, .12) 0 60%, rgba(245, 165, 36, .35) 60% 82%, rgba(192, 0, 0, .45) 82%); border: 1px solid var(--line); overflow-x: clip; }
.mk-gauge__tick { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 2px solid var(--text-2); }
.mk-gauge__tick--w { left: 60%; }
.mk-gauge__tick--c { left: 82%; }
.mk-gauge__mark { position: absolute; left: 0; top: -3px; width: 100%; height: 16px; }
.mk-gauge__mark::after { content: ""; position: absolute; left: 0; top: 0; width: 4px; height: 16px; margin-left: -2px; border-radius: 2px; background: var(--text); }
.mk-probe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mk-probe > div { padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-alt); font-size: 12px; line-height: var(--lh-th); overflow-wrap: anywhere; }
.mk-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--text-2); flex: none; }
.mk-detail { padding: 10px; border: 1px solid var(--text-2); border-radius: var(--radius-sm); background: var(--surface-2); display: grid; gap: 8px; }
.mk-dash { display: grid; gap: 8px; }
.mk-dash > div { display: grid; grid-template-columns: minmax(0, 7em) minmax(0, 1fr); gap: 10px; align-items: center; font-size: 12.5px; }
@media (max-width: 480px) { .mk-probe { grid-template-columns: 1fr; } }

/* ---- P8 lanes ---- */
.mk-lanes4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.mk-col { display: grid; align-content: start; gap: 6px; min-height: 120px; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-alt); }
.mk-col > b { font: 600 12px/1.4 var(--mono); color: var(--text-2); }
.mk-col--blocked { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0 3px, transparent 3px 7px); }
.mk-card { padding: 7px 9px; border: 1px solid var(--line); border-left-width: 3px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: 12px; line-height: var(--lh-th); overflow-wrap: anywhere; }
.mk-card--video { border-left-color: var(--dw-video, #3F8CE8); }
.mk-card--intr { border-left-color: var(--dw-intr, #7B5FD6); }
.mk-card--bas { border-left-color: var(--dw-bas, #B9C4FF); }
.mk-card--fire { border-left-color: var(--dw-fire, #E08CC0); }
.mk-queue { display: grid; gap: 6px; }
.mk-toast { padding: 8px 12px; border: 1px solid var(--text-2); border-radius: var(--radius-sm); background: var(--surface-2); font-size: 12.5px; line-height: var(--lh-th); box-shadow: 0 8px 22px rgba(0, 0, 0, .5); }
.mk-sop { display: grid; gap: 6px; }
.mk-sop li { display: flex; gap: 8px; align-items: center; font-size: 12.5px; }
.mk-sop li::before { display: none; }
.mk-sop i { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--muted); flex: none; }
.mk-sop i.is-on { background: var(--text); border-color: var(--text); }
.mk-src2 { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 480px) { .mk-lanes4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- P9 fan ---- */
.mk-fan { display: grid; gap: 8px; min-width: 0; }
.mk-nodes { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.mk-node { display: inline-flex; align-items: center; min-height: 30px; padding: 3px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-alt); font-size: 12.5px; line-height: var(--lh-th); color: var(--text-2); overflow-wrap: break-word; }
.mk-node--dash { border-style: dashed; border-color: var(--muted); }
.mk-node--on { border-color: var(--text); color: var(--text); background: rgba(255, 255, 255, .12); }
.mk-node--off { color: var(--muted); border-color: var(--offline); }
.mk-node--ok { border-color: var(--ok); color: var(--text); }
.mk-direct { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mk-hline { flex: 1 1 24px; min-width: 24px; height: 2px; background: var(--text-2); opacity: .7; transform-origin: 0 50%; }
.mk-flow { position: relative; height: 44px; display: grid; justify-items: center; }
.mk-flow__line { width: 2px; height: 100%; background: var(--text-2); opacity: .7; }
.mk-flow__line--dash { background: repeating-linear-gradient(180deg, var(--muted) 0 4px, transparent 4px 8px); opacity: 1; }
.mk-pkt { position: absolute; left: 50%; top: 0; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #fff; }
.mk-hub { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 10px 14px; border: 1px solid var(--text-2); border-radius: var(--radius-sm); background: rgba(255, 255, 255, .06); font-weight: 600; font-size: 14px; color: var(--text); text-align: center; line-height: var(--lh-th); }
.mk-hub .mk-cell { width: 54px; min-height: 36px; grid-template-rows: 1fr; }
.mk-hub .mk-cell .mk-cell__pic { min-height: 36px; }
.mk-buf { position: relative; width: 70px; height: 10px; border: 1px solid var(--muted); border-radius: 3px; overflow: hidden; overflow: clip; }
.mk-buf > i { position: absolute; inset: 0; background: rgba(255, 255, 255, .4); transform-origin: 0 50%; }
.mk-ringsvg { width: 26px; height: 26px; transform: rotate(-90deg); flex: none; }
.mk-ringsvg circle { stroke-width: 3; }
.mk-ringsvg .bg { stroke: var(--line); fill: none; }
.mk-ringsvg .fg { stroke: var(--text); fill: none; }

/* ---- P10 chart ---- */
.mk-calgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.mk-calgrid > i { height: 20px; border-radius: 3px; background: var(--text-2); opacity: .85; }
.mk-calgrid > i.is-gap { background: transparent; border: 1px dashed var(--muted); opacity: 1; }
.mk-bars { display: grid; gap: 8px; }
.mk-bars > div { display: grid; grid-template-columns: minmax(0, 8em) minmax(0, 1fr); gap: 10px; align-items: center; font-size: 12.5px; line-height: var(--lh-th); }
.mk-bars .mk-bar { height: 12px; }
.mk-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-exp { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mk-file { width: 14px; height: 18px; border: 1px solid var(--text-2); border-radius: 2px; flex: none; }
.mk-spans { display: grid; gap: 8px; font-size: 12.5px; }
.mk-spans > div { display: grid; grid-template-columns: 4.2em minmax(0, 1fr); align-items: center; gap: 8px; }
.mk-spans i { display: block; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .42); transform-origin: 0 50%; }
.mk-seg3 { display: flex; height: 14px; border-radius: 999px; overflow: hidden; overflow: clip; border: 1px solid var(--line); }
.mk-seg3 > i:nth-child(1) { background: var(--crit); }
.mk-seg3 > i:nth-child(2) { background: var(--ok); }
.mk-seg3 > i:nth-child(3) { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .3) 0 3px, transparent 3px 7px); }
.mk-spark { width: 100%; height: 44px; }
.mk-spark path { stroke: var(--text-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* state resets (arming, replay) jump without transitions */
.mk--nt, .mk--nt * { transition: none !important; }

/* ---------- reduced motion / print: the markup is already the final state; make sure nothing is armed ---------- */
@media (prefers-reduced-motion: reduce) {
  .mk [data-loop] { animation: none; }
  .mk [data-a] { animation: none !important; }
  .mk .mk__panel { transition: none; }
  .mk, .mk * { transition: none !important; }
}
@media print {
  .mk { break-inside: avoid; }
  .mk [data-loop] { animation: none; }
  .mk--armed [data-a] { animation: none; }
  .mk, .mk * { transition: none !important; }
}