:root {
  color-scheme: light;
  --page: #ffffee;
  --page-accent: #f7f7df;
  --text: #000000;
  --muted: #707070;
  --rule: #d9bfb7;
  --post: #f0e0d6;
  --post-border: #d9bfb7;
  --subject: #cc1105;
  --name: #117743;
  --quote: #789922;
  --link: #0000ee;
  --visited: #551a8b;
  --field: #ffffff;
  --button: #eeeeee;
  --button-border: #999999;
  --header: #800000;
  --focus: #ff7f00;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 280px;
  overflow-x: hidden;
  color: var(--text);
  background-color: var(--page);
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 27px,
    color-mix(in srgb, var(--rule) 15%, transparent) 28px
  );
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.35;
}

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

a:visited {
  color: var(--visited);
}

a:hover,
button:hover {
  filter: brightness(0.92);
}

:focus-visible {
  outline: 2px dashed var(--focus);
  outline-offset: 2px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 5px 8px;
  border-bottom: 1px solid var(--rule);
  background: var(--post);
  font-size: 12px;
}

.topbar__links,
.topbar__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.text-button {
  display: inline;
  padding: 0;
  border: 0;
  color: var(--link);
  background: none;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.text-button.is-active {
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}

.board-header {
  padding: 26px 12px 18px;
  border-bottom: 1px solid var(--rule);
  text-align: center;
}

.board-avatar {
  display: inline-block;
  color: inherit;
}

.board-avatar img {
  display: block;
  width: 92px;
  height: 92px;
  border: 1px solid var(--header);
  object-fit: cover;
  image-rendering: auto;
}

.board-kicker {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.board-header h1 {
  margin: 2px 0;
  color: var(--header);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(32px, 6vw, 54px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
}

.board-subtitle {
  margin: 7px 0 10px;
  color: var(--header);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.board-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}

.board {
  width: min(1480px, calc(100% - 20px));
  margin: 10px auto 34px;
}

.small-button,
.board-button {
  border: 1px solid var(--button-border);
  border-radius: 0;
  color: #000000;
  background: var(--button);
  box-shadow: inset 1px 1px #ffffff, inset -1px -1px #c6c6c6;
  font-family: Arial, Helvetica, sans-serif;
  cursor: pointer;
}

.small-button {
  padding: 2px 8px;
  font-size: 12px;
}

.board-button {
  display: inline-block;
  padding: 5px 12px;
  font-size: 13px;
  line-height: 1.2;
  text-decoration: none;
}

a.board-button:visited {
  color: #000000;
}

.thread {
  padding: 12px 0 18px;
  border-bottom: 1px solid var(--rule);
}

.post {
  position: relative;
  overflow-wrap: anywhere;
}

.post--op {
  padding: 3px 4px;
}

.post--reply {
  display: table;
  max-width: min(900px, calc(100% - 16px));
  margin: 7px 0 0 24px;
  padding: 6px 9px 8px;
  border: 1px solid var(--post-border);
  background: var(--post);
}

.post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  min-height: 22px;
  font-size: 13px;
}

.post__meta input {
  width: 13px;
  height: 13px;
  margin: 0 2px 0 0;
}

.post__subject {
  color: var(--subject);
  font-weight: 700;
}

.post__name {
  color: var(--name);
  font-weight: 700;
}

.post-number {
  color: var(--text);
  text-decoration: none;
}

.post-number:visited {
  color: var(--text);
}

.post-number:hover {
  color: var(--link);
}

.op-layout {
  display: grid;
  grid-template-columns: minmax(230px, 420px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 8px 8px 4px 18px;
}

.op-image {
  display: block;
  width: 100%;
  max-width: 420px;
  border: 1px solid var(--post-border);
  background: var(--field);
}

.op-image img {
  display: block;
  width: 100%;
  height: auto;
}

.op-copy {
  max-width: 810px;
}

.op-copy h2 {
  margin: 2px 0 12px;
  color: var(--header);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(25px, 4vw, 39px);
  line-height: 1;
}

.op-copy h2 span {
  white-space: nowrap;
}

.op-copy p,
.post--reply p {
  margin: 4px 0;
}

.quote,
.quote-link {
  color: var(--quote);
}

.token-table {
  display: table;
  width: min(100%, 570px);
  margin: 15px 0 10px;
  border-collapse: collapse;
  background: var(--page-accent);
}

.token-table > div {
  display: table-row;
}

.token-table dt,
.token-table dd {
  display: table-cell;
  padding: 4px 7px;
  border: 1px solid var(--rule);
}

.token-table dt {
  width: 110px;
  color: var(--header);
  font-weight: 700;
}

.token-table dd {
  margin: 0;
}

.contract-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  width: min(100%, 720px);
  border: 1px solid var(--rule);
  background: var(--post);
}

.contract-label {
  align-self: stretch;
  padding: 6px 8px;
  border-right: 1px solid var(--rule);
  color: var(--header);
  font-weight: 700;
}

.contract-row code {
  overflow: hidden;
  padding: 6px 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contract-row .small-button {
  margin-right: 4px;
}

.copy-status {
  min-height: 18px;
  color: var(--name);
  font-size: 12px;
}

.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.chart-shell {
  width: min(100%, 1160px);
  height: clamp(410px, 61vw, 680px);
  margin: 10px 0 4px 18px;
  border: 1px solid var(--post-border);
  background: var(--field);
}

.chart-shell iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.chart-placeholder {
  position: relative;
  display: grid;
  place-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: var(--header);
  text-align: center;
}

.chart-placeholder strong,
.chart-placeholder span {
  position: relative;
  z-index: 1;
  padding: 2px 6px;
  background: var(--field);
}

.chart-grid {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image:
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 42px 42px;
}

.chart-grid::after {
  position: absolute;
  content: "";
  inset: 17% 7% 12%;
  border-left: 3px solid var(--quote);
  border-bottom: 3px solid var(--quote);
  clip-path: polygon(0 82%, 14% 72%, 23% 77%, 36% 44%, 48% 55%, 61% 27%, 73% 40%, 86% 10%, 100% 18%, 100% 22%, 86% 15%, 73% 45%, 61% 32%, 48% 60%, 36% 50%, 23% 82%, 14% 77%, 0 88%);
  background: var(--quote);
}

.chart-link-line {
  margin-left: 18px;
}

.links-post {
  max-width: 760px;
}

.official-links {
  margin: 10px 0 2px 18px;
  padding: 0;
  color: var(--quote);
  list-style: none;
}

.official-links li {
  margin: 5px 0;
}

.reply-panel {
  width: min(100%, 580px);
  margin: 18px auto;
  border: 1px solid var(--post-border);
  background: var(--post);
}

.reply-panel h2 {
  margin: 0;
  padding: 4px 8px;
  color: #ffffff;
  background: var(--header);
  font-size: 14px;
  text-align: center;
}

.reply-panel form {
  padding: 8px;
}

.form-row {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 6px;
  margin-bottom: 6px;
}

.form-row label {
  padding: 4px 6px;
  color: var(--header);
  background: var(--page-accent);
  font-weight: 700;
}

.form-row input,
.form-row textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--button-border);
  border-radius: 0;
  color: var(--text);
  background: var(--field);
  font: 13px Arial, Helvetica, sans-serif;
}

.form-row input {
  height: 26px;
  padding: 3px 5px;
}

.form-row textarea {
  min-height: 112px;
  resize: vertical;
  padding: 5px;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 88px;
}

#reply-status {
  color: var(--name);
  font-size: 12px;
}

