:root{--color-primary: #4f46e5;--color-bg: #0f172a;--color-text: #f8fafc;--color-opt-0: #6366f1;--color-opt-1: #06b6d4;--color-opt-2: #10b981;--color-opt-3: #f59e0b;--bg-image: none;--radius: 1.125rem;--font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--fs-title: clamp(1.6rem, 1.1rem + 3.2vw, 2.8rem);--fs-option: clamp(1.05rem, .85rem + 1.1vw, 1.45rem);--fs-state-title: clamp(1.3rem, 1rem + 1.6vw, 1.9rem);--fs-state-text: clamp(1rem, .9rem + .6vw, 1.25rem);--gap: clamp(.75rem, 1.4vw, 1.125rem)}*{box-sizing:border-box}html{font-size:clamp(8.533px,.8333vw,21.333px)}html,body{margin:0;padding:0;font-family:var(--font);color:var(--color-text);-webkit-font-smoothing:antialiased}body.app{min-height:100vh;background-color:var(--color-bg);background-image:linear-gradient(#080c1833,#080c1866),var(--bg-image);background-size:cover;background-position:right center;background-attachment:fixed;display:flex;flex-direction:column}.wrap{flex:1;width:100%;display:flex;align-items:center;justify-content:center;padding:clamp(1rem,4vw,2.5rem)}.panel-card{width:90%;background:#07101ebf;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:.0625rem solid rgba(255,255,255,.14);border-radius:clamp(1.125rem,3vw,1.75rem);box-shadow:0 1.5rem 4.375rem #00000073;padding:clamp(1.5rem,5vw,3rem);display:flex;flex-direction:column}.logo{max-width:clamp(6.875rem,28vw,11.25rem);margin:0 auto clamp(1.125rem,3vw,1.875rem);display:block}.question-title{font-size:2.5rem;text-align:left;margin:0 0 clamp(1.375rem,4vw,2.25rem);line-height:1.2;letter-spacing:-.02em;color:#fff;text-shadow:0 0 1.375rem color-mix(in srgb,var(--color-primary) 35%,transparent)}.options{display:flex;flex-direction:column;gap:var(--gap)}.option-btn{display:flex;align-items:center;gap:clamp(.75rem,2vw,1.125rem);width:100%;min-height:clamp(3.625rem,9vw,4.875rem);padding:clamp(.75rem,2vw,1.125rem) clamp(1rem,2.6vw,1.5rem);font-size:var(--fs-option);font-weight:400;color:var(--color-text);background:#ffffff14;border:.125rem solid color-mix(in srgb,var(--opt-color, var(--color-primary)) 55%,transparent);border-radius:var(--radius);cursor:pointer;transition:transform .08s ease,background .15s ease,border-color .15s ease;text-align:left;line-height:1.25}.option-btn:hover{background:#ffffff26;border-color:var(--opt-color, var(--color-primary))}.option-btn:active{transform:scale(.985)}.option-btn:focus-visible{outline:.1875rem solid var(--opt-color, var(--color-primary));outline-offset:.125rem}.option-btn.selected{background:var(--opt-color, var(--color-primary));border-color:var(--opt-color, var(--color-primary));color:#07121f}.option-btn.selected .opt-letter{background:#07121fd9;color:var(--opt-color, var(--color-primary))}.option-btn:disabled{opacity:.6;cursor:default}.opt-letter{flex-shrink:0;align-self:flex-start;width:clamp(2.125rem,6vw,2.75rem);height:clamp(2.125rem,6vw,2.75rem);border-radius:.75rem;background:var(--opt-color, var(--color-primary));color:#07121f;font-weight:800;font-size:clamp(1rem,.85rem + .9vw,1.3rem);display:grid;place-items:center}.opt-label{flex:1}.state-card{text-align:center;padding:clamp(.5rem,2vw,1rem)}.state-card .icon{font-size:clamp(2.6rem,8vw,4rem);margin-bottom:clamp(.625rem,2vw,1.125rem);line-height:1}.state-card h2{font-size:var(--fs-state-title);margin:0 0 .75rem;font-weight:700;letter-spacing:-.01em;color:var(--color-primary)}.state-card p{font-size:var(--fs-state-text);opacity:.9;margin:0;line-height:1.5}.toast{position:fixed;left:50%;bottom:clamp(1.25rem,5vw,2.25rem);transform:translate(-50%);background:#111827;color:#fff;padding:.875rem 1.375rem;border-radius:.75rem;font-weight:600;box-shadow:0 .5rem 1.5rem #00000073;opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:50;max-width:90vw;text-align:center}.toast.show{opacity:1}.toast.error{background:#b91c1c}.hidden{display:none!important}.bars{display:flex;flex-direction:column;gap:1rem}.bar-row{width:100%}.bar-head{display:flex;align-items:center;gap:.625rem;margin-bottom:.375rem;font-weight:600}.bar-letter{flex-shrink:0;width:1.75rem;height:1.75rem;border-radius:.5625rem;background:var(--opt-color, var(--color-primary));color:#07121f;font-weight:800;font-size:.95rem;display:grid;place-items:center}.bar-label{flex:1;font-size:1.05rem}.bar-pct{font-variant-numeric:tabular-nums;opacity:.95}.bar-track{width:100%;height:1.625rem;background:#ffffff1f;border-radius:62.4375rem;overflow:hidden}.bar-fill{height:100%;width:0%;border-radius:62.4375rem;transition:width .5s cubic-bezier(.22,1,.36,1)}@media(max-width:1023px){html{font-size:clamp(12px,5.0295px + 1.0724vw,16px)}:root{--radius: .75rem;--gap: .5rem;--fs-option: 1rem;--fs-state-title: 1.25rem;--fs-state-text: .9rem}.wrap{padding:1rem}.panel-card{width:94%;border-radius:1rem;padding:1.25rem}.logo{max-width:7rem;margin:0 auto .75rem}.question-title{font-size:1.375rem;margin:0 0 .875rem}.option-btn{gap:.5rem;min-height:2.75rem;padding:.5rem 1rem}.opt-letter{width:1.875rem;height:1.875rem;border-radius:.5rem;font-size:1rem}.state-card{padding:.75rem}.state-card .icon{font-size:2.25rem;margin-bottom:.625rem}.toast{bottom:1.25rem}.bars{gap:.625rem}.bar-letter{width:1.5rem;height:1.5rem;border-radius:.5rem}.bar-label{font-size:.9rem}.bar-track{height:1.25rem}}@media(max-width:649px){html{font-size:14px}body.app{min-height:100dvh}:root{--radius: .75rem;--gap: 1.5rem;--fs-option: 1.1875rem;--fs-state-title: 1.4375rem;--fs-state-text: 1.125rem}.wrap{padding:.75rem}.panel-card{width:94%;border-radius:.875rem;padding:2rem}.logo{max-width:5.5rem;margin:0 auto .5rem}.question-title{font-size:1.6875rem;margin:0 0 .75rem}.option-btn{gap:1rem;min-height:2.875rem;padding:1rem}.opt-letter{width:1.6875rem;height:1.6875rem;border-radius:.5rem;font-size:1.125rem}.state-card{padding:.5rem}.state-card .icon{font-size:2.25rem;margin-bottom:.5rem}.toast{bottom:.875rem}.bars{gap:.5rem}.bar-letter{width:1.375rem;height:1.375rem;border-radius:.5rem}.bar-label{font-size:1rem}.bar-track{height:1.125rem}}@media(max-width:600px){:root{--gap: 1.25rem}.panel-card{padding:1.875rem}.question-title{font-size:1.5625rem}}@media(max-width:480px){.wrap{padding:.625rem}.panel-card{padding:1.75rem}.logo{max-width:5rem}.question-title{font-size:1.4375rem}.option-btn{min-height:2.625rem;padding:1rem}.opt-letter{width:1.5625rem;height:1.5625rem}}@media(max-width:414px){.question-title{font-size:1.3125rem}}@media(max-width:375px){:root{--fs-option: 1.125rem}.logo{max-width:4.75rem}.question-title{font-size:1.25rem}}@media(max-width:360px){:root{--fs-option: 1.0625rem}.logo{max-width:4.5rem}.question-title{font-size:1.1875rem}.opt-letter{width:1.4375rem;height:1.4375rem;font-size:1.0625rem}}@media(max-width:320px){:root{--gap: 1rem}.panel-card{width:96%;padding:1.5rem}.logo{max-width:4rem;margin:0 auto .4375rem}.question-title{font-size:1.125rem;margin:0 0 .5rem}.option-btn{gap:.875rem;padding:.875rem;min-height:2.375rem}.opt-letter{width:1.3125rem;height:1.3125rem}}
