@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&display=swap";*,:before,:after{box-sizing:border-box}body,html{color:#1a1a1a;background-color:#0f0e0e;width:100vw;height:100vh;margin:0;padding:0;font-family:Inter,sans-serif;overflow:hidden}.app-container{width:100vw;height:100vh;position:relative}#webcam-feed{object-fit:cover;z-index:15;filter:grayscale(60%)sepia(15%)contrast(115%);border:3px solid #f2e8df80;border-radius:6px;width:300px;height:225px;transition:all .3s;display:none;position:absolute;bottom:2rem;right:2rem;transform:scaleX(-1);box-shadow:0 8px 30px #0009}body:has(.hud) #webcam-feed{display:block}.start-overlay{z-index:20;background:#0f0e0e;justify-content:center;align-items:center;display:flex;position:absolute;inset:0;overflow:hidden}.bg-shapes{pointer-events:none;position:absolute;inset:0;overflow:hidden}.shape{opacity:.12;position:absolute}.shape-1{background:#d92525;width:320px;height:320px;animation:18s ease-in-out infinite alternate drift;top:-60px;left:-80px}.shape-2{background:#f2c12e;border-radius:50%;width:200px;height:200px;animation:22s ease-in-out infinite alternate-reverse drift;bottom:10%;right:5%}.shape-3{border-bottom:240px solid #f2e8df;border-left:140px solid #0000;border-right:140px solid #0000;width:0;height:0;animation:20s ease-in-out infinite alternate drift;top:15%;right:20%}.shape-4{background:#d92525;width:180px;height:60px;animation:16s ease-in-out infinite alternate-reverse drift;bottom:30%;left:8%;transform:rotate(-12deg)}.shape-5{background:#f2e8df;border-radius:50%;width:100px;height:100px;animation:24s ease-in-out infinite alternate drift;top:60%;left:40%}.shape-6{border:3px solid #f2e8df26;width:240px;height:240px;animation:40s linear infinite spin-slow;top:5%;left:55%}@keyframes drift{0%{transform:translate(0)rotate(0)}50%{transform:translate(40px,-30px)rotate(5deg)}to{transform:translate(-20px,20px)rotate(-3deg)}}@keyframes spin-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.start-card{z-index:2;width:90%;max-width:960px;max-height:95vh;padding:1rem 0;animation:.8s ease-out fadeInUp;position:relative;overflow-y:auto}.start-card::-webkit-scrollbar{width:6px}.start-card::-webkit-scrollbar-track{background:#0000001a}.start-card::-webkit-scrollbar-thumb{background:#f2e8df33;border-radius:3px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.start-card-inner{grid-template-columns:1fr 1fr;align-items:center;gap:4rem;display:grid}.start-hero{color:#f2e8df}.tag{letter-spacing:2px;text-transform:uppercase;color:#d92525;border:1px solid #d92525;border-radius:3px;margin-bottom:1.2rem;padding:.3rem .8rem;font-size:.75rem;font-weight:600;display:inline-block}.start-hero h1{color:#f2e8df;margin:0 0 1.5rem;font-family:Playfair Display,serif;font-size:4.2rem;font-weight:900;line-height:1.05}.hero-desc{color:#f2e8dfa6;max-width:380px;margin:0 0 2.5rem;font-size:1.1rem;line-height:1.7}.start-btn{color:#f2e8df;text-transform:uppercase;letter-spacing:1.5px;cursor:pointer;background:#d92525;border:none;border-radius:4px;width:auto;padding:1.1rem 2.8rem;font-family:inherit;font-size:1rem;font-weight:700;transition:all .25s;position:relative;overflow:hidden;box-shadow:0 4px 20px #d9252559}.start-btn:after{content:"";background:linear-gradient(120deg,#0000,#ffffff26,#0000);transition:transform .5s;position:absolute;inset:0;transform:translate(-100%)}.start-btn:hover:after{transform:translate(100%)}.start-btn:hover{transform:translateY(-2px);box-shadow:0 8px 30px #d9252580}.start-btn:active{transform:translateY(0);box-shadow:0 2px 10px #d925254d}.start-btn:disabled{opacity:.7;cursor:wait}.btn-loading .dots:after{content:"";animation:1.2s steps(4,end) infinite dots-anim}@keyframes dots-anim{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}.start-info{flex-direction:column;gap:1.2rem;display:flex}.info-card{color:#f2e8df;animation:.7s ease-out backwards fadeInUp;animation-delay:var(--delay,0s);background:#f2e8df0d;border:1px solid #f2e8df1a;border-radius:8px;align-items:flex-start;gap:1rem;padding:1.2rem 1.4rem;transition:background .25s,border-color .25s;display:flex}.info-card:hover{background:#f2e8df14;border-color:#d9252566}.info-icon{color:#d92525;background:#d9252526;border-radius:6px;justify-content:center;align-items:center;width:42px;min-width:42px;height:42px;font-size:1.2rem;font-weight:700;display:flex}.info-card h3{margin:0 0 .35rem;font-family:Playfair Display,serif;font-size:1.05rem;font-weight:700}.info-card p{color:#f2e8df8c;margin:0;font-size:.9rem;line-height:1.5}.hud{z-index:20;pointer-events:none;padding:1.5rem;position:absolute;top:0;left:0}.hud-panel{pointer-events:auto;-webkit-backdrop-filter:blur(12px);background:#0f0e0ebf;border:1px solid #f2e8df1f;border-radius:12px;min-width:250px;padding:1.4rem 1.6rem;animation:.5s ease-out fadeInUp}.hud-title{color:#f2e8df;margin:0 0 1rem;font-family:Playfair Display,serif;font-size:1.2rem;font-weight:700}.hud-group{margin-bottom:.8rem}.hud-group label:not(.toggle-label){text-transform:uppercase;letter-spacing:1.5px;color:#f2e8df73;margin-bottom:.4rem;font-size:.7rem;font-weight:600;display:block}select{appearance:none;color:#f2e8df;cursor:pointer;background:#f2e8df14;border:1px solid #f2e8df26;border-radius:6px;outline:none;width:100%;padding:.65rem .9rem;font-family:inherit;font-size:.95rem;font-weight:600;transition:border-color .2s,background .2s}select:focus,select:hover{background:#d925251f;border-color:#d92525}select option{color:#f2e8df;background:#1a1a1a}.toggle-label{cursor:pointer;justify-content:space-between;align-items:center;margin-top:1rem;display:flex}.toggle-text{text-transform:uppercase;letter-spacing:1.5px;color:#f2e8df73;font-size:.7rem;font-weight:600}.toggle-switch{width:44px;height:24px;position:relative}.toggle-checkbox{opacity:0;width:0;height:0}.toggle-slider{cursor:pointer;background-color:#f2e8df26;border-radius:24px;transition:all .3s;position:absolute;inset:0}.toggle-slider:before{content:"";background-color:#f2e8df;border-radius:50%;width:16px;height:16px;transition:all .3s;position:absolute;bottom:4px;left:4px}.toggle-checkbox:checked+.toggle-slider{background-color:#d92525}.toggle-checkbox:checked+.toggle-slider:before{transform:translate(20px)}.rec-btn{color:#f2e8df;cursor:pointer;background:#f2e8df14;border:1px solid #f2e8df26;border-radius:6px;justify-content:center;align-items:center;gap:.6rem;width:100%;margin-top:1rem;padding:.65rem 1rem;font-family:inherit;font-size:.95rem;font-weight:600;transition:all .2s;display:flex}.rec-btn:hover{background:#d925251f;border-color:#d92525}.rec-dot{background:#888;border-radius:50%;width:10px;height:10px;transition:background .2s}.rec-btn.recording{background:#d9252526;border-color:#d92525}.rec-btn.recording .rec-dot{background:#d92525;animation:1s ease-in-out infinite pulse-dot}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.4)}}.hud-hint{color:#f2e8df59;text-align:center;margin:.8rem 0 0;font-size:.78rem}@media (width<=1024px){.start-card-inner{gap:3rem}.start-hero h1{font-size:3.5rem}}@media (width<=800px){.start-card-inner{grid-template-columns:1fr;gap:2rem}.start-hero h1{font-size:3rem}.start-hero{text-align:center;flex-direction:column;align-items:center;display:flex}.start-btn{width:100%;max-width:300px}}@media (width<=600px){.start-hero h1{margin-bottom:1rem;font-size:2.2rem}.hero-desc{margin-bottom:1.5rem;font-size:.95rem}.tag{margin-bottom:.8rem;font-size:.65rem}.start-card{width:95%}.info-card{gap:.8rem;padding:1rem}.info-icon{width:36px;min-width:36px;height:36px;font-size:1rem}.info-card h3{font-size:.95rem}.info-card p{font-size:.85rem}.hud{width:100%;padding:1rem}.hud-panel{min-width:100%;padding:1rem}#webcam-feed{border-width:2px;width:140px;height:105px;bottom:1rem;right:1rem}}@media (height<=500px){.start-card-inner{gap:1.5rem}.start-hero h1{font-size:1.8rem}#webcam-feed{width:120px;height:90px}.hud{padding:.5rem}.hud-panel{padding:.8rem}.hud-title{margin-bottom:.5rem;font-size:1rem}}