@charset "UTF-8";
/*
* Ametrine v0.1.0-alpha (https://ametrine.daudix.one)
* Copyright 2025 David "Daudix" Lapshin and contributors
* Licensed under MIT (https://codeberg.org/daudix/ametrine/raw/branch/main/LICENSE.txt)
*/
:root {
  --bg-overlay: linear-gradient(
    rgba(255, 255, 255, var(--dim-opacity)),
    rgba(255, 255, 255, var(--dim-opacity))
  );
  --fg-color: #29242a;
  --fg-contrast: #fcfcfa;
  --red-fg: hsl(342.0779, 72%, 58%);
  --red-h: 342.0779;
  --red-s: 72%;
  --red-l: 58%;
  --orange-fg: hsl(15.771428, 74%, 54%);
  --orange-h: 15.771428;
  --orange-s: 74%;
  --orange-l: 54%;
  --yellow-fg: hsl(34.639175, 91%, 42%);
  --yellow-h: 34.639175;
  --yellow-s: 91%;
  --yellow-l: 42%;
  --green-fg: hsl(153.7815, 61%, 38%);
  --green-h: 153.7815;
  --green-s: 61%;
  --green-l: 38%;
  --blue-fg: hsl(192, 71%, 38%);
  --blue-h: 192;
  --blue-s: 71%;
  --blue-l: 38%;
  --purple-fg: hsl(254.11766, 44%, 55%);
  --purple-h: 254.11766;
  --purple-s: 44%;
  --purple-l: 55%;
  --red-bg-1: hsla(
    var(--red-h),
    var(--red-s),
    var(--red-l),
    var(--color-opacity-1)
  );
  --red-bg-2: hsla(
    var(--red-h),
    var(--red-s),
    var(--red-l),
    var(--color-opacity-2)
  );
  --orange-bg-1: hsla(
    var(--orange-h),
    var(--orange-s),
    var(--orange-l),
    var(--color-opacity-1)
  );
  --orange-bg-2: hsla(
    var(--orange-h),
    var(--orange-s),
    var(--orange-l),
    var(--color-opacity-2)
  );
  --yellow-bg-1: hsla(
    var(--yellow-h),
    var(--yellow-s),
    var(--yellow-l),
    var(--color-opacity-1)
  );
  --yellow-bg-2: hsla(
    var(--yellow-h),
    var(--yellow-s),
    var(--yellow-l),
    var(--color-opacity-2)
  );
  --green-bg-1: hsla(
    var(--green-h),
    var(--green-s),
    var(--green-l),
    var(--color-opacity-1)
  );
  --green-bg-2: hsla(
    var(--green-h),
    var(--green-s),
    var(--green-l),
    var(--color-opacity-2)
  );
  --blue-bg-1: hsla(
    var(--blue-h),
    var(--blue-s),
    var(--blue-l),
    var(--color-opacity-1)
  );
  --blue-bg-2: hsla(
    var(--blue-h),
    var(--blue-s),
    var(--blue-l),
    var(--color-opacity-2)
  );
  --purple-bg-1: hsla(
    var(--purple-h),
    var(--purple-s),
    var(--purple-l),
    var(--color-opacity-1)
  );
  --purple-bg-2: hsla(
    var(--purple-h),
    var(--purple-s),
    var(--purple-l),
    var(--color-opacity-2)
  );
  --red-fg-muted-1: hsla(
    var(--red-h),
    var(--red-s),
    calc(var(--red-l) - var(--red-l) * 0.85),
    var(--fg-muted-1-opacity)
  );
  --red-fg-muted-2: hsla(
    var(--red-h),
    var(--red-s),
    calc(var(--red-l) - var(--red-l) * 0.85),
    var(--fg-muted-2-opacity)
  );
  --orange-fg-muted-1: hsla(
    var(--orange-h),
    var(--orange-s),
    calc(var(--orange-l) - var(--orange-l) * 0.85),
    var(--fg-muted-1-opacity)
  );
  --orange-fg-muted-2: hsla(
    var(--orange-h),
    var(--orange-s),
    calc(var(--orange-l) - var(--orange-l) * 0.85),
    var(--fg-muted-2-opacity)
  );
  --yellow-fg-muted-1: hsla(
    var(--yellow-h),
    var(--yellow-s),
    calc(var(--yellow-l) - var(--yellow-l) * 0.85),
    var(--fg-muted-1-opacity)
  );
  --yellow-fg-muted-2: hsla(
    var(--yellow-h),
    var(--yellow-s),
    calc(var(--yellow-l) - var(--yellow-l) * 0.85),
    var(--fg-muted-2-opacity)
  );
  --green-fg-muted-1: hsla(
    var(--green-h),
    var(--green-s),
    calc(var(--green-l) - var(--green-l) * 0.85),
    var(--fg-muted-1-opacity)
  );
  --green-fg-muted-2: hsla(
    var(--green-h),
    var(--green-s),
    calc(var(--green-l) - var(--green-l) * 0.85),
    var(--fg-muted-2-opacity)
  );
  --blue-fg-muted-1: hsla(
    var(--blue-h),
    var(--blue-s),
    calc(var(--blue-l) - var(--blue-l) * 0.85),
    var(--fg-muted-1-opacity)
  );
  --blue-fg-muted-2: hsla(
    var(--blue-h),
    var(--blue-s),
    calc(var(--blue-l) - var(--blue-l) * 0.85),
    var(--fg-muted-2-opacity)
  );
  --purple-fg-muted-1: hsla(
    var(--purple-h),
    var(--purple-s),
    calc(var(--purple-l) - var(--purple-l) * 0.85),
    var(--fg-muted-1-opacity)
  );
  --purple-fg-muted-2: hsla(
    var(--purple-h),
    var(--purple-s),
    calc(var(--purple-l) - var(--purple-l) * 0.85),
    var(--fg-muted-2-opacity)
  );
  --shade-color: rgba(0, 0, 0, 0.07);
  --bg-muted-neutral-1: rgba(0, 0, 0, var(--color-opacity-1));
  --bg-muted-neutral-2: rgba(0, 0, 0, var(--color-opacity-2));
  --fg-muted-neutral-1: rgba(0, 0, 0, var(--fg-muted-1-opacity));
  --fg-muted-neutral-2: rgba(0, 0, 0, var(--fg-muted-2-opacity));
  --scanlines-opacity: 0.4;
  --fg-muted-1-opacity: 0.5;
  --fg-muted-2-opacity: 0.6;
  --edge-highlight: inset
    0
    -0.0625rem
    0
    rgba(0, 0, 0, var(--color-opacity-1));
  --content-width: 45rem;
  --sidebar-width: clamp(
    calc(var(--content-width) / 3),
    20vw,
    calc(var(--content-width) / 2)
  );
  --rounded-corner: 0.75rem;
  --rounded-corner-small: 0.5rem;
  --blur: blur(0.75rem) saturate(180%);
  --printed: contrast(2) brightness(0.75) grayscale(1);
  --drop-shadow: drop-shadow(0 0.08rem 0.1rem rgba(0, 0, 0, 0.35))
    drop-shadow(0 0.4rem 0.7rem rgba(0, 0, 0, 0.18));
  --font-system-ui: system-ui, sans-serif;
  --font-ui-monospace: ui-monospace, monospace;
  --font-emoji:
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
  --font-size-xx-small: 0.625rem;
  --font-size-x-small: 0.75rem;
  --font-size-small: 0.875rem;
  --font-size-medium: 1rem;
  --font-size-large: 1.25rem;
  --font-size-x-large: 1.5rem;
  --font-size-xx-large: 2rem;
  --font-size-xxx-large: 3rem;
  --font-weight-thin: 100;
  --font-weight-extra-light: 200;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;
  --font-weight-extra-bold: 800;
  --font-weight-black: 900;
  --color-opacity-1: 0.1;
  --color-opacity-2: 0.2;
  --dim-opacity: 0.8;
  --disabled-opacity: 0.4;
  --shadow:
    0 0 0 0.0625rem rgba(0, 0, 0, 0.03),
    0 0.0625rem 0.1875rem 0.0625rem rgba(0, 0, 0, 0.07),
    0 0.125rem 0.375rem 0.125rem rgba(0, 0, 0, 0.03);
  --shadow-inset:
    inset 0 0 0 0.0625rem rgba(0, 0, 0, 0.03),
    inset 0 0.0625rem 0.1875rem 0.0625rem rgba(0, 0, 0, 0.07),
    inset 0 0.125rem 0.375rem 0.125rem rgba(0, 0, 0, 0.03);
  --shadow-raised:
    0 0 0 0.0625rem rgba(0, 0, 0, 0.06),
    0 0.125rem 0.375rem 0.125rem rgba(0, 0, 0, 0.14),
    0 0.25rem 0.75rem 0.25rem rgba(0, 0, 0, 0.06);
  --shadow-glass: 0 0.375rem 0.75rem -0.375rem rgba(0, 0, 0, 0.1);
  --hover: scale(1.1);
  --active: scale(0.9);
  --transition: 0.2s;
  --transition-longer: 0.4s;
  --transition-long: 0.8s;
  --transition-bezier: 0.35s cubic-bezier(0.17, 0.89, 0.32, 1.28);
  --transition-bezier-longer: 0.525s cubic-bezier(0.17, 0.89, 0.32, 1.28);
  --accent-color: hsl(
    var(--accent-light-h),
    var(--accent-light-s),
    var(--accent-light-l)
  );
  --accent-h: var(--accent-light-h);
  --accent-s: var(--accent-light-s);
  --accent-l: var(--accent-light-l);
  --bg-color: hsl(
    var(--accent-h),
    calc(var(--accent-s) - var(--accent-s) * 0.6),
    calc(var(--accent-l) + (100% - var(--accent-l)) * 0.8)
  );
  --fg-muted-1: hsla(
    var(--accent-h),
    var(--accent-s),
    calc(var(--accent-l) - var(--accent-l) * 0.85),
    var(--fg-muted-1-opacity)
  );
  --fg-muted-2: hsla(
    var(--accent-h),
    var(--accent-s),
    calc(var(--accent-l) - var(--accent-l) * 0.85),
    var(--fg-muted-2-opacity)
  );
  --glass-bg-1: hsla(
    var(--accent-h),
    calc(var(--accent-s) - var(--accent-s) * 0.7),
    calc(var(--accent-l) + (100% - var(--accent-l)) * 0.9),
    var(--dim-opacity)
  );
  --glass-bg-2: hsla(
    var(--accent-h),
    calc(var(--accent-s) - var(--accent-s) * 0.6),
    calc(var(--accent-l) + (100% - var(--accent-l)) * 0.8),
    var(--dim-opacity)
  );
  --crt-bg: radial-gradient(
    hsl(
      var(--accent-h),
      calc(var(--accent-s) - var(--accent-s) * 0.5),
      calc(var(--accent-l) + (100% - var(--accent-l)) * 0.9)
    ),
    hsl(
        var(--accent-h),
        calc(var(--accent-s) - var(--accent-s) * 0.5),
        calc(var(--accent-l) + (100% - var(--accent-l)) * 0.75)
      )
      80%,
    hsl(
      var(--accent-h),
      calc(var(--accent-s) - var(--accent-s) * 0.5),
      calc(var(--accent-l) + (100% - var(--accent-l)) * 0.65)
    )
  );
  --accent-highlight: hsla(
    var(--accent-h),
    var(--accent-s),
    var(--accent-l),
    var(--disabled-opacity)
  );
  --bg-muted-1: hsla(
    var(--accent-h),
    var(--accent-s),
    var(--accent-l),
    var(--color-opacity-1)
  );
  --bg-muted-2: hsla(
    var(--accent-h),
    var(--accent-s),
    var(--accent-l),
    var(--color-opacity-2)
  );
  --l: clamp(0, (l / 0.623 - 1) * -infinity, 1);
  --a: calc(var(--l) + (var(--dim-opacity) * (1 - var(--l))));
  --contrast-color: oklch(from var(--accent-color) var(--l) 0 h / var(--a));
  --shadow-glow:
    0 0 0 0.0625rem var(--bg-muted-2),
    0 0.125rem 0.375rem 0.125rem var(--bg-muted-1),
    0 0.25rem 1.5rem 0.25rem var(--bg-muted-2);
  --shadow-glow-inset:
    inset 0 0 0 0.0625rem var(--bg-muted-2),
    inset 0 0.125rem 0.375rem 0.125rem var(--bg-muted-1),
    inset 0 0.25rem 1.5rem 0.25rem var(--bg-muted-2);
  --text-shadow-glow:
    var(--bg-muted-2) 0 0 0.25rem, var(--accent-color) 0 0 0.75rem;
  scrollbar-color: var(--accent-color) transparent;
  accent-color: var(--accent-color);
}
@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg-overlay: linear-gradient(
      rgba(0, 0, 0, var(--dim-opacity)),
      rgba(0, 0, 0, var(--dim-opacity))
    );
    --fg-color: #fcfcfa;
    --fg-contrast: #29242a;
    --red-fg: hsl(345.18988, 100%, 69%);
    --red-h: 345.18988;
    --red-s: 100%;
    --red-l: 69%;
    --orange-fg: hsl(19.731544, 96%, 70%);
    --orange-h: 19.731544;
    --orange-s: 96%;
    --orange-l: 70%;
    --yellow-fg: hsl(44.70588, 100%, 70%);
    --yellow-h: 44.70588;
    --yellow-s: 100%;
    --yellow-l: 70%;
    --green-fg: hsl(90, 59%, 66%);
    --green-h: 90;
    --green-s: 59%;
    --green-l: 66%;
    --blue-fg: hsl(186.42857, 71%, 69%);
    --blue-h: 186.42857;
    --blue-s: 71%;
    --blue-l: 69%;
    --purple-fg: hsl(249.88234, 77%, 78%);
    --purple-h: 249.88234;
    --purple-s: 77%;
    --purple-l: 78%;
    --red-fg-muted-1: hsla(
      var(--red-h),
      var(--red-s),
      calc(var(--red-l) + (100% - var(--red-l)) * 0.85),
      var(--fg-muted-1-opacity)
    );
    --red-fg-muted-2: hsla(
      var(--red-h),
      var(--red-s),
      calc(var(--red-l) + (100% - var(--red-l)) * 0.85),
      var(--fg-muted-2-opacity)
    );
    --orange-fg-muted-1: hsla(
      var(--orange-h),
      var(--orange-s),
      calc(var(--orange-l) + (100% - var(--orange-l)) * 0.85),
      var(--fg-muted-1-opacity)
    );
    --orange-fg-muted-2: hsla(
      var(--orange-h),
      var(--orange-s),
      calc(var(--orange-l) + (100% - var(--orange-l)) * 0.85),
      var(--fg-muted-2-opacity)
    );
    --yellow-fg-muted-1: hsla(
      var(--yellow-h),
      var(--yellow-s),
      calc(var(--yellow-l) + (100% - var(--yellow-l)) * 0.85),
      var(--fg-muted-1-opacity)
    );
    --yellow-fg-muted-2: hsla(
      var(--yellow-h),
      var(--yellow-s),
      calc(var(--yellow-l) + (100% - var(--yellow-l)) * 0.85),
      var(--fg-muted-2-opacity)
    );
    --green-fg-muted-1: hsla(
      var(--green-h),
      var(--green-s),
      calc(var(--green-l) + (100% - var(--green-l)) * 0.85),
      var(--fg-muted-1-opacity)
    );
    --green-fg-muted-2: hsla(
      var(--green-h),
      var(--green-s),
      calc(var(--green-l) + (100% - var(--green-l)) * 0.85),
      var(--fg-muted-2-opacity)
    );
    --blue-fg-muted-1: hsla(
      var(--blue-h),
      var(--blue-s),
      calc(var(--blue-l) + (100% - var(--blue-l)) * 0.85),
      var(--fg-muted-1-opacity)
    );
    --blue-fg-muted-2: hsla(
      var(--blue-h),
      var(--blue-s),
      calc(var(--blue-l) + (100% - var(--blue-l)) * 0.85),
      var(--fg-muted-2-opacity)
    );
    --purple-fg-muted-1: hsla(
      var(--purple-h),
      var(--purple-s),
      calc(var(--purple-l) + (100% - var(--purple-l)) * 0.85),
      var(--fg-muted-1-opacity)
    );
    --purple-fg-muted-2: hsla(
      var(--purple-h),
      var(--purple-s),
      calc(var(--purple-l) + (100% - var(--purple-l)) * 0.85),
      var(--fg-muted-2-opacity)
    );
    --shade-color: rgba(0, 0, 0, 0.25);
    --bg-muted-neutral-1: rgba(255, 255, 255, var(--color-opacity-1));
    --bg-muted-neutral-2: rgba(255, 255, 255, var(--color-opacity-2));
    --fg-muted-neutral-1: rgba(255, 255, 255, var(--fg-muted-1-opacity));
    --fg-muted-neutral-2: rgba(255, 255, 255, var(--fg-muted-2-opacity));
    --scanlines-opacity: 1;
    --fg-muted-1-opacity: 0.6;
    --fg-muted-2-opacity: 0.7;
    --edge-highlight: inset
      0
      0.0625rem
      0
      rgba(255, 255, 255, var(--color-opacity-1));
    --accent-color: hsl(
      var(--accent-dark-h),
      var(--accent-dark-s),
      var(--accent-dark-l)
    );
    --accent-h: var(--accent-dark-h);
    --accent-s: var(--accent-dark-s);
    --accent-l: var(--accent-dark-l);
    --bg-color: hsl(
      var(--accent-h),
      calc(var(--accent-s) - var(--accent-s) * 0.7),
      calc(var(--accent-l) - var(--accent-l) * 0.9)
    );
    --fg-muted-1: hsla(
      var(--accent-h),
      var(--accent-s),
      calc(var(--accent-l) + (100% - var(--accent-l)) * 0.85),
      var(--fg-muted-1-opacity)
    );
    --fg-muted-2: hsla(
      var(--accent-h),
      var(--accent-s),
      calc(var(--accent-l) + (100% - var(--accent-l)) * 0.85),
      var(--fg-muted-2-opacity)
    );
    --glass-bg-1: hsla(
      var(--accent-h),
      calc(var(--accent-s) - var(--accent-s) * 0.6),
      calc(var(--accent-l) - var(--accent-l) * 0.8),
      var(--dim-opacity)
    );
    --glass-bg-2: hsla(
      var(--accent-h),
      calc(var(--accent-s) - var(--accent-s) * 0.5),
      calc(var(--accent-l) - var(--accent-l) * 0.7),
      var(--dim-opacity)
    );
    --crt-bg: radial-gradient(
      hsl(
        var(--accent-h),
        calc(var(--accent-s) - var(--accent-s) * 0.5),
        calc(var(--accent-l) - var(--accent-l) * 0.7)
      ),
      hsl(
          var(--accent-h),
          calc(var(--accent-s) - var(--accent-s) * 0.5),
          calc(var(--accent-l) - var(--accent-l) * 0.9)
        )
        80%,
      hsl(
        var(--accent-h),
        calc(var(--accent-s) - var(--accent-s) * 0.5),
        calc(var(--accent-l) - var(--accent-l) * 0.95)
      )
    );
    color-scheme: dark;
  }
}

*,
:after,
:before {
  vertical-align: baseline;
  box-sizing: border-box;
  margin: 0;
  border: none;
  background: none;
  padding: 0;
  color: inherit;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

button,
select {
  appearance: none;
}

body {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  width: 100%;
  min-height: 100vh;
  line-height: 1.5;
}

a,
button,
summary,
input[type=button],
input[type=checkbox],
input[type=color],
input[type=file],
input[type=image],
input[type=radio],
input[type=range],
input[type=reset],
input[type=submit],
label,
select {
  cursor: pointer;
}

article,
aside,
audio,
canvas,
details,
figcaption,
figure,
footer,
header,
main,
nav,
rt,
ruby,
section,
summary {
  display: block;
}

bdi,
mark,
meter,
output,
progress,
time {
  display: inline-block;
}

[hidden],
datalist,
dialog:not([open]),
rp {
  display: none !important;
}

embed,
iframe,
img,
object,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

blockquote,
q {
  quotes: none;
}

blockquote:after,
blockquote:before,
q:after,
q:before {
  content: none;
}

strong {
  font-weight: 700;
}

em {
  font-style: italic;
}

code,
kbd,
pre,
samp {
  font-family: monospace;
}

sub {
  vertical-align: sub;
}

sup {
  vertical-align: super;
}

small {
  font-size: small;
}

table {
  border-collapse: collapse;
}

@keyframes slide-in-up {
  from {
    transform: translateY(-1rem);
    opacity: 0;
  }
}
@keyframes slide-in-left {
  from {
    transform: translateX(1rem);
    opacity: 0;
  }
}
@keyframes slide-in-right {
  from {
    transform: translateX(-1rem);
    opacity: 0;
  }
}
@keyframes slide-in-up-longer {
  from {
    transform: translateY(-2rem);
    opacity: 0;
  }
}
@keyframes slide-in-down-longer {
  from {
    transform: translateY(2rem);
    opacity: 0;
  }
}
@keyframes slide-in-left-longer {
  from {
    transform: translateX(-2rem);
    opacity: 0;
  }
}
@keyframes slide-in-right-longer {
  from {
    transform: translateX(2rem);
    opacity: 0;
  }
}
@keyframes slide-out-down-longer {
  to {
    transform: translateY(-2rem);
    opacity: 0;
  }
}
@keyframes expand-up-left {
  from {
    transform: scale(0.5) translate(-1rem, -1rem);
    opacity: 0;
  }
}
@keyframes expand-up-right {
  from {
    transform: scale(0.5) translate(1rem, -1rem);
    opacity: 0;
  }
}
@keyframes expand-down-left {
  from {
    transform: scale(0.5) translate(-1rem, 1rem);
    opacity: 0;
  }
}
@keyframes expand-down-right {
  from {
    transform: scale(0.5) translate(1rem, 1rem);
    opacity: 0;
  }
}
:target:not(#main-content) {
  scroll-margin-block-start: 6.5rem;
}

:focus-visible,
:target:not(#main-content) {
  animation: focus-in var(--transition);
  outline: 0.125rem solid var(--accent-color);
  outline-offset: 0.125rem;
}
@keyframes focus-in {
  from {
    outline: 0.5rem solid transparent;
    outline-offset: 0.25rem;
  }
}

::selection {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--bg-color);
  color: var(--fg-color);
  font-family: var(--font-sans-serif), var(--font-system-ui), var(--font-emoji);
  overflow-wrap: break-word;
}
@supports (min-height: 100dvh) {
  body {
    min-height: 100dvh;
  }
}

