/* home-v8 stylesheet: css/10-tokens.css css/20-base.css css/30-components.css css/40-sections.css css/50-legacy-hooks.css css/60-scenes.css */
/* ---- css/10-tokens.css ---- */
@font-face {
  font-family: "Inter";
  src: url("inter-variable-v1.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Literata";
  src: url("literata-latin-55c10c2e8178.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --u-paper: #faf9f5;
  --u-white: #ffffff;
  --u-ink: #141413;
  --u-quiet: #f5f4ed;
  --u-text: #141413;
  --u-text-nav: #30302e;
  --u-text-body: #5e5d59;
  --u-on-dark: #faf9f5;
  --u-on-dark-2: #87867f;
  --u-rule: #d1cfc5;
  --u-rule-soft: #e8e6dc;
  --u-rule-softer: #f0eee6;
  --u-rule-dark: #30302e;
  --u-accent: #246b5e;
  --u-error: #bf4d43;
  --u-plate-sage: #c8dbd4;
  --u-plate-sand: #e9e0cd;
  --u-plate-mist: #d2dce7;
  --u-plate-stone: #e3e1d8;
  --u-picto-fill: #cfe0d9;
  --u-serif: "Literata", Georgia, "Times New Roman", serif;
  --u-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --u-t-section: clamp(34px, calc(34px + 18 * (100vw - 320px) / 1120), 52px);
  --u-t-title: clamp(20px, calc(20px + 5 * (100vw - 320px) / 1120), 25px);
  --u-t-item: clamp(16px, calc(16px + 3 * (100vw - 320px) / 1120), 19px);
  --u-section: clamp(96px, calc(96px + 32 * (100vw - 320px) / 1120), 128px);
  --u-section-sm: clamp(64px, calc(64px + 32 * (100vw - 320px) / 1120), 96px);
  --u-gutter: clamp(32px, calc(32px + 32 * (100vw - 320px) / 1120), 64px);
  --u-picto: clamp(64px, calc(64px + 32 * (100vw - 320px) / 1120), 96px);
  --u-media-radius: clamp(16px, calc(16px + 16 * (100vw - 320px) / 1120), 32px);
  --u-header: 84px;
  --u-ease-enter: cubic-bezier(.25, 1, .5, 1);
  --u-ease: cubic-bezier(.165, .84, .44, 1);
  --u-ease-soft: cubic-bezier(.215, .61, .355, 1);
  --u-ease-expo: cubic-bezier(.19, 1, .22, 1);
}

@media (max-width: 1199px) {
  :root { --u-header: 72px; }
}
/* ---- css/20-base.css ---- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--u-header);
  background: var(--u-paper);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "pnum", "lnum", "liga";
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--u-paper);
  color: var(--u-text);
  font-family: var(--u-sans);
  font-size: 17px;
  line-height: 1.6;
}

body.u-menu-open { overflow: hidden; }

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

img, svg, video { display: block; max-width: 100%; }
figure { margin: 0; }
button, input { font: inherit; }
button, summary { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4, p, ul { margin: 0; }
ul { padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--u-serif);
  font-optical-sizing: auto;
  text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: inherit; }

main > section { min-width: 0; }

.u-container {
  width: min(calc(100% - 2 * var(--u-gutter)), 1312px);
  margin-inline: auto;
}

.u-wide {
  width: min(calc(100% - 2 * var(--u-gutter)), 1088px);
  margin-inline: auto;
}

.u-text {
  width: min(calc(100% - 2 * var(--u-gutter)), 1088px);
  margin-inline: auto;
}

@media (min-width: 1049px) {
  .u-text { max-width: 640px; }
}

.u-split {
  width: min(100%, 864px);
  margin-inline: auto;
}

@supports (text-box: trim-both cap alphabetic) {
  main section h1,
  main section h2,
  main section h3,
  main section h4,
  main section p,
  main section li {
    text-box: trim-both cap alphabetic;
  }
}

:focus-visible {
  outline: 2px solid var(--u-accent);
  outline-offset: 2px;
}

.u-button:focus-visible,
.button:focus-visible,
.plan-cta:focus-visible,
.build-download:focus-visible,
.u-film-play:focus-visible {
  outline-offset: 4px;
}

.u-button,
.button,
.plan-cta,
.build-download,
.inline-unlock-controls button {
  position: relative;
  display: inline-flex;
  min-width: 44px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 8px 24px;
  border: 0;
  border-radius: 8px;
  background: var(--u-ink);
  box-shadow: 0 0 0 0 var(--u-ink);
  color: var(--u-on-dark);
  font-family: var(--u-sans);
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: box-shadow 200ms ease-in-out;
}

.u-button:hover,
.button:hover,
.plan-cta:hover,
.build-download:hover,
.inline-unlock-controls button:hover { box-shadow: 0 0 0 2px var(--u-ink); }

.u-button-small {
  min-height: 36px;
  padding: 8px 16px;
  font-size: 15px;
}

.u-button-outline,
.plan .u-button-outline {
  background: var(--u-white);
  box-shadow: 0 0 0 1px var(--u-rule);
  color: var(--u-text-body);
  transition: color 100ms linear, box-shadow 200ms ease-in-out;
}

.u-button-outline:hover,
.plan .u-button-outline:hover {
  box-shadow: 0 0 0 1px var(--u-white), 0 0 0 2px var(--u-rule);
  color: var(--u-ink);
}

.u-button-on-dark {
  background: var(--u-paper);
  box-shadow: 0 0 0 0 var(--u-paper);
  color: var(--u-ink);
}

.u-button-on-dark:hover { box-shadow: 0 0 0 2px var(--u-paper); }

main p a,
.pricing-note a,
.inline-unlock-confirm a,
.fallback-link,
.download-credit-details a {
  text-decoration-line: underline;
  text-decoration-color: #b0aea5;
  text-underline-offset: 3px;
}

main p a:hover,
.pricing-note a:hover,
.inline-unlock-confirm a:hover,
.fallback-link:hover { color: var(--u-ink); text-decoration-color: currentColor; }

.u-skip {
  position: fixed;
  z-index: 300;
  top: 16px;
  left: 16px;
  min-height: 43px;
  padding: 8px 16px;
  border-radius: 8px;
  background: var(--u-paper);
  box-shadow: 0 0 0 2px var(--u-accent);
  color: var(--u-ink);
  font-size: 15px;
  text-decoration: none;
  transform: translateY(-80px);
}

.u-skip:focus { transform: none; }

@media (max-width: 566px) {
  .u-button:not(.u-button-small),
  .button,
  .plan-cta {
    width: 100%;
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }
}
/* ---- css/30-components.css ---- */
header.site {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  height: var(--u-header);
  border-bottom: 1px solid var(--u-rule-soft);
  background: var(--u-paper);
  animation: u-header-in 1000ms var(--u-ease-enter) both;
}

.u-header-row {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
}

.brand-home,
.foot-brand { min-height: 44px; display: inline-flex; align-items: center; flex: none; }
.brand-lockup { width: auto; height: 28px; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.site-nav a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  color: var(--u-text-nav);
  font-size: 15px;
  text-decoration: none;
  transition: color 200ms linear;
}

.site-nav a:hover { color: var(--u-ink); }

.u-header-actions { display: flex; align-items: center; gap: 12px; }

.sign-in-link {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 8px;
  background: var(--u-paper);
  box-shadow: 0 0 0 1px var(--u-rule);
  color: var(--u-text-body);
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  transition: color 100ms linear, box-shadow 200ms ease-in-out;
}

.sign-in-link:hover {
  box-shadow: 0 0 0 1px var(--u-paper), 0 0 0 2px var(--u-rule);
  color: var(--u-ink);
}

.u-header-phone-actions { display: none; margin-left: auto; align-items: center; gap: 8px; }

.u-menu-button,
.u-menu-close {
  position: relative;
  width: 44px;
  height: 44px;
  flex: none;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--u-ink);
  cursor: pointer;
}

.u-menu-button span {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 1px;
  background: currentColor;
  transform-origin: center;
  transition: transform 300ms var(--u-ease), opacity 300ms var(--u-ease);
}

.u-menu-button span:nth-child(1) { top: 14px; }
.u-menu-button span:nth-child(2) { top: 21px; }
.u-menu-button span:nth-child(3) { top: 28px; width: 11px; }
.u-menu-button[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.u-menu-button[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.u-menu-button[aria-expanded="true"] span:nth-child(3) { width: 22px; transform: translateY(-7px) rotate(-45deg); }

.u-phone-menu {
  position: fixed;
  z-index: 200;
  inset: 0;
  min-height: 100dvh;
  background: var(--u-white);
  box-shadow: -12px 0 24px rgba(20, 20, 19, .15);
  clip-path: inset(0 0 100%);
}

.u-phone-menu.is-open { animation: u-menu-open 800ms cubic-bezier(.645, .045, .355, 1) both; }
.u-phone-menu.is-closing { animation: u-menu-close 400ms cubic-bezier(.645, .045, .355, 1) both; }

.u-phone-menu-head { height: 72px; display: flex; align-items: center; justify-content: space-between; }
.u-menu-close span { position: absolute; left: 11px; top: 21px; width: 22px; height: 1px; background: currentColor; }
.u-menu-close span:first-child { transform: rotate(45deg); }
.u-menu-close span:last-child { transform: rotate(-45deg); }

.u-phone-menu-links { border-top: 1px solid var(--u-rule-soft); }
.u-phone-menu-links a {
  min-height: 76px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--u-rule-soft);
  color: var(--u-text-nav);
  font-size: 17px;
  text-decoration: none;
  opacity: 0;
  transform: translateY(20px);
}

.u-phone-menu.is-open .u-phone-menu-links a,
.u-phone-menu.is-open .u-phone-menu-actions {
  animation: u-menu-row 400ms var(--u-ease-enter) both;
}
.u-phone-menu.is-open .u-phone-menu-links a:nth-child(1) { animation-delay: 320ms; }
.u-phone-menu.is-open .u-phone-menu-links a:nth-child(2) { animation-delay: 400ms; }
.u-phone-menu.is-open .u-phone-menu-links a:nth-child(3) { animation-delay: 480ms; }
.u-phone-menu.is-open .u-phone-menu-links a:nth-child(4) { animation-delay: 560ms; }
.u-phone-menu.is-open .u-phone-menu-actions { animation-delay: 640ms; }

.u-phone-menu-actions {
  position: absolute;
  bottom: 32px;
  left: var(--u-gutter);
  width: calc(100% - 2 * var(--u-gutter));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  opacity: 0;
  transform: translateY(20px);
}

.u-phone-menu-actions .u-button { width: 100%; padding-inline: 12px; font-size: 15px; }

.u-intro { text-align: center; }

.u-pictogram {
  width: var(--u-picto);
  height: var(--u-picto);
  margin-inline: auto;
  color: var(--u-ink);
}

.u-section-title,
#pricing-title,
#download-title {
  max-width: 30ch;
  margin: clamp(24px, calc(24px + 8 * (100vw - 320px) / 1120), 32px) auto 0;
  color: var(--u-text);
  font-size: var(--u-t-section);
  font-weight: 560;
  letter-spacing: -.015em;
  line-height: 1.2;
}

.u-intro-copy {
  max-width: 45ch;
  margin: 32px auto 0;
  color: var(--u-text-body);
  font-size: clamp(20px, calc(20px + 3 * (100vw - 320px) / 1120), 23px);
  line-height: 1.5;
}

.u-intro-copy-wide { max-width: 32em; }
.u-intro > .u-button { margin-top: 32px; }

.u-media,
.u-step-media,
.u-film {
  position: relative;
  overflow: hidden;
  border-radius: var(--u-media-radius);
  box-shadow: inset 0 0 0 1px rgba(20, 20, 19, .15);
  isolation: isolate;
}

.u-media::after,
.u-step-media::after,
.u-film::after {
  content: "";
  position: absolute;
  z-index: 8;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(20, 20, 19, .15);
  pointer-events: none;
}

.u-media,
.u-film-rest,
.demo-video { aspect-ratio: 16 / 9; }
.u-step-media { aspect-ratio: 4 / 3; }

.u-scene { width: 100%; height: 100%; display: grid; place-items: center; }
.u-scene[data-plate="sage"] { background: var(--u-plate-sage); }
.u-scene[data-plate="sand"] { background: var(--u-plate-sand); }
.u-scene[data-plate="mist"] { background: var(--u-plate-mist); }
.u-scene[data-plate="stone"] { background: var(--u-plate-stone); }

.u-scene-placeholder {
  position: relative;
  z-index: 0;
  max-width: 24ch;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(250, 249, 245, .72);
  color: var(--u-text-body);
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
  pointer-events: none;
}

.u-scene.is-mounted .u-scene-placeholder,
.u-scene[data-u8s-mounted="true"] .u-scene-placeholder { display: none; }

.u-js .u-reveal > *,
.u-js .u-reveal.u-case,
.u-js .u-reveal.u-control-row {
  opacity: 0;
  transform: translateY(var(--y, 10px));
  transition: opacity 750ms var(--u-ease-enter), transform 750ms var(--u-ease-enter);
  transition-delay: calc(var(--i, 0) * 100ms);
  animation: u-reveal-fallback .001ms 4s forwards;
}

.u-js .u-reveal.is-in > *,
.u-js .u-reveal.u-case.is-in,
.u-js .u-reveal.u-control-row.is-in {
  opacity: 1;
  transform: none;
}

.u-word { opacity: 1; }
.u-js .u-word { opacity: 0; }
.u-js .u-word.is-in { animation: u-word-in 1000ms var(--u-ease-enter) both; animation-delay: var(--word-delay, 0ms); }

@keyframes u-header-in { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: none; } }
@keyframes u-hero-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes u-word-in { to { opacity: 1; } }
@keyframes u-reveal-fallback { to { opacity: 1; transform: none; } }
@keyframes u-menu-open { from { clip-path: inset(0 0 100%); } to { clip-path: inset(0); } }
@keyframes u-menu-close { from { clip-path: inset(0); } to { clip-path: inset(0 0 100%); } }
@keyframes u-menu-row { to { opacity: 1; transform: translate(0); } }

@media (max-width: 699px) {
  .site-nav, .u-header-actions { display: none; }
  .u-header-phone-actions { display: flex; }
  .u-header-phone-actions .u-button-small { min-height: 44px; }
  .brand-lockup { height: 25px; }
}

@media (min-width: 700px) {
  .u-phone-menu { left: auto; width: 480px; border-left: 1px solid var(--u-rule-soft); }
}

@media (max-width: 566px) {
  header.site:not(.is-past-hero) .u-header-phone-actions > .u-button { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .u-js .u-reveal > *,
  .u-js .u-reveal.u-case,
  .u-js .u-reveal.u-control-row,
  .u-js .u-word,
  .u-word {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
/* ---- css/40-sections.css ---- */
.hero {
  padding-top: calc(var(--u-header) + clamp(78px, calc(78px + 33 * (100vw - 320px) / 1120), 111px));
  min-height: 0;
}

.u-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.u-hero-inner > * { animation: u-hero-in 750ms var(--u-ease-enter) both; }
.u-hero-inner > :nth-child(1) { animation-delay: 0ms; }
.u-hero-inner > :nth-child(2) { animation-delay: 120ms; }
.u-hero-inner > :nth-child(3) { animation-delay: 240ms; }
.u-hero-inner > :nth-child(4) { animation-delay: 360ms; }
.u-hero-inner > :nth-child(5) { animation-delay: 480ms; }

.u-product-line {
  color: var(--u-text-body);
  font-size: 17px;
  line-height: 1.6;
}

.hero h1 {
  max-width: 20ch;
  margin-top: 24px;
  color: var(--u-text);
  font-size: clamp(42px, calc(42px + 30 * (100vw - 320px) / 1120), 72px);
  font-weight: 560;
  letter-spacing: -.02em;
  line-height: 1.1;
}

.u-hero-lead {
  max-width: 60ch;
  margin-top: clamp(40px, calc(40px + 8 * (100vw - 320px) / 1120), 48px);
  color: var(--u-text-body);
  font-size: clamp(20px, calc(20px + 3 * (100vw - 320px) / 1120), 23px);
  line-height: 1.5;
}

.u-hero-inner > .u-button,
.u-hero-inner > .button { margin-top: 32px; }

.u-film-section { padding: 64px 0 var(--u-section-sm); }
.u-film { animation: u-hero-in 750ms var(--u-ease-enter) 600ms both; }
.u-film-rest { position: relative; width: 100%; }
.u-film-rest .u-scene,
.u-film-rest .u-film-rest-video { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--u-plate-sage); }
.u-film-play {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: var(--u-paper);
  box-shadow: 0 0 0 1px var(--u-rule);
  color: var(--u-ink);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: box-shadow 200ms ease-in-out, transform 500ms var(--u-ease-soft);
}
.u-film-play svg { width: 28px; height: 28px; }
.u-film-play:hover { box-shadow: 0 0 0 2px var(--u-ink); }

@media (hover: hover) and (pointer: fine) {
  .u-film-play:hover { transform: translate(-50%, -50%) scale(1.05); }
}

.demo-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--u-ink);
  visibility: hidden;
}

.u-film.is-playing { overflow: visible; }
.u-film.is-playing .u-film-rest,
.u-film.is-playing .u-film-rest * { visibility: hidden !important; }

.u-film.is-playing .demo-video { visibility: visible; }
.demo-video[data-public-complete]::cue { color: var(--u-white); background: rgba(20, 20, 19, .88); font-size: clamp(15px, 1.6vw, 24px); line-height: 1.35; }
.demo-video[data-public-complete]:fullscreen::cue,
.demo-video[data-public-complete]:-webkit-full-screen::cue { font-size: clamp(18px, 3vw, 32px); }

.u-film-meta {
  min-height: 44px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.6;
}

.public-preview-link {
  min-width: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding-block: 4px;
  color: var(--u-text-body);
  text-decoration: none;
  white-space: nowrap;
}
.public-preview-link-title { color: var(--u-ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.public-preview-link-note { color: var(--u-text-body); font-size: 12px; }

.preview-tool {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--u-text-body);
  font-size: 15px;
  text-decoration: underline;
  text-decoration-color: #b0aea5;
  text-underline-offset: 3px;
  cursor: pointer;
}
.preview-tool:hover, .preview-tool[aria-pressed="true"] { color: var(--u-ink); text-decoration-color: currentColor; }
.u-film-section:not(.is-film-playing) .preview-tool,
.u-film-section:not(.is-film-playing) .preview-status { display: none; }
.preview-status { color: var(--u-text-body); font-size: 15px; line-height: 1.6; }
.preview-status:empty { display: none; }

.u-section {
  padding-block: var(--u-section);
  border-top: 1px solid var(--u-rule-soft);
  background: var(--u-paper);
}
.u-section-white { border-color: var(--u-rule-softer); background: var(--u-white); }

.u-tabs { margin-top: var(--u-section-sm); }
.u-tabbar-wrap { position: relative; display: flex; justify-content: center; }
.u-tabbar {
  width: fit-content;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 4px;
  border-radius: 16px;
  background: var(--u-quiet);
  margin-inline: auto;
}
.u-tabbar [role="tab"] {
  min-width: 44px;
  height: 40px;
  padding: 8px 16px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--u-text-body);
  font-family: var(--u-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 100ms linear, color 100ms linear;
}
.u-tabbar [role="tab"][aria-selected="true"] { background: var(--u-white); color: var(--u-ink); }
.u-tabbar [role="tab"]:hover:not([aria-selected="true"]) { background: var(--u-paper); color: var(--u-ink); }
.u-tabpanels { margin-top: 32px; }
.u-tabpanel + .u-tabpanel { margin-top: 96px; }
.u-js .u-tabpanel[hidden] { display: none !important; }
.u-js .u-tabpanel.u-tab-enter > .u-media,
.u-js .u-tabpanel.u-tab-enter > .u-tab-copy {
  animation: u-tab-enter 650ms var(--u-ease-soft) both;
}
.u-js .u-tabpanel.u-tab-enter > .u-media { animation-delay: 200ms; }
.u-js .u-tabpanel.u-tab-enter > .u-tab-copy { animation-delay: 300ms; }
@keyframes u-tab-enter { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }

.u-tab-copy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: baseline;
  gap: 32px;
  margin-top: 32px;
}
.u-tab-copy h3 { color: var(--u-text); font-size: var(--u-t-title); font-weight: 560; letter-spacing: -.01em; line-height: 1.3; }
.u-tab-copy p { color: var(--u-text-body); font-size: 17px; line-height: 1.6; }

.u-case-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px 32px;
  margin-top: var(--u-section-sm);
}
.u-case {
  --y: 20px;
  min-width: 0;
  padding: 12px 16px 24px 32px;
  border-left: 1px solid var(--u-rule);
}
.u-case-icon { width: 32px; height: 32px; color: var(--u-text-body); }
.u-case h3 { max-width: 30ch; margin-top: 48px; color: var(--u-text); font-size: var(--u-t-title); font-weight: 560; letter-spacing: -.01em; line-height: 1.3; }
.u-case p { max-width: 40ch; margin-top: 24px; color: var(--u-text-body); font-size: 17px; line-height: 1.6; }

.u-pinned {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(55vh, auto));
  column-gap: 64px;
  margin-top: var(--u-section-sm);
}
.u-step { display: contents; }
.u-step-marker { grid-column: 1; width: 2px; height: 2px; align-self: center; pointer-events: none; }
.u-step:nth-child(1) .u-step-marker { grid-row: 1; }
.u-step:nth-child(2) .u-step-marker { grid-row: 2; }
.u-step:nth-child(3) .u-step-marker { grid-row: 3; }
.u-step:nth-child(4) .u-step-marker { grid-row: 4; }
.u-step-copy {
  grid-column: 1;
  grid-row: 1 / 5;
  align-self: start;
  position: sticky;
  top: calc(15vh + clamp(96px, calc(108px + 34 * (100vw - 1024px) / 416), 142px));
  margin-top: clamp(96px, calc(108px + 34 * (100vw - 1024px) / 416), 142px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
}
.u-step.is-active .u-step-copy { z-index: 2; opacity: 1; pointer-events: auto; }
.u-step-copy h3 { color: var(--u-text); font-size: var(--u-t-title); font-weight: 560; letter-spacing: -.01em; line-height: 1.3; }
.u-step-copy p { max-width: 60ch; margin-top: 24px; color: var(--u-text-body); font-size: 17px; line-height: 1.6; }
.u-step-media {
  grid-column: 2;
  grid-row: 1 / 5;
  position: sticky;
  top: 15vh;
  align-self: start;
  width: 100%;
  max-height: 80vh;
  opacity: 0;
  transition: opacity 400ms ease;
}
.u-step.is-active .u-step-media { z-index: 2; opacity: 1; }

.u-control-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; margin-top: var(--u-section-sm); }
.u-list-heading { color: var(--u-text); font-size: var(--u-t-title); font-weight: 560; letter-spacing: -.01em; line-height: 1.3; text-align: left; }
.u-list-rows { margin-top: 48px; }
.u-control-row {
  --y: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding-top: 32px;
  border-top: 1px solid var(--u-rule);
}
.u-control-row + .u-control-row { margin-top: 32px; }
.u-control-key { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; }
.u-check, .u-advice { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; }
.u-check { background: var(--u-ink); color: var(--u-paper); font-size: 15px; line-height: 1; }
.u-advice { position: relative; box-shadow: inset 0 0 0 1px var(--u-ink); }
.u-advice::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--u-ink); }
.u-control-key h4 { max-width: none; color: var(--u-text-nav); font-size: var(--u-t-item); font-weight: 560; letter-spacing: 0; line-height: 1.3; }
.u-control-row > p { padding-left: 36px; color: var(--u-text-body); font-size: 17px; line-height: 1.6; }
.u-control-list-second { margin-top: 0; }

