/* Personal notes replace the name within the window; the selected flower stays in view. */
.shore-intro{transition:opacity .24s ease,visibility .24s}
.moon-stage.preview-open .shore-intro{opacity:0!important;visibility:hidden;pointer-events:none}
.flower-preview{left:var(--profile-left,10.5%);top:var(--profile-top,calc(24svh - 32px));bottom:auto;width:var(--profile-width,320px);max-height:var(--profile-height,64svh);display:flex;flex-direction:column;isolation:isolate;overflow:visible;background:none;border:0;border-radius:0;box-shadow:none;animation:none;text-shadow:0 2px 18px #000a}
.flower-preview:before{content:"";position:absolute;z-index:-1;inset:-50px -48px -40px -55px;background:radial-gradient(ellipse at 45% 46%,#020909e8 0%,#020909b8 40%,#02090950 61%,transparent 76%);pointer-events:none}
.preview-topline{position:relative;flex-shrink:0;height:46px;padding:0 0 10px;border:0;background:none}
.preview-index{display:flex;align-items:center;gap:11px;font-size:10px;letter-spacing:.14em;color:#b9b09b}
.preview-index:before{content:"";width:21px;height:1px;background:#c7bba478}
.preview-close{border-radius:0;font-size:22px;color:#b9bdb4;transform:translateX(10px)}
.preview-close:hover{background:none;color:#f1eadf}
.preview-copy{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:none;padding:13px 8px 20px 0;mask-image:linear-gradient(#000 calc(100% - 16px),transparent)}
.preview-copy::-webkit-scrollbar{display:none}
.preview-type{display:none}
#ning-water-garden .preview-copy h3{font:400 clamp(34px,3.15vw,44px)/1.12 Georgia,serif;letter-spacing:-.035em;margin:0 0 25px;color:#eeeade;text-wrap:pretty}
#ning-water-garden #flower-preview-description{color:#d9ddd2;font-size:13px;line-height:2}
#ning-water-garden .profile-details{gap:23px;margin-top:28px}
.profile-details li{border:0;padding:0}
.profile-date{font-size:10px;letter-spacing:.08em;color:#a69e8f;margin-bottom:8px}
#ning-water-garden .profile-details h4{color:#e4e3d7}
#ning-water-garden .profile-details p{color:#bfc4bb;font-size:12px}
.profile-footer{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:54px;margin:0;padding:6px 0;border:0;color:#a69e8f}
.profile-pagination{font:11px/1.5 Arial,sans-serif;letter-spacing:.08em}
.profile-controls{display:flex;gap:8px}
.profile-controls button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:0;background:none;color:#aaa99d;font:23px/1 Georgia,serif;cursor:pointer;transition:color .2s,transform .2s}
.profile-controls button:hover{background:none;color:#f0e9d7;transform:translateX(2px)}
.profile-controls button[data-profile-step="-1"]:hover{transform:translateX(-2px)}
.profile-links{border:0;padding-top:0}
.profile-controls button:focus-visible{outline:1px solid #e8d6a2;outline-offset:3px}
.flower-art{transform-origin:50% 100%;transition:transform .6s cubic-bezier(.2,.65,.3,1)}
.flower-stems{transition:filter .5s}
.moon-stage.preview-open .flower-stems{filter:brightness(.75) saturate(.88)}
.flower-hotspots .flower-hit{z-index:1}
.shore-flower .flower-selection-art{opacity:0;filter:brightness(1.12);mask-image:radial-gradient(ellipse 23% 16% at var(--profile-focus-x,23%) var(--profile-focus-y,14%),#000 35%,transparent 100%);clip-path:polygon(0 0,97% 0,100% 3%,100% 70.6%,0 70.6%);transition:opacity .45s}
.moon-stage.preview-open .flower-selection-art{opacity:1}
.flower-hit[aria-expanded=true] .flower-label{opacity:1;transform:translate(-50%,0)}
.moon-stage.preview-open .flower-label{background:none;border:0;box-shadow:none;color:#e3dccb;text-shadow:0 1px 5px #000,0 1px 12px #000}
@media(max-width:1000px){
  .flower-preview{left:8%;right:8%;top:4svh;width:auto;max-height:38svh}
  .moon-stage.preview-open .flower-art{transform:translateX(-50%) scale(.56)}
  .preview-topline{height:44px;padding:0 0 8px}
  .preview-copy{padding:8px 8px 18px 0}
  #ning-water-garden .preview-copy h3{font-size:34px;margin-bottom:18px}
  .profile-footer{min-height:50px;margin:0;padding:3px 0}
  .profile-controls button{width:44px;height:44px}
  body.flower-preview-open .index-toggle{visibility:hidden;pointer-events:none}
}
@media(max-width:760px){
  .flower-preview{max-height:42svh}
  .moon-stage.preview-open .flower-art{transform:translateX(-50%) scale(.72)}
  .preview-index{font-size:10px}
  .flower-hit:after{width:20px;height:20px;font-size:13px}
}
@media(max-height:540px) and (min-width:761px){
  .flower-preview{left:var(--profile-left,10.5%);right:auto;top:var(--profile-top,8svh);width:var(--profile-width,300px);max-height:var(--profile-height,70svh)}
  .moon-stage.preview-open .flower-art{transform:translateX(-42%) scale(.94)}
}
@media(prefers-reduced-motion:reduce){.shore-intro,.flower-art,.flower-stems,.flower-selection-art{transition:none!important}}
/* Match the compact-pane composition; opening a profile keeps each bloom in place. */
@media(min-width:640px) and (max-width:760px) and (min-height:540px) and (max-height:820px){
  .flower-preview{left:8%;right:auto;top:12svh;width:38%;max-height:69svh}
  .flower-preview:before{inset:-18px -16px -18px -22px}
  .moon-stage.preview-open .flower-art{transform:translateX(-50%)}
  .preview-close{transform:none}
  .preview-copy{padding:8px 6px 18px 0}
  #ning-water-garden .preview-copy h3{font-size:30px;margin-bottom:16px}
  #ning-water-garden .flower-preview #flower-preview-description{font-size:14px;line-height:1.7}
  #ning-water-garden .flower-preview .profile-details :is(h4,p){font-size:14px;line-height:1.7}
  #ning-water-garden .profile-details{gap:18px;margin-top:22px}
  .profile-footer{min-height:48px}
}
body.motion-off .shore-intro,body.motion-off .flower-art,body.motion-off .flower-stems,body.motion-off .flower-selection-art{transition:none!important}

/* Botanical notes: a local petal highlight and a quiet curved leader. The
   existing cutout supplies a static mask; only opacity and transforms move. */
.flower-hit{--flower-marker-size:clamp(20px,calc(10px + var(--bouquet-height) * .025),32px);--petal-mask-size:333.333% 370.37%;--petal-mask-position:11.4286% 0%}
.flower-two{--petal-mask-size:370.37% 434.783%;--petal-mask-position:58.9041% 9.0909%}
.flower-three{--petal-mask-size:344.828% 384.615%;--petal-mask-position:98.5915% 8.1081%}
.flower-four{--petal-mask-size:294.118% 400%;--petal-mask-position:6.0606% 37.3333%}
.flower-five{--petal-mask-size:294.118% 400%;--petal-mask-position:66.6667% 34.6667%}
.flower-six{--petal-mask-size:370.37% 416.667%;--petal-mask-position:98.6301% 57.8947%}
.flower-hit:before{inset:0;border-radius:0;background:radial-gradient(ellipse at 50% 43%,#fff7de66,#d7c7f326 50%,transparent 78%);mask-image:url('assets/flower-cutout-v1.webp');mask-size:var(--petal-mask-size);mask-position:var(--petal-mask-position);mask-repeat:no-repeat;pointer-events:none;transition:opacity .42s ease}
.flower-hit[aria-expanded=true]:before{opacity:.55}
.flower-hit:is(:hover,:focus-visible):before{opacity:1}
.flower-hit:after{width:var(--flower-marker-size);height:var(--flower-marker-size);font-size:calc(var(--flower-marker-size) * .65);transform:scale(1);transform-origin:center;transition:opacity .35s ease,color .35s ease,border-color .35s ease,transform .42s cubic-bezier(.2,.65,.3,1)}
.flower-hit:is(:hover,:focus-visible):after{transform:scale(1.12);border-color:#fff}
#ning-water-garden .flower-hit:focus-visible{outline:0}
.flower-hit:focus-visible:after{outline:1px solid #ffffff99;outline-offset:3px}
.flower-hotspots .flower-hit:is(:hover,:focus-visible){z-index:4}
.flower-hotspots .flower-label{left:calc(47% + var(--flower-marker-size)/2);top:calc(62% + var(--flower-marker-size)/2);padding:0;background:none;border:0;border-radius:0;box-shadow:none;color:#f1edde;font:12px/1.4 Arial,sans-serif;letter-spacing:.035em;text-align:right;text-shadow:0 1px 4px #031012,0 2px 12px #031012;transform:translate(calc(-100% - 58px),calc(-100% - 34px));transform-origin:100% 100%;opacity:0;transition:opacity .32s ease,transform .42s cubic-bezier(.2,.65,.3,1)}
.flower-label:after{content:"";position:absolute;right:calc(var(--flower-marker-size) / 2 - 69px);top:calc(100% + 5px);width:84px;height:38px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 38'%3E%3Cpath d='M25 1Q54 3 70 26' fill='none' stroke='%23eee9da' stroke-opacity='.55' stroke-width='.8' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;pointer-events:none}
.flower-hotspots .flower-hit:is(:hover,:focus-visible,[aria-expanded=true]) .flower-label{opacity:1;transform:translate(calc(-100% - 58px),calc(-100% - 40px))}
.flower-hotspots:has(.flower-hit:hover) .flower-hit[aria-expanded=true]:not(:hover) .flower-label{opacity:0}
@media(max-width:639px){
  .flower-hotspots .flower-label{text-align:center;font-size:11px;transform:translate(-50%,calc(-100% - 38px))}
  .flower-hotspots .flower-hit:is(:hover,:focus-visible,[aria-expanded=true]) .flower-label{transform:translate(-50%,calc(-100% - 44px))}
  .flower-label:after{right:calc(50% - 28px);width:56px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 38'%3E%3Cpath d='M28 1Q22 12 28 24' fill='none' stroke='%23eee9da' stroke-opacity='.55' stroke-width='.8' stroke-linecap='round'/%3E%3C/svg%3E")}
}
@media(hover:none){.flower-hit:hover:after{transform:none}}
@media(prefers-reduced-motion:reduce){.flower-hit:before,.flower-hit:after,.flower-hotspots .flower-label{transition:none!important}.flower-hit:is(:hover,:focus-visible):after{transform:none}}
body.motion-off .flower-hit:before,body.motion-off .flower-hit:after,body.motion-off .flower-label{transition:none!important}
body.motion-off .flower-hit:is(:hover,:focus-visible):after{transform:none}