/* Home page as a live surface (templates/accounts/home_surface.html).
   Themes scrollcraft with Cliptude's own tokens; never restyles the engine's
   [data-sc-*] mechanism. Classes are prefixed hs- so Tailwind's scan of the
   template generates nothing new for them. */

:root {
  --sc-canvas: #050a17;
  --sc-surface: #0d1526;
  --sc-ink: #eef3f8;
  --sc-ink-soft: #9aabbf;
  --sc-accent: #2596be;
  --sc-accent-ink: #03101a;
  --sc-font-display: "Geist", system-ui, sans-serif;
  --sc-font-text: "Geist", system-ui, sans-serif;
  --sc-font-mono: "Roboto Mono", ui-monospace, monospace;

  --sc-section: clamp(2.5rem, 1.5rem + 2.5vw, 4rem);   /* the engine's default reaches 11rem a side */
  --hs-accent-text: #5cc3e6;
  --hs-raised: #121c31;
  --hs-line: color-mix(in oklab, var(--sc-ink) 10%, transparent);
  --hs-line-strong: color-mix(in oklab, var(--sc-ink) 18%, transparent);
  --hs-top-h: 60px;
  --hs-status-h: 52px;
  --hs-pps: 6px;            /* timeline pixels per second of video */
  --hs-row-v: 54px;
  --hs-row-g: 34px;
  --hs-label-w: 0px;
}
@media (min-width: 1024px) {
  :root { --hs-top-h: 64px; --hs-status-h: 46px; --hs-pps: 9px; --hs-row-v: clamp(96px, 22vh, 220px); --hs-row-g: clamp(56px, 10vh, 110px); --hs-label-w: 6.5rem; }
}

body.hs {
  background: var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  padding-bottom: var(--hs-status-h);
  overflow-x: clip;
}
.hs :focus-visible { outline: 2px solid var(--hs-accent-text); outline-offset: 3px; border-radius: 4px; }

.hs-skip {
  position: fixed; left: 12px; top: 12px; z-index: 200;
  padding: 10px 14px; border-radius: var(--sc-r-sm);
  background: var(--sc-ink); color: var(--sc-canvas); font-weight: 600;
  transform: translateY(-160%);
}
.hs-skip:focus { transform: none; }


