efy.css

:root { --efy_font_size: 1px; --efy_bg_size: cover; --efy_bg_x: 0; --efy_bg_y: 0;
--efy_radius0: calc(var(--efy_radius) / 1.25); --efy_radius2: calc(var(--efy_radius) * 1.5); --efy_radius00: calc(var(--efy_radius) / 3);
--efy_padding: 8rem  12rem; --efy_padding2: 3rem  6rem; --efy_gap0: calc(var(--efy_gap) / 1.5); --efy_gap00: calc(var(--efy_gap0) / 2); --efy_gap2: calc(var(--efy_gap) * 2);
--efy_color: linear-gradient(var(--efy_color_angle), oklch(var(--efy_color1_var)), oklch(var(--efy_color2_var)));
--efy_color_trans: linear-gradient(var(--efy_color_angle), oklch(var(--efy_color1_var) / .3), oklch(var(--efy_color2_var) / .3));
--efy_color_text_var: 0 0 0; --efy_color_bgcol_var: 0.5 0 0; --efy_color_bordercol_var: 0.5 0 0; --efy_color_buttoncol_var: 0.5 0 0;
--efy_bg1: oklch(var(--efy_bg_var) / .07); --efy_bg2: oklch(var(--efy_bg_var) / .13);
--efy_text: oklch(var(--efy_bg_var)); --efy_text_trans: oklch(var(--efy_bg_var) / .3); --efy_text_trans2: oklch(var(--efy_bg_var) / .45); --efy_text2: var(--efy_bg);
--efy_border_alpha: .07; --efy_border: var(--efy_border_size) solid oklch(var(--efy_bg_var) / var(--efy_border_alpha)); --efy_border_size2: calc(2 * var(--efy_border_size));
--efy_anim_status: 1; --efy_anim_state: running; --efy_anim_speed: 1;
--efy_100vh: 100vh; --efy_sidebar_width: 450rem; --efy_sidebar_width_n: calc(-1 * var(--efy_sidebar_width)); --efy_bg_width: 100vw;
--efy_size: calc(36rem + var(--efy_border_size2)); --efy_size0: calc(30.5rem + var(--efy_border_size2));
}
/*No White Flash*/ html, body {background: #0f0f0f; margin: 0 auto}
[efy_mode]:not([efy_mode="dark,trans"]) body {background: var(--efy_bg)!important}
html[efy_mode], html[efy_mode*=trans].trans_window body, html.trans_window .efy_3d_bg {background: transparent!important}
/*Scheme*/ input, select, textarea, audio, video {color-scheme: var(--efy_scheme)}
/*Light: All*/ [efy_mode*=light] {--efy_bg: oklch(1 0 0); --efy_bg_var: 0 0 0; --efy_bg_var2: 1 0 0; --efy_scheme: light}
/*Dark: All*/ [efy_mode*=dark] {--efy_bg: oklch(0 0 0); --efy_bg_var: 1 0 0; --efy_bg_var2: 0 0 0; --efy_scheme: dark}
/*Sepia*/ [efy_mode*=sepia] {--efy_bg: oklch(.94 .03 89); --efy_text: oklch(.41 .04 59)}
/*Dark*/ [efy_mode=dark] {--efy_bg: oklch(.25 0 0); --efy_text: oklch(.9 0 0)}
/*Nord*/ [efy_mode*=nord] {--efy_bg: oklch(.28 .02 265); --efy_text: oklch(.85 .02 265)}
/*Black*/ [efy_mode*=black] {--efy_text: oklch(.85 0 0)}
/*Dark Trans*/ [efy_mode="dark,trans"] {--efy_text2: oklch(0 0 0)}

/*Custom Text, Border & BG*/ [efy_color_bgcol][efy_mode] {--efy_bg: oklch(var(--efy_color_bgcol_var))}
[efy_color_text][efy_mode] {--efy_text: oklch(var(--efy_color_text_var)); --efy_text_trans: oklch(var(--efy_color_text_var) / .3); --efy_text_trans2: oklch(var(--efy_color_text_var) / .45)}
[efy_color_bordercol][efy_mode] {--efy_border_alpha: 1; --efy_border: var(--efy_border_size) solid oklch(var(--efy_color_bordercol_var))}
[efy_color_buttoncol][efy_mode] {
    :is(button:not(.efy_button_text_off :is([efy_tab], [efy_tab] + label)), [efy_tabs] :is([efy_tab], [efy_tab] + label)[efy_active], [type=button], [role=button], input:is([type=reset], [type=submit]), [efy_select] input:checked + label, option:checked):not(.efy_button_text_off, [efy_color_preview]) {color: oklch(var(--efy_color_buttoncol_var)); -webkit-text-fill-color: oklch(var(--efy_color_buttoncol_var))}
    [efy_select] {
        [type=radio]:checked + label:after {background: oklch(var(--efy_color_buttoncol_var))!important}
        input:checked + label:before, [type=checkbox]:checked + label:after {border-color: oklch(var(--efy_color_buttoncol_var))!important}
        label:not([efy_upload], .efy_color, [type=button]):before {background: oklch(var(--efy_color_buttoncol_var) / .7)!important}
        label:not([efy_upload], input:checked + label, .efy_color, [type=button], :is(.efy_custom_colors, #efy_colors) label) {background: linear-gradient(0deg, oklch(var(--efy_color_buttoncol_var) / .7), oklch(var(--efy_color_buttoncol_var) / .7)), var(--efy_color_trans); background-clip: text, border-box!important; background-origin: border-box!important}
    }
    :is([efy_tabs] :is([efy_tab], [efy_tab] + label):not([efy_active], .efy_button_text_off :is([efy_tab], [efy_tab] + label))) {color: oklch(var(--efy_color_buttoncol_var) / .7); -webkit-text-fill-color: oklch(var(--efy_color_buttoncol_var) / .7)}
}
/*Display: Block*/ table, .efy_toggle_visible {display: block}
/*Inline-Flex*/ header > nav :is(li, a, a:visited), [efy_tabs] :is([efy_tab], [efy_tab] + label), [efy_select] :is(label, label:before, input:checked + label:after):not(.efy_custom_colors *) {display: inline-flex; align-items: center; place-content: center}
.efy_custom_colors [efy_select] :is(label, label:before, input:checked + label:after) {display: inline-block}
/*None*/ .efy_hide {display: none}
/*None ! */ .efy_hide_i, [efy_tabs] input[efy_tab] {opacity: 0!important; position: absolute!important; pointer-events: none; scale: .3!important; transition: none!important} .efy_hide_i * {display: none!important}

/*Content: ''*/ [type=radio]:checked:after, [efy_select] label:before, [efy_select] [type=radio]:checked + label:after {content: ''}

/*Background: Transparent*/ [efy_mode*=trans] .efy_sidebar {background: transparent!important; backdrop-filter: blur(50rem); -webkit-backdrop-filter: blur(50rem)}
/*BG*/ html:not([efy_mode*=trans]) .efy_3d_bg, .efy_bg {background: var(--efy_bg)!important}
/*BG1*/ aside, th, [type=file], pre, textarea, select, input, details, blockquote, pre, article, tr:nth-child(even), [efy_alert], [efy_timer], [efy_clock], .efy_bg1 {background: var(--efy_bg1)}
/*Text*/ mark, kbd, .efy_bg_text {background: var(--efy_text)}
/*Color*/ button, [type=button], [role=button], [type=submit], [type=reset], [efy_sidebar_btn=absolute]:hover, :is([type=checkbox], [type=radio], option):checked, [efy_select] input:checked + label, [efy_tabs] [efy_tab][efy_active] + label, :is(blockquote, .efy_img_previews [efy_bg_nr][efy_active]):before, .efy_color {background: var(--efy_color); background-clip: border-box; background-origin: border-box; -webkit-text-fill-color: var(--efy_text2); border: var(--efy_border)}
/*Color Trans*/ [type=range], [type=radio], [type=checkbox], [efy_sidebar_btn=absolute], [efy_select] label:not([efy_upload], [type=button]), [efy_tabs] [efy_tab]:not([efy_active]) + label, .efy_color_trans {background: var(--efy_color), var(--efy_color_trans); background-clip: text, border-box; background-origin: border-box; border: var(--efy_border); -webkit-text-fill-color: transparent}

/*Color: Text*/ body, textarea, select, input, pre, pre code, header > nav :is(a, a:visited), [efy_sidebar_btn]:hover, .efy_text {color: var(--efy_text)}
/*Text2*/ button, [type=button], [role=button], [type=submit], [type=reset], mark, kbd, option:checked, [efy_select] input:checked + label, .efy_text2 {color: var(--efy_text2)}
/*Text Trans2*/ figcaption, cite, footer, .efy_text_trans2 {color: var(--efy_text_trans2)} ::-webkit-input-placeholder {color: var(--efy_text_trans2)}
/*Color*/ :is(a, a:visited):not([role=button]), pre > code, code, samp, [efy_logo] p:nth-of-type(1), .efy_text_color {background: var(--efy_color); background-clip: text; -webkit-text-fill-color: transparent}
/*Text-Decoration: None*/ a, a:visited {text-decoration: none}

/*Border*/ textarea, select, input:not([type=color], [type=range]), button, [type=submit], [type=reset], [type=button], [role=button], details, pre, td, th, article, aside, blockquote, [type=file], .efy_sidebar, [efy_tabs] [efy_content], [efy_alert], [efy_timer], [efy_clock], .efy_border {border: var(--efy_border)}
/*None*/ hr {border: none} [type=color], fieldset, [type=file] {border: none!important}

/*Outline: None*/ * {outline: none!important}
/*Box-Shadow*/ :is(textarea, select, [type=file], input:not([type=checkbox], [type=radio], [role=button], [type=submit], [type=reset], [type=button], [type=color], [type=range])):focus,
[efy_outline] :is(details:focus-within:not([efy_help])) {box-shadow: 0 0 0 calc(var(--efy_border_size) + 2rem) var(--efy_text)!important}

[efy_shadow*=trans] :is(textarea, select, [type=file], input:not([type=checkbox], [type=radio], [role=button], [type=submit], [type=reset], [type=button], [type=color], [type=range])):focus,
[efy_shadow*=trans][efy_outline] :is(details:focus-within:not([efy_help])) {box-shadow: 0 0 0 calc(var(--efy_border_size) + 2rem) var(--efy_text), var(--efy_shadow_trans)!important}

/*Outline*/ [efy_outline] :is([type=radio], [type=checkbox], button, [role=button], [type=submit], [type=reset], [type=button], [type=range], [type=color], a):focus:not([tabindex='-1'], .efy_img_previews [efy_bg_nr]), [efy_outline] [efy_select] input:focus + label, [efy_outline] :is([efy_upload], [efy_help]):focus-within, [efy_outline] [efy_tabs] [efy_tab]:focus + label:not([tabindex='-1']) {outline: calc(var(--efy_border_size) + 2rem) solid var(--efy_text)!important; outline-offset: 4rem!important}

/*Shadow: Button*/ [efy_shadow*=button] :is(button, [role=button], input:is([type=button], [type=submit], [type=reset]), :is([type=radio], [type=checkbox], option):checked, [efy_select] input:checked + label):not(.efy_shadow_button_off, .efy_trans_filter, .efy_btn_trans, [efy_tab]:not([efy_active]), [efy_about] .efy_flex button, .efy_img_previews [efy_bg_nr], [efy_color_preview], [efy_card]) {box-shadow: var(--efy_shadow_button)}
[efy_shadow*=button] [type=range]:not(.hue, .sat, .lgt, .transparency)::-webkit-slider-thumb, [efy_shadow*=button] ::-webkit-progress-value, [efy_shadow*=button] ::-webkit-meter-optimum-value {box-shadow: var(--efy_shadow_button)!important}
[efy_shadow*=button] [type=range]:not(.hue, .sat, .lgt, .transparency)::-moz-range-thumb {box-shadow: var(--efy_shadow_button)!important}
[efy_shadow*=button] ::file-selector-button {box-shadow: var(--efy_shadow_button)!important}
/*Shadow: Button Trans*/ [efy_shadow*=button] :is([efy_tabs] :is([efy_tab], [efy_tab] + label), :is(button, [role=button]).efy_trans_filter, [efy_select] label:not([efy_upload]), [type=range], .efy_btn_trans):not([efy_active], .efy_trans_filter_off) {box-shadow: var(--efy_shadow_button_trans)}
[efy_shadow*=button] :is([type=radio], [type=checkbox]):not(:checked) {box-shadow: var(--efy_shadow_button_trans)!important}
[efy_shadow*=button] ::-webkit-progress-bar, [efy_shadow*=button] ::-webkit-meter-bar {box-shadow: var(--efy_shadow_button_trans)!important}

/*Shadow: Trans*/ [efy_shadow*=trans] :is(details:not([efy_help]), [efy_card], [efy_clock], [efy_timer], [efy_color_picker], select:not([disabled]), input:not([type="range"], [type=checkbox], [type=radio], [role=button], [type=button], [type=submit], [type=reset], [disabled]), textarea:not([disabled]), input[type=number], blockquote, pre, audio, table, [efy_code], [efy_tabs]:not(.efy_shadow_trans_off) [efy_content], [efy_about] button:not([efy_sidebar_btn*=close]), .efy_sidebar, .efy_shadow_trans):not(.efy_shadow_trans_off, [efy_number] button:not(:focus), [efy_range_text] .efy_range_text_p:not(:focus)) {box-shadow: var(--efy_shadow_trans)}

/*Radius*/ textarea, select, input, img, video, pre, details, summary, blockquote, article, aside, [type=range], button, [role=button], [type=submit], [type=reset],
[type=button], img, video, audio, table, [efy_sidebar_btn=absolute], [efy_select] label, [efy_tabs] :is([efy_tab], [efy_tab] + label), .efy_radius {border-radius: var(--efy_radius)}
/*2*/ [efy_timer], [efy_clock], [efy_alert], .efy_radius2 {border-radius: var(--efy_radius2)}
/*0*/ mark, kbd, [type=checkbox], [type=radio], [efy_outline] a:focus, .efy_radius0 {border-radius: var(--efy_radius0)}
/*00*/ [type=radio]:checked:after, .efy_radius00 {border-radius: var(--efy_radius00)}

/*Position: Relative*/ [type=checkbox], [type=radio], [efy_select] label {position: relative}
/*Absolute*/ [efy_select] :is([type=checkbox], [type=radio], label [type=color]), [efy_select] :is([type=checkbox], [type=radio]):checked + label:after {position: absolute}

/*Width: 100%*/ img, video, iframe, hr, textarea, select, input, [efy_card] {width: 100%}
/*Max-Width: 100%*/ pre, img, video, iframe, table {max-width: 100%}

/*Cursor: Pointer*/ :is(button, [role=button], [type=submit], [type=reset], [type=button]):focus, :is(button, [type=reset], [type=button], [type=submit]):enabled:hover, [role=button]:not([aria-disabled=true]):hover, summary, [type=range], [type=file], [efy_sidebar_btn], [efy_select] label, [efy_tab] + label {cursor: pointer}
/*Help*/ abbr {cursor: help}
/*Normal*/ [tabindex='-1'] {cursor: default!important}
/*None*/ [efy_cursor_none] *, [efy_cursor_custom], [efy_cursor_custom] * {cursor: none!important}
/*Custom*/ [efy_cursor_custom] [efy_cursor] { height: 16rem; width: 16rem; margin-left: -8rem; margin-top: -8rem; position: absolute; background: var(--efy_color); border-radius: var(--efy_radius0); pointer-events: none; box-shadow: 0 0 5rem #0003; z-index: 999999!important}
/*Pointer Events: None*/ [efy_icon], [efy_alert] *, a > button, .efy_about p {pointer-events: none}

/*Disabled*/ :is(input, textarea, select):disabled, [role=button][aria-disabled=true], :is([type=submit], [type=reset], [type=button], [type=checkbox], [type=radio], button, select)[disabled] {filter: saturate(0) brightness(.7); opacity: 1; cursor: not-allowed}

/*Line-Height: 30rem*/ mark, kbd {line-height: 30rem}

/*Padding1*/ button, [role=button], [type=submit], [type=reset], [type=button], summary, blockquote, pre, [efy_select] label, [efy_tabs] :is([efy_tab], [efy_tab] + label), .efy_padding {padding: var(--efy_padding)}
/*Padding2*/ kbd, .efy_padding2 {padding: var(--efy_padding2)}
/*Gap*/ .efy_gap {gap: var(--efy_gap)}
/*Gap 0*/ .efy_gap0 {gap: var(--efy_gap0)}

/*Text: Family*/ html, body, mark, code, pre, pre span, kbd, samp, button, a {font-family: var(--efy_font_family)}
/*Bold*/ button, a, code, kbd, samp, mark, summary, th, table caption, [type=button], [type=submit], [type=reset], [efy_sidebar_btn], code,  [efy_select] label,  [efy_tabs] :is([efy_tab], [efy_tab] + label) {font-weight: bold}

/*No Selection*/ [efy_select] label {user-drag: none; -webkit-user-drag: none; user-select: none; -webkit-user-select: none}
/*Selection Color*/ ::selection {background: var(--efy_text); color: var(--efy_text2); -webkit-text-fill-color: var(--efy_text2)} ::-moz-selection {background: var(--efy_text); color: var(--efy_text2); -webkit-text-fill-color: var(--efy_text2)}

/*Scrollbar*/ ::-webkit-scrollbar {width:20rem; min-height:20rem; background: transparent!important} ::-webkit-scrollbar-thumb{background: transparent!important; border-radius: var(--efy_radius0); border: 6rem solid transparent; box-shadow: inset 0 0 0 6rem var(--efy_bg2), inset 0 0 0  1.5rem var(--efy_bg1); min-height:20rem} ::-webkit-scrollbar-thumb:hover{box-shadow: inset 0 0 0 6rem var(--efy_text)} ::-webkit-scrollbar-corner {background: transparent!important}

/*Animations*/
/*None*/ [efy_tabs] :is([efy_tab], [efy_tab] + label):active {-webkit-animation: none; animation: none}
/*Hide*/ .efy_anim_remove {animation: remove calc(var(--efy_anim_status) * var(--efy_anim_speed) * .05s) ease-in-out backwards; animation-play-state: var(--efy_anim_state)}
/*Pulse*/ :is(button, [efy_tab], [efy_tab] + label, [efy_bg_nr], .efy_anim_pulse):not([disabled]):active {scale: .9; transition: calc(var(--efy_anim_status) * var(--efy_anim_speed) * .1s)}
/*Pulse2*/ :is(details, input, textarea, select, a, label, [efy_timer], [efy_clock], [efy_card], [efy_alert], .efy_anim_pulse2):not([disabled]):active {scale: .98; transition: calc(var(--efy_anim_status) * var(--efy_anim_speed) * .1s)}
/*Remove*/ @keyframes remove {0% {scale: .98} 30% {scale: 1} 100% {scale: .8; box-shadow: none}}
/*No Animations*/ [efy_animations*=off] :is(details, input, textarea, select, a, label, [efy_timer], [efy_clock], [efy_card], [efy_alert], button, [efy_tab], [efy_bg_nr], .efy_anim_pulse, .efy_anim_pulse2):not([disabled]):active {scale: 1; transition: unset}

/*Convergent body*/ * {margin: 0; padding: 0; box-sizing: border-box}
html {font-size: var(--efy_font_size)!important; font-size: var(--efy_font_size)!important;
    :is(.efy_3d_bg, .efy_3d_front, .efy_3d_back) {position: fixed; inset: 0; z-index: -1; object-fit: cover; width: 100vw; height: var(--efy_100vh); border-radius: 0!important; background-position: var(--efy_bg_x) var(--efy_bg_y)!important; pointer-events: none}
    .efy_3d_front {z-index: 9998} html .efy_3d_back {z-index: -1}
}
body {width: 100vw; padding: var(--efy_body_padding); line-height: 1.5; min-height: var(--efy_100vh); max-width: var(--efy_body_width); overflow: overlay; transition: background calc(var(--efy_anim_status) * var(--efy_anim_speed) * .3s), color calc(var(--efy_anim_status) * var(--efy_anim_speed) * .3s); scroll-behavior: smooth; -webkit-tap-highlight-color: transparent;
    * {font-size: 16rem}
}

/*Headings*/ h1 {font-size: 45rem} h2 {font-size: 40rem} h3 {font-size: 35rem} h4 {font-size: 30rem} h5 {font-size: 25rem} h6 {font-size: 20rem}

/*Links & buttons*/ a, a:visited {font-size: inherit}
a[role=button] {display: inline-flex; align-items: center; place-content: center}
button, [role=button], [type=submit], [type=reset], [type=button] {display: inline-flex; width: fit-content; font-size: 16rem; -webkit-text-fill-color: var(--efy_text2); margin: var(--efy_gap0) 0; align-items: center; place-content: center}

header {text-align: center; padding: 0  8rem; grid-column: 1 / -1;
    :is(p, h1) {margin: 15rem auto}
    > nav {padding: 15rem 0 0 0;
        :is(ul, ol) {align-content: space-around; align-items: center; display: flex; flex-direction: row; justify-content: center; list-style-type: none; margin: 0; padding: 0}
        :is(a, a:visited) {margin-right: 15rem; text-decoration: none}
        a:last-child {margin-right: 0}
}}

[efy_content=menu] {padding: 0 var(--efy_gap)!important}

table {border-collapse: collapse; margin: 15rem 0; overflow: auto; width: fit-content;
    caption {margin-bottom: 8rem}
    td, th {text-align: left; padding: 8rem}
}

textarea, select, input {font-size: 16rem; font-family: inherit; padding: 8rem; margin-bottom: var(--efy_gap0); box-shadow: none; box-sizing: border-box; -webkit-appearance: none; appearance: none}

select {background-image: linear-gradient(45deg, transparent 49%, var(--efy_text) 51%), linear-gradient(135deg, var(--efy_text) 51%, transparent 49%); background-position: calc(100% - 20rem), calc(100% -  15rem); background-size: 5rem 5rem, 5rem 5rem; background-repeat: no-repeat;
    &:not([multiple]) {padding-right: 32rem}
}
option:not(option:checked), optgroup {background: var(--efy_text2)}
select[multiple] {background-image: none !important;
    option:not(option:checked), optgroup {background: transparent}
    option {padding: var(--efy_padding2); margin-top: 5rem; border-radius: var(--efy_radius0)}
}

/*Checkbox & Radio*/ [type=checkbox], [type=radio] {--efy_size: calc(24rem + var(--efy_border_size));
    width: var(--efy_size); height: var(--efy_size); padding: calc(7rem - var(--efy_border_size)); vertical-align: bottom; margin-bottom: 0; display: inline-flex; align-items: center; place-content: center
}
[type=radio]:checked:after {width: 100%; aspect-ratio: 1; background: var(--efy_text2)}

footer {margin-top: 40rem; padding: 30rem 15rem 25rem 15rem; text-align: center}
hr, section, footer {border-top: var(--efy_border)}
ul, ol, li {padding: 0 2rem; margin: 0 8rem}
aside {width: 30%; padding: 0 15rem; margin-left: var(--efy_gap); float: right}
article {padding: 15rem}
section {border-bottom: var(--efy_border); padding: 30rem 15rem; margin: calc(var(--efy_gap) * 3) 0}
mark {padding: 2rem 7rem}
hr {margin: 15rem auto}
main :is(img, video) {height: auto}
figure {margin: 0; text-align: center}
figcaption {margin-bottom: 15rem}
blockquote {position: relative; padding-left: 25rem; font-weight: bold}
blockquote:before {content: ''; display: block; width: 5rem; height: calc(100% - 20rem); top: 10rem; left: 10rem; position: absolute; border-radius: var(--efy_radius)}
cite {font-style: normal; font-weight: normal}
pre {overflow: auto}

[efy_number] {display: flex; gap: var(--efy_gap0); align-items: center; padding: 0; margin: var(--efy_gap0) 0;
    &, input {appearance: textfield}
    :is(button, input, select) {margin: 0!important}
    input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0}
}

/*Color Picker*/ [efy_color] {display: flex; flex-direction: column; padding: 0;
    [efy_content] {padding: calc(var(--efy_gap) - 5rem) var(--efy_gap);
        --efy_bs: 0 0 3rem oklch(0% 0 0 / .5), inset 0 0 0 calc(1.5rem + var(--efy_border_size)) oklch(var(--efy_bg_var)), inset 0 0 6rem oklch(0% 0 0 / .5);
        .hue {
            /*Firefox Fallback*/ background: linear-gradient(to right, oklch(70% .3 0), oklch(63% .26 29), oklch(71% .17 55),
            oklch(71% .24 142), oklch(77% .13 202), oklch(64% .2 253), oklch(67% .27 318), oklch(70% .3 0)) !important;
            background: linear-gradient(to right in oklch longer hue, oklch(70% .3 0) 0%, oklch(70% .3 0) 100%) !important
        }
        [type=range]:not(.x, .y, .blur, .spread)::-webkit-slider-thumb {background: transparent; box-shadow: var(--efy_bs) !important; border: 0}
        [type=range]:not(.x, .y, .blur, .spread)::-moz-range-thumb {background: transparent; box-shadow: var(--efy_bs) !important; border: 0}
    }
    .efy_tabs {
        [efy_tab] + label, button {min-width: var(--efy_size); height: var(--efy_size); border-radius: var(--efy_radius); display: flex; align-items: center; place-content: center;
            &, i {margin: 0!important}
            &:before, &:after {display: none}
        }
        [efy_tab] + label:not([for=efy_color_bgcol]) {-webkit-text-fill-color: var(--efy_text2)!important}
        [for=efy_color_bgcol] {background: var(--efy_bg)!important; -webkit-text-fill-color: var(--efy_text)!important}
        [for=efy_color_text] {background: var(--efy_text)!important}
        [for=efy_color_buttoncol] {background: oklch(var(--efy_color_buttoncol_var))!important}
        [for=efy_color_bordercol] {background: oklch(var(--efy_color_bordercol_var)) !important}
        .color_add, .color_remove, .efy_copy, .efy_paste {width: var(--efy_size)}
        [efy_tab]:not([efy_active]) + label {box-shadow: none}
        [efy_tab][efy_active] + label {box-shadow: inset 0 0 0 3rem var(--efy_text); border: none}
        [type=radio]:checked + label:after {display: none}
        [type=radio] {width: 0; height: 0}
        .color_add i:before {font-size: 14rem}
    }
    [efy_range_text=Angle] {margin-top: 10rem}
}
#efy_colors {padding: var(--efy_gap) 0;
    > div:not(.efy_shadows, .efy_hr_div), .efy_shadows_button, .efy_shadows_trans {padding: 0 var(--efy_gap)}
    .efy_hr_div {padding: 0 0 0 var(--efy_gap)}
    [efy_range_text="Angle"] {display: flex; flex-wrap: wrap; row-gap: 5rem;
        .efy_color_angle_input {width: 100%; margin: 0}
    }
    #efy_gradient, .efy_custom_colors {margin-bottom: 5rem;
        [for*=status] {display: flex; margin: 0 0 7rem 0; width: fit-content; align-items: center; place-content: center}
    }
    .efy_shadows {display: flex; flex-direction: column; gap: 5rem}
}

/*Color input*/ [type=color] {&, &:focus {background: transparent; width: var(--efy_size); height: var(--efy_size); padding: 0}}
::-webkit-color-swatch-wrapper {background: transparent; width: 100%; height: 100%; padding: 0}
::-webkit-color-swatch {border-radius: var(--efy_radius); border: var(--efy_border)!important}
::-moz-color-swatch {border-radius: var(--efy_radius); border: var(--efy_border)!important}

/*Range input*/
[type=range] {-webkit-appearance: none; appearance:none; height: var(--efy_size0); padding: 0; background: var(--efy_color_trans)}
::-moz-range-thumb {background: var(--efy_color); border: var(--efy_border); border-radius: var(--efy_radius); height: var(--efy_size0); width: var(--efy_size0)}
::-moz-range-track {background: transparent}
::-webkit-slider-thumb {-webkit-appearance: none; width: var(--efy_size0); height: var(--efy_size0); border-radius: var(--efy_radius); background: var(--efy_color); border: var(--efy_border)}
::-webkit-slider-runnable-track {background: transparent}

::file-selector-button {background: var(--efy_color); color: var(--efy_text2); border: var(--efy_border); border-radius: var(--efy_radius); padding: var(--efy_padding); font-weight: bold; cursor: pointer; font-family: var(--efy_font_family)!important; font-size: 16rem}
::-moz-number-spin-up, ::-moz-number-spin-down {appearance: none; display: none}
::-webkit-inner-spin-button {appearance: none; display: none}

progress, meter {height: 15rem; border: 0; background: var(--efy_color_trans); border-radius: var(--efy_radius0); border: 0}
::-webkit-progress-bar, ::-webkit-meter-bar {height: 15rem; background: var(--efy_color_trans)}
::-webkit-progress-value, ::-webkit-meter-optimum-value {background: var(--efy_color)}
::-webkit-progress-bar, ::-webkit-meter-bar, ::-webkit-progress-value, ::-webkit-meter-optimum-value {border-radius: var(--efy_radius0); border: 0}
::-moz-progress-bar , ::-moz-meter-bar {height: 15rem; background: var(--efy_color); border-radius: var(--efy_radius0); border: 0}

/*Audio & Video*/ audio::-webkit-media-controls-enclosure {background: var(--efy_bg1); border-radius: var(--efy_radius); border: var(--efy_border)}
::-internal-media-controls-overflow-menu-list, ::-webkit-internal-media-controls-overflow-menu-list-item {appearance: none; -webkit-appearance: none; background: var(--efy_text2); border-radius: var(--efy_radius)!important; border: var(--efy_border)}

/*Background Origin*/ progress, meter, [type=range], [efy_cursor_custom] [efy_cursor], ::file-selector-button {background-clip: border-box; background-origin: border-box}
::-webkit-color-swatch, ::-webkit-slider-thumb, ::-webkit-progress-bar, ::-webkit-meter-bar, ::-webkit-progress-value, ::-webkit-meter-optimum-value {background-clip: border-box; background-origin: border-box}
::-moz-color-swatch, ::-moz-range-thumb, ::-moz-progress-bar , ::-moz-meter-bar {background-clip: border-box; background-origin: border-box}

/*Details*/ details, summary {list-style: none; position: relative}
:is(details, [efy_content=menu], [efy_content=mode], .efy_mode_type_div) > details {padding: .6rem 0 0 15rem}
details { margin-bottom: var(--efy_gap);
    &:not([efy_help]) summary:before {position: absolute; right: 8rem; transition: transform calc(var(--efy_anim_status) * var(--efy_anim_speed) * .1s) ease}
    details {margin-top: var(--efy_gap)} details details:not([efy_help]) > summary:before {right: -6rem}
}
details[open] { padding: .6rem  15rem 15rem  15rem;
    &:not([efy_help]) > summary:before {rotate: 90deg; right: -2rem}
    summary + * {margin-top: 0}
    summary {margin: 8rem 0; padding: 0}
    > *:last-child {margin-bottom: 0}
}
summary, details[open] summary {padding-right: 20rem}
summary::-webkit-details-marker {display: none}

/*Help Box*/ [efy_help] {background: transparent; border: 0; padding: 0!important; margin: 0;
    summary {pointer-events: none; margin-bottom: 0; padding: 0;
        &:after {margin-left: 8rem; opacity: .5; pointer-events: all}
}}
[efy_help][open] {padding: 0 0 10rem 0!important}

/*Select Menu*/ [efy_select] {
    label:not([efy_upload]):before {width: 16rem; height: 16rem; margin-right: 8rem; margin-top: -.2rem; position: relative; border-radius: calc(var(--efy_radius) / 1.5); border: 2.5rem solid transparent; background: var(--efy_color) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: source-out; mask-composite: exclude}
    [type=radio]:checked + label:after {background: var(--efy_text2); width: 9.6rem; height: 9.6rem; top: 8rem; left: 5.6rem; margin: var(--efy_padding); border-radius: calc(var(--efy_radius) / 3)}
    [type=checkbox]:checked + label:after {top: 13.2rem; left: 16.5rem; font-family: 'efy_icons'; font-size: 12rem}
    input:checked + label:before {border-color: var(--efy_text2); background: transparent}
    :is([type=checkbox], [type=radio], label [type=color]) {opacity:0}
    p, button, label:not([efy_tabs] [efy_tab] + label, :is([efy_content=mode], .efy_img_previews) label, [efy_select*="margin0"] label), .efy_about a, [type=file] {margin: calc(var(--efy_gap0) / 2) var(--efy_gap0) calc(var(--efy_gap0) / 2) 0}
    label:before, input:checked + label:after {vertical-align: middle; display: inline-flex}
}

/*Upload Input*/ [efy_upload] {position: relative; width: fit-content; font-weight: bold;
    > input {position: absolute; inset: 0; margin: 0; padding: 0; border: 0; opacity: 0}
}
[efy_upload*=small] {width: var(--efy_size); height: var(--efy_size); display: flex; align-items: center; place-content: center; line-height: 1;
    i {margin: 0 1rem 0 0}
    input::file-selector-button {width: var(--efy_size)!important; height: var(--efy_size)!important}
}

.efy_backup_div {display: flex; flex-wrap: wrap; gap: var(--efy_gap0); margin-top: var(--efy_gap0);
    &:not(:last-of-type) {margin-bottom: var(--efy_gap0)}
    :is(button, [role=button]) {margin: 0}
}

[efy_range_text] {
    mark {line-height: 1}
    [type=range] {margin: 6rem 0 0 0; background-origin: border-box!important}
    [efy_number] {display: inline-flex; margin: 0;
        &:focus-within {margin: 0 0 unset 10rem!important}
}}
[efy_range_text*="Max Width"] {
    .efy_range_text_p {width: 5ch}
    [type=range] {margin: 0}
    select {height: var(--efy_size0); line-height: 1; width: auto}
    .efy_max_width_div {display: flex; gap: var(--efy_gap0); justify-content: space-between; margin-top: 5rem;
        * {margin: 0}
        [efy_number] {width: 100%}
}}

[efy_tabs] {display: flex; flex-direction: column; gap: var(--efy_gap0);
    :is([efy_tab], [efy_tab] + label)[efy_active] {-webkit-text-fill-color: var(--efy_text2)}
    [efy_tab] + label {min-width: var(--efy_size); line-height: 1; height: var(--efy_size)}
    [efy_content] {opacity: 0; position: absolute; pointer-events: none; scale: .3; padding: calc(var(--efy_gap00) + 10rem);}
    [efy_content][efy_active] {opacity: 1; position: relative; pointer-events: all; scale: 1}
    [efy_content]:not([efy_active]) * {position: absolute; pointer-events: none; opacity: 0; display: none}
    .efy_tabs {display: flex; flex-wrap: wrap; gap: var(--efy_gap0);
        :is(button, [efy_tab] + label):last-of-type) {margin: 0}
}}
[efy_tabs=efyui_filters] :is([type=reset], [for=efy_trans_filter_menu], [for=efy_bg_size]) {margin: 0 var(--efy_gap0) 10rem 0}

