/* Sunflower SMP: "sunny meadow" theme (light) and "night field" (dark). */
:root {
  --bg: #fff8e7;
  --bg-2: #fff0c9;
  --panel: #ffffff;
  --panel-2: #fff5da;
  --line: #f1dfae;
  --text: #3a2a14;
  --muted: #7a6440;
  --faint: #a8946a;
  --sun: #ffc21a;
  --sun-deep: #e89b00;
  --leaf: #3e9c35;
  --leaf-deep: #2d7a27;
  --sky: #8fd3ff;
  --ok: #2e9e44;
  --bad: #d9483b;
  --tip-bg: #fffdf5f2;
  --shadow: 0 1px 0 #f1dfae, 0 10px 30px -18px rgba(122, 86, 20, .45);
  --radius: 18px;
  /* names the shared market page uses */
  --sunflower: var(--sun-deep);
  --up: var(--ok); --down: var(--bad);
  --mono: "JetBrains Mono", ui-monospace, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1712; --bg-2: #13211a; --panel: #15231b; --panel-2: #1b2d22; --line: #2a4231;
    --text: #fff6dc; --muted: #c9bc94; --faint: #84806a; --sun: #ffc93c; --sun-deep: #ffc93c;
    --leaf: #6bcb5e; --leaf-deep: #8ee080; --sky: #6cb8e6; --ok: #5bd06a; --bad: #ff6b5b; --tip-bg: #0b120ef2;
    --shadow: 0 1px 0 #2a4231, 0 14px 34px -20px rgba(0, 0, 0, .8); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0e1712; --bg-2: #13211a; --panel: #15231b; --panel-2: #1b2d22; --line: #2a4231;
  --text: #fff6dc; --muted: #c9bc94; --faint: #84806a; --sun: #ffc93c; --sun-deep: #ffc93c;
  --leaf: #6bcb5e; --leaf-deep: #8ee080; --sky: #6cb8e6; --ok: #5bd06a; --bad: #ff6b5b; --tip-bg: #0b120ef2;
  --shadow: 0 1px 0 #2a4231, 0 14px 34px -20px rgba(0, 0, 0, .8); color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--text);
  font: 16px/1.6 "Nunito", system-ui, sans-serif;
  background-image: radial-gradient(1200px 500px at 85% -120px, color-mix(in srgb, var(--sun) 22%, transparent), transparent 70%),
                    radial-gradient(900px 400px at -10% 0, color-mix(in srgb, var(--leaf) 10%, transparent), transparent 70%);
  background-repeat: no-repeat;
}
a { color: var(--leaf-deep); }
h1, h2, h3 { font-family: "Fredoka", "Nunito", sans-serif; font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; }
img.px { image-rendering: pixelated; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* header */
header.top { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
header.top .wrap { display: flex; align-items: center; gap: 18px; height: 66px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font: 600 21px "Fredoka", sans-serif; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.brand b { color: var(--sun-deep); font-weight: 600; }
.nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.nav a { color: var(--muted); text-decoration: none; font-weight: 700; font-size: 15px; padding: 7px 12px; border-radius: 999px; }
.nav a:hover { color: var(--text); background: var(--panel-2); }
.nav a[aria-current="page"] { color: var(--text); background: color-mix(in srgb, var(--sun) 30%, transparent); }
.theme { all: unset; cursor: pointer; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 17px; }
.theme:focus-visible, .btn:focus-visible, .nav a:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.menu-btn { display: none; }
@media (max-width: 860px) {
  header.top .wrap { height: auto; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; }
  .nav { order: 3; width: 100%; margin: 0 -16px; padding: 0 16px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 2px; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 6px 10px; font-size: 14px; white-space: nowrap; }
  .theme { margin-left: auto; }
}

/* buttons, pills */
.btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; cursor: pointer; border: 0; font: 800 15px "Nunito", sans-serif; padding: 12px 20px; border-radius: 999px; color: #3a2a14; background: var(--sun); box-shadow: 0 3px 0 var(--sun-deep); transition: transform .12s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--sun-deep); }
.btn.green { background: var(--leaf); color: #fff; box-shadow: 0 3px 0 #23601e; }
.btn.ghost { background: var(--panel); color: var(--text); box-shadow: 0 3px 0 var(--line); border: 1px solid var(--line); }
.addr { display: inline-flex; align-items: center; gap: 4px; padding: 5px 5px 5px 16px; border-radius: 999px; background: var(--panel); border: 2px dashed color-mix(in srgb, var(--sun-deep) 60%, var(--line)); font: 700 17px var(--mono); color: var(--text); }
.addr button { all: unset; cursor: pointer; padding: 8px 14px; border-radius: 999px; background: var(--leaf); color: #fff; font: 800 14px "Nunito", sans-serif; }
.addr button:focus-visible { outline: 3px solid var(--sun); }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-weight: 800; font-size: 13px; background: color-mix(in srgb, var(--leaf) 16%, transparent); color: var(--leaf-deep); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); display: inline-block; }
.dot.on { background: var(--ok); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); animation: beat 1.8s infinite; }
@keyframes beat { to { box-shadow: 0 0 0 9px transparent; } }

/* page titles */
.page-head { padding: 52px 0 18px; }
.page-head h1 { font-size: clamp(34px, 6vw, 54px); margin: 0 0 10px; }
.page-head p { color: var(--muted); font-size: 18px; margin: 0; max-width: 640px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--sun-deep); text-transform: uppercase; letter-spacing: .08em; font-size: 13px; margin-bottom: 10px; }
.section { margin: 64px 0; }
.section > h2 { font-size: clamp(26px, 4vw, 36px); margin: 0 0 6px; }
.section > .sub { color: var(--muted); margin: 0 0 22px; }

/* footer */
footer.foot { margin-top: 80px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--leaf) 7%, var(--bg)); }
footer.foot .wrap { display: flex; flex-wrap: wrap; gap: 18px 40px; justify-content: space-between; padding-top: 30px; padding-bottom: 30px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot-links a, .foot-small a { color: var(--muted); text-decoration: none; font-weight: 700; }
.foot-links a:hover { color: var(--text); }
.foot-small { color: var(--faint); font-size: 13px; width: 100%; }
.foot-me { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 16px; color: var(--muted); text-decoration: none; transition: color .2s; }
.foot-me img { width: 28px; height: 28px; border-radius: 6px; image-rendering: pixelated; transition: transform .2s; }
.foot-me b { color: var(--text); }
.foot-me:hover { color: var(--leaf-deep); }
.foot-me:hover img { transform: translateY(-2px); }
.grass { height: 14px; background: repeating-linear-gradient(90deg, var(--leaf) 0 10px, var(--leaf-deep) 10px 20px); opacity: .9; mask: linear-gradient(#000, #000); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }