*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#080808;color:#fff}body{font-family:Georgia,"Times New Roman",serif;overflow:hidden}.bg-img{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;pointer-events:none}.shade{position:fixed;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.18),rgba(0,0,0,.08),rgba(0,0,0,.20));z-index:1;pointer-events:none}#app{position:relative;z-index:2}.slide{position:absolute;inset:0;min-height:100svh;overflow-y:auto;padding:48px 24px 100px;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateX(22px);transition:opacity .55s ease,transform .55s ease,visibility .55s}.slide.active{opacity:1;visibility:visible;transform:none}.copy{width:min(100%,760px);padding:28px 24px;border-radius:26px;background:linear-gradient(120deg,rgba(5,5,5,.38),rgba(5,5,5,.15));backdrop-filter:blur(2px);text-shadow:0 2px 14px #000}.copy p{font-size:clamp(1.02rem,3.8vw,1.25rem);line-height:1.72;margin:1em 0}.spot{font-style:italic;font-size:clamp(1.18rem,4.3vw,1.5rem)!important}.bigline{font-size:clamp(1.8rem,7vw,3.5rem)!important;line-height:1.2!important}.opening .spot{font-size:clamp(1.6rem,6vw,2.8rem)!important}.center{text-align:center}.hero{width:100%;aspect-ratio:1.91/1;object-fit:cover;border-radius:18px;box-shadow:0 12px 40px rgba(0,0,0,.35)}h1{font-weight:400;font-size:clamp(2.2rem,8vw,4.8rem);line-height:1.08}.next{display:flex;align-items:center;gap:10px;margin:24px 0 0 auto;border:1px solid rgba(255,255,255,.42);background:rgba(0,0,0,.18);color:#fff;font:inherit;padding:12px 18px;border-radius:999px;cursor:pointer;box-shadow:0 8px 28px rgba(0,0,0,.2)}.next span,.next.icon{animation:nudge 1.35s ease-in-out infinite}.next.icon{width:52px;height:52px;padding:0;justify-content:center;font-size:1.5rem}.next:active{transform:scale(.93)}@keyframes nudge{0%,100%{transform:translateX(0) scale(1)}50%{transform:translateX(6px) scale(1.07)}}.puzzle{margin:20px auto;width:min(84vw,560px);aspect-ratio:3/2;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:3px;border-radius:17px;overflow:hidden}.piece{border:0;border-radius:0;background-image:url("assets/puzzle.jpg");background-size:300% 200%;padding:0}.piece.selected{outline:4px solid rgba(255,255,255,.9);outline-offset:-5px}.hint{text-align:center;opacity:.75;font-size:.9rem!important}.hidden{display:none!important}.quiet{text-align:center}.signature{text-align:right;font-style:italic;font-size:1.5rem!important}.music{position:fixed;z-index:30;right:18px;bottom:18px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.3);color:#fff;font-size:1.15rem;backdrop-filter:blur(8px)}@media(min-width:900px){.bg-img{object-position:center 38%}.copy{padding:42px 48px}.shade{background:rgba(0,0,0,.14)}}
/* MOBILE FIX */
@media (max-width: 700px) {
  .slide {
    align-items: flex-start !important;
    padding: 32px 18px 90px !important;
  }

  .copy {
    margin: auto 0 !important;
    padding: 18px 17px !important;
  }

  .copy p {
    font-size: 0.88rem !important;
    line-height: 1.46 !important;
    margin: 0.68em 0 !important;
  }

  .spot {
    font-size: 1.05rem !important;
    line-height: 1.35 !important;
  }

  .opening .spot {
    font-size: 1.35rem !important;
    line-height: 1.3 !important;
  }

  .bigline {
    font-size: 1.55rem !important;
  }

  .next.icon {
    width: 44px !important;
    height: 44px !important;
    margin-top: 14px !important;
  }

  .previous,
  .restart {
    margin-top: 12px !important;
    padding: 7px 12px !important;
    font-size: 0.82rem !important;
  }
}

.previous,
.restart {
  display: block;
  margin: 14px auto 0 0;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(0,0,0,.12);
  color: #fff;
  font: inherit;
  font-size: .9rem;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  opacity: .72;
  box-shadow: 0 6px 20px rgba(0,0,0,.14);
}

.restart {
  margin: 14px 0 0 auto;
}

.previous:active,
.restart:active {
  transform: scale(.96);
}

@media (max-width: 700px) {
  .previous,
  .restart {
    margin-top: 12px;
    padding: 7px 12px;
    font-size: .82rem;
  }
}