@font-face {
  font-family: "GothicPixels";
  src: url("/assets/fonts/gothicPixels.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Kingdom";
  src: url("/assets/fonts/kingdom.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "OldeTome";
  src: url("/assets/fonts/oldeTome.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Source Code Pro";
  src: url("/assets/fonts/sourceCodeProRegular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Source Code Pro";
  src: url("/assets/fonts/sourceCodeProBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "BugMaruGothic";
  src: url("/assets/fonts/bugMaruGothic.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "PixelMPlus";
  src: url("/assets/fonts/pixelMPlus12.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}


:root {
  /* Approved smoky mauve palette */
  --void: #343132;
  --inkShadow: #413a3b;
  --container: #454041;
  --headerBar: #575354;
  --frameLine: #747071;
  --mutedText: #989392;
  --bodyText: #b8b4b1;
  --boneText: #d5d2c5;
  --phosphor: #e7e6cc;
  --lunarViolet: #9a8498;

  /*
    Dark interface mapping.
    The palette above remains exact, but large surfaces use deeper derived
    tones so the page matches the dark preview rather than reading as gray.
  */
  --page: #151315;
  --shell: #1b181a;
  --panel: #211e20;
  --panelDeep: #191719;
  --bar: #2c282a;

  --line: #514c4e;
  --lineBright: var(--frameLine);

  --text: var(--bodyText);
  --title: var(--boneText);
  --muted: var(--mutedText);
  --accent: var(--phosphor);
  --alert: var(--boneText);
  --shadow: rgba(0, 0, 0, 0.82);

  --fontBody: "Source Code Pro", "Lucida Console", "Cascadia Mono", Consolas, monospace;
  --fontTitle: "Kingdom", Georgia, serif;
  --fontJapanese: "PixelMPlus", "Yu Gothic", "Hiragino Kaku Gothic ProN", "MS Gothic", sans-serif;

  --gap: 0.65rem;
  --leftWidth: 16.25rem;
  --rightWidth: 16.25rem;
  --siteWidth: 94rem;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--page);
  color-scheme: dark;
  scrollbar-gutter: stable;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% 4%, rgba(231, 230, 204, 0.018), transparent 24rem),
    radial-gradient(circle at 18% 38%, rgba(87, 83, 84, 0.075), transparent 36rem),
    radial-gradient(circle at 82% 72%, rgba(116, 112, 113, 0.045), transparent 40rem),
    var(--page);
  color: var(--text);
  font-family: var(--fontBody);
  font-size: 0.9rem;
  line-height: 1.4;
}

::selection {
  background: var(--lunarViolet);
  color: var(--page);
}

::-moz-selection {
  background: var(--lunarViolet);
  color: var(--page);
}

a {
  color: var(--text);
  text-decoration: none;
}

a:hover,
a:focus-visible {
  color: var(--title);
}

button,
select,
summary {
  font: inherit;
}

/* Match the selected row in native playlist and weather menus to the site's
   dusty lunar accent. Browser/OS support for styling open select menus varies. */
select option:checked {
  background: var(--lunarViolet);
  color: var(--page);
  box-shadow: 0 0 0 100vmax var(--lunarViolet) inset;
}

button,
summary,
select,
a {
  outline-offset: 0.18rem;
}

button:focus-visible,
summary:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 1px solid var(--accent);
}

:lang(ja) {
  font-family: var(--fontJapanese);
}

.site {
  position: relative;
  width: min(calc(100% - 1.25rem), var(--siteWidth));
  min-height: 100vh;
  margin: 0.55rem auto 1.5rem;
  border: 1px solid var(--lineBright);
  background: rgba(27, 24, 26, 0.985);
  box-shadow:
    0 0 0 3px var(--page),
    0 0 0 5px var(--bar),
    0 1.5rem 5rem var(--shadow),
    0 0 2.4rem rgba(231, 230, 204, 0.016);
}

.topbar {
  min-height: 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto max-content;
  align-items: center;
  gap: var(--gap);
  padding: 0.3rem 0.75rem;
  border-bottom: 1px solid var(--line);
  background: var(--panelDeep);
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.topbar p {
  margin: 0;
}

.topbarCenter {
  color: var(--title);
  text-align: center;
}

.topbarRight {
  text-align: right;
}

.topControls {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  max-width: 100%;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
}

#crtButton,
#colorFxButton,
#ambienceButton {
  height: 1.45rem;
  min-height: 1.45rem;
  display: block;
  margin: 0;
  padding: 0 0.4rem;
  border: 1px solid var(--line);
  border-radius: 0.2rem;
  background: var(--panelDeep);
  color: var(--text);
  cursor: pointer;
  font-size: inherit;
  line-height: 1;
  text-transform: uppercase;
}

#crtButton:hover,
#crtButton:focus-visible,
#colorFxButton:hover,
#colorFxButton:focus-visible,
#ambienceButton:hover,
#ambienceButton:focus-visible {
  border-color: var(--lineBright);
  background: var(--panel);
  color: var(--accent);
}

#crtButton[aria-pressed="true"],
#colorFxButton[aria-pressed="true"],
#ambienceButton[aria-pressed="true"] {
  border-color: var(--lunarViolet);
  color: var(--lunarViolet);
  box-shadow: inset 0 0 0.4rem rgba(154, 132, 152, 0.12);
}

.mast {
  min-height: 11rem;
  display: block;
  padding: var(--gap);
  border-bottom: 1px solid var(--lineBright);
  background: var(--panelDeep);
}

.mastTitle {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 9.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 1.4rem 2rem;
  border: 1px solid var(--lineBright);
  border-radius: 0.55rem;
  outline: 1px solid var(--line);
  outline-offset: -0.32rem;
  background: var(--panelDeep);
  box-shadow: inset 0 0 1.5rem rgba(52, 49, 50, 0.50);
  text-align: center;
}



.mastTitle h1 {
  margin: 0.25rem 0;
  color: var(--title);
  font-family: var(--fontTitle);
  font-size: clamp(3.2rem, 8vw, 7.5rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 0.82;
  text-shadow:
    0.18rem 0.22rem 0 var(--bar),
    0 0 1rem rgba(231, 230, 204, 0.045);
}

.mastTitle p {
  margin: 0.2rem 0;
  color: var(--muted);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.mastTitle p:first-child {
  color: var(--accent);
  font-size: 0.72rem;
}

.mastTitle p:last-child {
  width: 100%;
  margin-top: 0.85rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--line);
}




.layout {
  display: grid;
  grid-template-columns: var(--leftWidth) minmax(0, 1fr) var(--rightWidth);
  gap: var(--gap);
  align-items: start;
  padding: var(--gap);
  background: linear-gradient(90deg, rgba(231, 230, 204, 0.010), transparent 28%, transparent 72%, rgba(87, 83, 84, 0.050));
}

.left,
.main,
.right {
  min-width: 0;
  display: grid;
  gap: var(--gap);
  align-content: start;
}

.box {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--lineBright);
  border-radius: 0.55rem;
  background:
    linear-gradient(180deg, rgba(231, 230, 204, 0.022), transparent 58%),
    var(--panel);
  box-shadow:
    inset 0 0 0 4px var(--panelDeep),
    inset 0 0 1.5rem rgba(52, 49, 50, 0.35);
}

.box::after {
  position: absolute;
  inset: 0.25rem;
  z-index: 1;
  border: 1px solid rgba(116, 112, 113, 0.30);
  border-radius: 0.42rem;
  content: "";
  pointer-events: none;
}

.box > * {
  position: relative;
  z-index: 2;
}

.boxTitle {
  min-height: 2.2rem;
  margin: 0;
  border-bottom: 1px solid var(--line);
  background: var(--bar);
}

.panelToggle {
  width: 100%;
  min-height: inherit;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.38rem 0.62rem;
  border: 0;
  background: transparent;
  color: var(--title);
  cursor: pointer;
  font-family: var(--fontTitle);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.05;
  text-align: left;
}

.panelToggle:hover,
.panelToggle:focus-visible {
  background: var(--headerBar);
}

.panelToggle > span:first-child {
  flex: 0 0 auto;
  color: var(--text);
  font-family: var(--fontBody);
  font-size: 0.72rem;
  line-height: 1;
}

.panelBody {
  padding: 0.75rem;
}

/* Panel and navigation labels. Navigation keeps its stacked bilingual layout. */
.panelToggle > span:last-child,
.menuLabel > span {
  display: block;
  text-align: left;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.72);
}

/* Home and other direct navigation links */
.nav > ul > li > a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.72);
}

