/* =========================================================
   TEMAS — ajuste aqui se quiser outro tom (escuro é o padrão;
   use ?tema=claro no endereço para o tema claro)
   ========================================================= */
.stage{
  --bg:#0B1426; --surf:#16213E; --surf2:#243657; --edge:#35D6F424;
  --txt:#F8FAFC; --sec:#A6B6D0; --a1:#35D6F4; --a2:#377CF6; --ink:#0B1426; --on2:#FFFFFF;
  --ball:#F3FBFF; --dot:rgba(120,200,255,.085); --track:rgba(120,200,255,.1);
  --glow:rgba(18,228,255,.4); --hl:rgba(18,228,255,.08); --shadow:rgba(0,0,0,.65);
  --sk:#7FA2FF; --sf:#12E4FF; --ss:#9FF3FF; --trail:rgba(190,245,255,.5); --ballglow:rgba(18,228,255,.35);
  --wordfilter:brightness(0) invert(1);
}
.stage.light{
  --bg:#F8FAFC; --surf:#FFFFFF; --surf2:#E6EDF8; --edge:#16213E17;
  --txt:#101828; --sec:#606C80; --a1:#35D6F4; --a2:#205FC9; --ink:#0B1426; --on2:#FFFFFF;
  --ball:#16213E; --dot:rgba(22,33,62,.09); --track:rgba(22,33,62,.07);
  --glow:rgba(0,194,235,.35); --hl:rgba(36,86,245,.07); --shadow:rgba(11,27,63,.22);
  --sk:#205FC9; --sf:#007F9A; --ss:#0A7F9E; --trail:rgba(22,33,62,.3); --ballglow:rgba(55,124,246,.25);
  --wordfilter:none;
}

