/*
 * hakustudio.art. Colors come from docs/design/tokens.json at build time (the marker below);
 * motion follows docs/design/guide/20-motion-and-haptics.md: springs, one thing at a time,
 * nothing time-based past 0.5 s, and a crossfade for everything under Reduce Motion.
 */

:root {
  --canvas: #fafaf7;
  --surface: #ffffff;
  --fill: #e9e9e4;
  --stage: #0e0e0e;
  --text: #1a1a1f;
  --text-2: #5e5e66;
  --text-3: #7a7a81;
  --ink: #1c1c22;
  --on-ink: #ffffff;
  --on-media: #ffffff;
  --scrim: #00000099;
  --focus: #0a64d6;
  --stroke: #85858b;
  --hairline: #0000001a;
  --success: #1b7440;
  --warning: #8f5200;
  --destructive: #b3261e;
  --t1a: #ddcbd0;
  --t1b: #c5b3c8;
  --t3a: #cbddd6;
  --t3b: #b3c6b9;
  --t4a: #d2cfe0;
  --t4b: #b8bbc4;
  --t6a: #dfe2cd;
  --t6b: #c2cab5;
  --t8a: #e2d8cd;
  --t8b: #c6b8b9;
  color-scheme: light;
}
header.site,
.dark {
  --canvas: #131312;
  --surface: #1e1e1c;
  --fill: #2a2a27;
  --stage: #0e0e0e;
  --text: #f3f3f0;
  --text-2: #a3a3a9;
  --text-3: #808086;
  --ink: #f3f3f0;
  --on-ink: #1a1a1f;
  --on-media: #ffffff;
  --scrim: #00000099;
  --focus: #4c9bff;
  --stroke: #747479;
  --hairline: #ffffff1f;
  --success: #4cc38a;
  --warning: #f0b444;
  --destructive: #ff7a6e;
  --t1a: #ddcbd0;
  --t1b: #c5b3c8;
  --t3a: #cbddd6;
  --t3b: #b3c6b9;
  --t4a: #d2cfe0;
  --t4b: #b8bbc4;
  --t6a: #dfe2cd;
  --t6b: #c2cab5;
  --t8a: #e2d8cd;
  --t8b: #c6b8b9;
  color-scheme: dark;
}

:root {
  --font-display: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 12px;
  --s-lg: 16px;
  --s-xl: 24px;
  --s-xxl: 32px;
  --s-3xl: 48px;
  --s-jumbo: 64px;
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-card: 22px;
  --page: 1180px;
  --read: 66ch;
  --header: 64px;

  /* HakuMotion durations (tokens.json "duration"). */
  --press: 150ms;
  --quick: 250ms;
  --standard: 350ms;
  --emphasized: 500ms;
  --crossfade: 200ms;
  --step: 80ms;
  /* SwiftUI .smooth (critically damped) and .snappy (bounce 0.15) springs, sampled. */
  --ease-smooth: linear(
    0,
    0.0292,
    0.0987,
    0.1886,
    0.2855,
    0.3816,
    0.472,
    0.5543,
    0.6274,
    0.6913,
    0.7462,
    0.793,
    0.8323,
    0.8653,
    0.8927,
    0.9154,
    0.934,
    0.9493,
    0.9618,
    0.9719,
    0.9801,
    0.9868,
    0.9922,
    0.9966,
    1
  );
  --ease-snappy: linear(
    0,
    0.0295,
    0.1018,
    0.1976,
    0.3031,
    0.409,
    0.5094,
    0.6007,
    0.6812,
    0.7503,
    0.8083,
    0.856,
    0.8945,
    0.925,
    0.9486,
    0.9666,
    0.98,
    0.9896,
    0.9964,
    1.0009,
    1.0038,
    1.0054,
    1.0061,
    1.0063,
    1
  );
  --ease-fade: cubic-bezier(0.42, 0, 0.58, 1);
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url("/fonts/archivo.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-500.woff2") format("woff2");
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header) + 16px);
  interpolate-size: allow-keywords;
}
body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font: 1.0625rem/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: inherit;
}
p {
  margin: 0;
}
ul[role="list"] {
  list-style: none;
  margin: 0;
  padding: 0;
}
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}
::selection {
  background: var(--ink);
  color: var(--on-ink);
}
.skip {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  background: var(--ink);
  color: var(--on-ink);
  padding: 10px 16px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
}
.skip:focus {
  top: 12px;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.wrap {
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: max(24px, env(safe-area-inset-left));
}
@media (max-width: 480px) {
  .wrap {
    padding-inline: max(16px, env(safe-area-inset-left));
  }
}

/* ---------- Type ---------- */

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-stretch: 112%;
  text-wrap: balance;
  margin: 0;
  letter-spacing: -0.015em;
}
h1 {
  font-weight: 750;
  font-size: clamp(2.75rem, 1.25rem + 5.6vw, 5.75rem);
  line-height: 1;
  letter-spacing: -0.025em;
}
h2 {
  font-weight: 700;
  font-size: clamp(2.125rem, 0.9rem + 3.6vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.022em;
}
h3 {
  font-weight: 650;
  font-size: 1.25rem;
  line-height: 1.25;
  font-stretch: 106%;
  letter-spacing: -0.005em;
}
/* Inside a card, a title answers to the card, not the page. */
:is(.form-card, .beta-card) h2 {
  font-size: clamp(1.75rem, 1rem + 1.6vw, 2.5rem);
  line-height: 1.06;
}
.lede {
  font-size: clamp(1.1875rem, 1rem + 0.45vw, 1.375rem);
  line-height: 1.45;
  color: var(--text);
  max-width: 46ch;
  text-wrap: pretty;
}
.eyebrow {
  font: 500 0.8125rem/1.2 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
}
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.text-link {
  text-decoration: underline;
  text-decoration-color: var(--stroke);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--quick) var(--ease-fade);
}
.text-link:hover {
  text-decoration-color: currentColor;
}

/* ---------- Header ---------- */

/* A dark glass bar over the Light page (HAKU-443): the header takes every token's Dark value
   (build.mjs darkScope), so its text, ink button and focus ring are the apps' Dark ones. */
header.site {
  position: sticky;
  top: 0;
  z-index: 20;
  padding-top: env(safe-area-inset-top);
  color: var(--text);
  /* The page shows through, darkened, so secondary text stays 4.5:1 and the language
     switch's border 3:1 even over white (worst case about #282828 behind the text). */
  background: color-mix(in srgb, var(--canvas) 80%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(180%) brightness(50%);
  backdrop-filter: blur(24px) saturate(180%) brightness(50%);
  view-transition-name: site-header;
}
/* Without backdrop-filter the page would show through undarkened: a solid bar instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  header.site {
    background: var(--canvas);
  }
}
header.site::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--hairline);
  opacity: 0;
  transition: opacity var(--quick) var(--ease-fade);
}
html.scrolled header.site::after {
  opacity: 1;
}
header.site .wrap {
  display: flex;
  align-items: center;
  gap: var(--s-xl);
  min-height: var(--header);
}
.lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font: 650 18px/1 var(--font-display);
  font-stretch: 110%;
  letter-spacing: -0.01em;
  flex: none;
}
.lockup img {
  width: 32px;
  height: 32px;
}
nav.main {
  display: flex;
  gap: 2px;
  margin-inline-start: auto;
}
nav.main a,
nav.lang a {
  text-decoration: none;
  border-radius: 999px;
  transition:
    background-color var(--quick) var(--ease-fade),
    color var(--quick) var(--ease-fade);
}
nav.main a {
  padding: 8px 14px;
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--text-2);
}
nav.main a:hover,
nav.main a[aria-current="page"] {
  color: var(--text);
}
nav.main a[aria-current="page"] {
  background: var(--fill);
}
/* On the dark glass, fill is too close to the bar; a wash of the text color shows the page. */
header.site nav.main a[aria-current="page"] {
  background: color-mix(in srgb, var(--text) 16%, transparent);
}
.tools {
  display: flex;
  gap: var(--s-md);
  align-items: center;
}
nav.lang {
  display: inline-flex;
  border: 1px solid var(--stroke);
  border-radius: 999px;
  padding: 2px;
}
nav.lang a {
  font: 600 12px/1 var(--font-mono);
  color: var(--text-2);
  padding: 8px 10px;
  min-width: 36px;
  text-align: center;
}
nav.lang a[aria-current="true"] {
  background: var(--ink);
  color: var(--on-ink);
}
@media (max-width: 760px) {
  :root {
    --header: 104px;
  }
  header.site .wrap {
    flex-wrap: wrap;
    row-gap: 0;
    column-gap: var(--s-md);
  }
  .lockup {
    min-height: 56px;
  }
  .tools {
    margin-inline-start: auto;
  }
  .tools .btn {
    display: none;
  }
  nav.main {
    order: 3;
    width: calc(100% + 32px);
    margin-inline: -16px;
    padding: 0 12px 10px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  nav.main::-webkit-scrollbar {
    display: none;
  }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  font: 600 1rem/1 var(--font-body);
  padding: 14px 24px;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    transform var(--press) var(--ease-snappy),
    background-color var(--quick) var(--ease-fade),
    border-color var(--quick) var(--ease-fade),
    opacity var(--quick) var(--ease-fade);
  -webkit-tap-highlight-color: transparent;
}
.btn:active {
  transform: scale(0.97);
}
.btn-primary {
  background: var(--ink);
  color: var(--on-ink);
}
.btn-primary:hover {
  background: color-mix(in srgb, var(--ink) 86%, var(--canvas));
}
.btn-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--stroke);
}
.btn-secondary:hover {
  background: var(--fill);
}
.btn-sm {
  min-height: 40px;
  padding: 10px 18px;
  font-size: 0.875rem;
}
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: default;
}

/* ---------- Bands ---------- */