/* Japanese label styling */
.menuLabel [lang="ja"],
.nav a [lang="ja"] {
  display: block;
  margin-top: 0.12rem;
  color: #989392;
  font-family: var(--fontJapanese);
  font-size: 0.84rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.04em;
}


.panelBody[hidden] {
  display: none !important;
}

.placeholder {
  min-height: 6.5rem;
  display: grid;
  place-items: center;
  padding: 0.75rem;
  border: 1px solid var(--line);
  background: var(--panelDeep);
  color: var(--muted);
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.nav.panelBody {
  padding: 0;
}

.nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav > ul > li {
  border-bottom: 1px solid rgba(116, 112, 113, 0.28);
}

.nav > ul > li:last-child {
  border-bottom: 0;
}

.nav > ul > li > a,
.menuLabel {
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  padding: 0.48rem 0.62rem;
  background: linear-gradient(90deg, rgba(231, 230, 204, 0.022), transparent 72%);
  color: var(--title);
  cursor: pointer;
  font-family: var(--fontTitle);
  font-size: 1rem;
  line-height: 1;
  list-style: none;
}

.nav > ul > li > a {
  align-items: flex-start;
  text-align: left;
}

.menuLabel::-webkit-details-marker {
  display: none;
}

.nav > ul > li > a:hover,
.nav > ul > li > a:focus-visible,
.menuLabel:hover,
.menuLabel:focus-visible {
  background: linear-gradient(90deg, rgba(231, 230, 204, 0.045), rgba(231, 230, 204, 0.022));
  box-shadow: inset 3px 0 0 var(--accent);
}

.menuLabel::after {
  margin-left: auto;
  color: var(--text);
  content: "[+]";
  font-family: var(--fontBody);
  font-size: 0.68rem;
}

.menuGroup[open] > .menuLabel::after {
  content: "[−]";
}

.menuSub {
  padding: 0.2rem 0 0.38rem 1.8rem !important;
  border-top: 1px dashed rgba(116, 112, 113, 0.22);
  background: rgba(21, 19, 21, 0.72);
}

.menuSub a {
  display: block;
  padding: 0.28rem 0.45rem;
  color: var(--muted);
}

.menuSub a::before {
  color: var(--lineBright);
  content: "└─ ";
}

.menuSub a:hover,
.menuSub a:focus-visible {
  background: rgba(231, 230, 204, 0.022);
  color: var(--title);
}

/* Full-width desktop navigation beneath the masthead. The existing menu
   classes are reused so the same markup becomes a collapsible vertical menu
   at the mobile breakpoint. */
.menu {
  position: relative;
  z-index: 40;
  margin: 0;
  padding: var(--gap);
  overflow: visible;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--panelDeep);
  box-shadow: none;
}

.menu::after {
  display: none;
}

.menu > .nav {
  overflow: visible;
  border: 1px solid var(--lineBright);
  border-radius: 0.55rem;
  outline: 1px solid rgba(116, 112, 113, 0.30);
  outline-offset: -0.3rem;
  background:
    linear-gradient(180deg, rgba(231, 230, 204, 0.022), transparent 58%),
    var(--panel);
  box-shadow:
    inset 0 0 0 4px var(--panelDeep),
    inset 0 0 1.5rem rgba(52, 49, 50, 0.35);
}

