: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: 18px;--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(12px, 1.4vw, 18px)}*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:var(--font);color:var(--color-text);-webkit-font-smoothing:antialiased}body.app{min-height:100vh;min-height:100dvh;background-color:var(--color-bg);background-image:linear-gradient(#080c1833,#080c1866),var(--bg-image);background-size:cover;background-position:center;background-attachment:fixed;display:flex;flex-direction:column}.wrap{flex:1;width:100%;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,40px)}.panel-card{width:100%;max-width:640px;background:#07101e66;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);border-radius:clamp(18px,3vw,28px);box-shadow:0 24px 70px #00000073;padding:clamp(24px,5vw,48px);display:flex;flex-direction:column}.logo{max-width:clamp(110px,28vw,180px);margin:0 auto clamp(18px,3vw,30px);display:block}.question-title{font-size:var(--fs-title);font-weight:800;text-align:center;margin:0 0 clamp(22px,4vw,36px);line-height:1.2;letter-spacing:-.02em;color:var(--color-primary);text-shadow:0 0 22px 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(12px,2vw,18px);width:100%;min-height:clamp(58px,9vw,78px);padding:clamp(12px,2vw,18px) clamp(16px,2.6vw,24px);font-size:var(--fs-option);font-weight:600;color:var(--color-text);background:#ffffff14;border:2px 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:3px solid var(--opt-color, var(--color-primary));outline-offset:2px}.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;width:clamp(34px,6vw,44px);height:clamp(34px,6vw,44px);border-radius:12px;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(8px,2vw,16px)}.state-card .icon{font-size:clamp(2.6rem,8vw,4rem);margin-bottom:clamp(10px,2vw,18px);line-height:1}.state-card h2{font-size:var(--fs-state-title);margin:0 0 12px;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(20px,5vw,36px);transform:translate(-50%);background:#111827;color:#fff;padding:14px 22px;border-radius:12px;font-weight:600;box-shadow:0 8px 24px #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:16px}.bar-row{width:100%}.bar-head{display:flex;align-items:center;gap:10px;margin-bottom:6px;font-weight:600}.bar-letter{flex-shrink:0;width:28px;height:28px;border-radius:9px;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:26px;background:#ffffff1f;border-radius:999px;overflow:hidden}.bar-fill{height:100%;width:0%;border-radius:999px;transition:width .5s cubic-bezier(.22,1,.36,1)}
