/*

                             ,--,                                                      ,---,
        ,--,    ,----..   ,---.'|                            ,----..            ,--.,`--.' |
      ,--.'|   /   /   \  |   | :       ,---,               /   /   \         ,--.'||   :  :
   ,--,  | :  /   .     : :   : |     .'  .' `\            /   .     :    ,--,:  : |'   '  ;
,---.'|  : ' .   /   ;.  \|   ' :   ,---.'     \          .   /   ;.  \,`--.'`|  ' :|   |  |
|   | : _' |.   ;   /  ` ;;   ; '   |   |  .`\  |        .   ;   /  ` ;|   :  :  | |'   :  ;
:   : |.'  |;   |  ; \ ; |'   | |__ :   : |  '  |        ;   |  ; \ ; |:   |   \ | :|   |  '
|   ' '  ; :|   :  | ; | '|   | :.'||   ' '  ;  :        |   :  | ; | '|   : '  '; |'   :  |
'   |  .'. |.   |  ' ' ' :'   :    ;'   | ;  .  |        .   |  ' ' ' :'   ' ;.    ;;   |  ;
|   | :  | ''   ;  \; /  ||   |  ./ |   | :  |  '        '   ;  \; /  ||   | | \   |`---'. |
'   : |  : ; \   \  ',  / ;   : ;   '   : | /  ;          \   \  ',  / '   : |  ; .' `--..`;
|   | '  ,/   ;   :    /  |   ,/    |   | '` ,/            ;   :    /  |   | '`--'  .--,_
;   : ;--'     \   \ .'   '---'     ;   :  .'               \   \ .'   '   : |      |    |`.
|   ,/          `---`               |   ,.'                  `---`     ;   |.'      `-- -`, ;
'---'                               '---'                              '---'          '---`"

DO NOT STEAL ANY CODE!!! >:(

*/

/*********************************
* Honeycomb Stamp Layouts v. 1.2 *
* CSS by Mooeena                *
* Free to use/modify w/ credit   *
* http://mooeena.neocities.org   *
* 15 widths and 2 preset layouts *
* To use: include the classes    *
* "honeycomb hc-[PICK LAYOUT]"   *
* to your images' container div. *
*********************************/

.honeycomb { display: grid;
  grid-auto-rows: 28px;
  gap: 30px 18px;
  padding: 0 32px 56px 0; }