.menu > .boxTitle {
  display: none;
}

.menu > .nav[hidden] {
  display: block;
}

.menu > .nav > ul {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.menu .nav > ul > li {
  position: relative;
  min-width: 0;
  border-right: 1px solid rgba(116, 112, 113, 0.28);
  border-bottom: 0;
}

.menu .nav > ul > li:last-child {
  border-right: 0;
}

.menu .nav > ul > li > a,
.menu .menuLabel {
  min-height: 3.35rem;
  justify-content: center;
  padding: 0.34rem 0.48rem;
  background: linear-gradient(180deg, rgba(231, 230, 204, 0.028), transparent 82%);
  font-size: 1.08rem;
  line-height: 0.95;
  text-align: center;
}

.menu .nav > ul > li > a > span:first-child,
.menu .menuLabel > span > span:first-child {
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.menu .nav > ul > li > a [lang="ja"],
.menu .menuLabel [lang="ja"] {
  margin-top: 0.08rem;
  font-size: 0.68rem;
  line-height: 0.95;
}

.menu .nav > ul > li > a {
  align-items: center;
}

.menu .menuLabel {
  position: relative;
  padding-right: 2.1rem;
}

.menu .menuLabel > span {
  width: 100%;
  text-align: center;
}

.menu .nav > ul > li > a:hover,
.menu .nav > ul > li > a:focus-visible,
.menu .menuLabel:hover,
.menu .menuLabel:focus-visible {
  background: linear-gradient(180deg, rgba(231, 230, 204, 0.055), rgba(231, 230, 204, 0.018));
  box-shadow: inset 0 -3px 0 var(--accent);
}

.menu .nav a[aria-current="page"] {
  color: var(--accent);
  box-shadow: inset 0 -3px 0 var(--accent);
}

/* The end buttons meet the navigation frame's rounded corners. Give only
   those controls matching radii so their normal full-width highlight stays
   inside the frame; middle buttons retain their straight edges. */
.menu .nav > ul > li:first-child > a {
  border-radius: 0.5rem 0 0 0.5rem;
}

.menu .nav > ul > li:last-child .menuLabel {
  border-radius: 0 0.5rem 0.5rem 0;
}

.menu .menuLabel::after {
  position: absolute;
  top: 0.3rem;
  right: 0;
  bottom: 0.3rem;
  width: 1.65rem;
  display: grid;
  place-items: center;
  margin-left: 0;
  border-left: 1px solid rgba(116, 112, 113, 0.56);
  content: "▾";
  font-size: 0.68rem;
  line-height: 1;
}

.menu .menuGroup[open] > .menuLabel::after {
  content: "▴";
}

.menu .menuGroup {
  position: relative;
}

.menu .menuSub {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  isolation: isolate;
  width: max-content;
  min-width: 100%;
  max-width: 16rem;
  padding: 0.3rem !important;
  border: 1px solid var(--lineBright);
  background: rgba(25, 23, 25, 0.985);
  box-shadow: 0.35rem 0.5rem 1rem rgba(0, 0, 0, 0.58);
  white-space: nowrap;
}

.menu .menuSub::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(rgba(52, 49, 50, 0) 50%, rgba(52, 49, 50, 0.35) 50%),
    linear-gradient(90deg, rgba(231, 230, 204, 0.014), rgba(87, 83, 84, 0.012), rgba(231, 230, 204, 0.014));
  background-size: 100% 2px, 3px 100%;
  content: "";
  opacity: 0.42;
  pointer-events: none;
}

.menu .menuSub > li {
  position: relative;
  z-index: 1;
}

.crtOff .menu .menuSub::after {
  display: none;
}

.menu .menuSub a {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  align-items: center;
  column-gap: 0.18rem;
  padding: 0.38rem 0.6rem;
  font-size: 0.88rem;
  line-height: 1.25;
}

/* Cave-terminal style submenu state marker. The fixed first column prevents
   link labels from shifting when the hover/focus marker becomes wider. */
.menu .menuSub a::before {
  width: 3.25rem;
  color: var(--lineBright);
  content: "[ ]";
  font-family: var(--fontBody);
  line-height: 1;
  text-align: left;
  white-space: nowrap;
}

.menu .menuSub a:hover::before,
.menu .menuSub a:focus-visible::before,
.menu .menuSub a[aria-current="page"]::before {
  background:
    linear-gradient(
      to right,
      var(--lineBright) 0 3ch,
      var(--lunarViolet) 3ch 4ch,
      var(--lineBright) 4ch 5ch
    );
  background-clip: text;
  color: transparent;
  content: "> [▪]";
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.menu .menuSub a[aria-current="page"] {
  background: rgba(154, 132, 152, 0.08);
  color: var(--title);
}

.menu .nav > ul > li:last-child .menuSub {
  right: 0;
  left: auto;
}

/* Status portrait and comic-bubble composition.
   The outer panel intentionally does not use the generic .status class because
   Widget Star adds its own status styles after hydration. */
.right > section[aria-label="Status"] {
  z-index: 20;
  overflow: visible;
}

/* The header remains in normal document flow and always sits above the scene. */
.right > section[aria-label="Status"] > .boxTitle {
  position: relative;
  z-index: 10;
  overflow: hidden;
  border-radius: 0.55rem 0.55rem 0 0;
}

.right > section[aria-label="Status"] > .panelBody {
  position: relative;
  z-index: 2;
  min-height: 12rem;
  overflow: visible;
}

.right > section[aria-label="Status"] > .panelBody[hidden] {
  display: none !important;
}

.right > section[aria-label="Status"] .statusRow {
  position: relative;
  min-height: 10.5rem;
}

.right > section[aria-label="Status"] .statusRow > .mediaFx {
  position: absolute;
  top: 0;
  left: 50%;
  right: auto;
  z-index: 4;
  width: 10.5rem;
  height: 10.5rem;
  display: block;
  margin: 0;
  overflow: hidden;
  transform: translateX(-50%);
  background: var(--panelDeep);
  box-shadow:
    0 0 0 2px var(--panelDeep),
    0 0 0 3px var(--line),
    0.35rem 0.45rem 0.8rem rgba(0, 0, 0, 0.45);
}

.right > section[aria-label="Status"] .statusRow > .mediaFx > img.statusAvatar,
.right > section[aria-label="Status"] .statusAvatar {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0;
  border: 1px solid var(--lineBright);
  background: var(--panelDeep);
  object-fit: cover;
  box-shadow: none;
}

.right > section[aria-label="Status"] .statusBubble {
  box-sizing: border-box;
  position: absolute;
  top: 3.45rem;
  left: calc(50% + 5.25rem);
  z-index: 5;
  width: 14rem;
  min-width: 0;
  margin: 0;
  padding: 0.6rem 0.65rem;
  overflow: visible;
  border: 1px solid var(--lineBright);
  background: var(--panelDeep);
  box-shadow: 0.35rem 0.45rem 0.9rem rgba(0, 0, 0, 0.45);
}

.right > section[aria-label="Status"] .statusBubble::before,
.right > section[aria-label="Status"] .statusBubble::after {
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  content: "";
  transform: translateY(-50%);
}

.right > section[aria-label="Status"] .statusBubble::before {
  left: -2rem;
  border-width: 0.85rem 2rem 0.85rem 0;
  border-color: transparent var(--lineBright) transparent transparent;
}

.right > section[aria-label="Status"] .statusBubble::after {
  left: -1.84rem;
  border-width: 0.74rem 1.84rem 0.74rem 0;
  border-color: transparent var(--panelDeep) transparent transparent;
}

.right > section[aria-label="Status"] .statusBubble ws-widget[type="status"] {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: block;
  margin: 0;
  padding: 0;
  color: var(--text);
  font-family: var(--fontBody);
  font-size: 0.78rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.right > section[aria-label="Status"] .statusBubble ws-widget[type="status"] > * {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.right > section[aria-label="Status"] .statusBubble ws-widget[type="status"] * {
  box-sizing: border-box;
  max-width: 100%;
  font-family: inherit;
  overflow-wrap: anywhere;
}

/* The chat panel has a fixed desktop row height. Give Widget Star that
   available height through its official height attribute so the message area
   expands inside the widget instead of leaving unused panel space. */
.chat > .panelBody {
  min-height: 0;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: var(--panelDeep);
}

.chat ws-widget[type="chat"] {
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  flex: 1 1 auto;
  display: block;
  overflow: hidden;
}

.chat ws-widget[type="chat"] iframe,
.chat iframe {
  width: 100% !important;
  max-width: 100%;
  display: block;
  border: 1px solid var(--line) !important;
  background: var(--panelDeep);
}

.calendar > .panelBody {
  min-height: 12rem;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0.45rem;
  align-content: stretch;
}

.calendarMonth,
.calendarGrid {
  width: 100%;
  max-width: 13.75rem;
  margin-inline: auto;
}

.calendarMonth {
  min-height: 1.4rem;
  display: grid;
  place-items: center;
  margin-block: 0;
  border: 1px solid var(--line);
  background: var(--panelDeep);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.calendarGrid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: minmax(1.15rem, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: var(--panelDeep);
}

.calendarWeekday,
.calendarDay {
  min-width: 0;
  display: grid;
  place-items: center;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 0.65rem;
  line-height: 1;
}

.calendarWeekday {
  background: var(--bar);
  color: var(--title);
  font-weight: 700;
}

.calendarDay {
  background: rgba(21, 19, 21, 0.76);
  color: var(--text);
}

.calendarOtherMonth {
  color: var(--muted);
  opacity: 0.48;
}

.calendarToday {
  background: var(--lunarViolet);
  color: var(--panelDeep);
  font-weight: 700;
  text-shadow: none;
}

.neighborButtons {
  display: grid;
  grid-template-columns: repeat(2, 88px);
  justify-content: center;
  gap: 0.35rem;
}

.neighborButton {
  width: 88px;
  height: 31px;
  display: block;
  color: var(--muted);
  text-decoration: none;
}

.neighborPlaceholder {
  width: 88px;
  height: 31px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--lineBright);
  background: var(--panelDeep);
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.neighborButton:hover .neighborPlaceholder,
.neighborButton:focus-visible .neighborPlaceholder {
  border-color: var(--accent);
  color: var(--accent);
}

.sidebarRelic {
  width: 100%;
  max-width: none;
  display: block;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--lineBright);
  border-radius: 0.55rem;
  outline: 1px solid rgba(116, 112, 113, 0.3);
  outline-offset: -0.3rem;
  background: var(--panelDeep);
  box-shadow:
    inset 0 0 1.5rem rgba(52, 49, 50, 0.35),
    0.25rem 0.35rem 0.75rem rgba(0, 0, 0, 0.4);
}

.sidebarRelic img {
  width: 100%;
  height: auto;
  display: block;
}

.updates {
  align-self: start;
}

.updates > .panelBody:not([hidden]) {
  max-height: 19.375rem;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  box-sizing: border-box;
  overflow: hidden;
}

.updates ul {
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}

.updates li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.45rem;
  align-items: start;
  font-size: 0.72rem;
  line-height: 1.3;
}

.updates li + li {
  margin-top: 0.42rem;
  padding-top: 0.42rem;
  border-top: 1px dotted var(--line);
}

.updates li > span {
  min-width: 0;
}

.updates li strong,
.updates li span span {
  display: block;
  font-size: inherit;
  line-height: inherit;
}

.updates li strong {
  overflow: hidden;
  color: var(--title);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.updates li span span {
  display: -webkit-box;
  margin-top: 0.08rem;
  overflow: hidden;
  color: var(--muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.updates time {
  color: var(--accent);
  font-size: inherit;
  line-height: inherit;
}

.updates .panelBody > p {
  margin: 0.6rem 0 0;
  text-align: right;
}

.updates .panelBody > p a {
  color: var(--accent);
  font-size: 0.72rem;
}

main:has(#changelogList) {
  width: min(100% - 2rem, 58rem);
  margin: var(--gap) auto;
}

section[aria-label="Site changelog"] > .boxTitle {
  min-height: 3.15rem;
  display: flex;
  align-items: center;
  padding: 0.55rem 0.9rem 0.45rem;
  color: var(--title);
  font-family: var(--fontTitle);
  font-size: clamp(1.8rem, 4vw, 2.35rem);
  font-weight: 400;
  letter-spacing: 0.015em;
  line-height: 1.05;
}

#changelogList {
  display: grid;
  gap: 0.8rem;
}

#changelogList > article {
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 0.35rem;
  background: var(--panelDeep);
  box-shadow: inset 0 0 1rem rgba(52, 49, 50, 0.3);
}

#changelogList time {
  color: var(--accent);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#changelogList h2 {
  margin: 0.25rem 0 0;
  color: var(--title);
  font-family: var(--fontTitle);
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 400;
  line-height: 1;
}

#changelogList p {
  margin: 0.55rem 0 0;
  color: var(--text);
  line-height: 1.55;
}

.mainTabs {
  min-height: 2.45rem;
  display: grid;
  grid-template-columns: repeat(8, minmax(2rem, 1fr));
  background: var(--panelDeep);
}

.mainTabs span {
  display: grid;
  place-items: center;
  border-right: 1px solid var(--line);
  color: var(--muted);
}

.mainTabs span:last-child {
  border-right: 0;
}

.welcome > .panelBody {
  min-height: 20rem;
  display: grid;
  grid-template-columns: minmax(15rem, 0.85fr) minmax(20rem, 1.35fr);
  grid-template-areas:
    "text image"
    "art image";
  gap: 0.75rem;
}

.welcomeImage {
  grid-area: image;
  min-height: 20rem;
  border-color: var(--lineBright);
  filter: grayscale(0.72) sepia(0.16) saturate(0.54) contrast(1.08) brightness(0.95);
  box-shadow: inset 0 0 1.75rem rgba(65, 58, 59, 0.52);
}

.welcomeText {
  grid-area: text;
  align-self: start;
}

.welcomeText h2 {
  margin: 0 0 0.65rem;
  color: var(--title);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.1;
}

.welcomeText p {
  color: var(--text);
}

.welcomeArt {
  grid-area: art;
  min-height: 4.8rem;
}

.marqueeWindow {
  --mediaTintOpacity: 0.42;
  --mediaGrayscale: 0.4;
  --mediaSaturation: 0.75;
  --mediaBrightness: 0.94;
  --mediaScanlineOpacity: 0.25;
  --mediaVignetteOpacity: 0.28;

  width: 100%;
  overflow: hidden;
  padding: 0.15rem 0;
}

.marqueeWindow:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 0.18rem;
}

.marqueeTrack {
  width: max-content;
  display: flex;
  animation: marqueeScroll var(--marqueeDuration, 24s) linear infinite;
  will-change: transform;
}

.marqueeGroup {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding-right: 0.45rem;
}

.marqueeGroup > .mediaFx {
  flex: 0 0 auto;
  width: 9.375rem;
  height: 1.25rem;
  background: transparent;
}

.marqueeGraphic {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.marqueePlaceholder {
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: linear-gradient(90deg, var(--panel), var(--headerBar), var(--inkShadow), var(--panel));
  color: var(--title);
  font-size: 0.65rem;
}

.marqueeWindow:hover .marqueeTrack,
.marqueeWindow:focus-within .marqueeTrack {
  animation-play-state: paused;
}

.marqueeWindow:hover .mediaFx > .marqueeGraphic,
.marqueeWindow:focus-visible .mediaFx > .marqueeGraphic {
  filter: none;
}

.marqueeWindow:hover .mediaFx::before,
.marqueeWindow:hover .mediaFx::after,
.marqueeWindow:focus-visible .mediaFx::before,
.marqueeWindow:focus-visible .mediaFx::after {
  opacity: 0;
}


@keyframes marqueeScroll {
  to {
    transform: translateX(calc(-1 * var(--marqueeDistance, 39.3rem)));
  }
}

.quick .panelBody > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
}

.quick a {
  min-height: 3.15rem;
  display: grid;
  place-items: center;
  padding: 0.45rem;
  border: 1px solid var(--line);
  border-radius: 0.35rem;
  background: var(--panelDeep);
  text-align: center;
}

.quick a:hover,
.quick a:focus-visible {
  border-color: var(--lineBright);
  background: var(--bar);
}

.photoPile {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 1rem 1.75rem;
}

.photoPile figure {
  position: relative;
  z-index: 1;
  flex: 0 1 12.5rem;
  width: clamp(7.5rem, 24%, 12.5rem);
  max-width: none;
  margin: 0 -1.15rem;
  padding: 0.42rem 0.42rem 0.72rem;
  border: 1px solid var(--lineBright);
  background: var(--boneText);
  box-shadow:
    0.2rem 0.45rem 0.65rem rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(52, 49, 50, 0.24);
  transform: rotate(2deg);
  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}

.photoPile figure:nth-child(2n) {
  transform: rotate(-7deg);
}

.photoPile figure:nth-child(3n) {
  transform: rotate(5deg);
}

.photoPile figure:nth-child(4n) {
  transform: rotate(4deg);
}

.photoPile figure:nth-child(5n) {
  transform: rotate(-2deg);
}

.photoPile figure:nth-child(6n) {
  transform: rotate(-6deg);
}

.photoPile figure:hover {
  z-index: 3;
  box-shadow:
    0.3rem 0.6rem 0.85rem rgba(0, 0, 0, 0.68),
    inset 0 0 0 1px rgba(52, 49, 50, 0.24);
  transform: translateY(-0.35rem) rotate(0deg);
}

/* Apply the reusable media treatment only over the square photo area. The
   paper frame and caption remain unaffected, and hovering the polaroid
   reveals the source image's original color. */
.photoPile figure::before,
.photoPile figure::after {
  position: absolute;
  top: 0.42rem;
  right: 0.42rem;
  left: 0.42rem;
  z-index: 2;
  aspect-ratio: 1 / 1;
  content: "";
  pointer-events: none;
  transition: opacity 180ms ease;
}

.photoPile figure::before {
  background: var(--lunarViolet);
  mix-blend-mode: color;
  opacity: 0.35;
}

.photoPile figure::after {
  background:
    radial-gradient(
      ellipse at center,
      transparent 48%,
      rgba(21, 19, 21, 0.42) 100%
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(52, 49, 50, 0) 0,
      rgba(52, 49, 50, 0) 1px,
      rgba(52, 49, 50, 0.32) 1px,
      rgba(52, 49, 50, 0.32) 2px
    );
}

.photoPile figure img {
  filter:
    grayscale(0.72)
    sepia(0.12)
    saturate(0.5)
    brightness(0.9)
    contrast(1.08);
  transition: filter 180ms ease;
}

.photoPile figure:hover img,
.photoPile figure:focus-within img {
  filter: none;
}

.photoPile figure:hover::before,
.photoPile figure:hover::after,
.photoPile figure:focus-within::before,
.photoPile figure:focus-within::after {
  opacity: 0;
}

.crtOff .photoPile figure::after {
  display: none;
}

/* Keep the polaroid color treatment tied to the global Color Fx toggle.
   CRT scanlines remain independently controlled by the CRT Fx toggle. */
.colorFxOff .photoPile figure::before {
  display: none;
}

.colorFxOff .photoPile figure img {
  filter: none;
}

.photoPile :is(img, .placeholder) {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
  margin: 0;
  border: 1px solid rgba(52, 49, 50, 0.62);
  background: var(--panelDeep);
  object-fit: cover;
}

.photoPile .placeholder {
  min-height: 0;
  padding: 0;
  overflow: hidden;
  color: var(--muted);
}

.photoPile .placeholder > img {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  object-fit: cover;
}

.photoPile figcaption {
  position: relative;
  z-index: 3;
  margin: 0.55rem 0.25rem 0;
  color: var(--panelDeep);
  font-family: var(--fontBody);
  font-size: 0.78rem;
  line-height: 1.2;
  text-align: center;
}

.updateOrb {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: stretch;
}

/* On the full desktop layout, this row is sized so its bottom plus the
   Badges panel aligns with the bottom of Site Views in the left column. */
.updateOrb > .box:has(.panelBody:not([hidden])) {
  height: 19.375rem;
}

.updateOrb > .box:has(.panelBody:not([hidden])) > .panelBody {
  height: calc(100% - 2.2rem);
  overflow: hidden;
}

.updateOrb:has(.panelBody[hidden]) {
  align-items: start;
}


.player > .panelBody {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0.65rem;
  align-items: center;
}

.player .placeholder {
  min-height: 4.5rem;
  font-size: 1.7rem;
}

.player p {
  margin: 0 0 0;
}

.player button {
  margin-right: 0.3rem;
  padding: 0.28rem 0.48rem;
  border: 1px solid var(--lineBright);
  border-radius: 0.25rem;
  background: var(--bar);
  color: var(--title);
  cursor: pointer;
}

.player button:hover,
.player button:focus-visible {
  background: var(--headerBar);
}

.flame .placeholder {
  min-height: 5rem;
}

.counter .panelBody {
  text-align: center;
}

.counter iframe {
  width: 100%;
  height: 2.9rem;
  display: block;
  border: 1px solid var(--line);
  background: var(--panelDeep);
}

.guestbook p,
.moon p,
.relic p,
.flame p {
  margin-bottom: 0;
  color: var(--muted);
  text-align: center;
}

.ads .placeholder,
.relic .placeholder,
.guestbook .placeholder,
.moon .placeholder {
  min-height: 5.5rem;
}

.badges .marqueeGroup > .mediaFx {
  width: 5.5rem;
  height: 1.9375rem;
}

.badges .marqueePlaceholder {
  width: 100%;
  height: 100%;
  font-size: 0.58rem;
  line-height: 1;
}

.footer {
  position: relative;
  min-height: 4.8rem;
  margin: 0 var(--gap) var(--gap);
  padding: 0.42rem;
  overflow: hidden;
  border: 0;
  background: var(--panelDeep);
}

.footerGrid {
  position: relative;
  min-height: 3.8rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--gap);
  padding: 0.75rem 1rem;
  overflow: hidden;
  border: 1px solid var(--lineBright);
  background: var(--panelDeep);
  text-align: center;
}

