/* TZ-456 (2026-10-12): the looping demo on the sign-in page (js/tz456-hero-demo.js). The stage is drawn at a
   fixed size (900 x 500, or 480 x 640 stacked when the box is narrow) and scaled to fit, so it looks the same
   at every screen width. Colours follow the app. */
.hero-demo{position:relative;width:100%;}
.hd-box{position:relative;width:100%;overflow:hidden;border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,0.45);border:1px solid rgba(255,255,255,0.14);background:#fff;}
.hd-stage{position:absolute;left:0;top:0;width:900px;height:500px;transform-origin:0 0;font-family:"Inter",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:#fff;}
.hd-bar{position:absolute;left:0;top:0;right:0;height:38px;background:#1E3A5F;border-bottom:2px solid #E8A80C;display:flex;align-items:center;gap:18px;padding:0 16px;color:#fff;}
.hd-logo{font-weight:800;font-size:15px;letter-spacing:-0.01em;display:inline-flex;align-items:center;}
.hd-logo svg{width:16px;height:16px;margin:0 2px;}
.hd-file{font-family:"JetBrains Mono",Consolas,monospace;font-size:12px;color:#cfe0f2;}
.hd-left{position:absolute;left:0;top:40px;bottom:0;width:340px;background:linear-gradient(180deg,#2B3340,#3B4250);padding:16px 16px 14px;box-sizing:border-box;display:flex;flex-direction:column;}
.hd-label{font-family:"JetBrains Mono",Consolas,monospace;font-size:11px;font-weight:700;letter-spacing:0.12em;color:#2FD0A0;text-transform:uppercase;margin:0 0 8px;}
.hd-label-sum{margin-top:16px;}
.hd-ta{flex:0 0 150px;background:#2F3846;border:1px solid #5A6475;border-radius:6px;padding:12px;font-size:15px;line-height:1.45;color:#F1F4F8;box-sizing:border-box;}
.hd-caret{display:inline-block;width:2px;height:17px;background:#F1F4F8;vertical-align:-3px;margin-left:1px;}
.hd-row{display:flex;align-items:center;gap:10px;margin-top:12px;}
.hd-status{flex:1;font-family:"JetBrains Mono",Consolas,monospace;font-size:12px;color:#C9D2DE;}
.hd-status.hd-busy::before,.hd-status.hd-ok::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:0;}
.hd-status.hd-busy::before{background:#E8A80C;}
.hd-status.hd-ok::before{background:#22B455;}
.hd-mic{width:30px;height:30px;border:1px solid #6B7587;border-radius:6px;color:#DDE3EA;display:inline-flex;align-items:center;justify-content:center;}
.hd-mic svg{width:16px;height:16px;}
.hd-apply{background:#8E1B3A;color:#fff;font-weight:700;font-size:13px;padding:7px 14px;border-radius:6px;transition:transform .15s, box-shadow .15s, background .15s;}
.hd-apply.hd-ready{box-shadow:0 0 0 2px rgba(232,168,12,0.6);}
.hd-apply.hd-press{transform:scale(0.93);background:#B5244B;box-shadow:0 0 0 6px rgba(232,168,12,0.45);}
.hd-sum{min-height:92px;border:1px solid #2FD0A0;border-radius:6px;padding:10px 12px;font-size:13px;line-height:1.5;color:#EEF2F6;background:rgba(47,208,160,0.06);box-sizing:border-box;}
.hd-canvas{position:absolute;left:340px;top:40px;right:0;bottom:0;background:#fff;display:flex;align-items:center;justify-content:center;padding:8px 10px;box-sizing:border-box;}
.hd-svg{width:100%;height:100%;display:block;}
.hd-node{fill:#ECECFF;stroke:#9370DB;stroke-width:1.2;}
.hd-node-new{stroke:#D97706;stroke-width:2.6;}
.hd-ntxt{font-size:12px;fill:#1a1a18;font-family:"Inter",Arial,sans-serif;}
.hd-rtag{font-size:10px;font-weight:700;fill:#185FA5;font-family:"JetBrains Mono",Consolas,monospace;}
.hd-elbl{font-size:11px;fill:#333;font-family:"Inter",Arial,sans-serif;}
.hd-legend{fill:#F7F7F5;stroke:rgba(0,0,0,0.15);}
.hd-lgtitle{font-size:10px;font-weight:700;letter-spacing:0.06em;fill:#444;font-family:"Inter",Arial,sans-serif;}
.hd-lgcode{font-size:10px;font-weight:700;fill:#185FA5;font-family:"JetBrains Mono",Consolas,monospace;}
.hd-lgname{font-size:11px;fill:#1a1a18;font-family:"Inter",Arial,sans-serif;}
/* Stacked: the change box on top, the diagram below. */
.hd-stage.hd-compact{width:480px;height:720px;}
.hd-compact .hd-left{top:40px;bottom:auto;width:auto;right:0;height:268px;}
.hd-compact .hd-ta{flex-basis:96px;font-size:16px;}
.hd-compact .hd-label-sum{margin-top:10px;}
.hd-compact .hd-sum{min-height:0;height:64px;font-size:12px;padding:7px 10px;overflow:hidden;}
.hd-compact .hd-canvas{left:0;top:308px;}
.hd-pause{position:absolute;right:10px;bottom:10px;width:30px;height:30px;border-radius:50%;border:1px solid rgba(14,39,69,0.25);background:rgba(255,255,255,0.92);color:#0E2745;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;z-index:2;}
.hd-pause svg{width:14px;height:14px;}
.hd-pause:hover{background:#E6F1FB;}
.hd-pause:focus-visible{outline:2px solid #17B0A6;outline-offset:2px;}