:where(.layered-surface){--ls-peek: var(--layered-card-peek);--ls-radius: var(--radius-md);--ls-surface: var(--lc-front-gradient);--ls-filter-shadow: var(--lc-filter-shadow);--ls-plate: var(--color-brand-accent);--ls-border: none;--ls-extent-w: 80%;--ls-extent-h: 80%;--ls-pad: 0px;--ls-cols: minmax(0, 1fr);--ls-rows: minmax(0, 1fr);--ls-areas: "content"}:where(.layered-surface[data-pad=compact]){--ls-pad: var(--space-5)}:where(.layered-surface[data-pad=standard]){--ls-pad: var(--space-6)}:where(.layered-surface[data-pad=spacious]){--ls-pad: var(--space-8)}:where(.layered-surface[data-extent=wide]){--ls-extent-w: 90%}:where(.layered-surface[data-extent=corner]){--ls-extent-w: 35%;--ls-extent-h: 35%}:where(.layered-surface[data-extent=side]){--ls-extent-w: 12%;--ls-extent-h: 50%}.layered-surface{position:relative;display:grid;grid-template-areas:"stack"}.layered-surface__plate{position:absolute;background:var(--ls-plate);border-radius:var(--ls-radius);z-index:0;pointer-events:none}.layered-surface[data-placement=top]>.layered-surface__plate,.layered-surface[data-placement=bottom]>.layered-surface__plate{inline-size:var(--ls-extent-w);block-size:var(--ls-peek);inset-inline-start:50%;translate:-50% 0}.layered-surface[data-placement=top]>.layered-surface__plate{inset-block-start:0}.layered-surface[data-placement=bottom]>.layered-surface__plate{inset-block-end:0}.layered-surface[data-placement=left]>.layered-surface__plate,.layered-surface[data-placement=right]>.layered-surface__plate{inline-size:var(--ls-peek);block-size:var(--ls-extent-h);inset-block-start:50%;translate:0 -50%}.layered-surface[data-placement=left]>.layered-surface__plate{inset-inline-start:0}.layered-surface[data-placement=right]>.layered-surface__plate{inset-inline-end:0}.layered-surface[data-placement=top-left]>.layered-surface__plate,.layered-surface[data-placement=top-right]>.layered-surface__plate,.layered-surface[data-placement=bottom-left]>.layered-surface__plate,.layered-surface[data-placement=bottom-right]>.layered-surface__plate{inline-size:var(--ls-extent-w);block-size:var(--ls-extent-h)}.layered-surface[data-placement=top-left]>.layered-surface__plate{inset-block-start:0;inset-inline-start:0}.layered-surface[data-placement=top-right]>.layered-surface__plate{inset-block-start:0;inset-inline-end:0}.layered-surface[data-placement=bottom-left]>.layered-surface__plate{inset-block-end:0;inset-inline-start:0}.layered-surface[data-placement=bottom-right]>.layered-surface__plate{inset-block-end:0;inset-inline-end:0}.layered-surface__stack{grid-area:stack;position:relative;z-index:1;min-width:0;margin-block-start:var(--ls-offset-block-start, 0px);margin-inline-end:var(--ls-offset-inline-end, 0px);margin-block-end:var(--ls-offset-block-end, 0px);margin-inline-start:var(--ls-offset-inline-start, 0px)}.layered-surface[data-peek-side~=block-start]{--ls-offset-block-start: var(--ls-peek)}.layered-surface[data-peek-side~=block-end]{--ls-offset-block-end: var(--ls-peek)}.layered-surface[data-peek-side~=inline-start]{--ls-offset-inline-start: var(--ls-peek)}.layered-surface[data-peek-side~=inline-end]{--ls-offset-inline-end: var(--ls-peek)}.layered-surface__surface-shadow{position:absolute;inset:0;z-index:0;pointer-events:none;filter:var(--ls-filter-shadow)}.layered-surface__surface{position:absolute;inset:0;background:var(--ls-surface);border:var(--ls-border);border-radius:var(--ls-radius);box-shadow:var(--ls-inset-ring, none)}.layered-surface__body{position:relative;z-index:1;min-width:0;block-size:100%;display:grid;grid-template-columns:var(--ls-cols);grid-template-rows:var(--ls-rows);grid-template-areas:var(--ls-areas)}.layered-surface__content{grid-area:content;position:relative;min-width:0;padding-block-start:var(--ls-pad-block-start, var(--ls-pad));padding-inline-end:var(--ls-pad-inline-end, var(--ls-pad));padding-block-end:var(--ls-pad-block-end, var(--ls-pad));padding-inline-start:var(--ls-pad-inline-start, var(--ls-pad))}.layered-surface[data-footer] .layered-surface__content{padding-block-end:0}.layered-surface__footer{grid-area:footer;position:relative;min-width:0;padding-block-start:0;padding-inline-end:var(--ls-pad-inline-end, var(--ls-pad));padding-block-end:var(--ls-pad-block-end, var(--ls-pad));padding-inline-start:var(--ls-pad-inline-start, var(--ls-pad))}.layered-surface__media{grid-area:media;position:relative;min-width:0}