.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, 0.08) 0px 10px 15px -3px, rgba(0, 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}.app-frame{--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) * 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)}.app-frame.win{--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) * 0.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) * 0.7225 - var(--button-stroke-width)), var(--button-color, var(--button-color-default)) calc(var(--button-size) * 0.7225 - var(--button-stroke-width)) calc(var(--button-size) * 0.7225 + var(--button-stroke-width) * 0.7225), transparent calc(var(--button-size) * 0.7225 + var(--button-stroke-width) * 0.7225)),no-repeat calc(100% - var(--button-inset))/var(--button-size) var(--button-size) linear-gradient(135deg, transparent calc(var(--button-size) * 0.7225 - var(--button-stroke-width)), var(--button-color, var(--button-color-default)) calc(var(--button-size) * 0.7225 - var(--button-stroke-width)) calc(var(--button-size) * 0.7225 + var(--button-stroke-width) * 0.7225), transparent calc(var(--button-size) * 0.7225 + var(--button-stroke-width) * 0.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:normal;line-height:1;letter-spacing:normal;text-align:left;text-overflow:ellipsis;white-space:nowrap;transform:translate(0, -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
 *//*# sourceMappingURL=device-frames.min.css.map */