:root{--color-primary-bg: #003366;--color-secondary-bg: #0056b3;--color-accent-highlight: #FFD166;--color-cta-button: #007bff;--color-text-light: #ffffff;--color-text-dark: #f0f4f8;--color-border: rgba(255, 255, 255, .2);--spacing-sm: 1rem;--spacing-md: 2rem;--spacing-lg: 4rem;--font-family-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family-body);background-color:var(--color-primary-bg);color:var(--color-text-dark);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.page-container{display:flex;flex-direction:column;min-height:100vh}.main-header,.main-footer{background-color:var(--color-secondary-bg);color:var(--color-text-dark);padding:0 var(--spacing-md);border-bottom:1px solid var(--color-border);flex-shrink:0}.main-footer{border-top:1px solid var(--color-border);border-bottom:none}.header-content,.main-footer p{max-width:1200px;margin:0 auto;height:60px;display:flex;justify-content:space-between;align-items:center}.main-footer p{width:100%;justify-content:center;font-size:.9rem}.header-logo{font-weight:700;font-size:1.2rem;color:var(--color-text-light)}.header-tagline{font-weight:500;color:var(--color-text-dark)}.content-area{flex-grow:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:var(--spacing-md)}.generator-card{background:#ffffff0d;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:16px;border:1px solid var(--color-border);padding:var(--spacing-md) var(--spacing-lg);width:100%;max-width:700px;text-align:center;box-shadow:0 10px 30px #0003;min-height:300px;display:flex;flex-direction:column;justify-content:center}.generator-card h1{font-size:2.5rem;color:var(--color-accent-highlight);margin-bottom:1.5rem}.typing-text{font-family:monospace;font-size:1.5rem;color:var(--color-accent-highlight);margin-bottom:2rem;min-height:2.4rem}.cursor{display:inline-block;background-color:var(--color-accent-highlight);margin-left:.1rem;width:3px;animation:blink 1s infinite}@keyframes blink{0%,to{background-color:var(--color-accent-highlight)}50%{background-color:transparent}}.generate-button{display:inline-block;padding:.9rem 2.5rem;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;border:none;text-align:center;font-size:1.2rem;background-color:var(--color-cta-button);color:var(--color-text-light);box-shadow:0 4px 15px #007bff33}.generate-button:hover{background-color:var(--color-secondary-bg);transform:translateY(-2px);box-shadow:0 6px 20px #007bff4d}.generate-button:disabled{background-color:#555;cursor:not-allowed;transform:none;box-shadow:none}.results-container h2{font-size:1.5rem;margin-bottom:.5rem;color:var(--color-text-light)}.results-instructions{text-align:left;margin-bottom:.5rem;font-weight:500;color:var(--color-text-dark)}.result-box{background-color:var(--color-primary-bg);border:1px solid rgba(0,86,179,.5);border-radius:8px;padding:.75rem var(--spacing-sm);display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md);font-family:monospace}.result-box span{overflow-x:auto;white-space:nowrap;padding-right:var(--spacing-sm);color:var(--color-text-light)}.result-box button{background-color:#0056b380;border:1px solid var(--color-secondary-bg);color:var(--color-text-light);border-radius:5px;padding:.3rem .7rem;cursor:pointer;flex-shrink:0}.result-box button:hover{background-color:var(--color-secondary-bg)}.code-box{margin-top:.5rem;padding:var(--spacing-sm);font-size:1.2rem;justify-content:center}.code-box strong{color:var(--color-accent-highlight);font-size:1.5rem}.generate-button.secondary{margin-top:var(--spacing-md);width:100%;background-color:transparent;color:var(--color-accent-highlight);border:1px solid var(--color-accent-highlight)}.generate-button.secondary:hover{background-color:var(--color-accent-highlight);color:var(--color-primary-bg)}.how-it-works-section{width:100%;max-width:1100px;padding:var(--spacing-lg) 0;margin-top:var(--spacing-lg)}.how-it-works-section h2{font-size:2.2rem;color:var(--color-text-light);text-align:center;margin-bottom:var(--spacing-lg)}.steps-container{display:flex;justify-content:space-around;align-items:flex-start;gap:1rem;flex-wrap:wrap}.step-item{background:#ffffff0d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:var(--spacing-md);text-align:center;max-width:300px;flex:1;min-width:250px}.step-icon{font-size:4rem;line-height:1;margin-bottom:var(--spacing-sm);color:var(--color-accent-highlight)}.step-item h3{font-size:1.5rem;color:var(--color-text-light);margin-bottom:.5rem}.step-item p{color:var(--color-text-dark)}.step-arrow{font-size:3.5rem;color:var(--color-accent-highlight);margin-top:5rem}@media (max-width: 920px){.steps-container{flex-direction:column;align-items:center}.step-arrow{transform:rotate(90deg);margin:1rem 0}}@media (max-width: 640px){.header-tagline{display:none}.header-content{justify-content:center}.typing-text{font-size:1.2rem;min-height:2rem}.generator-card{padding:var(--spacing-md) var(--spacing-sm);min-height:auto}.generator-card h1{font-size:1.8rem}.typing-text{font-size:1.2rem;min-height:4.8rem}}