@media (prefers-reduced-motion) {
  *,
  *::before,
  *::after {
    animation-duration: 0s !important;
    transition-duration: 0s !important;
  }
}
@-moz-document url-prefix() {
  @media only screen and (max-width: 960px) {
    .firefox-unblur,
    .firefox-unblur::before,
    .firefox-unblur::after {
      backdrop-filter: none !important;
    }
  }
}
p,
ul,
ol,
dl,
blockquote,
pre {
  margin-block: 1rem;
}

ul ul,
ul ol,
ol ul,
ol ol {
  margin-block: 0;
}

p {
  text-wrap: pretty;
  overflow-wrap: break-word;
}

:disabled,
[aria-disabled=true] {
  opacity: var(--disabled-opacity);
  cursor: not-allowed;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  transition-duration: var(--transition);
  transition-property: text-shadow, font-weight;
  margin-block: 2rem 1rem;
  color: var(--accent-color);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  font-variation-settings: "FLAR" 100;
  letter-spacing: -0.05em;
  text-decoration: underline;
  text-decoration-color: var(--bg-muted-1);
  text-decoration-thickness: 0.125em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
h1:target,
h2:target,
h3:target,
h4:target,
h5:target,
h6:target {
  animation: none !important;
  outline: none !important;
  font-weight: var(--font-weight-light);
  text-shadow: var(--text-shadow-glow);
}

h1 {
  font-size: var(--font-size-xxx-large);
}

h2 {
  font-size: var(--font-size-xx-large);
}

h3 {
  font-size: var(--font-size-x-large);
}

h4 {
  font-size: var(--font-size-large);
}

h5 {
  font-size: var(--font-size-medium);
}

h6 {
  font-size: var(--font-size-small);
}

@media only screen and (max-width: 480px) {
  h1 {
    font-size: var(--font-size-xx-large);
  }
  h2 {
    font-size: var(--font-size-x-large);
  }
  h3 {
    font-size: var(--font-size-large);
  }
  h4 {
    font-size: var(--font-size-medium);
  }
  h5 {
    font-size: var(--font-size-small);
  }
  h6 {
    font-size: var(--font-size-x-small);
  }
}
small {
  color: var(--fg-muted-2);
  font-size: var(--font-size-small);
}

abbr[title] {
  cursor: help;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 0.0625rem;
}

figcaption {
  color: var(--fg-muted-2);
  font-size: var(--font-size-small);
  text-align: center;
}

blockquote {
  margin: 1rem 0;
  border-inline-start: 0.25rem solid var(--accent-color);
  border-start-start-radius: 0.25rem;
  border-end-start-radius: 0.25rem;
  padding-inline-start: 0.75rem;
  color: var(--fg-muted-2);
}

pre,
code,
kbd,
samp {
  font-family: var(--font-monospace), var(--font-ui-monospace);
}

pre {
  margin: 1rem 0;
  box-shadow: var(--edge-highlight), var(--shadow);
  border-radius: var(--rounded-corner);
  background-color: var(--bg-muted-1);
  padding: 0.75rem 1rem;
  overflow-x: auto;
  scrollbar-width: thin;
  line-height: 1.25;
}

code:not(pre code),
mark,
samp,
q {
  transition: all var(--transition), transform var(--transition-bezier);
  box-shadow: var(--edge-highlight);
  border-radius: var(--rounded-corner-small);
  background-color: var(--bg-muted-1);
  padding-inline: 0.375rem;
  text-decoration: none;
}

code:not(pre code) {
  background-color: var(--red-bg-1);
  padding-block: 0.1875rem;
  color: var(--red-fg);
  font-size: var(--font-size-small);
}

mark {
  color: var(--accent-color);
}

del {
  color: var(--red-fg);
  text-decoration: line-through;
  text-decoration-thickness: 0.0625rem;
}

ins {
  color: var(--green-fg);
  text-decoration: underline;
  text-decoration-thickness: 0.0625rem;
}

samp {
  color: var(--fg-muted-2);
  font-size: var(--font-size-small);
}

q {
  color: var(--fg-muted-2);
  font-style: italic;
}

u {
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--red-fg);
  text-decoration-thickness: 0.0625rem;
}

progress {
  appearance: none;
  box-shadow: var(--edge-highlight);
  border: none;
  border-radius: 9999px;
  background-color: var(--bg-muted-1);
  padding: 0.25rem;
  width: 100%;
  height: 1rem;
  color: var(--accent-color);
}
progress:indeterminate {
  background-color: var(--bg-muted-1);
}
progress:indeterminate::-moz-progress-bar {
  background-color: transparent;
}
progress::-webkit-progress-bar {
  background-color: transparent;
}
progress::-moz-progress-bar {
  border-radius: 9999px;
  background-color: var(--accent-color);
}
progress::-webkit-progress-value {
  border-radius: 9999px;
  background-color: var(--accent-color);
}

kbd {
  display: inline-block;
  transition-duration: var(--transition);
  transition-property: transform, box-shadow, background-color;
  cursor: pointer;
  box-shadow: var(--edge-highlight), inset 0 -0.125rem 0 var(--bg-muted-2);
  border-radius: var(--rounded-corner-small);
  background-color: var(--bg-muted-1);
  padding: 0 0.375rem;
  font-size: var(--font-size-small);
}
kbd:active {
  transform: translateY(0.125rem);
  box-shadow: inset 0 0.0625rem 0 var(--bg-muted-2);
  background-color: var(--bg-muted-2);
}

a {
  color: var(--accent-color);
  font-weight: var(--font-weight-semi-bold);
  text-decoration-color: var(--accent-highlight);
  text-decoration-thickness: 0.0625rem;
}
a:hover {
  text-decoration-style: wavy;
}

hr {
  margin: 2rem auto;
  border: 0.125rem solid var(--bg-muted-2);
  border-radius: 9999px;
}

dt {
  font-weight: var(--font-weight-semi-bold);
}

dd {
  margin-inline-start: 1.5rem;
  margin-block-end: 1rem;
}

aside {
  float: inline-end;
  margin-inline-start: 1rem;
  margin-block-end: 1rem;
  box-shadow: var(--edge-highlight), var(--shadow);
  border-radius: var(--rounded-corner);
  background-color: var(--bg-muted-1);
  padding: 1rem;
  width: calc(var(--content-width) / 3);
}
@media only screen and (max-width: 720px) {
  aside {
    float: none;
    margin-inline-start: 0;
    width: 100%;
  }
}
aside :first-child {
  margin-block-start: 0;
}
aside :last-child {
  margin-block-end: 0;
}

details {
  display: flow-root;
  transition: padding-block-end var(--transition);
  margin-block-end: 1rem;
  box-shadow: var(--edge-highlight), var(--shadow);
  border-radius: var(--rounded-corner);
  background-color: var(--bg-muted-1);
  padding: 0.75rem 1rem;
}
details::details-content {
  display: block;
  opacity: 0;
  transition-behavior: allow-discrete;
  transition-duration: var(--transition);
  transition-property: opacity, block-size, content-visibility;
  block-size: 0;
  overflow: hidden;
}
details[open] {
  padding-block-end: 1rem;
}
details[open]::details-content {
  opacity: 1;
  block-size: auto;
  block-size: calc-size(auto, size);
}
details[open] summary {
  color: var(--accent-color);
}
details[open] summary::before {
  transform: scaleY(-1);
}
@supports not (block-size: calc-size(auto, size)) {
  details[open] summary ~ * {
    animation: slide-in-up var(--transition-bezier);
  }
}
details summary {
  transition: var(--transition);
  color: var(--fg-muted-1);
  font-weight: var(--font-weight-semi-bold);
  list-style: none;
}
details summary::-webkit-details-marker {
  display: none;
}
details summary::before {
  -webkit-mask-image: var(--icon);
  -webkit-mask-size: cover;
  display: block;
  mask-image: var(--icon);
  mask-size: cover;
  background-color: currentColor;
  width: 1em;
  height: 1em;
  content: "";
  --icon: var(--icon-caret-down);
  display: inline-block;
  vertical-align: -0.125rem;
  transition: all var(--transition), transform var(--transition-bezier);
  margin-inline-end: 0.25rem;
}
details > :last-child, details > :last-child img {
  margin-block-end: 0;
}

figure {
  margin-inline: 0;
}

ol,
ul {
  padding-inline-start: 1.5rem;
}

li {
  margin-block: 0.25rem;
  padding-inline-start: 0.25rem;
}
li::marker {
  color: var(--accent-color);
  font-weight: var(--font-weight-semi-bold);
}

b,
strong {
  font-weight: var(--font-weight-semi-bold);
}

#site-footer {
  --padding: 1rem;
  display: flex;
  grid-area: footer;
  gap: 1rem;
  margin-block: 3.25rem 1rem;
  border-block-start: 0.0625rem solid var(--bg-muted-2);
  padding: 1rem;
  width: 100%;
  min-width: 0;
  max-width: calc(var(--content-width) + var(--padding) * 2);
}
@media only screen and (max-width: 480px) {
  #site-footer {
    flex-direction: column-reverse;
  }
}
#site-footer > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1rem;
}
#site-footer > div p {
  margin: 0;
}
#site-footer > div:nth-of-type(1) {
  color: var(--fg-muted-2);
  font-size: var(--font-size-small);
}
#site-footer > div:nth-of-type(2) {
  justify-content: space-between;
  align-items: flex-end;
  text-align: end;
}
@media only screen and (max-width: 480px) {
  #site-footer > div:nth-of-type(2) {
    align-items: normal;
    text-align: start;
  }
}
#site-footer a.external::after {
  margin-inline-start: 0.25rem;
}
#site-footer .link {
  transition: all var(--transition), transform var(--transition-bezier);
  box-shadow: var(--edge-highlight);
  border-radius: var(--rounded-corner-small);
  background-color: var(--bg-muted-1);
  padding-inline: 0.375rem;
  text-decoration: none;
  display: inline-block;
  line-height: 1.5rem;
}
#site-footer .link:hover {
  background-color: var(--bg-muted-2);
}
#site-footer .link:active {
  transform: var(--active);
}
#site-footer .webrings {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-block: 0;
  padding-inline-start: 0;
  list-style: none;
}
#site-footer .webring {
  display: flex;
  gap: 0.25rem;
  margin-block: 0;
  padding-inline-start: 0;
}
#site-footer .webring .random,
#site-footer .webring .previous,
#site-footer .webring .next {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 9999px;
  padding: 0.25rem;
  font-size: 1rem;
}
#site-footer .timestamp {
  color: var(--fg-muted-1);
  font-size: var(--font-size-xx-small);
  font-family: var(--font-monospace);
  text-transform: uppercase;
}
#site-footer .socials {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin: 0;
  padding-inline-start: 0;
  list-style: none;
}
@media only screen and (max-width: 480px) {
  #site-footer .socials {
    justify-content: normal;
  }
}
#site-footer .socials li {
  margin-block: 0;
  padding-inline-start: 0;
}
#site-footer .socials a {
  display: flex;
  transition: color var(--transition), transform var(--transition-bezier);
  height: fit-content;
  color: var(--fg-muted-1);
}
#site-footer .socials a:hover {
  color: var(--fg-muted-2);
}
#site-footer .socials a:active {
  transform: var(--active);
}
#site-footer .socials svg {
  fill: currentColor;
  width: 1.5rem;
  height: 1.5rem;
}

.full-bleed {
  transform: translateX(-50%);
  margin-inline-start: 50%;
  width: calc(100vw - var(--sidebar-width));
}
:root[dir*=rtl] .full-bleed {
  transform: translateX(50%);
}
@media only screen and (max-width: 960px) {
  .full-bleed {
    width: calc(100vw - 3.5rem);
  }
}

body {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-areas: "sidebar header" "sidebar banner" "sidebar main  " "sidebar footer";
  justify-items: center;
  transition: grid-template-columns var(--transition);
}
@media only screen and (max-width: 960px) {
  body {
    grid-template-columns: 0 1fr;
  }
}

#site-header {
  display: flex;
  position: sticky;
  grid-area: header;
  justify-content: space-between;
  align-items: center;
  gap: 0.25rem;
  z-index: 2;
  inset-block-start: 0;
  padding: 0.5rem;
  width: 100%;
  min-width: 0;
}
#site-header::before, #site-header::after {
  position: absolute;
  inset: 0;
  --mask-image: linear-gradient(
    to bottom,
    hsl(0, 0%, 0%) 0%,
    hsla(0, 0%, 0%, 0.987) 8.1%,
    hsla(0, 0%, 0%, 0.951) 15.5%,
    hsla(0, 0%, 0%, 0.896) 22.5%,
    hsla(0, 0%, 0%, 0.825) 29%,
    hsla(0, 0%, 0%, 0.741) 35.3%,
    hsla(0, 0%, 0%, 0.648) 41.2%,
    hsla(0, 0%, 0%, 0.55) 47.1%,
    hsla(0, 0%, 0%, 0.45) 52.9%,
    hsla(0, 0%, 0%, 0.352) 58.8%,
    hsla(0, 0%, 0%, 0.259) 64.7%,
    hsla(0, 0%, 0%, 0.175) 71%,
    hsla(0, 0%, 0%, 0.104) 77.5%,
    hsla(0, 0%, 0%, 0.049) 84.5%,
    hsla(0, 0%, 0%, 0.013) 91.9%,
    hsla(0, 0%, 0%, 0) 100%
  );
  mask-image: var(--mask-image);
  -webkit-mask-image: var(--mask-image);
  inset-block-end: -100%;
  pointer-events: none;
  content: "";
}
#site-header::before {
  z-index: -2;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}
#site-header::after {
  z-index: -1;
  background-color: var(--bg-color);
}
#site-header .title {
  margin-inline: 0.75rem;
  min-width: 0;
  overflow: hidden;
  color: var(--fg-muted-2);
  font-size: var(--font-size-small);
  line-height: 2rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#site-header .buttons {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.25rem;
  margin: 0;
  box-shadow: var(--edge-highlight), var(--shadow-glass);
  border-radius: 1.125rem;
  background-color: var(--glass-bg-1);
  padding: 0.25rem;
  list-style: none;
}
#site-header .buttons li {
  flex: 0;
  margin-block: 0;
  padding-inline-start: 0;
}
#site-header .buttons > li {
  height: fit-content;
  line-height: 0;
}
#site-header .buttons button,
#site-header .buttons details {
  box-shadow: none;
  background-color: transparent;
  line-height: inherit;
}
#site-header .buttons button .icon,
#site-header .buttons details .icon {
  margin-inline-end: 0;
  box-shadow: none;
  background-color: transparent;
  padding: 0;
}
#site-header .buttons button,
#site-header .buttons summary {
  border-radius: 50%;
  padding: 0.375rem;
}
#site-header .buttons button:hover,
#site-header .buttons summary:hover {
  box-shadow: var(--edge-highlight);
  background-color: var(--bg-muted-1);
  color: var(--fg-muted-2);
}
#site-header .buttons button:active,
#site-header .buttons summary:active {
  transform: var(--active);
}
#site-header .buttons details {
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}
#site-header .buttons button {
  font-size: var(--font-size-medium);
}
#site-header .buttons summary:hover {
  box-shadow: var(--edge-highlight);
  background-color: var(--bg-muted-1);
}
#site-header .buttons summary::before {
  display: none;
}
#site-header .buttons details {
  display: block;
  position: relative;
  margin-block-end: 0;
}
#site-header .buttons details::details-content {
  block-size: auto;
}
#site-header .buttons details[open]::details-content {
  block-size: auto;
}
#site-header .buttons details[open] summary {
  color: var(--fg-muted-1);
}
#site-header .buttons details[open] summary:hover {
  color: var(--fg-muted-2);
}
@supports not (block-size: calc-size(auto, size)) {
  #site-header .buttons details[open] summary ~ * {
    animation: none;
  }
}

.buttons .dropdown {
  display: flex;
  position: absolute;
  flex-direction: column;
  gap: 0.25rem;
  transform-origin: top right;
  z-index: 1;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  animation: expand-up-right var(--transition-bezier);
  inset-block-start: calc(100% + 0.75rem);
  inset-inline-end: -0.25rem;
  box-shadow: var(--edge-highlight), var(--shadow-glass);
  border-radius: calc(var(--rounded-corner) + 0.25rem);
  background-color: var(--glass-bg-1);
  padding: 0.25rem;
  width: max-content;
  min-width: 8rem;
  list-style: none;
}
:root[dir*=rtl] .buttons .dropdown {
  transform-origin: top left;
  animation: expand-up-left var(--transition-bezier);
}
.buttons .dropdown li {
  flex: 1;
}
.buttons .dropdown a {
  box-shadow: none;
  border-radius: var(--rounded-corner);
  background-color: transparent;
  padding: 0.375rem 0.75rem;
  width: 100%;
}
.buttons .dropdown a:hover {
  box-shadow: var(--edge-highlight);
  background-color: var(--bg-muted-1) !important;
}

#site-sidebar-controls {
  display: flex;
  flex-shrink: 0;
  gap: 0.25rem;
  transition: width var(--transition), visibility var(--transition);
  margin-block: 0;
  box-shadow: var(--edge-highlight), var(--shadow-glass);
  border-radius: 1.125rem;
  background-color: var(--glass-bg-1);
  padding: 0.25rem;
  height: fit-content;
  line-height: 0;
  list-style: none;
}
@media only screen and (max-width: 960px) {
  #site-sidebar-controls {
    width: 2.25rem;
  }
  #site-sidebar-controls:has(#expand-sidebar:checked) {
    width: 6.25rem;
  }
  #site-sidebar-controls:has(#expand-sidebar:checked) #site-sidebar-modes {
    transform: none;
    visibility: visible;
    opacity: 1;
  }
}
#site-sidebar-controls ul {
  padding-inline-start: 0;
  list-style: none;
}
#site-sidebar-controls li {
  display: inline-block;
  margin-block: 0;
  padding-inline-start: 0;
}
#site-sidebar-controls li label {
  display: inline-block;
  transition: box-shadow var(--transition), background-color var(--transition), color var(--transition), transform var(--transition-bezier);
  cursor: pointer;
  border-radius: 50%;
  padding: 0.375rem;
  height: fit-content;
  color: var(--fg-muted-1);
  line-height: 0;
}
#site-sidebar-controls li label:hover {
  box-shadow: var(--edge-highlight);
  background-color: var(--bg-muted-1);
  color: var(--fg-muted-2);
}
#site-sidebar-controls li label:active {
  transform: var(--active);
}
#site-sidebar-controls li input[type=radio] + label {
  position: relative;
  z-index: 1;
}
#site-sidebar-controls li input[type=radio] + label::before {
  box-shadow: var(--edge-highlight), var(--shadow-glow);
  background-image: linear-gradient(to bottom right, var(--accent-color), var(--accent-highlight));
  color: var(--contrast-color);
  text-shadow: var(--text-shadow-glow);
  position: absolute;
  opacity: 0;
  z-index: -1;
  transition: opacity var(--transition), box-shadow var(--transition), background-color var(--transition);
  inset: 0;
  border-radius: inherit;
  content: "";
}
#site-sidebar-controls li input[type=radio]:checked + label {
  color: var(--contrast-color);
}
#site-sidebar-controls li input[type=radio]:checked + label:hover {
  box-shadow: none;
  background-color: transparent;
}
#site-sidebar-controls li input[type=radio]:checked + label:hover::before {
  box-shadow: var(--edge-highlight);
  background-color: var(--accent-color);
}
#site-sidebar-controls li input[type=radio]:checked + label::before {
  opacity: 1;
}
#site-sidebar-controls li input[type=radio]:focus-visible + label,
#site-sidebar-controls li input[type=checkbox]:focus-visible + label {
  animation: focus-in var(--transition);
  outline: 0.125rem solid var(--accent-color);
  outline-offset: 0.125rem;
}
@supports not selector(:focus-visible) {
  #site-sidebar-controls li input[type=radio]:focus + label,
  #site-sidebar-controls li input[type=checkbox]:focus + label {
    animation: focus-in var(--transition);
    outline: 0.125rem solid var(--accent-color);
    outline-offset: 0.125rem;
  }
}
#site-sidebar-controls #expand-sidebar-li {
  display: none;
}
@media only screen and (max-width: 960px) {
  #site-sidebar-controls #expand-sidebar-li {
    display: inline-block;
  }
}

#site-sidebar-modes {
  display: flex;
  gap: 0.25rem;
  transform-origin: left;
  transition: visibility var(--transition), opacity var(--transition), transform var(--transition);
}
@media only screen and (max-width: 960px) {
  #site-sidebar-modes {
    transform: translateX(-2.25rem);
    visibility: hidden;
    opacity: 0;
  }
}

#main-content {
  --padding: 1rem;
  grid-area: main;
  transform-origin: 50% 50vh;
  animation: fade-in-zoom var(--transition-bezier-longer);
  margin-block-start: 3.25rem;
  padding-inline: 1rem;
  width: 100%;
  min-width: 0;
  max-width: calc(var(--content-width) + var(--padding) * 2);
}
@supports (transform-origin: 50% 50dvh) {
  #main-content {
    transform-origin: 50% 50dvh;
  }
}
#main-content > :first-child {
  margin-block-start: 0;
}
#main-content > :last-child {
  margin-block-end: 0;
}
@keyframes fade-in-zoom {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
}

:target ~ #main-content {
  animation-name: none;
}

#↑:target ~ #main-content,
#up:target ~ #main-content {
  animation-name: slide-in-up-longer;
}

#↓:target ~ #main-content,
#down:target ~ #main-content {
  animation-name: slide-in-down-longer;
}

#←:target ~ #main-content,
#left:target ~ #main-content {
  animation-name: slide-in-left-longer;
}

#→:target ~ #main-content,
#right:target ~ #main-content {
  animation-name: slide-in-right-longer;
}

