:root{--bg:#edf3f1;--surface:#fff;--ink:#12332e;--muted:#4d6a65;--line:#c5d6d1;--water:#1f7ba8;--leaf:#2f8f5b;--dry:#b9892b;--soil:#6b4a33;color-scheme:light}
@media (prefers-color-scheme:dark){:root{--bg:#0f1f1d;--surface:#172c29;--ink:#e3f0ec;--muted:#9bb5af;--line:#2a4642;--water:#58b4de;--leaf:#5fc48a;--dry:#e0b04c;--soil:#a37a58;color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;line-height:1.8;font-size:17px}
a{color:var(--water)}
a:focus-visible,button:focus-visible{outline:3px solid var(--water);outline-offset:3px}
.wrap{max-width:1000px;margin:0 auto;padding:0 22px}
nav{background:var(--surface);border-bottom:2px solid var(--line);position:sticky;top:0;z-index:5}
nav .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:4px 22px;padding-top:10px;padding-bottom:10px}
nav .brand{font-weight:900;color:var(--ink);text-decoration:none;margin-right:auto}
nav a.l{color:var(--muted);text-decoration:none;padding:2px 0;border-bottom:3px solid transparent;font-size:.95rem}
nav a.l:hover{color:var(--ink)}
nav a.l[aria-current]{color:var(--ink);font-weight:700;border-bottom-color:var(--water)}
header.top{padding:48px 0 8px}
h1{font-size:clamp(2rem,6vw,3.6rem);line-height:1.15;font-weight:900;margin:0 0 14px}
h2{font-size:1.6rem;margin:36px 0 14px}
h3{font-size:1.1rem;margin:0 0 4px}
p{margin:0 0 14px;max-width:42em}
.lead{font-size:1.15rem;color:var(--muted);max-width:36em}
main{padding-bottom:30px}
.sim{background:var(--surface);border:2px solid var(--line);border-radius:18px;padding:18px 18px 22px;margin:28px 0}
.sim svg{display:block;width:100%;height:auto}
#carriage{transition:transform 1.1s cubic-bezier(.5,0,.3,1)}
.drop{fill:var(--water);opacity:0}
.watering .drop{animation:fall .6s linear infinite}
.watering .drop:nth-child(2){animation-delay:.2s}.watering .drop:nth-child(3){animation-delay:.4s}
@keyframes fall{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(60px)}}
.status{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin:6px 0 14px;font-weight:500}
.chip{padding:3px 12px;border-radius:99px;border:2px solid var(--line);font-size:.92rem}
.chip.on{border-color:var(--water);color:var(--water);font-weight:700}
.pots{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pot{border:2px solid var(--line);border-radius:12px;padding:12px}
.bar{height:12px;border-radius:6px;background:var(--line);overflow:hidden;margin:6px 0 10px}
.bar i{display:block;height:100%;width:50%;background:var(--leaf);transition:width .4s,background .4s}
.bar i.low{background:var(--dry)}
button{font:inherit;cursor:pointer;border:2px solid var(--ink);background:transparent;color:var(--ink);border-radius:10px;padding:6px 12px;width:100%}
button:hover:not(:disabled){background:var(--ink);color:var(--bg)}
button:disabled{opacity:.45;cursor:not-allowed}
#msg{min-height:3.4em;margin:14px 0 0;color:var(--muted);font-size:.95rem}
.note{font-size:.88rem;color:var(--muted);margin:8px 0 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:0 36px}
.grid>div{padding:14px 0;border-top:2px solid var(--line)}
.grid p{margin:0;color:var(--muted);font-size:.97rem}
.links{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.links a{display:block;border:2px solid var(--line);border-radius:14px;padding:16px 18px;text-decoration:none;color:var(--ink);background:var(--surface)}
.links a:hover{border-color:var(--water)}
.links strong{display:block;font-size:1.1rem}
.links span{color:var(--muted);font-size:.95rem}
.loop{display:flex;flex-wrap:wrap;gap:8px;align-items:center;list-style:none;padding:0;margin:0 0 18px}
.loop li{border:2px solid var(--water);border-radius:10px;padding:4px 12px;font-size:.95rem}
.loop li:not(:last-child)::after{content:" ›";color:var(--water);font-weight:900;margin-left:8px}
.tbl{overflow-x:auto;margin-bottom:24px}
table{border-collapse:collapse;width:100%;min-width:420px}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{border-bottom:2px solid var(--ink)}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:8px 0}
.compare div{border:2px solid var(--line);border-radius:12px;padding:14px 16px}
.compare strong{display:block}
.compare .ours{border-color:var(--leaf)}
.adv,.refs{padding-left:1.2em;max-width:44em}
.adv li,.refs li{margin-bottom:8px}
.refs{font-size:.92rem;color:var(--muted)}.refs li{word-break:break-all}
.pager{display:flex;justify-content:space-between;gap:16px;margin-top:44px;padding-top:18px;border-top:2px solid var(--line)}
.pager a{font-weight:700;text-decoration:none}
footer{padding:28px 0 50px;color:var(--muted);font-size:.9rem}
@media (max-width:620px){.pots,.compare{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){#carriage,.bar i{transition:none}.watering .drop{animation:none;opacity:1}}
figure{margin:0 0 8px}
figure img{display:block;width:100%;height:auto;border-radius:14px;border:2px solid var(--line)}
figcaption{font-size:.9rem;color:var(--muted);margin-top:8px}
.hero-fig{max-width:560px;margin-top:26px}
.hero-fig img{aspect-ratio:1/1;object-fit:cover}
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;align-items:start}
.shots img{max-height:560px;object-fit:cover;object-position:top}
.chart{background:var(--surface);border:2px solid var(--line);border-radius:14px;padding:16px 18px;margin:12px 0 20px}
.chart .r{display:grid;grid-template-columns:5.5em 1fr;gap:4px 10px;align-items:center;margin-bottom:12px}
.chart .r b{grid-row:span 2}
.chart .bar{height:14px;margin:0}
.chart .bar i{transition:none}
.chart .lo{background:var(--water);opacity:.45}.chart .hi{background:var(--water)}
.chart small{color:var(--muted)}
.legend{display:flex;gap:18px;font-size:.9rem;color:var(--muted);margin-bottom:10px}
.legend span::before{content:"";display:inline-block;width:14px;height:14px;border-radius:4px;background:var(--water);margin-right:6px;vertical-align:-2px}
.legend span:first-child::before{opacity:.45}
dl.info{display:grid;grid-template-columns:8em 1fr;gap:0;margin:0;max-width:44em}
dl.info dt,dl.info dd{padding:10px 0;border-top:1px solid var(--line);margin:0}
dl.info dt{font-weight:700}
.ev{border-left:4px solid var(--water);padding-left:16px;margin:0 0 24px;list-style:none}
.ev li{margin-bottom:6px}.ev time{font-weight:700;margin-right:10px}
@media (max-width:620px){dl.info{grid-template-columns:6em 1fr}}
.chart .r b{grid-row:span 3}
.chart .md{background:var(--water);opacity:.7}
.legend span:nth-child(2)::before{opacity:.7}
.legend span:nth-child(3)::before{opacity:1}
.dash{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:28px;align-items:start;margin-bottom:32px}
.dash img{max-height:none}
.dash ul{padding-left:1.2em;margin:0;max-width:34em}.dash li{margin-bottom:8px}
@media (max-width:620px){.dash{grid-template-columns:1fr}.dash figure{max-width:340px}}
html{-webkit-text-size-adjust:100%}
.navrow{display:flex;flex-wrap:wrap;gap:4px 22px}
.grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.links{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.shots{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
button{min-height:44px}
@media (hover:none){button:hover:not(:disabled){background:transparent;color:var(--ink)}}
@media (max-width:700px){
  body{font-size:16px}
  .wrap{padding:0 18px}
  nav{position:static}
  nav .wrap{display:block;padding-top:8px;padding-bottom:0}
  nav .brand{display:block;margin:0 0 2px}
  .navrow{flex-wrap:nowrap;overflow-x:auto;gap:20px;padding-bottom:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .navrow::-webkit-scrollbar{display:none}
  nav a.l{white-space:nowrap;padding:8px 0;flex:none}
  header.top{padding-top:28px}
  h2{font-size:1.35rem;margin-top:28px}
  .sim{padding:14px 12px 16px;border-radius:14px}
  .pots{grid-template-columns:repeat(3,1fr);gap:8px}
  .pot{padding:8px}
  .pot h3{font-size:.95rem}
  .pot [id^=v]{font-size:.85rem;line-height:1.4}
  .pot button{font-size:.82rem;padding:4px 2px}
  .status{gap:8px 12px;font-size:.9rem}
  th,td{padding:8px 6px;font-size:.92rem}
  table{min-width:0}
  .pager{flex-direction:column;gap:10px}
  .pager span:last-child{text-align:right}
  dl.info{grid-template-columns:5.5em 1fr}
}