body{color:#1f2937;background-color:#dff2fb;background-image:url(/assets/background.png);background-position:50%;background-repeat:no-repeat;background-size:cover;background-attachment:fixed;margin:0;font-family:Inter,Segoe UI,Tahoma,sans-serif;line-height:1.5}#root{min-height:100vh}h1,h2,h3{color:#065f2f;line-height:1.2}h1{margin:12px 0 10px;font-size:clamp(2rem,5vw,3.5rem)}.app{aspect-ratio:9/16;box-sizing:border-box;background:linear-gradient(#fffef8b8,#fff8e8b8);flex-direction:column;justify-content:flex-start;width:min(100vw,1080px);height:min(100vh,1920px);margin:0 auto;padding:28px 24px 36px;display:flex}:root{--brand-green:#0a8f3f;--brand-green-dark:#066b2f;--brand-green-soft:#eaf8ef;--brand-yellow:#f4c430;--brand-yellow-soft:#fff7da}.app-header{text-align:center;margin-bottom:20px}.app-header p{margin:0}.logo{width:180px;max-width:60vw}.steps{gap:8px;margin-top:12px;display:inline-flex}.steps span{color:#52525b;background:#f4f4f5;border:2px solid #d4d4d8;border-radius:999px;place-items:center;width:30px;height:30px;font-weight:700;display:grid}.steps span.active{border-color:var(--brand-green);background:var(--brand-green);color:#fff}.panel{text-align:center;background:#fff;border:1px solid #cbe9d7;border-radius:20px;flex:1;padding:24px;overflow:auto;box-shadow:0 8px 30px #0a8f3f1f}.fields{justify-items:center;gap:12px;margin:14px 0 18px;display:grid}.intro-stage{border-radius:0;width:100%;height:100%;position:relative;overflow:hidden}.intro-image{object-fit:cover;width:100%;height:100%}.intro-logo{z-index:2;width:min(56%,320px);position:absolute;top:18px;left:50%;transform:translate(-50%)}.intro-button{color:#f5fce9;text-transform:uppercase;letter-spacing:.8px;z-index:2;background:linear-gradient(#147e2f 0%,#0f6f2a 58%,#0c6325 100%);border:3px solid #72b55a;justify-content:space-between;align-items:center;gap:10px;min-width:190px;min-height:56px;padding:9px 12px 9px 22px;font-size:1.08rem;font-weight:900;display:inline-flex;position:absolute;bottom:6.5%;left:50%;transform:translate(-50%);box-shadow:inset 0 0 0 2px #0a5a1d,inset 0 0 0 4px #f0db75cc,0 7px #0b5d22,0 10px 20px #04301466;border-radius:14px!important}.intro-button span{line-height:1}.intro-button-arrow{color:#f9ffea;background:linear-gradient(#1a8a37 0%,#13742d 100%);border:2px solid #8ac66f;border-radius:8px;place-items:center;width:30px;height:30px;font-size:1.55rem;font-weight:900;display:inline-grid;box-shadow:inset 0 1px 2px #ffffff4d}.intro-button:hover{transform:translate(-50%)translateY(-1px);box-shadow:inset 0 0 0 2px #0a5a1d,inset 0 0 0 4px #f0db75cc,0 6px #0b5d22,0 12px 22px #04301473}.intro-app,.register-app{background:0 0;padding:0}.register-screen{width:100%;height:100%;position:relative;overflow:hidden}.register-background{object-fit:cover;width:100%;height:100%}.register-logo{z-index:2;width:min(56%,320px);position:absolute;top:18px;left:50%;transform:translate(-50%)}.register-card{box-sizing:border-box;text-align:center;background:linear-gradient(#0a4624c7,#08341cd1);border:2px solid #ffdd85b3;border-radius:22px;width:min(100% - 20px,720px);padding:14px 12px 10px;position:absolute;top:52%;left:50%;transform:translate(-50%);box-shadow:0 0 0 2px #fff4cc2e,0 10px 26px #0322126b}.register-title{color:#fff9dc;text-shadow:0 2px 12px #04381ca6;margin:2px 0 10px}.register-fields{gap:10px;width:100%;margin-bottom:12px;display:grid}.register-field{box-sizing:border-box;background:#fffdf1;border:2px solid #f0e9cf;border-radius:18px;grid-template-columns:46px 1fr;align-items:center;gap:10px;width:100%;margin:0 auto;padding:5px 8px;display:grid;box-shadow:0 6px 16px #021c1033}.register-field-icon{color:#0b6a35;background:#efe9cf;border-radius:999px;place-items:center;width:34px;height:34px;display:grid}.register-field-icon svg{width:18px;height:18px}.register-field input[type=text],.register-field input[type=email],.register-field input[type=tel]{width:100%;min-width:0;box-shadow:none;text-align:left;color:#0b3c25;background:0 0;border:none;padding:8px 4px;font-weight:700}.register-field input::placeholder{color:#0f4f2f}.register-field:focus-within{border-color:#87dfac;box-shadow:0 0 0 2px #8ff5b738}.register-field input[type=text]:focus,.register-field input[type=email]:focus,.register-field input[type=tel]:focus{outline:none}.register-cta{text-transform:uppercase;color:#0b4b2d;background:linear-gradient(#ffd452,#f7b400);border:3px solid #ffeeb8;min-width:min(86%,520px);font-size:1.75rem;font-weight:900;box-shadow:0 6px #c88906,0 10px 20px #1f17034d}.register-cta:hover{box-shadow:0 5px #c88906,0 12px 22px #1f17035c}.quiz-app{background:0 0;padding:0}.quiz-screen{width:100%;height:100%;position:relative;overflow:hidden}.quiz-background{object-fit:cover;width:100%;height:100%}.quiz-card{text-align:center;border-radius:18px;width:min(88%,680px);padding:16px;position:absolute;top:63%;left:50%;transform:translate(-50%)}.quiz-question-box{text-align:center;z-index:2;align-content:center;justify-items:center;width:min(64%,430px);min-height:118px;padding:14px 20px;display:grid;position:absolute;top:53%;left:50%;transform:translate(-50%,-50%)}.quiz-question-box .quiz-counter{color:#0c6d38;text-transform:uppercase;margin:0 0 6px;font-size:.9rem;font-weight:800}.quiz-question-box h2{color:#0a6d37;margin:0}.quiz-options{gap:8px;margin-top:12px;display:grid}.quiz-option{color:#fff;background:linear-gradient(#0d8e47,#06773a);border:4px solid #fff;border-radius:999px;justify-content:center;align-items:center;gap:8px;width:min(80%,560px);margin:0 auto;padding:11px 12px;font-weight:700;transition:all .2s;display:flex;box-shadow:0 4px #0f5c33,0 5px 14px #0a8f3f40}.quiz-option.selected{background:linear-gradient(#13a956,#0a8f3f);border-color:#fff6c8;box-shadow:0 4px #0d6f3c,0 6px 16px #0a8f3f57}.option-prefix{letter-spacing:.3px;font-weight:800}.quiz-actions{justify-content:center;gap:8px;margin-top:14px;display:flex}.button{cursor:pointer;color:#fff;background:var(--brand-green);border:2px solid #0000;border-radius:999px;padding:10px 18px;font-size:.95rem;font-weight:700;text-decoration:none;transition:transform .2s,box-shadow .2s}.button:disabled{cursor:not-allowed;opacity:.6}.button:hover{transform:translateY(-1px);box-shadow:0 4px 15px #0a8f3f52}.button.ghost{background:var(--brand-green-soft);color:var(--brand-green-dark);border-color:#94d3ab}label{color:#374151;text-align:center;gap:6px;width:min(100%,560px);font-weight:600;display:grid}input[type=text],input[type=email],input[type=tel]{box-sizing:border-box;text-align:center;border:1px solid #b9dbc7;border-radius:10px;width:100%;padding:10px 12px;font-size:1rem}input[type=text]:focus,input[type=email]:focus,input[type=tel]:focus{border-color:var(--brand-green);outline:2px solid #9fd9b6}.actions{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.smiling-image{width:min(100%,220px);margin-top:18px}.camera-area{aspect-ratio:9/16;background:#111827;border-radius:16px;place-items:center;width:100%;min-height:300px;margin:0;display:grid;position:relative;overflow:hidden}.camera-shell{width:min(80%,500px);margin:16px auto;position:relative}.camera-shell:after{content:"";aspect-ratio:1;z-index:7;pointer-events:none;background-image:url(/assets/Pointing.png);background-position:50%;background-repeat:no-repeat;background-size:contain;width:min(50%,190px);position:absolute;bottom:-50px;right:-86px}video,.preview{object-fit:cover;width:100%;height:100%;transform:scaleX(-1)}.hidden{display:none}.countdown{color:#fff;text-shadow:0 6px 22px #00000073;z-index:6;background:#00000059;place-items:center;font-size:clamp(3rem,12vw,7rem);font-weight:800;display:grid;position:absolute;inset:0}.qr-box{border:1px dashed var(--brand-green);background:var(--brand-yellow-soft);border-radius:16px;margin:14px auto 20px;padding:20px;display:inline-flex}.error{color:#dc2626;font-weight:700}.photo-page{text-align:center}.photo-app{background:0 0;padding:0}.photo-stage{width:100%;height:100%;position:relative;overflow:hidden}.photo-background{object-fit:cover;width:100%;height:100%}.photo-logo{z-index:4;filter:drop-shadow(0 4px 10px #0000002e);width:min(44%,250px);position:absolute;top:2.2%;left:50%;transform:translate(-50%)}.photo-camera-slot{z-index:2;width:min(66.5%,430px);position:absolute;top:60.2%;left:50%;transform:translate(-50%,-50%)}.photo-app .camera-shell{width:100%;margin:0}.photo-app .camera-shell:after{display:none}.photo-app .camera-area{aspect-ratio:3/4;background:#aeb4b8;border-radius:22px;min-height:0}.photo-controls{z-index:3;text-align:center;width:min(92%,760px);position:absolute;bottom:2.2%;left:50%;transform:translate(-50%)}.photo-controls h2,.photo-controls p{margin-top:10px;margin-bottom:0}.photo-controls .qr-box{margin:12px auto}.photo-controls .actions{margin-top:10px}.results-stage{width:100%;height:100%;position:relative;overflow:hidden}.results-background{object-fit:cover;width:100%;height:100%}.results-photo-slot{aspect-ratio:.98/.8;z-index:2;border-radius:4px;width:min(66%,430px);position:absolute;top:58.8%;left:48.5%;overflow:hidden;transform:translate(-50%,-50%)rotate(352.4deg)}.results-photo{object-fit:cover;width:100%;height:100%;transform:scaleX(-1)}.results-controls{z-index:4;text-align:center;border-radius:18px;width:min(88%,520px);padding:10px 10px 12px;position:absolute;bottom:1.2%;left:65%;transform:translate(-50%)}.results-controls p{color:#0e5b37;margin:0;font-weight:700}.results-qr-box{background:#fff;border:2px solid #bbdfca;border-radius:14px;width:fit-content;margin:0;padding:10px}.results-qr-actions{justify-content:center;align-items:center;gap:12px;display:flex}.results-new-register{white-space:nowrap;min-height:54px}@media (width<=760px){.app{aspect-ratio:auto;width:100vw;height:100vh}.quiz-card{width:min(92%,620px);padding:14px;top:60%}.register-card{width:min(94%,620px);top:30%}.register-cta{font-size:1.25rem}.quiz-question-box{width:min(62%,420px);min-height:100px;top:52%}.camera-area{min-height:240px}.photo-camera-slot{width:70.5%;top:61.2%}.photo-logo{width:min(52%,220px);top:2.6%}.photo-controls{width:95%;bottom:5.5%}.photo-controls .button{padding:9px 14px;font-size:.88rem}.photo-controls h2{font-size:1.05rem}.photo-controls p{font-size:.86rem;line-height:1.35}.results-photo-slot{width:71%;top:60.2%}.results-controls{width:min(92%,430px);padding:8px 8px 10px;bottom:-.5%}.results-controls p{font-size:.82rem}.results-qr-box{margin:0;padding:8px}.results-qr-actions{gap:8px}.results-new-register{min-height:46px;padding:9px 12px;font-size:.82rem}}