#site-sidebar {
  display: flex;
  position: sticky;
  grid-area: sidebar;
  flex-direction: column;
  z-index: 3;
  transition-duration: var(--transition);
  transition-property: visibility, transform, inset-block-start, box-shadow, border-inline-end, border-start-end-radius, border-end-end-radius, height;
  inset-block-start: 0;
  inset-inline-start: 0;
  border-inline-end: 0.0625rem solid var(--bg-muted-2);
  width: var(--sidebar-width);
  height: 100vh;
}
@supports (height: 100dvh) {
  #site-sidebar {
    height: 100dvh;
  }
}
@media only screen and (max-width: 960px) {
  #site-sidebar {
    transform: translateX(-100%);
    visibility: hidden;
    inset-block-start: 3.25rem;
    box-shadow: var(--edge-highlight), var(--shadow);
    border-inline-end: 0 solid transparent;
    border-start-end-radius: var(--rounded-corner);
    border-end-end-radius: var(--rounded-corner);
    height: calc(100vh - 3.75rem);
  }
  :root[dir*=rtl] #site-sidebar {
    transform: translateX(100%);
  }
  @supports (height: 100dvh) {
    #site-sidebar {
      height: calc(100dvh - 3.75rem);
    }
  }
  #site-header:has(#expand-sidebar:checked) ~ #site-sidebar {
    transform: none;
    visibility: visible;
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    background-color: var(--glass-bg-1);
  }
}
#site-sidebar-content {
  display: flex;
  position: relative;
  flex: 1;
  overflow: hidden;
}

#site-sidebar-header {
  display: flex;
  align-items: center;
  transform-origin: 1.375rem 50%;
  transition: box-shadow var(--transition), background-color var(--transition), color var(--transition), transform var(--transition-bezier);
  margin: 1rem;
  margin-block-end: 0;
  border-radius: 1.375rem;
  padding: 0.25rem;
  padding-inline-end: 0.75rem;
  min-width: 0;
  color: var(--fg-muted-1);
  text-decoration: none;
}
#site-sidebar-header:hover {
  box-shadow: var(--edge-highlight);
  background-color: var(--bg-muted-1);
  color: var(--fg-muted-2);
}
#site-sidebar-header:hover .icon {
  background-color: var(--bg-muted-2);
}
#site-sidebar-header:active {
  transform: var(--active);
}
#site-sidebar-header img {
  margin: 0;
}
#site-sidebar-header img,
#site-sidebar-header .icon {
  margin-inline-end: 0.5rem;
  border-radius: 50%;
}
#site-sidebar-header img {
  width: 2.25rem;
  height: 2.25rem;
}
#site-sidebar-header .icon {
  transition: background-color var(--transition);
  box-shadow: var(--edge-highlight);
  background-color: var(--bg-muted-1);
  padding: 0.5rem;
  font-size: 1.25rem;
}
#site-sidebar-header div {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  line-height: 1.25;
}
#site-sidebar-header div span:nth-of-type(1) {
  overflow: hidden;
  font-size: var(--font-size-small);
  text-overflow: ellipsis;
  white-space: nowrap;
}
#site-sidebar-header div span:nth-of-type(2) {
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-x-small);
}

#sidebar-nav,
#sidebar-meta {
  display: flex;
  flex: 1;
  flex-direction: column;
  transition: visibility var(--transition), opacity var(--transition), filter var(--transition), transform var(--transition-bezier);
  padding: 1rem;
  width: var(--sidebar-width);
  min-width: 100%;
  overflow: hidden auto;
  scrollbar-width: thin;
}

#site-header:has(#site-sidebar-modes #mode-meta:checked) + #site-sidebar #sidebar-nav {
  transform: perspective(var(--content-width)) rotateY(15deg);
  opacity: var(--disabled-opacity);
  filter: blur(0.25rem);
}
#site-header:has(#site-sidebar-modes #mode-meta:checked) + #site-sidebar #sidebar-meta {
  transform: perspective(var(--content-width));
  visibility: visible;
  opacity: 1;
  filter: none;
}

#sidebar-nav {
  transform: perspective(var(--content-width));
  transform-origin: left;
}
:root[dir*=rtl] #sidebar-nav {
  transform-origin: right;
}
#sidebar-nav a {
  display: flex;
  flex: 1;
  align-items: center;
  transform-origin: 1.375rem 50%;
  transition: box-shadow var(--transition), background-color var(--transition), color var(--transition), transform var(--transition-bezier);
  border-radius: 1.375rem;
  padding: 0.25rem;
  padding-inline-end: 0.75rem;
  overflow: hidden;
  color: var(--fg-muted-1);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#sidebar-nav a:hover {
  box-shadow: var(--edge-highlight);
  background-color: var(--bg-muted-1);
  color: var(--fg-muted-2);
}
#sidebar-nav a:hover .icon {
  background-color: var(--bg-muted-2);
}
#sidebar-nav a:active {
  transform: var(--active);
}
#sidebar-nav a[aria-current=page] {
  box-shadow: var(--edge-highlight);
  background-color: var(--bg-muted-1);
  color: var(--accent-color);
}
#sidebar-nav a[aria-current=page] .icon {
  box-shadow: var(--edge-highlight), var(--shadow-glow);
  background-image: linear-gradient(to bottom right, var(--accent-color), var(--accent-highlight));
  color: var(--contrast-color);
  text-shadow: var(--text-shadow-glow);
  text-shadow: none;
}
#sidebar-nav a[aria-current=page]:hover {
  background-color: var(--bg-muted-2);
}
#sidebar-nav a[aria-current=page]:hover .icon {
  box-shadow: var(--edge-highlight);
  background-color: var(--accent-color);
  color: var(--contrast-color);
}
#sidebar-nav a.new .icon {
  position: relative;
}
#sidebar-nav a.new .icon::after {
  position: absolute;
  inset-block-start: 0.0625rem;
  inset-inline-end: 0.0625rem;
  border-radius: 50%;
  background-color: var(--accent-color);
  width: 0.75rem;
  height: 0.75rem;
  content: "";
}
#sidebar-nav .icon {
  transition: background-color var(--transition), color var(--transition), box-shadow var(--transition);
  margin-inline-end: 0.5rem;
  box-shadow: var(--edge-highlight);
  border-radius: 50%;
  background-color: var(--bg-muted-1);
  padding: 0.5rem;
  font-size: 1.25rem;
}
#sidebar-nav .icon.fallback {
  width: 1.25rem;
  font-weight: var(--font-weight-semi-bold);
  font-size: var(--font-size-medium);
  line-height: 1.25rem;
  font-family: var(--font-monospace);
  text-align: center;
}
#sidebar-nav .icon.fallback::before {
  content: none;
}
#sidebar-nav details {
  flex: 1;
  margin-block-end: 0;
  box-shadow: none;
  border-radius: 0;
  background-color: transparent;
  padding: 0;
}
#sidebar-nav details[open] summary {
  transform: none;
  opacity: 1;
  box-shadow: none;
  background-color: transparent;
}
#sidebar-nav details[open] summary::before {
  transform: none;
}
@supports not (block-size: calc-size(auto, size)) {
  #sidebar-nav details[open] summary ~ * {
    animation: none;
  }
}
#sidebar-nav details summary {
  display: flex;
  position: relative;
  align-items: center;
  border-radius: 0;
  padding: 0.75rem 0;
  color: var(--fg-muted-1);
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-small);
  line-height: var(--font-size-small);
  white-space: nowrap;
}
#sidebar-nav details summary:hover {
  box-shadow: none;
  background-color: transparent;
}
#sidebar-nav details summary:active {
  transform: none;
}
#sidebar-nav details summary::before {
  position: absolute;
  transform: rotate(-90deg);
  transition: transform var(--transition-bezier);
  margin-inline-end: 0;
  inset-block: 0.5rem;
  inset-inline-end: 0;
  font-size: 1rem;
}
#sidebar-nav details summary .line {
  flex: 1;
  margin-inline: 0.5rem 1.5rem;
  background-color: var(--bg-muted-2);
  height: 0.0625rem;
}
#sidebar-nav details ul {
  margin-block: 0;
}
#sidebar-nav ul {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-block: auto;
  padding-inline-start: 0;
  list-style: none;
}
#sidebar-nav li {
  display: flex;
  transition: width var(--transition);
  margin-block: 0;
  padding-inline-start: 0;
  width: 100%;
}

#sidebar-meta {
  position: absolute;
  transform: perspective(var(--content-width)) rotateY(-30deg);
  transform-origin: left;
  visibility: hidden;
  opacity: 0;
  filter: blur(0.25rem);
  inset: 0;
}
:root[dir*=rtl] #sidebar-meta {
  transform-origin: right;
}
#sidebar-meta:has(> div:empty) .status-page {
  display: flex;
}
#sidebar-meta:has(> div:empty) > div {
  display: none;
}
#sidebar-meta > div {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-block: auto;
}
#sidebar-meta .card {
  background-color: var(--glass-bg-1);
}
#sidebar-meta .while-writing {
  display: inherit;
  position: relative;
  flex-direction: inherit;
  gap: inherit;
  margin: calc(-0.25rem - 0.0625rem);
  margin-block-start: 1rem;
  border: 0.0625rem solid var(--bg-muted-2);
  border-block-start: none;
  border-end-start-radius: calc(var(--rounded-corner) + 0.25rem + 0.0625rem);
  border-end-end-radius: calc(var(--rounded-corner) + 0.25rem + 0.0625rem);
  padding: 0.25rem;
}
#sidebar-meta .while-writing .card-title {
  display: flex;
  position: absolute;
  gap: 0.25rem;
  inset-block-start: calc(var(--rounded-corner-small) * -1);
  inset-inline: -0.0625rem;
  height: var(--rounded-corner-small);
}
#sidebar-meta .while-writing .card-title .line {
  border: 0.0625rem solid var(--bg-muted-2);
  border-block-end: none;
}
#sidebar-meta .while-writing .card-title .line:nth-of-type(1) {
  border-inline-end: none;
  border-start-start-radius: var(--rounded-corner);
  width: var(--rounded-corner);
}
#sidebar-meta .while-writing .card-title .line:nth-of-type(2) {
  flex: 1;
  border-inline-start: none;
  border-start-end-radius: var(--rounded-corner);
}
#sidebar-meta .while-writing .card-title .title {
  color: var(--fg-muted-2);
  font-size: var(--font-size-small);
  line-height: 0;
}
#sidebar-meta .weather {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  border-radius: 1.375rem;
  padding: 0.25rem;
  padding-inline-end: 1.25rem;
  line-height: 1;
}
#sidebar-meta .weather.cloudy {
  animation: perlin 12s linear infinite;
  background-image: url("/weather/perlin.png");
}
@media (prefers-color-scheme: dark) {
  #sidebar-meta .weather.cloudy {
    background-image: url("/weather/perlin-dark.png");
  }
}
#sidebar-meta .weather.showers {
  animation: rain 3s linear infinite;
  background-image: url("/weather/rain.svg");
}
@media (prefers-color-scheme: dark) {
  #sidebar-meta .weather.showers {
    background-image: url("/weather/rain-dark.svg");
  }
}
#sidebar-meta .weather.snowing {
  animation: snow 12s linear infinite;
  background-image: url("/weather/snow.svg");
}
@media (prefers-color-scheme: dark) {
  #sidebar-meta .weather.snowing {
    background-image: url("/weather/snow-dark.svg");
  }
}
#sidebar-meta .weather div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
#sidebar-meta .weather .title {
  color: inherit;
  font-size: var(--font-size-medium);
}
#sidebar-meta .weather .icon {
  box-shadow: var(--edge-highlight);
  border-radius: 50%;
  background-color: var(--bg-muted-1);
  padding: 0.5rem;
  font-size: 1.25rem;
}
#sidebar-meta .weather .condition {
  color: var(--fg-muted-2);
  font-size: var(--font-size-small);
}
@keyframes rain {
  to {
    background-position: 256px 320px;
  }
}
@keyframes perlin {
  to {
    background-position: -256px -64px;
  }
}
@keyframes snow {
  to {
    background-position: 256px 512px;
  }
}
#sidebar-meta .music {
  display: flex;
  position: relative;
  flex-direction: column;
  gap: 0.5rem;
  border-radius: 1rem;
}
#sidebar-meta .music::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  box-shadow: var(--edge-highlight);
  border-radius: inherit;
  max-height: 5rem;
  pointer-events: none;
  content: "";
}
#sidebar-meta .music .carousel {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  display: flex;
  margin-block: 0;
  box-shadow: var(--shadow);
  border-radius: inherit;
  background-color: var(--glass-bg-1);
  padding-inline-start: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  list-style: none;
}
#sidebar-meta .music .carousel li {
  display: flex;
  position: relative;
  flex-shrink: 0;
  gap: 1rem;
  margin-block: 0;
  outline: none;
  padding: 0.5rem;
  width: 100%;
  overflow: hidden;
  scroll-snap-align: start;
}
#sidebar-meta .music .carousel li.has-cover {
  animation: cover-alternate 60s ease-in-out infinite;
  background-image: var(--bg-overlay), var(--blurnail);
  background-position: center;
  background-size: 2000%;
}
@keyframes cover-alternate {
  from {
    background-position: 50% 0%;
  }
  12.5% {
    background-position: 100% 25%;
  }
  25% {
    background-position: 50% 50%;
  }
  37.5% {
    background-position: 100% 75%;
  }
  50% {
    background-position: 50% 100%;
  }
  62.5% {
    background-position: 0% 75%;
  }
  75% {
    background-position: 50% 50%;
  }
  87.5% {
    background-position: 0% 25%;
  }
  to {
    background-position: 50% 0%;
  }
}
#sidebar-meta .music .carousel li.has-cover .music-type {
  color: var(--fg-muted-neutral-1);
}
#sidebar-meta .music .carousel li.has-cover .music-artist {
  color: var(--fg-muted-neutral-2);
}
#sidebar-meta .music .carousel li > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.25rem;
  margin-inline-end: 0.5rem;
  margin-block: 0.25rem;
  min-width: 0;
  min-width: 0;
  line-height: 1;
}
#sidebar-meta .music .carousel li a {
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
}
#sidebar-meta .music .music-type {
  color: var(--fg-muted-1);
  font-size: var(--font-size-xx-small);
}
#sidebar-meta .music .music-artist {
  color: var(--fg-muted-2);
  font-size: var(--font-size-small);
}
#sidebar-meta .music .title {
  color: var(--fg-color);
  font-size: var(--font-size-medium);
}
#sidebar-meta .music img {
  margin: 0;
  border-radius: var(--rounded-corner-small);
}
#sidebar-meta .music-paginator {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  margin-inline: 1rem;
  margin-block: 0;
  padding-inline-start: 0;
  list-style: none;
}
#sidebar-meta .music-paginator li {
  display: flex;
  margin-block: 0;
  padding-inline-start: 0;
  height: 0.75rem;
}
#sidebar-meta .music-paginator a {
  transition: width var(--transition), height var(--transition), background-color var(--transition), transform var(--transition-bezier);
  margin-block: auto;
  border-radius: 0.375rem;
  background-color: var(--fg-muted-1);
  width: 1.5rem;
  height: 0.375rem;
}
#sidebar-meta .music-paginator a:hover {
  background-color: var(--fg-muted-2);
}
#sidebar-meta .music-paginator a:active {
  transform: var(--active);
}
#sidebar-meta .music-paginator a.active {
  background-color: var(--fg-color);
  width: 0.75rem;
  height: 0.75rem;
}
#sidebar-meta .toc {
  display: flex;
  flex-direction: column;
  max-height: calc(var(--content-width) / 3);
}
@media only screen and (max-width: 720px) {
  #sidebar-meta .toc {
    max-height: calc(var(--content-width) / 2);
  }
}
#sidebar-meta .toc .title {
  margin-block-end: 1rem;
}
#sidebar-meta .toc .overshoot {
  flex: 1;
  margin: -1rem;
  padding: 1rem;
  overflow: auto;
  scrollbar-width: thin;
}
#sidebar-meta .toc .overshoot ul {
  margin-block: 0;
  padding-inline-start: 1rem;
  color: var(--fg-muted-1);
  font-size: var(--font-size-small);
}
#sidebar-meta .toc .overshoot li {
  margin-block: 0;
  padding-inline-start: 0;
}
#sidebar-meta .toc .overshoot li::marker {
  color: inherit;
}
#sidebar-meta .toc .overshoot a {
  color: inherit;
  text-decoration: none;
}
#sidebar-meta .status-page {
  display: none;
  margin-block: auto;
  text-align: center;
}
#sidebar-meta .status-page .title,
#sidebar-meta .status-page p {
  color: var(--fg-muted-2);
}
#sidebar-meta .status-page .icon {
  margin-inline: auto;
  color: var(--fg-muted-1);
  font-size: 3rem;
}
#sidebar-meta .status-page p {
  margin-block: 0;
}

[class^=markdown-alert] {
  display: flow-root;
  position: relative;
}
[class^=markdown-alert]::before {
  margin-inline-start: 1.5rem;
  content: var(--alert-title);
  color: var(--accent-color);
  font-weight: var(--font-weight-semi-bold);
}
[class^=markdown-alert]::after {
  -webkit-mask-image: var(--icon);
  -webkit-mask-size: cover;
  display: block;
  mask-image: var(--icon);
  mask-size: cover;
  background-color: currentColor;
  width: 1em;
  height: 1em;
  content: "";
  --icon: var(--alert-icon);
  position: absolute;
  margin-inline-end: 0.25rem;
  inset-block-start: 0.0625rem;
  inset-inline-start: 0.75rem;
  color: var(--accent-color);
  font-size: 1.25rem;
}
[class^=markdown-alert] > :first-child {
  margin-block-start: 0.25rem;
}
[class^=markdown-alert] > :last-child {
  margin-block-end: 0;
}

.markdown-alert-note, .markdown-alert-tip, .markdown-alert-important, .markdown-alert-warning, .markdown-alert-caution, .markdown-alert-red, .markdown-alert-orange, .markdown-alert-yellow, .markdown-alert-green, .markdown-alert-blue, .markdown-alert-purple {
  --accent-color: hsl(
    var(--accent-light-h),
    var(--accent-light-s),
    var(--accent-light-l)
  );
  --accent-h: var(--accent-light-h);
  --accent-s: var(--accent-light-s);
  --accent-l: var(--accent-light-l);
  --bg-color: hsl(
    var(--accent-h),
    calc(var(--accent-s) - var(--accent-s) * 0.6),
    calc(var(--accent-l) + (100% - var(--accent-l)) * 0.8)
  );
  --fg-muted-1: hsla(
    var(--accent-h),
    var(--accent-s),
    calc(var(--accent-l) - var(--accent-l) * 0.85),
    var(--fg-muted-1-opacity)
  );
  --fg-muted-2: hsla(
    var(--accent-h),
    var(--accent-s),
    calc(var(--accent-l) - var(--accent-l) * 0.85),
    var(--fg-muted-2-opacity)
  );
  --glass-bg-1: hsla(
    var(--accent-h),
    calc(var(--accent-s) - var(--accent-s) * 0.7),
    calc(var(--accent-l) + (100% - var(--accent-l)) * 0.9),
    var(--dim-opacity)
  );
  --glass-bg-2: hsla(
    var(--accent-h),
    calc(var(--accent-s) - var(--accent-s) * 0.6),
    calc(var(--accent-l) + (100% - var(--accent-l)) * 0.8),
    var(--dim-opacity)
  );
  --crt-bg: radial-gradient(
    hsl(
      var(--accent-h),
      calc(var(--accent-s) - var(--accent-s) * 0.5),
      calc(var(--accent-l) + (100% - var(--accent-l)) * 0.9)
    ),
    hsl(
        var(--accent-h),
        calc(var(--accent-s) - var(--accent-s) * 0.5),
        calc(var(--accent-l) + (100% - var(--accent-l)) * 0.75)
      )
      80%,
    hsl(
      var(--accent-h),
      calc(var(--accent-s) - var(--accent-s) * 0.5),
      calc(var(--accent-l) + (100% - var(--accent-l)) * 0.65)
    )
  );
  --accent-highlight: hsla(
    var(--accent-h),
    var(--accent-s),
    var(--accent-l),
    var(--disabled-opacity)
  );
  --bg-muted-1: hsla(
    var(--accent-h),
    var(--accent-s),
    var(--accent-l),
    var(--color-opacity-1)
  );
  --bg-muted-2: hsla(
    var(--accent-h),
    var(--accent-s),
    var(--accent-l),
    var(--color-opacity-2)
  );
  --l: clamp(0, (l / 0.623 - 1) * -infinity, 1);
  --a: calc(var(--l) + (var(--dim-opacity) * (1 - var(--l))));
  --contrast-color: oklch(from var(--accent-color) var(--l) 0 h / var(--a));
  --shadow-glow:
    0 0 0 0.0625rem var(--bg-muted-2),
    0 0.125rem 0.375rem 0.125rem var(--bg-muted-1),
    0 0.25rem 1.5rem 0.25rem var(--bg-muted-2);
  --shadow-glow-inset:
    inset 0 0 0 0.0625rem var(--bg-muted-2),
    inset 0 0.125rem 0.375rem 0.125rem var(--bg-muted-1),
    inset 0 0.25rem 1.5rem 0.25rem var(--bg-muted-2);
  --text-shadow-glow:
    var(--bg-muted-2) 0 0 0.25rem, var(--accent-color) 0 0 0.75rem;
}
@media (prefers-color-scheme: dark) {
  .markdown-alert-note, .markdown-alert-tip, .markdown-alert-important, .markdown-alert-warning, .markdown-alert-caution, .markdown-alert-red, .markdown-alert-orange, .markdown-alert-yellow, .markdown-alert-green, .markdown-alert-blue, .markdown-alert-purple {
    --accent-color: hsl(
      var(--accent-dark-h),
      var(--accent-dark-s),
      var(--accent-dark-l)
    );
    --accent-h: var(--accent-dark-h);
    --accent-s: var(--accent-dark-s);
    --accent-l: var(--accent-dark-l);
    --bg-color: hsl(
      var(--accent-h),
      calc(var(--accent-s) - var(--accent-s) * 0.7),
      calc(var(--accent-l) - var(--accent-l) * 0.9)
    );
    --fg-muted-1: hsla(
      var(--accent-h),
      var(--accent-s),
      calc(var(--accent-l) + (100% - var(--accent-l)) * 0.85),
      var(--fg-muted-1-opacity)
    );
    --fg-muted-2: hsla(
      var(--accent-h),
      var(--accent-s),
      calc(var(--accent-l) + (100% - var(--accent-l)) * 0.85),
      var(--fg-muted-2-opacity)
    );
    --glass-bg-1: hsla(
      var(--accent-h),
      calc(var(--accent-s) - var(--accent-s) * 0.6),
      calc(var(--accent-l) - var(--accent-l) * 0.8),
      var(--dim-opacity)
    );
    --glass-bg-2: hsla(
      var(--accent-h),
      calc(var(--accent-s) - var(--accent-s) * 0.5),
      calc(var(--accent-l) - var(--accent-l) * 0.7),
      var(--dim-opacity)
    );
    --crt-bg: radial-gradient(
      hsl(
        var(--accent-h),
        calc(var(--accent-s) - var(--accent-s) * 0.5),
        calc(var(--accent-l) - var(--accent-l) * 0.7)
      ),
      hsl(
          var(--accent-h),
          calc(var(--accent-s) - var(--accent-s) * 0.5),
          calc(var(--accent-l) - var(--accent-l) * 0.9)
        )
        80%,
      hsl(
        var(--accent-h),
        calc(var(--accent-s) - var(--accent-s) * 0.5),
        calc(var(--accent-l) - var(--accent-l) * 0.95)
      )
    );
  }
}
.markdown-alert-note::before {
  content: var(--alert-note-title);
}
.markdown-alert-note::after {
  --icon: var(--icon-info);
}
.markdown-alert-tip::before {
  content: var(--alert-tip-title);
}
.markdown-alert-tip::after {
  --icon: var(--icon-lightbulb);
}
.markdown-alert-important::before {
  content: var(--alert-important-title);
}
.markdown-alert-important::after {
  --icon: var(--icon-warning-diamond);
}
.markdown-alert-warning::before {
  content: var(--alert-warning-title);
}
.markdown-alert-warning::after {
  --icon: var(--icon-warning);
}
.markdown-alert-caution::before {
  content: var(--alert-caution-title);
}
.markdown-alert-caution::after {
  --icon: var(--icon-warning-octagon);
}
.markdown-alert-caution, .markdown-alert-red {
  --accent-h: var(--red-h);
  --accent-s: var(--red-s);
  --accent-l: var(--red-l);
  --accent-color: var(--red-fg);
}
.markdown-alert-orange {
  --accent-h: var(--orange-h);
  --accent-s: var(--orange-s);
  --accent-l: var(--orange-l);
  --accent-color: var(--orange-fg);
}
.markdown-alert-warning, .markdown-alert-yellow {
  --accent-h: var(--yellow-h);
  --accent-s: var(--yellow-s);
  --accent-l: var(--yellow-l);
  --accent-color: var(--yellow-fg);
}
.markdown-alert-tip, .markdown-alert-green {
  --accent-h: var(--green-h);
  --accent-s: var(--green-s);
  --accent-l: var(--green-l);
  --accent-color: var(--green-fg);
}
.markdown-alert-note, .markdown-alert-blue {
  --accent-h: var(--blue-h);
  --accent-s: var(--blue-s);
  --accent-l: var(--blue-l);
  --accent-color: var(--blue-fg);
}
.markdown-alert-important, .markdown-alert-purple {
  --accent-h: var(--purple-h);
  --accent-s: var(--purple-s);
  --accent-l: var(--purple-l);
  --accent-color: var(--purple-fg);
}

