:root {
  color-scheme: dark;
  --page: #090909;
  --shell: #111;
  --panel: #151515;
  --panel-raised: #1c1c1c;
  --line: #454545;
  --line-soft: #303030;
  --text: #ededed;
  --muted: #aaa;
  --quiet: #777;
  --accent: #c8c8c8;
  --link: #f0f0f0;
  --shadow: rgba(0, 0, 0, .56);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

.cursor-pixel {
  position: fixed;
  z-index: 9999;
  width: var(--pixel-size);
  height: var(--pixel-size);
  margin: calc(var(--pixel-size) / -2) 0 0 calc(var(--pixel-size) / -2);
  pointer-events: none;
  background: #fff;
  box-shadow: 0 0 5px 2px rgba(255, 255, 255, .75), 0 0 12px rgba(255, 255, 255, .55);
  animation: cursor-pixel-fall var(--pixel-duration) ease-out forwards;
}

@keyframes cursor-pixel-fall {
  0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
  100% { opacity: 0; transform: translate(var(--pixel-drift), var(--pixel-fall)) rotate(135deg) scale(.25); }
}

body {
  min-width: 320px;
  margin: 0;
  background:
    radial-gradient(ellipse at 50% 0, #262626 0, transparent 38rem),
    repeating-linear-gradient(135deg, #0b0b0b 0, #0b0b0b 2px, #0e0e0e 2px, #0e0e0e 4px);
  color: var(--text);
  font-family: "DM Sans", Tahoma, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

button, a { font: inherit; }
a { color: var(--link); }
button { color: inherit; }

.skip-link {
  position: absolute;
  z-index: 20;
  top: 8px;
  left: 8px;
  padding: 8px 12px;
  transform: translateY(-150%);
  background: #fff;
  color: #000;
}

.skip-link:focus { transform: translateY(0); }

.page-shell {
  width: min(1120px, calc(100% - 32px));
  min-height: 100vh;
  margin: 18px auto;
  overflow: hidden;
  border: 1px solid #555;
  border-radius: 22px 22px 4px 4px;
  background: var(--shell);
  box-shadow: 0 18px 70px var(--shadow);
}

.masthead {
  display: flex;
  min-height: 112px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 30px;
  border-bottom: 1px solid #3c3c3c;
  background: linear-gradient(180deg, #383838 0%, #171717 44%, #0b0b0b 100%);
}

.site-mark {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 18px;
  color: var(--text);
  text-decoration: none;
}

.bunny-mark {
  position: relative;
  display: grid;
  width: 52px;
  height: 58px;
  flex: 0 0 auto;
  align-items: end;
  justify-content: center;
  grid-template-columns: repeat(2, 15px);
  gap: 5px;
}

.bunny-mark::after {
  width: 31px;
  height: 30px;
  border: 2px solid #ededed;
  border-radius: 50% 50% 46% 46%;
  background: linear-gradient(145deg, #fff, #bdbdbd);
  content: "";
}

.bunny-mark i {
  position: absolute;
  top: 0;
  width: 13px;
  height: 35px;
  border: 2px solid #ededed;
  border-radius: 90% 90% 45% 45%;
  background: linear-gradient(90deg, #aaa, #f8f8f8);
}

.bunny-mark i:first-child { left: 11px; transform: rotate(-12deg); }
.bunny-mark i:last-child { right: 9px; transform: rotate(12deg); }

.site-title-wrap { display: grid; }
.site-title { font-size: clamp(22px, 3vw, 31px); font-weight: 600; letter-spacing: -.04em; line-height: 1.15; }
.site-tagline { margin-top: 5px; color: #c4c4c4; font-size: 13px; }

.masthead-meta {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
  color: #bbb;
  font: 10px "DM Mono", Consolas, monospace;
  letter-spacing: .07em;
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e5e5e5;
  box-shadow: 0 0 9px #fff;
}

.theme-toggle {
  margin-left: 9px;
  padding: 6px 9px;
  border: 1px solid #696969;
  border-radius: 2px;
  background: #181818;
  cursor: pointer;
  font: 10px "DM Mono", Consolas, monospace;
}

.theme-toggle:hover, .theme-toggle:focus-visible { background: #333; }

.page-layout {
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
  gap: 18px;
  padding: 18px;
}

.sidebar { display: flex; flex-direction: column; gap: 14px; }

.sidebar-box, .sidebar-note {
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: linear-gradient(145deg, #1d1d1d, #101010);
  box-shadow: 0 3px 9px var(--shadow);
}

.sidebar-heading, .panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  border: 1px solid #5b5b5b;
  background: linear-gradient(180deg, #707070 0%, #303030 48%, #080808 52%, #171717 100%);
  color: #f3f3f3;
  font-weight: 500;
  text-shadow: 0 1px 2px #000;
}

.sidebar-heading { padding: 3px 7px; font-size: 12px; }
.site-nav { display: grid; gap: 5px; margin-top: 8px; }

.nav-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 7px;
  border: 1px solid #474747;
  border-radius: 3px;
  background: linear-gradient(180deg, #383838, #1b1b1b 55%, #111);
  color: #ddd;
  font-size: 12px;
  text-decoration: none;
  transition: background .15s, color .15s;
}

.nav-link:hover, .nav-link:focus-visible, .nav-link.active {
  border-color: #c8c8c8;
  background: linear-gradient(180deg, #696969, #292929 55%, #151515);
  color: #fff;
}

.nav-icon { width: 16px; color: #ddd; text-align: center; font-size: 15px; }
.status-box p { margin: 9px 2px 0; color: #ccc; font-size: 11px; }
.status-label { display: block; color: #888; font: 9px "DM Mono", Consolas, monospace; letter-spacing: .08em; }

.sidebar-note {
  padding: 12px;
  text-align: center;
  background: #171717;
}

.sidebar-note p { margin: 3px 0 1px; color: #bbb; font-size: 11px; }
.sidebar-note strong { color: #fff; font: 22px "DM Mono", Consolas, monospace; letter-spacing: .12em; }
.note-stars { color: #ddd; letter-spacing: .32em; }
.note-small { color: #888; font-size: 10px; }

main { min-width: 0; }
.section-panel {
  margin-bottom: 13px;
  padding: 10px;
  border: 1px solid #585858;
  border-radius: 4px;
  background: linear-gradient(145deg, #202020, #121212 55%, #191919);
  box-shadow: 0 3px 10px var(--shadow), inset 0 0 0 1px rgba(255,255,255,.025);
  scroll-margin-top: 14px;
}

.panel-title { min-height: 29px; padding: 3px 9px; font-size: 13px; }
.panel-controls { color: #c1c1c1; font: 12px "DM Mono", Consolas, monospace; letter-spacing: .12em; }

.hero-content {
  display: grid;
  min-height: 270px;
  grid-template-columns: minmax(0, 1fr) 230px;
  align-items: center;
  gap: 18px;
  padding: 26px 26px 20px;
  border: 1px solid #484848;
  border-top: 0;
  background-image: url(5.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.eyebrow {
  margin: 0 0 9px;
  color: #aaa;
  font: 10px "DM Mono", Consolas, monospace;
  letter-spacing: .13em;
}

h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 12px; font-size: clamp(30px, 5vw, 47px); font-weight: 600; letter-spacing: -.055em; line-height: 1.02; }
h1 span { color: #bcbcbc; }
.hero-description { max-width: 445px; margin-bottom: 18px; color: #c7c7c7; font-size: 14px; }

.pixel-button, .random-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 9px 13px;
  border: 1px solid #d5d5d5;
  border-radius: 2px;
  background: linear-gradient(#eee, #c4c4c4);
  box-shadow: 0 2px 0 #777;
  color: #111;
  font: 11px "DM Mono", Consolas, monospace;
  text-decoration: none;
  cursor: pointer;
}

.pixel-button:hover, .random-button:hover { background: #fff; }
.pixel-button:active, .random-button:active { transform: translateY(1px); box-shadow: 0 1px 0 #777; }

.hero-art {
  position: relative;
  display: grid;
  min-height: 202px;
  overflow: hidden;
  place-items: center;
  border: 1px solid #777;
  background:
    linear-gradient(135deg, transparent 49.5%, rgba(255,255,255,.09) 50%, transparent 50.5%),
    linear-gradient(45deg, transparent 49.5%, rgba(255,255,255,.07) 50%, transparent 50.5%),
    #1a1a1a;
}

.art-grid {
  position: absolute;
  inset: 0;
  opacity: .14;
  background-image: linear-gradient(#aaa 1px, transparent 1px), linear-gradient(90deg, #aaa 1px, transparent 1px);
  background-size: 19px 19px;
}

.art-halo {
  position: absolute;
  width: 130px;
  height: 130px;
  border: 1px solid #8a8a8a;
  border-radius: 50%;
  box-shadow: 0 0 0 11px rgba(255,255,255,.025), 0 0 0 22px rgba(255,255,255,.025);
}

.art-ears { position: relative; z-index: 1; display: flex; height: 95px; align-items: end; gap: 7px; }
.art-ears::after { position: absolute; z-index: -1; bottom: 0; left: 50%; width: 62px; height: 58px; transform: translateX(-50%); border: 2px solid #eee; border-radius: 48% 48% 43% 43%; background: linear-gradient(145deg, #fff, #888); content: ""; }
.art-ears i { width: 19px; height: 80px; border: 2px solid #eee; border-radius: 90% 90% 45% 45%; background: linear-gradient(90deg, #777, #eee 60%, #999); }
.art-ears i:first-child { transform: rotate(-9deg); }
.art-ears i:last-child { transform: rotate(9deg); }
.art-caption, .art-stamp { position: absolute; z-index: 2; color: #ddd; font: 9px "DM Mono", Consolas, monospace; letter-spacing: .12em; }
.art-caption { right: 10px; bottom: 9px; text-align: right; }
.art-stamp { top: 9px; left: 10px; color: #888; }

.ticker {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px 0;
  color: #bcbcbc;
  font-size: 11px;
}

.ticker-label { flex: 0 0 auto; padding: 2px 5px; border: 1px solid #777; color: #eee; font: 9px "DM Mono", Consolas, monospace; }
.ticker p { margin: 0; }

.about-layout { display: grid; grid-template-columns: minmax(180px, .75fr) 1.4fr; gap: 22px; padding: 17px 10px 8px; }
.profile-card { align-self: start; border: 1px solid #626262; background: #101010; }
.profile-top { display: flex; align-items: center; justify-content: space-between; padding: 10px; border-bottom: 1px solid #444; background: linear-gradient(135deg, #303030, #121212); }
.profile-symbol { display: block; width: 48px; height: 48px; border: 1px solid #aaa; background: #000; object-fit: contain; }
.profile-id { color: #aaa; font: 9px "DM Mono", Consolas, monospace; letter-spacing: .1em; }
.profile-lines { display: grid; grid-template-columns: 54px 1fr; gap: 7px 8px; padding: 11px 10px; }
.profile-lines span { color: #888; font: 9px "DM Mono", Consolas, monospace; }
.profile-lines strong { color: #ddd; font-size: 10px; font-weight: 500; }
.profile-lines em { font-weight: 400; }
.profile-footer { display: flex; justify-content: space-between; padding: 5px 10px; border-top: 1px solid #444; color: #888; font: 9px "DM Mono", Consolas, monospace; }
.about-copy h2 { margin: 0 0 8px; font-size: 22px; letter-spacing: -.04em; }
.about-copy p:not(.eyebrow) { margin-bottom: 9px; color: #c3c3c3; font-size: 12px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.tag-list span { padding: 3px 6px; border: 1px solid #616161; background: #222; color: #ccc; font: 9px "DM Mono", Consolas, monospace; }

.board-intro { display: flex; align-items: center; justify-content: space-between; padding: 10px 3px 5px; color: #aaa; font-size: 11px; }
.board-intro p { margin: 0; }
.thread-count { color: #888; font: 9px "DM Mono", Consolas, monospace; }
.post-card { display: grid; grid-template-columns: 35px minmax(0, 1fr); gap: 11px; margin-top: 8px; padding: 11px; border: 1px solid #4b4b4b; background: linear-gradient(110deg, #252525, #171717 60%); }
.post-avatar { display: grid; width: 33px; height: 33px; place-items: center; border: 1px solid #bdbdbd; background: #dedede; color: #111; font-size: 20px; }
.avatar-alt { background: #bdbdbd; }
.avatar-third { background: #f0f0f0; }
.post-body { min-width: 0; }
.post-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 9px; color: #999; font: 9px "DM Mono", Consolas, monospace; }
.post-meta strong { color: #eee; font-weight: 500; }
.post-number { color: #ccc; }
.post-card h3 { margin: 3px 0 3px; color: #e8e8e8; font-size: 13px; font-weight: 600; }
.post-card p { margin: 0; color: #b8b8b8; font-size: 11px; }
.reply-button { margin-top: 6px; padding: 0; border: 0; background: none; color: #bbb; cursor: pointer; font: 9px "DM Mono", Consolas, monospace; }
.reply-button:hover { color: #fff; text-decoration: underline; }
.reply-notice { min-height: 0; margin: 0; color: #ddd; font-size: 11px; }
.reply-notice:not(:empty) { margin-top: 9px; padding: 7px 9px; border-left: 2px solid #ddd; background: #222; }

.lower-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.compact-panel { margin-bottom: 13px; }
.favorite-list { display: grid; gap: 0; margin: 5px 0 0; padding: 0; list-style: none; }
.favorite-list li { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid #3e3e3e; }
.favorite-list li:last-child { border-bottom: 0; }
.favorite-icon { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border: 1px solid #707070; background: #222; color: #ccc; font: 9px "DM Mono", Consolas, monospace; }
.favorite-list strong, .favorite-list small { display: block; }
.favorite-list strong { font-size: 11px; font-weight: 500; }
.favorite-list small { color: #999; font-size: 10px; }
.links-panel > p { margin: 9px 2px; color: #aaa; font-size: 10px; }
.links-panel > a { display: flex; justify-content: space-between; padding: 6px 3px; border-bottom: 1px solid #414141; color: #ddd; font-size: 11px; text-decoration: none; }
.links-panel > a:hover { color: #fff; }
.social-name { display: inline-flex; align-items: center; gap: 9px; }
.social-icon { width: 17px; height: 17px; flex: 0 0 17px; fill: #fff; }
.random-button { margin-top: 11px; padding: 7px 9px; font-size: 9px; }
.links-panel .thought-output { min-height: 16px; margin: 7px 0 0; color: #aaa; font-size: 10px; }

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 3px 4px 10px;
  color: #777;
  font: 9px "DM Mono", Consolas, monospace;
  letter-spacing: .04em;
}

.site-footer a { color: #ccc; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.heart { color: #eee; }

body.light-mode {
  color-scheme: light;
  --page: #e9e9e9;
  --shell: #f7f7f7;
  --panel: #fff;
  --panel-raised: #eee;
  --line: #999;
  --line-soft: #ccc;
  --text: #171717;
  --muted: #555;
  --quiet: #777;
  --accent: #222;
  --link: #111;
  --shadow: rgba(0, 0, 0, .2);
}

body.light-mode { background: repeating-linear-gradient(135deg, #e4e4e4 0, #e4e4e4 2px, #efefef 2px, #efefef 4px); }
body.light-mode .page-shell { border-color: #888; }
body.light-mode .masthead { background: linear-gradient(180deg, #fff, #d5d5d5 45%, #aaa); }
body.light-mode .site-title, body.light-mode .site-mark { color: #111; }
body.light-mode .site-tagline, body.light-mode .masthead-meta { color: #444; }
body.light-mode .bunny-mark::after, body.light-mode .bunny-mark i { border-color: #333; }
body.light-mode .theme-toggle { border-color: #777; background: #eee; color: #111; }
body.light-mode .live-dot { background: #222; box-shadow: 0 0 7px #555; }
body.light-mode .sidebar-box, body.light-mode .sidebar-note, body.light-mode .section-panel { background: linear-gradient(145deg, #fff, #e7e7e7); }
body.light-mode .sidebar-heading, body.light-mode .panel-title { border-color: #666; color: #fff; }
body.light-mode .nav-link { border-color: #aaa; background: linear-gradient(#fff, #d0d0d0 55%, #bbb); color: #222; }
body.light-mode .nav-link:hover, body.light-mode .nav-link:focus-visible, body.light-mode .nav-link.active { border-color: #333; background: linear-gradient(#777, #333 55%, #222); color: #fff; }
body.light-mode .nav-icon { color: inherit; }
body.light-mode .status-box p, body.light-mode .sidebar-note p { color: #333; }
body.light-mode .status-label, body.light-mode .note-small { color: #666; }
body.light-mode .sidebar-note strong { color: #111; }
body.light-mode .note-stars { color: #333; }
body.light-mode .hero-content { border-color: #aaa; background: radial-gradient(ellipse at 78% 45%, #aaa 0, #ddd 25%, transparent 55%), linear-gradient(125deg, #fafafa, #ddd 60%, #f8f8f8); }
body.light-mode .hero-content .eyebrow, body.light-mode .hero-description { color: #444; }
body.light-mode h1 span { color: #555; }
body.light-mode .hero-art { border-color: #888; background-color: #ccc; }
body.light-mode .art-grid { opacity: .23; }
body.light-mode .art-caption, body.light-mode .art-stamp { color: #222; }
body.light-mode .ticker, body.light-mode .board-intro { color: #555; }
body.light-mode .ticker-label { border-color: #666; color: #111; }
body.light-mode .profile-card { border-color: #999; background: #f8f8f8; }
body.light-mode .profile-top { border-color: #aaa; background: linear-gradient(135deg, #ddd, #f8f8f8); }
body.light-mode .profile-symbol { border-color: #777; }
body.light-mode .profile-id, body.light-mode .profile-lines span, body.light-mode .profile-footer { color: #666; }
body.light-mode .profile-lines strong, body.light-mode .about-copy p:not(.eyebrow) { color: #333; }
body.light-mode .profile-footer { border-color: #aaa; }
body.light-mode .tag-list span { border-color: #aaa; background: #eee; color: #333; }
body.light-mode .thread-count { color: #666; }
body.light-mode .post-card { border-color: #aaa; background: linear-gradient(110deg, #eee, #fafafa 60%); }
body.light-mode .post-meta { color: #666; }
body.light-mode .post-meta strong, body.light-mode .post-number, body.light-mode .post-card h3 { color: #111; }
body.light-mode .post-card p { color: #444; }
body.light-mode .reply-button { color: #444; }
body.light-mode .reply-button:hover { color: #000; }
body.light-mode .reply-notice:not(:empty) { border-color: #444; background: #e3e3e3; color: #222; }
body.light-mode .favorite-list li, body.light-mode .links-panel > a { border-color: #bbb; }
body.light-mode .favorite-icon { border-color: #888; background: #ddd; color: #222; }
body.light-mode .favorite-list small, body.light-mode .links-panel > p, body.light-mode .links-panel .thought-output { color: #555; }
body.light-mode .links-panel > a { color: #222; }
body.light-mode .site-footer { color: #666; }
body.light-mode .site-footer a { color: #222; }
body.light-mode .heart { color: #111; }

:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
body.light-mode :focus-visible { outline-color: #111; }

@media (max-width: 760px) {
  .page-shell { width: min(100% - 18px, 620px); margin: 9px auto; border-radius: 14px 14px 3px 3px; }
  .masthead { min-height: 94px; padding: 15px 17px; }
  .page-layout { grid-template-columns: 1fr; gap: 13px; padding: 12px; }
  .sidebar { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 9px; }
  .sidebar-box:first-child { grid-column: 1 / -1; }
  .site-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
  .nav-link { flex-direction: column; justify-content: center; gap: 0; padding: 6px 2px; font-size: 9px; text-align: center; }
  .nav-icon { font-size: 14px; }
  .status-box { min-height: 100%; }
  .sidebar-note { min-height: 100%; display: grid; align-content: center; }
  .hero-content { min-height: 235px; grid-template-columns: minmax(0, 1fr) 175px; padding: 22px 18px 17px; }
  .hero-art { min-height: 175px; }
  .about-layout { gap: 14px; }
}

@media (max-width: 540px) {
  .masthead { align-items: flex-start; }
  .site-mark { gap: 10px; }
  .bunny-mark { width: 40px; transform: scale(.82); transform-origin: left center; margin-right: -6px; }
  .site-title { font-size: 21px; }
  .site-tagline { max-width: 230px; font-size: 10px; }
  .masthead-meta { flex-direction: column; align-items: flex-end; gap: 5px; font-size: 8px; }
  .theme-toggle { margin: 0; padding: 5px 6px; font-size: 8px; }
  .page-layout { padding: 9px; }
  .sidebar { grid-template-columns: 1fr; }
  .sidebar-box:first-child { grid-column: auto; }
  .site-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .status-box, .sidebar-note { display: none; }
  .hero-content { grid-template-columns: 1fr; gap: 14px; padding: 19px 14px 14px; }
  .hero-art { min-height: 140px; }
  .art-halo { width: 105px; height: 105px; }
  .art-ears { transform: scale(.78); }
  h1 { font-size: 36px; }
  .hero-description { font-size: 12px; }
  .ticker { align-items: flex-start; padding: 9px 3px 0; font-size: 10px; }
  .about-layout { grid-template-columns: 1fr; }
  .profile-card { max-width: 300px; }
  .lower-grid { grid-template-columns: 1fr; gap: 0; }
  .site-footer { flex-direction: column; gap: 4px; padding: 2px 3px 8px; }
  .post-card { grid-template-columns: 28px minmax(0, 1fr); gap: 8px; padding: 9px 7px; }
  .post-avatar { width: 28px; height: 28px; }
  .post-meta { gap: 2px 6px; font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}