.hatch-intro{padding-top:70px;padding-bottom:42px;max-width:1180px}.hatch-intro h1{max-width:850px}.hatch-intro .lead{max-width:760px}.hatch-page a{text-decoration:underline;text-underline-offset:4px}.hatch-workspace{display:grid;grid-template-columns:340px minmax(0,1fr);border:1px solid var(--md-line);padding:0;margin-bottom:75px}.hatch-controls{padding:28px;background:#fff9ee}.hatch-controls h2{font-size:1.4rem}.hatch-controls label{display:block;font-size:.85rem;font-weight:600;margin:18px 0 6px}.hatch-controls input,.hatch-controls select{width:100%;min-height:44px;padding:9px 10px;border:1px solid #b8ad99;border-radius:3px;background:#fffdf8;color:#1c2230;font:inherit;font-size:.9rem}.hatch-controls input:disabled{opacity:.5}.hatch-controls small{display:block;font-size:.75rem;line-height:1.5;margin-top:7px}.hatch-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}.hatch-controls button{width:100%;min-height:48px;margin-top:12px;cursor:pointer}.hatch-controls button:disabled{opacity:.5;cursor:not-allowed}.hatch-page :focus-visible{outline:3px solid #0056b3;outline-offset:3px}#hatch-error{color:#a02323;font-size:.85rem;margin-top:12px}.hatch-preview-panel{padding:28px;min-width:0}.hatch-preview-heading{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;margin-bottom:24px}.hatch-preview-heading .eyebrow{margin:0}#hatch-summary{font-size:.8rem}#hatch-preview{display:block;width:100%;background:#eee6d7;border:1px solid #d8cdb8;aspect-ratio:8/5}.hatch-preview-note,.hatch-credit{font-size:.8rem;margin-top:14px}.hatch-credit{border-top:1px solid var(--md-line);padding-top:24px;margin-top:30px}.hatch-code{margin-top:28px}.hatch-code pre{max-height:260px;overflow:auto;font-size:.75rem;padding:20px;background:#10223b;color:#f4ede0;margin-top:12px}.hatch-page summary{cursor:pointer;font-weight:600;min-height:44px;padding:10px 0}.hatch-guide{padding-bottom:60px;scroll-margin-top:100px}.hatch-guide h2{font-size:clamp(1.7rem,3vw,2.5rem)}.hatch-guide ol{padding-left:24px;max-width:900px}.hatch-guide li{padding-left:8px;margin-bottom:20px}.hatch-guide>p{max-width:900px}.hatch-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin:30px 0}.hatch-benefits h3{font-size:1.2rem}.hatch-faq details{border-top:1px solid var(--md-line);padding:8px 0}.hatch-faq details p{max-width:850px;margin-top:10px}@media(max-width:800px){.hatch-workspace{grid-template-columns:1fr;margin-left:5%;margin-right:5%;width:90%}.hatch-intro{padding-top:40px}.hatch-benefits{grid-template-columns:1fr;gap:10px}.hatch-preview-panel,.hatch-controls{padding:22px}}
.hatch-library{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:30px 0}.hatch-library-card{border:1px solid var(--md-line);background:#fff9ee;overflow:hidden}.hatch-library-card img{display:block;width:100%;height:auto;border-bottom:1px solid var(--md-line)}.hatch-library-content{padding:24px}.hatch-library-content h3{font-size:1.35rem}.hatch-library-content .eyebrow{font-size:.7rem}.hatch-library-content p{font-size:.9rem}.hatch-library-content code{display:block;font-size:.75rem;overflow-wrap:anywhere;margin-bottom:20px}.hatch-library-content .btn{display:block;text-align:center;text-decoration:none;min-height:44px}@media(max-width:1000px){.hatch-library{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.hatch-library{grid-template-columns:1fr}}