:root {
  --bg: #0b0f14;
  --panel: #111821;
  --panel-2: #16202b;

  --text: #f2f5f7;
  --muted: #a9b4bf;
  --line: #33404d;

  --green: #6ab0ff;
  --green-soft: #a9d1ff;

  --amber: #f2c66d;
  --cyan: #7dd3c7;
  --red: #ff8f8f;

  --success: #86d89a;
  --shadow: rgba(0, 0, 0, .35);

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
          "Liberation Mono", "Courier New", monospace;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;

  background:
    radial-gradient(circle at 12% 0%, rgba(106, 176, 255, .055), transparent 28rem),
    radial-gradient(circle at 100% 35%, rgba(125, 211, 199, .035), transparent 32rem),
    var(--bg);

  color: var(--text);
  font-family: var(--mono);
  font-size: 1rem;
  line-height: 1.7;
}

p {
  max-width: 75ch;
}

a {
  color: var(--green-soft);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}

a:hover {
  color: #ffffff;
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
}

::selection {
  background: var(--green);
  color: #081018;
}

.skip-link {
  position: fixed;
  z-index: 99;
  left: 1rem;
  top: -5rem;

  background: var(--green);
  color: #081018;

  padding: .75rem 1rem;
  border-radius: .3rem;
  font-weight: 700;
}

.skip-link:focus {
  top: 1rem;
}

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;

  opacity: .012;

  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
}

.shell-wrap {
  width: min(1120px, calc(100% - 2rem));
  margin: 2rem auto;

  border: 1px solid var(--line);

  box-shadow:
    0 24px 70px var(--shadow);

  background: rgba(11, 15, 20, .94);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;

  min-height: 44px;
  padding: 0 .9rem;

  border-bottom: 1px solid var(--line);

  background: rgba(17, 24, 33, .96);
  backdrop-filter: blur(10px);

  font-size: .82rem;
  color: var(--muted);
}

.traffic {
  display: flex;
  gap: .45rem;
}

.traffic span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #52606d;
}

.traffic span:nth-child(1) {
  background: #d96d6d;
}

.traffic span:nth-child(2) {
  background: #d3aa5a;
}

.traffic span:nth-child(3) {
  background: #6db887;
}

.status {
  justify-self: end;
}

.status-dot {
  display: inline-block;

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: var(--success);

  box-shadow:
    0 0 0 2px rgba(134, 216, 154, .12);

  margin-right: .4rem;
}

.terminal {
  padding: clamp(1rem, 4vw, 3rem);
}

.quicknav {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.2rem;

  padding-bottom: 1.3rem;
  margin-bottom: 2rem;

  border-bottom: 1px solid var(--line);
}

.quicknav a {
  color: var(--muted);
  text-decoration: none;
}

.quicknav a::before {
  content: "./";
  color: var(--green);
}

.quicknav a:hover,
.quicknav a[aria-current="page"] {
  color: var(--text);
}

.prompt {
  margin: 0 0 1rem;
  color: var(--text);
  overflow-wrap: anywhere;
}

.user {
  color: var(--green);
  font-weight: 700;
}

.path {
  color: var(--cyan);
}

.muted {
  color: var(--muted);
}

.hero {
  padding: 1rem 0 2rem;
}

.ascii {
  color: var(--green);

  font:
    700 clamp(.52rem, 1.4vw, .88rem) / 1.18
    var(--mono);

  overflow-x: auto;
  margin: 1.5rem 0;
}

h1,
h2,
h3 {
  line-height: 1.2;
  color: var(--text);
}

h1 {
  margin: .3rem 0 1rem;

  font-size:
    clamp(2rem, 6vw, 4.8rem);

  letter-spacing: -.055em;
}

h2 {
  color: var(--green-soft);
}

.lead {
  max-width: 75ch;
  color: #c4ced7;

  font-size:
    clamp(1rem, 2vw, 1.18rem);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;

  margin-top: 1.5rem;

  color: var(--muted);
  font-size: .88rem;
}

.hero-meta span {
  border: 1px solid var(--line);

  padding: .32rem .58rem;

  background: var(--panel);
}

.block {
  padding: 2.8rem 0;

  border-top:
    1px solid var(--line);
}

.markdown-panel,
.contact-box,
.stack-card,
.pgp-card,
.post-card,
.article-body {
  background: var(--panel);
  border: 1px solid var(--line);
}

.markdown-panel,
.contact-box {
  padding:
    clamp(1rem, 3vw, 2rem);
}

.markdown-panel h2 {
  margin-top: 0;
}

.markdown-panel p:last-child {
  margin-bottom: 0;
}

.stack-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: .9rem;
}

.stack-card {
  padding: 1rem;

  transition:
    transform .18s ease,
    border-color .18s ease,
    background-color .18s ease;
}

.stack-card:hover {
  transform: translateY(-2px);
  border-color: #4c6780;
  background: var(--panel-2);
}

.card-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;

  margin-bottom: .55rem;

  color: var(--green-soft);
}

.stack-card p {
  margin: 0;
  color: var(--muted);
}

.ok {
  color: var(--success);
  font-size: .76rem;
}

.warn {
  color: var(--amber);
  font-size: .76rem;
}

.table-wrap {
  overflow-x: auto;

  border: 1px solid var(--line);
}

table {
  width: 100%;
  min-width: 740px;

  border-collapse: collapse;

  background: var(--panel);
}

th,
td {
  text-align: left;
  padding: .9rem 1rem;

  border-bottom:
    1px solid var(--line);

  vertical-align: top;
}

th {
  color: var(--green-soft);
  font-weight: 600;

  background:
    var(--panel-2);
}

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

tbody tr:hover {
  background:
    rgba(106, 176, 255, .055);
}

.badge {
  display: inline-block;

  padding: .08rem .4rem;

  border: 1px solid currentColor;

  font-size: .76rem;
}

.live {
  color: var(--success);
}

.build {
  color: var(--amber);
}

.plan {
  color: var(--cyan);
}

.log {
  border-left:
    2px solid var(--line);
}

.log a {
  display: grid;

  grid-template-columns:
    8rem 1fr;

  gap: 1rem;

  padding: .78rem 1rem;

  text-decoration: none;

  border-bottom:
    1px solid var(--line);
}

.log a:hover {
  background:
    rgba(106, 176, 255, .055);
}

.log time {
  color: var(--muted);
}

.log span {
  color: var(--text);
}

.contact-box h2 {
  margin-top: 0;

  font-size:
    clamp(1.35rem, 3vw, 2rem);
}

.links {
  display: flex;
  flex-wrap: wrap;

  gap: .8rem 1.4rem;

  margin-top: 1.2rem;
}

.links a {
  border-bottom:
    1px solid var(--line);
}

footer {
  padding-top: 2.6rem;

  border-top:
    1px solid var(--line);

  color: var(--muted);

  font-size: .88rem;
}

.cursor-line {
  margin-top: 1.6rem;

  color: var(--text);
}

.cursor {
  display: inline-block;

  width: .62em;
  height: 1.05em;

  vertical-align: -.16em;

  background: var(--green);

  animation:
    blink 1s steps(1) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.sr-only {
  position: absolute;

  width: 1px;
  height: 1px;

  padding: 0;
  margin: -1px;

  overflow: hidden;

  clip:
    rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;
}

/* Blog + PGP extensions */

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;

  gap: 1rem;

  margin-bottom: .9rem;
}

.section-heading h2 {
  margin: 0;

  font-size: 1.2rem;

  color: var(--green-soft);
}

.small-link {
  color: var(--green-soft);

  text-decoration: underline;

  font-size: .84rem;
}

.small-link:hover {
  color: #fff;
}

.contact-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.4fr)
    minmax(280px, .9fr);

  gap: .9rem;
}

.pgp-card {
  padding:
    clamp(1rem, 3vw, 1.35rem);
}

.pgp-card .card-head {
  padding-bottom: .7rem;

  border-bottom:
    1px solid var(--line);
}

.pgp-label {
  margin:
    1rem 0 .35rem;

  color: var(--muted);

  font-size: .8rem;

  text-transform: uppercase;
  letter-spacing: .08em;
}

.fingerprint {
  display: block;

  color: var(--cyan);

  overflow-wrap: anywhere;

  line-height: 1.75;
}

.pgp-actions {
  display: flex;
  flex-wrap: wrap;

  gap: .65rem;

  margin-top: 1rem;
}

.button-link,
.pgp-actions button {
  appearance: none;

  border:
    1px solid var(--line);

  background:
    var(--panel-2);

  color:
    var(--green-soft);

  font: inherit;
  font-size: .82rem;

  padding:
    .55rem .75rem;

  text-decoration: none;

  cursor: pointer;
}

.button-link:hover,
.pgp-actions button:hover {
  border-color:
    var(--green);

  color:
    #fff;
}

.copy-status {
  min-height: 1.2em;

  margin:
    .6rem 0 0;

  color:
    var(--muted);

  font-size: .8rem;
}

.blog-header {
  padding:
    1rem 0 2rem;
}