[efy_card] {padding: 15rem}
[efy_card*=grid] {display: grid; gap: 5rem; align-content: baseline}

[efy_card], [efy_tabs] [efy_content] {border-radius: var(--efy_radius); background: var(--efy_bg1); border: var(--efy_border)}

[efy_tabs] [efy_content][efy_active], [efy_card], [efy_search_input] {transition: calc(var(--efy_anim_status) * var(--efy_anim_speed) * .1s) linear}

/*Sidebar*/ .efy_sidebar {background: var(--efy_bg); padding: var(--efy_gap) calc(var(--efy_gap) - 2rem) var(--efy_gap) var(--efy_gap); width: 100vw; max-width: var(--efy_sidebar_width); height: var(--efy_100vh); z-index: 9999; position: fixed; right: var(--efy_sidebar_width_n); top: 0; border-radius: var(--efy_radius2) 0 0 var(--efy_radius2); transition-property: left, right; transition-duration: calc(var(--efy_anim_status) * var(--efy_anim_speed) * .3s); overflow-y: auto;
    &:not([efy_sidebar*=on] .efy_sidebar) * {display: none}
    > details:last-of-type {margin: 0}
    summary { display: flex; align-items: center;
        > mark {padding: 5px 7rem; line-height: 1; margin-left: 10rem}
        > p {margin: 0}
    }
    label:not([type=checkbox] + label) { &:before, &:after {display: none}}
    [efy_search_input] {margin: 0 0 var(--efy_gap) 0}
    [efy_content=mode] {padding: 0; border: 0; background: unset;
        .current_mode {background: var(--efy_bg1); padding-bottom: var(--efy_gap); border: var(--efy_border); border-radius: var(--efy_radius);
            &:has(#efy_mode_default:checked) {padding: 0;
                .efy_mode_div {padding: var(--efy_gap0)}
            }
        }
        hr {margin: 0}
        .efy_mode_div, .efy_mode_type_div {display: flex; flex-wrap: wrap; gap: var(--efy_gap0);
            label {margin: 0}
        }
        .efy_mode_div {padding: var(--efy_gap) var(--efy_gap) 0 var(--efy_gap)}
        .efy_mode_type_div {padding: 0 var(--efy_gap)}
        .efy_mode_type_div {
            details {width: calc(50% - var(--efy_gap00)); margin: 0;
                &[open] {width: 100%}
            }
        }
        &:has(.system_light:not(.efy_hide_i)) .efy_mode_type_div {margin-top: var(--efy_gap)}
        [efy_help=type], [efy_help=images] {margin: 0 0 0 var(--efy_gap)}
        :is(.system_light, .system_dark) > div {display: flex; flex-wrap: wrap; gap: var(--efy_gap0)}
    }

.efy_hr_div {display: flex; align-items: center; place-content: center;
    details {width: 100%; margin-right: 0;}
    summary {display: flex; gap: 8rem; width: 100%; padding-right: 0;
        &:after {margin: 0}
        hr {margin: 0; order: 1}
    }
    summary p, > p {min-width: fit-content}
    [efy_help=custom_colors] p {font-weight: normal}
}

#efy_themes {display: flex; flex-wrap: wrap; margin: var(--efy_gap) 0 0 0; padding: 0;
    summary {padding: 0 32rem 0 12rem}
    &[open] summary {margin-bottom: 7rem;
        &:before {right: 10rem}
    }
    :is(button, input, label, .name) {margin: 0}
    .name {width: 100%}
    .themes, .buttons {padding: var(--efy_gap); gap: var(--efy_gap0)}
    .themes {display: flex; flex-wrap: wrap; width: 100%;
        [type="checkbox"] {pointer-events: none}
        label:before, label:after {display: none!important}
        label i:before {background: var(--efy_color); background-clip: text}
    }
    .themes {display: flex; flex-wrap: wrap;
        [data-id] {
            width: fit-content; min-width: unset; height: var(--efy_size); background-clip: text, border-box!important; background-origin: border-box!important;
            background: var(--efy_color), var(--efy_color_trans); -webkit-text-fill-color: transparent; font-weight: bold;
            &[contenteditable=true] {border: var(--efy_border_size) dashed var(--efy_text_trans2); text-decoration: none;
                background: var(--efy_bg1); -webkit-text-fill-color: var(--efy_text); color: var(--efy_text);
                &:focus {border: var(--efy_border); box-shadow: 0 0 0 var(--efy_border_size) var(--efy_text)}
            }
        }
    }
    p {line-height: 1; margin: var(--efy_gap)}
}
}
[efy_sidebar*=on] {
    &:not([efy_sidebar*=left]) :is(body, .efy_sidebar_width)::-webkit-scrollbar {width: 0}
    :is(body, .efy_sidebar_width) {--efy_bg_width: calc(100vw - var(--efy_sidebar_width)); width: var(--efy_bg_width); margin-right: var(--efy_sidebar_width); margin-left: 0; --efy_body_width: 100%}
    .efy_sidebar {right: 0; box-shadow: 0 0 30rem #0005}
}
[efy_sidebar*=left] .efy_sidebar {right: unset; left: var(--efy_sidebar_width_n); border-radius: 0 var(--efy_radius2) var(--efy_radius2) 0}
[efy_sidebar*=on_left] {
    :is(body, .efy_sidebar_width) {margin-left: var(--efy_sidebar_width); margin-right: 0}
    .efy_sidebar {left: 0}
}

[efy_sidebar_btn*=close] {margin: 0 0 15rem 0; height: fit-content}
[efy_sidebar_btn*=absolute] {z-index: 9999; font-size: 20rem; padding: 4rem 10rem; position: fixed; text-align: center; top: 15rem; right: 15rem}


.trans_window_div {width: fit-content; display: inline-flex; flex-wrap: wrap; gap: var(--efy_gap0);
    label {margin: 0}
}
.efy_flex {display: flex; gap: var(--efy_gap); flex-wrap: wrap}

[efy_about], .efy_sidebar [efy_card] {margin-bottom: var(--efy_gap)}
.efy_about {padding: 0 10rem}
[efy_about] {display: flex; gap: var(--efy_gap); justify-content: space-between; align-items: start;
    button {margin: 0; display: flex; align-items: center; gap: 8rem;
        &:not([efy_sidebar_btn*=close]) {background: var(--efy_bg1);
            i {-webkit-text-fill-color: var(--efy_text)}
}}}
[efy_logo] {
    p {font-size: 24rem; padding-top: 2.5rem; display: inline-block; -webkit-text-fill-color: var(--efy_text)}
    i {font-size: 16rem; margin: 0 -2rem 0 0; display: inline-block}
}

/*Button Align*/ :is(#efy_btn_align div, #efy_notify_align) {display: grid; gap: var(--efy_gap); grid-template-columns: 1fr 1fr 1fr; width: fit-content;
    input {position: relative; opacity: 1}
}
#efy_btn_align {
    div {margin-bottom: var(--efy_gap0)}
    #middle_middle {opacity: 0!important; pointer-events: none}
}
[efy_btn_align*=left] {left: 15rem; right: unset}
[efy_btn_align*=right] {right: 15rem; left:unset}
[efy_btn_align*=top] {top: 15rem; bottom: unset}
[efy_btn_align*=bottom] {bottom: 15rem; top: unset}
[efy_btn_align*=_middle] {top: 50vh}
[efy_btn_align*=middle_] {left: calc(50vw - 20rem); right: unset}