.band {
  padding-block: clamp(64px, 9vw, 120px);
}
.band.tight {
  padding-block: clamp(48px, 6vw, 80px);
}
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-lg);
}
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
  max-width: 44rem;
  margin-bottom: clamp(32px, 5vw, 56px);
}
.page-head .wrap {
  display: flex;
  flex-direction: column;
  gap: var(--s-xl);
}
.page-head h1 {
  max-width: 15ch;
}

/* ---------- Hero ---------- */

.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(48px, 7vw, 96px) clamp(56px, 8vw, 112px);
}
.hero-copy {
  display: flex;
  flex-direction: column;
  gap: var(--s-xl);
  min-width: 0;
}
.hero .ctas {
  display: flex;
  gap: var(--s-md);
  flex-wrap: wrap;
}
.hero-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-lg);
}
.app-icon {
  width: 80px;
  height: 80px;
  /* The iOS icon shape's corner, near enough at this size. */
  border-radius: 22.5%;
  box-shadow:
    0 0 0 1px var(--hairline),
    0 10px 24px -14px #00000059;
}
.pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--surface) 64%, transparent);
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
}
.hero .requirements {
  font-size: 0.875rem;
  color: var(--text-2);
  max-width: 46ch;
}
@media (max-width: 480px) {
  .app-icon {
    width: 64px;
    height: 64px;
  }
}
@media (max-width: 920px) {
  .hero .wrap {
    grid-template-columns: 1fr;
  }
}

/* The first cut: a Version 1 on its four tracks, playing. */
.cut {
  background: var(--stage);
  color: var(--on-media);
  border-radius: var(--r-card);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  box-shadow:
    0 1px 0 0 #ffffff14 inset,
    0 40px 80px -40px #00000080;
}
.describe {
  background: #ffffff14;
  border-radius: var(--r-md);
  padding: 12px 14px;
  font-size: 0.9375rem;
  line-height: 1.45;
  display: flex;
  gap: 10px;
}
.describe .who {
  font: 500 11px/1.65 var(--font-mono);
  color: #ffffffa8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex: none;
}
.viewer-wrap {
  position: relative;
}
/* WCAG 2.2.2: the playing example can be paused. 32 px to see, 44 px to hit. */
.cut-toggle {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--scrim);
  color: var(--on-media);
  cursor: pointer;
  transition:
    transform var(--press) var(--ease-snappy),
    background-color var(--quick) var(--ease-fade);
  -webkit-tap-highlight-color: transparent;
}
.cut-toggle::before {
  content: "";
  position: absolute;
  inset: -6px;
}
.cut-toggle:hover {
  background: color-mix(in srgb, var(--scrim) 75%, #000);
}
.cut-toggle:active {
  transform: scale(0.92);
}
.cut-toggle[hidden] {
  display: none;
}
.cut-toggle svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}
.cut-toggle .play,
.cut-toggle[aria-pressed="true"] .pause {
  display: none;
}
.cut-toggle[aria-pressed="true"] .play {
  display: block;
}
.viewer {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-sm);
  overflow: hidden;
  isolation: isolate;
  background: #1b1b1b;
}
.viewer .frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Stand-in footage until a creator's clip is licensed for the site: a lit, graded frame. */
  background: linear-gradient(
    172deg,
    color-mix(in srgb, var(--a) 82%, black) 0%,
    color-mix(in srgb, var(--b) 62%, black) 58%,
    color-mix(in srgb, var(--b) 30%, black) 100%
  );
  opacity: 0;
  transition: opacity var(--press) linear;
}
.viewer .frame.on {
  opacity: 1;
}
/* Footage performs (motion principle 1): the stand-in frames' light drifts like a slow,
   handheld camera, on a layer of its own so the frame itself never moves. */
:is(.viewer .frame, .hw-clip, .hw-player > span:not(.hw-badge, .hw-sub))::before {
  content: "";
  position: absolute;
  inset: -14%;
  background: radial-gradient(
    48% 44% at 30% 28%,
    color-mix(in srgb, var(--a) 70%, white),
    transparent 70%
  );
  transform: translate(-3%, -2%) scale(1.04);
}
/* data-state is set only when the cut moves (site.js, playCut), so Reduce Motion gets none.
   Paused, the light holds where it is rather than snapping back. The offset rides in the
   shorthand: a separate animation-delay rule would lose to it. */
.cut[data-state] .viewer .frame::before {
  animation: drift 7.5s ease-in-out var(--drift-at, 0s) infinite;
  will-change: transform;
}
.cut[data-state="paused"] .viewer .frame::before {
  animation-play-state: paused;
}
.viewer .frame:nth-child(2n) {
  --drift-at: -3.75s;
}
@keyframes drift {
  0%,
  100% {
    transform: translate(-3%, -2%) scale(1.04);
  }
  50% {
    transform: translate(3%, 2.5%) scale(1.1);
  }
}
.viewer .frame::after {
  /* A soft vignette so the frame reads as an image, not a swatch. */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, #00000059);
}
.viewer .cap {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  background: var(--scrim);
  padding: 6px 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9375rem;
  white-space: nowrap;
  transition: opacity var(--quick) var(--ease-fade);
}
.viewer .cap:empty {
  opacity: 0;
}
.viewer .badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--scrim);
  padding: 4px 8px;
  border-radius: 6px;
  font: 500 11px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.cut .meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  font: 500 12px/1 var(--font-mono);
  color: #ffffffb3;
  font-variant-numeric: tabular-nums;
}
.tracks {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 6px 10px;
  position: relative;
}
.tracks .lbl {
  font: 500 11px/22px var(--font-mono);
  color: #ffffff99;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lane {
  position: relative;
  height: 22px;
  background: #ffffff0d;
  border-radius: 5px;
}
.clip {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 5px;
  border: 1px solid #00000040;
  transition: filter var(--quick) var(--ease-fade);
}
.pic .clip {
  background: linear-gradient(90deg, var(--a), var(--b));
}
.pic .clip.live {
  filter: brightness(1.18);
}
.dia .clip {
  background: repeating-linear-gradient(90deg, #9bb7a8 0 2px, transparent 2px 4px), #3d5148;
}
.mus .clip {
  background: linear-gradient(90deg, #6d6a8f, #8b86b0);
}
.txt .clip {
  background: #f3f3f0;
  color: #1a1a1f;
  font: 600 10px/20px var(--font-body);
  padding-inline: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scrub {
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: 82px;
  right: 0;
  pointer-events: none;
  /* The head is as wide as the scrub and slides by its own width, so past the right edge
     it would widen the page (sideways scroll on phones). Clip it, keeping the line whole. */
  overflow: clip;
  overflow-clip-margin: 2px;
}
.scrub .head {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.scrub .head::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 2px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 0 1px #00000040;
}
.haku-did {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 0.8125rem;
  color: #ffffffcc;
  line-height: 1.4;
  min-height: 2.8em;
}
.haku-did img {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 1px;
}
@media (max-width: 480px) {
  .cut {
    padding: 14px;
    border-radius: var(--r-lg);
  }
  .tracks {
    grid-template-columns: 58px minmax(0, 1fr);
  }
  .scrub {
    left: 68px;
  }
}

/* ---------- How it works: the process loop ---------- */

/*
 * Five scenes of 6 s in one 30 s loop (the motion proposal of 2026-10-09): footage, detection,
 * the Core's plan, the edit graph, the first cut. Objects travel into their next role; nothing
 * cuts. The stage is drawn in units of 1/1000 of its width (--u), or 1/360 in the portrait
 * composition, so the same keyframes play at every size. Every move is transform, opacity or
 * filter. site.js arms it, pauses it off screen, and steps it under Reduce Motion; before
 * that, the stage holds the edit graph.
 */
.hw-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-lg) var(--s-xl);
  margin-bottom: var(--s-xl);
}
.hw-captions {
  display: grid;
  flex: 1 1 28rem;
  max-width: 44rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hw-cap {
  grid-area: 1 / 1;
}
.hw-n {
  font: 500 13px/1 var(--font-mono);
  color: var(--text-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hw-cap h3 {
  margin-top: var(--s-sm);
  font-size: clamp(1.375rem, 1rem + 1vw, 1.75rem);
}
.hw-cap p {
  margin: var(--s-sm) 0 0;
  color: var(--text);
  max-width: 46ch;
}
.hw-controls {
  display: flex;
  align-items: center;
  gap: var(--s-md);
}
.hw-example {
  font-size: 0.8125rem;
  color: var(--text-2);
}
.hw-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s-sm);
  height: 44px;
  padding: 0 18px;
  border: 1px solid var(--stroke);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: 600 0.9375rem/1 var(--font-body);
  cursor: pointer;
  transition: transform var(--press) var(--ease-snappy);
  -webkit-tap-highlight-color: transparent;
}
.hw-toggle:active {
  transform: scale(0.96);
}
.hw-toggle svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}
.hw[data-state="paused"] .hw-when-playing,
.hw:not([data-state="paused"]) .hw-when-paused {
  display: none;
}

.hw-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: var(--s-md);
  padding-top: 6px;
}
.hw-progress {
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  border-radius: 1px;
  background: var(--hairline);
  overflow: hidden;
}
.hw-progress span {
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform-origin: 0 50%;
  transform: scaleX(0);
}
.hw-rail button {
  appearance: none;
  min-height: 44px;
  padding: 10px 8px 10px 0;
  border: 0;
  border-radius: var(--r-xs);
  background: none;
  color: var(--text-2);
  font: 500 0.8125rem/1.2 var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: color var(--quick) var(--ease-fade);
}
.hw-rail button:hover,
.hw-rail button[aria-current] {
  color: var(--text);
}
.hw-rail button[aria-current] {
  font-weight: 650;
}
@media (max-width: 480px) {
  .hw-rail button {
    padding-right: 6px;
    font-size: 0.75rem;
  }
}
/* Until site.js runs the loop, the controls have nothing to control. */
.hw:not(.armed) :is(.hw-toggle, .hw-rail) {
  visibility: hidden;
}

