*{box-sizing:border-box}html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;background:#000}body{background:#000;color:#394336;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}#garden{position:fixed;inset:0;margin:0;padding:0;width:100%;height:var(--garden-viewport-height,100vh);overflow:hidden}#garden>canvas{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;padding:0;border:0;touch-action:none}@supports(height:100dvh){html,body{height:100dvh}#garden{height:100dvh}}header{position:absolute;top:34px;left:40px;pointer-events:none;text-shadow:0 1px 20px #fff8dc9c}.eyebrow{margin:0 0 9px;font-size:10px;letter-spacing:2.8px;text-transform:uppercase;color:#65705a}h1{font:400 clamp(27px,3vw,43px)/1.15 Georgia,serif;letter-spacing:-1.2px;margin:0}.intro{font:14px/1.5 Georgia,serif;color:#66705a;margin:12px 0}button,input{font:inherit}button{cursor:pointer;border:0;color:inherit}button:focus-visible,input:focus-visible{outline:2px solid #687950;outline-offset:4px}footer{position:absolute;bottom:23px;left:50%;transform:translateX(-50%);text-align:center;width:max-content;max-width:96vw}.view-controls{display:flex;gap:4px;padding:6px;border:1px solid #fffae8aa;background:#f7f3e5db;backdrop-filter:blur(12px);box-shadow:0 5px 30px #34421c12;border-radius:32px}.view-controls button{font-size:11px;padding:10px 15px;border-radius:23px;background:transparent;white-space:nowrap}.view-controls button:hover{background:#e7e9d9}.view-controls button[aria-pressed=true]{background:#526247;color:#fffaf0}.gesture{font-size:10px;color:#45533c;margin:10px 0 0;text-shadow:0 1px 5px #fff5ce}.sound-panel{position:absolute;right:28px;top:30px;width:265px}#sound-toggle{display:block;margin-left:auto;border-radius:24px;padding:10px 16px;background:#f7f3e5db;border:1px solid #fff9e8aa;font-size:11px;backdrop-filter:blur(12px)}#sound-toggle span{font-size:15px;margin-right:6px}#sound-controls{background:#f7f3e5f2;border:1px solid #fff9e8;border-radius:18px;padding:18px 20px;margin-top:9px;box-shadow:0 8px 40px #34421c17}.sound-heading{font:17px Georgia,serif;margin:0 0 20px}.channel{display:grid;grid-template-columns:1fr auto;gap:8px;margin:0 0 18px}.channel label{font-size:12px}.channel button{font-size:10px;background:#e3e6d7;padding:3px 9px;border-radius:10px}.channel button[aria-pressed=true]{background:#526247;color:white}.channel input{grid-column:1/-1;width:100%;accent-color:#64774f;height:4px;margin:5px 0}.audio-status{grid-column:1/-1;font-size:10px;color:#78816d}.start-sound{background:#526247;color:#fffaf0;width:100%;padding:10px;border-radius:20px;font-size:11px}.audio-note{font-size:10px;line-height:1.6;color:#78816d;margin:12px 0 0}#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#eee8d9;z-index:4;font:25px Georgia,serif;transition:opacity .6s}#loading span{font:12px system-ui;margin-top:16px;color:#737d68}#loading.done{opacity:0;pointer-events:none}#error{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:25px;border-radius:16px;background:#fff8e8;max-width:500px;font-size:14px;z-index:5}[hidden]{display:none!important}@media(max-width:700px){header{top:25px;left:23px}h1{font-size:29px}.eyebrow{font-size:9px;letter-spacing:2px}.intro{font-size:12px;max-width:230px} .sound-panel{top:145px;right:17px}#sound-toggle{font-size:10px;padding:8px 12px}footer{bottom:18px}.view-controls button{padding:10px 11px;font-size:10px}.gesture{font-size:9px}}

@media(min-width:701px){footer{left:40px;transform:none;text-align:left}.gesture{padding-left:8px}}


/* Unobtrusive branding and idle HUD. Loading/error feedback stays visible. */
.garden-logo{display:block;width:220px;max-width:34vw;height:auto}
.hud{opacity:1;transition:opacity .35s ease}
body.hud-hidden .hud{opacity:0;pointer-events:none;transition-duration:1.8s}
@media(max-width:700px){.garden-logo{width:170px;max-width:42vw}.view-controls button{padding:9px 10px}}


