@layer reset,base,components,utilities;@layer base.colors{@layer theme.light,theme.dark;@layer theme.light{:root,[data-color]{--base-hue: 200;--base-saturation: 80%;--base-lightness: 50%;&[data-harmony=complementary]{--secondary-offset: 180;--tertiary-offset: 150}&[data-harmony=triadic]{--secondary-offset: 120;--tertiary-offset: 240}&[data-harmony=analogous]{--secondary-offset: 30;--tertiary-offset: -30}--neutral-h: var(--base-hue);--primary-h: var(--base-hue);--secondary-h: calc(var(--base-hue) + var(--secondary-offset, 0));--tertiary-h: calc(var(--base-hue) + var(--tertiary-offset, 0));--neutral-s: 5%;--neutral-vs: 15%;--primary-s: clamp(5%, var(--base-saturation), 75%);--secondary-s: clamp(5%, calc(var(--base-saturation) * .9), 75%);--tertiary-s: clamp(5%, calc(var(--base-saturation) * .85), 75%);&[data-harmony=monochromatic]{--secondary-s: clamp(5%, calc(var(--base-saturation) * .6), 75%);--tertiary-s: clamp(5%, calc(var(--base-saturation) * .3), 75%)}--primary-chromatic: var(--primary-h) var(--primary-s);--secondary-chromatic: var(--secondary-h) var(--secondary-s);--tertiary-chromatic: var(--tertiary-h) var(--tertiary-s);--neutral-chromatic: var(--neutral-h) var(--neutral-s);--primary-l-max: clamp( 20%, calc(var(--base-lightness) - var(--primary-s) * .2), 50% );--secondary-l-max: clamp( 20%, calc(var(--base-lightness) - var(--secondary-s) * .2), 50% );--tertiary-l-max: clamp( 20%, calc(var(--base-lightness) - var(--tertiary-s) * .2), 50% );--color-primary: hsl( var(--primary-chromatic) clamp(20%, 40%, var(--primary-l-max)) );--color-on-primary: hsl(0 0% 100%);--color-primary-container: hsl( var(--primary-h) calc(var(--primary-s) * .85) 90% );--color-on-primary-container: hsl(var(--primary-chromatic) 10%);--color-secondary: hsl( var(--secondary-chromatic) clamp(20%, 40%, var(--secondary-l-max)) );--color-on-secondary: hsl(0 0% 100%);--color-secondary-container: hsl( var(--secondary-h) calc(var(--secondary-s) * .85) 90% );--color-on-secondary-container: hsl(var(--secondary-chromatic) 10%);--color-tertiary: hsl( var(--tertiary-chromatic) clamp(20%, 40%, var(--tertiary-l-max)) );--color-on-tertiary: hsl(0 0% 100%);--color-tertiary-container: hsl( var(--tertiary-h) calc(var(--tertiary-s) * .85) 90% );--color-on-tertiary-container: hsl(var(--tertiary-chromatic) 10%);--color-surface: hsl(var(--neutral-chromatic) 98%);--color-on-surface: hsl(var(--neutral-chromatic) 10%);--color-surface-container-lowest: hsl(var(--neutral-chromatic) 100%);--color-surface-container-low: hsl(var(--neutral-chromatic) 96%);--color-surface-container: hsl(var(--neutral-chromatic) 94%);--color-surface-container-high: hsl(var(--neutral-chromatic) 92%);--color-surface-container-highest: hsl(var(--neutral-chromatic) 90%);--color-surface-variant: hsl(var(--neutral-h) var(--neutral-vs) 90%);--color-on-surface-variant: hsl(var(--neutral-h) var(--neutral-vs) 30%);--color-success: hsl(146 82% 24%);--color-on-success: hsl(0 0% 100%);--color-success-container: hsl(132 83% 79%);--color-on-success-container: hsl(140 100% 6%);--color-error: hsl(0 72% 40%);--color-on-error: hsl(0 0% 100%);--color-error-container: hsl(0 80% 93%);--color-on-error-container: hsl(0 60% 20%);--color-info: hsl(236 67% 55%);--color-on-info: hsl(0 0% 100%);--color-info-container: hsl(240 100% 94%);--color-on-info-container: hsl(238 100% 21%);--color-warning: hsl(25 100% 31%);--color-on-warning: hsl(0 0% 100%);--color-warning-container: hsl(18 100% 90%);--color-on-warning-container: hsl(20 100% 10%)}}@layer theme.dark{[data-theme=dark],[data-color][data-theme=dark]{--primary-s: clamp(5%, calc(var(--base-saturation) * .95), 90%);--secondary-s: clamp(5%, calc(var(--base-saturation) * .9), 85%);--tertiary-s: clamp(5%, calc(var(--base-saturation) * .85), 80%);&[data-harmony=monochromatic]{--secondary-s: clamp(5%, calc(var(--base-saturation) * .6), 85%);--tertiary-s: clamp(5%, calc(var(--base-saturation) * .3), 80%)}--primary-l-min: calc( 100% - var(--base-lightness) + var(--primary-s) * .15 );--secondary-l-min: calc( 100% - var(--base-lightness) + var(--secondary-s) * .15 );--tertiary-l-min: calc( 100% - var(--base-lightness) + var(--tertiary-s) * .15 );--color-primary: hsl( var(--primary-chromatic) clamp(var(--primary-l-min), 80%, 88%) );--color-on-primary: hsl(var(--primary-chromatic) 20%);--color-primary-container: hsl( var(--primary-h) calc(var(--primary-s) * .55) 30% );--color-on-primary-container: hsl(var(--primary-chromatic) 90%);--color-secondary: hsl( var(--secondary-chromatic) clamp(var(--secondary-l-min), 80%, 88%) );--color-on-secondary: hsl(var(--secondary-chromatic) 20%);--color-secondary-container: hsl( var(--secondary-h) calc(var(--secondary-s) * .55) 30% );--color-on-secondary-container: hsl(var(--secondary-chromatic) 90%);--color-tertiary: hsl( var(--tertiary-chromatic) clamp(var(--tertiary-l-min), 80%, 88%) );--color-on-tertiary: hsl(var(--tertiary-chromatic) 20%);--color-tertiary-container: hsl( var(--tertiary-h) calc(var(--tertiary-s) * .55) 30% );--color-on-tertiary-container: hsl(var(--tertiary-chromatic) 90%);--color-surface: hsl(var(--neutral-chromatic) 6%);--color-on-surface: hsl(var(--neutral-chromatic) 90%);--color-surface-container-lowest: hsl(var(--neutral-chromatic) 4%);--color-surface-container-low: hsl(var(--neutral-chromatic) 10%);--color-surface-container: hsl(var(--neutral-chromatic) 12%);--color-surface-container-high: hsl(var(--neutral-chromatic) 17%);--color-surface-container-highest: hsl(var(--neutral-chromatic) 22%);--color-surface-variant: hsl(var(--neutral-chromatic) 90% / 15%);--color-on-surface-variant: hsl( var(--neutral-h) clamp(3%, var(--neutral-vs), 10%) 80% );--color-success: hsl(134 53% 68%);--color-on-success: hsl(145 100% 11%);--color-success-container: hsl(148 100% 16%);--color-on-success-container: hsl(132 83% 79%);--color-error: hsl(6 100% 84%);--color-on-error: hsl(359 93% 20%);--color-error-container: hsl(356 100% 29%);--color-on-error-container: hsl(6 100% 84%);--color-info: hsl(236 100% 87%);--color-on-info: hsl(238 100% 33%);--color-info-container: hsl(236 69% 45%);--color-on-info-container: hsl(240 100% 94%);--color-warning: hsl(20 100% 78%);--color-on-warning: hsl(23 100% 17%);--color-warning-container: hsl(25 100% 24%);--color-on-warning-container: hsl(18 100% 90%)}}}@layer base.tokens{@layer tokens;@layer tokens{:root{--spacing-0: 0;--spacing-2: 2px;--spacing-4: 4px;--spacing-6: 6px;--spacing-8: 8px;--spacing-10: 10px;--spacing-12: 12px;--spacing-14: 14px;--spacing-16: 16px;--spacing-24: 24px;--spacing-32: 32px;--spacing-48: 48px;--spacing-64: 64px;--radius-none: 0px;--radius-xs: 4px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-lg-inc: 20px;--radius-xl: 28px;--radius-xl-inc: 32px;--radius-xxl: 48px;--radius-rounded: calc(1px * infinity);--shadow-lg: 0 0 transparent, 0 0 transparent, 0 0 transparent, 0 2px 4px 0 color-mix(in srgb, var(--color-on-surface) 3.92%, transparent), 0 1px 2px 0 color-mix(in srgb, var(--color-on-surface) 5.88%, transparent), 0 0 1px 0 color-mix(in srgb, var(--color-on-surface) 5.88%, transparent);--shadow-md: 0 4px 48px color-mix(in srgb, var(--color-on-surface) 10%, transparent);--font-family: var(--font-dm-sans), sans-serif;--font-display-lg: 400 57px/64px var(--font-family);--font-display-md: 400 45px/52px var(--font-family);--font-display-sm: 400 36px/44px var(--font-family);--font-headline-lg: 400 32px/40px var(--font-family);--font-headline-md: 400 28px/36px var(--font-family);--font-headline-sm: 400 24px/32px var(--font-family);--font-title-lg: 400 22px/28px var(--font-family);--font-title-md: 500 16px/24px var(--font-family);--font-title-sm: 500 14px/20px var(--font-family);--font-body-lg: 400 16px/24px var(--font-family);--font-body-md: 400 14px/20px var(--font-family);--font-body-sm: 400 12px/16px var(--font-family);--font-label-lg: 400 14px/20px var(--font-family);--font-label-md: 400 12px/16px var(--font-family);--font-label-sm: 500 11px/16px var(--font-family);--transition-expressive-fast-spatial: .35s cubic-bezier(.42, 1.67, .21, .9);--transition-expressive-default-spatial: .5s cubic-bezier(.38, 1.21, .22, 1);--transition-expressive-slow-spatial: .65s cubic-bezier(.39, 1.29, .35, .98);--transition-expressive-fast-effects: .15s cubic-bezier(.31, .94, .34, 1);--transition-expressive-default-effects: .2s cubic-bezier(.34, .8, .34, 1);--transition-expressive-slow-effects: .3s cubic-bezier(.34, .88, .34, 1);--transition-standard-fast-spatial: .35s cubic-bezier(.27, 1.06, .18, 1);--transition-standard-default-spatial: .5s cubic-bezier(.27, 1.06, .18, 1);--transition-standard-slow-spatial: .75s cubic-bezier(.27, 1.06, .18, 1);--transition-standard-fast-effects: .15s cubic-bezier(.31, .94, .34, 1);--transition-standard-default-effects: .2s cubic-bezier(.34, .8, .34, 1);--transition-standard-slow-effects: .3s cubic-bezier(.34, .88, .34, 1)}}}[ui-slot=button]{display:flex;align-items:center;justify-content:center;height:var(--button-size);transition:all var(--transition-standard-default-spatial);border:1px solid;border-radius:var(--radius-rounded);outline:none;box-shadow:0 0 0 3px transparent;font:var(--font-body-md);text-decoration:none;cursor:pointer;&[data-size=lg]{--button-size: 40px;padding-inline:calc(var(--spacing-12) + var(--spacing-2));gap:var(--spacing-12)}&[data-size=md]{--button-size: 36px;padding-inline:var(--spacing-12);gap:var(--spacing-12)}&[data-size=sm]{--button-size: 32px;padding-inline:var(--spacing-10);gap:var(--spacing-10)}&[data-size=xs]{--button-size: 28px;padding-inline:var(--spacing-8);gap:var(--spacing-10)}&[data-mode=filled]{border-color:transparent;background-color:var(--color-button);color:var(--color-on-button);&[data-variant=neutral]{background-color:var(--color-on-surface)}&:hover:not(:disabled,[aria-disabled=true]){background-color:color-mix(in srgb,var(--color-button),black 10%);&[data-variant=neutral]{background-color:color-mix(in srgb,var(--color-on-surface),var(--color-on-button) 10%)}}}&[data-mode=stroke]{border-color:var(--color-button-border);background-color:transparent;color:var(--color-button);&:hover:not(:disabled,[aria-disabled=true]){border-color:transparent;background-color:var(--color-button-container)}}&[data-mode=lighter]{border-color:transparent;background-color:var(--color-button-container);color:var(--color-button);&:hover:not(:disabled,[aria-disabled=true]){border-color:var(--color-button-border);background-color:transparent}}&[data-mode=ghost]{border-color:transparent;background-color:transparent;color:var(--color-button);&:hover:not(:disabled,[aria-disabled=true]){background-color:var(--color-button-container)}}&[data-variant=primary]{--color-button: var(--color-primary);--color-on-button: var(--color-on-primary);--color-button-border: var(--color-primary);--color-button-container: var(--color-primary-container)}&[data-variant=neutral]{--color-button: var(--color-on-surface-variant);--color-on-button: var(--color-surface);--color-button-border: var(--color-surface-variant);--color-button-container: var(--color-surface-container-high)}&[data-variant=error]{--color-button: var(--color-error);--color-on-button: var(--color-on-error);--color-button-border: var(--color-error);--color-button-container: var(--color-error-container)}&[data-as-icon]{width:var(--button-size)}>i{flex-shrink:0;margin-inline:calc(var(--spacing-4) * -1);font-size:20px}&[data-flip-icon-in-rtl]:dir(rtl){>i{rotate:180deg}}&:active{scale:.98}&:focus-visible{box-shadow:0 0 0 3px color-mix(in oklab,var(--color-button) 30%,transparent)}&:disabled,&[data-loading],&[aria-disabled=true]{border-color:transparent;background-color:var(--color-surface-container);color:color-mix(in srgb,var(--color-on-surface) 38%,transparent);pointer-events:none}&[data-loading]{position:relative;overflow:hidden;color:transparent;&:before{content:"";position:absolute;width:16px;height:16px;animation:spin 1s linear infinite;border:1.5px solid color-mix(in srgb,var(--color-on-surface) 38%,transparent);border-radius:var(--radius-rounded);border-inline-end-color:transparent}}}@keyframes spin{to{rotate:360deg}}[ui-slot=link-button]{display:flex;position:relative;align-items:center;justify-content:center;width:fit-content;transition:color var(--transition-standard-default-spatial);color:var(--color-link-button);gap:var(--spacing-4);&:is(a){text-decoration:none}&:is(button){border:none;background-color:transparent}&:before{content:"";position:absolute;width:100%;height:1px;transition:opacity var(--transition-standard-fast-spatial);background-color:currentcolor;inset-block-end:var(--spacing-0)}>i{flex-shrink:0;font-size:20px}&:not([data-underline=true]):before{opacity:0}&[data-size=md]{font:var(--font-body-md)}&[data-size=sm]{font:var(--font-body-sm)}&[data-variant=gray]{--color-link-button: var(--color-on-surface-variant)}&[data-variant=black]{--color-link-button: var(--color-on-surface)}&[data-variant=primary]{--color-link-button: var(--color-primary)}&[data-variant=error]{--color-link-button: var(--color-error)}&:disabled,&[aria-disabled=true]{color:color-mix(in srgb,var(--color-on-surface) 38%,transparent);cursor:auto;pointer-events:none}&:hover:not(:disabled,[aria-disabled=true]){color:color-mix(in srgb,var(--color-link-button),var(--color-on-surface) 30%);&:before{opacity:1}}}[ui-slot=button-group]{display:flex;width:fit-content;overflow:hidden;border-radius:var(--radius-rounded);font:var(--font-body-md);border:1px solid var(--color-surface-variant);&[data-size=sm]{--icon-size: 20px;--item-spacing: var(--spacing-16);height:36px}&[data-size=xs]{--icon-size: 20px;--item-spacing: var(--spacing-14);height:32px}&[data-size=xxs]{--icon-size: 16px;--item-spacing: var(--spacing-12);height:24px;font:var(--font-body-sm)}>[ui-slot=button-group-item]{display:flex;align-items:center;padding-inline:var(--item-spacing);transition:all var(--transition-standard-default-spatial);border:none;background-color:transparent;color:var(--color-on-surface-variant);font:inherit;cursor:pointer;gap:var(--item-spacing);position:relative;&:not(:first-child){&:before{content:"";position:absolute;border-radius:var(--radius-rounded);background-color:color-mix(in srgb,currentcolor 30%,transparent);top:50%;left:-.5px;width:1px;height:var(--spacing-16);transform:translateY(-50%)}}>i{flex-shrink:0;margin-inline:calc(var(--spacing-8) * -1);font-size:var(--icon-size)}&:hover:not(:disabled),&[aria-checked=true]{background-color:var(--color-surface-container-highest);color:var(--color-on-surface)}&:disabled,&[data-loading],&[aria-disabled=true]{border-color:transparent;background-color:var(--color-surface-container);color:color-mix(in srgb,var(--color-on-surface) 38%,transparent);pointer-events:none}}}[ui-slot=switch]{position:relative;width:28px;height:16px;padding:var(--spacing-2);transition:background-color var(--transition-standard-default-spatial);border:1px solid transparent;border-radius:var(--radius-rounded);background-color:var(--color-surface-container-high);cursor:pointer;appearance:none;&:before{content:"";position:absolute;width:4px;height:4px;transition:inset-inline-start var(--transition-expressive-fast-spatial);border:4px solid var(--color-surface);border-radius:var(--radius-rounded);background-color:transparent;box-shadow:0 6px 10px color-mix(in srgb,var(--color-on-surface) 5%,transparent),0 2px 4px color-mix(in srgb,var(--color-on-surface) 5%,transparent);inset-block-start:1px;inset-inline-start:1px}&:checked{background-color:var(--color-primary);&:before{border-color:var(--color-on-primary);inset-inline-start:calc(100% - 13px)!important}}&:disabled{border-color:var(--color-surface-variant);background-color:var(--color-surface);pointer-events:none;&:before{border-width:3px;border-color:var(--color-surface-variant);background-color:var(--color-surface-variant);box-shadow:none;inset-block-start:2px;inset-inline-start:2px}}&:hover:not(:disabled,:checked){background-color:var(--color-surface-container-highest)}}[ui-slot=separator]{--color-separator: var(--color-surface-variant);&[data-variant=line]{&:is(hr){width:100%;height:1px;border:none;background-color:var(--color-separator)}}&[data-variant=solid-text]{&:not(hr){padding:var(--spacing-6) calc(var(--spacing-16) + var(--spacing-4));background-color:var(--color-separator);color:var(--color-on-surface-variant);font:var(--font-label-md);text-transform:uppercase}}&[data-variant=line-text],&[data-variant=content]{&:not(hr){display:flex;align-items:center;color:var(--color-on-surface-variant);font:var(--font-label-sm);white-space:nowrap;gap:var(--spacing-10);&:before,&:after{content:"";display:flex;width:100%;height:1px;background-color:var(--color-separator)}}}}[ui-slot=segmented-control]{--segmented-control-gap: 0px;display:flex;position:relative;justify-content:space-between;padding:var(--spacing-4);border-radius:var(--radius-rounded);background-color:var(--color-surface-container);&:before{content:"";position:absolute;z-index:2;bottom:anchor(bottom);left:anchor(left);width:anchor-size(width);height:anchor-size(height);transition:var(--transition-expressive-default-spatial);border-radius:var(--radius-rounded);background-color:var(--color-surface-container-lowest);position-anchor:--active;box-shadow:var(--shadow-lg)}[ui-slot=segmented-control-trigger]{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;width:100%;height:28px;padding-inline:var(--spacing-16);transition:color var(--transition-standard-default-spatial);color:var(--color-on-surface-variant);font:var(--font-body-md);cursor:pointer;gap:var(--spacing-4);>input[type=radio]{position:absolute;opacity:0;scale:0}>i{flex-shrink:0;font-size:20px}&:has(input[type=radio]:checked){color:var(--color-on-surface);anchor-name:--active}}}[ui-slot=status-badge]{--icon-size: 16px;display:flex;align-items:center;width:fit-content;height:24px;padding-inline:var(--spacing-8);border-radius:var(--radius-rounded);background-color:var(--color-surface);font:var(--font-body-sm);gap:var(--spacing-8);>i{flex-shrink:0;margin-inline:calc(var(--spacing-4) * -1);color:var(--color-status-badge);font-size:var(--icon-size)}>[ui-slot=badge-dot]{display:flex;align-items:center;justify-content:center;width:var(--icon-size);height:var(--icon-size);margin-inline:calc(var(--spacing-4) * -1);&:before{content:"";display:block;width:6px;height:6px;clip-path:circle();background-color:var(--color-status-badge)}}&[data-variant=stroke]{border:1px solid var(--color-surface-variant);color:var(--color-on-surface-variant)}&[data-variant=light]{border:1px solid transparent;background-color:var(--color-status-badge-container);color:var(--color-status-badge)}&[data-status=disabled]{--color-status-badge: var(--color-on-surface-variant);--color-on-status-badge: var(--color-surface-variant);--color-status-badge-container: var(--color-surface-container);--color-on-status-badge-container: var(--color-on-surface)}&[data-status=completed]{--color-status-badge: var(--color-success);--color-on-status-badge: var(--color-on-success);--color-status-badge-container: var(--color-success-container);--color-on-status-badge-container: var(--color-on-success-container)}&[data-status=failed]{--color-status-badge: var(--color-error);--color-on-status-badge: var(--color-on-error);--color-status-badge-container: var(--color-error-container);--color-on-status-badge-container: var(--color-on-error-container)}&[data-status=pending]{--color-status-badge: var(--color-warning);--color-on-status-badge: var(--color-on-warning);--color-status-badge-container: var(--color-warning-container);--color-on-status-badge-container: var(--color-on-warning-container)}}[ui-slot=accordion]{display:flex;flex-direction:column;gap:var(--spacing-24);[ui-slot=accordion-item]{display:flex;position:relative;flex-direction:column;overflow:hidden;transition:background-color var(--transition-standard-default-spatial);border-radius:calc(var(--radius-md) - var(--spacing-2));background-color:var(--color-surface-container-lowest);box-shadow:var(--shadow-lg);[ui-slot=accordion-trigger]{display:flex;align-items:center;padding:var(--spacing-14);font:var(--font-title-md);cursor:pointer;user-select:none;gap:var(--spacing-10);>input[type=checkbox]{overflow:hidden;opacity:0;scale:0}>i{flex-shrink:0;font-size:20px}}[ui-slot=accordion-content]{display:grid;grid-template-rows:0fr;padding-block-end:var(--spacing-0);padding-inline:44px var(--spacing-14);transition:all var(--transition-expressive-default-spatial);color:var(--color-on-surface-variant);font:var(--font-body-md);>*{overflow:hidden}p{text-wrap:pretty}}&:has([ui-slot=accordion-trigger]:hover){background-color:var(--color-surface-container)}&:has(input[type=checkbox]:checked){[ui-slot=accordion-content]{grid-template-rows:1fr;padding-block-end:var(--spacing-14)}}}}[ui-slot=skeleton]{position:relative;overflow:hidden;border-radius:var(--radius-md);background-color:var(--color-surface-container);&:before{content:"";position:absolute;inset:0;transform:translate(-100%);animation:pulse 1s infinite;background:linear-gradient(90deg,transparent,var(--color-surface),transparent)}&[data-radius=circled]{border-radius:var(--radius-rounded)}}@keyframes pulse{to{transform:translate(100%)}}@layer reset{*{box-sizing:border-box;min-width:0;margin:0;padding:0;font-family:var(--font-family)}html{scroll-behavior:smooth}body{display:flex;flex-direction:column;justify-content:space-between;gap:var(--spacing-48);min-height:100vh;background-color:var(--color-surface);color:var(--color-on-surface);font:var(--font-body-md);>main{flex:2;margin-inline:8%;padding:var(--spacing-48);border-block-start:1px solid var(--color-surface-variant);display:flex;flex-direction:column;gap:var(--spacing-48);&:after,&:before{content:"";width:1px;height:100%;position:fixed;inset-block-start:0;background-color:var(--color-surface-variant)}&:before{inset-inline-start:8%}&:after{inset-inline-end:8%}>[ui-slot=separator]{width:calc(100% + var(--spacing-48) * 2)!important;margin-inline-start:calc(var(--spacing-48) * -1)}@media(max-width:769px){margin-inline:var(--spacing-24);padding-inline:var(--spacing-24);&:before{inset-inline-start:var(--spacing-24)}&:after{inset-inline-end:var(--spacing-24)}}}}a{width:fit-content;text-decoration:none}button{border:none;outline:none;cursor:pointer}input{border:none;outline:none}h1,h2,h3,h4{text-wrap:pretty;overflow-wrap:break-word}ul{list-style:none}a{color:inherit;text-decoration:none}p{text-wrap:balance}::selection{background-color:var(--color-primary);color:var(--color-primary-container)}}@layer utilities{[ui-slot=sr]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;border-width:0;white-space:nowrap}[data-theme=dark],:has([name=dark]:checked){.astro-code,.astro-code span{color:var(--shiki-dark)!important}}}[data-astro-cid-thjliw76][ui-layout=header]{z-index:50;position:sticky;inset-block-start:var(--spacing-24);margin-inline:var(--spacing-24);display:flex;align-items:center;justify-content:center;flex-direction:column;.wrapper{width:380px;overflow:hidden;background-color:var(--color-surface-container-lowest);box-shadow:var(--shadow-lg);transition:var(--transition-expressive-default-spatial);&[data-state=closed]{height:52px;padding:var(--spacing-8);border-radius:var(--radius-xl)}&[data-state=open]{height:346px;padding:var(--spacing-12);border-radius:var(--radius-lg)}.main{display:grid;align-items:center;grid-template-columns:1fr auto 1fr;gap:var(--spacing-12);.logo{display:flex;align-items:center;gap:var(--spacing-6);font:var(--font-title-md);color:var(--color-primary);>svg{width:var(--spacing-24);height:var(--spacing-24)}}.menu{position:relative;display:flex;align-items:center;gap:var(--spacing-4);&:after,&:before{content:"";display:flex;width:1px;height:var(--spacing-16);border-radius:var(--radius-rounded);background-color:var(--color-surface-variant)}}.cta{display:flex;justify-content:flex-end;[ui-slot=button]{width:100px}}}.more{display:grid;gap:var(--spacing-12);.portal-links{display:grid;.link{font:var(--font-title-md);border-block-end:1px dashed var(--color-surface-variant);>a{width:100%;display:flex;padding-block:var(--spacing-8);&:hover,&[aria-current=true]{color:var(--color-primary)}}}}.socials{display:flex;align-items:center;justify-content:space-between;.links{display:flex}.copyright{font:var(--font-body-sm);color:var(--color-on-surface-variant)}}}@media(max-width:769px){width:100%}}}[data-astro-cid-rxdvfcuu][ui-layout=footer]{text-align:center;color:var(--color-on-surface-variant);background-color:var(--color-surface-container-lowest);border-block-start:1px solid var(--color-surface-variant);padding:var(--spacing-24);padding-block-end:calc(var(--spacing-48) * 2);.content{display:ruby}}[data-astro-cid-rfvjnoou][ui-misc=fab]{width:fit-content;padding:var(--spacing-8);box-shadow:var(--shadow-lg);border-radius:var(--radius-rounded);background-color:var(--color-surface-container-lowest);z-index:50;position:fixed;left:50%;inset-block-end:var(--spacing-24);transform:translate(-50%);display:flex;align-items:center;gap:var(--spacing-12);input[type=color]{cursor:pointer;clip-path:circle();width:calc(var(--spacing-32) + var(--spacing-4));height:calc(var(--spacing-32) + var(--spacing-4));&::-webkit-color-swatch-wrapper{padding:0}&::-webkit-color-swatch{border:none;outline:none}}.switch{cursor:pointer;user-select:none;display:flex;align-items:center;gap:var(--spacing-8);width:max-content}@media(max-width:769px){[ui-slot=button-group]{display:none}}}