*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;background:#f7f8fb;color:#172033}header{height:68px;padding:0 max(24px,6vw);display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid #e8ebf0;position:sticky;top:0}header b{font-size:24px;color:#0b7a5c}nav{color:#667085}.hero{margin:44px auto 28px;padding:48px;border-radius:28px;background:linear-gradient(135deg,#eaf9f3,#eef3ff);max-width:1100px}.hero h1{font-size:48px;margin:12px 0}.hero p{font-size:18px;color:#667085}.hero input{width:100%;padding:18px;border:1px solid #d9dee8;border-radius:14px;font-size:16px;margin-top:18px}main section:not(.hero){max-width:1100px;margin:0 auto 36px;padding:0 10px}.chips{display:flex;gap:10px;flex-wrap:wrap}.chips button{border:1px solid #dfe4ec;background:#fff;padding:10px 14px;border-radius:999px;cursor:pointer}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.grid article{background:#fff;border:1px solid #e8ebf0;border-radius:18px;padding:14px;box-shadow:0 8px 24px #1018280d}.cover{height:160px;border-radius:14px;background:#eef2f6;display:grid;place-items:center;font-size:42px;overflow:hidden}.cover img{width:100%;height:100%;object-fit:cover}.grid h3{margin-bottom:6px}.grid p,small,.empty{color:#667085}@media(max-width:800px){nav{display:none}.hero{margin:18px}.hero h1{font-size:36px}.grid{grid-template-columns:1fr}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.notice{background:#fff7e8;border:1px solid #ecd6aa;border-radius:16px;padding:22px!important;color:#674822}.notice p{line-height:1.5;margin:8px 0}.notice button{margin-top:8px;border:0;background:#0b7a5c;color:#fff;padding:10px 16px;border-radius:10px;font:inherit;cursor:pointer}.chips button[aria-pressed=true]{background:#0b7a5c;border-color:#0b7a5c;color:#fff}button:focus-visible,input:focus-visible{outline:3px solid #96d5c5;outline-offset:3px}.demo-label{display:block;margin-top:8px;font-size:12px;color:#8b651a}.grid,.hero{overflow-wrap:anywhere}@media(max-width:800px){.hero{padding:24px}.notice{margin:0 18px 28px!important}.hero h1{font-size:clamp(30px,8vw,36px)}}