.hc-2 { grid-template-columns: repeat(2, 32px); } /*Infinite-length section 2 stamps wide*/
.hc-3 { grid-template-columns: repeat(3, 32px); } /*Infinite-length section 3 stamps wide*/
.hc-4 { grid-template-columns: repeat(4, 32px); } /*Infinite-length section 4 stamps wide*/
.hc-5 { grid-template-columns: repeat(5, 32px); } /*Infinite-length section 5 stamps wide*/
.hc-6 { grid-template-columns: repeat(6, 32px); } /*Infinite-length section 6 stamps wide*/
.hc-7 { grid-template-columns: repeat(7, 32px); } /*Infinite-length section 7 stamps wide*/
.hc-8 { grid-template-columns: repeat(8, 32px); } /*Infinite-length section 8 stamps wide*/
.hc-9 { grid-template-columns: repeat(9, 32px); } /*Infinite-length section 9 stamps wide*/
.hc-10 { grid-template-columns: repeat(10, 32px); } /*Infinite-length section 10 stamps wide*/
.hc-11 { grid-template-columns: repeat(11, 32px); } /*Infinite-length section 11 stamps wide*/
.hc-12 { grid-template-columns: repeat(12, 32px); } /*Infinite-length section 12 stamps wide*/
.hc-14 { grid-template-columns: repeat(14, 32px); } /*Infinite-length section 14 stamps wide*/
.hc-16 { grid-template-columns: repeat(16, 32px); } /*Infinite-length section 16 stamps wide*/
.hc-18 { grid-template-columns: repeat(18, 32px); } /*Infinite-length section 18 stamps wide*/
.hc-20 { grid-template-columns: repeat(20, 32px); } /*Infinite-length section 20 stamps wide*/
.hc-mini { grid-template-columns: repeat(3, 32px); padding-bottom:28px;} /*Hexagonal group of max 7 stamps*/
.hc-hive { grid-template-columns: repeat(7, 32px); padding-bottom:28px;} /*Oval-shaped group of max 17 stamps*/
/*The following concern the interlocking pattern of the grids:*/
.hc-2 > :nth-child(2n+1), .hc-4 > :nth-child(2n+1), .hc-6 > :nth-child(2n+1), .hc-8 > :nth-child(2n+1), .hc-10 > :nth-child(2n+1), .hc-12 > :nth-child(2n+1), .hc-14 > :nth-child(2n+1), .hc-16 > :nth-child(2n+1), .hc-18 > :nth-child(2n+1), .hc-20 > :nth-child(2n+1) { margin-top: 28px; }
.hc-3 > :nth-child(6n+1), .hc-3 > :nth-child(6n+3), .hc-3 > :nth-child(6n+4), .hc-3 > :nth-child(6n) { margin-top: 28px; }
.hc-5 > :nth-child(10n+1), .hc-5 > :nth-child(10n+3), .hc-5 > :nth-child(10n+5), .hc-5 > :nth-child(10n+6), .hc-5 > :nth-child(10n+8), .hc-5 > :nth-child(10n) { margin-top: 28px; }
.hc-7 > :nth-child(14n+1), .hc-7 > :nth-child(14n+3), .hc-7 > :nth-child(14n+5), .hc-7 > :nth-child(14n+7), .hc-7 > :nth-child(14n+8), .hc-7 > :nth-child(14n+10), .hc-7 > :nth-child(14n+12), .hc-7 > :nth-child(14n) { margin-top: 28px; }
.hc-9 > :nth-child(18n+1), .hc-9 > :nth-child(18n+3), .hc-9 > :nth-child(18n+5), .hc-9 > :nth-child(18n+7), .hc-9 > :nth-child(18n+9), .hc-9 > :nth-child(18n+10), .hc-9 > :nth-child(18n+12), .hc-9 > :nth-child(18n+14), .hc-9 > :nth-child(18n+16), .hc-9 > :nth-child(18n) { margin-top: 28px; }
.hc-11 > :nth-child(22n+1), .hc-11 > :nth-child(22n+3), .hc-11 > :nth-child(22n+5), .hc-11 > :nth-child(22n+7), .hc-11 > :nth-child(22n+9), .hc-11 > :nth-child(22n+11), .hc-11 > :nth-child(22n+12), .hc-11 > :nth-child(22n+14), .hc-11 > :nth-child(22n+16), .hc-11 > :nth-child(22n+18), .hc-11 > :nth-child(22n+20), .hc-11 > :nth-child(22n) { margin-top: 28px; }
.hc-mini > :nth-child(1), .hc-mini > :nth-child(3), .hc-mini > :nth-child(4), .hc-mini > :nth-child(6) { margin-top: 28px; }
.hc-mini > :nth-child(7) { grid-area: 3/2; }
.hc-hive > :nth-child(1), .hc-hive > :nth-child(3), .hc-hive > :nth-child(5), .hc-hive > :nth-child(7), .hc-hive > :nth-child(8), .hc-hive > :nth-child(10), .hc-hive > :nth-child(12), .hc-hive > :nth-child(14) { margin-top: 28px; }
.hc-hive > :nth-child(15) { grid-area: 3/2; }
.hc-hive > :nth-child(16) { grid-area: 3/4; }
.hc-hive > :nth-child(17) { grid-area: 3/6; }
.hc-center {margin: auto; width:min-content;} /* Add this class to center a group of stamps. */
.hc-center > * {margin-left: -16px;}

.honeycomb a {
  display: inline-block;
  line-height: 0;
  background: transparent;
  outline: 0;
}

.honeycomb a:hover,
.honeycomb a:focus-visible {
  background: transparent;
  outline: 0;
}

.honeycomb a:hover img,
.honeycomb a:focus-visible img {
  filter: drop-shadow(0 0 0 var(--accent)) drop-shadow(0 0 5px var(--accent));
}

.honeycomb-stage {
  min-height: 150px;
  display: grid;
  overflow: visible;
}

