*{box-sizing:border-box}
:root{--ink:#3d2c32;--paper:#fffaf5;--pink:#ffdcd6;--shadow:0 18px 48px rgba(73,40,50,.18)}
html{min-height:100%;background:#f9ebe7}
body{margin:0;min-height:100vh;color:var(--ink);font-family:ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif;background:radial-gradient(circle at 15% 8%,#fff 0,transparent 23%),linear-gradient(145deg,#fff8f2,#f3d9d5)}
button{font:inherit}
.page{width:min(1120px,94vw);margin:auto;padding:42px 0 70px}
header{text-align:center;margin-bottom:28px}
.eyebrow{margin:0 0 8px;font-size:.76rem;letter-spacing:.18em;font-weight:900;opacity:.58}
h1{margin:0;font-size:clamp(2.3rem,6vw,4.8rem);line-height:.95}
.intro{margin:15px auto 0;max-width:580px;opacity:.7;font-family:system-ui,sans-serif}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,2vw,22px)}
.portrait{position:relative;border:0;padding:0;border-radius:20px;overflow:hidden;background:white;cursor:pointer;box-shadow:0 8px 26px rgba(73,40,50,.11);transition:.2s transform,.2s box-shadow}
.portrait:hover,.portrait:focus-visible{transform:translateY(-5px) scale(1.01);box-shadow:var(--shadow);outline:none}
.portrait img{display:block;width:100%;aspect-ratio:527/604;object-fit:cover}
.rocky{outline:3px solid rgba(255,123,142,.28);outline-offset:3px}
.cube-hotspot{position:absolute;left:43%;top:55%;width:14%;height:12%;border-radius:5px}
.rocky:hover .cube-hotspot{box-shadow:0 0 0 5px rgba(255,215,0,.55),0 0 24px rgba(255,170,0,.9);animation:glow 1s infinite alternate}
@keyframes glow{to{transform:scale(1.12)}}
.modal{width:min(590px,calc(100vw - 28px));border:0;border-radius:28px;padding:clamp(25px,5vw,42px);text-align:center;color:var(--ink);background:rgba(255,250,245,.98);box-shadow:0 35px 100px rgba(40,20,28,.42)}
.modal::backdrop{background:rgba(40,22,28,.64);backdrop-filter:blur(7px)}
.modal h2{margin:0 0 10px;font-size:clamp(1.9rem,5vw,3rem)}
.small{max-width:420px}
.close{position:absolute;right:16px;top:12px;border:0;background:transparent;color:var(--ink);font-size:2rem;cursor:pointer;opacity:.55}
.instructions{max-width:470px;margin:0 auto 24px;font-family:system-ui,sans-serif;opacity:.72}
.cube-grid{width:min(360px,78vw);aspect-ratio:1;margin:auto;padding:9px;background:#18181c;border-radius:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;box-shadow:inset 0 0 0 2px #000,0 15px 35px rgba(0,0,0,.22)}
.cube-cell{border:0;border-radius:10px;cursor:pointer;box-shadow:inset 0 -5px 0 rgba(0,0,0,.14);transition:.12s transform}
.cube-cell:active{transform:scale(.92)}
.cube-cell:focus-visible{outline:4px solid white;outline-offset:-6px}
.actions{display:flex;justify-content:center;gap:12px;margin-top:24px}
.primary,.secondary{border:0;border-radius:999px;padding:12px 22px;font-weight:900;cursor:pointer}
.primary{background:#402e34;color:white}.secondary{background:#eadfd9;color:#402e34}
.status{min-height:1.4em;margin:16px 0 0;font-family:system-ui,sans-serif;font-weight:700}
.star{border:0;background:transparent;color:#f4b800;font-size:clamp(8rem,28vw,14rem);line-height:.9;cursor:pointer;filter:drop-shadow(0 12px 7px rgba(95,65,0,.28));animation:pulse 1.35s infinite ease-in-out}
@keyframes pulse{50%{transform:scale(1.08) rotate(-4deg)}}
.final-page{min-height:100vh;display:grid;place-items:center;padding:30px;text-align:center}
.final-card{max-width:650px;padding:50px;background:white;border-radius:30px;box-shadow:var(--shadow)}
.final-star{font-size:8rem;color:#f4b800;line-height:1}
@media(max-width:650px){.page{padding-top:28px}.gallery{gap:9px}.portrait{border-radius:12px}.rocky{outline-width:2px;outline-offset:2px}}


/* Implemented puzzle polish */
.sr-only{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
  margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important
}
div.portrait{cursor:default}
.cube-hotspot{
  position:absolute;
  left:43.5%;
  top:53.5%;
  width:14%;
  height:13%;
  border:0;
  border-radius:4px;
  background:transparent;
  cursor:pointer;
  z-index:3;
}
.cube-hotspot::after{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:7px;
  opacity:0;
  box-shadow:0 0 0 4px rgba(255,224,80,.72),0 0 22px rgba(255,173,0,.95);
  transition:opacity .18s ease, transform .18s ease;
}
.cube-hotspot:hover::after,.cube-hotspot:focus-visible::after{
  opacity:1;
  transform:scale(1.08);
}
.cube-hotspot:focus-visible{outline:3px solid #fff;outline-offset:3px}
.cube-stage{perspective:900px}
.cube-grid{
  transform-style:preserve-3d;
  animation:cubeArrive .48s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes cubeArrive{
  from{opacity:0;transform:translateY(50px) scale(.28) rotate(-14deg)}
  to{opacity:1;transform:translateY(0) scale(1) rotate(0)}
}
.cube-cell{
  position:relative;
  border:2px solid rgba(255,255,255,.24);
  background-clip:padding-box;
}
.cube-cell::after{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:7px;
  background:linear-gradient(145deg,rgba(255,255,255,.28),transparent 42%,rgba(0,0,0,.12));
  pointer-events:none;
}
.cube-grid.solved .cube-cell{animation:solveFlash .62s ease both}
.cube-grid.solved .cube-cell:nth-child(2){animation-delay:.05s}
.cube-grid.solved .cube-cell:nth-child(3){animation-delay:.10s}
.cube-grid.solved .cube-cell:nth-child(4){animation-delay:.15s}
.cube-grid.solved .cube-cell:nth-child(5){animation-delay:.20s}
.cube-grid.solved .cube-cell:nth-child(6){animation-delay:.25s}
.cube-grid.solved .cube-cell:nth-child(7){animation-delay:.30s}
.cube-grid.solved .cube-cell:nth-child(8){animation-delay:.35s}
.cube-grid.solved .cube-cell:nth-child(9){animation-delay:.40s}
@keyframes solveFlash{
  0%,100%{filter:brightness(1);transform:scale(1)}
  45%{filter:brightness(2.5);transform:scale(.9)}
  70%{filter:brightness(1.3);transform:scale(1.05)}
}
.success{overflow:hidden}
.sparkles{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 18% 28%,#ffd60a 0 3px,transparent 4px),
    radial-gradient(circle at 79% 21%,#ff9f0a 0 4px,transparent 5px),
    radial-gradient(circle at 12% 72%,#bf5af2 0 3px,transparent 4px),
    radial-gradient(circle at 86% 73%,#0a84ff 0 3px,transparent 4px),
    radial-gradient(circle at 50% 12%,#ff2d95 0 3px,transparent 4px);
  animation:sparkleDrift 1.4s ease-in-out infinite alternate;
}
@keyframes sparkleDrift{to{transform:translateY(-8px) rotate(3deg);filter:brightness(1.35)}}
.star{animation:starEntrance .65s cubic-bezier(.2,.9,.25,1) both, pulse 1.35s .65s infinite ease-in-out}
@keyframes starEntrance{
  from{opacity:0;transform:translateY(70px) scale(.15) rotate(-45deg)}
  to{opacity:1;transform:translateY(0) scale(1) rotate(0)}
}