.footerGrid p {
  margin: 0;
  color: var(--muted);
  font-size: 0.7rem;
  text-transform: uppercase;
}

.footerGrid p:first-child {
  text-align: left;
}

.footerGrid p:last-child {
  text-align: right;
}

/*
  Reusable media effects
  ----------------------
  Wrap an image, GIF, video, canvas, or iframe with .mediaFx, then add
  .mediaTint and/or .mediaCrt. Individual wrappers can override the custom
  properties below in a style attribute or a dedicated CSS class.
*/
.mediaFx {
  --mediaTint: var(--lunarViolet);
  --mediaTintOpacity: 0.5;
  --mediaTintBlend: color;
  --mediaGrayscale: 0.55;
  --mediaSepia: 0.12;
  --mediaSaturation: 0.65;
  --mediaBrightness: 0.9;
  --mediaContrast: 1.08;
  --mediaScanlineOpacity: 0.32;
  --mediaVignetteOpacity: 0.42;

  position: relative;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  isolation: isolate;
  background: var(--panelDeep);
  line-height: 0;
}

.mediaFx > :is(img, picture, video, canvas, iframe) {
  position: relative;
  z-index: 0;
  max-width: 100%;
  transition: filter 180ms ease;
}

.mediaFx .marqueeGraphic {
  transition: filter 180ms ease;
}

