@layer arisu-lib, arisu-components;

/* css/arisu/lib/scales.css */
@layer arisu-lib {
  :root {
    --scale-minor-second: 1.067;
    --scale-major-second: 1.125;
    --scale-minor-third: 1.2;
    --scale-major-third: 1.25;
    --scale-perfect-fourth: 1.333;
    --scale-augmented-fourth: 1.414;
    --scale-perfect-fifth: 1.5;
    --scale-golden: 1.618;
    --scale-major-sixth: 1.667;
    --scale-minor-seventh: 1.778;
    --scale-major-seventh: 1.875;
    --scale-octave: 2;
  }
}

/* css/arisu/lib/ratios.css */
@layer arisu-lib {
  :root {
    --aspect-ratio-square: 1;
    --aspect-ratio-landscape: 4/3;
    --aspect-ratio-portrait: 3/4;
    --aspect-ratio-widescreen: 16/9;
    --aspect-ratio-ultrawide: 18/5;
  }
}

/* css/arisu/lib/easings.css */
@layer arisu-lib {
  :root {
    --ease-1: cubic-bezier(.25, 0, .5, 1);
    --ease-2: cubic-bezier(.25, 0, .4, 1);
    --ease-3: cubic-bezier(.25, 0, .3, 1);
    --ease-4: cubic-bezier(.25, 0, .2, 1);
    --ease-5: cubic-bezier(.25, 0, .1, 1);
    --ease-in-1: cubic-bezier(.25, 0, 1, 1);
    --ease-in-2: cubic-bezier(.5, 0, 1, 1);
    --ease-in-3: cubic-bezier(.7, 0, 1, 1);
    --ease-in-4: cubic-bezier(.9, 0, 1, 1);
    --ease-in-5: cubic-bezier(1, 0, 1, 1);
    --ease-out-1: cubic-bezier(0, 0, .75, 1);
    --ease-out-2: cubic-bezier(0, 0, .5, 1);
    --ease-out-3: cubic-bezier(0, 0, .3, 1);
    --ease-out-4: cubic-bezier(0, 0, .1, 1);
    --ease-out-5: cubic-bezier(0, 0, 0, 1);
    --ease-in-out-1: cubic-bezier(.1, 0, .9, 1);
    --ease-in-out-2: cubic-bezier(.3, 0, .7, 1);
    --ease-in-out-3: cubic-bezier(.5, 0, .5, 1);
    --ease-in-out-4: cubic-bezier(.7, 0, .3, 1);
    --ease-in-out-5: cubic-bezier(.9, 0, .1, 1);
    --ease-elastic-out-1: cubic-bezier(.5, .75, .75, 1.25);
    --ease-elastic-out-2: cubic-bezier(.5, 1, .75, 1.25);
    --ease-elastic-out-3: cubic-bezier(.5, 1.25, .75, 1.25);
    --ease-elastic-out-4: cubic-bezier(.5, 1.5, .75, 1.25);
    --ease-elastic-out-5: cubic-bezier(.5, 1.75, .75, 1.25);
    --ease-elastic-in-1: cubic-bezier(.5, -.25, .75, 1);
    --ease-elastic-in-2: cubic-bezier(.5, -.5, .75, 1);
    --ease-elastic-in-3: cubic-bezier(.5, -.75, .75, 1);
    --ease-elastic-in-4: cubic-bezier(.5, -1, .75, 1);
    --ease-elastic-in-5: cubic-bezier(.5, -1.25, .75, 1);
    --ease-elastic-in-out-1: cubic-bezier(.5, -.1, .1, 1.5);
    --ease-elastic-in-out-2: cubic-bezier(.5, -.3, .1, 1.5);
    --ease-elastic-in-out-3: cubic-bezier(.5, -.5, .1, 1.5);
    --ease-elastic-in-out-4: cubic-bezier(.5, -.7, .1, 1.5);
    --ease-elastic-in-out-5: cubic-bezier(.5, -.9, .1, 1.5);
    --ease-step-1: steps(2);
    --ease-step-2: steps(3);
    --ease-step-3: steps(4);
    --ease-step-4: steps(7);
    --ease-step-5: steps(10);
    --ease-spring-1: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001);
    --ease-spring-2: linear(0, .007, .029 2.2%, .118 4.7%, .625 14.4%, .826 19%, .902, .962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, .999 61.6%, .995 71.2%, 1);
    --ease-spring-3: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1);
    --ease-spring-4: linear(0, .009, .037 1.7%, .153 3.6%, .776 10.3%, 1.001, 1.142 16%, 1.185, 1.209 19%, 1.215 19.9% 20.8%, 1.199, 1.165 25%, 1.056 30.3%, 1.008 33%, .973, .955 39.2%, .953 41.1%, .957 43.3%, .998 53.3%, 1.009 59.1% 63.7%, .998 78.9%, 1);
    --ease-spring-5: linear(0, .01, .04 1.6%, .161 3.3%, .816 9.4%, 1.046, 1.189 14.4%, 1.231, 1.254 17%, 1.259, 1.257 18.6%, 1.236, 1.194 22.3%, 1.057 27%, .999 29.4%, .955 32.1%, .942, .935 34.9%, .933, .939 38.4%, 1 47.3%, 1.011, 1.017 52.6%, 1.016 56.4%, 1 65.2%, .996 70.2%, 1.001 87.2%, 1);
    --ease-bounce-1: linear(0, .004, .016, .035, .063, .098, .141, .191, .25, .316, .391 36.8%, .563, .766, 1 58.8%, .946, .908 69.1%, .895, .885, .879, .878, .879, .885, .895, .908 89.7%, .946, 1);
    --ease-bounce-2: linear(0, .004, .016, .035, .063, .098, .141 15.1%, .25, .391, .562, .765, 1, .892 45.2%, .849, .815, .788, .769, .757, .753, .757, .769, .788, .815, .85, .892 75.2%, 1 80.2%, .973, .954, .943, .939, .943, .954, .973, 1);
    --ease-bounce-3: linear(0, .004, .016, .035, .062, .098, .141 11.4%, .25, .39, .562, .764, 1 30.3%, .847 34.8%, .787, .737, .699, .672, .655, .65, .656, .672, .699, .738, .787, .847 61.7%, 1 66.2%, .946, .908, .885 74.2%, .879, .878, .879, .885 79.5%, .908, .946, 1 87.4%, .981, .968, .96, .957, .96, .968, .981, 1);
    --ease-bounce-4: linear(0, .004, .016 3%, .062, .141, .25, .391, .562 18.2%, 1 24.3%, .81, .676 32.3%, .629, .595, .575, .568, .575, .595, .629, .676 48.2%, .811, 1 56.2%, .918, .86, .825, .814, .825, .86, .918, 1 77.2%, .94 80.6%, .925, .92, .925, .94 87.5%, 1 90.9%, .974, .965, .974, 1);
    --ease-bounce-5: linear(0, .004, .016 2.5%, .063, .141, .25 10.1%, .562, 1 20.2%, .783, .627, .534 30.9%, .511, .503, .511, .534 38%, .627, .782, 1 48.7%, .892, .815, .769 56.3%, .757, .753, .757, .769 61.3%, .815, .892, 1 68.8%, .908 72.4%, .885, .878, .885, .908 79.4%, 1 83%, .954 85.5%, .943, .939, .943, .954 90.5%, 1 93%, .977, .97, .977, 1) ;
  }
}

