/* the page shell: the base everything shares, the chrome every page draws
   (feathers, whispers, banner, navbar, webring, the article frame and its
   dividers), the small form primitives the mosaic and the console share, and
   the blog's own post and console styles. the shelf's rules live in
   shelf/shelf.css, the mosaic's in mosaic/mosaic.css, the memoriam's in
   memoriam/memoriam.css.

   the faces below are the same three declarations styles.css carries: retronumbers
   for the digits, blue screen for ascii text, and unicode-range so that everything
   else, the stars and the arrows, falls back to a system face instead of being
   drawn in the pixel font. */

@font-face {
  font-family: 'Blue Screen';
  src: url('https://gumi.gay/Blue%20Screen%20Personal%20Use.ttf');
  font-style: normal;
  font-weight: 900;
  unicode-range: U+0020-007E;
}

/* Blue Screen draws blanks for digits; RetroNumbers must outrank it */
@font-face {
  font-family: 'RetroNumbers';
  src: url('https://gumi.gay/hrt_guide/Perfect%20DOS%20VGA%20437.ttf');
  font-style: normal;
  font-weight: 400;
  unicode-range: U+0020-007E;
}

:root {
  --void: #000000;
  --pink: #ff00ff;
  --feather: #ffd6ec;
  --lilac: #c9b8ff;
  --halo-gold: #ffe9a8;
}

html {
  scrollbar-width: none;
}

html::-webkit-scrollbar {
  display: none;
}

body {
  margin: 0;
  padding: 0 0 90px 0;
  background-color: var(--void);
  color: #c8c8d4;
  font-family: 'RetroNumbers', 'Blue Screen', 'Courier New', monospace;
  font-size: 16px;
  line-height: 1.6;
  animation: power-on 0.4s steps(2) 1;
}

/* post pages read at a kinder size. the star field stays: it is the site's
   background, and shelf, mosaic and memoriam had it switched off because they
   carry the same class. */
.plain-reading .article {
  font-size: 19px;
}

@keyframes power-on {
  0% { opacity: 0.15; }
  50% { opacity: 0.55; }
  100% { opacity: 1; }
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 120%, rgba(120, 80, 200, 0.35), transparent),
    radial-gradient(ellipse 60% 40% at 20% -10%, rgba(255, 214, 236, 0.12), transparent),
    radial-gradient(circle 1px at 12% 22%, rgba(255, 214, 236, 0.8) 50%, transparent 51%),
    radial-gradient(circle 1px at 78% 14%, rgba(201, 184, 255, 0.8) 50%, transparent 51%),
    radial-gradient(circle 1px at 34% 68%, rgba(255, 233, 168, 0.7) 50%, transparent 51%),
    radial-gradient(circle 1px at 88% 62%, rgba(255, 214, 236, 0.6) 50%, transparent 51%);
  background-repeat: no-repeat, no-repeat, repeat, repeat, repeat, repeat;
  background-size: 100% 100%, 100% 100%, 340px 340px, 410px 410px, 290px 290px, 470px 470px;
  animation: twinkle 5s infinite steps(1);
}

@keyframes twinkle {
  0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  50% { background-position: 0 0, 0 0, 0 170px, 0 -205px, 0 145px, 0 -235px; }
  100% { background-position: 0 0, 0 0, 0 340px, 0 -410px, 0 290px, 0 -470px; }
}

.crt {
  text-shadow: 0.4px 0 1px rgba(255, 214, 236, 0.5), -0.4px 0 1px rgba(201, 184, 255, 0.5);
  position: relative;
}

.crt::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.5) 50%, rgba(255, 0, 140, 0.015) 50%);
  z-index: 2;
  background-size: 100% 3px;
  pointer-events: none;
}

.crt::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(255, 240, 250, 0.03);
  opacity: 0.04;
  z-index: 2;
  pointer-events: none;
}

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 12px;
  position: relative;
  z-index: 3;
}

#banner {
  margin: 26px auto 0 auto;
  max-width: 350px;
  background-color: rgba(3, 3, 5, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.07);
  text-align: center;
  padding: 16px 8px 12px 8px;
}

#banner .halo {
  position: absolute;
  top: -16px;
  left: 50%;
  width: 92px;
  height: 26px;
  margin-left: -46px;
  border: 2px solid var(--halo-gold);
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(255, 233, 168, 0.55);
}

#banner .glitch {
  font-weight: 700;
  color: #f2f2f4;
  text-shadow: 2px 0 rgba(255, 0, 255, 0.55), -2px 0 rgba(0, 255, 255, 0.45), 0 0 10px rgba(255, 214, 236, 0.35);
  position: relative;
  animation: glitch-a 3.2s infinite steps(1);
}

