#garden-walk{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;overflow:hidden;background:#172d44;color:#f0f5ee;overscroll-behavior:none}#garden-walk::backdrop{background:#08131e}#garden-canvas-host{position:absolute;inset:0}#garden-canvas-host canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab;outline-offset:-3px}#garden-canvas-host canvas:active{cursor:grabbing}.walk-vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(#0717208c,transparent 25%,transparent 55%,#05131dc4),linear-gradient(90deg,#06161d55,transparent 45%)}.walk-top{position:absolute;top:0;left:0;right:0;padding:27px 35px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.walk-brand{display:flex;align-items:center;gap:14px;font:23px Georgia,serif;text-shadow:0 2px 20px #001d24}.walk-brand>span{font-size:35px;color:#b7e6d2}.walk-brand small{font:7px 'DM Sans',sans-serif;letter-spacing:2px;display:block;margin-top:8px;color:#afc8c9}.walk-top-actions{display:flex;gap:10px;pointer-events:auto}.walk-top button,.walk-bottom button{background:#0c232a8f;border:1px solid #dcf8ed38;border-radius:7px;color:#d7e8e4;padding:11px 15px;font-size:10px;backdrop-filter:blur(10px)}#walk-sound[aria-pressed=true]{border-color:#b7e6d2;color:#b7e6d2;background:#23665d88}.walk-compass{position:absolute;top:110px;right:37px;border:1px solid #d3eee330;width:49px;height:49px;border-radius:50%;display:grid;place-items:center;pointer-events:none;background:#0c232a44}.walk-compass>span{position:absolute;top:4px;font-size:6px;letter-spacing:1px;color:#b7d4d1}.walk-compass i{font-style:normal;color:#cae9dc;font-size:23px;display:block;line-height:1;margin-top:7px}#walk-loading{position:absolute;inset:0;display:grid;place-items:center;background:#112b39;z-index:5;font:22px Georgia,serif;text-align:center;padding:35px;pointer-events:none}.walk-intro{position:absolute;left:35px;bottom:105px;width:300px;pointer-events:none;text-shadow:0 2px 22px #051c25}.walk-intro .eyebrow{font-size:7px;letter-spacing:2px}.walk-intro h2{font:45px/1.15 Georgia,serif;letter-spacing:-1px;font-weight:400;margin:17px 0}.walk-intro h2 em{color:#b7e6d2;font-weight:400}.walk-intro p{font-size:11px;line-height:1.9;color:#c2d6d3;max-width:270px}.walk-progress{display:flex;align-items:center;gap:10px;font-size:8px;letter-spacing:1.5px;color:#9ec0b7;margin:19px 0}.walk-progress>span:first-child{font-size:11px;color:#d3e8dd;letter-spacing:1px}.progress-line{height:2px;width:73px;background:#b7e6d233}.progress-line i{height:2px;display:block;width:0;background:#b7e6d2;transition:width .6s}.walk-intro button{pointer-events:auto;background:#b7e6d2;border:1px solid #d7f5e9;border-radius:7px;color:#163d35;padding:13px 18px;font-size:11px;font-weight:600;display:flex;gap:28px;align-items:center;box-shadow:0 4px 30px #02211d30;text-shadow:none}.walk-intro button:disabled{background:#24584f9c;color:#ddf1e5;border-color:#b7e6d244}.walk-center{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);display:flex;align-items:center;flex-direction:column;gap:8px;pointer-events:none;text-shadow:0 2px 9px #041d26}.walk-center>span{padding:9px 14px;border:1px solid #b7e6d24d;border-radius:6px;background:#0a2c32ad;backdrop-filter:blur(7px);font-size:10px;white-space:nowrap;color:#dcf1e7}.walk-center small{font-size:9px;color:#c0d9d0;letter-spacing:1px}.walk-center button{pointer-events:auto;margin-top:7px;padding:13px 17px;background:#e5f4de;border:0;border-radius:7px;color:#183e34;font-weight:600;font-size:12px;white-space:nowrap;box-shadow:0 0 35px #a9eab739}.walk-bottom{position:absolute;bottom:27px;left:35px;right:35px;display:flex;justify-content:space-between;align-items:center;font-size:9px;color:#b0c9c8;pointer-events:none}.walk-bottom button{pointer-events:auto}.walk-bottom>span{display:flex;align-items:center;gap:5px}.walk-bottom kbd{border:1px solid #d3eee337;border-radius:4px;padding:4px 6px;font:9px 'DM Sans',sans-serif;background:#0b252b66}.walk-desktop-hint{margin-left:7px}.walk-mobile-hint{display:none}.walk-dpad{position:absolute;right:35px;bottom:105px;display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,44px);gap:5px}.walk-dpad button{border:1px solid #b7e6d23d;background:#0a282d69;border-radius:8px;color:#d5ece0;font-size:21px;backdrop-filter:blur(8px);touch-action:none;user-select:none}.walk-dpad button:active{background:#74c3a76b}.walk-dpad button:first-child{grid-column:2}.walk-dpad button:nth-child(2){grid-column:1;grid-row:2}.walk-dpad button:nth-child(3){grid-column:2;grid-row:2}.walk-dpad button:nth-child(4){grid-column:3;grid-row:2}.walk-storage{position:absolute;right:35px;bottom:78px;font-size:7px;letter-spacing:.5px;color:#9abbb5;pointer-events:none}#walk-found{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);width:min(480px,88vw);border:1px solid #b7e6d267;border-radius:15px;background:#102d35ed;padding:28px;display:flex;gap:22px;box-shadow:0 15px 100px #00172188;backdrop-filter:blur(18px)}#walk-found>span{font-size:36px;color:#b7e6d2}#walk-found small{color:#b7e6d2;letter-spacing:2px;font-size:8px}#walk-found h3{font:32px Georgia,serif;margin:13px 0}#walk-found p{font-size:12px;line-height:1.8;color:#bed6d0}#walk-found button{border:1px solid #b7e6d266;border-radius:7px;background:#b7e6d218;padding:12px 15px;color:#d4eadc;font-size:11px;margin-top:10px}.journey-actions #save-place:not(:first-child){background:transparent;border:1px solid #b7e6d23d;color:#c5ded3;padding:16px 19px;gap:15px}
@media(max-width:700px){.walk-top{padding:21px 19px;align-items:start}.walk-brand{font-size:20px;gap:8px}.walk-brand>span{font-size:28px}.walk-brand small{font-size:5px;letter-spacing:1.1px}.walk-top-actions{gap:7px}.walk-top button{font-size:8px;padding:9px}.walk-top button span{display:none}#leave-garden{max-width:91px;line-height:1.5}.walk-compass{top:93px;right:22px;width:40px;height:40px}.walk-compass i{font-size:19px}.walk-intro{left:22px;bottom:123px;width:195px}.walk-intro h2{font-size:30px;letter-spacing:-.5px;margin:13px 0}.walk-intro .eyebrow{font-size:6px;letter-spacing:1.5px}.walk-intro p{font-size:9px;line-height:1.65;max-width:190px}.walk-intro button{font-size:10px;padding:12px 14px;gap:16px}.walk-progress{font-size:6px;letter-spacing:1px;gap:7px;margin:13px 0}.walk-progress>span:first-child{font-size:9px}.progress-line{width:47px}.walk-bottom{bottom:23px;left:22px;right:22px;font-size:7px;align-items:end}.walk-bottom kbd,.walk-desktop-hint{display:none}.walk-mobile-hint{display:inline;max-width:150px;line-height:1.6}.walk-bottom button{font-size:8px;padding:10px}.walk-dpad{right:18px;bottom:121px;grid-template-columns:repeat(3,35px);grid-template-rows:repeat(2,38px);gap:4px}.walk-dpad button{font-size:19px}.walk-storage{right:22px;bottom:83px;font-size:6px;max-width:116px;line-height:1.6;text-align:right}.walk-center>span{font-size:8px;padding:8px 10px}.walk-center small{font-size:8px}.walk-center button{font-size:10px;padding:12px}#walk-found{padding:23px;gap:14px;top:40%}#walk-found h3{font-size:28px}#walk-found p{font-size:11px}.journey-actions #save-place:not(:first-child){padding:14px;font-size:11px}}
@media(max-height:550px) and (min-width:701px){.walk-intro{bottom:78px}.walk-intro h2{font-size:32px}.walk-intro p{display:none}.walk-dpad{bottom:90px}.walk-brand small{display:none}.walk-top{padding:20px 30px}.walk-compass{top:85px}}
.walk-top{z-index:6}

/* Room for fingers and separate movement controls on phones. */
@media(max-width:700px){.walk-top{padding:16px;gap:12px;flex-wrap:wrap}.walk-top-actions{margin-left:auto}.walk-top button,.walk-bottom button,.walk-intro button,.walk-center button,#walk-found button{min-width:44px;min-height:44px}.walk-dpad{right:18px;bottom:92px;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,44px);gap:5px}.walk-intro{left:18px;right:18px;bottom:210px;width:auto}.walk-intro p{max-width:260px}.walk-storage{bottom:65px}.walk-bottom{left:18px;right:18px;bottom:14px}.walk-mobile-hint{max-width:140px}#walk-found{max-height:80dvh;overflow:auto;overflow-wrap:anywhere}.walk-compass{top:125px}}
@media(max-width:700px) and (max-height:720px){.walk-intro h2,.walk-intro>.eyebrow{display:none}.walk-intro p{margin:0;max-width:240px}.walk-intro{bottom:210px}.walk-progress{margin:9px 0}.walk-center{top:32%}}