/* css/arisu/lib/lib.css */
@layer arisu-lib {
  :root {
    --size-header-1: 20ch;
    --size-header-2: 25ch;
    --size-header-3: 35ch;
    --size-content-1: 20ch;
    --size-content-2: 45ch;
    --size-content-3: 56ch;
    --size-content-4: 62ch;
    --size-content-5: 72ch;
    --layer-1: 1;
    --layer-2: 2;
    --layer-3: 3;
    --layer-4: 4;
    --layer-5: 5;
    --layer-bottom: var(--layer-1);
    --layer-top: var(--layer-5);
    --layer-important: 2147480000;
    --border-size-1: 1px;
    --border-size-2: 2px;
    --border-size-3: 5px;
    --border-size-4: 10px;
    --border-size-5: 25px;
    --radius-1: 2px;
    --radius-2: 5px;
    --radius-3: 1rem;
    --radius-4: 2rem;
    --radius-5: 4rem;
    --radius-6: 8rem;
    --radius-round: 100000px;
    --radius-blob-1: 30% 70% 70% 30%/53% 30% 70% 47%;
    --radius-blob-2: 53% 47% 34% 66%/63% 46% 54% 37%;
    --radius-blob-3: 37% 63% 56% 44%/49% 56% 44% 51%;
    --radius-blob-4: 63% 37% 37% 63%/43% 37% 63% 57%;
    --radius-blob-5: 49% 51% 48% 52%/57% 44% 56% 43%;
    --radius-conditional-1: clamp(0px, calc(100vw - 100%)*100000, var(--radius-1));
    --radius-conditional-2: clamp(0px, calc(100vw - 100%)*100000, var(--radius-2));
    --radius-conditional-3: clamp(0px, calc(100vw - 100%)*100000, var(--radius-3));
    --radius-conditional-4: clamp(0px, calc(100vw - 100%)*100000, var(--radius-4));
    --radius-conditional-5: clamp(0px, calc(100vw - 100%)*100000, var(--radius-5));
    --radius-conditional-6: clamp(0px, calc(100vw - 100%)*100000, var(--radius-6)) ;
  }
  * {
    --shadow-strength: 1%;
    --shadow-chroma: 3%;
    --shadow-hue: var(--shadow-tint, var(--palette-hue));
    --shadow-color: 15% var(--shadow-chroma)var(--shadow-hue);
    --inner-shadow-highlight: inset 0 -.5px 0 0 #fff, inset 0 .5px 0 0 #0001;
    --shadow-1: 0 1px 2px -1px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 9%));
    --shadow-2: 0 3px 5px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 3%)), 0 7px 14px -5px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 5%));
    --shadow-3:
      0 -1px 3px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),
      0 1px 2px -5px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),
      0 2px 5px -5px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),
      0 4px 12px -5px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),
      0 12px 15px -5px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 7%));
    --shadow-4:
      0 -2px 5px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),
      0 1px 1px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),
      0 2px 2px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),
      0 5px 5px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),
      0 9px 9px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),
      0 16px 16px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 6%));
    --shadow-5:
      0 -1px 2px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),
      0 2px 1px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),
      0 5px 5px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),
      0 10px 10px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),
      0 20px 20px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),
      0 40px 40px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 7%));
    --shadow-6:
      0 -1px 2px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),
      0 3px 2px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),
      0 7px 5px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),
      0 12px 10px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),
      0 22px 18px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),
      0 41px 33px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 6%)),
      0 100px 80px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 7%));
    --inner-shadow-0: inset 0 0 0 1px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 9%));
    --inner-shadow-1: inset 0 1px 2px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 9%)), var(--inner-shadow-highlight);
    --inner-shadow-2: inset 0 1px 4px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 9%)), var(--inner-shadow-highlight);
    --inner-shadow-3: inset 0 2px 8px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 9%)), var(--inner-shadow-highlight);
    --inner-shadow-4: inset 0 2px 14px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 9%)), var(--inner-shadow-highlight) ;
  }
  @media (prefers-color-scheme: dark) {
    * {
      --shadow-strength: 25%;
      --shadow-chroma: 10%;
      --shadow-hue: var(--shadow-tint, var(--palette-hue));
      --shadow-color: 15% var(--shadow-chroma)var(--shadow-hue);
      --inner-shadow-highlight: inset 0 -.5px 0 0 #fff1, inset 0 .5px 0 0 #0007 ;
    }
  }
  * {
    --color-1: oklch(98% calc(.03*var(--palette-chroma, 1))calc(var(--palette-hue) + (0*var(--palette-hue-rotate-by))));
    --color-2: oklch(97% calc(.06*var(--palette-chroma, 1))calc(var(--palette-hue) + (1*var(--palette-hue-rotate-by))));
    --color-3: oklch(93% calc(.1*var(--palette-chroma, 1))calc(var(--palette-hue) + (2*var(--palette-hue-rotate-by))));
    --color-4: oklch(84% calc(.12*var(--palette-chroma, 1))calc(var(--palette-hue) + (3*var(--palette-hue-rotate-by))));
    --color-5: oklch(80% calc(.16*var(--palette-chroma, 1))calc(var(--palette-hue) + (4*var(--palette-hue-rotate-by))));
    --color-6: oklch(71% calc(.19*var(--palette-chroma, 1))calc(var(--palette-hue) + (5*var(--palette-hue-rotate-by))));
    --color-7: oklch(66% calc(.2*var(--palette-chroma, 1))calc(var(--palette-hue) + (6*var(--palette-hue-rotate-by))));
    --color-8: oklch(58% calc(.21*var(--palette-chroma, 1))calc(var(--palette-hue) + (7*var(--palette-hue-rotate-by))));
    --color-9: oklch(53% calc(.2*var(--palette-chroma, 1))calc(var(--palette-hue) + (8*var(--palette-hue-rotate-by))));
    --color-10: oklch(49% calc(.19*var(--palette-chroma, 1))calc(var(--palette-hue) + (9*var(--palette-hue-rotate-by))));
    --color-11: oklch(42% calc(.17*var(--palette-chroma, 1))calc(var(--palette-hue) + (10*var(--palette-hue-rotate-by))));
    --color-12: oklch(35% calc(.15*var(--palette-chroma, 1))calc(var(--palette-hue) + (11*var(--palette-hue-rotate-by))));
    --color-13: oklch(27% calc(.12*var(--palette-chroma, 1))calc(var(--palette-hue) + (12*var(--palette-hue-rotate-by))));
    --color-14: oklch(20% calc(.09*var(--palette-chroma, 1))calc(var(--palette-hue) + (13*var(--palette-hue-rotate-by))));
    --color-15: oklch(16% calc(.07*var(--palette-chroma, 1))calc(var(--palette-hue) + (14*var(--palette-hue-rotate-by))));
    --color-16: oklch(10% calc(.05*var(--palette-chroma, 1))calc(var(--palette-hue) + (15*var(--palette-hue-rotate-by)))) ;
  }
}

/* css/arisu/global/sizes.css */
@layer arisu-lib {
  :root {
    --step--3: round(up, calc(var(--step--2) / var(--scale-minor-third)), 1px);
    --step--2: round(up, calc(var(--step--1) / var(--scale-minor-third)), 1px);
    --step--1: round(up, calc(var(--step-0) / var(--scale-minor-second)), 1px);
    --step-0: 1rem;
    --step-1: round(up, calc(var(--step-0) * var(--scale-major-second)), 1px);
    --step-2: round(up, calc(var(--step-1) * var(--scale-major-second)), 1px);
    --step-3: round(up, calc(var(--step-2) * var(--scale-major-second)), 1px);
    --step-4: round(up, calc(var(--step-3) * var(--scale-major-second)), 1px);
    --step-5: round(up, calc(var(--step-4) * var(--scale-major-second)), 1px);
    --step-6: round(up, calc(var(--step-5) * var(--scale-major-second)), 1px);
  }
  :root {
    --space-3xs: round(up, clamp(5px, 5px + 0vw, 5px), 1px);
    --space-2xs: round(up, clamp(9px, 8.7097px + 0.0806vw, 10px), 1px);
    --space-xs: round(up, clamp(14px, 13.7097px + 0.0806vw, 15px), 1px);
    --space-s: round(up, clamp(18px, 17.4194px + 0.1613vw, 20px), 1px);
    --space-m: round(up, clamp(27px, 26.129px + 0.2419vw, 30px), 1px);
    --space-l: round(up, clamp(36px, 34.8387px + 0.3226vw, 40px), 1px);
    --space-xl: round(up, clamp(54px, 52.2581px + 0.4839vw, 60px), 1px);
    --space-2xl: round(up, clamp(72px, 69.6774px + 0.6452vw, 80px), 1px);
    --space-3xl: round(up, clamp(108px, 104.5161px + 0.9677vw, 120px), 1px);
    --space-3xs-2xs: round(up, clamp(5px, 3.5484px + 0.4032vw, 10px), 1px);
    --space-2xs-xs: round(up, clamp(9px, 7.2581px + 0.4839vw, 15px), 1px);
    --space-xs-s: round(up, clamp(14px, 12.2581px + 0.4839vw, 20px), 1px);
    --space-s-m: round(up, clamp(18px, 14.5161px + 0.9677vw, 30px), 1px);
    --space-m-l: round(up, clamp(27px, 23.2258px + 1.0484vw, 40px), 1px);
    --space-l-xl: round(up, clamp(36px, 29.0323px + 1.9355vw, 60px), 1px);
    --space-xl-2xl: round(up, clamp(54px, 46.4516px + 2.0968vw, 80px), 1px);
    --space-2xl-3xl: round(up, clamp(72px, 58.0645px + 3.871vw, 120px), 1px);
    --space-s-l: round(clamp(18px, 11.6129px + 1.7742vw, 40px), 1px);
    --space-xs-l: round(clamp(14px, 6.4516px + 2.0968vw, 40px), 1px);
    --space-2xs-m: round(clamp(9px, 2.9032px + 1.6935vw, 30px), 1px);
    --space-xs-m: round(clamp(14px, 9.3548px + 1.2903vw, 30px), 1px);
    --space-3xs-s: round(clamp(5px, 0.6452px + 1.2097vw, 20px), 1px);
    --space-m-s: round(clamp(20px, 29.0323px + -0.5645vw, 27px), 1px);
  }
}

