/* Shared PXLS hierarchy. Important rules in this layer supersede the older
   unlayered page overrides, without another specificity escalation. */
@layer pxls-typography {
  :root {
    --pxls-title: clamp(36px, 3.8vw, 58px);
    --pxls-section: clamp(27px, 2.6vw, 36px);
    --pxls-card: 20px;
    --pxls-body: 14px;
    --pxls-helper: 12px;
    --pxls-action: 11px;
  }
  main h1 {
    font-size: var(--pxls-title) !important;
    font-weight: 600 !important;
    line-height: 1.07 !important;
    letter-spacing: -0.035em !important;
    text-wrap: balance;
  }
  main h2 {
    font-size: var(--pxls-section) !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.025em !important;
    text-wrap: balance;
  }
  main h3 {
    font-size: var(--pxls-card) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.015em !important;
  }
  main h4 {
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
  }
  main p {
    font-size: var(--pxls-body) !important;
    line-height: 1.7 !important;
  }
  main :is(.directory-kicker, .support-kicker, .eyebrow) {
    font-size: 10px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
  }
  main :is(small, .help-footnote, .about-note, .plan-note, .muted-note) {
    font-size: var(--pxls-helper) !important;
    line-height: 1.5 !important;
  }
  /* Cards and compact workspace headers are subordinate to page sections. */
  :is(
      .knowledge-grid-v75,
      .premium-plan-v72,
      .about-principles,
      .tool-support-panel,
      .workspace-card,
      .tool-card,
      .tool-card-shell-v75,
      .notification-panel,
      .pxls-drawer,
      .pxls-chat-popup
    )
    :is(h2, h3) {
    font-size: var(--pxls-card) !important;
    line-height: 1.3 !important;
    letter-spacing: -0.015em !important;
  }
  :is(.tool-card, .tool-card-shell-v75, .workspace-tool-link) :is(h2, h3, strong) {
    font-size: 14px !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
  }
  .all-tools-letter-v75 > h2,
  .section-title {
    font-size: 18px !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
  }
  .runner-title h1 {
    font-size: clamp(23px, 2.4vw, 30px) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.025em !important;
  }
  /* Only action labels are uppercase; navigation, tool names and entered text
     retain their casing. Icon-only controls keep their icon font size. */
  :is(
    button,
    input[type="submit"],
    input[type="button"],
    a.xp-primary,
    a.xp-secondary,
    a.welcome-primary,
    a.welcome-secondary,
    a.home81-premium-cta,
    a.workspace-view-all-v127,
    a.btn,
    a.button
  ):not(
    :is(
      .icon-button,
      .profile-button,
      .mobile-menu,
      .nav-category,
      .favorite-button,
      .tool-favorite,
      .tour-x-v128,
      .tour-invite-x,
      .guide-close,
      [aria-label^="Close"],
      [aria-label^="Dismiss"]
    )
  ) {
    font-size: var(--pxls-action) !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
  }
  :is(
    .xp-primary,
    .xp-secondary,
    .welcome-primary,
    .welcome-secondary,
    .home81-premium-cta,
    .runner-actions button
  ) {
    min-height: 40px;
    white-space: normal;
    text-align: center;
  }
  :is(
      .xp-primary,
      .xp-secondary,
      .welcome-primary,
      .welcome-secondary,
      .home81-premium-cta,
      .runner-actions button
    )
    > span:not([class*="icon"]):not([class*="badge"]) {
    font-size: inherit !important;
    letter-spacing: inherit !important;
  }
  .notification-title strong,
  .pxls-chat-popup header strong {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }
  .notification-copy b {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }
  .notification-copy small {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }
  .notification-tag {
    font-size: 9px !important;
    letter-spacing: 0.08em !important;
  }
  .site-legal-footer {
    font-size: 11px !important;
    line-height: 1.5 !important;
  }
}

/*!
PXLS | https://pxls.tools
Copyright (c) 2026 Matt Cannon. All rights reserved.

To the extent protected by applicable law, PXLS original source code,
original written content, artwork, and other original creative elements
are proprietary to Matt Cannon, except where otherwise identified.

Access to this website permits use of its tools as provided under the
site's terms. Public availability of source code does not grant a license
to copy, redistribute, sell, sublicense, or republish protected PXLS
material, or use that material to create a competing copy, without prior
written permission, except as permitted by applicable law.

Third-party libraries, fonts, icons, and other licensed components remain
subject to their respective licenses and copyright notices. This notice
does not restrict rights granted by those licenses, claim ownership of
user-provided material, or claim exclusive rights in ideas, methods,
functionality, or other material not protected by copyright.

For permission requests, contact PXLS through https://pxls.tools/pages/help.html.
*/