:root { color: #173542; background: #edf4ee; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing: border-box; }
body { min-width: 0; margin: 0; background: radial-gradient(circle at 92% 4%, #d9f4e7, transparent 26%), #edf4ee; }
main { width: min(770px, calc(100% - 40px)); margin: 0 auto; padding: clamp(32px, 8vw, 84px) 0; }
.brand { display: inline-block; margin-bottom: 60px; color: #173542; font-size: 15px; font-weight: 820; text-decoration: none; }.brand:hover { color: #2b8e7b; }
.eyebrow { margin: 0 0 16px; color: #2b8e7b; font-size: 11px; font-weight: 830; letter-spacing: .11em; text-transform: uppercase; }
h1 { margin: 0 0 20px; font-size: clamp(48px, 8vw, 78px); letter-spacing: -.06em; line-height: .9; } h1 em { color: #2b8e7b; font-family: Georgia, serif; font-weight: 400; }
.intro { max-width: 620px; margin: 0 0 28px; color: #486870; font-size: 16px; line-height: 1.7; }
.switcher { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin-bottom: 18px; }.switcher button { padding: 9px 12px; color: #355861; background: #f8fcfa; border: 1px solid #b7d3c8; border-radius: 7px; font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; }.switcher button[aria-pressed="true"] { color: #fff; background: #173542; border-color: #173542; }.switcher button:focus-visible, .switcher select:focus-visible { outline: 3px solid rgb(85 214 178 / 50%); outline-offset: 2px; }.switcher label { display: grid; gap: 4px; color: #486870; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }.switcher select { min-height: 35px; padding: 6px 26px 6px 8px; color: #355861; border: 1px solid #b7d3c8; border-radius: 7px; background: #f8fcfa; font: inherit; font-size: 12px; letter-spacing: 0; text-transform: none; }
wisp-tabs { display: block; }
output { display: block; min-height: 24px; margin: 14px 2px 34px; color: #486870; font-size: 13px; font-weight: 680; }
.notes { display: grid; gap: 12px; }.notes div { display: grid; gap: 4px; padding: 16px; background: #f8fcfa; border: 1px solid #c7dfd6; border-radius: 10px; }.notes b { color: #2b8e7b; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }.notes span { color: #526f75; font-size: 13px; line-height: 1.55; }
@media (max-width: 520px) { main { width: min(100% - 32px, 770px); }.brand { margin-bottom: 42px; }.intro { font-size: 15px; } }