:root{font-family:system-ui,-apple-system,sans-serif}body{margin:0;padding:0}*{margin:0;padding:0;box-sizing:border-box}body{overflow:hidden;-webkit-user-select:none;user-select:none}.app{width:100vw;height:100vh;position:relative;overflow:hidden;background:#000;display:flex;align-items:center;justify-content:center}.stage{position:relative;width:1080px;height:1920px;flex-shrink:0;overflow:hidden;transform:scale(var(--stage-scale, 1));transform-origin:center center}.background-video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:1;pointer-events:none}.app-logo{position:fixed;top:40px;left:40px;width:350px;height:auto;z-index:1000;border-radius:10px}.progress-indicator{position:fixed;top:30px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:25px;background:#ffffff26;padding:12px 25px;border-radius:50px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 20px #0003;z-index:999}.progress-step{display:flex;align-items:center;justify-content:center;position:relative;opacity:.4;transition:all .3s ease}.progress-step.active{opacity:1}.progress-step.current .step-icon{animation:pulse 1.5s ease-in-out infinite}.progress-step.clickable{cursor:pointer}.progress-step.clickable:hover{opacity:.8;transform:scale(1.1)}.progress-step.clickable:active{transform:scale(1.05)}.step-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;color:#fff;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.step-icon svg{width:100%;height:100%}.lang-toggle{position:fixed;top:40px;right:40px;z-index:1000;display:flex;gap:4px;padding:6px;background:#ffffff26;border-radius:999px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 20px #0003}.lang-option{min-width:64px;padding:10px 18px;font-size:24px;font-weight:700;line-height:1;color:#ffffffd9;background:transparent;border:none;border-radius:999px;cursor:pointer;transition:color .25s ease,background .25s ease,box-shadow .25s ease}.lang-option.active{color:#0d6efd;background:#fff;box-shadow:0 2px 8px #0003}.page{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;gap:30px;animation:fadeIn .3s ease-in;position:relative;z-index:10}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInDown{0%{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes breathe{0%,to{box-shadow:0 0 20px #ffffff80}50%{box-shadow:0 0 40px #fffc}}.page h1{font-size:80px;font-weight:700}.page h2{font-size:50px}.page button{padding:20px 60px;font-size:30px;background:#fff;color:#667eea;border:none;border-radius:50px;cursor:pointer;font-weight:700;transition:transform .2s}.page button:hover{transform:scale(1.05)}.page button:active{transform:scale(.95)}button.primary-button,button.secondary-button,button.primary-button:hover,button.secondary-button:hover,button.primary-button:active,button.secondary-button:active{transform:none!important}.start-page{gap:20px}.logo-container{animation:slideInDown .8s ease-out}.logo{width:300px;height:auto;border-radius:20px;box-shadow:0 10px 30px #0003}.main-title{font-size:90px;font-weight:700;animation:slideInDown .8s ease-out .2s both;text-shadow:0 5px 15px rgba(0,0,0,.3)}.subtitle{font-size:32px;font-weight:300;opacity:.95;animation:slideInDown .8s ease-out .4s both;letter-spacing:2px}.start-button{padding:25px 70px;font-size:36px;margin-top:20px;animation:slideInUp .8s ease-out .6s both,breathe 2s ease-in-out infinite 1.4s}.hint-text{font-size:20px;opacity:.8;animation:fadeIn 1s ease-out 1s both}.primary-button{background:linear-gradient(to right,#0d6efd,#00d9a3)!important;color:#fff!important;border-radius:20px!important;border:none!important;box-shadow:0 4px 12px #0d6efd4d!important;transition:all .3s ease!important;position:relative;overflow:hidden;cursor:pointer;display:inline-block;text-align:center;font-weight:600!important;padding:18px 60px!important;font-size:28px!important}.primary-button:hover{filter:brightness(1.1);box-shadow:0 6px 16px #0d6efd66}.primary-button:active{border:3px solid #0d6efd!important;filter:brightness(.95)}.primary-button:after{content:"";position:absolute;top:50%;left:50%;width:5px;height:5px;background:#ffffff80;opacity:0;border-radius:100%;transform:scale(1) translate(-50%);transform-origin:50% 50%}.primary-button:focus:not(:active):after{animation:ripple 1s ease-out}.secondary-button{background:#fffffff2!important;color:#000!important;border-radius:20px!important;border:3px solid transparent!important;box-shadow:0 4px 12px #00000026!important;transition:all .3s ease!important;position:relative;overflow:hidden;cursor:pointer;display:inline-block;text-align:center;font-weight:600!important;padding:16px 60px!important;font-size:28px!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.secondary-button:hover{background:#fff!important;box-shadow:0 6px 16px #0003}.secondary-button:active{background:#ffffffe6!important;border:3px solid #000000!important}.secondary-button:after{content:"";position:absolute;top:50%;left:50%;width:5px;height:5px;background:#0d6efd4d;opacity:0;border-radius:100%;transform:scale(1) translate(-50%);transform-origin:50% 50%}.secondary-button:focus:not(:active):after{animation:ripple 1s ease-out}.primary-button:disabled,.secondary-button:disabled{opacity:.45!important;filter:grayscale(.4)!important;box-shadow:none!important;cursor:not-allowed!important;pointer-events:none!important}@keyframes ripple{0%{transform:scale(0);opacity:.5}to{transform:scale(20);opacity:0}}.camera{display:flex;flex-direction:column;align-items:center;gap:30px}.camera video{width:800px;height:600px;border-radius:20px;object-fit:cover;background:#000;box-shadow:0 15px 40px #0000004d;border:4px solid rgba(255,255,255,.3);transform:scaleX(-1)}.camera-stage{position:relative;display:inline-block;line-height:0}.countdown-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#00000040;border-radius:20px;pointer-events:none}.countdown-ring{position:absolute;width:340px;height:340px;transform:rotate(-90deg)}.countdown-ring-track{fill:none;stroke:#ffffff40;stroke-width:6}.countdown-ring-progress{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;stroke-dasharray:339.292;stroke-dashoffset:0;animation-name:countdown-ring-deplete;animation-timing-function:linear;animation-fill-mode:forwards}@keyframes countdown-ring-deplete{0%{stroke-dashoffset:0}to{stroke-dashoffset:339.292}}.countdown-number{position:relative;font-size:240px;font-weight:800;line-height:1;color:#fff;text-shadow:0 4px 24px rgba(0,0,0,.55),0 0 6px rgba(0,0,0,.85);animation:countdown-pop 1s ease-out}@keyframes countdown-pop{0%{transform:scale(.4);opacity:0}30%{transform:scale(1.15);opacity:1}60%{transform:scale(1)}to{transform:scale(1)}}.countdown-hint{position:absolute;bottom:48px;font-size:40px;font-weight:700;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.6)}.countdown-cancel{position:absolute;top:20px;right:20px;z-index:2;padding:12px 28px;font-size:22px;font-weight:600;color:#fff;background:#00000073;border:2px solid rgba(255,255,255,.6);border-radius:999px;cursor:pointer}.capture-flash{position:absolute;inset:0;background:#fff;border-radius:20px;pointer-events:none;animation:capture-flash .3s ease-out forwards}@keyframes capture-flash{0%{opacity:1}to{opacity:0}}.photo-preview{display:flex;flex-direction:column;align-items:center;gap:30px}.photo-preview img{width:800px;height:600px;border-radius:20px;object-fit:cover;box-shadow:0 15px 40px #0000004d;border:4px solid rgba(255,255,255,.3);animation:fadeIn .5s ease-out;transform:scaleX(-1)}.photo-preview .buttons{display:flex;gap:30px}.page-hint{font-size:24px;opacity:.9;margin-top:-10px}.profession-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.profession-card{width:250px;height:250px;font-size:28px;background-size:cover;background-position:center;background-repeat:no-repeat;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:20px;transition:all .3s ease;box-shadow:0 8px 20px #00000026;border-radius:20px;border:3px solid transparent;position:relative;overflow:hidden}.profession-card:before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,#fff0,#ffffffb3);transition:all .3s ease}.profession-card:hover{transform:translateY(-10px);box-shadow:0 15px 40px #00000040}.profession-card:hover:before{background:linear-gradient(to bottom,#fff0,#fffc)}.profession-card:active{transform:translateY(-8px);border:3px solid white}.profession-card .card-name{font-size:32px;font-weight:700;position:relative;z-index:1;color:#000;text-shadow:0 2px 4px rgba(255,255,255,.8);text-align:center;line-height:1.15;padding:0 12px;max-width:100%}.superpower-grid{display:flex;gap:50px}.superpower-card{width:350px;height:350px;font-size:32px;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;color:#000;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:30px;transition:all .3s ease;box-shadow:0 10px 30px #0003;border-radius:20px;border:3px solid transparent;position:relative;overflow:hidden}.superpower-card:before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,#fff0,#ffffffb3);transition:all .3s ease}.superpower-card:hover:before{background:linear-gradient(to bottom,#fff0,#fffc)}.superpower-card:hover{transform:translateY(-15px);box-shadow:0 20px 50px #0006}.superpower-card:active{transform:translateY(-12px);border:3px solid white}.superpower-card .card-name{font-size:36px;font-weight:700;position:relative;z-index:1;color:#000;text-shadow:0 2px 4px rgba(255,255,255,.8);text-align:center;line-height:1.15;padding:0 14px;max-width:100%}.preview-container{width:900px;height:600px;box-shadow:0 20px 60px #0000004d;border-radius:20px;overflow:hidden;border:4px solid rgba(255,255,255,.3);animation:fadeIn .5s ease-out}.preview-container img{width:100%;height:100%;object-fit:cover;background:#0000001a}.generate-button{animation:pulse 2s ease-in-out infinite}.generating-page{gap:40px}.loading-container{position:relative;width:150px;height:150px}.loading-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100px;height:100px;border:8px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}.loading-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:130px;height:130px;border:4px solid rgba(255,255,255,.1);border-top-color:#ffffff80;border-radius:50%;animation:spin 2s linear infinite reverse}@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}.progress-bar{width:500px;height:12px;background:#fff3;border-radius:10px;overflow:hidden;box-shadow:inset 0 2px 4px #0003}.progress-fill{height:100%;background:linear-gradient(90deg,#667eea,#764ba2,#667eea);background-size:200% 100%;border-radius:10px;transition:width .3s ease;animation:shimmer 1.5s linear infinite;box-shadow:0 0 10px #667eea80}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.generating-text{font-size:26px;font-weight:500;animation:pulse 1.5s ease-in-out infinite}.result-page{gap:22px}.result-grid{display:flex;flex-direction:column;gap:26px}.result-item{display:flex;flex-direction:column;gap:14px;align-items:center}.result-container{position:relative;width:880px;height:495px;box-shadow:0 20px 60px #0000004d;border-radius:20px;overflow:hidden;border:4px solid rgba(255,255,255,.3)}.result-container img{width:100%;height:100%;object-fit:cover;background:#0000001a}.result-placeholder{width:100%;height:100%;background:#0003}.regen-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#0000008c;color:#fff;font-size:24px;font-weight:500}.regen-spinner{width:56px;height:56px;border:6px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:regen-spin 1s linear infinite}@keyframes regen-spin{to{transform:rotate(360deg)}}.result-item-buttons{display:flex;gap:24px}.countdown-label{font-size:24px;opacity:.95;font-weight:500}.result-buttons{display:flex;gap:30px}.photo-confirm-container{display:flex;flex-direction:column;gap:35px;align-items:center;justify-content:flex-start;max-width:880px;margin:0 auto}.photo-display{flex-shrink:0}.photo-display img{width:720px;height:540px;border-radius:20px;object-fit:cover;box-shadow:0 15px 40px #0000004d;border:4px solid rgba(255,255,255,.3);animation:fadeIn .5s ease-out;transform:scaleX(-1)}.selection-panel{width:100%;max-width:760px;display:flex;flex-direction:column;gap:30px}.selection-section{background:#fffffff2;border-radius:20px;padding:30px;box-shadow:0 8px 24px #00000026;border:2px solid rgba(13,110,253,.1)}.section-title{font-size:26px;font-weight:700;color:#0d6efd;margin:0 0 20px;text-align:left}.radio-group{display:flex;gap:20px}.radio-card{flex:1;cursor:pointer;border:4px solid transparent;border-radius:20px;background:#fff;transition:all .3s ease;position:relative;overflow:hidden;height:200px;display:flex;flex-direction:column}.radio-card:hover{border-color:#0d6efd;transform:scale(1.05);box-shadow:0 10px 30px #0d6efd4d}.radio-card.selected{border-color:#0d6efd;box-shadow:0 12px 35px #0d6efd66;transform:scale(1.05)}.radio-card input[type=radio]{position:absolute;opacity:0;pointer-events:none}.radio-image-wrapper{flex:1;width:100%;position:relative;overflow:hidden}.radio-image{width:100%;height:100%;object-fit:cover;display:block}.radio-card:before{content:"";position:absolute;bottom:0;left:0;right:0;height:60%;background:linear-gradient(to bottom,#fff0,#ffffffe6);pointer-events:none;z-index:1}.radio-text{position:relative;z-index:2;font-size:22px;font-weight:700;color:#000;text-align:center;padding:15px 10px;background:#fffffff2;text-shadow:0 2px 4px rgba(255,255,255,.8)}.radio-card.selected .radio-text{color:#0d6efd;font-weight:800}.confirm-buttons{display:flex;gap:20px;justify-content:center;padding-top:10px}