/* ---- shared ---- */

/* @source site-nav.css */
/* HAL SUPREME shared site header: one menu on every page (desktop tabs + More, phone sheet).
   Self-contained: its own tokens and class names (hs-*) so it looks the same on portal.css and trip.css pages. */
.hs-head {
  --hs-bg: rgb(var(--g0) / 0.86);
  --hs-panel: rgb(var(--g2));
  --hs-line: rgb(var(--g5) / 0.7);
  --hs-text: rgb(var(--g10));
  --hs-muted: rgb(var(--g8));
  --hs-accent: rgb(var(--c-accent));
  --hs-accent-soft: rgb(var(--c-accent) / 0.16);
  --hs-violet: rgb(var(--c-accent));
  --hs-cyan: rgb(var(--c-accent));
  --hs-coral: rgb(var(--c-danger));
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  background: linear-gradient(90deg, rgb(var(--g1) / 0.94), rgb(var(--g2) / 0.91) 55%, rgb(var(--g2) / 0.93));
  border-bottom: 1px solid var(--hs-line);
  font-family: var(--font-ui);
  color: var(--hs-text);
  box-sizing: border-box;
}
.hs-head::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgb(var(--c-accent) / 0.76), rgb(var(--c-accent) / 0.8) 52%, rgb(var(--c-danger) / 0.65), transparent 95%);
  opacity: .72;
}
.hs-head *, .hs-head *::before, .hs-head *::after { box-sizing: border-box; }
.hs-inner {
  width: min(1280px, calc(100% - 28px));
  margin: 0 auto;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.hs-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  color: var(--hs-text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.08em;
  white-space: nowrap;
  min-height: 44px;
  padding: 6px 4px;
}
.hs-brand img { width: 30px; height: 30px; border-radius: 8px; display: block; box-shadow: 0 0 22px rgb(var(--c-accent) / 0.25); }
.hs-tabs { display: flex; align-items: center; gap: 2px; }
.hs-tabs > a, .hs-more > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 12px;
  color: var(--hs-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}
.hs-tabs > a:hover, .hs-more > summary:hover, .hs-more[open] > summary { color: var(--hs-text); background: rgb(var(--g11) / 0.07); }
.hs-tabs > a[aria-current="page"], .hs-more > summary[aria-current="page"] {
  color: rgb(var(--g11));
  background: linear-gradient(135deg, rgb(var(--c-accent) / 0.16), rgb(var(--c-accent) / 0.18));
  box-shadow: inset 0 0 0 1px rgb(var(--c-accent) / 0.14);
}
.hs-ext { opacity: .7; font-size: .85em; margin-left: 2px; }
.hs-cta.hs-cta { color: rgb(var(--g11)); background: var(--hs-accent); }
.hs-cta.hs-cta:hover { background: rgb(var(--c-accent)); }
.hs-more { position: relative; }
.hs-more > summary, .hs-mobile > summary { list-style: none; }
.hs-more > summary::-webkit-details-marker, .hs-mobile > summary::-webkit-details-marker { display: none; }
.hs-more > summary::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .15s ease;
}
.hs-more[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.hs-drop {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 270px;
  padding: 8px;
  display: grid;
  gap: 2px;
  background: linear-gradient(145deg, rgb(var(--g3) / 0.98), rgb(var(--g2) / 0.98));
  border: 1px solid var(--hs-line);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgb(var(--g0) / 0.5);
}
.hs-drop a, .hs-sheet a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 12px;
  color: var(--hs-text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 550;
}
.hs-drop a small, .hs-sheet a small { color: var(--hs-muted); font-size: 12px; font-weight: 450; }
.hs-drop a:hover, .hs-sheet a:hover { background: rgb(var(--g11) / 0.06); }
.hs-drop a[aria-current="page"], .hs-sheet a[aria-current="page"] { background: var(--hs-accent-soft); }
.hs-head a:focus-visible, .hs-head summary:focus-visible { outline: 2px solid var(--hs-accent); outline-offset: 2px; }

/* phone and small tablet: one Menu button that opens a full-width sheet */
.hs-mobile { display: none; }
@media (max-width: 900px) {
  .hs-tabs { display: none; }
  .hs-mobile { display: block; }
  .hs-mobile > summary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--hs-line);
    border-radius: 12px;
    color: var(--hs-text);
    font-size: 14px;
    font-weight: 650;
    cursor: pointer;
  }
  .hs-burger, .hs-burger::before, .hs-burger::after {
    display: block;
    width: 16px;
    height: 2px;
    border-radius: 4px;
    background: currentColor;
    transition: transform .2s ease, opacity .2s ease;
  }
  .hs-burger { position: relative; }
  .hs-burger::before, .hs-burger::after { content: ""; position: absolute; left: 0; }
  .hs-burger::before { top: -5px; }
  .hs-burger::after { top: 5px; }
  .hs-mobile[open] .hs-burger { background: transparent; }
  .hs-mobile[open] .hs-burger::before { transform: translateY(5px) rotate(45deg); }
  .hs-mobile[open] .hs-burger::after { transform: translateY(-5px) rotate(-45deg); }
  .hs-sheet {
    position: fixed;
    left: 0;
    right: 0;
    top: 58px;
    max-height: calc(100dvh - 58px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px 16px calc(36px + env(safe-area-inset-bottom, 0px));
    background:
      radial-gradient(70% 55% at 90% 0%, rgb(var(--c-accent) / 0.13), transparent 70%),
      radial-gradient(70% 55% at 0% 100%, rgb(var(--c-accent) / 0.09), transparent 72%),
      rgb(var(--g1));
    border-bottom: 1px solid var(--hs-line);
    box-shadow: 0 30px 60px rgb(var(--g0) / 0.6);
  }
  .hs-sheet h2 {
    margin: 16px 12px 6px;
    color: var(--hs-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .hs-sheet a { min-height: 48px; font-size: 16px; }
  .hs-sheet a small { min-width: 0; max-width: 48%; overflow-wrap: anywhere; text-align: right; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-head * { transition: none !important; }
}

/* @source radio-dock.css */
/* A self-contained Signal Dock; no layout ownership over HAL's chat shell. */
.hal-dock {
  --dock-ink: rgb(var(--g10));
  --dock-muted: rgb(var(--g8));
  --dock-line: rgb(var(--g6));
  position: fixed;
  z-index: 34;
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  width: min(390px, calc(100vw - 24px));
  font: 15px/1.45 system-ui,sans-serif;
  color: var(--dock-ink);
  text-align: left;
  color-scheme: dark;
  pointer-events: none;
}
.hal-dock-toggle, .hal-dock-panel { pointer-events: auto; }
.hal-dock *, .hal-dock *::before, .hal-dock *::after { box-sizing: border-box; }
.hal-dock[hidden], .hal-dock [hidden] { display: none !important; }
body[data-hal-chat-shell] .hal-dock {
  bottom: var(--dock-chat-bottom, calc(var(--composer-h, 64px) + var(--vv-bottom-inset, 0px) + 10px));
}
body[data-hal-dock-page]:not([data-hal-chat-shell]) {
  padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}
.hal-dock button, .hal-dock a, .hal-dock select {
  min-height: 44px;
  min-width: 44px;
  font: inherit;
}
.hal-dock button { cursor: pointer; }
.hal-dock button:disabled { cursor: default; opacity: .75; }
.hal-dock :is(button, a, select, textarea):focus-visible { outline: 3px solid rgb(var(--c-accent)); outline-offset: 3px; }
.hal-dock-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  border: 1px solid rgb(var(--c-accent));
  border-radius: 16px;
  padding: 8px 14px;
  background: linear-gradient(115deg, rgb(var(--g4)), rgb(var(--g4)) 65%, rgb(var(--g5)));
  color: var(--dock-ink);
  box-shadow: 0 5px 20px rgb(var(--g0) / 0.4);
}
.hal-dock-toggle-title { font-weight: 650; }
.hal-dock-toggle-note { font-size: 12px; color: rgb(var(--g9)); }
.hal-dock-mark { font-size: 24px; color: rgb(var(--c-accent)); }
.hal-dock-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  width: 100%;
  max-height: calc(100dvh - 112px);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid rgb(var(--c-accent));
  border-radius: 22px;
  background: radial-gradient(ellipse at top left, rgb(var(--g5)) 0, transparent 65%), rgb(var(--g3));
  box-shadow: 0 18px 60px rgb(var(--g0) / 0.533);
}
body[data-hal-chat-shell] .hal-dock-panel {
  max-height: var(--dock-chat-panel-height, calc(var(--app-height, 100dvh) - var(--composer-h, 64px) - var(--header-h-current, 64px) - 78px));
}
.hal-dock-head { display: flex; align-items: center; gap: 8px; padding: 17px 18px 11px; }
.hal-dock-kicker { font-size: 11px; font-weight: 750; letter-spacing: .13em; color: rgb(var(--c-accent)); }
.hal-dock-title { margin: 3px 0 0; font-size: 20px; line-height: 1.2; font-weight: 650; }
.hal-dock-close { flex: none; margin-left: auto; color: var(--dock-muted); font-size: 25px !important; border: 0; border-radius: 12px; background: rgb(var(--g11) / 0.031); }
.hal-dock-views { display: flex; gap: 4px; padding: 0 14px 12px; border-bottom: 1px solid var(--dock-line); }
.hal-dock-views button { flex: 1; border: 0; border-radius: 12px; background: rgb(var(--g11) / 0.027); color: var(--dock-muted); padding: 8px 6px; font-size: 14px; }
.hal-dock-views button[aria-pressed="true"] { background: rgb(var(--g9)); color: rgb(var(--g4)); font-weight: 650; }
.hal-dock-content { padding: 16px 18px 10px; }
.hal-dock h3 { font-size: 18px; line-height: 1.25; margin: 0 0 8px; color: var(--dock-ink); }
.hal-dock p { margin: 8px 0 12px; }
.hal-dock-muted { color: var(--dock-muted); font-size: 14px; }
.hal-dock-fine { font-size: 12px; line-height: 1.5; color: var(--dock-muted); }
.hal-dock-stage { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.hal-dock-stage-copy { min-width: 0; }
.hal-dock-badge { display: inline-block; font-size: 11px; color: rgb(var(--c-accent)); border: 1px solid rgb(var(--g6)); border-radius: 22px; padding: 3px 8px; margin-bottom: 8px; }
.hal-dock-station-state { font-size: 12px; color: rgb(var(--c-accent)); }
.hal-dock-orbit { position: relative; flex: none; width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(circle, rgb(var(--c-accent)), rgb(var(--g4)) 65%); }
.hal-dock-orbit-ring { position: absolute; inset: 3px; border-radius: 50%; border: 2px solid rgb(var(--c-accent)); border-left-color: rgb(var(--c-ok)); border-bottom-color: transparent; animation: hal-dock-orbit 16s linear infinite; animation-play-state: paused; }
.hal-dock-orbit-core { position: absolute; inset: 20px; display: grid; place-items: center; border: 1px solid rgb(var(--c-accent)); border-radius: 50%; color: rgb(var(--g10)); font-weight: 750; font-size: 24px; }
.hal-dock[data-motion="playing"] .hal-dock-orbit-ring { animation-play-state: running; }
@keyframes hal-dock-orbit { to { transform: rotate(360deg); } }
.hal-dock-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.hal-dock-button, .hal-dock-link { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--dock-line); border-radius: 12px; padding: 8px 11px; color: rgb(var(--g10)); background: rgb(var(--g4)); text-decoration: none; font-size: 13px !important; }
.hal-dock :is(.hal-dock-button, .hal-dock-link, .hal-dock-close):hover { background: rgb(var(--g5)); color: rgb(var(--g11)); text-decoration: none; }
.hal-dock-label { display: block; font-size: 13px; margin: 12px 0 6px; font-weight: 600; }
.hal-dock-draft, .hal-dock-select { width: 100%; border: 1px solid rgb(var(--g6)); border-radius: 12px; padding: 10px; color: rgb(var(--g11)); background: rgb(var(--g2)); font: 16px/1.4 system-ui, sans-serif; }
.hal-dock-draft { min-height: 110px; max-height: 230px; resize: vertical; }
.hal-dock-draft::placeholder { color: rgb(var(--g7)); }
.hal-dock-count { display: block; text-align: right; font-size: 11px; color: var(--dock-muted); }
.hal-dock-foot { padding: 7px 18px 13px; border-top: 1px solid var(--dock-line); }
.hal-dock-status:empty { display: none; }
.hal-dock-status { color: rgb(var(--c-accent)); font-size: 13px; }
@media (max-width: 480px), (max-height: 520px) {
  .hal-dock { right: 8px; width: calc(100vw - 16px); }
  .hal-dock-toggle { min-height: 44px; padding: 6px 10px; gap: 8px; }
  .hal-dock-toggle-title { font-size: 14px; }
  .hal-dock-panel { border-radius: 16px; }
  .hal-dock-head, .hal-dock-content, .hal-dock-foot { padding-left: 14px; padding-right: 14px; }
  .hal-dock-title { font-size: 18px; }
  .hal-dock-stage { gap: 12px; }
  .hal-dock-orbit { width: 70px; height: 70px; }
  .hal-dock-orbit-core { inset: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hal-dock *, .hal-dock *::before, .hal-dock *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .hal-dock-panel, .hal-dock-toggle, .hal-dock-button, .hal-dock-link, .hal-dock-views button { border: 1px solid ButtonText; background: Canvas; color: CanvasText; box-shadow: none; }
  .hal-dock-views button[aria-pressed="true"] { outline: 2px solid Highlight; }
  .hal-dock-orbit { display: none; }
}

/* @source insight-guide.css */
/* Curated interface facts: decorative instrumentation, never activity telemetry. */
.insight-guide,
.insight-hint,
.insight-atmosphere {
  --insight-bg: rgb(var(--g3));
  --insight-panel: rgb(var(--g4));
  --insight-ink: rgb(var(--g10));
  --insight-muted: rgb(var(--g9));
  --insight-accent: rgb(var(--c-accent));
  --insight-line: rgb(var(--g7));
  box-sizing: border-box;
  color: var(--insight-ink);
  color-scheme: dark;
  font: 14px/1.45 system-ui,sans-serif;
}

.insight-atmosphere {
  --insight-edge-a: rgb(var(--c-accent) / 0.141);
  --insight-edge-b: rgb(var(--c-accent) / 0.125);
  position: fixed;
  z-index: 3;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgb(var(--c-accent) / 0.141);
  background: linear-gradient(90deg, var(--insight-edge-a), transparent 7%, transparent 93%, var(--insight-edge-b));
  box-shadow:
    inset 22px 0 46px -38px rgb(var(--c-accent) / 0.502),
    inset -22px 0 46px -38px rgb(var(--c-accent) / 0.502),
    inset 0 16px 38px -36px rgb(var(--c-accent) / 0.439);
  opacity: .72;
  pointer-events: none;
}

.insight-atmosphere::before,
.insight-atmosphere::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.insight-atmosphere::before {
  top: 0;
  left: -34vw;
  width: 34vw;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgb(var(--c-accent) / 0.722) 50%, transparent);
  box-shadow: 0 0 15px rgb(var(--c-accent) / 0.333);
}

.insight-atmosphere::after {
  top: -28vh;
  right: 0;
  width: 3px;
  height: 28vh;
  background: linear-gradient(180deg, transparent, rgb(var(--c-accent) / 0.678) 52%, transparent);
  box-shadow: 0 0 15px rgb(var(--c-accent) / 0.333);
}

.insight-atmosphere[data-motion="on"]::before { animation: insight-edge-horizontal 22s linear infinite; }
.insight-atmosphere[data-motion="on"]::after { animation: insight-edge-vertical 27s linear infinite; }

.insight-guide *,
.insight-guide *::before,
.insight-guide *::after,
.insight-hint *,
.insight-hint *::before,
.insight-hint *::after { box-sizing: border-box; }

.insight-guide [hidden],
.insight-hint[hidden] { display: none !important; }

.insight-guide {
  position: fixed;
  z-index: 36;
  left: max(12px, env(safe-area-inset-left, 0px));
  bottom: var(--insight-bottom, calc(var(--composer-h, 60px) + var(--vv-bottom-inset, 0px) + 10px));
  width: min(320px, calc(100vw - 24px));
  pointer-events: none;
}

.insight-guide button,
.insight-guide select,
.insight-hint button {
  min-width: 44px;
  min-height: 44px;
  font: inherit;
}

.insight-guide button,
.insight-guide select,
.insight-guide-panel,
.insight-hint { pointer-events: auto; }

.insight-guide :is(button, select):focus-visible, .insight-hint button:focus-visible {
  outline: 3px solid var(--insight-accent);
  outline-offset: 3px;
}

.insight-guide-trigger {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  overflow: hidden;
  border: 1px solid var(--insight-line);
  border-radius: 16px;
  padding: 7px 12px;
  background: linear-gradient(125deg, rgb(var(--g4)), rgb(var(--g4)) 70%, rgb(var(--g5)));
  box-shadow: 0 7px 24px rgb(var(--g0) / 0.467), inset 0 0 0 1px rgb(var(--g11) / 0.047);
  color: var(--insight-ink);
  cursor: pointer;
}

.insight-guide-trigger::before,
.insight-hint::before {
  content: "";
  position: absolute;
  pointer-events: none;
}

.insight-guide-trigger::before {
  z-index: -1;
  inset: 0 auto 0 -55%;
  width: 42%;
  background: linear-gradient(90deg, transparent, rgb(var(--c-accent) / 0.239), transparent);
  transform: skewX(-18deg);
}

.insight-guide[data-motion="on"] .insight-guide-trigger::before {
  animation: insight-scan 14s linear infinite;
}

.insight-guide-mark {
  color: var(--insight-accent);
  font-size: 20px;
  line-height: 1;
  text-shadow: 0 0 14px rgb(var(--c-accent) / 0.502);
}

.insight-guide-trigger-label {
  font: 700 12px/1 ui-monospace, "Cascadia Mono", "IBM Plex Mono", monospace;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.insight-guide-panel {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  width: min(320px, calc(100vw - 24px));
  max-height: min(520px, var(--insight-panel-max-height, calc(100dvh - var(--header-h-current, 58px) - var(--composer-h, 60px) - 34px)));
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--insight-line);
  border-radius: 16px;
  padding: 14px;
  background:
    linear-gradient(rgb(var(--g11) / 0.031) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--g11) / 0.031) 1px, transparent 1px),
    linear-gradient(145deg, rgb(var(--g4)), var(--insight-bg));
  background-size: 22px 22px, 22px 22px, auto;
  box-shadow: 0 22px 60px rgb(var(--g0) / 0.6);
}

.insight-guide-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.insight-guide-panel h2 {
  flex: 1;
  margin: 0;
  color: var(--insight-ink);
  font-size: 18px;
  letter-spacing: -.02em;
}

.insight-guide-close,
.insight-hint-close {
  flex: none;
  border: 1px solid var(--insight-line);
  border-radius: 12px;
  background: var(--insight-panel);
  color: var(--insight-ink);
  cursor: pointer;
}

.insight-guide-intro,
.insight-guide-status {
  margin: 10px 0;
  color: var(--insight-muted);
  font-size: 12px;
}

.insight-guide-label {
  display: block;
  margin: 12px 0 5px;
  color: var(--insight-muted);
  font-size: 12px;
  font-weight: 650;
}

.insight-guide-select {
  width: 100%;
  border: 1px solid var(--insight-line);
  border-radius: 12px;
  padding: 8px 10px;
  background: var(--insight-panel);
  color: var(--insight-ink);
}

.insight-guide-action {
  border: 1px solid var(--insight-line);
  border-radius: 12px;
  padding: 8px 11px;
  background: linear-gradient(135deg, rgb(var(--g5)), rgb(var(--g4)));
  color: var(--insight-ink);
  cursor: pointer;
}

.insight-guide-select + .insight-guide-action {
  width: 100%;
  margin-top: 8px;
  border-color: rgb(var(--c-accent));
}

.insight-trail {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--insight-line);
}

.insight-trail-kicker {
  margin: 0;
  color: var(--insight-accent);
  font: 750 10px/1.3 ui-monospace, "Cascadia Mono", "IBM Plex Mono", monospace;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.insight-trail-heading {
  margin: 3px 0 0;
  color: var(--insight-ink);
  font-size: 15px;
  line-height: 1.3;
}

.insight-trail-note {
  margin: 3px 0 8px;
  color: var(--insight-muted);
  font-size: 11px;
}

.insight-trail-step {
  margin: 0;
  padding: 10px;
  border: 1px solid var(--insight-line);
  border-radius: 12px;
  background: var(--insight-panel);
}

.insight-trail-progress {
  color: var(--insight-accent);
  font: 700 10px/1.3 ui-monospace, "Cascadia Mono", "IBM Plex Mono", monospace;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.insight-trail-title {
  margin: 4px 0;
  color: var(--insight-ink);
  font-size: 14px;
  line-height: 1.35;
}

.insight-trail-copy {
  margin: 0;
  color: var(--insight-muted);
  font-size: 13px;
  line-height: 1.4;
}

.insight-trail-action {
  min-height: 44px;
  width: 100%;
  margin-bottom: 8px;
  border-color: rgb(var(--c-accent));
}

.insight-guide-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

.insight-guide-action[aria-pressed="true"] {
  border-color: rgb(var(--c-accent));
  box-shadow: inset 0 0 0 1px rgb(var(--c-accent) / 0.141);
}

.insight-guide-action:disabled {
  cursor: default;
  opacity: .78;
}

.insight-guide-reset {
  width: 100%;
  margin-top: 8px;
}

.insight-hint {
  position: fixed;
  z-index: 84;
  width: min(320px, calc(100vw - 24px));
  max-height: min(260px, calc(100dvh - 24px));
  overflow: auto;
  border: 1px solid var(--insight-line);
  border-radius: 16px;
  padding: 13px 14px 12px 17px;
  background: linear-gradient(145deg, rgb(var(--g4)), var(--insight-bg));
  box-shadow: 0 18px 48px rgb(var(--g0) / 0.6), inset 0 0 28px rgb(var(--c-accent) / 0.039);
}

.insight-hint::before {
  top: 8px;
  bottom: 8px;
  left: 5px;
  width: 2px;
  border-radius: 4px;
  background: linear-gradient(180deg, transparent, var(--insight-accent), transparent);
  background-size: 100% 220%;
}

.insight-hint[data-motion="on"]::before {
  animation: insight-signal 18s ease-in-out infinite alternate;
}

.insight-hint-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.insight-hint-kicker {
  flex: 1;
  color: var(--insight-accent);
  font: 750 11px/1.3 ui-monospace, "Cascadia Mono", "IBM Plex Mono", monospace;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.insight-hint-close {
  min-width: 44px !important;
  min-height: 44px !important;
}

.insight-hint-copy {
  margin: 8px 0;
  color: var(--insight-ink);
  font-size: 14px;
  line-height: 1.5;
}

.insight-hint-progress {
  display: block;
  color: var(--insight-muted);
  font: 11px/1.4 ui-monospace, "Cascadia Mono", "IBM Plex Mono", monospace;
}

[data-theme="light"] .insight-guide,
[data-theme="light"] .insight-hint,
[data-theme="light"] .insight-atmosphere {
  --insight-bg: rgb(var(--g10));
  --insight-panel: rgb(var(--g11));
  --insight-ink: rgb(var(--g4));
  --insight-muted: rgb(var(--g6));
  --insight-accent: rgb(var(--c-accent));
  --insight-line: rgb(var(--g6));
  color-scheme: light;
}

[data-theme="light"] .insight-atmosphere {
  --insight-edge-a: rgb(var(--c-accent) / 0.086);
  --insight-edge-b: rgb(var(--c-accent) / 0.071);
  border-color: rgb(var(--c-accent) / 0.141);
  box-shadow:
    inset 18px 0 40px -36px rgb(var(--c-accent) / 0.4),
    inset -18px 0 40px -36px rgb(var(--c-accent) / 0.333);
  opacity: .58;
}

[data-theme="light"] .insight-guide-trigger,
[data-theme="light"] .insight-guide-panel,
[data-theme="light"] .insight-hint,
[data-theme="light"] .insight-guide-action {
  background-color: var(--insight-bg);
  background-image: none;
}

[data-theme="light"] .insight-guide-trigger,
[data-theme="light"] .insight-guide-panel,
[data-theme="light"] .insight-hint { box-shadow: 0 12px 34px rgb(var(--g5) / 0.18); }

@keyframes insight-scan {
  0%, 16% { transform: translateX(-160%) skewX(-18deg); opacity: 0; }
  22%, 34% { opacity: .5; }
  45%, 100% { transform: translateX(520%) skewX(-18deg); opacity: 0; }
}

@keyframes insight-signal {
  from { background-position: 0 0; opacity: .42; }
  to { background-position: 0 100%; opacity: .82; }
}

@keyframes insight-edge-horizontal {
  0%, 8% { transform: translateX(0); opacity: 0; }
  13%, 72% { opacity: .72; }
  82%, 100% { transform: translateX(134vw); opacity: 0; }
}

@keyframes insight-edge-vertical {
  0%, 18% { transform: translateY(0); opacity: 0; }
  24%, 70% { opacity: .62; }
  82%, 100% { transform: translateY(128vh); opacity: 0; }
}

@media (max-height: 480px) {
  .insight-trail-step { padding: 6px 10px; }
}

@media (max-width: 640px) {
  .insight-guide,
  .insight-hint,
  .insight-atmosphere { display: none !important; }
}

@media (max-width: 480px) {
  .insight-guide {
    left: max(8px, env(safe-area-inset-left, 0px));
    width: calc(100vw - 16px);
  }
  .insight-guide-panel { width: calc(100vw - 16px); }
  .insight-guide-controls { grid-template-columns: 1fr; }
  .insight-hint { width: min(304px, calc(100vw - 24px)); }
}

@media (max-width: 360px) {
  .insight-guide-trigger { width: 44px; padding-inline: 6px; }
  .insight-guide-trigger-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

@media (prefers-reduced-motion: reduce) {
  .insight-guide *,
  .insight-guide *::before,
  .insight-guide *::after,
  .insight-hint,
  .insight-hint::before,
  .insight-atmosphere,
  .insight-atmosphere::before,
  .insight-atmosphere::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media (forced-colors: active) {
  .insight-guide-trigger,
  .insight-guide-panel,
  .insight-guide-action,
  .insight-guide-select,
  .insight-guide-close,
  .insight-trail-step,
  .insight-hint,
  .insight-hint-close {
    border: 1px solid ButtonText;
    background: Canvas;
    color: CanvasText;
    box-shadow: none;
  }
  .insight-guide-trigger::before,
  .insight-hint::before,
  .insight-atmosphere { display: none; }
  .insight-guide :is(button, select):focus-visible, .insight-hint button:focus-visible { outline-color: Highlight; }
}

/* ---- pg-app ---- */

/* @source hal-pro.css */
/* HAL SUPREME — Living Signal Gallery chat shell v=pro25
   Palette: midnight / signal cyan / aurora violet / cinema amber / living green
   Fonts: Inter + IBM Plex Mono · Transitions 200–300ms · prefers-reduced-motion
   Responsive: mobile flex shell v2, visualViewport, reachable drawer, no Lite chrome */

:root:where(.pg-app) {
  color-scheme: dark;
  --bg: rgb(var(--g1));
  --panel: rgb(var(--g3));
  --panel-2: rgb(var(--g2));
  --panel-3: rgb(var(--g4));
  --divider: rgb(var(--g5));
  --divider-strong: rgb(var(--g7));
  --text: rgb(var(--g10));
  --muted: rgb(var(--g8));
  --accent: rgb(var(--c-accent));
  --on-accent: rgb(var(--g2));
  --ink-on-art: rgb(var(--g10));
  --message-user-bg: rgb(var(--g2));
  --message-user-border: rgb(var(--g4));
  --message-assistant-start: rgb(var(--g3));
  --code-surface: rgb(var(--g1));
  --code-text: rgb(var(--g10));
  --inline-code-bg: rgb(var(--g0) / 0.4);
  --mode-active-desc: rgb(var(--g10) / 0.72);
  --danger-soft-text: rgb(var(--c-danger));
  --danger-soft-border: rgb(var(--c-danger) / 0.4);
  --control-track: rgb(var(--g7));
  --accent-dim: rgb(var(--c-accent) / 0.16);
  --accent-glow: rgb(var(--c-accent) / 0.35);
  --wonder-violet: rgb(var(--c-accent));
  --wonder-coral: rgb(var(--c-danger));
  --wonder-amber: rgb(var(--c-accent));
  --wonder-mint: rgb(var(--c-ok));
  --success: rgb(var(--c-ok));
  --danger: rgb(var(--c-danger));
  --radius: 12px;
  --radius-sm: 8px;
  --grid: 16px;
  --sidebar-w: clamp(220px, 22vw, 260px);
  --header-h: 58px;
  --header-pad-y: 8px;
  --composer-min: 44px;
  --composer-h: 60px;
  --app-height: 100dvh;
  --vv-bottom-inset: 0px;
  --msg-col: min(1080px, 100%);
  --bp-sidebar: 900px;
  --font: var(--font-ui);
  --mono: var(--font-mono);
  --shadow: 0 12px 40px rgb(var(--g0) / 0.55);
  --shadow-soft: 0 4px 16px rgb(var(--g0) / 0.35);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 240ms;
}

[data-theme="light"]:where(.pg-app) {
  color-scheme: light;
  --bg: rgb(var(--g10));
  --panel: rgb(var(--g11));
  --panel-2: rgb(var(--g10));
  --panel-3: rgb(var(--g10));
  --divider: rgb(var(--g9));
  --divider-strong: rgb(var(--g7));
  --text: rgb(var(--g2));
  --muted: rgb(var(--g6));
  --accent: rgb(var(--c-accent));
  --on-accent: rgb(var(--g11));
  --message-user-bg: rgb(var(--g10));
  --message-user-border: rgb(var(--g7));
  --message-assistant-start: rgb(var(--g10));
  --code-surface: rgb(var(--g10));
  --code-text: rgb(var(--g2));
  --inline-code-bg: rgb(var(--c-accent) / 0.1);
  --mode-active-desc: rgb(var(--g6));
  --danger-soft-text: rgb(var(--c-danger));
  --danger-soft-border: rgb(var(--c-danger));
  --control-track: rgb(var(--g7));
  --accent-dim: rgb(var(--c-accent) / 0.1);
  --accent-glow: rgb(var(--c-accent) / 0.22);
  --shadow: 0 12px 32px rgb(var(--g0) / 0.1);
  --shadow-soft: 0 4px 12px rgb(var(--g0) / 0.06);
}

:where(.pg-app) *,:where(.pg-app) *::before,:where(.pg-app) *::after { box-sizing: border-box; }
html:where(.pg-app) {
  height: 100%;
  height: 100svh;
  height: 100dvh;
  overflow: hidden;
}
:where(.pg-app) body {
  margin: 0;
  min-height: 100%;
  min-height: 100svh;
  min-height: 100dvh;
  height: 100%;
  height: 100svh;
  height: 100dvh;
  max-height: 100dvh;
  max-width: 100vw;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  background:
    radial-gradient(80% 90% at 75% 10%, rgb(var(--c-accent) / 0.1), transparent 62%),
    radial-gradient(70% 80% at 10% 90%, rgb(var(--c-ok) / 0.07), transparent 58%),
    var(--bg);
  color: var(--text);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:where(.pg-app) button,:where(.pg-app) textarea,:where(.pg-app) input { font: inherit; color: inherit; }
:where(.pg-app) button { cursor: pointer; border: none; background: none; }
:where(.pg-app) a { color: var(--accent); text-decoration: none; }
:where(.pg-app) a:hover { text-decoration: underline; }
:where(.pg-app) :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:where(.pg-app) .skip-link {
  position: fixed;
  z-index: 200;
  top: 8px;
  left: 8px;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 12px;
  color: rgb(var(--g1));
  background: rgb(var(--c-accent));
  font-weight: 800;
  transform: translateY(-140%);
  transition: transform var(--dur) var(--ease);
}
:where(.pg-app) .skip-link:focus { transform: translateY(0); }

/* ——— Ambient grain + soft vignette (CSS only, GPU-cheap) ——— */

:where(.pg-app) .app {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  width: 100%;
  max-width: 100vw;
  height: 100%;
  height: 100svh;
  height: 100dvh;
  min-height: 100svh;
  min-height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

/* ——— Header ——— */
:where(.pg-app) .header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  min-height: var(--header-h);
  min-width: 0;
  width: 100%;
  max-width: 100%;
  padding: var(--header-pad-y) var(--grid);
  background: color-mix(in srgb, var(--panel-2) 88%, transparent);
  border-bottom: 1px solid var(--divider);
  z-index: 50;
  overflow: visible;
}

:where(.pg-app) .btn-menu {
  display: none;
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  align-items: center; justify-content: center;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
:where(.pg-app) .btn-menu:hover { background: var(--accent-dim); color: var(--accent); }
:where(.pg-app) .btn-menu svg { width: 20px; height: 20px; }

:where(.pg-app) .brand {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
}
:where(.pg-app) .brand-mark {
  width: 30px; height: 30px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgb(var(--c-accent) / 0.28), 0 0 20px rgb(var(--c-accent) / 0.12);
}
:where(.pg-app) .brand-name {
  font-weight: 650;
  letter-spacing: 0.04em;
  font-size: 13px;
  text-transform: uppercase;
}

/* ——— Mode control (compact trigger + popover) ——— */
:where(.pg-app) .mode-control {
  position: relative;
  margin-left: 4px;
  flex-shrink: 1;
  min-width: 0;
}

:where(.pg-app) .mode-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: min(300px, 100%);
  min-width: 0;
  width: auto;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--divider-strong);
  background: linear-gradient(180deg, var(--panel-3), var(--panel));
  box-shadow: inset 0 1px 0 rgb(var(--g11) / 0.04), 0 0 0 0 transparent;
  transition:
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    background var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
:where(.pg-app) .mode-trigger:hover {
  border-color: rgb(var(--c-accent) / 0.55);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
:where(.pg-app) .mode-trigger[aria-expanded="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim), 0 0 24px var(--accent-glow);
  background: linear-gradient(180deg, rgb(var(--c-accent) / 0.18), var(--panel));
}
:where(.pg-app) .mode-trigger-kicker {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--accent-dim);
  border: 1px solid rgb(var(--c-accent) / 0.28);
  flex-shrink: 0;
}
:where(.pg-app) .mode-trigger-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-width: 0;
  text-align: left;
}
:where(.pg-app) .mode-trigger-label {
  font-size: 14px;
  font-weight: 650;
  line-height: 1.15;
  color: var(--text);
  white-space: nowrap;
}
:where(.pg-app) .mode-trigger-desc {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
:where(.pg-app) .mode-chevron {
  color: var(--muted);
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
:where(.pg-app) .mode-trigger[aria-expanded="true"] .mode-chevron {
  transform: rotate(180deg);
  color: var(--accent);
}

:where(.pg-app) .mode-popover {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: auto;
  z-index: 40;
  width: min(360px, calc(100vw - 24px));
  min-width: 0;
  max-width: min(380px, calc(100vw - 24px));
  /* JS may set --mode-pop-left / --mode-pop-right to keep in viewport */
  transform: translateX(var(--mode-pop-shift, 0px));
}
:where(.pg-app) .mode-popover[hidden] { display: none !important; }
:where(.pg-app) .mode-popover:not([hidden]) .mode-panel {
  animation: modeIn var(--dur) var(--ease) both;
}

:where(.pg-app) .mode-panel {
  background: var(--panel);
  border: 1px solid var(--divider-strong);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
  transform-origin: top left;
}
:where(.pg-app) .mode-panel-head,:where(.pg-app) .mode-panel-foot {
  padding: 10px 14px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--panel-2);
}
:where(.pg-app) .mode-panel-foot {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  border-top: 1px solid var(--divider);
}

:where(.pg-app) .mode-options {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 6px;
  gap: 2px;
}
:where(.pg-app) .mode-option {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  text-align: left;
  color: var(--muted);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
:where(.pg-app) .mode-option:hover {
  color: var(--text);
  background: rgb(var(--g11) / 0.03);
}
:where(.pg-app) .mode-option.active {
  color: var(--text);
}
:where(.pg-app) .mode-option-icon {
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--panel-3);
  border: 1px solid var(--divider);
  font-size: 14px;
}
:where(.pg-app) .mode-option.active .mode-option-icon {
  background: var(--accent-dim);
  border-color: rgb(var(--c-accent) / 0.45);
  box-shadow: 0 0 12px var(--accent-glow);
}
:where(.pg-app) .mode-option-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
:where(.pg-app) .mode-option-label { font-weight: 650; font-size: 14px; color: inherit; }
:where(.pg-app) .mode-option-desc { font-size: 12px; color: var(--muted); }
:where(.pg-app) .mode-option.active .mode-option-desc { color: var(--mode-active-desc); }
:where(.pg-app) .mode-option-key {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  border: 1px solid var(--divider);
  border-radius: 8px;
  padding: 2px 6px;
  opacity: 0.85;
}

:where(.pg-app) .mode-indicator {
  position: absolute;
  left: 6px; right: 6px;
  height: 48px;
  top: 6px;
  border-radius: 12px;
  background: linear-gradient(90deg, rgb(var(--c-accent) / 0.22), rgb(var(--c-accent) / 0.08));
  border: 1px solid rgb(var(--c-accent) / 0.45);
  box-shadow: inset 0 0 0 1px rgb(var(--c-accent) / 0.12), 0 0 18px var(--accent-glow);
  pointer-events: none;
  z-index: 0;
  transition: transform var(--dur) var(--ease), height var(--dur) var(--ease);
  will-change: transform;
}

@keyframes modeIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes modeSheetIn {
  from { transform: translateY(108%); }
  to   { transform: translateY(0); }
}
@keyframes fadeSoft {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Mobile bottom sheet for modes */
:where(.pg-app) .mode-sheet[hidden] { display: none !important; }
:where(.pg-app) .mode-sheet {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
:where(.pg-app) .mode-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgb(var(--g0) / 0.55);
  animation: fadeSoft var(--dur) var(--ease) both;
}
:where(.pg-app) .mode-sheet-panel {
  position: relative;
  width: min(520px, 100%);
  max-width: 100vw;
  max-height: min(70dvh, 480px);
  background: var(--panel);
  border: 1px solid var(--divider-strong);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  box-shadow: var(--shadow);
  padding: 10px 12px calc(14px + env(safe-area-inset-bottom, 0px));
  animation: modeSheetIn var(--dur) var(--ease) both;
  overflow: auto;
}
:where(.pg-app) .mode-sheet-handle {
  width: 40px; height: 4px;
  border-radius: 999px;
  background: var(--divider-strong);
  margin: 4px auto 12px;
}
:where(.pg-app) .mode-sheet-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 6px 10px;
}
:where(.pg-app) .mode-sheet-options { display: flex; flex-direction: column; gap: 4px; }
:where(.pg-app) .mode-sheet .mode-option { padding: 12px; }
:where(.pg-app) .mode-sheet .mode-option.active {
  background: linear-gradient(90deg, rgb(var(--c-accent) / 0.22), rgb(var(--c-accent) / 0.08));
  border: 1px solid rgb(var(--c-accent) / 0.4);
}

:where(.pg-app) .header-spacer { flex: 1 1 8px; min-width: 4px; }

:where(.pg-app) .header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}
:where(.pg-app) .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--divider);
  background: var(--panel);
  font-family: var(--font-mono);
  min-height: 44px;
}
:where(.pg-app) .status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--muted);
}
:where(.pg-app) .status-pill.ok .status-dot { background: var(--success); box-shadow: 0 0 8px rgb(var(--c-ok) / 0.55); }
:where(.pg-app) .status-pill.busy .status-dot { background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
:where(.pg-app) .status-pill.err .status-dot { background: var(--danger); }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

:where(.pg-app) .icon-btn {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
:where(.pg-app) .icon-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:where(.pg-app) .icon-btn:hover { color: var(--accent); background: var(--accent-dim); border-color: rgb(var(--c-accent) / 0.35); }
:where(.pg-app) .icon-btn.on { color: var(--accent); background: var(--accent-dim); border-color: var(--accent); }

/* ——— Sidebar ——— */
:where(.pg-app) .sidebar {
  grid-row: 2 / -1;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  width: 100%;
  background: var(--panel-2);
  border-right: 1px solid var(--divider);
  overflow: hidden;
  z-index: 15;
}
:where(.pg-app) .sidebar::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--success) 55%, transparent 100%);
  opacity: 0.9;
  pointer-events: none;
}
:where(.pg-app) .sidebar::after {
  content: "";
  position: absolute;
  left: 2px; top: 0; bottom: 0; width: 24px;
  background: linear-gradient(90deg, rgb(var(--c-accent) / 0.06), transparent);
  pointer-events: none;
}

