:root {
  --bg: #fff0f7;
  --ink: #3d1765;
  --gum: #ff9ccb;
  --grape: #6b2fb3;
  --lime: #c8f03c;
  --sky: #8fd6ff;
  --muted: #6a4a8a;
  --heavy: "Arial Black", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --sans: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #230f38;
    --ink: #ffe3f1;
    --muted: #d8b9ea;
    --grape: #c79bff;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 18px/1.75 var(--sans);
  overflow-x: hidden;
}
a { color: inherit; }
:focus-visible { outline: 4px solid var(--lime); outline-offset: 4px; border-radius: 12px; }

.top {
  display: flex; flex-wrap: wrap; gap: 4px 20px; justify-content: space-between; align-items: center;
  padding: 18px clamp(16px, 4vw, 48px);
}
.brand { display: flex; gap: 10px; align-items: center; text-decoration: none; font-weight: 900; font-size: 22px; }
.hours { margin: 0; font-size: 15px; color: var(--muted); }

.hero {
  position: relative;
  padding: 0 clamp(16px, 4vw, 48px) 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  overflow: hidden;
}
.hero h1 {
  grid-area: 1 / 1;
  margin: 0;
  font-family: var(--heavy);
  font-weight: 900;
  font-size: clamp(48px, 14vw, 230px);
  line-height: .86;
  letter-spacing: -.04em;
  text-align: center;
  color: var(--gum);
  opacity: .55;
  user-select: none;
  align-self: center;
}
.exhibit-main { grid-area: 1 / 1; width: min(100%, 560px); position: relative; z-index: 1; }
#blob { display: block; width: 100%; aspect-ratio: 1 / 1; cursor: pointer; touch-action: none; border-radius: 40px; }
.blob-msg { text-align: center; margin: -8px 0 0; font-weight: 700; min-height: 3.5em; }
.intro { max-width: 30em; text-align: center; color: var(--muted); margin: 8px 0 0; }

.tour, .rules { max-width: 980px; margin: 0 auto; padding: clamp(48px, 8vw, 96px) clamp(16px, 4vw, 48px) 0; }
h2 { font-family: var(--heavy); font-weight: 900; font-size: clamp(32px, 6vw, 64px); line-height: 1; margin: 0 0 36px; letter-spacing: -.02em; }
.halls { list-style: none; margin: 0; padding: 0; display: grid; gap: 44px; }
.hall { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 28px; align-items: center; }
.hall:nth-child(even) { grid-template-columns: minmax(0, 1fr) 150px; }
.hall:nth-child(even) .shape { order: 2; }
.hall h3 { margin: 0 0 4px; font-size: clamp(20px, 3vw, 26px); font-weight: 900; }
.hall p { margin: 0; color: var(--muted); max-width: 30em; }
.shape { width: 150px; height: 130px; display: grid; place-items: center; }
.shape span {
  display: block; width: 100%; height: 100%;
  transition: transform .5s cubic-bezier(.2, 1.8, .4, 1), border-radius .5s;
}
.hall:hover .shape span { transform: scale(1.08, .9); }
.h1 .shape span { background: repeating-linear-gradient(90deg, var(--gum) 0 22px, #ffd0e6 22px 44px); border-radius: 60px 60px 60px 60px / 50px 50px 50px 50px; height: 70px; }
.h2 .shape span { background: var(--sky); border-radius: 44% 56% 48% 52% / 60% 54% 46% 40%; box-shadow: inset 0 -14px 0 rgba(0,0,0,.08); }
.h3 .shape span { background: var(--lime); border-radius: 30px; width: 86%; height: 86%; box-shadow: inset 10px 10px 0 rgba(255,255,255,.45); }
.h4 .shape span { background: #fff; border: 5px solid var(--grape); border-radius: 12px 70px 70px 70px; width: 78%; transform: rotate(-12deg); }
.hall.h4:hover .shape span { transform: rotate(-12deg) scale(1.08, .9); }

.rules ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.rules li { font-size: clamp(20px, 3vw, 26px); font-weight: 700; padding-left: 1.4em; position: relative; }
.rules li::before { content: ""; position: absolute; left: 0; top: .45em; width: .8em; height: .7em; border-radius: 50%; background: var(--gum); }

.foot { max-width: 980px; margin: 0 auto; padding: 90px clamp(16px, 4vw, 48px) 40px; color: var(--muted); font-size: 15px; }

@media (max-width: 560px) {
  .hall, .hall:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hall:nth-child(even) .shape { order: 0; }
  .shape { width: 120px; height: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  .shape span { transition: none; }
}