body.examples-page .all-examples-page{width:calc(100% - 96px);max-width:1240px;margin:0 auto;padding:64px 0 100px}
.gallery-heading{text-align:center;max-width:850px;margin:0 auto 58px}
.gallery-heading h1{font:700 clamp(38px,4vw,58px)/1.08 Arial,sans-serif;letter-spacing:-1.8px;margin:8px 0 20px;text-wrap:balance}
.gallery-heading>p{font-size:18px;line-height:1.55;color:#444;margin:0}
body .gallery-create{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:#111;color:#fff;text-decoration:none;border-radius:99px;margin-top:24px;padding:12px 24px}
/* Shared field geometry keeps labels and controls aligned at every width. */
.gallery-toolbar{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr) minmax(220px,.72fr);align-items:end;gap:20px;margin-bottom:32px;text-align:left}
.gallery-toolbar .gallery-field{display:flex;flex-direction:column;align-items:stretch;gap:9px;min-width:0;margin:0;text-align:left;color:#555;font:400 13px/18px Arial,sans-serif}
.gallery-field>label,.gallery-field>span{display:block;margin:0;padding-left:18px;font:inherit;color:inherit;text-align:left}
.gallery-search{display:flex;align-items:center;gap:12px;min-width:0;height:58px;padding:0 17px;background:#f4f4f4;border:1px solid #dedede;border-radius:29px;box-sizing:border-box}
.gallery-search:focus-within{border-color:#6241f5;box-shadow:0 0 0 3px #6241f518}
.gallery-search svg{width:22px;height:22px;flex-shrink:0}
.gallery-search input{width:100%;min-width:0;height:100%;border:0;outline:none;background:transparent;color:#111;font:400 16px/1.4 Arial,sans-serif;padding:0}
.gallery-search input::-webkit-search-cancel-button{display:none}
#gallery-clear{display:flex;align-items:center;justify-content:center;border:0;background:#e5e5e5;color:#111;border-radius:50%;width:32px;height:32px;padding:0;font:400 22px/1 Arial,sans-serif;flex-shrink:0;cursor:pointer}
.gallery-toolbar select{appearance:none;-webkit-appearance:none;box-sizing:border-box;width:100%;min-width:0;max-width:100%;height:58px;margin:0;border:1px solid #dedede;border-radius:29px;padding:0 44px 0 18px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 18px center/16px no-repeat;color:#111;font:600 15px/1.4 Arial,sans-serif;cursor:pointer}
@media(max-width:1000px){.gallery-toolbar{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.gallery-search-field{grid-column:1/-1}}
@media(max-width:580px){.gallery-toolbar{grid-template-columns:minmax(0,1fr);gap:16px;margin-bottom:28px}.gallery-toolbar select{font-size:16px}}
.example-sector{display:none}
.examples-page .example-sector{display:inline-flex;align-self:flex-start;max-width:100%;margin:0 0 15px;padding:7px 11px;border-radius:99px;background:#eee8ff;color:#49309e;font:600 12px/1.3 Arial,sans-serif}
body .examples-grid{margin:0;text-align:left}
#gallery-more,#gallery-reset,#gallery-retry{display:block;width:max-content;max-width:100%;margin:36px auto 0;border:0;border-radius:99px;background:#111;color:#fff;font:700 16px/1.35 Arial,sans-serif;padding:16px 28px;cursor:pointer}
#gallery-empty,#gallery-error{text-align:center;padding:50px 20px;background:#f7f7f7;border-radius:25px}
#gallery-empty h2{font-size:28px;margin:0 0 12px}#gallery-empty p,#gallery-error p{margin:0;color:#555}
body.examples-page [hidden]{display:none!important}
body.examples-page :is(a,button,select):focus-visible{outline:3px solid #6241f5;outline-offset:4px}
.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}
.examples-empty{grid-column:1/-1;text-align:center;color:#666}
@media(max-width:1050px){body.examples-page .all-examples-page{width:calc(100% - 56px)}}
@media(max-width:700px){body.examples-page .all-examples-page{width:calc(100% - 24px);padding:35px 0 65px}.gallery-heading{margin-bottom:35px}.gallery-heading h1{font-size:38px;letter-spacing:-1.2px}.gallery-heading>p{font-size:16px}.gallery-heading>p br{display:none}}
/* A violet chapter of the same Refonte palette. */
html:has(body.examples-page){background:#6241f5}
body.examples-page .gallery-heading{position:relative;isolation:isolate;overflow:hidden;max-width:none;background:#6241f5;color:#fff;border-radius:32px;padding:56px 28px 44px;margin-bottom:46px}
body.examples-page .gallery-heading:before{content:'R';position:absolute;z-index:-1;font:900 430px/.8 Arial,sans-serif;color:#ffffff0b;right:-25px;bottom:-75px;transform:rotate(-15deg);pointer-events:none}
body.examples-page .gallery-heading h1{max-width:900px;margin-left:auto;margin-right:auto;color:#fff}
body.examples-page .gallery-heading>p{color:#fff;max-width:720px;margin:auto}
body.examples-page .gallery-heading .examples-eyebrow{background:#b4fc63;color:#111}
body.examples-page .gallery-create::after{color:#fff}
body.examples-page .gallery-create::before{color:#b4fc63}
@media(max-width:700px){body.examples-page .gallery-heading{padding:36px 18px 28px;border-radius:24px}.gallery-heading h1{font-size:36px}}
/* Hero follows the home outer width; results follow its content column. */
body.examples-page .all-examples-page{width:100%;max-width:none;padding:0 0 100px}
body.examples-page .gallery-heading{width:100%;max-width:none;box-sizing:border-box;margin:0}
body.examples-page .gallery-browser{width:calc(100% - 96px);max-width:1240px;margin:100px auto 0}
@media(max-width:1050px){body.examples-page .gallery-browser{width:calc(100% - 56px)}}
@media(max-width:700px){body.examples-page .gallery-browser{width:calc(100% - 24px);margin-top:68px}}

body.examples-page .gallery-heading{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);align-items:center;gap:32px;text-align:left;min-height:520px;padding:48px 52px}
body.examples-page .gallery-heading:before{display:none}
.gallery-hero-content{position:relative;z-index:1}
body.examples-page .gallery-heading h1{font-size:clamp(38px,3.6vw,58px);margin:8px 0 20px;text-align:left}
body.examples-page .gallery-heading .gallery-hero-content>p{font-size:18px;line-height:1.55;margin:0;color:#fff;max-width:620px}
.gallery-mascot{position:absolute;right:0;top:0;bottom:0;width:43%;pointer-events:none}
.gallery-mascot img{display:block;width:100%;height:112%;max-width:none;object-fit:contain;object-position:center top}
@media(max-width:1050px){body.examples-page .gallery-heading{padding:40px 32px;min-height:480px;gap:20px}body.examples-page .gallery-heading h1{font-size:42px}}
@media(max-width:700px){body.examples-page .gallery-heading{display:block;padding:32px 24px 0;min-height:0;text-align:center}body.examples-page .gallery-heading h1{text-align:center;font-size:36px}body.examples-page .gallery-heading .gallery-hero-content>p{font-size:16px}.gallery-mascot{position:relative;width:100%;height:235px;margin-top:15px;overflow:hidden}.gallery-mascot img{height:370px;object-position:center top}body.examples-page .gallery-heading{border-radius:24px}}