/* css/arisu/global/base.css */
@layer arisu-lib {
  :root {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-rendering: normal;
    text-size-adjust: none;
    @media (prefers-reduced-motion: no-preference) {
      interpolate-size: allow-keywords;
    }
  }
  *,
  :before,
  :after {
    box-sizing: border-box;
    margin: 0;
    background-repeat: no-repeat;
  }
  hr {
    border: 0;
    height: 1px;
    background-color: var(--surface-filled, var(--text-color-3));
  }
  body {
    -webkit-font-smoothing: antialiased;
    min-block-size: 100dvh;
    scrollbar-gutter: stable;
  }
  menu {
    padding: 0;
  }
  img,
  picture,
  video,
  canvas,
  svg {
    max-width: 100%;
    display: block;
  }
  input,
  button,
  textarea,
  select {
    font: inherit;
  }
  :target {
    scroll-margin-block: 5ex;
  }
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
  }
  dialog,
  [popover] {
    background: transparent;
    border: none;
    color: inherit;
    margin: auto;
    max-block-size: none;
    max-inline-size: none;
    position: fixed;
  }
  [popover] {
    inset: auto;
  }
  dialog:not([open], [popover]),
  [popover]:not(:popover-open) {
    display: none;
  }
  [hidden]:not([hidden=until-found]) {
    display: none !important;
  }
  :focus-visible {
    outline-offset: 3px;
  }
}

/* css/arisu/color/hues-colar.oklch.css */
@layer arisu-lib {
  :root {
    --oklch-red: 25;
    --oklch-pink: 350;
    --oklch-purple: 310;
    --oklch-violet: 290;
    --oklch-indigo: 270;
    --oklch-blue: 240;
    --oklch-cyan: 210;
    --oklch-teal: 185;
    --oklch-green: 145;
    --oklch-lime: 125;
    --oklch-yellow: 100;
    --oklch-orange: 75;
  }
}

/* css/arisu/global/typography.css */
@layer arisu-lib {
  :root {
    --font-sans:
      system-ui,
      -apple-system,
      Segoe UI,
      Roboto,
      Ubuntu,
      Adwaita Sans,
      Cantarell,
      Noto Sans,
      sans-serif;
    --font-mono:
      Dank Mono,
      Operator Mono,
      Inconsolata,
      Fira Mono,
      ui-monospace,
      SF Mono,
      Monaco,
      Droid Sans Mono,
      Source Code Pro,
      monospace;
    --font-showcase:
      var(--font-sans),
      system-ui,
      -apple-system,
      Segoe UI,
      Roboto,
      Ubuntu,
      Adwaita Sans,
      Cantarell,
      Noto Sans,
      sans-serif;
    --font-serif:
      "Literata",
      ui-serif,
      serif;
    line-height: var(--scale-perfect-fourth);
    font-family: var(--font-sans);
    font-size: var(--step-0);
    text-wrap: auto;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    --_heading-margin: calc(1em / var(--scale-minor-second));
    --_heading-smallest: var(--heading-smallest, var(--scale-major-second));
    --_heading-largest: var(--heading-largest, var(--scale-minor-third));
    --_size: calc((var(--_heading-largest) - var(--_heading-smallest)) / (30 - 20));
    --_line-height-base: 1.1;
    font-family: var(--font-showcase);
    font-weight: 400;
    line-height: 1.1;
    font-size: round(down, clamp(var(--_heading-smallest) * 1rem, var(--_size) * 100vw, var(--_heading-largest) * 1rem), 1px);
    margin-block: var(--_heading-margin) calc(var(--_heading-margin) / var(--scale-octave));
    text-wrap: auto;
  }
  h1 {
    --heading-smallest: calc(pow(var(--scale-minor-second), 4) + 0.75);
    --heading-largest: calc(pow(var(--scale-minor-third), 4) + 0.75);
    line-height: var(--_line-height-base);
    font-weight: 400;
  }
  h2 {
    --heading-smallest: calc(pow(var(--scale-major-second), 4));
    --heading-largest: calc(pow(var(--scale-minor-third), 4));
    line-height: calc(var(--_line-height-base) * pow(var(--scale-major-second), 1));
  }
  h3 {
    --heading-smallest: calc(pow(var(--scale-major-second), 3));
    --heading-largest: calc(pow(var(--scale-minor-third), 3));
    font-weight: 400;
    line-height: calc(var(--_line-height-base) * pow(var(--scale-major-second), 1));
  }
  h4 {
    --heading-smallest: calc(pow(var(--scale-major-second), 2));
    --heading-largest: calc(pow(var(--scale-minor-third), 2));
    font-weight: 400;
    line-height: calc(var(--_line-height-base) * pow(var(--scale-major-second), 2));
  }
  h5 {
    --heading-smallest: calc(pow(var(--scale-major-second), 1));
    --heading-largest: calc(pow(var(--scale-minor-third), 1));
    font-weight: 500;
  }
  h6 {
    font-size: var(--step-0);
    line-height: inherit;
  }
  hgroup {
    & > p {
      margin: 0;
      &:first-child {
        color: var(--text-color-3);
        font-family: var(--font-sans);
        font-size: var(--step--2);
      }
    }
    & > :where(h1, h2, h3, h4, h5, h6) {
      margin-block-end: 0.4em;
      margin-block-start: 0;
    }
    & > :where(p, .p):last-of-type:last-child:not(:first-child) {
      color: oklch(from currentColor l c h / 75%);
      font-size: var(--step-2);
      line-height: 1.6;
    }
  }
  :where(.overline, hgroup > :where(p, .p):first-of-type:first-child) {
    color: light-dark(oklch(from var(--text-color-2) calc(l * 1.25) c h), oklch(from var(--text-color-2) calc(l * 0.75) c h));
    font-size: var(--step--2);
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 2.5;
    text-transform: uppercase;
  }
  p {
    &.small {
      font-size: var(--step--1);
    }
    &.large {
      font-size: var(--step-1);
    }
  }
  ins,
  u,
  abbr,
  dfn {
    text-decoration: underline;
    text-underline-offset: 1px;
    @supports (-moz-appearance: none) {
      text-underline-offset: 2px;
    }
  }
  abbr,
  dfn {
    font-style: normal;
    text-decoration: var(--color-9) underline dotted;
    &[title] {
      cursor: help;
      text-underline-offset: 1px;
    }
    @supports (-moz-appearance: none) {
      text-underline-offset: 2px;
    }
  }
  del,
  ins {
    color: var(--color-9);
  }
  small {
    font-size: 0.887em;
    max-inline-size: revert;
  }
  cite {
    font-style: italic;
  }
  blockquote,
  *:not(blockquote) > cite {
    border-inline-start-width: var(--border-size-3);
  }
  *:not(blockquote) > cite {
    padding-inline-start: var(--size-2);
  }
  blockquote {
    --_font-size: calc(1em / var(--scale-minor-second));
    --_padding-inline-start: var(--space-l);
    --_padding-inline-end: var(--space-s);
    --_padding-block: var(--space-3xs);
    --_margin-block: var(--space-s);
    --_stroke-size: var(--border-size-2);
    display: grid;
    font-size: var(--_font-size);
    gap: var(--space-s);
    padding-block: var(--_padding-block);
    padding-inline: var(--_padding-inline-start) var(--_padding-inline-start);
    max-width: 90%;
    position: relative;
    max-inline-size: var(--size-content-3);
    margin-block: var(--_margin-block);
    margin-inline: 0;
    > p {
      font-size: var(--_font-size);
    }
    :first-child {
      margin-block-start: 0;
    }
    :last-child {
      margin-block-end: 0;
    }
    footer {
      color: var(--text-color-2);
    }
    &::before {
      content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9Im9rbGNoKDAuODQgMC4wMSA3NSkiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1xdW90ZS1pY29uIGx1Y2lkZS1xdW90ZSI+PHBhdGggZD0iTTE2IDNhMiAyIDAgMCAwLTIgMnY2YTIgMiAwIDAgMCAyIDIgMSAxIDAgMCAxIDEgMXYxYTIgMiAwIDAgMS0yIDIgMSAxIDAgMCAwLTEgMXYyYTEgMSAwIDAgMCAxIDEgNiA2IDAgMCAwIDYtNlY1YTIgMiAwIDAgMC0yLTJ6Ii8+PHBhdGggZD0iTTUgM2EyIDIgMCAwIDAtMiAydjZhMiAyIDAgMCAwIDIgMiAxIDEgMCAwIDEgMSAxdjFhMiAyIDAgMCAxLTIgMiAxIDEgMCAwIDAtMSAxdjJhMSAxIDAgMCAwIDEgMSA2IDYgMCAwIDAgNi02VjVhMiAyIDAgMCAwLTItMnoiLz48L3N2Zz4=);
      position: absolute;
      left: 6px;
      top: 0;
    }
    &::after {
      background-color: var(--gray-6);
      content: "";
      position: absolute;
      left: calc(var(--_padding-inline-start) / 2 - var(--_stroke-size));
      top: 30px;
      bottom: calc(var(--_padding-block) * -1);
      width: var(--_stroke-size);
    }
  }
  pre {
    direction: ltr;
    font-size: var(--step--1);
    line-height: 1.5142857;
    max-inline-size: 100%;
    overflow-x: auto;
    min-inline-size: 0;
    white-space: pre;
    writing-mode: lr;
  }
  code,
  kbd,
  samp,
  pre {
    font-family: var(--font-mono);
  }
  code {
    &:not(pre &) {
      border-radius: var(--radius-1);
      background: light-dark(oklch(from var(--bg) calc(l - 0.08) c h / 1), oklch(from var(--bg) calc(l + 0.1) c h / 1));
      padding: 0.2ex 0.5ex;
    }
  }
  kbd,
  var {
    background-color: var(--text-color-2);
    border-color: var(--text-color-2);
    border-radius: var(--border-radius, var(--radius-2));
    border-width: var(--border-size-1);
    color: var(--text-color-2-contrast);
  }
  *:not(pre) code,
  kbd {
    word-break: break-word;
  }
  mark {
    border-radius: var(--border-radius, 0);
    box-decoration-break: clone;
    vertical-align: baseline;
  }
  dt {
    font-weight: 700;
  }
  figure {
    & > figcaption {
      font-size: var(--font-size-1, 1rem);
      text-wrap: balance;
    }
  }
  p,
  table,
  blockqoute,
  pre {
    margin-block: var(--space-s);
  }
  table {
    --_border-color: light-dark(var(--gray-5), var(--gray-11));
    table-layout: fixed;
    font-family: var(--font-sans);
    font-variant-numeric: proportional-nums;
    font-size: calc(1em / var(--scale-minor-second));
    border: var(--border-size-1) solid var(--_border-color);
    border-collapse: collapse;
    inline-size: max-content;
    border-radius: var(--radius-3);
    thead {
      display: none;
    }
    thead:has(th:not(:empty)) {
      display: table-header-group;
    }
    td,
    th {
      vertical-align: top;
      border: var(--border-size-1) solid var(--_border-color);
      padding: calc(1em / var(--scale-perfect-fourth)) calc(1em / var(--scale-perfect-fourth));
    }
    th {
      font-weight: 600;
    }
  }
  sup {
    display: inline-flex;
    justify-content: center;
    width: 1.25ch;
    a:hover {
      color: var(--focus-color);
    }
  }
  .footnotes {
    font-size: var(--step--1);
  }
}

