:root { color: #183846; background: #f4f0e9; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing: border-box; } body { min-width: 320px; margin: 0; background: radial-gradient(circle at 82% 5%, #f4d99a 0, transparent 30rem), #f4f0e9; }
main { width: min(100% - 38px, 900px); margin: 0 auto; padding: 36px 0 82px; }.brand { display: inline-block; margin-bottom: 82px; color: #183846; font-size: 15px; font-weight: 800; letter-spacing: -.03em; text-decoration: none; }.brand:hover { color: #227465; }.eyebrow { margin: 0 0 14px; color: #4d7d79; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
h1 { max-width: 660px; margin: 0; color: #0d2c3a; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(48px, 8vw, 88px); font-weight: 500; letter-spacing: -.065em; line-height: .88; } h1 em { color: #2d7c72; font-weight: inherit; }.intro { max-width: 600px; margin: 28px 0 46px; color: #4a6770; font-size: 17px; line-height: 1.65; }
.demo-controls { display: flex; flex-wrap: wrap; gap: 12px; margin: -18px 0 24px; }.demo-controls label { display: grid; gap: 6px; color: #4a6770; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.demo-controls select { min-height: 38px; padding: 7px 28px 7px 10px; color: #173542; border: 1px solid #b9cfcb; border-radius: 8px; background: #fff; font: inherit; font-size: 13px; letter-spacing: 0; text-transform: none; }
form { padding: clamp(20px, 4vw, 38px); background: #fff; border: 1px solid #c8d7d8; border-radius: 12px; box-shadow: 0 18px 38px rgb(14 54 64 / 9%); }.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }.field-grid wisp-field:nth-child(4), .field-grid wisp-field:nth-child(5) { grid-column: span 2; }.actions { display: flex; gap: 11px; margin-top: 28px; } button { min-height: 42px; padding: 9px 14px; border: 1px solid transparent; border-radius: 7px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 760; }.primary { color: #fff; background: #163846; }.secondary { color: #264c57; background: #edf4f1; border-color: #c8d7d8; } button:focus-visible { outline: 3px solid #55d6b2; outline-offset: 2px; } output { display: block; min-height: 24px; margin: 13px 2px 0; color: #4b6871; font-size: 13px; }.notes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 54px; overflow: hidden; color: #d8ece5; background: #c1d6d1; border: 1px solid #c1d6d1; border-radius: 10px; }.notes > div { display: grid; gap: 6px; padding: 24px; background: #183846; }.notes b { color: #f5c86d; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }.notes span { font-size: 14px; line-height: 1.45; } @media (max-width: 600px) { main { padding-top: 25px; }.brand { margin-bottom: 60px; }.intro { margin-bottom: 35px; }.field-grid { grid-template-columns: 1fr; }.field-grid wisp-field:nth-child(4), .field-grid wisp-field:nth-child(5) { grid-column: auto; }.notes { grid-template-columns: 1fr; } }