.article-details {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-block-end: 2rem;
  color: var(--fg-muted-2);
  font-size: var(--font-size-small);
}
.article-details .items {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.25rem 0.5rem;
}
.article-details .item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--rounded-corner-small);
}
.article-details a {
  color: inherit;
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-small);
  text-decoration-color: transparent;
}
.article-details a:hover {
  text-decoration-style: solid;
  text-decoration-color: var(--fg-muted-1);
}
.article-details .tooltip {
  cursor: help;
}
.article-details .icon {
  box-shadow: var(--edge-highlight);
  border-radius: var(--rounded-corner-small);
  background-color: var(--bg-muted-1);
  padding: 0.375rem;
  color: var(--accent-color);
  font-size: 1.25rem;
}
.article-details .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5rem;
  margin: 0;
  border-block-start: 0.0625rem solid var(--bg-muted-2);
  padding-inline-start: 0;
  padding-block-start: 0.5rem;
  width: 100%;
  list-style: none;
}
.article-details .tags li {
  display: flex;
  margin-block: 0;
  padding: 0;
}
.article-details .tags a::before {
  content: "#";
}

.article-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--content-width) / 2.5), 1fr));
  gap: 1rem;
  margin-block-start: 2rem;
}
.article-list.categories article {
  position: relative;
}
.article-list.categories article:hover .icon:last-child {
  transform: translateY(-50%) rotate(-10deg) scale(1.5);
}
.article-list.categories article .icon:last-child {
  position: absolute;
  transform: translateY(-50%);
  z-index: -1;
  transition: transform var(--transition-bezier);
  inset-block-start: 50%;
  inset-inline-end: -3rem;
  color: var(--bg-muted-1);
  font-size: 12rem;
}
.article-list article {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--edge-highlight), var(--shadow);
  border-radius: 1.25rem;
  background-color: var(--bg-muted-1);
  padding: 0;
  overflow: hidden;
}
.article-list article.draft {
  opacity: var(--disabled-opacity);
  filter: grayscale(1);
  transition-duration: var(--transition);
  transition-property: opacity, filter;
}
.article-list article.draft:hover {
  opacity: 1;
  filter: none;
}
.article-list article.has-banner.has-accent-color {
  background-image: var(--bg-overlay), var(--blurnail);
  background-position: center;
  background-size: cover;
}
.article-list article.has-accent-color {
  --accent-color: hsl(
    var(--accent-light-h),
    var(--accent-light-s),
    var(--accent-light-l)
  );
  --accent-h: var(--accent-light-h);
  --accent-s: var(--accent-light-s);
  --accent-l: var(--accent-light-l);
  --bg-color: hsl(
    var(--accent-h),
    calc(var(--accent-s) - var(--accent-s) * 0.6),
    calc(var(--accent-l) + (100% - var(--accent-l)) * 0.8)
  );
  --fg-muted-1: hsla(
    var(--accent-h),
    var(--accent-s),
    calc(var(--accent-l) - var(--accent-l) * 0.85),
    var(--fg-muted-1-opacity)
  );
  --fg-muted-2: hsla(
    var(--accent-h),
    var(--accent-s),
    calc(var(--accent-l) - var(--accent-l) * 0.85),
    var(--fg-muted-2-opacity)
  );
  --glass-bg-1: hsla(
    var(--accent-h),
    calc(var(--accent-s) - var(--accent-s) * 0.7),
    calc(var(--accent-l) + (100% - var(--accent-l)) * 0.9),
    var(--dim-opacity)
  );
  --glass-bg-2: hsla(
    var(--accent-h),
    calc(var(--accent-s) - var(--accent-s) * 0.6),
    calc(var(--accent-l) + (100% - var(--accent-l)) * 0.8),
    var(--dim-opacity)
  );
  --crt-bg: radial-gradient(
    hsl(
      var(--accent-h),
      calc(var(--accent-s) - var(--accent-s) * 0.5),
      calc(var(--accent-l) + (100% - var(--accent-l)) * 0.9)
    ),
    hsl(
        var(--accent-h),
        calc(var(--accent-s) - var(--accent-s) * 0.5),
        calc(var(--accent-l) + (100% - var(--accent-l)) * 0.75)
      )
      80%,
    hsl(
      var(--accent-h),
      calc(var(--accent-s) - var(--accent-s) * 0.5),
      calc(var(--accent-l) + (100% - var(--accent-l)) * 0.65)
    )
  );
  --accent-highlight: hsla(
    var(--accent-h),
    var(--accent-s),
    var(--accent-l),
    var(--disabled-opacity)
  );
  --bg-muted-1: hsla(
    var(--accent-h),
    var(--accent-s),
    var(--accent-l),
    var(--color-opacity-1)
  );
  --bg-muted-2: hsla(
    var(--accent-h),
    var(--accent-s),
    var(--accent-l),
    var(--color-opacity-2)
  );
  --l: clamp(0, (l / 0.623 - 1) * -infinity, 1);
  --a: calc(var(--l) + (var(--dim-opacity) * (1 - var(--l))));
  --contrast-color: oklch(from var(--accent-color) var(--l) 0 h / var(--a));
  --shadow-glow:
    0 0 0 0.0625rem var(--bg-muted-2),
    0 0.125rem 0.375rem 0.125rem var(--bg-muted-1),
    0 0.25rem 1.5rem 0.25rem var(--bg-muted-2);
  --shadow-glow-inset:
    inset 0 0 0 0.0625rem var(--bg-muted-2),
    inset 0 0.125rem 0.375rem 0.125rem var(--bg-muted-1),
    inset 0 0.25rem 1.5rem 0.25rem var(--bg-muted-2);
  --text-shadow-glow:
    var(--bg-muted-2) 0 0 0.25rem, var(--accent-color) 0 0 0.75rem;
}
@media (prefers-color-scheme: dark) {
  .article-list article.has-accent-color {
    --accent-color: hsl(
      var(--accent-dark-h),
      var(--accent-dark-s),
      var(--accent-dark-l)
    );
    --accent-h: var(--accent-dark-h);
    --accent-s: var(--accent-dark-s);
    --accent-l: var(--accent-dark-l);
    --bg-color: hsl(
      var(--accent-h),
      calc(var(--accent-s) - var(--accent-s) * 0.7),
      calc(var(--accent-l) - var(--accent-l) * 0.9)
    );
    --fg-muted-1: hsla(
      var(--accent-h),
      var(--accent-s),
      calc(var(--accent-l) + (100% - var(--accent-l)) * 0.85),
      var(--fg-muted-1-opacity)
    );
    --fg-muted-2: hsla(
      var(--accent-h),
      var(--accent-s),
      calc(var(--accent-l) + (100% - var(--accent-l)) * 0.85),
      var(--fg-muted-2-opacity)
    );
    --glass-bg-1: hsla(
      var(--accent-h),
      calc(var(--accent-s) - var(--accent-s) * 0.6),
      calc(var(--accent-l) - var(--accent-l) * 0.8),
      var(--dim-opacity)
    );
    --glass-bg-2: hsla(
      var(--accent-h),
      calc(var(--accent-s) - var(--accent-s) * 0.5),
      calc(var(--accent-l) - var(--accent-l) * 0.7),
      var(--dim-opacity)
    );
    --crt-bg: radial-gradient(
      hsl(
        var(--accent-h),
        calc(var(--accent-s) - var(--accent-s) * 0.5),
        calc(var(--accent-l) - var(--accent-l) * 0.7)
      ),
      hsl(
          var(--accent-h),
          calc(var(--accent-s) - var(--accent-s) * 0.5),
          calc(var(--accent-l) - var(--accent-l) * 0.9)
        )
        80%,
      hsl(
        var(--accent-h),
        calc(var(--accent-s) - var(--accent-s) * 0.5),
        calc(var(--accent-l) - var(--accent-l) * 0.95)
      )
    );
  }
}
.article-list article > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: 1rem;
}
.article-list article > div > a {
  text-decoration: none;
}
.article-list article h3 {
  margin: 0;
  border-inline-start: 0.25rem solid;
  border-start-start-radius: 0.25rem;
  border-end-start-radius: 0.25rem;
  padding-inline-start: 0.5rem;
  color: var(--accent-color);
  font-weight: var(--font-weight-semi-bold);
  text-decoration: none;
}
.article-list article h3:hover::after {
  opacity: 1;
}
.article-list article h3::after {
  opacity: 0;
  transition: opacity var(--transition);
  content: " →";
}
.article-list article .description p {
  margin-block-end: 0.75rem;
}
.article-list article .open-post {
  --mask-image: linear-gradient(
    to bottom,
    hsl(0, 0%, 0%) 0%,
    hsla(0, 0%, 0%, 0.987) 8.1%,
    hsla(0, 0%, 0%, 0.951) 15.5%,
    hsla(0, 0%, 0%, 0.896) 22.5%,
    hsla(0, 0%, 0%, 0.825) 29%,
    hsla(0, 0%, 0%, 0.741) 35.3%,
    hsla(0, 0%, 0%, 0.648) 41.2%,
    hsla(0, 0%, 0%, 0.55) 47.1%,
    hsla(0, 0%, 0%, 0.45) 52.9%,
    hsla(0, 0%, 0%, 0.352) 58.8%,
    hsla(0, 0%, 0%, 0.259) 64.7%,
    hsla(0, 0%, 0%, 0.175) 71%,
    hsla(0, 0%, 0%, 0.104) 77.5%,
    hsla(0, 0%, 0%, 0.049) 84.5%,
    hsla(0, 0%, 0%, 0.013) 91.9%,
    hsla(0, 0%, 0%, 0) 100%
  );
  mask-image: var(--mask-image);
  -webkit-mask-image: var(--mask-image);
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  margin-block-end: -2rem;
  box-shadow: var(--edge-highlight);
  border-radius: 0;
  aspect-ratio: 2/1;
  overflow: hidden;
  text-decoration: none;
}
.article-list article .open-post:hover::before {
  background-color: var(--shade-color);
}
.article-list article .open-post:hover img {
  transform: var(--hover);
  filter: blur(0.25rem);
}
.article-list article .open-post:hover .icon {
  transform: none;
  opacity: 1;
}
.article-list article .open-post:active img {
  transform: none;
}
.article-list article .open-post::before {
  position: absolute;
  z-index: 1;
  transition: background-color var(--transition);
  inset: 0;
  border-radius: inherit;
  content: "";
}
.article-list article .open-post img {
  position: absolute;
  transition-duration: var(--transition);
  transition-property: transform, filter;
  margin: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.article-list article .open-post .icon {
  transform: scale(1.5);
  opacity: 0;
  z-index: 1;
  transition: transform var(--transition-bezier), opacity var(--transition);
  color: white;
  font-size: 1.25rem;
}
.article-list article .article-details {
  flex: 1;
  justify-content: flex-end;
  margin-block-end: 0;
}
.article-list article .article-details .tags {
  margin-block-start: auto;
  margin-block-end: -0.25rem;
}

.paginator {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  margin-block-start: 4rem;
}
.paginator:has(a.paginator-item.previous:active) .paginator-counter {
  border-start-start-radius: 1rem;
  border-end-start-radius: 1rem;
}
.paginator:has(a.paginator-item.next:active) .paginator-counter {
  border-start-end-radius: 1rem;
  border-end-end-radius: 1rem;
}
.paginator-item {
  display: inline-block;
  transition: border-radius var(--transition), border-start-end-radius var(--transition), border-end-end-radius var(--transition), border-start-start-radius var(--transition), border-end-start-radius var(--transition), background-color var(--transition), transform var(--transition-bezier);
  box-shadow: var(--edge-highlight);
  border-radius: 1rem;
  background-color: var(--bg-muted-1);
  padding: 0.5rem;
  color: var(--accent-color);
  line-height: 0;
  text-decoration: none;
}
.paginator-item:not([aria-disabled=true]):hover {
  background-color: var(--bg-muted-2);
}
.paginator-item:not([aria-disabled=true]):active {
  transform: var(--active);
  border-radius: 1rem;
}
.paginator-item-previous {
  border-start-end-radius: var(--rounded-corner-small);
  border-end-end-radius: var(--rounded-corner-small);
}
.paginator-item-next {
  border-start-start-radius: var(--rounded-corner-small);
  border-end-start-radius: var(--rounded-corner-small);
}
.paginator-counter {
  box-shadow: var(--edge-highlight), var(--shadow-glow);
  background-image: linear-gradient(to bottom right, var(--accent-color), var(--accent-highlight));
  color: var(--contrast-color);
  text-shadow: var(--text-shadow-glow);
  display: inline-block;
  transition: var(--transition-bezier);
  transition-property: border-start-start-radius, border-end-start-radius, border-start-end-radius, border-end-end-radius;
  border-radius: var(--rounded-corner-small);
  background-color: var(--bg-muted-1);
  padding: 0.25rem 0.5rem;
  font-weight: var(--font-weight-semi-bold);
  font-variant-numeric: tabular-nums;
}

.article-nav {
  display: flex;
  gap: 0.25rem;
}
@media only screen and (max-width: 720px) {
  .article-nav {
    flex-direction: column;
  }
}
.article-nav-item {
  flex: 1;
  transition: box-shadow var(--transition), background-color var(--transition), transform var(--transition-bezier);
  border-radius: var(--rounded-corner);
  padding: 0.75rem 1rem;
  min-width: 0;
  text-decoration: none;
}
.article-nav-item:hover {
  box-shadow: var(--edge-highlight), var(--shadow);
  background-color: var(--bg-muted-1);
}
.article-nav-item:hover .article-title {
  color: var(--accent-color);
}
.article-nav-item:active {
  transform: var(--active);
}
.article-nav-item.prev {
  text-align: start;
}
.article-nav-item.prev .nav-arrow::before {
  content: "← ";
}
.article-nav-item.next {
  text-align: end;
}
.article-nav-item.next .nav-arrow::after {
  content: " →";
}
.article-nav .nav-arrow {
  margin-block-end: 0.5rem;
  color: var(--fg-muted-2);
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-small);
}
.article-nav .article-title {
  display: block;
  transition: color var(--transition);
  max-width: 100%;
  overflow: hidden;
  color: var(--fg-muted-1);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audio {
  transition: all var(--transition), transform var(--transition-bezier);
  box-shadow: var(--edge-highlight);
  border-radius: var(--rounded-corner-small);
  background-color: var(--bg-muted-1);
  padding-inline: 0.375rem;
  text-decoration: none;
  padding-block: 0;
  color: var(--accent-color);
  font-size: var(--font-size-medium);
}
.audio:hover {
  color: var(--accent-color) !important;
}
.audio:hover .icon {
  animation: speaker var(--transition-long) ease-out infinite;
}
@keyframes speaker {
  from {
    --icon: var(--icon-speaker-none);
  }
  50% {
    --icon: var(--icon-speaker-low);
  }
  to {
    --icon: var(--icon-speaker-high);
  }
}
.audio:active {
  transform: var(--active);
}
.audio .icon {
  vertical-align: -0.1875rem;
  margin-inline-start: 0.25rem;
}

body.has-banner {
  background-image: var(--bg-overlay), var(--blurnail);
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

#banner {
  --mask: linear-gradient(black calc(100% - 2rem), transparent);
  -webkit-mask-image: var(--mask);
  display: flex;
  grid-area: banner;
  justify-content: center;
  mask-image: var(--mask);
  margin-block-end: -2.5rem;
  padding-block: 3.25rem 2.5rem;
  width: 100%;
}
#banner div {
  position: relative;
  margin-inline: 1rem;
  aspect-ratio: 2/1;
  width: 100%;
  max-width: var(--content-width);
}
#banner img {
  position: absolute;
  margin: 0;
  inset: 0;
  border-radius: var(--rounded-corner) var(--rounded-corner) 0 0 !important;
  aspect-ratio: 2/1;
  width: 100%;
  object-fit: cover;
}
#banner img:nth-of-type(1) {
  opacity: var(--dim-opacity);
  z-index: -1;
  filter: blur(1.5rem);
  animation: banner-glow-load calc(0.525s + var(--transition-long));
  inset-block-start: 1rem;
}
@keyframes banner-glow-load {
  from, 52.5% {
    opacity: 0;
  }
}
#banner img:nth-of-type(2) {
  transform-origin: bottom;
  animation: banner-load calc(0.525s + var(--transition-longer));
}
@keyframes banner-load {
  from, 52.5% {
    transform: translateY(2rem) scale(0.95);
    opacity: 0;
  }
}
#banner + #main-content {
  margin-block-start: 0;
}
#banner + #main-content article > h1:first-of-type,
#banner + #main-content h1:first-of-type {
  margin-inline: -1rem;
  margin-block: 0;
  border-radius: var(--rounded-corner) var(--rounded-corner) 0 0;
  padding: 1rem;
  width: unset;
  -webkit-backdrop-filter: blur(1rem);
  backdrop-filter: blur(1rem);
  animation: banner-heading calc(0.525s + var(--transition-longer));
  box-shadow: inset 0 0.0625rem 0 var(--accent-highlight);
  background-image: linear-gradient(to bottom, var(--bg-muted-1), transparent 50%);
  background-size: auto 200%;
  text-decoration: none;
}
@keyframes banner-heading {
  from, 52.5% {
    box-shadow: none;
    background-position-y: 100%;
  }
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.25rem;
  margin-block-start: 2rem;
}
.buttons.centered {
  justify-content: center;
}
.buttons.start {
  justify-content: flex-start;
}
.buttons.end {
  justify-content: flex-end;
}
.buttons.big {
  gap: 0.5rem;
}

.buttons a,
a.button,
button {
  display: inline-block;
  transition: background-color var(--transition), color var(--transition), transform var(--transition-bezier);
  box-shadow: var(--edge-highlight);
  border-radius: var(--rounded-corner);
  background-color: var(--bg-muted-1);
  padding: 0.5rem 1rem;
  color: var(--fg-muted-1);
  font-weight: var(--font-weight-semi-bold);
  font-size: var(--font-size-small);
  line-height: 1.5rem;
  text-decoration: none;
}
.buttons a:not(:disabled, [aria-disabled=true]):hover,
a.button:not(:disabled, [aria-disabled=true]):hover,
button:not(:disabled, [aria-disabled=true]):hover {
  background-color: var(--bg-muted-2);
  color: var(--fg-muted-2);
}
.buttons a:not(:disabled, [aria-disabled=true]):active,
a.button:not(:disabled, [aria-disabled=true]):active,
button:not(:disabled, [aria-disabled=true]):active {
  transform: var(--active);
}
.buttons a.suggested,
a.button.suggested,
button.suggested {
  box-shadow: var(--edge-highlight), var(--shadow-glow);
  background-image: linear-gradient(to bottom right, var(--accent-color), var(--accent-highlight));
  color: var(--contrast-color);
  text-shadow: var(--text-shadow-glow);
}
.buttons a.suggested:not(:disabled, [aria-disabled=true]):hover,
a.button.suggested:not(:disabled, [aria-disabled=true]):hover,
button.suggested:not(:disabled, [aria-disabled=true]):hover {
  box-shadow: var(--edge-highlight);
  background-color: var(--accent-color);
  color: var(--contrast-color);
}
.buttons a[aria-busy=true],
a.button[aria-busy=true],
button[aria-busy=true] {
  animation: progress-shimmer var(--transition-long) ease-in-out alternate infinite;
  background-image: linear-gradient(to right, transparent 50%, var(--bg-muted-1) 75%, transparent 100%);
  background-size: 200%;
}
@keyframes progress-shimmer {
  to {
    background-position-x: -200%;
  }
}