:where(.pg-app) .sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 12px 12px 12px 14px;
  gap: 12px;
  min-height: 0;
}

:where(.pg-app) .btn-new {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  flex: 0 0 auto;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  font-size: 13px;
  box-shadow: 0 0 0 1px rgb(var(--c-accent) / 0.35), 0 6px 18px rgb(var(--c-accent) / 0.22);
  transition: filter var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
:where(.pg-app) .btn-new:hover { filter: brightness(1.08); box-shadow: 0 0 0 2px var(--accent-dim), 0 8px 22px rgb(var(--c-accent) / 0.3); }
:where(.pg-app) .btn-new svg { width: 16px; height: 16px; }

:where(.pg-app) .history-label {
  flex: 0 0 auto;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 0 4px;
  font-weight: 600;
}

:where(.pg-app) .history-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
}
:where(.pg-app) .history-entry {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
:where(.pg-app) .history-entry:hover { background: var(--panel); }
:where(.pg-app) .history-entry.active {
  background: var(--accent-dim);
  border-color: rgb(var(--c-accent) / 0.4);
}
:where(.pg-app) .history-item {
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
  text-align: left;
  padding: 8px 10px;
  border-radius: calc(var(--radius-sm) - 4px);
  color: var(--muted);
  font-size: 13px;
  border: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--dur) var(--ease);
}
:where(.pg-app) .history-item:hover { color: var(--text); }
:where(.pg-app) .history-entry.active .history-item { color: var(--text); }
:where(.pg-app) .history-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  min-height: 40px;
  margin-right: 2px;
  border-radius: 8px;
  color: var(--muted);
  opacity: 0;
  transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
:where(.pg-app) .history-delete svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
:where(.pg-app) .history-entry:hover .history-delete,:where(.pg-app) .history-delete:focus-visible { opacity: 1; }
:where(.pg-app) .history-delete:hover { color: rgb(var(--c-danger)); background: rgb(var(--c-danger) / 0.13); }

:where(.pg-app) .sidebar-links {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--divider);
}
:where(.pg-app) .sidebar-links a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; padding-inline: 4px; color: var(--muted); }
[data-theme="light"]:where(.pg-app) :is(.mode-option-key,:where(.pg-app) .sidebar-note) { opacity: 1; }
:where(.pg-app) .sidebar-links a:hover { color: var(--accent); }
:where(.pg-app) .sidebar-note {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--muted);
  opacity: 0.8;
  font-family: var(--font-mono);
}

/* ——— Main ——— */
:where(.pg-app) .main {
  grid-row: 2;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  background: transparent;
  position: relative;
  overflow: hidden;
}

:where(.pg-app) .messages-wrap {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--grid);
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}
:where(.pg-app) .messages {
  width: 100%;
  max-width: var(--msg-col);
  margin: 0 auto;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 8px;
  min-width: 0;
}

:where(.pg-app) .static-welcome {
  --accent: rgb(var(--c-accent));
  position: relative;
  width: 100%;
  padding: clamp(18px, 2.4vw, 30px);
  overflow: hidden;
  border: 1px solid rgb(var(--c-accent) / 0.22);
  border-radius: 22px;
  background: linear-gradient(125deg, rgb(var(--g2) / 0.96), rgb(var(--g3) / 0.82) 52%, rgb(var(--g4) / 0.88));
  box-shadow: 0 36px 100px rgb(var(--g0) / 0.38), inset 0 1px rgb(var(--g11) / 0.06);
}
:where(.pg-app) .static-welcome h1 { margin: 0 0 14px; font-size: clamp(1.85rem, 4vw, 3.65rem); line-height: 1.02; letter-spacing: -.055em; text-wrap: balance; color: var(--ink-on-art); }
:where(.pg-app) .static-welcome h1 em { color: transparent; background: linear-gradient(105deg, rgb(var(--c-accent)) 5%, rgb(var(--c-accent)) 44%, rgb(var(--c-danger)) 82%, rgb(var(--c-accent))); -webkit-background-clip: text; background-clip: text; font-style: normal; }
:where(.pg-app) .static-welcome p { max-width: 690px; margin: 0 0 22px; color: rgb(var(--g9)); font-size: clamp(15px, 1.8vw, 18px); }
:where(.pg-app) .static-welcome nav { display: flex; flex-wrap: wrap; gap: 10px; }
:where(.pg-app) .static-welcome nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 16px; border: 1px solid rgb(var(--c-accent) / 0.28); border-radius: 999px; color: rgb(var(--g10)); background: rgb(var(--g2) / 0.72); font-weight: 760; text-decoration: none; }
:where(.pg-app) .static-welcome nav a:hover { border-color: var(--accent); transform: translateY(-1px); }

:where(.pg-app) .msg {
  width: min(820px, 100%);
  align-self: center;
}

:where(.pg-app) .empty {
  position: relative;
  width: 100%;
  text-align: left;
  padding: 8px 0 16px;
  color: var(--muted);
}
:where(.pg-app) .empty h1 {
  max-width: 760px;
  margin: 0 auto 14px;
  font-size: clamp(1.85rem, 4vw, 3.65rem);
  font-weight: 780;
  line-height: 1.02;
  color: var(--ink-on-art);
  letter-spacing: -0.065em;
  text-wrap: balance;
}
:where(.pg-app) .empty h1 em {
  color: transparent;
  background: linear-gradient(105deg, rgb(var(--c-accent)) 5%, rgb(var(--c-accent)) 44%, rgb(var(--c-danger)) 82%, rgb(var(--c-accent)));
  -webkit-background-clip: text;
  background-clip: text;
  font-style: normal;
}
:where(.pg-app) .empty p {
  max-width: 690px;
  margin: 0 auto 16px;
  color: rgb(var(--g9));
  font-size: clamp(14px, 1.3vw, 16px);
}
:where(.pg-app) .empty-kicker {
  display: block;
  max-width: 760px;
  margin: 0 auto 10px;
  color: rgb(var(--c-accent));
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

:where(.pg-app) .signal-portal {
  /* This art island stays cinematic and dark in either application theme. */
  --accent: rgb(var(--c-accent));
  position: relative;
  isolation: isolate;
  padding: clamp(18px, 2.4vw, 30px);
  overflow: hidden;
  border: 1px solid rgb(var(--c-accent) / 0.22);
  border-radius: 22px;
  background:
    linear-gradient(125deg, rgb(var(--g2) / 0.96), rgb(var(--g3) / 0.82) 52%, rgb(var(--g4) / 0.88)),
    var(--panel-2);
  box-shadow: 0 36px 100px rgb(var(--g0) / 0.38), inset 0 1px rgb(var(--g11) / 0.06);
}
:where(.pg-app) .signal-portal::before,:where(.pg-app) .signal-portal::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 340px;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(12px);
  opacity: .62;
}
:where(.pg-app) .signal-portal::before {
  top: -190px;
  right: -70px;
  background: radial-gradient(circle, rgb(var(--c-accent) / 0.42), rgb(var(--c-accent) / 0.14) 48%, transparent 70%);
}
:where(.pg-app) .signal-portal::after {
  bottom: -230px;
  left: 26%;
  background: radial-gradient(circle, rgb(var(--c-danger) / 0.32), rgb(var(--c-accent) / 0.1) 48%, transparent 70%);
}
:where(.pg-app) .portal-story { position: relative; z-index: 2; }
:where(.pg-app) .portal-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
:where(.pg-app) .portal-toolbar .empty-kicker { flex: 1; min-width: 0; margin: 0; font-size: clamp(10px, 1vw, 12px); }
:where(.pg-app) .portal-motion-button { flex: 0 0 auto; min-width: 82px; min-height: 44px; padding: 0 9px; border: 1px solid rgb(var(--c-accent) / 0.3); border-radius: 16px; background: rgb(var(--g1) / 0.88); color: rgb(var(--c-accent)); font: 600 12px var(--mono); cursor: pointer; }
:where(.pg-app) .portal-motion-button:hover { border-color: var(--accent); }
:where(.pg-app) .signal-portal::before { animation: portal-aurora 8s ease-in-out infinite alternate; }
:where(.pg-app) .signal-portal::after { animation: portal-aurora 11s ease-in-out infinite alternate-reverse; }
:where(.pg-app) .signal-portal[data-motion="paused"] *,:where(.pg-app) .signal-portal[data-motion="paused"]::before,:where(.pg-app) .signal-portal[data-motion="paused"]::after,:where(.pg-app) .signal-portal[data-visibility="hidden"] *,:where(.pg-app) .signal-portal[data-visibility="hidden"]::before,:where(.pg-app) .signal-portal[data-visibility="hidden"]::after { animation-play-state: paused !important; }
@keyframes portal-aurora { to { transform: translate(-70px, 65px) scale(1.28); opacity: .9; } }

:where(.pg-app) .portal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 760px;
  margin: 0 auto;
}
:where(.pg-app) .portal-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid rgb(var(--c-accent) / 0.28);
  border-radius: 999px;
  color: rgb(var(--g10));
  background: rgb(var(--g2) / 0.72);
  box-shadow: inset 0 1px rgb(var(--g11) / 0.05);
  font-weight: 760;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
:where(.pg-app) .portal-cta span { margin-right: 8px; color: rgb(var(--c-accent)); }
:where(.pg-app) .portal-cta.primary {
  border-color: transparent;
  color: rgb(var(--g2));
  background: linear-gradient(105deg, rgb(var(--c-accent)), rgb(var(--c-ok)));
  box-shadow: 0 12px 32px rgb(var(--c-accent) / 0.2);
}
:where(.pg-app) .portal-cta:hover { transform: translateY(-2px); border-color: rgb(var(--c-accent) / 0.72); box-shadow: 0 12px 34px rgb(var(--c-accent) / 0.14); }
:where(.pg-app) .portal-cta:focus-visible { outline: 3px solid rgb(var(--c-warn)); outline-offset: 3px; }

:where(.pg-app) .mode-lab {
  display: grid;
  grid-template-columns: minmax(170px, .72fr) minmax(0, 2fr);
  align-items: center;
  gap: 18px;
  max-width: 860px;
  margin: 16px auto 0;
  padding: 10px;
  border: 1px solid rgb(var(--c-accent) / 0.17);
  border-radius: 22px;
  background: linear-gradient(110deg, rgb(var(--g2) / 0.82), rgb(var(--g3) / 0.64));
}
:where(.pg-app) .mode-lab > div:first-child { padding: 4px 6px; }
:where(.pg-app) .mode-lab-kicker {
  display: block;
  margin-bottom: 5px;
  color: rgb(var(--c-accent));
  font: 750 10px/1.2 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
:where(.pg-app) .mode-lab strong { display: block; color: rgb(var(--g10)); font-size: 14px; line-height: 1.4; }
:where(.pg-app) .mode-jumps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
:where(.pg-app) .mode-jumps button {
  min-height: 64px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 7px;
  padding: 9px 10px;
  border: 1px solid rgb(var(--g11) / 0.09);
  border-radius: 12px;
  color: rgb(var(--g10));
  background: rgb(var(--g11) / 0.035);
  text-align: left;
  font-weight: 780;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
:where(.pg-app) .mode-jumps button > span { grid-row: 1 / 3; color: rgb(var(--c-accent)); font-size: 17px; }
:where(.pg-app) .mode-jumps button small { color: rgb(var(--g8)); font-size: 10px; font-weight: 600; }
:where(.pg-app) .mode-jumps button:hover { transform: translateY(-2px); border-color: rgb(var(--c-accent) / 0.48); }
:where(.pg-app) .mode-jumps button.active {
  border-color: rgb(var(--c-accent) / 0.7);
  background: linear-gradient(145deg, rgb(var(--c-accent) / 0.16), rgb(var(--c-accent) / 0.09));
  box-shadow: 0 0 0 2px rgb(var(--c-accent) / 0.07), inset 0 1px rgb(var(--g11) / 0.09);
}
:where(.pg-app) .mode-jumps button:focus-visible { outline: 3px solid rgb(var(--c-warn)); outline-offset: 2px; }

:where(.pg-app) .portal-paths {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-width: 860px;
  margin: 16px auto 0;
}
:where(.pg-app) .portal-path {
  position: relative;
  min-height: 86px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 3px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgb(var(--g11) / 0.12);
  border-radius: 16px;
  color: var(--ink-on-art);
  background: rgb(var(--g11) / 0.045);
  text-decoration: none;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
:where(.pg-app) .portal-path > span { position: absolute; top: 14px; right: 16px; color: rgb(var(--g10)); font-size: 24px; }
:where(.pg-app) .portal-path b { font-size: 17px; }
:where(.pg-app) .portal-path small { color: rgb(var(--g8)); font-size: 12px; }
:where(.pg-app) .portal-path.watch { background: linear-gradient(145deg, rgb(var(--c-accent) / 0.13), rgb(var(--g11) / 0.035)); }
:where(.pg-app) .portal-path.create { background: linear-gradient(145deg, rgb(var(--c-accent) / 0.16), rgb(var(--g11) / 0.035)); }
:where(.pg-app) .portal-path.build { background: linear-gradient(145deg, rgb(var(--c-danger) / 0.13), rgb(var(--g11) / 0.035)); }
:where(.pg-app) .portal-path.proof { background: linear-gradient(145deg, rgb(var(--c-ok) / 0.13), rgb(var(--g11) / 0.035)); }
:where(.pg-app) .portal-path:hover { transform: translateY(-4px); border-color: rgb(var(--c-accent) / 0.52); text-decoration: none; background-color: rgb(var(--g11) / 0.085); }
:where(.pg-app) .portal-path:focus-visible { outline: 3px solid rgb(var(--c-accent)); outline-offset: 3px; }
:where(.pg-app) .empty .generation-note {
  max-width: 860px;
  margin: 14px auto -4px;
  color: rgb(var(--g8));
  font-size: 11px;
  text-align: center;
}
:where(.pg-app) .generation-note a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 3px; color: rgb(var(--c-accent)); }
:where(.pg-app) .prompt-lab { display: flex; align-items: center; gap: 12px; margin: 24px 4px 12px; color: var(--muted); font-size: 12px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
:where(.pg-app) .prompt-lab::before,:where(.pg-app) .prompt-lab::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, rgb(var(--c-accent) / 0.34)); }
:where(.pg-app) .prompt-lab::after { transform: scaleX(-1); }

@keyframes portal-drift { to { transform: rotate(360deg); } }

:where(.pg-app) .product-ribbon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 9px 16px;
  border-bottom: 1px solid rgb(var(--c-accent) / 0.24);
  background: linear-gradient(90deg, rgb(var(--c-accent) / 0.12), rgb(var(--c-ok) / 0.055));
}
:where(.pg-app) .product-ribbon-copy {
  display: flex;
  align-items: baseline;
  flex: 1 1 auto;
  min-width: 0;
  gap: 10px;
}
:where(.pg-app) .product-ribbon-copy strong {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 12px;
}
:where(.pg-app) .product-ribbon-copy span {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:where(.pg-app) .product-ribbon > a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid rgb(var(--c-accent) / 0.42);
  border-radius: var(--radius-sm);
  color: var(--accent);
  background: rgb(var(--c-accent) / 0.13);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
}
:where(.pg-app) .product-ribbon > a:hover { border-color: var(--accent); background: rgb(var(--c-accent) / 0.2); }
:where(.pg-app) .product-ribbon-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
}
:where(.pg-app) .radio-live-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid rgb(var(--c-accent) / 0.46);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: linear-gradient(120deg, rgb(var(--c-accent) / 0.19), rgb(var(--c-ok) / 0.12));
  box-shadow: inset 0 0 18px rgb(var(--c-accent) / 0.05);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  text-decoration: none;
}
:where(.pg-app) .radio-live-link:hover {
  border-color: var(--accent);
  background: linear-gradient(120deg, rgb(var(--c-accent) / 0.28), rgb(var(--c-ok) / 0.18));
  text-decoration: none;
}
:where(.pg-app) .radio-live-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: rgb(var(--c-danger));
  box-shadow: 0 0 0 4px rgb(var(--c-danger) / 0.13), 0 0 14px rgb(var(--c-danger) / 0.72);
}
:where(.pg-app) .empty-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: -8px 0 20px;
}
:where(.pg-app) .empty-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgb(var(--c-accent) / 0.42);
  border-radius: var(--radius-sm);
  color: var(--accent);
  background: var(--accent-dim);
  text-decoration: none;
  font-size: 13px;
  font-weight: 650;
}
:where(.pg-app) .empty-actions a + a {
  border-color: var(--divider);
  color: var(--muted);
  background: transparent;
}
:where(.pg-app) .empty-actions a:hover { color: var(--accent); border-color: var(--accent); }
:where(.pg-app) .starters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
:where(.pg-app) .starter {
  min-height: 70px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgb(var(--c-accent) / 0.22);
  background: linear-gradient(145deg, rgb(var(--g4) / 0.9), rgb(var(--g2) / 0.88));
  color: var(--ink-on-art);
  font-size: 13px;
  max-width: 280px;
  text-align: left;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
:where(.pg-app) .starter:hover {
  border-color: rgb(var(--c-accent));
  box-shadow: 0 0 0 3px rgb(var(--c-accent) / 0.1);
  transform: translateY(-2px);
}
:where(.pg-app) .starter:focus-visible { outline: 3px solid rgb(var(--c-accent)); outline-offset: 3px; }
[data-theme="light"]:where(.pg-app) .starter:focus-visible {
  outline-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(var(--c-accent));
}

:where(.pg-app) .msg {
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: fadeIn var(--dur) var(--ease);
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
:where(.pg-app) .msg-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}
:where(.pg-app) .msg-role { font-weight: 650; color: var(--muted); letter-spacing: 0.02em; }
:where(.pg-app) .msg.user .msg-role { color: var(--text); }
:where(.pg-app) .msg.assistant .msg-role { color: var(--accent); }

:where(.pg-app) .msg-bubble {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--divider);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.55;
  box-shadow: var(--shadow-soft);
}
:where(.pg-app) .msg.user .msg-bubble {
  background: var(--message-user-bg);
  border-color: var(--message-user-border);
}
:where(.pg-app) .msg.assistant .msg-bubble {
  border-left: 2px solid var(--accent);
  background: linear-gradient(180deg, var(--message-assistant-start), var(--panel));
}
:where(.pg-app) .msg.error .msg-bubble {
  background: rgb(var(--c-danger) / 0.12);
  border-color: var(--danger-soft-border);
  color: var(--danger-soft-text);
}
:where(.pg-app) .msg-attachment {
  display: flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  max-width: 100%;
  margin-top: 9px;
  padding: 6px 9px;
  border: 1px solid var(--divider-strong);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.35;
}
:where(.pg-app) .msg-attachment-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:where(.pg-app) .msg-attachment-size { flex: 0 0 auto; opacity: 0.78; }

:where(.pg-app) .msg-bubble.md { white-space: normal; }
:where(.pg-app) .msg-bubble.md p { margin: 0 0 0.75em; }
:where(.pg-app) .msg-bubble.md p:last-child { margin-bottom: 0; }
:where(.pg-app) .msg-bubble.md ul,:where(.pg-app) .msg-bubble.md ol { margin: 0 0 0.75em; padding-left: 1.4em; }
:where(.pg-app) .msg-bubble.md code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--inline-code-bg);
  padding: 1px 5px;
  border-radius: 4px;
}
:where(.pg-app) .msg-bubble.md pre {
  position: relative;
  margin: 0.75em 0;
  padding: 12px 14px;
  background: var(--code-surface);
  color: var(--code-text);
  border: 1px solid var(--divider-strong);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}
:where(.pg-app) .msg-bubble.md pre code {
  background: none;
  padding: 0;
  font-size: 13px;
  line-height: 1.45;
}
:where(.pg-app) .msg-bubble.md a { color: var(--accent); }
:where(.pg-app) .msg-bubble.md blockquote {
  margin: 0.75em 0;
  padding-left: 12px;
  border-left: 3px solid var(--accent);
  color: var(--muted);
}
:where(.pg-app) .msg-bubble.md img,:where(.pg-app) .msg-bubble.md video,:where(.pg-app) .msg-bubble img,:where(.pg-app) .msg-bubble video {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  margin: 8px 0;
}
:where(.pg-app) .msg-bubble pre,:where(.pg-app) .msg-bubble.md pre {
  max-width: 100%;
  overflow-x: auto;
}

:where(.pg-app) .code-copy {
  position: absolute;
  top: 8px; right: 8px;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--panel);
  border: 1px solid var(--divider);
  color: var(--muted);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
:where(.pg-app) .code-copy:hover { color: var(--accent); border-color: var(--accent); }

:where(.pg-app) .msg-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
:where(.pg-app) .chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid rgb(var(--c-accent) / 0.35);
  font-family: var(--font-mono);
}
:where(.pg-app) .btn-copy-msg {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 8px;
  color: var(--muted);
  border: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
:where(.pg-app) .btn-copy-msg:hover { color: var(--accent); border-color: var(--divider); }

:where(.pg-app) .typing {
  display: inline-flex;
  gap: 4px;
  padding: 4px 0;
}
:where(.pg-app) .typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 1s ease-in-out infinite;
}
:where(.pg-app) .typing span:nth-child(2) { animation-delay: 0.15s; }
:where(.pg-app) .typing span:nth-child(3) { animation-delay: 0.3s; }

:where(.pg-app) .scroll-bottom {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--divider);
  color: var(--muted);
  font-size: 12px;
  box-shadow: var(--shadow-soft);
  display: none;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
:where(.pg-app) .scroll-bottom.show { display: inline-flex; }
:where(.pg-app) .scroll-bottom:hover { color: var(--accent); border-color: var(--accent); }

/* ——— Composer (flush, never permanently disabled) ——— */
:where(.pg-app) .composer {
  grid-column: 2;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border-top: 1px solid var(--divider);
  background: color-mix(in srgb, var(--bg) 92%, rgb(var(--g0)));
  padding: 8px var(--grid) env(safe-area-inset-bottom, 0px);
  z-index: 20;
  flex-shrink: 0;
}
:where(.pg-app) .composer-inner {
  width: 100%;
  max-width: var(--msg-col);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
:where(.pg-app) .attachment-preview[hidden],:where(.pg-app) .btn-attach[hidden] { display: none !important; }
:where(.pg-app) .attachment-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--divider-strong);
  border-radius: 12px;
  background: var(--panel);
  color: var(--muted);
  box-shadow: var(--shadow-soft);
  font-size: 12px;
}
:where(.pg-app) .attachment-preview-icon {
  flex: 0 0 auto;
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: 700;
}
:where(.pg-app) .attachment-preview-copy {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}
:where(.pg-app) .attachment-preview-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-weight: 650;
}
:where(.pg-app) .attachment-preview-copy span { flex: 0 0 auto; }
:where(.pg-app) .btn-remove-attachment {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 4px 8px;
  border: 1px solid var(--divider-strong);
  border-radius: 8px;
  color: var(--muted);
  background: var(--panel-2);
  font-size: 11px;
}
:where(.pg-app) .btn-remove-attachment:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
:where(.pg-app) .composer-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 6px;
  border-radius: 16px;
  border: 1px solid var(--divider-strong);
  background: var(--panel);
  box-shadow: inset 0 1px 0 rgb(var(--g11) / 0.03), var(--shadow-soft);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  min-width: 0;
  width: 100%;
}
:where(.pg-app) .composer-row:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent), var(--shadow-soft);
}
:where(.pg-app) #composer-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  min-height: var(--composer-min);
  max-height: min(140px, 30dvh);
  resize: none;
  padding: 14px 12px;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: var(--text);
  line-height: 1.45;
}
:where(.pg-app) #composer-input:focus { outline: none; }
:where(.pg-app) #composer-input::placeholder { color: var(--muted); }

:where(.pg-app) .btn-attach {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--composer-min);
  width: var(--composer-min);
  height: var(--composer-min);
  border: 1px solid var(--divider-strong);
  border-radius: 12px;
  background: var(--panel-2);
  color: var(--muted);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
:where(.pg-app) .btn-attach svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
:where(.pg-app) .btn-attach:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
:where(.pg-app) .btn-attach:disabled,:where(.pg-app) .btn-remove-attachment:disabled { opacity: 0.45; cursor: not-allowed; }

:where(.pg-app) .btn-stop,:where(.pg-app) .btn-send {
  height: var(--composer-min);
  min-width: clamp(56px, 18vw, 72px);
  padding: 0 clamp(10px, 2.5vw, 16px);
  border-radius: 12px;
  font-weight: 650;
  font-size: 14px;
  flex-shrink: 0;
  transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
:where(.pg-app) .btn-send {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 800;
  box-shadow: 0 6px 16px rgb(var(--c-accent) / 0.28);
}
:where(.pg-app) .btn-send:hover:not(:disabled) { filter: brightness(1.08); }
:where(.pg-app) .btn-send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}
:where(.pg-app) .btn-stop {
  display: none;
  background: rgb(var(--c-danger));
  color: rgb(var(--g11));
}
:where(.pg-app) .btn-stop.on { display: inline-flex; align-items: center; justify-content: center; }