/* css/arisu/global/prose.css */
@layer arisu-lib {
  .prose {
    --_margin-block: calc(1lh / var(--scale-perfect-fifth));
    --_line-height: var(--scale-major-sixth);
    font-family: var(--font-serif);
    font-variant-numeric: oldstyle-nums;
    line-height: var(--_line-height);
    margin-trim: block;
    text-wrap-style: pretty;
    font-weight: 400;
    blockquote {
      font-size: inherit;
      line-height: inherit;
      :first-child {
        margin-block-start: 0;
      }
      :last-child {
        margin-block-end: 0;
      }
    }
    p {
      font-size: inherit;
      line-height: inherit;
      margin-block: var(--_margin-block);
      text-wrap-style: stable;
      hyphens: auto;
    }
    &.drop-cap {
      article-toc + p,
      hgroup + p {
        &::first-letter {
          text-transform: uppercase;
          text-rendering: geometricPrecision;
          -webkit-font-smoothing: antialiased;
          @supports (initial-letter: 2) {
            initial-letter: 2;
            padding-right: 0.75ch;
          }
          @supports not (initial-letter: 2) {
            font-size: 2lh;
            letter-spacing: 0.4rem;
            line-height: 0.6;
            margin-top: 0.36lh;
            text-align: left;
            float: left;
          }
        }
      }
    }
    :is(h1, h2, h3, h4, h5, h6) {
      & + * {
        margin-block-start: 0;
      }
      hgroup > & {
        --_heading-margin: 0;
      }
    }
    :is(h1) {
      line-height: 1.1;
    }
    :is(h2) {
      &:not(hgroup &) {
        font-weight: 400;
      }
    }
    :is(h3, h4, h5, h6) {
      font-weight: 500;
      letter-spacing: 0.025em;
    }
    :where(.overline, hgroup > :where(p, .p):first-of-type:first-child) {
      color: light-dark(oklch(from var(--text-color-2) calc(l * 1.25) c h), oklch(from var(--text-color-2) calc(l * 0.75) c h));
      font-size: var(--step--2);
      font-weight: 500;
      letter-spacing: 0.06em;
      line-height: 2.5;
      text-transform: uppercase;
    }
    hgroup {
      > p {
        margin: 0;
      }
      & > :where(h1, h2, h3, h4, h5, h6) {
        margin-block-end: 0.4em;
      }
      > :where(p, .p):last-of-type:last-child:not(:first-child) {
        color: oklch(from currentColor l c h / 75%);
        font-size: var(--step-1);
        line-height: 1.6;
      }
      & + p {
        margin-block-start: 0;
      }
    }
    ul:not([class]) {
      list-style-type: disc;
    }
    ol:not([class]) {
      list-style-type: decimal;
    }
    :where(ul, ol):not([class]) {
      display: grid;
      font-size: inherit;
      gap: 0.5em;
      line-height: inherit;
      li {
      }
    }
    :where(ul ul),
    :where(ul ol),
    :where(ol ul),
    :where(ol ol) {
    }
    :where(dl) {
      font-size: inherit;
      line-height: inherit;
      & dt {
      }
      & dd {
      }
    }
    figure {
      margin-block: var(--space-s-m);
      margin-inline: auto;
      overflow: hidden;
      > * {
        display: grid;
        padding: var(--space-s);
      }
      img,
      picture {
        max-inline-size: 100%;
        block-size: auto;
      }
      figcaption {
        contain: inline-size;
        display: flex;
        font-size: calc(1em / var(--scale-major-third));
        inline-size: 100%;
        justify-content: center;
        margin-block-start: var(--space-2xs);
      }
    }
    > :first-child {
      margin-block-start: 0;
    }
    > :last-child {
      margin-block-end: 0;
      hr {
        & + * {
          margin-block-start: 0;
        }
      }
      table {
        font-family: var(--font-sans);
      }
    }
    strong {
      font-weight: 700;
    }
  }
}

/* css/arisu/theme.css */
@layer arisu-lib {
  :root {
    color-scheme: dark light;
    &[data-theme=light] {
      color-scheme: light;
    }
    &[data-theme=dark] {
      color-scheme: dark;
    }
    --oklch-brand: 33.90;
    --palette-hue: var(--oklch-brand);
    --palette-hue-rotate-by: 0;
    --palette-chroma: 1;
    --gray-chroma: 0.01;
    --gray-1: oklch(from var(--color-1) l var(--gray-chroma) h);
    --gray-2: oklch(from var(--color-2) l var(--gray-chroma) h);
    --gray-3: oklch(from var(--color-3) l var(--gray-chroma) h);
    --gray-4: oklch(from var(--color-4) l var(--gray-chroma) h);
    --gray-5: oklch(from var(--color-5) l var(--gray-chroma) h);
    --gray-6: oklch(from var(--color-6) l var(--gray-chroma) h);
    --gray-7: oklch(from var(--color-7) l var(--gray-chroma) h);
    --gray-8: oklch(from var(--color-8) l var(--gray-chroma) h);
    --gray-9: oklch(from var(--color-9) l var(--gray-chroma) h);
    --gray-10: oklch(from var(--color-10) l var(--gray-chroma) h);
    --gray-11: oklch(from var(--color-11) l var(--gray-chroma) h);
    --gray-12: oklch(from var(--color-12) l var(--gray-chroma) h);
    --gray-13: oklch(from var(--color-13) l var(--gray-chroma) h);
    --gray-14: oklch(from var(--color-14) l var(--gray-chroma) h);
    --gray-15: oklch(from var(--color-15) l var(--gray-chroma) h);
    --gray-16: oklch(from var(--color-16) l var(--gray-chroma) h);
    --primary: oklch(from var(--color-7) 68% 0.21 h);
    --primary-light: oklch(from var(--color-5) l 0.21 h);
    --primary-dark: oklch(from var(--color-9) l 0.1 h);
    --primary-contrast: var(--gray-1);
    --text-color-bright: light-dark(var(--gray-15), var(--gray-1));
    --text-color-bright-contrast: light-dark(var(--gray-1), var(--gray-15));
    --text-color-1: light-dark(var(--gray-13), var(--gray-2));
    --text-color-1-contrast: light-dark(var(--gray-4), var(--gray-13));
    --text-color-2: light-dark(var(--gray-12), var(--gray-3));
    --text-color-2-contrast: light-dark(var(--gray-4), var(--gray-12));
    --text-color-3: light-dark(var(--gray-10), var(--gray-5));
    --text-color-3-contrast: light-dark(var(--gray-6), var(--gray-10));
    --surface-default: light-dark(oklch(from var(--color-1) 99% 0.01 h / 1), oklch(from var(--color-14) 20% 0.005 h / 1));
    --surface-elevated: light-dark(oklch(from var(--surface-default) 95% c h / 1), oklch(from var(--surface-default) 25% c h / 1));
    --surface-tonal: light-dark(oklch(from var(--surface-default) 88% c h / 1), oklch(from var(--surface-default) 30% c h / 1));
    --surface-filled: light-dark(oklch(from var(--surface-default) 82% c h / 1), oklch(from var(--surface-default) 35% c h / 1));
    --shadow-color: light-dark(220 3% 15%, 220 40% 2%);
    --shadow-strength: light-dark(1%, 10%);
    --inner-shadow-highlight: light-dark(inset 0 -0.5px 0 0 #fff, inset 0 0.5px 0 0 #0001, inset 0 -0.5px 0 0 #fff1, inset 0 0.5px 0 0 #0007);
    --field-border-color: var(--border-color);
    --field-border-radius: var(--size-2);
    --field-border-width: 1px;
    --field-size: 2.3lh;
    --field-size-small: 1.9lh;
    --focus-color: light-dark(var(--primary), var(--primary-light));
  }
  .red,
  .error,
  del {
    --palette-hue: var(--oklch-red, 25);
    --palette-chroma: 1;
    --palette-hue-rotate-by: 1;
  }
  .blue,
  .ok,
  abbr,
  dfn {
    --palette-hue: var(--oklch-blue, 210);
    --palette-chroma: 1;
    --palette-hue-rotate-by: 1;
  }
  .green,
  .good,
  ins {
    --palette-hue: var(--oklch-green, 145);
    --palette-chroma: 1;
    --palette-hue-rotate-by: 1;
  }
  .dark-green {
    --palette-hue: var(--oklch-green);
    --palette-chroma: 1;
    --palette-hue-rotate-by: 1;
  }
  .orange,
  .warning {
    --palette-hue: var(--oklch-orange, 75);
    --palette-chroma: 1;
    --palette-hue-rotate-by: 1;
  }
  :root {
    --warning-bg: light-dark(oklch(from var(--color-3) l 0.2 var(--oklch-orange)), oklch(from var(--color-8) l 0.2 var(--oklch-orange)));
    --error-bg: oklch(from var(--color-11) l 0.2 var(--oklch-red));
    --red: oklch(from var(--color-9) l 0.2 var(--oklch-red));
    --blue: oklch(from var(--color-10) l 0.2 var(--oklch-blue));
    --blue-alt: oklch(from var(--color-9) l 0.2 var(--oklch-blue-alt));
    --green: oklch(from var(--color-8) l 0.2 var(--oklch-green));
    --green-light: oklch(from var(--color-6) l 0.2 var(--oklch-green));
    --green-dark: oklch(from var(--color-11) l 0.2 var(--oklch-green));
    --green-tinted: oklch(from var(--color-9) l 0.2 var(--oklch-green));
    --orange-tinted: oklch(from var(--color-7) l 0.2 var(--oklch-orange));
    --brown-light: oklch(from var(--color-8) l 0.2 var(--oklch-yellow));
    --brown: oklch(from var(--color-11) l 0.2 var(--oklch-yellow));
  }
  :root {
    --light-bg: oklch(from var(--color-1) 99% 0.01 h / 1);
    --dark-bg: oklch(from var(--color-14) l 0.005 h / 1);
    --bg: light-dark(var(--light-bg), var(--dark-bg));
    background-color: var(--bg);
  }
  :root {
    color: var(--text-color-2);
    &::selection {
      background-color: light-dark(var(--color-3), oklch(from var(--primary-dark) 33% c h / 1));
      color: light-dark(var(--gray-14), var(--gray-1));
    }
    &:focus-visible {
      outline-color: var(--text-color-3);
    }
  }
}

/* css/arisu/components/auto-grid.css */
@layer arisu-components {
  auto-grid,
  .auto-grid {
    --_min-col-size: var(--min-col-size, 36ch);
    --_gap: var(--gap, var(--space-xl));
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--_min-col-size), 100%), 1fr));
    gap: var(--_gap);
    > .title {
      grid-column: 1 / -1;
    }
  }
}

