.type-body-m{font-size: 1rem; font-weight: 400; font-family: var(--font-family-plain); letter-spacing: 0.009375rem; line-height: 1.5rem;}.surface-glass{box-shadow: var(--surface-glass-shadow); backdrop-filter: blur(var(--surface-glass-blur)); border: var(--surface-glass-border); --bg-opacity: var(--surface-glass-opacity);}.type-body-s{font-size: 0.875rem; font-weight: 400; font-family: var(--font-family-plain); letter-spacing: 0.015625rem; line-height: 1.25rem;}.surface-container-high{color: var(--color-on-surface); background-color: color-mix(in srgb, var(--color-surface-container-high) var(--bg-opacity, 100%), transparent);}.type-title-s{font-size: 0.875rem; font-weight: 500; font-family: var(--font-family-plain); letter-spacing: 0.00625rem; line-height: 1.25rem;}.type-label-s{font-size: 0.6875rem; font-weight: 500; font-family: var(--font-family-plain); letter-spacing: 0.025rem; line-height: 1.0rem;}.type-label-l{font-size: 0.875rem; font-weight: 500; font-family: var(--font-family-plain); letter-spacing: 0.00625rem; line-height: 1.25rem;}.button{position: relative; overflow: visible; min-height: 40px; padding-left: 24px; padding-right: 24px; font-weight: 500; font-family: var(--font-family-plain); font-size: 0.875rem; letter-spacing: 0.00625rem; line-height: 1.25rem; cursor: pointer;&::before{content: ""; position: absolute; inset: 0; border-radius: inherit; background-color: currentColor; opacity: 0; transition: opacity 0.2s linear; pointer-events: none; z-index: 0;}&:hover::before{opacity: 0.08;}& > .label{position: relative; z-index: 1;}}.type-label-m{font-size: 0.75rem; font-weight: 500; font-family: var(--font-family-plain); letter-spacing: 0.025rem; line-height: 1.0rem;}.surface-container{color: var(--color-on-surface); background-color: color-mix(in srgb, var(--color-surface-container) var(--bg-opacity, 100%), transparent);}.type-body-l{font-size: 1.125rem; font-weight: 400; font-family: var(--font-family-plain); letter-spacing: 0.0125rem; line-height: 1.75rem;}.button-outlined{border-width: 1px; border-color: var(--color-outline); background-color: transparent; color: var(--color-primary);}.type-title-m{font-size: 1rem; font-weight: 500; font-family: var(--font-family-plain); letter-spacing: 0.009375rem; line-height: 1.5rem;}.type-headline-l{font-size: 2.0rem; font-weight: 400; font-family: var(--font-family-brand); letter-spacing: 0; line-height: 2.5rem;}.prose{line-height: var(--leading-relaxed, 1.625);p, li{text-wrap: pretty;}p:not(:last-child){margin-bottom: 1.25em;}a{color: var(--color-primary); text-decoration: underline; text-underline-offset: 0.2em;}strong, b{font-weight: var(--font-weight-medium, 500);}img:not(:last-child){margin-top: 1em; margin-bottom: 1em;}iframe:not(:last-child){margin-bottom: 1em;}blockquote{border-inline-start: 3px solid var(--color-primary); padding-inline-start: 1rem; color: var(--color-on-surface-variant);}blockquote:not(:last-child){margin-bottom: 1.25em;}ol,ul{margin-top: 1.25em; margin-bottom: 1.25em; padding-inline-start: 1.625em;}ol{list-style-type: decimal;}ul{list-style-type: disc;}li{margin-top: 0.5em; margin-bottom: 0.5em;}img{margin: auto;}h1, h2, h3, h4{text-wrap: balance;}h1{margin-bottom: 0.75em;}h2{margin-bottom: 0.5em;}h2:not(:first-child){margin-top: 1.75em;}h3{margin-bottom: 0.375em;}h3:not(:first-child){margin-top: 1.5em;}h4{margin-bottom: 0.25em;}h4:not(:first-child){margin-top: 1.25em;}:not(pre) > code{font-family: var(--font-family-code, var(--font-family-mono)); background-color: var(--color-surface-container-high); padding: 0.125rem 0.375rem; border-radius: var(--radius-xs, 4px); font-size: 0.875em;}pre{background-color: var(--color-surface-container-lowest); padding: 1rem; border-radius: var(--radius-md, 12px); overflow-x: auto;}pre:not(:last-child){margin-bottom: 1.25em;}hr{border: 0; border-top: 1px solid var(--color-outline-variant); margin-top: 2rem; margin-bottom: 2rem;}table{width: 100%; border-collapse: collapse; margin-top: 1.25em; margin-bottom: 1.25em;}th, td{padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-outline-variant); text-align: left;}th{font-weight: var(--font-weight-medium, 500);}}.surface-container-low{color: var(--color-on-surface); background-color: color-mix(in srgb, var(--color-surface-container-low) var(--bg-opacity, 100%), transparent);}.type-headline-s{font-size: 1.5rem; font-weight: 400; font-family: var(--font-family-brand); letter-spacing: 0; line-height: 2.0rem;}.fluid{&:where(h1), & :where(h1){font-size: clamp(1.75rem, calc(1.6rem + 0.4vw), 2.0rem); line-height: clamp(2.25rem, calc(2.1rem + 0.4vw), 2.5rem);}&:where(h2), & :where(h2){font-size: clamp(1.5rem, calc(1.35rem + 0.4vw), 1.75rem); line-height: clamp(2.0rem, calc(1.85rem + 0.4vw), 2.25rem);}&:where(h3), & :where(h3){font-size: clamp(1.25rem, calc(1.1rem + 0.4vw), 1.5rem); line-height: clamp(1.75rem, calc(1.6rem + 0.4vw), 2.0rem);}&:where(h4), & :where(h4){font-size: clamp(1.25rem, calc(1.175rem + 0.2vw), 1.375rem); line-height: clamp(1.625rem, calc(1.55rem + 0.2vw), 1.75rem);}&:where(.type-display-xl), & :where(.type-display-xl){font-size: clamp(3.0rem, calc(2.1rem + 2.4vw), 4.5rem); line-height: clamp(3.5rem, calc(2.6rem + 2.4vw), 5.0rem);}&:where(.type-display-l), & :where(.type-display-l){font-size: clamp(2.5rem, calc(1.8625rem + 1.7vw), 3.5625rem); line-height: clamp(3.0rem, calc(2.4rem + 1.6vw), 4.0rem);}&:where(.type-display-m), & :where(.type-display-m){font-size: clamp(2.125rem, calc(1.7125rem + 1.1vw), 2.8125rem); line-height: clamp(2.625rem, calc(2.25rem + 1.0vw), 3.25rem);}&:where(.type-display-s), & :where(.type-display-s){font-size: clamp(1.875rem, calc(1.65rem + 0.6vw), 2.25rem); line-height: clamp(2.375rem, calc(2.15rem + 0.6vw), 2.75rem);}&:where(.type-headline-l), & :where(.type-headline-l){font-size: clamp(1.75rem, calc(1.6rem + 0.4vw), 2.0rem); line-height: clamp(2.25rem, calc(2.1rem + 0.4vw), 2.5rem);}&:where(.type-headline-m), & :where(.type-headline-m){font-size: clamp(1.5rem, calc(1.35rem + 0.4vw), 1.75rem); line-height: clamp(2.0rem, calc(1.85rem + 0.4vw), 2.25rem);}&:where(.type-headline-s), & :where(.type-headline-s){font-size: clamp(1.25rem, calc(1.1rem + 0.4vw), 1.5rem); line-height: clamp(1.75rem, calc(1.6rem + 0.4vw), 2.0rem);}&:where(.type-title-l), & :where(.type-title-l){font-size: clamp(1.25rem, calc(1.175rem + 0.2vw), 1.375rem); line-height: clamp(1.625rem, calc(1.55rem + 0.2vw), 1.75rem);}&:where(.type-body-l), & :where(.type-body-l){font-size: clamp(1.0rem, calc(0.925rem + 0.2vw), 1.125rem); line-height: clamp(1.5rem, calc(1.35rem + 0.4vw), 1.75rem);}}.expressive{&:where(h1, h2, h3, h4), & :where(h1, h2, h3, h4){font-weight: 500;}&:where(h5, h6), & :where(h5, h6){font-weight: 600;}&:where(.type-display-xl), & :where(.type-display-xl){font-weight: 500; letter-spacing: -0.015625rem;}&:where(.type-display-l), & :where(.type-display-l){font-weight: 500; letter-spacing: -0.015625rem;}&:where(.type-display-m), & :where(.type-display-m){font-weight: 500; letter-spacing: 0;}&:where(.type-display-s), & :where(.type-display-s){font-weight: 500; letter-spacing: 0;}&:where(.type-headline-l), & :where(.type-headline-l){font-weight: 500; letter-spacing: 0;}&:where(.type-headline-m), & :where(.type-headline-m){font-weight: 500; letter-spacing: 0;}&:where(.type-headline-s), & :where(.type-headline-s){font-weight: 500; letter-spacing: 0;}&:where(.type-title-l), & :where(.type-title-l){font-weight: 500; letter-spacing: 0;}&:where(.type-title-m), & :where(.type-title-m){font-weight: 600; letter-spacing: 0.009375rem;}&:where(.type-title-s), & :where(.type-title-s){font-weight: 600; letter-spacing: 0.00625rem;}&:where(.type-body-l), & :where(.type-body-l){font-weight: 500; letter-spacing: 0.015625rem;}&:where(.type-body-m), & :where(.type-body-m){font-weight: 500; letter-spacing: 0.015625rem;}&:where(.type-body-s), & :where(.type-body-s){font-weight: 500; letter-spacing: 0.025rem;}&:where(.type-label-l), & :where(.type-label-l){font-weight: 600; letter-spacing: 0.00625rem;}&:where(.type-label-m), & :where(.type-label-m){font-weight: 600; letter-spacing: 0.03125rem;}&:where(.type-label-s), & :where(.type-label-s){font-weight: 600; letter-spacing: 0.03125rem;}}.w-full{width: 100%;}.flex{display: flex;}.justify-center{justify-content: center;}.py-12{padding-top: 48px; padding-bottom: 48px;}.shrink-0{flex-shrink: 0;}.box-border{box-sizing: border-box;}.color-on-surface-variant{color: var(--color-on-surface-variant);}.font-bold{font-weight: 700;}.color-primary{color: var(--color-primary);}.relative{position: relative;}.items-center{align-items: center;}.color-secondary{color: var(--color-secondary);}.back-transparent{background-color: transparent;}.border-none{border-style: none;}.p-0{padding: 0;}.back-surface{background-color: color-mix(in srgb, var(--color-surface) var(--bg-opacity, 100%), transparent);}.corner-none{border-radius: 0;}.h-full{height: 100%;}.pointer-events-auto{pointer-events: auto;}.color-on-surface{color: var(--color-on-surface);}.overflow-hidden{overflow: hidden;}.overscroll-none{overscroll-behavior: none;}.corner-l{border-radius: var(--corner-l, 16px);}.back-surface-container-low{background-color: color-mix(in srgb, var(--color-surface-container-low) var(--bg-opacity, 100%), transparent);}.hover\:back-surface-container-highest:hover{background-color: color-mix(in srgb, var(--color-surface-container-highest) var(--bg-opacity, 100%), transparent);}.cursor-pointer{cursor: pointer;}.max-w-xl{max-width: 36rem;}.w-full-mobile{width: 100%;}.flex-col{flex-direction: column;}.gap-4{gap: 16px;}.flex-wrap{flex-wrap: wrap;}.justify-end{justify-content: flex-end;}.gap-2{gap: 8px;}.size-12{width: 48px; height: 48px;}.corner-full{border-radius: var(--corner-full, 9999999px);}.inline-block{display: inline-block;}.back-surface-container-high{background-color: color-mix(in srgb, var(--color-surface-container-high) var(--bg-opacity, 100%), transparent);}.pt-4{padding-top: 16px;}.justify-between{justify-content: space-between;}.gap-3{gap: 12px;}.grow{flex-grow: 1;}.min-w-0{min-width: 0;}.inline-flex{display: inline-flex;}.text-center{text-align: center;}.p-4{padding: 16px;}.hidden{display: none;}.absolute{position: absolute;}.list-none{list-style-type: none;}.select-none{user-select: none;}.back-primary-container{background-color: color-mix(in srgb, var(--color-primary-container) var(--bg-opacity, 100%), transparent);}.color-on-primary{color: var(--color-on-primary);}.border{border-width: 1px;}.border-outline-variant{border-color: var(--color-outline-variant);}.rounded-full{border-radius: 9999999px;}.border-2{border-width: 2px;}.border-solid{border-style: solid;}.w-10{width: 40px;}.h-10{height: 40px;}.back-tertiary-container{background-color: color-mix(in srgb, var(--color-tertiary-container) var(--bg-opacity, 100%), transparent);}.color-on-tertiary-container{color: var(--color-on-tertiary-container);}.text-label-xl{font-size: 18px;}.size-6{width: 24px; height: 24px;}.corner-m{border-radius: var(--corner-m, 12px);}.outline-none{outline-style: none;}.pt-5{padding-top: 20px;}.pb-2{padding-bottom: 8px;}.px-4{padding-left: 16px; padding-right: 16px;}.pr-12{padding-right: 48px;}.text-left{text-align: left;}.pointer-events-none{pointer-events: none;}.color-error{color: var(--color-error);}.m-0{margin: 0;}.grid{display: grid;}.gap-1{gap: 4px;}.px-2{padding-left: 8px; padding-right: 8px;}.py-1{padding-top: 4px; padding-bottom: 4px;}.transition{transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;}.hover\:back-surface-container-high:hover{background-color: color-mix(in srgb, var(--color-surface-container-high) var(--bg-opacity, 100%), transparent);}.focus-visible\:outline-none:focus-visible{outline-style: none;}.font-medium{font-weight: 500;}.size-5{width: 20px; height: 20px;}.transition-transform{transition-property: transform;}.size-10{width: 40px; height: 40px;}.grid-cols-7{grid-template-columns: repeat(7, minmax(0, 1fr));}.inset-0{inset: 0;}.opacity-0{opacity: 0;}.inline-grid{display: inline-grid;}.min-h-12{min-height: 48px;}.py-3{padding-top: 12px; padding-bottom: 12px;}.corner-xl{border-radius: var(--corner-xl, 28px);}.corner-s{border-radius: var(--corner-s, 8px);}.mb-4{margin-bottom: 16px;}.h-6{height: 24px;}.block{display: block;}.pr-10{padding-right: 40px;}.right-3{right: 12px;}.h-8{height: 32px;}.w-8{width: 32px;}.pb-0{padding-bottom: 0;}.hover\:underline:hover{text-decoration-line: underline;}.self-start{align-self: flex-start;}.w-fit{width: fit-content;}.w-14{width: 56px;}.px-3{padding-left: 12px; padding-right: 12px;}.pb-1{padding-bottom: 4px;}.pt-3{padding-top: 12px;}.border-t{border-top-width: 1px;}.no-underline{text-decoration-line: none;}.hover\:no-underline:hover{text-decoration-line: none;}.min-h-14{min-height: 56px;}.secondary-container{color: var(--color-on-secondary-container); background-color: color-mix(in srgb, var(--color-secondary-container) var(--bg-opacity, 100%), transparent);}.hover\:surface-container-high:hover{color: var(--color-on-surface); background-color: color-mix(in srgb, var(--color-surface-container-high) var(--bg-opacity, 100%), transparent);}.p-3{padding: 12px;}.h-1px{height: 1px;}.back-outline-variant{background-color: color-mix(in srgb, var(--color-outline-variant) var(--bg-opacity, 100%), transparent);}.h-1{height: 4px;}.resize-none{resize: none;}.field-sizing-content{field-sizing: content;}.overflow-y-auto{overflow-y: auto;}.h-3{height: 12px;}.touch-none{touch-action: none;}.cursor-ns-resize{cursor: ns-resize;}.color-success{color: var(--color-success);}.ml-2{margin-left: 8px;}.flex-1{flex: 1 1 0%;}.grid-cols-4{grid-template-columns: repeat(4, minmax(0, 1fr));}.h-2{height: 8px;}.border-collapse{border-collapse: collapse;}.border-b{border-bottom-width: 1px;}.back-surface-container{background-color: color-mix(in srgb, var(--color-surface-container) var(--bg-opacity, 100%), transparent);}.caption-top{caption-side: top;}.w-12{width: 48px;}.cursor-col-resize{cursor: col-resize;}.table-fixed{table-layout: fixed;}.pr-4{padding-right: 16px;}.overflow-auto{overflow: auto;}.items-start{align-items: flex-start;}.right-0{right: 0;}.items-end{align-items: flex-end;}.whitespace-nowrap{white-space: nowrap;}.size-8{width: 32px; height: 32px;}.adaptive-grid-cols-2{grid-template-columns: repeat(1, minmax(0, 1fr));}.truncate{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.fixed{position: fixed;}.right-4{right: 16px;}.z-5{z-index: 12;}.py-2{padding-top: 8px; padding-bottom: 8px;}.aspect-video{aspect-ratio: 16 / 9;}.underline{text-decoration-line: underline;}.mt-4{margin-top: 16px;}.border-outline{border-color: var(--color-outline);}.cursor-text{cursor: text;}.font-mono{font-family: var(--font-family-mono, 'monospace, monospace');}.rounded-m{border-radius: 12px;}.text-start{text-align: start;}.max-w-2xl{max-width: 42rem;}.rounded-xl{border-radius: 28px;}.shadow-4{box-shadow: 0 6px 8px rgba(0, 0, 0, 0.12), 0 8px 10px rgba(0, 0, 0, 0.06);}.mt-2{margin-top: 8px;}.mt-3{margin-top: 12px;}.p-2{padding: 8px;}.grid-cols-2{grid-template-columns: repeat(2, minmax(0, 1fr));}.object-cover{object-fit: cover;}.py-4{padding-top: 16px; padding-bottom: 16px;}.deemph{opacity: 0.5;}.z-1{z-index: 1;}.invisible{visibility: hidden;}.inset-y-0{top: 0; bottom: 0;}.left-0{left: 0;}.z-2{z-index: 3;}.h-4{height: 16px;}.w-28{width: 112px;}.w-20{width: 80px;}.pt-1{padding-top: 4px;}.w-16{width: 64px;}.p-6{padding: 24px;}.pt-2{padding-top: 8px;}.back-secondary-container{background-color: color-mix(in srgb, var(--color-secondary-container) var(--bg-opacity, 100%), transparent);}.color-on-secondary-container{color: var(--color-on-secondary-container);}.opacity-80{opacity: 0.8;}.opacity-75{opacity: 0.75;}.gap-x-4{gap: 16px;}.gap-y-6{gap: 24px;}.overflow-x-auto{overflow-x: auto;}.sr-only{position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}.font-semibold{font-weight: 600;}.mx-auto{margin-left: auto; margin-right: auto;}.size-4{width: 16px; height: 16px;}.p-1{padding: 4px;}.border-0{border-width: 0;}.hover\:color-on-surface:hover{color: var(--color-on-surface);}.back-surface-container-highest{background-color: color-mix(in srgb, var(--color-surface-container-highest) var(--bg-opacity, 100%), transparent);}.py-0{padding-top: 0; padding-bottom: 0;}.hover\:color-primary:hover{color: var(--color-primary);}.max-w-m{max-width: 28rem;}.hover\:back-surface-container-low:hover{background-color: color-mix(in srgb, var(--color-surface-container-low) var(--bg-opacity, 100%), transparent);}.mb-2{margin-bottom: 8px;}.back-error-container{background-color: color-mix(in srgb, var(--color-error-container) var(--bg-opacity, 100%), transparent);}.color-on-error-container{color: var(--color-on-error-container);}.pl-4{padding-left: 16px;}.pr-1{padding-right: 4px;}.color-on-primary-container{color: var(--color-on-primary-container);}.opacity-70{opacity: 0.7;}.leading-tight{line-height: 1.15;}.max-w-l{max-width: 32rem;}.w-screen{width: 100vw;}.max-w-screen-compact{max-width: var(--breakpoint-compact);}.self-center{align-self: center;}.gap-0{gap: 0;}.pt-8{padding-top: 32px;}.pb-6{padding-bottom: 24px;}.opacity-40{opacity: 0.4;}.top-2{top: 8px;}.right-2{right: 8px;}.touch-manipulation{touch-action: manipulation;}.justify-start{justify-content: flex-start;}.min-w-12{min-width: 48px;}.py-6{padding-top: 24px; padding-bottom: 24px;}@media (min-width: 600px){.w-full-mobile{width: fit-content;}}@media (min-width: 600px){.adaptive-grid-cols-2{grid-template-columns: repeat(2, minmax(0, 1fr));}}@media (min-width: 1200px){.l\:block{display: block;}}@media (min-width: 600px){.s\:flex-row{flex-direction: row;}}/* #insight Scoped semantic styles for adaptive popover and mobile sheet */

@layer components {
  @media (max-width: 839px) {
    .adaptive-popover-desktop-panel,
    .adaptive-popup-desktop-panel {
      display: none !important;
    }
  }

  @media (min-width: 840px) {
    .adaptive-popover-mobile-sheet,
    .adaptive-popup-mobile-sheet {
      display: none !important;
    }
  }

  @scope (.adaptive-popover-desktop-panel, [popover].adaptive-popover-desktop-panel, .adaptive-popup-desktop-panel, [popover].adaptive-popup-desktop-panel) {
    :scope {
      inline-size: min(24rem, calc(100dvi - 1rem));
      max-inline-size: min(24rem, calc(100dvi - 1rem));
      max-block-size: min(32rem, calc(100dvb - 1rem));
      padding: 0;
      background: var(--color-surface-container-high);
      color: var(--color-on-surface);
      border: none;
      border-radius: var(--radius-xl, 28px);
      box-shadow: var(--shadow-3);
      overflow: hidden;
      overscroll-behavior: contain;
      inset: 0;
      margin: auto;
      position: fixed;
      transform-origin: top center;
      transition: opacity var(--motion-duration-short, 200ms) var(--motion-spring-effects, cubic-bezier(0.2, 0, 0, 1)),
                  scale var(--motion-duration-short, 200ms) var(--motion-spring-spatial-default, cubic-bezier(0.16, 1, 0.3, 1)),
                  display var(--motion-duration-short, 200ms) allow-discrete,
                  overlay var(--motion-duration-short, 200ms) allow-discrete;
    }

    :scope:popover-open {
      opacity: 1;
      scale: 1;

      @starting-style {
        opacity: 0;
        scale: 0.96;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      :scope {
        transition: none;
      }
    }

    :scope::backdrop {
      background: transparent;
    }
  }

  @supports (anchor-name: --test) {
    @media (min-width: 840px) {
      @scope (.adaptive-popover-desktop-panel, [popover].adaptive-popover-desktop-panel, .adaptive-popup-desktop-panel, [popover].adaptive-popup-desktop-panel) {
        :scope {
          position: fixed;
          inset: auto;
          position-area: block-end span-inline-start;
          position-try-fallbacks: flip-block, flip-inline;
          margin-block-start: var(--space-1, 4px);
        }

        &:is([data-adaptive-popover-placement="bottom-start"]) {
          position-area: block-end span-inline-end;
        }

        &:is([data-adaptive-popover-placement="top-end"]) {
          position-area: block-start span-inline-start;
          margin-block-start: 0;
          margin-block-end: var(--space-2, 8px);
        }

        &:is([data-adaptive-popover-placement="top-start"]) {
          position-area: block-start span-inline-end;
          margin-block-start: 0;
          margin-block-end: var(--space-2, 8px);
        }
      }
    }
  }
}
/* #ref https://m3.material.io/components/avatar/overview */
/* #insight Scoped semantic styles for avatar */

@layer components {
  @scope (.avatar) {
    :scope {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-full, 9999px);
      overflow: hidden;
      user-select: none;
      flex-shrink: 0;
      position: relative;
    }

    :scope:is(.avatar--squircle, [data-shape="squircle"], [data-kind="agent"]) {
      border-radius: 28% !important;
      border: none !important;
      box-shadow: none !important;
      clip-path: shape(
        from 50% 0%,
        curve to 100% 50% with 92% 0% / 100% 8%,
        curve to 50% 100% with 100% 92% / 92% 100%,
        curve to 0% 50% with 8% 100% / 0% 92%,
        curve to 50% 0% with 0% 8% / 8% 0%,
        close
      );
    }

    :scope:is(.avatar--square, [data-shape="square"], [data-kind="org"]) {
      border-radius: 16% !important;
      border: none !important;
      box-shadow: none !important;
      clip-path: none !important;
      -webkit-mask-image: none !important;
      mask-image: none !important;
    }

    :scope:is(.avatar--squircle, [data-shape="squircle"], [data-kind="agent"]) img {
      border-radius: 0 !important;
    }

    :scope > span:not(.material-symbols-rounded),
    .avatar-fallback > span:not(.material-symbols-rounded) {
      text-box: trim-both cap alphabetic;
      line-height: 1;
    }

    .avatar-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: inherit;
      display: block;
    }

    .avatar-fallback {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }

    .avatar-fallback[hidden],
    .avatar-image[hidden],
    :scope > [hidden],
    [hidden] {
      display: none !important;
    }
  }
}
/* #ref https://m3.material.io/components/banners/overview */
/* #insight Scoped semantic styles for Material 3 & Naisu Banner */

