@import"https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&display=swap";@import"https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&display=swap";@import"https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;600;700&display=swap";:root{font-family:Noto Sans Thai,system-ui,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#c9a959;background-color:#1a1a1f;background-image:radial-gradient(circle at 50% 50%,#2a2a35 0%,transparent 50%),linear-gradient(rgba(201,169,89,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(201,169,89,.05) 1px,transparent 1px);background-size:100% 100%,20px 20px,20px 20px;background-position:0 0,0 0,0 0;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}#root{width:100%;margin:0 auto}button{font-family:Noto Sans Thai,system-ui,sans-serif}@media (prefers-color-scheme: dark){:root{color:#c9a959;background-color:#1a1a1f}.quiz-question,.quiz-result{background:#2a2a35f2!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.title,.question-text,.result-name{color:#c9a959!important}.result-description{color:#c9a959cc!important}}.app{max-width:800px;margin:0 auto;padding:2rem;text-align:center;position:relative}.title{font-family:Noto Sans Thai,sans-serif;color:#c9a959;font-size:2.5rem;margin-bottom:2rem;text-shadow:0 0 10px rgba(201,169,89,.3);letter-spacing:2px}.quiz-question{background:#2a2a35f2;padding:2rem;border-radius:1rem;box-shadow:0 0 20px #c9a9591a,inset 0 0 20px #c9a9590d;border:1px solid rgba(201,169,89,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .3s ease,box-shadow .3s ease}.question-text{font-family:Noto Sans Thai,sans-serif;font-size:1.5rem;color:#c9a959;margin-bottom:2rem;text-shadow:0 0 10px rgba(201,169,89,.2)}.choices{display:flex;flex-direction:column;gap:1rem}.choice-button{font-family:Noto Sans Thai,sans-serif;background:#2a2a35f2;color:#c9a959;border:1px solid rgba(201,169,89,.3);padding:1rem 2rem;font-size:1.1rem;border-radius:.5rem;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.choice-button:hover{background:#c9a9591a;border-color:#c9a95980;transform:translateY(-2px);box-shadow:0 5px 15px #c9a95933}.choice-button:after{content:"";position:absolute;top:50%;left:50%;width:150%;height:150%;background:radial-gradient(circle,rgba(201,169,89,.1) 0%,transparent 70%);transform:translate(-50%,-50%) scale(0);transition:transform .5s ease}.choice-button:hover:after{transform:translate(-50%,-50%) scale(1)}.quiz-result{background:#2a2a35f2;padding:2.5rem;border-radius:1rem;box-shadow:0 0 20px #c9a9591a,inset 0 0 20px #c9a9590d;border:1px solid rgba(201,169,89,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:fadeIn .5s ease;text-align:left}.result-name{font-family:Noto Sans Thai,sans-serif;font-size:2.2rem;color:#c9a959;margin-bottom:.5rem;text-shadow:0 0 10px rgba(201,169,89,.3);text-align:center}.result-title{font-family:Noto Sans Thai,sans-serif;font-size:1.5rem;color:#c9a959e6;margin-bottom:2rem;text-align:center;font-weight:600}.result-description{font-family:Noto Sans Thai,sans-serif;color:#c9a959e6;line-height:1.6;margin-bottom:2rem}.result-section{margin-bottom:1.5rem}.section-header{font-family:Noto Sans Thai,sans-serif;font-size:1.3rem;color:#c9a959;margin-bottom:.5rem;font-weight:600}.section-content{font-size:1.1rem;color:#c9a959cc;line-height:1.6}.section-content p{margin-bottom:.5rem}.bullet-point{padding-left:1.5rem;position:relative;margin-bottom:.5rem}.bullet-point:before{content:"•";position:absolute;left:.5rem;color:#c9a959}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.restart-button{font-family:Noto Sans Thai,sans-serif;background:#2a2a35f2;color:#c9a959;border:1px solid rgba(201,169,89,.3);padding:1rem 2rem;font-size:1.1rem;border-radius:.5rem;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden;display:block;margin:2rem auto 0}.restart-button:hover{background:#c9a9591a;border-color:#c9a95980;transform:translateY(-2px);box-shadow:0 5px 15px #c9a95933}.restart-button:after{content:"";position:absolute;top:50%;left:50%;width:150%;height:150%;background:radial-gradient(circle,rgba(201,169,89,.1) 0%,transparent 70%);transform:translate(-50%,-50%) scale(0);transition:transform .5s ease}.restart-button:hover:after{transform:translate(-50%,-50%) scale(1)}