/* Stage (/stage/): live app iframes tiled in one window + a floating presenter dock.
   Built for 1920×1080 and 1440×900 (any size works; tiles are laid out in JS). */

.st {
  --st-bg: #07080B;
  --st-tile: #0E1015;
  --st-line: rgba(255, 255, 255, .075);
  --st-line-2: rgba(255, 255, 255, .13);
  --st-muted: #9CA4B2;
  --st-subtle: #6B7482;
  --st-red: #E5262E;
  --st-violet: #7B5CFF;
  --st-turq: #2EE6D6;
  --st-edge: 14px;
  --dock-h: 54px;
  --dock-gap: 12px;
  --surface: #12151B;
  --surface-2: #1C2028;
  --border: var(--st-line);
  --border-strong: var(--st-line-2);
  position: fixed; inset: 0;
  overflow: hidden;
  background:
    radial-gradient(40% 50% at 0% 0%, rgba(229, 38, 46, .08), transparent 70%),
    radial-gradient(40% 50% at 100% 100%, rgba(123, 92, 255, .09), transparent 70%),
    var(--st-bg);
  color: #EEF0F3;
  font-size: 14px;
}
.st-banner { position: fixed; z-index: var(--z-toast); top: 10px; left: 50%; transform: translateX(-50%); box-shadow: var(--shadow-lg); }
.st-banner[hidden] { display: none !important; }

/* ── Tile area ────────────────────────────────────────────────────── */
.st-area {
  position: fixed;
  top: var(--st-edge); left: var(--st-edge); right: var(--st-edge);
  bottom: calc(var(--dock-h) + var(--dock-gap) * 2);
  transition: bottom var(--dur-base) var(--ease-out);
}
.st.is-bar-hidden .st-area { bottom: var(--st-edge); }

