/* HSOrbit demo kit — shared stage, window chrome, cursor and small parts.
   Built to the Stageshow rules (Benji Taylor, github.com/benjitaylor/skills, MIT).
   The ground follows the page theme; the products inside stay light documents in both themes. */
.hd { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; width: 100%; }
.hd-host { position: relative; width: 100%; }
.hd[data-fit="contain"] { height: 100%; }
.hd[data-fit="contain"] .hd-host { flex: 1; min-height: 0; height: 100%; }

.hd-stage {
  position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden;
  border-radius: 20px; background: var(--well);
  --s-surface: #ffffff; --s-page: #f7f6f2; --s-chrome: #f7f6f2; --s-line: #e6e4dd; --s-grid: #eeece6;
  --s-ink: #353532; --s-muted: #6b6a64; --s-bar: #e3e1d9; --s-bar2: #edebe5; --s-hover: #f1efe9;
  --s-accent: #e07a3f; --s-accent-ink: #a9501f; --s-accent-soft: #f7e3d5; --s-ok: #2f7a4f; --s-ok-soft: #e1f0e6;
  --s-shadow-hero: 0 0 0 1px rgba(0,0,0,.06), 0 30px 60px -12px rgba(50,40,30,.25), 0 18px 36px -18px rgba(0,0,0,.3);
  --s-shadow-sat: 0 0 0 1px rgba(0,0,0,.05), 0 14px 32px -8px rgba(50,40,30,.24), 0 4px 10px -4px rgba(0,0,0,.1);
  --s-shadow-float: 0 0 0 1px rgba(0,0,0,.07), 0 12px 28px -6px rgba(40,30,20,.22), 0 4px 10px -4px rgba(0,0,0,.12);
  font-family: var(--font-ui); color: var(--s-ink); line-height: normal; word-break: keep-all; letter-spacing: 0;
}
.hd-stage *, .hd-stage *::before, .hd-stage *::after { box-sizing: border-box; }

/* windows */
.hd-win { position: absolute; background: var(--s-surface); border-radius: 12px; overflow: hidden; box-shadow: var(--s-shadow-hero); display: flex; flex-direction: column; }
.hd-bar { height: 38px; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 14.5px; background: var(--s-chrome); border-bottom: 1px solid var(--s-line); }
.hd-dot { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.12); flex: none; }
.hd-dot:nth-child(1) { background: #ff5f57; } .hd-dot:nth-child(2) { background: #febc2e; } .hd-dot:nth-child(3) { background: #28c840; }
.hd-url { margin: 0 auto; transform: translateX(-20px); padding: 4px 12px; border-radius: 999px; background: #ecebe6; color: var(--s-muted); font-size: 12px; line-height: 1.3; white-space: nowrap; }
.hd-stage[data-layout="compact"] .hd-url { transform: translateX(-8px); }

/* Windows 11 title bar: the app's name on the left, caption buttons on the right */
.hd-winbar { height: 34px; flex: none; display: flex; align-items: center; gap: 8px; padding-left: 12px; background: var(--s-page); border-bottom: 1px solid var(--s-line); font-size: 12px; line-height: 1.3; white-space: nowrap; }
.hd-winbar svg.mark { width: 14px; height: 14px; flex: none; }
.hd-caps { margin-left: auto; display: flex; height: 100%; }
.hd-caps span { width: 46px; height: 100%; display: grid; place-items: center; }
.hd-caps svg { width: 10px; height: 10px; }

/* placeholder bars */
.hd-fill { display: block; height: 7px; border-radius: 4px; background: var(--s-bar2); flex: none; }
.hd-fill.dark { background: var(--s-bar); }

/* small parts */
.hd-chip { font-size: 12px; font-weight: 600; line-height: 1; padding: 5px 9px; border-radius: 999px; background: var(--s-ok-soft); color: var(--s-ok); white-space: nowrap; }
.hd-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border-radius: 999px; background: var(--s-ink); color: #f4f3ee; font-size: 12.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; flex: none; }
.hd-btn.ghost { background: var(--s-surface); color: var(--s-ink); box-shadow: inset 0 0 0 1px var(--s-line); }
.hd-btn svg { width: 14px; height: 14px; flex: none; }
.hd-btn[data-press] { filter: brightness(1.25); }
.hd-sat { position: absolute; background: var(--s-surface); border-radius: 12px; box-shadow: var(--s-shadow-sat); }
.hd-toast { position: absolute; padding: 10px 14px; border-radius: 10px; background: var(--s-ink); color: #f4f3ee; font-size: 12.5px; line-height: 1.3; white-space: nowrap; box-shadow: var(--s-shadow-float); display: flex; align-items: center; gap: 8px; }
.hd-toast svg { width: 14px; height: 14px; color: #8ccf98; }
.hd-stage svg.ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hd-stage i { font-style: normal; }

.hd-cursor { position: absolute; left: 0; top: 0; width: 24px; height: 24px; pointer-events: none; z-index: 30; transform-origin: 7.5px 5.25px; }

/* replay under an autoplaying demo */
.hd-controls { display: flex; justify-content: flex-end; }
.hd-replay {
  font: 600 14px/1 var(--font-ui); color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; min-height: 40px; cursor: pointer;
}
.hd-replay:hover { border-color: var(--ink-muted); }