@layer components {
  @scope (.banner) {
    :scope {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: var(--space-3, 12px);
      border-radius: var(--radius-lg, 16px);
      padding: var(--space-3, 12px) var(--space-4, 16px);
      background-color: var(--color-surface-container);
      color: var(--color-on-surface);
      box-shadow: none;
    }

    &.banner-compact {
      border-radius: var(--radius-md, 12px);
      padding: var(--space-2, 8px) var(--space-3, 12px);
    }

    &.banner-prominent {
      border-radius: var(--radius-xl, 24px);
      padding: var(--space-4, 16px) var(--space-5, 20px);
    }

    &.banner-accent-bar {
      border-radius: var(--radius-md, 12px);
      border-inline-start: 4px solid var(--color-primary);
    }

    &.banner-neutral {
      background-color: var(--color-surface-container);
      color: var(--color-on-surface);
      border: 1px solid color-mix(in srgb, var(--color-outline-variant) 40%, transparent);
    }

    &.banner-neutral.banner-accent-bar {
      border-inline-start: 4px solid var(--color-outline);
    }

    &.banner-info {
      background-color: var(--color-primary-container);
      color: var(--color-on-primary-container);
    }

    &.banner-info.banner-accent-bar {
      border-inline-start: 4px solid var(--color-primary);
    }

    &.banner-success {
      background-color: var(--color-tertiary-container);
      color: var(--color-on-tertiary-container);
    }

    &.banner-success.banner-accent-bar {
      border-inline-start: 4px solid var(--color-tertiary);
    }

    &.banner-warning {
      background-color: var(--color-secondary-container);
      color: var(--color-on-secondary-container);
    }

    &.banner-warning.banner-accent-bar {
      border-inline-start: 4px solid var(--color-secondary);
    }

    &.banner-error {
      background-color: var(--color-error-container);
      color: var(--color-on-error-container);
    }

    &.banner-error.banner-accent-bar {
      border-inline-start: 4px solid var(--color-error);
    }

    .banner-row {
      display: flex;
      align-items: flex-start;
      gap: var(--space-3, 12px);
    }

    .banner-icon-wrap {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-full, 9999px);
      flex-shrink: 0;
      background-color: color-mix(in srgb, currentColor 10%, transparent);
    }

    .banner-main {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: var(--space-2, 8px);
    }

    .banner-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--space-2, 8px);
    }

    .banner-body {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: var(--space-1, 4px);
    }

    .banner-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 2.5rem;
      border-radius: var(--radius-full, 9999px);
      padding: var(--space-2, 8px) var(--space-4, 16px);
      cursor: pointer;
      border: none;
      text-decoration: none;
    }

    .banner-dismiss {
      margin: -0.5rem -0.5rem -0.5rem 0;
      flex-shrink: 0;
    }
  }
}
/* #ref https://m3.material.io/components/bottom-sheets/overview */
/* #ref https://m3.material.io/components/bottom-sheets/specs */

@layer components {
  @scope (.bottom-sheet, dialog.bottom-sheet) {
    :scope {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      top: auto;
      margin: 0 auto;
      inline-size: min(100%, 44rem);
      max-inline-size: 100vw;
      border: none !important;
      outline: none !important;
      border-radius: var(--radius-xl) var(--radius-xl) 0 0;
      padding: 0.75rem var(--container-spacing, 16px) max(var(--container-spacing, 16px), calc(var(--container-spacing, 16px) + env(safe-area-inset-bottom)));
      background: var(--color-surface-container-high);
      color: var(--color-on-surface);
      overflow: visible;
      overscroll-behavior: contain;
      box-shadow: 0 -2px 10px color-mix(in srgb, var(--color-shadow) 16%, transparent),
                  0 -8px 24px color-mix(in srgb, var(--color-shadow) 28%, transparent);
      transform: translateY(100%);
      transition: transform var(--motion-duration-short) var(--motion-easing-emphasized-decelerate),
                  opacity var(--motion-duration-short), display var(--motion-duration-short), overlay var(--motion-duration-short);
      transition-behavior: allow-discrete;
      will-change: transform;
    }

    :scope::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      height: 20rem;
      background: inherit;
      border: none !important;
    }

    :scope[open] {
      transform: translateY(0);
      transition: transform 450ms var(--motion-spring-spatial-default, cubic-bezier(0.16, 1, 0.3, 1)),
                  opacity var(--motion-duration-short), display var(--motion-duration-short), overlay var(--motion-duration-short);
      will-change: transform;
    }

    :scope:has(:where(input:not([type="hidden"]):not([type="range"]):not([type="file"]), textarea, select, [contenteditable="true"])) {
      bottom: var(--visual-viewport-offset-bottom, 0px);
      max-height: calc(var(--visual-viewport-height, 100dvh) - 1rem);
    }

    @starting-style {
      :scope[open] {
        transform: translateY(100%);
      }
    }

    :scope.closing {
      transform: translateY(100%) !important;
      transition: transform var(--motion-duration-short) var(--motion-easing-emphasized-decelerate) !important;
    }

    :scope.dragging {
      transition: none;
    }

    :scope::backdrop {
      background: color-mix(in srgb, var(--color-scrim) 40%, transparent);
      opacity: 0;
      transition: opacity var(--motion-duration-short) var(--motion-easing-emphasized-decelerate), display var(--motion-duration-short), overlay var(--motion-duration-short);
      transition-behavior: allow-discrete;
    }

    :scope[open]::backdrop {
      opacity: 1;
      transition: opacity var(--motion-duration-short) var(--motion-easing-emphasized-decelerate), display var(--motion-duration-short), overlay var(--motion-duration-short);
    }

    @starting-style {
      :scope[open]::backdrop {
        opacity: 0;
      }
    }

    :scope.closing::backdrop {
      opacity: 0 !important;
      transition: opacity var(--motion-duration-short) var(--motion-easing-emphasized-decelerate) !important;
    }

    .bottom-sheet-header {
      cursor: grab;
      user-select: none;
      display: block;
      min-height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    :scope.dragging .bottom-sheet-header {
      cursor: grabbing;
    }

    .bottom-sheet-handle {
      width: 2rem;
      height: 0.25rem;
      margin: 0 auto 0.75rem;
      border-radius: var(--radius-full);
      background: var(--color-outline-variant);
      cursor: pointer;
      transition: scale var(--motion-duration-short, 200ms) var(--motion-spring-spatial-fast, cubic-bezier(0.22, 1.25, 0.36, 1));
    }

    :scope.dragging .bottom-sheet-handle {
      scale: 1.15 1;
    }

    .bottom-sheet-title {
      font-family: var(--font-family-brand);
      font-size: 1.5rem;
      font-weight: var(--font-weight-regular);
      line-height: 2rem;
      margin: 0 0 12px;
      text-box: trim-both cap alphabetic;
    }

    .bottom-sheet-title:has(+ .bottom-sheet-description:not([hidden])) {
      margin-bottom: 4px;
    }

    .bottom-sheet-description {
      color: var(--color-on-surface-variant);
      font-family: var(--font-family-plain);
      font-size: 0.875rem;
      font-weight: var(--font-weight-regular);
      line-height: 1.25rem;
      margin: 0 0 12px;
    }

    .bottom-sheet-body {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-2, 8px);
      padding: 0;
      max-block-size: min(65dvh, 28rem);
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    :scope[data-dismiss-on-select] .bottom-sheet-body {
      gap: 2px;
    }

    .bottom-sheet-body > :is(hr, .menu-divider) {
      height: 1px;
      border: none;
      background-color: var(--color-outline-variant);
      margin: 2px 0;
      width: 100%;
    }

    .bottom-sheet-actions {
      display: flex;
      justify-content: flex-end;
      margin-top: var(--space-2);
    }

    .bottom-sheet-dismiss {
      height: 40px;
      padding-left: var(--space-4);
      padding-right: var(--space-4);
      border-radius: var(--radius-full);
      border: none;
      cursor: pointer;
      font-family: var(--font-family-plain);
      font-size: 0.875rem;
      font-weight: var(--font-weight-medium);
      background-color: var(--color-secondary-container);
      color: var(--color-on-secondary-container);
    }
  }
}

@media (min-width: 840px) {
  dialog.bottom-sheet.mobile-only-bottom-sheet,
  .mobile-only-bottom-sheet {
    display: none !important;
  }
}
/* #ref https://m3.material.io/components/buttons/overview */
/* #ref https://m3.material.io/components/icon-buttons/overview */
/* #insight Scoped semantic CSS avoids 15-20 utility classes per element, cutting DOM token weight by ~75% for AI agents while providing stable semantic selectors */