@keyframes glitch-a {
  0%, 88%, 100% { transform: translate(0, 0); clip-path: inset(0 0 0 0); opacity: 1; }
  90% { transform: translate(-3px, 1px); clip-path: inset(20% 0 40% 0); opacity: 0.85; }
  93% { transform: translate(3px, -1px); clip-path: inset(60% 0 5% 0); opacity: 0.9; }
  95% { transform: translate(0, 0); clip-path: inset(0 0 0 0); opacity: 1; }
}

#banner .subtext {
  margin: 5px 0 0 0;
  font-size: small;
  letter-spacing: 5px;
  color: var(--feather);
}

#navbar {
  margin: 10px auto 0 auto;
  max-width: 350px;
  background-color: rgba(3, 3, 5, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.07);
  text-align: center;
  padding: 7px 8px;
  font-size: small;
}

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

#navbar a:hover {
  color: #ffffff;
  text-shadow: 0 0 8px var(--feather);
}

#navbar .here {
  color: #ffffff;
  text-shadow: 0 0 8px var(--feather);
}

#webring {
  margin: 8px auto 0 auto;
  max-width: 350px;
  background-color: rgba(3, 3, 5, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.07);
  text-align: center;
  padding: 6px 8px;
  font-size: x-small;
  color: #9a9aa8;
  display: flex;
  flex-wrap: wrap;
}

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

hr {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  max-width: 540px;
  margin: 22px auto;
}

main {
  position: relative;
  z-index: 3;
}

.feather-divider {
  text-align: center;
  color: rgba(255, 214, 236, 0.45);
  letter-spacing: 12px;
  font-size: 13px;
  margin: 20px 0;
  user-select: none;
}

.article {
  background-color: rgba(3, 3, 5, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.07);
  padding: 24px 30px 28px 30px;
  margin: 0 auto;
  position: relative;
}

.article::before {
  content: "\2726";
  position: absolute;
  top: 6px;
  left: 10px;
  color: rgba(255, 214, 236, 0.4);
  font-size: 12px;
}

.article::after {
  content: "\2726";
  position: absolute;
  bottom: 6px;
  right: 10px;
  color: rgba(255, 214, 236, 0.4);
  font-size: 12px;
}

.article h1 {
  color: var(--feather);
  text-shadow: 0 0 12px rgba(255, 214, 236, 0.5);
  margin: 0 0 4px 0;
}

.article .stamps {
  color: #9a9aa8;
  font-size: small;
  letter-spacing: 2px;
  margin: 0 0 6px 0;
}

.article .reading {
  color: #7c7c8c;
  font-size: x-small;
  letter-spacing: 3px;
  margin: 0 0 16px 0;
}

.article h2, .article h3 {
  color: var(--lilac);
  text-shadow: 0 0 8px rgba(201, 184, 255, 0.4);
}

.article > p:first-of-type::first-letter {
  float: left;
  font-size: 3.1em;
  line-height: 0.85;
  padding: 4px 8px 0 0;
  color: var(--feather);
  text-shadow: 0 0 10px rgba(255, 214, 236, 0.55);
}

.article a {
  color: var(--feather);
}

.article blockquote {
  margin: 14px 0;
  padding: 6px 16px;
  border-left: 2px solid var(--lilac);
  color: var(--lilac);
}

.article code {
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 5px;
}

.article pre {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  padding: 12px;
  overflow-x: auto;
}

.article pre code {
  background: none;
  padding: 0;
}

.article img.post-img {
  max-width: 100%;
}

.article figure.post-seal {
  margin: 22px 0;
  text-align: center;
}

.article img.seal-img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

.comment {
  border-left: 2px solid rgba(201, 184, 255, 0.3);
  padding: 6px 0 6px 12px;
  margin: 0 0 14px 0;
}

.comment-form {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  padding: 14px 16px;
}

.comment-form textarea {
  min-height: 120px;
}

.comment-parent-note {
  color: var(--lilac);
  font-size: x-small;
  letter-spacing: 2px;
}

.whisper {
  position: fixed;
  color: rgba(255, 214, 236, 0.22);
  font-size: small;
  letter-spacing: 4px;
  pointer-events: none;
  z-index: 1;
  animation: whisper-drift 38s ease-in-out infinite alternate;
}

.whisper.w2 { animation-duration: 47s; animation-delay: -12s; }
.whisper.w3 { animation-duration: 53s; animation-delay: -25s; }
.whisper.w4 { animation-duration: 61s; animation-delay: -8s; }
.whisper.w5 { animation-duration: 43s; animation-delay: -30s; }

