@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Orbitron:wght@700;900&display=swap";:root{--bg: #0f172a;--bg-deep: #080e1c;--surface: rgba(255, 255, 255, .045);--surface-2: #16203a;--border: rgba(255, 255, 255, .09);--border-strong: rgba(255, 255, 255, .18);--text: #ffffff;--muted: #93a1bd;--red: #dc2626;--blue: #2563eb;--green: #22c55e;--amber: #f59e0b;--radius-sm: 12px;--radius: 20px;--radius-lg: 28px;--shadow-soft: 0 10px 30px rgba(3, 8, 20, .55);--shadow-clay: inset 0 2px 0 rgba(255, 255, 255, .12), inset 0 -4px 0 rgba(0, 0, 0, .35), 0 12px 26px rgba(2, 6, 18, .5);--font-display: "Orbitron", ui-sans-serif, system-ui, sans-serif;--font-body: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;color-scheme:dark}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%}body{min-height:100dvh;background:var(--bg-deep);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}button{font-family:inherit;color:inherit;cursor:pointer;border:none;background:none}input{font-family:inherit}::selection{background:#22c55e59}.app{position:relative;min-height:100dvh;display:flex;flex-direction:column;background:radial-gradient(1200px 600px at 50% -10%,rgba(37,99,235,.3),transparent 65%),linear-gradient(180deg,#0f172a,#080e1c 70%);overflow:hidden}.glow{position:absolute;width:52vw;height:52vw;border-radius:50%;filter:blur(90px);pointer-events:none;opacity:.4}.glow-a{top:-18vw;left:-14vw;background:radial-gradient(circle,rgba(220,38,38,.55),transparent 65%)}.glow-b{bottom:-22vw;right:-16vw;background:radial-gradient(circle,rgba(34,197,94,.4),transparent 65%)}.navbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem clamp(1rem,4vw,2.5rem);background:#080e1cb8;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}.brand{display:inline-flex;align-items:center;gap:.6rem}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:linear-gradient(160deg,var(--green),#15803d);color:#04240f;font-family:var(--font-display);font-size:1.2rem;font-weight:900;box-shadow:inset 0 2px #ffffff59,0 6px 18px #22c55e59}.brand-text{font-family:var(--font-display);font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase}.brand-text span{color:var(--green)}.nav-actions{display:flex;align-items:center;gap:.5rem}.icon-btn{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;color:var(--muted);background:#ffffff0a;border:1px solid var(--border);transition:transform .18s ease,color .18s ease,border-color .18s ease,background .18s ease}.icon-btn:hover{color:var(--text);border-color:var(--border-strong);background:#ffffff14;transform:translateY(-2px)}.icon-btn:active{transform:translateY(1px) scale(.97)}.stage{position:relative;z-index:1;flex:1;width:100%;max-width:960px;margin:0 auto;padding:clamp(1.5rem,4vw,3rem) clamp(1rem,4vw,2rem) 2.5rem}.footer{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;padding:1.1rem clamp(1rem,4vw,2.5rem);font-size:.72rem;letter-spacing:.04em;color:#93a1bdb3;border-top:1px solid var(--border)}.link-btn{display:inline-flex;align-items:center;gap:.35rem;font-size:.74rem;font-weight:700;color:var(--green);letter-spacing:.04em;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#22c55e66;transition:color .15s ease}.link-btn:hover{color:#6ee7a0}.eyebrow{display:inline-flex;align-items:center;gap:.4rem;font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--green)}h1,h2,h3{font-family:var(--font-display);letter-spacing:-.01em;line-height:1.12}.accent-text{background:linear-gradient(100deg,#4ade80,#22c55e 40%,#2563eb);-webkit-background-clip:text;background-clip:text;color:transparent}.hero{text-align:center;margin-bottom:2rem;animation:fadeUp .5s ease both}.hero h1{font-size:clamp(1.9rem,6vw,3.4rem);font-weight:900;margin:.75rem 0 .85rem;text-transform:uppercase}.hero p{max-width:34rem;margin:0 auto;color:var(--muted);font-size:clamp(.85rem,2.4vw,.95rem)}.panel{position:relative;padding:clamp(1.25rem,4vw,2rem);border-radius:var(--radius-lg);background:linear-gradient(165deg,#1e2c4ceb,#10192eeb);border:1px solid var(--border);box-shadow:var(--shadow-soft),inset 0 1px #ffffff12;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.setup{display:flex;flex-direction:column;gap:1.35rem;animation:fadeUp .55s ease .08s both}.field{display:flex;flex-direction:column;gap:.5rem}.field-label{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}.field-label em{font-style:normal;text-transform:none;letter-spacing:.02em;opacity:.6}.text-input{width:100%;padding:.8rem 1rem;font-size:.95rem;font-weight:500;color:var(--text);background:#060c1899;border:1.5px solid var(--border);border-radius:var(--radius-sm);outline:none;transition:border-color .18s ease,box-shadow .18s ease}.text-input::placeholder{color:#93a1bd80}.text-input:focus{border-color:var(--green);box-shadow:0 0 0 3px #22c55e2e}.choice-block{display:flex;flex-direction:column;gap:.6rem}.mode-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.55rem}.mode-chip{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.7rem .3rem;border-radius:var(--radius-sm);background:#ffffff09;border:1.5px solid var(--border);box-shadow:inset 0 -2px #00000040;transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease}.mode-chip:hover{transform:translateY(-2px);border-color:var(--border-strong);background:#ffffff12}.mode-chip:active{transform:translateY(1px) scale(.98)}.mode-symbol{font-family:var(--font-display);font-size:clamp(1.1rem,3.4vw,1.4rem);font-weight:900;color:var(--muted);transition:color .16s ease}.mode-label{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.mode-chip.is-active{background:linear-gradient(160deg,#22c55e38,#22c55e0f);border-color:#22c55ea6;box-shadow:inset 0 -2px #00000040,0 8px 22px #22c55e2e}.mode-chip.is-active .mode-symbol,.mode-chip.is-active .mode-label{color:#86efac}.segmented{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem}.segment{display:flex;flex-direction:column;gap:.15rem;padding:.6rem .7rem;text-align:left;border-radius:var(--radius-sm);background:#ffffff09;border:1.5px solid var(--border);transition:transform .16s ease,border-color .16s ease,background .16s ease}.segment strong{font-size:.82rem;font-weight:700;letter-spacing:.04em}.segment small{font-size:.62rem;color:var(--muted);line-height:1.35}.segment:hover{transform:translateY(-2px);border-color:var(--border-strong)}.segment.is-active{border-color:#2563ebcc;background:linear-gradient(160deg,#2563eb4d,#2563eb14);box-shadow:0 8px 22px #2563eb33}.segment.is-active small{color:#bfdbfe}.best-row{display:flex;align-items:center;gap:.55rem;padding:.7rem .9rem;font-size:.76rem;color:var(--muted);border-radius:var(--radius-sm);background:#f59e0b12;border:1px dashed rgba(245,158,11,.3)}.best-row svg{color:var(--amber);flex-shrink:0}.best-row strong{color:#fde68a;font-weight:700}.best-value{margin-left:auto;font-family:var(--font-display);font-size:1.05rem;color:var(--amber)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.7rem 1.3rem;border-radius:14px;font-size:.82rem;font-weight:700;letter-spacing:.03em;text-decoration:none;transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{color:#04240f;background:linear-gradient(165deg,#4ade80,#16a34a);border:1.5px solid rgba(134,239,172,.5);box-shadow:inset 0 2px #ffffff59,inset 0 -4px #00000038,0 10px 26px #22c55e4d}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:inset 0 2px #ffffff59,inset 0 -4px #00000038,0 16px 34px #22c55e6b}.btn-primary:active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 2px #0003,0 4px 12px #22c55e40}.btn-ghost{color:var(--text);background:#ffffff0d;border:1.5px solid var(--border-strong)}.btn-ghost:hover:not(:disabled){background:#ffffff1a;transform:translateY(-2px)}.btn-xl{width:100%;padding:1rem 1.5rem;font-size:.95rem;letter-spacing:.08em;text-transform:uppercase;border-radius:16px}.btn-lg{padding:.85rem 1.3rem}.btn-sm{padding:.5rem .9rem;font-size:.72rem}.hint{margin-top:-.6rem;text-align:center;font-size:.68rem;color:#93a1bdbf}kbd{padding:.1rem .35rem;font-family:var(--font-body);font-size:.66rem;color:var(--text);background:#ffffff14;border:1px solid var(--border-strong);border-radius:5px}.tips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin-top:1rem;animation:fadeUp .6s ease .16s both}.tip{display:flex;gap:.65rem;padding:.85rem;border-radius:var(--radius);background:#ffffff08;border:1px solid var(--border);transition:border-color .18s ease,transform .18s ease}.tip:hover{border-color:var(--border-strong);transform:translateY(-2px)}.tip svg{flex-shrink:0;color:var(--blue);margin-top:.1rem}.tip strong{display:block;font-size:.74rem;letter-spacing:.04em;margin-bottom:.15rem}.tip span{display:block;font-size:.66rem;line-height:1.45;color:var(--muted)}.tip .link-btn{margin-top:.4rem;font-size:.66rem}.play{display:flex;flex-direction:column;gap:1.1rem;animation:fadeUp .35s ease both}.hud-stats{display:flex;align-items:flex-end;justify-content:space-between;gap:.5rem;margin-bottom:.55rem}.hud-item{display:flex;flex-direction:column;gap:.1rem}.hud-right{text-align:right;align-items:flex-end}.hud-label{display:inline-flex;align-items:center;gap:.3rem;font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}.hud-value{font-family:var(--font-display);font-size:clamp(1.1rem,4vw,1.5rem);line-height:1.1;transition:color .2s ease}.hud-value em{font-style:normal;font-size:.62em;color:var(--amber)}.hud-value.is-hot{color:#fbbf24;text-shadow:0 0 18px rgba(251,191,36,.5)}.hud-value.is-danger{color:#f87171}.timebar{height:9px;border-radius:999px;background:#ffffff12;overflow:hidden;border:1px solid var(--border)}.timebar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#16a34a,#4ade80);box-shadow:0 0 16px #4ade808c;transition:width .12s linear,background .3s ease}.timebar-fill.is-danger{background:linear-gradient(90deg,#b91c1c,#f87171);box-shadow:0 0 18px #f8717199}.question-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;min-height:clamp(190px,34vh,260px);padding:1.5rem 1rem;border-radius:var(--radius-lg);background:radial-gradient(120% 100% at 50% 0%,rgba(37,99,235,.28),transparent 70%),linear-gradient(165deg,#1a2540,#0e1729);border:1px solid var(--border-strong);box-shadow:var(--shadow-soft),inset 0 1px #ffffff14;overflow:hidden}.q-meta{font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#93a1bdcc}.prompt{font-family:var(--font-display);font-size:clamp(2.6rem,12vw,4.4rem);font-weight:900;letter-spacing:.02em;text-align:center;text-shadow:0 0 40px rgba(96,165,250,.4);word-break:break-word}.q-hint{font-family:var(--font-display);font-size:.9rem;color:var(--muted);letter-spacing:.3em}.score-pop{position:absolute;top:1rem;right:1.2rem;font-family:var(--font-display);font-size:1.2rem;font-weight:900;color:#4ade80;text-shadow:0 0 20px rgba(74,222,128,.7);animation:popScore .75s ease forwards;pointer-events:none}.options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}.option{position:relative;display:flex;align-items:center;justify-content:center;gap:.6rem;min-height:clamp(66px,12vw,84px);padding:.8rem 1rem;border-radius:var(--radius);background:linear-gradient(165deg,#ffffff13,#ffffff06);border:1.5px solid var(--border);box-shadow:inset 0 2px #ffffff17,inset 0 -3px #00000047,0 8px 20px #04091466;transition:transform .14s ease,border-color .14s ease,background .14s ease,box-shadow .14s ease}.option:hover:not(:disabled){transform:translateY(-2px);border-color:#60a5fa99;background:linear-gradient(165deg,#2563eb3d,#2563eb14)}.option:active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 2px 6px #00000073}.option:disabled{cursor:default}.option-key{display:grid;place-items:center;width:22px;height:22px;font-size:.62rem;font-weight:700;color:var(--muted);border-radius:6px;background:#ffffff0f;border:1px solid var(--border)}.option-value{font-family:var(--font-display);font-size:clamp(1.35rem,5.5vw,1.75rem);font-weight:700}.option.is-correct{border-color:#4ade80;background:linear-gradient(165deg,#22c55e6b,#16a34a29);box-shadow:0 0 0 2px #4ade8059,0 0 32px #22c55e73;animation:bump .3s ease}.option.is-correct .option-value,.option.is-correct .option-key{color:#dcfce7;border-color:#dcfce766}.option.is-wrong{border-color:#f87171;background:linear-gradient(165deg,#dc26266b,#991b1b2e);box-shadow:0 0 0 2px #f871714d,0 0 28px #dc262666}.option.is-wrong .option-value{color:#fee2e2}.play-foot{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}.foot-note{font-size:.66rem;color:#93a1bdcc}.result-card{display:flex;flex-direction:column;gap:1.25rem;animation:fadeUp .5s ease both}.result-top{display:flex;align-items:center;gap:1rem}.grade{display:grid;place-items:center;flex-shrink:0;width:68px;height:68px;border-radius:20px;font-family:var(--font-display);font-size:2rem;font-weight:900;color:#04240f;background:linear-gradient(165deg,#4ade80,#16a34a);box-shadow:inset 0 2px #fff6,0 10px 26px #22c55e59;animation:bump .45s ease}.grade-c,.grade-d{color:#451a03;background:linear-gradient(165deg,#fcd34d,#f59e0b);box-shadow:inset 0 2px #fff6,0 10px 26px #f59e0b4d}.grade-b{color:#0c1a3a;background:linear-gradient(165deg,#93c5fd,#2563eb);box-shadow:inset 0 2px #fff6,0 10px 26px #2563eb59}.result-top h2{font-size:clamp(1.1rem,4.2vw,1.6rem);margin:.2rem 0}.result-sub{font-size:.7rem;letter-spacing:.08em;color:var(--muted)}.score-block{display:flex;align-items:baseline;justify-content:center;gap:.5rem;padding:.6rem 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.score-big{font-family:var(--font-display);font-size:clamp(3rem,14vw,4.5rem);font-weight:900;line-height:1;background:linear-gradient(160deg,#fff,#4ade80);-webkit-background-clip:text;background-clip:text;color:transparent}.score-unit{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.55rem}.stat{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.7rem .35rem;border-radius:var(--radius-sm);background:#ffffff09;border:1px solid var(--border);text-align:center}.stat svg{color:var(--blue)}.stat strong{font-size:.95rem}.stat span{font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.result-actions{display:flex;flex-wrap:wrap;gap:.6rem}.result-actions .btn-primary{flex:1 1 160px}.cheer{font-size:.7rem;text-align:center;color:#fde68a}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:grid;place-items:center;padding:1rem;background:#040812c7;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fadeIn .2s ease both}.modal{position:relative;width:100%;max-width:380px;display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:1.75rem 1.5rem 1.5rem;border-radius:var(--radius-lg);background:linear-gradient(165deg,#1b2745,#0e1729);border:1px solid var(--border-strong);box-shadow:0 30px 70px #000000a6;animation:fadeUp .25s ease both}.modal h3{font-size:1.15rem;text-transform:uppercase;letter-spacing:.08em}.modal-sub{font-size:.7rem;text-align:center;color:var(--muted);max-width:26ch}.modal-close{position:absolute;top:.7rem;right:.7rem;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;color:var(--muted);background:#ffffff0d;border:1px solid var(--border);transition:color .15s ease,background .15s ease}.modal-close:hover{color:var(--text);background:#ffffff1f}.qr-wrap{display:grid;place-items:center;padding:.7rem;margin-top:.3rem;border-radius:18px;background:#fff;box-shadow:0 0 0 1px #fff6,0 14px 30px #0006}.qr-wrap img{display:block;width:clamp(150px,48vw,200px);height:auto;image-rendering:pixelated}.qr-skeleton{width:clamp(150px,48vw,200px);aspect-ratio:1;border-radius:8px}.qr-url{font-size:.66rem;color:var(--muted);word-break:break-all;text-align:center}.modal-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem;margin-top:.35rem}.modal-actions .btn{flex:1 1 auto;padding:.6rem .8rem;font-size:.72rem}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes popScore{0%{opacity:0;transform:translateY(6px) scale(.85)}25%{opacity:1;transform:translateY(-2px) scale(1.05)}to{opacity:0;transform:translateY(-26px) scale(1)}}@keyframes bump{0%{transform:scale(.94)}55%{transform:scale(1.04)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-9px)}40%{transform:translate(7px)}60%{transform:translate(-5px)}80%{transform:translate(3px)}}.shake{animation:shake .34s ease}.fade-up{animation:fadeUp .45s ease both}@media (max-width: 720px){.tips{grid-template-columns:1fr}.tip,.result-top{align-items:flex-start}.grade{width:56px;height:56px;font-size:1.6rem;border-radius:16px}.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width: 520px){.mode-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.segmented{grid-template-columns:1fr}.segment{flex-direction:row;align-items:baseline;justify-content:space-between;gap:.6rem}.segment small{text-align:right}.best-row{flex-wrap:wrap}.best-value{margin-left:0}.result-actions{flex-direction:column}.result-actions .btn{width:100%}.footer{justify-content:center;text-align:center}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--green);outline-offset:3px}@media (hover: none){.option:hover:not(:disabled),.mode-chip:hover,.segment:hover,.icon-btn:hover,.btn:hover:not(:disabled){transform:none}}