/* HearthStream (renderer/moonlight/hearthstream.js) — Hearth's own Moonlight screen.
 *
 * Direction: "Moonlit Hearth" — the Hearth cabin at night. The same hand-drawn world as the
 * lock scenes and the Games den, after dark: deep indigo surfaces, moonlight blue for what is
 * live (a device that answers, an app that is running), ember amber for what you can press.
 * Titles in the Iowan serif the storage ledger uses; everything else in the app's own face.
 * The art (renderer/moonlight/art/) is generated for this screen and archived in the icons
 * archive under "hearthstream".
 */

.hstream {
  --hs-night:    #0b0f20;
  --hs-night-2:  #11162d;
  --hs-panel:    #161c38;
  --hs-panel-2:  #1c2346;
  --hs-line:     rgba(156, 196, 255, .14);
  --hs-line-hi:  rgba(156, 196, 255, .34);
  --hs-moon:     #9cc4ff;
  --hs-moon-hi:  #d4e5ff;
  --hs-ember:    #f2a541;
  --hs-ember-hi: #ffc77a;
  --hs-ink:      #e9eefb;
  --hs-ink-dim:  #a9b3d1;
  --hs-ink-mute: #76809f;
  --hs-warn:     #f0b35c;
  --hs-danger:   #e8806f;
  --hs-good:     #8fd6a8;
  --hs-serif:    'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --hs-ease:     cubic-bezier(.16, 1, .3, 1);
  --hs-radius:   18px;

  position: relative;
  z-index: 1;
  height: calc(100vh - 60px - 41px - var(--np-h, 0px));   /* the slot .layout uses: topbar + view tabs (+ the Music bar) */
  overflow: hidden;
  display: flex;
  color: var(--hs-ink);
  background:
    radial-gradient(900px 520px at 85% 8%, rgba(156, 196, 255, .08), transparent 60%),
    linear-gradient(180deg, var(--hs-night-2), var(--hs-night) 46%, #080b17);
}
.hstream.hidden { display: none; }
.hstream button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; font: inherit; }
.hstream .hidden { display: none !important; }

/* Ctrl + scroll sizes the screen (hearthstream.js setZoom): the scroller keeps the window,
   what it holds is drawn at --hs-zoom. */
.hstream.hs-zoomed .hs-scroll > * { zoom: var(--hs-zoom, 1); }
.hs-scroll {
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-top: 16px;
}

/* ── hero ──────────────────────────────────────────────────────────────────────────────── */
.hs-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(220px, 34vh, 320px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: end;
  gap: clamp(14px, 2vh, 22px);
  padding: clamp(22px, 4vh, 40px) clamp(20px, 4vw, 48px) clamp(16px, 2.6vh, 26px);
  overflow: hidden;
}
.hs-hero-art { position: absolute; inset: 0; z-index: -1; }
.hs-hero-art img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 12% 78%;
  -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 52%, transparent 100%);
  animation: hs-drift 38s ease-in-out infinite alternate;
}
.hs-hero-art::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(11, 15, 32, 0) 20%, rgba(11, 15, 32, .72) 58%, rgba(11, 15, 32, .9) 100%),
    linear-gradient(180deg, rgba(11, 15, 32, .1), rgba(11, 15, 32, .55) 70%, var(--hs-night) 100%);
}
/* A device page and the settings: the hero folds into a band so the content starts high. */
.hs-hero { transition: min-height .5s var(--hs-ease), padding .5s var(--hs-ease); }
.hs-hero.compact { min-height: 0; padding-top: 22px; padding-bottom: 18px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.hs-hero.compact .hs-hero-inner { justify-self: start; width: auto; gap: 4px; }
.hs-hero.compact .hs-lede, .hs-hero.compact .hs-client { display: none; }
.hs-hero.compact .hs-mark { width: 48px; height: 48px; }
.hs-hero.compact .hs-title { font-size: 30px; }
.hs-hero.compact .hs-hero-art img { object-position: 12% 70%; }
.hs-hero.compact .hs-hero-art::after { background: linear-gradient(90deg, rgba(11, 15, 32, .55), rgba(11, 15, 32, .88) 45%, var(--hs-night) 100%), linear-gradient(180deg, transparent 40%, var(--hs-night) 100%); }
/* A device with hero art of its own: the band grows so the picture is actually seen, and the
 * veil thins to a readable strip behind the words. */
.hs-hero.compact.has-art { min-height: clamp(180px, 30vh, 300px); }
.hs-hero.compact.has-art .hs-hero-art img { object-position: center 40%; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 60%, transparent 100%); }
.hs-hero.compact.has-art .hs-hero-art::after { background: linear-gradient(90deg, rgba(11, 15, 32, .72), rgba(11, 15, 32, .35) 40%, rgba(11, 15, 32, .55) 100%), linear-gradient(180deg, rgba(11, 15, 32, .1) 30%, var(--hs-night) 100%); }
@keyframes hs-drift { from { transform: scale(1.04) translateX(0); } to { transform: scale(1.08) translateX(-1.2%); } }

.hs-hero-inner {
  justify-self: end;
  width: min(620px, 100%);
  display: grid;
  gap: 12px;
  animation: hs-rise .7s var(--hs-ease) both;
}
.hs-brand { display: flex; align-items: center; gap: 16px; }
.hs-mark {
  width: 72px; height: 72px;
  filter: drop-shadow(0 0 18px rgba(156, 196, 255, .35)) drop-shadow(0 6px 14px rgba(0, 0, 0, .5));
  animation: hs-flicker 5.5s ease-in-out infinite;
}
@keyframes hs-flicker { 0%, 100% { filter: drop-shadow(0 0 16px rgba(156, 196, 255, .32)) drop-shadow(0 6px 14px rgba(0, 0, 0, .5)); }
  50% { filter: drop-shadow(0 0 26px rgba(156, 196, 255, .5)) drop-shadow(0 6px 14px rgba(0, 0, 0, .5)); } }
.hs-kicker {
  margin: 0;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--hs-moon);
}
.hs-title {
  margin: 0;
  font-family: var(--hs-serif);
  font-size: clamp(36px, 4.4vw, 54px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--hs-moon-hi);
  text-shadow: 0 2px 22px rgba(156, 196, 255, .25);
}
.hs-lede {
  margin: 0;
  max-width: 52ch;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--hs-ink-dim);
  text-wrap: pretty;
}
.hs-client { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; min-height: 28px; }
.hs-client-line { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--hs-ink-dim); }
.hs-client-line img { width: 20px; height: 20px; }

