/* The install guide (download/index.html, built by download/build.mjs). Loaded after site.css and
   stage.css, which give it the dark stage, the floating nav, buttons, the questions and the footer.
   The step pictures are drawn in cqw inside .scr (16:10), so each one scales as a single picture.
   They play while on screen (.shot.play, set by assets/download.js) and rest on their last frame
   otherwise, which is also what reduced motion shows. Apricot dashed rings mark what to click, as in
   the app's own welcome. */

/* ---------- One platform at a time; started or not ---------- */
.guide[data-os="mac"] [data-only="win"], .guide[data-os="win"] [data-only="mac"] { display: none !important; }
.guide:not(.started) .g-when-started, .guide.started .g-when-ready { display: none !important; }

/* ---------- Nav: the platform switch rides along once the hero's is out of sight ---------- */
.guide .nav-pill { position: relative; }
.guide .nav-sw { margin-left: 4px; transition: opacity .3s, visibility .3s; }
@media (max-width: 960px) {
  .guide .nav-sw { margin-left: auto; opacity: 0; visibility: hidden; }
  .guide.past .nav-sw { opacity: 1; visibility: visible; }
  .guide .nav-pill { min-height: 56px; }
}
.g-progress { position: absolute; left: 28px; right: 28px; bottom: 0; height: 2px; border-radius: 2px; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .3s; }
.guide.past .g-progress { opacity: 1; }
.g-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--apricot-top), var(--apricot)); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* The Mac / Windows switch */
.g-switch { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--hair-2); }
.g-switch button { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: none; color: var(--t2); font: 600 14.5px/1 var(--font-body); cursor: pointer; transition: color .25s, background .25s, box-shadow .25s; }
.g-switch button svg { width: 15px; height: 15px; flex: none; }
.g-switch button:hover { color: var(--t1); }
.g-switch button[aria-pressed="true"] { background: var(--t1); color: #1E1E1E; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .6); }
.g-switch button:focus-visible { outline: 2px solid var(--apricot); outline-offset: 2px; }
.hero-sw button { min-height: 42px; padding: 0 20px; font-size: 15.5px; }

/* ---------- Hero ---------- */
.g-hero { position: relative; overflow-x: clip; isolation: isolate; padding-top: calc(env(safe-area-inset-top, 0px) + clamp(112px, 11vw, 140px)); text-align: center; }
.g-hero .wrap { display: grid; justify-items: center; }
.g-hero h1 { margin: 24px auto 0; max-width: 12em; font-size: clamp(42px, 6.3vw, 90px); line-height: .95; letter-spacing: -0.048em; color: var(--t1); text-wrap: balance; }
.g-hero h1 .o { display: block; padding-bottom: .06em; background: linear-gradient(180deg, #FFB898 0%, var(--apricot-top) 35%, var(--apricot) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.g-hero .lede { margin: 22px auto 0; max-width: 600px; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.55; }
.g-get { margin-top: 32px; width: 100%; display: grid; justify-items: center; }
.g-get .cta { margin-top: 0; }

/* The file on its way */
.g-filecard { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 16px; width: min(640px, 100%); padding: 14px 18px 14px 14px; border-radius: 20px; text-align: left;
  background: radial-gradient(80% 140% at 0% 0%, rgba(255, 138, 92, .1), transparent 60%), var(--card); box-shadow: inset 0 0 0 1px var(--hair), 0 30px 60px -40px rgba(0, 0, 0, .8); }
.g-fi { position: relative; overflow: hidden; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: linear-gradient(180deg, var(--apricot-top), var(--apricot)); color: #1E1E1E; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.g-fi svg { width: 22px; height: 22px; animation: g-fall 1.6s var(--glide) infinite; }
@keyframes g-fall { 0% { transform: translateY(-120%); opacity: 0; } 30% { opacity: 1; } 60%, 100% { transform: translateY(0); opacity: 1; } }
.g-ft { display: grid; gap: 3px; min-width: 0; }
.g-ft b { font-size: 16.5px; color: var(--t1); }
.g-ft > span { font-size: 13.5px; line-height: 1.45; color: var(--t3); }
.g-again { font-size: 14px; color: var(--t2); white-space: nowrap; }
.g-again a { color: var(--t1); font-weight: 600; text-underline-offset: 3px; }
@media (max-width: 620px) { .g-filecard { grid-template-columns: auto minmax(0, 1fr); } .g-again { grid-column: 1 / -1; } }

/* On a phone: Cinemac is for the computer */
.g-phone { display: none; gap: 14px; justify-items: center; max-width: 440px; }
.g-phone p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--t2); }
.guide.phone .g-phone { display: grid; }
.guide.phone .g-get .cta, .guide.phone .g-filecard { display: none; }

.g-for { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 14px; margin-top: 44px; }
.g-picked { flex-basis: 100%; min-height: 1em; font-size: 13.5px; color: var(--t3); }
.g-path { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 900px; margin: 22px auto 0; padding: 0; }
.g-path a { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px 9px 11px; border-radius: 999px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px var(--hair); color: var(--t2); font: 500 14px/1 var(--font-body); text-decoration: none; transition: color .25s, background .25s, box-shadow .25s; }
.g-path a .mono { font-size: 11.5px; color: var(--t3); transition: color .25s; }
.g-path a i { font: 500 10px/1 var(--font-mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--t3); }
.g-path a:hover { color: var(--t1); background: rgba(255, 255, 255, .07); }
.g-path a[aria-current] { color: var(--t1); background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px var(--hair-2); }
.g-path a[aria-current] .mono { color: var(--apricot); }

/* ---------- The steps ---------- */
.g-steps { padding-top: clamp(48px, 6vw, 88px); }
.g-step { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding-block: clamp(40px, 5.5vw, 76px); scroll-margin-top: 84px; }
.g-step + .g-step { border-top: 1px solid var(--hair); }
.g-copy { display: grid; gap: 16px; justify-items: start; }
.g-num { display: flex; align-items: center; gap: 12px; }
.g-num .mono { display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 8px; border-radius: 999px; font-size: 13px; color: var(--t1); box-shadow: inset 0 0 0 1px var(--hair-2); transition: background .4s, color .4s, box-shadow .4s; }
.g-step.on .g-num .mono { background: linear-gradient(180deg, var(--apricot-top), var(--apricot)); color: #1E1E1E; box-shadow: 0 10px 26px -12px rgba(255, 138, 92, .8); }
.g-tag { padding: 5px 9px; border-radius: 999px; font: 500 10.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--t2); box-shadow: inset 0 0 0 1px var(--hair-2); }
.g-step h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.04; letter-spacing: -0.035em; color: var(--t1); }
.g-copy > p { margin: 0; font-size: 17.5px; line-height: 1.62; color: var(--t2); }
.g-copy b { color: var(--t1); font-weight: 600; }
.g-nw { white-space: nowrap; }
.g-copy kbd, .g-trouble kbd { display: inline-grid; place-items: center; min-width: 1.7em; height: 1.6em; padding: 0 .4em; margin: 0 .08em; border-radius: .35em; vertical-align: .08em; font: 600 .78em/1 var(--font-body); color: var(--t1); background: linear-gradient(180deg, #2E2C2A, #1F1E1C); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 2px 0 #0B0B0A; }
.g-step h2 kbd { font-size: .6em; vertical-align: .22em; border-radius: .3em; }
.g-tip { display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--hair); font-size: 14.5px; line-height: 1.5; color: var(--t2); }
.g-tip svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--t3); }
@media (max-width: 900px) { .g-step { grid-template-columns: minmax(0, 1fr); } }

