@media(max-width:320px){.main-content{width:80vw;height:75vh;gap:clamp(10px,1.5vh,15px);padding:12px}.avatar-container{width:clamp(90px,35vw,120px);height:clamp(90px,35vw,120px)}.dynamic-role{font-size:clamp(1rem,4.5vw,1.8rem)}.cta-button{font-size:clamp(.7rem,3vw,.9rem);padding:clamp(6px,1.5vw,10px) clamp(12px,2.5vw,20px)}}@media(prefers-reduced-motion:reduce){.profile-svg{animation:none}.role-text.typing:after{animation:none}.intro-text,.cta-centered{animation:none!important;opacity:1!important;transform:none!important}*{transition-duration:.01s!important;animation-duration:.01s!important}}.cta-button:focus-visible,.tap-btn:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}@media(prefers-contrast:high){#overlay{background:#000000f2}.intro-text{color:#fff}.cta-button,.tap-btn{border:2px solid #ffffff}}:root{--primary-gradient: linear-gradient(45deg, #f093fb, #f5576c);--secondary-gradient: linear-gradient(45deg, #f5576c, #f093fb);--primary-color: #f093fb;--secondary-color: #f5576c;--background-dark: #1a1a2e;--text-primary: #ffffff;--text-secondary: rgba(255, 255, 255, .8);--spacing-xs: clamp(1px, .2vh, 2px);--spacing-sm: clamp(4px, .8vh, 8px);--spacing-md: clamp(8px, 1.6vh, 16px);--spacing-lg: clamp(16px, 3.2vh, 32px);--spacing-xl: clamp(24px, 4.8vh, 48px);--font-primary: "Scheherazade New", "Times New Roman", serif;--transition-smooth: all .3s cubic-bezier(.4, 0, .2, 1);--transition-entry: all .6s cubic-bezier(.4, 0, .2, 1);--shadow-soft: 0 6px 20px rgba(240, 147, 251, .3);--shadow-medium: 0 10px 30px rgba(240, 147, 251, .4)}*{margin:0;padding:0;box-sizing:border-box}body{overflow:hidden;background:var(--background-dark);font-family:var(--font-primary);line-height:1.6}#overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:50;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#000000d9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:20px;opacity:0;visibility:hidden;transition:all .4s cubic-bezier(.4,0,.2,1);user-select:none;-webkit-user-select:none}#overlay.active{opacity:1;visibility:visible}.main-content{position:relative;margin:0 auto;padding:10px;text-align:center}.main-content{display:flex;flex-direction:column;align-items:center;justify-content:center;width:70vw;height:75vh;gap:clamp(15px,2.5vh,20px)}@media(min-width:769px){.main-content{display:block}}@media(min-width:769px)and (max-width:1024px){.main-content{width:min(90vw,800px);height:calc(min(90vw,800px)*.618);max-height:65vh;transform:translateY(clamp(-20px,-2vh,-10px))}}@media(min-width:1025px){.main-content{width:min(85vw,900px);height:calc(min(85vw,900px)*.618);max-height:60vh;transform:translateY(clamp(-20px,-1vh,-10px))}}.avatar-container{display:flex;justify-content:center;align-items:center;flex-shrink:0;margin:0}.avatar-container{order:1;position:relative;width:clamp(140px,30vw,180px);height:clamp(140px,30vw,180px)}@media(min-width:769px){.avatar-container{position:absolute;top:0;right:0;z-index:10}}@media(min-width:769px)and (max-width:1024px){.avatar-container{width:clamp(100px,14vw,160px);height:clamp(100px,14vw,160px)}}@media(min-width:1025px){.avatar-container{width:35%;height:35%;right:3%;top:3%;min-width:clamp(150px,20vw,250px);min-height:clamp(150px,20vw,250px)}}.profile-svg{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 clamp(6px,1.5vw,12px) clamp(12px,2.5vw,20px) rgba(0,0,0,.3)) invert(1) sepia(1) saturate(2) hue-rotate(320deg) brightness(1.2);animation:professionalFloat 8s ease-in-out infinite;user-select:none;-webkit-user-select:none}@keyframes professionalFloat{0%,to{transform:translateY(0) rotate(0)}33%{transform:translateY(-4px) rotate(.5deg)}66%{transform:translateY(-2px) rotate(-.5deg)}}.intro-text-container{display:flex;flex-direction:column;gap:clamp(1px,.3vh,3px);margin:0;padding:0}.intro-text-container{order:2;position:relative;width:100%;height:auto;justify-content:center;align-items:center;text-align:center}@media(min-width:769px){.intro-text-container{position:absolute;left:2%;top:2%;align-items:flex-start;text-align:left;z-index:5}}@media(min-width:769px)and (max-width:1024px){.intro-text-container{width:70%;height:auto;justify-content:center}}@media(min-width:1025px){.intro-text-container{width:75%;height:75%;justify-content:flex-start}}.intro-text{color:var(--text-primary);font-family:var(--font-primary);line-height:1.3;margin:var(--spacing-xs) 0;opacity:0;animation:fadeInUp .6s cubic-bezier(.4,0,.2,1) forwards}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}#overlay.active .intro-text{animation-play-state:running}#overlay:not(.active) .intro-text{animation-play-state:paused}.intro-line-1{font-size:clamp(1.7rem,6vw,2.2rem);font-weight:400;letter-spacing:clamp(.5px,.1vw,1px);animation-delay:.2s}.intro-line-2{font-size:clamp(2rem,7.5vw,2.8rem);font-weight:700;letter-spacing:clamp(.5px,.1vw,1px);background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation-delay:.4s}.intro-line-3{font-size:clamp(1.7rem,6vw,2.2rem);font-weight:400;animation-delay:.6s}@media(min-width:769px)and (max-width:1024px){.intro-line-1{font-size:clamp(2rem,5vw,3rem);margin-bottom:clamp(4px,.8vh,8px)}.intro-line-2{font-size:clamp(1.8rem,4.5vw,2.8rem);margin-bottom:clamp(8px,1.2vh,16px)}.intro-line-3{font-size:clamp(1.5rem,3.5vw,2.2rem);margin-bottom:clamp(4px,.8vh,8px)}}@media(min-width:1025px){.intro-line-1{font-size:clamp(2rem,4vw,3.2rem);margin-bottom:clamp(4px,.8vh,8px)}.intro-line-2{font-size:clamp(2rem,4.2vw,3.2rem);margin-bottom:clamp(8px,1.2vh,16px)}.intro-line-3{font-size:clamp(2rem,4vw,3.2rem);margin-bottom:clamp(4px,.8vh,8px)}}.dynamic-role{font-weight:700;letter-spacing:clamp(.5px,.1vw,1px);display:flex;align-items:center;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 4px 20px rgba(0,0,0,.3);animation-delay:.8s}.dynamic-role{font-size:clamp(2.5rem,10vw,3.6rem);min-height:clamp(40px,6vh,50px);justify-content:center;text-align:center}@media(min-width:769px)and (max-width:1024px){.dynamic-role{font-size:clamp(1.6rem,4vw,2.5rem);min-height:clamp(50px,8vh,70px);margin-bottom:clamp(20px,3vh,30px);justify-content:flex-start;text-align:left}}@media(min-width:1025px){.dynamic-role{margin-top:clamp(15px,3vh,30px);font-size:clamp(2.5rem,5.5vw,3.8rem);min-height:clamp(55px,8vh,85px);margin-bottom:clamp(20px,3vh,40px);justify-content:flex-start;text-align:left}}.role-text{opacity:0;transition:all .4s ease;position:absolute;user-select:none;-webkit-user-select:none}.role-text.active{opacity:1;animation:roleSlideIn .4s ease forwards}@keyframes roleSlideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.role-text.typing:after{content:"|";animation:blink 1s infinite;margin-left:2px}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}.role-developer{color:#4facfe}.role-researcher{color:#50c878}.role-artist{color:#ff6b47}.role-educator{color:gold}.role-entrepreneur{color:#dc143c}.role-connoisseur{color:#8e44ad}.cta-centered{display:flex;justify-content:center;align-items:center;width:auto;opacity:0;animation:ctaFadeIn .6s cubic-bezier(.4,0,.2,1) 1.2s forwards}@keyframes ctaFadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}#overlay.active .cta-centered{animation-play-state:running}#overlay:not(.active) .cta-centered{animation-play-state:paused}.cta-centered{order:3;position:relative;margin-top:clamp(10px,2vh,20px);z-index:10}@media(min-width:769px){.cta-centered{position:absolute;bottom:5%;left:50%;transform:translate(-50%);margin:0;z-index:15}@keyframes ctaFadeInDesktop{0%{opacity:0}to{opacity:1}}.cta-centered{animation:ctaFadeInDesktop .6s cubic-bezier(.4,0,.2,1) 1.2s forwards}}.cta-button{display:inline-flex;align-items:center;gap:clamp(6px,1.2vw,8px);padding:clamp(6px,1.5vw,10px) clamp(12px,2.5vw,20px);width:auto;min-width:auto;flex-shrink:0;background:var(--primary-gradient);color:#fff;border:none;border-radius:50px;box-shadow:var(--shadow-soft);font-family:var(--font-primary);font-size:clamp(.7rem,3vw,.9rem);font-weight:600;letter-spacing:.5px;text-decoration:none;cursor:pointer;transition:var(--transition-smooth);user-select:none;-webkit-user-select:none}.cta-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-medium);background:var(--secondary-gradient)}.cta-button:active{transform:translateY(0)}.cta-arrow{font-size:1.1rem;transition:transform .3s ease}.cta-button:hover .cta-arrow{transform:translate(4px)}.mobile-controls{position:fixed;top:70vh;left:50%;transform:translate(-50%,-50%);z-index:40;display:none;align-items:center;justify-content:center}.mobile-controls.visible{display:flex}.tap-button-container{display:flex;align-items:center;justify-content:center}.tap-btn{width:clamp(44px,10vw,56px);height:clamp(44px,10vw,56px);border-radius:50%;background:linear-gradient(135deg,#f093fb,#f5576c);border:3px solid rgba(255,255,255,.3);box-shadow:0 8px 24px #f093fb66,0 4px 12px #0000004d;color:#fff;font-size:clamp(.9rem,3.2vw,1.1rem);font-weight:700;font-family:var(--font-primary);letter-spacing:.5px;display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;transition:all .3s cubic-bezier(.4,0,.2,1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.tap-btn:hover,.tap-btn:active{background:linear-gradient(135deg,#f5576c,#f093fb);border-color:#ffffff80;transform:translateY(-4px) scale(1.05);box-shadow:0 12px 32px #f093fb80,0 6px 16px #0006}.tap-btn:active{transform:translateY(0) scale(.98);box-shadow:0 4px 16px #f093fb80,0 2px 8px #0006}@keyframes tapPulse{0%,to{box-shadow:0 8px 24px #f093fb66,0 4px 12px #0000004d}50%{box-shadow:0 8px 24px #f093fb99,0 4px 12px #0000004d,0 0 0 12px #f093fb33}}.tap-btn.pulse{animation:tapPulse 2s ease-in-out infinite}#timed-hint{position:fixed;bottom:20px;left:50%;transform:translate(-50%);color:var(--text-secondary);font-size:13px;text-align:center;z-index:102;opacity:0;visibility:hidden;transition:all .5s ease;pointer-events:none;font-family:var(--font-primary);background:#0006;padding:8px 16px;border-radius:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.15)}#timed-hint.show{opacity:1;visibility:visible}@media(max-width:768px){#timed-hint{display:none}}@media(max-width:480px){.avatar-container{width:clamp(100px,30vw,140px);height:clamp(100px,30vw,140px)}.dynamic-role{font-size:clamp(1rem,4vw,1.6rem)}.cta-button{font-size:clamp(.8rem,3.5vw,1rem);padding:clamp(8px,2vw,12px) clamp(16px,3vw,24px)}}