/* Isolate the page, not main: editor overlays keep their existing stack order. */
body{isolation:isolate}
#main{position:relative}
#main::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background-image:url('../patterns/hexagons.svg');
    background-repeat:repeat;
    background-position:center top;
    background-size:48px 27.712px;
    opacity:.035;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000a 25%,#0004 55%,transparent 90%);
    mask-image:linear-gradient(to bottom,#000 0%,#000a 25%,#0004 55%,transparent 90%);
}
:root[data-theme=light] #main::before{filter:brightness(0)}

/* Keep the glass backdrop separate from the dice's 3D rendering layer. */
.home-hero{position:relative;border-bottom:1px solid color-mix(in srgb,var(--gold) 15%,transparent)}
.home-hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:rgb(0 0 0 / .04);
    -webkit-backdrop-filter:blur(2px);
    backdrop-filter:blur(2px);
}
.home-hero>.container{position:relative;z-index:1}
.page-home .format-section{border-top:0;padding-top:clamp(48px,5vw,64px)}

.home-giveaway{display:flex;align-items:center;gap:24px;margin-top:32px;padding:28px 30px;border:1px solid color-mix(in srgb,var(--gold) 30%,var(--line));border-radius:var(--radius);background:linear-gradient(110deg,color-mix(in srgb,var(--gold) 9%,var(--surface)),color-mix(in srgb,var(--surface) 55%,transparent));-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.home-giveaway-icon{display:grid;place-items:center;flex-shrink:0;width:68px;height:68px;border:1px solid color-mix(in srgb,var(--gold) 25%,transparent);border-radius:16px;background:color-mix(in srgb,var(--gold) 8%,transparent);color:var(--gold)}
.home-giveaway-icon .icon{width:32px;height:32px}
.home-giveaway-copy{min-width:0}
.home-giveaway-copy .eyebrow{color:var(--gold);font-size:9px;letter-spacing:1.4px}
.home-giveaway-copy h2{font-size:27px;letter-spacing:-.8px;margin:9px 0}
.home-giveaway-copy>p:last-child{font-size:12px;line-height:1.8;color:var(--muted)}
.home-giveaway-copy strong{color:var(--text);font-weight:500}
.home-giveaway-action{flex-shrink:0;margin-left:auto;text-align:right}
.home-giveaway-action p{font-size:11px;color:var(--muted);margin-bottom:12px}
.home-giveaway-action .button{min-height:46px}
@media(max-width:950px){.home-giveaway{gap:20px;padding:25px}.home-giveaway-icon{width:54px;height:54px}.home-giveaway-copy>p:last-child{max-width:360px}.home-giveaway-copy strong{display:block}}
@media(max-width:700px){.home-giveaway{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;padding:24px;margin-top:26px}.home-giveaway-copy{grid-column:1;grid-row:1}.home-giveaway-icon{grid-column:2;grid-row:1;align-self:start;width:42px;height:42px;border-radius:11px}.home-giveaway-icon .icon{width:23px;height:23px}.home-giveaway-copy h2{font-size:25px}.home-giveaway-action{grid-column:1/-1;margin:0;text-align:left}.home-giveaway-action .button{width:100%}.home-giveaway-action p{margin-bottom:10px}}
@media(max-width:380px){.home-giveaway{padding:20px;grid-template-columns:minmax(0,1fr)}.home-giveaway-icon{display:none}.home-giveaway-copy h2{font-size:26px}}

:is(.page-home,.page-templates) .template-card :is(.featured-template,.template-preview){
    background:linear-gradient(135deg,#ffffff08,transparent 65%),color-mix(in srgb,var(--surface) 35%,transparent);
    -webkit-backdrop-filter:blur(2px) saturate(125%);
    backdrop-filter:blur(2px) saturate(125%);
}