/* css/arisu/components/content-grid.css */
@layer arisu-components {
  content-grid,
  .content-grid {
    --_padding-inline: var(--padding-inline, var(--space-xs-s));
    --_content-max-width: var(--content-max-width, var(--size-content-3));
    --_breakout-max-width: var(--breakout-max-width, 900px);
    --_wide-max-width: var(--wide-max-width, 1200px);
    --_breakout-size: calc((var(--_breakout-max-width) - var(--_content-max-width)) / 2);
    --_wide-size: calc((var(--_wide-max-width) - var(--_content-max-width)) / 2);
    display: grid;
    grid-template-columns: [full-width-start] minmax(var(--_padding-inline), 1fr) [wide-start] minmax(0, var(--_wide-size)) [breakout-start] minmax(0, var(--_breakout-size)) [content-start] min(100% - (var(--_padding-inline) * 2), var(--_content-max-width)) [content-end] minmax(0, var(--_breakout-size)) [breakout-end] minmax(0, var(--_wide-size)) [wide-end] minmax(var(--_padding-inline), 1fr) [full-width-end];
    & > :not(.breakout, .full-width, .wide) {
      grid-column: content;
    }
    .full-width > :not(.breakout, .full-width, .wide) {
      grid-column: content;
    }
    .breakout {
      grid-column: breakout;
    }
    .wide {
      grid-column: wide;
    }
    .full-width {
      grid-column: full-width;
      display: grid;
    }
    & img.full-width {
      width: 100%;
      max-height: 45vh;
      object-fit: cover;
    }
    :is(.content-grid &, content-grid &) {
      grid-column: 1 / -1;
      grid-template-columns: subgrid;
    }
  }
}

/* css/arisu/components/button.css */
@layer arisu-components {
  button,
  *[role=button] {
    --_padding-base: var(--padding-base, .8ex);
    --_bg: transparent;
    --_border-color: transparent;
    --_padding-block: var(--_padding-base);
    --_padding-inline: calc(var(--_padding-base) * var(--scale-minor-seventh));
    --_button-border-radius: var(--button-border-radius, var(--radius-3));
    background: var(--_bg);
    border: var(--border-size-1) solid var(--_border-color);
    border-radius: var(--_button-border-radius);
    padding-block: var(--_padding-block);
    padding-inline: var(--_padding-inline);
    font-size: var(--step--1);
    color: var(--text-color-2);
    font-weight: 500;
    &:hover {
      text-decoration: none;
    }
    &[btn-color=dark] {
      color-scheme: dark;
    }
    &[btn-color=light] {
      color-scheme: light;
    }
    &:not([btn-style]) {
      &:not([disabled]) {
        &:not(:active, .active):hover {
          --_bg: light-dark(oklch(from var(--gray-7) l 0.01 h / 20%), oklch(from var(--gray-7) l 0.01 h / 30%));
          --_border-color: light-dark(oklch(from var(--gray-7) l 0.01 h / 20%), oklch(from var(--gray-7) l 0.01 h / 30%));
        }
        &:hover:active:not(.active) {
          --_bg: light-dark(oklch(from var(--primary) l 0.06 h / 30%), oklch(from var(--primary) l 0.06 h / 40%));
        }
      }
    }
    &[btn-style=outline] {
      --_border-color: light-dark(var(--gray-10), var(--gray-1));
      &:not([disabled]) {
        &:not(:active, .active):hover {
          --_bg: light-dark(oklch(from var(--gray-7) l 0.01 h / 20%), oklch(from var(--gray-7) l 0.01 h / 30%));
        }
      }
    }
    &[btn-style=fill] {
      --_bg: var(--primary);
      --_border-color: var(--primary);
      color: var(--gray-1);
      transition: transform .1s var(--ease-in-out-1);
    }
    &[disabled],
    &:disabled {
      cursor: not-allowed;
      opacity: .7;
    }
    &[btn-size=medium] {
      --_padding-base: var(--padding-base, 0.9ex);
      font-size: var(--step-0);
      font-weight: 500;
    }
    &[btn-size=large] {
      --_padding-base: var(--padding-base, 1.1ex);
      font-size: var(--step-1);
      font-weight: 600;
    }
    &[btn-form=round] {
      border-radius: var(--radius-round);
      aspect-ratio: 1 / 1;
      place-items: center;
      justify-content: center;
      padding-block: var(--_padding-base);
      padding-inline: var(--_padding-base);
    }
    &.active {
      --_bg: light-dark(var(--color-7), var(--color-9));
      color: var(--gray-3);
      > a {
        color: var(--gray-3);
      }
    }
    &:has(a) {
      padding: 0;
      & a {
        display: flex;
        padding: var(--_padding-block) var(--_padding-inline);
      }
    }
  }
  *[role=button-group] {
    display: inline-flex;
    > * {
      border-radius: 0;
      button,
      *[role=button] {
        margin-inline: 0;
      }
      &:first-child {
        border-top-left-radius: var(--_button-border-radius);
        border-bottom-left-radius: var(--_button-border-radius);
        border-right: 0;
      }
      &:last-child {
        border-top-right-radius: var(--_button-border-radius);
        border-bottom-right-radius: var(--_button-border-radius);
        border-left: 0;
      }
    }
  }
}

/* css/arisu/components/dropdown.css */
@layer arisu-components {
  @layer components {
    a-dropdown,
    .a-dropdown {
      background: var(--surface-elevated);
      border-radius: var(--radius-1);
      border: var(--border-size-1) solid var(--surface-filled);
      box-shadow: var(--shadow-2);
      display: none;
      font-size: var(--step--1);
      opacity: 0;
      padding: var(--space-3xs) 0;
      position-area: bottom;
      position-try:
        flip-block,
        flip-inline,
        flip-block flip-inline;
      transition-behavior: allow-discrete;
      transition-duration: 0.05s;
      transition-property:
        translate,
        opacity,
        display,
        overlay;
      transition-timing-function: var(--ease-in-1);
      z-index: var(--layer-3);
      .dropdown-element {
        border: none;
        cursor: pointer;
        display: flex;
        inline-size: 100%;
        padding: var(--space-2xs) var(--space-xs);
        justify-content: flex-start;
        @media (hover: hover) {
          &:hover {
            background-color: var(--surface-tonal);
          }
        }
      }
      &.open,
      &:popover-open {
        > button {
          color: var(--primary);
        }
        .form-body {
          opacity: 1;
          display: block;
          @starting-style {
            opacity: 0;
          }
        }
      }
    }
  }
}