.changelog-card .honeycomb {
  gap: 30px 18px;
  max-width: none;
  padding: 0 32px 56px 16px;
  overflow: visible;
  transform: scale(.99);
  transform-origin: center;
}

.changelog-card .hc-center > * {
  margin-left: -16px;
}

.changelog-card .honeycomb img {
  display: block;
}

@font-face {
  font-family: "Pixelated MS Sans Serif";
  src:
    url("https://files.catbox.moe/8fwbkl.woff2") format("woff2"),
    url("https://files.catbox.moe/1za99g.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Pixelated MS Sans Serif";
  src:
    url("https://files.catbox.moe/moqhx6.woff2") format("woff2"),
    url("https://files.catbox.moe/z7csle.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

:root {
  color-scheme: dark;
  --bg: #101313;
  --bg-deep: #090b0b;
  --panel: #181b1b;
  --panel-soft: #202625;
  --ink: #f3f4ee;
  --muted: #b9c7b0;
  --line: #020303;
  --accent: #00d43b;
  --accent-dark: #063f1d;
  --accent-soft: #89ff4d;
  --accent-alt: #39ff14;
  --paper: #d8ddd8;
  --shadow: rgba(0, 0, 0, .65);
  --mono: "Lucida Console", "Courier New", monospace;
  --sans: Verdana, Geneva, sans-serif;
}

:root[data-theme="paper"] {
  color-scheme: light;
  --bg: #e8ece4;
  --bg-deep: #cfd8cb;
  --panel: #f7f8f2;
  --panel-soft: #edf2df;
  --ink: #182018;
  --muted: #465448;
  --line: #5b6659;
  --accent: #008d2c;
  --accent-dark: #d5e7a1;
  --accent-soft: #005f22;
  --accent-alt: #00a832;
  --paper: #fbfcf6;
  --shadow: rgba(43, 50, 40, .24);
}

:root[data-theme="paper"] body {
  background:
    linear-gradient(45deg, rgba(0,0,0,.035) 25%, transparent 25%) 0 0 / 8px 8px,
    linear-gradient(-45deg, rgba(0,0,0,.03) 25%, transparent 25%) 0 0 / 8px 8px,
    radial-gradient(circle at 20% 0%, rgba(0, 141, 44, .16), transparent 28rem),
    var(--bg);
}

:root[data-theme="paper"] .hero-copy {
  text-shadow: 1px 5px 0 rgba(255,255,255,.7);
}

:root[data-theme="paper"] .welcome-panel {
  background:
    linear-gradient(90deg, rgba(247,248,242,.98), rgba(237,242,223,.82)),
    radial-gradient(circle at 88% 20%, rgba(0,141,44,.18), transparent 12rem),
    var(--panel);
}

:root[data-theme="paper"] .ticker span,
:root[data-theme="paper"] .post-placeholder,
:root[data-theme="paper"] #statuscafe {
  color: var(--accent-soft);
  background: #eef3e6;
  border-color: #9ab56f;
}

#statuscafe {
  min-width: 0;
  padding: 10px;
  color: var(--muted);
  font-family: var(--mono);
  background: var(--bg-deep);
  border: 1px solid var(--accent-dark);
}

#statuscafe-username {
  margin-bottom: 6px;
  color: var(--accent-soft);
  font-weight: 700;
}

#statuscafe-content {
  margin: 0;
  overflow-wrap: anywhere;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font: 14px/1.45 var(--sans);
  background:
    linear-gradient(45deg, rgba(255,255,255,.025) 25%, transparent 25%) 0 0 / 8px 8px,
    linear-gradient(-45deg, rgba(255,255,255,.025) 25%, transparent 25%) 0 0 / 8px 8px,
    radial-gradient(circle at 20% 0%, rgba(0, 212, 59, .18), transparent 28rem),
    var(--bg);
  cursor: url("../assets/cursor.png"), auto;

}