.time-control{position:absolute;right:28px;top:80px;z-index:1}.time-control select{font:11px system-ui;color:#45533c;background:#f7f3e5ed;border:1px solid #fff9e8aa;border-radius:20px;padding:9px 12px;cursor:pointer;max-width:185px}.time-control select:focus-visible{outline:2px solid #687950;outline-offset:3px}.sound-panel{z-index:3}@media(max-width:700px){.time-control{right:17px;top:188px}.time-control select{font-size:10px}}
/* Full-screen title, loading progress and gentle garden reveal. */
#loading{background:#000;z-index:10;transition:opacity 3.2s ease;overflow:hidden}
#loading.done{opacity:0;pointer-events:none}
.title-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;width:100%;padding:30px}
.title-logo{width:min(500px,76vw);height:auto;display:block}
.title-actions{height:88px;min-width:250px;text-align:center}
#load-progress{width:220px;height:3px;margin:12px auto 0;background:#d5c78b24;border-radius:4px;overflow:hidden}
#progress-fill{display:block!important;width:100%;height:100%;margin:0!important;background:#e7d797;transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
#loading-message{font:11px system-ui;color:#b5ab8c;margin:18px 0 0;letter-spacing:.6px}
#language-choice{display:flex;gap:18px;justify-content:center}
#language-choice button{background:transparent;color:#e9dfb9;border:1px solid #d5c78b65;border-radius:24px;padding:12px 25px;min-width:115px;font:14px system-ui;transition:background .25s,color .25s}
#language-choice button:hover{background:#d5c78b22;color:#fff3ca}
#language-choice button:focus-visible{outline:2px solid #e7d797;outline-offset:5px}
body.title-open .hud{opacity:0;pointer-events:none}
.hud{transition:opacity .35s ease}
#sound-toggle [data-i18n]{font-size:11px;margin:0}
@media(max-width:700px){#sound-toggle [data-i18n]{font-size:10px}.title-content{gap:8px}.title-logo{width:min(430px,85vw)}.title-actions{min-width:220px}#language-choice button{padding:11px 20px;min-width:105px}}
.view-controls{flex-wrap:wrap;justify-content:center;max-width:96vw}

/* Safe areas inset controls only; the scene continues beneath display cutouts. */
header{top:calc(34px + env(safe-area-inset-top,0px));left:calc(40px + env(safe-area-inset-left,0px))}
.sound-panel{top:calc(30px + env(safe-area-inset-top,0px));right:calc(28px + env(safe-area-inset-right,0px))}
.time-control{top:calc(80px + env(safe-area-inset-top,0px));right:calc(28px + env(safe-area-inset-right,0px))}
footer{bottom:calc(23px + env(safe-area-inset-bottom,0px));max-width:calc(96vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px))}
@media(min-width:701px){footer{left:calc(40px + env(safe-area-inset-left,0px))}}
@media(max-width:700px){header{top:calc(25px + env(safe-area-inset-top,0px));left:calc(23px + env(safe-area-inset-left,0px))}.sound-panel{top:calc(145px + env(safe-area-inset-top,0px));right:calc(17px + env(safe-area-inset-right,0px))}.time-control{top:calc(188px + env(safe-area-inset-top,0px));right:calc(17px + env(safe-area-inset-right,0px))}footer{bottom:calc(18px + env(safe-area-inset-bottom,0px))}}

/* Initial phone suggestion is confined to the black title overlay. */
#orientation-suggestion{width:min(100%,390px);padding:24px;text-align:center;color:#e9dfb9;font-family:system-ui,sans-serif}
#orientation-suggestion p{font-size:clamp(17px,4.5vw,21px);line-height:1.5;margin:8px 0}
#orientation-suggestion p[lang=en]{font-size:clamp(13px,3.5vw,16px);color:#c7bc96}
.rotate-phone{display:block;width:82px;height:82px;margin:0 auto 24px;fill:none;stroke:#ddcc8f;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.phone-outline{transform-origin:48px 48px;animation:phone-turn 4.8s ease-in-out infinite}
.rotation-arrow{opacity:.5}
@keyframes phone-turn{0%,15%{transform:rotate(0)}55%,80%{transform:rotate(90deg)}100%{transform:rotate(0)}}
#continue-portrait{display:flex;flex-direction:column;gap:4px;align-items:center;margin:30px auto 0;padding:11px 18px;border:1px solid #d5c78b55;border-radius:24px;background:transparent;color:#c7bc96;font:12px/1.4 system-ui;cursor:pointer}
#continue-portrait span{font:inherit!important;color:inherit!important;margin:0!important}
@media(prefers-reduced-motion:reduce){.phone-outline{animation:none;transform:rotate(35deg)}}

@media(max-height:500px){.title-content{gap:8px;padding:12px}.title-logo{width:auto;max-width:min(70vw,440px);max-height:calc(100vh - 145px);max-height:calc(100dvh - 145px);object-fit:contain}.title-actions{height:72px}}

body.garden-backgrounded .phone-outline{animation-play-state:paused}