:where(.pg-app) .composer-hint { display: none !important; }
:where(.pg-app) .composer-hint-legacy {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* ——— Footer ——— */
:where(.pg-app) .footer {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 6px var(--grid) 10px;
  font-size: 11px;
  color: var(--muted);
  background: transparent;
  flex-shrink: 0;
}
:where(.pg-app) .footer a { color: var(--muted); }
:where(.pg-app) .footer a:hover { color: var(--accent); }
:where(.pg-app) .watermark {
  opacity: 0.12;
  font-weight: 650;
  letter-spacing: 0.08em;
  pointer-events: none;
  user-select: none;
}

/* ——— Modal ——— */
:where(.pg-app) .modal-root[hidden] { display: none !important; }
:where(.pg-app) .modal-root {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
:where(.pg-app) .modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgb(var(--g0) / 0.62);
  animation: fadeSoft var(--dur) var(--ease) both;
}
:where(.pg-app) .modal-card {
  position: relative;
  width: min(420px, 100%);
  background: var(--panel);
  border: 1px solid var(--divider-strong);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 20px;
  z-index: 1;
  animation: modeIn var(--dur) var(--ease) both;
}
:where(.pg-app) .modal-card h2 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 650;
}
:where(.pg-app) .setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--divider);
  font-size: 14px;
}
:where(.pg-app) .setting-row:last-of-type { border-bottom: none; }
:where(.pg-app) .modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
:where(.pg-app) .btn-secondary {
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--divider-strong);
  background: var(--panel-2);
  color: var(--text);
  font-weight: 500;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
:where(.pg-app) .btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
:where(.pg-app) .btn-danger {
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: rgb(var(--c-danger) / 0.15);
  border: 1px solid var(--danger-soft-border);
  color: var(--danger-soft-text);
  font-weight: 500;
}

:where(.pg-app) .delete-modal-card { width: min(400px, 100%); text-align: center; }
:where(.pg-app) .delete-modal-card h2 { margin-bottom: 8px; }
:where(.pg-app) .delete-modal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  border: 1px solid var(--danger-soft-border);
  border-radius: 50%;
  color: var(--danger-soft-text);
  background: rgb(var(--c-danger) / 0.1);
}
:where(.pg-app) .delete-modal-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
:where(.pg-app) .delete-modal-copy {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
:where(.pg-app) .delete-modal-card .modal-actions { justify-content: center; }

:where(.pg-app) .toggle {
  width: 40px; height: 22px;
  border-radius: 999px;
  background: var(--control-track);
  position: relative;
  border: none;
  flex-shrink: 0;
  transition: background var(--dur) var(--ease);
}
:where(.pg-app) .toggle::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgb(var(--g11));
  transition: transform var(--dur) var(--ease);
}
:where(.pg-app) .toggle.on { background: var(--accent); }
:where(.pg-app) .toggle.on::after { transform: translateX(18px); }

/* ——— Toast ——— */
:where(.pg-app) .toasts {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
:where(.pg-app) .toast {
  pointer-events: auto;
  min-width: 220px;
  max-width: 360px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--panel);
  border: 1px solid var(--divider-strong);
  box-shadow: var(--shadow);
  font-size: 13px;
  color: var(--text);
  animation: fadeIn var(--dur) var(--ease);
}
:where(.pg-app) .toast.err {
  border-color: rgb(var(--c-danger) / 0.5);
  background: rgb(var(--g3));
  color: rgb(var(--c-danger));
}
:where(.pg-app) .toast.ok { border-color: rgb(var(--c-ok) / 0.45); }

/* ——— Mid / tablet compress (before drawer) ——— */
@media (max-width: 1100px) {
  :where(.pg-app) .mode-trigger-desc { display: none; }
  :where(.pg-app) .mode-trigger { max-width: min(220px, 42vw); padding: 6px 10px; gap: 8px; }
  :where(.pg-app) .brand-name { font-size: 12px; letter-spacing: 0.03em; }
}

@media (max-width: 1024px) {
  :where(.pg-app) .status-pill .status-label { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* --- Sidebar drawer + phone layout --- */
@media (max-width: 900px) {
  /* mobile-shell-v2 */
  /* visualViewport owns the shell height; the composer stays in flex flow. */
  html:where(.pg-app) {
    height: 100%;
    height: var(--app-height, 100dvh);
  }
  :where(.pg-app) body {
    min-height: 100%;
    height: var(--app-height, 100dvh);
    max-height: var(--app-height, 100dvh);
    overflow: hidden;
  }
  :where(.pg-app) .app {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    grid-template-rows: none;
    width: 100%;
    max-width: 100vw;
    height: var(--app-height, 100dvh);
    min-height: 0;
    max-height: var(--app-height, 100dvh);
    overflow: hidden;
  }
  :where(.pg-app) .header {
    flex: 0 0 auto;
    width: 100%;
    flex-wrap: nowrap;
    min-height: var(--header-h);
    padding-top: max(var(--header-pad-y), env(safe-area-inset-top, 0px));
  }
  :where(.pg-app) .btn-menu { display: inline-flex; flex-shrink: 0; }
  :where(.pg-app) .sidebar {
    position: fixed;
    top: var(--header-h-current, var(--header-h));
    left: 0;
    bottom: calc(var(--composer-h, 60px) + var(--vv-bottom-inset, 0px));
    width: min(340px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    transform: translateX(-105%);
    transition: transform var(--dur) var(--ease);
    box-shadow: var(--shadow);
    z-index: 45;
    grid-row: auto;
  }
  :where(.pg-app) .sidebar.open { transform: translateX(0); }
  :where(.pg-app) .history-delete { opacity: 1; }
  :where(.pg-app) body[data-chat-sidebar-open="true"] :is(.hal-dock,:where(.pg-app) .insight-guide,:where(.pg-app) .insight-hint) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  :where(.pg-app) .sidebar-dim {
    display: none;
    position: fixed;
    top: var(--header-h-current, var(--header-h));
    right: 0;
    bottom: calc(var(--composer-h, 60px) + var(--vv-bottom-inset, 0px));
    left: 0;
    background: rgb(var(--g0) / 0.45);
    z-index: 40;
    pointer-events: none;
  }
  :where(.pg-app) .sidebar-dim.on {
    display: block;
    pointer-events: auto;
  }
  :where(.pg-app) .main {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    grid-row: auto;
    padding-bottom: 0;
  }
  :where(.pg-app) .messages-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 12px 12px 8px;
  }
  :where(.pg-app) .empty { padding-top: 4px; }
  :where(.pg-app) .signal-portal { padding: 18px 16px; border-radius: 22px; }
  :where(.pg-app) .mode-lab { grid-template-columns: 1fr; gap: 8px; }
  :where(.pg-app) .mode-jumps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where(.pg-app) .portal-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where(.pg-app) .starters { grid-template-columns: 1fr; }
  :where(.pg-app) .starter { min-height: 56px; }
  :where(.pg-app) .composer {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    grid-column: auto;
    width: 100%;
    max-width: 100vw;
    margin: 0;
    flex-shrink: 0;
    z-index: 50;
    /* ONLY safe-area on bottom — no max(8px,...), no extra 12px */
    padding: 8px 8px env(safe-area-inset-bottom, 0px);
    border-top: 1px solid var(--divider);
    box-sizing: border-box;
  }
  :where(.pg-app) .composer-inner {
    gap: 6px;
    max-width: 100%;
    margin: 0;
  }
  :where(.pg-app) .composer-row {
    padding: 4px;
    border-radius: 12px;
    gap: 6px;
  }
  :where(.pg-app) #composer-input {
    min-height: var(--composer-min);
    padding: 10px 10px;
  }
  :where(.pg-app) .btn-stop,:where(.pg-app) .btn-send {
    height: var(--composer-min);
  }
  :where(.pg-app) .btn-attach {
    flex-basis: var(--composer-min);
    width: var(--composer-min);
    height: var(--composer-min);
  }
  :where(.pg-app) .attachment-preview { padding: 6px 8px; }
  :where(.pg-app) .composer-hint { display: none !important; }
  :where(.pg-app) .sidebar-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
  }
  :where(.pg-app) .footer {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  :where(.pg-app) .brand-name { display: none; }
  :where(.pg-app) .mode-trigger-desc { display: none; }
  :where(.pg-app) .mode-trigger {
    max-width: min(200px, calc(100vw - 160px));
    padding: 6px 10px;
  }
  :where(.pg-app) .mode-control { flex: 1 1 auto; min-width: 0; }
  :where(.pg-app) .mode-popover { display: none !important; }
  :where(.pg-app) .status-pill { padding-inline: 8px; font-size: 10px; }
  :where(.pg-app) .status-pill .status-label { display: inline; max-width: 62px; overflow: visible; text-overflow: clip; }
  :where(.pg-app) .header-spacer { display: none; }
  :where(.pg-app) .header-actions { flex-shrink: 0; }
  :where(.pg-app) .toasts {
    right: 12px;
    left: 12px;
    bottom: calc(var(--composer-h, 60px) + 8px + var(--vv-bottom-inset, 0px));
    max-width: calc(100vw - 24px);
  }
}

@media (max-width: 375px) {
  :where(.pg-app) .mode-trigger-kicker { display: none; }
  :where(.pg-app) .btn-send,:where(.pg-app) .btn-stop { min-width: 52px; padding: 0 10px; font-size: 13px; }
  :where(.pg-app) .btn-attach { flex-basis: 44px; width: 44px; }
  :where(.pg-app) .attachment-preview-copy { gap: 5px; }
  :where(.pg-app) .header { gap: 6px; padding-left: 10px; padding-right: 10px; }
  :where(.pg-app) .header-actions { gap: 2px; }
  :where(.pg-app) .status-pill { padding-inline: 6px; }
  :where(.pg-app) .status-pill .status-label { max-width: 50px; }
}

@media (max-width: 900px) and (max-height: 520px) {
  :where(.pg-app) .sidebar {
    width: min(560px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
  }
  :where(.pg-app) .sidebar-inner {
    gap: 4px;
    padding: 4px 8px 4px 10px;
  }
  :where(.pg-app) .btn-new { min-height: 40px; padding-block: 6px; }
  :where(.pg-app) .history-label,:where(.pg-app) .sidebar-note { display: none; }
  :where(.pg-app) .sidebar-links {
    flex-wrap: nowrap;
    gap: 0 12px;
    min-height: 44px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-top: 0;
    scrollbar-width: thin;
  }
  :where(.pg-app) .sidebar-links a { flex: 0 0 auto; }
}

@media (max-width: 480px) {
  :where(.pg-app) .header { gap: 4px 6px; padding-inline: 10px; }
  :where(.pg-app) .mode-trigger-kicker { display: none; }
  :where(.pg-app) .mode-control { flex: 0 1 auto; }
  :where(.pg-app) .mode-trigger { width: 74px; max-width: 74px; min-height: 44px; padding: 5px 8px; gap: 0; justify-content: center; }
  :where(.pg-app) .mode-trigger-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  :where(.pg-app) .mode-chevron { display: none; }
  :where(.pg-app) .status-pill { width: 58px; justify-content: center; }
  :where(.pg-app) .status-pill .status-label { max-width: 42px; }
  :where(.pg-app) .product-ribbon { align-items: center; gap: 8px; padding: 8px 10px; }
  :where(.pg-app) .product-ribbon-copy { display: block; }
  :where(.pg-app) .product-ribbon-copy strong,:where(.pg-app) .product-ribbon-copy span { display: block; }
  :where(.pg-app) .product-ribbon-copy span { display: none; }
  :where(.pg-app) .product-ribbon-actions { gap: 6px; }
  :where(.pg-app) .radio-live-link { min-height: 44px; padding-inline: 9px; font-size: 11px; }
  :where(.pg-app) .product-ribbon > a { padding-inline: 11px; }
  :where(.pg-app) .empty { padding: 4px 0 8px; }
  :where(.pg-app) .empty h1 { font-size: clamp(1.6rem, 7.2vw, 2rem); }
  :where(.pg-app) .empty p { font-size: 14px; }
  :where(.pg-app) .portal-actions { display: grid; grid-template-columns: 1fr; }
  :where(.pg-app) .portal-cta { width: 100%; }
  :where(.pg-app) .portal-story { display: flex; flex-direction: column; }
  :where(.pg-app) .portal-story > * { width: 100%; }
  :where(.pg-app) .portal-paths { order: 2; }
  :where(.pg-app) .mode-lab { order: 3; margin-top: 16px; padding: 11px; }
  :where(.pg-app) .portal-story > .generation-note { order: 4; }
  :where(.pg-app) .mode-lab > div:first-child { padding: 2px; }
  :where(.pg-app) .mode-jumps button { min-height: 60px; padding: 8px; }
  :where(.pg-app) .portal-path { min-height: 72px; padding: 10px; }
  :where(.pg-app) .portal-path small { font-size: 11px; }
  :where(.pg-app) .prompt-lab { margin-top: 16px; }
}

@media (max-width: 340px) {
  :where(.pg-app) .brand { display: none; }
  :where(.pg-app) .status-pill { padding: 4px; }
  :where(.pg-app) .mode-trigger { width: 70px; max-width: 70px; }
}

/* Desktop/tablet: hide sheet (popover only) */
@media (min-width: 901px) {
  :where(.pg-app) .mode-sheet { display: none !important; }
  :where(.pg-app) .sidebar-dim { display: none !important; pointer-events: none !important; }
  :where(.pg-app) .sidebar.open { /* no-op on desktop — drawer class ignored */ }
}

/* Touch devices keep nonessential desktop chrome out of the compact shell. */
@media (hover: none) and (pointer: coarse) {
  :where(.pg-app) .history-delete { opacity: 1; }
  :where(.pg-app) .composer-hint { display: none !important; }
  :where(.pg-app) .footer {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.pg-app) *,:where(.pg-app) *::before,:where(.pg-app) *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  :where(.pg-app) .mode-indicator { transition: none !important; }
  /* Only a deliberate, persisted click opts this decorative scene into motion. */
  :where(.pg-app) .signal-portal[data-motion="running"]::before {
    animation-duration: 8s !important; animation-iteration-count: infinite !important;
  }
  :where(.pg-app) .signal-portal[data-motion="running"]::after {
    animation-duration: 11s !important; animation-iteration-count: infinite !important;
  }
}


/* —— Sing / Play song + settings audio stubs (pro5) —— */
:where(.pg-app) .btn-play-song {
  appearance: none;
  border: 1px solid var(--divider);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  border-radius: 999px;
  padding: 4px 10px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
:where(.pg-app) .btn-play-song:hover { border-color: var(--accent); }
:where(.pg-app) .btn-play-song.playing {
  animation: hal-sing-pulse 1.2s ease-in-out infinite;
}
@keyframes hal-sing-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 35%, transparent); }
  50% { box-shadow: 0 0 0 6px transparent; }
}
:where(.pg-app) .setting-row-stack {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
:where(.pg-app) .setting-select,:where(.pg-app) .setting-input {
  width: 100%;
  border: 1px solid var(--divider-strong);
  background: var(--panel);
  color: inherit;
  border-radius: 12px;
  padding: 8px 10px;
  font: inherit;
}
:where(.pg-app) .setting-inline {
  display: flex;
  gap: 8px;
  align-items: center;
}
:where(.pg-app) .setting-inline .setting-input { flex: 1; min-width: 0; }
:where(.pg-app) .sfx-results {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 160px;
  overflow: auto;
  font-size: 12px;
}
:where(.pg-app) .sfx-results a {
  color: var(--accent);
  text-decoration: none;
  word-break: break-all;
}
:where(.pg-app) .sfx-results a:hover { text-decoration: underline; }
:where(.pg-app) .sfx-note { opacity: 0.7; }

/* SFX search results (audio v2) — keep away from composer/footer layout */
:where(.pg-app) .sfx-item{display:flex;align-items:center;gap:8px;padding:4px 0;flex-wrap:wrap}
:where(.pg-app) .sfx-item .sfx-play{flex:0 0 auto;padding:4px 10px;font-size:12px}
:where(.pg-app) .sfx-note{opacity:.75;font-size:12px;padding:4px 0}


/* hal-sounds Play chips (pro10) */
:where(.pg-app) .hal-sounds-ui {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 8px 0 4px;
  padding: 8px 10px;
  border: 1px solid var(--border, rgb(var(--g5)));
  border-radius: 12px;
  background: rgb(var(--g11) / 0.03);
}
:where(.pg-app) .hal-sounds-ui .sfx-note { opacity: 0.7; font-size: 12px; margin-right: 4px; }
:where(.pg-app) .hal-sounds-ui .sound-chip { flex: 0 0 auto; }
:where(.pg-app) .hal-sounds-ui .sound-chip.playing {
  outline: 1px solid var(--accent, rgb(var(--c-accent)));
  opacity: 1;
}
:where(.pg-app) .hal-sounds-ui .sfx-audio {
  flex: 1 1 220px;
  min-width: min(220px, 100%);
  max-width: 100%;
  height: 40px;
}
:where(.pg-app) .hal-sounds-ui .sfx-source {
  max-width: 100%;
  color: var(--accent);
  font-size: 12px;
  overflow-wrap: anywhere;
}
:where(.pg-app) .sfx-autoplay-note { width: 100%; margin-top: 4px; }

/* Perf (audit 2026-10-13): CLS fix. The empty-state welcome (static, then the JS portal)
   anchors to the top, so swapping the static welcome for the taller portal
   no longer pushes #messages up (desktop CLS 0.228). Chats keep bottom anchoring. */
:where(.pg-app) .messages:has(> .static-welcome),:where(.pg-app) .messages:has(> .empty) { margin-top: 0; }

/* @source workspace.css */
/* Native split workspace. Existing chat/composer remain their sole owners. */
:root:where(.pg-app) { --workspace-w: 380px; }
:where(.pg-app) .workspace-launch,:where(.pg-app) .workspace-button,:where(.pg-app) .workspace-select { min-height:44px; min-width:44px; }
:where(.pg-app) .workspace-launch { flex:0 0 auto; border:1px solid rgb(var(--c-accent)); border-radius:12px; padding:8px 14px; color:var(--text); background:linear-gradient(120deg,var(--panel-3),color-mix(in srgb,var(--panel-3) 85%,rgb(var(--c-accent)))); font-weight:700; white-space:nowrap; }
:where(.pg-app) .workspace-launch-label { display:inline; }
:where(.pg-app) .workspace-launch:hover { border-color:var(--accent); }
:where(.pg-app) .workspace-pane { grid-column:3; grid-row:2 / 4; min-width:0; min-height:0; display:flex; flex-direction:column; border-left:1px solid var(--divider); background:linear-gradient(145deg,color-mix(in srgb,var(--panel) 95%,rgb(var(--g5))),var(--panel-2)); overflow:hidden; color:var(--text); }
:where(.pg-app) .workspace-pane[hidden],:where(.pg-app) .workspace-pane [hidden] { display:none!important; }
:where(.pg-app) .workspace-head { display:flex; align-items:center; gap:8px; padding:16px 16px 8px; }
:where(.pg-app) .workspace-head h2 { margin:2px 0 0; font-size:19px; letter-spacing:-.02em; }
:where(.pg-app) .workspace-kicker { font:10px var(--mono); letter-spacing:.1em; color:var(--accent); }
:where(.pg-app) .workspace-head > button { font-size:24px; flex:none; padding:4px 10px; }
:where(.pg-app) .workspace-head > button:first-of-type { margin-left:auto; }
:where(.pg-app) .workspace-head > .workspace-radio { font-size:13px; }
:where(.pg-app) .workspace-label { display:block; font-size:12px; font-weight:650; color:var(--muted); margin:8px 16px 5px; }
:where(.pg-app) .workspace-select { margin:0 16px; width:calc(100% - 32px); border:1px solid var(--divider-strong); border-radius:12px; color:var(--text); background:var(--panel); padding:9px; font:inherit; }
:where(.pg-app) .workspace-activity { display:flex; flex-wrap:wrap; gap:5px 12px; padding:10px 16px; border-bottom:1px solid var(--divider); font:11px var(--mono); color:var(--muted); }
:where(.pg-app) .workspace-content { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding:14px 16px; }
:where(.pg-app) .workspace-view h3 { margin:0 0 12px; font-size:16px; }
:where(.pg-app) .workspace-view p { font-size:14px; line-height:1.5; margin:10px 0; }
:where(.pg-app) .workspace-view .workspace-welcome { font-size:27px; line-height:1.15; font-weight:750; letter-spacing:-.035em; color:rgb(var(--g9)); }
[data-theme="light"]:where(.pg-app) .workspace-view .workspace-welcome { color:rgb(var(--c-accent)); }
[data-theme="light"]:where(.pg-app) .workspace-kicker { color:rgb(var(--c-accent)); }
[data-theme="light"]:where(.pg-app) .workspace-pane :is(button,:where(.pg-app) a,:where(.pg-app) select,:where(.pg-app) textarea,:where(.pg-app) input):focus-visible,[data-theme="light"]:where(.pg-app) .workspace-launch:focus-visible { outline-color:rgb(var(--c-accent)); }
:where(.pg-app) .workspace-cards { display:grid; gap:8px; margin:18px 0; }
:where(.pg-app) .workspace-button { display:inline-flex; align-items:center; justify-content:center; padding:8px 12px; border:1px solid var(--divider-strong); border-radius:12px; color:var(--text); background:var(--panel-3); font-size:13px; margin:4px 3px 4px 0; text-align:left; text-decoration:none; }
:where(.pg-app) .workspace-cards .workspace-button { width:100%; justify-content:flex-start; padding:12px; margin:0; background:linear-gradient(115deg,var(--panel-3),color-mix(in srgb,var(--panel-3) 80%,rgb(var(--g6)))); }
:where(.pg-app) .workspace-button:hover { border-color:var(--accent); text-decoration:none; }
:where(.pg-app) .workspace-pane :is(button,:where(.pg-app) a,:where(.pg-app) select,:where(.pg-app) textarea,:where(.pg-app) input):focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
:where(.pg-app) .workspace-view .workspace-disclosure { border-left:3px solid rgb(var(--c-accent)); padding:8px 10px; background:color-mix(in srgb,var(--panel) 92%,rgb(var(--c-accent))); color:var(--text); font-size:12px; }
:where(.pg-app) .workspace-view .workspace-note { font-size:12px; color:var(--muted); }
:where(.pg-app) .workspace-view .workspace-film-title { font-size:18px; font-weight:700; }
:where(.pg-app) .workspace-video { width:100%; aspect-ratio:16 / 9; background:rgb(var(--g0)); border-radius:12px; display:block; }
:where(.pg-app) .workspace-brief { display:block; width:100%; min-height:120px; max-height:240px; resize:vertical; border:1px solid var(--divider-strong); border-radius:12px; padding:10px; color:var(--text); background:var(--bg); font:16px/1.4 var(--font); }
:where(.pg-app) .workspace-view .workspace-label { margin-left:0; margin-right:0; }
:where(.pg-app) .workspace-foot { flex:none; border-top:1px solid var(--divider); padding:8px 16px; }
:where(.pg-app) .workspace-width { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--muted); }
:where(.pg-app) .workspace-width input { flex:1; min-width:0; min-height:44px; accent-color:rgb(var(--c-accent)); }
:where(.pg-app) .workspace-status { margin:4px 0; font-size:12px; color:var(--muted); }
:where(.pg-app) .workspace-status:empty { display:none; }
@media(min-width:901px) {
  :where(.pg-app) .app[data-workspace-open="true"] { grid-template-columns:var(--sidebar-w) minmax(0,1fr) min(var(--workspace-w),38vw); }
  :where(.pg-app) .app[data-workspace-open="true"] > .main { grid-column:2; }
  :where(.pg-app) .app[data-workspace-open="true"] .footer { grid-column:2 / -1; }
  :where(.pg-app) body[data-workspace-open="true"] .hal-dock { right:auto; left:calc(var(--sidebar-w) + 12px); width:min(390px,calc(100vw - var(--sidebar-w) - min(var(--workspace-w),38vw) - 24px)); }
  :where(.pg-app) body[data-workspace-open="true"] .hal-dock-toggle-title { font-size:13px; }
  :where(.pg-app) .app[data-workspace-open="true"] .product-ribbon-copy span { display:none; }
}
@media(max-width:900px) {
  :where(.pg-app) .workspace-pane { flex:0 1 min(52%,420px); min-height:180px; border-left:0; border-top:1px solid var(--divider); }
  :where(.pg-app) .workspace-head { padding:6px 10px 0; }
  :where(.pg-app) .workspace-head h2 { font-size:15px; }
  :where(.pg-app) .workspace-kicker { display:none; }
  :where(.pg-app) .workspace-pane > .workspace-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  :where(.pg-app) .workspace-select { margin:0 10px; width:calc(100% - 20px); }
  :where(.pg-app) .workspace-activity { padding:4px 10px; font-size:10px; }
  :where(.pg-app) .workspace-content { padding:10px; }
  :where(.pg-app) .workspace-foot { padding:2px 10px; }
  :where(.pg-app) .workspace-width { display:none; }
  :where(.pg-app) .workspace-launch { padding:8px 10px; }
  :where(.pg-app) .app[data-workspace-open="true"] .product-ribbon-copy span { display:none; }
  :where(.pg-app) .app[data-workspace-open="true"] .product-ribbon { padding-block:5px; align-items:center; }
  :where(.pg-app) .app[data-workspace-open="true"] .messages-wrap { padding:8px; }
  :where(.pg-app) body[data-workspace-open="true"] .hal-dock { display:none; }
  /* On phones, Together opens the existing dock as the one secondary view. */
  :where(.pg-app) .workspace-head { min-height:44px; }
  :where(.pg-app) .workspace-head > button { min-height:44px; }
  :where(.pg-app) .workspace-foot .workspace-status { font-size:11px; }
}
@media(max-width:480px) {
  :where(.pg-app) .workspace-launch { display:inline-flex; align-items:center; justify-content:center; width:44px; min-width:44px; min-height:44px; padding:0; font-size:16px; }
  :where(.pg-app) .workspace-launch-label { display:none; }
}
@media(max-width:900px) and (max-height:600px) {
  :where(.pg-app) .workspace-activity { display:none; }
  :where(.pg-app) .workspace-status { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  :where(.pg-app) .workspace-foot { padding:0; border:0; }
}
@media(prefers-reduced-motion:reduce) { :where(.pg-app) .workspace-pane *,:where(.pg-app) .workspace-launch { animation:none!important; transition:none!important; scroll-behavior:auto; } }
@media(forced-colors:active) { :where(.pg-app) .workspace-pane,:where(.pg-app) .workspace-button,:where(.pg-app) .workspace-launch,:where(.pg-app) .workspace-select { background:Canvas; color:CanvasText; border-color:ButtonText; } }

/* ---- pg-portal ---- */

/* @source portal.css */
/* Living Signal Gallery shared presentation layer. Truth labels and page copy remain authoritative. */
:root:where(.pg-portal) {
  color-scheme: dark;
  --bg: rgb(var(--g0));
  --panel: rgb(var(--g2));
  --panel-2: rgb(var(--g2));
  --line: rgb(var(--g4));
  --line-strong: rgb(var(--g5));
  --text: rgb(var(--g10));
  --muted: rgb(var(--g8));
  --blue: rgb(var(--c-accent));
  --blue-soft: rgb(var(--c-accent) / 0.14);
  --green: rgb(var(--c-ok));
  --amber: rgb(var(--c-accent));
  --violet: rgb(var(--c-accent));
  --coral: rgb(var(--c-danger));
  --max: 1240px;
  --radius: 22px;
  --font: var(--font-ui);
  --mono: var(--font-mono);
}

:where(.pg-portal) * { box-sizing: border-box; }
html:where(.pg-portal) { scroll-behavior: smooth; overflow-x: clip; }
:where(.pg-portal) body {
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  color: var(--text);
  background:
    radial-gradient(920px 560px at 86% -12%, rgb(var(--c-accent) / 0.22), transparent 61%),
    radial-gradient(760px 580px at -8% 34%, rgb(var(--c-accent) / 0.13), transparent 65%),
    radial-gradient(760px 520px at 88% 85%, rgb(var(--c-danger) / 0.11), transparent 70%),
    var(--bg);
  font-family: var(--font-ui);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
:where(.pg-portal) body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 30%, rgb(var(--g11) / 0.17) 0 1px, transparent 1.5px),
    radial-gradient(circle at 78% 65%, rgb(var(--c-accent) / 0.15) 0 1px, transparent 1.5px);
  background-size: 92px 92px, 137px 137px;
  mask-image: linear-gradient(to bottom, rgb(var(--g0)), transparent 82%);
  opacity: .55;
}

:where(.pg-portal) body::after {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(112deg, transparent 0 48%, rgb(var(--c-accent) / 0.035) 49%, transparent 50%),
    linear-gradient(22deg, transparent 0 52%, rgb(var(--c-danger) / 0.03) 53%, transparent 54%);
  background-size: 220px 220px, 310px 310px;
}

:where(.pg-portal) a { color: inherit; }
:where(.pg-portal) a:focus-visible,:where(.pg-portal) button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
:where(.pg-portal) .shell { width: min(var(--max), calc(100% - 36px)); margin-inline: auto; }
:where(.pg-portal) .skip-link { position: fixed; z-index: 2000; top: 8px; left: 8px; min-height: 44px; padding: 11px 15px; border-radius: 12px; color: rgb(var(--g1)); background: rgb(var(--c-accent)); font-weight: 800; text-decoration: none; transform: translateY(-150%); }
:where(.pg-portal) .skip-link:focus { transform: translateY(0); }
:where(.pg-portal) .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

:where(.pg-portal) .site-head {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid rgb(var(--g5) / 0.65);
  background: rgb(var(--g0) / 0.82);
}
:where(.pg-portal) .head-inner {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
:where(.pg-portal) .brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.08em;
}
:where(.pg-portal) .brand img { width: 31px; height: 31px; border-radius: 8px; }
:where(.pg-portal) .site-nav { display: flex; align-items: center; gap: 6px; }
:where(.pg-portal) .site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 11px;
  border-radius: 8px;
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}
:where(.pg-portal) .site-nav a:hover,:where(.pg-portal) .site-nav a[aria-current="page"] { color: var(--text); background: var(--blue-soft); }

:where(.pg-portal) .hero {
  position: relative;
  padding: clamp(42px, 6vw, 76px) 0 clamp(36px, 5vw, 60px);
}
:where(.pg-portal) .hero::after {
  content: "";
  position: absolute;
  width: clamp(140px, 22vw, 300px);
  aspect-ratio: 1;
  right: 2%;
  top: 8%;
  border: 1px solid rgb(var(--c-accent) / 0.18);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgb(var(--c-accent) / 0.2), transparent 16%), repeating-radial-gradient(circle, transparent 0 28px, rgb(var(--c-accent) / 0.1) 29px 30px);
  box-shadow: 0 0 90px rgb(var(--c-accent) / 0.08);
  opacity: .72;
  pointer-events: none;
}
:where(.pg-portal) .hero > * { position: relative; z-index: 1; }
:where(.pg-portal) .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: rgb(var(--c-accent));
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
:where(.pg-portal) .eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--blue); }
:where(.pg-portal) h1 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(2.45rem, 6vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
}
:where(.pg-portal) h1 strong,:where(.pg-portal) .hero h1 em {
  color: transparent;
  background: linear-gradient(105deg, rgb(var(--c-accent)), var(--violet) 52%, rgb(var(--c-accent)));
  -webkit-background-clip: text;
  background-clip: text;
  font-style: normal;
}
:where(.pg-portal) .lede {
  max-width: 720px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: clamp(1.05rem, 2vw, 1.28rem);
}
:where(.pg-portal) .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
:where(.pg-portal) .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 17px;
  border: 1px solid rgb(var(--c-accent) / 0.55);
  border-radius: 12px;
  color: rgb(var(--g11));
  background: linear-gradient(180deg, rgb(var(--c-accent)), rgb(var(--c-accent)));
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 12px 40px rgb(var(--c-accent) / 0.18);
}
:where(.pg-portal) .button:hover { filter: brightness(1.08); }
:where(.pg-portal) .button.secondary { color: var(--text); background: transparent; border-color: var(--line-strong); box-shadow: none; }

:where(.pg-portal) .section { padding: 24px 0 48px; }
:where(.pg-portal) .section + .section { border-top: 1px solid rgb(var(--g5) / 0.36); }
:where(.pg-portal) .section-head { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(280px, 1.2fr); gap: 28px; margin-bottom: 22px; }
:where(.pg-portal) .section h2 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.08; letter-spacing: -0.035em; }
:where(.pg-portal) .section-intro { margin: 0; color: var(--muted); }
:where(.pg-portal) .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
:where(.pg-portal) .card {
  position: relative;
  min-height: 100%;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgb(var(--g4) / 0.94), rgb(var(--g2) / 0.96));
  overflow: hidden;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