.hs-rooms {
  justify-self: end;
  display: inline-flex;
  gap: 6px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(12, 16, 34, .66);
  border: 1px solid var(--hs-line);
  backdrop-filter: blur(10px);
  animation: hs-rise .8s .08s var(--hs-ease) both;
}
.hs-room-btn {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px;
  padding: 6px 18px 6px 10px;
  border: 0; border-radius: 999px;
  background: transparent;
  color: var(--hs-ink-dim);
  font-size: 14.5px; font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
  transition: background .25s var(--hs-ease), color .25s var(--hs-ease);
}
.hs-room-btn img { width: 28px; height: 28px; }
.hs-room-btn:hover { color: var(--hs-ink); background: rgba(156, 196, 255, .08); }
.hs-room-btn.active { color: #1a1206; background: linear-gradient(180deg, var(--hs-ember-hi), var(--hs-ember)); box-shadow: 0 6px 20px rgba(242, 165, 65, .28); }
.hs-room-btn:disabled { opacity: .45; cursor: default; }
.hs-room-btn:focus-visible { outline: 2px solid var(--hs-moon); outline-offset: 2px; }

@keyframes hs-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ── rooms ─────────────────────────────────────────────────────────────────────────────── */
.hs-room { padding: 8px clamp(20px, 4vw, 48px) 64px; display: grid; gap: 22px; align-content: start; }
.hs-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.hs-section-head > div:first-child { min-width: 0; }
.hs-section-head-sm { margin-top: 18px; }
.hs-head-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hs-h2 { margin: 0; font-family: var(--hs-serif); font-size: 28px; font-weight: 700; line-height: 1.15; color: var(--hs-ink); text-wrap: balance; }
.hs-h3 { margin: 0; font-family: var(--hs-serif); font-size: 21px; font-weight: 700; line-height: 1.2; color: var(--hs-ink); text-wrap: balance; }
.hs-sub { margin: 6px 0 0; color: var(--hs-ink-dim); font-size: 14px; text-wrap: pretty; }
.hs-p { margin: 0; color: var(--hs-ink-dim); font-size: 14.5px; line-height: 1.55; max-width: 62ch; text-wrap: pretty; }
.hs-dim { color: var(--hs-ink-mute); font-size: 13.5px; overflow-wrap: anywhere; }
.hs-note { margin: 0; padding: 12px 16px; border-radius: 12px; background: rgba(156, 196, 255, .06); border: 1px solid var(--hs-line); color: var(--hs-ink-dim); font-size: 14px; }
.hs-note:empty { display: none; }
.hs-note.warn, .hs-note[data-kind="warn"] { border-color: rgba(240, 179, 92, .35); background: rgba(240, 179, 92, .08); color: #f6d3a0; }
.hs-note[data-kind="ok"] { border-color: rgba(143, 214, 168, .35); background: rgba(143, 214, 168, .08); color: #c3ecd1; }

/* ── buttons ───────────────────────────────────────────────────────────────────────────── */
.hs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px;
  padding: 8px 18px;
  border-radius: 12px;
  border: 1px solid var(--hs-line-hi);
  background: rgba(156, 196, 255, .07);
  color: var(--hs-ink);
  font-size: 14px; font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .2s var(--hs-ease), background .2s, border-color .2s, box-shadow .2s;
}
.hs-btn:hover { background: rgba(156, 196, 255, .14); border-color: rgba(156, 196, 255, .5); }
.hs-btn:active { transform: translateY(1px) scale(.99); }
.hs-btn:focus-visible { outline: 2px solid var(--hs-moon); outline-offset: 2px; }
.hs-btn:disabled { opacity: .55; cursor: progress; }
.hs-btn-ico { width: 22px; height: 22px; margin-left: -4px; }
.hs-btn.primary { color: #1c1306; border-color: transparent; background: linear-gradient(180deg, var(--hs-ember-hi), var(--hs-ember)); box-shadow: 0 8px 22px rgba(242, 165, 65, .25), inset 0 1px 0 rgba(255, 255, 255, .35); }
.hs-btn.primary:hover { background: linear-gradient(180deg, #ffd496, #f7b04f); box-shadow: 0 10px 28px rgba(242, 165, 65, .34), inset 0 1px 0 rgba(255, 255, 255, .4); }
.hs-btn.quiet { background: transparent; border-color: transparent; color: var(--hs-ink-dim); }
.hs-btn.quiet:hover { color: var(--hs-ink); background: rgba(156, 196, 255, .08); border-color: var(--hs-line); }
.hs-btn.danger-soft { border-color: rgba(232, 128, 111, .45); color: #ffc1b6; background: rgba(232, 128, 111, .1); }
.hs-btn.danger-soft:hover { background: rgba(232, 128, 111, .18); }
.hs-btn.small { min-height: 36px; padding: 6px 14px; font-size: 13.5px; }
.hs-btn.back { justify-self: start; padding-left: 10px; gap: 4px; }
.hs-link { border: 0; background: none; padding: 0 2px; color: var(--hs-ember-hi); font-weight: 650; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.hs-link:focus-visible { outline: 2px solid var(--hs-moon); outline-offset: 2px; border-radius: 4px; }

/* ── the device shelf ─────────────────────────────────────────────────────────────────── */
/* Columns come from hearthstream.js fitGrid(): a column count that suits the width, and a finer
 * track grid so a short last row widens to fill instead of leaving empty cells. Picture heights
 * follow the column width (--colw), so a widened tile is as tall as the rest. */
.hs-dev-grid, .hs-app-grid {
  --min: 280px;
  display: grid;
  grid-template-columns: repeat(var(--tracks, 3), minmax(0, 1fr));
  gap: 22px;
}
.hs-app-grid { --min: 190px; gap: 20px; }

.hs-dev {
  position: relative;
  min-width: 0;
  border-radius: var(--hs-radius);
  background: linear-gradient(180deg, var(--hs-panel-2), var(--hs-panel));
  border: 1px solid var(--hs-line);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .35), 0 18px 40px rgba(0, 0, 0, .35);
  overflow: hidden;
  transition: transform .35s var(--hs-ease), box-shadow .35s var(--hs-ease), border-color .35s;
}
.hs-dev:hover, .hs-dev:focus-within { transform: translateY(-4px); border-color: rgba(242, 165, 65, .45); box-shadow: 0 4px 8px rgba(0, 0, 0, .4), 0 26px 60px rgba(0, 0, 0, .5), 0 0 0 1px rgba(242, 165, 65, .18), 0 0 40px rgba(242, 165, 65, .12); }
.hs-dev[data-state="streaming"] { border-color: rgba(156, 196, 255, .45); box-shadow: 0 2px 4px rgba(0, 0, 0, .35), 0 18px 40px rgba(0, 0, 0, .35), 0 0 36px rgba(156, 196, 255, .14); }
.hs-dev-open {
  display: block; width: 100%;
  padding: 0; border: 0; background: none; color: inherit; text-align: left;
  cursor: pointer;
}
.hs-dev-open:focus-visible { outline: none; }
.hs-dev:has(.hs-dev-open:focus-visible) { outline: 2px solid var(--hs-moon); outline-offset: 3px; }
/* A tile widened to fill a short row keeps a sane height: a lone device becomes a wide banner
 * (the picture crops to it) instead of a picture as tall as the window. */
.hs-dev-pic { position: relative; height: min(calc(var(--colw, 320px) * .62), 320px, 36vh); overflow: hidden; background: var(--hs-night-2); }
.hs-dev-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--hs-ease), filter .4s; }
.hs-dev:hover .hs-dev-pic img { transform: scale(1.045); }
.hs-dev[data-state="offline"] .hs-dev-pic img { filter: saturate(.55) brightness(.72); }
.hs-dev-pic::after { content: ''; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(180deg, transparent, rgba(16, 20, 42, .85)); pointer-events: none; }
.hs-dev-body { padding: 14px 18px 18px; display: grid; gap: 6px; }
.hs-dev-name { margin: 0; font-family: var(--hs-serif); font-size: 22px; font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-state { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--hs-ink-dim); font-size: 14px; min-width: 0; }
.hs-state img { width: 22px; height: 22px; flex: none; }
.hs-state span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-dev[data-state="streaming"] .hs-state { color: var(--hs-moon-hi); }
.hs-dev[data-state="online"] .hs-state { color: #f3dcb2; }
.hs-state-lg { font-size: 16px; }
.hs-state-lg img { width: 26px; height: 26px; }

.hs-crest {
  position: absolute; left: 12px; bottom: 12px; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 6px;
  border-radius: 999px;
  background: rgba(10, 14, 30, .72);
  border: 1px solid rgba(156, 196, 255, .3);
  color: var(--hs-moon-hi);
  font-size: 12px; font-weight: 700;
  backdrop-filter: blur(6px);
  white-space: nowrap;
}
.hs-crest img { width: 22px; height: 22px; }

.hs-dev-edit {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(10, 14, 30, .62);
  color: var(--hs-ink);
  backdrop-filter: blur(8px);
  cursor: pointer;
  opacity: 0; transform: translateY(-4px);
  transition: opacity .25s var(--hs-ease), transform .25s var(--hs-ease), background .2s;
}
.hs-dev:hover .hs-dev-edit, .hs-dev:focus-within .hs-dev-edit, .hs-app:hover .hs-dev-edit, .hs-app:focus-within .hs-dev-edit { opacity: 1; transform: none; }
.hs-dev-edit:hover { background: rgba(242, 165, 65, .9); color: #1c1306; }
.hs-dev-edit:focus-visible { opacity: 1; transform: none; outline: 2px solid var(--hs-moon); outline-offset: 2px; }
@media (hover: none) { .hs-dev-edit { opacity: 1; transform: none; } }

.hs-skel { min-height: calc(min(calc(var(--colw, 320px) * .62), 320px, 36vh) + 92px); background: linear-gradient(100deg, var(--hs-panel) 30%, var(--hs-panel-2) 50%, var(--hs-panel) 70%); background-size: 300% 100%; animation: hs-shimmer 1.6s linear infinite; }
@keyframes hs-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* the "pair with Hearth's host" invitation — a band, not a card */
.hs-callout {
  display: flex; align-items: center; gap: 22px;
  padding: 18px 22px;
  border-radius: var(--hs-radius);
  background: linear-gradient(100deg, rgba(242, 165, 65, .14), rgba(156, 196, 255, .05) 60%, transparent);
  border-left: 3px solid var(--hs-ember);
}
.hs-callout-art { width: 120px; height: 120px; flex: none; object-fit: contain; }
.hs-callout-words { display: grid; gap: 8px; justify-items: start; min-width: 0; }

.hs-empty { display: flex; align-items: center; gap: 28px; padding: 10px 0; flex-wrap: wrap; }
.hs-empty img { width: 240px; height: 240px; object-fit: contain; animation: hs-float 7s ease-in-out infinite; }
.hs-empty > div { display: grid; gap: 10px; justify-items: start; flex: 1 1 280px; }
.hs-empty-acts { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Jump back in: the last apps streamed, one band above the shelf ───────────────────── */
.hs-jump {
  display: grid; gap: 12px;
  margin-bottom: 26px;
  padding: 18px 20px 14px;
  border-radius: var(--hs-radius);
  background: linear-gradient(100deg, rgba(242, 165, 65, .12), rgba(156, 196, 255, .05) 55%, rgba(156, 196, 255, .02));
  border-left: 3px solid var(--hs-ember);
  min-width: 0;
}
.hs-jump { container: hs-jump / inline-size; }
.hs-jump-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 10px 20px; }
.hs-jump-head > div:first-child { min-width: 0; }
.hs-jump-head .hs-sub { max-width: 68ch; }
.hs-jump-clear { margin-top: 4px; font-size: 13.5px; white-space: nowrap; }
/* The body: the last game (.hs-last) leads and takes the room the strip leaves, so the band is
   never one small card and an empty slab. Alone, either half fills the row. */
.hs-jump-body { display: flex; align-items: stretch; gap: 16px; min-width: 0; }
.hs-jump-body > .hs-last { flex: 1 1 360px; min-width: 0; }
.hs-jump-body.has-last > .hs-jump-strip { flex: 0 1 auto; min-width: 0; margin: -4px -20px -6px 0; padding: 4px 20px 6px 2px; scroll-padding: 0 20px 0 2px; }
/* The strip scrolls sideways with no scrollbar chrome, under the band's own padding. */
.hs-jump-strip {
  flex: 1 1 auto;
  list-style: none; margin: 0 -20px; padding: 4px 20px 6px;
  display: flex; gap: 12px;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding: 0 20px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.hs-jump-strip::-webkit-scrollbar { display: none; }
.hs-jump-item { flex: none; scroll-snap-align: start; position: relative; }
/* The end button on a running tile: the painted snuffed candle in the corner, one press to end
   (the tile is too narrow for a label beside the Running badge, so its name is the tooltip and the
   badge turns to "Ending…" once pressed). */
.hs-jump-end {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border-radius: 50%; border: 1px solid var(--hs-line-hi);
  background: rgba(9, 12, 26, .78); backdrop-filter: blur(6px); cursor: pointer;
  transition: background .25s, border-color .25s, transform .25s var(--hs-ease);
}
.hs-jump-end img { width: 22px; height: 22px; }
.hs-jump-end:hover { background: rgba(232, 128, 111, .22); border-color: rgba(232, 128, 111, .65); transform: scale(1.08); }
.hs-jump-end:focus-visible { outline: 2px solid var(--hs-moon); outline-offset: 2px; }
.hs-jump-end:disabled { opacity: .4; cursor: default; transform: none; }
.hs-jump-item.ending .hs-jump-btn { opacity: .6; filter: saturate(.5); }
.hs-jump-badge.ending { background: rgba(232, 128, 111, .18); border-color: rgba(232, 128, 111, .6); color: #ffd9cf; }
.hs-jump-item.running .hs-jump-words { padding-right: 34px; }
.hs-jump-btn {
  position: relative;
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center;
  width: 272px; min-height: 112px;
  padding: 8px 14px 8px 8px;
  border-radius: 14px;
  border: 1px solid var(--hs-line);
  background: linear-gradient(180deg, var(--hs-panel-2), var(--hs-panel));
  box-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 12px 28px rgba(0, 0, 0, .28);
  color: inherit; text-align: left; cursor: pointer;
  transition: transform .3s var(--hs-ease), border-color .3s, box-shadow .3s;
}
.hs-jump-btn:hover { transform: translateY(-3px); border-color: rgba(242, 165, 65, .5); box-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 18px 38px rgba(0, 0, 0, .42), 0 0 28px rgba(242, 165, 65, .12); }
.hs-jump-btn:focus-visible { outline: 2px solid var(--hs-moon); outline-offset: 2px; }
.hs-jump-btn:active { transform: translateY(0) scale(.99); }
.hs-jump-pic { width: 72px; height: 96px; border-radius: 9px; overflow: hidden; background: var(--hs-night-2); }
.hs-jump-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--hs-ease); }
.hs-jump-btn:hover .hs-jump-pic img { transform: scale(1.05); }
.hs-jump-words { display: grid; gap: 4px; min-width: 0; justify-items: start; }
.hs-jump-app { font-family: var(--hs-serif); font-size: 16.5px; font-weight: 700; line-height: 1.2; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; }
.hs-jump-dev { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--hs-ink-dim); min-width: 0; max-width: 100%; }
.hs-jump-dev img { width: 18px; height: 18px; flex: none; }
.hs-jump-dev span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-jump-badge {
  padding: 2px 9px; border-radius: 999px;
  background: rgba(156, 196, 255, .16); border: 1px solid rgba(156, 196, 255, .45);
  color: var(--hs-moon-hi); font-size: 11.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.hs-jump-item.running .hs-jump-btn { border-color: rgba(156, 196, 255, .6); box-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 12px 28px rgba(0, 0, 0, .28), 0 0 0 2px rgba(156, 196, 255, .22), 0 0 30px rgba(156, 196, 255, .16); }
.hs-jump-item.running .hs-jump-dev { color: var(--hs-moon-hi); }
.hs-jump-item.away .hs-jump-btn { opacity: .72; }
.hs-jump-item.away .hs-jump-pic img { filter: saturate(.6); }
/* One card per computer: the main tile and, beside it inside the same frame, chips for the same
   computer's other recent apps. The frame moves from the tile to the card. */
.hs-jump-item.grouped {
  display: flex; align-items: stretch; border-radius: 14px;
  border: 1px solid var(--hs-line);
  background: linear-gradient(180deg, var(--hs-panel-2), var(--hs-panel));
  box-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 12px 28px rgba(0, 0, 0, .28);
  transition: border-color .3s, box-shadow .3s;
}
.hs-jump-item.grouped .hs-jump-btn { border-color: transparent; background: transparent; box-shadow: none; }
.hs-jump-item.grouped .hs-jump-btn:hover { transform: none; box-shadow: none; border-color: transparent; }
.hs-jump-item.grouped:hover { border-color: rgba(242, 165, 65, .45); }
.hs-jump-item.grouped.running { border-color: rgba(156, 196, 255, .6); box-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 12px 28px rgba(0, 0, 0, .28), 0 0 0 2px rgba(156, 196, 255, .22), 0 0 30px rgba(156, 196, 255, .16); }
.hs-jump-item.grouped.running .hs-jump-btn { border-color: transparent; box-shadow: none; }
.hs-jump-item.grouped .hs-jump-end { right: auto; left: 230px; }
.hs-jump-more { list-style: none; margin: 10px 0; padding: 0 12px 0 12px; display: flex; gap: 10px; align-items: center; border-left: 1px solid var(--hs-line); }
.hstream .hs-jump-chip {
  display: grid; justify-items: center; gap: 5px; width: 60px; padding: 0; border: 0; background: none;
  color: var(--hs-ink-dim); cursor: pointer; font: 600 11.5px/1.2 system-ui, -apple-system, 'Segoe UI', sans-serif;
  transition: color .2s, transform .25s var(--hs-ease);
}
.hs-jump-chip-pic { width: 54px; height: 72px; border-radius: 8px; overflow: hidden; background: var(--hs-night-2); border: 1px solid var(--hs-line); transition: border-color .2s, box-shadow .25s; }
.hs-jump-chip-pic img { width: 100%; height: 100%; object-fit: cover; }
.hs-jump-chip-name { max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-jump-chip:hover { color: var(--hs-ink); transform: translateY(-2px); }
.hs-jump-chip:hover .hs-jump-chip-pic { border-color: rgba(242, 165, 65, .6); box-shadow: 0 8px 18px rgba(0, 0, 0, .4); }
.hs-jump-chip:focus-visible { outline: none; }
.hs-jump-chip:focus-visible .hs-jump-chip-pic { outline: 2px solid var(--hs-moon); outline-offset: 2px; }
.hs-jump-chip.running .hs-jump-chip-pic { border-color: rgba(156, 196, 255, .7); box-shadow: 0 0 0 2px rgba(156, 196, 255, .25); }
.hs-jump-chip.running { color: var(--hs-moon-hi); }

/* The last game played: one wide press target with its cover as the picture and, blurred, as
   the whole card's backdrop. Ember is what you press; moonlight marks it running on the host. */
.hs-last {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 116px; border-radius: 14px;
  border: 1px solid rgba(242, 165, 65, .28);
  background: linear-gradient(180deg, var(--hs-panel-2), var(--hs-panel));
  box-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 12px 28px rgba(0, 0, 0, .28);
  transition: border-color .3s, box-shadow .35s var(--hs-ease), transform .35s var(--hs-ease);
}
.hs-last-wash { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hs-last-wash img {
  position: absolute; inset: -30px; width: calc(100% + 60px); height: calc(100% + 60px);
  object-fit: cover; filter: blur(24px) saturate(1.3); opacity: .7;
  transform: scale(1.04); transition: opacity .6s var(--hs-ease), transform 1.2s var(--hs-ease);
}
/* The words sit on the card's own panel colour, not on the picture: a scrim from the left. */
.hs-last-wash::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(17, 22, 45, .5), rgba(17, 22, 45, .8) 34%, rgba(17, 22, 45, .62) 62%, rgba(17, 22, 45, .3) 100%);
}
.hs-last-btn {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px;
  width: 100%; height: 100%; min-height: 116px; box-sizing: border-box;
  padding: 10px 18px 10px 10px; border: 0; border-radius: inherit;
  background: none; color: inherit; text-align: left; cursor: pointer;
}
.hs-last-btn:focus-visible { outline: 2px solid var(--hs-moon); outline-offset: -2px; }
.hs-last-pic {
  width: 72px; height: 96px; border-radius: 9px; overflow: hidden; flex: none;
  background: var(--hs-night-2); box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
  transition: width .4s var(--hs-ease), transform .4s var(--hs-ease);
}
.hs-last.wide .hs-last-pic { width: 171px; }
.hs-last-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hs-last-pic.blank img { object-fit: contain; padding: 10px; box-sizing: border-box; }
.hs-last-words { display: grid; gap: 5px; min-width: 0; justify-items: start; }
.hs-last-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--hs-ember-hi); font-size: 11.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.hs-last-eyebrow img { width: 18px; height: 18px; flex: none; }
.hs-last-title {
  font-family: var(--hs-serif); font-size: 21px; font-weight: 700; line-height: 1.2; color: var(--hs-ink);
  text-wrap: balance; max-width: 100%;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hs-last-meta { color: var(--hs-ink-dim); font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-last-go { pointer-events: none; }
.hs-last:hover { border-color: rgba(242, 165, 65, .55); transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 18px 38px rgba(0, 0, 0, .42), 0 0 30px rgba(242, 165, 65, .14); }
.hs-last:hover .hs-last-wash img { opacity: .85; transform: scale(1.1); }
.hs-last:hover .hs-last-pic { transform: scale(1.03); }
.hs-last:active { transform: translateY(0) scale(.995); }
.hs-last.running { border-color: rgba(156, 196, 255, .6); box-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 12px 28px rgba(0, 0, 0, .28), 0 0 0 2px rgba(156, 196, 255, .22), 0 0 30px rgba(156, 196, 255, .16); }
.hs-last.running .hs-last-eyebrow { color: var(--hs-moon-hi); }
.hs-last.busy { cursor: progress; }
.hs-last.busy .hs-last-go { opacity: .75; }
/* A narrow band: the last game on top, the strip under it, edge to edge as before; and in a
   narrower one still, its button drops under the words instead of squeezing the title. */
@container hs-jump (max-width: 760px) {
  .hs-jump-body { flex-direction: column; }
  .hs-jump-body > .hs-last { flex: none; }
  .hs-jump-body.has-last > .hs-jump-strip { margin: 0 -20px; padding: 4px 20px 6px; scroll-padding: 0 20px; }
}
@container hs-jump (max-width: 520px) {
  .hs-last-btn { grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; padding: 10px 12px 12px 10px; }
  .hs-last-pic { grid-row: span 2; }
  .hs-last-go { grid-column: 2; justify-self: start; min-height: 40px; padding: 6px 16px; }
  .hs-last.wide .hs-last-pic { width: 120px; height: 68px; }
  .hs-last-title { font-size: 18px; }
}
@keyframes hs-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* also seen on the network: rows, divided */
.hs-seen { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hs-line); }
.hs-seen-row { display: flex; align-items: center; gap: 14px; padding: 12px 6px; border-bottom: 1px solid var(--hs-line); min-height: 64px; }
.hs-seen-ico { width: 28px; height: 28px; flex: none; }
.hs-seen-words { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.hs-seen-name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-seen-meta { color: var(--hs-ink-mute); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-seen-acts { display: flex; gap: 6px; flex: none; }

/* ── one device ────────────────────────────────────────────────────────────────────────── */
/* ── a device's page: the stage ─────────────────────────────────────────────────────────
 * Full width of the room (it bleeds past the room's padding): the device's hero art, or its own
 * picture enlarged and softened until one is chosen, veiled toward the night so the words read.
 * The portrait sits in a painted frame; the name, the live state and the vitals plaques are on
 * the art; what is playing now is a plaque of its own; the actions are one strip. */
.hs-stage {
  --stage-x: clamp(20px, 4vw, 48px);
  position: relative; isolation: isolate;
  margin: -8px calc(-1 * var(--stage-x)) 0;
  padding: 18px var(--stage-x) 22px;
  /* Tall enough to show its art, short enough that the content does not float under an
     empty band (screenshot review, 2026-10-10: ~150 px of nothing above the name at 1440×900). */
  min-height: clamp(240px, 30vh, 340px);
  display: grid; grid-template-rows: auto 1fr; gap: 16px;
  overflow: hidden;
  border-bottom: 1px solid var(--hs-line);
  animation: hs-rise .6s var(--hs-ease) both;
}
.hs-stage-art { position: absolute; inset: 0; z-index: -1; background: var(--hs-night-2); }
.hs-stage-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; animation: hs-drift 38s ease-in-out infinite alternate; }
.hs-stage-art.is-picture img { transform: scale(1.18); filter: blur(22px) saturate(1.25) brightness(.9); animation: none; object-position: center 50%; }
.hs-stage-art::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 15, 32, .28), rgba(11, 15, 32, .12) 30%, rgba(11, 15, 32, .72) 72%, var(--hs-night) 100%),
    linear-gradient(90deg, rgba(11, 15, 32, .5), transparent 45%);
}
.hs-stage[data-state="offline"] .hs-stage-art img { filter: saturate(.4) brightness(.55); }
.hs-stage[data-state="offline"] .hs-stage-art.is-picture img { filter: blur(22px) saturate(.4) brightness(.5); }
.hs-stage-top { display: flex; align-items: center; gap: 10px; }
.hs-stage-top .hs-btn.back { background: rgba(10, 14, 30, .45); border-color: rgba(156, 196, 255, .18); backdrop-filter: blur(8px); color: var(--hs-ink); }
.hs-stage-foot { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(16px, 2.6vw, 34px); align-items: end; align-self: end; }

.hs-portrait {
  position: relative; display: block; padding: 0;
  width: clamp(180px, 20vw, 260px); aspect-ratio: 4 / 3;
  border: 3px solid rgba(236, 222, 190, .92); border-radius: 14px; overflow: hidden;
  background: var(--hs-night-2);
  box-shadow: 0 2px 0 rgba(255, 255, 255, .18) inset, 0 22px 50px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .6);
  cursor: pointer;
  animation: hs-rise .7s .04s var(--hs-ease) both;
}
.hs-portrait img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--hs-ease); }
.hs-portrait:hover img { transform: scale(1.04); }
.hs-portrait-edit {
  position: absolute; left: 10px; bottom: 10px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; border-radius: 999px;
  background: rgba(10, 14, 30, .78); color: var(--hs-ink); font-size: 12.5px; font-weight: 650;
  backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(6px); transition: opacity .25s var(--hs-ease), transform .25s var(--hs-ease);
}
.hs-portrait:hover .hs-portrait-edit, .hs-portrait:focus-visible .hs-portrait-edit { opacity: 1; transform: none; }
.hs-portrait:focus-visible { outline: 2px solid var(--hs-moon); outline-offset: 3px; }
@media (hover: none) { .hs-portrait-edit { opacity: 1; transform: none; } }

.hs-stage-words { display: grid; gap: 10px; min-width: 0; animation: hs-rise .7s .08s var(--hs-ease) both; }
.hs-kicker-crest { display: inline-flex; align-items: center; gap: 8px; }
.hs-kicker-crest img { width: 22px; height: 22px; }
.hs-stage-name { margin: 0; font-family: var(--hs-serif); font-size: clamp(34px, 4vw, 56px); font-weight: 700; line-height: 1; letter-spacing: -.01em; color: var(--hs-moon-hi); text-shadow: 0 2px 24px rgba(0, 0, 0, .6), 0 0 30px rgba(156, 196, 255, .18); text-wrap: balance; overflow-wrap: anywhere; }
.hs-stage .hs-state-lg { text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
.hs-stage[data-state="streaming"] .hs-state { color: var(--hs-moon-hi); }
.hs-stage[data-state="online"] .hs-state { color: #f3dcb2; }
/* Every fact carries its divider on its left edge and the list is pulled left by divider +
   padding, so whichever fact starts a line (the first, or one that wrapped) has its divider in
   the list's first pixel column, which the clip removes. Only dividers BETWEEN facts show; the
   negative insets keep focus rings. */
.hs-vitals { margin: 2px 0 0 -15px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 6px; clip-path: inset(-8px -8px -8px 1px); }
.hs-vital { display: flex; align-items: baseline; min-width: 0; margin-right: 14px; padding-left: 14px; border-left: 1px solid var(--hs-line-hi); }
.hs-vital-in { display: inline-flex; align-items: baseline; gap: 7px; min-width: 0; padding: 0; border: 0; background: none; color: var(--hs-ink); font: inherit; text-align: left; }
button.hs-vital-in { cursor: pointer; border-radius: 6px; }
button.hs-vital-in .hs-vital-v { color: var(--hs-ember-hi); text-decoration: underline; text-decoration-color: rgba(255, 199, 122, .35); text-underline-offset: 3px; transition: text-decoration-color .2s, color .2s; }
button.hs-vital-in:hover .hs-vital-v { color: #fff3df; text-decoration-color: currentColor; }
button.hs-vital-in:focus-visible { outline: 2px solid var(--hs-moon); outline-offset: 3px; }
.hs-vital-l { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hs-ink-mute); white-space: nowrap; }
.hs-vital-v { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30ch; }
.hs-stage-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.hs-stage-acts .hs-btn { background: rgba(9, 12, 26, .62); backdrop-filter: blur(8px); }
.hs-stage-acts .hs-btn.primary { background: linear-gradient(180deg, var(--hs-ember-hi), var(--hs-ember)); }
.hs-stage-acts .hs-btn.quiet { background: transparent; }
.hs-stage-acts .hs-more { gap: 6px; }
.hs-more-chev { transform: rotate(-90deg); opacity: .8; }

.hs-nowplaying {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center;
  width: min(360px, 100%); box-sizing: border-box;
  padding: 12px 16px 12px 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(26, 32, 62, .9), rgba(17, 22, 45, .92));
  border: 1px solid rgba(156, 196, 255, .42);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5), 0 0 0 1px rgba(156, 196, 255, .08), 0 0 44px rgba(156, 196, 255, .16);
  backdrop-filter: blur(10px);
  animation: hs-rise .7s .12s var(--hs-ease) both;
}
.hs-nowplaying-art { width: 96px; height: 128px; object-fit: cover; border-radius: 10px; border: 1px solid var(--hs-line-hi); box-shadow: 0 10px 24px rgba(0, 0, 0, .5); }
.hs-nowplaying-words { display: grid; gap: 8px; min-width: 0; }
.hs-nowplaying-words .hs-kicker { display: inline-flex; align-items: center; gap: 6px; color: var(--hs-moon-hi); }
.hs-nowplaying-words .hs-kicker img { width: 20px; height: 20px; }
.hs-nowplaying-name { margin: 0; font-family: var(--hs-serif); font-size: 20px; font-weight: 700; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-nowplaying .hs-btn { justify-self: start; }

/* ── adopt a PC: the one command, on the page — a slim line under the shelf, not a panel ──── */
.hs-adopt {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px 14px; align-items: center;
  padding: 10px 14px 10px 16px;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(242, 165, 65, .09), rgba(22, 28, 56, .55) 42%);
  border: 1px solid var(--hs-line); border-left: 3px solid var(--hs-ember);
}
.hs-adopt-art img { width: 40px; height: 40px; display: block; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .45)); animation: hs-float 6s ease-in-out infinite; }
.hs-adopt-words { display: grid; gap: 6px; min-width: 0; }
.hs-adopt-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.hs-adopt-title { margin: 0; font-family: var(--hs-serif); font-size: 16px; font-weight: 700; line-height: 1.25; color: var(--hs-ink); white-space: nowrap; }
.hs-adopt-hint { margin: 0; min-width: 0; color: var(--hs-ink-dim); font-size: 13px; line-height: 1.45; text-wrap: pretty; }
.hs-adopt-hint .hs-cmd-until { margin-left: 6px; font-size: 13px; }
/* .hs-cmd (below) says pre-wrap; this one is a single line until it has focus */
.hs-cmd.hs-adopt-cmd { padding: 7px 12px; border-radius: 10px; font-size: 12px; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-cmd.hs-adopt-cmd:focus { white-space: pre-wrap; }
.hs-adopt-acts { display: flex; align-items: center; gap: 8px; }
.hs-adopt-acts .hs-btn { white-space: nowrap; }
.hs-apps { display: grid; gap: 18px; margin-top: 18px; }

/* app box art: portrait, the Sunshine box-art ratio */
.hs-app {
  position: relative; min-width: 0;
  border-radius: 16px; overflow: hidden;
  background: var(--hs-panel);
  border: 1px solid var(--hs-line);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .4);
  transition: transform .35s var(--hs-ease), box-shadow .35s var(--hs-ease), border-color .35s;
}
.hs-app:hover, .hs-app:focus-within { transform: translateY(-4px); border-color: rgba(242, 165, 65, .5); box-shadow: 0 26px 54px rgba(0, 0, 0, .55), 0 0 34px rgba(242, 165, 65, .14); }
.hs-app.running { border-color: rgba(156, 196, 255, .6); box-shadow: 0 14px 34px rgba(0, 0, 0, .4), 0 0 0 2px rgba(156, 196, 255, .25), 0 0 40px rgba(156, 196, 255, .2); }
.hs-app-open { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.hs-app-open:focus-visible { outline: none; }
.hs-app:has(.hs-app-open:focus-visible) { outline: 2px solid var(--hs-moon); outline-offset: 3px; }
.hs-app-pic { height: min(calc(var(--colw, 200px) * 1.333), 440px, 56vh); background: var(--hs-night-2); overflow: hidden; }
.hs-app-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--hs-ease); }
.hs-app:hover .hs-app-pic img { transform: scale(1.05); }
.hs-app-cap {
  position: absolute; inset: auto 0 0 0;
  padding: 44px 14px 14px;
  background: linear-gradient(180deg, transparent, rgba(9, 12, 26, .82) 45%, rgba(9, 12, 26, .95));
  display: grid; gap: 4px;
}
.hs-app-name { margin: 0; font-family: var(--hs-serif); font-size: 18px; font-weight: 700; line-height: 1.2; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hs-app-state { margin: 0; display: flex; align-items: center; gap: 6px; color: var(--hs-ink-dim); font-size: 12.5px; white-space: nowrap; }
.hs-app-state img { width: 20px; height: 20px; }
.hs-app.running .hs-app-state { color: var(--hs-moon-hi); }

/* ── settings ──────────────────────────────────────────────────────────────────────────── */
.hs-set { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: start; }
/* The section index rides the middle of the window as the settings scroll past it (Rober,
 * 2026-10-10: "center menu on left"), not the top corner: sticky at half the scroller's
 * height, pulled up by half its own. Its grid area is the whole row (align-items: start on
 * the grid keeps the box its own size), so it has the room to slide. */
.hs-set-index { position: sticky; top: 50%; transform: translateY(-50%); align-self: start; display: grid; gap: 4px; padding: 8px; border-radius: var(--hs-radius); background: rgba(22, 28, 56, .6); border: 1px solid var(--hs-line); max-height: calc(100vh - 60px - 41px - 32px); overflow-y: auto; scrollbar-width: none; }
.hs-set-link { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px 6px 8px; border-radius: 12px; color: var(--hs-ink-dim); text-decoration: none; font-weight: 600; font-size: 14px; white-space: nowrap; }
.hs-set-link img { width: 30px; height: 30px; flex: none; }
.hs-set-link:hover { background: rgba(156, 196, 255, .08); color: var(--hs-ink); }
.hs-set-link:focus-visible { outline: 2px solid var(--hs-moon); outline-offset: 1px; }
.hs-set-link.dim { opacity: .45; }
.hs-set-link .hs-set-count { margin-left: auto; min-width: 22px; text-align: center; padding: 1px 7px; border-radius: 999px; background: rgba(242, 165, 65, .18); color: var(--hs-ember-hi); font-size: 12px; }
.hs-set-link.dim .hs-set-count { background: transparent; color: var(--hs-ink-mute); }
.hs-hit { background: rgba(242, 165, 65, .28); color: inherit; border-radius: 3px; padding: 0 1px; box-shadow: 0 0 0 1px rgba(242, 165, 65, .18); }
.hs-set-body { display: grid; gap: 30px; min-width: 0; max-width: 980px; }
.hs-set-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.hs-save-line { margin: 0; font-size: 13.5px; color: var(--hs-ink-mute); min-height: 20px; }
.hs-save-line[data-kind="ok"] { color: var(--hs-good); }
.hs-save-line[data-kind="wait"] { color: var(--hs-warn); }
.hs-save-line[data-kind="error"] { color: var(--hs-danger); }
.hs-set-sec { display: grid; scroll-margin-top: 16px; }
.hs-set-title { margin: 0 0 6px; display: flex; align-items: center; gap: 12px; font-family: var(--hs-serif); font-size: 24px; font-weight: 700; }
.hs-set-title img { width: 44px; height: 44px; }
.hs-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 32px; align-items: center; padding: 18px 0; border-top: 1px solid var(--hs-line); }
.hs-row-words { display: grid; gap: 4px; min-width: 0; }
.hs-row-label { font-weight: 650; font-size: 15px; color: var(--hs-ink); }
.hs-row-help { margin: 0; color: var(--hs-ink-mute); font-size: 13.5px; line-height: 1.5; max-width: 60ch; text-wrap: pretty; }
.hs-row-ctl { display: flex; justify-content: flex-end; min-width: 0; }
.hs-set-foot { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--hs-line); }