@font-face{font-family:Sora;src:url('/assets/fonts/Sora-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Sora;src:url('/assets/fonts/Sora-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Sora;src:url('/assets/fonts/Sora-600.woff2') format('woff2');font-weight:600 800;font-display:swap}
:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --page:#E9EEF7; --fg:#0B1B3F; --muted:#5B6B8E; --bar:#FFFFFF; --line:rgba(11,27,63,.12);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --page:#040A18; --fg:#EAF4FF; --muted:#8EA5CB; --bar:#0E1F45; --line:rgba(234,244,255,.1); }
}
:root[data-theme="dark"]{ --page:#040A18; --fg:#EAF4FF; --muted:#8EA5CB; --bar:#0E1F45; --line:rgba(234,244,255,.1); }
*,*::before,*::after{box-sizing:border-box}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{height:100%;margin:0;overflow:hidden;background:var(--page);color:var(--fg);
  font-family:Sora,-apple-system,system-ui,"Segoe UI",sans-serif;-webkit-tap-highlight-color:transparent}

/* prévia */
.shell{height:100%;display:flex;flex-direction:column}
.viewport{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:16px 16px 6px}
.frame{position:relative;flex:none;overflow:hidden;border-radius:20px;background:#07122B;box-shadow:0 30px 80px -30px rgba(0,0,0,.45),0 0 0 1px var(--line)}
.bar{flex:none;display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 16px 14px;flex-wrap:wrap}
.seg{display:inline-flex;padding:4px;border-radius:14px;background:var(--bar);border:1px solid var(--line)}
.seg button{height:40px;padding:0 14px;border:0;border-radius:10px;background:transparent;color:var(--muted);font:600 14px/1 inherit;font-family:inherit;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--fg);color:var(--page)}
.btn{width:48px;height:48px;border-radius:50%;border:0;background:var(--fg);color:var(--page);display:grid;place-items:center;cursor:pointer}
.btn svg{width:22px;height:22px}
.btn .i-pause,.btn.on .i-play{display:none}
.btn.on .i-pause{display:block}
.seg button:focus-visible,.btn:focus-visible{outline:3px solid #12E4FF;outline-offset:2px}

/* incorporado */
body.embed .shell{display:block}
body.embed .viewport{position:fixed;inset:0;padding:0;display:block}
body.embed .frame{position:absolute;inset:0;width:auto!important;height:auto!important;border-radius:0;box-shadow:none}
body.embed .bar{display:none}

/* palco */
.stage{position:absolute;inset:0;overflow:hidden;background:var(--bg);color:var(--txt);
  font-family:Sora,-apple-system,system-ui,sans-serif;font-size:32px;line-height:1.2;-webkit-font-smoothing:antialiased}
.stage p{margin:0}
.cam{position:absolute;inset:0;overflow:hidden}
.world{position:absolute;left:0;top:0;width:2400px;height:2300px;transform-origin:0 0}
.dots{position:absolute;left:-2400px;top:-2400px;width:7200px;height:7200px;
  background-image:radial-gradient(circle,var(--dot) 1.8px,transparent 2.4px);background-size:38px 38px}
.card{position:absolute;background:var(--surf);border:1.5px solid var(--edge);box-shadow:0 34px 60px -34px var(--shadow)}
.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}

/* logo */
.mark{position:absolute;display:block;pointer-events:none}
#markGlow{opacity:0;filter:brightness(1.45) saturate(1.3) drop-shadow(0 0 14px var(--a1))}
.word{position:absolute}
.word i{position:absolute;top:0;display:block;background-repeat:no-repeat;filter:var(--wordfilter)}

/* prompt */
.prompt{left:300px;top:600px;width:800px;height:120px;border-radius:60px}
.spark{position:absolute;left:34px;top:38px;width:44px;height:44px}
.ph,.typed{position:absolute;left:96px;top:0;line-height:120px;font-size:32px;font-weight:500;white-space:nowrap}
.ph{color:var(--sec)}
.caret{display:inline-block;width:3px;height:38px;margin-left:3px;vertical-align:-7px;background:var(--a1);border-radius:2px}
.send{position:absolute;right:18px;top:16px;width:88px;height:88px;border-radius:50%;display:grid;place-items:center}
.send svg{width:38px;height:38px}
.fx{position:absolute;left:0;top:0;border-radius:50%;border:3px solid var(--a1);opacity:0;pointer-events:none}
#sendFx{width:120px;height:120px;margin:-60px 0 0 -60px}

/* editor */
.editor{left:1180px;top:780px;width:680px;height:400px;border-radius:28px;overflow:hidden}
.ebar{height:58px;display:flex;align-items:center;gap:10px;padding:0 24px;border-bottom:1.5px solid var(--edge)}
.ebar i{display:block;width:14px;height:14px;border-radius:50%;background:var(--surf2)}
.ebar span{margin-left:16px;font-size:24px;font-weight:500;color:var(--sec)}
.gen{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:22px;font-weight:600;font-style:normal;color:var(--a1);opacity:0}
.gen b{display:block;width:10px;height:10px;border-radius:50%;background:var(--a1)}
.code{position:absolute;left:0;top:78px;right:0;font-size:26px;line-height:56px}
.gut{position:absolute;left:26px;width:30px;text-align:right;color:var(--sec);opacity:.55}
.ln{position:absolute;left:78px;height:56px;white-space:pre}
.clip{display:inline-block;overflow:hidden;white-space:pre;vertical-align:top;height:56px}
.hl{position:absolute;left:0;right:0;height:56px;background:var(--hl);opacity:0}
.k{color:var(--sk)}.f{color:var(--sf)}.s{color:var(--ss)}.p{color:var(--sec)}
.ln .caret{height:32px;vertical-align:-6px;margin-left:1px}

/* anel */
.ring{position:absolute;left:1902px;top:910px;width:300px;height:300px}
.ring svg.r{position:absolute;inset:0;width:300px;height:300px;overflow:visible}
.glow{position:absolute;left:10px;top:10px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,var(--glow),transparent 68%);opacity:0}
.pct{position:absolute;left:0;right:0;top:50%;margin-top:-32px;height:64px;line-height:64px;text-align:center;font-size:52px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.rcheck{position:absolute;left:105px;top:105px;width:90px;height:90px;overflow:visible}
.cap{position:absolute;text-align:center;font-size:26px;font-weight:500;color:var(--sec)}
#rcap{left:1902px;top:1222px;width:300px}

/* cotações */
.chip{left:1600px;top:1727px;width:260px;height:72px;border-radius:36px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:28px;font-weight:650}
.chip svg{width:28px;height:28px}
.row{left:1000px;width:560px;height:92px;border-radius:26px}
.av{position:absolute;left:20px;top:20px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--surf2);color:var(--sec);font-size:20px;font-weight:700}
.rn{position:absolute;left:92px;top:14px}
.rn b{display:block;font-size:29px;font-weight:650;line-height:36px}
.rn small{display:block;font-size:21px;font-weight:500;color:var(--sec);line-height:26px}
.rp{position:absolute;right:26px;top:0;line-height:92px;font-size:33px;font-weight:700;font-variant-numeric:tabular-nums}
.best{position:absolute;right:168px;top:-18px;height:36px;line-height:36px;padding:0 14px;border-radius:18px;background:var(--a1);color:var(--ink);font-size:20px;font-weight:700;font-style:normal;opacity:0;transform-origin:center}
.pill{position:absolute;left:520px;top:1990px;width:380px;height:104px;border-radius:52px;box-shadow:0 0 44px -10px var(--glow)}
.pl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;font-size:32px;font-weight:700;color:var(--ink)}
#pl2{color:var(--on2)}
.pl svg{width:32px;height:32px}
#pillFx{width:380px;height:104px;margin:-52px 0 0 -190px;border-radius:52px}
.cf{position:absolute;left:0;top:0;display:block;border-radius:3px;opacity:0}

/* bolinha */
.ball{position:absolute;left:0;top:0;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:var(--ball);display:block;box-shadow:0 0 22px var(--ballglow),0 12px 24px -8px var(--shadow)}
.trail{position:absolute;left:0;top:0;width:100px;height:44px;margin-top:-22px;border-radius:22px;display:block;opacity:0;transform-origin:0 50%;
  background:linear-gradient(to left,transparent,var(--trail));filter:blur(3px)}