@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap");
@property --rotation {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes shift {
  0% {
    --rotation: 0deg;
  }
  100% {
    --rotation: 360deg;
  }
}
@keyframes bounce {
  0% {
    margin-left: 0;
  }
  50% {
    margin-left: 8px;
  }
  100% {
    margin-left: 0;
  }
}
.controls {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px 0 0;
  font-size: 32px;
  border-bottom: 1px solid var(--colour-background-sub);
  transition: border-bottom 200ms ease-in-out;
}
.controls .links {
  display: flex;
  flex: 1 1 100%;
  gap: 32px;
  align-items: center;
}
.controls .links h1 {
  margin: unset;
}
.controls .links nav {
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: 16px;
}
@media screen and (max-width: 610px) {
  .controls .links nav {
    display: none;
  }
}
.controls .links nav a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-bottom 200ms ease-in-out;
}
.controls .links nav a:hover {
  border-bottom: 1px solid var(--colour-text);
}

h1 {
  z-index: 3;
  display: flex;
  align-items: center;
  margin: unset;
  padding: 15px 0 20px;
  font-size: 32px;
  line-height: 36px;
}
h1 > span:first-child {
  display: flex;
  align-items: baseline;
}
h1 > span:first-child a {
  margin-right: 1ch;
}

hr + h1 {
  padding-top: 6px;
}

h2 {
  display: flex;
  gap: 0.5ch;
  align-items: center;
  font-size: 26px;
  line-height: 32px;
}

h3 {
  font-size: 18px;
  line-height: 22px;
}

p {
  position: relative;
  margin-top: unset;
  margin-bottom: 12px;
}

p,
td,
a,
.rss,
h1,
h2,
blockquote,
blockquote::before,
figcaption,
pre,
li,
h3,
.crumb,
th,
label,
pre,
code {
  color: var(--colour-text);
  font-family: "Source Serif Pro", sans-serif;
  transition: color 200ms ease-in-out, background-color 200ms ease-in-out, border-bottom-color 200ms ease-in-out;
}

h1:target,
h2:target,
h3:target,
h4:target,
h5:target {
  animation: bounce 350ms 1 ease-in-out;
}
h1:has(+ p), h1:has(+ ul), h1:has(+ blockquote),
h2:has(+ p),
h2:has(+ ul),
h2:has(+ blockquote),
h3:has(+ p),
h3:has(+ ul),
h3:has(+ blockquote),
h4:has(+ p),
h4:has(+ ul),
h4:has(+ blockquote),
h5:has(+ p),
h5:has(+ ul),
h5:has(+ blockquote) {
  margin-bottom: 0.25em;
  padding-bottom: 0.125em;
  border-bottom: 1px solid var(--colour-background-sub);
  transition: border-bottom 200ms ease-in-out;
}

p,
td,
a,
.rss,
li,
pre,
.crumb {
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
}

blockquote {
  display: flex;
  margin: 16px 16px 16px 0;
  font-style: italic;
}
blockquote::before {
  flex: 0 0 auto;
  margin-right: 1ch;
  font-size: 22px;
  content: ">";
}
blockquote p {
  flex: 1 1 auto;
  margin: unset;
}

code,
pre {
  font-size: 14px;
  font-family: monospace;
  background: var(--colour-background-sub);
}

pre {
  margin-top: unset;
  margin-bottom: 12px;
  padding: 8px;
  overflow: auto;
}

del {
  text-decoration: line-through;
  opacity: 0.5;
}

article ul {
  margin-top: unset;
  padding-left: 20px;
  list-style: disclosure-closed;
}

ul {
  padding: unset;
  list-style: none;
}
ul li {
  margin-bottom: 4px;
}
ul li .flex {
  display: flex;
  gap: 0.5ch;
}
ul li .flex a {
  max-width: max-content;
}
ul li > ul {
  margin-top: 4px;
}

.banner ul {
  margin-bottom: unset;
}

