:root{--sky:#4dd2ff;--sky-deep:#1c8fd6;--sun:#ffd23f;--grass:#3ddc97;--berry:#ff5d8f;--ink:#1b2a4a;--cream:#fffdf7;--cloud:#eaf6ff;--font-display:"Baloo 2", "Nunito", sans-serif;--font-body:"Nunito", sans-serif;--radius-card:22px;--shadow-card:0 10px 0 #1b2a4a1f, 0 14px 24px #1b2a4a2e}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font-body);color:var(--ink);background:linear-gradient(180deg, var(--cloud) 0%, #d3ecff 100%);overflow:hidden}button{font-family:inherit}.app{width:100vw;height:100vh;position:relative;overflow:hidden}.topbar{z-index:20;pointer-events:none;justify-content:space-between;align-items:center;padding:18px 28px;display:flex;position:absolute;top:0;left:0;right:0}.logo{font-family:var(--font-display);color:var(--sky-deep);text-shadow:0 2px #fff;font-size:22px;font-weight:800}.score-pill{font-family:var(--font-display);background:var(--cream);box-shadow:var(--shadow-card);color:var(--grass);border-radius:999px;padding:8px 20px;font-size:18px;font-weight:700}.problem-banner{z-index:15;background:var(--ink);color:var(--cream);font-family:var(--font-display);box-shadow:var(--shadow-card);letter-spacing:1px;border-radius:18px;padding:10px 34px;font-size:clamp(28px,4vw,44px);font-weight:700;position:absolute;top:78px;left:50%;transform:translate(-50%)}.problem-banner .blank{text-align:center;border-bottom:4px solid var(--sun);min-width:1.1em;display:inline-block}.camera-preview{border:3px solid var(--cream);width:160px;height:120px;box-shadow:var(--shadow-card);z-index:20;background:#000;border-radius:14px;position:absolute;bottom:18px;right:18px;overflow:hidden}.camera-preview video{object-fit:cover;width:100%;height:100%;transform:scaleX(-1)}.privacy-note{max-width:190px;color:var(--ink);z-index:20;background:#ffffffd9;border-radius:10px;padding:6px 10px;font-size:11px;line-height:1.4;position:absolute;bottom:144px;right:18px}.answer-zone{border:4px dashed var(--sky-deep);width:150px;height:150px;font-family:var(--font-display);color:var(--sky-deep);z-index:5;background:#4dd2ff1f;border-radius:26px;justify-content:center;align-items:center;font-size:15px;font-weight:700;transition:background .15s,border-color .15s,transform .15s;display:flex;position:absolute;bottom:26vh;left:50%;transform:translate(-50%)}@keyframes pulseZone{0%{transform:translate(-50%)scale(1.05);box-shadow:0 0 15px #ffd23f66}50%{transform:translate(-50%)scale(1.1);box-shadow:0 0 25px #ffd23fb3}to{transform:translate(-50%)scale(1.05);box-shadow:0 0 15px #ffd23f66}}.answer-zone.hot{border-color:var(--sun);background:#ffd23f59;animation:1s infinite pulseZone}.card{background:var(--cream);border-radius:var(--radius-card);width:92px;height:118px;box-shadow:var(--shadow-card);font-family:var(--font-display);color:var(--ink);-webkit-user-select:none;user-select:none;z-index:8;justify-content:center;align-items:center;font-size:40px;font-weight:800;transition:box-shadow .12s,transform 50ms linear;display:flex;position:absolute;transform:translate(-50%,-50%)}.card:before{content:"";background:var(--berry);border-radius:8px;width:28px;height:18px;position:absolute;top:-10px}.card.held{z-index:12;box-shadow:0 4px #1b2a4a24,0 20px 30px #1b2a4a47}.card.correct{background:var(--grass);color:var(--cream)}.card.wrong{background:var(--berry);color:var(--cream)}.pinch-cursor{border:4px solid var(--sky-deep);pointer-events:none;z-index:30;border-radius:50%;width:34px;height:34px;transition:width 80ms,height 80ms,border-color 80ms,background 80ms;position:absolute;transform:translate(-50%,-50%)}.pinch-cursor.pinching{background:var(--sun);border-color:var(--sun);width:18px;height:18px}@keyframes bounceIn{0%{opacity:0;transform:scale(.5)}60%{opacity:1;transform:scale(1.05)}80%{opacity:1;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.bounce-in{animation:.6s cubic-bezier(.25,1,.5,1) forwards bounceIn}@keyframes shrinkBar{0%{width:100%}to{width:0%}}.overlay{text-align:center;z-index:40;background:linear-gradient(180deg, var(--cloud) 0%, #d3ecff 100%);flex-direction:column;justify-content:center;align-items:center;gap:18px;padding:24px;display:flex;position:absolute;inset:0}.overlay h1{font-family:var(--font-display);color:var(--sky-deep);margin:0;font-size:clamp(28px,5vw,46px)}.overlay p{max-width:440px;margin:0;font-size:16px;line-height:1.6}.big-button{font-family:var(--font-display);color:var(--cream);background:var(--grass);cursor:pointer;border:none;border-radius:999px;padding:14px 38px;font-size:20px;font-weight:700;box-shadow:0 6px #2bb87c}.big-button:active{transform:translateY(4px);box-shadow:0 2px #2bb87c}.error-text{color:var(--berry);font-weight:700}