@bakung-ui/bakung.css
Version:
A modern, lightweight, zero-JS composable HTML-UI library designed for those who build on desktop and aim for mobile
1 lines • 116 kB
CSS
@layer base, ui;@layer base{*,:after,:before{box-sizing:border-box;margin:0;padding:0}:focus-visible{outline:.25rem solid oklch(from oklch(.59 .11 281.84) l c h/.15);outline-offset:0}:where([type=range]):focus-visible{outline:none}html{font:normal normal 300 normal 16px/1.5 Lato,Helvetica Neue,sans-serif;-moz-text-size-adjust:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;&:has(dialog[open],dialog[popover]:popover-open){overflow:hidden}}body{accent-color:oklch(.59 .11 281.84);background:oklch(.98 0 0);color:oklch(.23 .04 280.81);letter-spacing:.06em;min-height:100vh}main{display:block}h1,h2,h3,h4,h5,h6{color:oklch(.34 .02 283.59);font:500 4rem/1 Montserrat,sans-serif;letter-spacing:-.016em;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)}h3,h4{line-height:1.125}h4{font-size:clamp(1.62rem,calc(1.62rem + .125vw),2.62rem)}h5{font-size:clamp(1.35rem,calc(1.35rem + .125vw),2.35rem)}h5,h6{letter-spacing:normal;line-height:clamp(1em,1.5em - .75vw,1.5em)}h6{font-size:clamp(1.125rem,calc(1.125rem + .125vw),2.125rem)}blockquote{--data-quoter-marker:attr(data-quoter-marker,"\2014 \00A0");border:solid oklch(.82 .02 285.18);border-width:0 0 0 4px;margin:0 0 0 1rem;padding:1rem;:where(&) footer{color:oklch(.49 .02 283.94);margin:1rem 0 0}:where(&) footer:before{content:var(--data-quoter-marker)}}ol,ul{padding:0 0 0 1.25em}fieldset{border:1px solid oklch(.82 .02 285.18);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:500}dt,pre{color:oklch(.34 .02 283.59)}pre{background:oklch(.95 .01 285.37);border:1px solid oklch(.82 .02 285.18);overflow:auto;padding:1rem}hr{border:solid oklch(.82 .02 285.18);border-width:0 0 1px;box-sizing:content-box;color:inherit;margin:.5rem 0;overflow:visible}a{display:inline-block}[href]{color:oklch(.56 .22 276.32);&:focus,&:hover{filter:brightness(105%)}&:visited{color:oklch(.42 .13 279.17)}}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 400 1.125rem Sometype Mono,monospace,monospace;font-optical-sizing:auto}code{background:oklch(from oklch(.95 .01 285.37) .9 c h/.4);color:oklch(.23 .04 280.81)}kbd{background:oklch(.36 .02 285.26);border-radius:3px;color:#fff;&:has(kbd){background-color:unset;border:0 solid oklch(.82 .02 285.18);border-width:1px 2px 3px 1px;padding:0 .5rem .25rem .25rem}kbd{background-color:unset;color:oklch(.23 .04 280.81);font-weight:400}}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}svg:not(:root){overflow:hidden}table{border-color:inherit;text-indent:0}th{color:oklch(.34 .02 283.59);font-weight:500}td{padding:.5em}[popover],dialog,template{display:none}[popover],dialog{background:oklch(.98 0 0);border:unset;box-shadow:0 3px 10px 0 oklch(from oklch(.59 .11 281.84) l c h/.15);color:inherit;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{background:oklch(.98 0 0);border:1px solid oklch(.82 .02 285.18);border-radius:.125em;color:oklch(.23 .04 280.81);max-height:calc(100vh - 4rem);max-width:clamp(280px,100vw - 4rem,1160px);min-height:5rem;min-width:clamp(280px,100vw - 4rem,400px)}[popover],dialog{height:auto;width:auto}[popover]{max-height:calc(100vh - 2rem);max-width:clamp(4rem,100vw - 2rem,1200px)}[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(1px);background:oklch(.34 .03 284.04/.9)}progress{display:inline-block;vertical-align:baseline}button,input,optgroup,option,select,textarea{color:oklch(.23 .04 280.81);font:300 16px/1.5 Lato,Helvetica Neue,sans-serif}button,input,optgroup,select,textarea{border:1px solid oklch(.75 .02 285.18);margin:0;min-height:1.75rem;padding:.125em .25em .25em}button,input,select{text-transform:none}.btn,[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;-moz-appearance:button;appearance:button;background-color:oklch(.96 .01 285.53);border:1px solid oklch(.75 .02 285.18);border-radius:.25em;box-shadow:0 2px 2px 0 oklch(from oklch(.59 .11 281.84) l c h/.15);color:oklch(.23 .04 280.81);cursor:pointer;font:normal 400 16px/1.5 Lato,Helvetica Neue,sans-serif;min-height:1.75rem;overflow:visible;padding:.2lh .75lh .25lh;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;:where(&:hover,&:focus):not(:disabled){filter:brightness(103%)}:where(&:active):not(:disabled){box-shadow:none;filter:brightness(105%);transform:translateY(1px)}&:disabled{color:revert}&:focus-visible{box-shadow:none}}[type=color],input,select,textarea{background:#fff;border-radius:.125em}select{min-width:1.7em}optgroup{border:none;color:oklch(.49 .02 283.94);padding:.125em}option{margin:0 0 0 .5em;padding:.25em .25em .125em;&:checked{background-color:oklch(.95 .01 285.37);color:oklch(.59 .11 281.84)}}textarea{overflow:auto;vertical-align:top}input{overflow:visible}[type=checkbox],[type=color],[type=file],[type=radio],[type=range]{cursor:pointer}[type=color]{background:inherit;min-height:2rem;padding:.25em}[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;background-color:oklch(.96 .01 285.53);border:1px solid oklch(.75 .02 285.18);color:oklch(.23 .04 280.81);cursor:pointer;font:normal 400 16px/1.5 Lato,Helvetica Neue,sans-serif;margin:-1px .125em -1px -1px;padding:.125em .25em}[type=range]:focus-visible::-webkit-slider-thumb{border-radius:50%;height:.8em;outline:.25rem solid oklch(from oklch(.59 .11 281.84) l c h/.15);width:.8em}[type=checkbox],[type=radio]{min-height:auto;padding:0}input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-grid;font-size:inherit;height:.75em;place-content:center;width:.75em}input[type=checkbox]:before{background-color:oklch(.59 .11 281.84);-webkit-clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);content:"";height:.65em;transform:scale(0);width:.5em}input[type=checkbox]:checked:before{transform:scale(1) rotate(15deg)}input[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:50%;display:inline-grid;font-size:inherit;height:.875em;place-content:center;translate:0 -.05lh;width:.875em}input[type=radio]:before{background-color:oklch(.59 .11 281.84);border-radius:50%;content:"";height:.5em;transform:scale(0);width:.5em}input[type=radio]:checked:before{transform:scale(1)}[disabled]{cursor:not-allowed;filter:contrast(.5)}[hidden]{display:none}:target{scroll-margin-block:5ex}: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:1rem}.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:.2lh .75lh .25lh}[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:.125em .25em .25em}select{min-width:1.5em;padding:.125em .25em .25em;&:focus{outline:.25rem solid oklch(from oklch(.59 .11 281.84) l c h/.15)}}input[type=range]{background:transparent;border:none;&:active{filter:brightness(120%)}&::-moz-range-thumb{background:oklch(.59 .11 281.84);border:none;height:1rem;width:1rem}&:focus-visible::-moz-range-thumb{outline:.25rem solid oklch(from oklch(.59 .11 281.84) l c h/.15)}&::-moz-range-track{background:oklch(.59 .11 281.84);border-radius:.25rem;cursor:pointer;height:.5rem}}}}@layer ui{a{:where(&.ignore-visited):visited{color:currentColor}}.avatar{background:oklch(.95 .01 285.37);border-radius:.125em;display:inline-block;font:300 .75rem Lato,Helvetica Neue,sans-serif;height:2em;position:relative;text-align:center;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:oklch(.9 .02 285.26);border-radius:50%;box-shadow:0 0 0 1px oklch(.98 0 0);height:.65em;inset:0 -.25em auto auto;position:absolute;text-align:center;width:.65em;z-index:1}.avatar--circle{border-radius:50%;.avatar__indicator{inset:0 0 auto auto;translate:0}}.badge{align-items:baseline;background:oklch(.95 .01 285.37);border:1px solid oklch(.82 .02 285.18);border-radius:1rem;color:oklch(.36 .02 285.26);display:inline-block;display:inline-flex;font:normal normal .9rem/1 Lato,Helvetica Neue,sans-serif;margin:0;min-height:.75rem;min-width:.75rem;padding:.125rem .5rem .25rem;user-select:none;white-space:nowrap;a&{text-decoration:none}}.badge--accent{background:oklch(.59 .11 281.84);border-color:oklch(.59 .11 281.84);color:#fff}.badge--low{background:oklch(.96 .1 134.3);border-color:oklch(.94 .14 134.71)}.badge--normal{background:oklch(.96 .1 106.96);border-color:oklch(.93 .11 107.32)}.badge--important{background:oklch(.95 .03 51.33);border-color:oklch(.94 .04 51.31)}.badge--critical{background:oklch(.96 .04 329.32);border-color:oklch(.95 .06 329.46)}.badge--success{background:oklch(.96 .1 134.3);border-color:oklch(.94 .14 134.71)}.badge--info{background:oklch(.94 .04 178.96);border-color:oklch(.93 .06 176.76)}.badge--caution{background:oklch(.96 .1 106.96);border-color:oklch(.93 .11 107.32)}.badge--warning{background:oklch(.95 .03 51.33);border-color:oklch(.94 .04 51.31)}.badge--error{background:oklch(.96 .04 329.32);border-color:oklch(.95 .06 329.46)}.badge--danger{background:oklch(.91 .06 10.23);border-color:oklch(.99 .23 17.23);color:oklch(.61 .23 17.23)}.badge--chip{background:oklch(.98 0 0);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:oklch(.59 .11 281.84)}&:where(.badge--low){color:oklch(.58 .19 135.24)}&:where(.badge--normal){color:oklch(.58 .15 108.19)}&:where(.badge--important){color:oklch(.61 .13 50.75)}&:where(.badge--critical){color:oklch(.63 .18 335.23)}&:where(.badge--success){color:oklch(.58 .19 135.24)}&:where(.badge--info){color:oklch(.57 .09 175.98)}&:where(.badge--caution){color:oklch(.58 .15 108.19)}&:where(.badge--warning){color:oklch(.61 .13 50.75)}&:where(.badge--error){color:oklch(.63 .18 335.23)}&:where(.badge--danger){color:oklch(.7 .23 17.23)}}.btn{font-size:16px;transition:color .5s ease-out,background .5s ease-out,border .5s ease-out}.btn:not(:where(button,[type=button],[type=reset],[type=submit])){padding:.2lh .75lh .25lh}.btn--icon{background:none;border:none;border-radius:50%;box-shadow:none;font-size:16px;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{background:oklch(.59 .11 281.84);border-color:oklch(.59 .11 281.84);color:#fff}.btn--low{background:oklch(.91 .13 133.87);border-color:oklch(.86 .15 134.24)}.btn--normal{background:oklch(.91 .14 107.68);border-color:oklch(.86 .15 107.93)}.btn--important{background:oklch(.91 .06 51.27);border-color:oklch(.86 .07 51.23)}.btn--critical{background:oklch(.92 .09 329.69);border-color:oklch(.89 .13 330.04)}.btn--success{background:oklch(.91 .13 133.87);border-color:oklch(.86 .15 134.24)}.btn--info{background:oklch(.9 .07 176.68);border-color:oklch(.86 .1 175.98)}.btn--caution{background:oklch(.91 .14 107.68);border-color:oklch(.86 .15 107.93)}.btn--warning{background:oklch(.91 .06 51.27);border-color:oklch(.86 .07 51.23)}.btn--error{background:oklch(.92 .09 329.69);border-color:oklch(.89 .13 330.04)}.btn--danger{background:oklch(.91 .23 17.23);border-color:oklch(.83 .23 17.23)}.btn--ghost{background:oklch(from oklch(.59 .11 281.84) l c h/.05);border:0;box-shadow:none;text-decoration:underline 2px dotted oklch(.87 .02 285.26);&:focus{text-decoration-style:solid}&:active{background:oklch(from oklch(.59 .11 281.84) l c h/.25)}}.btn--bordered{background:revert-layer;border-color:currentColor;:where(&).btn--accent{color:oklch(.59 .11 281.84)}:where(&).btn--low{color:oklch(.58 .19 135.24)}:where(&).btn--normal{color:oklch(.58 .15 108.19)}:where(&).btn--important{color:oklch(.61 .13 50.75)}:where(&).btn--critical{color:oklch(.63 .18 335.23)}:where(&).btn--success{color:oklch(.58 .19 135.24)}:where(&).btn--info{color:oklch(.57 .09 175.98)}:where(&).btn--caution{color:oklch(.58 .15 108.19)}:where(&).btn--warning{color:oklch(.61 .13 50.75)}:where(&).btn--error{color:oklch(.63 .18 335.23)}:where(&).btn--danger{color:oklch(.7 .23 17.23)}}[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:.25rem solid oklch(from oklch(.59 .11 281.84) l c h/.15)}}[be-switchable]{border-color:oklch(.75 .02 285.18);color:oklch(.49 .02 283.94);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:.25rem solid oklch(from oklch(.59 .11 281.84) l c h/.15)}}:has(>[data-state-handler]:checked),[selected]{[be-switchable]:not(&){.active-visible{margin:0;opacity:0;width:0}}[be-switchable]:is(&){background:oklch(.59 .11 281.84);border-color:oklch(.59 .11 281.84);color:#fff;.active-invisible{margin:0;opacity:0;width:0}}}.toggle{align-items:baseline;display:inline-flex;&:has(:where([data-toggle-handler-on],[data-toggle-handler-off-on]):not(:checked)) .active-visible,&:has([data-toggle-handler-off]:not(:checked),[data-toggle-handler-off-on]:checked) .active-invisible{display:none}}.toggle__control{align-items:center;align-self:center;border:none;display:flex;height:.75em;margin:0 .5em;padding:0;position:relative;width:1.5em;&>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:.25rem solid oklch(from oklch(.59 .11 281.84) l c h/.15)}&:has(:is([data-toggle-handler-on],[data-toggle-handler-off-on]):checked){&:after,.toggle__indicator{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:oklch(.9 .02 285.26);border:1px solid oklch(.75 .02 285.18);border-radius:1em;height:.5em;transition:background .2s ease-in-out;width:100%}&:has(>.toggle__indicator){&:after{display:none}&:has([data-toggle-handler-off]:focus-visible,[data-toggle-handler-on]:focus-visible,[data-toggle-handler-off-on]:focus-visible):before{outline:.25rem solid oklch(from oklch(.59 .11 281.84) l c h/.15)}}}.toggle__indicator{align-items:center;display:flex;justify-content:center}.toggle__control:after,.toggle__indicator{background:oklch(.96 .01 285.53);border:1px solid oklch(.75 .02 285.18);border-radius:50%;box-shadow:none;height:.75em;inset:0 calc(100% - .75em) auto auto;position:absolute;transition:inset .2s ease-in-out;width:.75em}.toggle:is(.toggle--mutual) .toggle__control,.toggle__control:has(:is([data-toggle-handler-on],[data-toggle-handler-off-on]):checked){&:before{background:oklch(.98 0 0)}&:after,.toggle__indicator{background:oklch(.59 .11 281.84)}}.toggle--vertical{display:inline-flex;flex-flow:column-reverse;.toggle__control{margin:.5em 0;transform:rotate(270deg)}.toggle__control:before,.toggle__control>*{align-self:normal}.toggle__control:before{translate:0 25%}.toggle__control:has(.toggle__indicator):before{translate:unset}}.divider{align-self:stretch;border-color:oklch(.82 .02 285.18);height:auto;inset:0;margin:.75rem .5rem;position:relative}[be-divider-caption]:after{background:oklch(.98 0 0);color:oklch(.49 .02 283.94);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:oklch(.98 0 0);border:1px solid oklch(.82 .02 285.18);border-radius:.375rem;padding:.25em}.img--fit-cover{object-fit:cover}.img--fit-contain{object-fit:contain}.img--fit-fill{height:100%;object-fit:fill}.img--fit-fill,.video--fluid{display:block;width:100%}.video--fluid{height:auto;max-width:100%;overflow:hidden;padding:0;position:relative}.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;background:oklch(.98 0 0);display:flex;flex-flow:row wrap;& a{text-decoration:none}>.nav>.nav__item>.nav{filter:drop-shadow(0 2px 2px oklch(from oklch(.59 .11 281.84) l c h/.15))}&:where([data-navbar-active]){&:is([data-navbar-active=true i]) .active-invisible{display:none}&:not([data-navbar-active=true i]) .active-visible{display:none}}&:has([data-toggle-navbar-handler]:checked) .active-invisible{display:none}&:has([data-toggle-navbar-handler]:not(:checked)) .active-visible{display:none}}.navbar__brand{display:inline-block;padding:.5rem 1rem;position:relative}.navbar__toggle{opacity:0;overflow:clip;position:absolute;visibility:hidden;&:is(:focus,:focus-within){outline:.25rem solid oklch(from oklch(.59 .11 281.84) l c h/.15)}}.nav{background:inherit;display:inline-flex;flex-flow:row wrap;list-style:none;padding:0;width:max-content;.nav{background:oklch(.98 0 0);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:1070;.nav{inset:0 auto auto 100%}}}.nav__item-line:before{border:solid oklch(.82 .02 285.18);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:oklch(.97 .01 285.51);&>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;:where(.navbar__toggle){opacity:1;overflow:initial;position:static;visibility:visible}>.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(&)[data-navbar-active=true i]{>.nav{display:block;>.nav__item:first-child{margin-top:0;@starting-style{margin-top:-110%}}}}}.navbar--breadcrumb{--breadcrumb-divider:attr(be-breadcrumb-divider,"/");background:unset;gap:0 1.5rem;.navbar__brand{padding:0}>.nav{background:unset;gap:0 1.5rem}.navbar__brand:after,>.nav>.nav__item:not(:last-child):after{color:oklch(.49 .02 283.94);content:var(--breadcrumb-divider);position:absolute;right:-1rem}>.nav>.nav__item{padding:0;&:hover{background:inherit}}}.steps{gap:1rem;grid:max-content min-content/auto-flow 200px;list-style:none}.step,.steps{display:grid}.step{grid:subgrid [row-1-start] [row-1-end row-2-start] [row-2end]/subgrid [col];grid-area:span 2/auto;text-align:center;z-index:1}.step__header{display:flex;margin:.5rem}.step__trail{align-items:center;display:flex;justify-content:center;position:relative;width:100%;&:after,&:before{background:oklch(.9 .02 285.26);content:"";position:absolute;z-index:-1}:where(.step:not(:last-child)) &:after{height:1px;transform:translate(50%);width:calc(100% + 2rem)}}.step__indicator{background:oklch(.9 .02 285.26);border:0 solid oklch(.98 0 0);border-radius:50%;display:inline-flex;margin:initial;min-height:.5rem;min-width:.5rem;padding:initial;&:active,&:focus{filter:unset;transform:unset}&:has(.visual-aside,.visual-indicator){padding:.25rem}.visual-aside,.visual-indicator{translate:0}}.step__body{color:oklch(.49 .02 283.94);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:oklch(.59 .11 281.84)}}.step__indicator{background:oklch(.59 .11 281.84);min-height:.75rem;min-width:.75rem}.step__body{color:revert-layer}}.step__trail:before{background:oklch(.59 .11 281.84)}.step__indicator{background:oklch(.98 0 0);border:.125rem solid oklch(.59 .11 281.84);min-height:.75rem;min-width:.75rem}.step__body{color:revert-layer}}.steps--done{.step__trail{&:after,&:before{background:oklch(.59 .11 281.84)}}.step__indicator{background:oklch(.59 .11 281.84);min-height:.75rem;min-width:.75rem}.step__body{color:revert-layer}}.tabs{display:flex;filter:drop-shadow(0 1px 1px oklch(from oklch(.59 .11 281.84) l c h/.15));flex-flow:column nowrap;margin:auto auto 1rem}.tabs__nav{border:0 solid oklch(.82 .02 285.18);display:flex}.tab__nav{background:oklch(.96 .01 285.53);border:solid oklch(.82 .02 285.18);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 oklch(.87 .02 285.26)}}.tab__nav:has([data-tab-select-handler]:checked),.tab__nav[data-tab-active=true i]{background:oklch(.98 0 0);z-index:100}.tabs__content{background:oklch(.98 0 0);border:1px solid oklch(.82 .02 285.18);margin:-1px 0 0;padding:1rem;position:relative;z-index:99}.tab__content{border:0 solid oklch(.82 .02 285.18);display:none}.tab__content[data-tab-active=true i],.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 oklch(.95 .01 285.37);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--focus):focus:before,&:is([data-tooltip-active=true i]):before{inset:-.5rem auto auto 50%;opacity:1}&:after{background:oklch(.95 .01 285.37);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:1080}&:hover:after,&:is(.tooltip--focus):focus:after,&:is([data-tooltip-active=true i]):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--focus):focus:before,&:is([data-tooltip-active=true i]):before{inset:50% auto auto 100%}&:after{inset:50% auto auto 100%;transform:translateY(-50%)}&:hover:after,&:is(.tooltip--focus):focus:after,&:is([data-tooltip-active=true i]):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--focus):focus:before,&:is([data-tooltip-active=true i]):before{inset:auto auto -.5rem 50%}&:after{inset:100% auto auto 50%;transform:translateX(-50%)}&:hover:after,&:is(.tooltip--focus):focus:after,&:is([data-tooltip-active=true i]):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--focus):focus:before,&:is([data-tooltip-active=true i]):before{inset:50% 100% auto auto}&:after{inset:50% 100% auto auto;transform:translateY(-50%)}&:hover:after,&:is(.tooltip--focus):focus:after,&:is([data-tooltip-active=true i]):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{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:1055;&:not([open],[popover]:popover-open){display:none}}.dialog__header{align-items:center;display:flex;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:oklch(.98 0 0);border:1px solid oklch(.82 .02 285.18);border-radius:.125rem;color:revert-layer;display:flex;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:oklch(.59 .11 281.84);border-color:oklch(.59 .11 281.84);color:#fff;.notice__aside{color:oklch(.59 .11 281.84)}}.notice--low{background:oklch(.96 .1 134.3);border-color:oklch(.94 .14 134.71);.notice__aside{color:oklch(.39 .19 135.24)}}.notice--normal{background:oklch(.96 .1 106.96);border-color:oklch(.93 .11 107.32);.notice__aside{color:oklch(.37 .15 108.19)}}.notice--important{background:oklch(.95 .03 51.33);border-color:oklch(.94 .04 51.31);.notice__aside{color:oklch(.42 .13 50.75)}}.notice--critical{background:oklch(.96 .04 329.32);border-color:oklch(.95 .06 329.46);.notice__aside{color:oklch(.46 .18 335.16)}}.notice--success{background:oklch(.96 .1 134.3);border-color:oklch(.94 .14 134.71);.notice__aside{color:oklch(.39 .19 135.24)}}.notice--info{background:oklch(.94 .04 178.96);border-color:oklch(.93 .06 176.76);.notice__aside{color:oklch(.38 .09 175.98)}}.notice--caution{background:oklch(.96 .1 106.96);border-color:oklch(.93 .11 107.32);.notice__aside{color:oklch(.37 .15 108.19)}}.notice--warning{background:oklch(.95 .03 51.33);border-color:oklch(.94 .04 51.31);.notice__aside{color:oklch(.42 .13 50.75)}}.notice--error{background:oklch(.96 .04 329.32);border-color:oklch(.95 .06 329.46);.notice__aside{color:oklch(.46 .18 335.16)}}.notice--danger{background:oklch(.91 .06 10.23);border-color:oklch(.99 .23 17.23);.notice__aside{color:oklch(.54 .21 16.44)}}.notice--notify{background:oklch(.98 0 0);border:0 solid oklch(.82 .02 285.18);border-radius:.125rem;box-shadow:0 3px 10px 0 oklch(from oklch(.59 .11 281.84) l c h/.15);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:1070;&[data-notify-active]{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:oklch(.59 .11 281.84)}&.notice--low{background:oklch(.97 .06 129.67);border-color:oklch(.96 .1 134.3)}&.notice--normal{background:oklch(.98 .08 107.75);border-color:oklch(.96 .1 106.96)}&.notice--important{background:oklch(.95 .02 51.36);border-color:oklch(.95 .03 51.33)}&.notice--critical{background:oklch(.97 .03 329.25);border-color:oklch(.96 .04 329.32)}&.notice--success{background:oklch(.97 .06 129.67);border-color:oklch(.96 .1 134.3)}&.notice--info{background:oklch(.99 .04 177.23);border-color:oklch(.94 .04 178.96)}&.notice--caution{background:oklch(.98 .08 107.75);border-color:oklch(.96 .1 106.96)}&.notice--warning{background:oklch(.95 .02 51.36);border-color:oklch(.95 .03 51.33)}&.notice--error{background:oklch(.97 .03 329.25);border-color:oklch(.96 .04 329.32)}&.notice--danger{background:oklch(.93 .04 9.18);border-color:oklch(.91 .06 10.23)}}.popper-container{display:inline-flex;position:relative}.popper{background:oklch(.98 0 0);border:1px solid oklch(.82 .02 285.18);border-radius:.125rem;filter:drop-shadow(0 2px 2px oklch(from oklch(.59 .11 281.84) l c h/.15));inset:auto auto calc(100% + .25rem) 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:1070;&:before{content:"";height:calc(100% + 1rem);inset:-.5rem auto auto -.5rem;position:absolute;width:calc(100% + 1rem);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;text-align:left;width:100%;:where(&){background:inherit}&:focus{box-shadow:none;text-decoration:underline 2px dashed oklch(.87 .02 285.26)}&:focus,&:hover{scale:none}&:is(a,button,.btn):hover{filter:brightness(103%)}}.popper__line{z-index:1;&:before{border:solid oklch(.82 .02 285.18);border-width:0 0 1px;content:"";display:block;height:0;padding:0}}.popper--tl{inset:auto auto calc(100% + .25rem) 0;translate:0}.popper--tr{inset:auto 0 calc(100% + .25rem) auto;translate:0}.popper--bl{inset:calc(100% + .25rem) auto auto 0;translate:0}.popper--bm{inset:calc(100% + .25rem) auto auto 50%}.popper--br{inset:calc(100% + .25rem) 0 auto auto;translate:0}.popper--lt{inset:0 calc(100% + .25rem) auto auto;translate:0}.popper--lm{inset:50% calc(100% + .25rem) auto auto;translate:0 -50%}.popper--lb{inset:auto calc(100% + .25rem) 0 auto;translate:0}.popper--rt{inset:0 auto auto calc(100% + .25rem);translate:0}.popper--rm{inset:50% auto auto calc(100% + .25rem);translate:0 -50%}.popper--rb{inset:auto auto 0 calc(100% + .25rem);translate:0}.popper--pointer{&:after{border-bottom:.5rem solid oklch(.98 0 0);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(.25rem);transition:display allow-discrete .2s,opacity .2s ease-in-out,transform .2s ease-in-out;&:is(.popper--bl,.popper--bm,.popper--br){transform:translateY(-.25rem)}&:is(.popper--lt,.popper--lm,.popper--lb){transform:translateX(.25rem)}&:is(.popper--rt,.popper--rm,.popper--rb){transform:translateX(-.25rem)}&:focus,&:focus-within,&:hover,&[data-popper-active=true i],:has(+.popper--focus):focus+&,:has(+.popper--hover):hover+&{display:block;opacity:1;transform:translateY(0);@starting-style{opacity:0;transform:translateY(.25rem);&:is(.popper--bl,.popper--bm,.popper--br){transform:translateY(-.25rem)}&:is(.popper--lt,.popper--lm,.popper--lb){transform:translateX(.25rem)}&:is(.popper--rt,.popper--rm,.popper--rb){transform:translateX(-.25rem)}}}}.panel{display:flex;flex-flow:column nowrap;gap:.5rem}.panel,.panel__body,.panel__header{padding:.5rem}.panel__body{overflow: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:1030;@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:100%;max-height:unset;max-width:unset;overflow:clip;position:relative;transform:translate(-50%,-50%);translate:50% 50%;width:auto;.active-visible{opacity:0;overflow:clip;position:absolute}}}.floater[popover]:popover-open{inset:50% auto auto 50%;position:fixed;transform:translate(-50%,-50%) scale(1.01);.active-invisible{opacity:0;overflow:clip;position:absolute}}.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)),&:where([data-appear-active=true i]){grid:1fr/100%;visibility:visible;.appear__content{overflow:auto;scrollbar-width:auto}}}.appear-aside{flex:1 1 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),&:where([data-appear-active=true i]){grid:100%/auto 1fr}}.appear--bottom{grid:auto 0fr/100%;[data-appear-handler]{position:static}&:has(>[data-appear-handler]:checked),&:where([data-appear-active=true i]){grid:auto 1fr/100%}}.appear--left{grid:100%/0fr;max-height:none;max-width:40vw;&:has(>[data-appear-handler]:checked),&:where([data-appear-active=true i]){grid:100%/1fr}}.appear--fix{grid:0/100%;max-height:none;&:has(>[data-appear-handler]:checked),&:where([data-appear-active=true i]){grid:300px/100%}&:is(.appear--right){grid:100%/auto 0;max-width:none;.appear__content{height:100%;width:300px}&:has(>[data-appear-handler]:checked),&:where([data-appear-active=true i]){grid:100%/auto 300px}}&:is(.appear--bottom){grid:auto 0/100%;&:has(>[data-appear-handler]:checked),&:where([data-appear-active=true i]){grid:auto 300px/100%}}&:is(.appear--left){grid:100%/0;max-width:none;.appear__content{height:100%;width:300px}&:has(>[data-appear-handler]:checked),&:where([data-appear-active=true i]){grid:100%/300px}}}.appear--offcanvas{backdrop-filter:blur(1px);background:oklch(.34 .03 284.04/.9);display:initial;inset:0;max-height:none;max-width:none;position:fixed;transition:visibility .35s ease-in-out;z-index:1045;.appear__content{background:oklch(.98 0 0);box-shadow:0 3px 10px 0 oklch(from oklch(.59 .11 281.84) l c h/.15);height:auto;max-height:40vh;min-height:50px;position:absolute;transition:translate .35s ease-in-out;translate:0 -10%;width:100%}&:has(>[data-appear-handler]:checked),&:where([data-appear-active=true i]){visibility:visible;.appear__content{translate:0}}&:is(.appear--right) .appear__content{height:100%;inset:0 0 0 auto;max-height:100%;max-width:40vw;min-width:275px;translate:100%;width:auto}&:is(.appear--bottom) .appear__content{inset:auto 0 0 0;translate:0 100%}&:is(.appear--left) .appear__content{height:100%;inset:0 auto 0 0;max-height:100%;max-width:40vw;min-width:275px;translate:-10%;width:auto}&:is(.appear--fix){.appear__content{height:300px;max-height:none;max-width:none;min-height:auto;min-width:auto}&:is(.appear--right) .appear__content{height:100%;width:300px}&:is(.appear--bottom) .appear__content{height:300px}&:is(.appear--left) .appear__content{height:100%;width:300px}}}.appear--no-backdrop{inset:0 0 auto 0;&:is(.appear--right){inset:0 0 0 auto}&:is(.appear--bottom){inset:auto 0 0 0}&:is(.appear--left){inset:0 auto 0 0}}html:has(:where(.appear--offcanvas,.appear--offcanvas-vsm,.appear--offcanvas-vmd,.appear--offcanvas-vlg):not(.appear--no-backdrop)>[data-appear-handler]:checked,.appear:where([data-appear-active=true i]):not(.appear--no-backdrop)){overflow:hidden}.accordions{background:oklch(.98 0 0);border-radius:.125rem;display:flex;height:290px;margin:0 0 1rem}.accordion{border:0 solid oklch(.82 .02 285.18);display:flex;flex:0;min-width:min-content;transition:flex-basis .35s ease-in-out;&:first-child{border-bottom-left-radius:inherit;border-top-left-radius:inherit;border-width:1px 0 1px 1px}&:last-child{border-bottom-right-radius:inherit;border-top-right-radius:inherit;border-width:1px 1px 1px 0}&:not(:first-child,:last-child){border-width:1px}&:has(>.accordion__header [data-accordion-select-handler]:checked),&:where([data-accordion-active=true i]){flex:1 1 100%;.accordion__content{overflow:auto;scrollbar-width:auto}}&:has(>.accordion__header [type=checkbox]){transition:flex-grow .35s ease-in-out,flex-basis .35s ease-in-out}}.accordion__header{align-items:baseline;background:oklch(.96 .01 285.53);border:solid oklch(.82 .02 285.18);border-width:0 1px 0 0;color:revert-layer;cursor:pointer;display:flex;justify-content:space-between;margin:0 -1px 0 0;padding:1rem .5em;position:relative;writing-mode:tb;:where(&:focus,&:focus-within){text-decoration:underline 2px dashed oklch(.87 .02 285.26)}>.visual-indicator{transition:transform .35s ease-in-out}&:has([data-accordion-select-handler]:checked)>.visual-indicator{transform:scaleX(-1)}}.accordion__body{background:initial;color:revert-layer;display:flex;flex:1 1 100%}.accordion__overflow{overflow:hidden;position:relative;width:100%}.accordion__content{inset:0;overflow:clip;overscroll-behavior:contain;padding:1rem;position:absolute;scrollbar-width:none;transition:scrollbar-width allow-discrete 1.5s}.accordions--vertical{flex-flow:column nowrap;>.accordion{flex-flow:column nowrap;min-width:auto;transition:none;&:first-child{border-radius:unset;border-bottom-left-radius:inherit;border-top-left-radius:inherit;border-width:1px 1px 0}&:last-child{border-radius:unset;border-bottom-right-radius:inherit;border-top-right-radius:inherit;border-width:0 1px 1px}&:not(:first-child,:last-child){border-width:1px}}.accordion__header{border-width:0 0 1px;margin:0 0 -1px;padding:.5rem 1em;writing-mode:initial;.visual-indicator{transform:rotate(90deg)}&:has([data-accordion-select-handler]:checked) .visual-indicator{transform:rotate(90deg) scaleX(-1)}}.accordion__body{display:grid;grid:0fr/auto;transition:grid .35s ease-in-out,visibility .35s ease-in-out;visibility:hidden;.accordion:has(>.accordion__header [data-accordion-select-handler]:checked)>&{grid:1fr/auto;visibility:visible}}&.accordions--vertical-height-auto{height:auto!important;.accordion__content{position:static}}}.card{background:oklch(.98 0 0);display:grid;filter:drop-shadow(0 1px 1px oklch(from oklch(.59 .11 281.84) l c h/.15));gap:1rem;grid:[row-1] minmax(1rem,max-content) [row-2] auto [row-3] min-content /auto;margin:auto auto 1rem;padding:1rem}.card__content{display:grid;grid:subgrid [row-1-start] [row-1-end row-2-start] [row-2end row-3-start] [row-3-end]/subgrid [col];grid-area:1/1/-1/-1;grid-auto-flow:inherit}.card__media{&>img{display:block;height:100%;object-fit:cover;width:100%}}.card__header{grid-area:2/auto}.card__body{grid-area:3/auto}:where(.card,.card__media,.card__header,.card__body)>*{margin-left:unset;margin-right:unset;&:first-child{margin-top:unset}&:last-child{margin-bottom:unset}}.cards{display:grid;gap:1.25rem;grid:auto-flow minmax(auto,300px) min-content min-content /repeat(auto-fit,minmax(auto,350px));justify-content:center;>.card{grid:subgrid [row-1-start] [row-1-end row-2-start] [row-2end row-3-start] [row-3-end]/subgrid [col];grid-area:span 3/auto;margin:unset}}.cards--media-sticks-to-border{.card__media:first-child{margin:-1rem -1rem 0}.card__media:last-child{margin:0 -1rem -1rem}}.cards--cover{grid:auto-flow minmax(min-content,150px) min-content min-content /repeat(auto-fit,minmax(auto,300px));.card__media{grid-area:1/1/-1/-1;margin:-1rem}}.cards--horizontal{grid:auto-flow minmax(min-content,auto) /repeat(auto-fill,minmax(auto,280px) minmax(auto,280px));justify-content:center;>.card{grid:subgrid/subgrid;grid-area:span 3/span 2;grid-auto-flow:column}.card__content:is(:first-child):not(:last-child){grid-area:1/auto/-1}.card__content:is(:last-child):not(:first-child){grid-area:1/2/-1}.card__header{grid-area:1/auto}.card__body{grid-area:span 2/auto}.card__media:first-child{grid-area:1/auto/-1}.card__media:last-child{grid-area:1/2/-1}.cards--media-sticks-to-border:is(&){.card__media{&:first-child{margin:-1rem -.5rem -1rem -1rem}&~*{margin:0 0 0 .5rem}&:last-child{margin:-1rem -1rem -1rem -.5rem}:has(~&){margin:0 .5rem 0 0}}}}.cards--auto-fit{&:has(>:nth-child(3)){grid:auto-flow minmax(auto,300px) min-content min-content /repeat(auto-fit,minmax(280px,1fr))}&:where(.cards--cover):has(>:nth-child(3)){grid:auto-flow minmax(auto,150px) min-content min-content /repeat(auto-fit,minmax(300px,1fr))}}.cards--scrollable,.cards--slide{grid:minmax(min-content,auto) minmax(min-content,1fr) minmax(min-content,auto) /auto-flow minmax(280px,1fr);justify-content:normal;overflow:auto;padding:.5rem;scroll-behavior:smooth;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;>.card{grid:subgrid/subgrid;position:relative;scroll-margin:.5rem;scroll-snap-align:start}}.cards--slide{grid:60vh minmax(min-content,auto) minmax(min-content,auto) /auto-flow minmax(50%,1fr) minmax(50%,1fr);grid:40vh minmax(min-content,auto) minmax(min-content,auto) /auto-flow minmax(40%,1fr) minmax(40%,1fr);height:auto;scrollbar-width:none;[data-slide-select-handler]{inset:0 50%;position:absolute}&:has([data-slide-select-handler]:focus){box-shadow:0 0 0 .125rem oklch(from oklch(.59 .11 281.84) l c h/.15)}.card{box-shadow:unset;grid:subgrid/subgrid;grid-area:span 3/span 2;margin:0 .5rem;scroll-margin:initial;scroll-snap-align:center}.card__content{background:oklch(.95 .01 285.37);grid:auto/auto;grid-area:2/1/-1/-1;height:fit-content;margin:0 auto;max-width:clamp(280px,100% - 2rem,65rem);min-width:280px;min-width:fit-content;padding:1rem;.card__header{grid-area:1/1/1/-1}.card__body{grid-area:2/1/2/-1}}.card__media{grid-area:1/1/1/-1;img{object-fit:contain}}.card__header{grid-area:2/1/2/-1}.card__body{grid-area:3/1/3/-1}}.cards--horizontal-nav{&::scroll-button(*){background:oklch(.96 .01 285.53);border:1px solid oklch(.75 .02 285.18);border-radius:.25rem;box-shadow:var(--btn--shadow);color:oklch(.23 .04 280.81);cursor:pointer;line-height:1;margin:1rem 0;padding:.5rem .75rem;z-index:1}&::scroll-button(left){content:attr(be-prev-nav,"<")}&::scroll-button(right){content:attr(be-next-nav,">");margin-left:.5rem}&::scroll-button(*):not(:disabled):active{box-shadow:none;transform:translateY(1px)}&::scroll-button(*):focus-visible{box-shadow:none;outline:.25rem solid oklch(from oklch(.59 .11 281.84) l c h/.15)}&::scroll-button(*):disabled{cursor:not-allowed;filter:contrast(.5)}}.slide{position:relative;:where(&) .cards--horizontal-nav{&::scroll-button(*){margin:initial;position:absolute;translate:0 -50%;z-index:1}&::scroll-button(left){inset:50% auto auto .5rem}&::scroll-button(right){inset:50% .5rem auto auto