.museum{
  position:relative;overflow:hidden;
  background:
    radial-gradient(ellipse 90% 55% at 50% -10%, oklch(90% .055 72 / .85), transparent 58%),
    repeating-linear-gradient(90deg, transparent, transparent 47px, oklch(76% .04 62 / .12) 47px, oklch(76% .04 62 / .12) 48px),
    var(--paper-deep);
  content-visibility:auto;
  contain-intrinsic-size:auto 1100px;
}
.museum-head{padding:clamp(80px,11vh,130px) var(--pad-x) 2vh}
.museum-head h2{font-size:clamp(1.9rem,4.2vw,3.1rem);font-weight:700;line-height:1.35}
.museum-head h2 em{font-style:normal;color:var(--rose)}
.museum-head .lead{
  margin-top:.9em;max-width:30em;color:var(--ink-soft);
  font-family:var(--sans);font-size:1rem;line-height:1.75;
}

.desk{
  position:relative;
  max-width:var(--maxw);margin:0 auto;
  padding:2vh var(--pad-x) clamp(90px,14vh,150px);
  min-height:580px;
}
.desk::before{
  content:"";position:absolute;left:var(--pad-x);right:var(--pad-x);top:0;bottom:8%;
  background:
    linear-gradient(180deg, oklch(82% .05 65 / .35), oklch(74% .05 58 / .5));
  border-radius:8px;
  box-shadow:inset 0 1px 0 rgba(255,246,230,.35), 0 18px 40px -28px rgba(60,32,16,.4);
  pointer-events:none;
}
.obj{
  position:relative;cursor:pointer;z-index:1;
  transform:translate3d(var(--px,0),var(--py,0),0) rotate(var(--tilt,0deg));
  transition:transform .3s var(--ease), filter .3s var(--ease);
  outline:none;
}
.obj:hover,.obj:focus-visible{
  transform:translate3d(var(--px,0),var(--py,0),0) rotate(var(--tilt,0deg)) translateY(-4px) scale(1.03);
  z-index:3;
}
.obj .note{
  position:absolute;left:50%;bottom:-8px;transform:translate(-50%,8px);
  white-space:nowrap;font-family:var(--hand);font-size:1rem;color:var(--ink-soft);
  opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;
  text-shadow:0 1px 0 var(--paper);
}
.obj:hover .note,.obj:focus-visible .note{opacity:1;transform:translate(-50%,0)}

.obj[data-i="0"]{--tilt:-6deg}
.obj[data-i="1"]{--tilt:3deg}
.obj[data-i="2"]{--tilt:-2deg}
.obj[data-i="3"]{--tilt:4deg}
.obj[data-i="4"]{--tilt:-3deg}
.obj[data-i="5"]{--tilt:7deg}