/* css/arisu/components/tooltip.css */
@layer arisu-components {
  a-tooltip,
  .a-tooltip {
    --_bg: var(--bg, var(--surface-elevated));
    background: transparent;
    align-items: center;
    border: 0;
    display: block;
    display: flex;
    flex-direction: column;
    padding: 0 0 8px 0;
    position-area: block-start;
    position-try:
      flip-block,
      flip-inline,
      flip-block flip-inline;
    position: fixed;
    z-index: var(--layer-5);
    > .a-tooltip-content {
      background: var(--_bg);
      border-radius: var(--radius-2);
      box-shadow: var(--shadow-3);
      font-size: 0.887em;
      padding: var(--space-3xs) var(--space-2xs);
    }
  }
}

/* css/arisu/components/form.css */
@layer arisu-components {
  form {
    form-group {
      margin-block: var(--space-2xs);
    }
  }
  input {
    --_padding-inline: var(--space-2xs);
    --_padding-block: var(--space-3xs);
    --_font-size: var(--step--1);
    border-color: var(--gray-9);
    border-radius: var(--radius-1);
    border-style: solid;
    border-width: var(--border-size-1);
    font-size: var(--_font-size);
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    padding: var(--_padding-block) var(--_padding-inline);
    &[type=text],
    &[type=url] {
      padding: var(--_padding-block) var(--_padding-inline);
      background: var(--surface-elevated);
    }
    &.medium {
      --_font-size: var(--step-0);
      --_padding-inline: var(--space-xs);
      --_padding-block: var(--space-2xs);
    }
    &.large {
      --_font-size: var(--step-1);
      --_padding-inline: var(--space-s);
      --_padding-block: var(--space-xs);
    }
    &:has([readonly]) {
      &::before {
        display: none;
      }
      input,
      textarea,
      select {
        cursor: not-allowed;
        * {
          pointer-events: none;
        }
      }
    }
    &:has([disabled]) {
      &::before {
        display: none;
      }
      input,
      textarea,
      select {
        cursor: not-allowed;
        opacity: 0.7;
        * {
          pointer-events: none;
        }
      }
    }
  }
  input[type=date],
  input[type=datetime-local],
  input[type=email],
  input[type=month],
  input[type=number],
  input[type=password],
  input[type=search],
  input[type=tel],
  input[type=text],
  input[type=time],
  input[type=url],
  input[type=week] {
    &.small {
      input {
        padding-inline: var(--size-2);
      }
    }
  }
  input[list] {
    input::-webkit-calendar-picker-indicator {
      opacity: 0;
      position: absolute;
      cursor: pointer;
      pointer-events: none;
    }
  }
  .field:has(input[list]:placeholder-shown),
  .field:has(input[list]):where(:focus-within, :hover) {
    &::after {
      box-sizing: border-box;
      block-size: 0;
      border-block-start: 5px solid;
      border-inline: 5px solid transparent;
      content: "";
      display: inline-block;
      flex-shrink: 0;
      inline-size: 0;
      inset: 50% var(--size-3) auto auto;
      pointer-events: none;
      position: absolute;
      translate: 0 -50%;
    }
  }
}

/* css/arisu/imports.css */

/* css/fonts.css */
@font-face {
  font-family: PP Right Grotesk;
  font-style: normal;
  font-weight: 500;
  src:
    local("PP Right Grotesk Wide Medium"),
    local("PPRightGrotesk-WideMedium"),
    url(/public/fonts/pp-right-grotesk/pp-right-grotesk-wide-medium-latin.woff2) format("woff2");
  unicode-range:
    U+0000-00FF,
    U+0131,
    U+0152-0153,
    U+02BB-02BC,
    U+02C6,
    U+02DA,
    U+02DC,
    U+2000-206F,
    U+2074,
    U+20AC,
    U+2122,
    U+2212,
    U+2215;
  font-display: swap;
}
@font-face {
  font-family: PP Right Grotesk;
  font-style: normal;
  font-weight: 500;
  src:
    local("PP Right Grotesk Wide Medium"),
    local("PPRightGrotesk-WideMedium"),
    url(/public/fonts/pp-right-grotesk/pp-right-grotesk-wide-medium-latin-ext.woff2) format("woff2");
  unicode-range:
    U+0100-024F,
    U+0259,
    U+1E00-1EFF,
    U+20A0-20CF,
    U+2C60-2C7F,
    U+A720-A7FF;
  font-display: swap;
}
@font-face {
  font-family: PP Right Grotesk;
  font-style: normal;
  font-weight: 500;
  src:
    local("PP Right Grotesk Wide Medium"),
    local("PPRightGrotesk-WideMedium"),
    url(/public/fonts/pp-right-grotesk/pp-right-grotesk-wide-medium-cyrillic.woff2) format("woff2");
  unicode-range:
    U+0400-045F,
    U+0490-0491,
    U+04B0-04B1,
    U+2116;
  font-display: swap;
}
@font-face {
  font-family: PP Right Grotesk;
  font-style: normal;
  font-weight: 500;
  src:
    local("PP Right Grotesk Wide Medium"),
    local("PPRightGrotesk-WideMedium"),
    url(/public/fonts/pp-right-grotesk/pp-right-grotesk-wide-medium-cyrillic-ext.woff2) format("woff2");
  unicode-range:
    U+0460-052F,
    U+1C80-1C88,
    U+20B4,
    U+2DE0-2DFF,
    U+A640-A69F,
    U+FE2E-FE2F;
  font-display: swap;
}
@font-face {
  font-family: "Merriweather";
  font-style: normal;
  font-weight: 87% 112%;
  font-stretch: 100%;
  src:
    local("Merriweather Light"),
    local("Merriweather-Light"),
    url(/public/fonts/merriweather/merriweather-light-latin.woff2) format("woff2");
  unicode-range:
    U+0000-00FF,
    U+0131,
    U+0152-0153,
    U+02BB-02BC,
    U+02C6,
    U+02DA,
    U+02DC,
    U+2000-206F,
    U+2074,
    U+20AC,
    U+2122,
    U+2212,
    U+2215;
  font-display: swap;
}
@font-face {
  font-family: "Merriweather";
  font-style: normal;
  font-weight: 87% 112%;
  font-stretch: 100%;
  src:
    local("Merriweather Light"),
    local("Merriweather-Light"),
    url(/public/fonts/merriweather/merriweather-light-latin-ext.woff2) format("woff2");
  unicode-range:
    U+0100-024F,
    U+0259,
    U+1E00-1EFF,
    U+20A0-20CF,
    U+2C60-2C7F,
    U+A720-A7FF;
  font-display: swap;
}
@font-face {
  font-family: "Merriweather";
  font-style: normal;
  font-weight: 87% 112%;
  font-stretch: 100%;
  src:
    local("Merriweather Light"),
    local("Merriweather-Light"),
    url(/public/fonts/merriweather/merriweather-light-cyrillic.woff2) format("woff2");
  unicode-range:
    U+0400-045F,
    U+0490-0491,
    U+04B0-04B1,
    U+2116;
  font-display: swap;
}
@font-face {
  font-family: "Merriweather";
  font-style: normal;
  font-weight: 87% 112%;
  font-stretch: 100%;
  src:
    local("Merriweather Light"),
    local("Merriweather-Light"),
    url(/public/fonts/merriweather/merriweather-light-cyrillic-ext.woff2) format("woff2");
  unicode-range:
    U+0460-052F,
    U+1C80-1C88,
    U+20B4,
    U+2DE0-2DFF,
    U+A640-A69F,
    U+FE2E-FE2F;
  font-display: swap;
}

/* css/components/article-card.css */
@layer components {
  article-card {
    display: grid;
    grid-template-columns: 3fr 5fr;
    grid-template-rows: auto auto auto auto;
    grid-column-gap: var(--space-s);
    grid-row-gap: var(--space-s);
    margin-bottom: var(--space-xl);
    align-content: flex-start;
    justify-items: flex-start;
    align-items: flex-start;
    @media (min-width: 769px) {
      grid-template-areas: "cover title" "excerpt excerpt" "meta meta";
    }
    @media (max-width: 769px) {
      grid-template-areas: "title title" "cover cover" "excerpt excerpt" "meta meta";
    }
    .article-thumb {
      grid-area: cover;
      inline-size: 100%;
      block-size: 100%;
      display: block;
      img {
        inline-size: 100%;
        max-inline-size: 100%;
      }
    }
    .title-block {
      grid-area: title;
    }
    .title {
      text-box-trim: trim-both;
      text-box-edge: cap alphabetic;
      margin-block: 0 var(--space-s);
      a {
        display: block;
      }
    }
    p {
      grid-area: excerpt;
      margin: 0;
    }
    .meta {
      grid-area: meta;
    }
  }
}

