: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%, #d8eee6 0, transparent 30rem), #f4f0e9; }
main { width: min(100% - 38px, 1000px); 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: 550px; margin: 28px 0 46px; color: #4a6770; font-size: 17px; line-height: 1.65; }
wisp-grid { display: block; }
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; }.notes { grid-template-columns: 1fr; } }