/* Layout: palco escuro; uma animação central (pílulas que se organizam por gênero); 3 passos em tela cheia */
:root{
  color-scheme:dark;
  --ink:#0c0a12; --surface:#17141f; --raise:#211d2c; --line:#322c40;
  --text:#f5f1ea; --muted:#a49cb3;
  --pagode:#ffc53d; --funk:#ff4d8d; --trap:#8f7bff; --boombap:#2fd6b5;
  --go:#1ed760;
  --display:"Anton","Arial Narrow",Impact,sans-serif;
  --body:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"DM Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --gut:max(20px,5vw);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--text);font:400 17px/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.grain{position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.09;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
h1,h2,h3,.n,.brand,.big{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.98;letter-spacing:.01em;margin:0;text-wrap:balance}
p{margin:0}
b{font-weight:700;color:var(--text)}
a{color:inherit}
:focus-visible{outline:2px solid var(--text);outline-offset:3px}

.top{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:22px var(--gut)}
.brand{font-size:1.25rem;text-decoration:none;letter-spacing:.06em}
.brand span{color:var(--muted)}
.toplink{font-size:.9rem;color:var(--muted);text-decoration:none}
.toplink:hover{color:var(--text)}

.eyebrow{font:500 .78rem var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.lead{color:var(--muted);font-size:1.12rem;max-width:30em}
.fine{color:var(--muted);font-size:.86rem}
.actions{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center}
.go{font:700 1.05rem var(--body);background:var(--go);color:#04210f;border:0;border-radius:999px;padding:16px 34px;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s}
.go:hover{transform:translateY(-2px);box-shadow:0 12px 34px -10px var(--go)}
.go:active{transform:scale(.97)}
.btn{display:inline-block;font:500 .95rem var(--body);color:var(--text);background:transparent;border:1px solid var(--line);border-radius:999px;padding:11px 20px;cursor:pointer;text-decoration:none;transition:border-color .2s,background .2s}
.btn:hover{border-color:var(--text);background:#ffffff0d}
.quiet{color:var(--muted);text-decoration:none;font-size:.95rem}
.quiet:hover{color:var(--text)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;overflow:hidden;
  background:radial-gradient(90% 70% at 85% 110%,#2a1f4a 0%,transparent 60%),radial-gradient(60% 50% at 0% 0%,#3a1530 0%,transparent 65%)}
#fx{position:absolute;inset:0;width:100%;height:100%}
.hero-in{position:relative;width:100%;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:5vw;align-items:end;padding:120px var(--gut) 9vh}
.hero-text{display:flex;flex-direction:column;gap:22px;align-self:center}
h1{font-size:clamp(2.9rem,6.4vw,6.6rem)}
.ln{display:block;overflow:hidden;padding-top:.06em}
.ln>span{display:block;white-space:nowrap;animation:up 1.1s var(--ease) both}
.ln:nth-child(2)>span{animation-delay:.12s}.ln:nth-child(3)>span{animation-delay:.24s;color:var(--pagode)}
@keyframes up{from{transform:translateY(105%)}}
.hero .eyebrow,.hero .lead,.hero .actions{animation:fade 1s .5s both}
@keyframes fade{from{opacity:0;transform:translateY(12px)}}
.stage{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;height:min(46vh,380px);align-items:end}
.lane{height:100%;display:flex;align-items:flex-end;justify-content:center;border-bottom:2px solid color-mix(in srgb,var(--c) 0%,var(--line));transition:border-color .8s}
.lane b{font:400 clamp(.8rem,1.5vw,1.15rem) var(--display);text-transform:uppercase;letter-spacing:.05em;color:var(--c);padding-bottom:8px;opacity:.25;transition:opacity .8s;white-space:nowrap}
.stage.sorted .lane{border-color:var(--c)}
.stage.sorted .lane b{opacity:1}

/* ---------- passos ---------- */
.steps{padding:0 var(--gut)}
.steps-head{padding:16vh 0 4vh;display:flex;flex-direction:column;gap:14px}
.steps-head h2{font-size:clamp(2.4rem,6vw,5rem)}
.steps-head p{color:var(--muted);font-size:1.1rem}
.step{min-height:86svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6vw;align-items:center;padding:8vh 0;border-top:1px solid var(--line)}
.step-text{display:flex;flex-direction:column;align-items:flex-start;gap:18px;max-width:30em}
.n{font-size:clamp(5rem,13vw,11rem);color:var(--c);line-height:.8}
.step h3{font-size:clamp(1.9rem,4vw,3.2rem)}
.step p{color:var(--muted)}
.chip{display:flex;align-items:center;gap:10px;max-width:100%;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px 8px 8px 14px}
.chip code{font:400 .92rem var(--mono);color:var(--c);overflow-wrap:anywhere;min-width:0}
.chip button{flex:none;font:700 .85rem var(--body);background:var(--c);color:#14101c;border:0;border-radius:8px;padding:8px 14px;cursor:pointer}

.shot{position:relative;display:grid;place-items:center;min-height:340px;min-width:0}
.shot::before{content:"";position:absolute;inset:8% 6%;background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 34%,transparent),transparent);filter:blur(30px)}
.win{position:relative;width:min(100%,430px);background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:26px;display:flex;flex-direction:column;gap:18px;box-shadow:0 50px 90px -30px #000;transform:perspective(1200px) rotateY(-9deg) rotateX(4deg);animation:drift 9s ease-in-out infinite alternate}
@keyframes drift{to{transform:perspective(1200px) rotateY(-3deg) rotateX(1deg) translateY(-10px)}}
.win-t{font:400 1.5rem var(--display);text-transform:uppercase;letter-spacing:.03em}
.okb{font:700 .9rem var(--body);color:var(--c);opacity:0}
.ptr{position:absolute;left:60%;top:55%;width:24px;height:24px;opacity:0;pointer-events:none;z-index:2;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l6 19 3-8 8-3z' fill='%23fff' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat;filter:drop-shadow(0 4px 6px #000a)}
.ptr::after{content:"";position:absolute;left:-12px;top:-12px;width:26px;height:26px;border:2px solid var(--c);border-radius:50%;opacity:0}

/* passo 1: um clique para entrar (laço de 6s) */
.s1 .win{align-items:center;gap:22px;padding:38px 26px 30px}
.fakego{position:relative;font:700 1rem var(--body);background:var(--go);color:#04210f;border-radius:999px;padding:14px 30px;animation:s1press 6s infinite}
@keyframes s1press{0%,40%{transform:none}43%{transform:scale(.9)}47%,100%{transform:none}}
.fakego .ptr{left:62%;top:50%;animation:s1p 6s infinite var(--ease)}.fakego .ptr::after{animation:s1r 6s infinite}
@keyframes s1p{0%,10%{opacity:0;transform:translate(110px,90px)}16%{opacity:1}40%,56%{opacity:1;transform:none}66%,100%{opacity:0;transform:none}}
@keyframes s1r{0%,40%{opacity:0;transform:scale(.3)}42%{opacity:1}50%,100%{opacity:0;transform:scale(2.2)}}
.s1 .okb{animation:s1ok 6s infinite}
@keyframes s1ok{0%,46%{opacity:0;transform:translateY(8px)}52%,90%{opacity:1;transform:none}100%{opacity:0}}

/* passo 2: cada música ganha seu gênero (laço de 7s) */
.s2 .win{gap:12px}
.tr{display:flex;align-items:center;gap:12px}
.tr i{flex:none;width:38px;height:38px;border-radius:8px;background:var(--raise);animation:s2cover 7s infinite;animation-delay:calc(var(--i)*.4s)}
.tr span{height:10px;border-radius:5px;background:var(--raise);flex:0 1 auto}
.tr em{margin-left:auto;flex:none;font:700 .78rem var(--body);font-style:normal;background:var(--c);color:#14101c;border-radius:999px;padding:5px 12px;opacity:0;animation:s2tag 7s infinite var(--ease);animation-delay:calc(var(--i)*.4s)}
@keyframes s2tag{0%,14%{opacity:0;transform:scale(.5)}20%,84%{opacity:1;transform:none}90%,100%{opacity:0;transform:none}}
@keyframes s2cover{0%,14%{background:var(--raise)}20%,84%{background:var(--c)}90%,100%{background:var(--raise)}}

/* passo 3: playlists prontas */
.s3{display:flex;flex-direction:column;gap:12px;align-items:stretch;justify-content:center;width:min(100%,430px);justify-self:center}
.pl{position:relative;display:flex;justify-content:space-between;align-items:baseline;background:var(--surface);border:1px solid var(--line);border-left:6px solid var(--c);border-radius:14px;padding:16px 20px;animation:plin 7s infinite var(--ease);animation-delay:calc(var(--i)*.18s)}
.pl b{font:400 1.5rem var(--display);text-transform:uppercase;letter-spacing:.03em}
.pl span{font:400 1rem var(--mono);color:var(--c)}
@keyframes plin{0%{opacity:0;transform:translateX(60px)}10%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateX(-30px)}}

.made{font:700 1rem var(--body);color:var(--go);text-align:center;padding-top:6px;animation:plin 7s infinite var(--ease);animation-delay:calc(var(--i)*.18s)}
.end{min-height:60svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;text-align:center;border-top:1px solid var(--line);padding:10vh 0}
.end h2{font-size:clamp(2.6rem,8vw,6.4rem)}
/* ---------- guia de configuração ---------- */
.wiz{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:16px;background:#07060bd9;backdrop-filter:blur(14px);animation:fade .4s var(--ease) both}
.wiz-box{--c:var(--pagode);width:min(100%,520px);max-height:100%;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:22px 24px 24px;display:flex;flex-direction:column;gap:18px;box-shadow:0 60px 120px -30px #000}
.wiz-top{display:flex;justify-content:space-between;align-items:center}
.wiz-top button{background:transparent;border:0;color:var(--muted);font-size:1.1rem;cursor:pointer;width:36px;height:36px;border-radius:50%}
.wiz-top button:hover{background:var(--raise);color:var(--text)}
.wiz-bar{height:4px;border-radius:2px;background:var(--raise);overflow:hidden}
.wiz-bar i{display:block;height:100%;background:var(--c);border-radius:2px;transition:width .5s var(--ease)}
.ws{display:none;flex-direction:column;align-items:flex-start;gap:14px;min-height:300px}
.ws.on{display:flex;animation:wsin .5s var(--ease) both}
@keyframes wsin{from{opacity:0;transform:translateX(24px)}}
.ws h3{font-size:clamp(1.7rem,5vw,2.3rem)}
.ws p{color:var(--muted)}
.ws input{width:100%;font:400 1.05rem var(--mono);color:var(--text);background:var(--ink);border:1px solid var(--line);border-radius:12px;padding:16px}
.ws input:focus{outline:none;border-color:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 25%,transparent)}
.err{color:var(--funk)!important;font-size:.9rem}
.fill{display:flex;flex-direction:column;gap:8px;width:100%}
.fill small{color:var(--muted);font-size:.82rem;margin-top:6px}
.fill .chip{justify-content:space-between;background:var(--ink)}
.ill{width:100%;background:var(--ink);border:1px solid var(--line);border-radius:16px;padding:22px;display:grid;place-items:center;min-height:130px}
.mini{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
.mini.row{flex-direction:row;justify-content:space-between}
.mini.left{align-items:flex-start;gap:12px}
.mt{font:400 1.2rem var(--display);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.mb{font:700 .92rem var(--body);background:var(--text);color:#14101c;border-radius:999px;padding:9px 22px}
.mc{display:flex;align-items:center;gap:10px;font-size:.92rem}
.mc i{display:grid;place-items:center;width:20px;height:20px;border-radius:5px;background:var(--c);color:#14101c;font:700 .75rem var(--body)}
.mini small{color:var(--muted);font-size:.8rem}
.mid{display:flex;align-items:center;gap:12px;font:400 .95rem var(--mono);color:var(--c)}
.mid em{font-style:normal;display:grid;place-items:center;width:34px;height:34px;border-radius:8px;background:var(--raise);color:var(--text)}
.hl{animation:hl 1.6s ease-out infinite}
@keyframes hl{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 90%,transparent)}100%{box-shadow:0 0 0 16px transparent}}
.wiz-nav{display:flex;justify-content:space-between;align-items:center;gap:12px}
.wiz-nav .go{padding:13px 26px;font-size:1rem}
.js .reveal{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease),transform 1.2s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .shot.reveal{transition-delay:.15s}

/* ---------- app ---------- */
#app{min-height:100svh;padding:120px var(--gut) 12vh;max-width:1100px;margin:0 auto}
.loading{min-height:60svh;display:flex;flex-direction:column;justify-content:center;gap:20px}
.big{font-size:clamp(2rem,6vw,4.4rem)}
progress{appearance:none;width:100%;height:6px;border:0;border-radius:3px;background:var(--surface);overflow:hidden}
progress::-webkit-progress-bar{background:var(--surface)}
progress::-webkit-progress-value{background:linear-gradient(90deg,var(--funk),var(--pagode));transition:width .3s}
progress::-moz-progress-bar{background:var(--pagode)}
#result{display:flex;flex-direction:column;gap:20px}
#result h2{font-size:clamp(2.4rem,7vw,5.4rem)}
.buckets{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;align-items:start;margin:10px 0}
.bucket{background:var(--surface);border:1px solid var(--line);border-top:5px solid var(--c);border-radius:16px;padding:18px;animation:fade .7s var(--ease) both;animation-delay:calc(var(--i)*.07s)}
.bucket.empty{opacity:.5}
.bucket .cnt{display:block;font:400 3.4rem/1 var(--display);color:var(--c);font-variant-numeric:tabular-nums}
.bucket .cnt small{font:400 .8rem var(--body);color:var(--muted);letter-spacing:.05em;margin-left:6px}
.bucket .head{display:flex;gap:10px;align-items:center;margin-top:12px}
.bucket input[type=checkbox]{flex:none;width:22px;height:22px;accent-color:var(--c)}
.bucket input[type=text]{flex:1;min-width:0;font:700 1.05rem var(--body);color:var(--text);background:transparent;border:0;border-bottom:1px solid var(--line);padding:4px 0}
.bucket input[type=text]:focus{outline:none;border-color:var(--c)}
.bucket details{margin-top:12px}
.bucket summary,.config summary{cursor:pointer;color:var(--muted);font-size:.88rem}
.bucket ul{max-height:240px;overflow:auto;margin:10px 0 0;padding:0;list-style:none;font-size:.86rem;color:var(--muted);display:flex;flex-direction:column;gap:6px}
.bucket li b{font-weight:500}
.done{min-height:1.5em;color:var(--pagode)}
.config{border-top:1px solid var(--line);padding-top:20px;margin-top:20px}
.config[open]{display:flex;flex-direction:column;gap:14px}
.rule{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto;gap:8px;margin-bottom:8px}
.rule input{font:400 .95rem var(--body);color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-width:0}
.rule button{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:10px;width:42px;cursor:pointer}

@media (max-width:820px){
  .hero-in{grid-template-columns:1fr;align-items:start;gap:28px;padding-top:110px;padding-bottom:5vh}
  .hero-text{align-self:start}
  .stage{height:min(32vh,240px);gap:6px}
  .step{grid-template-columns:1fr;gap:34px;min-height:0;padding:9vh 0}
  .shot{min-height:300px}
  .win{transform:none;animation:none}
  .rule{grid-template-columns:1fr auto}.rule input:nth-child(2){grid-column:1/-1;grid-row:2}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
  .okb,.tr em{opacity:1}.tr i{background:var(--c)}
}