.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]:not(.chatPanel *),#sidebar input[type=password],#content input[type=password]:not(.chatPanel *),#sidebar textarea,#content textarea:not(.chatPanel *),#sidebar select,#content select:not(.chatPanel *){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(--text-color-3)}}#editor{flex-direction:column;height:calc(100vh - 65px);display:flex;&>#tabs{flex:none}&>.splitGrid{flex:1;min-height:0}& .panelStage{display:none}& .panelSlot{height:100%;position:relative}& .panel{height:100%;position:relative;overflow:hidden}& .panel:hover{& .panelTidy,& .iconCont{opacity:1}}& .panelCode{width:100%;height:calc(100% - 55px);margin-top:55px}& .tabPanes{height:100%;position:relative}& .tabPanes .tabCont{height:100%;overflow:hidden}& .tabPanes .tabCont.hidden{opacity:0;pointer-events:none;position:absolute;inset: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}}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}& 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}#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}}.headerActions,.commonActions{-webkit-user-select:none;user-select:none;gap:2px;display:flex;position:relative;& svg{pointer-events:none;max-width:18px;max-height:18px}& li{align-items:center;display:flex;& a,& button,& aside,& .fxLink{white-space:nowrap;justify-content:center;align-items:center;min-width:36px;height:36px;transition:background-color .1s;display:flex}& a,& button,& .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 button,&: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}}}&.ca_small{flex-wrap:wrap;& a,& button{border-radius:6px;min-width:28px;height:28px}}&.smallActions{flex-wrap:wrap;& li{margin-bottom:5px;& a,& button,& aside,& .fxLink{background:var(--nav-action-hover);min-width:28px;height:28px}& a,& button,& .fxLink{font-variation-settings:"wght" 400;border-radius:6px;& span{margin-left:0;font-size:13px}&:has(span){padding:0 8px}}}}}.modalBody{color:var(--text-color-1);justify-content:center;align-items:center;display:none;position:fixed;top:0;left:0;overflow:auto}.modalBody{&[open]{background:0 0;border:0;width:100dvw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;display:flex}&::backdrop{background-color:#111111b3}&.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;display:grid;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}.modalContent>.serverSlot,.modalContent>.serverSlot>*{display:contents}#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}}}#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}}&.grid_7{&:before{width:1px;top:0;bottom:0;left:49%}}&.grid_8{&:before{height:1px;top:49%;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)}}}.tooltipContent{& 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}}#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}}#console{background:var(--header-bg);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)}}}#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}#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)}}& 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%}& 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;& 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}& svg{pointer-events:none;height:20px;margin-right:10px}&::-webkit-details-marker{display:none}& path{fill:var(--text-color-3)}&:hover{background:var(--nav-action-hover)}}&:hover .toggler path{fill:var(--section-accent,var(--text-color-3))}&.si_yourFiddles{--section-accent:var(--text-color-accent-8)}&.si_async,&.si_customDomain{--section-accent:var(--text-color-accent-5)}&.si_resources{--section-accent:var(--text-color-accent-1)}&.si_changelog{--section-accent:var(--text-color-accent-10)}&.si_collections{--section-accent:var(--text-color-accent-0);& .body a{color:var(--text-color-1)}}}}.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)}}}#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}}.tooltip{max-width:min(400px,100vw - 10px);color:var(--text-color-1);background-color:var(--tooltip-bg-color);box-shadow:0px 8px 16px 0px var(--tooltip-shadow-color), 0px 0px 1px 0px var(--tooltip-shadow-border);text-align:center;white-space:normal;opacity:0;transition-behavior:allow-discrete;border:0;border-radius:8px;outline:0;margin:0;padding:1px;font-size:13px;font-weight:500;line-height:1.4;transition-property:transform,opacity,display,overlay;transition-duration:.2s;position:fixed;inset:auto;overflow:visible;transform:scale(.8);&:popover-open{opacity:1;transition-duration:30ms;display:flex;transform:none}&[data-placement^=top]{transform-origin:bottom}&[data-placement^=bottom]{transform-origin:top}&[data-placement^=left]{transform-origin:100%}&[data-placement^=right]{transform-origin:0}&:not([data-interactive]){pointer-events:none}& 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}& .menuList{display:block}}@starting-style{.tooltip:popover-open{opacity:0;transform:scale(.8)}}.tooltipArrow{width:16px;height:16px;position:absolute;&:before{content:"";border-style:solid;border-color:#0000;position:absolute}}.tooltip[data-placement^=top]>.tooltipArrow{bottom:0;&:before{border-width:8px 8px 0;border-top-color:var(--tooltip-bg-color);bottom:-7px;left:0}}.tooltip[data-placement^=bottom]>.tooltipArrow{top:0;&:before{border-width:0 8px 8px;border-bottom-color:var(--tooltip-bg-color);top:-7px;left:0}}.tooltip[data-placement^=left]>.tooltipArrow{right:0;&:before{border-width:8px 0 8px 8px;border-left-color:var(--tooltip-bg-color);right:-7px}}.tooltip[data-placement^=right]>.tooltipArrow{left:0;&:before{border-width:8px 8px 8px 0;border-right-color:var(--tooltip-bg-color);left:-7px}}.tooltipContent{z-index:1;padding:5px 9px;position:relative;&: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}.previewCont #carbon-cover .carbon-main{position:relative;top:-20px}#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{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}}}}@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,&.chatButton,&.collaborateButton,&.gridButton,&.themeButton,&.embedButton,&.togglePrivacy,&.proButton,&.divider{display:none}}& .modalBody{align-items:start}& .modalApp{min-width:auto;height:auto;min-height:auto}}}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}}