.board-footer {
  padding: 12px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.board-footer p {
  margin: 3px;
}

.config-disabled {
  color: var(--muted) !important;
  cursor: not-allowed;
  text-decoration: line-through;
}

body[data-theme="tomorrow"] {
  color-scheme: dark;
  --page: #1d1f21;
  --page-accent: #202225;
  --text: #c5c8c6;
  --muted: #969896;
  --rule: #4b4d52;
  --post: #282a2e;
  --post-border: #3f4248;
  --subject: #b294bb;
  --name: #b5bd68;
  --quote: #b5bd68;
  --link: #81a2be;
  --visited: #85678f;
  --field: #161719;
  --button: #373b41;
  --button-border: #60646b;
  --header: #cc6666;
  --focus: #f0c674;
}

body[data-theme="tomorrow"] .small-button,
body[data-theme="tomorrow"] .board-button {
  color: var(--text);
  box-shadow: none;
}

body[data-theme="tomorrow"] a.board-button:visited {
  color: var(--text);
}

@media (max-width: 760px) {
  body {
    font-size: 13px;
  }

  .topbar {
    display: block;
  }

  .topbar__tools {
    margin-top: 4px;
  }

  .board-header {
    padding-top: 18px;
  }

  .board {
    width: calc(100% - 10px);
  }

  .op-layout {
    display: block;
    padding: 7px 2px 4px;
  }

  .op-image {
    width: min(68vw, 320px);
    margin: 0 12px 8px 0;
    float: left;
  }

  .op-copy {
    max-width: none;
  }

  .op-copy::after {
    display: block;
    clear: both;
    content: "";
  }

  .post--reply {
    max-width: calc(100% - 8px);
    margin-left: 8px;
  }

  .chart-shell {
    width: 100%;
    height: 460px;
    margin-left: 0;
  }

  .chart-link-line,
  .official-links {
    margin-left: 4px;
  }
}

@media (max-width: 520px) {
  .board-avatar img {
    width: 74px;
    height: 74px;
  }

  .board-subtitle {
    font-size: 11px;
  }

  .op-image {
    float: none;
    width: 100%;
    max-width: 310px;
    margin: 0 auto 10px;
  }

  .token-table,
  .token-table > div,
  .token-table dt,
  .token-table dd {
    display: block;
    width: 100%;
  }

  .token-table dt {
    border-bottom: 0;
  }

  .contract-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .contract-row .small-button {
    grid-column: 1 / -1;
    margin: 0 4px 4px;
  }

  .action-row .board-button {
    flex: 1 1 100%;
    text-align: center;
  }

  .chart-shell {
    height: 390px;
  }

  .form-row {
    display: block;
  }

  .form-row label {
    display: block;
    margin-bottom: 3px;
  }

  .form-actions {
    padding-left: 0;
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}