a {
  color: var(--accent-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: url("../assets/cursor-select.png"), pointer;
}

a:hover,
a:focus-visible {
  color: #ffffff;
  background: var(--accent-dark);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button {
  font: inherit;
}

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  opacity: .22;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}

.site-shell {
  width: min(1180px, calc(100% - 24px));
  margin: 10px auto 40px;
}

.site-header,
.panel,
.top-nav a {
  border: 2px solid var(--line);
  box-shadow: 4px 4px 0 var(--shadow);
}

.site-header {
  background: var(--panel);
}

.hero {
  min-height: 162px;
  display: flex;
  align-items: end;
  padding: 18px 22px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.08), rgba(0,0,0,.72) 43%, rgba(0,0,0,.4)),
    url("../assets/banner.png") center / cover;
  border-bottom: 2px solid var(--line);
}

.hero-copy {
  max-width: 720px;
  text-shadow: 2px 2px 0 #000;
}

.eyebrow,
.label,
.panel h2,
.top-nav a,
.stat-card span,
.web-button,
.version-line,
.chunky-link,
.theme-toggle {
  font-family: var(--mono);
  font-weight: 700;
  text-transform: lowercase;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--accent-soft);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 6px;
  font-size: clamp(2rem, 5vw, 4.8rem);
  line-height: .9;
  letter-spacing: 0;
}

.hero p:last-child {
  max-width: 590px;
  margin-bottom: 0;
  font-weight: 700;
}

.top-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--bg-deep);
}

.top-nav a {
  display: block;
  padding: 10px 8px;
  color: var(--accent-soft);
  text-align: center;
  text-decoration: none;
  background: linear-gradient(var(--panel-soft), var(--panel));
  border-width: 0 1px 0 0;
  box-shadow: none;
}

.layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 220px;
  gap: 12px;
  margin-top: 12px;
  align-items: start;
}

.sidebar,
.content,
.main-grid {
  display: grid;
  gap: 12px;
}

.panel {
  position: relative;
  padding: 12px;
  background:
    linear-gradient(rgba(255,255,255,.035), transparent 2rem),
    var(--panel);
}

.panel::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px dotted rgba(255,255,255,.13);
  pointer-events: none;
}

.panel h2 {
  margin: -4px -4px 10px;
  padding: 4px 6px;
  color: var(--accent-soft);
  font-size: 1rem;
  line-height: 1.1;
  background: var(--accent-dark);
  border-bottom: 2px solid var(--line);
}

.small {
  color: var(--muted);
  font-size: .78rem;
}

.status-panel strong {
  color: var(--accent-soft);
}

.music-player {
  display: grid;
  place-items: center;
}

.music-window,
.music-window button,
.music-window input {
  font-family: "Pixelated MS Sans Serif", Arial, sans-serif;
  -webkit-font-smoothing: none;
}

.music-window {
  width: 100%;
  max-width: 190px;
  padding: 3px;
  color: #111;
  font-size: 11px;
  background: #c0c0c0;
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset 1px 1px #dfdfdf,
    inset -2px -2px #808080,
    inset 2px 2px #ffffff;
}

.music-title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 3px 2px 3px 3px;
  background: linear-gradient(90deg, #005f22, var(--accent), #89ff4d);
}

.music-title-bar-text {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 3px;
  color: white;
  font-weight: 700;
  text-shadow: 1px 1px 0 #003c16;
}

.music-title-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.music-title-controls {
  display: flex;
  gap: 2px;
  flex: 0 0 auto;
}

.music-title-controls button,
.music-buttons button {
  min-width: 16px;
  min-height: 14px;
  padding: 0;
  color: transparent;
  border: 0;
  border-radius: 0;
  background-color: silver;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset 1px 1px #fff,
    inset -2px -2px grey,
    inset 2px 2px #dfdfdf;
}

.music-title-controls button[aria-label="Minimize"] {
  background-image: url("https://raw.githubusercontent.com/jdan/98.css/main/icon/minimize.svg");
  background-position: bottom 3px left 4px;
}

.music-title-controls button[aria-label="Maximize"] {
  background-image: url("https://raw.githubusercontent.com/jdan/98.css/4a2282dd9170cabf730fb5803d1153d86b2e94e3/icon/maximize.svg");
  background-position: top 2px left 3px;
}

.music-title-controls button[aria-label="Close"] {
  background-image: url("https://raw.githubusercontent.com/jdan/98.css/main/icon/close.svg");
  background-position: top 3px left 4px;
}

.music-window-body {
  display: flex;
  gap: 4px;
  margin-top: 3px;
}