.hs-switch {
  position: relative; width: 52px; height: 30px; flex: none;
  border-radius: 999px; border: 1px solid var(--hs-line-hi);
  background: rgba(156, 196, 255, .08);
  cursor: pointer;
  transition: background .25s var(--hs-ease), border-color .25s;
}
.hs-switch-knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--hs-ink-dim); box-shadow: 0 2px 6px rgba(0, 0, 0, .4); transition: transform .3s var(--hs-ease), background .25s; }
.hs-switch[aria-checked="true"] { background: linear-gradient(180deg, var(--hs-ember-hi), var(--hs-ember)); border-color: transparent; }
.hs-switch[aria-checked="true"] .hs-switch-knob { transform: translateX(22px); background: #fff8ec; }
.hs-switch:focus-visible { outline: 2px solid var(--hs-moon); outline-offset: 3px; }
.hs-switch::after { content: ''; position: absolute; inset: -8px -4px; }   /* a 44px hit area around the 30px track */

.hs-seg { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(8, 11, 24, .6); border: 1px solid var(--hs-line); max-width: 100%; }
.hs-seg-btn { min-height: 38px; padding: 6px 14px; border: 0; border-radius: 10px; background: transparent; color: var(--hs-ink-dim); font-size: 13.5px; font-weight: 650; white-space: nowrap; cursor: pointer; transition: background .2s, color .2s; }
.hs-seg-btn:hover { color: var(--hs-ink); background: rgba(156, 196, 255, .08); }
.hs-seg-btn[aria-checked="true"] { color: #1c1306; background: linear-gradient(180deg, var(--hs-ember-hi), var(--hs-ember)); box-shadow: 0 4px 12px rgba(242, 165, 65, .25); }
.hs-seg-btn:focus-visible { outline: 2px solid var(--hs-moon); outline-offset: 1px; }

.hs-bitrate { display: grid; gap: 8px; width: min(420px, 100%); }
.hs-bitrate-row { display: flex; align-items: center; gap: 14px; }
.hs-bitrate-val { min-width: 84px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--hs-ember-hi); white-space: nowrap; }
.hs-bitrate-meta { margin: 0; display: flex; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--hs-ink-mute); }
.hs-range { -webkit-appearance: none; appearance: none; flex: 1 1 auto; min-width: 0; height: 30px; background: transparent; cursor: pointer; }
.hs-range::-webkit-slider-runnable-track {
  height: 8px; border-radius: 999px;
  background:
    linear-gradient(90deg, transparent calc(var(--rec) - 1px), rgba(212, 229, 255, .7) calc(var(--rec) - 1px), rgba(212, 229, 255, .7) calc(var(--rec) + 1px), transparent calc(var(--rec) + 1px)),
    linear-gradient(90deg, var(--hs-ember) var(--fill), rgba(156, 196, 255, .14) var(--fill));
}
.hs-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -7px; border-radius: 50%; background: #fff8ec; border: 3px solid var(--hs-ember); box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.hs-range:focus-visible { outline: 2px solid var(--hs-moon); outline-offset: 4px; border-radius: 8px; }

