:root {
  color-scheme: dark;
  --bg: #090a0c;
  --panel: rgba(15, 17, 20, .95);
  --line: #292d33;
  --line-soft: #1d2025;
  --text: #e7e9ec;
  --muted: #8e949d;
  --dim: #666d76;
  --green: #96c7a3;
  --radius: 14px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 18% -10%, rgba(255,255,255,.035), transparent 32rem),
    linear-gradient(180deg, #0a0b0d 0%, #08090a 100%);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration-color: #555b64; text-underline-offset: 4px; }
a:hover { color: #fff; text-decoration-color: #fff; }
:focus-visible { outline: 2px solid #aeb4bc; outline-offset: 3px; }
img { max-width: 100%; height: auto; }

.skip-link {
  position: fixed;
  z-index: 20;
  top: 10px;
  left: 10px;
  padding: 8px 11px;
  border: 1px solid #555b64;
  border-radius: 7px;
  background: #111318;
  color: #fff;
  text-decoration: none;
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.shell { width: min(900px, calc(100% - 32px)); margin: 38px auto 72px; }
.window {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 24px 80px rgba(0,0,0,.32);
}
.windowbar {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 15px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(255,255,255,.015);
  color: var(--muted);
  font-size: 12px;
}
.dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
}
.dot-red { background: #ff5f57; }
.dot-yellow { background: #febc2e; }
.dot-green { background: #28c840; }
.windowtitle { margin-left: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spacer { flex: 1; }
.home-link { color: var(--muted); text-decoration: none; }
.home-link:hover { color: #fff; }
.content { padding: clamp(24px, 5vw, 56px); }

.hero { padding: 8px 0 34px; border-bottom: 1px solid var(--line-soft); }
.prompt { color: var(--green); font-size: 13px; margin-bottom: 8px; }
.hero h1 {
  margin: 0;
  font-size: clamp(34px, 7vw, 62px);
  line-height: 1.02;
  letter-spacing: -0.055em;
  font-weight: 650;
}
.cursor {
  display: inline-block;
  width: .52em;
  height: .92em;
  margin-left: .12em;
  background: #39ff88;
  vertical-align: -.05em;
  animation: blink 1.2s steps(1) infinite;
}
@keyframes blink { 50% { opacity: .15; } }

.posts { list-style: none; padding: 18px 0 0; margin: 0; }
.post-row { border-bottom: 1px solid var(--line-soft); }
.post-row:last-child { border-bottom: 0; }
.post-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 8px;
  margin: 0 -8px;
  border-radius: 9px;
  text-decoration: none;
}
.post-link:hover { background: rgba(255,255,255,.025); }
.post-title { font-size: 16px; color: var(--text); }
.arrow { color: var(--dim); }
.empty { color: var(--muted); padding: 36px 0 4px; }

.article-head { padding-bottom: 22px; border-bottom: 1px solid var(--line-soft); }
.back { display: inline-block; margin-bottom: 20px; color: var(--muted); font-size: 12px; }
.article-head h1 {
  margin: 0;
  font-size: clamp(30px, 6vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.045em;
}
.article-meta { margin-top: 14px; color: var(--muted); font-size: 12px; }
.article { max-width: 760px; padding-top: 26px; }
.article h1:first-child { display: none; }
.article h2 { margin: 38px 0 11px; font-size: 21px; letter-spacing: -.02em; }
.article h3 { margin: 28px 0 9px; font-size: 17px; }
.article p { margin: 13px 0; color: #c9cdd2; }
.article strong { color: #f0f1f3; }
.article ul, .article ol { padding-left: 23px; color: #c9cdd2; }
.article li { margin: 6px 0; }
.article blockquote { margin: 24px 0; padding: 4px 0 4px 18px; border-left: 2px solid #555b64; }
.article blockquote p { color: var(--muted); }
.article hr { margin: 34px 0; border: 0; border-top: 1px solid var(--line); }
.article img { display: block; margin: 22px auto; border: 1px solid var(--line); border-radius: 10px; }
.article code:not(pre code) {
  padding: .16em .38em;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #111318;
  color: #e7e9ec;
  font-size: .9em;
}
pre {
  margin: 22px 0;
  padding: 17px 18px 19px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #0b0d10;
  line-height: 1.62;
  font-size: 13px;
}
pre code { font-family: var(--mono); color: #d7dadf; }

.footer { margin: 18px 4px 0; color: var(--dim); font-size: 11px; text-align: right; }

@media (max-width: 680px) {
  .shell { width: min(100% - 18px, 900px); margin-top: 9px; }
  .window { border-radius: 11px; }
  .windowbar { padding: 0 11px; }
  .content { padding: 24px 18px 34px; }
  .hero { padding-top: 4px; }
  .post-link { padding: 17px 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
}


/* Markdown tables */

.table-wrap {
  width: 100%;
  margin: 22px 0;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  background: #0b0d10;
}

.table-wrap th,
.table-wrap td {
  padding: 12px 16px;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}

.table-wrap th:last-child,
.table-wrap td:last-child {
  border-right: 0;
}

.table-wrap tbody tr:last-child td {
  border-bottom: 0;
}

.table-wrap th {
  color: var(--green);
  font-weight: 600;
  background: #101216;
}

.table-wrap td {
  color: var(--text);
}

.table-wrap tbody tr:hover {
  background: rgba(255, 255, 255, 0.025);
}

.table-wrap code {
  white-space: nowrap;
}

@media (max-width: 680px) {
  .table-wrap th,
  .table-wrap td {
    padding: 10px 12px;
  }
}


.footer-flag {
  width: 19px;
  height: 12px;
  display: inline-block;
  vertical-align: -2px;
  margin-left: 3px;
  border-radius: 1px;
}