/* Rebuilt takes (scenes.js): the Stage's demo Mac drawn in HTML, CSS and SVG. The whole screen is laid out in the
   recording's own pixels (1440 × 936, measured on stage-landing3/mezz.mp4) and scaled as one unit, so it stays sharp at
   any size. Only transform, opacity and clip-path move. No real logos: the Stage's apps are generic, so are these. */

.scene { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity .45s var(--ease-camera);
  contain: layout paint; }
.scene.is-on { opacity: 1; }
.scene[hidden] { display: block; visibility: hidden; }
.sc { position: absolute; left: 0; top: 0; width: 1440px; height: 936px; transform-origin: 0 0;
  font: 500 13px/1.25 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  color: #e6e6e8; -webkit-font-smoothing: antialiased; user-select: none; }
.sc * { box-sizing: border-box; }
/* Everything jumps to its state at once: a reset, a jump to the end, reduced motion. */
.sc.is-instant, .sc.is-instant * { transition: none !important; }
.sc.is-paused * { animation-play-state: paused !important; }

/* Type sizes are the recording's: its 1440 px are a 1728 pt screen, so 13 pt reads 10.8 px (measured on the frames). */
/* MARK: Desktop — the Stage's wallpaper (sampled: navy #1a183f top, teal-blue lower left, violet lower right) */
.sc-wall { position: absolute; inset: 0;
  background:
    radial-gradient(120% 70% at 18% 108%, rgba(20, 70, 110, .55), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(80, 22, 92, .7), transparent 62%),
    radial-gradient(140% 60% at 60% -10%, rgba(24, 34, 70, .9), transparent 70%),
    linear-gradient(160deg, #1b1a40 0%, #172242 38%, #191c3a 62%, #241638 100%); }
.sc-wall::after { content: ""; position: absolute; inset: 0; opacity: .5;
  background: radial-gradient(160% 120% at 120% 30%, transparent 58%, rgba(120, 140, 220, .07) 62%, transparent 68%),
    radial-gradient(150% 120% at 125% 40%, transparent 66%, rgba(120, 140, 220, .05) 70%, transparent 76%); }

.sc-menubar { position: absolute; left: 0; top: 0; width: 1440px; height: 30px; background: rgba(12, 14, 34, .28); }
.sc-menubar span, .sc-menubar b { position: absolute; top: 7px; font-size: 11px; line-height: 16px; color: #e8e8ea; white-space: nowrap; }
.sc-menubar b { font-weight: 700; }
.sc-menubar svg { position: absolute; top: 8px; }
.sc-mb-group { position: absolute; inset: 0; transition: opacity .5s var(--ease-camera); }
.sc-mb-group.is-out { opacity: 0; }

.sc-dock { position: absolute; left: 463px; top: 864px; width: 514px; height: 64px; border-radius: 18px;
  background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13);
  transition: left .5s var(--ease-camera), width .5s var(--ease-camera); }
.sc-dock i { position: absolute; top: 9px; width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 6px rgba(0, 0, 0, .25);
  transition: opacity .5s var(--ease-enter), transform .5s var(--ease-enter); }
.sc-dock i.is-new { opacity: 0; transform: scale(.6); }
.sc-dock .sc-run { position: absolute; top: 58px; left: 0; width: 4px; height: 4px; border-radius: 50%; background: #c9cbd0;
  transition: transform .7s var(--ease-camera); }

/* The corner's HUD (the volume bar) and banners (a download finished, dark mode), as the Stage draws them. */
.sc-hud { position: absolute; right: 36px; top: 40px; width: 230px; height: 52px; z-index: 4; }
.sc-hud .hud { position: absolute; right: 0; top: 0; height: 50px; border-radius: 14px; background: rgba(44, 44, 47, .96);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 12px 32px rgba(0, 0, 0, .35); display: flex; align-items: center; gap: 12px;
  padding: 0 18px; transition: opacity .35s var(--ease-enter), transform .45s var(--ease-enter); }
.sc-hud .hud.is-in { opacity: 0; transform: translateY(-8px); }
.sc-hud .hud.is-out { opacity: 0; transform: translateY(-4px); }
.sc-hud .hud--vol { width: 230px; }
.sc-hud .hud--vol .bar { display: block; flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.sc-hud .hud--vol .bar i { display: block; height: 100%; background: #e8e8ea; transform-origin: 0 50%; transition: transform .6s var(--ease-camera); }
.sc-hud .hud--note { width: 230px; }
.sc-hud .hud--note b { font-size: 11px; font-weight: 600; color: #ececee; white-space: nowrap; }

/* MARK: Windows */
/* A window is placed by one transform (translate + scale to its rect) and its own height: a take's new layout morphs
   it there. Coming and going it fades and settles a few points (the individual `translate`, beside the placement). */
.sc-win { position: absolute; left: 0; top: 0; border-radius: 10px; background: #1f1f21; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 22px 70px rgba(0, 0, 0, .5);
  transform-origin: 0 0; transition: transform .75s var(--ease-camera), height .75s var(--ease-camera), opacity .6s var(--ease-camera),
    translate .6s var(--ease-enter); }
.sc-win.is-small { translate: 0 14px; }
.sc-win.is-plain { background: none; box-shadow: none; overflow: visible; }
.sc-win.is-back .lights i { background: #4a4a4d; }
.sc-body { position: absolute; inset: 0; transition: opacity .35s ease; }
.sc-body.is-leaving { opacity: 0; }
.sc-body.is-coming { opacity: 0; }
.sc-win .lights { position: absolute; left: 11px; top: 9px; z-index: 1; }
.sc-win .lights i { position: absolute; top: 0; width: 12px; height: 12px; border-radius: 50%; }
.sc-win .lights i:nth-child(1) { left: 0; background: #fe5f57; }
.sc-win .lights i:nth-child(2) { left: 16px; background: #febc2e; }
.sc-win .lights i:nth-child(3) { left: 32px; background: #28c840; }
/* A window behind the front one: grey lights (the colour rules above outrank `.is-back .lights i` by order). */
.sc-win.is-back .lights i:nth-child(n) { background: #4a4a4d; }
.sc-win .ttl { position: absolute; z-index: 1; top: 9px; font-size: 10.9px; font-weight: 500; color: #8f8f93; }
.sc-win.is-off { opacity: 0; pointer-events: none; }


.sc-mail .side { position: absolute; left: 0; top: 0; width: 293px; height: 100%; background: #28282a; }
.sc-mail .ttl { left: 76px; }
.sc-mail .msg { position: absolute; left: 6px; width: 281px; height: 62px; border-radius: 8px; padding: 8px 10px 0; }
.sc-mail .msg.is-sel { background: #1d58a8; }
.sc-mail .msg b { display: block; font-size: 10.9px; font-weight: 600; color: #e9e9eb; }
.sc-mail .msg em { position: absolute; right: 10px; top: 9px; font-style: normal; font-size: 9.6px; color: #9a9a9e; }
.sc-mail .msg.is-sel em { color: #d7e4f7; }
.sc-mail .msg s { display: block; text-decoration: none; margin-top: 4px; font-size: 10px; font-weight: 600; color: #d6d6d8; }
.sc-mail .msg u { display: block; text-decoration: none; margin-top: 4px; font-size: 9.6px; font-weight: 400; color: #a2a2a6;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-mail .msg.is-sel u, .sc-mail .msg.is-sel s, .sc-mail .msg.is-sel b { color: #fff; }
.sc-mail .tools { position: absolute; left: 319px; top: 5px; display: flex; gap: 7px; }
.sc-mail .tools span { height: 21px; padding: 0 9px; border-radius: 5px; background: #303033; font-size: 10px; font-weight: 600;
  line-height: 21px; color: #dcdcde; }
.sc-mail .read { position: absolute; left: 312px; top: 47px; width: 520px; }
.sc-mail .read .from { font-size: 10.9px; color: #9b9b9f; }
.sc-mail .read h4 { margin: 10px 0 0; font-size: 18px; font-weight: 700; color: #d9d9db; letter-spacing: -.01em; }
.sc-mail .read p { margin: 15px 0 0; font-size: 11.3px; line-height: 20px; font-weight: 400; color: #d2d2d4; }
.sc-mail .read .att { display: flex; gap: 6px; margin-top: 12px; }
.sc-mail .read .att span { display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 6px; background: #2b2b2e;
  font-size: 9.6px; color: #cfcfd2; white-space: nowrap; }


.sc-calendar .ttl { left: 76px; }
.sc-calendar .today { position: absolute; left: 842px; top: 5px; width: 66px; height: 21px; border-radius: 5px; background: #333436;
  font-size: 10px; font-weight: 600; line-height: 21px; text-align: center; color: #e2e2e4; }
.sc-calendar .day { position: absolute; top: 34px; width: 121px; text-align: center; }
.sc-calendar .day small { display: block; font-size: 9.2px; color: #9d9da1; }
.sc-calendar .day big { display: block; margin-top: 2px; font-size: 17.5px; font-weight: 400; color: #d9d9db; }
.sc-calendar .day.is-today big { color: #e0434f; font-weight: 600; }
.sc-calendar .hr { position: absolute; left: 14px; font-size: 8.4px; color: #9a9a9e; }
.sc-calendar .ln { position: absolute; left: 56px; width: 852px; height: 1px; background: #29292c; }
.sc-calendar .ev { position: absolute; width: 114px; border-radius: 3px; background: #213242; padding: 5px 5px 0; overflow: hidden; }
.sc-calendar .ev b { display: block; font-size: 10.1px; font-weight: 600; color: #3b8fdc; white-space: nowrap; }
.sc-calendar .ev small { display: block; margin-top: 2px; font-size: 8.7px; color: #2f6ea6; }
/* The event Iris moves: drawn at its new place and carried back to the old one, so the move is one transform. */
.sc-calendar .ev--move { transition: transform .8s cubic-bezier(.65, 0, .35, 1); }
.sc-calendar .ev--move .hot { position: absolute; inset: 0; border-radius: inherit; background: #2173c2; opacity: 0; transition: opacity .3s ease; }
.sc-calendar .ev--move .hot b { position: absolute; left: 5px; top: 5px; color: #fff; }
.sc-calendar .ev--move .hot small { position: absolute; left: 5px; top: 20px; color: #d6e8fa; }
.sc-calendar .ev--move.is-hot .hot { opacity: 1; }
.sc-calendar .ghost { position: absolute; font-size: 8.7px; color: #c9c9cc; opacity: 0; transition: opacity .25s ease; }
.sc-calendar .ghost.is-on { opacity: 1; }

/* MARK: The island at the notch — one black shape cut by clip-path (hidden, the compact pill, the card, the result) */
.sc-isl { position: absolute; left: 470px; top: 0; width: 500px; height: 340px; z-index: 5;
  clip-path: inset(0 125px 340px 125px round 0 0 18px 18px);
  transition: clip-path .55s cubic-bezier(.32, .72, 0, 1); }
/* The fill runs 60 px past the box each side: the hands-free wings (up to 583 px) outgrow it; the clip cuts the rest. */
.sc-isl::before { content: ""; position: absolute; inset: 0 -60px; background: #000; }
.sc-isl .glow { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; opacity: 0; transition: opacity .6s ease;
  background: radial-gradient(60% 30% at 50% var(--gy, 25%), rgba(140, 90, 230, .28), transparent 70%); }
.sc-isl[data-shape="compact"] .glow { --gy: 18%; }
.sc-isl[data-shape="ask"] .glow { --gy: 22%; }
.sc-isl[data-shape="result"] .glow { --gy: 34%; }
.sc-isl.is-speaking .glow { opacity: 1; }
.sc-isl .ic { position: absolute; top: 7px; width: 18px; height: 18px; opacity: 0; transition: opacity .25s ease; }
.sc-isl .ic.is-on { opacity: 1; }
.sc-isl .icl { position: absolute; left: 0; top: 0; transition: transform .55s cubic-bezier(.32, .72, 0, 1); transform: translateX(88px); }
.sc-isl .icr { position: absolute; left: 0; top: 0; transition: transform .55s cubic-bezier(.32, .72, 0, 1); transform: translateX(394px); }
.sc-isl.is-wide .icl { transform: translateX(22px); }
.sc-isl.is-wide .icr { transform: translateX(456px); }
.sc-isl[data-shape="ask"] .icl { transform: translateX(54px); }
.sc-isl[data-shape="ask"] .icr { transform: translateX(428px); }
.sc-isl .txt { position: absolute; left: 0; top: 33px; width: 500px; height: 18px; }
.sc-isl .say { position: absolute; left: 0; width: 100%; text-align: center; font-size: 10.1px; font-weight: 600; line-height: 16px;
  color: #f3f3f5; white-space: nowrap; transition: opacity .28s ease, transform .28s ease; }
.sc-isl .say.is-out { opacity: 0; transform: translateY(-3px); }
.sc-isl .say.is-in { opacity: 0; transform: translateY(3px); }
.sc-isl .say.is-dim { color: #77777c; }
.sc-isl .say.is-quote { color: #b9b9be; font-weight: 500; }
/* A line Iris is working on, or the words she heard: a lighter copy of the text, shown through a moving window. */
.sc-isl .say .hi { position: absolute; left: 0; top: 0; width: 100%; color: #fff; clip-path: inset(0 100% 0 0);
  animation: sc-shim 1.9s linear infinite; }
.sc-isl .say.is-quote .hi { animation: sc-sweep 2.2s cubic-bezier(.45, 0, .55, 1) 1 forwards; }
.sc-isl .say:not(.is-shim):not(.is-quote) .hi { display: none; }
@keyframes sc-shim { 0% { clip-path: inset(0 100% 0 0); } 30% { clip-path: inset(0 62% 0 22%); } 70% { clip-path: inset(0 8% 0 76%); }
  100% { clip-path: inset(0 0 0 100%); } }
@keyframes sc-sweep { 0% { clip-path: inset(0 78% 0 18%); } 55% { clip-path: inset(0 30% 0 44%); } 100% { clip-path: inset(0 100% 0 0); } }

.sc-isl .pane { position: absolute; left: 18px; width: 464px; opacity: 0; transform: translateY(-6px);
  transition: opacity .3s ease, transform .45s cubic-bezier(.32, .72, 0, 1); }
.sc-isl .pane.is-on { opacity: 1; transform: none; transition-delay: .12s; }
.sc-isl .box { border-radius: 12px; background: #1b1b1d; }
.sc-isl .pane--card { top: 51px; }
/* Fields (To, Subject, Attachments) as the app lays them: labels right of the middle, values left of it. */
.sc-isl .fields { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; row-gap: 3px; font-size: 9.4px; line-height: 13px; }
.sc-isl .fields i { font-style: normal; font-weight: 500; color: #8e8e93; text-align: right; white-space: nowrap; }
.sc-isl .fields span { font-weight: 600; color: #f0f0f2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-isl .pane--card .box { padding: 11px 0 10px; position: relative; overflow: hidden; }
.sc-isl .pane--card .body { padding: 9px 12px 0; font-size: 10px; line-height: 13.5px; font-weight: 500; color: #e6e6e8; }
.sc-isl .pane--card .body span { display: block; min-height: 13.5px; }
.sc-isl .pane--card .body .fade { color: #6a6a70; }
.sc-isl .btns { display: flex; gap: 8px; margin-top: 7px; }
.sc-isl .btns span { flex: 1; height: 25px; border-radius: 12.5px; text-align: center; font-size: 10px; font-weight: 600; line-height: 25px; }
.sc-isl .btns .no { background: #2c2c2f; color: #f0f0f2; }
.sc-isl .btns .yes { background: linear-gradient(90deg, #f6a463, #f48a4c); color: #fff; }
.sc-isl .btns svg { display: inline-block; vertical-align: -2px; margin-right: 7px; }
.sc-isl .pane--res { top: 50px; }
.sc-isl .pane--res .box { padding: 11px 12px 12px; position: relative; }
.sc-isl .pane--res b { display: block; margin-bottom: 6px; font-size: 10px; font-weight: 700; color: #f2f2f4; }
.sc-isl .pane--res .body { font-size: 10px; line-height: 13.5px; font-weight: 500; color: #e6e6e8; }
.sc-isl .pane--res .body:not(:empty) { padding-top: 8px; }
.sc-isl .pane--res .body span { display: block; }
.sc-isl .pane--res .body .fade { color: #6a6a70; }
.sc-isl .pane--ask { top: 50px; left: 51px; width: 398px; }
.sc-isl .pane--ask .btns { margin-top: 0; }

/* The island's icons: listening and speaking bars, the spinner, the sparkle, the mic, the speaker, the level pill. */
.sc-bars { display: flex; align-items: center; gap: 2px; height: 18px; }
.sc-bars b { width: 2px; height: 10px; border-radius: 1px; background: #cfe2ff; animation: sc-bar 1s ease-in-out infinite; }
.sc-bars--speak b { background: linear-gradient(#fff, #f6b48a); }
.sc-bars b:nth-child(2) { animation-delay: -.35s; } .sc-bars b:nth-child(3) { animation-delay: -.7s; }
.sc-bars b:nth-child(4) { animation-delay: -.2s; } .sc-bars b:nth-child(5) { animation-delay: -.55s; }
@keyframes sc-bar { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1.05); } }
.sc-dots { display: flex; gap: 2.5px; padding-top: 7px; }
.sc-dots b { width: 2.6px; height: 2.6px; border-radius: 50%; background: #e8e8ea; opacity: .8; }
.sc-spin { display: block; width: 15px; height: 15px; margin: 1px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 25%, #8f7cff 60%, #fff 100%);
  -webkit-mask: radial-gradient(circle, transparent 5.2px, #000 5.8px); mask: radial-gradient(circle, transparent 5.2px, #000 5.8px);
  animation: sc-spin 1.1s linear infinite; }
@keyframes sc-spin { to { transform: rotate(360deg); } }
.sc-pill { position: absolute; left: -3px; top: 2px; width: 22px; height: 15px; border-radius: 8px; background: #34c759;
  font-size: 8.5px; font-weight: 800; line-height: 15px; text-align: center; color: #0b3d18; }
.sc-pill.is-l2 { background: #2fe0d2; color: #063c3a; }
/* The accessibility level (ax_find, ax_tree): the orange pill, as read off stage-retakes4 at 160 s. */
.sc-pill.is-l3 { background: #f39a3c; color: #4a2405; }

/* The hands-free island (OverlayView HandsFreeEars, HandsFreeLight): notch-tall, the command in the left wing, the mode's
   light in the right ear. The light is HandsFreeLight.mint (0.45, 0.95, 0.8) under white, 18 x 7 pt; it swells 1.3x as a
   command runs, its glow brightening (shadow radius 4 -> 7). Both drawn at the Stage's scale (x 0.833). */
.sc-hfl { position: absolute; width: 15px; height: 5.8px; border-radius: 3px;
  background: linear-gradient(rgba(255, 255, 255, .95), rgb(115, 242, 204)); box-shadow: 0 0 3.3px rgba(115, 242, 204, .55);
  transition: transform .9s cubic-bezier(.4, 0, .2, 1); }
.sc-hfl::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 6px 1px rgba(115, 242, 204, .9);
  opacity: 0; transition: opacity .9s cubic-bezier(.4, 0, .2, 1); }
.sc-isl.is-swell .sc-hfl { transform: scale(1.3); transition-duration: .35s; }
.sc-isl.is-swell .sc-hfl::after { opacity: 1; transition-duration: .35s; }
.sc-isl .ic[data-ic="hf"] .sc-hfl { left: 1.5px; top: 6px; }
.sc-isl .hf { position: absolute; left: 0; top: 0; width: 500px; height: 31px; opacity: 0; transition: opacity .3s ease; }
.sc-isl[data-shape="ears"] .hf { opacity: 1; transition-delay: .15s; }
.sc-isl .hfl { position: absolute; left: -7.5px; top: 12.6px; transition: transform .55s cubic-bezier(.32, .72, 0, 1); }
.sc-isl .hfl .sc-hfl { position: relative; display: block; }
.sc-isl .hfw { position: absolute; left: 0; top: 0; width: 150px; height: 31px; }
.sc-isl .hfw span { position: absolute; right: 0; top: 0; font-size: 10.8px; font-weight: 500; line-height: 31px; white-space: nowrap;
  color: rgba(255, 255, 255, .92); transition: opacity .35s ease, transform .5s cubic-bezier(.32, .72, 0, 1); }
.sc-isl .hfw span.is-in { opacity: 0; transform: scale(.94); }
.sc-isl .hfw span.is-out { opacity: 0; transform: scale(.96); transition-duration: .25s; }

/* MARK: The conversation, written on the desktop's free side as the site's captions are (site/captions/gen_all.py) */
.sc-col { position: absolute; display: flex; flex-direction: column; justify-content: center; gap: 20px;
  font-family: var(--font); text-shadow: 0 1px 14px rgba(7, 9, 12, .75), 0 0 2px rgba(7, 9, 12, .5);
  transition: opacity .5s var(--ease-camera); }
.sc-col.is-gone { opacity: 0; }
.sc-col.is-small { gap: 16px; }
.sc-col .l { opacity: 0; transform: scale(.75); transform-origin: 0 100%; transition: opacity .12s ease-out, transform .12s ease-out; }
.sc-col .l.you { transform: none; }
.sc-col .l.is-on { opacity: 1; transform: none; }
.sc-col .l.is-past { opacity: .5; transition: opacity .6s ease; }
.sc-col .who { margin: 0; font-size: 18px; letter-spacing: .28em; font-weight: 500; color: var(--muted); }
.sc-col .iris .who span { background: linear-gradient(100deg, var(--cyan), var(--violet)); -webkit-background-clip: text;
  background-clip: text; color: transparent; text-shadow: none; }
.sc-col .tx { margin: 6px 0 0; font-size: 25px; font-weight: 300; line-height: 1.26; color: #dfe5ea; }
.sc-col .you .tx { font-size: 31px; color: var(--bone); }
.sc-col.is-small .who { font-size: 16px; }
.sc-col.is-small .tx { font-size: 21px; }
.sc-col.is-small .you .tx { font-size: 25px; }
.sc-col .ck { color: var(--cyan); text-shadow: 0 0 12px rgba(90, 235, 255, .8); }
.sc-col .time .tx { font-size: 18px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.sc-col .tm::before { content: "— "; } .sc-col .tm::after { content: " —"; }
.sc-col .st { background-image: linear-gradient(var(--bone), var(--bone)); background-repeat: no-repeat; background-position: 0 58%;
  background-size: 0% 2px; transition: background-size .45s cubic-bezier(.45, 0, .55, 1); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.sc-col .l.is-struck .st { background-size: 100% 2px; }
.sc-col .l.is-struck { opacity: .4; }
.sc-col .w { display: inline-block; opacity: 0; transform: translateY(4px); transition: opacity .16s ease-out, transform .16s ease-out; }
.sc-col .w.is-on { opacity: 1; transform: none; }
.sc-glow { display: inline-block; background: linear-gradient(100deg, #5AEBFF 0%, #4D9EFF 22%, #9E73FF 45%, #C9B8FF 52%, #4D9EFF 70%, #5AEBFF 100%);
  background-size: 220% 100%; background-position: 40% 50%; -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 0 9px rgba(90, 235, 255, .7)) drop-shadow(0 0 26px rgba(158, 115, 255, .55)); }

/* The drop's still, where the live orb cannot come (reduced motion, no WebGL): resting low left of the Dock. */
.sc-still { position: absolute; left: 312px; top: 763px; width: 170px; height: 170px; opacity: 0; transition: opacity .6s ease; }
.sc.has-still .sc-still { opacity: 1; }

/* MARK: The take's frame on the page */
/* «Watch the real take»: quiet, beside the tag under the frame, so it never covers the desktop or the drop. */
.screen__caption { position: relative; }
.screen__real { all: unset; position: absolute; right: 0; top: 0; font: 500 14px/1.6 var(--font); color: var(--muted); cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity .5s var(--ease-enter), color .3s; text-decoration: underline;
  text-decoration-color: rgba(139, 151, 163, .35); text-underline-offset: 4px; }
.screen__real.is-shown { opacity: 1; pointer-events: auto; }
.screen__real:hover { color: var(--bone); }
.screen__real:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 4px; }
@media (max-width: 860px) { .screen__real { position: static; align-self: flex-start; font-size: 13px; } }
.takes__note { transition: opacity .3s ease; }
.takes__note.is-swapping { opacity: 0; }
/* The page's drop over the content while it is on a demo Mac (orb.js `scene`; elsewhere it stays under the page). */
.orb-scene .orb-layer { z-index: 2; }

/* MARK: Finder (stage-landing3 at 37 s: Desktop, Documents, Downloads; a file per row) */
.sc-finder .ttl { left: 76px; color: #a9a9ad; }
.sc-finder .side { position: absolute; left: 0; top: 0; width: 100px; height: 100%; background: #28282a; padding-top: 30px; }
.sc-finder .side span { display: block; margin: 0 6px 2px; height: 19px; padding-left: 7px; border-radius: 5px; font-size: 9.6px; line-height: 19px; color: #d0d0d3; }
.sc-finder .side span.is-sel { background: #1d58a8; color: #fff; }
.sc-finder .list { position: absolute; left: 108px; right: 10px; top: 28px; }
.sc-finder .row { display: flex; align-items: center; gap: 7px; height: 20px; padding-left: 8px; border-radius: 5px; font-size: 9.8px; color: #dadadd;
  white-space: nowrap; overflow: hidden; transition: background .3s ease, color .3s ease; }
.sc-finder .row .ic { display: grid; place-items: center; width: 14px; }
.sc-finder .row.is-sel { background: #1d58a8; color: #fff; }
.sc-finder .row.is-new .nm { animation: sc-fresh .9s ease-out; }
@keyframes sc-fresh { from { color: #9fd0ff; } to { color: inherit; } }

/* MARK: Notes (stage-landing3 at 90 s) */
.sc-notes .ttl { left: 76px; }
.sc-notes .nbtn { position: absolute; right: 10px; top: 6px; height: 19px; padding: 0 9px; border-radius: 5px; background: #303033;
  font-size: 9px; font-weight: 600; line-height: 19px; color: #dcdcde; }
.sc-notes .side { position: absolute; left: 0; top: 0; width: 150px; height: 100%; background: #28282a; padding-top: 30px; }
.sc-notes .nt { margin: 0 6px 4px; padding: 5px 8px; border-radius: 6px; }
.sc-notes .nt b { display: block; font-size: 9.6px; font-weight: 700; color: #e6e6e8; }
.sc-notes .nt small { display: block; margin-top: 2px; font-size: 8.4px; color: #9a9a9e; }
.sc-notes .nt.is-sel { background: #1d58a8; } .sc-notes .nt.is-sel small { color: #d2e0f4; }
.sc-notes .body { position: absolute; left: 168px; top: 30px; right: 16px; }
.sc-notes .body h4 { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: #e4e4e6; }
.sc-notes .body p { margin: 0; font-size: 9.8px; line-height: 15.5px; color: #d6d6d8; transition: opacity .4s ease, transform .4s var(--ease-enter); }
.sc-notes .body p.is-new { opacity: 0; transform: translateY(3px); }

/* MARK: Music (stage-landing3 at 2 s): playlists, the list, the player */
.sc-music .side { position: absolute; left: 0; top: 0; width: 145px; height: 100%; background: #28282a; padding-top: 30px; }
.sc-music .side small { display: block; margin: 0 0 4px 14px; font-size: 8.4px; color: #8e8e93; }
.sc-music .side span { display: block; margin: 0 6px 2px; height: 20px; padding-left: 8px; border-radius: 5px; font-size: 9.6px; line-height: 20px; color: #d6d6d8; }
.sc-music .side span.is-sel { background: #1d58a8; color: #fff; }
.sc-music .side .np { position: absolute; left: 12px; bottom: 12px; font-style: normal; font-size: 8.4px; color: #8e8e93; white-space: nowrap; }
.sc-music .ttl { left: 76px; }
.sc-music h4 { position: absolute; left: 165px; top: 30px; margin: 0; font-size: 16px; font-weight: 700; color: #e6e6e8; }
.sc-music .tracks { position: absolute; left: 160px; right: 14px; top: 64px; }
.sc-music .tr { position: relative; height: 22px; padding-left: 10px; border-radius: 5px; font-size: 9.6px; line-height: 22px; color: #d6d6d8; }
.sc-music .tr.is-sel { background: #1d58a8; color: #fff; padding-left: 22px; }
.sc-music .tr .spk { position: absolute; left: 8px; top: 8px; width: 7px; height: 6px; background: #fff;
  clip-path: polygon(0 30%, 40% 30%, 100% 0, 100% 100%, 40% 70%, 0 70%); }
.sc-music .ctl { position: absolute; left: 145px; right: 0; bottom: 18px; display: flex; justify-content: center; gap: 22px; align-items: center; }

/* MARK: Safari (stage-retakes2 at 1 s): the tab, the address, the page */
.sc-safari .tab { position: absolute; left: 62px; top: 8px; font-size: 9px; color: #a9a9ad; max-width: 90px; overflow: hidden; white-space: nowrap; }
.sc-safari .url { position: absolute; left: 158px; top: 6px; width: 380px; height: 17px; border-radius: 5px; background: #2b2b2e;
  padding-left: 8px; font-size: 8.6px; line-height: 17px; color: #bdbdc1; white-space: nowrap; overflow: hidden; }
.sc-safari .web { position: absolute; left: 30px; right: 30px; top: 46px; bottom: 20px; }
.sc-safari .web h4 { margin: 0; font-size: 17px; font-weight: 700; color: #e4e4e6; }
.sc-safari .web p { margin: 10px 0 0; font-size: 9.8px; line-height: 15px; color: #cfcfd2; }
.sc-safari .links { position: absolute; left: 0; bottom: 10px; display: flex; flex-direction: column; gap: 12px; }
.sc-safari .links a { font-size: 8.6px; color: #3b8fdc; text-decoration: underline; }
/* A search's results and a shop (stage-retakes11 at 184 and 188 s): the result's title and address; one row an item, its
   button on the right, the cart's count top right. */
.sc-safari .res { margin-top: 13px; }
.sc-safari .res b { display: block; font-size: 8.7px; font-weight: 600; color: #3b8fdc; }
.sc-safari .res small { display: block; margin-top: 2px; font-size: 7px; color: #9a9a9e; }
.sc-safari .cart { position: absolute; right: 24px; top: 3px; display: flex; align-items: center; gap: 5px; font-size: 8.4px; color: #e6e6e8; }
.sc-safari .cart svg { width: 10px; height: 9px; }
.sc-safari .item { position: relative; height: 34.6px; padding-top: 6px; }
.sc-safari .item:first-of-type { margin-top: 8px; }
.sc-safari .item.has-ic { padding-left: 20px; }
.sc-safari .item .ic { position: absolute; left: 1px; top: 9px; }
.sc-safari .item .ic svg { width: 11px; height: 15px; }
.sc-safari .item b { display: block; font-size: 8.7px; font-weight: 600; color: #e2e2e4; }
.sc-safari .item small { display: block; margin-top: 2px; font-size: 7.2px; color: #a4a4a8; }
.sc-safari .item .add { position: absolute; right: 24px; top: 6px; width: 83px; height: 19px; border-radius: 4px; background: #303033;
  font-size: 7px; font-weight: 600; line-height: 19px; text-align: center; color: #dcdcde; transition: transform .16s ease-out; }
.sc-safari .item .add.is-press { transform: scale(.94); }
/* A shop (the hands-free section's demo, props.shop): tabs under the toolbar, a roomier address, a grid of products.
   Its type is a size up from the recordings' (the section shows the screen's middle only, closer). */
.sc-safari .tabs { position: absolute; left: 10px; right: 10px; top: 31px; height: 24px; display: flex; gap: 4px; }
.sc-safari .tb { position: relative; width: 168px; height: 24px; border-radius: 6px; padding: 0 12px; font-size: 10.5px; line-height: 24px;
  color: #8f8f93; white-space: nowrap; overflow: hidden; clip-path: inset(0 0 0 0 round 6px); transition: opacity .3s ease, clip-path .5s cubic-bezier(.32, .72, 0, 1); }
.sc-safari .tb::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #333336; opacity: 0;
  transition: opacity .35s ease; z-index: -1; }
.sc-safari .tb.is-on { color: #e6e6e8; }
.sc-safari .tb.is-on::before { opacity: 1; }
.sc-safari .tb.is-in { opacity: 0; clip-path: inset(0 100% 0 0 round 6px); }
.sc-safari .url--shop { left: 150px; top: 5px; height: 20px; width: 380px; font-size: 11px; line-height: 20px; color: #e6e6e8; padding-left: 10px; }
.sc-safari .url--shop .caret { display: inline-block; width: 1px; height: 12px; margin-left: 1px; vertical-align: -2px; background: #e6e6e8; opacity: 0; }
.sc-safari .url--shop.is-typing .caret { animation: sc-caret 1s steps(1) infinite; }
@keyframes sc-caret { 50% { opacity: 1; } }
.sc-safari .web--shop { left: 0; right: 0; top: 64px; bottom: 0; overflow: hidden; padding: 6px 30px 0; }
.sc-safari .web--shop .flow { opacity: 0; transition: opacity .6s ease, transform 1.15s cubic-bezier(.3, .1, .1, 1); }
.sc-safari .web--shop.is-shown .flow { opacity: 1; }
.sc-safari .sk { display: block; height: 8px; width: 78%; margin: 8px 0; border-radius: 4px; background: #333336; }
.sc-safari .sk--t { height: 12px; width: 42%; background: #3c3c40; }
.sc-safari .sk--s { width: 48%; }
.sc-safari .shop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.sc-safari .card { border-radius: 9px; background: #29292c; padding: 9px; display: flex; flex-direction: column; gap: 7px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); }
.sc-safari .card .img { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 6px;
  background: linear-gradient(140deg, #3a3a3f, #2e2e33); }
.sc-safari .card.is-pick .img { background: linear-gradient(140deg, #45454b, #343439); }
.sc-safari .card .sk { margin: 2px 0; width: 82%; }
.sc-safari .card .sk--s { width: 52%; }
.sc-safari .card b { font-size: 12.5px; font-weight: 600; line-height: 16px; color: #ececee; }
.sc-safari .buy { position: relative; display: block; height: 25px; border-radius: 6px; background: #e6e6e8; text-align: center;
  transition: transform .16s ease-out; }
.sc-safari .buy em { position: relative; font-style: normal; font-size: 11px; font-weight: 600; line-height: 25px; color: #1d1d1f; }
/* Hit: the mint of the hands-free light floods the button and rings it (an overlay that fades in: only opacity moves). */
.sc-safari .buy s { position: absolute; inset: 0; border-radius: inherit; background: #73f2cc; opacity: 0;
  box-shadow: 0 0 0 2.5px rgba(115, 242, 204, .45), 0 0 18px rgba(115, 242, 204, .55); transition: opacity .5s ease; }
.sc-safari .buy.is-hit s { opacity: 1; transition-duration: .25s; }
.sc-safari .buy.is-press { transform: scale(.94); }

/* The words said, under the window (the hands-free section's demo): «open Safari». */
.sc-cap { position: absolute; left: 0; right: 0; top: 404px; margin: 0; text-align: center; font-size: 17px; font-weight: 500;
  color: #f2f2f4; text-shadow: 0 1px 12px rgba(0, 0, 0, .8); opacity: 0; transform: translateY(6px); z-index: 4;
  transition: opacity .6s cubic-bezier(.25, 1, .5, 1), transform .6s cubic-bezier(.25, 1, .5, 1); }
.sc-cap::before { content: "«"; } .sc-cap::after { content: "»"; }
.sc-cap.is-shown { opacity: 1; transform: none; }

/* MARK: TextEdit, Preview, the built app */
.sc-textedit .ttl, .sc-preview .ttl, .sc-app .ttl { left: 66px; }
.sc-textedit .doc { position: absolute; left: 22px; right: 22px; top: 40px; }
.sc-textedit .doc h4 { margin: 0; font-size: 11px; font-weight: 600; color: #e2e2e4; }
.sc-textedit .doc p { margin: 12px 0 0; font-size: 9.8px; line-height: 15px; color: #d0d0d3; }
.sc-preview { background: #2a2a2c; }
.sc-preview .sheet { position: absolute; left: 14px; right: 14px; top: 30px; bottom: 14px; background: #e9e9ea; padding: 18px 20px; }
.sc-preview .sheet h4 { margin: 0 0 12px; font-size: 11px; font-weight: 800; color: #1c1c1e; }
.sc-preview .sheet i { display: block; height: 3px; margin: 0 0 7px; background: #c4c4c8; border-radius: 1px; }
.sc-preview .sheet i:nth-child(3n) { width: 70%; } .sc-preview .sheet i:nth-child(4n) { width: 86%; }
/* A table in TextEdit (`table`: the quotes compared, new-takes-5 at 155 s) and a document's real lines in Preview (the quote) */
.sc-textedit .tbl { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 8.4px; line-height: 12px; color: #d6d6d9; }
.sc-textedit .tbl th, .sc-textedit .tbl td { padding: 5px 6px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.sc-textedit .tbl thead th { font-weight: 700; color: #ececee; border-bottom-color: rgba(255, 255, 255, .22); }
.sc-textedit .tbl tbody th { font-weight: 600; color: #9c9ca1; white-space: nowrap; }
.sc-textedit .tbl td.is-mark { color: #73f2cc; font-weight: 700; }
.sc-preview .sheet .mt { display: block; font-size: 6.6px; line-height: 9.5px; color: #55555b; }
.sc-preview .sheet .qi, .sc-preview .sheet .qt { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; margin-top: 12px;
  font-size: 6.8px; line-height: 9px; color: #2c2c30; }
.sc-preview .sheet .qi span, .sc-preview .sheet .qi b { padding: 3px 0; border-bottom: 1px solid #d3d3d7; }
.sc-preview .sheet .qi b, .sc-preview .sheet .qt b { font-weight: 600; text-align: right; }
.sc-preview .sheet .qt { margin-top: 10px; row-gap: 3px; }
.sc-preview .sheet .qt span:nth-last-child(2), .sc-preview .sheet .qt b:last-child { font-weight: 800; font-size: 7.6px; color: #1c1c1e; }
.sc-preview .sheet .nt { display: block; margin-top: 12px; font-size: 6.2px; line-height: 9px; color: #6a6a70; }

/* MARK: A web form in Safari (new-takes-5 at 70 s: a supplier portal): the fields Iris fills, the button it leaves alone */
.sc-form .tab { position: absolute; left: 62px; top: 8px; font-size: 9px; color: #a9a9ad; max-width: 90px; overflow: hidden; white-space: nowrap; }
.sc-form .url { position: absolute; left: 158px; top: 6px; width: 380px; height: 17px; border-radius: 5px; background: #2b2b2e;
  padding-left: 8px; font-size: 8.6px; line-height: 17px; color: #bdbdc1; white-space: nowrap; overflow: hidden; }
.sc-form .sc-webform { position: absolute; left: 34px; right: 34px; top: 46px; }
.sc-form .sc-webform h4 { margin: 0; font-size: 17px; font-weight: 700; color: #e4e4e6; }
.sc-form .sc-webform p { margin: 8px 0 4px; font-size: 9.6px; line-height: 14px; color: #cfcfd2; }
.sc-form .fd { width: 312px; margin-top: 7px; }
.sc-form .fd small { display: block; margin-bottom: 4px; font-size: 7.6px; font-weight: 600; color: #a9a9ad; }
.sc-form .box { display: block; height: 22px; padding: 0 8px; border-radius: 5px; background: #2b2b2e; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
  font-size: 9px; line-height: 22px; color: #e6e6e8; white-space: nowrap; overflow: hidden; transition: box-shadow .3s ease; }
.sc-form .fd.is-focus .box { box-shadow: inset 0 0 0 1px #3b8fdc, 0 0 0 3px rgba(59, 143, 220, .35); }
.sc-form .caret { display: none; width: 1px; height: 11px; margin-left: 1px; vertical-align: -2px; background: #e6e6e8; opacity: 0; }
.sc-form .fd.is-focus .caret { display: inline-block; animation: sc-caret 1s steps(1) infinite; }
.sc-form .submit { display: inline-block; margin-top: 14px; height: 24px; padding: 0 22px; border-radius: 5px; background: #1a6fd6;
  font-size: 8.6px; font-weight: 600; line-height: 24px; color: #fff; }

.sc-app .pane { position: absolute; left: 20px; top: 36px; }
.sc-app .pane h4 { margin: 0; font-size: 15px; font-weight: 700; color: #e4e4e6; }
.sc-app .pane small { display: block; margin-top: 4px; font-size: 8.6px; color: #8e8e93; }

/* MARK: Terminal (stage-landing3 at 708 s) */
.sc-terminal { background: #141415; }
.sc-terminal .ttl { left: 0; right: 0; text-align: center; color: #9a9a9e; font-size: 9px; }
.sc-terminal pre { position: absolute; left: 12px; right: 12px; top: 28px; margin: 0; font: 400 8.6px/12.6px ui-monospace, "SF Mono", Menlo, monospace;
  color: #e4e4e6; white-space: pre-wrap; }

/* MARK: The whiteboard Iris draws on (screen_draw explanation: stage-retakes11 at 216 s) */
.sc-explain .glass { position: absolute; inset: 0; border-radius: 16px; background: rgba(62, 70, 80, .78);
  box-shadow: 0 0 0 1.5px rgba(120, 200, 255, .55), 0 0 22px rgba(90, 160, 255, .35), 0 0 0 4px rgba(150, 110, 255, .18), 0 24px 60px rgba(0, 0, 0, .4); }
.sc-explain .hd { position: absolute; left: 16px; top: 14px; font-size: 7.6px; font-weight: 700; letter-spacing: .06em; color: #a9b2bc; }
.sc-explain .hd i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #4d9eff; margin-right: 6px; vertical-align: 1px; }
.sc-explain .cl { position: absolute; right: 16px; top: 12px; opacity: .7; }
.sc-explain .art { position: absolute; left: 0; top: 34px; overflow: visible; }
.sc-explain .ln path { fill: none; stroke: #e6eaee; stroke-width: 1.6; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s cubic-bezier(.45, 0, .2, 1); }
.sc-explain .ln.is-on path { stroke-dashoffset: 0; }
.sc-explain .ln.is-on path:nth-child(2) { transition-delay: .15s; } .sc-explain .ln.is-on path:nth-child(3) { transition-delay: .3s; }
.sc-explain .ln.is-on path:nth-child(4) { transition-delay: .4s; } .sc-explain .ln.is-on path:nth-child(5) { transition-delay: .55s; }
.sc-explain .fl { opacity: 0; transition: opacity .6s ease .9s; }
.sc-explain .fl.is-on { opacity: 1; }
.sc-explain .coffee { fill: rgba(205, 130, 70, .7); stroke: #d89a5c; stroke-width: 1; }
.sc-explain .water { fill: rgba(80, 150, 255, .55); stroke: #6aa8ff; stroke-width: 1; }
.sc-explain .flame path { fill: #e98a3c; }
.sc-explain .flame { opacity: 0; transform: translateY(6px); transform-box: fill-box; transition: opacity .5s ease, transform .6s var(--ease-enter); }
.sc-explain .flame.is-on { opacity: 1; transform: none; }
.sc-explain .lb { opacity: 0; transition: opacity .45s ease 1.2s; }
.sc-explain .lb.is-on { opacity: 1; }
.sc-explain .lb path { stroke: rgba(230, 234, 238, .7); stroke-width: .8; fill: none; }
.sc-explain .lb circle { fill: #e6eaee; }
.sc-explain .lb rect { fill: #1d2228; }
.sc-explain .lb circle.b { fill: #4d9eff; } .sc-explain .lb circle.o { fill: #e98a3c; } .sc-explain .lb circle.w { fill: #e6eaee; }
.sc-explain .lb text { font: 700 8px -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; fill: #f2f2f4; }
.sc-explain .steps { position: absolute; left: 16px; right: 16px; top: 318px; margin: 0; padding: 10px 0 0; list-style: none;
  border-top: 1px solid rgba(255, 255, 255, .1); }
.sc-explain .steps li { display: flex; gap: 8px; margin-bottom: 8px; font-size: 8px; line-height: 11px; font-weight: 600; color: #eef0f2;
  opacity: 0; transition: opacity .45s ease; }
.sc-explain .steps li.is-on { opacity: 1; } .sc-explain .steps li.is-past { opacity: .45; }
.sc-explain .steps b { flex: none; width: 13px; height: 13px; border-radius: 50%; background: #4d7fd6; font-size: 7px; line-height: 13px; text-align: center; }
.sc.is-instant .sc-explain * { transition: none !important; }

/* MARK: The guide's marks (show_on_screen: stage-r3 at 12–15 s): the menu opened, the ring drawn round its item, the card */
.sc-marks { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.sc-guide { position: absolute; inset: 0; transition: opacity .4s ease; }
.sc-guide.is-in, .sc-guide.is-out { opacity: 0; }
.sc-guide .menu-hi { position: absolute; top: 4px; height: 22px; border-radius: 5px; background: rgba(255, 255, 255, .14); }
.sc-guide .drop { position: absolute; top: 30px; width: 196px; padding: 4px 0; border-radius: 8px; background: rgba(40, 40, 46, .92);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 14px 36px rgba(0, 0, 0, .4); }
.sc-guide .drop span { display: block; height: 24px; padding-left: 14px; font-size: 10.5px; line-height: 24px; color: #e8e8ea; }
.sc-guide .ring { position: absolute; left: -6px; overflow: visible; }
.sc-guide .ring path { fill: none; stroke: #8fa8ff; stroke-width: 2.4; stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(120, 160, 255, .8)); stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s cubic-bezier(.45, 0, .2, 1) .2s; }
.sc-guide.is-drawn .ring path { stroke-dashoffset: 0; }
.sc-guide .gcard { position: absolute; top: 44px; width: 272px; height: 106px; border-radius: 12px; background: rgba(58, 62, 72, .88);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 16px 40px rgba(0, 0, 0, .4); }
.sc-guide .gcard .st { position: absolute; left: 14px; top: 14px; font-size: 8px; font-weight: 700; letter-spacing: .05em; color: #aab3bd; text-transform: uppercase; }
.sc-guide .gcard .st i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #4d9eff; margin-right: 6px; vertical-align: 1px; }
.sc-guide .gcard .cl { position: absolute; right: 14px; top: 10px; opacity: .7; }
.sc-guide .gcard p { position: absolute; left: 14px; top: 34px; margin: 0; font-size: 12.5px; font-weight: 500; color: #eef0f2; }
.sc-guide .gcard small { position: absolute; left: 14px; bottom: 18px; font-size: 8.4px; color: #a9b0b8; }
.sc-guide .gcard .done { position: absolute; right: 14px; bottom: 12px; width: 72px; height: 22px; border-radius: 11px; background: #4f7fc6;
  font-size: 10px; font-weight: 600; line-height: 22px; text-align: center; color: #fff; }

/* MARK: Additions for pdf, moka, summary, mistake, work */
/* The L3 pill (reading the screen: ax_* tools, stage-r3 at 9 s), orange as the app draws it. */
.sc-pill.is-l3 { background: #ff9f43; color: #4a2300; }
/* The guide's step on the menu bar and the chip naming the marked item (stage-r3 at 11.5 and 12.6 s). */
.sc-guide--bar .ring { position: absolute; }
.sc-guide .chip { position: absolute; height: 22px; padding: 0 11px 0 9px; border-radius: 11px; background: rgba(30, 30, 34, .94);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); font-size: 10.5px; font-weight: 600; line-height: 22px; color: #eef0f2; white-space: nowrap;
  opacity: 0; transition: opacity .4s ease .7s; }
.sc-guide.is-drawn .chip { opacity: 1; }
.sc-guide .chip i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #8fb6ff; margin-right: 7px; vertical-align: 1px; }
/* A web inbox in Safari (stage-r3 at 108 s). */
.sc-webmail .url { position: absolute; left: 70px; top: 6px; right: 14px; height: 17px; border-radius: 5px; background: #2b2b2e;
  padding-left: 8px; font-size: 8.6px; line-height: 17px; color: #bdbdc1; white-space: nowrap; overflow: hidden; }
.sc-webmail .web { position: absolute; left: 30px; right: 24px; top: 46px; }
.sc-webmail .web h4 { margin: 0; font-size: 17px; font-weight: 700; color: #e4e4e6; }
.sc-webmail .web small { display: block; margin: 8px 0 14px; font-size: 10.5px; color: #b9b9bd; }
.sc-webmail .th { margin-bottom: 10px; }
.sc-webmail .th b { display: block; font-size: 9.8px; font-weight: 600; color: #dcdcde; }
.sc-webmail .th em { display: block; margin-top: 2px; font-style: normal; font-size: 8px; color: #9a9a9e; }
/* A window behind the front one greys its lights (the rule above loses to the lights' nth-child colours). */
.sc-win.is-back .lights i:nth-child(n) { background: #4a4a4d; }

/* MARK: Additions for the proofs section's «It asks first» scene (site/src/assets/js/proofs.js) */
/* The confirmation's 30 s, compressed: twelve ticks going out clockwise. The app's timeout is silent; this is the site's. */
.sc-timer { position: relative; display: block; width: 18px; height: 18px; }
.sc-timer i { position: absolute; left: 8.2px; top: 1px; width: 1.6px; height: 4.2px; border-radius: 1px; background: #f2f2f4;
  transform-origin: 0.8px 8px; transition: opacity .2s ease; }
.sc-timer.is-run i { opacity: .16; }
/* Keys pressed (⌥⎋), large above the Dock, as a keystroke overlay would show them. */
.sc-keys { position: absolute; left: 0; right: 0; top: 724px; z-index: 6; display: flex; justify-content: center; pointer-events: none; }
.sc-keys .keys { position: absolute; display: flex; gap: 12px; transition: opacity .3s ease, transform .45s var(--ease-enter); }
.sc-keys .keys.is-in { opacity: 0; transform: translateY(10px) scale(.96); }
.sc-keys .keys.is-out { opacity: 0; transform: scale(.98); transition-duration: .25s; }
.sc-keys span { width: 92px; height: 92px; border-radius: 20px; display: grid; place-items: center; font-size: 46px; font-weight: 400;
  color: #f2f2f4; background: rgba(44, 44, 47, .92); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 1px rgba(255, 255, 255, .07),
  0 18px 44px rgba(0, 0, 0, .45); }
/* A shop's checkout in Safari: the steps, the order, the payment step. Generic, no real marks. */
.sc-checkout { background: #f4f4f6; }
.sc-checkout::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30px; background: #2a2a2d; }
.sc-checkout .tab { position: absolute; z-index: 1; left: 62px; top: 8px; font-size: 9px; color: #a9a9ad; }
.sc-checkout .url { position: absolute; z-index: 1; left: 158px; top: 6px; width: 380px; height: 17px; border-radius: 5px; background: #3a3a3d;
  padding-left: 8px; font-size: 8.6px; line-height: 17px; color: #d0d0d3; white-space: nowrap; overflow: hidden; }
.sc-checkout .shop { position: absolute; left: 0; right: 0; top: 30px; bottom: 0; color: #1c1c1e; }
.sc-checkout .brand { position: absolute; left: 30px; top: 18px; font-size: 14px; font-weight: 800; letter-spacing: -.01em; }
.sc-checkout .steps { position: absolute; right: 30px; top: 20px; display: flex; gap: 18px; font-size: 9.6px; color: #9a9aa0; }
.sc-checkout .steps span { display: flex; align-items: center; gap: 6px; }
.sc-checkout .steps i { width: 15px; height: 15px; border-radius: 50%; font-style: normal; font-size: 8px; font-weight: 700; line-height: 15px;
  text-align: center; background: #e2e2e6; color: #8e8e93; }
.sc-checkout .steps .is-done { color: #5c5c61; } .sc-checkout .steps .is-done i { background: #c9d9ef; color: #2a64b4; }
.sc-checkout .steps .is-at { color: #1c1c1e; font-weight: 700; } .sc-checkout .steps .is-at i { background: #2a64b4; color: #fff; }
.sc-checkout .order { position: absolute; left: 30px; top: 66px; width: 290px; height: 330px; border-radius: 12px; background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); padding: 18px; }
.sc-checkout .pic { display: block; width: 72px; height: 72px; border-radius: 10px;
  background: radial-gradient(circle at 60% 32%, #f2d79b 0 14%, transparent 15%), linear-gradient(160deg, #e9e4dc, #cfc6b8); }
.sc-checkout .order b { display: block; margin-top: 14px; font-size: 12px; font-weight: 700; }
.sc-checkout .order small { display: block; margin-top: 3px; font-size: 9.6px; color: #7a7a80; }
.sc-checkout .order em { position: absolute; right: 18px; top: 104px; font-style: normal; font-size: 11px; font-weight: 600; }
.sc-checkout .sum { position: absolute; left: 18px; right: 18px; bottom: 18px; display: grid; grid-template-columns: 1fr auto; row-gap: 8px;
  padding-top: 14px; border-top: 1px solid #ececef; font-size: 10px; color: #5c5c61; }
.sc-checkout .sum b { margin: 0; font-size: 12px; color: #1c1c1e; }
.sc-checkout .pay { position: absolute; left: 340px; right: 30px; top: 66px; height: 330px; border-radius: 12px; background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); padding: 18px; }
.sc-checkout .pay h5 { margin: 0 0 14px; font-size: 12px; font-weight: 700; }
.sc-checkout .pay .line { height: 26px; margin-bottom: 10px; border-radius: 7px; background: #f1f1f4; }
.sc-checkout .pay .line.short { width: 60%; }
.sc-checkout .cardrow { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border-radius: 9px;
  box-shadow: inset 0 0 0 1.5px #2a64b4; font-size: 10.5px; font-weight: 600; }
.sc-checkout .cardrow i { width: 26px; height: 17px; border-radius: 3px; background: linear-gradient(135deg, #5c6b80, #2f3a4a); }
.sc-checkout .cardrow small { margin-left: auto; font-size: 9.6px; font-weight: 500; color: #7a7a80; }
.sc-checkout .paybtn, .sc-checkout .nextbtn { position: absolute; left: 18px; right: 18px; bottom: 18px; height: 36px; border-radius: 9px;
  background: #2a64b4; color: #fff; font-size: 11.5px; font-weight: 700; line-height: 36px; text-align: center; }
.sc-checkout .nextbtn { background: #e2e2e6; color: #5c5c61; }