/* css/components/badge.css */
@layer components {
  badge {
    > a,
    > span {
      display: flex;
      font-family: var(--font-sans);
      font-weight: normal;
      border-width: var(--border-size-1);
      border-style: solid;
      border-radius: var(--radius-1);
      border-color: light-dark(var(--gray-10), var(--gray-5));
      color: light-dark(var(--gray-10), var(--gray-5));
      letter-spacing: 1px;
      line-height: 1.2;
      text-transform: uppercase;
      text-decoration: none;
      text-box-trim: trim-both;
      text-box-edge: cap alphabetic;
      line-height: 1em;
    }
    &[data-color=light] {
      color-scheme: light;
    }
    &[data-color=dark] {
      color-scheme: dark;
    }
    &[data-size=sm] {
      a,
      span {
        font-size: var(--step--3);
        padding: var(--space-3xs) var(--space-2xs);
      }
    }
    &[data-size=md] {
      a,
      span {
        font-size: var(--step--2);
        padding: calc(var(--space-3xs) + 2px) calc(var(--space-2xs) + 2px);
      }
    }
    &[data-size=lg] {
      a,
      span {
        font-size: var(--step-0);
        padding: var(--space-2xs) var(--space-xs);
      }
    }
    &:hover {
      > a {
        background: var(--primary);
        border-color: var(--primary);
        color: var(--gray-1);
        text-shadow: 0 0 2px #941a00;
        text-decoration: none;
      }
    }
  }
}

/* css/components/pagination.css */
@layer components {
  .pagination {
    column-gap: var(--space-2xs-xs);
    display: flex;
    border-radius: var(--radius-1);
    flex-flow: row nowrap;
    font-weight: 500;
    justify-content: center;
    justify-self: center;
    margin-block: var(--space-2xs);
    margin-inline: auto;
    padding: 0;
    li {
      list-style: none;
    }
    a,
    span {
      padding: var(--space-2xs) var(--space-xs);
    }
    span:not(.selected) {
      background: var(--surface-elevated);
      opacity: 0.7;
      color: var(--text-color-3);
    }
    a {
      background: var(--surface-elevated);
      color: var(--text-color-1);
      text-decoration: none;
    }
    a:hover,
    span.selected {
      background: var(--primary);
      color: var(--gray-1);
      text-shadow: 0 0 2px #941a00;
      text-decoration: none;
    }
  }
}

/* css/components/link.css */
@layer components {
  a {
    text-decoration-color: inherit;
    text-decoration-thickness: clamp(1px, 0.1em, 3px);
    text-underline-offset: 0.25em;
    color: inherit;
    h1 &,
    h2 &,
    h3 &,
    h4 & {
      text-decoration: none;
    }
    &:hover {
      text-decoration-line: underline;
      text-decoration-thickness: clamp(1px, 0.25em, 5px);
      text-underline-offset: 0.25em;
      text-decoration-color: var(--primary);
    }
    &:active {
      color: light-dark(var(--primary), var(--primary-light));
    }
  }
}

/* css/components/delimiter.css */
@layer components {
  .delimiter {
    align-items: center;
    display: flex;
    justify-content: center;
    height: 18px;
    width: 100%;
    overflow: hidden;
    margin: var(--space-l) 0;
    .line {
      background-color: var(--primary);
      height: 1px;
      flex-grow: 1;
    }
    svg {
      height: 18px;
      color: var(--primary);
      margin: 0 var(--space-3xs);
    }
  }
}

/* css/components/icon-button.css */
@layer components {
  .icon-button {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: .25em;
    color: var(--text-color-bright);
    &[btn-color=light] {
      color-scheme: light;
    }
    &[btn-color=dark] {
      color-scheme: dark;
    }
    svg {
      block-size: var(--menu-icon-size);
    }
  }
}

/* css/components/featured-article-card.css */
@layer components {
  featured-article {
    display: grid;
    grid-template-rows: repeat(4, auto);
    grid-template-columns: 100%;
    grid-row-gap: var(--space-s);
    img {
      width: 100%;
      grid-row: 1 / 3;
      grid-column: 1 / 2;
    }
    .title-block {
      grid-row: 2 / 3;
      grid-column: 1 / 2;
      background-color: oklch(from var(--gray-16) l c h / 0.4);
      backdrop-filter: blur(3px);
      padding: var(--space-s);
    }
    .title {
      color: var(--gray-1);
      margin: 0;
      text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.89);
      width: 100%;
      a {
        display: block;
      }
    }
    .authors {
      text-transform: uppercase;
      margin-block-start: var(--space-2xs);
    }
    .author {
      font-size: var(--step-1);
      text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.89);
      font-weight: 600;
      &:not(:active) {
        color: var(--gray-1);
      }
      &:not(:hover) {
        text-decoration-color: var(--gray-3);
      }
    }
    .prose {
      grid-column: 1 / 2;
      grid-row: 3 / 4;
      margin: 0;
    }
    .meta {
      grid-column: 1 / 2;
      grid-row: 4 / 5;
    }
    @media (max-width: 768px) {
      grid-column: full-width;
      img {
        grid-row: 1 / 2;
      }
      > *:not(img) {
        padding-inline: var(--space-xs-s);
      }
      .title-block {
        grid-row: 2 / 3;
        padding-block: 0;
        background-color: transparent;
        backdrop-filter: none;
      }
      .title,
      .author {
        color: var(--text-color-2);
        text-shadow: none;
      }
      .author {
        &:not(:active) {
          color: var(--text-color-2);
        }
        &:not(:hover) {
          text-decoration-color: var(--text-color-3);
        }
      }
      .prose {
        grid-row: 3 / 4;
      }
      .meta {
        grid-row: 4 / 5;
      }
    }
  }
}

/* css/components/author-card.css */
@layer components {
  author-card {
    a {
      border-width: var(--border-size-2);
      border-style: solid;
      border-color: var(--text-color-3);
      display: flex;
      flex-direction: column;
      inline-size: 234px;
      text-decoration: none;
      padding: var(--space-2xs);
      block-size: 100%;
      justify-content: space-between;
      &:hover {
        text-decoration: none;
        border-color: var(--primary);
      }
      h4 {
        margin-block: auto 0;
        justify-self: flex-end;
      }
      img + h4 {
        margin-block: var(--space-xs) 0;
      }
    }
  }
}

/* css/components/subscription-form.css */
@layer components {
  #subscription-form {
    max-inline-size: min(56ch, 100vw);
    &::backdrop {
      background: oklch(from var(--gray-12) l c h / 0.75);
    }
    subscription-form {
      background: var(--surface-elevated);
      box-shadow: var(--shadow-2);
      padding: var(--space-m) var(--space-l);
      color: var(--text-color-2);
      display: flex;
      @media only screen and (width < 580px) {
        padding-inline: var(--space-2xs);
      }
      h2,
      h3 {
        margin: 0;
        text-align: center;
      }
      .close-form {
        position: absolute;
        right: 1px;
        top: 1px;
        background: var(--surface-elevated);
      }
      .form-view {
        align-items: center;
        flex-direction: column;
        gap: var(--space-m);
        &:not(.hidden) {
          display: flex;
        }
        form {
          display: flex;
          flex-direction: column;
          gap: var(--space-m);
          inline-size: 100%;
          align-items: center;
        }
        .field {
          inline-size: 90%;
          justify-content: center;
        }
        input {
          inline-size: 100%;
        }
      }
      .subscription-lang-chooser {
        display: flex;
        align-items: center;
        column-gap: var(--space-2xs);
        @media only screen and (width < 580px) {
          span {
            display: none;
          }
        }
        button {
          --padding-base: .5ex;
        }
      }
    }
  }
  .hidden {
    display: none;
  }
}

/* css/components/image.css */
@layer components {
  img {
    &:not(.logo, .icon) {
      max-inline-size: 100%;
      background: var(--surface-elevated) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNDQUMyQzAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1pbWFnZS1pY29uIGx1Y2lkZS1pbWFnZSI+PHJlY3Qgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiB4PSIzIiB5PSIzIiByeD0iMiIgcnk9IjIiLz48Y2lyY2xlIGN4PSI5IiBjeT0iOSIgcj0iMiIvPjxwYXRoIGQ9Im0yMSAxNS0zLjA4Ni0zLjA4NmEyIDIgMCAwIDAtMi44MjggMEw2IDIxIi8+PC9zdmc+);
      background-repeat: no-repeat;
      background-position: center;
      background-size: 40% 40%;
      background-clip: padding-box;
      overflow: hidden;
    }
  }
}

/* css/blocks/article.css */
article {
  .meta {
    row-gap: var(--space-s);
    column-gap: var(--space-s);
  }
  .article-title {
    margin-block-start: 0;
  }
  .cover {
    width: 100%;
  }
  .authors {
    margin-block-end: var(--space-m);
  }
  .cover {
    margin-block-end: var(--space-m);
  }
  main {
    margin-block-end: var(--space-m);
  }
}