.u-pricing-content { max-width: 864px; margin-top: var(--u-section-sm); }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; list-style: none; }
.plan {
  --y: 20px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 32px;
  border-radius: 16px;
  background: var(--u-white);
  box-shadow: 0 0 0 1px var(--u-rule);
}
.plan-featured { box-shadow: 0 0 0 1.5px var(--u-ink); background: var(--u-paper); }
.u-plan-name-row { min-height: 35px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plan-name { color: var(--u-text); font-size: var(--u-t-title); font-weight: 560; letter-spacing: -.01em; line-height: 1.3; }
.plan-badge { padding: 4px 12px; border-radius: 999px; background: #e6efea; color: var(--u-accent); font-size: 15px; font-weight: 500; line-height: 1.6; }
.plan-price { display: flex; align-items: baseline; gap: 8px; margin-top: 24px; }
.plan-amount { font-family: var(--u-serif); font-size: var(--u-t-section); font-weight: 560; line-height: 1.1; letter-spacing: -.02em; }
.plan-unit, .plan-billing { color: var(--u-text-body); font-size: 15px; line-height: 1.6; }
.plan-billing { min-height: 24px; margin-top: 8px; }
.plan-cta { width: 100%; margin-top: 32px; }
.plan .plan-cta:disabled {
  opacity: 1;
  background: var(--u-quiet);
  box-shadow: inset 0 0 0 1px var(--u-rule);
  color: var(--u-text-body);
  cursor: not-allowed;
}
.plan .plan-cta:disabled:hover { box-shadow: inset 0 0 0 1px var(--u-rule); }
.plan-features { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--u-rule-softer); list-style: none; }
.plan-features li { position: relative; padding-left: 24px; color: var(--u-ink); font-size: 15px; line-height: 1.6; }
.plan-features li + li { margin-top: 12px; }
.plan-features li::before { content: "✓"; position: absolute; left: 0; color: var(--u-accent); font-weight: 600; }
.pricing-contact { max-width: 720px; margin: 48px auto 0; padding: 20px 24px; border-radius: 12px; background: var(--u-quiet); color: var(--u-text-body); font-size: 16px; line-height: 1.6; text-align: center; }
.pricing-contact strong { color: var(--u-ink); font-weight: 600; }
.pricing-contact a { color: var(--u-ink); text-decoration: underline; text-decoration-color: var(--u-rule); text-underline-offset: 3px; }
.pricing-contact a:hover { text-decoration-color: currentColor; }
.pricing-note { max-width: 58ch; margin: 20px auto 0; color: var(--u-text-body); font-size: 15px; line-height: 1.6; text-align: center; }

.download-section { padding-block: var(--u-section-sm); }
.u-download-content { margin-top: var(--u-section-sm); text-align: center; }
.u-download-panel { padding: 32px; border-radius: 16px; background: var(--u-quiet); text-align: left; }
.download-credit-line { margin-top: 24px; color: var(--u-text-body); font-size: 15px; line-height: 1.6; }

.targets {
  padding-block: var(--u-section);
  padding-inline: max(var(--u-gutter), calc((100vw - 1312px) / 2));
  border-top: 1px solid var(--u-rule-softer);
  background: var(--u-white);
}
.targets-title { max-width: 20ch; margin: 0 auto 56px; color: var(--u-text); font-family: var(--u-serif); font-size: var(--u-t-section); font-weight: 560; letter-spacing: -.02em; line-height: 1.1; text-align: center; text-wrap: balance; }
.target-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 64px; gap: 8px 12px; align-items: center; margin: 0; padding: 0; list-style: none; }
.target { position: relative; min-width: 0; min-height: 64px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 16px; border-radius: 14px; color: var(--u-text); font-size: 16px; line-height: 1.25; font-weight: 520; letter-spacing: -.005em; transition: background 180ms ease; }
.target:hover { background: var(--u-paper); }
.target img { display: block; width: 28px; height: 28px; flex: none; object-fit: contain; opacity: .92; filter: brightness(0); }
.target img[data-logo-wide] { width: 64px; }
.target img[data-logo-wordmark] { width: 108px; height: 30px; }
.target img[data-logo-wordmark] + span { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.target img[data-company-logo="AMD"], .target img[data-company-logo="Uber"] { width: 48px; height: 44px; }
.target span { overflow-wrap: normal; white-space: nowrap; }
.target-more { color: var(--u-on-dark-2); }
.target-more-dots { display: block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; box-shadow: 9px 0 0 currentColor, 18px 0 0 currentColor; }

.faq-list { margin-top: var(--u-section-sm); }
.faq-item { border-top: 1px solid var(--u-rule); }
.faq-item:last-child { border-bottom: 1px solid var(--u-rule); }
.faq-item summary {
  position: relative;
  min-height: 88px;
  display: flex;
  align-items: center;
  padding: 32px 48px 32px 0;
  color: var(--u-text);
  font-family: var(--u-serif);
  font-size: var(--u-t-item);
  font-weight: 560;
  letter-spacing: 0;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
  text-wrap: balance;
  transition: color 100ms linear;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before, .faq-item summary::after { content: ""; position: absolute; top: 50%; right: 6px; width: 12px; height: 1px; background: var(--u-ink); transition: transform 250ms var(--u-ease), opacity 250ms var(--u-ease); }
.faq-item summary::after { transform: rotate(90deg); }
.faq-item[open] summary::after { opacity: 0; transform: rotate(180deg); }
.faq-body { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 400ms var(--u-ease), opacity 400ms var(--u-ease); }
.faq-body > div { min-height: 0; overflow: hidden; }
.faq-item[open]:not(.is-closing) .faq-body { grid-template-rows: 1fr; opacity: 1; }
.faq-body p { max-width: 36em; padding-bottom: 32px; color: var(--u-text-body); font-size: 17px; line-height: 1.6; }

.u-closing { padding-bottom: 32px; border-color: var(--u-rule-dark); background: var(--u-ink); color: var(--u-on-dark); }
.u-closing .u-pictogram { color: var(--u-on-dark); --u-picto-fill: var(--u-on-dark); }
.u-closing-title { max-width: 35ch; margin: clamp(28px, calc(28px + 4 * (100vw - 320px) / 1120), 32px) auto 0; color: var(--u-on-dark); font-size: clamp(36px, calc(36px + 28 * (100vw - 320px) / 1120), 64px); font-weight: 560; letter-spacing: -.02em; line-height: 1.1; }
.u-closing .u-button { margin-top: 32px; }

footer.site { padding-block: var(--u-section-sm); border-top: 1px solid var(--u-rule-dark); background: var(--u-ink); color: var(--u-on-dark); }
.u-footer-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; }
.u-footer-brand { grid-column: 1 / 5; min-height: 0; display: flex; flex-direction: column; align-items: flex-start; }
.foot-lockup { width: auto; height: 31px; }
.u-footer-brand p { max-width: 44ch; margin-top: 48px; color: var(--u-on-dark-2); font-size: 12px; line-height: 1.5; }
.foot-links { grid-column: 5 / 13; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.u-footer-group h2 { margin-bottom: 8px; color: var(--u-on-dark-2); font-family: var(--u-sans); font-size: 14px; font-weight: 400; line-height: 1.6; }
.u-footer-group a { display: block; width: fit-content; padding-block: 4px; color: var(--u-on-dark); font-size: 14px; line-height: 1.6; text-decoration: none; transition: color 200ms linear; }
.u-footer-group a.support-link { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--u-on-dark-2); }
.u-footer-group:has(a:hover) a:not(:hover) { color: var(--u-on-dark-2); }

@media (max-width: 1199px) {
  .target-list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 919px) {
  .target-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 833px) {
  .u-pinned { display: block; }
  .u-step { display: block; }
  .u-step-marker { display: none; }
  .u-step + .u-step { margin-top: 64px; }
  .u-step-media { position: relative; top: auto; width: 100%; max-height: none; opacity: 1; }
  .u-step-copy { position: static; margin-top: 32px; opacity: 1; pointer-events: auto; }
  .u-footer-grid { grid-template-columns: 1fr; }
  .u-footer-brand, .foot-links { grid-column: 1; }
  .u-footer-brand { min-height: 0; }
  .u-footer-brand p { order: 2; margin-top: 32px; }
  .foot-links { order: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1023px) and (min-width: 600px) {
  .target-list { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-auto-rows: 56px !important; }
  .u-case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .u-case { padding-left: 24px; }
}

@media (max-width: 1023px) {
  .u-control-lists { grid-template-columns: 1fr; gap: var(--u-section-sm); }
}

@media (max-width: 599px) {
  .u-case-grid { grid-template-columns: 1fr; gap: 0; }
  .u-case { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px 16px; padding: 32px 0; border-top: 1px solid var(--u-rule); border-left: 0; }
  .u-case-icon { grid-column: 1; grid-row: 1; }
  .u-case h3 { grid-column: 2; grid-row: 1; align-self: center; margin-top: 0; }
  .u-case p { grid-column: 2; grid-row: 2; margin-top: 0; }
  .plans { grid-template-columns: 1fr; }
}

@media (max-width: 599px) {
  .target-list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 52px; gap: 4px 8px; }
  .target { min-height: 52px; padding: 0 8px; gap: 10px; font-size: 14px; border-radius: 10px; }
  .target img { width: 22px; height: 22px; }
  .target img[data-logo-wordmark] { width: 72px; height: 22px; }
  .target img[data-company-logo="AMD"], .target img[data-company-logo="Uber"] { width: 36px; height: 34px; }
}

@media (max-width: 566px) {
  .hero { padding-top: calc(var(--u-header) + 8px); }
  .u-film-section { padding-top: 24px; }
  .u-film-play { width: 44px; height: 44px; }
  .u-film-play svg { width: 18px; height: 18px; }
  .u-film-meta { flex-wrap: wrap; gap: 0 16px; }
  .public-preview-link { flex-wrap: wrap; white-space: normal; column-gap: 8px; }
  .public-preview-link-note { flex-basis: 100%; font-size: 13px; }
  .u-tabbar-wrap { display: block; overflow: hidden; border-radius: 16px; -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), transparent 100%); mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), transparent 100%); }
  .u-tabbar { width: 100%; height: 52px; justify-content: flex-start; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; scrollbar-width: none; }
  .u-tabbar::-webkit-scrollbar { display: none; }
  .u-tabbar [role="tab"] { height: 44px; flex: 0 0 auto; padding-inline: 16px; scroll-snap-align: nearest; }
  .u-tab-copy { grid-template-columns: 1fr; align-items: start; gap: 24px; }
  .u-list-rows { margin-top: 48px; }
  .u-control-row + .u-control-row { margin-top: 48px; }
  .u-download-panel, .plan { padding: 24px; }
  .pricing-contact, .pricing-note { text-align: left; }
  .faq-item summary { height: 88px; min-height: 88px; padding: 0 40px 0 0; text-wrap: pretty; }
  .u-film.is-playing { overflow: visible; }
  .foot-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
  .u-footer-group:last-child { grid-column: 1 / -1; }
  .u-footer-brand p { font-size: 13px; }
  .u-footer-group a { min-height: 44px; display: flex; align-items: center; padding-block: 10px; font-size: 15px; }
}