@layer components {
  @scope (.button) {
    :scope {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: fit-content;
      gap: var(--space-2);
      height: 40px;
      padding: 0 var(--space-4);
      border-radius: var(--radius-full, 9999px);
      border: none;
      font-family: var(--font-family-plain);
      font-size: 0.875rem;
      font-weight: var(--font-weight-medium);
      line-height: 1.25rem;
      position: relative;
      overflow: hidden;
      white-space: nowrap;
      text-decoration: none;
      cursor: pointer;
      user-select: none;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      transition: scale var(--motion-duration-short, 200ms) var(--motion-spring-spatial-fast, cubic-bezier(0.22, 1.25, 0.36, 1));
    }

    &:not([popovertarget]):not([commandfor]):not([data-adaptive-popover-trigger]):not([data-menu-popover-trigger]):not([style*="anchor-name"]):active:not(:disabled):not([aria-disabled="true"]) {
      scale: 0.97;
    }

    &:is([popovertarget], [commandfor], [data-adaptive-popover-trigger], [data-menu-popover-trigger], [style*="anchor-name"]):active:not(:disabled):not([aria-disabled="true"]) > :is(.label, .icon, .material-symbols-rounded, .material-symbols-outlined) {
      scale: 0.96;
    }

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background-color: currentColor;
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--motion-duration-short) var(--motion-spring-effects, linear);
      z-index: 0;
    }

    &:hover::before { opacity: 0.08; }
    &:active::before { opacity: 0.12; }

    &:disabled, &[aria-disabled="true"] {
      opacity: 0.38;
      cursor: default;
      pointer-events: none;
    }

    & > :is(.label, .icon, .material-symbols-rounded, .material-symbols-outlined) {
      position: relative;
      z-index: 1;
      transition: scale var(--motion-duration-short, 200ms) var(--motion-spring-spatial-fast, cubic-bezier(0.22, 1.25, 0.36, 1));
    }

    & > .label {
      display: inline-block;
      text-box: trim-both cap alphabetic;
    }

    /* Standard Variants */
    &.button-primary {
      background-color: var(--color-primary);
      color: var(--color-on-primary);
    }
    &.button-primary-container {
      background-color: var(--color-primary-container);
      color: var(--color-on-primary-container);
    }
    &.button-secondary {
      background-color: var(--color-secondary);
      color: var(--color-on-secondary);
    }
    &.button-secondary-container {
      background-color: var(--color-secondary-container);
      color: var(--color-on-secondary-container);
    }
    &.button-tertiary {
      background-color: var(--color-tertiary);
      color: var(--color-on-tertiary);
    }
    &.button-tertiary-container {
      background-color: var(--color-tertiary-container);
      color: var(--color-on-tertiary-container);
    }
    &.button-outlined {
      background-color: transparent;
      border: 1px solid var(--color-outline);
      color: var(--color-primary);

      &.button-error,
      &.color-error {
        background-color: transparent !important;
        border-color: var(--color-error);
        color: var(--color-error) !important;
      }

      &.button-error:hover,
      &.color-error:hover {
        background-color: color-mix(in srgb, var(--color-error) 12%, transparent) !important;
      }
    }
    &.button-outlined-error {
      background-color: transparent !important;
      border: 1px solid var(--color-error);
      color: var(--color-error) !important;
    }
    &.button-outlined-error:hover {
      background-color: color-mix(in srgb, var(--color-error) 12%, transparent) !important;
    }
    &.button-text {
      background-color: transparent;
      color: var(--color-primary);
      padding: 0 var(--space-3);

      &.color-error,
      &.button-error {
        background-color: transparent !important;
        color: var(--color-error) !important;
      }

      &.color-error:hover,
      &.button-error:hover {
        background-color: color-mix(in srgb, var(--color-error) 12%, transparent) !important;
      }
    }
    &.button-text-error {
      background-color: transparent !important;
      color: var(--color-error) !important;
      padding: 0 var(--space-3);
    }
    &.button-text-error:hover {
      background-color: color-mix(in srgb, var(--color-error) 12%, transparent) !important;
    }
    &.button-ghost {
      background-color: transparent;
      color: var(--color-on-surface);
      padding: 0 var(--space-3);
    }
    &.button-ghost:hover {
      background-color: var(--color-surface-container-high);
    }
    &.button-error {
      background-color: var(--color-error);
      color: var(--color-on-error);
    }
    &.button-error-container {
      background-color: var(--color-error-container);
      color: var(--color-on-error-container);
    }

    /* Adaptive Width: full-width on mobile (<600px), natural fit-content on desktop (>=600px) */
    &.w-full-mobile,
    &.button-full-mobile {
      width: 100%;

      @media (min-width: 600px) {
        width: fit-content;
      }
    }
  }

  @scope (.icon-button) {
    :scope {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      padding: var(--space-2);
      border-radius: var(--radius-full, 9999px);
      border: none;
      color: var(--color-on-surface-variant);
      background-color: transparent;
      position: relative;
      overflow: visible;
      text-decoration: none;
      cursor: pointer;
      user-select: none;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }

    &:hover {
      background-color: var(--color-surface-container-high);
    }

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background-color: currentColor;
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--motion-duration-short) var(--motion-spring-effects, linear);
      z-index: 0;
    }

    &::after {
      content: "";
      position: absolute;
      inset: min(0px, calc((100% - 48px) / 2));
    }

    &:hover::before { opacity: 0.08; }
    &:active::before { opacity: 0.12; }

    &:disabled, &[aria-disabled="true"] {
      opacity: 0.38;
      cursor: default;
      pointer-events: none;
    }

    & > .icon-button-icon {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: scale var(--motion-duration-short, 200ms) var(--motion-spring-spatial-fast, cubic-bezier(0.22, 1.25, 0.36, 1));
    }

    &:active:not(:disabled):not([aria-disabled="true"]) > .icon-button-icon {
      scale: 0.9;
    }

    &[aria-pressed="true"] {
      color: var(--color-primary);
    }

    &[aria-pressed="true"] > .icon-button-icon {
      font-variation-settings: 'FILL' 1 !important;
    }

    &[aria-pressed="false"] > .icon-button-icon {
      font-variation-settings: 'FILL' 0 !important;
    }
  }

  @scope (.fab) {
    :scope {
      position: relative;
      overflow: visible;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      user-select: none;
      white-space: nowrap;
      text-decoration: none;
      border: none;
      outline: none;
      cursor: pointer;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      box-shadow: var(--shadow-3);
      transition: scale var(--motion-duration-short, 200ms) var(--motion-spring-spatial-fast, cubic-bezier(0.22, 1.25, 0.36, 1));
    }

    &:focus,
    &:focus-visible {
      outline: none;
    }

    &:active:not(:disabled):not([aria-disabled="true"]) {
      scale: 0.96;
    }

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background-color: currentColor;
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--motion-duration-short, 200ms) var(--motion-spring-effects, linear);
      z-index: 0;
    }

    &:hover::before { opacity: 0.08; }
    &:active::before { opacity: 0.12; }

    &::after {
      content: "";
      position: absolute;
      inset: min(0px, calc((100% - 48px) / 2));
    }

    &.fab-lowered {
      box-shadow: var(--shadow-1);
    }

    &.fab-small {
      width: 40px;
      height: 40px;
      min-height: 40px;
      border-radius: var(--radius-lg, 16px);
    }

    &.fab-standard {
      width: 56px;
      height: 56px;
      min-height: 56px;
      border-radius: 24px;
    }

    &.fab-large {
      width: 96px;
      height: 96px;
      min-height: 96px;
      border-radius: var(--radius-xl, 28px);
    }

    &.fab-extended {
      width: fit-content;
    }

    &.fab-extended.fab-small {
      padding: 0 var(--space-4, 16px);
      gap: var(--space-2, 8px);
    }

    &.fab-extended.fab-standard {
      padding: 0 var(--space-5, 20px);
      gap: var(--space-3, 12px);
    }

    &.fab-extended.fab-large {
      padding: 0 var(--space-7, 28px);
      gap: var(--space-4, 16px);
    }

    &.fab-primary-container {
      background-color: var(--color-primary-container);
      color: var(--color-on-primary-container);
    }

    &.fab-secondary-container {
      background-color: var(--color-secondary-container);
      color: var(--color-on-secondary-container);
    }

    &.fab-tertiary-container {
      background-color: var(--color-tertiary-container);
      color: var(--color-on-tertiary-container);
    }

    &.fab-primary {
      background-color: var(--color-primary);
      color: var(--color-on-primary);
    }

    &.fab-secondary {
      background-color: var(--color-secondary);
      color: var(--color-on-secondary);
    }

    &.fab-tertiary {
      background-color: var(--color-tertiary);
      color: var(--color-on-tertiary);
    }

    &.fab-surface {
      background-color: var(--color-surface-container-high);
      color: var(--color-on-surface);
      border: 1px solid var(--color-outline-variant);
    }

    .fab-icon {
      position: relative;
      z-index: 1;
      font-size: 1.5rem;
      line-height: 1;
    }

    &.fab-small .fab-icon {
      font-size: 1.25rem;
    }

    &.fab-large .fab-icon {
      font-size: 2.25rem;
    }

    .fab-label {
      position: relative;
      z-index: 1;
      display: inline-block;
      font-family: var(--font-family-plain);
      font-size: var(--type-title-m-size, 1rem);
      font-weight: var(--font-weight-medium, 500);
      line-height: var(--type-title-m-line-height, 1.5rem);
      text-box: trim-both cap alphabetic;
    }

    &.fab-small .fab-label {
      font-size: var(--type-label-l-size, 0.875rem);
      line-height: var(--type-label-l-line-height, 1.25rem);
    }

    &.fab-large .fab-label {
      font-size: var(--type-title-l-size, 1.375rem);
      line-height: var(--type-title-l-line-height, 1.75rem);
    }

    &:disabled,
    &[aria-disabled="true"] {
      opacity: 0.38;
      cursor: default;
      pointer-events: none;
    }
  }
}
/* #ref https://m3.material.io/components/cards/overview */
/* #insight Scoped semantic styles for Material 3 & Naisu Card */

@layer components {
  @scope (.card) {
    :scope {
      display: flex;
      flex-direction: column;
      gap: var(--space-3, 12px);
      border-radius: var(--radius-xl);
      padding: var(--space-4);
      color: var(--color-on-surface);
      background-color: var(--color-surface-container-highest);
      min-width: 0;
    }

    &.corner-s { border-radius: var(--radius-sm); }
    &.corner-m { border-radius: var(--radius-md); }
    &.corner-l { border-radius: var(--radius-lg); }
    &.corner-xl { border-radius: var(--radius-xl); }

    :where(&.card-low) {
      background-color: var(--color-surface-container-low);
      padding: var(--space-6, 24px);
      gap: var(--space-4, 16px);
      border: 1px solid color-mix(in srgb, var(--color-outline-variant) 40%, transparent);
    }

    :where(&.card-danger) {
      background-color: color-mix(in srgb, var(--color-error) 6%, var(--color-surface-container-low));
      padding: var(--space-6, 24px);
      gap: var(--space-4, 16px);
      border: 1px solid color-mix(in srgb, var(--color-error) 35%, transparent);
    }

    &.card-elevated {
      background-color: var(--color-surface-container-low);
      box-shadow: var(--shadow-1);
    }

    &.card-outlined {
      background-color: var(--color-surface);
      border: 1px solid var(--color-outline-variant);
    }

    :where(h2:not([class])), :where(.card-title) {
      font-family: var(--font-family-plain);
      font-size: 1.375rem;
      line-height: 1.75rem;
      font-weight: var(--font-weight-medium, 500);
      letter-spacing: 0;
      margin: 0;
      color: var(--color-on-surface);
    }

    &.card-danger :where(.card-title) {
      color: var(--color-error);
    }

    :where(.card-subtitle) {
      font-family: var(--font-family-plain);
      font-size: 0.875rem;
      line-height: 1.25rem;
      color: var(--color-on-surface-variant);
      margin: 0;
    }

    .card-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--space-3, 12px);
      min-width: 0;
    }

    .card-header-main {
      display: flex;
      flex-direction: column;
      gap: var(--space-1, 4px);
      min-width: 0;
      flex: 1;
    }

    .card-title-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--space-2, 8px);
      min-width: 0;
    }

    .card-header-trailing {
      display: flex;
      align-items: center;
      gap: var(--space-2, 8px);
      flex-shrink: 0;
    }

    .card-fieldset {
      border: none;
      padding: 0;
      margin: 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: inherit;
    }

    .card-fieldset > legend.card-title {
      padding: 0;
      margin: 0 0 var(--space-2, 8px) 0;
      float: none;
      width: 100%;
    }

    .card-fieldset > legend.card-title + .card-subtitle {
      margin-top: calc(-1 * var(--space-1, 4px));
      margin-bottom: var(--space-1, 4px);
    }

    .card-section {
      display: flex;
      flex-direction: column;
      gap: var(--space-4, 16px);
      min-width: 0;
    }

    .card-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      gap: var(--space-2, 8px);
    }

    :where(hr) {
      border: none;
      border-top: 1px solid color-mix(in srgb, var(--color-outline-variant) 40%, transparent);
      margin: var(--space-1, 4px) 0;
      width: 100%;
    }

    hr.danger-zone-divider {
      border-top-color: color-mix(in srgb, var(--color-error) 25%, transparent);
    }

    form {
      margin: 0;
    }

    .card-resize-handle {
      margin-top: var(--space-4);
      padding-top: var(--space-1);
      width: 100%;
      display: flex;
      justify-content: center;
      border: none;
      background: transparent;
      touch-action: none;
      user-select: none;
      cursor: ns-resize;
    }

    .card-resize-pill {
      width: 2rem;
      height: 0.25rem;
      border-radius: var(--radius-full);
      background: var(--color-outline-variant);
      cursor: inherit;
    }
  }
}
/* #ref https://m3.material.io/components/checkbox/overview */
/* #insight Scoped semantic styles for checkbox */

@layer components {
  @scope (.checkbox-root) {
    :scope {
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      user-select: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      width: 48px;
      height: 48px;
      border-radius: var(--radius-full, 9999px);
      cursor: pointer;
    }

    :scope:has(input:disabled) {
      opacity: 0.38;
      pointer-events: none;
      cursor: default;
    }

    .checkbox-input {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      margin: 0;
      opacity: 0;
      cursor: pointer;
      z-index: 2;
    }

    .checkbox-state-layer {
      position: absolute;
      inset: 4px;
      border-radius: var(--radius-full, 9999px);
      background-color: var(--color-primary);
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--motion-duration-short, 200ms) var(--motion-spring-effects, linear);
    }

    :scope:hover .checkbox-state-layer {
      opacity: 0.08;
    }

    :scope:active .checkbox-state-layer {
      opacity: 0.12;
    }

    .checkbox-visual {
      position: relative;
      z-index: 1;
      width: 20px;
      height: 20px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid var(--color-on-surface-variant);
      background-color: transparent;
      color: var(--color-on-primary);
      border-radius: var(--radius-xs, 4px);
      pointer-events: none;
      transition: scale var(--motion-duration-short, 200ms) var(--motion-spring-spatial-fast, cubic-bezier(0.22, 1.25, 0.36, 1));
    }

    :scope:active .checkbox-visual {
      scale: 0.9;
    }

    .checkbox-input:hover + .checkbox-state-layer + .checkbox-visual {
      border-color: var(--color-on-surface);
    }

    .checkbox-input:checked + .checkbox-state-layer + .checkbox-visual {
      background-color: var(--color-primary);
      color: var(--color-on-primary);
      border-color: var(--color-primary);
    }

    .checkbox-visual svg,
    .checkbox-icon {
      width: 16px;
      height: 16px;
      scale: 0;
      transition: scale var(--motion-duration-short, 200ms) var(--motion-spring-spatial-fast, cubic-bezier(0.22, 1.25, 0.36, 1));
    }

    .checkbox-input:checked + .checkbox-state-layer + .checkbox-visual svg,
    .checkbox-input:checked + .checkbox-state-layer + .checkbox-visual .checkbox-icon {
      scale: 1;
    }
  }

  @scope (.radio-root) {
    :scope {
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      user-select: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      width: 48px;
      height: 48px;
      border-radius: var(--radius-full, 9999px);
      cursor: pointer;
    }

    :scope:has(input:disabled) {
      opacity: 0.38;
      pointer-events: none;
      cursor: default;
    }

    .radio-input {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      margin: 0;
      opacity: 0;
      cursor: pointer;
      z-index: 2;
    }

    .radio-state-layer {
      position: absolute;
      inset: 4px;
      border-radius: var(--radius-full, 9999px);
      background-color: var(--color-primary);
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--motion-duration-short, 200ms) var(--motion-spring-effects, linear);
    }

    :scope:hover .radio-state-layer {
      opacity: 0.08;
    }

    :scope:active .radio-state-layer {
      opacity: 0.12;
    }

    .radio-visual {
      position: relative;
      z-index: 1;
      width: 20px;
      height: 20px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-full, 9999px);
      border: 2px solid var(--color-on-surface-variant);
      pointer-events: none;
      transition: scale var(--motion-duration-short, 200ms) var(--motion-spring-spatial-fast, cubic-bezier(0.22, 1.25, 0.36, 1));
    }

    :scope:active .radio-visual {
      scale: 0.9;
    }

    .radio-dot {
      width: 10px;
      height: 10px;
      border-radius: var(--radius-full, 9999px);
      background-color: var(--color-primary);
      scale: 0;
      transition: scale var(--motion-duration-short, 200ms) var(--motion-spring-spatial-fast, cubic-bezier(0.22, 1.25, 0.36, 1));
    }

    .radio-input:hover + .radio-state-layer + .radio-visual {
      border-color: var(--color-on-surface);
    }

    .radio-input:checked + .radio-state-layer + .radio-visual {
      border-color: var(--color-primary);
    }

    .radio-input:checked + .radio-state-layer + .radio-visual .radio-dot {
      scale: 1;
    }
  }
}
/* #ref https://m3.material.io/components/chips/overview */
/* #insight Scoped semantic styles for Material 3 Chips and Chip Sets */

