@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#30433a;background:#e8eddf;font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow:hidden}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #dc8d39;outline-offset:5px}#garden{height:100svh;min-height:520px;position:relative;overflow:hidden}#viewport{position:absolute;inset:0}canvas{display:block;width:100%;height:100%;touch-action:none}.topbar{position:absolute;top:32px;left:38px;right:36px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.brand{display:flex;gap:12px;align-items:center}.brand-mark{font-size:42px;line-height:1;color:#577c53}h1{font-family:'Manrope',sans-serif;font-weight:800;font-size:24px;letter-spacing:-1px;margin:0}h1 span{display:block;font-family:'DM Sans',sans-serif;font-size:10px;letter-spacing:3.5px;font-weight:600;margin-top:5px;color:#72816d}.top-actions{display:flex;gap:20px;align-items:center;pointer-events:auto}.prototype{font-size:10px;font-weight:700;letter-spacing:1.8px;color:#687861}.round-button{position:relative;border:1px solid #ffffffb3;background:#fff9;width:44px;height:44px;border-radius:50%;color:#3c5847;font-size:25px;box-shadow:0 3px 15px #304b3410}.slash{position:absolute;width:22px;height:1.5px;background:#3c5847;transform:rotate(-45deg);left:11px;top:22px}.round-button[aria-pressed=true] .slash{display:none}.intro{position:absolute;left:44px;top:150px;pointer-events:none}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:#75816b}.intro h2{font-family:'Manrope',sans-serif;font-size:clamp(30px,3.4vw,50px);font-weight:600;line-height:1.15;letter-spacing:-2px;margin:18px 0 16px}.intro>p:last-child{font-size:15px;line-height:1.7;color:#74806a}.bottom-area{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);text-align:center}.actions{display:flex;gap:7px;padding:8px;background:#fffdf3ed;border:1px solid #fff;border-radius:23px;box-shadow:0 12px 40px #34452c18;backdrop-filter:blur(14px)}.action{min-width:108px;padding:12px 20px;border:0;border-radius:16px;background:transparent;display:flex;flex-direction:column;align-items:center;gap:6px;color:#5d6d53;font-size:13px;font-weight:600;transition:background .2s,transform .2s}.action>span:first-child{font-size:23px;line-height:25px}.action:hover{background:#edf0df;transform:translateY(-2px)}.action.primary{background:#3f674d;color:#fffbed;box-shadow:0 4px 10px #3f674d25}.action.primary:hover{background:#31553d}.action[aria-pressed=true]:not(.primary){background:#e5ecd8}.hint{margin:14px 0 0;white-space:nowrap;font-size:12px;color:#829075}.robot-card{position:absolute;left:38px;bottom:44px;display:flex;align-items:center;gap:12px;padding:14px 18px 14px 12px;border:1px solid #fff9;background:#f9f9edb8;border-radius:20px;backdrop-filter:blur(8px)}.portrait{width:47px;height:48px;background:#e1d9ba;border-radius:18px;display:grid;place-items:center;border-bottom:4px solid #c9c2a4}.portrait span{background:#274a43;color:#9cdfb4;border-radius:10px;padding:5px;font-size:16px;white-space:nowrap}.robot-card .eyebrow{font-size:8px;letter-spacing:1.5px}.robot-card h3{font-size:20px;margin:2px 0;font-weight:700}.robot-card h3 span{vertical-align:middle;font-size:10px;font-weight:500;margin-left:8px;background:#e0e8d4;padding:4px 7px;border-radius:6px;color:#60744e}.robot-card p{font-size:11px;margin:5px 0 0;color:#78816d}.view-button{position:absolute;right:36px;bottom:55px;background:#ffffffa6;border:1px solid #fff;border-radius:14px;width:45px;height:45px;font-size:27px;color:#5c7558}.bubble{position:absolute;left:50%;top:31%;transform:translate(-50%,-100%);padding:12px 19px;background:#fffff4f2;box-shadow:0 7px 25px #3a48311a;border:1px solid #fff;border-radius:16px;font-size:13px;color:#627054;pointer-events:none;transition:opacity .3s;max-width:260px;text-align:center}.bubble:after{content:'';position:absolute;bottom:-8px;left:50%;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #fffff4f2}.loading,.error{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#edf0e2;text-align:center;padding:30px;z-index:20}.loading h2,.error h2{font:600 25px 'Manrope',sans-serif;letter-spacing:-.8px}.loading p{color:#78856c}.loader{font-size:65px;color:#628453;animation:turn 6s linear infinite}.error p{max-width:420px;line-height:1.6}.error button{border:0;border-radius:10px;padding:13px 24px;background:#3f674d;color:white}[hidden]{display:none!important}@keyframes turn{to{transform:rotate(360deg)}}
@media(max-width:1100px){.robot-card{bottom:180px;left:24px;padding:10px}.intro{top:125px;left:28px}.intro h2{font-size:34px}.topbar{left:26px;right:26px}.intro .eyebrow{font-size:8px}.intro>p:last-child{font-size:13px}}
@media(max-width:650px){#garden{min-height:480px}.topbar{top:22px;left:20px;right:20px}h1{font-size:21px}.brand-mark{font-size:32px}h1 span{font-size:8px;letter-spacing:3px}.prototype{display:none}.round-button{height:38px;width:38px}.slash{left:8px;top:19px}.intro{top:104px;left:23px}.intro h2{font-size:28px;margin-top:9px;letter-spacing:-1px}.intro>p:last-child{display:none}.intro .eyebrow{font-size:8px;letter-spacing:1.4px}.bottom-area{bottom:20px;width:calc(100% - 32px);max-width:460px}.actions{justify-content:space-between;border-radius:20px;padding:6px;gap:2px}.action{min-width:0;flex:1;padding:12px 8px;font-size:12px}.robot-card{left:20px;bottom:154px;padding:8px 12px;gap:9px}.portrait{width:36px;height:39px;border-radius:12px}.portrait span{font-size:12px}.robot-card h3{font-size:17px}.robot-card p{display:none}.robot-card .eyebrow{font-size:7px}.view-button{right:20px;bottom:166px;height:38px;width:38px}.desktop-hint{display:none}.hint{font-size:11px}.bubble{font-size:12px;padding:10px 13px;max-width:210px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