.music-cover-frame {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  padding: 2px;
  background: silver;
  box-shadow:
    inset -1px -1px #fff,
    inset 1px 1px grey,
    inset -2px -2px #dfdfdf,
    inset 2px 2px #0a0a0a;
}

.music-cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.music-controls-area {
  min-width: 0;
  flex: 1;
}

.music-song-window {
  display: flex;
  min-width: 0;
  background: #fff;
  box-shadow:
    inset -1px -1px #fff,
    inset 1px 1px grey,
    inset -2px -2px #dfdfdf,
    inset 2px 2px #0a0a0a;
}

.music-song-title {
  min-width: 0;
  padding: 5px;
  font-family: "Pixelated MS Sans Serif", Arial, sans-serif;
}

.music-song-arrow {
  width: 18px;
  flex: 0 0 auto;
  background: url("https://files.catbox.moe/f5e8np.png") center / contain no-repeat;
}

.music-seeking {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  padding: 9px 2px 5px;
  background: #c0c0c0;
}

.music-current-time,
.music-total-duration {
  font-size: 10px;
}

.music-seek {
  width: 100%;
  accent-color: #008d2c;
  cursor: help;
}

.music-buttons {
  display: flex;
  justify-content: center;
  gap: 5px;
}

.music-buttons button {
  min-width: 26px;
  min-height: 22px;
  cursor: help;
}

.music-buttons button:active {
  box-shadow:
    inset -1px -1px #fff,
    inset 1px 1px #0a0a0a,
    inset -2px -2px #dfdfdf,
    inset 2px 2px grey;
}

.music-buttons img {
  width: 15px;
  height: 15px;
  pointer-events: none;
}

.credit-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.web-button {
  min-height: 31px;
  display: grid;
  place-items: center;
  padding: 3px;
  color: var(--ink);
  font-size: .68rem;
  text-decoration: none;
  border: 2px solid var(--line);
}

.web-button.mint {
  background: repeating-linear-gradient(45deg, #006b24 0 6px, #00d43b 6px 12px);
}

.web-button.dark {
  color: var(--accent-soft);
  background: #050707;
}

.web-button.stripe {
  background: repeating-linear-gradient(90deg, var(--accent-alt) 0 8px, #092d17 8px 16px);
}


.todo ul {
  margin: 0;
  padding-left: 18px;
}

.todo li {
  margin: 5px 0;
}

.navlink iframe {
  display: block;
  width: 180px;
  max-width: 100%;
  aspect-ratio: 1;
  height: auto;
  margin: 0 auto;
  border: 0;
}

.blinkies-cloud,
.tarot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.blinkies-cloud li,
.tarot li {
  display: flex;
}

.welcome-panel {
  min-height: 230px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(24,27,27,.95), rgba(24,27,27,.72)),
    radial-gradient(circle at 88% 20%, rgba(0,212,59,.36), transparent 12rem),
    var(--panel);
}

.label {
  display: inline-block;
  margin-bottom: 6px;
  padding: 3px 7px;
  color: var(--panel);
  background: var(--accent);
  border: 2px solid var(--line);
}

.welcome-panel h2 {
  margin: 0 0 16px;
  padding: 0;
  color: var(--ink);
  font: 800 clamp(1.8rem, 4vw, 3.35rem)/.98 var(--sans);
  text-transform: none;
  background: none;
  border: 0;
}

.welcome-panel p {
  max-width: 700px;
}

.welcome-panel code {
  display: inline-block;
  padding: 2px 7px;
  border: 1px solid var(--accent-dark);
  background: #050706;
  color: var(--accent);
  font-family: "Courier New", Courier, monospace;
  font-size: .95em;
  line-height: 1.2;
  text-shadow: 0 0 6px var(--accent-dark);
}

.ticker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 18px;
}

.ticker span {
  padding: 5px 8px;
  color: var(--accent-soft);
  font-family: var(--mono);
  font-size: .78rem;
  background: #050707;
  border: 1px solid var(--accent-dark);
}

.stat-card {
  min-height: 70px;
}

.tokyo-clock-card {
  text-align: left;
}

.alive-since-card {
  text-align: right;
}

.stat-card span {
  display: block;
  color: var(--accent);
  font-size: .74rem;
}