/* The stage, and the canvas drawn in units on it. */
.hw-stage {
  container: hw / inline-size;
  border-radius: var(--r-card);
  background: var(--stage);
  color: var(--on-media);
  overflow: hidden;
}
.hw-canvas {
  --u: calc(100cqw / 1000);
  position: relative;
  aspect-ratio: 1000 / 400;
  transition: opacity 100ms var(--ease-fade);
}
.hw.swap :is(.hw-canvas, .hw-captions) {
  opacity: 0;
}
.hw-captions {
  transition: opacity 100ms var(--ease-fade);
}
.hw-canvas > * {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
}
.hw-label {
  font: 500 calc(9.5 * var(--u)) / 1.2 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffffa8;
}
.hw-dim {
  opacity: 0.66;
}

/* 01 Your footage */
.hw-coll b {
  display: block;
  font-size: calc(14 * var(--u));
  font-weight: 600;
}
.hw-coll span {
  font-size: calc(11 * var(--u));
  color: #ffffffa8;
}
.hw-clip {
  height: calc(62 * var(--u));
  border-radius: calc(8 * var(--u));
  box-shadow: 0 calc(4 * var(--u)) calc(12 * var(--u)) #00000066;
  overflow: hidden;
  background: linear-gradient(
    172deg,
    color-mix(in srgb, var(--a) 82%, black) 0%,
    color-mix(in srgb, var(--b) 62%, black) 58%,
    color-mix(in srgb, var(--b) 30%, black) 100%
  );
}
.hw-prompt {
  box-sizing: border-box;
  padding: calc(13 * var(--u)) calc(15 * var(--u));
  border-radius: calc(14 * var(--u));
  background: #f3f3f0;
  color: #1a1a1f;
  transform-origin: 0 0;
}
.hw-prompt .hw-label {
  color: #5e5e66;
}
.hw-prompt p {
  margin: calc(6 * var(--u)) 0 0;
  font-size: calc(13 * var(--u));
  line-height: 1.4;
}
.hw-note,
.hw-profile {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  height: calc(30 * var(--u));
  padding: 0 calc(12 * var(--u));
  border-radius: 999px;
  font-size: calc(12.5 * var(--u));
  white-space: nowrap;
  transform-origin: 0 0;
}
.hw-note {
  background: #f3f3f0;
  color: #1a1a1f;
}
.hw-note svg {
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
}
.hw-profile {
  height: calc(28 * var(--u));
  border: 1px solid #ffffff4d;
}

/* 02 Detection: a scan line, then four strips under each clip, in the clip's own color. */
.hw-scan {
  height: calc(140 * var(--u));
  width: max(2px, calc(2 * var(--u)));
  border-radius: 1px;
  background: #fff;
  box-shadow: 0 0 calc(12 * var(--u)) #ffffff99;
}
.hw-sigs {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--u));
  text-align: right;
}
.hw-sigs span {
  height: calc(8 * var(--u));
  font: 500 max(8px, calc(8.5 * var(--u))) / calc(8 * var(--u)) var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffffb3;
  white-space: nowrap;
}
.hw-wipe {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--u));
  transform-origin: 0 50%;
}
.hw-wipe i {
  position: relative;
  display: block;
  height: calc(8 * var(--u));
  border-radius: calc(3 * var(--u));
  background: #ffffff14;
}
.hw-wipe b {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: calc(3 * var(--u));
}
.hw-wipe .shot b {
  width: max(1.5px, calc(2 * var(--u)));
  background: #fff;
}
.hw-wipe .speech b {
  background: var(--a);
}
.hw-wipe .motion b {
  background: var(--b);
}
.hw-wipe .sound b {
  background: color-mix(in srgb, var(--a) 55%, transparent);
}

