/* These values belong to a single moving layer. Do not propagate each scroll
   update through all of its textured children. Universal syntax preserves the
   existing viewport units and var() fallbacks; older browsers keep the same art. */
@property --camera-scale{syntax:"*";inherits:false}
@property --camera-depth{syntax:"*";inherits:false}
@property --camera-y{syntax:"*";inherits:false}
@property --entry-camera-push{syntax:"*";inherits:false}
@property --water-strength{syntax:"*";inherits:false}
@property --window-opacity{syntax:"*";inherits:false}
@property --window-y{syntax:"*";inherits:false}
@property --foreground-scale{syntax:"*";inherits:false}
@property --window-open{syntax:"*";inherits:false}
@property --curtain-visible{syntax:"*";inherits:false}
@property --side-curtain-shift{syntax:"*";inherits:false}
@property --room-shade{syntax:"*";inherits:false}
@property --flower-opacity{syntax:"*";inherits:false}
@property --flower-y{syntax:"*";inherits:false}
@property --flower-x{syntax:"*";inherits:false}
@property --flower-scale{syntax:"*";inherits:false}
@property --table-y{syntax:"*";inherits:false}
@property --moon-opacity{syntax:"*";inherits:false}
@property --moon-y{syntax:"*";inherits:false}
@property --moon-ink{syntax:"*";inherits:false}
@property --caption-opacity{syntax:"*";inherits:false}
@property --water-copy-y{syntax:"*";inherits:false}
@property --water-copy{syntax:"*";inherits:false}
@property --shore-copy{syntax:"*";inherits:false}
@property --shore-copy-y{syntax:"*";inherits:false}
@property --butterfly-opacity{syntax:"*";inherits:false}
#ning-water-garden .ng-top{position:absolute;left:0;right:0;top:0;z-index:20;border-bottom:0;padding:28px 5%;background:linear-gradient(#01060680,transparent)}
#ning-water-garden .ng-nav{visibility:hidden;pointer-events:none}
#ning-water-garden .moon-scroll{--opening-motion:2;--opening-hold:.5;height:calc(100svh * (1 + var(--opening-motion) + var(--opening-hold)));position:relative;background:#030909;overflow-anchor:none}
/* Let the bouquet grow gently on wide desktops, keeping its base on the desk. */
#ning-water-garden .moon-stage{--bouquet-height:min(clamp(78svh,calc(78svh + 10vw - 144px),83svh),58vw);--bouquet-width:calc(var(--bouquet-height) * 928 / 1232);--bouquet-center:clamp(57.5%,calc(46% + 168px),66%);position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;background:#020806}
/* Let the compositor size the moving surfaces itself. Forcing nested full-scene
   caches at the initial zoom wastes texture memory and can drop painted tiles. */