@layer components {
  @scope (.chip-set, [data-chip-set]) {
    :scope {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      width: 100%;
      max-width: 100%;
    }

    &.chip-set-wrap {
      flex-wrap: wrap;
    }

    &.chip-set-scrollable {
      overflow-x: auto;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      padding-block: var(--space-1);
    }

    &.chip-set-scrollable::-webkit-scrollbar {
      display: none;
    }

    /* On desktop viewports (>= 840px), wrap filter chips gracefully */
    @media (min-width: 840px) {
      &.chip-set-scrollable {
        flex-wrap: wrap;
        overflow-x: visible;
      }
    }
  }

  @scope (.chip, [data-chip]) {
    :scope {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: visible;
      height: 32px;
      padding: 0 var(--space-3);
      border-radius: var(--radius-sm);
      border: 1px solid var(--color-outline-variant);
      background-color: var(--color-surface);
      color: var(--color-on-surface);
      font-family: var(--font-family-plain);
      font-size: 0.875rem;
      font-weight: var(--font-weight-medium);
      user-select: none;
      cursor: pointer;
      text-decoration: none;
      white-space: nowrap;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      transition: scale var(--motion-duration-short) var(--motion-spring-spatial-fast, cubic-bezier(0.22, 1.25, 0.36, 1));
    }

    &:active:not(:disabled):not([aria-disabled="true"]) {
      scale: 0.97;
    }

    :scope:visited {
      color: inherit;
    }

    /* M3 State Layer */
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background-color: currentColor;
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--motion-duration-short) linear;
      z-index: 0;
    }

    &:hover::before {
      opacity: 0.08;
    }

    &:active::before {
      opacity: 0.12;
    }

    /* Mobile-first 48px minimum touch target */
    &::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      min-width: 48px;
      min-height: 48px;
      width: 100%;
      height: 100%;
      pointer-events: auto;
      z-index: 1;
    }

    & > .chip-content,
    & > span {
      position: relative;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
    }

    .chip-label {
      text-box: trim-both cap alphabetic;
    }

    &.chip-suggestion {
      border: none;
      background-color: var(--color-surface-container-high);
    }

    &.chip-input {
      border: none;
      background-color: var(--color-secondary-container);
      color: var(--color-on-secondary-container);
    }

    &.is-selected,
    &.chip-selected {
      background-color: var(--color-secondary-container);
      color: var(--color-on-secondary-container);
      border-color: transparent;
    }

    &:disabled,
    &[aria-disabled='true'] {
      opacity: 0.38;
      cursor: not-allowed;
      pointer-events: none;
    }

    .chip-remove-button {
      position: relative;
      z-index: 3;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      border-radius: var(--radius-full);
      border: none;
      background: transparent;
      color: inherit;
      cursor: pointer;
      padding: 0;
    }

    .chip-remove-button::after {
      content: "";
      position: absolute;
      inset: -12px -6px;
      min-height: 48px;
      min-width: 36px;
    }
  }
}
/* #ref https://m3.material.io/components/date-pickers/overview */
/* #insight Scoped semantic styles for date picker field and popover */

@layer components {
  @scope (.date-picker-field) {
    :scope {
      position: relative;
      display: grid;
      gap: var(--space-1, 4px);
      min-width: 0;
      width: 100%;
    }

    @media (min-width: 600px) {
      :scope:not(.date-picker-field-full) {
        max-width: var(--form-control-max-width, 28rem);
      }

      :is(dialog, [popover], .grid) :scope:not(.date-picker-field-full) {
        max-width: none;
      }
    }

    .date-picker-trigger {
      appearance: none;
      -webkit-appearance: none;
      box-sizing: border-box;
      min-height: 50px;
      padding-top: 20px;
      padding-bottom: 6px;
    }

    .date-picker-trigger:hover:not(:focus):not(:disabled) {
      border-color: var(--color-on-surface);
    }

    :scope:has(.date-picker-trigger:focus) .date-picker-trigger,
    :scope:has([popover]:popover-open) .date-picker-trigger {
      border-color: var(--color-primary);
      box-shadow: inset 0 0 0 1px var(--color-primary);
    }

    .date-picker-icon {
      position: absolute;
      top: 50%;
      right: 16px;
      translate: 0 -50%;
      pointer-events: none;
      font-size: 1.5rem;
      transition: rotate var(--motion-duration-short, 200ms) var(--motion-easing-standard);
    }

    :scope:has(.date-picker-trigger:focus) .date-picker-icon,
    :scope:has([popover]:popover-open) .date-picker-icon {
      color: var(--color-primary);
    }

    .date-picker-label {
      position: absolute;
      left: 16px;
      padding: 0;
      pointer-events: none;
      top: 50%;
      transform-origin: left top;
      translate: 0 -50%;
      scale: 1;
      line-height: 1;
      transition: translate var(--motion-duration-short, 200ms) var(--motion-easing-standard),
                  scale var(--motion-duration-short, 200ms) var(--motion-easing-standard);
    }

    :scope:has(.date-picker-trigger:focus) .date-picker-label,
    :scope:has([popover]:popover-open) .date-picker-label,
    :scope:has([data-empty='false']) .date-picker-label {
      translate: 0 calc(-50% - 10px);
      scale: 0.75;
    }

    :scope:has(.date-picker-trigger:focus) .date-picker-label,
    :scope:has([popover]:popover-open) .date-picker-label {
      color: var(--color-primary);
    }

    :scope:not(:has(.date-picker-trigger:focus)):not(:has([popover]:popover-open)):has([data-empty='true']) [data-empty='true'] {
      opacity: 0;
      transition: opacity var(--motion-duration-short, 200ms) var(--motion-easing-standard);
    }

    :scope:has(.date-picker-trigger:focus) [data-empty='true'],
    :scope:has([popover]:popover-open) [data-empty='true'] {
      opacity: 0.64;
      transition: opacity var(--motion-duration-short, 200ms) var(--motion-easing-standard);
    }

    .date-picker-trigger:disabled {
      border-color: color-mix(in srgb, var(--color-on-surface) 12%, transparent);
      background-color: transparent;
      color: color-mix(in srgb, var(--color-on-surface) 38%, transparent);
      cursor: not-allowed;
    }

    :scope:has(.date-picker-trigger:disabled) .date-picker-label {
      color: color-mix(in srgb, var(--color-on-surface) 38%, transparent);
      background-color: transparent;
    }

    :scope:has(.date-picker-trigger:disabled) .date-picker-icon {
      color: color-mix(in srgb, var(--color-on-surface) 38%, transparent);
    }

    .date-picker-display-text {
      color: var(--color-on-surface);
    }

    .date-picker-display-text[data-empty='true'] {
      color: var(--color-on-surface-variant) !important;
    }

    .date-picker-supporting {
      font-family: var(--font-family-plain);
      font-size: 0.75rem;
      line-height: 1rem;
      padding-inline: var(--space-4, 16px);
      color: var(--color-on-surface-variant);
    }

    .date-picker-error {
      font-family: var(--font-family-plain);
      font-size: 0.75rem;
      line-height: 1rem;
      padding-inline: var(--space-4, 16px);
      color: var(--color-error);
    }
  }

  @scope (.date-picker-popover) {
    :scope {
      overflow: hidden;
    }

    .date-picker-popover-head {
      padding: var(--space-4, 16px) var(--space-4, 16px) var(--space-3, 12px);
    }

    .date-picker-popover-weekdays {
      padding: 0 var(--space-4, 16px) var(--space-2, 8px);
    }

    .date-picker-popover-grid {
      padding: 0 var(--space-4, 16px) var(--space-4, 16px);
    }

    :scope.bottom-sheet .date-picker-popover-head {
      padding: 0 0 var(--space-3, 12px);
    }

    :scope.bottom-sheet .date-picker-popover-weekdays {
      padding: 0 0 var(--space-2, 8px);
    }

    :scope.bottom-sheet .date-picker-popover-grid {
      padding: 0;
    }

    .date-picker-nav-controls {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .date-picker-years-view {
      display: none !important;
      position: relative;
    }

    .date-picker-calendar-view {
      display: block;
    }

    &[data-date-picker-view='years'] .date-picker-years-view {
      display: grid !important;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px 12px;
      padding: 8px 16px 16px;
      height: 288px;
      max-height: 288px;
      overflow-y: auto;
      overscroll-behavior: contain;
      touch-action: pan-y;
      position: relative;
    }

    &[data-date-picker-view='years'] .date-picker-calendar-view,
    &[data-date-picker-view='years'] .date-picker-nav-controls,
    &[data-date-picker-view='years'] [data-date-picker-nav-controls] {
      display: none !important;
    }

    .date-picker-period-chip:hover,
    .date-picker-icon-button:hover {
      background: color-mix(in srgb, var(--color-on-surface) 8%, transparent);
    }

    .date-picker-day {
      transition: opacity var(--motion-duration-short, 200ms) var(--motion-easing-standard);
    }

    .date-picker-day:hover:not(:disabled) {
      background: color-mix(in srgb, var(--color-on-surface) 8%, transparent);
    }

    .date-picker-day[data-selected='true'] {
      background: var(--color-primary);
      color: var(--color-on-primary);
    }

    .date-picker-day[data-selected='true']:hover:not(:disabled) {
      background: color-mix(in srgb, var(--color-primary) 92%, var(--color-on-primary) 8%);
    }

    .date-picker-day[data-today='true']:not([data-selected='true']) {
      border: 1px solid var(--color-primary);
      color: var(--color-primary);
    }

    .date-picker-day[data-outside-month='true']:not([data-selected='true']) {
      color: var(--color-on-surface-variant);
      opacity: 0.38;
    }

    .date-picker-day:disabled {
      color: var(--color-on-surface-variant);
      opacity: 0.38;
      cursor: not-allowed;
    }

    &[data-date-picker-view='years'] [data-date-picker-month-year-toggle-icon],
    &[data-date-picker-root][data-date-picker-view='years'] [data-date-picker-month-year-toggle-icon] {
      transform: rotate(180deg);
    }

    .date-picker-year-btn {
      width: 100%;
      max-width: 88px;
      height: 40px;
      min-height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      border-radius: var(--radius-full, 9999px);
      border: 1px solid transparent;
      background: transparent;
      font-family: inherit;
      font-size: 0.9375rem;
      font-weight: 500;
      color: var(--color-on-surface);
      cursor: pointer;
      user-select: none;
    }

    .date-picker-year-btn:hover {
      background: color-mix(in srgb, var(--color-on-surface) 8%, transparent);
    }

    .date-picker-year-btn:active {
      background: color-mix(in srgb, var(--color-on-surface) 12%, transparent);
    }

    .date-picker-year-btn[data-today='true']:not([data-selected='true']) {
      border-color: var(--color-primary);
      color: var(--color-primary);
      font-weight: 600;
    }

    .date-picker-year-btn[data-selected='true'] {
      background: var(--color-primary) !important;
      color: var(--color-on-primary) !important;
      font-weight: 600;
    }

    .date-picker-year-btn[data-selected='true']:hover {
      background: color-mix(in srgb, var(--color-primary) 90%, var(--color-on-primary) 10%) !important;
    }

    .date-picker-scroll-view {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1.1fr;
      position: relative;
      height: 200px;
      width: 100%;
      max-width: 100%;
      background-color: transparent;
      overflow: hidden;
      user-select: none;
      -webkit-mask-image: linear-gradient(to bottom, transparent, black 35%, black 65%, transparent);
      mask-image: linear-gradient(to bottom, transparent, black 35%, black 65%, transparent);
      touch-action: pan-y;
    }

    .date-picker-scroll-col {
      position: relative;
      overflow-y: scroll;
      overflow-x: hidden;
      scroll-snap-type: y mandatory;
      height: 100%;
      width: 100%;
      min-width: 0;
      max-width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      scrollbar-width: none !important;
      touch-action: pan-y;
      overscroll-behavior: contain;
    }

    .date-picker-scroll-col::-webkit-scrollbar {
      display: none !important;
      width: 0 !important;
      height: 0 !important;
    }

    .date-picker-scroll-col-spacer {
      height: 80px;
      flex-shrink: 0;
    }

    .date-picker-scroll-item {
      height: 40px;
      min-height: 40px;
      max-height: 40px;
      line-height: 40px;
      padding: 0;
      margin: 0;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-width: 0;
      max-width: 100%;
      overflow: hidden;
      border: none;
      background: transparent;
      color: var(--color-on-surface);
      font-size: 0.95rem;
      cursor: pointer;
      scroll-snap-align: center;
      flex-shrink: 0;
      touch-action: pan-y;
      transition: transform 150ms ease, opacity 150ms ease;
      will-change: transform, opacity;
    }

    .date-picker-scroll-item[data-active='true'] {
      color: var(--color-on-surface) !important;
      font-weight: 600 !important;
      transform: scale(1.1);
      opacity: 1 !important;
    }

    .date-picker-scroll-item:not([data-active='true']) {
      opacity: 0.38 !important;
    }

    .date-picker-scroll-item:focus {
      outline: none !important;
      box-shadow: none !important;
    }

    .date-picker-scroll-highlight {
      position: absolute;
      top: 80px;
      left: 12px;
      right: 12px;
      height: 40px;
      background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
      border-radius: var(--radius-sm, 8px);
      pointer-events: none;
      box-sizing: border-box;
    }

    .date-picker-scroll-container,
    .date-picker-responsive-container,
    .date-picker-popover-scroll {
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
      touch-action: pan-y;
    }

    .date-picker-scroll-actions {
      display: flex;
      justify-content: flex-end;
      width: 100%;
      padding: var(--space-2, 8px) var(--space-4, 16px) var(--space-3, 12px);
      box-sizing: border-box;
    }
  }

  @media (max-width: 600px) {
    .date-picker-popover-calendar {
      display: none !important;
    }
  }

  @media (min-width: 601px) {
    .date-picker-popover-scroll {
      display: none !important;
    }
  }
}
/* #ref https://m3.material.io/components/dialogs/overview */
/* #ref https://m3.material.io/components/dialogs/specs */
/* #insight Encapsulates modal surface geometry, discrete entry/exit transitions (@starting-style), and backdrop scrims without global style collisions */

@layer components {
  @scope (.dialog, dialog.dialog) {
    :scope {
      --dialog-max-width: 560px;
      background-color: var(--color-surface-container-high);
      color: var(--color-on-surface);
      padding: var(--space-6);
      border-radius: var(--radius-xl);
      border: none;
      outline: none;
      max-width: var(--dialog-max-width);
      width: calc(100% - 2rem);
      max-height: calc(var(--visual-viewport-height, 100dvh) - 2rem);
      height: fit-content;
      margin: auto;
      box-shadow: var(--shadow-3);
      pointer-events: none;
      position: fixed;
      inset: var(--visual-viewport-top, 0px) 0 var(--visual-viewport-offset-bottom, 0px) 0;
      box-sizing: border-box;
    }

    &:focus,
    &:focus-visible {
      outline: none;
    }

    &:popover-open,
    &[open] {
      pointer-events: auto;
    }

    &:not(.dialog-fullscreen-mobile):has(:where(.dialog-body :is(input:not([type="hidden"]):not([type="range"]):not([type="file"]), textarea, select, [contenteditable="true"]))) {
      flex-direction: column;

      &:popover-open,
      &[open] {
        display: flex;
      }

      .dialog-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
      }

      .dialog-body textarea {
        max-height: max(4.5rem, calc(var(--visual-viewport-height, 100dvh) - 14rem));
      }

      .dialog-actions,
      .dialog-footer-actions,
      .actions {
        flex-shrink: 0;
      }
    }

    > form {
      display: contents;
      margin: 0;
    }

    .dialog-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-4);
      margin-bottom: var(--space-4);
      flex-shrink: 0;

      h2 {
        margin: 0;
        flex: 1 1 0%;
      }

      .dialog-header-actions {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        flex-shrink: 0;
        margin-left: auto;
      }

      .dialog-header-actions + .dialog-close-button {
        margin-left: calc(var(--space-1) - var(--space-4));
      }

      .dialog-close-button {
        position: relative;
        flex-shrink: 0;
        margin-left: auto;
      }
    }

    h2,
    .headline {
      font-family: var(--font-family-brand);
      font-size: 1.5rem;
      line-height: 2rem;
      font-weight: var(--font-weight-regular);
      margin: 0 0 var(--space-4) 0;
      color: var(--color-on-surface);
      text-box: trim-both cap alphabetic;
    }

    .dialog-body,
    .body {
      font-family: var(--font-family-plain);
      font-size: 1rem;
      line-height: 1.5rem;
      color: var(--color-on-surface-variant);
      margin-bottom: var(--space-6);
    }

    .dialog-body {
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
    }

    .dialog-actions,
    .dialog-footer-actions,
    .actions {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: var(--space-2);
    }

    .dialog-actions form,
    .actions form {
      display: contents;
    }

    &::backdrop {
      background-color: color-mix(in srgb, var(--color-scrim, #000) 60%, transparent);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      transition-property: opacity, display, overlay;
      transition-behavior: allow-discrete;
      transition-duration: var(--motion-duration-short);
      transition-timing-function: var(--motion-easing-emphasized-accelerate);
      opacity: 0;
    }

    &:popover-open::backdrop,
    &[open]::backdrop {
      opacity: 1;
      transition-duration: var(--motion-duration-short);
      transition-timing-function: var(--motion-easing-emphasized);
    }

    /* Discrete Motion Presets */
    &.dialog-motion-grow {
      transition-property: opacity, transform, display, overlay;
      transition-behavior: allow-discrete;
      transition-duration: var(--motion-duration-short);
      transition-timing-function: var(--motion-easing-emphasized-accelerate);
      opacity: 0;
      transform: scale(0.9);
      will-change: transform, opacity;
    }

    &.dialog-motion-grow:popover-open,
    &.dialog-motion-grow[open] {
      opacity: 1;
      transform: scale(1);
      transition-duration: var(--motion-duration-medium);
      transition-timing-function: var(--motion-easing-emphasized);
    }

    &.dialog-motion-fade-slide {
      transition-property: opacity, transform, display, overlay;
      transition-behavior: allow-discrete;
      transition-duration: var(--motion-duration-short);
      transition-timing-function: var(--motion-easing-standard);
      opacity: 0;
      transform: translateY(24px);
      will-change: transform, opacity;
    }

    &.dialog-motion-fade-slide:popover-open,
    &.dialog-motion-fade-slide[open] {
      opacity: 1;
      transform: translateY(0);
      transition-duration: var(--motion-duration-medium);
      transition-timing-function: var(--motion-easing-emphasized);
    }

    /* Scrollable Dialog Layout */
    &.dialog-scrollable {
      padding: 0;
      overflow: visible;
      height: fit-content;
      max-height: calc(var(--visual-viewport-height, 100dvh) - 2rem);
      flex-direction: column;

      &:popover-open,
      &[open] {
        display: flex;
      }

      .dialog-header {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        padding: var(--space-6) var(--space-6) var(--space-3) var(--space-6);
        margin-bottom: 0;
        position: relative;
        flex-shrink: 0;
        min-height: 64px;

        h2 {
          margin: 0;
          flex: 1 1 0%;
        }
      }

      .dialog-body,
      .dialog-content {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
        overflow-y: auto;
        padding: var(--space-3) var(--space-6);
        margin-bottom: 0;
        flex: 1 1 auto;
        min-height: 0;
        scroll-timeline-name: --dialog-scroll;
        scroll-timeline-axis: block;
      }

      .dialog-body:last-child,
      .dialog-content:last-child {
        padding-bottom: var(--space-6);
      }

      .dialog-actions,
      .dialog-footer-actions {
        padding: var(--space-4) var(--space-6) var(--space-6) var(--space-6);
        flex-shrink: 0;
      }
    }

    /* Responsive Mobile Full-Screen Overrides (Opt-in via :fullscreen-mobile true) */
    @media (width < 600px) {
      &.dialog-fullscreen-mobile {
        border-radius: 0;
        border: none;
        width: 100%;
        height: var(--visual-viewport-height, 100dvh);
        max-width: none;
        max-height: none;
        margin: 0;
        padding: 0;
        inset: var(--visual-viewport-top, 0px) 0 var(--visual-viewport-offset-bottom, 0px) 0;
        box-shadow: none;
        background-color: var(--color-surface);
        grid-template-columns: 1fr auto;
        grid-template-rows: auto 1fr;
        grid-template-areas:
          "header actions"
          "body body";

        &:popover-open,
        &[open] {
          display: grid;
        }

        &:not(:has(.dialog-actions, .dialog-footer-actions)) .dialog-header {
          grid-column: 1 / -1;
        }

        &.dialog-motion-fade-slide {
          transform: translate3d(0, 100%, 0);
          transition-duration: var(--motion-duration-short);
          transition-timing-function: var(--motion-easing-emphasized-accelerate);
        }

        &.dialog-motion-fade-slide:popover-open,
        &.dialog-motion-fade-slide[open] {
          transform: translate3d(0, 0, 0);
          transition-duration: var(--motion-duration-medium);
          transition-timing-function: var(--motion-easing-emphasized);
        }

        &::backdrop {
          background-color: transparent;
          opacity: 0;
          transition: none;
        }

        .dialog-header {
          grid-area: header;
          justify-content: flex-start;
          gap: var(--space-2);
          padding: calc(var(--space-2) + env(safe-area-inset-top, 0px)) var(--space-4) var(--space-2) var(--space-2);
          margin-bottom: 0;
          min-height: 56px;
          border-bottom: 1px solid var(--color-outline-variant);
          background-color: var(--color-surface);

          &:has(.dialog-header-actions) {
            padding-right: var(--space-2);
          }

          .dialog-close-button,
          .dialog-header-actions + .dialog-close-button {
            position: relative;
            order: -1;
            margin-left: 0;
          }

          h2 {
            font-size: var(--type-title-l-size, 1.375rem);
            line-height: var(--type-title-l-line-height, 1.75rem);
          }
        }

        .dialog-body,
        .dialog-content {
          grid-area: body;
          padding: var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px)) var(--space-4);
          margin-bottom: 0;
          overflow-y: auto;
          max-height: none;
        }

        .dialog-actions,
        .dialog-footer-actions {
          grid-area: actions;
          display: flex;
          align-items: center;
          padding: calc(var(--space-2) + env(safe-area-inset-top, 0px)) var(--space-3) var(--space-2) 0;
          margin: 0;
          border-top: none;
          border-bottom: 1px solid var(--color-outline-variant);
          background-color: var(--color-surface);
        }

        .dialog-actions [data-dialog-close],
        .dialog-footer-actions [data-dialog-close],
        .dialog-actions [command="close"],
        .dialog-footer-actions [command="close"] {
          display: none;
        }
      }
    }
  }
}

