:root{color-scheme:light;--ink:#302620;--paper:#f7eee0;--mute:#71584a;--red:#852c3b;--line:#cbb6a1;--type:"ZCOOL KuaiLe","Arial Rounded MT Bold","PingFang SC","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);background:var(--paper);font-family:var(--type);min-height:100svh;display:flex;flex-direction:column}
.gate{background:radial-gradient(ellipse at 50% 43%,#fffbf0 0,#f5ebda 59%,#ebdcc6 100%)}
.outer{display:flex;justify-content:space-between;align-items:center;gap:1.2rem;margin-inline:clamp(1rem,5vw,5rem);padding-block:1.25rem;color:var(--mute);font-size:.7rem;font-weight:600;letter-spacing:.18em}
header.outer{border-bottom:1px solid var(--line)}
footer.outer{border-top:1px solid var(--line);margin-top:auto}
.door{width:min(calc(100% - 2rem),30rem);margin:auto;padding:2.5rem 0 3.1rem;text-align:center}
.seal{display:grid;place-items:center;width:62px;height:62px;margin:0 auto 1.75rem;color:#fff6eb;background:var(--red);border-radius:50%;outline:1px solid var(--red);outline-offset:5px}
.eyebrow{font-size:.69rem;letter-spacing:.25em;color:var(--red);font-weight:700}
h1{font-family:var(--type);font-weight:600;font-size:clamp(2.6rem,8vw,5.2rem);letter-spacing:.06em;margin:.48rem 0 .62rem;line-height:1.15}
.intro{margin:0;color:var(--mute);font-size:.93rem;letter-spacing:.06em;line-height:1.7}
.door form{width:min(100%,19rem);text-align:left;margin:2.25rem auto 0}
label{display:block;color:var(--mute);font-size:.76rem;letter-spacing:.12em;margin-bottom:.45rem}
button,input{font:inherit}
input{width:100%;padding:.8rem 1rem;color:var(--ink);background:#fff9ef;border:1px solid #aa907d;border-radius:2px;font-size:1rem}
button{cursor:pointer}
.open{margin-top:.65rem;width:100%;display:flex;justify-content:space-between;align-items:center;border:0;background:var(--red);color:#fff9ef;padding:.78rem 1rem;border-radius:2px;font-size:.87rem;letter-spacing:.12em}
.open:hover{background:#69202d}
.error{margin:.45rem 0 0;color:var(--red);font-size:.8rem}
:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.album{width:min(100% - 2rem,75rem);margin:auto;padding:clamp(3rem,9vw,7rem) 0 4.5rem}
.album h1{margin-top:.65rem}
.lock{border:1px solid var(--line);padding:.45rem .8rem;background:transparent;color:var(--red);font-size:.72rem;letter-spacing:.08em;border-radius:2px}
.lock:hover{background:#f5e3d5}
.photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.7rem);margin-top:2.6rem}
figure{min-width:0;margin:0;background:#fff9ef;padding:.75rem .75rem 0;box-shadow:0 3px 10px #64442915}
.photo{display:block;overflow:hidden;background:#e0c8b9}
.photo img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .35s}
.photo:hover img{transform:scale(1.035)}
figcaption {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .35rem .6rem;
  align-items: baseline;
  padding: .9rem .15rem;
}
.photo-number, .photo-date { font-size: .75rem; color: var(--mute); }
.photo-date { grid-column: 3; white-space: nowrap; }
.photo-note { grid-column: 2 / -1; color: var(--red); font-size: .82rem; }
dialog{max-width:calc(100vw - 2rem);max-height:calc(100svh - 2rem);padding:.5rem;border:0;background:#fff9ef;border-radius:3px}
dialog::backdrop{background:#251918e8}
dialog img{display:block;width:auto;max-width:100%;height:auto;max-height:calc(100svh - 3rem);object-fit:contain}
.close{position:absolute;z-index:1;top:.8rem;right:.8rem;width:40px;height:40px;border:0;border-radius:50%;background:#fff9ef;color:var(--ink);font-size:1.65rem;line-height:1}

.gallery {
  background: linear-gradient(160deg, #fff8e8, #fff0cc 55%, #ffe8b3);
}

.gallery figure {
  background-color: #fffaf0;
  box-shadow: 0 4px 18px #86581824;
}

.gallery h1 {
  font-size: clamp(2.15rem, 5.25vw, 4.75rem);
  line-height: 1.24;
  text-wrap: balance;
}

.rome-chapter, .travel-map {
  border: 1px solid #e7c990;
  border-radius: 1.25rem;
  background: #fff8e8;
}

.rome-chapter {
  margin-top: 2rem;
  padding: 1.3rem clamp(1rem, 4vw, 2rem);
  border-left: .35rem solid #d78575;
}

.rome-chapter h2, .travel-map h2 {
  margin: 0;
  color: var(--red);
  font-size: clamp(1.45rem, 4vw, 2rem);
}

.rome-chapter p { margin: .55rem 0 0; color: var(--mute); }

.travel-map {
  margin-top: clamp(3rem, 7vw, 5rem);
  padding: clamp(.8rem, 3vw, 1.65rem);
}

.map-controls {
  display: flex;
  gap: .4rem;
  margin: .9rem 0 .65rem;
}
.map-controls[hidden] { display: none; }
.map-controls button {
  min-height: 2.75rem;
  padding: .4rem .9rem;
  border: 1px solid #e7c990;
  border-radius: 2rem;
  background: #fffdf5;
  color: var(--red);
}
.map-controls button[aria-pressed="true"] {
  background: var(--red);
  border-color: var(--red);
  color: #fffaf1;
}
.map-panel { margin-top: .6rem; }
.travel-atlas {
  display: block;
  width: 100%;
  max-height: 31rem;
  background: #e5f3ee;
  border-radius: .8rem;
}
.travel-land {
  fill: #f5dca9;
  stroke: #cda476;
  stroke-width: .75px;
  vector-effect: non-scaling-stroke;
}
.travel-marker { color: #a62f52; fill: currentColor; }
.travel-marker.is-planned { color: #6f508c; }
.travel-heart { stroke: #fffaf1; stroke-width: .3; }
.is-planned .travel-heart { fill: #fffaf1; stroke: currentColor; }
.travel-leader {
  stroke: currentColor;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
  fill: none;
}
.travel-marker text {
  paint-order: stroke;
  stroke: #fffaf1;
  stroke-width: 2px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.map-key {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  margin: .75rem 0 .65rem;
  color: var(--mute);
  font-size: .88rem;
}
.map-key .map-planned { margin-left: .55rem; }
.map-visited { color: #a62f52; }
.map-planned { color: #6f508c; }
.map-places {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.map-places li {
  padding: .28rem .55rem;
  border-radius: 1rem;
  background: #fff0d7;
  font-size: .85rem;
}

@font-face {
  font-family: "ZCOOL KuaiLe";
  src: url("/fonts/zcool-kuaile.ttf") format("truetype");
  font-display: swap;
}

.surprise {
  max-width: 34rem;
  margin: clamp(3rem, 8vw, 6rem) auto 0;
  padding: 1.75rem .75rem 0;
  border-top: 1px solid var(--line);
  text-align: center;
}

.surprise summary {
  display: grid;
  justify-items: center;
  gap: .45rem;
  width: fit-content;
  margin-inline: auto;
  padding: .5rem 1rem .65rem;
  color: var(--red);
  border-radius: .75rem;
  font-size: .88rem;
  font-weight: 650;
  list-style: none;
  cursor: pointer;
}

.surprise summary::-webkit-details-marker { display: none; }
.surprise-close-label,
.surprise[open] .surprise-open-label { display: none; }
.surprise[open] .surprise-close-label { display: inline; }

.surprise-box {
  display: block;
  overflow: visible;
  filter: drop-shadow(0 7px 8px #934c232c);
  transition: transform .2s ease-out;
}

.surprise:not([open]) summary:is(:hover, :focus-visible) .surprise-box {
  transform: translateY(-4px) rotate(-5deg);
}

.box-lid, .box-bottom {
  transform-box: fill-box;
  transform-origin: center;
}

.surprise[open] .box-lid {
  transform: translate(-47px, -37px) rotate(-24deg);
  animation: open-box-lid .65s cubic-bezier(.14,.7,.3,1);
}

.surprise[open] .box-bottom {
  transform: translate(26px, 3px) rotate(10deg);
  animation: open-box-bottom .65s cubic-bezier(.14,.7,.3,1);
}

.surprise-result {
  position: relative;
  isolation: isolate;
  padding-top: .3rem;
}

.surprise-result::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -.6rem;
  left: 50%;
  width: min(100%, 25rem);
  aspect-ratio: 1;
  pointer-events: none;
  background:
    radial-gradient(circle, #fffbea 0 11%, #ffe4a69c 25%, transparent 69%),
    repeating-conic-gradient(from 8deg, #f3a52550 0 8deg, transparent 8deg 24deg);
  mask-image: radial-gradient(circle, #000 24%, transparent 70%);
  transform: translate(-50%, -19%) scale(1);
  opacity: .75;
}

.surprise[open] .surprise-result::before {
  animation: golden-rays 1.25s .08s both ease-out;
}

.heart-rain {
  position: fixed;
  z-index: 10;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.heart-rain span {
  position: absolute;
  top: -64px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  line-height: 1;
  opacity: 0;
  filter: drop-shadow(0 2px 3px #8f343d38);
}

.diamond-ring {
  display: block;
  width: clamp(11rem, 46vw, 14.5rem);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 7px 12px #b77c313c);
}

.surprise-message {
  position: relative;
  width: fit-content;
  margin: .5rem auto 0;
  padding: .45em .8em;
  border: 2px solid #ffb6bf;
  border-radius: 1em;
  background: #fff1f0;
  box-shadow: 0 .2em 0 #e9957a4d;
  color: #a6345b;
  font: 400 clamp(1.6rem, 5vw, 2.7rem)/1.25 var(--type);
  text-wrap: balance;
}

.surprise[open] .diamond-ring {
  animation: diamond-pop 1s .1s both cubic-bezier(.18,.75,.34,1);
}

.surprise-message span { white-space: nowrap; }

.surprise-note {
  margin: .9rem auto 0;
  color: var(--mute);
  font-size: .8rem;
  line-height: 1.6;
  text-wrap: pretty;
}

.surprise[open] .surprise-message {
  animation: message-rise .55s .63s both cubic-bezier(.2,.75,.3,1);
}

@keyframes open-box-lid {
  from { transform: none; }
  18% { transform: translate(5px, 6px) rotate(8deg); }
  68% { transform: translate(-71px, -56px) rotate(-42deg); }
}

@keyframes open-box-bottom {
  from { transform: none; }
  18% { transform: translate(-5px, -2px) rotate(-8deg); }
  68% { transform: translate(43px, 13px) rotate(22deg); }
}

@keyframes diamond-pop {
  from { opacity: 0; transform: translateY(-8rem) scale(.1) rotate(-35deg); }
  48% { opacity: 1; transform: translateY(-1.3rem) scale(1.26) rotate(13deg); }
  76% { transform: scale(.94) rotate(-6deg); }
  to { opacity: 1; transform: none; }
}

@keyframes message-rise {
  from { opacity: 0; transform: translateY(.7rem) scale(.65) rotate(-7deg); }
  68% { opacity: 1; transform: scale(1.04) rotate(2deg); }
  to { opacity: 1; transform: none; }
}

@keyframes golden-rays {
  from { opacity: 0; transform: translate(-50%, -19%) scale(.2) rotate(-25deg); }
  39% { opacity: 1; transform: translate(-50%, -19%) scale(1.15) rotate(14deg); }
  to { opacity: .75; transform: translate(-50%, -19%) scale(1); }
}

@media(max-width:680px){.photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:440px){.photo-grid{grid-template-columns:1fr;max-width:28rem}.outer{letter-spacing:.1em}.door{padding-block:2.8rem}}
@media(prefers-reduced-motion:reduce){.photo img{transition:none}}
@media (prefers-reduced-motion: reduce) {
  .surprise-box { transition: none; }
  .surprise[open] :is(.box-lid, .box-bottom, .diamond-ring, .surprise-message) {
    animation: none;
  }
  .surprise[open] .surprise-result::before { animation: none; }
}

.password-hint {
  margin: .55rem 0 .25rem;
  color: var(--mute);
  font-size: .8rem;
  line-height: 1.5;
}

.error:empty { margin: 0; }
.open { position: relative; }

.heart-burst {
  position: absolute;
  top: 50%;
  left: 50%;
  pointer-events: none;
  z-index: 2;
}

.heart-burst span {
  position: absolute;
  top: -.5em;
  left: -.5em;
  color: #d64c70;
  font-size: 1.65rem;
  line-height: 1;
  opacity: 0;
}

.heart-burst span:nth-child(3n) { color: #a72f46; }
.heart-burst span:nth-child(3n + 1) { color: #e780a0; }

@media (any-pointer: fine) {
  body, a, button, input, .open:disabled, .surprise summary {
    cursor: url("/pooh-cursor.png") 2 2, auto;
  }
}