.mediaFx > :is(img, video, canvas, iframe) {
  display: block;
}

.mediaTint > :is(img, picture, video, canvas, iframe),
.mediaTint .marqueeGraphic {
  filter:
    grayscale(var(--mediaGrayscale))
    sepia(var(--mediaSepia))
    saturate(var(--mediaSaturation))
    brightness(var(--mediaBrightness))
    contrast(var(--mediaContrast));
}

.mediaTint::before,
.mediaCrt::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  content: "";
  pointer-events: none;
  transition: opacity 180ms ease;
}

.mediaTint::before {
  background: var(--mediaTint);
  mix-blend-mode: var(--mediaTintBlend);
  opacity: var(--mediaTintOpacity);
}

.mediaCrt::after {
  background:
    radial-gradient(
      ellipse at center,
      transparent 48%,
      rgba(21, 19, 21, var(--mediaVignetteOpacity)) 100%
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(52, 49, 50, 0) 0,
      rgba(52, 49, 50, 0) 1px,
      rgba(52, 49, 50, var(--mediaScanlineOpacity)) 1px,
      rgba(52, 49, 50, var(--mediaScanlineOpacity)) 2px
    );
}

/* Reveal the unfiltered media while it is hovered or keyboard-focused. */
.mediaFx:hover > :is(img, picture, video, canvas, iframe),
.mediaFx:focus-within > :is(img, picture, video, canvas, iframe),
.mediaFx:hover .marqueeGraphic,
.mediaFx:focus-within .marqueeGraphic {
  filter: none;
}