.stat-card strong {
  display: block;
  margin-top: 5px;
  font-size: 1.2rem;
}

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

.about-card {
  align-self: start;
  text-align: left;
}

.about-card strong {
  color: var(--accent);
}

.info-stack {
  display: grid;
  gap: 10px;
  font-family: var(--mono);
  font-size: .82rem;
  line-height: 1.35;
}

.info-block {
  padding: 9px 10px;
  color: var(--muted);
  background:
    linear-gradient(180deg, rgba(5, 7, 6, .88), rgba(12, 16, 14, .74)),
    var(--bg-deep);
  border: 1px solid var(--accent-dark);
  box-shadow: inset 0 0 14px rgba(0, 141, 44, .16);
}

:root[data-theme="paper"] .info-block {
  color: #d9ead5;
  background:
    linear-gradient(180deg, rgba(5, 7, 6, .92), rgba(12, 16, 14, .8)),
    #07100b;
  border-color: #008d2c;
  box-shadow: inset 0 0 14px rgba(0, 141, 44, .22);
}

.info-block h3 {
  margin: 0 0 7px;
  color: var(--accent);
  font: 800 .78rem/1 var(--mono);
  letter-spacing: 0;
}

:root[data-theme="paper"] .info-block h3 {
  color: #39ff14;
}

.info-block p {
  margin: 2px 0;
  overflow-wrap: anywhere;
}

.info-block span,
.info-block time {
  color: var(--accent-soft);
}

:root[data-theme="paper"] .info-block span,
:root[data-theme="paper"] .info-block time {
  color: #89ff4d;
}

.info-block strong {
  color: var(--accent);
  font-weight: 800;
  text-shadow: 0 0 6px var(--accent-dark);
}

.info-block .obsession-value {
  color: #fff;
  text-shadow: 0 0 5px rgba(255, 255, 255, .28);
}

.info-block .activity-text strong {
  color: #fff;
  text-shadow: 0 0 5px rgba(255, 255, 255, .28);
}

:root[data-theme="paper"] .info-block .obsession-value {
  color: #f9fff8;
  text-shadow: 0 0 4px rgba(255, 255, 255, .4);
}

:root[data-theme="paper"] .info-block .activity-text {
  color: #f9fff8;
  text-shadow: 0 0 4px rgba(255, 255, 255, .4);
}

.status-yellow strong {
  color: yellow;
}

.status-red,
.status-red strong {
  color: red;
}

.info-gap,
.info-gap strong {
  color: red;
  margin-top: 10px;
}

.about-card,
.changelog-card {
  grid-column: span 1;
}

.now-card {
  min-height: 250px;
}

.now-list {
  min-height: 180px;
  display: grid;
  place-items: center;
  margin: 0;
}

.now-row {
  display: grid;
  width: min(330px, 100%);
}

.gallery-card {
  align-self: start;
}

.art-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.art-grid a {
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 0;
  display: grid;
  place-items: end start;
  padding: 7px;
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.2), transparent 45%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.24) 0 2px, transparent 2px 5px),
    var(--accent-dark);
  border: 2px solid var(--line);
}

.art-grid a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 2px, transparent 2px 5px);
  pointer-events: none;
  z-index: 1;
}

.art-grid a:nth-child(2) {
  background-color: var(--accent-alt);
  color: #111;
}

.art-grid a:nth-child(3) {
  background-color: #092d17;
}

.art-grid a:nth-child(4) {
  background-color: #00d43b;
  color: #101313;
}

.art-grid img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.art-grid span {
  position: relative;
  z-index: 2;
  padding: 2px 5px;
  color: #fff;
  font-family: var(--mono);
  font-weight: 700;
  background: rgba(0, 0, 0, .58);
  text-shadow: 1px 1px 0 #000;
}

.version-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding: 8px;
  color: var(--panel);
  background: var(--accent);
  border: 2px solid var(--line);
}

.guestbook {
  min-height: 150px;
  background:
    linear-gradient(135deg, var(--accent-dark) 0 72%, transparent 72%),
    var(--panel);
}

