:root { color-scheme: light dark; --bg:#f6f5f3; --ink:#29262b; --muted:#706a72; --line:#e2dde1; --soft:#f0e8ec; --accent:#823849; --hover:#eee9e440; --stem:#8b997c; --leaf:#a9b493; --white-head:#dedbd4; --white-bristle:#b8b5ab; --green-head:#8d9f70; --green-bristle:#718a58; }
@media(prefers-color-scheme:dark){:root{--bg:#17151a;--ink:#e8e3e7;--muted:#b6aeb8;--line:#403a43;--soft:#302730;--accent:#e6a4b6;--hover:#30273050;--stem:#7d8e6d;--leaf:#657854;--white-head:#d8d4ca;--white-bristle:#b5b3a5;--green-head:#9eb57e;--green-bristle:#7c9b62}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}
.language-switch-host{position:absolute;top:22px;right:max(22px,calc((100vw - 1080px)/2));z-index:2}
.language-switch-host .blanc-language-switch{font-size:15px}
main{min-height:100vh;min-height:100svh;max-width:1100px;margin:auto;padding:90px 24px 48px;display:flex;flex-direction:column;justify-content:center}
.portal-heading{margin:0 0 20px;text-align:center}
h1{margin:0;font-family:Georgia,"Times New Roman","Songti SC","Noto Serif CJK SC",serif;font-size:clamp(25px,3.5vw,38px);font-weight:500;line-height:1.55;letter-spacing:.025em;overflow-wrap:anywhere}
.grass-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:end;margin:0;padding:0}
.grass-choice{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:0;padding:12px 10px 18px;border:0;border-radius:110px 110px 18px 18px;background:transparent;color:var(--ink);text-align:center;text-decoration:none;cursor:pointer}
.grass-choice:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.grass-choice:hover{text-decoration:none;background:var(--hover)}
.grass-choice:disabled{cursor:default}
.grass-choice:disabled:hover{background:transparent}
.grass-art{display:block;width:min(100%,190px);height:300px}
.grass-art svg{display:block;width:100%;height:100%;overflow:visible}
.grass-choice.white{--head:var(--white-head);--bristle:var(--white-bristle)}
.grass-choice.green{--head:var(--green-head);--bristle:var(--green-bristle)}
.grass-stem{fill:none;stroke:var(--stem);stroke-width:1.8;stroke-linecap:round}
.grass-leaf{fill:var(--leaf);opacity:.7}
.grass-seed{fill:var(--head);stroke:var(--bristle);stroke-width:.7}
.grass-bristles{fill:none;stroke:var(--bristle);stroke-width:.85;stroke-linecap:round;opacity:.86}
.grass-axis{fill:none;stroke:var(--bristle);stroke-width:.8;opacity:.75}
.grass-sway{transform-box:fill-box;transform-origin:50% 100%;animation:breeze 6s ease-in-out infinite}
.grass-choice:nth-child(2) .grass-sway{animation-duration:6.7s;animation-delay:-2s}
.grass-choice:nth-child(3) .grass-sway{animation-duration:5.8s;animation-delay:-3.1s}
.grass-choice:nth-child(4) .grass-sway{animation-duration:6.4s;animation-delay:-1.4s}
.grass-name{display:block;margin-top:4px;font-size:22px;font-weight:500;line-height:1.6;letter-spacing:.04em}
.grass-mode{display:block;margin-top:2px;font-size:16px;color:var(--muted)}
.grass-status{display:block;min-height:24px;margin-top:3px;font-size:14px;color:var(--muted)}
.grass-choice:disabled .grass-art{opacity:.62}
.grass-choice:disabled .grass-name{color:var(--muted)}
.grass-choice:disabled .grass-mode{opacity:.8}
@keyframes breeze{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2.2deg)}}
@keyframes greet{0%{transform:rotate(-2deg)}35%{transform:rotate(7deg) translateY(-3px)}70%{transform:rotate(-4deg)}100%{transform:rotate(1deg) translateY(-2px)}}
@media(hover:hover){.grass-choice:not(:disabled):hover .grass-sway{animation:greet 1s ease-in-out both}}
.grass-choice:not(:disabled):focus-visible .grass-sway{animation:greet 1s ease-in-out both}
.grass-choice:not(:disabled):active .grass-sway{animation:none;transform:rotate(8deg) translateY(-5px)}
@media(max-width:640px){main{padding:88px 16px 28px;justify-content:flex-start}.portal-heading{margin-bottom:10px}.grass-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px}.grass-choice{padding:0 8px 12px}.grass-art{width:150px;height:220px}.grass-name{font-size:20px;margin-top:0}.grass-status{font-size:14px;min-height:22px}.language-switch-host{top:16px;right:16px}}
@media(max-width:360px){h1{font-size:23px}.grass-art{height:200px;width:135px}.grass-grid{gap:2px}.grass-name{font-size:19px}}
@media(prefers-reduced-motion:reduce){.grass-sway,.grass-choice:not(:disabled):hover .grass-sway,.grass-choice:not(:disabled):focus-visible .grass-sway,.grass-choice:not(:disabled):active .grass-sway{animation:none!important;transform:none!important}}