@starting-style {
  @layer components {
    .dialog.dialog-motion-grow:popover-open,
    .dialog.dialog-motion-grow[open] {
      opacity: 0;
      transform: scale(0.9);
    }

    .dialog.dialog-motion-fade-slide:popover-open,
    .dialog.dialog-motion-fade-slide[open] {
      opacity: 0;
      transform: translateY(24px);
    }

    @media (width < 600px) {
      .dialog.dialog-fullscreen-mobile.dialog-motion-fade-slide:popover-open,
      .dialog.dialog-fullscreen-mobile.dialog-motion-fade-slide[open] {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
      }
    }

    .dialog[open]::backdrop,
    .dialog:popover-open::backdrop {
      opacity: 0;
    }
  }
}

body:has(dialog[open]),
[data-stage-main]:has(dialog[open]),
[data-stage-pane-main]:has(dialog[open]) {
  overflow: hidden;
}
/* #ref https://m3.material.io/components/divider/overview */
/* #insight Scoped semantic styles for horizontal and vertical dividers */

@layer components {
  @scope (.divider, hr.divider) {
    :scope {
      border: none;
      height: 1px;
      background-color: var(--color-outline-variant);
      width: 100%;
      margin: var(--space-2, 8px) 0;
    }

    &.divider-vertical {
      width: 1px;
      height: 100%;
      min-height: 1rem;
      margin: 0 var(--space-2, 8px);
      display: inline-block;
    }
  }
}
/* #ref https://m3.material.io/components/text-fields/overview */
/* #insight Scoped semantic styles for form field wrapper */

@layer components {
  @scope (.form-field) {
    :scope {
      display: grid;
      gap: var(--space-1, 4px);
      align-content: start;
      width: 100%;
    }

    @media (min-width: 600px) {
      :scope:not(.form-field-full):not(.form-field-horizontal) {
        max-width: var(--form-control-max-width, 28rem);
      }

      :is(dialog, [popover], .grid) :scope:not(.form-field-full):not(.form-field-horizontal) {
        max-width: none;
      }
    }

    .form-field-label {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      font-family: var(--font-family-plain);
      font-size: 0.875rem;
      font-weight: var(--font-weight-medium, 500);
      color: var(--color-on-surface);
    }

    .form-field-control {
      display: grid;
      min-inline-size: 0;
    }

    .form-field-control > * {
      min-inline-size: 0;
    }

    .form-field-supporting {
      font-family: var(--font-family-plain);
      font-size: 0.75rem;
      line-height: 1rem;
      padding-inline: var(--space-4, 16px);
      color: var(--color-on-surface-variant);
    }

    .form-field-error {
      font-family: var(--font-family-plain);
      font-size: 0.75rem;
      line-height: 1rem;
      padding-inline: var(--space-4, 16px);
      color: var(--color-error);
    }

    &.form-field-horizontal {
      grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr);
      align-items: start;
      column-gap: 1rem;
    }

    &.form-field-horizontal .form-field-supporting,
    &.form-field-horizontal .form-field-error {
      grid-column: 2;
    }

    @media (max-width: 760px) {
      &.form-field-horizontal {
        grid-template-columns: minmax(0, 1fr);
      }
      &.form-field-horizontal .form-field-supporting,
      &.form-field-horizontal .form-field-error {
        grid-column: 1;
      }
    }

    &.form-field-invalid .form-field-label {
      color: var(--color-error);
    }
  }
}
/* #ref https://m3.material.io/components/lists/overview */
/* #insight Scoped semantic styles for Material 3 & Naisu List and List Item */

@layer components {
  @scope (.list) {
    :scope {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    :where(&.list-divided) {
      border-radius: var(--radius-lg, 16px);
      overflow: hidden;
      background-color: var(--color-surface-container);
    }

    &.list-divided > :not(:first-child) {
      border-top: 1px solid color-mix(in srgb, var(--color-outline-variant) 25%, transparent);
    }

    &.list-compact > .list-item {
      min-height: 3rem;
      padding-block: var(--space-2, 8px);
      gap: var(--space-3, 12px);
    }

    &.list-comfortable > .list-item {
      min-height: 4.5rem;
      padding-block: var(--space-4, 16px);
      gap: var(--space-4, 16px);
    }
  }

  @scope (.list-item) {
    :scope {
      display: flex;
      align-items: center;
      min-width: 0;
      text-decoration: none;
    }

    .list-item-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.25rem;
      height: 2.25rem;
      border-radius: var(--radius-md, 12px);
      background-color: color-mix(in srgb, var(--color-on-surface) 8%, transparent);
      color: var(--color-on-surface);
      flex-shrink: 0;
    }
  }
}
/* #ref https://m3.material.io/components/menus/overview */
/* #insight Encapsulates menu item states and popover geometry semantically, giving AI agents direct semantic hooks (.menu, .menu-item, .menu-divider) instead of obscure utility chains */

@layer components {
  @scope (.menu, [popover].menu, [data-menu-popover-panel]) {
    :scope {
      background-color: var(--color-surface-container-low);
      color: var(--color-on-surface);
      border-radius: var(--radius-lg, 16px);
      min-width: 112px;
      padding: var(--space-1, 4px);
      display: flex;
      flex-direction: column;
      gap: 2px;
      box-shadow: var(--shadow-2);
      border: none;
      transform-origin: top center;
      transition: opacity var(--motion-duration-short, 200ms) var(--motion-spring-effects, cubic-bezier(0.2, 0, 0, 1)),
                  scale var(--motion-duration-short, 200ms) var(--motion-spring-spatial-default, cubic-bezier(0.16, 1, 0.3, 1)),
                  display var(--motion-duration-short, 200ms) allow-discrete,
                  overlay var(--motion-duration-short, 200ms) allow-discrete;
    }

    :scope[popover]:popover-open,
    :scope[data-menu-popover-panel]:popover-open {
      opacity: 1;
      scale: 1;

      @starting-style {
        opacity: 0;
        scale: 0.96;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      :scope {
        transition: none;
      }
    }

    :scope[popover]:not(:popover-open),
    :scope[data-menu-popover-panel]:not(:popover-open) {
      display: none !important;
    }

    :scope[popover]::backdrop,
    :scope[data-menu-popover-panel]::backdrop {
      background: transparent !important;
    }

    &.menu-account,
    :scope.menu-account {
      border: 1px solid var(--color-outline-variant);
      box-shadow: var(--shadow-3);
      width: max-content;
    }

    &.menu-vibrant,
    :scope.menu-vibrant {
      background-color: var(--color-tertiary-container);
      color: var(--color-on-tertiary-container);
    }

    hr,
    .menu-divider {
      height: 1px;
      border: none;
      background-color: var(--color-outline-variant);
      align-self: stretch;
      width: auto;
      margin: 2px calc(-1 * var(--space-1, 4px));
    }
  }

  @scope (.menu-item) {
    :scope {
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      min-height: 48px;
      padding: 0;
      border-radius: var(--radius-md, 12px);
      font-family: var(--font-family-plain);
      font-size: 1rem;
      line-height: 1.5rem;
      color: var(--color-on-surface);
      cursor: pointer;
      user-select: none;
      background: transparent;
      border: none;
      width: 100%;
      text-align: left;
      text-decoration: none;
    }

    .menu-item-state {
      position: absolute;
      inset: 0;
      background-color: currentColor;
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--motion-duration-short, 200ms) var(--motion-easing-standard);
    }

    &:hover .menu-item-state { opacity: 0.08; }
    &:focus-visible .menu-item-state { opacity: 0.10; }
    &:active .menu-item-state { opacity: 0.12; }

    &.is-selected,
    &.selected,
    &.active,
    &[aria-selected="true"],
    &[aria-current="page"] {
      background-color: var(--color-secondary-container);
      color: var(--color-on-secondary-container);
      font-weight: var(--font-weight-medium, 500);

      .menu-item-content,
      .menu-item-content > a,
      .menu-item-content > button,
      .menu-item-content > form,
      .menu-item-content [class*="color-on-surface"] {
        color: var(--color-on-secondary-container);
      }
    }

    &:disabled, &[aria-disabled="true"] {
      opacity: 0.38;
      cursor: default;
      pointer-events: none;
    }

    .menu-item-content {
      position: relative;
      z-index: 1;
      width: 100%;
      min-height: 48px;
      display: flex;
      align-items: center;
      padding: 0 var(--space-3, 12px);
      gap: var(--space-3, 12px);
    }

    :where(.menu-item-content) > :where(a, button, form) {
      width: 100%;
      min-height: 48px;
      display: flex;
      align-items: center;
      padding: 0 var(--space-3, 12px);
      gap: inherit;
      color: inherit;
      text-decoration: none;
      background: transparent;
      border: none;
      font: inherit;
      cursor: inherit;
      text-align: inherit;
      margin: 0;
    }

    :where(.menu-item-content) > :where(form) {
      padding: 0;
    }

    :scope:has(> .menu-item-content > :is(a, button, form, [class*="px-"])) .menu-item-content {
      padding: 0;
    }
  }
}
/* #ref https://m3.material.io/components/search/overview */
/* #insight Scoped semantic styles for search bar */

@layer components {
  @scope (.search-bar) {
    :scope {
      display: inline-flex;
      align-items: center;
      gap: var(--space-3, 12px);
      height: 48px;
      padding: 0 var(--space-4, 16px);
      border-radius: var(--radius-full, 9999px);
      background-color: var(--color-surface-container-low);
      border: 1px solid var(--color-outline-variant);
      min-inline-size: 0;
      max-inline-size: 100%;
      box-sizing: border-box;
    }

    :scope[hidden] {
      display: none !important;
    }

    :scope[data-search-bar-collapsible] {
      min-inline-size: 0;
      width: 100%;
      transform-origin: right center;
      transition: opacity 180ms cubic-bezier(0.2, 0, 0, 1),
                  transform 180ms cubic-bezier(0.2, 0, 0, 1);
    }

    @starting-style {
      :scope[data-search-bar-collapsible]:not([hidden]) {
        opacity: 0;
        transform: scaleX(0.96);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      :scope[data-search-bar-collapsible] {
        transition: none !important;
      }
    }

    :scope:focus-within {
      border-color: var(--color-primary);
      box-shadow: 0 0 0 1px var(--color-primary);
    }

    .search-bar-leading-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: var(--color-on-surface-variant);
    }

    .search-bar-input {
      background: transparent;
      outline: none;
      border: none;
      width: 100%;
      min-inline-size: 0;
      font-family: var(--font-family-plain);
      font-size: 1rem;
      color: var(--color-on-surface);
      text-overflow: ellipsis;
      -webkit-appearance: none;
      appearance: none;
    }

    .search-bar-input::-webkit-search-cancel-button,
    .search-bar-input::-webkit-search-decoration,
    .search-bar-input::-webkit-search-results-button,
    .search-bar-input::-webkit-search-results-decoration {
      appearance: none;
      display: none;
    }

    .search-bar-clear {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 32px;
      height: 32px;
      margin-inline-end: calc(-1 * var(--space-1-5, 6px));
      border-radius: var(--radius-full, 9999px);
      background: transparent;
      border: none;
      cursor: pointer;
      color: var(--color-on-surface-variant);
      transition: opacity var(--motion-duration-short, 200ms) var(--motion-easing-standard);
    }

    .search-bar-clear:hover {
      background: var(--color-surface-container-high);
    }

    :scope:not([data-search-bar-collapsible]) .search-bar-input:placeholder-shown ~ .search-bar-clear {
      display: none;
    }

    :scope[data-search-bar-collapsible] .search-bar-input:placeholder-shown ~ .search-bar-clear {
      opacity: 1;
      pointer-events: auto;
    }

    .search-bar-trailing {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2, 8px);
    }
  }

  header:has(.search-bar[data-search-bar-collapsible]:not([hidden])) {
    [data-slot="leading"],
    [data-slot="center"],
    [data-slot="trailing"] > :not(.search-bar[data-search-bar-collapsible]) {
      display: none !important;
    }

    [data-slot="trailing"] {
      flex: 1 1 100% !important;
      width: 100% !important;
      min-width: 0 !important;
      justify-content: stretch !important;
    }

    .search-bar[data-search-bar-collapsible] {
      width: 100% !important;
      margin-inline: 0 !important;
    }
  }
}
/* #ref https://m3.material.io/components/menus/overview */
/* #insight Scoped semantic styles for adaptive select field (desktop popover + mobile bottom sheet) */