:where(.pg-portal) .card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--c-accent) / 0.82), rgb(var(--c-accent) / 0.74), transparent);
  opacity: 0.7;
}
:where(.pg-portal) .card:hover { transform: translateY(-2px); border-color: rgb(var(--c-accent) / 0.42); box-shadow: 0 18px 40px rgb(var(--g0) / 0.2); }
:where(.pg-portal) .grid .card:nth-child(3n + 2)::before { background: linear-gradient(90deg, transparent, rgb(var(--c-accent) / 0.8), transparent); }
:where(.pg-portal) .grid .card:nth-child(3n + 3)::before { background: linear-gradient(90deg, transparent, rgb(var(--c-danger) / 0.72), transparent); }
:where(.pg-portal) .card-kicker { color: var(--blue); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
:where(.pg-portal) .card h3 { margin: 10px 0 8px; font-size: 1.08rem; letter-spacing: -0.01em; }
:where(.pg-portal) .card p { margin: 0; color: var(--muted); font-size: 14px; }
:where(.pg-portal) .card a { display: inline-flex; align-items: center; min-height: 44px; color: rgb(var(--c-accent)); }
:where(.pg-portal) .card ul { margin: 14px 0 0; padding-left: 19px; color: var(--muted); font-size: 14px; }
:where(.pg-portal) .card li + li { margin-top: 7px; }

:where(.pg-portal) .status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
:where(.pg-portal) .status-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
:where(.pg-portal) .status-value {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 2px;
  padding: 5px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
}
:where(.pg-portal) .status-value::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
:where(.pg-portal) .status-value.ok { color: rgb(var(--c-ok)); border-color: rgb(var(--c-ok) / 0.35); background: rgb(var(--c-ok) / 0.07); }
:where(.pg-portal) .status-value.ok::before { background: var(--green); box-shadow: 0 0 10px rgb(var(--c-ok) / 0.6); }
:where(.pg-portal) .status-value.fail { color: rgb(var(--c-danger)); border-color: rgb(var(--c-danger) / 0.35); }
:where(.pg-portal) .status-value.fail::before { background: rgb(var(--c-danger)); }

:where(.pg-portal) .principles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
:where(.pg-portal) .principle { min-height: 132px; padding: 19px; background: rgb(var(--g2) / 0.8); }
:where(.pg-portal) .principle + .principle { border-left: 1px solid var(--line); }
:where(.pg-portal) .principle strong { display: block; margin-bottom: 8px; font-size: 14px; }
:where(.pg-portal) .principle span { color: var(--muted); font-size: 13px; }
:where(.pg-portal) .number { color: var(--blue); font-family: var(--font-mono); font-size: 11px; }

:where(.pg-portal) .vision-band {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  gap: 26px;
  align-items: center;
  padding: clamp(24px, 4vw, 38px);
  border: 1px solid rgb(var(--c-accent) / 0.35);
  border-radius: 22px;
  background: linear-gradient(120deg, rgb(var(--c-accent) / 0.13), rgb(var(--g2) / 0.7));
}
:where(.pg-portal) .vision-band h2 { margin: 0 0 14px; }
:where(.pg-portal) .vision-band p { margin: 0; color: var(--muted); }
:where(.pg-portal) .vision-list { margin: 0; padding-left: 20px; color: rgb(var(--g9)); font-size: 14px; }
:where(.pg-portal) .vision-list li + li { margin-top: 8px; }

:where(.pg-portal) .site-foot { margin-top: 28px; border-top: 1px solid var(--line); color: var(--muted); }
:where(.pg-portal) .foot-inner { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 18px; font-size: 12px; }

:where(.pg-portal) .portal-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
:where(.pg-portal) .portal-grid > .card { grid-column: span 4; }
:where(.pg-portal) .portal-grid > .wide { grid-column: span 8; }
:where(.pg-portal) .portal-grid > .half { grid-column: span 6; }
:where(.pg-portal) .portal-grid > .full { grid-column: 1 / -1; }
:where(.pg-portal) .card-icon { display: inline-grid; place-items: center; width: 38px; height: 38px; margin-bottom: 10px; border: 1px solid rgb(var(--c-accent) / 0.22); border-radius: 12px; background: linear-gradient(135deg, rgb(var(--c-accent) / 0.12), rgb(var(--c-accent) / 0.12)); font-size: 19px; }
:where(.pg-portal) .metric-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
:where(.pg-portal) .metric-strip span { display: inline-flex; align-items: center; min-height: 32px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: rgb(var(--g1) / 0.62); color: rgb(var(--g9)); font: 11px/1.2 var(--mono); }
:where(.pg-portal) .open-badge { display: inline-flex; align-items: center; min-height: 30px; padding: 5px 10px; border: 1px solid rgb(var(--c-ok) / 0.38); border-radius: 999px; background: rgb(var(--c-ok) / 0.09); color: rgb(var(--c-ok)); font: 700 11px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
:where(.pg-portal) .card pre { margin: 16px 0 12px; padding: 15px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; background: rgb(var(--g1)); color: rgb(var(--c-ok)); font: 13px/1.55 var(--mono); }

:where(.pg-portal) .live-page { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(420px, 1.28fr); gap: clamp(26px, 5vw, 70px); align-items: center; min-height: calc(100vh - 126px); padding-block: 36px; }
:where(.pg-portal) .live-intro h1 { margin-top: 18px; font-size: clamp(2.5rem, 6vw, 5rem); }
:where(.pg-portal) .live-chat { min-width: 0; }
:where(.pg-portal) .chat-shell { display: flex; flex-direction: column; min-height: min(590px, 68vh); overflow: hidden; border: 1px solid rgb(var(--c-accent) / 0.3); border-radius: 22px; background: linear-gradient(145deg, rgb(var(--g3) / 0.96), rgb(var(--g1) / 0.98)); box-shadow: 0 28px 80px rgb(var(--g0) / 0.38), 0 0 70px rgb(var(--c-accent) / 0.05); }
:where(.pg-portal) .chat-head { display: flex; justify-content: space-between; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--line); color: rgb(var(--g9)); font: 12px/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
:where(.pg-portal) .chat-head .status { color: var(--amber); }
:where(.pg-portal) .chat-head .status.ok { color: var(--green); }
:where(.pg-portal) .chat-head .status.err { color: var(--coral); }
:where(.pg-portal) .chat-messages { flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 280px; overflow-y: auto; padding: 18px; }
:where(.pg-portal) .msg { max-width: 86%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 16px; color: rgb(var(--g9)); background: rgb(var(--g2) / 0.9); font-size: 14px; }
:where(.pg-portal) .msg.user { align-self: flex-end; border-color: rgb(var(--c-accent) / 0.35); background: rgb(var(--c-accent) / 0.1); }
:where(.pg-portal) .msg.assistant { align-self: flex-start; border-color: rgb(var(--c-accent) / 0.3); background: rgb(var(--c-accent) / 0.07); }
:where(.pg-portal) .msg.system,:where(.pg-portal) .msg.error { align-self: center; max-width: 94%; color: var(--amber); background: rgb(var(--c-accent) / 0.07); }
:where(.pg-portal) .msg.error { color: rgb(var(--c-danger)); }
:where(.pg-portal) .chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); background: rgb(var(--g0) / 0.72); }
:where(.pg-portal) .chat-form input { flex: 1; min-width: 0; min-height: 48px; padding: 10px 13px; border: 1px solid var(--line-strong); border-radius: 12px; color: var(--text); background: rgb(var(--g1)); font: 15px/1.3 var(--font); }
:where(.pg-portal) .chat-form button { min-width: 84px; min-height: 48px; border: 0; border-radius: 12px; color: rgb(var(--g1)); background: linear-gradient(135deg, rgb(var(--c-accent)), rgb(var(--c-ok))); font-weight: 800; cursor: pointer; }
:where(.pg-portal) .chat-form button:disabled { opacity: .55; cursor: wait; }
:where(.pg-portal) .live-note { margin: 12px 4px 0; color: var(--muted); font-size: 12px; }
:where(.pg-portal) .foot-links { display: flex; flex-wrap: wrap; gap: 6px 14px; }
:where(.pg-portal) .foot-links a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding-inline: 7px; text-decoration: none; }
:where(.pg-portal) .foot-links a:hover { color: var(--text); }

@media (max-width: 820px) {
  :where(.pg-portal) .head-inner { min-height: 64px; align-items: flex-start; padding: 14px 0; }
  :where(.pg-portal) .site-nav { justify-content: flex-end; flex-wrap: wrap; }
  :where(.pg-portal) .site-nav a { min-width: 44px; padding: 6px 8px; font-size: 12px; }
  :where(.pg-portal) .section-head,:where(.pg-portal) .vision-band { grid-template-columns: 1fr; gap: 18px; }
  :where(.pg-portal) .grid { grid-template-columns: 1fr; }
  :where(.pg-portal) .status-grid { grid-template-columns: 1fr; }
  :where(.pg-portal) .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where(.pg-portal) .portal-grid > .card,:where(.pg-portal) .portal-grid > .wide { grid-column: span 6; }
  :where(.pg-portal) .live-page { grid-template-columns: 1fr; min-height: 0; padding-block: 28px; }
  :where(.pg-portal) .chat-shell { min-height: 520px; }
  :where(.pg-portal) .principle:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  :where(.pg-portal) .principle:nth-child(4) { border-top: 1px solid var(--line); }
}

@media (max-width: 520px) {
  :where(.pg-portal) .shell { width: min(var(--max), calc(100% - 28px)); }
  :where(.pg-portal) .head-inner { display: block; }
  :where(.pg-portal) .site-nav { margin-top: 12px; justify-content: flex-start; }
  :where(.pg-portal) .site-nav a { justify-content: center; }
  :where(.pg-portal) .hero { padding-top: 34px; }
  :where(.pg-portal) .hero::after { width: 160px; right: -52px; opacity: .42; }
  :where(.pg-portal) .portal-grid > .card,:where(.pg-portal) .portal-grid > .wide,:where(.pg-portal) .portal-grid > .half { grid-column: 1 / -1; }
  :where(.pg-portal) .principles { grid-template-columns: 1fr; }
  :where(.pg-portal) .principle + .principle { border-left: 0; border-top: 1px solid var(--line); }
  :where(.pg-portal) .status-card { display: block; }
  :where(.pg-portal) .status-value { margin-top: 16px; }
  :where(.pg-portal) .foot-inner { align-items: flex-start; flex-direction: column; justify-content: center; padding: 20px 0; }
}

@media (prefers-reduced-motion: reduce) { html:where(.pg-portal) { scroll-behavior: auto; } }
@media (prefers-reduced-motion: reduce) { :where(.pg-portal) .card { transition: none; } :where(.pg-portal) .card:hover { transform: none; } }

/* ---- pg-build ---- */

/* @source build-with-hal.css */
:where(.pg-build) .skip-link {
  position: fixed;
  z-index: 1000;
  top: -70px;
  left: 12px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 8px;
  color: rgb(var(--g2));
  background: rgb(var(--g11));
  font-weight: 800;
  text-decoration: none;
}
:where(.pg-build) .skip-link:focus { top: 12px; outline: 3px solid rgb(var(--c-accent)); outline-offset: 3px; }
:where(.pg-build) #build-main:focus { outline: none; }

:where(.pg-build) .build-hero { padding: clamp(30px, 5vw, 58px) 0 48px; }
:where(.pg-build) .truth-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  padding: 11px 14px;
  border: 1px solid rgb(var(--c-accent) / 0.28);
  border-radius: 12px;
  color: rgb(var(--g9));
  background: rgb(var(--c-accent) / 0.055);
  font-size: 12px;
}
:where(.pg-build) .truth-strip strong { color: rgb(var(--c-accent)); }
:where(.pg-build) .truth-strip .pulse { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--amber); box-shadow: 0 0 16px rgb(var(--c-accent) / 0.8); }
:where(.pg-build) .hero-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr); align-items: center; gap: clamp(28px, 4vw, 52px); }
:where(.pg-build) .hero-copy h1 { max-width: 680px; font-size: clamp(2.1rem, 4.4vw, 4rem); }
:where(.pg-build) .hero-copy .lede { max-width: 650px; }
:where(.pg-build) .hero-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 25px; }
:where(.pg-build) .hero-facts span { padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: rgb(var(--g2) / 0.62); font-size: 12px; }
:where(.pg-build) .hero-facts b { color: rgb(var(--g10)); font-family: var(--font-mono); }

:where(.pg-build) .workspace-window { border: 1px solid var(--line-strong); border-radius: 22px; background: rgb(var(--g1)); box-shadow: 0 30px 90px rgb(var(--g0) / 0.38), 0 0 80px rgb(var(--c-accent) / 0.08); overflow: hidden; transform: perspective(1100px) rotateY(-2deg) rotateX(1deg); }
:where(.pg-build) .window-bar { min-height: 46px; display: flex; align-items: center; gap: 7px; padding: 0 14px; border-bottom: 1px solid var(--line); color: rgb(var(--g8)); background: rgb(var(--g2)); font-size: 12px; }
:where(.pg-build) .window-bar > span { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--g5)); }
:where(.pg-build) .window-bar > span:first-child { background: rgb(var(--c-danger)); }
:where(.pg-build) .window-bar > span:nth-child(2) { background: rgb(var(--c-accent)); }
:where(.pg-build) .window-bar > span:nth-child(3) { background: rgb(var(--c-ok)); }
:where(.pg-build) .window-bar b { margin-left: auto; font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.05em; }
:where(.pg-build) .window-body { display: grid; grid-template-columns: 118px minmax(0, 1fr); min-height: 350px; }
:where(.pg-build) .product-rail { padding: 20px 12px; border-right: 1px solid var(--line); background: rgb(var(--g1)); }
:where(.pg-build) .product-rail strong { display: block; margin: 0 8px 15px; color: rgb(var(--g8)); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
:where(.pg-build) .product-rail span { display: block; margin-bottom: 4px; padding: 8px; border-radius: 8px; color: rgb(var(--g8)); font-size: 12px; }
:where(.pg-build) .product-rail span.active { color: rgb(var(--g10)); background: var(--blue-soft); }
:where(.pg-build) .product-canvas { padding: 19px; background: radial-gradient(circle at 82% 0%, rgb(var(--c-accent) / 0.11), transparent 38%), rgb(var(--g2)); }
:where(.pg-build) .canvas-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 4px 1px 18px; }
:where(.pg-build) .canvas-head small,:where(.pg-build) .mini-card small { display: block; color: rgb(var(--g8)); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; }
:where(.pg-build) .canvas-head strong { display: block; margin-top: 2px; font-size: 13px; }
:where(.pg-build) .stage-pill { padding: 5px 8px; border: 1px solid rgb(var(--c-ok) / 0.3); border-radius: 999px; color: rgb(var(--c-ok)); background: rgb(var(--c-ok) / 0.08); font-size: 11px; text-transform: uppercase; }
:where(.pg-build) .canvas-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
:where(.pg-build) .mini-card { min-height: 94px; padding: 13px; border: 1px solid rgb(var(--g4)); border-radius: 12px; background: linear-gradient(145deg, rgb(var(--g3)), rgb(var(--g2))); }
:where(.pg-build) .mini-card.span-two { grid-column: 1 / -1; min-height: 118px; }
:where(.pg-build) .mini-card strong { display: block; margin: 8px 0 13px; color: rgb(var(--g10)); font-size: 12px; line-height: 1.4; }
:where(.pg-build) .mini-card b { display: block; margin-top: 7px; font-size: 24px; }
:where(.pg-build) .mini-card > span { color: rgb(var(--g8)); font-size: 11px; }
:where(.pg-build) .progress { height: 4px; margin-top: 18px; border-radius: 999px; background: rgb(var(--g4)); overflow: hidden; }
:where(.pg-build) .progress i { display: block; width: 62%; height: 100%; background: linear-gradient(90deg, var(--blue), rgb(var(--c-ok))); }
:where(.pg-build) .connector-mini strong { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
:where(.pg-build) .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
:where(.pg-build) .dot.green { background: var(--green); box-shadow: 0 0 8px rgb(var(--c-ok) / 0.65); }
:where(.pg-build) .dot.amber { background: var(--amber); }

:where(.pg-build) .section-index { display: block; margin-bottom: 12px; color: rgb(var(--c-accent)); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.13em; }
:where(.pg-build) .feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
:where(.pg-build) .feature-card { min-height: 220px; display: flex; flex-direction: column; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: rgb(var(--g2) / 0.75); }
:where(.pg-build) .feature-icon { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgb(var(--c-accent) / 0.38); border-radius: 12px; color: rgb(var(--c-accent)); background: var(--blue-soft); font-family: var(--font-mono); font-size: 12px; }
:where(.pg-build) .feature-card h3 { margin: 24px 0 8px; font-size: 17px; }
:where(.pg-build) .feature-card p { margin: 0 0 20px; color: var(--muted); font-size: 13px; }
:where(.pg-build) .state { display: inline-flex; align-items: center; width: fit-content; min-height: 44px; margin-top: auto; padding: 8px 11px; border: 1px solid var(--line-strong); border-radius: 999px; color: rgb(var(--g8)); background: rgb(var(--g11) / 0.02); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; white-space: normal; }
:where(.pg-build) .state.verified { color: rgb(var(--c-ok)); border-color: rgb(var(--c-ok) / 0.34); background: rgb(var(--c-ok) / 0.07); }
:where(.pg-build) .state.developer { color: rgb(var(--c-accent)); border-color: rgb(var(--c-accent) / 0.36); background: var(--blue-soft); }
:where(.pg-build) .state.paid { color: rgb(var(--c-accent)); border-color: rgb(var(--c-accent) / 0.32); background: rgb(var(--c-accent) / 0.06); }

:where(.pg-build) .connection-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
:where(.pg-build) .connection-card { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: rgb(var(--g2) / 0.82); }
:where(.pg-build) .connection-card h3 { margin: 0 0 3px; font-size: 14px; }
:where(.pg-build) .connection-card p { margin: 0; color: var(--muted); font-size: 13px; }
:where(.pg-build) .connection-mark { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgb(var(--g5)); border-radius: 12px; color: rgb(var(--g9)); background: rgb(var(--g3)); font-family: var(--font-mono); font-size: 12px; font-weight: 700; }
:where(.pg-build) .connection-mark.google { color: rgb(var(--c-accent)); }
:where(.pg-build) .connection-mark.hal { color: rgb(var(--c-ok)); border-color: rgb(var(--c-ok) / 0.3); }
:where(.pg-build) .connection-mark.mcp { color: rgb(var(--c-accent)); }
:where(.pg-build) .catalog-link { margin: 17px 0 0; color: var(--muted); font-size: 12px; }
:where(.pg-build) .catalog-link a { color: rgb(var(--c-accent)); }
:where(.pg-build) .catalog-link a,:where(.pg-build) .economics-grid a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding-inline: 4px;
  margin-inline: -4px;
}
:where(.pg-build) .site-foot .foot-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding-inline: 4px;
}

:where(.pg-build) .compute-section { margin: 18px 0 30px; border-block: 1px solid var(--line); background: linear-gradient(180deg, rgb(var(--c-accent) / 0.04), rgb(var(--g0) / 0)); }
:where(.pg-build) .compute-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
:where(.pg-build) .compute-grid article { min-height: 220px; display: flex; flex-direction: column; padding: 20px; background: rgb(var(--g1) / 0.88); }
:where(.pg-build) .compute-grid article + article { border-left: 1px solid var(--line); }
:where(.pg-build) .compute-number { color: rgb(var(--c-accent)); font-family: var(--font-mono); font-size: 12px; }
:where(.pg-build) .compute-grid h3 { margin: 29px 0 9px; font-size: 17px; }
:where(.pg-build) .compute-grid p { margin: 0 0 22px; color: var(--muted); font-size: 13px; }

:where(.pg-build) .link-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 9px; }
:where(.pg-build) .flow-node { min-height: 134px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: rgb(var(--g2)); }
:where(.pg-build) .flow-node.accent { border-color: rgb(var(--c-accent) / 0.45); background: linear-gradient(145deg, rgb(var(--c-accent) / 0.13), rgb(var(--g2))); }
:where(.pg-build) .flow-node small { display: block; color: rgb(var(--g8)); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; }
:where(.pg-build) .flow-node strong { display: block; margin: 15px 0 7px; font-size: 12px; line-height: 1.35; }
:where(.pg-build) .flow-node span { color: var(--muted); font-size: 12px; }
:where(.pg-build) .flow-arrow { align-self: center; color: rgb(var(--g6)); font-size: 18px; }
:where(.pg-build) .boundary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
:where(.pg-build) .boundary-card { padding: 23px; border: 1px solid var(--line); border-radius: 16px; background: rgb(var(--g2) / 0.8); }
:where(.pg-build) .boundary-card.allowed { border-color: rgb(var(--c-ok) / 0.25); }
:where(.pg-build) .boundary-card.blocked { border-color: rgb(var(--c-danger) / 0.2); }
:where(.pg-build) .boundary-card h3 { margin: 0 0 15px; font-size: 15px; }
:where(.pg-build) .boundary-card ul { margin: 0; padding-left: 19px; color: var(--muted); font-size: 12px; }
:where(.pg-build) .boundary-card li + li { margin-top: 7px; }
:where(.pg-build) .approval-note { padding: 16px 18px; border-left: 2px solid var(--amber); color: var(--muted); background: rgb(var(--c-accent) / 0.04); font-size: 12px; }
:where(.pg-build) .approval-note strong { color: rgb(var(--c-accent)); }

:where(.pg-build) .settings-section { margin: 16px 0 28px; padding-block: 44px; border-block: 1px solid var(--line); background: radial-gradient(600px 360px at 80% 50%, rgb(var(--c-accent) / 0.1), transparent 70%), rgb(var(--g1)); }
:where(.pg-build) .settings-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 0.78fr); gap: clamp(36px, 7vw, 88px); align-items: center; }
:where(.pg-build) .settings-layout h2 { max-width: 620px; }
:where(.pg-build) .settings-layout > div > p { max-width: 640px; color: var(--muted); }
:where(.pg-build) .settings-list { margin-top: 28px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
:where(.pg-build) .settings-list > div { min-height: 56px; display: grid; grid-template-columns: minmax(0, 1fr) auto 34px; align-items: center; gap: 18px; padding: 0 16px; background: rgb(var(--g2) / 0.72); }
:where(.pg-build) .settings-list > div + div { border-top: 1px solid var(--line); }
:where(.pg-build) .settings-list span { font-size: 12px; }
:where(.pg-build) .settings-list strong { color: var(--muted); font-size: 12px; font-weight: 500; }
:where(.pg-build) .toggle-on,:where(.pg-build) .toggle-off { position: relative; width: 30px; height: 17px; border-radius: 999px; background: rgb(var(--g4)); }
:where(.pg-build) .toggle-on { background: rgb(var(--c-accent) / 0.65); }
:where(.pg-build) .toggle-on::after,:where(.pg-build) .toggle-off::after { content: ""; position: absolute; top: 3px; left: 3px; width: 11px; height: 11px; border-radius: 50%; background: rgb(var(--g9)); }
:where(.pg-build) .toggle-on::after { left: 16px; }
:where(.pg-build) .settings-aside { padding: 23px; border: 1px solid rgb(var(--c-accent) / 0.32); border-radius: 16px; background: rgb(var(--g1) / 0.94); box-shadow: 0 30px 70px rgb(var(--g0) / 0.25); }
:where(.pg-build) .settings-aside > small { color: rgb(var(--c-accent)); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; }
:where(.pg-build) .settings-aside pre { margin: 17px 0; padding: 18px; border: 1px solid var(--line); border-radius: 12px; color: rgb(var(--c-accent)); background: rgb(var(--g1)); font-family: var(--font-mono); font-size: 12px; line-height: 1.7; overflow: auto; }
:where(.pg-build) .settings-aside p { margin: 0; color: var(--muted); font-size: 13px; }

:where(.pg-build) .billing-alert { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; padding: 14px 16px; border: 1px solid rgb(var(--c-accent) / 0.28); border-radius: 12px; background: rgb(var(--c-accent) / 0.05); font-size: 12px; }
:where(.pg-build) .billing-alert strong { color: rgb(var(--c-accent)); white-space: nowrap; }
:where(.pg-build) .billing-alert span { color: var(--muted); }
:where(.pg-build) .pricing-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
:where(.pg-build) .price-card { position: relative; min-height: 410px; display: flex; flex-direction: column; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(160deg, rgb(var(--g3) / 0.96), rgb(var(--g1) / 0.96)); }
:where(.pg-build) .price-card.featured { border-color: rgb(var(--c-accent) / 0.55); box-shadow: 0 20px 70px rgb(var(--c-accent) / 0.1); }
:where(.pg-build) .popular { position: absolute; top: 0; right: 18px; transform: translateY(-50%); padding: 6px 9px; border-radius: 999px; color: rgb(var(--g11)); background: rgb(var(--c-accent)); font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; }
:where(.pg-build) .price-name { color: rgb(var(--g8)); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
:where(.pg-build) .price { display: flex; align-items: flex-end; gap: 6px; margin: 16px 0; }
:where(.pg-build) .price b { font-size: 36px; line-height: 1; letter-spacing: -0.04em; }
:where(.pg-build) .price span { color: var(--muted); font-size: 13px; }
:where(.pg-build) .price-card > p { min-height: 65px; margin: 0; color: var(--muted); font-size: 12px; }
:where(.pg-build) .price-card ul { margin: 20px 0 24px; padding-left: 18px; color: rgb(var(--g9)); font-size: 13px; }
:where(.pg-build) .price-card li + li { margin-top: 8px; }
:where(.pg-build) .price-card .button { width: 100%; margin-top: auto; }
:where(.pg-build) .economics-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
:where(.pg-build) .economics-grid article { padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: rgb(var(--g2) / 0.78); }
:where(.pg-build) .economics-grid h3 { margin: 9px 0; font-size: 15px; }
:where(.pg-build) .economics-grid p { margin: 0; color: var(--muted); font-size: 12px; }
:where(.pg-build) .economics-grid strong { color: rgb(var(--g9)); }

:where(.pg-build) .launch-panel { padding: clamp(24px, 4vw, 42px); border: 1px solid rgb(var(--c-accent) / 0.36); border-radius: 22px; background: linear-gradient(125deg, rgb(var(--c-accent) / 0.12), rgb(var(--g2) / 0.87) 46%, rgb(var(--c-ok) / 0.055)); }
:where(.pg-build) .launch-panel > div:first-child { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(300px, 1.2fr); gap: 36px; }
:where(.pg-build) .launch-panel > div:first-child p { margin: 34px 0 0; color: var(--muted); }
:where(.pg-build) .launch-steps { margin: 34px 0 0; padding: 0; list-style: none; border-block: 1px solid var(--line); }
:where(.pg-build) .launch-steps li { display: grid; grid-template-columns: 62px minmax(190px, 0.45fr) minmax(0, 1fr); align-items: baseline; gap: 18px; padding: 17px 0; }
:where(.pg-build) .launch-steps li + li { border-top: 1px solid var(--line); }
:where(.pg-build) .launch-steps span { color: rgb(var(--c-accent)); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; }
:where(.pg-build) .launch-steps strong { font-size: 13px; }
:where(.pg-build) .launch-steps small { color: var(--muted); font-size: 13px; }
:where(.pg-build) .launch-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 25px; }
:where(.pg-build) .legal-note { margin: 19px 0 0; color: rgb(var(--g8)); font-size: 12px; }

:where(.pg-build) .button:focus-visible,:where(.pg-build) .site-nav a:focus-visible,:where(.pg-build) .catalog-link a:focus-visible { outline: 2px solid rgb(var(--c-accent)); outline-offset: 3px; }

@media (max-width: 1040px) {
  :where(.pg-build) .hero-layout { grid-template-columns: minmax(0, 1fr); }
  :where(.pg-build) .workspace-window { max-width: 720px; transform: none; }
  :where(.pg-build) .feature-grid,:where(.pg-build) .compute-grid,:where(.pg-build) .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where(.pg-build) .compute-grid article:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  :where(.pg-build) .compute-grid article:nth-child(4) { border-top: 1px solid var(--line); }
  :where(.pg-build) .pricing-grid { row-gap: 18px; }
}

@media (max-width: 760px) {
  :where(.pg-build) .truth-strip { align-items: flex-start; flex-wrap: wrap; }
  :where(.pg-build) .truth-strip span:last-child { flex-basis: calc(100% - 20px); margin-left: 18px; }
  :where(.pg-build) .hero-copy h1 { font-size: clamp(2.55rem, 13vw, 4.2rem); }
  :where(.pg-build) .workspace-window { border-radius: 16px; }
  :where(.pg-build) .window-body { grid-template-columns: 1fr; min-height: 0; }
  :where(.pg-build) .product-rail { display: flex; gap: 5px; padding: 9px; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
  :where(.pg-build) .product-rail strong { display: none; }
  :where(.pg-build) .product-rail span { flex: 0 0 auto; margin: 0; }
  :where(.pg-build) .product-canvas { padding: 13px; }
  :where(.pg-build) .feature-grid,:where(.pg-build) .connection-board,:where(.pg-build) .compute-grid,:where(.pg-build) .boundary-grid,:where(.pg-build) .settings-layout,:where(.pg-build) .pricing-grid,:where(.pg-build) .economics-grid { grid-template-columns: minmax(0, 1fr); }
  :where(.pg-build) .feature-card { min-height: 230px; }
  :where(.pg-build) .connection-card { grid-template-columns: 42px minmax(0, 1fr); }
  :where(.pg-build) .connection-card .state { grid-column: 2; margin-top: 2px; }
  :where(.pg-build) .compute-grid article + article { border-left: 0; border-top: 1px solid var(--line); }
  :where(.pg-build) .compute-grid article { min-height: 230px; }
  :where(.pg-build) .link-flow { grid-template-columns: minmax(0, 1fr); }
  :where(.pg-build) .flow-node { min-height: 112px; }
  :where(.pg-build) .flow-arrow { transform: rotate(90deg); justify-self: center; }
  :where(.pg-build) .settings-section { padding-block: 52px; }
  :where(.pg-build) .settings-list > div { grid-template-columns: minmax(0, 1fr) 30px; gap: 8px; padding-block: 11px; }
  :where(.pg-build) .settings-list strong { grid-column: 1; grid-row: 2; }
  :where(.pg-build) .settings-list .toggle-on,:where(.pg-build) .settings-list .toggle-off { grid-column: 2; grid-row: 1 / span 2; }
  :where(.pg-build) .billing-alert { display: block; }
  :where(.pg-build) .billing-alert strong { display: block; margin-bottom: 5px; }
  :where(.pg-build) .price-card { min-height: 0; }
  :where(.pg-build) .price-card > p { min-height: 0; }
  :where(.pg-build) .launch-panel > div:first-child { grid-template-columns: minmax(0, 1fr); gap: 0; }
  :where(.pg-build) .launch-panel > div:first-child p { margin-top: 14px; }
  :where(.pg-build) .launch-steps li { grid-template-columns: 50px minmax(0, 1fr); }
  :where(.pg-build) .launch-steps small { grid-column: 2; }
}

@media (max-width: 480px) {
  :where(.pg-build) .build-hero { padding-top: 28px; }
  :where(.pg-build) .canvas-grid { grid-template-columns: minmax(0, 1fr); }
  :where(.pg-build) .mini-card.span-two { grid-column: auto; }
  :where(.pg-build) .window-bar b { display: none; }
  :where(.pg-build) .connection-card { padding: 15px; }
  :where(.pg-build) .settings-aside { padding: 16px; }
  :where(.pg-build) .settings-aside pre { font-size: 11px; }
  :where(.pg-build) .launch-panel { padding: 24px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  :where(.pg-build) .workspace-window { transform: none; }
}

/* Living Signal Gallery: make the product journey feel like rooms in one creative world. */
:where(.pg-build) .build-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
:where(.pg-build) .build-hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -64px max(-9vw, -110px) 0;
  background:
    linear-gradient(90deg, rgb(var(--g1) / 0.97) 0%, rgb(var(--g1) / 0.78) 44%, rgb(var(--g1) / 0.3) 100%),
    url("../assets/hal-creative-universe-v1.webp") 68% 43% / cover no-repeat;
  opacity: .42;
  -webkit-mask-image: linear-gradient(to bottom, rgb(var(--g0)) 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, rgb(var(--g0)) 55%, transparent 100%);
}
:where(.pg-build) .build-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(40vw, 520px);
  aspect-ratio: 1;
  right: -10%;
  top: 8%;
  border: 1px solid rgb(var(--c-accent) / 0.22);
  border-radius: 50%;
  box-shadow: inset 0 0 80px rgb(var(--c-accent) / 0.08), 0 0 80px rgb(var(--c-accent) / 0.08);
}
:where(.pg-build) .hero-copy h1 {
  text-shadow: 0 12px 50px rgb(var(--g0) / 0.55);
}
:where(.pg-build) .truth-strip {
  border-color: rgb(var(--c-accent) / 0.24);
  background: linear-gradient(90deg, rgb(var(--c-accent) / 0.08), rgb(var(--c-accent) / 0.08), rgb(var(--c-danger) / 0.055));
}
:where(.pg-build) .feature-card,:where(.pg-build) .connection-card,:where(.pg-build) .compute-grid article,:where(.pg-build) .price-card,:where(.pg-build) .economics-grid article {
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
:where(.pg-build) .feature-card:nth-child(4n + 1),:where(.pg-build) .connection-card:nth-child(4n + 1) { border-top-color: rgb(var(--c-accent) / 0.58); }
:where(.pg-build) .feature-card:nth-child(4n + 2),:where(.pg-build) .connection-card:nth-child(4n + 2) { border-top-color: rgb(var(--c-accent) / 0.58); }
:where(.pg-build) .feature-card:nth-child(4n + 3),:where(.pg-build) .connection-card:nth-child(4n + 3) { border-top-color: rgb(var(--c-danger) / 0.54); }
:where(.pg-build) .feature-card:nth-child(4n + 4),:where(.pg-build) .connection-card:nth-child(4n + 4) { border-top-color: rgb(var(--c-ok) / 0.54); }
:where(.pg-build) .feature-card:hover,:where(.pg-build) .connection-card:hover,:where(.pg-build) .compute-grid article:hover,:where(.pg-build) .price-card:hover,:where(.pg-build) .economics-grid article:hover {
  transform: translateY(-4px);
  border-color: rgb(var(--c-accent) / 0.42);
  box-shadow: 0 22px 55px rgb(var(--g0) / 0.2);
}
:where(.pg-build) .section:nth-of-type(odd) .section-index { color: rgb(var(--c-accent)); }
:where(.pg-build) .section:nth-of-type(even) .section-index { color: rgb(var(--c-ok)); }
:where(.pg-build) .compute-section {
  background:
    radial-gradient(700px 380px at 8% 12%, rgb(var(--c-accent) / 0.07), transparent 65%),
    radial-gradient(620px 420px at 94% 76%, rgb(var(--c-accent) / 0.09), transparent 68%),
    rgb(var(--g1));
}
:where(.pg-build) .launch-panel {
  background:
    radial-gradient(560px 280px at 96% 0%, rgb(var(--c-danger) / 0.11), transparent 70%),
    linear-gradient(125deg, rgb(var(--c-accent) / 0.1), rgb(var(--g2) / 0.92) 46%, rgb(var(--c-accent) / 0.07));
}

@media (max-width: 760px) {
  :where(.pg-build) .build-hero::before { opacity: .3; background-position: 62% 25%; }
  :where(.pg-build) .build-hero::after { width: 70vw; right: -32%; top: 4%; }
}

@media (prefers-reduced-motion: reduce) {
  :where(.pg-build) .feature-card,:where(.pg-build) .connection-card,:where(.pg-build) .compute-grid article,:where(.pg-build) .price-card,:where(.pg-build) .economics-grid article { transition: none; }
  :where(.pg-build) .feature-card:hover,:where(.pg-build) .connection-card:hover,:where(.pg-build) .compute-grid article:hover,:where(.pg-build) .price-card:hover,:where(.pg-build) .economics-grid article:hover { transform: none; }
}

/* ---- pg-studio ---- */

/* @source studio.css */
:where(.pg-studio) .studio-hero {
  padding: clamp(34px, 6vw, 76px) 0 46px;
}

:where(.pg-studio) .preview-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(34px, 6vw, 66px);
  padding: 11px 14px;
  border: 1px solid rgb(var(--c-accent) / 0.28);
  border-radius: 12px;
  color: rgb(var(--c-accent));
  background: rgb(var(--c-accent) / 0.055);
  font-size: 12px;
}

:where(.pg-studio) .preview-banner strong {
  color: rgb(var(--c-accent));
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

:where(.pg-studio) .preview-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 13px rgb(var(--c-accent) / 0.72);
}

:where(.pg-studio) .studio-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.7fr);
  align-items: end;
  gap: clamp(34px, 7vw, 90px);
}

