header{min-height:80px;background:linear-gradient(210deg,#1d8aff,#0097e9);color:var(--header-text);padding:.75rem 1rem;box-shadow:0 3px 6px #0000001a;display:flex;align-items:center;justify-content:space-between;gap:1rem}header h1{margin:0 0 .1rem;font-weight:600;font-size:1.8rem;text-shadow:1px 1px 2px rgba(0,0,0,.1);word-wrap:normal;overflow-wrap:normal}header h1 i{margin-right:8px;vertical-align:baseline}header .tagline{margin:0;margin-inline:auto;font-size:1rem;font-style:normal;font-weight:300;color:var(--header-tagline);word-wrap:normal;overflow-wrap:normal}.header-logo-link{text-decoration:none;border:none;line-height:0}.header-logo-link:focus{outline:none}.header-logo-link:focus-visible{outline:2px solid white;outline-offset:2px;border-radius:4px}.header-logo-link .header-logo{height:70px;aspect-ratio:1;object-fit:contain;display:block}.header-content-wrapper{display:flex;align-items:center;justify-content:space-between;gap:1rem}.header-content-wrapper:not(.lite){margin-inline:auto;flex:1}.header-content-wrapper.lite{display:grid;grid-template-columns:1fr auto;background-color:#fff;border-radius:10px;padding:10px 20px;box-shadow:0 5px 15px var(--card-shadow);border:1px solid var(--card-border);width:fit-content}.header-content-wrapper .header-text-container{text-align:left;min-width:0}@media (max-width: 992px){.header-content-wrapper{padding-left:90px}.header-logo-link{text-decoration:none;border:none;line-height:0}.header-logo-link .header-logo{height:60px}header h1{font-size:1.6rem}header .tagline{font-size:.95rem}}@media (max-width: 768px){.header-logo-link .header-logo{height:55px}.header-content-wrapper{padding-left:75px;padding-right:15px;gap:15px}header h1{font-size:1.5rem}header .tagline{display:none}.header-nav{gap:5px}.header-nav .nav-btn{padding:5px 8px;font-size:.9rem}}@media (width <= 600px){header{padding-block:.5rem}.header-logo-link{text-align:center;margin-bottom:10px}.header-logo-link .header-logo{height:40px;display:inline-block;vertical-align:middle}.header-content-wrapper{flex-direction:column;padding-left:15px;padding-right:15px;gap:10px}.header-content-wrapper .header-text-container{width:100%;text-align:center}header h1{font-size:1.4rem;margin-bottom:.1rem}header .tagline{display:block;font-size:.9rem;text-align:center}.header-nav{margin-left:0;justify-content:center}}@media (max-width: 600px){#generate-button{font-size:1.05rem;padding:12px 15px}.output-content h4{font-size:1.1rem}#interactive-steps-container{padding:15px}}.header-nav{display:flex;gap:15px;flex-wrap:wrap}.header-nav:not(.lite) .nav-btn{background-color:#0056b3;transition:background-color .2s ease;color:var(--header-text)}.header-nav:not(.lite) .nav-btn:hover,.header-nav:not(.lite) .nav-btn:focus-visible{background-color:#003d80}.header-nav:not(.lite) .nav-btn.active{background-color:#006fe6;font-weight:600}.header-nav:not(.lite) .nav-btn.active:hover,.header-nav:not(.lite) .nav-btn.active:focus-visible{background-color:#0062cd}.header-nav.lite .nav-btn{color:#0056b3;transition:color .2s ease}.header-nav.lite .nav-btn:hover,.header-nav.lite .nav-btn:focus-visible{color:#003d80}.header-nav.lite .nav-btn.active{color:#006fe6;font-weight:600}.header-nav.lite .nav-btn.active:hover,.header-nav.lite .nav-btn.active:focus-visible{color:#0062cd}.header-nav .nav-btn{display:flex;align-items:center;gap:.25em;text-decoration:none;padding:8px 12px;border-radius:.5em;font-weight:500;white-space:nowrap}@media (max-width: 768px){.header-nav{gap:10px}.header-nav .nav-btn{padding:6px 10px;font-size:.95rem}}