.buttons.big a,
.buttons.big button,
a.button.big,
button.big {
  border-radius: 9999px;
  padding: 0.625rem 1.25rem;
}

.card {
  box-shadow: var(--edge-highlight), var(--shadow);
  border-radius: var(--rounded-corner);
  background-color: var(--bg-muted-1);
  padding: 1rem;
}

#comments #qrcode {
  float: inline-end;
  cursor: help;
  box-sizing: content-box;
  margin-inline-start: 1rem;
  margin-block-start: 3rem;
  box-shadow: var(--edge-highlight), var(--shadow);
  border-radius: var(--rounded-corner);
  background-color: white;
  padding: 0.75rem;
  width: 7.25rem;
  height: 7.25rem;
}
#comments #qrcode svg {
  pointer-events: none;
}
@media only screen and (max-width: 720px) {
  #comments #qrcode {
    display: none;
  }
}
#comments #comments-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-block-start: 2rem;
}
#comments #comments-wrapper #comments-status {
  color: var(--fg-muted-1);
  font-weight: var(--font-weight-semi-bold);
  font-size: var(--font-size-x-large);
  text-align: center;
}
#comments #comments-wrapper .comment {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "avatar header      " "...... post        " "...... media       " "...... card        " "...... interactions";
  column-gap: 1rem;
  justify-items: start;
  animation: slide-in-right var(--transition-bezier);
}
:root[dir*=rtl] #comments #comments-wrapper .comment {
  animation: slide-in-left var(--transition-bezier);
}
@media only screen and (max-width: 720px) {
  #comments #comments-wrapper .comment {
    grid-template-areas: "avatar       header      " "post         post        " "media        media       " "card         card        " "interactions interactions";
    align-items: start;
  }
}
#comments #comments-wrapper .comment.comment-reply {
  position: relative;
  border-inline-start: 0.25rem solid var(--bg-muted-2);
  border-start-start-radius: 0.25rem;
  border-end-start-radius: 0.25rem;
  padding-inline-start: 1rem;
}
#comments #comments-wrapper .comment.comment-reply:has(+ .comment-reply) {
  border-end-start-radius: 0;
}
#comments #comments-wrapper .comment.comment-reply + .comment-reply {
  margin-block-start: -2rem;
  border-start-start-radius: 0;
  padding-block-start: 2rem;
}
#comments #comments-wrapper .comment .avatar-link {
  grid-area: avatar;
  width: 4rem;
  height: 4rem;
}
@media only screen and (max-width: 480px) {
  #comments #comments-wrapper .comment .avatar-link {
    width: 3rem;
    height: 3rem;
  }
}
#comments #comments-wrapper .comment .avatar-link .avatar {
  transition: transform var(--transition-bezier);
  margin: 0;
  background-size: cover;
  width: 100%;
  height: 100%;
}
#comments #comments-wrapper .comment .avatar-link .avatar:hover {
  transform: rotate(10deg) var(--hover);
  border-radius: var(--rounded-corner);
}
#comments #comments-wrapper .comment .avatar-link .avatar:active {
  transform: var(--active);
}
#comments #comments-wrapper .comment .mention {
  transition: all var(--transition), transform var(--transition-bezier);
  box-shadow: var(--edge-highlight);
  border-radius: var(--rounded-corner-small);
  background-color: var(--bg-muted-1);
  padding-inline: 0.375rem;
  text-decoration: none;
  display: inline-block;
}
#comments #comments-wrapper .comment .mention:hover {
  background-color: var(--bg-muted-2);
}
#comments #comments-wrapper .comment .mention:active {
  transform: var(--active);
}
#comments #comments-wrapper .comment .invisible {
  display: none;
}
#comments #comments-wrapper .comment .ellipsis::after {
  content: "…";
}
#comments #comments-wrapper .comment header {
  display: flex;
  grid-area: header;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  color: var(--fg-muted-1);
  line-height: 1;
}
#comments #comments-wrapper .comment header .display,
#comments #comments-wrapper .comment header .instance {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#comments #comments-wrapper .comment header .display {
  color: var(--fg-color);
  line-height: 1.5rem;
  text-decoration: none;
}
#comments #comments-wrapper .comment header .display .emoji {
  cursor: unset;
}
#comments #comments-wrapper .comment header .display .emoji:hover {
  transform: none;
}
#comments #comments-wrapper .comment header .instance {
  margin-block-start: 0.25rem;
  font-weight: var(--font-weight-semi-bold);
  font-size: var(--font-size-x-small);
}
#comments #comments-wrapper .comment header .instance.op {
  cursor: help;
}
#comments #comments-wrapper .comment header .instance.op::before {
  -webkit-mask-image: var(--icon);
  -webkit-mask-size: cover;
  display: block;
  mask-image: var(--icon);
  mask-size: cover;
  background-color: currentColor;
  width: 1em;
  height: 1em;
  content: "";
  --icon: var(--icon-seal-check);
  display: inline-block;
  vertical-align: text-top;
  margin-inline-end: 0.25rem;
  font-size: 1rem;
}
#comments #comments-wrapper .comment header .timestamp {
  margin-block-start: 0.25rem;
}
#comments #comments-wrapper .comment header .timestamp a {
  color: inherit;
  font-size: var(--font-size-x-small);
  text-decoration-color: transparent;
}
#comments #comments-wrapper .comment header .timestamp a:hover {
  text-decoration-style: solid;
  text-decoration-color: inherit;
}
#comments #comments-wrapper .comment header .timestamp a::after {
  vertical-align: top;
}
#comments #comments-wrapper .comment details {
  border-radius: var(--rounded-corner-small);
  background-image: linear-gradient(to right, transparent, transparent 0.5rem, var(--bg-muted-1) 0.5rem, var(--bg-muted-1) calc(100% - 0.5rem), transparent calc(100% - 0.5rem), transparent), linear-gradient(to right, transparent, transparent 0.5rem, var(--bg-color) 0.5rem, var(--bg-color) calc(100% - 0.5rem), transparent calc(100% - 0.5rem), transparent), repeating-linear-gradient(45deg, var(--contrast-color), var(--contrast-color) 0.25rem, var(--accent-color) 0.25rem, var(--accent-color) 0.5rem);
  width: 100%;
}
#comments #comments-wrapper .comment details summary {
  border-radius: 0;
  background-image: none;
}
#comments #comments-wrapper .comment main {
  grid-area: post;
  justify-self: stretch;
  margin-block-start: 1rem;
  padding: 0;
}
#comments #comments-wrapper .comment main :first-child {
  margin-block-start: 0;
}
#comments #comments-wrapper .comment main :last-child {
  margin-block-end: 0;
}
#comments #comments-wrapper .comment .attachments {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  grid-area: media;
  gap: 0.5rem;
  margin-block-start: 1rem;
}
#comments #comments-wrapper .comment .attachments img,
#comments #comments-wrapper .comment .attachments video {
  margin: 0;
}
#comments #comments-wrapper .comment .meta-card {
  grid-area: card;
  transition: transform var(--transition-bezier);
  margin-block-start: 1rem;
  width: min(var(--content-width) / 2, 100%);
  font-weight: var(--font-weight-normal);
  text-decoration: none;
}
#comments #comments-wrapper .comment .meta-card:hover img {
  transform: var(--hover);
  box-shadow: var(--edge-highlight), var(--shadow-raised);
  border-radius: var(--rounded-corner-small);
}
#comments #comments-wrapper .comment .meta-card:hover figcaption {
  border-radius: var(--rounded-corner);
  background-color: var(--bg-muted-2);
}
#comments #comments-wrapper .comment .meta-card:active {
  transform: var(--active);
}
#comments #comments-wrapper .comment .meta-card figure {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
}
#comments #comments-wrapper .comment .meta-card figure img {
  margin: 0;
  border-radius: var(--rounded-corner) var(--rounded-corner) var(--rounded-corner-small) var(--rounded-corner-small);
  aspect-ratio: 16/9;
  object-fit: cover;
}
#comments #comments-wrapper .comment .meta-card figure img + figcaption {
  border-radius: var(--rounded-corner-small) var(--rounded-corner-small) var(--rounded-corner) var(--rounded-corner);
}
#comments #comments-wrapper .comment .meta-card figure figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  transition-duration: var(--transition);
  transition-property: border-radius, background-color;
  box-shadow: var(--edge-highlight), var(--shadow);
  border-radius: var(--rounded-corner);
  background-color: var(--bg-muted-1);
  padding: 1rem;
  color: var(--fg-color);
  font-size: var(--font-size-medium);
  text-align: start;
}
#comments #comments-wrapper .comment .meta-card figure figcaption p {
  margin: 0;
  color: var(--fg-muted-2);
  font-size: var(--font-size-small);
}
#comments #comments-wrapper .comment footer {
  display: flex;
  grid-area: interactions;
  align-items: center;
  gap: 0.25rem;
  margin-block-start: 1rem;
  width: 100%;
  min-width: 0;
}
@media only screen and (max-width: 480px) {
  #comments #comments-wrapper .comment footer {
    flex-wrap: wrap;
  }
}
#comments #comments-wrapper .comment footer .boosts,
#comments #comments-wrapper .comment footer .faves,
#comments #comments-wrapper .comment footer .reaction {
  padding: 0.375rem 0.75rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#comments #comments-wrapper .comment footer .boosts,
#comments #comments-wrapper .comment footer .faves {
  transition: box-shadow var(--transition), border-radius var(--transition), transform var(--transition-bezier);
  border-radius: 1.125rem;
  text-decoration: none;
}
#comments #comments-wrapper .comment footer .boosts .icon,
#comments #comments-wrapper .comment footer .faves .icon {
  vertical-align: -0.125rem;
  transition: transform var(--transition-bezier);
  margin-inline-end: 0.25rem;
}
#comments #comments-wrapper .comment footer .boosts:hover,
#comments #comments-wrapper .comment footer .faves:hover {
  box-shadow: var(--edge-highlight);
  text-decoration: none;
}
#comments #comments-wrapper .comment footer .boosts:active,
#comments #comments-wrapper .comment footer .faves:active {
  transform: var(--active);
  border-radius: 1.125rem;
}
#comments #comments-wrapper .comment footer .boosts {
  border-start-end-radius: var(--rounded-corner-small);
  border-end-end-radius: var(--rounded-corner-small);
  padding-inline-end: 0.625rem;
  color: var(--purple-fg);
}
#comments #comments-wrapper .comment footer .boosts .icon {
  --icon: var(--icon-repeat);
}
#comments #comments-wrapper .comment footer .boosts:hover {
  background-color: var(--purple-bg-1);
}
#comments #comments-wrapper .comment footer .boosts:hover .icon {
  transform: rotate(180deg);
}
#comments #comments-wrapper .comment footer .faves {
  border-start-start-radius: var(--rounded-corner-small);
  border-end-start-radius: var(--rounded-corner-small);
  padding-inline-start: 0.625rem;
  color: var(--yellow-fg);
}
#comments #comments-wrapper .comment footer .faves .icon {
  --icon: var(--icon-star);
}
#comments #comments-wrapper .comment footer .faves:hover {
  background-color: var(--yellow-bg-1);
}
#comments #comments-wrapper .comment footer .faves:hover .icon {
  transform: rotate(72deg);
}
#comments #comments-wrapper .comment footer .reactions {
  display: flex;
  gap: 0.25rem;
  margin: -0.5rem -1rem;
  padding: 0.5rem 1rem;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  color: var(--accent-color);
  font-weight: var(--font-weight-semi-bold);
}
#comments #comments-wrapper .comment footer .reactions .reaction {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.25rem;
  cursor: zoom-in;
  border: 0.0625rem solid var(--bg-muted-2);
  border-radius: 1.1875rem;
}
#comments #comments-wrapper .comment footer .reactions .reaction:hover .emoji {
  transform: scale(2);
}
#comments #comments-wrapper .comment footer .reactions .reaction .emoji {
  cursor: unset;
}
#comments #comments-wrapper .comment footer .reactions .reaction span {
  font-variant-numeric: tabular-nums;
}

.crt,
pre:has(code[data-crt], code[data-lang=""]) {
  position: relative;
  animation: flicker 0.25s alternate infinite;
  margin-inline: auto;
  box-shadow: var(--shadow-glow);
  background-image: var(--crt-bg);
  background-color: transparent !important;
  padding: 0;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  color: var(--accent-color) !important;
  font-weight: var(--font-weight-medium);
  text-shadow: var(--text-shadow-glow);
}
@keyframes flicker {
  25% {
    opacity: 0.95;
  }
  50% {
    opacity: 0.85;
  }
  75% {
    opacity: 1;
  }
  to {
    opacity: 0.9;
  }
}
.crt::before, .crt::after,
pre:has(code[data-crt], code[data-lang=""])::before,
pre:has(code[data-crt], code[data-lang=""])::after {
  position: absolute;
  inset: 0;
  content: "";
}
.crt::before,
pre:has(code[data-crt], code[data-lang=""])::before {
  opacity: var(--scanlines-opacity);
  z-index: 1;
  animation: scanlines 0.1s linear infinite;
  background-image: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) 0.125rem, transparent 0.125rem, transparent 0.25rem);
  background-position-y: -0.125rem;
  background-repeat: no-repeat;
  pointer-events: none;
}
@keyframes scanlines {
  to {
    background-position-y: 0.125rem;
  }
}
.crt::after,
pre:has(code[data-crt], code[data-lang=""])::after {
  opacity: 0.05;
  animation: scanline 5s linear infinite;
  background-image: linear-gradient(to bottom, transparent, var(--accent-color) 16rem);
  background-position-y: -16rem;
  background-size: 100% 16rem;
  pointer-events: none;
}
@keyframes scanline {
  to {
    background-position-y: calc(100% + 16rem);
  }
}
.crt > code,
pre:has(code[data-crt], code[data-lang=""]) > code {
  display: block;
  border-radius: inherit;
  padding: 0.75rem 1rem;
  overflow-x: auto;
  scrollbar-width: thin;
}

.emoji {
  display: inline-block;
  vertical-align: bottom;
  transition: transform var(--transition-bezier);
  cursor: zoom-in;
  margin: 0;
  box-shadow: none;
  border-radius: 0;
  background-color: transparent;
  width: 1.5rem;
  height: 1.5rem;
}
.emoji:hover {
  transform: scale(2);
}
.emoji.big {
  width: 3rem;
  height: 3rem;
}

a.external:not(:has(img, svg, video, picture, figure))::after {
  -webkit-mask-image: var(--icon);
  -webkit-mask-size: cover;
  display: block;
  mask-image: var(--icon);
  mask-size: cover;
  background-color: currentColor;
  width: 1em;
  height: 1em;
  content: "";
  --icon: var(--icon-arrow-square-out);
  display: inline-block;
  vertical-align: -0.125rem;
  opacity: var(--dim-opacity);
  margin-inline-start: 0.125rem;
  font-size: max(1rem, 1em);
}

.footnotes-list p {
  margin-block: 0;
}

.footnote-reference {
  display: inline-flex;
  vertical-align: baseline;
  transition: background-color var(--transition), outline-offset calc(var(--transition-long) * 3), transform var(--transition-bezier);
  margin-inline-start: 0.25rem;
  outline-offset: calc(var(--content-width) / 2) !important;
  border-radius: 0.6875em;
  background-color: var(--fg-muted-1);
  line-height: 1.375em;
}
.footnote-reference:hover {
  background-color: var(--accent-color);
}
.footnote-reference:hover a::after {
  mask-position: center 1.125rem;
}
.footnote-reference:active {
  transform: var(--active);
}
.footnote-reference:target {
  animation: none !important;
  outline-offset: -0.1875rem !important;
  background-color: var(--accent-color);
}
.footnote-reference a {
  flex: 1;
  border-radius: inherit;
  padding-inline: 0.5625rem 0.375rem;
  color: var(--bg-color);
  font-size: var(--font-size-small);
  font-variant-numeric: tabular-nums;
  text-align: center;
  text-decoration: none;
}
.footnote-reference a::after {
  -webkit-mask-image: var(--icon);
  -webkit-mask-size: cover;
  display: block;
  mask-image: var(--icon);
  mask-size: cover;
  background-color: currentColor;
  width: 1em;
  height: 1em;
  content: "";
  --icon: var(--icon-caret-down);
  display: inline-block;
  vertical-align: -0.4375rem;
  mask-position: center;
  mask-size: 1em;
  transition: mask-position var(--transition);
  margin-inline-start: 0.25rem;
  height: 1.375rem;
}

.giallo:has(.giallo-ln) {
  padding-inline: 0;
}

.giallo-l {
  display: inline-block;
  width: 100%;
}

.giallo-ln {
  display: inline-block;
  margin-right: 1ch;
  min-width: 3ch;
  user-select: none;
  text-align: right;
}

.icon {
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  user-select: none;
  text-transform: none;
  -webkit-user-select: none;
  display: inline-block;
  box-sizing: content-box;
}
.icon::before {
  -webkit-mask-image: var(--icon);
  -webkit-mask-size: cover;
  display: block;
  mask-image: var(--icon);
  mask-size: cover;
  background-color: currentColor;
  width: 1em;
  height: 1em;
  content: "";
}

iframe {
  display: block;
  margin: 1rem auto;
  box-shadow: var(--edge-highlight), var(--shadow);
  border: none;
  border-radius: var(--rounded-corner);
  background-color: var(--bg-muted-1);
  width: 100%;
  max-width: 100%;
}
iframe.mastodon-embed {
  aspect-ratio: 3/4;
  width: min(var(--content-width) / 2, 100%);
}
iframe.vimeo-embed, iframe.youtube-embed {
  aspect-ratio: 16/9;
}
iframe:fullscreen {
  box-shadow: none;
  border-radius: 0;
}
iframe:-webkit-full-screen {
  box-shadow: none;
  border-radius: 0;
}

input {
  appearance: none;
  background-color: var(--bg-muted-1);
}

input:not([type]),
input[type=text],
input[type=search],
input[type=password],
input[type=submit] {
  box-shadow: var(--edge-highlight);
  border: none;
  border-radius: var(--rounded-corner);
  background-color: var(--bg-muted-1);
  font-size: inherit;
  line-height: inherit;
  font-family: inherit;
}

input:not([type]),
input[type=text],
input[type=search],
input[type=password] {
  padding: 0.5rem 0.75rem;
  width: 100%;
}
input:not([type])::placeholder,
input[type=text]::placeholder,
input[type=search]::placeholder,
input[type=password]::placeholder {
  opacity: 1;
  color: var(--fg-muted-1);
}

input[type=submit] {
  transition: background-color var(--transition), transform var(--transition-bezier);
  box-shadow: var(--edge-highlight);
  border-radius: var(--rounded-corner);
  padding: 0.375rem 0.75rem;
  color: var(--fg-muted-1);
  font-weight: var(--font-weight-semi-bold);
  font-size: var(--font-size-small);
}
input[type=submit]:enabled:hover {
  background-color: var(--bg-muted-2);
}
input[type=submit]:enabled:active {
  transform: var(--active);
}

input[type=radio],
input[type=checkbox],
input[type=color] {
  position: relative;
  transition: background-color var(--transition);
  border: 0.125rem solid var(--bg-muted-2);
  width: 1rem;
  height: 1rem;
}
input[type=radio]:not(:checked):enabled:hover,
input[type=checkbox]:not(:checked):enabled:hover,
input[type=color]:not(:checked):enabled:hover {
  background-color: var(--bg-muted-2);
}

input[type=radio],
input[type=checkbox] {
  vertical-align: -0.125em;
  margin-inline-end: 0.25rem;
}
input[type=radio]::before,
input[type=checkbox]::before {
  display: block;
  position: absolute;
  transform: scale(0.5);
  opacity: 0;
  transition: opacity var(--transition), transform var(--transition-bezier);
  content: "";
}
input[type=radio]:checked,
input[type=checkbox]:checked {
  border: 0.15rem solid transparent;
  background-color: var(--accent-color);
}
input[type=radio]:checked::before,
input[type=checkbox]:checked::before {
  transform: scale(1);
  opacity: 1;
}

input[type=radio] {
  border-radius: 50%;
}
input[type=radio]::before {
  inset-block-start: 0.125rem;
  inset-inline-start: 0.125rem;
  border-radius: 50%;
  background-color: var(--contrast-color);
  width: 0.5rem;
  height: 0.5rem;
}

input[type=checkbox] {
  border-radius: calc(var(--rounded-corner-small) / 2);
}
input[type=checkbox]::before {
  -webkit-mask-image: var(--icon);
  -webkit-mask-size: cover;
  display: block;
  mask-image: var(--icon);
  mask-size: cover;
  background-color: currentColor;
  width: 1em;
  height: 1em;
  content: "";
  --icon: var(--icon-check);
  transform-origin: bottom left;
  inset-block-start: -0.125rem;
  inset-inline-start: -0.125rem;
  color: var(--contrast-color);
  font-size: 1rem;
}
input[type=checkbox].switch {
  vertical-align: -0.375rem;
  box-shadow: var(--edge-highlight);
  border: none;
  border-radius: 9999px;
  width: 2.5rem;
  height: 1.5rem;
}
input[type=checkbox].switch.big {
  vertical-align: -0.625rem;
  width: 3rem;
  height: 2rem;
}
input[type=checkbox].switch.big::before {
  width: 1.5rem;
  height: 1.5rem;
}
input[type=checkbox].switch::before {
  transform: none;
  transform-origin: center;
  opacity: 1;
  mask-image: none;
  inset-block-start: 0.25rem;
  inset-inline-start: 0.25rem;
  box-shadow: var(--shadow);
  border-radius: 50%;
  background-color: white;
  width: 1rem;
  height: 1rem;
  content: "";
}
input[type=checkbox].switch:checked {
  background-color: var(--accent-color);
}
input[type=checkbox].switch:checked::before {
  transform: translateX(1rem);
  background-color: var(--contrast-color);
}
:root[dir*=rtl] input[type=checkbox].switch:checked::before {
  transform: translateX(-1rem);
}
input[type=checkbox].switch:disabled::before {
  box-shadow: none;
}

