*{margin:0;padding:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}html{scroll-behavior:smooth;width:100%;height:100%;overflow-x:hidden}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:transparent;color:var(--color-text-primary);line-height:var(--line-height-normal);min-height:100vh;width:100%;max-width:100%;margin:0;padding:0;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;position:relative}img,video,iframe{max-width:100%;height:auto}*{word-wrap:break-word;overflow-wrap:break-word}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#0000001a}::-webkit-scrollbar-thumb{background:var(--gradient-primary);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb:hover{background:var(--gradient-secondary)}:root{--color-brand-primary: #667eea;--color-brand-secondary: #764ba2;--color-brand-accent: #f5576c;--gradient-primary: linear-gradient( 135deg, var(--color-brand-primary) 0%, var(--color-brand-secondary) 100% );--gradient-secondary: linear-gradient(135deg, #f093fb 0%, var(--color-brand-accent) 100%);--gradient-tertiary: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);--gradient-accent: linear-gradient(135deg, #fa709a 0%, #fee140 100%);--color-bg-primary: #0f0c29;--color-bg-secondary: #24243e;--color-bg-tertiary: #302b63;--color-bg-overlay: rgba(0, 0, 0, .3);--color-surface-primary: rgba(255, 255, 255, .05);--color-surface-border: rgba(255, 255, 255, .125);--color-text-primary: #ffffff;--color-text-secondary: #a8a8b3;--color-text-accent: var(--color-brand-accent);--color-state-disabled: #6b7280;--color-state-hover: rgba(255, 255, 255, .1);--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-md: 1.125rem;--font-size-lg: 1.25rem;--font-size-xl: 1.5rem;--font-size-2xl: 2rem;--font-size-3xl: 2.5rem;--font-size-4xl: 3.5rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-weight-extrabold: 800;--line-height-tight: 1.25;--line-height-normal: 1.6;--line-height-relaxed: 1.8;--letter-spacing-tight: -.05em;--letter-spacing-normal: 0;--letter-spacing-wide: .05em;--letter-spacing-wider: .1em;--letter-spacing-widest: .2em;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-7: 28px;--space-8: 32px;--space-9: 36px;--space-10: 40px;--space-12: 48px;--space-16: 64px;--size-spinner-desktop: 150px;--size-spinner-mobile: 120px;--size-orb-desktop: 40px;--size-orb-mobile: 30px;--size-button-height: 56px;--size-ad-top-height: 120px;--size-ad-side-width: 120px;--size-ad-side-height: 800px;--container-max-width: 1400px;--container-content-width: 800px;--container-fact-width: min(700px, 100vw);--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .1);--shadow-base: 0 4px 15px 0 rgba(31, 38, 135, .2);--shadow-md: 0 8px 32px 0 rgba(31, 38, 135, .37);--shadow-lg: 0 12px 40px 0 rgba(31, 38, 135, .5);--shadow-xl: 0 20px 50px 0 rgba(31, 38, 135, .6);--shadow-glow: 0 0 30px rgba(102, 126, 234, .5);--shadow-atom: 0 0 60px rgba(102, 126, 234, .8), inset 0 0 30px rgba(245, 87, 108, .3);--shadow-nucleus: 0 0 40px rgba(245, 87, 108, .8), 0 0 80px rgba(102, 126, 234, .4);--radius-sm: 8px;--radius-base: 12px;--radius-md: 16px;--radius-lg: 20px;--radius-xl: 24px;--radius-2xl: 32px;--radius-full: 9999px;--transition-base: all .3s ease;--transition-smooth: all .4s cubic-bezier(.175, .885, .32, 1.275);--transition-bounce: all .5s cubic-bezier(.68, -.55, .265, 1.55);--transition-quantum: all .6s cubic-bezier(.23, 1, .32, 1);--transition-elastic: all .8s cubic-bezier(.68, -.6, .32, 1.6);--blur-sm: 4px;--blur-base: 8px;--blur-md: 16px;--blur-lg: 24px;--z-index-negative: -1;--z-index-base: 0;--z-index-particle: 1;--z-index-glow: 2;--z-index-dropdown: 1000;--z-index-sticky: 1020;--z-index-fixed: 1030;--z-index-modal-backdrop: 1040;--z-index-modal: 1050;--z-index-popover: 1060;--z-index-tooltip: 1070;--animation-duration-fast: .3s;--animation-duration-base: .6s;--animation-duration-slow: 1s;--animation-duration-orbit: 20s;--animation-duration-pulse: 2s;--glow-primary: 0 0 20px rgba(102, 126, 234, .6);--glow-secondary: 0 0 20px rgba(118, 75, 162, .6);--glow-accent: 0 0 20px rgba(245, 87, 108, .6);--glow-intense: 0 0 40px rgba(102, 126, 234, .8), 0 0 60px rgba(245, 87, 108, .4)}h1{font-size:var(--font-size-4xl);font-weight:var(--font-weight-extrabold);background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:var(--space-4);letter-spacing:var(--letter-spacing-tight);line-height:var(--line-height-tight)}.tagline{font-size:var(--font-size-lg);color:var(--color-text-secondary);font-weight:var(--font-weight-normal);letter-spacing:var(--letter-spacing-wide)}p{margin-bottom:var(--space-4);line-height:var(--line-height-relaxed)}@media (max-width: 768px){h1{font-size:var(--font-size-3xl)}.tagline{font-size:var(--font-size-base)}}.container{flex:1;width:100%;max-width:var(--container-max-width);margin:0 auto;padding:var(--space-3) var(--space-5);display:flex;flex-direction:column;align-items:center;gap:var(--space-4);position:relative;z-index:var(--z-index-base);min-height:calc(100vh - 200px)}main{display:flex;flex-direction:column;align-items:center;gap:var(--space-6);min-height:500px;justify-content:flex-start;padding:var(--space-4) 0;position:relative}@media (max-width: 1200px){.container{max-width:var(--container-content-width);padding:var(--space-3) var(--space-4);gap:var(--space-4);min-height:calc(100vh - 150px)}main{min-height:400px}}@media (max-width: 768px){.container{padding:var(--space-2) var(--space-2);gap:var(--space-3);width:100%}main{gap:var(--space-4);padding:var(--space-3) 0;min-height:350px;width:100%}}@media (max-width: 480px){.container{padding:var(--space-2) var(--space-2);gap:var(--space-2)}main{gap:var(--space-3);padding:var(--space-2) 0;min-height:300px}}@media (max-height: 500px) and (min-width: 600px){.container{min-height:calc(100vh - 80px);padding:var(--space-1) var(--space-3);gap:var(--space-2)}main{min-height:calc(100vh - 120px);gap:var(--space-2);padding:var(--space-1) 0;justify-content:center}}.space-background{position:fixed;inset:0;width:100%;height:100%;min-width:100vw;min-height:100vh;overflow:hidden;z-index:-1;background:radial-gradient(ellipse at bottom,#1b2735,#090a0f);pointer-events:none;contain:layout style paint}.stars-layer{position:absolute;width:100%;height:100%;background-repeat:repeat;background-size:1000px 1000px;animation:starsFloat linear infinite;overflow:hidden}.stars-layer-1{background-image:radial-gradient(2px 2px at 20px 30px,#eee,transparent),radial-gradient(2px 2px at 40px 70px,#eee,transparent),radial-gradient(1px 1px at 50px 160px,#eee,transparent),radial-gradient(1px 1px at 130px 40px,#eee,transparent),radial-gradient(2px 2px at 80px 10px,#eee,transparent);background-size:200px 200px;animation-duration:200s;opacity:.5}.stars-layer-2{background-image:radial-gradient(3px 3px at 50px 160px,#ddd,transparent),radial-gradient(2px 2px at 90px 40px,#ddd,transparent),radial-gradient(1px 1px at 130px 160px,#ddd,transparent);background-size:300px 300px;animation-duration:300s;animation-delay:-100s;opacity:.3}.stars-layer-3{background-image:radial-gradient(1px 1px at 10px 10px,#fff,transparent),radial-gradient(1px 1px at 150px 150px,#fff,transparent),radial-gradient(2px 2px at 60px 170px,#fff,transparent),radial-gradient(1px 1px at 175px 180px,#fff,transparent);background-size:400px 400px;animation-duration:400s;animation-delay:-200s;opacity:.8}.twinkling-stars{position:absolute;width:100%;height:100%;overflow:hidden}.star{position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;box-shadow:0 0 4px #fff;animation:twinkle 3s ease-in-out infinite}.star:nth-child(odd){animation-delay:1.5s;animation-duration:4s}.star:nth-child(2n){animation-delay:.5s;animation-duration:2.5s}.galaxy{position:absolute;border-radius:50%;background:radial-gradient(ellipse at center,rgba(138,97,198,.1) 0%,rgba(138,97,198,.05) 30%,transparent 70%);filter:blur(2px);animation:galaxyRotate 120s linear infinite}.galaxy-1{width:300px;height:200px;top:10%;right:-40%;transform:rotate(25deg);background:radial-gradient(ellipse at center,rgba(167,139,250,.15) 0%,rgba(167,139,250,.08) 40%,transparent 70%)}.galaxy-2{width:350px;height:250px;bottom:20%;left:-15%;transform:rotate(-30deg);animation-duration:150s;animation-direction:reverse;background:radial-gradient(ellipse at center,rgba(251,207,232,.1) 0%,rgba(251,207,232,.05) 40%,transparent 70%)}.planet{position:absolute;border-radius:50%;box-shadow:inset -25px -25px 40px #00000080;animation:planetFloat 60s ease-in-out infinite}.planet:before{content:"";position:absolute;border-radius:50%;width:100%;height:100%;background:linear-gradient(135deg,transparent 30%,rgba(255,255,255,.1) 70%)}.planet-1{width:150px;height:150px;top:20%;left:10%;background:linear-gradient(135deg,#667eea,#764ba2);opacity:.3;animation-duration:80s}.planet-2{width:80px;height:80px;top:60%;right:15%;background:linear-gradient(135deg,#f093fb,#f5576c);opacity:.25;animation-duration:100s;animation-delay:-30s}.planet-3{width:120px;height:120px;bottom:10%;left:30%;background:linear-gradient(135deg,#4facfe,#00f2fe);opacity:.2;animation-duration:120s;animation-delay:-60s}.asteroid{position:absolute;width:4px;height:4px;background:#ccc;border-radius:50%;opacity:.6;animation:asteroidMove linear infinite}.asteroid:nth-child(1){top:10%;animation-duration:15s}.asteroid:nth-child(2){top:30%;animation-duration:20s;animation-delay:-5s}.asteroid:nth-child(3){top:50%;animation-duration:25s;animation-delay:-10s}.asteroid:nth-child(4){top:70%;animation-duration:18s;animation-delay:-7s}.asteroid:nth-child(5){top:90%;animation-duration:22s;animation-delay:-15s}.nebula{position:absolute;width:100%;height:100%;top:0;left:0;opacity:.05;background:radial-gradient(ellipse at top left,rgba(188,148,252,.2),transparent 50%),radial-gradient(ellipse at bottom right,rgba(252,148,200,.2),transparent 50%),radial-gradient(ellipse at center,rgba(148,200,252,.1),transparent 70%);animation:nebulaPulse 30s ease-in-out infinite;overflow:hidden}.shooting-star{position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;animation:shootingStar 3s linear infinite;opacity:0}.shooting-star:before{content:"";position:absolute;top:0;left:0;width:100px;height:2px;background:linear-gradient(90deg,white,transparent);transform:translate(-100%)}.shooting-star:nth-child(1){top:20%;left:10%;animation-delay:0s}.shooting-star:nth-child(2){top:40%;right:10%;animation-delay:1.5s}.shooting-star:nth-child(3){top:60%;left:20%;animation-delay:3s}@keyframes starsFloat{0%{transform:translateY(0) translate(0)}to{transform:translateY(-1000px) translate(-1000px)}}@keyframes twinkle{0%,to{opacity:.3;transform:scale(1)}50%{opacity:1;transform:scale(1.5)}}@keyframes galaxyRotate{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.1)}to{transform:rotate(360deg) scale(1)}}@keyframes planetFloat{0%,to{transform:translateY(0) translate(0) rotate(0)}25%{transform:translateY(-30px) translate(20px) rotate(90deg)}50%{transform:translateY(20px) translate(-30px) rotate(180deg)}75%{transform:translateY(30px) translate(10px) rotate(270deg)}}@keyframes asteroidMove{0%{transform:translate(-50px) translateY(0) rotate(0)}to{transform:translate(calc(100vw + 50px)) translateY(30px) rotate(360deg)}}@keyframes nebulaPulse{0%,to{opacity:.05;transform:scale(1)}50%{opacity:.08;transform:scale(1.05)}}@keyframes shootingStar{0%{opacity:0;transform:translate(0) translateY(0) rotate(-45deg)}5%{opacity:1}to{opacity:0;transform:translate(300px) translateY(300px) rotate(-45deg)}}@media (max-width: 768px){.space-background{overflow:hidden!important;max-width:100vw!important;width:100vw!important}.galaxy-1,.galaxy-2,.nebula,.star{display:none!important}.twinkling-stars{opacity:.3!important}.planet-1{width:40px;height:40px;left:10%;top:30%}.planet-2{width:30px;height:30px;right:15%;top:70%}.planet-3{width:35px;height:35px;left:60%;bottom:20%}.stars-layer{display:block!important;max-width:100%!important;overflow:hidden!important;background-size:400px 400px!important}}.space-background *{will-change:transform,opacity;backface-visibility:hidden}header{text-align:center;margin-bottom:var(--space-4);width:100%;animation:fadeInDown 1s ease-out;padding-top:6rem}.header-content{display:flex;align-items:center;justify-content:center;gap:20px}.site-logo{width:80px;height:80px;filter:drop-shadow(0 0 20px rgba(102,126,234,.5));animation:logoPulse 3s ease-in-out infinite}.header-text{text-align:left}.header-text h1{margin:0;font-size:2.5rem;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header-text .tagline{margin:.5rem 0 0;font-size:1.1rem;color:#94a3b8}@keyframes logoPulse{0%,to{transform:scale(1);filter:drop-shadow(0 0 20px rgba(102,126,234,.5))}50%{transform:scale(1.05);filter:drop-shadow(0 0 30px rgba(102,126,234,.8))}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 1200px){header{grid-column:1;margin-bottom:var(--space-3)}}@media (max-width: 768px){header{margin-bottom:var(--space-2);padding-top:4rem}.header-content{flex-direction:row;gap:15px}.site-logo{width:50px;height:50px;flex-shrink:0}.header-text{text-align:left}.header-text h1{font-size:1.5rem}.header-text .tagline{font-size:.9rem}}@media (max-width: 480px){header{margin-bottom:var(--space-1);padding-top:3rem}.header-content{gap:10px;flex-direction:row}.site-logo{width:40px;height:40px;flex-shrink:0}.header-text h1{font-size:1.3rem}.header-text .tagline{font-size:.8rem}}footer{background:var(--color-bg-overlay);-webkit-backdrop-filter:blur(var(--blur-base));backdrop-filter:blur(var(--blur-base));color:var(--color-text-secondary);text-align:center;padding:var(--space-3) var(--space-4);margin-top:auto;border-top:1px solid var(--color-surface-border);flex-shrink:0;width:100%;position:relative;z-index:1}footer p{font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-wide);margin-bottom:0}.roll-button{background:linear-gradient(135deg,rgba(255,255,255,.08) 0%,transparent 50%,rgba(255,255,255,.08) 100%),linear-gradient(135deg,#667eeab3,#764ba2b3);color:var(--color-text-primary);border:2px solid transparent;padding:var(--space-3) var(--space-8);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);border-radius:var(--radius-full);cursor:pointer;transition:var(--transition-smooth);box-shadow:var(--shadow-base),inset 0 2px 4px #fff3,inset 0 -2px 4px #0003,0 0 20px #667eea4d;-webkit-backdrop-filter:blur(var(--blur-sm));backdrop-filter:blur(var(--blur-sm));text-transform:uppercase;letter-spacing:var(--letter-spacing-widest);position:relative;overflow:hidden;min-height:44px;transform-style:preserve-3d;text-shadow:0 2px 4px rgba(0,0,0,.3);touch-action:manipulation;-webkit-tap-highlight-color:transparent}.roll-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s;transform:skew(-20deg)}.roll-button:after{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:radial-gradient(circle,rgba(255,255,255,.8),transparent);transform:translate(-50%,-50%);transition:width .3s,height .3s;border-radius:50%;opacity:0}.roll-button:hover:before{left:100%}.roll-button:hover:after{width:100px;height:100px;opacity:.3}.roll-button:hover{transform:translateY(-3px) scale(1.05);box-shadow:var(--shadow-lg),0 0 30px #667eea99,inset 0 0 20px #ffffff1a;border-color:#ffffff4d;background:linear-gradient(135deg,rgba(255,255,255,.2) 0%,transparent 50%,rgba(255,255,255,.2) 100%),var(--gradient-primary)}.roll-button:active{transform:translateY(-1px) scale(1.02);box-shadow:var(--shadow-base),0 0 20px #667eeacc,inset 0 0 30px #0003}@keyframes buttonPulse{0%,to{box-shadow:var(--shadow-base),0 0 20px #667eea4d}50%{box-shadow:var(--shadow-base),0 0 30px #667eea80}}.roll-button{animation:buttonPulse 3s ease-in-out infinite}.roll-button:hover{animation:none}.roll-button:disabled{background:linear-gradient(135deg,var(--color-state-disabled) 0%,var(--color-state-disabled) 100%);cursor:not-allowed;transform:none;opacity:.6}.loading{display:inline-block;width:20px;height:20px;position:relative}.loading:before,.loading:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border:2px solid transparent;border-radius:50%;border-top-color:var(--color-text-primary);animation:spin 1s ease-in-out infinite}.loading:after{animation-delay:.5s;border-top-color:var(--color-brand-accent)}.roll-button.is-loading{pointer-events:none;position:relative}.roll-button.is-loading:before{content:"";position:absolute;inset:0;background:#0000004d;border-radius:var(--radius-full)}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 768px){.roll-button{padding:var(--space-3) var(--space-6);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-wider);min-height:40px}}@media (max-width: 768px){body{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}input,textarea,select{font-size:max(16px,1em)}button,[role=button],a[href],input[type=button],input[type=submit],.spinner,.roll-button,.emoji-btn,.category-button{touch-action:manipulation}}@media (max-width: 768px){.spinner,.quantum-glow,.emoji-btn,.roll-button{transform:translateZ(0);backface-visibility:hidden}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}}@media (max-width: 768px){.touch-ripple{position:relative;overflow:hidden}.touch-ripple:after{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff4d;transform:translate(-50%,-50%);transition:width .3s ease,height .3s ease;pointer-events:none}.touch-ripple:active:after{width:80px;height:80px}}@media (max-width: 768px){button:focus-visible,[role=button]:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--color-primary, #007bff);outline-offset:2px}@media (prefers-contrast: high){button,[role=button],.spinner,.roll-button{border:2px solid currentColor}}}@media (max-width: 768px){.mobile-only{display:block!important}.mobile-hidden{display:none!important}.mobile-full-width{width:100%!important}.mobile-text-center{text-align:center!important}}@media (min-width: 769px){.mobile-only,.desktop-hidden{display:none!important}}.fact-container{width:100%;max-width:800px;opacity:0;transform:translateY(30px) scale(.95);transition:var(--transition-quantum);position:relative;background:transparent;box-sizing:border-box;overflow:hidden}.fact-container.show{opacity:1;transform:translateY(0) scale(1)}.fact-container:before{content:"";position:absolute;inset:-100px;background:radial-gradient(circle at center,rgba(102,126,234,.1) 0%,transparent 50%);opacity:0;transition:opacity var(--transition-quantum);pointer-events:none}.fact-container.show:before{opacity:1}.fact-box{width:100%;background:linear-gradient(135deg,#ffffff03,#ffffff05,#ffffff03),#0f0c2933;backdrop-filter:blur(var(--blur-lg)) saturate(120%);-webkit-backdrop-filter:blur(var(--blur-lg)) saturate(120%);border:1px solid rgba(255,255,255,.05);padding:0;border-radius:var(--radius-lg);box-shadow:var(--shadow-md),inset 0 1px #ffffff1a,inset 0 -1px #0000001a;text-align:center;transition:var(--transition-smooth);position:relative;overflow:hidden;transform-style:preserve-3d;min-height:220px;max-height:320px;display:flex;flex-direction:column;justify-content:flex-start}.fact-box:after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.05) 50%,transparent 60%);background-size:200% 200%;background-position:-100% 0;transition:background-position var(--transition-smooth);border-radius:var(--radius-lg);pointer-events:none}#factText{font-size:var(--font-size-lg);line-height:1.6;color:var(--color-text-primary);margin:var(--space-3) 0;font-weight:var(--font-weight-normal);position:relative;z-index:1;text-shadow:0 2px 4px rgba(0,0,0,.3);transition:all var(--transition-base);flex:1;display:flex;align-items:center;justify-content:center;text-align:center}.fact-box:hover #factText{text-shadow:0 2px 4px rgba(0,0,0,.3),0 0 20px rgba(102,126,234,.3)}.fact-category{font-size:var(--font-size-sm);color:var(--color-text-primary);font-weight:var(--font-weight-medium);text-transform:capitalize;letter-spacing:var(--letter-spacing-wide);display:flex;align-items:center;justify-content:center;padding:0 var(--space-4);background:linear-gradient(135deg,#667eea1f,#667eea0d);border-radius:var(--radius-md);border:1px solid rgba(102,126,234,.25);position:relative;overflow:hidden;transition:all var(--transition-base);box-shadow:0 2px 8px #667eea26,inset 0 1px #ffffff14;margin:0;height:100%;flex:1 1 auto;min-width:0;backdrop-filter:blur(var(--blur-sm));-webkit-backdrop-filter:blur(var(--blur-sm));gap:var(--space-2)}.category-emoji{font-size:18px;margin-right:var(--space-2);display:inline-block;vertical-align:middle;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));transition:transform var(--transition-base)}.fact-category:hover .category-emoji{transform:scale(1.1) rotate(5deg)}.fact-category:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);transition:left var(--transition-smooth)}.fact-box:hover .fact-category:after{left:100%}.fact-category:hover{background:linear-gradient(135deg,#667eea2e,#667eea14);box-shadow:0 4px 12px #667eea33,inset 0 1px #ffffff1a;border-color:#667eea59}.clear-filters-btn{display:none;align-items:center;justify-content:center;padding:0 var(--space-3);background:linear-gradient(135deg,#ef444426,#ef444414);border:1px solid rgba(239,68,68,.3);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;height:100%;gap:var(--space-2);white-space:nowrap;min-width:120px;box-shadow:0 2px 8px #ef444426,inset 0 1px #ffffff1a;text-shadow:0 1px 2px rgba(0,0,0,.2)}.clear-filters-btn.show{display:flex}.clear-filters-btn:not(:disabled):hover{background:linear-gradient(135deg,#ef444438,#ef44441f);border-color:#ef444473;box-shadow:0 6px 20px #ef444440,0 2px 8px #ef444433,inset 0 1px #ffffff26;transform:translateY(-1px) scale(1.01)}.clear-filters-btn:not(:disabled):active{transform:translateY(0) scale(.99);box-shadow:0 2px 8px #ef444433,inset 0 2px 4px #0000001a}.clear-filters-btn .clear-icon{font-size:16px;line-height:1;margin-right:2px;transition:transform var(--transition-base);filter:drop-shadow(0 1px 2px rgba(0,0,0,.2))}.clear-filters-btn:hover .clear-icon{transform:rotate(180deg)}.clear-filters-btn .clear-text{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);letter-spacing:.02em}.fact-top-controls{display:flex;justify-content:space-between;align-items:stretch;margin-bottom:var(--space-4);gap:6px;height:48px;position:relative;background:linear-gradient(135deg,#ffffff08,#ffffff04);backdrop-filter:blur(var(--blur-md)) saturate(130%);-webkit-backdrop-filter:blur(var(--blur-md)) saturate(130%);border-radius:var(--radius-lg);padding:6px;border:1px solid rgba(255,255,255,.08);box-shadow:0 4px 16px #00000026,0 1px 3px #0000001a,inset 0 1px #ffffff0f}.fact-top-controls button{position:relative;overflow:hidden;transition:all var(--transition-base) cubic-bezier(.25,.46,.45,.94);transform-style:preserve-3d;transform:translateZ(0)}.fact-top-controls button:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(255,255,255,.1) 0%,transparent 70%);opacity:0;transition:opacity var(--transition-base);pointer-events:none}.fact-top-controls button:not(:disabled):hover:before{opacity:1}.category-selector{position:relative;z-index:100;flex:0 0 auto;height:100%;display:flex;align-items:center;gap:var(--space-2)}.category-button{background:linear-gradient(135deg,#667eea26,#667eea14);border:1px solid rgba(102,126,234,.3);border-radius:var(--radius-md);padding:0 var(--space-4);color:var(--color-text-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--space-2);height:100%;min-width:140px;white-space:nowrap;box-shadow:0 2px 8px #667eea26,inset 0 1px #ffffff1a;text-shadow:0 1px 2px rgba(0,0,0,.2);letter-spacing:.02em}.category-button:after{content:"▼";font-size:var(--font-size-xs);transition:transform var(--transition-base);margin-left:var(--space-1);opacity:.7}.category-button.active:after{transform:rotate(180deg)}.category-button:not(:disabled):hover{background:linear-gradient(135deg,#667eea38,#667eea1f);border-color:#667eea73;box-shadow:0 6px 20px #667eea40,0 2px 8px #667eea33,inset 0 1px #ffffff26;transform:translateY(-1px) scale(1.01)}.category-button:not(:disabled):active{transform:translateY(0) scale(.99);box-shadow:0 2px 8px #667eea33,inset 0 2px 4px #0000001a}.category-dropdown{position:absolute;top:calc(100% + var(--space-2));left:0;right:0;background:linear-gradient(135deg,#0f0c29f2,#0f0c29e6);backdrop-filter:blur(var(--blur-lg)) saturate(120%);-webkit-backdrop-filter:blur(var(--blur-lg)) saturate(120%);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-md);box-shadow:0 8px 32px #0000004d,0 20px 40px #667eea1a;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all var(--transition-base);max-height:300px;overflow-y:auto;z-index:1000}.category-dropdown.show{opacity:1;visibility:visible;transform:translateY(0)}.category-options{padding:var(--space-2)}.category-option{background:transparent;border:none;padding:var(--space-3) var(--space-4);color:var(--color-text-primary);font-size:var(--font-size-sm);cursor:pointer;transition:all var(--transition-base);border-radius:var(--radius-sm);display:flex;align-items:center;gap:var(--space-2);width:100%;text-align:left;position:relative}.category-option:before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.6;transition:all var(--transition-base)}.category-option:hover{background:linear-gradient(135deg,#667eea26,#667eea0d);color:var(--color-text-accent);transform:translate(5px)}.category-option:hover:before{opacity:1;transform:scale(1.2)}.category-option.selected{background:linear-gradient(135deg,#667eea40,#667eea26);color:var(--color-text-accent);border:1px solid rgba(102,126,234,.3)}.category-option.selected:before{background:var(--color-text-accent);opacity:1}.category-icon{font-size:1.2em;margin-right:var(--space-2);display:inline-block;width:20px;text-align:center}.category-dropdown::-webkit-scrollbar{width:6px}.category-dropdown::-webkit-scrollbar-track{background:#ffffff0d;border-radius:var(--radius-sm)}.category-dropdown::-webkit-scrollbar-thumb{background:#667eea4d;border-radius:var(--radius-sm)}.category-dropdown::-webkit-scrollbar-thumb:hover{background:#667eea80}.fact-content{padding:7px 10px;flex:1;display:flex;flex-direction:column}#factText{margin:var(--space-3) 0;flex:1;min-height:60px;display:flex;align-items:center;justify-content:center;text-align:center}.emoji-reactions{display:flex;justify-content:center;align-items:center;gap:var(--space-2);height:38px;padding:0 var(--space-4);background:linear-gradient(135deg,#0000000d,#00000005);border-top:1px solid rgba(255,255,255,.05);border-radius:0 0 var(--radius-lg) var(--radius-lg);backdrop-filter:blur(var(--blur-sm));-webkit-backdrop-filter:blur(var(--blur-sm));opacity:1;transform:translateY(0);transition:opacity var(--transition-base);z-index:10;margin-top:auto;flex-shrink:0}.fact-container:not(.show) .emoji-reactions{opacity:0;transform:translateY(10px)}.fact-navigation{display:flex;align-items:center;justify-content:center;gap:var(--space-2);opacity:1;transition:all var(--transition-base);margin-left:auto;flex:0 0 auto}.nav-btn{width:32px;height:32px;border:none;background:linear-gradient(135deg,#ffffff14,#ffffff0a);backdrop-filter:blur(var(--blur-sm)) saturate(120%);-webkit-backdrop-filter:blur(var(--blur-sm)) saturate(120%);border-radius:var(--radius-md);cursor:pointer;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.12);box-shadow:0 2px 8px #0000001a,inset 0 1px #ffffff14}.nav-btn:not(:disabled):hover{background:linear-gradient(135deg,#667eea33,#667eea1a);border-color:#667eea59;transform:translateY(-1px) scale(1.05);box-shadow:0 6px 16px #667eea4d,0 2px 8px #667eea33,inset 0 1px #ffffff26}.nav-btn:not(:disabled):active{transform:translateY(0) scale(.98);box-shadow:0 2px 8px #667eea33,inset 0 2px 4px #0000001a}.nav-btn:disabled{opacity:.3;cursor:not-allowed;background:#ffffff05;border-color:#ffffff0d;box-shadow:none}.nav-btn:disabled .nav-icon{opacity:.4;filter:grayscale(1)}.nav-icon{font-size:18px;line-height:1;transition:all var(--transition-base) cubic-bezier(.25,.46,.45,.94);filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));position:relative;z-index:1;display:flex;align-items:center;justify-content:center;color:var(--color-text-primary)}.nav-btn:not(:disabled):hover .nav-icon{filter:drop-shadow(0 2px 6px rgba(102,126,234,.4))}.nav-btn.prev-btn:not(:disabled):hover .nav-icon{transform:translate(-3px) scale(1.1)}.nav-btn.next-btn:not(:disabled):hover .nav-icon{transform:translate(3px) scale(1.1)}.fact-top-controls button:focus{outline:2px solid rgba(102,126,234,.5);outline-offset:2px}.fact-top-controls button:focus:not(:focus-visible){outline:none}.emoji-btn{position:relative;width:30px;height:30px;border:none;background:transparent;border-radius:var(--radius-sm);cursor:pointer;transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease;display:flex;align-items:center;justify-content:center;overflow:visible;-webkit-tap-highlight-color:transparent}.reaction-count{display:none!important;visibility:hidden!important;opacity:0!important;position:absolute!important;width:0!important;height:0!important;overflow:hidden!important}.reaction-tooltip{position:fixed;background:linear-gradient(135deg,#0f0c29fa,#0f0c29f2);backdrop-filter:blur(var(--blur-lg));-webkit-backdrop-filter:blur(var(--blur-lg));color:var(--color-text-primary);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);box-shadow:0 4px 16px #0000004d,0 0 0 1px #ffffff1a;z-index:1000;white-space:nowrap;opacity:0;transform:translateY(5px);animation:tooltip-fade-in .2s ease-out forwards;pointer-events:none}@keyframes tooltip-fade-in{to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.emoji-btn{width:34px;height:34px;min-width:34px;min-height:34px}.emoji-btn .emoji{font-size:18px}.emoji-reactions{padding:0 var(--space-3);gap:6px;height:38px}.emoji-btn.selected:after{width:24px;height:3px;opacity:1}.emoji-btn.selected .emoji{transform:scale(1.15)}}.emoji-btn:hover{transform:scale(1.1);background:#ffffff14}.emoji-btn:active{transform:scale(.95)}.emoji-btn.selected{background:linear-gradient(135deg,#667eea26,#667eea14);position:relative}.emoji-btn.selected:after{content:"";position:absolute;bottom:-2px;left:50%;transform:translate(-50%);width:20px;height:2px;background:linear-gradient(90deg,transparent,rgba(102,126,234,.8),transparent);border-radius:1px;opacity:.8;transition:all .3s ease}.emoji-btn:focus{outline:2px solid rgba(102,126,234,.5);outline-offset:2px}.emoji-btn:focus:not(:focus-visible){outline:none}.emoji-btn .emoji{font-size:18px;line-height:1;display:block;transition:transform .2s ease;z-index:1;position:relative;-webkit-user-select:none;user-select:none}.emoji-btn:hover .emoji{transform:scale(1.05)}.emoji-btn.selected .emoji{transform:scale(1.1);filter:brightness(1.2) drop-shadow(0 1px 3px rgba(102,126,234,.4))}.emoji-btn[data-type=like]:hover{background:#22c55e1a}.emoji-btn[data-type=like].selected{background:linear-gradient(135deg,#22c55e26,#22c55e14)}.emoji-btn[data-type=like].selected:after{background:linear-gradient(90deg,transparent,rgba(34,197,94,.8),transparent)}.emoji-btn[data-type=love]:hover{background:#ef44441a}.emoji-btn[data-type=love].selected{background:linear-gradient(135deg,#ef444426,#ef444414)}.emoji-btn[data-type=love].selected:after{background:linear-gradient(90deg,transparent,rgba(239,68,68,.8),transparent)}.emoji-btn[data-type=wow]:hover{background:#f59e0b1a}.emoji-btn[data-type=wow].selected{background:linear-gradient(135deg,#f59e0b26,#f59e0b14)}.emoji-btn[data-type=wow].selected:after{background:linear-gradient(90deg,transparent,rgba(245,158,11,.8),transparent)}.emoji-btn[data-type=dislike]:hover{background:#6b72801a}.emoji-btn[data-type=dislike].selected{background:linear-gradient(135deg,#6b728026,#6b728014)}.emoji-btn[data-type=dislike].selected:after{background:linear-gradient(90deg,transparent,rgba(107,114,128,.8),transparent)}@media (min-width: 769px){.fact-container{min-width:800px}}@media (max-width: 768px){.fact-container{max-width:100%;width:100%;margin:0 auto;box-sizing:border-box;overflow:hidden}#factText{font-size:var(--font-size-base);line-height:1.5}.fact-box{margin:0;width:100%;border-radius:var(--radius-md);position:relative;min-height:100px;display:flex;flex-direction:column}.fact-content{padding:6px}#factText{margin:6px 0 0;line-height:1.6}.fact-top-controls{flex-direction:row;flex-wrap:wrap;gap:var(--space-2);height:auto;padding:var(--space-2);align-items:center;background:linear-gradient(135deg,#ffffff08,#ffffff04);backdrop-filter:blur(var(--blur-md)) saturate(130%);-webkit-backdrop-filter:blur(var(--blur-md)) saturate(130%);border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.08);box-shadow:0 4px 16px #00000026,0 1px 3px #0000001a,inset 0 1px #ffffff0f}.category-selector{order:0;flex:0 0 auto;height:40px;justify-content:flex-start;min-width:0;display:flex;gap:var(--space-1)}.category-button{flex:1;min-width:0;font-size:var(--font-size-xs);padding:0 var(--space-2);min-width:100px;max-width:140px;background:linear-gradient(135deg,#667eea26,#667eea14)!important;border:1px solid rgba(102,126,234,.3)!important;box-shadow:0 2px 8px #667eea26,inset 0 1px #ffffff1a!important;color:var(--color-text-primary)!important}.clear-filters-btn{min-width:100px;flex:0 0 auto;background:linear-gradient(135deg,#ef444426,#ef444414)!important;border:1px solid rgba(239,68,68,.3)!important;box-shadow:0 2px 8px #ef444426,inset 0 1px #ffffff1a!important;color:var(--color-text-primary)!important}.clear-filters-btn .clear-text{display:none}.fact-navigation{justify-content:center;flex:0 0 auto;margin-left:0;gap:var(--space-2);order:1}.nav-btn{width:42px;min-width:42px;height:42px;background:linear-gradient(135deg,#ffffff14,#ffffff0a)!important;border:1px solid rgba(255,255,255,.12)!important;box-shadow:0 2px 8px #0000001a,inset 0 1px #ffffff14!important}.nav-icon{font-size:18px;color:var(--color-text-primary)!important;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))!important}.fact-top-controls button:active{transition:transform .1s ease}.fact-category{order:2;flex:1 1 auto;text-align:center;margin-bottom:var(--space-1);margin-top:var(--space-1);height:42px;display:flex;align-items:center;justify-content:center;padding:0 var(--space-3);font-size:var(--font-size-sm);background:linear-gradient(135deg,#667eea1f,#667eea0f);border-radius:var(--radius-md);border:1px solid rgba(102,126,234,.2);box-shadow:0 2px 8px #667eea1a,inset 0 1px #ffffff14;flex-basis:100%;flex-shrink:0}}.spinner-container{display:flex;flex-direction:column;align-items:center;gap:var(--space-6);perspective:1200px;position:relative;margin-bottom:var(--space-1);background:transparent;border:none;box-shadow:none;overflow:visible;padding:var(--space-8)}.spinner{width:var(--size-spinner-desktop);height:var(--size-spinner-desktop);position:relative;cursor:pointer;transition:all .5s cubic-bezier(.175,.885,.32,1.275);transform-style:preserve-3d;filter:drop-shadow(0 0 30px rgba(102,126,234,.5));background:transparent;z-index:1;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.spinner:hover{transform:scale(1.15) rotateX(25deg) rotateY(-10deg);filter:drop-shadow(0 0 40px rgba(102,126,234,.8))}.spinner-inner{width:100%;height:100%;position:relative;transform-style:preserve-3d;background:transparent}.nucleus{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50px;height:50px;background:radial-gradient(circle at 30% 30%,#ffffff,var(--color-brand-primary)),radial-gradient(circle at 70% 70%,rgba(102,126,234,.8),transparent);border-radius:50%;box-shadow:0 0 60px #667eeacc,inset 0 0 20px #ffffff80,inset -5px -5px 15px #667eea66,0 0 100px #667eea66;animation:nucleusPulse 2s ease-in-out infinite,nucleusGlow 3s ease-in-out infinite alternate;z-index:10;position:relative;overflow:visible}.nucleus:before{content:"";position:absolute;top:20%;left:20%;width:30%;height:30%;background:radial-gradient(circle,rgba(255,255,255,.9),transparent);border-radius:50%;filter:blur(2px);animation:innerGlow 2s ease-in-out infinite}.nucleus:after{content:"";position:absolute;inset:-10px;border:2px solid rgba(102,126,234,.2);border-radius:50%;opacity:.5}.orbit-path{position:absolute;top:50%;left:50%;width:100%;height:100%;border:2px solid transparent;border-radius:50%;transform-style:preserve-3d;background:linear-gradient(90deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.05) 25%,transparent 50%,rgba(255,255,255,.05) 75%,rgba(255,255,255,.1) 100%);background-size:200% 100%;animation:orbitGradient 4s linear infinite}.orbit-path:nth-child(2){transform:translate(-50%,-50%) rotateX(60deg) rotateY(0);animation:orbitRotate1 8s linear infinite,orbitGradient 4s linear infinite;border-color:#f093fb33}.orbit-path:nth-child(3){transform:translate(-50%,-50%) rotateY(60deg) rotate(0);animation:orbitRotate2 10s linear infinite reverse,orbitGradient 4s linear infinite 1.33s;border-color:#4facfe33}.orbit-path:nth-child(4){transform:translate(-50%,-50%) rotate(60deg) rotateX(0);animation:orbitRotate3 12s linear infinite,orbitGradient 4s linear infinite 2.66s;border-color:#fa709a33}.electron{position:absolute;width:12px;height:12px;border-radius:50%;top:-6px;left:calc(50% - 6px);background:radial-gradient(circle at 30% 30%,#ffffff,var(--color-brand-accent));box-shadow:0 0 20px currentColor,0 0 40px currentColor,inset 0 0 5px #fffc;position:relative}.electron:before{content:"";position:absolute;width:100%;height:100%;background:inherit;border-radius:50%;opacity:.6;animation:electronTrail .3s linear infinite}.electron:after{content:"";position:absolute;width:150%;height:150%;top:-25%;left:-25%;background:radial-gradient(circle,currentColor,transparent);opacity:.3;border-radius:50%;animation:electronPulse 1.5s ease-in-out infinite}.orbit-path:nth-child(2) .electron{background:radial-gradient(circle at 30% 30%,#fff,#f093fb);box-shadow:0 0 20px #f093fbcc,0 0 40px #f093fb66;animation:electronGlow 1.5s ease-in-out infinite}.orbit-path:nth-child(3) .electron{background:radial-gradient(circle at 30% 30%,#fff,#4facfe);box-shadow:0 0 20px #4facfecc,0 0 40px #4facfe66;animation:electronGlow 1.5s ease-in-out infinite .5s}.orbit-path:nth-child(4) .electron{background:radial-gradient(circle at 30% 30%,#fff,#fa709a);box-shadow:0 0 20px #fa709acc,0 0 40px #fa709a66;animation:electronGlow 1.5s ease-in-out infinite 1s}.spinner.spinning .nucleus{animation:nucleusSpin .8s cubic-bezier(.68,-.55,.265,1.55),nucleusSpinGlow .8s ease-out}.spinner.spinning .orbit-path{animation-duration:.8s;animation-timing-function:cubic-bezier(.68,-.55,.265,1.55)}.spinner.spinning .electron{animation:electronSpin .8s cubic-bezier(.68,-.55,.265,1.55)}.spinner.spinning .energy-ring{animation:energyBurst .8s ease-out}@keyframes nucleusSpinGlow{0%{filter:brightness(1) blur(0)}50%{filter:brightness(1.5) blur(1px)}to{filter:brightness(1) blur(0)}}@keyframes electronSpin{0%{transform:scale(1)}50%{transform:scale(2);box-shadow:0 0 30px currentColor,0 0 60px currentColor}to{transform:scale(1)}}@keyframes energyBurst{0%{transform:translate(-50%,-50%) scale(1);opacity:0}50%{opacity:.6}to{transform:translate(-50%,-50%) scale(5);opacity:0}}.energy-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;border:2px solid rgba(102,126,234,.3);border-radius:50%;animation:energyExpand 3s ease-out infinite;pointer-events:none;z-index:-1}.energy-ring:nth-child(6){animation-delay:1s}.energy-ring:nth-child(7){animation-delay:2s}@keyframes orbitRotate1{0%{transform:translate(-50%,-50%) rotateX(60deg) rotateY(0) rotate(0)}to{transform:translate(-50%,-50%) rotateX(60deg) rotateY(0) rotate(360deg)}}@keyframes orbitRotate2{0%{transform:translate(-50%,-50%) rotateY(60deg) rotate(0) rotateX(0)}to{transform:translate(-50%,-50%) rotateY(60deg) rotate(360deg) rotateX(0)}}@keyframes orbitRotate3{0%{transform:translate(-50%,-50%) rotate(60deg) rotateX(0) rotateY(0)}to{transform:translate(-50%,-50%) rotate(60deg) rotateX(360deg) rotateY(0)}}@keyframes orbitGradient{0%{background-position:0% 50%}to{background-position:200% 50%}}@keyframes nucleusPulse{0%,to{transform:translate(-50%,-50%) scale(1);filter:brightness(1)}50%{transform:translate(-50%,-50%) scale(1.1);filter:brightness(1.2)}}@keyframes nucleusGlow{0%{box-shadow:0 0 60px #667eeacc,inset 0 0 20px #ffffff80,0 0 100px #667eea66}to{box-shadow:0 0 80px #667eea,inset 0 0 30px #ffffffb3,0 0 120px #667eea99}}@keyframes innerGlow{0%,to{transform:scale(1);opacity:.9}50%{transform:scale(1.3);opacity:.6}}@keyframes nucleusRing{0%,to{transform:scale(1);opacity:.5}50%{transform:scale(1.2);opacity:.2}}@keyframes nucleusSpin{0%{transform:translate(-50%,-50%) scale(1) rotate(0)}50%{transform:translate(-50%,-50%) scale(1.3) rotate(360deg);box-shadow:0 0 100px #667eea,inset 0 0 40px #ffffffe6,0 0 150px #667eeacc}to{transform:translate(-50%,-50%) scale(1) rotate(720deg)}}@keyframes electronGlow{0%,to{transform:scale(1);opacity:.8}50%{transform:scale(1.5);opacity:1}}@keyframes electronTrail{0%{transform:scale(1) translate(0);opacity:.6}to{transform:scale(.5) translate(-10px);opacity:0}}@keyframes electronPulse{0%,to{transform:scale(1);opacity:.3}50%{transform:scale(1.5);opacity:.1}}@keyframes energyExpand{0%{transform:translate(-50%,-50%) scale(1);opacity:.4;border-color:#667eea66}to{transform:translate(-50%,-50%) scale(4);opacity:0;border-color:#667eea00}}.spinner.visible{animation:fadeIn .5s ease-out}.energy-ring.burst{border-width:3px;border-color:#667eeacc;animation:energyBurst .6s ease-out forwards}.spinner,.spinner-inner,.orbit-path,.electron,.nucleus,.energy-ring{will-change:transform,opacity;backface-visibility:hidden;-webkit-font-smoothing:antialiased}.spinner:focus{outline:3px solid var(--color-brand-primary);outline-offset:5px}.spinner:active,.roll-button:active{transform:scale(.95);transition:transform .1s ease}@media (max-width: 768px){.spinner,.roll-button{min-height:44px;min-width:44px;touch-action:manipulation}}@keyframes fadeIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@media (max-width: 768px){.spinner{width:var(--size-spinner-mobile);height:var(--size-spinner-mobile)}.nucleus{width:40px;height:40px}.electron{width:10px;height:10px;top:-5px;left:calc(50% - 5px)}.energy-ring{width:60px;height:60px}}@media (max-height: 500px) and (min-width: 600px){.spinner-container{gap:var(--space-2);padding:var(--space-4);margin-bottom:0}.spinner{width:calc(var(--size-spinner-mobile) * .8);height:calc(var(--size-spinner-mobile) * .8)}}.category-selection-container{width:100%;height:100%;display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-2) var(--space-3) var(--space-3);position:relative;overflow:hidden}.selection-header-wrapper{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-3);flex-shrink:0;gap:var(--space-4)}.selection-header{flex:1;text-align:left}.selection-header h3{font-size:var(--font-size-xl);color:var(--color-text-primary);margin:0;font-weight:var(--font-weight-bold);text-shadow:0 2px 4px rgba(0,0,0,.3);display:flex;align-items:center;gap:var(--space-2)}.selection-header p{font-size:var(--font-size-sm);color:var(--color-text-accent);margin:var(--space-1) 0 0 0;opacity:.8}.category-grid{flex:1;margin:var(--space-1) 0;border-radius:var(--radius-lg);background:linear-gradient(135deg,#667eea0d,#667eea05,#f5576c0d);border:1px solid rgba(255,255,255,.1);overflow-y:auto;position:relative;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--space-2);padding:var(--space-3);max-height:400px}.category-grid::-webkit-scrollbar{width:6px}.category-grid::-webkit-scrollbar-track{background:#ffffff0d;border-radius:var(--radius-sm)}.category-grid::-webkit-scrollbar-thumb{background:#667eea4d;border-radius:var(--radius-sm)}.category-grid::-webkit-scrollbar-thumb:hover{background:#667eea80}.category-button-item{width:100%;min-height:60px;background:linear-gradient(135deg,#ffffff1a,#ffffff0d);backdrop-filter:blur(var(--blur-md));-webkit-backdrop-filter:blur(var(--blur-md));border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);display:flex;align-items:center;justify-content:flex-start;gap:var(--space-2);position:relative;overflow:hidden;cursor:pointer;transition:all var(--transition-base);box-shadow:0 2px 8px #0003,inset 0 1px #fff3}.category-btn-content{display:flex;align-items:center;gap:var(--space-2);flex:1;z-index:1}.category-content:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left var(--transition-smooth)}.floating-category:hover .category-content:before{left:100%}.category-button-item .category-icon{font-size:1.5rem;line-height:1;transition:all var(--transition-base);filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));flex-shrink:0}.category-info{display:flex;flex-direction:column;gap:2px;flex:1}.category-name{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);line-height:1.2;text-shadow:0 1px 2px rgba(0,0,0,.5);white-space:nowrap}.category-stats{font-size:var(--font-size-xs);color:var(--color-text-accent);opacity:.7;font-weight:var(--font-weight-normal);white-space:nowrap}.category-description{position:absolute;bottom:-50px;left:50%;transform:translate(-50%);background:#000000e6;color:var(--color-text-primary);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:var(--font-size-xs);white-space:nowrap;opacity:0;pointer-events:none;transition:all var(--transition-base);z-index:20;border:1px solid rgba(255,255,255,.2)}.floating-category:hover .category-description{opacity:1;bottom:-40px}.category-button-item:hover{transform:translateY(-2px);background:linear-gradient(135deg,#ffffff26,#ffffff14);border-color:#ffffff4d;box-shadow:0 4px 16px #0000004d,0 0 20px #667eea4d,inset 0 1px #ffffff4d}.category-button-item:hover .category-icon{transform:scale(1.1);filter:drop-shadow(0 4px 8px rgba(0,0,0,.4)) drop-shadow(0 0 10px rgba(102,126,234,.5))}.category-button-item.selected{background:linear-gradient(135deg,#22c55e33,#22c55e1a);border-color:#22c55ecc;border-width:2px;box-shadow:0 4px 16px #22c55e4d,0 0 20px #22c55e33,inset 0 1px #ffffff4d}.category-button-item.selected .category-icon{transform:scale(1.1);animation:pulse-glow 2s ease-in-out infinite}@keyframes pulse-glow{0%,to{filter:drop-shadow(0 2px 4px rgba(0,0,0,.3)) drop-shadow(0 0 15px rgba(102,126,234,.6))}50%{filter:drop-shadow(0 2px 4px rgba(0,0,0,.3)) drop-shadow(0 0 25px rgba(102,126,234,.8))}}.selection-indicator,.category-button-item.selected .selection-indicator{display:none}.check-icon{color:#fff;font-size:10px;font-weight:700;line-height:1}.ripple-effect{position:absolute;border-radius:50%;background:#fff9;transform:scale(0);opacity:0;pointer-events:none;transition:none}.ripple-effect.active{animation:ripple-expand .6s linear}@keyframes ripple-expand{0%{transform:scale(0);opacity:1}to{transform:scale(4);opacity:0}}.selection-controls{display:flex;align-items:center;gap:var(--space-3);flex-shrink:0}.selected-info{display:none}#selectedCount{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-primary);text-shadow:0 1px 2px rgba(0,0,0,.3)}.control-buttons{display:flex;gap:var(--space-2);margin-left:auto}.control-btn{padding:var(--space-2) var(--space-3);border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base);display:flex;align-items:center;justify-content:center;gap:var(--space-1);font-weight:var(--font-weight-medium);position:relative;overflow:hidden;backdrop-filter:blur(var(--blur-sm));-webkit-backdrop-filter:blur(var(--blur-sm));font-size:var(--font-size-sm)}.cancel-btn{background:linear-gradient(135deg,#ef444433,#ef44441a);border:1px solid rgba(239,68,68,.4);color:var(--color-text-primary)}.cancel-btn:hover{background:linear-gradient(135deg,#ef44444d,#ef444426);border-color:#ef444499;transform:translateY(-2px);box-shadow:0 4px 12px #ef44444d,inset 0 1px #fff3}.confirm-btn{background:linear-gradient(135deg,#22c55e33,#22c55e1a);border:1px solid rgba(34,197,94,.4);color:var(--color-text-primary)}.confirm-btn:hover{background:linear-gradient(135deg,#22c55e4d,#22c55e26);border-color:#22c55e99;transform:translateY(-2px);box-shadow:0 4px 12px #22c55e4d,inset 0 1px #fff3}.btn-icon{font-size:.9em}.btn-text{font-size:var(--font-size-xs)}@media (max-width: 768px){.category-selection-container{padding:var(--space-3)}.category-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--space-2);padding:var(--space-2);max-height:350px}.selection-header-wrapper{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:var(--space-2);align-items:start}.selection-header{grid-column:1;grid-row:1}.control-buttons{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:var(--space-1);width:auto;margin-left:var(--space-2);margin-top:0}.control-buttons .control-btn{min-width:60px;padding:var(--space-1) var(--space-2);height:30px}.control-buttons .btn-text{font-size:var(--font-size-xs)}.control-buttons .btn-icon{display:none}.selection-controls{grid-column:1 / -1;grid-row:2;width:100%}.category-button-item{min-height:50px;padding:var(--space-2)}.category-button-item .category-icon{font-size:1.3rem}.category-name{font-size:var(--font-size-xs)}.control-buttons{flex-direction:column}.control-btn{max-width:none}}@media (max-width: 480px){.category-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--space-2);padding:var(--space-2);max-height:300px}.category-button-item{min-height:45px;padding:var(--space-2)}.category-button-item .category-icon{font-size:1.1rem}.category-stats{font-size:9px}}.category-button-item{animation:fade-in .3s ease-out forwards}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.quantum-field{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:var(--z-index-particle)}.quantum-particle{position:absolute;width:4px;height:4px;background:radial-gradient(circle,rgba(102,126,234,.8),transparent);border-radius:50%;pointer-events:none;animation:quantumFloat var(--animation-duration-orbit) linear infinite}.quantum-particle:nth-child(odd){background:radial-gradient(circle,rgba(245,87,108,.8),transparent);animation-duration:calc(var(--animation-duration-orbit) * 1.5)}.quantum-particle:nth-child(3n){background:radial-gradient(circle,rgba(240,147,251,.8),transparent);animation-duration:calc(var(--animation-duration-orbit) * .7)}.entanglement-line{position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(102,126,234,.3),rgba(102,126,234,.6),rgba(102,126,234,.3),transparent);transform-origin:left center;animation:entanglementPulse var(--animation-duration-pulse) ease-in-out infinite}.energy-wave{position:absolute;top:50%;left:50%;width:200px;height:200px;border:2px solid;border-radius:50%;transform:translate(-50%,-50%);opacity:0;pointer-events:none}.energy-wave.active{animation:waveExpand var(--animation-duration-slow) ease-out}.photon-trail{position:absolute;width:2px;height:20px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.8),transparent);filter:blur(1px);animation:photonStream var(--animation-duration-fast) linear infinite}@keyframes quantumFloat{0%{transform:translate(0) scale(1);opacity:0}10%{opacity:.8}50%{transform:translate(100px,-50px) scale(1.5);opacity:.5}90%{opacity:.8}to{transform:translate(200px,100px) scale(.5);opacity:0}}@keyframes entanglementPulse{0%,to{opacity:.3;filter:brightness(1)}50%{opacity:.6;filter:brightness(1.5)}}@keyframes waveExpand{0%{transform:translate(-50%,-50%) scale(.5);opacity:.8;border-color:var(--color-brand-primary)}50%{border-color:var(--color-brand-accent)}to{transform:translate(-50%,-50%) scale(3);opacity:0;border-color:var(--color-brand-secondary)}}@keyframes photonStream{0%{transform:translateY(-100px) rotate(0);opacity:0}50%{opacity:1}to{transform:translateY(100px) rotate(180deg);opacity:0}}.spinner-container:hover .quantum-particle{animation-duration:calc(var(--animation-duration-orbit) * .5)}.spinner-container:hover .entanglement-line{animation-duration:calc(var(--animation-duration-pulse) * .5);filter:brightness(1.5)}.quantum-glow{position:absolute;top:50%;left:50%;width:300px;height:300px;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(102,126,234,.2) 0%,rgba(102,126,234,.1) 30%,transparent 70%);filter:blur(var(--blur-lg));opacity:.6;animation:quantumGlowPulse calc(var(--animation-duration-pulse) * 2) ease-in-out infinite alternate;pointer-events:none}@keyframes quantumGlowPulse{0%{transform:translate(-50%,-50%) scale(1);opacity:.6}to{transform:translate(-50%,-50%) scale(1.2);opacity:.3}}.matrix-grid{position:absolute;top:-50%;left:-50%;width:200%;height:200%;background-image:linear-gradient(rgba(102,126,234,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(102,126,234,.1) 1px,transparent 1px);background-size:50px 50px;animation:matrixScroll 10s linear infinite;opacity:.3;pointer-events:none}@keyframes matrixScroll{0%{transform:translate(0)}to{transform:translate(50px,50px)}}.holographic-layer{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(45deg,transparent 30%,rgba(102,126,234,.1) 50%,transparent 70%);background-size:200% 200%;animation:holographicShift 3s ease-in-out infinite;mix-blend-mode:overlay;pointer-events:none}@keyframes holographicShift{0%{background-position:0% 0%}50%{background-position:100% 100%}to{background-position:0% 0%}}@media (max-width: 768px){.quantum-glow{width:200px;height:200px}.energy-wave{width:150px;height:150px}.quantum-particle{width:3px;height:3px}}