:root {
  --orange: #F2A400;
  --cyan: #00D5F2;
  --grey: #CDCDCD;
  --bright-purple: #B536DA;
  --blue: #0D5BFF;
  --yellow: #F8EA32;
  --dark-green: #1F9400;
  --pink: #FF6FF2;
  --red: #FF0000;
  --green: #2ED73A;
  --spirographsgreen: #66cc33;
  --burgundy: #A10000;
  --bronze: #A15000;
  --gold: #A1A100;
  --lime: #678900;
  --olive: #416600;
  --jade: #008141;
  --adams-orange: #FF9900;
  --teal: #008282;
  --cerulean: #005682;
  --indigo: #1534D2;
  --purple: #6C00DA;
  --dark-purple: #5B00B8;
  --violet: #7F0C7F;
  --fuchsia: #99004D;
  --light-grey: #CDCDCD;
  --dark-grey: #6D6D6D;

  --bg: #08090d;
  --bg-2: #10131a;
  --panel: #151923;
  --panel-2: #1d2230;
  --line: #343b4c;
  --text: #e8e8e8;
  --muted: #9ea6b8;
  --paper: #272727;
  --paper-text: #FFFFFF;
  --paper-line: #000000;
  --shadow: 0 16px 50px rgba(0, 0, 0, 0.35);
  --mono: "Courier New", Courier, monospace;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Verdana, Geneva, Tahoma, sans-serif;
}

@font-face {
  font-family: 'Classic';
  src: url(https://homestuck.net/resources/fonts/TYPOSTUCK%20%28Slightly%20better%20classic%20Homestuck%20font%29.ttf);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  font-family: var(--sans);
  line-height: 1.55;
}

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

.theme-dark {
  background:
    radial-gradient(circle at top left, rgba(0, 213, 242, 0.08), transparent 34rem),
    radial-gradient(circle at top right, rgba(181, 54, 218, 0.08), transparent 34rem),
    var(--bg);
  color: var(--text);
}

.theme-paper {
  background:
    linear-gradient(90deg, rgba(0,0,0,.035) 1px, transparent 1px),
    var(--paper);
  background-size: 26px 26px;
  color: var(--paper-text);
}

.site-header {
  border-bottom: 1px solid var(--line);
  background: rgba(10, 12, 18, 0.9);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(8px);
}

.header-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px 18px;
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--mono);
  letter-spacing: 0.08em;
}
.brand-title { color: var(--spirographsgreen); font-weight: bold; }
.brand-subtitle { color: var(--muted); font-size: 0.75rem; }

.top-nav { display: flex; gap: 12px; flex-wrap: wrap; font-size: 0.9rem; }
.top-nav a { color: var(--grey); }

.forum-shell,
.reader-shell,
.archive-shell {
  width: min(1120px, calc(100% - 28px));
  margin: 26px auto 60px;
}

.breadcrumb {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 14px;
}
.breadcrumb span { color: var(--grey); }

.thread-card,
.archive-card {
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 18px;
  margin-bottom: 16px;
}

.thread-title,
.archive-title {
  margin: 0 0 8px;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  color: var(--spirographsgreen);
  line-height: 1.1;
}
.thread-meta,
.archive-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.82rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.05);
  color: var(--grey);
  padding: 2px 8px;
  font-family: var(--mono);
  font-size: 0.75rem;
  border-radius: 999px;
  letter-spacing: 0.05em;
}
.badge-live { border-color: var(--green); color: var(--green); }
.badge-warning { border-color: var(--yellow); color: var(--yellow); }
.badge-danger { border-color: var(--red); color: var(--red); }
.badge-archive { border-color: var(--spirographsgreen); color: var(--spirographsgreen); }

.forum-post {
  display: grid;
  grid-template-columns: 190px 1fr;
  background: var(--panel);
  border: 1px solid var(--line);
  margin-bottom: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,.22);
}

.post-user {
  background: rgba(0,0,0,.18);
  border-right: 1px solid var(--line);
  padding: 16px;
  text-align: center;
}
.avatar {
  width: 72px;
  height: 72px;
  margin: 0 auto 10px;
  border: 1px solid var(--line);
  background: #08090d;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  color: var(--spirographsgreen);
  font-size: 1.4rem;
  font-weight: bold;
}
.username {
  color: var(--cyan);
  font-weight: bold;
  overflow-wrap: anywhere;
}
.user-title,
.user-stat {
  color: var(--muted);
  font-size: 0.78rem;
  margin-top: 4px;
}

.post-content { min-width: 0; }
.post-header {
  border-bottom: 1px solid var(--line);
  padding: 9px 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.8rem;
}
.post-number { color: var(--spirographsgreen); }
.copy-link {
  border: 0;
  background: transparent;
  color: var(--cyan);
  cursor: pointer;
  font: inherit;
  padding: 0;
}
.post-body {
  padding: 16px;
  overflow-wrap: anywhere;
}
.post-body p:first-child { margin-top: 0; }
.post-body p:last-child { margin-bottom: 0; }

