*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f8e7c6;color:#673c23;font:17px/1.75 system-ui,-apple-system,sans-serif}a{color:#7832b9;overflow-wrap:anywhere}a:focus-visible{outline:3px solid #3975b5;outline-offset:5px}nav,main,footer{max-width:1000px;margin:auto;padding:24px}nav{display:flex;gap:24px;flex-wrap:wrap;align-items:center}nav .brand{font-weight:900;margin-right:auto;color:#673c23;text-decoration:none}h1{font-size:clamp(2.7rem,8vw,5rem);line-height:1.05;letter-spacing:-.045em;margin:16px 0 24px}h2{font-size:1.5rem;line-height:1.3}h3{font-size:1.1rem}p{max-width:70ch}.eyebrow{text-transform:uppercase;font-size:.75rem;font-weight:800;letter-spacing:.16em;color:#7832b9}.hero,.panel{background:#fff8ea;border:2px solid #e2be84;border-radius:28px;padding:clamp(24px,5vw,56px);box-shadow:0 8px 0 #e9cea0}.hero{margin:20px 0 40px}.lead{font-size:1.2rem;color:#8a6a55}.button{display:inline-block;border-radius:99px;background:#7832b9;color:#fff;text-decoration:none;padding:12px 23px;font-weight:750}.swatches{display:flex;gap:12px;margin:28px 0}.swatches span{height:48px;width:48px;border:3px solid #fff;border-radius:50%;box-shadow:0 3px 0 #e2be84}.swatches span:nth-child(1){background:#ec5a55}.swatches span:nth-child(2){background:#edc64f}.swatches span:nth-child(3){background:#4d8acb}.swatches span:nth-child(4){background:#9760bc}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin:30px 0}.card{padding:24px;background:#fff8ea;border:1px solid #e2be84;border-radius:20px}article{scroll-margin-top:24px}article+article{margin-top:56px;padding-top:40px;border-top:2px solid #e2be84}.updated{color:#8a6a55;font-size:.9rem}section{margin:28px 0}footer{font-size:.9rem;margin-top:40px;padding-bottom:48px}details{border-top:1px solid #e2be84;padding:18px 0}summary{font-weight:750;cursor:pointer}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}.app-icon{display:block;width:112px;height:112px;border-radius:26px;box-shadow:0 5px 0 #e2be84;margin-bottom:28px}.hero .app-icon{float:right;margin:0 0 24px 24px}@media(max-width:480px){.hero .app-icon{float:none;margin:0 0 24px;width:88px;height:88px}}