input[type=color] {
  vertical-align: -0.375em;
  box-shadow: var(--edge-highlight);
  border: none;
  border-radius: var(--rounded-corner-small);
  padding: 0.25rem;
  width: 3rem;
  height: 2rem;
}
input[type=color]::-moz-color-swatch {
  border: none;
  border-radius: calc(var(--rounded-corner-small) - 0.25rem);
}
input[type=color]::-webkit-color-swatch-wrapper {
  padding: 0;
}
input[type=color]::-webkit-color-swatch {
  border-radius: calc(var(--rounded-corner-small) - 0.25rem);
}

input[type=range] {
  appearance: none;
  box-shadow: var(--edge-highlight);
  border-radius: 9999px;
  background: var(--bg-muted-1);
  padding: 0.5rem 0.25rem;
  width: 100%;
  height: 1rem;
}
input[type=range]::-webkit-slider-runnable-track {
  cursor: pointer;
  border-radius: 9999px;
  background: var(--accent-color);
  width: 100%;
}
input[type=range]::-moz-range-track {
  cursor: pointer;
  border-radius: 9999px;
  background: var(--accent-color);
  width: 100%;
  height: 0.5rem;
}
input[type=range]::-webkit-slider-thumb {
  appearance: none;
  cursor: ew-resize;
  margin-block: -0.5rem;
  box-shadow: var(--shadow);
  border: none;
  border-radius: 0.25rem;
  background-color: white;
  width: 0.5rem;
  height: 1.5rem;
}
input[type=range]::-moz-range-thumb {
  appearance: none;
  cursor: ew-resize;
  margin-block: -0.5rem;
  box-shadow: var(--shadow);
  border: none;
  border-radius: 0.25rem;
  background-color: white;
  width: 0.5rem;
  height: 1.5rem;
}
input[type=range].hollow::-webkit-slider-thumb {
  margin-block: 0;
  outline: 0.25rem solid white;
  background-color: transparent;
  height: 0.5rem;
}
input[type=range].hollow::-moz-range-thumb {
  margin-block: 0;
  outline: 0.25rem solid white;
  background-color: transparent;
  height: 0.5rem;
}

.marquee {
  margin-inline: -1rem;
  padding-inline: 1rem;
  overflow: hidden;
}
.marquee.overshoot-row > * {
  animation: marquee-scroll calc((var(--text-width) + var(--container-width)) / 40 * 1s) linear infinite;
}
@keyframes marquee-scroll {
  0%, 10% {
    transform: translateX(0);
  }
  45%, 55% {
    transform: translateX(calc((var(--container-width) - var(--text-width)) * 1px));
  }
  90%, 100% {
    transform: translateX(0);
  }
}
.marquee > * {
  display: inline-block;
  white-space: nowrap;
}

img,
video {
  display: block;
  margin: 1rem auto;
  box-shadow: var(--edge-highlight), var(--shadow);
  border-radius: var(--rounded-corner);
  background-color: var(--bg-muted-1);
  max-width: 100%;
  max-height: calc(100vh - 2rem);
}
img.full, img[src*="#full"],
video.full,
video[src*="#full"] {
  width: 100%;
}
img.start, img.end, img[src*="#start"], img[src*="#end"],
video.start,
video.end,
video[src*="#start"],
video[src*="#end"] {
  width: calc(var(--content-width) / 3);
}
img.start, img[src*="#start"],
video.start,
video[src*="#start"] {
  float: inline-start;
  transform-origin: left;
  margin-inline-end: 1rem;
}
:root[dir*=rtl] img.start, :root[dir*=rtl] img[src*="#start"],
:root[dir*=rtl] video.start,
:root[dir*=rtl] video[src*="#start"] {
  transform-origin: right;
}
img.end, img[src*="#end"],
video.end,
video[src*="#end"] {
  float: inline-end;
  transform-origin: right;
  margin-inline-start: 1rem;
}
:root[dir*=rtl] img.end, :root[dir*=rtl] img[src*="#end"],
:root[dir*=rtl] video.end,
:root[dir*=rtl] video[src*="#end"] {
  transform-origin: left;
}
img.pixels, img[src*="#pixels"],
video.pixels,
video[src*="#pixels"] {
  image-rendering: pixelated;
}
img.has-alpha, img[src*="#has-alpha"],
video.has-alpha,
video[src*="#has-alpha"] {
  box-shadow: none;
  border-radius: 0;
  background-color: transparent;
}
img.drop-shadow, img[src*="#drop-shadow"],
video.drop-shadow,
video[src*="#drop-shadow"] {
  filter: var(--drop-shadow);
}
img.spoiler, img[src*="#spoiler"],
video.spoiler,
video[src*="#spoiler"] {
  opacity: var(--dim-opacity);
  clip-path: inset(0 0 0 0 round var(--rounded-corner));
  filter: blur(1.5rem);
}
img.spoiler:hover, img.spoiler:active, img[src*="#spoiler"]:hover, img[src*="#spoiler"]:active,
video.spoiler:hover,
video.spoiler:active,
video[src*="#spoiler"]:hover,
video[src*="#spoiler"]:active {
  opacity: 1;
  clip-path: inset(-0.75rem -0.75rem -0.75rem -0.75rem round var(--rounded-corner-small));
  filter: none;
}
img.spoiler.solid, img.spoiler[src*="#solid"], img[src*="#spoiler"].solid, img[src*="#spoiler"][src*="#solid"],
video.spoiler.solid,
video.spoiler[src*="#solid"],
video[src*="#spoiler"].solid,
video[src*="#spoiler"][src*="#solid"] {
  clip-path: none;
  filter: brightness(0) contrast(0.5);
  box-shadow: none;
}
img.spoiler.solid:hover, img.spoiler.solid:active, img.spoiler[src*="#solid"]:hover, img.spoiler[src*="#solid"]:active, img[src*="#spoiler"].solid:hover, img[src*="#spoiler"].solid:active, img[src*="#spoiler"][src*="#solid"]:hover, img[src*="#spoiler"][src*="#solid"]:active,
video.spoiler.solid:hover,
video.spoiler.solid:active,
video.spoiler[src*="#solid"]:hover,
video.spoiler[src*="#solid"]:active,
video[src*="#spoiler"].solid:hover,
video[src*="#spoiler"].solid:active,
video[src*="#spoiler"][src*="#solid"]:hover,
video[src*="#spoiler"][src*="#solid"]:active {
  filter: none;
}
@media only screen and (max-width: 720px) {
  img.start, img.end, img[src*="#start"], img[src*="#end"],
  video.start,
  video.end,
  video[src*="#start"],
  video[src*="#end"] {
    float: none;
    margin-inline-start: auto;
    margin-inline-end: auto;
    width: auto;
  }
}

img {
  transition: box-shadow var(--transition), border-radius var(--transition), transform var(--transition-bezier);
}
img:not(.no-hover, [src*="#no-hover"], .emoji) {
  cursor: zoom-in;
}
img:not(.no-hover, [src*="#no-hover"], .emoji):hover {
  position: relative;
  transform: var(--hover);
  z-index: 1;
  box-shadow: var(--edge-highlight), var(--shadow-raised);
  border-radius: var(--rounded-corner-small);
}
img:not(.no-hover, [src*="#no-hover"], .emoji).start, img:not(.no-hover, [src*="#no-hover"], .emoji).end, img:not(.no-hover, [src*="#no-hover"], .emoji)[src*="#start"], img:not(.no-hover, [src*="#no-hover"], .emoji)[src*="#end"] {
  transition: transform var(--transition-bezier-longer);
}
img:not(.no-hover, [src*="#no-hover"], .emoji).start:hover, img:not(.no-hover, [src*="#no-hover"], .emoji).end:hover, img:not(.no-hover, [src*="#no-hover"], .emoji)[src*="#start"]:hover, img:not(.no-hover, [src*="#no-hover"], .emoji)[src*="#end"]:hover {
  transform: scale(2);
}
@media only screen and (max-width: 720px) {
  img:not(.no-hover, [src*="#no-hover"], .emoji).start, img:not(.no-hover, [src*="#no-hover"], .emoji).end, img:not(.no-hover, [src*="#no-hover"], .emoji)[src*="#start"], img:not(.no-hover, [src*="#no-hover"], .emoji)[src*="#end"] {
    transform-origin: center;
    transition: transform var(--transition-bezier);
  }
  img:not(.no-hover, [src*="#no-hover"], .emoji).start:hover, img:not(.no-hover, [src*="#no-hover"], .emoji).end:hover, img:not(.no-hover, [src*="#no-hover"], .emoji)[src*="#start"]:hover, img:not(.no-hover, [src*="#no-hover"], .emoji)[src*="#end"]:hover {
    transform: var(--hover);
  }
}
img:not(.no-hover, [src*="#no-hover"], .emoji).has-alpha:hover, img:not(.no-hover, [src*="#no-hover"], .emoji)[src*="#has-alpha"]:hover {
  box-shadow: none;
}

a img:not(.no-hover, [src*="#no-hover"]) {
  cursor: pointer;
}

video:fullscreen {
  box-shadow: none;
  border-radius: 0;
}

video:-webkit-full-screen {
  box-shadow: none;
  border-radius: 0;
}

picture {
  display: inline-block;
}

picture#not-found {
  display: block;
}
picture#not-found img {
  width: 8rem;
}

img#not-found {
  width: 8rem;
}

.overflow-auto {
  overflow: auto;
}
.overflow-auto.overshoot {
  margin-block: -1rem;
  padding-block: 1rem;
}
.overflow-auto.overshoot-row {
  margin-inline: -1rem;
  padding-inline: 1rem;
}

.overshoot {
  --mask: linear-gradient(
    to bottom,
    transparent,
    black 1rem,
    black calc(100% - 1rem),
    transparent
  );
  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
}
.overshoot-row {
  --mask: linear-gradient(
    to right,
    transparent,
    black 1rem,
    black calc(100% - 1rem),
    transparent
  );
  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
}

.pre-container {
  position: relative;
  margin: 1rem 0 1rem;
  box-shadow: var(--shadow);
  border-radius: var(--rounded-corner);
}
.pre-container::after {
  position: absolute;
  inset: 0;
  box-shadow: var(--edge-highlight);
  border-radius: inherit;
  pointer-events: none;
  content: "";
}
.pre-container .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: border-block-end-color var(--transition);
  border-radius: var(--rounded-corner) var(--rounded-corner) 0 0;
  border-block-end: 0.0625rem solid transparent;
  background-image: linear-gradient(to right, transparent 50%, var(--bg-muted-neutral-1) 75%, transparent 100%);
  background-size: 200%;
  padding: 0.25rem;
}
.pre-container .header:not(.z-l-code), .pre-container .header:not(.z-d-code) {
  background-color: var(--bg-muted-1);
  color: var(--accent-color);
}
.pre-container .header:not(.z-l-code) button:hover, .pre-container .header:not(.z-d-code) button:hover {
  background-color: var(--bg-muted-1);
}
.pre-container .header:not(.z-l-code).active, .pre-container .header:not(.z-d-code).active {
  border-block-end-color: var(--bg-muted-1);
}
.pre-container .header:not(.z-l-code).active button, .pre-container .header:not(.z-d-code).active button {
  background-color: var(--bg-muted-1);
}
.pre-container .header span {
  margin-inline-start: 0.75rem;
  font-weight: var(--font-weight-semi-bold);
}
.pre-container .header button {
  position: relative;
  transition: box-shadow var(--transition), background-color var(--transition), transform var(--transition-bezier);
  cursor: pointer;
  box-shadow: none;
  border-radius: var(--rounded-corner-small);
  background-color: transparent;
  padding: 0.5rem;
  color: inherit;
  line-height: 0;
}
.pre-container .header button:hover {
  box-shadow: var(--edge-highlight);
  background-color: var(--bg-muted-neutral-1);
}
.pre-container .header button:active {
  transform: var(--active);
}
.pre-container .header button:disabled {
  cursor: not-allowed;
}
.pre-container .header button:disabled:active {
  transform: none;
}
.pre-container .header button .icon {
  transition: opacity var(--transition-longer), transform var(--transition-bezier-longer);
  font-size: 1rem;
}
.pre-container .header button .icon.copy {
  --icon: var(--icon-copy);
  transform-origin: bottom left;
}
.pre-container .header button .icon.check {
  --icon: var(--icon-check-square-offset);
  position: absolute;
  transform: scale(0.5);
  transform-origin: top right;
  opacity: 0;
  inset: 0.5rem;
}
.pre-container .header.active {
  animation: active-shimmer var(--transition-long);
  border-block-end-color: var(--bg-muted-neutral-1);
}
.pre-container .header.active button {
  opacity: 1;
}
.pre-container .header.active button .icon.copy {
  transform: scale(0.5);
  opacity: 0;
}
.pre-container .header.active button .icon.check {
  transform: none;
  opacity: 1;
}
@keyframes active-shimmer {
  to {
    background-position-x: -200%;
  }
}
.pre-container pre {
  margin: 0;
  box-shadow: none;
  border-radius: 0 0 var(--rounded-corner) var(--rounded-corner);
}

#search-modal {
  display: flex;
  position: fixed;
  flex-direction: column;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  z-index: 9999;
  transition: visibility var(--transition), opacity var(--transition);
  inset: 0;
  background-color: var(--shade-color);
  padding-block-start: 15vh;
  width: 100%;
  height: 100vh;
}
#search-modal.active {
  visibility: visible;
  opacity: 1;
}
#search-modal.active #search-modal-content {
  transform: none;
}
#search-modal-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transform: var(--hover);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  transition: border-radius var(--transition), padding var(--transition), max-width var(--transition), transform var(--transition-bezier-longer);
  margin: -0.5rem;
  box-shadow: var(--edge-highlight), var(--shadow-glass);
  border-radius: 2.25rem 2.25rem 1.75rem 1.75rem;
  background-color: var(--glass-bg-1);
  padding: 1rem;
  width: calc(100% - 2rem);
  max-width: calc(var(--content-width) / 1.5);
  overflow: hidden;
}
#search-modal-content:has(#search-results:empty) {
  border-radius: 1.75rem;
  padding: 0.5rem;
  max-width: calc(var(--content-width) / 2);
}
#search-modal-content > div {
  position: relative;
}
#search-modal #search-input {
  flex-shrink: 0;
  box-shadow: var(--edge-highlight);
  border-radius: 9999px;
  padding: 0 1rem;
  width: 100%;
  height: 2.5rem;
}
#search-modal #search-input:placeholder-shown + div .icon {
  transform: none;
  opacity: var(--disabled-opacity);
  pointer-events: all;
}
#search-modal #search-input + div .icon {
  position: absolute;
  transform: translateX(0.5rem);
  opacity: 0;
  transition: opacity var(--transition), transform var(--transition-bezier);
  cursor: help;
  inset-block-start: 0.625rem;
  inset-inline-end: 1rem;
  pointer-events: none;
  color: var(--fg-muted-2);
  font-size: 1.25rem;
}
#search-modal #search-results {
  display: none;
  flex: 1;
  flex-direction: column;
  gap: 0.5rem;
  margin: -1rem;
  padding: 1rem;
  max-height: 50vh;
  overflow: auto;
  scrollbar-width: thin;
}
#search-modal #search-results .item {
  display: inline-flex;
  flex-direction: column;
  box-shadow: var(--edge-highlight);
  border-radius: var(--rounded-corner);
  background-color: var(--bg-muted-1);
  padding: 0.75rem 1rem;
}
#search-modal #search-results .item a {
  text-decoration: none;
}
#search-modal #search-results .item a::after {
  content: " →";
}
#search-modal #search-results .item span {
  margin-block-start: 0.25rem;
  border-block-start: rpx(1) solid var(--bg-muted-2);
  padding-block-start: 0.25rem;
  color: var(--fg-muted-2);
}
#search-modal #search-results .item span strong {
  color: var(--fg-color);
}

#skip-to-content {
  position: absolute;
  transform: translateX(-50%) translateY(calc(-100% - 1rem));
  z-index: 9999;
  transition: backdrop-filter var(--transition), box-shadow var(--transition), transform var(--transition-bezier);
  inset-inline-start: 50vw;
  border-radius: 9999px;
  background-color: var(--glass-bg-1);
  padding: 0.375rem 0.75rem;
  width: max-content;
  text-decoration: none;
}
#skip-to-content:focus-visible, #skip-to-content:focus {
  -webkit-backdrop-filter: var(--blur);
  transform: translateX(-50%) translateY(1rem);
  backdrop-filter: var(--blur);
  box-shadow: var(--edge-highlight), var(--shadow);
}

span.spoiler {
  filter: blur(0.25rem);
  transition: filter var(--transition);
}
span.spoiler:focus, span.spoiler:hover {
  filter: none;
}
span.spoiler.solid {
  filter: none;
  transition: background-color var(--transition), color var(--transition);
  border-radius: var(--rounded-corner-small);
  background-color: var(--fg-muted-1);
  color: transparent;
}
span.spoiler.solid:focus, span.spoiler.solid:hover {
  background-color: transparent;
  color: inherit;
}

.statement-container {
  margin: 1rem 0;
  box-shadow: var(--edge-highlight), var(--shadow);
  border-radius: var(--rounded-corner);
  padding: 1rem;
}
.statement-container :last-child {
  margin-block-end: 0;
}
.statement-container > :nth-child(2) {
  margin-block-start: 0.5rem;
}
.statement-container .title {
  font-weight: var(--font-weight-semi-bold);
}
.statement-container .title .icon {
  vertical-align: -0.125rem;
  margin-inline-end: 0.25rem;
}
.statement-container.archive {
  --accent-color: var(--purple-fg);
  --accent-highlight: hsla(
    var(--purple-h),
    var(--purple-s),
    var(--purple-l),
    var(--disabled-opacity)
  );
  background-color: var(--purple-bg-1);
  color: var(--purple-fg);
}
.statement-container.disclaimer {
  --accent-color: var(--red-fg);
  --accent-highlight: hsla(
    var(--red-h),
    var(--red-s),
    var(--red-l),
    var(--disabled-opacity)
  );
  background-color: var(--red-bg-1);
  color: var(--red-fg);
}
.statement-container.trigger {
  --accent-color: var(--yellow-fg);
  --accent-highlight: hsla(
    var(--yellow-h),
    var(--yellow-s),
    var(--yellow-l),
    var(--disabled-opacity)
  );
  background-color: var(--yellow-bg-1);
  color: var(--yellow-fg);
}

table {
  width: 100%;
  overflow: hidden;
}

thead {
  border-block-start: none;
  color: var(--fg-muted-2);
  font-weight: var(--font-weight-semi-bold);
}

tr:nth-child(even) {
  background-color: var(--bg-muted-1);
}
tr th,
tr td {
  padding: 0.5rem 1rem;
}

tbody tr {
  border-block: 0.0625rem solid var(--bg-muted-2);
}
tbody tr:last-child {
  border-block-end: none;
}

.overflow-auto table {
  width: max-content;
  min-width: 100%;
}

#tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0;
  padding-inline-start: 0;
  list-style: none;
}
#tag-chips li {
  display: flex;
  margin-block: 0;
  padding-inline-start: 0;
}
#tag-chips a {
  display: flex;
  transition: background-color var(--transition), color var(--transition), transform var(--transition-bezier);
  box-shadow: var(--edge-highlight);
  border-radius: 1rem;
  background-color: var(--bg-muted-1);
  padding: 0.25rem;
  padding-inline-start: 0.75rem;
  color: var(--fg-muted-1);
  font-size: var(--font-size-small);
  line-height: 1.5rem;
  text-decoration: none;
}
#tag-chips a:hover {
  background-color: var(--bg-muted-2);
  color: var(--fg-muted-2);
}
#tag-chips a:active {
  transform: var(--active);
}
#tag-chips a::before {
  content: "#";
}
#tag-chips a .counter {
  transition: inherit;
  margin-inline-start: 0.375rem;
  box-shadow: var(--edge-highlight);
  border-radius: inherit;
  background-color: inherit;
  aspect-ratio: 1/1;
  height: 1.5rem;
  line-height: 1.5rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

textarea {
  appearance: none;
  box-shadow: var(--edge-highlight);
  border: none;
  border-radius: var(--rounded-corner);
  background-color: var(--bg-muted-1);
  padding: 1rem;
  resize: none;
  font-size: inherit;
  line-height: inherit;
  font-family: inherit;
}
textarea::placeholder {
  opacity: 1;
  color: var(--fg-muted-1);
}

strong.title {
  color: var(--accent-color);
  font-size: var(--font-size-large);
  line-height: 1;
}

