@font-face { font-family: Pinyon; src: url("assets/garden/pinyon-script.ttf") format("truetype"); font-display: swap; }
#gardenScene { position: relative; isolation: isolate; width: 100%; height: 100svh; overflow: hidden; background: rgb(37, 142, 174); }
#gardenScene .world { position: absolute; left: var(--art-x); top: var(--art-y); width: var(--art-w); height: var(--art-h); }
#gardenScene .scene-art { display: block; width: 100%; height: 100%; user-select: none; pointer-events: none; filter: saturate(0.88) contrast(0.94) brightness(0.95); }
#gardenScene .sky-window { position: absolute; inset: 0px; overflow: hidden; pointer-events: none; mask-image: linear-gradient(rgb(0, 0, 0) 0%, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0.733) 40%, transparent 52%); }
#gardenScene .sky-flow { display: block; width: 100%; height: 100%; filter: saturate(0.88) contrast(0.94) brightness(0.95); transform-origin: 50% 26%; animation: 65s ease-in-out 0s infinite alternate none running cloud-drift; will-change: transform; }
@keyframes cloud-drift { 
  0% { transform: translateX(-1.2%) scale(1.065); }
  100% { transform: translateX(2.4%) scale(1.065); }
}
#gardenScene .light-leak, #gardenScene .film-grain, #gardenScene .scene-vignette, #gardenScene .plane-layer, #gardenScene .butterfly-layer, #gardenScene .grass-layer { position: absolute; inset: 0px; pointer-events: none; }
#gardenScene .light-leak { z-index: 1; background: radial-gradient(at 27% 13%, rgba(255, 253, 230, 0.098) 0%, transparent 30%), linear-gradient(160deg, rgba(255, 255, 255, 0.027) 10%, transparent 50%, rgba(29, 59, 35, 0.04) 100%); mix-blend-mode: screen; }
#gardenScene .scene-vignette { z-index: 7; box-shadow: rgba(9, 38, 45, 0.17) 0px 0px 150px inset; background: linear-gradient(transparent 82%, rgba(8, 28, 43, 0.25)); }
#gardenScene .film-grain { z-index: 8; opacity: 0.11; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23ffffff' d='M0 0h160v160H0z' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
#gardenScene .garden-wordmark { position: absolute; z-index: 3; left: 50%; top: 5.5%; transform: translateX(-50%); text-align: center; pointer-events: none; text-shadow: rgba(22, 95, 119, 0.125) 0px 2px 12px; }
#gardenScene .garden-wordmark h1 { margin: 0px; font-weight: 400; display: flex; flex-direction: column; align-items: center; }
#gardenScene .garden-wordmark__script { font-family: Pinyon, "Snell Roundhand", cursive; font-size: clamp(112px, 14vw, 200px); line-height: 0.8; letter-spacing: -0.065em; transform: rotate(-7deg) translateX(-0.08em); position: relative; z-index: 1; margin-bottom: -0.115em; }
#gardenScene .garden-wordmark__tv { position: relative; font-family: Didot, "Bodoni 72", Georgia, serif; font-size: clamp(114px, 12.6vw, 182px); font-weight: 400; line-height: 0.83; letter-spacing: -0.1em; padding-right: 0.05em; }
#gardenScene .garden-wordmark__star { position: absolute; font-family: Georgia, serif; font-size: 0.23em; letter-spacing: 0px; right: -0.63em; top: 0.08em; transform: rotate(12deg); }
#gardenScene .garden-wordmark p { margin: 17px 0px 0px; font-size: 11px; font-style: italic; letter-spacing: 0.15em; white-space: nowrap; opacity: 0.88; }
#gardenScene .butterfly-layer { z-index: 5; }
#gardenScene .butterfly { position: absolute; left: 0px; top: 0px; width: var(--size,44px); height: var(--size,44px); border: 0px; background: none; padding: 0px; pointer-events: auto; cursor: pointer; filter: drop-shadow(rgba(37, 59, 52, 0.19) 1px 3px 2px) saturate(0.78) brightness(0.9); will-change: transform; touch-action: manipulation; }
#gardenScene .butterfly__wing { position: absolute; top: 0px; width: 50%; height: 100%; background-image: url("assets/garden/monarch.webp"); background-size: 200% 100%; backface-visibility: visible; animation: wing-flap var(--flutter,.43s) ease-in-out var(--delay,0s) infinite alternate; }
#gardenScene .butterfly__wing--left { left: 0px; background-position: left center; transform-origin: right 58%; }
#gardenScene .butterfly__wing--right { right: 0px; background-position: right center; transform-origin: left 58%; }
#gardenScene .butterfly__body { position: absolute; top: 36%; left: 48%; width: 4%; height: 39%; background: rgb(50, 43, 32); border-radius: 50%; }
#gardenScene .butterfly:focus-visible { border-radius: 50%; }
#gardenScene .butterfly.is-near .butterfly__wing { animation-duration: 0.16s; }
#gardenScene .butterfly.is-near { filter: drop-shadow(rgba(37, 59, 52, 0.19) 1px 3px 2px) saturate(0.95); }
@keyframes wing-flap { 
  0% { transform: scaleX(0.24) rotateY(12deg); }
  100% { transform: scaleX(1) rotateY(0deg); }
}
#gardenScene .plane-layer { z-index: 2; }
#gardenScene .plane { position: absolute; top: var(--plane-top,24%); left: -160px; width: var(--plane-width,clamp(64px,8.3vw,112px)); opacity: 0; transform-origin: 55% 52%; will-change: transform; }
#gardenScene .plane svg { display: block; width: 100%; filter: drop-shadow(rgba(24, 75, 102, 0.24) 0px 0.5px 0.7px); }
#gardenScene .plane__trail { position: absolute; right: 89%; top: 52%; width: 170px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 253, 239, 0.333)); filter: blur(0.35px); }
#gardenScene .plane.is-flying { animation: 18s linear 0s 1 normal forwards running plane-across; }
@keyframes plane-across { 
  0% { opacity: 0; transform: translate(0px, 0px) rotate(var(--plane-heading,-14deg)) scale(1); }
  7% { opacity: 0.88; }
  50% { transform: translate(calc(165px + 50vw), calc(-.5 * var(--plane-rise,240px))) rotate(var(--plane-heading,-14deg)) scale(0.92); }
  88% { opacity: 0.8; }
  100% { opacity: 0; transform: translate(calc(330px + 100vw), calc(-1 * var(--plane-rise,240px))) rotate(var(--plane-heading,-14deg)) scale(0.82); }
}
#gardenScene .grass-layer { z-index: 4; width: 100%; height: 100%; touch-action: pan-y; }
#gardenScene .tv-screen { position: absolute; left: 45.05%; top: 64.72%; width: 12.18%; height: 14.12%; border-radius: 10% / 8%; overflow: hidden; transform: rotate(0.8deg); pointer-events: none; background: linear-gradient(130deg, rgba(150, 229, 242, 0.1), transparent 40%); box-shadow: rgba(3, 20, 19, 0.314) 0px 0px 9px inset; transition: background-color 0.25s, filter 0.25s; }
#gardenScene .tv-screen::before { content: ""; position: absolute; inset: 0px; background: repeating-linear-gradient(transparent 0px, transparent 2px, rgba(9, 40, 37, 0.333) 3px); opacity: 0.36; }
#gardenScene .tv-screen::after { content: ""; position: absolute; inset: 0px; background: rgb(16, 28, 23); opacity: 0; transition: opacity 0.32s; }
#gardenScene .tv-screen.is-off::after { opacity: 0.98; }
#gardenScene .tv-channel { position: absolute; left: 8%; top: 9%; font: 8px monospace; letter-spacing: 0.08em; color: rgb(220, 247, 195); text-shadow: rgb(215, 248, 203) 0px 0px 4px; opacity: 0.8; }
#gardenScene .tv-screen.is-off .tv-channel, #gardenScene .tv-screen.is-off .tv-scanline { display: none; }
#gardenScene .tv-scanline { position: absolute; top: 0px; left: 0px; width: 100%; height: 15%; background: linear-gradient(transparent, rgba(193, 234, 207, 0.09), transparent); animation: 6s linear 0s infinite normal none running scan; }
@keyframes scan { 
  0% { transform: translateY(-120%); }
  100% { transform: translateY(750%); }
}
#gardenScene .tv-hotspot { position: absolute; z-index: 6; left: 43%; top: 62.4%; width: 24.3%; height: 19.3%; padding: 0px; background: none; border: 0px; color: var(--cream); cursor: pointer; border-radius: 8px; touch-action: manipulation; }
#gardenScene .tv-hint { position: absolute; bottom: -28px; left: 50%; transform: translate(-50%, 4px); font-size: 15px; font-style: italic; white-space: nowrap; text-shadow: rgb(16, 38, 23) 0px 2px 5px; opacity: 0; transition: opacity 0.3s, transform 0.3s; }
#gardenScene .tv-hint span { font-style: normal; margin-left: 4px; font-size: 12px; }
#gardenScene .tv-hotspot:hover .tv-hint, #gardenScene .tv-hotspot:focus-visible .tv-hint { opacity: 1; transform: translate(-50%, 0px); }
#gardenScene .field-footer { position: absolute; z-index: 10; left: 34px; right: 30px; bottom: 25px; display: flex; align-items: center; justify-content: space-between; gap: 16px; text-shadow: rgb(17, 47, 35) 0px 1px 6px; }
#gardenScene .field-note { display: flex; align-items: center; gap: 10px; font-size: 14px; font-style: italic; opacity: 0.88; }
#gardenScene .field-note__asterisk { font-style: normal; font-size: 22px; line-height: 1; opacity: 0.85; }
#gardenScene .field-controls { display: flex; align-items: center; gap: 9px; }
#gardenScene .icon-button { display: grid; place-items: center; width: 34px; height: 34px; padding: 8px; border: 1px solid rgba(255, 249, 222, 0.227); border-radius: 50%; background: rgba(25, 62, 60, 0.15); color: var(--cream); cursor: pointer; backdrop-filter: blur(3px); transition: background 0.2s, border-color 0.2s, transform 0.2s; touch-action: manipulation; }
#gardenScene .icon-button:hover { background: rgba(255, 247, 214, 0.133); border-color: rgba(255, 247, 221, 0.55); transform: translateY(-2px); }
#gardenScene .icon-button svg { width: 16px; height: 16px; fill: none; stroke: currentcolor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
#gardenScene .control-divider { width: 1px; height: 13px; background: rgba(255, 246, 218, 0.267); margin: 0px 4px; }
#gardenScene .sound-on, #gardenScene .play-icon { display: none !important; }
#gardenScene #soundButton[aria-pressed="true"] .sound-on, #gardenScene #motionButton[aria-pressed="true"] .play-icon { display: block !important; }
#gardenScene #soundButton[aria-pressed="true"] .sound-off, #gardenScene #motionButton[aria-pressed="true"] .pause-icon { display: none; }
#gardenScene .interaction-hint { position: absolute; z-index: 9; left: 50%; bottom: 35px; margin: 0px; transform: translateX(-50%); font: italic 10px Georgia, serif; letter-spacing: 0.06em; opacity: 0.68; pointer-events: none; white-space: nowrap; transition: opacity 1s; }
#gardenScene .interaction-hint.is-hidden { opacity: 0; }
#gardenScene .sr-only { position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px; }
#gardenScene .no-script { position: absolute; bottom: 80px; width: 100%; text-align: center; font-size: 14px; }
#gardenScene.is-paused *, #gardenScene.is-paused ::before, #gardenScene.is-paused ::after { animation-play-state: paused !important; }
@media (max-width: 700px) {
#gardenScene .garden-wordmark { top: 8.5%; }
#gardenScene .garden-wordmark__script { font-size: 138px; }
#gardenScene .garden-wordmark__tv { font-size: 141px; }
#gardenScene .garden-wordmark p { font-size: 10px; margin-top: 13px; }
#gardenScene .field-footer { left: 19px; right: 17px; bottom: max(19px,env(safe-area-inset-bottom)); }
#gardenScene .field-note { font-size: 11px; gap: 7px; }
#gardenScene .field-note__asterisk { font-size: 18px; }
#gardenScene .field-controls { gap: 6px; }
#gardenScene .control-divider { margin: 0px 2px; }
#gardenScene .icon-button { width: 33px; height: 33px; }
#gardenScene .interaction-hint { bottom: 72px; font-size: 10px; }
#gardenScene .tv-channel { font-size: 7px; }
#gardenScene .scene-vignette { box-shadow: rgba(9, 38, 45, 0.125) 0px 0px 100px inset; }
}
@media (max-height: 550px) and (min-width: 701px) {
#gardenScene .garden-wordmark { top: 3%; }
#gardenScene .garden-wordmark__script { font-size: 100px; }
#gardenScene .garden-wordmark__tv { font-size: 100px; }
#gardenScene .garden-wordmark p { margin-top: 9px; font-size: 9px; }
#gardenScene .field-footer { bottom: 12px; }
#gardenScene .interaction-hint { display: none; }
}
@media (max-width: 350px) {
#gardenScene .field-note { max-width: 110px; }
#gardenScene .field-controls { gap: 4px; }
#gardenScene .garden-wordmark__script { font-size: 117px; }
#gardenScene .garden-wordmark__tv { font-size: 125px; }
}
@media (prefers-reduced-motion: reduce) {
#gardenScene *, #gardenScene ::before, #gardenScene ::after { animation: auto ease 0s 1 normal none running none !important; transition: none !important; }
#gardenScene .sky-flow { transform: scale(1.065); }
#gardenScene .butterfly__wing { transform: scaleX(0.8); }
}
#gardenScene { touch-action: none; }