#efy_images_bg:not([efy_mode*=trans] #efy_images_bg) {display: none}
.efy_img_previews {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: var(--efy_gap);
    &:not(#efy_vfilters .efy_img_previews) {padding: 0 var(--efy_gap)}
    [efy_bg_nr] {background-origin: border-box!important}
    &.efy_remove [efy_bg_nr], [efy_bg_nr]:is([efy_active], :focus) {box-shadow: inset 0 0 0 var(--efy_border_size) var(--efy_text)!important; border-color: var(--efy_text)!important; z-index: 2}
    :is(label, button) {margin: 0; background-origin: border-box; background-clip: border-box; aspect-ratio: 1; cursor: pointer; position: relative; box-shadow: inset 0 0 20rem #0003, 0 0 20rem #0003; background-size: cover!important; background-repeat: no-repeat!important; background-position: center!important; border-radius: var(--efy_radius); width: 100%}
    :is([for=idb_addimg_bg], [for=idb_addimg_front], [for=idb_addimg_back], [for=idb_remove_toggle], .efy_images_reset) {padding: 0; display: flex; align-items: center; place-content: center; box-shadow: unset}
    :is([for=idb_addimg_bg], [for=idb_addimg_front], [for=idb_addimg_back]) {background-color: var(--efy_color)!important;
         &:before {display: none}
         i:before {font-size: 20rem}
    }
    :is([for=idb_addimg_bg], [for=idb_addimg_front], [for=idb_addimg_back], button) {width: 100%; height: 100%}
    [efy_shadow*=button] :is([for=idb_addimg_bg], [for=idb_addimg_front], [for=idb_addimg_back]) {box-shadow: var(--efy_shadow_button)!important}
    i {margin: 0}
    :is(.efy_images_reset, .idb_reset_front, .idb_reset_back) i:before {font-size: 25rem}
    [for=idb_remove_toggle] {
        &:not(#idb_remove_toggle:checked + label) {background: var(--efy_color), var(--efy_color_trans);
        background-clip: text, border-box; background-origin: border-box; border: var(--efy_border); -webkit-text-fill-color: transparent}
        &:before, &:after {display: none!important}
        i {font-size: 22rem}
    }
}

[efy_timer], [efy_clock] {padding: 10rem; display: inline-flex; flex-wrap: wrap; align-items: center}
[efy_timer] {gap: var(--efy_gap0)}
[efy_timer] [efy_text], [efy_clock] p {font-size: 36rem; font-weight: bold; line-height: 1}
[efy_clock] .format {padding-left: 8rem}
[efy_start], [efy_reset]{padding: 8rem 10rem!important}
:is([efy_start], [efy_reset]):before {margin-right:0!important}
[efy_clock]:not([efy_clock*=hms]) :is(.second, .s2), [efy_clock]:not([efy_clock*="12"]) .format {display: none}

[efy_alerts] {display: grid; gap: var(--efy_gap0); position: fixed; top: var(--efy_gap); left: var(--efy_gap); z-index: 99999; width: calc(100% - (var(--efy_gap) * 2)); max-width: 400rem}
[efy_alerts*=middle] {left: calc((var(--efy_bg_width) / 2) - 200rem)}
[efy_alerts*=right] {right: var(--efy_gap); left: unset}
[efy_alerts*=bottom] {bottom: var(--efy_gap); top: unset}

[efy_alert] {display: grid; grid-template-columns: 1fr auto; gap: var(--efy_gap); padding: 10rem; box-shadow: 0 0 20px var(--efy_text_trans); background: var(--efy_text2);
    .remove_timer { display: flex; align-items: center; place-content: center; height: fit-content;
        > :is(button, div) {margin: 0; height: var(--efy_size); min-width: var(--efy_size)}
        .time_left {display: flex; align-items: center; place-content: center; padding: 10rem; border-radius: var(--efy_radius) 0 0 var(--efy_radius);
            font-weight: bold; border: var(--efy_border); border-right: 0; background: var(--efy_color), var(--efy_color_trans);
            background-clip: text, border-box; background-origin: border-box; -webkit-text-fill-color: transparent}
        .remove:not(.efy_quick_notify_content .remove) {border-radius: 0 var(--efy_radius) var(--efy_radius) 0}
    }
    .answers {display: flex; gap: var(--efy_gap0);
        button {margin: 0;
            &:not(.empty){pointer-events: all}
        }
    }
}
[efy_btn_square] {display: flex; align-items: center; padding: 10rem; height: fit-content; aspect-ratio: 1; margin: 0;
    [efy_icon] {margin:0}
}
.efy_quick_notify_content {display: grid; gap: var(--efy_gap); grid-template-columns: 1fr;
    [efy_alert] {background: var(--efy_bg1); box-shadow: none; border-radius: var(--efy_radius)}
}

/*Quick Shortcuts*/ .efy_square_btn, [efy_sidebar_btn=absolute], :is([efy_timer], [efy_color_picker] .copy_btn) button {
    display: inline-flex; gap: 12rem; margin: 0; padding: 10rem; width: var(--efy_size); height: var(--efy_size); align-items: center; place-content: center;
    i {margin:0}
}
.efy_quick_shortcuts {gap: var(--efy_gap); padding: var(--efy_gap0);
    .efy_quick_back i {rotate: 180deg}
    [efy_clock] {margin: 0; height: var(--efy_size); border-radius: var(--efy_radius); padding: 0 8rem;
        p {font-size: 25rem}
    }
}
.efy_quick_buttons, .efy_about_div .efy_flex {gap: var(--efy_gap0)}
.efy_quick_buttons button {margin: 0}
.efy_about_div {
    .efy_flex {margin: var(--efy_gap0) 0 0 0;
        a {margin: 0}
    }
    mark {display: block; width: fit-content; margin-bottom: 10rem; padding: 0 10rem}
}

 #custom_sidebar_menu {display: flex; flex-wrap: wrap; gap: var(--efy_gap); margin-bottom: var(--efy_gap);
    a {background: var(--efy_bg1); padding: var(--efy_padding); border-radius: var(--efy_radius); border: var(--efy_border); -webkit-text-fill-color: var(--efy_text)}
}

/*Translations*/ .efy_lang_text {display: inline; margin: 0!important; pointer-events: none!important; -webkit-text-fill-color: inherit; color: inherit}
.efy_range_text_p {background: transparent; border-color: transparent!important; padding: 0 4rem; width: fit-content; border-radius: calc(var(--efy_radius) / 1.5); margin: 0}

/*Code*/ [efy_code] {position: relative; padding-top: calc(40rem + var(--efy_gap0)); white-space: pre-wrap;
    .efy_bar {position: absolute; top: 0; left: 0; width: 100%; padding: calc(var(--efy_gap0) / 1.5); display: flex; gap: calc(var(--efy_gap0) / 1.5); justify-content: space-between; border-bottom: var(--efy_border);
        div {display: flex; gap: calc(var(--efy_gap0) / 1.5)}
        button {margin: 0; padding: var(--efy_padding2); border-radius: var(--efy_radius0)}
        :is(mark, button) {padding: 0 8rem; line-height: 1; display: flex; align-items: center; place-content: center; height: 28rem}
        :is(.efy_copy, .efy_fs) {width: 28rem}
        i {margin: 0 0 -1rem 0; font-size: 14rem}
}}
[efy_code]:fullscreen {border-radius: 0; border: none; background: var(--efy_bg)!important}

.efy_code_trans_on  [efy_code]:fullscreen {background: transparent!important; backdrop-filter: blur(50rem)}
 [efy_code] .efy_bar .efy_code_trans {display: none} [efy_code]:fullscreen .efy_code_trans {display: unset}

:not(:root):fullscreen::backdrop {display: none!important}

/*Convergence*/ @media screen and (max-width: 449px) {
    [efy_alerts] {left: var(--efy_gap)}
    [efy_sidebar*=on] .efy_sidebar {border-radius: 0; border: 0}
} @media screen and (max-width: 840px) {
    [efy_sidebar*=on] {
        [efy_alerts] {--efy_bg_width: 100vw!important; width: calc(100% - (var(--efy_gap) * 2))}
        [efy_alerts*=right] {right: calc(var(--efy_gap) - var(--efy_sidebar_width)); left: unset}
    }
    [efy_sidebar*=on_left] {
        [efy_alerts] {margin-left: 0}
        [efy_alerts*=right] {right: var(--efy_gap); left: unset}
    }
}
/*EFY Icons*/ @font-face {font-family: 'efy_icons'; src: url('./fonts/efy_icons.woff2') format('woff2');
    font-weight: normal; font-style: normal; unicode-range: U+00E950-00E920;
} @font-face {font-family: 'efy_icons'; src: url('../efy/fonts/efy_weather.woff2') format('woff2');
    font-weight: normal; font-style: normal; unicode-range: U+00E950-00E955;
}
i, :is([efy_start], [efy_reset], [efy_sidebar_btn], details > summary):before, [efy_help] summary:after,  [type=checkbox]:checked:after {
    font-family: 'efy_icons' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal;
    text-transform: none; vertical-align: middle; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
} i {margin-right: 8rem}

[efy_icon] {align-items: center; place-content: center;
    &, &:before {display: inline-flex}
}
[efy_icon=accessibility]:before {content: "\e910"}
[efy_icon*=arrow]:before {content: "\e900"}
[efy_icon=audio]:before {content: "\e905"}
[efy_icon=camera]:before {content: "\e91f"}
[efy_icon=check]:before, [efy_select] [type=checkbox]:checked + label:after, [type=checkbox]:checked:after {content: "\e914"}
[efy_icon*=chevron]:before, details:not([efy_help]) > summary:before {content: "\e907"}
[efy_icon=circle]:before {content: "\e91c"}
[efy_icon=cloud]:before {content: "\e954"}
[efy_icon=copy]:before {content: "\e919"}
[efy_icon=dots]:before {content: "\e902"}
[efy_icon=edit]:before {content: "\e91b"}
[efy_icon=flash]:before {content: "\e952"}
:is([efy_icon=fullscreen], [efy_icon=move]):before {content: "\e90c"}
[efy_icon=github]:before {content: "\e91d"}
[efy_icon=globe]:before {content: "\e90f"}
[efy_icon=group]:before {content: "\e90e"}
[efy_icon=heart]:before {content: "\e915"}
[efy_icon=help]:before, [efy_help] summary:after {content: "\e901"}
[efy_icon=key]:before {content: "\e918"}
[efy_icon=menu]:before {content: "\e906"}
[efy_icon=menu2]:before {content: "\e903"}
[efy_icon=microphone]:before {content: "\e920"}
[efy_icon=moon]:before {content: "\e955"}
[efy_icon=notify]:before {content: "\e917"}
[efy_icon=notify_active]:before {content: "\e916"}
[efy_icon=paste]:before {content: "\e91a"}
:is([efy_icon=pause], [efy_timer] [efy_start][efy_active]):before {content: "\e90b"}
:is([efy_icon=play], [efy_timer] [efy_start]):before {content: "\e90a"}
[efy_icon=plus]:before {	font-size: 12rem}
[efy_icon=rain]:before {content: "\e951"}
:is([efy_icon=reload], [efy_reset]):before {content: "\e90d"}
:is([efy_icon=remove], [efy_icon=plus]):before {content: "\e909"}
[efy_icon=screen]:before {content: "\e91e"}
[efy_icon=search]:before {content: "\e908"}
[efy_icon=snow]:before {content: "\e953"}
[efy_icon=star]:before {content: "\e904"}
[efy_icon=sun]:before {content: "\e950"}
[efy_icon=user]:before {content: "\e913"}
[efy_icon=zoom_in]:before {content: "\e912"}
[efy_icon=zoom_out]:before {content: "\e911"}
:is([efy_icon=chevron_up], [efy_icon=arrow_up]):before {rotate: -90deg}
:is([efy_icon=move], [efy_icon=plus]):before {rotate: 45deg}
:is([efy_icon=chevron_down], [efy_icon=arrow_down]):before {rotate: 90deg}
:is([efy_icon=chevron_left], [efy_icon=arrow_left]):before {rotate: 180deg}