[hidden] { display: none !important; }
:root {
  --cream: #fff0cd;
  --cream-2: #f6e5bb;
  --forest: #233f36;
  --forest-2: #2b493b;
  --forest-line: #567253;
  --moss: #95bb70;
  --sky: #77c8ed;
  --pink: #efa5ba;
  --ink: #314d3c;
  --muted: #bbcbb3;
  --shadow: #475941;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--forest); color: var(--cream); font-family: var(--serif); min-height: 100vh; }
button, input, textarea { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--cream); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Header */
.site-header { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 40px; margin: auto; }
.brand { display: flex; align-items: baseline; gap: 18px; min-width: 0; }
.brand h1 { margin: 0; font-size: 30px; letter-spacing: -0.5px; line-height: 1.1; text-shadow: none; color: var(--cream); font-weight: normal; }
.brand .wordmark { font: inherit; letter-spacing: inherit; }
.tagline { margin: 0; font: 12px var(--mono); color: #b9cbb0; }
.wordmark { font: bold 14px var(--mono); letter-spacing: 2px; display: flex; align-items: center; gap: 10px; }
.wordmark i { display: inline-block; width: 12px; height: 8px; background: #b4e689; box-shadow: 4px -4px 0 #69ad4f; transform: translateY(-4px); }
.site-header nav { display: flex; gap: 28px; align-items: center; font: 12px var(--mono); }
.ghost { background: transparent; color: var(--cream); border: 1px solid #597262; padding: 12px 16px; font: 12px var(--mono); }
.ghost:hover { background: #2e4c3f; }

/* Hero */
.hero { text-align: center; position: relative; background: #4a92cc; color: #244537; padding: 0; overflow: hidden; }
.hero .intro { color: #eef6f6; }
.hero .eyebrow { color: #d6ebf5; }
.hero h1 { text-shadow: 3px 4px #2c6894; }
.hero-foot { background: #77a852; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 36px; padding: 14px 24px 16px; }
.hero-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.hero-meta .counter { padding: 0; justify-content: flex-start; }
.hero-meta .status { margin: 0; padding: 0; text-align: left; min-height: 0; }
.eyebrow { font: 10px var(--mono); letter-spacing: 3px; text-transform: uppercase; }
h1 { font-size: clamp(42px, 4.6vw, 64px); margin: 6px 0 8px; line-height: 1; font-weight: normal; letter-spacing: -3px; color: #fff2d7; text-shadow: 3px 4px #497962; }
h2 { font-size: 38px; font-weight: normal; letter-spacing: -1px; margin: 12px 0 20px; }
.intro p { font-size: 17px; line-height: 1.5; margin: 0; }
.world { margin: 0; position: relative; }
.world canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.world canvas.pointer { cursor: pointer; }
.world-caption { position: absolute; bottom: 18px; left: 40px; color: #2f5a2c; font: 10px var(--mono); letter-spacing: 1px; }
.hero-actions { display: flex; justify-content: center; gap: 16px; margin: 0; position: relative; flex-wrap: wrap; padding: 0 16px; }
.btn { border: 0; box-shadow: 4px 4px 0 var(--shadow); padding: 17px 28px; font: bold 13px var(--mono); background: var(--pink); color: #473e3c; transition: transform .12s, box-shadow .12s; }
.btn.cream { background: var(--cream); }
.btn:hover:not(:disabled) { transform: translate(-1px, -2px); box-shadow: 5px 6px 0 var(--shadow); }
.btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--shadow); }
.btn.small { padding: 11px 14px; font-size: 11px; box-shadow: 3px 3px 0 var(--shadow); }
button:disabled { opacity: .5; cursor: not-allowed; }
.counter { font: 12px var(--mono); display: flex; justify-content: center; align-items: center; gap: 8px 18px; flex-wrap: wrap; padding: 0 16px; }
.counter strong { font-size: 22px; }
.stage-chip { display: inline-block; padding: 6px 10px; background: #c4d89d; font-size: 10px; letter-spacing: 1px; }
.status { font: 12px/1.6 var(--mono); max-width: 650px; margin: 14px auto 0; min-height: 20px; padding: 0 16px; }
.status.error { color: #7a2f3c; }

/* Sections */
.about, .recent { max-width: 1100px; margin: auto; padding: 75px 36px; }
.about { text-align: center; }
.about > p { max-width: 560px; margin: auto; line-height: 1.8; color: #c6d2b8; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 45px; margin: 50px 0; text-align: left; }
.steps b { font: 14px var(--mono); color: var(--pink); }
.steps h3 { font-size: 20px; font-weight: normal; margin: 10px 0; }
.steps p { color: var(--muted); font-size: 15px; line-height: 1.7; margin: 0; }
.growth { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.growth li { font: 10px var(--mono); padding: 10px; border: 1px solid #526a53; color: #81967e; }
.growth li.active { color: var(--cream); background: #456649; border-color: #6c8b62; }
.growth li.current { box-shadow: 3px 3px 0 #18322a; }
.progress { max-width: 460px; height: 10px; margin: 22px auto 0; background: #1b342c; border: 1px solid #526a53; }
.progress > span { display: block; height: 100%; width: 0; background: #b4e689; transition: width .6s; }
.next-stage { font: 11px var(--mono); margin-top: 14px; color: var(--muted); }
.recent { padding-top: 0; }
.section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.section-heading span { font: 11px var(--mono); color: #b5c5a9; }
.leaf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.note { background: var(--forest-2); border: 1px solid var(--forest-line); color: var(--cream); text-align: left; padding: 24px; min-height: 180px; display: flex; flex-direction: column; font: inherit; }
button.note:hover { background: #31523f; border-color: #7a9a6c; }
.note p { font-size: 18px; line-height: 1.5; overflow-wrap: anywhere; margin: 14px 0; flex: 1; }
.note small { font: 11px var(--mono); color: #c1d0b5; }
.leaf-icon { display: block; width: 16px; height: 18px; margin: 4px 6px; flex: none; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 9' shape-rendering='crispEdges'%3E%3Cpath d='M3 0h2v1h1v1h1v2h1v2H7v1H6v1H5v1H4V8H3V7H2V6H1V5H0V3h1V2h1V1h1z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 9' shape-rendering='crispEdges'%3E%3Cpath d='M3 0h2v1h1v1h1v2h1v2H7v1H6v1H5v1H4V8H3V7H2V6H1V5H0V3h1V2h1V1h1z'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(2px 2px 0 rgba(20, 40, 28, .45)); image-rendering: pixelated; }
.empty { padding: 35px; border: 1px dashed #59715a; color: #b7c7ad; text-align: center; grid-column: 1 / -1; }
.site-footer { border-top: 1px solid #4d6651; display: flex; justify-content: space-between; gap: 25px; padding: 35px 40px; font: 11px var(--mono); color: #b7c8ac; flex-wrap: wrap; }
.site-footer a:hover { color: var(--cream); }

/* Dialog */
dialog { background: var(--cream); color: var(--ink); border: 6px solid #9caf7e; padding: 38px; max-width: 560px; width: calc(100% - 30px); max-height: 92vh; box-shadow: 8px 8px #122c27; }
dialog::backdrop { background: #132e27c4; }
.close { float: right; border: 0; background: none; font-size: 30px; line-height: 1; margin: -22px -14px 0 0; color: var(--ink); padding: 6px 10px; }
dialog p { line-height: 1.6; }
dialog h2 { margin-bottom: 6px; }
label { display: block; margin: 20px 0 8px; font: 13px var(--mono); }
input, textarea { display: block; width: 100%; background: var(--cream-2); border: 2px solid #96aa7b; color: var(--forest); padding: 12px; margin-top: 8px; border-radius: 0; }
textarea { min-height: 96px; resize: vertical; }
.hint { display: flex; justify-content: space-between; font: 10px/1.6 var(--mono); color: #5f7363; }
.hint.over { color: #a4364b; }
fieldset { border: 0; padding: 0; margin: 22px 0; display: flex; gap: 14px; flex-wrap: wrap; }
legend { font: 12px var(--mono); margin-bottom: 14px; }
.swatch { width: 34px; height: 34px; border: 2px solid #9db183; padding: 0; }
.swatch[aria-checked="true"] { outline: 3px solid #345741; outline-offset: 3px; }
.captcha { min-height: 65px; margin-top: 16px; }
.form-foot { font: 10px/1.6 var(--mono); color: #5f7363; display: block; }
form > .btn { display: block; margin: 20px 0 6px; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.planted { text-align: center; }
.planted .leaf-icon { margin: 18px auto; width: 32px; height: 36px; }

/* Leaf card */
.leaf-card { text-align: center; }
.leaf-card > .leaf-icon { margin: 18px auto; width: 32px; height: 36px; }
blockquote { font-size: 26px; line-height: 1.5; overflow-wrap: anywhere; margin: 26px 0 16px; }
.leaf-card .by { font: 13px var(--mono); margin: 0 0 6px; }
.leaf-card time { font: 10px var(--mono); color: #6d806f; }
.actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 24px; }
.actions .btn { background: #fff8e6; }
.actions .btn.primary { background: var(--pink); }
.toast { font: 11px var(--mono); min-height: 18px; margin: 14px 0 0; }

/* Stand-alone pages */
.standalone { max-width: 700px; margin: 30px auto 60px; padding: 0 24px; }
.panel { background: var(--cream); color: var(--ink); border: 6px solid #9caf7e; padding: 38px; box-shadow: 8px 8px #122c27; margin-top: 24px; }
.back { font: 12px var(--mono); }
.back:hover { text-decoration: underline; }
.mini-world { width: 100%; max-width: 100%; height: auto; image-rendering: pixelated; display: block; margin-top: 24px; border: 6px solid #9caf7e; border-bottom: 0; }
.mini-world + .panel { margin-top: 0; }

/* Admin */
.admin { max-width: 860px; margin: auto; padding: 30px 32px 80px; }
.admin h1 { font-size: 52px; letter-spacing: -2px; margin-top: 26px; }
.admin label { color: var(--cream); }
.admin input { background: #e8edce; }
.login { max-width: 420px; }
.toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 24px 0; }
.tabs { display: flex; gap: 0; border: 1px solid var(--forest-line); }
.tabs button { background: transparent; color: var(--cream); border: 0; padding: 10px 14px; font: 12px var(--mono); }
.tabs button[aria-selected="true"] { background: #456649; }
.queue { display: grid; gap: 16px; }
.queue .note { min-height: 0; }
.queue .meta { font: 11px var(--mono); color: #c1d0b5; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.queue .row-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.btn.approve { background: #b4e689; }
.btn.reject { background: #f2b8b0; }
.admin .status { margin-left: 0; padding: 0; text-align: left; }
.pill { font: 10px var(--mono); padding: 3px 7px; background: #456649; }

@media (max-width: 1080px) { .tagline { display: none; } }
@media (max-width: 760px) {
  .site-header { min-height: 60px; padding: 8px 16px; }
  .brand h1 { font-size: 22px; }
  .tagline { display: none; }
  .hero-foot { gap: 12px; padding: 14px 16px 18px; }
  .hero-meta { align-items: center; }
  .hero-meta .counter { justify-content: center; }
  .hero-meta .status { text-align: center; }
  .wordmark { font-size: 11px; letter-spacing: 1px; }
  .site-header nav { gap: 10px; }
  .site-header nav > a { display: none; }
  .ghost { font-size: 11px; padding: 9px 11px; }
  .hero { padding-top: 26px; }
  h1 { letter-spacing: -2px; }
  .eyebrow { font-size: 9px; letter-spacing: 2px; }
  .intro { padding: 0 16px; }
  .intro p { font-size: 15px; }
  .world canvas { image-rendering: auto; }
  .world-caption { display: none; }
  .hero-actions { gap: 12px; margin-top: 0; }
  .btn { font-size: 12px; padding: 14px 18px; }
  .about, .recent { padding: 50px 16px; }
  h2 { font-size: 30px; }
  .steps { grid-template-columns: 1fr; gap: 22px; margin: 30px 0; }
  .leaf-grid { grid-template-columns: 1fr; }
  .note { min-height: 140px; }
  .site-footer { padding: 28px 16px; }
  dialog { padding: 28px 18px; }
  .panel { padding: 26px 18px; }
  blockquote { font-size: 22px; }
  .admin { padding: 22px 16px 60px; }
  .admin h1 { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* Real-world impact */
.impact-line { margin: 0; font: 12px var(--mono); color: #244537; }
.impact-line strong { font-size: 15px; }
.impact { margin: 46px auto 40px; max-width: 620px; padding: 30px 28px; background: var(--forest-2); border: 1px solid var(--forest-line); box-shadow: 6px 6px 0 #18322a; }
.impact-number { margin: 0; font: 13px var(--mono); color: var(--muted); letter-spacing: 1px; text-transform: uppercase; }
.impact-number strong { display: block; font: normal 64px/1 var(--serif); color: #b4e689; letter-spacing: -2px; margin-bottom: 8px; text-transform: none; font-variant-numeric: tabular-nums; }
.impact-text { color: #c6d2b8; line-height: 1.7; margin: 16px auto 0; max-width: 46ch; }
.impact-links { display: flex; justify-content: center; gap: 10px 22px; flex-wrap: wrap; margin: 18px 0 0; font: 12px var(--mono); }
.impact-links a { text-decoration: underline; text-underline-offset: 3px; }
.impact-links a:hover { color: #b4e689; }
.impact-form { display: grid; grid-template-columns: minmax(0, 160px) minmax(0, 1fr) auto; gap: 12px; align-items: end; margin: 8px 0 28px; padding: 18px; border: 1px solid var(--forest-line); background: var(--forest-2); }
.impact-form label { margin: 0; }
.impact-form h2 { grid-column: 1 / -1; font-size: 22px; margin: 0; }
.impact-form p { grid-column: 1 / -1; margin: 0; font: 11px/1.6 var(--mono); color: var(--muted); }
@media (max-width: 760px) { .impact-form { grid-template-columns: 1fr; } .impact-number strong { font-size: 48px; } }

/* Token contract address bar */
.ca-bar { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 8px 16px; background: #fff0cd; color: #233f36; font: 12px var(--mono); }
.ca-label { font-weight: bold; letter-spacing: 1px; padding: 2px 6px; background: #233f36; color: #fff0cd; }
.ca-value { font: 12px var(--mono); overflow-wrap: anywhere; min-width: 0; user-select: all; }
.ca-copy { border: 1px solid #233f36; background: transparent; color: #233f36; font: bold 11px var(--mono); padding: 4px 10px; }
.ca-copy:hover { background: #233f36; color: #fff0cd; }

/* Donate */
.donate-btn { background: #b4e689; display: inline-flex; align-items: center; }
.donate { margin: 0 auto 40px; max-width: 620px; padding: 30px 28px; background: #fff0cd; color: var(--ink); text-align: center; box-shadow: 6px 6px 0 #18322a; border: 6px solid #9caf7e; }
.donate .eyebrow { color: #5f7363; }
.donate h3 { font-size: 30px; font-weight: normal; margin: 10px 0 12px; letter-spacing: -0.5px; }
.donate p { line-height: 1.7; max-width: 52ch; margin: 0 auto 20px; }
.donate .btn { display: inline-block; }
.donate .fineprint { font: 11px/1.6 var(--mono); color: #6d806f; margin: 20px auto 0; }
@media (max-width: 760px) { .ca-bar { font-size: 11px; gap: 6px 8px; } .ca-value { font-size: 11px; } .donate { padding: 24px 18px; } }

/* First-visit guidance */
.navlink { background: none; border: 0; color: inherit; font: 12px var(--mono); padding: 6px 0; }
.navlink:hover { text-decoration: underline; text-underline-offset: 3px; }
.scene-callout { position: absolute; top: 18px; left: 22px; z-index: 2; max-width: 330px; text-align: left; background: #fff0cdf2; color: var(--ink); border: 4px solid #9caf7e; box-shadow: 5px 5px 0 #1d3a2acc; padding: 14px 18px 16px; }
.callout-eyebrow { font: 10px var(--mono); letter-spacing: 2px; text-transform: uppercase; color: #5f7363; }
.scene-callout h2 { font-size: 28px; line-height: 1.1; margin: 6px 0 8px; letter-spacing: -0.5px; }
.scene-callout p { margin: 0 0 12px; font-size: 15px; line-height: 1.45; }
.callout-actions { display: flex; gap: 10px; flex-wrap: wrap; }
@keyframes pulse-ring { 0% { box-shadow: 4px 4px 0 var(--shadow), 0 0 0 0 #ffd6e4cc; } 70% { box-shadow: 4px 4px 0 var(--shadow), 0 0 0 12px #ffd6e400; } 100% { box-shadow: 4px 4px 0 var(--shadow), 0 0 0 0 #ffd6e400; } }
.btn.pulse { animation: pulse-ring 1.8s ease-out infinite; }
body.planted-once .btn.pulse { animation: none; }
.howto { text-align: left; }
.howto h2 { margin: 6px 0 4px; }
.howto-lead { margin: 0 0 16px; color: #5f7363; }
.howto-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.howto-steps li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px; background: #f6e5bb; border: 2px solid #d9c592; }
.howto-steps b { font: bold 14px var(--mono); }
.howto-steps p { margin: 4px 0 0; font-size: 15px; line-height: 1.5; }
.howto-visual { display: flex; align-items: center; justify-content: center; min-height: 64px; background: #95bb70; border: 2px solid #7aa860; }
.howto-visual canvas { width: 100%; max-width: 100%; height: auto; image-rendering: pixelated; display: block; }
.note-visual { background: #77c8ed; padding: 8px; }
.note-card { display: block; background: #fff0cd; border: 2px solid #9caf7e; padding: 6px 8px; font-size: 12px; line-height: 1.35; box-shadow: 2px 2px 0 #4a7a5c; }
.note-card .leaf-icon { width: 10px; height: 11px; margin: 0 0 3px; }
.note-card small { display: block; font: 10px var(--mono); color: #5f7363; margin-top: 3px; }
.howto-tip { font: 12px/1.6 var(--mono); color: #4d6651; margin: 16px 0 0; }
.howto .actions { justify-content: flex-start; }
@media (max-width: 760px) {
  .scene-callout { position: static; max-width: none; border-width: 0 0 4px; box-shadow: none; padding: 14px 16px; text-align: center; }
  .scene-callout h2 { font-size: 24px; }
  .scene-callout h2 br { display: none; }
  .callout-actions { justify-content: center; }
  .howto-steps li { grid-template-columns: 1fr; }
  .howto-visual { max-width: 260px; }
}
@media (prefers-reduced-motion: reduce) { .btn.pulse { animation: none; } }

@media (max-width: 760px) {
  .hero { padding-top: 0; }
  .site-header .navlink { display: none; }
  .brand h1 { font-size: 22px; white-space: nowrap; }
  .ca-bar { flex-wrap: nowrap; padding: 7px 10px; gap: 6px; }
  .ca-value { font-size: 9.5px; letter-spacing: -0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ca-label, .ca-copy { flex: none; }
}

/* Kind-word picker */
.message-picker { display: block; margin: 18px 0 8px; }
.message-options { display: grid; gap: 8px; max-height: 300px; overflow-y: auto; padding: 2px 4px 2px 2px; }
.msg-option { text-align: left; background: #f6e5bb; border: 2px solid #d4c08d; color: var(--ink); padding: 10px 12px 10px 36px; font: 15px/1.4 var(--serif); position: relative; }
.msg-option::before { content: ""; position: absolute; left: 12px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border: 2px solid #96aa7b; background: #fff8e6; }
.msg-option:hover { border-color: #96aa7b; background: #f2dfae; }
.msg-option[aria-checked="true"] { background: #e3f1c9; border-color: #5c9c4b; box-shadow: 3px 3px 0 #5c9c4b; }
.msg-option[aria-checked="true"]::before { background: #5c9c4b; border-color: #3e7a45; }
.shuffle { margin-top: 10px; background: none; border: 0; color: #3e7a45; font: bold 12px var(--mono); padding: 4px 0; text-decoration: underline; text-underline-offset: 3px; }
.planted .chosen-word { font-size: 20px; line-height: 1.5; margin: 6px auto 10px; max-width: 36ch; }

.setup-note { margin: 14px 0 0; padding: 10px 12px; background: #fbe3c4; border: 2px solid #d9a35f; color: #6b4320; font: 13px/1.5 var(--mono); }