@bakung-ui/bakung.css
Version:
HTML UI library pure CSS, lightweight, no javascript
1 lines • 127 kB
CSS
:root{--font-style:normal;--font-variant:normal;--font-weight:300;--font-stretch:normal;--font-size:16px;--line-height:1.5;--font-family:Lato,"Helvetica Neue",sans-serif;--font:var(--font-style) var(--font-variant) var(--font-weight) var(--font-stretch) var(--font-size) /var(--line-height) var(--font-family);--letter-spacing:0.06em;--accent-color:oklch(0.59 0.11 281.84);--font-color:oklch(0.36 0.02 285.26);--font-color:oklch(0 0 0);--font-color-alt-1:oklch(0.44 0.02 284.16);--font-color-alt-2:oklch(0.6 0.02 285.26);--bg-color:oklch(0.98 0 0);--bg-color-text-alt-1:oklch(0.36 0.02 285.26);--bg-color-text:oklch(0.95 0.01 285.37);--bg-color-clickable:oklch(0.96 0.01 285.53);--border-color-control:oklch(0.75 0.02 285.18);--border-color-boundary:oklch(0.82 0.02 285.18);--transparent-color:oklch(from var(--accent-color) l c h/.15);--href--color:oklch(0.56 0.22 276.32);--href--visited-color:oklch(0.42 0.13 279.17);--shadow-float:0 3px 10px 0 var(--transparent-color);--shadow-clickable:0 2px 2px 0 var(--transparent-color);--focus-outline:0.25rem solid var(--transparent-color);--focus--box-shadow:0 0 0 0.25rem var(--transparent-color);--elements-block-level-space:1rem;--boundary--border:1px solid var(--border-color-boundary);--h--font-family:Montserrat,sans-serif;--h--font-weight:500;--h--line-height:1;--h--letter-spacing:-0.016em;--h--color:var(--font-color-alt-1);--backdrop--bg-color:var(--transparent-color);--dialog--height:auto;--dialog--width:auto;--blockquote--border-width:0 0 0 4px;--blockquote--border-style:solid;--blockquote--border-color:var(--border-color-boundary);--blockquote_--footer--color:var(--font-color-alt-2);--blockquote_--footer--margin:1rem 0 0;--pre--color:var(--font-color-alt-1);--pre--background:var(--bg-color-text);--pre--border:var(--boundary--border);--cks--font-family:"Sometype Mono",monospace,monospace;--cks--font-size:1.125rem;--cks--font-weight:400;--code--color:var(--font-color);--code--background:oklch(from var(--pre--background) .9 c h/.8);--kbd--color:#fff;--kbd--background:var(--bg-color-text-alt-1);--kbd--border-radius:3px;--kbd_-kbd--font-weight:400;--kbd_-kbd--color:var(--font-color);--kbd_-kbd--border:solid var(--border-color-boundary);--kbd_-kbd--border-width:1px 2px 3px 1px;--kbd_-kbd--padding:0 0.5rem 0.25rem .25rem;--controls--font-color:var(--font-color);--controls--border:1px solid var(--border-color-control);--controls--min-height:1.75rem;--controls--padding:0.125em 0.25em 0.25em;--input--bg-color:#fff;--btn--font-weight:400;--btn--font-size:var(--font-size);--btn--line-height:1.5;--btn--font:normal var(--btn--font-weight) var(--btn--font-size) /var(--btn--line-height) var(--font-family);--btn--font-color:var(--font-color);--btn--bg-color:var(--bg-color-clickable);--btn--paddings:0.2lh 1.5em;--btn--paddings:.2lh .75lh .25lh;--btn--borders-width:1px;--btn--border-style:solid;--btn--border-color:var(--border-color-control);--btn--borders-radius:0.375em;--btn--borders-radius:0.25em;--btn--shadow:var(--shadow-clickable);--moz-input--paddings:0.125em 0.25em 0.25em;--moz-input--select-paddings:0.125em 0.25em 0.25em;--moz-btn-paddings:0.2lh 1.5em;--moz-btn-paddings:.2lh .75lh .25lh;--color-base-white:#fff;--color-base-1:oklch(0.99 0 0);--color-base-2: ;--color-base-5:oklch(0.98 0 0);--color-base-6:oklch(0.96 0.02 285.26);--color-base-7:oklch(0.93 0.02 285.26);--color-base-8:oklch(0.9 0.02 285.26);--color-base-9:oklch(0.87 0.02 285.26);--color-base-10:oklch(0.77 0.02 285.26);--color-base-20:oklch(0.67 0.02 285.26);--color-base-30:oklch(0.57 0.02 285.26);--color-base-40:oklch(0.47 0.02 285.26);--color-base-50:oklch(0.36 0.02 285.26);--color-base-60:oklch(0.31 0.02 285.26);--color-base-70:oklch(0.26 0.02 285.26);--color-base-80:oklch(0.21 0.02 285.26);--color-base-90:oklch(0.16 0.02 285.26);--color-low-5:oklch(0.97 0.06 129.67);--color-low-10:oklch(0.96 0.1 134.3);--color-low-20:oklch(0.94 0.14 134.71);--color-low-30:oklch(0.91 0.13 133.87);--color-low-40:oklch(0.86 0.15 134.24);--color-low-50:oklch(0.58 0.19 135.24);--color-low-60:oklch(0.51 0.19 135.24);--color-low-70:oklch(0.46 0.19 135.24);--color-low-80:oklch(0.39 0.19 135.24);--color-low-90:oklch(0.19 0.19 135.24);--color-normal-5:oklch(0.98 0.08 107.75);--color-normal-10:oklch(0.96 0.1 106.96);--color-normal-20:oklch(0.93 0.11 107.32);--color-normal-30:oklch(0.91 0.14 107.68);--color-normal-40:oklch(0.86 0.15 107.93);--color-normal-50:oklch(0.58 0.15 108.19);--color-normal-60:oklch(0.5 0.15 108.19);--color-normal-70:oklch(0.44 0.15 108.19);--color-normal-80:oklch(0.37 0.15 108.19);--color-normal-90:oklch(0.2 0.15 108.19);--color-important-5:oklch(0.95 0.02 51.36);--color-important-10:oklch(0.95 0.03 51.33);--color-important-20:oklch(0.94 0.04 51.31);--color-important-30:oklch(0.91 0.06 51.27);--color-important-40:oklch(0.86 0.07 51.23);--color-important-50:oklch(0.61 0.13 50.75);--color-important-60:oklch(0.54 0.13 50.75);--color-important-70:oklch(0.49 0.13 50.75);--color-important-80:oklch(0.42 0.13 50.75);--color-important-90:oklch(0.29 0.13 50.75);--color-critical-5:oklch(0.97 0.03 329.25);--color-critical-10:oklch(0.96 0.04 329.32);--color-critical-20:oklch(0.95 0.06 329.46);--color-critical-30:oklch(0.92 0.09 329.69);--color-critical-40:oklch(0.89 0.13 330.04);--color-critical-50:oklch(0.63 0.18 335.23);--color-critical-60:oklch(0.57 0.18 335.16);--color-critical-70:oklch(0.52 0.18 335.16);--color-critical-80:oklch(0.46 0.18 335.16);--color-critical-90:oklch(0.23 0.22 335.7);--color-info-5:oklch(0.99 0.04 177.23);--color-info-10:oklch(0.94 0.04 178.96);--color-info-20:oklch(0.93 0.06 176.76);--color-info-30:oklch(0.9 0.07 176.68);--color-info-40:oklch(0.86 0.1 175.98);--color-info-50:oklch(0.57 0.09 175.98);--color-info-60:oklch(0.51 0.09 175.98);--color-info-70:oklch(0.47 0.09 175.98);--color-info-80:oklch(0.38 0.09 175.98);--color-info-90:oklch(0.17 0.09 175.98);--color-success-5:oklch(0.97 0.06 129.67);--color-success-10:oklch(0.96 0.1 134.3);--color-success-20:oklch(0.94 0.14 134.71);--color-success-30:oklch(0.91 0.13 133.87);--color-success-40:oklch(0.86 0.15 134.24);--color-success-50:oklch(0.58 0.19 135.24);--color-success-60:oklch(0.51 0.19 135.24);--color-success-70:oklch(0.46 0.19 135.24);--color-success-80:oklch(0.39 0.19 135.24);--color-success-90:oklch(0.19 0.19 135.24);--color-caution-5:oklch(0.98 0.08 107.75);--color-caution-10:oklch(0.96 0.1 106.96);--color-caution-20:oklch(0.93 0.11 107.32);--color-caution-30:oklch(0.91 0.14 107.68);--color-caution-40:oklch(0.86 0.15 107.93);--color-caution-50:oklch(0.58 0.15 108.19);--color-caution-60:oklch(0.5 0.15 108.19);--color-caution-70:oklch(0.44 0.15 108.19);--color-caution-80:oklch(0.37 0.15 108.19);--color-caution-90:oklch(0.2 0.15 108.19);--color-warning-5:oklch(0.95 0.02 51.36);--color-warning-10:oklch(0.95 0.03 51.33);--color-warning-20:oklch(0.94 0.04 51.31);--color-warning-30:oklch(0.91 0.06 51.27);--color-warning-40:oklch(0.86 0.07 51.23);--color-warning-50:oklch(0.61 0.13 50.75);--color-warning-60:oklch(0.54 0.13 50.75);--color-warning-70:oklch(0.49 0.13 50.75);--color-warning-80:oklch(0.42 0.13 50.75);--color-warning-90:oklch(0.29 0.13 50.75);--color-error-5:oklch(0.97 0.03 329.25);--color-error-10:oklch(0.96 0.04 329.32);--color-error-20:oklch(0.95 0.06 329.46);--color-error-30:oklch(0.92 0.09 329.69);--color-error-40:oklch(0.89 0.13 330.04);--color-error-50:oklch(0.63 0.18 335.23);--color-error-60:oklch(0.57 0.18 335.16);--color-error-70:oklch(0.52 0.18 335.16);--color-error-80:oklch(0.46 0.18 335.16);--color-error-90:oklch(0.23 0.22 335.7);--color-danger-5:oklch(0.93 0.04 9.18);--color-danger-10:oklch(0.91 0.06 10.23);--color-danger-20:oklch(0.99 0.23 17.23);--color-danger-30:oklch(0.91 0.23 17.23);--color-danger-40:oklch(0.83 0.23 17.23);--color-danger-50:oklch(0.7 0.23 17.23);--color-danger-60:oklch(0.64 0.23 17.23);--color-danger-70:oklch(0.61 0.23 17.23);--color-danger-80:oklch(0.54 0.21 16.44);--color-danger-90:oklch(0.22 0.23 17.23);--bg-color-off:oklch(0.9 0.02 285.26);--bg-color-active:oklch(0.97 0.01 285.51);--border-color-light:oklch(0.9 0.02 285.18);--shadow-float-alt-1:drop-shadow(0 2px 2px var(--transparent-color));--shadow-border:drop-shadow(0 1px 1px var(--transparent-color));--as-btn--paddings:.21lh 1em .26lh;--as-btn--paddings:.2lh .75lh .25lh;--indicator-dimension:1em;--space-distance-1:1rem;--space-distance-2:1.25rem;--space-distance-3:1.5rem;--space-distance-4:1.75rem;--space-distance-5:2rem;--space-group-1:.125rem;--space-group-2:.25rem;--space-group-3:.5rem;--space-group-4:.75rem;--space-group-5:1rem;--z-index-layover:900;--z-index-dropdown:1000;--z-index-sticky:1020;--z-index-fixed:1030;--z-index-offcanvas-backdrop:1040;--z-index-offcanvas:1045;--z-index-modal-backdrop:1050;--z-index-modal:1055;--z-index-popover:1070;--z-index-tooltip:1080;--avatar-size:1;--badge-size:1;--btn-size:1;--toggle-size:1;--popover-space:1;--visual-aside-size:1;--visual-indicator-size:1}@layer base{*,:after,:before{box-sizing:border-box;margin:0;padding:0}:focus-visible{outline:var(--focus-outline)}:where([type=radio],[type=range]):focus-visible{outline:none}html{font:var(--font);-webkit-text-size-adjust:100%;&:has(dialog[open],dialog[popover]:popover-open){overflow:hidden}}body{accent-color:var(--accent-color);background:var(--bg-color);color:var(--font-color);letter-spacing:var(--letter-spacing);line-height:var(--line-height)}main{display:block}h1,h2,h3,h4,h5,h6{color:var(--h--color);font:var(--h--font-weight) 4rem /var(--h--line-height) var(--h--font-family);letter-spacing:var(--h--letter-spacing);margin:2.5rem 0 1.25rem}h1{font-size:clamp(2.799rem,calc(2.799rem + .125vw),3.799rem)}h2{font-size:clamp(2.332rem,calc(2.332rem + .125vw),3.332rem)}h3{font-size:clamp(1.944rem,calc(1.944rem + .125vw),2.944rem)}h4{font-size:clamp(1.62rem,calc(1.62rem + .125vw),2.62rem)}h5{font-size:clamp(1.35rem,calc(1.35rem + .125vw),2.35rem)}h6{font-size:clamp(1.125rem,calc(1.125rem + .125vw),2.125rem)}blockquote{--data-quoter-marker:attr(data-quoter-marker,"\2014 \00A0");border-color:var(--blockquote--border-color);border-style:var(--blockquote--border-style);border-width:var(--blockquote--border-width);margin:0 0 0 1rem;padding:1rem;:where(&) footer{color:var(--blockquote_--footer--color);margin:var(--blockquote_--footer--margin)}:where(&) footer:before{content:var(--data-quoter-marker)}}ol,ul{padding:0 0 0 1.25em}fieldset{border:var(--boundary--border);padding:.5rem;:where(&)>label{margin:0 1rem 0 0}}legend{color:inherit;display:table;padding:0;white-space:normal}details{display:block}summary{cursor:pointer;display:list-item}dt{font-weight:700}pre{background:var(--pre--background);border:var(--pre--border);color:var(--pre--color);overflow:auto;padding:1rem}hr{border:var(--boundary--border);border-width:0 0 1px;box-sizing:content-box;color:inherit;margin:.5rem 0;overflow:visible}a{display:inline-block;&:focus,&:hover{filter:brightness(105%)}&:visited{color:var(--href--visited-color)}}[href]{color:var(--href--color)}abbr[title]{border-bottom:none;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}audio,video{display:inline-block}audio:not([controls]){display:none}b,strong{font-weight:700}code,kbd,samp{font:normal var(--cks--font-weight) var(--cks--font-size) var(--cks--font-family);font-optical-sizing:auto}code{background:var(--code--background);color:var(--code--color)}kbd{background:var(--kbd--background);border-radius:var(--kbd--border-radius);color:var(--kbd--color);&:has(kbd){background-color:unset;border:var(--kbd_-kbd--border);border-width:var(--kbd_-kbd--border-width);padding:var(--kbd_-kbd--padding)}kbd{background-color:unset;color:var(--kbd_-kbd--color);font-weight:var(--kbd_-kbd--font-weight)}}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border:none;display:inline-block;max-height:90vh;max-width:90vw}figure{:where(&) img{line-height:1;margin:auto auto .5rem}}figcaption{font-size:.875em}button,input,optgroup,option,select,textarea{color:var(--controls--font-color);font:var(--font-weight) var(--font-size)/var(--line-height) var(--font-family)}button,input,optgroup,select,textarea{border:var(--controls--border);margin:0;min-height:var(--controls--min-height);padding:var(--controls--padding)}button,input,select{text-transform:none}.btn,[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;-moz-appearance:button;appearance:button;background-color:var(--btn--bg-color,revert);border:0 var(--btn--border-style) var(--btn--border-color,initial);border-radius:var(--btn--borders-radius);border-width:var(--btn--borders-width,1px);box-shadow:var(--btn--shadow,);color:var(--btn--font-color,);cursor:pointer;font:var(--btn--font);line-height:var(--btn--line-height);min-height:var(--controls--min-height);overflow:visible;padding:var(--btn--paddings);position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;:where(&:active):not(:disabled){box-shadow:none;transform:translateY(1px)}&:disabled{color:revert}&:focus-visible{box-shadow:none}}input{overflow:visible}[type=color]{background:inherit;cursor:pointer;min-height:2rem;padding:.25em}[type=checkbox],[type=radio]{min-height:auto;padding:0}[type=date],[type=datetime-local],[type=month],[type=time],[type=week]{padding:.125em .25em}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;appearance:textfield}[type=search]::-webkit-search-decoration{-webkit-appearance:none}[type=file]{padding:0 .125em 0 0}::file-selector-button{-webkit-appearance:button;font:inherit;margin:-1px .125em -1px -1px;padding:.125em .25em}progress{display:inline-block;vertical-align:baseline}select{min-width:1.7em}select optgroup{border:none}optgroup{color:var(--font-color-alt-1);padding:.125em}option{margin:0 0 0 .5em;padding:.25em .25em .125em}textarea{overflow:auto;vertical-align:top}svg:not(:root){overflow:hidden}table{border-color:inherit;text-indent:0}th{color:var(--font-color-alt-1)}td{padding:.5em}[popover],dialog{background:var(--bg-color);border:none;box-shadow:var(--shadow-float);color:inherit;display:none;inset:50% auto auto 50%;opacity:0;overflow:visible;padding:1rem;pointer-events:none;position:fixed;text-align:initial;transform:translate(-50%,-50%) scale(.85);transition:opacity .35s ease-in-out,transform .35s ease-in-out,overlay allow-discrete .35s,display allow-discrete .35s;z-index:1000}dialog{height:var(--dialog--height,auto);max-height:calc(100vh - 4rem);max-width:clamp(280px,100vw - 4rem,1160px);min-height:5rem;min-width:clamp(280px,100vw - 4rem,400px);width:var(--dialog--width,auto)}[popover]{height:var(--popover--height,auto);max-height:calc(100vh - 2rem);max-width:clamp(4rem,100vw - 2rem,1200px);width:var(--popover--width,auto)}[popover]:popover-open,dialog[open]{display:block;opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);@starting-style{opacity:0;transform:translate(-50%,-50%) scale(.85)}}[popover]::backdrop,dialog::backdrop{backdrop-filter:blur(.5rem);background:var(--backdrop--bg-color)}template{display:none}[type=color],input,select,textarea{background:var(--input--bg-color)}[type=checkbox],[type=file],[type=radio],[type=range]{cursor:pointer}[type=range]:focus-visible::-webkit-slider-thumb{border-radius:50%;height:.8em;outline:var(--focus-outline);width:.8em}[type=radio]:focus-visible{box-shadow:var(--focus--box-shadow)}[disabled]{cursor:not-allowed;filter:contrast(.5)}[hidden]{display:none}:where(dl,ol,ul,fieldset,p,details,pre,form,address,blockquote,figure,table):has(+:is(dl,ol,ul,fieldset,p,details,pre,form,address,blockquote,figure,table,nav)){margin-bottom:var(--elements-block-level-space)}.btn,[type=button],[type=reset],[type=submit],audio,button,details,input,select,textarea,video{margin:.25rem}@-moz-document url-prefix(){.btn,[type=button],[type=reset],[type=submit],button{padding:var(--moz-btn-paddings)}[type=date],[type=datetime-local],[type=datetime],[type=email],[type=month],[type=number],[type=password],[type=search],[type=tel],[type=text],[type=time],[type=url],[type=week],textarea{padding:var(--moz-input--paddings)}select{min-width:1.5em;padding:var(--moz-input--select-paddings);&:focus{outline:var(--focus-outline)}}input[type=range]{background:transparent;border:none;&:active{filter:brightness(120%)}&::-moz-range-thumb{background:var(--accent-color);border:none;height:1rem;width:1rem}&:focus-visible::-moz-range-thumb{outline:var(--focus-outline)}&::-moz-range-track{background:var(--accent-color);border-radius:.25rem;cursor:pointer;height:.5rem}}}}@layer base{}@layer ui{.avatar{background:var(--color-base-6);border-radius:.125em;display:inline-block;font:300 calc(var(--avatar--font-size, .75rem)*var(--avatar-size)) var(--font-family);height:var(--avatar--height,2em);position:relative;text-align:center;width:var(--avatar--width,2em)}[data-avatar-name]:before{content:attr(data-avatar-name);font-size:.5em;inset:50% auto auto 50%;overflow:hidden;position:absolute;translate:-50% -50%;width:80%}.avatar__img{height:100%;inset:0 auto auto 0;width:100%}.avatar__figure:not(img),.avatar__img{border-radius:inherit;position:absolute;z-index:1}.avatar__figure:not(img){display:block;inset:50% auto auto 50%;translate:-50% -50%}.avatar__indicator{background:var(--bg-color-off);border-radius:50%;box-shadow:0 0 0 1px var(--color-base-5);height:var(--avatar__indicator--height,.65em);inset:0 -.25em auto auto;position:absolute;text-align:center;width:var(--avatar__indicator--width,.65em);z-index:1}.avatar--circle{border-radius:50%;.avatar__indicator{inset:0 0 auto auto;translate:0}}.badge{align-items:baseline;background:var(--badge--bg-color,var(--color-base-6));border:0 var(--badge--border-style,solid) var(--badge--border-color,var(--border-color-boundary));border-radius:var(--badge--borders-radius,1rem);border-width:var(--badge--borders-width,1px);color:var(--badge--color,var(--color-base-50));display:inline-block;display:inline-flex;font:normal normal calc(var(--badge--font-size, .9rem)*var(--badge-size)) /1 var(--font-family);margin:0;min-height:var(--badge--min-height,.75rem);min-width:var(--badge--min-width,.75rem);padding:.125rem .5rem .25rem;user-select:none;white-space:nowrap;a&{text-decoration:none}}.badge--accent{background:var(--accent-color);border-color:var(--accent-color);color:#fff}.badge--low{background:var(--color-low-10);border-color:var(--color-low-20)}.badge--normal{background:var(--color-normal-10);border-color:var(--color-normal-20)}.badge--important{background:var(--color-important-10);border-color:var(--color-important-20)}.badge--critical{background:var(--color-critical-10);border-color:var(--color-critical-20)}.badge--success{background:var(--color-success-10);border-color:var(--color-success-20)}.badge--info{background:var(--color-info-10);border-color:var(--color-info-20)}.badge--caution{background:var(--color-caution-10);border-color:var(--color-caution-20)}.badge--warning{background:var(--color-warning-10);border-color:var(--color-warning-20)}.badge--error{background:var(--color-error-10);border-color:var(--color-error-20)}.badge--danger{background:var(--color-danger-10);border-color:var(--color-danger-20);color:var(--color-danger-70)}.badge--chip{background:var(--bg-color);border:1px solid;border-radius:.25rem;transition:color .2s ease-out,background .2s ease-out,border .2s ease-out;:where(&) .btn--icon{color:inherit}&:where(.badge--accent){color:var(--accent-color)}&:where(.badge--low){color:var(--color-low-50)}&:where(.badge--normal){color:var(--color-normal-50)}&:where(.badge--important){color:var(--color-important-50)}&:where(.badge--critical){color:var(--color-critical-50)}&:where(.badge--success){color:var(--color-success-50)}&:where(.badge--info){color:var(--color-info-50)}&:where(.badge--caution){color:var(--color-caution-50)}&:where(.badge--warning){color:var(--color-warning-50)}&:where(.badge--error){color:var(--color-error-50)}&:where(.badge--danger){color:var(--color-danger-50)}}.btn{--btn--font-size:calc(var(--btn--font-size, 1rem)*var(--btn-size));transition:color .5s ease-out,background .5s ease-out,border .5s ease-out}.btn:not(:where(button,[type=button],[type=reset],[type=submit])){padding:var(--as-btn--paddings,.21lh 1em .26lh)}.btn--icon{background:none;border:none;border-radius:50%;box-shadow:none;line-height:1;margin:0;min-height:auto;padding:0;&:focus,&:hover{scale:1.1}&:hover{box-shadow:none}.badge &{translate:0 .125em}}.btn--accent,.btn--caution,.btn--critical,.btn--danger,.btn--error,.btn--important,.btn--info,.btn--low,.btn--normal,.btn--success,.btn--warning{&:not(:disabled):focus,&:not(:disabled):hover{filter:brightness(105%)}&:not(:disabled):active{filter:brightness(110%)}}.btn--accent{background:var(--accent-color);border-color:var(--accent-color);color:#fff}.btn--low{background:var(--color-low-30);border-color:var(--color-low-40)}.btn--normal{background:var(--color-normal-30);border-color:var(--color-normal-40)}.btn--important{background:var(--color-important-30);border-color:var(--color-important-40)}.btn--critical{background:var(--color-critical-30);border-color:var(--color-critical-40)}.btn--success{background:var(--color-success-30);border-color:var(--color-success-40)}.btn--info{background:var(--color-info-30);border-color:var(--color-info-40)}.btn--caution{background:var(--color-caution-30);border-color:var(--color-caution-40)}.btn--warning{background:var(--color-warning-30);border-color:var(--color-warning-40)}.btn--error{background:var(--color-error-30);border-color:var(--color-error-40)}.btn--danger{background:var(--color-danger-30);border-color:var(--color-danger-40)}.btn--ghost{background:oklch(from var(--accent-color) l c h/.05);border:0;box-shadow:none;text-decoration:underline 2px dotted var(--color-base-9);&:focus{text-decoration-style:solid}&:active{background:oklch(from var(--accent-color) l c h/.25)}}.btn--bordered{background:revert-layer;border-color:currentColor;:where(&).btn--accent{color:var(--accent-color)}:where(&).btn--low{color:var(--color-low-50)}:where(&).btn--normal{color:var(--color-normal-50)}:where(&).btn--important{color:var(--color-important-50)}:where(&).btn--critical{color:var(--color-critical-50)}:where(&).btn--success{color:var(--color-success-50)}:where(&).btn--info{color:var(--color-info-50)}:where(&).btn--caution{color:var(--color-caution-50)}:where(&).btn--warning{color:var(--color-warning-50)}:where(&).btn--error{color:var(--color-error-50)}:where(&).btn--danger{color:var(--color-danger-50)}}[be-removeable]{align-items:flex-end;display:inline-flex;opacity:1;transition:opacity .35s linear,display allow-discrete .35s,scale .2s linear;user-select:none;:where(&)>.btn{margin:auto auto auto .75em}&:has([data-state-handler]:not(:checked)){display:none;opacity:0;scale:85%}&:has([data-state-handler]:focus-visible){outline:var(--focus-outline)}}[be-switchable]{border-color:var(--border-color-control);color:var(--font-color-alt-2);cursor:pointer;user-select:none;:where(&)>.visual-indicator{margin:0 .5em 0 0;overflow:clip;transition:opacity .35s ease-out,width .2s ease-out,margin .2s ease-out}&:has([data-state-handler]:focus-visible){outline:var(--focus-outline)}}:has(>[data-state-handler]:checked),[selected]{[be-switchable]:not(&){.active-visible{margin:0;opacity:0;width:0}}[be-switchable]:is(&){background:var(--accent-color);border-color:var(--accent-color);color:#fff;.active-invisible{margin:0;opacity:0;width:0}}}.toggle{align-items:baseline;display:inline-flex;&:has(:is([data-toggle-handler-on],[data-toggle-handler-off-on]):not(:checked)) .active-visible,&:has([data-toggle-handler-off]:not(:checked)) .active-invisible{display:none}}.toggle__control{--the-size:var(--toggle-size,1);align-self:center;border:none;display:flex;height:calc(.75em*var(--the-size));margin:0 .5em;padding:0;position:relative;width:calc(1.5em*var(--the-size));&>label{cursor:pointer;display:block;height:inherit;position:absolute;width:inherit;z-index:1;&:has(:is([data-toggle-handler-off],[data-toggle-handler-on]):checked){height:0;opacity:0;width:0;z-index:-1}}&:has([data-toggle-handler-off]:focus-visible,[data-toggle-handler-on]:focus-visible,[data-toggle-handler-off-on]:focus-visible):after{outline:var(--focus-outline)}&:has(:is([data-toggle-handler-on],[data-toggle-handler-off-on]):checked):after{inset:0 0 auto auto}&:has(:is([data-toggle-handler-off],[data-toggle-handler-on],[data-toggle-handler-off-on]):disabled)>label{cursor:not-allowed}&:after,&:before{content:"";display:block;position:absolute}&:before{background:var(--bg-color-off);border:var(--controls--border);border-radius:calc(1em*var(--the-size));height:calc(.5em*var(--the-size));transform:translateY(25%);transition:background .2s ease-in-out;width:100%}&:after{background:var(--bg-color-clickable);border:var(--controls--border);border-radius:50%;box-shadow:none;height:calc(.75em*var(--the-size));inset:0 calc(100% - .75em*var(--the-size)) auto auto;position:absolute;transition:inset .2s ease-in-out;width:calc(.75em*var(--the-size))}}.toggle:is(.toggle--mutual) .toggle__control,.toggle__control:has(:is([data-toggle-handler-on],[data-toggle-handler-off-on]):checked){&:before{background:var(--color-base-5)}&:after{background:var(--accent-color)}}.toggle--vertical{display:inline-flex;flex-flow:column-reverse;>.toggle__control{margin:.5em 0;transform:rotate(270deg)}}.divider{align-self:stretch;border-color:var(--border-color-boundary);height:auto;inset:0;margin:.75rem .5rem;position:relative}[be-divider-caption]:after{background:var(--bg-color);color:var(--font-color-alt-2);content:attr(be-divider-caption,"or");font-size:.8rem;inset:auto auto auto 50%;padding:.125rem .5rem;position:absolute;translate:-50% -50%}.divider--vertical{border-width:0 1px 0 0;margin:.5rem 1rem;:where(&)[be-divider-caption]:after{inset:50% auto auto}}.img--fluid,.img--thumbnail{display:block;height:auto;max-width:100%;max-width:-webkit-fill-available;width:100%}.img--thumbnail{background:var(--bg-color);border:var(--boundary--border);border-radius:.375rem;padding:.25em}.img--fit-cover{object-fit:cover}.img--fit-contain{object-fit:contain}.video--fluid{display:block;height:auto;max-width:100%;overflow:hidden;padding:0;position:relative;width:100%}.video--fluid:before{content:none}.video--scale-4-3:before{padding-bottom:75%}.video--scale-1-1:before{padding-bottom:100%}.navbar{align-items:center;display:flex;flex-flow:row wrap;& a{text-decoration:none}>.nav>.nav__item>.nav{filter:var(--shadow-float-alt-1)}.active-invisible,.active-visible,.navbar__toggle{border-radius:50%;display:none;z-index:1}&:has([data-toggle-navbar-handler]:checked){.active-invisible{display:none}.active-visible{display:block}}}.navbar__brand{display:inline-block}.navbar__toggle{box-shadow:none;cursor:pointer;padding:.5rem;&:is(:focus,:focus-within){outline:var(--focus-outline)}}.nav{background:var(--bg-color);display:inline-flex;flex-flow:row wrap;list-style:none;margin:0;padding:0;width:max-content;.nav{background:var(--bg-color);display:none;flex-flow:column nowrap;inset:100% auto auto 0;margin:0;padding:0;position:absolute;transform:translateY(-.25rem);transition:display allow-discrete .2s,transform .2s ease-in-out;z-index:var(--z-index-popover);.nav{inset:0 auto auto 100%}}}.nav__item-line:before{border:var(--boundary--border);border-width:0 0 1px;content:"";display:block;height:0;padding:0}.nav__item{flex:0 0 auto;padding:.5rem 1rem;position:relative;&:has(.nav)>a:after{border-bottom:.25em solid;border-left:.25em solid transparent;border-right:.25em solid transparent;content:"";display:inline-block;inset:auto auto .25em auto;margin:auto auto auto 1em;position:relative;transition:transform .35s ease-in-out}&:hover{background-color:var(--bg-color-active);&>a:after{transform:scaleY(-1);transform-origin:center}}>*>.visual-indicator,>.visual-indicator{margin:0 0 0 1em;padding:0;transform:rotate(90deg) scaleX(-1);transition:transform .35s ease-in-out}&:is(:hover,:focus,:focus-within){>*>.visual-indicator,>.visual-indicator{transform:rotate(90deg) scaleX(1)}>.nav{display:inline-flex;transform:translateY(0);@starting-style{transform:translateY(-.25rem)}}}}.navbar--no-indicator .nav__item>a:after{display:none}.navbar--vertical{align-items:normal;flex-flow:column;.navbar__brand{padding:.5rem 1rem}.nav{flex-flow:column;inset:0 auto auto 100%}}.navbar--compact{justify-content:space-between;.active-invisible,.navbar__toggle{display:block}>.nav{display:none;overflow:hidden;transition:display allow-discrete .2s,margin-top .2s ease-in-out;>.nav__item>.nav{filter:none}>.nav__item:first-child{margin-top:-110%;transition:margin-top .35s ease-in-out}}.nav{background:transparent;position:static;width:100%;.nav{display:none;margin:.5rem -1rem -.5rem;padding:0 0 0 1rem;transition:none;width:calc(100% + 2rem)}}.nav__item{.nav__item:first-child{margin:0}.nav__item:last-child{padding:.5rem 1rem}&:hover{filter:brightness(98%)}}&:not(.navbar--no-hover) .nav__item:hover,.nav__item:is(:focus,:focus-within){>.nav{display:block}}&:has([data-toggle-navbar-handler]:checked),:where(&).navbar--compact-expand{>.nav{display:block;>.nav__item:first-child{margin-top:0;@starting-style{margin-top:-110%}}}}}.navbar--breadcrumb{--breadcrumb-divider:attr(be-breadcrumb-divider,"/");.navbar__brand:after,>.nav>.nav__item:not(:last-child):after{color:var(--font-color-alt-2);content:var(--breadcrumb-divider);margin:0 .5em}>.nav>.nav__item{padding:0;&:hover{background:inherit}}}.steps{display:grid;gap:1rem;grid:max-content min-content/auto-flow 200px;list-style:none}.step{display:grid;grid:subgrid [row-1-start] [row-1-end row-2-start] [row-2end]/subgrid [col];grid-area:span 2/auto;text-align:center}.step__header{display:flex;margin:.5rem}.step__trail{align-items:center;display:flex;justify-content:center;position:relative;width:100%;&:after,&:before{background:var(--bg-color-off);content:"";position:absolute;z-index:-1}:where(.step:not(:last-child)) &:after{height:1px;transform:translate(50%);width:calc(100% + 2rem)}}.step__indicator{background:var(--bg-color-off);border:0 var(--step__indicator--border-style) var(--step__indicator--border-color,var(--bg-color));border-radius:50%;border-width:var(--step__indicator--borders-width,0);display:inline-flex;min-height:.5rem;min-width:.5rem;&:has(.visual-aside,.visual-indicator){padding:.25rem}.visual-aside,.visual-indicator{translate:0}}.step__body{color:var(--step__body--color,var(--font-color-alt-2));padding:.5rem}.steps--vertical{grid:auto-flow min-content/min-content minmax(auto,1fr);.step{grid-area:auto/span 2;text-align:left}.step__header{justify-content:center}.step__trail{align-items:baseline;justify-content:center;margin-top:.25lh;.step:not(:last-child) &:after{height:calc(100% + 2.5rem);transform:none;width:1px}}}.step--active{.step:has(~&){.step__trail{&:after,&:before{background:var(--accent-color)}}.step__indicator{background:var(--accent-color);min-height:.75rem;min-width:.75rem}.step__body{color:revert-layer}}.step__trail:before{background:var(--accent-color)}.step__indicator{background:var(--bg-color);border:0 var(--step--active__-step__indicator--border-style,solid) var(--accent-color);border-width:var(--step--active__-step__indicator--border-width,.125rem);min-height:.75rem;min-width:.75rem}.step__body{color:revert-layer}}.steps--done{.step__trail{&:after,&:before{background:var(--accent-color)}}.step__indicator:not(:has(.visual-aside,.visual-indicator)){background:var(--accent-color);min-height:.75rem;min-width:.75rem}.step__body{color:revert-layer}}.tabs{display:flex;filter:var(--shadow-border);flex-flow:column nowrap;margin:auto auto 1rem}.tabs__nav{border:0 var(--tabs__nav--border-style,solid) var(--tabs__nav--border-color,var(--border-color-boundary));border-width:0;display:flex}.tab__nav{background:var(--bg-color-clickable);border:var(--boundary--border);border-radius:.125rem .125rem 0 0;border-width:1px 1px 0;box-shadow:none;cursor:pointer;padding:.25rem .75rem;position:relative;&:is(&:focus,&:focus-within){box-shadow:none;outline:none;scale:none;text-decoration:underline 2px dashed var(--color-base-9)}}.tab__nav:has([data-tab-select-handler]:checked),.tab__nav[data-tab-active]{background:var(--bg-color);z-index:100}.tabs__content{background:var(--bg-color);border:var(--boundary--border);border-width:1px;margin:-1px 0 0;padding:1rem;position:relative;z-index:99}.tab__content{border:0 solid var(--border-color-boundary);display:none}.tab__content[data-tab-active],.tabs:has(.tab__nav:first-child [data-tab-select-handler]:checked) .tab__content:first-child,.tabs:has(.tab__nav:nth-child(10) [data-tab-select-handler]:checked) .tab__content:nth-child(10),.tabs:has(.tab__nav:nth-child(11) [data-tab-select-handler]:checked) .tab__content:nth-child(11),.tabs:has(.tab__nav:nth-child(12) [data-tab-select-handler]:checked) .tab__content:nth-child(12),.tabs:has(.tab__nav:nth-child(13) [data-tab-select-handler]:checked) .tab__content:nth-child(13),.tabs:has(.tab__nav:nth-child(14) [data-tab-select-handler]:checked) .tab__content:nth-child(14),.tabs:has(.tab__nav:nth-child(15) [data-tab-select-handler]:checked) .tab__content:nth-child(15),.tabs:has(.tab__nav:nth-child(2) [data-tab-select-handler]:checked) .tab__content:nth-child(2),.tabs:has(.tab__nav:nth-child(3) [data-tab-select-handler]:checked) .tab__content:nth-child(3),.tabs:has(.tab__nav:nth-child(4) [data-tab-select-handler]:checked) .tab__content:nth-child(4),.tabs:has(.tab__nav:nth-child(5) [data-tab-select-handler]:checked) .tab__content:nth-child(5),.tabs:has(.tab__nav:nth-child(6) [data-tab-select-handler]:checked) .tab__content:nth-child(6),.tabs:has(.tab__nav:nth-child(7) [data-tab-select-handler]:checked) .tab__content:nth-child(7),.tabs:has(.tab__nav:nth-child(8) [data-tab-select-handler]:checked) .tab__content:nth-child(8),.tabs:has(.tab__nav:nth-child(9) [data-tab-select-handler]:checked) .tab__content:nth-child(9){display:block}.tabs--right{flex-flow:row-reverse nowrap;.tabs__nav{flex:0 0 auto;flex-flow:column}.tab__nav{border-radius:0 .125rem .125rem 0;border-width:1px 1px 0 0;&:last-child{border-width:1px 1px 1px 0}}.tabs__content{flex:1 0 auto;margin:0 -1px 0 0}}.tabs--bottom{flex-flow:column-reverse nowrap;.tabs__nav{flex:0 0 auto;flex-flow:row}.tab__nav{border-radius:0 0 .125rem .125rem;border-width:0 0 1px 1px;&:last-child{border-width:0 1px 1px}}.tabs__content{flex:1 0 auto;margin:0 0 -1px}}.tabs--left{flex-flow:row nowrap;.tabs__nav{flex:0 0 auto;flex-flow:column}.tab__nav{border-radius:.125rem 0 0 .125rem;border-width:1px 0 0 1px;&:last-child{border-width:1px 0 1px 1px}}.tabs__content{flex:1 0 auto;margin:0 0 0 -1px}}[be-tooltip]{&:before{border-bottom:.4rem solid var(--bg-color-text);border-left:.4rem solid transparent;border-right:.4rem solid transparent;content:"";inset:0 auto auto 50%;opacity:0;position:absolute;transform:scaleY(-1) translateX(-50%);transition:opacity .2s ease-in-out,inset .2s ease-in-out;z-index:1}&:hover:before,&:is(.tooltip--active):before,&:is(.tooltip--focus):focus:before{inset:-.5rem auto auto 50%;opacity:1}&:after{background:var(--bg-color-text);border-radius:.125rem;color:revert-layer;content:attr(be-tooltip);display:block;font-size:.7rem;inset:auto auto 100% 50%;max-width:clamp(200px,100vw - 1.5rem,50rem);opacity:0;overflow:hidden;padding:.25rem .5rem;pointer-events:none;position:absolute;text-overflow:ellipsis;transform:translateX(-50%);transition:opacity .2s ease-in-out,inset .2s ease-in-out;white-space:pre;z-index:var(--z-index-tooltip)}&:hover:after,&:is(.tooltip--active):after,&:is(.tooltip--focus):focus:after{inset:auto auto calc(100% + .5rem) 50%;opacity:1}&:disabled{pointer-events:auto}}.tooltip--right{&:before{inset:50% auto auto calc(100% - .5rem);transform:rotate(-90deg);translate:0 -50%}&:hover:before,&:is(.tooltip--active):before,&:is(.tooltip--focus):focus:before{inset:50% auto auto 100%}&:after{inset:50% auto auto 100%;transform:translateY(-50%)}&:hover:after,&:is(.tooltip--active):after,&:is(.tooltip--focus):focus:after{inset:50% auto auto calc(100% + .55rem)}}.tooltip--bottom{&:before{inset:auto auto 0 50%;transform:rotate(0deg) translateX(-50%)}&:hover:before,&:is(.tooltip--active):before,&:is(.tooltip--focus):focus:before{inset:auto auto -.5rem 50%}&:after{inset:100% auto auto 50%;transform:translateX(-50%)}&:hover:after,&:is(.tooltip--active):after,&:is(.tooltip--focus):focus:after{inset:calc(100% + .5rem) auto auto 50%}}.tooltip--left{&:before{inset:50% calc(100% - .5rem) auto auto;transform:rotate(90deg);translate:0 -50%}&:hover:before,&:is(.tooltip--active):before,&:is(.tooltip--focus):focus:before{inset:50% 100% auto auto}&:after{inset:50% 100% auto auto;transform:translateY(-50%)}&:hover:after,&:is(.tooltip--active):after,&:is(.tooltip--focus):focus:after{inset:50% calc(100% + .55rem) auto auto}}.tooltip--no-pointer{&:before{display:none}&:hover:after{translate:0 .25rem}&:is(.tooltip--right):hover:after{translate:-.25rem}&:is(.tooltip--bottom):hover:after{translate:0 -.25rem}&:is(.tooltip--left):hover:after{translate:.25rem}}.dialog{background:var(--dialog--bg-color,var(--bg-color));border:0 var(--dialog--border-style,solid) var(--dialog--border-color,var(--border-color-light));border-radius:.125rem;border-width:var(--dialog--borders-width,1px);color:var(--dialog--font-color,revert-layer);display:grid;gap:.5rem 0;grid:"top-start top-middle top-end" auto "middle-start center middle-end" 1fr "bottom-start bottom-middle bottom-end" min-content/min-content;z-index:var(--z-index-modal);&:not([open],[popover]:popover-open){display:none}}.dialog__header{align-items:center;display:flex;gap:var(--dialog__header--gap,.5rem);grid-area:auto/top-middle/auto/top-end;justify-content:space-between;&>:where(h1,h2,h3,h4,h5,h6){margin:0}}.dialog__aside{align-content:flex-start;grid-area:top-start/auto/bottom-start/auto;padding:.25rem;text-align:center}.dialog__content{grid-area:auto/center/auto/bottom-end;overflow:auto}.dialog__footer{grid-area:auto/bottom-middle/auto/bottom-end}.dialog--md{height:clamp(13rem,100vh - 2rem,458px);width:clamp(280px,100vw - 4rem,590px)}.dialog--lg{height:clamp(13rem,100vh - 4rem,796px);width:clamp(280px,100vw - 4rem,1024px)}.notice{background:var(--notice--bg-color,var(--bg-color));border:0 var(--notice--border-style,solid) var(--notice--border-color,var(--border-color-boundary));border-radius:var(--notice--borders-radius,.125rem);border-width:var(--notice--borders-width,1px);box-shadow:var(--notice--box-shadow, );color:var(--notice--font-color,revert-layer);display:flex;flex-flow:var(--notice--flex-flow,row wrap);gap:.5rem;margin:auto auto 1rem;padding:1rem;position:relative;text-align:initial}.notice__header{display:block;flex:1 1 100%;font-size:1.25rem}.notice__content{align-content:space-evenly;flex:1 1 0;overflow-y:auto}.notice--accent{background-color:var(--accent-color);border-color:var(--accent-color);color:#fff;.notice__aside{color:var(--accent-color)}}.notice--low{background-color:var(--color-low-10);border-color:var(--color-low-20);.notice__aside{color:var(--color-low-80)}}.notice--normal{background-color:var(--color-normal-10);border-color:var(--color-normal-20);.notice__aside{color:var(--color-normal-80)}}.notice--important{background-color:var(--color-important-10);border-color:var(--color-important-20);.notice__aside{color:var(--color-important-80)}}.notice--critical{background-color:var(--color-critical-10);border-color:var(--color-critical-20);.notice__aside{color:var(--color-critical-80)}}.notice--success{background-color:var(--color-success-10);border-color:var(--color-success-20);.notice__aside{color:var(--color-success-80)}}.notice--info{background-color:var(--color-info-10);border-color:var(--color-info-20);.notice__aside{color:var(--color-info-80)}}.notice--caution{background-color:var(--color-caution-10);border-color:var(--color-caution-20);.notice__aside{color:var(--color-caution-80)}}.notice--warning{background-color:var(--color-warning-10);border-color:var(--color-warning-20);.notice__aside{color:var(--color-warning-80)}}.notice--error{background-color:var(--color-error-10);border-color:var(--color-error-20);.notice__aside{color:var(--color-error-80)}}.notice--danger{background-color:var(--color-danger-10);border-color:var(--color-danger-20);.notice__aside{color:var(--color-danger-80)}}.notice--notify{background:var(--color-base-5);border:0 var(--notice--notify--border-style,solid) var(--notice--border-color,var(--border-color-boundary));border-radius:var(--notice--notify--borders-radius,.125rem);border-width:var(--notice--notify--borders-width,0);box-shadow:var(--shadow-float);display:none;flex-flow:row nowrap;height:auto;inset:auto auto 0 50%;max-height:40vh;max-width:clamp(250px,100vw - 3rem,992px);min-width:250px;opacity:0;padding:0 .5rem;position:fixed;transform:translate(-50%) scale(.85);transition:opacity .35s ease-in-out,transform .35s ease-in-out,overlay allow-discrete .35s,display allow-discrete .35s;width:max-content;z-index:var(--z-index-popover);&[data-notify-open]{display:flex;opacity:1;transform:translate(-50%) scale(1);@starting-style{opacity:0;transform:translate(-50%) scale(.85)}}.notice__aside{align-content:center}.notice__content,.notice__footer{margin:.5rem 0}&.notice--accent{background:var(--accent-color)}&.notice--low{background:var(--color-low-5);border-color:var(--color-low-10)}&.notice--normal{background:var(--color-normal-5);border-color:var(--color-normal-10)}&.notice--important{background:var(--color-important-5);border-color:var(--color-important-10)}&.notice--critical{background:var(--color-critical-5);border-color:var(--color-critical-10)}&.notice--success{background:var(--color-success-5);border-color:var(--color-success-10)}&.notice--info{background:var(--color-info-5);border-color:var(--color-info-10)}&.notice--caution{background:var(--color-caution-5);border-color:var(--color-caution-10)}&.notice--warning{background:var(--color-warning-5);border-color:var(--color-warning-10)}&.notice--error{background:var(--color-error-5);border-color:var(--color-error-10)}&.notice--danger{background:var(--color-danger-5);border-color:var(--color-danger-10)}}.popper-container{display:inline-flex;position:relative}.popper{--the-space:var(--popper-space,1);background:var(--bg-color);border:0 var(--popper--border-style,solid) var(--popper--border-color,var(--border-color-light));border-radius:var(--popper--borders-radius,.125rem);border-width:var(--popper--borders-width,1px);filter:var(--shadow-float-alt-1);inset:auto auto calc(100% + .25rem*var(--the-space)) 50%;max-height:75vh;max-width:clamp(200px,100vw - 5rem,816px);min-width:5rem;padding:1rem;position:absolute;translate:-50%;width:max-content;z-index:var(--z-index-popover);&:before{content:"";height:calc(100% + 1rem*var(--the-space));inset:calc(-.5rem*var(--the-space)) auto auto calc(-.5rem*var(--the-space));position:absolute;width:calc(100% + 1rem*var(--the-space));z-index:-1}@media screen and (max-height:576px){&{max-height:calc(100vh - 5rem)}}}.popper--list{>.popper__content{display:flex;flex-flow:column nowrap;margin:-1rem;padding:.25rem}}.popper__content{height:100%;max-height:inherit;overflow-x:hidden;overflow-y:auto}.popper__item{border:none;border-radius:unset;box-shadow:none;margin:0;outline:none;padding:.25rem 1rem;width:100%;&:focus{text-decoration:underline 2px dashed var(--color-base-9)}&:where(a:not(.btn)):hover{background-color:var(--bg-color-active)}}.popper__line:before{border:var(--boundary--border);border-width:0 0 1px;content:"";display:block;height:0;padding:0}.popper--tl{inset:auto auto calc(100% + .25rem*var(--the-space)) 0;translate:0}.popper--tr{inset:auto 0 calc(100% + .25rem*var(--the-space)) auto;translate:0}.popper--bl{inset:calc(100% + .25rem*var(--the-space)) auto auto 0;translate:0}.popper--bm{inset:calc(100% + .25rem*var(--the-space)) auto auto 50%}.popper--br{inset:calc(100% + .25rem*var(--the-space)) 0 auto auto;translate:0}.popper--lt{inset:0 calc(100% + .25rem*var(--the-space)) auto auto;translate:0}.popper--lm{inset:50% calc(100% + .25rem*var(--the-space)) auto auto;translate:0 -50%}.popper--lb{inset:auto calc(100% + .25rem*var(--the-space)) 0 auto;translate:0}.popper--rt{inset:0 auto auto calc(100% + .25rem*var(--the-space));translate:0}.popper--rm{inset:50% auto auto calc(100% + .25rem*var(--the-space));translate:0 -50%}.popper--rb{inset:auto auto 0 calc(100% + .25rem*var(--the-space));translate:0}.popper--pointer{&:after{border-bottom:.5rem solid var(--bg-color);border-left:.5rem solid transparent;border-right:.5rem solid transparent;content:"";inset:auto auto -.375rem 50%;opacity:1;position:absolute;transform:rotate(180deg);translate:-50%}&:is(.popper--tl):after{inset:auto auto -.375rem .8rem;translate:0}&:is(.popper--tr):after{inset:auto .8rem -.375rem auto;translate:0}&:is(.popper--bl):after{inset:-.375rem auto auto .8rem;transform:rotate(0deg);translate:0}&:is(.popper--bm):after{inset:-.375rem auto auto 50%;transform:rotate(0deg);translate:-50%}&:is(.popper--br):after{inset:-.375rem .8rem auto auto;transform:rotate(0deg);translate:0}&:is(.popper--lt):after{inset:.8rem -.65rem auto auto;transform:rotate(90deg);translate:0}&:is(.popper--lm):after{inset:50% -.65rem auto auto;transform:rotate(90deg);translate:0 -50%}&:is(.popper--lb):after{inset:auto -.65rem .8rem auto;transform:rotate(90deg);translate:0}&:is(.popper--rt):after{inset:.8rem auto auto -.65rem;transform:rotate(-90deg);translate:0}&:is(.popper--rm):after{inset:50% auto auto -.65rem;transform:rotate(-90deg);translate:0 -50%}&:is(.popper--rb):after{inset:auto auto .8rem -.65rem;transform:rotate(-90deg);translate:0}}.popper{display:none;opacity:0;transform:translateY(calc(.25rem*var(--the-space)));transition:display allow-discrete .2s,opacity .2s ease-in-out,transform .2s ease-in-out;&:is(.popper--bl,.popper--bm,.popper--br){transform:translateY(calc(-.25rem*var(--the-space)))}&:is(.popper--lt,.popper--lm,.popper--lb){transform:translateX(calc(.25rem*var(--the-space)))}&:is(.popper--rt,.popper--rm,.popper--rb){transform:translateX(calc(-.25rem*var(--the-space)))}&:focus,&:focus-within,&:hover,&[data-popper-active],:has(+.popper--focus):focus+&,:has(+.popper--hover):hover+&{display:block;opacity:1;transform:translateY(0);@starting-style{opacity:0;transform:translateY(calc(.25rem*var(--the-space)));&:is(.popper--bl,.popper--bm,.popper--br){transform:translateY(calc(-.25rem*var(--the-space)))}&:is(.popper--lt,.popper--lm,.popper--lb){transform:translateX(calc(.25rem*var(--the-space)))}&:is(.popper--rt,.popper--rm,.popper--rb){transform:translateX(calc(-.25rem*var(--the-space)))}}}}.panel{display:flex;flex-flow:column nowrap;gap:1rem;padding:1rem}.panel__body{align-items:center;display:flex;flex-flow:column nowrap;gap:1rem;overflow:auto;padding:0 .5rem;&>*{inset:auto;margin:unset;max-height:40vh;position:relative;transform:none;width:auto}}:where(.panel__header,.panel__body)>*{margin:unset}.floater{height:auto;max-width:clamp(280px,calc(100% - 2rem),640px);min-width:280px;position:fixed;width:max-content;z-index:var(--z-index-fixed);@media screen and (max-height:576px){&{max-height:calc(100% - 2rem)}}@media screen and (min-height:576px){&{max-height:80vh}}@media screen and (max-width:576px){&{max-width:100%}}}.floater--top{inset:0 50% auto;transform:translate(-50%)}.floater--top-left{inset:0 auto auto 0;transform:none}.floater--top-right{inset:0 0 auto auto;transform:none}.floater--bottom{inset:auto 50% 0;transform:translate(-50%)}.floater--bottom-right{inset:auto 0 0 auto;transform:none}.floater--bottom-left{inset:auto auto 0 0;transform:none}@media screen and (max-width:816px){.floater--top,.floater--top-left,.floater--top-right{inset:0 50% auto;transform:translate(-50%)}.floater--bottom,.floater--bottom-left,.floater--bottom-right{inset:auto 50% 0;transform:translate(-50%)}}.floater--md{height:clamp(13rem,100vh - 2rem,474px);width:clamp(280px,100vw - 2rem,610px)}.floater--lg,.floater--md{max-height:revert-layer;max-width:revert-layer}.floater--lg{height:clamp(13rem,100vh - 2rem,902px);width:clamp(280px,100vw - 2rem,1160px)}.floater--fluid{max-height:calc(100vh - 2rem);max-width:calc(100vw - 2rem);max-width:revert-layer}.floater:where([popover]){display:block;inset:0;min-width:auto;opacity:1;pointer-events:auto;position:fixed;transition:transform .35s ease-in-out,display allow-discrete .35s;z-index:1;&:not([popover]:popover-open){box-shadow:none;height:calc(100% - 1rem);max-height:unset;max-width:unset;overflow:clip;position:relative;transform:translate(-50%,-50%);translate:50% 50%;width:auto;.active-invisible{display:block}.active-visible{display:none}}}.floater[popover]:popover-open{inset:50% auto auto 50%;position:fixed;transform:translate(-50%,-50%) scale(1.01);.active-invisible{display:none}.active-visible{display:block}}.appear{display:grid;grid:0fr/100%;max-height:40vh;transition:grid .35s ease-in-out,visibility .35s ease-in-out;visibility:collapse;&:has(>:where([data-appear-handler]:checked)){grid:1fr/100%;visibility:visible;.appear__content{overflow:auto;scrollbar-width:auto}}}.appear-sibling{flex:1 1 auto;overflow:auto}.appear__overflow{overflow:hidden}.appear__content{height:100%;overflow:clip;scrollbar-width:none;transition:scrollbar-width allow-discrete 1.5s}.appear__toggle{inset:0;position:absolute;z-index:-1}.appear--right{grid:100%/auto 0fr;max-height:none;max-width:40vw;[data-appear-handler]{position:static}&:has(>[data-appear-handler]:checked){grid:100%/auto 1fr}}.appear--bottom{grid:auto 0fr/100%;[data-appear-handler]{position:static}&:has(>[data-appear-handler]:checked){grid:auto 1fr/100%}}.appear--left{grid:100%/0fr;max-height:none;max-width:40vw;&:has(>[data-appear-handler]:checked){grid:100%/1fr}}.appear--fix{--target-size:var(--appear-size,300px);grid:0/100%;max-height:none;&:has(>[data-appear-handler]:checked){grid:var(--target-size) /100%}&:is(.appear--right){grid:100%/auto 0;max-width:none;.