@font-face{font-family:Satoshi;src:url(satoshi-300.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:Satoshi;src:url(satoshi-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Satoshi;src:url(satoshi-500.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --bg:#06070a;--s1:#0b0c10;
  --t1:#eef0f6;--t2:#a4a9b8;--t3:#7a7f90;
  --line:#ffffff13;--line-2:#ffffff24;--line-3:#ffffff38;
  --coral:#c9cdd8;--coral-t:#e6e9f0;--gelo:#eef0f6;--anil:#9aa0ae;
  --erro:#ff9b9b;
  --font:"Satoshi",ui-sans-serif,system-ui,sans-serif;
  --r-xl:28px;
  --gutter:clamp(8px,1.4vw,20px);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --grain-fine:url(grain-fine.png);
}
*,*:before,*:after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--t1);font:400 16px/1.55 var(--font);letter-spacing:-.005em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
button,input{font:inherit;color:inherit}
::selection{background:color-mix(in srgb,var(--anil) 35%,transparent)}
:focus-visible{outline:2px solid var(--anil);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- palco com o gradiente ---------- */
.wrap{padding:var(--gutter);min-height:100svh;display:grid}
.stage{
  --stage-r:var(--r-xl);
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:var(--stage-r);clip-path:inset(0 round var(--stage-r));
  box-shadow:inset 0 0 0 1px var(--line);
  background:#000;
  display:grid;place-items:center;
  padding:48px 20px;
  min-height:calc(100svh - var(--gutter)*2);
}
.stage>canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:0;transition:opacity 1.2s var(--ease-out)}
.stage>canvas.on{opacity:1}
.stage:after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background-image:var(--grain-fine);background-size:128px;image-rendering:pixelated;opacity:.22;mix-blend-mode:soft-light}
.stage:before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;box-shadow:inset 0 1px #ffffff12}
/* película preta por cima do shader (ajuste --veil para clarear/escurecer) */
.stage{--veil:.5}
.veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(70% 60% at 50% 50%,rgba(0,0,0,.25),transparent 75%),rgba(0,0,0,var(--veil))}
.inner{position:relative;z-index:5;display:grid;justify-items:center;gap:22px;width:min(100%,760px);text-align:center}

