:root{font-family:system-ui,sans-serif;color:#1e2935;background:#f5f6f8;font-size:16px}*{box-sizing:border-box}body{margin:0}header{display:flex;align-items:center;gap:1.5rem;padding:1.25rem 5%;border-bottom:1px solid #dae0e7;background:white}.brand{font-weight:750;font-size:1.2rem;text-decoration:none}header span{font-size:.7rem;letter-spacing:.14em;color:#516374}nav{margin-left:auto;display:flex;gap:1rem}a{color:#245c86}main{max-width:1200px;padding:2.5rem 2rem;margin:auto}h1{font-size:2.3rem;letter-spacing:-.04em;margin:1rem 0}h2{font-size:1.15rem}.intro{max-width:70ch;color:#526273}aside{padding:1rem;background:#eaf0f6;border-radius:.5rem;margin:1rem 0;line-height:1.5}.demo{background:#fff0ca;color:#6c4b03}.card{padding:1.5rem;border:1px solid #dce1e8;background:white;border-radius:.8rem;margin:1rem 0}.narrow{max-width:640px}label{display:flex;flex-direction:column;gap:.4rem;font-size:.85rem;font-weight:600;margin-bottom:1rem}input{font:inherit;padding:.7rem;border:1px solid #a8b5c3;border-radius:.35rem;width:100%}button,.button{display:inline-block;background:#174f78;color:white;border:1px solid #174f78;border-radius:.35rem;padding:.7rem 1rem;font:inherit;text-decoration:none;cursor:pointer}button.secondary{background:white;color:#174f78;margin-top:.8rem}p{line-height:1.6}.mail-layout{display:grid;grid-template-columns:190px 1fr;gap:2rem}.folders{background:transparent;padding:0}.folders a{display:block;margin:1rem 0}.search{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}.search label{margin:0}.messages{margin-bottom:1.5rem}.message{display:grid;gap:.5rem;padding:1.2rem;background:white;border-bottom:1px solid #dde4ed;text-decoration:none}.message span,.message time{color:#526273;font-size:.85rem}.body{white-space:pre-wrap;overflow-wrap:anywhere;background:white;padding:1.5rem;border:1px solid #dce1e8;border-radius:.5rem;font:1rem/1.7 system-ui,sans-serif}footer{max-width:1200px;margin:2rem auto;padding:1rem 2rem;color:#637183;font-size:.8rem}input:focus,button:focus,a:focus{outline:3px solid #e2af37;outline-offset:3px}@media(max-width:700px){main{padding:1.3rem}.mail-layout{grid-template-columns:1fr}.search{grid-template-columns:1fr}.folders a{display:inline-block;margin-right:1rem}header{gap:.75rem}}