p a,
li a {
  width: 100%;
  margin: 0 -0.25ch;
  padding: 0 0.25ch;
  overflow: hidden;
  text-decoration: none;
  word-break: break-word;
  transition: color 150ms ease-in-out, background-color 150ms ease-in-out;
}
p a:hover,
li a:hover {
  color: var(--colour-background);
  background-color: var(--colour-text);
}
p a::before,
li a::before {
  padding-right: 0.25ch;
}
p a::after,
li a::after {
  padding-left: 0.25ch;
}
p a:not(.externalLink):not(.footnote-ref):not(.footnote-back):not(.badge)::before,
li a:not(.externalLink):not(.footnote-ref):not(.footnote-back):not(.badge)::before {
  content: "{";
}
p a:not(.externalLink):not(.footnote-ref):not(.footnote-back):not(.badge)::after,
li a:not(.externalLink):not(.footnote-ref):not(.footnote-back):not(.badge)::after {
  content: "}";
}
p a.externalLink::before,
li a.externalLink::before {
  content: "[";
}
p a.externalLink::after,
li a.externalLink::after {
  content: "]";
}

.footnote-ref {
  margin-left: 0.25ch;
  text-decoration: none;
}
.footnote-ref:hover {
  text-decoration: underline;
}

sup {
  position: relative;
  top: -0.25em;
  vertical-align: top;
  opacity: 0.5;
}

ol li[id*=fn]:target {
  background: var(--colour-background-sub);
  animation: bounce 350ms 1 ease-in-out;
}

.indexDate {
  font-size: 12px;
  font-family: monospace, sans-serif;
}

.sourceCode .kw {
  color: #268bd2;
}
.sourceCode .dt {
  color: #268bd2;
}
.sourceCode .dv,
.sourceCode .bn,
.sourceCode .fl {
  color: #d33682;
}
.sourceCode .ch {
  color: #dc322f;
}
.sourceCode .st {
  color: #2aa198;
}
.sourceCode .co {
  color: #93a1a1;
}
.sourceCode .ot {
  color: #a57800;
}
.sourceCode .al {
  color: #cb4b16;
  font-weight: bold;
}
.sourceCode .fu,
.sourceCode .ex {
  color: #268bd2;
}
.sourceCode .va {
  color: var(--colour-text);
}
.sourceCode .er {
  color: #d30102;
  font-weight: bold;
}