/* The metadata package, the cut plan and What Haku did: Haku's cards on the stage. */
:is(.hw-pkg, .hw-plan, .hw-did) {
  box-sizing: border-box;
  padding: calc(15 * var(--u)) calc(17 * var(--u));
  border-radius: calc(16 * var(--u));
  background: #ffffff17;
  box-shadow: 0 1px 0 0 #ffffff14 inset;
}
.hw-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(8 * var(--u));
}
.hw-card-head b,
.hw-did > b {
  font-size: calc(14 * var(--u));
  font-weight: 600;
}
.hw-rows {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
  margin-top: calc(10 * var(--u));
}
.hw-row {
  position: relative;
  display: grid;
  grid-template-columns:
    calc(8 * var(--u)) calc(30 * var(--u)) calc(64 * var(--u))
    minmax(0, 1fr);
  gap: calc(6 * var(--u));
  align-items: center;
  /* The right side is room for the role tag on picked rows. */
  padding: calc(5 * var(--u)) calc(66 * var(--u)) calc(5 * var(--u)) calc(6 * var(--u));
  font: 500 calc(10 * var(--u)) / 1.3 var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.hw-row > * {
  position: relative;
}
.hw-row .what {
  font: calc(11.5 * var(--u)) / 1.3 var(--font-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hw-th {
  font-size: calc(8.5 * var(--u));
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff8c;
}
.hw-row .dot {
  width: calc(7 * var(--u));
  height: calc(7 * var(--u));
  border-radius: 50%;
  background: var(--a);
}
.hw-row .bg {
  position: absolute;
  inset: 0;
  border-radius: calc(7 * var(--u));
  background: color-mix(in srgb, var(--a) 24%, transparent);
}
.hw-row .role {
  position: absolute;
  right: calc(-6 * var(--u));
  top: calc(3 * var(--u));
  padding: calc(2 * var(--u)) calc(6 * var(--u));
  border-radius: calc(5 * var(--u));
  background: var(--a);
  color: #1a1a1f;
  font: 600 calc(8.5 * var(--u)) / 1.3 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* 03 Core */
.hw-wire {
  height: calc(var(--h) * var(--u));
  background: #ffffff59;
}
.hw-wire.l {
  transform-origin: 0 50%;
}
.hw-wire.r {
  transform-origin: 100% 50%;
}
.hw-core {
  box-sizing: border-box;
  padding: calc(15 * var(--u));
  border-radius: calc(18 * var(--u));
  border: 1px solid #ffffff3d;
  background: #ffffff21;
}
.hw-core > b {
  display: block;
  font: 700 calc(20 * var(--u)) / 1 var(--font-display);
  font-stretch: 112%;
}
.hw-core ul {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  margin: calc(12 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
}
.hw-core li {
  position: relative;
  padding-left: calc(18 * var(--u));
  font-size: calc(12 * var(--u));
  line-height: 1.3;
}
.hw-core li::before,
.hw-core li i {
  content: "";
  position: absolute;
  left: 0;
  top: calc(3 * var(--u));
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  box-sizing: border-box;
  border-radius: 50%;
}
.hw-core li::before {
  border: 1.5px solid #ffffff73;
}
.hw-core li i {
  background: #f3f3f0;
}
.hw-plan ol {
  display: flex;
  flex-direction: column;
  gap: calc(7 * var(--u));
  margin: calc(11 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
}
.hw-plan li {
  display: grid;
  grid-template-columns: calc(7 * var(--u)) calc(48 * var(--u)) minmax(0, 1fr);
  gap: calc(8 * var(--u));
  align-items: baseline;
  font-size: calc(12 * var(--u));
  line-height: 1.35;
}
.hw-plan li::before {
  content: "";
  width: calc(7 * var(--u));
  height: calc(7 * var(--u));
  border-radius: 50%;
  background: var(--a);
  align-self: center;
}
.hw-plan li .hw-label {
  font-weight: 600;
  color: #fff;
}
.hw-checks {
  display: flex;
  flex-wrap: wrap;
  gap: calc(6 * var(--u)) calc(11 * var(--u));
  margin-top: calc(12 * var(--u));
  padding-top: calc(10 * var(--u));
  border-top: 1px solid #ffffff1f;
  font-size: calc(11.5 * var(--u));
}
.hw-checks > :not(.hw-dim)::before {
  /* A check mark. White, like everything else on the stage that isn't footage. */
  content: "";
  display: inline-block;
  width: calc(7 * var(--u));
  height: calc(3.5 * var(--u));
  margin: 0 calc(5 * var(--u)) calc(3 * var(--u)) calc(1 * var(--u));
  border: solid #fff;
  border-width: 0 0 1.6px 1.6px;
  transform: rotate(-45deg);
}

/* 04 Compiler: the edit graph, on its four tracks. */
.hw-eg {
  box-sizing: border-box;
  padding: calc(16 * var(--u)) calc(22 * var(--u));
  border-radius: calc(18 * var(--u));
  border: 1px solid #ffffff1f;
  background: #1a1a1a;
  box-shadow: 0 calc(30 * var(--u)) calc(60 * var(--u)) calc(-30 * var(--u)) #000000b3;
}
.hw-eg-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: calc(8 * var(--u));
}
.hw-tracks {
  position: relative;
  display: grid;
  grid-template-columns: calc(64 * var(--u)) minmax(0, 1fr);
  gap: calc(8 * var(--u)) calc(10 * var(--u));
  align-items: center;
  margin-top: calc(14 * var(--u));
}
.hw-lbl {
  font: 500 calc(9 * var(--u)) / 1 var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff99;
}
.hw-lane {
  position: relative;
  height: calc(24 * var(--u));
  border-radius: calc(5 * var(--u));
  background: #ffffff0d;
}
.hw-lane.pic {
  height: calc(36 * var(--u));
}
.hw-lane span {
  position: absolute;
  top: 0;
  bottom: 0;
  box-sizing: border-box;
  border-radius: calc(5 * var(--u));
  border: 1px solid #00000040;
  transform-origin: 0 50%;
}
.hw-lane.pic span {
  background: linear-gradient(90deg, var(--a), var(--b));
}
.hw-lane.dia span {
  background: repeating-linear-gradient(90deg, #9bb7a8 0 2px, transparent 2px 4px), #3d5148;
}
.hw-lane.mus span {
  background: linear-gradient(90deg, #6d6a8f, #8b86b0);
}
.hw-lane.txt span {
  padding: 0 calc(6 * var(--u));
  background: #f3f3f0;
  color: #1a1a1f;
  font: 600 calc(9.5 * var(--u)) / calc(22 * var(--u)) var(--font-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hw-head {
  --lw: 582;
  position: absolute;
  left: calc(74 * var(--u));
  top: calc(-6 * var(--u));
  bottom: calc(-6 * var(--u));
  width: max(2px, calc(2 * var(--u)));
  border-radius: 1px;
  background: #fff;
  box-shadow: 0 0 0 1px #00000040;
}

/* 05 First cut: the player develops, shots dissolve, What Haku did. */
.hw-player {
  aspect-ratio: 9 / 16;
  border-radius: calc(18 * var(--u));
  overflow: hidden;
  isolation: isolate;
  background: #1b1b1b;
}
.hw-player > span:not(.hw-badge, .hw-sub) {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(
    172deg,
    color-mix(in srgb, var(--a) 82%, black) 0%,
    color-mix(in srgb, var(--b) 62%, black) 58%,
    color-mix(in srgb, var(--b) 30%, black) 100%
  );
}
.hw-player::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, #00000059);
}
.hw-badge,
.hw-sub {
  position: absolute;
  z-index: 1;
  background: var(--scrim);
  white-space: nowrap;
}
.hw-badge {
  left: calc(10 * var(--u));
  top: calc(10 * var(--u));
  padding: calc(4 * var(--u)) calc(7 * var(--u));
  border-radius: calc(5 * var(--u));
  font: 500 calc(9.5 * var(--u)) / 1 var(--font-mono);
}
.hw-sub {
  left: 50%;
  bottom: calc(30 * var(--u));
  translate: -50% 0;
  padding: calc(5 * var(--u)) calc(10 * var(--u));
  border-radius: calc(7 * var(--u));
  font-size: calc(12.5 * var(--u));
  font-weight: 600;
}
.hw-did ul {
  display: flex;
  flex-direction: column;
  gap: calc(9 * var(--u));
  margin: calc(12 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
}
.hw-did li {
  display: flex;
  gap: calc(8 * var(--u));
  font-size: calc(13 * var(--u));
  line-height: 1.4;
}
.hw-did li::before {
  content: "";
  flex: none;
  width: calc(6 * var(--u));
  height: calc(6 * var(--u));
  margin-top: 0.5em;
  border-radius: 50%;
  background: var(--a);
}
.hw-btns {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--u));
  margin-top: calc(16 * var(--u));
}
.hw-btns span {
  display: inline-flex;
  align-items: center;
  height: calc(32 * var(--u));
  padding: 0 calc(14 * var(--u));
  border-radius: 999px;
  border: 1px solid #ffffff59;
  font-size: calc(12 * var(--u));
  font-weight: 600;
}
.hw-btns span:first-child {
  border-color: transparent;
  background: #fff;
  color: #1a1a1f;
}

/* Landscape composition: 1000 × 400 units. --tx/--ty and the like are where each object
   travels in the next scene. */
.hw-coll {
  --x: 150;
  --y: 104;
  --w: 320;
}
.hw-clip {
  --y: 146;
  --w: 108;
  --ty: 23;
}
.hw-strips {
  --y: 222;
  --w: 108;
  --ty: -44;
}
:is(.hw-clip, .hw-strips).c0 {
  --x: 150;
  --tx: 296;
}
:is(.hw-clip, .hw-strips).c1 {
  --x: 270;
  --tx: 176;
}
:is(.hw-clip, .hw-strips).c2 {
  --x: 390;
  --tx: 56;
}
:is(.hw-clip, .hw-strips).c3 {
  --x: 510;
  --tx: -64;
}
:is(.hw-clip, .hw-strips).c4 {
  --x: 630;
  --tx: -184;
}
.hw-scan {
  --x: 146;
  --y: 138;
  --sx: 610;
}
.hw-sigs {
  --x: 30;
  --y: 222;
  --w: 110;
}
.hw-prompt {
  --x: 740;
  --y: 116;
  --w: 230;
  --mx: -90;
  --my: -15;
  --mx2: -130;
}
.hw-note {
  --x: 740;
  --y: 272;
  --mx: -90;
  --my: -37;
  --mx2: -130;
}
.hw-profile {
  --x: 650;
  --y: 269;
  --fx: -40;
  --fy: 0;
}
.hw-pkg {
  --x: 280;
  --y: 89;
  --w: 440;
  --pkx: -270;
  --pky: 0;
  --pks: 0.82;
}
.hw-wire.l {
  --x: 411;
  --y: 199;
  --w: 27;
  --h: 2;
  --wx: 0;
  --wy: 1;
}
.hw-wire.r {
  --x: 602;
  --y: 199;
  --w: 48;
  --h: 2;
  --wx: 0;
  --wy: 1;
}
.hw-core {
  --x: 438;
  --y: 83;
  --w: 164;
}
.hw-plan {
  --x: 650;
  --y: 66;
  --w: 320;
  --lx: -310;
  --ly: 0;
}
.hw-eg {
  --x: 150;
  --y: 92;
  --w: 700;
  --ex: -170;
  --ey: 150;
  --es: 0.45;
}
.hw-player {
  --x: 251;
  --y: 12;
  --w: 158;
}
.hw-did {
  --x: 480;
  --y: 107;
  --w: 380;
}

/* Portrait composition: 360 × 600 units, for phones and narrow windows. Clips in rows of
   three and two, your words below, the Core under the package, the player beside What Haku
   did with the timeline under both. */
@container hw (max-width: 819px) {
  .hw-canvas {
    --u: calc(min(100cqw, 440px) / 360);
    width: calc(360 * var(--u));
    margin-inline: auto;
    aspect-ratio: 360 / 600;
  }
  .hw-clip {
    height: calc(56 * var(--u));
  }
  .hw-scan {
    height: calc(228 * var(--u));
  }
  .hw-sigs {
    text-align: left;
  }
  .hw-core ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(8 * var(--u)) calc(12 * var(--u));
  }
  .hw-wire.l,
  .hw-wire.r {
    width: max(2px, calc(2 * var(--u)));
  }
  .hw-wire.l {
    transform-origin: 50% 0;
  }
  .hw-wire.r {
    transform-origin: 50% 100%;
  }
  .hw-tracks {
    grid-template-columns: calc(52 * var(--u)) minmax(0, 1fr);
    gap: calc(6 * var(--u)) calc(8 * var(--u));
    margin-top: calc(10 * var(--u));
  }
  .hw-lane {
    height: calc(20 * var(--u));
  }
  .hw-lane.pic {
    height: calc(30 * var(--u));
  }
  .hw-lane.txt span {
    line-height: calc(18 * var(--u));
  }
  .hw-eg {
    padding: calc(14 * var(--u));
  }
  .hw-head {
    --lw: 232;
    left: calc(60 * var(--u));
  }
  .hw-did {
    padding: calc(12 * var(--u));
  }
  .hw-did li {
    font-size: calc(11.5 * var(--u));
  }
  .hw-plan {
    padding: calc(12 * var(--u)) calc(14 * var(--u));
  }
  .hw-plan li {
    font-size: calc(11 * var(--u));
  }
  .hw-checks {
    font-size: calc(10.5 * var(--u));
  }
  .hw-btns span {
    height: calc(28 * var(--u));
    padding: 0 calc(10 * var(--u));
    font-size: calc(10.5 * var(--u));
  }

  .hw-coll {
    --x: 20;
    --y: 14;
  }
  .hw-clip {
    --w: 100;
  }
  .hw-strips {
    --w: 100;
  }
  :is(.hw-clip, .hw-strips).c0 {
    --x: 20;
    --tx: 110;
  }
  :is(.hw-clip, .hw-strips).c1 {
    --x: 130;
    --tx: 0;
  }
  :is(.hw-clip, .hw-strips).c2 {
    --x: 240;
    --tx: -110;
  }
  :is(.hw-clip, .hw-strips).c3 {
    --x: 20;
    --tx: 110;
  }
  :is(.hw-clip, .hw-strips).c4 {
    --x: 130;
    --tx: 0;
  }
  .hw-clip:is(.c0, .c1, .c2) {
    --y: 66;
    --ty: 62;
  }
  .hw-clip:is(.c3, .c4) {
    --y: 178;
    --ty: -50;
  }
  .hw-strips:is(.c0, .c1, .c2) {
    --y: 126;
    --ty: 8;
  }
  .hw-strips:is(.c3, .c4) {
    --y: 238;
    --ty: -104;
  }
  .hw-scan {
    --x: 16;
    --y: 60;
    --sx: 330;
  }
  .hw-sigs {
    --x: 244;
    --y: 238;
    --w: 100;
  }
  .hw-prompt {
    --x: 20;
    --y: 352;
    --w: 320;
    --mx: 0;
    --my: 0;
    --mx2: 0;
  }
  .hw-note {
    --x: 20;
    --y: 476;
    --mx: 0;
    --my: -14;
    --mx2: 0;
  }
  .hw-profile {
    --x: 20;
    --y: 504;
    --fx: 0;
    --fy: -16;
  }
  .hw-pkg {
    --x: 20;
    --y: 20;
    --w: 320;
    --pkx: 0;
    --pky: -60;
    --pks: 0.62;
  }
  .hw-wire.l {
    --x: 179;
    --y: 180;
    --h: 12;
    --wx: 1;
    --wy: 0;
  }
  .hw-wire.r {
    --x: 179;
    --y: 342;
    --h: 10;
    --wx: 1;
    --wy: 0;
  }
  .hw-core {
    --x: 20;
    --y: 192;
    --w: 320;
  }
  .hw-plan {
    --x: 20;
    --y: 352;
    --w: 320;
    --lx: 0;
    --ly: -230;
  }
  .hw-eg {
    --x: 20;
    --y: 150;
    --w: 320;
    --ex: 0;
    --ey: 162;
    --es: 0.8;
  }
  .hw-player {
    --x: 20;
    --y: 16;
    --w: 150;
  }
  .hw-did {
    --x: 184;
    --y: 16;
    --w: 156;
  }
}

/* Before site.js runs (or without it): the stage holds the edit graph, scene 4's caption. */
.hw:not(.armed) .hw-canvas > :not(.hw-eg),
.hw:not(.armed) .hw-head,
.hw:not(.armed) .hw-cap:not(:nth-child(4)) {
  opacity: 0;
}

/* The loop: one 30 s timeline. Each keyframe stop is a point in it (1% = 0.3 s); --d offsets
   an item in a group by the arrival step (80 ms) or the beat the scene needs. */
.hw.armed
  :where(
    .hw-cap,
    .hw-progress span,
    .hw-canvas > *,
    .hw-wipe,
    .hw-sigs span,
    .hw-row:not(.hw-th),
    .hw-row .bg,
    .hw-row .role,
    .hw-row.drop > span,
    .hw-core li i,
    .hw-plan li,
    .hw-lane span,
    .hw-head,
    .hw-player > span,
    .hw-did li
  ) {
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-timing-function: var(--ease-smooth);
  animation-delay: var(--d, 0ms);
}
.hw.armed .hw-sigs {
  animation-name: none;
}
/* Each frame's light drifts on its own phase, carried in the shorthand: :is() takes its most
   specific argument, so a separate animation-delay rule would lose to this one. */
.hw.armed :is(.hw-clip, .hw-player > span:not(.hw-badge, .hw-sub))::before {
  animation: hw-drift 7.5s ease-in-out var(--drift-at, 0s) infinite;
  will-change: transform;
}
.hw-clip:nth-of-type(2n),
.hw-player .f1 {
  --drift-at: -3.75s;
}
.hw-clip:nth-of-type(3n) {
  --drift-at: -1.9s;
}
.hw.armed .hw-cap:nth-child(1) {
  animation-name: hw-t1;
}
.hw.armed .hw-cap:nth-child(2) {
  animation-name: hw-t2;
}
.hw.armed .hw-cap:nth-child(3) {
  animation-name: hw-t3;
}
.hw.armed .hw-cap:nth-child(4) {
  animation-name: hw-t4;
}
.hw.armed .hw-cap:nth-child(5) {
  animation-name: hw-t5;
}
.hw.armed .hw-progress span {
  animation-name: hw-prog;
  animation-timing-function: linear;
}
.hw.armed .hw-coll {
  animation-name: hw-coll;
}
.hw.armed .hw-clip {
  animation-name: hw-clip;
}
.hw.armed .hw-scan {
  animation-name: hw-scan;
  animation-timing-function: linear;
}
.hw.armed .hw-sigs span {
  animation-name: hw-sig;
}
.hw.armed .hw-strips {
  animation-name: hw-fly;
  /* The stagger stays on the wipe inside; the strips leave together, before the package. */
  animation-delay: 0ms;
}
.hw.armed .hw-wipe {
  animation-name: hw-wipe;
}
.hw.armed .hw-prompt {
  animation-name: hw-prompt;
}
.hw.armed .hw-note {
  animation-name: hw-note;
}
.hw.armed .hw-profile {
  animation-name: hw-profile;
}
.hw.armed .hw-pkg {
  animation-name: hw-pkg;
}
.hw.armed .hw-row:not(.hw-th) {
  animation-name: hw-row;
}
.hw.armed .hw-row .bg {
  animation-name: hw-pick;
  animation-delay: var(--p);
}
.hw.armed .hw-row .role {
  animation-name: hw-role;
  animation-delay: var(--p);
}
.hw.armed .hw-row.drop > span {
  animation-name: hw-drop;
  animation-delay: 0ms;
}
.hw.armed .hw-wire {
  animation-name: hw-wire;
}
.hw.armed .hw-core {
  animation-name: hw-core;
}
.hw.armed .hw-core li i {
  animation-name: hw-dot;
}
.hw.armed .hw-plan {
  animation-name: hw-plan;
}
.hw.armed .hw-plan li {
  animation-name: hw-plan-row;
}
.hw.armed .hw-eg {
  animation-name: hw-eg;
}
.hw.armed .hw-lane span {
  animation-name: hw-lane;
}
.hw.armed .hw-head {
  animation-name: hw-head;
  animation-timing-function: linear;
}
.hw.armed .hw-player {
  animation-name: hw-player;
}
.hw.armed .hw-player .f0 {
  animation-name: hw-f0;
}
.hw.armed .hw-player .f1 {
  animation-name: hw-f1;
}
.hw.armed .hw-player .f2 {
  animation-name: hw-f2;
}
.hw.armed .hw-player .s0 {
  animation-name: hw-s0;
}
.hw.armed .hw-player .s2 {
  animation-name: hw-s2;
}
.hw.armed .hw-player .hw-badge {
  animation-name: none;
}
.hw.armed .hw-did {
  animation-name: hw-did;
}
.hw.armed .hw-did li {
  animation-name: hw-bullet;
}

/* Captions crossfade in place, a 10 px rise in and out. */
@keyframes hw-drift {
  0%,
  100% {
    transform: translate(-3%, -2%) scale(1.04);
  }
  50% {
    transform: translate(3%, 2.5%) scale(1.1);
  }
}
@keyframes hw-t1 {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  1.33%,
  18.67% {
    opacity: 1;
    transform: none;
  }
  20%,
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}
@keyframes hw-t2 {
  0%,
  20% {
    opacity: 0;
    transform: translateY(10px);
  }
  21.33%,
  38.67% {
    opacity: 1;
    transform: none;
  }
  40%,
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}
@keyframes hw-t3 {
  0%,
  40% {
    opacity: 0;
    transform: translateY(10px);
  }
  41.33%,
  58.67% {
    opacity: 1;
    transform: none;
  }
  60%,
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}
@keyframes hw-t4 {
  0%,
  60% {
    opacity: 0;
    transform: translateY(10px);
  }
  61.33%,
  78.67% {
    opacity: 1;
    transform: none;
  }
  80%,
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}
@keyframes hw-t5 {
  0%,
  80% {
    opacity: 0;
    transform: translateY(10px);
  }
  81.33%,
  97.33% {
    opacity: 1;
    transform: none;
  }
  98.67%,
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}
@keyframes hw-prog {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
/* 01: the clips land 80 ms apart, rising 28 units; then the description, then the note. */
@keyframes hw-coll {
  0%,
  2% {
    opacity: 0;
    transform: translateY(calc(8 * var(--u)));
  }
  4.67%,
  33.33% {
    opacity: 1;
    transform: none;
  }
  36%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes hw-clip {
  0%,
  1% {
    opacity: 0;
    transform: translateY(calc(28 * var(--u))) scale(0.96);
  }
  4.67%,
  35% {
    opacity: 1;
    transform: none;
  }
  37.33% {
    opacity: 1;
    transform: translate(calc(var(--tx) * var(--u)), calc(var(--ty) * var(--u))) scale(0.35);
  }
  38.33%,
  100% {
    opacity: 0;
    transform: translate(calc(var(--tx) * var(--u)), calc(var(--ty) * var(--u))) scale(0.35);
  }
}
@keyframes hw-prompt {
  0%,
  6% {
    opacity: 0;
    transform: translateY(calc(10 * var(--u)));
  }
  8%,
  40% {
    opacity: 1;
    transform: none;
  }
  42.67%,
  51.67% {
    opacity: 1;
    transform: translate(calc(var(--mx) * var(--u)), calc(var(--my) * var(--u))) scale(0.86);
  }
  53.33%,
  100% {
    opacity: 0;
    transform: translate(calc(var(--mx2) * var(--u)), calc((var(--my) - 16) * var(--u))) scale(0.82);
  }
}
@keyframes hw-note {
  0%,
  8.67% {
    opacity: 0;
    transform: translateY(calc(8 * var(--u)));
  }
  10.33%,
  40% {
    opacity: 1;
    transform: none;
  }
  42.67%,
  51.67% {
    opacity: 1;
    transform: translate(calc(var(--mx) * var(--u)), calc(var(--my) * var(--u))) scale(0.86);
  }
  53.33%,
  100% {
    opacity: 0;
    transform: translate(calc(var(--mx2) * var(--u)), calc((var(--my) - 16) * var(--u))) scale(0.82);
  }
}
/* 02: a linear scan (2.2 s), the four kinds of signal wipe in under each clip, then clips
   and strips fly into the metadata package. */
@keyframes hw-scan {
  0%,
  21.33% {
    opacity: 0;
    transform: translateX(0);
  }
  22% {
    opacity: 1;
    transform: translateX(0);
  }
  29.33% {
    opacity: 1;
    transform: translateX(calc(var(--sx) * var(--u)));
  }
  30.67%,
  100% {
    opacity: 0;
    transform: translateX(calc(var(--sx) * var(--u)));
  }
}
@keyframes hw-sig {
  0%,
  23.33% {
    opacity: 0;
    transform: translateX(calc(-8 * var(--u)));
  }
  25.33%,
  35% {
    opacity: 1;
    transform: none;
  }
  37%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes hw-fly {
  0%,
  21.9% {
    opacity: 0;
    transform: none;
  }
  22%,
  35% {
    opacity: 1;
    transform: none;
  }
  36.67%,
  100% {
    /* The measurements fold into the clips and are gone before the package arrives. */
    opacity: 0;
    transform: translate(calc(var(--tx) * var(--u)), calc(var(--ty) * var(--u))) scale(0.35);
  }
}
@keyframes hw-wipe {
  0%,
  22% {
    transform: scaleX(0);
  }
  26%,
  100% {
    transform: scaleX(1);
  }
}
@keyframes hw-pkg {
  0%,
  36.67% {
    opacity: 0;
    transform: scale(0.92);
  }
  39.33%,
  40% {
    opacity: 1;
    transform: none;
  }
  42.67%,
  58.33% {
    opacity: 1;
    transform: translate(calc(var(--pkx) * var(--u)), calc(var(--pky) * var(--u))) scale(var(--pks));
  }
  60%,
  100% {
    opacity: 0;
    transform: translate(calc(var(--pkx) * var(--u)), calc(var(--pky) * var(--u))) scale(var(--pks));
  }
}
@keyframes hw-row {
  0%,
  36% {
    opacity: 0;
    transform: translateY(calc(6 * var(--u)));
  }
  38%,
  58.33% {
    opacity: 1;
    transform: none;
  }
  60%,
  100% {
    opacity: 0;
    transform: none;
  }
}
/* 03: what you said joins the package; the Core's four steps light 0.8 s apart; the chosen
   moments take their roles, the rest dim to 32%; the cut plan arrives. */
@keyframes hw-pick {
  0%,
  48.33% {
    opacity: 0;
  }
  50.33%,
  58.33% {
    opacity: 1;
  }
  60%,
  100% {
    opacity: 0;
  }
}
@keyframes hw-drop {
  0%,
  48.33% {
    opacity: 1;
  }
  50.33%,
  100% {
    opacity: 0.32;
  }
}
@keyframes hw-role {
  0%,
  49% {
    opacity: 0;
    transform: scale(0.8);
  }
  51%,
  58.33% {
    opacity: 1;
    transform: none;
  }
  60%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes hw-profile {
  0%,
  42% {
    opacity: 0;
    transform: translateY(calc(8 * var(--u)));
  }
  44%,
  51.67% {
    opacity: 1;
    transform: none;
  }
  53.33%,
  100% {
    opacity: 0;
    transform: translate(calc(var(--fx) * var(--u)), calc(var(--fy) * var(--u)));
  }
}
@keyframes hw-wire {
  0%,
  42.67% {
    opacity: 0;
    transform: scale(var(--wx), var(--wy));
  }
  44%,
  58.33% {
    opacity: 1;
    transform: none;
  }
  60%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes hw-core {
  0%,
  41.33% {
    opacity: 0;
    transform: scale(0.94);
  }
  43.33%,
  58.33% {
    opacity: 1;
    transform: none;
  }
  60%,
  100% {
    opacity: 0;
    transform: scale(0.96);
  }
}
@keyframes hw-dot {
  0%,
  44% {
    opacity: 0;
  }
  45.33%,
  58.33% {
    opacity: 1;
  }
  60%,
  100% {
    opacity: 0;
  }
}
@keyframes hw-plan {
  0%,
  52.67% {
    opacity: 0;
    transform: translateX(calc(24 * var(--u)));
  }
  56%,
  60% {
    opacity: 1;
    transform: none;
  }
  62.67%,
  100% {
    opacity: 0;
    transform: translate(calc(var(--lx) * var(--u)), calc(var(--ly) * var(--u))) scale(0.9);
  }
}
@keyframes hw-plan-row {
  0%,
  53.33% {
    opacity: 0;
    transform: translateX(calc(10 * var(--u)));
  }
  55.33%,
  60% {
    opacity: 1;
    transform: none;
  }
  62%,
  100% {
    opacity: 0;
    transform: none;
  }
}
/* 04: the edit graph rises; clips land in eight groups, 80 ms apart; the operations appear. */
@keyframes hw-eg {
  0%,
  60% {
    opacity: 0;
    transform: translateY(calc(14 * var(--u)));
  }
  61.67%,
  80% {
    opacity: 1;
    transform: none;
  }
  83.33%,
  96.67% {
    opacity: 1;
    transform: translate(calc(var(--ex) * var(--u)), calc(var(--ey) * var(--u))) scale(var(--es));
  }
  98.67%,
  100% {
    opacity: 0;
    transform: translate(calc(var(--ex) * var(--u)), calc(var(--ey) * var(--u))) scale(var(--es));
  }
}
@keyframes hw-lane {
  0%,
  62% {
    opacity: 0;
    transform: translateX(calc(-8 * var(--u))) scaleX(0.96);
  }
  63.33%,
  97% {
    opacity: 1;
    transform: none;
  }
  98.67%,
  100% {
    opacity: 0;
    transform: none;
  }
}
/* 05: the edit graph becomes the timeline; the player develops (blur 8 → 0); shots dissolve
   (0.6 s); What Haku did lists three changes, 0.4 s apart. Then everything settles out. */
@keyframes hw-head {
  0%,
  65.33% {
    opacity: 0;
    transform: translateX(0);
  }
  66% {
    opacity: 1;
    transform: translateX(0);
  }
  78.67% {
    opacity: 1;
    transform: translateX(calc(var(--lw) * var(--u)));
  }
  79.33% {
    opacity: 0;
    transform: translateX(calc(var(--lw) * var(--u)));
  }
  79.34%,
  84% {
    opacity: 0;
    transform: translateX(0);
  }
  84.67% {
    opacity: 1;
    transform: translateX(0);
  }
  96% {
    opacity: 1;
    transform: translateX(calc(var(--lw) * var(--u)));
  }
  97.33%,
  100% {
    opacity: 0;
    transform: translateX(calc(var(--lw) * var(--u)));
  }
}
@keyframes hw-player {
  0%,
  80.67% {
    opacity: 0;
    filter: blur(8px);
    transform: scale(0.97);
  }
  84%,
  96.67% {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
  98.67%,
  100% {
    opacity: 0;
    filter: blur(0);
    transform: none;
  }
}
@keyframes hw-f0 {
  0%,
  87.33% {
    opacity: 1;
  }
  89.33%,
  100% {
    opacity: 0;
  }
}
@keyframes hw-f1 {
  0%,
  87.33% {
    opacity: 0;
  }
  89.33%,
  91.33% {
    opacity: 1;
  }
  93.33%,
  100% {
    opacity: 0;
  }
}
@keyframes hw-f2 {
  0%,
  91.33% {
    opacity: 0;
  }
  93.33%,
  100% {
    opacity: 1;
  }
}
@keyframes hw-s0 {
  0%,
  84.67% {
    opacity: 0;
  }
  85.33%,
  87% {
    opacity: 1;
  }
  88%,
  100% {
    opacity: 0;
  }
}
@keyframes hw-s2 {
  0%,
  93.33% {
    opacity: 0;
  }
  94.67%,
  100% {
    opacity: 1;
  }
}
@keyframes hw-did {
  0%,
  84% {
    opacity: 0;
    transform: translateY(calc(10 * var(--u)));
  }
  85.33%,
  96.67% {
    opacity: 1;
    transform: none;
  }
  98.67%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes hw-bullet {
  0%,
  85.33% {
    opacity: 0;
    transform: translateY(calc(6 * var(--u)));
  }
  86.67%,
  96.67% {
    opacity: 1;
    transform: none;
  }
  98.67%,
  100% {
    opacity: 0;
    transform: none;
  }
}

/* ---------- Privacy ---------- */

/* Two columns on wide screens: the title holds still on the left while the promises, then
   the itemized list, read down the right. Statements, not boxes. */
#privacy .wrap {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
#privacy .section-head {
  grid-row: 1 / span 3;
  position: sticky;
  top: calc(var(--header) + var(--s-xl));
  margin-bottom: 0;
}
#privacy .wrap > :not(.section-head) {
  grid-column: 2;
}
.promises {
  display: flex;
  flex-direction: column;
}
.promise {
  display: grid;
  gap: var(--s-sm);
  padding-block: 0 clamp(28px, 4vw, 44px);
  min-width: 0;
}
.promise + .promise {
  padding-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--hairline);
}
.promise h3 {
  font-size: clamp(1.375rem, 1rem + 1vw, 1.875rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
}
.promise p {
  color: var(--text);
  max-width: 40ch;
}
.where {
  margin: var(--s-lg) 0 var(--s-xl);
  border-top: 1px solid var(--hairline);
  font-size: 0.9375rem;
}
.where div {
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: var(--s-xs) var(--s-xl);
  padding-block: var(--s-lg);
  border-bottom: 1px solid var(--hairline);
}
.where dt {
  font-weight: 600;
}
.where dd {
  margin: 0;
  color: var(--text);
}
@media (max-width: 860px) {
  #privacy .wrap {
    display: block;
  }
  #privacy .section-head {
    position: static;
    margin-bottom: clamp(32px, 5vw, 56px);
  }
  .where div {
    grid-template-columns: 1fr;
  }
}

/* ---------- Pillars, devices, CTA ---------- */

.pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 6vw, 80px) clamp(32px, 6vw, 96px);
}
.pillar {
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
  min-width: 0;
}
.pillar h3 {
  font-size: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.pillar p {
  color: var(--text);
  max-width: 44ch;
}
.pillar .proof {
  position: relative;
  max-width: none;
  margin-top: var(--s-xs);
  padding-left: 20px;
  font: 500 0.8125rem/1.5 var(--font-mono);
  color: var(--text-2);
}
.pillar .proof::before {
  /* A check mark in ink: each pillar ends on something you can verify. */
  content: "";
  position: absolute;
  left: 1px;
  top: 0.45em;
  width: 9px;
  height: 4.5px;
  border: solid var(--ink);
  border-width: 0 0 1.6px 1.6px;
  transform: rotate(-45deg);
}
.devices {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-xl);
}
.device {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: var(--s-lg);
  border-top: 1px solid var(--hairline);
  min-width: 0;
}
.device .name {
  font: 700 clamp(1.625rem, 1rem + 1.6vw, 2.5rem) / 1.05 var(--font-display);
  font-stretch: 112%;
  letter-spacing: -0.02em;
  margin-bottom: var(--s-sm);
}
.device p {
  font-size: 0.9375rem;
  color: var(--text);
}
@media (max-width: 860px) {
  .pillars {
    grid-template-columns: 1fr;
  }
  .devices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 420px) {
  .devices {
    grid-template-columns: 1fr;
  }
}
/* Dark bands (HAKU-443) take the Dark tokens, like the header (build.mjs darkScope): How it
   works becomes a full-width scene, and the closing call to action's button is white. */
.dark {
  background: var(--canvas);
  color: var(--text);
}
.dark .hw-stage {
  box-shadow: 0 0 0 1px var(--hairline);
}
.cta-band {
  padding-block: clamp(80px, 12vw, 160px);
}
.cta-band h2 {
  font-size: clamp(2.5rem, 1rem + 4.6vw, 5rem);
  max-width: 16ch;
}
.cta-band .wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(28px, 4vw, 40px);
}

/* ---------- About ---------- */

.prose {
  max-width: var(--read);
  display: flex;
  flex-direction: column;
  gap: var(--s-lg);
}
.prose p {
  color: var(--text);
}
.prose p strong {
  color: var(--text);
  font-weight: 600;
}
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: var(--s-3xl);
}
@media (max-width: 860px) {
  .split {
    grid-template-columns: 1fr;
    gap: var(--s-xl);
  }
}
.isnot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--s-xl);
  margin: 0;
}
.isnot div {
  padding-block: var(--s-lg);
  border-bottom: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.isnot dt {
  font-weight: 600;
}
.isnot dd {
  margin: 0;
  color: var(--text);
  font-size: 0.9375rem;
}
@media (max-width: 640px) {
  .isnot {
    grid-template-columns: 1fr;
  }
}
.team {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: var(--s-xl);
}
.person {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.person .portrait {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover;
  border-radius: var(--r-card);
  background: var(--fill);
  margin-bottom: var(--s-sm);
}
.person b {
  font: 650 20px/1.2 var(--font-display);
  font-stretch: 108%;
}
.person .role {
  color: var(--text-2);
  font-size: 0.9375rem;
}
.person p {
  font-size: 0.9375rem;
  color: var(--text);
}

/* ---------- Pricing ---------- */

.price-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--s-xxl);
  align-items: start;
}
@media (max-width: 860px) {
  .price-wrap {
    grid-template-columns: 1fr;
  }
}
.beta-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: clamp(24px, 3.4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: var(--s-xl);
}
.amount {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.amount .big {
  font: 750 72px/1 var(--font-display);
  font-stretch: 112%;
  letter-spacing: -0.02em;
}
.amount .per {
  color: var(--text-2);
}
.checks {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.checks li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
}
.checks li::before {
  content: "";
  width: 18px;
  height: 18px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--success);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M9 0a9 9 0 1 0 0 18A9 9 0 0 0 9 0Zm4.2 6.6-5 5.2a.9.9 0 0 1-1.3 0L4.8 9.7a.9.9 0 0 1 1.3-1.3l1.4 1.5 4.4-4.6a.9.9 0 1 1 1.3 1.3Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.later {
  display: flex;
  flex-direction: column;
  gap: var(--s-lg);
  padding-top: var(--s-lg);
}
.later p {
  color: var(--text);
}
.helper {
  font-size: 0.875rem;
  color: var(--text-2);
}

/* FAQ: rows open with a height spring where the browser can animate to auto. */
.faq {
  max-width: 800px;
  border-top: 1px solid var(--hairline);
}
.faq details {
  border-bottom: 1px solid var(--hairline);
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.125rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-lg);
  padding-block: var(--s-xl);
  -webkit-tap-highlight-color: transparent;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary .plus {
  position: relative;
  width: 14px;
  height: 14px;
  flex: none;
  transition: transform var(--quick) var(--ease-snappy);
}
.faq summary .plus::before,
.faq summary .plus::after {
  content: "";
  position: absolute;
  inset: 6px 0;
  height: 2px;
  border-radius: 2px;
  background: var(--text-2);
}
.faq summary .plus::after {
  transform: rotate(90deg);
}
.faq details[open] summary .plus {
  transform: rotate(45deg);
}
.faq details::details-content {
  block-size: 0;
  overflow: clip;
  transition:
    block-size var(--standard) var(--ease-smooth),
    content-visibility var(--standard) allow-discrete;
}
.faq details[open]::details-content {
  block-size: auto;
}
.faq details p {
  color: var(--text);
  max-width: var(--read);
  padding-bottom: var(--s-xl);
}

/* ---------- Contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: var(--s-3xl);
  align-items: start;
}
@media (max-width: 860px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}
.channels {
  display: flex;
  flex-direction: column;
}
.channel {
  padding-block: var(--s-lg);
  border-bottom: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.channel:first-child {
  padding-top: 0;
}
.channel .addr {
  display: flex;
  gap: var(--s-sm);
  align-items: center;
  flex-wrap: wrap;
}
.channel .addr a {
  font: 500 16px/1.4 var(--font-mono);
  text-decoration: none;
}
.copy-btn {
  position: relative;
  display: inline-grid;
  font: 600 12px/1 var(--font-body);
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: none;
  color: var(--text);
  cursor: pointer;
  transition: transform var(--press) var(--ease-snappy);
}
.copy-btn:active {
  transform: scale(0.95);
}
.copy-btn > span {
  grid-area: 1 / 1;
  align-self: center;
  transition:
    opacity var(--quick) var(--ease-fade),
    transform var(--quick) var(--ease-snappy);
}
.copy-btn .done {
  opacity: 0;
  transform: scale(0.8);
}
.copy-btn.copied .label {
  opacity: 0;
  transform: scale(0.8);
}
.copy-btn.copied .done {
  opacity: 1;
  transform: none;
}
.form-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: clamp(24px, 3.4vw, 40px);
  display: grid;
}
.form-card > * {
  grid-area: 1 / 1;
}
form.contact {
  display: flex;
  flex-direction: column;
  gap: var(--s-lg);
  transition:
    opacity var(--standard) var(--ease-fade),
    transform var(--standard) var(--ease-smooth);
}
.form-card.sent form.contact {
  opacity: 0;
  transform: scale(0.98);
  visibility: hidden;
  transition-property: opacity, transform, visibility;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-lg);
}
@media (max-width: 560px) {
  .field-row {
    grid-template-columns: 1fr;
  }
}
.field label,
.field legend {
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0;
}
.field .hint {
  font-size: 0.8125rem;
  color: var(--text-2);
  font-weight: 400;
}
.field input:not([type="checkbox"]),
.field select,
.field textarea {
  font: 16px/1.4 var(--font-body);
  color: var(--text);
  background: var(--canvas);
  border: 1px solid var(--stroke);
  border-radius: var(--r-md);
  padding: 12px 14px;
  width: 100%;
  min-height: 48px;
  transition:
    border-color var(--quick) var(--ease-fade),
    box-shadow var(--quick) var(--ease-fade);
}
.field select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-2) 50%),
    linear-gradient(-45deg, transparent 50%, var(--text-2) 50%);
  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 15px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.field :is(input, select, textarea):focus-visible {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 30%, transparent);
}
.field textarea {
  min-height: 112px;
  resize: vertical;
}
.field [aria-invalid="true"] {
  border-color: var(--destructive);
}
.field .error {
  color: var(--destructive);
  font-size: 0.875rem;
  font-weight: 500;
  animation: drop var(--quick) var(--ease-smooth);
}
.field .error:empty {
  display: none;
}
fieldset.field {
  border: 0;
  margin: 0;
  padding: 0;
}
.checks-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.checks-inline label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--stroke);
  border-radius: 999px;
  padding: 0 14px;
  min-height: 44px;
  font-weight: 500;
  font-size: 0.9375rem;
  cursor: pointer;
  transition:
    background-color var(--quick) var(--ease-fade),
    color var(--quick) var(--ease-fade),
    border-color var(--quick) var(--ease-fade);
}
.checks-inline input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.checks-inline label:has(input:checked) {
  background: var(--ink);
  color: var(--on-ink);
  border-color: var(--ink);
}
.checks-inline label:has(input:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.screener {
  display: grid;
  grid-template-rows: 1fr;
  transition:
    grid-template-rows var(--standard) var(--ease-smooth),
    margin-bottom var(--standard) var(--ease-smooth);
}
.screener > div {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--s-lg);
  transition: opacity var(--quick) var(--ease-fade);
}
.screener[hidden] {
  display: grid !important;
  grid-template-rows: 0fr;
  /* Folded away, it also gives back the form's gap. */
  margin-bottom: calc(-1 * var(--s-lg));
}
.screener[hidden] > div {
  opacity: 0;
  visibility: hidden;
}
.gotcha {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-status {
  font-size: 0.875rem;
  color: var(--destructive);
  font-weight: 500;
}
.form-status:empty {
  display: none;
}
.btn .spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  display: none;
  animation: spin 0.8s linear infinite;
}
.btn.busy .spinner {
  display: inline-block;
}
.sent-card {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
  opacity: 0;
  transform: translateY(12px);
  visibility: hidden;
  transition:
    opacity var(--standard) var(--ease-fade) 120ms,
    transform var(--standard) var(--ease-smooth) 120ms,
    visibility 0s linear var(--standard);
}
.form-card.sent .sent-card {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition-delay: 120ms, 120ms, 0s;
}
.sent-card .tick {
  width: 40px;
  height: 40px;
  color: var(--success);
}
.sent-card .tick path {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
}
.form-card.sent .sent-card .tick path {
  animation: draw var(--emphasized) var(--ease-smooth) 260ms forwards;
}
.sent-card p {
  color: var(--text);
}

/* ---------- Legal ---------- */

.legal {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--s-3xl);
  align-items: start;
}
.legal nav.toc {
  position: sticky;
  top: calc(var(--header) + 24px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.875rem;
}
.legal nav.toc a {
  color: var(--text-2);
  text-decoration: none;
  padding: 6px 0;
  transition: color var(--quick) var(--ease-fade);
}
.legal nav.toc a:hover,
.legal nav.toc a[aria-current="true"] {
  color: var(--text);
}
.legal-body {
  max-width: 72ch;
  display: flex;
  flex-direction: column;
  gap: var(--s-lg);
}
.legal-body h2 {
  font-size: clamp(1.375rem, 1rem + 1vw, 1.75rem);
  margin-top: var(--s-3xl);
  scroll-margin-top: calc(var(--header) + 24px);
}
.legal-body h2:first-child {
  margin-top: 0;
}
.legal-body h3 {
  font-size: 1.125rem;
  margin-top: var(--s-md);
}
.legal-body p,
.legal-body li {
  color: var(--text-2);
}
.legal-body strong {
  color: var(--text);
  font-weight: 600;
}
.legal-body ul {
  margin: 0;
  padding-left: 1.2em;
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
}
.legal-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.legal-body th,
.legal-body td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--hairline);
}
.legal-body th {
  font-weight: 600;
}
.legal-body td {
  color: var(--text-2);
}
.table-scroll {
  overflow-x: auto;
}
.updated {
  font: 500 0.8125rem/1.2 var(--font-mono);
  color: var(--text-2);
}
@media (max-width: 860px) {
  .legal {
    grid-template-columns: 1fr;
  }
  .legal nav.toc {
    display: none;
  }
}

/* ---------- Footer ---------- */

footer.site {
  border-top: 1px solid var(--hairline);
  padding-block: var(--s-3xl) calc(var(--s-3xl) + env(safe-area-inset-bottom));
  color: var(--text-2);
  font-size: 0.875rem;
}
footer.site .wrap {
  display: flex;
  gap: var(--s-xl);
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}
footer.site .lockup {
  font-size: 0.9375rem;
  color: var(--text);
}
footer.site .lockup img {
  width: 24px;
  height: 24px;
}
footer.site nav {
  display: flex;
  gap: var(--s-xs) var(--s-lg);
  flex-wrap: wrap;
}
footer.site nav a {
  text-decoration: none;
  padding-block: 8px;
  transition: color var(--quick) var(--ease-fade);
}
footer.site nav a:hover {
  color: var(--text);
}

/* ---------- Not found ---------- */

.not-found {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-xl);
}