.chunky-link,
.theme-toggle {
  display: inline-block;
  width: 100%;
  padding: 9px 10px;
  color: var(--panel);
  text-align: center;
  text-decoration: none;
  background: var(--accent);
  border: 2px solid var(--line);
  box-shadow: 3px 3px 0 var(--shadow);
  cursor: pointer;
}

.theme-toggle:hover,
.theme-toggle:focus-visible,
.chunky-link:hover,
.chunky-link:focus-visible {
  color: #fff;
  background: #111;
}

.updates ol {
  margin: 0;
  padding-left: 20px;
}

.updates li {
  margin-bottom: 8px;
}

.updates time {
  color: var(--accent);
  font-family: var(--mono);
}

.blog-page .hero {
  min-height: 138px;
}

.blog-page .hero-copy {
  display: flex;
  align-items: end;
  gap: 12px;
}


.top-nav a:hover,
.top-nav a:focus-visible,
.top-nav a[aria-current="page"] {
  color: var(--ink);
  background: var(--accent-dark);
  box-shadow: inset 0 -4px 0 var(--accent);
}

.top-nav a[aria-current="page"] {
  border-bottom-color: var(--accent);
}

.placeholder-screen {
  min-height: calc(100vh - 250px);
  display: grid;
  place-items: center;
  margin-top: 12px;
  padding: 48px 12px;
}

.placeholder-screen p {
  margin: 0;
  color: var(--accent-soft);
  font: 700 clamp(1.45rem, 4vw, 2.4rem)/1 var(--mono);
  text-shadow: 2px 2px 0 #000;
}

.blog-layout {
  display: grid;
  grid-template-columns: minmax(230px, 310px) minmax(0, 1fr);
  gap: 12px;
  margin-top: 12px;
  align-items: start;
}

.blog-sidebar {
  display: grid;
  gap: 12px;
}

.blog-intro p:last-child {
  margin-bottom: 0;
}

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

.post-index li + li {
  border-top: 1px dashed rgba(255,255,255,.2);
}

.post-index a {
  position: relative;
  display: grid;
  gap: 3px;
  padding: 10px 4px;
  color: var(--ink);
  text-decoration: none;
}

.post-index a::before {
  content: ">";
  position: absolute;
  color: var(--accent);
  transform: translateX(-1px);
}

.post-index strong,
.post-index time {
  padding-left: 18px;
}

.post-index time {
  color: var(--muted);
  font: .76rem/1.3 var(--mono);
}

.blog-reader {
  grid-column: 2;
  min-height: 450px;
  padding: 18px;
}

.post-heading {
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(255,255,255,.2);
}

.post-heading h2 {
  margin: 0 0 8px;
  padding: 0;
  color: var(--ink);
  font-size: clamp(1.45rem, 3vw, 2.2rem);
  background: none;
  border: 0;
}

.post-meta {
  margin: 0;
  color: var(--accent);
  font: 700 .78rem/1.4 var(--mono);
  padding: 12px 0;
}

.post-body {
  max-width: 68ch;
  font-size: 1rem;
}

.post-body p {
  margin-bottom: 1.2em;
}

.post-placeholder {
  margin-top: 30px;
  padding: 14px;
  color: var(--muted);
  font-family: var(--mono);
  background: var(--bg-deep);
  border-left: 4px solid var(--accent);
}

.post-placeholder strong {
  color: var(--accent-soft);
}

@media (max-width: 980px) {
  .layout {
    grid-template-columns: 190px minmax(0, 1fr);
  }

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

@media (max-width: 760px) {
  .site-shell {
    width: min(100% - 14px, 720px);
    margin-top: 7px;
  }

  .hero {
    min-height: 210px;
    align-items: end;
    padding: 14px;
    background-position: left center;
  }

  .top-nav {
    grid-template-columns: repeat(2, 1fr);
  }

  .layout,
  .main-grid,
  .right-rail,
  .blog-layout {
    grid-template-columns: 1fr;
  }

  .left-rail {
    order: 2;
  }

  .content {
    order: 1;
  }

  .right-rail {
    order: 3;
  }

  h1 {
    font-size: 2.45rem;
  }

  .blog-page .hero-copy {
    align-items: center;
  }

  .blog-reader {
    grid-column: 1;
    min-height: 420px;
  }
}