.blog-header h1 {
  font-size:
    clamp(2.2rem, 6vw, 4.3rem);

  margin:
    .25rem 0 .75rem;
}

.blog-list {
  display: grid;

  gap: .9rem;
}

.post-card {
  display: grid;

  grid-template-columns:
    8rem 1fr auto;

  gap: 1rem;

  align-items: start;

  padding: 1rem;

  text-decoration: none;
}

.post-card:hover {
  border-color:
    #4c6780;

  background:
    var(--panel-2);
}

.post-card time {
  color: var(--muted);

  font-size: .84rem;
}

.post-card h2 {
  margin:
    0 0 .35rem;

  font-size: 1rem;

  color:
    var(--green-soft);
}

.post-card p {
  margin: 0;

  color:
    var(--muted);
}

.post-tags {
  display: flex;
  flex-wrap: wrap;

  gap: .35rem;

  justify-content:
    flex-end;
}

.post-tags span {
  border:
    1px solid var(--line);

  padding:
    .1rem .4rem;

  color:
    var(--cyan);

  font-size:
    .72rem;
}

.article {
  max-width: 820px;
}

.article-meta {
  color:
    var(--muted);

  display: flex;
  flex-wrap: wrap;

  gap:
    .6rem 1rem;

  margin:
    .7rem 0 1.8rem;

  font-size:
    .86rem;
}

.article-body {
  padding:
    clamp(1rem, 4vw, 2.2rem);
}

.article-body h2 {
  margin-top:
    2rem;

  color:
    var(--green-soft);
}

.article-body h2:first-child {
  margin-top:
    0;
}

.article-body pre {
  overflow:
    auto;

  background:
    #080c11;

  border:
    1px solid var(--line);

  padding:
    1rem;
}

.article-body code {
  color:
    var(--cyan);
}

.article-body pre code {
  color:
    var(--text);
}

.article-body blockquote {
  margin:
    1.5rem 0;

  padding:
    .2rem 1rem;

  border-left:
    3px solid var(--green);

  color:
    var(--muted);
}

.article-nav {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    1rem;

  margin-top:
    1rem;
}

/* Legal pages */

.legal-page .blog-header {
  padding-bottom:
    2rem;
}

.legal-content {
  padding-top:
    2rem;
}

.legal-content .markdown-panel {
  max-width:
    900px;
}

.legal-content .markdown-panel h2 {
  margin-top:
    2rem;
}

.legal-content .markdown-panel h2:first-child {
  margin-top:
    0;
}

.legal-content .markdown-panel p {
  line-height:
    1.8;
}

.placeholder {
  color:
    var(--amber);

  background:
    rgba(242, 198, 109, .08);

  padding:
    .05rem .25rem;
}

.legal-note {
  margin:
    1rem 0 2.6rem;

  padding:
    1rem 1.2rem;

  border:
    1px solid rgba(242, 198, 109, .38);

  background:
    rgba(242, 198, 109, .055);
}

.legal-note p {
  margin:
    .6rem 0 0;

  color:
    var(--muted);

  line-height:
    1.7;
}

.legal-links {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    .8rem 1.4rem;

  margin-bottom:
    .9rem;
}

.legal-links a {
  color:
    var(--green-soft);

  text-decoration:
    underline;
}

.quicknav a[aria-current="page"] {
  color:
    var(--text);

  font-weight:
    700;
}

@media (max-width: 760px) {
  .shell-wrap {
    width: 100%;
    margin: 0;

    border-left:
      0;

    border-right:
      0;
  }

  .terminal {
    padding:
      1rem;
  }

  .topbar {
    grid-template-columns:
      auto 1fr auto;
  }

  .host {
    padding:
      0 .7rem;

    overflow:
      hidden;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;
  }

  .stack-grid,
  .contact-grid {
    grid-template-columns:
      1fr;
  }

  .log a,
  .post-card {
    grid-template-columns:
      1fr;
  }

  .post-tags {
    justify-content:
      flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior:
      auto !important;

    transition:
      none !important;

    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --muted:
      #c6d0d8;

    --line:
      #566575;
  }
}

/* Theme selector */
.theme-switcher {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .65rem;
  margin: 1.35rem 0 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.theme-switcher label {
  color: var(--muted);
  font-size: .82rem;
}
.theme-switcher label::before {
  content: "./theme --set ";
  color: var(--green);
}
.theme-switcher select {
  min-width: 13rem;
  padding: .5rem .72rem;
  border: 1px solid var(--line);
  border-radius: .25rem;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-size: .82rem;
}
.theme-switcher select:hover { border-color: var(--green); }
.theme-switcher select:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }