:root {
  --ink: #17211d;
  --muted: #5c6b64;
  --paper: #f7f4ec;
  --panel: #fffdf7;
  --rule: #d8d5ca;
  --forest: #155d45;
  --forest-dark: #0d3f31;
  --amber: #b86712;
  --red: #a33939;
  --blue: #245b8a;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 90% 5%, rgba(184, 103, 18, .1), transparent 24rem),
    var(--paper);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  line-height: 1.62;
}

a { color: var(--forest); }
a:hover { color: var(--forest-dark); }

.skip {
  position: absolute;
  left: -999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  padding: .55rem .8rem;
  background: white;
  border: 2px solid var(--forest);
  z-index: 10;
}

main { max-width: 52rem; margin: 0 auto; padding: 3.5rem 1.25rem 5rem; }
h1 { max-width: 45rem; font-size: clamp(2rem, 6vw, 3.5rem); line-height: 1.02; margin: 0; letter-spacing: -.035em; }
h2 { margin-top: 2.8rem; padding-bottom: .35rem; border-bottom: 1px solid var(--rule); font-size: 1.3rem; }
h3 { margin: 1.5rem 0 .35rem; color: var(--forest-dark); font-size: 1.05rem; }
.eyebrow { color: var(--amber); font: 700 .78rem/1.2 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.sub { max-width: 42rem; margin: .8rem 0 2rem; color: var(--muted); font-size: 1.08rem; }
.lead { font-size: 1.18rem; }

.verdict {
  margin: 2rem 0;
  padding: 1.2rem 1.4rem;
  color: #f7fff9;
  background: var(--forest-dark);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(13, 63, 49, .16);
}
.verdict strong { color: #ffd99d; }
.verdict code, .dark code { color: #fff; background: #315e50; }

code {
  padding: .1em .3em;
  border-radius: 4px;
  color: #143c31;
  background: #e3ece7;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: .86em;
}

.flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: .55rem;
  margin: 1.4rem 0;
}
.flow-box { min-height: 6rem; padding: .9rem; background: var(--panel); border: 1px solid var(--rule); border-radius: 8px; }
.flow-box b { display: block; color: var(--forest-dark); }
.arrow { color: var(--amber); font: 700 1.4rem system-ui, sans-serif; }

.simulator { padding: 1rem; background: #17211d; color: #edf5f0; border-radius: 12px; }
.simulator h3 { margin-top: 0; color: #ffd99d; }
.simulator-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: 1rem; }
.status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.status-card { padding: .65rem .75rem; background: #25312c; border: 1px solid #3b4c44; border-radius: 7px; }
.status-card span { display: block; color: #b8c9c0; font: .72rem/1.2 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .07em; }
.status-card strong { display: block; margin-top: .2rem; color: #fff; font: 650 .92rem/1.3 system-ui, sans-serif; }
.controls { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0; }
button {
  border: 0;
  border-radius: 6px;
  padding: .62rem .75rem;
  color: #fff;
  background: var(--forest);
  font: 650 .82rem/1.2 system-ui, sans-serif;
  cursor: pointer;
}
button:hover, button:focus-visible { background: #1c7558; outline: 2px solid #ffd99d; outline-offset: 2px; }
button.secondary { background: #42554c; }
button.danger { background: #8f4141; }
.log { min-height: 15rem; max-height: 21rem; overflow: auto; margin: 0; padding: .85rem; background: #0d1411; border-radius: 7px; color: #d7e4dd; font: .78rem/1.55 "SF Mono", Menlo, Consolas, monospace; white-space: pre-wrap; }
.things { color: #d7e4dd; font-size: .9rem; }

table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .9rem; }
th, td { padding: .6rem; border: 1px solid var(--rule); text-align: left; vertical-align: top; }
th { color: var(--forest-dark); background: #e8eee9; }

.callout { padding: .9rem 1rem; border-left: 4px solid var(--amber); background: #fff6e7; }
.cold { padding: 1rem 1.2rem; color: #f4fbf7; background: #17211d; border-radius: 8px; }
.cold b { color: #ffd99d; }
.cold code { color: #fff; background: #315e50; }

.quiz { padding: 1rem 1.2rem; background: var(--panel); border: 1px solid var(--rule); border-radius: 10px; }
.question { margin: 1.2rem 0; padding: 0; border: 0; }
.question legend { margin-bottom: .45rem; font-weight: 700; }
.question label { display: block; padding: .3rem 0; }
.feedback { min-height: 1.8rem; margin-top: .8rem; font-weight: 700; }
.feedback.ok { color: var(--forest); }
.feedback.no { color: var(--red); }

.source-line { margin: .45rem 0 1rem; color: var(--muted); font: .76rem/1.5 system-ui, sans-serif; }
.chip { display: inline-block; margin-right: .3rem; padding: .15rem .45rem; border-radius: 4px; text-decoration: none; }
.vsc { color: var(--blue); background: #e7eef5; border: 1px solid #c9d8e5; }
.gh { color: #fff; background: #252a28; }
.ask { margin-top: 2rem; padding: .8rem 1rem; background: #e7f0eb; border-radius: 7px; }
.foot { margin-top: 2.6rem; padding-top: 1rem; border-top: 1px solid var(--rule); color: var(--muted); font-size: .82rem; }

@media (max-width: 700px) {
  main { padding-top: 2rem; }
  .flow { grid-template-columns: 1fr; }
  .arrow { transform: rotate(90deg); justify-self: center; }
  .simulator-grid { grid-template-columns: 1fr; }
}