.app-frame{--background:#fff;--bar-background:#f4f4f4 linear-gradient(180deg,#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:0.875em;--title-weight:600;--url:initial;--url-background:#fff;--url-border-radius:calc(var(--border-radius) * 0.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(180deg,#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) * 0.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:after,.app-frame:before{box-sizing:border-box}.app-frame:before{content:"";display:block;height:var(--bar-height);margin:calc(0px - var(--padding-v, 0px)) calc(0px - var(--padding-h, 0px)) 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
 */