.st-tile {
  position: absolute;
  display: grid;
  grid-template-rows: 38px minmax(0, 1fr);
  border-radius: 18px;
  background: var(--st-tile);
  border: 1px solid var(--st-line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 20px 50px -24px rgba(0, 0, 0, .7);
  overflow: hidden;
  isolation: isolate;
  transition: opacity var(--dur-base) var(--ease-out);
}
.st-tile.is-hidden { visibility: hidden; opacity: 0; pointer-events: none; }
.st-tile.is-max { z-index: 2; }
.st.has-max .st-tile:not(.is-max) { visibility: hidden; opacity: 0; pointer-events: none; }

/* Label bar */
.st-tile-head {
  display: flex; align-items: center; gap: 9px;
  min-width: 0;
  padding: 0 7px 0 12px;
  border-bottom: 1px solid var(--st-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012));
  position: relative;
}
.st-tile-head::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--st-red), transparent 55%);
  opacity: .55;
}
.st-tile[data-p="screens"] .st-tile-head::before { background: linear-gradient(90deg, var(--st-violet), var(--st-turq) 30%, transparent 60%); }
.st-tile-mark { flex: none; max-width: none; width: 20px; height: 20px; border-radius: 6px; }
.st-tile-name { flex: none; font: 700 13.5px/1 var(--font-manrope); letter-spacing: -0.005em; color: #fff; white-space: nowrap; }
.st-tile-sub {
  flex: 1; min-width: 0;
  font: 600 12.5px/1 var(--font-manrope); color: var(--st-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.st-tile-sub::before { content: "·"; margin-right: 8px; color: var(--st-subtle); }
.st-live {
  flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 8px; border-radius: 999px;
  font: 800 10px/1 var(--font-inter); letter-spacing: .08em; text-transform: uppercase;
  color: #FF9A9E; background: rgba(229, 38, 46, .12);
}
.st-tile[data-p="screens"] .st-live { color: #C4B5FF; background: rgba(123, 92, 255, .16); }
.st-live i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: st-blink 1.6s ease-in-out infinite; }
@keyframes st-blink { 50% { opacity: .25; } }
.st-tile-tools { flex: none; display: inline-flex; align-items: center; gap: 2px; }
.st-tbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 28px; min-width: 28px; padding: 0 6px;
  border-radius: 8px; border: 0;
  background: transparent; color: var(--st-muted);
  font: 700 12px/1 var(--font-manrope);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.st-tbtn:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.st-tbtn:focus-visible { outline: 2px solid var(--ring, #fff); outline-offset: 1px; }
.st-open { padding: 0 10px 0 8px; margin-left: 2px; background: rgba(255, 255, 255, .06); color: #E4E7EC; }

/* Narrow tiles: drop the sub-label and button text first */
.st-tile[data-narrow] .st-live { display: none; }
.st-tile[data-narrow] .st-open span { display: none; }
.st-tile[data-narrow] .st-open { padding: 0 6px; }
.st-tile[data-tiny] .st-tile-sub { visibility: hidden; }

/* Body */
.st-tile-body { position: relative; overflow: hidden; }
.st-view { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.st-tile[data-kind="tablet"] .st-view { width: 100%; height: 100%; }
.st-view iframe, .st-phone-screen iframe { display: block; width: 100%; height: 100%; border: 0; background: #0B0D17; }
.st-tile[data-kind="tablet"] .st-tile-body { background: #121216; }

/* Phone tiles: a true 390×844 viewport in a device, scaled with --s */
.st-tile[data-kind="phone"] .st-tile-body {
  background:
    radial-gradient(70% 45% at 50% 42%, rgba(229, 38, 46, .11), transparent 72%),
    linear-gradient(180deg, #0D0F14, #0A0B0F);
}
.st-phone {
  --s: .8;
  position: absolute; left: 50%; top: 50%;
  width: 414px; height: 868px; padding: 12px;
  box-sizing: border-box;
  border-radius: 62px;
  background: #060607;
  transform: translate(-50%, -50%) scale(var(--s));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .06),
    0 0 0 1px #0d0e10,
    0 0 0 3.5px #34363c,
    0 0 0 4.5px #6d7078,
    0 0 0 5.5px #18191c,
    0 40px 80px -24px rgba(0, 0, 0, .8);
}
.st-phone::before, .st-phone::after { content: ""; position: absolute; z-index: -1; width: 5px; border-radius: 2px; }
.st-phone::before {
  left: -9px; top: 112px; height: 196px;
  background: linear-gradient(180deg, #4a4d54 0 30px, transparent 30px 58px, #4a4d54 58px 120px, transparent 120px 134px, #4a4d54 134px 196px);
}
.st-phone::after { right: -9px; top: 178px; height: 100px; background: linear-gradient(90deg, #2c2e33, #55585f); }
.st-phone-screen { position: relative; width: 390px; height: 844px; border-radius: 50px; overflow: hidden; background: #0B0D17; isolation: isolate; }
.st-phone-screen::after {
  content: ""; position: absolute; z-index: 10; top: 11px; left: 50%;
  width: 124px; height: 36px; margin-left: -62px; border-radius: 20px;
  background: #000; pointer-events: none;
}

/* Loading veil */
.st-loading {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: var(--st-tile);
  color: var(--st-muted); font: 600 13px/1.3 var(--font-manrope);
  transition: opacity .45s var(--ease-out), visibility 0s .45s;
}
.st-tile.is-loaded .st-loading { opacity: 0; visibility: hidden; }

/* ── Dock ─────────────────────────────────────────────────────────── */
.st-dock {
  position: fixed; z-index: 20;
  left: 50%; bottom: var(--dock-gap);
  transform: translateX(-50%);
  max-width: calc(100vw - 24px);
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.st.is-bar-hidden .st-dock { transform: translate(-50%, calc(100% + 24px)); opacity: 0; pointer-events: none; }
.st-bar {
  display: flex; align-items: center; gap: 6px;
  height: var(--dock-h);
  padding: 0 9px;
  border-radius: 18px;
  background: rgba(17, 20, 26, .88);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--st-line-2);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 22px 60px rgba(0, 0, 0, .55);
  white-space: nowrap;
}
.st-home { display: inline-flex; gap: 3px; padding: 4px; border-radius: 10px; text-decoration: none; }
.st-home:hover { background: rgba(255, 255, 255, .06); }
.st-home img { flex: none; max-width: none; width: 24px; height: 24px; border-radius: 7px; }
.st-sep { flex: none; width: 1px; height: 26px; margin: 0 3px; background: var(--st-line-2); }
.st-group { display: flex; align-items: center; gap: 6px; }
.st-row { display: flex; align-items: center; gap: 4px; }
.st-cap {
  font: 800 9.5px/1 var(--font-inter); letter-spacing: .1em; text-transform: uppercase;
  color: var(--st-subtle); margin: 0 2px 0 4px;
}

.st-seg {
  display: flex; gap: 2px; padding: 3px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--st-line);
}
.st-seg > button {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 11px;
  border: 0; border-radius: 9px;
  background: transparent; color: #AEB5C1;
  font: 700 12.5px/1 var(--font-manrope);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.st-seg > button:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.st-seg > button[aria-pressed="true"] { background: rgba(255, 255, 255, .13); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 2px 8px rgba(0, 0, 0, .3); }
.st-speed > button { min-width: 38px; padding: 0 8px; justify-content: center; font-variant-numeric: tabular-nums; font-family: var(--font-inter); }
.st-speed > button[aria-pressed="true"] { background: var(--st-red); color: #fff; box-shadow: 0 4px 14px -4px rgba(229, 38, 46, .7); }
.st-lmark { flex: none; max-width: none; width: 18px; height: 18px; border-radius: 5px; }
.st-lmarks { flex: none; display: inline-flex; }
.st-lmarks { gap: 2px; }
.st-lmarks img { flex: none; max-width: none; width: 18px; height: 18px; border-radius: 5px; }

.st-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 12px;
  border-radius: 11px;
  border: 1px solid var(--st-line);
  background: rgba(255, 255, 255, .045);
  color: #E4E7EC;
  font: 700 12.5px/1 var(--font-manrope);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), opacity var(--dur-fast);
}
.st-btn:hover { background: rgba(255, 255, 255, .09); border-color: var(--st-line-2); color: #fff; }
.st-btn:focus-visible, .st-seg > button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.st-btn .icon { flex: none; }
.st-icon { width: 38px; padding: 0; }
.st-btn.is-danger:hover { color: #FF8A8E; border-color: rgba(229, 38, 46, .45); background: rgba(229, 38, 46, .1); }
.st-btn.is-on { color: #FCD34D; border-color: rgba(245, 158, 11, .5); background: rgba(245, 158, 11, .12); }
.st-scen .icon { color: var(--st-muted); }
.st-scen:hover .icon { color: #fff; }
.st-scen.is-current { border-color: rgba(229, 38, 46, .55); background: rgba(229, 38, 46, .13); color: #fff; }
.st-scen.is-current .icon { color: #FF8A8E; }
.st-scen.is-busy { opacity: .55; pointer-events: none; }

.st-toggle { padding: 0 10px 0 11px; }
.st-toggle .icon { color: var(--st-muted); }
.st-knob {
  position: relative; flex: none;
  width: 28px; height: 16px; border-radius: 999px; margin-left: 2px;
  background: rgba(255, 255, 255, .16);
  transition: background var(--dur-fast);
}
.st-knob::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  transition: transform var(--dur-base) var(--ease-spring);
}
.st-toggle[aria-pressed="true"] { border-color: rgba(34, 197, 94, .4); background: rgba(34, 197, 94, .08); }
.st-toggle[aria-pressed="true"] .icon { color: #86EFAC; }
.st-toggle[aria-pressed="true"] .st-knob { background: #22C55E; }
.st-toggle[aria-pressed="true"] .st-knob::after { transform: translateX(12px); }

.st-ride {
  display: inline-flex; align-items: center; gap: 7px;
  flex: none; width: 300px; height: 38px; padding: 0 12px;
  border-radius: 11px;
  border: 1px solid rgba(47, 128, 237, .35); background: rgba(47, 128, 237, .1); color: #BBD5FB;
  font: 600 12.5px/1 var(--font-manrope);
  overflow: hidden;
}
.st-ride.is-idle { border-color: var(--st-line); background: rgba(255, 255, 255, .025); color: var(--st-subtle); }
.st-ride b { color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }
.st-ride span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.st-ride .icon { flex: none; }
.st-ride.t-warning { border-color: rgba(245, 158, 11, .4); background: rgba(245, 158, 11, .1); color: #FCD34D; }
.st-ride.t-brand { border-color: rgba(229, 38, 46, .45); background: rgba(229, 38, 46, .12); color: #FFB3B6; }
.st-ride.t-success { border-color: rgba(34, 197, 94, .38); background: rgba(34, 197, 94, .09); color: #86EFAC; }
.st-ride.t-danger { border-color: rgba(239, 68, 68, .4); background: rgba(239, 68, 68, .1); color: #FCA5A5; }

.st-conn { display: grid; place-items: center; width: 22px; height: 38px; }
.st-conn i { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 3px rgba(245, 158, 11, .2); }
.st-conn.is-open i { background: #22C55E; box-shadow: 0 0 0 3px rgba(34, 197, 94, .2); animation: pulse-ring 2s var(--ease-out) infinite; color: #22C55E; }

.st-handle {
  position: fixed; z-index: 21; right: 18px; bottom: 18px;
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 12px;
  border: 1px solid var(--st-line-2);
  background: rgba(17, 20, 26, .85); color: #E4E7EC;
  backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base);
  cursor: pointer;
}
.st.is-bar-hidden .st-handle { opacity: .4; pointer-events: auto; }
.st.is-bar-hidden .st-handle:hover { opacity: 1; }

/* ── Story moments (lower third) ──────────────────────────────────── */
.st-moment {
  position: fixed; z-index: 19;
  left: 50%; bottom: calc(var(--dock-h) + var(--dock-gap) * 2 + 10px);
  display: flex; align-items: center; gap: 12px;
  max-width: min(760px, calc(100vw - 48px));
  padding: 9px 20px 9px 9px;
  border-radius: 999px;
  background: rgba(17, 20, 26, .92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--st-line-2);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
  font: 600 14.5px/1.35 var(--font-manrope); color: #DDE1E7;
  opacity: 0; transform: translate(-50%, 14px) scale(.98);
  transition: opacity .35s var(--ease-out), transform .45s var(--ease-spring);
  pointer-events: none;
}
.st-moment.is-on { opacity: 1; transform: translate(-50%, 0); }
.st-moment b { color: #fff; font-weight: 800; }
.st.is-bar-hidden .st-moment { bottom: 26px; }
.st-moment-icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--st-red); color: #fff; }
.st-moment.t-accent .st-moment-icon { background: linear-gradient(135deg, var(--st-violet), #00B8AA); }
.st-moment.t-good .st-moment-icon { background: #16A34A; }

/* ── Help ─────────────────────────────────────────────────────────── */
.st-help {
  position: fixed; z-index: 30;
  /* centred with margins: the rise-in animation owns transform */
  left: 0; right: 0; margin-inline: auto; bottom: calc(var(--dock-h) + var(--dock-gap) * 2 + 8px);
  width: min(420px, calc(100vw - 32px));
  padding: 16px 18px 14px;
  border-radius: 18px;
  background: rgba(22, 25, 32, .97);
  border: 1px solid var(--st-line-2);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  animation: rise-in .25s var(--ease-out) both;
}
.st-help[hidden] { display: none; }
.st-help-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.st-help-head h3 { font-size: 15px; }
.st-help-head .st-btn { width: 30px; height: 30px; }
.st-help ul { list-style: none; margin: 0; padding: 0; }
.st-help li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--st-line); font-size: 13px; font-weight: 600; color: #DDE1E7; }
.st-help li span:last-child { display: inline-flex; gap: 4px; }
.st-help p { margin-top: 10px; font-size: 12px; line-height: 1.45; color: var(--st-muted); }

/* Toasts sit bottom-right, above the dock */
.st .toast-stack { bottom: calc(var(--dock-h) + var(--dock-gap) * 2 + 8px); right: 18px; }
.st.is-bar-hidden .toast-stack { bottom: 18px; }

/* Dock breakpoints (the dock keeps a constant width at any one window size):
   ≥ 1840 captions + ride slot · 1640–1839 compact + ride slot · 1341–1639 compact, no slot ·
   ≤ 1340 icon-only scenarios · ≤ 1100 icon-only layouts */
@media (max-width: 1839px) {
  .st-cap { display: none; }
  .st-bar { gap: 5px; padding: 0 7px; }
  .st-ride { width: 250px; }
}
@media (max-width: 1639px) {
  .st { --st-edge: 10px; --dock-h: 50px; --dock-gap: 10px; }
  .st-btn { height: 36px; padding: 0 10px; }
  .st-icon { width: 36px; padding: 0; }
  .st-seg > button { height: 30px; padding: 0 9px; }
  .st-speed > button { min-width: 34px; padding: 0 6px; }
  .st-ride { display: none; }
}
@media (max-width: 1340px) {
  .st-scen span, .st-toggle span { display: none; }
  .st-scen { width: 36px; padding: 0; }
  .st-seg > button { padding: 0 8px; }
}
@media (max-width: 1100px) {
  .st-lmark + span, .st-lmarks + span { display: none; }
}

/* ── Visitor session (PUBLIC-SPEC §7) ─────────────────────────────── */
.st-bar [hidden], .st-dock [hidden] { display: none !important; }
.st-book { padding: 0 14px 0 12px; border-color: rgba(229, 38, 46, .45); background: rgba(229, 38, 46, .14); color: #fff; }
.st-book .icon { color: #FF8A8E; }
.st-book:hover { background: rgba(229, 38, 46, .24); border-color: rgba(229, 38, 46, .7); }
.st-book:disabled { opacity: .45; cursor: default; background: rgba(255, 255, 255, .04); border-color: var(--st-line); }
.st-book:disabled .icon { color: var(--st-muted); }
.st-qr { padding: 0 13px 0 11px; border-color: rgba(123, 92, 255, .45); background: rgba(123, 92, 255, .14); color: #fff; }
.st-qr .icon { color: #C4B5FF; }
.st-qr:hover, .st-qr.is-open { background: rgba(123, 92, 255, .26); border-color: rgba(123, 92, 255, .75); }

/* QR popover above the dock */
.st-qrpop {
  position: fixed; z-index: 30;
  left: 50%; bottom: calc(var(--dock-h) + var(--dock-gap) * 2 + 8px);
  width: min(400px, calc(100vw - 32px));
  padding: 16px 18px 16px;
  border-radius: 20px;
  background: rgba(22, 25, 32, .97);
  border: 1px solid var(--st-line-2);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  animation: rise-in .25s var(--ease-out) both;
}
.st-qrpop[hidden] { display: none; }
.st-qrpop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.st-qrpop-head h3 { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.st-qrpop-head h3 .icon { color: #C4B5FF; }
.st-qrpop-head .st-btn { width: 30px; height: 30px; }
.st-qrpop-body { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 16px; align-items: center; }
.st-qrpop-code { padding: 8px; border-radius: 14px; background: #fff; line-height: 0; }
.st-qrpop-code svg { width: 100%; height: auto; display: block; }
.st-qrpop-steps { list-style: none; margin: 0; padding: 0; counter-reset: st-step; display: grid; gap: 10px; }
.st-qrpop-steps li { counter-increment: st-step; position: relative; padding-left: 32px; font-size: 13.5px; line-height: 1.4; color: #C9CED7; }
.st-qrpop-steps li::before {
  content: counter(st-step); position: absolute; left: 0; top: -1px;
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(123, 92, 255, .22); color: #DCD3FF; font: 800 12px/1 var(--font-inter);
}
.st-qrpop-steps b { color: #fff; font-weight: 750; }
.st-qrpop-note { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--st-line); font-size: 12.5px; line-height: 1.5; color: var(--st-muted); }
.st-qrpop-copy {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 2px; padding: 0;
  border: 0; background: none; color: #C4B5FF; font: 700 12.5px/1.5 var(--font-manrope); cursor: pointer;
}
.st-qrpop-copy:hover { color: #fff; text-decoration: underline; }

/* A tile without a car (every demo car is taken) */
.st-empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 24px; text-align: center;
  color: var(--st-muted); font-size: 13.5px; line-height: 1.5;
}
.st-empty b { color: #fff; font: 700 16px/1.3 var(--font-manrope); max-width: 260px; }
.st-empty > span:not(.st-empty-icon) { max-width: 280px; }
.st-empty-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: rgba(255, 255, 255, .06); color: #E4E7EC; }
.st-empty .st-btn { margin-top: 6px; }
.st-tile.is-empty .st-live, .st-tile.is-empty [data-act="open"] { display: none; }

/* Notice instead of the tiles (no session in the public demo, phone-sized screens) */
.st.is-notice .st-dock, .st.is-notice .st-handle { display: none; }
.st.is-notice .st-area { bottom: var(--st-edge); }
.st-notice {
  position: absolute; inset: 0; margin: auto;
  width: min(460px, 100%); height: fit-content;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 32px 26px; border-radius: 24px; text-align: center;
  background: var(--st-tile); border: 1px solid var(--st-line-2);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
.st-notice h1 { font: 600 21px/1.25 var(--font-unbounded); letter-spacing: -0.02em; margin: 4px 0 0; }
.st-notice p { color: var(--st-muted); font-size: 14.5px; line-height: 1.55; margin: 0; }
.st-notice-icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 20px; background: rgba(229, 38, 46, .14); color: #FF8A8E; }
.st-notice-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.st-notice-actions .btn { min-height: 46px; }
/* the visitor's dock is shorter: keep the words on its two actions down to small laptops */
@media (max-width: 1340px) {
  .st-scen.st-book { width: auto; padding: 0 12px 0 10px; }
  .st-scen.st-book span { display: inline; }
}
@media (max-width: 1100px) { .st-qr span { display: none; } .st-qr { width: 36px; padding: 0; } }