.prop-ticket{
  width:min(210px,100%);background:#f7efe2;border-radius:4px;
  padding:12px 12px 14px;box-shadow:var(--shadow-print);
  font-family:var(--sans);color:#4a372c;
  background-image:repeating-linear-gradient(90deg,transparent,transparent 12px,#e8d9c4 12px,#e8d9c4 13px);
  background-size:100% 8px;background-repeat:no-repeat;background-position:bottom;
}
.prop-ticket .row{display:flex;justify-content:space-between;font-size:.68rem;color:#8a7364}
.prop-ticket .title{margin:.45em 0 .2em;font-weight:700;font-size:1rem}
.prop-ticket .seat{font-size:.75rem;color:#6a5346}
.prop-ticket .dash{border-top:1px dashed #c9b49a;margin:.7em 0 .5em}

.prop-sticker{
  width:132px;height:132px;border-radius:50%;margin:0 auto;
  background:radial-gradient(circle at 35% 30%, #fff6ea, #f2c9b0 55%, #e8a090);
  box-shadow:var(--shadow-print), inset 0 0 0 6px rgba(255,255,255,.35);
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--hand);font-size:1.15rem;color:#7a3d36;line-height:1.25;
}

.prop-umbrella{
  width:160px;height:120px;margin:0 auto;filter:drop-shadow(0 10px 16px rgba(60,40,20,.22));
}
.prop-umbrella svg{width:100%;height:100%}

.prop-toy{
  width:150px;background:var(--print);padding:10px 10px 28px;box-shadow:var(--shadow-print);
}
.prop-toy .face{
  aspect-ratio:1;position:relative;
  background:radial-gradient(circle at 50% 42%, #f7dccb, #e8c2ae);
}
.prop-toy .face::before,
.prop-toy .face::after{
  content:"";position:absolute;top:42%;width:8px;height:8px;border-radius:50%;background:#6a463c;
}
.prop-toy .face::before{left:34%}
.prop-toy .face::after{right:34%}
.prop-toy .mouth{
  position:absolute;left:50%;bottom:32%;width:22px;height:10px;
  border:2px solid #6a463c;border-top:0;border-radius:0 0 12px 12px;
  transform:translateX(-50%);
}
.prop-toy .lbl{font-family:var(--hand);text-align:center;margin-top:8px;color:var(--ink-soft)}

.prop-receipt{
  width:168px;background:#f6f1e4;padding:12px 12px 14px;
  box-shadow:var(--shadow-print);
  font-family:ui-monospace,Consolas,monospace;font-size:.68rem;color:#5a4638;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),96% 100%,92% calc(100% - 8px),88% 100%,84% calc(100% - 8px),80% 100%,76% calc(100% - 8px),72% 100%,68% calc(100% - 8px),64% 100%,60% calc(100% - 8px),56% 100%,52% calc(100% - 8px),48% 100%,44% calc(100% - 8px),40% 100%,36% calc(100% - 8px),32% 100%,28% calc(100% - 8px),24% 100%,20% calc(100% - 8px),16% 100%,12% calc(100% - 8px),8% 100%,4% calc(100% - 8px),0 100%);
}
.prop-receipt .shop{font-weight:700;text-align:center;font-size:.78rem;margin-bottom:.4em}
.prop-receipt .line{display:flex;justify-content:space-between;margin:.15em 0;opacity:.85}

.prop-gift{
  width:128px;height:128px;margin:0 auto;position:relative;
  background:linear-gradient(180deg,#d98a8a,#c56d74);
  box-shadow:var(--shadow-print);
  border-radius:4px;
}
.prop-gift::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:18px;transform:translateX(-50%);
  background:#f3e2c4;
}
.prop-gift::after{
  content:"";position:absolute;top:42%;left:0;right:0;height:18px;background:#f3e2c4;
}

.obj-detail{
  border:0;padding:0;margin:0;position:fixed;inset:0;
  width:100%;height:100%;max-width:none;max-height:none;
  background:var(--paper-deep);overflow:auto;
}
.obj-detail::backdrop{background:rgba(28,18,14,.4)}
.obj-detail .sheet{
  min-height:100%;display:grid;place-items:center;
  padding:clamp(56px,10vh,100px) var(--pad-x);
}
.obj-detail .back{
  position:fixed;top:20px;left:20px;z-index:2;font-size:.85rem;
  color:var(--ink-soft);border:1px solid var(--paper-edge);border-radius:99px;
  padding:.65em 1.3em;background:var(--paper);min-height:44px;font-family:var(--sans);
}
.obj-detail .card{
  max-width:560px;background:var(--paper);padding:28px 28px 32px;border-radius:16px;
  box-shadow:var(--shadow-lamp);
}
.obj-detail h3{font-size:1.7rem;margin:.8em 0 .4em}
.obj-detail p{font-family:var(--sans);color:var(--ink-soft);line-height:1.8}

@media (min-width:769px){
  .obj{position:absolute}
  .obj[data-i="0"]{left:4%;top:4%}
  .obj[data-i="1"]{left:36%;top:0}
  .obj[data-i="2"]{right:6%;top:8%}
  .obj[data-i="3"]{left:16%;top:52%}
  .obj[data-i="4"]{left:46%;top:56%}
  .obj[data-i="5"]{right:10%;top:48%}
}

@media (max-width:768px){
  .desk{
    display:flex;flex-direction:column;gap:22px;min-height:0;
  }
  .desk::before{display:none}
  .obj{position:relative !important;left:auto !important;right:auto !important;top:auto !important;transform:none !important;align-self:stretch}
  .obj:hover,.obj:focus-visible{transform:translateY(-2px) !important}
  .obj .note{position:static;opacity:1;transform:none;display:block;margin-top:.45em;white-space:normal}
  .prop-ticket,.prop-receipt,.prop-toy,.prop-sticker,.prop-gift,.prop-umbrella{margin:0}
}