:root{font-family:system-ui,sans-serif;color:#12354b;background:#f7fbfe;line-height:1.6}*{box-sizing:border-box}body{margin:0}header,main,footer{max-width:1180px;margin:auto}header{display:flex;justify-content:space-between;gap:20px;padding:24px}a{color:#006aaf}header a{font-weight:800;text-decoration:none}.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:44px;padding:35px 24px}.eyebrow{font-weight:800;font-size:.8rem;letter-spacing:.1em;color:#0077bd}h1{font-size:clamp(2.2rem,4.5vw,3.7rem);line-height:1.08;margin:16px 0 24px}h2{line-height:1.25}figure{margin:0}img{display:block;width:100%;height:auto;object-fit:contain;border-radius:12px}figcaption,.note{font-size:.85rem;color:#496375}figcaption{margin-top:12px}.button,button{display:inline-block;border:0;border-radius:8px;background:#007ac0;color:white;padding:14px 22px;font:inherit;font-weight:700;text-decoration:none;cursor:pointer}button:disabled{background:#dce7ee;color:#405b6b;cursor:default}.audience{margin:24px;padding:28px;background:#e7f4fc;border-radius:16px}.workspace{display:grid;grid-template-columns:minmax(240px,.65fr) 1fr;gap:50px;padding:40px 24px;align-items:start}.example{max-width:360px}fieldset{border:1px solid #c6dbe8;border-radius:12px;padding:20px;margin:22px 0;background:white}legend{font-weight:700}label{display:block;font-weight:600;margin-top:15px}input,textarea{width:100%;padding:12px;border:1px solid #a4bfce;border-radius:6px;font:inherit;background:white}textarea{min-height:110px}button{margin:8px 8px 8px 0}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #eeaa22;outline-offset:3px}#summary{margin-top:25px;background:white;border:2px solid #007ac0;border-radius:12px;padding:24px}dt{font-weight:700}dd{margin:0 0 14px;overflow-wrap:anywhere;white-space:pre-wrap}[role=status]{overflow-wrap:anywhere}footer{padding:32px 24px}header span{font-size:.85rem}@media(max-width:760px){header{display:block}.hero,.workspace{grid-template-columns:1fr;gap:25px}.hero{padding-top:10px}.example{max-width:250px;margin:auto}h1{font-size:2.5rem}fieldset{padding:15px}}

@media(max-width:760px){header span{display:block;margin-top:6px}}
select{width:100%;padding:12px;border:1px solid #a4bfce;border-radius:6px;font:inherit;background:white}select:focus-visible{outline:3px solid #eeaa22;outline-offset:3px}