.preview-browser-toolbar{display:flex;align-items:end;justify-content:space-between;gap:24px;margin:24px 0 18px}.preview-search-label{font-size:12px;color:#666;display:grid;gap:8px;width:min(100%,380px)}.preview-search-label input{width:100%;border:1px solid #ddd;border-radius:3px;padding:13px;font:inherit;background:white;color:#222}.preview-categories{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}.preview-categories button{border:1px solid #ddd;border-radius:3px;background:white;color:#555;font:inherit;font-size:12px;padding:10px 13px;cursor:pointer}.preview-categories button[aria-pressed=true]{background:#202020;color:white;border-color:#202020}.preview-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:38px 28px}.public-feature-card{min-width:0}.public-feature-open{display:block;width:100%;border:0;padding:0;text-align:left;background:none;color:#222;font:inherit;cursor:pointer}.public-feature-screen{position:relative;background:#000;padding:8px;border-radius:5px}.public-feature-screen canvas{display:block;width:100%;height:auto;aspect-ratio:2}.public-feature-open h3{font-size:19px;margin:16px 0 7px}.public-feature-category{font-size:11px;color:#777}.public-feature-card p{font-size:12px;line-height:1.7;margin:10px 0 0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.preview-sample-chip{position:absolute;right:12px;bottom:12px;background:#111d;color:#d8d8d8;padding:3px 5px;font-size:8px;letter-spacing:.7px}.preview-more{display:block;margin:32px auto 0}.public-feature-open:focus-visible,.preview-categories button:focus-visible{outline:2px solid #00695c;outline-offset:5px}.feature-preview-dialog{width:min(720px,calc(100vw - 32px));max-height:90dvh;overflow:auto;border:1px solid #ddd;border-radius:6px;padding:28px;box-sizing:border-box;background:white;color:#222}.feature-preview-dialog::backdrop{background:#0009}.preview-dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px}.preview-dialog-heading h2{font-size:26px;margin:0}.preview-dialog-heading button{white-space:nowrap}.public-preview-stage{background:#181818;padding:12px;border-radius:5px}.public-preview-stage canvas{width:100%;height:auto;display:block}.feature-preview-dialog>p{font-size:13px;line-height:1.7}.feature-preview-dialog .hint{font-size:11px}.public-preview-controls{display:flex;flex-wrap:wrap;align-items:center;gap:18px;padding:16px 0;border-top:1px solid #eee}.public-preview-controls label{display:flex;align-items:center;gap:9px;font-size:12px}.public-preview-controls input[type=color]{width:34px;height:30px;padding:0;border:0;background:none}.public-preview-controls input[type=range]{width:110px}.public-preview-custom:empty{display:none}.public-preview-custom{margin:8px 0 20px}.feature-preview-dialog>.button{margin-top:8px}.public-browser-page{max-width:1280px;margin:auto;padding:42px 48px 72px}.public-browser-heading h1{font-size:clamp(32px,4vw,48px);margin:12px 0}.public-browser-heading p{max-width:630px;line-height:1.8}.companion-callout{display:flex;align-items:center;gap:28px;border:1px solid #e5e5e5;background:#fafafa;padding:28px;margin-top:48px;border-radius:5px}.companion-callout img{border-radius:18px;width:80px;height:80px}.companion-callout h3{margin:0 0 8px;font-size:22px}.companion-callout p{font-size:13px;line-height:1.7;margin:0}.companion-callout .button{margin-left:auto;white-space:nowrap}.companion-shell{max-width:1080px;padding:60px 36px;margin:auto}.companion-hero{display:grid;grid-template-columns:180px 1fr;gap:48px;align-items:center}.companion-hero img{width:180px;height:180px;border-radius:34px;box-shadow:0 16px 40px #002a2c22}.companion-hero h1{font-size:clamp(32px,4vw,48px);line-height:1.12;margin:14px 0 18px}.companion-hero p{max-width:560px;font-size:15px;line-height:1.8}.companion-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}.companion-details{margin-top:50px;padding:24px;background:#f5f5f5;border-radius:4px}.companion-details h2{font-size:23px}.companion-details p,.companion-details li{font-size:14px;line-height:1.8}.companion-links{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}.companion-links a{border:1px solid #e3e3e3;padding:24px;border-radius:4px}.companion-links strong{display:block;margin-bottom:8px;font-size:17px}.companion-links span{font-size:13px;line-height:1.7;color:#666}.companion-status{font-size:12px;color:#666;line-height:1.8} [hidden]{display:none!important}@media(max-width:750px){.preview-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 16px}.public-browser-page{padding:28px 20px 48px}.preview-browser-toolbar{align-items:start;flex-direction:column;gap:6px}.preview-browser-toolbar p{margin:0}.preview-categories{gap:6px}.preview-categories button{font-size:11px;padding:9px}.public-feature-open h3{font-size:16px}.companion-callout{flex-wrap:wrap;padding:20px;gap:16px}.companion-callout>div{flex:1;min-width:170px}.companion-callout .button{margin-left:0}.companion-shell{padding:35px 20px}.companion-hero{grid-template-columns:1fr;gap:22px}.companion-hero img{width:100px;height:100px;border-radius:22px}.companion-links{grid-template-columns:1fr}.feature-preview-dialog{padding:18px}.preview-dialog-heading h2{font-size:22px}}

/* Give the public feature browser a warm, playful home. */
.storefront .public-browser-page{background:var(--site-backdrop)}.storefront:has(.public-browser-page){background:var(--site-backdrop)}.storefront .public-browser-heading .eyebrow{color:#496d45}.storefront .preview-categories button{border-radius:20px;background:#fffaf2;border-color:#d3dcc5;color:#3c5438}.storefront .preview-categories button[aria-pressed=true]{background:#284e3c;color:#fffaf2;border-color:#284e3c}.storefront .public-feature-card{background:#edf2e4;padding:16px;border-radius:16px}.storefront .public-feature-card:nth-child(3n+2){background:#fff0d9}.storefront .public-feature-card:nth-child(3n){background:#e8eff2}.storefront .public-feature-open h3{color:#284e3c}.storefront .companion-callout{background:#ffedc9;border-color:#efd9ad;border-radius:16px}.storefront .feature-preview-dialog{background:#fffaf2;border-radius:16px}