@media (pointer: coarse), (hover: none) {
  .tooltip,
  abbr[title] {
    display: inline-flex;
    position: relative;
    justify-content: center;
  }
  .tooltip::after,
  abbr[title]::after {
    position: absolute;
    top: calc(100% + 0.25rem);
    z-index: 9999;
    backdrop-filter: var(--blur);
    transition: visibility var(--transition), opacity var(--transition), transform var(--transition-bezier);
    box-shadow: var(--edge-highlight), var(--shadow);
    border-radius: var(--rounded-corner-small);
    background-color: var(--glass-bg-1);
    padding: 0.125rem 0.375rem;
    width: max-content;
    content: attr(title);
    -webkit-backdrop-filter: var(--blur);
    transform: translateY(-0.5rem) scale(0.5);
    transform-origin: top;
    visibility: hidden;
    opacity: 0;
    max-width: calc(var(--content-width) / 3);
    color: var(--fg-muted-2);
    font-size: var(--font-size-small);
  }
  .tooltip:focus::after, .tooltip:hover::after,
  abbr[title]:focus::after,
  abbr[title]:hover::after {
    transform: none;
    visibility: visible;
    opacity: 1;
  }
}
.visually-hidden {
  position: absolute !important;
  clip-path: inset(50%) !important;
  margin: -1px !important;
  border-width: 0 !important;
  padding: 0 !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

h1:hover .zola-anchor,
h2:hover .zola-anchor,
h3:hover .zola-anchor,
h4:hover .zola-anchor,
h5:hover .zola-anchor,
h6:hover .zola-anchor {
  transform: none;
  opacity: 1;
}
h1:has(.zola-anchor),
h2:has(.zola-anchor),
h3:has(.zola-anchor),
h4:has(.zola-anchor),
h5:has(.zola-anchor),
h6:has(.zola-anchor) {
  position: relative;
}

.zola-anchor {
  position: absolute;
  transform: translateX(0.25em);
  opacity: 0;
  transition: color var(--transition), opacity var(--transition), transform var(--transition-bezier);
  inset-inline-start: -1.25em;
  padding-inline-end: 0.25em;
  color: var(--fg-muted-1);
  line-height: 1;
}
@media only screen and (max-width: 720px) {
  .zola-anchor {
    display: none;
  }
}
.zola-anchor:hover {
  color: var(--fg-muted-2);
}
.zola-anchor:active {
  transform: var(--active);
}
.zola-anchor:focus-visible {
  opacity: 1;
}

:target .zola-anchor {
  transform: none;
  opacity: var(--disabled-opacity);
}

body > div:last-child:has(div:last-child[style]:not([class]):not([id])) {
  z-index: 9999 !important;
  background-color: var(--shade-color) !important;
}

body > div:last-child > div:last-child[style]:not([class]):not([id]) {
  box-shadow: var(--edge-highlight), var(--shadow-glass);
  border-radius: calc(var(--rounded-corner) + 1rem) !important;
  background-color: hsla(var(--red-h), calc(var(--red-s) - var(--red-s) * 0.7), calc(var(--red-l) + (100% - var(--red-l)) * 0.9), var(--dim-opacity)) !important;
  padding: 1rem !important;
  width: fit-content;
  max-width: calc(100% - 2rem);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  filter: none !important;
}
@media (prefers-color-scheme: dark) {
  body > div:last-child > div:last-child[style]:not([class]):not([id]) {
    background-color: hsla(var(--red-h), calc(var(--red-s) - var(--red-s) * 0.6), calc(var(--red-l) - var(--red-l) * 0.8), var(--dim-opacity)) !important;
  }
}

body > div:last-child > div:last-child[style]:not([class]):not([id]) > p[style]:first-child {
  margin-block-end: 1rem !important;
  color: var(--red-fg) !important;
  font-weight: var(--font-weight-semi-bold) !important;
  font-size: var(--font-size-large) !important;
}

body > div:last-child > div:last-child[style]:not([class]):not([id]) > pre[style]:last-child {
  border-radius: var(--rounded-corner) !important;
  background-color: var(--red-bg-1) !important;
  padding: 0.75rem 1rem !important;
  color: var(--red-fg) !important;
  font-weight: var(--font-weight-normal) !important;
}

.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.5rem;
  margin-block: 1rem;
}
.icon-grid:hover a:not(:hover) {
  opacity: var(--disabled-opacity);
}
.icon-grid a {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 1rem;
  transition: all var(--transition), transform var(--transition-bezier);
  box-shadow: var(--edge-highlight), var(--shadow);
  border-radius: var(--rounded-corner);
  background-color: var(--bg-muted-1);
  padding: 1rem;
  color: var(--fg-muted-2);
  text-decoration: none;
}
.icon-grid a:hover {
  transform: translateY(-0.25rem);
  opacity: 1;
  filter: none;
  box-shadow: var(--edge-highlight), var(--shadow-glass);
  background-color: var(--bg-muted-2);
}
.icon-grid a:active {
  transform: var(--active);
}
.icon-grid a .icon {
  margin: 0;
  width: 4rem;
  height: 4rem;
}
.icon-grid a .details {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.icon-grid a .details strong {
  font-weight: var(--font-weight-semi-bold);
  font-size: var(--font-size-large);
}
.icon-grid a .details p {
  margin: 0;
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-x-small);
  line-height: 1rem;
}

.media-grid,
.media-grid-markdown p {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.5rem;
}
.media-grid img,
.media-grid video,
.media-grid-markdown p img,
.media-grid-markdown p video {
  margin: 0;
}

#nanolog-higher,
#nanolog-lower {
  display: block;
  position: relative;
  line-height: 1;
}
#nanolog-higher::before,
#nanolog-lower::before {
  display: block;
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: -1.625rem;
  border: 0.25rem solid var(--accent-color);
  border-radius: 50%;
  background-color: var(--bg-color);
  width: 1rem;
  height: 1rem;
  content: "";
}

#nanolog-higher {
  margin-block-end: -1rem;
}

#nanolog-post {
  margin: 0 auto;
  border-inline-start: 0.25rem solid var(--accent-color);
  padding-inline-start: 1rem;
  width: min(var(--content-width) / 1.5, 100%);
}

#nanolog-heading {
  margin-block-start: 2rem;
}

.pathetic {
  outline: 0.0625rem solid var(--bg-muted-2);
  box-shadow: var(--edge-highlight), var(--shadow-glass);
  background-image: radial-gradient(circle, var(--bg-muted-1) 0.0625rem, transparent 0.0625rem), linear-gradient(to bottom right, var(--bg-color) 50%, var(--bg-muted-1), var(--bg-muted-2));
  background-size: 1rem 1rem, auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-inline: auto;
  margin-block-start: 3rem;
  background-color: transparent;
  max-width: calc(var(--content-width) / 2);
}
.pathetic p {
  margin-block: 0;
}
.pathetic span.heart {
  color: var(--red-fg);
}
.pathetic .icon.heart {
  vertical-align: -0.125rem;
}
.pathetic .button {
  flex-shrink: 0;
}

.rainbow {
  filter: drop-shadow(0.0625rem 0.0625rem rgba(0, 0, 0, 0.6));
  background-image: linear-gradient(to right, var(--red-fg), var(--orange-fg), var(--yellow-fg), var(--green-fg), var(--blue-fg), var(--purple-fg));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.container-fill {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-block-start: -6.25rem !important;
  padding-block: 3rem;
  height: 100vh;
  min-height: fit-content;
}
@supports (height: 100svh) {
  .container-fill {
    height: 100svh;
  }
}

/*# sourceMappingURL=daudix-global.css.map */

#abyss {
  filter: blur(0.25rem);
}

#age {
  display: inline-flex;
  position: relative;
  cursor: crosshair;
  box-shadow: var(--edge-highlight), var(--shadow);
  border-radius: var(--rounded-corner-small);
  background-color: hsl(0, 0%, 20%);
  padding-inline: 0.375rem;
  height: 1.5rem;
  overflow-y: hidden;
  color: white;
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
}
#age::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  background-image: linear-gradient(to bottom, black, transparent, black);
  content: "";
}
#age:hover .char.digit {
  transform: translateY(calc(-100% + 1.5rem));
  transition-delay: var(--delay);
}
#age .char.digit {
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-long) cubic-bezier(0.618, 0, 0.584, 1.126);
  height: fit-content;
}
#age .char.digit span {
  opacity: var(--disabled-opacity);
}
#age .char.digit span.true {
  opacity: 1;
}

#badges {
  position: relative;
  padding-block-start: 0.75rem;
}
#badges:hover #here {
  transform: none;
  opacity: 1;
}
#badges:has(#badges-popup-expand:checked) #here {
  transform: scale(0.5);
  opacity: 0;
}
#badges > small {
  vertical-align: 0.0625rem;
}
#badges > small a {
  color: var(--fg-muted-2);
  font-weight: var(--font-weight-normal);
  text-decoration: none;
}
#badges > p {
  margin: 0.5rem 0 1rem;
}
#badges .badges-marquee-wrapper {
  content-visibility: auto;
  margin: -1rem -1rem -2.125rem;
  padding: 1rem 0 2.125rem;
  overflow: hidden;
}
#badges .badges-marquee {
  display: flex;
}
#badges .badges-marquee:hover ul {
  animation-play-state: paused;
}
#badges .badges-marquee:hover ul img:not(:hover),
#badges .badges-marquee:hover ul iframe:not(:hover),
#badges .badges-marquee:hover ul #more:not(:hover) {
  opacity: var(--disabled-opacity);
  filter: blur(0.125rem);
}
#badges .badges-marquee ul {
  display: flex;
  flex-shrink: 0;
  animation: badges-marquee-scroll var(--duration) linear infinite;
  transition: var(--transition);
  margin: 0;
  padding: 0;
  list-style: none;
}
@keyframes badges-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
#badges .badges-marquee li {
  display: flex;
  flex-shrink: 0;
  margin-inline-end: 0.25rem;
  margin-block: 0;
  padding: 0;
  height: fit-content;
  line-height: 0;
}
#badges .badges-marquee a:active img,
#badges .badges-marquee a:active iframe {
  transform: var(--active);
}
#badges .badges-marquee img,
#badges .badges-marquee iframe,
#badges .badges-marquee #more {
  transition: all var(--transition), transform var(--transition-bezier);
  margin: 0;
  width: 5.5rem;
  height: 1.9375rem;
}
#badges .badges-marquee img:hover,
#badges .badges-marquee iframe:hover,
#badges .badges-marquee #more:hover {
  transform: translate(0.125rem, -0.125rem);
  filter: var(--drop-shadow);
}
#badges .badges-marquee iframe {
  box-shadow: none;
  border-radius: 0;
}
#badges .badges-marquee #more {
  display: flex;
  justify-content: center;
  border: 0.0625rem dashed var(--fg-muted-1);
  color: var(--fg-color);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-x-small);
  line-height: 1;
  text-decoration: none;
}
#badges .badges-marquee #more:hover {
  border-color: var(--contrast-color);
  background-color: var(--accent-color);
  color: var(--contrast-color);
}
#badges .badges-marquee #more:active {
  transform: var(--active);
}
#badges .badges-marquee #more span {
  display: inline-block;
  margin-block-start: 0.125rem;
}
#badges #badges-popup-expand:checked + label .icon.plus {
  transform: rotate(45deg);
  opacity: 0;
}
#badges #badges-popup-expand:checked + label .icon.x {
  transform: none;
  opacity: 1;
}
#badges #badges-popup-expand:checked ~ #badges-popup {
  transform: none;
  visibility: visible;
  opacity: 1;
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  background-color: var(--glass-bg-1);
}
#badges #badges-popup-expand:focus-visible + label {
  animation: focus-in var(--transition);
  outline: 0.125rem solid var(--accent-color);
  outline-offset: 0.125rem;
}
#badges #badges-popup-expand + label {
  position: absolute;
  transition: all var(--transition), transform var(--transition-bezier);
  cursor: pointer;
  inset-block-start: 0.5rem;
  inset-inline-end: 0.5rem;
  border-radius: var(--rounded-corner-small);
  width: 2rem;
  height: 2rem;
  color: var(--accent-color);
}
#badges #badges-popup-expand + label:hover {
  box-shadow: var(--edge-highlight);
  background-color: var(--bg-muted-1);
}
#badges #badges-popup-expand + label:active {
  transform: var(--active);
}
#badges #badges-popup-expand + label .icon {
  position: absolute;
  transition: all var(--transition), transform var(--transition-bezier);
  inset: 0.5rem;
}
#badges #badges-popup-expand + label .icon.x {
  transform: rotate(-45deg);
  opacity: 0;
}
#badges #badges-popup {
  position: absolute;
  transform: scale(0.5) translate(1rem, -1rem);
  transform-origin: top right;
  visibility: hidden;
  opacity: 0;
  z-index: 1;
  transition: all var(--transition), transform var(--transition-bezier);
  inset-block-start: 2.5rem;
  inset-inline-end: 2.5rem;
  box-shadow: var(--edge-highlight), var(--shadow-glass);
  border-radius: var(--rounded-corner);
  padding: 1rem;
  width: calc(var(--content-width) / 3);
}
#badges #badges-popup ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
  padding-inline-start: 0;
  list-style: none;
}
#badges #badges-popup ul li {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-block: 0;
  padding-inline-start: 0;
}
#badges #badges-popup ul li img {
  margin: 0;
}
#badges #badges-popup ul li span {
  color: var(--fg-muted-2);
  font-size: var(--font-size-x-small);
}
#badges #here {
  --mask: url("here.gif");
  position: absolute;
  transform: scale(0.5);
  transform-origin: 2.25rem 11.375rem;
  opacity: 0;
  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
  mask-size: cover;
  transition: var(--transition-bezier);
  inset-block-start: calc(-100% - 3rem);
  inset-inline-end: -2.5rem;
  background-color: var(--accent-color);
  width: 4.75rem;
  height: 12.125rem;
  pointer-events: none;
}
@media (prefers-reduced-motion) {
  #badges #here {
    --mask: url("here-static.gif");
  }
}
@media only screen and (max-width: 1024px) {
  #badges #here {
    display: none;
  }
}

.masonry .item.beeper {
  position: relative;
  padding: 0.5rem;
}

.beeper-display {
  flex: 1;
  box-shadow: var(--edge-highlight), var(--shadow-inset);
  border-radius: var(--rounded-corner-small);
  background-image: linear-gradient(to bottom, transparent, var(--bg-muted-2) 50%, var(--accent-highlight) 50%, var(--bg-muted-1));
  background-color: var(--bg-muted-2);
  padding: 0.5rem;
  color: var(--fg-muted-2);
  font-size: var(--font-size-small);
  line-height: 1.25rem;
  font-family: var(--font-monospace), var(--font-ui-monospace);
  white-space: pre;
}
@media (prefers-color-scheme: dark) {
  .beeper-display {
    background-image: linear-gradient(to bottom, var(--bg-muted-1), var(--accent-highlight) 50%, var(--bg-muted-2) 50%, transparent);
  }
}

.beeper-logo {
  position: absolute;
  inset-block-end: 0.5rem;
  inset-inline-end: 2.5rem;
  color: var(--fg-muted-1);
  font-style: italic;
  font-weight: var(--font-weight-extra-bold);
  font-size: var(--font-size-small);
  font-family: var(--font-monospace), var(--font-ui-monospace);
  letter-spacing: -0.05em;
}

.beeper-actions {
  margin-block: 1rem 0;
}
.beeper-actions button {
  border-radius: 50%;
  padding: 0.375rem;
  font-size: 1.25rem;
  line-height: 0;
}

.real-time {
  color: var(--red-fg);
}
.real-time .icon {
  vertical-align: -0.125rem;
}

#beeper-real-time:checked + label {
  color: var(--red-fg);
}
#beeper-real-time:checked + label::before {
  opacity: 1;
  animation: beeper-radar 1s ease-out infinite var(--transition);
}
#beeper-real-time + label {
  position: relative;
  transition: var(--transition);
  color: var(--fg-muted-1);
  line-height: 0;
}
#beeper-real-time + label::before {
  position: absolute;
  transform: scale(0);
  opacity: 0;
  transition: var(--transition);
  inset: 0;
  border-radius: 50%;
  background-image: radial-gradient(var(--red-bg-1), var(--red-bg-1)), radial-gradient(var(--red-bg-1) 25%, transparent 25%), radial-gradient(var(--red-bg-1) 50%, transparent 50%);
  content: "";
}
@keyframes beeper-radar {
  25% {
    opacity: 1;
  }
  50% {
    transform: scale(3);
    opacity: 1;
  }
  to {
    transform: scale(3);
    opacity: 0;
  }
}

#beeper-countdown {
  --angle: 0deg;
  margin-inline-start: 0.5rem;
  border-radius: 50%;
  background: conic-gradient(var(--accent-color) var(--angle), transparent 0deg);
  width: 1rem;
  height: 1rem;
}

#beeper-popup-expand:checked ~ label .icon.question {
  transform: rotate(45deg);
  opacity: 0;
}
#beeper-popup-expand:checked ~ label .icon.x-circle {
  transform: none;
  opacity: 1;
}
#beeper-popup-expand:checked ~ #beeper-popup {
  transform: perspective(var(--content-width)) rotateX(0);
  visibility: visible;
  opacity: 1;
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  background-color: var(--glass-bg-1);
}
#beeper-popup-expand:focus-visible + label {
  animation: focus-in var(--transition);
  outline: 0.125rem solid var(--accent-color);
  outline-offset: 0.125rem;
}
#beeper-popup-expand ~ label {
  position: absolute;
  transition: all var(--transition), transform var(--transition-bezier);
  cursor: pointer;
  inset-block-end: 0.25rem;
  inset-inline-end: 0.25rem;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  color: var(--fg-muted-1);
  font-size: 1.25rem;
}
#beeper-popup-expand ~ label:hover {
  box-shadow: var(--edge-highlight);
  background-color: var(--bg-muted-1);
}
#beeper-popup-expand ~ label:active {
  transform: var(--active);
}
#beeper-popup-expand ~ label .icon {
  position: absolute;
  transition: all var(--transition), transform var(--transition-bezier);
  inset: 0.375rem;
}
#beeper-popup-expand ~ label .icon.x-circle {
  transform: rotate(-45deg);
  opacity: 0;
}

#beeper-popup {
  position: absolute;
  transform: perspective(var(--content-width)) rotateX(-75deg);
  transform-origin: top;
  visibility: hidden;
  opacity: 0;
  z-index: 1;
  transition: all var(--transition), transform var(--transition-bezier);
  inset-block-start: 100%;
  inset-inline: 1rem;
  box-shadow: var(--edge-highlight), var(--shadow-glass);
  border-radius: 0 0 var(--rounded-corner) var(--rounded-corner);
  padding: 1rem;
}

#clock {
  transition: all var(--transition), transform var(--transition-bezier);
  box-shadow: var(--edge-highlight);
  border-radius: var(--rounded-corner-small);
  background-color: var(--bg-muted-1);
  padding-inline: 0.375rem;
  text-decoration: none;
  animation: clock-blink 1s infinite;
  color: var(--accent-color);
  font-weight: var(--font-weight-semi-bold);
  font-variant-numeric: tabular-nums;
}
@keyframes clock-blink {
  25% {
    color: var(--bg-muted-1);
  }
  50% {
    color: var(--accent-color);
  }
}

.masonry .item.fancy-list ul {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-inline: -0.5rem;
  margin-block-start: 0;
  margin-block-end: -0.5rem;
  padding-inline-start: 0;
  list-style: none;
}
.masonry .item.fancy-list ul li {
  margin-block: 0;
  box-shadow: var(--edge-highlight);
  border-radius: var(--rounded-corner-small);
  background-color: var(--bg-muted-1);
  padding: 0.5rem 0.75rem;
}

#shy {
  box-shadow: none;
  border-radius: 0;
  background-color: transparent;
  padding: 0;
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 0.0625rem;
}
#shy:hover {
  text-decoration-style: solid;
}
#shy:active {
  transform: none;
}
#shy:disabled {
  opacity: var(--disabled-opacity);
  cursor: not-allowed;
}

#flutter {
  position: fixed;
  transform: translateY(100%);
  visibility: hidden;
  z-index: 1;
  margin: 0;
  inset-block-end: 0;
  inset-inline-end: 1rem;
  width: 8rem;
  height: 6.875rem;
}
@media only screen and (max-width: 480px) {
  #flutter {
    width: calc(8rem / 2);
    height: calc(6.875rem / 2);
  }
}
#flutter.active {
  animation: peek var(--transition-long);
}
@keyframes peek {
  50%, 75% {
    transform: translateY(0);
    visibility: visible;
    filter: var(--drop-shadow);
  }
}

.masonry .item.games {
  position: relative;
}
.masonry .item.games:has(ul:hover) li:not(:hover) {
  opacity: var(--disabled-opacity);
  filter: blur(0.125rem);
}
.masonry .item.games ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin: -0.5rem;
  margin-block-start: 0;
}
.masonry .item.games li {
  display: flex;
  position: relative;
  transition: all var(--transition), transform var(--transition-bezier);
  box-shadow: none !important;
  background-color: transparent !important;
  padding: 0 !important;
}
.masonry .item.games li:hover {
  transform: var(--hover);
  filter: var(--drop-shadow);
}
.masonry .item.games li:active {
  transform: var(--active);
}
.masonry .item.games li a {
  display: inherit;
  justify-content: center;
  border-radius: inherit;
}
.masonry .item.games picture,
.masonry .item.games img {
  border-radius: inherit;
}
.masonry .item.games img {
  margin-block: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.masonry .item.games .games-extra {
  display: none;
  margin-block-start: 1rem;
}

#show-more {
  position: absolute;
}
#show-more:focus-visible + label {
  animation: focus-in var(--transition);
  outline: 0.125rem solid var(--accent-color);
  outline-offset: 0.125rem;
}
@supports not selector(:focus-visible) {
  #show-more:focus + label {
    animation: focus-in var(--transition);
    outline: 0.125rem solid var(--accent-color);
    outline-offset: 0.125rem;
  }
}
#show-more + label {
  display: flex;
  position: absolute;
  transition: all var(--transition), transform var(--transition-bezier);
  inset-block-start: 0.5rem;
  inset-inline-end: 0.5rem;
  border-radius: var(--rounded-corner-small);
  padding: 0.75rem 0.5rem;
  color: var(--fg-muted-1);
  font-weight: var(--font-weight-semi-bold);
  font-size: var(--font-size-small);
  line-height: 1rem;
  -webkit-user-select: none;
  user-select: none;
}
#show-more + label:hover {
  box-shadow: var(--edge-highlight);
  background-color: var(--bg-muted-1);
  color: var(--fg-muted-2);
}
#show-more + label:active {
  transform: var(--active);
}
#show-more + label .less {
  display: none;
}
#show-more:checked + label .more {
  display: none;
}
#show-more:checked + label .less {
  display: inline;
}
#show-more:checked ~ .games-extra {
  display: grid;
}

.masonry {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-start: 2rem;
}
.masonry .column {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 16rem;
}
.masonry .item {
  box-shadow: var(--edge-highlight), var(--shadow);
  border-radius: 1rem;
  background-color: var(--bg-muted-1);
  padding: 1rem;
}
.masonry .item :first-child {
  margin-block-start: 0;
}
.masonry .item :last-child {
  margin-block-end: 0;
}

#online-indicator {
  transition: all var(--transition), transform var(--transition-bezier);
  box-shadow: var(--edge-highlight);
  border-radius: var(--rounded-corner-small);
  background-color: var(--bg-muted-1);
  padding-inline: 0.375rem;
  text-decoration: none;
  display: inline-block;
  color: var(--fg-muted-2);
  font-weight: var(--font-weight-semi-bold);
}
#online-indicator.online {
  background-color: var(--green-bg-1);
  color: var(--green-fg);
}
#online-indicator.online .icon {
  --icon: var(--icon-circle);
}
#online-indicator.idle {
  background-color: var(--yellow-bg-1);
  color: var(--yellow-fg);
}
#online-indicator.idle .icon {
  --icon: var(--icon-moon);
}
#online-indicator.dnd {
  background-color: var(--red-bg-1);
  color: var(--red-fg);
}
#online-indicator.dnd .icon {
  --icon: var(--icon-minus-circle);
}
#online-indicator .icon {
  --icon: var(--icon-circle-dashed);
  vertical-align: -0.1875rem;
  margin-inline-end: 0.25rem;
}

