/* Host-club order-stop story. All selectors are local to this demonstration. */
.host-demo-section {
  --host-blue:#74a5ff;
  --host-gold:#efce83;
  --host-ease:cubic-bezier(.22,1,.36,1);
  position:relative;
  overflow:clip;
  border-top:2px solid var(--vertical-ink,#123362);
  background:var(--vertical-soft,#f2f5fb);
  color:var(--vertical-ink,#123362);
}
.host-demo-section .section-lead { color:#516885; }
.host-demo-section .section-kicker { color:var(--vertical-accent,#9e782f); }
.host-demo-section button,.host-demo-section a { -webkit-tap-highlight-color:transparent; }
.host-demo-section button:focus-visible,.host-demo-section a:focus-visible { outline:3px solid #d5a94d; outline-offset:4px; }
.host-demo-showcase {
  position:relative;
  isolation:isolate;
  margin-top:28px;
  border:1px solid #4f74aa;
  border-radius:21px;
  background:radial-gradient(ellipse at 19% 35%,#2461b52d,transparent 57%),linear-gradient(145deg,#122d58,#071b39 75%);
  color:#edf4ff;
  box-shadow:0 15px 30px #09295a1a,0 4px 0 #d3b570;
  overflow:hidden;
}
.host-demo-topline { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:6px 12px; padding:14px 16px; border-bottom:1px solid #5c80b43b; }
.host-demo-topline>span { display:flex; align-items:center; gap:7px; color:#e6efff; font:800 11px/1.3 var(--display,sans-serif); letter-spacing:.1em; }
.host-demo-topline i { width:6px; height:6px; border-radius:50%; background:var(--host-gold); box-shadow:0 0 0 4px #efce8312; }
.host-demo-topline>small { font-size:10px; line-height:1.4; color:#bed0e9; }
.host-demo-selector { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; padding:15px 15px 0; }
.host-demo-selector>button { display:flex; flex-direction:column; justify-content:center; align-items:center; min-width:0; min-height:69px; padding:8px 5px; border:1px solid #6886b25c; border-radius:10px; background:#243f655c; color:#d3e0f5; font:700 11px/1.6 var(--sans,sans-serif); cursor:pointer; transition:background .3s,border-color .3s,color .3s,transform .5s var(--host-ease); }
.host-demo-selector small { display:block; margin-bottom:2px; font:800 12px/1.2 var(--display,sans-serif); color:#94b5e7; }
.host-demo-selector>button[aria-pressed="true"] { background:linear-gradient(125deg,#f9e2a7,#e7be67); border-color:#f7dfa0; color:#173158; box-shadow:0 3px 0 #0003; transform:translateY(-2px); }
.host-demo-selector>button[aria-pressed="true"] small { color:#846326; }
.host-demo-selector>button:hover:not(:disabled) { border-color:#efce83; }
.host-demo-selector>button:disabled { cursor:default; }
.host-demo-stage { padding:0 16px 17px; }
.host-demo-state-copy { display:grid; grid-template-columns:35px minmax(0,1fr); align-items:start; gap:10px; min-height:105px; padding:21px 1px 16px; }
.host-demo-step { display:grid; place-items:center; width:35px; height:35px; margin-top:2px; border:1px solid #a2beea61; border-radius:11px; color:var(--host-gold); font:800 18px/1 var(--display,sans-serif); background:#adcafa0b; }
.host-demo-state-copy h3 { font-size:14px; line-height:1.8; font-weight:800; letter-spacing:-.02em; color:#f6f5ed; }
.host-demo-state-copy p { margin-top:5px; color:#b9cce9; font-size:11px; line-height:1.85; }
.host-demo-devices { display:grid; grid-template-columns:.9fr 1.1fr; gap:16px; align-items:end; padding:4px 5px 0; }
.host-demo-device { min-width:0; position:relative; }
.host-demo-device>header { min-height:48px; text-align:center; padding-bottom:10px; }
.host-demo-device>header strong { display:block; color:#eef4ff; font:800 16px/1.2 var(--display,sans-serif); }
.host-demo-device>header span { display:block; color:#a9bfdf; font-size:10px; line-height:1.5; margin-top:4px; }
.host-demo-device-frame { position:relative; min-width:0; height:219px; padding:14px 11px 20px; border:5px solid #041328; border-radius:25px; background:linear-gradient(145deg,#264974a6,#102949ee); box-shadow:0 0 0 1px #7093c658,inset 0 1px 0 #c8ddff2b,0 15px 21px #0003; overflow:hidden; }
.host-demo-handy .host-demo-device-frame { max-width:163px; margin:0 auto; }
.host-demo-order .host-demo-device-frame { height:179px; border-radius:14px; padding:11px 12px 18px; }
.host-demo-device-frame::before { position:absolute; content:""; inset:0; pointer-events:none; background:linear-gradient(135deg,#f3f7ff0e,transparent 43%); }
.host-demo-device-top { display:flex; align-items:center; justify-content:space-between; gap:4px; min-height:15px; color:#9fbbdf; font:800 9px/1 var(--display,sans-serif); letter-spacing:.06em; }
.host-demo-device-top>span:first-child { color:#e5d29c; font-size:13px; }
.host-demo-device-top>i { width:19px; height:3px; background:#02132999; border-radius:3px; }
.host-demo-reception { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:5px; min-height:29px; margin:13px -2px 8px; padding:5px 3px; border:1px solid #7db5ff62; border-radius:7px; background:#4284db20; color:#d8e9ff; transition:background .5s,border-color .5s,color .5s; }
.host-demo-reception>i { width:5px; height:5px; flex:none; border-radius:50%; background:#83bcff; box-shadow:0 0 8px #78adff65; }
.host-demo-reception strong { font-size:11px; font-weight:800; line-height:1.3; }
.host-demo-menu { display:grid; gap:7px; transition:opacity .5s; }
.host-demo-menu>div { display:flex; align-items:center; gap:7px; min-height:42px; padding:7px 6px; border:1px solid #92b4e32b; border-radius:6px; background:#abcaf807; }
.host-demo-menu>div>span { flex:1; min-width:0; color:#cdddf4; font:800 8px/1.3 var(--display,sans-serif); letter-spacing:.03em; }
.host-demo-menu small { display:block; margin-top:3px; color:#90aacd; font:500 8px/1.3 var(--sans,sans-serif); }
.host-demo-menu b { color:#8fabd2; font:400 14px/1 Arial,sans-serif; }
.host-demo-menu i { display:block; position:relative; width:9px; height:20px; border:1px solid #d9ba75; border-radius:3px 3px 2px 2px; margin:3px 3px 0; flex:none; background:linear-gradient(transparent 35%,#dfba7028 35%,#dfba7028 67%,transparent 67%); }
.host-demo-menu .host-demo-bottle::before { content:""; position:absolute; top:-5px; left:2px; width:3px; height:5px; border:1px solid #d9ba75; border-bottom:0; border-radius:1px 1px 0 0; }
.host-demo-menu .host-demo-glass { width:11px; height:15px; border-radius:2px 2px 5px 5px; margin:1px 2px 4px; background:linear-gradient(transparent 30%,#7eb5ef33 30%); border-color:#9bb9e8; }
.host-demo-menu .host-demo-glass::after { content:""; position:absolute; width:7px; height:1px; bottom:-5px; left:1px; background:#9bb9e8; box-shadow:0 -2px 0 -1px #9bb9e8; }
.host-demo-order .host-demo-menu { grid-template-columns:1fr 1fr; gap:7px; }
.host-demo-order .host-demo-menu>div { flex-direction:column; justify-content:center; gap:6px; min-height:62px; padding:6px 3px; text-align:center; }
.host-demo-order .host-demo-menu b,.host-demo-order .host-demo-menu small { display:none; }
.host-demo-order .host-demo-reception { margin-top:9px; }
.host-demo-device-home { position:absolute; bottom:6px; height:3px; width:30%; left:35%; background:#a3b9da4d; border-radius:4px; }
.host-demo-stopped { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; position:absolute; inset:91px 8px 21px; border:1px solid #c9b78338; border-radius:9px; background:#0c213de8; color:#efce83; opacity:0; visibility:hidden; transform:translateY(7px) scale(.98); transition:opacity .5s,transform .65s var(--host-ease),visibility .5s; }
.host-demo-stopped>span { display:grid; place-items:center; width:24px; height:24px; border:1px solid #ceb479; border-radius:50%; font:400 19px/1 Arial,sans-serif; }
.host-demo-stopped>strong { font-size:11px; font-weight:800; }
.host-demo-order .host-demo-stopped { inset:76px 8px 19px; flex-direction:row; }
.host-demo-device[data-open="false"] .host-demo-reception { color:#efdbb1; border-color:#cdb78366; background:#b5974b1c; }
.host-demo-device[data-open="false"] .host-demo-reception>i { background:#d5bc83; box-shadow:none; }
.host-demo-device[data-open="false"] .host-demo-menu { opacity:.15; }
.host-demo-device[data-open="false"] .host-demo-stopped { opacity:1; visibility:visible; transform:none; }
.host-demo-connection { position:relative; height:52px; margin:0 5px; }
.host-demo-connection>svg { display:block; width:100%; height:100%; overflow:visible; fill:none; stroke-width:1.5; }
.host-demo-wire { stroke:#5884bf50; }
.host-demo-signal { stroke:#8cb5ff; stroke-width:2; stroke-dasharray:22 180; animation:host-demo-flow 2.4s linear infinite; animation-play-state:paused; filter:drop-shadow(0 0 3px #6a9dff); transition:opacity .5s; }
.host-demo-signal-order { stroke:#efce83; animation-delay:-1.2s; filter:drop-shadow(0 0 3px #efce8355); }
.host-demo-connection>span { position:absolute; top:14px; left:50%; transform:translateX(-50%); padding:4px 10px; border:1px solid #a5b7ca4a; border-radius:20px; color:#e3d4ad; background:#10284a; font:800 10px/1 var(--display,sans-serif); letter-spacing:.04em; }
.host-demo-showcase[data-running="true"] .host-demo-signal { animation-play-state:running; }
.host-demo-showcase[data-host-state="tabletop-stopped"] .host-demo-signal-order,.host-demo-showcase[data-host-state="both-stopped"] .host-demo-signal { opacity:0; }
.host-demo-ledger { position:relative; padding:16px 16px 0; border:1px solid #dac28b; border-radius:13px; background:linear-gradient(150deg,#fffdf6,#eee8d8); color:#1e3c66; box-shadow:0 8px 20px #0002; }
.host-demo-ledger::before { content:""; position:absolute; top:-1px; left:18px; right:18px; height:2px; background:linear-gradient(90deg,transparent,#e6c16c,#fff4cd,#e6c16c,transparent); }
.host-demo-ledger-head { display:flex; justify-content:space-between; align-items:center; gap:7px; }
.host-demo-ledger-head>div { min-width:0; }
.host-demo-ledger-head small { color:#778198; font:800 8px/1.4 var(--display,sans-serif); letter-spacing:.15em; }
.host-demo-ledger-head h4 { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px; font-size:12px; line-height:1.6; font-weight:800; }
.host-demo-ledger-head h4>b { font:800 26px/1.4 var(--display,sans-serif); color:#234f8c; }
.host-demo-record-mark { display:inline-flex; gap:4px; align-items:center; padding:4px 6px; flex:none; border:1px solid #d1c097; border-radius:5px; color:#65552f; background:#f3e7c8; font-size:9px; line-height:1.4; font-weight:800; }
.host-demo-record-mark i { font-size:10px; font-style:normal; }
.host-demo-ledger dl { display:grid; grid-template-columns:1fr 1fr 1fr; margin:12px 0 0; padding:13px 0; border-top:1px solid #c5cbd1; border-bottom:1px dashed #b8c0cb; }
.host-demo-ledger dl>div { min-width:0; text-align:center; border-right:1px solid #cbd1d7; }
.host-demo-ledger dl>div:last-child { border:0; }
.host-demo-ledger dt { font-size:9px; line-height:1.6; color:#67748b; }
.host-demo-ledger dd { margin:4px 0 0; font:800 24px/1.3 var(--display,sans-serif); color:#254e82; }
.host-demo-ledger dl>div:first-child dd { padding-top:5px; font:800 14px/1.6 var(--sans,sans-serif); }
.host-demo-ledger dd>small { font:700 10px/1.5 var(--sans,sans-serif); }
.host-demo-ledger-note { display:flex; align-items:center; gap:7px; min-height:47px; margin:0; padding:10px 0; font-size:10px; font-weight:700; line-height:1.7; color:#5b6980; }
.host-demo-ledger-note>span:first-child { color:#967230; font-size:12px; }
.host-demo-checkout { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:45px; border-top:1px solid #c6cbd1; color:#244f8a; font-size:11px; line-height:1.6; font-weight:800; }
.host-demo-checkout>span { font:19px/1 Arial,sans-serif; color:#9d7931; }
.host-demo-checkout:hover { color:#8d691e; }
.host-demo-tour-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-top:1px solid #6080b141; background:#0b2245b3; }
.host-demo-tour-controls>p { flex:1; min-width:0; font-size:11px; line-height:1.7; color:#e2ebfa; font-weight:700; }
.host-demo-tour-controls small { display:block; color:#9fb8dc; font-size:10px; font-weight:500; margin-top:2px; line-height:1.6; }
.host-demo-tour-controls button { flex:none; min-height:44px; min-width:94px; max-width:45%; padding:9px 11px; border:1px solid #d0b36e; border-radius:8px; background:#f1d696; color:#163762; font-size:11px; line-height:1.6; font-weight:800; cursor:pointer; transition:background .2s; }
.host-demo-tour-controls button:hover:not(:disabled) { background:#fff0c8; }
.host-demo-tour-controls button:disabled { background:#2e4669; border-color:#6a82a5; color:#c1d1e8; cursor:default; }
.host-demo-progress { height:3px; background:#2e476d; }
.host-demo-progress>span { display:block; width:100%; height:100%; transform:scaleX(0); transform-origin:left center; background:linear-gradient(90deg,#83adff,#efce83); }
.host-demo-live { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.host-demo-setting-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:24px; }
.host-demo-setting-tags>span { display:block; padding:5px 9px; border:1px solid #c2d0e2; border-radius:20px; background:#ffffffb3; color:#4b6489; font-size:10px; font-weight:700; line-height:1.5; }
.host-demo-disclaimer { margin-top:12px; color:#5c6e88; font-size:11px; line-height:1.9; }
.host-demo-inquiry { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:49px; margin-top:22px; border-top:1px solid #b9c9de; color:#234e89; font-size:12px; font-weight:800; }
.host-demo-inquiry>span { font:22px/1 Arial,sans-serif; color:#9a7735; }
.host-demo-source { display:inline-flex; align-items:center; gap:10px; min-height:44px; color:#58708f; font-size:10px; text-decoration:underline; text-underline-offset:4px; }
.host-demo-showcase[data-visible="false"] *,body.image-viewing .host-demo-showcase *,body.night-theater-open .host-demo-showcase *,body.page-suspended .host-demo-showcase * { animation-play-state:paused!important; }
.host-demo-showcase[data-visible="false"] * { transition:none!important; }
@keyframes host-demo-flow { from { stroke-dashoffset:202; } to { stroke-dashoffset:0; } }
@media(max-width:380px) {
  .host-demo-topline { padding:13px 12px; }
  .host-demo-selector { padding:13px 10px 0; gap:5px; }
  .host-demo-selector>button { font-size:10px; padding:7px 3px; }
  .host-demo-stage { padding:0 11px 13px; }
  .host-demo-state-copy { min-height:125px; grid-template-columns:29px minmax(0,1fr); gap:8px; padding-top:18px; }
  .host-demo-step { width:29px; height:32px; font-size:16px; }
  .host-demo-state-copy h3 { font-size:12px; }
  .host-demo-state-copy p { font-size:10px; }
  .host-demo-devices { padding:2px 1px 0; gap:11px; }
  .host-demo-device>header strong { font-size:14px; }
  .host-demo-device>header span { font-size:9px; }
  .host-demo-device-frame { height:207px; padding:12px 7px 19px; border-width:4px; border-radius:18px; }
  .host-demo-order .host-demo-device-frame { height:171px; padding:10px 7px 17px; }
  .host-demo-device-top { font-size:7px; }
  .host-demo-device-top>i { width:12px; }
  .host-demo-reception { gap:4px; padding-left:1px; padding-right:1px; }
  .host-demo-reception strong { font-size:10px; }
  .host-demo-menu>div { gap:4px; padding-left:3px; padding-right:3px; }
  .host-demo-menu>div>span { font-size:7px; }
  .host-demo-menu small { font-size:7px; }
  .host-demo-menu b { display:none; }
  .host-demo-order .host-demo-menu { gap:4px; }
  .host-demo-stopped { inset:86px 5px 20px; }
  .host-demo-order .host-demo-stopped { inset:74px 5px 18px; gap:5px; }
  .host-demo-stopped>span { width:20px; height:20px; }
  .host-demo-stopped>strong { font-size:10px; }
  .host-demo-ledger { padding:13px 11px 0; }
  .host-demo-ledger-head h4 { font-size:10px; }
  .host-demo-ledger-head h4>b { font-size:24px; }
  .host-demo-record-mark { font-size:8px; padding:4px; }
  .host-demo-tour-controls { padding:12px 11px; gap:7px; }
  .host-demo-tour-controls>p { font-size:10px; }
  .host-demo-tour-controls small { font-size:9px; }
  .host-demo-tour-controls button { min-width:82px; padding:8px; font-size:10px; }
  .host-demo-source { font-size:9px; }
}
@media(prefers-reduced-motion:reduce) {
  .host-demo-showcase *,.host-demo-showcase *::before,.host-demo-showcase *::after { animation:none!important; transition:none!important; }
}
body.motion-off .host-demo-showcase *,html[data-motion="off"] .host-demo-showcase * { animation:none!important; transition:none!important; }

/* A bounded handoff plays across the two devices, then resolves in one ledger. */
.host-demo-action { position:relative; isolation:isolate; overflow:hidden; margin:0 -6px; padding:6px 6px 0; border-radius:12px; }
.host-demo-floor { position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; background:radial-gradient(ellipse at 15% 25%,#c0d4e617,transparent 45%),radial-gradient(ellipse at 85% 45%,#d8c2a017,transparent 45%); }
.host-demo-floor>i { position:absolute; width:170px; height:290px; top:-150px; left:-50px; border:1px solid #c5d3e21a; transform:rotate(-32deg); }
.host-demo-floor>i:nth-child(2) { left:auto; right:-50px; transform:rotate(32deg); }
.host-demo-floor>span { position:absolute; left:10px; top:218px; color:#b8c5d324; font:800 34px/1 var(--display,sans-serif); letter-spacing:-.04em; }
.host-demo-devices { position:relative; z-index:2; gap:19px; padding:1px 9px 0; }
.host-demo-device>header { min-height:41px; padding-bottom:8px; }
.host-demo-device>header strong { font-size:14px; }
.host-demo-device>header span { font-size:9px; }
.host-demo-device-frame { height:179px; padding:10px 10px 17px; transform-origin:center bottom; transition:transform .8s var(--host-ease),opacity .7s; }
.host-demo-order .host-demo-device-frame { height:151px; padding:9px 10px 16px; }
.host-demo-reception { margin-top:10px; margin-bottom:7px; }
.host-demo-menu { gap:5px; }
.host-demo-menu>div { min-height:29px; padding:4px; gap:4px; }
.host-demo-menu small { display:none; }
.host-demo-menu i { width:8px; height:15px; margin-left:3px; margin-right:3px; }
.host-demo-menu .host-demo-glass { width:10px; height:12px; }
.host-demo-order .host-demo-menu>div { min-height:45px; gap:5px; padding:4px 2px; }
.host-demo-order .host-demo-reception { margin-top:8px; }
.host-demo-stopped { inset:83px 8px 18px; z-index:4; }
.host-demo-order .host-demo-stopped { inset:72px 7px 17px; }
.host-demo-actor { position:absolute; z-index:3; top:104px; width:105px; pointer-events:none; transform-origin:center 90%; transition:transform .95s var(--host-ease),opacity .7s; }
.host-demo-actor-handy { left:-29px; }
.host-demo-actor-order { right:-22px; top:88px; }
.host-demo-actor>.crew-sprite { width:100%; font-style:normal; filter:drop-shadow(0 4px 2px #0006); transform-origin:center 88%; }
.host-demo-actor>b { display:block; width:max-content; max-width:100%; margin:-4px auto 0; padding:3px 5px; border:1px solid #c2cbd34d; border-radius:4px; color:#e3e8ed; background:#252e3bef; font-size:8px; line-height:1.4; font-weight:800; text-align:center; }
.host-demo-connection { z-index:1; height:40px; margin:0 11px; }
.host-demo-connection>span { top:8px; font-size:9px; }
.host-demo-showcase .host-demo-signal { animation:none; opacity:0; }
.host-demo-ledger { z-index:3; padding:12px 13px 0; transform-origin:center top; transition:transform .9s var(--host-ease),box-shadow .9s; }
.host-demo-ledger-head h4>b { font-size:23px; }
.host-demo-ledger dl { margin-top:8px; padding:8px 0; }
.host-demo-ledger dd { margin-top:2px; font-size:22px; }
.host-demo-ledger dl>div:first-child dd { padding-top:3px; font-size:13px; }
.host-demo-ledger-note { min-height:37px; padding:7px 0; font-size:9px; }
.host-demo-checkout { min-height:39px; font-size:10px; }
.host-demo-ledger-seal { position:absolute; top:43px; left:calc(50% - 40px); z-index:5; width:80px; padding:8px 4px; border:2px solid #668d7e; border-radius:5px; outline:1px solid #668d7e; outline-offset:-5px; background:#eef7f1f5; color:#416456; text-align:center; font:800 11px/1.4 var(--display,sans-serif); letter-spacing:.09em; opacity:0; transform:rotate(-12deg); pointer-events:none; }
.host-demo-ledger-seal>b { font-size:17px; }
.host-demo-action-cue { display:flex; align-items:center; justify-content:center; gap:7px; min-height:36px; padding:7px 4px 2px; color:#c7d7e8; text-align:center; font-size:10px; line-height:1.6; font-weight:700; }
.host-demo-action-cue>i { display:grid; place-items:center; flex:none; width:19px; height:19px; border:1px solid #c5d1df52; border-radius:50%; color:var(--host-gold); font:13px/1 Arial,sans-serif; }
.host-demo-showcase[data-host-state="open"] .host-demo-handy .host-demo-device-frame { transform:rotate(-3deg); }
.host-demo-showcase[data-host-state="open"] .host-demo-order .host-demo-device-frame { transform:rotate(3deg); }
.host-demo-showcase[data-host-state="tabletop-stopped"] .host-demo-order .host-demo-device-frame { transform:translateY(7px) rotate(4deg) scale(.94); opacity:.73; }
.host-demo-showcase[data-host-state="tabletop-stopped"] .host-demo-actor-order { transform:translate(15px,9px) scale(.92); opacity:.5; }
.host-demo-showcase[data-host-state="tabletop-stopped"] .host-demo-actor-handy { transform:translate(14px,-4px) rotate(-4deg) scale(1.06); }
.host-demo-showcase[data-host-state="tabletop-stopped"] .host-demo-handy .host-demo-device-frame { transform:translate(2px,-3px) rotate(-2deg) scale(1.03); }
.host-demo-showcase[data-host-state="both-stopped"] .host-demo-device-frame { transform:translateY(8px) scale(.92); opacity:.65; }
.host-demo-showcase[data-host-state="both-stopped"] .host-demo-actor-handy { transform:translate(32px,7px) scale(.93); }
.host-demo-showcase[data-host-state="both-stopped"] .host-demo-actor-order { transform:translate(-15px,8px) scale(.93); }
.host-demo-showcase[data-host-state="both-stopped"] .host-demo-ledger { transform:translateY(-7px); box-shadow:0 7px 0 #c5d0da23,0 16px 27px #0004; }
.host-demo-showcase[data-host-state="both-stopped"] .host-demo-record-mark { border-color:#a6c1b4; background:#dfece4; color:#547765; }
.host-demo-flight { position:absolute; top:0; left:0; z-index:8; display:flex; align-items:center; gap:7px; width:136px; min-height:51px; padding:8px 9px; border:1px solid #abbaca; border-radius:7px; background:#f4f7f9; color:#344a63; box-shadow:0 8px 18px #0004; opacity:0; pointer-events:none; }
.host-demo-flight>i { display:grid; place-items:center; width:25px; height:29px; flex:none; border:1px solid #b3c4d0; border-radius:5px; color:#769081; background:#e9eff2; font:800 14px/1 var(--display,sans-serif); font-style:normal; }
.host-demo-flight strong { display:block; font-size:11px; line-height:1.5; }
.host-demo-flight small { display:block; color:#8294a4; font-size:8px; line-height:1.4; }
@media(max-width:380px) {
  .host-demo-state-copy { min-height:112px; }
  .host-demo-devices { gap:12px; padding:2px 3px 0; }
  .host-demo-device>header { min-height:39px; }
  .host-demo-device>header strong { font-size:12px; }
  .host-demo-device>header span { font-size:8px; }
  .host-demo-device-frame { height:169px; padding:9px 7px 17px; }
  .host-demo-order .host-demo-device-frame { height:147px; padding:9px 6px 16px; }
  .host-demo-reception { margin-top:9px; }
  .host-demo-reception strong { font-size:9px; }
  .host-demo-menu>div { padding:3px 2px; }
  .host-demo-order .host-demo-menu>div { min-height:43px; }
  .host-demo-menu>div>span { font-size:6px; }
  .host-demo-menu b { display:none; }
  .host-demo-stopped { inset:77px 5px 17px; }
  .host-demo-order .host-demo-stopped { inset:70px 5px 16px; }
  .host-demo-actor { width:88px; top:103px; }
  .host-demo-actor-handy { left:-22px; }
  .host-demo-actor-order { right:-18px; top:86px; }
  .host-demo-actor>b { font-size:7px; padding:2px 4px; }
  .host-demo-connection { height:35px; margin:0 5px; }
  .host-demo-connection>span { font-size:8px; }
  .host-demo-ledger { padding:10px 9px 0; }
  .host-demo-ledger dt { font-size:8px; }
  .host-demo-ledger dd { font-size:20px; }
  .host-demo-ledger dl>div:first-child dd { font-size:12px; }
  .host-demo-ledger-note { font-size:8px; }
  .host-demo-action-cue { font-size:9px; }
  .host-demo-flight { width:120px; gap:5px; padding:7px; }
  .host-demo-flight strong { font-size:10px; }
}