:root{color-scheme:dark;font-family:Georgia,serif;background:#10192f;color:#fff3dc}*{box-sizing:border-box}body{margin:0;min-height:100svh;display:grid;place-items:center;background:radial-gradient(ellipse at 30% 15%,#3b315f,transparent 55%),radial-gradient(ellipse at 80% 85%,#123d50,transparent 60%),#10192f}#gate{width:min(440px,100%);padding:34px 28px;text-align:center}.monogram{width:78px;height:88px;display:grid;place-items:center;margin:0 auto 25px;border:1px solid #d5ae6780;border-radius:5px 16px 16px 5px;box-shadow:5px 3px #d5ae6725;font-size:45px;color:#edc889}.eyebrow{letter-spacing:.24em;font:12px system-ui;color:#e7bd72}h1{font-size:clamp(30px,7vw,39px);font-weight:400;margin:12px 0}.intro{font-size:18px;color:#d7d2e3;line-height:1.5}form{margin-top:30px;text-align:left}label{display:block;font:16px system-ui;margin-bottom:10px}.input-row{display:flex;min-height:58px;border:1px solid #aaa4be75;border-radius:12px;overflow:hidden;background:#080f2290}.input-row:focus-within{outline:2px solid #e7bd72;outline-offset:3px}input{width:100%;min-width:0;padding:16px 12px;background:none;border:0;color:white;font:18px ui-monospace,monospace;outline:none}button{cursor:pointer;font:16px system-ui;border:0}#show{padding:0 15px;color:#e8ca96;background:transparent;min-width:64px}#unlock{width:100%;border-radius:28px;padding:17px 20px;margin-top:20px;background:#e7bd72;color:#17213a;font-weight:650}button:focus-visible{outline:3px solid white;outline-offset:4px}button:disabled{opacity:.6;cursor:wait}#message{min-height:44px;font:15px/1.5 system-ui;text-align:center;color:#ffc5b7}#book-frame{position:fixed;inset:34px 0 0;width:100%;height:calc(100% - 34px);border:0;background:#10192f}#lock{position:fixed;top:3px;right:10px;z-index:3;border:1px solid #e7bd7255;background:#10192fe8;color:#e7bd72;border-radius:20px;font-size:12px;padding:7px 12px}[hidden]{display:none!important}body.unlocked{display:block;overflow:hidden}

#reader-tools{position:fixed;top:0;left:0;right:0;min-height:42px;display:flex;align-items:center;gap:10px;padding:5px 12px;background:#10192f;z-index:3;font:13px system-ui}#reader-tools button{font-size:13px;padding:5px 10px;border:1px solid #e7bd7255;border-radius:20px;background:transparent;color:#e7bd72}#profile{margin-right:auto;color:#d5ccdf}#reader-tools #lock{position:static}#book-frame{top:42px;height:calc(100% - 42px)}@media(max-width:520px){#reader-tools{gap:5px;flex-wrap:wrap}#profile{display:none}#reader-tools button{font-size:12px}body.unlocked #book-frame{top:72px;height:calc(100% - 72px)}}

/* The supplied illustration remains still; separate foreground flowers sway. */
body{background:#0b2038;position:relative;isolation:isolate}
.garden{position:fixed;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
.garden-image{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.garden-shade{position:absolute;inset:0;background:linear-gradient(90deg,transparent 48%,#07182b40 62%,#07182bd9 83%,#07182bf2),linear-gradient(0deg,#06172b70,transparent 22%)}
#gate{position:relative;width:clamp(310px,29vw,420px);margin-left:auto;margin-right:4vw;padding:36px 22px;text-align:left;text-shadow:0 2px 20px #03112599}
#gate .eyebrow{font-size:12px;line-height:1.7;letter-spacing:.2em;color:#f2d9a0}
#gate h1{font-size:clamp(54px,6vw,88px);line-height:1.08;color:#fff0cb;margin:8px 0 20px;letter-spacing:-.035em}
#gate .intro{max-width:280px;color:#f1eced;font-size:19px}
#gate form{margin-top:28px}
.input-row{background:#07182bc2;border-color:#d7c69d80;backdrop-filter:blur(8px)}
#unlock{box-shadow:0 7px 30px #06102050;background:#ead09a;transition:background .2s,transform .2s}
#unlock:hover{background:#f6dfb1;transform:translateY(-1px)}
#message{text-shadow:none}
#motion-toggle{position:fixed;left:20px;bottom:18px;z-index:2;border:1px solid #ffffff40;border-radius:24px;background:#07182bb8;color:#fff1d3;padding:9px 15px;font-size:13px}
body.unlocked .garden,body.unlocked #motion-toggle{display:none}
@media(max-width:760px){
 body{display:block}
 .garden{height:65svh;min-height:350px}
 .garden-image{object-position:50% 38%}
 .garden-shade{background:linear-gradient(0deg,#0b2038 0%,#0b203894 16%,transparent 45%)}
 #gate{width:min(100%,460px);margin:0 auto;padding:43svh 28px 38px;text-align:center}
 #gate h1{font-size:52px;margin:6px 0 10px}
 #gate .eyebrow{font-size:11px}
 #gate .intro{margin:0 auto;font-size:17px}
 #gate form{margin-top:22px;text-align:left}
 #motion-toggle{position:absolute;left:12px;top:12px;bottom:auto;font-size:12px;padding:8px 12px}
}

/* Foreground flowers: stationary hearts, individually hinged petals. */
.petal-flower{position:absolute;z-index:1;width:var(--flower-size);height:var(--flower-size);perspective:650px;opacity:0;pointer-events:none;transition:opacity .6s}
.petal-flower.petals-ready{opacity:1}
.petal-pivot{position:absolute;left:50%;bottom:50%;width:60%;height:60%;transform-origin:50% 100%;transform:translateX(-50%) rotate(var(--angle));transform-style:preserve-3d}
.petal-image{display:block;width:100%;height:100%;object-fit:contain;transform-origin:50% 89%;animation:petal-flutter var(--duration) ease-in-out var(--delay) infinite;filter:drop-shadow(0 4px 3px #041c3344);will-change:transform}
.flower-heart{position:absolute;left:35%;top:35%;width:30%;height:30%;object-fit:contain;z-index:3;transform:translateZ(12px);filter:drop-shadow(0 3px 2px #06152844)}
.upper-left{--flower-size:clamp(200px,23vw,360px);left:-5%;top:-13%}
.upper-middle{--flower-size:clamp(180px,20vw,290px);left:26%;top:-15%}
.upper-right{--flower-size:clamp(210px,23vw,350px);right:-7%;top:-10%}
.lower-left{--flower-size:clamp(260px,28vw,430px);left:-7%;bottom:-19%}
.lower-right{--flower-size:clamp(190px,21vw,330px);right:-8%;bottom:-21%}
@keyframes petal-flutter{0%,100%{transform:rotateX(8deg) rotateY(-4deg) rotateZ(-2deg) scaleY(.97)}35%{transform:rotateX(-18deg) rotateY(5deg) rotateZ(3deg) scaleY(1.035)}70%{transform:rotateX(14deg) rotateY(-7deg) rotateZ(-3deg) scaleY(.95)}}
.flowers-paused .petal-image,.page-hidden .petal-image{animation-play-state:paused}
@media(max-width:760px){
 .upper-left{--flower-size:48vw;left:-17%;top:-12%}
 .upper-middle{--flower-size:40vw;left:35%;top:-12%}
 .upper-right{--flower-size:43vw;right:-25%;top:1%}
 .lower-left{--flower-size:54vw;left:-20%;bottom:-23%}
 .lower-right{--flower-size:46vw;right:-26%;bottom:-22%}
}
@media(prefers-reduced-motion:reduce){.petal-image{animation:none}.petal-flower{transition:none}}

@media(prefers-reduced-motion:reduce){#motion-toggle{display:none}#unlock{transition:none}}
.garden-shade{z-index:2}