.mediaFx:hover::before,
.mediaFx:hover::after,
.mediaFx:focus-within::before,
.mediaFx:focus-within::after {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .mediaFx > :is(img, picture, video, canvas, iframe),
  .mediaFx .marqueeGraphic,
  .mediaTint::before,
  .mediaCrt::after {
    transition: none;
  }
}

.crtOff .mediaCrt::after {
  display: none;
}

.colorFxOff .mediaTint > :is(img, picture, video, canvas, iframe),
.colorFxOff .mediaTint .marqueeGraphic {
  filter: none;
}

.colorFxOff .mediaTint::before {
  display: none;
}

.navlink .panelBody {
  display: grid;
  place-items: center;
}

.navlinkFx {
  width: 11.25rem;
  height: 11.25rem;
  border: 1px solid var(--line);
}

.navlinkFrame {
  width: 100%;
  height: 100%;
  border: 0;
}

.crt {
  isolation: isolate;
}

.crt::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background:
    linear-gradient(rgba(52, 49, 50, 0) 50%, rgba(52, 49, 50, 0.35) 50%),
    linear-gradient(90deg, rgba(231, 230, 204, 0.014), rgba(87, 83, 84, 0.012), rgba(231, 230, 204, 0.014));
  background-size: 100% 2px, 3px 100%;
  content: "";
  opacity: 0.48;
  pointer-events: none;
}

