code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}:root{--color-primary: #667eea;--color-primary-dark: #764ba2;--color-text-dark: #2c2c2c;--color-text-medium: #6a6a6a;--color-text-light: #4a4a4a;--color-text-white: #ffffff;--color-text-muted: #a0a0a0;--color-bg-white: #ffffff;--color-bg-light: #f8f9fa;--color-bg-dark: #1a1a1a;--color-bg-code: #1e1e1e;--color-bg-code-header: #2d2d2d;--color-border: #e0e0e0;--color-border-dark: #333333;--color-badge-bg: #f0f2f5;--color-code-text: #e0e0e0;--color-code-accent: #61dafb;--gradient-primary: linear-gradient( 135deg, var(--color-primary) 0%, var(--color-primary-dark) 100% );--gradient-brand: linear-gradient( 135deg, var(--color-primary) 0%, var(--color-primary-dark) 100% );--gradient-steve: linear-gradient(135deg, #6a6a6a 0%, #2c2c2c 100%);--gradient-lily: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);--gradient-custom: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);--spacing-xs: .5rem;--spacing-sm: 1rem;--spacing-md: 1.5rem;--spacing-lg: 2rem;--spacing-xl: 3rem;--spacing-2xl: 4rem;--spacing-3xl: 5rem;--spacing-4xl: 6.25rem;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--font-family-mono: "Courier New", monospace;--font-size-xs: .85rem;--font-size-sm: .9rem;--font-size-base: 1rem;--font-size-md: 1.1rem;--font-size-lg: 1.2rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.8rem;--font-size-4xl: 2rem;--font-size-5xl: 2.5rem;--font-size-6xl: 3rem;--line-height-tight: 1.2;--line-height-normal: 1.6;--line-height-relaxed: 1.8;--container-max-width: 1200px;--navbar-height: 80px;--content-max-width: 600px;--card-max-width: 500px;--border-radius-sm: 4px;--border-radius: 8px;--border-radius-md: 12px;--border-radius-lg: 16px;--border-radius-xl: 20px;--border-radius-full: 50%;--breakpoint-mobile: 768px;--transition-fast: .2s ease;--transition-normal: .3s ease;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--shadow-md: 0 4px 8px rgba(0, 0, 0, .08);--shadow-lg: 0 4px 12px rgba(0, 0, 0, .08);--shadow-xl: 0 8px 24px rgba(0, 0, 0, .12);--shadow-hover: 0 10px 20px rgba(0, 0, 0, .1);--shadow-card: 0 4px 12px rgba(0, 0, 0, .08);--shadow-card-hover: 0 8px 24px rgba(0, 0, 0, .12);--shadow-code: 0 4px 12px rgba(0, 0, 0, .15);--shadow-dropdown: 0 4px 6px rgba(0, 0, 0, .1);--z-dropdown: 100;--z-sticky: 200;--z-fixed: 300;--z-modal-backdrop: 400;--z-modal: 500;--z-popover: 600;--z-tooltip: 700;--z-navbar: 1000;--z-mobile-toggle: 1001;--z-skip-link: 10000}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:var(--navbar-height, 80px)}body{font-family:var(--font-family);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:var(--line-height-normal);color:var(--color-text-dark)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.container{max-width:var(--container-max-width);margin:0 auto;padding:0 20px}.skip-to-content{position:absolute;top:-100px;left:50%;transform:translate(-50%);background:var(--color-primary);color:var(--color-text-white);padding:12px 24px;border-radius:0 0 var(--border-radius) var(--border-radius);text-decoration:none;font-weight:600;z-index:var(--z-skip-link);transition:top var(--transition-normal)}.skip-to-content:focus-visible{outline:3px solid var(--color-primary-dark);outline-offset:2px}.section-subtitle{text-align:center;font-size:var(--font-size-md);color:var(--color-text-medium);margin-bottom:var(--spacing-xl)}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.6;color:#1a1a1a}.App{min-height:100vh}.skip-to-content{position:absolute;top:-100px;left:50%;transform:translate(-50%);background:#667eea;color:#fff;padding:12px 24px;border-radius:0 0 8px 8px;text-decoration:none;font-weight:600;z-index:10000;transition:top .3s}.skip-to-content:focus{top:0}.skip-to-content:focus-visible{outline:3px solid #764ba2;outline-offset:2px}.container{max-width:1200px;margin:0 auto;padding:0 20px}.navbar{position:fixed;top:0;width:100%;background:#fffffffa;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid #e0e0e0;z-index:1000;padding:1rem 0}.nav-container{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;justify-content:space-between;align-items:center}.nav-brand{font-size:1.5rem;font-weight:700;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent}.mobile-menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:10px;z-index:1001;border-radius:4px}.mobile-menu-toggle:focus-visible{outline:2px solid #667eea;outline-offset:2px}.hamburger{display:block;width:24px;height:2px;background:#4a4a4a;position:relative;transition:background .3s}.hamburger:before,.hamburger:after{content:"";position:absolute;width:24px;height:2px;background:#4a4a4a;left:0;transition:transform .3s,top .3s}.nav-links a{text-decoration:none;color:#4a4a4a;font-weight:500;transition:color .3s}.nav-links a:hover{color:#667eea}.nav-links a:focus-visible{outline:2px solid #667eea;outline-offset:2px;border-radius:4px}.hero{margin-top:80px;padding:100px 0;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;text-align:center}.hero-title{font-size:3rem;font-weight:700;margin-bottom:1.5rem;line-height:1.2}.hero-subtitle{font-size:1.25rem;max-width:700px;margin:0 auto 2.5rem;opacity:.95}.hero-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.btn{padding:12px 30px;border-radius:8px;text-decoration:none;font-weight:600;transition:all .3s;display:inline-block;border:2px solid transparent}.btn-primary{background:#fff;color:#667eea}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 20px #0000001a}.btn-primary:focus-visible{outline:2px solid #667eea;outline-offset:2px;transform:translateY(-2px);box-shadow:0 10px 20px #0000001a}.btn-secondary{background:transparent;color:#fff;border:2px solid white}.btn-secondary:hover{background:#fff;color:#667eea}.btn-secondary:focus-visible{outline:2px solid white;outline-offset:2px}.btn-large{padding:16px 40px;font-size:1.1rem}.star-characters{padding:80px 0;background:#f8f9fa}.star-characters h2{text-align:center;font-size:2.5rem;margin-bottom:1rem;color:#2c2c2c}.section-subtitle{text-align:center;font-size:1.1rem;color:#6a6a6a;margin-bottom:3rem}.characters-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}.character-card{background:#fff;border-radius:16px;padding:2rem;box-shadow:0 4px 12px #00000014;transition:transform .3s,box-shadow .3s}.character-card:hover{transform:translateY(-5px);box-shadow:0 8px 24px #0000001f}.character-avatar{width:100px;height:100px;border-radius:50%;margin:0 auto 1.5rem;background:linear-gradient(135deg,#667eea,#764ba2)}.character-avatar.steve{background:linear-gradient(135deg,#6a6a6a,#2c2c2c)}.character-avatar.lily{background:linear-gradient(135deg,#f093fb,#f5576c)}.character-avatar.custom{background:linear-gradient(135deg,#4facfe,#00f2fe)}.character-card h3{font-size:1.5rem;margin-bottom:1rem;color:#2c2c2c}.character-card p{color:#6a6a6a;margin-bottom:1.5rem}.character-traits{display:flex;gap:.5rem;flex-wrap:wrap}.trait{padding:4px 12px;background:#f0f2f5;border-radius:20px;font-size:.85rem;color:#4a4a4a}.developer-section{padding:80px 0;background:#fff}.developer-section h2{text-align:center;font-size:2.5rem;margin-bottom:1rem;color:#2c2c2c}.dev-features{margin-top:3rem}.dev-card{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}.code-block{background:#1e1e1e;border-radius:12px;overflow:hidden;box-shadow:0 4px 12px #00000026}.code-header{background:#2d2d2d;color:#61dafb;padding:12px 20px;font-weight:600;font-size:.9rem}.code-block pre{padding:20px;color:#e0e0e0;font-family:Courier New,monospace;font-size:.9rem;overflow-x:auto;margin:0}.dev-info h3{margin-bottom:1rem;color:#2c2c2c}.dev-info p{color:#6a6a6a;margin-bottom:1.5rem}.dev-info li{padding:.5rem 0 .5rem 1.5rem;position:relative;color:#4a4a4a}.dev-info li:before{content:"✓";position:absolute;left:0;color:#667eea;font-weight:700}.features-section{padding:80px 0;background:#f8f9fa}.features-section h2{text-align:center;font-size:2.5rem;margin-bottom:3rem;color:#2c2c2c}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem}.feature-card{background:#fff;padding:2rem;border-radius:12px;box-shadow:0 2px 8px #00000014;transition:transform .3s}.feature-card:hover{transform:translateY(-3px);box-shadow:0 4px 16px #0000001f}.feature-icon{font-size:2.5rem;margin-bottom:1rem}.feature-card h3{margin-bottom:1rem;color:#2c2c2c}.feature-card p{color:#6a6a6a;line-height:1.6}.use-cases{padding:80px 0;background:#fff}.use-cases h2{text-align:center;font-size:2.5rem;margin-bottom:3rem;color:#2c2c2c}.use-case-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}.use-case-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 4px 12px #00000014;transition:transform .3s}.use-case-card:hover{transform:translateY(-5px);box-shadow:0 8px 24px #0000001f}.use-case-card.gaming{border-top:4px solid #667eea}.use-case-content{padding:2rem}.use-case-content h3{font-size:1.5rem;margin-bottom:.5rem;color:#2c2c2c}.use-case-content h4{color:#667eea;margin-bottom:1rem}.use-case-content p{color:#6a6a6a;margin-bottom:1.5rem}.use-case-content ul{list-style:none;margin-bottom:1.5rem}.use-case-content li{padding:.5rem 0 .5rem 1.5rem;position:relative;color:#4a4a4a}.use-case-content li:before{content:"→";position:absolute;left:0;color:#667eea;font-weight:700}.use-case-example{background:#f8f9fa;padding:1rem;border-radius:8px;font-size:.9rem;color:#4a4a4a;line-height:1.5}.deployment-section{padding:80px 0;background:#f8f9fa}.deployment-section h2{text-align:center;font-size:2.5rem;margin-bottom:3rem;color:#2c2c2c}.deploy-options{display:flex;justify-content:center;gap:2rem}.deploy-card{background:#fff;padding:2rem;border-radius:16px;box-shadow:0 4px 12px #00000014;max-width:500px;width:100%}.deploy-card h3{font-size:1.5rem;margin-bottom:1rem;color:#2c2c2c}.deploy-card p{color:#6a6a6a;margin-bottom:1.5rem}.deploy-card ul{list-style:none;margin-bottom:1.5rem}.deploy-card li{padding:.5rem 0 .5rem 1.5rem;position:relative;color:#4a4a4a}.deploy-card li:before{content:"•";position:absolute;left:0;color:#667eea;font-weight:700}.code-snippet{background:#1e1e1e;border-radius:8px;padding:1rem;margin-top:1rem}.code-snippet pre{color:#e0e0e0;font-size:.85rem;margin:0;overflow-x:auto}.code-placeholder{background:#f8f9fa;border:2px dashed #d0d0d0;border-radius:12px;padding:2rem;text-align:center;color:#6a6a6a}.code-placeholder-icon{font-size:2.5rem;margin-bottom:1rem}.code-placeholder h4{margin-bottom:.5rem;color:#4a4a4a}.code-placeholder p{margin:0;font-size:.9rem}.code-placeholder-small{background:#f8f9fa;border-radius:8px;padding:1rem;text-align:center;margin-top:1rem}.code-placeholder-small p{margin:0;color:#6a6a6a;font-size:.85rem}.placeholder-section{padding:80px 0;background:#fff;text-align:center}.placeholder-section:nth-child(2n){background:#f8f9fa}.placeholder-section h2{font-size:2.5rem;margin-bottom:3rem;color:#2c2c2c}.placeholder-content{max-width:600px;margin:0 auto;padding:2rem}.placeholder-icon{font-size:4rem;margin-bottom:2rem}.placeholder-content h3{font-size:1.8rem;margin-bottom:1.5rem;color:#4a4a4a}.placeholder-content p{color:#6a6a6a;line-height:1.8;margin-bottom:1.5rem;font-size:1.1rem}.placeholder-content strong{color:#667eea}.placeholder-content .btn{margin-top:1rem}.placeholder-content a{color:#667eea;text-decoration:underline;transition:color .3s}.placeholder-content a:hover{color:#764ba2}.placeholder-content a:focus-visible{outline:2px solid #667eea;outline-offset:2px;border-radius:2px}.cta-section{padding:100px 0;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;text-align:center}.cta-section h2{font-size:2.5rem;margin-bottom:1rem}.cta-section p{font-size:1.2rem;margin-bottom:2rem;opacity:.95}.cta-buttons{display:flex;justify-content:center;gap:1rem}.footer{background:#1a1a1a;color:#e0e0e0;padding:60px 0 20px}.footer-section h4{margin-bottom:1rem;color:#fff}.footer-section a{display:block;color:#a0a0a0;text-decoration:none;padding:.3rem 0;transition:color .3s}.footer-section a:hover{color:#667eea}.footer-section a:focus-visible{outline:2px solid #667eea;outline-offset:2px;border-radius:2px}.footer-social-text{color:#a0a0a0;font-size:.9rem;line-height:1.8}.footer-bottom{text-align:center;padding-top:2rem;border-top:1px solid #333;color:#a0a0a0}@media(max-width:768px){.hero-title{font-size:2rem}.hero-subtitle{font-size:1.1rem}.mobile-menu-toggle{display:block}.nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:#fffffffa;flex-direction:column;padding:1rem 20px;box-shadow:0 4px 6px #0000001a;gap:0}.nav-links.mobile-open{display:flex}.nav-links a{padding:.75rem 0;border-bottom:1px solid #e0e0e0}.nav-links a:last-child{border-bottom:none}.dev-card,.characters-grid,.features-grid,.use-case-grid{grid-template-columns:1fr}.deploy-options{flex-direction:column;align-items:center}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.btn:hover,.btn:focus-visible{transform:none}.character-card:hover,.feature-card:hover,.use-case-card:hover{transform:none}.skip-to-content:focus{top:0}.hamburger:before,.hamburger:after{transition:none}}.navbar{position:fixed;top:0;width:100%;background:#fffffffa;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--color-border, #e0e0e0);z-index:var(--z-navbar, 1000);padding:1rem 0}.nav-container{max-width:var(--container-max-width, 1200px);margin:0 auto;padding:0 20px;display:flex;justify-content:space-between;align-items:center}.nav-brand{font-size:1.5rem;font-weight:700;background:var(--gradient-brand, linear-gradient(135deg, #667eea 0%, #764ba2 100%));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent}.nav-links{display:flex;gap:2rem}.mobile-menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:10px;z-index:var(--z-mobile-toggle, 1001);border-radius:var(--border-radius-sm, 4px)}.mobile-menu-toggle:focus-visible{outline:2px solid var(--color-primary, #667eea);outline-offset:2px}.hamburger{display:block;width:24px;height:2px;background:var(--color-text-light, #4a4a4a);position:relative;transition:background var(--transition-normal, .3s)}.hamburger:before,.hamburger:after{content:"";position:absolute;width:24px;height:2px;background:var(--color-text-light, #4a4a4a);left:0;transition:transform var(--transition-normal, .3s),top var(--transition-normal, .3s)}.hamburger:before{top:-7px}.hamburger:after{top:7px}.hamburger.open{background:transparent}.hamburger.open:before{transform:rotate(45deg);top:0}.hamburger.open:after{transform:rotate(-45deg);top:0}.nav-links a{text-decoration:none;color:var(--color-text-light, #4a4a4a);font-weight:500;transition:color var(--transition-normal, .3s)}.nav-links a:hover{color:var(--color-primary, #667eea)}.nav-links a.active{color:var(--color-primary, #667eea);position:relative}.nav-links a.active:after{content:"";position:absolute;bottom:-4px;left:0;right:0;height:2px;background:var(--color-primary, #667eea);border-radius:1px}.nav-links a:focus-visible{outline:2px solid var(--color-primary, #667eea);outline-offset:2px;border-radius:var(--border-radius-sm, 4px)}@media(max-width:768px){.mobile-menu-toggle{display:block}.nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:#fffffffa;flex-direction:column;padding:1rem 20px;box-shadow:var(--shadow-dropdown, 0 4px 6px rgba(0, 0, 0, .1));gap:0}.nav-links.mobile-open{display:flex}.nav-links a{padding:.75rem 0;border-bottom:1px solid var(--color-border, #e0e0e0)}.nav-links a:last-child{border-bottom:none}.nav-links a.active:after{bottom:0;left:-20px;right:auto;width:3px;height:100%;border-radius:0 2px 2px 0}}.footer{background:var(--color-bg-dark, #1a1a1a);color:var(--color-code-text, #e0e0e0);padding:60px 0 20px}.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;margin-bottom:2rem}.footer-section h4{margin-bottom:1rem;color:var(--color-text-white, white)}.footer-section a{display:block;color:var(--color-text-muted, #a0a0a0);text-decoration:none;padding:.3rem 0;transition:color var(--transition-normal, .3s)}.footer-section a:hover{color:var(--color-primary, #667eea)}.footer-section a:focus-visible{outline:2px solid var(--color-primary, #667eea);outline-offset:2px;border-radius:2px}.footer-social-text{color:var(--color-text-muted, #a0a0a0);font-size:.9rem;line-height:1.8}.footer-bottom{text-align:center;padding-top:2rem;border-top:1px solid var(--color-border-dark, #333);color:var(--color-text-muted, #a0a0a0)}.btn{padding:12px 30px;border-radius:var(--border-radius, 8px);text-decoration:none;font-weight:600;transition:all var(--transition-normal, .3s);display:inline-block;border:2px solid transparent;cursor:pointer}.btn-primary{background:var(--color-bg-white, white);color:var(--color-primary, #667eea)}.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover, 0 10px 20px rgba(0, 0, 0, .1))}.btn-primary:focus-visible{outline:2px solid var(--color-primary, #667eea);outline-offset:2px;transform:translateY(-2px);box-shadow:var(--shadow-hover, 0 10px 20px rgba(0, 0, 0, .1))}.btn-secondary{background:transparent;color:var(--color-text-white, white);border:2px solid var(--color-text-white, white)}.btn-secondary:hover{background:var(--color-bg-white, white);color:var(--color-primary, #667eea)}.btn-secondary:focus-visible{outline:2px solid var(--color-text-white, white);outline-offset:2px}.btn-large{padding:16px 40px;font-size:var(--font-size-md, 1.1rem)}@media(prefers-reduced-motion:reduce){.btn:hover,.btn:focus-visible{transform:none}}.hero{margin-top:var(--navbar-height, 80px);padding:var(--spacing-4xl, 100px) 0;background:var(--gradient-primary, linear-gradient(135deg, #667eea 0%, #764ba2 100%));color:var(--color-text-white, white);text-align:center}.hero-title{font-size:var(--font-size-6xl, 3rem);font-weight:700;margin-bottom:var(--spacing-md, 1.5rem);line-height:var(--line-height-tight, 1.2)}.hero-subtitle{font-size:var(--font-size-xl, 1.25rem);max-width:700px;margin:0 auto var(--spacing-lg, 2.5rem);opacity:.95}.hero-buttons{display:flex;gap:var(--spacing-sm, 1rem);justify-content:center;flex-wrap:wrap}@media(max-width:768px){.hero-title{font-size:var(--font-size-4xl, 2rem)}.hero-subtitle{font-size:var(--font-size-md, 1.1rem)}}.star-characters{padding:var(--spacing-3xl, 80px) 0;background:var(--color-bg-light, #f8f9fa)}.star-characters h2{text-align:center;font-size:var(--font-size-5xl, 2.5rem);margin-bottom:var(--spacing-sm, 1rem);color:var(--color-text-dark, #2c2c2c)}.characters-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--spacing-lg, 2rem)}.character-card{background:var(--color-bg-white, white);border-radius:var(--border-radius-lg, 16px);padding:var(--spacing-lg, 2rem);box-shadow:var(--shadow-card, 0 4px 12px rgba(0, 0, 0, .08));transition:transform var(--transition-normal, .3s),box-shadow var(--transition-normal, .3s)}.character-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-card-hover, 0 8px 24px rgba(0, 0, 0, .12))}.character-avatar{width:100px;height:100px;border-radius:var(--border-radius-full, 50%);margin:0 auto var(--spacing-md, 1.5rem);background:var(--gradient-primary, linear-gradient(135deg, #667eea 0%, #764ba2 100%))}.character-avatar.steve{background:var(--gradient-steve, linear-gradient(135deg, #6a6a6a 0%, #2c2c2c 100%))}.character-avatar.lily{background:var(--gradient-lily, linear-gradient(135deg, #f093fb 0%, #f5576c 100%))}.character-avatar.custom{background:var(--gradient-custom, linear-gradient(135deg, #4facfe 0%, #00f2fe 100%))}.character-card h3{font-size:var(--font-size-2xl, 1.5rem);margin-bottom:var(--spacing-sm, 1rem);color:var(--color-text-dark, #2c2c2c)}.character-card p{color:var(--color-text-medium, #6a6a6a);margin-bottom:var(--spacing-md, 1.5rem)}.character-traits{display:flex;gap:var(--spacing-xs, .5rem);flex-wrap:wrap}.trait{padding:4px 12px;background:var(--color-badge-bg, #f0f2f5);border-radius:var(--border-radius-xl, 20px);font-size:var(--font-size-xs, .85rem);color:var(--color-text-light, #4a4a4a)}@media(max-width:768px){.characters-grid{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.character-card:hover{transform:none}}.developer-section{padding:var(--spacing-3xl, 80px) 0;background:var(--color-bg-white, white)}.developer-section h2{text-align:center;font-size:var(--font-size-5xl, 2.5rem);margin-bottom:var(--spacing-sm, 1rem);color:var(--color-text-dark, #2c2c2c)}.dev-features{margin-top:var(--spacing-xl, 3rem)}.dev-card{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-xl, 3rem);align-items:start}.code-placeholder{background:var(--color-bg-light, #f8f9fa);border:2px dashed #d0d0d0;border-radius:var(--border-radius-md, 12px);padding:var(--spacing-lg, 2rem);text-align:center;color:var(--color-text-medium, #6a6a6a)}.code-placeholder-icon{font-size:var(--font-size-5xl, 2.5rem);margin-bottom:var(--spacing-sm, 1rem)}.code-placeholder h4{margin-bottom:var(--spacing-xs, .5rem);color:var(--color-text-light, #4a4a4a)}.code-placeholder p{margin:0;font-size:var(--font-size-sm, .9rem)}.dev-info h3{margin-bottom:var(--spacing-sm, 1rem);color:var(--color-text-dark, #2c2c2c)}.dev-info p{color:var(--color-text-medium, #6a6a6a);margin-bottom:var(--spacing-md, 1.5rem)}.dev-info ul{list-style:none}.dev-info li{padding:var(--spacing-xs, .5rem) 0;padding-left:var(--spacing-md, 1.5rem);position:relative;color:var(--color-text-light, #4a4a4a)}.dev-info li:before{content:"✓";position:absolute;left:0;color:var(--color-primary, #667eea);font-weight:700}@media(max-width:768px){.dev-card{grid-template-columns:1fr}}.features-section{padding:var(--spacing-3xl, 80px) 0;background:var(--color-bg-light, #f8f9fa)}.features-section h2{text-align:center;font-size:var(--font-size-5xl, 2.5rem);margin-bottom:var(--spacing-xl, 3rem);color:var(--color-text-dark, #2c2c2c)}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:var(--spacing-lg, 2rem)}.feature-card{background:var(--color-bg-white, white);padding:var(--spacing-lg, 2rem);border-radius:var(--border-radius-md, 12px);box-shadow:var(--shadow-md, 0 2px 8px rgba(0, 0, 0, .08));transition:transform var(--transition-normal, .3s)}.feature-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg, 0 4px 16px rgba(0, 0, 0, .12))}.feature-icon{font-size:var(--font-size-5xl, 2.5rem);margin-bottom:var(--spacing-sm, 1rem)}.feature-card h3{margin-bottom:var(--spacing-sm, 1rem);color:var(--color-text-dark, #2c2c2c)}.feature-card p{color:var(--color-text-medium, #6a6a6a);line-height:var(--line-height-normal, 1.6)}@media(max-width:768px){.features-grid{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.feature-card:hover{transform:none}}.use-cases{padding:var(--spacing-3xl, 80px) 0;background:var(--color-bg-white, white)}.use-cases h2{text-align:center;font-size:var(--font-size-5xl, 2.5rem);margin-bottom:var(--spacing-xl, 3rem);color:var(--color-text-dark, #2c2c2c)}.use-case-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--spacing-lg, 2rem)}.use-case-card{background:var(--color-bg-white, white);border-radius:var(--border-radius-lg, 16px);overflow:hidden;box-shadow:var(--shadow-card, 0 4px 12px rgba(0, 0, 0, .08));transition:transform var(--transition-normal, .3s)}.use-case-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-card-hover, 0 8px 24px rgba(0, 0, 0, .12))}.use-case-card.gaming{border-top:4px solid var(--color-primary, #667eea)}.use-case-card.reading{border-top:4px solid #f093fb}.use-case-content{padding:var(--spacing-lg, 2rem)}.use-case-content h3{font-size:var(--font-size-2xl, 1.5rem);margin-bottom:var(--spacing-xs, .5rem);color:var(--color-text-dark, #2c2c2c)}.use-case-content h4{color:var(--color-primary, #667eea);margin-bottom:var(--spacing-sm, 1rem)}.use-case-content p{color:var(--color-text-medium, #6a6a6a);margin-bottom:var(--spacing-md, 1.5rem)}.use-case-content ul{list-style:none;margin-bottom:var(--spacing-md, 1.5rem)}.use-case-content li{padding:var(--spacing-xs, .5rem) 0;padding-left:var(--spacing-md, 1.5rem);position:relative;color:var(--color-text-light, #4a4a4a)}.use-case-content li:before{content:"→";position:absolute;left:0;color:var(--color-primary, #667eea);font-weight:700}@media(max-width:768px){.use-case-grid{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.use-case-card:hover{transform:none}}.deployment-section{padding:var(--spacing-3xl, 80px) 0;background:var(--color-bg-light, #f8f9fa)}.deployment-section h2{text-align:center;font-size:var(--font-size-5xl, 2.5rem);margin-bottom:var(--spacing-xl, 3rem);color:var(--color-text-dark, #2c2c2c)}.deploy-options{display:flex;justify-content:center;gap:var(--spacing-lg, 2rem)}.deploy-card{background:var(--color-bg-white, white);padding:var(--spacing-lg, 2rem);border-radius:var(--border-radius-lg, 16px);box-shadow:var(--shadow-card, 0 4px 12px rgba(0, 0, 0, .08));max-width:var(--card-max-width, 500px);width:100%}.deploy-card h3{font-size:var(--font-size-2xl, 1.5rem);margin-bottom:var(--spacing-sm, 1rem);color:var(--color-text-dark, #2c2c2c)}.deploy-card p{color:var(--color-text-medium, #6a6a6a);margin-bottom:var(--spacing-md, 1.5rem)}.deploy-card ul{list-style:none;margin-bottom:var(--spacing-md, 1.5rem)}.deploy-card li{padding:var(--spacing-xs, .5rem) 0;padding-left:var(--spacing-md, 1.5rem);position:relative;color:var(--color-text-light, #4a4a4a)}.deploy-card li:before{content:"•";position:absolute;left:0;color:var(--color-primary, #667eea);font-weight:700}.code-placeholder-small{background:var(--color-bg-light, #f8f9fa);border-radius:var(--border-radius, 8px);padding:var(--spacing-sm, 1rem);text-align:center;margin-top:var(--spacing-sm, 1rem)}.code-placeholder-small p{margin:0;color:var(--color-text-medium, #6a6a6a);font-size:var(--font-size-xs, .85rem)}@media(max-width:768px){.deploy-options{flex-direction:column;align-items:center}}.placeholder-section{padding:var(--spacing-3xl, 80px) 0;background:var(--color-bg-white, white);text-align:center}.placeholder-section:nth-child(2n){background:var(--color-bg-light, #f8f9fa)}.placeholder-section h2{font-size:var(--font-size-5xl, 2.5rem);margin-bottom:var(--spacing-xl, 3rem);color:var(--color-text-dark, #2c2c2c)}.placeholder-content{max-width:var(--content-max-width, 600px);margin:0 auto;padding:var(--spacing-lg, 2rem)}.placeholder-icon{font-size:4rem;margin-bottom:var(--spacing-lg, 2rem)}.placeholder-content h3{font-size:var(--font-size-3xl, 1.8rem);margin-bottom:var(--spacing-md, 1.5rem);color:var(--color-text-light, #4a4a4a)}.placeholder-content p{color:var(--color-text-medium, #6a6a6a);line-height:var(--line-height-relaxed, 1.8);margin-bottom:var(--spacing-md, 1.5rem);font-size:var(--font-size-md, 1.1rem)}.placeholder-content strong{color:var(--color-primary, #667eea)}.placeholder-content .btn{margin-top:var(--spacing-sm, 1rem)}.placeholder-content a{color:var(--color-primary, #667eea);text-decoration:underline;transition:color var(--transition-normal, .3s)}.placeholder-content a:hover{color:var(--color-primary-dark, #764ba2)}.placeholder-content a:focus-visible{outline:2px solid var(--color-primary, #667eea);outline-offset:2px;border-radius:2px}.cta-section{padding:var(--spacing-4xl, 100px) 0;background:var(--gradient-primary, linear-gradient(135deg, #667eea 0%, #764ba2 100%));color:var(--color-text-white, white);text-align:center}.cta-section h2{font-size:var(--font-size-5xl, 2.5rem);margin-bottom:var(--spacing-sm, 1rem)}.cta-section p{font-size:var(--font-size-lg, 1.2rem);margin-bottom:var(--spacing-lg, 2rem);opacity:.95}.cta-buttons{display:flex;justify-content:center;gap:var(--spacing-sm, 1rem)}.error-boundary{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(135deg,#f5f7fa,#e4e7eb)}.error-boundary-content{max-width:500px;text-align:center;background:#fff;padding:3rem;border-radius:16px;box-shadow:0 4px 20px #0000001a}.error-boundary-icon{font-size:4rem;margin-bottom:1.5rem}.error-boundary-title{font-size:1.75rem;color:#2c2c2c;margin-bottom:1rem;font-weight:600}.error-boundary-message{color:#6a6a6a;font-size:1.1rem;line-height:1.6;margin-bottom:2rem}.error-boundary-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.error-boundary-actions .btn{min-width:140px}.error-boundary-actions .btn-secondary{background:transparent;color:#667eea;border:2px solid #667eea}.error-boundary-actions .btn-secondary:hover{background:#667eea;color:#fff}.error-boundary-details{margin-top:2rem;text-align:left;background:#f8f9fa;border-radius:8px;padding:1rem}.error-boundary-details summary{cursor:pointer;color:#667eea;font-weight:500;margin-bottom:.5rem}.error-boundary-details summary:focus-visible{outline:2px solid #667eea;outline-offset:2px;border-radius:4px}.error-boundary-details pre{background:#1e1e1e;color:#e0e0e0;padding:1rem;border-radius:4px;overflow-x:auto;font-size:.8rem;margin-top:.5rem;white-space:pre-wrap;word-break:break-word}@media(prefers-reduced-motion:reduce){.error-boundary-actions .btn:hover{transform:none}}