/* The frame around each picture */
.shot { position: relative; margin: 0; padding: clamp(5px, .7vw, 9px); border-radius: clamp(14px, 1.8vw, 22px); background: linear-gradient(180deg, #2B2826 0%, #141312 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 1px #000, 0 50px 130px -60px rgba(255, 224, 208, .18), 0 30px 60px -30px rgba(0, 0, 0, .9); }
.scr { position: relative; aspect-ratio: 16 / 10; overflow: hidden; container-type: inline-size; isolation: isolate; border-radius: clamp(9px, 1.2vw, 14px); background: #0B0B0B; color: #1d1d1f; font-family: var(--font-body); line-height: 1.3; text-align: left; -webkit-user-select: none; user-select: none; }
.scr *, .scr *::before, .scr *::after { box-sizing: border-box; }
.scr.win { --ui: "Segoe UI", "Segoe UI Variable Text", var(--font-body); }
.scr.mac { --ui: var(--font-body); }

/* ---------- The pictures: shared parts ---------- */
.g-wall { position: absolute; inset: 0; }
.g-wall.mac { background: radial-gradient(70% 90% at 80% 110%, #E89A74 0%, transparent 60%), radial-gradient(60% 70% at 10% 0%, #4B4466 0%, transparent 70%), linear-gradient(165deg, #2C2B3E 0%, #6E5370 48%, #D88B6E 100%); }
.g-wall.win { background: radial-gradient(45% 60% at 50% 62%, #8FB7E8 0%, transparent 70%), radial-gradient(70% 90% at 50% 70%, #3B6FB4 0%, transparent 75%), linear-gradient(180deg, #0E2244 0%, #16335F 100%); }
.g-mbar { position: absolute; z-index: 6; left: 0; right: 0; top: 0; height: 2.8cqw; display: flex; align-items: center; gap: 1.6cqw; padding: 0 1.6cqw; font: 500 1.05cqw/1 var(--font-body); color: #fff; background: rgba(20, 18, 24, .35); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); white-space: nowrap; }
.g-mbar > svg { width: 1.25cqw; height: 1.25cqw; margin-top: -.15cqw; }
.g-mbar b { font-weight: 700; }
.g-mbar .sp { flex: 1; }
.g-tbar { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; height: 4cqw; display: flex; align-items: center; gap: .7cqw; padding: 0 1.2cqw; background: rgba(32, 34, 40, .9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: .08cqw solid rgba(255, 255, 255, .08); }
.g-tbar > i { width: 2.5cqw; height: 2.5cqw; border-radius: .5cqw; background: rgba(255, 255, 255, .1); display: grid; place-items: center; }
.g-tbar > i.st { background: none; color: #4CC2FF; }
.g-tbar > i.st svg { width: 1.6cqw; height: 1.6cqw; }
.g-tbar .sp { flex: 1; }
.g-tray { display: flex; align-items: center; gap: .9cqw; color: #fff; }
.g-tray > svg { width: 1.25cqw; height: 1.25cqw; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.g-clock { font: 400 .85cqw/1.3 var(--ui); color: #fff; text-align: right; white-space: nowrap; }

/* Windows (the app kind) */
.g-w { position: absolute; overflow: hidden; border-radius: 1cqw; background: #fff; box-shadow: 0 2.4cqw 6cqw rgba(0, 0, 0, .5), 0 0 0 .07cqw rgba(0, 0, 0, .35); }
.scr.win .g-w { border-radius: .6cqw; }
.g-tb { position: relative; height: 2.6cqw; display: flex; align-items: center; gap: .55cqw; padding: 0 1cqw; background: #ECEAE7; border-bottom: .07cqw solid rgba(0, 0, 0, .08); }
.g-tb > i { width: .85cqw; height: .85cqw; border-radius: 50%; background: rgba(0, 0, 0, .16); }
.g-tb .ttl { position: absolute; left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: .5cqw; font: 600 1cqw/1 var(--font-body); color: #555; pointer-events: none; }
.g-tb .ttl svg { width: 1.2cqw; height: 1.2cqw; }
.g-tb.dk { background: #1C1B1A; border-color: rgba(255, 255, 255, .06); }
.g-tb.dk > i { background: rgba(255, 255, 255, .16); }
.g-tb.w { height: 2.8cqw; padding: 0 0 0 1cqw; background: #F3F3F3; }
.g-tb.w.dk { background: #1C1B1A; }
.g-tbt { display: flex; align-items: center; gap: .6cqw; font: 400 .95cqw/1 var(--ui); color: #222; }
.g-tbt svg { width: 1.2cqw; height: 1.2cqw; }
.g-tb.dk .g-tbt { color: #DDD; }
.g-caps { margin-left: auto; display: flex; height: 100%; }
.g-caps svg { width: 4.2cqw; height: 100%; padding: 0 1.6cqw; fill: none; stroke: #333; stroke-width: .9; }
.g-tb.dk .g-caps svg { stroke: #CCC; }
.g-app { display: block; flex: none; }

/* The pointer, and the ring where it clicks */
.g-ptr { position: absolute; z-index: 40; left: var(--t1x, 60cqw); top: var(--t1y, 40cqw); width: 2.3cqw; height: 2.3cqw; margin: -.27cqw 0 0 -.48cqw; pointer-events: none; filter: drop-shadow(0 .2cqw .35cqw rgba(0, 0, 0, .35)); }
.g-ptr.two { left: var(--t2x, 60cqw); top: var(--t2y, 40cqw); }
.g-ptr svg { display: block; width: 100%; height: 100%; }
.g-ptr path { fill: #111; stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }
.scr.win .g-ptr path { fill: #fff; stroke: #111; }
.g-ptr i { position: absolute; left: .48cqw; top: .27cqw; width: 4.4cqw; height: 4.4cqw; margin: -2.2cqw 0 0 -2.2cqw; border-radius: 50%; border: .25cqw solid rgba(255, 138, 92, .95); opacity: 0; }
.shot.play .g-ptr i { animation: g-click var(--dur) linear calc(var(--dur) * var(--at1, 2)) infinite; }
.shot.play .g-ptr i.b { animation-delay: calc(var(--dur) * var(--at2, 2)); }
@keyframes g-click { 0% { opacity: .95; transform: scale(.15); } 7% { opacity: 0; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
.shot.play [data-t="1"] { animation: g-press var(--dur) linear calc(var(--dur) * var(--at1, 2) - .06s) infinite; }
.shot.play [data-t="2"] { animation: g-press var(--dur) linear calc(var(--dur) * var(--at2, 2) - .06s) infinite; }
@keyframes g-press { 0% { filter: brightness(.82); } 3% { filter: none; } 100% { filter: none; } }
.ring { position: relative; }
.ring::after { content: ""; position: absolute; inset: -.5cqw; border-radius: inherit; border: .17cqw dashed rgba(255, 138, 92, .95); pointer-events: none; animation: g-ring 1.8s ease-in-out infinite; }
@keyframes g-ring { 50% { opacity: .35; } }

/* A macOS alert */
.g-alert { position: absolute; z-index: 8; display: grid; justify-items: center; gap: 1cqw; width: 31cqw; padding: 2.2cqw 2cqw 1.8cqw; border-radius: 2cqw; text-align: center; color: #1d1d1f;
  background: rgba(240, 238, 235, .95); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 2.4cqw 6cqw rgba(0, 0, 0, .45), 0 0 0 .07cqw rgba(0, 0, 0, .2); }
.g-alert .big { width: 5.6cqw; height: 5.6cqw; }
.g-alert b { font: 700 1.25cqw/1.32 var(--font-body); }
.g-alert > span { font: 400 1cqw/1.42 var(--font-body); color: #555; }
.g-alert .btns { display: grid; grid-template-columns: 1fr 1fr; gap: .8cqw; width: 100%; margin-top: .6cqw; }
.g-alert .btns span { position: relative; height: 2.6cqw; display: grid; place-items: center; border-radius: .7cqw; background: rgba(0, 0, 0, .08); font: 500 1.05cqw/1 var(--font-body); color: #1d1d1f; }
.g-alert .btns .ok { background: #2F7CF6; color: #fff; }

/* Cinemac's own windows */
.g-w.cm { background: #141312; color: #F7F5F2; }
.g-cmb { position: absolute; inset: 2.6cqw 0 0; }
.scr.win .g-cmb { top: 2.8cqw; }
.g-h { font: 800 2.4cqw/1.05 var(--font-body); letter-spacing: -.03em; color: #F7F5F2; }
.g-p { font: 400 1.15cqw/1.4 var(--font-body); color: rgba(247, 245, 242, .65); }
.g-p b { color: #F7F5F2; font-weight: 600; }
.g-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6cqw; height: 3.2cqw; min-width: 15cqw; padding: 0 2cqw; border-radius: .8cqw; background: linear-gradient(180deg, #FFA17D, #FF8A5C); color: #1E1E1E; font: 700 1.2cqw/1 var(--font-body); white-space: nowrap; }
.g-btn svg { width: 1.2cqw; height: 1.2cqw; }
.g-small { font: 400 1cqw/1 var(--font-body); color: rgba(247, 245, 242, .5); }
.g-small u { color: rgba(247, 245, 242, .85); text-decoration: none; }
.g-tg { position: relative; flex: none; width: 3.3cqw; height: 1.9cqw; border-radius: 1cqw; background: #D9D7D3; }
.g-tg i { position: absolute; top: .2cqw; left: .2cqw; width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: #fff; box-shadow: 0 .1cqw .3cqw rgba(0, 0, 0, .3); }
.g-tg.on { background: #2F7CF6; }
.g-tg.on i { left: 1.6cqw; }
.g-w.cm .g-tg.on { background: #F7F5F2; }
.g-w.cm .g-tg.on i { background: #1E1E1E; box-shadow: none; }

/* ---------- 1. A browser's downloads ---------- */
.s-mac-open, .s-win-open { --dur: 7s; --at1: .62; }
.g-w.br { left: 6cqw; top: 5.6cqw; width: 88cqw; height: 52cqw; background: #121212; }
.scr.win .g-w.br { top: 2.6cqw; }
.g-w.br .g-tb { background: #E4E1DD; }
.g-w.br .tab { align-self: flex-end; display: flex; align-items: center; gap: .6cqw; height: 2cqw; margin-left: 1.4cqw; padding: 0 1.4cqw 0 1cqw; border-radius: .6cqw .6cqw 0 0; background: #F7F5F2; font: 500 .95cqw/1 var(--ui); color: #333; }
.g-w.br .g-tb.w .tab { margin-left: -.2cqw; }
.g-w.br .tab svg { width: 1.15cqw; height: 1.15cqw; }
.g-url { display: flex; align-items: center; gap: 1.2cqw; height: 3.2cqw; padding: 0 1.2cqw; background: #F7F5F2; border-bottom: .07cqw solid rgba(0, 0, 0, .1); }
.g-url .bk { font: 500 1.3cqw/1 var(--font-body); letter-spacing: .5cqw; color: #9A958F; }
.g-url .addr { flex: 1; display: flex; align-items: center; height: 2.1cqw; padding: 0 1.2cqw; border-radius: 1.05cqw; background: #E9E6E2; font: 400 .95cqw/1 var(--ui); color: #444; }
.g-dlb { position: relative; display: grid; place-items: center; width: 2.4cqw; height: 2.4cqw; border-radius: 50%; color: #2F7CF6; background: rgba(47, 124, 246, .12); }
.g-dlb > svg:first-child { width: 1.3cqw; height: 1.3cqw; }
.g-dlb .prog { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); opacity: 0; }
.g-dlb .prog circle { fill: none; stroke: #2F7CF6; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 100.6; stroke-dashoffset: 0; }
.g-page { position: absolute; left: 0; right: 0; top: 5.8cqw; bottom: 0; display: grid; justify-items: start; align-content: start; gap: .3cqw; padding: 4.6cqw 0 0 6cqw; background: radial-gradient(60% 50% at 50% 0%, rgba(255, 224, 208, .1), transparent 70%), #121212; }
.scr.win .g-page { top: 6cqw; }
.g-page b { font: 800 3.1cqw/1.02 var(--font-body); letter-spacing: -.045em; color: #F7F5F2; }
.g-page b.o { color: #FF9A70; }
.g-page > i { width: 30cqw; height: .8cqw; margin-top: 1.8cqw; border-radius: .4cqw; background: rgba(247, 245, 242, .14); }
.g-page > i.s { width: 22cqw; margin-top: .4cqw; }
.g-page .cards { display: flex; gap: 1.2cqw; margin-top: 2.6cqw; }
.g-page .cards i { width: 15cqw; height: 13cqw; border-radius: 1cqw; background: #1C1B1A; box-shadow: inset 0 0 0 .07cqw rgba(255, 255, 255, .08); }
.g-pop { position: absolute; z-index: 10; right: 7.2cqw; top: 11.9cqw; width: 31cqw; display: grid; gap: .8cqw; padding: 1.1cqw; border-radius: 1cqw; background: #fff; box-shadow: 0 1.6cqw 4cqw rgba(0, 0, 0, .35), 0 0 0 .07cqw rgba(0, 0, 0, .12); transform-origin: 90% 0; }
.g-pop.win { top: 9cqw; border-radius: .7cqw; }
.g-pop .h { font: 700 1cqw/1 var(--ui); color: #222; }
.g-pop .row { display: flex; align-items: center; gap: 1cqw; padding: .8cqw; border-radius: .7cqw; background: rgba(47, 124, 246, .1); }
.g-file { position: relative; flex: none; display: grid; place-items: center; width: 3.4cqw; height: 3.4cqw; border-radius: .6cqw; background: linear-gradient(#FBFBFB, #E4E4E4); box-shadow: 0 0 0 .07cqw rgba(0, 0, 0, .15); }
.g-file svg { width: 2cqw; height: 2cqw; }
.g-file.win { border-radius: .3cqw; }
.g-file.win i { position: absolute; left: .35cqw; right: .35cqw; top: .35cqw; height: .4cqw; background: #0067C0; border-radius: .1cqw; }
.g-pop .nm { flex: 1; min-width: 0; display: grid; gap: .35cqw; }
.g-pop .nm b { font: 600 1.1cqw/1.1 var(--ui); color: #111; }
.g-pop .sub { position: relative; height: 1.2cqw; font: 400 .9cqw/1.2 var(--ui); color: #555; }
.g-pop .sub span { position: absolute; left: 0; top: 0; white-space: nowrap; }
.g-pop .sub .a { opacity: 0; }
.g-pop .sub u { color: #2F6FDB; font-weight: 600; text-decoration: none; }
.g-pop .pb { height: .35cqw; border-radius: .2cqw; overflow: hidden; background: rgba(0, 0, 0, .08); opacity: 0; }
.g-pop .pb i { display: block; height: 100%; background: #2F7CF6; }
.shot.play .g-pop { animation: g-pop var(--dur) var(--glide) infinite; }
.shot.play .g-dlb .prog { animation: g-prog-ring var(--dur) linear infinite; }
.shot.play .g-dlb .prog circle { animation: g-prog-dash var(--dur) linear infinite; }
.shot.play .g-pop .pb { animation: g-busy var(--dur) linear infinite; }
.shot.play .g-pop .pb i { animation: g-fill var(--dur) linear infinite; }
.shot.play .g-pop .sub .a { animation: g-busy var(--dur) linear infinite; }
.shot.play .g-pop .sub .b { animation: g-after var(--dur) linear infinite; }
.shot.play .g-pop .row { animation: g-row var(--dur) linear infinite; }
.shot.play .g-pop .row::after { animation: g-after var(--dur) linear infinite, g-ring 1.8s ease-in-out infinite; }
.shot.play .s-mac-open .g-ptr, .shot.play .s-win-open .g-ptr { animation: open-ptr var(--dur) var(--glide) infinite; }
@keyframes g-pop { 0% { opacity: 0; transform: translateY(-.6cqw) scale(.97); } 6%, 100% { opacity: 1; transform: none; } }
@keyframes g-prog-ring { 0%, 42% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes g-prog-dash { 0% { stroke-dashoffset: 100.6; } 42%, 100% { stroke-dashoffset: 0; } }
@keyframes g-busy { 0%, 42% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes g-after { 0%, 42% { opacity: 0; } 46%, 100% { opacity: 1; } }
@keyframes g-fill { 0% { width: 4%; } 42%, 100% { width: 100%; } }
@keyframes g-row { 0%, 58% { background: transparent; } 62%, 100% { background: rgba(47, 124, 246, .1); } }
@keyframes open-ptr { 0%, 30% { left: 52cqw; top: 46cqw; } 58%, 100% { left: var(--t1x); top: var(--t1y); } }

/* ---------- 2. The installer window: drag to Applications ---------- */
.s-mac-drag { --dur: 6.5s; --at1: .2; --at2: .6; }
.s-mac-drag .g-ptr { left: calc((var(--t1x, 30cqw) + var(--t2x, 60cqw)) / 2); top: var(--t2y, 26cqw); }
.g-w.dmg { left: 14cqw; top: 7.5cqw; width: 72cqw; height: 46cqw; background: #F7F5F2; }
.g-dmgb { position: absolute; inset: 2.6cqw 0 0; }
.g-dmgb .lk { position: absolute; left: 4.2cqw; top: 3.4cqw; width: 17.2cqw; height: 2.1cqw; color: #1E1E1E; }
.g-dmgb .it { position: absolute; top: 11cqw; display: grid; justify-items: center; gap: 1.1cqw; font: 500 1.25cqw/1 var(--font-body); color: #222; }
.g-dmgb .it.app { left: 10.5cqw; }
.g-dmgb .it.apps { left: 46cqw; }
.g-dmgb .fw { display: block; }
.g-dmgb .it.app svg { width: 10cqw; height: 10cqw; filter: drop-shadow(0 .5cqw .8cqw rgba(0, 0, 0, .25)); }
.g-dmgb .folder { display: block; width: 11.5cqw; height: 10cqw; filter: drop-shadow(0 .4cqw .6cqw rgba(0, 0, 0, .15)); transform-origin: 50% 70%; }
.g-dmgb .trail { position: absolute; left: 25.2cqw; top: 15.2cqw; display: flex; align-items: center; gap: 1.5cqw; }
.g-dmgb .trail i { width: .6cqw; height: .6cqw; border-radius: 50%; background: #D3CEC6; }
.g-dmgb .trail svg { width: 2.2cqw; height: 2.4cqw; margin-left: .6cqw; }
.g-dmgb .ghost { position: absolute; z-index: 3; left: 46.75cqw; top: 11cqw; width: 10cqw; height: 10cqw; opacity: .7; pointer-events: none; transform: translateX(-18.1cqw); filter: drop-shadow(0 .8cqw 1.2cqw rgba(0, 0, 0, .3)); }
.g-dmgb .ghost svg { width: 100%; height: 100%; }
.g-dmgb .dsteps { position: absolute; left: 4.2cqw; right: 4.2cqw; top: 29.5cqw; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2cqw; padding-top: 2.4cqw; border-top: .08cqw solid #E2DDD5; }
.g-dmgb .dsteps span { display: grid; gap: .8cqw; font: 400 1.15cqw/1.35 var(--font-body); color: #222; }
.g-dmgb .dsteps b { font: 500 .95cqw/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: #6A655F; }
.shot.play .s-mac-drag .ghost { animation: drag-ghost var(--dur) var(--glide) infinite; }
.shot.play .s-mac-drag .folder { animation: drag-folder var(--dur) var(--spring) infinite; }
.shot.play .s-mac-drag .g-ptr { animation: drag-ptr var(--dur) var(--glide) infinite; }
@keyframes drag-ghost { 0%, 18% { opacity: 0; transform: translateX(-36.25cqw); } 21% { opacity: .6; transform: translateX(-36.25cqw); } 58% { opacity: .6; transform: none; } 63%, 100% { opacity: 0; transform: none; } }
@keyframes drag-folder { 0%, 58% { transform: none; filter: drop-shadow(0 .4cqw .6cqw rgba(0, 0, 0, .15)); } 62% { transform: scale(1.08); filter: drop-shadow(0 .4cqw .6cqw rgba(0, 0, 0, .15)) brightness(.88); } 70%, 100% { transform: none; } }
@keyframes drag-ptr { 0% { left: calc(var(--t1x) + 9cqw); top: calc(var(--t1y) + 12cqw); } 18%, 21% { left: var(--t1x); top: var(--t1y); } 58%, 100% { left: var(--t2x); top: var(--t2y); } }

/* ---------- 3. First launch: macOS asks ---------- */
.s-mac-first { --dur: 6s; --at1: .62; }
.g-dock { position: absolute; z-index: 4; left: 50%; bottom: 1cqw; display: flex; align-items: flex-end; gap: .9cqw; padding: .8cqw 1cqw; border-radius: 1.6cqw; transform: translateX(-50%); background: rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 .07cqw rgba(255, 255, 255, .25); }
.g-dock i { width: 4cqw; height: 4cqw; border-radius: .95cqw; background: linear-gradient(#7FB6F3, #3D7FE0); }
.g-dock i.b { background: linear-gradient(#F4F4F4, #D7D7D7); }
.g-dock i.c { background: linear-gradient(#69D58A, #2FA352); }
.g-dock i.d { background: linear-gradient(#B79CF2, #7B5BD6); }
.g-dock i.e { background: linear-gradient(#77777C, #3A3A3C); }
.g-dock .cm { position: relative; width: 4cqw; height: 4cqw; }
.g-dock .cm svg { width: 100%; height: 100%; }
.g-dock .cm::after { content: ""; position: absolute; left: 50%; bottom: -.62cqw; width: .42cqw; height: .42cqw; margin-left: -.21cqw; border-radius: 50%; background: rgba(255, 255, 255, .85); }
.s-mac-first .g-alert { left: 34.5cqw; top: 9cqw; }
.shot.play .s-mac-first .cm svg { animation: first-bounce var(--dur) ease-in-out infinite; }
.shot.play .s-mac-first .g-alert { animation: first-alert var(--dur) var(--spring) infinite; }
.shot.play .s-mac-first .g-ptr { animation: first-ptr var(--dur) var(--glide) infinite; }
@keyframes first-bounce { 0%, 2% { transform: none; } 7% { transform: translateY(-1.6cqw); } 12% { transform: none; } 17% { transform: translateY(-1.6cqw); } 22%, 100% { transform: none; } }
@keyframes first-alert { 0%, 22% { opacity: 0; transform: scale(.92); } 30%, 100% { opacity: 1; transform: none; } }
@keyframes first-ptr { 0%, 34% { left: 74cqw; top: 50cqw; } 58%, 100% { left: var(--t1x); top: var(--t1y); } }

/* ---------- 4. Sign in with the emailed code ---------- */
.s-mac-sign-in, .s-win-sign-in { --dur: 8s; --at1: .8; }
.g-w.signin { left: 22cqw; top: 7cqw; width: 56cqw; height: 46cqw; }
.scr.win .g-w.signin { top: 4.4cqw; }
.signin .g-cmb { display: grid; justify-items: center; align-content: center; gap: 1.25cqw; background: radial-gradient(60% 50% at 50% 0%, rgba(255, 138, 92, .13), transparent 70%); text-align: center; }
.g-app.g-tile { width: 4.6cqw; height: 4.6cqw; margin-bottom: .2cqw; }
.g-code { display: flex; gap: .7cqw; margin-top: .4cqw; }
.g-code span { display: grid; place-items: center; width: 3.6cqw; height: 4.4cqw; border-radius: .7cqw; background: #1E1D1C; box-shadow: inset 0 0 0 .1cqw rgba(247, 245, 242, .14); }
.g-code span:nth-child(4) { margin-right: .9cqw; }
.g-code b { font: 500 2cqw/1 var(--font-mono); color: #F7F5F2; }
.signin .g-btn { width: 32cqw; margin-top: .6cqw; }
.g-note { position: absolute; z-index: 9; color: #1d1d1f; }
.g-note.mac { right: 1.4cqw; top: 3.8cqw; width: 26cqw; display: flex; align-items: center; gap: .9cqw; padding: 1cqw 1.2cqw; border-radius: 1.4cqw; background: rgba(246, 244, 241, .9); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, .3); }
.g-note .ni { flex: none; display: grid; place-items: center; width: 2.8cqw; height: 2.8cqw; border-radius: .7cqw; background: linear-gradient(#4FA3F7, #2367E0); color: #fff; font: 400 1.5cqw/1 var(--font-body); }
.g-note.mac b { display: block; font: 700 1cqw/1.3 var(--font-body); }
.g-note.mac span span { display: block; font: 400 .95cqw/1.3 var(--font-body); color: #444; }
.g-note.win { right: 1.2cqw; bottom: 5cqw; width: 25cqw; display: grid; gap: .45cqw; padding: 1.2cqw 1.4cqw; border-radius: .8cqw; background: rgba(36, 38, 44, .96); color: #fff; box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, .4), inset 0 0 0 .07cqw rgba(255, 255, 255, .08); font-family: var(--ui); }
.g-note.win .nh { display: flex; align-items: center; gap: .6cqw; font: 400 .85cqw/1 var(--ui); color: #BBB; }
.g-note.win .nh .ni { width: 1.5cqw; height: 1.5cqw; border-radius: .3cqw; font-size: .85cqw; }
.g-note.win b { font: 600 1.05cqw/1.3 var(--ui); }
.g-note.win > span:last-child { font: 400 .95cqw/1.3 var(--ui); color: #DDD; }
.shot.play .g-code b { animation: g-type var(--dur) linear calc(var(--k) * .22s) infinite backwards; }
.shot.play .g-note.mac { animation: g-note-r var(--dur) var(--spring) infinite; }
.shot.play .g-note.win { animation: g-note-up var(--dur) var(--spring) infinite; }
.shot.play .s-mac-sign-in .g-ptr, .shot.play .s-win-sign-in .g-ptr { animation: sign-ptr var(--dur) var(--glide) infinite; }
@keyframes g-type { 0%, 32% { opacity: 0; transform: translateY(.4cqw); } 34%, 100% { opacity: 1; transform: none; } }
@keyframes g-note-r { 0%, 8% { opacity: 0; transform: translateX(110%); } 16%, 100% { opacity: 1; transform: none; } }
@keyframes g-note-up { 0%, 8% { opacity: 0; transform: translateY(40%); } 16%, 100% { opacity: 1; transform: none; } }
@keyframes sign-ptr { 0%, 56% { left: calc(var(--t1x) + 18cqw); top: calc(var(--t1y) + 6cqw); } 74%, 100% { left: var(--t1x); top: var(--t1y); } }

/* ---------- 5. System Settings: screen recording ---------- */
.s-mac-screen { --dur: 7s; --at1: .55; }
.g-w.set { left: 7cqw; top: 6cqw; width: 64cqw; height: 46cqw; background: #F5F4F2; }
.g-setb { position: absolute; inset: 2.6cqw 0 0; display: grid; grid-template-columns: 19cqw minmax(0, 1fr); }
.g-setb .side { display: grid; align-content: start; gap: .2cqw; padding: 1cqw .9cqw; background: #EBE9E6; border-right: .07cqw solid rgba(0, 0, 0, .08); }
.g-setb .side span { display: flex; align-items: center; gap: .7cqw; height: 2.1cqw; padding: 0 .7cqw; border-radius: .5cqw; font: 500 1cqw/1 var(--font-body); color: #333; white-space: nowrap; }
.g-setb .side span i { flex: none; width: 1.35cqw; height: 1.35cqw; border-radius: .35cqw; background: var(--c); }
.g-setb .side .srch { height: 2cqw; margin-bottom: .6cqw; background: rgba(0, 0, 0, .06); color: #999; }
.g-setb .side .gap { height: .8cqw; padding: 0; }
.g-setb .side .on { background: #2F7CF6; color: #fff; }
.g-setb .side .on i { background: rgba(255, 255, 255, .35); }
.g-setb .main { display: grid; align-content: start; gap: 1cqw; padding: 1.5cqw 1.8cqw; }
.g-setb .ttl { display: flex; align-items: center; gap: .8cqw; font: 700 1.35cqw/1 var(--font-body); color: #1d1d1f; }
.g-setb .ttl span { font: 400 1.9cqw/1 var(--font-body); color: #999; margin-top: -.2cqw; }
.g-setb .sub { font: 400 .95cqw/1.4 var(--font-body); color: #666; }
.g-setb .list { display: grid; margin-top: .4cqw; border-radius: .9cqw; background: #fff; box-shadow: 0 0 0 .07cqw rgba(0, 0, 0, .08); }
.g-setb .list .it { position: relative; display: flex; align-items: center; gap: .9cqw; height: 3.6cqw; padding: 0 1.2cqw; font: 500 1.1cqw/1 var(--font-body); color: #1d1d1f; border-bottom: .07cqw solid rgba(0, 0, 0, .06); }
.g-setb .list .it > i { flex: none; width: 2cqw; height: 2cqw; border-radius: .5cqw; background: var(--c); }
.g-setb .list .it > svg { width: 2cqw; height: 2cqw; }
.g-setb .list .it .g-tg { margin-left: auto; }
.g-setb .list .cmr { background: rgba(255, 138, 92, .07); border-radius: .5cqw; }
.g-setb .list .cmr::after { inset: .25cqw; border-radius: .6cqw; }
.g-setb .list .pm { display: flex; align-items: center; height: 2.6cqw; padding: 0 1.2cqw; font: 500 1.2cqw/1 var(--font-body); color: #888; }
.g-helper { position: absolute; z-index: 9; left: 64cqw; top: 25cqw; width: 27cqw; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.1cqw; align-items: center; padding: 1.5cqw; border-radius: 1.3cqw; background: #1A1918; color: #F7F5F2; box-shadow: 0 2cqw 5cqw rgba(0, 0, 0, .5), inset 0 0 0 .07cqw rgba(255, 255, 255, .1); }
.g-helper > svg { width: 4.2cqw; height: 4.2cqw; }
.g-helper b { display: block; font: 700 1.1cqw/1.25 var(--font-body); }
.g-helper span span { display: block; margin-top: .25cqw; font: 400 .95cqw/1.3 var(--font-body); color: rgba(247, 245, 242, .6); }
.g-helper .qr { grid-column: 1 / -1; display: grid; place-items: center; height: 2.6cqw; border-radius: .7cqw; background: rgba(255, 255, 255, .08); font: 600 1cqw/1 var(--font-body); }
.shot.play .s-mac-screen .cmr .g-tg { animation: screen-tg var(--dur) linear infinite; }
.shot.play .s-mac-screen .cmr .g-tg i { animation: screen-knob var(--dur) var(--spring) infinite; }
.shot.play .s-mac-screen .g-helper { animation: g-pop var(--dur) var(--glide) infinite; }
.shot.play .s-mac-screen .g-ptr { animation: screen-ptr var(--dur) var(--glide) infinite; }
@keyframes screen-tg { 0%, 54% { background: #D9D7D3; } 57%, 100% { background: #2F7CF6; } }
@keyframes screen-knob { 0%, 54% { left: .2cqw; } 60%, 100% { left: 1.6cqw; } }
@keyframes screen-ptr { 0%, 18% { left: 84cqw; top: 52cqw; } 48%, 100% { left: var(--t1x); top: var(--t1y); } }

/* ---------- 6. Camera and microphone ---------- */
.s-mac-camera { --dur: 6s; --at1: .62; }
.g-w.perms { left: 8cqw; top: 6.4cqw; width: 84cqw; height: 50cqw; }
.perms .g-cmb { display: grid; grid-template-columns: 30cqw minmax(0, 1fr); gap: 2cqw; padding: 2.4cqw; }
.perms .pls { display: grid; align-content: start; gap: .5cqw; }
.perms .pl { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 1cqw; row-gap: .35cqw; align-items: center; padding: 1cqw; border-radius: .9cqw; }
.perms .pl i { grid-row: span 2; width: 2.8cqw; height: 2.8cqw; border-radius: .7cqw; background: #24221F; }
.perms .pl b { font: 600 1.15cqw/1 var(--font-body); color: #F7F5F2; }
.perms .pl span { font: 400 .95cqw/1 var(--font-body); color: rgba(247, 245, 242, .5); }
.perms .pl.sel { background: #1F1D1C; box-shadow: inset 0 0 0 .1cqw rgba(247, 245, 242, .14); }
.perms .pl.on span, .perms .pl:nth-child(2) span { color: #7FD18B; }
.perms .pr { display: grid; align-content: start; justify-items: start; gap: 1.2cqw; padding: 2.6cqw; border-radius: 1.4cqw; background: #1A1918; box-shadow: inset 0 0 0 .07cqw rgba(247, 245, 242, .1); }
.perms .pr .g-p { max-width: 34cqw; }
.s-mac-camera .g-alert { left: 52cqw; top: 22cqw; }
.shot.play .s-mac-camera .g-alert { animation: cam-alert var(--dur) var(--spring) infinite; }
.shot.play .s-mac-camera .g-ptr { animation: cam-ptr var(--dur) var(--glide) infinite; }
@keyframes cam-alert { 0%, 14% { opacity: 0; transform: scale(.92); } 22%, 100% { opacity: 1; transform: none; } }
@keyframes cam-ptr { 0%, 28% { left: calc(var(--t1x) - 14cqw); top: calc(var(--t1y) + 10cqw); } 56%, 100% { left: var(--t1x); top: var(--t1y); } }

/* ---------- 7. Check how you look and sound ---------- */
.s-mac-check, .s-win-check { --dur: 6s; --at1: .8; }
.g-w.g-ckw { left: 8cqw; top: 6.4cqw; width: 84cqw; height: 49.5cqw; }
.scr.win .g-w.g-ckw { top: 3.4cqw; }
.g-ckw .g-cmb { display: grid; grid-template-columns: 31cqw minmax(0, 1fr); gap: 3cqw; align-items: center; padding: 2.4cqw 3.4cqw; background: radial-gradient(45% 60% at 22% 45%, rgba(255, 138, 92, .12), transparent 70%); }
.g-camw { display: grid; justify-items: center; gap: 1.6cqw; }
.g-cam { display: block; width: 24cqw; height: 24cqw; overflow: hidden; border-radius: 50%; background: #2A2624; box-shadow: 0 0 0 .5cqw #201E1C, 0 1.6cqw 4cqw rgba(0, 0, 0, .5); }
.g-cam img { display: block; width: 100%; height: 100%; object-fit: cover; }
.g-camcap { font: 400 1cqw/1 var(--font-body); color: rgba(247, 245, 242, .55); }
.g-chk { display: grid; gap: 1cqw; justify-items: start; }
.g-chk .g-h { font-size: 2.2cqw; }
.g-card { display: grid; gap: .55cqw; width: 100%; padding: 1.3cqw 1.4cqw; border-radius: 1.1cqw; background: #1A1918; box-shadow: inset 0 0 0 .07cqw rgba(247, 245, 242, .1); }
.g-lab { font: 400 .95cqw/1 var(--font-body); color: rgba(247, 245, 242, .6); }
.g-sel { position: relative; display: flex; align-items: center; height: 2.6cqw; margin-bottom: .45cqw; padding: 0 1cqw; border-radius: .6cqw; background: #121110; box-shadow: inset 0 0 0 .07cqw rgba(247, 245, 242, .14); font: 500 1.05cqw/1 var(--font-body); color: #F7F5F2; }
.g-sel::after { content: ""; position: absolute; right: 1cqw; top: 50%; width: .55cqw; height: .55cqw; margin-top: -.4cqw; border-right: .12cqw solid rgba(247, 245, 242, .6); border-bottom: .12cqw solid rgba(247, 245, 242, .6); transform: rotate(45deg); }
.g-lvl { position: relative; height: 1.2cqw; background: repeating-linear-gradient(90deg, #2A2826 0 3.4%, transparent 3.4% 4.545%); }
.g-lvl::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, #4FD08A 0 3.4%, transparent 3.4% 4.545%); clip-path: inset(0 48% 0 0); }
.g-card.row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1cqw; }
.g-card.row b { display: block; font: 600 1.05cqw/1.3 var(--font-body); color: #F7F5F2; }
.g-card.row span span { display: block; font: 400 .9cqw/1.3 var(--font-body); color: rgba(247, 245, 242, .55); }
.g-chk .g-btn { justify-self: end; margin-top: .4cqw; }
.g-toast { position: absolute; z-index: 9; left: 50%; top: 4cqw; display: flex; align-items: center; gap: .7cqw; padding: .9cqw 1.6cqw; border-radius: 99px; transform: translateX(-50%); background: #F7F5F2; color: #1E1E1E; font: 600 1.05cqw/1 var(--font-body); white-space: nowrap; box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, .4); }
.g-toast::before { content: ""; width: .8cqw; height: .8cqw; border-radius: 50%; background: #3FB86C; }
.shot.play .g-lvl::after { animation: g-level 1.6s ease-in-out infinite; }
.shot.play .g-toast { animation: check-toast var(--dur) var(--spring) infinite; }
.shot.play .s-mac-check .g-ptr, .shot.play .s-win-check .g-ptr { animation: check-ptr var(--dur) var(--glide) infinite; }
@keyframes g-level { 0% { clip-path: inset(0 70% 0 0); } 18% { clip-path: inset(0 38% 0 0); } 34% { clip-path: inset(0 58% 0 0); } 52% { clip-path: inset(0 30% 0 0); } 70% { clip-path: inset(0 62% 0 0); } 86% { clip-path: inset(0 44% 0 0); } 100% { clip-path: inset(0 70% 0 0); } }
@keyframes check-toast { 0%, 4% { opacity: 0; transform: translate(-50%, -150%); } 12%, 52% { opacity: 1; transform: translate(-50%, 0); } 60%, 100% { opacity: 0; transform: translate(-50%, -150%); } }
@keyframes check-ptr { 0%, 46% { left: calc(var(--t1x) - 20cqw); top: calc(var(--t1y) + 6cqw); } 72%, 100% { left: var(--t1x); top: var(--t1y); } }

/* ---------- 8. The shortcut, the menu bar and the tray ---------- */
.s-mac-record, .s-win-record { --dur: 7s; }
.g-mbcm { position: relative; display: flex; align-items: center; justify-content: flex-end; min-width: 2.6cqw; }
.g-mbcm .idle { display: grid; place-items: center; height: 2cqw; padding: 0 .6cqw; border-radius: .45cqw; background: rgba(255, 255, 255, .2); }
.g-glyph { display: block; width: 2.3cqw; height: auto; color: #fff; }
.g-mbcm .live, .g-trcm .live { position: absolute; opacity: 0; }
.g-mbcm .live { right: 0; display: flex; align-items: center; gap: .5cqw; padding: .35cqw .7cqw; border-radius: .45cqw; background: rgba(255, 255, 255, .2); font: 500 1cqw/1 var(--font-mono); color: #fff; white-space: nowrap; }
.g-mbcm .live i, .g-trcm .live i { width: .8cqw; height: .8cqw; border-radius: 50%; background: #FF8A5C; }
.g-trcm { position: relative; display: grid; place-items: center; width: 2.2cqw; height: 2.2cqw; border-radius: .4cqw; background: rgba(255, 255, 255, .12); }
.g-trcm .idle svg { width: 1.5cqw; height: 1.5cqw; }
.g-trcm .live { right: -.15cqw; top: -.15cqw; }
.g-menu { position: absolute; z-index: 8; display: grid; padding: .5cqw; font: 400 1.05cqw/1 var(--ui); color: #1d1d1f; }
.g-menu > span { display: flex; justify-content: space-between; align-items: center; gap: 1cqw; height: 2.3cqw; padding: 0 .9cqw; border-radius: .45cqw; white-space: nowrap; }
.g-menu > span span { color: #888; }
.g-menu .ms b { font-weight: 500; }
.g-menu hr { height: .07cqw; margin: .4cqw .9cqw; border: 0; background: rgba(0, 0, 0, .1); }
.g-menu.mac { right: 10.6cqw; top: 3.2cqw; width: 24cqw; border-radius: .9cqw; background: rgba(246, 244, 241, .92); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 1.2cqw 3.6cqw rgba(0, 0, 0, .35), 0 0 0 .07cqw rgba(0, 0, 0, .15); }
.g-menu.mac .ms { background: #2F7CF6; color: #fff; }
.g-menu.mac .ms span { color: rgba(255, 255, 255, .85); }
.g-menu.win { right: 9cqw; bottom: 4.6cqw; width: 27cqw; border-radius: .8cqw; background: #F9F9F9; box-shadow: 0 1.2cqw 3.6cqw rgba(0, 0, 0, .4), 0 0 0 .07cqw rgba(0, 0, 0, .12); }
.g-menu.win .ms { position: relative; background: rgba(0, 0, 0, .05); }
.g-menu.win .ms::before { content: ""; position: absolute; left: 0; top: .6cqw; bottom: .6cqw; width: .22cqw; border-radius: .2cqw; background: #0067C0; }
.g-keys { position: absolute; left: 50%; top: 32cqw; display: flex; gap: 1.4cqw; transform: translateX(-50%); }
.g-keys.w { top: 22cqw; }
.g-keys kbd { display: grid; place-items: center; min-width: 8cqw; height: 8cqw; padding: 0 1.6cqw; border-radius: 1.5cqw; font: 600 3.4cqw/1 var(--font-body); color: #F7F5F2; background: linear-gradient(180deg, #2E2C2A, #1C1B1A); box-shadow: inset 0 .12cqw 0 rgba(255, 255, 255, .12), 0 .5cqw 0 #0C0B0B, 0 1.4cqw 2.6cqw rgba(0, 0, 0, .45); }
.g-keys.w kbd { font-size: 2.3cqw; }
.g-rec { position: absolute; z-index: 7; left: 50%; top: 46cqw; display: flex; align-items: center; gap: .8cqw; padding: .9cqw 1.6cqw; border-radius: 99px; transform: translateX(-50%); background: rgba(18, 18, 18, .85); color: #F7F5F2; font: 600 1.1cqw/1 var(--font-body); white-space: nowrap; box-shadow: inset 0 0 0 .07cqw rgba(255, 255, 255, .12), 0 1cqw 3cqw rgba(0, 0, 0, .35); }
.g-rec::before { content: ""; width: .9cqw; height: .9cqw; border-radius: 50%; background: #FF8A5C; box-shadow: 0 0 0 0 rgba(255, 138, 92, .6); }
.g-rec .tc { font: 500 1.05cqw/1 var(--font-mono); }
.scr.win .g-rec { top: 36cqw; }
.shot.play .g-menu { animation: rec-menu var(--dur) var(--glide) infinite; }
.shot.play .g-keys kbd { animation: rec-key var(--dur) var(--glide) backwards infinite; }
.shot.play .g-keys kbd:nth-child(2) { animation-delay: .22s; }
.shot.play .g-keys kbd:nth-child(3) { animation-delay: .44s; }
.shot.play .g-keys kbd:nth-child(4) { animation-delay: .66s; }
.shot.play .g-rec { animation: rec-badge var(--dur) var(--spring) infinite; }
.shot.play .g-rec::before { animation: rec 2s ease-out infinite; }
.shot.play .g-mbcm .idle, .shot.play .g-trcm .idle { animation: rec-idle var(--dur) linear infinite; }
.shot.play .g-mbcm .live, .shot.play .g-trcm .live { animation: rec-live var(--dur) linear infinite; }
@keyframes rec-menu { 0%, 30% { opacity: 1; transform: none; } 36%, 100% { opacity: 0; transform: translateY(-.5cqw); } }
@keyframes rec-key { 0%, 40% { transform: none; color: #F7F5F2; box-shadow: inset 0 .12cqw 0 rgba(255, 255, 255, .12), 0 .5cqw 0 #0C0B0B, 0 1.4cqw 2.6cqw rgba(0, 0, 0, .45); }
  43%, 60% { transform: translateY(.4cqw); color: #FF9A70; box-shadow: inset 0 .12cqw 0 rgba(255, 255, 255, .12), 0 .1cqw 0 #0C0B0B, 0 .6cqw 1.4cqw rgba(0, 0, 0, .45); }
  64%, 100% { transform: none; color: #F7F5F2; box-shadow: inset 0 .12cqw 0 rgba(255, 255, 255, .12), 0 .5cqw 0 #0C0B0B, 0 1.4cqw 2.6cqw rgba(0, 0, 0, .45); } }
@keyframes rec-badge { 0%, 66% { opacity: 0; transform: translate(-50%, 1cqw); } 72%, 100% { opacity: 1; transform: translate(-50%, 0); } }
@keyframes rec-idle { 0%, 66% { opacity: 1; } 68%, 100% { opacity: 0; } }
@keyframes rec-live { 0%, 66% { opacity: 0; } 68%, 100% { opacity: 1; } }

/* ---------- Windows: SmartScreen ---------- */
.s-win-smartscreen { --dur: 8s; --at1: .32; --at2: .74; }
.g-ss { position: absolute; z-index: 5; left: 21cqw; top: 8cqw; width: 58cqw; height: 38cqw; display: flex; flex-direction: column; align-items: flex-start; gap: 1.2cqw; padding: 3.4cqw 3.4cqw 2.2cqw; background: #1F5AA6; color: #fff; font-family: var(--ui); box-shadow: 0 2cqw 5cqw rgba(0, 0, 0, .5), 0 0 0 .07cqw rgba(255, 255, 255, .15); }
.g-ss .x { position: absolute; right: 1.6cqw; top: 1.2cqw; font: 400 1.2cqw/1 var(--ui); opacity: .85; }
.g-ss > b { font: 300 2.7cqw/1.15 var(--ui); margin-bottom: .6cqw; }
.g-ss > i { width: 46cqw; height: .9cqw; border-radius: .2cqw; background: rgba(255, 255, 255, .32); }
.g-ss > i.s { width: 31cqw; }
.g-ss .slot { position: relative; display: block; min-height: 1.6cqw; margin-top: .8cqw; }
.g-ss .mi { display: inline-block; font: 400 1.15cqw/1.3 var(--ui); text-decoration: underline; text-underline-offset: .25cqw; opacity: 0; }
.g-ss .mi::after { inset: -.5cqw -.7cqw; border-radius: .3cqw; }
.g-ss .app { position: absolute; left: 0; top: 0; display: flex; gap: 1.6cqw; font: 400 1.15cqw/1.3 var(--ui); white-space: nowrap; }
.g-ss .app span { opacity: .75; }
.g-ss .btns { align-self: stretch; display: flex; justify-content: flex-end; gap: .9cqw; margin-top: auto; padding-top: 1.6cqw; border-top: .07cqw solid rgba(255, 255, 255, .25); }
.g-ss .btns span { display: grid; place-items: center; height: 2.9cqw; min-width: 11.5cqw; padding: 0 1.4cqw; border: .14cqw solid rgba(255, 255, 255, .85); font: 400 1.1cqw/1 var(--ui); }
.g-ss .btns .run::after { border-radius: .3cqw; }
.shot.play .s-win-smartscreen .g-ss { animation: g-pop var(--dur) var(--glide) infinite; }
.shot.play .s-win-smartscreen .mi { animation: ss-a var(--dur) linear infinite; }
.shot.play .s-win-smartscreen .app, .shot.play .s-win-smartscreen .run { animation: ss-b var(--dur) linear infinite; }
.shot.play .s-win-smartscreen .g-ptr { animation: ss-ptr var(--dur) var(--glide) infinite; }
@keyframes ss-a { 0%, 33% { opacity: 1; } 35%, 100% { opacity: 0; } }
@keyframes ss-b { 0%, 33% { opacity: 0; } 35%, 100% { opacity: 1; } }
@keyframes ss-ptr { 0%, 10% { left: 74cqw; top: 54cqw; } 28%, 40% { left: var(--t1x); top: var(--t1y); } 66%, 100% { left: var(--t2x); top: var(--t2y); } }

/* ---------- Windows: the installer ---------- */
.s-win-install { --dur: 9s; --at1: .26; --at2: .84; }
.g-w.nsis { left: 20cqw; top: 5.4cqw; width: 60cqw; height: 46cqw; font-family: var(--ui); }
.g-nb { position: absolute; top: 2.8cqw; left: 0; right: 0; bottom: 5cqw; display: grid; grid-template-columns: 18.5cqw minmax(0, 1fr); }
.g-nb .side { grid-column: 1; grid-row: 1; display: grid; justify-items: center; align-content: start; gap: 1.1cqw; padding-top: 6.4cqw; background: #121212; color: #F7F5F2; }
.g-nb .side svg { width: 7.6cqw; height: 2.28cqw; }
.g-nb .side b { font: 700 2.2cqw/1 var(--font-body); letter-spacing: -.025em; }
.g-nb .pg { grid-column: 2; grid-row: 1; display: grid; align-content: start; gap: 1.1cqw; padding: 2.8cqw 2.6cqw; background: #fff; font: 400 1.05cqw/1.45 var(--ui); color: #222; }
.g-nb .pg b { margin-bottom: .4cqw; font: 700 1.9cqw/1.15 var(--ui); color: #111; }
.g-nb .pg.a, .g-nb .pg.p { opacity: 0; }
.g-nb .pg.p { position: relative; z-index: 1; grid-column: 1 / -1; padding: 3cqw 3.4cqw; }
.g-nb .pg.p b { font-size: 1.4cqw; }
.g-nb .pg .pb { height: 1.6cqw; margin-top: 1.2cqw; background: #E6E6E6; box-shadow: inset 0 0 0 .07cqw #BCBCBC; }
.g-nb .pg .pb i { display: block; width: 100%; height: 100%; background: #06B025; }
.g-nb .pg .cb { display: flex; align-items: center; gap: .8cqw; margin-top: .8cqw; }
.g-nb .pg .cb i { display: grid; place-items: center; width: 1.4cqw; height: 1.4cqw; border-radius: .2cqw; background: #0067C0; color: #fff; font: 700 .9cqw/1 var(--font-body); font-style: normal; }
.g-nf { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: .8cqw; height: 5cqw; padding: 0 1.4cqw; background: #F0F0F0; border-top: .07cqw solid #DFDFDF; }
.g-nf .brand { margin-right: auto; font: 400 .9cqw/1 var(--ui); color: #8A8A8A; }
.g-nf .slot { position: relative; display: block; }
.g-nf .b1, .g-nf .b2 { display: grid; place-items: center; height: 2.4cqw; min-width: 8.6cqw; padding: 0 1cqw; border-radius: .3cqw; background: #FDFDFD; box-shadow: 0 0 0 .07cqw #CFCFCF; font: 400 1cqw/1 var(--ui); color: #111; }
.g-nf .b1 { box-shadow: 0 0 0 .14cqw #0067C0; }
.g-nf .b1.a { opacity: 0; }
.g-nf .b1.c { position: absolute; inset: 0; }
.g-nf .b1::after { border-radius: .4cqw; }
.shot.play .s-win-install .pg.a, .shot.play .s-win-install .b1.a { animation: ins-a var(--dur) linear infinite; }
.shot.play .s-win-install .pg.p { animation: ins-p var(--dur) linear infinite; }
.shot.play .s-win-install .pg.p .pb i { animation: ins-fill var(--dur) linear infinite; }
.shot.play .s-win-install .pg.c, .shot.play .s-win-install .b1.c { animation: ins-c var(--dur) linear infinite; }
.shot.play .s-win-install .g-ptr { animation: ins-ptr var(--dur) var(--glide) infinite; }
@keyframes ins-a { 0%, 28% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes ins-p { 0%, 28% { opacity: 0; } 30%, 56% { opacity: 1; } 58%, 100% { opacity: 0; } }
@keyframes ins-fill { 0%, 30% { width: 0; } 55%, 100% { width: 100%; } }
@keyframes ins-c { 0%, 56% { opacity: 0; } 58%, 100% { opacity: 1; } }
@keyframes ins-ptr { 0%, 6% { left: 74cqw; top: 54cqw; } 22%, 28% { left: var(--t1x); top: var(--t1y); } 38%, 64% { left: calc(var(--t1x) + 6cqw); top: calc(var(--t1y) + 6cqw); } 78%, 100% { left: var(--t2x); top: var(--t2y); } }

/* ---------- Windows: Settings › Privacy & security › Camera ---------- */
.s-win-camera { --dur: 6s; --at1: .56; }
.g-w.wset { left: 9cqw; top: 3cqw; width: 82cqw; height: 51cqw; background: #F3F3F3; font-family: var(--ui); }
.g-wsb { position: absolute; inset: 2.8cqw 0 0; display: grid; grid-template-columns: 22cqw minmax(0, 1fr); }
.g-wsb .side { display: grid; align-content: start; gap: .15cqw; padding: 1.4cqw 1cqw; }
.g-wsb .side > span { position: relative; display: flex; align-items: center; height: 2.2cqw; padding: 0 1cqw; border-radius: .4cqw; font: 400 1cqw/1 var(--ui); color: #1A1A1A; white-space: nowrap; }
.g-wsb .side .me { height: auto; gap: .9cqw; padding: .2cqw .6cqw 1cqw; }
.g-wsb .side .me i { flex: none; width: 3.4cqw; height: 3.4cqw; border-radius: 50%; background: linear-gradient(#C9C4BC, #9E978E); }
.g-wsb .side .me b { display: block; font: 600 1.05cqw/1.25 var(--ui); }
.g-wsb .side .me span span { display: block; font: 400 .85cqw/1.25 var(--ui); color: #666; }
.g-wsb .side .srch { margin-bottom: .6cqw; background: #fff; box-shadow: inset 0 -.1cqw 0 #8A8A8A, 0 0 0 .07cqw rgba(0, 0, 0, .06); color: #888; }
.g-wsb .side .on { background: rgba(0, 0, 0, .055); }
.g-wsb .side .on::before { content: ""; position: absolute; left: 0; top: .55cqw; bottom: .55cqw; width: .25cqw; border-radius: .2cqw; background: #0067C0; }
.g-wsb .main { display: grid; align-content: start; gap: .5cqw; padding: 1.8cqw 2.4cqw 0 .8cqw; }
.g-wsb .ttl { margin-bottom: 1.2cqw; font: 600 2cqw/1.2 var(--ui); color: #1A1A1A; }
.g-wsb .ttl span { font-weight: 400; color: #6A6A6A; }
.g-wsb .row { position: relative; display: flex; align-items: center; justify-content: space-between; height: 4.4cqw; padding: 0 1.6cqw; border-radius: .5cqw; background: #FBFBFB; box-shadow: 0 0 0 .07cqw rgba(0, 0, 0, .06); font: 400 1.1cqw/1 var(--ui); color: #1A1A1A; }
.g-wsb .row::after { inset: -.35cqw; border-radius: .7cqw; }
.g-wsb .hint { margin-top: .6cqw; font: 400 .95cqw/1.4 var(--ui); color: #555; }
.g-wtg { display: flex; align-items: center; gap: 1cqw; font: 400 1cqw/1 var(--ui); color: #333; }
.g-wtg .lb { position: relative; min-width: 2cqw; text-align: right; }
.g-wtg .lb .n { position: absolute; right: 0; top: 0; opacity: 0; }
.g-wsw { position: relative; width: 3.6cqw; height: 1.8cqw; border-radius: 1cqw; background: #0067C0; box-shadow: inset 0 0 0 .1cqw #0067C0; }
.g-wsw i { position: absolute; top: .4cqw; left: 2.2cqw; width: 1cqw; height: 1cqw; border-radius: 50%; background: #fff; }
.shot.play .s-win-camera .flip .g-wsw { animation: wtg-bg var(--dur) linear infinite; }
.shot.play .s-win-camera .flip .g-wsw i { animation: wtg-knob var(--dur) var(--spring) infinite; }
.shot.play .s-win-camera .flip .lb .y { animation: g-after-click var(--dur) linear infinite; }
.shot.play .s-win-camera .flip .lb .n { animation: g-before-click var(--dur) linear infinite; }
.shot.play .s-win-camera .g-ptr { animation: wset-ptr var(--dur) var(--glide) infinite; }
@keyframes wtg-bg { 0%, 55% { background: transparent; box-shadow: inset 0 0 0 .1cqw #5D5D5D; } 57%, 100% { background: #0067C0; box-shadow: inset 0 0 0 .1cqw #0067C0; } }
@keyframes wtg-knob { 0%, 55% { left: .4cqw; background: #5D5D5D; } 60%, 100% { left: 2.2cqw; background: #fff; } }
@keyframes g-after-click { 0%, 55% { opacity: 0; } 57%, 100% { opacity: 1; } }
@keyframes g-before-click { 0%, 55% { opacity: 1; } 57%, 100% { opacity: 0; } }
@keyframes wset-ptr { 0%, 18% { left: calc(var(--t1x) - 16cqw); top: calc(var(--t1y) + 12cqw); } 50%, 100% { left: var(--t1x); top: var(--t1y); } }

/* ---------- After the steps ---------- */
.g-done { padding-top: clamp(64px, 8vw, 110px); }
.g-done-card { position: relative; overflow: hidden; isolation: isolate; display: grid; justify-items: center; gap: 18px; padding: clamp(44px, 7vw, 88px) clamp(20px, 5vw, 64px); border-radius: 32px; text-align: center; background: #171615; box-shadow: inset 0 0 0 1px var(--hair); }
.g-done-card h2 { font-size: clamp(38px, 5.6vw, 76px); line-height: .98; letter-spacing: -0.045em; max-width: 14ch; }
.g-done-card p { max-width: 56ch; margin: 0; font-size: 17px; line-height: 1.6; color: var(--t2); }
.g-done-card .btn-row { justify-content: center; margin-top: 8px; }
.g-done-card .btn .ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.g-tour .mono { font-size: 12px; color: var(--t3); }
.g-next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.g-next a { display: grid; gap: 6px; align-content: start; padding: 22px 22px 24px; border-radius: 20px; background: var(--card); box-shadow: inset 0 0 0 1px var(--hair); color: var(--t2); text-decoration: none; font-size: 14.5px; line-height: 1.5; transition: background .25s, transform .25s var(--glide); }
.g-next a:hover { background: var(--card-2); transform: translateY(-2px); }
.g-next .ic { width: 22px; height: 22px; margin-bottom: 8px; fill: none; stroke: var(--t1); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.g-next b { font-size: 16.5px; color: var(--t1); }
@media (max-width: 760px) { .g-next { grid-template-columns: minmax(0, 1fr); } }
.g-trouble { padding-bottom: clamp(64px, 8vw, 110px); }
.g-trouble .faq-list a { color: var(--t1); }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .shot *, .shot *::before, .shot *::after, .g-fi svg { animation: none !important; transition: none !important; }
}