:root{--primary:#C084FC;--hover:#C084FC;--bg:#09090b;--muted:#a097b2;--surface:#C084FC33;color-scheme:dark}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#fff;font-family:Poppins,sans-serif;background-image:radial-gradient(2px 2px at 20px 30px,#ffffff26,transparent),radial-gradient(2px 2px at 40px 70px,#ffffff1a,transparent),radial-gradient(1px 1px at 90px 40px,#ffffff1f,transparent),radial-gradient(1px 1px at 130px 80px,#ffffff14,transparent),radial-gradient(2px 2px at 160px 30px,#ffffff1a,transparent);background-size:200px 100px}main{min-height:100svh;display:flex;flex-direction:column;align-items:center}button,input{font:inherit}button{cursor:pointer;transition:background .2s,border-color .2s,transform .15s}button:active{transform:scale(.96)}button:focus-visible,a:focus-visible{outline:3px solid #C084FC;outline-offset:4px}button:disabled{cursor:default;opacity:.5}.intro{width:100%;max-width:512px;padding:32px 20px 24px;text-align:center}.alert{font-family:Poppins,sans-serif;display:inline-block;background:#F59E0B;color:#fff;padding:12px 26px;border-radius:12px;font-size:18px;font-weight:700;letter-spacing:.04em;text-shadow:1px 2px 2px #0000004d;box-shadow:inset 0 0 5px #ffffffa9,0 4px 8px #f59e0b33;animation:alert-pulse 1.4s ease-in-out infinite}h1{font-size:24px;line-height:1.25;font-weight:800;margin:20px 0 0}u{text-decoration-thickness:2px;text-underline-offset:2px}.accent{color:#C084FC}.intro p{margin:16px 0 0;color:var(--muted);font-size:14px;line-height:20px}.intro strong{color:#F59E0B}.quiz-shell{width:100%;max-width:512px;padding:0 20px;flex:1}.progress{display:flex;gap:8px;margin-bottom:32px}.progress span{height:14px;border-radius:20px;background:var(--surface);flex:1;transition:background .25s}.progress span.filled{background:var(--primary)}.question{display:flex;align-items:flex-start;justify-content:center;gap:12px;font-size:24px;font-weight:800;line-height:1.25;text-align:center;padding:0 8px;margin:0 0 24px}.arrow{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--primary);margin-top:8px;display:grid;place-items:center;font-size:18px;font-weight:500}.choices{display:grid;gap:12px}.signs{grid-template-columns:repeat(4,minmax(0,1fr))}.option{border:2px solid #ffffff66;background:#fffffff2;color:var(--bg);border-radius:12px;font-weight:600}.option:hover{border-color:var(--primary)}.option.selected{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary),0 0 20px #C084FC80}.sign{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 6px 6px;min-width:0}.sign img{width:64px;height:64px;object-fit:contain;max-width:100%}.sign-label{background:var(--primary);color:white;border-radius:6px;padding:4px 0;font-size:10px;line-height:1.1;width:100%;letter-spacing:-.025em}.month-title{background:var(--primary);border-radius:8px;text-align:center;padding:10px;font-size:16px;font-weight:700;margin:0 0 12px}.days{grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-bottom:24px}.day{padding:12px 0;border-radius:8px;font-size:16px}.numbers{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}.number{min-width:88px;padding:12px 20px;font-size:18px;border-radius:8px;font-weight:700}.genders{grid-template-columns:repeat(2,minmax(0,1fr))}.gender{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px;font-size:14px}.gender img{width:64px;height:64px;object-fit:contain}.list .option{width:100%;text-align:left;display:flex;align-items:center;gap:16px;padding:16px 20px;font-size:16px}.check{width:24px;height:24px;border:2px solid #09090b66;border-radius:6px;flex-shrink:0}.list .selected,.genders .selected,.number.selected,.day.selected{background:var(--primary);color:#fff}.selected .check{border-color:#fff}.selected .check:after{content:'✓';display:block;text-align:center;line-height:20px}.name-form{display:flex;flex-direction:column;gap:28px}.name-form .question{margin:0}.name-input{width:100%;padding:16px 20px;border:2px solid #ffffff66;border-radius:12px;background:#fff;color:var(--bg);font-size:16px;font-weight:500;outline:none}.name-input:focus{border-color:var(--primary);box-shadow:none;outline:none}.name-input::placeholder{color:#09090b66}.cta{width:100%;padding:20px 24px;border:0;border-radius:12px;background:var(--primary);color:#fff;font-size:18px;font-weight:800;text-transform:uppercase;letter-spacing:.025em;box-shadow:0 0 24px #C084FC66;animation:pulse-breath 2s ease-in-out infinite}.cta:hover{background:var(--hover)}.back-wrap{text-align:center;margin-top:32px}.back{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 26px;border:0;border-radius:12px;background:#C084FC;color:#fff;font-size:18px;font-weight:700;letter-spacing:.04em;box-shadow:inset 0 0 5px #ffffffa9,0 4px 8px #c084fc33;animation:none}.back svg{width:22px;height:22px;flex-shrink:0;filter:drop-shadow(1px 2px 1px #00000030)}footer{width:100%;max-width:448px;padding:32px 16px;text-align:center}.logo{display:block;object-fit:contain;margin:0 auto 16px;opacity:.9}footer nav{display:flex;justify-content:center;flex-wrap:wrap;column-gap:16px;row-gap:8px}footer a{font-size:12px;color:var(--muted);text-decoration:none}footer a:hover{color:white}.credits{font-size:10px;color:#a097b2b3;line-height:1.6;margin:24px 0 0}.step{animation:enter .25s ease-out}.busy{pointer-events:none}.result{text-align:center}.result p{color:var(--muted);font-size:14px;line-height:1.7}.result dl{text-align:left;padding:20px;background:#C084FC26;border-radius:12px}.result dl div{display:flex;justify-content:space-between;gap:16px;padding:8px 0}.result dt{color:var(--muted);font-size:12px}.result dd{margin:0;text-align:right;font-size:13px}.video-slot{aspect-ratio:9/16;background:#09090b;border:1px solid #ffffff22;border-radius:12px;display:grid;place-items:center;padding:24px}.video-slot video{width:100%;height:100%}.video-slot span{font-size:14px;color:var(--muted)}[hidden]{display:none!important}@keyframes enter{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}@keyframes alert-pulse{50%{opacity:.92;transform:scale(1.05)}}@keyframes pulse-breath{50%{transform:scale(1.03);box-shadow:0 0 36px #C084FC99}}@media(min-width:768px){h1,.question{font-size:30px}.intro p{font-size:16px;line-height:24px}.arrow{width:28px;height:28px}.sign img{width:80px;height:80px}.sign-label{font-size:14px}.number{font-size:20px}.day,.list .option,.name-input,.back{font-size:18px}.cta{font-size:20px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Seleção dos oito arquétipos. */
.archetypes{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding-bottom:32px}
.archetype{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 10px 16px;min-height:174px;gap:6px;text-align:center}
.archetype-icon{width:68px;height:68px;object-fit:contain;margin-bottom:6px}
.archetype-name{font-size:15px;font-weight:800;line-height:1.25}
.archetype-secondary{font-size:12px;font-weight:500;color:#C084FC;line-height:1.3}
.archetype.selected{background:#C084FC}
.month-label{display:block;margin-bottom:8px;font-size:14px;color:var(--muted)}
.month-select{width:100%;border:2px solid #ffffff66;border-radius:12px;background:white;color:var(--bg);padding:14px 16px;font:inherit;margin-bottom:24px;color-scheme:light}
.month-select:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
@media(min-width:768px){.archetypes{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.archetype{padding:18px 6px 16px;min-height:168px}.archetype-icon{width:60px;height:60px}.archetype-name{font-size:13px}.archetype-secondary{font-size:11px}}

.months{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-bottom:8px}
.month-button{min-height:58px;padding:14px 4px;font-size:13px;font-weight:700}
.month-button.selected{background:var(--primary);color:#fff}
@media(min-width:768px){.month-button{font-size:16px;padding:16px 8px}}

.day-subtitle{text-align:center;color:var(--muted);font-size:14px;line-height:1.6;margin:-8px 0 24px}.day-subtitle strong{color:#fff}
.birth-days{grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.birth-day{aspect-ratio:1;padding:0;border-radius:8px;background:#fff;font-size:16px;font-weight:700;display:grid;place-items:center}
.birth-day.selected{background:var(--primary);color:#fff}
@media(min-width:768px){.day-subtitle{font-size:16px}.birth-day{font-size:18px}}

/* Ilustrações recortadas da referência fornecida pelo usuário. */
.archetype-icon{width:110px;height:110px;max-width:100%;object-fit:contain;border-radius:8px;margin-bottom:8px}
.archetype{background:#fff;min-height:210px}
@media(min-width:768px){.archetype-icon{width:94px;height:94px}.archetype{min-height:200px}}

/* As ilustrações transparentes acompanham o fundo do botão selecionado. */
.archetype-icon{background:transparent;border-radius:0}

/* Ordem de leitura dos arquétipos: dois cards por linha em todas as telas. */
.archetypes{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Seleção lavanda com contorno roxo. */
.option.selected{background:#F5EEFF;color:#09090B;border-color:#C084FC;box-shadow:0 0 12px #c084fc55}
.option.selected .check{border-color:#C084FC;color:#09090B}


/* Pulsação discreta no hover, seguindo o movimento do alerta. */
.back{line-height:1.4;transform-origin:center;animation:none;transition:transform .2s ease}
.back-label{display:block}
@media(hover:hover) and (pointer:fine){.back:hover{animation:back-scale 1.4s ease-in-out infinite}}
@keyframes back-scale{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
.question:focus{outline:none}
.arrow svg{width:18px;height:18px;display:block}
@media(prefers-reduced-motion:reduce){.back:hover,.cta:hover{animation:none}}

/* Títulos com ícones simétricos e alinhados ao centro do texto. */
.question{display:grid;grid-template-columns:24px minmax(0,1fr) 24px;align-items:center;gap:12px;width:100%;padding:0}
.question .arrow{margin-top:0;justify-self:center}
.question>span:not(.arrow){min-width:0}
@media(min-width:768px){.question{grid-template-columns:28px minmax(0,1fr) 28px}}

/* Voltar acompanha o estilo visual do botão de continuar. */
.back{padding:20px 24px;border:0;border-radius:12px;background:var(--primary);color:#fff;font-size:18px;font-weight:800;text-transform:uppercase;letter-spacing:.025em;text-shadow:none;box-shadow:0 0 24px #C084FC66;animation:pulse-breath 2s ease-in-out infinite;transition:background .2s,border-color .2s,transform .15s}
.back:hover{background:var(--hover);animation:pulse-breath 2s ease-in-out infinite}
@media(min-width:768px){.back{font-size:20px}}
@media(prefers-reduced-motion:reduce){.back,.back:hover{animation:none!important;transition:none!important}}

/* Voltar compacto, sem brilho, com pulsação somente no hover. */
.back{padding:12px 26px;font-size:18px;font-weight:700;letter-spacing:.04em;text-transform:none;box-shadow:none;animation:none}
.back:hover{box-shadow:none;animation:none}
@media(hover:hover) and (pointer:fine){.back:hover{animation:back-scale 1.4s ease-in-out infinite}}
@media(prefers-reduced-motion:reduce){.back:hover{animation:none!important}}

.back,.back:hover{background:#B574F0}

/* Progresso do quiz no mesmo dourado do alerta e do carregamento. */
.quiz-page .progress span{background:#F59E0B33}
.quiz-page .progress span.filled{background:#F59E0B}

/* Quiz: purple progress and the continue button's glow only on back hover. */
.quiz-page .progress span{background:#C084FC33}.quiz-page .progress span.filled{background:#C084FC}.back{background:#B574F0;box-shadow:none;animation:none}.back:hover{background:#C084FC;box-shadow:0 0 24px #C084FC66;animation:pulse-breath 2s ease-in-out infinite}.save-error{color:#ffb4bf;font-size:13px;text-align:center;line-height:1.5}@media(prefers-reduced-motion:reduce){.back:hover{animation:none!important}}