:root{--primary:#6a4c93;--secondary:#1982c4;--accent:#ffca3a;--ink:#1b1033;--paper:#fff;--font:"Baloo 2", "Trebuchet MS", "Segoe UI", system-ui, sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100%}body{font-family:var(--font);color:var(--ink);background:var(--primary);overscroll-behavior-y:none;overflow-x:hidden}button{cursor:pointer;font-family:inherit}.app{background:linear-gradient(160deg, var(--primary), var(--secondary));justify-content:center;align-items:center;min-height:100dvh;padding:24px 16px;transition:background .8s;display:flex;position:relative}.card{z-index:2;background:#fffffff5;border-radius:28px;width:min(640px,100%);padding:32px 28px 36px;animation:.45s cubic-bezier(.18,1.2,.4,1) both pop-in;position:relative;box-shadow:0 24px 60px #00000047}@keyframes pop-in{0%{opacity:0;transform:translateY(20px)scale(.94)}to{opacity:1;transform:none}}.bg-shapes{z-index:1;pointer-events:none;position:fixed;inset:0;overflow:hidden}.bg-shapes span{opacity:.35;will-change:transform;font-size:2.4rem;animation:linear infinite float-up;position:absolute;bottom:-80px}@keyframes float-up{0%{opacity:0;transform:translateY(0)rotate(0)}10%{opacity:.4}90%{opacity:.4}to{opacity:0;transform:translateY(-115vh)rotate(320deg)}}.hero-emoji{text-align:center;font-size:4.5rem;animation:2.5s ease-in-out infinite wiggle}@keyframes wiggle{0%,to{transform:rotate(-8deg)scale(1)}50%{transform:rotate(8deg)scale(1.08)}}h1.title{text-align:center;background:linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));color:#0000;letter-spacing:-.5px;-webkit-background-clip:text;background-clip:text;margin:8px 0 4px;font-size:clamp(2rem,6vw,3rem);line-height:1.05}.subtitle{text-align:center;color:#5a5170;margin-bottom:22px;font-size:1.05rem}.field{margin-bottom:18px}.field label{margin-bottom:8px;font-size:1rem;font-weight:700;display:block}.field input[type=text]{border:3px solid #e6e1f2;border-radius:16px;outline:none;width:100%;padding:14px 16px;font-size:1.15rem;transition:border-color .2s,box-shadow .2s}.field input[type=text]:focus{border-color:var(--secondary);box-shadow:0 0 0 4px #1982c42e}.suggestions{flex-wrap:wrap;gap:8px;margin-top:10px;display:flex}.chip{color:#4b3f6b;background:#f6f3fd;border:2px solid #e6e1f2;border-radius:999px;padding:6px 14px;font-size:.9rem;font-weight:600;transition:transform .12s,background .2s}.chip:hover{background:#ece5fb;transform:translateY(-2px)}.count-row{align-items:center;gap:14px;display:flex}.count-row input[type=range]{accent-color:var(--secondary);flex:1;height:6px}.count-badge{text-align:center;min-width:58px;color:var(--primary);background:#f4f0fb;border-radius:12px;padding:6px 4px;font-size:1.3rem;font-weight:800}.count-badge.badge-wide{white-space:nowrap;min-width:128px;padding:8px 10px;font-size:1rem}.stepper-head{justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px;display:flex}.stepper-label{font-size:1rem;font-weight:700}.stepper+.stepper{margin-top:14px}.stepper-row{align-items:center;gap:10px;display:flex}.step-btn{height:46px;color:var(--primary);-webkit-tap-highlight-color:transparent;touch-action:manipulation;background:#f6f3fd;border:2px solid #e6e1f2;border-radius:14px;flex:0 0 46px;place-items:center;font-size:1.7rem;font-weight:800;line-height:1;transition:transform .1s,background .2s;display:grid}.step-btn:hover:not(:disabled){background:#ece5fb}.step-btn:active:not(:disabled){transform:scale(.92)}.step-btn:disabled{opacity:.4;cursor:not-allowed}.slider-wrap{flex:1;min-width:0;height:46px;position:relative}.slider-track{background:#ece5fb;border-radius:999px;height:10px;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.slider-fill{background:linear-gradient(90deg, var(--secondary), var(--accent));pointer-events:none;border-radius:999px;height:10px;position:absolute;top:50%;left:0;transform:translateY(-50%)}.big-range{appearance:none;cursor:pointer;background:0 0;width:100%;height:46px;margin:0;position:absolute;inset:0}.big-range::-webkit-slider-runnable-track{background:0 0;border:none;height:46px}.big-range::-webkit-slider-thumb{appearance:none;background:var(--secondary);cursor:pointer;border:4px solid #fff;border-radius:50%;width:30px;height:30px;margin-top:8px;box-shadow:0 2px 8px #0000004d}.big-range::-moz-range-track{background:0 0;border:none;height:46px}.big-range::-moz-range-thumb{background:var(--secondary);cursor:pointer;border:4px solid #fff;border-radius:50%;width:30px;height:30px;box-shadow:0 2px 8px #0000004d}.range-dual{height:36px;margin-top:2px;position:relative}.range-track{background:#ece5fb;border-radius:999px;height:8px;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.range-fill{background:linear-gradient(90deg, var(--secondary), var(--accent));border-radius:999px;height:8px;position:absolute;top:50%;transform:translateY(-50%)}.range-dual input[type=range]{pointer-events:none;appearance:none;background:0 0;width:100%;height:36px;margin:0;position:absolute;top:0;left:0}.range-dual input[type=range]::-webkit-slider-runnable-track{background:0 0;border:none;height:36px}.range-dual input[type=range]::-moz-range-track{background:0 0;border:none;height:36px}.range-dual input[type=range]::-webkit-slider-thumb{appearance:none;pointer-events:auto;background:var(--secondary);cursor:pointer;border:3px solid #fff;border-radius:50%;width:24px;height:24px;margin-top:6px;box-shadow:0 2px 6px #00000047}.range-dual input[type=range]::-moz-range-thumb{pointer-events:auto;background:var(--secondary);cursor:pointer;border:3px solid #fff;border-radius:50%;width:24px;height:24px;box-shadow:0 2px 6px #00000047}.range-values{text-align:center;color:var(--primary);margin-top:10px;font-size:1.05rem;font-weight:800}.model-select{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.model-option{background:#faf8ff;border:3px solid #e6e1f2;border-radius:14px;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;transition:transform .12s,border-color .2s,background .2s;display:flex}.model-option:hover{transform:translateY(-2px)}.model-option.selected{border-color:var(--secondary);background:#eef6fd}.model-name{color:var(--primary);font-size:1.05rem;font-weight:800}.model-hint{color:#7a7092;font-size:.78rem;font-weight:600}.cost-estimate{background:#f4f0fb;border:2px solid #e6e1f2;border-radius:14px;justify-content:center;align-items:center;gap:10px;margin-top:6px;padding:10px 14px;display:flex}.cost-icon{font-size:1.5rem}.cost-figures{flex-direction:column;line-height:1.2;display:flex}.cost-usd{color:var(--primary);font-size:1.2rem;font-weight:800}.cost-tokens{color:#7a7092;font-size:.82rem;font-weight:600}.btn{color:#fff;background:linear-gradient(135deg, var(--primary), var(--secondary));border:none;border-radius:18px;justify-content:center;align-items:center;gap:8px;width:100%;margin-top:8px;padding:16px 20px;font-size:1.25rem;font-weight:800;transition:transform .12s,box-shadow .2s,filter .2s;display:inline-flex;box-shadow:0 10px 20px #0000002e}.btn:hover:not(:disabled){filter:brightness(1.05);transform:translateY(-2px)}.btn:active:not(:disabled){transform:translateY(1px)scale(.99)}.btn:disabled{opacity:.6;cursor:not-allowed}.btn.secondary{color:var(--primary);border:3px solid var(--primary);box-shadow:none;background:#fff}.error{color:#b1213a;text-align:center;background:#ffe3e3;border:2px solid #ffc9c9;border-radius:14px;margin-bottom:16px;padding:12px 14px;font-weight:600}.loading{text-align:center;padding:20px 0 8px}.spinner{border:10px solid #ece5fb;border-top-color:var(--secondary);border-right-color:var(--accent);border-radius:50%;width:92px;height:92px;margin:10px auto 22px;animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.loading h2{margin-bottom:6px;font-size:1.5rem}.loading .fun{color:#5a5170;min-height:1.5em;transition:opacity .3s}.game-head{justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;display:flex}.game-title{color:var(--primary);align-items:center;gap:8px;font-size:1.15rem;font-weight:800;display:flex}.progress-wrap{background:#ece5fb;border-radius:999px;height:12px;margin-bottom:6px;overflow:hidden}.progress-bar{background:linear-gradient(90deg, var(--secondary), var(--accent));border-radius:999px;height:100%;transition:width .5s cubic-bezier(.2,.8,.3,1)}.progress-label{text-align:right;color:#7a7092;margin-bottom:16px;font-size:.85rem;font-weight:700}.question{margin-bottom:22px;font-size:clamp(1.3rem,4vw,1.65rem);font-weight:800;line-height:1.25;animation:.4s both pop-in}.choices{gap:12px;display:grid}.choice{text-align:left;width:100%;color:var(--ink);background:#faf8ff;border:3px solid #e6e1f2;border-radius:18px;align-items:center;gap:14px;padding:15px 16px;font-size:1.1rem;font-weight:600;transition:transform .12s,border-color .2s,background .2s;display:flex}.choice:hover:not(:disabled){border-color:var(--secondary);transform:translate(4px)}.choice:disabled{cursor:default}.choice .letter{background:var(--primary);color:#fff;border-radius:12px;flex:0 0 38px;place-items:center;height:38px;font-weight:800;display:grid}.choice.correct{background:#e9f9ea;border-color:#4caf50;animation:.45s correct-pop}.choice.correct .letter{background:#4caf50}.choice.wrong{background:#fdeaea;border-color:#ef5350;animation:.4s shake}.choice.wrong .letter{background:#ef5350}.choice .mark{margin-left:auto;font-size:1.3rem}@keyframes correct-pop{0%{transform:scale(1)}40%{transform:scale(1.04)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-5px)}80%{transform:translate(5px)}}.reveal{margin-top:18px;animation:.35s both pop-in}.fun-fact{border:2px dashed var(--accent);background:#fff8e1;border-radius:16px;margin-bottom:14px;padding:14px 16px;font-size:1rem}.fun-fact strong{color:var(--primary)}.results{text-align:center}.result-emoji{font-size:4.5rem;animation:2.5s ease-in-out infinite wiggle}.score-ring{background:conic-gradient(var(--accent) var(--pct), #ece5fb 0);border-radius:50%;place-items:center;width:170px;height:170px;margin:14px auto 18px;animation:.5s both pop-in;display:grid}.score-ring .inner{background:#fff;border-radius:50%;flex-direction:column;place-items:center;width:132px;height:132px;display:grid}.score-ring .big{color:var(--primary);font-size:2.6rem;font-weight:900;line-height:1}.score-ring .small{color:#7a7092;font-size:.95rem;font-weight:700}.result-message{margin-bottom:6px;font-size:1.35rem;font-weight:800}.result-sub{color:#5a5170;margin-bottom:22px}.button-row{flex-direction:column;gap:12px;display:flex}.mute-btn{background:#f4f0fb;border:2px solid #e6e1f2;border-radius:12px;place-items:center;width:44px;height:44px;font-size:1.2rem;transition:transform .12s;display:grid}.mute-btn:hover{transform:scale(1.08)}.footnote{text-align:center;color:#8a80a0;margin-top:18px;font-size:.8rem}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}