@keyframes whisper-drift {
  0% { transform: translate(0, 0); opacity: 0.12; }
  50% { transform: translate(14px, -22px); opacity: 0.3; }
  100% { transform: translate(-10px, -6px); opacity: 0.1; }
}

.ambient-feathers {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.ambient-feathers span {
  position: absolute;
  top: -5vh;
  color: rgba(255, 214, 236, 0.5);
  animation: feather-fall 16s infinite linear;
}

.ambient-feathers span:nth-child(2n) { left: 22%; animation-delay: -4s; animation-duration: 19s; }
.ambient-feathers span:nth-child(3n) { left: 48%; animation-delay: -9s; animation-duration: 14s; }
.ambient-feathers span:nth-child(4n) { left: 67%; animation-delay: -2s; animation-duration: 21s; }
.ambient-feathers span:nth-child(5n) { left: 84%; animation-delay: -12s; animation-duration: 17s; }
.ambient-feathers span:nth-child(7n) { left: 8%; animation-delay: -7s; animation-duration: 22s; }

@keyframes feather-fall {
  0% { transform: translateY(-6vh) rotate(0deg); opacity: 0; }
  8% { opacity: 0.7; }
  92% { opacity: 0.5; }
  100% { transform: translateY(106vh) translateX(-16px) rotate(340deg); opacity: 0; }
}

.trail-star {
  position: fixed;
  pointer-events: none;
  color: var(--feather);
  z-index: 8;
  animation: trail-fade 0.9s ease-out forwards;
  text-shadow: 0 0 6px rgba(255, 214, 236, 0.6);
}

@keyframes trail-fade {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.8; }
  100% { transform: translate(var(--dx, 8px), 30px) rotate(var(--dr, 50deg)) scale(0.4); opacity: 0; }
}

.return {
  display: block;
  text-align: center;
  margin-top: 26px;
  color: var(--lilac);
  text-decoration: none;
  letter-spacing: 3px;
  font-size: small;
}

.return:hover {
  color: #ffffff;
  text-shadow: 0 0 8px var(--feather);
}

textarea, input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #e8e8f0;
  font-family: Consolas, 'Cascadia Mono', 'Courier New', monospace;
  font-size: 15px;
  padding: 10px;
}

textarea {
  min-height: 320px;
  resize: vertical;
}

button, .btn {
  background: rgba(255, 214, 236, 0.08);
  border: 1px solid rgba(255, 214, 236, 0.4);
  color: var(--feather);
  font-family: 'RetroNumbers', 'Blue Screen', 'Courier New', monospace;
  font-size: small;
  letter-spacing: 2px;
  padding: 7px 16px;
  cursor: pointer;
  text-decoration: none;
}

button:hover, .btn:hover {
  background: rgba(255, 214, 236, 0.18);
  text-shadow: 0 0 8px var(--feather);
}

.row {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin: 12px 0 0 0;
}

.empty {
  text-align: center;
  color: #9a9aa8;
  letter-spacing: 2px;
}

@media (min-width: 1200px) {
  .composer.split {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.fieldrow {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.fieldrow > div {
  flex: 1;
  min-width: 140px;
}

.fieldrow label {
  display: block;
  font-size: x-small;
  letter-spacing: 2px;
  color: #9a9aa8;
  margin: 0 0 4px 0;
}

.memo-rules {
  color: #9a9aa8;
  font-size: small;
  line-height: 1.7;
  border-left: 2px solid rgba(255, 233, 168, 0.4);
  padding: 6px 12px;
  margin: 14px 0;
}

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

.memo {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 14px 0;
}

.memo-name {
  display: block;
  color: var(--feather);
  font-size: 18px;
  letter-spacing: 1px;
}

.memo-years {
  color: #7c7c8c;
  font-size: small;
  letter-spacing: 2px;
  margin-left: 8px;
}

.memo-note {
  display: block;
  color: #8a8a98;
  font-size: small;
  margin: 4px 0 8px;
}

.memo-light {
  background: rgba(255, 233, 168, 0.06);
  border: 1px solid rgba(255, 233, 168, 0.35);
  color: var(--halo-gold);
  font-family: 'RetroNumbers', 'Blue Screen', 'Courier New', monospace;
  font-size: x-small;
  letter-spacing: 2px;
  padding: 4px 12px;
  cursor: pointer;
}

.memo-light:hover {
  background: rgba(255, 233, 168, 0.16);
}

.memo-light.done {
  opacity: 0.55;
}

.memo-count {
  color: #fff;
}

.console-mode button,
.console-mode .btn,
.console-mode .badge,
.console-mode .counter,
.console-mode table.listing,
.console-mode .fieldrow label,
.console-mode .notice,
.console-mode .restore-bar,

.console-mode textarea,