*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--safe-area-inset-left: env(safe-area-inset-left,0px);--safe-area-inset-right: env(safe-area-inset-right,0px);--safe-area-inset-top: env(safe-area-inset-top,0px);--safe-area-inset-bottom: env(safe-area-inset-bottom,0px);--titlebar-area-inset-top: env(titlebar-area-y,0px);--titlebar-area-inset-width-left: env(titlebar-area-x,0px);--titlebar-area-inset-width-right: calc(100vw - env(titlebar-area-width,100vw) - var(--titlebar-area-inset-width-left));--titlebar-area-inset-height: env(titlebar-area-height,0px);--font-family-interface: -apple-system, BlinkMacSystemFont, "Rubik", sans-serif;--font-family-code: ui-monospace, "Noto Sans Mono", "Cousine", monospace;--line-height-code: 1.4;--transition-fast: 80ms;--selection-color: inherit;--selection-background: #75b1ff38;--selection-background-inactive: #a1a1a138;--scrollbar-width: 16px;--scrollbar-height: 16px;--scrollbar-border-width: 4px}@media not (display-mode: window-controls-overlay){:root{--titlebar-area-inset-top: 0px;--titlebar-area-inset-width-left: 0px;--titlebar-area-inset-width-right: 0px;--titlebar-area-inset-height: 0px}}:root:-moz-window-inactive{--selection-background: var(--selection-background-inactive)}html{width:100%;height:calc(100% + var(--safe-area-inset-top));background:#121212;overflow:hidden}body{position:fixed;width:100%;height:100%;display:flex;flex-direction:column;color:#ccc;font-size:14px;font-family:var(--font-family-interface);background:inherit;overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}body:after{content:"";position:absolute;width:100%;height:100%;background:#1e1e1e;z-index:4;transition:opacity .25s}:root:not(.startup-fade) body:after{opacity:0;pointer-events:none}body.split.horizontal[data-scaling-change]{cursor:col-resize}body.split.vertical[data-scaling-change]{cursor:row-resize}#root{display:contents}button{color:inherit;font:inherit;border-radius:0}a{color:inherit;text-decoration:none}num-text,.Editor{--padding: 8px;caret-color:var(--color);font-family:var(--font-family-code);line-height:var(--line-height-code);--selection-background: inherit;--selection-background-inactive: inherit;background:var(--background);--background: #2d2d2d}@supports not selector(::-webkit-scrollbar){num-text,.Editor{scrollbar-color:#808080 var(--background)}}num-text::part(container),.Editor::part(container){border-radius:inherit}input:is([type=text],[type=url]){padding:8px;color:#eaeaea;caret-color:#eaeaea;font-size:13px;font-family:var(--font-family-code);line-height:var(--line-height-code);background:#2d2d2d;border:none;border-radius:0;outline:none;-webkit-appearance:none;appearance:none}input[type=url]:invalid{color:#ffa600;caret-color:#ffa600;background:#362f21}input[type=url]:valid:not(:placeholder-shown):focus{color:#60df20;caret-color:#60df20;background:#2a3126}::placeholder{color:inherit;opacity:.55;white-space:pre-wrap}::selection{color:var(--selection-color);background:var(--selection-background)}::selection:window-inactive{background:var(--selection-background-inactive)}.tab{display:flex;justify-content:center;align-items:center;background:none;border:var(--tab-border-width) solid transparent;--tab-border-width: 1px;border-radius:calc(6px + var(--tab-border-width));border-bottom-left-radius:0;border-bottom-right-radius:0}.tab .option{margin:calc(var(--option-border-width) * -1);padding:4px;display:flex;align-items:center;background:none;background-clip:padding-box;border:var(--option-border-width) solid transparent;--option-border-width: 4px;border-radius:calc(4px + var(--option-border-width));outline:none}.tab .option:where(:hover,:active,:focus-visible){color:#fff;background-color:#ffffff24}.tab .option svg{width:8px;height:8px;fill:currentColor}menu-drop{color:inherit;font:inherit;line-height:16px}menu-drop{--list-padding-x: 0px;--list-padding-y: 6px;--list-border-width: 1px;--option-padding-x: 11px;--option-padding-y: 3px;--option-icon-gap: 10px;--option-selected-icon-width: 5px}menu-drop::part(opener){border:none;outline:none}menu-drop::part(body){font-size:13px}menu-drop::part(list){--list-position-x: calc(100% + max(0px,var(--list-border-width))) ;background:#2e2e2e;border:var(--list-border-width) solid transparent;border-radius:calc(var(--list-padding-y) + var(--list-border-width));box-shadow:0 5px 10px #00000060;visibility:hidden;opacity:.25;transform:scale(.5);transition-property:opacity,transform}menu-drop::part(list left){transform-origin:left calc(var(--list-position-y) * -1)}menu-drop::part(list right){transform-origin:right calc(var(--list-position-y) * -1)}menu-drop::part(list main){--list-position-x: 0;border-top:none;border-top-left-radius:0;border-top-right-radius:0;transform:scaleY(.5);transform-origin:center top}menu-drop::part(list open){visibility:visible;opacity:1;transform:scale(1);transition-duration:.13s}menu-drop::part(option){--option-color-interact: #ffffff;text-decoration:none;--option-background-color-interact: #0763d5bf;--sub-list-option-color-interact: #ffffff;--sub-list-option-background-color-interact: #ffffff1c;border:1px solid transparent}menu-drop[data-select]::part(option):before{content:"";height:var(--option-selected-icon-width);background:currentColor;-webkit-mask:var(--option-selected-icon-mask);mask:var(--option-selected-icon-mask);--option-selected-icon-mask: url(data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20512%20512%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d%3D%22m63.346%20191.15%20192.72%20192.72-63.402%2063.402-192.72-192.72z%22%2F%3E%0A%20%20%3Cpath%20d%3D%22m129.5%20383.87%20319.15-319.15%2063.402%2063.402-319.15%20319.15z%22%2F%3E%0A%3C%2Fsvg%3E);transform:translate(-50%) scale(2);transform-origin:center}menu-drop::part(icon){width:16px;height:16px}menu-drop::part(icon invert){filter:invert(1) hue-rotate(180deg)}menu-drop::part(icon rounded){border-radius:3px}menu-drop::part(shortcut){font-size:12px;--shortcut-opacity: .5}menu-drop::part(divider){opacity:.6}.select{margin:calc(var(--select-padding) * -1);padding:var(--select-padding);--select-padding: 4px;display:flex;justify-content:center;gap:6px}.select label{display:flex;align-items:center;transition:color var(--transition-fast)}.select:where(:hover,:active,:focus-within) label,.select:where(:hover,:active,:focus-within) menu-drop::part(opener){color:#fff}.select menu-drop::part(opener){padding:2px 8px;min-width:74px;background:#444;border:1px solid transparent;border-radius:5px;box-shadow:0 1px 2px #00000028;transition:var(--transition-fast);transition-property:color,background-color,border-color,border-radius}.select:hover menu-drop::part(opener){background:#4f4f4f}.select menu-drop::part(opener):where(:hover,:active,:focus-visible),.select:focus-within menu-drop::part(opener),.select menu-drop[data-open]::part(opener){color:#fff;background:#4f4f4f}.select menu-drop::part(opener):focus-visible{border-color:silver}.select menu-drop[data-open]::part(opener){border-bottom-left-radius:0;border-bottom-right-radius:0}:root.apple-home-screen #file_menu::part(create-window-option){display:none}#install_button,#theme_button{padding:3px 8px}:root:not(.install-prompt-available) #settings_menu::part(install-option),:root:not(.install-prompt-available) #install_option,:root:not(.install-prompt-available) #install_button{display:none}:root:not(.service-worker-activated) #settings_menu::part(clear-site-caches-option),:root:not(.service-worker-activated) #clear_site_caches_button{display:none}#preview_base_card input[type=url]{box-sizing:content-box;min-width:calc(var(--placeholder-count, 0) * 1ch);max-width:min(40ch,75vw);width:calc(var(--input-count, 0) * 1ch)}#uuid_generator_card input[type=text]{width:220px;cursor:grab}main .workspace .workspace-tabs{--workspace-tabs-padding: 6px;flex-shrink:0;display:flex;align-items:center;box-shadow:0 -1px 0 var(--workspace-accent) inset,0 -1px 0 var(--workspace-background) inset;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;transition:calc(var(--main-transition-duration) * .5);transition-property:none}main .workspace .workspace-tabs:before,main .workspace .workspace-tabs:after{content:"";height:100%;flex-shrink:0;pointer-events:none}body:where([data-view-change],[data-orientation-change]):not([data-scaling-change]) main .workspace .workspace-tabs:before,body:where([data-view-change],[data-orientation-change]):not([data-scaling-change]) main .workspace .workspace-tabs:after{transition:width var(--main-transition-duration)}main .workspace .workspace-tabs:before{width:calc(var(--safe-area-inset-left) + var(--workspace-tabs-padding))}main .workspace .workspace-tabs:after{margin-left:auto;width:calc(var(--safe-area-inset-right) + var(--workspace-tabs-padding) + var(--minimize-tab-width, 0px))}main .workspace .workspace-tabs[data-minimize-change]:after{transition:width calc(var(--main-transition-duration) * .55)}body.split.horizontal main .workspace .workspace-tabs:after{width:var(--workspace-tabs-padding)}body.preview.horizontal main .workspace .workspace-tabs:after{width:var(--workspace-tabs-padding)}main .workspace .workspace-tabs::-webkit-scrollbar{display:none}main .workspace .workspace-tabs .tab{margin-right:-1px;margin-top:3px;padding:calc(6px - var(--tab-border-width));padding-left:calc(10px - var(--tab-border-width));padding-bottom:calc(8px - var(--tab-border-width));position:relative;min-width:80px;flex-shrink:0;gap:6px;justify-content:space-between;color:#aaa;font-size:12px;background:none;outline:none}main .workspace .workspace-tabs .tab:not([data-editor-change]):not(.active)+.tab:not([data-editor-change]):not(.active):before,main .workspace .workspace-tabs>.tab:not([data-editor-change]):not(.active)+:nth-last-child(2):not([data-editor-change]):not(.active):before,main .workspace .workspace-tabs>.tab+:nth-last-child(2):not([data-editor-change]):not(.active):after{content:"";position:absolute;right:100%;width:1px;height:14px;background:currentColor;opacity:.5;pointer-events:none;z-index:1}main .workspace .workspace-tabs>.tab+:nth-last-child(2):not([data-editor-change]):not(.active):after{left:100%;right:unset}main .workspace .workspace-tabs .tab:focus-visible{border-bottom-color:#ffffff80}main .workspace .workspace-tabs .tab.active{color:#eaeaea;background:var(--workspace-background);border-left-color:var(--workspace-accent);border-top-color:var(--workspace-accent);border-right-color:var(--workspace-accent)}body[data-editor-change] main .workspace .workspace-tabs .tab[data-editor-change]{margin-right:var(--tab-margin-right);opacity:0;pointer-events:none;transform:scale(0);transform-origin:left center;transition:inherit;transition-property:margin-right,opacity,transform}main .workspace .workspace-tabs .tab[data-editor-unsaved]{font-style:italic}main .workspace .workspace-tabs .tab [data-editor-rename]{margin:calc((var(--editor-rename-padding-y) + var(--editor-rename-border-width)) * -1) calc((var(--editor-rename-padding-x) + var(--editor-rename-border-width)) * -1);padding:var(--editor-rename-padding-y) var(--editor-rename-padding-x);--editor-rename-padding-x: 4px;--editor-rename-padding-y: 3px;min-width:calc(var(--editor-name-width) + (var(--editor-rename-padding-x) + var(--editor-rename-border-width)) * 2);width:calc(var(--editor-rename-width, 0px) + var(--editor-rename-border-width) * 2);color:inherit;font:inherit;background:none;border:var(--editor-rename-border-width) solid rgba(255,255,255,.5019607843);--editor-rename-border-width: 1px;border-radius:4px}main .workspace .workspace-tabs .tab [data-editor-name]{pointer-events:none}main .workspace .workspace-tabs .tab [data-editor-rename]~[data-editor-name]{display:none}main .workspace .workspace-tabs .tab[data-editor-unsaved] [data-editor-name]:after{content:"*";margin-left:.5ch;font-size:13px;font-style:normal;line-height:12px}main .workspace .workspace-tabs .create-editor-button{margin-left:calc(var(--workspace-tabs-padding) + 1px);margin-bottom:1px;padding:6px;display:flex;align-items:center;color:#aaa;background:none;border:none;border-radius:6px;outline:none}main .workspace .workspace-tabs .create-editor-button:only-child{display:none}main .workspace .workspace-tabs .create-editor-button:where(:hover,:active,:focus-visible){color:#fff;background-color:#ffffff24}main .workspace .workspace-tabs .create-editor-button svg{width:8px;height:8px;fill:currentColor;transform:rotate(45deg)}main .workspace .workspace-editors{position:relative;width:100%;height:100%;display:flex;justify-content:center;align-items:center;border:0 solid transparent}:root:not(.startup-fade) main .workspace .workspace-editors:empty{border-width:0 var(--safe-area-inset-right) var(--safe-area-inset-bottom) var(--safe-area-inset-left)}:root:not(.startup-fade) body:where([data-view-change],[data-orientation-change]):not([data-scaling-change]) main .workspace .workspace-editors:empty{transition:var(--main-transition-duration);transition-property:border-width,border-color}:root:not(.startup-fade) main .workspace .workspace-editors:empty:before{content:"No Editors Open";padding:8px;text-align:center}:root:not(.startup-fade) body[data-view-change] main .workspace .workspace-editors:empty:before{white-space:nowrap}:root:not(.startup-fade) body:where([data-view-change],[data-orientation-change]):not([data-scaling-change]) main .workspace .workspace-editors:empty:before{transition:transform var(--main-transition-duration)}:root:not(.startup-fade) body.preview main .workspace .workspace-editors:empty:before{transform:scale(0)}:root:not(.startup-fade) body.split.horizontal main .workspace .workspace-editors:empty{border-right-width:0}:root:not(.startup-fade) body.preview.horizontal main .workspace .workspace-editors:empty{border-right-width:0}@media (orientation: portrait) and (max-aspect-ratio: 5/8){:root:not(.startup-fade) body.split.horizontal main .workspace .workspace-editors:empty{border-bottom-color:var(--preview-border-color)}:root:not(.startup-fade) body.preview.horizontal main .workspace .workspace-editors:empty{border-bottom-color:var(--preview-border-color)}}:root:not(.startup-fade) body.split.vertical main .workspace .workspace-editors:empty{border-bottom-width:0}:root:not(.startup-fade) body.preview.vertical main .workspace .workspace-editors:empty{border-bottom-width:0}main .workspace{position:absolute;left:0;top:0;display:flex;flex-direction:column}body:where([data-view-change],[data-orientation-change]):not([data-scaling-change]) main .workspace{transition:var(--main-transition-duration);transition-property:width,height,opacity}body.code main .workspace{width:100%;height:100%}body.split.horizontal main .workspace{width:calc(50% - var(--scaler-size) * .5);height:100%}body.split.vertical main .workspace{width:100%;height:calc(50% - var(--scaler-size) * .5 - var(--safe-area-inset-bottom) * .5)}body.split.horizontal[data-scaling-active] main .workspace{width:calc(var(--scaling-offset) - var(--scaler-size) * .5)}body.split.vertical[data-scaling-active] main .workspace{height:calc(var(--scaling-offset) - var(--scaler-size) * .5)}body.preview main .workspace{opacity:0}body.preview.horizontal main .workspace{width:0%;height:100%}body.preview.vertical main .workspace{width:100%;height:0%}body[data-scaling-change] main .workspace{pointer-events:none}main .workspace .Editor{position:absolute;width:100%;height:100%;--background: var(--workspace-background);border:solid transparent;border-width:0 var(--safe-area-inset-right) var(--safe-area-inset-bottom) var(--safe-area-inset-left);visibility:hidden;--scrollbar-width: 18px;--scrollbar-height: 18px;--scrollbar-border-width: 5px}body:where([data-view-change],[data-orientation-change]):not([data-scaling-change]) main .workspace .Editor{transition:var(--main-transition-duration);transition-property:border-width,border-color}body.split.horizontal main .workspace .Editor{border-right-width:0}body.preview.horizontal main .workspace .Editor{border-right-width:0}@media (orientation: portrait) and (max-aspect-ratio: 5/8){body.split.horizontal main .workspace .Editor{border-bottom-color:var(--preview-border-color)}body.preview.horizontal main .workspace .Editor{border-bottom-color:var(--preview-border-color)}}body.split.vertical main .workspace .Editor{border-bottom-width:0}body.preview.vertical main .workspace .Editor{border-bottom-width:0}main .workspace .Editor:not(.active){z-index:-1}main .workspace .Editor.active{visibility:visible}.Card{--card-header-padding-right: max(var(--safe-area-inset-right),8px);display:flex;flex-direction:column;background:#212121;border:var(--card-border-width) solid rgba(255,255,255,.1411764706);--card-border-width: 1px;border-radius:var(--card-border-radius);box-shadow:0 8px 15px #00000050;overflow:hidden;z-index:var(--card-z-index);--card-z-index: 1;transition:var(--card-transition-duration);--card-transition-duration: calc(var(--main-transition-duration) * .55);transition-property:visibility,opacity,transform}.Card:not([data-active]){visibility:hidden;opacity:0;pointer-events:none}.Card[data-active]{visibility:visible;opacity:1;z-index:calc(var(--card-z-index) + 1)}.Card:not([data-type=dialog]){margin:var(--margin) max(var(--safe-area-inset-right),var(--margin)) max(var(--safe-area-inset-bottom),var(--margin)) max(var(--safe-area-inset-left),var(--margin))}.Card .header{display:flex;justify-content:center;align-items:center;background:#ffffff12;border-bottom:var(--card-header-border-width) solid #000000;--card-header-border-width: 1px}.Card .header .card-back{margin-right:auto;padding:10px;display:flex;background:none;border:none;outline:none}.Card .header:not([data-card-parent]) .card-back{display:none}.Card .header .card-back:where(:hover,:active,:focus-visible){color:#fff;background:#ffffff24}.Card .header .card-back svg{width:12px;height:12px;fill:currentColor}.Card .header .icon{margin:8px 0 8px 12px;width:20px;height:20px}.Card .header .heading{white-space:pre;z-index:-1}.Card:not([data-type=alert]) .header .heading{position:absolute}.Card .header .card-controls{margin-left:auto;display:flex}.Card .header .card-controls .control{padding:var(--control-padding, 0px);display:flex;background:var(--control-background);border:none;outline:none;--control-padding: 10px;--control-background: none}.Card .header .card-controls .control:where(:hover,:active,:focus-visible){color:#fff;--control-background: #ffffff24}.Card .header .card-controls .control[data-control=close]:where(:hover,:active,:focus-visible){--control-background: #cc2a24}.Card:not([data-type=widget]) .header .card-controls .control[data-control=minimize]{display:none}.Card .header .card-controls .control svg{width:12px;height:12px;fill:currentColor}.Card .header .card-controls .control[data-control=close]:hover svg{color:#fff}.Card .main{display:flex;flex-direction:column}.Card:not([data-type=widget]) .main{padding:16px;gap:16px}.Card .main .content{display:flex;justify-content:space-around}.Card .main .content .item{display:flex;flex-direction:column;align-items:center}.Card:not([data-type=widget]) .main .content .item{gap:16px}.Card .main .content .item.start{align-items:flex-start}.Card .options{display:flex;justify-content:center;align-items:center}.Card:not([data-type=widget]) .options{gap:16px}.Card .main button{padding:2px 8px;min-width:74px;display:flex;justify-content:center;align-items:center;gap:8px;background:#444;border:1px solid transparent;border-radius:5px;box-shadow:0 1px 2px #00000028;outline:none;transition:var(--transition-fast);transition-property:color,background-color,border-color,border-radius}.Card .main button:where(:hover,:active,:focus-visible){color:#fff;background:#4f4f4f}.Card .main button:focus-visible{border-color:silver}.Card .main button.warning:where(:hover,:active,:focus-visible){background:#b12f25}.Card .options button>img{width:16px;height:16px}.Card .options button>svg{width:12px;height:12px;fill:currentColor}.Card num-text{width:32ch;height:12ch;--background: #2d2d2d;border-radius:6px}.Card num-text.expand{height:20ch}.Card num-text::part(container):before{content:"";position:absolute;width:100%;height:100%;border-radius:inherit;box-shadow:0 2px 3px #00000090 inset;pointer-events:none;z-index:2}.Card input:is([type=text],[type=url]){border-radius:6px;box-shadow:0 2px 3px #00000090 inset}.Card[data-type=widget]{--margin: 8px;position:absolute;right:0;top:0;--card-border-radius: 12px;transform-origin:center top}.Card[data-type=widget]:not([data-active]){transform:scaleY(.25)}.Card[data-type=widget][data-minimize-change]{transition-property:margin-right,margin-top,border-top-right-radius,border-bottom-right-radius,box-shadow,visibility,opacity,transform}.Card[data-type=widget].minimize{margin-right:calc(var(--card-border-width) * -1);margin-top:3px;--card-border-radius: 10px;border-top-right-radius:0;border-bottom-right-radius:0;box-shadow:0 4px 7px #00000050}.Card[data-type=widget][data-minimize-change] .header{background-clip:content-box;transition:var(--card-transition-duration);transition-property:margin-bottom,border-color}.Card[data-type=widget].minimize .header{margin-bottom:calc(var(--card-header-border-width) * -1);border-color:transparent}.Card[data-type=widget][data-minimize-change] .header .heading{transform-origin:calc(50% - (var(--card-minimize-width) + var(--card-header-padding-right)) * .5) center;transition:var(--card-transition-duration);transition-property:visibility,opacity,transform}.Card[data-type=widget].minimize .header .heading{visibility:hidden;opacity:0;transform:scale(0)}.Card[data-type=widget].minimize .header .card-controls .control{--control-padding: 6px}.Card[data-type=widget].minimize .header .card-controls .control[data-control=minimize]{border-radius:calc(var(--card-border-radius) - var(--card-border-width))}.Card[data-type=widget].minimize .header .card-controls .control[data-control=close]{margin-left:var(--card-header-padding-right);margin-right:calc(var(--card-minimize-width) * -1);visibility:hidden;opacity:0}.Card[data-type=widget][data-minimize-change] .header .card-controls .control{transition:var(--card-transition-duration);transition-property:padding}.Card[data-type=widget][data-minimize-change] .header .card-controls .control[data-control=minimize]{transition-property:padding,border-radius}.Card[data-type=widget][data-minimize-change] .header .card-controls .control[data-control=close]{transition-property:margin-left,margin-right,padding,visibility,opacity}.Card[data-type=widget].minimize .header .card-controls .control[data-control=minimize] svg{transform:rotateY(180deg)}.Card[data-type=widget][data-minimize-change] .header .card-controls .control[data-control=close] svg{transition:transform var(--card-transition-duration)}.Card[data-type=widget].minimize .header .card-controls .control[data-control=close] svg{transform:scale(0)}.Card[data-type=widget] .main{padding:14px;gap:14px;transform-origin:calc(100% - (var(--card-minimize-width) + var(--card-header-padding-right)) * .5) top}.Card[data-type=widget][data-minimize-change] .main{transition:var(--card-transition-duration);transition-property:margin-left,margin-bottom,visibility,opacity,transform}.Card[data-type=widget].minimize .main{margin-left:calc((var(--card-main-width) - var(--card-header-padding-right)) * -1 + var(--card-minimize-width));margin-bottom:calc(var(--card-main-height) * -1);visibility:hidden;opacity:0;transform:scale(0)}.Card[data-type=widget] .main .content .item,.Card[data-type=widget] .options{gap:14px}header{padding-top:calc(var(--safe-area-inset-top) + var(--titlebar-area-inset-top));position:relative;--header-height: max(var(--titlebar-area-inset-height),34px);display:flex;align-items:center;--header-gap: 8px;gap:var(--header-gap);font-size:13px;background:#1e1e1e;border-bottom:1px solid #000000}header:before,header:after{content:"";height:var(--header-height);flex-shrink:0;-webkit-app-region:no-drag}header:before{width:calc(var(--safe-area-inset-left) + var(--titlebar-area-inset-width-left))}header:after{width:calc(var(--safe-area-inset-right) + var(--titlebar-area-inset-width-right))}body[data-scaling-change] header{pointer-events:none}header .app-region{margin:var(--app-region-margin);margin-bottom:0;--app-region-margin: 4px;position:absolute;left:0;top:0;width:calc(100% - var(--app-region-margin) * 2);height:calc(100% - var(--app-region-margin));z-index:-1;-webkit-app-region:drag}@media (display-mode: window-controls-overlay){header .app-region{--app-region-margin: calc(var(--titlebar-area-inset-height) * .12)}}header .app-icon{flex-shrink:0;display:flex}@media (display-mode: window-controls-overlay){:root.macOS-device header .app-icon{display:none}}header .app-icon img{width:16px;height:16px}header .app-menubar{min-width:0;align-self:stretch;display:flex;z-index:3;-webkit-app-region:no-drag}header .app-menubar menu-drop{min-width:0}header .app-menubar menu-drop::part(opener){min-width:unset;padding:0 8px;background:none;overflow:hidden;text-overflow:ellipsis}header .app-menubar menu-drop::part(opener):where(:hover,:focus-visible),header .app-menubar menu-drop[data-open]::part(opener){color:#fff;background:#ffffff24}header .app-omnibox{margin-left:auto;height:var(--header-height);align-self:flex-start;flex-shrink:0;display:flex;align-items:center;gap:var(--header-gap);color:#fff}@media (display-mode: window-controls-overlay){:root:not(.startup-fade) header .app-omnibox{z-index:5}:root:not(.macOS-device) header .app-omnibox{margin-right:calc(var(--header-gap) * -1)}:root.macOS-device header .app-omnibox{margin-right:-4px}}header .app-omnibox button{background:none;border:none;outline:none}header .app-omnibox a{cursor:default}header .app-omnibox .option{padding:5px;display:flex;gap:8px;align-items:center;border-radius:12px;outline:none;transition:background-color .25s linear;-webkit-app-region:no-drag}header .app-omnibox .option:hover{background-color:#ffffff14}header .app-omnibox .option:where(:active,:focus-visible){background-color:#fff2}header .app-omnibox .option svg{width:14px;height:14px;flex-shrink:0;fill:currentColor}.card-backdrop{position:fixed;left:0;top:0;width:100%;height:100%;background:#1e1e1e60;z-index:3;transition:calc(var(--main-transition-duration) * .5);transition-property:visibility,opacity}.card-backdrop:not(.active){visibility:hidden;opacity:0;pointer-events:none}.card-backdrop.active{visibility:visible;opacity:1}.Card[data-type=alert]{--margin: 16px;position:absolute;right:0;bottom:0;--card-border-radius: 10px;pointer-events:none;--card-z-index: 5}.Card[data-type=alert]:not([data-active]){transform:translate(calc(100% + var(--margin) * 2))}.Card[data-type=alert] .header .heading{margin:0 auto}.Card[data-type=alert] .header .card-controls{display:none}main .preview{position:absolute;right:0;bottom:0;width:100%;height:50%;background:#fff;border:solid var(--preview-border-color);border-width:0 var(--safe-area-inset-right) var(--safe-area-inset-bottom) var(--safe-area-inset-left);z-index:1}body:where([data-view-change],[data-orientation-change]):not([data-scaling-change]) main .preview{transition:var(--main-transition-duration);transition-property:width,height,border-width,visibility,opacity}body.code main .preview{visibility:hidden;opacity:0}body.code.horizontal main .preview{width:0%;height:100%;border-left-width:0}body.code.vertical main .preview{width:100%;height:0%}body.split.horizontal main .preview{width:calc(50% - var(--scaler-size) * .5);height:100%;border-left-width:0}body.split.vertical main .preview{width:100%;height:calc(50% - var(--scaler-size) * .5 + var(--safe-area-inset-bottom) * .5)}body.split.horizontal[data-scaling-active] main .preview{width:calc(100% - var(--scaling-offset) - var(--scaler-size) * .5)}body.split.vertical[data-scaling-active] main .preview{height:calc(100% - var(--scaling-offset) - var(--scaler-size) * .5)}body.preview main .preview{width:100%;height:100%}body[data-scaling-change] main .preview{pointer-events:none}.Card[data-type=dialog]{position:absolute;--card-border-radius: 14px;--card-z-index: 3}.Card[data-type=dialog]:not([data-active]){transform:scale(.5)}.Card[data-type=dialog] .header .heading{font-size:16px}main .scaler{position:absolute;background:#424242;border:0 solid transparent;box-shadow:0 0 2px 1px #00000028;touch-action:none;z-index:1;transition:background-color var(--transition-fast)}body:where([data-view-change],[data-orientation-change]):not([data-scaling-change]) main .scaler{transition:var(--main-transition-duration);transition-property:left,top,width,height,border-width,border-color,opacity}main .scaler:hover,body[data-scaling-change] main .scaler{background:#4f4f4f}body.code main .scaler{--scaler-size: 0px;opacity:0}body.preview main .scaler{--scaler-size: 0px;opacity:0}body.horizontal main .scaler{top:0;width:var(--scaler-size);height:100%;cursor:col-resize}@media (orientation: portrait) and (max-aspect-ratio: 5/8){body.horizontal main .scaler{border-bottom-width:var(--safe-area-inset-bottom);border-bottom-color:var(--preview-border-color)}}body.vertical main .scaler{left:0;width:100%;height:var(--scaler-size);cursor:row-resize}body.code.horizontal main .scaler{left:100%}body.code.vertical main .scaler{top:100%}body.split.horizontal main .scaler{left:calc(50% - var(--scaler-size) * .5)}body.split.vertical main .scaler{top:calc(50% - var(--scaler-size) * .5 - var(--safe-area-inset-bottom) * .5)}body.split.horizontal[data-scaling-active] main .scaler{left:calc(var(--scaling-offset) - var(--scaler-size) * .5)}body.split.vertical[data-scaling-active] main .scaler{top:calc(var(--scaling-offset) - var(--scaler-size) * .5)}body.preview.horizontal main .scaler{left:calc(var(--scaler-size) * -1)}body.preview.vertical main .scaler{top:calc(var(--scaler-size) * -1)}.checkbox{margin:calc(var(--checkbox-padding) * -1);padding:calc(var(--checkbox-padding) - var(--checkbox-border-width));--checkbox-padding: 4px;display:flex;justify-content:center;align-items:center;border:var(--checkbox-border-width) solid transparent;--checkbox-border-width: 1px;--checkbox-check-border-width: 2px;border-radius:calc(var(--checkbox-padding) + var(--checkbox-border-width) + var(--checkbox-check-border-width));outline:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:var(--transition-fast);transition-property:color,border-color,opacity}.checkbox:where(:hover,:active,:focus-visible){color:#fff}.checkbox:active{opacity:.85}.checkbox:focus-visible{border-color:silver}.checkbox input[type=checkbox]{display:none}.checkbox label{display:flex;align-items:center;gap:6px;--check-padding: 2px;--check-size: 12px;pointer-events:none}.checkbox label:before{content:"";padding:var(--check-padding);width:calc(var(--check-size) + (var(--check-padding) + var(--checkbox-check-border-width)) * 2);height:calc(var(--check-size) + (var(--check-padding) + var(--checkbox-check-border-width)) * 2);background:#ffffff0c;border:var(--checkbox-check-border-width) solid currentColor;border-radius:calc(var(--check-padding) + var(--checkbox-check-border-width) * 2);transition:background-color var(--transition-fast)}.checkbox:where(:hover,:active,:focus-visible) label:before{background:#ffffff1c}.checkbox label svg{padding:calc(var(--check-padding) + var(--checkbox-check-border-width));position:absolute;width:calc(var(--check-size) + (var(--check-padding) + var(--checkbox-check-border-width)) * 2);height:calc(var(--check-size) + (var(--check-padding) + var(--checkbox-check-border-width)) * 2);fill:currentColor;transform:rotate(-45deg) scale(0);transform-origin:45% 65%;transition:transform 125ms ease-in}.checkbox input[type=checkbox]:checked+label svg{transform:rotate(0) scale(1);transition-timing-function:ease-out}main{padding:0 var(--safe-area-inset-right) var(--safe-area-inset-bottom) var(--safe-area-inset-left);position:relative;flex-grow:1;display:flex;justify-content:center;align-items:center;overflow:hidden;--workspace-background: #222222;--workspace-accent: #ffffff24;--scaler-size: 16px;--preview-border-color: #181818;--main-transition-duration: .4s}