:root {
  color-scheme: light;
  font-size: 115%;
  font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  color: #3f260f;
  background: #fffdf8;
  --board-lead: #b04911;
  --board-ink: #3f260f;
  --board-message: #7a3b10;
  --board-temple: #5a3212;
  --board-muted: #80552b;
}
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  background-color: #fffdf8;
  background-image: linear-gradient(rgba(255,255,255,.78), rgba(255,255,255,.78)), url("/assets/hero-art.png"), linear-gradient(135deg, #fffdf8, #fff7df);
  background-position: center, right 28% center, center;
  background-size: cover, cover, cover;
  background-attachment: fixed;
}
body.board-thanks {
  background-image: linear-gradient(rgba(255,249,238,.72), rgba(255,249,238,.72)), url("/assets/hero-art.png"), linear-gradient(135deg, #fffaf0, #fff0d4);
  background-position: center, right 28% center, center;
  background-size: cover, cover, cover;
}
.board-topbar {
  min-height: 92px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 18px 34px;
  color: #573515;
  background: rgba(255,255,255,.70);
  border-bottom: 1px solid rgba(143,91,27,.18);
}
.board-topbar strong {
  color: #98480f;
  font-size: clamp(25px, 2.875vw, 44px);
  letter-spacing: .06em;
}
.board-datetime {
  grid-column: 2;
  font-size: clamp(21px, 2.3vw, 32px);
  font-weight: 700;
}
.board-stage {
  height: calc(100vh - 92px);
  display: grid;
  place-items: center;
  padding: 28px 34px 58px;
  text-align: center;
  perspective: 1400px;
}
.board-slides {
  display: grid;
  place-items: center;
  width: min(1480px, 96vw);
  min-height: min(72vh, 760px);
}
.board-slide {
  display: none;
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  will-change: opacity, transform, filter;
  backface-visibility: hidden;
}
.board-slide.active, .board-slide.leaving { display: block; }
.board-slide[class*="enter-"], .board-slide[class*="exit-"] {
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(.16,.86,.24,1);
}
.board-slide[class*="enter-"] { animation-duration: 1.35s; }
.board-slide[class*="exit-"] { animation-duration: .9s; animation-timing-function: cubic-bezier(.55,0,.8,.25); pointer-events: none; }
.board-slide.entering p { animation: board-text-reveal 1.05s cubic-bezier(.16,.9,.24,1) both; }
.board-slide.entering .board-lead { animation-delay: .10s; }
.board-slide.entering .board-name { animation-delay: .28s; }
.board-slide.entering .board-message { animation-delay: .46s; }
.board-slide.entering .board-temple-line { animation-delay: .64s; }
.board-slide.leaving p { animation: board-text-depart .55s ease-in both; }
.board-slide.leaving .board-lead { animation-delay: 0s; }
.board-slide.leaving .board-name { animation-delay: .08s; }
.board-slide.leaving .board-message { animation-delay: .16s; }
.board-slide.leaving .board-temple-line { animation-delay: .24s; }
.board-lead {
  margin: 0 0 clamp(21px, 3.45vh, 39px);
  color: var(--board-lead);
  font-size: clamp(46px, 6.9vw, 99px);
  font-weight: 900;
  letter-spacing: .18em;
}
.board-name {
  margin: 0 auto clamp(21px, 3.45vh, 37px);
  max-width: 96vw;
  color: var(--board-ink);
  font-size: clamp(40px, 6.08vw, 99px);
  font-weight: 900;
  line-height: 1.16;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.5vh, 18px);
  white-space: normal;
  text-shadow: 0 2px 0 rgba(255,255,255,.95), 0 8px 28px rgba(83,47,11,.13);
}
.board-name-line {
  display: block;
  width: 100%;
  max-width: 100%;
  text-align: center;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}
