.film-sec { position: relative; padding: 76px 0; }
.film-sec + .film-sec { border-top: 1px solid var(--line-rule, var(--rule)); }
.film-row { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.5fr); gap: 64px; align-items: center; }
.film-row.flip { grid-template-columns: minmax(0, 1.5fr) minmax(0, .7fr); }
.film-row.flip .film-copy { order: 2; }
.film-copy h2 { font-size: clamp(26px, 2.6vw, 36px); max-width: 16ch; }
.film-copy .lead { font-size: 17px; margin-top: 18px; }
.film-copy .kicker b { margin-right: 12px; font-weight: 500; color: var(--c); }
.chapters { list-style: none; margin-top: 30px; border-top: 1px solid var(--line-rule, var(--rule)); }
.chapters button { position: relative; display: grid; grid-template-columns: 52px 1fr; width: 100%; padding: 11px 0; border-bottom: 1px solid var(--line-rule, var(--rule)); text-align: left; font-size: 14.5px; line-height: 1.35; color: var(--soft, var(--ink-soft)); transition: color .2s; }
.chapters button:hover { color: var(--ink); }
.chapters .ct { font: 500 11px/1.9 var(--font-label); letter-spacing: .08em; color: var(--faint, var(--ink-faint)); transition: color .2s; }
.chapters button.on { color: var(--ink); }
.chapters button.on .ct { color: var(--c); }
.chapters button::before { content: ''; position: absolute; left: -14px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--c); opacity: 0; transition: opacity .2s; }
.chapters button.on::before { opacity: 1; }

:where(.film, .chapters) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.film .ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.film-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--frame); border-radius: 16px; cursor: pointer;
  background: radial-gradient(ellipse 70% 60% at 50% 42%, color-mix(in oklab, var(--c) 8%, #0e0c0a), #0a0908 78%); }
.stage { position: absolute; left: 0; top: 0; width: 640px; height: 400px; transform-origin: 0 0; font-family: var(--font-text); color: var(--ink); line-height: 1.4; }
.stage > * { position: absolute; }
.film-big { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 64px; height: 64px; margin: -32px 0 0 -32px; border: 1px solid rgba(235, 227, 214, .3); border-radius: 50%; background: rgba(10, 9, 8, .62); color: var(--ink); opacity: 0; pointer-events: none; transition: opacity .25s, border-color .2s; backdrop-filter: blur(6px); }
.film-big .ic { width: 24px; height: 24px; margin-left: 3px; }
.film.paused .film-big { opacity: 1; pointer-events: auto; }
.film.dragging .film-big { opacity: 0; }
.film-big:hover { border-color: var(--c); }
.film-host { position: absolute; left: 14px; top: 12px; display: flex; align-items: center; gap: 8px; font: 500 10.5px/1 var(--font-label); letter-spacing: .16em; text-transform: uppercase; color: var(--faint, var(--ink-faint)); pointer-events: none; }
.film-sub { min-height: 3.1em; margin-top: 16px; font-size: 16px; line-height: 1.45; color: var(--ink); opacity: 0; transition: opacity .25s; }
.film-sub.on { opacity: 1; }
.film-sub b { margin-right: 10px; font: 500 10.5px/1 var(--font-label); letter-spacing: .16em; text-transform: uppercase; color: var(--c); }
.film-sub[data-who='you'] b { color: var(--sky); }
.film-sub[data-who='you'] span { color: var(--soft, var(--ink-soft)); }
.film-bar { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.film-pp { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--frame); border-radius: 50%; color: var(--ink-soft); transition: color .2s, border-color .2s; }
.film-pp:hover { color: var(--ink); border-color: var(--c); }
.film-pp .ic { width: 15px; height: 15px; }
.scrub { position: relative; flex: 1; height: 24px; cursor: pointer; touch-action: none; }
.scrub-track { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: var(--rule); }
.scrub-fill { position: absolute; inset: 0; border-radius: 2px; background: var(--c); transform-origin: left; transform: scaleX(0); }
.tick { position: absolute; top: -3px; width: 1.5px; height: 9px; margin-left: -.75px; background: var(--ink-faint); }
.scrub-knob { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px rgba(10, 9, 8, .8); transition: transform .15s; }
.scrub:hover .scrub-knob, .film.dragging .scrub-knob { transform: scale(1.3); }
.film-time { font: 500 11px/1 var(--font-label); letter-spacing: .08em; color: var(--faint, var(--ink-faint)); font-variant-numeric: tabular-nums; white-space: nowrap; }

.mb { position: relative; flex: none; }
.mb-body { position: relative; width: 100%; height: 100%; transform-origin: 50% 60%; }
.mb-body svg { width: 100%; height: 100%; }
.mb-glow { position: absolute; inset: -34%; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklab, var(--c) 40%, transparent), transparent 62%); opacity: .35; pointer-events: none; }
.mb-drop { position: absolute; left: 50%; top: 50%; width: 12%; height: 12%; margin: -6% 0 0 -6%; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 34% 30%, #fff6ea, color-mix(in oklab, var(--c) 80%, #fff) 30%, var(--c) 70%); box-shadow: 0 0 6px color-mix(in oklab, var(--c) 60%, transparent); }
.mb-done { position: absolute; right: -6%; bottom: -6%; width: 34%; height: 34%; padding: 6%; border-radius: 50%; background: #0c0a08; border: 1px solid var(--c); color: var(--c); opacity: 0; }
.caret { display: inline-block; width: 1.5px; height: 1.1em; margin-left: 2px; vertical-align: -.18em; background: var(--c); animation: caret .9s steps(1) infinite; }
.lab-k, .stage small { font: 500 10px/1.3 var(--font-label); letter-spacing: .16em; text-transform: uppercase; color: var(--faint, var(--ink-faint)); }

@media (max-width: 1080px) {
  .film-row, .film-row.flip { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .film-row.flip .film-copy { order: 0; }
  .film-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; align-items: start; }
  .film-copy .kicker, .film-copy .label, .film-copy h2, .film-copy .lead { grid-column: 1; }
  .film-copy .chapters { grid-column: 2; grid-row: 1 / span 3; margin-top: 4px; }
}
@media (max-width: 860px) {
  .film-sec { padding: 56px 0; }
  .film-copy { display: block; }
  .film-copy .chapters { display: none; }
}
@media (max-width: 600px) {
  .film-screen { border-radius: 12px; }
  .film-host { display: none; }
  .film-sub { font-size: 15px; }
  .film-time { display: none; }
}
.still .film-big { opacity: 0 !important; }