/* Explicit section selectors also work in Safari without CSS @scope. */

:where(#quiz) body{margin:0;background:#080705;color:#f6f0e5;min-height:100svh}
:where(#quiz) header{display:flex;justify-content:space-between;gap:20px;padding:24px 32px;font:400 11px/1.5 Poppins,sans-serif}
:where(#quiz) header a{color:#D2AD68;text-decoration:none}
:where(#quiz) header>span{letter-spacing:.12em;color:#D2AD68}
:where(#quiz) .quiz-preview{max-width:1120px;width:calc(100% - 64px);margin:65px auto 35px}
:where(#quiz) .quiz-meta{display:flex;justify-content:space-between;margin:0 4px 17px;font:400 11px/1.5 Poppins,sans-serif;text-transform:uppercase;letter-spacing:.1em;color:#D2AD68}
:where(#quiz) .question-frame{position:relative;isolation:isolate;overflow:hidden;min-height:350px;border:1px solid #8F6B3580;border-radius:22px;background:linear-gradient(120deg,#ffdeb606,transparent 50%,#e9aa3108);box-shadow:inset 0 1px 0 #F1D99Aaa,0 15px 38px #0006;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:50px 80px 100px}
:where(#quiz) .question-frame:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;border-bottom:1px solid #8F6B35ab}
:where(#quiz) .question-frame canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
:where(#quiz) #question{font:500 clamp(30px,3.8vw,51px)/1.18 'Bodoni Moda',serif;text-align:center;max-width:860px;margin:0;text-transform:none;letter-spacing:-.015em;outline:none;text-wrap:balance}
:where(#quiz) #question .word{display:inline-block;opacity:0;transform:translateY(8px);filter:blur(4px);transition:opacity .32s,transform .45s,filter .45s}
:where(#quiz) #question .word.shown{opacity:1;transform:none;filter:none}
:where(#quiz) #question .word.gold{color:#D2AD68}
:where(#quiz) .choices{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:25px;min-height:142px}
:where(#quiz) .choice{position:relative;display:flex;align-items:center;gap:15px;text-align:left;padding:23px 19px;border:1px solid #8F6B3540;border-radius:10px;background:#ffffff02;color:#eee8da;opacity:0;transform:translateY(13px);transition:opacity .45s,transform .45s,border-color .2s,background .2s;min-height:132px;width:100%}
:where(#quiz) .choice.ready{opacity:1;transform:none}
:where(#quiz) .choice:hover, :where(#quiz) .choice:focus-visible{border-color:#8F6B35;background:#d69a2510;box-shadow:inset 0 0 0 1px #D2AD6835,0 4px 18px #D2AD6820;outline:none}
:where(#quiz) .choice .radio{width:21px;height:21px;border:1px solid #b7b5a8;border-radius:50%;flex-shrink:0}
:where(#quiz) .choice:hover .radio, :where(#quiz) .choice:focus-visible .radio{border-color:#8F6B35;background:#e8b84c;box-shadow:inset 0 0 0 3px #171207}
:where(#quiz) .choice .label{font:500 21px/1.3 'Bodoni Moda',serif}
:where(#quiz) .choice small{display:block;font:400 11px/1.5 Poppins,sans-serif;color:#c0bdb4;margin-top:8px}
:where(#quiz) .choice .arrow{width:21px;flex-shrink:0;margin-left:auto;color:#b8b5aa}
:where(#quiz) .choice:hover .arrow{color:#D2AD68}
:where(#quiz) .quiz-actions{display:flex;justify-content:space-between;margin-top:24px;min-height:30px}
:where(#quiz) .quiz-actions button{font:400 11px/1.5 Poppins,sans-serif;color:#D2AD68;border:0;border-bottom:1px solid #8F6B3555;border-radius:0;background:none;padding:3px 0}
:where(#quiz) .quiz-actions button:focus-visible{outline:1px solid #8F6B35;outline-offset:5px}
:where(#quiz) .privacy{text-align:center;font:400 11px/1.5 Poppins,sans-serif;color:#a99f8c;margin:28px 0}
:where(#quiz) #result-copy{font:400 15px/1.7 Poppins,sans-serif;max-width:680px;text-align:center;margin-top:24px;color:#e0d4bf}
:where(#quiz) .result-link{text-decoration:none;justify-content:center;font:500 15px/1.5 Poppins,sans-serif}
:where(#quiz) .choices.result{grid-template-columns:1fr;max-width:380px;margin-inline:auto;min-height:70px}
:where(#quiz) .choices.result .choice{min-height:65px}
:where(#quiz) .quiz-actions [hidden]{display:none}
@media(max-width:760px){
:where(#quiz) header{padding:20px}
:where(#quiz) .quiz-preview{width:calc(100% - 32px);margin-top:35px}
:where(#quiz) .question-frame{padding:35px 22px 95px;min-height:290px}
:where(#quiz) .choices{grid-template-columns:1fr;gap:12px}
:where(#quiz) .choice{min-height:85px;padding:18px}
:where(#quiz) .choice .label{font-size:21px}
:where(#quiz) .choice small{font-size:12px}
:where(#quiz) .privacy{font-size:10px}}
@media(prefers-reduced-motion:reduce){
:where(#quiz) #question .word, :where(#quiz) .choice{transition:none;filter:none;transform:none}}
:where(#quiz) .quiz-preview{max-width:1000px;margin-top:45px}
:where(#quiz) .question-frame{min-height:290px;padding:38px 65px 75px;overflow:visible}
:where(#quiz) #question{font-size:clamp(30px,3.5vw,46px);position:relative;z-index:2}
:where(#quiz) #voice-effect{position:absolute;inset:0;pointer-events:none;z-index:1;border-radius:inherit}
:where(#quiz) #voice-effect>div{width:100%;height:100%}
:where(#quiz) .voice-surface{height:100%;width:100%;border-radius:22px}
:where(#quiz) #result-copy{position:relative;z-index:2}
@media(max-width:760px){
:where(#quiz) .question-frame{min-height:250px;padding:30px 20px 65px}
:where(#quiz) .quiz-preview{margin-top:30px}}/* Moldura compacta com dois pontos de luz em lados opostos. */
:where(#quiz) .question-frame{min-height:220px;padding:30px 55px 55px}
:where(#quiz) #question{font-size:clamp(28px,3.1vw,41px)}
:where(#quiz) .question-frame::before{content:'';position:absolute;left:0;top:0;width:5px;height:5px;border-radius:50%;background:#fff1c0;box-shadow:0 0 6px 2px #D2AD68,0 0 16px 5px #D2AD6866;offset-path:rect(0% 100% 100% 0% round 22px);offset-distance:0%;animation:frame-glint 32s linear infinite;pointer-events:none;z-index:3}
:where(#quiz) .question-frame::after{inset:auto;left:0;top:0;width:5px;height:5px;border:0;border-radius:50%;background:#fff1c0;box-shadow:0 0 6px 2px #D2AD68,0 0 16px 5px #D2AD6866;offset-path:rect(0% 100% 100% 0% round 22px);offset-distance:50%;animation:frame-glint 32s linear infinite;animation-delay:-16s;z-index:3}
@keyframes frame-glint{from{offset-distance:0%}to{offset-distance:100%}}
@media(max-width:760px){
:where(#quiz) .question-frame{min-height:210px;padding:25px 20px 50px}}
@media(prefers-reduced-motion:reduce){
:where(#quiz) .question-frame::before, :where(#quiz) .question-frame::after{animation:none}}/* Halos internos difusos, sem pontos sobre o contorno. */
:where(#quiz) .question-frame{overflow:hidden}
:where(#quiz) .question-frame::before, :where(#quiz) .question-frame::after{inset:auto;top:auto;left:8%;bottom:-42px;width:250px;height:105px;border:0;border-radius:50%;offset-path:none;offset-distance:0%;background:radial-gradient(ellipse at center,#ffc45a70 0%,#e7a12f3b 28%,#d9932014 53%,transparent 73%);box-shadow:none;filter:blur(11px);pointer-events:none;z-index:1;animation:inner-light-drift 24s ease-in-out infinite alternate}
:where(#quiz) .question-frame::after{left:auto;right:8%;animation-delay:-12s;animation-direction:alternate-reverse}
@keyframes inner-light-drift{from{transform:translateX(-25px) scale(.9);opacity:.72}to{transform:translateX(100px) scale(1.12);opacity:1}}
@media(max-width:760px){
:where(#quiz) .question-frame::before, :where(#quiz) .question-frame::after{width:165px;height:90px;bottom:-38px}}
@media(prefers-reduced-motion:reduce){
:where(#quiz) .question-frame::before, :where(#quiz) .question-frame::after{animation:none}}/* Mesmo brilho difuso percorrendo o perímetro interno. */
:where(#quiz) .question-frame::before, :where(#quiz) .question-frame::after{inset:auto;left:0;top:0;bottom:auto;right:auto;width:220px;height:100px;offset-path:rect(12px calc(100% - 12px) calc(100% - 12px) 12px round 14px);offset-rotate:auto;offset-anchor:50% 50%;background:radial-gradient(ellipse at center,#ffc45a70 0%,#e7a12f3b 28%,#d9932014 53%,transparent 73%);filter:blur(11px);transform:none;opacity:1;animation:halo-perimeter 48s linear infinite}
:where(#quiz) .question-frame::after{animation-delay:-24s}
@keyframes halo-perimeter{from{offset-distance:0%}to{offset-distance:100%}}
@media(max-width:760px){
:where(#quiz) .question-frame::before, :where(#quiz) .question-frame::after{width:155px;height:85px;bottom:auto}}
@media(prefers-reduced-motion:reduce){
:where(#quiz) .question-frame::before, :where(#quiz) .question-frame::after{animation:none}
:where(#quiz) .question-frame::after{offset-distance:50%}}
:where(#quiz) .start-quiz{display:flex;align-items:center;justify-content:center;gap:38px;margin:25px auto 0;min-height:62px;width:300px;max-width:100%;padding:15px 28px;border:1px solid #8F6B35;border-radius:10px;background:linear-gradient(120deg,#b2741310,#080705,#b2741310);box-shadow:inset 0 0 12px #D2AD6820,0 0 5px #D2AD6870,0 6px 22px #D2AD6820;color:#f8f0df;font:400 14px/1.4 Poppins,sans-serif;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;transition:box-shadow .25s,background .25s}
:where(#quiz) .start-quiz svg{width:25px;height:25px;color:#D2AD68}
:where(#quiz) .start-quiz:hover{background:#d7a23819;box-shadow:inset 0 0 15px #D2AD682b,0 0 10px #D2AD6899}
:where(#quiz) .start-quiz:focus-visible{outline:2px solid #8F6B35;outline-offset:5px}
:where(#quiz) .start-quiz[hidden], :where(#quiz) .choices[hidden]{display:none}
:where(#quiz) #question{font-size:clamp(32px,3.7vw,48px);text-transform:uppercase}
@media(max-width:760px){
:where(#quiz) #question{font-size:clamp(28px,6.5vw,38px)}}
:where(#quiz) #question{line-height:1.3}
:where(#quiz) .start-metal{width:max-content;max-width:100%;margin:25px auto 0}
:where(#quiz) .start-metal:has([hidden]){display:none}
:where(#quiz) .start-metal .metal-fx-root{border-radius:999px!important;background:linear-gradient(125deg,#faf8ef,#c9c7c0 48%,#eee0bb)!important}
:where(#quiz) .start-metal .start-quiz, :where(#quiz) .start-quiz{width:auto;min-height:44px;margin:0 auto;padding:12px 23px;border-radius:999px;border:0;background:linear-gradient(125deg,#faf8ef,#c9c7c0 48%,#eee0bb);color:#25231e;box-shadow:none;font:500 12px/1.4 Poppins,sans-serif;letter-spacing:.035em}
:where(#quiz) .start-metal .start-quiz, :where(#quiz) .start-metal .start-quiz:hover{background:transparent;box-shadow:none}
:where(#quiz) .start-quiz:not(.start-metal .start-quiz){margin-top:25px}
:where(#quiz) .start-metal .metal-fx-root{border-radius:13px!important}
:where(#quiz) .start-metal .start-quiz, :where(#quiz) .start-quiz{font-size:14px;border-radius:13px;padding:13px 25px}
@font-face{font-family:Poppins;src:url('https://raw.githubusercontent.com/google/fonts/main/ofl/poppins/Poppins-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
:where(#quiz) .choice .label{font-family:Poppins,sans-serif;font-size:17px;font-weight:700;line-height:1.4}
:where(#quiz) .choice small{font-family:Poppins,sans-serif;font-weight:700;font-size:11px;line-height:1.5}
:where(#quiz) .question-frame::before, :where(#quiz) .question-frame::after{display:none}
:where(#quiz) .quiz-border-beam{position:absolute;inset:0;pointer-events:none;z-index:1;border-radius:inherit;filter:sepia(.45) saturate(1.4)}
:where(#quiz) .quiz-border-beam>div{width:100%;height:100%;border-radius:22px}
:where(#quiz) .border-light-surface{width:100%;height:100%;border-radius:22px}
:where(#quiz) .quiz-border-beam [data-beam]{--beam-stroke-opacity:4;--beam-inner-opacity:3;--beam-bloom-opacity:3}
:where(#quiz) .quiz-border-beam [data-beam][data-active]{animation-duration:24s,.6s!important}/* Beam mais visível e com percurso mais rápido. */
:where(#quiz) .quiz-border-beam [data-beam]{--beam-stroke-opacity:7;--beam-inner-opacity:8;--beam-bloom-opacity:7;--beam-strength:1!important}
:where(#quiz) .quiz-border-beam [data-beam][data-active]{animation-duration:7s,.6s!important}
:where(#quiz) .quiz-border-beam [data-beam]::before{box-shadow:inset 0 0 25px 5px #D2AD6880!important;filter:blur(2px)}
:where(#quiz) .quiz-border-beam [data-beam]::after{padding:2px!important}
:where(#quiz) .quiz-border-beam [data-beam-bloom]{filter:blur(13px) brightness(1.65)!important}
:where(#quiz) .question-frame, :where(#quiz) .choice, :where(#quiz) .choice:hover, :where(#quiz) .choice:focus-visible{background:rgba(0,0,0,.09)}
:where(#quiz) .quiz-preview{margin:0 auto}
:where(#quiz) .quiz-actions{display:flex;position:static;background:none}
:where(#quiz) .question-frame{isolation:isolate}
#quiz .word.instant{transition:none!important}