@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600&display=swap');

:root { color-scheme: dark; --bg:#11130f; --ink:#e7eadb; --muted:rgba(213,220,195,.52); --faint:rgba(213,220,195,.18); --moss:#9bbf79; --glow:#c9ed9d; --amber:#c7aa73; --mono:'DM Mono',monospace; --sans:'Manrope','Microsoft YaHei',sans-serif; }
* { box-sizing:border-box; }
html,body,#app { min-height:100%; }
body { margin:0; overflow:hidden; background:radial-gradient(circle at 52% 60%,#263122 0,#171b14 27%,var(--bg) 62%); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; }
button { font:inherit; color:inherit; }
.moss-canvas,.noise { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; }
.moss-canvas { opacity:.94; }
.noise { z-index:3; opacity:.045; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); }
.shell { position:relative; z-index:4; min-height:100svh; display:flex; flex-direction:column; padding:28px 42px 24px; }
.topbar,.footer { display:flex; justify-content:space-between; align-items:center; font:10px/1 var(--mono); letter-spacing:.16em; color:var(--muted); }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); }.brand small { color:var(--muted); letter-spacing:.08em; }.brand-dot,.status-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--moss); box-shadow:0 0 12px var(--moss); }.status { display:flex; align-items:center; gap:9px; }.status i { width:1px; height:12px; background:var(--faint); margin:0 5px; }
.content { width:min(100%,980px); flex:1; margin:auto; position:relative; display:grid; grid-template-columns:240px minmax(340px,1fr) 200px; align-items:center; gap:32px; }.intro { align-self:start; margin-top:17vh; }.eyebrow { color:var(--amber); font:10px/1 var(--mono); letter-spacing:.2em; margin:0 0 22px; }.intro h1 { font-size:clamp(42px,5.2vw,74px); line-height:.98; letter-spacing:-.085em; font-weight:500; margin:0; }.intro em { color:var(--moss); font-style:normal; text-shadow:0 0 32px rgba(155,191,121,.24); }.return-note { color:var(--muted); font-size:12px; line-height:1.7; margin:25px 0 0; max-width:190px; }
.plant-space { position:relative; min-height:620px; display:grid; place-items:center; cursor:crosshair; }.halo { position:absolute; width:390px; height:390px; border-radius:50%; background:radial-gradient(circle,rgba(144,188,107,.15),transparent 64%); filter:blur(12px); animation:breathe 6s ease-in-out infinite; }.seed-ritual { position:relative; text-align:center; color:var(--muted); }.seed-button { width:92px; height:92px; display:grid; place-items:center; margin:auto; border:1px solid rgba(184,211,143,.5); border-radius:50%; background:rgba(115,144,76,.08); box-shadow:0 0 28px rgba(155,191,121,.16), inset 0 0 28px rgba(155,191,121,.08); cursor:pointer; transition:.5s ease; }.seed-button:hover { transform:scale(1.06); border-color:var(--glow); box-shadow:0 0 45px rgba(155,191,121,.32),inset 0 0 28px rgba(155,191,121,.14); }.seed-button span { width:14px; height:19px; border-radius:55% 45% 55% 45%; background:var(--moss); transform:rotate(35deg); box-shadow:0 0 18px var(--moss); }.seed-ritual p { margin:23px 0 8px; font-size:13px; }.seed-ritual small { font:10px var(--mono); color:rgba(213,220,195,.32); }.plant-overlay { position:absolute; bottom:5px; width:250px; text-align:center; }.health-line { display:flex; justify-content:space-between; font:10px var(--mono); letter-spacing:.12em; color:var(--muted); }.health-line strong { color:var(--moss); font-weight:400; }.health-bar { height:2px; margin:10px 0 14px; background:var(--faint); }.health-bar span { display:block; height:100%; background:linear-gradient(90deg,var(--amber),var(--moss)); box-shadow:0 0 12px rgba(155,191,121,.6); transition:width 1s ease; }.plant-overlay p { min-height:36px; margin:0 0 15px; color:var(--muted); font-size:11px; line-height:1.6; }.tend-button { border:1px solid rgba(155,191,121,.4); background:rgba(155,191,121,.07); padding:10px 15px; border-radius:999px; color:var(--moss); cursor:pointer; font-size:11px; transition:.35s ease; }.tend-button:hover { background:rgba(155,191,121,.16); box-shadow:0 0 22px rgba(155,191,121,.18); }.tend-button span { color:var(--muted); margin-left:6px; font-size:9px; }
.memory-card { align-self:end; margin-bottom:15vh; border-left:1px solid rgba(155,191,121,.45); padding-left:17px; color:var(--muted); }.card-label { color:var(--moss); font:9px var(--mono); letter-spacing:.1em; }.memory-card p { margin:13px 0 24px; color:var(--ink); font-size:12px; line-height:1.7; }.memory-card dl { margin:0; display:grid; gap:9px; font:9px var(--mono); }.memory-card dl div { display:flex; justify-content:space-between; gap:10px; }.memory-card dt { color:rgba(213,220,195,.3); }.memory-card dd { margin:0; color:rgba(213,220,195,.65); text-align:right; }.footer { color:rgba(213,220,195,.27); }.footer span:last-child { color:rgba(155,191,121,.5); }
@keyframes breathe { 0%,100% { transform:scale(.84); opacity:.45; } 50% { transform:scale(1.12); opacity:1; } }
@media(max-width:800px) { body { overflow:auto; }.shell { padding:22px 20px 18px; }.content { grid-template-columns:1fr; gap:0; padding:50px 0 30px; }.intro { margin:0; text-align:center; }.intro h1 { font-size:58px; }.return-note { margin:18px auto 0; max-width:250px; }.plant-space { min-height:500px; }.memory-card { align-self:auto; margin:0 auto 20px; width:220px; }.footer { font-size:8px; }.footer span:last-child { display:none; }.status { font-size:8px; }.brand small { display:none; } }
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { animation-duration:.001ms!important; transition-duration:.001ms!important; } }