:root {
  color-scheme: light;
  --bg:#f7f9f0; --bg-end:#f2f6ed; --surface:#fffefa; --raised:#edf2e5;
  --ink:#20382b; --muted:#52634f; --green:#28543c; --on-green:#fff;
  --green-soft:#ddebcf; --line:#d5dfce; --outline:#71836f;
  --water:#146c94; --gold:#826000; --soil:#79543d; --warmth:#934a33;
  --error:#ac302a; --error-bg:#ffebe5; --focus:#146c94;
  --art-green:#628157; --art-water:#4794ad; --art-gold:#ac8b38; --art-root:#927353;
  --shadow:0 14px 44px #243a2115; --topic:var(--green); --radius:22px;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.5; -webkit-text-size-adjust:100%; text-size-adjust:100%;
}
:root[data-theme="dark"] {
  color-scheme:dark; --bg:#0d2018; --bg-end:#14271e; --surface:#172e24; --raised:#203a2f;
  --ink:#ecf2e5; --muted:#c1cfbf; --green:#b6d799; --on-green:#183213;
  --green-soft:#2a4b2d; --line:#3d5747; --outline:#8a9e88;
  --water:#8bcfe9; --gold:#e8cb80; --soil:#e0b99a; --warmth:#f2b49c;
  --error:#ffb4ab; --error-bg:#4b2320; --focus:#8bcfe9;
  --art-green:#b6d799; --art-water:#8bcfe9; --art-gold:#e8cb80; --art-root:#c7aa82;
  --shadow:0 14px 44px #0003;
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme:dark; --bg:#0d2018; --bg-end:#14271e; --surface:#172e24; --raised:#203a2f;
    --ink:#ecf2e5; --muted:#c1cfbf; --green:#b6d799; --on-green:#183213;
    --green-soft:#2a4b2d; --line:#3d5747; --outline:#8a9e88;
    --water:#8bcfe9; --gold:#e8cb80; --soil:#e0b99a; --warmth:#f2b49c;
    --error:#ffb4ab; --error-bg:#4b2320; --focus:#8bcfe9;
    --art-green:#b6d799; --art-water:#8bcfe9; --art-gold:#e8cb80; --art-root:#c7aa82;
    --shadow:0 14px 44px #0003;
  }
}
*,*::before,*::after {box-sizing:border-box}
html {min-height:100%; background:var(--bg); scroll-behavior:auto}
body {margin:0; min-width:0; min-height:100vh; min-height:100dvh; color:var(--ink); background:linear-gradient(135deg,var(--bg),var(--bg-end)); overflow-wrap:break-word}
body::before,body::after {content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.15; background-repeat:no-repeat}
body::before {background-position:right -65px top 100px; background-size:150px 820px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 820' fill='none' stroke='%23628157' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M88 800C100 590 64 350 104 20M87 670C34 621 49 603 25 568M93 530C146 484 133 454 147 410M88 370C39 322 59 295 26 252M97 210C147 170 128 121 150 75'/%3E%3Cpath d='M67 643Q17 632 25 589Q66 594 67 643ZM114 501Q161 484 144 438Q108 457 114 501ZM70 349Q17 340 29 285Q69 295 70 349ZM115 185Q158 161 143 119Q106 139 115 185Z'/%3E%3C/svg%3E")}
body::after {background-position:left -75px bottom 55px; background-size:160px 480px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 480' fill='none' stroke='%23927353' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M76 0C85 130 57 180 80 257M80 186C85 264 19 286 14 421M80 211C79 292 116 310 144 468M81 233C81 307 45 372 64 480M80 235C98 332 98 357 101 480M42 301C12 307 3 347 0 381M117 367C145 388 138 420 160 441M61 407C27 411 37 451 17 480'/%3E%3C/svg%3E")}
:root[data-theme="dark"] body::before,:root[data-theme="dark"] body::after {opacity:.16; filter:brightness(1.8) saturate(.7)}
body[data-topic="light"],.topic-light {--topic:var(--gold)}
body[data-topic="water"],body[data-topic="air"],.topic-water,.topic-air {--topic:var(--water)}
body[data-topic="roots"],.topic-roots {--topic:var(--soil)}
body[data-topic="nutrition"],.topic-nutrition {--topic:var(--gold)}
body[data-topic="temperature"],.topic-temperature {--topic:var(--warmth)}
body[data-topic="growth"],body[data-topic="diary"],body[data-topic="tools"],.topic-growth,.topic-diary,.topic-tools {--topic:var(--green)}
a {color:var(--water); text-underline-offset:3px}
button,input,select,textarea {font:inherit; color:inherit}
button,a,input,select,textarea,summary {-webkit-tap-highlight-color:transparent}
button {cursor:pointer}
button:disabled,.button:disabled {cursor:default; opacity:.55}
button,select,input,textarea,a {touch-action:manipulation}
:focus-visible {outline:3px solid var(--focus); outline-offset:4px}
button:focus:not(:focus-visible),a:focus:not(:focus-visible) {outline:none}
h1,h2,h3,p {margin-top:0}
h1 {font-size:clamp(1.65rem,5vw,2.25rem); line-height:1.18; letter-spacing:-.025em; margin-bottom:.65rem}
h2 {font-size:1.3rem; line-height:1.3; margin-bottom:.75rem}
h3 {font-size:1.08rem; line-height:1.35; margin-bottom:.5rem}
p {margin-bottom:.85rem}
p:last-child {margin-bottom:0}
small,.muted {color:var(--muted)}
small {font-size:.875rem}
svg {flex-shrink:0; vertical-align:middle; max-width:100%}
img {max-width:100%; height:auto}
hr {border:0; border-top:1px solid var(--line); margin:1.25rem 0}
.skip-link {position:fixed; z-index:100; top:8px; left:8px; transform:translateY(-180%); padding:.7rem 1rem; color:var(--on-green); background:var(--green); border-radius:10px}
.skip-link:focus {transform:none}
.app-topbar {position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:calc(12px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left)); background:var(--bg); border-bottom:1px solid transparent}
.brand {min-width:0; font-size:1.1rem; line-height:1.15; font-weight:800; letter-spacing:.025em; color:var(--ink); text-decoration:none; overflow-wrap:normal}
.topbar-actions {display:flex; flex:0 0 auto; align-items:center; gap:4px}
.icon-button {display:inline-grid; place-items:center; min-width:44px; min-height:44px; padding:10px; border:0; border-radius:14px; background:transparent; color:var(--green)}
.icon-button:hover {background:var(--green-soft)}
#app {position:relative; z-index:1; max-width:1120px; margin:0 auto; padding:1rem max(16px,env(safe-area-inset-right)) calc(8rem + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); min-width:0}
.page {min-width:0; max-width:960px; margin:0 auto}
.page > * + * {margin-top:1rem}
.page-header {min-width:0; padding:1.25rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface)}
.page-header .topic-art {max-width:220px; height:76px; margin:0 0 1rem auto}
.page-header h1 {color:var(--ink)}
.page-header p {color:var(--muted)}
.hero {background:none; border:0; box-shadow:none; padding:.6rem 0 1.1rem; overflow:visible}
.hero h1 {font-size:clamp(1.85rem,7vw,2.65rem); color:var(--green); font-weight:800; letter-spacing:.02em}
.hero-art {position:relative; display:grid; place-items:center; isolation:isolate; margin:.25rem -8px .8rem; padding:.4rem 0 .75rem; overflow:visible}
.hero-logo {display:block; position:relative; z-index:1; width:min(100%,25rem); height:auto; border:0; border-radius:0; box-shadow:none; background:none}
.transport-figure {position:relative;z-index:1;width:min(100%,25rem);aspect-ratio:1136/1384}
.transport-figure .hero-logo {width:100%}
.transport-overlay {position:absolute;z-index:2;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.transport-panel {margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--line);min-width:0}
.transport-panel h2 {font-size:1.1rem;margin:0}
.transport-modes,.transport-legend {display:flex;flex-wrap:wrap;gap:.4rem;margin:.8rem 0;min-width:0}
.transport-mode,.transport-component {display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:.45rem .7rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:.9rem;max-width:100%;white-space:normal;text-align:left}
.transport-mode[aria-pressed="true"] {background:var(--green);color:var(--on-green);border-color:var(--green)}
.transport-component[aria-pressed="false"] {text-decoration:line-through;opacity:.65}
.transport-swatch {display:inline-block;flex:0 0 auto;width:12px;height:12px;background:var(--particle);border:1px solid #183326;border-radius:50%;outline:1px solid #fff8}
.transport-explanation {font-size:.94rem;margin-bottom:.6rem}
.transport-caveat {font-size:.82rem;color:var(--muted)}
.transport-science {font-size:.9rem;max-width:100%}
.transport-science>summary {cursor:pointer;padding:.65rem 0;min-height:44px}
.transport-science .stack {padding-top:.75rem}
.transport-pause {font-size:.85rem;min-height:44px}
.hero-continuation {position:absolute; z-index:0; inset:-5% 0; width:100%; height:116%; overflow:visible; pointer-events:none}
.hero-caption {display:flex; flex-wrap:wrap; gap:.5rem 1rem; color:var(--muted)}
.hero-caption > span {display:inline-flex; align-items:center; gap:.35rem}
.art-green {stroke:var(--art-green)}
.art-water {stroke:var(--art-water)}
.art-gold {stroke:var(--art-gold)}
.art-root {stroke:var(--art-root)}
.topic-art {display:block; width:100%; height:72px; pointer-events:none; overflow:visible}
.direction-grid,.grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr)); gap:1rem; min-width:0}
.direction-card {display:flex; flex-direction:column; align-items:flex-start; gap:.45rem; text-align:left; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.15rem; text-decoration:none; min-width:0; min-height:44px}
.direction-card .topic-art {height:56px; max-width:150px; margin-left:auto; margin-bottom:.2rem}
.direction-card h2,.direction-card h3,.direction-card strong {margin:0; font-size:1.15rem; line-height:1.3}
.direction-card .letter {color:var(--topic); font-size:1.8rem; font-weight:750}
.direction-card:hover {border-color:var(--topic)}
.card,.plant-card,.kit-card {min-width:0; padding:1.2rem; border-radius:var(--radius); border:1px solid var(--line); background:var(--surface); box-shadow:none}
.card > :last-child,.plant-card > :last-child,.kit-card > :last-child {margin-bottom:0}
.plant-card,.kit-card {overflow:hidden}
.plant-card a {color:inherit; text-decoration:none}
.stack,.form,.section {display:flex; flex-direction:column; gap:1rem; min-width:0}
.stack > *,.form > *,.section > * {margin-top:0; margin-bottom:0}
.row {display:flex; align-items:center; flex-wrap:wrap; gap:.7rem; min-width:0}
.row > * {min-width:0}
.row.between {justify-content:space-between}
.row.end {justify-content:flex-end}
.field {display:grid; grid-template-columns:minmax(0,1fr); gap:.4rem; min-width:0; margin:0}
.field > label,.field > span:first-child,label.field {font-weight:600}
.field small {font-weight:400}
input:not([type="checkbox"]):not([type="radio"]),select,textarea {display:block; width:100%; min-width:0; min-height:48px; padding:.8rem .9rem; border:1px solid var(--outline); border-radius:14px; background:var(--surface); color:var(--ink); box-shadow:none; font-size:1rem; line-height:1.4}
input[type="file"] {overflow:hidden; text-overflow:ellipsis}
input[type="date"],input[type="datetime-local"] {-webkit-appearance:none; appearance:none; min-height:48px}
input::placeholder,textarea::placeholder {color:var(--muted); opacity:.85}
textarea {min-height:7rem; resize:vertical}
input:invalid:not(:placeholder-shown):focus,textarea:invalid:focus {border-color:var(--error)}
input[type="checkbox"],input[type="radio"] {width:24px; height:24px; flex:0 0 auto; accent-color:var(--green); margin:0}
.checklist {display:flex; flex-direction:column; gap:.75rem; padding:0; list-style:none}
.checklist label,.checklist li {display:flex; align-items:flex-start; gap:.75rem; min-height:44px; padding:.35rem 0; min-width:0}
.checklist input {margin-top:.15rem}
.checklist label > span,.checklist li > span {min-width:0}
.actions {display:flex; align-items:center; flex-wrap:wrap; gap:.65rem; min-width:0}
.button,button.button {display:inline-flex; align-items:center; justify-content:center; gap:.55rem; min-height:48px; min-width:0; max-width:100%; padding:.8rem 1.1rem; border:1px solid transparent; border-radius:14px; background:var(--green); color:var(--on-green); font-weight:650; line-height:1.35; text-decoration:none; text-align:center; white-space:normal; overflow-wrap:anywhere}
.button.secondary {border-color:var(--outline); color:var(--green); background:var(--surface)}
.button.ghost {border-color:transparent; color:var(--green); background:transparent; padding-left:.75rem; padding-right:.75rem}
.button.danger,.danger.button {background:var(--error); color:var(--bg)}
.button.secondary.danger,.button.ghost.danger {background:transparent; color:var(--error)}
.danger:not(.button) {color:var(--error)}
.button svg {width:22px; height:22px}
.button > span {min-width:0}
.tabs {display:flex; flex-wrap:wrap; gap:.5rem; min-width:0}
.tabs > button,.chip {display:inline-flex; align-items:center; justify-content:center; gap:.35rem; max-width:100%; min-height:44px; padding:.55rem .85rem; border:1px solid var(--outline); border-radius:12px; background:var(--surface); color:var(--ink); font:inherit; font-weight:550; text-align:center; white-space:normal; overflow-wrap:anywhere}
.tabs .active,.tabs [aria-selected="true"],.chip.active,.chip[aria-pressed="true"],.chip.selected {background:var(--green-soft); border-color:var(--green); color:var(--ink)}
.badge {display:inline-flex; align-items:center; gap:.3rem; max-width:100%; border-radius:999px; padding:.3rem .65rem; background:var(--raised); color:var(--topic); font-size:.85rem; line-height:1.35; white-space:normal}
.metrics {display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr)); gap:.75rem}
.metric {min-width:0; border:1px solid var(--line); border-radius:16px; padding:1rem; background:var(--surface)}
.metric strong,.metric .value {display:block; color:var(--topic); font-size:1.8rem; line-height:1.2; font-weight:750; overflow-wrap:anywhere}
.metric small,.metric .label {display:block; margin-top:.35rem; color:var(--muted)}
.photo {display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:16px; background:var(--raised)}
.plant-card .photo {margin-bottom:1rem}
.notice,.error,.empty {border:1px solid var(--line); border-radius:16px; padding:1rem; background:var(--surface); min-width:0}
.notice {border-left:4px solid var(--water)}
.error {color:var(--error); border-color:var(--error); background:var(--error-bg)}
.empty {padding:1.5rem; color:var(--muted)}
.empty .topic-art {max-width:240px; margin:0 auto 1rem}
.list {display:flex; flex-direction:column; gap:.8rem; padding:0; margin:0; list-style:none; min-width:0}
.list > li {min-width:0}
.source {font-size:.9rem; color:var(--muted); overflow-wrap:anywhere}
.source a {overflow-wrap:anywhere}
.snapshot {white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; color:var(--ink); background:var(--surface); padding:1rem; border:1px solid var(--line); border-radius:16px; min-width:0; max-width:100%}
details {min-width:0}
summary {cursor:pointer; padding:.65rem 0; min-height:44px; color:var(--green); font-weight:600}
fieldset {border:1px solid var(--line); border-radius:16px; min-width:0; padding:1rem}
legend {padding:0 .35rem; font-weight:600}
table {width:100%; border-collapse:collapse; font-size:.9rem}
th,td {padding:.6rem; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; overflow-wrap:anywhere}
#bottom-nav {position:fixed; z-index:50; left:0; right:0; bottom:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2px; padding:8px max(6px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left)); background:var(--surface); border-top:1px solid var(--line)}
#bottom-nav a,#bottom-nav button,.nav-item {display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:4px; min-width:0; min-height:52px; padding:5px 2px; border:0; border-radius:14px; background:transparent; color:var(--muted); font-size:.73rem; line-height:1.25; text-align:center; text-decoration:none; overflow-wrap:anywhere}
#bottom-nav svg {width:24px; height:24px; margin:0 auto}
#bottom-nav .active,#bottom-nav [aria-current="page"] {color:var(--ink); background:var(--green-soft); font-weight:700}
.app-modal,dialog {width:min(calc(100% - 24px),680px); max-height:calc(100dvh - 2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)); margin:auto; padding:1.3rem; border:1px solid var(--line); border-radius:24px; background:var(--surface); color:var(--ink); box-shadow:var(--shadow); overflow:auto; overscroll-behavior:contain}
dialog::backdrop {background:#071810a6}
dialog > :first-child {margin-top:0}
dialog > :last-child {margin-bottom:0}
.toast,#toast {position:fixed; z-index:100; left:max(16px,env(safe-area-inset-left)); right:max(16px,env(safe-area-inset-right)); bottom:calc(6.5rem + env(safe-area-inset-bottom)); width:auto; max-width:680px; margin:0 auto; border:1px solid var(--outline); border-radius:16px; padding:.9rem 1rem; background:var(--ink); color:var(--bg); box-shadow:var(--shadow); pointer-events:none; overflow-wrap:anywhere}
#toast:empty {display:none}
.hidden,[hidden] {display:none!important}
@media(min-width:720px) {
  #app {padding-top:1.6rem}
  .app-topbar {padding-left:max(24px,calc((100vw - 1088px)/2)); padding-right:max(24px,calc((100vw - 1088px)/2))}
  .hero-art {margin-top:1rem}
  .direction-grid {grid-template-columns:repeat(4,minmax(0,1fr))}
  #bottom-nav {left:50%; right:auto; width:min(760px,100%); transform:translateX(-50%); border:1px solid var(--line); border-bottom:0; border-radius:22px 22px 0 0}
}
@media(max-width:360px) {
  .app-topbar {gap:6px}
  .brand {font-size:1rem}
  .card,.plant-card,.kit-card,.page-header {padding:1rem}
  .actions > .button {flex:1 1 100%}
}
@media(prefers-reduced-motion:no-preference) {
  .button,.direction-card,.icon-button {transition:background-color .12s,border-color .12s}
}
@media print {
  .app-topbar,#bottom-nav,.actions,.toast,.skip-link {display:none!important}
  body::before,body::after {display:none}
  #app {max-width:none;padding:0}
  .card,.snapshot,.page-header {break-inside:avoid;box-shadow:none}
}