.crt > * {
  position: relative;
  z-index: 2;
}

.crtOff .crt::before {
  display: none;
}


/*
  These selectors style the Site Views widget when this stylesheet is loaded
  inside its iframe. They do not affect the main page because these IDs only
  exist inside the visitor-counter document.
*/
#visitorCounter {
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--panelDeep);
  color: var(--title);
  font-family: var(--fontBody);
}

#visitorCounter::before {
  content: none;
}

#visitorCounterDisplay {
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0.35rem;
  gap: 0.22rem;
  border: 0;
  background: var(--panelDeep);
}

#visitorCounterDisplay .digit {
  min-width: 0;
  height: 100%;
  border: 1px solid var(--line);
  background: var(--shell);
  color: var(--title);
  font-family: var(--fontBody);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 0 0.35rem rgba(231, 230, 204, 0.12);
}


/* On the three-column desktop layout, the right sidebar spans the same grid
   row height as the left and center columns. The statue and NavLink remain
   grouped at the bottom, so NavLink ends level with Site Views and Badges. */
@media (min-width: 72.01rem) {
  .right {
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }

  .right > .sidebarRelic {
    margin-top: auto;
  }
}

@media (max-width: 72rem) {
  .right > section[aria-label="Status"] {
    overflow: hidden !important;
  }

  .right > section[aria-label="Status"] > .panelBody {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .right > section[aria-label="Status"] .statusRow {
    min-height: 6rem !important;
    display: grid !important;
    grid-template-columns: 6rem minmax(0, 1fr) !important;
    gap: 0.8rem !important;
    align-items: center !important;
  }

  .right > section[aria-label="Status"] .statusRow > .mediaFx {
    position: relative !important;
    inset: auto !important;
    width: 6rem !important;
    height: 6rem !important;
    margin: 0 !important;
    transform: none !important;
  }

  .right > section[aria-label="Status"] .statusRow > .mediaFx > img.statusAvatar,
  .right > section[aria-label="Status"] .statusAvatar {
    width: 100% !important;
    height: 100% !important;
  }

  .right > section[aria-label="Status"] .statusBubble {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    transform: none !important;
  }

  .right > section[aria-label="Status"] .statusBubble::before {
    left: -0.7rem !important;
    border-width: 0.55rem 0.7rem 0.55rem 0 !important;
  }

  .right > section[aria-label="Status"] .statusBubble::after {
    left: -0.61rem !important;
    border-width: 0.48rem 0.62rem 0.48rem 0 !important;
  }

  .updateOrb > .box:has(.panelBody:not([hidden])) {
    height: auto;
  }

  .updateOrb > .box:has(.panelBody:not([hidden])) > .panelBody {
    height: auto;
  }

  .layout {
    grid-template-columns: var(--leftWidth) minmax(0, 1fr);
  }

  .right {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

}

@media (max-width: 52rem) {
  body {
    font-size: 0.84rem;
  }

  .site {
    width: calc(100% - 0.55rem);
    margin-top: 0.3rem;
  }

  .topbar {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .topbarRight {
    text-align: center;
  }

  .topControls {
    width: auto;
    max-width: none;
    flex-wrap: wrap;
    justify-content: center;
  }

  .menu {
    margin: var(--gap) var(--gap) 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--lineBright);
    border-radius: 0.55rem;
    background:
      linear-gradient(180deg, rgba(231, 230, 204, 0.022), transparent 58%),
      var(--panel);
    box-shadow:
      inset 0 0 0 4px var(--panelDeep),
      inset 0 0 1.5rem rgba(52, 49, 50, 0.35);
  }

  .menu::after {
    display: block;
  }

  .menu > .nav {
    overflow: visible;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
  }

  .menu > .boxTitle {
    display: block;
  }

  .menu > .nav[hidden] {
    display: none;
  }

  .menu > .nav > ul {
    display: block;
  }

  .menu .nav > ul > li {
    border-right: 0;
    border-bottom: 1px solid rgba(116, 112, 113, 0.28);
  }

  .menu .nav > ul > li:last-child {
    border-bottom: 0;
  }

  .menu .nav > ul > li:first-child > a,
  .menu .nav > ul > li:last-child .menuLabel {
    border-radius: 0;
  }

  .menu .nav > ul > li > a,
  .menu .menuLabel {
    min-height: 2.5rem;
    justify-content: flex-start;
    padding: 0.48rem 0.62rem;
    background: linear-gradient(90deg, rgba(231, 230, 204, 0.022), transparent 72%);
    font-size: 1rem;
    text-align: left;
  }

  .menu .nav > ul > li > a [lang="ja"],
  .menu .menuLabel [lang="ja"] {
    font-size: 0.72rem;
  }

  .menu .nav > ul > li > a {
    align-items: flex-start;
  }

  .menu .menuLabel {
    padding-right: 0.62rem;
  }

  .menu .menuLabel > span {
    width: auto;
    text-align: left;
  }

  .menu .nav > ul > li > a:hover,
  .menu .nav > ul > li > a:focus-visible,
  .menu .menuLabel:hover,
  .menu .menuLabel:focus-visible,
  .menu .nav a[aria-current="page"] {
    box-shadow: inset 3px 0 0 var(--accent);
  }

  .menu .nav > ul > li > a[aria-current="page"]::after,
  .menu .menuSub::after {
    display: none;
  }

  .menu .menuLabel::after {
    position: static;
    width: auto;
    display: block;
    margin-left: auto;
    background: none;
    content: "[+]";
    font-size: 0.68rem;
  }

  .menu .menuGroup[open] > .menuLabel::after {
    content: "[−]";
  }

  .menu .menuSub {
    position: static;
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 0.2rem 0 0.38rem 1.8rem !important;
    border: 0;
    border-top: 1px dashed rgba(116, 112, 113, 0.22);
    background: rgba(21, 19, 21, 0.72);
    box-shadow: none;
    white-space: normal;
  }

  .mastTitle {
    min-height: 8.5rem;
  }

  .layout {
    grid-template-columns: 1fr;
  }

  .right {
    grid-column: 1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .welcome > .panelBody {
    grid-template-columns: 1fr;
    grid-template-areas:
      "text"
      "image"
      "art";
  }

  .welcomeImage {
    min-height: 16rem;
  }

  .quick .panelBody > div,
  .updateOrb {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footerGrid {
    grid-template-columns: 1fr;
  }

  .footerGrid p,
  .footerGrid p:first-child,
  .footerGrid p:last-child {
    text-align: center;
  }

  .photoPile {
    padding-inline: 1rem;
  }

  .photoPile figure {
    flex-basis: 11rem;
    width: clamp(7rem, 24%, 11rem);
    max-width: none;
    margin-inline: -0.8rem;
  }
}

@media (max-width: 34rem) {
  .mastTitle h1 {
    font-size: 4rem;
  }

  .right,
  .quick .panelBody > div,
  .updateOrb {
    grid-template-columns: 1fr;
  }

  .photoPile {
    flex-wrap: wrap;
    padding: 1.2rem 0.65rem;
  }

  .photoPile figure {
    width: min(10rem, 68%);
    max-width: 68%;
    margin: -0.45rem -1rem;
  }

  .mainTabs {
    grid-template-columns: repeat(4, minmax(2rem, 1fr));
  }

  .mainTabs span:nth-child(-n + 4) {
    border-bottom: 1px solid var(--line);
  }

  .player > .panelBody {
    grid-template-columns: 1fr;
  }

  .player .placeholder {
    width: 4.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .photoPile figure,
  .photoPile figure img,
  .photoPile figure::before,
  .photoPile figure::after {
    transition: none;
  }

  .marqueeWindow {
    overflow-x: auto;
  }

  .marqueeTrack {
    animation: none;
    transform: none;
  }

  .marqueeGroup[aria-hidden="true"] {
    display: none;
  }
}