:where(.pg-studio) .studio-hero h1 {
  max-width: 760px;
  font-size: clamp(3.15rem, 7.4vw, 6.5rem);
}

:where(.pg-studio) .studio-hero .lede {
  max-width: 670px;
}

:where(.pg-studio) .button:disabled {
  cursor: not-allowed;
  color: rgb(var(--g8));
  border-color: var(--line-strong);
  background: rgb(var(--g4));
  box-shadow: none;
  opacity: 0.72;
}

:where(.pg-studio) .truth-note {
  max-width: 630px;
  margin: 16px 0 0;
  color: rgb(var(--g7));
  font-size: 12px;
}

:where(.pg-studio) .launch-card {
  position: relative;
  padding: 22px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgb(var(--c-accent) / 0.08), transparent 54%),
    rgb(var(--g2) / 0.92);
  overflow: hidden;
}

:where(.pg-studio) .launch-card::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -70px;
  top: -80px;
  border-radius: 50%;
  background: rgb(var(--c-accent) / 0.12);
  filter: blur(18px);
}

:where(.pg-studio) .launch-card .card-kicker {
  display: block;
  margin-bottom: 13px;
}

:where(.pg-studio) .allowance-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
}

:where(.pg-studio) .allowance-row strong {
  font-size: 13px;
}

:where(.pg-studio) .allowance-row span,:where(.pg-studio) .launch-card p {
  color: var(--muted);
  font-size: 12px;
}

:where(.pg-studio) .launch-card p {
  margin: 15px 0 0;
}

:where(.pg-studio) .studio-shell {
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: rgb(var(--g1) / 0.9);
  box-shadow: 0 34px 100px rgb(var(--g0) / 0.32);
  overflow: hidden;
}

:where(.pg-studio) .workspace-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 25px 28px 20px;
  border-bottom: 1px solid var(--line);
}

:where(.pg-studio) .workspace-head .eyebrow {
  margin-bottom: 7px;
}

:where(.pg-studio) .workspace-head h2 {
  margin: 0;
  font-size: clamp(1.45rem, 3vw, 2.15rem);
  letter-spacing: -0.035em;
}

:where(.pg-studio) .identity-chip,:where(.pg-studio) .quota-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  background: rgb(var(--g11) / 0.02);
  font-family: var(--font-mono);
  font-size: 10px;
  white-space: nowrap;
}

:where(.pg-studio) .identity-chip span {
  color: var(--amber);
}

:where(.pg-studio) .studio-tabs {
  display: flex;
  gap: 6px;
  padding: 14px 28px 0;
}

:where(.pg-studio) .studio-tabs button {
  min-width: 120px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: 12px 12px 0 0;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

:where(.pg-studio) .studio-tabs button[aria-selected="true"] {
  color: rgb(var(--g10));
  border-color: rgb(var(--c-accent) / 0.35);
  border-bottom-color: rgb(var(--g3));
  background: rgb(var(--g3));
}

:where(.pg-studio) .studio-panel {
  padding: 0 28px 30px;
}

:where(.pg-studio) .builder-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(290px, 0.72fr);
  gap: 18px;
  padding-top: 18px;
  border-top: 1px solid rgb(var(--c-accent) / 0.24);
}

:where(.pg-studio) .creation-form,:where(.pg-studio) .voice-card,:where(.pg-studio) .video-preview-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(145deg, rgb(var(--g3) / 0.96), rgb(var(--g2) / 0.94));
}

:where(.pg-studio) .creation-form {
  padding: clamp(20px, 3vw, 30px);
}

:where(.pg-studio) .form-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

:where(.pg-studio) .step-label {
  color: rgb(var(--c-accent));
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

:where(.pg-studio) .creation-form h3,:where(.pg-studio) .voice-card h3,:where(.pg-studio) .video-preview-card h3 {
  margin: 5px 0 0;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

:where(.pg-studio) .creation-form label {
  display: block;
  margin: 18px 0 7px;
  color: rgb(var(--g9));
  font-size: 12px;
  font-weight: 700;
}

:where(.pg-studio) .creation-form textarea,:where(.pg-studio) .creation-form select {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  color: var(--text);
  background: rgb(var(--g1));
  font: inherit;
  font-size: 14px;
}

:where(.pg-studio) .creation-form textarea {
  min-height: 112px;
  padding: 13px 14px;
  resize: vertical;
}

:where(.pg-studio) .creation-form select {
  height: 43px;
  padding: 0 12px;
}

:where(.pg-studio) .creation-form textarea:focus,:where(.pg-studio) .creation-form select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgb(var(--c-accent) / 0.12);
}

:where(.pg-studio) .field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

:where(.pg-studio) .optional {
  color: rgb(var(--g7));
  font-weight: 500;
}

:where(.pg-studio) .creation-form .consent-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 10px;
  margin-top: 20px;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.5;
}

:where(.pg-studio) .consent-row input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--blue);
}

:where(.pg-studio) .estimate-card {
  margin-top: 22px;
  padding: 14px 15px;
  border: 1px solid rgb(var(--c-ok) / 0.22);
  border-radius: 12px;
  background: rgb(var(--c-ok) / 0.045);
}

:where(.pg-studio) .estimate-card span,:where(.pg-studio) .estimate-card strong,:where(.pg-studio) .estimate-card small {
  display: block;
}

:where(.pg-studio) .estimate-card span {
  color: rgb(var(--c-ok));
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

:where(.pg-studio) .estimate-card strong {
  margin-top: 4px;
  font-size: 13px;
}

:where(.pg-studio) .estimate-card small {
  margin-top: 4px;
  color: var(--muted);
}

:where(.pg-studio) .create-button {
  width: 100%;
  margin-top: 16px;
}

:where(.pg-studio) .voice-card,:where(.pg-studio) .video-preview-card {
  padding: clamp(22px, 3vw, 30px);
}

:where(.pg-studio) .voice-card {
  position: relative;
  text-align: center;
  overflow: hidden;
}

:where(.pg-studio) .voice-card::before {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  left: 50%;
  top: 2px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--c-accent) / 0.13), transparent 67%);
  pointer-events: none;
}

:where(.pg-studio) .voice-orb {
  position: relative;
  z-index: 1;
  width: 148px;
  height: 148px;
  margin: 10px auto 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgb(var(--c-accent) / 0.34);
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--c-accent)) 0%, rgb(var(--g3)) 55%, rgb(var(--g1)) 100%);
  box-shadow: inset 0 0 35px rgb(var(--c-accent) / 0.12), 0 0 60px rgb(var(--c-accent) / 0.08);
}

:where(.pg-studio) .voice-orb span {
  width: 5px;
  height: 28px;
  border-radius: 99px;
  background: linear-gradient(rgb(var(--c-accent)), rgb(var(--c-accent)));
  transform: scaleY(0.45);
}

:where(.pg-studio) .voice-orb span:nth-child(2),:where(.pg-studio) .voice-orb span:nth-child(4) {
  height: 48px;
  transform: scaleY(0.7);
}

:where(.pg-studio) .voice-orb span:nth-child(3) {
  height: 72px;
}

:where(.pg-studio) .voice-card.is-recording .voice-orb span {
  animation: studio-wave 0.85s ease-in-out infinite alternate;
}

:where(.pg-studio) .voice-card.is-recording .voice-orb span:nth-child(2) { animation-delay: -0.55s; }
:where(.pg-studio) .voice-card.is-recording .voice-orb span:nth-child(3) { animation-delay: -0.2s; }
:where(.pg-studio) .voice-card.is-recording .voice-orb span:nth-child(4) { animation-delay: -0.72s; }
:where(.pg-studio) .voice-card.is-recording .voice-orb span:nth-child(5) { animation-delay: -0.34s; }

@keyframes studio-wave {
  from { transform: scaleY(0.28); opacity: 0.58; }
  to { transform: scaleY(1); opacity: 1; }
}

:where(.pg-studio) .voice-card p,:where(.pg-studio) .video-preview-card p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
}

:where(.pg-studio) .record-actions {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin: 24px 0 12px;
}

:where(.pg-studio) .record-button,:where(.pg-studio) .clear-button {
  min-height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  color: var(--text);
  background: rgb(var(--g2));
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

:where(.pg-studio) .record-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
}

:where(.pg-studio) .clear-button { padding: 0 13px; }

:where(.pg-studio) .record-icon {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgb(var(--c-danger));
  box-shadow: 0 0 8px rgb(var(--c-danger) / 0.5);
}

:where(.pg-studio) .record-button[aria-pressed="true"] {
  border-color: rgb(var(--c-danger) / 0.55);
  background: rgb(var(--c-danger) / 0.08);
}

:where(.pg-studio) .record-button[aria-pressed="true"] .record-icon {
  border-radius: 4px;
}

:where(.pg-studio) .voice-status {
  min-height: 22px;
  color: rgb(var(--c-accent));
  font-family: var(--font-mono);
  font-size: 10px;
}

:where(.pg-studio) .voice-card audio {
  width: 100%;
  margin-top: 12px;
}

:where(.pg-studio) .boundary-list {
  margin: 23px 0 0;
  padding: 17px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  color: rgb(var(--g7));
  text-align: left;
  font-size: 11px;
}

:where(.pg-studio) .boundary-list li {
  position: relative;
  padding-left: 17px;
}

:where(.pg-studio) .boundary-list li + li { margin-top: 7px; }
:where(.pg-studio) .boundary-list li::before { content: "✓"; position: absolute; left: 0; color: var(--green); }

:where(.pg-studio) .video-preview-card {
  display: flex;
  flex-direction: column;
}

:where(.pg-studio) .frame-guide {
  position: relative;
  width: min(56%, 230px);
  aspect-ratio: 9 / 16;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(var(--c-accent) / 0.4);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgb(var(--c-accent) / 0.18), rgb(var(--g1) / 0.2)),
    repeating-linear-gradient(135deg, transparent 0 12px, rgb(var(--g11) / 0.025) 12px 13px);
  box-shadow: inset 0 0 50px rgb(var(--c-accent) / 0.08);
}

:where(.pg-studio) .frame-guide > span {
  position: absolute;
  left: 10px;
  top: 10px;
  color: rgb(var(--g7));
  font-family: var(--font-mono);
  font-size: 9px;
}

:where(.pg-studio) .play-mark {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  padding-left: 3px;
  border: 1px solid rgb(var(--g11) / 0.18);
  border-radius: 50%;
  color: rgb(var(--g10));
  background: rgb(var(--g0) / 0.7);
}

:where(.pg-studio) .receipt-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10px;
}

:where(.pg-studio) .receipt-line + .receipt-line { margin-top: 0; }
:where(.pg-studio) .receipt-line span { color: rgb(var(--g7)); }
:where(.pg-studio) .receipt-line strong { color: rgb(var(--g8)); font-weight: 600; }

:where(.pg-studio) .studio-principles .principle {
  min-height: 190px;
}

:where(.pg-studio) [hidden] { display: none !important; }

@media (max-width: 900px) {
  :where(.pg-studio) .studio-hero-grid,:where(.pg-studio) .builder-grid {
    grid-template-columns: 1fr;
  }

  :where(.pg-studio) .launch-card { max-width: 580px; }
  :where(.pg-studio) .voice-card { min-height: 520px; }
  :where(.pg-studio) .frame-guide { width: min(48%, 220px); }
}

@media (max-width: 620px) {
  :where(.pg-studio) .preview-banner { align-items: flex-start; flex-wrap: wrap; }
  :where(.pg-studio) .preview-banner { margin-bottom: 26px; }
  :where(.pg-studio) .studio-hero h1 { font-size: clamp(2.35rem, 10vw, 3.2rem); }
  :where(.pg-studio) .studio-hero .lede { font-size: 1rem; line-height: 1.55; }
  :where(.pg-studio) .workspace-head { align-items: flex-start; flex-direction: column; padding: 21px 18px 17px; }
  :where(.pg-studio) .studio-tabs { padding-inline: 18px; }
  :where(.pg-studio) .studio-tabs button { min-width: 0; flex: 1; }
  :where(.pg-studio) .studio-panel { padding: 0 18px 20px; }
  :where(.pg-studio) .form-heading { flex-direction: column; }
  :where(.pg-studio) .field-grid { grid-template-columns: 1fr; gap: 0; }
  :where(.pg-studio) .voice-card { min-height: 0; }
  :where(.pg-studio) .frame-guide { width: min(68%, 220px); }
}

@media (prefers-reduced-motion: reduce) {
  :where(.pg-studio) .voice-card.is-recording .voice-orb span { animation: none; transform: scaleY(0.8); }
}

/* studio-music v1 */
:where(.pg-studio) .studio-session { margin-top: 24px; padding: 20px; border: 1px solid rgb(var(--c-ok) / 0.35); border-radius: 22px; background: linear-gradient(135deg, rgb(var(--c-ok) / 0.16), rgb(var(--c-accent) / 0.12)); min-width: 0; }
:where(.pg-studio) .studio-session h2 { margin: 0 0 10px; font-size: 1.3rem; }
:where(.pg-studio) .session-intro,:where(.pg-studio) .session-status { font-size: .92rem; line-height: 1.55; margin: 8px 0; overflow-wrap: anywhere; }
:where(.pg-studio) .session-status { color: rgb(var(--g9)); padding-left: 12px; border-left: 3px solid rgb(var(--c-ok)); }
:where(.pg-studio) .studio-session[data-state="authenticated"] .session-status { border-color: rgb(var(--c-ok)); }
:where(.pg-studio) .session-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
:where(.pg-studio) .session-actions button { min-height: 44px; min-width: 44px; max-width: 100%; white-space: normal; }
:where(.pg-studio) .session-actions button:focus-visible { outline: 3px solid rgb(var(--c-ok)); outline-offset: 3px; }
:where(.pg-studio) .google-button-slot { width: 100%; min-width: 0; overflow: hidden; }
:where(.pg-studio) .google-button-slot:empty { display: none; }
:where(.pg-studio) .identity-chip { white-space: normal; }
:where(.pg-studio) .studio-page .hal-dock[data-expanded="false"][data-studio-clearance="unsafe"] { visibility: hidden; pointer-events: none; }
:where(.pg-studio) .studio-session { scroll-margin-block: 80px; }
:where(.pg-studio) .music-jobs { display: grid; gap: 10px; margin-top: 14px; }
:where(.pg-studio) .music-job { border: 1px solid rgb(var(--g5) / 0.7); border-radius: 16px; padding: 12px 14px; background: rgb(var(--g11) / 0.03); }
:where(.pg-studio) .music-job .job-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
:where(.pg-studio) .music-job .job-body { color: rgb(var(--g8)); font-size: 14px; display: grid; gap: 8px; }
:where(.pg-studio) .music-job audio { width: 100%; }
:where(.pg-studio) .job-state { color: rgb(var(--g10)); font-weight: 700; margin-right: 6px; }
:where(.pg-studio) .job-done { color: rgb(var(--c-ok)); } :where(.pg-studio) .job-failed { color: rgb(var(--c-danger)); }
:where(.pg-studio) .job-download { color: rgb(var(--c-accent)); font-weight: 650; }

/* ---- pg-watch ---- */

/* @source video-hub.css */
:root:where(.pg-watch) {
  color-scheme: dark;
  --watch-bg: rgb(var(--g0));
  --watch-ink: rgb(var(--g1));
  --watch-panel: rgb(var(--g2));
  --watch-panel-2: rgb(var(--g4));
  --watch-line: rgb(var(--c-accent) / 0.18);
  --watch-text: rgb(var(--g11));
  --watch-muted: rgb(var(--g8));
  --watch-blue: rgb(var(--c-accent));
  --watch-cyan: rgb(var(--c-ok));
  --watch-coral: rgb(var(--c-danger));
  --watch-gold: rgb(var(--c-accent));
  --watch-purple: rgb(var(--c-accent));
  --watch-green: rgb(var(--c-ok));
  --theme-primary: rgb(var(--c-ok));
  --theme-secondary: rgb(var(--c-accent));
  --theme-glow: rgb(var(--c-accent) / 0.23);
  --watch-radius: 22px;
  --watch-shadow: 0 28px 90px rgb(var(--g0) / 0.44);
}

:where(.pg-watch) body[data-video-theme="ember"] {
  --theme-primary: rgb(var(--c-accent));
  --theme-secondary: rgb(var(--c-danger));
  --theme-glow: rgb(var(--c-danger) / 0.22);
}

:where(.pg-watch) body[data-video-theme="pulse"] {
  --theme-primary: rgb(var(--c-accent));
  --theme-secondary: rgb(var(--c-accent));
  --theme-glow: rgb(var(--c-accent) / 0.24);
}

:where(.pg-watch) * { box-sizing: border-box; }
html:where(.pg-watch) { background: var(--watch-bg); scroll-behavior: smooth; }
:where(.pg-watch) body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 85% 38rem, var(--theme-glow), transparent 31rem),
    radial-gradient(circle at 7% 78rem, rgb(var(--c-accent) / 0.12), transparent 29rem),
    linear-gradient(180deg, rgb(var(--g0)), rgb(var(--g1)) 55%, rgb(var(--g0)));
  color: var(--watch-text);
  font-family: var(--font-ui);
  line-height: 1.55;
  transition: background .55s ease;
}

:where(.pg-watch) body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  background-image: radial-gradient(rgb(var(--g11) / 0.2) .6px, transparent .6px);
  background-size: 17px 17px;
  content: "";
  opacity: .12;
  pointer-events: none;
}

:where(.pg-watch) main { overflow: clip; }
:where(.pg-watch) button,:where(.pg-watch) input { font: inherit; }
:where(.pg-watch) a { color: rgb(var(--c-accent)); }
:where(.pg-watch) a:hover { color: white; }
:where(.pg-watch) .skip-link { position: fixed; left: 12px; top: -70px; z-index: 2000; min-height: 44px; padding: 11px 14px; background: white; color: rgb(var(--g1)); border-radius: 8px; font-weight: 800; }
:where(.pg-watch) .skip-link:focus { top: 12px; }

:where(.pg-watch) .site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
  padding: 0 5vw;
  border-bottom: 1px solid var(--watch-line);
  background: rgb(var(--g0) / 0.88);
}
:where(.pg-watch) .site-head nav { display: flex; gap: 16px; }
:where(.pg-watch) .site-head a { color: var(--watch-text); text-decoration: none; font-weight: 750; }

:where(.pg-watch) .watch-shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
:where(.pg-watch) .watch-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: clamp(500px, 63vh, 650px);
  padding: clamp(48px, 6vw, 76px) 0 58px;
  border-bottom: 1px solid rgb(var(--g11) / 0.14);
  background: rgb(var(--g2));
}

:where(.pg-watch) .watch-hero::before,:where(.pg-watch) .watch-hero::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}

:where(.pg-watch) .watch-hero::before {
  inset: 0;
  background:
    linear-gradient(90deg, rgb(var(--g1) / 0.98) 0%, rgb(var(--g1) / 0.9) 30%, rgb(var(--g1) / 0.23) 68%, rgb(var(--g1) / 0.12) 100%),
    linear-gradient(0deg, rgb(var(--g0) / 0.94) 0%, transparent 33%, rgb(var(--g0) / 0.14) 100%);
}

:where(.pg-watch) .watch-hero::after {
  right: -7rem;
  bottom: -10rem;
  width: 34rem;
  height: 22rem;
  border-radius: 50%;
  background: rgb(var(--c-danger) / 0.16);
  filter: blur(70px);
}

:where(.pg-watch) .watch-hero-art {
  position: absolute;
  z-index: -2;
  inset: 0;
  overflow: hidden;
}

:where(.pg-watch) .watch-hero-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.025);
  filter: saturate(1.08) contrast(1.02);
  animation: hero-breathe 16s ease-in-out infinite alternate;
}

:where(.pg-watch) .hero-orbit {
  position: absolute;
  z-index: -1;
  border: 1px solid rgb(var(--c-accent) / 0.28);
  border-radius: 50%;
  pointer-events: none;
}
:where(.pg-watch) .orbit-one { top: 10%; right: 5%; width: 28rem; height: 11rem; transform: rotate(-15deg); }
:where(.pg-watch) .orbit-two { right: 21%; bottom: 7%; width: 11rem; height: 4rem; transform: rotate(26deg); }

:where(.pg-watch) .watch-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(280px, .88fr);
  gap: clamp(38px, 7vw, 100px);
  align-items: end;
}

:where(.pg-watch) .watch-hero-copy { max-width: 790px; }
:where(.pg-watch) .eyebrow {
  margin: 0 0 14px;
  color: var(--watch-cyan);
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .17em;
  text-transform: uppercase;
}
:where(.pg-watch) .live-dot {
  display: inline-block;
  width: .62rem;
  height: .62rem;
  margin-right: .55rem;
  border-radius: 50%;
  background: var(--watch-coral);
  box-shadow: 0 0 0 .32rem rgb(var(--c-danger) / 0.15), 0 0 1.1rem rgb(var(--c-danger) / 0.82);
}
:where(.pg-watch) h1,:where(.pg-watch) h2,:where(.pg-watch) h3,:where(.pg-watch) p { margin-top: 0; }
:where(.pg-watch) h1 {
  max-width: 910px;
  margin-bottom: 22px;
  color: white;
  font-size: clamp(3rem, 7.1vw, 6.85rem);
  line-height: .88;
  letter-spacing: -.07em;
  text-wrap: balance;
  text-shadow: 0 8px 38px rgb(var(--g0) / 0.34);
}
:where(.pg-watch) h1 span {
  background: linear-gradient(100deg, rgb(var(--g10)) 0%, rgb(var(--c-accent)) 38%, rgb(var(--c-accent)) 82%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
:where(.pg-watch) h2 { margin-bottom: 16px; font-size: clamp(2rem, 4.5vw, 3.75rem); line-height: .98; letter-spacing: -.05em; text-wrap: balance; }
:where(.pg-watch) h3 { margin-bottom: 8px; line-height: 1.2; }
:where(.pg-watch) .lede {
  max-width: 680px;
  margin-bottom: 28px;
  color: rgb(var(--g10));
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  text-shadow: 0 2px 20px rgb(var(--g0) / 0.72);
}

:where(.pg-watch) .hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-bottom: 28px; }
:where(.pg-watch) .hero-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 11px 18px;
  border: 1px solid rgb(var(--g11) / 0.38);
  border-radius: 999px;
  background: rgb(var(--g1) / 0.5);
  color: white;
  font-size: .9rem;
  font-weight: 780;
  text-decoration: none;
  box-shadow: 0 8px 28px rgb(var(--g0) / 0.18);
}
:where(.pg-watch) .hero-action:hover { border-color: rgb(var(--g11) / 0.72); background: rgb(var(--g2) / 0.77); color: white; }
:where(.pg-watch) .hero-action.primary { border-color: transparent; background: linear-gradient(135deg, rgb(var(--c-accent)), rgb(var(--c-danger))); color: rgb(var(--g3)); box-shadow: 0 13px 35px rgb(var(--c-danger) / 0.24); }
:where(.pg-watch) .hero-notes { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; color: rgb(var(--g10)); font-size: .78rem; font-weight: 720; list-style: none; }
:where(.pg-watch) .hero-notes li::before { margin-right: 7px; color: var(--watch-cyan); content: "✦"; }

:where(.pg-watch) .channel-facts-wrap { align-self: end; justify-self: stretch; }
:where(.pg-watch) .art-label {
  width: max-content;
  max-width: 100%;
  margin: 0 0 10px auto;
  padding: 8px 12px;
  border: 1px solid rgb(var(--g11) / 0.27);
  border-radius: 999px;
  background: rgb(var(--g1) / 0.46);
  color: rgb(var(--g10));
  font-size: .73rem;
  font-weight: 750;
  letter-spacing: .02em;
}
:where(.pg-watch) .art-label span { margin-right: 5px; color: var(--watch-gold); }
:where(.pg-watch) .channel-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgb(var(--g11) / 0.25);
  border-radius: var(--watch-radius);
  background: rgb(var(--g11) / 0.16);
  box-shadow: var(--watch-shadow);
}
:where(.pg-watch) .channel-facts div { display: grid; min-height: 82px; padding: 13px 10px; background: rgb(var(--g1) / 0.7); text-align: center; place-content: center; }
:where(.pg-watch) .channel-facts strong { color: white; font-size: 1.8rem; line-height: 1; }
:where(.pg-watch) .channel-facts span { margin-top: 7px; color: rgb(var(--g9)); font-size: .74rem; }

:where(.pg-watch) .featured {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.48fr) minmax(300px, .7fr);
  gap: clamp(28px, 4.5vw, 62px);
  align-items: center;
  margin-top: -32px;
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid color-mix(in srgb, var(--theme-primary) 38%, rgb(var(--g11) / 0.13));
  border-radius: 22px;
  background:
    radial-gradient(circle at 10% 5%, var(--theme-glow), transparent 38%),
    linear-gradient(135deg, rgb(var(--g3) / 0.98), rgb(var(--g1) / 0.98));
  box-shadow: 0 32px 95px rgb(var(--g0) / 0.42), 0 0 70px var(--theme-glow);
  transition: border-color .45s ease, background .45s ease, box-shadow .45s ease;
}
:where(.pg-watch) .featured::before {
  position: absolute;
  top: -1px;
  left: 8%;
  width: 38%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--theme-primary), transparent);
  content: "";
}
:where(.pg-watch) .player-column { min-width: 0; }
:where(.pg-watch) .player-kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 10px 4px; color: rgb(var(--g9)); font-size: .72rem; font-weight: 760; letter-spacing: .11em; text-transform: uppercase; }
:where(.pg-watch) .player-kicker span { width: 25px; height: 1px; background: var(--theme-primary); box-shadow: 0 0 8px var(--theme-primary); }
:where(.pg-watch) .player-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid color-mix(in srgb, var(--theme-primary) 42%, rgb(var(--g5)));
  border-radius: var(--watch-radius);
  background: rgb(var(--g0));
  box-shadow: 0 25px 68px rgb(var(--g0) / 0.52), 0 0 28px var(--theme-glow);
  transition: border-color .35s ease, box-shadow .35s ease, width .2s ease;
}
:where(.pg-watch) .player-frame::after { position: absolute; inset: 0; border: 1px solid rgb(var(--g11) / 0.08); border-radius: inherit; content: ""; pointer-events: none; }
:where(.pg-watch) .player-frame video { display: block; width: 100%; height: 100%; background: rgb(var(--g0)); object-fit: contain; }
:where(.pg-watch) .player-status { min-height: 1.4em; margin: 10px 4px 0; color: var(--watch-muted); font-size: .86rem; overflow-wrap: anywhere; }
:where(.pg-watch) .featured-copy { position: relative; }
:where(.pg-watch) .featured-copy::before { display: block; width: 54px; height: 5px; margin-bottom: 24px; border-radius: 999px; background: linear-gradient(90deg, var(--theme-primary), var(--theme-secondary)); box-shadow: 0 0 18px var(--theme-glow); content: ""; }
:where(.pg-watch) .featured-copy h2 { font-size: clamp(2.35rem, 4.6vw, 4.6rem); }
:where(.pg-watch) .featured-copy p:not(.eyebrow,:where(.pg-watch) .technical-note) { color: rgb(var(--g9)); }
:where(.pg-watch) .video-meta { color: var(--theme-primary) !important; font-size: .83rem; font-weight: 720; }
:where(.pg-watch) .technical-note { padding-top: 18px; border-top: 1px solid var(--watch-line); color: rgb(var(--g7)); font-size: .8rem; }
:where(.pg-watch) .content-note {
  margin: 16px 0 0;
  padding: 11px 13px;
  border: 1px solid rgb(var(--c-accent) / 0.28);
  border-radius: 12px;
  background: rgb(var(--c-danger) / 0.2);
  color: rgb(var(--c-accent));
  font-size: .8rem;
  line-height: 1.55;
}
:where(.pg-watch) .actions { display: flex; flex-wrap: wrap; gap: 9px; margin: 24px 0; }
:where(.pg-watch) .action,:where(.pg-watch) .filter {
  min-height: 44px;
  padding: 10px 15px;
  border: 1px solid rgb(var(--g6));
  border-radius: 999px;
  background: rgb(var(--g3) / 0.9);
  color: var(--watch-text);
  cursor: pointer;
}
:where(.pg-watch) .action:hover,:where(.pg-watch) .filter:hover { border-color: rgb(var(--c-accent)); background: rgb(var(--g4)); }
:where(.pg-watch) .action:focus-visible,:where(.pg-watch) .filter:focus-visible,:where(.pg-watch) .video-card:focus-visible,:where(.pg-watch) .seek-button:focus-visible,:where(.pg-watch) .related-card:focus-visible,:where(.pg-watch) .collection-video:focus-visible,:where(.pg-watch) input:focus-visible,:where(.pg-watch) .hero-action:focus-visible { outline: 3px solid rgb(var(--c-ok) / 0.83); outline-offset: 3px; }
:where(.pg-watch) .action.primary { border-color: transparent; background: linear-gradient(135deg, var(--theme-secondary), var(--theme-primary)); color: rgb(var(--g2)); font-weight: 850; box-shadow: 0 10px 28px var(--theme-glow); }
:where(.pg-watch) .action.surprise { border-color: color-mix(in srgb, var(--watch-purple) 55%, transparent); background: linear-gradient(145deg, rgb(var(--c-accent) / 0.2), rgb(var(--c-accent) / 0.12)); }
:where(.pg-watch) .action.surprise span { color: var(--watch-gold); }
:where(.pg-watch) body.theater .featured { display: block; width: min(1500px, calc(100% - 28px)); }
:where(.pg-watch) body.theater .featured-copy { max-width: 900px; margin: 34px auto 0; }

