*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:Georgia,"Times New Roman",serif;color:#123d6d;background:#dceefa}button,a{font:inherit}.screen,.room{min-height:100vh}.screen{position:fixed;inset:0;display:none}.screen.active{display:block;z-index:20}
.intro{background:url("assets/intro.webp") center/cover no-repeat}
.intro-copy{position:absolute;left:18%;right:18%;bottom:3.5%;text-align:center;color:#fff;text-shadow:0 2px 8px #122d3f;line-height:1.32;padding:1.2rem 2rem;border:1px solid rgba(235,204,137,.75);background:rgba(13,38,45,.40);backdrop-filter:blur(2px)}
.intro-copy h1{font-size:clamp(2.4rem,4.8vw,5.4rem);line-height:.95;margin:0 0 .6rem;letter-spacing:.03em;text-transform:uppercase}.intro-copy h1 span{display:block;font-size:.53em;font-weight:400;letter-spacing:.12em}.intro-copy .lead{font-size:clamp(1rem,1.5vw,1.5rem);font-style:italic}.intro-copy p{font-size:clamp(.88rem,1.15vw,1.18rem);margin:.45rem 0}.intro-copy h3{color:#f2d38c;font-size:clamp(1.05rem,1.5vw,1.5rem);margin:.55rem 0}.intro-copy button{border:1px solid #d7a847;border-radius:999px;background:#092f58;color:#fff;padding:.75rem 2.2rem;font-style:italic;font-size:clamp(1rem,1.3vw,1.35rem);cursor:pointer;box-shadow:0 8px 25px #07182c80}
.gate{background:radial-gradient(circle,#fff 0,#d9efff 28%,#86b8dc 70%);overflow:hidden}.door-frame{position:absolute;inset:0;perspective:1600px}.door{position:absolute;top:0;width:50.2%;height:100%;background:linear-gradient(90deg,#315f87,#69a8d1 48%,#28547c);border:12px solid #f5f1e5;box-shadow:inset 0 0 0 4px #d1a64b,inset 0 0 80px #0a3159}.left-door{left:0;transform-origin:left}.right-door{right:0;transform-origin:right}.gate.open .left-door{animation:openL 1.8s ease-in-out forwards}.gate.open .right-door{animation:openR 1.8s ease-in-out forwards}.light{position:absolute;inset:0;background:#fff;opacity:0}.gate.open .light{animation:flash 1.8s ease-in-out forwards}@keyframes openL{to{transform:rotateY(-105deg)}}@keyframes openR{to{transform:rotateY(105deg)}}@keyframes flash{55%{opacity:.15}100%{opacity:1}}
.castle{display:none}.castle.active{display:block}.room{display:none;position:relative;background-position:center;background-size:cover;background-attachment:fixed}.room.current{display:block}.hall{background-image:url("assets/hall.webp")}.heart{background-image:linear-gradient(#09284b66,#09284b66),url("assets/heart.webp")}.mind{background-image:linear-gradient(#09284b55,#09284b55),url("assets/mind.webp")}.butterfly-room{background-image:linear-gradient(#d8f1ff33,#d8f1ff33),url("assets/butterfly.webp")}.garden{background-image:linear-gradient(#143d2760,#143d2760),url("assets/garden.webp")}.releases{background-image:linear-gradient(#062e5160,#062e5160),url("assets/releases.webp")}
.compass{position:fixed;right:22px;top:22px;z-index:12;width:72px;height:72px;border-radius:50%;border:4px double #e6c277;background:radial-gradient(circle,#183f68 0 35%,#f5e7bd 36% 43%,#193f68 44%);color:#f6d98e;box-shadow:0 7px 20px #001d3b80;cursor:pointer}.compass span{display:block;font-size:1.9rem;transform:rotate(45deg)}.compass b{position:absolute;top:3px;left:31px;font-size:.7rem}
.hall-hotspots{position:absolute;left:35.5%;top:47.7%;width:33.7%;height:39.5%;display:flex;flex-direction:column;justify-content:space-around;padding:3.2% 4.3% 2.7%}.route{display:grid;grid-template-columns:42px 1fr 30px;align-items:center;min-height:17%;padding:0 4%;color:#153f70;text-decoration:none;text-transform:uppercase;font-weight:700;letter-spacing:.02em;cursor:pointer}.route span{color:#c49b45;font-size:1.5rem;text-align:center}.route b{color:#c49b45;font-size:1.6rem}.route:hover{background:#fff8df55;border-radius:12px;transform:translateX(4px)}
.room-title{position:relative;z-index:3;display:flex;align-items:center;gap:2rem;padding:28px 105px 20px 28px;color:#fff;text-shadow:0 2px 7px #001b31;background:linear-gradient(#071e3999,transparent)}.room-title h2{font-size:clamp(2.1rem,4vw,4.6rem);margin:0}.room-title p{font-size:1.2rem}.back{border:1px solid #e3bd66;background:#0d3c68dd;color:#fff;border-radius:999px;padding:.7rem 1.2rem;cursor:pointer}
.book-gallery{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(155px,230px));justify-content:center;gap:34px;padding:5vh 5vw 12vh}.new-books{grid-template-columns:repeat(3,minmax(180px,260px))}.book-slot{background:#eef8ffeb;border:1px solid #dab45d;border-radius:18px;padding:16px;text-align:center;box-shadow:0 18px 40px #001b35aa;transition:.25s}.book-slot:hover{transform:translateY(-8px)}.cover{aspect-ratio:2/3;display:grid;place-items:center;background:linear-gradient(145deg,#d6edfa,#fff,#a8cfe8);border:8px double #d1a84e;color:#184875;font-style:italic;font-size:1.25rem}.book-slot h3{margin:.8rem 0 .2rem}.book-slot p{margin:0;color:#49667e}
.butterflies,.flowers{position:absolute;inset:15% 5% 5%}.flutter,.flower{position:absolute;border:0;background:transparent;cursor:pointer;filter:drop-shadow(0 6px 6px #14304c66);transition:.25s}.flutter{font-size:clamp(3rem,7vw,7rem)}.flutter:hover,.flower:hover{transform:scale(1.2)}.f1{left:8%;top:18%}.f2{left:32%;top:5%}.f3{left:58%;top:28%}.f4{left:77%;top:10%}.f5{left:21%;top:57%}.f6{left:68%;top:63%}.flower{font-size:clamp(3rem,6vw,6rem);color:#fff;text-shadow:0 0 10px #154d36}.fl1{left:10%;top:35%}.fl2{left:28%;top:62%}.fl3{left:46%;top:38%}.fl4{left:62%;top:68%}.fl5{left:78%;top:35%}.fl6{left:88%;top:65%}
.modal{position:fixed;inset:0;z-index:50;display:none;place-items:center;background:#00162bb8;padding:18px}.modal.open{display:grid}.close{position:absolute;right:15px;top:10px;border:0;background:transparent;color:#173e68;font-size:2.3rem;cursor:pointer}.map-shell{position:relative;width:min(1120px,96vw);aspect-ratio:3/2;background:url("assets/map.webp") center/cover no-repeat;box-shadow:0 20px 80px #000;border-radius:12px;overflow:hidden}.map-cover-title{position:absolute;top:4%;left:37%;right:37%;height:20%;background:#ead5a9e8;border-radius:30% 30% 10% 10%;display:grid;place-items:center;text-transform:uppercase;font-size:clamp(1.6rem,3vw,3rem);color:#153d68;font-weight:700}.map-links{position:absolute;inset:25% 10% 9%;display:grid;grid-template-columns:1fr 1fr 1fr;gap:2%}.map-links button{align-self:center;border:1px solid #9f752c;background:#f2dfb8dc;color:#193f68;padding:.65rem;border-radius:12px;font-weight:700;cursor:pointer;box-shadow:0 5px 16px #4c341855}.map-links button:hover{background:#fff0c7}
.dialog{position:relative;width:min(620px,95vw);background:linear-gradient(145deg,#eff9ff,#d7edfb);border:7px double #cfaa55;border-radius:24px;padding:36px;color:#153f6a;box-shadow:0 20px 80px #000}.dialog h2{text-align:center;font-size:2.2rem}.dialog label{display:block;margin:12px 0}.dialog input,.dialog textarea{width:100%;border:1px solid #b99546;border-radius:10px;padding:10px;background:#fff}.dialog button[type=submit]{display:block;margin:18px auto 0;border:1px solid #c69e48;border-radius:999px;background:#123f70;color:#fff;padding:.75rem 2rem}.quote-dialog{text-align:center;font-size:1.45rem;font-style:italic}.quote-mark{font-size:5rem;color:#c4983f;height:50px}
@media(max-width:900px){.intro-copy{left:4%;right:4%;bottom:1.5%;padding:.8rem}.intro-copy p{font-size:.8rem}.intro-copy h1{font-size:2.1rem}.hall{background-position:center}.hall-hotspots{position:absolute;left:16%;right:16%;top:auto;bottom:5%;width:auto;height:auto;background:#e4f3f6ef;border:2px solid #d5ad55;border-radius:20px;padding:10px}.route{min-height:44px}.book-gallery,.new-books{grid-template-columns:repeat(2,minmax(130px,1fr));gap:16px}.room-title{padding:20px 90px 15px 15px;gap:10px}.room-title h2{font-size:1.8rem}.room-title p{display:none}.compass{width:58px;height:58px}.map-links{grid-template-columns:1fr 1fr}.map-cover-title{left:27%;right:27%}}

/* ===== Redesigned home experience ===== */
.intro{
  isolation:isolate;
  overflow:auto;
  background-image:url("assets/intro_castle.webp");
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
}
.intro::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:linear-gradient(90deg,rgba(8,32,52,.12),rgba(8,32,52,.02) 42%,rgba(8,32,52,.18));
}
.intro-vignette{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(5,28,45,.08),transparent 45%,rgba(5,25,41,.34)),
    radial-gradient(circle at 50% 42%,transparent 38%,rgba(4,24,39,.24) 100%);
}
.intro-panel{
  width:min(660px,calc(100% - 40px));
  min-height:calc(100vh - 48px);
  margin:24px 5vw 24px auto;
  padding:clamp(24px,4vh,48px) clamp(24px,4vw,58px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
  color:#153b62;
  text-shadow:none;
  border:1px solid rgba(201,166,90,.82);
  outline:1px solid rgba(255,255,255,.7);
  outline-offset:-10px;
  border-radius:3px;
  background:linear-gradient(145deg,rgba(255,252,242,.94),rgba(238,247,248,.91));
  box-shadow:0 24px 70px rgba(6,35,57,.28),inset 0 0 55px rgba(255,255,255,.7);
  backdrop-filter:blur(8px);
}
.intro-logo{width:clamp(72px,8vw,108px);height:clamp(72px,8vw,108px);object-fit:contain;margin:0 auto 4px;filter:drop-shadow(0 5px 10px rgba(22,58,91,.14))}
.intro-panel .eyebrow{margin:0;text-transform:uppercase;letter-spacing:.34em;font-size:clamp(.72rem,.9vw,.9rem);color:#9b7837;font-weight:700}
.intro-panel h1{margin:.18em 0 .15em;font-size:clamp(2.8rem,5.3vw,5.8rem);line-height:.9;font-weight:400;letter-spacing:-.035em;color:#163e68;text-transform:none;font-variant:normal}
.intro-panel .lead{max-width:490px;margin:.65rem auto 0;font-size:clamp(1rem,1.28vw,1.28rem);line-height:1.55;font-style:italic;color:#4b647b}
.ornament{display:flex;align-items:center;gap:12px;width:78%;margin:1.25rem auto .85rem;color:#c29a4c;font-size:.8rem}
.ornament::before,.ornament::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,#c29a4c)}
.ornament::after{background:linear-gradient(90deg,#c29a4c,transparent)}
.journey-title{margin:0 auto .65rem;text-transform:uppercase;letter-spacing:.13em;font-size:clamp(.82rem,1vw,1rem);font-weight:700;color:#9b7837}
.intro-text{max-width:520px;margin:.25rem auto;font-size:clamp(.88rem,1vw,1rem);line-height:1.65;color:#36546d}
.intro-text-secondary{color:#4b6377}
.final-line{margin:1rem 0 .9rem;font-size:clamp(1.05rem,1.4vw,1.35rem);font-weight:700;font-style:italic;color:#9a7634}
.enter-button{align-self:center;display:flex;align-items:center;gap:14px;border:1px solid #c89f4b;border-radius:999px;background:linear-gradient(180deg,#1e5688,#123e69);color:#fff;padding:.9rem 1.25rem .9rem 1.65rem;font-size:clamp(.94rem,1.15vw,1.12rem);font-style:italic;cursor:pointer;box-shadow:0 11px 28px rgba(8,43,72,.3),inset 0 1px rgba(255,255,255,.3);transition:transform .25s,box-shadow .25s,filter .25s}
.enter-button b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.16);font-style:normal;font-weight:400;transition:transform .25s}
.enter-button:hover{transform:translateY(-3px);box-shadow:0 15px 32px rgba(8,43,72,.38),inset 0 1px rgba(255,255,255,.3);filter:brightness(1.06)}
.enter-button:hover b{transform:translateX(3px)}
.enter-button:focus-visible{outline:3px solid #f4d88e;outline-offset:4px}
.scroll-hint{position:fixed;left:50%;bottom:13px;transform:translateX(-50%);width:23px;height:38px;border:1px solid rgba(255,255,255,.75);border-radius:14px;filter:drop-shadow(0 2px 5px rgba(0,0,0,.35));opacity:.8}
.scroll-hint span{position:absolute;left:50%;top:7px;width:3px;height:7px;border-radius:5px;background:#fff;transform:translateX(-50%);animation:scrollDot 1.7s infinite}
@keyframes scrollDot{0%{opacity:0;transform:translate(-50%,0)}25%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translate(-50%,14px)}}

.gate{overflow:hidden;background:#e9f6ff}
.gate-scene{position:absolute;inset:0;overflow:hidden;background:url("assets/gate_open.webp") center/cover no-repeat;perspective:1800px}
.gate-scene::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(circle at center,transparent 20%,rgba(5,29,48,.11) 100%);pointer-events:none}
.gate-panel{position:absolute;top:0;bottom:0;width:50.15%;z-index:4;background-image:url("assets/blue_gate.webp");background-size:200% 100%;background-repeat:no-repeat;box-shadow:0 0 35px rgba(7,32,53,.34);backface-visibility:hidden}
.gate-left{left:0;background-position:left center;transform-origin:left center}
.gate-right{right:0;background-position:right center;transform-origin:right center}
.gate.open .gate-left{animation:realOpenLeft 2.35s cubic-bezier(.62,.02,.22,1) forwards}
.gate.open .gate-right{animation:realOpenRight 2.35s cubic-bezier(.62,.02,.22,1) forwards}
.gate-glow{position:absolute;inset:0;z-index:3;background:radial-gradient(circle at 50% 53%,rgba(255,255,255,.94),rgba(255,230,166,.35) 20%,transparent 53%);opacity:0;pointer-events:none}
.gate.open .gate-glow{animation:gateGlow 2.5s ease forwards}
.gate-copy{position:absolute;left:50%;bottom:8%;z-index:2;transform:translateX(-50%);width:min(530px,85vw);padding:16px 28px;text-align:center;color:#fff;text-shadow:0 2px 12px rgba(8,35,55,.78);opacity:0}
.gate-copy p{margin:0;text-transform:uppercase;letter-spacing:.23em;font-size:clamp(.72rem,1vw,.95rem)}
.gate-copy span{display:block;margin-top:.25rem;font-size:clamp(1.55rem,3vw,3rem);font-style:italic}
.gate.open .gate-copy{animation:gateWords 2.4s .25s ease forwards}
@keyframes realOpenLeft{0%,12%{transform:rotateY(0)}100%{transform:rotateY(-112deg)}}
@keyframes realOpenRight{0%,12%{transform:rotateY(0)}100%{transform:rotateY(112deg)}}
@keyframes gateGlow{0%,20%{opacity:0}60%{opacity:.42}100%{opacity:.06}}
@keyframes gateWords{0%,35%{opacity:0;transform:translate(-50%,12px)}65%,100%{opacity:1;transform:translate(-50%,0)}}

@media(max-width:900px){
  .intro{background-position:37% center}
  .intro-panel{width:min(560px,calc(100% - 28px));min-height:auto;margin:14px auto;padding:26px 22px 30px;background:linear-gradient(145deg,rgba(255,252,242,.96),rgba(238,247,248,.94))}
  .intro-logo{width:72px;height:72px}
  .intro-panel h1{font-size:clamp(2.65rem,11vw,4.2rem)}
  .intro-text{font-size:.9rem;line-height:1.5}
  .intro-text-secondary{display:none}
  .scroll-hint{display:none}
  .gate-panel{background-size:200% 100%}
}
@media(max-width:520px){
  .intro{background-position:31% center}
  .intro-panel{margin:10px auto;width:calc(100% - 20px);padding:21px 17px 24px;outline-offset:-7px}
  .intro-panel .lead{line-height:1.4}
  .ornament{margin:.85rem auto .65rem}
  .journey-title{letter-spacing:.09em}
  .final-line{margin:.75rem 0}
  .enter-button{width:100%;justify-content:center;padding:.82rem .9rem;font-size:.91rem}
  .gate-copy{bottom:6%}
}
@media(prefers-reduced-motion:reduce){
  .scroll-hint span,.gate.open .gate-left,.gate.open .gate-right,.gate.open .gate-glow,.gate.open .gate-copy{animation-duration:.01ms!important;animation-delay:0s!important}
  .enter-button{transition:none}
}

/* ===== Hall and castle map — corrected immersive version ===== */
.hall{
  min-height:100vh;
  background-image:url("assets/hall.webp");
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:scroll;
  overflow:hidden;
}
.hall-hotspots{
  position:absolute;
  left:38.15%;
  top:51.1%;
  width:28.9%;
  height:35.7%;
  display:grid;
  grid-template-rows:repeat(5,1fr);
  gap:1.2%;
  padding:0;
  background:transparent;
  border:0;
}
.route{
  position:relative;
  display:block;
  width:100%;
  min-height:0;
  padding:0;
  border:0;
  border-radius:12px;
  background:transparent;
  color:transparent;
  cursor:pointer;
  overflow:hidden;
  transition:background-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.route span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.route:hover,.route:focus-visible{
  background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,243,198,.26),rgba(255,255,255,.04));
  box-shadow:inset 0 0 0 2px rgba(229,190,100,.58),0 4px 18px rgba(28,55,80,.16);
  transform:translateX(2px);
  outline:none;
}
.hall-verse{
  position:absolute;
  left:3.2%;
  bottom:2.4%;
  width:min(31vw,470px);
  margin:0;
  padding:.62rem 1.1rem;
  text-align:center;
  color:#1f4b76;
  font-size:clamp(.72rem,1vw,1rem);
  line-height:1.35;
  font-style:italic;
  letter-spacing:.015em;
  border:1px solid rgba(192,151,65,.78);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,252,240,.86),rgba(225,239,242,.84));
  box-shadow:0 6px 20px rgba(13,44,69,.16),inset 0 0 0 4px rgba(255,255,255,.3);
  backdrop-filter:blur(3px);
}
.hall-verse span{color:#b8872d;font-size:1.15em}

.compass{transition:transform .25s ease,filter .25s ease}
.compass:hover{transform:rotate(8deg) scale(1.06);filter:brightness(1.08)}
.compass:focus-visible{outline:3px solid #f4d88e;outline-offset:4px}

.map-modal{background:rgba(1,18,31,.74);backdrop-filter:blur(7px)}
.map-shell{
  width:min(1280px,96vw);
  max-height:94vh;
  aspect-ratio:3/2;
  background:url("assets/map.webp") center/contain no-repeat;
  border-radius:8px;
  box-shadow:0 28px 90px rgba(0,0,0,.72);
  overflow:visible;
}
.map-close{
  right:2.1%;
  top:2.1%;
  z-index:4;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:1px solid rgba(220,185,101,.9);
  border-radius:50%;
  background:rgba(22,53,76,.9);
  color:#f5deb0;
  font-size:2rem;
  line-height:1;
  box-shadow:0 5px 18px rgba(0,0,0,.35);
}
.map-close:hover{background:#224e72;transform:scale(1.05)}
.map-links{position:absolute;inset:0;display:block}
.map-room{
  position:absolute;
  border:0;
  border-radius:18px;
  background:transparent;
  color:transparent;
  cursor:pointer;
  transition:background-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.map-room span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.map-room:hover,.map-room:focus-visible{
  background:rgba(255,239,181,.18);
  box-shadow:inset 0 0 0 3px rgba(194,143,43,.68),0 0 26px rgba(255,222,128,.32);
  transform:scale(1.012);
  outline:none;
}
.map-heart{left:12.4%;top:23.8%;width:22.3%;height:28.8%}
.map-butterfly{left:39.2%;top:25.7%;width:19.1%;height:29.2%}
.map-garden{left:63.2%;top:24.7%;width:23.4%;height:30.2%}
.map-mind{left:19.5%;top:55.3%;width:19.4%;height:31.2%}
.map-hall{left:40.5%;top:56.2%;width:20.2%;height:31.5%}
.map-releases{left:63.2%;top:57.5%;width:20.7%;height:29.1%}

@media(max-width:900px){
  .hall{background-position:center center;min-height:100svh}
  .hall-hotspots{left:37.2%;top:50.4%;width:31.1%;height:37.6%;right:auto;bottom:auto;padding:0;background:transparent;border:0;border-radius:0}
  .route{min-height:0}
  .hall-verse{left:50%;bottom:1.3%;transform:translateX(-50%);width:min(88vw,520px);font-size:.72rem;padding:.46rem .75rem}
  .map-shell{width:98vw;max-height:88vh}
  .map-close{right:1.6%;top:1.5%;width:38px;height:38px;font-size:1.7rem}
}
@media(max-width:560px){
  .hall{background-size:auto 100%;background-position:center top}
  .hall-hotspots{left:35.6%;top:50.4%;width:34.5%;height:37.4%}
  .hall-verse{display:none}
  .map-modal{padding:4px;overflow:auto}
  .map-shell{width:1000px;max-width:none;max-height:none;flex:0 0 auto}
  .map-modal.open{display:flex;align-items:center;justify-content:flex-start;overflow:auto}
  .map-close{position:fixed;right:10px;top:10px}
}

/* ===== Fly with the Heart — immersive library ===== */
.heart{
  min-height:100vh;
  background-image:url("assets/heart.webp");
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:scroll;
  overflow:hidden;
  color:#173e69;
}
.heart::before{content:none}
.heart-back{
  position:absolute;left:2.1%;top:2.2%;z-index:8;
  border:1px solid rgba(186,143,61,.72);border-radius:999px;
  padding:.58rem 1.05rem;background:rgba(247,250,246,.88);color:#17426f;
  box-shadow:0 5px 18px rgba(34,65,91,.18);cursor:pointer;backdrop-filter:blur(4px)
}
.heart-back:hover,.heart-back:focus-visible{background:#fffaf0;transform:translateY(-1px);outline:2px solid #d5ae5f;outline-offset:2px}
.heart-verse{
  position:absolute;left:50%;bottom:1.35%;z-index:5;transform:translateX(-50%);
  width:min(390px,72vw);margin:0;padding:.62rem 1.5rem;text-align:center;
  color:#214d7b;font-size:clamp(.78rem,1vw,1.02rem);line-height:1.35;font-style:normal;
  border:1px solid rgba(188,145,63,.68);border-radius:42% 42% 38% 38% / 30% 30% 38% 38%;
  background:linear-gradient(180deg,rgba(255,250,235,.9),rgba(232,239,238,.9));
  box-shadow:0 7px 22px rgba(32,60,84,.15),inset 0 0 0 4px rgba(255,255,255,.34);
  backdrop-filter:blur(4px)
}
.heart-library{
  position:absolute;left:50%;bottom:9.2%;z-index:6;transform:translateX(-50%);
  width:min(930px,84vw);height:245px;display:flex;align-items:center;gap:10px;
  padding:16px 14px 12px;
  border:1px solid rgba(183,140,57,.58);border-radius:12px;
  background:linear-gradient(180deg,rgba(247,248,239,.93),rgba(218,232,235,.91));
  box-shadow:0 14px 36px rgba(34,61,81,.22),inset 0 0 0 5px rgba(255,255,255,.25);
  backdrop-filter:blur(8px)
}
.heart-library::before,.heart-library::after{content:"✦";position:absolute;top:7px;color:#bd8d39;font-size:.72rem;opacity:.8}
.heart-library::before{left:47%}.heart-library::after{right:47%}
.heart-viewport{flex:1;height:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;cursor:grab;scroll-behavior:smooth;overscroll-behavior-inline:contain}
.heart-viewport::-webkit-scrollbar{display:none}.heart-viewport.dragging{cursor:grabbing;scroll-behavior:auto;user-select:none}
.heart-track{display:flex;align-items:stretch;gap:19px;width:max-content;height:100%;padding:4px 6px 2px}
.heart-book{position:relative;display:flex;flex:0 0 126px;flex-direction:column;align-items:center;text-decoration:none;color:#173e69;transition:transform .25s ease,filter .25s ease}
.heart-book img{display:block;width:126px;height:184px;object-fit:cover;border:1px solid rgba(185,145,67,.72);border-radius:3px;box-shadow:0 8px 17px rgba(35,57,75,.22)}
.heart-book span{margin-top:7px;padding:.34rem .72rem;border:1px solid rgba(184,141,58,.62);border-radius:999px;background:rgba(255,250,238,.9);font-size:.64rem;letter-spacing:.055em;text-transform:uppercase;white-space:nowrap}
.heart-book:hover,.heart-book:focus-visible{transform:translateY(-6px) scale(1.025);filter:brightness(1.04);outline:none}
.heart-book:focus-visible img{outline:3px solid #d7af58;outline-offset:3px}
.heart-arrow{flex:0 0 39px;height:72px;border:1px solid rgba(177,134,51,.65);border-radius:999px;background:linear-gradient(#fffdf5,#dcebed);color:#224f7d;font-size:2.15rem;line-height:1;cursor:pointer;box-shadow:0 5px 14px rgba(34,58,78,.15);transition:transform .2s,background .2s}
.heart-arrow:hover,.heart-arrow:focus-visible{transform:scale(1.07);background:#fff9e9;outline:2px solid #d7ae58;outline-offset:2px}
.heart-gallery-hint{position:absolute;left:50%;bottom:7.25%;z-index:6;transform:translateX(-50%);margin:0;color:#2d5579;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;text-shadow:0 1px 3px #fff}
@media(max-width:900px){
  .heart{background-position:center top;background-size:auto 100%;min-height:100svh}
  .heart-library{bottom:8.7%;width:94vw;height:222px;padding:13px 8px 10px}
  .heart-track{gap:14px}.heart-book{flex-basis:112px}.heart-book img{width:112px;height:164px}.heart-book span{font-size:.57rem;padding:.3rem .55rem}
  .heart-arrow{flex-basis:34px;height:62px}.heart-verse{bottom:.8%;font-size:.72rem}.heart-gallery-hint{display:none}
}
@media(max-width:560px){
  .heart{background-position:center top}
  .heart-back{left:10px;top:10px;font-size:.78rem;padding:.48rem .78rem}
  .heart-library{bottom:6.6%;width:98vw;height:205px;border-radius:9px;padding:10px 4px 8px}
  .heart-track{gap:11px}.heart-book{flex-basis:101px}.heart-book img{width:101px;height:148px}.heart-book span{font-size:.51rem;padding:.28rem .42rem}
  .heart-arrow{flex-basis:29px;height:54px;font-size:1.75rem}.heart-verse{display:none}
}

/* ===== New illustrated opening screen ===== */
.intro{
  overflow:hidden;
  background-image:url("assets/intro_castle.webp") !important;
  background-position:center center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
}
.intro::before,.intro-vignette,.intro-panel,.scroll-hint{display:none !important}
.intro-enter-full{
  position:absolute;
  inset:0;
  z-index:5;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
}
.intro-enter-full:focus-visible{
  outline:4px solid rgba(255,224,145,.95);
  outline-offset:-10px;
}
@media (max-width:760px){
  .intro{background-position:center top !important;background-size:cover !important}
}

/* ===== Final cinematic entrance: full castle → parchment → one blue gate ===== */
.intro{
  background-color:#9fc8e4 !important;
  background-image:url("assets/intro_castle.webp") !important;
  background-size:contain !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  overflow:hidden !important;
}
.intro::before{
  display:block !important;
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(90deg,#9cc5e0 0%,transparent 18%,transparent 82%,#9cc5e0 100%);
  pointer-events:none;
}
.intro-enter-full{display:none !important}
.intro-enter{
  position:absolute;
  left:50%;
  bottom:clamp(18px,3.2vh,42px);
  z-index:3;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:.8rem;
  min-width:clamp(220px,24vw,340px);
  justify-content:center;
  padding:.85rem 1.55rem;
  border:2px solid #e4c572;
  border-radius:999px;
  color:#fff8df;
  background:linear-gradient(180deg,rgba(32,93,145,.94),rgba(13,58,101,.96));
  box-shadow:0 10px 28px rgba(6,34,59,.38),inset 0 1px 0 rgba(255,255,255,.45),0 0 0 4px rgba(255,247,212,.16);
  font-size:clamp(1rem,1.35vw,1.35rem);
  font-style:italic;
  letter-spacing:.04em;
  text-shadow:0 1px 3px rgba(0,0,0,.35);
  cursor:pointer;
  transition:transform .25s ease,filter .25s ease,box-shadow .25s ease;
}
.intro-enter b{font-style:normal;color:#f1d477;font-size:1.1em}
.intro-enter:hover{transform:translateX(-50%) translateY(-3px);filter:brightness(1.08);box-shadow:0 15px 35px rgba(6,34,59,.46),inset 0 1px 0 rgba(255,255,255,.45),0 0 24px rgba(240,210,117,.35)}
.intro-enter:focus-visible{outline:3px solid #fff4bf;outline-offset:5px}

.gate{
  overflow:hidden !important;
  background:#dceefa !important;
}
.gate-backdrop{
  position:absolute;
  inset:0;
  background:url("assets/hall.webp") center/cover no-repeat;
  filter:blur(2px) brightness(.9);
  transform:scale(1.025);
}
.gate-backdrop::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(8,34,58,.18);
}
.gate-card{
  position:absolute;
  left:50%;
  top:50%;
  z-index:2;
  height:min(100vh,1024px);
  aspect-ratio:3/4;
  transform:translate(-50%,-50%);
  perspective:1800px;
  overflow:visible;
  box-shadow:0 20px 70px rgba(4,25,45,.42);
}
.gate-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:url("assets/hall.webp") center/cover no-repeat;
}
.gate-panel{
  position:absolute !important;
  top:0 !important;
  bottom:0 !important;
  width:50.08% !important;
  z-index:3 !important;
  background-image:url("assets/blue_gate.webp") !important;
  background-size:200% 100% !important;
  background-repeat:no-repeat !important;
  box-shadow:none !important;
  backface-visibility:hidden;
}
.gate-left{left:0 !important;background-position:left center !important;transform-origin:left center !important}
.gate-right{right:0 !important;background-position:right center !important;transform-origin:right center !important}
.gate.open .gate-left{animation:finalOpenLeft 2.1s cubic-bezier(.62,.02,.2,1) forwards !important}
.gate.open .gate-right{animation:finalOpenRight 2.1s cubic-bezier(.62,.02,.2,1) forwards !important}
@keyframes finalOpenLeft{0%,8%{transform:rotateY(0)}100%{transform:rotateY(-108deg)}}
@keyframes finalOpenRight{0%,8%{transform:rotateY(0)}100%{transform:rotateY(108deg)}}
.parchment-button{
  position:absolute;
  left:22%;
  right:22%;
  top:76.5%;
  height:7.5%;
  z-index:6;
  border:0;
  border-radius:999px;
  color:transparent;
  background:transparent;
  cursor:pointer;
}
.parchment-button:hover,.parchment-button:focus-visible{
  background:rgba(255,236,166,.16);
  box-shadow:0 0 0 3px rgba(235,193,88,.68),0 0 26px rgba(255,224,132,.48);
  outline:none;
}
.gate.open .parchment-button{pointer-events:none;opacity:0}
.gate-instruction{
  position:absolute;
  z-index:5;
  left:50%;
  bottom:10px;
  transform:translateX(-50%);
  margin:0;
  padding:.42rem .85rem;
  border-radius:999px;
  color:#f8e8b0;
  background:rgba(8,37,62,.72);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-align:center;
  pointer-events:none;
}
.gate.open .gate-instruction{opacity:0;transition:opacity .2s}

@media(max-width:900px){
  .intro{background-size:contain !important;background-position:center center !important}
  .intro::before{background:linear-gradient(90deg,#9cc5e0 0%,transparent 8%,transparent 92%,#9cc5e0 100%)}
  .gate-card{height:min(100svh,1024px);max-width:100vw}
  .gate-instruction{display:none}
}
@media(max-width:560px){
  .intro{background-size:cover !important;background-position:center center !important}
  .intro-enter{bottom:16px;min-width:210px;padding:.72rem 1.1rem;font-size:.95rem}
  .gate-card{width:100vw;height:auto;aspect-ratio:3/4}
}
@media(prefers-reduced-motion:reduce){
  .gate.open .gate-left,.gate.open .gate-right{animation-duration:.01ms !important}
}

/* ===== Entrance corrections — full-width images, one button, instant Hall ===== */
.intro{
  background-color:#edf4f7 !important;
  background-image:url("assets/intro_castle.png") !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}
.intro::before{display:none !important}
/* The artwork already contains the visible Enter the Castle button.
   Keep only an invisible accessible hotspot over it, avoiding the duplicate. */
.intro-enter{
  left:50% !important;
  bottom:2.4% !important;
  width:20.5% !important;
  min-width:240px !important;
  height:8.5% !important;
  min-height:54px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:999px !important;
  background:transparent !important;
  box-shadow:none !important;
  color:transparent !important;
  text-shadow:none !important;
  opacity:1 !important;
}
.intro-enter b,.intro-enter span{color:transparent !important}
.intro-enter:hover,.intro-enter:focus-visible{
  transform:translateX(-50%) !important;
  background:rgba(255,240,185,.10) !important;
  box-shadow:0 0 0 3px rgba(237,198,91,.72),0 0 26px rgba(255,230,146,.38) !important;
  outline:none !important;
}

.gate{
  background-color:#f4efe3 !important;
  background-image:url("assets/welcome_gate.png") !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}
.gate-backdrop,.gate-panel,.gate-card::before,.gate-instruction{display:none !important}
.gate-card{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  aspect-ratio:auto !important;
  transform:none !important;
  box-shadow:none !important;
  overflow:hidden !important;
}
/* Invisible hotspot over the printed blue button on the parchment. */
.parchment-button{
  left:39.5% !important;
  right:auto !important;
  top:77.3% !important;
  width:21% !important;
  height:6.5% !important;
  min-height:46px !important;
  z-index:6 !important;
  color:transparent !important;
  background:transparent !important;
}
.parchment-button:hover,.parchment-button:focus-visible{
  background:rgba(255,236,166,.10) !important;
  box-shadow:0 0 0 3px rgba(235,193,88,.68),0 0 26px rgba(255,224,132,.42) !important;
}

@media(max-width:900px){
  .intro{background-size:cover !important;background-position:center center !important}
  .intro-enter{width:31% !important;min-width:210px !important;bottom:2% !important}
  .gate{background-size:cover !important;background-position:center center !important}
  .parchment-button{left:34% !important;width:32% !important;top:77% !important}
}
@media(max-width:560px){
  .intro{background-size:cover !important;background-position:center center !important}
  .intro-enter{width:64% !important;min-width:0 !important;height:7.5% !important}
  .gate{background-size:cover !important;background-position:center center !important}
  .parchment-button{left:24% !important;width:52% !important;top:77% !important}
}


/* ===== Visible, correctly aligned entrance controls ===== */
.intro-enter{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.65rem !important;
  color:#fffdf5 !important;
  background:linear-gradient(180deg,#1b6597 0%,#075083 55%,#063c6a 100%) !important;
  border:2px solid #e0b84e !important;
  box-shadow:0 9px 0 rgba(5,43,76,.42),0 13px 28px rgba(4,31,56,.36),inset 0 1px 0 rgba(255,255,255,.38) !important;
  text-shadow:0 2px 2px rgba(0,25,53,.75) !important;
  font-size:clamp(1rem,1.45vw,1.55rem) !important;
  font-style:italic !important;
  font-weight:700 !important;
  cursor:pointer !important;
  opacity:1 !important;
}
.intro-enter span{color:#fffdf5 !important}
.intro-enter b{color:#f6d774 !important}
.intro-enter:hover,.intro-enter:focus-visible{
  transform:translateX(-50%) translateY(-2px) !important;
  background:linear-gradient(180deg,#2879ad 0%,#0b5d92 55%,#084776 100%) !important;
  box-shadow:0 7px 0 rgba(5,43,76,.42),0 15px 30px rgba(4,31,56,.42),0 0 0 3px rgba(255,240,183,.75) !important;
}
.intro-enter:active{
  transform:translateX(-50%) translateY(4px) !important;
  box-shadow:0 3px 0 rgba(5,43,76,.42),0 8px 18px rgba(4,31,56,.3) !important;
}

.parchment-button{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.55rem !important;
  padding:.25rem .8rem !important;
  border:2px solid #c99b34 !important;
  border-radius:999px !important;
  color:#fffdf5 !important;
  background:linear-gradient(180deg,#174f80 0%,#073b69 100%) !important;
  box-shadow:0 5px 0 rgba(48,31,9,.34),0 10px 22px rgba(34,22,7,.28),inset 0 1px 0 rgba(255,255,255,.25) !important;
  text-shadow:0 2px 2px rgba(0,20,42,.8) !important;
  font-size:clamp(.9rem,1.18vw,1.3rem) !important;
  font-style:italic !important;
  font-weight:700 !important;
  cursor:pointer !important;
  opacity:1 !important;
}
.parchment-button span{color:#fffdf5 !important}
.parchment-button b{color:#f5d471 !important}
.parchment-button:hover,.parchment-button:focus-visible{
  color:#fff !important;
  background:linear-gradient(180deg,#246b9f 0%,#0b4d7e 100%) !important;
  box-shadow:0 4px 0 rgba(48,31,9,.34),0 12px 25px rgba(34,22,7,.33),0 0 0 3px rgba(245,215,122,.66) !important;
  transform:translateY(-1px) !important;
}
.parchment-button:active{
  transform:translateY(3px) !important;
  box-shadow:0 1px 0 rgba(48,31,9,.34),0 5px 12px rgba(34,22,7,.25) !important;
}


/* ===== July 26 final entrance fixes ===== */
html,body{overflow:hidden}
.screen{height:100dvh;min-height:100dvh;overflow:hidden}

/* The first artwork already contains its own button. Use one precisely aligned
   hotspot only, so no second blue button is drawn over the illustration. */
.intro{
  background-position:center 3% !important;
  background-size:cover !important;
}
.intro-enter{
  display:block !important;
  position:absolute !important;
  left:50% !important;
  top:86.7% !important;
  bottom:auto !important;
  transform:translateX(-50%) !important;
  width:19.1% !important;
  min-width:0 !important;
  height:6.8% !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:999px !important;
  background:transparent !important;
  box-shadow:none !important;
  text-shadow:none !important;
  color:transparent !important;
  opacity:1 !important;
  cursor:pointer !important;
}
.intro-enter span,.intro-enter b{display:none !important}
.intro-enter:hover,.intro-enter:focus-visible,.intro-enter:active{
  transform:translateX(-50%) !important;
  background:rgba(255,255,255,.04) !important;
  box-shadow:0 0 0 3px rgba(241,204,104,.65),0 0 22px rgba(249,222,145,.32) !important;
  outline:none !important;
}

/* The parchment scene always covers the viewport; no previous-image fragment
   can remain visible along the top edge. */
.gate{
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  min-height:100dvh !important;
  background-position:center center !important;
  background-size:cover !important;
  overflow:hidden !important;
}

/* Visible, real second button with the requested complete sentence. */
.parchment-button{
  left:50% !important;
  top:77.1% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  width:31% !important;
  height:6.7% !important;
  min-height:52px !important;
  white-space:nowrap !important;
  font-size:clamp(.78rem,1.08vw,1.18rem) !important;
  padding:.35rem 1.15rem !important;
}
.parchment-button:hover,.parchment-button:focus-visible{
  transform:translateX(-50%) translateY(-1px) !important;
}
.parchment-button:active{
  transform:translateX(-50%) translateY(3px) !important;
}

@media(max-width:900px){
  .intro-enter{top:86.4% !important;width:27% !important;height:7% !important}
  .parchment-button{top:77% !important;width:44% !important;font-size:.88rem !important}
}
@media(max-width:560px){
  .intro-enter{top:86% !important;width:54% !important;height:7.8% !important}
  .parchment-button{top:76.8% !important;width:76% !important;height:7.2% !important;font-size:.72rem !important;padding:.3rem .55rem !important}
}