:root { font-family: system-ui, sans-serif; color: #182e3d; background: #f3f6f8; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; }
main { width: min(640px, 85vw); padding: 3rem 0; position: relative; top: -15vh; }
h1 { font-size: clamp(3rem, 10vw, 5rem); margin: .5rem 0 1.5rem; }
.logo { display: block; position: relative; width: min(100%, 432px); perspective: 600px; transform: translateX(-1.65%); }
.logo img { display: block; width: 100%; height: auto; }
.logo-left { clip-path: inset(0 69.5% 0 0); }
.logo .logo-x, .logo .logo-right { position: absolute; inset: 0; }
.logo-x { clip-path: polygon(30.5% 0, 45% 0, 45% 32%, 44.1% 40%, 44.1% 100%, 30.5% 100%); transform-origin: 37.5% 47.5%; animation: logo-x-turn 5s ease-in-out 1; }
.logo-right { clip-path: polygon(45% 0, 100% 0, 100% 100%, 44.1% 100%, 44.1% 40%, 45% 32%); }
@keyframes logo-x-turn { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
@media (prefers-reduced-motion: reduce) { .logo-x { animation: none; } }
p { line-height: 1.7; }
.eyebrow { color: #226b68; text-transform: uppercase; letter-spacing: .15em; }
.tagline { color: #226b68; }
.page-tabs { display: flex; align-items: flex-start; gap: .5rem; margin-top: 2rem; position: relative; }
.page-tab { min-width: 0; }
.page-tab summary { display: inline-block; padding: 10px 20px; border: 1px solid #ccd8de; border-radius: 8px 8px 0 0; background: #fff; color: #226b68; font-size: 15px; line-height: 20px; font-weight: 500; cursor: pointer; list-style: none; }
.page-tab summary::-webkit-details-marker { display: none; }
.page-tab summary:hover, .page-tab[open] summary { background: #226b68; color: #fff; }
.page-tab summary:focus-visible { outline: 2px solid #226b68; outline-offset: 3px; }
.tab-content { box-sizing: border-box; position: absolute; top: 42px; left: 0; width: 100%; padding: 1.25rem; border: 1px solid #ccd8de; border-radius: 0 8px 8px; background: #fff; }
.tab-content label { display: block; margin-bottom: .35rem; }
.tab-content input { box-sizing: border-box; display: block; width: 100%; padding: .65rem; margin-bottom: 1rem; border: 1px solid #ccd8de; border-radius: 4px; font: inherit; }
.tab-content button { padding: .65rem 1.25rem; border: 0; border-radius: 4px; background: #226b68; color: #fff; font: inherit; }
.tab-content button:disabled { opacity: .55; cursor: not-allowed; }
.tab-content h2 { margin-top: 0; font-size: 1.25rem; }
@media (max-height: 600px) { body { place-items: start center; } main { top: 0; padding-top: 1.5rem; } }
.muted { color: #526674; }
#status { border-top: 1px solid #ccd8de; padding-top: 1.5rem; font-size: .9rem; }