.masonry .item.online ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
}
.masonry .item.online ul li {
  display: flex;
  box-shadow: none;
  border-radius: 0;
  background-color: transparent;
  padding: 0;
}
.masonry .item.online ul li img {
  display: inline-block;
  margin: 0;
  margin-inline-end: 0.5rem;
  width: 2rem;
  height: 2rem;
}
.masonry .item.online ul li a {
  display: flex;
  flex: 1;
  align-items: center;
  transition: all var(--transition), transform var(--transition-bezier);
  box-shadow: var(--edge-highlight);
  border-radius: var(--rounded-corner-small);
  background-color: var(--bg-muted-1);
  padding: 0.5rem;
  color: var(--fg-muted-2);
  text-decoration: none;
}
.masonry .item.online ul li a:hover {
  background-color: var(--bg-muted-2);
}
.masonry .item.online ul li a:active {
  transform: var(--active);
}
.masonry .item.online ul li a.favorite {
  position: relative;
  overflow: hidden;
}
.masonry .item.online ul li a.favorite::before {
  position: absolute;
  transform: rotate(-10deg);
  -webkit-mask-image: var(--icon-star);
  mask-image: var(--icon-star);
  -webkit-mask-size: cover;
  mask-size: cover;
  inset-block: 0;
  inset-inline-end: -1rem;
  background-color: var(--bg-muted-1);
  width: 4rem;
  height: 4rem;
  content: "";
}

@font-face {
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/pacifico.woff2") format("woff2");
  font-family: "Pacifico";
  font-display: swap;
  font-synthesis: none;
  unicode-range: U+0000-00FF;
}
.pancake {
  display: flex;
  position: relative;
  flex-direction: row;
  align-items: center;
  gap: 2rem;
}
@media only screen and (max-width: 960px) {
  .pancake {
    flex-direction: column-reverse;
  }
}

#vishy-jadhav {
  --shift: 0.1875rem;
  filter: url("#squiggly-1");
  animation: squiggly 0.3s step-end infinite;
  transition: var(--transition-bezier);
  margin: 0;
  margin-block: 0 3rem;
  width: fit-content;
  font-weight: 400;
  font-size: 5rem;
  font-family: "Pacifico";
  letter-spacing: 0;
  user-select: none;
  text-decoration: none;
}
#vishy-jadhav:hover, #vishy-jadhav:active {
  color: #9bdbf5;
}
#vishy-jadhav:hover {
  transform: translate(calc(var(--shift) * 3), calc(var(--shift) * -1 * 3));
  text-shadow: calc(var(--shift) * -1) var(--shift) #1b98d1, calc(var(--shift) * -1 * 2) calc(var(--shift) * 2) #fde85f, calc(var(--shift) * -1 * 3) calc(var(--shift) * 3) #ec4141;
}
#vishy-jadhav:active {
  --shift: -0.1875rem;
  transform: translate(calc(var(--shift) * 3), calc(var(--shift) * -1 * 3));
}
@media only screen and (max-width: 960px) {
  #vishy-jadhav {
    margin-inline: auto;
    margin-block-end: 2rem;
    text-align: center;
  }
}
@media only screen and (max-width: 480px) {
  #vishy-jadhav {
    font-size: 3.375rem;
  }
}
@keyframes squiggly {
  from {
    filter: url("#squiggly-1");
  }
  33% {
    filter: url("#squiggly-2");
  }
  66% {
    filter: url("#squiggly-3");
  }
}

.masonry .item.player {
  display: flex;
  gap: 1rem;
  padding: 0.5rem;
}
.masonry .item.player.has-cover {
  animation: cover-alternate 60s ease-in-out infinite;
  background-image: var(--bg-overlay), var(--blurnail);
  background-position: center;
  background-size: 2000%;
}
.masonry .item.player.has-cover #now-playing,
.masonry .item.player.has-cover #last-played {
  color: var(--fg-muted-neutral-1);
}
.masonry .item.player.has-cover #player-artist,
.masonry .item.player.has-cover #player-go {
  color: var(--fg-muted-neutral-2);
}
.masonry .item.player.has-cover #player-go {
  background-color: var(--bg-muted-neutral-1);
}
.masonry .item.player.has-cover #player-go:hover {
  background-color: var(--bg-muted-neutral-2);
}
.masonry .item.player.playing #cd-container {
  transform: translateX(-1.75rem);
}
.masonry .item.player.playing #cd {
  animation-play-state: running;
}
.masonry .item.player.playing #cd-shade {
  box-shadow: var(--shadow);
}
.masonry .item.player.playing #now-playing {
  transform: none;
  visibility: visible;
  opacity: 1;
}
.masonry .item.player.playing #last-played {
  transform: translateY(0.625rem);
  visibility: hidden;
  opacity: 0;
}

#cover-container {
  position: relative;
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
}

#cover {
  position: relative;
  z-index: 1;
  margin: 0;
  border-radius: var(--rounded-corner-small);
  width: 4rem;
  height: 4rem;
}

#cd-container {
  position: absolute;
  transition: var(--transition-long);
  inset: 0;
}

#cd {
  position: absolute;
  animation: cd-spin infinite linear 1.6s;
  animation-play-state: paused;
  margin: 0;
  width: 4rem;
  height: 4rem;
  user-select: none;
  -webkit-user-select: none;
}
@keyframes cd-spin {
  to {
    transform: rotate(1turn);
  }
}

#cd-shade {
  position: absolute;
  transition: var(--transition-long);
  inset: 0.25rem;
  border-radius: 50%;
  background-image: linear-gradient(to left, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0.987) 8.1%, hsla(0, 0%, 0%, 0.951) 15.5%, hsla(0, 0%, 0%, 0.896) 22.5%, hsla(0, 0%, 0%, 0.825) 29%, hsla(0, 0%, 0%, 0.741) 35.3%, hsla(0, 0%, 0%, 0.648) 41.2%, hsla(0, 0%, 0%, 0.55) 47.1%, hsla(0, 0%, 0%, 0.45) 52.9%, hsla(0, 0%, 0%, 0.352) 58.8%, hsla(0, 0%, 0%, 0.259) 64.7%, hsla(0, 0%, 0%, 0.175) 71%, hsla(0, 0%, 0%, 0.104) 77.5%, hsla(0, 0%, 0%, 0.049) 84.5%, hsla(0, 0%, 0%, 0.013) 91.9%, hsla(0, 0%, 0%, 0) 100%);
  width: 3.5rem;
  height: 3.5rem;
}

#player-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  margin-block: 0.25rem;
  min-width: 0;
}

#player-status {
  position: relative;
  height: 0.78125rem;
  overflow: hidden;
}

#now-playing,
#last-played {
  display: block;
  position: absolute;
  transition: var(--transition);
  color: var(--fg-muted-1);
  font-size: var(--font-size-xx-small);
  line-height: 1.25;
}

#now-playing {
  transform: translateY(-0.625rem);
  visibility: hidden;
  opacity: 0;
}

#player-title-container,
#player-artist-container {
  line-height: 1;
}

#player-title,
#player-artist {
  display: inline-block;
  line-height: 1.25;
  white-space: nowrap;
}

#player-title {
  color: var(--fg-color);
}

#player-artist {
  color: var(--fg-muted-2);
  font-size: var(--font-size-small);
}

#player-go {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  transition: all var(--transition), transform var(--transition-bezier);
  box-shadow: var(--edge-highlight);
  border-radius: var(--rounded-corner-small);
  background-color: var(--bg-muted-1);
  width: 2rem;
  color: var(--fg-muted-2);
}
#player-go:hover {
  background-color: var(--bg-muted-2);
}
#player-go:active {
  transform: var(--active);
}

#polaroid {
  display: block;
  position: relative;
  flex-shrink: 0;
  transform: perspective(var(--content-width)) rotate(5deg) rotateX(5deg);
  transform-origin: 50% 1rem;
  transition: var(--transition-bezier);
  box-shadow: var(--shadow-glass);
  border-radius: var(--rounded-corner-small);
  background-color: white;
  padding: 0.5rem;
  width: 10rem;
  overflow: hidden;
}
@media only screen and (max-width: 960px) {
  #polaroid {
    margin-block-start: 3.25rem;
  }
}
#polaroid::after {
  display: block;
  position: absolute;
  transform: perspective(var(--content-width)) rotate(-5deg) rotateX(-5deg);
  z-index: 1;
  filter: hue-rotate(calc(var(--accent-h) * 1deg));
  transition: transform var(--transition-bezier);
  inset-block-start: 0.25rem;
  inset-inline-start: calc(50% - 0.7813rem);
  background-image: url("thumbtack.png");
  background-size: cover;
  width: 1.5625rem;
  height: 1.1875rem;
  pointer-events: none;
  content: "";
}
#polaroid:hover {
  transform: none;
  box-shadow: var(--shadow);
}
#polaroid:hover::after {
  transform: none;
}
#polaroid:hover #polaroid-shine {
  transform: rotate(35deg);
  inset-block-start: -5rem;
  background-color: transparent;
}
#polaroid #polaroid-shine {
  position: absolute;
  transform: rotate(30deg);
  opacity: 0.3;
  z-index: 1;
  filter: blur(0.25rem);
  transition: var(--transition-bezier);
  inset-block-start: -2.5rem;
  inset-inline: -3.5rem;
  background-color: white;
  height: 50%;
  pointer-events: none;
}
#polaroid #polaroid-photo {
  position: relative;
  width: 9rem;
  height: 9rem;
}
#polaroid #polaroid-photo::after {
  position: absolute;
  inset-block-end: -0.25rem;
  inset-inline-end: 0;
  background-image: linear-gradient(to right, #ff6188, #fc9867, #ffd866, #a9dc76, #78dce8, #ab9df2);
  width: 3rem;
  height: 0.5rem;
  content: "";
}
#polaroid #polaroid-photo img {
  margin: 0;
}
#polaroid #polaroid-title,
#polaroid #statuscafe-content,
#polaroid #statuscafe-link {
  display: block;
  color: rgba(0, 0, 0, 0.8);
  line-height: 1;
  font-family: var(--font-monospace), var(--font-ui-monospace);
}
#polaroid #polaroid-title {
  margin-block-start: 0.5rem;
  font-weight: var(--font-weight-semi-bold);
  font-size: var(--font-size-xx-small);
  text-transform: uppercase;
}
#polaroid #statuscafe-content {
  margin-block-start: 0.25rem;
  font-size: var(--font-size-xx-small);
}
#polaroid #statuscafe-link {
  margin-block-start: 0.5rem;
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-xx-small);
  text-decoration: none;
}
#polaroid #statuscafe-link::after {
  content: " →";
}
#polaroid #statuscafe-link:hover {
  text-decoration: underline;
}
#polaroid #statuscafe-face {
  float: inline-end;
  color: black;
  font-size: var(--font-size-medium);
  line-height: 0.625rem;
}

#scroll-down {
  position: absolute;
  transform: translateX(-50%);
  inset-block-end: 3rem;
  inset-inline-start: 50%;
  width: 2rem;
  color: var(--accent-color);
  font-size: 2rem;
  line-height: 0;
}
#scroll-down .icon {
  opacity: var(--disabled-opacity);
  animation: arrow-blink 0.6s ease-out alternate infinite;
}
#scroll-down .icon:first-of-type {
  margin-block-end: -1.25rem;
}
#scroll-down .icon:last-of-type {
  animation-delay: 0.2s;
}
@media only screen and (max-width: 480px) {
  #scroll-down {
    display: none;
  }
}

.fancy-list.snug-nook {
  --accent-color: var(--orange-fg);
  --bg-muted-1: var(--orange-bg-1);
  --bg-muted-2: var(--orange-bg-2);
  position: relative;
  transition: all var(--transition), transform var(--transition-bezier);
}
.fancy-list.snug-nook:hover {
  background-color: var(--bg-muted-2);
}
.fancy-list.snug-nook:active {
  transform: var(--active);
}
.fancy-list.snug-nook div {
  display: flex;
  position: absolute;
  gap: 0.5rem;
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
  color: var(--accent-color);
  font-size: 1.25rem;
}
.fancy-list.snug-nook a {
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
}
.fancy-list.snug-nook p:last-of-type {
  margin-inline-end: 3rem;
  margin-block-end: 0;
}
.fancy-list.snug-nook img {
  position: absolute;
  transform: rotate(10deg);
  margin: 0;
  inset-block-end: -0.5rem;
  inset-inline-end: -0.5rem;
  width: 4rem;
  height: 4rem;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

@font-face {
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/commit-mono.woff2") format("woff2");
  font-family: "Adwaita Mono";
  font-display: swap;
  font-synthesis: none;
  unicode-range: 2726;
}
#splash {
  display: flex;
  position: fixed;
  grid-area: splash;
  justify-content: center;
  align-items: center;
  z-index: 3;
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  transition: var(--transition-longer);
  background-image: var(--bg-overlay);
  width: 100%;
  height: 100vh;
  line-height: 1;
}
#splash:not(:target):has(#splash-state:checked) {
  transform: perspective(var(--content-width)) rotateX(45deg) rotate(-15deg) scale(0);
  visibility: hidden;
}
#splash:target {
  outline: none;
}
#splash:target #splash-enter-input {
  display: none;
}
#splash:target #splash-enter-href {
  display: flex;
}
@supports (height: 100dvh) {
  #splash {
    height: 100dvh;
  }
}
#splash svg {
  fill: currentColor;
}
#splash > svg:last-of-type {
  position: absolute;
  inset-block-end: 1rem;
  inset-inline-start: 1rem;
  width: 9.5625rem;
  height: 1.875rem;
}

#splash-content {
  display: flex;
  position: relative;
  flex-direction: column;
  gap: 1rem;
  animation: fade-in-zoom var(--transition-bezier-longer);
}
#splash-content a {
  color: inherit;
}
#splash-content > div:nth-of-type(1) {
  display: flex;
  gap: 0.5rem;
}
#splash-content > div:nth-of-type(1) div {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: center;
}
#splash-content > div:nth-of-type(1) div svg {
  width: 4rem;
  height: 4rem;
}
#splash-content > div:nth-of-type(1) div span {
  font-size: var(--font-size-xx-small);
}
#splash-content #splash-enter-input,
#splash-content #splash-enter-href {
  display: flex;
  justify-content: space-between;
  transition: font-weight var(--transition);
  border-block: 0.125rem solid currentColor;
  padding-block-end: 0.1875rem;
  color: inherit;
  font-weight: var(--font-weight-bold);
  font-size: 3.125rem;
  letter-spacing: -0.05em;
  text-decoration: underline solid;
  text-decoration-color: transparent;
  text-decoration-thickness: 0.125em;
  text-underline-offset: 0.25em;
  text-transform: uppercase;
}
#splash-content #splash-enter-input:hover,
#splash-content #splash-enter-href:hover {
  font-weight: var(--font-weight-black);
}
#splash-content #splash-enter-input span,
#splash-content #splash-enter-href span {
  animation: arrow-blink 0.6s ease-out alternate infinite;
}
#splash-content #splash-enter-input span:nth-of-type(1),
#splash-content #splash-enter-href span:nth-of-type(1) {
  animation-delay: 0.2s;
}
#splash-content #splash-enter-input span:nth-of-type(2),
#splash-content #splash-enter-href span:nth-of-type(2) {
  animation-delay: 0.4s;
}
#splash-content #splash-enter-input span:nth-of-type(3),
#splash-content #splash-enter-href span:nth-of-type(3) {
  animation-delay: 0.6s;
}
@keyframes arrow-blink {
  to {
    opacity: 0;
  }
}
#splash-content #splash-enter-href {
  display: none;
}
#splash-content > div:nth-of-type(2) {
  display: flex;
  justify-content: space-between;
  width: 17.5rem;
}
#splash-content > div:nth-of-type(2) #warning {
  width: 8.5rem;
  height: 4rem;
}
#splash-content > div:nth-of-type(2) strong {
  font-size: var(--font-size-small);
}
#splash-content > div:nth-of-type(2) ul {
  margin-block-start: 0.5rem;
  margin-block-end: 0;
  padding-inline-start: 0;
  font-size: var(--font-size-x-small);
  list-style: none;
}
#splash-content > div:nth-of-type(2) ul li {
  margin-block: 0;
  padding-inline-start: 0;
}
#splash-content > div:nth-of-type(2) ul li::before {
  vertical-align: -0.125rem;
  padding-inline-end: 0.375rem;
  content: "✦";
  font-size: 1.125rem;
  line-height: 0;
  font-family: "Adwaita Mono";
}

#rainbow {
  position: absolute;
  inset-block-end: 1rem;
  inset-inline-end: 1rem;
  background-image: linear-gradient(to right, var(--red-fg), var(--orange-fg), var(--yellow-fg), var(--green-fg), var(--blue-fg), var(--purple-fg));
  width: 8rem;
  height: 1rem;
}

#window {
  filter: var(--drop-shadow);
  margin-inline: auto;
  border-style: solid;
  border-image-source: url("border.gif");
  border-image-slice: 16 32 5 32;
  border-image-width: 2rem 4rem 0.625rem 4rem;
  border-image-repeat: repeat;
  padding-inline: 0.1875rem;
  padding-block: 1.8125rem 0.4375rem;
  image-rendering: pixelated;
  width: fit-content;
  min-width: 8rem;
  max-width: 100%;
}
#window-contents {
  background-color: #faf4f2;
  padding: 1rem;
  overflow-x: auto;
}
#window-contents small {
  color: var(--fg-color);
}
#window-contents small a {
  color: var(--yellow-fg);
  line-height: 1;
  text-decoration-color: hsl(var(--yellow-h), var(--yellow-s), var(--yellow-l), var(--disabled-opacity));
}
@media (prefers-color-scheme: dark) {
  #window-contents {
    background-color: #2d2a2e;
  }
}

#rainbow-text span {
  display: block;
  animation: rainbow 1.2s step-end infinite;
  font-weight: var(--font-weight-semi-bold);
  line-height: 0.75rem;
  letter-spacing: -0.05em;
  white-space: nowrap;
}
#rainbow-text span:nth-child(1) {
  color: var(--red-fg);
}
#rainbow-text span:nth-child(2) {
  animation-delay: 0.2s;
  color: var(--orange-fg);
}
#rainbow-text span:nth-child(3) {
  animation-delay: 0.4s;
  color: var(--yellow-fg);
}
#rainbow-text span:nth-child(4) {
  animation-delay: 0.6s;
  color: var(--green-fg);
}
#rainbow-text span:nth-child(5) {
  animation-delay: 0.8s;
  color: var(--blue-fg);
}
#rainbow-text span:nth-child(6) {
  animation-delay: 1s;
  color: var(--purple-fg);
}
@keyframes rainbow {
  from {
    color: var(--red-fg);
  }
  16.66% {
    color: var(--orange-fg);
  }
  33.33% {
    color: var(--yellow-fg);
  }
  50% {
    color: var(--green-fg);
  }
  66.66% {
    color: var(--blue-fg);
  }
  83.33% {
    color: var(--purple-fg);
  }
}

#works + div {
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 720px) {
  #works + div {
    flex-direction: column;
  }
}
#works + div > div:nth-of-type(2) {
  display: flex;
  flex-direction: column;
}
#works + div > div:nth-of-type(2) .buttons {
  margin-block-start: auto;
}
@media only screen and (max-width: 720px) {
  #works + div > div:nth-of-type(2) .buttons {
    margin-block-start: 0;
  }
}
#works + div #icons:nth-of-type(1) {
  outline: 0.0625rem solid var(--bg-muted-2);
  box-shadow: var(--edge-highlight), var(--shadow-glass);
  background-image: radial-gradient(circle, var(--bg-muted-1) 0.0625rem, transparent 0.0625rem), linear-gradient(to bottom right, var(--bg-color) 50%, var(--bg-muted-1), var(--bg-muted-2));
  background-size: 1rem 1rem, auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  gap: 1rem;
  margin-inline-end: 1rem;
  border-radius: var(--rounded-corner);
  padding: 1rem;
  aspect-ratio: 1/1;
  height: fit-content;
}
@media only screen and (max-width: 720px) {
  #works + div #icons:nth-of-type(1) {
    margin-inline-end: 0;
    aspect-ratio: unset;
  }
}
#works + div #icons:nth-of-type(1) img {
  cursor: zoom-in;
  margin: 0;
  width: 4rem;
  min-width: 4rem;
  height: 4rem;
  min-height: 4rem;
}
#works + div #icons:nth-of-type(1) img:hover {
  transform: scale(1.5);
}
@media only screen and (max-width: 720px) {
  #works + div #icons:nth-of-type(1) img {
    width: 6rem;
    min-width: 6rem;
    height: 6rem;
    min-height: 6rem;
  }
}

/*# sourceMappingURL=daudix-home.css.map */
:root {
  --font-sans-serif: "Golos Text";
  --font-monospace: "Commit Mono";
}

@font-face {
  font-style: normal;
  font-weight: 400 900;
  src: url("/fonts/golos-text.woff2?v=2.005") format("woff2");
  font-family: "Golos Text";
  font-display: swap;
}
@font-face {
  font-style: italic;
  font-style: oblique -12deg;
  font-weight: 400 900;
  src: url("/fonts/golos-text.woff2?v=2.005") format("woff2");
  font-family: "Golos Text";
  font-display: swap;
}
@font-face {
  font-style: normal;
  font-weight: 100 900;
  src: url("/fonts/commit-mono.woff2?v=1.143") format("woff2");
  font-family: "Commit Mono";
  font-display: swap;
}
@font-face {
  font-style: italic;
  font-weight: 100 900;
  src: url("/fonts/commit-mono.woff2?v=1.143") format("woff2");
  font-family: "Commit Mono";
  font-display: swap;
  font-variation-settings: "ital" 1;
}

/*# sourceMappingURL=daudix-fonts.css.map */