:root{color-scheme:dark;font-family:'PingFang SC',system-ui,sans-serif;color:#efe4c6;background:#172c34}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:1px solid #a3b5ac55;border-radius:24px;background:#243d43;padding:10px 17px;min-height:44px}a{color:#edcf94;text-decoration:none}button:hover{background:#365459}button:focus-visible,a:focus-visible{outline:2px solid #f0ce86;outline-offset:4px}button:disabled{opacity:.45;cursor:default}header{position:fixed;top:max(16px,env(safe-area-inset-top));left:24px;right:24px;display:flex;align-items:center;justify-content:space-between;z-index:5;font-size:12px}nav{display:flex;gap:8px}.heading{position:absolute;top:100px;left:0;right:0;text-align:center;pointer-events:none}.eyebrow{font-size:10px;letter-spacing:.3em;color:#d4b980}h1{font-family:serif;font-size:38px;font-weight:400;letter-spacing:.08em;margin:14px 0}#intro{font-size:14px;color:#b7c9c2}canvas{position:absolute;inset:0;width:100%;height:100%;outline:none}.heading{z-index:1}#speech{position:absolute;top:calc(50% + 165px);left:50%;transform:translateX(-50%);margin:0;width:min(540px,90%);text-align:center;font-family:serif;font-size:16px;line-height:1.8;color:#dbd8bd;pointer-events:none}.guide{position:absolute;transform:translate(-50%,-100%);font-size:12px;background:#182d34ed;border-color:#ceba8266;max-width:240px;z-index:2;white-space:normal;box-shadow:0 6px 25px #0c202044}.guide:after{content:'↓';display:block;color:#e9c580}footer{position:absolute;bottom:max(14px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(540px,94%);text-align:center}#hint{font-size:13px;color:#e6d6b4;margin:8px 0}.controls{display:flex;gap:10px;justify-content:center}.controls button{touch-action:none;user-select:none;min-width:56px;min-height:54px}#action{background:#d8b875;color:#243a3c;min-width:150px}#keys,#saveWarning{font-size:10px;color:#a1b4ad;margin:9px 0 0}#ending{position:absolute;right:28px;top:110px;width:250px;padding:20px;background:#172d34ee;border:1px solid #bba66c66;border-radius:14px;line-height:1.7;font-size:13px}#ending strong{font:20px serif}#ending a{display:inline-block;padding:10px}#ending button{font-size:12px}dialog{background:#20383e;color:#eee0bf;border:1px solid #9b976c;border-radius:16px;padding:28px;max-width:min(430px,90vw);line-height:1.8}dialog::backdrop{background:#071a23b8}dialog button,dialog a{display:block;margin-top:12px;width:100%;text-align:center}[hidden]{display:none!important}@media(max-width:680px){header{left:14px;right:14px}nav{gap:5px}nav button{padding:9px 12px}.heading{top:88px}h1{font-size:27px;letter-spacing:.02em;margin:12px 0}#intro{font-size:12px;padding:0 22px}.eyebrow{font-size:9px}#speech{top:calc(50% + 135px);font-size:14px}#ending{top:190px;left:22px;right:22px;width:auto;padding:12px 16px;font-size:12px}#ending p{margin:5px 0}#ending strong{font-size:17px}#ending button{min-height:34px;padding:5px 12px}.controls{gap:7px}.controls button{min-width:50px;padding:10px 12px}#action{min-width:128px}.guide{max-width:190px;font-size:11px}#keys{font-size:9px}}@media(max-height:650px){.heading{top:65px}h1{font-size:22px;margin:5px}#intro,.eyebrow,#speech{display:none}#ending{top:70px}footer{bottom:5px}#keys{display:none}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
/* Once the garden has settled, give the ending its own space on narrow screens. */
@media(max-width:680px){body:has(#ending:not([hidden])) #intro{visibility:hidden}body:has(#ending:not([hidden])) #guide{display:none}}