/* WebTintKit 0.1.6. Generated; do not edit. */
@layer wtk.tokens, wtk.base, wtk.chrome, wtk.content;
@layer wtk.tokens {
  :root {
    --wtk-color-page-bg: #ffffff;
    --wtk-color-page-text: rgba(0, 0, 0, 0.76);
    --wtk-color-page-title: rgba(0, 0, 0, 0.92);
    --wtk-color-page-muted: rgba(0, 0, 0, 0.6);
    --wtk-color-page-tertiary: rgba(0, 0, 0, 0.4);
    --wtk-color-page-quaternary: rgba(0, 0, 0, 0.2);
    --wtk-color-page-rule: rgba(0, 0, 0, 0.12);
    --wtk-color-page-code-bg: rgba(0, 0, 0, 0.055);
    --wtk-color-glass-background: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.46)), linear-gradient(135deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.02));
    --wtk-color-glass-border: rgba(255, 255, 255, 0.1);
    --wtk-color-glass-shadow-outer: rgba(0, 0, 0, 0.08);
    --wtk-color-glass-shadow-inner: rgba(0, 0, 0, 0.04);
    --wtk-color-glass-highlight: rgba(255, 255, 255, 0.72);
    --wtk-color-glass-solid: #fafafa;
    --wtk-color-glass-topbar-background: rgba(255, 255, 255, 0.72);
    --wtk-color-glass-topbar-shadow: rgba(0, 0, 0, 0.08);
    --wtk-color-glass-topbar-highlight: rgba(255, 255, 255, 0.86);
    --wtk-color-glass-segmented-bg: rgba(0, 0, 0, 0.06);
    --wtk-color-glass-swatch-border: rgba(0, 0, 0, 0.12);
    --wtk-color-contents-active-bg: rgba(0, 0, 0, 0.04);
    --wtk-color-contents-active-border: rgba(0, 0, 0, 0.08);
    --wtk-font-serif: -apple-system-ui-serif, "ui-serif", Gelasio, Georgia, Cambria, "Times New Roman", Times, serif;
    --wtk-font-rounded: "ui-rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "sans-serif";
    --wtk-font-mono: "ui-monospace", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    --wtk-type-body: clamp(1.6rem, 1.5rem + 0.5vw, 1.8rem);
    --wtk-type-h1: clamp(3rem, 2.3rem + 3.5vw, 4.4rem);
    --wtk-type-h2: clamp(2.4rem, 2.1rem + 1.5vw, 3rem);
    --wtk-type-h3: clamp(2rem, 1.8rem + 1vw, 2.4rem);
    --wtk-type-card-title: clamp(2rem, 1.8rem + 1vw, 2.4rem);
    --wtk-type-card-excerpt: clamp(1.5rem, 1.45rem + 0.25vw, 1.6rem);
    --wtk-type-nav-link: 1.4rem;
    --wtk-type-app-nav: 1.536rem;
    --wtk-type-app-name: 1.9rem;
    --wtk-type-line-height: 1.6;
    --wtk-type-line-height-nav: 1.4;
    --wtk-type-brand: 1.9rem;
    --wtk-type-brand-compact: 1.6rem;
    --wtk-type-control: 1.35rem;
    --wtk-type-footer: 1.35rem;
    --wtk-type-note: 1.3rem;
    --wtk-type-app-nav-compact: 1.44rem;
    --wtk-type-app-nav-phone: 1.376rem;
    --wtk-type-app-name-compact: 1.6rem;
    --wtk-type-weight-brand: 740;
    --wtk-type-weight-nav: 640;
    --wtk-type-weight-link: 600;
    --wtk-type-weight-control: 680;
    --wtk-type-weight-credit: 550;
    --wtk-layout-content-width: 90rem;
    --wtk-layout-nav-width: 117rem;
    --wtk-layout-contents-width: 24.6rem;
    --wtk-layout-settings-panel-width: 29.4rem;
    --wtk-layout-gear-edge-gap: 1.4rem;
    --wtk-layout-gear-nav-gap: 0.8rem;
    --wtk-layout-topbar-bleed: 2px;
    --wtk-layout-desktop-content-gap: 1.25em;
    --wtk-layout-footer-gap: 1.25em;
    --wtk-layout-desktop-topbar-top: 1.25em;
    --wtk-layout-desktop-topbar-height: 6.4rem;
    --wtk-layout-mobile-page-gap: 1em;
    --wtk-layout-mobile-topbar-top: 1em;
    --wtk-layout-mobile-topbar-height: 4.8rem;
    --wtk-layout-mobile-contents-max-height: 60vh;
    --wtk-layout-app-header-height: 6.4rem;
    --wtk-layout-app-desktop-gutter: clamp(2rem, 1.875rem + 0.625vw, 2.25rem);
    --wtk-layout-app-mobile-gutter: clamp(1.6rem, 1.5rem + 0.5vw, 1.8rem);
    --wtk-layout-app-icon: 4.4rem;
    --wtk-layout-breakpoint-tablet: 48em;
    --wtk-layout-breakpoint-phone: 28.75em;
    --wtk-layout-breakpoint-wide: 62em;
    --wtk-layout-row-min-height: 4.8rem;
    --wtk-layout-ios-content-padding: 20px;
    --wtk-layout-ios-scaffold-max-width: 720px;
    --wtk-layout-ios-onboarding-max-width: 640px;
    --wtk-layout-ios-row-min-height: 48px;
    --wtk-layout-app-icon-compact: 4rem;
    --wtk-layout-panel-margin: 1.6rem;
    --wtk-layout-panel-gap: 2rem;
    --wtk-safe-area-top: env(safe-area-inset-top);
    --wtk-safe-area-right: env(safe-area-inset-right);
    --wtk-safe-area-bottom: env(safe-area-inset-bottom);
    --wtk-safe-area-left: env(safe-area-inset-left);
    --wtk-radius-card: 1.4rem;
    --wtk-radius-topbar: 1.6rem;
    --wtk-radius-panel: 1.4rem;
    --wtk-radius-app-header: 1.8rem;
    --wtk-radius-input: 1rem;
    --wtk-radius-pill: 999px;
    --wtk-radius-ios-card: 26px;
    --wtk-radius-ios-onboarding: 28px;
    --wtk-radius-ios-input: 10px;
    --wtk-radius-segmented: 1.2rem;
    --wtk-radius-segmented-item: 0.9rem;
    --wtk-shape-corner: squircle;
    --wtk-glass-filter-card: blur(26px) saturate(160%);
    --wtk-glass-filter-topbar: blur(22px) saturate(140%);
    --wtk-glass-shadow-card: 0 0 42px var(--wtk-color-glass-shadow-outer), 0 0 18px var(--wtk-color-glass-shadow-inner), inset 0 0 0 var(--wtk-color-glass-highlight);
    --wtk-glass-shadow-topbar: 0 0 16px var(--wtk-color-glass-topbar-shadow), 0 0 18px var(--wtk-color-glass-shadow-inner), inset 0 0 0 var(--wtk-color-glass-topbar-highlight);
    --wtk-glass-shadow-panel: 0 0 16px var(--wtk-color-glass-topbar-shadow), 0 16px 34px rgba(0, 0, 0, 0.12), inset 0 0 0 var(--wtk-color-glass-topbar-highlight);
    --wtk-shadow-swatch: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.1);
    --wtk-shadow-app-icon: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
    --wtk-motion-accent: 160ms;
    --wtk-motion-surface: 260ms;
    --wtk-motion-panel: 180ms;
    --wtk-motion-hover-close-delay: 300ms;
    --wtk-motion-preview-delay: 120ms;
    --wtk-motion-scheme-transition: 260ms;
    --wtk-motion-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
    --wtk-motion-ease-emphasised: cubic-bezier(0.2, 0.8, 0.2, 1);
    --wtk-motion-ios-snappy: .snappy(duration: 0.32, extraBounce: 0.02);
    --wtk-motion-ios-entrance: .snappy(duration: 0.7);
    --wtk-motion-ios-spring: .spring(response: 0.3, dampingFraction: 0.84);
    --wtk-motion-ios-smooth: .smooth(duration: 0.4);
    --wtk-motion-control: 180ms;
    --wtk-motion-credit: 200ms;
    --wtk-motion-panel-translate: -0.6rem;
    --wtk-space-1: 0.2rem;
    --wtk-space-2: 0.4rem;
    --wtk-space-3: 0.6rem;
    --wtk-space-4: 0.8rem;
    --wtk-space-5: 1rem;
    --wtk-space-6: 1.2rem;
    --wtk-space-7: 1.4rem;
    --wtk-space-8: 1.6rem;
    --wtk-space-9: 2rem;
    --wtk-space-10: 2.4rem;
    --wtk-space-11: 3.2rem;
    --wtk-space-12: 4.8rem;
    --wtk-space-text-xs: 0.35em;
    --wtk-space-text-sm: 0.6em;
    --wtk-space-text-md: 1em;
    --wtk-size-control: 3.6rem;
    --wtk-size-control-compact: 3.2rem;
    --wtk-size-control-row: 3.4rem;
    --wtk-size-icon: 1.9rem;
    --wtk-size-icon-sm: 1.8rem;
    --wtk-size-swatch: 2.1rem;
    --wtk-size-hairline: 1px;
    --wtk-size-focus-ring: 2px;
    --wtk-size-underline: 0.06em;
    --wtk-size-underline-offset: 0.14em;
    --wtk-color-tint-pink: rgb(255 48 74);
    --wtk-color-tint-pink-rgb: 255, 48, 74;
    --wtk-color-tint-grey: rgb(0 0 0);
    --wtk-color-tint-grey-rgb: 0, 0, 0;
    --wtk-color-tint-red: rgb(255 0 13);
    --wtk-color-tint-red-rgb: 255, 0, 13;
    --wtk-color-tint-green: rgb(42 209 84);
    --wtk-color-tint-green-rgb: 42, 209, 84;
    --wtk-color-tint-blue: rgb(0 73 255);
    --wtk-color-tint-blue-rgb: 0, 73, 255;
    --wtk-color-tint-orange: rgb(255 94 0);
    --wtk-color-tint-orange-rgb: 255, 94, 0;
    --wtk-color-tint-purple: rgb(191 0 255);
    --wtk-color-tint-purple-rgb: 191, 0, 255;
    --wtk-color-tint-yellow: rgb(253 184 39);
    --wtk-color-tint-yellow-rgb: 253, 184, 39;
    --wtk-color-accent: var(--wtk-color-tint-pink);
    --wtk-color-accent-rgb: var(--wtk-color-tint-pink-rgb);
    --wtk-color-control: color-mix(in srgb, var(--wtk-color-accent) 58%, #000);
    --wtk-color-link-dark: color-mix(in srgb, var(--wtk-color-accent) 55%, #fff);
    --wtk-color-settings-active-bg: color-mix(in srgb, var(--wtk-color-accent) 10%, transparent);
    --wtk-color-settings-active-border: color-mix(in srgb, var(--wtk-color-accent) 32%, transparent);
    --wtk-color-link: var(--wtk-color-control);
    --wtk-color-focus-ring: var(--wtk-color-control);
    --wtk-color-on-control: #fff;
  }
  :root[data-blog-tint="pink"] {
    --wtk-color-accent: var(--wtk-color-tint-pink);
    --wtk-color-accent-rgb: var(--wtk-color-tint-pink-rgb);
  }
  :root[data-blog-tint="grey"] {
    --wtk-color-accent: var(--wtk-color-tint-grey);
    --wtk-color-accent-rgb: var(--wtk-color-tint-grey-rgb);
  }
  :root[data-blog-tint="red"] {
    --wtk-color-accent: var(--wtk-color-tint-red);
    --wtk-color-accent-rgb: var(--wtk-color-tint-red-rgb);
  }
  :root[data-blog-tint="green"] {
    --wtk-color-accent: var(--wtk-color-tint-green);
    --wtk-color-accent-rgb: var(--wtk-color-tint-green-rgb);
  }
  :root[data-blog-tint="blue"] {
    --wtk-color-accent: var(--wtk-color-tint-blue);
    --wtk-color-accent-rgb: var(--wtk-color-tint-blue-rgb);
  }
  :root[data-blog-tint="orange"] {
    --wtk-color-accent: var(--wtk-color-tint-orange);
    --wtk-color-accent-rgb: var(--wtk-color-tint-orange-rgb);
  }
  :root[data-blog-tint="purple"] {
    --wtk-color-accent: var(--wtk-color-tint-purple);
    --wtk-color-accent-rgb: var(--wtk-color-tint-purple-rgb);
  }
  :root[data-blog-tint="yellow"] {
    --wtk-color-accent: var(--wtk-color-tint-yellow);
    --wtk-color-accent-rgb: var(--wtk-color-tint-yellow-rgb);
  }
  :root[data-blog-tint="grey"] {
    --wtk-color-control: var(--wtk-color-tint-grey);
    --wtk-color-on-control: var(--wtk-color-page-bg);
    --wtk-color-link: var(--wtk-color-page-title);
    --wtk-color-focus-ring: var(--wtk-color-page-title);
  }
  :root[data-wtk-brand="shared"] {
    --wtk-color-page-title: rgba(0, 0, 0, 0.90);
    --wtk-color-page-muted: rgba(0, 0, 0, 0.58);
    --wtk-layout-contents-width: 27rem;
  }
  :root[data-blog-resolved-scheme="dark"] {
    --wtk-color-page-bg: #222628;
    --wtk-color-page-text: rgba(255, 255, 255, 0.85);
    --wtk-color-page-title: rgba(255, 255, 255, 0.95);
    --wtk-color-page-muted: rgba(255, 255, 255, 0.7);
    --wtk-color-page-tertiary: rgba(255, 255, 255, 0.45);
    --wtk-color-page-quaternary: rgba(255, 255, 255, 0.2);
    --wtk-color-page-rule: rgba(255, 255, 255, 0.14);
    --wtk-color-page-code-bg: rgba(255, 255, 255, 0.08);
    --wtk-color-glass-background: rgba(0, 0, 0, 0.28);
    --wtk-color-glass-border: rgba(255, 255, 255, 0.06);
    --wtk-color-glass-shadow-outer: rgba(0, 0, 0, 0.18);
    --wtk-color-glass-shadow-inner: rgba(0, 0, 0, 0.08);
    --wtk-color-glass-highlight: rgba(255, 255, 255, 0.06);
    --wtk-color-glass-solid: rgb(34, 38, 40);
    --wtk-color-glass-topbar-background: rgba(0, 0, 0, 0.28);
    --wtk-color-glass-topbar-shadow: rgba(0, 0, 0, 0.18);
    --wtk-color-glass-topbar-highlight: rgba(255, 255, 255, 0.06);
    --wtk-color-glass-segmented-bg: rgba(0, 0, 0, 0.12);
    --wtk-color-glass-swatch-border: rgba(255, 255, 255, 0.18);
    --wtk-color-contents-active-bg: rgba(255, 255, 255, 0.06);
    --wtk-color-contents-active-border: rgba(255, 255, 255, 0.08);
    --wtk-color-tint-grey: rgb(255 255 255);
    --wtk-color-tint-grey-rgb: 255, 255, 255;
    --wtk-color-link: var(--wtk-color-link-dark);
    --wtk-color-focus-ring: var(--wtk-color-link-dark);
  }
  :root[data-blog-resolved-scheme="dark"][data-wtk-brand="shared"] {
    --wtk-color-page-text: rgba(255, 255, 255, 0.72);
    --wtk-color-page-title: rgba(255, 255, 255, 0.94);
    --wtk-color-page-muted: rgba(255, 255, 255, 0.54);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-blog-resolved-scheme="light"]) {
      --wtk-color-page-bg: #222628;
      --wtk-color-page-text: rgba(255, 255, 255, 0.85);
      --wtk-color-page-title: rgba(255, 255, 255, 0.95);
      --wtk-color-page-muted: rgba(255, 255, 255, 0.7);
      --wtk-color-page-tertiary: rgba(255, 255, 255, 0.45);
      --wtk-color-page-quaternary: rgba(255, 255, 255, 0.2);
      --wtk-color-page-rule: rgba(255, 255, 255, 0.14);
      --wtk-color-page-code-bg: rgba(255, 255, 255, 0.08);
      --wtk-color-glass-background: rgba(0, 0, 0, 0.28);
      --wtk-color-glass-border: rgba(255, 255, 255, 0.06);
      --wtk-color-glass-shadow-outer: rgba(0, 0, 0, 0.18);
      --wtk-color-glass-shadow-inner: rgba(0, 0, 0, 0.08);
      --wtk-color-glass-highlight: rgba(255, 255, 255, 0.06);
      --wtk-color-glass-solid: rgb(34, 38, 40);
      --wtk-color-glass-topbar-background: rgba(0, 0, 0, 0.28);
      --wtk-color-glass-topbar-shadow: rgba(0, 0, 0, 0.18);
      --wtk-color-glass-topbar-highlight: rgba(255, 255, 255, 0.06);
      --wtk-color-glass-segmented-bg: rgba(0, 0, 0, 0.12);
      --wtk-color-glass-swatch-border: rgba(255, 255, 255, 0.18);
      --wtk-color-contents-active-bg: rgba(255, 255, 255, 0.06);
      --wtk-color-contents-active-border: rgba(255, 255, 255, 0.08);
      --wtk-color-tint-grey: rgb(255 255 255);
      --wtk-color-tint-grey-rgb: 255, 255, 255;
      --wtk-color-link: var(--wtk-color-link-dark);
      --wtk-color-focus-ring: var(--wtk-color-link-dark);
    }
    :root:not([data-blog-resolved-scheme="light"])[data-wtk-brand="shared"] {
      --wtk-color-page-text: rgba(255, 255, 255, 0.72);
      --wtk-color-page-title: rgba(255, 255, 255, 0.94);
      --wtk-color-page-muted: rgba(255, 255, 255, 0.54);
    }
  }
  @supports (color: color(display-p3 1 0 0)) {
    :root {
      --wtk-color-tint-pink: color(display-p3 1 0.18823529 0.29019608);
      --wtk-color-tint-red: color(display-p3 1 0 0.05098039);
      --wtk-color-tint-green: color(display-p3 0.16470588 0.81960784 0.32941176);
      --wtk-color-tint-blue: color(display-p3 0 0.28627451 1);
      --wtk-color-tint-orange: color(display-p3 1 0.36862745 0);
      --wtk-color-tint-purple: color(display-p3 0.74901961 0 1);
      --wtk-color-tint-yellow: color(display-p3 0.99215686 0.72156863 0.15294118);
    }
    @media (prefers-color-scheme: dark) {
    }
  }
  :root {
    --font-serif: var(--wtk-font-serif);
    --font-monospace: var(--wtk-font-mono);
    --page-bg: var(--wtk-color-page-bg);
    --page-text: var(--wtk-color-page-text);
    --title-text: var(--wtk-color-page-title);
    --muted-text: var(--wtk-color-page-muted);
    --tertiary-text: var(--wtk-color-page-tertiary);
    --quaternary-text: var(--wtk-color-page-quaternary);
    --rule: var(--wtk-color-page-rule);
    --code-bg: var(--wtk-color-page-code-bg);
    --glass-background: var(--wtk-color-glass-background);
    --glass-border: var(--wtk-color-glass-border);
    --glass-shadow-outer: var(--wtk-color-glass-shadow-outer);
    --glass-shadow-inner: var(--wtk-color-glass-shadow-inner);
    --glass-highlight: var(--wtk-color-glass-highlight);
    --glass-mobile-solid-background: var(--wtk-color-glass-solid);
    --topbar-background: var(--wtk-color-glass-topbar-background);
    --topbar-shadow: var(--wtk-color-glass-topbar-shadow);
    --toc-active-bg: var(--wtk-color-contents-active-bg);
    --toc-active-border: var(--wtk-color-contents-active-border);
    --settings-active-bg: var(--wtk-color-settings-active-bg);
    --settings-active-border: var(--wtk-color-settings-active-border);
    --settings-panel-width: var(--wtk-layout-settings-panel-width);
    --gear-edge-gap: var(--wtk-layout-gear-edge-gap);
    --gear-nav-gap: var(--wtk-layout-gear-nav-gap);
    --topbar-bleed: var(--wtk-layout-topbar-bleed);
    --content-width: var(--wtk-layout-content-width);
    --nav-width: var(--wtk-layout-nav-width);
    --toc-width: var(--wtk-layout-contents-width);
    --desktop-content-gap: var(--wtk-layout-desktop-content-gap);
    --footer-gap: var(--wtk-layout-footer-gap);
    --desktop-topbar-top: var(--wtk-layout-desktop-topbar-top);
    --desktop-topbar-height: var(--wtk-layout-desktop-topbar-height);
    --mobile-page-gap: var(--wtk-layout-mobile-page-gap);
    --mobile-topbar-top: var(--wtk-layout-mobile-topbar-top);
    --mobile-topbar-height: var(--wtk-layout-mobile-topbar-height);
    --mobile-toc-max-height: var(--wtk-layout-mobile-contents-max-height);
    --text-body: var(--wtk-type-body);
    --text-h1: var(--wtk-type-h1);
    --text-h2: var(--wtk-type-h2);
    --text-h3: var(--wtk-type-h3);
    --text-card-title: var(--wtk-type-card-title);
    --text-card-excerpt: var(--wtk-type-card-excerpt);
    --accent-color: var(--wtk-color-accent);
    --accent: var(--wtk-color-accent);
    --accent-strong: var(--wtk-color-accent);
    --accent-rgb: var(--wtk-color-accent-rgb);
    --focus-ring: var(--wtk-color-focus-ring);
    --tint-pink-rgb: var(--wtk-color-tint-pink-rgb);
    --tint-grey-rgb: var(--wtk-color-tint-grey-rgb);
    --tint-red-rgb: var(--wtk-color-tint-red-rgb);
    --tint-green-rgb: var(--wtk-color-tint-green-rgb);
    --tint-blue-rgb: var(--wtk-color-tint-blue-rgb);
    --tint-orange-rgb: var(--wtk-color-tint-orange-rgb);
    --tint-purple-rgb: var(--wtk-color-tint-purple-rgb);
    --tint-yellow-rgb: var(--wtk-color-tint-yellow-rgb);
  }
}
@layer wtk.tokens;

