npm - @jrgermain/stylesheet - Versions diffs - 0.10.1 → 0.10.2 - Mend

@jrgermain/stylesheet 0.10.1 → 0.10.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/index.css CHANGED Viewed

@@ -1,2 +1,2 @@
-*,:before,:after{box-sizing:border-box;margin:0}:where(:focus-visible){outline:var(--border-m)solid var(--color-brand-5)}html{-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){html{--lightningcss-light: ;--lightningcss-dark:initial}}body{background-color:var(--color-body);color:var(--color-body-text);margin:0}img,picture,video,iframe{max-width:100%;display:block}.js-disabled .if-js-enabled,.js-enabled .if-js-disabled{display:none!important}@media screen and (max-width:calc(30rem - .001px)){:is(.if-medium-viewport,.if-wide-viewport):not(.if-narrow-viewport){display:none!important}}@media screen and (min-width:30rem) and (max-width:calc(55rem - .001px)){:is(.if-narrow-viewport,.if-wide-viewport):not(.if-medium-viewport){display:none!important}}@media screen and (min-width:55rem){:is(.if-narrow-viewport,.if-medium-viewport):not(.if-wide-viewport){display:none!important}}.light-mode{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light only;color:var(--color-body-text)}.dark-mode{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark only;color:var(--color-body-text)}.visually-hidden,.app-sidebar-toggle input,.skip-link:not(:focus,.static){clip:rect(1px,1px,1px,1px);clip-path:inset(50%);width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}:root,::backdrop,.light-mode,.dark-mode{--color-brand-1:var(--lightningcss-light,#08003b)var(--lightningcss-dark,#e9f0ff);--color-brand-2:var(--lightningcss-light,#190074)var(--lightningcss-dark,#cad6ff);--color-brand-3:var(--lightningcss-light,#290fa3)var(--lightningcss-dark,#9fb0ff);--color-brand-4:var(--lightningcss-light,#3c35cb)var(--lightningcss-dark,#7382ff);--color-brand-5:var(--lightningcss-light,#545be7)var(--lightningcss-dark,#5961ee);--color-brand-6:var(--lightningcss-light,#6f7dff)var(--lightningcss-dark,#4344cf);--color-brand-7:var(--lightningcss-light,#93a4ff)var(--lightningcss-dark,#3124b1);--color-brand-8:var(--lightningcss-light,#bbc9ff)var(--lightningcss-dark,#230095);--color-brand-9:var(--lightningcss-light,#e5edff)var(--lightningcss-dark,#0b004a);--color-brand-transparent:var(--lightningcss-light,#545be766)var(--lightningcss-dark,#5961ee80);--color-brand-extra-transparent:var(--lightningcss-light,#545be733)var(--lightningcss-dark,#5961ee59);--color-red-1:var(--lightningcss-light,#240000)var(--lightningcss-dark,#ffe3dc);--color-red-2:var(--lightningcss-light,#4d0000)var(--lightningcss-dark,#ffc3b6);--color-red-3:var(--lightningcss-light,#7a0000)var(--lightningcss-dark,#ff8875);--color-red-4:var(--lightningcss-light,#a90000)var(--lightningcss-dark,#f45441);--color-red-5:var(--lightningcss-light,#cc2a1b)var(--lightningcss-dark,#d33223);--color-red-6:var(--lightningcss-light,#f0503d)var(--lightningcss-dark,#b30000);--color-red-7:var(--lightningcss-light,#ff7c68)var(--lightningcss-dark,#8d0000);--color-red-8:var(--lightningcss-light,#ffb4a5)var(--lightningcss-dark,#6c0000);--color-red-9:var(--lightningcss-light,#ffe3dc)var(--lightningcss-dark,#340000);--color-red-transparent:var(--lightningcss-light,#cc2a1b66)var(--lightningcss-dark,#d3322380);--color-red-extra-transparent:var(--lightningcss-light,#cc2a1b33)var(--lightningcss-dark,#d3322359);--color-orange-1:var(--lightningcss-light,#1c0300)var(--lightningcss-dark,#ffe5d0);--color-orange-2:var(--lightningcss-light,#3e1200)var(--lightningcss-dark,#ffc5a0);--color-orange-3:var(--lightningcss-light,#632500)var(--lightningcss-dark,#ff9559);--color-orange-4:var(--lightningcss-light,#8b3a00)var(--lightningcss-dark,#d97234);--color-orange-5:var(--lightningcss-light,#b45100)var(--lightningcss-dark,#ba570d);--color-orange-6:var(--lightningcss-light,#d76f04)var(--lightningcss-dark,#9c3b00);--color-orange-7:var(--lightningcss-light,#f98f3a)var(--lightningcss-dark,#782700);--color-orange-8:var(--lightningcss-light,#ffb87e)var(--lightningcss-dark,#5c1900);--color-orange-9:var(--lightningcss-light,#ffe6cc)var(--lightningcss-dark,#2c0400);--color-orange-transparent:var(--lightningcss-light,#b4510066)var(--lightningcss-dark,#ba570d80);--color-orange-extra-transparent:var(--lightningcss-light,#b4510033)var(--lightningcss-dark,#ba570d59);--color-yellow-1:var(--lightningcss-light,#140900)var(--lightningcss-dark,#fdf4d5);--color-yellow-2:var(--lightningcss-light,#2f1e00)var(--lightningcss-dark,#fadfa6);--color-yellow-3:var(--lightningcss-light,#4e3700)var(--lightningcss-dark,#fdd171);--color-yellow-4:var(--lightningcss-light,#7a5700)var(--lightningcss-dark,#dfaf3f);--color-yellow-5:var(--lightningcss-light,#a57c00)var(--lightningcss-dark,#c69720);--color-yellow-6:var(--lightningcss-light,#c89808)var(--lightningcss-dark,#a17807);--color-yellow-7:var(--lightningcss-light,#dfb22b)var(--lightningcss-dark,#750);--color-yellow-8:var(--lightningcss-light,#efcb72)var(--lightningcss-dark,#4e3700);--color-yellow-9:var(--lightningcss-light,#f8edc1)var(--lightningcss-dark,#211500);--color-yellow-transparent:var(--lightningcss-light,#a57c0066)var(--lightningcss-dark,#a57c0080);--color-yellow-extra-transparent:var(--lightningcss-light,#a57c0033)var(--lightningcss-dark,#a57c0059);--color-green-1:var(--lightningcss-light,#011000)var(--lightningcss-dark,#dff4d3);--color-green-2:var(--lightningcss-light,#0c2a00)var(--lightningcss-dark,#bbe7a5);--color-green-3:var(--lightningcss-light,#1d4600)var(--lightningcss-dark,#8ecb6b);--color-green-4:var(--lightningcss-light,#2f6500)var(--lightningcss-dark,#63a736);--color-green-5:var(--lightningcss-light,#438500)var(--lightningcss-dark,#498b0f);--color-green-6:var(--lightningcss-light,#5fa500)var(--lightningcss-dark,#2e7000);--color-green-7:var(--lightningcss-light,#7dc53a)var(--lightningcss-dark,#1c5400);--color-green-8:var(--lightningcss-light,#a4e472)var(--lightningcss-dark,#113f00);--color-green-9:var(--lightningcss-light,#dafbc4)var(--lightningcss-dark,#011b00);--color-green-transparent:var(--lightningcss-light,#43850066)var(--lightningcss-dark,#498b0f80);--color-green-extra-transparent:var(--lightningcss-light,#43850033)var(--lightningcss-dark,#498b0f59);--color-sky-1:var(--lightningcss-light,#001011)var(--lightningcss-dark,#c8f6f5);--color-sky-2:var(--lightningcss-light,#002a2b)var(--lightningcss-dark,#9ee7e7);--color-sky-3:var(--lightningcss-light,#004747)var(--lightningcss-dark,#61c7c8);--color-sky-4:var(--lightningcss-light,#006566)var(--lightningcss-dark,#3aa4a5);--color-sky-5:var(--lightningcss-light,#008586)var(--lightningcss-dark,#0b8889);--color-sky-6:var(--lightningcss-light,#00a7a8)var(--lightningcss-dark,#006d6f);--color-sky-7:var(--lightningcss-light,#00c8c9)var(--lightningcss-dark,#005254);--color-sky-8:var(--lightningcss-light,#76e2e2)var(--lightningcss-dark,#003e3f);--color-sky-9:var(--lightningcss-light,#caf9f8)var(--lightningcss-dark,#001a1b);--color-sky-transparent:var(--lightningcss-light,#00858666)var(--lightningcss-dark,#0b888980);--color-sky-extra-transparent:var(--lightningcss-light,#00858633)var(--lightningcss-dark,#0b888959);--color-blue-1:var(--lightningcss-light,#00003e)var(--lightningcss-dark,#ddf0ff);--color-blue-2:var(--lightningcss-light,#00007a)var(--lightningcss-dark,#b9d9ff);--color-blue-3:var(--lightningcss-light,#002b97)var(--lightningcss-dark,#7eb4ff);--color-blue-4:var(--lightningcss-light,#004abd)var(--lightningcss-dark,#418dff);--color-blue-5:var(--lightningcss-light,#1c69e3)var(--lightningcss-dark,#2370ea);--color-blue-6:var(--lightningcss-light,#3988ff)var(--lightningcss-dark,#0053cb);--color-blue-7:var(--lightningcss-light,#74adff)var(--lightningcss-dark,#0035ac);--color-blue-8:var(--lightningcss-light,#a9cfff)var(--lightningcss-dark,#001a95);--color-blue-9:var(--lightningcss-light,#ddf0ff)var(--lightningcss-dark,#005);--color-blue-transparent:var(--lightningcss-light,#1c69e366)var(--lightningcss-dark,#2370ea80);--color-blue-extra-transparent:var(--lightningcss-light,#1c69e333)var(--lightningcss-dark,#2370ea59);--color-purple-1:var(--lightningcss-light,#170029)var(--lightningcss-dark,#fbe4ff);--color-purple-2:var(--lightningcss-light,#370054)var(--lightningcss-dark,#edc4ff);--color-purple-3:var(--lightningcss-light,#5a0085)var(--lightningcss-dark,#d88eff);--color-purple-4:var(--lightningcss-light,#7819a8)var(--lightningcss-dark,#b864ef);--color-purple-5:var(--lightningcss-light,#9640ca)var(--lightningcss-dark,#9c47d1);--color-purple-6:var(--lightningcss-light,#b562ea)var(--lightningcss-dark,#8127b3);--color-purple-7:var(--lightningcss-light,#ce8dfc)var(--lightningcss-dark,#660095);--color-purple-8:var(--lightningcss-light,#e8b6ff)var(--lightningcss-dark,#4f0076);--color-purple-9:var(--lightningcss-light,#fbe4ff)var(--lightningcss-dark,#23003a);--color-purple-transparent:var(--lightningcss-light,#9640ca66)var(--lightningcss-dark,#9c47d180);--color-purple-extra-transparent:var(--lightningcss-light,#9640ca33)var(--lightningcss-dark,#9c47d159);--color-magenta-1:var(--lightningcss-light,#21000c)var(--lightningcss-dark,#ffe1ef);--color-magenta-2:var(--lightningcss-light,#480023)var(--lightningcss-dark,#ffbdd9);--color-magenta-3:var(--lightningcss-light,#73003d)var(--lightningcss-dark,#ff7db8);--color-magenta-4:var(--lightningcss-light,#9b0058)var(--lightningcss-dark,#ea5096);--color-magenta-5:var(--lightningcss-light,#c32775)var(--lightningcss-dark,#ca2f7b);--color-magenta-6:var(--lightningcss-light,#e45193)var(--lightningcss-dark,#aa0061);--color-magenta-7:var(--lightningcss-light,#fe7cb1)var(--lightningcss-dark,#850048);--color-magenta-8:var(--lightningcss-light,#ffadd0)var(--lightningcss-dark,#660035);--color-magenta-9:var(--lightningcss-light,#ffe1f0)var(--lightningcss-dark,#300015);--color-magenta-transparent:var(--lightningcss-light,#c3277566)var(--lightningcss-dark,#ca2f7b80);--color-magenta-extra-transparent:var(--lightningcss-light,#c3277533)var(--lightningcss-dark,#ca2f7b59);--color-gray-1:var(--lightningcss-light,#090b0f)var(--lightningcss-dark,#ebeff3);--color-gray-2:var(--lightningcss-light,#202226)var(--lightningcss-dark,#d4d8dc);--color-gray-3:var(--lightningcss-light,#383b3f)var(--lightningcss-dark,#b1b4b9);--color-gray-4:var(--lightningcss-light,#53555a)var(--lightningcss-dark,#8f9297);--color-gray-5:var(--lightningcss-light,#6f7276)var(--lightningcss-dark,#75787c);--color-gray-6:var(--lightningcss-light,#8d8f94)var(--lightningcss-dark,#5b5e62);--color-gray-7:var(--lightningcss-light,#abaeb3)var(--lightningcss-dark,#424549);--color-gray-8:var(--lightningcss-light,#cbced3)var(--lightningcss-dark,#303337);--color-gray-9:var(--lightningcss-light,#eceff4)var(--lightningcss-dark,#121417);--color-gray-transparent:var(--lightningcss-light,#6f727666)var(--lightningcss-dark,#75787c80);--color-gray-extra-transparent:var(--lightningcss-light,#6f727633)var(--lightningcss-dark,#75787c59);--color-body:var(--lightningcss-light,#f9fafc)var(--lightningcss-dark,#14161a);--color-body-alt:var(--lightningcss-light,#fff)var(--lightningcss-dark,#010203);--color-body-text:var(--lightningcss-light,#030305)var(--lightningcss-dark,#fff);--color-body-text-alt:var(--lightningcss-light,#404247)var(--lightningcss-dark,#ccced0);--color-shadow:var(--lightningcss-light,#45484c26)var(--lightningcss-dark,#00000166);--color-outline:var(--lightningcss-light,#d8dbe0)var(--lightningcss-dark,#434549);--font-size-xs:clamp(.6944rem,.6855rem + .0446vw,.72rem);--font-size-s:clamp(.8331rem,.8099rem + .1163vw,.9rem);--font-size-m:clamp(1rem,.9565rem + .2174vw,1.125rem);--font-size-l:clamp(1.2rem,1.1283rem + .3587vw,1.4063rem);--font-size-xl:clamp(1.44rem,1.3293rem + .5533vw,1.7581rem);--font-size-2xl:clamp(1.7281rem,1.5649rem + .8163vw,2.1975rem);--font-size-3xl:clamp(2.0738rem,1.8396rem + 1.1707vw,2.7469rem);--font-size-4xl:clamp(2.4881rem,2.1594rem + 1.6435vw,3.4331rem);--font-weight-light:300;--font-weight-normal:400;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-black:900;--font-family-body:"Avenir Next",avenir,"Segoe UI Variable Display","Segoe UI","URW Gothic",source-sans-pro,ui-sans-serif,sans-serif;--font-family-heading:seravek,"Gill Sans Nova","Gill Sans MT",cantarell,"DejaVu Sans",source-sans-pro,ui-sans-serif,sans-serif;--font-family-mono:ui-monospace,"Cascadia Code",menlo,hack,monospace;--space-none:0;--space-3xs:clamp(4px,3.6528px + .1087vw,5px);--space-2xs:clamp(8px,7.6528px + .1087vw,9px);--space-xs:clamp(12px,11.304px + .2174vw,14px);--space-s:clamp(16px,15.304px + .2174vw,18px);--space-m:clamp(24px,22.9568px + .3261vw,27px);--space-l:clamp(32px,30.608px + .4348vw,36px);--space-xl:clamp(48px,45.9136px + .6522vw,54px);--space-2xl:clamp(64px,61.2176px + .8696vw,72px);--space-3xl:clamp(96px,91.8256px + 1.3043vw,108px);--space-body-x:clamp(20px,17.5652px + .7609vw,27px);--space-body-y:20px;--radius-none:0;--radius-s:3px;--radius-m:6px;--radius-l:12px;--radius-xl:24px;--radius-2xl:64px;--radius-full:9999px;--shadow-none:none;--shadow-s:0 1px 3px -1px var(--color-shadow);--shadow-m:0 1px 7px -1px var(--color-shadow);--shadow-l:var(--shadow-s),0 1px 11px -1px var(--color-shadow);--shadow-xl:var(--shadow-m),0 1px 15px -1px var(--color-shadow);--border-none:0;--border-s:1px;--border-m:2px;--border-l:5px;--border-xl:8px;--opacity-disabled:var(--lightningcss-light,.65)var(--lightningcss-dark,.5);--ease-default:cubic-bezier(.6,.22,.45,.9);--ease-out:cubic-bezier(.17,.84,.44,1);--ease-in:cubic-bezier(.7,.1,.8,.65);--ease-both:cubic-bezier(.65,.05,.36,1);--ease-both-subtle:cubic-bezier(.45,.12,.55,.88);--ease-spring:cubic-bezier(.95,-.55,.05,1.55);--duration-short:.1s;--duration-medium:.15s;--duration-long:.25s;--duration-extra-long:.35s}.alert,.banner{font-family:var(--font-family-body);font-size:var(--font-size-m);font-weight:var(--font-weight-normal);color:var(--color-body-text);background:linear-gradient(var(--alert-bg-color),var(--alert-bg-color))padding-box,linear-gradient(to right,var(--alert-border-start-color),var(--alert-border-end-color))border-box;border:var(--border-m)solid transparent;line-height:1.4;display:block;position:relative}:is(.alert,.banner)>*{line-height:1.4}@media print{:is(.alert,.banner){border-color:var(--alert-border-start-color)}}:is(.alert,.banner):before,:is(.alert,.banner):after{content:"";print-color-adjust:exact;width:2em;height:2em;margin-block:auto;position:absolute;inset-block:0}:is(.alert,.banner):before{z-index:2;-webkit-mask-image:var(--alert-icon);mask-image:var(--alert-icon);background-color:var(--alert-border-start-color);scale:.5;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}:is(.alert,.banner):after{z-index:1;border-radius:var(--radius-full);border:3px solid var(--alert-border-start-color);background-color:var(--lightningcss-light,#fffe)var(--lightningcss-dark,#000e);scale:.75}:is(.alert,.banner).error{--alert-bg-color:var(--color-red-9);--alert-border-start-color:var(--color-red-5);--alert-border-end-color:var(--color-red-6);--alert-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='64' d='M368 368L144 144M368 144L144 368' /%3E%3C/svg%3E")}:is(.alert,.banner).warning{--alert-bg-color:var(--color-yellow-9);--alert-border-start-color:var(--color-yellow-5);--alert-border-end-color:var(--color-yellow-6);--alert-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 80c-8.66 0-16.58 7.36-16 16l8 216a8 8 0 008 8h0a8 8 0 008-8l8-216c.58-8.64-7.34-16-16-16z' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='64' /%3E%3Ccircle cx='256' cy='436' r='24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' /%3E%3C/svg%3E")}:is(.alert,.banner).success{--alert-bg-color:var(--color-green-9);--alert-border-start-color:var(--color-green-5);--alert-border-end-color:var(--color-green-6);--alert-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='64' d='M416 128L192 384l-96-96' /%3E%3C/svg%3E")}:is(.alert,.banner).info{--alert-bg-color:var(--color-sky-9);--alert-border-start-color:var(--color-sky-5);--alert-border-end-color:var(--color-sky-6);--alert-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='64' d='M196 220h64v172' /%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='64' d='M187 396h138' /%3E%3Ccircle cx='253 ' cy='118' r='44' /%3E%3C/svg%3E")}.alert-title,.banner-title{font-family:var(--font-family-heading);font-weight:var(--font-weight-bold);color:var(--alert-border-start-color);margin:0;margin-block-end:.15em;font-size:.85em;line-height:1}.modal::backdrop,.drawer::backdrop{--dialog-backdrop-starting-opacity:0;--dialog-backdrop-open-opacity:var(--lightningcss-light,.75)var(--lightningcss-dark,.85);--dialog-backdrop-ending-opacity:0;--dialog-backdrop-color:var(--lightningcss-light,var(--color-gray-2))var(--lightningcss-dark,var(--color-gray-8));background-color:var(--dialog-backdrop-color)}.modal,.drawer{--dialog-starting-opacity:1;--dialog-starting-transform:translateY(8px);--dialog-open-opacity:1;--dialog-open-transform:translate(0);--dialog-ending-opacity:0;--dialog-ending-transform:scale(.97);box-shadow:var(--shadow-xl);border:var(--border-s)solid var(--color-outline);border-radius:var(--radius-l);background-color:var(--color-body-alt);color:var(--color-body-text);flex-direction:column;gap:0;padding:0}@media (prefers-reduced-motion){:is(.modal,.drawer){--dialog-starting-transform:translate(0);--dialog-ending-transform:translate(0)}}:is(.modal,.drawer)[open]{display:flex}.modal-header,.drawer-header{font-family:var(--font-family-heading);font-size:var(--font-size-l);font-weight:var(--font-weight-bold);padding:var(--space-m);color:var(--color-brand-3);flex-shrink:0;justify-content:space-between;align-items:center;margin:0;padding-block-end:var(--space-2xs);line-height:1;display:flex}:is(.modal-header,.drawer-header) h1,:is(.modal-header,.drawer-header) h2,:is(.modal-header,.drawer-header) h3,:is(.modal-header,.drawer-header) h4,:is(.modal-header,.drawer-header) h5,:is(.modal-header,.drawer-header) h6{color:inherit;font-size:inherit;font-weight:inherit;margin:0}:is(.modal-header,.drawer-header) .button.dismiss{--button-fg-color:var(--color-brand-3);--button-hover-bg-color:var(--color-brand-extra-transparent);border-radius:var(--radius-full);width:2.25rem;height:2.25rem;margin:-.5rem;padding:.25rem;font-size:.8rem}:is(.modal-header,.drawer-header) .button.dismiss:is(:focus-visible,.focus){--button-bg-color:var(--color-brand-transparent)}.modal-body,.drawer-body{padding:var(--space-m);flex-shrink:1;margin:0;padding-block-start:var(--space-xs);display:block;overflow:auto}@supports (transition-behavior:allow-discrete) and (overlay:none){.modal,.drawer{animation:unset}}:is(.modal,.drawer)[open]{transform:var(--dialog-open-transform);opacity:var(--dialog-open-opacity);display:flex}:is(.modal,.drawer)[open]::backdrop{opacity:var(--dialog-backdrop-open-opacity)}:is(.modal,.drawer),:is(.modal,.drawer)::backdrop{transition-property:transform,opacity,display,overlay;transition-duration:var(--duration-long);transition-behavior:allow-discrete}:is(.modal,.drawer){transform:var(--dialog-ending-transform);opacity:var(--dialog-ending-opacity);transition-timing-function:var(--ease-out)}:is(.modal,.drawer)::backdrop{opacity:var(--dialog-backdrop-ending-opacity);transition-timing-function:var(--ease-default)}@starting-style{:is(.modal,.drawer)[open]{transform:var(--dialog-starting-transform);opacity:var(--dialog-starting-opacity)}:is(.modal,.drawer)[open]::backdrop{opacity:var(--dialog-backdrop-starting-opacity)}}.button.dismiss{--button-fg-color:var(--color-body-text);--button-bg-color:transparent;--button-border-color:transparent;--button-hover-bg-color:var(--color-gray-extra-transparent);--button-focus-ring-color:transparent;--button-shadow:none;border-radius:var(--radius-m);aspect-ratio:1;width:3em;min-width:0;height:3em;min-height:0;padding:.3em;font-size:.75rem}.button.dismiss:is(:focus-visible,.focus){--button-bg-color:var(--color-gray-transparent);--button-hover-bg-color:transparent}.button.dismiss:before{content:unset}.button.dismiss:is(:hover,.hover){background-color:var(--button-hover-bg-color)}.button.dismiss:after{content:"";background-color:currentColor;width:1.8em;height:1.8em;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M368 368L144 144M368 144L144 368' /%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M368 368L144 144M368 144L144 368' /%3E%3C/svg%3E");-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.accordion{width:100%}.accordion details{background-color:var(--color-body-alt);width:100%;padding-block:0;padding-inline:var(--space-xs);border-radius:var(--radius-m);border:var(--border-s)solid var(--color-outline);box-shadow:var(--shadow-s);font-family:var(--font-family-body);font-size:var(--font-size-m);font-weight:var(--font-weight-normal)}@media (prefers-reduced-motion:no-preference){.accordion details{transition:padding var(--duration-long)var(--ease-out);interpolate-size:allow-keywords}}.accordion details+details{border-block-start:0}.accordion details:not(:first-of-type){border-start-start-radius:0;border-start-end-radius:0}.accordion details:not(:last-of-type){border-end-end-radius:0;border-end-start-radius:0}.accordion details::details-content{opacity:0;block-size:0;transition-property:content-visibility,opacity,block-size;transition-duration:var(--duration-long);transition-timing-function:var(--ease-out);transition-behavior:allow-discrete;overflow-y:clip}.accordion details[open]{padding-block-end:var(--space-xs)}.accordion details[open]::details-content{opacity:1;block-size:auto}.accordion details[open] summary{border-block-end-color:var(--color-outline);margin-block-end:var(--space-xs)}.accordion details[open] summary:before{rotate:none}.accordion details[open] summary:not(:active,.active,:hover,.hover){color:var(--color-brand-3)}.accordion summary{font-family:var(--font-family-heading);font-size:var(--font-size-m);font-weight:var(--font-weight-bold);cursor:pointer;border-block-end:var(--border-s)dashed transparent;padding:var(--space-xs);margin-block:0;margin-inline:calc(-1*var(--space-xs));transition-duration:var(--duration-short);transition-property:color,border-color;transition-timing-function:var(--ease-default);color:var(--color-body-text);-webkit-user-select:none;user-select:none;padding-inline-start:calc(var(--space-xs) + 1em);line-height:1;list-style:none;position:relative}@media (prefers-reduced-motion:no-preference){.accordion summary{transition-property:color,border-color,padding,margin}}.accordion summary:is(:hover,.hover){color:var(--lightningcss-light,var(--color-brand-4))var(--lightningcss-dark,var(--color-brand-2))}.accordion summary:is(:active,.active){color:var(--lightningcss-light,var(--color-brand-2))var(--lightningcss-dark,var(--color-brand-4))}.accordion summary::-webkit-details-marker{display:none}.accordion summary:before{content:var(--lightningcss-light,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9l6 6l6-6' /%3E%3C/svg%3E"))var(--lightningcss-dark,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9l6 6l6-6' /%3E%3C/svg%3E"));width:1em;height:1em;transition:rotate var(--duration-long)var(--ease-spring);margin:auto;display:inline-block;position:absolute;inset-block:0;inset-inline-start:calc(var(--space-xs)/2);rotate:-90deg}.accordion summary:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)):before{rotate:90deg}@media (prefers-reduced-motion){.accordion summary{transition-property:color,border-color}.accordion summary:before{transition:none}}.accordion.subtle details{box-shadow:none;background-color:#0000;border:0;padding-inline-start:calc(var(--space-xs) + 1em)}.accordion.subtle details[open] summary{margin-block-end:var(--space-3xs)}.accordion.subtle summary{padding-block:var(--space-2xs);border-block-end:0;margin-inline-start:calc(-1*(var(--space-xs) + 1em))}.alert{border-radius:var(--radius-s);padding:var(--space-2xs);border-start-start-radius:calc(var(--space-2xs) + 2em);border-end-start-radius:calc(var(--space-2xs) + 2em);padding-inline-start:calc(var(--space-2xs) + 2em)}.alert:before,.alert:after{inset-inline-start:calc(var(--space-2xs)*.5)}.app{--app-max-content-width:110rem;--app-header-height:clamp(50px,3.8rem,100px);--app-sidebar-width:clamp(300px,18rem,450px);width:100%;min-height:100svh;font-family:var(--font-family-body);font-size:var(--font-size-m);flex-direction:column;display:flex;position:relative}.app-header{height:var(--app-header-height);width:100%;color:var(--color-brand-3);background-color:var(--color-body-alt);border-bottom:var(--border-l)solid var(--color-brand-transparent);box-shadow:var(--shadow-s);flex:none;position:sticky;left:0}.app-header-content{width:100%;height:100%;max-width:var(--app-max-content-width);padding-inline:calc(var(--space-body-x) - var(--space-xs));justify-content:space-between;align-items:center;gap:var(--space-s);margin-inline:auto;padding-block:6px;display:flex}.app-header-section{align-items:center;height:100%;margin:0;display:flex}.app-header-section:only-child{margin-inline:auto}.app-header-section:first-child{margin-inline-end:auto}.app-header-section:nth-child(n+3):before{content:"";background-color:var(--color-outline);height:2rem;width:var(--border-s);right:calc(var(--space-s)/2);position:relative}.app-header-item{cursor:pointer;height:100%;color:inherit;transition-property:color,background-color;transition-duration:var(--duration-short);transition-timing-function:var(--ease-default);font-size:1rem;font-weight:var(--font-weight-semibold);padding-inline:var(--space-xs);border-radius:var(--radius-m);align-items:center;text-decoration:none;display:flex;position:relative}.app-header-item:hover{background-color:var(--color-brand-extra-transparent)}.app-header-item:active{background-color:var(--color-brand-transparent)}.app-header-item:focus-visible{background-color:var(--color-brand-extra-transparent);outline-offset:calc(-1*var(--border-m))}.app-header-item:is([aria-current],.current){font-weight:var(--font-weight-bold)}.app-header-item:is([aria-current],.current):after{opacity:1}.app-header-item:after{content:"";width:100%;height:var(--border-l);bottom:calc(-1*(var(--border-l) + 6px));opacity:0;background-color:currentColor;border-radius:1px;position:absolute;left:0}.app-icon{background-color:var(--color-brand-3);border:var(--border-m)solid transparent;border-radius:var(--radius-full);width:2rem;height:2rem}.app-title-separator{content:"";background-color:var(--color-brand-transparent);width:var(--border-m);height:1.5rem;margin-inline:var(--space-2xs);position:relative;left:1px;rotate:22deg}.app-title{font-family:var(--font-family-heading);align-items:center;font-size:1.2rem;display:flex}.app-body{width:100%;max-width:var(--app-max-content-width);flex-direction:row;flex:none;margin-inline:auto;display:flex;position:relative}.app-sidebar{transition-property:opacity,display;transition-duration:var(--duration-medium);transition-timing-function:var(--ease-default);transition-behavior:allow-discrete;width:var(--app-sidebar-width);opacity:1;border-inline-end:var(--border-s)dashed var(--color-outline);flex:none}.app-sidebar-content{height:100dvh;position:sticky;top:0;overflow:auto}.app-sidebar-section:first-of-type{margin-block-start:var(--space-body-y)}.app-sidebar-section:not(:last-of-type){margin-block-end:var(--space-xs)}.app-sidebar-section:last-of-type{margin-block-end:var(--space-body-y)}.app-sidebar-heading{margin:0 var(--space-body-x)var(--space-3xs);font-size:1.2rem;font-family:var(--font-family-heading);font-weight:var(--font-weight-semibold)}.app-sidebar-item{margin:0 var(--space-2xs);padding:var(--space-2xs)calc(var(--space-body-x) - var(--space-2xs));border-radius:var(--radius-l);color:var(--color-body-text-alt);font-weight:var(--font-weight-normal);-webkit-user-select:none;user-select:none;transition-property:color,background-color,box-shadow;transition-duration:var(--duration-short);transition-timing-function:var(--ease-default);font-size:1rem;text-decoration:none;display:block}.app-sidebar-item:hover{background-color:var(--color-brand-extra-transparent)}.app-sidebar-item:active{color:var(--color-brand-1)}.app-sidebar-item:is([aria-current],.current){color:var(--color-brand-4);font-weight:var(--font-weight-bold)}.app-sidebar-item:hover:active{background-color:var(--color-brand-transparent)}.app-sidebar-item:focus-visible{outline-offset:0;background-color:var(--color-brand-extra-transparent)}.app-sidebar-toggle{width:2.75rem}.app-sidebar-toggle:has(input:focus-visible){background-color:var(--color-brand-extra-transparent);outline:var(--border-m)solid var(--color-brand-5);outline-offset:calc(-1*var(--border-m))}.app-sidebar-toggle>div{transition-property:transform,opacity;transition-duration:var(--duration-long);transition-timing-function:var(--ease-out);opacity:1;background-color:currentColor;border-radius:2px;width:1.75rem;height:2px;position:absolute;top:50%;left:50%}.app-sidebar-toggle>div:first-of-type{transform:translateY(calc(-50% - .45rem))translate(-50%)}.app-sidebar-toggle>div:nth-of-type(2){transform:translateY(-50%)translate(-50%)}.app-sidebar-toggle>div:nth-of-type(3){transform:translateY(calc(.45rem - 50%))translate(-50%)}.app-sidebar-toggle:has(input:checked)>div:first-of-type{transform:translateY(-50%)translate(-50%)rotate(45deg)}.app-sidebar-toggle:has(input:checked)>div:nth-of-type(2){opacity:0;transform:translateY(-50%)translate(-50%)rotateY(90deg)}.app-sidebar-toggle:has(input:checked)>div:nth-of-type(3){transform:translateY(-50%)translate(-50%)rotate(-45deg)}.app-content{width:100%;padding:var(--space-body-y)var(--space-body-x);position:relative}.app-sidebar~.app-content{width:calc(100% - var(--app-sidebar-width))}.app-header-section:has(.app-sidebar-toggle){display:none}@media (max-width:calc(55rem - .001px)){.app-sidebar~.app-content{width:100%}.app-sidebar{top:var(--app-header-height);opacity:1;-webkit-backdrop-filter:blur(24px)saturate(120%);backdrop-filter:blur(24px)saturate(120%);z-index:9;background-color:var(--lightningcss-light,#fffc)var(--lightningcss-dark,#000a);border-right:0;width:100vw;position:fixed;left:0}.app-sidebar:after{content:initial}.app-header-section:has(.app-sidebar-toggle){display:flex}.app-sidebar-content{height:calc(100dvh - var(--app-header-height))}.app:not(:has(.app-sidebar-toggle input:checked)) .app-sidebar{opacity:0;display:none}.app:has(.app-sidebar-toggle input:checked){overflow:hidden}.app:has(.app-sidebar-toggle input:checked)>.banner{display:none}.app:has(.app-sidebar-toggle input:checked) .app-header{z-index:10;position:fixed;top:0}.app:has(.app-sidebar-toggle input:checked) .app-content{top:var(--app-header-height)}}.app:has(dialog:modal){overflow:hidden}@starting-style{.app>.sidebar{opacity:0}}.banner{width:100%;padding:var(--space-xs)var(--space-body-x);border-inline-width:0;padding-inline-start:calc(var(--space-body-x) + 2em)}.banner:has(.button.dismiss){padding-inline-end:calc(var(--space-body-x) + 2em)}.banner:before,.banner:after{inset-inline-start:calc(var(--space-body-x)*.5)}.banner+.banner{border-block-start-width:0}.banner.error{--banner-dismiss-icon-color:var(--color-red-4);--banner-dismiss-hover-bg:var(--color-red-extra-transparent);--banner-dismiss-focus-bg:var(--color-red-transparent)}.banner.warning{--banner-dismiss-icon-color:var(--color-yellow-4);--banner-dismiss-hover-bg:var(--color-yellow-extra-transparent);--banner-dismiss-focus-bg:var(--color-yellow-transparent)}.banner.success{--banner-dismiss-icon-color:var(--color-green-4);--banner-dismiss-hover-bg:var(--color-green-extra-transparent);--banner-dismiss-focus-bg:var(--color-green-transparent)}.banner.info{--banner-dismiss-icon-color:var(--color-sky-4);--banner-dismiss-hover-bg:var(--color-sky-extra-transparent);--banner-dismiss-focus-bg:var(--color-sky-transparent)}.banner .button.dismiss{--button-fg-color:var(--banner-dismiss-icon-color);--button-hover-bg-color:var(--banner-dismiss-hover-bg);margin:auto;position:absolute;inset-block:0;inset-inline-end:calc(var(--space-body-x)*.5)}.banner .button.dismiss:is(:focus-visible,.focus){--button-bg-color:var(--banner-dismiss-focus-bg)}.button{--button-fg-color:var(--color-body-text);--button-bg-color:var(--color-gray-9);--button-border-color:var(--color-gray-8);--button-font-weight:var(--font-weight-normal);--button-focus-ring-color:var(--color-gray-extra-transparent);--button-shadow:var(--shadow-s);--button-hover-bg-color:var(--button-border-color);box-sizing:border-box;transition-property:box-shadow,background-color,transform,opacity;transition-duration:var(--duration-medium);transition-timing-function:var(--ease-default);cursor:pointer;border-style:solid;border-width:var(--border-s);border-radius:var(--radius-m);min-width:3em;min-height:2.6em;line-height:1;font-family:var(--font-family-body);box-shadow:var(--button-shadow);-webkit-user-select:none;user-select:none;color:var(--button-fg-color);background-color:var(--button-bg-color);border-color:var(--button-border-color);font-size:1rem;font-weight:var(--button-font-weight);outline:0;justify-content:center;align-items:center;gap:.625em;padding-block:.75em;padding-inline:1.25em;text-decoration:none;display:inline-flex;position:relative;overflow:hidden;transform:scale(1)}.button:before{content:"";background-color:var(--button-hover-bg-color);transition-property:opacity,width,height,border-radius;transition-duration:var(--duration-medium);transition-timing-function:var(--ease-default);z-index:-1;opacity:0;border-radius:2em;width:4em;height:4em;margin:auto;position:absolute;inset:0}.button:is(:focus-visible,.focus){box-shadow:var(--button-shadow),0 0 0 .1em var(--button-border-color),0 0 0 calc(.2em + var(--border-s))var(--button-focus-ring-color)}.button:is(:active,.active){transform:scale(.98)}@media screen and (-webkit-max-device-pixel-ratio:1.999),screen and (max-resolution:1.999dppx){.button:is(:active,.active){transform:translateY(1px)}}.button:is(:hover,.hover){text-decoration:none}.button:is(:hover,.hover):before{opacity:1;border-radius:5px;width:100%;height:100%}.button:is(:hover,.hover):is(input){background-color:var(--button-hover-bg-color)}.button.primary{--button-fg-color:white;--button-bg-color:var(--color-brand-5);--button-border-color:var(--color-brand-4);--button-font-weight:var(--font-weight-bold);--button-focus-ring-color:var(--color-brand-transparent)}.button.primary.red{--button-bg-color:var(--color-red-5);--button-border-color:var(--color-red-4);--button-focus-ring-color:var(--color-red-transparent)}.button.primary.orange{--button-bg-color:var(--color-orange-5);--button-border-color:var(--color-orange-4);--button-focus-ring-color:var(--color-orange-transparent)}.button.primary.yellow{--button-bg-color:var(--color-yellow-5);--button-border-color:var(--color-yellow-4);--button-focus-ring-color:var(--color-yellow-transparent)}.button.primary.green{--button-bg-color:var(--color-green-5);--button-border-color:var(--color-green-4);--button-focus-ring-color:var(--color-green-transparent)}.button.primary.sky{--button-bg-color:var(--color-sky-5);--button-border-color:var(--color-sky-4);--button-focus-ring-color:var(--color-sky-transparent)}.button.primary.blue{--button-bg-color:var(--color-blue-5);--button-border-color:var(--color-blue-4);--button-focus-ring-color:var(--color-blue-transparent)}.button.primary.purple{--button-bg-color:var(--color-purple-5);--button-border-color:var(--color-purple-4);--button-focus-ring-color:var(--color-purple-transparent)}.button.primary.magenta{--button-bg-color:var(--color-magenta-5);--button-border-color:var(--color-magenta-4);--button-focus-ring-color:var(--color-magenta-transparent)}.button.primary.gray{--button-bg-color:var(--color-gray-5);--button-border-color:var(--color-gray-4);--button-focus-ring-color:var(--color-gray-transparent)}.button.primary.black{--button-bg-color:black;--button-border-color:#3d3d3d;--button-focus-ring-color:var(--color-gray-transparent)}.button.primary.white{--button-fg-color:black;--button-bg-color:white;--button-border-color:#d0d0d0;--button-focus-ring-color:var(--color-gray-transparent)}.button.subtle{--button-fg-color:var(--color-brand-4);--button-bg-color:transparent;--button-border-color:transparent;--button-hover-bg-color:var(--color-brand-extra-transparent);--button-font-weight:var(--font-weight-bold);--button-focus-ring-color:transparent;--button-shadow:none}.button.subtle:is(:focus-visible,.focus){--button-bg-color:var(--color-brand-transparent);--button-hover-bg-color:transparent}.button.subtle.red{--button-fg-color:var(--color-red-4);--button-hover-bg-color:var(--color-red-extra-transparent)}.button.subtle.red:is(:focus-visible,.focus){--button-bg-color:var(--color-red-transparent)}.button.subtle.orange{--button-fg-color:var(--color-orange-4);--button-hover-bg-color:var(--color-orange-extra-transparent)}.button.subtle.orange:is(:focus-visible,.focus){--button-bg-color:var(--color-orange-transparent)}.button.subtle.yellow{--button-fg-color:var(--color-yellow-4);--button-hover-bg-color:var(--color-yellow-extra-transparent)}.button.subtle.yellow:is(:focus-visible,.focus){--button-bg-color:var(--color-yellow-transparent)}.button.subtle.green{--button-fg-color:var(--color-green-4);--button-hover-bg-color:var(--color-green-extra-transparent)}.button.subtle.green:is(:focus-visible,.focus){--button-bg-color:var(--color-green-transparent)}.button.subtle.sky{--button-fg-color:var(--color-sky-4);--button-hover-bg-color:var(--color-sky-extra-transparent)}.button.subtle.sky:is(:focus-visible,.focus){--button-bg-color:var(--color-sky-transparent)}.button.subtle.blue{--button-fg-color:var(--color-blue-4);--button-hover-bg-color:var(--color-blue-extra-transparent)}.button.subtle.blue:is(:focus-visible,.focus){--button-bg-color:var(--color-blue-transparent)}.button.subtle.purple{--button-fg-color:var(--color-purple-4);--button-hover-bg-color:var(--color-purple-extra-transparent)}.button.subtle.purple:is(:focus-visible,.focus){--button-bg-color:var(--color-purple-transparent)}.button.subtle.magenta{--button-fg-color:var(--color-magenta-4);--button-hover-bg-color:var(--color-magenta-extra-transparent)}.button.subtle.magenta:is(:focus-visible,.focus){--button-bg-color:var(--color-magenta-transparent)}.button.subtle.gray,.button.subtle.black,.button.subtle.white{--button-hover-bg-color:var(--color-gray-extra-transparent)}:is(.button.subtle.gray,.button.subtle.black,.button.subtle.white):is(:focus-visible,.focus){--button-bg-color:var(--color-gray-transparent)}.button.subtle.gray{--button-fg-color:var(--color-gray-4)}.button.subtle.black{--button-fg-color:black}.button.subtle.white{--button-fg-color:white}.button.small{font-size:.8rem}.button.large{font-size:1.2rem}.button.icon{border-radius:var(--radius-full);aspect-ratio:1;min-width:0;min-height:0;padding:.5em}.button.icon.subtle:before{width:75%;height:75%}.button.icon.subtle:is(:hover,.hover):before{border-radius:100%;width:100%;height:100%}.button.icon:not(.subtle):before{content:unset}.button.icon:not(.subtle):is(:hover,.hover){background-color:var(--button-hover-bg-color)}.button:is(:disabled,.disabled,[aria-disabled=true]){opacity:var(--opacity-disabled);cursor:not-allowed;transform:scale(1)}.button:is(:disabled,.disabled,[aria-disabled=true]):is(:hover,.hover):before{opacity:0}.button.loading{cursor:progress}.button.loading:before{animation:button-loading-bg 1.2s var(--ease-both-subtle)infinite forwards;opacity:1!important;border-radius:inherit!important;height:100%!important}.button.loading:is(:disabled,.disabled,[aria-disabled=true]){cursor:wait}@keyframes button-loading-bg{0%{width:0;margin:0 auto 0 0}50%{width:100%}to{width:0;margin:0 0 0 auto}}.chip{--chip-fg-color:white;--chip-bg-color:var(--color-brand-6);--chip-border-color:var(--color-brand-5);--chip-focus-color:var(--color-brand-transparent);border-radius:var(--radius-full);font-size:var(--font-size-s);font-family:var(--font-family-body);font-weight:var(--font-weight-normal);padding-block:var(--space-3xs);padding-inline:var(--space-xs);background-color:var(--chip-bg-color);border:var(--border-s)solid var(--chip-border-color);color:var(--chip-fg-color);cursor:default;transition-property:box-shadow,background-color,border-color,transform;transition-duration:var(--duration-medium);transition-timing-function:var(--ease-default);appearance:none;flex-shrink:0;align-items:center;line-height:1.2;text-decoration:none;display:inline-flex}.chip.clickable{cursor:pointer;box-shadow:var(--shadow-s);transform:scale(1)}.chip.clickable:is(:focus-visible,.focus){box-shadow:var(--shadow-s),0 0 0 .1em var(--chip-border-color),0 0 0 calc(.2em + var(--border-s))var(--chip-focus-color);outline:0}.chip.clickable:is(:hover,.hover){background-color:var(--chip-border-color)}.chip.clickable:is(:active,.active){transform:scale(.96)}@media screen and (-webkit-max-device-pixel-ratio:1.999),screen and (max-resolution:1.999dppx){.chip.clickable:is(:active,.active){transform:translateY(1px)}}.chip.red{--chip-bg-color:var(--color-red-6);--chip-border-color:var(--color-red-5);--chip-focus-color:var(--color-red-transparent)}.chip.orange{--chip-bg-color:var(--color-orange-6);--chip-border-color:var(--color-orange-5);--chip-focus-color:var(--color-orange-transparent)}.chip.yellow{--chip-bg-color:var(--color-yellow-6);--chip-border-color:var(--color-yellow-5);--chip-focus-color:var(--color-yellow-transparent)}.chip.green{--chip-bg-color:var(--color-green-6);--chip-border-color:var(--color-green-5);--chip-focus-color:var(--color-green-transparent)}.chip.sky{--chip-bg-color:var(--color-sky-6);--chip-border-color:var(--color-sky-5);--chip-focus-color:var(--color-sky-transparent)}.chip.blue{--chip-bg-color:var(--color-blue-6);--chip-border-color:var(--color-blue-5);--chip-focus-color:var(--color-blue-transparent)}.chip.purple{--chip-bg-color:var(--color-purple-6);--chip-border-color:var(--color-purple-5);--chip-focus-color:var(--color-purple-transparent)}.chip.magenta{--chip-bg-color:var(--color-magenta-6);--chip-border-color:var(--color-magenta-5);--chip-focus-color:var(--color-magenta-transparent)}.chip.gray{--chip-bg-color:var(--color-gray-6);--chip-border-color:var(--color-gray-5);--chip-focus-color:var(--color-gray-transparent)}.chip.black{--chip-bg-color:black;--chip-border-color:#3d3d3d;--chip-focus-color:var(--color-gray-transparent)}.chip.white{--chip-fg-color:black;--chip-bg-color:white;--chip-border-color:#d0d0d0;--chip-focus-color:var(--color-gray-transparent)}.chip-delete{margin-inline:var(--space-3xs)calc(-1*var(--space-2xs));border-radius:var(--radius-full);transition-property:background-color,outline-color,filter;transition-duration:var(--duration-short);transition-timing-function:var(--ease-default);cursor:pointer;-webkit-user-select:none;user-select:none;background-color:var(--chip-border-color);width:2em;height:2em;box-shadow:none;border:0;outline:1px solid #0000;padding:0;font-size:.6em;display:inline-flex;position:relative;overflow:hidden}.chip-delete:after{content:"";background-color:var(--chip-fg-color);width:1.7em;height:1.7em;margin:auto;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M368 368L144 144M368 144L144 368' /%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M368 368L144 144M368 144L144 368' /%3E%3C/svg%3E");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.chip-delete:is(:focus-visible,.focus){outline-color:var(--chip-fg-color)}.chip-delete:is(:hover,.hover){background-color:hsl(from var(--chip-border-color)h s calc(l + 5))}.chip-delete:is(:active,.active){background-color:hsl(from var(--chip-border-color)h s calc(l - 20))}.divider,:where(.style-semantic-elements hr,.style-semantic-elements br){--divider-thickness:var(--border-s);border-style:solid;border-color:var(--color-outline);border-width:0;border-top-width:var(--divider-thickness);margin:var(--space-xs)0;print-color-adjust:exact;outline:0;width:100%;height:0;display:block;position:relative}:is(.divider,:where(.style-semantic-elements hr,.style-semantic-elements br)).vertical{border-top-width:0;border-left-width:var(--divider-thickness);margin:auto var(--space-xs);width:0;height:100%;min-height:1em;display:inline-block}.divider.invisible,:where(.style-semantic-elements br){visibility:hidden}.divider.thick{--divider-thickness:var(--border-m)}.divider.thicker{--divider-thickness:var(--border-l)}.divider.dashed{border-style:dashed}.divider.dotted{border-style:dotted}.drawer{--dialog-starting-opacity:1;--dialog-ending-opacity:1;border:0;border-radius:0;margin:0;position:fixed;inset:0;overflow:auto;transition-duration:var(--duration-extra-long)!important}.drawer.left{right:auto}@media (prefers-reduced-motion:no-preference){.drawer.left{--dialog-starting-transform:translateX(-100%);--dialog-ending-transform:translateX(-100%)}}.drawer.top{bottom:auto}@media (prefers-reduced-motion:no-preference){.drawer.top{--dialog-starting-transform:translateY(-100%);--dialog-ending-transform:translateY(-100%)}}.drawer.right{left:auto}@media (prefers-reduced-motion:no-preference){.drawer.right{--dialog-starting-transform:translateX(100%);--dialog-ending-transform:translateX(100%)}}.drawer.bottom{top:auto}@media (prefers-reduced-motion:no-preference){.drawer.bottom{--dialog-starting-transform:translateY(100%);--dialog-ending-transform:translateY(100%)}}.drawer.top,.drawer.bottom{width:100dvw;max-width:unset;height:auto;min-height:min(100dvh,16rem);max-height:100dvh}:is(.drawer.top,.drawer.bottom).small{height:18rem}:is(.drawer.top,.drawer.bottom).medium{height:28rem}:is(.drawer.top,.drawer.bottom).large{height:38rem}.drawer.left,.drawer.right{height:100dvh;max-height:unset;width:auto;min-width:min(100dvw,18rem);max-width:100dvw}:is(.drawer.left,.drawer.right).small{width:22rem}:is(.drawer.left,.drawer.right).medium{width:32rem}:is(.drawer.left,.drawer.right).large{width:42rem}.drawer-body{height:100%}.drawer-footer{padding:var(--space-xs);gap:var(--space-xs);flex-shrink:0;justify-content:flex-start;margin:0;margin-block-start:auto;display:flex}.drawer-footer>*{width:100%}.field{--field-gap:var(--space-2xs);--field-padding:.5em;--field-radius:var(--radius-m);gap:var(--field-gap);color:var(--color-body-text);line-height:1;font-weight:var(--font-weight-semibold);transition-property:color,box-shadow;transition-duration:var(--duration-medium);transition-timing-function:var(--ease-default);font-size:var(--font-size-m);font-family:var(--font-family-body);flex-direction:column;display:inline-flex}.field.compact,.fieldset.compact .field{--field-gap:calc(.9*var(--space-2xs));--field-padding:.33em;--field-radius:var(--radius-s);font-size:calc(.9*var(--font-size-m))}.field:focus-within{color:var(--color-brand-5)}.field:has(:user-invalid,[aria-invalid=true]){color:var(--color-red-5)}.field:has(:user-invalid,[aria-invalid=true]) .error-message{display:flex}.field:has([readonly]):focus-within{color:var(--color-gray-5)}.field input:not([type=button],[type=checkbox],[type=file],[type=hidden],[type=image],[type=radio],[type=range],[type=reset],[type=submit]),.field select,.field textarea{color:var(--color-body-text);border:var(--border-s)solid var(--color-outline);padding:var(--field-padding);border-radius:var(--field-radius);transition-property:color,box-shadow,border-color;transition-duration:var(--duration-medium);transition-timing-function:var(--ease-default);background-color:var(--lightningcss-light,#fff)var(--lightningcss-dark,#000);font-family:inherit;font-size:1em;line-height:1.25}:is(.field input:not([type=button],[type=checkbox],[type=file],[type=hidden],[type=image],[type=radio],[type=range],[type=reset],[type=submit]),.field select,.field textarea):focus{border-color:var(--color-brand-5);box-shadow:0 0 0 .1em var(--color-brand-5),0 0 0 calc(.2em + var(--border-s))var(--color-brand-transparent);outline:0}:is(.field input:not([type=button],[type=checkbox],[type=file],[type=hidden],[type=image],[type=radio],[type=range],[type=reset],[type=submit]),.field select,.field textarea):focus-visible{outline:0}:is(.field input:not([type=button],[type=checkbox],[type=file],[type=hidden],[type=image],[type=radio],[type=range],[type=reset],[type=submit]),.field select,.field textarea):disabled{opacity:var(--opacity-disabled);cursor:not-allowed}:is(.field input:not([type=button],[type=checkbox],[type=file],[type=hidden],[type=image],[type=radio],[type=range],[type=reset],[type=submit]),.field select,.field textarea)[readonly]{border-style:dashed}:is(.field input:not([type=button],[type=checkbox],[type=file],[type=hidden],[type=image],[type=radio],[type=range],[type=reset],[type=submit]),.field select,.field textarea)[readonly]:focus{border-style:solid;border-color:var(--color-gray-5);box-shadow:0 0 0 .1em var(--color-gray-5),0 0 0 calc(.2em + var(--border-s))var(--color-gray-transparent);outline:0}:is(:is(.field input:not([type=button],[type=checkbox],[type=file],[type=hidden],[type=image],[type=radio],[type=range],[type=reset],[type=submit]),.field select,.field textarea):user-invalid,:is(.field input:not([type=button],[type=checkbox],[type=file],[type=hidden],[type=image],[type=radio],[type=range],[type=reset],[type=submit]),.field select,.field textarea)[aria-invalid=true]){border-color:var(--color-red-5);box-shadow:0 0 0 .1em var(--color-red-5)}:is(:is(.field input:not([type=button],[type=checkbox],[type=file],[type=hidden],[type=image],[type=radio],[type=range],[type=reset],[type=submit]),.field select,.field textarea):user-invalid,:is(.field input:not([type=button],[type=checkbox],[type=file],[type=hidden],[type=image],[type=radio],[type=range],[type=reset],[type=submit]),.field select,.field textarea)[aria-invalid=true]):focus{border-color:var(--color-red-5);box-shadow:0 0 0 .1em var(--color-red-5),0 0 0 calc(.2em + var(--border-s))var(--color-red-transparent);outline:0}.field input[type=color]{cursor:pointer;block-size:auto;inline-size:auto}.field input[type=color]::-webkit-color-swatch-wrapper{padding:0}.field input[type=color]::-webkit-color-swatch{border-radius:var(--radius-s);border:0;block-size:1.25em;inline-size:100%}.field input[type=color]::-moz-color-swatch{border-radius:var(--radius-s);border:0;block-size:1.25em;inline-size:100%}.field select,.field input[list]{background-image:var(--lightningcss-light,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='m6 9l6 6l6-6' /%3E%3C/svg%3E"))var(--lightningcss-dark,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='m6 9l6 6l6-6' /%3E%3C/svg%3E"));appearance:none;background-position:right .25em center;background-repeat:no-repeat;background-size:auto 75%;padding-inline-end:calc(2*var(--space-2xs) + 1em)}:is(.field select,.field input[list]):is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){background-position:.25em 50%}.field select{cursor:pointer}.field .help-text{color:var(--color-body-text-alt);font-size:.9em;font-weight:var(--font-weight-normal);margin:-.25em 0 0;position:relative}.field .error-message{font-size:.9em;font-weight:var(--font-weight-semibold);border:0;align-items:center;gap:2px;margin:0;padding:0;display:none}.field .error-message:before{content:"";background-color:currentColor;width:1.2em;height:1.2em;display:inline-block;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm75.31 260.69a16 16 0 11-22.62 22.62L256 278.63l-52.69 52.68a16 16 0 01-22.62-22.62L233.37 256l-52.68-52.69a16 16 0 0122.62-22.62L256 233.37l52.69-52.68a16 16 0 0122.62 22.62L278.63 256z' /%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm75.31 260.69a16 16 0 11-22.62 22.62L256 278.63l-52.69 52.68a16 16 0 01-22.62-22.62L233.37 256l-52.68-52.69a16 16 0 0122.62-22.62L256 233.37l52.69-52.68a16 16 0 0122.62 22.62L278.63 256z' /%3E%3C/svg%3E");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.field .input-group{flex-direction:row;align-items:stretch;display:flex}.field .input-group>*{z-index:1;border-radius:0!important}.field .input-group>:is(:user-invalid,[aria-invalid=true]){z-index:2}.field .input-group>:first-child{border-start-start-radius:var(--field-radius)!important;border-end-start-radius:var(--field-radius)!important}.field .input-group>:last-child{border-start-end-radius:var(--field-radius)!important;border-end-end-radius:var(--field-radius)!important}.field .input-group>:focus-visible{z-index:3}.field .input-group>:is(.prefix,.suffix,.action){-webkit-user-select:none;user-select:none;-webkit-user-drag:none;font-weight:var(--font-weight-normal);color:var(--color-gray-3);background-color:var(--color-gray-9);border:var(--border-s)solid var(--color-outline);padding:var(--field-padding)calc(2*var(--field-padding));justify-content:center;align-items:center;font-size:.9em;display:flex}.field .input-group>:is(.prefix,.suffix,.action) :is(img,svg){width:auto;height:1.15em}.field .input-group>.prefix{border-inline-end:0}.field .input-group>.suffix{border-inline-start:0}.field .input-group>.action{cursor:pointer;color:var(--color-brand-3);transition-property:box-shadow,background-color;transition-duration:var(--duration-medium);transition-timing-function:var(--ease-default);border-inline-start:0}.field .input-group>.action:hover{background-color:var(--color-gray-8)}.field .input-group>.action:active{background-color:var(--color-gray-7)}.field .input-group>.action:focus-visible{border-color:var(--color-brand-5);border-inline-start-width:var(--border-s);box-shadow:0 0 0 .11em var(--color-brand-5),0 0 0 calc(.22em + var(--border-s))var(--color-brand-transparent);border-inline-start-style:solid;outline:0}.field .input-group>:is(input,select,textarea){width:100%}.field .input-group>:is(input,select,textarea):has(~.action:focus-visible){border-inline-end-width:0}input[type=checkbox],input[type=radio]{accent-color:var(--color-brand-5)}fieldset.fieldset{border:var(--border-s)solid var(--color-outline);border-radius:var(--radius-s);background-color:var(--color-body);color:var(--color-body-text)}fieldset.fieldset legend{font-family:var(--font-family-heading);font-weight:var(--font-weight-bold);transition:color var(--duration-medium)var(--ease-default)}fieldset.fieldset:focus-within legend{color:var(--color-brand-5)}.form{max-width:60ch;margin-inline-end:auto}.flow,.stack,.separate,.space{gap:var(--space-s);display:flex!important}:is(.flow,.stack,.separate,.space).no-gap{gap:var(--space-none)}:is(.flow,.stack,.separate,.space).densest{gap:var(--space-3xs)}:is(.flow,.stack,.separate,.space).denser{gap:var(--space-2xs)}:is(.flow,.stack,.separate,.space).dense{gap:var(--space-xs)}:is(.flow,.stack,.separate,.space).sparse{gap:var(--space-m)}:is(.flow,.stack,.separate,.space).sparser{gap:var(--space-l)}:is(.flow,.stack,.separate,.space).sparsest{gap:var(--space-xl)}:is(.flow,.stack,.separate,.space).horizontal,:is(.flow,.stack,.separate,.space).horizontally{flex-direction:row}:is(.flow,.stack,.separate,.space).vertical,:is(.flow,.stack,.separate,.space).vertically{flex-direction:column}.flow{flex-wrap:wrap;justify-content:start;align-items:center}.stack{flex-wrap:nowrap;justify-content:start;align-items:stretch}.separate{flex-wrap:nowrap;justify-content:space-between;align-items:center}.space{flex-wrap:wrap;justify-content:space-evenly;align-items:center}.heading-1,.heading-2,.heading-3,.heading-4,.heading-5,.heading-6,:where(.style-semantic-elements :is(h1,h2,h3,h4,h5,h6)){font-family:var(--font-family-heading);text-wrap:balance;overflow-wrap:break-word;margin-block:.75em .3em;line-height:1.15}.heading-1,:where(.style-semantic-elements h1){font-size:var(--font-size-4xl);font-weight:var(--font-weight-black);margin-block-start:0}.app-content>:is(.heading-1,:where(.style-semantic-elements h1)):first-of-type{margin-block-start:0}.heading-2,:where(.style-semantic-elements h2){font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold)}.heading-3,:where(.style-semantic-elements h3){font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold)}.heading-4,:where(.style-semantic-elements h4){font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold)}.heading-5,:where(.style-semantic-elements h5){font-size:var(--font-size-l);font-weight:var(--font-weight-semibold)}.heading-6,:where(.style-semantic-elements h6){font-size:var(--font-size-m);font-weight:var(--font-weight-bold)}.highlight,:where(.style-semantic-elements mark){background-color:var(--color-yellow-8);color:var(--color-yellow-1);print-color-adjust:exact}.highlight.removed,:where(.style-semantic-elements del){background-color:var(--color-red-8);color:var(--color-red-1);transition:text-decoration-color var(--duration-short)var(--ease-default);-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;text-decoration-line:line-through;text-decoration-thickness:var(--border-m);-webkit-text-decoration-color:var(--color-red-4);text-decoration-color:var(--color-red-4);print-color-adjust:exact}:is(.highlight.removed,:where(.style-semantic-elements del)):hover{text-decoration-color:#0000}.highlight.added,:where(.style-semantic-elements ins){background-color:var(--color-green-8);color:var(--color-green-1);text-decoration-thickness:var(--border-m);-webkit-text-decoration-color:var(--color-green-4);text-decoration-color:var(--color-green-4);text-underline-offset:.1em;print-color-adjust:exact}.highlight.target{background-color:var(--color-brand-8);color:var(--color-brand-1);print-color-adjust:exact}::target-text{background-color:var(--color-brand-8);color:var(--color-brand-1);print-color-adjust:exact}.link,.card-title[href],:where(.style-semantic-elements a){color:var(--color-sky-4);font-weight:var(--font-weight-semibold);text-decoration-line:underline;-webkit-text-decoration-color:var(--color-sky-transparent);text-decoration-color:var(--color-sky-transparent);-webkit-text-decoration-skip-ink:all;text-decoration-skip-ink:all;text-underline-offset:.1em;cursor:pointer;transition:text-decoration-color var(--duration-short)var(--ease-default);text-decoration-thickness:.1em}:is(.link,.card-title[href],:where(.style-semantic-elements a)):is(:hover,.hover){text-decoration-color:currentColor}:is(.link,.card-title[href],:where(.style-semantic-elements a)):focus-visible{outline-offset:1px}:is(a[target=_blank]:is(.link,.button,.app-sidebar-item):not(.no-external-icon),:where(.style-semantic-elements a[target=_blank]:not(.no-external-icon)),a[download]:is(.link,.button,.app-sidebar-item):not(.no-download-icon),:where(.style-semantic-elements a[download]:not(.no-download-icon))):after{content:"";print-color-adjust:exact;background-color:var(--color-gray-5);vertical-align:baseline;transition:background-color var(--duration-short)var(--ease-default);margin-inline-start:.25em;display:inline-block;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}:is(a[target=_blank]:is(.link,.button,.app-sidebar-item):not(.no-external-icon),:where(.style-semantic-elements a[target=_blank]:not(.no-external-icon)),a[download]:is(.link,.button,.app-sidebar-item):not(.no-download-icon),:where(.style-semantic-elements a[download]:not(.no-download-icon))):hover:after{background-color:var(--color-gray-4)}:is(a[target=_blank]:is(.link,.button,.app-sidebar-item):not(.no-external-icon),:where(.style-semantic-elements a[target=_blank]:not(.no-external-icon)),a[download]:is(.link,.button,.app-sidebar-item):not(.no-download-icon),:where(.style-semantic-elements a[download]:not(.no-download-icon))).button:after{margin-inline-start:initial;background-color:currentColor!important}:is(a[target=_blank]:is(.link,.button,.app-sidebar-item):not(.no-external-icon),:where(.style-semantic-elements a[target=_blank]:not(.no-external-icon)),a[download]:is(.link,.button,.app-sidebar-item):not(.no-download-icon),:where(.style-semantic-elements a[download]:not(.no-download-icon)))[target=_blank]:after{width:.85em;height:.85em;transform:translateY(9%);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6m4-3h6v6m-11 5L21 3' /%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6m4-3h6v6m-11 5L21 3' /%3E%3C/svg%3E")}:is(a[target=_blank]:is(.link,.button,.app-sidebar-item):not(.no-external-icon),:where(.style-semantic-elements a[target=_blank]:not(.no-external-icon)),a[download]:is(.link,.button,.app-sidebar-item):not(.no-download-icon),:where(.style-semantic-elements a[download]:not(.no-download-icon)))[target=_blank].button:after{transform:translateY(2%)}:is(a[target=_blank]:is(.link,.button,.app-sidebar-item):not(.no-external-icon),:where(.style-semantic-elements a[target=_blank]:not(.no-external-icon)),a[download]:is(.link,.button,.app-sidebar-item):not(.no-download-icon),:where(.style-semantic-elements a[download]:not(.no-download-icon)))[download]:after{width:.95em;height:.95em;transform:translateY(7%);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='36' d='M336 176h40a40 40 0 0140 40v208a40 40 0 01-40 40H136a40 40 0 01-40-40V216a40 40 0 0140-40h40' /%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='36' d='M176 272l80 80 80-80M256 48v288' /%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='36' d='M336 176h40a40 40 0 0140 40v208a40 40 0 01-40 40H136a40 40 0 01-40-40V216a40 40 0 0140-40h40' /%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='36' d='M176 272l80 80 80-80M256 48v288' /%3E%3C/svg%3E")}:is(a[target=_blank]:is(.link,.button,.app-sidebar-item):not(.no-external-icon),:where(.style-semantic-elements a[target=_blank]:not(.no-external-icon)),a[download]:is(.link,.button,.app-sidebar-item):not(.no-download-icon),:where(.style-semantic-elements a[download]:not(.no-download-icon)))[download].button:after{transform:translateY(-5%)}.list li+li,.list .list,.style-semantic-elements li+li,.style-semantic-elements :is(ol,ul) :is(ol,ul){margin-block-start:var(--space-2xs)}ol.list li::marker{color:var(--color-body-text-alt);font-size:.85em;font-family:var(--font-family-heading);font-weight:var(--font-weight-semibold);line-height:0}.style-semantic-elements ol li::marker{color:var(--color-body-text-alt);font-size:.85em;font-family:var(--font-family-heading);font-weight:var(--font-weight-semibold);line-height:0}ul.list li::marker{color:var(--color-body-text-alt);font-weight:var(--font-weight-bold)}.style-semantic-elements ul li::marker{color:var(--color-body-text-alt);font-weight:var(--font-weight-bold)}ol.list,ol.list ol.list ol.list ol.list,.style-semantic-elements ol,.style-semantic-elements ol ol ol ol{list-style:decimal}ol.list ol.list,ol.list ol.list ol.list ol.list ol.list,.style-semantic-elements ol ol,.style-semantic-elements ol ol ol ol ol{list-style:lower-latin}ol.list ol.list ol.list,ol.list ol.list ol.list ol.list ol.list ol.list,.style-semantic-elements ol ol ol,.style-semantic-elements ol ol ol ol ol ol{list-style:lower-roman}ul.list,ul.list ul.list ul.list ul.list,.style-semantic-elements ul,.style-semantic-elements ul ul ul ul{list-style:disc}ul.list ul.list,ul.list ul.list ul.list ul.list ul.list,.style-semantic-elements ul ul,.style-semantic-elements ul ul ul ul ul{list-style:circle}ul.list ul.list ul.list,ul.list ul.list ul.list ul.list ul.list ul.list,.style-semantic-elements ul ul ul,.style-semantic-elements ul ul ul ul ul ul{list-style:square}ol.list ol.list ol.list ol.list li::marker{color:var(--color-brand-3)}ul.list ul.list ul.list ul.list li::marker{color:var(--color-brand-3)}.style-semantic-elements ol ol ol ol li::marker{color:var(--color-brand-3)}.style-semantic-elements ul ul ul ul li::marker{color:var(--color-brand-3)}meter.meter{appearance:none;block-size:1em;inline-size:100%}@supports selector(::-moz-meter-bar){meter.meter{border-radius:var(--radius-s);block-size:1em;inline-size:100%;box-shadow:inset 0 0 0 var(--border-s)var(--color-outline);background:var(--color-gray-9);box-sizing:border-box;border:0;display:block;overflow:clip}}.meter::-webkit-meter-bar{border-radius:var(--radius-s);block-size:1em;inline-size:100%;box-shadow:inset 0 0 0 var(--border-s)var(--color-outline);background:var(--color-gray-9);box-sizing:border-box;border:0;display:block;overflow:clip}.meter::-webkit-meter-optimum-value{border-radius:var(--radius-s);border:var(--border-s)solid transparent;box-sizing:border-box}.meter::-webkit-meter-suboptimum-value{border-radius:var(--radius-s);border:var(--border-s)solid transparent;box-sizing:border-box}.meter::-webkit-meter-even-less-good-value{border-radius:var(--radius-s);border:var(--border-s)solid transparent;box-sizing:border-box}.meter::-webkit-meter-inner-element{display:inline-block;position:relative}.meter::-moz-meter-bar{border-radius:var(--radius-s);border:var(--border-s)solid transparent;box-sizing:border-box}.meter::-webkit-meter-optimum-value{background:var(--color-green-6);border-color:var(--color-green-5)}.meter:-moz-meter-optimum::-moz-meter-bar{background:var(--color-green-6);border-color:var(--color-green-5)}.meter::-webkit-meter-suboptimum-value{background:var(--lightningcss-light,var(--color-yellow-7))var(--lightningcss-dark,var(--color-yellow-5));border-color:var(--lightningcss-light,var(--color-yellow-6))var(--lightningcss-dark,var(--color-yellow-4))}.meter:-moz-meter-sub-optimum::-moz-meter-bar{background:var(--lightningcss-light,var(--color-yellow-7))var(--lightningcss-dark,var(--color-yellow-5));border-color:var(--lightningcss-light,var(--color-yellow-6))var(--lightningcss-dark,var(--color-yellow-4))}.meter::-webkit-meter-even-less-good-value{background:var(--color-red-6);border-color:var(--color-red-5)}.meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:var(--color-red-6);border-color:var(--color-red-5)}.modal{max-height:calc(100svh - 4*var(--space-body-y));max-width:calc(100svw - 4*var(--space-body-x));margin:auto}.modal.small{width:25rem}.modal.medium{width:40rem}.modal.large{width:55rem}.modal-footer{padding:var(--space-xs);gap:var(--space-2xs);background-color:var(--color-body);border-block-start:var(--border-s)solid var(--color-outline);flex-shrink:0;justify-content:flex-start;margin:0;display:flex}@media screen and (max-width:calc(30rem - .001px)){.modal-footer{flex-direction:column;justify-content:stretch;width:100%}}.modal-footer .button:not(.small,.medium,.large){font-size:.9rem}@keyframes indeterminate-progress{0%{opacity:.2}to{opacity:.8}}progress.progress{appearance:none;block-size:1em;inline-size:100%}@supports selector(::-moz-progress-bar){progress.progress{border-radius:var(--radius-s);block-size:1em;inline-size:100%;box-shadow:inset 0 0 0 var(--border-s)var(--color-outline);background:var(--color-gray-9);box-sizing:border-box;border:0;display:block;overflow:clip}}.progress::-webkit-progress-bar{border-radius:var(--radius-s);block-size:1em;inline-size:100%;box-shadow:inset 0 0 0 var(--border-s)var(--color-outline);background:var(--color-gray-9);box-sizing:border-box;border:0;display:block;overflow:clip}.progress::-webkit-progress-value{border-radius:var(--radius-s);border:var(--border-s)solid transparent;box-sizing:border-box;background:var(--color-blue-6);border-color:var(--color-blue-5)}.progress::-moz-progress-bar{border-radius:var(--radius-s);border:var(--border-s)solid transparent;box-sizing:border-box;background:var(--color-blue-6);border-color:var(--color-blue-5)}.progress:indeterminate::-webkit-progress-value{background:var(--color-blue-6);border-color:var(--color-blue-5);opacity:.5;animation:indeterminate-progress 1s var(--ease-both-subtle)infinite alternate;inline-size:100%!important}.progress:indeterminate::-moz-progress-bar{background:var(--color-blue-6);border-color:var(--color-blue-5);opacity:.5;animation:indeterminate-progress 1s var(--ease-both-subtle)infinite alternate;inline-size:100%!important}.quote,:where(.style-semantic-elements blockquote){color:var(--color-body-text-alt);border-inline-start:.25em solid var(--color-gray-transparent);padding:var(--space-3xs);line-height:1.25;font-family:var(--font-family-body);font-size:var(--font-size-m);font-weight:var(--font-weight-normal);margin:0;padding-inline-start:var(--space-xs);display:block;position:relative}:is(.quote,:where(.style-semantic-elements blockquote)) footer{font-size:var(--font-size-s);font-style:initial;color:var(--color-body-text);font-weight:var(--font-weight-semibold);margin-block-start:.5em}:is(.quote,:where(.style-semantic-elements blockquote)) footer cite{font-weight:var(--font-weight-normal);font-style:italic}@keyframes skeleton-pulse-light{0%{opacity:.14}to{opacity:.21}}@keyframes skeleton-pulse-dark{0%{opacity:.28}to{opacity:.36}}.skeleton,.skeleton-controller.loading .skeleton-item{print-color-adjust:exact;animation:skeleton-pulse-light 1s var(--ease-both-subtle)alternate 0s infinite!important;border-radius:var(--radius-s)!important;background-color:var(--color-gray-5)!important;box-shadow:0!important;pointer-events:none!important;color:#0000!important;-webkit-user-select:none!important;user-select:none!important;background-image:none!important;border:0!important;outline:0!important;-webkit-mask-image:none!important;mask-image:none!important}:is(.skeleton,.skeleton-controller.loading .skeleton-item).paragraph,:is(.skeleton,.skeleton-controller.loading .skeleton-item).heading{inline-size:100%}:is(.skeleton,.skeleton-controller.loading .skeleton-item):is(.paragraph,.heading,.chip,.card-title):before{content:"."}:is(.skeleton,.skeleton-controller.loading .skeleton-item):is(.button,.chip):empty{min-inline-size:5em}:is(.skeleton,.skeleton-controller.loading .skeleton-item).card-title{inline-size:40%;overflow:hidden}:is(.skeleton,.skeleton-controller.loading .skeleton-item):before,:is(.skeleton,.skeleton-controller.loading .skeleton-item):after,:is(.skeleton,.skeleton-controller.loading .skeleton-item)>*{visibility:hidden!important}@media (prefers-color-scheme:dark){:is(.skeleton,.skeleton-controller.loading .skeleton-item){animation-name:skeleton-pulse-dark!important}}.skeleton-controller{display:contents}.skip-link{z-index:100;top:var(--space-body-y);left:var(--space-body-x);background-color:var(--color-brand-5);padding:var(--space-xs);border-radius:var(--radius-m);border:.25em solid var(--color-brand-4);color:#fff;font-weight:var(--font-weight-bold);font-family:var(--font-family-body);font-size:var(--font-size-m);box-shadow:var(--shadow-l),0 0 0 .2em var(--color-brand-transparent);vertical-align:middle;opacity:.25;transition:opacity var(--duration-medium)var(--ease-default);pointer-events:none;outline:0;line-height:1;text-decoration:none;display:inline-block;position:fixed}.skip-link kbd{font-weight:initial;background-color:var(--color-brand-4)!important;color:inherit!important;border:0!important;margin-inline-start:var(--space-2xs)!important;font-size:1.2em!important}.skip-link:focus,.skip-link.static{opacity:1}.skip-link.static{pointer-events:unset;position:static}input[type=range].slider{--slider-shadow-resting:var(--shadow-s);--slider-shadow-focused:var(--shadow-s),0 0 0 .08em var(--color-brand-5),0 0 0 calc(.16em + var(--border-s))var(--color-brand-transparent);--slider-shadow-active:var(--shadow-s),0 0 0 .08em var(--color-brand-5);appearance:none;cursor:pointer;background:0 0;block-size:1.25em;font-size:1.2rem}@media (pointer:coarse){input[type=range].slider{font-size:1.5rem}}input[type=range].slider:disabled{opacity:var(--opacity-disabled);cursor:not-allowed}input[type=range].slider:focus-visible{outline:0}input[type=range].slider:focus-visible::-webkit-slider-thumb{border-color:var(--color-brand-5);box-shadow:var(--slider-shadow-focused)}input[type=range].slider:focus-visible::-moz-range-thumb{border-color:var(--color-brand-5);box-shadow:var(--slider-shadow-focused)}input[type=range].slider:enabled:active::-webkit-slider-thumb{border-color:var(--color-brand-5);box-shadow:var(--slider-shadow-active);transform:scale(1)}@media screen and (-webkit-min-device-pixel-ratio:2),screen and (min-resolution:2dppx){input[type=range].slider:enabled:active::-webkit-slider-thumb{transform:scale(.9)}}input[type=range].slider:enabled:active::-moz-range-thumb{border-color:var(--color-brand-5);box-shadow:var(--slider-shadow-active);transform:scale(1)}@media screen and (-webkit-min-device-pixel-ratio:2),screen and (min-resolution:2dppx){input[type=range].slider:enabled:active::-moz-range-thumb{transform:scale(.9)}}input[type=range].slider::-webkit-slider-runnable-track{border-radius:var(--radius-full);background-color:var(--color-gray-8);print-color-adjust:exact;block-size:.25em;inline-size:100%;box-shadow:0 0 1px var(--color-gray-7)inset}input[type=range].slider::-moz-range-track{border-radius:var(--radius-full);background-color:var(--color-gray-8);print-color-adjust:exact;block-size:.25em;inline-size:100%}input[type=range].slider::-webkit-slider-thumb{border-radius:var(--radius-full);width:1.25em;height:1.25em;box-shadow:var(--slider-shadow-resting);border:var(--border-s)solid var(--color-outline);transition-property:border-color,box-shadow,transform;transition-duration:var(--duration-short);transition-timing-function:var(--ease-default);appearance:none;background-color:#fff;margin-block-start:-.5em}input[type=range].slider::-moz-range-thumb{border-radius:var(--radius-full);width:1.25em;height:1.25em;box-shadow:var(--slider-shadow-resting);border:var(--border-s)solid var(--color-outline);transition-property:border-color,box-shadow,transform;transition-duration:var(--duration-short);transition-timing-function:var(--ease-default);background-color:#fff}@keyframes spinner-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spinner{--spinner-primary-color:var(--color-brand-5);--spinner-secondary-color:var(--color-brand-3);font-size:var(--font-size-m);text-align:center;justify-content:flex-start;align-items:center;gap:var(--space-2xs);flex-direction:column;display:flex;position:relative}.spinner.small{font-size:var(--font-size-xs)}.spinner.large{font-size:var(--font-size-xl)}.spinner.label-top{flex-direction:column-reverse}.spinner.label-top:after{inset:auto 0 0}.spinner.label-right{gap:var(--space-xs);flex-direction:row}.spinner.label-right:after{inset:0 auto 0 0}.spinner.label-left{gap:var(--space-xs);flex-direction:row-reverse}.spinner.label-left:after{inset:0 0 0 auto}.spinner:before,.spinner:after{content:"";background-color:var(--spinner-primary-color);width:3em;height:3em;animation:.85s linear infinite spinner-spin;display:block;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-150 -150 300 300'%3E%3Cpath d='M 8.266365894244634e-15 -135 A 15 15 0 0 1 14.975012497024213 -149.25062479170387 A 150 150 0 0 1 136.74233884882722 61.65657115143952 A 15 15 0 0 1 116.91342951089922 67.49999999999999 L 99.59292143521046 57.49999999999999 A 15 15 0 0 1 93.10199382567353 36.496831995177985 A 100 100 0 0 0 14.94381324735992 -98.87710779360422 A 15 15 0 0 1 7.041719095097281e-15 -115 Z'%3E%3C/path%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-150 -150 300 300'%3E%3Cpath d='M 8.266365894244634e-15 -135 A 15 15 0 0 1 14.975012497024213 -149.25062479170387 A 150 150 0 0 1 136.74233884882722 61.65657115143952 A 15 15 0 0 1 116.91342951089922 67.49999999999999 L 99.59292143521046 57.49999999999999 A 15 15 0 0 1 93.10199382567353 36.496831995177985 A 100 100 0 0 0 14.94381324735992 -98.87710779360422 A 15 15 0 0 1 7.041719095097281e-15 -115 Z'%3E%3C/path%3E%3C/svg%3E");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.spinner:after{background-color:var(--spinner-secondary-color);margin:auto;animation-duration:1.05s;position:absolute;inset:0 0 auto}label.switch{cursor:pointer;inline-size:100%;font-weight:var(--font-weight-semibold);justify-content:space-between;align-items:center;gap:var(--space-3xs);font-size:var(--font-size-m);font-family:var(--font-family-body);display:flex}label.switch.small{font-size:var(--font-size-s)}input[type=checkbox].switch,label.switch input[type=checkbox]{print-color-adjust:exact;appearance:none;border-radius:var(--radius-full);background-color:var(--color-gray-7);block-size:1.8em;inline-size:3em;transition-property:background-color,box-shadow,border-color;transition-duration:var(--duration-medium);transition-timing-function:var(--ease-default);border:.1em solid var(--color-gray-6);cursor:pointer;flex:none;font-size:1rem;position:relative}:is(input[type=checkbox].switch,label.switch input[type=checkbox]):after{content:"";border-radius:var(--radius-full);width:1.4em;height:1.4em;box-shadow:var(--shadow-s);transition-property:border-color,transform;transition-duration:var(--duration-medium);transition-timing-function:var(--ease-both);background-color:#fff;position:absolute;inset-block-start:.1em;inset-inline-start:.1em;transform:translate(0)}:is(input[type=checkbox].switch,label.switch input[type=checkbox]):disabled{opacity:var(--opacity-disabled);cursor:not-allowed}:is(input[type=checkbox].switch,label.switch input[type=checkbox]):is(:focus-visible,.focus){border-color:var(--color-gray-6);box-shadow:0 0 0 .08em var(--color-gray-6),0 0 0 calc(.16em + var(--border-s))var(--color-gray-transparent);outline:0}:is(input[type=checkbox].switch,label.switch input[type=checkbox]):checked{background-color:var(--color-brand-6);border-color:var(--color-brand-5)}:is(input[type=checkbox].switch,label.switch input[type=checkbox]):checked:after{transform:translate(1.2em)}:is(input[type=checkbox].switch,label.switch input[type=checkbox]):checked:is(:focus-visible,.focus){box-shadow:0 0 0 .08em var(--color-brand-5),0 0 0 calc(.16em + var(--border-s))var(--color-brand-transparent)}:is(input[type=checkbox].switch,label.switch input[type=checkbox]):is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)):checked:after{transform:translate(-1.2em)}input[type=checkbox].switch.small,label.switch.small input[type=checkbox]{font-size:.8rem}table.table,:where(.style-semantic-elements table){--table-bg-odd:var(--color-body-alt);--table-bg-even:var(--color-body);--table-vertical-border:var(--border-s);background-color:var(--color-body-alt);border-collapse:separate;border-spacing:0;font-size:var(--font-size-m);border:var(--border-s)solid var(--color-outline);border-radius:var(--radius-s);color:var(--color-body-text);font-family:var(--font-family-body);font-weight:var(--font-weight-normal)}:is(table.table,:where(.style-semantic-elements table)).subtle{--table-bg-odd:transparent;--table-bg-even:transparent;--table-vertical-border:0;border:0}:is(table.table,:where(.style-semantic-elements table)).dense :is(th,td){padding:var(--space-3xs)var(--space-2xs)}:is(table.table,:where(.style-semantic-elements table)).sparse :is(th,td){padding:var(--space-xs)var(--space-s)}:is(table.table,:where(.style-semantic-elements table)) caption{font-family:var(--font-family-heading);line-height:1.15;font-size:var(--font-size-l);font-weight:var(--font-weight-semibold);text-align:start;margin:0 0 var(--space-2xs)}:is(table.table,:where(.style-semantic-elements table)) th,:is(table.table,:where(.style-semantic-elements table)) td{padding:var(--space-2xs)var(--space-xs)}:is(table.table,:where(.style-semantic-elements table)) th,:is(table.table,:where(.style-semantic-elements table)) tfoot td{font-weight:var(--font-weight-bold);font-family:var(--font-family-heading);text-align:center}:is(table.table,:where(.style-semantic-elements table)) th{border-block-end:var(--border-m)solid var(--color-outline)}:is(table.table,:where(.style-semantic-elements table)) tfoot td{border-block-start:var(--border-m)solid var(--color-outline)}:is(table.table,:where(.style-semantic-elements table)) td{text-align:unset}:is(table.table,:where(.style-semantic-elements table)) :is(th,tfoot td):not(:last-of-type){border-inline-end:var(--table-vertical-border)dashed var(--color-outline)}:is(table.table,:where(.style-semantic-elements table)) td:not(tfoot td,:last-of-type){border-inline-end:var(--table-vertical-border)solid var(--color-outline)}:is(table.table,:where(.style-semantic-elements table)) tr:not(:last-of-type) td{border-block-end:var(--border-s)solid var(--color-outline)}:is(table.table,:where(.style-semantic-elements table)) tbody tr:nth-child(odd),:is(table.table,:where(.style-semantic-elements table)) tbody:has(tr:last-of-type:nth-child(2n))+tfoot tr{background-color:var(--table-bg-even)}:is(table.table,:where(.style-semantic-elements table)) tbody tr:nth-child(2n){background-color:var(--table-bg-odd)}.paragraph,:where(.style-semantic-elements p){font-family:var(--font-family-body);font-weight:var(--font-weight-normal);text-wrap:pretty;hanging-punctuation:first;overflow-wrap:break-word;margin:.75em 0;line-height:1.6}:is(.paragraph,:where(.style-semantic-elements p)):first-child{margin-block-start:0}:is(.paragraph,:where(.style-semantic-elements p)):last-child{margin-block-end:0}:is(.heading-1,.heading-2,.heading-3,.heading-4,.heading-5,.heading-6)+.paragraph,:where(.style-semantic-elements :is(h1,h2,h3,h4,h5,h6)+p){margin-block-start:0}.abbreviation,:where(.style-semantic-elements abbr[title]){text-decoration-line:underline;text-decoration-style:dotted;text-decoration-thickness:var(--border-m);-webkit-text-decoration-color:var(--color-gray-6);text-decoration-color:var(--color-gray-6);text-underline-offset:.1em;display:inline}.bold,:where(.style-semantic-elements strong,.style-semantic-elements b){font-weight:var(--font-weight-bold)}.italic,:where(.style-semantic-elements em){font-style:italic}.underline{text-decoration-line:underline}.strikethrough,:where(.style-semantic-elements s){text-decoration-line:line-through}.underline.strikethrough{text-decoration-line:underline line-through}.small-text,:where(.style-semantic-elements small){vertical-align:baseline;font-size:.75em}.subscript,.superscript,:where(.style-semantic-elements sub,.style-semantic-elements sup){vertical-align:baseline;font-size:.75em;line-height:0;position:relative}.subscript,:where(.style-semantic-elements sub){inset-block-end:-.25em}.superscript,:where(.style-semantic-elements sup){inset-block-start:-.5em}.code,:where(.style-semantic-elements code){font-family:var(--font-family-mono);background-color:var(--color-gray-extra-transparent);color:var(--color-gray-1);border-radius:var(--radius-s);padding:.25ch .5ch;font-size:.9em;display:inline}:is(.code,:where(.style-semantic-elements code)).invert{color:var(--color-gray-9)}.link .code,:where(.style-semantic-elements a code){-webkit-text-decoration:inherit;text-decoration:inherit;-webkit-text-decoration-color:inherit;text-decoration-color:inherit;text-decoration-thickness:inherit;color:inherit}.key,.skip-link kbd,:where(.style-semantic-elements kbd){border:var(--border-s)solid var(--color-gray-8);border-radius:var(--radius-m);font-size:.9em;font-weight:var(--font-weight-semibold);font-family:var(--font-family-body);background-color:var(--color-gray-9);color:var(--color-body-text);border-bottom-width:3px;margin:0 .25ch;padding:0 .5ch;display:inline}.card{background-color:var(--color-body-alt);border-radius:var(--radius-l);border:var(--border-s)solid var(--color-outline);box-shadow:var(--shadow-m);padding:var(--space-m);font-family:var(--font-family-body);font-size:var(--font-size-m);font-weight:var(--font-weight-normal)}.card.secondary{background-color:var(--color-body);border-radius:var(--radius-m);box-shadow:var(--shadow-s);padding:var(--space-s)}.card-title,.card-title[href]{font-family:var(--font-family-heading);text-wrap:balance;overflow-wrap:break-word;line-height:1.15;font-size:var(--font-size-l);font-weight:var(--font-weight-bold);color:var(--color-brand-3);margin-block:0 var(--space-xs);display:block}.card-title[href]{-webkit-text-decoration-color:var(--color-brand-transparent);text-decoration-color:var(--color-brand-transparent)}.card.secondary .card-title{font-size:var(--font-size-m);margin-block-end:var(--space-2xs)}
+*,:before,:after{box-sizing:border-box;margin:0}:where(:focus-visible){outline:var(--border-m)solid var(--color-brand-5)}html{-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){html{--lightningcss-light: ;--lightningcss-dark:initial}}body{background-color:var(--color-body);color:var(--color-body-text);margin:0}img,picture,video,iframe{max-width:100%;display:block}.js-disabled .if-js-enabled,.js-enabled .if-js-disabled{display:none!important}@media screen and (width<30rem){:is(.if-medium-viewport,.if-wide-viewport):not(.if-narrow-viewport){display:none!important}}@media screen and (30rem<=width<55rem){:is(.if-narrow-viewport,.if-wide-viewport):not(.if-medium-viewport){display:none!important}}@media screen and (width>=55rem){:is(.if-narrow-viewport,.if-medium-viewport):not(.if-wide-viewport){display:none!important}}.light-mode{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light only;color:var(--color-body-text)}.dark-mode{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark only;color:var(--color-body-text)}.visually-hidden,.app-sidebar-toggle input,.skip-link:not(:focus,.static){clip:rect(1px,1px,1px,1px);clip-path:inset(50%);width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}:root,::backdrop,.light-mode,.dark-mode{--color-brand-1:var(--lightningcss-light,#08003b)var(--lightningcss-dark,#e9f0ff);--color-brand-2:var(--lightningcss-light,#190074)var(--lightningcss-dark,#cad6ff);--color-brand-3:var(--lightningcss-light,#290fa3)var(--lightningcss-dark,#9fb0ff);--color-brand-4:var(--lightningcss-light,#3c35cb)var(--lightningcss-dark,#7382ff);--color-brand-5:var(--lightningcss-light,#545be7)var(--lightningcss-dark,#5961ee);--color-brand-6:var(--lightningcss-light,#6f7dff)var(--lightningcss-dark,#4344cf);--color-brand-7:var(--lightningcss-light,#93a4ff)var(--lightningcss-dark,#3124b1);--color-brand-8:var(--lightningcss-light,#bbc9ff)var(--lightningcss-dark,#230095);--color-brand-9:var(--lightningcss-light,#e5edff)var(--lightningcss-dark,#0b004a);--color-brand-transparent:var(--lightningcss-light,#545be766)var(--lightningcss-dark,#5961ee80);--color-brand-extra-transparent:var(--lightningcss-light,#545be733)var(--lightningcss-dark,#5961ee59);--color-red-1:var(--lightningcss-light,#240000)var(--lightningcss-dark,#ffe3dc);--color-red-2:var(--lightningcss-light,#4d0000)var(--lightningcss-dark,#ffc3b6);--color-red-3:var(--lightningcss-light,#7a0000)var(--lightningcss-dark,#ff8875);--color-red-4:var(--lightningcss-light,#a90000)var(--lightningcss-dark,#f45441);--color-red-5:var(--lightningcss-light,#cc2a1b)var(--lightningcss-dark,#d33223);--color-red-6:var(--lightningcss-light,#f0503d)var(--lightningcss-dark,#b30000);--color-red-7:var(--lightningcss-light,#ff7c68)var(--lightningcss-dark,#8d0000);--color-red-8:var(--lightningcss-light,#ffb4a5)var(--lightningcss-dark,#6c0000);--color-red-9:var(--lightningcss-light,#ffe3dc)var(--lightningcss-dark,#340000);--color-red-transparent:var(--lightningcss-light,#cc2a1b66)var(--lightningcss-dark,#d3322380);--color-red-extra-transparent:var(--lightningcss-light,#cc2a1b33)var(--lightningcss-dark,#d3322359);--color-orange-1:var(--lightningcss-light,#1c0300)var(--lightningcss-dark,#ffe5d0);--color-orange-2:var(--lightningcss-light,#3e1200)var(--lightningcss-dark,#ffc5a0);--color-orange-3:var(--lightningcss-light,#632500)var(--lightningcss-dark,#ff9559);--color-orange-4:var(--lightningcss-light,#8b3a00)var(--lightningcss-dark,#d97234);--color-orange-5:var(--lightningcss-light,#b45100)var(--lightningcss-dark,#ba570d);--color-orange-6:var(--lightningcss-light,#d76f04)var(--lightningcss-dark,#9c3b00);--color-orange-7:var(--lightningcss-light,#f98f3a)var(--lightningcss-dark,#782700);--color-orange-8:var(--lightningcss-light,#ffb87e)var(--lightningcss-dark,#5c1900);--color-orange-9:var(--lightningcss-light,#ffe6cc)var(--lightningcss-dark,#2c0400);--color-orange-transparent:var(--lightningcss-light,#b4510066)var(--lightningcss-dark,#ba570d80);--color-orange-extra-transparent:var(--lightningcss-light,#b4510033)var(--lightningcss-dark,#ba570d59);--color-yellow-1:var(--lightningcss-light,#140900)var(--lightningcss-dark,#fdf4d5);--color-yellow-2:var(--lightningcss-light,#2f1e00)var(--lightningcss-dark,#fadfa6);--color-yellow-3:var(--lightningcss-light,#4e3700)var(--lightningcss-dark,#fdd171);--color-yellow-4:var(--lightningcss-light,#7a5700)var(--lightningcss-dark,#dfaf3f);--color-yellow-5:var(--lightningcss-light,#a57c00)var(--lightningcss-dark,#c69720);--color-yellow-6:var(--lightningcss-light,#c89808)var(--lightningcss-dark,#a17807);--color-yellow-7:var(--lightningcss-light,#dfb22b)var(--lightningcss-dark,#750);--color-yellow-8:var(--lightningcss-light,#efcb72)var(--lightningcss-dark,#4e3700);--color-yellow-9:var(--lightningcss-light,#f8edc1)var(--lightningcss-dark,#211500);--color-yellow-transparent:var(--lightningcss-light,#a57c0066)var(--lightningcss-dark,#a57c0080);--color-yellow-extra-transparent:var(--lightningcss-light,#a57c0033)var(--lightningcss-dark,#a57c0059);--color-green-1:var(--lightningcss-light,#011000)var(--lightningcss-dark,#dff4d3);--color-green-2:var(--lightningcss-light,#0c2a00)var(--lightningcss-dark,#bbe7a5);--color-green-3:var(--lightningcss-light,#1d4600)var(--lightningcss-dark,#8ecb6b);--color-green-4:var(--lightningcss-light,#2f6500)var(--lightningcss-dark,#63a736);--color-green-5:var(--lightningcss-light,#438500)var(--lightningcss-dark,#498b0f);--color-green-6:var(--lightningcss-light,#5fa500)var(--lightningcss-dark,#2e7000);--color-green-7:var(--lightningcss-light,#7dc53a)var(--lightningcss-dark,#1c5400);--color-green-8:var(--lightningcss-light,#a4e472)var(--lightningcss-dark,#113f00);--color-green-9:var(--lightningcss-light,#dafbc4)var(--lightningcss-dark,#011b00);--color-green-transparent:var(--lightningcss-light,#43850066)var(--lightningcss-dark,#498b0f80);--color-green-extra-transparent:var(--lightningcss-light,#43850033)var(--lightningcss-dark,#498b0f59);--color-sky-1:var(--lightningcss-light,#001011)var(--lightningcss-dark,#c8f6f5);--color-sky-2:var(--lightningcss-light,#002a2b)var(--lightningcss-dark,#9ee7e7);--color-sky-3:var(--lightningcss-light,#004747)var(--lightningcss-dark,#61c7c8);--color-sky-4:var(--lightningcss-light,#006566)var(--lightningcss-dark,#3aa4a5);--color-sky-5:var(--lightningcss-light,#008586)var(--lightningcss-dark,#0b8889);--color-sky-6:var(--lightningcss-light,#00a7a8)var(--lightningcss-dark,#006d6f);--color-sky-7:var(--lightningcss-light,#00c8c9)var(--lightningcss-dark,#005254);--color-sky-8:var(--lightningcss-light,#76e2e2)var(--lightningcss-dark,#003e3f);--color-sky-9:var(--lightningcss-light,#caf9f8)var(--lightningcss-dark,#001a1b);--color-sky-transparent:var(--lightningcss-light,#00858666)var(--lightningcss-dark,#0b888980);--color-sky-extra-transparent:var(--lightningcss-light,#00858633)var(--lightningcss-dark,#0b888959);--color-blue-1:var(--lightningcss-light,#00003e)var(--lightningcss-dark,#ddf0ff);--color-blue-2:var(--lightningcss-light,#00007a)var(--lightningcss-dark,#b9d9ff);--color-blue-3:var(--lightningcss-light,#002b97)var(--lightningcss-dark,#7eb4ff);--color-blue-4:var(--lightningcss-light,#004abd)var(--lightningcss-dark,#418dff);--color-blue-5:var(--lightningcss-light,#1c69e3)var(--lightningcss-dark,#2370ea);--color-blue-6:var(--lightningcss-light,#3988ff)var(--lightningcss-dark,#0053cb);--color-blue-7:var(--lightningcss-light,#74adff)var(--lightningcss-dark,#0035ac);--color-blue-8:var(--lightningcss-light,#a9cfff)var(--lightningcss-dark,#001a95);--color-blue-9:var(--lightningcss-light,#ddf0ff)var(--lightningcss-dark,#005);--color-blue-transparent:var(--lightningcss-light,#1c69e366)var(--lightningcss-dark,#2370ea80);--color-blue-extra-transparent:var(--lightningcss-light,#1c69e333)var(--lightningcss-dark,#2370ea59);--color-purple-1:var(--lightningcss-light,#170029)var(--lightningcss-dark,#fbe4ff);--color-purple-2:var(--lightningcss-light,#370054)var(--lightningcss-dark,#edc4ff);--color-purple-3:var(--lightningcss-light,#5a0085)var(--lightningcss-dark,#d88eff);--color-purple-4:var(--lightningcss-light,#7819a8)var(--lightningcss-dark,#b864ef);--color-purple-5:var(--lightningcss-light,#9640ca)var(--lightningcss-dark,#9c47d1);--color-purple-6:var(--lightningcss-light,#b562ea)var(--lightningcss-dark,#8127b3);--color-purple-7:var(--lightningcss-light,#ce8dfc)var(--lightningcss-dark,#660095);--color-purple-8:var(--lightningcss-light,#e8b6ff)var(--lightningcss-dark,#4f0076);--color-purple-9:var(--lightningcss-light,#fbe4ff)var(--lightningcss-dark,#23003a);--color-purple-transparent:var(--lightningcss-light,#9640ca66)var(--lightningcss-dark,#9c47d180);--color-purple-extra-transparent:var(--lightningcss-light,#9640ca33)var(--lightningcss-dark,#9c47d159);--color-magenta-1:var(--lightningcss-light,#21000c)var(--lightningcss-dark,#ffe1ef);--color-magenta-2:var(--lightningcss-light,#480023)var(--lightningcss-dark,#ffbdd9);--color-magenta-3:var(--lightningcss-light,#73003d)var(--lightningcss-dark,#ff7db8);--color-magenta-4:var(--lightningcss-light,#9b0058)var(--lightningcss-dark,#ea5096);--color-magenta-5:var(--lightningcss-light,#c32775)var(--lightningcss-dark,#ca2f7b);--color-magenta-6:var(--lightningcss-light,#e45193)var(--lightningcss-dark,#aa0061);--color-magenta-7:var(--lightningcss-light,#fe7cb1)var(--lightningcss-dark,#850048);--color-magenta-8:var(--lightningcss-light,#ffadd0)var(--lightningcss-dark,#660035);--color-magenta-9:var(--lightningcss-light,#ffe1f0)var(--lightningcss-dark,#300015);--color-magenta-transparent:var(--lightningcss-light,#c3277566)var(--lightningcss-dark,#ca2f7b80);--color-magenta-extra-transparent:var(--lightningcss-light,#c3277533)var(--lightningcss-dark,#ca2f7b59);--color-gray-1:var(--lightningcss-light,#090b0f)var(--lightningcss-dark,#ebeff3);--color-gray-2:var(--lightningcss-light,#202226)var(--lightningcss-dark,#d4d8dc);--color-gray-3:var(--lightningcss-light,#383b3f)var(--lightningcss-dark,#b1b4b9);--color-gray-4:var(--lightningcss-light,#53555a)var(--lightningcss-dark,#8f9297);--color-gray-5:var(--lightningcss-light,#6f7276)var(--lightningcss-dark,#75787c);--color-gray-6:var(--lightningcss-light,#8d8f94)var(--lightningcss-dark,#5b5e62);--color-gray-7:var(--lightningcss-light,#abaeb3)var(--lightningcss-dark,#424549);--color-gray-8:var(--lightningcss-light,#cbced3)var(--lightningcss-dark,#303337);--color-gray-9:var(--lightningcss-light,#eceff4)var(--lightningcss-dark,#121417);--color-gray-transparent:var(--lightningcss-light,#6f727666)var(--lightningcss-dark,#75787c80);--color-gray-extra-transparent:var(--lightningcss-light,#6f727633)var(--lightningcss-dark,#75787c59);--color-body:var(--lightningcss-light,#f9fafc)var(--lightningcss-dark,#14161a);--color-body-alt:var(--lightningcss-light,#fff)var(--lightningcss-dark,#010203);--color-body-text:var(--lightningcss-light,#030305)var(--lightningcss-dark,#fff);--color-body-text-alt:var(--lightningcss-light,#404247)var(--lightningcss-dark,#ccced0);--color-shadow:var(--lightningcss-light,#45484c26)var(--lightningcss-dark,#00000166);--color-outline:var(--lightningcss-light,#d8dbe0)var(--lightningcss-dark,#434549);--font-size-xs:clamp(.6944rem,.6855rem + .0446vw,.72rem);--font-size-s:clamp(.8331rem,.8099rem + .1163vw,.9rem);--font-size-m:clamp(1rem,.9565rem + .2174vw,1.125rem);--font-size-l:clamp(1.2rem,1.1283rem + .3587vw,1.4063rem);--font-size-xl:clamp(1.44rem,1.3293rem + .5533vw,1.7581rem);--font-size-2xl:clamp(1.7281rem,1.5649rem + .8163vw,2.1975rem);--font-size-3xl:clamp(2.0738rem,1.8396rem + 1.1707vw,2.7469rem);--font-size-4xl:clamp(2.4881rem,2.1594rem + 1.6435vw,3.4331rem);--font-weight-light:300;--font-weight-normal:400;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-black:900;--font-family-body:"Avenir Next",avenir,"Segoe UI Variable Display","Segoe UI","URW Gothic",source-sans-pro,ui-sans-serif,sans-serif;--font-family-heading:seravek,"Gill Sans Nova","Gill Sans MT",cantarell,"DejaVu Sans",source-sans-pro,ui-sans-serif,sans-serif;--font-family-mono:ui-monospace,"Cascadia Code",menlo,hack,monospace;--space-none:0;--space-3xs:clamp(4px,3.6528px + .1087vw,5px);--space-2xs:clamp(8px,7.6528px + .1087vw,9px);--space-xs:clamp(12px,11.304px + .2174vw,14px);--space-s:clamp(16px,15.304px + .2174vw,18px);--space-m:clamp(24px,22.9568px + .3261vw,27px);--space-l:clamp(32px,30.608px + .4348vw,36px);--space-xl:clamp(48px,45.9136px + .6522vw,54px);--space-2xl:clamp(64px,61.2176px + .8696vw,72px);--space-3xl:clamp(96px,91.8256px + 1.3043vw,108px);--space-body-x:clamp(20px,17.5652px + .7609vw,27px);--space-body-y:20px;--radius-none:0;--radius-s:3px;--radius-m:6px;--radius-l:12px;--radius-xl:24px;--radius-2xl:64px;--radius-full:9999px;--shadow-none:none;--shadow-s:0 1px 3px -1px var(--color-shadow);--shadow-m:0 1px 7px -1px var(--color-shadow);--shadow-l:var(--shadow-s),0 1px 11px -1px var(--color-shadow);--shadow-xl:var(--shadow-m),0 1px 15px -1px var(--color-shadow);--border-none:0;--border-s:1px;--border-m:2px;--border-l:5px;--border-xl:8px;--opacity-disabled:var(--lightningcss-light,.65)var(--lightningcss-dark,.5);--ease-default:cubic-bezier(.6,.22,.45,.9);--ease-out:cubic-bezier(.17,.84,.44,1);--ease-in:cubic-bezier(.7,.1,.8,.65);--ease-both:cubic-bezier(.65,.05,.36,1);--ease-both-subtle:cubic-bezier(.45,.12,.55,.88);--ease-spring:cubic-bezier(.95,-.55,.05,1.55);--duration-short:.1s;--duration-medium:.15s;--duration-long:.25s;--duration-extra-long:.35s}.alert,.banner{font-family:var(--font-family-body);font-size:var(--font-size-m);font-weight:var(--font-weight-normal);color:var(--color-body-text);background:linear-gradient(var(--alert-bg-color),var(--alert-bg-color))padding-box,linear-gradient(to right,var(--alert-border-start-color),var(--alert-border-end-color))border-box;border:var(--border-m)solid transparent;line-height:1.4;display:block;position:relative}:is(.alert,.banner)>*{line-height:1.4}@media print{:is(.alert,.banner){border-color:var(--alert-border-start-color)}}:is(.alert,.banner):before,:is(.alert,.banner):after{content:"";print-color-adjust:exact;width:2em;height:2em;margin-block:auto;position:absolute;inset-block:0}:is(.alert,.banner):before{z-index:2;-webkit-mask-image:var(--alert-icon);mask-image:var(--alert-icon);background-color:var(--alert-border-start-color);scale:.5;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}:is(.alert,.banner):after{z-index:1;border-radius:var(--radius-full);border:3px solid var(--alert-border-start-color);background-color:var(--lightningcss-light,#fffe)var(--lightningcss-dark,#000e);scale:.75}:is(.alert,.banner).error{--alert-bg-color:var(--color-red-9);--alert-border-start-color:var(--color-red-5);--alert-border-end-color:var(--color-red-6);--alert-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='64' d='M368 368L144 144M368 144L144 368' /%3E%3C/svg%3E")}:is(.alert,.banner).warning{--alert-bg-color:var(--color-yellow-9);--alert-border-start-color:var(--color-yellow-5);--alert-border-end-color:var(--color-yellow-6);--alert-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 80c-8.66 0-16.58 7.36-16 16l8 216a8 8 0 008 8h0a8 8 0 008-8l8-216c.58-8.64-7.34-16-16-16z' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='64' /%3E%3Ccircle cx='256' cy='436' r='24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' /%3E%3C/svg%3E")}:is(.alert,.banner).success{--alert-bg-color:var(--color-green-9);--alert-border-start-color:var(--color-green-5);--alert-border-end-color:var(--color-green-6);--alert-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='64' d='M416 128L192 384l-96-96' /%3E%3C/svg%3E")}:is(.alert,.banner).info{--alert-bg-color:var(--color-sky-9);--alert-border-start-color:var(--color-sky-5);--alert-border-end-color:var(--color-sky-6);--alert-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='64' d='M196 220h64v172' /%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='64' d='M187 396h138' /%3E%3Ccircle cx='253 ' cy='118' r='44' /%3E%3C/svg%3E")}.alert-title,.banner-title{font-family:var(--font-family-heading);font-weight:var(--font-weight-bold);color:var(--alert-border-start-color);margin:0;margin-block-end:.15em;font-size:.85em;line-height:1}.modal::backdrop,.drawer::backdrop{--dialog-backdrop-starting-opacity:0;--dialog-backdrop-open-opacity:var(--lightningcss-light,.75)var(--lightningcss-dark,.85);--dialog-backdrop-ending-opacity:0;--dialog-backdrop-color:var(--lightningcss-light,var(--color-gray-2))var(--lightningcss-dark,var(--color-gray-8));background-color:var(--dialog-backdrop-color)}.modal,.drawer{--dialog-starting-opacity:1;--dialog-starting-transform:translateY(8px);--dialog-open-opacity:1;--dialog-open-transform:translate(0);--dialog-ending-opacity:0;--dialog-ending-transform:scale(.97)}@media (prefers-reduced-motion){.modal,.drawer{--dialog-starting-transform:translate(0);--dialog-ending-transform:translate(0)}}.modal,.drawer{box-shadow:var(--shadow-xl);border:var(--border-s)solid var(--color-outline);border-radius:var(--radius-l);background-color:var(--color-body-alt);color:var(--color-body-text);flex-direction:column;gap:0;padding:0}:is(.modal,.drawer)[open]{display:flex}.modal-header,.drawer-header{font-family:var(--font-family-heading);font-size:var(--font-size-l);font-weight:var(--font-weight-bold);padding:var(--space-m);color:var(--color-brand-3);flex-shrink:0;justify-content:space-between;align-items:center;margin:0;padding-block-end:var(--space-2xs);line-height:1;display:flex}:is(.modal-header,.drawer-header) h1,:is(.modal-header,.drawer-header) h2,:is(.modal-header,.drawer-header) h3,:is(.modal-header,.drawer-header) h4,:is(.modal-header,.drawer-header) h5,:is(.modal-header,.drawer-header) h6{color:inherit;font-size:inherit;font-weight:inherit;margin:0}:is(.modal-header,.drawer-header) .button.dismiss{--button-fg-color:var(--color-brand-3);--button-hover-bg-color:var(--color-brand-extra-transparent);border-radius:var(--radius-full);width:2.25rem;height:2.25rem;margin:-.5rem;padding:.25rem;font-size:.8rem}:is(.modal-header,.drawer-header) .button.dismiss:is(:focus-visible,.focus){--button-bg-color:var(--color-brand-transparent)}.modal-body,.drawer-body{padding:var(--space-m);flex-shrink:1;margin:0;padding-block-start:var(--space-xs);display:block;overflow:auto}@supports (transition-behavior:allow-discrete) and (overlay:none){.modal,.drawer{animation:unset}}:is(.modal,.drawer)[open]{transform:var(--dialog-open-transform);opacity:var(--dialog-open-opacity);display:flex}:is(.modal,.drawer)[open]::backdrop{opacity:var(--dialog-backdrop-open-opacity)}:is(.modal,.drawer),:is(.modal,.drawer)::backdrop{transition-property:transform,opacity,display,overlay;transition-duration:var(--duration-long);transition-behavior:allow-discrete}:is(.modal,.drawer){transform:var(--dialog-ending-transform);opacity:var(--dialog-ending-opacity);transition-timing-function:var(--ease-out)}:is(.modal,.drawer)::backdrop{opacity:var(--dialog-backdrop-ending-opacity);transition-timing-function:var(--ease-default)}@starting-style{:is(.modal,.drawer)[open]{transform:var(--dialog-starting-transform);opacity:var(--dialog-starting-opacity)}:is(.modal,.drawer)[open]::backdrop{opacity:var(--dialog-backdrop-starting-opacity)}}.button.dismiss{--button-fg-color:var(--color-body-text);--button-bg-color:transparent;--button-border-color:transparent;--button-hover-bg-color:var(--color-gray-extra-transparent);--button-focus-ring-color:transparent;--button-shadow:none;border-radius:var(--radius-m);aspect-ratio:1;width:3em;min-width:0;height:3em;min-height:0;padding:.3em;font-size:.75rem}.button.dismiss:is(:focus-visible,.focus){--button-bg-color:var(--color-gray-transparent);--button-hover-bg-color:transparent}.button.dismiss:before{content:unset}.button.dismiss:is(:hover,.hover){background-color:var(--button-hover-bg-color)}.button.dismiss:after{content:"";background-color:currentColor;width:1.8em;height:1.8em;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M368 368L144 144M368 144L144 368' /%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M368 368L144 144M368 144L144 368' /%3E%3C/svg%3E");-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.accordion{width:100%}.accordion details{background-color:var(--color-body-alt);width:100%;padding-block:0;padding-inline:var(--space-xs);border-radius:var(--radius-m);border:var(--border-s)solid var(--color-outline);box-shadow:var(--shadow-s);font-family:var(--font-family-body);font-size:var(--font-size-m);font-weight:var(--font-weight-normal)}@media (prefers-reduced-motion:no-preference){.accordion details{transition:padding var(--duration-long)var(--ease-out);interpolate-size:allow-keywords}}.accordion details+details{border-block-start:0}.accordion details:not(:first-of-type){border-start-start-radius:0;border-start-end-radius:0}.accordion details:not(:last-of-type){border-end-end-radius:0;border-end-start-radius:0}.accordion details::details-content{opacity:0;block-size:0;transition-property:content-visibility,opacity,block-size;transition-duration:var(--duration-long);transition-timing-function:var(--ease-out);transition-behavior:allow-discrete;overflow-y:clip}.accordion details[open]{padding-block-end:var(--space-xs)}.accordion details[open]::details-content{opacity:1;block-size:auto}.accordion details[open] summary{border-block-end-color:var(--color-outline);margin-block-end:var(--space-xs)}.accordion details[open] summary:before{rotate:none}.accordion details[open] summary:not(:active,.active,:hover,.hover){color:var(--color-brand-3)}.accordion summary{font-family:var(--font-family-heading);font-size:var(--font-size-m);font-weight:var(--font-weight-bold);cursor:pointer;border-block-end:var(--border-s)dashed transparent;padding:var(--space-xs);margin-block:0;margin-inline:calc(-1*var(--space-xs));transition-duration:var(--duration-short);transition-property:color,border-color;transition-timing-function:var(--ease-default);color:var(--color-body-text);-webkit-user-select:none;user-select:none;padding-inline-start:calc(var(--space-xs) + 1em);line-height:1;list-style:none;position:relative}@media (prefers-reduced-motion:no-preference){.accordion summary{transition-property:color,border-color,padding,margin}}.accordion summary:is(:hover,.hover){color:var(--lightningcss-light,var(--color-brand-4))var(--lightningcss-dark,var(--color-brand-2))}.accordion summary:is(:active,.active){color:var(--lightningcss-light,var(--color-brand-2))var(--lightningcss-dark,var(--color-brand-4))}.accordion summary::-webkit-details-marker{display:none}.accordion summary:before{content:"";background-color:var(--color-body-text-alt);width:1em;height:1em;transition:rotate var(--duration-long)var(--ease-spring);margin:auto;display:inline-block;position:absolute;inset-block:0;inset-inline-start:calc(var(--space-xs)/2);rotate:-90deg;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9l6 6l6-6' /%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9l6 6l6-6' /%3E%3C/svg%3E");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.accordion summary:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)):before{rotate:90deg}@media (prefers-reduced-motion){.accordion summary{transition-property:color,border-color}.accordion summary:before{transition:none}}.accordion.subtle details{box-shadow:none;background-color:#0000;border:0;padding-inline-start:calc(var(--space-xs) + 1em)}.accordion.subtle details[open] summary{margin-block-end:var(--space-3xs)}.accordion.subtle summary{padding-block:var(--space-2xs);border-block-end:0;margin-inline-start:calc(-1*(var(--space-xs) + 1em))}.alert{border-radius:var(--radius-s);padding:var(--space-2xs);border-start-start-radius:calc(var(--space-2xs) + 2em);border-end-start-radius:calc(var(--space-2xs) + 2em);padding-inline-start:calc(var(--space-2xs) + 2em)}.alert:before,.alert:after{inset-inline-start:calc(var(--space-2xs)*.5)}.app{--app-max-content-width:110rem;--app-header-height:clamp(50px,3.8rem,100px);--app-sidebar-width:clamp(300px,18rem,450px);width:100%;min-height:100svh;font-family:var(--font-family-body);font-size:var(--font-size-m);flex-direction:column;display:flex;position:relative}.app-header{height:var(--app-header-height);width:100%;color:var(--color-brand-3);background-color:var(--color-body-alt);border-bottom:var(--border-l)solid var(--color-brand-transparent);box-shadow:var(--shadow-s);flex:none;position:sticky;left:0}.app-header-content{width:100%;height:100%;max-width:var(--app-max-content-width);padding-inline:calc(var(--space-body-x) - var(--space-xs));justify-content:space-between;align-items:center;gap:var(--space-s);margin-inline:auto;padding-block:6px;display:flex}.app-header-section{align-items:center;height:100%;margin:0;display:flex}.app-header-section:only-child{margin-inline:auto}.app-header-section:first-child{margin-inline-end:auto}.app-header-section:nth-child(n+3):before{content:"";background-color:var(--color-outline);height:2rem;width:var(--border-s);right:calc(var(--space-s)/2);position:relative}.app-header-item{cursor:pointer;height:100%;color:inherit;transition-property:color,background-color;transition-duration:var(--duration-short);transition-timing-function:var(--ease-default);font-size:1rem;font-weight:var(--font-weight-semibold);padding-inline:var(--space-xs);border-radius:var(--radius-m);align-items:center;text-decoration:none;display:flex;position:relative}.app-header-item:hover{background-color:var(--color-brand-extra-transparent)}.app-header-item:active{background-color:var(--color-brand-transparent)}.app-header-item:focus-visible{background-color:var(--color-brand-extra-transparent);outline-offset:calc(-1*var(--border-m))}.app-header-item:is([aria-current],.current){font-weight:var(--font-weight-bold)}.app-header-item:is([aria-current],.current):after{opacity:1}.app-header-item:after{content:"";width:100%;height:var(--border-l);bottom:calc(-1*(var(--border-l) + 6px));opacity:0;background-color:currentColor;border-radius:1px;position:absolute;left:0}.app-icon{background-color:var(--color-brand-3);border:var(--border-m)solid transparent;border-radius:var(--radius-full);width:2rem;height:2rem}.app-title-separator{content:"";background-color:var(--color-brand-transparent);width:var(--border-m);height:1.5rem;margin-inline:var(--space-2xs);position:relative;left:1px;rotate:22deg}.app-title{font-family:var(--font-family-heading);align-items:center;font-size:1.2rem;display:flex}.app-body{width:100%;max-width:var(--app-max-content-width);flex-direction:row;flex:none;margin-inline:auto;display:flex;position:relative}.app-sidebar{transition-property:opacity,display;transition-duration:var(--duration-medium);transition-timing-function:var(--ease-default);transition-behavior:allow-discrete;width:var(--app-sidebar-width);opacity:1;border-inline-end:var(--border-s)dashed var(--color-outline);flex:none}.app-sidebar-content{height:100dvh;position:sticky;top:0;overflow:auto}.app-sidebar-section:first-of-type{margin-block-start:var(--space-body-y)}.app-sidebar-section:not(:last-of-type){margin-block-end:var(--space-xs)}.app-sidebar-section:last-of-type{margin-block-end:var(--space-body-y)}.app-sidebar-heading{margin:0 var(--space-body-x)var(--space-3xs);font-size:1.2rem;font-family:var(--font-family-heading);font-weight:var(--font-weight-semibold)}.app-sidebar-item{margin:0 var(--space-2xs);padding:var(--space-2xs)calc(var(--space-body-x) - var(--space-2xs));border-radius:var(--radius-l);color:var(--color-body-text-alt);font-weight:var(--font-weight-normal);-webkit-user-select:none;user-select:none;transition-property:color,background-color,box-shadow;transition-duration:var(--duration-short);transition-timing-function:var(--ease-default);font-size:1rem;text-decoration:none;display:block}.app-sidebar-item:hover{background-color:var(--color-brand-extra-transparent)}.app-sidebar-item:active{color:var(--color-brand-1)}.app-sidebar-item:is([aria-current],.current){color:var(--color-brand-4);font-weight:var(--font-weight-bold)}.app-sidebar-item:hover:active{background-color:var(--color-brand-transparent)}.app-sidebar-item:focus-visible{outline-offset:0;background-color:var(--color-brand-extra-transparent)}.app-sidebar-toggle{width:2.75rem}.app-sidebar-toggle:has(input:focus-visible){background-color:var(--color-brand-extra-transparent);outline:var(--border-m)solid var(--color-brand-5);outline-offset:calc(-1*var(--border-m))}.app-sidebar-toggle>div{transition-property:transform,opacity;transition-duration:var(--duration-long);transition-timing-function:var(--ease-out);opacity:1;background-color:currentColor;border-radius:2px;width:1.75rem;height:2px;position:absolute;top:50%;left:50%}.app-sidebar-toggle>div:first-of-type{transform:translateY(calc(-50% - .45rem))translate(-50%)}.app-sidebar-toggle>div:nth-of-type(2){transform:translateY(-50%)translate(-50%)}.app-sidebar-toggle>div:nth-of-type(3){transform:translateY(calc(.45rem - 50%))translate(-50%)}.app-sidebar-toggle:has(input:checked)>div:first-of-type{transform:translateY(-50%)translate(-50%)rotate(45deg)}.app-sidebar-toggle:has(input:checked)>div:nth-of-type(2){opacity:0;transform:translateY(-50%)translate(-50%)rotateY(90deg)}.app-sidebar-toggle:has(input:checked)>div:nth-of-type(3){transform:translateY(-50%)translate(-50%)rotate(-45deg)}.app-content{width:100%;padding:var(--space-body-y)var(--space-body-x);position:relative}.app-sidebar~.app-content{width:calc(100% - var(--app-sidebar-width))}.app-header-section:has(.app-sidebar-toggle){display:none}@media (width<55rem){.app-sidebar~.app-content{width:100%}.app-sidebar{top:var(--app-header-height);opacity:1;-webkit-backdrop-filter:blur(24px)saturate(120%);backdrop-filter:blur(24px)saturate(120%);z-index:9;background-color:var(--lightningcss-light,#fffc)var(--lightningcss-dark,#000a);border-right:0;width:100vw;position:fixed;left:0}.app-sidebar:after{content:initial}.app-header-section:has(.app-sidebar-toggle){display:flex}.app-sidebar-content{height:calc(100dvh - var(--app-header-height))}.app:not(:has(.app-sidebar-toggle input:checked)) .app-sidebar{opacity:0;display:none}.app:has(.app-sidebar-toggle input:checked){overflow:hidden}.app:has(.app-sidebar-toggle input:checked)>.banner{display:none}.app:has(.app-sidebar-toggle input:checked) .app-header{z-index:10;position:fixed;top:0}.app:has(.app-sidebar-toggle input:checked) .app-content{top:var(--app-header-height)}}.app:has(dialog:modal){overflow:hidden}@starting-style{.app>.sidebar{opacity:0}}.banner{width:100%;padding:var(--space-xs)var(--space-body-x);border-inline-width:0;padding-inline-start:calc(var(--space-body-x) + 2em)}.banner:has(.button.dismiss){padding-inline-end:calc(var(--space-body-x) + 2em)}.banner:before,.banner:after{inset-inline-start:calc(var(--space-body-x)*.5)}.banner+.banner{border-block-start-width:0}.banner.error{--banner-dismiss-icon-color:var(--color-red-4);--banner-dismiss-hover-bg:var(--color-red-extra-transparent);--banner-dismiss-focus-bg:var(--color-red-transparent)}.banner.warning{--banner-dismiss-icon-color:var(--color-yellow-4);--banner-dismiss-hover-bg:var(--color-yellow-extra-transparent);--banner-dismiss-focus-bg:var(--color-yellow-transparent)}.banner.success{--banner-dismiss-icon-color:var(--color-green-4);--banner-dismiss-hover-bg:var(--color-green-extra-transparent);--banner-dismiss-focus-bg:var(--color-green-transparent)}.banner.info{--banner-dismiss-icon-color:var(--color-sky-4);--banner-dismiss-hover-bg:var(--color-sky-extra-transparent);--banner-dismiss-focus-bg:var(--color-sky-transparent)}.banner .button.dismiss{--button-fg-color:var(--banner-dismiss-icon-color);--button-hover-bg-color:var(--banner-dismiss-hover-bg);margin:auto;position:absolute;inset-block:0;inset-inline-end:calc(var(--space-body-x)*.5)}.banner .button.dismiss:is(:focus-visible,.focus){--button-bg-color:var(--banner-dismiss-focus-bg)}.button{--button-fg-color:var(--color-body-text);--button-bg-color:var(--color-gray-9);--button-border-color:var(--color-gray-8);--button-font-weight:var(--font-weight-normal);--button-focus-ring-color:var(--color-gray-extra-transparent);--button-shadow:var(--shadow-s);--button-hover-bg-color:var(--button-border-color);box-sizing:border-box;transition-property:box-shadow,background-color,transform,opacity;transition-duration:var(--duration-medium);transition-timing-function:var(--ease-default);cursor:pointer;border-style:solid;border-width:var(--border-s);border-radius:var(--radius-m);min-width:3em;min-height:2.6em;line-height:1;font-family:var(--font-family-body);box-shadow:var(--button-shadow);-webkit-user-select:none;user-select:none;color:var(--button-fg-color);background-color:var(--button-bg-color);border-color:var(--button-border-color);font-size:1rem;font-weight:var(--button-font-weight);outline:0;justify-content:center;align-items:center;gap:.625em;padding-block:.75em;padding-inline:1.25em;text-decoration:none;display:inline-flex;position:relative;overflow:hidden;transform:scale(1)}.button:before{content:"";background-color:var(--button-hover-bg-color);transition-property:opacity,width,height,border-radius;transition-duration:var(--duration-medium);transition-timing-function:var(--ease-default);z-index:-1;opacity:0;border-radius:2em;width:4em;height:4em;margin:auto;position:absolute;inset:0}.button:is(:focus-visible,.focus){box-shadow:var(--button-shadow),0 0 0 .1em var(--button-border-color),0 0 0 calc(.2em + var(--border-s))var(--button-focus-ring-color)}.button:is(:active,.active){transform:scale(.98)}@media screen and (resolution<2x){.button:is(:active,.active){transform:translateY(1px)}}.button:is(:hover,.hover){text-decoration:none}.button:is(:hover,.hover):before{opacity:1;border-radius:5px;width:100%;height:100%}.button:is(:hover,.hover):is(input){background-color:var(--button-hover-bg-color)}.button.primary{--button-fg-color:white;--button-bg-color:var(--color-brand-5);--button-border-color:var(--color-brand-4);--button-font-weight:var(--font-weight-bold);--button-focus-ring-color:var(--color-brand-transparent)}.button.primary.red{--button-bg-color:var(--color-red-5);--button-border-color:var(--color-red-4);--button-focus-ring-color:var(--color-red-transparent)}.button.primary.orange{--button-bg-color:var(--color-orange-5);--button-border-color:var(--color-orange-4);--button-focus-ring-color:var(--color-orange-transparent)}.button.primary.yellow{--button-bg-color:var(--color-yellow-5);--button-border-color:var(--color-yellow-4);--button-focus-ring-color:var(--color-yellow-transparent)}.button.primary.green{--button-bg-color:var(--color-green-5);--button-border-color:var(--color-green-4);--button-focus-ring-color:var(--color-green-transparent)}.button.primary.sky{--button-bg-color:var(--color-sky-5);--button-border-color:var(--color-sky-4);--button-focus-ring-color:var(--color-sky-transparent)}.button.primary.blue{--button-bg-color:var(--color-blue-5);--button-border-color:var(--color-blue-4);--button-focus-ring-color:var(--color-blue-transparent)}.button.primary.purple{--button-bg-color:var(--color-purple-5);--button-border-color:var(--color-purple-4);--button-focus-ring-color:var(--color-purple-transparent)}.button.primary.magenta{--button-bg-color:var(--color-magenta-5);--button-border-color:var(--color-magenta-4);--button-focus-ring-color:var(--color-magenta-transparent)}.button.primary.gray{--button-bg-color:var(--color-gray-5);--button-border-color:var(--color-gray-4);--button-focus-ring-color:var(--color-gray-transparent)}.button.primary.black{--button-bg-color:black;--button-border-color:#3d3d3d;--button-focus-ring-color:var(--color-gray-transparent)}.button.primary.white{--button-fg-color:black;--button-bg-color:white;--button-border-color:#d0d0d0;--button-focus-ring-color:var(--color-gray-transparent)}.button.subtle{--button-fg-color:var(--color-brand-4);--button-bg-color:transparent;--button-border-color:transparent;--button-hover-bg-color:var(--color-brand-extra-transparent);--button-font-weight:var(--font-weight-bold);--button-focus-ring-color:transparent;--button-shadow:none}.button.subtle:is(:focus-visible,.focus){--button-bg-color:var(--color-brand-transparent);--button-hover-bg-color:transparent}.button.subtle.red{--button-fg-color:var(--color-red-4);--button-hover-bg-color:var(--color-red-extra-transparent)}.button.subtle.red:is(:focus-visible,.focus){--button-bg-color:var(--color-red-transparent)}.button.subtle.orange{--button-fg-color:var(--color-orange-4);--button-hover-bg-color:var(--color-orange-extra-transparent)}.button.subtle.orange:is(:focus-visible,.focus){--button-bg-color:var(--color-orange-transparent)}.button.subtle.yellow{--button-fg-color:var(--color-yellow-4);--button-hover-bg-color:var(--color-yellow-extra-transparent)}.button.subtle.yellow:is(:focus-visible,.focus){--button-bg-color:var(--color-yellow-transparent)}.button.subtle.green{--button-fg-color:var(--color-green-4);--button-hover-bg-color:var(--color-green-extra-transparent)}.button.subtle.green:is(:focus-visible,.focus){--button-bg-color:var(--color-green-transparent)}.button.subtle.sky{--button-fg-color:var(--color-sky-4);--button-hover-bg-color:var(--color-sky-extra-transparent)}.button.subtle.sky:is(:focus-visible,.focus){--button-bg-color:var(--color-sky-transparent)}.button.subtle.blue{--button-fg-color:var(--color-blue-4);--button-hover-bg-color:var(--color-blue-extra-transparent)}.button.subtle.blue:is(:focus-visible,.focus){--button-bg-color:var(--color-blue-transparent)}.button.subtle.purple{--button-fg-color:var(--color-purple-4);--button-hover-bg-color:var(--color-purple-extra-transparent)}.button.subtle.purple:is(:focus-visible,.focus){--button-bg-color:var(--color-purple-transparent)}.button.subtle.magenta{--button-fg-color:var(--color-magenta-4);--button-hover-bg-color:var(--color-magenta-extra-transparent)}.button.subtle.magenta:is(:focus-visible,.focus){--button-bg-color:var(--color-magenta-transparent)}.button.subtle.gray,.button.subtle.black,.button.subtle.white{--button-hover-bg-color:var(--color-gray-extra-transparent)}:is(.button.subtle.gray,.button.subtle.black,.button.subtle.white):is(:focus-visible,.focus){--button-bg-color:var(--color-gray-transparent)}.button.subtle.gray{--button-fg-color:var(--color-gray-4)}.button.subtle.black{--button-fg-color:black}.button.subtle.white{--button-fg-color:white}.button.small{font-size:.8rem}.button.large{font-size:1.2rem}.button.icon{border-radius:var(--radius-full);aspect-ratio:1;min-width:0;min-height:0;padding:.5em}.button.icon.subtle:before{width:75%;height:75%}.button.icon.subtle:is(:hover,.hover):before{border-radius:100%;width:100%;height:100%}.button.icon:not(.subtle):before{content:unset}.button.icon:not(.subtle):is(:hover,.hover){background-color:var(--button-hover-bg-color)}.button:is(:disabled,.disabled,[aria-disabled=true]){opacity:var(--opacity-disabled);cursor:not-allowed;transform:scale(1)}.button:is(:disabled,.disabled,[aria-disabled=true]):is(:hover,.hover):before{opacity:0}.button.loading{cursor:progress}.button.loading:before{animation:button-loading-bg 1.2s var(--ease-both-subtle)infinite forwards;opacity:1!important;border-radius:inherit!important;height:100%!important}.button.loading:is(:disabled,.disabled,[aria-disabled=true]){cursor:wait}@keyframes button-loading-bg{0%{width:0;margin:0 auto 0 0}50%{width:100%}to{width:0;margin:0 0 0 auto}}.chip{--chip-fg-color:white;--chip-bg-color:var(--color-brand-6);--chip-border-color:var(--color-brand-5);--chip-focus-color:var(--color-brand-transparent);border-radius:var(--radius-full);font-size:var(--font-size-s);font-family:var(--font-family-body);font-weight:var(--font-weight-normal);padding-block:var(--space-3xs);padding-inline:var(--space-xs);background-color:var(--chip-bg-color);border:var(--border-s)solid var(--chip-border-color);color:var(--chip-fg-color);cursor:default;transition-property:box-shadow,background-color,border-color,transform;transition-duration:var(--duration-medium);transition-timing-function:var(--ease-default);appearance:none;flex-shrink:0;align-items:center;line-height:1.2;text-decoration:none;display:inline-flex}.chip.clickable{cursor:pointer;box-shadow:var(--shadow-s);transform:scale(1)}.chip.clickable:is(:focus-visible,.focus){box-shadow:var(--shadow-s),0 0 0 .1em var(--chip-border-color),0 0 0 calc(.2em + var(--border-s))var(--chip-focus-color);outline:0}.chip.clickable:is(:hover,.hover){background-color:var(--chip-border-color)}.chip.clickable:is(:active,.active){transform:scale(.96)}@media screen and (resolution<2x){.chip.clickable:is(:active,.active){transform:translateY(1px)}}.chip.red{--chip-bg-color:var(--color-red-6);--chip-border-color:var(--color-red-5);--chip-focus-color:var(--color-red-transparent)}.chip.orange{--chip-bg-color:var(--color-orange-6);--chip-border-color:var(--color-orange-5);--chip-focus-color:var(--color-orange-transparent)}.chip.yellow{--chip-bg-color:var(--color-yellow-6);--chip-border-color:var(--color-yellow-5);--chip-focus-color:var(--color-yellow-transparent)}.chip.green{--chip-bg-color:var(--color-green-6);--chip-border-color:var(--color-green-5);--chip-focus-color:var(--color-green-transparent)}.chip.sky{--chip-bg-color:var(--color-sky-6);--chip-border-color:var(--color-sky-5);--chip-focus-color:var(--color-sky-transparent)}.chip.blue{--chip-bg-color:var(--color-blue-6);--chip-border-color:var(--color-blue-5);--chip-focus-color:var(--color-blue-transparent)}.chip.purple{--chip-bg-color:var(--color-purple-6);--chip-border-color:var(--color-purple-5);--chip-focus-color:var(--color-purple-transparent)}.chip.magenta{--chip-bg-color:var(--color-magenta-6);--chip-border-color:var(--color-magenta-5);--chip-focus-color:var(--color-magenta-transparent)}.chip.gray{--chip-bg-color:var(--color-gray-6);--chip-border-color:var(--color-gray-5);--chip-focus-color:var(--color-gray-transparent)}.chip.black{--chip-bg-color:black;--chip-border-color:#3d3d3d;--chip-focus-color:var(--color-gray-transparent)}.chip.white{--chip-fg-color:black;--chip-bg-color:white;--chip-border-color:#d0d0d0;--chip-focus-color:var(--color-gray-transparent)}.chip-delete{margin-inline:var(--space-3xs)calc(-1*var(--space-2xs));border-radius:var(--radius-full);transition-property:background-color,outline-color,filter;transition-duration:var(--duration-short);transition-timing-function:var(--ease-default);cursor:pointer;-webkit-user-select:none;user-select:none;background-color:var(--chip-border-color);width:2em;height:2em;box-shadow:none;border:0;outline:1px solid #0000;padding:0;font-size:.6em;display:inline-flex;position:relative;overflow:hidden}.chip-delete:after{content:"";background-color:var(--chip-fg-color);width:1.7em;height:1.7em;margin:auto;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M368 368L144 144M368 144L144 368' /%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M368 368L144 144M368 144L144 368' /%3E%3C/svg%3E");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.chip-delete:is(:focus-visible,.focus){outline-color:var(--chip-fg-color)}.chip-delete:is(:hover,.hover){background-color:hsl(from var(--chip-border-color)h s calc(l + 5))}.chip-delete:is(:active,.active){background-color:hsl(from var(--chip-border-color)h s calc(l - 20))}.divider,:where(.style-semantic-elements hr,.style-semantic-elements br){--divider-thickness:var(--border-s);border-style:solid;border-color:var(--color-outline);border-width:0;border-top-width:var(--divider-thickness);margin:var(--space-xs)0;print-color-adjust:exact;outline:0;width:100%;height:0;display:block;position:relative}:is(.divider,:where(.style-semantic-elements hr,.style-semantic-elements br)).vertical{border-top-width:0;border-left-width:var(--divider-thickness);margin:auto var(--space-xs);width:0;height:100%;min-height:1em;display:inline-block}.divider.invisible,:where(.style-semantic-elements br){visibility:hidden}.divider.thick{--divider-thickness:var(--border-m)}.divider.thicker{--divider-thickness:var(--border-l)}.divider.dashed{border-style:dashed}.divider.dotted{border-style:dotted}.drawer{--dialog-starting-opacity:1;--dialog-ending-opacity:1;border:0;border-radius:0;margin:0;position:fixed;inset:0;overflow:auto;transition-duration:var(--duration-extra-long)!important}.drawer.left{right:auto}@media (prefers-reduced-motion:no-preference){.drawer.left{--dialog-starting-transform:translateX(-100%);--dialog-ending-transform:translateX(-100%)}}.drawer.top{bottom:auto}@media (prefers-reduced-motion:no-preference){.drawer.top{--dialog-starting-transform:translateY(-100%);--dialog-ending-transform:translateY(-100%)}}.drawer.right{left:auto}@media (prefers-reduced-motion:no-preference){.drawer.right{--dialog-starting-transform:translateX(100%);--dialog-ending-transform:translateX(100%)}}.drawer.bottom{top:auto}@media (prefers-reduced-motion:no-preference){.drawer.bottom{--dialog-starting-transform:translateY(100%);--dialog-ending-transform:translateY(100%)}}.drawer.top,.drawer.bottom{width:100dvw;max-width:unset;height:auto;min-height:min(100dvh,16rem);max-height:100dvh}:is(.drawer.top,.drawer.bottom).small{height:18rem}:is(.drawer.top,.drawer.bottom).medium{height:28rem}:is(.drawer.top,.drawer.bottom).large{height:38rem}.drawer.left,.drawer.right{height:100dvh;max-height:unset;width:auto;min-width:min(100dvw,18rem);max-width:100dvw}:is(.drawer.left,.drawer.right).small{width:22rem}:is(.drawer.left,.drawer.right).medium{width:32rem}:is(.drawer.left,.drawer.right).large{width:42rem}.drawer-body{height:100%}.drawer-footer{padding:var(--space-xs);gap:var(--space-xs);flex-shrink:0;justify-content:flex-start;margin:0;margin-block-start:auto;display:flex}.drawer-footer>*{width:100%}.field{--field-gap:var(--space-2xs);--field-padding:.5em;--field-radius:var(--radius-m);gap:var(--field-gap);color:var(--color-body-text);line-height:1;font-weight:var(--font-weight-semibold);transition-property:color,box-shadow;transition-duration:var(--duration-medium);transition-timing-function:var(--ease-default);font-size:var(--font-size-m);font-family:var(--font-family-body);flex-direction:column;display:inline-flex}.field.compact,.fieldset.compact .field{--field-gap:calc(.9*var(--space-2xs));--field-padding:.33em;--field-radius:var(--radius-s);font-size:calc(.9*var(--font-size-m))}.field:focus-within{color:var(--color-brand-5)}.field:has(:user-invalid,[aria-invalid=true]){color:var(--color-red-5)}.field:has(:user-invalid,[aria-invalid=true]) .error-message{display:flex}.field:has([readonly]):focus-within{color:var(--color-gray-5)}.field input:not([type=button],[type=checkbox],[type=file],[type=hidden],[type=image],[type=radio],[type=range],[type=reset],[type=submit]),.field select,.field textarea{color:var(--color-body-text);border:var(--border-s)solid var(--color-outline);padding:var(--field-padding);border-radius:var(--field-radius);transition-property:color,box-shadow,border-color;transition-duration:var(--duration-medium);transition-timing-function:var(--ease-default);background-color:var(--lightningcss-light,#fff)var(--lightningcss-dark,#000);font-family:inherit;font-size:1em;line-height:1.25}:is(.field input:not([type=button],[type=checkbox],[type=file],[type=hidden],[type=image],[type=radio],[type=range],[type=reset],[type=submit]),.field select,.field textarea):focus{border-color:var(--color-brand-5);box-shadow:0 0 0 .1em var(--color-brand-5),0 0 0 calc(.2em + var(--border-s))var(--color-brand-transparent);outline:0}:is(.field input:not([type=button],[type=checkbox],[type=file],[type=hidden],[type=image],[type=radio],[type=range],[type=reset],[type=submit]),.field select,.field textarea):focus-visible{outline:0}:is(.field input:not([type=button],[type=checkbox],[type=file],[type=hidden],[type=image],[type=radio],[type=range],[type=reset],[type=submit]),.field select,.field textarea):disabled{opacity:var(--opacity-disabled);cursor:not-allowed}:is(.field input:not([type=button],[type=checkbox],[type=file],[type=hidden],[type=image],[type=radio],[type=range],[type=reset],[type=submit]),.field select,.field textarea)[readonly]{border-style:dashed}:is(.field input:not([type=button],[type=checkbox],[type=file],[type=hidden],[type=image],[type=radio],[type=range],[type=reset],[type=submit]),.field select,.field textarea)[readonly]:focus{border-style:solid;border-color:var(--color-gray-5);box-shadow:0 0 0 .1em var(--color-gray-5),0 0 0 calc(.2em + var(--border-s))var(--color-gray-transparent);outline:0}:is(:is(.field input:not([type=button],[type=checkbox],[type=file],[type=hidden],[type=image],[type=radio],[type=range],[type=reset],[type=submit]),.field select,.field textarea):user-invalid,:is(.field input:not([type=button],[type=checkbox],[type=file],[type=hidden],[type=image],[type=radio],[type=range],[type=reset],[type=submit]),.field select,.field textarea)[aria-invalid=true]){border-color:var(--color-red-5);box-shadow:0 0 0 .1em var(--color-red-5)}:is(:is(.field input:not([type=button],[type=checkbox],[type=file],[type=hidden],[type=image],[type=radio],[type=range],[type=reset],[type=submit]),.field select,.field textarea):user-invalid,:is(.field input:not([type=button],[type=checkbox],[type=file],[type=hidden],[type=image],[type=radio],[type=range],[type=reset],[type=submit]),.field select,.field textarea)[aria-invalid=true]):focus{border-color:var(--color-red-5);box-shadow:0 0 0 .1em var(--color-red-5),0 0 0 calc(.2em + var(--border-s))var(--color-red-transparent);outline:0}.field input[type=color]{cursor:pointer;block-size:auto;inline-size:auto}.field input[type=color]::-webkit-color-swatch-wrapper{padding:0}.field input[type=color]::-webkit-color-swatch{border-radius:var(--radius-s);border:0;block-size:1.25em;inline-size:100%}.field input[type=color]::-moz-color-swatch{border-radius:var(--radius-s);border:0;block-size:1.25em;inline-size:100%}.field select,.field input[list]{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='m6 9l6 6l6-6' /%3E%3C/svg%3E");background-position:right .25em center;background-repeat:no-repeat;background-size:auto 75%;padding-inline-end:calc(2*var(--space-2xs) + 1em)}:is(.field select,.field input[list]):is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){background-position:.25em 50%}@media (prefers-color-scheme:dark){.field select,.field input[list]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='m6 9l6 6l6-6' /%3E%3C/svg%3E")}}.field select{cursor:pointer}.field .help-text{color:var(--color-body-text-alt);font-size:.9em;font-weight:var(--font-weight-normal);margin:-.25em 0 0;position:relative}.field .error-message{font-size:.9em;font-weight:var(--font-weight-semibold);border:0;align-items:center;gap:2px;margin:0;padding:0;display:none}.field .error-message:before{content:"";background-color:currentColor;width:1.2em;height:1.2em;display:inline-block;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm75.31 260.69a16 16 0 11-22.62 22.62L256 278.63l-52.69 52.68a16 16 0 01-22.62-22.62L233.37 256l-52.68-52.69a16 16 0 0122.62-22.62L256 233.37l52.69-52.68a16 16 0 0122.62 22.62L278.63 256z' /%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm75.31 260.69a16 16 0 11-22.62 22.62L256 278.63l-52.69 52.68a16 16 0 01-22.62-22.62L233.37 256l-52.68-52.69a16 16 0 0122.62-22.62L256 233.37l52.69-52.68a16 16 0 0122.62 22.62L278.63 256z' /%3E%3C/svg%3E");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.field .input-group{flex-direction:row;align-items:stretch;display:flex}.field .input-group>*{z-index:1;border-radius:0!important}.field .input-group>:is(:user-invalid,[aria-invalid=true]){z-index:2}.field .input-group>:first-child{border-start-start-radius:var(--field-radius)!important;border-end-start-radius:var(--field-radius)!important}.field .input-group>:last-child{border-start-end-radius:var(--field-radius)!important;border-end-end-radius:var(--field-radius)!important}.field .input-group>:focus-visible{z-index:3}.field .input-group>:is(.prefix,.suffix,.action){-webkit-user-select:none;user-select:none;-webkit-user-drag:none;font-weight:var(--font-weight-normal);color:var(--color-gray-3);background-color:var(--color-gray-9);border:var(--border-s)solid var(--color-outline);padding:var(--field-padding)calc(2*var(--field-padding));justify-content:center;align-items:center;font-size:.9em;display:flex}.field .input-group>:is(.prefix,.suffix,.action) :is(img,svg){width:auto;height:1.15em}.field .input-group>.prefix{border-inline-end:0}.field .input-group>.suffix{border-inline-start:0}.field .input-group>.action{cursor:pointer;color:var(--color-brand-3);transition-property:box-shadow,background-color;transition-duration:var(--duration-medium);transition-timing-function:var(--ease-default);border-inline-start:0}.field .input-group>.action:hover{background-color:var(--color-gray-8)}.field .input-group>.action:active{background-color:var(--color-gray-7)}.field .input-group>.action:focus-visible{border-color:var(--color-brand-5);border-inline-start-width:var(--border-s);box-shadow:0 0 0 .11em var(--color-brand-5),0 0 0 calc(.22em + var(--border-s))var(--color-brand-transparent);border-inline-start-style:solid;outline:0}.field .input-group>:is(input,select,textarea){width:100%}.field .input-group>:is(input,select,textarea):has(~.action:focus-visible){border-inline-end-width:0}.field .required-indicator{color:var(--color-red-5);font-size:.9em;font-weight:var(--font-weight-semibold);display:inline;position:relative;inset-block-end:.15em;inset-inline-start:.15em}input[type=checkbox],input[type=radio]{accent-color:var(--color-brand-5)}fieldset.fieldset{border:var(--border-s)solid var(--color-outline);border-radius:var(--radius-s);background-color:var(--color-body);color:var(--color-body-text)}fieldset.fieldset legend{font-family:var(--font-family-heading);font-weight:var(--font-weight-bold);transition:color var(--duration-medium)var(--ease-default)}fieldset.fieldset:focus-within legend{color:var(--color-brand-5)}.form{max-width:60ch;margin-inline-end:auto}.flow,.stack,.separate,.space{gap:var(--space-s);display:flex!important}:is(.flow,.stack,.separate,.space).no-gap{gap:var(--space-none)}:is(.flow,.stack,.separate,.space).densest{gap:var(--space-3xs)}:is(.flow,.stack,.separate,.space).denser{gap:var(--space-2xs)}:is(.flow,.stack,.separate,.space).dense{gap:var(--space-xs)}:is(.flow,.stack,.separate,.space).sparse{gap:var(--space-m)}:is(.flow,.stack,.separate,.space).sparser{gap:var(--space-l)}:is(.flow,.stack,.separate,.space).sparsest{gap:var(--space-xl)}:is(.flow,.stack,.separate,.space).horizontal,:is(.flow,.stack,.separate,.space).horizontally{flex-direction:row}:is(.flow,.stack,.separate,.space).vertical,:is(.flow,.stack,.separate,.space).vertically{flex-direction:column}.flow{flex-wrap:wrap;justify-content:start;align-items:center}.stack{flex-wrap:nowrap;justify-content:start;align-items:stretch}.separate{flex-wrap:nowrap;justify-content:space-between;align-items:center}.space{flex-wrap:wrap;justify-content:space-evenly;align-items:center}.heading-1,.heading-2,.heading-3,.heading-4,.heading-5,.heading-6,:where(.style-semantic-elements :is(h1,h2,h3,h4,h5,h6)){font-family:var(--font-family-heading);text-wrap:balance;overflow-wrap:break-word;margin-block:.75em .3em;line-height:1.15}.heading-1,:where(.style-semantic-elements h1){font-size:var(--font-size-4xl);font-weight:var(--font-weight-black);margin-block-start:0}.app-content>:is(.heading-1,:where(.style-semantic-elements h1)):first-of-type{margin-block-start:0}.heading-2,:where(.style-semantic-elements h2){font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold)}.heading-3,:where(.style-semantic-elements h3){font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold)}.heading-4,:where(.style-semantic-elements h4){font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold)}.heading-5,:where(.style-semantic-elements h5){font-size:var(--font-size-l);font-weight:var(--font-weight-semibold)}.heading-6,:where(.style-semantic-elements h6){font-size:var(--font-size-m);font-weight:var(--font-weight-bold)}.highlight,:where(.style-semantic-elements mark){background-color:var(--color-yellow-8);color:var(--color-yellow-1);print-color-adjust:exact}.highlight.removed,:where(.style-semantic-elements del){background-color:var(--color-red-8);color:var(--color-red-1);transition:text-decoration-color var(--duration-short)var(--ease-default);-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;text-decoration-line:line-through;text-decoration-thickness:var(--border-m);-webkit-text-decoration-color:var(--color-red-4);text-decoration-color:var(--color-red-4);print-color-adjust:exact}:is(.highlight.removed,:where(.style-semantic-elements del)):hover{text-decoration-color:#0000}.highlight.added,:where(.style-semantic-elements ins){background-color:var(--color-green-8);color:var(--color-green-1);text-decoration-thickness:var(--border-m);-webkit-text-decoration-color:var(--color-green-4);text-decoration-color:var(--color-green-4);text-underline-offset:.1em;print-color-adjust:exact}.highlight.target{background-color:var(--color-brand-8);color:var(--color-brand-1);print-color-adjust:exact}::target-text{background-color:var(--color-brand-8);color:var(--color-brand-1);print-color-adjust:exact}.link,.card-title[href],:where(.style-semantic-elements a){color:var(--color-sky-4);font-weight:var(--font-weight-semibold);text-decoration-line:underline;-webkit-text-decoration-color:var(--color-sky-transparent);text-decoration-color:var(--color-sky-transparent);-webkit-text-decoration-skip-ink:all;text-decoration-skip-ink:all;text-underline-offset:.1em;cursor:pointer;transition:text-decoration-color var(--duration-short)var(--ease-default);text-decoration-thickness:.1em}:is(.link,.card-title[href],:where(.style-semantic-elements a)):is(:hover,.hover){text-decoration-color:currentColor}:is(.link,.card-title[href],:where(.style-semantic-elements a)):focus-visible{outline-offset:1px}:is(a[target=_blank]:is(.link,.button,.app-sidebar-item):not(.no-external-icon),:where(.style-semantic-elements a[target=_blank]:not(.no-external-icon)),a[download]:is(.link,.button,.app-sidebar-item):not(.no-download-icon),:where(.style-semantic-elements a[download]:not(.no-download-icon))):after{content:"";print-color-adjust:exact;background-color:var(--color-gray-5);vertical-align:baseline;transition:background-color var(--duration-short)var(--ease-default);margin-inline-start:.25em;display:inline-block;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}:is(a[target=_blank]:is(.link,.button,.app-sidebar-item):not(.no-external-icon),:where(.style-semantic-elements a[target=_blank]:not(.no-external-icon)),a[download]:is(.link,.button,.app-sidebar-item):not(.no-download-icon),:where(.style-semantic-elements a[download]:not(.no-download-icon))):hover:after{background-color:var(--color-gray-4)}:is(a[target=_blank]:is(.link,.button,.app-sidebar-item):not(.no-external-icon),:where(.style-semantic-elements a[target=_blank]:not(.no-external-icon)),a[download]:is(.link,.button,.app-sidebar-item):not(.no-download-icon),:where(.style-semantic-elements a[download]:not(.no-download-icon))).button:after{margin-inline-start:initial;background-color:currentColor!important}:is(a[target=_blank]:is(.link,.button,.app-sidebar-item):not(.no-external-icon),:where(.style-semantic-elements a[target=_blank]:not(.no-external-icon)),a[download]:is(.link,.button,.app-sidebar-item):not(.no-download-icon),:where(.style-semantic-elements a[download]:not(.no-download-icon)))[target=_blank]:after{width:.85em;height:.85em;transform:translateY(9%);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6m4-3h6v6m-11 5L21 3' /%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6m4-3h6v6m-11 5L21 3' /%3E%3C/svg%3E")}:is(a[target=_blank]:is(.link,.button,.app-sidebar-item):not(.no-external-icon),:where(.style-semantic-elements a[target=_blank]:not(.no-external-icon)),a[download]:is(.link,.button,.app-sidebar-item):not(.no-download-icon),:where(.style-semantic-elements a[download]:not(.no-download-icon)))[target=_blank].button:after{transform:translateY(2%)}:is(a[target=_blank]:is(.link,.button,.app-sidebar-item):not(.no-external-icon),:where(.style-semantic-elements a[target=_blank]:not(.no-external-icon)),a[download]:is(.link,.button,.app-sidebar-item):not(.no-download-icon),:where(.style-semantic-elements a[download]:not(.no-download-icon)))[download]:after{width:.95em;height:.95em;transform:translateY(7%);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='36' d='M336 176h40a40 40 0 0140 40v208a40 40 0 01-40 40H136a40 40 0 01-40-40V216a40 40 0 0140-40h40' /%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='36' d='M176 272l80 80 80-80M256 48v288' /%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='36' d='M336 176h40a40 40 0 0140 40v208a40 40 0 01-40 40H136a40 40 0 01-40-40V216a40 40 0 0140-40h40' /%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='36' d='M176 272l80 80 80-80M256 48v288' /%3E%3C/svg%3E")}:is(a[target=_blank]:is(.link,.button,.app-sidebar-item):not(.no-external-icon),:where(.style-semantic-elements a[target=_blank]:not(.no-external-icon)),a[download]:is(.link,.button,.app-sidebar-item):not(.no-download-icon),:where(.style-semantic-elements a[download]:not(.no-download-icon)))[download].button:after{transform:translateY(-5%)}.list li+li,.list .list,.style-semantic-elements li+li,.style-semantic-elements :is(ol,ul) :is(ol,ul){margin-block-start:var(--space-2xs)}ol.list li::marker{color:var(--color-body-text-alt);font-size:.85em;font-family:var(--font-family-heading);font-weight:var(--font-weight-semibold);line-height:0}.style-semantic-elements ol li::marker{color:var(--color-body-text-alt);font-size:.85em;font-family:var(--font-family-heading);font-weight:var(--font-weight-semibold);line-height:0}ul.list li::marker{color:var(--color-body-text-alt);font-weight:var(--font-weight-bold)}.style-semantic-elements ul li::marker{color:var(--color-body-text-alt);font-weight:var(--font-weight-bold)}ol.list,ol.list ol.list ol.list ol.list,.style-semantic-elements ol,.style-semantic-elements ol ol ol ol{list-style:decimal}ol.list ol.list,ol.list ol.list ol.list ol.list ol.list,.style-semantic-elements ol ol,.style-semantic-elements ol ol ol ol ol{list-style:lower-latin}ol.list ol.list ol.list,ol.list ol.list ol.list ol.list ol.list ol.list,.style-semantic-elements ol ol ol,.style-semantic-elements ol ol ol ol ol ol{list-style:lower-roman}ul.list,ul.list ul.list ul.list ul.list,.style-semantic-elements ul,.style-semantic-elements ul ul ul ul{list-style:outside}ul.list ul.list,ul.list ul.list ul.list ul.list ul.list,.style-semantic-elements ul ul,.style-semantic-elements ul ul ul ul ul{list-style:circle}ul.list ul.list ul.list,ul.list ul.list ul.list ul.list ul.list ul.list,.style-semantic-elements ul ul ul,.style-semantic-elements ul ul ul ul ul ul{list-style:square}ol.list ol.list ol.list ol.list li::marker{color:var(--color-brand-3)}ul.list ul.list ul.list ul.list li::marker{color:var(--color-brand-3)}.style-semantic-elements ol ol ol ol li::marker{color:var(--color-brand-3)}.style-semantic-elements ul ul ul ul li::marker{color:var(--color-brand-3)}meter.meter{appearance:none;block-size:1em;inline-size:100%}@supports selector(::-moz-meter-bar){meter.meter{border-radius:var(--radius-s);block-size:1em;inline-size:100%;box-shadow:inset 0 0 0 var(--border-s)var(--color-outline);background:var(--color-gray-9);box-sizing:border-box;border:0;display:block;overflow:clip}}.meter::-webkit-meter-bar{border-radius:var(--radius-s);block-size:1em;inline-size:100%;box-shadow:inset 0 0 0 var(--border-s)var(--color-outline);background:var(--color-gray-9);box-sizing:border-box;border:0;display:block;overflow:clip}.meter::-webkit-meter-optimum-value{border-radius:var(--radius-s);border:var(--border-s)solid transparent;box-sizing:border-box}.meter::-webkit-meter-suboptimum-value{border-radius:var(--radius-s);border:var(--border-s)solid transparent;box-sizing:border-box}.meter::-webkit-meter-even-less-good-value{border-radius:var(--radius-s);border:var(--border-s)solid transparent;box-sizing:border-box}.meter::-webkit-meter-inner-element{display:inline-block;position:relative}.meter::-moz-meter-bar{border-radius:var(--radius-s);border:var(--border-s)solid transparent;box-sizing:border-box}.meter::-webkit-meter-optimum-value{background:var(--color-green-6);border-color:var(--color-green-5)}.meter:-moz-meter-optimum::-moz-meter-bar{background:var(--color-green-6);border-color:var(--color-green-5)}.meter::-webkit-meter-suboptimum-value{background:var(--lightningcss-light,var(--color-yellow-7))var(--lightningcss-dark,var(--color-yellow-5));border-color:var(--lightningcss-light,var(--color-yellow-6))var(--lightningcss-dark,var(--color-yellow-4))}.meter:-moz-meter-sub-optimum::-moz-meter-bar{background:var(--lightningcss-light,var(--color-yellow-7))var(--lightningcss-dark,var(--color-yellow-5));border-color:var(--lightningcss-light,var(--color-yellow-6))var(--lightningcss-dark,var(--color-yellow-4))}.meter::-webkit-meter-even-less-good-value{background:var(--color-red-6);border-color:var(--color-red-5)}.meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:var(--color-red-6);border-color:var(--color-red-5)}.modal{max-height:calc(100svh - 4*var(--space-body-y));max-width:calc(100svw - 4*var(--space-body-x));margin:auto}.modal.small{width:25rem}.modal.medium{width:40rem}.modal.large{width:55rem}.modal-footer{padding:var(--space-xs);gap:var(--space-2xs);background-color:var(--color-body);border-block-start:var(--border-s)solid var(--color-outline);flex-shrink:0;justify-content:flex-start;margin:0;display:flex}@media screen and (width<30rem){.modal-footer{flex-direction:column;justify-content:stretch;width:100%}}.modal-footer .button:not(.small,.medium,.large){font-size:.9rem}@keyframes indeterminate-progress{0%{opacity:.2}to{opacity:.8}}progress.progress{appearance:none;block-size:1em;inline-size:100%}@supports selector(::-moz-progress-bar){progress.progress{border-radius:var(--radius-s);block-size:1em;inline-size:100%;box-shadow:inset 0 0 0 var(--border-s)var(--color-outline);background:var(--color-gray-9);box-sizing:border-box;border:0;display:block;overflow:clip}}.progress::-webkit-progress-bar{border-radius:var(--radius-s);block-size:1em;inline-size:100%;box-shadow:inset 0 0 0 var(--border-s)var(--color-outline);background:var(--color-gray-9);box-sizing:border-box;border:0;display:block;overflow:clip}.progress::-webkit-progress-value{border-radius:var(--radius-s);border:var(--border-s)solid transparent;box-sizing:border-box;background:var(--color-blue-6);border-color:var(--color-blue-5)}.progress::-moz-progress-bar{border-radius:var(--radius-s);border:var(--border-s)solid transparent;box-sizing:border-box;background:var(--color-blue-6);border-color:var(--color-blue-5)}.progress:indeterminate::-webkit-progress-value{background:var(--color-blue-6);border-color:var(--color-blue-5);opacity:.5;animation:indeterminate-progress 1s var(--ease-both-subtle)infinite alternate;inline-size:100%!important}.progress:indeterminate::-moz-progress-bar{background:var(--color-blue-6);border-color:var(--color-blue-5);opacity:.5;animation:indeterminate-progress 1s var(--ease-both-subtle)infinite alternate;inline-size:100%!important}.quote,:where(.style-semantic-elements blockquote){color:var(--color-body-text-alt);border-inline-start:.25em solid var(--color-gray-transparent);padding:var(--space-3xs);line-height:1.25;font-family:var(--font-family-body);font-size:var(--font-size-m);font-weight:var(--font-weight-normal);margin:0;padding-inline-start:var(--space-xs);display:block;position:relative}:is(.quote,:where(.style-semantic-elements blockquote)) footer{font-size:var(--font-size-s);font-style:initial;color:var(--color-body-text);font-weight:var(--font-weight-semibold);margin-block-start:.5em}:is(.quote,:where(.style-semantic-elements blockquote)) footer cite{font-weight:var(--font-weight-normal);font-style:italic}@keyframes skeleton-pulse-light{0%{opacity:.14}to{opacity:.21}}@keyframes skeleton-pulse-dark{0%{opacity:.28}to{opacity:.36}}.skeleton,.skeleton-controller.loading .skeleton-item{print-color-adjust:exact;animation:skeleton-pulse-light 1s var(--ease-both-subtle)alternate 0s infinite!important;border-radius:var(--radius-s)!important;background-color:var(--color-gray-5)!important;box-shadow:none!important;pointer-events:none!important;color:#0000!important;-webkit-user-select:none!important;user-select:none!important;background-image:none!important;border:0!important;outline:0!important;-webkit-mask-image:none!important;mask-image:none!important}:is(.skeleton,.skeleton-controller.loading .skeleton-item).paragraph,:is(.skeleton,.skeleton-controller.loading .skeleton-item).heading{inline-size:100%}:is(.skeleton,.skeleton-controller.loading .skeleton-item):is(.paragraph,.heading,.chip,.card-title):before{content:"."}:is(.skeleton,.skeleton-controller.loading .skeleton-item):is(.button,.chip):empty{min-inline-size:5em}:is(.skeleton,.skeleton-controller.loading .skeleton-item).card-title{inline-size:40%;overflow:hidden}:is(.skeleton,.skeleton-controller.loading .skeleton-item):before,:is(.skeleton,.skeleton-controller.loading .skeleton-item):after,:is(.skeleton,.skeleton-controller.loading .skeleton-item)>*{visibility:hidden!important}@media (prefers-color-scheme:dark){.skeleton,.skeleton-controller.loading .skeleton-item{animation-name:skeleton-pulse-dark!important}}.skeleton-controller{display:contents}.skip-link{z-index:100;top:var(--space-body-y);left:var(--space-body-x);background-color:var(--color-brand-5);padding:var(--space-xs);border-radius:var(--radius-m);border:.25em solid var(--color-brand-4);color:#fff;font-weight:var(--font-weight-bold);font-family:var(--font-family-body);font-size:var(--font-size-m);box-shadow:var(--shadow-l),0 0 0 .2em var(--color-brand-transparent);vertical-align:middle;opacity:.25;transition:opacity var(--duration-medium)var(--ease-default);pointer-events:none;outline:0;line-height:1;text-decoration:none;display:inline-block;position:fixed}.skip-link kbd{font-weight:initial;background-color:var(--color-brand-4)!important;color:inherit!important;border:0!important;margin-inline-start:var(--space-2xs)!important;font-size:1.2em!important}.skip-link:focus,.skip-link.static{opacity:1}.skip-link.static{pointer-events:unset;position:static}input[type=range].slider{--slider-shadow-resting:var(--shadow-s);--slider-shadow-focused:var(--shadow-s),0 0 0 .08em var(--color-brand-5),0 0 0 calc(.16em + var(--border-s))var(--color-brand-transparent);--slider-shadow-active:var(--shadow-s),0 0 0 .08em var(--color-brand-5);appearance:none;cursor:pointer;background:0 0;block-size:1.25em;font-size:1.2rem}@media (pointer:coarse){input[type=range].slider{font-size:1.5rem}}input[type=range].slider:disabled{opacity:var(--opacity-disabled);cursor:not-allowed}input[type=range].slider:focus-visible{outline:0}input[type=range].slider:focus-visible::-webkit-slider-thumb{border-color:var(--color-brand-5);box-shadow:var(--slider-shadow-focused)}input[type=range].slider:focus-visible::-moz-range-thumb{border-color:var(--color-brand-5);box-shadow:var(--slider-shadow-focused)}input[type=range].slider:enabled:active::-webkit-slider-thumb{border-color:var(--color-brand-5);box-shadow:var(--slider-shadow-active);transform:scale(1)}@media screen and (resolution>=2x){input[type=range].slider:enabled:active::-webkit-slider-thumb{transform:scale(.9)}}input[type=range].slider:enabled:active::-moz-range-thumb{border-color:var(--color-brand-5);box-shadow:var(--slider-shadow-active);transform:scale(1)}@media screen and (resolution>=2x){input[type=range].slider:enabled:active::-moz-range-thumb{transform:scale(.9)}}input[type=range].slider::-webkit-slider-runnable-track{border-radius:var(--radius-full);background-color:var(--color-gray-8);print-color-adjust:exact;block-size:.25em;inline-size:100%;box-shadow:0 0 1px var(--color-gray-7)inset}input[type=range].slider::-moz-range-track{border-radius:var(--radius-full);background-color:var(--color-gray-8);print-color-adjust:exact;block-size:.25em;inline-size:100%}input[type=range].slider::-webkit-slider-thumb{border-radius:var(--radius-full);width:1.25em;height:1.25em;box-shadow:var(--slider-shadow-resting);border:var(--border-s)solid var(--color-outline);transition-property:border-color,box-shadow,transform;transition-duration:var(--duration-short);transition-timing-function:var(--ease-default);appearance:none;background-color:#fff;margin-block-start:-.5em}input[type=range].slider::-moz-range-thumb{border-radius:var(--radius-full);width:1.25em;height:1.25em;box-shadow:var(--slider-shadow-resting);border:var(--border-s)solid var(--color-outline);transition-property:border-color,box-shadow,transform;transition-duration:var(--duration-short);transition-timing-function:var(--ease-default);background-color:#fff}@keyframes spinner-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spinner{--spinner-primary-color:var(--color-brand-5);--spinner-secondary-color:var(--color-brand-3);font-size:var(--font-size-m);text-align:center;justify-content:flex-start;align-items:center;gap:var(--space-2xs);flex-direction:column;display:flex;position:relative}.spinner.small{font-size:var(--font-size-xs)}.spinner.large{font-size:var(--font-size-xl)}.spinner.label-top{flex-direction:column-reverse}.spinner.label-top:after{inset:auto 0 0}.spinner.label-right{gap:var(--space-xs);flex-direction:row}.spinner.label-right:after{inset:0 auto 0 0}.spinner.label-left{gap:var(--space-xs);flex-direction:row-reverse}.spinner.label-left:after{inset:0 0 0 auto}.spinner:before,.spinner:after{content:"";background-color:var(--spinner-primary-color);width:3em;height:3em;animation:.85s linear infinite spinner-spin;display:block;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-150 -150 300 300'%3E%3Cpath d='M 8.266365894244634e-15 -135 A 15 15 0 0 1 14.975012497024213 -149.25062479170387 A 150 150 0 0 1 136.74233884882722 61.65657115143952 A 15 15 0 0 1 116.91342951089922 67.49999999999999 L 99.59292143521046 57.49999999999999 A 15 15 0 0 1 93.10199382567353 36.496831995177985 A 100 100 0 0 0 14.94381324735992 -98.87710779360422 A 15 15 0 0 1 7.041719095097281e-15 -115 Z'%3E%3C/path%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-150 -150 300 300'%3E%3Cpath d='M 8.266365894244634e-15 -135 A 15 15 0 0 1 14.975012497024213 -149.25062479170387 A 150 150 0 0 1 136.74233884882722 61.65657115143952 A 15 15 0 0 1 116.91342951089922 67.49999999999999 L 99.59292143521046 57.49999999999999 A 15 15 0 0 1 93.10199382567353 36.496831995177985 A 100 100 0 0 0 14.94381324735992 -98.87710779360422 A 15 15 0 0 1 7.041719095097281e-15 -115 Z'%3E%3C/path%3E%3C/svg%3E");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.spinner:after{background-color:var(--spinner-secondary-color);margin:auto;animation-duration:1.05s;position:absolute;inset:0 0 auto}label.switch{cursor:pointer;inline-size:100%;font-weight:var(--font-weight-semibold);justify-content:space-between;align-items:center;gap:var(--space-3xs);font-size:var(--font-size-m);font-family:var(--font-family-body);display:flex}label.switch.small{font-size:var(--font-size-s)}input[type=checkbox].switch,label.switch input[type=checkbox]{print-color-adjust:exact;appearance:none;border-radius:var(--radius-full);background-color:var(--color-gray-7);block-size:1.8em;inline-size:3em;transition-property:background-color,box-shadow,border-color;transition-duration:var(--duration-medium);transition-timing-function:var(--ease-default);border:.1em solid var(--color-gray-6);cursor:pointer;flex:none;font-size:1rem;position:relative}:is(input[type=checkbox].switch,label.switch input[type=checkbox]):after{content:"";border-radius:var(--radius-full);width:1.4em;height:1.4em;box-shadow:var(--shadow-s);transition-property:border-color,transform;transition-duration:var(--duration-medium);transition-timing-function:var(--ease-both);background-color:#fff;position:absolute;inset-block-start:.1em;inset-inline-start:.1em;transform:translate(0)}:is(input[type=checkbox].switch,label.switch input[type=checkbox]):disabled{opacity:var(--opacity-disabled);cursor:not-allowed}:is(input[type=checkbox].switch,label.switch input[type=checkbox]):is(:focus-visible,.focus){border-color:var(--color-gray-6);box-shadow:0 0 0 .08em var(--color-gray-6),0 0 0 calc(.16em + var(--border-s))var(--color-gray-transparent);outline:0}:is(input[type=checkbox].switch,label.switch input[type=checkbox]):checked{background-color:var(--color-brand-6);border-color:var(--color-brand-5)}:is(input[type=checkbox].switch,label.switch input[type=checkbox]):checked:after{transform:translate(1.2em)}:is(input[type=checkbox].switch,label.switch input[type=checkbox]):checked:is(:focus-visible,.focus){box-shadow:0 0 0 .08em var(--color-brand-5),0 0 0 calc(.16em + var(--border-s))var(--color-brand-transparent)}:is(input[type=checkbox].switch,label.switch input[type=checkbox]):is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)):checked:after{transform:translate(-1.2em)}input[type=checkbox].switch.small,label.switch.small input[type=checkbox]{font-size:.8rem}table.table,:where(.style-semantic-elements table){--table-bg-odd:var(--color-body-alt);--table-bg-even:var(--color-body);--table-vertical-border:var(--border-s);background-color:var(--color-body-alt);border-collapse:separate;border-spacing:0;font-size:var(--font-size-m);border:var(--border-s)solid var(--color-outline);border-radius:var(--radius-s);color:var(--color-body-text);font-family:var(--font-family-body);font-weight:var(--font-weight-normal)}:is(table.table,:where(.style-semantic-elements table)).subtle{--table-bg-odd:transparent;--table-bg-even:transparent;--table-vertical-border:0;color:inherit;background-color:#0000;border:0}:is(table.table,:where(.style-semantic-elements table)).dense :is(th,td){padding:var(--space-3xs)var(--space-2xs)}:is(table.table,:where(.style-semantic-elements table)).sparse :is(th,td){padding:var(--space-xs)var(--space-s)}:is(table.table,:where(.style-semantic-elements table)) caption{font-family:var(--font-family-heading);line-height:1.15;font-size:var(--font-size-l);font-weight:var(--font-weight-semibold);text-align:start;margin:0 0 var(--space-2xs)}:is(table.table,:where(.style-semantic-elements table)) th,:is(table.table,:where(.style-semantic-elements table)) td{padding:var(--space-2xs)var(--space-xs)}:is(table.table,:where(.style-semantic-elements table)) th,:is(table.table,:where(.style-semantic-elements table)) tfoot td{font-weight:var(--font-weight-bold);font-family:var(--font-family-heading);text-align:center}:is(table.table,:where(.style-semantic-elements table)) th{border-block-end:var(--border-m)solid var(--color-outline)}:is(table.table,:where(.style-semantic-elements table)) tfoot td{border-block-start:var(--border-m)solid var(--color-outline)}:is(table.table,:where(.style-semantic-elements table)) td{text-align:unset}:is(table.table,:where(.style-semantic-elements table)) :is(th,tfoot td):not(:last-of-type){border-inline-end:var(--table-vertical-border)dashed var(--color-outline)}:is(table.table,:where(.style-semantic-elements table)) td:not(tfoot td,:last-of-type){border-inline-end:var(--table-vertical-border)solid var(--color-outline)}:is(table.table,:where(.style-semantic-elements table)) tr:not(:last-of-type) td{border-block-end:var(--border-s)solid var(--color-outline)}:is(table.table,:where(.style-semantic-elements table)) tbody tr:nth-child(odd),:is(table.table,:where(.style-semantic-elements table)) tbody:has(tr:last-of-type:nth-child(2n))+tfoot tr{background-color:var(--table-bg-even)}:is(table.table,:where(.style-semantic-elements table)) tbody tr:nth-child(2n){background-color:var(--table-bg-odd)}.paragraph,:where(.style-semantic-elements p){font-family:var(--font-family-body);font-weight:var(--font-weight-normal);text-wrap:pretty;hanging-punctuation:first;overflow-wrap:break-word;margin:.75em 0;line-height:1.6}:is(.paragraph,:where(.style-semantic-elements p)):first-child{margin-block-start:0}:is(.paragraph,:where(.style-semantic-elements p)):last-child{margin-block-end:0}:is(.heading-1,.heading-2,.heading-3,.heading-4,.heading-5,.heading-6)+.paragraph,:where(.style-semantic-elements :is(h1,h2,h3,h4,h5,h6)+p){margin-block-start:0}.abbreviation,:where(.style-semantic-elements abbr[title]){text-decoration-line:underline;text-decoration-style:dotted;text-decoration-thickness:var(--border-m);-webkit-text-decoration-color:var(--color-gray-6);text-decoration-color:var(--color-gray-6);text-underline-offset:.1em;display:inline}.bold,:where(.style-semantic-elements strong,.style-semantic-elements b){font-weight:var(--font-weight-bold)}.italic,:where(.style-semantic-elements em){font-style:italic}.underline{text-decoration-line:underline}.strikethrough,:where(.style-semantic-elements s){text-decoration-line:line-through}.underline.strikethrough{text-decoration-line:underline line-through}.small-text,:where(.style-semantic-elements small){vertical-align:baseline;font-size:.75em}.subscript,.superscript,:where(.style-semantic-elements sub,.style-semantic-elements sup){vertical-align:baseline;font-size:.75em;line-height:0;position:relative}.subscript,:where(.style-semantic-elements sub){inset-block-end:-.25em}.superscript,:where(.style-semantic-elements sup){inset-block-start:-.5em}.code,:where(.style-semantic-elements code){font-family:var(--font-family-mono);background-color:var(--color-gray-extra-transparent);color:var(--color-gray-1);border-radius:var(--radius-s);padding:.25ch .5ch;font-size:.9em;display:inline}:is(.code,:where(.style-semantic-elements code)).invert{color:var(--color-gray-9)}.link .code,:where(.style-semantic-elements a code){-webkit-text-decoration:inherit;text-decoration:inherit;-webkit-text-decoration-color:inherit;text-decoration-color:inherit;text-decoration-thickness:inherit;color:inherit}.key,.skip-link kbd,:where(.style-semantic-elements kbd){border:var(--border-s)solid var(--color-gray-8);border-radius:var(--radius-m);font-size:.9em;font-weight:var(--font-weight-semibold);font-family:var(--font-family-body);background-color:var(--color-gray-9);color:var(--color-body-text);border-bottom-width:3px;margin:0 .25ch;padding:0 .5ch;display:inline}.card{background-color:var(--color-body-alt);border-radius:var(--radius-l);border:var(--border-s)solid var(--color-outline);box-shadow:var(--shadow-m);padding:var(--space-m);font-family:var(--font-family-body);font-size:var(--font-size-m);font-weight:var(--font-weight-normal)}.card.secondary{background-color:var(--color-body);border-radius:var(--radius-m);box-shadow:var(--shadow-s);padding:var(--space-s)}.card-title,.card-title[href]{font-family:var(--font-family-heading);text-wrap:balance;overflow-wrap:break-word;line-height:1.15;font-size:var(--font-size-l);font-weight:var(--font-weight-bold);color:var(--color-brand-3);margin-block:0 var(--space-xs);display:block}.card-title[href]{-webkit-text-decoration-color:var(--color-brand-transparent);text-decoration-color:var(--color-brand-transparent)}.card.secondary .card-title{font-size:var(--font-size-m);margin-block-end:var(--space-2xs)}
 /*# sourceMappingURL=./index.css.map */

package/dist/index.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":null,"mappings":"ACAA,gDAOA,yEAIA,+JAAA,mCAAA,yDAKA,8EAMA,sDIlBA,+EAQA,mDAEE,4FAKF,yEAEE,4FAKF,oCAEE,4FASF,oHAKA,kHASA,uMInDA,64XIAA,gaAmBE,sCAIA,aACE,kEAKF,gKAWA,iQASA,+MAQA,gaAOA,mnBAOA,+ZAOA,qjBAQF,0MTtFA,oWAUA,waASE,gCAAiC,qGAcjC,uCAKF,6TAeE,2RAYA,iQAWE,6HAMJ,uIAUA,kEACE,gCAOF,iHAMA,gFAIA,oLAOA,6IAMA,2HAKA,gBACE,4GAKA,qFItIF,yWAiBE,8HAMA,qCAIA,gFAIA,4sBI/BF,sBAGE,qUAYE,8CAAgD,2GAKhD,gDAIA,6FAKA,wFAKA,4PAUA,2DAGE,oEAKA,8GAIE,oDAIA,+FAON,mjBAmBE,8CAAgD,0EAIhD,uIAIA,yIAKA,wDAKA,stBAgBA,iPAIA,gCAAiC,0DAG/B,2CAOF,2HAME,0EAKF,iIIjJJ,4NAOE,wEbPF,iRAoBA,uPAYA,mQAaA,yEAOE,kDAKA,uDAKA,4KAUF,yXAgBE,6EAIA,wEAIA,6HAKA,iFAGE,6DAKF,+LAaF,gJAQA,2LAWA,mGAOA,2IAUA,8RAWA,uEAQE,0EAIA,yEAIA,uEAKF,kKAOA,icAcE,8EAIA,oDAIA,6GAKA,+EAIA,uGAMF,kCAGE,6LAOA,wQAaE,+FAIA,iFAIA,+FAOA,gHAIA,4HAKA,kHAMJ,yFAOA,sEAIA,0DAIA,wCAME,qCAIA,wRAWE,mCAKF,0DAIA,oEAIA,sFAMA,4DAGE,iEAIA,wFAMA,uFAMJ,uCAQA,gBACE,yBIlXF,yIAME,gFAIA,6EAKA,2CAIA,iLAMA,4LAMA,yLAMA,gLAMA,4NASE,mGIpDJ,olCAwCE,2TAgBA,yKAOA,iDAOE,+FAAqC,uDAKvC,+CAGE,oFAQA,kFAKF,gOAOE,yJAMA,qKAMA,qKAMA,iKAMA,yJAMA,6JAMA,qKAMA,yKAMA,6JAMA,oIAMA,4JAQF,2RASE,8HAKA,mHAIE,4FAKF,4HAIE,kGAKF,4HAIE,kGAKF,yHAIE,gGAKF,mHAIE,4FAKF,sHAIE,8FAKF,4HAIE,kGAKF,+HAIE,oGAKF,0HAKE,6IAKF,0DAIA,6CAIA,6CAKF,8BAIA,+BAIA,mGASI,gDAKA,uFASA,+CAIA,0FAMJ,2HAKE,wFAKF,gCAGE,2KAQA,yEAMJ,uGIvVA,kvBA0BE,6EAKE,6KAQA,4EAIA,yDAOE,+FAAqC,+DAMzC,oIAMA,gJAMA,gJAMA,4IAMA,oIAMA,wIAMA,gJAMA,oJAMA,wIAMA,+GAMA,qIAQF,ifAoBE,ywBAYA,0EAIA,kGAIA,qGEpKF,0UAgBE,yOAWF,yEAKA,mDAIA,qDAIA,oCAIA,oCI3CA,8LAYE,wBAGE,8CAAgD,wGAMlD,wBAGE,8CAAgD,uGAMlD,wBAGE,8CAAgD,uGAMlD,wBAGE,8CAAgD,wGAMlD,mHAQE,mDAIA,oDAIA,mDAKF,kHAQE,kDAIA,mDAIA,kDAMJ,yBAIA,kJASE,4BIzGF,0aAiBE,yKASA,+CAIA,uEAGE,0EAKF,8DAIA,mkBAyBE,6UAQA,uMAIA,2OAMA,6MAGE,uWAUF,4cAKE,2hBAUJ,yEAKE,iEAIA,yHAOA,sHAQF,4rBAYE,8QAKF,6BAIA,4IASA,iJAUE,kjCAaF,wEAKE,0DAKA,qEAIA,+IAKA,0IAKA,6CAIA,uYAaE,uFAMF,gDAIA,kDAIA,sOAQE,uEAIA,wEAIA,8QAWF,0DAGE,qGAON,yEAKA,iKAME,+JAMA,iEAKF,4CChTA,wEAOE,gEAIA,gEAIA,+DAIA,6DAIA,6DAIA,8DAIA,gEAIA,iHAKA,gHAMF,8DAMA,kEAMA,4EAMA,sExBhEA,qPAcA,wIAYE,oGAKF,kHAMA,kHAMA,qHAMA,oHAMA,gHIvDA,6IAOA,kcAWE,+FAKF,mTAUA,4GAAA,wGIjCA,8dAaE,qHAIA,iGAUA,gmBAYA,sVAIA,sXAOE,g9BAOA,0VAOA,yxCAOA,sVI9DJ,0IAQA,iKAAA,qLAUA,wFAAA,4GAOA,4HAOA,sJAOA,4KAOA,yHAOA,iJAOA,uKAQA,sEAAA,sEAAA,2EAAA,2EI7EA,4DAMA,qCACE,gOAaF,6OAYA,gIAAA,mIAAA,uIAQA,2EAKA,mHAMA,sGAKA,4GAKA,2PAKA,kQAKA,yGAKA,gHI3EA,kHAKE,yBAIA,0BAIA,yBAKF,0NAUE,mDAAmC,wEAMnC,iEFnCF,+DAUA,kEAMA,wCACE,sOAaF,mPAYA,8LAQA,yLAQA,oOASA,+NInEA,iXAcE,4MAOE,4HLrBJ,+DAUA,8DAUA,2gBAqBE,yJAMA,wHAKA,uGAKA,sGAMA,4NAMA,mCAAqC,yGAKvC,sCI1EA,qkBAyBE,uMASA,6CAKA,uDIvCF,qWAYE,wBAA0B,2CAI1B,qFAKA,iDAGE,uIAKA,mIAOA,0JAKE,uFAAsC,mFAKxC,sJAKE,uFAAsC,+EAM1C,qOASA,4KAQA,kZAgBA,qWE1FF,4EAUA,4QAaE,6CAIA,6CAIA,iDAGE,wCAKF,4DAIE,4CAKF,mEAIE,2CAKF,+zCAcA,qIDtEF,yOAaA,gDAKA,qcAiBE,yZAgBA,+HAKA,oPAQA,mJAIE,4GAIA,mNAOF,uTAMF,0FItFA,scAgBE,yJAQA,kHAIA,gHAIA,0OASA,8JAKA,yNAOA,sHAIA,8HAIA,4EAIA,sKAIA,gKAIA,4IAIA,gOAKA,oHFhFF,2NAUE,oFAIA,iFAYF,iKAMA,uSAUA,6GAKA,8DAKA,0CAIA,oFAKA,qEAIA,2FAMA,kKASA,uEAKA,0EAKA,8OAUE,kFAKF,gOAQA,yWCnHA,qRAUE,mIAYF,0QAaA,oIAIA","sources":["index.css","misc/reset.css","components/heading.css","components/app.css","components/shared/base-dialog.css","misc/utility-classes.css","components/highlight.css","components/banner.css","components/shared/base-dismiss-button.css","misc/variables.css","components/link.css","components/button.css","components/accordion.css","components/shared/base-alert.css","components/list.css","components/chip.css","components/alert.css","components/divider.css","components/meter.css","components/skeleton.css","components/progress.css","components/drawer.css","components/modal.css","components/skip-link.css","components/quote.css","components/field.css","components/flex.css","components/slider.css","components/switch.css","components/spinner.css","components/text.css","components/card.css","components/table.css"],"sourcesContent":["/* Misc styles /\n@import url(\"./misc/reset.css\");\n@import url(\"./misc/utility-classes.css\");\n@import url(\"./misc/variables.css\");\n\n/ Styles used in multiple components /\n@import url(\"./components/shared/base-alert.css\");\n@import url(\"./components/shared/base-dialog.css\");\n@import url(\"./components/shared/base-dismiss-button.css\");\n\n/ Components /\n@import url(\"./components/accordion.css\");\n@import url(\"./components/alert.css\");\n@import url(\"./components/app.css\");\n@import url(\"./components/banner.css\");\n@import url(\"./components/button.css\");\n@import url(\"./components/chip.css\");\n@import url(\"./components/divider.css\");\n@import url(\"./components/drawer.css\");\n@import url(\"./components/field.css\");\n@import url(\"./components/flex.css\");\n@import url(\"./components/heading.css\");\n@import url(\"./components/highlight.css\");\n@import url(\"./components/link.css\");\n@import url(\"./components/list.css\");\n@import url(\"./components/meter.css\");\n@import url(\"./components/modal.css\");\n@import url(\"./components/progress.css\");\n@import url(\"./components/quote.css\");\n@import url(\"./components/skeleton.css\");\n@import url(\"./components/skip-link.css\");\n@import url(\"./components/slider.css\");\n@import url(\"./components/spinner.css\");\n@import url(\"./components/switch.css\");\n@import url(\"./components/table.css\");\n@import url(\"./components/text.css\");\n\n/\n * Card needs to be loaded after Link so .card-title[href] in the former\n * overrides the same selector in the latter without needing \"!important\"\n * declarations or specificity hacks.\n /\n@import url(\"./components/card.css\");\n",",\n::before,\n::after {\n box-sizing: border-box;\n margin: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--border-m) solid var(--color-brand-5);\n}\n\nhtml {\n text-size-adjust: none;\n color-scheme: light dark;\n}\n\nbody {\n margin: 0;\n background-color: var(--color-body);\n color: var(--color-body-text);\n}\n\nimg,\npicture,\nvideo,\niframe {\n max-width: 100%;\n display: block;\n}\n",".heading-1,\n.heading-2,\n.heading-3,\n.heading-4,\n.heading-5,\n.heading-6,\n:where(.style-semantic-elements :is(h1, h2, h3, h4, h5, h6)) {\n font-family: var(--font-family-heading);\n margin-block: 0.75em 0.3em;\n line-height: 1.15;\n text-wrap: balance;\n overflow-wrap: break-word;\n}\n\n.heading-1,\n:where(.style-semantic-elements h1) {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-black);\n\n /* \n * Since the Level 1 Heading will typically be the first item inside the App\n * Content container (which already has padding at the top), we remove the top\n * margin by default. We can always add it back for special cases.\n /\n margin-block-start: 0;\n\n .app-content > &:first-of-type {\n margin-block-start: 0;\n }\n}\n\n.heading-2,\n:where(.style-semantic-elements h2) {\n font-size: var(--font-size-3xl);\n font-weight: var(--font-weight-bold);\n}\n\n.heading-3,\n:where(.style-semantic-elements h3) {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-bold);\n}\n\n.heading-4,\n:where(.style-semantic-elements h4) {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-semibold);\n}\n\n.heading-5,\n:where(.style-semantic-elements h5) {\n font-size: var(--font-size-l);\n font-weight: var(--font-weight-semibold);\n}\n\n.heading-6,\n:where(.style-semantic-elements h6) {\n font-size: var(--font-size-m);\n font-weight: var(--font-weight-bold);\n}\n",".app {\n / The app is designed to take up the entire width of the page. However, we\n * set a global limit on the overall width of its content for UX and aesthetic\n * reasons. The wrapper elements of the page will always extend to the edge of\n * the screen, but all content within them will be kept within this limit and\n * centered.\n /\n --app-max-content-width: 110rem;\n --app-header-height: clamp(50px, 3.8rem, 100px);\n --app-sidebar-width: clamp(300px, 18rem, 450px);\n\n position: relative;\n width: 100%;\n min-height: 100svh;\n display: flex;\n flex-direction: column;\n font-family: var(--font-family-body);\n font-size: var(--font-size-m);\n}\n\n.app-header {\n height: var(--app-header-height);\n width: 100%;\n color: var(--color-brand-3);\n background-color: var(--color-body-alt);\n border-bottom: var(--border-l) solid var(--color-brand-transparent);\n box-shadow: var(--shadow-s);\n flex: none;\n position: sticky;\n left: 0;\n}\n\n.app-header-content {\n height: 100%;\n width: 100%;\n max-width: var(--app-max-content-width);\n margin-inline: auto;\n padding-inline: calc(var(--space-body-x) - var(--space-xs));\n padding-block: 6px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-s);\n}\n\n.app-header-section {\n margin: 0;\n height: 100%;\n display: flex;\n align-items: center;\n\n / If header only has 1 section, center it /\n &:only-child {\n margin-inline: auto;\n }\n\n / Otherwise, align the first to the left and the rest to the right /\n &:first-child {\n margin-inline-end: auto;\n }\n\n / Put a spacer between consecutive right-aligned sections (3rd onward) /\n &:nth-child(n + 3)::before {\n content: \"\";\n background-color: var(--color-outline);\n height: 2rem;\n width: var(--border-s);\n position: relative;\n right: calc(var(--space-s) / 2);\n }\n}\n\n.app-header-item {\n height: 100%;\n cursor: pointer;\n text-decoration: none;\n color: inherit;\n transition-property: color, background-color;\n transition-duration: var(--duration-short);\n transition-timing-function: var(--ease-default);\n display: flex;\n align-items: center;\n position: relative;\n font-size: 1rem;\n font-weight: var(--font-weight-semibold);\n padding-inline: var(--space-xs);\n border-radius: var(--radius-m);\n\n &:hover {\n background-color: var(--color-brand-extra-transparent);\n }\n\n &:active {\n background-color: var(--color-brand-transparent);\n }\n\n &:focus-visible {\n background-color: var(--color-brand-extra-transparent);\n outline-offset: calc(-1 var(--border-m));\n }\n\n &:is([aria-current], .current) {\n font-weight: var(--font-weight-bold);\n\n &::after {\n opacity: 1;\n }\n }\n\n &::after {\n content: \"\";\n position: absolute;\n width: 100%;\n height: var(--border-l);\n bottom: calc(-1 * (var(--border-l) + 6px));\n left: 0;\n background-color: currentcolor;\n opacity: 0;\n border-radius: 1px;\n }\n}\n\n.app-icon {\n background-color: var(--color-brand-3);\n height: 2rem;\n width: 2rem;\n border: var(--border-m) solid transparent;\n border-radius: var(--radius-full);\n}\n\n.app-title-separator {\n content: \"\";\n background-color: var(--color-brand-transparent);\n width: var(--border-m);\n height: 1.5rem;\n rotate: 22deg;\n margin-inline: var(--space-2xs);\n position: relative;\n left: 1px;\n}\n\n.app-title {\n font-family: var(--font-family-heading);\n font-size: 1.2rem;\n display: flex;\n align-items: center;\n}\n\n.app-body {\n position: relative;\n width: 100%;\n max-width: var(--app-max-content-width);\n margin-inline: auto;\n flex: none;\n display: flex;\n flex-direction: row;\n}\n\n.app-sidebar {\n transition-property: opacity, display;\n transition-duration: var(--duration-medium);\n transition-timing-function: var(--ease-default);\n transition-behavior: allow-discrete;\n width: var(--app-sidebar-width);\n flex: none;\n opacity: 1;\n border-inline-end: var(--border-s) dashed var(--color-outline);\n}\n\n.app-sidebar-content {\n position: sticky;\n top: 0;\n overflow: auto;\n height: 100dvh;\n}\n\n.app-sidebar-section {\n &:first-of-type {\n margin-block-start: var(--space-body-y);\n }\n\n &:not(:last-of-type) {\n margin-block-end: var(--space-xs);\n }\n\n &:last-of-type {\n margin-block-end: var(--space-body-y);\n }\n}\n\n.app-sidebar-heading {\n font-size: 1.2rem;\n margin: 0 var(--space-body-x) var(--space-3xs);\n font-family: var(--font-family-heading);\n font-weight: var(--font-weight-semibold);\n}\n\n.app-sidebar-item {\n display: block;\n margin: 0 var(--space-2xs);\n padding: var(--space-2xs) calc(var(--space-body-x) - var(--space-2xs));\n border-radius: var(--radius-l);\n color: var(--color-body-text-alt);\n text-decoration: none;\n font-weight: var(--font-weight-normal);\n font-size: 1rem;\n user-select: none;\n transition-property: color, background-color, box-shadow;\n transition-duration: var(--duration-short);\n transition-timing-function: var(--ease-default);\n\n &:hover {\n background-color: var(--color-brand-extra-transparent);\n }\n\n &:active {\n color: var(--color-brand-1);\n }\n\n &:is([aria-current], .current) {\n color: var(--color-brand-4);\n font-weight: var(--font-weight-bold);\n }\n\n &:hover:active {\n background-color: var(--color-brand-transparent);\n }\n\n &:focus-visible {\n outline-offset: 0;\n background-color: var(--color-brand-extra-transparent);\n }\n}\n\n.app-sidebar-toggle {\n width: 2.75rem;\n\n &:has(input:focus-visible) {\n background-color: var(--color-brand-extra-transparent);\n outline: var(--border-m) solid var(--color-brand-5);\n outline-offset: calc(-1 * var(--border-m));\n }\n\n /* Style the 3 lines inside the button /\n > div {\n transition-property: transform, opacity;\n transition-duration: var(--duration-long);\n transition-timing-function: var(--ease-out);\n position: absolute;\n width: 1.75rem;\n height: 2px;\n border-radius: 2px;\n background-color: currentcolor;\n opacity: 1;\n top: 50%;\n left: 50%;\n\n &:nth-of-type(1) {\n transform: translateY(calc(-50% - 0.45rem)) translateX(-50%);\n }\n\n &:nth-of-type(2) {\n transform: translateY(-50%) translateX(-50%);\n }\n\n &:nth-of-type(3) {\n transform: translateY(calc(-50% + 0.45rem)) translateX(-50%);\n }\n }\n\n / When the sidebar is visible, turn the 3 lines into an X /\n &:has(input:checked) > div {\n &:nth-of-type(1) {\n transform: translateY(-50%) translateX(-50%) rotate(45deg);\n }\n\n &:nth-of-type(2) {\n opacity: 0;\n transform: translateY(-50%) translateX(-50%) rotate3d(0, 1, 0, 90deg);\n }\n\n &:nth-of-type(3) {\n transform: translateY(-50%) translateX(-50%) rotate(-45deg);\n }\n }\n}\n\n.app-content {\n width: 100%;\n padding: var(--space-body-y) var(--space-body-x);\n position: relative;\n}\n\n/ If there's a sidebar, shrink the content area to accommodate it /\n.app-sidebar ~ .app-content {\n width: calc(100% - var(--app-sidebar-width));\n}\n\n.app-header-section:has(.app-sidebar-toggle) {\n display: none;\n}\n\n@media (width < 55rem) {\n / \n * If there's a sidebar, DON'T factor its width into the content width since\n * the sidebar now has `position: fixed`. This only applies to pages with a\n * sidebar; without one, app-content's width is already 100%.\n /\n .app-sidebar ~ .app-content {\n width: 100%;\n }\n\n .app-sidebar {\n position: fixed;\n top: var(--app-header-height);\n left: 0;\n width: 100vw;\n opacity: 1;\n background-color: light-dark(#fffc, #000a);\n backdrop-filter: blur(24px) saturate(120%);\n border-right: 0;\n z-index: 9;\n\n &::after {\n content: initial;\n }\n }\n\n .app-header-section:has(.app-sidebar-toggle) {\n display: flex;\n }\n\n .app-sidebar-content {\n height: calc(100dvh - var(--app-header-height));\n }\n\n .app:not(:has(.app-sidebar-toggle input:checked)) .app-sidebar {\n opacity: 0;\n display: none;\n }\n\n / If sidebar is open, temporarily hide the overflow and any site-wide banners /\n .app:has(.app-sidebar-toggle input:checked) {\n overflow: hidden;\n\n > .banner {\n display: none;\n }\n\n .app-header {\n position: fixed;\n top: 0;\n z-index: 10;\n }\n\n .app-content {\n top: var(--app-header-height);\n }\n }\n}\n\n.app:has(dialog:modal) {\n / \n * If modal is open, hide the overflow. This prevents the user from scrolling\n * the page down by dragging on the header, which they'd have no way to undo.\n /\n overflow: hidden;\n}\n\n@starting-style {\n .app > .sidebar {\n opacity: 0;\n }\n}\n",".modal::backdrop,\n.drawer::backdrop {\n --dialog-backdrop-starting-opacity: 0;\n --dialog-backdrop-open-opacity: light-dark(0.75, 0.85);\n --dialog-backdrop-ending-opacity: 0;\n --dialog-backdrop-color: light-dark(var(--color-gray-2), var(--color-gray-8));\n\n background-color: var(--dialog-backdrop-color);\n}\n\n.modal,\n.drawer {\n --dialog-starting-opacity: 1;\n --dialog-starting-transform: translateY(8px);\n --dialog-open-opacity: 1;\n --dialog-open-transform: translate(0);\n --dialog-ending-opacity: 0;\n --dialog-ending-transform: scale(0.97);\n\n @media (prefers-reduced-motion) {\n --dialog-starting-transform: translate(0);\n --dialog-ending-transform: translate(0);\n }\n\n box-shadow: var(--shadow-xl);\n border: var(--border-s) solid var(--color-outline);\n border-radius: var(--radius-l);\n background-color: var(--color-body-alt);\n color: var(--color-body-text);\n padding: 0;\n flex-direction: column;\n gap: 0;\n\n &[open] {\n display: flex;\n }\n}\n\n.modal-header,\n.drawer-header {\n font-family: var(--font-family-heading);\n font-size: var(--font-size-l);\n font-weight: var(--font-weight-bold);\n line-height: 1;\n padding: var(--space-m);\n padding-block-end: var(--space-2xs);\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: var(--color-brand-3);\n margin: 0;\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n color: inherit;\n font-size: inherit;\n font-weight: inherit;\n margin: 0;\n }\n\n .button.dismiss {\n --button-fg-color: var(--color-brand-3);\n --button-hover-bg-color: var(--color-brand-extra-transparent);\n\n font-size: 0.8rem;\n width: 2.25rem;\n height: 2.25rem;\n margin: -0.5rem;\n padding: 0.25rem;\n border-radius: var(--radius-full);\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-brand-transparent);\n }\n }\n}\n\n.modal-body,\n.drawer-body {\n padding: var(--space-m);\n padding-block-start: var(--space-xs);\n flex-shrink: 1;\n display: block;\n overflow: auto;\n margin: 0;\n}\n\n@supports (transition-behavior: allow-discrete) and (overlay: none) {\n .modal,\n .drawer {\n animation: unset;\n }\n}\n\n/ Fade in/out (mixed browser support as of March 2025) /\n:is(.modal, .drawer)[open] {\n display: flex;\n transform: var(--dialog-open-transform);\n opacity: var(--dialog-open-opacity);\n}\n\n:is(.modal, .drawer)[open]::backdrop {\n opacity: var(--dialog-backdrop-open-opacity);\n}\n\n:is(.modal, .drawer),\n:is(.modal, .drawer)::backdrop {\n transition-property: transform, opacity, display, overlay;\n transition-duration: var(--duration-long);\n transition-behavior: allow-discrete;\n}\n\n:is(.modal, .drawer) {\n transform: var(--dialog-ending-transform);\n opacity: var(--dialog-ending-opacity);\n transition-timing-function: var(--ease-out);\n}\n\n:is(.modal, .drawer)::backdrop {\n opacity: var(--dialog-backdrop-ending-opacity);\n transition-timing-function: var(--ease-default);\n}\n\n@starting-style {\n :is(.modal, .drawer)[open] {\n transform: var(--dialog-starting-transform);\n opacity: var(--dialog-starting-opacity);\n }\n\n :is(.modal, .drawer)[open]::backdrop {\n opacity: var(--dialog-backdrop-starting-opacity);\n }\n}\n\n/ End fade in/out styles /\n","/*********************************\n Conditionally show/hide content \n *********************************/\n\n.js-disabled .if-js-enabled {\n display: none !important;\n}\n\n.js-enabled .if-js-disabled {\n display: none !important;\n}\n\n@media screen and (width < 30rem) {\n / Narrow viewport /\n :is(.if-medium-viewport, .if-wide-viewport):not(.if-narrow-viewport) {\n display: none !important;\n }\n}\n\n@media screen and (30rem <= width < 55rem) {\n / Medium viewport /\n :is(.if-narrow-viewport, .if-wide-viewport):not(.if-medium-viewport) {\n display: none !important;\n }\n}\n\n@media screen and (width >= 55rem) {\n / Wide viewport /\n :is(.if-narrow-viewport, .if-medium-viewport):not(.if-wide-viewport) {\n display: none !important;\n }\n}\n\n/***********************************************\n Override color mode for a section of the page \n **********************************************/\n\n.light-mode {\n color-scheme: only light;\n color: var(--color-body-text);\n}\n\n.dark-mode {\n color-scheme: only dark;\n color: var(--color-body-text);\n}\n\n/**************************************************\n Make elements invisible, except to screenreaders \n ***************************************************/\n\n.visually-hidden,\n.app-sidebar-toggle input,\n.skip-link:not(:focus, .static) {\n clip: rect(1px, 1px, 1px, 1px);\n clip-path: inset(50%);\n height: 1px;\n width: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n}\n",".highlight,\n:where(.style-semantic-elements mark) {\n background-color: var(--color-yellow-8);\n color: var(--color-yellow-1);\n print-color-adjust: exact;\n}\n\n.highlight.removed,\n:where(.style-semantic-elements del) {\n background-color: var(--color-red-8);\n color: var(--color-red-1);\n transition: text-decoration-color var(--duration-short) var(--ease-default);\n text-decoration-line: line-through;\n text-decoration-skip-ink: none;\n text-decoration-thickness: var(--border-m);\n text-decoration-color: var(--color-red-4);\n print-color-adjust: exact;\n\n &:hover {\n text-decoration-color: transparent;\n }\n}\n\n.highlight.added,\n:where(.style-semantic-elements ins) {\n background-color: var(--color-green-8);\n color: var(--color-green-1);\n text-decoration-thickness: var(--border-m);\n text-decoration-color: var(--color-green-4);\n text-underline-offset: 0.1em;\n print-color-adjust: exact;\n}\n\n.highlight.target,\n::target-text {\n background-color: var(--color-brand-8);\n color: var(--color-brand-1);\n print-color-adjust: exact;\n}\n",".banner {\n border-inline-width: 0;\n width: 100%;\n padding: var(--space-xs) var(--space-body-x);\n padding-inline-start: calc(var(--space-body-x) + 2em);\n\n &:has(.button.dismiss) {\n padding-inline-end: calc(var(--space-body-x) + 2em);\n }\n\n &::before,\n &::after {\n inset-inline-start: calc(var(--space-body-x) 0.5);\n }\n\n & + & {\n border-block-start-width: 0;\n }\n\n &.error {\n --banner-dismiss-icon-color: var(--color-red-4);\n --banner-dismiss-hover-bg: var(--color-red-extra-transparent);\n --banner-dismiss-focus-bg: var(--color-red-transparent);\n }\n\n &.warning {\n --banner-dismiss-icon-color: var(--color-yellow-4);\n --banner-dismiss-hover-bg: var(--color-yellow-extra-transparent);\n --banner-dismiss-focus-bg: var(--color-yellow-transparent);\n }\n\n &.success {\n --banner-dismiss-icon-color: var(--color-green-4);\n --banner-dismiss-hover-bg: var(--color-green-extra-transparent);\n --banner-dismiss-focus-bg: var(--color-green-transparent);\n }\n\n &.info {\n --banner-dismiss-icon-color: var(--color-sky-4);\n --banner-dismiss-hover-bg: var(--color-sky-extra-transparent);\n --banner-dismiss-focus-bg: var(--color-sky-transparent);\n }\n\n .button.dismiss {\n --button-fg-color: var(--banner-dismiss-icon-color);\n --button-hover-bg-color: var(--banner-dismiss-hover-bg);\n\n position: absolute;\n inset-block: 0;\n inset-inline-end: calc(var(--space-body-x) * 0.5);\n margin: auto;\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--banner-dismiss-focus-bg);\n }\n }\n}\n",".button.dismiss {\n --button-fg-color: var(--color-body-text);\n --button-bg-color: transparent;\n --button-border-color: transparent;\n --button-hover-bg-color: var(--color-gray-extra-transparent);\n --button-focus-ring-color: transparent;\n --button-shadow: none;\n\n font-size: 0.75rem;\n width: 3em;\n height: 3em;\n border-radius: var(--radius-m);\n min-width: 0;\n min-height: 0;\n aspect-ratio: 1;\n padding: 0.3em;\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-gray-transparent);\n --button-hover-bg-color: transparent;\n }\n\n /* Don't use pseudo element for hover style /\n &::before {\n content: unset;\n }\n\n &:is(:hover, .hover) {\n background-color: var(--button-hover-bg-color);\n }\n\n &::after {\n content: \"\";\n width: 1.8em;\n height: 1.8em;\n mask-image: url(\"@/src/svg/x.svg\");\n mask-size: contain;\n mask-repeat: no-repeat;\n background-color: currentcolor;\n }\n}\n",":root,\n::backdrop,\n.light-mode,\n.dark-mode {\n / Brand /\n --color-brand-1: light-dark(#08003b, #e9f0ff);\n --color-brand-2: light-dark(#190074, #cad6ff);\n --color-brand-3: light-dark(#290fa3, #9fb0ff);\n --color-brand-4: light-dark(#3c35cb, #7382ff);\n --color-brand-5: light-dark(#545be7, #5961ee);\n --color-brand-6: light-dark(#6f7dff, #4344cf);\n --color-brand-7: light-dark(#93a4ff, #3124b1);\n --color-brand-8: light-dark(#bbc9ff, #230095);\n --color-brand-9: light-dark(#e5edff, #0b004a);\n --color-brand-transparent: light-dark(#545be766, #5961ee80);\n --color-brand-extra-transparent: light-dark(#545be733, #5961ee59);\n\n / Red /\n --color-red-1: light-dark(#240000, #ffe3dc);\n --color-red-2: light-dark(#4d0000, #ffc3b6);\n --color-red-3: light-dark(#7a0000, #ff8875);\n --color-red-4: light-dark(#a90000, #f45441);\n --color-red-5: light-dark(#cc2a1b, #d33223);\n --color-red-6: light-dark(#f0503d, #b30000);\n --color-red-7: light-dark(#ff7c68, #8d0000);\n --color-red-8: light-dark(#ffb4a5, #6c0000);\n --color-red-9: light-dark(#ffe3dc, #340000);\n --color-red-transparent: light-dark(#cc2a1b66, #d3322380);\n --color-red-extra-transparent: light-dark(#cc2a1b33, #d3322359);\n\n / Orange /\n --color-orange-1: light-dark(#1c0300, #ffe5d0);\n --color-orange-2: light-dark(#3e1200, #ffc5a0);\n --color-orange-3: light-dark(#632500, #ff9559);\n --color-orange-4: light-dark(#8b3a00, #d97234);\n --color-orange-5: light-dark(#b45100, #ba570d);\n --color-orange-6: light-dark(#d76f04, #9c3b00);\n --color-orange-7: light-dark(#f98f3a, #782700);\n --color-orange-8: light-dark(#ffb87e, #5c1900);\n --color-orange-9: light-dark(#ffe6cc, #2c0400);\n --color-orange-transparent: light-dark(#b4510066, #ba570d80);\n --color-orange-extra-transparent: light-dark(#b4510033, #ba570d59);\n\n / Yellow /\n --color-yellow-1: light-dark(#140900, #fdf4d5);\n --color-yellow-2: light-dark(#2f1e00, #fadfa6);\n --color-yellow-3: light-dark(#4e3700, #fdd171);\n --color-yellow-4: light-dark(#7a5700, #dfaf3f);\n --color-yellow-5: light-dark(#a57c00, #c69720);\n --color-yellow-6: light-dark(#c89808, #a17807);\n --color-yellow-7: light-dark(#dfb22b, #750);\n --color-yellow-8: light-dark(#efcb72, #4e3700);\n --color-yellow-9: light-dark(#f8edc1, #211500);\n --color-yellow-transparent: light-dark(#a57c0066, #a57c0080);\n --color-yellow-extra-transparent: light-dark(#a57c0033, #a57c0059);\n\n / Green /\n --color-green-1: light-dark(#011000, #dff4d3);\n --color-green-2: light-dark(#0c2a00, #bbe7a5);\n --color-green-3: light-dark(#1d4600, #8ecb6b);\n --color-green-4: light-dark(#2f6500, #63a736);\n --color-green-5: light-dark(#438500, #498b0f);\n --color-green-6: light-dark(#5fa500, #2e7000);\n --color-green-7: light-dark(#7dc53a, #1c5400);\n --color-green-8: light-dark(#a4e472, #113f00);\n --color-green-9: light-dark(#dafbc4, #011b00);\n --color-green-transparent: light-dark(#43850066, #498b0f80);\n --color-green-extra-transparent: light-dark(#43850033, #498b0f59);\n\n / Sky /\n --color-sky-1: light-dark(#001011, #c8f6f5);\n --color-sky-2: light-dark(#002a2b, #9ee7e7);\n --color-sky-3: light-dark(#004747, #61c7c8);\n --color-sky-4: light-dark(#006566, #3aa4a5);\n --color-sky-5: light-dark(#008586, #0b8889);\n --color-sky-6: light-dark(#00a7a8, #006d6f);\n --color-sky-7: light-dark(#00c8c9, #005254);\n --color-sky-8: light-dark(#76e2e2, #003e3f);\n --color-sky-9: light-dark(#caf9f8, #001a1b);\n --color-sky-transparent: light-dark(#00858666, #0b888980);\n --color-sky-extra-transparent: light-dark(#00858633, #0b888959);\n\n / Blue /\n --color-blue-1: light-dark(#00003e, #ddf0ff);\n --color-blue-2: light-dark(#00007a, #b9d9ff);\n --color-blue-3: light-dark(#002b97, #7eb4ff);\n --color-blue-4: light-dark(#004abd, #418dff);\n --color-blue-5: light-dark(#1c69e3, #2370ea);\n --color-blue-6: light-dark(#3988ff, #0053cb);\n --color-blue-7: light-dark(#74adff, #0035ac);\n --color-blue-8: light-dark(#a9cfff, #001a95);\n --color-blue-9: light-dark(#ddf0ff, #005);\n --color-blue-transparent: light-dark(#1c69e366, #2370ea80);\n --color-blue-extra-transparent: light-dark(#1c69e333, #2370ea59);\n\n / Purple /\n --color-purple-1: light-dark(#170029, #fbe4ff);\n --color-purple-2: light-dark(#370054, #edc4ff);\n --color-purple-3: light-dark(#5a0085, #d88eff);\n --color-purple-4: light-dark(#7819a8, #b864ef);\n --color-purple-5: light-dark(#9640ca, #9c47d1);\n --color-purple-6: light-dark(#b562ea, #8127b3);\n --color-purple-7: light-dark(#ce8dfc, #660095);\n --color-purple-8: light-dark(#e8b6ff, #4f0076);\n --color-purple-9: light-dark(#fbe4ff, #23003a);\n --color-purple-transparent: light-dark(#9640ca66, #9c47d180);\n --color-purple-extra-transparent: light-dark(#9640ca33, #9c47d159);\n\n / Magenta /\n --color-magenta-1: light-dark(#21000c, #ffe1ef);\n --color-magenta-2: light-dark(#480023, #ffbdd9);\n --color-magenta-3: light-dark(#73003d, #ff7db8);\n --color-magenta-4: light-dark(#9b0058, #ea5096);\n --color-magenta-5: light-dark(#c32775, #ca2f7b);\n --color-magenta-6: light-dark(#e45193, #aa0061);\n --color-magenta-7: light-dark(#fe7cb1, #850048);\n --color-magenta-8: light-dark(#ffadd0, #660035);\n --color-magenta-9: light-dark(#ffe1f0, #300015);\n --color-magenta-transparent: light-dark(#c3277566, #ca2f7b80);\n --color-magenta-extra-transparent: light-dark(#c3277533, #ca2f7b59);\n\n / Gray /\n --color-gray-1: light-dark(#090b0f, #ebeff3);\n --color-gray-2: light-dark(#202226, #d4d8dc);\n --color-gray-3: light-dark(#383b3f, #b1b4b9);\n --color-gray-4: light-dark(#53555a, #8f9297);\n --color-gray-5: light-dark(#6f7276, #75787c);\n --color-gray-6: light-dark(#8d8f94, #5b5e62);\n --color-gray-7: light-dark(#abaeb3, #424549);\n --color-gray-8: light-dark(#cbced3, #303337);\n --color-gray-9: light-dark(#eceff4, #121417);\n --color-gray-transparent: light-dark(#6f727666, #75787c80);\n --color-gray-extra-transparent: light-dark(#6f727633, #75787c59);\n\n / Semantic colors /\n --color-body: light-dark(#f9fafc, #14161a);\n --color-body-alt: light-dark(#fff, #010203);\n --color-body-text: light-dark(#030305, #fff);\n --color-body-text-alt: light-dark(#404247, #ccced0);\n --color-shadow: light-dark(#45484c26, #00000166);\n --color-outline: light-dark(#d8dbe0, #434549);\n\n / Font sizes /\n --font-size-xs: clamp(0.6944rem, 0.6855rem + 0.0446vw, 0.72rem);\n --font-size-s: clamp(0.8331rem, 0.8099rem + 0.1163vw, 0.9rem);\n --font-size-m: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);\n --font-size-l: clamp(1.2rem, 1.1283rem + 0.3587vw, 1.4063rem);\n --font-size-xl: clamp(1.44rem, 1.3293rem + 0.5533vw, 1.7581rem);\n --font-size-2xl: clamp(1.7281rem, 1.5649rem + 0.8163vw, 2.1975rem);\n --font-size-3xl: clamp(2.0738rem, 1.8396rem + 1.1707vw, 2.7469rem);\n --font-size-4xl: clamp(2.4881rem, 2.1594rem + 1.6435vw, 3.4331rem);\n\n / Font weights /\n --font-weight-light: 300;\n --font-weight-normal: 400;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --font-weight-black: 900;\n\n / Font families /\n --font-family-body: \"Avenir Next\", avenir, \"Segoe UI Variable Display\",\n \"Segoe UI\", \"URW Gothic\", source-sans-pro, ui-sans-serif, sans-serif;\n --font-family-heading: seravek, \"Gill Sans Nova\", \"Gill Sans MT\", cantarell,\n \"DejaVu Sans\", source-sans-pro, ui-sans-serif, sans-serif;\n --font-family-mono: ui-monospace, \"Cascadia Code\", menlo, hack, monospace;\n\n / Spacing /\n --space-none: 0;\n --space-3xs: clamp(4px, 3.6528px + 0.1087vw, 5px);\n --space-2xs: clamp(8px, 7.6528px + 0.1087vw, 9px);\n --space-xs: clamp(12px, 11.304px + 0.2174vw, 14px);\n --space-s: clamp(16px, 15.304px + 0.2174vw, 18px);\n --space-m: clamp(24px, 22.9568px + 0.3261vw, 27px);\n --space-l: clamp(32px, 30.608px + 0.4348vw, 36px);\n --space-xl: clamp(48px, 45.9136px + 0.6522vw, 54px);\n --space-2xl: clamp(64px, 61.2176px + 0.8696vw, 72px);\n --space-3xl: clamp(96px, 91.8256px + 1.3043vw, 108px);\n --space-body-x: clamp(20px, 17.5652px + 0.7609vw, 27px);\n --space-body-y: 20px;\n\n / Radii /\n --radius-none: 0;\n --radius-s: 3px;\n --radius-m: 6px;\n --radius-l: 12px;\n --radius-xl: 24px;\n --radius-2xl: 64px;\n --radius-full: 9999px;\n\n / Shadows /\n --shadow-none: none;\n --shadow-s: 0 1px 3px -1px var(--color-shadow);\n --shadow-m: 0 1px 7px -1px var(--color-shadow);\n --shadow-l: var(--shadow-s), 0 1px 11px -1px var(--color-shadow);\n --shadow-xl: var(--shadow-m), 0 1px 15px -1px var(--color-shadow);\n\n / Border widths /\n --border-none: 0;\n --border-s: 1px;\n --border-m: 2px;\n --border-l: 5px;\n --border-xl: 8px;\n\n / Opacity /\n --opacity-disabled: light-dark(0.65, 0.5);\n\n / Easing functions /\n --ease-default: cubic-bezier(0.6, 0.22, 0.45, 0.9);\n --ease-out: cubic-bezier(0.17, 0.84, 0.44, 1);\n --ease-in: cubic-bezier(0.7, 0.1, 0.8, 0.65);\n --ease-both: cubic-bezier(0.65, 0.05, 0.36, 1);\n --ease-both-subtle: cubic-bezier(0.45, 0.12, 0.55, 0.88);\n --ease-spring: cubic-bezier(0.95, -0.55, 0.05, 1.55);\n\n / Durations /\n --duration-short: 100ms;\n --duration-medium: 150ms;\n --duration-long: 250ms;\n --duration-extra-long: 350ms;\n}\n",".link,\n.card-title[href],\n:where(.style-semantic-elements a) {\n color: var(--color-sky-4);\n font-weight: var(--font-weight-semibold);\n text-decoration-line: underline;\n text-decoration-color: var(--color-sky-transparent);\n text-decoration-skip-ink: all;\n text-decoration-thickness: 0.1em;\n text-underline-offset: 0.1em;\n cursor: pointer;\n transition: text-decoration-color var(--duration-short) var(--ease-default);\n\n &:is(:hover, .hover) {\n text-decoration-color: currentcolor;\n }\n\n &:focus-visible {\n outline-offset: 1px;\n }\n}\n\n/ External and Download icons /\na[target=\"_blank\"]:is(.link, .button, .app-sidebar-item):not(.no-external-icon),\n:where(.style-semantic-elements a[target=\"_blank\"]:not(.no-external-icon)),\na[download]:is(.link, .button, .app-sidebar-item):not(.no-download-icon),\n:where(.style-semantic-elements a[download]:not(.no-download-icon)) {\n &::after {\n content: \"\";\n print-color-adjust: exact;\n mask-size: contain;\n mask-repeat: no-repeat;\n background-color: var(--color-gray-5);\n display: inline-block;\n vertical-align: baseline;\n margin-inline-start: 0.25em;\n transition: background-color var(--duration-short) var(--ease-default);\n }\n\n &:hover::after {\n background-color: var(--color-gray-4);\n }\n\n &.button::after {\n background-color: currentcolor !important;\n margin-inline-start: initial;\n }\n\n / External icon /\n &[target=\"_blank\"] {\n &::after {\n mask-image: url(\"@/src/svg/external.svg\");\n height: 0.85em;\n width: 0.85em;\n transform: translateY(9%);\n }\n\n &.button::after {\n transform: translateY(2%);\n }\n }\n\n / Download icon /\n &[download] {\n &::after {\n mask-image: url(\"@/src/svg/download.svg\");\n height: 0.95em;\n width: 0.95em;\n transform: translateY(7%);\n }\n\n &.button::after {\n transform: translateY(-5%);\n }\n }\n}\n",".button {\n --button-fg-color: var(--color-body-text);\n --button-bg-color: var(--color-gray-9);\n --button-border-color: var(--color-gray-8);\n --button-font-weight: var(--font-weight-normal);\n --button-focus-ring-color: var(--color-gray-extra-transparent);\n --button-shadow: var(--shadow-s);\n --button-hover-bg-color: var(--button-border-color);\n\n box-sizing: border-box;\n display: inline-flex;\n outline: 0;\n padding-inline: 1.25em;\n padding-block: 0.75em;\n gap: 0.625em;\n border-style: solid;\n transform: scale(1);\n transition-property: box-shadow, background-color, transform, opacity;\n transition-duration: var(--duration-medium);\n transition-timing-function: var(--ease-default);\n text-decoration: none;\n position: relative;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n cursor: pointer;\n border-width: var(--border-s);\n border-radius: var(--radius-m);\n min-height: 2.6em;\n min-width: 3em;\n line-height: 1;\n font-family: var(--font-family-body);\n box-shadow: var(--button-shadow);\n user-select: none;\n font-size: 1rem;\n color: var(--button-fg-color);\n background-color: var(--button-bg-color);\n border-color: var(--button-border-color);\n font-weight: var(--button-font-weight);\n\n &::before {\n content: \"\";\n background-color: var(--button-hover-bg-color);\n position: absolute;\n inset: 0;\n margin: auto;\n transition-property: opacity, width, height, border-radius;\n transition-duration: var(--duration-medium);\n transition-timing-function: var(--ease-default);\n z-index: -1;\n border-radius: 2em;\n width: 4em;\n height: 4em;\n opacity: 0;\n }\n\n &:is(:focus-visible, .focus) {\n box-shadow:\n var(--button-shadow),\n 0 0 0 0.1em var(--button-border-color),\n 0 0 0 calc(0.2em + var(--border-s)) var(--button-focus-ring-color);\n }\n\n &:is(:active, .active) {\n transform: scale(0.98);\n\n /\n * On low-resolution screens, the scale effect makes text jump\n * around awkwardly, so we use an alternative.\n /\n @media screen and (resolution < 2x) {\n transform: translateY(1px);\n }\n }\n\n &:is(:hover, .hover) {\n text-decoration: none;\n\n &::before {\n opacity: 1;\n width: 100%;\n height: 100%;\n border-radius: 5px;\n }\n\n / inputs don't support children, so the ::before pseudo element won't work /\n &:is(input) {\n background-color: var(--button-hover-bg-color);\n }\n }\n\n &.primary {\n --button-fg-color: white;\n --button-bg-color: var(--color-brand-5);\n --button-border-color: var(--color-brand-4);\n --button-font-weight: var(--font-weight-bold);\n --button-focus-ring-color: var(--color-brand-transparent);\n\n &.red {\n --button-bg-color: var(--color-red-5);\n --button-border-color: var(--color-red-4);\n --button-focus-ring-color: var(--color-red-transparent);\n }\n\n &.orange {\n --button-bg-color: var(--color-orange-5);\n --button-border-color: var(--color-orange-4);\n --button-focus-ring-color: var(--color-orange-transparent);\n }\n\n &.yellow {\n --button-bg-color: var(--color-yellow-5);\n --button-border-color: var(--color-yellow-4);\n --button-focus-ring-color: var(--color-yellow-transparent);\n }\n\n &.green {\n --button-bg-color: var(--color-green-5);\n --button-border-color: var(--color-green-4);\n --button-focus-ring-color: var(--color-green-transparent);\n }\n\n &.sky {\n --button-bg-color: var(--color-sky-5);\n --button-border-color: var(--color-sky-4);\n --button-focus-ring-color: var(--color-sky-transparent);\n }\n\n &.blue {\n --button-bg-color: var(--color-blue-5);\n --button-border-color: var(--color-blue-4);\n --button-focus-ring-color: var(--color-blue-transparent);\n }\n\n &.purple {\n --button-bg-color: var(--color-purple-5);\n --button-border-color: var(--color-purple-4);\n --button-focus-ring-color: var(--color-purple-transparent);\n }\n\n &.magenta {\n --button-bg-color: var(--color-magenta-5);\n --button-border-color: var(--color-magenta-4);\n --button-focus-ring-color: var(--color-magenta-transparent);\n }\n\n &.gray {\n --button-bg-color: var(--color-gray-5);\n --button-border-color: var(--color-gray-4);\n --button-focus-ring-color: var(--color-gray-transparent);\n }\n\n &.black {\n --button-bg-color: black;\n --button-border-color: #3d3d3d;\n --button-focus-ring-color: var(--color-gray-transparent);\n }\n\n &.white {\n --button-fg-color: black;\n --button-bg-color: white;\n --button-border-color: #d0d0d0;\n --button-focus-ring-color: var(--color-gray-transparent);\n }\n }\n\n &.subtle {\n --button-fg-color: var(--color-brand-4);\n --button-bg-color: transparent;\n --button-border-color: transparent;\n --button-hover-bg-color: var(--color-brand-extra-transparent);\n --button-font-weight: var(--font-weight-bold);\n --button-focus-ring-color: transparent;\n --button-shadow: none;\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-brand-transparent);\n --button-hover-bg-color: transparent;\n }\n\n &.red {\n --button-fg-color: var(--color-red-4);\n --button-hover-bg-color: var(--color-red-extra-transparent);\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-red-transparent);\n }\n }\n\n &.orange {\n --button-fg-color: var(--color-orange-4);\n --button-hover-bg-color: var(--color-orange-extra-transparent);\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-orange-transparent);\n }\n }\n\n &.yellow {\n --button-fg-color: var(--color-yellow-4);\n --button-hover-bg-color: var(--color-yellow-extra-transparent);\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-yellow-transparent);\n }\n }\n\n &.green {\n --button-fg-color: var(--color-green-4);\n --button-hover-bg-color: var(--color-green-extra-transparent);\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-green-transparent);\n }\n }\n\n &.sky {\n --button-fg-color: var(--color-sky-4);\n --button-hover-bg-color: var(--color-sky-extra-transparent);\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-sky-transparent);\n }\n }\n\n &.blue {\n --button-fg-color: var(--color-blue-4);\n --button-hover-bg-color: var(--color-blue-extra-transparent);\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-blue-transparent);\n }\n }\n\n &.purple {\n --button-fg-color: var(--color-purple-4);\n --button-hover-bg-color: var(--color-purple-extra-transparent);\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-purple-transparent);\n }\n }\n\n &.magenta {\n --button-fg-color: var(--color-magenta-4);\n --button-hover-bg-color: var(--color-magenta-extra-transparent);\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-magenta-transparent);\n }\n }\n\n &.gray,\n &.black,\n &.white {\n --button-hover-bg-color: var(--color-gray-extra-transparent);\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-gray-transparent);\n }\n }\n\n &.gray {\n --button-fg-color: var(--color-gray-4);\n }\n\n &.black {\n --button-fg-color: black;\n }\n\n &.white {\n --button-fg-color: white;\n }\n }\n\n &.small {\n font-size: 0.8rem;\n }\n\n &.large {\n font-size: 1.2rem;\n }\n\n &.icon {\n border-radius: var(--radius-full);\n min-width: 0;\n min-height: 0;\n aspect-ratio: 1;\n padding: 0.5em;\n\n / Subtle icon buttons use normal pseudo element hover effect /\n &.subtle {\n &::before {\n width: 75%;\n height: 75%;\n }\n\n &:is(:hover, .hover)::before {\n width: 100%;\n height: 100%;\n border-radius: 100%;\n }\n }\n\n / Normal icon buttons just change background color /\n &:not(.subtle) {\n &::before {\n content: unset;\n }\n\n &:is(:hover, .hover) {\n background-color: var(--button-hover-bg-color);\n }\n }\n }\n\n &:is(:disabled, .disabled, [aria-disabled=\"true\"]) {\n opacity: var(--opacity-disabled);\n cursor: not-allowed;\n transform: scale(1);\n\n &:is(:hover, .hover)::before {\n opacity: 0;\n }\n }\n\n &.loading {\n cursor: progress;\n\n &::before {\n opacity: 1 !important;\n height: 100% !important;\n border-radius: inherit !important;\n animation: button-loading-bg 1200ms var(--ease-both-subtle) infinite\n forwards;\n }\n\n &:is(:disabled, .disabled, [aria-disabled=\"true\"]) {\n cursor: wait;\n }\n }\n}\n\n@keyframes button-loading-bg {\n 0% {\n width: 0;\n margin: 0 auto 0 0;\n }\n\n 50% {\n width: 100%;\n }\n\n 100% {\n width: 0;\n margin: 0 0 0 auto;\n }\n}\n",".accordion {\n width: 100%;\n\n details {\n width: 100%;\n background-color: var(--color-body-alt);\n padding-block: 0;\n padding-inline: var(--space-xs);\n border-radius: var(--radius-m);\n border: var(--border-s) solid var(--color-outline);\n box-shadow: var(--shadow-s);\n font-family: var(--font-family-body);\n font-size: var(--font-size-m);\n font-weight: var(--font-weight-normal);\n\n @media (prefers-reduced-motion: no-preference) {\n transition: padding var(--duration-long) var(--ease-out);\n interpolate-size: allow-keywords;\n }\n\n & + details {\n border-block-start: 0;\n }\n\n &:not(:first-of-type) {\n border-start-start-radius: 0;\n border-start-end-radius: 0;\n }\n\n &:not(:last-of-type) {\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n }\n\n &::details-content {\n opacity: 0;\n block-size: 0;\n overflow-y: clip;\n transition-property: content-visibility, opacity, block-size;\n transition-duration: var(--duration-long);\n transition-timing-function: var(--ease-out);\n transition-behavior: allow-discrete;\n }\n\n &[open] {\n padding-block-end: var(--space-xs);\n\n &::details-content {\n opacity: 1;\n block-size: auto;\n }\n\n summary {\n border-block-end-color: var(--color-outline);\n margin-block-end: var(--space-xs);\n\n &::before {\n rotate: 0deg;\n }\n\n &:not(:active, .active, :hover, .hover) {\n color: var(--color-brand-3);\n }\n }\n }\n }\n\n summary {\n font-family: var(--font-family-heading);\n font-size: var(--font-size-m);\n font-weight: var(--font-weight-bold);\n line-height: 1;\n cursor: pointer;\n border-block-end: var(--border-s) dashed transparent;\n padding: var(--space-xs);\n padding-inline-start: calc(var(--space-xs) + 1em);\n margin-block: 0;\n margin-inline: calc(-1 var(--space-xs));\n transition-duration: var(--duration-short);\n transition-property: color, border-color;\n transition-timing-function: var(--ease-default);\n position: relative;\n list-style: none; /* Hides ::marker pseudo element in favor of ::before (better cross browser consistency) /\n color: var(--color-body-text);\n user-select: none;\n\n @media (prefers-reduced-motion: no-preference) {\n transition-property: color, border-color, padding, margin;\n }\n\n &:is(:hover, .hover) {\n color: light-dark(var(--color-brand-4), var(--color-brand-2));\n }\n\n &:is(:active, .active) {\n color: light-dark(var(--color-brand-2), var(--color-brand-4));\n }\n\n / Hides ::-webkit-details-marker pseudo element in favor of ::before (better cross browser consistency) /\n &::-webkit-details-marker {\n display: none;\n }\n\n / Replacement marker element /\n &::before {\n content: light-dark(\n url(\"@/src/svg/dropdown-thick.svg\"),\n url(\"@/src/svg/dropdown-invert-thick.svg\")\n );\n display: inline-block;\n position: absolute;\n inset-block: 0;\n inset-inline-start: calc(var(--space-xs) / 2);\n margin: auto;\n width: 1em;\n height: 1em;\n rotate: -90deg;\n transition: rotate var(--duration-long) var(--ease-spring);\n }\n\n &:dir(rtl)::before {\n rotate: 90deg;\n }\n\n @media (prefers-reduced-motion) {\n transition-property: color, border-color;\n\n &::before {\n transition: none;\n }\n }\n }\n\n &.subtle {\n details {\n box-shadow: none;\n border: 0;\n background-color: transparent;\n padding-inline-start: calc(var(--space-xs) + 1em);\n\n &[open] summary {\n margin-block-end: var(--space-3xs);\n }\n }\n\n summary {\n border-block-end: 0;\n padding-block: var(--space-2xs);\n margin-inline-start: calc(-1 (var(--space-xs) + 1em));\n }\n }\n}\n",".alert,\n.banner {\n display: block;\n font-family: var(--font-family-body);\n font-size: var(--font-size-m);\n font-weight: var(--font-weight-normal);\n color: var(--color-body-text);\n position: relative;\n background:\n linear-gradient(var(--alert-bg-color), var(--alert-bg-color)) padding-box,\n linear-gradient(\n to right,\n var(--alert-border-start-color),\n var(--alert-border-end-color)\n )\n border-box;\n border: var(--border-m) solid transparent;\n line-height: 1.4;\n\n > * {\n line-height: 1.4;\n }\n\n @media print {\n & {\n border-color: var(--alert-border-start-color);\n }\n }\n\n &::before,\n &::after {\n content: \"\";\n print-color-adjust: exact;\n position: absolute;\n inset-block: 0;\n margin-block: auto;\n width: 2em;\n height: 2em;\n }\n\n &::before {\n z-index: 2;\n mask-image: var(--alert-icon);\n mask-repeat: no-repeat;\n mask-size: contain;\n background-color: var(--alert-border-start-color);\n scale: 0.5;\n }\n\n &::after {\n z-index: 1;\n background-color: light-dark(#fffe, #000e);\n border-radius: var(--radius-full);\n border: 3px solid var(--alert-border-start-color);\n scale: 0.75;\n }\n\n &.error {\n --alert-bg-color: var(--color-red-9);\n --alert-border-start-color: var(--color-red-5);\n --alert-border-end-color: var(--color-red-6);\n --alert-icon: url(\"@/src/svg/x-thick.svg\");\n }\n\n &.warning {\n --alert-bg-color: var(--color-yellow-9);\n --alert-border-start-color: var(--color-yellow-5);\n --alert-border-end-color: var(--color-yellow-6);\n --alert-icon: url(\"@/src/svg/warning-thick.svg\");\n }\n\n &.success {\n --alert-bg-color: var(--color-green-9);\n --alert-border-start-color: var(--color-green-5);\n --alert-border-end-color: var(--color-green-6);\n --alert-icon: url(\"@/src/svg/check-thick.svg\");\n }\n\n &.info {\n --alert-bg-color: var(--color-sky-9);\n --alert-border-start-color: var(--color-sky-5);\n --alert-border-end-color: var(--color-sky-6);\n --alert-icon: url(\"@/src/svg/info-thick.svg\");\n }\n}\n\n.alert-title,\n.banner-title {\n font-family: var(--font-family-heading);\n font-weight: var(--font-weight-bold);\n line-height: 1;\n color: var(--alert-border-start-color);\n font-size: 0.85em;\n margin: 0;\n margin-block-end: 0.15em;\n}\n","/\n Note: for most of the styles applied using `style-semantic-elements`, we use the\n * `:where()` selector to reduce specificity so we can more easily override them.\n * However, this breaks the styling for nested lists, which relies on the specificity\n * of the selectors for each level of nesting being higher than the last. Therefore,\n * we don't use this technique for Lists.\n /\n\n/ Add space between subsequent items and nested lists /\n.list li + li,\n.list .list,\n.style-semantic-elements li + li,\n.style-semantic-elements :is(ol, ul) :is(ol, ul) {\n margin-block-start: var(--space-2xs);\n}\n\n/ Style ordered list markers /\nol.list li::marker,\n.style-semantic-elements ol li::marker {\n color: var(--color-body-text-alt);\n font-size: 0.85em;\n font-family: var(--font-family-heading);\n font-weight: var(--font-weight-semibold);\n line-height: 0;\n}\n\n/ Style unordered list markers /\nul.list li::marker,\n.style-semantic-elements ul li::marker {\n color: var(--color-body-text-alt);\n font-weight: var(--font-weight-bold);\n}\n\n/ Cycle through list marker types in nested lists /\nol.list,\nol.list ol.list ol.list ol.list,\n.style-semantic-elements ol,\n.style-semantic-elements ol ol ol ol {\n list-style: decimal;\n}\n\nol.list ol.list,\nol.list ol.list ol.list ol.list ol.list,\n.style-semantic-elements ol ol,\n.style-semantic-elements ol ol ol ol ol {\n list-style: lower-latin;\n}\n\nol.list ol.list ol.list,\nol.list ol.list ol.list ol.list ol.list ol.list,\n.style-semantic-elements ol ol ol,\n.style-semantic-elements ol ol ol ol ol ol {\n list-style: lower-roman;\n}\n\nul.list,\nul.list ul.list ul.list ul.list,\n.style-semantic-elements ul,\n.style-semantic-elements ul ul ul ul {\n list-style: disc;\n}\n\nul.list ul.list,\nul.list ul.list ul.list ul.list ul.list,\n.style-semantic-elements ul ul,\n.style-semantic-elements ul ul ul ul ul {\n list-style: circle;\n}\n\nul.list ul.list ul.list,\nul.list ul.list ul.list ul.list ul.list ul.list,\n.style-semantic-elements ul ul ul,\n.style-semantic-elements ul ul ul ul ul ul {\n list-style: square;\n}\n\n/ Make the markers a different color for their second appearance in a nested list /\nol.list ol.list ol.list ol.list li::marker,\nul.list ul.list ul.list ul.list li::marker,\n.style-semantic-elements ol ol ol ol li::marker,\n.style-semantic-elements ul ul ul ul li::marker {\n color: var(--color-brand-3);\n}\n",".chip {\n --chip-fg-color: white;\n --chip-bg-color: var(--color-brand-6);\n --chip-border-color: var(--color-brand-5);\n --chip-focus-color: var(--color-brand-transparent);\n\n display: inline-flex;\n align-items: center;\n border-radius: var(--radius-full);\n font-size: var(--font-size-s);\n font-family: var(--font-family-body);\n font-weight: var(--font-weight-normal);\n padding-block: var(--space-3xs);\n padding-inline: var(--space-xs);\n background-color: var(--chip-bg-color);\n border: var(--border-s) solid var(--chip-border-color);\n color: var(--chip-fg-color);\n flex-shrink: 0;\n cursor: default;\n transition-property: box-shadow, background-color, border-color, transform;\n transition-duration: var(--duration-medium);\n transition-timing-function: var(--ease-default);\n text-decoration: none;\n appearance: none;\n line-height: 1.2;\n\n &.clickable {\n cursor: pointer;\n box-shadow: var(--shadow-s);\n transform: scale(1);\n\n &:is(:focus-visible, .focus) {\n outline: 0;\n box-shadow:\n var(--shadow-s),\n 0 0 0 0.1em var(--chip-border-color),\n 0 0 0 calc(0.2em + var(--border-s)) var(--chip-focus-color);\n }\n\n &:is(:hover, .hover) {\n background-color: var(--chip-border-color);\n }\n\n &:is(:active, .active) {\n transform: scale(0.96);\n\n /\n * On low-resolution screens, the scale effect makes text jump\n * around awkwardly, so we use an alternative.\n /\n @media screen and (resolution < 2x) {\n transform: translateY(1px);\n }\n }\n }\n\n &.red {\n --chip-bg-color: var(--color-red-6);\n --chip-border-color: var(--color-red-5);\n --chip-focus-color: var(--color-red-transparent);\n }\n\n &.orange {\n --chip-bg-color: var(--color-orange-6);\n --chip-border-color: var(--color-orange-5);\n --chip-focus-color: var(--color-orange-transparent);\n }\n\n &.yellow {\n --chip-bg-color: var(--color-yellow-6);\n --chip-border-color: var(--color-yellow-5);\n --chip-focus-color: var(--color-yellow-transparent);\n }\n\n &.green {\n --chip-bg-color: var(--color-green-6);\n --chip-border-color: var(--color-green-5);\n --chip-focus-color: var(--color-green-transparent);\n }\n\n &.sky {\n --chip-bg-color: var(--color-sky-6);\n --chip-border-color: var(--color-sky-5);\n --chip-focus-color: var(--color-sky-transparent);\n }\n\n &.blue {\n --chip-bg-color: var(--color-blue-6);\n --chip-border-color: var(--color-blue-5);\n --chip-focus-color: var(--color-blue-transparent);\n }\n\n &.purple {\n --chip-bg-color: var(--color-purple-6);\n --chip-border-color: var(--color-purple-5);\n --chip-focus-color: var(--color-purple-transparent);\n }\n\n &.magenta {\n --chip-bg-color: var(--color-magenta-6);\n --chip-border-color: var(--color-magenta-5);\n --chip-focus-color: var(--color-magenta-transparent);\n }\n\n &.gray {\n --chip-bg-color: var(--color-gray-6);\n --chip-border-color: var(--color-gray-5);\n --chip-focus-color: var(--color-gray-transparent);\n }\n\n &.black {\n --chip-bg-color: black;\n --chip-border-color: #3d3d3d;\n --chip-focus-color: var(--color-gray-transparent);\n }\n\n &.white {\n --chip-fg-color: black;\n --chip-bg-color: white;\n --chip-border-color: #d0d0d0;\n --chip-focus-color: var(--color-gray-transparent);\n }\n}\n\n.chip-delete {\n outline: 1px solid transparent;\n margin-inline: var(--space-3xs) calc(-1 var(--space-2xs));\n font-size: 0.6em;\n border: 0;\n border-radius: var(--radius-full);\n transition-property: background-color, outline-color, filter;\n transition-duration: var(--duration-short);\n transition-timing-function: var(--ease-default);\n position: relative;\n overflow: hidden;\n cursor: pointer;\n height: 2em;\n width: 2em;\n user-select: none;\n background-color: var(--chip-border-color);\n padding: 0;\n display: inline-flex;\n box-shadow: none;\n\n &::after {\n content: \"\";\n width: 1.7em;\n height: 1.7em;\n mask-image: url(\"@/src/svg/x.svg\");\n mask-size: contain;\n mask-repeat: no-repeat;\n mask-position: center;\n background-color: var(--chip-fg-color);\n margin: auto;\n }\n\n &:is(:focus-visible, .focus) {\n outline-color: var(--chip-fg-color);\n }\n\n &:is(:hover, .hover) {\n background-color: hsl(from var(--chip-border-color) h s calc(l + 5));\n }\n\n &:is(:active, .active) {\n background-color: hsl(from var(--chip-border-color) h s calc(l - 20));\n }\n}\n",".alert {\n border-radius: var(--radius-s);\n border-start-start-radius: calc(var(--space-2xs) + 2em);\n border-end-start-radius: calc(var(--space-2xs) + 2em);\n padding: var(--space-2xs);\n padding-inline-start: calc(var(--space-2xs) + 2em);\n\n &::before,\n &::after {\n inset-inline-start: calc(var(--space-2xs) * 0.5);\n }\n}\n",".divider,\n:where(.style-semantic-elements hr, .style-semantic-elements br) {\n --divider-thickness: var(--border-s);\n\n display: block;\n border-style: solid;\n border-color: var(--color-outline);\n border-width: 0;\n border-top-width: var(--divider-thickness);\n margin: var(--space-xs) 0;\n outline: 0;\n width: 100%;\n height: 0;\n print-color-adjust: exact;\n position: relative;\n\n &.vertical {\n display: inline-block;\n border-top-width: 0;\n border-left-width: var(--divider-thickness);\n margin: auto var(--space-xs);\n width: 0;\n height: 100%;\n min-height: 1em;\n }\n}\n\n.divider.invisible,\n:where(.style-semantic-elements br) {\n visibility: hidden;\n}\n\n.divider.thick {\n --divider-thickness: var(--border-m);\n}\n\n.divider.thicker {\n --divider-thickness: var(--border-l);\n}\n\n.divider.dashed {\n border-style: dashed;\n}\n\n.divider.dotted {\n border-style: dotted;\n}\n","meter.meter {\n appearance: none;\n inline-size: 100%;\n block-size: 1em;\n}\n\n@supports selector(::-moz-meter-bar) {\n meter.meter {\n border-radius: var(--radius-s);\n border: 0;\n display: block;\n inline-size: 100%;\n block-size: 1em;\n box-shadow: inset 0 0 0 var(--border-s) var(--color-outline);\n background: var(--color-gray-9);\n box-sizing: border-box;\n overflow: clip;\n }\n}\n\n.meter::-webkit-meter-bar {\n border-radius: var(--radius-s);\n border: 0;\n display: block;\n inline-size: 100%;\n block-size: 1em;\n box-shadow: inset 0 0 0 var(--border-s) var(--color-outline);\n background: var(--color-gray-9);\n box-sizing: border-box;\n overflow: clip;\n}\n\n.meter::-webkit-meter-optimum-value,\n.meter::-webkit-meter-suboptimum-value,\n.meter::-webkit-meter-even-less-good-value {\n border-radius: var(--radius-s);\n border: var(--border-s) solid transparent;\n box-sizing: border-box;\n}\n\n.meter::-webkit-meter-inner-element {\n display: inline-block;\n position: relative;\n}\n\n.meter::-moz-meter-bar {\n border-radius: var(--radius-s);\n border: var(--border-s) solid transparent;\n box-sizing: border-box;\n}\n\n.meter::-webkit-meter-optimum-value {\n background: var(--color-green-6);\n border-color: var(--color-green-5);\n}\n\n.meter:-moz-meter-optimum::-moz-meter-bar {\n background: var(--color-green-6);\n border-color: var(--color-green-5);\n}\n\n.meter::-webkit-meter-suboptimum-value {\n background: light-dark(var(--color-yellow-7), var(--color-yellow-5));\n border-color: light-dark(var(--color-yellow-6), var(--color-yellow-4));\n}\n\n.meter:-moz-meter-sub-optimum::-moz-meter-bar {\n background: light-dark(var(--color-yellow-7), var(--color-yellow-5));\n border-color: light-dark(var(--color-yellow-6), var(--color-yellow-4));\n}\n\n.meter::-webkit-meter-even-less-good-value {\n background: var(--color-red-6);\n border-color: var(--color-red-5);\n}\n\n.meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {\n background: var(--color-red-6);\n border-color: var(--color-red-5);\n}\n","@keyframes skeleton-pulse-light {\n from {\n opacity: 0.14;\n }\n\n to {\n opacity: 0.21;\n }\n}\n\n@keyframes skeleton-pulse-dark {\n from {\n opacity: 0.28;\n }\n\n to {\n opacity: 0.36;\n }\n}\n\n.skeleton,\n.skeleton-controller.loading .skeleton-item {\n animation: skeleton-pulse-light 1s var(--ease-both-subtle) alternate 0s\n infinite !important;\n border-radius: var(--radius-s) !important;\n background-color: var(--color-gray-5) !important;\n border: 0 !important;\n outline: 0 !important;\n box-shadow: 0 !important;\n pointer-events: none !important;\n color: transparent !important;\n mask-image: none !important;\n background-image: none !important;\n user-select: none !important;\n print-color-adjust: exact;\n\n /************************************************************\n Special styles for \"skeletonizing\" specific element types \n ***********************************************************/\n\n / Make block text take up the full width /\n &.paragraph,\n &.heading {\n inline-size: 100%;\n }\n\n / For empty text elements, add filler content so it isn't 0 height. /\n &:is(.paragraph, .heading, .chip, .card-title)::before {\n content: \".\";\n }\n\n / Add a reasonable minimum width to buttons and chips /\n &:is(.button, .chip):empty {\n min-inline-size: 5em;\n }\n\n / Add a reasonable width to card titles /\n &.card-title {\n inline-size: 40%;\n overflow: hidden;\n }\n\n / Visually hide contents, but let them take up space so elements don't collapse to 0 height. /\n &::before,\n &::after,\n > {\n visibility: hidden !important;\n }\n\n @media (prefers-color-scheme: dark) {\n animation-name: skeleton-pulse-dark !important;\n }\n}\n\n.skeleton-controller {\n display: contents;\n}\n","@keyframes indeterminate-progress {\n from {\n opacity: 0.2;\n }\n\n to {\n opacity: 0.8;\n }\n}\n\nprogress.progress {\n appearance: none;\n inline-size: 100%;\n block-size: 1em;\n}\n\n@supports selector(::-moz-progress-bar) {\n progress.progress {\n border-radius: var(--radius-s);\n border: 0;\n display: block;\n inline-size: 100%;\n block-size: 1em;\n box-shadow: inset 0 0 0 var(--border-s) var(--color-outline);\n background: var(--color-gray-9);\n box-sizing: border-box;\n overflow: clip;\n }\n}\n\n.progress::-webkit-progress-bar {\n border-radius: var(--radius-s);\n border: 0;\n display: block;\n inline-size: 100%;\n block-size: 1em;\n box-shadow: inset 0 0 0 var(--border-s) var(--color-outline);\n background: var(--color-gray-9);\n box-sizing: border-box;\n overflow: clip;\n}\n\n.progress::-webkit-progress-value {\n border-radius: var(--radius-s);\n border: var(--border-s) solid transparent;\n box-sizing: border-box;\n background: var(--color-blue-6);\n border-color: var(--color-blue-5);\n}\n\n.progress::-moz-progress-bar {\n border-radius: var(--radius-s);\n border: var(--border-s) solid transparent;\n box-sizing: border-box;\n background: var(--color-blue-6);\n border-color: var(--color-blue-5);\n}\n\n.progress:indeterminate::-webkit-progress-value {\n background: var(--color-blue-6);\n border-color: var(--color-blue-5);\n opacity: 0.5;\n inline-size: 100% !important;\n animation: indeterminate-progress 1s var(--ease-both-subtle) infinite\n alternate;\n}\n\n.progress:indeterminate::-moz-progress-bar {\n background: var(--color-blue-6);\n border-color: var(--color-blue-5);\n opacity: 0.5;\n inline-size: 100% !important;\n animation: indeterminate-progress 1s var(--ease-both-subtle) infinite\n alternate;\n}\n","/* See utils/base-dialog for more /\n.drawer {\n --dialog-starting-opacity: 1;\n --dialog-ending-opacity: 1;\n\n position: fixed;\n inset: 0;\n border-radius: 0;\n margin: 0;\n border: 0;\n overflow: auto;\n transition-duration: var(--duration-extra-long) !important;\n\n &.left {\n right: auto;\n\n @media (prefers-reduced-motion: no-preference) {\n --dialog-starting-transform: translateX(-100%);\n --dialog-ending-transform: translateX(-100%);\n }\n }\n\n &.top {\n bottom: auto;\n\n @media (prefers-reduced-motion: no-preference) {\n --dialog-starting-transform: translateY(-100%);\n --dialog-ending-transform: translateY(-100%);\n }\n }\n\n &.right {\n left: auto;\n\n @media (prefers-reduced-motion: no-preference) {\n --dialog-starting-transform: translateX(100%);\n --dialog-ending-transform: translateX(100%);\n }\n }\n\n &.bottom {\n top: auto;\n\n @media (prefers-reduced-motion: no-preference) {\n --dialog-starting-transform: translateY(100%);\n --dialog-ending-transform: translateY(100%);\n }\n }\n\n &.top,\n &.bottom {\n width: 100dvw;\n max-width: unset;\n height: auto;\n max-height: 100dvh;\n min-height: min(100dvh, 16rem);\n\n &.small {\n height: 18rem;\n }\n\n &.medium {\n height: 28rem;\n }\n\n &.large {\n height: 38rem;\n }\n }\n\n &.left,\n &.right {\n height: 100dvh;\n max-height: unset;\n width: auto;\n min-width: min(100dvw, 18rem);\n max-width: 100dvw;\n\n &.small {\n width: 22rem;\n }\n\n &.medium {\n width: 32rem;\n }\n\n &.large {\n width: 42rem;\n }\n }\n}\n\n.drawer-body {\n height: 100%;\n}\n\n.drawer-footer {\n padding: var(--space-xs);\n flex-shrink: 0;\n display: flex;\n gap: var(--space-xs);\n justify-content: flex-start;\n margin: 0;\n margin-block-start: auto;\n\n > {\n width: 100%;\n }\n}\n","/* See utils/base-dialog for more /\n.modal {\n max-height: calc(100svh - 4 var(--space-body-y));\n max-width: calc(100svw - 4 * var(--space-body-x));\n margin: auto;\n\n &.small {\n width: 25rem;\n }\n\n &.medium {\n width: 40rem;\n }\n\n &.large {\n width: 55rem;\n }\n}\n\n.modal-footer {\n padding: var(--space-xs);\n flex-shrink: 0;\n display: flex;\n gap: var(--space-2xs);\n justify-content: flex-start;\n background-color: var(--color-body);\n border-block-start: var(--border-s) solid var(--color-outline);\n margin: 0;\n\n @media screen and (width < 30rem) {\n flex-direction: column;\n width: 100%;\n justify-content: stretch;\n }\n\n .button:not(.small, .medium, .large) {\n font-size: 0.9rem;\n }\n}\n",".skip-link {\n position: fixed;\n display: inline-block;\n z-index: 100;\n top: var(--space-body-y);\n left: var(--space-body-x);\n background-color: var(--color-brand-5);\n padding: var(--space-xs);\n border-radius: var(--radius-m);\n border: 0.25em solid var(--color-brand-4);\n color: white;\n font-weight: var(--font-weight-bold);\n font-family: var(--font-family-body);\n font-size: var(--font-size-m);\n outline: 0;\n box-shadow:\n var(--shadow-l),\n 0 0 0 0.2em var(--color-brand-transparent);\n text-decoration: none;\n vertical-align: middle;\n opacity: 0.25;\n transition: opacity var(--duration-medium) var(--ease-default);\n pointer-events: none;\n line-height: 1;\n\n kbd {\n margin-inline-start: var(--space-2xs) !important;\n font-weight: initial;\n border: 0 !important;\n background-color: var(--color-brand-4) !important;\n color: inherit !important;\n font-size: 1.2em !important;\n }\n\n &:focus,\n &.static {\n opacity: 1;\n }\n\n &.static {\n position: static;\n pointer-events: unset;\n }\n}\n",".quote,\n:where(.style-semantic-elements blockquote) {\n display: block;\n margin: 0;\n color: var(--color-body-text-alt);\n border-inline-start: 0.25em solid var(--color-gray-transparent);\n padding: var(--space-3xs);\n padding-inline-start: var(--space-xs);\n position: relative;\n line-height: 1.25;\n font-family: var(--font-family-body);\n font-size: var(--font-size-m);\n font-weight: var(--font-weight-normal);\n\n footer {\n margin-block-start: 0.5em;\n font-size: var(--font-size-s);\n font-style: initial;\n color: var(--color-body-text);\n font-weight: var(--font-weight-semibold);\n\n cite {\n font-weight: var(--font-weight-normal);\n font-style: italic;\n }\n }\n}\n",".field {\n --field-gap: var(--space-2xs);\n --field-padding: 0.5em;\n --field-radius: var(--radius-m);\n\n display: inline-flex;\n flex-direction: column;\n line-height: 1;\n gap: var(--field-gap);\n color: var(--color-body-text);\n font-weight: var(--font-weight-semibold);\n transition-property: color, box-shadow;\n transition-duration: var(--duration-medium);\n transition-timing-function: var(--ease-default);\n font-size: var(--font-size-m);\n font-family: var(--font-family-body);\n\n &.compact,\n .fieldset.compact & {\n --field-gap: calc(0.9 * var(--space-2xs));\n --field-padding: 0.33em;\n --field-radius: var(--radius-s);\n\n font-size: calc(0.9 * var(--font-size-m));\n }\n\n &:focus-within {\n color: var(--color-brand-5);\n }\n\n &:has(:user-invalid, [aria-invalid=\"true\"]) {\n color: var(--color-red-5);\n\n .error-message {\n display: flex;\n }\n }\n\n &:has([readonly]):focus-within {\n color: var(--color-gray-5);\n }\n\n input:not(\n [type=\"button\"],\n [type=\"checkbox\"],\n [type=\"file\"],\n [type=\"hidden\"],\n [type=\"image\"],\n [type=\"radio\"],\n [type=\"range\"],\n [type=\"reset\"],\n [type=\"submit\"]\n ),\n select,\n textarea {\n color: var(--color-body-text);\n background-color: light-dark(white, black);\n border: var(--border-s) solid var(--color-outline);\n font-size: 1em;\n padding: var(--field-padding);\n border-radius: var(--field-radius);\n transition-property: color, box-shadow, border-color;\n transition-duration: var(--duration-medium);\n transition-timing-function: var(--ease-default);\n font-family: inherit;\n line-height: 1.25;\n\n &:focus {\n outline: 0;\n border-color: var(--color-brand-5);\n box-shadow:\n 0 0 0 0.1em var(--color-brand-5),\n 0 0 0 calc(0.2em + var(--border-s)) var(--color-brand-transparent);\n }\n\n &:focus-visible {\n outline: 0;\n }\n\n &:disabled {\n opacity: var(--opacity-disabled);\n cursor: not-allowed;\n }\n\n /* Not using :read-only because it matches additional elements (e.g., every color input) /\n &[readonly] {\n border-style: dashed;\n\n &:focus {\n outline: 0;\n border-style: solid;\n border-color: var(--color-gray-5);\n box-shadow:\n 0 0 0 0.1em var(--color-gray-5),\n 0 0 0 calc(0.2em + var(--border-s)) var(--color-gray-transparent);\n }\n }\n\n &:user-invalid,\n &[aria-invalid=\"true\"] {\n border-color: var(--color-red-5);\n box-shadow: 0 0 0 0.1em var(--color-red-5);\n\n &:focus {\n outline: 0;\n border-color: var(--color-red-5);\n box-shadow:\n 0 0 0 0.1em var(--color-red-5),\n 0 0 0 calc(0.2em + var(--border-s)) var(--color-red-transparent);\n }\n }\n }\n\n input[type=\"color\"] {\n inline-size: auto;\n block-size: auto;\n cursor: pointer;\n\n &::-webkit-color-swatch-wrapper {\n padding: 0;\n }\n\n &::-webkit-color-swatch {\n border: 0;\n block-size: 1.25em;\n inline-size: 100%;\n border-radius: var(--radius-s);\n }\n\n &::-moz-color-swatch {\n border: 0;\n block-size: 1.25em;\n inline-size: 100%;\n border-radius: var(--radius-s);\n }\n }\n\n select,\n input[list] {\n background-image: light-dark(\n url(\"@/src/svg/dropdown.svg\"),\n url(\"@/src/svg/dropdown-invert.svg\")\n );\n background-position: center right 0.25em;\n background-size: auto 75%;\n background-repeat: no-repeat;\n appearance: none;\n padding-inline-end: calc(2 var(--space-2xs) + 1em);\n\n &:dir(rtl) {\n background-position: center left 0.25em;\n }\n }\n\n select {\n cursor: pointer;\n }\n\n .help-text {\n font-size: 0.9em;\n color: var(--color-body-text-alt);\n font-weight: var(--font-weight-normal);\n margin: -0.25em 0 0;\n position: relative;\n }\n\n /* Todo glitches /\n .error-message {\n display: none;\n font-size: 0.9em;\n border: 0;\n padding: 0;\n margin: 0;\n font-weight: var(--font-weight-semibold);\n align-items: center;\n gap: 2px;\n\n &::before {\n content: \"\";\n mask-image: url(\"@/src/svg/x-circle.svg\");\n mask-size: contain;\n mask-repeat: no-repeat;\n mask-position: center;\n background-color: currentcolor;\n display: inline-block;\n height: 1.2em;\n width: 1.2em;\n }\n }\n\n .input-group {\n display: flex;\n flex-direction: row;\n align-items: stretch;\n\n > {\n border-radius: 0 !important;\n z-index: 1;\n }\n\n > :is(:user-invalid, [aria-invalid=\"true\"]) {\n z-index: 2;\n }\n\n > :first-child {\n border-start-start-radius: var(--field-radius) !important;\n border-end-start-radius: var(--field-radius) !important;\n }\n\n > :last-child {\n border-end-end-radius: var(--field-radius) !important;\n border-start-end-radius: var(--field-radius) !important;\n }\n\n > :focus-visible {\n z-index: 3;\n }\n\n > :is(.prefix, .suffix, .action) {\n user-select: none;\n -webkit-user-drag: none;\n display: flex;\n font-weight: var(--font-weight-normal);\n color: var(--color-gray-3);\n background-color: var(--color-gray-9);\n border: var(--border-s) solid var(--color-outline);\n padding: var(--field-padding) calc(2 * var(--field-padding));\n align-items: center;\n justify-content: center;\n font-size: 0.9em;\n\n :is(img, svg) {\n height: 1.15em;\n width: auto;\n }\n }\n\n > .prefix {\n border-inline-end: 0;\n }\n\n > .suffix {\n border-inline-start: 0;\n }\n\n > .action {\n cursor: pointer;\n color: var(--color-brand-3);\n border-inline-start: 0;\n transition-property: box-shadow, background-color;\n transition-duration: var(--duration-medium);\n transition-timing-function: var(--ease-default);\n\n &:hover {\n background-color: var(--color-gray-8);\n }\n\n &:active {\n background-color: var(--color-gray-7);\n }\n\n &:focus-visible {\n border-color: var(--color-brand-5);\n border-inline-start-width: var(--border-s);\n border-inline-start-style: solid;\n box-shadow:\n 0 0 0 0.11em var(--color-brand-5),\n 0 0 0 calc(0.22em + var(--border-s)) var(--color-brand-transparent);\n outline: 0;\n }\n }\n\n > :is(input, select, textarea) {\n width: 100%;\n\n &:has(~ .action:focus-visible) {\n border-inline-end-width: 0;\n }\n }\n }\n}\n\ninput[type=\"checkbox\"],\ninput[type=\"radio\"] {\n accent-color: var(--color-brand-5);\n}\n\nfieldset.fieldset {\n border: var(--border-s) solid var(--color-outline);\n border-radius: var(--radius-s);\n background-color: var(--color-body);\n color: var(--color-body-text);\n\n legend {\n font-family: var(--font-family-heading);\n font-weight: var(--font-weight-bold);\n transition: color var(--duration-medium) var(--ease-default);\n }\n\n &:focus-within legend {\n color: var(--color-brand-5);\n }\n}\n\n.form {\n max-width: 60ch;\n margin-inline-end: auto;\n}\n",".flow,\n.stack,\n.separate,\n.space {\n display: flex !important;\n gap: var(--space-s);\n\n &.no-gap {\n gap: var(--space-none);\n }\n\n &.densest {\n gap: var(--space-3xs);\n }\n\n &.denser {\n gap: var(--space-2xs);\n }\n\n &.dense {\n gap: var(--space-xs);\n }\n\n &.sparse {\n gap: var(--space-m);\n }\n\n &.sparser {\n gap: var(--space-l);\n }\n\n &.sparsest {\n gap: var(--space-xl);\n }\n\n &.horizontal,\n &.horizontally {\n flex-direction: row;\n }\n\n &.vertical,\n &.vertically {\n flex-direction: column;\n }\n}\n\n.flow {\n flex-wrap: wrap;\n align-items: center;\n justify-content: start;\n}\n\n.stack {\n flex-wrap: nowrap;\n align-items: stretch;\n justify-content: start;\n}\n\n.separate {\n flex-wrap: nowrap;\n align-items: center;\n justify-content: space-between;\n}\n\n.space {\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-evenly;\n}\n","input[type=\"range\"].slider {\n --slider-shadow-resting: var(--shadow-s);\n --slider-shadow-focused: var(--shadow-s), 0 0 0 0.08em var(--color-brand-5),\n 0 0 0 calc(0.16em + var(--border-s)) var(--color-brand-transparent);\n --slider-shadow-active: var(--shadow-s), 0 0 0 0.08em var(--color-brand-5);\n\n font-size: 1.2rem;\n block-size: 1.25em;\n appearance: none;\n background: transparent;\n cursor: pointer;\n\n @media (pointer: coarse) {\n font-size: 1.5rem;\n }\n\n &:disabled {\n opacity: var(--opacity-disabled);\n cursor: not-allowed;\n }\n\n &:focus-visible {\n outline: 0;\n\n &::-webkit-slider-thumb {\n border-color: var(--color-brand-5);\n box-shadow: var(--slider-shadow-focused);\n }\n\n &::-moz-range-thumb {\n border-color: var(--color-brand-5);\n box-shadow: var(--slider-shadow-focused);\n }\n }\n\n &:enabled:active {\n &::-webkit-slider-thumb {\n border-color: var(--color-brand-5);\n box-shadow: var(--slider-shadow-active);\n transform: scale(1);\n\n @media screen and (resolution >= 2x) {\n transform: scale(0.9);\n }\n }\n\n &::-moz-range-thumb {\n border-color: var(--color-brand-5);\n box-shadow: var(--slider-shadow-active);\n transform: scale(1);\n\n @media screen and (resolution >= 2x) {\n transform: scale(0.9);\n }\n }\n }\n\n &::-webkit-slider-runnable-track {\n block-size: 0.25em;\n inline-size: 100%;\n border-radius: var(--radius-full);\n background-color: var(--color-gray-8);\n print-color-adjust: exact;\n box-shadow: 0 0 1px var(--color-gray-7) inset;\n }\n\n &::-moz-range-track {\n block-size: 0.25em;\n inline-size: 100%;\n border-radius: var(--radius-full);\n background-color: var(--color-gray-8);\n print-color-adjust: exact;\n }\n\n &::-webkit-slider-thumb {\n height: 1.25em;\n width: 1.25em;\n border-radius: var(--radius-full);\n background-color: white;\n box-shadow: var(--slider-shadow-resting);\n border: var(--border-s) solid var(--color-outline);\n transition-property: border-color, box-shadow, transform;\n transition-duration: var(--duration-short);\n transition-timing-function: var(--ease-default);\n\n /* Additional properties needed for webkit /\n appearance: none;\n margin-block-start: -0.5em;\n }\n\n &::-moz-range-thumb {\n height: 1.25em;\n width: 1.25em;\n border-radius: var(--radius-full);\n background-color: white;\n box-shadow: var(--slider-shadow-resting);\n border: var(--border-s) solid var(--color-outline);\n transition-property: border-color, box-shadow, transform;\n transition-duration: var(--duration-short);\n transition-timing-function: var(--ease-default);\n }\n}\n","/ Style the label of a labeled switch, which is also the container that holds the switch itself /\nlabel.switch {\n inline-size: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n font-weight: var(--font-weight-semibold);\n gap: var(--space-3xs);\n font-size: var(--font-size-m);\n font-family: var(--font-family-body);\n}\n\n/ For small labeled switches, set the label text size to font-size-s /\nlabel.switch.small {\n font-size: var(--font-size-s);\n}\n\n/ Style the switch itself /\ninput[type=\"checkbox\"].switch,\nlabel.switch input[type=\"checkbox\"] {\n font-size: 1rem;\n print-color-adjust: exact;\n appearance: none;\n block-size: 1.8em;\n inline-size: 3em;\n border-radius: var(--radius-full);\n background-color: var(--color-gray-7);\n position: relative;\n flex: none;\n transition-property: background-color, box-shadow, border-color;\n transition-duration: var(--duration-medium);\n transition-timing-function: var(--ease-default);\n border: 0.1em solid var(--color-gray-6);\n cursor: pointer;\n\n &::after {\n content: \"\";\n position: absolute;\n height: 1.4em;\n width: 1.4em;\n background-color: white;\n inset-inline-start: 0.1em;\n inset-block-start: 0.1em;\n border-radius: var(--radius-full);\n box-shadow: var(--shadow-s);\n transition-property: border-color, transform;\n transition-duration: var(--duration-medium);\n transition-timing-function: var(--ease-both);\n transform: translateX(0);\n }\n\n &:disabled {\n opacity: var(--opacity-disabled);\n cursor: not-allowed;\n }\n\n &:is(:focus-visible, .focus) {\n border-color: var(--color-gray-6);\n box-shadow:\n 0 0 0 0.08em var(--color-gray-6),\n 0 0 0 calc(0.16em + var(--border-s)) var(--color-gray-transparent);\n outline: 0;\n }\n\n &:checked {\n background-color: var(--color-brand-6);\n border-color: var(--color-brand-5);\n\n &::after {\n transform: translateX(1.2em);\n }\n\n &:is(:focus-visible, .focus) {\n box-shadow:\n 0 0 0 0.08em var(--color-brand-5),\n 0 0 0 calc(0.16em + var(--border-s)) var(--color-brand-transparent);\n }\n }\n\n &:dir(rtl):checked::after {\n transform: translateX(-1.2em);\n }\n}\n\n/ For small switches, scale the switch control to 80% of the normal size /\ninput[type=\"checkbox\"].switch.small,\nlabel.switch.small input[type=\"checkbox\"] {\n font-size: 0.8rem;\n}\n","@keyframes spinner-spin {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}\n\n.spinner {\n --spinner-primary-color: var(--color-brand-5);\n --spinner-secondary-color: var(--color-brand-3);\n\n font-size: var(--font-size-m);\n position: relative;\n text-align: center;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n gap: var(--space-2xs);\n\n &.small {\n font-size: var(--font-size-xs);\n }\n\n &.large {\n font-size: var(--font-size-xl);\n }\n\n &.label-top {\n flex-direction: column-reverse;\n\n &::after {\n inset: auto 0 0;\n }\n }\n\n &.label-right {\n flex-direction: row;\n gap: var(--space-xs);\n\n &::after {\n inset: 0 auto 0 0;\n }\n }\n\n &.label-left {\n flex-direction: row-reverse;\n gap: var(--space-xs);\n\n &::after {\n inset: 0 0 0 auto;\n }\n }\n\n &::before,\n &::after {\n content: \"\";\n display: block;\n height: 3em;\n width: 3em;\n mask-image: url(\"@/src/svg/loading-arc.svg\");\n mask-size: cover;\n mask-repeat: no-repeat;\n mask-position: center;\n background-color: var(--spinner-primary-color);\n animation: spinner-spin 0.85s linear infinite;\n }\n\n &::after {\n position: absolute;\n inset: 0 0 auto;\n margin: auto;\n background-color: var(--spinner-secondary-color);\n animation-duration: 1.05s;\n }\n}\n","/ stylelint-disable declaration-block-no-redundant-longhand-properties -- text-decoration shorthand doesn't work properly for Safari /\n\n.paragraph,\n:where(.style-semantic-elements p) {\n font-family: var(--font-family-body);\n font-weight: var(--font-weight-normal);\n line-height: 1.6;\n margin: 0.75em 0;\n text-wrap: pretty;\n hanging-punctuation: first;\n overflow-wrap: break-word;\n\n &:first-child {\n margin-block-start: 0;\n }\n\n &:last-child {\n margin-block-end: 0;\n }\n}\n\n/\n * Remove the top margin from paragraphs immediately after a heading, since we\n * want to use the (slightly smaller) bottom margin of the heading instead.\n \n This ensures that headings are visibly closer to their content than the\n * content above them, using spacing intentionally to denote hierarchy.\n /\n:is(.heading-1, .heading-2, .heading-3, .heading-4, .heading-5, .heading-6)\n + .paragraph,\n:where(.style-semantic-elements :is(h1, h2, h3, h4, h5, h6) + p) {\n margin-block-start: 0;\n}\n\n.abbreviation,\n:where(.style-semantic-elements abbr[title]) {\n display: inline;\n text-decoration-line: underline;\n text-decoration-style: dotted;\n text-decoration-thickness: var(--border-m);\n text-decoration-color: var(--color-gray-6);\n text-underline-offset: 0.1em;\n}\n\n.bold,\n:where(.style-semantic-elements strong, .style-semantic-elements b) {\n font-weight: var(--font-weight-bold);\n}\n\n.italic,\n:where(.style-semantic-elements em) {\n font-style: italic;\n}\n\n.underline {\n text-decoration-line: underline;\n}\n\n.strikethrough,\n:where(.style-semantic-elements s) {\n text-decoration-line: line-through;\n}\n\n.underline.strikethrough {\n text-decoration-line: underline line-through;\n}\n\n.small-text,\n:where(.style-semantic-elements small) {\n font-size: 0.75em;\n vertical-align: baseline;\n}\n\n.subscript,\n.superscript,\n:where(.style-semantic-elements sub, .style-semantic-elements sup) {\n font-size: 0.75em;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\n.subscript,\n:where(.style-semantic-elements sub) {\n inset-block-end: -0.25em;\n}\n\n.superscript,\n:where(.style-semantic-elements sup) {\n inset-block-start: -0.5em;\n}\n\n.code,\n:where(.style-semantic-elements code) {\n font-family: var(--font-family-mono);\n background-color: var(--color-gray-extra-transparent);\n color: var(--color-gray-1);\n border-radius: var(--radius-s);\n display: inline;\n padding: 0.25ch 0.5ch;\n font-size: 0.9em;\n\n &.invert {\n color: var(--color-gray-9);\n }\n}\n\n.link .code,\n:where(.style-semantic-elements a code) {\n text-decoration: inherit;\n text-decoration-color: inherit;\n text-decoration-thickness: inherit;\n color: inherit;\n}\n\n.key,\n.skip-link kbd,\n:where(.style-semantic-elements kbd) {\n display: inline;\n padding: 0 0.5ch;\n margin: 0 0.25ch;\n font-size: 0.9em;\n border: var(--border-s) solid var(--color-gray-8);\n border-bottom-width: 3px;\n border-radius: var(--radius-m);\n font-weight: var(--font-weight-semibold);\n font-family: var(--font-family-body);\n background-color: var(--color-gray-9);\n color: var(--color-body-text);\n}\n",".card {\n background-color: var(--color-body-alt);\n border-radius: var(--radius-l);\n border: var(--border-s) solid var(--color-outline);\n box-shadow: var(--shadow-m);\n padding: var(--space-m);\n font-family: var(--font-family-body);\n font-size: var(--font-size-m);\n font-weight: var(--font-weight-normal);\n\n &.secondary {\n background-color: var(--color-body);\n border-radius: var(--radius-m);\n box-shadow: var(--shadow-s);\n padding: var(--space-s);\n }\n}\n\n/ \n * The Link component also defines .card-title[href]. We specifically add that\n * selector here so the styles in this file override the former.\n */\n.card-title,\n.card-title[href] {\n font-family: var(--font-family-heading);\n line-height: 1.15;\n text-wrap: balance;\n overflow-wrap: break-word;\n font-size: var(--font-size-l);\n font-weight: var(--font-weight-bold);\n color: var(--color-brand-3);\n margin-block: 0 var(--space-xs);\n display: block;\n}\n\n.card-title[href] {\n text-decoration-color: var(--color-brand-transparent);\n}\n\n.card.secondary .card-title {\n font-size: var(--font-size-m);\n margin-block-end: var(--space-2xs);\n}\n","table.table,\n:where(.style-semantic-elements table) {\n --table-bg-odd: var(--color-body-alt);\n --table-bg-even: var(--color-body);\n --table-vertical-border: var(--border-s);\n\n background-color: var(--color-body-alt);\n border-collapse: separate;\n border-spacing: 0;\n font-size: var(--font-size-m);\n border: var(--border-s) solid var(--color-outline);\n border-radius: var(--radius-s);\n color: var(--color-body-text);\n font-family: var(--font-family-body);\n font-weight: var(--font-weight-normal);\n\n &.subtle {\n --table-bg-odd: transparent;\n --table-bg-even: transparent;\n --table-vertical-border: 0;\n\n border: 0;\n }\n\n &.dense :is(th, td) {\n padding: var(--space-3xs) var(--space-2xs);\n }\n\n &.sparse :is(th, td) {\n padding: var(--space-xs) var(--space-s);\n }\n\n caption {\n font-family: var(--font-family-heading);\n line-height: 1.15;\n font-size: var(--font-size-l);\n font-weight: var(--font-weight-semibold);\n text-align: start;\n margin: 0 0 var(--space-2xs);\n }\n\n th,\n td {\n padding: var(--space-2xs) var(--space-xs);\n }\n\n th,\n tfoot td {\n font-weight: var(--font-weight-bold);\n font-family: var(--font-family-heading);\n text-align: center;\n }\n\n th {\n border-block-end: var(--border-m) solid var(--color-outline);\n }\n\n tfoot td {\n border-block-start: var(--border-m) solid var(--color-outline);\n }\n\n td {\n text-align: unset;\n }\n\n :is(th, tfoot td):not(:last-of-type) {\n border-inline-end: var(--table-vertical-border) dashed var(--color-outline);\n }\n\n td:not(tfoot td, :last-of-type) {\n border-inline-end: var(--table-vertical-border) solid var(--color-outline);\n }\n\n tr:not(:last-of-type) td {\n border-block-end: var(--border-s) solid var(--color-outline);\n }\n\n tbody tr:nth-child(odd),\n tbody:has(tr:last-of-type:nth-child(even)) + tfoot tr {\n background-color: var(--table-bg-even);\n }\n\n tbody tr:nth-child(even) {\n background-color: var(--table-bg-odd);\n }\n}\n"],"names":[]}
1	+ {"version":3,"sourceRoot":null,"mappings":"ACAA,gDAOA,yEAIA,+JAAA,mCAAA,yDAKA,8EAMA,sDIlBA,+EAQA,gCAEE,4FAKF,uCAEE,4FAKF,iCAEE,4FASF,oHAKA,kHASA,uMInDA,64XIAA,gaAmBE,sCAIA,aACE,kEAKF,gKAWA,iQASA,+MAQA,gaAOA,mnBAOA,+ZAOA,qjBAQF,0MItFA,oWAUA,mNASE,gCAAiC,gGAKtB,oOASX,uCAKF,6TAeE,2RAYA,iQAWE,6HAMJ,uIAUA,kEACE,gCAOF,iHAMA,gFAIA,oLAOA,6IAMA,2HAKA,gBACE,4GAKA,qFItIF,yWAiBE,8HAMA,qCAIA,gFAIA,4sBD/BF,sBAGE,qUAYE,8CAAgD,2GAKhD,gDAIA,6FAKA,wFAKA,4PAUA,2DAGE,oEAKA,8GAIE,oDAIA,+FAON,mjBAmBE,8CAAgD,0EAIhD,uIAIA,yIAKA,wDAKA,63BAkBA,iPAIA,gCAAiC,0DAG/B,2CAOF,2HAME,0EAKF,iIInJJ,4NAOE,wELPF,iRAoBA,uPAYA,mQAaA,yEAOE,kDAKA,uDAKA,4KAUF,yXAgBE,6EAIA,wEAIA,6HAKA,iFAGE,6DAKF,+LAaF,gJAQA,2LAWA,mGAOA,2IAUA,8RAWA,uEAQE,0EAIA,yEAIA,uEAKF,kKAOA,icAcE,8EAIA,oDAIA,6GAKA,+EAIA,uGAMF,kCAGE,6LAOA,wQAaE,+FAIA,iFAIA,+FAOA,gHAIA,4HAKA,kHAMJ,yFAOA,sEAIA,0DAIA,qBAME,qCAIA,wRAWE,mCAKF,0DAIA,oEAIA,sFAMA,4DAGE,iEAIA,wFAMA,uFAMJ,uCAQA,gBACE,yBIlXF,yIAME,gFAIA,6EAKA,2CAIA,iLAMA,4LAMA,yLAMA,gLAMA,4NASE,mGIpDJ,olCAwCE,2TAgBA,yKAOA,iDAOE,kCAAqC,uDAKvC,+CAGE,oFAQA,kFAKF,gOAOE,yJAMA,qKAMA,qKAMA,iKAMA,yJAMA,6JAMA,qKAMA,yKAMA,6JAMA,oIAMA,4JAQF,2RASE,8HAKA,mHAIE,4FAKF,4HAIE,kGAKF,4HAIE,kGAKF,yHAIE,gGAKF,mHAIE,4FAKF,sHAIE,8FAKF,4HAIE,kGAKF,+HAIE,oGAKF,0HAKE,6IAKF,0DAIA,6CAIA,6CAKF,8BAIA,+BAIA,mGASI,gDAKA,uFASA,+CAIA,0FAMJ,2HAKE,wFAKF,gCAGE,2KAQA,yEAMJ,uGEvVA,kvBA0BE,6EAKE,6KAQA,4EAIA,yDAOE,kCAAqC,+DAMzC,oIAMA,gJAMA,gJAMA,4IAMA,oIAMA,wIAMA,gJAMA,oJAMA,wIAMA,+GAMA,qIAQF,ifAoBE,ywBAYA,0EAIA,kGAIA,qGDpKF,0UAgBE,yOAWF,yEAKA,mDAIA,qDAIA,oCAIA,oCI3CA,8LAYE,wBAGE,8CAAgD,wGAMlD,wBAGE,8CAAgD,uGAMlD,wBAGE,8CAAgD,uGAMlD,wBAGE,8CAAgD,wGAMlD,mHAQE,mDAIA,oDAIA,mDAKF,kHAQE,kDAIA,mDAIA,kDAMJ,yBAIA,kJASE,4BFzGF,0aAiBE,yKASA,+CAIA,uEAGE,0EAKF,8DAIA,mkBAyBE,6UAQA,uMAIA,2OAMA,6MAGE,uWAUF,4cAKE,2hBAUJ,yEAKE,iEAIA,yHAOA,sHAQF,6aASE,8QAIA,mCAAqC,gRAKvC,6BAIA,4IASA,iJAUE,kjCAaF,wEAKE,0DAKA,qEAIA,+IAKA,0IAKA,6CAIA,uYAaE,uFAMF,gDAIA,kDAIA,sOAQE,uEAIA,wEAIA,8QAWF,0DAGE,qGAMJ,2LAWF,yEAKA,iKAME,+JAMA,iEAKF,4CC3TA,wEAOE,gEAIA,gEAIA,+DAIA,6DAIA,6DAIA,8DAIA,gEAIA,iHAKA,gHAMF,8DAMA,kEAMA,4EAMA,sE7BhEA,qPAcA,wIAYE,oGAKF,kHAMA,kHAMA,qHAMA,oHAMA,gHIvDA,6IAOA,kcAWE,+FAKF,mTAUA,4GAAA,wGIjCA,8dAaE,qHAIA,iGAUA,gmBAYA,sVAIA,sXAOE,g9BAOA,0VAOA,yxCAOA,sVI9DJ,0IAQA,iKAAA,qLAUA,wFAAA,4GAOA,4HAOA,sJAOA,4KAOA,4HAOA,iJAOA,uKAQA,sEAAA,sEAAA,2EAAA,2EI7EA,4DAMA,qCACE,gOAaF,6OAYA,gIAAA,mIAAA,uIAQA,2EAKA,mHAMA,sGAKA,4GAKA,2PAKA,kQAKA,yGAKA,gHI3EA,kHAKE,yBAIA,0BAIA,yBAKF,0NAUE,gCAAmC,wEAMnC,iEGnCF,+DAUA,kEAMA,wCACE,sOAaF,mPAYA,8LAQA,yLAQA,oOASA,+NCnEA,iXAcE,4MAOE,4HvBrBJ,+DAUA,8DAUA,8gBAqBE,yJAMA,wHAKA,uGAKA,sGAMA,4NAMA,mCAAqC,oGAKvC,sCI1EA,qkBAyBE,uMASA,6CAKA,uDIvCF,qWAaE,wBAA0B,2CAI1B,qFAKA,iDAGE,uIAKA,mIAOA,0JAKE,mCAAsC,mFAKxC,sJAKE,mCAAsC,+EAM1C,qOASA,4KAQA,kZAgBA,qWI3FF,4EAUA,4QAaE,6CAIA,6CAIA,iDAGE,wCAKF,4DAIE,4CAKF,mEAIE,2CAKF,+zCAcA,qIXtEF,yOAaA,gDAKA,qcAiBE,yZAgBA,+HAKA,oPAQA,mJAIE,4GAIA,mNAOF,uTAMF,0FItFA,scAgBE,8LAUA,kHAIA,gHAIA,0OASA,8JAKA,yNAOA,sHAIA,8HAIA,4EAIA,sKAIA,gKAIA,4IAIA,gOAKA,oHIlFF,2NAUE,oFAIA,iFAYF,iKAMA,uSAUA,6GAKA,8DAKA,0CAIA,oFAKA,qEAIA,2FAMA,kKASA,uEAKA,0EAKA,8OAUE,kFAKF,gOAQA,yWInHA,qRAUE,mIAYF,0QAaA,oIAIA","sources":["index.css","misc/reset.css","components/heading.css","components/skeleton.css","components/switch.css","misc/utility-classes.css","components/highlight.css","components/skip-link.css","components/table.css","misc/variables.css","components/link.css","components/slider.css","components/text.css","components/shared/base-alert.css","components/list.css","components/spinner.css","components/card.css","components/shared/base-dialog.css","components/meter.css","components/app.css","components/accordion.css","components/shared/base-dismiss-button.css","components/modal.css","components/banner.css","components/alert.css","components/progress.css","components/quote.css","components/button.css","components/divider.css","components/chip.css","components/field.css","components/flex.css","components/drawer.css"],"sourcesContent":["/* Misc styles /\n@import url(\"./misc/reset.css\");\n@import url(\"./misc/utility-classes.css\");\n@import url(\"./misc/variables.css\");\n\n/ Styles used in multiple components /\n@import url(\"./components/shared/base-alert.css\");\n@import url(\"./components/shared/base-dialog.css\");\n@import url(\"./components/shared/base-dismiss-button.css\");\n\n/ Components /\n@import url(\"./components/accordion.css\");\n@import url(\"./components/alert.css\");\n@import url(\"./components/app.css\");\n@import url(\"./components/banner.css\");\n@import url(\"./components/button.css\");\n@import url(\"./components/chip.css\");\n@import url(\"./components/divider.css\");\n@import url(\"./components/drawer.css\");\n@import url(\"./components/field.css\");\n@import url(\"./components/flex.css\");\n@import url(\"./components/heading.css\");\n@import url(\"./components/highlight.css\");\n@import url(\"./components/link.css\");\n@import url(\"./components/list.css\");\n@import url(\"./components/meter.css\");\n@import url(\"./components/modal.css\");\n@import url(\"./components/progress.css\");\n@import url(\"./components/quote.css\");\n@import url(\"./components/skeleton.css\");\n@import url(\"./components/skip-link.css\");\n@import url(\"./components/slider.css\");\n@import url(\"./components/spinner.css\");\n@import url(\"./components/switch.css\");\n@import url(\"./components/table.css\");\n@import url(\"./components/text.css\");\n\n/\n * Card needs to be loaded after Link so .card-title[href] in the former\n * overrides the same selector in the latter without needing \"!important\"\n * declarations or specificity hacks.\n /\n@import url(\"./components/card.css\");\n",",\n::before,\n::after {\n box-sizing: border-box;\n margin: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--border-m) solid var(--color-brand-5);\n}\n\nhtml {\n text-size-adjust: none;\n color-scheme: light dark;\n}\n\nbody {\n margin: 0;\n background-color: var(--color-body);\n color: var(--color-body-text);\n}\n\nimg,\npicture,\nvideo,\niframe {\n max-width: 100%;\n display: block;\n}\n",".heading-1,\n.heading-2,\n.heading-3,\n.heading-4,\n.heading-5,\n.heading-6,\n:where(.style-semantic-elements :is(h1, h2, h3, h4, h5, h6)) {\n font-family: var(--font-family-heading);\n margin-block: 0.75em 0.3em;\n line-height: 1.15;\n text-wrap: balance;\n overflow-wrap: break-word;\n}\n\n.heading-1,\n:where(.style-semantic-elements h1) {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-black);\n\n /* \n * Since the Level 1 Heading will typically be the first item inside the App\n * Content container (which already has padding at the top), we remove the top\n * margin by default. We can always add it back for special cases.\n /\n margin-block-start: 0;\n\n .app-content > &:first-of-type {\n margin-block-start: 0;\n }\n}\n\n.heading-2,\n:where(.style-semantic-elements h2) {\n font-size: var(--font-size-3xl);\n font-weight: var(--font-weight-bold);\n}\n\n.heading-3,\n:where(.style-semantic-elements h3) {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-bold);\n}\n\n.heading-4,\n:where(.style-semantic-elements h4) {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-semibold);\n}\n\n.heading-5,\n:where(.style-semantic-elements h5) {\n font-size: var(--font-size-l);\n font-weight: var(--font-weight-semibold);\n}\n\n.heading-6,\n:where(.style-semantic-elements h6) {\n font-size: var(--font-size-m);\n font-weight: var(--font-weight-bold);\n}\n","@keyframes skeleton-pulse-light {\n from {\n opacity: 0.14;\n }\n\n to {\n opacity: 0.21;\n }\n}\n\n@keyframes skeleton-pulse-dark {\n from {\n opacity: 0.28;\n }\n\n to {\n opacity: 0.36;\n }\n}\n\n.skeleton,\n.skeleton-controller.loading .skeleton-item {\n animation: skeleton-pulse-light 1s var(--ease-both-subtle) alternate 0s\n infinite !important;\n border-radius: var(--radius-s) !important;\n background-color: var(--color-gray-5) !important;\n border: 0 !important;\n outline: 0 !important;\n box-shadow: none !important;\n pointer-events: none !important;\n color: transparent !important;\n mask-image: none !important;\n background-image: none !important;\n user-select: none !important;\n print-color-adjust: exact;\n\n /***********************************************************\n Special styles for \"skeletonizing\" specific element types \n ***********************************************************/\n\n / Make block text take up the full width /\n &.paragraph,\n &.heading {\n inline-size: 100%;\n }\n\n / For empty text elements, add filler content so it isn't 0 height. /\n &:is(.paragraph, .heading, .chip, .card-title)::before {\n content: \".\";\n }\n\n / Add a reasonable minimum width to buttons and chips /\n &:is(.button, .chip):empty {\n min-inline-size: 5em;\n }\n\n / Add a reasonable width to card titles /\n &.card-title {\n inline-size: 40%;\n overflow: hidden;\n }\n\n / Visually hide contents, but let them take up space so elements don't collapse to 0 height. /\n &::before,\n &::after,\n > {\n visibility: hidden !important;\n }\n\n @media (prefers-color-scheme: dark) {\n animation-name: skeleton-pulse-dark !important;\n }\n}\n\n.skeleton-controller {\n display: contents;\n}\n","/* Style the label of a labeled switch, which is also the container that holds the switch itself /\nlabel.switch {\n inline-size: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n font-weight: var(--font-weight-semibold);\n gap: var(--space-3xs);\n font-size: var(--font-size-m);\n font-family: var(--font-family-body);\n}\n\n/ For small labeled switches, set the label text size to font-size-s /\nlabel.switch.small {\n font-size: var(--font-size-s);\n}\n\n/ Style the switch itself /\ninput[type=\"checkbox\"].switch,\nlabel.switch input[type=\"checkbox\"] {\n font-size: 1rem;\n print-color-adjust: exact;\n appearance: none;\n block-size: 1.8em;\n inline-size: 3em;\n border-radius: var(--radius-full);\n background-color: var(--color-gray-7);\n position: relative;\n flex: none;\n transition-property: background-color, box-shadow, border-color;\n transition-duration: var(--duration-medium);\n transition-timing-function: var(--ease-default);\n border: 0.1em solid var(--color-gray-6);\n cursor: pointer;\n\n &::after {\n content: \"\";\n position: absolute;\n height: 1.4em;\n width: 1.4em;\n background-color: white;\n inset-inline-start: 0.1em;\n inset-block-start: 0.1em;\n border-radius: var(--radius-full);\n box-shadow: var(--shadow-s);\n transition-property: border-color, transform;\n transition-duration: var(--duration-medium);\n transition-timing-function: var(--ease-both);\n transform: translateX(0);\n }\n\n &:disabled {\n opacity: var(--opacity-disabled);\n cursor: not-allowed;\n }\n\n &:is(:focus-visible, .focus) {\n border-color: var(--color-gray-6);\n box-shadow:\n 0 0 0 0.08em var(--color-gray-6),\n 0 0 0 calc(0.16em + var(--border-s)) var(--color-gray-transparent);\n outline: 0;\n }\n\n &:checked {\n background-color: var(--color-brand-6);\n border-color: var(--color-brand-5);\n\n &::after {\n transform: translateX(1.2em);\n }\n\n &:is(:focus-visible, .focus) {\n box-shadow:\n 0 0 0 0.08em var(--color-brand-5),\n 0 0 0 calc(0.16em + var(--border-s)) var(--color-brand-transparent);\n }\n }\n\n &:dir(rtl):checked::after {\n transform: translateX(-1.2em);\n }\n}\n\n/ For small switches, scale the switch control to 80% of the normal size /\ninput[type=\"checkbox\"].switch.small,\nlabel.switch.small input[type=\"checkbox\"] {\n font-size: 0.8rem;\n}\n","/*********************************\n Conditionally show/hide content \n *********************************/\n\n.js-disabled .if-js-enabled {\n display: none !important;\n}\n\n.js-enabled .if-js-disabled {\n display: none !important;\n}\n\n@media screen and (width < 30rem) {\n / Narrow viewport /\n :is(.if-medium-viewport, .if-wide-viewport):not(.if-narrow-viewport) {\n display: none !important;\n }\n}\n\n@media screen and (30rem <= width < 55rem) {\n / Medium viewport /\n :is(.if-narrow-viewport, .if-wide-viewport):not(.if-medium-viewport) {\n display: none !important;\n }\n}\n\n@media screen and (width >= 55rem) {\n / Wide viewport /\n :is(.if-narrow-viewport, .if-medium-viewport):not(.if-wide-viewport) {\n display: none !important;\n }\n}\n\n/***********************************************\n Override color mode for a section of the page \n **********************************************/\n\n.light-mode {\n color-scheme: only light;\n color: var(--color-body-text);\n}\n\n.dark-mode {\n color-scheme: only dark;\n color: var(--color-body-text);\n}\n\n/**************************************************\n Make elements invisible, except to screenreaders \n ***************************************************/\n\n.visually-hidden,\n.app-sidebar-toggle input,\n.skip-link:not(:focus, .static) {\n clip: rect(1px, 1px, 1px, 1px);\n clip-path: inset(50%);\n height: 1px;\n width: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n}\n",".highlight,\n:where(.style-semantic-elements mark) {\n background-color: var(--color-yellow-8);\n color: var(--color-yellow-1);\n print-color-adjust: exact;\n}\n\n.highlight.removed,\n:where(.style-semantic-elements del) {\n background-color: var(--color-red-8);\n color: var(--color-red-1);\n transition: text-decoration-color var(--duration-short) var(--ease-default);\n text-decoration-line: line-through;\n text-decoration-skip-ink: none;\n text-decoration-thickness: var(--border-m);\n text-decoration-color: var(--color-red-4);\n print-color-adjust: exact;\n\n &:hover {\n text-decoration-color: transparent;\n }\n}\n\n.highlight.added,\n:where(.style-semantic-elements ins) {\n background-color: var(--color-green-8);\n color: var(--color-green-1);\n text-decoration-thickness: var(--border-m);\n text-decoration-color: var(--color-green-4);\n text-underline-offset: 0.1em;\n print-color-adjust: exact;\n}\n\n.highlight.target,\n::target-text {\n background-color: var(--color-brand-8);\n color: var(--color-brand-1);\n print-color-adjust: exact;\n}\n",".skip-link {\n position: fixed;\n display: inline-block;\n z-index: 100;\n top: var(--space-body-y);\n left: var(--space-body-x);\n background-color: var(--color-brand-5);\n padding: var(--space-xs);\n border-radius: var(--radius-m);\n border: 0.25em solid var(--color-brand-4);\n color: white;\n font-weight: var(--font-weight-bold);\n font-family: var(--font-family-body);\n font-size: var(--font-size-m);\n outline: 0;\n box-shadow:\n var(--shadow-l),\n 0 0 0 0.2em var(--color-brand-transparent);\n text-decoration: none;\n vertical-align: middle;\n opacity: 0.25;\n transition: opacity var(--duration-medium) var(--ease-default);\n pointer-events: none;\n line-height: 1;\n\n kbd {\n margin-inline-start: var(--space-2xs) !important;\n font-weight: initial;\n border: 0 !important;\n background-color: var(--color-brand-4) !important;\n color: inherit !important;\n font-size: 1.2em !important;\n }\n\n &:focus,\n &.static {\n opacity: 1;\n }\n\n &.static {\n position: static;\n pointer-events: unset;\n }\n}\n","table.table,\n:where(.style-semantic-elements table) {\n --table-bg-odd: var(--color-body-alt);\n --table-bg-even: var(--color-body);\n --table-vertical-border: var(--border-s);\n\n background-color: var(--color-body-alt);\n border-collapse: separate;\n border-spacing: 0;\n font-size: var(--font-size-m);\n border: var(--border-s) solid var(--color-outline);\n border-radius: var(--radius-s);\n color: var(--color-body-text);\n font-family: var(--font-family-body);\n font-weight: var(--font-weight-normal);\n\n &.subtle {\n --table-bg-odd: transparent;\n --table-bg-even: transparent;\n --table-vertical-border: 0;\n\n background-color: transparent;\n color: inherit;\n border: 0;\n }\n\n &.dense :is(th, td) {\n padding: var(--space-3xs) var(--space-2xs);\n }\n\n &.sparse :is(th, td) {\n padding: var(--space-xs) var(--space-s);\n }\n\n caption {\n font-family: var(--font-family-heading);\n line-height: 1.15;\n font-size: var(--font-size-l);\n font-weight: var(--font-weight-semibold);\n text-align: start;\n margin: 0 0 var(--space-2xs);\n }\n\n th,\n td {\n padding: var(--space-2xs) var(--space-xs);\n }\n\n th,\n tfoot td {\n font-weight: var(--font-weight-bold);\n font-family: var(--font-family-heading);\n text-align: center;\n }\n\n th {\n border-block-end: var(--border-m) solid var(--color-outline);\n }\n\n tfoot td {\n border-block-start: var(--border-m) solid var(--color-outline);\n }\n\n td {\n text-align: unset;\n }\n\n :is(th, tfoot td):not(:last-of-type) {\n border-inline-end: var(--table-vertical-border) dashed var(--color-outline);\n }\n\n td:not(tfoot td, :last-of-type) {\n border-inline-end: var(--table-vertical-border) solid var(--color-outline);\n }\n\n tr:not(:last-of-type) td {\n border-block-end: var(--border-s) solid var(--color-outline);\n }\n\n tbody tr:nth-child(odd),\n tbody:has(tr:last-of-type:nth-child(even)) + tfoot tr {\n background-color: var(--table-bg-even);\n }\n\n tbody tr:nth-child(even) {\n background-color: var(--table-bg-odd);\n }\n}\n",":root,\n::backdrop,\n.light-mode,\n.dark-mode {\n / Brand /\n --color-brand-1: light-dark(#08003b, #e9f0ff);\n --color-brand-2: light-dark(#190074, #cad6ff);\n --color-brand-3: light-dark(#290fa3, #9fb0ff);\n --color-brand-4: light-dark(#3c35cb, #7382ff);\n --color-brand-5: light-dark(#545be7, #5961ee);\n --color-brand-6: light-dark(#6f7dff, #4344cf);\n --color-brand-7: light-dark(#93a4ff, #3124b1);\n --color-brand-8: light-dark(#bbc9ff, #230095);\n --color-brand-9: light-dark(#e5edff, #0b004a);\n --color-brand-transparent: light-dark(#545be766, #5961ee80);\n --color-brand-extra-transparent: light-dark(#545be733, #5961ee59);\n\n / Red /\n --color-red-1: light-dark(#240000, #ffe3dc);\n --color-red-2: light-dark(#4d0000, #ffc3b6);\n --color-red-3: light-dark(#7a0000, #ff8875);\n --color-red-4: light-dark(#a90000, #f45441);\n --color-red-5: light-dark(#cc2a1b, #d33223);\n --color-red-6: light-dark(#f0503d, #b30000);\n --color-red-7: light-dark(#ff7c68, #8d0000);\n --color-red-8: light-dark(#ffb4a5, #6c0000);\n --color-red-9: light-dark(#ffe3dc, #340000);\n --color-red-transparent: light-dark(#cc2a1b66, #d3322380);\n --color-red-extra-transparent: light-dark(#cc2a1b33, #d3322359);\n\n / Orange /\n --color-orange-1: light-dark(#1c0300, #ffe5d0);\n --color-orange-2: light-dark(#3e1200, #ffc5a0);\n --color-orange-3: light-dark(#632500, #ff9559);\n --color-orange-4: light-dark(#8b3a00, #d97234);\n --color-orange-5: light-dark(#b45100, #ba570d);\n --color-orange-6: light-dark(#d76f04, #9c3b00);\n --color-orange-7: light-dark(#f98f3a, #782700);\n --color-orange-8: light-dark(#ffb87e, #5c1900);\n --color-orange-9: light-dark(#ffe6cc, #2c0400);\n --color-orange-transparent: light-dark(#b4510066, #ba570d80);\n --color-orange-extra-transparent: light-dark(#b4510033, #ba570d59);\n\n / Yellow /\n --color-yellow-1: light-dark(#140900, #fdf4d5);\n --color-yellow-2: light-dark(#2f1e00, #fadfa6);\n --color-yellow-3: light-dark(#4e3700, #fdd171);\n --color-yellow-4: light-dark(#7a5700, #dfaf3f);\n --color-yellow-5: light-dark(#a57c00, #c69720);\n --color-yellow-6: light-dark(#c89808, #a17807);\n --color-yellow-7: light-dark(#dfb22b, #750);\n --color-yellow-8: light-dark(#efcb72, #4e3700);\n --color-yellow-9: light-dark(#f8edc1, #211500);\n --color-yellow-transparent: light-dark(#a57c0066, #a57c0080);\n --color-yellow-extra-transparent: light-dark(#a57c0033, #a57c0059);\n\n / Green /\n --color-green-1: light-dark(#011000, #dff4d3);\n --color-green-2: light-dark(#0c2a00, #bbe7a5);\n --color-green-3: light-dark(#1d4600, #8ecb6b);\n --color-green-4: light-dark(#2f6500, #63a736);\n --color-green-5: light-dark(#438500, #498b0f);\n --color-green-6: light-dark(#5fa500, #2e7000);\n --color-green-7: light-dark(#7dc53a, #1c5400);\n --color-green-8: light-dark(#a4e472, #113f00);\n --color-green-9: light-dark(#dafbc4, #011b00);\n --color-green-transparent: light-dark(#43850066, #498b0f80);\n --color-green-extra-transparent: light-dark(#43850033, #498b0f59);\n\n / Sky /\n --color-sky-1: light-dark(#001011, #c8f6f5);\n --color-sky-2: light-dark(#002a2b, #9ee7e7);\n --color-sky-3: light-dark(#004747, #61c7c8);\n --color-sky-4: light-dark(#006566, #3aa4a5);\n --color-sky-5: light-dark(#008586, #0b8889);\n --color-sky-6: light-dark(#00a7a8, #006d6f);\n --color-sky-7: light-dark(#00c8c9, #005254);\n --color-sky-8: light-dark(#76e2e2, #003e3f);\n --color-sky-9: light-dark(#caf9f8, #001a1b);\n --color-sky-transparent: light-dark(#00858666, #0b888980);\n --color-sky-extra-transparent: light-dark(#00858633, #0b888959);\n\n / Blue /\n --color-blue-1: light-dark(#00003e, #ddf0ff);\n --color-blue-2: light-dark(#00007a, #b9d9ff);\n --color-blue-3: light-dark(#002b97, #7eb4ff);\n --color-blue-4: light-dark(#004abd, #418dff);\n --color-blue-5: light-dark(#1c69e3, #2370ea);\n --color-blue-6: light-dark(#3988ff, #0053cb);\n --color-blue-7: light-dark(#74adff, #0035ac);\n --color-blue-8: light-dark(#a9cfff, #001a95);\n --color-blue-9: light-dark(#ddf0ff, #005);\n --color-blue-transparent: light-dark(#1c69e366, #2370ea80);\n --color-blue-extra-transparent: light-dark(#1c69e333, #2370ea59);\n\n / Purple /\n --color-purple-1: light-dark(#170029, #fbe4ff);\n --color-purple-2: light-dark(#370054, #edc4ff);\n --color-purple-3: light-dark(#5a0085, #d88eff);\n --color-purple-4: light-dark(#7819a8, #b864ef);\n --color-purple-5: light-dark(#9640ca, #9c47d1);\n --color-purple-6: light-dark(#b562ea, #8127b3);\n --color-purple-7: light-dark(#ce8dfc, #660095);\n --color-purple-8: light-dark(#e8b6ff, #4f0076);\n --color-purple-9: light-dark(#fbe4ff, #23003a);\n --color-purple-transparent: light-dark(#9640ca66, #9c47d180);\n --color-purple-extra-transparent: light-dark(#9640ca33, #9c47d159);\n\n / Magenta /\n --color-magenta-1: light-dark(#21000c, #ffe1ef);\n --color-magenta-2: light-dark(#480023, #ffbdd9);\n --color-magenta-3: light-dark(#73003d, #ff7db8);\n --color-magenta-4: light-dark(#9b0058, #ea5096);\n --color-magenta-5: light-dark(#c32775, #ca2f7b);\n --color-magenta-6: light-dark(#e45193, #aa0061);\n --color-magenta-7: light-dark(#fe7cb1, #850048);\n --color-magenta-8: light-dark(#ffadd0, #660035);\n --color-magenta-9: light-dark(#ffe1f0, #300015);\n --color-magenta-transparent: light-dark(#c3277566, #ca2f7b80);\n --color-magenta-extra-transparent: light-dark(#c3277533, #ca2f7b59);\n\n / Gray /\n --color-gray-1: light-dark(#090b0f, #ebeff3);\n --color-gray-2: light-dark(#202226, #d4d8dc);\n --color-gray-3: light-dark(#383b3f, #b1b4b9);\n --color-gray-4: light-dark(#53555a, #8f9297);\n --color-gray-5: light-dark(#6f7276, #75787c);\n --color-gray-6: light-dark(#8d8f94, #5b5e62);\n --color-gray-7: light-dark(#abaeb3, #424549);\n --color-gray-8: light-dark(#cbced3, #303337);\n --color-gray-9: light-dark(#eceff4, #121417);\n --color-gray-transparent: light-dark(#6f727666, #75787c80);\n --color-gray-extra-transparent: light-dark(#6f727633, #75787c59);\n\n / Semantic colors /\n --color-body: light-dark(#f9fafc, #14161a);\n --color-body-alt: light-dark(#fff, #010203);\n --color-body-text: light-dark(#030305, #fff);\n --color-body-text-alt: light-dark(#404247, #ccced0);\n --color-shadow: light-dark(#45484c26, #00000166);\n --color-outline: light-dark(#d8dbe0, #434549);\n\n / Font sizes /\n --font-size-xs: clamp(0.6944rem, 0.6855rem + 0.0446vw, 0.72rem);\n --font-size-s: clamp(0.8331rem, 0.8099rem + 0.1163vw, 0.9rem);\n --font-size-m: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);\n --font-size-l: clamp(1.2rem, 1.1283rem + 0.3587vw, 1.4063rem);\n --font-size-xl: clamp(1.44rem, 1.3293rem + 0.5533vw, 1.7581rem);\n --font-size-2xl: clamp(1.7281rem, 1.5649rem + 0.8163vw, 2.1975rem);\n --font-size-3xl: clamp(2.0738rem, 1.8396rem + 1.1707vw, 2.7469rem);\n --font-size-4xl: clamp(2.4881rem, 2.1594rem + 1.6435vw, 3.4331rem);\n\n / Font weights /\n --font-weight-light: 300;\n --font-weight-normal: 400;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --font-weight-black: 900;\n\n / Font families /\n --font-family-body:\n \"Avenir Next\", avenir, \"Segoe UI Variable Display\", \"Segoe UI\",\n \"URW Gothic\", source-sans-pro, ui-sans-serif, sans-serif;\n --font-family-heading:\n seravek, \"Gill Sans Nova\", \"Gill Sans MT\", cantarell, \"DejaVu Sans\",\n source-sans-pro, ui-sans-serif, sans-serif;\n --font-family-mono: ui-monospace, \"Cascadia Code\", menlo, hack, monospace;\n\n / Spacing /\n --space-none: 0;\n --space-3xs: clamp(4px, 3.6528px + 0.1087vw, 5px);\n --space-2xs: clamp(8px, 7.6528px + 0.1087vw, 9px);\n --space-xs: clamp(12px, 11.304px + 0.2174vw, 14px);\n --space-s: clamp(16px, 15.304px + 0.2174vw, 18px);\n --space-m: clamp(24px, 22.9568px + 0.3261vw, 27px);\n --space-l: clamp(32px, 30.608px + 0.4348vw, 36px);\n --space-xl: clamp(48px, 45.9136px + 0.6522vw, 54px);\n --space-2xl: clamp(64px, 61.2176px + 0.8696vw, 72px);\n --space-3xl: clamp(96px, 91.8256px + 1.3043vw, 108px);\n --space-body-x: clamp(20px, 17.5652px + 0.7609vw, 27px);\n --space-body-y: 20px;\n\n / Radii /\n --radius-none: 0;\n --radius-s: 3px;\n --radius-m: 6px;\n --radius-l: 12px;\n --radius-xl: 24px;\n --radius-2xl: 64px;\n --radius-full: 9999px;\n\n / Shadows /\n --shadow-none: none;\n --shadow-s: 0 1px 3px -1px var(--color-shadow);\n --shadow-m: 0 1px 7px -1px var(--color-shadow);\n --shadow-l: var(--shadow-s), 0 1px 11px -1px var(--color-shadow);\n --shadow-xl: var(--shadow-m), 0 1px 15px -1px var(--color-shadow);\n\n / Border widths /\n --border-none: 0;\n --border-s: 1px;\n --border-m: 2px;\n --border-l: 5px;\n --border-xl: 8px;\n\n / Opacity /\n --opacity-disabled: light-dark(0.65, 0.5);\n\n / Easing functions /\n --ease-default: cubic-bezier(0.6, 0.22, 0.45, 0.9);\n --ease-out: cubic-bezier(0.17, 0.84, 0.44, 1);\n --ease-in: cubic-bezier(0.7, 0.1, 0.8, 0.65);\n --ease-both: cubic-bezier(0.65, 0.05, 0.36, 1);\n --ease-both-subtle: cubic-bezier(0.45, 0.12, 0.55, 0.88);\n --ease-spring: cubic-bezier(0.95, -0.55, 0.05, 1.55);\n\n / Durations /\n --duration-short: 100ms;\n --duration-medium: 150ms;\n --duration-long: 250ms;\n --duration-extra-long: 350ms;\n}\n",".link,\n.card-title[href],\n:where(.style-semantic-elements a) {\n color: var(--color-sky-4);\n font-weight: var(--font-weight-semibold);\n text-decoration-line: underline;\n text-decoration-color: var(--color-sky-transparent);\n text-decoration-skip-ink: all;\n text-decoration-thickness: 0.1em;\n text-underline-offset: 0.1em;\n cursor: pointer;\n transition: text-decoration-color var(--duration-short) var(--ease-default);\n\n &:is(:hover, .hover) {\n text-decoration-color: currentcolor;\n }\n\n &:focus-visible {\n outline-offset: 1px;\n }\n}\n\n/ External and Download icons /\na[target=\"_blank\"]:is(.link, .button, .app-sidebar-item):not(.no-external-icon),\n:where(.style-semantic-elements a[target=\"_blank\"]:not(.no-external-icon)),\na[download]:is(.link, .button, .app-sidebar-item):not(.no-download-icon),\n:where(.style-semantic-elements a[download]:not(.no-download-icon)) {\n &::after {\n content: \"\";\n print-color-adjust: exact;\n mask-size: contain;\n mask-repeat: no-repeat;\n background-color: var(--color-gray-5);\n display: inline-block;\n vertical-align: baseline;\n margin-inline-start: 0.25em;\n transition: background-color var(--duration-short) var(--ease-default);\n }\n\n &:hover::after {\n background-color: var(--color-gray-4);\n }\n\n &.button::after {\n background-color: currentcolor !important;\n margin-inline-start: initial;\n }\n\n / External icon /\n &[target=\"_blank\"] {\n &::after {\n mask-image: url(\"@/src/svg/external.svg\");\n height: 0.85em;\n width: 0.85em;\n transform: translateY(9%);\n }\n\n &.button::after {\n transform: translateY(2%);\n }\n }\n\n / Download icon /\n &[download] {\n &::after {\n mask-image: url(\"@/src/svg/download.svg\");\n height: 0.95em;\n width: 0.95em;\n transform: translateY(7%);\n }\n\n &.button::after {\n transform: translateY(-5%);\n }\n }\n}\n","input[type=\"range\"].slider {\n --slider-shadow-resting: var(--shadow-s);\n --slider-shadow-focused:\n var(--shadow-s), 0 0 0 0.08em var(--color-brand-5),\n 0 0 0 calc(0.16em + var(--border-s)) var(--color-brand-transparent);\n --slider-shadow-active: var(--shadow-s), 0 0 0 0.08em var(--color-brand-5);\n\n font-size: 1.2rem;\n block-size: 1.25em;\n appearance: none;\n background: transparent;\n cursor: pointer;\n\n @media (pointer: coarse) {\n font-size: 1.5rem;\n }\n\n &:disabled {\n opacity: var(--opacity-disabled);\n cursor: not-allowed;\n }\n\n &:focus-visible {\n outline: 0;\n\n &::-webkit-slider-thumb {\n border-color: var(--color-brand-5);\n box-shadow: var(--slider-shadow-focused);\n }\n\n &::-moz-range-thumb {\n border-color: var(--color-brand-5);\n box-shadow: var(--slider-shadow-focused);\n }\n }\n\n &:enabled:active {\n &::-webkit-slider-thumb {\n border-color: var(--color-brand-5);\n box-shadow: var(--slider-shadow-active);\n transform: scale(1);\n\n @media screen and (resolution >= 2x) {\n transform: scale(0.9);\n }\n }\n\n &::-moz-range-thumb {\n border-color: var(--color-brand-5);\n box-shadow: var(--slider-shadow-active);\n transform: scale(1);\n\n @media screen and (resolution >= 2x) {\n transform: scale(0.9);\n }\n }\n }\n\n &::-webkit-slider-runnable-track {\n block-size: 0.25em;\n inline-size: 100%;\n border-radius: var(--radius-full);\n background-color: var(--color-gray-8);\n print-color-adjust: exact;\n box-shadow: 0 0 1px var(--color-gray-7) inset;\n }\n\n &::-moz-range-track {\n block-size: 0.25em;\n inline-size: 100%;\n border-radius: var(--radius-full);\n background-color: var(--color-gray-8);\n print-color-adjust: exact;\n }\n\n &::-webkit-slider-thumb {\n height: 1.25em;\n width: 1.25em;\n border-radius: var(--radius-full);\n background-color: white;\n box-shadow: var(--slider-shadow-resting);\n border: var(--border-s) solid var(--color-outline);\n transition-property: border-color, box-shadow, transform;\n transition-duration: var(--duration-short);\n transition-timing-function: var(--ease-default);\n\n / Additional properties needed for webkit /\n appearance: none;\n margin-block-start: -0.5em;\n }\n\n &::-moz-range-thumb {\n height: 1.25em;\n width: 1.25em;\n border-radius: var(--radius-full);\n background-color: white;\n box-shadow: var(--slider-shadow-resting);\n border: var(--border-s) solid var(--color-outline);\n transition-property: border-color, box-shadow, transform;\n transition-duration: var(--duration-short);\n transition-timing-function: var(--ease-default);\n }\n}\n","/ stylelint-disable declaration-block-no-redundant-longhand-properties -- text-decoration shorthand doesn't work properly for Safari /\n\n.paragraph,\n:where(.style-semantic-elements p) {\n font-family: var(--font-family-body);\n font-weight: var(--font-weight-normal);\n line-height: 1.6;\n margin: 0.75em 0;\n text-wrap: pretty;\n hanging-punctuation: first;\n overflow-wrap: break-word;\n\n &:first-child {\n margin-block-start: 0;\n }\n\n &:last-child {\n margin-block-end: 0;\n }\n}\n\n/\n * Remove the top margin from paragraphs immediately after a heading, since we\n * want to use the (slightly smaller) bottom margin of the heading instead.\n \n This ensures that headings are visibly closer to their content than the\n * content above them, using spacing intentionally to denote hierarchy.\n /\n:is(.heading-1, .heading-2, .heading-3, .heading-4, .heading-5, .heading-6)\n + .paragraph,\n:where(.style-semantic-elements :is(h1, h2, h3, h4, h5, h6) + p) {\n margin-block-start: 0;\n}\n\n.abbreviation,\n:where(.style-semantic-elements abbr[title]) {\n display: inline;\n text-decoration-line: underline;\n text-decoration-style: dotted;\n text-decoration-thickness: var(--border-m);\n text-decoration-color: var(--color-gray-6);\n text-underline-offset: 0.1em;\n}\n\n.bold,\n:where(.style-semantic-elements strong, .style-semantic-elements b) {\n font-weight: var(--font-weight-bold);\n}\n\n.italic,\n:where(.style-semantic-elements em) {\n font-style: italic;\n}\n\n.underline {\n text-decoration-line: underline;\n}\n\n.strikethrough,\n:where(.style-semantic-elements s) {\n text-decoration-line: line-through;\n}\n\n.underline.strikethrough {\n text-decoration-line: underline line-through;\n}\n\n.small-text,\n:where(.style-semantic-elements small) {\n font-size: 0.75em;\n vertical-align: baseline;\n}\n\n.subscript,\n.superscript,\n:where(.style-semantic-elements sub, .style-semantic-elements sup) {\n font-size: 0.75em;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\n.subscript,\n:where(.style-semantic-elements sub) {\n inset-block-end: -0.25em;\n}\n\n.superscript,\n:where(.style-semantic-elements sup) {\n inset-block-start: -0.5em;\n}\n\n.code,\n:where(.style-semantic-elements code) {\n font-family: var(--font-family-mono);\n background-color: var(--color-gray-extra-transparent);\n color: var(--color-gray-1);\n border-radius: var(--radius-s);\n display: inline;\n padding: 0.25ch 0.5ch;\n font-size: 0.9em;\n\n &.invert {\n color: var(--color-gray-9);\n }\n}\n\n.link .code,\n:where(.style-semantic-elements a code) {\n text-decoration: inherit;\n text-decoration-color: inherit;\n text-decoration-thickness: inherit;\n color: inherit;\n}\n\n.key,\n.skip-link kbd,\n:where(.style-semantic-elements kbd) {\n display: inline;\n padding: 0 0.5ch;\n margin: 0 0.25ch;\n font-size: 0.9em;\n border: var(--border-s) solid var(--color-gray-8);\n border-bottom-width: 3px;\n border-radius: var(--radius-m);\n font-weight: var(--font-weight-semibold);\n font-family: var(--font-family-body);\n background-color: var(--color-gray-9);\n color: var(--color-body-text);\n}\n",".alert,\n.banner {\n display: block;\n font-family: var(--font-family-body);\n font-size: var(--font-size-m);\n font-weight: var(--font-weight-normal);\n color: var(--color-body-text);\n position: relative;\n background:\n linear-gradient(var(--alert-bg-color), var(--alert-bg-color)) padding-box,\n linear-gradient(\n to right,\n var(--alert-border-start-color),\n var(--alert-border-end-color)\n )\n border-box;\n border: var(--border-m) solid transparent;\n line-height: 1.4;\n\n > {\n line-height: 1.4;\n }\n\n @media print {\n & {\n border-color: var(--alert-border-start-color);\n }\n }\n\n &::before,\n &::after {\n content: \"\";\n print-color-adjust: exact;\n position: absolute;\n inset-block: 0;\n margin-block: auto;\n width: 2em;\n height: 2em;\n }\n\n &::before {\n z-index: 2;\n mask-image: var(--alert-icon);\n mask-repeat: no-repeat;\n mask-size: contain;\n background-color: var(--alert-border-start-color);\n scale: 0.5;\n }\n\n &::after {\n z-index: 1;\n background-color: light-dark(#fffe, #000e);\n border-radius: var(--radius-full);\n border: 3px solid var(--alert-border-start-color);\n scale: 0.75;\n }\n\n &.error {\n --alert-bg-color: var(--color-red-9);\n --alert-border-start-color: var(--color-red-5);\n --alert-border-end-color: var(--color-red-6);\n --alert-icon: url(\"@/src/svg/x-thick.svg\");\n }\n\n &.warning {\n --alert-bg-color: var(--color-yellow-9);\n --alert-border-start-color: var(--color-yellow-5);\n --alert-border-end-color: var(--color-yellow-6);\n --alert-icon: url(\"@/src/svg/warning-thick.svg\");\n }\n\n &.success {\n --alert-bg-color: var(--color-green-9);\n --alert-border-start-color: var(--color-green-5);\n --alert-border-end-color: var(--color-green-6);\n --alert-icon: url(\"@/src/svg/check-thick.svg\");\n }\n\n &.info {\n --alert-bg-color: var(--color-sky-9);\n --alert-border-start-color: var(--color-sky-5);\n --alert-border-end-color: var(--color-sky-6);\n --alert-icon: url(\"@/src/svg/info-thick.svg\");\n }\n}\n\n.alert-title,\n.banner-title {\n font-family: var(--font-family-heading);\n font-weight: var(--font-weight-bold);\n line-height: 1;\n color: var(--alert-border-start-color);\n font-size: 0.85em;\n margin: 0;\n margin-block-end: 0.15em;\n}\n","/\n Note: for most of the styles applied using `style-semantic-elements`, we use the\n * `:where()` selector to reduce specificity so we can more easily override them.\n * However, this breaks the styling for nested lists, which relies on the specificity\n * of the selectors for each level of nesting being higher than the last. Therefore,\n * we don't use this technique for Lists.\n /\n\n/ Add space between subsequent items and nested lists /\n.list li + li,\n.list .list,\n.style-semantic-elements li + li,\n.style-semantic-elements :is(ol, ul) :is(ol, ul) {\n margin-block-start: var(--space-2xs);\n}\n\n/ Style ordered list markers /\nol.list li::marker,\n.style-semantic-elements ol li::marker {\n color: var(--color-body-text-alt);\n font-size: 0.85em;\n font-family: var(--font-family-heading);\n font-weight: var(--font-weight-semibold);\n line-height: 0;\n}\n\n/ Style unordered list markers /\nul.list li::marker,\n.style-semantic-elements ul li::marker {\n color: var(--color-body-text-alt);\n font-weight: var(--font-weight-bold);\n}\n\n/ Cycle through list marker types in nested lists /\nol.list,\nol.list ol.list ol.list ol.list,\n.style-semantic-elements ol,\n.style-semantic-elements ol ol ol ol {\n list-style: decimal;\n}\n\nol.list ol.list,\nol.list ol.list ol.list ol.list ol.list,\n.style-semantic-elements ol ol,\n.style-semantic-elements ol ol ol ol ol {\n list-style: lower-latin;\n}\n\nol.list ol.list ol.list,\nol.list ol.list ol.list ol.list ol.list ol.list,\n.style-semantic-elements ol ol ol,\n.style-semantic-elements ol ol ol ol ol ol {\n list-style: lower-roman;\n}\n\nul.list,\nul.list ul.list ul.list ul.list,\n.style-semantic-elements ul,\n.style-semantic-elements ul ul ul ul {\n list-style: disc;\n}\n\nul.list ul.list,\nul.list ul.list ul.list ul.list ul.list,\n.style-semantic-elements ul ul,\n.style-semantic-elements ul ul ul ul ul {\n list-style: circle;\n}\n\nul.list ul.list ul.list,\nul.list ul.list ul.list ul.list ul.list ul.list,\n.style-semantic-elements ul ul ul,\n.style-semantic-elements ul ul ul ul ul ul {\n list-style: square;\n}\n\n/ Make the markers a different color for their second appearance in a nested list /\nol.list ol.list ol.list ol.list li::marker,\nul.list ul.list ul.list ul.list li::marker,\n.style-semantic-elements ol ol ol ol li::marker,\n.style-semantic-elements ul ul ul ul li::marker {\n color: var(--color-brand-3);\n}\n","@keyframes spinner-spin {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}\n\n.spinner {\n --spinner-primary-color: var(--color-brand-5);\n --spinner-secondary-color: var(--color-brand-3);\n\n font-size: var(--font-size-m);\n position: relative;\n text-align: center;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n gap: var(--space-2xs);\n\n &.small {\n font-size: var(--font-size-xs);\n }\n\n &.large {\n font-size: var(--font-size-xl);\n }\n\n &.label-top {\n flex-direction: column-reverse;\n\n &::after {\n inset: auto 0 0;\n }\n }\n\n &.label-right {\n flex-direction: row;\n gap: var(--space-xs);\n\n &::after {\n inset: 0 auto 0 0;\n }\n }\n\n &.label-left {\n flex-direction: row-reverse;\n gap: var(--space-xs);\n\n &::after {\n inset: 0 0 0 auto;\n }\n }\n\n &::before,\n &::after {\n content: \"\";\n display: block;\n height: 3em;\n width: 3em;\n mask-image: url(\"@/src/svg/loading-arc.svg\");\n mask-size: cover;\n mask-repeat: no-repeat;\n mask-position: center;\n background-color: var(--spinner-primary-color);\n animation: spinner-spin 0.85s linear infinite;\n }\n\n &::after {\n position: absolute;\n inset: 0 0 auto;\n margin: auto;\n background-color: var(--spinner-secondary-color);\n animation-duration: 1.05s;\n }\n}\n",".card {\n background-color: var(--color-body-alt);\n border-radius: var(--radius-l);\n border: var(--border-s) solid var(--color-outline);\n box-shadow: var(--shadow-m);\n padding: var(--space-m);\n font-family: var(--font-family-body);\n font-size: var(--font-size-m);\n font-weight: var(--font-weight-normal);\n\n &.secondary {\n background-color: var(--color-body);\n border-radius: var(--radius-m);\n box-shadow: var(--shadow-s);\n padding: var(--space-s);\n }\n}\n\n/ \n * The Link component also defines .card-title[href]. We specifically add that\n * selector here so the styles in this file override the former.\n /\n.card-title,\n.card-title[href] {\n font-family: var(--font-family-heading);\n line-height: 1.15;\n text-wrap: balance;\n overflow-wrap: break-word;\n font-size: var(--font-size-l);\n font-weight: var(--font-weight-bold);\n color: var(--color-brand-3);\n margin-block: 0 var(--space-xs);\n display: block;\n}\n\n.card-title[href] {\n text-decoration-color: var(--color-brand-transparent);\n}\n\n.card.secondary .card-title {\n font-size: var(--font-size-m);\n margin-block-end: var(--space-2xs);\n}\n",".modal::backdrop,\n.drawer::backdrop {\n --dialog-backdrop-starting-opacity: 0;\n --dialog-backdrop-open-opacity: light-dark(0.75, 0.85);\n --dialog-backdrop-ending-opacity: 0;\n --dialog-backdrop-color: light-dark(var(--color-gray-2), var(--color-gray-8));\n\n background-color: var(--dialog-backdrop-color);\n}\n\n.modal,\n.drawer {\n --dialog-starting-opacity: 1;\n --dialog-starting-transform: translateY(8px);\n --dialog-open-opacity: 1;\n --dialog-open-transform: translate(0);\n --dialog-ending-opacity: 0;\n --dialog-ending-transform: scale(0.97);\n\n @media (prefers-reduced-motion) {\n --dialog-starting-transform: translate(0);\n --dialog-ending-transform: translate(0);\n }\n\n box-shadow: var(--shadow-xl);\n border: var(--border-s) solid var(--color-outline);\n border-radius: var(--radius-l);\n background-color: var(--color-body-alt);\n color: var(--color-body-text);\n padding: 0;\n flex-direction: column;\n gap: 0;\n\n &[open] {\n display: flex;\n }\n}\n\n.modal-header,\n.drawer-header {\n font-family: var(--font-family-heading);\n font-size: var(--font-size-l);\n font-weight: var(--font-weight-bold);\n line-height: 1;\n padding: var(--space-m);\n padding-block-end: var(--space-2xs);\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: var(--color-brand-3);\n margin: 0;\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n color: inherit;\n font-size: inherit;\n font-weight: inherit;\n margin: 0;\n }\n\n .button.dismiss {\n --button-fg-color: var(--color-brand-3);\n --button-hover-bg-color: var(--color-brand-extra-transparent);\n\n font-size: 0.8rem;\n width: 2.25rem;\n height: 2.25rem;\n margin: -0.5rem;\n padding: 0.25rem;\n border-radius: var(--radius-full);\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-brand-transparent);\n }\n }\n}\n\n.modal-body,\n.drawer-body {\n padding: var(--space-m);\n padding-block-start: var(--space-xs);\n flex-shrink: 1;\n display: block;\n overflow: auto;\n margin: 0;\n}\n\n@supports (transition-behavior: allow-discrete) and (overlay: none) {\n .modal,\n .drawer {\n animation: unset;\n }\n}\n\n/ Fade in/out (mixed browser support as of March 2025) /\n:is(.modal, .drawer)[open] {\n display: flex;\n transform: var(--dialog-open-transform);\n opacity: var(--dialog-open-opacity);\n}\n\n:is(.modal, .drawer)[open]::backdrop {\n opacity: var(--dialog-backdrop-open-opacity);\n}\n\n:is(.modal, .drawer),\n:is(.modal, .drawer)::backdrop {\n transition-property: transform, opacity, display, overlay;\n transition-duration: var(--duration-long);\n transition-behavior: allow-discrete;\n}\n\n:is(.modal, .drawer) {\n transform: var(--dialog-ending-transform);\n opacity: var(--dialog-ending-opacity);\n transition-timing-function: var(--ease-out);\n}\n\n:is(.modal, .drawer)::backdrop {\n opacity: var(--dialog-backdrop-ending-opacity);\n transition-timing-function: var(--ease-default);\n}\n\n@starting-style {\n :is(.modal, .drawer)[open] {\n transform: var(--dialog-starting-transform);\n opacity: var(--dialog-starting-opacity);\n }\n\n :is(.modal, .drawer)[open]::backdrop {\n opacity: var(--dialog-backdrop-starting-opacity);\n }\n}\n\n/ End fade in/out styles /\n","meter.meter {\n appearance: none;\n inline-size: 100%;\n block-size: 1em;\n}\n\n@supports selector(::-moz-meter-bar) {\n meter.meter {\n border-radius: var(--radius-s);\n border: 0;\n display: block;\n inline-size: 100%;\n block-size: 1em;\n box-shadow: inset 0 0 0 var(--border-s) var(--color-outline);\n background: var(--color-gray-9);\n box-sizing: border-box;\n overflow: clip;\n }\n}\n\n.meter::-webkit-meter-bar {\n border-radius: var(--radius-s);\n border: 0;\n display: block;\n inline-size: 100%;\n block-size: 1em;\n box-shadow: inset 0 0 0 var(--border-s) var(--color-outline);\n background: var(--color-gray-9);\n box-sizing: border-box;\n overflow: clip;\n}\n\n.meter::-webkit-meter-optimum-value,\n.meter::-webkit-meter-suboptimum-value,\n.meter::-webkit-meter-even-less-good-value {\n border-radius: var(--radius-s);\n border: var(--border-s) solid transparent;\n box-sizing: border-box;\n}\n\n.meter::-webkit-meter-inner-element {\n display: inline-block;\n position: relative;\n}\n\n.meter::-moz-meter-bar {\n border-radius: var(--radius-s);\n border: var(--border-s) solid transparent;\n box-sizing: border-box;\n}\n\n.meter::-webkit-meter-optimum-value {\n background: var(--color-green-6);\n border-color: var(--color-green-5);\n}\n\n.meter:-moz-meter-optimum::-moz-meter-bar {\n background: var(--color-green-6);\n border-color: var(--color-green-5);\n}\n\n.meter::-webkit-meter-suboptimum-value {\n background: light-dark(var(--color-yellow-7), var(--color-yellow-5));\n border-color: light-dark(var(--color-yellow-6), var(--color-yellow-4));\n}\n\n.meter:-moz-meter-sub-optimum::-moz-meter-bar {\n background: light-dark(var(--color-yellow-7), var(--color-yellow-5));\n border-color: light-dark(var(--color-yellow-6), var(--color-yellow-4));\n}\n\n.meter::-webkit-meter-even-less-good-value {\n background: var(--color-red-6);\n border-color: var(--color-red-5);\n}\n\n.meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {\n background: var(--color-red-6);\n border-color: var(--color-red-5);\n}\n",".app {\n / The app is designed to take up the entire width of the page. However, we\n * set a global limit on the overall width of its content for UX and aesthetic\n * reasons. The wrapper elements of the page will always extend to the edge of\n * the screen, but all content within them will be kept within this limit and\n * centered.\n /\n --app-max-content-width: 110rem;\n --app-header-height: clamp(50px, 3.8rem, 100px);\n --app-sidebar-width: clamp(300px, 18rem, 450px);\n\n position: relative;\n width: 100%;\n min-height: 100svh;\n display: flex;\n flex-direction: column;\n font-family: var(--font-family-body);\n font-size: var(--font-size-m);\n}\n\n.app-header {\n height: var(--app-header-height);\n width: 100%;\n color: var(--color-brand-3);\n background-color: var(--color-body-alt);\n border-bottom: var(--border-l) solid var(--color-brand-transparent);\n box-shadow: var(--shadow-s);\n flex: none;\n position: sticky;\n left: 0;\n}\n\n.app-header-content {\n height: 100%;\n width: 100%;\n max-width: var(--app-max-content-width);\n margin-inline: auto;\n padding-inline: calc(var(--space-body-x) - var(--space-xs));\n padding-block: 6px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-s);\n}\n\n.app-header-section {\n margin: 0;\n height: 100%;\n display: flex;\n align-items: center;\n\n / If header only has 1 section, center it /\n &:only-child {\n margin-inline: auto;\n }\n\n / Otherwise, align the first to the left and the rest to the right /\n &:first-child {\n margin-inline-end: auto;\n }\n\n / Put a spacer between consecutive right-aligned sections (3rd onward) /\n &:nth-child(n + 3)::before {\n content: \"\";\n background-color: var(--color-outline);\n height: 2rem;\n width: var(--border-s);\n position: relative;\n right: calc(var(--space-s) / 2);\n }\n}\n\n.app-header-item {\n height: 100%;\n cursor: pointer;\n text-decoration: none;\n color: inherit;\n transition-property: color, background-color;\n transition-duration: var(--duration-short);\n transition-timing-function: var(--ease-default);\n display: flex;\n align-items: center;\n position: relative;\n font-size: 1rem;\n font-weight: var(--font-weight-semibold);\n padding-inline: var(--space-xs);\n border-radius: var(--radius-m);\n\n &:hover {\n background-color: var(--color-brand-extra-transparent);\n }\n\n &:active {\n background-color: var(--color-brand-transparent);\n }\n\n &:focus-visible {\n background-color: var(--color-brand-extra-transparent);\n outline-offset: calc(-1 var(--border-m));\n }\n\n &:is([aria-current], .current) {\n font-weight: var(--font-weight-bold);\n\n &::after {\n opacity: 1;\n }\n }\n\n &::after {\n content: \"\";\n position: absolute;\n width: 100%;\n height: var(--border-l);\n bottom: calc(-1 * (var(--border-l) + 6px));\n left: 0;\n background-color: currentcolor;\n opacity: 0;\n border-radius: 1px;\n }\n}\n\n.app-icon {\n background-color: var(--color-brand-3);\n height: 2rem;\n width: 2rem;\n border: var(--border-m) solid transparent;\n border-radius: var(--radius-full);\n}\n\n.app-title-separator {\n content: \"\";\n background-color: var(--color-brand-transparent);\n width: var(--border-m);\n height: 1.5rem;\n rotate: 22deg;\n margin-inline: var(--space-2xs);\n position: relative;\n left: 1px;\n}\n\n.app-title {\n font-family: var(--font-family-heading);\n font-size: 1.2rem;\n display: flex;\n align-items: center;\n}\n\n.app-body {\n position: relative;\n width: 100%;\n max-width: var(--app-max-content-width);\n margin-inline: auto;\n flex: none;\n display: flex;\n flex-direction: row;\n}\n\n.app-sidebar {\n transition-property: opacity, display;\n transition-duration: var(--duration-medium);\n transition-timing-function: var(--ease-default);\n transition-behavior: allow-discrete;\n width: var(--app-sidebar-width);\n flex: none;\n opacity: 1;\n border-inline-end: var(--border-s) dashed var(--color-outline);\n}\n\n.app-sidebar-content {\n position: sticky;\n top: 0;\n overflow: auto;\n height: 100dvh;\n}\n\n.app-sidebar-section {\n &:first-of-type {\n margin-block-start: var(--space-body-y);\n }\n\n &:not(:last-of-type) {\n margin-block-end: var(--space-xs);\n }\n\n &:last-of-type {\n margin-block-end: var(--space-body-y);\n }\n}\n\n.app-sidebar-heading {\n font-size: 1.2rem;\n margin: 0 var(--space-body-x) var(--space-3xs);\n font-family: var(--font-family-heading);\n font-weight: var(--font-weight-semibold);\n}\n\n.app-sidebar-item {\n display: block;\n margin: 0 var(--space-2xs);\n padding: var(--space-2xs) calc(var(--space-body-x) - var(--space-2xs));\n border-radius: var(--radius-l);\n color: var(--color-body-text-alt);\n text-decoration: none;\n font-weight: var(--font-weight-normal);\n font-size: 1rem;\n user-select: none;\n transition-property: color, background-color, box-shadow;\n transition-duration: var(--duration-short);\n transition-timing-function: var(--ease-default);\n\n &:hover {\n background-color: var(--color-brand-extra-transparent);\n }\n\n &:active {\n color: var(--color-brand-1);\n }\n\n &:is([aria-current], .current) {\n color: var(--color-brand-4);\n font-weight: var(--font-weight-bold);\n }\n\n &:hover:active {\n background-color: var(--color-brand-transparent);\n }\n\n &:focus-visible {\n outline-offset: 0;\n background-color: var(--color-brand-extra-transparent);\n }\n}\n\n.app-sidebar-toggle {\n width: 2.75rem;\n\n &:has(input:focus-visible) {\n background-color: var(--color-brand-extra-transparent);\n outline: var(--border-m) solid var(--color-brand-5);\n outline-offset: calc(-1 * var(--border-m));\n }\n\n /* Style the 3 lines inside the button /\n > div {\n transition-property: transform, opacity;\n transition-duration: var(--duration-long);\n transition-timing-function: var(--ease-out);\n position: absolute;\n width: 1.75rem;\n height: 2px;\n border-radius: 2px;\n background-color: currentcolor;\n opacity: 1;\n top: 50%;\n left: 50%;\n\n &:nth-of-type(1) {\n transform: translateY(calc(-50% - 0.45rem)) translateX(-50%);\n }\n\n &:nth-of-type(2) {\n transform: translateY(-50%) translateX(-50%);\n }\n\n &:nth-of-type(3) {\n transform: translateY(calc(-50% + 0.45rem)) translateX(-50%);\n }\n }\n\n / When the sidebar is visible, turn the 3 lines into an X /\n &:has(input:checked) > div {\n &:nth-of-type(1) {\n transform: translateY(-50%) translateX(-50%) rotate(45deg);\n }\n\n &:nth-of-type(2) {\n opacity: 0;\n transform: translateY(-50%) translateX(-50%) rotate3d(0, 1, 0, 90deg);\n }\n\n &:nth-of-type(3) {\n transform: translateY(-50%) translateX(-50%) rotate(-45deg);\n }\n }\n}\n\n.app-content {\n width: 100%;\n padding: var(--space-body-y) var(--space-body-x);\n position: relative;\n}\n\n/ If there's a sidebar, shrink the content area to accommodate it /\n.app-sidebar ~ .app-content {\n width: calc(100% - var(--app-sidebar-width));\n}\n\n.app-header-section:has(.app-sidebar-toggle) {\n display: none;\n}\n\n@media (width < 55rem) {\n / \n * If there's a sidebar, DON'T factor its width into the content width since\n * the sidebar now has `position: fixed`. This only applies to pages with a\n * sidebar; without one, app-content's width is already 100%.\n /\n .app-sidebar ~ .app-content {\n width: 100%;\n }\n\n .app-sidebar {\n position: fixed;\n top: var(--app-header-height);\n left: 0;\n width: 100vw;\n opacity: 1;\n background-color: light-dark(#fffc, #000a);\n backdrop-filter: blur(24px) saturate(120%);\n border-right: 0;\n z-index: 9;\n\n &::after {\n content: initial;\n }\n }\n\n .app-header-section:has(.app-sidebar-toggle) {\n display: flex;\n }\n\n .app-sidebar-content {\n height: calc(100dvh - var(--app-header-height));\n }\n\n .app:not(:has(.app-sidebar-toggle input:checked)) .app-sidebar {\n opacity: 0;\n display: none;\n }\n\n / If sidebar is open, temporarily hide the overflow and any site-wide banners /\n .app:has(.app-sidebar-toggle input:checked) {\n overflow: hidden;\n\n > .banner {\n display: none;\n }\n\n .app-header {\n position: fixed;\n top: 0;\n z-index: 10;\n }\n\n .app-content {\n top: var(--app-header-height);\n }\n }\n}\n\n.app:has(dialog:modal) {\n / \n * If modal is open, hide the overflow. This prevents the user from scrolling\n * the page down by dragging on the header, which they'd have no way to undo.\n /\n overflow: hidden;\n}\n\n@starting-style {\n .app > .sidebar {\n opacity: 0;\n }\n}\n",".accordion {\n width: 100%;\n\n details {\n width: 100%;\n background-color: var(--color-body-alt);\n padding-block: 0;\n padding-inline: var(--space-xs);\n border-radius: var(--radius-m);\n border: var(--border-s) solid var(--color-outline);\n box-shadow: var(--shadow-s);\n font-family: var(--font-family-body);\n font-size: var(--font-size-m);\n font-weight: var(--font-weight-normal);\n\n @media (prefers-reduced-motion: no-preference) {\n transition: padding var(--duration-long) var(--ease-out);\n interpolate-size: allow-keywords;\n }\n\n & + details {\n border-block-start: 0;\n }\n\n &:not(:first-of-type) {\n border-start-start-radius: 0;\n border-start-end-radius: 0;\n }\n\n &:not(:last-of-type) {\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n }\n\n &::details-content {\n opacity: 0;\n block-size: 0;\n overflow-y: clip;\n transition-property: content-visibility, opacity, block-size;\n transition-duration: var(--duration-long);\n transition-timing-function: var(--ease-out);\n transition-behavior: allow-discrete;\n }\n\n &[open] {\n padding-block-end: var(--space-xs);\n\n &::details-content {\n opacity: 1;\n block-size: auto;\n }\n\n summary {\n border-block-end-color: var(--color-outline);\n margin-block-end: var(--space-xs);\n\n &::before {\n rotate: 0deg;\n }\n\n &:not(:active, .active, :hover, .hover) {\n color: var(--color-brand-3);\n }\n }\n }\n }\n\n summary {\n font-family: var(--font-family-heading);\n font-size: var(--font-size-m);\n font-weight: var(--font-weight-bold);\n line-height: 1;\n cursor: pointer;\n border-block-end: var(--border-s) dashed transparent;\n padding: var(--space-xs);\n padding-inline-start: calc(var(--space-xs) + 1em);\n margin-block: 0;\n margin-inline: calc(-1 var(--space-xs));\n transition-duration: var(--duration-short);\n transition-property: color, border-color;\n transition-timing-function: var(--ease-default);\n position: relative;\n list-style: none; /* Hides ::marker pseudo element in favor of ::before (better cross browser consistency) /\n color: var(--color-body-text);\n user-select: none;\n\n @media (prefers-reduced-motion: no-preference) {\n transition-property: color, border-color, padding, margin;\n }\n\n &:is(:hover, .hover) {\n color: light-dark(var(--color-brand-4), var(--color-brand-2));\n }\n\n &:is(:active, .active) {\n color: light-dark(var(--color-brand-2), var(--color-brand-4));\n }\n\n / Hides ::-webkit-details-marker pseudo element in favor of ::before (better cross browser consistency) /\n &::-webkit-details-marker {\n display: none;\n }\n\n / Replacement marker element /\n &::before {\n content: \"\";\n background-color: var(--color-body-text-alt);\n mask-image: url(\"@/src/svg/dropdown-thick.svg\");\n mask-position: center;\n mask-size: contain;\n mask-repeat: no-repeat;\n display: inline-block;\n position: absolute;\n inset-block: 0;\n inset-inline-start: calc(var(--space-xs) / 2);\n margin: auto;\n width: 1em;\n height: 1em;\n rotate: -90deg;\n transition: rotate var(--duration-long) var(--ease-spring);\n }\n\n &:dir(rtl)::before {\n rotate: 90deg;\n }\n\n @media (prefers-reduced-motion) {\n transition-property: color, border-color;\n\n &::before {\n transition: none;\n }\n }\n }\n\n &.subtle {\n details {\n box-shadow: none;\n border: 0;\n background-color: transparent;\n padding-inline-start: calc(var(--space-xs) + 1em);\n\n &[open] summary {\n margin-block-end: var(--space-3xs);\n }\n }\n\n summary {\n border-block-end: 0;\n padding-block: var(--space-2xs);\n margin-inline-start: calc(-1 (var(--space-xs) + 1em));\n }\n }\n}\n",".button.dismiss {\n --button-fg-color: var(--color-body-text);\n --button-bg-color: transparent;\n --button-border-color: transparent;\n --button-hover-bg-color: var(--color-gray-extra-transparent);\n --button-focus-ring-color: transparent;\n --button-shadow: none;\n\n font-size: 0.75rem;\n width: 3em;\n height: 3em;\n border-radius: var(--radius-m);\n min-width: 0;\n min-height: 0;\n aspect-ratio: 1;\n padding: 0.3em;\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-gray-transparent);\n --button-hover-bg-color: transparent;\n }\n\n /* Don't use pseudo element for hover style /\n &::before {\n content: unset;\n }\n\n &:is(:hover, .hover) {\n background-color: var(--button-hover-bg-color);\n }\n\n &::after {\n content: \"\";\n width: 1.8em;\n height: 1.8em;\n mask-image: url(\"@/src/svg/x.svg\");\n mask-size: contain;\n mask-repeat: no-repeat;\n background-color: currentcolor;\n }\n}\n","/ See utils/base-dialog for more /\n.modal {\n max-height: calc(100svh - 4 var(--space-body-y));\n max-width: calc(100svw - 4 * var(--space-body-x));\n margin: auto;\n\n &.small {\n width: 25rem;\n }\n\n &.medium {\n width: 40rem;\n }\n\n &.large {\n width: 55rem;\n }\n}\n\n.modal-footer {\n padding: var(--space-xs);\n flex-shrink: 0;\n display: flex;\n gap: var(--space-2xs);\n justify-content: flex-start;\n background-color: var(--color-body);\n border-block-start: var(--border-s) solid var(--color-outline);\n margin: 0;\n\n @media screen and (width < 30rem) {\n flex-direction: column;\n width: 100%;\n justify-content: stretch;\n }\n\n .button:not(.small, .medium, .large) {\n font-size: 0.9rem;\n }\n}\n",".banner {\n border-inline-width: 0;\n width: 100%;\n padding: var(--space-xs) var(--space-body-x);\n padding-inline-start: calc(var(--space-body-x) + 2em);\n\n &:has(.button.dismiss) {\n padding-inline-end: calc(var(--space-body-x) + 2em);\n }\n\n &::before,\n &::after {\n inset-inline-start: calc(var(--space-body-x) * 0.5);\n }\n\n & + & {\n border-block-start-width: 0;\n }\n\n &.error {\n --banner-dismiss-icon-color: var(--color-red-4);\n --banner-dismiss-hover-bg: var(--color-red-extra-transparent);\n --banner-dismiss-focus-bg: var(--color-red-transparent);\n }\n\n &.warning {\n --banner-dismiss-icon-color: var(--color-yellow-4);\n --banner-dismiss-hover-bg: var(--color-yellow-extra-transparent);\n --banner-dismiss-focus-bg: var(--color-yellow-transparent);\n }\n\n &.success {\n --banner-dismiss-icon-color: var(--color-green-4);\n --banner-dismiss-hover-bg: var(--color-green-extra-transparent);\n --banner-dismiss-focus-bg: var(--color-green-transparent);\n }\n\n &.info {\n --banner-dismiss-icon-color: var(--color-sky-4);\n --banner-dismiss-hover-bg: var(--color-sky-extra-transparent);\n --banner-dismiss-focus-bg: var(--color-sky-transparent);\n }\n\n .button.dismiss {\n --button-fg-color: var(--banner-dismiss-icon-color);\n --button-hover-bg-color: var(--banner-dismiss-hover-bg);\n\n position: absolute;\n inset-block: 0;\n inset-inline-end: calc(var(--space-body-x) * 0.5);\n margin: auto;\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--banner-dismiss-focus-bg);\n }\n }\n}\n",".alert {\n border-radius: var(--radius-s);\n border-start-start-radius: calc(var(--space-2xs) + 2em);\n border-end-start-radius: calc(var(--space-2xs) + 2em);\n padding: var(--space-2xs);\n padding-inline-start: calc(var(--space-2xs) + 2em);\n\n &::before,\n &::after {\n inset-inline-start: calc(var(--space-2xs) * 0.5);\n }\n}\n","@keyframes indeterminate-progress {\n from {\n opacity: 0.2;\n }\n\n to {\n opacity: 0.8;\n }\n}\n\nprogress.progress {\n appearance: none;\n inline-size: 100%;\n block-size: 1em;\n}\n\n@supports selector(::-moz-progress-bar) {\n progress.progress {\n border-radius: var(--radius-s);\n border: 0;\n display: block;\n inline-size: 100%;\n block-size: 1em;\n box-shadow: inset 0 0 0 var(--border-s) var(--color-outline);\n background: var(--color-gray-9);\n box-sizing: border-box;\n overflow: clip;\n }\n}\n\n.progress::-webkit-progress-bar {\n border-radius: var(--radius-s);\n border: 0;\n display: block;\n inline-size: 100%;\n block-size: 1em;\n box-shadow: inset 0 0 0 var(--border-s) var(--color-outline);\n background: var(--color-gray-9);\n box-sizing: border-box;\n overflow: clip;\n}\n\n.progress::-webkit-progress-value {\n border-radius: var(--radius-s);\n border: var(--border-s) solid transparent;\n box-sizing: border-box;\n background: var(--color-blue-6);\n border-color: var(--color-blue-5);\n}\n\n.progress::-moz-progress-bar {\n border-radius: var(--radius-s);\n border: var(--border-s) solid transparent;\n box-sizing: border-box;\n background: var(--color-blue-6);\n border-color: var(--color-blue-5);\n}\n\n.progress:indeterminate::-webkit-progress-value {\n background: var(--color-blue-6);\n border-color: var(--color-blue-5);\n opacity: 0.5;\n inline-size: 100% !important;\n animation: indeterminate-progress 1s var(--ease-both-subtle) infinite\n alternate;\n}\n\n.progress:indeterminate::-moz-progress-bar {\n background: var(--color-blue-6);\n border-color: var(--color-blue-5);\n opacity: 0.5;\n inline-size: 100% !important;\n animation: indeterminate-progress 1s var(--ease-both-subtle) infinite\n alternate;\n}\n",".quote,\n:where(.style-semantic-elements blockquote) {\n display: block;\n margin: 0;\n color: var(--color-body-text-alt);\n border-inline-start: 0.25em solid var(--color-gray-transparent);\n padding: var(--space-3xs);\n padding-inline-start: var(--space-xs);\n position: relative;\n line-height: 1.25;\n font-family: var(--font-family-body);\n font-size: var(--font-size-m);\n font-weight: var(--font-weight-normal);\n\n footer {\n margin-block-start: 0.5em;\n font-size: var(--font-size-s);\n font-style: initial;\n color: var(--color-body-text);\n font-weight: var(--font-weight-semibold);\n\n cite {\n font-weight: var(--font-weight-normal);\n font-style: italic;\n }\n }\n}\n",".button {\n --button-fg-color: var(--color-body-text);\n --button-bg-color: var(--color-gray-9);\n --button-border-color: var(--color-gray-8);\n --button-font-weight: var(--font-weight-normal);\n --button-focus-ring-color: var(--color-gray-extra-transparent);\n --button-shadow: var(--shadow-s);\n --button-hover-bg-color: var(--button-border-color);\n\n box-sizing: border-box;\n display: inline-flex;\n outline: 0;\n padding-inline: 1.25em;\n padding-block: 0.75em;\n gap: 0.625em;\n border-style: solid;\n transform: scale(1);\n transition-property: box-shadow, background-color, transform, opacity;\n transition-duration: var(--duration-medium);\n transition-timing-function: var(--ease-default);\n text-decoration: none;\n position: relative;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n cursor: pointer;\n border-width: var(--border-s);\n border-radius: var(--radius-m);\n min-height: 2.6em;\n min-width: 3em;\n line-height: 1;\n font-family: var(--font-family-body);\n box-shadow: var(--button-shadow);\n user-select: none;\n font-size: 1rem;\n color: var(--button-fg-color);\n background-color: var(--button-bg-color);\n border-color: var(--button-border-color);\n font-weight: var(--button-font-weight);\n\n &::before {\n content: \"\";\n background-color: var(--button-hover-bg-color);\n position: absolute;\n inset: 0;\n margin: auto;\n transition-property: opacity, width, height, border-radius;\n transition-duration: var(--duration-medium);\n transition-timing-function: var(--ease-default);\n z-index: -1;\n border-radius: 2em;\n width: 4em;\n height: 4em;\n opacity: 0;\n }\n\n &:is(:focus-visible, .focus) {\n box-shadow:\n var(--button-shadow),\n 0 0 0 0.1em var(--button-border-color),\n 0 0 0 calc(0.2em + var(--border-s)) var(--button-focus-ring-color);\n }\n\n &:is(:active, .active) {\n transform: scale(0.98);\n\n /\n On low-resolution screens, the scale effect makes text jump\n * around awkwardly, so we use an alternative.\n /\n @media screen and (resolution < 2x) {\n transform: translateY(1px);\n }\n }\n\n &:is(:hover, .hover) {\n text-decoration: none;\n\n &::before {\n opacity: 1;\n width: 100%;\n height: 100%;\n border-radius: 5px;\n }\n\n / inputs don't support children, so the ::before pseudo element won't work /\n &:is(input) {\n background-color: var(--button-hover-bg-color);\n }\n }\n\n &.primary {\n --button-fg-color: white;\n --button-bg-color: var(--color-brand-5);\n --button-border-color: var(--color-brand-4);\n --button-font-weight: var(--font-weight-bold);\n --button-focus-ring-color: var(--color-brand-transparent);\n\n &.red {\n --button-bg-color: var(--color-red-5);\n --button-border-color: var(--color-red-4);\n --button-focus-ring-color: var(--color-red-transparent);\n }\n\n &.orange {\n --button-bg-color: var(--color-orange-5);\n --button-border-color: var(--color-orange-4);\n --button-focus-ring-color: var(--color-orange-transparent);\n }\n\n &.yellow {\n --button-bg-color: var(--color-yellow-5);\n --button-border-color: var(--color-yellow-4);\n --button-focus-ring-color: var(--color-yellow-transparent);\n }\n\n &.green {\n --button-bg-color: var(--color-green-5);\n --button-border-color: var(--color-green-4);\n --button-focus-ring-color: var(--color-green-transparent);\n }\n\n &.sky {\n --button-bg-color: var(--color-sky-5);\n --button-border-color: var(--color-sky-4);\n --button-focus-ring-color: var(--color-sky-transparent);\n }\n\n &.blue {\n --button-bg-color: var(--color-blue-5);\n --button-border-color: var(--color-blue-4);\n --button-focus-ring-color: var(--color-blue-transparent);\n }\n\n &.purple {\n --button-bg-color: var(--color-purple-5);\n --button-border-color: var(--color-purple-4);\n --button-focus-ring-color: var(--color-purple-transparent);\n }\n\n &.magenta {\n --button-bg-color: var(--color-magenta-5);\n --button-border-color: var(--color-magenta-4);\n --button-focus-ring-color: var(--color-magenta-transparent);\n }\n\n &.gray {\n --button-bg-color: var(--color-gray-5);\n --button-border-color: var(--color-gray-4);\n --button-focus-ring-color: var(--color-gray-transparent);\n }\n\n &.black {\n --button-bg-color: black;\n --button-border-color: #3d3d3d;\n --button-focus-ring-color: var(--color-gray-transparent);\n }\n\n &.white {\n --button-fg-color: black;\n --button-bg-color: white;\n --button-border-color: #d0d0d0;\n --button-focus-ring-color: var(--color-gray-transparent);\n }\n }\n\n &.subtle {\n --button-fg-color: var(--color-brand-4);\n --button-bg-color: transparent;\n --button-border-color: transparent;\n --button-hover-bg-color: var(--color-brand-extra-transparent);\n --button-font-weight: var(--font-weight-bold);\n --button-focus-ring-color: transparent;\n --button-shadow: none;\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-brand-transparent);\n --button-hover-bg-color: transparent;\n }\n\n &.red {\n --button-fg-color: var(--color-red-4);\n --button-hover-bg-color: var(--color-red-extra-transparent);\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-red-transparent);\n }\n }\n\n &.orange {\n --button-fg-color: var(--color-orange-4);\n --button-hover-bg-color: var(--color-orange-extra-transparent);\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-orange-transparent);\n }\n }\n\n &.yellow {\n --button-fg-color: var(--color-yellow-4);\n --button-hover-bg-color: var(--color-yellow-extra-transparent);\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-yellow-transparent);\n }\n }\n\n &.green {\n --button-fg-color: var(--color-green-4);\n --button-hover-bg-color: var(--color-green-extra-transparent);\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-green-transparent);\n }\n }\n\n &.sky {\n --button-fg-color: var(--color-sky-4);\n --button-hover-bg-color: var(--color-sky-extra-transparent);\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-sky-transparent);\n }\n }\n\n &.blue {\n --button-fg-color: var(--color-blue-4);\n --button-hover-bg-color: var(--color-blue-extra-transparent);\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-blue-transparent);\n }\n }\n\n &.purple {\n --button-fg-color: var(--color-purple-4);\n --button-hover-bg-color: var(--color-purple-extra-transparent);\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-purple-transparent);\n }\n }\n\n &.magenta {\n --button-fg-color: var(--color-magenta-4);\n --button-hover-bg-color: var(--color-magenta-extra-transparent);\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-magenta-transparent);\n }\n }\n\n &.gray,\n &.black,\n &.white {\n --button-hover-bg-color: var(--color-gray-extra-transparent);\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-gray-transparent);\n }\n }\n\n &.gray {\n --button-fg-color: var(--color-gray-4);\n }\n\n &.black {\n --button-fg-color: black;\n }\n\n &.white {\n --button-fg-color: white;\n }\n }\n\n &.small {\n font-size: 0.8rem;\n }\n\n &.large {\n font-size: 1.2rem;\n }\n\n &.icon {\n border-radius: var(--radius-full);\n min-width: 0;\n min-height: 0;\n aspect-ratio: 1;\n padding: 0.5em;\n\n / Subtle icon buttons use normal pseudo element hover effect /\n &.subtle {\n &::before {\n width: 75%;\n height: 75%;\n }\n\n &:is(:hover, .hover)::before {\n width: 100%;\n height: 100%;\n border-radius: 100%;\n }\n }\n\n / Normal icon buttons just change background color /\n &:not(.subtle) {\n &::before {\n content: unset;\n }\n\n &:is(:hover, .hover) {\n background-color: var(--button-hover-bg-color);\n }\n }\n }\n\n &:is(:disabled, .disabled, [aria-disabled=\"true\"]) {\n opacity: var(--opacity-disabled);\n cursor: not-allowed;\n transform: scale(1);\n\n &:is(:hover, .hover)::before {\n opacity: 0;\n }\n }\n\n &.loading {\n cursor: progress;\n\n &::before {\n opacity: 1 !important;\n height: 100% !important;\n border-radius: inherit !important;\n animation: button-loading-bg 1200ms var(--ease-both-subtle) infinite\n forwards;\n }\n\n &:is(:disabled, .disabled, [aria-disabled=\"true\"]) {\n cursor: wait;\n }\n }\n}\n\n@keyframes button-loading-bg {\n 0% {\n width: 0;\n margin: 0 auto 0 0;\n }\n\n 50% {\n width: 100%;\n }\n\n 100% {\n width: 0;\n margin: 0 0 0 auto;\n }\n}\n",".divider,\n:where(.style-semantic-elements hr, .style-semantic-elements br) {\n --divider-thickness: var(--border-s);\n\n display: block;\n border-style: solid;\n border-color: var(--color-outline);\n border-width: 0;\n border-top-width: var(--divider-thickness);\n margin: var(--space-xs) 0;\n outline: 0;\n width: 100%;\n height: 0;\n print-color-adjust: exact;\n position: relative;\n\n &.vertical {\n display: inline-block;\n border-top-width: 0;\n border-left-width: var(--divider-thickness);\n margin: auto var(--space-xs);\n width: 0;\n height: 100%;\n min-height: 1em;\n }\n}\n\n.divider.invisible,\n:where(.style-semantic-elements br) {\n visibility: hidden;\n}\n\n.divider.thick {\n --divider-thickness: var(--border-m);\n}\n\n.divider.thicker {\n --divider-thickness: var(--border-l);\n}\n\n.divider.dashed {\n border-style: dashed;\n}\n\n.divider.dotted {\n border-style: dotted;\n}\n",".chip {\n --chip-fg-color: white;\n --chip-bg-color: var(--color-brand-6);\n --chip-border-color: var(--color-brand-5);\n --chip-focus-color: var(--color-brand-transparent);\n\n display: inline-flex;\n align-items: center;\n border-radius: var(--radius-full);\n font-size: var(--font-size-s);\n font-family: var(--font-family-body);\n font-weight: var(--font-weight-normal);\n padding-block: var(--space-3xs);\n padding-inline: var(--space-xs);\n background-color: var(--chip-bg-color);\n border: var(--border-s) solid var(--chip-border-color);\n color: var(--chip-fg-color);\n flex-shrink: 0;\n cursor: default;\n transition-property: box-shadow, background-color, border-color, transform;\n transition-duration: var(--duration-medium);\n transition-timing-function: var(--ease-default);\n text-decoration: none;\n appearance: none;\n line-height: 1.2;\n\n &.clickable {\n cursor: pointer;\n box-shadow: var(--shadow-s);\n transform: scale(1);\n\n &:is(:focus-visible, .focus) {\n outline: 0;\n box-shadow:\n var(--shadow-s),\n 0 0 0 0.1em var(--chip-border-color),\n 0 0 0 calc(0.2em + var(--border-s)) var(--chip-focus-color);\n }\n\n &:is(:hover, .hover) {\n background-color: var(--chip-border-color);\n }\n\n &:is(:active, .active) {\n transform: scale(0.96);\n\n /\n * On low-resolution screens, the scale effect makes text jump\n * around awkwardly, so we use an alternative.\n /\n @media screen and (resolution < 2x) {\n transform: translateY(1px);\n }\n }\n }\n\n &.red {\n --chip-bg-color: var(--color-red-6);\n --chip-border-color: var(--color-red-5);\n --chip-focus-color: var(--color-red-transparent);\n }\n\n &.orange {\n --chip-bg-color: var(--color-orange-6);\n --chip-border-color: var(--color-orange-5);\n --chip-focus-color: var(--color-orange-transparent);\n }\n\n &.yellow {\n --chip-bg-color: var(--color-yellow-6);\n --chip-border-color: var(--color-yellow-5);\n --chip-focus-color: var(--color-yellow-transparent);\n }\n\n &.green {\n --chip-bg-color: var(--color-green-6);\n --chip-border-color: var(--color-green-5);\n --chip-focus-color: var(--color-green-transparent);\n }\n\n &.sky {\n --chip-bg-color: var(--color-sky-6);\n --chip-border-color: var(--color-sky-5);\n --chip-focus-color: var(--color-sky-transparent);\n }\n\n &.blue {\n --chip-bg-color: var(--color-blue-6);\n --chip-border-color: var(--color-blue-5);\n --chip-focus-color: var(--color-blue-transparent);\n }\n\n &.purple {\n --chip-bg-color: var(--color-purple-6);\n --chip-border-color: var(--color-purple-5);\n --chip-focus-color: var(--color-purple-transparent);\n }\n\n &.magenta {\n --chip-bg-color: var(--color-magenta-6);\n --chip-border-color: var(--color-magenta-5);\n --chip-focus-color: var(--color-magenta-transparent);\n }\n\n &.gray {\n --chip-bg-color: var(--color-gray-6);\n --chip-border-color: var(--color-gray-5);\n --chip-focus-color: var(--color-gray-transparent);\n }\n\n &.black {\n --chip-bg-color: black;\n --chip-border-color: #3d3d3d;\n --chip-focus-color: var(--color-gray-transparent);\n }\n\n &.white {\n --chip-fg-color: black;\n --chip-bg-color: white;\n --chip-border-color: #d0d0d0;\n --chip-focus-color: var(--color-gray-transparent);\n }\n}\n\n.chip-delete {\n outline: 1px solid transparent;\n margin-inline: var(--space-3xs) calc(-1 var(--space-2xs));\n font-size: 0.6em;\n border: 0;\n border-radius: var(--radius-full);\n transition-property: background-color, outline-color, filter;\n transition-duration: var(--duration-short);\n transition-timing-function: var(--ease-default);\n position: relative;\n overflow: hidden;\n cursor: pointer;\n height: 2em;\n width: 2em;\n user-select: none;\n background-color: var(--chip-border-color);\n padding: 0;\n display: inline-flex;\n box-shadow: none;\n\n &::after {\n content: \"\";\n width: 1.7em;\n height: 1.7em;\n mask-image: url(\"@/src/svg/x.svg\");\n mask-size: contain;\n mask-repeat: no-repeat;\n mask-position: center;\n background-color: var(--chip-fg-color);\n margin: auto;\n }\n\n &:is(:focus-visible, .focus) {\n outline-color: var(--chip-fg-color);\n }\n\n &:is(:hover, .hover) {\n background-color: hsl(from var(--chip-border-color) h s calc(l + 5));\n }\n\n &:is(:active, .active) {\n background-color: hsl(from var(--chip-border-color) h s calc(l - 20));\n }\n}\n",".field {\n --field-gap: var(--space-2xs);\n --field-padding: 0.5em;\n --field-radius: var(--radius-m);\n\n display: inline-flex;\n flex-direction: column;\n line-height: 1;\n gap: var(--field-gap);\n color: var(--color-body-text);\n font-weight: var(--font-weight-semibold);\n transition-property: color, box-shadow;\n transition-duration: var(--duration-medium);\n transition-timing-function: var(--ease-default);\n font-size: var(--font-size-m);\n font-family: var(--font-family-body);\n\n &.compact,\n .fieldset.compact & {\n --field-gap: calc(0.9 * var(--space-2xs));\n --field-padding: 0.33em;\n --field-radius: var(--radius-s);\n\n font-size: calc(0.9 * var(--font-size-m));\n }\n\n &:focus-within {\n color: var(--color-brand-5);\n }\n\n &:has(:user-invalid, [aria-invalid=\"true\"]) {\n color: var(--color-red-5);\n\n .error-message {\n display: flex;\n }\n }\n\n &:has([readonly]):focus-within {\n color: var(--color-gray-5);\n }\n\n input:not(\n [type=\"button\"],\n [type=\"checkbox\"],\n [type=\"file\"],\n [type=\"hidden\"],\n [type=\"image\"],\n [type=\"radio\"],\n [type=\"range\"],\n [type=\"reset\"],\n [type=\"submit\"]\n ),\n select,\n textarea {\n color: var(--color-body-text);\n background-color: light-dark(white, black);\n border: var(--border-s) solid var(--color-outline);\n font-size: 1em;\n padding: var(--field-padding);\n border-radius: var(--field-radius);\n transition-property: color, box-shadow, border-color;\n transition-duration: var(--duration-medium);\n transition-timing-function: var(--ease-default);\n font-family: inherit;\n line-height: 1.25;\n\n &:focus {\n outline: 0;\n border-color: var(--color-brand-5);\n box-shadow:\n 0 0 0 0.1em var(--color-brand-5),\n 0 0 0 calc(0.2em + var(--border-s)) var(--color-brand-transparent);\n }\n\n &:focus-visible {\n outline: 0;\n }\n\n &:disabled {\n opacity: var(--opacity-disabled);\n cursor: not-allowed;\n }\n\n /* Not using :read-only because it matches additional elements (e.g., every color input) /\n &[readonly] {\n border-style: dashed;\n\n &:focus {\n outline: 0;\n border-style: solid;\n border-color: var(--color-gray-5);\n box-shadow:\n 0 0 0 0.1em var(--color-gray-5),\n 0 0 0 calc(0.2em + var(--border-s)) var(--color-gray-transparent);\n }\n }\n\n &:user-invalid,\n &[aria-invalid=\"true\"] {\n border-color: var(--color-red-5);\n box-shadow: 0 0 0 0.1em var(--color-red-5);\n\n &:focus {\n outline: 0;\n border-color: var(--color-red-5);\n box-shadow:\n 0 0 0 0.1em var(--color-red-5),\n 0 0 0 calc(0.2em + var(--border-s)) var(--color-red-transparent);\n }\n }\n }\n\n input[type=\"color\"] {\n inline-size: auto;\n block-size: auto;\n cursor: pointer;\n\n &::-webkit-color-swatch-wrapper {\n padding: 0;\n }\n\n &::-webkit-color-swatch {\n border: 0;\n block-size: 1.25em;\n inline-size: 100%;\n border-radius: var(--radius-s);\n }\n\n &::-moz-color-swatch {\n border: 0;\n block-size: 1.25em;\n inline-size: 100%;\n border-radius: var(--radius-s);\n }\n }\n\n select,\n input[list] {\n background-image: url(\"@/src/svg/dropdown.svg\");\n background-position: center right 0.25em;\n background-size: auto 75%;\n background-repeat: no-repeat;\n appearance: none;\n padding-inline-end: calc(2 var(--space-2xs) + 1em);\n\n &:dir(rtl) {\n background-position: center left 0.25em;\n }\n\n @media (prefers-color-scheme: dark) {\n background-image: url(\"@/src/svg/dropdown-invert.svg\");\n }\n }\n\n select {\n cursor: pointer;\n }\n\n .help-text {\n font-size: 0.9em;\n color: var(--color-body-text-alt);\n font-weight: var(--font-weight-normal);\n margin: -0.25em 0 0;\n position: relative;\n }\n\n /* Todo glitches /\n .error-message {\n display: none;\n font-size: 0.9em;\n border: 0;\n padding: 0;\n margin: 0;\n font-weight: var(--font-weight-semibold);\n align-items: center;\n gap: 2px;\n\n &::before {\n content: \"\";\n mask-image: url(\"@/src/svg/x-circle.svg\");\n mask-size: contain;\n mask-repeat: no-repeat;\n mask-position: center;\n background-color: currentcolor;\n display: inline-block;\n height: 1.2em;\n width: 1.2em;\n }\n }\n\n .input-group {\n display: flex;\n flex-direction: row;\n align-items: stretch;\n\n > {\n border-radius: 0 !important;\n z-index: 1;\n }\n\n > :is(:user-invalid, [aria-invalid=\"true\"]) {\n z-index: 2;\n }\n\n > :first-child {\n border-start-start-radius: var(--field-radius) !important;\n border-end-start-radius: var(--field-radius) !important;\n }\n\n > :last-child {\n border-end-end-radius: var(--field-radius) !important;\n border-start-end-radius: var(--field-radius) !important;\n }\n\n > :focus-visible {\n z-index: 3;\n }\n\n > :is(.prefix, .suffix, .action) {\n user-select: none;\n -webkit-user-drag: none;\n display: flex;\n font-weight: var(--font-weight-normal);\n color: var(--color-gray-3);\n background-color: var(--color-gray-9);\n border: var(--border-s) solid var(--color-outline);\n padding: var(--field-padding) calc(2 * var(--field-padding));\n align-items: center;\n justify-content: center;\n font-size: 0.9em;\n\n :is(img, svg) {\n height: 1.15em;\n width: auto;\n }\n }\n\n > .prefix {\n border-inline-end: 0;\n }\n\n > .suffix {\n border-inline-start: 0;\n }\n\n > .action {\n cursor: pointer;\n color: var(--color-brand-3);\n border-inline-start: 0;\n transition-property: box-shadow, background-color;\n transition-duration: var(--duration-medium);\n transition-timing-function: var(--ease-default);\n\n &:hover {\n background-color: var(--color-gray-8);\n }\n\n &:active {\n background-color: var(--color-gray-7);\n }\n\n &:focus-visible {\n border-color: var(--color-brand-5);\n border-inline-start-width: var(--border-s);\n border-inline-start-style: solid;\n box-shadow:\n 0 0 0 0.11em var(--color-brand-5),\n 0 0 0 calc(0.22em + var(--border-s)) var(--color-brand-transparent);\n outline: 0;\n }\n }\n\n > :is(input, select, textarea) {\n width: 100%;\n\n &:has(~ .action:focus-visible) {\n border-inline-end-width: 0;\n }\n }\n }\n\n .required-indicator {\n display: inline;\n position: relative;\n inset-block-end: 0.15em;\n inset-inline-start: 0.15em;\n color: var(--color-red-5);\n font-size: 0.9em;\n font-weight: var(--font-weight-semibold);\n }\n}\n\ninput[type=\"checkbox\"],\ninput[type=\"radio\"] {\n accent-color: var(--color-brand-5);\n}\n\nfieldset.fieldset {\n border: var(--border-s) solid var(--color-outline);\n border-radius: var(--radius-s);\n background-color: var(--color-body);\n color: var(--color-body-text);\n\n legend {\n font-family: var(--font-family-heading);\n font-weight: var(--font-weight-bold);\n transition: color var(--duration-medium) var(--ease-default);\n }\n\n &:focus-within legend {\n color: var(--color-brand-5);\n }\n}\n\n.form {\n max-width: 60ch;\n margin-inline-end: auto;\n}\n",".flow,\n.stack,\n.separate,\n.space {\n display: flex !important;\n gap: var(--space-s);\n\n &.no-gap {\n gap: var(--space-none);\n }\n\n &.densest {\n gap: var(--space-3xs);\n }\n\n &.denser {\n gap: var(--space-2xs);\n }\n\n &.dense {\n gap: var(--space-xs);\n }\n\n &.sparse {\n gap: var(--space-m);\n }\n\n &.sparser {\n gap: var(--space-l);\n }\n\n &.sparsest {\n gap: var(--space-xl);\n }\n\n &.horizontal,\n &.horizontally {\n flex-direction: row;\n }\n\n &.vertical,\n &.vertically {\n flex-direction: column;\n }\n}\n\n.flow {\n flex-wrap: wrap;\n align-items: center;\n justify-content: start;\n}\n\n.stack {\n flex-wrap: nowrap;\n align-items: stretch;\n justify-content: start;\n}\n\n.separate {\n flex-wrap: nowrap;\n align-items: center;\n justify-content: space-between;\n}\n\n.space {\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-evenly;\n}\n","/* See utils/base-dialog for more /\n.drawer {\n --dialog-starting-opacity: 1;\n --dialog-ending-opacity: 1;\n\n position: fixed;\n inset: 0;\n border-radius: 0;\n margin: 0;\n border: 0;\n overflow: auto;\n transition-duration: var(--duration-extra-long) !important;\n\n &.left {\n right: auto;\n\n @media (prefers-reduced-motion: no-preference) {\n --dialog-starting-transform: translateX(-100%);\n --dialog-ending-transform: translateX(-100%);\n }\n }\n\n &.top {\n bottom: auto;\n\n @media (prefers-reduced-motion: no-preference) {\n --dialog-starting-transform: translateY(-100%);\n --dialog-ending-transform: translateY(-100%);\n }\n }\n\n &.right {\n left: auto;\n\n @media (prefers-reduced-motion: no-preference) {\n --dialog-starting-transform: translateX(100%);\n --dialog-ending-transform: translateX(100%);\n }\n }\n\n &.bottom {\n top: auto;\n\n @media (prefers-reduced-motion: no-preference) {\n --dialog-starting-transform: translateY(100%);\n --dialog-ending-transform: translateY(100%);\n }\n }\n\n &.top,\n &.bottom {\n width: 100dvw;\n max-width: unset;\n height: auto;\n max-height: 100dvh;\n min-height: min(100dvh, 16rem);\n\n &.small {\n height: 18rem;\n }\n\n &.medium {\n height: 28rem;\n }\n\n &.large {\n height: 38rem;\n }\n }\n\n &.left,\n &.right {\n height: 100dvh;\n max-height: unset;\n width: auto;\n min-width: min(100dvw, 18rem);\n max-width: 100dvw;\n\n &.small {\n width: 22rem;\n }\n\n &.medium {\n width: 32rem;\n }\n\n &.large {\n width: 42rem;\n }\n }\n}\n\n.drawer-body {\n height: 100%;\n}\n\n.drawer-footer {\n padding: var(--space-xs);\n flex-shrink: 0;\n display: flex;\n gap: var(--space-xs);\n justify-content: flex-start;\n margin: 0;\n margin-block-start: auto;\n\n > {\n width: 100%;\n }\n}\n"],"names":[]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@jrgermain/stylesheet",
-  "version": "0.10.1",
+  "version": "0.10.2",
   "description": "A CSS stylesheet for the cool stuff I'm building",
   "homepage": "https://stylesheet.jrgermain.dev",
   "author": {
@@ -19,13 +19,13 @@
     "lint": "stylelint ./src/styles"
   },
   "devDependencies": {
-    "browserslist": "^4.24.3",
+    "browserslist": "^4.25.1",
     "chokidar": "^4.0.3",
-    "lightningcss": "^1.28.2",
-    "prettier": "^3.2.5",
-    "rimraf": "^5.0.5",
-    "stylelint": "^16.0.0",
-    "stylelint-config-standard": "^36.0.1"
+    "lightningcss": "^1.30.1",
+    "prettier": "^3.6.2",
+    "rimraf": "^6.0.1",
+    "stylelint": "^16.22.0",
+    "stylelint-config-standard": "^38.0.0"
   },
   "files": [
     "dist"