/* One message at a time. Everything is scoped to the workflow. */
#mukodes .demo-shell{overflow:visible;isolation:isolate;scroll-margin-top:calc(var(--header-size) + 8px)}
#mukodes .demo-navigation{position:sticky;top:var(--header-size);z-index:25;background:#131e2bf7;backdrop-filter:blur(12px);border-radius:8px 8px 0 0;border-bottom:1px solid #35516a;box-shadow:0 7px 20px #060f182b}
#mukodes .demo-toolbar{padding:0 22px;gap:18px}
#mukodes .scenario-tabs button{padding:13px 0 11px;min-height:48px}
#mukodes .scenario-tabs button span{font-size:.875rem}
#mukodes .demo-badge{font-size:.75rem;white-space:nowrap}
#mukodes #scenario-panel{scroll-margin-top:calc(var(--header-size) + 140px)}
#mukodes .scenario-intro{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:14px 22px 12px}
#mukodes .scenario-intro h3{font-size:1.125rem}
#mukodes .scenario-intro p{max-width:1100px;margin-top:4px;min-height:0;font-size:1rem;line-height:1.6}
#mukodes .demo-reset{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;border:0;background:none;color:#a2bbce;padding:4px 0;font-size:.875rem}
#mukodes .demo-reset .icon{width:16px;height:16px}
#mukodes .demo-reset:hover{color:#65cfff}
#mukodes .journey-nav{padding:8px 22px 0}
#mukodes .journey-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:0;margin:0;list-style:none;border:1px solid #2e465b;border-radius:8px;overflow:hidden}
#mukodes .journey-steps li{min-width:0;border-right:1px solid #2e465b}
#mukodes .journey-steps li:last-child{border-right:0}
#mukodes .journey-steps li[hidden]+li{border-left:0}
#mukodes .journey-steps button{display:flex;width:100%;height:100%;gap:10px;align-items:center;text-align:left;padding:9px 12px;border:0;background:#12202e;color:#a3b7c9;font-size:.875rem;line-height:1.35;position:relative}
#mukodes .journey-steps button small{display:block;font-size:.75rem;font-weight:400;color:#8ca6bc;line-height:1.4;margin-top:4px}
#mukodes .journey-steps button>span:nth-child(2){min-width:0;overflow-wrap:anywhere}
#mukodes .journey-steps button[aria-current="step"]{background:#183349;color:#e2f5ff;box-shadow:inset 0 -2px #50c6ff}
#mukodes .journey-steps button:hover:not(:disabled){background:#1b354b}
#mukodes .journey-steps button:disabled{cursor:default;opacity:.47}
#mukodes .journey-steps button:focus-visible{outline-offset:-4px}
#mukodes .journey-number{font-size:.8125rem;color:#6ca4c7;font-variant-numeric:tabular-nums;flex-shrink:0}
#mukodes .journey-steps button[aria-current="step"] .journey-number{color:#65d1ff}
#mukodes .journey-check{width:14px;height:14px;margin-left:auto;color:#8ed8ff;display:none}
#mukodes .journey-steps button.is-complete .journey-check{display:block}
#mukodes .journey-guidance{display:flex;justify-content:space-between;gap:20px;padding:6px 22px 8px;font-size:.8125rem;line-height:1.5;color:#8da7bd}
#mukodes #journey-count{white-space:nowrap;font-variant-numeric:tabular-nums;color:#8dcced}
#mukodes .exchange-heading{display:flex;align-items:end;justify-content:space-between;gap:28px;padding:13px 22px 0;border-top:1px solid #2a4053}
#mukodes .exchange-heading .small-label{font-size:.75rem;color:#5acbff;letter-spacing:.1em;margin-bottom:6px}
#mukodes .exchange-heading h3{font-size:1.375rem}
#mukodes .exchange-heading>p{font-size:.875rem;color:#93b0c8;line-height:1.6;max-width:410px}
#mukodes .exchange-stage{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(170px,.82fr) minmax(310px,2.1fr) minmax(205px,.95fr);gap:44px;align-items:center;padding:12px 28px 18px;min-height:455px}
#mukodes .exchange-wires{position:absolute;inset:0;pointer-events:none;width:100%;height:100%;z-index:1;overflow:visible}
#mukodes .exchange-wire{fill:none;stroke:#34516a;stroke-width:1.4;stroke-dasharray:4 5}
#mukodes .exchange-tail{fill:none;stroke:#73d8ff;stroke-width:2.2;stroke-linecap:round;opacity:0}
#mukodes .endpoint{position:relative;min-width:0;z-index:2}
#mukodes .endpoint-source{isolation:isolate}
#mukodes .event-backdrop{position:absolute;left:50%;top:50%;width:calc(100% + 112px);height:465px;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;opacity:.85;transition:opacity .45s;mask-image:radial-gradient(ellipse 65% 58% at 50% 48%,#000 45%,transparent 96%);-webkit-mask-image:radial-gradient(ellipse 65% 58% at 50% 48%,#000 45%,transparent 96%)}
#mukodes .event-backdrop.has-event{opacity:1}
#mukodes .event-silhouette{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;max-width:none}
#mukodes .crossing-backdrop{position:absolute;inset:0;z-index:-1;pointer-events:none}
#mukodes .crossing-subject{position:absolute;inset:0}
#mukodes .intruder-video{pointer-events:none}
#mukodes .burglary-video{mask-image:linear-gradient(90deg,transparent 0 9%,#000 19% 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent 0 9%,#000 19% 90%,transparent)}
#mukodes .burglary-tool-layer{position:absolute;z-index:2;pointer-events:none}
#mukodes .hub-edge-fragment{position:absolute;z-index:3;pointer-events:none;background:#422a36;transform-origin:0 0}
#mukodes [data-step="sia"]:is([data-scenario="alarm"],[data-scenario="video"]) .event-detail-slot{position:relative}
#mukodes [data-step="sia"]:is([data-scenario="alarm"],[data-scenario="video"]) .event-detail-slot::before{content:'Betörésjelzés · 007. zóna';display:block;visibility:hidden}
#mukodes [data-step="sia"]:is([data-scenario="alarm"],[data-scenario="video"]) .event-detail-slot>#sender-detail{position:absolute;inset:0}
#mukodes .detection-box{position:absolute;left:20%;top:4%;width:60%;height:90%;border:1.5px solid transparent;border-radius:3px;opacity:0;background:none;box-shadow:none}
#mukodes .event-boundary{position:absolute;z-index:1;left:50%;top:10%;bottom:9%;width:1px;border-left:1px dashed #57b8ef55;transform:skewY(-10deg);transition:border-color .3s,box-shadow .3s}
#mukodes .endpoint-label{display:block;margin-bottom:10px;color:#86a6c0;letter-spacing:.1em;font-size:.75rem}
#mukodes .endpoint-card{display:flex;flex-direction:column;align-items:flex-start;width:100%;min-width:0;text-align:left;border:1px solid #345167;border-radius:10px;background:linear-gradient(135deg,#1a2c3e,#12202f);padding:22px 18px;color:#deebf6;transition:border-color .25s,background .25s,box-shadow .25s}
#mukodes .endpoint-icon{width:29px;height:29px;color:#5bcaff;margin-bottom:15px}
#mukodes .endpoint-card>strong{font-size:1.0625rem;font-weight:600;line-height:1.4;letter-spacing:-.02em}
#mukodes .endpoint-detail{font-size:.875rem;line-height:1.65;margin-top:7px;color:#96b2c9;overflow-wrap:anywhere}
#mukodes .sender-card:hover:not(:disabled){border-color:#6ccfff;box-shadow:0 0 0 3px #49c4ff0e}
#mukodes .sender-card:disabled{cursor:default}
#mukodes .sender-card:is(.is-pried,.is-analytics-alarm){border-color:#ff6c80;background:linear-gradient(135deg,#422a36,#251e2c);box-shadow:inset 0 0 16px #f24d6630}
#mukodes .sender-card:is(.is-pried,.is-analytics-alarm) .endpoint-icon{color:#f0909c}
#mukodes .sender-card:is(.is-pried,.is-analytics-alarm) .endpoint-detail,#mukodes .sender-card:is(.is-pried,.is-analytics-alarm) .endpoint-status{color:#f0a3ad}
#mukodes .sender-card:is(.is-pried,.is-analytics-alarm) .endpoint-status{border-color:#bf5767}
#mukodes .endpoint-status{display:block;width:100%;padding-top:11px;margin-top:17px;border-top:1px solid #2e475e;color:#8cacbf;font-size:.8125rem;line-height:1.5}
#mukodes .receiver-value{display:block;width:100%;border-radius:5px;background:#0d1c2b;border:1px solid #2a4156;padding:10px 9px;margin-top:18px;font-size:.875rem;font-weight:600;letter-spacing:.025em;color:#7096b3}
#mukodes .receiver-card.is-delivered{border-color:#5fc6f8;background:linear-gradient(135deg,#193d55,#122637);box-shadow:0 0 0 4px #45bdf80a}
#mukodes .receiver-card.is-delivered .receiver-value{color:#9ae5bb;border-color:#357961;background:#12332d}
#mukodes .receiver-card.is-delivered .endpoint-status{color:#a9dfc0}
#mukodes .endpoint-destination{isolation:isolate}
#mukodes .destination-scene{position:absolute;z-index:-1;pointer-events:none;left:50%;top:50%;width:calc(100% + 140px);height:480px;transform:translate(-50%,-50%)}
#mukodes .scene-diagram{display:block;width:100%;height:100%;overflow:visible}
#mukodes .scene-caption{position:absolute;left:0;right:0;bottom:-6px;text-align:center;color:#759db9;font-size:.75rem;line-height:1.4;letter-spacing:.02em}
#mukodes [data-step="ptz"] .receiver-card,#mukodes [data-step="data"] .receiver-card,#mukodes [data-step="access"] .receiver-card{background:linear-gradient(135deg,#1a2c3edb,#12202feb)}
#mukodes .destination-scene.ptz-scene{position:relative;z-index:auto;left:auto;top:auto;transform:none;pointer-events:auto;width:100%;max-width:340px;height:auto;margin:0 auto}
#mukodes .ptz-diagram{width:100%;height:auto;min-height:230px;overflow:hidden}
#mukodes .ptz-camera-art{filter:drop-shadow(3px 7px 6px #02091180)}
#mukodes .ptz-head-seam{fill:none;stroke:#030609;stroke-width:1.8;filter:drop-shadow(1px 0 .5px #66707c55)}
#mukodes .ptz-head-rim{fill:none;stroke:#727780;stroke-width:.65;stroke-opacity:.35}
#mukodes .ground-grid{fill:none;stroke:#284055;stroke-width:.7;opacity:.65}
#mukodes .fov-sector{fill:url(#fov-fill);stroke:none;filter:url(#fov-soft-light)}
#mukodes .dori-identification{--dori-color:#ff6b6b;color:#ff6b6b}
#mukodes .dori-recognition{--dori-color:#f4d45d;color:#f4d45d}
#mukodes .dori-observation{--dori-color:#57c17b;color:#57c17b}
#mukodes .dori-detection{--dori-color:#b7df86;color:#b7df86}
#mukodes .dori-band{fill:var(--dori-color);fill-opacity:.36;stroke:none}
#mukodes .ptz-area{color:#6d8da7;fill:none;stroke:currentColor;stroke-width:1;transition:color .25s}
#mukodes .ptz-area circle{fill:currentColor;stroke:none}
#mukodes .ptz-area rect{fill:currentColor;fill-opacity:.06;stroke-dasharray:3 3}
#mukodes .ptz-area.is-covered rect{stroke-dasharray:none;stroke-width:1.5;fill-opacity:.15}
#mukodes .ptz-area text{fill:currentColor;stroke:none;font:12px var(--font)}
#mukodes .ptz-area[data-quality="i"]{color:#ff7979}
#mukodes .ptz-area[data-quality="r"]{color:#f4d45d}
#mukodes .ptz-area[data-quality="o"]{color:#72cc90}
#mukodes .ptz-area[data-quality="d"]{color:#b7df86}
#mukodes .ptz-side-info{position:absolute;top:7.2%;left:55%;right:0;padding-left:12px;border-left:1px solid #294356}
#mukodes .ptz-info-label{display:block;color:#7899b2;font-size:.625rem;letter-spacing:.09em;line-height:1.4}
#mukodes .ptz-zoom-value{display:block;margin:3px 0 12px;font-size:1.65rem;line-height:1.2;font-weight:500;color:#d8efff;font-variant-numeric:tabular-nums}
#mukodes .ptz-density{display:flex;flex-direction:column;gap:2px;font-size:.6875rem;color:#8ba8be;line-height:1.4}
#mukodes .ptz-density>strong{font-size:1rem;font-weight:550;font-variant-numeric:tabular-nums;white-space:nowrap;color:#b7df86}
#mukodes .ptz-density[data-quality="o"]>strong{color:#72cc90}
#mukodes .ptz-density[data-quality="r"]>strong{color:#f4d45d}
#mukodes .ptz-density[data-quality="i"]>strong{color:#ff7979}
#mukodes .dori-legend{display:grid;grid-template-columns:minmax(0,1fr);gap:9px;margin:15px 0 10px}
#mukodes .dori-legend>span{display:grid;grid-template-columns:3px minmax(0,1fr) auto;align-items:center;gap:5px;font-size:.625rem;line-height:1.4}
#mukodes .dori-legend i{height:13px;background:var(--dori-color);opacity:.8;border-radius:2px}
#mukodes .dori-legend>span>span{color:#acc2d4}
#mukodes .dori-legend strong{font-variant-numeric:tabular-nums;font-weight:550;white-space:nowrap}
#mukodes .ptz-scene .scene-caption{position:static;display:block;text-align:left;font-size:.75rem;color:#88aec6;min-height:1.5em}
#mukodes .ptz-scene.is-complete .scene-caption{color:#a7ddbf}
#mukodes .ptz-model-note{display:block;font-size:.75rem;line-height:1.6;color:#69869d}
#mukodes [data-step="ptz"] .destination-device{margin:0 auto 18px;max-width:400px}
#mukodes [data-step="ptz"] .destination-device>.endpoint-label{display:none}
#mukodes [data-step="ptz"] .receiver-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:12px 14px}
#mukodes [data-step="ptz"] .receiver-card>.endpoint-icon{display:none}
#mukodes [data-step="ptz"] .receiver-card>strong{grid-column:1;font-size:.875rem}
#mukodes [data-step="ptz"] .receiver-card>.endpoint-detail{grid-column:1;font-size:.6875rem;margin:0}
#mukodes [data-step="ptz"] .receiver-card>.receiver-value{grid-column:2;grid-row:1/3;width:auto;align-self:center;margin:0;padding:6px;font-size:.6875rem;max-width:100px;text-align:center}
#mukodes [data-step="ptz"] .receiver-card>.endpoint-status{grid-column:1/-1;margin-top:6px;padding-top:6px;font-size:.6875rem}
@media(min-width:1151px){#mukodes .exchange-stage:is([data-step="ptz"],[data-step="data"],[data-step="access"]){grid-template-columns:minmax(150px,.7fr) minmax(310px,1.6fr) minmax(320px,1.35fr);gap:32px}}
@media(min-width:1001px) and (max-width:1150px){#mukodes .exchange-stage:is([data-step="ptz"],[data-step="data"],[data-step="access"]){grid-template-columns:minmax(130px,.65fr) minmax(260px,1.3fr) minmax(260px,1.2fr);gap:22px}}
#mukodes .data-transport{display:flex;align-items:center;gap:4px;margin:14px 28px 0;font-size:.8125rem;color:#92aec4}
#mukodes .data-transport>span{margin-right:8px}
#mukodes .data-transport button{background:#102235;border:1px solid #355066;color:#91b0c6;padding:5px 12px;border-radius:4px;font-size:.8125rem;line-height:1.5}
#mukodes .data-transport button[aria-pressed="true"]{background:#164363;border-color:#4ebcf0;color:#d3f2ff}
#mukodes .data-transport button:hover{border-color:#7ad4ff}
#mukodes .destination-scene.speaker-scene{position:relative;left:auto;top:auto;transform:none;z-index:2;width:100%;max-width:340px;height:auto;margin:0 auto;pointer-events:none}
#mukodes .speaker-visual{position:relative;aspect-ratio:4/3;max-height:240px;margin:-10px auto -12px}
#mukodes .speaker-art{display:block;width:100%;height:100%;object-fit:contain;mask-image:radial-gradient(ellipse 70% 64% at 50% 50%,#000 43%,transparent 94%);-webkit-mask-image:radial-gradient(ellipse 70% 64% at 50% 50%,#000 43%,transparent 94%)}
#mukodes .speaker-waves{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#68d5ff;stroke-width:2;stroke-linecap:round;overflow:visible;pointer-events:none}
#mukodes .speaker-waves path{opacity:0;transform-origin:143px 147px}
#mukodes .speaker-scene.is-playing .speaker-waves path{animation:speaker-sound-wave 1.35s ease-out infinite}
#mukodes .speaker-scene.is-playing .speaker-waves path:nth-child(2){animation-delay:.18s}
#mukodes .speaker-scene.is-playing .speaker-waves path:nth-child(3){animation-delay:.36s}
#mukodes .speaker-playback{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid #2c485d;border-radius:7px;color:#a0bbcd;background:#102231}
#mukodes .speaker-playback>.icon{width:24px;height:24px;flex:none;color:#6dcaed}
#mukodes .speaker-playback strong{display:block;font-size:.875rem;line-height:1.45}
#mukodes .speaker-playback span{display:block;font-size:.75rem;margin-top:3px;color:#87a4b8}
#mukodes .speaker-scene.is-playing .speaker-playback{border-color:#3d9979;color:#adf1cb}
#mukodes .speaker-quote{font-size:.875rem;line-height:1.65;color:#a9c5d8;margin:12px 0 8px;text-align:center}
#mukodes .speaker-scene>.scene-caption{display:block;position:static;text-align:center;font-size:.75rem;line-height:1.5;color:#7fa2ba}
#mukodes [data-step="speaker"] .destination-device{max-width:340px;margin:0 auto 8px}
#mukodes [data-step="speaker"] .destination-device>.endpoint-label{display:none}
#mukodes [data-step="speaker"] .receiver-card{padding:12px 14px}
#mukodes [data-step="speaker"] .receiver-card>.endpoint-icon{display:none}
#mukodes [data-step="speaker"] .receiver-card>.endpoint-detail{margin-top:4px;font-size:.75rem}
#mukodes [data-step="speaker"] .receiver-card>.receiver-value{margin-top:8px;padding:6px 9px;font-size:.75rem}
#mukodes [data-step="speaker"] .receiver-card>.endpoint-status{display:none}
@media(min-width:1151px){#mukodes .exchange-stage[data-step="speaker"]{grid-template-columns:minmax(150px,.7fr) minmax(310px,1.6fr) minmax(320px,1.35fr);gap:32px}}
@media(min-width:1001px) and (max-width:1150px){#mukodes .exchange-stage[data-step="speaker"]{grid-template-columns:minmax(130px,.65fr) minmax(260px,1.3fr) minmax(260px,1.2fr);gap:22px}}
@keyframes speaker-sound-wave{0%{opacity:0;transform:translateX(5px) scale(.92)}22%{opacity:.8}100%{opacity:0;transform:translateX(-12px) scale(1.08)}}
@media(prefers-reduced-motion:reduce){#mukodes .speaker-waves path{animation:none!important}}
#mukodes .destination-scene.data-scene{position:relative;left:auto;top:auto;transform:none;z-index:2;width:100%;max-width:400px;height:auto;margin:14px auto 0;pointer-events:auto}
#mukodes .data-distribution{position:relative;height:290px}
#mukodes .data-diagram{position:absolute;inset:0;overflow:visible}
#mukodes .data-branch{fill:none;stroke:#345770;stroke-width:1.5;stroke-dasharray:4 6}
#mukodes .data-branch.is-received{stroke:#459bc5;stroke-dasharray:none}
#mukodes .broker-node{position:absolute;left:2%;right:2%;top:5px;min-height:52px;padding:7px 12px;border:1px solid #497b9b;border-radius:8px;background:#143248;display:flex;flex-direction:column;gap:2px}
#mukodes .broker-label{font:500 .875rem/1.4 ui-monospace,monospace;color:#b3e7ff;overflow-wrap:anywhere}
#mukodes .broker-subtitle,#mukodes .subscriber-meta{font-size:.75rem;line-height:1.3;letter-spacing:.04em;color:#91b6cd}
#mukodes .broker-node.is-received{border-color:#77d9b0;background:#184338}
#mukodes .subscriber-node{position:absolute;left:18.57%;right:2%;min-height:80px;padding:8px 12px;border:1px solid #35536b;border-radius:8px;background:#11283b;display:flex;flex-direction:column;justify-content:center;gap:4px;color:#90aec6}
#mukodes #subscriber-one{top:87px}
#mukodes #subscriber-two{top:195px}
#mukodes .subscriber-node strong{font-size:.875rem;line-height:1.35;color:#d3e9f8;font-weight:550}
#mukodes .subscriber-node>span:last-child{font-size:.875rem;line-height:1.4}
#mukodes .subscriber-node.is-received{border-color:#69b992;background:#13352e}
#mukodes .subscriber-node.is-received>span:last-child{color:#9be5bb}
#mukodes .data-scene.is-running .subscriber-node.is-received{animation:subscriber-confirm .7s ease-out}
#mukodes .subscriber-packet{opacity:0;filter:drop-shadow(0 0 6px #55c6ff60)}
#mukodes .subscriber-packet rect{fill:#164d70;stroke:#7ed9ff;stroke-width:1}
#mukodes .subscriber-packet text{font:600 12px ui-monospace,monospace;fill:#d5f3ff;text-anchor:middle}
#mukodes .data-scene .scene-caption{position:static;display:block;padding:6px 0 0;font-size:.8125rem;text-align:left}
#mukodes .data-scene.is-complete .scene-caption{color:#9acfb5}
#mukodes [data-step="data"] .destination-device{max-width:400px;margin:auto}
#mukodes [data-step="data"] .destination-device>.endpoint-label{display:none}
#mukodes [data-step="data"] .receiver-card{padding:12px 14px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px}
#mukodes [data-step="data"] .receiver-card>.endpoint-icon,#mukodes [data-step="data"] .receiver-card>.endpoint-status{display:none}
#mukodes [data-step="data"] .receiver-card>strong,#mukodes [data-step="data"] .receiver-card>.endpoint-detail{grid-column:1}
#mukodes [data-step="data"] .receiver-card>.endpoint-detail{margin:0;font-size:.8125rem}
#mukodes [data-step="data"] .receiver-card>.receiver-value{grid-column:2;grid-row:1/3;align-self:center;width:auto;margin:0;padding:7px;font-size:.75rem;max-width:145px}
#mukodes .destination-scene.access-scene{position:relative;left:auto;top:auto;transform:none;z-index:2;width:min(100%,280px);height:auto;margin:0 auto;pointer-events:auto}
#mukodes .access-door-surface{position:relative;width:100%;aspect-ratio:2/3;isolation:isolate}
#mukodes .access-door-art{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;opacity:.95;mask-image:radial-gradient(ellipse 76% 70% at 52% 49%,#000 54%,transparent 95%)}
#mukodes .access-door-outline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#mukodes .access-door-outline path{fill:#12345025;stroke:#58c5f5;stroke-width:3;filter:drop-shadow(0 0 6px #43bcff40);transition:stroke .3s,fill .3s,filter .3s}
#mukodes .access-target-port{position:absolute;left:23.7%;top:47%;width:1px;height:1px}
#mukodes .access-door-plane{position:absolute;left:0;top:0;width:50.78125%;height:76.497396%;transform-origin:0 0;overflow:visible;z-index:2}
#mukodes .access-card-mount{position:absolute;left:9%;top:50%;width:82%;z-index:2;transform:translateY(-50%);text-align:center}
#mukodes [data-step="access"] .destination-device>.endpoint-label{display:none}
#mukodes [data-step="access"] .receiver-card,#mukodes [data-step="access"] .receiver-card.is-delivered{display:flex;align-items:center;text-align:center;gap:0;padding:0;border:0;background:none;box-shadow:none;animation:none}
#mukodes [data-step="access"] .receiver-card>.endpoint-icon{display:none}
#mukodes [data-step="access"] .receiver-card>strong{font-size:1rem}
#mukodes [data-step="access"] .receiver-card>.endpoint-detail{font-size:.8125rem;line-height:1.4}
#mukodes [data-step="access"] .receiver-card>.receiver-value{display:none}
#mukodes [data-step="access"] .receiver-card>.endpoint-status{display:none}
#mukodes [data-step="access"] .receiver-card.is-delivered>.receiver-value{color:#ff9fac}
#mukodes .access-lock-badge{position:absolute;top:18%;left:calc(50% - 17px);display:grid;place-items:center;width:34px;height:34px;border:1px solid #4e7995;border-radius:50%;color:#7db6d5;background:#112739d9}
#mukodes .access-lock-badge>.icon{width:18px;height:18px}
#mukodes .reader-indicator{position:absolute;left:85.2%;top:41.4%;width:3.6%;height:.6%;border-radius:2px;background:#6fa6c0;opacity:.9;transition:background .25s,box-shadow .25s}
#mukodes .reader-halo{position:absolute;left:84.2%;top:40.4%;width:5.6%;height:7.8%;border-radius:5px;opacity:0;pointer-events:none;box-shadow:0 0 9px 4px #ff496a80,0 0 23px 9px #ff496a35;transform:perspective(240px) rotateY(-12deg) skewY(-3deg);transition:opacity .35s}
#mukodes .reader-callout{position:absolute;left:25%;top:62%;width:100%;padding:8px 10px;border:1px solid #c76274;border-radius:7px;background:linear-gradient(135deg,#422a36f5,#251e2cf5);color:#ffc0cb;box-shadow:3px 5px 16px #030a1655;font-size:.875rem;line-height:1.45;isolation:isolate;transform-origin:96% 0}
#mukodes .access-scene.is-restored .reader-indicator{background:#80e6af;box-shadow:0 0 8px #59d99180}
#mukodes .access-scene.is-restored .reader-callout{border-color:#57ac83;background:linear-gradient(135deg,#193e32f5,#142b2bf5);color:#a5ebc2}
#mukodes .access-scene.is-restored .reader-callout::before{background:#1b3b32;border-color:#57ac83}
#mukodes .access-scene.is-restored .reader-callout>strong{color:#85cda6}
#mukodes .reader-callout::before{content:'';position:absolute;right:4%;top:-6px;width:10px;height:10px;transform:rotate(45deg);background:#392633;border-top:1px solid #c76274;border-left:1px solid #c76274;z-index:-1}
#mukodes .reader-callout>strong{display:block;font-size:.75rem;font-weight:500;color:#df91a2;line-height:1.3;margin-bottom:3px}
#mukodes .reader-callout>span{display:block;overflow-wrap:normal}
#mukodes .access-scene.is-blocked .reader-halo{opacity:1}
#mukodes .access-scene.is-blocked .access-door-outline path{stroke:#ff6c80;fill:#7b283210;filter:drop-shadow(0 0 8px #f24d6666)}
#mukodes .access-scene .reader-callout:not([hidden]){animation:reader-callout-in .4s ease-out,reader-callout-swing 3.2s ease-in-out .4s infinite}
#mukodes .access-scene.is-blocked .access-lock-badge{color:#f0909c;border-color:#bf5767;background:#35212ecf}
#mukodes .access-scene.is-blocked .reader-indicator{background:#ff727e;opacity:1;box-shadow:0 0 7px 2px #ff516c9e}
#mukodes .access-scene .scene-caption{position:static;display:block;margin-top:-10px;font-size:.8125rem;color:#a4bfcf}
#mukodes .access-scene.is-blocked .scene-caption{color:#f0a3ad}
#mukodes .access-scene.is-running .access-lock-badge{animation:access-lock-confirm .7s .8s ease-out}
#mukodes .access-scene.is-running .reader-indicator{animation:reader-reject 1.3s .75s ease-in-out 2}

#mukodes .message-workspace{position:relative;min-width:0;z-index:3}
#mukodes .message-surface{position:relative;width:min(100%,400px);min-width:0;height:auto;min-height:310px;margin:0 auto;perspective:1200px}
#mukodes .message-invitation{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;background:radial-gradient(ellipse at center,#20609020,transparent 66%)}
#mukodes .packet-trigger{display:flex;align-items:center;justify-content:center;gap:12px;background:linear-gradient(135deg,#1d4865,#102b43);color:#cef0ff;border:1px solid #67cfff;border-radius:11px;min-width:124px;min-height:69px;box-shadow:0 4px 0 #091827,0 18px 35px #020b144a;transform:perspective(600px) rotateY(-12deg) rotateX(5deg);transition:transform .2s,box-shadow .2s}
#mukodes .packet-trigger:hover{transform:perspective(600px) rotateY(0) rotateX(0) translateY(-3px);box-shadow:0 4px 0 #091827,0 20px 35px #0f88c82a}
#mukodes .packet-trigger strong{font-size:1.0625rem;letter-spacing:.04em}
#mukodes .packet-trigger>.icon{width:20px;height:20px}
#mukodes .packet-trigger>.packet-expand{width:14px;height:14px;align-self:flex-start;margin-top:10px;color:#6da4c7}
#mukodes .message-invitation p{font-size:.9375rem;color:#c2dbe9;margin-top:22px}
#mukodes .message-invitation>span{font-size:.8125rem;color:#789ab4;margin-top:6px}
#mukodes .message-console{display:flex;flex-direction:column;position:relative;inset:auto;min-height:inherit;z-index:4;transform-origin:50% 50%;border:1px solid #4c9dcc;border-radius:9px;background:#0b1724;box-shadow:0 20px 42px #0107104d;overflow:hidden;will-change:transform,opacity}
#mukodes .console-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 15px;border-bottom:1px solid #29485f;background:#142c40;color:#7ca7c3;font-size:.75rem;line-height:1.35;flex-shrink:0}
#mukodes .console-protocol{font-size:.8125rem;color:#78d5ff;letter-spacing:.04em;font-weight:600}
#mukodes .console-address{padding:10px 15px;font-size:.75rem;color:#90afc6;border-bottom:1px solid #1f364b;background:#0f1f2f;flex-shrink:0;overflow-wrap:anywhere}
#mukodes #message-pre{font:400 .875rem/1.65 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;flex:1;min-height:0;margin:0;padding:17px 18px;white-space:pre-wrap;overflow-wrap:anywhere;overflow:visible;display:grid;color:#d1eaf9;tab-size:2}
#mukodes #message-code{font:inherit;color:inherit}
#mukodes .typing-caret{display:none;width:7px;height:1.05em;background:#60ceff;vertical-align:-.12em;margin-left:2px}
#mukodes [data-phase="typing"] .typing-caret{display:inline-block;animation:journey-caret .75s steps(1) infinite}
#mukodes .console-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 15px;border-top:1px solid #223d52;font-size:.75rem;color:#7b9db8;line-height:1.4;flex-shrink:0}
#mukodes .console-footer>span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums}
#mukodes .message-controls{text-align:center;position:relative;z-index:5;padding-top:15px;min-height:92px}
#mukodes .message-controls>.button{min-height:48px;padding:12px 19px;font-size:.875rem;max-width:100%;white-space:normal;color:#fff;background:#008ccb;border-color:#159ad2}
#mukodes .message-controls>.button:hover:not(:disabled){background:#079fe0}
#mukodes .message-controls>.button:disabled{opacity:.6}
#mukodes .message-controls>p{font-size:.8125rem;line-height:1.55;margin:10px auto 0;max-width:400px;color:#849fb6}
#mukodes .typing-skip{display:block;margin:9px auto 0;padding:2px;border:0;background:none;font-size:.8125rem;color:#94d6fa;text-decoration:underline;text-underline-offset:4px}
#mukodes .delivery-receipt{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(100%,300px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px 16px;border:1px solid #28495f;border-radius:9px;background:radial-gradient(ellipse at 50% 30%,#1e566736,transparent 72%),#102030}
#mukodes .receipt-icon{display:grid;place-items:center;width:36px;height:36px;border:1px solid #459d74;border-radius:50%;color:#9ee8bc;background:#163d31;margin-bottom:11px}
#mukodes .receipt-icon>.icon{width:21px;height:21px}
#mukodes .delivery-receipt>strong{font-size:1.0625rem;font-weight:550}
#mukodes .delivery-receipt>p{color:#9ebdd1;font-size:.8125rem;line-height:1.55;max-width:265px;margin-top:7px}
#mukodes .delivery-receipt>button{display:flex;align-items:center;gap:6px;margin-top:13px;padding:4px;border:0;background:none;color:#6ecfff;font-size:.75rem}
#mukodes .delivery-receipt>button>.icon{width:16px;height:16px}
#mukodes .flying-message{position:absolute;top:0;left:0;z-index:7;pointer-events:none;display:flex;align-items:center;justify-content:center;gap:6px;width:82px;height:36px;border:1px solid #91ddff;border-radius:6px;color:#e2f7ff;background:linear-gradient(135deg,#245d82,#0c2d49);box-shadow:0 0 20px #4bbdfa40,3px 4px 0 #081726;opacity:0;font-size:.8125rem;font-weight:600;letter-spacing:.035em;will-change:transform}
#mukodes .flying-message>.icon{width:15px;height:15px}
#mukodes .workflow-progress{height:2px;background:#24384b;overflow:hidden}
#mukodes .workflow-progress>span{display:block;height:100%;width:100%;background:#48c6ff;transform:scaleX(0);transform-origin:left;transition:transform .3s}
#mukodes .demo-footer{padding:10px 22px;gap:22px;font-size:.8125rem;line-height:1.6}
#mukodes [hidden]{display:none!important}
#mukodes .telegram-destination{position:relative;z-index:3;max-width:180px;width:100%;justify-self:center;perspective:1000px;perspective-origin:45% 45%}
#mukodes .telegram-destination>.node-step{font-size:.75rem;letter-spacing:.06em;margin-bottom:11px;text-align:center}
#mukodes .telegram-phone{position:relative;display:flex;flex-direction:column;width:100%;aspect-ratio:9/19.5;min-height:0;border:1px solid #718da3;border-right-color:#b3cadc;border-bottom-color:#405a70;border-radius:30px;padding:8px;background:linear-gradient(135deg,#203347,#090f18 35%,#111e2c);transform:rotateY(-16deg) rotateX(5deg) rotateZ(2deg);transform-origin:50% 50%;box-shadow:1px 1px 0 #6b879c,3px 2px 0 #31495f,6px 4px 0 #182c3f,9px 6px 0 #07111d,22px 27px 40px #02071099;transition:border-color .35s,box-shadow .35s}
#mukodes .telegram-phone::before{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;background:linear-gradient(115deg,#e8f7ff12,transparent 30%,transparent 75%,#74caff07)}
#mukodes .telegram-phone::after{content:'';position:absolute;right:-5px;top:86px;width:3px;height:31px;border-radius:2px;background:linear-gradient(90deg,#253c50,#7a96ac);box-shadow:0 1px 2px #01080e}
#mukodes .phone-camera{position:absolute;z-index:5;left:50%;top:13px;width:37px;height:7px;transform:translateX(-50%);background:#070d16;border:1px solid #304458;border-radius:6px;pointer-events:none}
#mukodes .phone-port{position:absolute;width:1px;height:1px;pointer-events:none}
#mukodes .phone-port-left{left:0;top:55%}
#mukodes .phone-port-right{right:0;top:55%}
#mukodes .phone-port-top{left:50%;top:0}
#mukodes .telegram-screen{border:1px solid #263d51;border-radius:21px;background:#102030;overflow:hidden;flex:1;min-height:0;display:flex;flex-direction:column}
#mukodes .phone-status{display:flex;justify-content:space-between;align-items:center;padding:7px 11px 5px;color:#a9bbcb;font-size:.75rem;line-height:1.1;background:#1b2b3c}
#mukodes .phone-status>span:last-child{font-size:.75rem;color:#7f9cb4;letter-spacing:.04em}
#mukodes .telegram-header{display:flex;align-items:center;gap:7px;padding:11px 9px;background:#1b2b3c;border-bottom:1px solid #2a4155}
#mukodes .telegram-avatar{width:28px;height:28px;border-radius:50%;background:#2089c2;display:grid;place-items:center;flex-shrink:0}
#mukodes .telegram-avatar>.icon{width:17px;height:17px;color:#fff}
#mukodes .telegram-header strong{display:block;font-size:.875rem;font-weight:550;line-height:1.25}
#mukodes .telegram-header small{display:block;font-size:.75rem;color:#9db8d0;margin-top:2px;line-height:1.2}
#mukodes .telegram-chat{flex:1;padding:12px 8px;min-height:0;overflow-y:auto;scrollbar-width:thin;background:radial-gradient(ellipse at 0 100%,#183249,transparent 75%),#102030}
#mukodes .telegram-date{display:table;margin:0 auto 11px;font-size:.75rem;color:#90a9be;line-height:1.2}
#mukodes .telegram-waiting{font-size:.8125rem;color:#69879f;line-height:1.7;padding:26px 9px;text-align:center}
#mukodes .telegram-message{padding:10px 10px 7px;border-radius:10px 10px 10px 3px;background:#24445e;color:#d5e8f5;box-shadow:0 3px 10px #030b1426;transform-origin:0 100%}
#mukodes .telegram-message strong{display:block;font-size:.875rem;line-height:1.4;color:#72d4ff;margin-bottom:5px}
#mukodes .telegram-message p{font-size:.875rem;line-height:1.5;margin:0;white-space:pre-line}
#mukodes .telegram-message time{display:block;text-align:right;font-size:.75rem;line-height:1.3;color:#9ebdd4;margin-top:4px}
#mukodes .telegram-composer{padding:9px 10px;background:#1b2b3c;display:flex;align-items:center;justify-content:space-between;color:#738ea5;font-size:.75rem}
#mukodes .telegram-composer>.icon{width:15px;height:15px;color:#75caff}
#mukodes .phone-home{width:62px;height:3px;background:#7291ac;border-radius:2px;margin:8px auto 2px}
#mukodes .phone-status,#mukodes .telegram-header,#mukodes .telegram-composer,#mukodes .phone-home{flex-shrink:0}
#mukodes .phone-delivery{font-size:.75rem;text-align:center;color:#83a4be;margin:10px 0 0;line-height:1.45}
#mukodes .telegram-destination.is-delivered .telegram-phone{border-color:#8cd7fa;box-shadow:1px 1px 0 #8eb8d2,3px 2px 0 #365a76,6px 4px 0 #1a374f,9px 6px 0 #07111d,22px 27px 40px #02071099,0 0 24px #38bdf822}
#mukodes .telegram-destination.is-delivered .telegram-message{animation:workflow-message-in .5s cubic-bezier(.2,.7,.3,1)}
#mukodes .telegram-destination.is-delivered .phone-delivery{color:#93dfb3}
#mukodes .line-crossing{margin-top:13px;padding:8px 9px 5px;background:#0f1c29;border:1px solid #2b4257;border-radius:5px}
#mukodes .line-crossing svg{display:block;width:100%;height:54px;overflow:visible}
#mukodes .detection-line{stroke:#589ac1;stroke-width:1.5;stroke-dasharray:3 3}
#mukodes .detection-track{stroke:#2e485b;stroke-width:1}
#mukodes .line-crossing svg text{font:12px var(--font);fill:#7d9eb7}
#mukodes .tracked-object{fill:#214967;stroke:#72ceff;stroke-width:1.5}
#mukodes .line-crossing.is-triggered .detection-line{stroke:#a5e6ff;stroke-width:2.5}
#mukodes .line-crossing.is-triggered .tracked-object{fill:#4aaada;stroke:#c7eeff}
#mukodes .line-crossing small{display:block;font-size:.75rem;color:#7ca3c0;text-align:center;line-height:1.4}

#mukodes .telegram-destination{margin:0 auto}
#mukodes .telegram-destination>.node-step{display:block;margin:0 0 11px;color:#8da7bc}
@keyframes journey-caret{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes workflow-message-in{from{opacity:0;transform:translateY(12px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes crossing-detection-flash{0%,100%{border-color:#ff6868}35%{border-color:#ffb2b2}}
@keyframes access-lock-confirm{0%{box-shadow:0 0 0 0 #fb6c873f;transform:scale(.92)}45%{box-shadow:0 0 0 10px #fb6c8719;transform:scale(1.08)}100%{box-shadow:0 0 0 16px #fb6c8700;transform:scale(1)}}
@media(max-width:1150px) and (min-width:1001px){
  #mukodes .exchange-stage{grid-template-columns:minmax(150px,.8fr) minmax(280px,1.8fr) 200px;gap:25px;padding:18px 24px 30px}
  #mukodes .endpoint-card{padding:18px 14px}
  #mukodes .journey-steps button{padding:13px 9px;gap:7px}
}
@media(max-width:1000px){
  #mukodes .destination-scene{width:min(360px,100%);height:450px;left:50%;top:50%}
  #mukodes .endpoint-destination:has(.data-scene:not([hidden])),#mukodes .endpoint-destination:has(.access-scene:not([hidden])){padding-top:120px;padding-bottom:100px}
  #mukodes .event-backdrop{width:230px;height:280px;left:auto;right:-8px;top:50%;transform:translateY(-50%);mask-image:radial-gradient(ellipse 60% 52% at 50% 48%,#000 26%,transparent 87%);-webkit-mask-image:radial-gradient(ellipse 60% 52% at 50% 48%,#000 26%,transparent 87%)}
  #mukodes .flying-message{width:38px;height:28px;font-size:.75rem;gap:0;letter-spacing:0;box-shadow:0 0 15px #4bbdfa40}
  #mukodes .flying-message>.icon{display:none}
  #mukodes .message-controls>.button{max-width:calc(100% - 48px)}
  #mukodes .exchange-stage{grid-template-columns:minmax(0,1fr);gap:28px;min-height:0;padding:28px;max-width:650px;margin:auto}
  #mukodes .endpoint-source{max-width:none;width:100%}
  #mukodes .endpoint-source>.endpoint-label{display:none}
  #mukodes .sender-card{display:grid;grid-template-columns:30px minmax(0,1fr);gap:0 14px;padding:17px 20px}
  #mukodes .sender-card>.endpoint-icon{grid-column:1;grid-row:1/3;margin:0;align-self:center}
  #mukodes .sender-card>strong,#mukodes .sender-card>.endpoint-detail{grid-column:2}
  #mukodes .sender-card>.endpoint-detail{margin-top:2px}
  #mukodes .sender-card>.endpoint-status{grid-column:1/-1;margin-top:10px;padding-top:8px}
  #mukodes .sender-card .line-crossing{grid-column:1/-1;width:100%}
  #mukodes .message-surface{height:auto;min-height:320px}
  #mukodes .endpoint-destination{width:100%}
  #mukodes .receiver-card{padding:20px;display:grid;grid-template-columns:30px minmax(0,1fr);gap:0 14px}
  #mukodes .receiver-card>.endpoint-icon{grid-column:1;grid-row:1/3;margin:0;align-self:center}
  #mukodes .receiver-card>strong,#mukodes .receiver-card>.endpoint-detail{grid-column:2}
  #mukodes .receiver-card>.endpoint-detail{margin-top:2px}
  #mukodes .receiver-card>.receiver-value,#mukodes .receiver-card>.endpoint-status{grid-column:1/-1}
  #mukodes .exchange-heading{align-items:start}
  #mukodes .exchange-heading>p{max-width:300px}
  #mukodes .journey-steps{display:flex;overflow-x:auto;scrollbar-width:thin}
  #mukodes .journey-steps li{flex:1 0 165px}
  #mukodes .journey-steps button{min-height:77px}
}
@media(max-width:650px){
  #mukodes .data-transport{margin:12px 18px 0}
  #mukodes .scenario-intro{padding:20px 18px 18px;gap:14px}
  #mukodes .scenario-intro h3{font-size:1.0625rem}
  #mukodes .scenario-intro p{font-size:.9375rem}
  #mukodes .demo-reset{font-size:.8125rem}
  #mukodes .demo-reset .icon{display:none}
  #mukodes .journey-nav{padding:0 18px}
  #mukodes .journey-guidance{padding:12px 18px 18px;display:block}
  #mukodes #journey-count{display:block;margin-top:6px}
  #mukodes .exchange-heading{padding:20px 18px 0;display:block}
  #mukodes .exchange-heading h3{font-size:1.25rem}
  #mukodes .exchange-heading>p{max-width:none;margin-top:8px}
  #mukodes .exchange-stage{padding:24px 18px;gap:26px}
  #mukodes .message-surface{height:auto;min-height:330px}
  #mukodes .console-bar,#mukodes .console-address,#mukodes .console-footer{padding-left:12px;padding-right:12px}
  #mukodes #message-pre{padding:14px 12px}
  #mukodes .console-footer{align-items:start}
  #mukodes .message-controls{padding-top:18px}
  #mukodes .telegram-destination{width:200px;max-width:100%}
  #mukodes .telegram-phone{transform:rotateY(-12deg) rotateX(4deg) rotateZ(1.5deg)}
  #mukodes .demo-footer{padding:12px 18px;display:block}
  #mukodes .demo-footer>span{display:block}
  #mukodes .demo-footer>span+span{margin-top:6px;color:#7e9bb0}
}
@media(prefers-reduced-motion:reduce){
  #mukodes .detection-box,#mukodes .access-scene.is-running .access-lock-badge{animation:none!important}
  #mukodes .ptz-area,#mukodes .reader-indicator,#mukodes .access-lock-badge{transition:none}
  #mukodes .event-backdrop,#mukodes .event-boundary{transition:none}
  #mukodes .receiver-card.just-arrived,#mukodes .delivery-receipt.just-arrived .receipt-icon,#mukodes .telegram-destination.just-arrived .telegram-phone,#mukodes .telegram-destination.just-arrived .phone-delivery{animation:none!important}
  #mukodes .endpoint-card,#mukodes .telegram-phone,#mukodes .packet-trigger,#mukodes .workflow-progress>span{transition:none}
  #mukodes .telegram-message,#mukodes .typing-caret{animation:none!important}
}

/* The controls stay available while the demonstration scrolls beneath them. */
#mukodes .detection-box{border-radius:3px;z-index:3}
#mukodes .detection-box>span{position:absolute;top:6px;left:6px;max-width:calc(100% - 12px);padding:4px 6px;border-radius:3px;background:#812635;color:#fff;font-size:.75rem;font-weight:600;line-height:1.3;white-space:normal}
#mukodes .crossing-backdrop.is-crossed .detection-box{opacity:1;border-color:#ff6868;background:none;box-shadow:0 0 5px #ff62623b,inset 0 0 4px #ff626224;animation:crossing-detection-flash 1.3s ease-in-out 5}
#mukodes [data-step="sia"][data-scenario="video"] .line-crossing{display:none}
#mukodes [data-step="sia"][data-scenario="video"] .line-crossing svg{display:none}
#mukodes .crossing-backdrop .event-boundary{position:absolute;inset:0;width:100%;height:100%;z-index:2;border:0;transform:none;overflow:visible;box-shadow:none;pointer-events:none}
#mukodes .event-boundary path{fill:none;stroke:#76c7ec88;stroke-width:4;stroke-dasharray:14 17;stroke-linecap:round}
#mukodes .event-boundary text{fill:#86b7d080;font:40px var(--font)}
#mukodes .crossing-backdrop.is-crossed .event-boundary path{stroke:#8bd3f6bb}
@keyframes subscriber-confirm{0%,35%{box-shadow:0 0 0 3px #63e7a33b,0 0 22px #63e7a32b}100%{box-shadow:0 0 0 8px transparent}}
@keyframes reader-reject{0%,100%{opacity:.7}25%,65%{opacity:1;box-shadow:0 0 12px 4px #ff516c9e}}
@keyframes reader-callout-in{from{opacity:0;translate:0 5px}to{opacity:1;translate:0 0}}
@keyframes reader-callout-swing{0%,100%{rotate:-1.8deg}50%{rotate:1.8deg}}
@media(min-width:1001px){
  #mukodes .scenario-intro p{font-size:1rem;line-height:1.5}
  #mukodes .exchange-heading>p{max-width:540px}
  #mukodes .ptz-diagram{min-height:0}
  #mukodes .endpoint-source>.endpoint-label{margin-bottom:7px}
}
@media(max-width:1000px){
  #mukodes .endpoint-destination:has(.data-scene:not([hidden])),#mukodes .endpoint-destination:has(.access-scene:not([hidden])){padding:0}
  #mukodes .demo-navigation .journey-steps li{flex:1 0 150px}
  #mukodes .demo-navigation .journey-steps button{min-height:58px;padding:8px 10px}
  #mukodes .scenario-intro{padding:14px 22px}
  #mukodes .journey-nav{padding:8px 22px 0}
  #mukodes .journey-guidance{padding:6px 22px 8px}
  #mukodes .exchange-heading{padding:14px 22px 0}
  #mukodes .message-surface{height:auto;min-height:300px}
  #mukodes .exchange-stage{padding:20px 28px}
  #mukodes .destination-scene.ptz-scene{max-width:340px}
}
@media(max-width:650px){
  #mukodes .demo-toolbar{padding:0 12px}
  #mukodes .demo-badge{display:none}
  #mukodes .scenario-tabs{width:100%;gap:0;justify-content:space-between}
  #mukodes .scenario-tabs button{font-size:0;gap:0;padding:12px 3px}
  #mukodes .scenario-tabs button span{font-size:.8125rem}
  #mukodes .demo-navigation .journey-nav{padding:6px 10px 0}
  #mukodes .demo-navigation .journey-steps li{flex-basis:138px}
  #mukodes .demo-navigation .journey-steps button small{display:none}
  #mukodes .demo-navigation .journey-steps button{min-height:44px;font-size:.8125rem}
  #mukodes .demo-navigation .journey-guidance{padding:5px 12px 7px;display:flex;justify-content:flex-end}
  #mukodes .demo-navigation .journey-guidance>span:first-child{display:none}
  #mukodes #journey-count{margin:0}
  #mukodes .scenario-intro{padding:13px 16px}
  #mukodes .exchange-heading{padding:13px 16px 0}
  #mukodes .data-transport{margin:10px 16px 0}
}
@media(prefers-reduced-motion:reduce){
  #mukodes .data-scene .subscriber-node,#mukodes .access-scene .reader-indicator,#mukodes .access-scene .access-door-outline{animation:none!important}
}

/* A short SIA frame needs a compact window, not the full exchange column. */
#mukodes [data-step="sia"] .message-surface{width:min(100%,340px);height:auto;min-height:270px}
#mukodes [data-step="sia"] .console-bar{padding:8px 12px}
#mukodes [data-step="sia"] .console-address{padding:8px 12px}
#mukodes [data-step="sia"] #message-pre{padding:12px 14px}
#mukodes [data-step="sia"] .console-footer{padding:7px 12px}
@media(prefers-reduced-motion:reduce){
  #mukodes .access-scene .reader-callout{animation:none!important}
  #mukodes .reader-halo,#mukodes .access-door-outline path{transition:none}
}

@media(prefers-reduced-motion:reduce){#mukodes .burglary-tool-layer,#mukodes .hub-edge-fragment{display:none!important}}

/* Reserve the full payload before typing so every message fits without inner scrolling. */
#mukodes #message-pre::after{content:attr(data-complete-message);grid-area:1/1;visibility:hidden;pointer-events:none}
#mukodes .message-typed{grid-area:1/1;min-width:0}