/*!
 * Web Expressive
 * Copyright (c) 2026 Arby (@mobalti)
 * Licensed under the MIT License
 * https://github.com/mobalti/web-expressive
 */
@layer design-system.tokens{@property --ref-typeface-base{syntax:"<string>#";inherits:false;initial-value:"Google Sans Flex"}@property --ref-typeface-brand{syntax:"<string>#";inherits:false;initial-value:"Google Sans Flex"}@property --ref-typeface-plain{syntax:"<string>#";inherits:false;initial-value:"Google Sans Flex"}@property --ref-typeface-emphasized-brand{syntax:"<string>#";inherits:false;initial-value:"Google Sans Flex"}@property --ref-typeface-emphasized-plain{syntax:"<string>#";inherits:false;initial-value:"Google Sans Flex"}@property --ref-typeface-generic{syntax:"serif|sans-serif|system-ui|monospace|cursive|fantasy|math|ui-serif|ui-sans-serif|ui-monospace|ui-rounded";inherits:false;initial-value:sans-serif}@property --ref-typeface-symbols{syntax:"<string>#";inherits:true;initial-value:"Material Symbols Outlined"}@property --size{syntax:"extra-small|small|medium|large|extra-large";inherits:false;initial-value:small}@property --width{syntax:"narrow|normal|wide";inherits:false;initial-value:normal}@property --shape{syntax:"round|square";inherits:false;initial-value:round}:where(html){--sys-shape-corner-none:0px;--sys-shape-corner-extra-small:.25rem;--sys-shape-corner-small:.5rem;--sys-shape-corner-medium:.75rem;--sys-shape-corner-large:1rem;--sys-shape-corner-large-increased:1.25rem;--sys-shape-corner-extra-large:1.75rem;--sys-shape-corner-extra-large-increased:2rem;--sys-shape-corner-extra-extra-large:3rem;--sys-shape-corner-full:9999px;--sys-motion-spring-fast-spatial:cubic-bezier(.42, 1.67, .21, .9);--sys-motion-spring-fast-spatial-duration:.35s;--sys-motion-spring-default-spatial:cubic-bezier(.38, 1.21, .22, 1);--sys-motion-spring-default-spatial-duration:.5s;--sys-motion-spring-slow-spatial:cubic-bezier(.39, 1.29, .35, .98);--sys-motion-spring-slow-spatial-duration:.65s;--sys-motion-spring-fast-effects:cubic-bezier(.31, .94, .34, 1);--sys-motion-spring-fast-effects-duration:.15s;--sys-motion-spring-default-effects:cubic-bezier(.34, .8, .34, 1);--sys-motion-spring-default-effects-duration:.2s;--sys-motion-spring-slow-effects:cubic-bezier(.34, .88, .34, 1);--sys-motion-spring-slow-effects-duration:.3s}:where(html,[data-mode=light],.light-mode){--sys-elevation-level-1:0px 1px 2px #0000004d, 0px 1px 3px 1px #00000026;--sys-elevation-level-2:0px 1px 2px #0000004d, 0px 2px 6px 2px #00000026;--sys-elevation-level-3:0px 4px 8px 3px #00000026, 0px 1px 3px #0000004d;--sys-elevation-level-4:0px 6px 10px 4px #00000026, 0px 2px 3px #0000004d;--sys-elevation-level-5:0px 8px 12px 6px #00000026, 0px 4px 4px #0000004d}:where([data-mode=dark],.dark-mode){--sys-elevation-level-1:0px 1px 3px 1px #00000026, 0px 1px 2px #0000004d;--sys-elevation-level-2:0px 2px 6px 2px #00000026, 0px 1px 2px #0000004d;--sys-elevation-level-3:0px 4px 8px 3px #00000026, 0px 1px 3px #0000004d;--sys-elevation-level-4:0px 6px 10px 4px #00000026, 0px 2px 3px #0000004d;--sys-elevation-level-5:0px 8px 12px 6px #00000026, 0px 4px 4px #0000004d}:where(html){--sys-motion-spring-pop-focus:linear(0 0%, 2.5 25%, 2.5 50%, 1 100%);--sys-measurement-space-0:0rem;--sys-measurement-space-25:.125rem;--sys-measurement-space-50:.25rem;--sys-measurement-space-75:.375rem;--sys-measurement-space-100:.5rem;--sys-measurement-space-125:.625rem;--sys-measurement-space-150:.75rem;--sys-measurement-space-175:.875rem;--sys-measurement-space-200:1rem;--sys-measurement-space-250:1.25rem;--sys-measurement-space-300:1.5rem;--sys-measurement-space-400:2rem;--sys-measurement-space-450:2.25rem;--sys-measurement-space-500:2.5rem;--sys-measurement-space-600:3rem;--sys-measurement-space-700:3.5rem;--sys-measurement-space-800:4rem;--sys-measurement-space-900:4.5rem;--ref-typeface-brand:var(--ref-typeface-base);--ref-typeface-plain:var(--ref-typeface-base);--ref-typeface-emphasized-brand:var(--ref-typeface-brand);--ref-typeface-emphasized-plain:var(--ref-typeface-plain);--sys-typescale-body-large:400 1rem/1.5rem var(--ref-typeface-plain), var(--ref-typeface-generic);--sys-typescale-body-medium:400 .875rem/1.25rem var(--ref-typeface-plain), var(--ref-typeface-generic);--sys-typescale-body-small:400 .75rem/1rem var(--ref-typeface-plain), var(--ref-typeface-generic);--sys-typescale-display-large:400 3.562rem/4rem var(--ref-typeface-brand), var(--ref-typeface-generic);--sys-typescale-display-medium:400 2.812rem/3.25rem var(--ref-typeface-brand), var(--ref-typeface-generic);--sys-typescale-display-small:400 2.25rem/2.75rem var(--ref-typeface-brand), var(--ref-typeface-generic);--sys-typescale-headline-large:400 2rem/2.5rem var(--ref-typeface-brand), var(--ref-typeface-generic);--sys-typescale-headline-medium:400 1.75rem/2.25rem var(--ref-typeface-brand), var(--ref-typeface-generic);--sys-typescale-headline-small:400 1.5rem/2rem var(--ref-typeface-brand), var(--ref-typeface-generic);--sys-typescale-label-large:500 .875rem/1.25rem var(--ref-typeface-plain), var(--ref-typeface-generic);--sys-typescale-label-medium:500 .75rem/1rem var(--ref-typeface-plain), var(--ref-typeface-generic);--sys-typescale-label-small:500 .688rem/1rem var(--ref-typeface-plain), var(--ref-typeface-generic);--sys-typescale-title-large:400 1.375rem/1.75rem var(--ref-typeface-brand), var(--ref-typeface-generic);--sys-typescale-title-medium:500 1rem/1.5rem var(--ref-typeface-plain), var(--ref-typeface-generic);--sys-typescale-title-small:500 .875rem/1.25rem var(--ref-typeface-plain), var(--ref-typeface-generic);--sys-typescale-emphasized-body-large:500 1rem/1.5rem var(--ref-typeface-emphasized-plain), var(--ref-typeface-generic);--sys-typescale-emphasized-body-medium:500 .875rem/1.25rem var(--ref-typeface-emphasized-plain), var(--ref-typeface-generic);--sys-typescale-emphasized-body-small:500 .75rem/1rem var(--ref-typeface-emphasized-plain), var(--ref-typeface-generic);--sys-typescale-emphasized-display-large:500 3.562rem/4rem var(--ref-typeface-emphasized-brand), var(--ref-typeface-generic);--sys-typescale-emphasized-display-medium:500 2.812rem/3.25rem var(--ref-typeface-emphasized-brand), var(--ref-typeface-generic);--sys-typescale-emphasized-display-small:500 2.25rem/2.75rem var(--ref-typeface-emphasized-brand), var(--ref-typeface-generic);--sys-typescale-emphasized-headline-large:500 2rem/2.5rem var(--ref-typeface-emphasized-brand), var(--ref-typeface-generic);--sys-typescale-emphasized-headline-medium:500 1.75rem/2.25rem var(--ref-typeface-emphasized-brand), var(--ref-typeface-generic);--sys-typescale-emphasized-headline-small:500 1.5rem/2rem var(--ref-typeface-emphasized-brand), var(--ref-typeface-generic);--sys-typescale-emphasized-label-large:600 .875rem/1.25rem var(--ref-typeface-emphasized-plain), var(--ref-typeface-generic);--sys-typescale-emphasized-label-medium:600 .75rem/1rem var(--ref-typeface-emphasized-plain), var(--ref-typeface-generic);--sys-typescale-emphasized-label-small:600 .688rem/1rem var(--ref-typeface-emphasized-plain), var(--ref-typeface-generic);--sys-typescale-emphasized-title-large:500 1.375rem/1.75rem var(--ref-typeface-emphasized-brand), var(--ref-typeface-generic);--sys-typescale-emphasized-title-medium:600 1rem/1.5rem var(--ref-typeface-emphasized-plain), var(--ref-typeface-generic);--sys-typescale-emphasized-title-small:600 .875rem/1.25rem var(--ref-typeface-emphasized-plain), var(--ref-typeface-generic)}html,[data-theme=classic-tonal]{--sys-color-primary:light-dark(#495f8b,#b6c6ed);--sys-color-surface-tint:light-dark(#495f8b,#b6c6ed);--sys-color-on-primary:light-dark(#f9f8ff,#304060);--sys-color-primary-container:light-dark(#b0c7f9,#425274);--sys-color-on-primary-container:light-dark(#29406a,#d9e3ff);--sys-color-secondary:light-dark(#575f72,#bec6dc);--sys-color-on-secondary:light-dark(#f9f8ff,#384052);--sys-color-secondary-container:light-dark(#dbe2f9,#333b4d);--sys-color-on-secondary-container:light-dark(#4a5264,#b7bfd5);--sys-color-tertiary:light-dark(#685781,#efdfff);--sys-color-on-tertiary:light-dark(#fef7ff,#5c4c75);--sys-color-tertiary-container:light-dark(#e4ceff,#e4ceff);--sys-color-on-tertiary-container:light-dark(#54436c,#54436c);--sys-color-error:light-dark(#a83836,#fa746f);--sys-color-on-error:light-dark(#fff7f6,#490006);--sys-color-error-container:light-dark(#fa746f,#871f21);--sys-color-on-error-container:light-dark(#6e0a12,#ff9993);--sys-color-background:light-dark(#faf9fe,#0d0e12);--sys-color-on-background:light-dark(#2f323a,#e3e5f0);--sys-color-surface:light-dark(#faf9fe,#0d0e12);--sys-color-on-surface:light-dark(#2f323a,#e3e5f0);--sys-color-surface-variant:light-dark(#e0e2ed,#23262d);--sys-color-on-surface-variant:light-dark(#5c5f68,#a8abb5);--sys-color-outline:light-dark(#787a84,#72757e);--sys-color-outline-variant:light-dark(#afb1bc,#454850);--sys-color-shadow:light-dark(#000,#000);--sys-color-scrim:light-dark(#000,#000);--sys-color-inverse-surface:light-dark(#0d0e12,#faf9fe);--sys-color-inverse-on-surface:light-dark(#9c9ca2,#545559);--sys-color-inverse-primary:light-dark(#b0c7f9,#4f5f81);--sys-color-primary-fixed:light-dark(#b0c7f9,#c7d7ff);--sys-color-on-primary-fixed:light-dark(#122b54,#273857);--sys-color-primary-fixed-dim:light-dark(#a2b9ea,#b9c9f0);--sys-color-on-primary-fixed-variant:light-dark(#324973,#445476);--sys-color-secondary-fixed:light-dark(#dbe2f9,#dbe2f9);--sys-color-on-secondary-fixed:light-dark(#373f51,#373f51);--sys-color-secondary-fixed-dim:light-dark(#ccd4ea,#ccd4ea);--sys-color-on-secondary-fixed-variant:light-dark(#535b6e,#535b6e);--sys-color-tertiary-fixed:light-dark(#e4ceff,#e4ceff);--sys-color-on-tertiary-fixed:light-dark(#403157,#403157);--sys-color-tertiary-fixed-dim:light-dark(#d5c1f1,#d5c1f1);--sys-color-on-tertiary-fixed-variant:light-dark(#5d4d76,#5d4d76);--sys-color-surface-dim:light-dark(#d8d9e4,#0d0e12);--sys-color-surface-bright:light-dark(#faf9fe,#292c34);--sys-color-surface-container-lowest:light-dark(#fff,#000);--sys-color-surface-container-low:light-dark(#f3f3fa,#111318);--sys-color-surface-container:light-dark(#ededf6,#171a1f);--sys-color-surface-container-high:light-dark(#e7e8f1,#1d2026);--sys-color-surface-container-highest:light-dark(#e0e2ed,#23262d)}}@layer design-system{@layer tokens;@layer reset{*,:before,:after{box-sizing:border-box}:where(:not(dialog)){margin:0}:where(html){-webkit-text-size-adjust:none;@media (prefers-reduced-motion:no-preference){scroll-behavior:smooth}}:where(body){-webkit-font-smoothing:antialiased;min-block-size:100svb}}@layer base{html{scrollbar-color:var(--sys-color-outline) transparent;color-scheme:light dark;& ::selection{background:var(--sys-color-secondary-container);color:var(--sys-color-on-secondary-container)}}body{background:var(--sys-color-surface);color:var(--sys-color-on-surface);font:var(--sys-typescale-body-large)}}@layer components,groups;}@layer design-system.components{.button{--_button-corner:calc((var(--_block-size) - var(--_inner-padding) * 2) / 2);--_button-transitions:border-radius var(--sys-motion-spring-fast-spatial-duration) var(--sys-motion-spring-fast-spatial), outline-width var(--sys-motion-spring-fast-spatial-duration) var(--sys-motion-spring-pop-focus);-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;justify-content:center;align-items:center;gap:var(--_gap);cursor:var(--_cursor);isolation:isolate;padding-inline:var(--_padding-inline);inline-size:fit-content;block-size:var(--_block-size);color:var(--_color);font:var(--_font);user-select:none;white-space:nowrap;background:0 0;border:none;outline:none;text-decoration:none;display:inline-flex;position:relative;&:before{z-index:-1;transition:var(--_button-transitions);inset:var(--_inner-padding) 0px;outline:var(--_outline-width) solid var(--sys-color-secondary);outline-offset:2px;box-shadow:var(--_shadow);border:var(--_border);border-radius:var(--_border-radius);background:var(--_background);content:"";position:absolute}&:after{z-index:-1;transition:var(--_button-transitions);inset:var(--_inner-padding) 0px;border-radius:var(--_border-radius);background:var(--_state);content:"";position:absolute}&:not(:disabled){--_background:var(--sys-color-primary);--_border:none;--_border-radius:var(--_button-corner);--_cursor:pointer;--_color:var(--sys-color-on-primary);--_state:transparent;--_shadow:none;--_outline-width:0px;&:hover{--_state:oklch(from var(--_color) l c h / 8%)}&:focus-visible{--_state:oklch(from var(--_color) l c h / 10%);--_outline-width:3px}&:active{--_border-radius:var(--_pressed-button-corner);--_state:oklch(from var(--_color) l c h / 10%)}&.outline{--_background:none;--_border:1px solid var(--sys-color-outline-variant);--_color:var(--sys-color-on-surface-variant)}&.tonal{--_background:var(--sys-color-secondary-container);--_color:var(--sys-color-on-secondary-container)}&.elevated{--_background:var(--sys-color-surface-container-low);--_color:var(--sys-color-primary);--_shadow:var(--sys-elevation-level-1)}&.text{--_background:none;--_color:var(--sys-color-primary)}}&:disabled{--_background:oklch(from var(--sys-color-on-surface) l c h / 10%);--_border:none;--_border-radius:var(--_button-corner);--_cursor:not-allowed;--_color:oklch(from var(--sys-color-on-surface) l c h / 38%);--_state:oklch(from var(--sys-color-on-primary) l c h / 8%);&.outline{--_border:1px solid var(--sys-color-outline-variant)}}& .icon{--_fill:1;font-size:var(--_icon-font-size);line-height:1;font-family:var(--ref-typeface-symbols);font-variation-settings:"FILL" var(--_fill), "wght" 400, "GRAD" 0, "opsz" 24;font-feature-settings:"liga";white-space:nowrap;display:inline-block;&.no-fill{--_fill:0}&:is(img,svg){inline-size:var(--_icon-font-size);block-size:var(--_icon-font-size);display:block}&:is(svg){fill:var(--_color)}&:is(img){object-fit:cover}}}.button{--_block-size:3rem;--_pressed-button-corner:var(--sys-shape-corner-small);--_font:var(--sys-typescale-label-large);--_gap:var(--sys-measurement-space-100);--_icon-font-size:1.25rem;--_inner-padding:var(--sys-measurement-space-50);--_padding-block:var(--sys-measurement-space-125);--_padding-inline:var(--sys-measurement-space-200);&:not(.round){@container style(--shape:square){--_button-corner:var(--sys-shape-corner-medium)}}&.square{--_button-corner:var(--sys-shape-corner-medium)}&:not(.small){@container style(--size:extra-small){--_block-size:3rem;--_pressed-button-corner:var(--sys-shape-corner-small);--_font:var(--sys-typescale-label-large);--_gap:var(--sys-measurement-space-50);--_icon-font-size:1.25rem;--_inner-padding:var(--sys-measurement-space-100);--_padding-block:var(--sys-measurement-space-75);--_padding-inline:var(--sys-measurement-space-150);&:not(.round){@container style(--shape:square){--_button-corner:var(--sys-shape-corner-medium)}}&.square{--_button-corner:var(--sys-shape-corner-medium)}}@container style(--size:medium){--_block-size:3.5rem;--_pressed-button-corner:var(--sys-shape-corner-medium);--_font:var(--sys-typescale-title-medium);--_gap:var(--sys-measurement-space-100);--_icon-font-size:1.5rem;--_inner-padding:var(--sys-measurement-space-0);--_padding-block:var(--sys-measurement-space-200);--_padding-inline:var(--sys-measurement-space-300);&:not(.round){@container style(--shape:square){--_button-corner:var(--sys-shape-corner-large)}}&.square{--_button-corner:var(--sys-shape-corner-large)}}@container style(--size:large){--_block-size:6rem;--_pressed-button-corner:var(--sys-shape-corner-large);--_font:var(--sys-typescale-headline-small);--_gap:var(--sys-measurement-space-150);--_icon-font-size:2rem;--_inner-padding:var(--sys-measurement-space-0);--_padding-block:var(--sys-measurement-space-400);--_padding-inline:var(--sys-measurement-space-600);&:not(.round){@container style(--shape:square){--_button-corner:var(--sys-shape-corner-extra-large)}}&.square{--_button-corner:var(--sys-shape-corner-extra-large)}}@container style(--size:extra-large){--_block-size:8.5rem;--_pressed-button-corner:var(--sys-shape-corner-large);--_font:var(--sys-typescale-headline-large);--_gap:var(--sys-measurement-space-200);--_icon-font-size:2.5rem;--_inner-padding:var(--sys-measurement-space-0);--_padding-block:var(--sys-measurement-space-600);--_padding-inline:var(--sys-measurement-space-800);&:not(.round){@container style(--shape:square){--_button-corner:var(--sys-shape-corner-extra-large)}}&.square{--_button-corner:var(--sys-shape-corner-extra-large)}}&.extra-small{--_block-size:3rem;--_pressed-button-corner:var(--sys-shape-corner-small);--_font:var(--sys-typescale-label-large);--_gap:var(--sys-measurement-space-50);--_icon-font-size:1.25rem;--_inner-padding:var(--sys-measurement-space-100);--_padding-block:var(--sys-measurement-space-75);--_padding-inline:var(--sys-measurement-space-150);&:not(.round){@container style(--shape:square){--_button-corner:var(--sys-shape-corner-medium)}}&.square{--_button-corner:var(--sys-shape-corner-medium)}}&.medium{--_block-size:3.5rem;--_pressed-button-corner:var(--sys-shape-corner-medium);--_font:var(--sys-typescale-title-medium);--_gap:var(--sys-measurement-space-100);--_icon-font-size:1.5rem;--_inner-padding:var(--sys-measurement-space-0);--_padding-block:var(--sys-measurement-space-200);--_padding-inline:var(--sys-measurement-space-300);&:not(.round){@container style(--shape:square){--_button-corner:var(--sys-shape-corner-large)}}&.square{--_button-corner:var(--sys-shape-corner-large)}}&.large{--_block-size:6rem;--_pressed-button-corner:var(--sys-shape-corner-large);--_font:var(--sys-typescale-headline-small);--_gap:var(--sys-measurement-space-150);--_icon-font-size:2rem;--_inner-padding:var(--sys-measurement-space-0);--_padding-block:var(--sys-measurement-space-400);--_padding-inline:var(--sys-measurement-space-600);&:not(.round){@container style(--shape:square){--_button-corner:var(--sys-shape-corner-extra-large)}}&.square{--_button-corner:var(--sys-shape-corner-extra-large)}}&.extra-large{--_block-size:8.5rem;--_pressed-button-corner:var(--sys-shape-corner-large);--_font:var(--sys-typescale-headline-large);--_gap:var(--sys-measurement-space-200);--_icon-font-size:2.5rem;--_inner-padding:var(--sys-measurement-space-0);--_padding-block:var(--sys-measurement-space-600);--_padding-inline:var(--sys-measurement-space-800);&:not(.round){@container style(--shape:square){--_button-corner:var(--sys-shape-corner-extra-large)}}&.square{--_button-corner:var(--sys-shape-corner-extra-large)}}}}.icon-button{--_button-transitions:border-radius var(--sys-motion-spring-fast-spatial-duration) var(--sys-motion-spring-fast-spatial), outline-width var(--sys-motion-spring-fast-spatial-duration) var(--sys-motion-spring-pop-focus);--_button-corner:calc(min((var(--_block-size) - var(--_padding-block) * 2) / 2, (var(--_inline-size) - var(--_padding-inline) * 2) / 2));--_background:var(--sys-color-primary);--_border:none;--_border-radius:var(--_button-corner);--_cursor:pointer;--_color:var(--sys-color-on-primary);--_state:none;--_outline-width:0px;--_shadow:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;cursor:var(--_cursor);isolation:isolate;padding-inline:var(--_padding-inline);padding-block:var(--_padding-block);inline-size:var(--_inline-size);block-size:var(--_block-size);color:var(--_color);font:var(--_font);user-select:none;background:0 0;border:none;outline:none;place-items:center;text-decoration:none;display:inline-grid;position:relative;& .icon{--_fill:1;font-size:var(--_icon-font-size);line-height:1;font-family:var(--ref-typeface-symbols);font-variation-settings:"FILL" var(--_fill), "wght" 400, "GRAD" 0, "opsz" 24;font-feature-settings:"liga";white-space:nowrap;grid-area:1/1;display:inline-block;&.no-fill{--_fill:0}&:is(img,svg){inline-size:var(--_icon-font-size);block-size:var(--_icon-font-size);display:block}&:is(svg){fill:var(--_color)}&:is(img){object-fit:cover}}&:before{z-index:-1;transition:var(--_button-transitions);transition:var(--_button-transitions);outline:var(--_outline-width) solid var(--sys-color-secondary);outline-offset:2px;box-shadow:var(--_shadow);border:var(--_border);border-radius:var(--_border-radius);background:var(--_background);content:"";grid-area:1/1;block-size:100%;inline-size:100%;display:block}&:after{z-index:-1;transition:var(--_button-transitions);border-radius:var(--_border-radius);background:var(--_state);content:"";grid-area:1/1;block-size:100%;inline-size:100%;display:block}&:hover{--_state:oklch(from var(--_color) l c h / 8%)}&:focus-visible{--_state:oklch(from var(--_color) l c h / 10%);--_outline-width:3px}&:active{--_border-radius:var(--_pressed-button-corner);--_state:oklch(from var(--_color) l c h / 10%)}&:disabled{--_background:oklch(from var(--sys-color-on-surface) l c h / 10%);--_border:none;--_border-radius:var(--_button-corner);--_cursor:not-allowed;--_color:oklch(from var(--sys-color-on-surface) l c h / 38%);--_state:none;&.outline{--_border:1px solid var(--sys-color-outline-variant)}}&:not(:disabled){&.tonal{--_background:var(--sys-color-secondary-container);--_color:var(--sys-color-on-secondary-container)}&.outline{--_background:none;--_border:1px solid var(--sys-color-outline-variant);--_color:var(--sys-color-on-surface-variant)}&.standard{--_background:none;--_color:var(--sys-color-on-surface-variant)}}}.icon-button{--_block-size:3rem;--_icon-font-size:1.25rem;--_inline-size:3rem;--_padding-block:var(--sys-measurement-space-50);--_padding-inline:var(--sys-measurement-space-50);--_pressed-button-corner:var(--sys-shape-corner-small);&:not(.normal){@container style(--width:narrow){--_block-size:3rem;--_inline-size:3rem;--_padding-block:var(--sys-measurement-space-50);--_padding-inline:var(--sys-measurement-space-100)}@container style(--width:wide){--_block-size:3rem;--_inline-size:3.25rem;--_padding-block:var(--sys-measurement-space-50);--_padding-inline:var(--sys-measurement-space-0)}}&:not(.round){@container style(--shape:square){--_button-corner:var(--sys-shape-corner-medium)}}&.narrow{--_block-size:3rem;--_inline-size:3rem;--_padding-block:var(--sys-measurement-space-50);--_padding-inline:var(--sys-measurement-space-100)}&.wide{--_block-size:3rem;--_inline-size:3.25rem;--_padding-block:var(--sys-measurement-space-50);--_padding-inline:var(--sys-measurement-space-0)}&.square{--_button-corner:var(--sys-shape-corner-medium)}&:not(.small){@container style(--size:extra-small){--_block-size:3rem;--_inline-size:3rem;--_padding-block:var(--sys-measurement-space-100);--_padding-inline:var(--sys-measurement-space-100);--_icon-font-size:1.25rem;&:not(.normal){@container style(--width:narrow){--_block-size:3rem;--_inline-size:3rem;--_padding-block:var(--sys-measurement-space-100);--_padding-inline:var(--sys-measurement-space-125)}@container style(--width:wide){--_block-size:3rem;--_inline-size:3rem;--_padding-block:var(--sys-measurement-space-100);--_padding-inline:var(--sys-measurement-space-50)}}&:not(.round){@container style(--shape:square){--_button-corner:var(--sys-shape-corner-medium)}}&.narrow{--_block-size:3rem;--_inline-size:3rem;--_padding-block:var(--sys-measurement-space-100);--_padding-inline:var(--sys-measurement-space-125)}&.wide{--_block-size:3rem;--_inline-size:3rem;--_padding-block:var(--sys-measurement-space-100);--_padding-inline:var(--sys-measurement-space-50)}&.square{--_button-corner:var(--sys-shape-corner-medium)}}@container style(--size:medium){--_block-size:3.5rem;--_icon-font-size:1.5rem;--_inline-size:3.5rem;--_padding-block:var(--sys-measurement-space-0);--_padding-inline:var(--sys-measurement-space-0);--_pressed-button-corner:var(--sys-shape-corner-medium);&:not(.normal){@container style(--width:narrow){--_block-size:3.5rem;--_inline-size:3.5rem;--_padding-block:var(--sys-measurement-space-0);--_padding-inline:var(--sys-measurement-space-50)}@container style(--width:wide){--_block-size:3.5rem;--_inline-size:4.5rem;--_padding-block:var(--sys-measurement-space-0);--_padding-inline:var(--sys-measurement-space-0)}}&:not(.round){@container style(--shape:square){--_button-corner:var(--sys-shape-corner-large)}}&.narrow{--_block-size:3.5rem;--_inline-size:3.5rem;--_padding-block:var(--sys-measurement-space-0);--_padding-inline:var(--sys-measurement-space-50)}&.wide{--_block-size:3.5rem;--_inline-size:4.5rem;--_padding-block:var(--sys-measurement-space-0);--_padding-inline:var(--sys-measurement-space-0)}&.square{--_button-corner:var(--sys-shape-corner-large)}}@container style(--size:large){--_block-size:6rem;--_icon-font-size:2rem;--_inline-size:6rem;--_padding-block:var(--sys-measurement-space-0);--_padding-inline:var(--sys-measurement-space-0);--_pressed-button-corner:var(--sys-shape-corner-large);&:not(.normal){@container style(--width:narrow){--_block-size:6rem;--_inline-size:4rem;--_padding-block:var(--sys-measurement-space-0);--_padding-inline:var(--sys-measurement-space-0)}@container style(--width:wide){--_block-size:6rem;--_inline-size:8rem;--_padding-block:var(--sys-measurement-space-0);--_padding-inline:var(--sys-measurement-space-0)}}&:not(.round){@container style(--shape:square){--_button-corner:var(--sys-shape-corner-extra-large)}}&.narrow{--_block-size:6rem;--_inline-size:4rem;--_padding-block:var(--sys-measurement-space-0);--_padding-inline:var(--sys-measurement-space-0)}&.wide{--_block-size:6rem;--_inline-size:8rem;--_padding-block:var(--sys-measurement-space-0);--_padding-inline:var(--sys-measurement-space-0)}&.square{--_button-corner:var(--sys-shape-corner-extra-large)}}@container style(--size:extra-large){--_block-size:8.5rem;--_icon-font-size:2.5rem;--_inline-size:8.5rem;--_padding-block:var(--sys-measurement-space-0);--_padding-inline:var(--sys-measurement-space-0);--_pressed-button-corner:var(--sys-shape-corner-large);&:not(.normal){@container style(--width:narrow){--_block-size:8.5rem;--_inline-size:6.5rem;--_padding-block:var(--sys-measurement-space-0);--_padding-inline:var(--sys-measurement-space-0)}@container style(--width:wide){--_block-size:8.5rem;--_inline-size:11.5rem;--_padding-block:var(--sys-measurement-space-0);--_padding-inline:var(--sys-measurement-space-0)}}&:not(.round){@container style(--shape:square){--_button-corner:var(--sys-shape-corner-extra-large)}}&.narrow{--_block-size:8.5rem;--_inline-size:6.5rem;--_padding-block:var(--sys-measurement-space-0);--_padding-inline:var(--sys-measurement-space-0)}&.wide{--_block-size:8.5rem;--_inline-size:11.5rem;--_padding-block:var(--sys-measurement-space-0);--_padding-inline:var(--sys-measurement-space-0)}&.square{--_button-corner:var(--sys-shape-corner-extra-large)}}&.extra-small{--_block-size:3rem;--_inline-size:3rem;--_padding-block:var(--sys-measurement-space-100);--_padding-inline:var(--sys-measurement-space-100);--_icon-font-size:1.25rem;&:not(.normal){@container style(--width:narrow){--_block-size:3rem;--_inline-size:3rem;--_padding-block:var(--sys-measurement-space-100);--_padding-inline:var(--sys-measurement-space-125)}@container style(--width:wide){--_block-size:3rem;--_inline-size:3rem;--_padding-block:var(--sys-measurement-space-100);--_padding-inline:var(--sys-measurement-space-50)}}&:not(.round){@container style(--shape:square){--_button-corner:var(--sys-shape-corner-medium)}}&.narrow{--_block-size:3rem;--_inline-size:3rem;--_padding-block:var(--sys-measurement-space-100);--_padding-inline:var(--sys-measurement-space-125)}&.wide{--_block-size:3rem;--_inline-size:3rem;--_padding-block:var(--sys-measurement-space-100);--_padding-inline:var(--sys-measurement-space-50)}&.square{--_button-corner:var(--sys-shape-corner-medium)}}&.medium{--_block-size:3.5rem;--_icon-font-size:1.5rem;--_inline-size:3.5rem;--_padding-block:var(--sys-measurement-space-0);--_padding-inline:var(--sys-measurement-space-0);--_pressed-button-corner:var(--sys-shape-corner-medium);&:not(.normal){@container style(--width:narrow){--_block-size:3.5rem;--_inline-size:3.5rem;--_padding-block:var(--sys-measurement-space-0);--_padding-inline:var(--sys-measurement-space-50)}@container style(--width:wide){--_block-size:3.5rem;--_inline-size:4.5rem;--_padding-block:var(--sys-measurement-space-0);--_padding-inline:var(--sys-measurement-space-0)}}&:not(.round){@container style(--shape:square){--_button-corner:var(--sys-shape-corner-large)}}&.narrow{--_block-size:3.5rem;--_inline-size:3.5rem;--_padding-block:var(--sys-measurement-space-0);--_padding-inline:var(--sys-measurement-space-50)}&.wide{--_block-size:3.5rem;--_inline-size:4.5rem;--_padding-block:var(--sys-measurement-space-0);--_padding-inline:var(--sys-measurement-space-0)}&.square{--_button-corner:var(--sys-shape-corner-large)}}&.large{--_block-size:6rem;--_icon-font-size:2rem;--_inline-size:6rem;--_padding-block:var(--sys-measurement-space-0);--_padding-inline:var(--sys-measurement-space-0);--_pressed-button-corner:var(--sys-shape-corner-large);&:not(.normal){@container style(--width:narrow){--_block-size:6rem;--_inline-size:4rem;--_padding-block:var(--sys-measurement-space-0);--_padding-inline:var(--sys-measurement-space-0)}@container style(--width:wide){--_block-size:6rem;--_inline-size:8rem;--_padding-block:var(--sys-measurement-space-0);--_padding-inline:var(--sys-measurement-space-0)}}&:not(.round){@container style(--shape:square){--_button-corner:var(--sys-shape-corner-extra-large)}}&.narrow{--_block-size:6rem;--_inline-size:4rem;--_padding-block:var(--sys-measurement-space-0);--_padding-inline:var(--sys-measurement-space-0)}&.wide{--_block-size:6rem;--_inline-size:8rem;--_padding-block:var(--sys-measurement-space-0);--_padding-inline:var(--sys-measurement-space-0)}&.square{--_button-corner:var(--sys-shape-corner-extra-large)}}&.extra-large{--_block-size:8.5rem;--_icon-font-size:2.5rem;--_inline-size:8.5rem;--_padding-block:var(--sys-measurement-space-0);--_padding-inline:var(--sys-measurement-space-0);--_pressed-button-corner:var(--sys-shape-corner-large);&:not(.normal){@container style(--width:narrow){--_block-size:8.5rem;--_inline-size:6.5rem;--_padding-block:var(--sys-measurement-space-0);--_padding-inline:var(--sys-measurement-space-0)}@container style(--width:wide){--_block-size:8.5rem;--_inline-size:11.5rem;--_padding-block:var(--sys-measurement-space-0);--_padding-inline:var(--sys-measurement-space-0)}}&:not(.round){@container style(--shape:square){--_button-corner:var(--sys-shape-corner-extra-large)}}&.narrow{--_block-size:8.5rem;--_inline-size:6.5rem;--_padding-block:var(--sys-measurement-space-0);--_padding-inline:var(--sys-measurement-space-0)}&.wide{--_block-size:8.5rem;--_inline-size:11.5rem;--_padding-block:var(--sys-measurement-space-0);--_padding-inline:var(--sys-measurement-space-0)}&.square{--_button-corner:var(--sys-shape-corner-extra-large)}}}}}@property --auto-flow-items{syntax:"row|column";inherits:true;initial-value:row}.astro-code,.astro-code span{background-color:var(--sys-color-surface-container)!important}@layer layout{html{--comp-visual-corner-shape:var(--sys-shape-corner-large);--max-container-inline-size:944px}[data-mode=light]{color-scheme:light}[data-mode=dark]{color-scheme:dark}body{display:grid;@media (width>=840px){grid-template-columns:min-content 1fr}}.app-content{grid-template-rows:1fr min-content;display:grid}@scope(.nav){:scope{padding:var(--sys-measurement-space-300) var(--sys-measurement-space-200);gap:var(--sys-measurement-space-50);z-index:1000;place-content:space-between;align-items:center;display:grid;position:sticky;inset-block-start:0;@media (width<840px){background:var(--sys-color-surface);grid-template-columns:repeat(2,min-content);justify-content:space-between}@media (width>=840px){background:var(--sys-color-surface-container-low);place-items:start normal;gap:var(--sys-measurement-space-100);block-size:100lvb;min-inline-size:200px}}.headline{font:var(--sys-typescale-body-medium)}.user{gap:var(--sys-measurement-space-100);color:var(--sys-color-on-surface);white-space:nowrap;grid-template-columns:min-content 1fr;align-items:center;text-decoration:none;display:grid;&:hover{text-decoration:underline}}.avatar{border-radius:var(--sys-shape-corner-large);border:1px solid var(--sys-color-outline-variant);block-size:2rem;inline-size:2rem;overflow:clip}.img{object-fit:cover;block-size:100%;inline-size:100%;display:block}.trailing-elements{gap:var(--sys-measurement-space-50);display:grid;@media (width<840px){grid-auto-flow:column}@media (width>=840px){gap:var(--sys-measurement-space-100);--width:wide;--size:medium}}}@scope(.footer){:scope{border-block-start:1px solid var(--sys-color-surface-variant);place-items:center;display:grid}.footer-nav{inline-size:min(100%, var(--max-container-inline-size));padding:var(--sys-measurement-space-200);gap:var(--sys-measurement-space-400);padding-block:var(--sys-measurement-space-700);display:grid;@media (width>=600px){grid-template-columns:min-content 1fr;grid-auto-flow:column;align-items:center}}.footer-heading{font:var(--sys-typescale-emphasized-title-large)}.social-list{padding:var(--sys-measurement-space-0);gap:var(--sys-measurement-space-300);flex-wrap:wrap;justify-content:start;list-style:none;display:flex}.social-link{font:var(--sys-typescale-emphasized-body-large);color:var(--sys-color-primary)}}}