@layer normalize, base, components, app, base-theme, theme;
@layer normalize {
  *,
  :after,
  :before {
    box-sizing: border-box;
  }
  :not(dialog) {
    margin: 0;
  }
  @media (prefers-reduced-motion:no-preference) {
    html {
      interpolate-size: allow-keywords;
    }
  }
  body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  canvas,
  img,
  picture,
  svg,
  video {
    display: block;
    max-width: 100%;
  }
  button,
  input,
  select,
  textarea {
    font: inherit;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p {
    overflow-wrap: break-word;
  }
  p {
    text-wrap: pretty;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    text-wrap: balance;
  }
  #__next,
  #root {
    isolation: isolate;
  }
}
@media (update:slow) {
  *,
  :after,
  :before {
    animation-duration: .01ms!important;
    animation-iteration-count: 1!important;
    transition-duration: .01ms!important;
    scroll-behavior: auto!important;
  }
}
@media (prefers-reduced-motion:reduce) {
  * {
    animation-duration: .01ms!important;
    animation-iteration-count: 1!important;
    transition-duration: .01ms!important;
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(1turn);
  }
}
@layer base {
  :root {
    --black: hsl(var(--blackH),var(--blackS),var(--blackL));
    --gray: hsl(var(--grayH),var(--grayS),var(--grayL));
    --white: hsl(var(--whiteH),var(--whiteS),var(--whiteL));
    --blue: hsl(var(--blueH),var(--blueS),var(--blueL));
    --green: hsl(var(--greenH),var(--greenS),var(--greenL));
    --yellow: hsl(var(--yellowH),var(--yellowS),var(--yellowL));
    --orange: hsl(var(--orangeH),var(--orangeS),var(--orangeL));
    --red: hsl(var(--redH),var(--redS),var(--redL));
    --pink: hsl(var(--pinkH),var(--pinkS),var(--pinkL));
    --purple: hsl(var(--purpleH),var(--purpleS),var(--purpleL));
    --error: hsl(var(--errorH),var(--errorS),var(--errorL));
    --error-dull: hsl(var(--errorH),var(--errorS),var(--errorL),0.2);
    --warning: hsl(var(--warningH),var(--warningS),var(--warningL));
    --warning-dull: hsl(var(--warningH),var(--warningS),var(--warningL),0.2);
    --info: hsl(var(--infoH),var(--infoS),var(--infoL));
    --info-dull: hsl(var(--infoH),var(--infoS),var(--infoL),0.2);
    --success: hsl(var(--successH),var(--successS),var(--successL));
    --success-dull: hsl(var(--successH),var(--successS),var(--successL),0.2);
    --background: hsl(var(--backgroundH),var(--backgroundS),var(--backgroundL));
    --background-dull: hsl(var(--backgroundH),var(--backgroundS),var(--backgroundL),0.2);
    --surface-recessed: hsl(var(--backgroundH),var(--backgroundS),var(--surface-recessedL,var(--backgroundL)));
    --body: hsl(var(--bodyH),var(--bodyS),var(--bodyL));
    --body-dull: hsl(var(--bodyH),var(--bodyS),var(--bodyL),0.2);
    --secondary: hsl(var(--secondaryH),var(--secondaryS),var(--secondaryL));
    --secondary-dull: hsl(var(--secondaryH),var(--secondaryS),var(--secondaryL),0.2);
    --primary: hsl(var(--primaryH),var(--primaryS),var(--primaryL));
    --primary-dull: hsl(var(--primaryH),var(--primaryS),var(--primaryL),0.2);
    --muted: var(--secondary);
    --border: hsl(var(--borderH,var(--secondaryH)),var(--borderS,var(--secondaryS)),var(--borderL,var(--secondaryL)));
  }
  form {
    margin: 0 0 var(--s4) 0;
  }
  fieldset {
    border: var(--border-width) solid;
    border-radius: var(--br-base);
    padding: var(--s3);
    margin: 0 0 var(--s3) 0;
  }
  legend {
    font-weight: var(--fw-semibold);
    padding: 0 var(--s2);
    opacity: 1;
  }
  label {
    display: block;
    font-weight: var(--fw-medium);
    margin-bottom: var(--s2);
  }
  input[type=email],
  input[type=number],
  input[type=password],
  input[type=search],
  input[type=tel],
  input[type=text],
  input[type=url],
  select,
  textarea {
    background-color: transparent;
    color: inherit;
    padding: var(--s3);
    border: var(--border-width) solid;
    border-radius: var(--br-base);
    font-size: var(--f5);
    line-height: var(--lh-base);
    transition: border-color var(--transition-base),box-shadow
      var(--transition-base),opacity var(--transition-base);
    margin-bottom: var(--s3);
    box-sizing: border-box;
  }
  input:focus,
  select:focus,
  textarea:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    opacity: 1;
  }
  input[type=checkbox],
  input[type=radio],
  input[type=range],
  progress {
    accent-color: var(--primary);
  }
  button,
  input[type=button],
  input[type=submit] {
    display: inline-block;
    padding: var(--s2) var(--s2);
    background: none;
    color: inherit;
    border: var(--border-width) solid;
    border-radius: var(--br-base);
    font-size: var(--f5);
    font-weight: var(--fw-medium);
    cursor: pointer;
    box-shadow: var(--button-shadow,none);
    transition: box-shadow var(--transition-base),opacity
      var(--transition-base),transform var(--transition-fast);
    text-decoration: none;
  }
  button:hover,
  input[type=button]:hover,
  input[type=submit]:hover {
    opacity: .8;
    transform: translateY(-1px);
  }
  button:active,
  input[type=button]:active,
  input[type=submit]:active {
    transform: translateY(0);
  }
  button:disabled,
  input[type=button]:disabled,
  input[type=submit]:disabled {
    opacity: .3;
    cursor: not-allowed;
    transform: none;
  }
  :root {
    --nav-drawer-duration: 250ms;
    --nav-footer-height: 72px;
  }
  body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--nav-width,auto) 1fr var(--aside-width,0);
    grid-template-rows: auto auto auto auto 1fr auto auto;
    grid-template-areas: "banner  banner  banner" "header  header  header"
      "subhead subhead subhead" "navhd   mainhd  aside" "nav     main    aside"
      "navft   mainft  aside" "footer  footer  footer";
    background-color: var(--background);
    color: var(--body);
  }
}
@layer base {}
@layer base {
  body:has(footer[fixed]) {
    padding-bottom: var(--footer-height,56px);
  }
  body > header {
    grid-area: header;
  }
  body > nav {
    grid-area: nav;
  }
  body > main {
    grid-area: main;
  }
  body > aside {
    grid-area: aside;
  }
  body > footer {
    grid-area: footer;
  }
  body > header {
    position: sticky;
    top: var(--banner-height,0);
    z-index: var(--z-sticky);
    margin: 0;
    padding: 0;
    background: var(--background);
  }
  body > nav {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    padding: var(--s3) var(--s2);
    position: sticky;
    top: calc(var(--banner-height, 0px) + var(--header-height, 56px));
    max-height: calc(100vh - var(--banner-height, 0px) - var(--header-height,
      56px) - var(--footer-height, 76px));
    overflow-y: auto;
    align-self: start;
    padding-bottom: calc(var(--nav-footer-height) + var(--s3));
  }
  body:not(:has(ui-nav-footer)) > nav {
    padding-bottom: var(--s3);
  }
  body > nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s1);
  }
  body > nav li {
    position: relative;
  }
  body > nav a {
    display: block;
    text-decoration: none;
    color: inherit;
    font-weight: var(--fw-medium);
    padding: var(--s2) var(--s3);
    border-radius: var(--br-base);
    transition: opacity var(--transition-base);
  }
  body > nav a:hover {
    opacity: .7;
  }
  body > nav a[aria-current=page] {
    opacity: .5;
    cursor: default;
  }
  body > nav ul ul {
    padding-left: var(--s3);
    border-left: var(--border-width) solid;
    margin-left: var(--s3);
    margin-top: var(--s1);
  }
  body > main {
    padding: var(--main-padding,0);
    max-width: var(--main-max-width,var(--max-width-lg));
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
  }
  body > aside {
    padding: var(--aside-padding,var(--s3) var(--s2));
    position: sticky;
    top: calc(var(--banner-height, 0px) + var(--header-height, 56px));
    max-height: calc(100vh - var(--banner-height, 0px) - var(--header-height,
      56px));
    overflow-y: auto;
    align-self: start;
  }
  body > footer {
    padding: var(--footer-padding,var(--s3) var(--container-padding));
    background: var(--background);
  }
  body > footer,
  body > footer[fixed] {
    border-top: var(--border-width) solid;
  }
  body > footer[fixed] {
    grid-area: unset;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-fixed);
  }
  ui-banner {
    grid-area: banner;
    top: 0;
    z-index: var(--z-sticky);
  }
  ui-banner,
  ui-sub-header {
    display: block;
    position: sticky;
    background: var(--background);
  }
  ui-sub-header {
    grid-area: subhead;
    top: calc(var(--banner-height, 0px) + var(--header-height, 0px));
    z-index: calc(var(--z-sticky) - 1);
  }
  ui-nav-header {
    grid-area: navhd;
    padding: var(--s3) var(--s2) var(--s2);
    top: calc(var(--banner-height, 0px) + var(--header-height, 56px));
    align-self: start;
  }
  ui-nav-footer,
  ui-nav-header {
    display: block;
    position: sticky;
    z-index: var(--z-sticky);
    background: var(--background);
  }
  ui-nav-footer {
    grid-area: navft;
    padding: var(--s2) var(--s2) var(--s3);
    bottom: var(--footer-height,0);
    align-self: end;
  }
  ui-main-header {
    display: block;
    grid-area: mainhd;
    padding: var(--s3) var(--container-padding) var(--s2);
  }
  ui-main-footer {
    display: block;
    grid-area: mainft;
    padding: var(--s2) var(--container-padding) var(--s3);
  }
  #nav-toggle,
  ui-nav-toggle {
    display: none;
  }
  ui-nav-toggle label[for=nav-toggle] {
    display: flex;
    width: 44px;
    height: 44px;
    cursor: pointer;
    background: transparent;
    border: var(--border-width) solid;
    border-radius: var(--br-base);
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    transition: opacity var(--transition-base);
  }
  ui-nav-toggle label[for=nav-toggle]:hover {
    opacity: .7;
  }
  ui-nav-toggle label[for=nav-toggle] span,
  ui-nav-toggle label[for=nav-toggle]:after,
  ui-nav-toggle label[for=nav-toggle]:before {
    content: "";
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    transition: all .3s ease;
  }
  ui-nav-toggle label[for=nav-toggle] span {
    pointer-events: none;
  }
  #nav-toggle:checked ~ * ui-nav-toggle label[for=nav-toggle]:before,
  #nav-toggle:checked ~ header ui-nav-toggle label[for=nav-toggle]:before {
    transform: translateY(6px) rotate(45deg);
  }
  #nav-toggle:checked ~ * ui-nav-toggle label[for=nav-toggle] span,
  #nav-toggle:checked ~ header ui-nav-toggle label[for=nav-toggle] span {
    opacity: 0;
  }
  #nav-toggle:checked ~ * ui-nav-toggle label[for=nav-toggle]:after,
  #nav-toggle:checked ~ header ui-nav-toggle label[for=nav-toggle]:after {
    transform: translateY(-6px) rotate(-45deg);
  }
  label.nav-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: var(--backdrop-color);
    z-index: calc(var(--z-fixed) + 1);
    cursor: pointer;
    opacity: 0;
    transition: var(--nav-drawer-duration) allow-discrete;
    transition-property: display,opacity,overlay;
  }
  #nav-toggle:checked ~ label.nav-backdrop {
    display: block;
    opacity: 1;
  }
  @starting-style {
    #nav-toggle:checked ~ label.nav-backdrop {
      opacity: 0;
    }
  }
  @media (max-width:900px) {
    body {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto auto auto 1fr auto auto;
      grid-template-areas: "banner" "header" "subhead" "mainhd" "main" "mainft"
        "footer";
    }
    body > aside,
    body > nav,
    ui-nav-footer,
    ui-nav-header {
      display: none;
    }
    ui-nav-toggle {
      display: block;
    }
    body > nav {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      height: 100vh;
      width: min(80vw,320px);
      z-index: calc(var(--z-fixed) + 2);
      background: var(--background);
      box-shadow: 4px 0 12px var(--drawer-shadow-color);
      overflow-y: auto;
      max-height: calc(100vh - var(--nav-header-height, 56px));
      padding: var(--s3);
      padding-top: calc(var(--banner-height, 0px) + var(--header-height, 56px) +
        var(--s3));
      padding-bottom: calc(var(--nav-footer-height) + var(--s3));
      transform: translateX(-100%);
      transition: var(--nav-drawer-duration) allow-discrete;
      transition-property: display,transform;
    }
    body:not(:has(ui-nav-footer)) > nav {
      max-height: 100vh;
    }
    #nav-toggle:checked ~ nav {
      display: flex;
      transform: translateX(0);
    }
    @starting-style {
      #nav-toggle:checked ~ nav {
        transform: translateX(-100%);
      }
    }
    ui-nav-header {
      position: fixed;
      top: var(--banner-height,0);
      left: 0;
      width: min(80vw,320px);
      height: var(--header-height,56px);
      z-index: calc(var(--z-fixed) + 3);
      background: var(--background);
      border-bottom: var(--border-width) solid;
      align-items: center;
      transform: translateX(-100%);
      transition: var(--nav-drawer-duration) allow-discrete;
      transition-property: display,transform;
    }
    #nav-toggle:checked ~ ui-nav-header {
      display: flex;
      transform: translateX(0);
    }
    @starting-style {
      #nav-toggle:checked ~ ui-nav-header {
        transform: translateX(-100%);
      }
    }
    ui-nav-footer {
      position: fixed;
      bottom: 0;
      left: 0;
      width: min(80vw,320px);
      height: var(--nav-footer-height);
      z-index: calc(var(--z-fixed) + 3);
      background: var(--background);
      border-top: var(--border-width) solid;
      align-items: center;
      transform: translateX(-100%);
      transition: var(--nav-drawer-duration) allow-discrete;
      transition-property: display,transform;
    }
    #nav-toggle:checked ~ ui-nav-footer {
      display: flex;
      transform: translateX(0);
    }
    @starting-style {
      #nav-toggle:checked ~ ui-nav-footer {
        transform: translateX(-100%);
      }
    }
  }
}
@layer base {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0 0 var(--s3) 0;
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
  }
  h1 {
    font-size: var(--f1);
  }
  h2 {
    font-size: var(--f2);
  }
  h3 {
    font-size: var(--f3);
  }
  h4 {
    font-size: var(--f4);
  }
  h5 {
    font-size: var(--f5);
  }
  h6 {
    font-size: var(--f6);
  }
  a {
    color: var(--primary);
    text-decoration: underline;
    transition: color var(--transition-base);
  }
  @media (max-width:768px) {
    h1 {
      font-size: var(--f3);
    }
    h2,
    h3 {
      font-size: var(--f4);
    }
  }
  @media (max-width:480px) {
    main {
      padding: var(--s3);
    }
    h1 {
      font-size: var(--f3);
    }
    h2 {
      font-size: var(--f4);
    }
  }
}
@layer base {
  html {
    color-scheme: light dark;
    font-family: var(--font-family-base);
    font-size: var(--f5);
    line-height: var(--lh-base);
    height: 100%;
    color: var(--body);
    background-color: var(--background);
  }
  main {
    margin: auto;
  }
  p {
    line-height: var(--lh-relaxed);
    text-wrap: balance;
  }
  ol,
  p,
  ul {
    margin: 0 0 var(--s3) 0;
  }
  ol,
  ul {
    padding: var(--s2) 0 var(--s2) var(--s4);
  }
  li {
    margin-bottom: var(--s2);
  }
  table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 var(--s4) 0;
  }
  td,
  th {
    text-align: left;
    padding: var(--s3) var(--s3);
    border-bottom: var(--border-width) solid;
    opacity: .9;
  }
  th {
    font-weight: var(--fw-semibold);
    opacity: 1;
  }
  code,
  kbd,
  samp {
    font-family: var(--font-family-mono);
    font-size: .9em;
    border: var(--border-width) solid;
    padding: .2em .4em;
    border-radius: var(--br-sm);
  }
  pre {
    border: var(--border-width) solid;
    padding: var(--s3);
    border-radius: var(--br-base);
    overflow-x: auto;
    margin: 0 0 var(--s3) 0;
  }
  pre code {
    border: none;
    opacity: 1;
    padding: 0;
  }
  [role=tablist] {
    display: flex;
    border-bottom: var(--border-width) solid;
    opacity: .8;
    margin-bottom: var(--s3);
  }
  [role=tab] {
    padding: var(--s3) var(--s3);
    background: none;
    border-radius: 0;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-weight: var(--fw-medium);
    opacity: 1;
    transition: all var(--transition-base);
  }
  [role=tab]:hover {
    opacity: 1;
  }
  [role=tab][aria-selected=true] {
    opacity: 1;
    border-bottom-color: currentColor;
  }
  [role=tabpanel] {
    padding: var(--s3) 0;
  }
  [role=tabpanel][hidden] {
    display: none;
  }
  details {
    margin: 0 0 var(--s2) 0;
  }
  details,
  summary {
    border-radius: var(--br-base);
  }
  summary {
    padding: var(--s2);
    cursor: pointer;
    font-weight: var(--fw-medium);
    transition: opacity var(--transition-base);
    opacity: 1;
  }
  summary:hover {
    opacity: .7;
  }
  details[open] summary {
    border-radius: var(--br-base) var(--br-base) 0 0;
  }
  details > :not(summary):not(ul) {
    padding: var(--s2);
  }
  :focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }
  .skip-to-main {
    position: absolute;
    top: -40px;
    left: 6px;
    background: currentColor;
    color: var(--primary-contrast);
    padding: 8px;
    text-decoration: none;
    border-radius: var(--br-base);
    z-index: var(--z-tooltip);
  }
  .skip-to-main:focus {
    top: 6px;
  }
}
@layer base-theme {
  :root {
    --font-family-base: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --font-family-mono: ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;
    --f-headline: 6rem;
    --f-subheadline: 5rem;
    --f1: 3rem;
    --f2: 2.25rem;
    --f3: 1.5rem;
    --f4: 1.25rem;
    --f5: 1rem;
    --f6: 0.875rem;
    --f7: 0.75rem;
    --s0: 0;
    --s1: 0.25rem;
    --s2: 0.5rem;
    --s3: 1rem;
    --s4: 2rem;
    --s5: 3rem;
    --s6: 4rem;
    --s7: 6rem;
    --max-width-sm: 640px;
    --max-width-md: 768px;
    --max-width-lg: 1024px;
    --max-width-xl: 1280px;
    --max-width-2xl: 1536px;
    --banner-height: 0px;
    --header-height: 56px;
    --sub-header-height: 0px;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --lh-tight: 1.2;
    --lh-base: 1.5;
    --lh-relaxed: 1.7;
    --border-width: 1px;
    --backdrop-color: rgba(0,0,0,.5);
    --drawer-shadow-color: rgba(0,0,0,.15);
    --primary-contrast: hsl(var(--whiteH),var(--whiteS),var(--whiteL));
    --focus-ring-color: var(--primary-dull);
    --focus-ring-width: 3px;
    --br-none: 0;
    --br-sm: 0.25rem;
    --br-base: 0.5rem;
    --br-lg: 0.75rem;
    --br-xl: 1rem;
    --br-full: 9999px;
    --button-shadow: none;
    --shadow-sm: 0 1px 2px 0 rgba(0,0,0,.05);
    --shadow-base: 0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);
    --transition-fast: 0.15s ease-in-out;
    --transition-base: 0.2s ease-in-out;
    --transition-slow: 0.3s ease-in-out;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --grid-columns: 12;
    --container-padding: var(--s3);
    --ease-in: cubic-bezier(0.4,0,1,1);
    --ease-out: cubic-bezier(0,0,0.2,1);
    --ease-in-out: cubic-bezier(0.4,0,0.2,1);
    --blackH: 0;
    --blackS: 0%;
    --blackL: 0%;
    --grayH: 220;
    --grayS: 14%;
    --grayL: 41%;
    --whiteH: 0;
    --whiteS: 0%;
    --whiteL: 100%;
    --blueH: 217;
    --blueS: 91%;
    --blueL: 60%;
    --greenH: 142;
    --greenS: 71%;
    --greenL: 45%;
    --yellowH: 45;
    --yellowS: 93%;
    --yellowL: 47%;
    --orangeH: 25;
    --orangeS: 95%;
    --orangeL: 53%;
    --redH: 0;
    --redS: 84%;
    --redL: 60%;
    --purpleH: 262;
    --purpleS: 83%;
    --purpleL: 58%;
    --pinkH: 330;
    --pinkS: 81%;
    --pinkL: 60%;
    --errorH: var(--redH);
    --errorS: var(--redS);
    --errorL: var(--redL);
    --warningH: var(--orangeH);
    --warningS: var(--orangeS);
    --warningL: var(--orangeL);
    --infoH: var(--blueH);
    --infoS: var(--blueS);
    --infoL: var(--blueL);
    --successH: var(--greenH);
    --successS: var(--greenS);
    --successL: var(--greenL);
    --backgroundH: var(--whiteH);
    --backgroundS: var(--whiteS);
    --backgroundL: var(--whiteL);
    --bodyH: var(--blackH);
    --bodyS: var(--blackS);
    --bodyL: 13%;
    --secondaryH: var(--grayH);
    --secondaryS: var(--grayS);
    --secondaryL: var(--grayL);
    --primaryH: var(--blueH);
    --primaryS: var(--blueS);
    --primaryL: var(--blueL);
    --borderH: var(--grayH);
    --borderS: var(--grayS);
    --borderL: 85%;
    --surface-recessedL: 96%;
  }
  @media (prefers-color-scheme:dark) {
    :root:not([data-theme]) {
      --backgroundH: var(--grayH);
      --backgroundS: 14%;
      --backgroundL: 11%;
      --bodyH: 0;
      --bodyS: 0%;
      --bodyL: 92%;
      --secondaryH: var(--grayH);
      --secondaryS: 14%;
      --secondaryL: 65%;
      --primaryL: 66%;
      --borderL: 28%;
      --surface-recessedL: 7%;
    }
  }
  :root[data-theme=dark] {
    --backgroundH: var(--grayH);
    --backgroundS: 14%;
    --backgroundL: 11%;
    --bodyH: 0;
    --bodyS: 0%;
    --bodyL: 92%;
    --secondaryH: var(--grayH);
    --secondaryS: 14%;
    --secondaryL: 65%;
    --primaryL: 66%;
    --borderL: 28%;
    --surface-recessedL: 7%;
  }
}
@layer components {
  ui-card {
    display: block;
    border: var(--border-width) solid;
    border-radius: var(--br-lg);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
    overflow: hidden;
  }
  ui-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
  ui-card[clickable] {
    cursor: pointer;
  }
  ui-card[clickable]:active {
    transform: translateY(0);
  }
  ui-badge {
    display: inline-block;
    padding: var(--s1) var(--s2);
    font-size: var(--f7);
    font-weight: var(--fw-medium);
    border: var(--border-width) solid;
    border-radius: var(--br-full);
    text-transform: uppercase;
    letter-spacing: .05em;
  }
  ui-badge[variant=success] {
    background-color: var(--success-dull);
    color: var(--success);
  }
  ui-badge[variant=warning] {
    background-color: var(--warning-dull);
    color: var(--warning);
  }
  ui-badge[variant=error] {
    background-color: var(--error-dull);
    color: var(--error);
  }
  ui-badge[variant=info] {
    background-color: var(--info-dull);
    color: var(--info);
  }
  ui-button-group {
    display: flex;
    gap: var(--s2);
    flex-wrap: wrap;
  }
  ui-button-group[orientation=vertical] {
    flex-direction: column;
  }
  ui-button-group[attached] {
    gap: 0;
  }
  ui-button-group[attached] > button:not(:first-child),
  ui-button-group[attached] > input:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
  }
  ui-button-group[attached] > button:not(:last-child),
  ui-button-group[attached] > input:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  ui-grid {
    display: grid;
    gap: var(--s3);
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
  }
  ui-grid[cols="1"] {
    grid-template-columns: 1fr;
  }
  ui-grid[cols="2"] {
    grid-template-columns: repeat(2,1fr);
  }
  ui-grid[cols="3"] {
    grid-template-columns: repeat(3,1fr);
  }
  ui-grid[cols="4"] {
    grid-template-columns: repeat(4,1fr);
  }
  @media (max-width:768px) {
    ui-grid[cols="2"],
    ui-grid[cols="3"],
    ui-grid[cols="4"] {
      grid-template-columns: 1fr;
    }
  }
  ui-stack {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
  }
  ui-stack[spacing=xs] {
    gap: var(--s1);
  }
  ui-stack[spacing=sm] {
    gap: var(--s2);
  }
  ui-stack[spacing=md] {
    gap: var(--s3);
  }
  ui-stack[spacing=lg] {
    gap: var(--s4);
  }
  ui-stack[spacing=xl] {
    gap: var(--s5);
  }
  ui-stack[direction=row] {
    flex-direction: row;
    align-items: center;
  }
  ui-progress {
    width: 100%;
    height: 8px;
    border: var(--border-width) solid;
    overflow: hidden;
  }
  ui-progress,
  ui-progress:before {
    display: block;
    border-radius: var(--br-full);
  }
  ui-progress:before {
    content: "";
    height: 100%;
    background-color: currentColor;
    width: var(--progress-value,0);
    transition: width var(--transition-base);
  }
  ui-progress[variant=success]:before {
    background-color: var(--success);
  }
  ui-progress[variant=warning]:before {
    background-color: var(--warning);
  }
  ui-progress[variant=error]:before {
    background-color: var(--error);
  }
  ui-notifications {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
  }
  ui-notifications:empty {
    display: none;
  }
  ui-notifications > div {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
  }
  ui-notifications [data-row] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
  }
  ui-notifications [data-row] > button {
    flex-shrink: 0;
  }
  ui-alert {
    display: flex;
    align-items: baseline;
    gap: var(--s2);
    padding: var(--s3);
    border-radius: var(--br-base);
    border: var(--border-width) solid;
  }
  ui-alert[variant]:before {
    content: var(--alert-glyph,"");
    flex: none;
    font-weight: var(--fw-bold);
    line-height: 1;
  }
  ui-alert[variant=success] {
    --alert-glyph: "✓";
    background-color: var(--success-dull);
    border-color: var(--success);
    color: var(--success);
  }
  ui-alert[variant=warning] {
    --alert-glyph: "!";
    background-color: var(--warning-dull);
    border-color: var(--warning);
    color: var(--warning);
  }
  ui-alert[variant=error] {
    --alert-glyph: "✕";
    background-color: var(--error-dull);
    border-color: var(--error);
    color: var(--error);
  }
  ui-alert[variant=info] {
    --alert-glyph: "i";
    background-color: var(--info-dull);
    border-color: var(--info);
    color: var(--info);
  }
  ui-divider {
    display: block;
    height: 1px;
    margin: var(--s4) 0;
    border: none;
    border-top: var(--border-width) solid;
  }
  ui-divider[orientation=vertical] {
    width: 1px;
    height: auto;
    margin: 0 var(--s3);
  }
  ui-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-color: currentcolor transparent;
    border-style: solid;
    border-width: 2px;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  ui-spinner[size=sm] {
    width: 16px;
    height: 16px;
  }
  ui-spinner[size=lg] {
    width: 32px;
    height: 32px;
    border-width: 3px;
  }
  ui-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--s2);
    font-size: var(--f5);
  }
  ui-breadcrumb a {
    color: var(--primary);
    text-decoration: none;
    padding: var(--s1) var(--s2);
    border-radius: var(--br-sm);
    transition: opacity var(--transition-base);
  }
  ui-breadcrumb a:hover {
    opacity: .7;
  }
  ui-breadcrumb:before {
    content: attr(separator);
    opacity: .5;
    margin: 0 var(--s1);
  }
  ui-breadcrumb:not([separator]):before {
    display: none;
  }
  ui-avatar {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: var(--br-full);
    border: var(--border-width) solid;
    font-weight: var(--fw-medium);
    text-align: center;
    line-height: 40px;
    font-size: var(--f5);
    overflow: hidden;
  }
  ui-avatar[size=sm] {
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: var(--f7);
  }
  ui-avatar[size=lg] {
    width: 56px;
    height: 56px;
    line-height: 56px;
    font-size: var(--f4);
  }
  ui-avatar img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
  }
  ui-data-actions {
    display: block;
  }
  ui-data-actions > div {
    display: flex;
    gap: var(--s2);
    margin-bottom: var(--s2);
  }
  p[data-status] {
    margin-top: var(--s2);
    font-size: var(--f5);
  }
  p[data-status][data-error] {
    color: var(--error);
  }
  p[data-status][data-error]:before {
    content: "✕ ";
    font-weight: var(--fw-bold);
  }
  ui-dropdown {
    position: relative;
    display: inline-block;
  }
  ui-dropdown-content {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--background);
    border: var(--border-width) solid;
    border-radius: var(--br-base);
    box-shadow: var(--shadow-lg);
    min-width: 200px;
    z-index: var(--z-dropdown);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--transition-base);
  }
  ui-dropdown[open] ui-dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  ui-dropdown-item {
    display: block;
    padding: var(--s3);
    text-decoration: none;
    transition: opacity var(--transition-base);
    cursor: pointer;
  }
  ui-dropdown-item:hover {
    opacity: .7;
  }
  ui-dropdown-item[active] {
    opacity: 1;
    font-weight: var(--fw-medium);
  }
  @media (max-width:768px) {
    ui-dropdown-content {
      left: auto;
      right: 0;
      min-width: 150px;
    }
  }
  .drawer-toggle {
    display: none;
  }
  .drawer-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: var(--backdrop-color);
    z-index: calc(var(--z-fixed) + 1);
    cursor: pointer;
    opacity: 0;
    transition: allow-discrete .25s;
    transition-property: display,opacity,overlay;
  }
  .drawer-toggle:checked ~ .drawer-backdrop {
    display: block;
    opacity: 1;
  }
  @starting-style {
    .drawer-toggle:checked ~ .drawer-backdrop {
      opacity: 0;
    }
  }
  ui-drawer {
    position: fixed;
    z-index: calc(var(--z-fixed) + 2);
    background: var(--background);
    box-shadow: 4px 0 12px var(--drawer-shadow-color);
    overflow-y: auto;
    padding: var(--s3);
    display: none;
    transition: allow-discrete .25s;
    transition-property: display,transform;
  }
  ui-drawer,
  ui-drawer[position=left] {
    top: 0;
    left: 0;
    bottom: 0;
    width: min(80vw,320px);
    height: 100vh;
    transform: translateX(-100%);
  }
  .drawer-toggle:checked ~ * ui-drawer[position=left],
  .drawer-toggle:checked ~ ui-drawer[position=left] {
    display: block;
    transform: translateX(0);
  }
  @starting-style {
    .drawer-toggle:checked ~ * ui-drawer[position=left],
    .drawer-toggle:checked ~ ui-drawer[position=left] {
      transform: translateX(-100%);
    }
  }
  ui-drawer[position=right] {
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(80vw,320px);
    height: 100vh;
    transform: translateX(100%);
    box-shadow: -4px 0 12px var(--drawer-shadow-color);
  }
  .drawer-toggle:checked ~ * ui-drawer[position=right],
  .drawer-toggle:checked ~ ui-drawer[position=right] {
    display: block;
    transform: translateX(0);
  }
  @starting-style {
    .drawer-toggle:checked ~ * ui-drawer[position=right],
    .drawer-toggle:checked ~ ui-drawer[position=right] {
      transform: translateX(100%);
    }
  }
  ui-drawer[position=top] {
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    width: 100vw;
    height: min(80vh,400px);
    transform: translateY(-100%);
    box-shadow: 0 4px 12px var(--drawer-shadow-color);
  }
  .drawer-toggle:checked ~ * ui-drawer[position=top],
  .drawer-toggle:checked ~ ui-drawer[position=top] {
    display: block;
    transform: translateY(0);
  }
  @starting-style {
    .drawer-toggle:checked ~ * ui-drawer[position=top],
    .drawer-toggle:checked ~ ui-drawer[position=top] {
      transform: translateY(-100%);
    }
  }
  ui-drawer[position=bottom] {
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    width: 100vw;
    height: min(80vh,400px);
    transform: translateY(100%);
    box-shadow: 0 -4px 12px var(--drawer-shadow-color);
  }
  .drawer-toggle:checked ~ * ui-drawer[position=bottom],
  .drawer-toggle:checked ~ ui-drawer[position=bottom] {
    display: block;
    transform: translateY(0);
  }
  @starting-style {
    .drawer-toggle:checked ~ * ui-drawer[position=bottom],
    .drawer-toggle:checked ~ ui-drawer[position=bottom] {
      transform: translateY(100%);
    }
  }
  ui-bottom-bar {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    gap: 0;
  }
  ui-bottom-bar > a,
  ui-bottom-bar > button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: var(--s1) var(--s2);
    font-size: var(--f7);
    text-decoration: none;
    color: inherit;
    font-weight: var(--fw-medium);
    background: transparent;
    border: none;
    cursor: pointer;
    opacity: 1;
    transition: opacity var(--transition-base);
  }
  ui-bottom-bar > a:hover,
  ui-bottom-bar > button:hover {
    opacity: .7;
  }
  ui-bottom-bar > button:disabled {
    opacity: .3;
    cursor: not-allowed;
  }
  ui-bottom-bar > a:not([aria-current=page]),
  ui-bottom-bar > button:not([aria-current=page]) {
    opacity: .5;
  }
  ui-bottom-bar .icon {
    font-size: var(--f4);
    line-height: 1;
  }
  ui-bottom-bar[hide-text] > a > span:not(.icon),
  ui-bottom-bar[hide-text] > button > span:not(.icon) {
    display: none;
  }
  ui-bottom-bar[hide-text] > a,
  ui-bottom-bar[hide-text] > button {
    gap: 0;
  }
  ui-bottom-bar[orientation=horizontal] > a,
  ui-bottom-bar[orientation=horizontal] > button {
    flex-direction: row;
    gap: var(--s2);
  }
  button[data-variant=danger],
  input[type=button][data-variant=danger] {
    color: var(--error);
    border-color: var(--error);
  }
  button[data-variant=quiet] {
    border-color: transparent;
    color: var(--muted);
  }
  button[data-variant=quiet]:hover {
    color: var(--body);
  }
  civ-store-import {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
  }
  civ-store-import ui-button-group > button {
    flex: 1;
  }
  civ-store-import > p {
    margin: 0;
  }
  civ-store-import fieldset {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    margin: 0;
  }
  civ-store-import fieldset label {
    display: flex;
    align-items: baseline;
    gap: var(--s2);
    margin: 0;
    font-weight: var(--fw-normal);
  }
  civ-store-import fieldset label small {
    display: block;
    color: var(--muted);
  }
  ui-search-field {
    display: block;
  }
  ui-search-field form {
    display: flex;
    align-items: flex-end;
    gap: var(--s2);
  }
  ui-search-field label {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--s1);
    min-width: 0;
  }
  ui-search-field label > span {
    font-size: var(--f6);
    color: var(--muted);
  }
  ui-search-field[hide-label] label > span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  ui-search-field input {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0;
  }
  ui-search-field form > button {
    flex: none;
    margin-bottom: 0;
  }
  ui-search-field [data-recent] {
    margin-top: var(--s2);
  }
  civ-sync-input form {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
  }
  civ-sync-input form > button {
    align-self: stretch;
  }
  civ-sync-input label {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
  }
  civ-sync-input label > span {
    font-size: var(--f6);
    color: var(--muted);
  }
  civ-sync-input [data-status-row] {
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex-wrap: wrap;
    margin-bottom: var(--s3);
  }
  civ-sync-input [data-status-row] small {
    color: var(--muted);
  }
  civ-sync-state {
    --civ-sync-dot: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
  }
  civ-sync-state[status=ok] {
    --civ-sync-dot: var(--success);
  }
  civ-sync-state[status=syncing] {
    --civ-sync-dot: var(--info);
  }
  civ-sync-state[status=error] {
    --civ-sync-dot: var(--error);
  }
  civ-sync-state:before,
  civ-sync-state[variant=detailed] > strong:before {
    content: "";
    flex: none;
    width: .6em;
    height: .6em;
    border-radius: var(--br-full);
    background: var(--civ-sync-dot);
  }
  civ-sync-state[variant=badge] {
    gap: 0;
  }
  civ-sync-state[variant=detailed] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s1);
  }
  civ-sync-state[variant=detailed]:before {
    display: none;
  }
  civ-sync-state[variant=detailed] > strong:before {
    display: inline-block;
    margin-right: var(--s2);
  }
  civ-sync-state small {
    color: var(--muted);
  }
  civ-usage {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
  }
  civ-usage > div > div:first-child {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s2);
    margin-bottom: var(--s1);
  }
  civ-usage p[data-tier] {
    margin: 0;
    color: var(--muted);
  }
  civ-devices ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s2);
  }
  civ-devices li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    flex-wrap: wrap;
    padding: var(--s3);
    border: var(--border-width) solid var(--border);
    border-radius: var(--br-base);
  }
  civ-devices li[data-current] {
    border-color: currentColor;
  }
  civ-devices li > div {
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex-wrap: wrap;
  }
  civ-devices small,
  civ-shares-list small {
    color: var(--muted);
  }
  civ-share-link {
    display: flex;
    align-items: center;
    gap: var(--s2);
    min-width: 0;
  }
  civ-share-link code {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  civ-shares-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s3);
  }
  civ-shares-list li {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    padding: var(--s3);
    border: var(--border-width) solid var(--border);
    border-radius: var(--br-base);
  }
  civ-shares-list li > div {
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex-wrap: wrap;
  }
  civ-comments ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s4);
  }
  civ-comments li > header {
    display: flex;
    align-items: baseline;
    gap: var(--s2);
    flex-wrap: wrap;
  }
  civ-comments [data-verified=false],
  civ-comments small,
  civ-comments time {
    font-size: var(--f6);
    color: var(--muted);
  }
  civ-comments [data-verified]:not([data-verified=false]) {
    color: var(--success);
  }
  civ-comments p[data-editing] {
    font-size: var(--f6);
    color: var(--muted);
  }
  civ-comment-box form {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
  }
  civ-comment-box footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2);
    flex-wrap: wrap;
  }
  civ-service-ai-input form {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    align-items: flex-start;
  }
  civ-service-ai-input label {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    width: 100%;
  }
  civ-service-ai-input small {
    color: var(--muted);
  }
  ui-error-display {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
  }
  ui-error-display ui-alert {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s3);
    flex-wrap: wrap;
  }
  ui-error-display p {
    margin: var(--s1) 0 0;
  }
  p[data-empty] {
    margin: 0;
    color: var(--muted);
  }
  civ-locked-screen {
    display: contents;
  }
  civ-locked-screen > [data-backdrop] {
    position: fixed;
    inset: 0;
    z-index: var(--z-fixed,1000);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--backdrop-color);
    backdrop-filter: blur(4px);
  }
  civ-locked-screen article {
    background: var(--background,#fff);
    border-radius: var(--br-lg,12px);
    box-shadow: var(--shadow-lg,0 8px 32px rgba(0,0,0,.2));
    padding: var(--s5,2rem);
    max-width: min(90vw,420px);
    width: 100%;
    text-align: center;
  }
  civ-locked-screen [data-icon] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--br-full,50%);
    background: var(--info-dull,#e0f2fe);
    color: var(--primary,#2563eb);
    margin-bottom: var(--s3,1rem);
  }
  civ-locked-screen article > h2 {
    font-size: var(--f3,1.25rem);
    font-weight: var(--fw-semibold,600);
    margin: 0 0 var(--s2,.5rem);
  }
  civ-locked-screen article > p {
    color: var(--muted,#6b7280);
    font-size: var(--f5,.875rem);
    margin: 0 0 var(--s3,1rem);
  }
  civ-locked-screen p[data-error] {
    color: var(--error,#dc2626);
    font-size: var(--f5,.875rem);
    padding: var(--s2,.5rem) var(--s3,1rem);
    background: var(--error-dull,#fef2f2);
    border-radius: var(--br-base,6px);
    margin-bottom: var(--s3,1rem);
  }
  civ-locked-screen form {
    display: flex;
    flex-direction: column;
    gap: var(--s3,1rem);
    text-align: left;
  }
  civ-locked-screen form label {
    display: flex;
    flex-direction: column;
    gap: var(--s1,.25rem);
  }
  civ-locked-screen form label span {
    font-size: var(--f6,.8rem);
    font-weight: var(--fw-medium,500);
    color: var(--muted,#6b7280);
    text-transform: uppercase;
    letter-spacing: .05em;
  }
  civ-locked-screen form input,
  civ-locked-screen form textarea {
    padding: var(--s2,.5rem) var(--s3,1rem);
    border: var(--border-width) solid var(--border,#d1d5db);
    border-radius: var(--br-base,6px);
    font-size: var(--f5,.875rem);
    font-family: inherit;
    transition: border-color var(--transition-base,.15s);
  }
  civ-locked-screen form input:focus,
  civ-locked-screen form textarea:focus {
    outline: none;
    border-color: var(--primary,#2563eb);
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
  }
  civ-locked-screen form textarea {
    resize: vertical;
    min-height: 72px;
  }
  civ-locked-screen form button[type=submit] {
    padding: var(--s2,.5rem) var(--s4,1.5rem);
    background: var(--primary,#2563eb);
    color: var(--primary-contrast);
    border: none;
    border-radius: var(--br-base,6px);
    font-size: var(--f5,.875rem);
    font-weight: var(--fw-medium,500);
    cursor: pointer;
    transition: opacity var(--transition-base,.15s);
  }
  civ-locked-screen form button[type=submit]:hover:not(:disabled) {
    opacity: .9;
  }
  civ-locked-screen form button[type=submit]:disabled {
    opacity: .5;
    cursor: not-allowed;
  }
  civ-locked-screen nav {
    margin-top: var(--s3,1rem);
  }
  civ-locked-screen nav a {
    color: var(--primary,#2563eb);
    font-size: var(--f6,.8rem);
    text-decoration: underline;
    cursor: pointer;
  }
  civ-locked-screen nav a:hover {
    opacity: .7;
  }
  civ-locked-screen[dismissed] civ-locked-screen > [data-backdrop] {
    display: none;
  }
  civ-pin-field > [role=group] {
    display: flex;
    gap: var(--s2,.5rem);
    justify-content: center;
  }
  civ-pin-field input {
    width: 2.5rem;
    height: 3rem;
    text-align: center;
    font-size: var(--f3,1.25rem);
    border: var(--border-width) solid var(--border,#d1d5db);
    border-radius: var(--br-base,6px);
    background: var(--bg,#fff);
    color: var(--fg,#111827);
  }
  civ-pin-field input:focus {
    outline: none;
    border-color: var(--primary,#2563eb);
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
  }
  civ-phrase-field > [role=group] {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: var(--s2,.5rem);
  }
  civ-phrase-field label {
    display: flex;
    align-items: center;
    gap: var(--s1,.25rem);
    padding: 0 var(--s2,.5rem);
    border: var(--border-width) solid var(--border,#d1d5db);
    border-radius: var(--br-base,6px);
    background: var(--bg,#fff);
  }
  civ-phrase-field [data-index] {
    color: var(--fg-muted,#9ca3af);
    font-size: var(--f6,.8rem);
  }
  civ-phrase-field input {
    width: 100%;
    min-width: 0;
    padding: var(--s2,.5rem) 0;
    border: none;
    background: transparent;
    font-family: var(--ff-mono,ui-monospace,monospace);
    font-size: var(--f5,.875rem);
    color: var(--fg,#111827);
  }
  civ-phrase-field input:focus {
    outline: none;
  }
  civ-phrase-field label:focus-within {
    border-color: var(--primary,#2563eb);
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
  }
  civ-phrase-field input[aria-invalid=true] {
    color: var(--danger,#dc2626);
  }
  civ-version {
    display: block;
  }
  civ-version p {
    margin: 0 0 var(--s2) 0;
  }
  civ-version button {
    margin-top: var(--s1);
  }
  ui-counter {
    display: flex;
    align-items: stretch;
    gap: var(--s2);
  }
  ui-counter button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  ui-counter input[type=number] {
    flex: 1;
    text-align: center;
    padding: 0;
    margin: 0;
    -webkit-appearance: textfield;
    appearance: textfield;
    -moz-appearance: textfield;
  }
  ui-counter input[type=number]::-webkit-inner-spin-button,
  ui-counter input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
  }
  ui-dialog {
    display: contents;
  }
  dialog > article {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
    margin: 0;
    padding: var(--s4);
    min-width: min(320px,90vw);
  }
  dialog > article > h2 {
    margin: 0;
    font-size: var(--f4);
    font-weight: var(--fw-semibold);
  }
  dialog > article > footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    margin-top: var(--s1);
  }
  dialog > article[aria-busy=true] > ui-spinner {
    align-self: center;
    margin: var(--s3) 0;
  }
  dialog {
    background: var(--background);
    color: var(--body);
    border: none;
    border-radius: var(--br-lg);
    box-shadow: var(--shadow-xl);
    max-width: min(90vw,560px);
    opacity: 0;
    padding: 0;
    transform: scale(.6);
    transform-origin: top center;
    transition: allow-discrete .25s;
    transition-property: display,opacity,overlay,transform;
    width: 100%;
  }
  dialog::backdrop {
    background-color: var(--backdrop-color);
    opacity: 0;
    transition: var(--transition-slow) allow-discrete;
    transition-property: display,opacity,overlay;
  }
  dialog[open] {
    opacity: 1;
    transform: scale(1);
  }
  dialog[open]::backdrop {
    opacity: 1;
  }
  @starting-style {
    dialog[open] {
      opacity: 0;
      transform: scale(.6);
    }
    dialog[open]::backdrop {
      opacity: 0;
    }
  }
  ui-back-header {
    align-items: center;
    border-bottom: none;
    display: flex;
    justify-content: start;
    margin: var(--s0);
    padding: var(--s3);
    width: 100%;
  }
  ui-back-header h1 {
    font-size: var(--f3);
    margin: 0;
  }
  ui-back-header button {
    border: none;
    box-shadow: none;
    margin-right: var(--s3);
    padding: var(--s1);
    width: unset;
  }
  ui-back-header button .icon {
    font-size: var(--f3);
  }
  ui-header-content {
    align-items: center;
    border-bottom: none;
    display: flex;
    justify-content: start;
    margin: var(--s0);
    padding: var(--s3);
    width: 100%;
  }
  ui-header-content h1 {
    flex: 1;
    font-size: var(--f3);
    margin: 0;
  }
  ui-header-content [data-back] {
    background: transparent;
    border: none;
    box-shadow: none;
    margin-right: var(--s3);
    padding: var(--s1);
    width: unset;
    cursor: pointer;
  }
  ui-header-content [data-back] .icon {
    font-size: var(--f3);
  }
  ui-header-content [data-actions] {
    display: flex;
    align-items: center;
    gap: var(--s2);
  }
  ui-settings-about > footer {
    display: block;
    padding-top: var(--s4);
    text-align: center;
  }
  ui-settings-about > [data-slot=credits] > section {
    display: block;
    margin-top: var(--s4);
  }
  .icon {
    display: inline-block;
    flex: none;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: var(--icon,var(--icon-url)) center /contain no-repeat;
    mask: var(--icon,var(--icon-url)) center /contain no-repeat;
  }
  .icon-label {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .25em;
  }
  .icon-label > :not(.icon) {
    font-size: .5em;
    line-height: 1;
  }
  .muted {
    color: var(--muted);
  }
  .empty-state {
    flex-direction: column;
    justify-content: center;
    gap: var(--s2);
    padding: var(--s5) var(--s3);
    color: var(--muted);
    text-align: center;
  }
  .empty-state,
  .rows > * {
    display: flex;
    align-items: center;
  }
  .rows > * {
    justify-content: space-between;
    gap: var(--s3);
    padding: var(--s3) 0;
    border-bottom: var(--border-width) solid var(--border);
  }
  .rows > :last-child {
    border-bottom: none;
  }
  ol.rows,
  ul.rows {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .rows > a,
  .rows > button {
    width: 100%;
    color: inherit;
    text-align: left;
    text-decoration: none;
    background: none;
    border: none;
    border-bottom: var(--border-width) solid var(--border);
    border-radius: 0;
    cursor: pointer;
    font: inherit;
  }
  .toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    flex-wrap: wrap;
  }
  .toolbar > :first-child {
    margin: 0;
  }
  .field {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    margin-bottom: var(--s3);
  }
  .field input,
  .field select,
  .field textarea {
    margin-bottom: 0;
  }
  .field-hint {
    font-size: var(--f6);
    color: var(--muted);
  }
  .stat {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
  }
  .stat-value {
    font-size: var(--f3);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    font-variant-numeric: tabular-nums;
  }
  .stat-label {
    font-size: var(--f6);
    color: var(--muted);
  }
  .settings-nav-list {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
  }
  .settings-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    padding: var(--s3);
    border: var(--border-width) solid var(--border);
    border-radius: var(--br-base);
    color: inherit;
    text-decoration: none;
    font-weight: var(--fw-medium);
    transition: opacity var(--transition-base);
  }
  .settings-nav-link:hover {
    opacity: .7;
  }
  .settings-nav-link-meta {
    display: block;
    font-size: var(--f6);
    font-weight: var(--fw-normal);
    color: var(--muted);
  }
  .settings-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    padding: var(--s3) 0;
    border-bottom: var(--border-width) solid var(--border);
  }
  .settings-toggle-row:last-child {
    border-bottom: none;
  }
  .settings-toggle-row label > span {
    display: block;
    font-size: var(--f6);
    font-weight: var(--fw-normal);
    color: var(--muted);
  }
  .settings-toggle-row select {
    width: auto;
    min-width: 8rem;
    margin: 0;
  }
}
@layer components {}