@layer components {
  @scope (.select-field) {
    :scope {
      position: relative;
      display: grid;
      min-width: 0;
    }

    .select-input {
      appearance: none;
      -webkit-appearance: none;
      box-sizing: border-box;
      width: 100%;
      min-height: 48px;
      padding: 12px 44px 12px 16px;
      border-radius: var(--radius-m, 12px);
      border: 1px solid var(--color-outline-variant);
      background-color: transparent;
      color: var(--color-on-surface);
      cursor: pointer;
      outline: none;
    }

    :scope:has(.select-label) .select-input {
      min-height: 50px;
      padding-top: 20px;
      padding-bottom: 6px;
    }

    :scope:not(:has(.select-label)) .select-input {
      min-height: 48px;
    }

    .select-input:hover:not(:focus):not(:disabled) {
      border-color: var(--color-on-surface);
    }

    .select-input:focus,
    :scope[data-select-open="true"] .select-input {
      border-color: var(--color-primary);
      box-shadow: inset 0 0 0 1px var(--color-primary);
    }

    .select-input:has(option:checked:is([data-select-placeholder], [hidden], [disabled][value=''], [value='']:empty)) {
      color: transparent !important;
    }

    .select-icon {
      position: absolute;
      top: 50%;
      right: 16px;
      translate: 0 -50%;
      rotate: 0deg;
      pointer-events: none;
      font-size: 1.5rem;
      transition: rotate var(--motion-duration-short, 200ms) var(--motion-easing-standard);
    }

    :scope:has(.select-input:focus) .select-icon,
    :scope[data-select-open="true"] .select-icon {
      color: var(--color-primary);
    }

    .select-input:open ~ .select-icon,
    :scope[data-select-open="true"] .select-icon {
      color: var(--color-primary);
      rotate: 180deg;
    }

    .select-label {
      position: absolute;
      left: 16px;
      padding: 0;
      pointer-events: none;
      top: 50%;
      transform-origin: left top;
      translate: 0 -50%;
      scale: 1;
      line-height: 1;
      transition: translate var(--motion-duration-short, 200ms) var(--motion-easing-standard),
                  scale var(--motion-duration-short, 200ms) var(--motion-easing-standard);
    }

    :scope:has(.select-input:focus) .select-label,
    :scope[data-select-open="true"] .select-label,
    :scope:not(:has(.select-input option:checked:is([data-select-placeholder], [hidden], [disabled][value=''], [value='']:empty))) .select-label {
      translate: 0 calc(-50% - 10px);
      scale: 0.75;
    }

    :scope:has(.select-input:focus) .select-label,
    :scope[data-select-open="true"] .select-label {
      color: var(--color-primary);
    }

    .select-input:disabled {
      cursor: not-allowed;
      border-color: color-mix(in srgb, var(--color-on-surface) 12%, transparent);
      color: color-mix(in srgb, var(--color-on-surface) 38%, transparent);
      background-color: transparent;
    }

    :scope:has(.select-input:disabled) .select-label {
      color: color-mix(in srgb, var(--color-on-surface) 38%, transparent);
      background-color: transparent;
    }

    :scope:has(.select-input:disabled) .select-icon {
      color: color-mix(in srgb, var(--color-on-surface) 38%, transparent);
    }

    .select-input option {
      color: var(--color-on-surface);
      background-color: var(--color-surface);
    }

    .leading-icon {
      position: absolute;
      left: 12px;
      top: 50%;
      translate: 0 -50%;
      color: var(--color-on-surface-variant);
      pointer-events: none;
    }

    :scope:has(.leading-icon) .select-input {
      padding-left: 44px;
    }

    :scope:has(.leading-icon) .select-label {
      left: 44px;
    }

    @supports (-webkit-touch-callout: none) {
      .select-input {
        font-size: max(1em, 16px);
      }
    }
  }

  @scope (.select-popover, [popover].select-popover) {
    :scope {
      position: fixed;
      inset: auto;
      margin: 0;
      margin-block-start: var(--space-1, 4px);
      position-anchor: --select-active-anchor;
      position-area: block-end span-inline-end;
      position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
      min-inline-size: max(9rem, anchor-size(width));
      max-inline-size: min(22rem, calc(100dvi - 1rem));
      max-inline-size: min(22rem, calc(100vw - 1rem));
      max-block-size: min(20rem, calc(100dvb - 2rem));
      overflow-y: auto;
      overscroll-behavior: contain;
      z-index: 1300;
      outline: none;
    }
  }

  .select-option-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .select-option-check {
    margin-left: auto;
    font-size: 1.125rem;
    color: var(--color-on-secondary-container);
    flex-shrink: 0;
  }

  .form-field-invalid .select-input {
    border-color: var(--color-error);
  }

  .form-field-invalid .select-input:hover:not(:focus) {
    border-color: var(--color-on-error-container);
  }

  .form-field-invalid .select-input:focus {
    border-color: var(--color-error);
    box-shadow: inset 0 0 0 1px var(--color-error);
  }

  .form-field-invalid .select-label {
    color: var(--color-error);
  }

  .form-field-invalid .select-icon {
    color: var(--color-error);
  }
}
/* #ref https://m3.material.io/components/switch/overview */
/* #insight Scoped semantic styles for switch */

@layer components {
  @scope (.switch-root) {
    :scope {
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      user-select: none;
      position: relative;
      display: inline-flex;
      align-items: center;
      min-height: 48px;
      cursor: pointer;
    }

    :scope:has(input:disabled) {
      opacity: 0.38;
      pointer-events: none;
      cursor: default;
    }

    .switch-input {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      margin: 0;
      opacity: 0;
      cursor: pointer;
      z-index: 2;
    }

    .switch-visual {
      width: 52px;
      height: 32px;
      box-sizing: border-box;
      border-radius: var(--radius-full, 9999px);
      background-color: var(--color-surface-container-highest);
      border: 2px solid var(--color-outline);
      display: inline-flex;
      align-items: center;
      position: relative;
      pointer-events: none;
    }

    .switch-thumb {
      width: 24px;
      height: 24px;
      border-radius: var(--radius-full, 9999px);
      background-color: var(--color-outline);
      translate: 2px 0;
      scale: 0.6667;
      pointer-events: none;
      transition: translate var(--motion-duration-short, 200ms) var(--motion-spring-spatial-fast, cubic-bezier(0.22, 1.25, 0.36, 1)),
                  scale var(--motion-duration-short, 200ms) var(--motion-spring-spatial-fast, cubic-bezier(0.22, 1.25, 0.36, 1));
    }

    .switch-input:checked + .switch-visual {
      background-color: var(--color-primary);
      border-color: var(--color-primary);
    }

    .switch-input:checked + .switch-visual .switch-thumb {
      translate: 22px 0;
      scale: 1;
      background-color: var(--color-on-primary);
    }

    :scope:active .switch-input:not(:disabled) + .switch-visual .switch-thumb {
      translate: 2px 0;
      scale: 1.1667;
    }

    :scope:active .switch-input:checked:not(:disabled) + .switch-visual .switch-thumb {
      translate: 22px 0;
      scale: 1.1667;
    }
  }
}
/* #ref https://m3.material.io/components/text-fields/overview */
/* #insight Scoped semantic styles for outlined text field */

@layer components {
  @scope (.outlined-text-field) {
    :scope {
      position: relative;
      cursor: text;
      min-height: 50px;
      box-sizing: border-box;
    }

    :scope:has(.label):not(:has(textarea)) {
      padding-top: 20px;
      padding-bottom: 6px;
    }

    :scope:not(:has(.label)) {
      min-height: 48px;
    }

    :scope:hover:not(:has(input:focus)):not(:has(textarea:focus)):not(:has(input:disabled)):not(:has(textarea:disabled)) {
      border-color: var(--color-on-surface);
    }

    :scope:has(input:focus),
    :scope:has(textarea:focus) {
      border-color: var(--color-primary);
      box-shadow: inset 0 0 0 1px var(--color-primary);
    }

    .label {
      position: absolute;
      left: 16px;
      padding: 0;
      pointer-events: none;
      top: 50%;
      transform-origin: left top;
      translate: 0 -50%;
      scale: 1;
      line-height: 1;
      transition: translate var(--motion-duration-short, 200ms) var(--motion-easing-standard),
                  scale var(--motion-duration-short, 200ms) var(--motion-easing-standard);
    }

    :scope:has(textarea) .label {
      top: 14px;
      translate: 0 0;
    }

    input:focus + .label,
    input:not(:placeholder-shown) + .label,
    textarea:focus + .label,
    textarea:not(:placeholder-shown) + .label,
    :scope:has(input:focus) .label,
    :scope:has(input:not(:placeholder-shown)) .label,
    :scope:has(input:autofill) .label,
    :scope:has(input:-webkit-autofill) .label,
    :scope:has(textarea:focus) .label,
    :scope:has(textarea:not(:placeholder-shown)) .label,
    :scope:has(.picker-tag) .label {
      translate: 0 calc(-50% - 10px);
      scale: 0.75;
    }

    :scope:has(textarea:focus) .label,
    :scope:has(textarea:not(:placeholder-shown)) .label {
      translate: 0 -8px;
      scale: 0.75;
    }

    :scope:has(input:focus) .label,
    :scope:has(textarea:focus) .label {
      color: var(--color-primary);
    }

    input::placeholder,
    textarea::placeholder {
      color: var(--color-on-surface-variant);
      opacity: 1;
      transition: opacity var(--motion-duration-short, 200ms) var(--motion-easing-standard);
    }

    :scope:has(.label) input:not(:focus)::placeholder,
    :scope:has(.label) textarea:not(:focus)::placeholder {
      opacity: 0;
    }

    :scope:has(input:disabled),
    :scope:has(textarea:disabled) {
      border-color: color-mix(in srgb, var(--color-on-surface) 12%, transparent);
      background-color: transparent;
      cursor: not-allowed;
    }

    :scope:has(input:disabled) .label,
    :scope:has(textarea:disabled) .label {
      color: color-mix(in srgb, var(--color-on-surface) 38%, transparent);
      background-color: transparent;
    }

    input:disabled,
    textarea:disabled {
      color: color-mix(in srgb, var(--color-on-surface) 38%, transparent);
      cursor: not-allowed;
    }

    input[type=number]::-webkit-outer-spin-button,
    input[type=number]::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    input[type=number] {
      -moz-appearance: textfield;
    }

    :scope[data-number-field] input,
    &.outlined-number-field input {
      padding-inline-end: 96px;
    }

    .outlined-number-field-controls {
      position: absolute;
      right: 2px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 0;
      height: 48px;
    }

    .outlined-number-field-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: none;
      outline: none;
      background: transparent;
      color: var(--color-on-surface-variant);
      border-radius: var(--radius-full, 9999px);
      padding: 0;
      height: 48px;
      width: 48px;
      cursor: pointer;
    }

    .outlined-number-field-btn:hover {
      background-color: color-mix(in srgb, var(--color-on-surface-variant) 8%, transparent);
      color: var(--color-on-surface);
    }

    .outlined-number-field-btn:active {
      background-color: color-mix(in srgb, var(--color-on-surface-variant) 16%, transparent);
    }

    .outlined-number-field-btn .material-symbols-rounded {
      font-size: 1.25rem;
      line-height: 1;
    }

    [data-password-field-toggle] {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      height: 32px;
      width: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-full, 9999px);
      cursor: pointer;
      background-color: transparent;
      color: var(--color-on-surface-variant);
      border: none;
      outline: none;
      padding-bottom: 0;
    }

    .leading-icon {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--color-on-surface-variant);
      pointer-events: none;
    }

    :scope:has(.leading-icon) input,
    :scope:has(.leading-icon) textarea {
      padding-left: 32px;
    }

    :scope:has(.leading-icon) .label {
      left: 48px;
    }

    @supports (-webkit-touch-callout: none) {
      input,
      textarea {
        font-size: max(1em, 16px);
      }
    }

    .text-area-resize-handle {
      --resizable-handle-size: 12px;
      --resizable-handle-color: var(--color-outline-variant);
      --resizable-handle-hover-color: var(--color-on-surface);
      --resizable-handle-active-color: var(--color-primary);
      --resizable-handle-bar-size: 32px;
      --resizable-handle-bar-thickness: 2px;

      cursor: ns-resize;
    }

    .text-area-resize-handle .resizable-handle-bar {
      width: var(--resizable-handle-bar-size, 32px);
      height: var(--resizable-handle-bar-thickness, 2px);
      border-radius: var(--radius-full, 9999px);
      background-color: var(--resizable-handle-color);
    }

    .text-area-resize-handle:hover .resizable-handle-bar {
      background-color: var(--resizable-handle-hover-color);
    }

    .text-area-resize-handle:active .resizable-handle-bar {
      background-color: var(--resizable-handle-active-color);
    }
  }

  .form-field-invalid .outlined-text-field {
    border-color: var(--color-error);
  }

  .form-field-invalid .outlined-text-field:hover:not(:has(input:focus)) {
    border-color: var(--color-on-error-container);
  }

  .form-field-invalid .outlined-text-field:has(input:focus) {
    border-color: var(--color-error);
    box-shadow: inset 0 0 0 1px var(--color-error);
  }

  .form-field-invalid .outlined-text-field .label {
    color: var(--color-error);
  }
}
/* #insight Scoped semantic styles for feedback dialog */

@layer components {
  @scope (.feedback-dialog, dialog.feedback-dialog) {
    :scope:not(dialog) {
      position: relative;
    }

    :scope:is(dialog, .dialog),
    .dialog {
      --dialog-max-width: 480px;
    }
  }
}
/* #insight Scoped semantic styling for page-title */
@layer components {
  .page-title {
    margin-inline: auto;
    width: 100%;
    max-width: var(--breakpoint-medium);
    font-family: var(--font-family-brand);
    font-size: 2rem;
    font-weight: 400;
    line-height: 2.5rem;
    letter-spacing: 0;
    color: var(--color-on-surface);
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: var(--space-12, 48px);
    box-sizing: border-box;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    text-box: trim-both cap alphabetic;
  }

  .page-title:has(+ .tabs) {
    padding-bottom: 0;
  }

  :not(:first-child):not(.toast-stack + *).page-title {
    padding-top: 0;
    padding-bottom: 0;
  }

  :is([data-stage-header], [data-slot='leading'], [data-slot='center']) .page-title {
    margin: 0;
    padding: 0;
    text-box-trim: none;
    text-box-edge: auto;
    text-box: normal;
    line-height: 2.5rem;
  }

  [data-slot='leading'] .page-title {
    text-align: left;
  }
}
/* #insight Scoped semantic styles for cookie consent popover */

@layer components {
  @scope ([data-cookie-consent], section#cookie-consent-dialog, .cookie-consent-dialog) {
    :scope:not(:popover-open),
    :scope[hidden] {
      display: none !important;
    }

    :scope {
      position: fixed;
      margin: 0;
      top: auto;
      right: auto;
      left: 50%;
      bottom: calc(var(--stage-bottom-offset, 0px) + max(1rem, calc(env(safe-area-inset-bottom) + 1rem)));
      transform: translateX(-50%);
      width: min(40rem, calc(100vw - 2rem));
      max-width: calc(100vw - 2rem);
      padding: var(--space-6);
      border-radius: var(--radius-xl);
      background-color: var(--color-surface-container-high);
      color: var(--color-on-surface);
      box-shadow: var(--shadow-4);
      z-index: 100;
      border: 1px solid var(--color-outline-variant);
    }

    button[aria-pressed="true"] {
      background-color: var(--color-secondary-container);
      color: var(--color-on-secondary-container);
      border-color: var(--color-secondary);
    }
  }
}
/* #insight Scoped semantic styles for PWA install prompt */