.fancy {
  display: inline-block;
}
.fancy.sparkle {
  --rotation: 0deg;
  animation: shift 10s infinite linear;
  background: linear-gradient(var(--rotation), #91eae4, #86a8e7, #7f7fd5);
  background-clip: text;
}
.fancy.sparkle > * {
  color: transparent;
}

button {
  padding: 0.25em 0.5em;
  color: var(--colour-text);
  background: var(--colour-background);
  border: 1px solid var(--colour-text);
  cursor: pointer;
  transition: all 250ms ease-in-out;
}
@media screen and (max-width: 600px) {
  button {
    padding: 8px 12px;
    font-size: 16px;
  }
}
button:hover {
  color: var(--colour-background);
  background: var(--colour-text);
}

.trackingDates {
  margin-top: 12px;
}
.trackingDates .trackingDate {
  margin-bottom: 0;
  font-size: 0.75em;
  opacity: 0.5;
}

@property --offset {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}
@keyframes backgroundShift {
  0% {
    --offset: 0;
  }
  100% {
    --offset: 100px;
  }
}
body {
  margin: 0;
  padding: 0 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'>        <rect fill='%2391eae4' x='0' y='0' width='20px' height='20px'/>        <rect fill='%2386a8e7' x='0' y='20' width='20px' height='20px'/>        <rect fill='%2391eae4' x='20' y='20' width='20px' height='20px'/>        <rect fill='%2386a8e7' x='20' y='0' width='20px' height='20px'/>      </svg>");
  background-position-x: var(--offset);
  background-position-y: var(--offset);
  animation: backgroundShift var(--bg-speed, 0s) infinite linear;
  --offset: 0;
  --size: 20px;
}

@media (prefers-reduced-motion) {
  body {
    animation: unset;
  }
}

.background {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: var(--colour-background);
  opacity: var(--background-opacity, 0);
  transition: background-color 200ms ease-in-out, opacity 200ms ease-in-out;
}
.background svg {
  width: 100%;
  height: 100%;
}

.logo {
  --rotation: 0deg;
  animation: shift 30s infinite linear;
  font-size: 1.5em;
  background: linear-gradient(var(--rotation), #91eae4, #86a8e7, #7f7fd5);
  background-clip: text;
}
.logo a {
  color: transparent;
  font: inherit;
}

.container {
  --shadow-color: 176deg 43% 46%;
  --shadow-elevation: -0.3px -0.3px 0.5px hsl(var(--shadow-color) / var(--tint)),
    -1.1px -1.1px 1.8px -0.8px hsl(var(--shadow-color) / var(--tint)),
    -2.8px -2.8px 4.5px -1.7px hsl(var(--shadow-color) / var(--tint)),
    -6.9px -6.8px 10.9px -2.5px hsl(var(--shadow-color) / var(--tint));
  position: relative;
  max-width: 1020px;
  margin: 16px auto 132px;
  padding: 0 16px 16px;
  overflow: hidden;
  background: var(--colour-background);
  box-shadow: var(--shadow-elevation);
  transition: background-color 200ms ease-in-out;
}

.site-icon {
  width: 25px;
  height: 25px;
  margin-right: 10px;
}
.site-icon svg {
  width: 25px;
  height: 25px;
}

.themeToggle {
  cursor: pointer;
  user-select: none;
}
.themeToggle:focus {
  border-color: inherit;
  outline: none;
  box-shadow: none;
}

.breadcrumbs {
  margin: 15px 0 20px;
}

.article p:first-of-type:has(img) {
  margin-bottom: 20px;
}

.tableContainer {
  width: 100%;
  margin-bottom: 12px;
  overflow: auto;
}

table {
  width: 100%;
  border: 1px solid var(--colour-background-sub);
  border-collapse: collapse;
  transition: border 200ms ease-in-out;
}
table thead {
  border-bottom: 1px solid var(--colour-background-sub);
  transition: border-bottom 200ms ease-in-out;
}
table th,
table td {
  padding: 2px 6px 2px 4px;
  white-space: nowrap;
  text-align: left;
  border-right: 1px solid var(--colour-background-sub);
  transition: border-right 200ms ease-in-out;
}
table th.centerCell,
table td.centerCell {
  text-align: center;
}
table tr:nth-of-type(2n) {
  background: var(--colour-background-sub);
  transition: background 200ms ease-in-out;
}
table tr:nth-of-type(2n) th,
table tr:nth-of-type(2n) td {
  border-right: 1px solid var(--colour-background);
  transition: border-right 200ms ease-in-out;
}

.banner {
  position: relative;
  margin-bottom: 12px;
  padding: 12px;
  color: var(--colour-text);
  background: var(--colour-background);
  border: 1px solid var(--colour-text);
  transition: color 200ms ease-in-out, background-color 200ms ease-in-out;
}
.banner p {
  margin-bottom: unset;
}
.banner b {
  text-transform: uppercase;
}
.banner code {
  line-break: normal;
  word-break: normal;
}

.home {
  display: flex;
  flex-wrap: wrap-reverse;
  gap: 12px;
}
.home .left {
  flex: 1 1 300px;
}
.home .right {
  display: flex;
  flex: 1 1 300px;
  flex-wrap: wrap;
}
.home .right img {
  flex: 1 1 50%;
  object-fit: cover;
  mix-blend-mode: var(--blend-mode);
}
.home .right img.mostly-dark {
  filter: var(--invert-on-light);
}
.home .right img.mostly-light {
  filter: var(--invert-on-dark);
}

.hidden {
  display: none;
}

.numerology {
  display: flex;
  justify-content: center;
}
.numerology .tableContainer {
  width: unset;
}
.numerology table {
  display: inline-block;
  width: max-content;
  table-layout: fixed;
}
.numerology table th,
.numerology table td {
  min-width: 30px;
  font-family: monospace;
  text-align: center;
  text-transform: uppercase;
}

.formGroup label {
  margin-bottom: 2px;
  font-weight: bold;
}
.formGroup input,
.formGroup select {
  box-sizing: border-box;
  min-width: 200px;
  margin-bottom: 8px;
}
.formGroup input,
.formGroup button,
.formGroup label {
  display: block;
}

.footerLinks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  justify-content: flex-start;
}
.footerLinks div:not(:last-child)::after {
  margin-left: 4px;
  content: "|";
}

.webRings {
  flex-wrap: unset;
  justify-content: flex-end;
}
.webRings a,
.webRings p,
.webRings div,
.webRings span {
  font-size: 1em;
  line-height: 1em;
  text-decoration: none;
}
.webRings .xxiivv {
  display: flex;
  gap: 4px;
  align-items: center;
}
.webRings .xxiivv .ring {
  display: flex;
  align-items: center;
  width: 20px;
  height: 16px;
}
.webRings .xxiivv .ring svg {
  width: min-content;
  height: 20px;
  transform: translateY(-1px);
}
.webRings .xxiivv .ring svg path {
  transition: stroke 200ms ease-in-out;
  stroke: var(--colour-text);
}

.mermaid {
  display: block;
}
.mermaid svg {
  display: block;
  width: 100%;
  margin: auto;
}

@keyframes updateBounce {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(2px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes updateSparkle {
  0% {
    transform: rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: rotate(-5deg);
    opacity: 0.5;
  }
  100% {
    transform: rotate(0deg);
    opacity: 1;
  }
}
.posts h2 {
  margin-bottom: 0.1em;
  padding-bottom: 0.1em;
  border-bottom: 1px solid var(--colour-background-sub);
}
.posts .postListCategories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.posts .postListCategories button,
.posts .postListCategories span {
  color: var(--colour-text);
  transition: color 200ms ease-in-out;
  font-size: 0.75em;
}
.posts .postListCategories button {
  padding: unset;
  text-decoration: underline;
  border: unset;
  transition: color 200ms ease-in-out, background-color 200ms ease-in-out;
}
.posts .postListCategories button:hover {
  color: var(--colour-text);
  background-color: var(--colour-background);
}
.posts .postListCategories button:not(.active) {
  opacity: 0.7;
}
.posts li {
  display: flex;
  gap: 0.5ch;
}
.posts li a {
  display: flex;
  max-width: max-content;
}
.posts li a span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media screen and (max-width: 450px) {
  .posts li .date {
    display: none;
  }
}

updated-at {
  display: inline-block;
}

.updated {
  display: flex;
  gap: 2px;
  font-size: 0.75em;
  white-space: nowrap;
  animation: updateBounce 1s ease-in-out infinite;
  animation-delay: var(--animation-offset, 0);
}
@media (prefers-reduced-motion) {
  .updated {
    animation: unset;
  }
}
.updated .sparkle {
  animation: updateSparkle 2s ease-in-out infinite;
  animation-delay: var(--animation-offset, 0);
}
@media (prefers-reduced-motion) {
  .updated .sparkle {
    animation: unset;
  }
}
@media screen and (max-width: 450px) {
  .updated .updatedText {
    display: none;
  }
}

input,
select {
  padding: 4px 8px;
  color: var(--colour-text);
  background: var(--colour-background);
  border: 1px solid color-mix(in srgb, var(--colour-text) 20%, transparent);
  border-radius: 0;
}
@media screen and (max-width: 600px) {
  input,
  select {
    width: 100%;
    padding: 8px 12px;
    font-size: 16px;
  }
}
input::placeholder,
select::placeholder {
  color: var(--colour-text);
  opacity: 0.5;
}

@keyframes pulse {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}
.skeleton {
  display: block;
  width: var(--width);
  height: var(--height);
  margin: var(--margin);
  background-color: var(--colour-background-sub);
  border-radius: 5px;
  cursor: progress;
  animation: infinite 1s ease-in-out pulse;
}

hr {
  border: 0;
  border-bottom: 1px solid var(--colour-background-sub);
  transition: border-bottom 200ms ease-in-out;
}

.h-card {
  display: none;
}

.webmentions ul:not(:has(li)) {
  margin: 0;
}

.sr-only {
  display: none;
}

img:not(.badge) {
  display: block;
  width: 100%;
  max-width: 625px;
  margin: auto;
  object-fit: contain;
}
img:not(.badge).highRes {
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  opacity: 0;
}
img:not(.badge).highRes.visible {
  opacity: 1;
}
img:not(.badge).banner-img {
  max-width: 100%;
  height: 150px;
  margin: 32px 0;
  object-fit: cover;
  filter: blur(5px);
}

img + .footnote-ref sup {
  top: 0;
}
img + .footnote-ref::after {
  content: "└ More info";
}

figure {
  position: relative;
  margin: unset;
}
figure figcaption {
  display: flex;
  gap: 8px;
  max-width: 625px;
  margin: 0 auto 8px;
  padding-top: 8px;
  font-style: italic;
}
figure figcaption::before {
  content: "┗ ";
}
figure:has(.hide-alt) {
  margin-bottom: 8px;
}
figure:has(.hide-alt) figcaption {
  display: none;
}

@property --rotation {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes shift {
  0% {
    --rotation: 0deg;
  }
  100% {
    --rotation: 360deg;
  }
}
.imageGrid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.imageGrid a {
  width: 625px;
  max-width: 100%;
}

.imageGrid a img {
  width: 100%;
  object-fit: contain;
}

.graph {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 12px;
  padding: 32px calc(32px / 2);
  font-family: monospace;
  text-transform: uppercase;
  border: 1px solid var(--colour-text);
}

.graph::after, .graph::before {
  position: absolute;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 0 calc(32px / 2);
  color: 1px solid var(--colour-text);
  font-size: 12.8px;
}

.graph::before {
  bottom: 12.8px;
  font-size: 6.4px;
  content: "DATA: " attr(key);
}

.graph::after {
  direction: rtl;
  opacity: 0;
  content: attr(data-prefix) counter(max-value);
  counter-reset: max-value var(--max-value);
}

@media screen and (min-width: 720px) {
  .graph::after {
    opacity: 1;
  }
}
.graph .graphInner {
  border-right: 1px dotted var(--colour-text);
}

.graph .graphInner .event {
  display: flex;
  align-items: center;
  margin: 0 32px 32px 0;
  color: var(--colour-text);
  text-align: justify;
  border-left: 1px solid var(--colour-text);
}

.graph .graphInner .event p {
  margin: 0;
  font-size: 12px;
  font-family: monospace;
  text-transform: uppercase;
}

.graph .graphInner .event::before {
  display: inline-block;
  width: 25%;
  height: 1px;
  margin-right: 1ch;
  background: var(--colour-text);
  content: "";
}

.graph .graphInner .label,
.graph .graphInner .label p {
  padding-right: 8px;
  overflow: hidden;
  color: var(--colour-text);
  font-size: 12.8px;
  font-family: monospace;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.graph .graphInner .bar {
  position: relative;
  width: calc(var(--data) / var(--max-value) * 100%);
  height: 32px;
  color: var(--colour-background);
  background: var(--colour-text);
}

.graph .graphInner .bar::after {
  position: absolute;
  top: calc(50% - 12.8px / 2);
  right: calc(12.8px / 2);
  color: var(--colour-background);
  font-size: 12.8px;
  line-height: 12.8px;
  background: var(--colour-text);
  transition: opacity 150ms ease-in-out;
  content: attr(data-prefix) counter(data);
  counter-reset: data var(--data);
}

@media screen and (min-width: 720px) {
  .graph .graphInner .bar::after {
    opacity: 0;
  }
}
.graph .graphInner .bar.hollow {
  width: calc(var(--data) / var(--max-value) * 100% - 1px);
  color: 1px solid var(--colour-text);
  background: var(--colour-background);
  border: 1px solid var(--colour-text);
}

.graph .graphInner .bar.hollow::after {
  color: var(--colour-text);
  background: var(--colour-background);
}

.graph .graphInner .bar:hover::after {
  opacity: 1;
}

.graph .graphInner .bar:not(:last-of-type) {
  margin-bottom: calc(32px / 1.5);
}

img#mermaid {
  opacity: 0;
}

#mermaid:not([data-processed]) {
  display: none;
}

svg[id*=mermaid] {
  height: max-content;
}

svg[id*=mermaid] #flowchart-pointEnd,
svg[id*=mermaid] #flowchart-pointStart {
  fill: var(--colour-text) !important;
  stroke: var(--colour-text) !important;
}

svg[id*=mermaid] .section {
  fill: var(--colour-background) !important;
}

svg[id*=mermaid] .cluster > rect {
  outline: 1px dashed var(--colour-text);
  fill: var(--colour-background-sub) !important;
  stroke: rgba(0, 0, 0, 0) !important;
}

svg[id*=mermaid] .label-container,
svg[id*=mermaid] rect.actor,
svg[id*=mermaid] .note,
svg[id*=mermaid] .task {
  fill: var(--colour-background) !important;
  stroke: var(--colour-text) !important;
}

svg[id*=mermaid] .nodeLabel {
  color: var(--colour-text) !important;
}

svg[id*=mermaid] tspan,
svg[id*=mermaid] text,
svg[id*=mermaid] .messageText,
svg[id*=mermaid] .tick text,
svg[id*=mermaid] .taskText,
svg[id*=mermaid] .titleText,
svg[id*=mermaid] text[class*=taskText] {
  font-family: "Source Serif Pro", sans-serif !important;
  fill: var(--colour-text) !important;
}

svg[id*=mermaid] .messageText {
  stroke: rgba(0, 0, 0, 0) !important;
}

svg[id*=mermaid] .edgeLabel,
svg[id*=mermaid] .edgeLabel p,
svg[id*=mermaid] .labelBkg {
  color: var(--colour-text) !important;
  background-color: var(--colour-background) !important;
  border: unset;
}

svg[id*=mermaid] .edgeLabel div,
svg[id*=mermaid] .edgeLabel span,
svg[id*=mermaid] .edgeLabel p div,
svg[id*=mermaid] .edgeLabel p span,
svg[id*=mermaid] .labelBkg div,
svg[id*=mermaid] .labelBkg span {
  display: inline-block;
  width: 100%;
}

svg[id*=mermaid] .flowchart-link,
svg[id*=mermaid] line,
svg[id*=mermaid] path[class*=messageLine],
svg[id*=mermaid] .tick {
  stroke: var(--colour-text) !important;
}

svg[id*=mermaid] line[class="200"],
svg[id*=mermaid] .tick,
svg[id*=mermaid] .today {
  opacity: 0.25 !important;
}

svg[id*=mermaid] #arrowhead path,
svg[id*=mermaid] .marker.flowchart-v2 {
  fill: var(--colour-text) !important;
  stroke: var(--colour-text) !important;
}

.recommendations,
.currentlyPlaying {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
  justify-content: center;
}

.album,
.game {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  text-decoration: none;
}

@media screen and (max-width: 550px) {
  .album,
  .game {
    flex: 1 1 100% !important;
  }
}
.album .main,
.album .sub,
.game .main,
.game .sub {
  max-width: 250px;
  margin: 0 auto 4px;
  color: var(--colour-text);
  font-family: "Source Serif Pro", sans-serif;
  text-align: center;
}

.album .main,
.game .main {
  font-size: 1.2em;
}

.album .sub,
.game .sub {
  font-size: 0.9em;
  opacity: 0.9;
}

.album img {
  width: 250px;
  height: 250px;
  margin-bottom: 12px;
  object-fit: contain;
}

@media screen and (max-width: 550px) {
  .album img {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
  }
}
.game {
  display: flex;
  flex: 1 1 20%;
  flex-direction: column;
  align-items: center;
  min-width: 200px;
}

.game .imageElementWrapper {
  display: flex;
  flex: 1 1 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 300px;
}

.game .imageElementWrapper .gameImage {
  display: flex;
  max-width: 235px;
  margin-bottom: 12px;
  background-image: url("/placeholder.svg");
}

@media screen and (max-width: 550px) {
  .game .imageElementWrapper .gameImage {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
}
.game .imageElementWrapper .gameImage img {
  object-fit: contain;
}

@media screen and (max-width: 550px) {
  .game .imageElementWrapper .gameImage img {
    width: 100%;
    height: auto;
  }
}
.recommendations.threeByThree .game,
.currentlyPlaying.threeByThree .game {
  flex: 1 1 30%;
}

.uptime h2 {
  margin-bottom: 0.5em;
}

.uptime .dataWrapper {
  display: flex;
  border: 1px solid var(--colour-text);
}

.uptime .dataWrapper .data {
  flex: 1 1 auto;
  height: 16px;
}

.uptime .dataWrapper .data.UP {
  background: var(--colour-background);
}

.uptime .dataWrapper .data.DOWN {
  background: var(--colour-text);
}

.uptime .dataWrapper .data.UNKNOWN {
  background: var(--colour-background-sub);
}

.mpszhand {
  display: flex;
  flex-wrap: wrap;
  gap: calc(64px / 8);
  align-items: baseline;
  margin-bottom: 12px;
}

.mpszhand .tileWrapper .tile {
  position: relative;
  height: 64px;
  aspect-ratio: 3/4;
}

.mpszhand .tileWrapper .tile:has(img.blank) {
  aspect-ratio: 3/8;
}

.mpszhand .tileWrapper .tile img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mpszhand .tileWrapper .tile img:nth-of-type(2) {
  box-sizing: border-box;
  padding: 3px;
}

.mpszhand .tileWrapper.rotated .tile {
  width: 64px;
}

.mpszhand .tileWrapper.rotated .tile img {
  transform: rotate(-90deg) translateX(calc(64px / 8 * -1));
}

.mpszhand .tileWrapper.stacked .tile {
  width: 64px;
}

.mpszhand .tileWrapper.stacked .tile img {
  transform: rotate(-90deg) translateX(calc(64px / 8 * -1));
}

.mpszhand .tileWrapper.stacked .tile:first-of-type img {
  transform: rotate(-90deg) translateX(calc(64px / 4 * -1));
}

.catCounter img {
  display: inline;
  width: min-content;
  height: 75px;
}

bsky-comments {
  margin-bottom: 16px;
}

bsky-comments > a {
  display: block;
  margin-bottom: 8px;
}

bsky-comments .noReplies {
  opacity: 0.5;
}

bsky-comments .comment {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  padding: 8px;
  border: 1px solid var(--colour-text);
}

bsky-comments .comment .commentAvatar {
  flex: 0 0 48px;
}

bsky-comments .comment .content {
  flex: 1 1 auto;
}

bsky-comments .comment .content .commentHeader {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--colour-background-sub);
}

bsky-comments .comment .content .commentHeader .author {
  max-width: fit-content;
  font-weight: bold;
}

bsky-comments .comment .content .commentHeader .date {
  opacity: 0.5;
}

bsky-comments .comment .content .commentBody {
  margin-bottom: 0;
}

bsky-comments .replies {
  margin-top: -9px;
  border-left: solid var(--colour-text) 16px;
}

bsky-comments .like {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

bsky-comments .like .commentAvatar {
  flex: 0 0 24px;
}

bsky-comments .like p {
  margin-bottom: 0;
}

bsky-comments .comment-image {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 4px 0;
}

bsky-comments .comment-image img {
  border: 1px solid var(--colour-text);
}

.nowListening {
  position: fixed;
  max-width: 260px;
  width: 100%;
  background: var(--colour-background);
  padding: 8px;
  bottom: 0px;
  right: 0px;
  --shadow-color: 176deg 0% 46%;
  --shadow-elevation: 0.3px 0.3px 0.5px hsl(var(--shadow-color) / var(--tint)),
  1.1px 1.1px 1.8px 0.8px hsl(var(--shadow-color) / var(--tint)),
  2.8px 2.8px 4.5px 1.7px hsl(var(--shadow-color) / var(--tint)),
  6.9px 6.8px 10.9px 2.5px hsl(var(--shadow-color) / var(--tint));
  box-shadow: var(--shadow-elevation);
}
.nowListening p {
  margin-bottom: 4px;
  border-bottom: 1px solid var(--colour-background-sub);
  opacity: 0.75;
  font-size: 0.9em;
}
.nowListening .content {
  display: flex;
  gap: 8px;
}
.nowListening .content img {
  width: 72px;
  height: 72px;
}
.nowListening .content .listeningDetails,
.nowListening .content .listeningMeta {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}
.nowListening .content .listeningDetails .albumTitle,
.nowListening .content .listeningDetails .albumArtist,
.nowListening .content .listeningDetails .progress,
.nowListening .content .listeningMeta .albumTitle,
.nowListening .content .listeningMeta .albumArtist,
.nowListening .content .listeningMeta .progress {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--colour-text);
  font-family: "Source Serif Pro", sans-serif;
  transition: color 200ms ease-in-out, background-color 200ms ease-in-out;
}
.nowListening .content .listeningDetails .albumArtist,
.nowListening .content .listeningMeta .albumArtist {
  opacity: 0.75;
  font-size: 0.9em;
}
.nowListening .content .listeningDetails .progress,
.nowListening .content .listeningMeta .progress {
  display: flex;
  gap: 8px;
  align-items: center;
}
.nowListening .content .listeningDetails .progress .bar,
.nowListening .content .listeningMeta .progress .bar {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  height: 8px;
  border-radius: 100px;
  overflow: hidden;
  background: var(--colour-background-sub);
}
.nowListening .content .listeningDetails .progress .bar .barContent,
.nowListening .content .listeningMeta .progress .bar .barContent {
  height: 100%;
  background: var(--colour-text);
}