.signature {
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-family: var(--mono);
  font-size: .8rem;
  margin-top: 18px;
  padding-top: 12px;
}

.terminal-log {
  background: #05070a;
  border: 1px solid var(--line);
  color: var(--green);
  padding: 14px;
  overflow: auto;
  font-family: var(--mono);
  white-space: pre-wrap;
}

.quote-box {
  border-left: 4px solid var(--cyan);
  background: rgba(0, 213, 242, 0.07);
  padding: 12px 14px;
  margin: 14px 0;
  color: var(--grey);
}

.reader-shell { max-width: 820px; }
.reader-card {
  background: #363636;
  border: 1px solid var(--paper-line);
  box-shadow: 0 16px 50px rgba(60, 45, 20, .16);
  padding: clamp(22px, 5vw, 58px);
}
.reader-kicker {
  font-family: var(--mono);
  color: var(--spirographsgreen);
  letter-spacing: .08em;
  font-size: .82rem;
  text-transform: uppercase;
}
.reader-title {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 4vw, 4.8rem);
  line-height: .95;
  margin: 10px 0 8px;
}
.reader-text-title {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 2vw, 4.8rem);
  line-height: .95;
  margin: 10px 0 8px;
}
.reader-subtitle {
  color: #626262;
  font-family: var(--mono);
  border-bottom: 1px solid var(--paper-line);
  padding-bottom: 18px;
  margin-bottom: 28px;
}
.reader-text-subtitle {
  color: #626262;
  font-family: var(--mono);
  padding-bottom: 0px;
  margin-bottom: 0px;
}
.reader-body {
  font-family: var(--serif);
  font-size: clamp(1.07rem, 2vw, 1.22rem);
  line-height: 1.78;
}
.reader-dialogue {
  font-family: var(--mono);
  font-size: clamp(1rem, 1vw, 1rem);
  line-height: 1;
}
.reader-body .terminal-log { font-family: var(--mono); font-size: .95rem; }
.reader-nav {
  border-top: 1px solid var(--paper-line);
  margin-top: 34px;
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.reader-nav a { color: var(--spirographsgreen); font-family: var(--mono); }

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  width: 0;
  background: var(--spirographsgreen);
  z-index: 99;
}

.archive-list { display: grid; gap: 10px; }
.archive-row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 14px;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 14px;
}
.archive-row:hover { border-color: var(--cyan); text-decoration: none; }
.archive-code { font-family: var(--mono); color: var(--spirographsgreen); }
.archive-name { font-weight: bold; }
.archive-desc { color: var(--muted); font-size: .9rem; }
.archive-status { color: var(--cyan); font-family: var(--mono); font-size: .8rem; }

.spoiler {
  background: currentColor;
  cursor: pointer;
  border-radius: 2px;
  transition: background .15s;
}
.spoiler.revealed { background: transparent; }
.redacted {
  background: #000;
  color: transparent;
  border-radius: 2px;
  padding: 0 .2em;
}
.glitch-lite {
  text-shadow: 1px 0 var(--cyan), -1px 0 var(--red);
}

.text-orange { color: var(--orange); }
.text-cyan { color: var(--cyan); }
.text-grey { color: var(--grey); }
.text-bright-purple { color: var(--bright-purple); }
.text-blue { color: var(--blue); }
.text-yellow { color: var(--yellow); }
.text-dark-green { color: var(--dark-green); }
.text-pink { color: var(--pink); }
.text-red { color: var(--red); }
.text-green { color: var(--green); }
.text-burgundy { color: var(--burgundy); }
.text-bronze { color: var(--bronze); }
.text-gold { color: var(--gold); }
.text-lime { color: var(--lime); }
.text-olive { color: var(--olive); }
.text-jade { color: var(--jade); }
.text-adams-orange { color: var(--adams-orange); }
.text-teal { color: var(--teal); }
.text-cerulean { color: var(--cerulean); }
.text-indigo { color: var(--indigo); }
.text-purple { color: var(--purple); }
.text-dark-purple { color: var(--dark-purple); }
.text-violet { color: var(--violet); }
.text-fuchsia { color: var(--fuchsia); }
.text-light-grey { color: var(--light-grey); }
.text-dark-grey { color: var(--dark-grey); }

@media (max-width: 740px) {
  .header-inner { align-items: flex-start; flex-direction: column; }
  .forum-post { grid-template-columns: 1fr; }
  .post-user { border-right: 0; border-bottom: 1px solid var(--line); text-align: left; display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center; }
  .avatar { margin: 0; }
  .archive-row { grid-template-columns: 1fr; }
  .reader-nav { flex-direction: column; }
}