/* Watch Together, the site.
 *
 * Same material as the product: near-black, hairline edges, one lit top edge on every
 * raised surface, colour spent only on status. No framework, because the page is one
 * document and a framework would cost more than it returns. Motion is done with CSS
 * scroll-driven animations where they are supported, so reveals run off the main thread
 * and cost no JavaScript at all.
 */
:root {
  --bg: #0b0b0d;
  --raised: rgba(255,255,255,0.045);
  --raised-2: rgba(255,255,255,0.075);
  --line: rgba(255,255,255,0.09);
  --line-2: rgba(255,255,255,0.16);
  --text: #f4f4f5;
  --dim: rgba(244,244,245,0.64);
  --faint: rgba(244,244,245,0.4);
  --good: #4ade80;
  --warn: #fbbf24;
  --info: #60a5fa;
  --r: 14px;
  --r-lg: 20px;
  --ease: cubic-bezier(.2,0,0,1);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* A single soft light above the fold, so the page has a direction rather than being
   uniformly dark. Fixed, so it does not scroll away and turn into a band. */
.glow {
  position: fixed; inset: -20% 0 auto 0; height: 70vh; pointer-events: none; z-index: 0;
  background: radial-gradient(60% 60% at 50% 0%, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 70%);
}
main, header, footer { position: relative; z-index: 1; }

/* ---------- nav ---------- */
nav {
  position: sticky; top: 0; z-index: 20;
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 24px;
  background: rgba(11,11,13,0.72);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: border-color 220ms var(--ease);
}
nav.stuck { border-bottom-color: var(--line); }
nav .brand { display:flex; align-items:center; gap:10px; font-weight:650; letter-spacing:-.01em; }
nav .brand img { width:28px; height:28px; border-radius:8px; }

/* ---------- buttons ---------- */
.btn {
  display:inline-flex; align-items:center; gap:9px;
  padding: 12px 22px; border-radius: 11px;
  font-size: 15px; font-weight: 600; letter-spacing:-.01em;
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg,#26262b 0%,#1d1d21 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 1px 2px rgba(0,0,0,.5);
  transition: background 180ms var(--ease), transform 180ms var(--ease);
  cursor:pointer;
}
.btn:hover { background: linear-gradient(180deg,#2e2e34 0%,#232328 100%); }
.btn:active { transform: scale(.985); }
.btn-sm { padding: 9px 16px; font-size: 13.5px; }
.btn-quiet { background:none; box-shadow:none; border-color: var(--line); color: var(--dim); }
.btn-quiet:hover { background: var(--raised); color: var(--text); }

/* ---------- hero ---------- */
header { padding: 76px 0 40px; text-align:center; }
h1 {
  font-size: clamp(40px, 7vw, 76px);
  line-height: 1.02; letter-spacing: -.038em; font-weight: 700;
}
h1 .line { display:block; overflow:hidden; }
h1 .line > span {
  display:block;
  animation: rise 900ms var(--ease) both;
}
h1 .line:nth-child(2) > span { animation-delay: 90ms; }
@keyframes rise { from { transform: translateY(105%); } to { transform: translateY(0); } }

.sub {
  margin: 22px auto 0; max-width: 40ch;
  font-size: clamp(17px, 2.2vw, 20px); color: var(--dim); letter-spacing:-.011em;
  animation: fade 900ms var(--ease) 240ms both;
}
.cta { margin-top: 34px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
  animation: fade 900ms var(--ease) 340ms both; }
.note { margin-top: 15px; font-size: 13px; color: var(--faint);
  animation: fade 900ms var(--ease) 440ms both; }
@keyframes fade { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform:none; } }

/* ---------- the demo ---------- */
.stage {
  margin: 54px auto 0; max-width: 980px;
  animation: fade 1000ms var(--ease) 520ms both;
}
.screens { display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 720px) { .screens { grid-template-columns: 1fr; } }

.screen {
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.035);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 20px 50px rgba(0,0,0,.5);
  overflow:hidden;
  text-align:left;
}
.screen-bar {
  display:flex; align-items:center; gap:8px;
  padding: 10px 13px; border-bottom: 1px solid var(--line);
  font-size: 12px; color: var(--faint);
}
.dot { width:7px; height:7px; border-radius:50%; background: var(--good); flex:0 0 auto; }
.dot.ad { background: var(--warn); }
.dot.buf { background: var(--info); }
.screen-who { color: var(--dim); font-weight:600; }
.screen-state { margin-left:auto; font-variant-numeric: tabular-nums; }

/* The picture: a cheap, tasteful stand-in for video rather than a real file, so the page
   stays instant and nothing has to be licensed. */
.pic { position:relative; aspect-ratio: 16/9; overflow:hidden; background:#050506; }
.screens { position:relative; }
/* The demo screens hold real YouTube embeds. Until somebody presses play they hold the
   video's own thumbnail instead, because two embeds are most of a megabyte and this page
   has to paint on mobile data before it has earned that. */
.pic .poster, .pic .frame { position:absolute; inset:0; width:100%; height:100%; }
.pic .poster { object-fit: cover; opacity:.92; }
.pic .frame { border:0; opacity:0; transition: opacity .5s ease; }
.pic .frame iframe { width:100%; height:100%; border:0; display:block; pointer-events:none; }
/* Pressing the picture is how anybody stops a video, so it has to look pressable. */
.stage.is-live .pic, .stage.is-fallback .pic { cursor: pointer; }
.stage.is-live .pic .frame { opacity:1; }
.stage.is-live .pic .poster { opacity:0; transition: opacity .5s ease .1s; }

/* The picture is scaled a touch so the embed's own letterboxing never shows a seam. */
.stage.is-live .pic .frame iframe { transform: scale(1.02); transform-origin:center; }

.pic .vig { position:absolute; inset:0; background: radial-gradient(75% 75% at 50% 45%, transparent 0%, rgba(0,0,0,.55) 100%); }
.pic .adcard {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:13px;
  background: rgba(8,8,10,.92);
  color: var(--warn); font-size: 13px; font-weight:650; letter-spacing:.02em;
  opacity:0; pointer-events:none; transition: opacity 260ms var(--ease);
}
.screen.is-ad .adcard { opacity:1; }

/* The countdown belongs on the picture, where the advert is, not in the status line
   beside it. A cinema countdown leader: reticle, one sweep of the hand per second, and
   the number the sweep is counting. Same shape as the CUTROOM opening. */
.leader { position:relative; width:76px; height:76px; display:grid; place-items:center; }
.leader-ring { position:absolute; inset:0; border-radius:50%; border:1px solid rgba(255,255,255,.16); }
.leader-ring-in { inset:10px; border-color: rgba(255,255,255,.09); }
.leader-cross-v { position:absolute; left:50%; top:0; width:1px; height:100%; margin-left:-.5px; background: rgba(255,255,255,.09); }
.leader-cross-h { position:absolute; top:50%; left:0; height:1px; width:100%; margin-top:-.5px; background: rgba(255,255,255,.09); }
.leader-hand {
  position:absolute; inset:0; border-radius:50%;
  background: conic-gradient(from 0deg, color-mix(in srgb, var(--warn) 38%, transparent), transparent 34%);
  -webkit-mask-image: radial-gradient(circle, transparent 55%, #000 56%);
  mask-image: radial-gradient(circle, transparent 55%, #000 56%);
}
.leader-num {
  position:relative; font-size:27px; font-weight:700; line-height:1; letter-spacing:-.02em;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.leader-num.is-tick { animation: leaderTick 420ms cubic-bezier(.2,.8,.2,1); }
@keyframes leaderTick {
  0% { opacity:0; transform: scale(1.35); filter: blur(5px); }
  22% { opacity:1; filter: blur(0); }
  100% { opacity:1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .leader-hand { display:none; }
  .leader-num.is-tick { animation:none; }
}

.controls { display:flex; align-items:center; gap:11px; padding: 12px 13px; }
.track { position:relative; flex:1; height:5px; border-radius:3px; background: rgba(255,255,255,.11); cursor:pointer; }
.fill { position:absolute; inset:0 auto 0 0; width:0%; border-radius:3px; background: var(--text); }
.head {
  position:absolute; top:50%; left:0; width:12px; height:12px; margin:-6px 0 0 -6px;
  border-radius:50%; background: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.time { font-size:12px; color: var(--faint); font-variant-numeric: tabular-nums; min-width:38px; }

.stage-controls { margin-top:18px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.stage-hint { margin-top:12px; font-size:13px; color:var(--faint); text-align:center; min-height:1.4em; }

/* ---------- sections ---------- */
section { padding: 88px 0; }
h2 { font-size: clamp(26px,3.6vw,38px); letter-spacing:-.028em; line-height:1.12; font-weight:700; }
.eyebrow { font-size:11px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color:var(--faint); margin-bottom:14px; }
.lead { margin-top:14px; color:var(--dim); max-width:56ch; font-size:17px; }

.grid { margin-top:36px; display:grid; gap:14px; grid-template-columns: repeat(auto-fit, minmax(268px,1fr)); }
.card {
  padding: 24px; border-radius: var(--r);
  background: var(--raised); border:1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  transition: background 200ms var(--ease), transform 200ms var(--ease), border-color 200ms var(--ease);
}
.card:hover { background: var(--raised-2); border-color: var(--line-2); transform: translateY(-2px); }
.card h3 { font-size:16.5px; font-weight:650; letter-spacing:-.014em; margin-bottom:8px; }

/* ---------- card demonstrations ----------
 *
 * A page about watching things together should not be a page of paragraphs. Every card
 * leads with the behaviour it describes, drawn in the same language as the stage above:
 * a screen, a dot for state, and a playhead that has to agree with somebody else's.
 *
 * Drawn rather than filmed, and animated only on transform and opacity, because six more
 * video players below the fold would cost more than the whole rest of the page. The loops
 * are paused until the card is on screen: nothing off screen is allowed to composite.
 */
.mini { display:flex; gap:8px; height:78px; margin-bottom:16px; }
.mini *, .wire * { animation-play-state: paused; }
.mini.is-onscreen *, .wire.is-onscreen * { animation-play-state: running; }

.mini-s {
  position:relative; flex:1; border-radius:9px; overflow:hidden;
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.014));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.mini-d {
  position:absolute; z-index:2; top:8px; left:8px; width:6px; height:6px;
  border-radius:50%; background: var(--good);
}
.d-buf { background: var(--info); }
.d-ad { background: var(--warn); }

.mini-t { position:relative; height:3px; border-radius:2px; background: rgba(255,255,255,.13); }
.mini-s .mini-t { position:absolute; z-index:2; left:8px; right:8px; bottom:8px; }
.mini-t i {
  position:absolute; inset:0; border-radius:2px; background: var(--text);
  transform-origin:left; transform: scaleX(.1);
}
.mini-v {
  position:absolute; z-index:3; inset:0; display:grid; place-items:center;
  background: rgba(8,8,10,.9); color: var(--warn);
  font-size:10.5px; font-weight:650; letter-spacing:.02em; opacity:0;
}
/* Drawn, not filmed: a lit frame inside letterbox bars reads as a picture without a
   single byte of video or anybody's copyright. */
.mini-pic {
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 90% at 30% 22%, rgba(255,255,255,.13) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(140deg,#2c2c35 0%,#141419 100%);
}
.mini-pic::before, .mini-pic::after {
  content:""; position:absolute; left:0; right:0; height:9px; background:#0a0a0c;
}
.mini-pic::before { top:0; }
.mini-pic::after { bottom:0; }
.mini-row { display:flex; align-items:center; gap:9px; }

/* The playhead every one of these is measured against. */
@keyframes miniRun { from { transform: scaleX(.1); } to { transform: scaleX(.88); } }

/* Adverts are personal: one side sits out, the room does not move, and the one that was
   away lands on the room's position rather than where its own picture stopped. */
.m-ad .mini-s:nth-child(1) .mini-v { animation: adVeil 7s var(--ease) infinite; }
.m-ad .mini-s:nth-child(1) .mini-d { animation: adDot 7s step-end infinite; }
.m-ad .mini-s:nth-child(1) .mini-t i { animation: adRejoin 7s linear infinite; }
.m-ad .mini-s:nth-child(2) .mini-t i { animation: miniRun 7s linear infinite; }
@keyframes adVeil { 0%,12% { opacity:0; } 16%,42% { opacity:1; } 46%,100% { opacity:0; } }
@keyframes adDot {
  0%,15% { background: var(--good); }
  15.01%,45% { background: var(--warn); }
  45.01%,100% { background: var(--good); }
}
@keyframes adRejoin {
  0% { transform: scaleX(.1); }
  15% { transform: scaleX(.22); }
  45% { transform: scaleX(.22); }
  45.01% { transform: scaleX(.451); }
  100% { transform: scaleX(.88); }
}

/* A stall holds the room instead of leaving somebody behind, so both playheads stop. */
.m-buffer .mini-v { color: var(--info); }
.m-buffer .mini-s:nth-child(2) .mini-v { animation: bufVeil 7s var(--ease) infinite; }
.m-buffer .mini-s:nth-child(2) .mini-d { animation: bufDot 7s step-end infinite; }
.m-buffer .mini-t i { animation: miniHold 7s linear infinite; }
@keyframes bufVeil { 0%,17% { opacity:0; } 21%,47% { opacity:1; } 51%,100% { opacity:0; } }
@keyframes bufDot {
  0%,20% { background: var(--good); }
  20.01%,50% { background: var(--info); }
  50.01%,100% { background: var(--good); }
}
@keyframes miniHold {
  0% { transform: scaleX(.1); }
  20% { transform: scaleX(.26); }
  50% { transform: scaleX(.26); }
  100% { transform: scaleX(.74); }
}

/* Three people, three different states, one position. */
.m-status { flex-direction:column; justify-content:center; gap:10px; }
.m-status .mini-t { flex:1; }
.m-status .mini-t i { transform: scaleX(.52); }
.m-status .mini-d { position:static; flex:0 0 auto; }
.mini-tag { font-size:10px; line-height:1; color: var(--faint); width:56px; text-align:right; }
.m-status .mini-row:nth-child(1) .mini-d { animation: pulse 2.6s var(--ease) infinite; }
.m-status .mini-row:nth-child(2) .mini-d { animation: pulse 2.6s var(--ease) .5s infinite; }
.m-status .mini-row:nth-child(3) .mini-d { animation: pulse 2.6s var(--ease) 1s infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }

/* Change what is playing and the room comes with you, a beat later. */
.m-switch .p2 { background: linear-gradient(140deg,#35262c 0%,#17121a 100%); opacity:0; }
.m-switch .mini-s:nth-child(1) .p2 { animation: swap 7s var(--ease) infinite; }
.m-switch .mini-s:nth-child(2) .p2 { animation: swap 7s var(--ease) .45s infinite; }
.m-switch .mini-s:nth-child(1) .mini-t i { animation: swapFill 7s linear infinite; }
.m-switch .mini-s:nth-child(2) .mini-t i { animation: swapFill 7s linear .45s infinite; }
@keyframes swap { 0%,32% { opacity:0; } 40%,88% { opacity:1; } 96%,100% { opacity:0; } }
@keyframes swapFill {
  0% { transform: scaleX(.14); }
  34% { transform: scaleX(.62); }
  36% { transform: scaleX(.06); }
  100% { transform: scaleX(.7); }
}

/* Ducking is not pausing: the level drops, the playhead never stops. */
.m-duck .mini-lvl {
  position:absolute; z-index:2; inset:0; display:flex; align-items:center; justify-content:center; gap:5px;
  animation: duck 7s var(--ease) infinite;
}
.m-duck .mini-lvl b { width:3px; height:26px; border-radius:2px; background: rgba(244,244,245,.55); transform-origin:center; }
.m-duck .mini-lvl b:nth-child(1) { animation: bob 1.1s ease-in-out .00s infinite alternate; }
.m-duck .mini-lvl b:nth-child(2) { animation: bob 1.1s ease-in-out .13s infinite alternate; }
.m-duck .mini-lvl b:nth-child(3) { animation: bob 1.1s ease-in-out .26s infinite alternate; }
.m-duck .mini-lvl b:nth-child(4) { animation: bob 1.1s ease-in-out .39s infinite alternate; }
.m-duck .mini-lvl b:nth-child(5) { animation: bob 1.1s ease-in-out .52s infinite alternate; }
.m-duck .mini-lvl b:nth-child(6) { animation: bob 1.1s ease-in-out .65s infinite alternate; }
.m-duck .mini-lvl b:nth-child(7) { animation: bob 1.1s ease-in-out .78s infinite alternate; }
.m-duck .mini-t i { animation: miniRun 7s linear infinite; }
@keyframes bob { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
@keyframes duck { 0%,26% { transform:scaleY(1); opacity:1; } 34%,62% { transform:scaleY(.3); opacity:.5; } 70%,100% { transform:scaleY(1); opacity:1; } }

/* Two copies of the same film, one running behind, then told so once. */
.m-offset { flex-direction:column; justify-content:center; gap:16px; }
.m-offset .mini-t { flex:1; }
.m-offset .mini-t i { animation: miniRun 7s linear infinite; }
.m-offset .lag { background: var(--warn); animation: lagSnap 7s linear infinite; }
@keyframes lagSnap {
  0% { transform: scaleX(.02); }
  44.99% { transform: scaleX(.35); }
  45% { transform: scaleX(.451); }
  100% { transform: scaleX(.88); }
}

/* The three steps, at a glance rather than in a sentence. */
.m-open .mini-play {
  position:absolute; z-index:2; top:50%; left:50%; margin:-9px 0 0 -6px;
  border-style:solid; border-width:9px 0 9px 15px;
  border-color: transparent transparent transparent rgba(244,244,245,.85);
  animation: nudge 2.8s var(--ease) infinite;
}
.m-open .mini-t i { animation: miniRun 7s linear infinite; }
@keyframes nudge { 0%,70%,100% { transform:none; opacity:.85; } 82% { transform: scale(1.14); opacity:1; } }
.m-code { align-items:center; justify-content:center; }
.mini-code { display:flex; gap:7px; }
.mini-code b {
  width:20px; height:26px; border-radius:5px;
  border:1px solid var(--line); background: var(--raised);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.mini-code b:nth-child(1) { animation: fillKey 4.2s var(--ease) .0s infinite; }
.mini-code b:nth-child(2) { animation: fillKey 4.2s var(--ease) .2s infinite; }
.mini-code b:nth-child(3) { animation: fillKey 4.2s var(--ease) .4s infinite; }
.mini-code b:nth-child(4) { animation: fillKey 4.2s var(--ease) .6s infinite; }
.mini-code b:nth-child(5) { animation: fillKey 4.2s var(--ease) .8s infinite; }
.mini-code b:nth-child(6) { animation: fillKey 4.2s var(--ease) 1s infinite; }
@keyframes fillKey {
  0%,6% { background: var(--raised); border-color: var(--line); }
  14%,72% { background: var(--raised-2); border-color: var(--line-2); }
  84%,100% { background: var(--raised); border-color: var(--line); }
}
.m-lock .mini-t i { animation: miniRun 7s linear infinite; }

.m-offset .mini-num { font-size:10px; line-height:1; color: var(--faint); width:10px; }

/* One number crosses the network. This is that number crossing the network. */
.wire { margin-top:28px; display:flex; align-items:center; gap:14px; max-width:560px; }
.wire .mini-s {
  position:relative; flex:0 0 auto; width:132px; height:74px; border-radius:9px; overflow:hidden;
  border:1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.wire .mini-t { position:absolute; z-index:2; left:8px; right:8px; bottom:8px; }
.wire .mini-t i { transform: scaleX(.46); }
.wire-line {
  position:relative; flex:1; height:1px;
  background: repeating-linear-gradient(90deg, var(--line-2) 0 5px, transparent 5px 11px);
}
.wire-pip {
  position:absolute; top:50%; left:0; transform: translate(-50%,-50%);
  padding:3px 8px; border-radius:999px; font-size:10.5px; font-weight:650;
  font-variant-numeric: tabular-nums; color: var(--text);
  background: var(--bg); border:1px solid var(--line-2);
  animation: wireCross 3.4s var(--ease) infinite;
}
@keyframes wireCross {
  0%,8% { left:0; opacity:0; }
  16% { opacity:1; }
  84% { opacity:1; }
  92%,100% { left:100%; opacity:0; }
}
@media (prefers-reduced-motion: reduce) {
  .wire-pip { animation:none; left:50%; opacity:1; }
}

@media (prefers-reduced-motion: reduce) {
  .mini * { animation:none !important; }
  .mini-t i { transform: scaleX(.45); }
  .m-ad .mini-s:nth-child(1) .mini-v, .m-buffer .mini-s:nth-child(2) .mini-v { opacity:1; }
  .m-ad .mini-s:nth-child(1) .mini-d { background: var(--warn); }
  .m-buffer .mini-s:nth-child(2) .mini-d { background: var(--info); }
  .m-offset .lag { transform: scaleX(.3); }
  .m-switch .p2 { opacity:1; }
}

.card p { font-size:14.5px; color:var(--dim); }

/* Reveal on scroll, off the main thread where the browser supports it. */
.reveal { opacity:0; transform: translateY(18px); }
@supports (animation-timeline: view()) {
  .reveal {
    animation: reveal 1ms linear both;
    animation-timeline: view();
    animation-range: entry 8% cover 26%;
  }
  @keyframes reveal { to { opacity:1; transform:none; } }
}
@supports not (animation-timeline: view()) {
  .reveal { opacity:1; transform:none; }
}

.privacy li { font-size:15px; color:var(--dim); margin: 0 0 9px 20px; }
.privacy strong { color:var(--text); font-weight:600; }

footer { padding: 44px 0 68px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--faint); }
footer a:hover { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:1ms !important; animation-delay:0ms !important; transition-duration:1ms !important; }
  html { scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; }
}

/* Start affordance. Sits over both screens, because pressing it starts the room, not one
   player, which is the whole point being demonstrated. */
.stage-start {
  position:absolute; inset:0; z-index:3; display:flex; gap:12px;
  align-items:center; justify-content:center;
  font: inherit; font-size:15px; font-weight:600; color: var(--text);
  background: rgba(6,6,8,.55); backdrop-filter: blur(3px);
  border:0; cursor:pointer; border-radius:14px;
  transition: opacity .35s ease, visibility .35s ease;
}
.stage-start-mark {
  width:44px; height:44px; border-radius:50%;
  background: rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 6px 18px rgba(0,0,0,.45);
  position:relative;
}
.stage-start-mark::after {
  content:""; position:absolute; left:52%; top:50%; translate:-50% -50%;
  border-left: 13px solid var(--text);
  border-top: 8px solid transparent; border-bottom: 8px solid transparent;
}
.stage-start:hover .stage-start-mark { background: rgba(255,255,255,.15); }
.stage-start:active { scale: .995; }
.stage.is-live .stage-start { opacity:0; visibility:hidden; pointer-events:none; }

/* Only one side ever carries sound, which is the answer to "will we hear it twice".
   It sits with the other stage controls rather than inside the picture: a control small
   enough to read as a caption on the video is a control nobody presses. */
.sound[aria-pressed="true"] { background: var(--raised); color: var(--text); border-color: var(--line-2); }
@media (prefers-reduced-motion: reduce) {
  .pic .frame, .pic .poster, .stage-start { transition:none; }
}

/* When the embeds are blocked, the screens keep their posters and the demo keeps running
   on the room clock alone. Better an honest still than a third party's error card. */
.stage.is-fallback .pic .frame { display:none; }
.stage.is-fallback .stage-start { opacity:0; visibility:hidden; pointer-events:none; }
.stage.is-fallback .sound { display:none; }

/* Document pages: support and privacy. Same material as the rest of the site, because a
   support page that looks like a different product is the moment somebody stops trusting
   the thing they just installed. Narrower measure than the marketing page, since these
   are read rather than scanned. */
.doc { max-width: 760px; margin: 0 auto; padding: 96px 24px 0; }
.doc h1 { font-size: clamp(34px, 5vw, 46px); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; }
.doc .updated { margin-top: 14px; font-size: 13px; color: var(--faint); }
.doc h2 {
  margin-top: 52px; font-size: 20px; font-weight: 650; letter-spacing: -.018em;
  padding-top: 26px; border-top: 1px solid var(--line);
}
.doc h3 { margin-top: 30px; font-size: 16px; font-weight: 650; letter-spacing: -.012em; }
.doc p { margin-top: 12px; color: var(--dim); font-size: 15.5px; }
.doc ul { margin-top: 14px; padding-left: 20px; }
.doc li { color: var(--dim); font-size: 15.5px; margin-bottom: 9px; }
.doc strong { color: var(--text); font-weight: 600; }
.doc a[href] { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.doc a[href]:hover { text-decoration-color: var(--text); }
.doc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em;
  background: var(--raised); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px;
}

/* A question and its answer, raised off the page so a long list of them stays scannable. */
.qa {
  margin-top: 14px; padding: 20px 22px;
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.qa h3 { margin-top: 0; }
.qa p:first-of-type { margin-top: 10px; }
.doc-cta {
  margin-top: 20px; padding: 24px;
  background: var(--raised); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.doc-cta p:first-child { margin-top: 0; }

/* An index, because somebody arrives at a support page with a symptom, not with an
   appetite for eight answers. Pure anchors: :target does the highlight, so finding your
   problem costs no JavaScript. */
.doc-index {
  margin-top: 22px; padding: 0; list-style:none;
  display:grid; gap:2px 22px; grid-template-columns: repeat(auto-fit, minmax(272px,1fr));
}
.doc-index li { margin:0; font-size:14px; }
.doc-index a[href] {
  display:block; padding:6px 0; color: var(--dim);
  text-decoration:none; border-bottom:1px solid transparent;
  transition: color 180ms var(--ease);
}
.doc-index a[href]:hover { color: var(--text); }
.qa { scroll-margin-top: 84px; transition: background 320ms var(--ease), border-color 320ms var(--ease); }
.qa:target { background: var(--raised-2); border-color: var(--line-2); }
/* A support answer is a column of text, so its picture is sized to the text rather than
   stretched across the card. */
.qa .mini { margin-bottom: 18px; max-width: 360px; }
.qa .wire { margin-top: 0; margin-bottom: 18px; max-width: 420px; }
.qa .wire .mini-s { width: 116px; height: 66px; }

/* The policy's two lists are a ledger: a solid rail for what leaves the machine, a broken
   one for what never does. The distinction is the whole document, so it should not be two
   identical bulleted lists. */
.ledger { list-style:none; padding-left:0; margin-top:16px; }
.ledger li {
  position:relative; margin:0 0 2px; padding: 11px 0 11px 18px;
  border-left: 2px solid transparent;
}
.ledger-in li { border-left-color: var(--line-2); }
.ledger-out li { border-left: 2px dashed rgba(255,255,255,.22); }
.ledger-perm li { border-left-color: var(--line); }
.ledger-perm strong { display:block; margin-bottom:2px; }

/* The room that dropped and came back: the link breaks, the position waits, both resume. */
.w-drop .wire-line { animation: dropLine 5.2s var(--ease) infinite; }
.w-drop .wire-pip { animation: dropPip 5.2s var(--ease) infinite; }
.w-drop .mini-d { animation: dropDot 5.2s step-end infinite; }
@keyframes dropLine { 0%,32% { opacity:1; } 40%,66% { opacity:.22; } 74%,100% { opacity:1; } }
@keyframes dropPip {
  0% { left:0; opacity:0; }
  10%,32% { left:34%; opacity:1; }
  40%,66% { left:34%; opacity:.3; }
  76% { left:34%; opacity:1; }
  92%,100% { left:100%; opacity:0; }
}
@keyframes dropDot {
  0%,35% { background: var(--good); }
  35.01%,70% { background: var(--info); }
  70.01%,100% { background: var(--good); }
}