@media (max-width: 349px) {
  .target { gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .u-hero-inner > *, .u-film { animation: none; }
  .u-step-media, .u-step-copy { transition: none; }
  .u-step .u-step-media, .u-step .u-step-copy { opacity: 1; }
  .u-js .u-tabpanel.u-tab-enter > .u-media,
  .u-js .u-tabpanel.u-tab-enter > .u-tab-copy { animation: none; }
}

/* Feature films (W7): a short film in a tab panel or a step, in the scene frame with the scene controls. */
.u-feature { position: relative; width: 100%; height: 100%; }
.u-feature-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.u-feature-mounted .u-feature-video { cursor: zoom-in; }
.u-feature-video::cue { background: rgba(20, 20, 19, .78); color: #faf9f5; font-family: "Inter", system-ui, sans-serif; line-height: 1.4; }
.u-feature.is-narrow .u-feature-video::cue { font-size: 13px; }
.u-step-media.u-step-media-wide { aspect-ratio: 16 / 9; }
.u-feature-mounted { cursor: zoom-in; }
.u-feature-mounted .u-feature-video:focus-visible { outline: 3px solid var(--s-accent, #246b5e); outline-offset: -3px; }
/* Hover only signals that the film is clickable; its dimensions never change until the lightbox opens. */
.u-media:has(> .u-feature)::after, .u-step-media:has(> .u-feature)::after { display: none; }

/* Feature film lightbox: the film's own <video> moved into a centred 16:9 box over a dark backdrop. */
.u-lightbox {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  padding: 16px; background: rgba(20, 20, 19, 0);
  transition: background-color 250ms ease;
}
.u-lightbox.is-open { background: rgba(20, 20, 19, .86); }
.u-lightbox[hidden] { display: none; }
.u-lightbox-box {
  width: min(1200px, 90vw, calc((100vh - 96px) * 16 / 9)); aspect-ratio: 16 / 9;
  border-radius: 12px; overflow: hidden; background: #141413; box-shadow: 0 24px 80px rgba(0, 0, 0, .45);
  transform-origin: top left; transition: transform 250ms ease;
}
.u-lightbox-box .u-feature-video { width: 100%; height: 100%; object-fit: contain; cursor: auto; }
.u-lightbox-close {
  position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; padding: 0;
  border: 1px solid rgba(250, 249, 245, .35); border-radius: 50%; background: rgba(20, 20, 19, .6); color: #faf9f5;
  font: 400 28px/1 "Inter", system-ui, sans-serif; display: grid; place-items: center; cursor: pointer;
}
.u-lightbox-close:hover { background: rgba(20, 20, 19, .9); }
.u-lightbox-close:focus-visible { outline: 2px solid #faf9f5; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .u-lightbox, .u-lightbox-box { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  /* a film never starts by itself here, so its controls stay: the poster, then play on click */
  .u-feature .u8s-control { display: grid; }
  .u-feature .u8s-progress, .u-feature .u8s-scrub { display: block; }
}

/* teams plan (2026-10-08, merged from copy-v1c) */
.plans{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.plan-price{flex-wrap:nowrap}.plan-unit{white-space:nowrap}.plan-amount{font-size:clamp(34px,3vw,46px)}@media (max-width:959px){.plans{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}
/* ---- css/50-legacy-hooks.css ---- */
.inline-unlock-panel {
  position: absolute;
  z-index: 12;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(20, 20, 19, .64);
}

.preview-gate-card {
  width: min(100%, 440px);
  padding: 32px;
  border-radius: 16px;
  background: var(--u-paper);
  box-shadow: inset 0 0 0 1px var(--u-rule-soft);
}

.preview-gate-icon { margin-bottom: 16px; color: var(--u-accent); }
.demo-eyebrow { margin-bottom: 8px; color: var(--u-text-body); font-size: 15px; line-height: 1.6; }
.preview-gate-card h3 { color: var(--u-text); font-size: var(--u-t-title); font-weight: 560; letter-spacing: -.01em; line-height: 1.3; }
#preview-gate-copy { margin-top: 12px; color: var(--u-text-body); font-size: 15px; line-height: 1.6; }
.inline-unlock-form { margin-top: 24px; }
.inline-unlock-form label, #download label { display: block; margin-bottom: 8px; color: var(--u-text-nav); font-size: 15px; line-height: 1.6; }
.inline-unlock-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.inline-unlock-controls input,
#download input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--u-rule);
  border-radius: 12px;
  background: var(--u-white);
  color: var(--u-ink);
  font-size: 16px;
}
.inline-unlock-controls input[aria-invalid="true"], #download input[aria-invalid="true"] { border-color: var(--u-error); }
.inline-unlock-controls button { min-height: 44px; padding-inline: 16px; font-size: 15px; }
.inline-unlock-confirm { margin-top: 16px; color: var(--u-text-body); font-size: 15px; line-height: 1.6; }
.preview-replay {
  min-height: 44px;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--u-text-body);
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.preview-replay:hover { color: var(--u-ink); }

.err, .status, #catalog-status, .fallback-link {
  margin-top: 12px;
  color: var(--u-text-body);
  font-size: 15px;
  line-height: 1.6;
}
.err { color: var(--u-error); }
.err:empty, .status:empty, .preview-status:empty { display: none; }
.meta-line { margin-bottom: 16px; color: var(--u-text-body); font-size: 15px; line-height: 1.6; }
.download-controls { display: block; margin-bottom: 12px; }
#retry-releases {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--u-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

#download .builds { margin-top: 0; }
#builds-list { display: block; }
#download .version-card { min-width: 0; }
#download .version-card.is-latest { display: flex; flex-direction: column; }
#download .is-latest .build-download { order: 0; width: 100%; min-height: 44px; }
#download .is-latest .version-copy { order: 1; display: flex; justify-content: center; align-items: baseline; gap: 8px; margin-top: 8px; }
#download .version-kind,
#download .version-card h3 { margin: 0; color: var(--u-text-body); font-family: var(--u-sans); font-size: 15px; font-weight: 400; line-height: 1.6; letter-spacing: .01em; }
#download .previous-versions { margin-top: 8px; border-top: 1px solid var(--u-rule-softer); }
#download .previous-versions summary { width: fit-content; min-height: 44px; display: flex; align-items: center; margin-inline: auto; color: var(--u-text-body); font-size: 15px; cursor: pointer; }
#download .version-card.is-previous { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding-top: 12px; }
#download .is-previous .build-download { min-height: 36px; padding: 8px 16px; font-size: 15px; }
#download .build-download:disabled, .inline-unlock-controls button:disabled { opacity: .48; cursor: default; }

@media (max-width: 780px) {
  .u-film.is-playing .demo-video { height: auto; aspect-ratio: 16 / 9; }
  .inline-unlock-panel {
    position: relative;
    padding: 24px;
    border-top: 1px solid var(--u-rule);
    background: var(--u-quiet);
  }
  .preview-gate-card { width: 100%; padding: 0; border-radius: 0; background: transparent; box-shadow: none; }
}

@media (max-width: 390px) {
  .inline-unlock-controls { grid-template-columns: 1fr; }
  #download .version-card.is-previous { grid-template-columns: 1fr; }
  #download .is-previous .build-download { width: 100%; min-height: 44px; }
}

@media (max-width: 566px) {
  #download .is-latest .version-copy { margin-top: 16px; }
  #download .previous-versions { margin-top: 8px; }
}
#inline-unlock-panel, .inline-unlock-panel { display: none !important; }
/* ---- css/60-scenes.css ---- */
/* Product scenes. Everything that can affect page content stays below .u8s. */
.u8s {
  --s-paper: #faf9f5;
  --s-white: #fff;
  --s-quiet: #f5f4ed;
  --s-rule: #e8e6dc;
  --s-rule-strong: #d1cfc5;
  --s-ink: #141413;
  --s-secondary: #30302e;
  --s-tertiary: #5e5d59;
  --s-accent: #246b5e;
  --s-accent-fill: #e6efea;
  --s-reading: #436b8b;
  --s-reading-fill: #eaf0f5;
  --s-stale: #8b631e;
  --s-stale-fill: #f8f0de;
  --s-error: #aa443e;
  --s-error-fill: #faece9;
  color: var(--s-ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-feature-settings: "pnum", "lnum", "liga";
  -webkit-font-smoothing: antialiased;
}

.u8s *, .u8s *::before, .u8s *::after { box-sizing: border-box; }
.u8s-frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--u-plate-sage, #c8dbd4);
  border-radius: var(--u-media-radius, 24px);
  box-shadow: inset 0 0 0 1px rgba(20,20,19,.15);
  isolation: isolate;
}
.u8s-frame.u8s-4x3 { aspect-ratio: 4 / 3; }
.u8s-frame:focus-visible { outline: 3px solid var(--s-accent); outline-offset: -4px; }
.u-scene.is-mounted > .u-scene-placeholder { display: none; }
.u8s-frame[data-plate="sage"] { background: #c8dbd4; }
.u8s-frame[data-plate="sand"] { background: #e9e0cd; }
.u8s-frame[data-plate="mist"] { background: #d2dce7; }
.u8s-frame[data-plate="stone"] { background: #e3e1d8; }
.u8s-stage, .u8s-plate, .u8s-world, .u8s-loop-fade { position: absolute; inset: 0; }
.u8s-stage { overflow: hidden; background: inherit; }
.u8s-plate { background: inherit; }
.u8s-plate svg { width: 100%; height: 100%; fill: none; stroke: var(--s-paper); stroke-width: 20; opacity: .1; }
.u8s-world {
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  transform-origin: center;
}
.u8s-frame:not(.u8s-4x3) .u8s-world { width: 1600px; height: 900px; }
.u8s-frame.u8s-4x3 .u8s-world { width: 1200px; height: 900px; }
.u8s-frame { container-type: inline-size; }
.u8s-shot { position: absolute; inset: 0; visibility: hidden; }
.u8s-shot-content {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(calc(-50% + var(--u8s-shot-x, 0px)), calc(-50% + var(--u8s-shot-y, 0px))) scale(var(--u8s-shot-scale, 1));
  transform-origin: center;
}
.u8s-align-left .u8s-shot-content { left: 120px; transform-origin: left center; transform: translate(var(--u8s-shot-x, 0px), calc(-50% + var(--u8s-shot-y, 0px))) scale(var(--u8s-shot-scale, 1)); }
.u8s-align-right .u8s-shot-content { left: auto; right: 120px; transform-origin: right center; transform: translate(var(--u8s-shot-x, 0px), calc(-50% + var(--u8s-shot-y, 0px))) scale(var(--u8s-shot-scale, 1)); }
.u8s-align-top .u8s-shot-content { top: 70px; transform-origin: center top; transform: translate(calc(-50% + var(--u8s-shot-x, 0px)), var(--u8s-shot-y, 0px)) scale(var(--u8s-shot-scale, 1)); }
.u8s-loop-fade { z-index: 20; pointer-events: none; opacity: 0; }
.u8s-frame[data-plate="sage"] .u8s-loop-fade { background: #c8dbd4; }
.u8s-frame[data-plate="sand"] .u8s-loop-fade { background: #e9e0cd; }
.u8s-frame[data-plate="mist"] .u8s-loop-fade { background: #d2dce7; }
.u8s-frame[data-plate="stone"] .u8s-loop-fade { background: #e3e1d8; }
.u8s-control {
  position: absolute; z-index: 31; left: 12px; bottom: 12px;
  width: 40px; height: 40px; padding: 0; border: 1px solid rgba(20,20,19,.35); border-radius: 50%;
  background: var(--s-paper); color: var(--s-ink);
  display: grid; place-items: center; cursor: pointer;
}
.u8s-control span::before { content: ""; display: block; width: 0; height: 0; margin-left: 2px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid currentColor; }
.u8s-frame.is-playing .u8s-control span::before { width: 8px; height: 10px; margin: 0; border: 0; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.u8s-control:focus-visible { outline: 2px solid var(--s-accent); outline-offset: 2px; }
.u8s-progress {
  position: absolute; z-index: 30; left: 0; bottom: 0;
  width: 100%; height: 3px; background: rgba(20,20,19,.45);
  pointer-events: none; transform: scaleX(0); transform-origin: left center;
  transition: height 120ms ease;
}
.u8s-frame:hover .u8s-progress, .u8s-frame.is-scrubbing .u8s-progress, .u8s-scrub:focus-visible ~ .u8s-progress { height: 5px; }
.u8s-scrub {
  position: absolute; z-index: 32; left: 0; right: 0; bottom: 0; height: 22px;
  cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent;
}
.u8s-scrub::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(20,20,19,.12); transition: height 120ms ease; }
.u8s-frame:hover .u8s-scrub::before, .u8s-frame.is-scrubbing .u8s-scrub::before { height: 5px; }
.u8s-scrub-thumb {
  position: absolute; bottom: -4px; width: 13px; height: 13px; margin-left: -6px; border-radius: 50%;
  background: var(--s-paper); box-shadow: 0 0 0 1.5px rgba(20,20,19,.5), 0 1px 3px rgba(0,0,0,.2);
  opacity: 0; transform: scale(.6); transition: opacity 120ms ease, transform 120ms ease;
}
.u8s-frame:hover .u8s-scrub-thumb, .u8s-frame.is-scrubbing .u8s-scrub-thumb, .u8s-scrub:focus-visible .u8s-scrub-thumb { opacity: 1; transform: none; }
.u8s-scrub:focus-visible { outline: none; }
.u8s-scrub:focus-visible .u8s-scrub-thumb { box-shadow: 0 0 0 2px var(--s-accent); }

.u8s .u8s-row { display: flex; align-items: center; min-width: 0; }
.u8s .u8s-stack { display: flex; flex-direction: column; min-width: 0; }
.u8s .u8s-flex { flex: 1; }
.u8s .u8s-heading { margin: 0; font: 600 13px/20px "Inter", system-ui, sans-serif; color: var(--s-secondary); }
.u8s .u8s-meta { font: 400 12px/16px "Inter", system-ui, sans-serif; color: var(--s-tertiary); }
.u8s .u8s-secondary { color: var(--s-secondary); }
.u8s .u8s-prose { margin: 0; font: 400 15px/24px "Inter", system-ui, sans-serif; color: var(--s-secondary); }
.u8s .u8s-rule { height: 1px; background: var(--s-rule); }
.u8s .u8s-card {
  background: var(--s-white); border: 1px solid var(--s-rule); border-radius: 12px;
  box-shadow: 0 2px 8px #0000000a; font: 400 13px/20px "Inter", system-ui, sans-serif;
}
.u8s .u8s-card-head { min-height: 36px; gap: 14px; padding: 8px 12px; }
.u8s .u8s-card-head > :first-child { margin-right: auto; }
.u8s .u8s-button {
  border: 0; border-radius: 8px; min-height: 28px; padding: 4px 8px;
  background: var(--s-white); color: var(--s-secondary); box-shadow: 0 0 0 1px var(--s-rule-strong);
  font: 480 13px/20px "Inter", system-ui, sans-serif; white-space: nowrap;
}
.u8s .u8s-button.is-text, .u8s .u8s-button.is-icon { padding-inline: 4px; background: transparent; box-shadow: none; }
.u8s .u8s-button.is-icon { min-width: 28px; }
.u8s .u8s-button.is-primary { background: var(--s-accent); color: #fff; box-shadow: none; }
.u8s .u8s-button.is-pressed { transform: translateY(1px) scale(.97); background: var(--s-quiet); }
.u8s .u8s-button-icon { margin-right: 5px; color: var(--s-tertiary); }
.u8s .u8s-keycap { margin-left: 7px; border: 0; border-radius: 3px; background: var(--s-quiet); color: var(--s-tertiary); padding: 1px 5px; font: 400 12px/16px "Inter", system-ui, sans-serif; }
.u8s [data-actor] { outline: calc(2px * var(--u8s-ring, 0)) solid rgba(36,107,94,var(--u8s-ring, 0)); outline-offset: calc(5px * var(--u8s-ring, 0)); }
.u8s .u8s-chip { display: inline-flex; align-items: center; gap: 6px; width: max-content; min-height: 18px; border-radius: 0; padding: 0; font: 400 12px/16px "Inter", system-ui, sans-serif; color: var(--s-tertiary); background: transparent; }
.u8s .u8s-chip::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; opacity: .75; }
.u8s .u8s-chip.is-live { color: var(--s-secondary); }
.u8s .u8s-chip.is-live::before { background: var(--s-accent); opacity: 1; }
.u8s .u8s-chip.is-reading { color: var(--s-tertiary); }
.u8s .u8s-chip.is-reading::before { background: #b0aea5; opacity: 1; }
.u8s .u8s-chip.is-stale { color: var(--s-stale); }
.u8s .u8s-chip.is-error { color: var(--s-error); }
.u8s .has-caret::after { content: ""; display: inline-block; height: 1em; margin-left: 2px; border-left: 1px solid currentColor; vertical-align: -.12em; animation: u8s-caret 1s step-end infinite; }
@keyframes u8s-caret { 50% { opacity: 0; } }
.u8s .u8s-stream-word { opacity: 1; }
.u8s .u8s-code { margin: 0; padding: 10px 12px; overflow: hidden; white-space: pre-wrap; border: 1px solid var(--s-rule); border-radius: 8px; background: var(--s-paper); color: var(--s-secondary); font: 400 13px/20px ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.u8s .u8s-code-line { display: block; min-height: 20px; white-space: pre; }
.u8s .u8s-tick-line { gap: 8px; color: var(--s-secondary); }
.u8s .u8s-tick { color: var(--s-tertiary); font-weight: 400; }

.u8s .u8s-problems { width: 310px; padding-bottom: 6px; }
.u8s .u8s-problem-list { gap: 2px; padding: 0 8px; }
.u8s .u8s-problem-row { position: relative; gap: 8px; min-height: 28px; padding: 4px 7px; border-radius: 6px; color: var(--s-secondary); }
.u8s .u8s-problem-row.is-active { background: #f0eee6; }
.u8s .u8s-state-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--s-rule-strong); }
.u8s .u8s-state-dot.is-reading, .u8s .u8s-state-dot.is-answer-ready, .u8s .u8s-state-dot.is-coding { background: #5d9d90; }
.u8s .u8s-problem-name { flex: 1; }
.u8s .u8s-problem-state { color: var(--s-tertiary); }
.u8s .u8s-next-row { border-top: 1px solid var(--s-rule); border-radius: 0; }
.u8s .u8s-next-row .u8s-keycap { margin-left: auto; }
.u8s .u8s-next-indent { width: 15px; }

.u8s .u8s-shared-page { width: 620px; height: 340px; overflow: hidden; border: 1px solid #d7dbe0; border-radius: 8px; background: #fff; box-shadow: 0 8px 24px #00000012; font: 400 13px/20px system-ui, -apple-system, "Segoe UI", sans-serif; }
.u8s .u8s-page-bar { height: 32px; gap: 6px; padding: 0 12px; background: #eef1f5; border-bottom: 1px solid #d7dbe0; }
.u8s .u8s-page-bar i { width: 8px; height: 8px; border-radius: 50%; background: #b9bec5; }
.u8s .u8s-page-tab { margin-left: 8px; color: #4e555d; font-weight: 600; }
.u8s .u8s-page-address { margin-left: auto; padding: 2px 10px; min-width: 230px; border-radius: 5px; background: #fff; color: #6d737a; }
.u8s .u8s-page-body { position: relative; align-items: stretch; height: 308px; }
.u8s .u8s-page-copy { width: 46%; padding: 18px; overflow: hidden; border-right: 1px solid #e2e5e8; }
.u8s .u8s-page-copy-content { gap: 12px; }
.u8s .u8s-page-below-fold { margin-top: 92px !important; }
.u8s .u8s-page-editor { width: 54%; padding: 14px 16px; gap: 10px; overflow: hidden; background: #1f2328; color: #d7dbe0; }
.u8s .u8s-page-copy p { margin: 0; }
.u8s .u8s-page-label { color: #6d737a; font-weight: 600; }
.u8s .u8s-page-editor .u8s-code { color: #d7dbe0; background: transparent; border: 0; padding: 0; }
.u8s .u8s-page-editor-head { justify-content: space-between; }
.u8s .u8s-page-editor .u8s-meta { color: #9ba2aa; }
.u8s .u8s-button.is-page-run { min-height: 24px; background: #30363d; color: #f0f3f6; box-shadow: 0 0 0 1px #444c56; }
.u8s .u8s-page-console { margin-top: auto; padding-top: 8px; border-top: 1px solid #444c56; color: #7ee787; }
.u8s .u8s-page-scrollbar { position: absolute; left: calc(46% - 7px); top: 48px; width: 4px; height: 62px; border-radius: 4px; background: #9ba2aa; transform: translateY(calc(var(--u8s-fill, 0) * 150px)); }
.u8s .u8s-shared-page.is-alt .u8s-page-copy { width: 42%; }
.u8s .u8s-shared-page.is-alt .u8s-page-editor { width: 58%; }

.u8s .u8s-screen { width: 310px; padding-bottom: 10px; }
.u8s .u8s-screen-thumb { width: 286px; height: 136px; margin: 0 11px; overflow: hidden; background: var(--s-paper); border-radius: 6px; }
.u8s .u8s-screen-thumb .u8s-shared-page { transform: scale(.42); transform-origin: top left; width: 680px; height: 324px; box-shadow: none; border-radius: 0; }

.u8s .u8s-problem-card { width: 430px; max-height: 650px; overflow: hidden; gap: 12px; padding-bottom: 0; border-radius: 8px; }
.u8s .u8s-problem-card > :not(.u8s-card-head):not(.u8s-problem-actions) { margin-inline: 14px; }
.u8s .u8s-problem-title { font: 600 20px/26px "Inter", system-ui, sans-serif; color: var(--s-secondary); }
.u8s .u8s-problem-card > .u8s-prose { font: 400 13px/20px "Inter", system-ui, sans-serif; color: var(--s-ink); }
.u8s .u8s-problem-status { gap: 3px; margin-inline: 14px !important; padding: 8px 12px; border-radius: 8px; background: rgba(36,107,94,.07); }
.u8s .u8s-problem-status.is-done { padding: 0; background: transparent; }
.u8s .u8s-constraints, .u8s .u8s-example, .u8s .u8s-on-screen { gap: 5px; color: var(--s-secondary); }
.u8s .u8s-constraints > span { position: relative; padding-left: 16px; }
.u8s .u8s-constraints > span::before { content: ""; position: absolute; left: 2px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: #b0aea5; }
.u8s .u8s-added { gap: 4px; margin-inline: 0 !important; padding: 12px 14px; border-left: 2px solid var(--s-stale); background: #f6f1e8; color: var(--s-secondary); }
.u8s .u8s-added strong { color: var(--s-stale); }
.u8s .u8s-problem-actions { min-height: 46px; margin-top: 2px; padding: 8px 10px; border-top: 1px solid var(--s-rule); gap: 8px; }
.u8s .u8s-previous { gap: 2px; padding: 10px; border-radius: 8px; background: var(--s-quiet); }

.u8s .u8s-conversation { width: 650px; gap: 14px; padding: 0 22px 22px; background: var(--s-paper); font: 400 13px/20px "Inter", system-ui, sans-serif; }
.u8s .u8s-conversation-head { min-height: 44px; margin: 0 -22px; padding: 0 22px; border-bottom: 1px solid var(--s-rule); justify-content: space-between; }
.u8s .u8s-tabs { gap: 18px; }
.u8s .u8s-answer-status { color: var(--s-tertiary); }
.u8s .u8s-answer-lead { font: 500 17px/26px "Inter", system-ui, sans-serif; color: var(--s-secondary); }
.u8s .u8s-watch { gap: 5px; padding-bottom: 12px; border-bottom: 1px solid var(--s-rule); color: var(--s-secondary); }
.u8s .u8s-reasoning { gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--s-rule); color: var(--s-secondary); }
.u8s .u8s-reasoning-copy { display: none; white-space: pre-line; }
.u8s .u8s-reasoning.is-open .u8s-reasoning-copy { display: block; }
.u8s .u8s-question-row { gap: 10px; min-height: 36px; padding: 7px 9px; border-radius: 8px; background: var(--s-white); border: 1px solid var(--s-rule); color: var(--s-secondary); }
.u8s .u8s-question-number { color: var(--s-tertiary); }
.u8s .u8s-question-copy { font: 500 16.5px/24px "Inter", system-ui, sans-serif; }
.u8s .u8s-quote { gap: 3px; padding-left: 10px; border-left: 2px solid var(--s-rule); color: var(--s-tertiary); }
.u8s .u8s-reply { width: 520px; gap: 8px; padding: 8px 10px 9px; border: 0; border-left: 2px solid var(--s-accent); border-radius: 0; background: #ebefea; box-shadow: none; font: 400 13px/20px "Inter", system-ui, sans-serif; }
.u8s .u8s-reply-head { justify-content: space-between; color: var(--s-secondary); }
.u8s .u8s-reply-text { min-height: 48px; font: 400 15px/24px "Inter", system-ui, sans-serif; color: var(--s-ink); }
.u8s .u8s-pass { color: var(--s-ink); }
.u8s .u8s-next-step { width: 560px; gap: 8px; padding-bottom: 12px; }
.u8s .u8s-next-body { padding: 0 12px; font: 400 15px/24px "Inter", system-ui, sans-serif; color: var(--s-ink); }
.u8s .u8s-button-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }

.u8s .u8s-activity { width: 360px; padding-bottom: 12px; border-radius: 8px; box-shadow: none; }
.u8s .u8s-activity > .u8s-tick-line { padding: 3px 14px; }
.u8s .u8s-activity-chevron { margin-left: auto; color: #b0aea5; }
.u8s .u8s-lane { width: 360px; min-height: 0; gap: 10px; padding: 12px; border-radius: 8px; box-shadow: none; }
.u8s .u8s-lane-head { gap: 8px; }
.u8s .u8s-lane-head .u8s-chip { margin-left: auto; }
.u8s .u8s-avatar { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #e2e0d8; color: var(--s-tertiary); font-size: 12px; }
.u8s .u8s-lane-words { min-height: 20px; padding-left: 0; font: 400 13px/20px "Inter", system-ui, sans-serif; color: var(--s-secondary); }
.u8s .u8s-mark-note { gap: 5px; padding-left: 28px; color: var(--s-error); }
.u8s .u8s-red-mark { text-decoration: underline wavy var(--s-error); }
.u8s .u8s-possibly { font-size: 12px; }

.u8s .u8s-dock { width: 1414px; min-height: 50px; gap: 18px; padding: 8px 16px; border: 1px solid var(--s-rule); border-radius: 12px; background: var(--s-white); box-shadow: 0 2px 8px #0000000a; font: 400 13px/20px "Inter", system-ui, sans-serif; }
.u8s .u8s-dock-mode { gap: 6px; margin-right: auto; }
.u8s .u8s-effort { gap: 8px; margin-left: auto; }
.u8s .u8s-effort-dots { letter-spacing: 3px; color: var(--s-tertiary); }

.u8s .u8s-topbar { height: 44px; padding: 0 16px; gap: 14px; border-bottom: 1px solid var(--s-rule); background: var(--s-paper); font: 400 13px/20px "Inter", system-ui, sans-serif; }
.u8s .u8s-logo { gap: 0; font-size: 15px; }
.u8s .u8s-logo-mark { color: var(--s-accent); font-weight: 650; }
.u8s .u8s-top-title { color: var(--s-secondary); }
.u8s .u8s-capture { min-height: 28px; padding: 4px 9px; border: 1px solid var(--s-rule); border-radius: 8px; background: #fff; color: var(--s-secondary); font-size: 12px; }
.u8s .u8s-window { position: relative; width: 1440px; height: 900px; overflow: hidden; border: 1px solid rgba(20,48,40,.12); border-radius: 14px; background: var(--s-paper); box-shadow: 0 24px 48px -12px rgba(20,48,40,.18), 0 1px 3px rgba(20,48,40,.10); }
.u8s .u8s-window-main { height: 741px; align-items: stretch; }
.u8s .u8s-window-left { width: 336px; flex: none; gap: 10px; padding: 12px; border-right: 1px solid var(--s-rule); background: var(--s-quiet); overflow: hidden; }
.u8s .u8s-window-left .u8s-card { width: 310px; box-shadow: none; }
.u8s .u8s-window-left .u8s-problem-card { flex: 1; }
.u8s .u8s-window-main > .u8s-conversation { flex: 1; width: auto; border-right: 1px solid var(--s-rule); overflow: hidden; }
.u8s .u8s-window-right { width: 384px; flex: none; gap: 12px; padding: 12px; background: var(--s-quiet); overflow: hidden; }
.u8s .u8s-window-right > .u8s-heading { padding: 5px 12px; border-top: 1px solid var(--s-rule); }
.u8s .u8s-window .u8s-dock { margin: 39px 12px 0; }
.u8s .u8s-window-overlay {
  position: absolute; z-index: 8; left: 336px; right: 384px; top: 44px; bottom: 115px;
  display: grid; place-items: center; overflow: hidden; background: rgba(250,249,245,.96);
  border-inline: 1px solid var(--s-rule);
}
.u8s .u8s-window-overlay .u8s-sheet { width: 650px; box-shadow: none; }

.u8s .u8s-sheet { width: 760px; max-height: 760px; overflow: hidden; gap: 16px; padding: 18px 24px; border: 1px solid var(--s-rule); border-radius: 12px; background: var(--s-white); box-shadow: 0 4px 20px #0000000a; font: 400 13px/20px "Inter", system-ui, sans-serif; color: var(--s-secondary); }
.u8s .u8s-sheet-head { justify-content: space-between; }
.u8s .u8s-sheet-head .u8s-heading { font-size: 20px; line-height: 26px; }
.u8s .u8s-sheet p { margin: 0; }
.u8s .u8s-sheet > .u8s-stack { gap: 16px; }
.u8s .u8s-scores { gap: 10px; }
.u8s .u8s-score { flex: 1; align-items: center; padding: 12px; border: 1px solid var(--s-rule); border-radius: 8px; }
.u8s .u8s-score strong { font-size: 20px; line-height: 26px; }
.u8s .u8s-score-quote { margin-top: 5px; color: var(--s-secondary); font-size: 11px; line-height: 15px; text-align: center; }
.u8s .u8s-review-block { gap: 6px; padding-top: 12px; border-top: 1px solid var(--s-rule); }
.u8s .u8s-review-columns { align-items: flex-start; gap: 24px; }
.u8s .u8s-review-columns > .u8s-stack { width: 50%; gap: 8px; }

.u8s .u8s-cursor { position: absolute; left: 0; top: 0; z-index: 12; width: 20px; height: 24px; transform-origin: 3px 3px; filter: drop-shadow(0 2px 2px #0004); pointer-events: none; }
.u8s .u8s-cursor svg { width: 100%; height: 100%; fill: #fff; stroke: #141413; stroke-width: 1.5; }
.u8s .u8s-cursor-stage { position: relative; width: max-content; }
.u8s .u8s-scene-pair { gap: 28px; align-items: center; }
.u8s .u8s-fragment { min-height: 150px; padding-bottom: 20px; }
.u8s .u8s-hero-problem { width: 520px; gap: 13px; padding: 0 18px 18px; }
.u8s .u8s-hero-problem .u8s-card-head { margin-inline: -18px; }
.u8s .u8s-action-card { width: 390px; gap: 10px; padding: 14px 12px 0; }
.u8s .u8s-action-fragment { margin-inline: -12px; }
.u8s .u8s-status-card { width: 300px; gap: 12px; padding: 18px; }
.u8s .u8s-answer-fragment { width: 620px; gap: 14px; padding: 18px; border: 1px solid var(--s-rule); border-radius: 12px; background: var(--s-white); }
.u8s .u8s-ready-card { width: 560px; gap: 10px; padding: 18px; }
.u8s .u8s-stream-code { display: block; white-space: pre-wrap; }
.u8s .u8s-stream-code .u8s-stream-word { white-space: pre-wrap; }
.u8s .u8s-answer-ready-wrap { gap: 8px; }
.u8s .u8s-answer-ready-dock { justify-content: flex-end; padding: 8px 12px; border: 1px solid var(--s-rule); border-radius: 10px; background: var(--s-white); }
.u8s .u8s-ready-head { justify-content: space-between; }
.u8s .u8s-code-check { width: 650px; gap: 10px; }
.u8s .u8s-screen-code { width: 460px; gap: 10px; padding: 18px; }
.u8s .u8s-coding-next { width: 680px; gap: 22px; align-items: flex-end; }
.u8s .u8s-dock-focus { width: 680px; }
.u8s .u8s-coding-next > .u8s-reply { align-self: flex-end; }
.u8s .u8s-read-fragment { width: 380px; justify-content: space-between; gap: 24px; padding: 16px; }
.u8s .u8s-next-side { gap: 14px; }
.u8s .u8s-next-earlier { position: relative; width: 760px; height: 540px; }
.u8s .u8s-next-layer { position: absolute; inset: 0; display: grid; place-items: center; }
.u8s .u8s-status-check { width: 560px; gap: 10px; padding: 14px; }
.u8s .u8s-status-right { gap: 18px; }
.u8s .u8s-status-workspace { width: 1046px; gap: 18px; padding-bottom: 16px; border: 1px solid var(--s-rule); border-radius: 12px; overflow: hidden; background: var(--s-paper); box-shadow: 0 8px 30px #00000012; }
.u8s .u8s-status-workspace > .u8s-scene-pair { padding: 0 14px; }
.u8s .u8s-status-workspace > .u8s-dock { width: 1016px; margin-inline: 14px; }
.u8s .u8s-status-narrow { width: 560px; gap: 10px; }
.u8s .u8s-status-narrow-head { align-items: stretch; gap: 10px; }
.u8s .u8s-status-narrow-card { width: 230px; gap: 7px; padding: 12px; }
.u8s .u8s-status-narrow .u8s-lane { width: 320px; }
.u8s .u8s-responsive-pair { width: max-content; }
.u8s .u8s-responsive-narrow { display: none; }
.u8s.is-narrow .u8s-responsive-wide { display: none; }
.u8s.is-narrow .u8s-responsive-narrow { display: block; }

/* Round-three shot grammar: isolated product pieces, with a separate readable phone composition. */
.u8s .u8s-scene-card { width: 520px; }
.u8s .u8s-scene-problem { width: 520px; }
.u8s .u8s-scene-problem .u8s-problem-card { width: 100%; }
.u8s .u8s-scene-lane { width: 430px; }
.u8s .u8s-scene-lane .u8s-lane { width: 100%; }
.u8s .u8s-scene-reply { width: 560px; }
.u8s .u8s-scene-reply .u8s-reply { width: 100%; }
.u8s .u8s-scene-row { gap: 28px; align-items: center; }
.u8s .u8s-scene-stack { gap: 18px; }
.u8s .u8s-scene-title {
  width: 900px; color: var(--s-ink); text-align: center;
  font: 560 64px/1.12 var(--u-serif, "Literata", Georgia, serif);
  letter-spacing: -.02em;
}
.u8s .u8s-question-breadcrumb {
  width: 680px; padding: 14px 16px; border-block: 1px solid var(--s-rule);
  background: var(--s-paper); color: var(--s-tertiary); font: 400 13px/20px "Inter", sans-serif;
}
.u8s .u8s-question-activity { width: 680px; padding: 12px 16px; border-bottom: 1px solid var(--s-rule); background: var(--s-white); }
.u8s .u8s-question-beat { width: 560px; }
.u8s .u8s-question-beat .u8s-quote { align-items: flex-start; white-space: normal; }
.u8s .u8s-code-check { padding: 14px; border-radius: 12px; background: var(--s-paper); }
.u8s .u8s-code-check .u8s-code { overflow: visible; white-space: pre; }
.u8s .u8s-ready-card { background: var(--s-paper); border-radius: 12px; }
.u8s .u8s-mini-dock { width: 640px; gap: 14px; padding: 12px; border: 1px solid var(--s-rule); border-radius: 12px; background: var(--s-white); box-shadow: 0 2px 8px #0000000a; }
.u8s .u8s-phase-card { width: 610px; gap: 12px; padding: 16px; background: var(--s-white); border: 1px solid var(--s-rule); border-radius: 8px; }
.u8s .u8s-phase-card .u8s-problem-row { width: 100%; }
.u8s .u8s-scene-next-step { width: 560px; }
.u8s .u8s-coding-final, .u8s .u8s-next-final { width: 610px; }
.u8s .u8s-earlier-card { width: 680px; }
.u8s .u8s-pair-vertical { gap: 12px; }
.u8s .u8s-pair-vertical > * { width: 100%; }
.u8s .u8s-wide-window { width: 1440px; }
.u8s .u8s-feedback-card { gap: 5px; padding: 16px 18px; border: 1px solid var(--s-rule); border-radius: 12px; background: var(--s-white); }
.u8s .u8s-button.is-citation { width: max-content; max-width: 100%; color: var(--s-accent); box-shadow: none; background: transparent; padding-inline: 0; text-align: left; white-space: normal; }
.u8s .u8s-button.is-selected { color: var(--s-accent); box-shadow: 0 0 0 1px var(--s-accent); }
.u8s .u8s-library-tabs { gap: 8px; }
.u8s .u8s-sheet-review { width: 700px; background: var(--s-paper); }
.u8s .u8s-sheet-practice { width: 680px; }
.u8s .u8s-score-head { justify-content: space-between; padding: 0 18px 8px; border-bottom: 1px solid var(--s-rule); }
.u8s .u8s-score-table { gap: 0; }
.u8s .u8s-score-row { gap: 10px; min-height: 52px; padding: 10px 14px 10px 18px; border-bottom: 1px solid var(--s-rule); }
.u8s .u8s-score-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--s-rule-strong); }
.u8s .u8s-score-value { margin-left: auto; font-size: 17px; font-variant-numeric: tabular-nums; }
.u8s .u8s-score-quote { display: block; margin-top: 2px; text-align: left; font-size: 12px; line-height: 16px; }
.u8s .u8s-practice-actions { gap: 8px; flex-wrap: wrap; }
.u8s .u8s-button.is-primary { background: var(--s-accent); color: #fff; }
.u8s .u8s-status-strip { width: 620px; gap: 12px; }
.u8s .u8s-status-strip > * { width: 100%; }
.u8s .u8s-status-wide { width: 1040px; align-items: stretch; }
.u8s .u8s-status-wide > .u8s-scene-stack { width: 520px; }
.u8s .u8s-status-wide > .u8s-code-check { width: 490px; }
.u8s .u8s-phone-problem-summary, .u8s .u8s-workspace-answer { gap: 8px; padding: 12px; }
.u8s .u8s-workspace-phone { width: 560px; }
.u8s .u8s-review-focus { max-height: none; }
.u8s .u8s-phone-score-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.u8s .u8s-phone-score-grid > * { padding: 8px; border: 1px solid var(--s-rule); border-radius: 8px; }
.u8s .u8s-phone-practice-notes { gap: 10px; }
.u8s .u8s-swap-stack { position: relative; width: 620px; height: 340px; }
.u8s .u8s-swap-stack > .u8s-swap-state { position: absolute; inset: 0; }

@container (max-width: 599px) {
  .u8s-frame:not([data-scene="hero"]) { aspect-ratio: 4 / 3; }
  .u8s-control { left: 12px; right: auto; top: auto; bottom: 12px; width: 40px; height: 40px; opacity: .72; }
  .u8s-control:hover, .u8s-control:focus-visible, .u8s-frame:not(.is-playing) .u8s-control { opacity: 1; }
  .u8s .u8s-responsive-narrow { width: 276px; }
  .u8s .u8s-responsive-narrow .u8s-card,
  .u8s .u8s-responsive-narrow .u8s-problem-card,
  .u8s .u8s-responsive-narrow .u8s-lane,
  .u8s .u8s-responsive-narrow .u8s-reply,
  .u8s .u8s-responsive-narrow .u8s-sheet,
  .u8s .u8s-responsive-narrow .u8s-mini-dock,
  .u8s .u8s-responsive-narrow .u8s-phase-card,
  .u8s .u8s-responsive-narrow .u8s-code-check,
  .u8s .u8s-responsive-narrow .u8s-answer-fragment,
  .u8s .u8s-responsive-narrow .u8s-ready-card,
  .u8s .u8s-responsive-narrow .u8s-next-step,
  .u8s .u8s-responsive-narrow .u8s-answer-ready-wrap,
  .u8s .u8s-responsive-narrow .u8s-answer-ready-dock,
  .u8s .u8s-responsive-narrow .u8s-shared-page { width: 276px; max-width: 276px; }
  .u8s .u8s-responsive-narrow .u8s-problem-card { gap: 8px; }
  .u8s .u8s-responsive-narrow .u8s-ready-card.is-narrow { gap: 5px; padding: 10px; }
  .u8s .u8s-responsive-narrow .u8s-ready-card.is-narrow .u8s-answer-lead { font-size: 14px; line-height: 18px; }
  .u8s .u8s-responsive-narrow .u8s-ready-card.is-narrow .u8s-meta { font-size: 11px; line-height: 14px; }
  .u8s .u8s-responsive-narrow .u8s-status-strip.is-mini { gap: 6px; }
  .u8s .u8s-responsive-narrow .u8s-status-mini-card { gap: 5px; padding: 8px; }
  .u8s .u8s-responsive-narrow .u8s-status-mini-card .u8s-prose { font-size: 13px; line-height: 17px; }
  .u8s .u8s-responsive-narrow .u8s-problem-card > :not(.u8s-card-head):not(.u8s-problem-actions) { margin-inline: 10px; }
  .u8s .u8s-responsive-narrow .u8s-card-head { min-height: 30px; padding: 5px 9px; }
  .u8s .u8s-responsive-narrow .u8s-problem-status { margin-inline: 10px !important; padding: 6px 8px; }
  .u8s .u8s-responsive-narrow .u8s-problem-title { font-size: 20px; line-height: 24px; }
  .u8s .u8s-responsive-narrow .u8s-prose,
  .u8s .u8s-responsive-narrow .u8s-lane-words,
  .u8s .u8s-responsive-narrow .u8s-reply-text { font-size: 15px; line-height: 20px; }
  .u8s .u8s-responsive-narrow .u8s-meta,
  .u8s .u8s-responsive-narrow .u8s-chip,
  .u8s .u8s-responsive-narrow .u8s-button,
  .u8s .u8s-responsive-narrow .u8s-keycap { font-size: 13px; line-height: 17px; }
  .u8s .u8s-responsive-narrow .u8s-code { overflow-wrap: anywhere; white-space: pre-wrap; font-size: 12px; line-height: 17px; }
  .u8s .u8s-responsive-narrow .u8s-code-line,
  .u8s .u8s-responsive-narrow .u8s-code-check .u8s-code { white-space: pre-wrap; }
  .u8s .u8s-responsive-narrow .u8s-question-breadcrumb { width: 276px; font-size: 13px; line-height: 18px; }
  .u8s .u8s-responsive-narrow .u8s-question-beat { width: 276px; }
  .u8s .u8s-responsive-narrow .u8s-question-row { align-items: flex-start; }
  .u8s .u8s-responsive-narrow .u8s-question-copy,
  .u8s .u8s-responsive-narrow .u8s-quote { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  .u8s .u8s-responsive-narrow .u8s-scene-title { width: 276px; font-size: 29px; }
  .u8s .u8s-responsive-narrow .u8s-scene-stack { gap: 9px; }
  .u8s .u8s-responsive-narrow .u8s-scene-row { flex-direction: column; gap: 10px; }
  .u8s .u8s-responsive-narrow .u8s-shared-page { height: 190px; }
  .u8s .u8s-responsive-narrow .u8s-swap-stack { width: 276px; height: 190px; }
  .u8s .u8s-responsive-narrow .u8s-page-body { height: 158px; }
  .u8s .u8s-responsive-narrow .u8s-page-copy { width: 100%; border: 0; padding: 12px; }
  .u8s .u8s-responsive-narrow .u8s-page-copy-content { gap: 7px; }
  .u8s .u8s-responsive-narrow .u8s-page-below-fold { margin-top: 70px !important; }
  .u8s .u8s-responsive-narrow .u8s-page-editor { display: none; }
  .u8s .u8s-responsive-narrow .u8s-page-address { display: none; }
  .u8s .u8s-responsive-narrow .u8s-page-scrollbar { left: auto; right: 4px; }
  .u8s .u8s-responsive-narrow .u8s-sheet-practice { max-height: none; padding: 14px; gap: 10px; }
  .u8s .u8s-responsive-narrow .u8s-score-row { min-height: 40px; padding: 7px 8px; }
  .u8s .u8s-responsive-narrow .u8s-practice-actions { display: none; }
  .u8s .u8s-responsive-narrow .u8s-feedback-card { padding: 9px 10px; }
  .u8s .u8s-responsive-narrow .u8s-workspace-phone,
  .u8s .u8s-responsive-narrow .u8s-coding-final,
  .u8s .u8s-responsive-narrow .u8s-next-final,
  .u8s .u8s-responsive-narrow .u8s-status-strip { width: 276px; }
  .u8s .u8s-responsive-narrow .u8s-final-stack .u8s-lane-words,
  .u8s .u8s-responsive-narrow .u8s-final-stack .u8s-reply-text { min-height: 0; }
  .u8s .u8s-responsive-narrow .u8s-on-screen .u8s-code { max-height: 86px; }
}

@media (prefers-reduced-motion: reduce) {
  .u8s-control, .u8s-progress, .u8s-scrub { display: none; }
  .u8s .has-caret::after { animation: none; opacity: 1; }
}

/* Storyboards v2 set type at its rendered size. The compensating shot scale makes
   one CSS pixel equal one frame pixel at each contract width. */
.u8s .u8s-v2 {
  color: var(--s-ink);
  font: 400 18px/1.35 "Inter", system-ui, sans-serif;
}
.u8s .u8s-v2-close { width: 640px; }
.u8s .u8s-v2 .u8s-heading { font: 600 30px/1.15 "Inter", system-ui, sans-serif; color: var(--s-ink); }
.u8s .u8s-v2 .u8s-card-head .u8s-heading,
.u8s .u8s-v2 .u8s-reply-head strong { font: 600 18px/1.25 "Inter", system-ui, sans-serif; color: var(--s-secondary); }
.u8s .u8s-v2 .u8s-meta,
.u8s .u8s-v2 .u8s-chip,
.u8s .u8s-v2 .u8s-button { font-size: 18px; line-height: 1.3; }
.u8s .u8s-v2 .u8s-chip { min-height: 24px; }
.u8s .u8s-v2 .u8s-chip::before { width: 8px; height: 8px; }
.u8s .u8s-v2-primary,
.u8s .u8s-v2 .u8s-answer-lead,
.u8s .u8s-v2 .u8s-lane-words,
.u8s .u8s-v2 .u8s-reply-text,
.u8s .u8s-v2 .u8s-next-body { font: 400 24px/1.34 "Inter", system-ui, sans-serif; color: var(--s-ink); }
.u8s .u8s-v2 .u8s-answer-lead { font-weight: 500; }
.u8s .u8s-v2 .u8s-code,
.u8s .u8s-v2 .u8s-pad-code { font: 400 17px/1.45 ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

.u8s .u8s-v2-problem {
  width: 640px; height: 470px; gap: 8px; overflow: hidden; padding: 0 20px 18px;
}
.u8s .u8s-v2-problem > .u8s-card-head { min-height: 42px; margin-inline: -20px; padding: 8px 20px; }
.u8s .u8s-v2-problem .u8s-problem-title { font: 600 30px/1.16 "Inter", system-ui, sans-serif; }
.u8s .u8s-v2-problem .u8s-prose { margin: 0; }
.u8s .u8s-v2-status { gap: 2px; padding: 8px 10px; border-radius: 8px; background: rgba(36,107,94,.07); }
.u8s .u8s-v2-status.is-done { padding: 0; background: transparent; }
.u8s .u8s-v2-status.is-done .u8s-meta { display: none; }
.u8s .u8s-v2-problem .u8s-constraints { display: flex; flex-flow: row wrap; justify-content: flex-start; gap: 8px 18px; font-size: 18px; }
.u8s .u8s-v2-problem .u8s-example { gap: 5px; font-size: 18px; }
.u8s .u8s-v2-problem .u8s-example .u8s-code { padding: 8px 10px; white-space: pre; }
.u8s .u8s-v2-new { padding: 6px 8px; border-left: 3px solid var(--s-reading); background: var(--s-reading-fill); }
.u8s .u8s-v2-reserved-problem { height: 470px; }

.u8s .u8s-v2-pad {
  width: 640px; height: 480px; border-radius: 12px; font-size: 18px; line-height: 1.35;
}
.u8s .u8s-v2-pad .u8s-page-bar { height: 40px; padding-inline: 14px; }
.u8s .u8s-v2-pad .u8s-page-tab { font-size: 17px; }
.u8s .u8s-v2-pad .u8s-page-body { height: 440px; }
.u8s .u8s-v2-pad .u8s-page-copy { width: 50%; padding: 18px; }
.u8s .u8s-v2-pad .u8s-page-editor { width: 50%; padding: 16px; gap: 12px; }
.u8s .u8s-v2-pad .u8s-page-copy-content { gap: 12px; }
.u8s .u8s-v2-pad .u8s-page-copy-content > .u8s-heading { font-size: 22px; line-height: 1.2; }
.u8s .u8s-v2-pad .u8s-page-copy-content p { font-size: 18px; line-height: 1.35; }
.u8s .u8s-v2-pad .u8s-page-fold { display: block; height: 300px; flex: none; }
.u8s .u8s-v2-pad .u8s-page-constraints { gap: 4px; font-size: 17px; }
.u8s .u8s-v2-pad .u8s-page-copy-content > .u8s-code { padding: 8px; white-space: pre; }
.u8s .u8s-pad-code { position: relative; min-height: 150px; margin: 0; padding: 8px 8px 8px 46px; white-space: pre; color: #d7dbe0; overflow: hidden; }
.u8s .u8s-pad-code::before { content: attr(data-lines); position: absolute; left: 0; top: 8px; width: 34px; padding-right: 8px; border-right: 1px solid #444c56; color: #737b84; text-align: right; white-space: pre; }
.u8s .u8s-pad-code-copy { white-space: pre; }
.u8s .u8s-v2-pad .u8s-page-scrollbar { left: calc(50% - 7px); top: 58px; }
.u8s .u8s-v2-pane-only { width: 300px; height: 470px; }
.u8s .u8s-v2-pane-only .u8s-page-body { height: 430px; }
.u8s .u8s-v2-pane-only .u8s-page-copy { width: 100%; border-right: 0; }
.u8s .u8s-v2-pane-only .u8s-page-editor { display: none; }
.u8s .u8s-v2-pane-only .u8s-page-scrollbar { right: 5px; left: auto; }

.u8s .u8s-v2-pair { gap: 40px; align-items: center; }
.u8s .u8s-v2-problem-pair { width: 980px; }
.u8s .u8s-v2-problem-pair .u8s-v2-problem { height: 300px; }
.u8s .u8s-v2-problem-pair .u8s-v2-pane-only { height: 300px; }
.u8s .u8s-v2-problem-pair .u8s-v2-pane-only .u8s-page-body { height: 260px; }
.u8s .u8s-v2-lane { width: 640px; min-height: 150px; gap: 18px; padding: 20px; }
.u8s .u8s-v2-lane .u8s-lane-head { font-size: 18px; }
.u8s .u8s-v2-lane .u8s-avatar { width: 28px; height: 28px; font-size: 17px; }
.u8s .u8s-v2-conversation { width: 640px; min-height: 310px; gap: 18px; padding: 0 20px 20px; }
.u8s .u8s-v2-conversation > .u8s-card-head { min-height: 54px; margin-inline: -20px; padding-inline: 20px; border-bottom: 1px solid var(--s-rule); }
.u8s .u8s-v2-conversation .u8s-quote { gap: 8px; padding-left: 12px; }
.u8s .u8s-v2-conversation .u8s-quote .u8s-meta { flex: none; }
.u8s .u8s-v2-conversation .u8s-reply { width: 100%; min-height: 130px; gap: 8px; padding: 12px 14px; }
.u8s .u8s-v2-conversation .u8s-reply-text { min-height: 66px; }

.u8s .u8s-v2-button-row {
  position: relative; width: max-content; min-height: 88px; justify-content: flex-end; gap: 20px;
  padding: 18px 22px; border: 1px solid var(--s-rule); border-radius: 14px; background: var(--s-white);
  box-shadow: 0 4px 20px #0000000a;
}
.u8s .u8s-v2-button-row .u8s-button { min-height: 52px; padding: 8px 14px; font-size: 28px; line-height: 1.2; }
.u8s .u8s-v2-button-row .u8s-keycap { font-size: 20px; line-height: 1.2; padding: 3px 7px; }
.u8s .u8s-v2-button-row .u8s-button.is-disabled { opacity: .42; box-shadow: none; }
.u8s .u8s-cursor-stage .u8s-cursor { width: 40px; height: 46px; }

.u8s .u8s-v2-answer-card { width: 640px; height: 480px; gap: 9px; padding: 20px; }
.u8s .u8s-v2-answer-card .u8s-answer-status { min-height: 23px; font-size: 17px; }
.u8s .u8s-v2-answer-card .u8s-answer-lead { min-height: 58px; font-size: 22px; line-height: 1.3; }
.u8s .u8s-v2-code-lines { gap: 0; white-space: pre; }
.u8s .u8s-v2-code-line { display: block; min-height: 24.65px; white-space: pre; }
.u8s .u8s-v2-code-more { display: none; }
.u8s .u8s-v2-verdict { gap: 3px; }
.u8s .u8s-v2-verdict .u8s-tick-line { font-size: 20px; }
.u8s .u8s-v2-case { font: 400 17px/1.3 ui-monospace, "SF Mono", Menlo, Consolas, monospace; white-space: pre; }
.u8s .u8s-v2-on-screen { width: 640px; min-height: 300px; gap: 14px; padding: 0 22px 18px; }
.u8s .u8s-v2-on-screen > .u8s-card-head { min-height: 54px; margin-inline: -22px; padding-inline: 22px; border-bottom: 1px solid var(--s-rule); }
.u8s .u8s-v2-working-head { justify-content: space-between; }
.u8s .u8s-v2-working-freshness { margin-left: auto; }
.u8s .u8s-v2-working-evidence-list { gap: 4px; color: var(--s-tertiary); font-size: 17px; }
.u8s .u8s-v2-working-action { justify-content: flex-end; margin-top: auto; }
.u8s .u8s-v2-next-card { width: 640px; min-height: 220px; gap: 12px; padding-bottom: 20px; }
.u8s .u8s-v2-next-card .u8s-card-head { padding: 14px 18px; }
.u8s .u8s-v2-next-card .u8s-next-body { padding-inline: 18px; }
.u8s .u8s-v2-editor-focus .u8s-page-copy { width: 25%; opacity: .65; }
.u8s .u8s-v2-editor-focus .u8s-page-editor { width: 75%; }
.u8s .u8s-v2-editor-focus .u8s-page-scrollbar { left: calc(25% - 7px); }
.u8s .u8s-v2-code-prefix,
.u8s .u8s-v2-code-typed { white-space: pre; }

.u8s .u8s-v2-swap { position: relative; width: 640px; height: 480px; }
.u8s .u8s-v2-swap > .u8s-swap-state { position: absolute; inset: 0; }
.u8s .u8s-v2-swap .u8s-page-copy { width: 38%; }
.u8s .u8s-v2-swap .u8s-page-editor { width: 62%; }
.u8s .u8s-v2-swap .u8s-page-scrollbar { left: calc(38% - 7px); }
.u8s .u8s-v2-two-sum { height: 400px; }
.u8s .u8s-v2-menu { width: 640px; min-height: 250px; gap: 8px; padding: 22px; }
.u8s .u8s-v2-menu > .u8s-button { align-self: flex-start; font-size: 24px; }
.u8s .u8s-v2-menu-list { gap: 2px; padding: 6px; border: 1px solid var(--s-rule); border-radius: 10px; }
.u8s .u8s-v2-menu-row { min-height: 58px; justify-content: space-between; padding: 10px 14px; border-radius: 8px; font-size: 22px; }
.u8s .u8s-v2-menu-row.is-current { background: var(--s-quiet); }
.u8s .u8s-v2-earlier { width: 640px; height: auto; gap: 10px; padding: 18px 20px; }
.u8s .u8s-v2-earlier > .u8s-heading:first-child { font-size: 30px; }
.u8s .u8s-v2-earlier > .u8s-heading { font-size: 24px; }
.u8s .u8s-v2-earlier .u8s-answer-lead { font-size: 22px; }
.u8s .u8s-v2-earlier .u8s-v2-code-lines {
  display: block; line-height: 1.45;
}
.u8s .u8s-v2-earlier .u8s-v2-code-line { min-height: 0; line-height: 1.45; }

.u8s .u8s-v2-hero-card { height: 174px; padding: 0 18px 18px; gap: 4px; }
.u8s .u8s-v2-hero-card > .u8s-card-head { min-height: 32px; margin-inline: -18px; padding: 5px 18px; }
.u8s .u8s-v2-hero-card .u8s-v2-new,
.u8s .u8s-v2-hero-card .u8s-constraints,
.u8s .u8s-v2-hero-card .u8s-example { display: none; }
.u8s .u8s-v2-hero-card .u8s-problem-title { font-size: 26px; }
.u8s .u8s-v2-hero-card .u8s-v2-primary { font-size: 22px; line-height: 1.18; }
.u8s .u8s-v2-pair-card { width: 440px; min-height: 150px; max-height: 174px; }
.u8s .u8s-v2-hero-pair { width: 920px; }
.u8s .u8s-v2-hero-pair .u8s-lane-words,
.u8s .u8s-v2-hero-pair .u8s-reply-text { font-size: 22px; line-height: 1.28; }
.u8s-frame[data-scene="hero"] .u8s-v2-lane .u8s-lane-words { font-size: 22px; line-height: 1.28; }
.u8s .u8s-v2-hero-reply { padding: 16px 18px; }
.u8s-frame[data-scene="hero"] .u8s-align-top .u8s-shot-content { top: 72px; }
.u8s .u8s-v2-hero-strip { width: 298px; min-height: 48px; height: auto; justify-content: center; gap: 0; overflow: hidden; padding: 5px 8px 3px; border: 1px solid var(--s-rule); border-radius: 9px; background: var(--s-white); }
.u8s .u8s-v2-hero-strip-head { min-height: 12px; justify-content: space-between; gap: 8px; color: var(--s-secondary); }
.u8s .u8s-v2-hero-speaker,
.u8s .u8s-v2-hero-label,
.u8s .u8s-v2-hero-copy { font: 600 12px/1 "Inter", system-ui, sans-serif; }
.u8s .u8s-v2-hero-copy { color: var(--s-accent); }
.u8s .u8s-v2-hero-question-strip,
.u8s .u8s-v2-hero-reply-strip { min-height: 50px; }
.u8s .u8s-v2-hero-question-strip .u8s-v2-primary,
.u8s .u8s-v2-hero-reply-strip .u8s-v2-primary { line-height: 1.05; }
.u8s .u8s-v2-scrolled-pad .u8s-page-fold { height: 8px; }
.u8s .u8s-v2-hero-strip .u8s-v2-primary { font-size: 14px; line-height: 1.25; }
.u8s .u8s-v2-hero-question-strip .u8s-v2-primary,
.u8s .u8s-v2-hero-reply-strip .u8s-v2-primary { line-height: 1.05; }
.u8s .u8s-v2-hero-strip .u8s-chip { min-height: 14px; font-size: 11px; line-height: 1.1; }
.u8s .u8s-v2-hero-strip .u8s-chip::before { width: 5px; height: 5px; }

/* Four-by-three composed stills. */
.u8s .u8s-v2-practice { width: 720px; gap: 14px; padding: 22px 28px; }
.u8s .u8s-v2-still-head { gap: 2px; }
.u8s .u8s-v2-practice .u8s-score-head { padding: 0 14px 8px; }
.u8s .u8s-v2-practice .u8s-score-row { min-height: 48px; padding: 8px 14px; font-size: 22px; }
.u8s .u8s-v2-practice .u8s-score-row { align-items: flex-start; }
.u8s .u8s-v2-practice .u8s-score-value { font-size: 22px; }
.u8s .u8s-practice-score-copy { gap: 5px; }
.u8s .u8s-practice-evidence { gap: 3px; padding-left: 12px; border-left: 2px solid var(--s-rule-strong); }
.u8s .u8s-v2-practice .u8s-score-quote { margin: 0; font-size: 20px; line-height: 1.3; }
.u8s .u8s-practice-evidence .u8s-button { align-self: flex-start; padding-inline: 0; box-shadow: none; color: var(--s-accent); }
.u8s .u8s-v2-practice .u8s-review-block { gap: 4px; }
.u8s .u8s-v2-practice .u8s-review-block .u8s-heading { font-size: 22px; }
.u8s .u8s-v2-practice .u8s-review-block .u8s-v2-primary { font-size: 20px; }
.u8s .u8s-v2-workspace { width: 980px; gap: 20px; align-items: stretch; }
.u8s .u8s-v2-workspace-problem,
.u8s .u8s-v2-workspace-right { width: 480px; }
.u8s .u8s-v2-workspace-problem { width: 480px; height: auto; gap: 8px; padding: 0 18px 16px; }
.u8s .u8s-v2-workspace-problem > .u8s-card-head { margin-inline: -18px; padding-inline: 18px; }
.u8s .u8s-v2-workspace-problem .u8s-heading,
.u8s .u8s-v2-workspace-problem .u8s-problem-title { font-size: 24px; }
.u8s .u8s-v2-workspace-problem .u8s-v2-primary { font-size: 20px; }
.u8s .u8s-v2-workspace-right { gap: 14px; }
.u8s .u8s-v2-workspace-lane { width: 480px; gap: 8px; padding: 14px; }
.u8s .u8s-v2-workspace-lane .u8s-avatar,
.u8s .u8s-v2-status-card .u8s-avatar { font-size: 17px; }
.u8s .u8s-v2-workspace-lane .u8s-lane-words { font-size: 20px; }
.u8s .u8s-v2-workspace-reply { width: 480px; padding: 12px 14px; }
.u8s .u8s-v2-workspace-reply .u8s-reply-text { min-height: 0; font-size: 20px; }
.u8s .u8s-v2-status-column { width: 600px; gap: 18px; }
.u8s .u8s-v2-status-card { width: 600px; min-height: 110px; gap: 8px; padding: 14px 18px; }
.u8s .u8s-v2-status-card .u8s-heading { font-size: 24px; }
.u8s .u8s-v2-status-card .u8s-v2-primary,
.u8s .u8s-v2-status-card .u8s-lane-words { font-size: 22px; }
.u8s .u8s-v2-status-old-title { opacity: .64 !important; }
.u8s .u8s-v2-status-card.is-dimmed { opacity: .56 !important; }
.u8s .u8s-v2-status-phone { width: 242px; gap: 6px; }
.u8s .u8s-v2-review { width: 760px; gap: 16px; padding: 22px 26px; }
.u8s .u8s-v2-review-questions { gap: 6px; }
.u8s .u8s-v2-review-questions .u8s-heading,
.u8s .u8s-v2-review .u8s-feedback-card .u8s-heading { font-size: 22px; }
.u8s .u8s-v2-review .u8s-v2-primary { font-size: 20px; }
.u8s .u8s-v2-quote { padding-left: 12px; border-left: 2px solid var(--s-rule-strong); font-size: 20px; }
.u8s .u8s-v2-review-feedback-head { justify-content: flex-start; gap: 12px; }
.u8s .u8s-v2-review-feedback-head .u8s-button { margin-left: auto; }
.u8s .u8s-v2-review .u8s-button.is-citation { font-size: 20px; }
.u8s .u8s-v2-review-phone { position: relative; width: 290px; height: 210px; }
.u8s .u8s-v2-review-phone-page { position: absolute; top: 0; right: 0; width: 242px; }
.u8s .u8s-reply.is-collapsed { display: none; }

@container (max-width: 599px) {
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow { width: 290px; }
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-problem,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-conversation,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-lane,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-answer-card,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-on-screen,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-next-card,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-menu,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-earlier,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-practice-phone,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-review-phone-page,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-workspace-phone,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-workspace-phone .u8s-v2-workspace-phone-problem,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-workspace-phone .u8s-v2-workspace-lane,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-workspace-phone .u8s-v2-workspace-reply,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-status-phone,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-status-phone .u8s-v2-status-card,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-pad,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-swap { width: 242px; max-width: 242px; margin-left: auto; }
  .u8s .u8s-v2-problem,
  .u8s .u8s-v2-conversation,
  .u8s .u8s-v2-lane,
  .u8s .u8s-v2-answer-card,
  .u8s .u8s-v2-on-screen,
  .u8s .u8s-v2-next-card,
  .u8s .u8s-v2-menu,
  .u8s .u8s-v2-earlier,
  .u8s .u8s-v2-practice-phone,
  .u8s .u8s-v2-review-phone-page { width: 242px; max-width: 242px; margin-left: auto; }
  .u8s .u8s-v2-phone-safe { width: 242px; max-width: 242px; margin-left: auto; }
  .u8s .u8s-v2 .u8s-heading { font-size: 15px; line-height: 1.25; }
  .u8s .u8s-v2 .u8s-card-head .u8s-heading,
  .u8s .u8s-v2 .u8s-reply-head strong,
  .u8s .u8s-v2 .u8s-meta,
  .u8s .u8s-v2 .u8s-chip,
  .u8s .u8s-v2 .u8s-button { font-size: 12px; line-height: 1.25; }
  .u8s .u8s-v2-primary,
  .u8s .u8s-v2 .u8s-answer-lead,
  .u8s .u8s-v2 .u8s-lane-words,
  .u8s .u8s-v2 .u8s-reply-text,
  .u8s .u8s-v2 .u8s-next-body { font-size: 15px; line-height: 1.28; }
  .u8s .u8s-v2-hero-strip .u8s-v2-primary,
  .u8s .u8s-v2-hero-strip .u8s-problem-title,
  .u8s .u8s-v2-hero-strip .u8s-lane-words,
  .u8s .u8s-v2-hero-strip .u8s-reply-text { font-size: 14px; line-height: 1.25; }
  .u8s .u8s-v2-hero-strip .u8s-chip { font-size: 12px; }
  .u8s .u8s-v2 .u8s-code,
  .u8s .u8s-v2 .u8s-pad-code { font-size: 10.5px; line-height: 1.45; white-space: pre; overflow-wrap: normal; }
  .u8s .u8s-v2-problem { height: 174px; gap: 1px; padding: 0 7px 4px; }
  .u8s .u8s-v2-problem > .u8s-card-head { display: none; }
  .u8s .u8s-v2-problem .u8s-problem-title { font-size: 15px; line-height: 1.1; }
  .u8s .u8s-v2-problem .u8s-v2-primary { line-height: 1.1; }
  .u8s .u8s-v2-status { gap: 0; padding: 1px 3px; }
  .u8s .u8s-v2-status .u8s-meta { font-size: 12px; line-height: 1.15; }
  .u8s .u8s-v2-problem .u8s-v2-status .u8s-meta { display: none; }
  .u8s .u8s-v2-phone-final .u8s-v2-status .u8s-meta { display: none; }
  .u8s .u8s-v2-phone-final .u8s-v2-status .u8s-meta { display: none; }
  .u8s .u8s-v2-problem .u8s-constraints { flex-wrap: nowrap; gap: 8px; font-size: 12px; line-height: 1.1; }
  .u8s .u8s-v2-problem .u8s-constraints > span { padding-left: 10px; }
  .u8s .u8s-v2-problem .u8s-constraints > span::before { left: 1px; top: 5px; width: 4px; height: 4px; }
  .u8s .u8s-v2-problem .u8s-example { gap: 1px; }
  .u8s .u8s-v2-problem .u8s-example .u8s-code { padding: 2px 3px; }
  .u8s .u8s-v2-two-sum .u8s-constraints { flex-direction: column; align-items: flex-start; gap: 3px; }
  .u8s .u8s-v2-two-sum .u8s-constraints > span { white-space: nowrap; }
  .u8s .u8s-v2-new { padding: 0 3px; border-left-width: 2px; }
  .u8s .u8s-v2-pad { width: 242px; height: 174px; margin-left: auto; }
  .u8s .u8s-v2-pad .u8s-page-bar { height: 26px; padding-inline: 7px; }
  .u8s .u8s-v2-pad .u8s-page-tab { font-size: 12px; }
  .u8s .u8s-v2-pad .u8s-page-body { height: 148px; }
  .u8s .u8s-v2-pad .u8s-page-copy { display: block; width: 100%; padding: 8px; }
  .u8s .u8s-v2-pad .u8s-page-editor { display: none; width: 100%; padding: 8px; }
  .u8s .u8s-v2-pad .u8s-page-copy-content { gap: 5px; }
  .u8s .u8s-v2-pad .u8s-page-copy-content > .u8s-heading { font-size: 15px; }
  .u8s .u8s-v2-pad .u8s-page-copy-content p { font-size: 12px; line-height: 1.25; }
  .u8s .u8s-v2-pad .u8s-page-fold { height: 125px; }
  .u8s .u8s-v2-pad .u8s-page-constraints { font-size: 12px; }
  .u8s .u8s-v2-pad .u8s-page-scrollbar { left: auto; right: 4px; top: 36px; }
  .u8s .u8s-v2-editor-focus .u8s-page-copy { display: none; }
  .u8s .u8s-v2-editor-focus .u8s-page-editor { display: flex; }
  .u8s .u8s-v2-editor-focus .u8s-pad-code { font-size: 9.5px; line-height: 1.45; }
  .u8s .u8s-pad-code { padding: 5px; }
  .u8s .u8s-pad-code::before { display: none; }
  .u8s .u8s-v2-lane { min-height: 80px; gap: 7px; padding: 9px; }
  .u8s .u8s-v2-lane .u8s-lane-head { font-size: 12px; }
  .u8s .u8s-v2-lane .u8s-chip { white-space: nowrap; }
  .u8s .u8s-v2-lane .u8s-avatar { width: 20px; height: 20px; font-size: 12px; }
  .u8s .u8s-v2-conversation { min-height: 160px; gap: 7px; padding: 0 9px 9px; }
  .u8s .u8s-v2-conversation > .u8s-card-head { min-height: 28px; margin-inline: -9px; padding-inline: 9px; }
  .u8s .u8s-v2-conversation .u8s-quote { gap: 4px; padding-left: 6px; }
  .u8s .u8s-v2-conversation .u8s-reply { min-height: 68px; padding: 5px 7px; }
  .u8s .u8s-v2-conversation .u8s-reply-text { min-height: 38px; }
  .u8s .u8s-v2-button-row { width: 290px; min-height: 60px; gap: 3px; padding: 6px; }
  .u8s .u8s-v2-button-row .u8s-button { min-height: 34px; padding: 4px; font-size: 12px; }
  .u8s .u8s-v2-button-row .u8s-keycap { margin-left: 3px; padding: 1px 3px; font-size: 12px; }
  .u8s .u8s-v2-answer-card { height: 174px; gap: 2px; padding: 6px; }
  .u8s .u8s-v2-answer-card .u8s-answer-status { min-height: 15px; font-size: 12px; }
  .u8s .u8s-v2-answer-card .u8s-answer-lead { min-height: 38px; font-size: 15px; }
  .u8s .u8s-v2-answer-card .u8s-v2-code-line { min-height: 15.225px; }
  .u8s .u8s-v2-answer-card .u8s-v2-code-lines {
    padding: 2px 3px;
  }
  .u8s .u8s-v2-answer-card .u8s-v2-code-lines:not(.is-phone-excerpt) .u8s-v2-code-line:nth-child(n+5) { display: none; }
  .u8s .u8s-v2-answer-card .u8s-v2-code-more { display: block; }
  .u8s .u8s-v2-answer-card .u8s-v2-case { display: none; }
  .u8s .u8s-v2-answer-card .u8s-v2-verdict { margin-left: 35px; }
  .u8s .u8s-v2-answer-card .u8s-v2-verdict .u8s-tick-line { font-size: 15px; }
  .u8s .u8s-v2-on-screen { min-height: 170px; gap: 5px; padding: 0 8px 7px; }
  .u8s .u8s-v2-on-screen > .u8s-card-head { min-height: 28px; margin-inline: -8px; padding-inline: 8px; }
  .u8s .u8s-v2-working-evidence-list { gap: 1px; font-size: 12px; }
  .u8s .u8s-v2-next-card { min-height: 170px; gap: 6px; padding-bottom: 10px; }
  .u8s .u8s-v2-next-card .u8s-card-head { padding: 7px 9px; }
  .u8s .u8s-v2-next-card .u8s-next-body { padding-inline: 9px; }
  .u8s .u8s-v2-swap { width: 242px; height: 200px; margin-left: auto; }
  .u8s .u8s-v2-two-sum { height: 174px; }
  .u8s .u8s-v2-menu { min-height: 190px; gap: 4px; padding: 8px; }
  .u8s-frame[data-scene="next"] .u8s-shot[data-shot="problem-menu"] .u8s-cursor-stage { transform: translateX(48px); }
  .u8s .u8s-v2-menu > .u8s-button { font-size: 15px; }
  .u8s .u8s-v2-menu-row { min-height: 40px; padding: 6px 8px; font-size: 15px; }
  .u8s .u8s-v2-earlier { height: auto; gap: 4px; padding: 8px; }
  .u8s .u8s-v2-code-line { min-height: 15.225px; }
  .u8s .u8s-v2-earlier > .u8s-heading:first-child,
  .u8s .u8s-v2-earlier > .u8s-heading,
  .u8s .u8s-v2-earlier .u8s-answer-lead { font-size: 15px; }
  .u8s .u8s-v2-earlier .u8s-v2-code-lines { padding: 2px 4px; }
  .u8s .u8s-v2-earlier .u8s-v2-code-lines {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 14px), transparent 100%);
  }
  .u8s .u8s-v2-earlier .u8s-v2-code-line { min-height: 0; line-height: 1.45; }
  .u8s .u8s-v2-earlier .u8s-v2-code-line:nth-child(n+4) { display: none; }
  .u8s .u8s-v2-practice { gap: 4px; padding: 7px 8px; }
  .u8s .u8s-v2-practice .u8s-score-head { padding: 0 5px 4px; }
  .u8s .u8s-v2-practice .u8s-score-row { min-height: 27px; padding: 3px 4px; font-size: 15px; }
  .u8s .u8s-v2-practice .u8s-score-value { font-size: 15px; }
  .u8s .u8s-v2-practice .u8s-practice-evidence { gap: 1px; padding-left: 6px; }
  .u8s .u8s-v2-practice .u8s-score-quote { font-size: 12px; }
  .u8s .u8s-v2-practice .u8s-practice-evidence .u8s-button { min-height: 15px; padding: 0; }
  .u8s .u8s-v2-practice .u8s-review-block .u8s-heading,
  .u8s .u8s-v2-practice .u8s-review-block .u8s-v2-primary { font-size: 12px; }
  .u8s .u8s-v2-workspace-phone { width: 242px; gap: 4px; }
  .u8s .u8s-v2-workspace-phone-problem { width: 242px; max-width: 242px; gap: 1px; padding: 5px 7px; }
  .u8s .u8s-v2-workspace-phone-head { justify-content: space-between; }
  .u8s .u8s-v2-workspace-phone .u8s-v2-workspace-lane,
  .u8s .u8s-v2-workspace-phone .u8s-v2-workspace-reply { width: 242px; }
  .u8s .u8s-v2-workspace-phone .u8s-v2-workspace-lane { min-height: 42px; gap: 2px; padding: 4px 6px; }
  .u8s .u8s-v2-workspace-phone .u8s-lane-head { gap: 4px; }
  .u8s .u8s-v2-workspace-phone .u8s-lane-head,
  .u8s .u8s-v2-workspace-phone .u8s-lane-head strong { font-size: 12px; line-height: 1.15; }
  .u8s .u8s-v2-workspace-phone .u8s-lane-head .u8s-chip { font-size: 12px; }
  .u8s .u8s-v2-workspace-phone .u8s-avatar { display: none; }
  .u8s .u8s-v2-workspace-phone .u8s-lane-words { font-size: 12px; line-height: 1.15; }
  .u8s .u8s-v2-workspace-phone .u8s-avatar,
  .u8s .u8s-v2-status-card .u8s-avatar { font-size: 12px; }
  .u8s .u8s-v2-workspace-phone .u8s-v2-workspace-reply { padding: 5px 7px; }
  .u8s .u8s-v2-workspace-phone .u8s-v2-workspace-reply .u8s-reply-text { min-height: 0; font-size: 12px; line-height: 1.15; }
  .u8s .u8s-v2-workspace-phone-problem .u8s-problem-title { font-size: 15px; line-height: 1.1; }
  .u8s .u8s-v2-scrolled-pad .u8s-page-copy { padding: 4px 6px; }
  .u8s .u8s-v2-scrolled-pad .u8s-page-copy-content { gap: 2px; }
  .u8s .u8s-v2-scrolled-pad .u8s-page-copy p { line-height: 1.15; }
  .u8s .u8s-v2-scrolled-pad .u8s-constraints { gap: 1px; line-height: 1.1; }
  .u8s .u8s-v2-scrolled-pad .u8s-example-code { padding-block: 2px; line-height: 1.2; }
  .u8s .u8s-v2-status-card { width: 242px; min-height: 0; gap: 3px; padding: 6px 8px; }
  .u8s .u8s-v2-status-card.u8s-lane { padding: 5px 8px; }
  .u8s .u8s-v2-status-card .u8s-lane-head { gap: 4px; }
  .u8s .u8s-v2-status-card .u8s-avatar { display: none; }
  .u8s .u8s-v2-status-card .u8s-heading { font-size: 15px; }
  .u8s .u8s-v2-status-card .u8s-v2-primary,
  .u8s .u8s-v2-status-card .u8s-lane-words { font-size: 12px; line-height: 1.15; }
  .u8s .u8s-v2-review { gap: 5px; padding: 7px 8px; }
  .u8s .u8s-v2-review .u8s-feedback-card { gap: 2px; padding: 5px 6px; }
  .u8s .u8s-v2-review .u8s-feedback-card .u8s-heading { font-size: 12px; }
  .u8s .u8s-v2-review .u8s-v2-primary,
  .u8s .u8s-v2-review .u8s-button.is-citation { font-size: 12px; line-height: 1.15; }
  .u8s .u8s-v2-review-questions { gap: 3px; padding: 8px; border: 1px solid var(--s-rule); border-radius: 12px; background: var(--s-white); }
  .u8s .u8s-v2-review-questions .u8s-v2-primary { font-size: 12px; line-height: 1.2; }
  .u8s .u8s-v2-review-feedback-head { gap: 4px; align-items: flex-start; flex-wrap: wrap; }
  .u8s .u8s-v2-review-feedback-head .u8s-button { margin-left: auto; }

  /* Round 7: centre a 290 px safe column and size phone surfaces from the
     content that is visible at the current frame. */
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow { width: 290px; }
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-problem,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-conversation,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-lane,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-answer-card,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-on-screen,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-next-card,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-menu,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-earlier,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-practice-phone,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-review-phone-page,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-workspace-phone,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-workspace-phone .u8s-v2-workspace-phone-problem,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-workspace-phone .u8s-v2-workspace-lane,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-workspace-phone .u8s-v2-workspace-reply,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-status-phone,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-status-phone .u8s-v2-status-card,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-pad,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-swap,
  .u8s .u8s-v2-phone-safe { width: 290px; max-width: 290px; margin-inline: auto; }
  .u8s .u8s-v2-problem,
  .u8s .u8s-v2-answer-card,
  .u8s .u8s-v2-two-sum { height: auto; min-height: 0; }
  .u8s .u8s-v2-problem { gap: 3px; padding: 7px 9px 9px; }
  .u8s .u8s-v2-problem > [style*="opacity: 0"] { display: none; }
  .u8s .u8s-v2-problem > .u8s-card-head { display: flex; min-height: 24px; margin-inline: -9px; padding: 3px 9px; }
  .u8s .u8s-v2-phone-final .u8s-v2-status .u8s-meta { display: block; }
  .u8s .u8s-v2-phone-final .u8s-v2-primary { line-height: 1.16; }
  .u8s .u8s-v2-phone-final .u8s-example .u8s-code,
  .u8s .u8s-v2-two-sum .u8s-example .u8s-code { white-space: pre-wrap; }
  .u8s .u8s-v2-pad { width: 290px; max-width: 290px; margin-inline: auto; }
  .u8s .u8s-v2-editor-focus .u8s-page-body { flex-direction: column; }
  .u8s .u8s-v2-editor-focus .u8s-page-copy { display: block; width: 100%; height: 28px; padding: 4px 8px; overflow: hidden; border-bottom: 1px solid var(--s-rule); }
  .u8s .u8s-v2-editor-focus .u8s-page-copy-content { gap: 0; }
  .u8s .u8s-v2-editor-focus .u8s-page-copy-content > :not(.u8s-heading) { display: none; }
  .u8s .u8s-v2-editor-focus .u8s-page-editor { display: flex; width: 100%; height: 120px; padding: 6px 8px; gap: 4px; }
  .u8s .u8s-v2-editor-focus .u8s-pad-code { width: 100%; padding: 4px 18px 4px 4px; font-size: 9.5px; }
  .u8s .u8s-v2-editor-focus .u8s-page-scrollbar { display: none; }
  .u8s .u8s-v2-scrolled-pad .u8s-page-fold { height: 8px; }
  .u8s .u8s-v2-conversation { min-height: 0; }
  .u8s .u8s-v2-conversation .u8s-quote { flex-direction: column; align-items: flex-start; gap: 2px; padding-left: 6px; }
  .u8s .u8s-v2-conversation .u8s-reply { min-height: 0; }
  .u8s .u8s-v2-button-row { width: 290px; max-width: 290px; min-height: 52px; justify-content: center; gap: 5px; padding: 6px 8px; }
  .u8s .u8s-v2-button-row .u8s-button { min-height: 32px; padding: 4px 6px; }
  .u8s .u8s-v2-button-row .u8s-keycap { display: none; }
  .u8s .u8s-cursor-stage .u8s-cursor { width: 24px; height: 28px; }
  .u8s .u8s-v2-answer-card { gap: 3px; padding: 7px 9px 9px; }
  .u8s .u8s-v2-answer-card > [style*="opacity: 0"] { display: none; }
  .u8s .u8s-v2-answer-card .u8s-answer-lead { min-height: 0; }
  .u8s .u8s-v2-answer-card .u8s-v2-code-lines { padding: 3px 5px; }
  .u8s .u8s-v2-answer-card .is-phone-excerpt .u8s-v2-code-line { min-height: 12.5px; line-height: 1.18; }
  .u8s .u8s-v2-answer-card .is-phone-excerpt .u8s-v2-code-line:nth-child(-n+5) { display: block; }
  .u8s .u8s-v2-answer-card .is-phone-excerpt .u8s-v2-code-more { display: none; }
  .u8s .u8s-v2-answer-card .u8s-v2-verdict { margin-left: 0; }
  .u8s .u8s-v2-answer-card .u8s-v2-case { display: none; }
  .u8s .u8s-v2-on-screen { min-height: 0; }
  .u8s .u8s-v2-working-action[style*="opacity: 0"] { display: none; }
  .u8s .u8s-v2-swap { width: 290px; height: 174px; margin-inline: auto; }
  .u8s .u8s-v2-menu { min-height: 0; }
  .u8s-frame[data-scene="next"] .u8s-shot[data-shot="problem-menu"] .u8s-cursor-stage { transform: none; }
  .u8s .u8s-v2-earlier .u8s-v2-code-lines { -webkit-mask-image: none; mask-image: none; }
  .u8s .u8s-v2-earlier .u8s-v2-code-line { line-height: 1.2; }
  .u8s .u8s-v2-earlier .u8s-v2-code-line:nth-child(n+4) { display: none; }
  .u8s .u8s-v2-earlier .u8s-v2-code-line.u8s-v2-code-more { display: block; }
  .u8s .u8s-v2-practice-phone > [style*="opacity: 0"] { display: none; }
  .u8s .u8s-v2-practice { gap: 3px; }
  .u8s .u8s-v2-practice-phone .u8s-practice-evidence .u8s-button { display: none; }
  .u8s .u8s-v2-workspace-phone { width: 290px; gap: 5px; }
  .u8s .u8s-v2-workspace-phone > [style*="opacity: 0"] { display: none; }
  .u8s .u8s-v2-workspace-phone-problem { width: 290px; max-width: 290px; padding: 5px 8px; }
  .u8s .u8s-v2-workspace-phone .u8s-v2-workspace-lane,
  .u8s .u8s-v2-workspace-phone .u8s-v2-workspace-reply { width: 290px; }
  .u8s .u8s-v2-workspace-phone-line { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; }
  .u8s .u8s-v2-status-phone { width: 290px; gap: 5px; }
  .u8s .u8s-v2-status-phone > [style*="opacity: 0"] { display: none; }
  .u8s .u8s-v2-status-phone > .is-dimmed { display: none; }
  .u8s .u8s-v2-status-card { width: 290px; padding: 6px 9px; }
  .u8s .u8s-v2-status-card .u8s-lane-head,
  .u8s .u8s-v2-status-card .u8s-lane-head strong { font-size: 12px; line-height: 1.15; }
  .u8s .u8s-v2-review-phone { width: 290px; height: 174px; }
  .u8s .u8s-v2-review-phone-page { left: auto; right: 0; width: 290px; min-height: 174px; }
  .u8s .u8s-v2-review-feedback-head { flex-wrap: nowrap; align-items: center; }
  .u8s-frame[data-scene="hero"] .u8s-align-top .u8s-shot-content { top: 60px; }
  .u8s-frame[data-scene="hero"] .u8s-responsive-narrow { width: 298px; transform: translateX(-4px); }
  .u8s-frame[data-scene="hero"] .u8s-v2-hero-question-strip .u8s-lane-words,
  .u8s-frame[data-scene="hero"] .u8s-v2-hero-reply-strip .u8s-reply-text { min-height: 0; font-size: 14px; line-height: 1.05; }
  .u8s-frame[data-scene="hero"] .u8s-v2-hero-question-strip { flex-direction: row; align-items: center; }
  .u8s-frame[data-scene="hero"] .u8s-v2-hero-strip { min-height: 0; padding: 5px 8px; }
  .u8s-frame[data-scene="hero"] .u8s-v2-hero-question-strip .u8s-v2-hero-strip-head { width: 110px; flex: none; flex-direction: column; align-items: flex-start; gap: 0; }
  .u8s-frame[data-scene="hero"] .u8s-v2-hero-question-strip .u8s-lane-words { flex: 1; }
  .u8s-frame[data-scene="hero"] .u8s-v2-hero-strip .u8s-chip { min-height: 12px; line-height: 1; }
  .u8s-frame[data-scene="hero"] .u8s-v2-hero-question-strip .u8s-chip { font-size: 11px; }
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-problem,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-conversation,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-lane,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-answer-card,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-on-screen,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-next-card,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-menu,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-earlier,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-practice-phone,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-review-phone-page,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-workspace-phone,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-workspace-phone .u8s-v2-workspace-phone-problem,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-workspace-phone .u8s-v2-workspace-lane,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-workspace-phone .u8s-v2-workspace-reply,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-status-phone,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-status-phone .u8s-v2-status-card,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-pad,
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-swap,
  .u8s .u8s-v2-phone-safe { width: 236px; max-width: 236px; margin-left: auto; margin-right: 0; }
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-phone-final > .u8s-card-head { display: none; }
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-phone-final .u8s-v2-status .u8s-meta { display: none; }
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-phone-final .u8s-v2-primary { line-height: 1.05; }
  .u8s-frame[data-scene="next"] .u8s-shot[data-shot="problem-menu"] .u8s-cursor-stage { transform: translateX(54px); }
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-review-phone-page { left: auto; right: 0; }
  .u8s .u8s-responsive-pair.is-v2 .u8s-responsive-narrow .u8s-v2-editor-focus { width: 290px; max-width: 290px; margin-inline: auto; }
  .u8s-frame[data-scene="coding"] .u8s-responsive-narrow .u8s-v2-editor-focus { height: 148px; }
  .u8s-frame[data-scene="coding"] .u8s-responsive-narrow .u8s-v2-editor-focus .u8s-page-body { height: 120px; }
  .u8s-frame[data-scene="coding"] .u8s-responsive-narrow .u8s-v2-editor-focus .u8s-page-editor { height: 92px; }
  .u8s-frame[data-scene="coding"] .u8s-responsive-narrow .u8s-v2-editor-focus .u8s-pad-code { min-height: 0; height: 62px; }
}

/* Round 8: reserved heights, phone strips, status and review layout. */
.u8s .u8s-v2-reserved-problem .u8s-v2-status { min-height: 68px; }
.u8s .u8s-v2-reserved-problem .u8s-v2-status.is-done { padding: 8px 10px; }
.u8s-frame[data-scene="question"] .u8s-v2-lane,
.u8s-frame[data-scene="next"] .u8s-v2-lane { height: 130px; }
.u8s .u8s-v2-working-evidence { color: var(--s-secondary); }
.u8s .u8s-v2-two-sum .u8s-v2-status { min-height: 68px; }
.u8s .u8s-v2-two-sum .u8s-v2-status.is-done { padding: 8px 10px; }
.u8s .u8s-v2-hero-card .u8s-problem-title { min-height: 31px; }
.u8s .u8s-v2-status-problem { height: 250px; }
.u8s .u8s-v2-review-feedback-title { width: 100%; }
.u8s .u8s-v2-swap .u8s-pad-code.u8s-code-fade {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
}
.u8s .u8s-v2-scroll-crop {
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 20px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 20px), transparent 100%);
}
.u8s .u8s-v2-pad .u8s-page-copy:has(.u8s-v2-scroll-crop) { margin-bottom: 4px; }
@container (max-width: 599px) {
  .u8s-frame[data-scene="question"] .u8s-responsive-narrow .u8s-v2-reserved-conversation { height: 205px; }
  .u8s-frame[data-scene="question"] .u8s-responsive-narrow .u8s-v2-lane,
  .u8s-frame[data-scene="next"] .u8s-responsive-narrow .u8s-v2-lane { height: 87px; }
  .u8s-frame[data-scene="answer"] .u8s-responsive-narrow .u8s-v2-answer-card { height: 184px; }
  .u8s-frame[data-scene="problem"] .u8s-responsive-narrow .u8s-v2-reserved-problem { height: 198px; }
  .u8s-frame[data-scene="problem"] .u8s-responsive-narrow .u8s-v2-reserved-problem .u8s-v2-status { min-height: 0; padding: 1px 3px; }
  .u8s-frame[data-scene="problem"] .u8s-responsive-narrow .u8s-v2-reserved-problem .u8s-v2-status.is-done { padding: 1px 3px; }
  .u8s-frame[data-scene="coding"] .u8s-responsive-narrow .u8s-v2-on-screen { height: 198px; }
  .u8s-frame[data-scene="coding"] .u8s-responsive-narrow .u8s-v2-editor-focus .u8s-pad-code { font-size: 10.5px; }
  .u8s-frame[data-scene="next"] .u8s-responsive-narrow .u8s-v2-two-sum { height: 204px; }
  .u8s-frame[data-scene="practice"] .u8s-responsive-narrow .u8s-v2-practice-phone { height: 212px; }
  .u8s-frame[data-scene="status"] .u8s-responsive-narrow .u8s-v2-status-phone { height: 210px; }
  .u8s-frame[data-scene="status"] .u8s-responsive-narrow .u8s-v2-status-phone > [style*="opacity: 0"] { display: flex; visibility: hidden; }
  .u8s-frame[data-scene="status"] .u8s-responsive-narrow .u8s-v2-status-card { flex: 0 0 auto; }
  .u8s-frame[data-scene="status"] .u8s-responsive-narrow .u8s-v2-status-problem { height: auto; min-height: 72px; }
  .u8s-frame[data-scene="status"] .u8s-responsive-narrow .u8s-v2-status-list { min-height: 86px; }
  .u8s-frame[data-scene="status"] .u8s-responsive-narrow .u8s-v2-status-phone { position: relative; }
  .u8s-frame[data-scene="status"] .u8s-responsive-narrow .u8s-v2-status-list { position: absolute; top: 2px; right: 0; min-height: 0; }
  .u8s-frame[data-scene="status"] .u8s-responsive-narrow [data-actor="status-problem-previous"],
  .u8s-frame[data-scene="next"] .u8s-responsive-narrow [data-actor="next-previous"] { display: block; }
  .u8s .u8s-v2-clean-crop {
    overflow: hidden; white-space: nowrap; text-overflow: clip;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 22px), transparent 100%);
  }
  .u8s .u8s-v2-answer-card .u8s-v2-code-lines,
  .u8s .u8s-v2-earlier .u8s-v2-code-lines {
    max-height: 62px; overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 16px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 16px), transparent 100%);
  }
  .u8s .u8s-v2-earlier .u8s-v2-code-line:nth-child(n+4) { display: block; }
  .u8s .u8s-v2-review-feedback-head { align-items: stretch; gap: 2px; }
  .u8s .u8s-v2-review-feedback-title { justify-content: space-between; }
  .u8s .u8s-v2-review-feedback-head > .u8s-meta { white-space: nowrap; }
  .u8s .u8s-v2-review-phone-page { min-height: 0; }
  .u8s .u8s-v2-review-questions { height: auto; }
  .u8s-frame[data-scene="next"] .u8s-responsive-narrow .u8s-v2-two-sum > .u8s-card-head,
  .u8s-frame[data-scene="status"] .u8s-responsive-narrow .u8s-v2-status-problem > .u8s-card-head { display: none; }
  .u8s-frame[data-scene="next"] .u8s-responsive-narrow .u8s-v2-two-sum .u8s-v2-status { min-height: 24px; padding: 1px 3px; }
  .u8s-frame[data-scene="next"] .u8s-responsive-narrow .u8s-v2-two-sum .u8s-v2-status.is-done { padding: 1px 3px; }
  .u8s-frame[data-scene="workspace"] .u8s-responsive-narrow .u8s-v2-workspace-phone { height: 215px; gap: 3px; }
  .u8s-frame[data-scene="workspace"] .u8s-responsive-narrow .u8s-v2-workspace-phone-problem { padding-block: 4px; }
  .u8s-frame[data-scene="workspace"] .u8s-responsive-narrow .u8s-v2-workspace-lane { min-height: 63px; }
  .u8s-frame[data-scene="hero"] .u8s-v2-hero-question-strip { flex-direction: column; align-items: stretch; }
  .u8s-frame[data-scene="hero"] .u8s-v2-hero-strip { padding-block: 5px; }
  .u8s-frame[data-scene="hero"] .u8s-v2-hero-speaker,
  .u8s-frame[data-scene="hero"] .u8s-v2-hero-label,
  .u8s-frame[data-scene="hero"] .u8s-v2-hero-copy,
  .u8s-frame[data-scene="hero"] .u8s-v2-hero-question-strip .u8s-chip { font-size: 10px; }
  .u8s-frame[data-scene="hero"] .u8s-v2-hero-question-strip .u8s-lane-words,
  .u8s-frame[data-scene="hero"] .u8s-v2-hero-reply-strip .u8s-reply-text { line-height: .9; }
  .u8s-frame[data-scene="hero"] .u8s-v2-hero-question-strip .u8s-v2-hero-strip-head { width: auto; flex-direction: row; align-items: center; }
}

/* Round 9: phone scroll/readability fixes and composed still states. */
.u8s .u8s-v2-code-scroll { gap: 0; }
.u8s .u8s-v2-code-indent { white-space: pre; }
.u8s .u8s-v2-phone-problem-viewport {
  min-height: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}
.u8s .u8s-v2-phone-problem-scroll { gap: 4px; }
.u8s .u8s-v2-hero-reply { border: 1px solid var(--s-rule); border-left: 3px solid var(--s-accent); border-radius: 10px; }
.u8s .u8s-v2-status-problem { height: auto; min-height: 0; }
.u8s .u8s-v2-status-problem.is-current .u8s-v2-primary { opacity: 1; }

@container (max-width: 599px) {
  .u8s-frame[data-scene="problem"] .u8s-responsive-narrow .u8s-v2-phone-scroll-card {
    height: 198px; gap: 3px; padding: 6px 8px 8px;
  }
  .u8s-frame[data-scene="problem"] .u8s-responsive-narrow .u8s-v2-phone-scroll-card > .u8s-card-head { display: none; }
  .u8s-frame[data-scene="problem"] .u8s-responsive-narrow .u8s-v2-phone-problem-scroll .u8s-problem-title {
    font-size: 15px; line-height: 1.15;
  }
  .u8s-frame[data-scene="problem"] .u8s-responsive-narrow .u8s-v2-phone-problem-scroll .u8s-v2-primary {
    white-space: normal; overflow: visible; font-size: 12px; line-height: 1.16;
  }
  .u8s-frame[data-scene="problem"] .u8s-responsive-narrow .u8s-v2-phone-problem-scroll .u8s-constraints {
    flex-wrap: wrap; gap: 2px 8px;
  }
  .u8s-frame[data-scene="problem"] .u8s-responsive-narrow .u8s-v2-phone-problem-scroll .u8s-example .u8s-code {
    font-size: 9.5px; line-height: 1.2; white-space: pre;
  }

  .u8s .u8s-v2-code-indent { display: inline-block; overflow: hidden; font-size: 0; vertical-align: top; }
  .u8s .u8s-v2-code-indent.is-indent-0 { width: 0; }
  .u8s .u8s-v2-code-indent.is-indent-4 { width: 8px; }
  .u8s .u8s-v2-code-indent.is-indent-8 { width: 16px; }
  .u8s .u8s-v2-code-indent.is-indent-12 { width: 24px; }
  .u8s-frame[data-scene="answer"] .u8s-responsive-narrow .u8s-v2-answer-card .u8s-v2-code-lines,
  .u8s-frame[data-scene="next"] .u8s-responsive-narrow .u8s-v2-earlier .u8s-v2-code-lines {
    height: 63px; max-height: 63px; overflow: hidden; font-size: 9.5px; line-height: 12.5px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%);
  }
  .u8s-frame[data-scene="answer"] .u8s-responsive-narrow .u8s-v2-answer-card .u8s-v2-code-line,
  .u8s-frame[data-scene="next"] .u8s-responsive-narrow .u8s-v2-earlier .u8s-v2-code-line {
    display: block; min-height: 12.5px; line-height: 12.5px; white-space: pre;
  }
  .u8s-frame[data-scene="answer"] .u8s-responsive-narrow .u8s-v2-answer-card .u8s-v2-code-line:nth-child(n) {
    display: block;
  }
  .u8s-frame[data-scene="answer"] .u8s-responsive-narrow .u8s-v2-answer-card { height: 184px; }

  .u8s-frame[data-scene="status"] .u8s-responsive-narrow .u8s-v2-status-phone {
    position: static; height: auto; gap: 5px;
  }
  .u8s-frame[data-scene="status"] .u8s-shot[data-shot="screen-state-result"] .u8s-responsive-narrow .u8s-v2-status-phone {
    position: static; top: auto;
  }
  .u8s-frame[data-scene="status"] .u8s-responsive-narrow .u8s-v2-status-list { position: static; min-height: 0; }
  .u8s-frame[data-scene="status"] .u8s-responsive-narrow .u8s-v2-status-problem {
    height: auto; min-height: 0; gap: 3px;
  }
  .u8s-frame[data-scene="status"] .u8s-responsive-narrow .u8s-v2-status-problem > .u8s-card-head {
    display: none;
  }
  .u8s-frame[data-scene="status"] .u8s-responsive-narrow .u8s-v2-status-problem .u8s-v2-status {
    min-height: 0; padding: 1px 3px;
  }
  .u8s-frame[data-scene="status"] .u8s-responsive-narrow .u8s-v2-status-problem .u8s-v2-primary {
    font-size: 12px; line-height: 1.16;
  }
  .u8s-frame[data-scene="status"] .u8s-responsive-narrow .u8s-v2-status-list .u8s-v2-menu-row {
    min-height: 31px; padding: 3px 6px;
  }

  .u8s-frame[data-scene="workspace"] .u8s-responsive-narrow .u8s-v2-workspace-phone {
    position: static; top: auto; height: auto; gap: 3px;
  }
  .u8s-frame[data-scene="workspace"] .u8s-responsive-narrow .u8s-v2-workspace-phone-head { display: none; }
  .u8s-frame[data-scene="workspace"] .u8s-responsive-narrow .u8s-v2-workspace-phone-problem {
    padding-top: 5px; padding-bottom: 3px;
  }
  .u8s-frame[data-scene="workspace"] .u8s-responsive-narrow .u8s-v2-workspace-phone-line { display: none; }
  .u8s-frame[data-scene="workspace"] .u8s-responsive-narrow .u8s-v2-workspace-lane {
    height: auto; min-height: 0; flex: 0 0 auto;
  }
  .u8s-frame[data-scene="workspace"] .u8s-responsive-narrow .u8s-v2-workspace-reply {
    height: auto; min-height: 0; flex: 0 0 auto;
    border: 1px solid var(--s-rule); border-left: 2px solid var(--s-accent); border-radius: 8px;
  }

  .u8s-frame[data-scene="practice"] .u8s-responsive-narrow .u8s-v2-practice-phone {
    height: 218px; gap: 1px; padding-block: 4px;
  }
  .u8s-frame[data-scene="practice"] .u8s-responsive-narrow .u8s-v2-practice-phone .u8s-score-row {
    min-height: 18px; padding-block: 0; font-size: 12px;
  }
  .u8s-frame[data-scene="practice"] .u8s-responsive-narrow .u8s-v2-practice-phone .u8s-score-value { font-size: 12px; }
  .u8s-frame[data-scene="practice"] .u8s-responsive-narrow .u8s-v2-practice-phone .u8s-review-block { gap: 1px; }

  .u8s-frame[data-scene="hero"] .u8s-v2-hero-speaker,
  .u8s-frame[data-scene="hero"] .u8s-v2-hero-label,
  .u8s-frame[data-scene="hero"] .u8s-v2-hero-copy,
  .u8s-frame[data-scene="hero"] .u8s-v2-hero-question-strip .u8s-chip { font-size: 12px; line-height: 1.15; }
  .u8s-frame[data-scene="hero"] .u8s-v2-hero-question-strip .u8s-lane-words,
  .u8s-frame[data-scene="hero"] .u8s-v2-hero-reply-strip .u8s-reply-text { font-size: 12px; line-height: 1; }
  .u8s-frame[data-scene="hero"] .u8s-v2-hero-strip { gap: 0; padding: 5px 20px 4px; }

  .u8s .u8s-v2-phone-previous { white-space: pre-line; }
  .u8s .u8s-v2-review-question-row { gap: 1px; }
  .u8s .u8s-v2-review-question-row .u8s-v2-primary { font-size: 13px; }
  .u8s .u8s-v2-review-question-row .u8s-meta { color: var(--s-tertiary); }
}

/* Round 10: continuous problem pages and resolved held states. */
@keyframes u8s-status-read-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}
.u8s-frame[data-scene="status"] .u8s-shot[data-shot="screen-state-result"] .u8s-chip.is-reading::before {
  animation: u8s-status-read-pulse 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .u8s-frame[data-scene="status"] .u8s-shot[data-shot="screen-state-result"] .u8s-chip.is-reading::before {
    animation: none;
    opacity: 1;
  }
}
.u8s-frame[data-scene="status"] [data-actor="status-problem-previous"] { white-space: pre-line; }
.u8s-frame[data-scene="status"] .u8s-v2-status-problem.is-pending { min-height: 0; }

.u8s-frame[data-scene="problem"] .u8s-v2-pad .u8s-page-fold { display: none; }
.u8s-frame[data-scene="problem"] .u8s-v2-pad,
.u8s-frame[data-scene="problem"] .u8s-v2-problem-pair .u8s-v2-pane-only { height: 174px; }
.u8s-frame[data-scene="problem"] .u8s-v2-pad .u8s-page-body,
.u8s-frame[data-scene="problem"] .u8s-v2-problem-pair .u8s-v2-pane-only .u8s-page-body { height: 134px; }
.u8s-frame[data-scene="problem"] .u8s-v2-scroll-crop {
  -webkit-mask-image: none;
  mask-image: none;
}

.u8s-frame[data-scene="answer"] .u8s-responsive-wide .u8s-v2-code-lines {
  max-height: none;
  -webkit-mask-image: none;
  mask-image: none;
}
.u8s-frame[data-scene="coding"] .u8s-v2-on-screen { min-height: 0; }
.u8s .u8s-v2-control-context {
  width: 640px;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px;
}
.u8s .u8s-v2-control-context > .u8s-v2-primary,
.u8s .u8s-v2-control-context > .u8s-chip { flex: 0 0 100%; }
.u8s-frame[data-scene="hero"] .u8s-v2-hero-context {
  overflow: hidden;
  color: var(--s-tertiary);
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@container (max-width: 599px) {
  .u8s-frame[data-scene="problem"] .u8s-responsive-narrow .u8s-v2-pad { height: 105px; }
  .u8s-frame[data-scene="problem"] .u8s-responsive-narrow .u8s-v2-pad .u8s-page-body { height: 79px; }
  .u8s-frame[data-scene="problem"] .u8s-responsive-narrow .u8s-v2-pad .u8s-page-copy { padding-block: 8px; }
  .u8s-frame[data-scene="problem"] .u8s-shot[data-shot="read"] .u8s-responsive-narrow .u8s-chip {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    align-items: flex-start;
    white-space: normal;
  }
  .u8s-frame[data-scene="problem"] .u8s-shot[data-shot="read"] .u8s-responsive-narrow .u8s-v2-status {
    min-height: 36px;
  }

  .u8s-frame[data-scene="answer"] .u8s-responsive-narrow .u8s-v2-answer-card {
    height: 204px;
  }
  .u8s-frame[data-scene="answer"] .u8s-responsive-narrow .u8s-v2-answer-card .u8s-v2-code-lines {
    height: 73px;
    max-height: 73px;
    font-size: 11px;
    line-height: 12.5px;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .u8s-frame[data-scene="answer"] .u8s-responsive-narrow .u8s-v2-answer-card .u8s-v2-code-line {
    min-height: 12.5px;
    line-height: 12.5px;
  }
  .u8s-frame[data-scene="next"] .u8s-responsive-narrow .u8s-v2-earlier .u8s-v2-code-lines {
    font-size: 11px;
    line-height: 14px;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .u8s-frame[data-scene="next"] .u8s-responsive-narrow .u8s-v2-earlier .u8s-v2-code-line {
    min-height: 14px;
    line-height: 14px;
  }
  .u8s-frame[data-scene="problem"] .u8s-responsive-narrow .u8s-v2-phone-scroll-card > .u8s-card-head,
  .u8s-frame[data-scene="next"] .u8s-responsive-narrow .u8s-v2-two-sum > .u8s-card-head,
  .u8s-frame[data-scene="status"] .u8s-responsive-narrow .u8s-v2-status-problem > .u8s-card-head,
  .u8s-frame[data-scene="workspace"] .u8s-responsive-narrow .u8s-v2-workspace-phone-head {
    display: flex;
  }
  .u8s-frame[data-scene="next"] .u8s-responsive-narrow .u8s-v2-two-sum {
    gap: 1px;
    padding-bottom: 5px;
  }
  .u8s-frame[data-scene="next"] .u8s-responsive-narrow .u8s-v2-two-sum > * { flex: 0 0 auto; }
  .u8s-frame[data-scene="next"] .u8s-responsive-narrow [data-actor="next-previous"] { display: none; }
  .u8s-frame[data-scene="status"] .u8s-responsive-narrow .u8s-v2-status-problem > .u8s-card-head {
    min-height: 16px;
    padding-block: 0;
  }
  .u8s-frame[data-scene="status"] .u8s-responsive-narrow .u8s-v2-status-list > .u8s-card-head {
    min-height: 24px;
    padding: 2px 4px;
  }
  .u8s-frame[data-scene="status"] .u8s-responsive-narrow .u8s-v2-status-list .u8s-v2-menu-row {
    min-height: 24px;
    padding: 1px 4px;
  }
  .u8s .u8s-v2-control-context {
    width: 290px;
    max-width: 290px;
    gap: 5px;
    padding: 7px 9px;
  }
  .u8s .u8s-v2-control-context > .u8s-v2-primary { font-size: 13px; line-height: 1.2; }
  .u8s-frame[data-scene="hero"] .u8s-v2-hero-reply-strip { padding: 4px 20px; }
  .u8s-frame[data-scene="hero"] .u8s-v2-hero-reply-strip .u8s-v2-hero-strip-head { display: none; }
  .u8s-frame[data-scene="hero"] .u8s-v2-hero-reply-strip .u8s-v2-hero-context { font-size: 9px; line-height: 1; }
  .u8s-frame[data-scene="hero"] .u8s-v2-hero-reply-strip .u8s-v2-hero-label,
  .u8s-frame[data-scene="hero"] .u8s-v2-hero-reply-strip .u8s-v2-hero-copy { font-size: 10px; line-height: 1; }
  .u8s-frame[data-scene="hero"] .u8s-v2-hero-reply-strip .u8s-reply-text { font-size: 11px; line-height: .9; }
}

/* Round 10 (lead): the status still never shows sentence 2, constraints or examples, and its pending card shows
   no title or statement; take them out of the layout so the cards have no empty block. */
.u8s-frame[data-scene="status"] .u8s-v2-status-problem .u8s-v2-new,
.u8s-frame[data-scene="status"] .u8s-v2-status-problem .u8s-constraints,
.u8s-frame[data-scene="status"] .u8s-v2-status-problem .u8s-example,
.u8s-frame[data-scene="status"] .u8s-v2-status-problem.is-pending .u8s-problem-title,
.u8s-frame[data-scene="status"] .u8s-v2-status-problem.is-pending .u8s-v2-primary { display: none; }

/* Round 11: app-state parity and deliberate whole-line phone excerpts. */
.u8s-frame[data-scene="status"] .u8s-v2-status-problem .u8s-v2-new,
.u8s-frame[data-scene="status"] .u8s-v2-status-problem .u8s-constraints,
.u8s-frame[data-scene="status"] .u8s-v2-status-problem .u8s-example,
.u8s-frame[data-scene="status"] .u8s-v2-status-problem.is-pending .u8s-problem-title,
.u8s-frame[data-scene="status"] .u8s-v2-status-problem.is-pending .u8s-v2-primary { display: flex; }
.u8s-frame[data-scene="status"] .u8s-v2-status-problem.is-pending .u8s-problem-title { display: block; }
.u8s-frame[data-scene="status"] .u8s-v2-status-problem.is-pending .u8s-v2-primary,
.u8s-frame[data-scene="next"] .u8s-v2-next-carried { opacity: .64; }
.u8s-frame[data-scene="next"] .u8s-v2-next-carried { gap: 8px; }

.u8s .u8s-v2-coding-mode { width: 640px; gap: 12px; }
.u8s .u8s-v2-coding-mode-problem { height: 350px; }
.u8s .u8s-v2-coding-mode-problem .u8s-example { display: none; }
.u8s .u8s-v2-coding-mode-controls { align-self: flex-end; }
.u8s-frame[data-scene="next"] .u8s-v2-two-sum { position: relative; }
.u8s-frame[data-scene="next"] .u8s-v2-next-carried {
  position: absolute; inset: 175px 20px auto; gap: 6px;
}
.u8s-frame[data-scene="next"] .u8s-v2-next-carried .u8s-example { display: none; }

@container (max-width: 599px) {
  .u8s-frame[data-scene="hero"] .u8s-v2-hero-reply-strip {
    min-height: 49px; gap: 2px; padding: 4px 8px;
  }
  .u8s-frame[data-scene="hero"] .u8s-v2-hero-reply-strip .u8s-v2-hero-strip-head {
    display: flex; min-height: 12px;
  }
  .u8s-frame[data-scene="hero"] .u8s-v2-hero-reply-strip .u8s-v2-hero-label,
  .u8s-frame[data-scene="hero"] .u8s-v2-hero-reply-strip .u8s-v2-hero-copy {
    font-size: 10px; line-height: 1.15;
  }
  .u8s-frame[data-scene="hero"] .u8s-v2-hero-reply-strip .u8s-reply-text {
    font-size: 11px; line-height: 1.15;
  }

  .u8s-frame[data-scene="question"] .u8s-v2-conversation .u8s-reply {
    flex: 0 0 auto; padding-bottom: 9px;
  }

  .u8s-frame[data-scene="problem"] .u8s-responsive-narrow .u8s-v2-phone-final {
    height: 168px; max-height: 168px; gap: 2px; padding: 4px 8px 7px; overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 7px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 7px), transparent 100%);
  }
  .u8s-frame[data-scene="problem"] .u8s-responsive-narrow .u8s-v2-phone-final > .u8s-card-head {
    min-height: 20px; margin-inline: -8px; padding: 1px 8px;
  }
  .u8s-frame[data-scene="problem"] .u8s-responsive-narrow .u8s-v2-phone-final .u8s-v2-status {
    min-height: 14px; padding: 0 2px;
  }
  .u8s-frame[data-scene="problem"] .u8s-responsive-narrow .u8s-v2-phone-final .u8s-v2-status .u8s-meta { display: none; }
  .u8s-frame[data-scene="problem"] .u8s-responsive-narrow .u8s-v2-phone-final > [data-actor="problem-first"] {
    display: none;
  }
  .u8s-frame[data-scene="problem"] .u8s-responsive-narrow .u8s-v2-phone-final .u8s-problem-title {
    font-size: 14px; line-height: 16px;
  }
  .u8s-frame[data-scene="problem"] .u8s-responsive-narrow .u8s-v2-phone-final .u8s-v2-new {
    font-size: 11px; line-height: 13px; padding: 2px 4px;
  }
  .u8s-frame[data-scene="problem"] .u8s-responsive-narrow .u8s-v2-phone-final .u8s-constraints {
    font-size: 10px; line-height: 12px;
  }
  .u8s-frame[data-scene="problem"] .u8s-responsive-narrow .u8s-v2-phone-final .u8s-example .u8s-code {
    font-size: 9.5px; line-height: 12px; padding: 2px 3px; white-space: pre;
  }

  .u8s-frame[data-scene="answer"] .u8s-responsive-narrow .u8s-v2-answer-card {
    height: 204px; max-height: 204px;
  }
  .u8s-frame[data-scene="answer"] .u8s-responsive-narrow .u8s-v2-answer-card .u8s-v2-code-lines {
    height: auto; max-height: none; overflow: visible; font-size: 9.5px; line-height: 12px;
  }
  .u8s-frame[data-scene="answer"] .u8s-responsive-narrow .u8s-v2-answer-card .u8s-v2-code-line {
    min-height: 12px; line-height: 12px;
  }
  .u8s-frame[data-scene="answer"] .u8s-responsive-narrow .u8s-v2-answer-card .u8s-v2-code-line:nth-child(n+6) {
    display: none;
  }

  .u8s-frame[data-scene="next"] .u8s-responsive-narrow .u8s-v2-earlier .u8s-v2-code-lines {
    height: auto; max-height: none; overflow: visible; font-size: 9.5px; line-height: 12px;
  }
  .u8s-frame[data-scene="next"] .u8s-responsive-narrow .u8s-v2-earlier .u8s-v2-code-line {
    min-height: 12px; line-height: 12px;
  }
  .u8s-frame[data-scene="next"] .u8s-responsive-narrow .u8s-v2-earlier .u8s-v2-code-line:nth-child(n+4) {
    display: none;
  }

  .u8s-frame[data-scene="coding"] .u8s-responsive-narrow .u8s-v2-coding-mode {
    width: 230px; gap: 5px; margin-left: auto; transform: translateX(48px);
  }
  .u8s-frame[data-scene="coding"] .u8s-responsive-narrow .u8s-v2-coding-mode-problem {
    width: 230px; height: 104px; gap: 2px; padding: 4px 8px 7px; overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 7px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 7px), transparent 100%);
  }
  .u8s-frame[data-scene="coding"] .u8s-responsive-narrow .u8s-v2-coding-mode-problem > .u8s-card-head {
    min-height: 20px; margin-inline: -8px; padding: 1px 8px;
  }
  .u8s-frame[data-scene="coding"] .u8s-responsive-narrow .u8s-v2-coding-mode-problem .u8s-v2-status {
    min-height: 14px; padding: 0 2px;
  }
  .u8s-frame[data-scene="coding"] .u8s-responsive-narrow .u8s-v2-coding-mode-problem .u8s-problem-title {
    font-size: 14px; line-height: 16px;
  }
  .u8s-frame[data-scene="coding"] .u8s-responsive-narrow .u8s-v2-coding-mode-problem .u8s-v2-primary {
    font-size: 11px; line-height: 13px;
  }
  .u8s-frame[data-scene="coding"] .u8s-responsive-narrow .u8s-v2-coding-mode-problem .u8s-v2-new,
  .u8s-frame[data-scene="coding"] .u8s-responsive-narrow .u8s-v2-coding-mode-problem .u8s-constraints,
  .u8s-frame[data-scene="coding"] .u8s-responsive-narrow .u8s-v2-coding-mode-problem .u8s-example {
    display: none;
  }
  .u8s-frame[data-scene="coding"] .u8s-responsive-narrow .u8s-v2-coding-mode-controls {
    width: 230px; min-height: 38px; padding: 3px 6px;
  }
  .u8s-frame[data-scene="coding"] .u8s-responsive-narrow .u8s-v2-coding-mode-controls .u8s-button {
    min-height: 30px;
  }

  .u8s-frame[data-scene="status"] .u8s-responsive-narrow .u8s-v2-status-problem.is-current {
    height: auto; overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 7px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 7px), transparent 100%);
  }
  .u8s-frame[data-scene="status"] .u8s-responsive-narrow .u8s-v2-status-problem.is-pending {
    height: auto; max-height: none; overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 7px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 7px), transparent 100%);
  }
  .u8s-frame[data-scene="status"] .u8s-responsive-narrow [data-actor="status-problem-previous"] {
    font-size: 10px; line-height: 12px; white-space: normal;
  }
  .u8s-frame[data-scene="status"] .u8s-responsive-narrow .u8s-v2-status-problem .u8s-problem-title {
    font-size: 13px; line-height: 15px;
  }
  .u8s-frame[data-scene="status"] .u8s-responsive-narrow .u8s-v2-status-problem .u8s-v2-primary {
    font-size: 10px; line-height: 12px;
  }
  .u8s-frame[data-scene="status"] .u8s-responsive-narrow .u8s-v2-status-problem .u8s-constraints,
  .u8s-frame[data-scene="status"] .u8s-responsive-narrow .u8s-v2-status-problem .u8s-example {
    font-size: 9.5px; line-height: 11px;
  }
  .u8s-frame[data-scene="status"] .u8s-responsive-narrow .u8s-v2-status-problem .u8s-example .u8s-code {
    font-size: 9.5px; line-height: 11px; padding: 2px 3px;
  }
  .u8s-frame[data-scene="status"] .u8s-shot[data-shot="move-on-cause"] .u8s-responsive-narrow .u8s-v2-status-problem .u8s-constraints,
  .u8s-frame[data-scene="status"] .u8s-shot[data-shot="move-on-cause"] .u8s-responsive-narrow .u8s-v2-status-problem .u8s-example,
  .u8s-frame[data-scene="status"] .u8s-shot[data-shot="screen-state-result"] .u8s-responsive-narrow .u8s-v2-status-problem .u8s-v2-new,
  .u8s-frame[data-scene="status"] .u8s-shot[data-shot="screen-state-result"] .u8s-responsive-narrow .u8s-v2-status-problem .u8s-constraints,
  .u8s-frame[data-scene="status"] .u8s-shot[data-shot="screen-state-result"] .u8s-responsive-narrow .u8s-v2-status-problem .u8s-example {
    display: none;
  }

  .u8s-frame[data-scene="next"] .u8s-responsive-narrow .u8s-v2-next-carried {
    max-height: none; gap: 2px; overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 7px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 7px), transparent 100%);
  }
  .u8s-frame[data-scene="next"] .u8s-responsive-narrow .u8s-v2-next-carried .u8s-problem-title {
    font-size: 13px; line-height: 15px;
  }
  .u8s-frame[data-scene="next"] .u8s-responsive-narrow .u8s-v2-next-carried .u8s-v2-primary {
    font-size: 10px; line-height: 12px;
  }
  .u8s-frame[data-scene="next"] .u8s-responsive-narrow .u8s-v2-next-carried .u8s-v2-new,
  .u8s-frame[data-scene="next"] .u8s-responsive-narrow .u8s-v2-next-carried .u8s-constraints,
  .u8s-frame[data-scene="next"] .u8s-responsive-narrow .u8s-v2-next-carried .u8s-example {
    display: none;
  }
  .u8s-frame[data-scene="next"] .u8s-responsive-narrow .u8s-v2-next-carried > .u8s-v2-primary:not(.u8s-v2-new) {
    display: none;
  }

  .u8s-frame[data-scene="workspace"] .u8s-responsive-narrow .u8s-v2-workspace-phone-line {
    display: block; height: auto; overflow: visible; white-space: normal; text-overflow: clip;
    font-size: 12px; line-height: 14px;
  }
  .u8s-frame[data-scene="workspace"] .u8s-responsive-narrow .u8s-v2-workspace-phone { gap: 3px; }

  .u8s-frame[data-scene="status"] .u8s-shot[data-shot="screen-state-result"] .u8s-responsive-narrow .u8s-v2-status-list {
    gap: 2px; padding: 4px 6px;
  }
  .u8s-frame[data-scene="status"] .u8s-shot[data-shot="screen-state-result"] .u8s-responsive-narrow .u8s-v2-status-list > .u8s-card-head {
    min-height: 20px; padding: 0 3px;
  }
  .u8s-frame[data-scene="status"] .u8s-shot[data-shot="screen-state-result"] .u8s-responsive-narrow .u8s-v2-status-list .u8s-v2-menu-list {
    gap: 1px; padding: 2px;
  }
  .u8s-frame[data-scene="status"] .u8s-shot[data-shot="screen-state-result"] .u8s-responsive-narrow .u8s-v2-status-list .u8s-v2-menu-row {
    min-height: 20px; padding: 0 4px;
  }

  .u8s-frame[data-scene="problem"] .u8s-shot[data-shot="scroll"] .u8s-responsive-narrow .u8s-v2-pad {
    height: 145px;
  }
  .u8s-frame[data-scene="problem"] .u8s-shot[data-shot="scroll"] .u8s-responsive-narrow .u8s-v2-pad .u8s-page-body {
    height: 119px;
  }
  .u8s-frame[data-scene="coding"] .u8s-shot[data-shot="typing"] .u8s-responsive-narrow .u8s-v2-editor-focus {
    height: 105px;
  }
  .u8s-frame[data-scene="coding"] .u8s-shot[data-shot="typing"] .u8s-responsive-narrow .u8s-v2-editor-focus .u8s-page-body {
    height: 79px;
  }
  .u8s-frame[data-scene="coding"] .u8s-shot[data-shot="typing"] .u8s-responsive-narrow .u8s-page-copy-content > .u8s-heading {
    display: none;
  }
  .u8s-frame[data-scene="next"] .u8s-responsive-narrow .u8s-v2-next-carried .u8s-problem-title {
    display: none;
  }
  .u8s-frame[data-scene="next"] .u8s-responsive-narrow [data-actor="next-previous"] {
    display: block; font-size: 10px; line-height: 12px; white-space: normal;
  }
  .u8s-frame[data-scene="next"] .u8s-responsive-narrow .u8s-v2-two-sum > .u8s-example {
    display: none;
  }
  .u8s-frame[data-scene="workspace"] .u8s-responsive-narrow .u8s-v2-workspace-phone {
    scale: .98;
  }
  .u8s-frame[data-scene="status"] .u8s-responsive-narrow .u8s-v2-status-phone {
    scale: .95;
  }
  .u8s-frame[data-scene="status"] .u8s-shot[data-shot="screen-state-result"] .u8s-responsive-narrow .u8s-v2-status-list .u8s-v2-menu-row {
    padding-inline: 6px;
  }
  .u8s-frame[data-scene="status"] .u8s-shot[data-shot="screen-state-result"] .u8s-responsive-narrow .u8s-v2-status-list .u8s-v2-menu-list {
    padding-block: 4px;
  }
}

.u8s-frame[data-scene="problem"] .u8s-shot[data-shot="scroll"] .u8s-responsive-wide .u8s-v2-pad {
  height: 240px;
}
.u8s-frame[data-scene="problem"] .u8s-shot[data-shot="scroll"] .u8s-responsive-wide .u8s-v2-pad .u8s-page-body {
  height: 200px;
}

/* Round 12: growing cards keep their final top anchor. Future blocks leave
   layout until they arrive, so early frames do not reserve an empty panel. */
.u8s-frame[data-scene="hero"] .u8s-v2-hero-card,
.u8s-frame[data-scene="problem"] .u8s-v2-reserved-problem,
.u8s-frame[data-scene="answer"] .u8s-v2-answer-card,
.u8s-frame[data-scene="next"] .u8s-v2-two-sum,
.u8s-frame[data-scene="coding"] .u8s-v2-on-screen,
.u8s-frame[data-scene="coding"] .u8s-v2-next-card {
  height: auto;
  min-height: 0;
  max-height: none;
}
.u8s-frame[data-scene="problem"] .u8s-v2-problem-pair {
  align-items: flex-start;
}
.u8s-frame[data-scene="problem"] .u8s-v2-problem-pair .u8s-v2-problem {
  height: auto;
}
.u8s-frame[data-scene="hero"] .u8s-v2-hero-card > [style^="opacity: 0;"],
.u8s-frame[data-scene="problem"] .u8s-v2-problem > [style^="opacity: 0;"],
.u8s-frame[data-scene="answer"] .u8s-v2-answer-card > [style^="opacity: 0;"],
.u8s-frame[data-scene="answer"] .u8s-v2-code-line[style^="opacity: 0;"],
.u8s-frame[data-scene="answer"] .u8s-v2-verdict > [style^="opacity: 0;"],
.u8s-frame[data-scene="coding"] .u8s-v2-on-screen > [style^="opacity: 0;"],
.u8s-frame[data-scene="next"] .u8s-v2-two-sum > [style^="opacity: 0;"],
.u8s-frame[data-scene="review"] .u8s-v2-review > [style^="opacity: 0;"] {
  display: none;
}
.u8s-frame[data-scene="answer"] .u8s-v2-answer-card .u8s-answer-status {
  color: var(--s-secondary);
  font-weight: 550;
}

.u8s-frame[data-scene="answer"] .u8s-shot[data-shot="answer-card"] .u8s-shot-content,
.u8s-frame[data-scene="problem"] .u8s-shot[data-shot="read"] .u8s-shot-content,
.u8s-frame[data-scene="problem"] .u8s-shot[data-shot="updated"] .u8s-shot-content,
.u8s-frame[data-scene="coding"] .u8s-shot[data-shot="on-screen"] .u8s-shot-content,
.u8s-frame[data-scene="coding"] .u8s-shot[data-shot="next-step"] .u8s-shot-content,
.u8s-frame[data-scene="next"] .u8s-shot[data-shot="new-problem"] .u8s-shot-content,
.u8s-frame[data-scene="review"] .u8s-shot[data-shot="saved-interview"] .u8s-shot-content {
  transform-origin: center top;
  transform: translate(calc(-50% + var(--u8s-shot-x, 0px)), var(--u8s-shot-y, 0px)) scale(var(--u8s-shot-scale, 1));
}
.u8s-frame[data-scene="answer"] .u8s-shot[data-shot="answer-card"] .u8s-shot-content { top: 120px; }
.u8s-frame[data-scene="problem"] .u8s-shot[data-shot="read"] .u8s-shot-content { top: 322px; }
.u8s-frame[data-scene="problem"] .u8s-shot[data-shot="updated"] .u8s-shot-content { top: 145px; }
.u8s-frame[data-scene="coding"] .u8s-shot[data-shot="on-screen"] .u8s-shot-content { top: 284px; }
.u8s-frame[data-scene="coding"] .u8s-shot[data-shot="next-step"] .u8s-shot-content { top: 288px; }
.u8s-frame[data-scene="next"] .u8s-shot[data-shot="new-problem"] .u8s-shot-content { top: 220px; }
.u8s-frame[data-scene="review"] .u8s-shot[data-shot="saved-interview"] .u8s-shot-content { top: 160px; }
.u8s-frame[data-scene="next"] .u8s-shot[data-shot="carried-problem"] .u8s-v2-two-sum,
.u8s-frame[data-scene="next"] .u8s-shot[data-shot="new-problem"] .u8s-v2-two-sum {
  height: auto; max-height: none;
}
.u8s-frame[data-scene="next"] .u8s-shot[data-shot="carried-problem"] .u8s-responsive-wide .u8s-v2-two-sum {
  height: 420px;
}
.u8s-frame[data-scene="hero"] .u8s-v2-hero-card {
  gap: 2px; padding-bottom: 10px;
}
.u8s-frame[data-scene="hero"] .u8s-v2-hero-card > .u8s-card-head { min-height: 30px; }
.u8s-frame[data-scene="hero"] .u8s-v2-hero-card .u8s-problem-title { font-size: 24px; line-height: 1.12; }
.u8s-frame[data-scene="hero"] .u8s-v2-hero-card .u8s-v2-primary { font-size: 20px; line-height: 1.15; }

/* Coding phone: the shot is the editor, at final type size, with three full
   code lines. The Problem status owns its row and cannot collide with title. */
@container (max-width: 599px) {
  .u8s-frame[data-scene="coding"] .u8s-shot[data-shot="typing"] .u8s-responsive-narrow .u8s-v2-editor-focus {
    width: 290px; max-width: 290px; height: 105px; margin-inline: auto;
  }
  .u8s-frame[data-scene="coding"] .u8s-shot[data-shot="typing"] .u8s-responsive-narrow .u8s-v2-editor-focus .u8s-page-body {
    height: 79px;
  }
  .u8s-frame[data-scene="coding"] .u8s-shot[data-shot="typing"] .u8s-responsive-narrow .u8s-v2-editor-focus .u8s-page-copy {
    display: none;
  }
  .u8s-frame[data-scene="coding"] .u8s-shot[data-shot="typing"] .u8s-responsive-narrow .u8s-v2-editor-focus .u8s-page-editor {
    display: flex; width: 100%; height: 79px; padding: 5px 8px; gap: 3px;
  }
  .u8s-frame[data-scene="coding"] .u8s-shot[data-shot="typing"] .u8s-responsive-narrow .u8s-v2-editor-focus .u8s-pad-code {
    width: 100%; height: 48px; min-height: 48px; padding: 2px 16px 2px 2px;
    font-size: 10.5px; line-height: 14px;
  }
  .u8s-frame[data-scene="coding"] .u8s-responsive-narrow .u8s-v2-coding-mode-problem {
    height: auto; max-height: none; gap: 4px; padding: 5px 8px 7px;
    -webkit-mask-image: none; mask-image: none;
  }
  .u8s-frame[data-scene="coding"] .u8s-responsive-narrow .u8s-v2-coding-mode-problem > .u8s-card-head {
    display: none;
  }
  .u8s-frame[data-scene="coding"] .u8s-responsive-narrow .u8s-v2-coding-mode-problem .u8s-v2-status {
    width: max-content; max-width: 100%; min-height: 18px; padding: 2px 4px; flex: none;
  }
  .u8s-frame[data-scene="coding"] .u8s-responsive-narrow .u8s-v2-coding-mode-problem .u8s-problem-title {
    margin-top: 1px; font-size: 14px; line-height: 17px;
  }
  .u8s-frame[data-scene="coding"] .u8s-responsive-narrow .u8s-v2-coding-mode-problem .u8s-v2-primary {
    font-size: 10px; line-height: 11px;
  }

  .u8s-frame[data-scene="problem"] .u8s-responsive-narrow .u8s-v2-problem-read {
    height: auto; max-height: none; gap: 4px; padding: 6px 9px 9px;
    -webkit-mask-image: none; mask-image: none;
  }
  .u8s-frame[data-scene="problem"] .u8s-responsive-narrow .u8s-v2-phone-final {
    height: auto; max-height: none;
  }
  .u8s-frame[data-scene="problem"] .u8s-responsive-narrow .u8s-v2-problem-read > .u8s-card-head {
    display: flex;
  }
  .u8s-frame[data-scene="problem"] .u8s-responsive-narrow .u8s-v2-problem-read .u8s-v2-primary {
    font-size: 12px; line-height: 14px;
  }
  .u8s-frame[data-scene="problem"] .u8s-shot[data-shot="scroll"] .u8s-responsive-narrow .u8s-v2-pad {
    height: 106px;
  }
  .u8s-frame[data-scene="problem"] .u8s-shot[data-shot="scroll"] .u8s-responsive-narrow .u8s-v2-pad .u8s-page-body {
    height: 80px;
  }

  .u8s-frame[data-scene="answer"] .u8s-shot[data-shot="answer-card"] .u8s-shot-content { top: 60px; }
  .u8s-frame[data-scene="problem"] .u8s-shot[data-shot="read"] .u8s-shot-content { top: 60px; }
  .u8s-frame[data-scene="problem"] .u8s-shot[data-shot="updated"] .u8s-shot-content { top: 60px; }
  .u8s-frame[data-scene="coding"] .u8s-shot[data-shot="on-screen"] .u8s-shot-content { top: 60px; }
  .u8s-frame[data-scene="coding"] .u8s-shot[data-shot="next-step"] .u8s-shot-content { top: 184px; }
  .u8s-frame[data-scene="next"] .u8s-shot[data-shot="new-problem"] .u8s-shot-content { top: 60px; }
  .u8s-frame[data-scene="review"] .u8s-shot[data-shot="saved-interview"] .u8s-shot-content { top: 60px; }

  .u8s-frame[data-scene="answer"] .u8s-responsive-narrow .u8s-v2-answer-card {
    height: auto; max-height: none;
  }
  .u8s-frame[data-scene="answer"] .u8s-responsive-narrow .u8s-v2-answer-card .u8s-v2-code-scroll::after,
  .u8s-frame[data-scene="next"] .u8s-responsive-narrow .u8s-v2-earlier .u8s-v2-code-scroll::after {
    content: "…"; display: block; min-height: 12px; line-height: 12px; color: var(--s-tertiary);
  }
  .u8s-frame[data-scene="coding"] .u8s-responsive-narrow .u8s-v2-on-screen,
  .u8s-frame[data-scene="coding"] .u8s-responsive-narrow .u8s-v2-next-card {
    height: auto; min-height: 0; max-height: none;
  }

  .u8s-frame[data-scene="status"] .u8s-responsive-narrow .u8s-v2-status-phone,
  .u8s-frame[data-scene="workspace"] .u8s-responsive-narrow .u8s-v2-workspace-phone {
    scale: 1;
  }
  .u8s-frame[data-scene="workspace"] .u8s-responsive-narrow .u8s-v2-workspace-phone {
    gap: 1px;
  }
  .u8s-frame[data-scene="status"] .u8s-responsive-narrow [data-actor="status-problem-previous"] {
    font-size: 12px; line-height: 14px;
  }
  .u8s-frame[data-scene="status"] .u8s-responsive-narrow .u8s-v2-status-problem .u8s-v2-primary {
    font-size: 12px; line-height: 14px;
  }
  .u8s-frame[data-scene="status"] .u8s-shot[data-shot="move-on-cause"] .u8s-responsive-narrow .u8s-v2-status-problem .u8s-v2-new {
    display: none;
  }

  .u8s-frame[data-scene="next"] .u8s-responsive-narrow .u8s-v2-two-sum {
    height: auto; max-height: none;
  }
  .u8s-frame[data-scene="next"] .u8s-shot[data-shot="carried-problem"] .u8s-responsive-narrow .u8s-v2-next-carried .u8s-problem-title {
    display: block;
  }
  .u8s-frame[data-scene="next"] .u8s-shot[data-shot="carried-problem"] .u8s-responsive-narrow .u8s-v2-next-carried > .u8s-v2-primary:not(.u8s-v2-new) {
    display: block;
  }
  .u8s-frame[data-scene="next"] .u8s-responsive-narrow .u8s-v2-menu {
    padding-block: 7px;
  }
  .u8s-frame[data-scene="next"] .u8s-responsive-narrow .u8s-v2-menu-row {
    min-height: 34px; padding-block: 4px;
  }
}

/* Round 13 (lead): on the phone the carried-over card keeps showing the previous record's title and first
   sentence under its "waiting for the new screen" line, as the desktop and the status still do. */
.u8s-frame[data-scene="next"] .u8s-shot[data-shot="carried-problem"] .u8s-responsive-narrow .u8s-v2-next-carried {
  position: static; display: flex; flex-direction: column; opacity: .64; max-height: none; overflow: visible; padding-top: 2px; -webkit-mask-image: none; mask-image: none;
}

/* Round 15 (lead): the phone carried-over card is the cause shot of Next; set it at the phone floors (12 px
   secondary, 15 px title) and keep only the previous problem's title under the waiting line. */
.u8s-frame[data-scene="next"] .u8s-shot[data-shot="carried-problem"] .u8s-responsive-narrow [data-actor="next-previous"] {
  font-size: 12px; line-height: 16px;
}
.u8s-frame[data-scene="next"] .u8s-shot[data-shot="carried-problem"] .u8s-responsive-narrow .u8s-v2-next-carried .u8s-problem-title {
  font-size: 15px; line-height: 19px;
}
.u8s-frame[data-scene="next"] .u8s-shot[data-shot="carried-problem"] .u8s-responsive-narrow .u8s-v2-next-carried > .u8s-v2-primary:not(.u8s-v2-new) {
  display: none;
}

/* Round 16 (lead): the answer scene's action row stays on one line on desktop when Stop appears, as the
   app's action bar does (overlay.html 1187-1189). */
.u8s-frame[data-scene="answer"] .u8s-responsive-wide .u8s-v2-control-context { width: auto; flex-wrap: nowrap; }

/* Round 17 (lead): the phone answer excerpt shows the function's shape, its first four lines, a "…" row,
   then `return out`, instead of stopping at an `if` under the passed check. */
.u8s-frame[data-scene="answer"] .u8s-responsive-narrow .u8s-v2-answer-card .u8s-v2-code-scroll::after { content: none; }
.u8s-frame[data-scene="answer"] .u8s-responsive-narrow .u8s-v2-answer-card .u8s-v2-code-line:nth-child(n+5) { display: none; }
.u8s-frame[data-scene="answer"] .u8s-responsive-narrow .u8s-v2-answer-card .u8s-v2-code-line:nth-child(9) { display: block; }
.u8s-frame[data-scene="answer"] .u8s-responsive-narrow .u8s-v2-answer-card .u8s-v2-code-line:nth-child(9)::before {
  content: "…"; display: block; min-height: 12px; line-height: 12px; color: var(--s-tertiary); padding-left: 8px;
}

/* Round 18 (lead): phone hero reply at 13 px (was 11) within the strip's two lines; glyphs laid out without hinting so
   scaled text keeps even letter gaps; the archived answer on the phone ends on `return out` like the answer. */
.u8s { text-rendering: geometricPrecision; }
.u8s-frame[data-scene="hero"] .u8s-responsive-narrow .u8s-v2-hero-reply-strip .u8s-reply-text,
.u8s-frame[data-scene="hero"] .u8s-v2-hero-reply-strip .u8s-reply-text.u8s-reply-text { font-size: 13px; line-height: 13px; }
.u8s-frame[data-scene="next"] .u8s-responsive-narrow .u8s-v2-earlier .u8s-v2-code-scroll::after { content: none; }
.u8s-frame[data-scene="next"] .u8s-responsive-narrow .u8s-v2-earlier .u8s-v2-code-line:nth-child(n+5) { display: none; }
.u8s-frame[data-scene="next"] .u8s-responsive-narrow .u8s-v2-earlier .u8s-v2-code-line:nth-child(-n+4),
.u8s-frame[data-scene="next"] .u8s-responsive-narrow .u8s-v2-earlier .u8s-v2-code-line:nth-child(9) { display: block; }
.u8s-frame[data-scene="next"] .u8s-responsive-narrow .u8s-v2-earlier .u8s-v2-code-line:nth-child(9)::before {
  content: "…"; display: block; min-height: 12px; line-height: 12px; color: var(--s-tertiary); padding-left: 8px;
}


/* premium review sheets (practice review, saved interview) */
.u8s .u8s-rv { width: 1000px; gap: 0; padding: 0; background: var(--s-white); border: 1px solid var(--s-rule); border-radius: 16px; overflow: hidden; }
.u8s .u8s-rv-head { padding: 20px 26px 16px; border-bottom: 1px solid var(--s-rule); align-items: baseline; gap: 14px; }
.u8s .u8s-rv-head h3 { margin: 0; font: 600 23px/1.2 "Inter", system-ui, sans-serif; color: var(--s-ink); }
.u8s .u8s-rv-head > .u8s-meta { margin-left: auto; font-size: 14px; }
.u8s .u8s-rv-body { display: grid; grid-template-columns: 420px 1fr; }
.u8s .u8s-rv-scores { padding: 18px 26px 20px; border-right: 1px solid var(--s-rule); gap: 13px; }
.u8s .u8s-rv-score { gap: 6px; }
.u8s .u8s-rv-score-line { justify-content: space-between; font: 500 17px/1.3 "Inter", system-ui, sans-serif; color: var(--s-ink); }
.u8s .u8s-rv-score-line .u8s-meta { font-size: 17px; color: var(--s-ink); font-variant-numeric: tabular-nums; }
.u8s .u8s-rv-bar { height: 8px; border-radius: 4px; background: var(--s-quiet); overflow: hidden; }
.u8s .u8s-rv-bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--s-accent); }
.u8s .u8s-rv-score-note { font-size: 14px; line-height: 1.4; color: var(--s-tertiary); }
.u8s .u8s-rv-quote { margin: 6px 0 0; padding: 13px 16px; border-left: 3px solid var(--s-accent); background: var(--s-accent-fill); border-radius: 0 10px 10px 0; font: 400 16px/1.45 "Inter", system-ui, sans-serif; color: var(--s-secondary); }
.u8s .u8s-rv-quote .u8s-meta { display: block; margin-top: 6px; font-size: 13px; }
.u8s .u8s-rv-quote.is-small { font-size: 14px; padding: 10px 12px; }
.u8s .u8s-rv-notes { padding: 18px 26px 20px; gap: 16px; }
.u8s .u8s-rv-note h4, .u8s .u8s-rv-card h4, .u8s .u8s-rv-questions h4, .u8s .u8s-rv-feedback-head h4 { margin: 0 0 6px; font: 600 15px/1.3 "Inter", system-ui, sans-serif; color: var(--s-ink); letter-spacing: .01em; }
.u8s .u8s-rv-note p, .u8s .u8s-rv-card p { margin: 0; font: 400 16px/1.45 "Inter", system-ui, sans-serif; color: var(--s-secondary); }
.u8s .u8s-rv-note p + p { margin-top: 4px; }
.u8s .u8s-rv-foot { padding: 12px 26px 18px; gap: 10px; border-top: 1px solid var(--s-rule); }
.u8s .u8s-rv-foot .u8s-button.is-primary { background: var(--s-accent); color: #fff; }
.u8s .u8s-rv-review .u8s-rv-head { align-items: center; }
.u8s .u8s-rv-title { gap: 4px; }
.u8s .u8s-rv-tabs { margin-left: auto; gap: 6px; }
.u8s .u8s-rv-questions { padding: 16px 26px 6px; gap: 8px; }
.u8s .u8s-rv-q { gap: 12px; font: 400 16px/1.4 "Inter", system-ui, sans-serif; color: var(--s-secondary); }
.u8s .u8s-rv-q .u8s-meta { font-variant-numeric: tabular-nums; flex: none; }
.u8s .u8s-rv-q-text { flex: 1; min-width: 0; color: var(--s-ink); }
.u8s .u8s-rv-feedback { padding: 12px 26px 6px; gap: 6px; }
.u8s .u8s-rv-feedback-head { gap: 12px; align-items: baseline; }
.u8s .u8s-rv-feedback-head .u8s-button { margin-left: auto; }
.u8s .u8s-rv-summary { margin: 0; font: 500 18px/1.4 "Inter", system-ui, sans-serif; color: var(--s-ink); }
.u8s .u8s-rv-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 12px 26px 22px; }
.u8s .u8s-rv-card { gap: 8px; padding: 14px; border: 1px solid var(--s-rule); border-radius: 12px; background: var(--s-paper); }
.u8s .u8s-rv-card .u8s-rv-quote { margin-top: auto; }
.u8s .u8s-rv-phone { width: 440px; }
.u8s .u8s-rv-phone .u8s-rv-head { padding: 12px 16px 10px; }
.u8s .u8s-rv-phone .u8s-rv-head h3 { font-size: 18px; }
.u8s .u8s-rv-phone .u8s-rv-body { grid-template-columns: 1fr; }
.u8s .u8s-rv-phone .u8s-rv-scores { padding: 12px 16px 14px; border-right: 0; gap: 9px; }
.u8s .u8s-rv-phone .u8s-rv-bar { height: 6px; }
.u8s .u8s-rv-phone .u8s-rv-cards { display: none; }
.u8s .u8s-rv-phone .u8s-rv-head > .u8s-meta { font-size: 12px; }
.u8s .u8s-rv-phone .u8s-rv-title .u8s-meta { font-size: 12px; }
.u8s .u8s-rv-phone .u8s-rv-score-line { font-size: 15px; }
.u8s .u8s-rv-phone .u8s-rv-score-note { font-size: 12.5px; }
.u8s .u8s-rv-phone .u8s-rv-questions, .u8s .u8s-rv-phone .u8s-rv-feedback { padding-inline: 16px; }
.u8s .u8s-rv-phone .u8s-rv-q { font-size: 14px; }
.u8s .u8s-rv-phone .u8s-rv-q .u8s-chip { display: none; }
.u8s .u8s-rv-phone .u8s-rv-summary { font-size: 15px; }
.u8s .u8s-rv-phone .u8s-rv-cards { grid-template-columns: 1fr; padding: 10px 16px 16px; gap: 10px; }
.u8s .u8s-rv-phone .u8s-rv-score-note { display: none; }
.u8s .u8s-rv-phone .u8s-rv-score { gap: 5px; }
.u8s .u8s-rv-phone .u8s-rv-scores { gap: 12px; }
.u8s .u8s-rv-phone .u8s-rv-title h3 { font-size: 17px; line-height: 1.2; }
.u8s .u8s-rv-phone .u8s-rv-questions { padding-top: 12px; gap: 6px; }
.u8s .u8s-rv-phone .u8s-rv-feedback { padding-bottom: 14px; }
.u8s .u8s-rv-phone .u8s-rv-feedback-head .u8s-button { display: none; }

/* Engine overlay (label, dim, arrow, numbered dots) and kit additions (callWindow, wave, full left column).
   Everything here is new and prefixed u8s-lab-; no rule above changes. The overlay sits in the shot layer,
   outside .u8s-shot-content, so it is not scaled with the camera. */
.u8s .u8s-lab-overlay { position: absolute; inset: 0; z-index: 14; pointer-events: none; }
.u8s .u8s-lab-dim, .u8s .u8s-lab-arrows { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.u8s .u8s-lab-dim { opacity: 0; }
.u8s .u8s-lab-frame {
  position: absolute; left: 0; top: 0; opacity: 0; border: 1.5px solid #141413; border-radius: 12px;
  background: rgba(233,224,205,.08); transform-origin: center;
  box-shadow: 0 0 0 2px rgba(250,249,245,.9); /* keeps the ink stroke visible on dark windows */
}
.u8s .u8s-lab-pill {
  position: absolute; left: 0; top: 0; opacity: 0; max-width: 520px; padding: 7px 16px 8px; border-radius: 999px;
  background: #e9e0cd; color: #141413; box-shadow: 0 0 0 1px rgba(20,20,19,.18), 0 6px 18px rgba(20,20,19,.16);
  font: 500 22px/1.2 "Literata", Georgia, serif; letter-spacing: -.005em; white-space: nowrap;
}
.u8s .u8s-lab-pill.is-plain { background: rgba(250,249,245,.94); }
.u8s .u8s-lab-dot {
  position: absolute; left: 0; top: 0; opacity: 0; display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; border: 1.5px solid #141413; background: #e9e0cd; color: #141413;
  font: 600 15px/1 "Inter", system-ui, sans-serif; font-variant-numeric: tabular-nums; box-shadow: 0 2px 6px rgba(20,20,19,.18);
  transform: translate(-50%, -50%);
}
.u8s .u8s-lab-dot.is-lit { background: #246b5e; border-color: #246b5e; color: #fff; }
.u8s .u8s-lab-arrow { fill: none; stroke: #20231f; stroke-width: 2.5; stroke-linecap: round; opacity: 0; }
.u8s .u8s-lab-arrow.is-halo { stroke: #e9e0cd; stroke-width: 4.5; } /* a 1 px sand halo either side */
.u8s .u8s-lab-arrow-head { fill: #20231f; stroke: #e9e0cd; stroke-width: 1; paint-order: stroke; opacity: 0; }
.u8s .u8s-lab-dots-spec { display: none; }

.u8s .u8s-lab-wave { display: inline-flex; align-items: center; gap: 2px; height: 14px; }
.u8s .u8s-lab-wave i { display: block; width: 2.5px; height: 3px; border-radius: 2px; background: currentColor; }

.u8s .u8s-lab-call {
  width: 560px; height: 420px; overflow: hidden; border-radius: 12px; background: #202124; color: #e8eaed;
  box-shadow: 0 24px 48px -12px rgba(20,48,40,.28), 0 1px 3px rgba(20,48,40,.18); font: 400 12px/16px "Inter", system-ui, sans-serif;
}
.u8s .u8s-lab-call-banner {
  align-self: center; gap: 7px; margin: 10px 0 8px; padding: 5px 14px; border-radius: 999px;
  background: #3f7a6d; color: #fff; font: 500 12.5px/16px "Inter", system-ui, sans-serif;
}
.u8s .u8s-lab-call-stage { display: flex; gap: 10px; height: 318px; padding: 0 12px; }
.u8s .u8s-lab-call-tile { position: relative; overflow: hidden; border-radius: 10px; background: #3c4043; box-shadow: inset 0 0 0 2px transparent; }
.u8s .u8s-lab-call-tile.is-speaking { box-shadow: inset 0 0 0 3px #8ab4f8; }
.u8s .u8s-lab-call-tile.is-big { flex: 1; display: grid; place-items: center; background: #4a5148; }
.u8s .u8s-lab-call-side { width: 160px; gap: 10px; }
.u8s .u8s-lab-call-side > .u8s-lab-call-tile { height: 154px; display: grid; place-items: center; }
.u8s .u8s-lab-call-tile.is-you { background: #50463c; }
.u8s .u8s-lab-call-avatar { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: #8d6e63; color: #fff; font: 500 40px/1 "Inter", system-ui, sans-serif; }
.u8s .u8s-lab-call-avatar.is-small { width: 54px; height: 54px; font-size: 24px; background: #6d8b74; }
.u8s .u8s-lab-call-name { position: absolute; left: 8px; bottom: 7px; gap: 6px; padding: 2px 7px; border-radius: 6px; background: rgba(32,33,36,.55); color: #fff; font: 500 12px/16px "Inter", system-ui, sans-serif; }
.u8s .u8s-lab-call-name .u8s-lab-wave { color: #8ab4f8; }
.u8s .u8s-lab-call-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #3c4043; color: #e8eaed; }
.u8s .u8s-lab-call-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.u8s .u8s-lab-call-name .u8s-lab-call-icon { width: 16px; height: 16px; background: transparent; }
.u8s .u8s-lab-call-name .u8s-lab-call-icon svg { width: 12px; height: 12px; }
.u8s .u8s-lab-call-icon.is-banner { width: 16px; height: 16px; background: transparent; color: #fff; }
.u8s .u8s-lab-call-icon.is-banner svg { width: 14px; height: 14px; }
.u8s .u8s-lab-call-icon.is-on { background: #8ab4f8; color: #202124; }
.u8s .u8s-lab-call-icon.is-hang { width: 48px; border-radius: 18px; background: #ea4335; color: #fff; }
.u8s .u8s-lab-call-icon.is-hang svg { fill: currentColor; stroke: none; }
.u8s .u8s-lab-call-bar { gap: 10px; height: 52px; padding: 0 16px; }
.u8s .u8s-lab-call-clock { color: #bdc1c6; font-size: 12px; }
.u8s .u8s-lab-call-clock.is-ghost { visibility: hidden; }
.u8s .u8s-lab-call-tile.is-presented { background: #f1f3f4; }
.u8s .u8s-lab-call-mini { position: absolute; inset: 10px 10px 30px; display: grid; grid-template-columns: 46% 1fr; grid-template-rows: 10px 1fr 1fr; gap: 4px; }
.u8s .u8s-lab-call-mini i { grid-column: 1; background: #c8ccd1; border-radius: 2px; }
.u8s .u8s-lab-call-mini i:first-child { grid-column: 1 / 3; background: #dde1e6; }
.u8s .u8s-lab-call-mini b { grid-column: 2; grid-row: 2 / 4; background: #1f2328; border-radius: 3px; }
.u8s .u8s-lab-call-mini b + b { display: none; }
.u8s .u8s-lab-call-caption { position: absolute; left: 8px; bottom: 7px; color: #3c4043; font: 500 11px/14px "Inter", system-ui, sans-serif; }

.u8s .u8s-window-left.u8s-lab-left-full .u8s-problem-card { min-height: 0; }