/* ---------------------------------------------------------- type ---- */
.hs-h1 {
  font-family: var(--sc-font-display);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  font-weight: 650; line-height: 1.04;
  letter-spacing: var(--sc-track-tight);
  text-wrap: balance;
}
.hs-h2 {
  font-size: clamp(1.45rem, 1.2rem + 1vw, 2.1rem);
  font-weight: 620; line-height: 1.1; letter-spacing: var(--sc-track-snug);
  text-wrap: balance;
}
.hs-h3 { font-size: var(--sc-t-lg); font-weight: 600; line-height: 1.2; letter-spacing: var(--sc-track-snug); }
.hs-lede { font-size: var(--sc-t-lg); line-height: 1.5; color: color-mix(in oklab, var(--sc-ink) 86%, var(--sc-canvas)); max-width: 40ch; text-wrap: pretty; }
.hs-note { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); max-width: 46ch; }
.hs-num { font-family: var(--sc-font-mono); font-variant-numeric: tabular-nums; }
.hs-link { color: var(--hs-accent-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.hs-link:hover { text-decoration-thickness: 2px; }

/* --------------------------------------------------------- controls ---- */
.hs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 16px; border-radius: var(--sc-r-sm);
  font-weight: 600; font-size: var(--sc-t-sm); white-space: nowrap;
  transition: transform 120ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out);
}
.hs-btn:active { transform: translateY(1px); }
.hs-btn--primary { background: var(--sc-accent); color: var(--sc-accent-ink); }
.hs-btn--primary:hover { background: #38b8e0; }
.hs-btn--light { background: var(--sc-ink); color: var(--sc-canvas); }
.hs-btn--light:hover { background: #cfd9e4; }
.hs-btn--ghost { border: 1px solid var(--hs-line-strong); color: var(--sc-ink); }
.hs-btn--ghost:hover { border-color: color-mix(in oklab, var(--sc-ink) 40%, transparent); }
.hs-btn--ghost[aria-pressed="true"] { border-color: var(--hs-accent-text); color: var(--hs-accent-text); }
.hs-btn--sm { min-height: 34px; padding: 0 12px; }
.hs-btn--lg { min-height: 52px; padding: 0 24px; font-size: var(--sc-t-base); }

.hs-pill {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 3px 10px; border-radius: var(--sc-r-pill);
  font-family: var(--sc-font-mono); font-size: 0.72rem; letter-spacing: 0.02em;
  border: 1px solid var(--hs-line-strong); color: var(--sc-ink-soft);
}
.hs-pill--accent, .hs-pill.is-live { border-color: color-mix(in oklab, var(--sc-accent) 60%, transparent); color: var(--hs-accent-text); }
.hs-pill.is-done { border-color: color-mix(in oklab, #4ade80 50%, transparent); color: #86efac; }

/* ------------------------------------------------------------ chrome ---- */
.hs-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; letter-spacing: var(--sc-track-snug); }
.hs-brand img { border-radius: 7px; }

/* Fixed over the hero (transparent), solid once the hero has gone (.is-solid from home_surface.js). */
.hs-top {
  position: fixed; inset: 0 0 auto; z-index: var(--sc-z-chrome);
  display: flex; align-items: center; gap: 18px;
  height: var(--hs-top-h); padding: 0 max(16px, var(--sc-gutter));
  border-bottom: 1px solid transparent;
  transition: background-color 240ms var(--sc-ease-out), border-color 240ms var(--sc-ease-out);
}
.hs-top.is-solid { background: color-mix(in oklab, var(--sc-canvas) 94%, transparent); border-bottom-color: var(--hs-line); }
.hs-top .hs-brand { margin-right: auto; }
.hs-top__links { display: none; gap: 4px; }
.hs-top__links a, .hs-top__login {
  padding: 8px 10px; border-radius: var(--sc-r-sm); font-size: var(--sc-t-sm);
  color: color-mix(in oklab, var(--sc-ink) 82%, transparent);
  transition: color 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out);
}
.hs-top__links a:hover, .hs-top__login:hover { color: var(--sc-ink); background: color-mix(in oklab, var(--sc-ink) 8%, transparent); }
.hs-top__login { display: none; }
.hs-top__menu { position: relative; }
.hs-top__menu summary {
  list-style: none; cursor: pointer;
  display: grid; place-content: center; gap: 5px; width: 40px; height: 40px;
  border: 1px solid var(--hs-line-strong); border-radius: var(--sc-r-sm);
}
.hs-top__menu summary::-webkit-details-marker { display: none; }
.hs-top__menu summary span { display: block; width: 16px; height: 1.5px; background: var(--sc-ink); }
.hs-top__menu nav {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px;
  display: flex; flex-direction: column; padding: 6px;
  background: var(--hs-raised); border: 1px solid var(--hs-line-strong); border-radius: var(--sc-r-md);
  box-shadow: var(--sc-e3);
}
.hs-top__menu nav a { padding: 10px 12px; border-radius: var(--sc-r-sm); font-size: var(--sc-t-sm); }
.hs-top__menu nav a:hover { background: var(--sc-surface); }
@media (min-width: 1024px) {
  .hs-top__links { display: flex; margin-right: auto; }
  .hs-top .hs-brand { margin-right: 18px; }
  .hs-top__login { display: inline-flex; }
  .hs-top__menu { display: none; }
}

/* -------------------------------------------------------------- hero ---- */
/* --hp is the hero's progress (the engine's --sc-p); --mx/--my the eased pointer, -1..1,
   set by home_surface.js on fine pointers only. Every plane composes both, so near planes
   travel further than far ones under the same scroll and the same hand. */
.hs-act { scroll-margin-top: var(--hs-top-h); }
.hs-hero { --hp: var(--sc-p, 0); --mx: 0; --my: 0; }
.hs-hero__stage { height: 100svh; overflow: clip; background: var(--sc-canvas); isolation: isolate; }
.hs-l { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; pointer-events: none; }

.hs-hero__copy {
  position: absolute; z-index: 4; left: 50%; top: calc(var(--hs-top-h) + 9vh);
  width: min(92vw, 54rem); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  transform: translate(-50%, calc(var(--hp) * -12vh));
  opacity: clamp(0, calc(1 - var(--hp) * 2.6), 1);
}
.hs-hero__h1 {
  font-size: clamp(2.2rem, 1.3rem + 3.4vw, 4.6rem); font-weight: 640; line-height: 1.02;
  letter-spacing: -0.04em; text-wrap: balance;
  text-shadow: 0 2px 28px rgb(2 6 16 / 0.45);
}
/* Rotating agent name in the headline (same behaviour as the current home page). */
.hs-slot { position: relative; display: block; overflow: hidden; height: 1.1em; padding: .24em 0; margin: -.24em 0; box-sizing: content-box;
  -webkit-mask-image: linear-gradient(transparent 0, #000 .12em, #000 calc(100% - .12em), transparent 100%);
  mask-image: linear-gradient(transparent 0, #000 .12em, #000 calc(100% - .12em), transparent 100%); }
.hs-slot__sizer { visibility: hidden; }
.hs-slot__track { position: absolute; inset-inline: 0; top: .24em; display: flex; flex-direction: column; row-gap: .4em; transition: transform 600ms cubic-bezier(.65, 0, .35, 1); }
.hs-slot__item { display: flex; align-items: center; justify-content: center; gap: .2em; height: 1.1em; white-space: nowrap; }
.hs-slot__item img { flex-shrink: 0; width: .93em; height: .93em; border-radius: 27%; box-shadow: 0 0 0 1px rgb(255 255 255 / .25); user-select: none; }
@media (prefers-reduced-motion: reduce) { .hs-slot__track { transition: none; } }
.hs-hero__lede { max-width: 58ch; font-size: var(--sc-t-base); line-height: 1.5; color: color-mix(in oklab, var(--sc-ink) 86%, transparent); text-shadow: 0 1px 18px rgb(2 6 16 / 0.5); text-wrap: pretty; }
.hs-hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
.hs-btn--glass { background: rgb(255 255 255 / 0.08); border: 1px solid rgb(255 255 255 / 0.22); color: var(--sc-ink); backdrop-filter: blur(8px); }
.hs-btn--glass:hover { background: rgb(255 255 255 / 0.14); }

/* Keeps the transparent top bar readable over a bright frame. */
.hs-hero__stage::before {
  content: ""; position: absolute; z-index: 8; inset: 0 0 auto; height: calc(var(--hs-top-h) + 56px); pointer-events: none;
  background: linear-gradient(to bottom, rgb(5 10 23 / 0.72), transparent);
}
.hs-hero__fade {
  position: absolute; z-index: 9; inset: auto 0 0; height: 26vh; pointer-events: none;
  background: linear-gradient(to top, var(--sc-canvas), transparent);
  opacity: calc(0.35 + var(--hp) * 0.65);
}

/* C: room. The room scales about the monitor's centre (measured: screen at 27.58% 20.67%,
   44.88% x 45.19% of the plate) until the screen fills the view; the near desk falls away faster. */
.hs-room {
  position: absolute; z-index: 1; left: 50%; top: 50%;
  width: max(100vw, calc(100svh * 2400 / 1350)); aspect-ratio: 2400 / 1350;
  transform-origin: 50.02% 43.26%;
  /* Opens pulled back (lower and smaller, edges fading into the page) so the headline has clear
     wall above the monitor, then pushes in until the screen fills the view. */
  --s0: 0.72; --s1: 2.3; --y0: 30%;
  transform: translate(calc(-50% + var(--mx) * -8px), calc(-50% + var(--y0) - var(--hp) * (var(--y0) - 6.74%)))
    scale(calc(var(--s0) + var(--hp) * (var(--s1) - var(--s0))));
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%), radial-gradient(78% 85% at 50% 55%, #000 60%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0, #000 22%), radial-gradient(78% 85% at 50% 55%, #000 60%, transparent 100%);
  mask-composite: intersect;
  will-change: transform;
}
.hs-room__plate { display: block; width: 100%; height: 100%; }
.hs-room__screen {
  position: absolute; left: 27.583%; top: 20.667%; width: 44.875%; height: 45.185%;
  overflow: hidden; border-radius: 0.35%; background: #000;
  box-shadow: 0 0 6vw rgb(37 150 190 / 0.22);
}
.hs-room__screen video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hs-room__lamp { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(18% 22% at 80.5% 48%, rgb(255 190 120 / 0.22), transparent 70%); }
.hs-hero--room .hs-hero__copy { top: calc(var(--hs-top-h) + 3vh); gap: 14px; }
.hs-hero--room .hs-hero__h1 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.6rem); }
.hs-room__fore {
  z-index: 6; inset: auto 0 0; height: auto; object-fit: contain; object-position: center bottom;
  transform-origin: 50% 100%;
  transform: translate3d(calc(var(--mx) * -30px), calc(16% + var(--hp) * 40%), 0) scale(calc(1 + var(--hp) * 0.35));
  filter: blur(calc(1.5px + var(--hp) * 6px));
}

@media (max-width: 700px) {
  .hs-hero__copy { top: calc(var(--hs-top-h) + 5vh); gap: 14px; }
  /* The monitor sits below the copy, never behind it. --hs-copy-b (set by home_surface.js) is where the
     copy ends; the room shrinks (down to 120vw) until the screen (0.2542 x room width tall) fits under it,
     and --y0 = 6.74% pins the screen's centre at `top`, so the push-in scales about it without drifting. */
  .hs-room {
    --cb: var(--hs-copy-b, 62svh); --gap: 18px;
    width: clamp(120vw, (100svh - var(--cb) - 2 * var(--gap) - var(--hs-status-h)) / 0.2542, 196vw);
    top: calc(var(--cb) + var(--gap) + clamp(120vw, (100svh - var(--cb) - 2 * var(--gap) - var(--hs-status-h)) / 0.2542, 196vw) * 0.1271);
    --s0: 1; --s1: 1.25; --y0: 6.74%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%); mask-image: linear-gradient(to bottom, transparent 0, #000 18%);
  }
  .hs-hero--room .hs-hero__copy { top: calc(var(--hs-top-h) + 2.5vh); gap: 12px; }
  .hs-hero__lede { font-size: var(--sc-t-sm); line-height: 1.45; }
  .hs-hero__ctas { flex-wrap: nowrap; width: 100%; gap: 10px; margin-top: 2px; }
  .hs-hero__ctas .hs-btn--lg { flex: 1 1 0; min-width: 0; min-height: 48px; padding: 0 12px; }
  .hs-room__fore { inset: auto -40vw 0; width: 180vw; }
}
/* The help cards slide in from 56px off the right edge; without this the overhang widens the
   page on phones and pushes the top bar's menu button off screen. */
.hs-act[data-hs-act="help"] { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  .hs-hero { --hp: 0.62; }
  .hs-hero__copy { opacity: 1; transform: translate(-50%, 0); }
  .hs-hero--room .hs-room { transform: translate(-50%, calc(-50% + var(--y0))) scale(var(--s0)); }
  .hs-room__fore { transform: translate3d(0, 16%, 0); }
}

/* ------------------------------------------------------------ panels ---- */
.hs-panel {
  background: var(--sc-surface);
  border: 1px solid var(--hs-line);
  border-radius: var(--sc-r-md);
  box-shadow: var(--sc-edge), var(--sc-e2);
}
.hs-panel__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--hs-line);
}
.hs-panel__bar--flat { padding: 0 0 12px; }
.hs-panel__title { font-size: var(--sc-t-base); font-weight: 600; }
.hs-panel__meta { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.hs-panel__foot { padding: 10px 16px; border-top: 1px solid var(--hs-line); font-family: var(--sc-font-mono); font-size: 0.72rem; color: var(--sc-ink-soft); }

.hs-field__label { display: block; margin-bottom: 8px; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.hs-field {
  display: block; width: 100%;
  padding: 14px 16px; border-radius: var(--sc-r-sm);
  background: var(--sc-canvas); border: 1px solid var(--hs-line-strong);
  font-size: var(--sc-t-base); line-height: 1.45; color: var(--sc-ink);
}
.hs-field--input:focus { outline: none; border-color: var(--sc-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--sc-accent) 30%, transparent); }
.hs-field--input::placeholder { color: color-mix(in oklab, var(--sc-ink-soft) 75%, transparent); }

.hs-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 16px; background: var(--hs-line); border: 1px solid var(--hs-line); border-radius: var(--sc-r-sm); overflow: hidden; }
.hs-specs > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--sc-surface); }
.hs-specs dt { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.hs-specs dd { font-size: var(--sc-t-sm); font-weight: 550; }
.hs-specs--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 34rem; }
.hs-specs--wide dd { font-family: var(--sc-font-mono); font-size: var(--sc-t-lg); font-weight: 500; }

