*,*:before,*:after{box-sizing:border-box}*{margin:0}html{interpolate-size:allow-keywords}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p{overflow-wrap:break-word;text-wrap:pretty}h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;text-wrap:balance}#root,#app{isolation:isolate}:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;color-scheme:dark;--color-bg: #050507;--color-panel: #0d0d16;--color-cyan: #00f6ff;--color-magenta: #ff2bd6;--color-yellow: #f4ff2b;--color-text: #f5f5ff;--font-pixel: "Press Start 2P", "Courier New", monospace}body{min-height:100dvh;background:var(--color-bg);color:var(--color-text)}.page{max-width:80ch;margin-inline:auto;padding:2rem}@keyframes flicker{0%,to{opacity:1}92%{opacity:1}94%{opacity:.75}96%{opacity:1}}@keyframes flash-in{0%{transform:scale(.94);opacity:.4}to{transform:scale(1);opacity:1}}.quiz{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.5rem;min-height:100dvh;padding:2rem 1.25rem 3rem;background:repeating-linear-gradient(to bottom,rgb(255 255 255 / 3%) 0,rgb(255 255 255 / 3%) 1px,transparent 1px,transparent 3px),var(--color-bg)}.quiz__title{font-family:var(--font-pixel);font-size:clamp(1.1rem,4vw,1.75rem);text-transform:uppercase;letter-spacing:.06em;text-align:center;margin-top:.5rem;background:linear-gradient(90deg,var(--color-cyan),var(--color-magenta));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 6px rgb(0 246 255 / 55%)) drop-shadow(0 0 12px rgb(255 43 214 / 35%));animation:flicker 6s linear infinite}.quiz__progress-label{font-family:var(--font-pixel);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--color-cyan)}.quiz__progress-bar{display:flex;gap:.4rem;width:min(100%,360px)}.quiz__progress-segment{flex:1;height:8px;border-radius:4px;background:#ffffff1a;border:1px solid rgb(255 255 255 / 15%)}.quiz__progress-segment--filled{background:var(--color-cyan);box-shadow:0 0 8px var(--color-cyan);border-color:var(--color-cyan)}.question-panel,.result-panel{width:min(100%,480px);display:flex;flex-direction:column;align-items:center;gap:1.25rem;padding:1.75rem 1.5rem;border-radius:20px;background:var(--color-panel);border:3px solid var(--color-cyan);box-shadow:0 0 0 3px #0009,0 0 18px #00f6ff73,inset 0 0 24px #00f6ff14;animation:flash-in .22s ease-out}.question-panel__prompt{font-size:clamp(1rem,3.2vw,1.25rem);line-height:1.4;text-align:center}.question-panel__options{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75rem;width:100%}.quiz-option{font-family:var(--font-pixel);font-size:.65rem;letter-spacing:.04em;text-transform:uppercase;line-height:1.5;padding:.9rem .75rem;border-radius:12px;border:2px solid var(--color-cyan);background:#00f6ff14;color:var(--color-text);cursor:pointer;transition:transform 90ms ease-out,box-shadow 90ms ease-out,background-color 90ms ease-out}.quiz-option:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 0 12px #00f6ff99}.quiz-option:disabled{cursor:default}.quiz-option--correct{border-color:var(--color-yellow);background:#f4ff2b2e;box-shadow:0 0 14px #f4ff2ba6;animation:flash-in .18s ease-out}.quiz-option--incorrect{border-color:var(--color-magenta);background:#ff2bd62e;box-shadow:0 0 14px #ff2bd6a6;animation:flash-in .18s ease-out}.question-panel__feedback{min-height:1.2em;font-weight:600;text-align:center}.quiz-button{font-family:var(--font-pixel);font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;padding:.85rem 1.75rem;border-radius:12px;cursor:pointer;transition:transform 90ms ease-out,box-shadow 90ms ease-out}.quiz-button--primary{border:2px solid var(--color-yellow);background:#f4ff2b1f;color:var(--color-yellow);box-shadow:0 0 14px #f4ff2b73}.quiz-button--primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 0 20px #f4ff2bb3}.quiz-button--primary:disabled{opacity:.35;cursor:default;box-shadow:none}.result-panel__label{font-family:var(--font-pixel);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--color-cyan)}.result-panel__score{font-family:var(--font-pixel);font-size:clamp(2.5rem,12vw,4rem);color:var(--color-yellow);filter:drop-shadow(0 0 10px rgb(244 255 43 / 60%))}.result-panel__score-total{font-size:.5em;color:var(--color-text);opacity:.7}.result-panel__message{font-size:1.05rem;font-weight:600;text-align:center}