.board-message {
  margin: 0 0 clamp(21px, 3.45vh, 37px);
  color: var(--board-message);
  font-size: clamp(34px, 4.8vw, 70px);
  font-weight: 800;
  letter-spacing: .08em;
}
.board-temple-line {
  margin: 0;
  color: var(--board-temple);
  font-size: clamp(35px, 4.6vw, 67px);
  font-weight: 800;
}
.board-pager {
  position: fixed;
  right: 28px;
  bottom: 20px;
  color: var(--board-muted);
  font-size: 21px;
  font-weight: 700;
}
.board-status {
  position: fixed;
  left: 28px;
  bottom: 21px;
  color: var(--board-muted);
  font-size: 15px;
  opacity: .86;
}
.board-status[data-state="error"] { color: #a51d16; }
.board-embedded { overflow: hidden; zoom: .82; }
.board-embedded .board-topbar { min-height: 58px; grid-template-columns: 1fr; gap: 2px; padding: 7px 12px; }
.board-embedded .board-topbar strong { font-size: clamp(16px, 3.6vw, 25px); letter-spacing: .04em; }
.board-embedded .board-datetime { grid-column: 1; grid-row: 2; font-size: clamp(12px, 2.6vw, 17px); }
.board-embedded .board-stage { height: calc(100vh - 58px); min-height: 0; padding: 10px 12px 26px; }
.board-embedded .board-slides { min-height: 0; }
.board-embedded .board-lead { margin-bottom: 5px; font-size: clamp(18px, 5vw, 34px); }
  .board-embedded .board-name { margin-bottom: 6px; font-size: clamp(16px, 4.64vw, 31px); line-height: 1.08; }
.board-embedded .board-message { margin-bottom: 6px; font-size: clamp(14px, 3.8vw, 25px); }
.board-embedded .board-temple-line { font-size: clamp(15px, 3.8vw, 25px); }
.board-embedded .board-pager { right: 10px; bottom: 8px; font-size: 12px; }
.board-embedded .board-status { left: 10px; bottom: 8px; font-size: 10px; }
.enter-rise { animation-name: board-enter-rise; }
.exit-rise { animation-name: board-exit-rise; }
.enter-slide { animation-name: board-enter-slide; }
.exit-slide { animation-name: board-exit-slide; }
.enter-zoom { animation-name: board-enter-zoom; }
.exit-zoom { animation-name: board-exit-zoom; }
.enter-turn { animation-name: board-enter-turn; transform-origin: center center; }
.exit-turn { animation-name: board-exit-turn; transform-origin: center center; }
@keyframes board-text-reveal { from { opacity: 0; transform: translateY(42px) scale(.82); filter: blur(8px); letter-spacing: .22em; } to { opacity: 1; transform: none; filter: none; } }
@keyframes board-text-depart { from { opacity: 1; transform: none; filter: none; } to { opacity: 0; transform: translateY(-24px) scale(.94); filter: blur(6px); } }
@keyframes board-enter-rise { from { opacity: 0; transform: translateY(120px) scale(.88); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes board-exit-rise { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-90px) scale(.94); filter: blur(8px); } }
@keyframes board-enter-slide { from { opacity: 0; transform: translateX(28vw) skewX(-8deg); filter: blur(7px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes board-exit-slide { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-24vw) skewX(7deg); filter: blur(7px); } }
@keyframes board-enter-zoom { from { opacity: 0; transform: scale(.50); filter: blur(12px); } 65% { opacity: 1; transform: scale(1.06); filter: blur(1px); } to { opacity: 1; transform: scale(1); filter: none; } }
@keyframes board-exit-zoom { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.34); filter: blur(10px); } }
@keyframes board-enter-turn { from { opacity: 0; transform: rotateY(-58deg) rotateX(8deg) scale(.76); filter: blur(9px); } to { opacity: 1; transform: rotateY(0) rotateX(0) scale(1); filter: none; } }
@keyframes board-exit-turn { from { opacity: 1; transform: rotateY(0) rotateX(0) scale(1); } to { opacity: 0; transform: rotateY(52deg) rotateX(-7deg) scale(.80); filter: blur(8px); } }
@media (max-width: 760px), (max-height: 720px) {
  body { overflow: hidden; }
  .board-topbar { grid-template-columns: 1fr auto; padding: 12px 16px; }
  .board-datetime { grid-column: 1 / -1; grid-row: 2; }
  .board-stage { height: calc(100vh - 125px); padding-inline: 18px; }
  .board-name { font-size: clamp(27px, 6.8vw, 50px); }
  .board-message { font-size: clamp(25px, 6vw, 46px); }
  .board-temple-line { font-size: clamp(27px, 6vw, 46px); }
  .board-pager { right: 16px; bottom: 13px; font-size: 16px; }
  .board-status { left: 16px; bottom: 14px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .board-slide[class*="enter-"], .board-slide[class*="exit-"], .board-slide p { animation: none !important; }
}
@media (max-width: 760px), (max-height: 720px) {
  html:has(body.board-embedded) { overflow: hidden !important; }
  html:has(body.board-embedded) { scrollbar-width: none; }
  html:has(body.board-embedded)::-webkit-scrollbar { width: 0; height: 0; display: none; }
  body.board-embedded { overflow: hidden !important; }
  body.board-embedded::-webkit-scrollbar { width: 0; height: 0; display: none; }
  .board-embedded .board-stage { overflow: hidden; }
  .board-embedded .board-slides { width: 100%; }
  .board-embedded .board-name { max-width: 100%; }
}