:where(.pg-watch) .watch-detail { padding-block: clamp(46px, 6vw, 72px) 52px; }
:where(.pg-watch) .detail-heading-row,:where(.pg-watch) .collections-heading-row {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(280px, .55fr);
  gap: clamp(28px, 6vw, 86px);
  align-items: end;
  margin-bottom: 32px;
}
:where(.pg-watch) .detail-heading-row h2,:where(.pg-watch) .collections-heading-row h2 { margin-bottom: 0; }
:where(.pg-watch) .detail-intro,:where(.pg-watch) .collections-heading-row > p { margin-bottom: 5px; color: var(--watch-muted); }
:where(.pg-watch) .editorial-notice {
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
  padding: 24px 26px;
  border: 1px solid rgb(var(--c-accent) / 0.52);
  border-radius: 22px;
  background: linear-gradient(125deg, rgb(var(--c-danger) / 0.48), rgb(var(--g3) / 0.96));
  box-shadow: 0 20px 55px rgb(var(--g0) / 0.25);
}
:where(.pg-watch) .editorial-notice[hidden] { display: none; }
:where(.pg-watch) .editorial-notice::after { position: absolute; top: -4rem; right: -3rem; width: 12rem; height: 12rem; border: 1.8rem solid rgb(var(--c-accent) / 0.08); border-radius: 50%; content: ""; pointer-events: none; }
:where(.pg-watch) .editorial-notice h3 { margin-bottom: 8px; font-size: clamp(1.25rem, 2.4vw, 1.75rem); }
:where(.pg-watch) .editorial-notice p { max-width: 920px; color: rgb(var(--g9)); }
:where(.pg-watch) .editorial-status { margin-bottom: 8px; color: var(--watch-coral) !important; font-size: .7rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
:where(.pg-watch) .editorial-note { margin-bottom: 0; padding-top: 13px; border-top: 1px solid rgb(var(--c-accent) / 0.2); color: rgb(var(--c-accent)) !important; font-family: var(--font-mono); font-size: .82rem; overflow-wrap: anywhere; }
:where(.pg-watch) .detail-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 18px; }
:where(.pg-watch) .detail-panel {
  min-width: 0;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--watch-line);
  border-radius: 22px;
  background: linear-gradient(145deg, rgb(var(--g3) / 0.9), rgb(var(--g1) / 0.97));
  box-shadow: 0 18px 48px rgb(var(--g0) / 0.2);
}
:where(.pg-watch) .detail-panel h3,:where(.pg-watch) .related-panel h3 { margin-bottom: 8px; font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
:where(.pg-watch) .panel-kicker { margin-bottom: 7px; color: var(--theme-primary); font-size: .68rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
:where(.pg-watch) .panel-intro { margin-bottom: 19px; color: var(--watch-muted); font-size: .86rem; }
:where(.pg-watch) .seek-list { display: grid; gap: 8px; max-height: 310px; margin: 0; padding: 0 4px 0 0; overflow-y: auto; list-style: none; scrollbar-color: rgb(var(--g6)) transparent; }
:where(.pg-watch) .seek-button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 52px;
  padding: 10px 12px;
  border: 1px solid rgb(var(--c-accent) / 0.16);
  border-radius: 12px;
  background: rgb(var(--g1) / 0.76);
  color: var(--watch-text);
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
:where(.pg-watch) .seek-button:hover { border-color: color-mix(in srgb, var(--theme-primary) 60%, rgb(var(--g7))); background: rgb(var(--g4) / 0.9); transform: translateX(3px); }
:where(.pg-watch) .transcript-seek { grid-template-columns: 58px minmax(0, 1fr); align-items: start; }
:where(.pg-watch) .seek-time { color: var(--theme-primary); font-family: var(--font-mono); font-size: .77rem; font-weight: 760; white-space: nowrap; }
:where(.pg-watch) .seek-text { min-width: 0; color: rgb(var(--g10)); font-size: .88rem; overflow-wrap: anywhere; }
:where(.pg-watch) .chapter-number { display: grid; width: 28px; height: 28px; border-radius: 50%; background: rgb(var(--c-ok) / 0.1); color: var(--watch-cyan); font-size: .7rem; font-weight: 850; place-items: center; }
:where(.pg-watch) .detail-empty { margin: 0; padding: 16px; border: 1px dashed rgb(var(--g6)); border-radius: 12px; color: var(--watch-muted); list-style: none; }
:where(.pg-watch) .fact-list { display: grid; grid-template-columns: minmax(110px, .65fr) minmax(0, 1.35fr); margin: 0; }
:where(.pg-watch) .fact-list dt,:where(.pg-watch) .fact-list dd { min-width: 0; margin: 0; padding: 11px 0; border-bottom: 1px solid rgb(var(--c-accent) / 0.11); }
:where(.pg-watch) .fact-list dt { padding-right: 15px; color: rgb(var(--g7)); font-size: .74rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
:where(.pg-watch) .fact-list dd { color: rgb(var(--g10)); font-size: .85rem; overflow-wrap: anywhere; }
:where(.pg-watch) .fact-list code { color: rgb(var(--g9)); font-size: .74rem; overflow-wrap: anywhere; white-space: normal; }
:where(.pg-watch) .fact-list a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  font-weight: 750;
}
:where(.pg-watch) .related-panel { margin-top: 18px; padding: 26px; border: 1px solid var(--watch-line); border-radius: 22px; background: radial-gradient(circle at 100% 0, var(--theme-glow), transparent 32%), rgb(var(--g2) / 0.86); }
:where(.pg-watch) .related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; margin-top: 19px; }
:where(.pg-watch) .related-card {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  grid-template-rows: auto auto;
  min-width: 0;
  min-height: 70px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgb(var(--c-accent) / 0.17);
  border-radius: 16px;
  background: rgb(var(--g1) / 0.86);
  color: var(--watch-text);
  text-align: left;
  cursor: pointer;
}
:where(.pg-watch) .related-card:hover { border-color: var(--theme-primary); background: rgb(var(--g4) / 0.94); }
:where(.pg-watch) .related-card img { grid-row: 1 / 3; width: 70px; height: 100%; min-height: 70px; object-fit: cover; }
:where(.pg-watch) .related-copy { align-self: end; min-width: 0; padding: 9px 10px 1px; font-size: .83rem; font-weight: 760; overflow-wrap: anywhere; }
:where(.pg-watch) .related-label { align-self: start; padding: 2px 10px 9px; color: var(--watch-muted); font-size: .68rem; }

:where(.pg-watch) .collections { padding-block: 46px 54px; border-top: 1px solid var(--watch-line); }
:where(.pg-watch) .collection-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 20px; }
:where(.pg-watch) .collection-card { position: relative; isolation: isolate; overflow: hidden; min-width: 0; min-height: 230px; padding: clamp(22px, 3vw, 30px); border: 1px solid rgb(var(--g11) / 0.17); border-radius: 22px; box-shadow: 0 24px 58px rgb(var(--g0) / 0.25); }
:where(.pg-watch) .collection-card::before { position: absolute; z-index: -1; inset: 0; content: ""; }
:where(.pg-watch) .collection-quest::before { background: radial-gradient(circle at 92% 8%, rgb(var(--c-accent) / 0.36), transparent 37%), linear-gradient(145deg, rgb(var(--c-accent) / 0.95), rgb(var(--g2) / 0.98)); }
:where(.pg-watch) .collection-line::before { background: radial-gradient(circle at 90% 5%, rgb(var(--c-danger) / 0.29), transparent 38%), linear-gradient(145deg, rgb(var(--c-danger) / 0.94), rgb(var(--g2) / 0.98)); }
:where(.pg-watch) .collection-card h3 { margin-bottom: 12px; font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -.04em; }
:where(.pg-watch) .collection-card > p:not(.collection-number) { max-width: 560px; color: rgb(var(--g9)); }
:where(.pg-watch) .collection-number { margin-bottom: 14px; color: var(--watch-gold); font-size: .7rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
:where(.pg-watch) .collection-items { display: grid; gap: 8px; margin-top: 25px; }
:where(.pg-watch) .collection-video {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  width: 100%;
  min-height: 50px;
  padding: 10px 13px;
  border: 1px solid rgb(var(--g11) / 0.16);
  border-radius: 12px;
  background: rgb(var(--g1) / 0.5);
  color: white;
  text-align: left;
  cursor: pointer;
}
:where(.pg-watch) .collection-video:hover,:where(.pg-watch) .collection-video.selected { border-color: var(--theme-primary); background: rgb(var(--g2) / 0.84); }
:where(.pg-watch) .collection-video > span:first-child { min-width: 0; font-size: .86rem; font-weight: 760; overflow-wrap: anywhere; }
:where(.pg-watch) .collection-video > span:last-child { color: rgb(var(--g8)); font-size: .69rem; white-space: nowrap; }

:where(.pg-watch) .browse { position: relative; padding-block: clamp(48px, 6vw, 72px) 54px; }
:where(.pg-watch) .browse::before { position: absolute; z-index: -1; top: 8rem; left: -18rem; width: 31rem; height: 31rem; border-radius: 50%; background: rgb(var(--c-accent) / 0.13); filter: blur(25px); content: ""; }
:where(.pg-watch) .browse-head { display: flex; align-items: end; justify-content: space-between; gap: 34px; }
:where(.pg-watch) .browse-head > div { max-width: 660px; }
:where(.pg-watch) .browse-intro { max-width: 610px; margin-bottom: 0; color: var(--watch-muted); font-size: 1rem; }
:where(.pg-watch) .search-box { display: grid; gap: 7px; width: min(360px, 100%); color: var(--watch-muted); font-size: .73rem; font-weight: 760; letter-spacing: .1em; text-transform: uppercase; }
:where(.pg-watch) .search-box input { width: 100%; min-height: 50px; padding: 10px 16px; border: 1px solid rgb(var(--g6)); border-radius: 16px; background: rgb(var(--g2) / 0.9); color: var(--watch-text); box-shadow: inset 0 1px rgb(var(--g11) / 0.04); }
:where(.pg-watch) .search-box input::placeholder { color: rgb(var(--g7)); }
:where(.pg-watch) .filters { display: flex; flex-wrap: wrap; gap: 9px; margin: 30px 0 14px; }
:where(.pg-watch) .filter.active { border-color: rgb(var(--c-ok) / 0.7); background: rgb(var(--c-accent) / 0.14); color: rgb(var(--c-ok)); box-shadow: inset 0 0 14px rgb(var(--c-accent) / 0.05); }
:where(.pg-watch) .result-count { color: var(--watch-muted); font-size: .87rem; }
:where(.pg-watch) .video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
:where(.pg-watch) .video-card {
  --card-accent: var(--watch-blue);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  padding: 0;
  border: 1px solid var(--watch-line);
  border-radius: 22px;
  background: linear-gradient(155deg, rgb(var(--g4) / 0.96), rgb(var(--g2) / 0.98));
  color: var(--watch-text);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 18px 42px rgb(var(--g0) / 0.21);
  transition: transform .24s ease, border-color .24s ease, background .24s ease, box-shadow .24s ease;
}
:where(.pg-watch) .video-card:nth-child(3n + 2) { --card-accent: var(--watch-coral); }
:where(.pg-watch) .video-card:nth-child(3n + 3) { --card-accent: var(--watch-purple); }
:where(.pg-watch) .video-card::after { position: absolute; top: -4rem; right: -4rem; width: 9rem; height: 9rem; border-radius: 50%; background: color-mix(in srgb, var(--card-accent) 20%, transparent); filter: blur(22px); content: ""; pointer-events: none; }
:where(.pg-watch) .video-card:hover { transform: translateY(-7px) rotate(-.25deg); border-color: color-mix(in srgb, var(--card-accent) 55%, rgb(var(--g6))); background: linear-gradient(155deg, rgb(var(--g4) / 0.98), rgb(var(--g2) / 0.98)); box-shadow: 0 27px 58px rgb(var(--g0) / 0.34); }
:where(.pg-watch) .video-card.selected { border-color: var(--theme-primary); box-shadow: 0 0 0 1px color-mix(in srgb, var(--theme-primary) 40%, transparent), 0 24px 62px var(--theme-glow); }
:where(.pg-watch) .video-card.selected::before { position: absolute; z-index: 2; top: 11px; left: 11px; padding: 4px 8px; border-radius: 999px; background: var(--theme-primary); color: rgb(var(--g2)); font-size: .65rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; content: "Selected"; box-shadow: 0 5px 17px rgb(var(--g0) / 0.25); }
:where(.pg-watch) .thumb { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: rgb(var(--g0)); }
:where(.pg-watch) .video-card[data-orientation="portrait"] .thumb { aspect-ratio: 4 / 5; }
:where(.pg-watch) .thumb::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 57%, rgb(var(--g0) / 0.61)); content: ""; pointer-events: none; }
:where(.pg-watch) .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease, filter .35s ease; }
:where(.pg-watch) .video-card:hover .thumb img { transform: scale(1.045); filter: saturate(1.12); }
:where(.pg-watch) .duration { position: absolute; z-index: 1; right: 10px; bottom: 10px; padding: 4px 8px; border: 1px solid rgb(var(--g11) / 0.13); border-radius: 8px; background: rgb(var(--g0) / 0.78); color: white; font-size: .72rem; font-weight: 800; }
:where(.pg-watch) .card-copy { position: relative; z-index: 1; padding: 18px; }
:where(.pg-watch) .card-copy h3 { margin-bottom: 7px; font-size: 1.06rem; }
:where(.pg-watch) .card-copy p { margin-bottom: 0; color: var(--watch-muted); font-size: .82rem; }
:where(.pg-watch) .card-kind { display: inline-block; margin-bottom: 9px; color: var(--card-accent); font-size: .67rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
:where(.pg-watch) .progress-track { height: 4px; margin-top: 15px; overflow: hidden; border-radius: 999px; background: rgb(var(--g5)); }
:where(.pg-watch) .progress-track span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--card-accent), var(--watch-cyan)); }
:where(.pg-watch) .empty-state { grid-column: 1 / -1; padding: 38px; border: 1px dashed rgb(var(--g6)); border-radius: 16px; background: rgb(var(--g2) / 0.6); color: var(--watch-muted); text-align: center; }

:where(.pg-watch) .product-contract { position: relative; padding-block: 48px 58px; border-top: 1px solid var(--watch-line); }
:where(.pg-watch) .product-contract::before { position: absolute; z-index: -1; top: 0; right: -12rem; width: 27rem; height: 27rem; border-radius: 50%; background: rgb(var(--c-danger) / 0.1); filter: blur(35px); content: ""; }
:where(.pg-watch) .product-contract > div:first-child { max-width: 760px; }
:where(.pg-watch) .contract-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 31px; }
:where(.pg-watch) .contract-grid article { position: relative; overflow: hidden; min-height: 155px; padding: 21px; border: 1px solid var(--watch-line); border-radius: 22px; background: linear-gradient(145deg, rgb(var(--g3) / 0.92), rgb(var(--g1) / 0.96)); }
:where(.pg-watch) .contract-grid article::after { position: absolute; right: -2.5rem; bottom: -3.5rem; width: 8rem; height: 8rem; border: 1.6rem solid rgb(var(--c-accent) / 0.06); border-radius: 50%; content: ""; }
:where(.pg-watch) .contract-grid article:nth-child(2)::after { border-color: rgb(var(--c-accent) / 0.07); }
:where(.pg-watch) .contract-grid article:nth-child(3)::after { border-color: rgb(var(--c-danger) / 0.07); }
:where(.pg-watch) .contract-grid span { color: var(--watch-green); font-size: .69rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
:where(.pg-watch) .contract-grid h3 { margin-top: 14px; font-size: 1.2rem; }
:where(.pg-watch) .contract-grid p { margin-bottom: 0; color: var(--watch-muted); }
:where(.pg-watch) .watch-footer { border-top: 1px solid var(--watch-line); background: rgb(var(--g0) / 0.58); color: var(--watch-muted); }
:where(.pg-watch) .watch-footer .watch-shell { display: flex; justify-content: space-between; gap: 20px; padding-block: 30px; }
:where(.pg-watch) .watch-footer a { min-height: 44px; display: inline-flex; align-items: center; padding-inline: 6px; }

@keyframes hero-breathe {
  from { transform: scale(1.025); }
  to { transform: scale(1.06) translate3d(-.45%, -.25%, 0); }
}

@media (max-width: 980px) {
  :where(.pg-watch) .watch-hero { min-height: 610px; }
  :where(.pg-watch) .watch-hero::before { background: linear-gradient(90deg, rgb(var(--g1) / 0.97), rgb(var(--g1) / 0.78) 52%, rgb(var(--g1) / 0.25)), linear-gradient(0deg, rgb(var(--g0) / 0.94), transparent 36%); }
  :where(.pg-watch) .watch-hero-grid,:where(.pg-watch) .featured { grid-template-columns: 1fr; }
  :where(.pg-watch) .watch-hero-copy { max-width: 780px; }
  :where(.pg-watch) .channel-facts-wrap { width: min(550px, 100%); }
  :where(.pg-watch) .art-label { margin-left: 0; }
  :where(.pg-watch) .featured-copy { max-width: 790px; }
  :where(.pg-watch) .detail-heading-row,:where(.pg-watch) .collections-heading-row { grid-template-columns: 1fr; gap: 14px; }
  :where(.pg-watch) .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where(.pg-watch) .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where(.pg-watch) .contract-grid { grid-template-columns: 1fr; }
  :where(.pg-watch) .contract-grid article { min-height: 0; }
}

@media (max-width: 700px) {
  :where(.pg-watch) .watch-shell { width: min(100% - 24px, 1180px); }
  :where(.pg-watch) .watch-hero { min-height: 600px; padding-top: 40px; }
  :where(.pg-watch) .watch-hero-art img { object-position: 62% center; }
  :where(.pg-watch) .watch-hero::before { background: linear-gradient(90deg, rgb(var(--g1) / 0.94), rgb(var(--g1) / 0.5)), linear-gradient(0deg, rgb(var(--g0) / 0.97) 0%, rgb(var(--g0) / 0.44) 65%, rgb(var(--g0) / 0.3)); }
  :where(.pg-watch) h1 { font-size: clamp(3rem, 15vw, 5.4rem); }
  :where(.pg-watch) .hero-notes { display: grid; gap: 6px; }
  :where(.pg-watch) .channel-facts div { min-height: 88px; padding: 13px 7px; }
  :where(.pg-watch) .channel-facts strong { font-size: 1.45rem; }
  :where(.pg-watch) .featured { margin-top: -22px; padding: 15px; border-radius: 22px; }
  :where(.pg-watch) .player-kicker { margin-top: 4px; }
  :where(.pg-watch) .watch-detail { padding-block: 46px 44px; }
  :where(.pg-watch) .detail-grid,:where(.pg-watch) .collection-grid { grid-template-columns: 1fr; }
  :where(.pg-watch) .related-grid { grid-template-columns: 1fr; }
  :where(.pg-watch) .editorial-notice,:where(.pg-watch) .detail-panel,:where(.pg-watch) .related-panel,:where(.pg-watch) .collection-card { padding: 20px; border-radius: 16px; }
  :where(.pg-watch) .collection-card { min-height: 0; }
  :where(.pg-watch) .browse-head { align-items: stretch; flex-direction: column; }
  :where(.pg-watch) .video-grid { grid-template-columns: 1fr; }
  :where(.pg-watch) .video-card { grid-template-columns: 42% 1fr; grid-template-rows: 1fr; }
  :where(.pg-watch) .thumb,:where(.pg-watch) .video-card[data-orientation="portrait"] .thumb { aspect-ratio: 4 / 3; }
  :where(.pg-watch) .card-copy { align-self: center; padding: 14px; }
  :where(.pg-watch) .actions .action { flex: 1 1 auto; }
  :where(.pg-watch) .watch-footer .watch-shell { flex-direction: column; }
}

@media (max-width: 430px) {
  :where(.pg-watch) .channel-facts { grid-template-columns: 1fr; }
  :where(.pg-watch) .channel-facts div { grid-template-columns: 45px 1fr; min-height: 60px; text-align: left; align-items: center; }
  :where(.pg-watch) .channel-facts span { margin-top: 0; }
  :where(.pg-watch) .hero-action { width: 100%; }
  :where(.pg-watch) .fact-list { grid-template-columns: 1fr; }
  :where(.pg-watch) .fact-list dt { padding-bottom: 2px; border-bottom: 0; }
  :where(.pg-watch) .fact-list dd { padding-top: 2px; }
  :where(.pg-watch) .chapter-seek { grid-template-columns: auto minmax(0, 1fr); }
  :where(.pg-watch) .chapter-seek .seek-time { grid-column: 2; }
  :where(.pg-watch) .collection-video { grid-template-columns: 1fr; gap: 2px; }
  :where(.pg-watch) .collection-video > span:last-child { white-space: normal; }
  :where(.pg-watch) .video-card { grid-template-columns: 38% 1fr; }
  :where(.pg-watch) .card-copy h3 { font-size: .92rem; }
  :where(.pg-watch) .card-copy p { font-size: .74rem; }
}

@media (prefers-reduced-motion: reduce) {
  :where(.pg-watch) *,:where(.pg-watch) *::before,:where(.pg-watch) *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/* ---- pg-radio ---- */

/* @source radio.css */
/* HAL SUPREME Radio — black / gold / cyan broadcast room */
:where(.pg-radio) .radio-body{--gold:rgb(var(--c-accent));--gold-2:rgb(var(--c-accent));--cyan:rgb(var(--c-accent));--ink:rgb(var(--g0));background:radial-gradient(1100px 620px at 78% -10%,rgb(var(--c-accent) / 0.16),transparent 62%),radial-gradient(900px 640px at -10% 30%,rgb(var(--c-accent) / 0.12),transparent 64%),radial-gradient(700px 500px at 90% 95%,rgb(var(--c-accent) / 0.1),transparent 70%),var(--ink)}
:where(.pg-radio) .rd-shell{max-width:1240px;margin:0 auto;padding:clamp(18px,4vw,48px) clamp(16px,4vw,40px) 64px}
:where(.pg-radio) .rd-stage{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:clamp(24px,5vw,72px);align-items:center;min-height:min(78vh,820px)}
:where(.pg-radio) .rd-kicker{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 10px;border:1px solid rgb(var(--c-accent) / 0.35);border-radius:999px;background:linear-gradient(90deg,rgb(var(--c-accent) / 0.12),rgb(var(--c-accent) / 0.06));font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2)}
:where(.pg-radio) .rd-dot{width:9px;height:9px;border-radius:50%;background:rgb(var(--g7));box-shadow:0 0 0 0 rgb(var(--c-danger) / 0.6)}
:where(.pg-radio) [data-live=live] .rd-dot{background:rgb(var(--c-danger));animation:rdPulse 1.6s ease-out infinite}
@keyframes rdPulse{0%{box-shadow:0 0 0 0 rgb(var(--c-danger) / 0.65)}100%{box-shadow:0 0 0 12px rgb(var(--c-danger) / 0)}}
:where(.pg-radio) .rd-copy h1{margin:22px 0 14px;font-size:clamp(44px,7.4vw,96px);line-height:.92;letter-spacing:-.045em;font-weight:800;background:linear-gradient(100deg,rgb(var(--g11)) 0%,rgb(var(--g10)) 38%,var(--gold) 62%,var(--cyan) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
:where(.pg-radio) .rd-copy h1 em{font-style:italic;font-weight:300;letter-spacing:-.02em}
:where(.pg-radio) .rd-lede{max-width:56ch;color:rgb(var(--g8));font-size:clamp(16px,1.6vw,19px);margin:0 0 26px}
:where(.pg-radio) .rd-label{display:block;font:600 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
:where(.pg-radio) .rd-now{position:relative;overflow:hidden;padding:20px 22px 18px;border-radius:16px;border:1px solid rgb(var(--g11) / 0.09);background:linear-gradient(160deg,rgb(var(--g2) / 0.92),rgb(var(--g1) / 0.92));box-shadow:inset 0 1px 0 rgb(var(--g11) / 0.05),0 30px 80px -40px rgb(var(--c-accent) / 0.35)}
:where(.pg-radio) .rd-now::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(120deg,rgb(var(--c-accent) / 0.6),transparent 40%,rgb(var(--c-accent) / 0.5));-webkit-mask:linear-gradient(rgb(var(--g0)) 0 0) content-box,linear-gradient(rgb(var(--g0)) 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
:where(.pg-radio) .rd-now strong{display:block;margin:10px 0 4px;font-size:clamp(19px,2.2vw,25px);line-height:1.2;letter-spacing:-.01em}
:where(.pg-radio) .rd-meta{color:var(--muted);font:500 13px/1.4 var(--mono)}
:where(.pg-radio) .rd-eq{position:absolute;right:20px;top:20px;display:flex;gap:3px;align-items:flex-end;height:22px}
:where(.pg-radio) .rd-eq i{width:3px;height:30%;border-radius:4px;background:linear-gradient(var(--gold-2),var(--cyan));opacity:.4}
:where(.pg-radio) [data-live=live] .rd-eq i{opacity:1;animation:rdEq 1.1s ease-in-out infinite}
:where(.pg-radio) .rd-eq i:nth-child(2){animation-delay:-.3s}:where(.pg-radio) .rd-eq i:nth-child(3){animation-delay:-.7s}:where(.pg-radio) .rd-eq i:nth-child(4){animation-delay:-.15s}:where(.pg-radio) .rd-eq i:nth-child(5){animation-delay:-.5s}:where(.pg-radio) .rd-eq i:nth-child(6){animation-delay:-.9s}:where(.pg-radio) .rd-eq i:nth-child(7){animation-delay:-.4s}
@keyframes rdEq{0%,100%{height:22%}50%{height:100%}}
:where(.pg-radio) .rd-actions{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0}
:where(.pg-radio) .rd-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:12px;border:1px solid rgb(var(--g11) / 0.14);color:var(--text);text-decoration:none;font-weight:600;font-size:14.5px;background:rgb(var(--g11) / 0.03);transition:transform .18s ease,border-color .18s ease,background .18s ease}
:where(.pg-radio) .rd-btn:hover{transform:translateY(-1px);border-color:rgb(var(--c-accent) / 0.55)}
:where(.pg-radio) .rd-btn.primary{color:rgb(var(--g1));border-color:transparent;background:linear-gradient(135deg,var(--gold-2),var(--gold) 55%,rgb(var(--c-accent)));box-shadow:0 12px 30px -12px rgb(var(--c-accent) / 0.7)}
:where(.pg-radio) .rd-btn.ghost{border-style:dashed}
:where(.pg-radio) .rd-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:6px 0 0;border:1px solid rgb(var(--g11) / 0.08);border-radius:16px;overflow:hidden;background:rgb(var(--g11) / 0.08)}
:where(.pg-radio) .rd-facts div{padding:12px 14px;background:rgb(var(--g1) / 0.94)}
:where(.pg-radio) .rd-facts dt{font:600 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgb(var(--g7))}
:where(.pg-radio) .rd-facts dd{margin:6px 0 0;font-size:13.5px;color:rgb(var(--g9))}
:where(.pg-radio) .rd-phone{margin:0;justify-self:center;width:min(380px,100%)}
:where(.pg-radio) .rd-frame{position:relative;aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:rgb(var(--g0));border:1px solid rgb(var(--g11) / 0.12);box-shadow:0 0 0 9px rgb(var(--g1)),0 0 0 10px rgb(var(--c-accent) / 0.35),0 50px 120px -30px rgb(var(--c-accent) / 0.35),0 40px 90px -40px rgb(var(--c-accent) / 0.5)}
:where(.pg-radio) .rd-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
:where(.pg-radio) .rd-poster{all:unset;cursor:pointer;position:absolute;inset:0;display:grid;place-items:center}
:where(.pg-radio) .rd-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.15) contrast(1.05);transform:scale(1.02);transition:transform .6s ease}
:where(.pg-radio) .rd-poster:hover img{transform:scale(1.06)}
:where(.pg-radio) .rd-poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(var(--g0) / 0.05),rgb(var(--g0) / 0.55))}
:where(.pg-radio) .rd-play{position:relative;z-index:1;width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:rgb(var(--c-accent) / 0.92);box-shadow:0 0 0 10px rgb(var(--c-accent) / 0.18),0 18px 40px rgb(var(--g0) / 0.5)}
:where(.pg-radio) .rd-play svg{width:30px;height:30px;fill:rgb(var(--g1));margin-left:4px}
:where(.pg-radio) .rd-poster-tag{position:absolute;z-index:1;bottom:22px;font:600 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgb(var(--g11))}
:where(.pg-radio) .rd-poster:focus-visible{outline:3px solid var(--cyan);outline-offset:-3px}
:where(.pg-radio) .rd-phone figcaption{margin-top:16px;text-align:center;color:rgb(var(--g7));font-size:12.5px}
:where(.pg-radio) .rd-gallery{margin-top:clamp(40px,7vw,90px)}
:where(.pg-radio) .rd-gallery-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
:where(.pg-radio) .rd-gallery h2{margin:8px 0 0;font-size:clamp(28px,3.6vw,42px);letter-spacing:-.03em}
:where(.pg-radio) .rd-filter{display:inline-flex;padding:4px;border-radius:12px;border:1px solid rgb(var(--g11) / 0.1);background:rgb(var(--g11) / 0.03)}
:where(.pg-radio) .rd-filter button{all:unset;cursor:pointer;padding:8px 14px;border-radius:8px;font-weight:600;font-size:13.5px;color:rgb(var(--g8))}
:where(.pg-radio) .rd-filter button[aria-pressed=true]{color:rgb(var(--g1));background:linear-gradient(135deg,var(--gold-2),var(--gold))}
:where(.pg-radio) .rd-filter button:focus-visible{outline:2px solid var(--cyan)}
:where(.pg-radio) .rd-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:16px}
:where(.pg-radio) .rd-card a{display:block;position:relative;aspect-ratio:9/16;border-radius:16px;overflow:hidden;color:rgb(var(--g11));text-decoration:none;border:1px solid rgb(var(--g11) / 0.08);background:rgb(var(--g2));animation:rdIn .5s ease both;animation-delay:calc(var(--i) * 40ms)}
:where(.pg-radio) .rd-card a{aspect-ratio:4/5}
@keyframes rdIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
:where(.pg-radio) .rd-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
:where(.pg-radio) .rd-card a::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgb(var(--g0) / 0.88))}
:where(.pg-radio) .rd-card a:hover img{transform:scale(1.05)}
:where(.pg-radio) .rd-card a:hover{border-color:rgb(var(--c-accent) / 0.5)}
:where(.pg-radio) .rd-card a:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
:where(.pg-radio) .rd-card-meta{position:absolute;z-index:1;left:12px;right:12px;bottom:12px}
:where(.pg-radio) .rd-card-meta strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14.5px;line-height:1.25}
:where(.pg-radio) .rd-card-meta small{display:block;margin-top:5px;font:500 11px/1.3 var(--mono);color:var(--gold-2);letter-spacing:.04em}
:where(.pg-radio) .rd-skel{aspect-ratio:9/16;border-radius:16px;background:linear-gradient(100deg,rgb(var(--g2)) 30%,rgb(var(--g3)) 50%,rgb(var(--g2)) 70%);background-size:200% 100%;animation:rdSk 1.4s linear infinite}
@keyframes rdSk{to{background-position:-200% 0}}
:where(.pg-radio) .rd-empty,:where(.pg-radio) .rd-fine{color:rgb(var(--g7));font-size:13px}
:where(.pg-radio) .rd-fine a{color:var(--gold-2)}
@media (max-width:860px){:where(.pg-radio) .rd-stage{grid-template-columns:1fr;min-height:0}:where(.pg-radio) .rd-phone{order:-1;width:min(330px,86vw)}:where(.pg-radio) .rd-facts{grid-template-columns:1fr}:where(.pg-radio) .rd-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media (prefers-reduced-motion:reduce){:where(.pg-radio) *{animation:none!important;transition:none!important}}

/* ---- pg-selfhost ---- */

    :root:where(.pg-selfhost) {
      color-scheme: dark;
      --bg: rgb(var(--g0));
      --panel: rgb(var(--g2));
      --panel-2: rgb(var(--g2));
      --divider: rgb(var(--g4));
      --text: rgb(var(--g10));
      --muted: rgb(var(--g7));
      --accent: rgb(var(--c-accent));
      --accent-dim: rgb(var(--c-accent) / 0.16);
      --success: rgb(var(--c-ok));
      --font: var(--font-ui);
      --mono: var(--font-mono);
      --radius: 12px;
    }
    :where(.pg-selfhost) *,:where(.pg-selfhost) *::before,:where(.pg-selfhost) *::after { box-sizing: border-box; }
    :where(.pg-selfhost) body {
      margin: 0;
      min-height: 100vh;
      font-family: var(--font-ui);
      font-size: 15px;
      line-height: 1.55;
      background: var(--bg);
      color: var(--text);
      -webkit-font-smoothing: antialiased;
    }
    :where(.pg-selfhost) a { color: var(--accent); text-decoration: none; }
    :where(.pg-selfhost) a:hover { text-decoration: underline; }
    :where(.pg-selfhost) .top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 20px;
      border-bottom: 1px solid var(--divider);
      background: var(--panel-2);
    }
    :where(.pg-selfhost) .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--text);
      font-weight: 650;
      letter-spacing: 0.02em;
      text-decoration: none;
    }
    :where(.pg-selfhost) .brand:hover { text-decoration: none; color: var(--accent); }
    :where(.pg-selfhost) .brand img { width: 28px; height: 28px; }
    :where(.pg-selfhost) .nav-links { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; }
    :where(.pg-selfhost) .nav-links a { color: var(--muted); }
    :where(.pg-selfhost) .nav-links a:hover { color: var(--accent); }
    :where(.pg-selfhost) .wrap {
      width: min(720px, calc(100% - 32px));
      margin: 0 auto;
      padding: 36px 0 64px;
    }
    :where(.pg-selfhost) h1 {
      margin: 0 0 8px;
      font-size: clamp(1.6rem, 3vw, 2rem);
      font-weight: 700;
      letter-spacing: -0.02em;
    }
    :where(.pg-selfhost) .lede { color: var(--muted); margin: 0 0 28px; max-width: 54ch; }
    :where(.pg-selfhost) .card {
      background: var(--panel);
      border: 1px solid var(--divider);
      border-radius: var(--radius);
      padding: 20px 20px 18px;
      margin-bottom: 16px;
    }
    :where(.pg-selfhost) .card h2 {
      margin: 0 0 10px;
      font-size: 0.95rem;
      font-weight: 650;
      color: var(--accent);
    }
    :where(.pg-selfhost) .card p,:where(.pg-selfhost) .card li { color: var(--muted); margin: 0 0 8px; }
    :where(.pg-selfhost) .card ul { margin: 0; padding-left: 1.15rem; }
    :where(.pg-selfhost) .card li { margin-bottom: 6px; }
    :where(.pg-selfhost) pre {
      margin: 0;
      padding: 14px 16px;
      overflow: auto;
      background: rgb(var(--g1));
      border: 1px solid var(--divider);
      border-radius: 8px;
      font-family: var(--font-mono);
      font-size: 12px;
      line-height: 1.55;
      color: rgb(var(--g10));
    }
    :where(.pg-selfhost) code {
      font-family: var(--font-mono);
      font-size: 0.86em;
      color: rgb(var(--c-accent));
    }
    :where(.pg-selfhost) .note {
      margin-top: 12px;
      font-size: 12.5px;
      color: var(--muted);
    }
    :where(.pg-selfhost) .note strong { color: var(--success); font-weight: 600; }
    :where(.pg-selfhost) .links {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 8px;
    }
    :where(.pg-selfhost) .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 9px 14px;
      border-radius: 8px;
      border: 1px solid rgb(var(--c-accent) / 0.45);
      background: var(--accent-dim);
      color: var(--accent);
      font-size: 13px;
      font-weight: 600;
      text-decoration: none;
    }
    :where(.pg-selfhost) .btn:hover { background: rgb(var(--c-accent) / 0.28); text-decoration: none; }
    :where(.pg-selfhost) .btn.ghost {
      background: transparent;
      border-color: var(--divider);
      color: var(--muted);
      font-weight: 500;
    }
    :where(.pg-selfhost) .btn.ghost:hover { color: var(--accent); border-color: rgb(var(--c-accent) / 0.45); }
    :where(.pg-selfhost) .foot {
      margin-top: 28px;
      padding-top: 16px;
      border-top: 1px solid var(--divider);
      font-size: 12.5px;
      color: var(--muted);
    }
  
