/* ============ apeponfone — minimal essay page ============ */
:root {
  --bg: #0f0d0a;             /* near-black, matched to the example */
  --ink: #f2f1ed;
  --muted: rgba(242, 241, 237, .55);
  --rule: rgba(242, 241, 237, .16);
  --hl: #00c805;             /* robinhood green highlight */
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.63;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 654px;
  margin: 0 auto;
  padding: 104px 24px 120px;
}

/* meta lines (top + footer) */
.meta {
  font-size: 15px;
  line-height: 1.9;
  color: var(--ink);
  margin-bottom: 62px;
}
.meta .slash { color: var(--muted); padding: 0 10px; }
.meta a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.meta a:hover { color: var(--hl); }
.meta .ca { cursor: pointer; word-break: break-all; }
.meta.foot { color: var(--muted); margin: 0; }
.meta.foot span:not(.slash) { color: var(--muted); }

/* wordmark */
h1 {
  font-size: 72px;
  font-weight: 700;
  letter-spacing: -3px;
  line-height: 1.05;
  margin-bottom: 44px;
}

/* blinking block caret to the right of the wordmark */
h1 .caret {
  display: inline-block;
  width: .42em; height: .74em;
  background: var(--hl);
  margin-left: .08em;
  animation: caret-blink 1.05s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { h1 .caret { animation: none; } }

/* body copy */
p { margin-bottom: 32px; }
p:last-of-type { margin-bottom: 0; }

/* the highlighted line */
.hl {
  background: var(--hl);
  color: #0f0d0a;
  padding: 2px 5px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* grey section marker */
.marker { color: var(--muted); }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 44px 0 22px;
}

/* toast */
.toast {
  position: fixed; left: 50%; bottom: 26px;
  transform: translateX(-50%) translateY(80px);
  background: var(--ink); color: #0f0d0a; background: var(--hl);
  padding: 11px 18px; border-radius: 8px;
  font-size: 14px; transition: transform .25s;
}
.toast.show { transform: translateX(-50%) translateY(0); }

@media (max-width: 640px) {
  .wrap { padding: 64px 22px 90px; }
  h1 { font-size: 52px; letter-spacing: -1.6px; }
  .meta { font-size: 14px; }
  .meta .slash { padding: 0 7px; }
}