/* css/main.css */
html {
  --breakout-max-width: var(--size-content-5);
  --wide-max-width: 1200px;
  --font-serif:
    "Merriweather",
    "Georgia",
    "Times New Roman",
    "Times",
    ui-serif,
    serif;
  --font-showcase:
    "PP Right Grotesk",
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Ubuntu,
    Adwaita Sans,
    Cantarell,
    Noto Sans,
    sans-serif;
  --button-border-radius: var(--radius-1);
  font-size: var(--step-0);
  &[data-theme=dark] {
    #theme-switcher-trigger {
      span.dark {
        display: inline;
      }
    }
  }
  &[data-theme=light] {
    #theme-switcher-trigger {
      span.light {
        display: inline;
      }
    }
  }
  &[data-theme=auto] {
    #theme-switcher-trigger {
      span.auto {
        display: inline;
      }
    }
  }
}
.skip-link {
  position: absolute;
  inset-inline-start: 1em;
  inset-block-start: -3em;
  background: var(--surface-default);
  color: var(--text-color-1);
  padding: 0.5em 1em;
  z-index: var(--layer-important);
  transition: inset-block-start 0.15s;
}
.skip-link:focus {
  inset-block-start: 1em;
}
body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  > header,
  > footer {
    background: var(--primary);
  }
  > header {
    position: sticky;
    top: 0;
    z-index: var(--layer-1);
    button#main-nav-trigger {
      .menu-icon {
        display: block;
      }
      .close-icon {
        display: none;
      }
    }
    &:has(#main-nav:popover-open) {
      button#main-nav-trigger {
        .menu-icon {
          display: none;
        }
        .close-icon {
          display: block;
        }
      }
    }
    &:has(#lang-switcher:popover-open) {
      button#lang-switcher-trigger {
        background: var(--primary);
      }
    }
    @media only screen and (width < 580px) {
      .subscribe-button {
        display: none;
      }
    }
  }
  > footer {
    border-style: solid;
    border-width: 1px;
    border-color: transparent;
    background: light-dark(var(--primary), var(--surface-elevated));
    color: var(--gray-1);
    padding-block: var(--space-m);
    @media (prefers-color-scheme: dark) {
      border-color: var(--surface-filled);
    }
    .wrapper {
      display: flex;
      width: 100%;
      flex-flow: wrap;
      justify-content: space-between;
      gap: var(--space-s);
    }
    .footer-menu {
      align-items: flex-start;
      display: flex;
      flex-flow: column;
      row-gap: var(--space-xs);
      a.site-link {
        text-transform: uppercase;
        font-family: var(--font-showcase);
        text-decoration-line: none;
        font-size: var(--step-2);
        &:hover {
          text-decoration-line: underline;
          text-decoration-thickness: revert;
          text-decoration-color: var(--gray-1);
        }
      }
    }
    .contacts {
      justify-content: space-between;
      column-gap: var(--space-m);
      .social-account-list {
        span {
          display: none;
        }
      }
    }
    a {
      color: var(--gray-1);
    }
  }
}
.app-header {
  anchor-name: --app-header;
  > div {
    display: flex;
    flex-flow: column nowrap;
  }
  #lang-switcher-trigger {
    anchor-name: --lang-switcher-trigger;
  }
  #theme-switcher-trigger {
    anchor-name: --theme-switcher-trigger;
    span {
      display: none;
    }
  }
  #lang-switcher,
  #theme-switcher {
    display: none;
    position-anchor: --lang-switcher-trigger;
    button {
      border: none;
      border-radius: 0;
    }
    &:popover-open {
      display: block;
      opacity: 1;
    }
  }
  #lang-switcher {
    position-anchor: --lang-switcher-trigger;
  }
  #theme-switcher {
    position-anchor: --theme-switcher-trigger;
    button {
      svg {
        inline-size: var(--step-2);
        block-size: var(--step-2);
      }
    }
  }
}
#main-nav {
  background: var(--primary);
  display: none;
  left: 0;
  padding: 0;
  position: fixed;
  top: 55px;
  width: 100%;
  &:popover-open {
    display: block;
  }
  .contacts {
    justify-content: space-between;
  }
  .subscribe-menu-button {
    display: none;
  }
  @media (width < 580px) {
    .subscribe-menu-button {
      display: block;
    }
    .contacts {
      margin-block-start: auto;
    }
    .main-menu {
      font-size: var(--step-1);
      flex-direction: column;
    }
  }
  nav {
    display: flex;
    flex-flow: column nowrap;
    row-gap: var(--space-l);
    padding: var(--space-s) 0 var(--space-m);
    .main-menu {
      font-size: var(--step-2);
    }
    .countries {
      badge {
        a {
          text-shadow: 0 0 2px #941a00;
          color: var(--gray-1);
          border-color: var(--gray-1);
        }
        &:hover {
          a {
            outline: var(--border-size-2) solid var(--gray-3);
          }
        }
      }
    }
  }
}
top-bar {
  align-items: center;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: repeat(3, 1fr);
  justify-content: space-between;
  justify-items: center;
  padding-block: var(--space-2xs);
  > div {
    align-items: center;
    display: flex;
    column-gap: var(--space-3xs);
  }
  > :first-child {
    justify-self: flex-start;
  }
  > :last-child {
    justify-self: flex-end;
  }
  .header-logo {
    container-type: inline-size;
    display: flex;
    inline-size: 100%;
    justify-content: center;
    align-items: center;
    img {
      block-size: 1.5em;
    }
    @container (inline-size < 200px) {
      img.logo-full {
        display: none;
      }
      img.logo-compact {
        display: block;
        margin-block-start: -0.1em;
        margin-block-end: -0.1em;
        block-size: 2em;
        inline-size: 2em;
      }
    }
    @container (inline-size > 200px) {
      img.logo-full {
        display: block;
      }
      img.logo-compact {
        display: none;
      }
    }
  }
}
menu {
  display: flex;
  flex-flow: row wrap;
  margin: 0;
  padding: 0;
  gap: var(--space-xs);
  li {
    list-style: none;
  }
}
.main-menu {
  font-family: var(--font-showcase);
  a {
    color: var(--gray-1);
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
  }
}
.contacts {
  display: flex;
  flex-flow: row wrap;
  font-family: var(--font-showcase);
  font-size: var(--step--1);
  gap: var(--space-xs);
  color: var(--gray-1);
  > div {
    display: flex;
    flex-direction: column;
    row-gap: var(--space-3xs);
  }
  .social-account-list {
    display: flex;
    flex-flow: row nowrap;
    column-gap: var(--space-2xs);
  }
  a {
    display: flex;
    flex-flow: row nowrap;
    color: var(--gray-1);
    text-decoration: none;
    line-height: 1.5em;
    column-gap: var(--space-3xs);
    &:hover {
      text-decoration: underline;
    }
  }
  img {
    height: 1lh;
    width: 1lh;
    display: flex;
  }
  .email {
    text-transform: uppercase;
  }
}
.page {
  padding-block: var(--space-l) var(--space-xl);
  .page-title {
    margin-block: 0 var(--space-l);
  }
}
.index-page {
  padding-block: 0 var(--space-xl);
}
.index-articles-link {
  color: var(--text-color-3);
  align-items: center;
  display: flex;
  font-family: var(--font-showcase);
  font-size: var(--step-2);
  margin: 0 auto;
  justify-content: center;
}
.debug {
  width: 300px;
  word-wrap: break-word;
  margin-bottom: 20px;
}
.badges {
  display: inline-flex;
  flex-flow: row wrap;
  column-gap: var(--space-2xs);
  row-gap: var(--space-2xs);
  align-items: center;
  .label {
    text-transform: uppercase;
    color: var(--text-color-3);
    font-size: var(--step--2);
    line-height: 1;
  }
}
.icon-button.menu-button {
  --menu-icon-size: 1.8em;
  svg {
    inline-size: var(--menu-icon-size);
  }
}
.authors {
  font-weight: 600;
  text-transform: uppercase;
  display: inline-block;
  a.author {
    margin-inline-end: var(--space-2xs);
  }
}
article-card {
  .authors {
    color: var(--text-color-2);
    a.author {
      &:not(:hover) {
        text-decoration-color: var(--text-color-3);
      }
    }
  }
}
.date {
  color: var(--text-color-3);
}
.meta {
  align-items: center;
  display: flex;
  flex-flow: row wrap;
  row-gap: var(--space-2xs);
  column-gap: var(--space-xs);
}
.author-page {
  column-gap: var(--space-m);
  row-gap: var(--space-l);
  .author-articles {
    max-inline-size: var(--size-content-5);
  }
  .author-info {
    display: flex;
    gap: var(--space-l);
    img {
      min-inline-size: 200px;
      max-inline-size: 100%;
    }
    .author-bio {
      font-size: var(--step-4);
    }
  }
  @media only screen and (max-width: 768px) {
    display: flex;
    flex-direction: column;
    .author-info {
      display: flex;
      flex-direction: column;
    }
  }
  @media only screen and (min-width: 769px) and (max-width: 1440px) {
    display: flex;
    flex-direction: column;
    .author-info {
      display: flex;
      img {
        max-width: 600px;
      }
    }
  }
  @media only screen and (min-width: 1441px) {
    display: grid;
    &.with-info {
      grid-template-columns: 2fr 3fr;
      .author-info {
        flex-wrap: wrap;
        flex-direction: column;
      }
    }
  }
}
.authors-page {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}