/* **The recreation of the app's window**, on the front page and on Features:
   the same markup on both, driven by `site.js` (`startDemos`). Moved out of
   `site.css`, which only Features loads, when the front page swapped its
   screenshot for this. */
@keyframes caret-blink{50%{background:transparent}}
[data-tbh]{box-sizing:border-box}

/* ---- The recreation wears the app's chrome ----
   Its surfaces are the app's tokens rather than hand-picked colours, so a theme
   change on the site reaches it the way it reaches the app: the bar and the
   status line are the chrome's glass (`.toolbar`, `.statusbar`), the rail is
   `.activity-bar`, the outline is `.side-panel`. The rail's buttons are
   `[data-tbh]` like the toolbar's, and so answer the pointer by the same rules. */
.sim-chrome {
  position: relative;
  z-index: 1;
  background: var(--glass-body);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-lip);
  border-bottom: 1px solid color-mix(in srgb, var(--text) 9%, transparent);
}
.sim-status { background: var(--glass-body); }
.sim-rail {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-top: 8px;
  background: var(--glass-body-chrome);
  border-inline-end: 1px solid color-mix(in srgb, var(--text) 9%, transparent);
}
.sim-act {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-control);
  color: var(--text-muted);
  cursor: default;
  /* Named for the stylesheet's own sake: at run time `[data-tbh]`'s list wins
     with `!important`, and it carries the colour too. */
  transition: color var(--dur-fast) var(--ease-out);
}
.sim-act svg { width: 19px; height: 19px; transition: transform var(--dur-base) var(--ease-spring); }
.sim-act.on { color: var(--accent); }
.sim-act.on svg { transform: scale(1.08); }
/* The marker beside the chosen panel, as `.activity-indicator` draws it. */
.sim-rail-mark {
  position: absolute;
  inset-inline-start: 0;
  top: 8px;
  width: 2.5px;
  height: 38px;
  padding: 7px 0;
  box-sizing: border-box;
  border-radius: 2px;
  background: var(--accent);
  background-clip: content-box;
}
.sim-side {
  background: var(--glass-body-reading);
  border-inline-end: 1px solid color-mix(in srgb, var(--text) 9%, transparent);
}