@layer components {
  @media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
    [data-pwa-install-menu-item],
    [data-pwa-install-trigger] {
      display: none !important;
    }
  }

  @scope ([data-pwa-install-prompt], #pwa-install-prompt, .pwa-install-prompt) {
    :scope:not(:popover-open),
    :scope[hidden] {
      display: none !important;
    }

    :scope {
      position: fixed !important;
      margin: 0;
      top: auto;
      right: auto;
      left: 50%;
      bottom: calc(var(--stage-bottom-offset, 0px) + max(1rem, calc(env(safe-area-inset-bottom) + 1rem)));
      transform: translate3d(-50%, 0, 0);
      width: min(28rem, calc(100vw - 2rem));
      max-width: calc(100vw - 2rem);
      display: flex;
      flex-direction: column;
      gap: var(--space-5, 20px);
      padding: var(--space-6, 24px);
      border-radius: var(--radius-xl, 28px);
      background-color: var(--color-surface-container-high);
      color: var(--color-on-surface);
      box-shadow: var(--shadow-4);
      z-index: 100;
      border: 1px solid var(--color-outline-variant);
      opacity: 1;
      transition: opacity var(--motion-duration-short, 200ms) var(--motion-easing-standard),
                  transform var(--motion-duration-short, 200ms) var(--motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1));

      @starting-style {
        opacity: 0;
        transform: translate3d(-50%, 12px, 0);
      }
    }

    .card-title {
      font-family: var(--font-family-plain);
      font-size: 1.25rem;
      line-height: 1.75rem;
      font-weight: var(--font-weight-medium, 500);
      margin: 0 0 var(--space-1, 4px) 0;
      color: var(--color-on-surface);
    }

    .pwa-install-subtitle {
      font-family: var(--font-family-plain);
      font-size: 0.9375rem;
      line-height: 1.375rem;
      color: var(--color-on-surface-variant);
      margin: 0;
    }

    .pwa-install-steps {
      display: flex;
      flex-direction: column;
      gap: var(--space-3, 12px);
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .pwa-install-steps[hidden] {
      display: none !important;
    }

    .pwa-install-step {
      display: flex;
      align-items: center;
      gap: var(--space-3, 12px);
      min-width: 0;
    }

    .pwa-install-step[hidden] {
      display: none !important;
    }

    .pwa-install-step-badge {
      display: inline-block;
      align-content: center;
      text-align: center;
      width: 24px;
      height: 24px;
      flex-shrink: 0;
      border-radius: var(--radius-full, 9999px);
      background-color: var(--color-surface-container-lowest);
      color: var(--color-on-surface);
      font-family: var(--font-family-plain);
      font-size: 0.75rem;
      font-weight: var(--font-weight-medium, 500);
      line-height: 1;
      text-box: trim-both cap alphabetic;
    }

    .pwa-install-step-text {
      flex: 1 1 auto;
      min-width: 0;
      font-family: var(--font-family-plain);
      font-size: 0.9375rem;
      line-height: 1.375rem;
      color: var(--color-on-surface);
    }

    .pwa-inline-icon {
      display: inline-block;
      vertical-align: -0.22em;
      margin-inline: 0.1rem;
      color: currentColor;
    }

    .pwa-install-prompt-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      gap: var(--space-2, 8px);
    }
  }
}
/* #insight Scoped floating scroll-to / scroll-to-top button styles */

@layer components {
  @scope (.scroll-to, .scroll-to-top) {
    :scope {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      border-radius: var(--radius-full);
      background-color: color-mix(in srgb, var(--color-surface-container-high) var(--surface-glass-opacity), transparent);
      backdrop-filter: blur(var(--surface-glass-blur));
      border: var(--surface-glass-border);
      box-shadow: var(--surface-glass-shadow);
      color: var(--color-on-surface);
      cursor: pointer;
      text-decoration: none;
      touch-action: manipulation;
      opacity: 0;
      pointer-events: none;
      transform: scale(0.8);
      transition: opacity var(--motion-duration-short) var(--motion-easing-standard),
                  transform var(--motion-duration-short) var(--motion-easing-standard);
    }

    :scope.fixed {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 50;
    }

    :scope.visible {
      opacity: 1;
      pointer-events: auto;
      transform: scale(1);
    }

    :scope.invisible {
      opacity: 0;
      pointer-events: none;
      transform: scale(0.8);
    }

    :scope:hover {
      background-color: color-mix(in srgb, var(--color-surface-container-highest) 75%, transparent);
      transform: scale(1.05);
      text-decoration: none;
    }

    :scope:active {
      transform: scale(0.95);
    }
  }
}
/* #insight Scoped semantic styles for social share buttons and dialog */

@layer components {
  @scope (.social-share-group) {
    :scope {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      flex-wrap: wrap;
    }
  }

  @scope (.share-button-host) {
    .share-button-trigger {
      width: 48px;
      height: 48px;
      background-color: var(--color-surface-container-high);
      color: var(--color-on-surface);
    }
  }

  @scope (.share-dialog) {
    :scope {
      --dialog-max-width: 36rem;
    }

    .dialog-body {
      margin-bottom: 0;
    }

    .share-url-box {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      background-color: var(--color-surface-container-highest);
      border-radius: var(--radius-lg);
      padding: var(--space-3) var(--space-4);
      min-width: 0;
    }

    .share-platform-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--space-2);
      border-radius: var(--radius-lg);
      background-color: var(--color-surface-container);
      padding: var(--space-4) var(--space-3);
      color: var(--color-on-surface);
      text-decoration: none;
    }

    .share-platform-card:hover {
      background-color: var(--color-surface-container-high);
    }
  }
}
/* #insight Scoped GPU-accelerated virtual infinite carousel styles */