.hs-input {
  width: 100%; min-height: 44px; padding: 10px 14px;
  border-radius: 12px; border: 1px solid var(--hs-line-hi);
  background: rgba(8, 11, 24, .7); color: var(--hs-ink);
  font: inherit; font-size: 16px;
}
.hs-input:focus { outline: 2px solid var(--hs-moon); outline-offset: 1px; border-color: transparent; }
.hs-combo { position: relative; width: min(320px, 100%); }
.hs-combo .hs-input { padding-right: 40px; }
.hs-combo-clear { position: absolute; right: 6px; top: 6px; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--hs-ink-mute); font-size: 20px; line-height: 1; cursor: pointer; }
.hs-combo-clear:hover { color: var(--hs-ink); background: rgba(156, 196, 255, .1); }
.hs-combo-list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); max-height: 280px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; border-radius: 14px; background: var(--hs-panel-2); border: 1px solid var(--hs-line-hi); box-shadow: 0 20px 50px rgba(0, 0, 0, .55); }
.hs-combo-opt { padding: 10px 12px; border-radius: 10px; cursor: pointer; color: var(--hs-ink-dim); }
.hs-combo-opt:hover, .hs-combo-opt.active { background: rgba(242, 165, 65, .16); color: var(--hs-ink); }
.hs-combo-opt[aria-selected="true"] { color: var(--hs-ember-hi); font-weight: 650; }
.hs-combo-empty { padding: 10px 12px; color: var(--hs-ink-mute); }

/* ── gate (browser / older app) ───────────────────────────────────────────────────────── */
.hs-gate { display: flex; align-items: center; gap: 36px; flex-wrap: wrap; padding: 20px 0 40px; }
.hs-gate-art { width: 300px; height: 300px; object-fit: contain; animation: hs-float 7s ease-in-out infinite; }
.hs-gate-words { display: grid; gap: 14px; justify-items: start; flex: 1 1 320px; }

/* ── dialogs ───────────────────────────────────────────────────────────────────────────── */
.hs-dialog {
  --hs-panel: #161c38; --hs-panel-2: #1c2346; --hs-line: rgba(156, 196, 255, .14); --hs-line-hi: rgba(156, 196, 255, .34);
  --hs-moon: #9cc4ff; --hs-moon-hi: #d4e5ff; --hs-ember: #f2a541; --hs-ember-hi: #ffc77a;
  --hs-ink: #e9eefb; --hs-ink-dim: #a9b3d1; --hs-ink-mute: #76809f; --hs-good: #8fd6a8; --hs-warn: #f0b35c;
  --hs-serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif; --hs-ease: cubic-bezier(.16, 1, .3, 1);
  width: min(580px, 92vw); max-height: min(88vh, 900px);
  padding: 0; border: 1px solid var(--hs-line-hi); border-radius: 22px;
  background: linear-gradient(180deg, #1a2147, #121731);
  color: var(--hs-ink);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .7);
  display: flex; flex-direction: column; overflow: hidden;
}
.hs-dialog:not([open]) { display: none; }
.hs-dialog.wide { width: min(900px, 94vw); }
.hs-dialog[open] { animation: hs-pop .32s var(--hs-ease) both; }
.hs-dialog::backdrop { background: rgba(5, 7, 16, .66); backdrop-filter: blur(6px); }
@keyframes hs-pop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.hs-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px 12px; flex: none; }
.hs-dialog-title { margin: 0; font-family: var(--hs-serif); font-size: 24px; font-weight: 700; line-height: 1.2; text-wrap: balance; min-width: 0; overflow-wrap: anywhere; }
.hs-dialog-x { width: 40px; height: 40px; flex: none; border: 0; border-radius: 12px; background: transparent; color: var(--hs-ink-dim); font-size: 26px; line-height: 1; cursor: pointer; }
.hs-dialog-x:hover { background: rgba(156, 196, 255, .1); color: var(--hs-ink); }
.hs-dialog-x:focus-visible { outline: 2px solid var(--hs-moon); outline-offset: 1px; }
.hs-dialog-body { padding: 8px 24px 20px; overflow-y: auto; display: grid; gap: 16px; align-content: start; }
.hs-dialog-foot { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding: 14px 24px 20px; border-top: 1px solid var(--hs-line); flex: none; }
.hs-dialog .hs-btn, .hs-dialog .hs-p, .hs-dialog .hs-note { font-family: inherit; }
.hs-dialog .hs-p { color: var(--hs-ink-dim); font-size: 14.5px; line-height: 1.55; margin: 0; }
.hs-dialog .hs-dim { color: var(--hs-ink-mute); font-size: 13.5px; overflow-wrap: anywhere; }
.hs-dialog .hs-h3 { margin: 0; font-family: var(--hs-serif); font-size: 19px; font-weight: 700; }

.hs-field { display: grid; gap: 6px; }
.hs-field-label { font-weight: 650; font-size: 14px; }
.hs-field-help { color: var(--hs-ink-mute); font-size: 13px; line-height: 1.45; }
.hs-inline-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.hs-pick-top { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 22px; align-items: start; }
.hs-pick-preview { border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--hs-line-hi); background: #0b0f20; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.hs-pick-preview.portrait { aspect-ratio: 3 / 4; max-width: 220px; }
.hs-pick-top.hero { grid-template-columns: minmax(0, 1fr); }
.hs-pick-preview.wide { aspect-ratio: 21 / 9; width: 100%; }
.hs-pick-top.hero .hs-pick-side { display: grid; gap: 12px; justify-items: start; }
.hs-pick-top.hero .hs-drop { width: 100%; }
.hs-pick-preview img { width: 100%; height: 100%; object-fit: cover; }
.hs-pick-side { display: grid; gap: 14px; align-content: start; justify-items: start; min-width: 0; }
.hs-pick-side > .hs-field { width: 100%; }
.hs-drop {
  width: 100%; display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 14px;
  border: 1.5px dashed var(--hs-line-hi); background: rgba(156, 196, 255, .04);
  cursor: pointer; transition: border-color .2s, background .2s;
}
.hs-drop img { width: 40px; height: 40px; flex: none; }
.hs-drop div { display: grid; gap: 2px; min-width: 0; }
.hs-drop strong { font-size: 14.5px; }
.hs-drop span { color: var(--hs-ink-mute); font-size: 13px; }
.hs-drop:hover, .hs-drop.over { border-color: var(--hs-ember); background: rgba(242, 165, 65, .08); }
.hs-drop:focus-visible { outline: 2px solid var(--hs-moon); outline-offset: 2px; }
.hs-pick-h { margin-top: 4px; }
.hs-pick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hs-pick-grid.portrait { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.hs-pick {
  display: grid; gap: 6px; padding: 6px; border-radius: 14px;
  border: 1px solid var(--hs-line); background: rgba(8, 11, 24, .5);
  color: var(--hs-ink-dim); font-size: 12.5px; font-weight: 650; text-align: center;
  cursor: pointer; transition: border-color .2s, transform .2s var(--hs-ease), background .2s;
}
.hs-pick img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: 9px; }
.hs-pick-grid.portrait .hs-pick img { aspect-ratio: 3 / 4; }
.hs-pick span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-pick:hover { border-color: var(--hs-line-hi); transform: translateY(-2px); }
.hs-pick[aria-checked="true"] { border-color: var(--hs-ember); background: rgba(242, 165, 65, .12); color: var(--hs-ink); box-shadow: 0 0 0 2px rgba(242, 165, 65, .3); }
.hs-pick:focus-visible { outline: 2px solid var(--hs-moon); outline-offset: 2px; }

.hs-add-intro { display: flex; align-items: center; gap: 16px; }
.hs-add-intro img { width: 72px; height: 72px; flex: none; }