/* ---------- Motion ---------- */

/*
 * Arrival (hakuArrival): rise 12 px and fade in. The hero runs on load; everything else
 * when it enters the viewport, once. Content stays visible until site.js arms the reveal,
 * so nothing is hidden without JavaScript.
 */
.arrive {
  animation: arrive var(--standard) var(--ease-smooth) both;
  animation-delay: calc(var(--i, 0) * var(--step));
}
html.motion .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--standard) var(--ease-fade),
    transform var(--standard) var(--ease-smooth);
  transition-delay: calc(var(--i, 0) * var(--step));
}
html.motion .reveal.in {
  opacity: 1;
  transform: none;
}
/* A section head arrives in reading order, not as one block: the eyebrow, then the title
   (display type travels further and settles slower), then what follows it. */
html.motion .section-head.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}
html.motion .section-head.reveal > * {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--standard) var(--ease-fade),
    transform var(--standard) var(--ease-smooth);
}
html.motion .section-head.reveal > h2 {
  transform: translateY(28px);
  transition-duration: var(--standard), var(--emphasized);
  transition-delay: var(--step);
}
html.motion .section-head.reveal > :nth-child(n + 3) {
  transition-delay: calc(3 * var(--step));
}
html.motion .section-head.reveal.in > * {
  opacity: 1;
  transform: none;
}
/* The loop's stage settles in as its dark scene scrolls up, tied to the scroll and nothing
   else: no scroll-jacking, and text never moves with it. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .dark .hw-stage {
      animation: stage-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 38%;
    }
  }
}
@keyframes stage-in {
  from {
    opacity: 0.4;
    transform: translateY(40px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* The hero's cut: the panel arrives, the frame develops, then the tracks fill clip by clip. */
