/* Online screen recorder explainer animation (online-screen-recorder page).
   Without JS (or with reduced motion) the figure shows its final state: the recording finished, link ready. */
.on-fig { margin: 24px 0 8px; }
.on-card { position: relative; overflow: clip; background: var(--card); border-radius: 30px; padding: 18px 18px 14px; box-shadow: 0 6px 0 rgba(11,36,64,.08), 0 26px 60px rgba(11,36,64,.11); display: grid; gap: 12px; }
.on-stage { position: relative; display: grid; place-items: center; padding: 26px 6px 6px; }

/* Generic browser window */
.on-win { position: relative; width: min(100%, 520px); }
.on-frame { border: 3px solid var(--navy); border-radius: 16px; background: #fff; box-shadow: 0 5px 0 var(--navy); overflow: hidden; }
.on-tabs { display: flex; align-items: flex-end; gap: 10px; height: 26px; padding: 0 10px; background: #C9D9EA; }
.on-lights { display: flex; gap: 4px; align-self: center; }
.on-lights b { width: 8px; height: 8px; border-radius: 50%; background: #fff; opacity: .85; }
.on-tab { display: flex; align-items: center; gap: 6px; width: 120px; height: 20px; padding: 0 8px; background: #fff; border-radius: 8px 8px 0 0; }
.on-tab i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 1.5px var(--navy); }
.on-tab span { height: 5px; flex: 1; border-radius: 3px; background: #C9D9EA; }
.on-bar { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; background: #fff; border-bottom: 3px solid var(--navy); }
.on-nav { flex: none; display: flex; gap: 6px; color: #8CA3BB; }
.on-nav svg { width: 13px; height: 13px; }
.on-addr { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px; border-radius: 999px; background: var(--bg); color: var(--navy); }
.on-addr svg { flex: none; width: 11px; height: 11px; }
.on-addr span { font: 600 12px/1 ui-monospace, "SF Mono", Menlo, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Viewport with stacked layers */
.on-vp { position: relative; aspect-ratio: 2.15 / 1; background: #F4F9FE; overflow: hidden; }
.on-layer { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; }
.on-layer.is-on, .on-fig:not(.is-js) .on-rec { opacity: 1; }
.on-page { z-index: 1; display: grid; place-items: center; align-content: center; gap: 10px; padding: 10px; }
.on-bars { display: grid; gap: 6px; justify-items: center; width: 60%; }
.on-bars i { display: block; height: 8px; border-radius: 4px; background: #D5E3F2; }
.on-bars i:nth-child(1) { width: 62%; height: 12px; background: #B9CEE4; }
.on-bars i:nth-child(2) { width: 100%; }
.on-bars i:nth-child(3) { width: 76%; }
.on-recbtn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 14px; background: var(--rec); color: #fff; border: 3px solid var(--navy); box-shadow: 0 4px 0 var(--navy); font: 800 15px/1 var(--display); transition: transform .12s ease, box-shadow .12s ease; }
.on-recbtn::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.on-recbtn.is-press { transform: translateY(3px); box-shadow: 0 1px 0 var(--navy); }

/* Share picker (generic) */
.on-picker { z-index: 3; display: grid; place-items: center; background: rgba(11,36,64,.28); }
.on-pcard { width: 86%; max-width: 360px; padding: 8px 10px 10px; background: #fff; border: 3px solid var(--navy); border-radius: 14px; box-shadow: 0 5px 0 var(--navy); display: grid; gap: 7px; }
.on-ptitle { font: 800 12px/1.1 var(--display); color: var(--navy); }
.on-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.on-tile { position: relative; display: grid; gap: 4px; justify-items: center; padding: 6px 4px 5px; border: 2.5px solid var(--navy); border-radius: 10px; background: var(--bg); color: var(--navy); font: 700 11px/1.15 var(--display); text-align: center; transition: background-color .2s; }
.on-tile svg { width: 34px; height: 24px; }
.on-tile.is-sel { background: var(--sun); box-shadow: 0 3px 0 var(--navy); }
.on-tick { position: absolute; top: -8px; right: -6px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; opacity: 0; transition: opacity .2s; }
.on-tick svg { width: 9px; height: 9px; }
.on-tile.is-sel .on-tick { opacity: 1; }

/* Recording */
.on-rec { z-index: 2; background: var(--navy); }
.on-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.on-rec::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px var(--rec); pointer-events: none; }
.on-top { position: absolute; z-index: 1; left: 10px; top: 10px; right: 10px; display: flex; justify-content: space-between; align-items: center; }
.on-timer { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 7px; border-radius: 999px; background: #fff; border: 2.5px solid var(--navy); box-shadow: 0 2px 0 var(--navy); font: 700 12px/1 ui-monospace, "SF Mono", Menlo, monospace; color: var(--navy); }
.on-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--rec); }
.on-dot.is-live { animation: on-blink 1.2s steps(2, jump-none) infinite; }
@keyframes on-blink { 50% { opacity: .25; } }
.on-stop { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 7px; border-radius: 999px; background: var(--rec); border: 2.5px solid var(--navy); box-shadow: 0 2px 0 var(--navy); color: #fff; font: 800 12px/1 var(--display); transition: transform .12s ease, box-shadow .12s ease; }
.on-stop::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: #fff; }
.on-stop.is-press { transform: translateY(2px); box-shadow: 0 0 0 var(--navy); }
.on-mic { position: absolute; z-index: 1; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 7px; border-radius: 999px; background: #fff; border: 2.5px solid var(--navy); box-shadow: 0 2px 0 var(--navy); color: var(--navy); }
.on-mic svg { width: 13px; height: 13px; }
.on-meter { display: flex; align-items: center; gap: 2px; height: 14px; }
.on-meter i { display: block; width: 3px; height: 14px; border-radius: 2px; background: #2FA866; transform-origin: 50% 50%; transform: scaleY(.55); }
.on-meter i:nth-child(2) { transform: scaleY(.85); }
.on-meter i:nth-child(3) { transform: scaleY(.45); }
.on-meter i:nth-child(4) { transform: scaleY(.7); background: var(--sun); }
.on-meter i:nth-child(5) { transform: scaleY(.3); background: #C9D9EA; }
.on-fig.is-js.is-live .on-meter i { animation: on-lvl .9s ease-in-out infinite alternate; }
.on-fig.is-js.is-live .on-meter i:nth-child(2) { animation-duration: .7s; animation-delay: -.2s; }
.on-fig.is-js.is-live .on-meter i:nth-child(3) { animation-duration: 1.1s; animation-delay: -.5s; }
.on-fig.is-js.is-live .on-meter i:nth-child(4) { animation-duration: .8s; animation-delay: -.1s; }
.on-fig.is-js.is-live .on-meter i:nth-child(5) { animation-duration: 1s; animation-delay: -.7s; }
@keyframes on-lvl { from { transform: scaleY(.2); } to { transform: scaleY(1); } }

/* Share link pill */
.on-pill { position: absolute; z-index: 4; left: 50%; bottom: 10px; translate: -50% 0; max-width: calc(100% - 20px); display: flex; align-items: center; gap: 8px; padding: 5px 6px 5px 12px; background: #fff; border: 3px solid var(--navy); border-radius: 999px; box-shadow: 0 4px 0 var(--navy); color: var(--navy); transition: opacity .35s ease, transform .35s cubic-bezier(.3,1.5,.5,1); }
.on-pill-url { min-width: 0; font: 600 12px/1.2 ui-monospace, "SF Mono", Menlo, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.on-copied { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 6px; border-radius: 999px; background: var(--sun); border: 2px solid var(--navy); font: 800 11px/1 var(--display); }
.on-copied svg { width: 11px; height: 11px; }
.on-fig.is-js .on-pill.is-off { opacity: 0; transform: translateY(14px); }

/* Sticker and cursor */
.on-sticker { position: absolute; z-index: 6; top: -18px; right: -8px; display: flex; align-items: center; gap: 7px; padding: 6px 12px 6px 8px; background: var(--sun); border: 3px solid var(--navy); border-radius: 12px; box-shadow: 0 4px 0 var(--navy); font: 800 14px/1 var(--display); color: var(--navy); white-space: nowrap; transform: rotate(4deg); transition: transform .4s cubic-bezier(.3,1.6,.5,1), opacity .25s; }
.on-sticker svg { flex: none; width: 24px; height: 24px; }
.on-fig.is-js .on-sticker.is-off { opacity: 0; transform: rotate(4deg) scale(.4); }
.on-cursor { position: absolute; z-index: 7; left: 0; top: 0; width: 22px; height: 22px; opacity: 0; pointer-events: none; transition: transform .9s cubic-bezier(.4,0,.2,1), opacity .3s; filter: drop-shadow(0 2px 2px rgba(11,36,64,.35)); }
.on-cursor.is-on { opacity: 1; }
.on-cursor svg { width: 100%; height: 100%; }

/* Caption + controls */
.on-foot { display: flex; align-items: center; gap: 12px; min-height: 40px; }
.on-step { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--sun); border: 3px solid var(--navy); box-shadow: 0 3px 0 var(--navy); font: 800 14px/1 var(--display); color: var(--navy); }
.on-cap { flex: 1; min-width: 0; margin: 0; font-size: 15px; line-height: 1.35; color: var(--body); }
.on-cap b { color: var(--navy); }
.on-btn { flex: none; display: none; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 12px; border: 2.5px solid var(--navy); background: #fff; color: var(--navy); font: 700 13px/1 var(--display); cursor: pointer; box-shadow: 0 3px 0 var(--navy); }
.on-btn:active { translate: 0 2px; box-shadow: 0 1px 0 var(--navy); }
.on-btn svg { width: 12px; height: 12px; }
.on-steps { margin: 0; padding: 0 4px; list-style: none; display: grid; gap: 6px; font-size: 14.5px; color: var(--body); counter-reset: on; }
.on-steps li { display: flex; gap: 8px; }
.on-steps li::before { counter-increment: on; content: counter(on); flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: var(--sun); border: 2px solid var(--navy); font: 800 12px/1 var(--display); color: var(--navy); }
.on-fig.is-js .on-steps { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.on-fig.is-js .on-btn { display: inline-flex; }
.on-fig:not(.is-js) .on-foot { display: none; }

@media (max-width: 560px) {
  .on-card { padding: 14px 12px 12px; border-radius: 24px; }
  .on-stage { padding: 24px 2px 4px; }
  .on-vp { aspect-ratio: 1.75 / 1; }
  .on-sticker { font-size: 12px; padding: 5px 9px 5px 6px; right: -4px; top: -20px; }
  .on-sticker svg { width: 20px; height: 20px; }
  .on-pcard { width: 92%; padding: 6px 7px 8px; }
  .on-tile { font-size: 10px; padding: 5px 2px 4px; }
  .on-tile svg { width: 28px; height: 20px; }
  .on-cap { font-size: 14px; }
  .on-pill-url { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .on-dot.is-live, .on-fig.is-js.is-live .on-meter i { animation: none; }
}
/* Break out of the narrow text column on wide screens, like the other explainers. */
@media (min-width: 900px) {
  .on-fig { margin-left: calc(50% - min(440px, 50vw - 24px)); margin-right: calc(50% - min(440px, 50vw - 24px)); }
}