@layer components {
  @scope (.virtual-carousel) {
    :scope {
      position: relative;
      display: flex;
      flex-direction: column;
      width: 100%;
      overflow: hidden;
    }

    .virtual-carousel-track {
      display: flex;
      flex: 1 1 auto;
      width: 100%;
      overflow-x: auto;
      overflow-anchor: none;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      overscroll-behavior-x: contain;
      touch-action: pan-x pan-y;
      -webkit-overflow-scrolling: touch;
    }

    .virtual-carousel-track::-webkit-scrollbar {
      display: none;
    }

    .virtual-carousel-item {
      display: flex;
      flex-direction: column;
      flex: 0 0 100%;
      width: 100%;
      min-width: 100%;
      scroll-snap-align: center;
      scroll-snap-stop: always;
      box-sizing: border-box;
    }
  }
}
@font-face{font-family: Google Sans; font-style: normal; font-weight: 400; font-display: optional; src: url('https://rngsc.net/fonts/google-sans/google-sans-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0102, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family: Google Sans; font-style: italic; font-weight: 400; font-display: optional; src: url('https://rngsc.net/fonts/google-sans/google-sans-latin-400-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0102, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family: Google Sans; font-style: normal; font-weight: 700; font-display: optional; src: url('https://rngsc.net/fonts/google-sans/google-sans-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0102, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family: Google Sans; font-style: italic; font-weight: 700; font-display: optional; src: url('https://rngsc.net/fonts/google-sans/google-sans-latin-700-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0102, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family: Google Sans; font-style: normal; font-weight: 400; font-display: swap; src: url('https://rngsc.net/fonts/google-sans/google-sans-greek-400-normal.woff2') format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}@font-face{font-family: Google Sans; font-style: italic; font-weight: 400; font-display: swap; src: url('https://rngsc.net/fonts/google-sans/google-sans-greek-400-italic.woff2') format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}@font-face{font-family: Google Sans; font-style: normal; font-weight: 700; font-display: swap; src: url('https://rngsc.net/fonts/google-sans/google-sans-greek-700-normal.woff2') format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}@font-face{font-family: Google Sans; font-style: italic; font-weight: 700; font-display: swap; src: url('https://rngsc.net/fonts/google-sans/google-sans-greek-700-italic.woff2') format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}@font-face{font-family: Google Sans Code; font-style: normal; font-weight: 400; font-display: optional; src: url('https://rngsc.net/fonts/google-sans-code/google-sans-code-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family: Google Sans Code; font-style: italic; font-weight: 400; font-display: optional; src: url('https://rngsc.net/fonts/google-sans-code/google-sans-code-latin-400-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family: Google Sans Code; font-style: normal; font-weight: 700; font-display: optional; src: url('https://rngsc.net/fonts/google-sans-code/google-sans-code-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family: Google Sans Code; font-style: italic; font-weight: 700; font-display: optional; src: url('https://rngsc.net/fonts/google-sans-code/google-sans-code-latin-700-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family: Material Symbols Rounded; font-style: normal; font-weight: 100 700; font-display: block; src: url('https://rngsc.net/fonts/material-symbols/material-symbols-rounded-w300-o32.woff2') format('woff2');}.material-symbols-rounded{font-family: Material Symbols Rounded, sans-serif; font-weight: normal; font-style: normal; font-synthesis: none; font-size: 24px; width: 1em; height: 1em; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; overflow: hidden; flex-shrink: 0; vertical-align: middle; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-smoothing: antialiased; font-feature-settings: liga; font-variation-settings: 'wght' 300, 'opsz' 32, 'GRAD' 0, 'FILL' 0;}.material-symbols-rounded.icon-filled{font-variation-settings: 'wght' 300, 'opsz' 32, 'GRAD' 0, 'FILL' 1;}:root{scrollbar-color: var(--color-surface-variant) transparent; scrollbar-width: thin;}::-webkit-scrollbar, ::-webkit-scrollbar-corner{background: transparent; height: 12px; width: 12px;}::-webkit-scrollbar-track{display: none;}::-webkit-scrollbar-thumb{background: content-box currentColor; border: 2px solid transparent; border-radius: 8px; color: var(--color-surface-variant); min-height: 48px; min-width: 48px;}:root{color-scheme: light dark; background-color: var(--color-surface); --container-spacing: 16px; --stage-bottom-offset: 80px; --breakpoint-compact: 600px; --breakpoint-medium: 840px;}:root{--font-family-brand: Google Sans, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-family-plain: Google Sans, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-family-mono: Google Sans Code, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --font-family-code: Google Sans Code, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;}body{margin: 0; font-family: var(--font-family-plain); background-color: var(--color-surface);}:where(:focus, :focus-visible){outline: none;}html.dark::view-transition, :root.dark::view-transition{color-scheme: dark;}@media (prefers-color-scheme: dark){html:not(.light)::view-transition, :root:not(.light)::view-transition{color-scheme: dark;}}html, body{height: var(--visual-viewport-height, 100dvh); overflow: hidden; overscroll-behavior: none;}[data-stage-body]{height: var(--visual-viewport-height, 100dvh); overflow: hidden; background-color: var(--color-surface);}:where(button, [role='button'], a, input, select, textarea){touch-action: manipulation;}@media (pointer: coarse){input, select, textarea{font-size: max(1rem, 100%);}}button, [role='button'], [data-nav-item], .icon-button, .bottom-sheet-handle{-webkit-touch-callout: none; -webkit-user-select: none; user-select: none;}[data-stage-content]{position: relative; flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; height: 100%; background-color: var(--color-surface);}[data-stage-main]{position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow-y: auto; overflow-x: clip; z-index: 1; overscroll-behavior-y: contain; touch-action: pan-y; background-color: var(--color-surface); scrollbar-gutter: auto; scrollbar-width: none; view-transition-name: stage-main;}[data-stage-main]::-webkit-scrollbar{display: none !important; width: 0 !important;}@media (min-width: 840px) and (pointer: fine){[data-stage-main]{scrollbar-gutter: stable both-edges; scrollbar-width: thin; scrollbar-color: var(--color-surface-variant) transparent;}}[hidden]{display: none !important;}[data-stage-header]{position: fixed; top: 0; left: 0; right: 0; z-index: 10; width: 100%; padding-top: calc(var(--container-spacing) + env(safe-area-inset-top)); padding-left: max(var(--container-spacing), env(safe-area-inset-left, 0px)); padding-right: max(var(--container-spacing), env(safe-area-inset-right, 0px)); background: transparent !important; pointer-events: none; view-transition-name: stage-top;}[data-stage-header] > *, [data-stage-bottom] > *, [data-stage-side] > *, [data-stage-fab-stack] > :not(.invisible){pointer-events: auto !important;}.scroll-to.invisible, .invisible{pointer-events: none !important;}[data-stage-header] > header, [data-stage-header] [data-slot='leading'], [data-stage-header] [data-slot='trailing']{min-height: 48px;}[data-stage-header] .page-title, [data-slot='leading'] .page-title{margin: 0 !important; padding: 0 !important; text-align: left !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; text-box-trim: none !important; text-box-edge: auto !important; text-box: normal !important; font-family: var(--font-family-brand); font-weight: 400; letter-spacing: 0; font-size: clamp(1.375rem, 4.5vw, 2rem); line-height: 2.5rem !important; min-width: 0;}.stage-top-blur{--stage-top-blur-height: calc(48px + var(--container-spacing) + env(safe-area-inset-top)); position: sticky; top: 0; left: 0; right: 0; width: 100%; align-self: stretch; height: 0; overflow: visible; z-index: 5; pointer-events: none;}.stage-top-blur::before{content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; height: var(--stage-top-blur-height); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: transparent; mask-image: linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 0.9) 25%, rgba(0, 0, 0, 0.6) 55%, rgba(0, 0, 0, 0.2) 80%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 0.9) 25%, rgba(0, 0, 0, 0.6) 55%, rgba(0, 0, 0, 0.2) 80%, transparent 100%); pointer-events: none;}[data-stage-section]{display: flex; flex-direction: column; width: 100%; min-height: var(--visual-viewport-height, 100dvh); margin: 0; padding: 0; touch-action: pan-y; background-color: var(--color-surface); flex: 1 0 auto; box-sizing: border-box;}.max-w-screen-medium{max-width: var(--breakpoint-medium, 840px) !important;}.page-container{box-sizing: border-box; width: 100%; max-width: var(--breakpoint-medium, 840px); margin-inline: auto; padding-left: max(var(--container-spacing), env(safe-area-inset-left, 0px)); padding-right: max(var(--container-spacing), env(safe-area-inset-right, 0px)); padding-top: calc(48px + 2 * var(--container-spacing) + env(safe-area-inset-top)); padding-bottom: calc(var(--stage-bottom-offset, 80px) + var(--container-spacing) + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 16px;}.page-container-fab{padding-bottom: calc(var(--stage-bottom-offset, 80px) + var(--container-spacing) + 64px + env(safe-area-inset-bottom));}[data-stage-bottom]{position: fixed; bottom: calc(var(--container-spacing) + env(safe-area-inset-bottom)); left: max(var(--container-spacing), env(safe-area-inset-left, 0px)); right: max(var(--container-spacing), env(safe-area-inset-right, 0px)); z-index: 10; width: auto !important; background-color: transparent !important; pointer-events: none; display: flex; align-items: center; justify-content: center; box-sizing: border-box; view-transition-name: stage-bottom;}[data-stage-bottom] [data-navigation-bar-orientation='horizontal']{padding: 0 !important; width: 100% !important; box-sizing: border-box; display: flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; background-color: transparent !important; border: none !important;}[data-stage-side]{display: none; position: fixed; top: 0; left: 0; bottom: 0; z-index: 9; pointer-events: none;}[data-stage-fab-stack]{position: fixed; right: max(var(--container-spacing), env(safe-area-inset-right, 0px)); bottom: calc(var(--stage-bottom-offset, 80px) + var(--container-spacing) + env(safe-area-inset-bottom)) !important; z-index: 15; pointer-events: none !important; display: flex; flex-direction: column; align-items: flex-end; gap: 12px;}@media (min-width: 840px){[data-stage-bottom]{display: none !important;}[data-stage-side]{display: flex !important; position: fixed !important; left: 0; top: 0; bottom: 0; width: 80px; z-index: 10; padding: 0; background-color: transparent !important; align-items: center; justify-content: center;}[data-stage-content][data-stage-has-nav][data-stage-nav-type='standard'] [data-stage-header]{left: 80px; width: calc(100% - 80px);}[data-stage-content][data-stage-has-nav][data-stage-nav-type='standard'] [data-stage-main]{left: 80px; width: calc(100% - 80px);}:root, body{--stage-bottom-offset: 0px !important;}[data-stage-section]{padding-left: var(--container-spacing) !important; padding-right: var(--container-spacing) !important;}.page-container{padding-left: 0 !important; padding-right: 0 !important; padding-bottom: calc(var(--container-spacing) + env(safe-area-inset-bottom));}.page-container-fab{padding-bottom: calc(var(--container-spacing) + 64px + env(safe-area-inset-bottom));}[data-stage-fab-stack]{bottom: calc(var(--container-spacing) + env(safe-area-inset-bottom)) !important;}}@media (min-width: 1000px){[data-stage-content][data-stage-has-nav][data-stage-nav-type='standard'] [data-stage-header]{left: 0; width: 100%;}[data-stage-content][data-stage-has-nav][data-stage-nav-type='standard'] [data-stage-main]{left: 0; width: 100%;}}.surface-glass, [data-stage-header] .surface-glass, [data-stage-header] [data-slot='leading'] .icon-button:not(:is(dialog, [popover]) *), [data-stage-header] [data-slot='trailing'] .icon-button:not(:is(dialog, [popover]) *), [data-stage-fab-stack] .surface-glass, [data-stage-fab-stack] .icon-button, [data-stage-fab-stack] .scroll-to, [data-stage-bottom] .surface-glass, [data-stage-side] .surface-glass, [data-stage-navigation-compact] .surface-glass{--bg-opacity: 70% !important; background-color: color-mix(in srgb, var(--color-surface-container-high) 70%, transparent) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid var(--color-outline-variant); box-shadow: var(--shadow-2);}[data-nav-item] .material-symbols-rounded, [data-nav-item] .type-label-s, [data-spill-nav-items] .material-symbols-rounded{color: var(--color-on-surface-variant) !important; font-variation-settings: 'FILL' 0 !important;}[data-nav-item]:not(.more-menu-action)[data-selected] > div:first-child, [data-nav-item]:not(.more-menu-action)[data-navigation-item-selected] > div:first-child, [data-nav-item]:not(.more-menu-action)[aria-current='page'] > div:first-child, [data-spill-nav-items][data-selected] > div:first-child, [data-spill-nav-items][data-navigation-item-selected] > div:first-child{background-color: var(--color-primary-container) !important;}[data-nav-item]:not(.more-menu-action)[data-selected] .material-symbols-rounded, [data-nav-item]:not(.more-menu-action)[data-navigation-item-selected] .material-symbols-rounded, [data-nav-item]:not(.more-menu-action)[aria-current='page'] .material-symbols-rounded, [data-spill-nav-items][data-selected] .material-symbols-rounded, [data-spill-nav-items][data-navigation-item-selected] .material-symbols-rounded{color: var(--color-on-primary-container) !important; font-variation-settings: 'FILL' 1 !important;}[data-nav-item][data-selected] .type-label-s, [data-nav-item][data-navigation-item-selected] .type-label-s, [data-nav-item][aria-current='page'] .type-label-s{color: var(--color-on-surface) !important;}.more-menu-action[data-selected] .material-symbols-rounded, .more-menu-action[data-navigation-item-selected] .material-symbols-rounded, .more-menu-action[aria-current='page'] .material-symbols-rounded{color: var(--color-on-primary-container) !important; font-variation-settings: 'FILL' 1 !important;}@media (hover: hover) and (pointer: fine){.surface-glass:hover, [data-stage-header] .surface-glass:hover, [data-stage-header] [data-slot='leading'] .icon-button:not(:is(dialog, [popover]) *):hover, [data-stage-header] [data-slot='trailing'] .icon-button:not(:is(dialog, [popover]) *):hover, [data-stage-fab-stack] .surface-glass:hover, [data-stage-fab-stack] .icon-button:hover, [data-stage-fab-stack] .scroll-to:hover, [data-stage-bottom] .surface-glass:hover, [data-stage-side] .surface-glass:hover, [data-stage-navigation-compact] .surface-glass:hover{background-color: color-mix(in srgb, var(--color-surface-container-highest) 75%, transparent) !important;}[data-nav-item]:not([data-selected]):not([data-navigation-item-selected]):not([aria-current='page']):hover .material-symbols-rounded, [data-nav-item]:hover .type-label-s, [data-spill-nav-items]:not([data-selected]):not([data-navigation-item-selected]):hover .material-symbols-rounded{color: var(--color-on-surface) !important;}}a{text-decoration: none;}p, h1, form{margin: 0;}@layer components{.dayjo-nav-pill{display: inline-flex; align-items: center; padding: 4px; border-radius: 9999999px; box-shadow: var(--shadow-2);}.dayjo-nav-rail{display: flex; flex-direction: column; align-items: center; justify-content: center; padding-left: 8px; padding-right: 8px; gap: 16px; height: 100%;}.more-menu-profile{display: flex; flex-direction: column; min-width: 0; flex: 1 1 0%;}.more-menu-account-header{display: flex; align-items: center; gap: 4px; min-width: 0;}.verified-icon{color: var(--color-primary); font-size: 16px; flex-shrink: 0; font-variation-settings: 'FILL' 1;}#dayjo-date-picker-trigger{anchor-name: --dayjo-date-picker-anchor;}#dayjo-date-picker-popover{position-anchor: --dayjo-date-picker-anchor;}.dayjo-date-trigger{appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; max-width: 100%; padding: 0 4px 0 0; margin: 0; border: none; border-radius: 12px; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; text-align: left; touch-action: manipulation; transition: opacity var(--motion-duration-short, 200ms) var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));}.dayjo-date-trigger > span:first-child{overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;}.dayjo-date-trigger:active{opacity: 0.7;}.dayjo-date-trigger-icon{font-size: 1.5rem; flex-shrink: 0; color: var(--color-on-surface-variant); transition: transform var(--motion-duration-short, 200ms) var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));}@media (prefers-reduced-motion: reduce){.dayjo-date-trigger, .dayjo-date-trigger-icon{transition: none;}}@media (hover: hover) and (pointer: fine){.dayjo-date-trigger:hover{opacity: 0.85;}.dayjo-date-trigger:hover .dayjo-date-trigger-icon{color: var(--color-on-surface);}}.day-today-badge{font-size: 0.75rem; font-weight: 600; font-family: var(--font-family-plain); letter-spacing: 0.025rem; line-height: 1.0rem; text-box: trim-both cap alphabetic; display: inline-flex; align-items: center; padding-left: 12px; padding-right: 12px; padding-top: 4px; padding-bottom: 4px; border-radius: 9999999px; background-color: color-mix(in srgb, var(--color-primary-container) var(--bg-opacity, 100%), transparent); color: var(--color-on-primary-container);}.day-celebrating-card{margin: 0;}.day-celebrating-card > .card, .feast-card > .card{gap: 10px; padding: 20px 24px;}.day-celebrating-card > .card{background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary-container) 78%, var(--color-surface-container-high)), color-mix(in srgb, var(--color-secondary-container) 55%, var(--color-surface-container-high))); border: 1px solid color-mix(in srgb, var(--color-primary) 28%, transparent);}.day-celebrating-header{display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;}.day-celebrating-title{font-size: 0.875rem; font-weight: 600; font-family: var(--font-family-plain); letter-spacing: 0.00625rem; line-height: 1.25rem; text-box: trim-both cap alphabetic; display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--color-on-primary-container);}.day-celebrating-card .feast-name-chip{background-color: color-mix(in srgb, var(--color-surface-container-lowest) 75%, var(--color-primary-container)); border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);}.feast-card{margin: 0;}.feast-card > .card{background-color: var(--color-surface-container-high); border: 1px solid color-mix(in srgb, var(--color-outline-variant) 45%, transparent);}.feast-card-holiday > .card{background-color: color-mix(in srgb, var(--color-tertiary-container) 34%, var(--color-surface-container-high)); border-color: color-mix(in srgb, var(--color-tertiary) 30%, transparent);}.feast-card-major > .card{background-color: color-mix(in srgb, var(--color-primary-container) 34%, var(--color-surface-container-high)); border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);}.feast-card-zodiac > .card{background-color: color-mix(in srgb, var(--color-secondary-container) 32%, var(--color-surface-container-high)); border-color: color-mix(in srgb, var(--color-secondary) 26%, transparent);}.feast-title{font-size: 1.125rem; font-weight: 500; font-family: var(--font-family-plain); letter-spacing: 0.0125rem; line-height: 1.75rem; margin: 0; color: var(--color-on-surface);}.feast-names{display: flex; flex-wrap: wrap; gap: 8px; list-style-type: none; padding: 0; margin: 0;}.feast-name-chip{font-size: 0.875rem; font-weight: 500; font-family: var(--font-family-plain); letter-spacing: 0.00625rem; line-height: 1.25rem; text-box: trim-both cap alphabetic; display: inline-flex; align-items: center; min-height: 40px; padding-left: 12px; padding-right: 12px; padding-top: 6px; padding-bottom: 6px; border-radius: var(--radius-md, 12px); background-color: color-mix(in srgb, var(--color-surface-container-highest) var(--bg-opacity, 100%), transparent); color: var(--color-on-surface); text-decoration: none;}@media (hover: hover) and (pointer: fine){.day-celebrating-card .feast-name-chip:hover, .feast-name-chip:hover{background-color: var(--color-secondary-container); color: var(--color-on-secondary-container);}}.feast-name-chip.is-active{background-color: var(--color-primary-container); color: var(--color-on-primary-container); font-weight: 600;}.event-list{display: flex; flex-direction: column; gap: 12px; list-style-type: none; padding: 0; margin: 0;}.event-link{display: block; color: inherit; text-decoration: none;}.card.event-card, .event-card{display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; background-color: color-mix(in srgb, var(--color-surface-container-high) var(--bg-opacity, 100%), transparent); border: 1px solid color-mix(in srgb, var(--color-outline-variant) 45%, transparent);}.event-card-major{background-color: color-mix(in srgb, var(--color-primary-container) 30%, var(--color-surface-container-high)); border-color: color-mix(in srgb, var(--color-primary) 26%, transparent);}.event-card-holiday{background-color: color-mix(in srgb, var(--color-tertiary-container) 30%, var(--color-surface-container-high)); border-color: color-mix(in srgb, var(--color-tertiary) 26%, transparent);}.event-card-observance{background-color: color-mix(in srgb, var(--color-secondary-container) 22%, var(--color-surface-container-high)); border-color: color-mix(in srgb, var(--color-secondary) 20%, transparent);}.event-card-past{opacity: 0.65;}.event-card-today{outline: 2px solid var(--color-primary); outline-offset: -2px;}.event-main{display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1 1 0%;}.event-title{font-size: 1rem; font-weight: 500; font-family: var(--font-family-plain); letter-spacing: 0.009375rem; line-height: 1.5rem; margin: 0; min-width: 0; flex: 1 1 0%; color: var(--color-on-surface);}.event-badges{display: flex; flex-wrap: wrap; gap: 6px;}.event-badge{font-size: 0.75rem; font-weight: 500; font-family: var(--font-family-plain); letter-spacing: 0.025rem; line-height: 1.0rem; text-box: trim-both cap alphabetic; display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 9999999px;}.event-badge-holiday{background-color: var(--color-tertiary-container); color: var(--color-on-tertiary-container);}.event-badge-major{background-color: var(--color-primary-container); color: var(--color-on-primary-container);}.event-badge-movable{background-color: var(--color-secondary-container); color: var(--color-on-secondary-container);}.event-badge-observance{background-color: color-mix(in srgb, var(--color-secondary-container) 75%, var(--color-surface-container-highest)); color: var(--color-on-secondary-container);}.event-badge-zodiac{background-color: color-mix(in srgb, var(--color-tertiary-container) 65%, var(--color-surface-container-highest)); color: var(--color-on-tertiary-container);}.event-badge-country{background-color: var(--color-surface-container-highest); color: var(--color-on-surface);}.event-badge-long-weekend{background-color: var(--color-primary-container); color: var(--color-on-primary-container); font-weight: 600;}.event-badge-bridge{background-color: var(--color-secondary-container); color: var(--color-on-secondary-container);}.event-badge-weekend{background-color: var(--color-surface-container-highest); color: var(--color-on-surface-variant);}.holidays-summary-bar{display: flex; flex-wrap: wrap; align-items: center; gap: 8px;}.event-date{font-size: 0.875rem; font-weight: 600; font-family: var(--font-family-plain); letter-spacing: 0.00625rem; line-height: 1.25rem; text-box: trim-both cap alphabetic; display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; border-radius: var(--radius-md, 12px); margin: 0; flex-shrink: 0; background-color: var(--color-surface-container-highest); color: var(--color-on-surface);}.event-card-major .event-date{background-color: var(--color-primary-container); color: var(--color-on-primary-container);}.event-card-holiday .event-date{background-color: var(--color-tertiary-container); color: var(--color-on-tertiary-container);}.names-directory-controls{display: flex; flex-direction: column; gap: 12px;}.names-alpha-bar{padding-bottom: 4px;}.names-sections{display: flex; flex-direction: column; gap: 24px;}.names-letter-section{display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 88px; content-visibility: auto; contain-intrinsic-size: auto 320px;}.names-letter-heading{font-size: 1rem; font-weight: 600; font-family: var(--font-family-plain); letter-spacing: 0.009375rem; line-height: 1.5rem; text-box: trim-both cap alphabetic; display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; padding: 0 0.75rem; margin: 0; border-radius: var(--radius-md, 12px); background-color: var(--color-primary-container); color: var(--color-on-primary-container);}.names-directory-grid{display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; list-style-type: none; padding: 0; margin: 0;}.names-directory-item{margin: 0; min-width: 0;}.name-directory-link{display: block; height: 100%; color: inherit; text-decoration: none;}.name-directory-card{display: flex; flex-direction: column; justify-content: center; gap: 2px; height: 100%; min-height: 56px; min-width: 0; background-color: color-mix(in srgb, var(--color-surface-container-high) var(--bg-opacity, 100%), transparent); border: 1px solid color-mix(in srgb, var(--color-outline-variant) 45%, transparent);}@media (hover: hover) and (pointer: fine){.name-directory-card:hover{background-color: color-mix(in srgb, var(--color-secondary-container) 45%, var(--color-surface-container-highest)); border-color: color-mix(in srgb, var(--color-secondary) 30%, transparent);}}.name-directory-title{font-size: 1rem; font-weight: 600; font-family: var(--font-family-plain); letter-spacing: 0.009375rem; line-height: 1.5rem; color: var(--color-on-surface);}.name-directory-forms{font-size: 0.875rem; font-weight: 400; font-family: var(--font-family-plain); letter-spacing: 0.015625rem; line-height: 1.25rem; color: var(--color-on-surface-variant); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-box: normal;}.name-next-banner{position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 4px; padding: 20px 24px; background: linear-gradient(135deg, var(--color-primary-container), color-mix(in srgb, var(--color-secondary-container) 65%, var(--color-primary-container))); color: var(--color-on-primary-container); border: 1px solid color-mix(in srgb, var(--color-primary) 24%, transparent);}.name-next-banner-tertiary{background: linear-gradient(135deg, var(--color-tertiary-container), color-mix(in srgb, var(--color-primary-container) 55%, var(--color-tertiary-container))); color: var(--color-on-tertiary-container); border-color: color-mix(in srgb, var(--color-tertiary) 26%, transparent);}.name-next-banner-secondary{background: linear-gradient(135deg, var(--color-secondary-container), color-mix(in srgb, var(--color-primary-container) 50%, var(--color-secondary-container))); color: var(--color-on-secondary-container); border-color: color-mix(in srgb, var(--color-secondary) 26%, transparent);}.name-next-header{display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px;}.name-next-kicker{font-size: 0.875rem; font-weight: 600; font-family: var(--font-family-plain); letter-spacing: 0.00625rem; line-height: 1.25rem; text-box: trim-both cap alphabetic;}.name-next-countdown{font-size: 0.75rem; font-weight: 600; font-family: var(--font-family-plain); letter-spacing: 0.025rem; line-height: 1.0rem; text-box: trim-both cap alphabetic; display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 9999999px; background-color: color-mix(in srgb, currentColor 14%, transparent);}.name-next-date{font-size: 1.375rem; font-weight: 500; font-family: var(--font-family-plain); letter-spacing: 0; line-height: 1.75rem; margin: 0;}.name-next-feast-title{font-size: 1rem; font-weight: 400; font-family: var(--font-family-plain); letter-spacing: 0.009375rem; line-height: 1.5rem; margin: 0; opacity: 0.9;}.card.name-meta-card, .name-meta-card{display: flex; flex-direction: column; gap: 16px; padding: 20px 24px; border: 1px solid color-mix(in srgb, var(--color-outline-variant) 45%, transparent);}.name-meta-group{display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: var(--radius-lg, 16px); background-color: color-mix(in srgb, var(--color-surface-container) 65%, transparent);}.name-meta-group span.feast-name-chip{background-color: color-mix(in srgb, var(--color-secondary-container) 70%, var(--color-surface-container-highest)); color: var(--color-on-secondary-container);}.name-meta-label{font-size: 0.875rem; font-weight: 600; font-family: var(--font-family-plain); letter-spacing: 0.00625rem; line-height: 1.25rem; text-box: trim-both cap alphabetic; margin: 0; color: var(--color-on-surface-variant);}.name-feasts-section{display: flex; flex-direction: column; gap: 12px;}.name-section-heading{font-size: 1rem; font-weight: 600; font-family: var(--font-family-plain); letter-spacing: 0.009375rem; line-height: 1.5rem; text-box: trim-both cap alphabetic; display: flex; align-items: center; gap: 8px; margin: 0; color: var(--color-on-surface);}.more-menu-action{display: flex; min-height: 48px; width: 100%; align-items: center; gap: 12px; color: var(--color-on-surface); background-color: transparent; border: 0; border-radius: 12px; padding: 0 12px; cursor: pointer; text-decoration: none;}.more-menu-action[data-selected], .more-menu-action[aria-current='page']{background-color: color-mix(in srgb, var(--color-primary-container) 75%, transparent); color: var(--color-on-primary-container); font-weight: 600;}.card.settings-card, .settings-card{display: flex; flex-direction: column; gap: 16px; padding: 24px; background-color: var(--color-surface-container-high); border: 1px solid color-mix(in srgb, var(--color-outline-variant) 45%, transparent);}.settings-card .select-input{background-color: var(--color-surface-container-lowest);}.settings-country-flag{display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background-color: var(--color-surface-container-highest); font-size: 1.25rem; line-height: 1; flex-shrink: 0;}.settings-fieldset{display: flex; flex-direction: column; gap: 16px; border: none; padding: 0; margin: 0;}.settings-legend{font-size: 1.375rem; font-weight: 500; font-family: var(--font-family-plain); letter-spacing: 0; line-height: 1.75rem; padding: 0; margin: 0 0 8px 0; color: var(--color-on-surface);}.settings-description{font-size: 0.875rem; font-weight: 400; font-family: var(--font-family-plain); letter-spacing: 0.015625rem; line-height: 1.25rem; margin: 0; color: var(--color-on-surface-variant);}}