.hero .cut {
  animation: arrive var(--emphasized) var(--ease-smooth) 200ms both;
}
.hero .cut .describe {
  animation: arrive var(--standard) var(--ease-smooth) 420ms both;
}
.hero .viewer {
  animation: develop var(--emphasized) var(--ease-smooth) 560ms both;
}
.hero .viewer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--canvas);
  pointer-events: none;
  animation: develop-white var(--emphasized) var(--ease-fade) 560ms both;
}
.hero .cut .meta,
.hero .tracks .lbl {
  animation: fade var(--standard) var(--ease-fade) 800ms both;
}
.hero .lane .clip {
  animation: clip-in var(--standard) var(--ease-smooth) both;
  animation-delay: calc(860ms + var(--i, 0) * var(--step));
}
.hero .scrub,
.hero .cut-toggle {
  animation: fade var(--quick) var(--ease-fade) 1500ms both;
}
.hero .haku-did {
  animation: fade var(--standard) var(--ease-fade) 1600ms both;
}

@keyframes arrive {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}
@keyframes fade {
  from {
    opacity: 0;
  }
}
@keyframes clip-in {
  from {
    opacity: 0;
    transform: translateX(-8px) scaleX(0.96);
  }
}
@keyframes develop {
  from {
    filter: blur(8px);
  }
}
@keyframes develop-white {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes drop {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}

/* Page changes: the header stays put; the page crossfades with a short rise. */
@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation: vt-out var(--press) var(--ease-fade) both;
}
::view-transition-new(root) {
  /* Starts as the old page is nearly gone, so two pages never show through each other. */
  animation: vt-in var(--standard) var(--ease-smooth) 90ms both;
}
::view-transition-group(site-header) {
  animation: none;
}
/* The header stays put, but each nav link and language is its own layer, so the current
   page's pill and the selected language crossfade from one item to the other instead of
   jumping with the page. (A sliding pill would carry its own copy of the label across the
   header's.) */
