:root {
  --ink: #213b4b;
  --muted: #66808a;
  --paper: #f8f3e6;
  --gold: #c88848;
  --line: #f6f0d7;
  --coral: #bd6956;
}

* { box-sizing: border-box; }

body {
  min-height: 100svh;
  margin: 0;
  padding: 14px;
  color: var(--ink);
  font-family: "Songti SC", "Noto Serif SC", "Hiragino Mincho ProN", serif;
  background:
    radial-gradient(circle at 10% 5%, #fff9e8 0 4%, transparent 19%),
    radial-gradient(circle at 90% 18%, #b3d8d1 0 7%, transparent 25%),
    linear-gradient(143deg, #759faa, #c4d9ce 46%, #ead7ae);
}

.shell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 560px;
  min-height: calc(100svh - 28px);
  margin: auto;
  padding: 24px 18px 30px;
  border: 1px solid #fff9;
  border-radius: 30px;
  background:
    linear-gradient(90deg, #fff8 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(#fff8 1px, transparent 1px) 0 0 / 28px 28px,
    #f8f3e6e8;
  box-shadow: 0 26px 70px #27495742;
  backdrop-filter: blur(15px);
}

.shell::before,
.shell::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}

.shell::before {
  right: -178px;
  bottom: -190px;
  width: 330px;
  height: 330px;
  border: 27px solid #e8c78575;
  border-radius: 50%;
  box-shadow: -52px -42px 0 -18px #b7d8ce75;
}

.shell::after {
  bottom: -64px;
  left: -22px;
  width: 110%;
  height: 130px;
  border-radius: 49% 51% 0 0 / 84% 89% 0 0;
  background: #fff9;
}

.shell > * { position: relative; z-index: 1; }

header { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 11px; }
header p {
  margin: 0;
  color: #6c8187;
  font-family: "Hiragino Sans GB", sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .17em;
}

h1 { margin: 3px 0 0; font-size: 25px; letter-spacing: .06em; }
button { border: 0; font: inherit; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
button:focus-visible { outline: 3px solid #d79a50; outline-offset: 3px; }

.round {
  width: 42px;
  height: 42px;
  border: 1px solid #d8d0bb;
  border-radius: 50%;
  color: var(--ink);
  background: #fffdf5;
  box-shadow: 0 4px 0 #b5c5be66, 0 10px 18px #5c75851e;
  font-size: 21px;
}

.round:hover, .primary:hover, .secondary:hover { transform: translateY(-2px); }

.catalogue-count {
  min-width: 55px;
  padding: 8px 9px;
  border: 1px solid #e1cfa9;
  border-radius: 15px;
  color: #a56f37;
  background: #fff5dd;
  font-family: "Hiragino Sans GB", sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-align: center;
}

.catalogue-count i { color: #c3ad82; font-style: normal; }

.intro { padding: 31px 8px 7px; }
.intro span {
  color: #b77938;
  font-family: "Hiragino Sans GB", sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
}

.intro h2 { margin: 9px 0 10px; font-size: 30px; line-height: 1.18; letter-spacing: .045em; }
.intro p { max-width: 370px; margin: 0; color: #5f7680; font-size: 14px; line-height: 1.7; }

.sky-board {
  position: relative;
  height: min(48vh, 410px);
  margin: 20px -4px 13px;
  overflow: hidden;
  border: 1px solid #eff3e7;
  border-radius: 28px;
  background: #9bc5c6;
  box-shadow: inset 0 0 0 1px #ffffff96, 0 18px 30px #517b8326;
}

.dream-scene { position: absolute; z-index: 0; inset: 0; overflow: hidden; background: linear-gradient(143deg, var(--scene-top), var(--scene-mid) 55%, var(--scene-bottom)); }
.scene-dawn-arch { --scene-top: #c8e2da; --scene-mid: #92bec0; --scene-bottom: #5b8d98; }
.scene-cloud-stairs { --scene-top: #d9e6cf; --scene-mid: #9cc8c3; --scene-bottom: #678f9a; }
.scene-moon-well { --scene-top: #a9c8ce; --scene-mid: #789eaa; --scene-bottom: #497582; }
.scene-sun-gate { --scene-top: #d8dfc0; --scene-mid: #a7c4b2; --scene-bottom: #6f9b9d; }
.scene-mist-bridge { --scene-top: #c0d9d7; --scene-mid: #8eb6bd; --scene-bottom: #5e8995; }
.scene-paper-tower { --scene-top: #b6d5d2; --scene-mid: #87b4b6; --scene-bottom: #4f7e8c; }
.scene-quiet-court { --scene-top: #dbe1c8; --scene-mid: #abcabc; --scene-bottom: #729b9e; }
.scene-hanging-garden { --scene-top: #c0ded3; --scene-mid: #86b9b5; --scene-bottom: #5c8990; }
.scene-halo-terrace { --scene-top: #bbd6d4; --scene-mid: #87b2ba; --scene-bottom: #587f91; }
.scene-far-observatory { --scene-top: #b0c9d0; --scene-mid: #789fad; --scene-bottom: #466f82; }
.scene-river-steps { --scene-top: #cae0d7; --scene-mid: #91bcbf; --scene-bottom: #588492; }
.scene-open-sky { --scene-top: #d7e6d4; --scene-mid: #9cc7c4; --scene-bottom: #648f9a; }

.scene-orb {
  position: absolute;
  top: -62px;
  right: -37px;
  width: 190px;
  height: 190px;
  border: 22px solid #f8dfa787;
  border-radius: 50%;
  box-shadow: 0 0 0 22px #f8edc66b, 0 0 0 45px #dceacd62;
}

.scene-portal {
  position: absolute;
  top: 50px;
  left: 50%;
  width: 118px;
  height: 180px;
  border: 18px solid #f6edcf62;
  border-bottom: 0;
  border-radius: 78px 78px 0 0;
  transform: translateX(-50%);
  box-shadow: 0 0 0 1px #ffffff3c inset;
}

.scene-portal::after {
  position: absolute;
  right: 15px;
  bottom: 0;
  left: 15px;
  height: 64px;
  content: "";
  border-radius: 50% 50% 0 0;
  background: #4f7e8690;
}

/* The paper-cut core follows the authored point layouts: diamond, hexagon, then octagon. */
.layout-4 .scene-portal,
.layout-6 .scene-portal,
.layout-8 .scene-portal {
  border: 0;
  border-radius: 0;
  background: #f7edc342;
  box-shadow: 0 0 0 1px #fff9c84f inset, 0 14px 28px #3d67704a;
  transform: none;
}

.layout-4 .scene-portal {
  top: 17%;
  left: 17%;
  width: 66%;
  height: 66%;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.layout-6 .scene-portal {
  top: 17%;
  left: 14%;
  width: 72%;
  height: 62%;
  clip-path: polygon(24% 0, 76% 0, 100% 40%, 76% 100%, 24% 100%, 0 40%);
}

.layout-8 .scene-portal {
  top: 11%;
  left: 14%;
  width: 73%;
  height: 78%;
  clip-path: polygon(25% 0, 50% 0, 84% 10%, 100% 48%, 82% 89%, 50% 100%, 16% 89%, 0 48%, 16% 10%);
}

.layout-4 .scene-portal::after,
.layout-6 .scene-portal::after,
.layout-8 .scene-portal::after {
  position: absolute;
  inset: 10%;
  width: auto;
  height: auto;
  border-radius: 0;
  background: #5d8a9173;
  clip-path: inherit;
}

.scene-anchor {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 58px;
  height: 58px;
  opacity: .72;
  transform: translate(-50%, -50%);
}

.scene-anchor::before,
.scene-anchor::after {
  position: absolute;
  inset: 8px;
  content: "";
  background: #f8f0cb31;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.scene-anchor::after {
  inset: 15px;
  border: 1px solid #fff6cf81;
  background: transparent;
}

.scene-terrace { position: absolute; bottom: -48px; height: 180px; opacity: .86; background: #527f89; clip-path: polygon(0 100%, 0 53%, 36% 0, 68% 46%, 100% 12%, 100% 100%); }
.terrace-a { left: -75px; width: 350px; }
.terrace-b { right: -118px; width: 290px; height: 146px; opacity: .48; transform: scaleX(-1); }
.scene-ribbon { position: absolute; top: 67%; left: -12%; width: 125%; height: 42px; border-top: 2px solid #fff3c06e; border-radius: 50%; transform: rotate(-10deg); }

.scene-moon-well .scene-portal, .scene-far-observatory .scene-portal { border-color: #fbf0d17a; transform: translateX(-50%) scale(.83); transform-origin: bottom; }
.scene-paper-tower .scene-portal { width: 74px; border-radius: 18px 18px 0 0; transform: translateX(-50%) scaleY(1.24); }
.scene-cloud-stairs .terrace-a, .scene-river-steps .terrace-a { transform: skewX(-14deg); }
.scene-open-sky .scene-portal { opacity: .43; transform: translateX(-50%) translateY(26px) scale(1.18); }

/* Keep scene variations inside the same gameplay silhouette instead of moving its anchors. */
.layout-4 .scene-portal { top: 17%; left: 17%; width: 66%; height: 66%; transform: none; }
.layout-6 .scene-portal { top: 17%; left: 14%; width: 72%; height: 62%; transform: none; }
.layout-8 .scene-portal { top: 11%; left: 14%; width: 73%; height: 78%; transform: none; }

.sky-board svg { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sky-board line { stroke: var(--line); stroke-width: .68; stroke-linecap: round; opacity: .94; filter: drop-shadow(0 1px 1px #355d6470); transition: stroke .25s ease, stroke-width .25s ease; }
.sky-board.exchange-glow line.glow { stroke: #fff8c7; stroke-width: 1.58; filter: drop-shadow(0 0 4px #ffe284) drop-shadow(0 0 11px #fff3b4); animation: trail-flow 1.06s ease-out both; }

.star { position: absolute; z-index: 4; display: grid; width: 58px; height: 58px; place-items: center; left: var(--x); top: var(--y); color: #f7faed; background: transparent; transform: translate(-50%, -50%); }
.star i { position: relative; width: 18px; height: 18px; border: 3px solid #fffdf3; border-radius: 4px; background: #bce1d7; box-shadow: 0 0 0 7px #e8f6e07d, 0 0 20px #fff1b0; transform: rotate(45deg); transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.star i::after { position: absolute; inset: 4px; content: ""; border-radius: 50%; background: #fffdf0; }
.star:hover i { transform: rotate(45deg) scale(1.14); }
.star span { position: absolute; top: 44px; font-size: 13px; letter-spacing: .1em; text-shadow: 0 1px 3px #3d646a; }
.star.selected i { background: #e5a34e; box-shadow: 0 0 0 8px #ffe4a47d, 0 0 26px #ffedb4; animation: star-pulse .75s ease-in-out infinite alternate; }
.exchange-glow .star i { animation: star-warm .7s ease-out both; }

.sparkles { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.sparkles::before, .sparkles::after { position: absolute; top: calc(50% - 10px); left: calc(50% - 56px); width: 112px; height: 20px; content: ""; border-top: 2px solid #fff3bd88; border-radius: 50%; transform: rotate(-23deg); }
.sparkles::after { opacity: .72; transform: rotate(37deg); }
.sparkles i { position: absolute; top: 46%; left: 50%; width: 7px; height: 7px; border-radius: 1px; background: #fff6be; box-shadow: 0 0 10px #ffe77f; transform: rotate(45deg); animation: spark 1.1s ease-out both; }
.sparkles i:nth-child(1) { --dx: -80px; --dy: -45px; }.sparkles i:nth-child(2) { --dx: 96px; --dy: -62px; animation-delay: .05s; }.sparkles i:nth-child(3) { --dx: 62px; --dy: 62px; animation-delay: .12s; }.sparkles i:nth-child(4) { --dx: -88px; --dy: 49px; animation-delay: .08s; }.sparkles i:nth-child(5) { --dx: 0; --dy: -108px; animation-delay: .16s; }

.constellation-mark { position: absolute; z-index: 5; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; background: radial-gradient(circle at center, #fff9 0%, #fff5 23%, transparent 55%); animation: constellation-in .78s cubic-bezier(.19,.9,.31,1) both; }
.catalogue-seal { min-width: 210px; padding: 18px 25px 16px; border: 1px solid #fff1c5bd; border-radius: 50%; color: #fffdf1; background: #5d898d3d; box-shadow: 0 0 0 8px #fff4c322, 0 0 35px #ffedaa5e; }
.catalogue-seal > span { display: block; color: #fff6bd; font-size: 35px; line-height: .9; text-shadow: 0 0 16px #e7aa4e; }
.catalogue-seal p { margin: 7px 0 4px; font-family: "Hiragino Sans GB", sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.catalogue-seal b { display: block; font-size: 21px; letter-spacing: .13em; text-shadow: 0 2px 8px #315d61; }
.catalogue-seal small { display: block; margin-top: 6px; font-family: "Hiragino Sans GB", sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-shadow: 0 1px 6px #315d61; }

.status { padding: 8px 8px 2px; text-align: center; }
.status span { color: #61798b; font-family: "Hiragino Sans GB", sans-serif; font-size: 12px; letter-spacing: .03em; }.status b { color: #b66f35; }.status p { min-height: 42px; margin: 9px 0; color: #506b7c; line-height: 1.55; }
.clear-actions { display: flex; justify-content: center; gap: 10px; }.primary, .secondary { padding: 13px 18px; border-radius: 99px; font-weight: 800; }.primary { color: #fffdf4; background: linear-gradient(135deg, #ce8550, #c86658); box-shadow: 0 6px 0 #a35b4e, 0 10px 17px #c98c6a42; }.primary em { font-size: 18px; font-style: normal; }.secondary { color: #8b632f; border: 1px solid #e6c681; background: #fff5dd; box-shadow: 0 5px 0 #d6bd88; }

.theme-intro { padding: 31px 7px 8px; }
.theme-intro span { color: #ba7c3e; font-family: "Hiragino Sans GB", sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .17em; }
.theme-intro h2 { margin: 8px 0 0; font-size: 23px; line-height: 1.34; letter-spacing: .04em; }

.theme-mural {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  height: min(47vh, 395px);
  margin: 19px -2px 16px;
  overflow: hidden;
  border: 1px solid #f4edda;
  border-radius: 27px;
  box-shadow: inset 0 0 0 1px #ffffff8c, 0 17px 30px #4d717d2e;
}

.theme-mural::before,
.theme-mural::after { position: absolute; z-index: 0; content: ""; pointer-events: none; }
.mural-moon-court { background: radial-gradient(circle at 71% 21%, #fff0bf 0 9%, #e9daa8 10% 15%, transparent 16%), linear-gradient(145deg, #c7e0d8, #8fbac0 58%, #527f8b); }
.mural-moon-court::before { left: 23%; bottom: -6%; width: 54%; height: 92%; border: 25px solid #fff0c86b; border-bottom: 0; border-radius: 120px 120px 0 0; box-shadow: 0 0 0 22px #e8f1d65c; }
.mural-moon-court::after { right: -10%; bottom: -16%; width: 81%; height: 47%; background: #577f8a; clip-path: polygon(0 100%, 0 55%, 32% 8%, 62% 48%, 100% 0, 100% 100%); }
.mural-cloud-bridge { background: radial-gradient(circle at 19% 22%, #fff1c2 0 8%, transparent 9%), linear-gradient(145deg, #d8e4cf, #8ebfc0 54%, #4f7f8b); }
.mural-cloud-bridge::before { top: 47%; left: -18%; width: 136%; height: 58px; border: 19px solid #f7edc575; border-radius: 50%; transform: rotate(-16deg); }
.mural-cloud-bridge::after { right: 7%; bottom: -5%; width: 82px; height: 78%; background: #527b89; clip-path: polygon(0 100%, 0 15%, 38% 0, 78% 15%, 100% 100%); box-shadow: -135px 66px 0 -24px #658e96; }
.mural-sky-observatory { background: radial-gradient(circle at 69% 19%, #f7e8b7 0 8%, transparent 9%), linear-gradient(145deg, #9ec5ca, #658d9c 55%, #385e75); }
.mural-sky-observatory::before { left: 42%; bottom: 15%; width: 92px; height: 185px; background: #486f82; clip-path: polygon(18% 100%, 18% 19%, 50% 0, 82% 19%, 82% 100%); box-shadow: 0 -16px 0 -3px #e8d79d, -128px 95px 0 -24px #557e8c, 129px 84px 0 -24px #557e8c; }
.mural-sky-observatory::after { top: 48%; left: -10%; width: 120%; height: 2px; background: #f7eac49e; box-shadow: 0 26px 0 #f7eac45f; transform: rotate(-12deg); }

.mural-slice {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px;
  color: #fff7d3;
  background: #173443a8;
  box-shadow: inset 0 0 0 1px #fff8;
  transition: background .7s ease, box-shadow .7s ease, filter .7s ease;
}

.mural-slice:nth-child(1) { clip-path: polygon(0 0, 100% 0, 94% 95%, 0 100%); }
.mural-slice:nth-child(2) { clip-path: polygon(6% 0, 100% 0, 100% 100%, 0 94%); }
.mural-slice:nth-child(3) { clip-path: polygon(0 6%, 94% 0, 100% 100%, 0 100%); }
.mural-slice:nth-child(4) { clip-path: polygon(0 0, 100% 6%, 100% 100%, 6% 100%); }
.mural-slice span { font-family: "Hiragino Sans GB", sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .13em; opacity: .76; }
.mural-slice small { align-self: flex-end; font-size: 15px; letter-spacing: .1em; text-shadow: 0 1px 4px #294b57; }
.mural-slice.lit { color: #fffbe9; background: transparent; box-shadow: inset 0 0 0 2px #fff3c4cc, inset 0 0 38px #fff2a85e; }
.mural-slice.lit span { color: #fff5b9; opacity: 1; }.mural-slice.current { box-shadow: inset 0 0 0 3px #fff8d6, inset 0 0 44px #fff0a87a; }
.mural-slice em { position: absolute; top: 10px; right: 10px; padding: 4px 6px; border: 1px solid #fff4c48e; border-radius: 99px; color: #fff8d6; background: #7e9b8b70; font-family: "Hiragino Sans GB", sans-serif; font-size: 9px; font-style: normal; font-weight: 800; letter-spacing: .08em; }
.theme-mural.is-complete .mural-slice { background: transparent; box-shadow: inset 0 0 0 1px #fff2c180; animation: slice-open .8s ease both; }
.theme-mural.is-complete .mural-slice:nth-child(2) { animation-delay: .08s; }.theme-mural.is-complete .mural-slice:nth-child(3) { animation-delay: .16s; }.theme-mural.is-complete .mural-slice:nth-child(4) { animation-delay: .24s; }
.mural-glow { position: absolute; z-index: 3; top: 50%; left: 50%; display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid #fff3bd9e; border-radius: 50%; color: #fff7c4; background: #fff4c533; box-shadow: 0 0 0 10px #fff3c51c, 0 0 27px #ffea9387; font-size: 27px; opacity: .28; transform: translate(-50%, -50%); transition: opacity .7s ease, transform .7s ease; }
.theme-mural.is-complete .mural-glow { opacity: 1; transform: translate(-50%, -50%) scale(1.18); animation: mural-heart 1.6s ease-in-out infinite alternate; }
.theme-note { margin: 0 8px 20px; color: #5d7681; line-height: 1.65; text-align: center; }.theme-actions { padding-bottom: 4px; }

.quiet-reset { margin-top: -3px; color: #7d8e93; background: transparent; font-family: "Hiragino Sans GB", sans-serif; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }
.menu-sigil { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid #dbcfae; border-radius: 50%; color: #c88c46; background: #fff8e5; box-shadow: 0 4px 0 #b5c5be66; font-size: 18px; }
.menu-intro { padding: 32px 8px 12px; }.menu-intro span { color: #b77938; font-family: "Hiragino Sans GB", sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .18em; }.menu-intro h2 { margin: 8px 0 10px; font-size: 29px; line-height: 1.2; letter-spacing: .045em; }.menu-intro p { margin: 0; color: #5e7780; font-size: 14px; line-height: 1.7; }
.theme-menu-list { display: grid; gap: 13px; padding: 7px 1px; }.theme-menu-card { position: relative; display: grid; grid-template-columns: 116px 1fr; grid-template-rows: auto auto 1fr auto; column-gap: 13px; min-height: 132px; padding: 10px 12px 10px 10px; overflow: hidden; border: 1px solid #e0d7bf; border-radius: 21px; color: var(--ink); background: #fffdf5c9; text-align: left; box-shadow: 0 7px 0 #b5c5be45, 0 12px 23px #57778318; }.theme-menu-card:hover { transform: translateY(-2px); box-shadow: 0 9px 0 #b5c5be45, 0 15px 28px #57778325; }.theme-menu-card > b { align-self: end; font-size: 20px; letter-spacing: .08em; }.theme-menu-card > small { align-self: start; color: #667d84; font-size: 11px; line-height: 1.45; }.theme-menu-card > em { align-self: end; color: #ad7138; font-family: "Hiragino Sans GB", sans-serif; font-size: 11px; font-style: normal; font-weight: 800; letter-spacing: .04em; }.theme-menu-card > em i { font-size: 15px; font-style: normal; }.theme-card-meta { color: #a7753e; font-family: "Hiragino Sans GB", sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .09em; }
.menu-mural { position: relative; grid-row: 1 / span 4; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); overflow: hidden; border-radius: 14px; background: #709aa0; box-shadow: inset 0 0 0 1px #fff8; }.menu-mural::before { position: absolute; z-index: 0; inset: 15% 25%; content: ""; border: 12px solid #fff0c46b; border-bottom: 0; border-radius: 60px 60px 0 0; }.menu-mural.mural-cloud-bridge::before { inset: 43% -8%; height: 19px; border: 10px solid #fff0c46b; border-radius: 50%; transform: rotate(-16deg); }.menu-mural.mural-sky-observatory::before { inset: 22% 37%; border: 0; border-radius: 0; background: #436f7c; clip-path: polygon(22% 100%, 22% 15%, 50% 0, 78% 15%, 78% 100%); }.menu-slice { position: relative; z-index: 1; background: #173443a8; box-shadow: inset 0 0 0 1px #fff7; transition: background .5s ease; }.menu-slice.lit { background: #fff1bb26; box-shadow: inset 0 0 0 1px #fff1bc9a; }.menu-mural > b { position: absolute; z-index: 2; top: 50%; left: 50%; color: #fff6bf; font-size: 18px; opacity: .42; text-shadow: 0 0 10px #fce79c; transform: translate(-50%, -50%); }.menu-note { margin: 16px 8px 0; color: #627a83; font-size: 12px; line-height: 1.6; text-align: center; }

@keyframes trail-flow { 0% { stroke-dasharray: 0 18; opacity: .65; } 60% { stroke-dasharray: 12 5; opacity: 1; } 100% { stroke-dasharray: none; opacity: 1; } }
@keyframes spark { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(45deg) scale(.2); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(145deg) scale(1.35); } }
@keyframes star-pulse { to { filter: brightness(1.12); transform: rotate(45deg) scale(1.11); } }
@keyframes star-warm { 45% { transform: rotate(45deg) scale(1.35); background: #fff5c0; box-shadow: 0 0 0 10px #ffe49280, 0 0 31px #fff3b6; } 100% { transform: rotate(45deg) scale(1); } }
@keyframes constellation-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
@keyframes slice-open { from { opacity: .36; filter: brightness(.72); } to { opacity: 1; filter: brightness(1); } }
@keyframes mural-heart { to { filter: brightness(1.12); box-shadow: 0 0 0 15px #fff3c51c, 0 0 42px #ffea939f; } }

@media (min-width: 650px) { body { padding: 30px; }.shell { min-height: 780px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }