.app-frame{--background: #fff;--bar-background: #f4f4f4 linear-gradient(to bottom, #fafafa, #f4f4f4);--bar-height: 44px;--border-color: #e3e3e3;--border-radius: 8px;--border-width: 1px;--box-shadow: rgba(0, 0, 0, .08) 0px 10px 15px -3px, rgba(0, 0, 0, .03) 0px 4px 6px -2px;--button-color: initial;--color: initial;--grid-columns: auto;--grid-rows: auto;--padding-h: 20px;--padding-v: 20px;--title: initial;--title-color: #222;--title-size: .875em;--title-weight: 600;--url: initial;--url-background: #fff;--url-border-radius: calc(var(--border-radius) * .6);--url-border-width: 1px;--url-color: #999;--bar-inset: 20px;--button-inset: 20px;--title-inset: 20px;--url-inset: 10px;display:block;position:relative;overflow:auto;margin:1em 0;box-shadow:var(--box-shadow);padding:var(--padding-v, 0) var(--padding-h, 0)!important;border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);background:var(--background);color:var(--color);flex-wrap:wrap;grid-template-rows:var(--bar-height) var(--grid-rows);grid-template-columns:var(--grid-columns)}.app-frame.dark{--background: #262626;--bar-background: #404040 linear-gradient(to bottom, #525252, #404040);--border-color: #525252;--color: #f5f5f5;--title-color: #d4d4d4;--url-background: #737373;--url-border-width: 0;--url-color: #d4d4d4}.app-frame.wireframe{--background: none;--bar-background: none;--border-width: 2px;--url-border-width: 2px;--url-background: none}.app-frame.mac{--button-gap: calc(var(--button-size) * .57);--button-size: 12px;--title-inset: calc((var(--button-inset) * 2) + (var(--button-size) * 3) + (var(--button-gap) * 2));--url-inset: var(--title-inset)}.app-frame.win{--button-gap: var(--button-inset);--button-inset: 25px;--button-size: 10px;--button-stroke-width: 1px;--title-inset: calc((var(--button-inset) * 2) + (var(--button-size) * 3) + (var(--button-gap) * 2));--url-inset: var(--title-inset);--button-color-default: #ccc}.app-frame.dark.win{--button-color-default: #a3a3a3}.app-frame.wireframe{--button-color-default: #d4d4d4}.app-frame.wireframe.dark{--button-color-default: var(--border-color)}.app-frame,.app-frame:before,.app-frame:after{box-sizing:border-box}.app-frame:before{content:"";display:block;height:var(--bar-height);margin-top:calc(0px - var(--padding-v, 0px));margin-left:calc(0px - var(--padding-h, 0px));margin-right:calc(0px - var(--padding-h, 0px));margin-bottom:var(--padding-v);border-bottom-width:var(--border-width);border-bottom-style:inherit;border-bottom-color:var(--border-color);border-top-left-radius:calc(var(--border-radius) - var(--border-width));border-top-right-radius:calc(var(--border-radius) - var(--border-width));background:var(--bar-background);grid-column:1/-1;width:calc(100% + var(--padding-h, 0px) * 2)}.app-frame.mac:before{background:radial-gradient(circle at calc(var(--button-inset) + var(--button-size) * .5) calc(var(--bar-height) / 2),var(--button-color, var(--button-color-default, #ff5f57)) calc(var(--button-size) / 2),transparent calc(var(--button-size) / 2)),radial-gradient(circle at calc(var(--button-inset) + var(--button-size) * 1.5 + var(--button-gap)) calc(var(--bar-height) / 2),var(--button-color, var(--button-color-default, #febc2e)) calc(var(--button-size) / 2),transparent calc(var(--button-size) / 2)),radial-gradient(circle at calc(var(--button-inset) + var(--button-size) * 2.5 + var(--button-gap) * 2) calc(var(--bar-height) / 2),var(--button-color, var(--button-color-default, #28c840)) calc(var(--button-size) / 2),transparent calc(var(--button-size) / 2)),var(--bar-background)}.app-frame.win:before{background:no-repeat calc(100% - (var(--button-inset) + var(--button-size) * 2 + var(--button-gap) * 2))/var(--button-size) var(--button-size) linear-gradient(0deg,transparent calc(var(--button-size) / 2 - var(--button-stroke-width) / 2),var(--button-color, var(--button-color-default)) calc(var(--button-size) / 2 - var(--button-stroke-width) / 2) calc(var(--button-size) / 2 + var(--button-stroke-width) / 2),transparent calc(var(--button-size) / 2 + var(--button-stroke-width) / 2)),no-repeat calc(100% - (var(--button-inset) + var(--button-size) + var(--button-gap)))/var(--button-size) var(--button-size) linear-gradient(0deg,var(--button-color, var(--button-color-default)) var(--button-stroke-width),transparent var(--button-stroke-width) calc(var(--button-size) - var(--button-stroke-width)),var(--button-color, var(--button-color-default)) calc(var(--button-size) - var(--button-stroke-width))),no-repeat calc(100% - (var(--button-inset) + var(--button-size) + var(--button-gap)))/var(--button-size) var(--button-size) linear-gradient(90deg,var(--button-color, var(--button-color-default)) var(--button-stroke-width),transparent var(--button-stroke-width) calc(var(--button-size) - var(--button-stroke-width)),var(--button-color, var(--button-color-default)) calc(var(--button-size) - var(--button-stroke-width))),no-repeat calc(100% - var(--button-inset))/var(--button-size) var(--button-size) linear-gradient(45deg,transparent calc(var(--button-size) * .7225 - var(--button-stroke-width)),var(--button-color, var(--button-color-default)) calc(var(--button-size) * .7225 - var(--button-stroke-width)) calc(var(--button-size) * .7225 + var(--button-stroke-width) * .7225),transparent calc(var(--button-size) * .7225 + var(--button-stroke-width) * .7225)),no-repeat calc(100% - var(--button-inset))/var(--button-size) var(--button-size) linear-gradient(135deg,transparent calc(var(--button-size) * .7225 - var(--button-stroke-width)),var(--button-color, var(--button-color-default)) calc(var(--button-size) * .7225 - var(--button-stroke-width)) calc(var(--button-size) * .7225 + var(--button-stroke-width) * .7225),transparent calc(var(--button-size) * .7225 + var(--button-stroke-width) * .7225)),var(--bar-background)}.app-frame:after{content:"";position:absolute;top:calc(var(--bar-height) / 2);overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Ubuntu,roboto,noto,arial,sans-serif;font-stretch:normal;font-style:normal;font-weight:400;line-height:1;letter-spacing:normal;text-align:left;text-overflow:ellipsis;white-space:nowrap;transform:translateY(-50%)}.app-frame.mac[data-title]:after,.app-frame.mac[data-url]:after{right:var(--bar-inset)}.app-frame.win[data-title]:after,.app-frame.win[data-url]:after{left:var(--bar-inset)}.app-frame.centered[data-title]:after,.app-frame.centered[data-url]:after{left:50%;right:0;min-width:40%;max-width:50%;text-align:center;transform:translate(-50%,-50%)}.app-frame[data-title]:after{content:attr(data-title);left:var(--title-inset);right:var(--title-inset);color:var(--title-color);font-size:var(--title-size);font-weight:var(--title-weight)}.app-frame[data-title=""]:after{content:var(--title)}.app-frame[data-url]:after{content:attr(data-url);left:var(--url-inset);right:var(--url-inset);padding:0 1.25em;box-shadow:inset 0 0 0 var(--url-border-width) var(--border-color);border-radius:var(--url-border-radius);background:var(--url-background);color:var(--url-color);font-size:.8125em;line-height:2em;line-height:clamp(1.8em,var(--bar-height) * .575,2em)}.app-frame[data-url=""]:after{content:var(--url)}.app-frame.borderless{--padding-h: 0px;--padding-v: 0px;border:0}.app-frame.borderless:before{margin:0;border:var(--border-width) solid var(--border-color);border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.app-frame.borderless>*:only-child{display:block;max-width:100%;width:100%;margin:0}.app-frame>iframe:only-child{display:block;max-height:none;max-width:none;width:100%;border:0;margin:0}.app-frame.scrolling{display:grid;align-items:stretch;padding:0!important}.app-frame.scrolling:before{width:auto;margin:0}.app-frame.scrolling>:only-child{overflow:auto;padding:var(--padding-v) var(--padding-h)}/*! CSS Device Frames v1.0.6
 *  https://github.com/jhildenbiddle/css-device-frames#readme
 *  (c) 2021-2024 John Hildenbiddle
 *  MIT license
 */.device-frame.mobile{position:relative;width:375px;height:812px;margin:2rem auto;padding:20px;background:#101010;border-radius:66px;box-shadow:inset 0 0 5px 3px #fff3,0 30px 30px -20px #0000004d,20px 20px 15px -20px #0000004d,-20px 20px 15px -20px #0000004d}.device-frame.mobile:before{content:"";position:absolute;left:50%;transform:translate(-50%);top:0;width:56.6%;height:35px;background:inherit;border-radius:0 0 40px 40px}.device-frame.mobile .content{position:relative;background:var(--sl-color-neutral-0);height:100%;width:100%;border-radius:46px;overflow:hidden}.device-frame.mobile .content:before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%);height:35px;width:58%;background:#101010;border-radius:0 0 40px 40px;z-index:2}.device-frame.mobile .content:after{content:"";position:absolute;top:10px;left:50%;transform:translate(-50%);height:6px;width:15%;background:#1e1e1e;border-radius:20px;z-index:3}.device-frame.mobile .preview-content{padding:50px 20px 20px;height:100%;background:var(--sl-color-neutral-0)}.sl-theme-dark .device-frame.mobile{background:#2a2a2c;box-shadow:inset 0 0 5px 3px #ffffff0d,0 30px 30px -20px #00000080,20px 20px 15px -20px #00000080,-20px 20px 15px -20px #00000080}.sl-theme-dark .device-frame.mobile .content:before{background:#2a2a2c}.sl-theme-dark .device-frame.mobile .content:after{background:#1a1a1c}@media (max-width: 640px){.device-frame.mobile{transform:scale(.9);margin:-1em 0 0 -1em}}.laptop{width:100%}.laptop__screen{position:relative;margin:0 auto;width:80%;padding-top:54%;border-radius:3% 3% 0 0/5% 5% 0 0;background:#ddd}.laptop__frame{position:absolute;border-radius:2.8% 2.8% 0 0/4.8% 4.8% 0 0;top:.3%;bottom:0;left:.2%;right:.2%;background:#000}.laptop__display{position:absolute;left:2%;top:6%;right:2%;bottom:6%;background:var(--sl-color-neutral-0);overflow:hidden}.laptop__controls{position:relative;border-radius:1%/2%;background:linear-gradient(to top right,#ddd,#eee);clip-path:polygon(10% 0,90% 0,100% 100%,0% 100%);z-index:1;padding-top:8%}.laptop__keyboard{position:absolute;left:50%;top:10%;height:40%;width:70%;transform:translate(-50%);background:#555;clip-path:polygon(4.5% 0,95.5% 0,100% 100%,0% 100%)}.laptop__touchpad{position:absolute;left:50%;bottom:7%;height:35%;width:30%;transform:translate(-50%);background:#aaa;clip-path:polygon(6% 0,94% 0,100% 100%,0% 100%)}.laptop__depth{margin-top:-.1%;position:relative;padding-top:1.3%;border-radius:0 0 1% 1%/0 0 10% 10%;overflow:hidden;background:linear-gradient(90deg,#aaa,#eee .5%,#8c8c8c 2%,#d2d2d2,#8c8c8c 98%,#eee 99.5%,#aaa)}.laptop__shadow{margin-top:-.4%;padding-top:1.3%;background:#1e1e1eb3;box-shadow:2px 2px 30px #000;border-radius:0 0 10% 10%/0 0 100% 100%}.sl-theme-dark .laptop__screen{background:#333}.sl-theme-dark .laptop__controls{background:linear-gradient(to top right,#333,#444)}.sl-theme-dark .laptop__keyboard{background:#222}.sl-theme-dark .laptop__touchpad{background:#444}.sl-theme-dark .laptop__depth{background:linear-gradient(90deg,#464646,#585858 .5%,#282828 2%,#3c3c3c,#282828 98%,#585858 99.5%,#464646)}.laptop__display .preview-content{height:100%;background:var(--sl-color-neutral-0)}.laptop__display sl-divider[vertical]::part(base){height:100%;width:1px;background-color:var(--sl-color-neutral-200);margin:0}.sl-theme-dark .laptop__display,.sl-theme-dark .laptop__display .preview-content{background:var(--sl-color-neutral-0)}@media (max-width: 1024px){.laptop{transform:none}}div.preview-email-static{border:2px solid var(--sl-color-primary-600);border-radius:var(--sl-border-radius-x-large);padding:var(--sl-spacing-small);margin:calc(-1 * var(--sl-spacing-small));margin-bottom:var(--sl-spacing-small)}div.preview-email-static:hover,div.preview-email-fake:hover{background:var(--sl-color-neutral-100)}div.preview-sender{color:var(--sl-color-neutral-900);font-weight:var(--sl-font-weight-semibold);line-height:var(--sl-line-height-dense)}div.preview-subject{color:var(--sl-color-neutral-900);line-height:var(--sl-line-height-dense)}div.preview-body{color:var(--sl-color-neutral-600);line-height:var(--sl-line-height-dense)}sl-avatar.preview-avatar-mobile{--size: 1.85rem}div.preview-email-mobile>div.preview-sender{font-size:var(--sl-font-size-small)}div.preview-email-mobile>div.preview-subject{font-size:var(--sl-font-size-x-small)}div.preview-email-mobile>div.preview-body{font-size:var(--sl-font-size-x-small)}sl-avatar.preview-avatar-desktop{--size: 1.75rem}div.preview-email-desktop>div.preview-sender{font-size:var(--sl-font-size-small)}div.preview-email-desktop>div.preview-subject{font-size:var(--sl-font-size-x-small)}div.preview-email-desktop>div.preview-body{font-size:var(--sl-font-size-x-small)}div.preview-email-app-placeholder{color:var(--sl-color-neutral-400);font-size:var(--sl-font-size-large);font-weight:var(--sl-font-weight-normal)}@media (max-width: 1667px){div.preview-email-desktop>div.preview-sender{font-size:var(--sl-font-size-x-small)}div.preview-email-desktop>div.preview-subject,div.preview-email-desktop>div.preview-body{font-size:var(--sl-font-size-2x-small)}div.preview-email-app-placeholder{font-size:var(--sl-font-size-medium);font-weight:var(--sl-font-size-light)}}