:root{font-family:Arial,Helvetica,sans-serif;color:#fffdf4;background:#8b9832;font-synthesis:none}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}main{position:relative;width:100%;height:100%;min-height:320px;isolation:isolate;touch-action:none}.landscape,#meadow,.shade{position:absolute;inset:0;width:100%;height:100%}.landscape{object-fit:cover;object-position:center 54%;transition:filter 1.5s;z-index:-3}#meadow{z-index:-2;outline:none}.shade{z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(51,31,19,.18),transparent 30%,transparent 75%,rgba(17,33,6,.27))}header{position:absolute;top:30px;left:38px;right:38px;display:flex;align-items:center;justify-content:space-between;gap:20px;z-index:4}.wordmark{font-size:24px;letter-spacing:-1.1px;font-weight:700;text-decoration:none;color:#fffdf4;text-shadow:0 1px 14px #32230633;flex:1}.wordmark span{color:#fbe7a7}.header-spacer{flex:1}.times{display:flex;gap:3px;padding:6px;border:1px solid #ffffff66;border-radius:100px;background:#ffffff38;backdrop-filter:blur(22px);box-shadow:0 4px 25px #3f2c1210}button{border:0;background:transparent;font:inherit;font-size:15px;font-weight:500;color:#4b3b2c;display:flex;align-items:center;gap:9px;padding:12px 19px;border-radius:100px;cursor:pointer;transition:background .25s,color .25s,box-shadow .25s}button[aria-pressed=true]{background:#fffdf7;color:#29291f;box-shadow:0 3px 12px #59421c14}button:hover{background:#ffffff70}button[aria-pressed=true]:hover{background:#fff}button:focus-visible,.wordmark:focus-visible{outline:2px solid #fff;outline-offset:5px}button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.intro{position:absolute;top:17%;left:0;right:0;text-align:center;pointer-events:none;transition:opacity 1s;z-index:2;text-shadow:0 1px 14px #56452230}h1{font-size:clamp(28px,3vw,44px);font-weight:400;letter-spacing:-1.6px;margin:0 0 10px}p{margin:0;font-size:15px;letter-spacing:.1px;opacity:.9}.interacting .intro{opacity:0}.hand{position:absolute;left:50%;top:78%;width:47px;height:47px;pointer-events:none;transform:translate(-40%,-20%) rotate(-10deg);filter:drop-shadow(0 3px 3px #19220066);z-index:3;opacity:0;transition:opacity .2s}.hand svg{width:100%;height:100%;fill:#fffdf9;stroke:#263025;stroke-width:2.5;stroke-linejoin:round}.hand.visible{opacity:1}footer{position:absolute;bottom:25px;left:30px;right:30px;text-align:center;font-size:14px;letter-spacing:.2px;pointer-events:none;color:#fffcdfd9;text-shadow:0 1px 7px #14320855}.touch-hint{display:none}body.night .landscape{filter:brightness(.35) saturate(.65) hue-rotate(30deg)}body.night button{color:#fffde8}body.night button[aria-pressed=true]{color:#29291f}body.morning .landscape{filter:hue-rotate(8deg) saturate(.84) brightness(1.1)}@media(max-width:700px){header{top:22px;left:22px;right:22px;flex-direction:column;gap:20px}.wordmark{font-size:23px}.header-spacer{display:none}.times{padding:5px}button{font-size:14px;padding:11px 14px;gap:7px}button svg{width:18px;height:18px}.intro{top:25%}h1{font-size:30px;letter-spacing:-1px}footer{bottom:23px;font-size:13px}.landscape{object-position:54% 50%}}@media(pointer:coarse){.hand{display:none}footer>span:first-child{display:none}.touch-hint{display:inline}.intro p{font-size:0}.intro p:after{content:'Drag your finger. Touch the grass.';font-size:15px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}.intro{opacity:1!important}}

.intro{top:auto;bottom:30px}.intro p{font-size:14px}@media(max-width:700px){.intro{top:auto;bottom:28px}}

.contract{position:absolute;z-index:5;top:max(16px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);width:max-content;padding:9px 16px;border:1px solid #ffffff40;border-radius:14px;background:#24331965;backdrop-filter:blur(14px);text-align:center;font-size:14px;line-height:1.5;color:#fff;user-select:text;touch-action:auto;overflow-wrap:anywhere;text-shadow:0 1px 4px #16240970}
.contract code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:inherit}.contract span{font-weight:700}header{top:76px}.hand{will-change:transform}.landscape{object-position:center}
@media(max-width:700px){.contract{top:max(12px,env(safe-area-inset-top));padding:8px 12px;width:calc(100% - 28px)}header{top:100px;gap:15px}.intro p{font-size:14px}}
@media(pointer:coarse){.intro p{font-size:0}}