/* The home: Motion Studio makes its own launch video, one section per step. Each step's demo is a small canvas of the
   app (boards with their mono labels on the dotted ground, its panels) beside its chat, drawn in its finished state:
   that is the page without JS and under reduced motion. With motion, scenes.js replays each demo in a loop while it is on
   screen. A scene is laid out in its own units (--sw × --sh, and --psw × --psh on a narrow canvas): one unit is
   --u, so every board, panel and the text inside them scale together with the canvas. */
:root { --topbar: 56px; --dot: #262626; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 1.1em; height: 1.1em; flex: none; fill: currentColor; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #2E2E2E; border-radius: 10px; border: 2px solid var(--c-stage); }
::-webkit-scrollbar-track { background: var(--c-stage); }
html { scrollbar-color: #2E2E2E var(--c-stage); scroll-padding-top: var(--topbar); }
a:not(.btn) { text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:not(.btn):hover { text-decoration-color: var(--c-orange); }

/* The bar */
.topbar { position: fixed; inset: 0 0 auto; z-index: 20; height: var(--topbar); border-bottom: 1px solid var(--c-line);
  background: color-mix(in srgb, var(--c-stage) 86%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }
.topbar__inner { display: flex; align-items: center; gap: 14px; height: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.topbar__brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.topbar__brand img { width: 28px; height: 28px; }
.topbar__name { font: 700 17px/1 var(--f-display); letter-spacing: -0.01em; }
.topbar__nav { display: flex; align-items: center; gap: clamp(8px, 1.6vw, 22px); margin-left: auto; font-size: 15px; }
.topbar__link { color: var(--c-muted); text-decoration: none; }
.topbar__link:hover { color: var(--c-text); }
.topbar__download { gap: 8px; min-height: 36px; padding: 0 14px; font-size: 14px; border-color: color-mix(in srgb, var(--c-orange) 70%, transparent); color: #FF8A5C; }
.topbar__download:hover { border-color: var(--c-orange); background: color-mix(in srgb, var(--c-orange) 14%, transparent); }
/* On a phone the bar offers Get it: the install section, where the macOS download is. */
.topbar__get { display: none; }
@media (max-width: 720px) { .topbar__link, .topbar__download { display: none; } .topbar__get { display: inline-flex; min-height: 34px; padding: 0 14px; font-size: 14px; } .topbar__nav { gap: 8px; } }
@media (max-width: 420px) { .topbar__for { display: none; } }
.btn .i { margin-left: -2px; }

/* ------------------------------------------------------------------ the hero: step 1 playing by itself */
.hero { position: relative; padding: calc(var(--topbar) + clamp(28px, 5vw, 72px)) 0 clamp(40px, 5vw, 72px);
  background: var(--c-stage) radial-gradient(circle, var(--dot) 1.1px, transparent 1.4px) 0 0 / 22px 22px; }
/* The dotted ground fades into the page under the hero, where the next section starts. */
.hero::after { content: ''; position: absolute; inset: auto 0 0; height: 120px; background: linear-gradient(to bottom, transparent, var(--c-stage)); pointer-events: none; }
.hero__inner { position: relative; z-index: 1; display: grid; gap: clamp(28px, 4vw, 56px); max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.hero__title { font-size: clamp(54px, 6.6vw, 112px); line-height: .9; letter-spacing: -0.04em; margin-bottom: clamp(18px, 2vw, 28px); }
.hero__accent { display: block; color: var(--c-orange); }
.hero__lede { max-width: 44ch; margin: 0 0 28px; font-size: clamp(16px, 1.25vw, 19px); color: var(--c-muted); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__more { margin: 18px 0 0; font-size: 14px; color: var(--c-muted); }
.hero__more a { color: var(--c-text); }
.hero__note { max-width: 70ch; margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: #8A8A8A; }
@media (min-width: 1100px) {
  .hero__inner { grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr); align-items: center; column-gap: clamp(40px, 4vw, 72px); }
}
@media (max-width: 720px) {
  /* The bar's Get it leads to the downloads on a phone. */
  .hero__download { display: none; }
  .hero__lede { margin-bottom: 20px; }
  .hero__more { display: none; }
  .hero__actions .btn { min-height: 42px; padding: 0 18px; font-size: 15px; }
}
/* With motion the hero's demo starts empty (scenes.js brings each piece in); without the script it stays whole. */
.js-motion .hero .chat .msg, .js-motion .hero .board { visibility: hidden; }

/* ------------------------------------------------------------------ one section per step */
.step { display: grid; gap: clamp(24px, 3vw, 40px); align-items: center; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto;
  padding: clamp(48px, 6.5vw, 104px) var(--gutter); }
.step + .step { border-top: 1px solid var(--c-line); }
.step__title { font-size: clamp(32px, 3.6vw, 56px); line-height: 1; letter-spacing: -0.035em; margin-bottom: 16px; }
.step__n { display: block; margin-bottom: 14px; font: 500 13px/1.2 var(--f-mono); letter-spacing: .02em; color: var(--c-orange); }
.step__what { max-width: 40ch; margin: 0; font-size: clamp(16px, 1.2vw, 18.5px); line-height: 1.55; color: var(--c-muted); }
@media (min-width: 1000px) {
  .step { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(48px, 5vw, 96px); }
  /* Alternating sides: every other step has its demo on the left. */
  .step:nth-of-type(odd) { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .step:nth-of-type(odd) .step__copy { order: 2; }
}

/* ------------------------------------------------------------------ a demo: the canvas and its chat */
.demo { display: grid; grid-template-columns: minmax(0, 1fr); border-radius: var(--radius); background: var(--c-surface); overflow: hidden;
  box-shadow: 0 0 0 1px var(--c-line), 0 40px 80px -48px #000; }
.demo__canvas { container: canvas / inline-size; position: relative; min-width: 0; padding: clamp(14px, 2vw, 26px) clamp(14px, 2vw, 28px) clamp(16px, 2vw, 26px);
  background: var(--c-stage) radial-gradient(circle, var(--dot) 1.1px, transparent 1.4px) 0 0 / 22px 22px; }
@media (min-width: 600px) { .demo { grid-template-columns: minmax(0, 1fr) clamp(208px, 18vw, 264px); } }

.scene { --W0: var(--sw); --H0: var(--sh); --layout: wide; --u: calc(100cqw / var(--W0)); position: relative; width: 100%; height: calc(var(--H0) * var(--u));
  font-size: calc(13 * var(--u)); line-height: 1.3; }
.at { --X: var(--x); --Y: var(--y); --W: var(--w); --H: var(--h); position: absolute; left: calc(var(--X) * var(--u)); top: calc(var(--Y) * var(--u)); width: calc(var(--W) * var(--u)); height: calc(var(--H) * var(--u)); }
/* A narrow canvas lays the scene out again for its width (a phone, or a narrow column). */
@container canvas (max-width: 459px) {
  .scene { --W0: var(--psw); --H0: var(--psh); --layout: phone; }
  .at { --X: var(--px, var(--x)); --Y: var(--py, var(--y)); --W: var(--pw, var(--w)); --H: var(--ph, var(--h)); }
  .at.at--wide { display: none; }
}

/* Boards: a format on the canvas, with its mono label above it */
.board__frame { position: absolute; inset: 0; border-radius: .45em; overflow: hidden; background: #0A0A0A;
  box-shadow: 0 0 0 1px #2E2E2E, 0 1.4em 2.8em -1.4em #000; transition: box-shadow .35s var(--ease-out); }
.board.is-ring .board__frame { box-shadow: 0 0 0 2px var(--c-orange), 0 0 0 .5em color-mix(in srgb, var(--c-orange) 20%, transparent), 0 1.4em 2.8em -1.4em #000; }
.board.is-chosen .board__frame { box-shadow: 0 0 0 2px var(--c-orange), 0 1.4em 2.8em -1.4em #000; }
.board__frame .comp { position: absolute; inset: 0; }
.board__frame .comp-stage { height: 100%; aspect-ratio: auto; border-radius: 0; background: transparent; }
.board__before, .board__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.board__label { position: absolute; left: 0; bottom: 100%; display: flex; align-items: center; gap: .6em; max-width: 100%; margin: 0; padding-bottom: .6em;
  white-space: nowrap; font: 500 max(10.5px, .92em)/1.2 var(--f-body); color: var(--c-text); }
.board__name { overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.board__ver, .board__choose { display: inline-flex; align-items: center; gap: .3em; padding: .2em .5em; border-radius: .45em; background: #1E1E1E; font: 500 .9em/1.2 var(--f-mono); color: var(--c-muted); transition: background-color .25s, color .25s; }
.board__choose .i { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; }
.board.is-chosen .board__choose { background: color-mix(in srgb, var(--c-orange) 18%, #1E1E1E); color: #FF8A5C; }
.board.is-chosen .board__choose .i { fill: currentColor; }
.board__ver.is-new { color: #6FCF97; background: #132A1D; }
.board__ver.is-rendering { color: #FF8A5C; background: #231711; }
.board--asset .board__frame { display: grid; place-items: center; background: #141414; }
.board__frame > img { width: 100%; height: 100%; object-fit: cover; }
.board__frame--icon { background: transparent !important; box-shadow: none; }
.board__frame--icon img { border-radius: 22%; box-shadow: 0 0 0 1px #2E2E2E; }
.board--asset .board__frame--favicons { display: flex; align-items: center; justify-content: center; gap: 1em; }
.board__frame--favicons img { width: 3.6em; height: 3.6em; }
.board__frame--favicons img + img { width: 2.4em; height: 2.4em; }
.board__frame--favicons img + img + img { width: 1.25em; height: 1.25em; }

/* The editor's selection on the board (step 3): the dragged title's box and where it came from */
.edit { position: absolute; inset: 0; pointer-events: none; }
.edit__box, .edit__ghost { position: absolute; }
.edit__box { left: 6.25%; top: 45.19%; width: 51.56%; height: 31.67%; outline: 1.5px solid var(--c-orange); }
.edit__ghost { left: 8.33%; top: 29.64%; width: 57.75%; height: 33.47%; outline: 1.5px dashed color-mix(in srgb, var(--c-text) 45%, transparent); }
.edit__box i { position: absolute; width: .6em; height: .6em; background: #fff; border: 1.5px solid var(--c-orange); border-radius: 2px; translate: -50% -50%; }
.edit__box i:nth-child(1) { left: 0; top: 0; } .edit__box i:nth-child(2) { left: 100%; top: 0; }
.edit__box i:nth-child(3) { left: 0; top: 100%; } .edit__box i:nth-child(4) { left: 100%; top: 100%; }
.fit { position: absolute; left: 6.25%; top: 43.5%; width: 87.5%; height: 39%; outline: 1.5px dashed var(--c-lang); border-radius: 2px; pointer-events: none; }
.fit__tag { position: absolute; right: 0; bottom: 100%; margin-bottom: .3em; padding: .15em .45em; border-radius: .3em; background: var(--c-lang); color: #0B1220;
  font: 600 max(9px, .78em)/1.3 var(--f-mono); white-space: nowrap; }

/* The app's panels on the canvas (inspector, timeline, brand kit, Generate, subtitles) */
.panel { padding: 1.05em; border-radius: .75em; background: #171717; box-shadow: 0 0 0 1px #2A2A2A, 0 1.6em 3em -1.6em #000; color: var(--c-text); overflow: hidden; }
.panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: .8em; margin: 0 0 .9em; font-weight: 600; }
.panel__sub { font: 400 .85em/1.3 var(--f-mono); color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inspector { display: flex; flex-direction: column; }
.inspector__fields { display: grid; gap: .4em; margin: 0 0 auto; }
.inspector__fields > div { display: grid; grid-template-columns: 3.6em 1fr; align-items: center; }
.inspector__fields dt { color: var(--c-muted); }
.inspector__fields dd { display: flex; align-items: center; gap: .55em; margin: 0; padding: .4em .65em; border-radius: .5em; background: #222; font: 500 .95em/1.2 var(--f-mono); font-variant-numeric: tabular-nums; }
.inspector__fields dd { padding-block: .35em; }
.swatch { width: 1.2em; height: 1.2em; border-radius: .3em; background: var(--swatch, #FACC15); box-shadow: inset 0 0 0 1px #ffffff22; }
.inspector__save { align-self: flex-start; display: inline-flex; margin-top: .8em; padding: .5em .9em; border-radius: .6em; background: var(--c-text); color: #141414; font-weight: 600; transition: background-color .15s; }
.inspector__save.is-pressed { background: var(--c-orange); }
.timeline { padding: .75em .9em; display: grid; grid-template-rows: repeat(3, 1fr); gap: .45em; }
.timeline__scenes, .timeline__track { position: relative; }
.timeline__scenes span, .timeline__clip { position: absolute; top: 0; bottom: 0; left: calc(var(--a) * 1%); width: calc((var(--b) - var(--a)) * 1% - 3px); display: flex; align-items: center; padding: 0 .6em; border-radius: .4em; overflow: hidden; white-space: nowrap; font-size: .88em; }
.timeline__scenes span { background: #1E1E1E; color: var(--c-muted); }
.timeline__clip { background: #1C2A22; box-shadow: inset 0 0 0 1px #2E5A40; color: #CDE8D6; }
.timeline__clip--sel { background: #2A1A12; box-shadow: inset 0 0 0 1.5px var(--c-orange); color: #FFD9C9; }
.timeline__head { position: absolute; top: .45em; bottom: .45em; left: calc(.9em + (100% - 1.8em) * var(--a) / 100); width: 2px; background: var(--c-orange); border-radius: 1px; }
.brandkit__colors { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7em; margin: 0 0 .9em; padding: 0; list-style: none; }
.brandkit__colors li { display: flex; flex-direction: column; gap: .1em; padding: 0 0 .55em; border-radius: .6em; background: #1F1F1F; overflow: hidden; font-size: .92em; }
.brandkit__colors li::before { content: ''; height: 3.2em; margin-bottom: .45em; background: var(--c); box-shadow: inset 0 -1px 0 #ffffff14; }
.brandkit__colors span, .brandkit__colors code { padding: 0 .65em; }
.brandkit__colors code { font-size: .85em; color: var(--c-muted); }
.brandkit__row { display: flex; align-items: center; justify-content: space-between; gap: .9em; }
.brandkit__type { display: flex; align-items: center; gap: .7em; margin: 0; font-size: .88em; line-height: 1.3; color: var(--c-muted); }
.brandkit__aa { font: 800 2.4em/1 var(--f-display); color: var(--c-text); }
.brandkit__logo { width: 46%; height: auto; }
.lines__list { margin: 0; padding: 0; list-style: none; display: grid; gap: .45em; }
.lines__list li { display: flex; align-items: center; gap: .75em; padding: .5em .75em; border-radius: .6em; background: #1F1F1F; transition: background-color .2s, box-shadow .2s; }
.lines__list li.is-on { background: #2A1A12; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-orange) 55%, transparent); }
.lines__t { font: 400 .85em/1 var(--f-mono); color: var(--c-muted); font-variant-numeric: tabular-nums; }
.genpanel { display: flex; flex-direction: column; }
.genpanel__kinds { display: flex; gap: .3em; margin: 0 0 .75em; padding: .3em; border-radius: 999px; background: #1F1F1F; font-size: .92em; color: var(--c-muted); }
.genpanel__kinds span { padding: .35em .75em; border-radius: 999px; white-space: nowrap; transition: background-color .2s, color .2s; }
.genpanel__kinds .is-on { background: #333; color: var(--c-text); }
.genpanel__field { margin: 0 0 .75em; padding: .65em .8em; border-radius: .6em; background: #1F1F1F; font-size: .95em; line-height: 1.4; }
.genpanel__row { display: flex; align-items: center; justify-content: space-between; gap: .75em; margin: auto 0 0; }
.genpanel__provider { font: 400 .85em/1.3 var(--f-mono); color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.genpanel__go { flex: none; padding: .45em 1em; border-radius: 999px; background: var(--c-orange); color: #141414; font-weight: 600; }
.genpanel__paid { position: absolute; left: 1.05em; right: 1.05em; bottom: 1.05em; display: grid; gap: .3em; padding: .9em 1.05em; border-radius: .9em; background: #221C19;
  box-shadow: inset 0 0 0 1px #5A3420, 0 1.4em 3em -1em #000; }
.genpanel__done { position: absolute; left: 1.05em; bottom: 1.05em; display: none; margin: 0; padding: .4em .85em; border-radius: 999px; background: #132A1D; color: #6FCF97; font-weight: 600; font-size: .92em; }
.genpanel__done.is-on { display: block; animation: pop .35s var(--ease-out); }
.js-motion .genpanel:has(.genpanel__done.is-on) .genpanel__provider { visibility: hidden; }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } }
.paid__kind { margin: 0; font: 500 .82em/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: #FF8A5C; }
.paid__title { margin: 0; font-weight: 600; font-size: 1.05em; }
.paid__keys { margin: 0; font-size: .95em; color: var(--c-muted); }
.paid__actions { display: flex; flex-wrap: wrap; gap: .45em; margin: .4em 0 0; }
.paid__btn { padding: .4em .85em; border-radius: 999px; box-shadow: inset 0 0 0 1px #3A3A3A; font-size: .92em; }
.paid__btn--go { background: var(--c-orange); color: #141414; font-weight: 600; box-shadow: none; transition: background-color .15s; }
.paid__btn--go.is-pressed { background: #FF8A5C; }
.board__frame--audio { display: flex !important; align-items: center; gap: .8em; padding: 0 1em; }
.audio-tile__dot { flex: none; display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; background: #2A1A12; color: #FF8A5C; }
.audio-tile__dot .i { width: 55%; height: 55%; }
.is-playing .audio-tile__dot { background: var(--c-orange); color: #141414; }
.audio-tile__wave { position: relative; flex: 1; height: 60%; }
.audio-tile__wave img { width: 100%; height: 100%; object-fit: fill; }
.audio-tile__wave::after { content: ''; position: absolute; top: -4px; bottom: -4px; left: calc(var(--p, 0) * 100%); width: 2px; border-radius: 1px; background: var(--c-orange); display: none; }
.is-playing .audio-tile__wave::after { display: block; }
/* The tool bar and the export dialog (step 10) */
.toolbar { display: flex; align-items: center; justify-content: flex-end; gap: .9em; padding: .4em .4em .4em 1em; border-radius: .9em; background: #232323;
  box-shadow: 0 0 0 1px #333, 0 1em 2em -1em #000; font: 500 .95em/1 var(--f-mono); color: var(--c-muted); }
.toolbar__zoom { font-variant-numeric: tabular-nums; }
.toolbar__sep { align-self: stretch; width: 1px; margin: .3em 0; background: #3A3A3A; }
.toolbar__export { display: inline-flex; align-items: center; gap: .45em; height: 100%; padding: 0 .9em; border-radius: .6em; background: var(--c-text); color: #141414; font: 600 1em/1 var(--f-body); transition: background-color .15s; }
.toolbar__export.is-pressed { background: var(--c-orange); }
.export { padding: 1.5em 1.6em 1.2em; border-radius: 1.2em; background: #171717; box-shadow: 0 0 0 1px #2E2E2E, 0 3em 6em -1.5em #000; }
.export__title { margin: 0; font: 700 1.45em/1.2 var(--f-display); letter-spacing: -0.01em; }
.export__sub { display: flex; align-items: center; gap: .3em; margin: .3em 0 .9em; color: var(--c-muted); }
.export__sub .i { width: .95em; height: .95em; color: var(--c-orange); }
.export__rows { margin: 0; padding: 0; list-style: none; }
.export__rows li { display: grid; grid-template-columns: minmax(0, 1fr) 4.6em; align-items: center; gap: .9em; padding: .42em 0; border-top: 1px solid #242424; }
.export__name { font: 400 .92em/1.3 var(--f-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.export__bar { position: relative; height: .3em; border-radius: .15em; background: #262626; overflow: hidden; }
.export__bar::after { content: ''; position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--p, 1)); background: var(--c-orange); }
.export__rows li.is-done .export__bar::after { background: #6FCF97; }
.export__foot { margin: .8em 0 0; font-size: .92em; color: var(--c-muted); }
@container canvas (max-width: 459px) {
  .inspector__fields { grid-template-columns: 1fr 1fr; column-gap: .9em; }
  .inspector__save { position: absolute; right: 1.05em; top: .8em; margin: 0; padding: .3em .7em; }
  .inspector .panel__sub { display: none; }
  .brandkit__colors li::before { height: 2.2em; }
}

/* The pointer that clicks, drags and presses */
.cursor { position: absolute; z-index: 4; width: max(16px, 1.9em); height: max(16px, 1.9em); margin: -.2em 0 0 -.3em; color: #fff; pointer-events: none; filter: drop-shadow(0 2px 4px #0009); }
.cursor .i { width: 100%; height: 100%; }

/* Play with sound: the demo's sound, only on the viewer's click */
.sound-play { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; margin-top: 16px; padding: 0 16px 0 6px; border: 0; border-radius: 999px; cursor: pointer;
  background: #232323; box-shadow: 0 0 0 1px #3A3A3A, 0 12px 28px -14px #000; color: var(--c-text); font: 600 14px/1 var(--f-body); transition: background-color .2s, box-shadow .2s; }
.sound-play:hover { background: #2C2C2C; box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-orange) 70%, transparent), 0 12px 28px -14px #000; }
.sound-play:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 3px; }
.sound-play .i { box-sizing: content-box; width: 14px; height: 14px; padding: 7px; border-radius: 50%; background: var(--c-orange); color: #141414; }
.sound-play .i--stop, .sound-play.is-on .i--play { display: none; }
.sound-play.is-on .i--stop { display: block; }
.sound-play.is-on { box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-orange) 70%, transparent), 0 12px 28px -14px #000; }

/* The chat: an illustration of the app's, never an input */
.chat { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 0 14px 18px; border-top: 1px solid var(--c-line); }
@media (min-width: 600px) { .chat { border-top: 0; border-left: 1px solid var(--c-line); } }
.chat__head { display: flex; gap: 18px; margin: 0 -14px 6px; padding: 0 16px; border-bottom: 1px solid var(--c-line); font-size: 13px; color: var(--c-muted); }
.chat__head span { padding: 12px 0 10px; color: var(--c-text); box-shadow: inset 0 -2px 0 var(--c-text); }
.msg { position: relative; margin: 0; font-size: 14px; line-height: 1.45; }
.msg--you { align-self: flex-end; max-width: 92%; padding: 9px 13px; border-radius: 14px 14px 4px 14px; background: var(--c-text); color: #141414; }
.msg--agent { align-self: flex-start; max-width: 96%; padding: 9px 13px; border-radius: 4px 14px 14px 14px; background: #232323; color: var(--c-text); }
.msg--event { align-self: stretch; padding: 8px 11px; border: 1px dashed #3A3A3A; border-radius: 10px; font: 400 12.5px/1.45 var(--f-mono); color: var(--c-muted); }
.msg__rest { color: transparent; }
/* The agent at work: its answer's place holds "Working…" until the answer comes. */
.msg--agent.is-working { background: transparent; color: transparent; }
.msg--agent.is-working::after { content: 'Working…'; position: absolute; left: 0; top: 0; padding: 5px 10px; border-radius: 8px; background: #231711; color: #FF8A5C; font: 500 12.5px/1.2 var(--f-mono); }

/* The final cut's sound button */
.player-bar__sound:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 2px; }
.player-bar__sound .i--sound, .player-bar__sound.is-on .i--muted { display: none; }
.player-bar__sound.is-on .i--sound { display: block; }
.player-bar__sound.is-on { color: var(--c-orange); }

/* ------------------------------------------------------------------ the final cut */
.final { padding: clamp(48px, 6vw, 88px) 0 clamp(56px, 8vw, 96px); background: radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--c-orange) 9%, transparent), transparent 70%); }
.final__head { display: grid; gap: 24px; margin-bottom: clamp(24px, 3vw, 36px); }
.final__head h2 { font-size: clamp(44px, 6vw, 88px); margin-bottom: 14px; }
/* The film, its bar and the title fit one screen: the player is as wide as the height allows. */
.final__player { max-width: max(320px, calc((100svh - 440px) * 16 / 9)); margin: 0 auto; }
@media (min-width: 960px) { .final__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }
.final__lede { max-width: 56ch; margin: 0; color: var(--c-muted); font-size: clamp(16px, 1.3vw, 19px); }
.final__player .comp-stage { border-radius: 16px; box-shadow: 0 0 0 1px var(--c-line), 0 40px 90px -40px #000; }
.final__player:fullscreen { display: grid; align-content: center; padding: 24px; background: #000; }
.final__player:fullscreen .comp-stage { max-height: calc(100vh - 100px); aspect-ratio: 16 / 9; margin: 0 auto; width: min(100%, calc((100vh - 100px) * 16 / 9)); }
/* The big Play over the poster: the film starts only from it (or the bar's Play), from 0:00, with sound. */
.final__start { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: clamp(64px, 9vw, 96px); aspect-ratio: 1;
  border: 0; border-radius: 50%; cursor: pointer; background: var(--c-orange); color: #141414; box-shadow: 0 0 0 10px color-mix(in srgb, var(--c-orange) 22%, transparent), 0 24px 48px -16px #000;
  transition: transform .2s var(--ease-out), background-color .2s; z-index: 2; }
.final__start:hover { background: #FF7A45; transform: scale(1.05); }
.final__start:focus-visible { outline: 3px solid var(--c-text); outline-offset: 4px; }
.final__start .i { width: 42%; height: 42%; margin-left: 8%; }
.final__player.is-started .final__start { display: none; }
.player-bar { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 8px 10px 8px 8px; border-radius: 999px; background: var(--c-surface); box-shadow: inset 0 0 0 1px var(--c-line); }
.player-bar button { display: grid; place-items: center; flex: none; border: 0; border-radius: 50%; cursor: pointer; transition: background-color .2s, transform .2s var(--ease-out); }
.player-bar button:active { transform: scale(.94); }
.player-bar__play { width: 44px; height: 44px; background: var(--c-text); color: #141414; }
.player-bar__play:hover { background: #fff; }
.player-bar__play .i { width: 20px; height: 20px; }
.player-bar__play .i--pause, .final__player.is-playing .player-bar__play .i--play { display: none; }
.final__player.is-playing .player-bar__play .i--pause { display: block; }
.player-bar__btn { width: 40px; height: 40px; background: transparent; color: var(--c-muted); }
.player-bar__btn:hover { background: #262626; color: var(--c-text); }
.player-bar__btn .i { width: 19px; height: 19px; }
.player-bar__time { flex: none; font: 400 13px/1 var(--f-mono); color: var(--c-muted); font-variant-numeric: tabular-nums; }
.player-bar__now { color: var(--c-text); }
.player-bar__track { position: relative; flex: 1; height: 28px; display: flex; align-items: center; }
.player-bar__track::before { content: ''; position: absolute; left: 0; right: 0; height: 4px; border-radius: 2px; background: #2E2E2E; }
.player-bar__fill { position: absolute; left: 0; height: 4px; width: 100%; border-radius: 2px; background: var(--c-orange); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); pointer-events: none; }
.player-bar__chapters { position: absolute; inset: 0; pointer-events: none; }
.player-bar__chapters i { position: absolute; top: 50%; width: 2px; height: 10px; translate: -1px -50%; border-radius: 1px; background: #5A5A5A; }
.player-bar__seek { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.player-bar__seek::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.player-bar__seek::-moz-range-track { background: transparent; }
.player-bar__seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: 7px; border-radius: 50%; background: var(--c-text); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-orange) 35%, transparent); }
.player-bar__seek::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--c-text); }
.player-bar__seek:focus-visible { outline: none; }
.player-bar__track:has(.player-bar__seek:focus-visible) { outline: 2px solid var(--c-orange); outline-offset: 2px; border-radius: 6px; }
@media (max-width: 520px) { .player-bar__full, .player-bar__slash, .player-bar__dur { display: none; } .player-bar { gap: 10px; } }
.final__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; max-width: 560px; }
@media (min-width: 960px) { .final__actions { justify-content: flex-end; } }
.final__guide { margin: 0 6px; color: var(--c-muted); font-size: 15px; }
.final__guide:hover { color: var(--c-text); }
.install { border-top: 1px solid var(--c-line); }
.install__head .small a { color: var(--c-text); }