/* --------------------------------------------------------- act 1 ---- */
/* Rhythm: a section break is more space above than below; sections that follow a pinned
   act start almost at once, because the pinned stage already took a viewport to scroll off. */
.hs .sc-section { padding-block: var(--sc-section) calc(var(--sc-section) * 0.5); }
.hs-act--prompt { padding: clamp(2rem, 5vh, 3.5rem) 0 clamp(1rem, 3vh, 2rem); }
.hs .hs-act--tight { padding-top: clamp(1rem, 2vh, 1.5rem); }
.hs-prompt { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.hs-prompt__intro { display: flex; flex-direction: column; gap: 20px; }
.hs-job__body { padding: 16px; }
@media (min-width: 900px) {
  .hs-prompt { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}

/* --------------------------------------------------------- stages ---- */
.hs-stage {
  display: grid; align-items: center;
  padding: calc(var(--hs-top-h) + 16px) 0 calc(var(--hs-status-h) + 16px);
}

/* --------------------------------------------------------- act 2 ---- */
.hs-script { max-width: 62rem; margin: 0 auto; }
.hs-script__stats { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 14px 16px 0; }
.hs-script__stats p { display: flex; align-items: baseline; gap: 8px; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.hs-script__stats .hs-num { font-size: var(--sc-t-xl); color: var(--sc-ink); }
.hs-script__view {
  position: relative; height: clamp(12rem, 40vh, 26rem); margin: 14px 16px 0; overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
}
.hs-script__lines { display: flex; flex-direction: column; gap: 10px; padding: 18% 0; will-change: transform; }
.hs-script__lines li {
  font-size: clamp(1.02rem, 0.9rem + 0.5vw, 1.32rem); line-height: 1.45; max-width: 58ch;
  color: color-mix(in oklab, var(--sc-ink) 34%, var(--sc-surface));
  transition: color 220ms var(--sc-ease-out);
}
.hs-script__lines li.is-said { color: color-mix(in oklab, var(--sc-ink) 72%, var(--sc-surface)); }
.hs-script__lines li.is-now { color: var(--sc-ink); }
.hs-wave { position: relative; height: 48px; margin: 12px 16px 0; }
.hs-wave__svg { width: 100%; height: 100%; display: block; }
.hs-wave__svg rect { fill: color-mix(in oklab, var(--sc-ink) 22%, transparent); }
.hs-wave__svg rect.is-said { fill: var(--sc-accent); }
.hs-wave__head { position: absolute; top: -4px; bottom: -4px; left: 0; width: 2px; background: var(--sc-ink); border-radius: 2px; transform: translateX(var(--x, 0px)); }
.hs-script__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 16px; }

/* --------------------------------------------------------- act 3 ---- */
.hs-tl-stage { overflow: clip; display: flex; flex-direction: column; justify-content: center; gap: clamp(1.25rem, 3vh, 2.25rem); }
/* The heading and counts hold still above the panning tracks, so the stage is full top to bottom. */
.hs-tl__head { display: grid; gap: 10px 48px; align-items: end; width: 100%; color: var(--sc-ink-soft); }
.hs-tl__head .hs-h2 { color: var(--sc-ink); }
.hs-tl__head p { max-width: 60ch; }
@media (min-width: 1024px) { .hs-tl__head { grid-template-columns: minmax(0, 1fr) auto; } .hs-tl__head .hs-h2 { grid-column: 1; } .hs-tl__head p { grid-column: 1; } .hs-tl__head .hs-tl__counts { grid-column: 2; grid-row: 1 / span 2; } }
.hs-tl-frame { position: relative; min-width: 0; width: 100%; }
.hs-rail { display: flex; align-items: flex-start; gap: clamp(2rem, 4vw, 4rem); width: max-content; padding: 0 var(--sc-gutter); }
.hs-rail__lead, .hs-rail__end { width: min(24rem, 78vw); display: flex; flex-direction: column; gap: 14px; color: var(--sc-ink-soft); }
.hs-rail__lead .hs-h2, .hs-rail__end .hs-h3 { color: var(--sc-ink); }
.hs-tl__counts { display: grid; grid-template-columns: repeat(4, auto); gap: 8px 28px; margin-top: 6px; }
.hs-tl__counts dt { font-size: var(--sc-t-xs); }
.hs-tl__counts dd { font-family: var(--sc-font-mono); font-size: var(--sc-t-xl); color: var(--sc-ink); }

.hs-tl {
  position: relative; flex: none;
  width: calc(var(--hs-dur) * var(--hs-pps));
  padding-left: var(--hs-label-w);
  box-sizing: content-box;
}
.hs-tl__ruler, .hs-tl__track { position: relative; border-bottom: 1px solid var(--hs-line); }
.hs-tl__ruler { height: 30px; }
.hs-tl__chapter {
  position: absolute; left: calc(var(--at) * var(--hs-pps)); top: 6px;
  padding-left: 6px; border-left: 1px solid var(--hs-line-strong);
  font-family: var(--sc-font-mono); font-size: 0.68rem; color: var(--sc-ink-soft); white-space: nowrap;
}
.hs-tl__track--visuals { height: calc(var(--hs-row-v) + 8px); }
.hs-tl__track--graphics { height: calc(var(--hs-row-g) + 8px); }
.hs-tl__track--captions, .hs-tl__track--music, .hs-tl__track--sfx { height: 20px; }
.hs-tl__track--voice { height: 42px; }
.hs-clip {
  position: absolute; top: 4px; bottom: 4px;
  left: calc(var(--a) * var(--hs-pps)); width: max(3px, calc((var(--b) - var(--a)) * var(--hs-pps) - 2px));
  border-radius: 4px; overflow: hidden;
  background: var(--hs-raised) center / cover no-repeat;
  opacity: 0.32; transform: translateY(6px);
  transition: opacity 260ms var(--sc-ease-out), transform 260ms var(--sc-ease-out);
}
.hs-clip.is-placed { opacity: 1; transform: none; }
.hs-tl__track--graphics .hs-clip { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sc-accent) 70%, transparent); }
.hs-tl__track--captions .hs-clip { background: color-mix(in oklab, var(--sc-ink) 46%, transparent); top: 6px; bottom: 6px; }
.hs-tl__track--music .hs-clip { background: color-mix(in oklab, #a78bfa 45%, var(--hs-raised)); top: 5px; bottom: 5px; }
.hs-tl__track--sfx .hs-clip { background: #e3b10b; top: 5px; bottom: 5px; }
.hs-tl__track--voice svg { position: absolute; inset: 4px 0; width: 100%; height: calc(100% - 8px); }
.hs-tl__track--voice rect { fill: color-mix(in oklab, var(--sc-accent) 70%, transparent); }

.hs-tl__labels {
  position: absolute; z-index: 3; top: 0; left: 0; width: var(--hs-label-w);
  display: none; flex-direction: column;
  background: var(--sc-canvas);
  border-right: 1px solid var(--hs-line-strong);
  box-shadow: 12px 0 16px -8px var(--sc-canvas);
  opacity: 0; transition: opacity 200ms var(--sc-ease-out);
}
.hs-tl-frame.has-labels .hs-tl__labels { opacity: 1; }
.hs-tl__label { display: flex; align-items: center; padding-left: 14px; font-family: var(--sc-font-mono); font-size: 0.7rem; color: var(--sc-ink-soft); border-bottom: 1px solid transparent; }
.hs-tl__label--ruler { height: 31px; }
.hs-tl__label:nth-child(2) { height: calc(var(--hs-row-v) + 9px); }
.hs-tl__label:nth-child(3) { height: calc(var(--hs-row-g) + 9px); }
.hs-tl__label:nth-child(4), .hs-tl__label:nth-child(6), .hs-tl__label:nth-child(7) { height: 21px; }
.hs-tl__label:nth-child(5) { height: 43px; }
@media (min-width: 1024px) { .hs-tl__labels { display: flex; } }

.hs-tl__playhead {
  position: absolute; z-index: 4; top: -8px; bottom: -8px; left: 58%; width: 2px;
  background: var(--sc-ink); border-radius: 2px;
  opacity: 0; transition: opacity 200ms var(--sc-ease-out);
}
.hs-tl-frame.is-on-timeline .hs-tl__playhead { opacity: 1; }
.hs-tl__playhead span {
  position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -4px);
  padding: 2px 6px; border-radius: 4px; background: var(--sc-ink); color: var(--sc-canvas);
  font-family: var(--sc-font-mono); font-size: 0.7rem; font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------- act 4 ---- */
.hs-render { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hs-render__job { width: min(100%, 44rem); }
.hs-render__progress { padding: 14px 16px 16px; }
.hs-meter { height: 6px; border-radius: 6px; background: var(--hs-raised); overflow: hidden; }
.hs-meter__fill { display: block; height: 100%; width: 100%; background: var(--sc-accent); transform-origin: left; transform: scaleX(var(--v, 0)); }
.hs-render__line { display: flex; gap: 10px; margin-top: 10px; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.hs-render__line .hs-num { color: var(--sc-ink); min-width: 3.5ch; }
.hs-player-slot { position: relative; width: min(100%, 84rem, calc((100svh - var(--hs-top-h) - var(--hs-status-h) - 11rem) * 16 / 9)); }
.hs-player-slot__wait {
  position: absolute; inset: 0 0 auto; aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  border: 1px dashed var(--hs-line-strong); border-radius: var(--sc-r-md);
  font-family: var(--sc-font-mono); font-size: 0.75rem; color: var(--sc-ink-soft);
}
.hs-player { position: relative; width: 100%; margin: 0; }
.hs-player__frame {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--sc-r-md); overflow: hidden;
  background: #000; box-shadow: var(--sc-e3); border: 1px solid var(--hs-line);
}
.hs-player__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hs-player__sound {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  padding: 8px 12px; border-radius: var(--sc-r-sm);
  background: color-mix(in oklab, #000 62%, transparent); color: #fff; font-size: var(--sc-t-xs); font-weight: 600;
}
.hs-player__sound:hover { background: color-mix(in oklab, #000 80%, transparent); }
.hs-player figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-top: 12px; }
.hs-player__title { font-weight: 600; font-size: var(--sc-t-sm); }

/* --------------------------------------------------------- act 5 ---- */
.hs .hs-act--after-pin { padding-top: clamp(1rem, 3vh, 2rem); }
.hs-results { display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3.5rem); }
.hs-results__head { display: flex; flex-direction: column; gap: 12px; color: var(--sc-ink-soft); }
.hs-results__head .hs-h2 { color: var(--sc-ink); }
.hs-studio { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hs-studio figure { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.hs-studio img { width: 100%; height: auto; border-radius: var(--sc-r-sm); border: 1px solid var(--hs-line); }
.hs-studio figcaption { font-family: var(--sc-font-mono); font-size: 0.72rem; color: var(--sc-ink-soft); }
.hs-studio__main { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .hs-studio { grid-template-columns: 2fr 1fr 1fr; }
  .hs-studio__main { grid-column: 1; grid-row: 1 / span 2; }
}
.hs-comment { display: flex; gap: 14px; padding: 18px; background: var(--sc-surface); }
.hs-comment__avatar { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: color-mix(in oklab, var(--sc-accent) 24%, var(--sc-surface)); color: #bae6f5; font-weight: 650; font-size: var(--sc-t-sm); }
.hs-comment__who { font-size: var(--sc-t-sm); }
.hs-comment__who span { color: var(--sc-ink-soft); margin-left: 6px; }
.hs-comment__head { margin-top: 6px; font-weight: 600; }
.hs-comment blockquote { margin: 6px 0 0; color: color-mix(in oklab, var(--sc-ink) 80%, var(--sc-surface)); line-height: 1.55; font-size: var(--sc-t-sm); }

/* --------------------------------------------------------- act 6 ---- */
.hs-settings { display: flex; flex-direction: column; gap: 24px; }
.hs-format { display: grid; gap: 20px; padding: 20px 16px; }
.hs-format[hidden] { display: none; }
.hs-format__text { display: flex; flex-direction: column; gap: 10px; color: color-mix(in oklab, var(--sc-ink) 82%, var(--sc-surface)); }
.hs-format__text .hs-h3 { color: var(--sc-ink); }
.hs-format__rate { font-family: var(--sc-font-mono); color: var(--hs-accent-text); }
.hs-format__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 6px; }
.hs-format__sample { position: relative; aspect-ratio: 16 / 9; border-radius: var(--sc-r-sm); overflow: hidden; background: #000; }
.hs-format__play { position: absolute; inset: 0; width: 100%; }
.hs-format__play img { width: 100%; height: 100%; object-fit: cover; }
.hs-format__play-icon { position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in oklab, #fff 92%, transparent); color: #050a17; transition: transform 140ms var(--sc-ease-out); }
.hs-format__play:hover .hs-format__play-icon { transform: scale(1.06); }
.hs-format__sample iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Formats rail: the cards settle in sequence from the act's --sc-p (the first is already there),
   so the lineup reads as a drawer being pulled rather than a slideshow on rails. */
.hs-fm-stage { display: flex; flex-direction: column; justify-content: center; gap: clamp(1.25rem, 3vh, 2rem); overflow: clip; }
.hs-fm__head { display: flex; flex-direction: column; gap: 10px; color: var(--sc-ink-soft); }
.hs-fm__head .hs-h2 { color: var(--sc-ink); }
/* align-self: the engine pans from the rail's left edge; centred in the column it would start half off-screen. */
.hs-fm-rail { display: flex; align-items: stretch; align-self: flex-start; gap: 24px; width: max-content; padding: 0 var(--sc-gutter); }
.hs-fm {
  --settle: clamp(0, calc(var(--sc-p, 0) * 5 - var(--i) * 0.9 + 1), 1);
  width: min(34rem, 82vw); display: flex; flex-direction: column; gap: 16px; padding: 16px;
  background: var(--sc-surface); border: 1px solid var(--hs-line); border-radius: var(--sc-r-md);
  box-shadow: var(--sc-edge), var(--sc-e2);
  opacity: calc(0.55 + var(--settle) * 0.45);
  transform: translateY(calc((1 - var(--settle)) * 28px));
}
.hs-fm .hs-format__text { gap: 8px; }
@media (prefers-reduced-motion: reduce) { .hs-fm { opacity: 1; transform: none; } }

/* The close (a flow section): as it comes up the screen the prompt box eases forward and the ground
   warms to the brand blue. --k reaches 1 once the panel is well inside the viewport. */
.hs-close-stage { position: relative; --k: clamp(0, calc(var(--sc-p, 1) * 2.4), 1); }
.hs-close-glow { position: absolute; inset: -20% 0; pointer-events: none; opacity: var(--k);
  background: radial-gradient(50% 45% at 50% 50%, rgb(37 150 190 / 0.24), transparent 72%); }
.hs-close { position: relative; transform: translateY(calc((1 - var(--k)) * 48px)) scale(calc(0.94 + var(--k) * 0.06)); }
@media (prefers-reduced-motion: reduce) { .hs-close { transform: none; } .hs-close-glow { opacity: 0.7; } }

/* Comments from creators: three rows slide in opposite directions with the section's scroll. The extra top
   room keeps the drifting Results screenshots (parallax) clear of this header. */
.hs .hs-act--comments { padding-top: calc(var(--sc-section) + 4rem); position: relative; z-index: 1; background: var(--sc-canvas); }
.hs-wall { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; overflow: clip; }
.hs-wall__row { display: flex; align-items: stretch; gap: 16px; width: max-content; padding-inline: var(--sc-gutter); will-change: transform; }
.hs-wall__row .hs-comment { flex: none; width: min(27rem, 82vw); border: 1px solid var(--hs-line); border-radius: var(--sc-r-md); box-shadow: var(--sc-edge); }
.hs-wall__row--a { transform: translateX(calc((0.5 - var(--sc-p, 0.5)) * 46vw - 8vw)); }
.hs-wall__row--b { transform: translateX(calc((var(--sc-p, 0.5) - 0.5) * 46vw - 30vw)); }
.hs-wall__row--c { transform: translateX(calc((0.5 - var(--sc-p, 0.5)) * 30vw - 4vw)); }
.hs-wall__row--c img { flex: none; height: 8.5rem; width: auto; max-width: none; border-radius: var(--sc-r-sm); border: 1px solid var(--hs-line); }
@media (prefers-reduced-motion: reduce) {
  .hs-wall__row { transform: none !important; width: auto; overflow-x: auto; }
}

/* Help: items arrive in sequence with the section's scroll (questions from the left, panels from the right). */
.hs-settle {
  --settle: clamp(0, calc(var(--sc-p, 1) * 7 - 0.6 - var(--i) * 0.35), 1);
  opacity: calc(0.5 + var(--settle) * 0.5);
  transform: translateX(calc((1 - var(--settle)) * -56px));
}
.hs-settle--right { transform: translateX(calc((1 - var(--settle)) * 56px)); }
@media (prefers-reduced-motion: reduce) { .hs-settle { opacity: 1; transform: none; } }

.hs-switch { display: flex; align-items: center; gap: 10px; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.hs-switch button { position: relative; width: 42px; height: 24px; border-radius: 24px; background: var(--hs-line-strong); transition: background-color 160ms var(--sc-ease-out); }
.hs-switch button span { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--sc-ink); transition: transform 160ms var(--sc-ease-out); }
.hs-switch button[aria-checked="true"] { background: var(--sc-accent); }
.hs-switch button[aria-checked="true"] span { transform: translateX(18px); }
.hs-plans { display: flex; flex-direction: column; }
.hs-plan {
  display: grid; gap: 10px 20px; align-items: center; padding: 16px;
  border-bottom: 1px solid var(--hs-line);
}
.hs-plan--pick { background: color-mix(in oklab, var(--sc-accent) 8%, var(--sc-surface)); }
.hs-plan__name { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.hs-plan__price { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.hs-plan__price .hs-num { font-size: var(--sc-t-xl); color: var(--sc-ink); margin-right: 2px; }
.hs-plan__list { font-size: var(--sc-t-sm); color: color-mix(in oklab, var(--sc-ink) 78%, var(--sc-surface)); }
.hs-plan .hs-btn { justify-self: start; }
@media (min-width: 900px) {
  .hs-plan { grid-template-columns: 14rem 15rem minmax(0, 1fr) auto; }
  .hs-plan .hs-btn { justify-self: end; }
}
.hs-billing__notes { padding: 14px 16px; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.6; }
.hs-compare { width: calc(100% - 32px); margin: 0 16px 16px; border-collapse: collapse; font-size: var(--sc-t-sm); }
.hs-compare caption { text-align: left; padding: 8px 0; font-weight: 600; }
.hs-compare th, .hs-compare td { padding: 10px 8px; text-align: left; border-top: 1px solid var(--hs-line); vertical-align: top; }
.hs-compare thead th { font-family: var(--sc-font-mono); font-size: 0.7rem; font-weight: 500; color: var(--sc-ink-soft); }
.hs-compare tbody th { font-weight: 550; }
.hs-compare td:first-of-type { color: var(--sc-ink-soft); }
.hs-compare td:last-child { color: var(--sc-ink); }

/* --------------------------------------------------------- act 7 ---- */
.hs-help { display: grid; gap: 28px; }
.hs-help__faq { display: flex; flex-direction: column; }
.hs-help__faq .hs-h2 { margin-bottom: 14px; }
.hs-faq { border-top: 1px solid var(--hs-line); }
.hs-faq:last-child { border-bottom: 1px solid var(--hs-line); }
.hs-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 16px 2px; font-weight: 550; }
.hs-faq summary::-webkit-details-marker { display: none; }
.hs-faq summary::after { content: "+"; font-family: var(--sc-font-mono); color: var(--sc-ink-soft); }
.hs-faq[open] summary::after { content: "−"; }
.hs-faq p { padding: 0 2px 18px; max-width: 62ch; line-height: 1.6; color: color-mix(in oklab, var(--sc-ink) 80%, var(--sc-canvas)); }
.hs-faq a { color: var(--hs-accent-text); text-decoration: underline; text-underline-offset: 3px; }
.hs-help__side { display: flex; flex-direction: column; gap: 16px; }
.hs-help__card { padding: 18px; display: flex; flex-direction: column; gap: 10px; font-size: var(--sc-t-sm); line-height: 1.6; color: color-mix(in oklab, var(--sc-ink) 80%, var(--sc-surface)); }
.hs-help__card .hs-h3 { color: var(--sc-ink); font-size: var(--sc-t-base); }
.hs-sources { display: flex; flex-direction: column; gap: 6px; }
.hs-sources strong { color: var(--sc-ink); font-weight: 600; }
.hs-code {
  white-space: pre-wrap; padding: 12px; border-radius: var(--sc-r-sm);
  background: var(--sc-canvas); border: 1px solid var(--hs-line);
  font-family: var(--sc-font-mono); font-size: 0.76rem; line-height: 1.6; color: color-mix(in oklab, var(--sc-ink) 86%, var(--sc-canvas));
}
@media (min-width: 1100px) { .hs-help { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; } }

/* --------------------------------------------------------- act 8 ---- */
.hs-create { max-width: 52rem; margin: 0 auto; box-shadow: var(--sc-edge), var(--sc-e3); border-color: color-mix(in oklab, var(--sc-accent) 35%, var(--hs-line)); }
.hs-create__body { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.hs-create__row { display: flex; flex-direction: column; gap: 10px; }
.hs-create__row .hs-field { font-size: var(--sc-t-lg); }
@media (min-width: 700px) { .hs-create__row { flex-direction: row; } }

/* ------------------------------------------------- the job status bar ---- */
.hs-status {
  position: fixed; z-index: var(--sc-z-chrome); left: 0; right: 0; bottom: 0;
  height: var(--hs-status-h);
  display: flex; align-items: center; gap: 16px; padding: 0 16px;
  background: var(--sc-surface);
  border-top: 1px solid var(--hs-line);
  font-family: var(--sc-font-mono); font-size: 0.72rem; color: var(--sc-ink-soft);
}
.hs-status__job { display: flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--sc-ink); }
.hs-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sc-ink-soft); }
.hs-status.is-running .hs-dot { background: var(--sc-accent); }
.hs-status.is-done .hs-dot { background: #4ade80; }
.hs-status__stages { display: none; align-items: center; gap: 2px; }
.hs-status__stages a {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: var(--sc-r-sm);
  transition: background-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out);
}
.hs-status__stages a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1px solid currentColor; }
.hs-status__stages a:hover { background: var(--hs-raised); color: var(--sc-ink); }
.hs-status__stages a.is-stamped { color: var(--sc-ink); }
.hs-status__stages a.is-stamped::before { background: #4ade80; border-color: #4ade80; }
.hs-status__stages a[aria-current="step"] { color: var(--sc-ink); background: var(--hs-raised); }
.hs-status__stages a[aria-current="step"]::before { background: var(--sc-accent); border-color: var(--sc-accent); }
.hs-status__log { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
@media (min-width: 1024px) { .hs-status__stages { display: flex; } }

/* site footer sits beside the sidebar and clears the status bar */
.hs-shell > footer { padding-bottom: calc(var(--hs-status-h) + 2rem); }

/* -------------------------------------------------- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .hs-clip { transform: none; transition: none; }
  .hs-script__lines { transform: none !important; padding: 0; }
  .hs-script__view { height: auto; max-height: 22rem; overflow-y: auto; mask-image: none; }
}