.scene-world{position:absolute;inset:0;height:100svh;transform:translateY(var(--camera-y,3.5svh)) scale(var(--camera-scale,1.34));transform-origin:57% 45%}
.opening-shade{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:var(--water-copy,1);background:radial-gradient(ellipse at 50% 46%,#01060588,transparent 72%),linear-gradient(0deg,#010605b0,transparent 18%)}
.night-sky{position:absolute;inset:0 0 auto;height:105svh;background:radial-gradient(ellipse at 80% 18%,#13202b 0,transparent 43%),linear-gradient(110deg,#020706,#09100f 51%,#071115)}
.moon-disc{position:absolute;z-index:1;left:81.5%;top:8svh;width:clamp(58px,6.5vw,96px);aspect-ratio:1;opacity:var(--moon-opacity,0);transform:translateY(var(--moon-y,-14svh));pointer-events:none}
.moon-paint{position:absolute;left:-39.0625%;top:-39.0625%;width:178.125%;height:178.125%;mask-image:linear-gradient(to bottom,#000 var(--moon-ink,-18%),transparent calc(var(--moon-ink,-18%) + 18%));-webkit-mask-image:linear-gradient(to bottom,#000 var(--moon-ink,-18%),transparent calc(var(--moon-ink,-18%) + 18%))}
.moon-disc img{display:block;width:100%;height:100%;object-fit:contain}
.distant-haze{position:absolute;top:52svh;left:30%;right:0;height:40svh;background:radial-gradient(ellipse,#24454720,transparent 70%);filter:blur(35px)}
.scene-water{position:absolute;left:0;right:0;top:37svh;height:63svh;background:linear-gradient(#060d10,#050b11 48%,#020707);overflow:hidden;mask-image:linear-gradient(transparent,#000 12%);-webkit-mask-image:linear-gradient(transparent,#000 12%)}
.water-photo{position:absolute;inset:0;overflow:hidden;opacity:var(--water-strength,.86);mask-image:linear-gradient(transparent,#000 12%,#000 90%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 12%,#000 90%,transparent)}
.water-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#02060844,transparent 58%);pointer-events:none}
.water-photo img{position:absolute;width:104%;height:104%;left:-2%;top:-2%;object-fit:cover;object-position:50% 49%;filter:brightness(.92);animation:river-drift 20s ease-in-out infinite alternate}
.window-architecture{--room-gutter:3.4%;--window-open-angle:75deg;--window-glint:calc(8% + 92% * var(--window-open,0));position:absolute;inset:0;z-index:2;pointer-events:none;opacity:var(--window-opacity,0);transform:translateY(var(--window-y,3svh)) scale(var(--foreground-scale,1.14));transform-origin:50% 48%}
.scene-filters{position:absolute;pointer-events:none}
.window-frame{position:absolute;z-index:1;left:var(--room-gutter);right:var(--room-gutter);top:5svh;bottom:16.5svh;pointer-events:none}
.window-frame:before,.window-frame:after{content:"";position:absolute;top:0;bottom:0;width:clamp(8px,.7vw,11px);z-index:2;background:repeating-linear-gradient(90deg,#c3c3a005 0 1px,transparent 1px 4px),linear-gradient(90deg,#060b10,#222619 36%,#0b1218 80%,#05090d);box-shadow:0 0 6px #0008}
.window-frame:before{left:0}.window-frame:after{right:0}
/* Each casement covers half the opening when shut; the outer hinges stay fixed. */
.window-jamb{position:absolute;top:0;bottom:0;width:50%;perspective:max(1200px,125vw)}
.window-jamb-left{left:0;perspective-origin:0 50%}
.window-jamb-right{right:0;perspective-origin:100% 50%}
.window-leaf{--window-rail:clamp(6px,.65vw,9px);--window-depth:clamp(5px,.6vw,8px);position:absolute;top:0;bottom:0;width:100%;border:var(--window-rail) solid #0a1118;box-sizing:border-box;box-shadow:inset 0 0 0 1px #b0b49626,inset 0 0 5px 2px #04080c80,0 0 0 1px #050b11,0 3px 12px #0007;background:linear-gradient(132deg,#b1b5960a,transparent 36%,#d2d3b806 58%,transparent 62%,#171a1106);transform-style:preserve-3d;backface-visibility:hidden;will-change:transform}
/* A raised timber rim and a perpendicular closing edge rotate with each leaf. */
.window-leaf:before{content:"";position:absolute;inset:calc(-1 * var(--window-rail));border:var(--window-rail) solid #0e171d;border-top-color:#303221;border-bottom-color:#060d13;box-shadow:inset -1px 1px #c0c2a325,inset 1px -1px #050a0fb3,0 0 0 1px #060d13;transform:translateZ(var(--window-depth));pointer-events:none}
.window-leaf:after{content:"";position:absolute;top:calc(-1 * var(--window-rail));bottom:calc(-1 * var(--window-rail));width:var(--window-depth);background:repeating-linear-gradient(0deg,#c3c3a005 0 1px,transparent 1px 6px),linear-gradient(90deg,#070e14,#1c2116 65%,#353725);box-shadow:inset 0 0 0 1px #060e1280;pointer-events:none}
.window-jamb-left .window-leaf:after{right:calc(-1 * var(--window-rail));transform-origin:100% 50%;transform:rotateY(90deg)}
.window-jamb-right .window-leaf:after{left:calc(-1 * var(--window-rail));transform-origin:0 50%;transform:rotateY(-90deg);background:repeating-linear-gradient(0deg,#c3c3a005 0 1px,transparent 1px 6px),linear-gradient(90deg,#3d402c,#252919 35%,#080f15)}
.window-jamb-right .window-leaf:before{border-top-color:#3a3c28;border-right-color:#232817}
.window-jamb-left .window-leaf{left:0;transform-origin:0 50%;transform:rotateY(calc(var(--window-open,0) * var(--window-open-angle)))}
.window-jamb-right .window-leaf{right:0;transform-origin:100% 50%;transform:rotateY(calc(-1 * var(--window-open,0) * var(--window-open-angle)))}
.window-muntin,.window-stile{position:absolute;display:block;background:repeating-linear-gradient(0deg,#c3c3a005 0 1px,transparent 1px 4px),linear-gradient(#2e301f,#171b14 40%,#091217 76%,#050b10);box-shadow:inset 0 1px #c0c2a323,inset 0 -1px #04090dc2,1px 2px 3px #0007;transform:translateZ(1.5px)}
.window-muntin{left:0;right:0;height:clamp(3px,.32vw,5px)}.muntin-upper{top:32%}.muntin-lower{top:65%}.window-stile{top:0;bottom:0;left:49%;width:clamp(3px,.32vw,5px)}
.window-handle{position:absolute;top:57%;width:4px;height:24px;background:linear-gradient(90deg,#0d171c,#5c6046 48%,#23291a);border-radius:2px;box-shadow:1px 1px 2px #0009}
.window-jamb-left .window-handle{right:3px}.window-jamb-right .window-handle{left:3px}
/* Reuse the desk photograph as timber, cropped to its opaque middle surface.
   Separate rail faces keep the grain along each board and preserve the open glass. */
.window-architecture{--window-wood:url('assets/window-desk/walnut-desktop-v1-scene-v1.webp');--wood-light:linear-gradient(180deg,#e4c6a238,transparent 30%,#170d0752);--wood-bevel:inset 0 1px #e2be926b,inset 0 -1px #1f120dd9,0 1px 3px #0008}
.window-frame:before,.window-frame:after,.window-leaf:before{display:none}
.window-surround,.window-timber,.window-muntin,.window-stile{background-color:#674c38;background-image:var(--wood-light),var(--window-wood);background-size:100% 100%,640px 213px;background-position:center;box-shadow:var(--wood-bevel);filter:brightness(.88) saturate(.78)}
.window-surround{--timber-thickness:clamp(8px,.7vw,11px);position:absolute;z-index:2;display:block;pointer-events:none}
.surround-left,.surround-right{top:0;bottom:0;width:var(--timber-thickness)}
.surround-left{left:0}.surround-right{right:0}
.window-leaf{border-color:#5b402b;box-shadow:inset 0 0 0 1px #d6c4a64d,inset 0 0 5px 2px #1b100980,0 0 0 1px #20140e,0 3px 12px #0007;background:linear-gradient(132deg,#84969f05,transparent 36%,#d2d3b804 58%,transparent 62%)}
.window-timber{--timber-thickness:var(--window-rail);position:absolute;display:block;transform:translateZ(var(--window-depth));pointer-events:none}
.timber-top,.timber-bottom{left:calc(-1 * var(--window-rail));right:calc(-1 * var(--window-rail));height:var(--window-rail)}
.timber-top{top:calc(-1 * var(--window-rail))}.timber-bottom{bottom:calc(-1 * var(--window-rail));background-position:center,65% 58%}
.timber-left,.timber-right{top:calc(-1 * var(--window-rail));bottom:calc(-1 * var(--window-rail));width:var(--window-rail)}
.timber-left{left:calc(-1 * var(--window-rail))}.timber-right{right:calc(-1 * var(--window-rail))}
.window-stile{--timber-thickness:clamp(3px,.32vw,5px)}
.wood-upright{overflow:hidden;background-image:none}
.wood-upright:before{content:"";position:absolute;left:50%;top:50%;width:80svh;height:var(--timber-thickness);background-image:var(--wood-light),var(--window-wood);background-size:100% 100%,640px 213px;background-position:center;box-shadow:var(--wood-bevel);transform:translate(-50%,-50%) rotate(90deg);pointer-events:none}
.window-leaf:after{background:linear-gradient(90deg,#26180f,#61432c 65%,#94704d);box-shadow:inset 0 0 0 1px #2d1c1280}
.window-jamb-right .window-leaf:after{background:linear-gradient(90deg,#a07a53,#67472f 35%,#26180f)}
.window-handle{background:linear-gradient(90deg,#352719,#ab9065 48%,#51402a);box-shadow:1px 1px 2px #0009}
/* The black sheers sit behind the bouquet, independently of the green side drapes. */
.curtain-track{position:absolute;z-index:2;left:12px;right:12px;top:0;bottom:12svh;overflow:hidden;pointer-events:none;opacity:var(--room-shade,0);mask-image:linear-gradient(transparent,#000 5%,#000 97%,transparent)}
.sheer-panel{position:absolute;top:-1%;bottom:-2%;width:50.6%}
.sheer-left{left:0}.sheer-right{right:0}
.curtain-drape{position:absolute;inset:0;filter:blur(.45px)}
.sheer-left .curtain-drape{clip-path:url(#sheer-left-shape)}
.sheer-right .curtain-drape{clip-path:url(#sheer-right-shape);scale:-1 1;transform-origin:50% 50%}
.curtain-fabric{position:absolute;inset:-2% -4%;background-color:#000000b8;background-image:url('assets/soft-sheer-folds.svg');background-size:100% 100%;background-repeat:no-repeat;box-shadow:inset 0 5px 16px #0004;transform-origin:50% 0;animation:sheer-breathe 13s ease-in-out infinite alternate;will-change:transform}
.sheer-right .curtain-fabric{background-size:117% 100%;background-position:70% 0;animation-duration:15s;animation-delay:-4s}
.curtain-weave{position:absolute;inset:0;background-image:repeating-linear-gradient(88deg,#cecece05 0 .35px,transparent .35px 2px);opacity:.12}
/* Independent side drapes frame the room; the centre and upper opening stay clear. */
.window-side-curtains{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:var(--curtain-visible,0)}
.side-curtain{position:absolute;top:-3svh;height:108svh;width:clamp(125px,17vw,270px);will-change:transform}
.side-curtain-left{left:-2vw;transform:translateX(calc(-1 * var(--side-curtain-shift,100%)))}
.side-curtain-right{right:-2vw;transform:translateX(var(--side-curtain-shift,100%))}
.side-curtain-cloth{position:absolute;inset:0}
.side-curtain-right .side-curtain-cloth{scale:-1 1}
.side-curtain img{display:block;width:100%;height:100%;object-fit:fill;transform-origin:10% 0;filter:brightness(.62) saturate(.72) drop-shadow(9px 3px 12px #0008);animation:side-drape-breathe 14s ease-in-out infinite alternate}
.side-curtain-right img{animation-duration:17s;animation-delay:-6s;filter:brightness(.57) saturate(.72) drop-shadow(9px 3px 12px #0008)}
@keyframes side-drape-breathe{from{transform:rotate(-.12deg) skewX(-.08deg)}to{transform:rotate(.16deg) skewX(.10deg)}}
body.motion-off .window-side-curtains{opacity:1}
body.motion-off .side-curtain{transform:none}
body.motion-off .side-curtain img{animation:none}
@media(prefers-reduced-motion:reduce){.side-curtain img,.curtain-fabric{animation:none}}
@media(max-width:760px){.side-curtain{width:clamp(54px,15vw,88px)}.side-curtain-left{left:-16px}.side-curtain-right{right:-16px}.side-curtain img{filter:brightness(.55) saturate(.7) drop-shadow(4px 2px 6px #0008)}}
.window-sill{position:absolute;z-index:2;left:0;right:0;top:83.5svh;bottom:0;background:linear-gradient(transparent 0 66%,#080a08 82%);transform:translateY(var(--table-y,62svh));opacity:var(--flower-opacity,0);pointer-events:none}
/* Crop transparent asset margins in layout, keeping the generated alpha untouched.
   The top plane spans 83.5–93svh; the vase foot rests within it at about 88svh. */
.window-desk-surface{position:absolute;inset:0 0 auto;height:11.5svh;overflow:hidden;box-shadow:0 8px 16px #0008}
.window-desk-photo{position:absolute;left:0;top:-35.37%;width:100%;height:152.42%;max-width:none;object-fit:fill;filter:brightness(.74) saturate(.78);pointer-events:none}
/* The image's visible vase base is slightly left of centre and 1.1% above its bottom. */
.vase-contact{position:absolute;left:45.5%;top:98.9%;width:31%;height:1.8%;transform:translate(-50%,-40%);border-radius:50%;background:radial-gradient(ellipse,#150b03eb 0 27%,#160b058c 51%,transparent 74%);filter:blur(.8px);pointer-events:none}
.vase-contact:before{content:"";position:absolute;inset:-45% -30%;border-radius:50%;background:radial-gradient(ellipse,#0c080452,transparent 72%);filter:blur(3px)}
/* Fit both viewport axes without stretching the artwork. Keep its base on the
   same part of the desk while the bouquet and its hit areas scale together. */
/* These layers move in two dimensions. Avoid an unnecessary 3D surface under
   the camera and its masks, which can leave missing tiles during scrolling. */
.shore-flower{position:absolute;z-index:3;left:calc(var(--bouquet-center) - var(--bouquet-width) / 2);bottom:11svh;height:var(--bouquet-height);width:var(--bouquet-width);isolation:isolate;opacity:var(--flower-opacity,0);transform:translate(var(--flower-x,8vw),var(--flower-y,62svh)) scale(var(--flower-scale,1.1));transform-origin:50% 100%;pointer-events:none}
.flower-art{position:absolute;left:50%;bottom:0;height:100%;aspect-ratio:928/1232;transform:translateX(-50%)}
.shore-flower img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;filter:brightness(1.04);pointer-events:none}
.flower-stems{clip-path:polygon(0 0,97% 0,100% 3%,100% 70.6%,0 70.6%);transform-origin:50% 71%;animation:branch-sway 11s cubic-bezier(.45,0,.55,1) infinite;will-change:transform}
.flower-vase{clip-path:inset(70.5% 0 0 0)}
.flower-hotspots{position:absolute;inset:0;transform-origin:50% 71%;animation:branch-sway 11s cubic-bezier(.45,0,.55,1) infinite;pointer-events:none}
.flower-hit{position:absolute;display:grid;place-items:center;padding:0;background:transparent;border:0;border-radius:45%;pointer-events:auto;text-decoration:none;color:#fff3d3;cursor:pointer;outline-offset:3px}
.flower-hit:before{content:"";position:absolute;inset:12%;border-radius:50%;background:radial-gradient(ellipse,#fff1c524,transparent 70%);opacity:0;transition:opacity .45s ease}
.flower-hit:after{content:attr(data-number);position:absolute;left:47%;top:62%;display:grid;place-items:center;width:22px;height:22px;box-sizing:border-box;border-radius:50%;padding-top:1px;font:14px/1 "Times New Roman",serif;font-variant-numeric:lining-nums tabular-nums;letter-spacing:0;color:#f5ecd6;background:none;border:1px solid #ffffffb3;box-shadow:none;text-shadow:0 1px 3px #07120ae6,0 0 6px #07120a99;opacity:var(--flower-nav-opacity,0);transition:opacity .35s ease,color .35s ease,border-color .35s ease}
.flower-label{position:absolute;z-index:2;left:50%;top:85%;transform:translate(-50%,5px);padding:8px 11px;background:#081112f0;border:1px solid #b8a77c6b;border-radius:2px;white-space:nowrap;font:10px/1.4 Arial,sans-serif;letter-spacing:.04em;opacity:0;transition:opacity .18s,transform .18s;pointer-events:none}
.flower-hit:hover:before,.flower-hit:focus-visible:before{opacity:1}.flower-hit:hover .flower-label,.flower-hit:focus-visible .flower-label{opacity:1;transform:translate(-50%,0)}
.flower-hit:focus-visible{outline:1px solid #e8d6a2}.flower-hit[aria-disabled=true]{cursor:default}.flower-hit[aria-disabled=true]:after{color:#b8bcb6}
.flower-one{left:8%;top:0;width:30%;height:27%}.flower-two{left:43%;top:7%;width:27%;height:23%}.flower-three{left:70%;top:6%;width:29%;height:26%}.flower-four{left:4%;top:28%;width:34%;height:25%}.flower-five{left:44%;top:26%;width:34%;height:25%}.flower-six{left:72%;top:44%;width:27%;height:24%}
.flower-navigation-note{margin-top:16px!important;font-size:12px!important;letter-spacing:.025em;color:#d4c7a9!important}
.flower-hit:is(:hover,:focus-visible,[aria-expanded=true]):after{color:#fff8e8;border-color:#fff}
.flower-hit[aria-expanded=true]:after{opacity:1}
.flower-hit[aria-expanded=true]:before{opacity:1}
.flower-preview[hidden]{display:none!important}
.flower-preview{position:absolute;z-index:16;left:9%;top:var(--preview-top,22%);width:clamp(290px,30vw,392px);max-height:calc(100svh - 100px);overflow:auto;background:radial-gradient(ellipse at top left,#30332860,transparent 70%),#101411fa;border:1px solid #b7a47870;border-radius:5px;box-shadow:0 20px 65px #0009;color:#ede8dd;animation:preview-in .25s ease-out;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#8a8062 #101411}
.preview-topline{position:sticky;top:0;z-index:1;height:44px;padding:0 6px 0 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #b7a47830;background:#151914}
.preview-index{font:9px/1.4 Arial,sans-serif;letter-spacing:.14em;color:#c8b990}
.preview-close{display:grid;place-items:center;width:44px;height:44px;padding:0;background:none;border:0;font:25px/1 Arial,sans-serif;color:#ece4d4;cursor:pointer}
.preview-close:hover{color:#e7bddf}.preview-close:focus-visible,.profile-links a:focus-visible{outline:1px solid #e8d6a2;outline-offset:-3px}
.preview-copy{padding:23px 24px 25px}.preview-type{margin:0 0 10px!important;font:11px/1.5 Arial,sans-serif!important;color:#c8b990!important;letter-spacing:.08em;text-transform:uppercase}
#ning-water-garden .preview-copy h3{margin:0 0 14px;font:400 32px/1.12 Georgia,serif;letter-spacing:-.02em;color:#f4eee4;text-wrap:balance}
#ning-water-garden #flower-preview-description{margin:0;font:13px/1.8 Arial,sans-serif;color:#d0d3ca}
#ning-water-garden .profile-details{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:17px}
.profile-details li{padding:0 0 0 14px;border-left:1px solid #b7a4784d}
.profile-date{display:block;margin-bottom:6px;font:10px/1.5 Arial,sans-serif;letter-spacing:.045em;color:#c8b990}
#ning-water-garden .profile-details h4{margin:0 0 5px;font:400 13px/1.55 Arial,sans-serif;letter-spacing:0;color:#f0eadd}
#ning-water-garden .profile-details p{margin:0;font:12px/1.8 Arial,sans-serif;color:#bfc4bb}
.profile-links{display:grid;gap:5px;margin-top:22px;padding-top:10px;border-top:1px solid #b7a47845}.profile-links[hidden]{display:none}
#ning-water-garden .profile-links a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;color:#eee6d3;font:12px/1.6 Arial,sans-serif;text-decoration:none;overflow-wrap:anywhere}.profile-links a:hover{color:#e7bddf}.profile-links a span{flex-shrink:0}
.moon-stage.preview-open .shore-intro{opacity:0;pointer-events:none}
.moon-stage.preview-open .flower-stems,.moon-stage.preview-open .flower-hotspots{animation-play-state:paused}
body.flower-preview-open .butterfly-flight{opacity:0!important;visibility:hidden;pointer-events:none}
@keyframes preview-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
body.motion-off .flower-preview{animation:none}
.shore-caption{display:none}
.water-intro,.shore-intro{position:absolute;z-index:5;left:8%;max-width:42%;pointer-events:none}
.water-intro{left:50%;top:49%;width:90%;max-width:1340px;text-align:center;opacity:var(--water-copy,1);transform:translate(-50%,calc(-50% + var(--water-copy-y,0px)));text-shadow:0 2px 24px #01060670}
#ning-water-garden .moon-stage .moon-eyebrow{font:13px/1.5 Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#d4dbd5;margin-bottom:20px}
#ning-water-garden .water-intro h1{font:400 min(clamp(92px,12.8vw,190px),23svh)/.96 Georgia,serif;letter-spacing:-.055em;color:#efeee2;margin-bottom:28px}
#ning-water-garden .water-intro h1 em,#ning-water-garden .shore-intro h2 em{font-weight:400;font-style:italic;color:#d9d2dc}
#ning-water-garden .shore-intro>p{font-size:16px;line-height:1.65;color:#d2d9d3}
/* The copy follows the actual artwork edge, including narrow desktop windows. */
.shore-intro{--shore-copy-width:clamp(230px,28vw,340px);--shore-copy-gap:clamp(24px,4vw,64px);left:max(8%,calc(var(--bouquet-center) - var(--bouquet-width) / 2 - var(--shore-copy-width) - var(--shore-copy-gap)));top:calc(24% - 32px);width:var(--shore-copy-width);max-width:none;opacity:var(--shore-copy,0);transform:translateY(var(--shore-copy-y,30px));pointer-events:auto}
#ning-water-garden .shore-intro h2{font:400 clamp(65px,7.8vw,125px)/.98 Georgia,serif;letter-spacing:-.055em;margin:20px 0 22px}
#ning-water-garden .shore-intro h2 .title-mask{overflow:visible}
#ning-water-garden .shore-intro .ng-link{margin-top:20px;font-size:14px}
.opening-bottom{position:absolute;z-index:6;left:5%;right:12%;bottom:max(12px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:18px;color:#c6cbc4}
.opening-bottom button{background:none;border:0;color:inherit;font:13px/1.5 Arial,sans-serif;padding:8px 0}.scene-step{font-size:12px;letter-spacing:.09em;color:#cbd2cd;min-width:155px}.follow-reflection span{display:inline-block;margin-left:15px}
.index-toggle{position:fixed;right:9.5%;top:24%;z-index:35;display:flex;align-items:center;gap:16px;padding:12px 0;background:none;border:0;color:#e9e7dd;font:11px Arial,sans-serif;letter-spacing:.13em;text-transform:uppercase}
.index-lines{display:block;width:21px;height:15px;border-top:1px solid #cbd2cb;border-bottom:1px solid #cbd2cb;position:relative}.index-lines:after{content:"";height:1px;width:14px;background:#cbd2cb;position:absolute;top:6px;right:0}
.index-toggle[aria-expanded=true] .index-lines{transform:rotate(-90deg)}
.chapter-rail{top:32%;right:5%;width:85px;opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity .3s,transform .3s}
body.index-open .chapter-rail{opacity:1;pointer-events:auto;transform:none}.chapter-rail b{opacity:1}.chapter-rail button{min-height:38px}.rail-line{display:none}
body.reading-projects .chapter-rail{opacity:1;pointer-events:auto;transform:none;top:40%;right:24px;width:85px}body.reading-projects .rail-line{display:block}body.reading-projects .index-toggle{top:26px;right:32px}
body.reading-projects .chapter-rail b{opacity:0}body.reading-projects .chapter-rail button[aria-current=step] b,body.reading-projects .chapter-rail button:hover b,body.reading-projects .chapter-rail button:focus-visible b{opacity:1}
/* The compact reading rail still opens into a fully labelled directory. */
body.reading-projects.index-open .chapter-rail b{opacity:1}
.butterfly-flight{opacity:var(--butterfly-opacity,0)}
body.motion-off .moon-scroll{height:110svh!important}body.motion-off .scene-world{transform:scale(1)!important}body.motion-off .water-intro{opacity:0!important}body.motion-off .shore-intro,body.motion-off .shore-flower,body.motion-off .window-architecture{opacity:1!important;transform:none!important}body.motion-off .butterfly-flight{opacity:1!important}
body.motion-off .moon-disc{transform:none!important;opacity:.94!important}body.motion-off .moon-paint,body.motion-off .flower-art{mask-image:none!important;-webkit-mask-image:none!important}
body.motion-off .curtain-fabric,body.motion-off .flower-hotspots{animation:none!important}
body.motion-off .window-sill{opacity:1!important;transform:none!important}
@keyframes sheer-breathe{0%{transform:skewX(-.2deg) scaleX(1.003)}50%{transform:skewX(.12deg) scaleX(1.01)}100%{transform:skewX(.25deg) scaleX(1.001)}}
@keyframes branch-sway{
  0%,100%{transform:rotate(-.65deg) skewX(-.1deg)}
  27%{transform:rotate(1deg) skewX(.18deg)}
  46%{transform:rotate(.35deg) skewX(.05deg)}
  71%{transform:rotate(-1.05deg) skewX(-.16deg)}
  86%{transform:rotate(-.3deg) skewX(-.05deg)}
}
@keyframes river-drift{from{transform:translate(-1%,0) scale(1.02)}to{transform:translate(1%,1%) scale(1.04)}}
@media(max-width:760px){
  #ning-water-garden .moon-stage{--bouquet-height:min(58svh,calc(81svh - 210px),112vw);--bouquet-center:50%}
  #ning-water-garden .moon-scroll{--opening-motion:1.6}#ning-water-garden .ng-top{padding:24px 6%;min-height:65px}
  .moon-disc{left:auto;right:7.5%;top:7svh;width:clamp(48px,15vw,66px)}.water-intro{left:50%;top:47%;width:90%;max-width:none}#ning-water-garden .water-intro h1{font-size:min(clamp(58px,15vw,108px),22svh);margin-bottom:24px}#ning-water-garden .moon-eyebrow{font-size:10px;letter-spacing:.1em}
  .shore-intro{left:10%;top:calc(8% - 12px);width:70%;max-width:70%}#ning-water-garden .shore-intro h2{font-size:clamp(38px,10.3vw,48px);line-height:1;white-space:nowrap;margin:14px 0}#ning-water-garden .shore-intro h2 br{display:none}#ning-water-garden .shore-intro h2 .title-mask{display:inline-block;overflow:visible}#ning-water-garden .shore-intro h2 em:before{content:"\00a0"}#ning-water-garden .shore-intro>p{font-size:11px}#ning-water-garden .shore-intro .ng-link{margin-top:12px;font-size:11px}
  .shore-flower{mask-image:none;-webkit-mask-image:none}.shore-caption{display:none}.water-photo img{object-position:84% 49%}.window-leaf{border-width:7px}.window-frame:before,.window-frame:after{width:9px}.window-handle{width:4px;height:22px}.curtain-track{left:8px;right:8px}.flower-navigation-note{margin-top:10px!important;font-size:9px!important}.flower-label{font-size:9px;padding:6px 8px}.flower-hit:after{width:20px;height:20px;font-size:13px}
  .index-toggle{right:10%;top:21%;font-size:10px;gap:8px}.index-toggle .index-label{display:none}.chapter-rail{right:4%;width:80px;top:28%;padding:12px 10px;background:#020a08e8;border:1px solid #8a9e8233;gap:6px}.chapter-rail b{display:inline;font-size:9px}.chapter-rail button{font-size:10px;min-height:35px;gap:5px}
  body.reading-projects .chapter-rail{right:8px;width:23px;background:none;border:0;padding:0;top:37%}body.reading-projects .chapter-rail b{display:none}body.reading-projects .index-toggle{right:15px;top:18px}
  body.reading-projects.index-open .chapter-rail{width:100px;padding:12px 10px;background:#020a08f5;border:1px solid #8a9e8233}
  body.reading-projects.index-open .chapter-rail b{display:inline}
  body.reading-projects.index-open .rail-line{display:none}
  .flower-note-en{display:none}
  .flower-preview{left:4%;right:4%;top:auto;bottom:10svh;width:auto;max-height:57svh;border-radius:8px}
  .preview-topline{height:44px;padding-left:20px}.preview-copy{padding:20px}
  #ning-water-garden .preview-copy h3{font-size:29px;margin-bottom:12px}
  .opening-bottom{left:7%;right:7%;bottom:max(10px,env(safe-area-inset-bottom));flex-wrap:wrap;row-gap:2px}.scene-step{font-size:8px;min-width:0;flex:1}.follow-reflection{font-size:10px!important;order:3;width:100%;text-align:left}.skip-opening{font-size:10px!important}.opening-bottom .follow-reflection span{margin-left:10px}
}

@media(max-width:760px){
  .window-architecture{--room-gutter:1.8%;--window-open-angle:71.5deg}
  .window-leaf{--window-rail:5px;--window-depth:5px;border-width:var(--window-rail)}
  .window-frame:before,.window-frame:after{width:7px}
  .window-surround{--timber-thickness:7px}
}

/* Let the small copy stay legible without crowding the bouquet on narrow screens. */
@media(max-width:760px){
  #ning-water-garden .moon-stage .moon-eyebrow{font-size:12px;line-height:1.4;letter-spacing:.055em;margin-bottom:10px}
  #ning-water-garden .shore-intro>p{font-size:14px;line-height:1.6}
  #ning-water-garden .shore-intro h2{margin:10px 0 12px}
  #ning-water-garden .shore-intro .ng-link{font-size:13px;margin-top:10px}
  .flower-navigation-note{font-size:11px!important;margin-top:8px!important}
  .scene-step{font-size:10px}.follow-reflection,.skip-opening{font-size:12px!important}
}
/* Short landscape windows use two columns instead of compressing the flowers
   into the space below the introduction. */
@media(max-width:760px) and (min-aspect-ratio:4/3){
  #ning-water-garden .moon-stage{--bouquet-height:min(74svh,44vw);--bouquet-center:70%}
  .shore-intro{left:8%;width:40%;max-width:none}
  #ning-water-garden .shore-intro h2{font-size:clamp(30px,6vw,44px)}
}
.falling-petals{position:fixed;inset:0;overflow:hidden;z-index:8;pointer-events:none;perspective:700px}
/* Compact desktop panes need two columns, without changing phone or wide layouts. */
@media(min-width:640px) and (max-width:760px) and (min-height:540px) and (max-height:820px){
  #ning-water-garden .moon-stage{--bouquet-height:min(62svh,54vw);--bouquet-center:72%}
  .shore-intro{left:8%;top:20svh;width:38%;max-width:none}
  #ning-water-garden .shore-intro h2{font-size:44px}
  .opening-bottom{left:8%;right:16%;bottom:12px;flex-wrap:nowrap;gap:12px}
  .opening-bottom .scene-step{flex:0 1 auto}
  .opening-bottom .follow-reflection{order:0;width:auto;flex:0 0 auto;text-align:center}
  .butterfly-flight{transition:translate .5s ease}
  body:not(.reading-projects) .butterfly-flight{translate:-42vw 4svh}
}
.falling-petal{position:absolute;top:0;left:0;display:block;aspect-ratio:110/160;opacity:0;pointer-events:none;will-change:transform,opacity;filter:drop-shadow(1px 3px 3px #0004);transform-origin:50% 35%}
.falling-petal svg{display:block;width:100%;height:100%;overflow:visible}
body.motion-off .falling-petals,body.flower-preview-open .falling-petals{display:none}
@media(prefers-reduced-motion:reduce){.falling-petals{display:none}}

/* Keep the original material motion while presenting complete water and veil frames. */
@property --sheer-wind-skew { syntax: "<angle>"; inherits: false; initial-value: -.2deg; }
@property --sheer-wind-scale { syntax: "<number>"; inherits: false; initial-value: 1.003; }
.curtain-fabric {
  will-change: auto;
  transform: skewX(var(--sheer-wind-skew,-.2deg)) scaleX(var(--sheer-wind-scale,1.003));
  animation-name: sheer-paint-breathe;
}
@keyframes sheer-paint-breathe {
  0% { --sheer-wind-skew: -.2deg; --sheer-wind-scale: 1.003; }
  50% { --sheer-wind-skew: .12deg; --sheer-wind-scale: 1.01; }
  100% { --sheer-wind-skew: .25deg; --sheer-wind-scale: 1.001; }
}


.scene-water.water-frame-ready { background:none;mask-image:none;-webkit-mask-image:none; }
.water-frame-ready > .water-photo { visibility:hidden; }

.curtain-track.sheer-viewport-source { visibility:hidden; }