:root{--font-base:"Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";--font-code:"Monaspace Argon", "Monaco", "Andale Mono", "Lucida Console", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;--body-bg:light-dark(#f8f8f6,#212121);--common-base:light-dark(#f9f9f9,#212121);--common-base-rev:light-dark(#212121,#efeeea);--tooltip-bg-color:light-dark(#f8f8f6,#353535);--modal-bg-color:light-dark(#f8f8f695,#353535);--tooltip-text-color:light-dark(#212121,#ededed);--tooltip-shadow-color:light-dark(#00000015,#00000030);--tooltip-shadow-border:light-dark(#00000040,#00000030);--tooltip-hover:light-dark(#00000012,#00000012);--tooltip-hover-2:light-dark(#00000012,#ededed20);--text-color-0:light-dark(#212121,#f9f9f9);--text-color-1:light-dark(#212121,#ededed);--section-bg-1:light-dark(#21212109,#ededed10);--text-color-2:color-mix(in srgb, var(--text-color-1) 80%, var(--body-bg));--text-color-3:color-mix(in srgb, var(--text-color-1) 50%, var(--body-bg));--text-color-4:color-mix(in srgb, var(--text-color-1) 30%, var(--body-bg));--text-color-5:color-mix(in srgb, var(--text-color-1) 20%, var(--body-bg));--text-color-rev-1:var(--body-bg);--text-color-rev-2:color-mix(in srgb, var(--text-color-rev-1) 80%, #fff);--text-color-rev-3:color-mix(in srgb, var(--text-color-rev-1) 50%, #fff);--text-color-error:#fb423f;--common-border:color-mix(in srgb, var(--text-color-1) 10%, transparent);--common-border-5:color-mix(in srgb, var(--text-color-1) 50%, transparent);--nav-action-hover:light-dark(#2121210f,color-mix(in srgb, var(--common-base-rev) 7%, transparent));--nav-action-hover-2:light-dark(#2121210f,color-mix(in srgb, var(--common-base-rev) 20%, transparent));--border-color-1:light-dark(color-mix(in srgb, #000 10%, var(--body-bg)),color-mix(in srgb, #fff 6%, var(--body-bg)));--border-color-2:color-mix(in srgb, #fff 6%, var(--body-bg));--border-color-3:color-mix(in srgb, #fff 30%, var(--body-bg));--border-color-4:color-mix(in srgb, #fff 40%, var(--body-bg));--border-color-5:color-mix(in srgb, #fff 50%, var(--body-bg));--border-color-6:color-mix(in srgb, #fff 60%, var(--body-bg));--border-color-7:color-mix(in srgb, #fff 70%, var(--body-bg));--border-color-8:color-mix(in srgb, #fff 80%, var(--body-bg));--border-color-9:color-mix(in srgb, #fff 90%, var(--body-bg));--border-color-10:color-mix(in srgb, #fff 95%, var(--body-bg));--border-color-11:light-dark(color-mix(in srgb, #212121 20%, var(--body-bg)),color-mix(in srgb, #fff 35%, var(--body-bg)));--border-color-12:light-dark(color-mix(in srgb, #212121 40%, var(--body-bg)),color-mix(in srgb, #fff 70%, var(--body-bg)));--border-color-rev-1:color-mix(in srgb, #fff 90%, var(--body-bg));--border-color-rev-2:color-mix(in srgb, #fff 20%, var(--body-bg));--icon-color-1:color-mix(in srgb, #fff 12%, var(--body-bg));--common-accent:light-dark(oklch(70.89% .185 75.67),oklch(76.89% .147 75.67));--default-common-accent:light-dark(oklch(70.89% .185 75.67),oklch(76.89% .147 75.67));--header-bg:color-mix(in srgb, #000 2%, var(--body-bg));--header-text-color:var(--text-color-1);--sidebar-bg:light-dark(#efeeea,color-mix(in srgb, #000 20%, var(--body-bg)));--modal-inner-bg:light-dark(#fff,color-mix(in srgb, #000 20%, var(--body-bg)));--modal-bg:light-dark(#efefef,color-mix(in srgb, #fff 8%, var(--body-bg)));--input-placeholder:light-dark(var(--text-color-1),var(--text-color-3));--input-bg:var(--nav-action-hover);--input-bg-focus:light-dark(color-mix(in srgb, #000 15%, var(--body-bg)),#ffffff35);--l-multiplier:1.05;--c-multiplier:1.2;--text-color-accent-0:light-dark(oklch(calc(67.3% * var(--l-multiplier)) calc(.21 * var(--c-multiplier)) 25.039),oklch(67.3% .21 25.039));--text-color-accent-1:light-dark(oklch(calc(57.85% * var(--l-multiplier)) calc(.15 * var(--c-multiplier)) 349.06),oklch(57.85% .15 349.06));--text-color-accent-2:light-dark(oklch(calc(72.4% * var(--l-multiplier)) calc(.16 * var(--c-multiplier)) 19.59),oklch(72.4% .16 19.59));--text-color-accent-3:light-dark(#de9d77,#de9d77);--text-color-accent-4:light-dark(#ffcf96,#ffcf96);--text-color-accent-5:light-dark(#ffb82e,#ffb82e);--text-color-accent-6:light-dark(#b8b9ee,#b8b9ee);--text-color-accent-7:light-dark(#88d2fc,#88d2fc);--text-color-accent-8:light-dark(oklch(calc(66.3% * var(--l-multiplier)) calc(.08 * var(--c-multiplier)) 200.71),oklch(66.3% .08 200.71));--text-color-accent-9:light-dark(#70d18c,#70d18c);--text-color-accent-10:light-dark(oklch(calc(69.1% * var(--l-multiplier)) calc(.12 * var(--c-multiplier)) 151.34),oklch(69.1% .12 151.34));--text-color-accent-11:light-dark(#5071a7,#5071a7);--promo-accent:light-dark(oklch(59.1% .12 151.34),oklch(69.1% .12 151.34))}@keyframes fa-author-colors{0%{background-color:var(--text-color-accent-6)}10%{background-color:var(--text-color-accent-8)}30%{background-color:var(--text-color-accent-2)}50%{background-color:var(--text-color-accent-1)}70%{background-color:var(--text-color-accent-7)}90%{background-color:var(--text-color-accent-8)}to{background-color:var(--text-color-accent-3)}}.uiprogress{pointer-events:none;aspect-ratio:1;border:3px solid var(--common-accent);opacity:0;border-radius:50%;width:31px;transition:opacity .4s;display:block;position:absolute;top:14px;left:4px;&.active{opacity:1;animation:.8s linear infinite alternate l20-1,1.6s linear infinite l20-2}}@keyframes l20-1{0%{clip-path:polygon(50% 50%,0 0,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%)}12.5%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 0%,100% 0%,100% 0%)}25%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 100%,100% 100%,100% 100%)}50%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 100%,50% 100%,0% 100%)}62.5%{clip-path:polygon(50% 50%,100% 0,100% 0%,100% 0%,100% 100%,50% 100%,0% 100%)}75%{clip-path:polygon(50% 50%,100% 100%,100% 100%,100% 100%,100% 100%,50% 100%,0% 100%)}to{clip-path:polygon(50% 50%,50% 100%,50% 100%,50% 100%,50% 100%,50% 100%,0% 100%)}}@keyframes l20-2{0%{transform:scaleY(1)rotate(0)}49.99%{transform:scaleY(1)rotate(135deg)}50%{transform:scaleY(-1)rotate(0)}to{transform:scaleY(-1)rotate(-135deg)}}.loader-linear{z-index:1032;opacity:0;background:var(--common-accent);pointer-events:none;height:4px;transition:opacity .3s;position:absolute;bottom:-3px;left:0;&.active{opacity:1;animation-name:ongoing;animation-duration:20s;animation-timing-function:linear}&.full{opacity:1;animation-name:fullyLoaded}}@keyframes ongoing{0%{width:10%}10%{width:15%}15%{width:15%}20%{width:20%}25%{width:20%}30%{width:25%}35%{width:25%}40%{width:30%}45%{width:30%}50%{width:35%}55%{width:35%}60%{width:40%}65%{width:45%}70%{width:50%}75%{width:55%}80%{width:60%}85%{width:60%}90%{width:25%}95%{width:65%}to{width:65%}}@keyframes fullyLoaded{0%{width:100%}to{width:100%}}#sidebar input[type=text],#content input[type=text],#sidebar input[type=password],#content input[type=password],#sidebar textarea,#content textarea,#sidebar select,#content select{width:100%;height:34px;color:var(--text-color-rev-1);font-family:var(--font-base);box-sizing:border-box;vertical-align:middle;appearance:none;background:#fff;border:none;border-radius:8px;outline:none;padding:0 10px;font-size:13px;&:disabled{background:var(--border-color-2);color:var(--border-color-2)}}#editor{height:calc(100vh - 65px);& .gutter{background:var(--common-border);position:relative;&.gutter-horizontal{cursor:ew-resize;float:left;height:100%;&:after{content:"";z-index:10;width:8px;height:100%;display:block;position:absolute;left:-3px}}&.gutter-vertical{cursor:ns-resize;&:after{content:"";z-index:10;width:100%;height:8px;display:block;position:absolute;top:-3px}}}& .split{box-sizing:border-box}& .panel #panel-code-html,& .panel #panel-code-js,& .panel #panel-code-css{width:100%;height:calc(100% - 55px);margin-top:55px}& .panel{overflow:hidden}& .panel:hover{& .panelTidy,& .iconCont{opacity:1}}& .panel-v{float:left;height:100%;position:relative;overflow:auto}& .panel-h{position:relative;overflow:auto}& .tabsContainer{height:calc(100% - 42px);& .tabCont{height:100%;overflow:hidden;&.hidden{opacity:0;pointer-events:none;position:absolute;top:0;left:0}}}}.windowLabelCont{align-items:center;display:flex;position:absolute;top:0;left:0;right:0;& .isModuleInfo{align-items:center;height:50px;margin-right:10px;display:none;&.visible{display:flex}& em{border:solid 1px var(--common-border);color:var(--text-color-2);text-transform:uppercase;letter-spacing:1px;border-radius:4px;padding:3px 5px;font-size:8px}}& .windowLabel,& .panelTidy{z-index:30;color:var(--text-color-1);cursor:pointer;align-items:center;height:50px;padding:0 15px;font-size:16px;font-weight:700;display:flex;&:hover .iconCont{background-color:var(--common-accent)}& .iconCont{background-color:var(--nav-action-hover);opacity:0;border-radius:20px;justify-content:center;align-items:center;width:18px;height:18px;transition:opacity .2s;display:flex;position:relative;left:10px}& .iconCont,& .label{pointer-events:none}& svg{stroke:currentColor;position:relative;top:1px}&.hidden{display:none}}& .windowLabel{&:after{content:"";pointer-events:none;background:var(--common-accent);border-radius:4px;width:0;height:3px;transition:width .1s;display:block;position:absolute;bottom:3px;left:15px}}&.focused{& .windowLabel{&:after{width:40px}}}& .windowLabel{margin-right:auto}& .panelTidy{opacity:0;transition:opacity .2s}}.resultsPanel{position:relative;& .resultsCont{grid-template-rows:1fr auto;height:100%;display:grid;& .windowLabelCont{&:after,&:before{display:none}}&.consoleEnabled,&.consoleEnabled.minimized{& #console{display:block}}&.consoleEnabled{grid-template-rows:1fr 50%}&.consoleEnabled.minimized{grid-template-rows:1fr 30px;& #console{cursor:pointer;min-height:30px;overflow:hidden;& #console-output{height:0;overflow:hidden}& .consoleActions,& #console-input{display:none}}}}& .iframeCont{overflow:hidden}& iframe{width:100%;height:100%;margin:0;display:block}&.running,& .iframeCont:has(iframe[src=""]){& .windowLabelCont{opacity:0;pointer-events:none}}& iframe[src=""]{display:none}&.running iframe{display:block}& .windowLabelCont{pointer-events:none;justify-content:flex-start;align-items:center;height:40px;display:flex;& .windowLabel{padding-right:0}& .size{color:var(--text-color-2);border:solid 1px var(--border-color-2);background:var(--body-bg);opacity:1;border-radius:3px;align-items:center;height:20px;margin-left:10px;padding:0 6px;font-size:12px;transition:opacity .25s;display:flex;&.hidden{opacity:0}}}}legend{display:none}.windowSettings{& h3{align-items:center;padding:0;font-weight:700;display:flex}& *+h3{margin:25px 0 5px}& section{grid-template-columns:130px auto;margin-bottom:15px;display:grid;&.noCols{grid-template-columns:auto}}& code{background:var(--input-bg-focus);font-size:11px;font-family:var(--font-code);border-radius:6px;margin-right:6px;padding:2px 4px}}.panelExtrasChoice{& li{padding-top:5px;font-size:13px}}#tabs{border-bottom:solid 1px var(--border-color-2);border-top:solid 1px var(--border-color-2);background:var(--header-bg);&.hidden{display:none}& ul{display:flex;position:relative}& .tabItem{position:relative;&.active{box-shadow:0 1px 0 var(--body-bg), 0 -1px 0 var(--common-accent);background:var(--body-bg);& a{color:var(--text-color-1)}}}& a{height:40px;color:var(--text-color-4);border-right:solid 1px var(--border-color-2);align-items:center;padding:0 45px;font-size:13px;display:inline-flex;&:hover{color:var(--text-color-1);text-decoration:none}&:before{content:"";background:var(--common-accent);opacity:0;border-radius:10px;width:6px;height:6px;transition:all .15s;display:block;position:absolute;top:17px;left:15px;transform:scale(.5)}&.modified{&:before{opacity:1;transform:scale(1)}}}}#problem-banner{z-index:90;text-align:center;background:#fff;border-radius:4px;padding:10px 0;font-size:13px;line-height:1.55em;display:none;position:absolute;top:0;left:10px;&.visible{display:block}& a{color:var(--common-accent);font-weight:600}& code{background:var(--border-color-9);font-family:var(--font-code);font-optical-sizing:auto;border-radius:3px;padding:1px 2px;font-size:12px;font-style:normal}}#boilerplates{flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0;& h3{color:var(--text-color-1);margin-bottom:30px;font-size:14px;font-weight:600}& ul.boilerplates{text-align:center;width:80%;& li{margin:0 6px 15px 0;display:inline-flex}& a{background:var(--tooltip-hover-2);color:var(--tooltip-text-color);border-radius:8px;padding:6px 8px;font-size:12px;font-weight:500;display:block;&:hover{background:var(--common-accent);color:var(--common-base);text-decoration:none}}}}#actions{margin-right:10px}.headerActions{height:65px}.headerActions,.commonActions{-webkit-user-select:none;user-select:none;display:flex;position:relative;& svg{pointer-events:none;max-width:18px;max-height:18px}& li{align-items:center;margin:0 2px;display:flex;& a,& aside,& .fxLink{white-space:nowrap;justify-content:center;align-items:center;min-width:36px;height:36px;transition:background-color .1s;display:flex}& a,& .fxLink{font-variation-settings:"wght" 500;cursor:pointer;border-radius:8px;& span{pointer-events:none;margin-left:5px}& input[type=radio]{position:absolute;left:-900em}&:has(span){padding:0 10px}&.mode_public svg,&.mode_private svg{display:none}&.mode_public .tpPublic,&.mode_private .tpPrivate{display:block}}&:hover a,&:hover aside,&:hover .fxLink,&.active a{background:var(--nav-action-hover)}& aside{border-left:solid 1px var(--common-base);cursor:pointer;border-radius:0 8px 8px 0;&:hover{background:var(--nav-action-hover-2)}}&:has(aside){& a{border-radius:8px 0 0 8px}}&.proButton{margin-left:10px;& a{border:solid 1px color-mix(in srgb, var(--text-color-1) 10%, transparent);color:var(--common-accent);&:hover{border:solid 1px var(--common-accent);background:var(--common-base)}}}&.runButton{margin-right:5px}&.runButton,&.selected,&:has(input:checked){& a,& aside,& .fxLink{background:var(--common-accent);color:#fff}}&.hidden{display:none}&.divider{margin:0 10px;&:after{content:"";border-left:solid 1px var(--common-border);width:1px;height:20px;display:block}}}&.smallActions{flex-wrap:wrap;& li{margin-bottom:5px;& a,& aside,& .fxLink{background:var(--nav-action-hover);min-width:28px;height:28px}& a,& .fxLink{font-variation-settings:"wght" 400;border-radius:6px;& span{margin-left:0;font-size:13px}&:has(span){padding:0 8px}}}}}#fiddle-info{z-index:100;display:block;position:relative;left:-50px;& .sidebarToggle{margin-right:20px}& .fiddleAuthor{flex:1;position:relative}& .faCont{margin:0 10px}& .pseudoAvatar{width:25px;height:25px}& input{height:34px;color:var(--text-color-1);font-family:var(--font-base);box-sizing:border-box;vertical-align:middle;appearance:none;background:0 0;border:none;outline:none;width:85%;font-size:14px}}#modal-overlay{pointer-events:none;z-index:1000;background-color:#0000;width:100dvw;height:100dvh;position:fixed;top:0;left:0}body.modalOverlayVisible #modal-overlay{pointer-events:all;background-color:#111111b3}.modalBody{color:var(--text-color-1);justify-content:center;align-items:center;display:none;position:fixed;top:0;left:0;overflow:auto}.modalBody{&.visible{z-index:2000;width:100dvw;height:100dvh;display:flex}&.hasHeader{& .modalApp{grid-template-rows:90px 1fr}}}.modalApp{background-color:var(--modal-bg-color);-webkit-backdrop-filter:blur(10px)brightness(2.7);backdrop-filter:blur(10px)brightness(2.7);width:930px;min-width:900px;height:85vh;min-height:500px;color:var(--text-color-1);box-shadow:0px 8px 16px 0px var(--tooltip-shadow-color), 0px 0px 1px 0px var(--tooltip-shadow-border);border-radius:10px;grid-template-rows:1fr;transition-property:opacity,transform;transition-duration:.12s;transition-timing-function:ease-out;display:grid;overflow:hidden;transform:scale3d(.98,.98,.98);& header{flex-direction:column;justify-content:center;align-items:flex-start;padding-left:20px;display:flex;position:relative;& h1{color:var(--text-color-0);margin-bottom:5px;font-size:23px;font-weight:700}& h2{opacity:.5}}& .external,& .closeModal{border-radius:5px;justify-content:center;align-items:center;width:35px;height:35px;display:flex;position:absolute;top:10px;right:10px;& svg{pointer-events:none}&:hover{background-color:var(--tooltip-hover-2);text-decoration:none}}& .external{right:50px}}.modalContent{& iframe{background:0 0;width:100%;height:100%;display:block;overflow:hidden}}.modalContent:not(:has(>iframe)){padding:20px;overflow:auto}#go-pro-page .modalBody.goPro .modalContent,.modalBody.goPro .modalContent,.modalBody.unblockRequest .modalContent{grid-template-columns:1fr 350px;padding:0;display:grid;overflow:auto;& main{padding:0 30px;overflow:auto;& h2{letter-spacing:-.03rem;margin-top:35px;padding-bottom:15px;font-size:33px;font-weight:800;line-height:2.9rem;& strong{color:#fff;background-color:#50a2a7;padding:4px 12px;font-weight:800}}& h3{margin-bottom:5px;font-size:17px;font-weight:700}& p{opacity:.6;line-height:1.3rem}}& em{border-radius:10px;justify-content:center;align-items:center;width:50px;height:50px;display:flex}& svg{width:28px}& .perks{margin-bottom:15px;& svg{stroke:#fff}& li{grid-template-columns:70px 1fr;margin-top:25px;display:grid;&:first-child{& em{background:var(--text-color-accent-5)}}&:nth-child(2){& em{background:var(--text-color-accent-8)}}&:nth-child(3){& em{background:var(--text-color-accent-1)}}&:nth-child(4){& em{background:var(--text-color-accent-10)}}&:nth-child(5){& em{background:var(--text-color-accent-11)}}&:nth-child(6){& em{background:var(--text-color-accent-3)}}}}& aside{box-sizing:border-box;background:light-dark(#00000010,#00000020);grid-template-rows:1fr 150px;padding:0 20px;display:grid;& .brandsCont{padding-top:50px;& .segment{margin:20px 0;&.edu{& svg{width:120px;height:50px}}}& p{opacity:.7}& svg{width:30px;margin:8px}}& .proActionCont{& ul{border:solid 1px var(--common-border);background-color:var(--sidebar-bg);border-radius:10px;margin-bottom:14px;padding:3px;display:flex;& li{width:50%}& label{cursor:pointer;text-align:center;border-radius:7px;padding:6px 0;font-size:.95em;font-weight:500;display:block;& input{display:none}&:has(input:checked){background:var(--nav-action-hover-2)}}}& form,& .button{display:none}&:has(ul input[name=payment_type][value=monthly]:checked){& form.proSwitch_monthly{display:flex}& .button.proSwitch_monthly{display:block}}&:has(ul input[name=payment_type][value=one_time]:checked){& form.proSwitch_one_time{display:flex}& .button.proSwitch_one_time{display:block}}& form{justify-content:space-between;align-items:flex-end;width:100%}& button,& a{background:var(--common-accent);color:#fff;text-align:center;cursor:pointer;border:0;border-radius:10px;width:100%;margin-bottom:20px;padding:15px 0;font-size:16px;font-weight:700;display:block}& #amount-mode{color:#fff;padding-top:5px;font-size:13px;font-weight:400;display:block}}}}.modalBody.tinyModal .modalApp{width:450px;min-width:450px;height:45vh;min-height:300px}.modalBody.mediumModal .modalApp{width:700px;min-width:700px;height:75vh;min-height:300px}.modalBody.unblockRequest .modalApp{width:850px;min-width:850px;& .modalContent{display:grid;& h3{margin-bottom:2px;font-size:14px;font-weight:700}& em{border-radius:8px;width:35px;height:35px}& svg{width:28px}& .perks{margin-top:10px;margin-bottom:10px;& li{grid-template-columns:50px 1fr;margin-top:20px;display:grid}}}& .helpCont{padding-bottom:20px;& p{opacity:1;margin-top:30px;margin-bottom:20px;&+p{margin-top:50px}}& li{background:light-dark(#00000010,#00000020);border-radius:10px;align-items:center;height:60px;margin:15px 0;padding:0 0 0 15px;display:flex}& a,& .whitelist{background:var(--common-accent);border:solid 1px var(--common-accent);border-radius:5px;margin-right:7px;padding:5px 10px;font-weight:700}& a{color:var(--text-color-1)}& .whitelist{background:var(--common-base-rev);color:var(--common-base);border:none}& strong{font-weight:700}& em{cursor:pointer;opacity:.4;position:absolute;top:20px;right:20px;&:hover{text-decoration:underline}}}& aside{align-items:center;display:flex;& h3{margin-bottom:5px;font-size:15px;font-weight:700}& p{opacity:.6;line-height:1.3rem}}}#layout-container .hasHeader.commonLayout,.hasHeader.commonLayout{& header{border-bottom:solid 1px var(--section-bg-1);height:90px;position:relative}}#modal-panel-options .modalContent{grid-template-columns:200px 1fr;display:grid}#modal-top-menu{border-right:solid 1px var(--section-bg-1);margin-right:20px;padding-right:20px;& .commonActions{flex-direction:column;& li{width:100%;margin:0 0 10px;& label{justify-content:start;width:100%}}}}#modal-panel-options .modalContent{& #panel-options-tabs .windowSettings{display:none}&:has(#modal-top-menu li:first-child input:checked){& #panel-options-tabs .windowSettings:first-child{display:block}}&:has(#modal-top-menu li:nth-child(2) input:checked){& #panel-options-tabs .windowSettings:nth-child(2){display:block}}&:has(#modal-top-menu li:nth-child(3) input:checked){& #panel-options-tabs .windowSettings:nth-child(3){display:block}}}#modal-mistral-howto{& .modalContent{display:flex;& svg{width:150px}}}#steps{border-left:solid 1px var(--section-bg-1);flex-direction:column;justify-content:center;margin-left:30px;padding-left:30px;display:flex;& li{counter-increment:step-counter;align-items:center;margin-bottom:15px;display:flex;&:before{content:counter(step-counter);border:solid 1px var(--section-bg-1);border-radius:35px;justify-content:center;align-items:center;width:35px;height:35px;margin-right:10px;font-size:1.1em;font-weight:700;display:flex}}& strong,& a{font-weight:700}& a{color:var(--common-accent)}}#embed-creator{grid-gap:15px;grid-template-rows:.4fr 1fr;height:100%;display:grid}#creator{grid-gap:15px;grid-template-columns:.5fr .5fr;grid-template-areas:"tabs snippet""visuals snippet";display:grid;& .ecTabs{grid-area:tabs}& .ecVisuals{grid-area:visuals}& .colorFields{grid-gap:10px;grid-template-columns:.5fr .5fr;margin-top:15px;display:grid;& label{display:block}& input[type=text]{border:solid 1px var(--border-color-1);background:#fff;border-radius:6px}}& .ecSnippet{grid-area:snippet}& section{background:#00000008;border-radius:8px;min-width:0;padding:10px}& h3{margin-bottom:15px;font-weight:700;position:relative;& .codeTypeToggle{color:var(--common-accent);letter-spacing:0;text-transform:none;position:absolute;top:0;right:0}}& input[type=text]{padding:6px 8px}& input[type=text],& textarea{color:var(--text-color-1);box-sizing:border-box;background:0 0;border:0;outline:none;font-size:13px}& .embedCode{width:100%;height:80px;font-family:var(--font-code);word-wrap:break-word;resize:none;font-optical-sizing:auto;margin-top:10px;font-size:12px;font-style:normal}& .embedCodeWrap{& p{margin-top:5px}& strong{color:#f36e65}&.hidden{display:none}}& .inputCont_checkbox{margin-right:12px;& i{font-weight:600}}}#preview{border:solid 1px var(--border-color-1);& iframe{display:block}}#layout,#theme,#expiration{grid-gap:10px;text-align:left;grid-template-columns:1fr 1fr;width:100%;margin:5px 0;display:grid;& label{cursor:pointer;border-radius:8px;align-items:center;padding:10px;display:flex;& input{display:none}& .gridMode{border:solid 1px var(--border-color-11);border-radius:5px;width:28px;height:24px;margin-top:0;margin-right:10px;position:relative;&:after,&:before{content:"";background:var(--border-color-11);position:absolute}&.grid_1{&:after{height:1px;top:49%;left:0;right:0}&:before{width:1px;top:0;bottom:0;left:49%}}&.grid_2{&:after{width:1px;top:0;bottom:0;left:33%}&:before{width:1px;top:0;bottom:0;left:66%}}&.grid_3{&:after{width:1px;height:50%;top:0;left:49%}&:before{height:1px;top:50%;left:0;right:0}}&.grid_4{&:after{width:50%;height:1px;top:49%;left:0%}&:before{width:1px;top:0;bottom:0;right:49%}}&.grid_5,&.grid_6{&:after{width:1px;height:20%;top:0;left:49%}&:before{height:1px;top:20%;left:0;right:0}}}&:has(input:checked){background:var(--common-accent);color:#fff;& .gridMode{border-color:#fff;&:after,&:before{background:#fff}}}&:hover .gridMode{border:solid 1px var(--border-color-12);&:after,&:before{background:var(--border-color-12)}}&:hover{background:var(--tooltip-hover-2)}}}.tippy-content{& h5{border-top:solid 1px var(--border-color-3);background-color:light-dark(#0000,#00000010);margin:5px -10px 0;padding-top:12px;padding-bottom:2px;font-weight:500}}#dropdown-set-expiration{display:none}#expiration{grid-gap:5px;background-color:light-dark(#0000,#00000010);grid-template-columns:1fr 1fr 1fr;margin:0 0 -5px -10px;padding:10px;& label{border-radius:6px;padding:5px 7px;font-size:12px}}#theme{grid-template-columns:1fr 1fr 1fr;& label{justify-content:center}}#editor-options{grid-gap:15px;display:grid;& h3{margin-bottom:15px;font-weight:700;position:relative}& section{background:var(--section-bg-1);border-radius:8px;padding:10px}& p{margin-bottom:10px;&:last-child{margin-bottom:0}}& .fieldsCont{grid-template-columns:1fr 1fr 1fr;display:grid}& .selectPairs{grid-gap:15px;grid-template-columns:calc(33% - 15px) calc(33% - 15px) 33%;margin-top:10px;display:grid}& .selectPair{margin-top:8px;position:relative;& .label{margin-bottom:5px;display:block}}& .selectCont{display:block}& .fontPicker{cursor:pointer;& input{pointer-events:none}}& h3:first-child{border-top:0;margin-top:0;padding-top:0}}#console{background:rgba(var(--header-bg), 1);width:100%;color:var(--text-color-2);border-top:solid 1px var(--border-color-1);margin:0;padding:0;font-size:11px;display:none;overflow:auto;& .header{border-bottom:solid 1px var(--border-color-1);background:var(--body-bg);align-items:center;height:30px;padding-left:10px;display:flex;position:sticky;top:0;left:0;& svg.logo{stroke:var(--text-color-5);margin-right:5px}& .consoleActions{display:flex;position:absolute;top:0;right:0;& a{height:30px;color:var(--text-color-2);justify-content:center;align-items:center;margin-right:10px;display:flex}}}& li{border-bottom:solid 1px var(--border-color-1);font-family:var(--font-code);white-space:pre;font-optical-sizing:auto;padding:7px 12px;font-style:normal;&.error{border-left:solid 3px var(--text-color-accent-0);color:var(--text-color-1);& .gotoLine{border:solid 1px var(--text-color-accent-0);color:var(--text-color-1);border-radius:3px;padding:3px 4px 2px;font-size:10px;&:hover{background:var(--text-color-accent-0);border:solid 1px var(--text-color-accent-0)}}}&.warn{background:rgba(var(--text-color-accent-5), .2);border-left:solid 3px var(--text-color-accent-5)}&.info{background:rgba(var(--text-color-accent-7), .2);border-left:solid 3px var(--text-color-accent-7)}&.system{color:var(--common-accent)}}}#console-summary{color:var(--text-color-5);justify-content:center;align-items:center;margin-left:10px;display:flex;& span{margin-left:10px;display:flex;& svg{height:12px;stroke:var(--text-color-5);margin-right:3px}&.log.active{color:var(--text-color-2);& svg{stroke:var(--text-color-2)}}&.warn.active{color:var(--text-color-accent-5);& svg{stroke:var(--text-color-accent-5)}}&.info.active{color:var(--text-color-accent-7);& svg{stroke:var(--text-color-accent-7)}}&.error.active{color:var(--text-color-accent-0);& svg{stroke:var(--text-color-accent-0)}}}}#content input[type=text]#console-input{box-shadow:0 -1px 0 var(--border-color-1), 0 1px 0 var(--border-color-1);font-family:var(--font-code);white-space:pre;color:var(--text-color-1);background:var(--sidebar-bg);border-radius:0;padding:7px 12px;font-size:11px;position:sticky;bottom:0;left:0}@keyframes wiggle{0%{transform:rotate(10deg)scale(1)translate(0)}5%{transform:rotate(-10deg)scale(1.05)translate(1px)}10%{transform:rotate(20deg)scale(1.1)translate(0)}15%{transform:rotate(-5deg)scale(1.05)translate(-1px)}20%{transform:rotate(0)scale(1)translate(0)}to{transform:rotate(0)scale(1)}}#sidebar{& p input[type=text],& p input[type=password]{width:100%;height:34px;color:var(--text-color-1);font-family:var(--font-base);background:0 0;background:var(--input-bg);box-sizing:border-box;vertical-align:middle;appearance:none;box-shadow:none;border:none;border-radius:6px;outline:none;padding:0 8px;font-size:13px;&:focus{background:var(--input-bg-focus)}}& h3{clear:both;color:var(--text-color-1);padding:0;font-size:11px;font-weight:700}& h4{color:var(--text-color-4);text-transform:uppercase;letter-spacing:1px;margin:10px 0 7px 4px;font-size:10px;font-weight:500}& p{margin:0 0 8px;line-height:160%}& .linksList{& li{margin-bottom:5px}& a{font-weight:500}}& pre,& code{font-family:var(--font-code);color:var(--text-color-3);background:var(--input-bg);border-radius:4px;padding:2px 3px;font-size:.9em}& .sidebarItem{padding:0 10px;& .body{padding:0 10px 25px;font-size:.9em;display:none;& a{color:var(--common-accent)}& strong{font-weight:700}}& .toggler{cursor:pointer;border-radius:8px;align-items:center;height:40px;padding:0 10px;font-size:14px;font-weight:500;transition:background-color .1s;display:flex;position:relative;& span{pointer-events:none}& .resourcesLabel,& #resource-counter{color:var(--text-color-2);pointer-events:none;background:#ffffff0d;border-radius:3px;height:16px;margin-left:5px;padding:0 6px;font-size:.8em;font-style:normal;line-height:16px;display:inline-block}& #resource-counter{opacity:1;background:0 0;border:1px solid #ffffff1a;margin-left:5px;font-weight:700;position:absolute;top:10px;right:10px;&.hidden{opacity:0}}& svg{pointer-events:none;height:20px;margin-right:10px}&:hover{background:var(--nav-action-hover)}}&.si_ai{& .toggler path{fill:var(--text-color-3)}&:hover .toggler path{fill:var(--text-color-accent-9)}}&.si_yourFiddles{& .toggler path{fill:var(--text-color-3)}&:hover .toggler path{fill:var(--text-color-accent-8)}}&.si_collections{& .body a{color:var(--text-color-1)}& label:has(input:checked){background-color:var(--text-color-accent-0)}& .body g{stroke:var(--text-color-1)}& .toggler path{fill:var(--text-color-3)}&:hover .toggler path{fill:var(--text-color-accent-0)}}&.si_resources{& .toggler path{fill:var(--text-color-3)}&:hover .toggler path{fill:var(--text-color-accent-1)}}&.si_async{& .toggler path{fill:var(--text-color-3)}&:hover .toggler path{fill:var(--text-color-accent-5)}}&.si_customDomain{& .toggler path{fill:var(--text-color-3)}&:hover .toggler path{fill:var(--text-color-accent-5)}}&.si_changelog{& .toggler path{fill:var(--text-color-3)}&:hover .toggler path{fill:var(--text-color-accent-10)}}&.opened{& .body{display:block}}& .resourcesInfo{color:var(--text-color-3);margin-top:10px;line-height:1.42em}&.si_customDomain{& .toggler span:after{content:"Beta";background:var(--common-accent);text-transform:uppercase;color:var(--common-base);border-radius:4px;margin-left:10px;padding:3px 5px;font-size:9px;font-weight:700;display:inline-block}}&.si_changelog{& .toggler span:after{content:"New";background:var(--text-color-accent-10);text-transform:uppercase;color:var(--common-base);border-radius:4px;margin-left:10px;padding:3px 5px;font-size:9px;font-weight:700;animation:3.5s ease-in-out infinite wiggle;display:inline-block;@media (prefers-reduced-motion:reduce){animation:none!important}}}&.hidden{& .toggler span:after{display:none}}}}#manage-fiddle{padding-top:5px;& .delete{color:var(--text-color-accent-1);display:flex}& svg{margin-right:4px}}#external-resources-form{position:relative;& #external_resource{padding-right:38px}& .submit{text-align:right;text-align:center;border:none;outline:none;width:28px;height:33px;padding:0;line-height:33px;position:absolute;top:5px;right:5px}& .commonButton{float:none;text-align:center;color:#555;width:70%;margin-top:5px;font-size:12px;line-height:28px;display:block}}.autocomplete-suggestions{text-align:left;cursor:default;background-color:var(--modal-bg-color);-webkit-backdrop-filter:blur(10px)brightness(2.7);backdrop-filter:blur(10px)brightness(2.7);color:var(--text-color-1);box-shadow:0px 8px 16px 0px var(--tooltip-shadow-color), 0px 0px 1px 0px var(--tooltip-shadow-border);z-index:100;box-sizing:border-box;border-radius:8px;min-width:320px;max-height:250px;padding:2px;display:none;position:absolute;overflow:hidden auto}.autocomplete-suggestion{color:var(--text-color-1);border-radius:6px;padding:6px 10px;position:relative;& h4{font-weight:600;& strong{color:var(--common-accent);font-weight:600}}& .version{color:var(--text-color-3);background:var(--nav-action-hover);border-radius:3px;margin-left:2px;padding:2px 4px;font-size:11px}& .description{color:var(--text-color-3);margin-top:5px;font-size:12px}&.selected{background:var(--nav-action-hover-2);color:var(--text-color-1);& h4{& strong{color:var(--text-color-1)}}& .version,& .description{color:var(--text-color-1)}}}#fiddle-pages{& h4.fph{margin-top:22px}& p.domainPathCont{position:relative;&:before{color:var(--text-color-3);content:"/";pointer-events:none;padding:7px 0;display:block;position:absolute;top:0;left:10px}& input{padding-left:15px}& .info{color:var(--text-color-3);margin-top:5px;font-size:12px;display:block}}& .pageLiveCont{border:solid 1px var(--border-color-1);text-align:center;border-radius:8px;padding:8px}}#external_resources_list{margin-top:10px;& li{cursor:move;border-top:solid 1px var(--border-color-1);padding:7px 0;position:relative;& a{color:var(--text-color-1);text-overflow:ellipsis;white-space:nowrap;width:140px;display:inline-block;overflow:hidden}& .remove{cursor:pointer;color:#de7373;opacity:0;pointer-events:none;width:auto;text-decoration:none;transition:all .14s;position:absolute;top:7px;bottom:0;right:0;transform:translate(10px);&:hover{text-decoration:underline}}&:hover{& .remove{opacity:1;pointer-events:auto;transform:translate(0)}}}}#sidebar{& #sidebar-main{box-sizing:border-box;-webkit-user-select:none;user-select:none;height:0;min-height:100%;padding-top:12px;display:block;overflow:auto}& #sidebar-footer,& #sidebar-user{border-top:solid 1px var(--common-border)}}#sidebar-user{align-items:center;padding:10px 10px 10px 20px;display:flex;& .suInfo{flex:1;align-items:center;font-size:13px;font-weight:500;display:flex;&:hover em{text-decoration:underline}}& .pseudoAvatar{margin-right:10px}& ul{justify-content:flex-end;display:flex}}#apps{padding:10px 10px 0;& h4{text-transform:uppercase;color:var(--text-color-4);padding:0 10px;font-size:10px;font-weight:700}& ul{margin-top:10px}& a{border-radius:8px;align-items:center;padding:10px;font-size:12px;font-weight:500;transition:background .1s;display:flex;& span{pointer-events:none}&:hover{background:var(--nav-action-hover)}}& svg{pointer-events:none;margin-right:10px}}.asyncTable{& li{grid-gap:10px;grid-template-columns:45px 1fr;margin-bottom:7px;display:grid}& code{border:1px solid #0000}& a:hover code{border:solid 1px var(--common-accent)}}#promo-code{background:linear-gradient(var(--promo-accent), #70d18c00);margin-top:-12px;margin-bottom:-35px;padding-bottom:35px;display:block;overflow:hidden;& div{grid-gap:8px;background:var(--sidebar-bg);color:var(--text-color-2);border-radius:10px;grid-template-areas:"icon title""icon content";margin:8px;padding:12px 4px 12px 10px;font-size:13px;font-weight:400;display:grid}& h5{color:var(--text-color-1);grid-area:title;font-weight:700}& p{word-break:keep-all;grid-area:content;margin:0;line-height:1.45em}& strong{color:var(--text-color-1);border-bottom:solid 1px var(--promo-accent);font-weight:700}& svg{stroke:var(--promo-accent);grid-area:icon}&.sakura{background:linear-gradient(#d07796,#d0779600);& strong{border-bottom:1px solid #d07796}& svg{stroke:#d07796}}&.flash{background:linear-gradient(#597661,#d0779600);& strong{border-bottom:1px solid #597661}& svg{stroke:#597661}}}.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{color:#fff;white-space:normal;background-color:#333;border-radius:4px;outline:0;font-size:14px;line-height:1.4;transition-property:transform,visibility,opacity;position:relative}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{border-width:8px 8px 0;border-top-color:initial;transform-origin:top;bottom:-7px;left:0}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{border-width:0 8px 8px;border-bottom-color:initial;transform-origin:bottom;top:-7px;left:0}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;transform-origin:0;right:-7px}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:100%;left:-7px}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{color:#333;width:16px;height:16px}.tippy-arrow:before{content:"";border-style:solid;border-color:#0000;position:absolute}.tippy-content{z-index:1;padding:5px 9px;position:relative}.tippy-box[data-animation=scale-subtle][data-placement^=top]{transform-origin:bottom}.tippy-box[data-animation=scale-subtle][data-placement^=bottom]{transform-origin:top}.tippy-box[data-animation=scale-subtle][data-placement^=left]{transform-origin:100%}.tippy-box[data-animation=scale-subtle][data-placement^=right]{transform-origin:0}.tippy-box[data-animation=scale-subtle][data-state=hidden]{opacity:0;transform:scale(.8)}.tippy-box[data-theme~=light][data-placement^=top]>.tippy-arrow:before{border-top-color:var(--tooltip-bg-color)}.tippy-box[data-theme~=light][data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:var(--tooltip-bg-color)}.tippy-box[data-theme~=light][data-placement^=left]>.tippy-arrow:before{border-left-color:var(--tooltip-bg-color)}.tippy-box[data-theme~=light][data-placement^=right]>.tippy-arrow:before{border-right-color:var(--tooltip-bg-color)}.tippy-box[data-theme~=light]>.tippy-backdrop{background-color:var(--tooltip-bg-color)}.tippy-box[data-theme~=light]>.tippy-svg-arrow{fill:var(--common-base-rev)}body .tippy-box[data-theme~=light]{color:var(--text-color-1);box-shadow:0px 8px 16px 0px var(--tooltip-shadow-color), 0px 0px 1px 0px var(--tooltip-shadow-border);background-color:var(--tooltip-bg-color);text-align:center;border-radius:8px;padding:1px;font-size:13px;font-weight:500;display:flex;max-width:400px!important;& kbd{color:var(--text-color-3);margin-top:5px;font-size:11px;font-weight:500;display:inline-block;&.pro{background:var(--common-accent);text-transform:uppercase;color:var(--common-base);border-radius:4px;padding:3px 6px;font-size:9px;font-weight:700}}& code{background:#0000001a;border-radius:6px;margin-right:5px;padding:1px 4px;font-size:11px}& strong{font-weight:700}}.tippy-content:has(.windowSettings){text-align:left;padding:0}.profileTooptipCont{text-align:left;margin-top:10px;padding:0 10px;font-size:.9em;& h4{color:var(--text-color-2);text-transform:uppercase;letter-spacing:1px;font-size:9px}}.ptcUserInfo{align-items:center;margin:10px 0 20px;display:flex;& .pseudoAvatar{width:50px;height:50px;box-shadow:inset 0 0 0 2px var(--common-border-5);font-size:15px}& .ptcAuthorName{margin-left:10px;font-size:1.5em;font-weight:700;& a{color:var(--text-color-6)}}}.ptcBasicInfo{& svg{width:16px;stroke:var(--common-accent);margin-right:5px}& p{align-items:center;display:flex}& a{color:var(--common-accent);font-weight:400;text-decoration:underline}}.socialInfo{gap:5px;margin:20px 0 15px;display:flex;& a{background-color:var(--tooltip-hover);color:var(--text-color-6);border-radius:4px;padding:4px 8px;&:hover{background-color:var(--common-accent);color:var(--text-color-1)}}}.menuList{text-align:left;width:230px;margin:4px 0;display:none;& a{color:var(--text-color-1);border-radius:8px;align-items:center;padding:8px 10px;font-weight:500;display:flex;&:hover{background-color:var(--tooltip-hover)}}& svg{width:20px;margin-right:10px}& li.disabled a{opacity:.4;pointer-events:none}}.withSeparator{border-top:solid 1px var(--tooltip-hover);margin-top:10px;padding-top:10px}.tippy-box .menuList{display:block}.previewCont #carbon-cover .carbon-main{position:relative;top:-20px}.twitterCont.doSpecial{& img{margin-left:-20px;display:block}& a{font-size:13px;font-weight:500;& em{color:#0069ff;background:#fff;border-radius:4px;padding:1px 3px;font-weight:500}}}#sidebar{& #ethical-sponsor{width:250px;position:relative;& .ea-content{grid-template-areas:"desc""img";min-width:250px;margin:0;padding:0;display:grid}& .ea-content>a{text-align:center;grid-area:img;width:100%;display:block;& img{width:150px;min-width:150px;max-width:150px;height:108px;display:inline-block}}& .ea-text{clear:both;color:var(--text-color-1);text-align:left;grid-area:desc;margin-top:0;padding:29px 12px 12px;font-size:12px;font-weight:400;line-height:19px;display:block}& a{color:inherit;&:hover{text-decoration:none}}& .ea-headline{color:inherit;font-weight:700;display:block}& .ea-cta,& .ea-domain{display:none}& .ea-callout{letter-spacing:1px;color:var(--text-color-3);border:1px solid var(--border-color-1);text-transform:uppercase;border-top:0;border-right:0;border-bottom-left-radius:6px;margin:0;padding:3px 6px;font-size:8px;font-style:normal;position:absolute;top:0;right:0;& a{font-size:8px}}}}#app-updates{& li{border-bottom:var(--border-color-1) 1px solid;margin-bottom:20px;padding-bottom:20px}& h3{margin-bottom:10px;font-size:1.1em;font-weight:700;&:before{content:"New";background:var(--text-color-accent-10);color:#fff;border-radius:6px;margin-right:5px;padding:3px 5px;font-size:.8em}}& .content{font-size:.95em;& p{margin:5px 0;line-height:1.45em}& code{background:#0000001a;border-radius:4px;padding:2px 4px;font-size:.9em}& a{color:var(--common-accent)}& ul{margin-top:10px}& li{border-bottom:none;margin:0 0 5px 15px;padding:0 0 0 10px;list-style:circle}& strong{font-weight:700}}& .au_change{& h3:before{content:"Update";background:var(--text-color-accent-5)}}}html #togetherjs-dock{color-scheme:light;background-color:var(--sidebar-bg)}.togetherjs{font-family:var(--font-base)}html #togetherjs-dock,html .togetherjs .togetherjs-window,html #togetherjs-menu{border:none;border-radius:8px;overflow:hidden;box-shadow:0 2px 35px #00000080}html .togetherjs .togetherjs-window>header{background-color:var(--common-accent);border:none}html .togetherjs .togetherjs-window header button.togetherjs-close{border:none}html #togetherjs-dock.togetherjs-dock-right{border-radius:28px;width:50px;height:185px;top:75px;right:10px}html .togetherjs .togetherjs-person{border-radius:100%}html .togetherjs .togetherjs-button .togetherjs-person{background-size:contain;border:15px solid;width:30px;height:30px;margin:auto;box-sizing:border-box!important}#togetherjs-dock-anchor,#togetherjs-profile-arrow,.togetherjs-person-avatar-swatch,#togetherjs-menu-update-avatar,#togetherjs-menu-help,#togetherjs-menu-feedback,.togetherjs-hr{display:none}html .togetherjs #togetherjs-buttons .togetherjs-button:hover,html .togetherjs #togetherjs-buttons .togetherjs-button.togetherjs-active{background-color:#ffffff1a}html .togetherjs #togetherjs-buttons .togetherjs-button{cursor:pointer;filter:invert();border-top:1px solid #fff3;width:50px;height:45px}html .togetherjs #togetherjs-buttons .togetherjs-button#togetherjs-profile-button{filter:invert(0)}.togetherjs-click.togetherjs{border-radius:100%}.togetherjs-click{opacity:1;transition:all .8s}.togetherjs-click.togetherjs-clicking{opacity:0;border:12px solid #0000;border-radius:20px;width:30px;height:30px;margin:-25px 0 0 -25px}html .togetherjs #togetherjs-buttons .togetherjs-button{background-color:#0000}@media (width<=1100px){body{& .headerActions li{&.divider{margin:0 8px}& a{min-width:33px;height:33px}}}}@media (width<=765px){body{& #layout-container header{background-color:var(--sidebar-bg)}& #layout-container{grid-template-columns:55px 1fr;grid-template-areas:"sidebar header""content content"}& #fiddle-info{left:0;& .sidebarToggle{display:none}}& #sidebar{grid-template-rows:66px 0 0 0;& h1 svg{width:36px}& #sidebar-main,& #sidebar-user,& #sidebar-footer{display:none}}& .headerActions li{&.downloadButton,&.favButton,&.collaborateButton,&.gridButton,&.themeButton,&.embedButton,&.togglePrivacy,&.proButton,&.divider{display:none}}& .modalBody{align-items:start}& .modalApp{min-width:auto;height:auto;min-height:auto}& #editor-options .fieldsCont{grid-template-columns:1fr 1fr}}}body{& .monaco-editor,& .monaco-diff-editor,& .monaco-component{outline-width:0}& .monaco-scrollable-element>.scrollbar>.slider{border-radius:10px}& .monaco-editor .colorpicker-color-decoration{border:none;border-radius:10px;margin-right:5px}& .monaco-editor .sticky-widget{box-shadow:0 5px 2px #0003}& .monaco-editor .line-numbers{color:var(--text-color-5);font-size:90%}& .monaco-editor{--vscode-editorSuggestWidget-selectedBackground:var(--common-accent);--vscode-editorSuggestWidget-highlightForeground:var(--common-accent);--vscode-editorSuggestWidget-focusHighlightForeground:var(--text-color-1)}& .monaco-editor .suggest-details,& .monaco-editor .suggest-widget{background-color:var(--body-bg);border-radius:6px}}