:root {
  color-scheme: dark;
  --ink: #05070d;
  --night: #0d1525;
  --raised: #151f32;
  --teal: #14b8a6;
  --teal-bright: #2dd4bf;
  --gold: #d4af37;
  --mist: #e7ebf3;
  --dim: #9aa6bc;
  --line: #243049;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Segoe UI", Roboto, sans-serif;
  background: var(--ink);
  color: var(--mist);
  line-height: 1.45;
}
a { color: var(--teal-bright); }
.wrap { max-width: 640px; margin: 0 auto; padding: 28px 18px 48px; }
.folder {
  width: 64px; height: 52px; border-radius: 10px;
  background: linear-gradient(160deg, #e6c45a, var(--gold) 45%, #8a6b1d);
  position: relative; box-shadow: 0 0 0 3px #0f766e;
}
.folder:before {
  content: ""; position: absolute; left: 8px; top: -8px;
  width: 26px; height: 12px; border-radius: 6px 6px 0 0; background: #e6c45a;
}
.spark {
  position: absolute; right: 8px; bottom: 8px; width: 12px; height: 12px;
  background: var(--teal-bright); border-radius: 50%;
  box-shadow: 0 0 10px var(--teal-bright);
}
h1 { font-size: 32px; margin: 14px 0 6px; letter-spacing: 0.02em; }
.tag { color: var(--gold); margin: 0 0 14px; }
.lede { color: var(--dim); margin: 0 0 18px; }
.card {
  background: var(--raised); border: 1px solid var(--line); border-radius: 16px;
  padding: 14px 16px; margin: 0 0 10px;
}
.card h2 { font-size: 16px; margin: 0 0 4px; color: var(--teal-bright); }
.card p { margin: 0; }
.badge { display: inline-block; margin: 16px 0 8px; }
.badge img { height: 72px; width: auto; display: block; }
.fine { color: var(--dim); font-size: 14px; }
footer { margin-top: 22px; color: var(--dim); font-size: 14px; }
footer nav { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; }
.maker { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.maker img { width: 28px; height: 28px; }
h1.page { font-size: 26px; }
.prose p { margin: 0 0 12px; }