header.site nav.main a[data-nav="home"] {
  view-transition-name: nav-home;
}
header.site nav.main a[data-nav="about"] {
  view-transition-name: nav-about;
}
header.site nav.main a[data-nav="pricing"] {
  view-transition-name: nav-pricing;
}
header.site nav.main a[data-nav="contact"] {
  view-transition-name: nav-contact;
}
header.site nav.lang a[data-lang="en"] {
  view-transition-name: lang-en;
}
header.site nav.lang a[data-lang="es"] {
  view-transition-name: lang-es;
}
::view-transition-group(*) {
  animation-duration: var(--quick);
}
::view-transition-group(root) {
  animation-duration: var(--standard);
}
@keyframes vt-out {
  to {
    opacity: 0;
  }
}
@keyframes vt-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* Reduce Motion: every move becomes a crossfade, or a still end state. */
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
  .arrive,
  .hero .cut,
  .hero .cut .describe,
  .hero .cut .meta,
  .hero .tracks .lbl,
  .hero .lane .clip,
  .hero .scrub,
  .hero .haku-did {
    animation: fade var(--crossfade) var(--ease-fade) both;
  }
  .hero .viewer {
    animation: none;
  }
  .hero .viewer::after {
    animation: develop-white var(--crossfade) var(--ease-fade) both;
  }
  html.motion .reveal,
  html.motion .section-head.reveal > * {
    transform: none !important;
    transition: opacity var(--crossfade) var(--ease-fade) !important;
    transition-delay: 0ms !important;
  }
  html.motion .section-head.reveal {
    transition: none !important;
  }
  .faq summary .plus,
  .btn,
  .copy-btn,
  .copy-btn > span {
    transition-duration: 0ms;
  }
  .btn:active,
  .copy-btn:active {
    transform: none;
  }
  .faq details::details-content {
    transition: none;
  }
  .screener {
    transition: none;
  }
  .btn .spinner {
    animation-duration: 2.4s;
  }
}

/* ---------- The reader's other preferences ---------- */

:root {
  accent-color: var(--ink);
}
.describe > span:last-child,
.hw-prompt p {
  hanging-punctuation: first;
}

/* Increase Contrast: stronger lines, secondary text at full strength, borders on cards. */
@media (prefers-contrast: more) {
  /* header.site and .dark redefine the tokens with their Dark values, so they need the
     overrides too. */
  :root,
  header.site,
  .dark {
    --text-2: var(--text);
    --text-3: var(--text);
    --hairline: color-mix(in srgb, var(--text) 45%, transparent);
    --stroke: var(--text);
  }
  .text-link {
    text-decoration-color: currentColor;
  }
  .pill,
  .beta-card,
  .form-card,
  .cut,
  .hw-stage {
    outline: 1px solid var(--stroke);
    outline-offset: -1px;
  }
}

/* Reduce Transparency: the header becomes solid. */
@media (prefers-reduced-transparency: reduce) {
  header.site {
    background: var(--canvas);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Forced colors (Windows contrast themes): system colors everywhere except the decorative
   picture of a cut, which keeps its own colors so it still reads as a timeline. */
@media (forced-colors: active) {
  .btn,
  .pill,
  .copy-btn,
  .cut-toggle,
  nav.lang,
  .checks-inline label {
    border: 1px solid ButtonText;
  }
  :focus-visible {
    outline-color: Highlight;
  }
  .cut,
  .hw-stage {
    forced-color-adjust: none;
  }
}

/* Print, mostly for the legal pages: the text, without the page's chrome. */
@media print {
  header.site,
  footer.site,
  .skip,
  nav.toc,
  .cut-toggle,
  .ctas {
    display: none;
  }
  body {
    background: #fff;
    color: #000;
  }
  .band {
    background: none;
    padding-block: 12px;
  }
  html.motion .reveal,
  html.motion .section-head.reveal > * {
    opacity: 1;
    transform: none;
  }
  .legal {
    display: block;
  }
}