/* ---- pg-releases ---- */

:root:where(.pg-releases) {
  --bg: rgb(var(--g1));
  --fg: rgb(var(--g10));
  --accent: rgb(var(--c-accent));
  --accent2: rgb(var(--c-accent));
  --muted: rgb(var(--g7));
  --card: rgb(var(--g3));
  --border: rgb(var(--g4));
}
:where(.pg-releases) * { box-sizing: border-box; margin: 0; padding: 0; }
:where(.pg-releases) body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  line-height: 1.6;
  min-height: 100vh;
}
:where(.pg-releases) nav {
  background: rgb(var(--g1) / 0.9);
  padding: 1.2rem 2rem;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
:where(.pg-releases) nav .logo {
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
:where(.pg-releases) nav ul {
  display: flex;
  gap: 2rem;
  list-style: none;
}
:where(.pg-releases) nav a {
  color: var(--fg);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.2s;
}
:where(.pg-releases) nav a:hover { color: var(--accent); }
:where(.pg-releases) .hero {
  padding: 5rem 2rem 4rem;
  text-align: center;
  background: radial-gradient(ellipse at top, rgb(var(--c-accent) / 0.08), transparent 60%);
}
:where(.pg-releases) .hero h1 {
  font-size: 3.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
:where(.pg-releases) .hero p { color: var(--muted); font-size: 1.2rem; max-width: 700px; margin: 0 auto; }
:where(.pg-releases) .container { max-width: 1200px; margin: 0 auto; padding: 2rem; }
:where(.pg-releases) .section { margin: 4rem 0; }
:where(.pg-releases) .section h2 {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  color: var(--accent);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
}
:where(.pg-releases) .card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s, border-color 0.2s;
}
:where(.pg-releases) .card:hover { transform: translateY(-2px); border-color: var(--accent); }
:where(.pg-releases) .card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}
:where(.pg-releases) .card img { width: 100%; height: auto; display: block; }
:where(.pg-releases) .card .body { padding: 1.2rem; }
:where(.pg-releases) .card h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
:where(.pg-releases) .card .meta { color: var(--muted); font-size: 0.9rem; margin-bottom: 0.8rem; }
:where(.pg-releases) .card .desc { color: var(--fg); font-size: 0.95rem; }
:where(.pg-releases) .video-wrap { position: relative; padding-bottom: 56.25%; height: 0; }
:where(.pg-releases) .video-wrap iframe,:where(.pg-releases) .video-wrap video {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  border: 0; border-radius: 8px;
}
:where(.pg-releases) .short-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 540px; margin: 1rem auto; }
:where(.pg-releases) .short-grid .short { width: 100%; border-radius: 12px; }
:where(.pg-releases) .tag {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  background: rgb(var(--c-accent) / 0.1);
  color: var(--accent);
  border-radius: 22px;
  font-size: 0.8rem;
  margin: 0.2rem;
}
:where(.pg-releases) .status {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
}
:where(.pg-releases) .status.live { background: rgb(var(--c-danger) / 0.2); color: rgb(var(--c-danger)); }
:where(.pg-releases) .status.ready { background: rgb(var(--c-ok) / 0.2); color: rgb(var(--c-ok)); }
:where(.pg-releases) .status.pending { background: rgb(var(--c-accent) / 0.2); color: rgb(var(--c-accent)); }
:where(.pg-releases) footer {
  border-top: 1px solid var(--border);
  padding: 2rem;
  text-align: center;
  color: var(--muted);
  margin-top: 4rem;
}

/* polish 2026-09-28: cards are links, so keep their text styled like text */
:where(.pg-releases) a.card { color: inherit; text-decoration: none; }
:where(.pg-releases) a.card h3 { color: var(--fg); }
:where(.pg-releases) a.card .desc { color: var(--muted); }
:where(.pg-releases) a.card:hover h3 { color: var(--accent); }

/* =====================================================================
   HAL SUPREME — Forge design system v1 (one stylesheet)
   Materials: brushed/anodized graphite · satin & knurled plastic ·
   frosted glass · carbon & rubber details · one orange signal accent.
   ===================================================================== */
:root{
  color-scheme:dark;
  /* graphite ramp (rgb channels) */
  --g0:8 9 10;--g1:13 14 16;--g2:19 20 23;--g3:27 29 33;--g4:38 41 46;--g5:58 62 69;
  --g6:92 97 105;--g7:140 146 155;--g8:185 190 197;--g9:222 225 229;--g10:244 245 247;--g11:255 255 255;
  --c-accent:255 107 44;--c-accent-hi:255 145 92;--c-ok:62 207 142;--c-danger:255 84 84;--c-warn:255 190 92;
  /* semantic */
  --bg:rgb(var(--g1));--panel:rgb(var(--g2));--panel-2:rgb(var(--g1));--panel-3:rgb(var(--g3));
  --text:rgb(var(--g10));--muted:rgb(var(--g7));--faint:rgb(var(--g6));
  --divider:rgb(var(--g11) / .07);--divider-strong:rgb(var(--g11) / .16);--line:rgb(var(--g11) / .08);
  --accent:rgb(var(--c-accent));--on-accent:#1a0a02;--accent-dim:rgb(var(--c-accent) / .14);--accent-glow:rgb(var(--c-accent) / .34);
  --success:rgb(var(--c-ok));--danger:rgb(var(--c-danger));
  --message-user-bg:rgb(var(--g3));--message-user-border:rgb(var(--g11) / .08);--message-assistant-start:rgb(var(--g2));
  --code-surface:rgb(var(--g0));--code-text:rgb(var(--g10));
  /* type */
  --font-ui:system-ui,sans-serif;
  --font-mono:ui-monospace,monospace;
  --font:var(--font-ui);--mono:var(--font-mono);
  --fs-2xs:10.5px;--fs-xs:12px;--fs-sm:13.5px;--fs-md:15px;--fs-lg:18px;--fs-xl:clamp(22px,2.2vw,28px);--fs-2xl:clamp(30px,4vw,46px);--fs-3xl:clamp(38px,6vw,72px);
  /* spacing (4px grid) */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:72px;
  /* radii */
  --r-xs:4px;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:22px;--r-pill:999px;--radius:12px;--radius-sm:8px;
  /* motion */
  --ease:cubic-bezier(.2,.8,.2,1);--dur:200ms;--dur-slow:420ms;
  /* textures (procedural, inline SVG — zero requests) */
  --tx-noise:url("/assets/art/tx-noise.webp");
  --tx-brush:url("/assets/art/tx-brush.webp");
  --tx-knurl:repeating-linear-gradient(45deg,rgb(var(--g11) / .035) 0 1px,transparent 1px 4px),repeating-linear-gradient(-45deg,rgb(0 0 0 / .28) 0 1px,transparent 1px 4px);
  --tx-carbon:repeating-linear-gradient(45deg,rgb(var(--g11) / .04) 0 2px,transparent 2px 4px),repeating-linear-gradient(-45deg,rgb(0 0 0 / .45) 0 2px,transparent 2px 4px);
  --tx-machined:repeating-radial-gradient(circle at 50% 50%,rgb(var(--g11) / .028) 0 1px,transparent 1px 3px);
  /* materials */
  --m-anodized:linear-gradient(180deg,rgb(var(--g4)) 0%,rgb(var(--g3)) 52%,rgb(var(--g2)) 100%);
  --m-sheen:linear-gradient(100deg,transparent 18%,rgb(var(--g11) / .07) 34%,transparent 46%,rgb(var(--g11) / .035) 64%,transparent 80%);
  --m-satin:linear-gradient(180deg,rgb(var(--g3)),rgb(var(--g2)));
  --m-plastic:linear-gradient(180deg,rgb(var(--g4)),rgb(var(--g3)) 60%,rgb(var(--g2)));
  --m-signal:linear-gradient(180deg,rgb(var(--c-accent-hi)),rgb(var(--c-accent)) 55%,#d94d12);
  --m-well:linear-gradient(180deg,rgb(var(--g0)),rgb(var(--g1)));
  --screw:radial-gradient(circle at 40% 35%,rgb(var(--g8)) 0 1px,rgb(var(--g5)) 1.6px,rgb(var(--g2)) 3.2px,transparent 3.6px);
  /* elevation: rim light + bevel + real cast shadows (key + ambient) */
  --bevel:inset 0 1px 0 rgb(var(--g11) / .13),inset 0 -1px 0 rgb(0 0 0 / .5),inset 0 0 0 1px rgb(var(--g11) / .03);
  --rim:0 0 0 1px rgb(0 0 0 / .65);
  --e1:var(--bevel),var(--rim),0 1px 1px rgb(0 0 0 / .5),0 3px 6px -2px rgb(0 0 0 / .45);
  --e2:var(--bevel),var(--rim),0 2px 3px rgb(0 0 0 / .45),0 12px 24px -10px rgb(0 0 0 / .7);
  --e3:var(--bevel),var(--rim),0 4px 8px rgb(0 0 0 / .4),0 28px 56px -18px rgb(0 0 0 / .85),0 60px 90px -40px rgb(0 0 0 / .6);
  --e-well:inset 0 2px 5px rgb(0 0 0 / .75),inset 0 0 0 1px rgb(0 0 0 / .6),0 1px 0 rgb(var(--g11) / .06);
  --shadow:var(--e3);--shadow-soft:var(--e2);
}
[data-theme="light"]{
  color-scheme:light;
  --bg:rgb(var(--g9));--panel:rgb(var(--g10));--panel-2:rgb(var(--g9));--panel-3:#fff;
  --text:rgb(var(--g2));--muted:rgb(var(--g6));--faint:rgb(var(--g7));
  --divider:rgb(0 0 0 / .09);--divider-strong:rgb(0 0 0 / .2);--line:rgb(0 0 0 / .1);
  --accent:#c2410c;--on-accent:#fff;--message-user-bg:rgb(var(--g9));--message-assistant-start:#fff;--code-surface:rgb(var(--g2));
  --m-anodized:linear-gradient(180deg,#fbfbfc,#e7e8ea 55%,#d9dbde);--m-satin:linear-gradient(180deg,#fafafa,#eceef0);
  --m-plastic:linear-gradient(180deg,#fff,#eceef0 60%,#e1e3e6);--m-well:linear-gradient(180deg,#e2e4e7,#eef0f2);
  --bevel:inset 0 1px 0 #fff,inset 0 -1px 0 rgb(0 0 0 / .1);--rim:0 0 0 1px rgb(0 0 0 / .14);
  --e-well:inset 0 2px 4px rgb(0 0 0 / .14),inset 0 0 0 1px rgb(0 0 0 / .1);
  --e1:var(--bevel),var(--rim),0 2px 4px -1px rgb(0 0 0 / .14);
  --e2:var(--bevel),var(--rim),0 12px 24px -12px rgb(0 0 0 / .28);
  --e3:var(--bevel),var(--rim),0 30px 60px -26px rgb(0 0 0 / .35);
}

/* ---------- base ---------- */
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv11"}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(1100px 520px at 50% -12%,rgb(var(--g11) / .06),transparent 62%),var(--tx-brush);background-size:auto,600px 120px;opacity:.35}
[data-theme="light"] body::before{background:radial-gradient(1100px 520px at 50% -12%,#fff,transparent 62%);}
::selection{background:var(--accent);color:var(--on-accent)}
a{color:inherit}
:focus-visible{outline:2px solid rgb(var(--c-accent) / .85);outline-offset:2px}
h1,h2,h3{letter-spacing:-.025em}
code,pre,kbd{font-family:var(--font-mono)}

/* ---------- material primitives (reused everywhere) ---------- */

/* 1. machined chassis bars: header + composer */
.header,.hs-head,.site-head{
  background:var(--m-sheen),var(--tx-brush),var(--m-anodized);background-size:200% 100%,600px 120px,auto;
  border-bottom:1px solid rgb(0 0 0 / .75);
  box-shadow:inset 0 1px 0 rgb(var(--g11) / .12),0 1px 0 rgb(var(--g11) / .03),0 10px 28px -6px rgb(0 0 0 / .6);
  z-index:40}
.header::after,.hs-head::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgb(var(--c-accent) / .55) 50%,transparent);opacity:.5;pointer-events:none}
.hs-head{backdrop-filter:none}
.hs-brand,.brand{color:var(--text);text-decoration:none}
.brand-name,.hs-brand{font-weight:760;letter-spacing:.17em;font-size:12.5px;text-transform:uppercase;text-shadow:0 1px 0 rgb(0 0 0 / .6)}
.brand-mark,.hs-brand img{filter:drop-shadow(0 1px 1px rgb(0 0 0 / .6)) drop-shadow(0 0 6px rgb(var(--c-accent) / .25))}

/* nav: inset anodized track with raised active key */
.hs-tabs{background:var(--m-well);box-shadow:var(--e-well);border-radius:var(--r-md);padding:3px;gap:2px}
.hs-tabs a,.hs-more,.hs-drop a{color:rgb(var(--g8));border-radius:9px;font-size:var(--fs-sm);font-weight:560;transition:color var(--dur) var(--ease),background var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.hs-tabs a:hover,.hs-more:hover{color:var(--text);background:rgb(var(--g11) / .04)}
.hs-tabs a[aria-current="page"],.hs-tabs a.active{color:var(--text);background:var(--m-plastic);box-shadow:var(--e1)}
.hs-tabs a[aria-current="page"]::after{content:"";display:block;height:2px;margin:2px auto 0;width:14px;border-radius:2px;background:var(--accent);box-shadow:0 0 8px var(--accent-glow)}
.hs-drop,.hs-sheet,.hs-mobile{background:linear-gradient(180deg,rgb(var(--g3) / .92),rgb(var(--g2) / .94)),var(--tx-noise);border:1px solid rgb(var(--g11) / .08);box-shadow:var(--e3);border-radius:var(--r-lg);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)}
.hs-burger,.hs-cta{background:var(--m-plastic);box-shadow:var(--e1);border:0;border-radius:var(--r-sm);color:var(--text)}
.hs-cta{background:var(--m-signal);color:var(--on-accent);font-weight:700}

/* 2. plastic keys: every secondary button */
.btn-menu,.icon-btn,.mode-trigger,.btn-secondary,.portal-motion-button,.radio-live-link,.scroll-bottom,.workspace-launch,.workspace-button,
.button.secondary,.btn.ghost,.portal-cta:not(.primary),.starter,.mode-jumps button,.chip,.msg-actions button,.btn-copy-msg,.btn-play-song,.code-copy,
.hal-dock-toggle,.insight-guide-trigger,.hal-dock-button,.hal-dock-link,.filter,.seek-button,.clear-button,.btn-stop,.hero-action:not(:first-child),.action{
  background:var(--tx-noise),var(--m-plastic);background-size:160px,auto;background-blend-mode:soft-light,normal;
  color:var(--text);border:0;box-shadow:var(--e1);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),filter var(--dur) var(--ease)}
:is(.btn-menu,.icon-btn,.mode-trigger,.btn-secondary,.portal-motion-button,.radio-live-link,.workspace-launch,.workspace-button,.button.secondary,.btn.ghost,.portal-cta,.starter,.mode-jumps button,.chip,.hal-dock-toggle,.insight-guide-trigger,.filter,.button,.btn,.hs-tabs a):hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:var(--e2)}
:is(.btn-menu,.icon-btn,.mode-trigger,.btn-secondary,.portal-motion-button,.radio-live-link,.workspace-launch,.workspace-button,.button,.btn,.portal-cta,.starter,.mode-jumps button,.chip,.btn-send,.btn-new,.hal-dock-toggle,.insight-guide-trigger,.filter):active{transform:translateY(1px) scale(.99);box-shadow:inset 0 2px 5px rgb(0 0 0 / .6),var(--rim)}
.icon-btn[aria-pressed="true"],.toggle.on,.filter.active,.filter[aria-pressed="true"],.mode-jumps button.active{color:var(--accent);box-shadow:var(--e1),0 0 0 1px rgb(var(--c-accent) / .5),0 0 16px -2px rgb(var(--c-accent) / .45)}

/* 3. signal keys: the ONE accent action per surface */
.btn-send,.btn-new,.button:not(.secondary),.btn:not(.ghost),.portal-cta.primary,.create-button,.record-button,.hero-action:first-child,.hs-cta{
  background:linear-gradient(180deg,rgb(var(--g11) / .28),transparent 45%),var(--m-signal);
  color:var(--on-accent);font-weight:720;border:1px solid #a83a08;
  box-shadow:inset 0 1px 0 rgb(var(--g11) / .45),inset 0 -2px 0 rgb(0 0 0 / .18),0 1px 0 rgb(0 0 0 / .4),0 10px 24px -10px rgb(var(--c-accent) / .85);
  text-shadow:0 1px 0 rgb(var(--g11) / .25);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),filter var(--dur) var(--ease)}
.btn-send:disabled{background:var(--m-plastic);color:var(--faint);border-color:transparent;box-shadow:var(--e1);text-shadow:none}
.button,.btn{display:inline-flex;align-items:center;gap:8px;border-radius:var(--r-md);text-decoration:none}

/* 4. panels: satin plastic plates with rim light */
.mode-panel,.mode-sheet-panel,.modal-card,.hal-dock-panel,.insight-guide-panel,.insight-hint,.insight-trail,.toast,.detail-panel,.related-panel,.studio-panel,.launch-panel,.settings-section{
  background:var(--tx-noise),var(--m-satin);background-size:160px,auto;background-blend-mode:soft-light,normal;
  border:1px solid rgb(var(--g11) / .07);box-shadow:var(--e3);border-radius:var(--r-lg)}
.mode-popover .mode-panel,.hal-dock-panel,.insight-guide-panel,.toast{background:linear-gradient(180deg,rgb(var(--g3) / .86),rgb(var(--g2) / .9)),var(--tx-noise);backdrop-filter:blur(16px) saturate(1.25);-webkit-backdrop-filter:blur(16px) saturate(1.25)}
.mode-option{border-radius:10px;transition:background var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.mode-option:hover{background:rgb(var(--g11) / .04)}
.mode-option.active,.mode-option[aria-selected="true"]{background:linear-gradient(90deg,rgb(var(--c-accent) / .12),transparent);box-shadow:inset 0 0 0 1px rgb(var(--c-accent) / .35),inset 3px 0 0 var(--accent)}
.mode-option-icon,.mode-trigger-kicker,.empty-kicker,.eyebrow,.card-kicker,.workspace-kicker,.player-kicker,.panel-kicker{color:var(--accent)}
.mode-option-key,.mode-trigger-kicker,kbd{font-family:var(--font-mono);background:var(--m-well);box-shadow:var(--e-well);border:0;border-radius:6px;font-size:var(--fs-2xs);letter-spacing:.12em;text-transform:uppercase}
.mode-trigger{border-radius:var(--r-md)}
.status-pill{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:var(--m-well);box-shadow:var(--e-well);border:0;border-radius:var(--r-pill)}
.status-dot,.radio-live-dot,.live-dot,.preview-dot{box-shadow:0 0 0 3px rgb(var(--c-accent) / .16),0 0 10px currentColor}

/* 5. sidebar & workspace: recessed carbon rails */
.sidebar,.workspace-pane{
  background:linear-gradient(180deg,rgb(var(--g2) / .94),rgb(var(--g1) / .97)),var(--tx-carbon);
  border-color:rgb(0 0 0 / .8);box-shadow:inset -1px 0 0 rgb(var(--g11) / .05),12px 0 30px -18px rgb(0 0 0 / .8)}
.workspace-pane{box-shadow:inset 1px 0 0 rgb(var(--g11) / .05),-12px 0 30px -18px rgb(0 0 0 / .8)}
.history-label{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.18em;color:var(--faint);text-transform:uppercase}
.history-item,.sidebar-links a{border-radius:var(--r-sm);color:rgb(var(--g8));transition:background var(--dur),color var(--dur)}
.history-item:hover,.sidebar-links a:hover{background:rgb(var(--g11) / .045);color:var(--text)}
.history-item.active,.history-item[aria-current="true"],.sidebar-links a[aria-current="page"]{color:var(--text);background:rgb(var(--g11) / .055);box-shadow:inset 2px 0 0 var(--accent)}
.product-ribbon{background:rgb(0 0 0 / .28);border-bottom:1px solid rgb(var(--g11) / .05);box-shadow:inset 0 -1px 0 rgb(0 0 0 / .5)}

/* 6. hero: a machined slab that sits proud of the screen */
.signal-portal,.hero,.watch-hero,.build-hero,.studio-hero,.vision-band,.wrap>.card:first-of-type{
  position:relative;isolation:isolate;
  background:radial-gradient(900px 320px at 78% -30%,rgb(var(--g11) / .09),transparent 62%),var(--m-sheen),var(--tx-brush),linear-gradient(180deg,rgb(var(--g3)),rgb(var(--g2)) 70%,rgb(var(--g1)));
  background-size:auto,220% 100%,600px 120px,auto;
  border:1px solid rgb(0 0 0 / .8);border-radius:var(--r-xl);box-shadow:var(--e3);
  transform-style:preserve-3d;transition:transform var(--dur-slow) var(--ease),box-shadow var(--dur-slow) var(--ease),background-position 1.2s var(--ease)}
.signal-portal:hover,.hero:hover,.watch-hero:hover,.build-hero:hover,.studio-hero:hover,.vision-band:hover{background-position:0 0,100% 0,0 0,0 0}
/* corner screws */
.signal-portal::before,.hero::before,.vision-band::before,.watch-hero::before,.build-hero::before,.studio-hero::before{
  content:"";position:absolute;inset:10px;pointer-events:none;z-index:-1;border-radius:calc(var(--r-xl) - 8px);
  background:var(--screw) 0 0/8px 8px no-repeat,var(--screw) 100% 0/8px 8px no-repeat,var(--screw) 0 100%/8px 8px no-repeat,var(--screw) 100% 100%/8px 8px no-repeat;
  box-shadow:inset 0 0 0 1px rgb(var(--g11) / .035);opacity:.9}
.signal-portal::after,.hero::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(600px circle at var(--mx,50%) var(--my,0%),rgb(var(--g11) / .08),transparent 45%);opacity:var(--glow,0);transition:opacity var(--dur-slow)}
.hero{padding:clamp(28px,5vw,64px) clamp(20px,4vw,56px);margin-top:clamp(16px,3vw,32px)}
.empty h1,.static-welcome h1,.hero h1,.watch-hero h1,.build-hero h1,.studio-hero h1{
  font-size:var(--fs-3xl);line-height:1.02;font-weight:780;letter-spacing:-.04em;
  background:linear-gradient(180deg,#fff 0%,rgb(var(--g9)) 42%,rgb(var(--g7)) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgb(0 0 0 / .55)) drop-shadow(0 10px 18px rgb(0 0 0 / .45))}
.hero h1 strong,.empty h1 em,.static-welcome h1 em{background:var(--m-signal);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:normal}
[data-theme="light"] :is(.empty h1,.hero h1){background:linear-gradient(180deg,rgb(var(--g2)),rgb(var(--g5)));-webkit-background-clip:text;background-clip:text;filter:none}
.eyebrow,.empty-kicker,.card-kicker{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.2em;text-transform:uppercase}
.eyebrow::before,.empty-kicker::before{content:"";display:inline-block;width:18px;height:1px;background:var(--accent);vertical-align:middle;margin-right:10px;box-shadow:0 0 6px var(--accent-glow)}
.lede,.portal-story>p,.section-intro{color:rgb(var(--g8));max-width:62ch}
.metric-strip span,.hero-facts span,.hero-notes span{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--m-well);box-shadow:var(--e-well);border:0;border-radius:var(--r-pill)}

/* 7. cards: raised plates, knurled edge strip, real tilt */
.card,.portal-path,.principle,.status-card,.video-card,.collection-card,.related-card,.feature-card,.price-card,.connection-card,.boundary-card,.mini-card,.voice-card,.launch-card,.estimate-card,.video-preview-card{
  position:relative;isolation:isolate;
  background:var(--tx-noise),linear-gradient(180deg,rgb(var(--g3)),rgb(var(--g2)));background-size:160px,auto;background-blend-mode:soft-light,normal;
  border:1px solid rgb(0 0 0 / .7);border-radius:var(--r-lg);box-shadow:var(--e2);
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
  transition:transform var(--dur-slow) var(--ease),box-shadow var(--dur-slow) var(--ease)}
.card::before,.portal-path::before,.feature-card::before,.price-card::before{content:"";position:absolute;left:14px;right:14px;top:0;height:3px;border-radius:0 0 3px 3px;background:var(--tx-knurl),rgb(var(--g4));box-shadow:0 1px 0 rgb(0 0 0 / .5);pointer-events:none;opacity:.8}
.card::after,.portal-path::after,.video-card::after,.feature-card::after,.price-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgb(var(--g11) / .09),transparent 50%);opacity:var(--glow,0);transition:opacity var(--dur-slow)}
:is(.card,.portal-path,.video-card,.feature-card,.price-card,.collection-card,.connection-card):hover{box-shadow:var(--e3);--glow:1}
.card-icon,.feature-icon,.connection-mark{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:11px;color:var(--accent);
  background:var(--tx-machined),var(--m-anodized);box-shadow:var(--e1),inset 0 0 0 1px rgb(var(--g11) / .05);text-shadow:0 0 10px var(--accent-glow)}
.principle .number,.collection-number,.chapter-number,.section-index{font-family:var(--font-mono);color:var(--accent);font-weight:600;letter-spacing:.08em}
.card h3,.principle strong{color:var(--text)}
.card p,.principle span{color:var(--muted)}
.price-card.popular{box-shadow:var(--e3),0 0 0 1px rgb(var(--c-accent) / .45)}