/* ---------- título ---------- */
.pill{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px 0 12px;border-radius:999px;font-size:13px;color:#c4c8d4;background:#ffffff09;box-shadow:inset 0 0 0 1px var(--line-2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-shadow:0 1px 2px #00000059,0 0 28px #00000073}
.pill svg{color:var(--gelo)}
h1{
  margin:0;font-weight:300;letter-spacing:-.045em;line-height:.98;text-wrap:balance;
  font-size:clamp(38px,5.2vw,76px);color:#fff;
  text-shadow:0 1px 2px #00000059,0 0 28px #00000073;
  padding-block:.1em .18em;margin-block:-.1em -.18em;
}
h1 .soft{display:block;color:#fff}
.lead{margin:-6px 0 0;max-width:30em;color:#c4c8d4;font-size:clamp(15px,1.15vw,17px);text-shadow:0 1px 2px #00000059,0 0 28px #00000073}

/* ---------- campo de URL ---------- */
.clone{width:100%;max-width:640px;margin-top:10px}
.field{
  position:relative;display:flex;align-items:center;gap:10px;
  height:64px;padding:0 8px 0 22px;border-radius:999px;
  background:radial-gradient(120% 140% at 50% 0,#1a1c24e6 0%,#07080bf0 70%);
  box-shadow:inset 0 1px 0 #ffffff1f,0 18px 50px -18px color-mix(in srgb,var(--anil) 45%,transparent),0 30px 80px -30px #000;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:box-shadow .3s var(--ease-out);
}
.field:focus-within{box-shadow:inset 0 1px 0 #ffffff26,0 0 0 4px color-mix(in srgb,var(--coral) 16%,transparent),0 18px 50px -18px color-mix(in srgb,var(--anil) 55%,transparent),0 30px 80px -30px #000}
.field.err{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--erro) 60%,transparent),0 0 0 4px color-mix(in srgb,var(--erro) 14%,transparent),0 30px 80px -30px #000}
.field .ico{flex:none;color:var(--t3)}
.field input{
  flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;
  font-size:16px;color:var(--t1);letter-spacing:-.01em;
}
.field input::placeholder{color:var(--t3)}
.go{
  flex:none;display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 6px 0 22px;border:0;border-radius:999px;cursor:pointer;
  color:#0b0c10;font-size:15px;font-weight:500;
  background:linear-gradient(#fff,#dfe3ec);
  box-shadow:inset 0 -2px 4px #0000001f,0 10px 30px -12px color-mix(in srgb,var(--gelo) 50%,transparent);
  transition:transform .12s var(--ease-out),background .2s var(--ease-out);
}
.go:hover{background:linear-gradient(#fff,#eceff5)}
.go:active{transform:scale(.97)}
.go .orb{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#0b0c10;color:#fff;overflow:hidden;position:relative}
.go .orb svg{transition:transform .35s var(--ease-out)}
.go:hover .orb svg{transform:translateX(2px)}
.go[aria-busy=true]{pointer-events:none}
.go[aria-busy=true] .orb svg{display:none}
.go[aria-busy=true] .orb:after{content:"";width:14px;height:14px;border-radius:50%;border:2px solid #ffffff40;border-top-color:#fff;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.msg{min-height:22px;margin:12px 0 0;font-size:13.5px;color:#c4c8d4;text-shadow:0 1px 2px #00000080}
.msg.err{color:var(--erro)}
.msg b{color:#fff;font-weight:500}


/* ---------- borda de metal líquido no campo ---------- */
@property --ring-a{syntax:"<angle>";inherits:false;initial-value:0deg}
@property --ring-b{syntax:"<angle>";inherits:false;initial-value:180deg}
.field:before,.field:after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.6px;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.field:before{
  background:conic-gradient(from var(--ring-a),#fff 0deg,#9aa0ae 34deg,#2c2f37 88deg,#eef0f6 140deg,#5d626e 182deg,#fff 226deg,#3a3d46 282deg,#c9cdd8 326deg,#fff 360deg);
  animation:ring-a 6s linear infinite}
.field:after{
  background:conic-gradient(from var(--ring-b),transparent 0deg,#ffffffd9 24deg,transparent 60deg,transparent 170deg,#dfe3ecb3 200deg,transparent 240deg);
  mix-blend-mode:screen;animation:ring-b 3.8s linear infinite reverse}
.field:focus-within:before{animation-duration:3s}
.field.err:before{background:conic-gradient(from var(--ring-a),#ffd0d0,#ff8a8a 90deg,#5a2a2a 180deg,#ffb0b0 270deg,#ffd0d0)}
@keyframes ring-a{to{--ring-a:360deg}}
@keyframes ring-b{to{--ring-b:540deg}}
@media (prefers-reduced-motion:reduce){.field:before,.field:after{animation:none}}

@media (max-width:560px){
  .stage{padding:40px 14px}
  .field{height:auto;flex-wrap:wrap;padding:8px;border-radius:24px;gap:0}
  .field .ico{display:none}
  .field input{height:52px;padding:0 14px;flex-basis:100%}
  .go{width:100%;justify-content:space-between;height:52px}
}

/* entrada suave */
.reveal{opacity:0;transform:translateY(10px);filter:blur(6px);animation:in .9s var(--ease-out) forwards;animation-delay:var(--d,0s)}
@keyframes in{to{opacity:1;transform:none;filter:none}}
@media (prefers-reduced-motion:reduce){.reveal{animation:none;opacity:1;transform:none;filter:none}}

/* ---------- escolha da IA ---------- */
.ias{margin:0 0 14px;padding:0;border:0;min-width:0}
.ias legend{margin:0 auto 10px;padding:0;font-size:13px;color:#c4c8d4;text-shadow:0 1px 2px #00000080}
.ia-list{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.ia-list label{position:relative;cursor:pointer}
.ia-list input{position:absolute;opacity:0;pointer-events:none}
.ia-list span{display:inline-flex;align-items:center;height:36px;padding:0 15px;border-radius:999px;font-size:13.5px;color:#d4d8e0;
  background:#07080bb3;box-shadow:inset 0 0 0 1px #ffffff26;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background .2s var(--ease-out),color .2s var(--ease-out),box-shadow .2s var(--ease-out)}
.ia-list label:hover span{box-shadow:inset 0 0 0 1px #ffffff55}
.ia-list input:checked+span{color:#0b0c10;background:linear-gradient(#fff,#dfe3ec);box-shadow:inset 0 -2px 4px #0000001f,0 8px 24px -10px #eef0f680}
.ia-list input:focus-visible+span{outline:2px solid var(--anil);outline-offset:2px}
.ias[disabled] .ia-list label{cursor:default}
.ias[disabled] .ia-list input:not(:checked)+span{opacity:.45}

/* ---------- clonando ---------- */
.field.busy:before{animation-duration:1.4s}
.field.busy input{color:#a4a9b8}
.go[hidden]{display:none}
.go .go-label{font-variant-numeric:tabular-nums}
.progress{margin-top:16px}
.progress[hidden],.done[hidden]{display:none}
.bar{position:relative;height:6px;border-radius:999px;background:#ffffff14;box-shadow:inset 0 0 0 1px #ffffff14;overflow:hidden}
.bar i{position:absolute;inset:0 auto 0 0;width:0;border-radius:inherit;
  background:linear-gradient(90deg,#9aa0ae,#fff 50%,#9aa0ae) 0 0/200% 100%;box-shadow:0 0 14px #ffffff66;
  transition:width .35s linear;animation:barshine 1.2s linear infinite}
@keyframes barshine{to{background-position:-200% 0}}
.p-row{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-size:13.5px;color:#c4c8d4;text-shadow:0 1px 2px #00000080}
.p-step{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.p-time{flex:none;font-variant-numeric:tabular-nums;color:#fff}

/* ---------- pronto ---------- */
.done{margin-top:14px;animation:in .6s var(--ease-out) both}
.d-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.copy,.again{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border:0;border-radius:999px;cursor:pointer;font-size:14px}
.copy{color:#eef0f6;background:#07080bcc;box-shadow:inset 0 0 0 1px #ffffff33;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.copy:hover{box-shadow:inset 0 0 0 1px #ffffff66}
.again{color:#a4a9b8;background:none;text-decoration:underline;text-underline-offset:3px}
.again:hover{color:#fff}
.tip{max-width:34em;margin:12px auto 0;font-size:13.5px;line-height:1.5;color:#c4c8d4;text-shadow:0 1px 2px #00000080}
.tip b{color:#fff;font-weight:500}
@media (max-width:560px){
  .ia-list{gap:6px}
  .ia-list span{height:34px;padding:0 13px;font-size:13px}
}

/* ícone de cada IA, à direita do nome, na cor do texto */
.ia-list{gap:6px}
.ia-list span{gap:7px;padding:0 12px 0 14px}
.ia-ico{width:14px;height:14px;flex:none;display:block}
@media (max-width:560px){.ia-ico{width:14px;height:14px}}

/* sem o fundo azul do preenchimento automático do navegador */
.field input:-webkit-autofill,.field input:-webkit-autofill:hover,.field input:-webkit-autofill:focus,.field input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--t1);caret-color:var(--t1);-webkit-box-shadow:0 0 0 1000px #0b0c10 inset;box-shadow:0 0 0 1000px #0b0c10 inset;
  transition:background-color 9999s ease-out 0s;border-radius:0}
.field input:autofill{background:transparent}

/* ---------- botão sair ---------- */
.sair{position:fixed;top:calc(var(--gutter) + 14px);right:calc(var(--gutter) + 14px);z-index:20;height:34px;padding:0 14px;border:0;border-radius:999px;cursor:pointer;font-size:13px;color:#c4c8d4;background:#00000040;box-shadow:inset 0 0 0 1px var(--line-2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:color .2s,box-shadow .2s}
.sair:hover{color:var(--t1);box-shadow:inset 0 0 0 1px var(--line-3)}
.sair[disabled]{opacity:.6;cursor:progress}

/* ---------- aceite dos termos ---------- */
.aceite{display:flex;gap:10px;align-items:flex-start;max-width:560px;margin:14px auto 0;font-size:13px;line-height:1.5;color:#c4c8d4;text-align:left;cursor:pointer}
.aceite input{flex:none;width:16px;height:16px;margin:2px 0 0;accent-color:#9a8cf2;cursor:pointer}
.aceite a{color:#e6e9f0;text-decoration:underline;text-underline-offset:3px}
.aceite.err span{color:var(--erro)}
.termos-link{position:fixed;bottom:calc(var(--gutter) + 12px);right:calc(var(--gutter) + 16px);z-index:20;font-size:12px;color:#a4a9b8;text-decoration:underline;text-underline-offset:3px}
.termos-link:hover{color:#eef0f6}