.front{isolation:isolate;height:100svh;min-height:32rem;position:relative;container:front/size}.front__ground{z-index:var(--z-ground,1);background-color:var(--stage-ground,var(--stage-dark));pointer-events:none;position:absolute;inset:0}.front__field{z-index:calc(var(--z-stack,2) - 1)}.front__stage{z-index:var(--z-stack,2);contain:layout paint;width:100%;height:100%;position:relative;overflow:hidden}.front__placeholder{padding:var(--space-gutter);pointer-events:none;place-items:end start;display:grid;position:absolute;inset:0}.front__overlay{--front-edge:clamp(1.25rem, 4.5cqw, 72px);--front-top:clamp(4rem, 23.67cqh, 213px);--front-bottom:clamp(1.5rem, 10cqh, 90px);--front-col-gap:22px;--front-rule-gap:10px;height:min(100svh,100%);z-index:var(--z-text,3);padding:var(--front-top) var(--front-edge) var(--front-bottom);pointer-events:none;grid-template-rows:auto 1fr auto;display:grid;position:absolute;inset:0 0 auto}.front__slot{align-items:start;gap:var(--front-col-gap);flex-wrap:wrap;min-width:0;display:flex}.front__slot[data-slot=bottom]{grid-row:3}.front__block{flex:0 1 var(--tb-width-d);min-width:0;max-width:100%;font-family:var(--tb-face-d);font-size:var(--tb-size-d);font-weight:var(--tb-weight-d);line-height:var(--tb-leading-d);letter-spacing:var(--tb-tracking-d);color:var(--tb-color-d);text-align:var(--tb-align-d);text-transform:var(--tb-case-d);text-wrap:pretty;margin:0}.front__block[data-rule]{border-top:var(--border-hair) solid var(--front-rule);padding-top:var(--front-rule-gap)}.front__block-label{color:var(--tb-label-color-d);display:block}.front__block-label:empty{display:none}.front__block-body{display:block}.front__block-line{margin:var(--tb-gap-d) 0 0;display:block}.front__block-line:first-of-type{margin-top:var(--tb-label-gap-d)}.front__caption,.front__placeholder-label{font-family:var(--font-brand-mono);font-size:var(--text-sm);letter-spacing:.01em;text-transform:uppercase;line-height:1}.front__placeholder-label{color:var(--front-muted)}.front[data-stage=dark]{--front-text:#fff;--front-muted:gray;--front-rule:#2c2c2c;color:#e9edf2}.front[data-stage=white]{--front-text:#0d0d0d;--front-muted:#666;--front-rule:#d6d6d6;color:#16181d}@container front (max-width:48rem){.front__slot:has(>.front__block:not([data-placed-m])~.front__block:not([data-placed-m]))>.front__block:not([data-placed-m]){flex-basis:min(var(--tb-width-m,var(--tb-width-d)), calc((100% - var(--front-col-gap) - 1px) / 2))}.front__block{flex-basis:var(--tb-width-m,var(--tb-width-d));font-family:var(--tb-face-m,var(--tb-face-d));font-size:var(--tb-size-m,var(--tb-size-d));font-weight:var(--tb-weight-m,var(--tb-weight-d));line-height:var(--tb-leading-m,var(--tb-leading-d));letter-spacing:var(--tb-tracking-m,var(--tb-tracking-d));color:var(--tb-color-m,var(--tb-color-d));text-align:var(--tb-align-m,var(--tb-align-d));text-transform:var(--tb-case-m,var(--tb-case-d))}.front__block-label{color:var(--tb-label-color-m,var(--tb-label-color-d))}.front__block-line{margin-top:var(--tb-gap-m,var(--tb-gap-d))}.front__block-line:first-of-type{margin-top:var(--tb-label-gap-m,var(--tb-label-gap-d))}}@container front (not (max-width:48rem)) and (not (min-width:64rem)){.front__block{flex-basis:var(--tb-width-t,var(--tb-width-d));font-family:var(--tb-face-t,var(--tb-face-d));font-size:var(--tb-size-t,var(--tb-size-d));font-weight:var(--tb-weight-t,var(--tb-weight-d));line-height:var(--tb-leading-t,var(--tb-leading-d));letter-spacing:var(--tb-tracking-t,var(--tb-tracking-d));color:var(--tb-color-t,var(--tb-color-d));text-align:var(--tb-align-t,var(--tb-align-d));text-transform:var(--tb-case-t,var(--tb-case-d))}.front__block-label{color:var(--tb-label-color-t,var(--tb-label-color-d))}.front__block-line{margin-top:var(--tb-gap-t,var(--tb-gap-d))}.front__block-line:first-of-type{margin-top:var(--tb-label-gap-t,var(--tb-label-gap-d))}}@container front (max-height:40rem){.front__overlay{--front-top:3.5rem;--front-bottom:1.25rem}}@container front (min-width:64rem){.front__block[data-placed-d]{left:calc(var(--tb-drag-x,var(--tb-x-d)) * 1cqw);top:calc(var(--tb-drag-y,var(--tb-y-d)) * 1cqh);width:var(--tb-width-d);max-width:calc((100 - var(--tb-drag-x,var(--tb-x-d))) * 1cqw - var(--front-edge));position:absolute}.front__block[data-placed-d][data-pin-x=left]{left:var(--tb-left-d);max-width:calc(100cqw - var(--tb-left-d) - var(--front-edge))}.front__block[data-placed-d][data-pin-x=right]{left:calc(100cqw - var(--tb-far-x-d));max-width:calc(var(--tb-far-x-d) - var(--front-edge))}.front__block[data-placed-d][data-pin-x=center]{left:calc(50cqw + var(--tb-cx-d));max-width:calc(50cqw - var(--tb-cx-d) - var(--front-edge))}.front__block[data-placed-d][data-pin-x=stretch]{left:var(--tb-left-d);right:var(--tb-right-d);width:auto;max-width:none}.front__block[data-placed-d][data-pin-y=top]{top:var(--tb-top-d)}.front__block[data-placed-d][data-pin-y=bottom]{top:calc(100cqh - var(--tb-bottom-d))}.front__block[data-placed-d][data-pin-y=center]{top:calc(50cqh + var(--tb-cy-d))}.front__block[data-placed-d][data-dragging]{left:calc(var(--tb-drag-x) * 1cqw);top:calc(var(--tb-drag-y) * 1cqh);width:var(--tb-width-d);max-width:calc((100 - var(--tb-drag-x)) * 1cqw - var(--front-edge));right:auto}}@container front (not (max-width:48rem)) and (not (min-width:64rem)){.front__block[data-placed-t]{left:calc(var(--tb-drag-x,var(--tb-x-t,var(--tb-x-d))) * 1cqw);top:calc(var(--tb-drag-y,var(--tb-y-t,var(--tb-y-d))) * 1cqh);width:var(--tb-width-t,var(--tb-width-d));max-width:calc((100 - var(--tb-drag-x,var(--tb-x-t,var(--tb-x-d)))) * 1cqw - var(--front-edge));position:absolute}.front__block[data-placed-t][data-pin-x=left]{left:var(--tb-left-t,var(--tb-left-d));max-width:calc(100cqw - var(--tb-left-t,var(--tb-left-d)) - var(--front-edge))}.front__block[data-placed-t][data-pin-x=right]{left:calc(100cqw - var(--tb-far-x-t,var(--tb-far-x-d)));max-width:calc(var(--tb-far-x-t,var(--tb-far-x-d)) - var(--front-edge))}.front__block[data-placed-t][data-pin-x=center]{left:calc(50cqw + var(--tb-cx-t,var(--tb-cx-d)));max-width:calc(50cqw - var(--tb-cx-t,var(--tb-cx-d)) - var(--front-edge))}.front__block[data-placed-t][data-pin-x=stretch]{left:var(--tb-left-t,var(--tb-left-d));right:var(--tb-right-t,var(--tb-right-d));width:auto;max-width:none}.front__block[data-placed-t][data-pin-y=top]{top:var(--tb-top-t,var(--tb-top-d))}.front__block[data-placed-t][data-pin-y=bottom]{top:calc(100cqh - var(--tb-bottom-t,var(--tb-bottom-d)))}.front__block[data-placed-t][data-pin-y=center]{top:calc(50cqh + var(--tb-cy-t,var(--tb-cy-d)))}.front__block[data-placed-t][data-dragging]{left:calc(var(--tb-drag-x) * 1cqw);top:calc(var(--tb-drag-y) * 1cqh);width:var(--tb-width-t,var(--tb-width-d));max-width:calc((100 - var(--tb-drag-x)) * 1cqw - var(--front-edge));right:auto}}@container front (max-width:48rem){.front__block[data-placed-m]{left:calc(var(--tb-drag-x,var(--tb-x-m)) * 1cqw);top:calc(var(--tb-drag-y,var(--tb-y-m)) * 1cqh);width:var(--tb-width-m,var(--tb-width-d));max-width:calc((100 - var(--tb-drag-x,var(--tb-x-m))) * 1cqw - var(--front-edge));position:absolute}.front__block[data-placed-m][data-pin-x=left]{left:var(--tb-left-m);max-width:calc(100cqw - var(--tb-left-m) - var(--front-edge))}.front__block[data-placed-m][data-pin-x=right]{left:calc(100cqw - var(--tb-far-x-m));max-width:calc(var(--tb-far-x-m) - var(--front-edge))}.front__block[data-placed-m][data-pin-x=center]{left:calc(50cqw + var(--tb-cx-m));max-width:calc(50cqw - var(--tb-cx-m) - var(--front-edge))}.front__block[data-placed-m][data-pin-x=stretch]{left:var(--tb-left-m);right:var(--tb-right-m);width:auto;max-width:none}.front__block[data-placed-m][data-pin-y=top]{top:var(--tb-top-m)}.front__block[data-placed-m][data-pin-y=bottom]{top:calc(100cqh - var(--tb-bottom-m))}.front__block[data-placed-m][data-pin-y=center]{top:calc(50cqh + var(--tb-cy-m))}.front__block[data-placed-m][data-dragging]{left:calc(var(--tb-drag-x) * 1cqw);top:calc(var(--tb-drag-y) * 1cqh);width:var(--tb-width-m,var(--tb-width-d));max-width:calc((100 - var(--tb-drag-x)) * 1cqw - var(--front-edge));right:auto}}.front__fallback{inset:auto auto var(--space-gutter) var(--space-gutter);z-index:var(--z-content);max-width:min(36rem, calc(100% - var(--space-gutter) * 2));position:absolute}.front__caption{color:var(--front-muted);margin:0}.front__fallback ul{gap:var(--space-2xs) var(--space-md);margin:var(--space-2xs) 0 0;flex-wrap:wrap;padding:0;list-style:none;display:flex}.front__fallback a{text-decoration-color:currentColor}.front__plate{z-index:var(--z-overlay);opacity:0;pointer-events:none;will-change:opacity;position:fixed;inset:0}