/* 8. chat thread */
.msg-bubble{border-radius:var(--r-lg);box-shadow:var(--e1)}
.msg.user .msg-bubble{background:var(--tx-noise),var(--m-plastic);background-size:160px,auto;background-blend-mode:soft-light,normal;border:0;color:var(--text)}
.msg.assistant .msg-bubble{background:linear-gradient(180deg,rgb(var(--g2)),rgb(var(--g1)));border:1px solid rgb(var(--g11) / .06);box-shadow:var(--e1),inset 2px 0 0 var(--accent)}
.msg-bubble pre{background:var(--code-surface);box-shadow:var(--e-well);border:0;border-radius:var(--r-md)}
.msg-bubble img{border-radius:var(--r-md);box-shadow:var(--rim),0 14px 30px -8px rgb(0 0 0 / .7)}
[data-theme="light"] .msg.assistant .msg-bubble{background:#fff}

/* 9. composer: brushed chassis with a deep input well, flush to bottom */
.composer{background:var(--m-sheen),var(--tx-brush),var(--m-anodized);background-size:200% 100%,600px 120px,auto;
  border-top:1px solid rgb(0 0 0 / .85);box-shadow:inset 0 1px 0 rgb(var(--g11) / .1),0 -14px 32px -8px rgb(0 0 0 / .55)}
.composer-row{background:var(--m-well);border:1px solid rgb(var(--g11) / .05);border-radius:var(--r-lg);box-shadow:var(--e-well);transition:box-shadow var(--dur) var(--ease),border-color var(--dur)}
.composer-row:focus-within{border-color:rgb(var(--c-accent) / .55);box-shadow:var(--e-well),0 0 0 3px rgb(var(--c-accent) / .15),0 0 24px -6px rgb(var(--c-accent) / .4)}
#composer-input{background:transparent;color:var(--text);caret-color:var(--accent)}
#composer-input::placeholder{color:var(--faint)}
.btn-send,.btn-stop{border-radius:var(--r-md)}
.btn-attach{color:var(--muted)}
@media (max-width:899px){.composer{padding-bottom:max(8px,env(safe-area-inset-bottom));margin-bottom:0;bottom:0}}

/* 10. inputs everywhere */
input[type="text"],input[type="email"],input[type="search"],input[type="url"],textarea,select,.setting-input,.setting-select,.workspace-brief,.workspace-select,.search-box input{
  background:var(--m-well);color:var(--text);border:1px solid rgb(var(--g11) / .06);border-radius:var(--r-sm);box-shadow:var(--e-well);font-family:inherit}
input:focus,textarea:focus,select:focus{border-color:rgb(var(--c-accent) / .5);outline:none;box-shadow:var(--e-well),0 0 0 3px rgb(var(--c-accent) / .14)}
input[type="range"],input[type="checkbox"]{accent-color:var(--accent)}

/* 11. footer: rubber base */
.footer,.site-foot,.foot,.watch-footer{background:linear-gradient(180deg,rgb(var(--g1)),rgb(var(--g0))),var(--tx-knurl);color:var(--faint);border-top:1px solid rgb(var(--g11) / .04);font-size:var(--fs-xs)}
.footer a,.foot-links a,.foot a{color:rgb(var(--g7));text-decoration:none}
.footer a:hover,.foot-links a:hover{color:var(--text)}

/* 12. docks */
.hal-dock-toggle,.insight-guide-trigger{border-radius:var(--r-md)}
.hal-dock-toggle-note{color:var(--accent);font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.1em;text-transform:uppercase}

/* 13. media */
.thumb,.player-frame,.watch-hero-art{border-radius:var(--r-md);box-shadow:var(--rim),0 18px 40px -14px rgb(0 0 0 / .85);overflow:hidden}
.progress-track{background:var(--m-well);box-shadow:var(--e-well)}

/* 14. self-host / releases pages */
.pg-selfhost .wrap,.pg-releases .wrap{position:relative;z-index:1}
.pg-selfhost .card,.pg-releases .card{padding:clamp(18px,3vw,28px)}
.pg-selfhost pre,.pg-releases pre,.pg-portal pre{background:var(--code-surface);box-shadow:var(--e-well);border:0;border-radius:var(--r-md);padding:14px 16px;overflow:auto}
.note{color:var(--muted);border-left:2px solid var(--accent);padding-left:12px}

/* layering above body texture */
.pg-portal main,.pg-portal .site-foot,.wrap,.watch-shell,.studio-shell{position:relative;z-index:1}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}
  .card,.portal-path,.video-card,.feature-card,.price-card{transform:none!important}
}
@media (hover:none){.card,.portal-path,.video-card{transform:none}}
.portal-story>p{margin-left:0;margin-right:0}
.insight-atmosphere{opacity:.18}
.pg-selfhost h1,.pg-releases h1{font-size:var(--fs-2xl);font-weight:760;letter-spacing:-.035em;background:linear-gradient(180deg,#fff,rgb(var(--g8)));-webkit-background-clip:text;background-clip:text;color:transparent}
[data-theme="light"] :is(.pg-selfhost h1,.pg-releases h1){background:linear-gradient(180deg,rgb(var(--g2)),rgb(var(--g5)));-webkit-background-clip:text;background-clip:text}

/* =====================================================================
   HAL SUPREME — Street Gallery layer
   The art is the canvas (concrete, wheatpaste, rust, spray, stencil);
   the metal & plastic hardware is the instrument panel (controls, composer).
   All art is original: generated locally with SDXL or drawn as SVG.
   ===================================================================== */
@font-face{font-family:"HAL Stencil";src:url("/assets/art/hal-stencil-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:optional}
:root{
  --font-stencil:"HAL Stencil",Impact,sans-serif;
  --paint-bone:#ece6da;--paint-ink:#0d0d0e;--paint-orange:rgb(var(--c-accent));
  --art-concrete:url("/assets/art/concrete-1280.webp");
  --art-wall:url("/assets/art/hero_wall-1280.webp");
  --art-posters:url("/assets/art/posters-1280.webp");
  --art-rust:url("/assets/art/rust-1280.webp");
  --art-stencil:url("/assets/art/stencil-hal-bone.svg");
  --art-eye:url("/assets/art/stencil_eye-640.webp");
  --art-drips:url("/assets/art/drips.svg");
  --halftone:radial-gradient(circle,rgb(0 0 0 / .55) 1px,transparent 1.6px) 0 0/5px 5px;
  --torn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 12' preserveAspectRatio='none'%3E%3Cpath d='M0 12V5l8 3 6-5 9 4 7-6 10 5 6-3 11 4 8-5 9 3 7-4 12 5 5-3 10 4 9-6 8 5 11-3 6 4 9-5 8 3 10-4 7 5 9-3 12 4 6-6 8 4 10-3 7 5 9-4 11 3 6-5 8 4 10-2 9 4 7-5 8 3 12-4 6 5 9-3 8 4 10-5 7 3 9-2 11 4 6-5 8 4 10-3 9 4V12z' fill='%23000'/%3E%3C/svg%3E");
  --torn-top:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 12' preserveAspectRatio='none'%3E%3Cpath d='M0 0V7l8-3 6 5 9-4 7 6 10-5 6 3 11-4 8 5 9-3 7 4 12-5 5 3 10-4 9 6 8-5 11 3 6-4 9 5 8-3 10 4 7-5 9 3 12-4 6 6 8-4 10 3 7-5 9 4 11-3 6 5 8-4 10 2 9-4 7 5 8-3 12 4 6-5 9 3 8-4 10 5 7-3 9 2 11-4 6 5 8-4 10 3 9-4V0z' fill='%23000'/%3E%3C/svg%3E");
}
@media (min-width:1600px){:root{--art-wall:url("/assets/art/hero_wall-2560.webp");--art-concrete:url("/assets/art/concrete-2560.webp")}}
@media (max-width:700px){:root{--art-wall:url("/assets/art/hero_wall-640.webp");--art-concrete:url("/assets/art/concrete-640.webp");--art-posters:url("/assets/art/posters-640.webp");--art-rust:url("/assets/art/rust-640.webp")}}

/* the wall */
html,body{background:#151517}
body::before{background:linear-gradient(180deg,rgb(10 10 11 / .5),rgb(10 10 11 / .76)),var(--art-concrete) center/cover;opacity:1}
[data-theme="light"] body::before{background:linear-gradient(180deg,rgb(240 236 228 / .82),rgb(240 236 228 / .9)),var(--art-concrete) center/cover}

/* stencil display type */
.hero h1,.empty h1,.static-welcome h1,.watch-hero h1,.build-hero h1,.studio-hero h1,.section-head h2,.vision-band h2,.pg-selfhost h1,.pg-releases h1,.radio-body h1{
  font-family:var(--font-stencil);font-weight:800;text-transform:uppercase;letter-spacing:.01em;line-height:.92}
.hero h1,.empty h1,.static-welcome h1,.watch-hero h1,.build-hero h1,.studio-hero h1,.pg-selfhost h1,.pg-releases h1{
  font-size:clamp(46px,7.4vw,104px);color:var(--paint-bone);background:none;-webkit-background-clip:border-box;background-clip:border-box;
  filter:none;text-shadow:0 0 1px rgb(236 230 218 / .6),0 0 18px rgb(236 230 218 / .12),3px 3px 0 rgb(0 0 0 / .55)}
.pg-selfhost h1,.pg-releases h1{font-size:clamp(40px,6vw,72px)}
.hero h1 strong,.empty h1 em,.static-welcome h1 em{color:var(--paint-orange);background:none;-webkit-background-clip:border-box;background-clip:border-box;
  text-shadow:0 0 14px rgb(255 107 44 / .35),3px 3px 0 rgb(0 0 0 / .5)}
.section-head h2,.vision-band h2{font-size:clamp(34px,4.6vw,60px);color:var(--paint-bone);position:relative}
.section-head h2{padding-bottom:20px}
.section-head h2::after{content:"";position:absolute;left:0;bottom:0;width:min(240px,70%);height:18px;background:var(--art-drips) left top/100% 100% no-repeat;opacity:.9}

/* HERO = a street piece: SDXL wall photo + original HAL stencil + halftone + vignette for legibility */
.signal-portal,.hero,.watch-hero,.build-hero,.studio-hero{
  background:linear-gradient(90deg,rgb(8 8 9 / .9) 0%,rgb(8 8 9 / .72) 42%,rgb(8 8 9 / .15) 80%,rgb(8 8 9 / .3) 100%),var(--art-wall) center/cover;
  border:0;border-radius:6px;
  box-shadow:0 0 0 1px rgb(0 0 0 / .8),0 40px 80px -30px rgb(0 0 0 / .9),inset 0 0 120px rgb(0 0 0 / .55)}
.signal-portal::before,.hero::before{display:none}
.signal-portal>*,.hero>*{position:relative;z-index:1}
.signal-portal::after,.hero::after{background:var(--halftone);opacity:.3;mix-blend-mode:multiply;transition:none}
@media (max-width:899px){.signal-portal,.hero,.watch-hero,.build-hero,.studio-hero{background:linear-gradient(180deg,rgb(8 8 9 / .55),rgb(8 8 9 / .86) 45%,rgb(8 8 9 / .92)),var(--art-wall) 70% top/cover}}
.pg-selfhost .wrap::before,.pg-releases .wrap::before{content:"";position:absolute;right:-8px;top:18px;width:150px;aspect-ratio:400/520;background:var(--art-stencil) center/contain no-repeat;opacity:.85;pointer-events:none}
@media (max-width:700px){.pg-selfhost .wrap::before,.pg-releases .wrap::before{width:90px;opacity:.35}}

/* CARDS = wheatpaste posters with torn edges + a strip of tape */
.card,.portal-path,.principle,.feature-card,.price-card,.status-card,.boundary-card,.mini-card,.collection-card,.voice-card,.launch-card{
  background:linear-gradient(180deg,rgb(16 16 18 / .8),rgb(16 16 18 / .9)),var(--art-posters) center/cover;
  border:0;border-radius:2px;
  -webkit-mask:var(--torn-top) top/100% 10px no-repeat,linear-gradient(#000,#000) 0 9px/100% calc(100% - 18px) no-repeat,var(--torn) bottom/100% 10px no-repeat;
          mask:var(--torn-top) top/100% 10px no-repeat,linear-gradient(#000,#000) 0 9px/100% calc(100% - 18px) no-repeat,var(--torn) bottom/100% 10px no-repeat;
  filter:drop-shadow(0 14px 18px rgb(0 0 0 / .55));box-shadow:none}
.card,.principle,.feature-card,.price-card{padding-top:26px}
.card:nth-child(3n+2),.principle:nth-child(2n){--tilt:-.6deg}
.card:nth-child(3n),.principle:nth-child(3n){--tilt:.5deg}
.card,.principle,.portal-path,.feature-card,.price-card{transform:perspective(900px) rotate(var(--tilt,0deg)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.card::before,.portal-path::before,.feature-card::before,.price-card::before{
  left:50%;right:auto;top:8px;width:86px;height:16px;transform:translateX(-50%) rotate(-3deg);border-radius:1px;
  background:linear-gradient(180deg,rgb(236 226 200 / .6),rgb(214 204 176 / .55));box-shadow:0 1px 2px rgb(0 0 0 / .35);opacity:.85;z-index:2}
.card-kicker,.eyebrow{font-family:var(--font-stencil);font-size:15px;letter-spacing:.12em;color:var(--paint-orange)}
.card h3,.principle strong{font-family:var(--font-stencil);text-transform:uppercase;font-size:clamp(20px,1.8vw,26px);letter-spacing:.02em;line-height:1}
.card-icon{background:var(--paint-orange);color:#120a05;box-shadow:none;border-radius:50%;text-shadow:none}
.principle .number{font-family:var(--font-stencil);font-size:44px;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--paint-orange)}

/* VISION BANDS = rusted plate with a stencil eye tag */
.vision-band{background:linear-gradient(90deg,rgb(10 10 11 / .88),rgb(10 10 11 / .55)),var(--art-rust) center/cover;border:0;border-radius:4px;
  box-shadow:0 0 0 1px rgb(0 0 0 / .8),inset 0 0 0 6px rgb(0 0 0 / .25),0 30px 60px -30px rgb(0 0 0 / .9)}
.vision-band::before{background:var(--screw) 14px 14px/8px 8px no-repeat,var(--screw) calc(100% - 14px) 14px/8px 8px no-repeat,var(--screw) 14px calc(100% - 14px)/8px 8px no-repeat,var(--screw) calc(100% - 14px) calc(100% - 14px)/8px 8px no-repeat;inset:0;border-radius:0}
.vision-band::after{content:"";position:absolute;right:4%;top:-18px;width:120px;height:120px;background:var(--art-eye) center/cover;border-radius:50%;
  -webkit-mask:radial-gradient(circle,#000 58%,transparent 71%);mask:radial-gradient(circle,#000 58%,transparent 71%);opacity:.9;transform:rotate(8deg);pointer-events:none}
@media (max-width:700px){.vision-band::after{width:72px;height:72px;opacity:.6}}

/* wall buttons = stencil-cut plates; app hardware stays metal */
.button,.hero-action{font-family:var(--font-stencil);text-transform:uppercase;letter-spacing:.06em;font-size:17px;border-radius:3px}

.signal-portal{min-height:min(520px,70vh)}
.portal-story>p,.lede{color:#d8d3c8;text-shadow:0 1px 2px rgb(0 0 0 / .8)}
.mode-lab{background:linear-gradient(180deg,rgb(var(--g3) / .92),rgb(var(--g2) / .94));box-shadow:var(--e2);border-radius:var(--r-lg);border:1px solid rgb(0 0 0 / .7)}

/* footer = hazard tape */
.site-foot,.footer,.foot{border-top:0;background:linear-gradient(180deg,rgb(8 8 9 / .86),rgb(8 8 9 / .95)),var(--art-concrete) center/cover}
.site-foot::before{content:"";display:block;height:3px;background:repeating-linear-gradient(90deg,var(--paint-orange) 0 26px,transparent 26px 34px);opacity:.75}

[data-theme="light"] :is(.card,.principle,.portal-path){background:linear-gradient(180deg,rgb(244 240 232 / .86),rgb(236 230 220 / .9)),var(--art-posters) center/cover}
[data-theme="light"] :is(.section-head h2,.vision-band h2){color:var(--paint-ink);text-shadow:none}

@media (prefers-reduced-motion:reduce){.card,.principle,.portal-path,.feature-card,.price-card{transform:rotate(var(--tilt,0deg))!important}}
/* legibility pass */
.card,.portal-path,.principle,.feature-card,.price-card,.status-card,.boundary-card,.mini-card,.collection-card,.voice-card,.launch-card,.vision-band,.signal-portal,.hero,.watch-hero,.build-hero,.studio-hero{background-blend-mode:normal}
.card,.principle,.feature-card,.price-card,.status-card,.boundary-card,.mini-card,.collection-card,.voice-card,.launch-card{background:linear-gradient(180deg,rgb(14 14 16 / .78),rgb(14 14 16 / .93) 55%),var(--art-posters) center/cover}
.signal-portal,.hero{background:linear-gradient(90deg,rgb(8 8 9 / .94) 0%,rgb(8 8 9 / .82) 40%,rgb(8 8 9 / .25) 72%,rgb(8 8 9 / .2) 100%),var(--art-wall) right center/cover}
.empty h1,.static-welcome h1{font-size:clamp(40px,5vw,76px);max-width:14ch}
@media (max-width:899px){.signal-portal,.hero{background:linear-gradient(180deg,rgb(8 8 9 / .5),rgb(8 8 9 / .88) 42%,rgb(8 8 9 / .94)),var(--art-wall) 75% top/cover}.empty h1,.static-welcome h1{font-size:clamp(38px,11vw,56px)}}
/* perf: paint the wall on a pseudo layer so the hero text, not a late JS-mounted bg, is the LCP; art unchanged */
.signal-portal{background:rgb(8 8 9)}
.signal-portal::before{display:block!important;content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;opacity:1;width:auto;aspect-ratio:auto;
  background:linear-gradient(90deg,rgb(8 8 9 / .94) 0%,rgb(8 8 9 / .82) 40%,rgb(8 8 9 / .25) 72%,rgb(8 8 9 / .2) 100%),var(--art-wall) right center/cover;box-shadow:none;filter:none}
@media (max-width:899px){.signal-portal::before{background:linear-gradient(180deg,rgb(8 8 9 / .5),rgb(8 8 9 / .88) 42%,rgb(8 8 9 / .94)),var(--art-wall) 75% top/cover}}

/* ===== pass 2: the art is the star ===== */
:root{
  --art-piece:url("/assets/art/hal_piece-1280.webp");
  --art-eye-shutter:url("/assets/art/eye_shutter-1280.webp");
  --art-halftone:url("/assets/art/halftone_poster-1280.webp");
  --art-run:url("/assets/art/stencil_run-1280.webp");
}
@media (min-width:1600px){:root{--art-piece:url("/assets/art/hal_piece-2560.webp");--art-eye-shutter:url("/assets/art/eye_shutter-2560.webp");--art-halftone:url("/assets/art/halftone_poster-2560.webp");--art-run:url("/assets/art/stencil_run-2560.webp")}}
@media (min-width:2600px),(min-width:1600px) and (min-resolution:2dppx){:root{--art-piece:url("/assets/art/hal_piece-3840.webp")}}
@media (max-width:700px){:root{--art-piece:url("/assets/art/hal_piece-640.webp");--art-eye-shutter:url("/assets/art/eye_shutter-640.webp");--art-halftone:url("/assets/art/halftone_poster-640.webp");--art-run:url("/assets/art/stencil_run-640.webp")}}
@media (max-width:700px) and (min-resolution:2dppx){:root{--art-piece:url("/assets/art/hal_piece-1280.webp")}}

/* hero: the HAL piece, clearly visible */
.signal-portal,.signal-portal::before{background:linear-gradient(90deg,rgb(8 8 9 / .9) 0%,rgb(8 8 9 / .72) 34%,rgb(8 8 9 / .12) 58%,transparent 100%),var(--art-piece) 70% center/cover}
@media (max-width:899px){
  .signal-portal,.signal-portal::before{background:linear-gradient(180deg,rgb(8 8 9 / .28) 0%,rgb(8 8 9 / .62) 30%,rgb(8 8 9 / .9) 62%,rgb(8 8 9 / .95)),var(--art-piece) 72% top/auto 62%,rgb(var(--g1))}
}
/* each section its own piece */
.vision-band{background:linear-gradient(90deg,rgb(10 10 11 / .9),rgb(10 10 11 / .62) 45%,rgb(10 10 11 / .05)),var(--art-eye-shutter) right center/cover}
.watch-hero{background:linear-gradient(90deg,rgb(8 8 9 / .88),rgb(8 8 9 / .55) 50%,rgb(8 8 9 / .1)),var(--art-wall) right center/cover}
.build-hero{background:linear-gradient(180deg,rgb(8 8 9 / .35),rgb(8 8 9 / .86) 72%),var(--art-run) center top/cover}
.studio-hero{background:linear-gradient(90deg,rgb(8 8 9 / .9),rgb(8 8 9 / .6) 45%,rgb(8 8 9 / .05)),var(--art-halftone) right center/cover}
.pg-portal .hero,.pg-selfhost .hero,.pg-releases .hero{background:linear-gradient(90deg,rgb(8 8 9 / .9),rgb(8 8 9 / .66) 42%,rgb(8 8 9 / .08)),var(--art-piece) 70% center/cover}
.site-foot,.footer,.foot{background:linear-gradient(180deg,rgb(8 8 9 / .8),rgb(8 8 9 / .9)),var(--art-run) center/cover}
.card,.principle,.feature-card,.price-card,.status-card,.boundary-card,.mini-card,.collection-card,.voice-card,.launch-card,.portal-path{background:linear-gradient(180deg,rgb(14 14 16 / .58),rgb(14 14 16 / .88) 62%),var(--art-posters) center/cover}
.card:nth-child(3n+2),.portal-path:nth-child(even){background:linear-gradient(180deg,rgb(14 14 16 / .5),rgb(14 14 16 / .88) 62%),var(--art-halftone) 80% center/cover}
.card:nth-child(3n),.portal-path.proof{background:linear-gradient(180deg,rgb(14 14 16 / .5),rgb(14 14 16 / .9) 62%),var(--art-eye-shutter) 70% center/cover}
[data-theme="light"] :is(.card,.principle,.portal-path){background:linear-gradient(180deg,rgb(244 240 232 / .8),rgb(236 230 220 / .9)),var(--art-posters) center/cover}

/* headline: flush with kicker and copy (no auto margins) */
.empty h1,.static-welcome h1,.hero h1,.watch-hero h1,.build-hero h1,.studio-hero h1{margin-inline:0;text-indent:0}

/* docked helpers: compact round controls in one bottom-right rail; content keeps clear */
.insight-guide{left:auto;right:calc(max(12px, env(safe-area-inset-right, 0px)) + 56px);width:auto;display:flex;flex-direction:column;align-items:flex-end}
.insight-guide-panel{width:min(320px,calc(100vw - 24px));margin-right:-56px}
.insight-guide-trigger,.hal-dock-toggle{width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;gap:0;justify-content:center}
.insight-guide-trigger-label,.hal-dock-toggle-title,.hal-dock-toggle-note,.hal-dock-toggle > :not(.hal-dock-mark){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hal-dock{width:auto;max-width:min(390px,calc(100vw - 24px))}
.hal-dock-mark{font-size:20px;line-height:1}
body[data-hal-chat-shell] .messages{padding-bottom:64px}
@media (max-width:700px){body[data-hal-dock-page]:not([data-hal-chat-shell]){padding-bottom:calc(64px + env(safe-area-inset-bottom, 0px))}}
/* ribbon dock (chat shell) */
.product-ribbon-actions{align-items:center;gap:8px}
.product-ribbon-actions>.hal-dock-toggle,.product-ribbon-actions>.insight-guide-trigger{margin:0;box-shadow:none;flex:none}
.insight-guide[data-docked] .insight-guide-panel{max-height:min(70vh,560px)!important}
.insight-guide[data-docked]{bottom:var(--insight-bottom, calc(var(--composer-h, 60px) + var(--vv-bottom-inset, 0px) + 10px));right:max(12px, env(safe-area-inset-right, 0px))}
.insight-guide[data-docked] .insight-guide-panel{margin-right:0}
body:not([data-hal-chat-shell]) .insight-guide{bottom:max(12px, env(safe-area-inset-bottom, 0px))}
body[data-hal-chat-shell] .messages{padding-bottom:0}
.insight-guide[data-docked]{width:min(320px,calc(100vw - 24px))}
.dock-radio-ribbon .hal-dock{width:min(390px,calc(100vw - 24px));max-width:none}
.product-ribbon-actions>[hidden]{display:none!important}

/* ===== pass 3: personality — music wall, crew, cast, GLYPH, critters ===== */
.art-walls{display:grid;gap:clamp(28px,4vw,48px);margin:clamp(28px,4vw,44px) 0 12px}
.wall-head h2{margin:.2em 0 .25em}
.wall-head p{max-width:62ch;color:rgb(var(--g9));margin:0 0 18px}
.music-wall,.crew-wall{position:relative;padding:clamp(18px,3vw,32px);border-radius:6px;isolation:isolate;overflow:hidden}
.music-wall{background:linear-gradient(180deg,rgb(10 10 11 / .72),rgb(10 10 11 / .9)),var(--art-halftone) center/cover}
.crew-wall{background:linear-gradient(180deg,rgb(10 10 11 / .66),rgb(10 10 11 / .9)),var(--art-run) center/cover}
.song-grid,.crew-grid{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.song-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.song{position:relative;background:rgb(18 18 20 / .86);border-radius:3px;box-shadow:0 10px 24px rgb(0 0 0 / .45);transform:rotate(var(--tilt,0deg));transition:transform .25s ease}
.song:nth-child(3n){--tilt:.8deg}.song:nth-child(3n+1){--tilt:-.7deg}.song:nth-child(4n+2){--tilt:.3deg}
.song:hover,.song:focus-within{transform:rotate(0) translateY(-3px)}
.song::before{content:"";position:absolute;top:-8px;left:50%;width:64px;height:16px;transform:translateX(-50%) rotate(-3deg);background:rgb(214 200 160 / .78);z-index:2;box-shadow:0 1px 2px rgb(0 0 0 / .3)}
.song-play{position:relative;display:block;width:100%;padding:0;border:0;background:#000;cursor:pointer;aspect-ratio:16/9;overflow:hidden;border-radius:3px 3px 0 0}
.song-play img{width:100%;height:100%;object-fit:cover;display:block;filter:contrast(1.08) saturate(1.05);transition:transform .35s ease}
.song-play:hover img{transform:scale(1.04)}
.song-no{position:absolute;left:8px;top:6px;font:800 22px/1 "HAL Stencil",system-ui,sans-serif;color:#ece6da;text-shadow:0 2px 0 #000}
.song-btn{position:absolute;right:10px;bottom:10px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgb(var(--c-accent));color:#111;font-size:16px;box-shadow:0 4px 14px rgb(0 0 0 / .5)}
.song.playing .song-btn{background:#39ff88}
.song-play:focus-visible{outline:3px solid rgb(var(--c-accent));outline-offset:2px}
.song-meta{padding:10px 12px 12px;display:grid;gap:3px}
.song-meta b{font:800 17px/1.05 "HAL Stencil",system-ui,sans-serif;letter-spacing:.02em;text-transform:uppercase;color:#ece6da}
.song-meta small{color:rgb(var(--g9));font-size:12.5px;line-height:1.35}
.song-meta a{justify-self:start;font-size:12.5px;color:rgb(var(--c-accent));text-decoration:none;min-height:24px;display:inline-flex;align-items:center}
.song-meta a:hover{text-decoration:underline}
.music-stage{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;margin:0 0 18px;padding:12px;background:rgb(8 8 9 / .9);border-radius:4px;box-shadow:inset 0 0 0 1px rgb(var(--g11) / .08)}
.music-stage[hidden]{display:none}
.music-frame{aspect-ratio:16/9;background:#000}
.music-frame iframe{width:100%;height:100%;border:0;display:block}
.music-now{display:grid;align-content:center;gap:8px}
.music-now span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgb(var(--c-accent))}
.music-now b{font:800 clamp(24px,3vw,40px)/1 "HAL Stencil",system-ui,sans-serif;text-transform:uppercase}
.music-now a{color:rgb(var(--g10))}
.music-now button{justify-self:start;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgb(var(--g11) / .2);background:rgb(var(--g3));color:rgb(var(--g11));cursor:pointer}
@media (max-width:700px){.music-stage{grid-template-columns:1fr}.song-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.song-meta small{display:none}}
.crew-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.crew-card{position:relative;display:grid;gap:4px;align-content:start;padding:14px 14px 16px;border-radius:3px;background:linear-gradient(180deg,rgb(14 14 16 / .55),rgb(14 14 16 / .92) 58%),var(--art-posters) center/cover;box-shadow:0 10px 24px rgb(0 0 0 / .45);transform:rotate(var(--tilt,0deg))}
.crew-card:nth-child(odd){--tilt:-.6deg}.crew-card:nth-child(3n){--tilt:.7deg}
.crew-card img{width:100%;max-width:170px;height:auto;aspect-ratio:300/380;justify-self:center;filter:drop-shadow(0 0 10px rgb(236 230 218 / .18)) drop-shadow(0 6px 0 rgb(0 0 0 / .35))}
.crew-card b{font:800 24px/1 "HAL Stencil",system-ui,sans-serif;text-transform:uppercase;color:#ece6da;margin-top:6px}
.crew-role{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgb(var(--c-accent))}
.crew-card p{margin:4px 0 0;font-size:14px;color:rgb(var(--g10));line-height:1.4}
.crew-card small{color:rgb(var(--g8));font-style:italic}
.crew-glyph .crew-role,.crew-glyph b{color:#39ff88}
.crew-glyph{box-shadow:0 0 0 1px rgb(57 255 136 / .25),0 10px 24px rgb(0 0 0 / .45)}
.crew-talk{margin-top:8px;justify-self:start;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid #39ff88;background:rgb(57 255 136 / .1);color:#c9ffe0;cursor:pointer;font-weight:700}
@media (max-width:700px){.crew-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.crew-card p{font-size:13px}.crew-card small{display:none}.crew-card b{font-size:19px}}
/* GLYPH on the hero wall */
.signal-portal{position:relative}
.hero-glyph{position:absolute;right:clamp(10px,3vw,40px);top:clamp(14px,3vw,34px);z-index:3;display:grid;justify-items:center;gap:4px;width:clamp(96px,11vw,150px);padding:8px 8px 6px;border:0;border-radius:3px;background:rgb(10 10 11 / .62);box-shadow:0 0 0 1px rgb(57 255 136 / .3),0 12px 30px rgb(0 0 0 / .5);transform:rotate(2.5deg);cursor:pointer;color:#c9ffe0}
.hero-glyph img{width:100%;height:auto}
.hero-glyph span{font:700 10px/1.2 ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase}
.hero-glyph:hover{transform:rotate(0) scale(1.03)}
.hero-glyph:focus-visible{outline:3px solid #39ff88;outline-offset:3px}
@media (max-width:899px){.hero-glyph{display:none}}
.glyph-tip{position:fixed;left:50%;bottom:calc(var(--composer-h,64px) + 18px);z-index:60;max-width:min(520px,calc(100vw - 32px));padding:12px 16px;border-radius:10px;background:rgb(8 12 10 / .96);color:#c9ffe0;box-shadow:0 0 0 1px rgb(57 255 136 / .4),0 14px 34px rgb(0 0 0 / .55);font-size:14px;transform:translate(-50%,12px);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.glyph-tip.show{opacity:1;transform:translate(-50%,0)}
/* cast picker */
.cast-launch{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid rgb(var(--g11) / .14);background:rgb(var(--g3));color:rgb(var(--g11));font-weight:700;cursor:pointer;flex:none}
.cast-launch.on{border-color:#39ff88;color:#c9ffe0;background:rgb(57 255 136 / .1)}
.cast-launch span{font-size:17px}
@media (max-width:520px){.cast-launch b{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.cast-launch{width:44px;padding:0;justify-content:center}}
.cast-banner{display:flex;align-items:center;gap:10px;margin:0 0 8px;padding:8px 10px 8px 12px;border-radius:10px;background:rgb(57 255 136 / .08);box-shadow:inset 0 0 0 1px rgb(57 255 136 / .35);font-size:13.5px;color:rgb(var(--g11))}
.cast-banner[hidden]{display:none}
.cast-banner small{display:block;color:rgb(var(--g9));font-size:12px}
.cast-banner-dot{width:10px;height:10px;border-radius:50%;background:#39ff88;flex:none;box-shadow:0 0 10px #39ff88}
.cast-clear{margin-left:auto;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid rgb(var(--g11) / .2);background:transparent;color:rgb(var(--g11));cursor:pointer;flex:none}
.cast-sheet{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;background:rgb(0 0 0 / .6)}
.cast-sheet[hidden]{display:none}
.cast-card{width:min(860px,100%);max-height:min(86vh,900px);overflow:auto;padding:20px;border-radius:12px;background:linear-gradient(180deg,rgb(16 16 18 / .96),rgb(10 10 11 / .98)),var(--art-concrete) center/cover;box-shadow:0 0 0 1px rgb(var(--g11) / .1),0 30px 80px rgb(0 0 0 / .6)}
.cast-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cast-head h2{margin:0}
.cast-x{width:44px;height:44px;border-radius:50%;border:0;background:rgb(var(--g3));color:rgb(var(--g11));font-size:24px;cursor:pointer}
.cast-disclaimer{margin:8px 0 14px;padding:10px 12px;border-left:3px solid #39ff88;background:rgb(57 255 136 / .06);color:rgb(var(--g10));font-size:13.5px}
.cast-group h3{margin:14px 0 8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgb(var(--c-accent))}
.cast-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.cast-pick{display:grid;gap:2px;text-align:left;min-height:56px;padding:10px 12px;border-radius:8px;border:1px solid rgb(var(--g11) / .1);background:rgb(var(--g2) / .9);color:rgb(var(--g11));cursor:pointer}
.cast-pick small{color:rgb(var(--g9));font-size:12px}
.cast-pick[aria-pressed="true"]{border-color:#39ff88;background:rgb(57 255 136 / .1)}
.cast-pick:focus-visible{outline:3px solid #39ff88;outline-offset:2px}
.cast-glyph b{color:#39ff88}
/* critters */
.critter-layer{position:fixed;inset:0;z-index:30;pointer-events:none;overflow:hidden}
.critter{position:absolute;left:-14px;top:-14px;width:28px;height:28px;pointer-events:auto;will-change:transform;filter:drop-shadow(0 0 1px rgb(236 230 218 / .7)) drop-shadow(0 2px 2px rgb(0 0 0 / .5));cursor:pointer;touch-action:manipulation}
.critter svg{width:100%;height:100%;display:block}
.critter-ant{width:22px;height:22px}.critter-spider{width:30px;height:30px}
.critter.startled svg{animation:critter-jit .12s steps(2) infinite}
@keyframes critter-jit{50%{transform:translateY(-1px) scale(1.06)}}
@media (prefers-reduced-motion:reduce){.critter-layer{display:none}.song,.crew-card,.hero-glyph{transform:none;transition:none}}
.music-wall,.crew-wall{content-visibility:auto;contain-intrinsic-size:auto 1400px}
@media (max-width:700px){.hs-head,.composer,.hal-dock-panel,.insight-guide-panel,.mode-popover .mode-panel,.toast,.product-ribbon,.hs-drop,.hs-sheet,.hs-mobile{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}
.signal-portal{background:rgb(var(--g1))!important}.signal-portal::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none}.signal-portal>.portal-story{position:relative;z-index:1}
@media (max-width:700px){.portal-paths,.generation-note,.prompt-lab,.starters,.mode-lab{content-visibility:auto;contain-intrinsic-size:auto 220px}.sidebar,.footer,.mode-sheet{content-visibility:auto;contain-intrinsic-size:auto 600px}}