.hs-pair { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 22px; align-items: center; }
.hs-pair-art { width: 200px; height: 200px; object-fit: contain; animation: hs-float 6s ease-in-out infinite; }
.hs-pair-words { display: grid; gap: 12px; min-width: 0; }
.hs-pin-box:empty { display: none; }
.hs-pin { margin: 4px 0; display: flex; gap: 10px; }
.hs-pin span {
  width: 64px; height: 78px; display: grid; place-items: center;
  border-radius: 14px; border: 1px solid rgba(156, 196, 255, .45);
  background: radial-gradient(circle at 50% 30%, rgba(156, 196, 255, .2), rgba(8, 11, 24, .8));
  font-family: var(--hs-serif); font-size: 46px; font-weight: 700; color: var(--hs-moon-hi);
  text-shadow: 0 0 18px rgba(156, 196, 255, .55);
  animation: hs-rise .5s var(--hs-ease) both;
}
.hs-pin span:nth-child(2) { animation-delay: .06s; } .hs-pin span:nth-child(3) { animation-delay: .12s; } .hs-pin span:nth-child(4) { animation-delay: .18s; }
.hs-pair-status { margin: 0; font-size: 14px; color: var(--hs-ink-dim); min-height: 21px; }
.hs-pair-status[data-kind="ok"] { color: var(--hs-good); }
.hs-pair-status[data-kind="warn"] { color: var(--hs-warn); }

.hs-toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 2147483000;
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  max-width: min(560px, calc(100vw - 32px));
  padding: 12px 18px; border-radius: 14px;
  background: rgba(20, 26, 54, .96); border: 1px solid rgba(156, 196, 255, .3);
  color: #e9eefb; font-size: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
  transition: opacity .3s cubic-bezier(.16, 1, .3, 1), transform .3s cubic-bezier(.16, 1, .3, 1);
}
.hs-toast.in { opacity: 1; transform: translate(-50%, 0); }
.hs-toast[data-kind="error"] { border-color: rgba(232, 128, 111, .55); }

/* ── reveals: each kind enters its own way ─────────────────────────────────────────────── */
.hs-dev.hs-reveal { opacity: 0; transform: translateY(22px) scale(.97); filter: blur(4px); transition: opacity .7s var(--hs-ease), transform .8s var(--hs-ease), filter .7s var(--hs-ease), box-shadow .35s, border-color .35s; transition-delay: calc(var(--i, 0) * 70ms); }
.hs-dev.hs-reveal.in { opacity: 1; transform: none; filter: none; }
.hs-dev.hs-reveal.in:hover, .hs-dev.hs-reveal.in:focus-within { transform: translateY(-4px); transition-delay: 0s; }
/* The mask rises over the tile's CONTENTS, never the tile: Chromium's IntersectionObserver counts
   an element whose own clip-path hides it as not intersecting, so a tile clipped shut was never
   revealed and the app grid stayed blank (Rober, 2026-10-10: "huge blank area"). The frame fades
   in; the box art and caption are unmasked from the bottom up. */
.hs-app.hs-reveal { opacity: 0; transform: translateY(10px); transition: opacity .45s var(--hs-ease), transform .8s var(--hs-ease), box-shadow .35s, border-color .35s; transition-delay: calc(var(--i, 0) * 55ms); }
.hs-app.hs-reveal > .hs-app-open { clip-path: inset(100% 0 0 0); transition: clip-path .8s var(--hs-ease); transition-delay: calc(var(--i, 0) * 55ms + 60ms); }
.hs-app.hs-reveal.in { opacity: 1; transform: none; }
.hs-app.hs-reveal.in > .hs-app-open { clip-path: inset(0 0 0 0); }
.hs-app.hs-reveal.in:hover, .hs-app.hs-reveal.in:focus-within { transform: translateY(-4px); transition-delay: 0s; }
.hs-set-sec.hs-reveal { opacity: 0; transform: translateX(-16px); transition: opacity .6s var(--hs-ease), transform .7s var(--hs-ease); }
.hs-set-sec.hs-reveal.in { opacity: 1; transform: none; }
.hs-seen-row.hs-reveal { opacity: 0; transform: translateX(18px); transition: opacity .5s var(--hs-ease), transform .6s var(--hs-ease); }
.hs-seen-row.hs-reveal.in { opacity: 1; transform: none; }
.hs-jump.hs-reveal { opacity: 0; transform: translateX(-18px); transition: opacity .6s var(--hs-ease), transform .7s var(--hs-ease); }
.hs-jump.hs-reveal.in { opacity: 1; transform: none; }
.hs-jump.hs-reveal .hs-last-pic { clip-path: inset(0 100% 0 0); transition: clip-path .9s var(--hs-ease) .15s, width .4s var(--hs-ease), transform .4s var(--hs-ease); }
.hs-jump.hs-reveal.in .hs-last-pic { clip-path: inset(0 0 0 0); }
.hs-jump.hs-reveal .hs-last-wash img { opacity: 0; }
.hs-jump.hs-reveal.in .hs-last-wash img { opacity: .7; }
.hs-jump.hs-reveal.in .hs-last:hover .hs-last-wash img { opacity: .85; }

