@bakung-ui/bakung.css
Version:
HTML UI library pure CSS, lightweight, no javascript
1 lines • 110 kB
CSS
@import "_variables.css";@import "@bakung-ui/minimax.css/css/_minimax.css";@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;.appear__content{height:100%;width:var(--target-size)}&:has(>[data-appear-handler]:checked){grid:100%/auto var(--target-size)}}&:is(.appear--bottom){grid:auto 0/100%;&:has(>[data-appear-handler]:checked){grid:auto var(--target-size) /100%}}&:is(.appear--left){grid:100%/0;max-width:none;.appear__content{height:100%;width:var(--target-size)}&:has(>[data-appear-handler]:checked){grid:100%/var(--target-size)}}}.appear--offcanvas{--target-size:var(--appear-size,300px);backdrop-filter:blur(.25rem);background:oklch(from var(--color-base-6) l c h/.35);display:initial;inset:0;max-height:none;max-width:none;position:fixed;transition:visibility .35s ease-in-out;z-index:var(--z-index-offcanvas);.appear__content{background:var(--offcanvas__content--bg-color,var(--bg-color));box-shadow:var(--shadow-float);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){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:var(--target-size);max-height:none;max-width:none;min-height:auto;min-width:auto}&:is(.appear--right) .appear__content{height:100%;width:var(--target-size)}&:is(.appear--bottom) .appear__content{height:var(--target-size)}&:is(.appear--left) .appear__content{height:100%;width:var(--target-size)}}}.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){overflow:hidden}.accordions{border-radius:.125rem;display:flex;height:var(--accordions--height,290px);margin:0 0 1rem}.accordion{border:0 var(--accordion--border-style,solid) var(--accordion--border-color,var(--border-color-boundary));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:var(--accordion--borders-width,1px 0 1px 1px)}&:last-child{border-bottom-right-radius:inherit;border-top-right-radius:inherit;border-width:var(--accordion--borders-width,1px 1px 1px 0)}&:not(:first-child,:last-child){border-width:var(--accordion--borders-width,1px 1px 1px 1px)}&:has(>.accordion__header [data-accordion-select-handler]:checked){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:var(--accordion__header--font-color,var(--bg-color-clickable));border:0 var(--accordion__header--border-style,solid) var(--accordion__header--border-color,var(--border-color-boundary));border-width:0 1px 0 0;color:var(--accordion__header--font-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 var(--color-base-9)}>.visual-indicator{transition:transform .35s ease-in-out}&:has([data-accordion-select-handler]:checked)>.visual-indicator{transform:scaleX(-1)}}.accordion__body{background:var(--accordion__body--bg-color);color:var(--accordion__body--font-color,revert-layer);display:flex;flex:1 1 100%}.accordion__overflow{overflow:hidden;position:relative;width:100%}.accordion__content{inset:0;overflow:clip;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:var(--accordion--borders-width,1px 1px 0 1px)}&:last-child{border-radius:unset;border-bottom-right-radius:inherit;border-top-right-radius:inherit;border-width:var(--accordion--borders-width,0 1px 1px 1px)}&:not(:first-child,:last-child){border-width:var(--accordion--borders-width,1px 1px 1px 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:var(--color-base-1);display:grid;filter:var(--shadow-border);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:var(--cards--slide--height,auto);scrollbar-width:none;&:has([data-slide-select-handler]:focus){box-shadow:0 0 0 .125rem var(--transparent-color)}.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-color:var(--bg-color-text);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{--slide-prev-nav:attr(be-prev-nav,"<");--slide-next-nav:attr(be-next-nav,">");&::scroll-button(*){background:var(--bg-color-clickable);border:0 var(--slide__navigators--border-style,solid) var(--border-color-control);border-radius:.25rem;border-width:var(--slide__navigators--borders-width,1px);box-shadow:var(--btn--shadow,);color:var(--controls--font-color);cursor:pointer;line-height:1;margin:1rem 0;padding:.5rem .75rem;z-index:1}&::scroll-button(left){content:var(--slide-prev-nav)}&::scroll-button(right){content:var(--slide-next-nav);margin-left:.5rem}&::scroll-button(*):not(:disabled):active{box-shadow:none;transform:translateY(1px)}&::scroll-button(*):focus-visible{box-shadow:none;outline:var(--focus-outline)}&::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}}}.slide__navigator-next,.slide__navigator-prev{background:var(--bg-color-clickable);border:0 var(--slide__navigators--border-style,solid) var(--border-color-control);border-radius:.25rem;border-width:var(--slide__navigators--borders-width,1px);cursor:pointer;line-height:1;padding:.5rem;position:absolute}.slide__navigator-prev{inset:40% auto auto .5rem}.slide__navigator-next{inset:40% .5rem auto auto}.slide__indicators{display:flex;gap:.5rem .5rem;justify-content:center;margin:1rem}.slide__indicator-item{background:var(--bg-color-clickable);border:0 var(--slide__indicator-item--border-style,solid) var(--slide__indicator-item--border-color,var(--border-color-boundary));border-radius:.25rem;border-width:var(--slide__indicator-item--borders-width,1px);cursor:pointer;height:.375rem;width:1.75rem;&:focus,&:hover{box-shadow:revert-layer}}.slide:has(.slide__item:first-child [data-slide-select-handler]:checked) .slide__indicator-item:first-child,.slide:has(.slide__item:nth-child(10) [data-slide-select-handler]:checked) .slide__indicator-item:nth-child(10),.slide:has(.slide__item:nth-child(11) [data-slide-select-handler]:checked) .slide__indicator-item:nth-child(11),.slide:has(.slide__item:nth-child(12) [data-slide-select-handler]:checked) .slide__indicator-item:nth-child(12),.slide:has(.slide__item:nth-child(13) [data-slide-select-handler]:checked) .slide__indicator-item:nth-child(13),.slide:has(.slide__item:nth-child(14) [data-slide-select-handler]:checked) .slide__indicator-item:nth-child(14),.slide:has(.slide__item:nth-child(15) [data-slide-select-handler]:checked) .slide__indicator-item:nth-child(15),.slide:has(.slide__item:nth-child(2) [data-slide-select-handler]:checked) .slide__indicator-item:nth-child(2),.slide:has(.slide__item:nth-child(3) [data-slide-select-handler]:checked) .slide__indicator-item:nth-child(3),.slide:has(.slide__item:nth-child(4) [data-slide-select-handler]:checked) .slide__indicator-item:nth-child(4),.slide:has(.slide__item:nth-child(5) [data-slide-select-handler]:checked) .slide__indicator-item:nth-child(5),.slide:has(.slide__item:nth-child(6) [data-slide-select-handler]:checked) .slide__indicator-item:nth-child(6),.slide:has(.slide__item:nth-child(7) [data-slide-select-handler]:checked) .slide__indicator-item:nth-child(7),.slide:has(.slide__item:nth-child(8) [data-slide-select-handler]:checked) .slide__indicator-item:nth-child(8),.slide:has(.slide__item:nth-child(9) [data-slide-select-handler]:checked) .slide__indicator-item:nth-child(9){background:var(--bg-color-off);border:0 var(--slide__indicator-item--active--border-style,solid) var(--slide__indicator-item--active--border-color,var(--border-color-boundary));border-width:var(--slide__indicator-item--active--borders-width,0)}.group,.group-vertical{align-items:baseline;display:flex}.group-vertical{align-items:stretch;flex-flow:column}.group__action,.group__input,.group__label{border-radius:unset;border-width:0;box-shadow:none;flex:0 0 auto;margin:0;min-height:var(--controls--min-height);&:focus{z-index:1}}.group__label{border-color:var(--border-color-control);border-style:solid;padding:.125em .5em .25em}.group__input{flex:1 1 auto;:where(&:not([type=radio],[type=checkbox],[type=select])){display:block;width:100%}}.group__action{padding:var(--btn--paddings);:where(.group,.group-vertical):has(>.group__label,>.group__input)>&{padding:.125em 1em .25em}}.group__action,.group__input{&:focus,&:focus-within{box-shadow:revert-layer}}.group--border-radius{&>:first-child{border-bottom-left-radius:inherit;border-top-left-radius:inherit}&>:last-child{border-bottom-right-radius:inherit;border-top-right-radius:inherit}:where(&>.popper-container) .group__action{border-radius:inherit}}:where(.group--border){&>:is(.group__label,.group__input,.group__action),>.popper-container>.group__action{border-width:1px}&:not(.group-vertical)>:not(:last-child){border-right-width:0}&:is(.group-vertical)>:not(:last-child){border-bottom-width:0}}.form__group{border:none;margin:auto auto var(--elements-block-level-space,1rem);padding:0}.form__label{color:var(--font-color-alt-1);display:inline-block;font-size:1rem;margin:0 0 var(--elements-block-level-space,.5rem)}.form__description{color:var(--font-color-alt-2);display:block;font-size:.8em;margin:-.5em auto .25rem}.form__control{border:var(--controls--border);color:var(--font-color);margin:auto auto var(--elements-block-level-space,.5rem);width:100%;.group__label{background:var(--bg-color);color:var(--font-color-alt-1)}&>:is(:first-child):is(:last-child){margin:0;width:100%}&>*{border-width:0}&:not(.group-vertical)>:not(:last-child){border-right-width:1px}&:is(.group-vertical)>:not(:last-child){border-bottom-width:1px}:where(&):focus,:where(&):focus-within{box-shadow:var(--focus--box-shadow)}& [type=file]:focus-visible::-webkit-file-upload-button{text-decoration:underline 2px dashed var(--color-base-9)}& :is(input:not([type=checkbox],[type=radio]),textarea):focus,&:is(input:not([type=checkbox],[type=radio]),textarea):focus{outline:none}}.feedback,.invalid-feedback,.valid-feedback{display:none;font-size:.9em;margin-bottom:.25rem;:where(.form__group:is(.data-is-valid,.data-is-invalid),.form__group:has(.data-is-valid,.data-is-invalid)) &,:where(form[data-was-validated]) &{display:block}}.valid-feedback,:where(.form__group:is(.data-is-valid),.form__group:has(.data-is-valid)) .feedback{color:var(--color-success-80)}.invalid-feedback,:where(.form__group:is(.data-is-invalid),.form__group:has(.data-is-invalid)) .feedback{color:var(--color-caution-80)}form:not([novalidate]) .form__group:not(:has(.form__control[novalidate])){&:has(:user-valid:not(:is(:placeholder-shown))){.feedback,.valid-feedback{display:block}}&:has(:user-invalid){.feedback,.invalid-feedback{display:block}}}.form__group:has(.data-is-valid) .form__control,form:not([novalidate]) .form__control:not([novalidate]):where(:has(:user-valid:not(:is(:placeholder-shown))),:is(:user-valid:not(:is(:placeholder-shown)))),form[data-was-validated] .form__group:has(.valid-feedback) .form__control{&:not(.form__control--validation-icon){border-color:var(--color-success-60)}&:not(.form__control--validation-border){background:var(--input--bg-color) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='oklch(0.58 0.19 135.24)' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/%3E%3C/svg%3E") right .5em center/1.2em no-repeat;padding-right:2.25em}&>:last-child{border-width:0 1px 0 0}}.form__group:has(.data-is-invalid) .form__control,form:not([novalidate]) .form__control:not([novalidate]):where(:has(:user-invalid),:is(:user-invalid)),form[data-was-validated] .form__group:has(.invalid-feedback) .form__control{&:not(.form__control--validation-icon){border-color:var(--color-caution-60)}&:not(.form__control--validation-border){background:var(--input--bg-color) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width=