@layer wtk.base {
  @font-face {
    font-family: Gelasio;
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url("/assets/wtk/0.1.7/fonts/gelasio/gelasio-latin-400-normal.woff2") format("woff2");
    unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  @font-face {
    font-family: Gelasio;
    font-style: italic;
    font-display: swap;
    font-weight: 400;
    src: url("/assets/wtk/0.1.7/fonts/gelasio/gelasio-latin-400-italic.woff2") format("woff2");
    unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  @font-face {
    font-family: Gelasio;
    font-style: normal;
    font-display: swap;
    font-weight: 700;
    src: url("/assets/wtk/0.1.7/fonts/gelasio/gelasio-latin-700-normal.woff2") format("woff2");
    unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  @font-face {
    font-family: Gelasio;
    font-style: italic;
    font-display: swap;
    font-weight: 700;
    src: url("/assets/wtk/0.1.7/fonts/gelasio/gelasio-latin-700-italic.woff2") format("woff2");
    unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  :root {
    color-scheme: light dark;
    transition: --wtk-color-accent var(--wtk-motion-accent) ease;
  }

  :root[data-blog-scheme="dark"] {
    color-scheme: dark;
  }

  :root[data-blog-scheme="light"] {
    color-scheme: light;
  }

  .wtk-safe-probe {
    visibility: hidden;
    pointer-events: none;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    position: fixed;
    inset: 0;
  }

  *, :before, :after {
    box-sizing: border-box;
  }

  html {
    background: var(--wtk-color-page-bg);
    -webkit-tap-highlight-color: transparent;
    min-height: 100%;
    font-size: 62.5%;
  }

  body {
    background: var(--wtk-color-page-bg);
    min-height: 100%;
    color: var(--wtk-color-page-text);
    font-family: var(--wtk-font-serif);
    font-size: var(--wtk-type-body);
    line-height: var(--wtk-type-line-height);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizelegibility;
    transition: background-color var(--wtk-motion-surface) ease,
      color var(--wtk-motion-surface) ease;
    margin: 0;
  }

  [data-wtk-typeface="rounded"] body {
    font-family: var(--wtk-font-rounded);
  }

  a {
    color: var(--wtk-color-link);
    transition: color var(--wtk-motion-accent) var(--wtk-motion-ease);
    text-decoration: none;
  }

  .wtk-main a:not([class]), .wtk-main p a, .wtk-main li a {
    font-weight: var(--wtk-type-weight-link);
  }

  a:hover, a:focus {
    color: var(--wtk-color-accent);
    text-decoration: none;
  }

  :focus-visible {
    outline: var(--wtk-size-focus-ring) solid var(--wtk-color-focus-ring);
    outline-offset: var(--wtk-size-focus-ring);
  }

  [data-wtk-needs-script] {
    visibility: hidden;
  }

  html[data-wtk-ready] [data-wtk-needs-script] {
    visibility: visible;
  }

  .wtk-skip-link {
    top: -100vh;
    left: calc(var(--wtk-space-10) + env(safe-area-inset-left));
    z-index: 40;
    padding: var(--wtk-space-6) var(--wtk-space-8);
    background: var(--wtk-color-page-bg);
    position: absolute;
  }

  .wtk-skip-link:focus {
    top: calc(var(--wtk-space-6) + env(safe-area-inset-top));
  }

  .wtk-visually-hidden {
    width: var(--wtk-size-hairline);
    height: var(--wtk-size-hairline);
    clip-path: inset(50%);
    white-space: nowrap;
    position: absolute;
    overflow: hidden;
  }

  ::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) {
    animation-duration: var(--wtk-motion-scheme-transition);
    animation-timing-function: var(--wtk-motion-ease-emphasised);
  }

  @media (prefers-reduced-motion: reduce) {
    :root, body, a {
      transition: none;
    }

    ::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) {
      animation: none;
    }
  }
}

@layer wtk.chrome {
  .wtk-app-header {
    top: calc(var(--wtk-layout-app-desktop-gutter) + env(safe-area-inset-top));
    z-index: 10;
    min-width: 0;
    width: calc(100% + (var(--wtk-layout-topbar-bleed) * 2));
    max-width: none;
    margin-left: calc(var(--wtk-layout-topbar-bleed) * -1);
    margin-right: calc(var(--wtk-layout-topbar-bleed) * -1);
    min-height: var(--wtk-layout-app-header-height);
    padding: var(--wtk-space-4) var(--wtk-space-10) var(--wtk-space-4) var(--wtk-space-4);
    border: var(--wtk-size-hairline) solid var(--wtk-color-glass-border);
    border-radius: var(--wtk-radius-app-header);
    background: var(--wtk-color-glass-topbar-background);
    backdrop-filter: var(--wtk-glass-filter-topbar);
    box-shadow: var(--wtk-glass-shadow-topbar);
    transition: background-color var(--wtk-motion-surface) ease,
      border-color var(--wtk-motion-surface) ease,
      box-shadow var(--wtk-motion-surface) ease;
    justify-content: space-between;
    align-items: center;
    display: flex;
    position: sticky;
  }

  @supports (corner-shape: squircle) {
    .wtk-app-header {
      corner-shape: var(--wtk-shape-corner);
      border-radius: calc(var(--wtk-radius-app-header) * 1.25);
    }
  }

  .wtk-app-identity {
    align-items: center;
    gap: var(--wtk-space-6);
    min-width: 0;
    margin-right: var(--wtk-space-6);
    flex: none;
    display: flex;
  }

  .wtk-app-icon-link {
    filter: var(--wtk-shadow-app-icon);
    align-items: center;
    display: flex;
  }

  .wtk-app-icon {
    width: var(--wtk-layout-app-icon);
    height: var(--wtk-layout-app-icon);
    clip-path: url("#wtk-app-icon-shape");
  }

  .wtk-app-name {
    font-size: var(--wtk-type-app-name);
    font-weight: var(--wtk-type-weight-brand);
    white-space: nowrap;
    align-items: center;
    margin: 0;
    line-height: 1;
    text-decoration: none;
    display: flex;
    color: var(--wtk-color-page-title) !important;
  }

  .wtk-app-name:hover, .wtk-app-name:focus {
    text-decoration: none;
  }

  .wtk-app-name .brandWordTail {
    font-feature-settings: "smcp" 1, "c2sc" 1;
    font-variant-caps: all-small-caps;
  }

  .wtk-app-nav {
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    min-width: 0;
    padding-block: var(--wtk-space-4);
    flex: auto;
    justify-content: flex-end;
    align-items: center;
    display: flex;
    overflow: auto hidden;
  }

  .wtk-app-nav::-webkit-scrollbar {
    display: none;
  }

  .wtk-app-nav ul {
    gap: var(--wtk-space-8);
    align-items: center;
    min-width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .wtk-app-nav li {
    display: flex;
  }

  .wtk-app-nav-link {
    font-size: var(--wtk-type-app-nav);
    font-weight: var(--wtk-type-weight-nav);
    line-height: var(--wtk-type-line-height-nav);
    text-decoration: none;
    color: var(--wtk-color-page-muted) !important;
  }

  @media (hover: hover) and (pointer: fine) {
    a.wtk-app-nav-link:hover, a.wtk-app-nav-link:active {
      text-decoration: none;
      color: var(--wtk-color-page-title) !important;
    }
  }

  .wtk-app-nav-link[aria-current="page"] {
    cursor: default;
    color: var(--wtk-color-page-title) !important;
  }

  .wtk-app-nav-short {
    display: none;
  }

  .wtk-app-header .wtk-settings {
    margin-left: var(--wtk-space-6);
  }

  @media (width <= 48em) {
    .wtk-app-header {
      top: calc(var(--wtk-layout-app-mobile-gutter) + env(safe-area-inset-top));
      padding-left: var(--wtk-space-5);
    }

    .wtk-app-name {
      display: none;
    }

    [data-wtk-wordmark="always"] .wtk-app-name {
      font-size: var(--wtk-type-app-name-compact);
      display: flex;
    }

    .wtk-app-nav {
      justify-content: flex-start;
    }

    .wtk-app-nav ul {
      gap: var(--wtk-space-6);
    }

    .wtk-app-nav-link {
      font-size: var(--wtk-type-app-nav-compact);
    }

    .wtk-app-nav-full {
      display: none;
    }

    .wtk-app-nav-short {
      display: inline;
    }
  }

  @media (width <= 28.75em) {
    .wtk-app-header {
      padding-right: var(--wtk-space-8);
    }

    .wtk-app-identity {
      gap: var(--wtk-space-5);
      margin-right: var(--wtk-space-5);
    }

    .wtk-app-icon {
      width: var(--wtk-layout-app-icon-compact);
      height: var(--wtk-layout-app-icon-compact);
    }

    .wtk-app-nav ul {
      gap: var(--wtk-space-4);
    }

    .wtk-app-nav-link {
      font-size: var(--wtk-type-app-nav-phone);
    }

    .wtk-app-nav-optional {
      width: var(--wtk-size-hairline);
      height: var(--wtk-size-hairline);
      clip-path: inset(50%);
      white-space: nowrap;
      position: absolute;
      overflow: hidden;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .wtk-app-header {
      transition: none;
    }
  }

  .wtk-footer {
    width: min(100%, var(--wtk-layout-content-width));
    margin: var(--wtk-layout-footer-gap) auto 0;
    color: var(--wtk-color-page-muted);
    font-size: var(--wtk-type-footer);
    text-align: center;
    transition: color var(--wtk-motion-surface) ease,
      border-color var(--wtk-motion-surface) ease;
  }

  .wtk-footer p {
    margin: 0;
  }

  .wtk-footer p + p {
    margin-top: var(--wtk-space-2);
  }

  .wtk-footer-credit {
    color: inherit;
    font-weight: var(--wtk-type-weight-credit);
    transition: color var(--wtk-motion-credit) ease;
    text-decoration: none;
  }

  .wtk-footer-credit:link, .wtk-footer-credit:visited, .wtk-footer-credit:hover, .wtk-footer-credit:active {
    text-decoration: none;
    color: inherit !important;
  }

  .wtk-footer-credit:hover, .wtk-footer-credit:active, .wtk-footer-credit:focus-visible {
    color: var(--wtk-color-link) !important;
  }

  .wtk-footer-social {
    justify-content: center;
    gap: var(--wtk-space-7);
    margin: var(--wtk-space-text-sm) 0 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .wtk-footer-social a {
    width: var(--wtk-size-control-compact);
    height: var(--wtk-size-control-compact);
    border-radius: var(--wtk-radius-pill);
    color: inherit;
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  .wtk-footer-social svg {
    width: var(--wtk-size-icon-sm);
    height: var(--wtk-size-icon-sm);
    fill: currentColor;
  }

  .wtk-footer-hidden-rel {
    width: var(--wtk-size-hairline);
    height: var(--wtk-size-hairline);
    clip-path: inset(50%);
    position: absolute;
    overflow: hidden;
  }

  @media (width <= 48em) {
    .wtk-footer {
      margin-top: var(--wtk-layout-mobile-page-gap);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .wtk-footer, .wtk-footer-credit {
      transition: none;
    }
  }

  .wtk-page {
    min-height: 100dvh;
    padding: var(--wtk-layout-desktop-content-gap) var(--wtk-layout-desktop-content-gap) var(--wtk-layout-footer-gap);
    padding-top: max(var(--wtk-layout-desktop-content-gap), env(safe-area-inset-top));
    padding-left: max(var(--wtk-layout-desktop-content-gap), env(safe-area-inset-left));
    padding-right: max(var(--wtk-layout-desktop-content-gap), env(safe-area-inset-right));
    padding-bottom: max(var(--wtk-layout-footer-gap), env(safe-area-inset-bottom));
    flex-direction: column;
    display: flex;
  }

  .wtk-container {
    width: min(100%, var(--wtk-layout-nav-width));
    flex-direction: column;
    flex: 1;
    margin: 0 auto;
    display: flex;
  }

  [data-wtk-width="content"] .wtk-container {
    width: min(100%, var(--wtk-layout-content-width));
  }

  .wtk-main {
    width: min(100%, var(--wtk-layout-content-width));
    margin: var(--wtk-layout-desktop-content-gap) auto 0;
    flex: 1;
  }

  @media (width <= 48em) {
    .wtk-page {
      padding: var(--wtk-layout-mobile-page-gap);
      padding-top: max(var(--wtk-layout-mobile-page-gap), env(safe-area-inset-top));
      padding-left: max(var(--wtk-layout-mobile-page-gap), env(safe-area-inset-left));
      padding-right: max(var(--wtk-layout-mobile-page-gap), env(safe-area-inset-right));
      padding-bottom: max(var(--wtk-layout-mobile-page-gap), env(safe-area-inset-bottom));
    }

    .wtk-main {
      margin-top: var(--wtk-layout-mobile-page-gap);
    }
  }

  .wtk-settings {
    flex: none;
    line-height: 1;
    position: static;
  }

  .wtk-settings-button {
    width: var(--wtk-size-control);
    height: var(--wtk-size-control);
    border: var(--wtk-size-hairline) solid transparent;
    border-radius: var(--wtk-radius-pill);
    color: var(--wtk-color-page-muted);
    cursor: pointer;
    transition: color var(--wtk-motion-control) ease,
      transform var(--wtk-motion-control) ease;
    background: none;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    display: inline-flex;
  }

  .wtk-settings-icon {
    width: var(--wtk-size-icon);
    height: var(--wtk-size-icon);
    fill: currentColor;
    pointer-events: none;
    transition: transform var(--wtk-motion-control) ease;
    display: block;
  }

  .wtk-settings-button[aria-expanded="true"] {
    color: var(--wtk-color-link);
  }

  .wtk-settings-button[aria-expanded="true"] .wtk-settings-icon {
    transform: scale(1.08);
  }

  @media (hover: hover) and (pointer: fine) {
    .wtk-settings-button:hover {
      color: color-mix(in srgb, var(--wtk-color-accent) 76%, transparent);
    }

    .wtk-settings-button:hover .wtk-settings-icon {
      transform: scale(1.08);
    }
  }

  .wtk-settings-button:active {
    transform: scale(.96);
  }

  .wtk-settings-panel {
    inset: auto;
    top: var(--wtk-settings-top, auto);
    left: var(--wtk-settings-left, auto);
    z-index: 30;
    width: var(--wtk-settings-width, min(var(--wtk-layout-settings-panel-width), calc(100vw - (2 * var(--wtk-layout-panel-margin)) - env(safe-area-inset-left) - env(safe-area-inset-right))));
    max-height: var(--wtk-settings-max-height, calc(100dvh - (2 * var(--wtk-layout-panel-margin)) - var(--wtk-layout-desktop-topbar-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
    overscroll-behavior: contain;
    border: var(--wtk-size-hairline) solid var(--wtk-color-glass-border);
    border-radius: var(--wtk-radius-panel);
    padding: var(--wtk-space-8);
    background: var(--wtk-color-glass-solid);
    box-shadow: var(--wtk-glass-shadow-panel);
    color: var(--wtk-color-page-text);
    transform-origin: 100% 0;
    transition: background-color var(--wtk-motion-surface) ease,
      border-color var(--wtk-motion-surface) ease,
      box-shadow var(--wtk-motion-surface) ease,
      color var(--wtk-motion-surface) ease;
    margin: 0;
    font-family: inherit;
    position: fixed;
    overflow: auto;
  }

  @supports (corner-shape: squircle) {
    .wtk-settings-panel {
      corner-shape: var(--wtk-shape-corner);
      border-radius: calc(var(--wtk-radius-panel) * 1.25);
    }
  }

  [data-wtk-popover="fallback"] .wtk-settings-panel:not(.is-open) {
    display: none;
  }

  :is(.wtk-settings-panel:popover-open, .wtk-settings-panel.is-open) {
    opacity: 1;
    transition: opacity var(--wtk-motion-panel) var(--wtk-motion-ease-emphasised),
      transform var(--wtk-motion-panel) var(--wtk-motion-ease-emphasised),
      display var(--wtk-motion-panel) allow-discrete,
      overlay var(--wtk-motion-panel) allow-discrete;
    transform: translateY(0) scale(1);
  }

  @starting-style {
    :is(.wtk-settings-panel:popover-open, .wtk-settings-panel.is-open) {
      opacity: 0;
      transform: translateY(var(--wtk-motion-panel-translate)) scale(.985);
    }
  }

  .wtk-settings-section {
    margin: 0;
  }

  .wtk-segmented {
    gap: var(--wtk-space-2);
    border: var(--wtk-size-hairline) solid var(--wtk-color-page-rule);
    border-radius: var(--wtk-radius-segmented);
    padding: var(--wtk-space-2);
    background: var(--wtk-color-glass-segmented-bg);
    transition: background-color var(--wtk-motion-surface) ease,
      border-color var(--wtk-motion-surface) ease;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    display: grid;
  }

  .wtk-segmented button, .wtk-tint {
    border: var(--wtk-size-hairline) solid transparent;
    border-radius: var(--wtk-radius-segmented-item);
    color: var(--wtk-color-page-muted);
    cursor: pointer;
    font: inherit;
    font-size: var(--wtk-type-control);
    font-weight: var(--wtk-type-weight-control);
    transition: background-color var(--wtk-motion-control) ease,
      border-color var(--wtk-motion-control) ease,
      color var(--wtk-motion-control) ease,
      transform var(--wtk-motion-control) ease;
    background: none;
    margin: 0;
    line-height: 1;
    position: relative;
  }

  .wtk-segmented button {
    justify-content: center;
    align-items: center;
    gap: var(--wtk-space-text-xs);
    min-height: var(--wtk-size-control-row);
    padding: 0 var(--wtk-space-5);
    display: inline-flex;
  }

  .wtk-segmented button:focus-visible, .wtk-segmented button.is-previewing, .wtk-tint:focus-visible, .wtk-tint.is-previewing {
    color: var(--wtk-color-page-title);
  }

  @media (hover: hover) and (pointer: fine) {
    .wtk-segmented button:hover, .wtk-tint:hover {
      color: var(--wtk-color-page-title);
    }
  }

  .wtk-segmented button[aria-checked="true"], .wtk-tint[aria-checked="true"] {
    border-color: var(--wtk-color-settings-active-border);
    background: var(--wtk-color-settings-active-bg);
    color: var(--wtk-color-page-title);
  }

  .wtk-segmented button:active, .wtk-tint:active {
    transform: scale(.98);
  }

  .wtk-tints {
    align-items: center;
    gap: var(--wtk-space-3);
    border-top: var(--wtk-size-hairline) solid var(--wtk-color-page-rule);
    margin-top: var(--wtk-space-text-md);
    padding-top: var(--wtk-space-text-md);
    flex-wrap: wrap;
    display: flex;
  }

  [data-wtk-scheme-control="tint-only"] .wtk-tints {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
  }

  .wtk-tint {
    width: var(--wtk-size-control-compact);
    min-height: var(--wtk-size-control-compact);
    border-radius: var(--wtk-radius-pill);
    flex: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex;
  }

  .wtk-swatch {
    width: var(--wtk-size-swatch);
    height: var(--wtk-size-swatch);
    border: var(--wtk-size-hairline) solid var(--wtk-color-glass-swatch-border);
    border-radius: var(--wtk-radius-pill);
    background: var(--wtk-swatch-color, var(--wtk-color-accent));
    box-shadow: var(--wtk-shadow-swatch);
  }

  .wtk-tint[data-wtk-tint-option="pink"] .wtk-swatch {
    --wtk-swatch-color: var(--wtk-color-tint-pink);
  }

  .wtk-tint[data-wtk-tint-option="grey"] .wtk-swatch {
    --wtk-swatch-color: var(--wtk-color-tint-grey);
  }

  .wtk-tint[data-wtk-tint-option="red"] .wtk-swatch {
    --wtk-swatch-color: var(--wtk-color-tint-red);
  }

  .wtk-tint[data-wtk-tint-option="green"] .wtk-swatch {
    --wtk-swatch-color: var(--wtk-color-tint-green);
  }

  .wtk-tint[data-wtk-tint-option="blue"] .wtk-swatch {
    --wtk-swatch-color: var(--wtk-color-tint-blue);
  }

  .wtk-tint[data-wtk-tint-option="orange"] .wtk-swatch {
    --wtk-swatch-color: var(--wtk-color-tint-orange);
  }

  .wtk-tint[data-wtk-tint-option="purple"] .wtk-swatch {
    --wtk-swatch-color: var(--wtk-color-tint-purple);
  }

  .wtk-tint[data-wtk-tint-option="yellow"] .wtk-swatch {
    --wtk-swatch-color: var(--wtk-color-tint-yellow);
  }

  .wtk-settings-noscript {
    color: var(--wtk-color-page-muted);
    font-size: var(--wtk-type-note);
    margin: 0;
  }

  @media (width <= 48em) {
    .wtk-settings-button {
      width: var(--wtk-size-control-compact);
      height: var(--wtk-size-control-compact);
    }

    .wtk-settings-panel {
      width: var(--wtk-settings-width, min(var(--wtk-layout-settings-panel-width), calc(100vw - (2 * var(--wtk-layout-mobile-page-gap)) - env(safe-area-inset-left) - env(safe-area-inset-right))));
      max-height: var(--wtk-settings-max-height, calc(100dvh - (2 * var(--wtk-layout-panel-margin)) - var(--wtk-layout-mobile-topbar-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .wtk-settings-button, .wtk-settings-icon, .wtk-settings-panel, .wtk-settings-panel.is-open, .wtk-segmented, .wtk-segmented button, .wtk-tint {
      transition: none;
    }

    .wtk-settings-panel:popover-open {
      transition: none;
    }
  }

  .wtk-topbar {
    top: var(--wtk-layout-desktop-topbar-top);
    z-index: 10;
    align-items: center;
    gap: var(--wtk-layout-gear-nav-gap);
    min-height: var(--wtk-layout-desktop-topbar-height);
    width: calc(100% + (var(--wtk-layout-topbar-bleed) * 2));
    margin-left: calc(var(--wtk-layout-topbar-bleed) * -1);
    margin-right: calc(var(--wtk-layout-topbar-bleed) * -1);
    padding: var(--wtk-space-4) calc(var(--wtk-layout-gear-edge-gap) - var(--wtk-size-hairline)) var(--wtk-space-4) var(--wtk-layout-desktop-content-gap);
    border: var(--wtk-size-hairline) solid var(--wtk-color-glass-border);
    border-radius: var(--wtk-radius-topbar);
    background: var(--wtk-color-glass-topbar-background);
    backdrop-filter: var(--wtk-glass-filter-topbar);
    box-shadow: var(--wtk-glass-shadow-topbar);
    transition: background-color var(--wtk-motion-surface) ease,
      border-color var(--wtk-motion-surface) ease,
      box-shadow var(--wtk-motion-surface) ease;
    justify-content: space-between;
    display: flex;
    position: sticky;
  }

  @supports (corner-shape: squircle) {
    .wtk-topbar {
      corner-shape: var(--wtk-shape-corner);
      border-radius: calc(var(--wtk-radius-topbar) * 1.25);
    }
  }

  .wtk-brand {
    font-size: var(--wtk-type-brand);
    font-weight: var(--wtk-type-weight-brand);
    white-space: nowrap;
    flex: none;
    line-height: 1;
    color: var(--wtk-color-page-title) !important;
  }

  .wtk-brand:hover, .wtk-brand:focus {
    color: var(--wtk-color-page-title);
    text-decoration: none;
  }

  .wtk-topbar-links {
    gap: var(--wtk-space-6);
    margin: 0 var(--wtk-space-6) 0 auto;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .wtk-topbar-link {
    font-size: var(--wtk-type-nav-link);
    font-weight: var(--wtk-type-weight-link);
    text-decoration: none;
    color: var(--wtk-color-page-title) !important;
  }

  .wtk-topbar-link:hover, .wtk-topbar-link:focus {
    text-decoration: none;
  }

  .wtk-topbar-link[aria-current="page"] {
    cursor: default;
  }

  .wtk-page .wtk-topbar {
    top: calc(var(--wtk-layout-desktop-topbar-top) + env(safe-area-inset-top));
  }

  @media (width <= 48em) {
    .wtk-topbar {
      top: var(--wtk-layout-mobile-topbar-top);
      min-height: var(--wtk-layout-mobile-topbar-height);
      padding: var(--wtk-space-3) var(--wtk-space-text-md);
      gap: var(--wtk-space-5);
    }

    .wtk-page .wtk-topbar {
      top: calc(var(--wtk-layout-mobile-topbar-top) + env(safe-area-inset-top));
    }

    .wtk-brand {
      font-size: var(--wtk-type-brand-compact);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .wtk-topbar {
      transition: none;
    }
  }
}

@layer wtk.content;
@layer wtk.tokens, wtk.base, wtk.chrome;

@layer wtk.content {
  .wtk-glass {
    border: var(--wtk-size-hairline) solid var(--wtk-color-glass-border);
    border-radius: var(--wtk-radius-card);
    background: var(--wtk-color-glass-background);
    backdrop-filter: var(--wtk-glass-filter-card);
    box-shadow: var(--wtk-glass-shadow-card);
    transition: background-color var(--wtk-motion-surface) ease,
      border-color var(--wtk-motion-surface) ease,
      box-shadow var(--wtk-motion-surface) ease;
  }

  @supports (corner-shape: squircle) {
    .wtk-glass {
      corner-shape: var(--wtk-shape-corner);
      border-radius: calc(var(--wtk-radius-card) * 1.25);
    }
  }

  @supports not (backdrop-filter: blur(1px)) {
    .wtk-glass {
      background: var(--wtk-color-glass-solid);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .wtk-glass {
      transition: none;
    }
  }
}