/* Bridge Loop: demo animada em código (HTML/CSS/SVG + um script). Tudo é desenhado em 1600x900 e escalado pelo demo.js.
   O palco segue o tema (claro/escuro) pelo sistema ou por data-theme="light|dark" no #bl-demo. Valores provisórios, como o DESIGN.md. */
.bl-demo {
  --f: Figtree, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light dark;
  --tx: light-dark(#15162b, #ecedf8); --mu: light-dark(#54576f, #a6a9c4); --ln: light-dark(#d9dae6, #30334f); --sf: light-dark(#fff, #171929);
  --pri: light-dark(#4f46e5, #8d87ff); --g: linear-gradient(100deg, #4f46e5, #0e7490);
  --st1: light-dark(#f5f5fa, #0e0f1c); --st2: light-dark(#e4e6fb, #151633); --bl1: light-dark(rgba(99, 102, 241, .22), rgba(99, 102, 241, .3)); --bl2: light-dark(rgba(6, 182, 212, .2), rgba(6, 182, 212, .16));
  --bez: light-dark(#1b1c2b, #05060e); --shadow: light-dark(rgba(40, 40, 110, .4), rgba(0, 0, 0, .75));
  /* Mac */
  --mp: light-dark(rgba(246, 246, 248, .96), rgba(44, 44, 50, .96)); --mps: light-dark(#f3f3f5, #2b2b30); --mc: light-dark(#fff, rgba(255, 255, 255, .07)); --mcl: light-dark(rgba(0, 0, 0, .08), rgba(255, 255, 255, .09));
  --mt: light-dark(#1c1c1e, #f2f2f7); --mm: light-dark(#6e6e73, #a1a1a8); --ma: light-dark(#4f46e5, #6366f1); --mat: light-dark(#4338ca, #a5b4fc);
  --mati: light-dark(rgba(79, 70, 229, .1), rgba(129, 140, 248, .17)); --mok: light-dark(#177a3f, #34c46e); --mbar: light-dark(rgba(255, 255, 255, .55), rgba(30, 30, 36, .55)); --mgl: light-dark(rgba(0, 0, 0, .06), rgba(255, 255, 255, .08));
  --mw: radial-gradient(90% 70% at 80% 0, light-dark(#bfeaf6, #0f5a78) 0, transparent 60%), linear-gradient(140deg, light-dark(#cfd3fb, #27235f), light-dark(#a9c4f5, #17306b) 55%, light-dark(#bdeef0, #0d3b52));
  /* Android */
  --pb: light-dark(#f5f5fa, #0e0f1c); --ps: light-dark(#fff, #171929); --ps2: light-dark(#ececf4, #22243a); --pt: light-dark(#15162b, #ecedf8); --pm: light-dark(#54576f, #a6a9c4); --pl: light-dark(#d9dae6, #30334f);
  --pp: light-dark(#4f46e5, #8d87ff); --pop: light-dark(#fff, #0e0b4a); --pc: light-dark(#e4e2ff, #2e2a7a); --pcon: light-dark(#2a2391, #e1deff); --pok: light-dark(#137a38, #5edb8a);
  --pis: light-dark(#24253a, #e6e6f2); --pion: light-dark(#f3f3fa, #1a1b2e);
  position: relative; color: var(--tx); font-family: var(--f);
}
.bl-demo[data-theme="light"] { color-scheme: light; } .bl-demo[data-theme="dark"] { color-scheme: dark; }
.bl-demo *, .bl-demo *::before, .bl-demo *::after { box-sizing: border-box; }

/* ---------- palco ---------- */
.bl-stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 22px; background: var(--st1); color: var(--tx); border: 1px solid var(--ln); box-shadow: 0 40px 80px -45px var(--shadow); isolation: isolate; outline-offset: 4px; user-select: none; -webkit-user-select: none; }
.bl-world { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; transform-origin: 0 0; font: 400 22px/1.3 var(--f); }
.bl-world .bg { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(160deg, var(--st1), var(--st2)); }
.bl-world .bg i { position: absolute; border-radius: 50%; filter: blur(90px); }
.bl-world .bgb1 { width: 700px; height: 700px; left: 900px; top: -220px; background: var(--bl1); }
.bl-world .bgb2 { width: 600px; height: 600px; left: -160px; top: 440px; background: var(--bl2); }
.camw { position: absolute; inset: 0; --mk: 1; -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--mk) * 470px), #000 calc(var(--mk) * 470px + 130px)); mask-image: linear-gradient(90deg, transparent calc(var(--mk) * 470px), #000 calc(var(--mk) * 470px + 130px)); }
.cam { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; transform-origin: 0 0; will-change: transform; }
.lay { position: absolute; inset: 0; visibility: hidden; opacity: 0; }
.abs { position: absolute; }
.bl-world svg { display: block; }

/* títulos em tela, à esquerda */
.titles { position: absolute; left: 96px; top: 0; width: 470px; height: 900px; pointer-events: none; }
.ttl { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; opacity: 0; }
.ttl .eb { display: block; font-size: 22px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pri); margin-bottom: 18px; }
.ttl h3 { font-size: 58px; line-height: 1.05; font-weight: 800; letter-spacing: -.03em; margin: 0 0 22px; text-wrap: balance; color: var(--tx); }
.ttl p { font-size: 27px; line-height: 1.4; color: var(--mu); margin: 0; text-wrap: pretty; }
.ttl .mk { width: 84px; height: 84px; margin-bottom: 26px; }
.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: color-mix(in srgb, var(--tx) 8%, transparent); }
.progress i { display: block; height: 100%; width: 0; background: var(--g); }

/* marca */
.logo { display: grid; place-items: center; border-radius: 22.5%; background: linear-gradient(150deg, #7f86f5, #3b82e6 45%, #08b5d6); flex: none; }
.logo svg { width: 78%; height: 78%; }

/* ---------- aparelhos ---------- */
.mac { position: absolute; left: 640px; top: 105px; width: 650px; height: 690px; border-radius: 22px; border: 9px solid var(--bez); background: var(--mw); overflow: hidden; box-shadow: 0 50px 80px -34px var(--shadow); color: var(--mt); font-size: 16px; }
.mbar { position: absolute; left: 0; right: 0; top: 0; height: 32px; background: var(--mbar); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: space-between; padding: 0 14px; font-size: 14px; color: var(--mt); z-index: 3; }
.mbar .l, .mbar .r { display: flex; align-items: center; gap: 16px; } .mbar b { font-weight: 700; }
.mbar .bli { width: 26px; height: 24px; display: grid; place-items: center; border-radius: 6px; color: var(--mt); }
.mbar .bli svg { width: 19px; height: 19px; }
.mbar .bli.on { background: var(--mgl); }
.mbar .ic { width: 18px; height: 18px; }
.phone { position: absolute; left: 1330px; top: 187px; width: 252px; height: 526px; border-radius: 40px; border: 8px solid var(--bez); background: var(--pb); overflow: hidden; box-shadow: 0 50px 80px -34px var(--shadow); color: var(--pt); font-size: 13px; }
.scr { position: absolute; inset: 0; }
.scr > div { position: absolute; inset: 0; }
.sbar { position: absolute; left: 0; right: 0; top: 0; height: 26px; display: flex; justify-content: space-between; align-items: center; padding: 3px 18px 0; font-size: 12px; font-weight: 600; z-index: 6; pointer-events: none; }
.sbar svg { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-left: 4px; }
.gbar { position: absolute; left: 50%; bottom: 7px; width: 84px; height: 4px; margin-left: -42px; border-radius: 3px; background: var(--pt); opacity: .35; z-index: 6; }
.link { position: absolute; left: 1266px; top: 420px; width: 90px; height: 60px; z-index: 5; display: grid; place-items: center; }
.link .lk { position: absolute; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; }
.link .q { border: 3px dashed var(--mu); color: var(--mu); font-size: 30px; font-weight: 700; background: var(--st1); }
.link .on { background: var(--g); box-shadow: 0 0 0 calc(var(--r, 0) * 22px) rgba(79, 70, 229, calc(.3 * (1 - var(--r, 0)))), 0 10px 24px -6px rgba(14, 116, 144, .6); }
.link .on .logo { width: 40px; height: 40px; }
.link .on svg { width: 30px; height: 30px; color: #fff; }

/* ---------- painel do Mac (barra de menus) ---------- */
.pn { position: absolute; right: 12px; top: 40px; width: 372px; padding: 14px; border-radius: 18px; background: var(--mp); border: 1px solid var(--mcl); box-shadow: 0 24px 50px -12px rgba(0, 0, 0, .35); transform-origin: 90% 0; opacity: 0; visibility: hidden; z-index: 4; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.pn .hd { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.pn .hd .logo { width: 38px; height: 38px; }
.pn .hd b { display: block; font-size: 17px; line-height: 1.15; } .pn .hd small { font-size: 14px; color: var(--mm); display: flex; align-items: center; gap: 6px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mok); display: inline-block; flex: none; } .dot.i { background: var(--ma); }
.pn .cd { background: var(--mc); border: 1px solid var(--mcl); border-radius: 14px; padding: 10px 12px; display: flex; align-items: center; gap: 12px; }
.pn .tl { width: 40px; height: 40px; border-radius: 11px; background: var(--mati); color: var(--mat); display: grid; place-items: center; flex: none; } .pn .tl svg { width: 22px; height: 22px; }
.pn .cd .nm { flex: 1; min-width: 0; } .pn .cd b { display: block; font-size: 17px; line-height: 1.2; } .pn .cd small { font-size: 14px; color: var(--mm); display: flex; align-items: center; gap: 6px; }
.pn .bt { font-size: 14px; color: var(--mm); display: flex; align-items: center; gap: 6px; } .pn .bt i { width: 22px; height: 11px; border-radius: 3px; border: 1.5px solid var(--mm); position: relative; } .pn .bt i::after { content: ""; position: absolute; inset: 1px 5px 1px 1px; background: var(--mok); border-radius: 1px; }
.big { margin-top: 10px; height: 46px; border-radius: 12px; background: var(--g); color: #fff; font-weight: 700; font-size: 18px; display: flex; align-items: center; justify-content: center; gap: 10px; transform: scale(calc(1 - .04 * var(--p, 0))); box-shadow: 0 8px 18px -8px rgba(79, 70, 229, .7); }
.big svg { width: 22px; height: 22px; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.tile { background: var(--mc); border: 1px solid var(--mcl); border-radius: 12px; padding: 10px 4px; display: grid; justify-items: center; gap: 5px; text-align: center; font-size: 14px; font-weight: 600; line-height: 1.15; min-height: 78px; align-content: center; transform: scale(calc(1 - .05 * var(--p, 0))); }
.tile svg { width: 22px; height: 22px; }
.drop { margin-top: 10px; height: 66px; border-radius: 12px; border: 2px dashed color-mix(in srgb, var(--mm) 55%, transparent); display: grid; place-items: center; text-align: center; padding: 0 12px; font-size: 14px; color: var(--mm); line-height: 1.25; }
.drop.hot { border-color: var(--ma); background: var(--mati); color: var(--mat); } .drop.done { color: var(--mat); font-weight: 700; font-size: 15px; border-style: dashed; }
.pn .dc { text-align: right; margin: 10px 4px 0; font-size: 15px; color: var(--mat); font-weight: 600; }
.pn .rw { display: flex; justify-content: space-between; align-items: center; padding: 11px 4px 3px; font-size: 16px; font-weight: 600; border-top: 1px solid var(--mcl); margin-top: 10px; } .pn .rw + .rw { border: 0; margin: 0; } .pn .rw small { font-weight: 400; color: var(--mm); font-size: 13px; }
.pn .lb { font-size: 14px; font-weight: 700; color: var(--mm); margin: 4px 4px 8px; }
.pn .row { display: flex; gap: 12px; align-items: center; padding: 12px; background: var(--mc); border: 1px solid var(--mcl); border-radius: 14px; }
.pn .row .nm { flex: 1; min-width: 0; } .pn .row b { font-size: 17px; font-weight: 600; } .pn .row small { display: block; font-size: 14px; color: var(--mok); margin-top: 2px; font-weight: 500; }
.wb { font-size: 11px; font-weight: 800; letter-spacing: .04em; background: var(--mgl); color: var(--mm); border-radius: 5px; padding: 1px 6px; margin-left: 6px; vertical-align: 2px; }
.pbtn { background: var(--mati); color: var(--mat); font-weight: 700; font-size: 16px; padding: 8px 18px; border-radius: 10px; transform: scale(calc(1 - .06 * var(--p, 0))); flex: none; }
.pn .help { font-size: 13px; color: var(--mm); margin: 10px 4px 0; line-height: 1.3; }
.pn .inst { display: grid; gap: 10px; } .pn .inst h4 { margin: 0; font-size: 17px; } .pn .inst p { margin: 0; font-size: 14px; color: var(--mm); line-height: 1.35; }
.pn .inst .big { margin: 4px 0 0; font-size: 16px; } .pn .inst .note { font-size: 12.5px; color: var(--mm); }
.pn .inst .cab { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 700; color: var(--mat); background: var(--mati); padding: 3px 10px; border-radius: 99px; width: max-content; } .pn .inst .cab svg { width: 15px; height: 15px; }

/* janela de pareamento do Mac */
.dlg { position: absolute; left: 107px; top: 150px; width: 420px; padding: 26px 26px 22px; border-radius: 16px; background: var(--mp); border: 1px solid var(--mcl); box-shadow: 0 30px 70px -14px rgba(0, 0, 0, .45); text-align: center; opacity: 0; visibility: hidden; z-index: 6; }
.dlg .logo { width: 64px; height: 64px; margin: 0 auto 10px; box-shadow: 0 8px 22px -6px rgba(79, 70, 229, .6); }
.dlg h4 { margin: 0 0 6px; font-size: 21px; } .dlg p { margin: 0; font-size: 15px; color: var(--mm); line-height: 1.3; }
.digits { display: flex; gap: 8px; justify-content: center; margin: 18px 0 10px; } .digits i { width: 46px; height: 58px; border-radius: 10px; background: var(--mc); border: 1px solid var(--mcl); display: grid; place-items: center; font-style: normal; font-size: 32px; font-weight: 700; } .digits i.sp { width: 12px; background: none; border: 0; }
.dlg .sm { font-size: 13px; margin-top: 8px; } .dlg .btns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.mbtn { background: var(--mc); border: 1px solid var(--mcl); border-radius: 9px; padding: 8px 18px; font-size: 15.5px; font-weight: 600; transform: scale(calc(1 - .05 * var(--p, 0))); } .mbtn.pr { background: var(--g); color: #fff; border-color: transparent; }
.digits i:not(.sp), .pdg i:not(.sp) { box-shadow: 0 0 0 calc(var(--gl, 0) * 3px) var(--pri), 0 0 calc(var(--gl, 0) * 24px) color-mix(in srgb, var(--pri) calc(var(--gl, 0) * 45%), transparent); }

/* janela do espelhamento */
.mir { position: absolute; left: 24px; top: 44px; width: 250px; border-radius: 12px; background: var(--mps); border: 1px solid var(--mcl); box-shadow: 0 28px 60px -14px rgba(0, 0, 0, .5); overflow: hidden; opacity: 0; visibility: hidden; transform-origin: 50% 0; z-index: 5; }
.mir .tb { height: 34px; display: flex; align-items: center; padding: 0 10px; font-size: 13px; font-weight: 700; color: var(--mm); position: relative; }
.mir .tb .tr { display: flex; gap: 6px; } .mir .tb .tr i { width: 11px; height: 11px; border-radius: 50%; background: #c9c9cf; } .mir .tb .t { position: absolute; left: 50%; translate: -50% 0; } .mir .tb .ms { margin-left: auto; font-weight: 600; font-size: 12px; display: flex; gap: 5px; align-items: center; color: var(--mt); }
.mir .vid { height: 536px; background: #000; padding: 6px 7px 7px; } .mir .vid .scr { position: relative; width: 100%; height: 100%; border-radius: 14px; overflow: hidden; }
.mir .bar { height: 48px; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; padding: 0 2px; }
.mir .bar span { display: grid; justify-items: center; gap: 2px; font-size: 8.5px; color: var(--mm); font-weight: 500; padding: 4px 0; white-space: nowrap; letter-spacing: -.01em; border-radius: 8px; transform: scale(calc(1 - .06 * var(--p, 0))); background: color-mix(in srgb, var(--ma) calc(var(--p, 0) * 22%), transparent); }
.mir .bar svg { width: 17px; height: 17px; color: var(--mt); }
.kbd { position: absolute; left: 292px; top: 250px; width: 318px; padding: 14px 16px 16px; border-radius: 14px; background: var(--mp); border: 1px solid var(--mcl); box-shadow: 0 20px 44px -14px rgba(0, 0, 0, .4); opacity: 0; visibility: hidden; z-index: 5; }
.kbd small { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mm); margin-bottom: 10px; }
.kbd .keys { display: flex; gap: 7px; height: 48px; }
.kbd .keys b { min-width: 42px; height: 46px; padding: 0 8px; border-radius: 9px; background: var(--mc); border: 1px solid var(--mcl); border-bottom-width: 3px; display: grid; place-items: center; font-size: 22px; font-weight: 600; opacity: .45; }
.kbd .keys b:last-child { opacity: 1; border-color: var(--ma); color: var(--mat); background: var(--mati); } .kbd .keys b.e { visibility: hidden; }
.ban { position: absolute; right: 12px; top: 40px; width: 360px; padding: 12px 14px 14px; border-radius: 18px; background: var(--mp); border: 1px solid var(--mcl); box-shadow: 0 24px 50px -12px rgba(0, 0, 0, .4); opacity: 0; visibility: hidden; z-index: 6; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.ban .t { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mm); font-weight: 600; } .ban .t .logo { width: 20px; height: 20px; } .ban .t em { margin-left: auto; font-style: normal; font-weight: 400; }
.ban b { display: block; margin-top: 8px; font-size: 17px; } .ban p { margin: 2px 0 0; font-size: 16px; line-height: 1.3; }
.ban .ac { display: flex; gap: 8px; margin-top: 10px; } .ban .ac .mbtn { flex: 1; text-align: center; padding: 6px 8px; font-size: 14.5px; }
.ban .ff { display: flex; gap: 8px; margin-top: 10px; align-items: center; } .ban .fld { flex: 1; height: 34px; border-radius: 9px; background: var(--mc); border: 1px solid var(--ma); padding: 0 10px; font-size: 15.5px; display: flex; align-items: center; white-space: nowrap; overflow: hidden; } .ban .fld.ph { color: var(--mm); border-color: var(--mcl); } .ban .ff .mbtn { padding: 6px 14px; font-size: 14.5px; }
.ban .sent { display: flex; gap: 6px; align-items: center; margin-top: 8px; font-size: 14px; color: var(--mok); font-weight: 700; } .ban .sent svg { width: 16px; height: 16px; }

/* janela do navegador, Dock, documento e arquivo */
.win { position: absolute; left: 22px; top: 52px; width: 578px; height: 460px; border-radius: 12px; background: var(--mps); border: 1px solid var(--mcl); box-shadow: 0 28px 60px -14px rgba(0, 0, 0, .45); overflow: hidden; opacity: 0; visibility: hidden; z-index: 4; }
.win .tb { height: 40px; display: flex; align-items: center; padding: 0 12px; gap: 14px; border-bottom: 1px solid var(--mcl); } .win .tr { display: flex; gap: 7px; } .win .tr i { width: 12px; height: 12px; border-radius: 50%; background: #c9c9cf; }
.win .url { flex: 1; max-width: 300px; margin: 0 auto; height: 26px; border-radius: 8px; background: var(--mgl); text-align: center; font-size: 14px; line-height: 26px; color: var(--mm); }
.win .pg { display: grid; justify-items: center; gap: 8px; padding: 46px 30px 0; text-align: center; } .win .pg .logo { width: 92px; height: 92px; box-shadow: 0 16px 34px -10px rgba(79, 70, 229, .55); }
.win h5 { margin: 12px 0 0; font-size: 38px; letter-spacing: -.03em; font-weight: 800; } .win .pg p { margin: 0; color: var(--mm); font-size: 19px; }
.win .dl { margin-top: 18px; width: 290px; height: 56px; border-radius: 14px; background: var(--g); color: #fff; font-size: 21px; font-weight: 700; display: grid; place-items: center; position: relative; overflow: hidden; transform: scale(calc(1 - .04 * var(--p, 0))); box-shadow: 0 12px 24px -10px rgba(79, 70, 229, .7); }
.win .dl .pgb { position: absolute; left: 0; bottom: 0; height: 5px; background: rgba(255, 255, 255, .85); width: 0; }
.win .nt { font-size: 15px !important; margin-top: 6px !important; }
.dock { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; display: flex; gap: 10px; padding: 8px 12px; border-radius: 20px; background: var(--mbar); border: 1px solid var(--mcl); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 3; opacity: 0; visibility: hidden; }
.dock i { width: 46px; height: 46px; border-radius: 12px; background: var(--mgl); } .dock .logo { width: 46px; height: 46px; }
.doc { position: absolute; left: 20px; top: 64px; width: 216px; border-radius: 12px; background: var(--mps); border: 1px solid var(--mcl); box-shadow: 0 20px 44px -14px rgba(0, 0, 0, .4); opacity: 0; visibility: hidden; z-index: 2; }
.doc .tb { height: 30px; display: flex; align-items: center; padding: 0 10px; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--mm); border-bottom: 1px solid var(--mcl); } .doc .tb i { width: 10px; height: 10px; border-radius: 50%; background: #c9c9cf; } .doc .tb span { margin: 0 auto; padding-right: 36px; }
.doc p { margin: 0; padding: 12px 14px 16px; font-size: 17px; line-height: 1.35; } .doc mark { background: color-mix(in srgb, var(--ma) calc(var(--s, 0) * 40%), transparent); color: inherit; border-radius: 3px; padding: 1px 0; }
.fic { position: absolute; left: 36px; top: 500px; width: 92px; display: grid; justify-items: center; gap: 5px; text-align: center; font-size: 14px; font-weight: 600; opacity: 0; visibility: hidden; z-index: 7; }
.fic .im { width: 74px; height: 74px; border-radius: 10px; background: radial-gradient(circle at 70% 25%, #ffe9a8 0 10%, transparent 11%), linear-gradient(170deg, #7dd3fc 0 55%, #34d399 55% 100%); border: 3px solid #fff; box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .45); }
.fic span { background: color-mix(in srgb, var(--ma) calc(var(--s, 0) * 100%), transparent); color: var(--mt); padding: 1px 8px; border-radius: 6px; }

/* cursor */
.cur { position: absolute; left: 0; top: 0; width: 34px; height: 40px; opacity: 0; pointer-events: none; z-index: 30; margin: -2px 0 0 -4px; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .4)); transform-origin: 4px 2px; }
.cur::after { content: ""; position: absolute; left: -8px; top: -10px; width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--pri); opacity: calc(var(--p, 0) * .9); transform: scale(calc(.6 + var(--p, 0) * .9)); }
.cur.t { margin: -22px 0 0 -22px; width: 44px; height: 44px; filter: none; }
.cur.t svg { display: none; } .cur.t::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(120, 120, 140, .5); border: 2px solid rgba(255, 255, 255, .8); transform: scale(calc(1 - .2 * var(--p, 0))); }
.cur.t::after { left: 0; top: 0; width: 44px; height: 44px; }

/* ---------- telas do celular ---------- */
.s-lock { background: linear-gradient(165deg, #1d1b55, #0e3a5c 70%, #0b2a3c); color: #fff; opacity: 0; visibility: hidden; }
.s-lock .clk { position: absolute; left: 0; right: 0; top: 50px; text-align: center; font-size: 58px; font-weight: 300; letter-spacing: -.02em; line-height: 1; } .s-lock .dt { position: absolute; left: 0; right: 0; top: 118px; text-align: center; font-size: 14px; opacity: .8; }
.nc { position: absolute; left: 12px; right: 12px; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, .16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; font-size: 12.5px; line-height: 1.3; } .nc small { display: flex; gap: 6px; font-size: 11px; opacity: .85; align-items: center; } .nc small i { width: 12px; height: 12px; border-radius: 4px; background: #34d399; } .nc b { display: block; font-size: 13.5px; margin-top: 3px; } .nc u { text-decoration: none; display: block; opacity: .95; }
.s-lock .n1 { top: 166px; } .s-lock .n2 { top: 252px; } .s-lock .n3 { top: 338px; } .nc .ck { color: #7cf2a9; font-weight: 700; }
.s-play { background: var(--ps); }
.s-play .tp { position: absolute; left: 0; right: 0; top: 34px; padding: 0 16px; font-size: 15px; font-weight: 700; color: var(--pm); display: flex; align-items: center; gap: 8px; } .s-play .tp i { width: 16px; height: 16px; border-radius: 4px; background: conic-gradient(#34a853 0 25%, #4285f4 0 50%, #ea4335 0 75%, #fbbc04 0); }
.s-play .ap { position: absolute; left: 16px; right: 16px; top: 84px; display: flex; gap: 14px; align-items: center; } .s-play .ap .logo { width: 62px; height: 62px; } .s-play .ap b { display: block; font-size: 20px; } .s-play .ap small { font-size: 12.5px; color: var(--pm); }
.s-play .soon { position: absolute; left: 16px; right: 16px; top: 168px; height: 42px; border-radius: 99px; background: var(--ps2); color: var(--pm); font-weight: 700; font-size: 15px; display: grid; place-items: center; }
.s-play .sh { position: absolute; left: 16px; right: 16px; top: 236px; display: flex; gap: 8px; } .s-play .sh i { flex: 1; height: 150px; border-radius: 12px; background: linear-gradient(180deg, var(--pc), var(--ps2)); } .s-play .ln { position: absolute; left: 16px; width: 150px; height: 9px; border-radius: 5px; background: var(--ps2); top: 410px; } .s-play .ln + .ln { top: 428px; width: 190px; }
.s-home { background: var(--pb); }
.s-home .hh { position: absolute; left: 14px; top: 34px; display: flex; gap: 8px; align-items: center; font-size: 17px; font-weight: 800; } .s-home .hh .logo { width: 26px; height: 26px; }
.hcard { position: absolute; left: 10px; right: 10px; top: 72px; border-radius: 18px; padding: 12px 12px 14px; color: #fff; background: linear-gradient(135deg, #4f46e5, #0e7490); }
.hcard .r1 { display: flex; justify-content: space-between; align-items: center; font-size: 11px; } .chp { display: inline-flex; gap: 5px; align-items: center; background: rgba(255, 255, 255, .18); border-radius: 99px; padding: 3px 9px; font-weight: 600; } .chp i { width: 7px; height: 7px; border-radius: 50%; background: #7cf2a9; }
.hcard .lnk { display: flex; align-items: center; gap: 4px; margin: 8px 0 6px; } .hcard .lnk em { flex: 1; border-top: 2px dashed rgba(255, 255, 255, .6); } .hcard .lnk .pill { background: #fff; color: var(--pcon); font-size: 10px; font-weight: 700; border-radius: 99px; padding: 3px 8px; } .hcard .lnk svg { width: 20px; height: 20px; }
.hcard small { font-size: 11px; opacity: .9; display: block; } .hcard b { display: block; font-size: 22px; letter-spacing: -.02em; line-height: 1.15; margin-bottom: 1px; }
.hcard .hb1, .hcard .hb2 { margin-top: 7px; height: 34px; border-radius: 99px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; gap: 6px; transform: scale(calc(1 - .05 * var(--p, 0))); } .hcard .hb1 { background: #fff; color: var(--pcon); } .hcard .hb2 { border: 1.5px solid rgba(255, 255, 255, .75); } .hcard svg.i { width: 14px; height: 14px; }
.htiles { position: absolute; left: 10px; right: 10px; top: 298px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; } .ht { background: var(--ps); border: 1px solid var(--pl); border-radius: 12px; padding: 6px 9px; font-size: 11px; font-weight: 700; line-height: 1.2; } .ht svg { width: 16px; height: 16px; color: var(--pp); display: block; margin-bottom: 4px; } .ht small { display: block; font-size: 10px; font-weight: 600; color: var(--pok); margin-top: 2px; }
.hnav { position: absolute; left: 0; right: 0; bottom: 0; height: 50px; border-top: 1px solid var(--pl); background: var(--ps); display: grid; grid-template-columns: repeat(4, 1fr); padding-bottom: 8px; font-size: 9.5px; text-align: center; color: var(--pm); align-items: center; } .hnav span { display: grid; justify-items: center; gap: 1px; } .hnav .a b { background: var(--pc); border-radius: 99px; padding: 1px 12px; display: block; } .hnav .a { color: var(--pt); font-weight: 700; } .hnav svg { width: 15px; height: 15px; }
.hempty { background: var(--pb); } .hempty .tt { position: absolute; left: 18px; right: 18px; top: 120px; text-align: center; } .hempty .tt .logo { width: 60px; height: 60px; margin: 0 auto 14px; } .hempty h5 { margin: 0 0 8px; font-size: 19px; line-height: 1.2; } .hempty p { margin: 0; font-size: 12.5px; color: var(--pm); line-height: 1.35; }
.pbtn2 { position: absolute; left: 14px; right: 14px; height: 42px; border-radius: 99px; background: var(--pp); color: var(--pop); font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 6px; transform: scale(calc(1 - .05 * var(--p, 0))); } .pbtn2.o { background: none; border: 1.5px solid var(--pm); color: var(--pt); } .pbtn2 svg { width: 16px; height: 16px; }
.s-pair { background: var(--pb); } .s-pair .hd { position: absolute; left: 12px; top: 34px; display: flex; gap: 10px; align-items: center; font-size: 17px; font-weight: 800; } .s-pair .hd svg { width: 18px; height: 18px; color: var(--pm); }
.s-pair .mc { position: absolute; left: 0; right: 0; top: 82px; display: flex; justify-content: center; } .s-pair .mc span { background: var(--ps2); border-radius: 99px; padding: 5px 12px; font-size: 12px; font-weight: 700; display: flex; gap: 6px; align-items: center; } .s-pair .mc svg { width: 14px; height: 14px; }
.pq { position: absolute; left: 14px; right: 14px; top: 132px; text-align: center; font-size: 15px; font-weight: 800; line-height: 1.25; }
.pdg { position: absolute; left: 0; right: 0; top: 190px; display: flex; gap: 4px; justify-content: center; } .pdg i { width: 29px; height: 40px; border-radius: 8px; background: var(--ps); border: 1px solid var(--pl); display: grid; place-items: center; font-style: normal; font-size: 22px; font-weight: 700; } .pdg i.sp { width: 6px; background: none; border: 0; }
.ptm { position: absolute; left: 20px; right: 20px; top: 250px; background: var(--ps2); border-radius: 99px; padding: 6px 12px; font-size: 11px; display: flex; justify-content: space-between; align-items: center; gap: 8px; } .ptm b { font-variant-numeric: tabular-nums; } .ptm .tr { flex: 1; max-width: 60px; height: 4px; border-radius: 2px; background: var(--pl); overflow: hidden; } .ptm .tr i { display: block; height: 100%; background: var(--pp); }
.phint { position: absolute; left: 18px; right: 18px; top: 296px; text-align: center; font-size: 11px; color: var(--pm); line-height: 1.35; }
.pwait { position: absolute; left: 18px; right: 18px; top: 150px; text-align: center; } .pwait h5 { margin: 0 0 8px; font-size: 18px; } .pwait p { margin: 0; font-size: 12.5px; color: var(--pm); } .pwait .sp { width: 30px; height: 30px; margin: 20px auto 0; border-radius: 50%; border: 3px solid var(--pc); border-top-color: var(--pp); }
.hempty .pbtn2 { bottom: 70px; } .s-pair .pbtn2 { bottom: 64px; } .s-pair .pbtn2.o { bottom: 14px; }
.tst { position: absolute; left: 12px; right: 12px; bottom: 60px; border-radius: 12px; background: var(--pis); color: var(--pion); font-size: 12px; padding: 11px 13px; opacity: 0; z-index: 7; }
.heads { position: absolute; left: 10px; right: 10px; top: 32px; border-radius: 16px; padding: 10px 12px; background: var(--ps); border: 1px solid var(--pl); box-shadow: 0 12px 26px -8px rgba(0, 0, 0, .45); opacity: 0; z-index: 8; font-size: 12px; } .heads small { display: flex; gap: 6px; font-size: 10.5px; color: var(--pm); align-items: center; } .heads small .logo { width: 14px; height: 14px; } .heads b { display: block; font-size: 13px; margin-top: 3px; } .heads u { text-decoration: none; color: var(--pm); }

/* a tela espelhada (a mesma na janela do Mac e no celular) */
.scr-mir { background: #000; font-size: 12px; }
.scr-mir .v { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.v-home { background: linear-gradient(170deg, #4f6bdc, #2a8fd0 55%, #11a5b8); } .v-home .gr { position: absolute; left: 12px; right: 12px; top: 56px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 8px; } .v-home .gr div { display: grid; justify-items: center; gap: 4px; } .v-home .gr i { width: 36px; height: 36px; border-radius: 11px; display: block; } .v-home .gr s { width: 26px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .6); }
.v-home .wd { position: absolute; left: 12px; right: 12px; top: 28px; height: 20px; color: #fff; font-size: 11px; font-weight: 700; display: flex; justify-content: space-between; } .v-home .dk { position: absolute; left: 10px; right: 10px; bottom: 14px; height: 54px; border-radius: 18px; background: rgba(255, 255, 255, .25); display: flex; justify-content: space-around; align-items: center; } .v-home .dk i { width: 36px; height: 36px; border-radius: 11px; background: rgba(255, 255, 255, .85); }
.c1 { background: #ffb02e; } .c2 { background: #52d68b; } .c3 { background: #f87689; } .c4 { background: #ffd84d; } .c5 { background: #a78bfa; } .c6 { background: #38bdf8; }
.v-notes { background: var(--ps); color: var(--pt); } .v-notes .nh { position: absolute; left: 14px; right: 14px; top: 32px; font-size: 20px; font-weight: 800; display: flex; align-items: center; gap: 8px; } .v-notes .nh i { width: 22px; height: 22px; border-radius: 7px; background: #ffd84d; }
.v-notes .nf { position: absolute; left: 12px; right: 12px; top: 74px; min-height: 130px; border-radius: 14px; background: var(--ps2); padding: 12px; font-size: 16px; line-height: 1.35; } .v-notes .cr { display: inline-block; width: 2px; height: 1.05em; background: var(--pp); vertical-align: -3px; margin-left: 1px; } .v-notes .pasteChip { position: absolute; left: 12px; top: 216px; background: var(--ps); border: 1px solid var(--pl); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .4); border-radius: 99px; padding: 6px 14px; font-size: 12px; font-weight: 600; max-width: 210px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; }
.v-shade { background: color-mix(in srgb, var(--pb) 94%, transparent); color: var(--pt); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .v-shade .sc { position: absolute; left: 12px; right: 12px; top: 34px; font-size: 12px; color: var(--pm); font-weight: 700; } .v-shade .sn { position: absolute; left: 10px; right: 10px; border-radius: 14px; background: var(--ps); border: 1px solid var(--pl); padding: 9px 11px; font-size: 12px; line-height: 1.3; } .v-shade .sn small { display: block; font-size: 10.5px; color: var(--pm); } .v-shade .sn b { display: block; margin-top: 2px; font-size: 13px; }
.v-off { background: #000; color: rgba(255, 255, 255, .55); } .v-off b { position: absolute; left: 0; right: 0; top: 46%; text-align: center; font-weight: 300; font-size: 34px; }

/* ---------- cena 7: sem nuvem, sem conta ---------- */
.dg .nd { position: absolute; display: grid; justify-items: center; gap: 10px; width: 190px; font-size: 22px; font-weight: 700; text-align: center; } .dg .nd .ic { width: 130px; height: 130px; border-radius: 34px; display: grid; place-items: center; background: var(--sf); border: 2px solid var(--ln); color: var(--pri); box-shadow: 0 24px 50px -24px var(--shadow); } .dg .nd .ic svg { width: 66px; height: 66px; }
.dg .ln { position: absolute; left: 953px; top: 421px; width: 334px; height: 6px; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--pri) 0 14px, transparent 14px 26px); opacity: .55; }
.dg .lock { position: absolute; left: 1076px; top: 380px; width: 88px; height: 88px; border-radius: 50%; background: var(--g); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 calc(var(--r, 0) * 26px) rgba(79, 70, 229, calc(.28 * (1 - var(--r, 0)))), 0 16px 32px -10px rgba(14, 116, 144, .6); } .dg .lock svg { width: 44px; height: 44px; }
.dg .pk { position: absolute; width: 58px; height: 30px; border-radius: 9px; background: var(--sf); border: 2px solid var(--pri); color: var(--pri); font-size: 18px; font-weight: 800; display: grid; place-items: center; letter-spacing: .08em; top: 409px; left: 0; padding-top: 0; line-height: 1; }
.dg .tr3 { position: absolute; top: 590px; left: 770px; width: 700px; display: flex; gap: 18px; justify-content: center; } .dg .tr3 div { display: flex; gap: 10px; align-items: center; background: var(--sf); border: 2px solid var(--ln); border-radius: 99px; padding: 12px 24px; font-size: 22px; font-weight: 700; } .dg .tr3 svg { width: 28px; height: 28px; color: var(--pri); }
.dg .no { position: absolute; top: 175px; display: grid; justify-items: center; gap: 10px; width: 200px; font-size: 22px; font-weight: 700; color: var(--mu); } .dg .no .ic { width: 96px; height: 96px; border-radius: 26px; display: grid; place-items: center; position: relative; background: var(--sf); border: 2px dashed var(--ln); color: var(--mu); } .dg .no .ic svg { width: 50px; height: 50px; } .dg .no .ic::after { content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 6px; margin-top: -3px; background: #d64545; border-radius: 3px; rotate: -38deg; box-shadow: 0 0 0 3px var(--st1); }
.dg .cap { position: absolute; left: 700px; width: 820px; top: 700px; text-align: center; font-size: 26px; font-weight: 700; color: var(--tx); } .dg .cap span { color: var(--mu); font-weight: 500; }

/* ---------- cena 1 e 8 ---------- */
.out { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 1100px; text-align: center; display: grid; justify-items: center; gap: 16px; }
.out .logo { width: 156px; height: 156px; box-shadow: 0 30px 70px -20px rgba(79, 70, 229, .6); }
.out b { font-size: 108px; line-height: 1; letter-spacing: -.04em; font-weight: 800; background: var(--g); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 6px; }
.out p { margin: 0; font-size: 40px; color: var(--mu); font-weight: 600; }
.out .chs { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 14px; } .out .chs span { font-size: 28px; font-weight: 700; padding: 12px 28px; border-radius: 99px; border: 2px solid var(--ln); background: var(--sf); } .out .chs .g { background: var(--g); border-color: transparent; color: #fff; }
.out em { font-style: normal; font-size: 38px; font-weight: 800; color: var(--pri); letter-spacing: .01em; margin-top: 4px; }

/* ---------- controles ---------- */
.bl-ctl { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.bl-ctl button { font: 600 15px/1 var(--f); color: var(--tx); background: var(--sf); border: 1px solid var(--ln); border-radius: 999px; cursor: pointer; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; }
.bl-ctl button:hover { border-color: var(--pri); } .bl-ctl button svg { width: 20px; height: 20px; flex: none; }
.bl-ctl button[aria-pressed="true"] { border-color: var(--pri); color: var(--pri); }
.bl-ctl button[hidden] { display: none; }
.bl-demo :focus-visible { outline: 3px solid var(--pri); outline-offset: 3px; }
.bl-seek { position: relative; flex: 1 1 200px; min-width: 140px; height: 44px; display: flex; align-items: center; }
.bl-seek .tk { position: absolute; left: 0; right: 0; top: 50%; height: 0; pointer-events: none; } .bl-seek .tk i { position: absolute; top: -9px; width: 2px; height: 18px; background: var(--ln); border-radius: 1px; margin-left: -1px; }
.bl-seek input { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; margin: 0; cursor: pointer; position: relative; }
.bl-seek input::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--pri) var(--v, 0%), var(--ln) var(--v, 0%)); }
.bl-seek input::-moz-range-track { height: 6px; border-radius: 3px; background: var(--ln); } .bl-seek input::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--pri); }
.bl-seek input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--pri); border: 3px solid var(--sf); margin-top: -7px; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.bl-seek input::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--pri); border: 3px solid var(--sf); }
.bl-time { font-size: 14px; color: var(--mu); font-variant-numeric: tabular-nums; min-width: 6.4em; text-align: right; }
.bl-cap { margin: 12px 0 0; color: var(--mu); font-size: 16px; line-height: 1.5; min-height: 3em; } .bl-cap strong { color: var(--tx); }
.bl-note { margin: 6px 0 0; font-size: 13px; color: var(--mu); }

/* tela cheia */
.bl-demo:fullscreen { background: var(--st1); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 16px; }
.bl-demo:fullscreen .bl-stage { width: min(100%, calc((100vh - 150px) * 16 / 9)); }
.bl-demo:fullscreen .bl-ctl, .bl-demo:fullscreen .bl-cap, .bl-demo:fullscreen .bl-note { width: min(100%, calc((100vh - 150px) * 16 / 9)); }

/* telas estreitas: sem títulos no quadro; a legenda fica embaixo */
.bl-stage[data-narrow="1"] .titles { display: none; }
@media (max-width: 720px) { .bl-ctl .bl-sndt { display: none; } .bl-time { min-width: 5.6em; } .bl-cap { min-height: 5.2em; font-size: 15px; } .bl-stage { border-radius: 14px; } }

/* movimento reduzido: quadro a quadro, sem animar */
.bl-story { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.bl-story li { margin: 0; }
.bl-story .bl-stage { border-radius: 14px; }
.bl-story h4 { margin: 10px 0 2px; font-size: 17px; color: var(--tx); } .bl-story p { margin: 0; font-size: 15px; color: var(--mu); line-height: 1.45; }
.bl-story .bl-stage .progress { display: none; }
.bl-more { margin-top: 14px; }
@media (prefers-reduced-motion: reduce) { .bl-world .bg i { display: none; } }

.s-home > div, .s-pair > div { position: absolute; inset: 0; } .s-pair > .hd, .s-pair > .mc { inset: auto; }
.s-pair > .hd { inset: 34px auto auto 12px; } .s-pair > .mc { inset: 82px 0 auto 0; }
.s-pair .pw, .s-pair .pc2 { opacity: 0; visibility: hidden; }
.v-home .gr .nt { position: relative; } .v-home .gr .nt::after { content: ""; position: absolute; left: 9px; right: 9px; top: 10px; height: 3px; border-radius: 2px; background: rgba(0, 0, 0, .35); box-shadow: 0 7px 0 rgba(0, 0, 0, .35), 0 14px 0 rgba(0, 0, 0, .35); }
.v-notes .tt { white-space: pre-wrap; }
.lk.q { z-index: 1; } .link .lk { opacity: 0; }
.sbar svg { color: inherit; }

.ds { position: absolute; right: 22px; top: 50px; display: grid; gap: 20px; z-index: 1; font-size: 12.5px; font-weight: 600; text-align: center; }
.ds div { width: 78px; display: grid; justify-items: center; gap: 4px; } .ds i { width: 54px; height: 42px; border-radius: 8px 8px 7px 7px; box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .08); }
.stand { position: absolute; left: 940px; top: 794px; width: 50px; height: 40px; background: linear-gradient(color-mix(in srgb, var(--bez) 30%, #b9bdd2), color-mix(in srgb, var(--bez) 45%, #9a9eb6)); } .stand::after { content: ""; position: absolute; left: -52px; right: -52px; bottom: -6px; height: 10px; border-radius: 7px; background: color-mix(in srgb, var(--bez) 40%, #a2a6bd); }
.s-mir .wd { display: none; }