/* Production entry: the garden owns its layers; dialogs keep their own layout. */
html, html[data-scene-mode] { background:#258eae; }
body.scene { margin:0; min-height:100svh; overflow:hidden; background:#258eae; }
#gardenScene { position:fixed; inset:0; width:100%; height:100dvh; z-index:0; color:#fffdeb; --cream:#fffdeb; font-family:Georgia,'Times New Roman',serif; }
#gardenScene button { font:inherit; -webkit-tap-highlight-color:transparent; }
#gardenScene button:focus-visible { outline:2px solid #fffdeb; outline-offset:5px; }
#gardenScene .garden-wordmark { padding:0; height:auto; }
#gardenScene .garden-wordmark p { line-height:1.4; }
#gardenScene .icon-button { width:44px; height:44px; padding:12px; }
#gardenScene .icon-button svg { width:17px; height:17px; }
#gardenScene .field-footer { bottom:max(20px,env(safe-area-inset-bottom)); }
#gardenScene .field-note { display:none; }
#gardenScene .field-controls { margin-left:auto; }
#gardenScene .interaction-hint { bottom:33px; font-family:inherit; font-size:12px; letter-spacing:.12em; }
#gardenScene .tv-hint { font:12px -apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif; letter-spacing:.14em; opacity:.82; }
body.scene > .garden-header { position:fixed; z-index:12; inset:0 0 auto; height:86px; padding:0 34px; display:flex; flex-direction:row; justify-content:space-between; align-items:center; pointer-events:none; color:#fffdeb; }
.garden-header a, .garden-header button { pointer-events:auto; }
.garden-about { color:inherit; font:italic 14px Georgia,serif; text-decoration:none; text-shadow:0 1px 8px #16495680; padding:12px 0; }
.garden-header .guest-nav { gap:8px; }
.garden-header .guest-nav button { min-height:44px; padding:10px 20px; color:#fffdeb; }
body.scene #home, body.scene #landing { position:fixed; z-index:10; top:44%; left:50%; transform:translateX(-50%); width:min(560px,calc(100% - 40px)); min-height:0; height:auto; margin:0; padding:0; text-align:center; color:#fffdeb; }
body.scene #home .searchbar { width:100%; height:56px; gap:12px; padding:0 6px 0 20px; border:1px solid #fffdeb80; border-radius:32px; background:#f9f9ecdf; box-shadow:0 8px 35px #114a6420; backdrop-filter:blur(8px); }
body.scene #home .searchbar input { height:48px; color:#2c4e50; font-size:15px; }
body.scene #home .searchbar input::placeholder { color:#597777; }
body.scene #home .searchbar svg { stroke:#6b8988; }
body.scene #home .searchbar button { width:44px; height:44px; flex-shrink:0; color:#405f52; background:#e3eada; }
body.scene #home .searchbar:focus-within { border-color:#fffdeb; box-shadow:0 0 0 4px #fffdeb25,0 8px 35px #114a6420; }
body.scene #home .cinema-scroll-entry { display:block; width:max-content; min-height:44px; margin:13px auto 0; padding:11px 24px; background:#164a522b; border:1px solid #fffdeb75; border-radius:26px; color:#fffdeb; font-size:12px; letter-spacing:.05em; backdrop-filter:blur(6px); }
body.scene #home .note { display:none; }
body.scene #landing .entry-actions { gap:12px; }
body.scene #landing .entry-actions button { min-height:46px; padding:12px 25px; }
body.scene #landing .entry-actions .primary { background:#fffdeb; color:#355552; border-color:#fffdeb; }
body.scene #landing .explore { min-height:44px; margin:9px auto 0; color:#fffdeb; }
body.cinema-open #gardenScene,body.modal-open #gardenScene { pointer-events:none; }
body.cinema-open > .garden-header,body.modal-open > .garden-header { visibility:hidden; }
body.scene .auth-dialog input { font-size:16px; }
body.scene .auth-dialog .dialog-close { width:44px; height:44px; top:3px; right:5px; }
@media(max-width:700px) {
  body.scene > .garden-header { height:70px; padding:0 18px; }
  .garden-about { font-size:11px; }
  .garden-header .guest-nav { gap:0; }
  .garden-header .guest-nav button { padding:10px 12px; }
  #gardenScene .garden-wordmark { top:9%; }
  #gardenScene .garden-wordmark__script { font-size:clamp(96px,17svh,138px); }
  #gardenScene .garden-wordmark__tv { font-size:clamp(100px,17.5svh,141px); }
  body.scene #home,body.scene #landing { top:43%; width:calc(100% - 36px); }
  body.scene #home .searchbar { height:54px; gap:8px; padding-left:16px; }
  body.scene #home .searchbar input { font-size:16px; }
  body.scene #home .cinema-scroll-entry { margin-top:10px; }
  body.scene #landing .entry-actions { gap:8px; }
  body.scene #landing .entry-actions button { padding:12px 18px; }
  #gardenScene .interaction-hint { bottom:max(30px,env(safe-area-inset-bottom)); left:18px; transform:none; font-size:10px; max-width:130px; white-space:normal; text-align:left; line-height:1.7; }
  #gardenScene .field-footer { right:14px; left:14px; bottom:max(18px,env(safe-area-inset-bottom)); }
  #gardenScene .field-controls { gap:4px; }
  #gardenScene .control-divider { margin:0 1px; }
  #gardenScene .tv-hint { bottom:-24px; }
}
@media(min-width:701px) and (min-height:501px) {
  #gardenScene .garden-wordmark__script { font-size:clamp(112px,min(14vw,21svh),200px); }
  #gardenScene .garden-wordmark__tv { font-size:clamp(114px,min(12.6vw,19svh),182px); }
}
@media(max-height:500px) and (min-width:560px) {
  body.scene > .garden-header { height:58px; padding:0 22px; }
  #gardenScene .garden-wordmark { left:24%; top:max(20%,76px); }
  #gardenScene .garden-wordmark__script { font-size:103px; }
  #gardenScene .garden-wordmark__tv { font-size:100px; }
  #gardenScene .garden-wordmark p { font-size:9px; margin-top:10px; }
  body.scene #home,body.scene #landing { left:69%; top:25%; width:48%; max-width:410px; }
  body.scene #home .searchbar { height:52px; }
  body.scene #landing .entry-actions button { padding:10px 16px; }
  #gardenScene .interaction-hint { display:none; }
  #gardenScene .field-footer { bottom:max(10px,env(safe-area-inset-bottom)); }
}