@media (prefers-reduced-motion: reduce) {
  .hstream *, .hs-dialog, .hs-dialog * { animation: none !important; transition: none !important; }
  .hs-reveal { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
}

/* ── narrow windows and phones ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hs-hero { min-height: 260px; padding-top: 28px; }
  .hs-hero-inner, .hs-rooms { justify-self: start; }
  .hs-hero.compact { grid-template-columns: minmax(0, 1fr); }
  .hs-hero-art::after { background: linear-gradient(180deg, rgba(11, 15, 32, .35), rgba(11, 15, 32, .82) 62%, var(--hs-night) 100%); }
  .hs-stage { min-height: 0; }
  .hs-stage-foot { grid-template-columns: auto minmax(0, 1fr); }
  .hs-nowplaying { grid-column: 1 / -1; width: 100%; }
  .hs-adopt { grid-template-columns: minmax(0, 1fr); padding: 12px 14px; }
  .hs-adopt-art { display: none; }
  .hs-adopt-title { white-space: normal; }
  .hs-adopt-acts { justify-content: flex-start; }
  .hs-set { grid-template-columns: minmax(0, 1fr); }
  .hs-set-index { position: sticky; top: 0; transform: none; max-height: none; z-index: 3; display: flex; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; background: rgba(17, 22, 45, .92); backdrop-filter: blur(10px); }
  .hs-set-link { flex: none; }
  .hs-pick-top { grid-template-columns: minmax(0, 1fr); }
  .hs-pick-preview { max-width: 360px; }
}
@media (max-width: 600px) {
  .hs-stage-foot { grid-template-columns: minmax(0, 1fr); }
  .hs-portrait { width: 150px; }
  .hs-stage-name { font-size: 32px; }
  .hs-vital-v { max-width: 22ch; }
  .hs-vitals { margin-left: -11px; }
  .hs-vital { margin-right: 10px; padding-left: 10px; }
  .hs-dev-grid { --min: 240px; gap: 16px; }
  .hs-app-grid { --min: 140px; gap: 14px; }
  .hs-row { grid-template-columns: minmax(0, 1fr); }
  .hs-row-ctl { justify-content: flex-start; }
  .hs-seg { justify-content: flex-start; }
  .hs-seg-btn { min-height: 44px; }
  .hs-callout { flex-direction: column; align-items: flex-start; }
  .hs-pair { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .hs-pair-art { width: 150px; height: 150px; }
  .hs-pin span { width: 54px; height: 66px; font-size: 38px; }
  .hs-pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hs-pick-grid.portrait { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hs-seen-row { flex-wrap: wrap; }
  .hs-seen-acts { width: 100%; justify-content: flex-end; }
  .hs-seen-acts { flex-wrap: wrap; }
  .hs-jump { padding: 16px 16px 12px; }
  .hs-jump-strip, .hs-jump-body.has-last > .hs-jump-strip { margin: 0 -16px; padding: 4px 16px 6px; scroll-padding: 0 16px; }
  .hs-jump-btn { width: 240px; }
  .hs-jump-item.grouped .hs-jump-end { left: 198px; }
}

/* ── a device's right-click menu ───────────────────────────────────────────────────────── */
.hs-menu {
  position: fixed; z-index: 1200;
  min-width: 250px; max-width: min(340px, 92vw);
  padding: 6px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(26, 32, 62, .98), rgba(17, 22, 45, .98));
  border: 1px solid var(--hs-line-hi);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .4), 0 24px 60px rgba(0, 0, 0, .6), 0 0 0 1px rgba(156, 196, 255, .06);
  backdrop-filter: blur(14px);
  opacity: 0; transform: translateY(-4px) scale(.98); transform-origin: top left;
  transition: opacity .16s var(--hs-ease), transform .18s var(--hs-ease);
}
.hs-menu.in { opacity: 1; transform: none; }
.hs-menu-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 42px; padding: 6px 12px 6px 8px;
  border: 0; border-radius: 11px; background: transparent;
  color: var(--hs-ink); font-size: 14px; font-weight: 600; text-align: left; cursor: pointer;
}
.hs-menu-item img, .hs-menu-blank { width: 26px; height: 26px; flex: none; }
.hs-menu-words { display: grid; gap: 1px; min-width: 0; }
.hs-menu-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-menu-hint { color: var(--hs-ink-mute); font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-menu-item:hover, .hs-menu-item:focus-visible { background: rgba(156, 196, 255, .1); outline: none; }
.hs-menu-item:focus-visible { box-shadow: inset 0 0 0 2px var(--hs-moon); }
.hs-menu-item.danger { color: #ffc1b6; }
.hs-menu-item.danger:hover, .hs-menu-item.danger:focus-visible { background: rgba(232, 128, 111, .14); }
.hs-menu-sep { height: 1px; margin: 5px 10px; background: var(--hs-line); }

/* ── Add a device: join a new PC / by address ──────────────────────────────────────────── */
.hs-add-ways { justify-content: flex-start; justify-self: start; }
.hs-add-ways .hs-seg-btn { min-height: 40px; }
.hs-add-panel { display: grid; gap: 16px; }
.hs-add-panel[hidden], .hs-add-foot[hidden] { display: none; }
.hs-add-foot { display: contents; }
.hs-add-words { display: grid; gap: 8px; min-width: 0; }
.hs-cmd-box { display: grid; gap: 8px; }
.hs-cmd {
  margin: 0; padding: 14px 16px;
  border-radius: 12px;
  background: #080b17; border: 1px solid var(--hs-line-hi);
  color: #e9f0ff; font: 500 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; cursor: text;
}
.hs-cmd:focus-visible { outline: 2px solid var(--hs-moon); outline-offset: 2px; }
.hs-cmd-until { margin: 0; color: var(--hs-ink-mute); font-size: 13px; }

/* Play menu → Open HearthStream: a .tb-item, set off from the radio group above it. */
.tb-pop .tb-pop-link { margin-top: 6px; border-top: 1px solid var(--border, rgba(255, 255, 255, .08)); border-radius: 0 0 10px 10px; padding-top: 10px; }
.tb-pop .tb-pop-link .tb-ico { width: 26px; height: 26px; }

/* ── Find anything: the Ctrl+K palette ─────────────────────────────────────────────────── */
/* The palette itself wears the dock finder's classes (.hqp-*, media/dock.css) so the two look
   alike; only what is HearthStream's own is here: the button in the rooms pill, the key cap,
   the portrait box art in the wide frame, and the flash on a setting the finder picked. */
.hs-room-btn.hs-room-find { padding-right: 10px; }
.hs-kbd {
  margin-left: 4px;
  padding: 4px 7px;
  border-radius: 7px;
  font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .02em;
  color: var(--hs-ink-dim);
  background: rgba(156, 196, 255, .08);
  border: 1px solid var(--hs-line);
}
.hs-room-btn:hover .hs-kbd { color: var(--hs-ink); border-color: var(--hs-line-hi); }
.hs-room-btn.active .hs-kbd { color: inherit; background: rgba(0, 0, 0, .12); border-color: rgba(0, 0, 0, .18); }
.hs-finder .hqp-shot img { object-position: center 30%; }
.hs-finder .hqp-row .hqp-go { opacity: 0; }
.hs-finder .hqp-row.sel .hqp-go { opacity: 1; }
/* The row the finder landed on: an ember wash that fades, then nothing is left behind. */
.hs-row.hs-flash { animation: hs-flash 1.6s var(--hs-ease) both; border-radius: 12px; }
@keyframes hs-flash {
  0% { box-shadow: 0 0 0 2px rgba(242, 165, 65, .7), 0 0 0 10px rgba(242, 165, 65, .12); background: rgba(242, 165, 65, .14); }
  100% { box-shadow: 0 0 0 2px rgba(242, 165, 65, 0), 0 0 0 10px rgba(242, 165, 65, 0); background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  /* No fade: the ring stays for the moment the class is on, then goes. */
  .hs-row.hs-flash { box-shadow: 0 0 0 2px rgba(242, 165, 65, .7); background: rgba(242, 165, 65, .1); }
}
@media (max-width: 600px) {
  .hs-kbd { display: none; }
  .hs-room-btn.hs-room-find { padding-right: 16px; }
  /* Four rooms do not fit one pill on a phone: the pill wraps into two rows instead of being
     clipped by the hero (Find anything used to lose its second word). */
  .hs-rooms { display: flex; flex-wrap: wrap; max-width: 100%; border-radius: 28px; }
}

/* ── Settings for one device (under its apps) ──────────────────────────────────────────── */
/* A disclosure row, not a card: one rule above and below, the sliders plate, the device's
   name and whether it has settings of its own. Open, the same rows as the settings room follow,
   each with a line that says whose value it is. */
.hs-devset { margin-top: 34px; }
.hs-disclosure {
  display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 64px;
  padding: 12px 10px 12px 6px;
  border: 0; border-top: 1px solid var(--hs-line); border-bottom: 1px solid var(--hs-line);
  background: transparent; color: var(--hs-ink);
  text-align: left; cursor: pointer;
  transition: background .2s;
}
.hs-disclosure:hover { background: rgba(156, 196, 255, .06); }
.hs-disclosure:focus-visible { outline: 2px solid var(--hs-moon); outline-offset: 2px; border-radius: 10px; }
/* The back button's chevron points left; here it points right when folded, down when open. */
.hs-disclosure-chev { flex: none; width: 18px; height: 18px; color: var(--hs-ink-dim); transform: rotate(180deg); transition: transform .3s var(--hs-ease); }
.hs-disclosure[aria-expanded="true"] .hs-disclosure-chev { transform: rotate(270deg); color: var(--hs-ember-hi); }
.hs-disclosure-ico { flex: none; width: 34px; height: 34px; }
.hs-disclosure-words { display: grid; gap: 2px; min-width: 0; }
.hs-disclosure-label { font-family: var(--hs-serif); font-size: 21px; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.hs-disclosure-meta { color: var(--hs-ink-dim); font-size: 13.5px; }
.hs-disclosure[aria-expanded="true"] .hs-disclosure-meta { color: var(--hs-ember-hi); }
.hs-devset-body { display: grid; gap: 26px; padding-top: 18px; animation: hs-unfold .45s var(--hs-ease) both; }
@keyframes hs-unfold { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.hs-devset-body .hs-set-sec:first-of-type { margin-top: 0; }
/* Whose value the row shows: a third line across the row, the state on the left, its one
   action on the right. The usual value stays visible but dimmed and out of reach. */
.hs-row-scope { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-top: -2px; }
.hs-row-scope-text { font-size: 13px; font-weight: 650; color: var(--hs-ink-mute); white-space: nowrap; }
.hs-row.owned .hs-row-scope-text { color: var(--hs-ember-hi); }
.hs-row.same .hs-row-ctl { opacity: .42; filter: saturate(.6); pointer-events: none; }
.hs-row.same .hs-row-label { color: var(--hs-ink-dim); }
.hs-row.owned { border-top-color: rgba(242, 165, 65, .28); }
/* The shelf tile's badge: the sliders plate on the picture, bottom right, like the crest. */
.hs-own {
  position: absolute; right: 12px; bottom: 12px; z-index: 1;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: rgba(10, 14, 30, .72);
  border: 1px solid rgba(242, 165, 65, .4);
  backdrop-filter: blur(6px);
}
.hs-own img { width: 26px; height: 26px; }
/* The settings room's line about devices with settings of their own. */
.hs-set-own { margin: 10px 0 0; display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--hs-ink-dim); max-width: 65ch; text-wrap: pretty; }
.hs-set-own img { flex: none; width: 24px; height: 24px; margin-top: -2px; }
.hs-set-own .hs-link { font-size: inherit; }
@media (prefers-reduced-motion: reduce) {
  .hs-disclosure-chev { transition: none; }
  .hs-devset-body { animation: none; }
}
@media (max-width: 600px) {
  .hs-disclosure-label { font-size: 18px; }
  .hs-row-scope { justify-content: flex-start; }
  .hs-row-scope .hs-btn.small { width: 100%; justify-content: center; }
}

/* ── Couch mode: the screen from a sofa ───────────────────────────────────────────────── */
/* `.hstream.couch` (the Couch switch in the rooms pill, remembered in localStorage) is the
   ten-foot cut of the same screen: bigger type and tiles, two or three to a row, every button
   56 px or taller, the pencils gone (Y / △ opens a device's menu), and `.hs-cf` — the focus
   ring the manager paints itself, since a focus moved by a gamepad never matches
   :focus-visible — thick, ember, seen from across the room. `body.hs-couch` carries the same
   to the menu, the dialogs and the finder, which live on <body>. The painted sofa is
   icon-couch.webp (icon archive hearthstream/hearthstream-couch-sofa). */
.hs-room-btn.hs-room-couch.on { color: var(--hs-moon-hi); background: rgba(156, 196, 255, .14); box-shadow: inset 0 0 0 1px rgba(156, 196, 255, .35); }
.hs-couch-legend {
  grid-column: 1 / -1; justify-self: end;
  margin: 0; display: flex; flex-wrap: wrap; gap: 8px 22px;
  color: var(--hs-ink-dim); font-size: 15px; font-weight: 600;
  animation: hs-rise .5s var(--hs-ease) both;
}
.hs-couch-legend[hidden] { display: none; }
.hs-couch-key { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.hs-couch-key .hs-kbd { margin: 0; font-size: 13px; padding: 5px 9px; color: var(--hs-ember-hi); border-color: rgba(242, 165, 65, .35); background: rgba(242, 165, 65, .1); }
.hs-couch-or { color: var(--hs-ink-mute); }
.hs-couch-what { margin-left: 2px; }

/* the ring */
.hstream.couch .hs-cf, body.hs-couch #hs-menu .hs-cf, body.hs-couch #hs-dialog .hs-cf {
  outline: 4px solid var(--hs-ember-hi);
  outline-offset: 5px;
  box-shadow: 0 0 0 11px rgba(242, 165, 65, .22), 0 0 54px rgba(242, 165, 65, .45);
  position: relative; z-index: 2;
}
/* A tile's button sits inside an overflow-hidden frame, so the ring goes on the frame. */
.hstream.couch .hs-dev-open.hs-cf, .hstream.couch .hs-app-open.hs-cf { outline: none; box-shadow: none; position: static; }
.hstream.couch .hs-dev:has(> .hs-dev-open.hs-cf), .hstream.couch .hs-app:has(> .hs-app-open.hs-cf) {
  outline: 4px solid var(--hs-ember-hi); outline-offset: 5px;
  border-color: rgba(242, 165, 65, .7);
  box-shadow: 0 0 0 11px rgba(242, 165, 65, .22), 0 0 60px rgba(242, 165, 65, .45), 0 26px 60px rgba(0, 0, 0, .5);
  transform: translateY(-6px) scale(1.015);
  z-index: 2;
}
.hstream.couch .hs-dev.hs-reveal.in:has(> .hs-dev-open.hs-cf), .hstream.couch .hs-app.hs-reveal.in:has(> .hs-app-open.hs-cf) { transform: translateY(-6px) scale(1.015); transition-delay: 0s; }
body.hs-couch #hs-menu .hs-menu-item.hs-cf { outline: none; box-shadow: inset 0 0 0 3px var(--hs-ember-hi); background: rgba(242, 165, 65, .14); }
body.hs-couch #hs-dialog .hs-cf { outline-offset: 2px; box-shadow: 0 0 0 7px rgba(242, 165, 65, .2); }
.hstream.couch .hs-set-link.hs-cf { outline-offset: 1px; box-shadow: 0 0 0 6px rgba(242, 165, 65, .2); }
.hstream.couch .hs-switch.hs-cf, .hstream.couch .hs-range.hs-cf { outline-offset: 4px; }
.hstream.couch button, .hstream.couch a, .hstream.couch input, .hstream.couch [tabindex] { scroll-margin: 120px 0; }

/* type and tiles */
.hstream.couch .hs-lede { font-size: 18px; max-width: 56ch; }
.hstream.couch .hs-client-line { font-size: 16px; }
.hstream.couch .hs-rooms { gap: 8px; padding: 6px; }
.hstream.couch .hs-room-btn { min-height: 56px; padding: 8px 22px 8px 12px; font-size: 17px; gap: 11px; }
.hstream.couch .hs-room-btn img { width: 34px; height: 34px; }
.hstream.couch .hs-kbd { font-size: 12.5px; }
.hstream.couch .hs-h2 { font-size: 34px; }
.hstream.couch .hs-h3 { font-size: 26px; }
.hstream.couch .hs-sub { font-size: 17px; }
.hstream.couch .hs-p { font-size: 17px; }
.hstream.couch .hs-dim { font-size: 15.5px; }
.hstream.couch .hs-note { font-size: 16.5px; padding: 14px 18px; }
.hstream.couch .hs-btn { min-height: 56px; padding: 10px 24px; font-size: 17px; gap: 11px; border-radius: 14px; }
.hstream.couch .hs-btn.small { min-height: 56px; padding: 10px 20px; font-size: 16px; }
.hstream.couch .hs-btn-ico { width: 26px; height: 26px; }
.hstream.couch .hs-link { font-size: 17px; padding: 6px 4px; }
.hstream.couch .hs-room { gap: 28px; padding-bottom: 96px; }
.hstream.couch .hs-dev-grid { --min: 380px; --maxc: 3; gap: 28px; }
.hstream.couch .hs-app-grid { --min: 270px; --maxc: 3; gap: 26px; }
.hstream.couch .hs-dev-pic { height: min(calc(var(--colw, 380px) * .62), 380px, 42vh); }
.hstream.couch .hs-dev-body { padding: 18px 22px 22px; gap: 8px; }
.hstream.couch .hs-dev-name { font-size: 30px; }
.hstream.couch .hs-state { font-size: 18px; gap: 10px; }
.hstream.couch .hs-state img { width: 28px; height: 28px; }
.hstream.couch .hs-state-lg { font-size: 20px; }
.hstream.couch .hs-crest { font-size: 14px; padding: 6px 12px 6px 8px; }
.hstream.couch .hs-crest img { width: 26px; height: 26px; }
.hstream.couch .hs-own { width: 48px; height: 48px; }
.hstream.couch .hs-own img { width: 32px; height: 32px; }
.hstream.couch .hs-dev-edit, .hstream.couch .hs-app-edit { display: none; }
.hstream.couch .hs-portrait-edit { display: none; }
.hstream.couch .hs-app-pic { height: min(calc(var(--colw, 270px) * 1.333), 560px, 62vh); }
.hstream.couch .hs-app-cap { padding: 56px 18px 18px; gap: 6px; }
.hstream.couch .hs-app-name { font-size: 24px; }
.hstream.couch .hs-app-state { font-size: 15.5px; }
.hstream.couch .hs-app-state img { width: 24px; height: 24px; }
.hstream.couch .hs-jump { padding: 22px 24px 18px; }
.hstream.couch .hs-jump-strip { margin: 0 -24px; padding: 14px 24px 18px; scroll-padding: 0 24px; gap: 16px; }
.hstream.couch .hs-jump-btn { width: 340px; min-height: 140px; grid-template-columns: 90px minmax(0, 1fr); gap: 14px; padding: 10px 16px 10px 10px; }
.hstream.couch .hs-jump-pic { width: 90px; height: 120px; }
.hstream.couch .hs-jump-app { font-size: 20px; }
.hstream.couch .hs-jump-dev { font-size: 15px; }
.hstream.couch .hs-jump-dev img { width: 22px; height: 22px; }
.hstream.couch .hs-jump-badge { font-size: 13px; padding: 3px 11px; }
.hstream.couch .hs-jump-clear { font-size: 16px; }
.hstream.couch .hs-jump-body { gap: 16px; }
.hstream.couch .hs-jump-body.has-last > .hs-jump-strip { margin: -14px -24px -18px 0; padding: 14px 24px 18px 2px; }
.hstream.couch .hs-last, .hstream.couch .hs-last-btn { min-height: 144px; }
.hstream.couch .hs-last-pic { width: 90px; height: 120px; }
.hstream.couch .hs-last.wide .hs-last-pic { width: 213px; }
.hstream.couch .hs-last-title { font-size: 26px; }
.hstream.couch .hs-last-eyebrow { font-size: 14px; }
.hstream.couch .hs-last-meta { font-size: 16px; }
.hstream.couch .hs-seen-row { min-height: 84px; padding: 16px 8px; gap: 18px; }
.hstream.couch .hs-seen-ico { width: 34px; height: 34px; }
.hstream.couch .hs-seen-name { font-size: 19px; }
.hstream.couch .hs-seen-meta { font-size: 15.5px; }
.hstream.couch .hs-seen-acts { gap: 10px; }
.hstream.couch .hs-callout { padding: 22px 26px; gap: 26px; }
.hstream.couch .hs-empty-acts { gap: 14px; }
.hstream.couch .hs-stage-name { font-size: clamp(40px, 4.4vw, 60px); }
.hstream.couch .hs-facts { font-size: 17px; gap: 8px 22px; }
.hstream.couch .hs-vital-v { font-size: 17px; }
.hstream.couch .hs-stage-acts { gap: 12px; }
.hstream.couch .hs-kicker { font-size: 13.5px; }

/* settings: bigger controls, the same rows */
.hstream.couch .hs-set { grid-template-columns: 280px minmax(0, 1fr); }
.hstream.couch .hs-set-link { min-height: 56px; font-size: 17px; gap: 12px; padding: 8px 14px 8px 10px; }
.hstream.couch .hs-set-link img { width: 36px; height: 36px; }
.hstream.couch .hs-set-title { font-size: 28px; }
.hstream.couch .hs-set-title img { width: 52px; height: 52px; }
.hstream.couch .hs-row { padding: 22px 0; gap: 14px 36px; }
.hstream.couch .hs-row-label { font-size: 19px; }
.hstream.couch .hs-row-help { font-size: 16px; }
.hstream.couch .hs-row-scope-text { font-size: 15px; }
.hstream.couch .hs-save-line { font-size: 16px; }
.hstream.couch .hs-switch { width: 76px; height: 44px; }
.hstream.couch .hs-switch-knob { width: 34px; height: 34px; top: 4px; left: 4px; }
.hstream.couch .hs-switch[aria-checked="true"] .hs-switch-knob { transform: translateX(32px); }
.hstream.couch .hs-seg { gap: 6px; padding: 5px; border-radius: 18px; }
.hstream.couch .hs-seg-btn { min-height: 56px; padding: 8px 20px; font-size: 17px; border-radius: 13px; }
.hstream.couch .hs-bitrate { width: min(520px, 100%); }
.hstream.couch .hs-bitrate-val { font-size: 19px; min-width: 100px; }
.hstream.couch .hs-bitrate-meta { font-size: 15px; }
.hstream.couch .hs-range { height: 44px; }
.hstream.couch .hs-range::-webkit-slider-runnable-track { height: 12px; }
.hstream.couch .hs-range::-webkit-slider-thumb { width: 32px; height: 32px; margin-top: -10px; border-width: 4px; }
.hstream.couch .hs-input { min-height: 56px; font-size: 18px; padding: 12px 16px; }
.hstream.couch .hs-combo { width: min(380px, 100%); }
.hstream.couch .hs-combo-clear { width: 44px; height: 44px; top: 6px; font-size: 24px; }
.hstream.couch .hs-combo-opt { padding: 14px 16px; font-size: 17px; }
.hstream.couch .hs-disclosure { min-height: 84px; gap: 18px; }
.hstream.couch .hs-disclosure-ico { width: 44px; height: 44px; }
.hstream.couch .hs-disclosure-label { font-size: 25px; }
.hstream.couch .hs-disclosure-meta { font-size: 16px; }
.hstream.couch .hs-set-own { font-size: 16.5px; }
.hstream.couch .hs-gate-words { gap: 18px; }

/* the menu, the dialogs and the finder sit on <body> */
body.hs-couch .hs-menu { min-width: 320px; max-width: min(420px, 92vw); padding: 8px; border-radius: 20px; }
body.hs-couch .hs-menu-item { min-height: 58px; padding: 8px 16px 8px 12px; font-size: 17px; gap: 14px; border-radius: 14px; }
body.hs-couch .hs-menu-item img, body.hs-couch .hs-menu-blank { width: 32px; height: 32px; }
body.hs-couch .hs-menu-hint { font-size: 14px; }
body.hs-couch .hs-dialog { width: min(720px, 94vw); }
body.hs-couch .hs-dialog.wide { width: min(1040px, 96vw); }
body.hs-couch .hs-dialog-title { font-size: 28px; }
body.hs-couch .hs-dialog-x { width: 56px; height: 56px; font-size: 32px; }
body.hs-couch .hs-dialog .hs-btn { min-height: 56px; padding: 10px 24px; font-size: 17px; }
body.hs-couch .hs-dialog .hs-p { font-size: 17px; }
body.hs-couch .hs-dialog .hs-dim { font-size: 15.5px; }
body.hs-couch .hs-dialog .hs-input { min-height: 56px; font-size: 18px; }
body.hs-couch .hs-dialog .hs-field-label { font-size: 16px; }
body.hs-couch .hs-dialog .hs-seg-btn { min-height: 52px; font-size: 16.5px; padding: 8px 18px; }
body.hs-couch .hs-pick { font-size: 14.5px; padding: 8px; gap: 8px; }
body.hs-couch .hs-pin span { width: 80px; height: 96px; font-size: 56px; }
body.hs-couch .hs-finder .hqp-row { min-height: 60px; font-size: 17px; }
body.hs-couch .hs-finder .hqp-input { font-size: 20px; min-height: 60px; }
body.hs-couch .hs-finder .hqp-sub { font-size: 14.5px; }
body.hs-couch .hs-toast { font-size: 17px; padding: 16px 24px; max-width: min(720px, calc(100vw - 32px)); }

@media (prefers-reduced-motion: reduce) {
  .hs-couch-legend { animation: none; }
  .hstream.couch .hs-dev:has(> .hs-dev-open.hs-cf), .hstream.couch .hs-app:has(> .hs-app-open.hs-cf) { transform: none; }
}
@media (max-width: 900px) {
  .hstream.couch .hs-dev-grid { --min: 300px; --maxc: 2; }
  .hstream.couch .hs-app-grid { --min: 220px; --maxc: 2; }
  .hstream.couch .hs-set { grid-template-columns: minmax(0, 1fr); }
  .hs-couch-legend { justify-self: start; }
}
@media (max-width: 600px) {
  .hstream.couch .hs-dev-grid { --min: 240px; }
  .hstream.couch .hs-app-grid { --min: 150px; }
  .hs-couch-legend { gap: 6px 14px; font-size: 14px; }
  .hs-couch-legend .hs-kbd { display: inline-block; }
  .hstream.couch .hs-room-btn { padding: 8px 14px 8px 10px; }
}

/* ── The stream inside Hearth (shell/moonlight-dock.js) ───────────────────────────────────── */
.hs-nowplaying.here { border-color: rgba(156, 196, 255, .5); box-shadow: 0 14px 34px rgba(0, 0, 0, .45), 0 0 0 1px rgba(156, 196, 255, .2), 0 0 40px rgba(156, 196, 255, .14); }
.hs-nowplaying-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.hs-nowplaying-acts .hs-btn { white-space: nowrap; }
/* The pill that brings you back to a stream playing in the background, on every Hearth tab. */
.hs-live {
  --hs-line: rgba(156, 196, 255, .14); --hs-line-hi: rgba(156, 196, 255, .34);
  --hs-moon: #9cc4ff; --hs-ember: #f2a541; --hs-ember-hi: #ffc77a;
  --hs-ink: #e9eefb; --hs-ink-dim: #a9b3d1; --hs-ease: cubic-bezier(.16, 1, .3, 1);
  position: fixed; right: 20px; bottom: 20px; z-index: 2147483000;
  display: flex; align-items: center; gap: 12px; max-width: min(560px, calc(100vw - 40px));
  padding: 10px 10px 10px 14px; border-radius: 18px;
  background: rgba(14, 18, 38, .92); border: 1px solid rgba(156, 196, 255, .3);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55), 0 0 36px rgba(156, 196, 255, .12);
  backdrop-filter: blur(12px); color: #e9eefb;
  font: 500 13px/1.25 system-ui, -apple-system, 'Segoe UI', sans-serif;
  opacity: 0; transform: translateY(16px) scale(.98); pointer-events: none;
  transition: opacity .45s cubic-bezier(.16, 1, .3, 1), transform .55s cubic-bezier(.16, 1, .3, 1);
}
.hs-live.in { opacity: 1; transform: none; pointer-events: auto; }
.hs-live-ico { width: 28px; height: 28px; flex: none; }
.hs-live-words { display: grid; gap: 2px; min-width: 0; }
.hs-live-k { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #9cc4ff; white-space: nowrap; }
.hs-live-name { font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-live .hs-btn { flex: none; white-space: nowrap; }
@media (max-width: 560px) { .hs-live { left: 12px; right: 12px; bottom: 12px; flex-wrap: wrap; row-gap: 8px; } .hs-live-words { flex: 1 1 calc(100% - 44px); } .hs-live .hs-btn { flex: 1 1 0; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .hs-live { transition: none; transform: none; } }
/* Never over the lock screen or the privacy cover. The pill shares their layer and comes later in
   the page, so it drew on top of "Enter your password", naming the game and offering Return
   (Rober, 2026-10-11: "hide this from lock screen"). Gone at once, not faded, and not clickable. */
body.locked .hs-live, body.locked .hs-undo,
body.privacy-covered .hs-live, body.privacy-covered .hs-undo {
  visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; transition: none !important;
}

/* The Hearth frame round a stream docked inside Hearth (shell 1.0.71; Rober, 2026-10-11: "just a
   hearth frame around video would be nice"). The stream is a native window the shell places in
   the mantel's OPENING; this paints what is round it, where the shell says (`{phase:'stage'}`
   events, in page pixels): the night cabin on the wall, darkened so it never competes with the
   game, and the stone mantel the Flash player wears, its bands sized by the shell. The picture
   sits inside the frame, never under it. It takes the clicks on the wall, so nothing of the tab
   underneath is pressed by accident; a click there hands the keyboard back to the game. */
.hs-stage-room { position: fixed; z-index: 2147482000; pointer-events: auto; opacity: 0;
  transition: opacity .32s cubic-bezier(.16, 1, .3, 1); contain: strict; }
.hs-stage-room.in { opacity: 1; }
.hs-stage-room[hidden] { display: none; }
.hs-stage-wall { position: absolute; inset: 0; overflow: hidden; isolation: isolate; background: #0b0f20; }
.hs-stage-wall::before { content: ''; position: absolute; inset: -24px;
  background: url('art/backdrop.webp') center / cover no-repeat; filter: blur(6px) saturate(.9); }
.hs-stage-wall::after { content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 45%, rgba(11, 15, 32, .55), rgba(6, 8, 18, .9)); }
.hs-stage-mantel { position: absolute; box-sizing: border-box; border-style: solid; border-color: transparent;
  /* stretch, not the Flash player's round: at a stream's width round tiled the sill's ember pile
     and the corner stones five times over; stretched it reads as one mantel. */
  border-image: url('../player/frame.webp') 158 151 118 152 stretch;
  background: #000; background-clip: padding-box;
  filter: drop-shadow(0 18px 38px rgba(0, 0, 0, .6));
  transform: scale(.985); transition: transform .42s cubic-bezier(.16, 1, .3, 1); }
.hs-stage-room.in .hs-stage-mantel { transform: none; }
/* Ember light off the stone onto the picture's edge, as on the Flash player. */
.hs-stage-mantel::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 170, 80, .22), inset 0 0 22px rgba(255, 140, 50, .16); }
body.locked .hs-stage-room, body.privacy-covered .hs-stage-room { display: none !important; }
/* The room covers everything under the tabs, and the top bar (z-index 10) sat under it, so every
   menu it drops (privacy, Activity, Play, Add) was cut off where the room begins (Rober,
   2026-10-20: "cut off on hearthstream page"). While the room is up the bar rides just above it.
   Only then: the lock screen is z-index 1000 and the room yields to it and to the cover by hiding,
   so the same conditions put the bar back under them. */
body.has-hs-stage:not(.locked):not(.privacy-covered) header.topbar { z-index: 2147482001; }

/* The controls beside the frame (shell 1.0.72): a column of night glass on the wall, the same
   material as the background pill, its picture taking the height the controls leave. */
.hs-stage-room {
  --hs-line: rgba(156, 196, 255, .14); --hs-line-hi: rgba(156, 196, 255, .34);
  --hs-moon: #9cc4ff; --hs-ember: #f2a541; --hs-ember-hi: #ffc77a;
  --hs-ink: #e9eefb; --hs-ink-dim: #a9b3d1; --hs-ease: cubic-bezier(.16, 1, .3, 1);
  font: 500 14px/1.3 system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--hs-ink);
}
.hs-stage-dock { position: absolute; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px;
  padding: 14px; border-radius: 20px; overflow: hidden;
  background: rgba(14, 18, 38, .86); border: 1px solid rgba(156, 196, 255, .26);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5), 0 0 36px rgba(156, 196, 255, .08); backdrop-filter: blur(12px);
  opacity: 0; transform: translateX(14px);
  transition: opacity .4s var(--hs-ease) .12s, transform .5s var(--hs-ease) .12s; }
.hs-stage-room.in .hs-stage-dock { opacity: 1; transform: none; }
.hs-stage-dock[hidden] { display: none; }
.hs-sd-pic { flex: 1 1 auto; min-height: 0; margin: 0; border-radius: 12px; overflow: hidden; position: relative;
  border: 1px solid var(--hs-line-hi); background: #0b0f20; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); }
.hs-sd-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A game's own cover (a Hearth game behind a "Beam" stream): usually portrait, the title and the
   face in its upper half, so the crop keeps the top rather than the middle. */
.hs-sd-pic.game img { object-position: 50% 18%; }
/* The caption plaque: centred at the foot of the picture, inside its frame. */
.hs-sd-cap { position: absolute; left: 0; right: 0; bottom: 0; display: grid; justify-items: center; gap: 2px;
  padding: 26px 12px 12px; text-align: center;
  background: linear-gradient(180deg, transparent, rgba(11, 15, 32, .78) 42%, rgba(11, 15, 32, .94)); }
.hs-sd-k { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--hs-moon); white-space: nowrap; }
/* A game's name wraps to two balanced lines before it is cut ("Nothing Weird Happens Here"). */
.hs-sd-app { max-width: 100%; font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; font-size: 18px; font-weight: 700;
  line-height: 1.15; text-wrap: balance; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.hs-sd-host { max-width: 100%; font-size: 12px; color: var(--hs-ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-sd-host:empty { display: none; }
/* A short window: the picture steps aside and the plaque stands alone, still framed and centred. */
.hs-stage-dock.short .hs-sd-pic { flex: none; background: rgba(156, 196, 255, .05); }
.hs-stage-dock.short .hs-sd-pic img { display: none; }
.hs-stage-dock.short .hs-sd-cap { position: static; padding: 10px 12px; background: none; }
/* "Slow connection": a parchment speech bubble over the column's picture, the painted radio
   peeking over its left edge, its tail pointing down at the caption. Absolutely placed: nothing
   in the column moves. It pops from its tail and then bobs a little. */
.hs-sd-bubble { position: absolute; z-index: 2; top: 62px; left: 22px; right: 12px; box-sizing: border-box;
  padding: 11px 26px 11px 34px; border-radius: 18px; background: #fbf1dc; color: #3a2310;
  border: 2px solid #f2a541; box-shadow: 0 10px 26px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .6);
  transform-origin: 30% 100%; animation: hsBubbleBob 3.2s ease-in-out .6s infinite; }
.hs-sd-bubble[hidden] { display: none; }
.hs-sd-bubble.pop { animation: hsBubblePop .55s cubic-bezier(.34, 1.56, .64, 1), hsBubbleBob 3.2s ease-in-out .6s infinite; }
/* The tail: a "v" under the bubble, toward what is playing. */
.hs-sd-bubble::before, .hs-sd-bubble::after { content: ''; position: absolute; left: 34%; width: 0; height: 0; border-style: solid; }
.hs-sd-bubble::before { bottom: -14px; border-width: 14px 11px 0 11px; border-color: #f2a541 transparent transparent transparent; }
.hs-sd-bubble::after { bottom: -10px; margin-left: 2px; border-width: 11px 9px 0 9px; border-color: #fbf1dc transparent transparent transparent; }
.hs-sd-bubble-ico { position: absolute; left: -20px; top: 50%; width: 44px; height: 44px; margin-top: -23px; transform: rotate(-8deg);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .45)); }
.hs-sd-bubble-words { display: grid; gap: 2px; min-width: 0; }
.hs-sd-bubble-words strong { font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; font-size: 15px; white-space: nowrap; line-height: 1.1; color: #5a2c06; }
.hs-sd-bubble-sub { font-size: 12.5px; line-height: 1.3; color: #6b4a2a; }
.hs-sd-bubble-link { justify-self: start; margin-top: 3px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; white-space: nowrap;
  font: 700 12.5px system-ui, -apple-system, 'Segoe UI', sans-serif; color: #b45f06; text-decoration: underline; text-underline-offset: 3px; }
.hs-sd-bubble-link:hover { color: #7a3d02; }
.hs-sd-bubble-x { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: #8a6440; cursor: pointer; }
.hs-sd-bubble-x:hover { background: rgba(90, 44, 6, .1); color: #3a2310; }
.hs-sd-bubble-link:focus-visible, .hs-sd-bubble-x:focus-visible { outline: 2px solid #b45f06; outline-offset: 2px; }
/* A short window has no picture to float over: the bubble rides the caption plaque instead. */
.hs-stage-dock.short .hs-sd-bubble { top: 10px; }
@keyframes hsBubblePop { 0% { opacity: 0; transform: scale(.4) translateY(14px); } 100% { opacity: 1; transform: none; } }
@keyframes hsBubbleBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
.hs-stage-handle.poor { border-color: rgba(242, 165, 65, .7); box-shadow: -6px 10px 26px rgba(0, 0, 0, .45), 0 0 18px rgba(242, 165, 65, .45); animation: hsHandleGlow 2.4s ease-in-out infinite; }
@keyframes hsHandleGlow { 50% { box-shadow: -6px 10px 26px rgba(0, 0, 0, .45), 0 0 4px rgba(242, 165, 65, .15); } }
/* The bitrate row, lit for a moment when the notice brings you to it. */
.hstream .hs-row.hs-row-flash { box-shadow: 0 0 0 2px rgba(242, 165, 65, .8), 0 0 26px rgba(242, 165, 65, .25); border-radius: 12px; transition: box-shadow .4s; }
@media (prefers-reduced-motion: reduce) { .hs-sd-bubble, .hs-sd-bubble.pop, .hs-stage-handle.poor { animation: none; } }
/* Hide the column: a small round button on the picture's top-right corner. */
.hs-sd-hide { position: absolute; top: 22px; right: 22px; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; border: 1px solid var(--hs-line-hi); background: rgba(11, 15, 32, .78); color: var(--hs-ink-dim);
  cursor: pointer; transition: background .2s, color .2s, transform .2s var(--hs-ease); }
.hs-sd-hide:hover { background: rgba(28, 35, 70, .95); color: var(--hs-ink); transform: translateX(2px); }
.hs-sd-hide:focus-visible { outline: 2px solid var(--hs-moon); outline-offset: 2px; }
.hs-sd-hide[hidden] { display: none; }
/* …and the handle that brings it back, on the wall's right edge. */
.hs-stage-handle { position: absolute; right: 0; width: 38px; height: 96px; display: grid; place-items: center; align-content: center; gap: 8px;
  border-radius: 14px 0 0 14px; border: 1px solid rgba(156, 196, 255, .26); border-right: 0;
  background: rgba(14, 18, 38, .86); color: var(--hs-ink-dim); cursor: pointer; box-shadow: -6px 10px 26px rgba(0, 0, 0, .45);
  transition: width .25s var(--hs-ease), color .2s, background .2s; }
.hs-stage-handle:hover { width: 46px; color: var(--hs-ink); background: rgba(22, 28, 56, .94); }
.hs-stage-handle:focus-visible { outline: 2px solid var(--hs-moon); outline-offset: 2px; }
.hs-stage-handle img { width: 24px; height: 24px; }
.hs-stage-handle[hidden] { display: none; }
.hs-sd-acts { display: grid; gap: 8px; }
.hs-stage-dock .hs-sd-btn { width: 100%; justify-content: flex-start; min-height: 44px; padding: 8px 14px; font-size: 14px; }
.hs-stage-dock .hs-sd-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* The way back carries its key on its face: with a game holding the keyboard it is the one
   control that always works. */
.hs-stage-dock .hs-sd-btn.primary { flex-wrap: wrap; row-gap: 3px; padding-top: 9px; padding-bottom: 9px; }
.hs-sd-key { flex: 1 0 100%; padding-left: 31px; font: 700 10.5px/1.2 ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;
  letter-spacing: .02em; color: rgba(28, 19, 6, .72); text-align: left; }
.hs-sd-vol { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 6px 0 2px;
  border-radius: 12px; background: rgba(156, 196, 255, .05); border: 1px solid var(--hs-line); }
.hs-sd-vol[hidden] { display: none; }
.hs-sd-mute { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
  border: 0; background: transparent; cursor: pointer; transition: background .2s; }
.hs-sd-mute:hover { background: rgba(156, 196, 255, .1); }
.hs-sd-mute:focus-visible, .hs-sd-range:focus-visible { outline: 2px solid var(--hs-moon); outline-offset: 1px; }
.hs-sd-mute img { width: 26px; height: 26px; }
.hs-sd-range { -webkit-appearance: none; appearance: none; flex: 1 1 auto; min-width: 0; height: 40px; margin: 0; background: transparent; cursor: pointer; }
.hs-sd-range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--hs-ember) 0 var(--fill, 100%), rgba(156, 196, 255, .2) var(--fill, 100%) 100%); }
.hs-sd-range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -5px; border-radius: 50%;
  background: var(--hs-ember-hi); border: 2px solid #2a1606; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); transition: transform .15s; }
.hs-sd-range:hover::-webkit-slider-thumb, .hs-sd-range:active::-webkit-slider-thumb { transform: scale(1.15); }
.hs-sd-pct { flex: none; width: 38px; text-align: right; font-size: 12.5px; font-weight: 600; color: var(--hs-ink-dim); font-variant-numeric: tabular-nums; }
.hs-stage-dock .hs-sd-priv { margin-top: auto; }
.hs-stage-dock.short .hs-sd-priv { margin-top: 0; }
/* The window buttons on the mantel: a night-glass tray so they read against the stone. */
.hs-stage-wc { position: absolute; display: flex; gap: 2px; padding: 2px; border-radius: 10px;
  background: rgba(14, 18, 38, .82); border: 1px solid rgba(156, 196, 255, .22); box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
  opacity: 0; transition: opacity .4s var(--hs-ease) .2s; }
.hs-stage-room.in .hs-stage-wc { opacity: 1; }
.hs-stage-wc .winbtn { color: var(--hs-ink-dim); }
.hs-stage-wc .winbtn:hover { background: rgba(156, 196, 255, .14); color: var(--hs-ink); }
.hs-stage-wc .winbtn.close:hover { background: #ef4444; color: #fff; }
.hs-stage-wc .winbtn:focus-visible { outline: 2px solid var(--hs-moon); outline-offset: 1px; }

/* Window chrome includes the blurred margins. Native video and the controls opt out. */
.hs-stage-wall .hs-stage-drag { inset: 0; z-index: 1; display: block; padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; backdrop-filter: none; opacity: 1; -webkit-app-region: drag; }
#hs-stage-room .hs-stage-mantel, #hs-stage-room .hs-stage-dock,
#hs-stage-room > .hs-stage-wc, #hs-stage-room .hs-stage-handle,
.hs-dialog, .hs-dialog::backdrop, .connection-dialog::backdrop { -webkit-app-region: no-drag; }
.hs-sd-pic .hs-sd-arrange { position: absolute; top: 8px; left: 8px; z-index: 1;
  min-height: 44px; padding: 8px 12px; max-width: calc(100% - 56px);
  font-size: 12px; color: var(--hs-ink); background: rgba(11, 15, 32, .9); border-color: var(--hs-line-hi);
  opacity: 0; pointer-events: none; }
.hs-sd-pic:hover .hs-sd-arrange, .hs-sd-pic:focus-within .hs-sd-arrange { opacity: 1; pointer-events: auto; }
.hs-stage-dock.short .hs-sd-arrange { display: none; }
.hs-cover-dialog { width: min(650px, calc(100vw - 32px)); }
.hs-cover-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 24px; }
.hs-cover-preview { position: relative; margin: 0; width: 100%; max-height: 360px; overflow: hidden;
  border: 1px solid var(--hs-line-hi); border-radius: 12px; background: var(--hs-night-2);
  touch-action: none; user-select: none; cursor: grab; }
.hs-cover-preview.dragging { cursor: grabbing; }
.hs-cover-preview > img { width: 100%; height: 100%; display: block; object-fit: cover; pointer-events: none; }
.hs-cover-preview .hs-sd-cap { pointer-events: none; }
.hs-cover-controls { display: grid; gap: 16px; min-width: 0; }
.hs-cover-control { display: grid; grid-template-columns: minmax(0, 1fr) 46px; gap: 4px 8px; align-items: center; }
.hs-cover-control > span { grid-column: 1 / -1; }
.hs-cover-control input { width: 100%; min-width: 0; min-height: 44px; margin: 0; accent-color: var(--hs-ember); }
.hs-cover-control input:focus-visible { outline: 2px solid var(--hs-moon); outline-offset: 2px; }
.hs-cover-control output { text-align: right; font-variant-numeric: tabular-nums; color: var(--hs-ink-dim); }
.hs-cover-status:empty { display: none; }
.hs-sd-fast-icon { flex: none; width: 22px; font: 700 28px/22px Georgia, serif; color: var(--hs-ember-hi); text-align: center; }
.hs-stage-dock .hs-sd-fast.on { border-color: var(--hs-ember); background: rgba(242, 165, 65, .16); }
.hs-sd-fast-note { margin: 0; color: var(--hs-ember-hi); font-size: 12px; line-height: 1.4; }
.hs-sd-fast-note[hidden] { display: none; }
@media (hover: none) { .hs-sd-pic .hs-sd-arrange { opacity: 1; pointer-events: auto; } }
@media (max-width: 520px) {
  .hs-cover-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .hs-cover-preview { max-width: 190px; max-height: 230px; justify-self: center; }
  .hs-cover-controls { gap: 8px; }
}
/* The privacy menu opened from here floats over the room, beside its button. */
.autolock-menu.is-floating { box-shadow: 0 18px 44px rgba(0, 0, 0, .6); }
@media (prefers-reduced-motion: reduce) { .hs-stage-dock { transition: none; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hs-stage-room, .hs-stage-mantel { transition: none; transform: none; } }

/* The undo bar: what a press is about to do, and a few seconds to take it back. */
.hs-undo {
  --ink: #e9eefb; --ember: #f2a541; --ember-hi: #ffc77a;
  position: fixed; left: 50%; bottom: 28px; z-index: 2147483001;
  display: flex; align-items: center; gap: 12px; overflow: hidden;
  max-width: min(560px, calc(100vw - 32px)); padding: 10px 10px 10px 14px; border-radius: 14px;
  background: rgba(20, 26, 54, .97); border: 1px solid rgba(232, 128, 111, .45);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55); color: var(--ink);
  font: 500 14px/1.3 system-ui, -apple-system, 'Segoe UI', sans-serif;
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  transition: opacity .3s cubic-bezier(.16, 1, .3, 1), transform .3s cubic-bezier(.16, 1, .3, 1);
}
.hs-undo.in { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.hs-undo-ico { width: 24px; height: 24px; flex: none; }
.hs-undo-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-undo-btn { flex: none; height: 34px; padding: 0 16px; border-radius: 10px; border: 0; cursor: pointer;
  background: linear-gradient(180deg, var(--ember-hi), var(--ember)); color: #2a1606; font: 700 13px system-ui, sans-serif; }
.hs-undo-btn:focus-visible { outline: 2px solid #9cc4ff; outline-offset: 2px; }
.hs-undo-rail { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: rgba(232, 128, 111, .85); transform-origin: left; transform: scaleX(1); }
.hs-undo-rail.run { transform: scaleX(0); transition: transform var(--ms, 4000ms) linear; }
@media (prefers-reduced-motion: reduce) { .hs-undo { transition: none; } .hs-undo-rail.run { transition: none; transform: scaleX(1); } }

/* Phone: a segmented choice is an even grid, so a sixth option never sits alone on a second line
   (screenshot review, 2026-10-10: Resolution left "Custom" stranded). */
@media (max-width: 600px) {
  .hs-seg { display: grid; grid-template-columns: repeat(var(--seg-cols, 3), minmax(0, 1fr)); width: 100%; box-sizing: border-box; }
  .hs-seg-btn { padding: 6px 8px; }
  .hs-set-body { gap: 22px; }
}

/* Something already seen comes back in place on a repaint: no rise, no fade, no delay. The marker
   is .hs-shown, never .hs-seen: that is the "Also seen on your network" list, whose padding: 0
   and border-top used to land on every repainted tile and left the Jump back in band with no
   padding at all (Rober, 2026-10-13). */
.hstream .hs-reveal.hs-shown, .hstream .hs-reveal.hs-shown > * { transition: none !important; transition-delay: 0s !important; }