:root {
  color-scheme: light;
  --bg: #1c1712;
  --panel: #fffaf0;
  --ink: #211611;
  --muted: #7a6750;
  --line: #d8c7aa;
  --teal: #6f4930;
  --teal-deep: #4a2b1e;
  --coral: #a8443e;
  --gold: #b8893e;
  --mint: #f4ead7;
  --paper: #fff7e8;
  --paper-deep: #efe0c5;
  --radius: 8px;
  --shadow: 0 18px 42px rgba(75, 42, 22, .12);
}

/* Daily sign detail paper trial */
.daily-cover-result {
  --daily-paper-rgb: 247, 239, 226;
  --daily-tone-rgb: 91, 112, 79;
  --daily-tone-muted-rgb: 104, 110, 95;
  --daily-sentence-rgb: 104, 110, 95;
  --daily-sentence-shadow-rgb: 247, 239, 226;
  --daily-guide-rgb: 62, 82, 52;
  --daily-guide-soft-rgb: 74, 88, 64;
  --daily-guide-shadow-rgb: 247, 239, 226;
  --daily-button-rgb: 91, 112, 79;
  --daily-button-deep-rgb: 75, 100, 66;
  padding: max(10px, env(safe-area-inset-top)) 14px calc(24px + env(safe-area-inset-bottom));
  gap: 10px;
  background: #eee6d8;
}

.daily-cover-result::before {
  inset: -42px;
  background:
    var(--daily-cover-bg, url("/images/mine-bg.png")) center top / cover no-repeat,
    #efe4d2;
  filter: blur(18px) saturate(1.12);
  transform: scale(1.1);
  opacity: .9;
}

.daily-cover-result::after {
  background:
    linear-gradient(180deg, rgba(var(--daily-paper-rgb), .56), rgba(var(--daily-paper-rgb), .32) 42%, rgba(var(--daily-paper-rgb), .5)),
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, .26), transparent 38%);
}

.daily-cover-result .result-hero-head {
  width: min(100%, 420px);
  min-height: 42px;
  margin: 0 auto 2px;
  align-items: center;
}

.daily-cover-result .result-home-title {
  width: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 253, 246, .72);
  color: rgba(var(--daily-tone-rgb), .9);
  font-size: 0;
  box-shadow: 0 10px 24px rgba(56, 42, 31, .12), inset 0 1px 0 rgba(255, 255, 255, .78);
  backdrop-filter: blur(16px);
}

.daily-cover-result .result-home-title::before {
  content: none;
}

.daily-cover-result .result-home-title span {
  display: block;
  margin-top: -2px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 35px;
  line-height: 1;
  font-weight: 400;
}

.daily-cover-result .result-retune-actions {
  gap: 0;
}

.daily-cover-result .retune-pill,
.daily-cover-result .result-retune-actions .retune-pill {
  min-height: 38px;
  padding: 0 15px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 253, 246, .74);
  color: rgba(var(--daily-tone-rgb), .9);
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 10px 24px rgba(56, 42, 31, .1), inset 0 1px 0 rgba(255, 255, 255, .8);
  backdrop-filter: blur(16px);
}

.daily-cover-result .result-retune-actions .retune-pill span {
  margin-right: 3px;
  font-size: 15px;
}

.daily-cover-result .cover-sign-detail {
  width: min(100%, 420px);
  height: auto;
  min-height: 0;
  margin: 0 auto;
  gap: 0;
  padding: 0 0 18px;
  border: 0;
  border-radius: 19px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 252, 244, .46), rgba(var(--daily-paper-rgb), .36)),
    rgba(var(--daily-paper-rgb), .32);
  color: #4c473d;
  box-shadow:
    0 14px 38px rgba(49, 39, 29, .07),
    inset 0 1px 0 rgba(255, 255, 255, .32);
  backdrop-filter: blur(7px);
}

.daily-cover-result .cover-sign-detail::before {
  display: none;
}

.daily-cover-result .cover-sign-detail::after {
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 20% 8%, rgba(255, 255, 255, .24), transparent 22%),
    linear-gradient(180deg, rgba(255, 255, 255, .1), transparent 18%, transparent 72%, rgba(255, 255, 255, .08)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23p)' opacity='.08'/%3E%3C/svg%3E");
  opacity: .22;
}

.daily-cover-result .daily-cover-paper {
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.daily-cover-result .daily-cover-paper-head {
  padding: 56px 31px 0;
}

.daily-cover-result .daily-paper-date {
  width: fit-content;
  margin: 0 0 22px;
  color: rgba(var(--daily-tone-rgb), .86);
  font-family: Georgia, "Times New Roman", serif;
  text-align: left;
}

.daily-cover-result .daily-paper-date span,
.daily-cover-result .daily-paper-date b {
  display: block;
  font-weight: 400;
  letter-spacing: .2em;
}

.daily-cover-result .daily-paper-date span {
  font-size: 18px;
  line-height: 1;
}

.daily-cover-result .daily-paper-date b {
  position: relative;
  margin-top: 8px;
  padding-bottom: 14px;
  font-size: 30px;
  line-height: .9;
  letter-spacing: .12em;
}

.daily-cover-result .daily-paper-date b::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 30px;
  height: 1px;
  background: rgba(var(--daily-tone-rgb), .62);
}

.daily-cover-result .daily-title-row {
  position: relative;
  display: block;
  margin: 0 0 20px;
  padding-right: 42px;
}

.daily-cover-result .cover-sign-detail h1 {
  max-width: 100%;
  margin: 0;
  color: rgba(var(--daily-tone-rgb), .96);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: clamp(30px, 8.4vw, 38px);
  line-height: 1.22;
  font-weight: 500;
  letter-spacing: 0;
  text-shadow: 0 1px 16px rgba(var(--daily-paper-rgb), .58), 0 0 1px rgba(var(--daily-paper-rgb), .4);
}

.daily-cover-result .cover-sign-detail .daily-cover-mark {
  position: absolute;
  right: 0;
  top: 7px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(var(--daily-tone-rgb), .18);
  background: rgba(255, 253, 246, .44);
  color: rgba(var(--daily-tone-rgb), .86);
  backdrop-filter: blur(8px);
  transform: none;
}

.daily-cover-result .cover-sign-detail .daily-cover-mark::before {
  inset: 5px;
  border-color: rgba(var(--daily-tone-rgb), .12);
}

.daily-cover-result .cover-sign-detail .daily-cover-mark span {
  font-size: 17px;
  font-weight: 500;
}

.daily-cover-result .cover-sign-detail .result-main-sentence {
  max-width: 270px;
  margin: 0 0 18px;
  color: rgba(var(--daily-sentence-rgb), .9);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 18px;
  line-height: 1.74;
  font-weight: 400;
  letter-spacing: 0;
  text-shadow: 0 1px 16px rgba(var(--daily-sentence-shadow-rgb), .72), 0 0 1px rgba(var(--daily-sentence-shadow-rgb), .58);
}

.daily-cover-result .daily-sentence-quote {
  display: inline-block;
  color: rgba(var(--daily-sentence-rgb), .62);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  line-height: 0;
  transform: translateY(5px);
}

.daily-cover-result .daily-cover-stage {
  width: 100%;
  margin: -12px 0 -68px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .68) 4%, rgba(0, 0, 0, .96) 8%, #000 11%, #000 86%, rgba(0, 0, 0, .88) 95%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .68) 4%, rgba(0, 0, 0, .96) 8%, #000 11%, #000 86%, rgba(0, 0, 0, .88) 95%, transparent 100%);
}

.daily-cover-result .daily-cover-image,
.daily-cover-result .daily-cover-placeholder {
  border-radius: inherit;
  transform: translate3d(var(--cover-shift-x), var(--cover-shift-y), 18px) scale(1.035);
}

.daily-cover-result .daily-cover-shade {
  background:
    linear-gradient(180deg, transparent 0%, transparent 76%, rgba(16, 20, 14, .03) 88%, rgba(16, 20, 14, .08) 100%);
}

.daily-cover-result .daily-cover-stage::after {
  background:
    radial-gradient(circle at var(--cover-glare-x) var(--cover-glare-y), rgba(255, 255, 255, .1), transparent 22%),
    linear-gradient(135deg, rgba(255, 255, 255, .015), transparent 40%);
  opacity: .035;
}

.daily-cover-result .daily-cover-paper-body {
  padding: 0 31px;
}

.daily-cover-result .cover-sign-detail .daily-cover-guide {
  display: block;
  margin: 0;
  padding: 0;
}

.daily-cover-result .cover-sign-detail .mind-guide-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: auto;
  align-items: center;
  justify-items: stretch;
  gap: 16px;
  min-height: 58px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: inset 0 -1px 0 rgba(var(--daily-guide-rgb), .2);
  text-align: left;
  backdrop-filter: none;
}

.daily-cover-result .cover-sign-detail .mind-guide-item i {
  grid-row: 1;
  grid-column: 1;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(var(--daily-guide-rgb), .96);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 27px;
  font-weight: 500;
  box-shadow: none;
}

.daily-cover-result .cover-sign-detail .mind-guide-item b {
  display: none;
}

.daily-cover-result .cover-sign-detail .mind-guide-item span {
  grid-row: 1;
  grid-column: 2;
  display: block;
  min-height: 0;
  color: rgba(var(--daily-guide-soft-rgb), .9);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 15.5px;
  line-height: 1.5;
  font-weight: 400;
  overflow: visible;
  -webkit-line-clamp: unset;
}

.daily-cover-result .cover-sign-detail .waiting-luck-button {
  min-height: 32px;
  width: fit-content;
  margin: 18px auto 0;
  padding: 0 10px;
  color: rgba(var(--daily-tone-rgb), .82);
  font-size: 14px;
  font-weight: 400;
}

.daily-cover-result .cover-sign-detail .result-luck-strip {
  margin-top: 14px;
}

.daily-cover-result .result-bottom-actions {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 14px));
  left: auto;
  width: auto;
  margin: 0;
  transform: none;
  z-index: 82;
}

.daily-cover-result .result-bottom-actions .primary-red {
  min-width: 64px;
  min-height: 42px;
  width: auto;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .18), transparent 42%),
    linear-gradient(135deg, rgba(var(--daily-button-rgb), .96), rgba(var(--daily-button-deep-rgb), .98));
  color: rgba(255, 255, 255, .94);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  box-shadow: 0 14px 26px rgba(var(--daily-button-deep-rgb), .28), inset 0 1px 0 rgba(255, 255, 255, .22);
}

@media (max-height: 760px) {
  .daily-cover-result {
    padding-top: max(12px, calc(env(safe-area-inset-top) + 6px));
    gap: 8px;
  }

  .daily-cover-result .result-hero-head {
    min-height: 38px;
  }

  .daily-cover-result .result-home-title {
    width: auto;
    min-width: 0;
    min-height: 34px;
    padding: 0 13px;
    font-size: 13px;
  }

  .daily-cover-result .retune-pill,
  .daily-cover-result .result-retune-actions .retune-pill {
    min-height: 36px;
    font-size: 13px;
  }

  .daily-cover-result .daily-cover-paper-head {
    padding: 36px 27px 7px;
  }

  .daily-cover-result .daily-paper-date {
    margin-bottom: 16px;
  }

  .daily-cover-result .daily-paper-date span {
    font-size: 15px;
  }

  .daily-cover-result .daily-paper-date b {
    margin-top: 7px;
    padding-bottom: 11px;
    font-size: 26px;
  }

  .daily-cover-result .cover-sign-detail h1 {
    font-size: clamp(27px, 7.8vw, 33px);
  }

  .daily-cover-result .cover-sign-detail .result-main-sentence {
    max-width: 250px;
    font-size: 16px;
    line-height: 1.6;
  }

  .daily-cover-result .daily-sentence-quote {
    font-size: 22px;
    transform: translateY(4px);
  }

  .daily-cover-result .daily-cover-stage {
    width: 100%;
    margin-top: -30px;
    margin-bottom: -58px;
  }

  .daily-cover-result .daily-cover-paper-body {
    padding: 10px 27px 0;
  }

  .daily-cover-result .cover-sign-detail .mind-guide-item {
    min-height: 48px;
    gap: 12px;
  }

  .daily-cover-result .cover-sign-detail .mind-guide-item i {
    font-size: 23px;
  }

  .daily-cover-result .cover-sign-detail .mind-guide-item span {
    font-size: 14px;
  }

  .daily-cover-result .result-bottom-actions .primary-red {
    min-height: 50px;
    font-size: 15px;
  }
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 0, rgba(184, 137, 62, .18), transparent 32%),
    var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  touch-action: manipulation;
  overscroll-behavior-x: none;
}

button,
input,
textarea {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

input,
textarea {
  outline: none;
  touch-action: auto;
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
}

.screen,
.screen * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.screen img {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}

.screen button,
.screen a,
.screen label,
.screen input,
.screen textarea,
.screen select,
.screen [contenteditable="true"],
.screen [data-action],
.screen [role="button"] {
  pointer-events: auto;
}

.screen input,
.screen textarea,
.screen select,
.screen [contenteditable="true"] {
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
}

.app-shell {
  width: min(100%, 430px);
  min-height: 100vh;
  margin: 0 auto;
  touch-action: manipulation;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 255, 255, .64), transparent 28%),
    linear-gradient(180deg, #fbf2df 0%, #ead8bc 100%);
  position: relative;
  overflow-x: hidden;
  overflow-y: visible;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 28px 80px rgba(0, 0, 0, .38);
}

@supports (overflow: clip) {
  .app-shell {
    overflow-x: clip;
  }
}

.app-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  width: min(100%, 430px);
  margin: 0 auto;
  pointer-events: none;
  opacity: .22;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.74' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  z-index: 0;
}

.screen {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding: max(16px, env(safe-area-inset-top)) 16px 92px;
}

.home-screen {
  padding-bottom: 118px;
}

.home-screen,
.diary-screen {
  isolation: isolate;
  background: #f4dfbd;
}

.home-screen::before,
.diary-screen::before {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: -1;
  width: min(100%, 430px);
  transform: translateX(-50%);
  background: #f4dfbd url("/images/mine-bg.png") center top / cover no-repeat;
  pointer-events: none;
}

.home-screen {
  --home-bg-x: 0px;
  --home-bg-y: 0px;
  --home-fg-x: 0px;
  --home-fg-y: 0px;
  min-height: 100svh;
  padding: max(20px, env(safe-area-inset-top)) 20px 18px;
  overflow-x: hidden;
  color: rgba(255, 255, 255, .96);
  background: #e8d9b7;
}

.home-screen::before {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: -1;
  width: min(100%, 430px);
  transform: translateX(-50%) translate3d(var(--home-bg-x), var(--home-bg-y), 0) scale(1.07);
  transform-origin: center top;
  background: var(--home-bg, url("/images/mine-bg.png")) center top / cover no-repeat;
  filter: saturate(1.02);
  pointer-events: none;
  will-change: transform;
  transition: transform .12s ease-out;
}

.home-screen:not(.parallax-sensor)::before {
  animation: homeBackgroundDrift 8.5s ease-in-out infinite alternate;
}

.home-screen:not(.parallax-sensor) .home-today-prompt,
.home-screen:not(.parallax-sensor) .home-today-hub,
.home-screen:not(.parallax-sensor) .home-profile-nudge,
.home-screen:not(.parallax-sensor) .home-scroll-cue {
  animation: homeForegroundDrift 8.5s ease-in-out infinite alternate;
}

@keyframes homeBackgroundDrift {
  0% {
    transform: translateX(-50%) translate3d(-9px, -4px, 0) scale(1.07);
  }

  45% {
    transform: translateX(-50%) translate3d(7px, 3px, 0) scale(1.072);
  }

  100% {
    transform: translateX(-50%) translate3d(12px, -2px, 0) scale(1.07);
  }
}

@keyframes homeForegroundDrift {
  0% {
    transform: translate3d(3px, 1px, 0);
  }

  45% {
    transform: translate3d(-3px, -1px, 0);
  }

  100% {
    transform: translate3d(-4px, 1px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-screen:not(.parallax-sensor)::before,
  .home-screen:not(.parallax-sensor) .home-today-prompt,
  .home-screen:not(.parallax-sensor) .home-today-hub,
  .home-screen:not(.parallax-sensor) .home-profile-nudge,
  .home-screen:not(.parallax-sensor) .home-scroll-cue {
    animation: none;
  }
}

.home-screen::after {
  display: none;
}

.home-screen .pull-refresh-indicator,
.home-screen > :not(.pull-refresh-indicator) {
  position: relative;
  z-index: 1;
}

.home-screen {
  box-shadow: none;
}

.home-screen .home-today-prompt {
  position: relative;
  z-index: 2;
  transform: translate3d(var(--home-fg-x), var(--home-fg-y), 0);
  will-change: transform;
  transition: transform .12s ease-out;
}

.home-screen .home-today-hub,
.home-screen .home-profile-nudge,
.home-screen .home-scroll-cue {
  position: relative;
  z-index: 2;
  transform: translate3d(var(--home-fg-x), var(--home-fg-y), 0);
  will-change: transform;
  transition: transform .12s ease-out;
}

.home-screen .home-today-hub::before {
  display: none;
}

.home-profile-nudge {
  width: 100%;
  min-height: 50px;
  margin: 8px 0 10px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 1px 8px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .22);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  background: transparent;
  color: rgba(255, 255, 255, .92);
  text-align: left;
  text-shadow: 0 3px 12px rgba(0, 0, 0, .22);
}

.home-profile-orb {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 50%;
  color: rgba(255, 246, 216, .92);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}

.home-profile-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.home-profile-copy b {
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 14px;
  line-height: 1.15;
  font-weight: 500;
}

.home-profile-copy small {
  color: rgba(255, 255, 255, .62);
  font-size: 10px;
  line-height: 1.35;
}

.home-profile-nudge > i {
  color: rgba(255, 247, 225, .76);
  font-size: 11px;
  font-style: normal;
  white-space: nowrap;
}

.pull-refresh-indicator {
  --pull-distance: 0px;
  position: fixed;
  left: 50%;
  top: max(8px, env(safe-area-inset-top));
  z-index: 95;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid rgba(184, 137, 62, .2);
  border-radius: 999px;
  background: rgba(255, 250, 240, .78);
  color: #6b4c36;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(75, 42, 22, .12);
  opacity: var(--pull-opacity, 0);
  pointer-events: none;
  transform: translate(-50%, calc(-120% + var(--pull-distance)));
  transition: opacity .16s ease, transform .18s ease;
  backdrop-filter: blur(14px);
}

.pull-refresh-indicator i {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .95) 0 18%, rgba(255, 219, 126, .92) 19% 48%, rgba(184, 137, 62, .18) 62%, transparent 70%);
  box-shadow: 0 0 14px rgba(226, 176, 72, .48);
}

.pull-refresh-indicator.ready,
.pull-refresh-indicator.refreshing {
  color: #8b3f35;
  border-color: rgba(168, 68, 62, .2);
}

.pull-refresh-indicator.refreshing {
  opacity: 1;
  transform: translate(-50%, 22px);
}

.pull-refresh-indicator.refreshing i {
  animation: pullRefreshGlow 1s ease-in-out infinite;
}

.newcomer-screen {
  min-height: 100svh;
  padding: 0;
  overflow: hidden;
  color: #17211d;
  background:
    radial-gradient(circle at 16% 24%, rgba(255, 255, 255, .92), transparent 24%),
    radial-gradient(circle at 84% 74%, rgba(217, 232, 224, .78), transparent 28%),
    linear-gradient(180deg, #f5f8f4 0%, #e9f0ec 58%, #f7f7f2 100%);
  isolation: isolate;
}

.newcomer-screen::before,
.newcomer-screen::after {
  content: "";
  position: fixed;
  inset: 0;
  left: 50%;
  width: min(100%, 430px);
  transform: translateX(-50%);
  pointer-events: none;
}

.newcomer-screen::before {
  z-index: -2;
  background:
    linear-gradient(rgba(39, 64, 55, .045) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(39, 64, 55, .04) 1px, transparent 1px) 0 0 / 28px 28px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .86), rgba(0, 0, 0, .48) 64%, transparent);
}

.newcomer-screen::after {
  z-index: -1;
  background:
    radial-gradient(circle at 32% 39%, rgba(255, 255, 255, .72) 0 1px, transparent 2px),
    radial-gradient(circle at 74% 52%, rgba(255, 255, 255, .54) 0 1px, transparent 2px),
    linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0));
}

.newcomer-paper {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: max(22px, calc(env(safe-area-inset-top) + 14px)) 25px max(22px, calc(env(safe-area-inset-bottom) + 18px));
}

.newcomer-head {
  position: relative;
  z-index: 2;
  min-height: 54px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.newcomer-head.home {
  min-height: 22px;
}

.newcomer-head em {
  margin-left: auto;
  color: rgba(43, 57, 51, .12);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(50px, 15vw, 68px);
  line-height: .86;
  font-style: normal;
  letter-spacing: 0;
}

.newcomer-back {
  min-width: 48px;
  min-height: 32px;
  padding: 0;
  border: 0;
  color: rgba(25, 36, 32, .72);
  background: transparent;
  font-size: 14px;
  text-align: left;
}

.newcomer-content {
  position: relative;
  z-index: 2;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
}

.newcomer-content.home-step {
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}

.newcomer-content.draw-step {
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}

.newcomer-content.profile-step {
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: stretch;
}

.newcomer-question {
  width: 100%;
  max-width: 344px;
  margin: 0 auto;
  animation: newcomerRise .44s cubic-bezier(.2, .74, .22, 1) both;
}

.newcomer-profile-main {
  width: 100%;
  max-width: 352px;
  margin: 0 auto;
  display: grid;
  align-content: start;
  padding-top: min(5svh, 44px);
  animation: newcomerRise .44s cubic-bezier(.2, .74, .22, 1) both;
}

.newcomer-profile-main .profile-flow-head {
  padding-right: 24px;
}

.newcomer-profile-main .profile-flow-summary {
  margin-top: 30px;
}

.newcomer-profile-main .profile-flow-picker {
  height: min(31svh, 248px);
  min-height: 214px;
  margin-top: 16px;
}

.newcomer-profile-main .profile-wheel-column {
  padding-block: calc((min(31svh, 248px) - 36px) / 2);
}

.newcomer-profile-main .profile-flow-note {
  min-height: 28px;
  margin-top: 0;
  font-size: clamp(12px, 3.4vw, 14px);
}

.newcomer-profile-actions {
  width: min(100%, 344px);
  margin: 0 auto;
  display: grid;
  gap: 8px;
}

.newcomer-profile-actions .newcomer-primary {
  width: 100%;
  min-height: 52px;
  margin: 0;
}

.newcomer-skip-profile {
  min-height: 30px;
  border: 0;
  background: transparent;
  color: rgba(45, 61, 54, .44);
  font-size: 13px;
  font-weight: 600;
}

.newcomer-skip-profile:active {
  color: rgba(45, 61, 54, .68);
}

.newcomer-home {
  width: 100%;
  max-width: 354px;
  min-height: 0;
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto auto minmax(260px, 1fr) auto;
  align-items: center;
  animation: newcomerRise .48s cubic-bezier(.2, .74, .22, 1) both;
}

.newcomer-home-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: rgba(42, 60, 52, .42);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
}

.newcomer-home-mark i {
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(42, 60, 52, .28), transparent);
}

.newcomer-home-copy {
  padding-top: min(5vh, 42px);
}

.newcomer-home-copy small {
  display: block;
  color: rgba(62, 84, 75, .46);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-align: center;
}

.newcomer-home-copy h1 {
  margin: 13px 0 0;
  color: rgba(18, 25, 22, .9);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: clamp(38px, 10.7vw, 48px);
  line-height: 1.24;
  font-weight: 500;
  letter-spacing: 0;
  text-align: center;
}

.newcomer-home-copy p {
  max-width: 268px;
  margin: 16px auto 0;
  color: rgba(43, 57, 51, .52);
  font-size: 14px;
  line-height: 1.72;
  text-align: center;
}

.newcomer-home-stage {
  position: relative;
  width: min(100%, 330px);
  height: min(38vh, 312px);
  min-height: 292px;
  margin: 8px auto 0;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: visible;
}

.newcomer-home-stage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 58%;
  z-index: -1;
  width: 330px;
  height: 200px;
  border-radius: 46px;
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 247, 217, .54), transparent 20%),
    radial-gradient(circle at 50% 52%, rgba(54, 91, 75, .18), transparent 50%),
    radial-gradient(ellipse at 50% 88%, rgba(18, 41, 34, .13), transparent 58%);
  filter: blur(12px);
  transform: translate(-50%, -50%);
}

.newcomer-masonry-field {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 316px;
  height: 292px;
  transform: translate(-50%, -50%);
}

.newcomer-masonry-card {
  --x: 0px;
  --y: 0px;
  --w: 100px;
  --h: 160px;
  --r: 0deg;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: var(--w);
  height: var(--h);
  border-radius: 14px;
  overflow: hidden;
  background: #13261f;
  box-shadow:
    0 18px 32px rgba(25, 45, 37, .14),
    0 6px 16px rgba(25, 45, 37, .1),
    inset 0 1px 0 rgba(255, 255, 255, .22);
  transform: translate3d(var(--x), var(--y), 0) rotate(var(--r));
  transform-origin: 50% 68%;
  animation: newcomerMasonryIn .72s cubic-bezier(.2, .74, .22, 1) both;
  animation-delay: calc(var(--card-index) * .08s);
  transition:
    transform .36s cubic-bezier(.2, .74, .22, 1),
    filter .36s cubic-bezier(.2, .74, .22, 1),
    box-shadow .36s cubic-bezier(.2, .74, .22, 1);
  will-change: transform, filter;
}

.newcomer-masonry-card.card-1 {
  --x: 98px;
  --y: 10px;
  --w: 120px;
  --h: 214px;
  --r: .2deg;
  z-index: 5;
  border-radius: 18px;
}

.newcomer-masonry-card.card-2 {
  --x: 10px;
  --y: 62px;
  --w: 82px;
  --h: 142px;
  --r: -4deg;
  z-index: 3;
}

.newcomer-masonry-card.card-3 {
  --x: 226px;
  --y: 64px;
  --w: 82px;
  --h: 142px;
  --r: 4deg;
  z-index: 3;
}

.newcomer-masonry-card.card-4 {
  display: none;
}

.newcomer-masonry-card.card-5 {
  display: none;
}

.newcomer-masonry-card.card-6 {
  display: none;
}

.newcomer-masonry-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.newcomer-masonry-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  background:
    radial-gradient(circle at 68% 26%, rgba(255, 255, 255, .4), transparent 18%),
    linear-gradient(135deg, rgba(255, 255, 255, .56), rgba(241, 232, 202, .72)),
    linear-gradient(145deg, rgba(67, 96, 82, .16), rgba(216, 190, 118, .2));
}

.newcomer-masonry-placeholder::before,
.newcomer-masonry-placeholder::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  height: 1px;
  background: rgba(64, 82, 73, .18);
}

.newcomer-masonry-placeholder::before {
  top: 42%;
}

.newcomer-masonry-placeholder::after {
  top: 56%;
}

.newcomer-masonry-card:hover,
.newcomer-masonry-card:active {
  z-index: 8;
  filter: saturate(1.04) brightness(1.02);
  box-shadow:
    0 22px 34px rgba(25, 45, 37, .2),
    0 7px 18px rgba(25, 45, 37, .12),
    inset 0 1px 0 rgba(255, 255, 255, .25);
  transform: translate3d(var(--x), calc(var(--y) - 7px), 0) rotate(var(--r)) scale(1.06);
}

@keyframes newcomerMasonryIn {
  from {
    opacity: 0;
    filter: blur(12px) saturate(.78);
    transform: translate3d(var(--x), calc(var(--y) + 42px), 0) rotate(calc(var(--r) - 4deg)) scale(.9);
  }
  to {
    opacity: 1;
    filter: blur(0) saturate(1);
    transform: translate3d(var(--x), var(--y), 0) rotate(var(--r)) scale(1);
  }
}

.newcomer-home-actions {
  display: grid;
  gap: 14px;
  padding-bottom: 2px;
  transform: translateY(-14px);
}

.newcomer-home-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.newcomer-home-points span {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 7px;
  color: rgba(43, 57, 51, .56);
  font-size: 12px;
  white-space: nowrap;
}

.newcomer-home-points b {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: rgba(20, 34, 29, .76);
  background: rgba(255, 255, 255, .5);
  box-shadow:
    0 8px 18px rgba(43, 65, 56, .07),
    inset 0 1px 0 rgba(255, 255, 255, .82);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 15px;
  font-weight: 500;
}

.newcomer-start-arrow {
  width: min(100%, 280px);
  min-height: 42px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  display: grid;
  grid-template-columns: 20px auto minmax(58px, 1fr);
  align-items: center;
  gap: 12px;
  color: rgba(70, 90, 80, .76);
  background: transparent;
  box-shadow: none;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.newcomer-start-orb {
  position: relative;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: 1px solid rgba(106, 128, 116, .16);
  background: rgba(255, 255, 255, .18);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .52),
    0 5px 16px rgba(72, 93, 82, .06);
}

.newcomer-start-orb::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(104, 131, 114, .58);
  box-shadow: 0 0 10px rgba(104, 131, 114, .22);
  transform: translate(-50%, -50%);
}

.newcomer-start-arrow span {
  white-space: nowrap;
  text-shadow: 0 2px 10px rgba(38, 55, 48, .08);
}

.newcomer-start-line {
  position: relative;
  height: 1px;
  display: block;
  background: linear-gradient(90deg, rgba(92, 114, 102, .18), rgba(92, 114, 102, .42));
}

.newcomer-start-line::before,
.newcomer-start-line::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: 10px;
  height: 1px;
  border-radius: 999px;
  background: rgba(92, 114, 102, .68);
  transform-origin: right center;
}

.newcomer-start-line::before {
  transform: translateY(-50%) rotate(42deg);
}

.newcomer-start-line::after {
  transform: translateY(-50%) rotate(-42deg);
}

.newcomer-start-arrow:active {
  color: rgba(50, 72, 62, .92);
}

.newcomer-start-arrow:active .newcomer-start-line {
  background: linear-gradient(90deg, rgba(92, 114, 102, .24), rgba(92, 114, 102, .58));
}

.newcomer-question small {
  display: block;
  color: rgba(62, 84, 75, .46);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
}

.newcomer-question h1 {
  margin: 18px 0 0;
  color: rgba(18, 25, 22, .9);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: clamp(33px, 9.1vw, 42px);
  line-height: 1.34;
  font-weight: 500;
  letter-spacing: 0;
}

.newcomer-question p {
  max-width: 276px;
  margin: 18px 0 0;
  color: rgba(43, 57, 51, .5);
  font-size: 14px;
  line-height: 1.78;
}

.newcomer-question.draw-mode {
  max-width: 372px;
  height: 100%;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  align-content: stretch;
}

.newcomer-question.draw-mode p {
  margin-top: 14px;
}

.newcomer-name-field {
  display: grid;
  gap: 10px;
  margin-top: min(8vh, 58px);
}

.newcomer-name-field span {
  color: rgba(43, 57, 51, .44);
  font-size: 12px;
}

.newcomer-name-field input {
  width: 100%;
  min-height: 62px;
  border: 0;
  border-bottom: 1px solid rgba(50, 68, 60, .18);
  border-radius: 0;
  outline: 0;
  color: rgba(18, 25, 22, .82);
  background: transparent;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: clamp(25px, 7.2vw, 31px);
  letter-spacing: 0;
}

.newcomer-name-field input::placeholder {
  color: rgba(43, 57, 51, .24);
}

.newcomer-gender-field {
  width: 100%;
  min-height: 48px;
  display: grid;
  grid-template-columns: repeat(2, 48px);
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
}

.newcomer-gender {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 1px solid rgba(42, 60, 52, .1);
  border-radius: 50%;
  color: rgba(24, 36, 31, .62);
  background:
    radial-gradient(circle at 36% 28%, rgba(255, 255, 255, .9), transparent 38%),
    rgba(255, 255, 255, .34);
  box-shadow:
    0 8px 18px rgba(43, 65, 56, .06),
    inset 0 1px 0 rgba(255, 255, 255, .8);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 21px;
  line-height: 1;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.newcomer-gender.active {
  color: rgba(17, 27, 23, .92);
  border-color: rgba(26, 42, 35, .16);
  background:
    radial-gradient(circle at 35% 27%, rgba(255, 255, 255, .98), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, .72), rgba(229, 238, 232, .58));
  box-shadow:
    0 8px 18px rgba(43, 65, 56, .08),
    inset 0 0 0 1px rgba(255, 255, 255, .74);
}

.newcomer-tone-list {
  display: grid;
  gap: 12px;
  margin-top: min(8vh, 58px);
}

.newcomer-tone {
  width: 100%;
  min-height: 64px;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: rgba(23, 33, 29, .55);
  background: rgba(255, 255, 255, .28);
  box-shadow: none;
  text-align: left;
  transition: transform .22s ease, background .22s ease, border-color .22s ease, color .22s ease;
}

.newcomer-tone b {
  color: inherit;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 20px;
  font-weight: 500;
}

.newcomer-tone span {
  color: rgba(43, 57, 51, .42);
  font-size: 12px;
  line-height: 1.45;
}

.newcomer-tone.active {
  color: rgba(18, 25, 22, .9);
  border-color: rgba(42, 60, 52, .12);
  background: rgba(255, 255, 255, .72);
  transform: translateX(6px);
  box-shadow: 0 14px 34px rgba(54, 74, 65, .08);
}

.newcomer-draw-view {
  position: relative;
  width: min(100%, 372px);
  min-height: 360px;
  margin: 20px auto 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  overflow: visible;
  isolation: isolate;
}

.newcomer-draw-view::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: -1;
  width: min(380px, 112vw);
  height: 280px;
  border-radius: 42px;
  background:
    radial-gradient(circle at 52% 38%, rgba(255, 246, 205, .78), transparent 16%),
    radial-gradient(circle at 50% 50%, rgba(33, 81, 66, .24), transparent 41%),
    radial-gradient(ellipse at 50% 86%, rgba(18, 41, 34, .18), transparent 54%);
  filter: blur(14px);
  transform: translate(-50%, -50%);
  opacity: .78;
}

.newcomer-draw-view .opening-deck-stage {
  min-height: 306px;
  align-self: center;
  place-items: center;
}

.newcomer-draw-view .opening-deck-stage::after {
  top: calc(50% + 96px);
  width: min(360px, 104vw);
  height: 74px;
  opacity: .42;
}

.newcomer-draw-view .opening-card-belt {
  width: min(360px, 100%);
  height: 292px;
  transform: translateY(2px);
}

.newcomer-draw-view .opening-deck-card {
  width: 128px;
  height: 228px;
  border-radius: 17px;
}

.newcomer-draw-view .opening-draw-card {
  width: clamp(144px, 39vw, 164px);
  height: clamp(250px, 67vw, 286px);
  border-radius: 20px;
}

.newcomer-draw-view .opening-card-aura {
  inset: -22px;
  opacity: .66;
}

.newcomer-draw-view .opening-energy-target {
  top: 55%;
  width: clamp(62px, 16vw, 74px);
  height: clamp(62px, 16vw, 74px);
}

.newcomer-draw-view .opening-hold-ring {
  top: 55%;
  width: clamp(82px, 21vw, 96px);
  height: clamp(82px, 21vw, 96px);
}

.newcomer-draw-view .opening-card-back i {
  top: 19%;
}

.newcomer-draw-view .opening-card-back em {
  bottom: 15%;
}

.newcomer-draw-view .deck-1 { transform: translate(calc(-50% - 140px), calc(-50% + 34px)) rotate(-14deg); filter: brightness(.42) saturate(.82) blur(.45px); }
.newcomer-draw-view .deck-2 { transform: translate(calc(-50% - 102px), calc(-50% + 20px)) rotate(-10deg); filter: brightness(.5) saturate(.88) blur(.28px); }
.newcomer-draw-view .deck-3 { transform: translate(calc(-50% - 64px), calc(-50% + 8px)) rotate(-6deg); filter: brightness(.58) saturate(.92) blur(.16px); }
.newcomer-draw-view .deck-4 { transform: translate(calc(-50% + 64px), calc(-50% + 8px)) rotate(6deg); filter: brightness(.58) saturate(.92) blur(.16px); }
.newcomer-draw-view .deck-5 { transform: translate(calc(-50% + 102px), calc(-50% + 20px)) rotate(10deg); filter: brightness(.5) saturate(.88) blur(.28px); }
.newcomer-draw-view .deck-6 { transform: translate(calc(-50% + 140px), calc(-50% + 34px)) rotate(14deg); filter: brightness(.42) saturate(.82) blur(.45px); }
.newcomer-draw-view .deck-7 { --settle-x: 164px; --settle-y: 44px; --settle-r: 16deg; --exit-x: 190px; --exit-y: 56px; --exit-r: 20deg; opacity: 0; transform: translate(calc(-50% + 164px), calc(-50% + 44px)) rotate(16deg) scale(.78); }
.newcomer-draw-view .deck-8 { --settle-x: -164px; --settle-y: 44px; --settle-r: -16deg; --exit-x: -190px; --exit-y: 56px; --exit-r: -20deg; opacity: 0; transform: translate(calc(-50% - 164px), calc(-50% + 44px)) rotate(-16deg) scale(.78); }
.newcomer-draw-view .deck-9 { --settle-x: -120px; --settle-y: 28px; --settle-r: -12deg; --exit-x: -164px; --exit-y: 44px; --exit-r: -16deg; opacity: 0; transform: translate(calc(-50% - 120px), calc(-50% + 28px)) rotate(-12deg) scale(.84); }
.newcomer-draw-view .deck-10 { --settle-x: -72px; --settle-y: 12px; --settle-r: -7deg; --exit-x: -126px; --exit-y: 30px; --exit-r: -12deg; opacity: 0; transform: translate(calc(-50% - 72px), calc(-50% + 12px)) rotate(-7deg) scale(.9); }
.newcomer-draw-view .deck-11 { --settle-x: 72px; --settle-y: 12px; --settle-r: 7deg; --exit-x: 126px; --exit-y: 30px; --exit-r: 12deg; opacity: 0; transform: translate(calc(-50% + 72px), calc(-50% + 12px)) rotate(7deg) scale(.9); }
.newcomer-draw-view .deck-12 { --settle-x: 120px; --settle-y: 28px; --settle-r: 12deg; --exit-x: 164px; --exit-y: 44px; --exit-r: 16deg; opacity: 0; transform: translate(calc(-50% + 120px), calc(-50% + 28px)) rotate(12deg) scale(.84); }

.newcomer-draw-view.holding .opening-draw-card {
  animation: openingFrontCardCharge 4s linear both;
  filter: drop-shadow(0 18px 30px rgba(255, 217, 111, .22));
}

.newcomer-draw-view.holding .opening-hold-ring {
  animation: openingRingBreath 1.2s ease-in-out infinite;
}

.newcomer-draw-view.holding .opening-hold-ring-progress {
  animation: openingRingProgress 4s linear both;
}

.newcomer-draw-view.holding .opening-energy-target {
  border-color: rgba(255, 236, 158, .74);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 233, 139, .22), transparent 48%),
    rgba(255, 244, 203, .08);
  box-shadow:
    0 0 26px rgba(255, 223, 134, .36),
    inset 0 0 20px rgba(255, 255, 255, .14);
}

.newcomer-draw-view.holding .opening-deck-card {
  animation: newcomerDeckConveyor 1.68s linear infinite;
  will-change: transform, filter;
}

.newcomer-draw-view.holding .deck-1 { animation-delay: -1.512s; }
.newcomer-draw-view.holding .deck-2 { animation-delay: -1.344s; }
.newcomer-draw-view.holding .deck-3 { animation-delay: -1.176s; }
.newcomer-draw-view.holding .deck-4 { animation-delay: -1.008s; }
.newcomer-draw-view.holding .deck-5 { animation-delay: -.84s; }
.newcomer-draw-view.holding .deck-6 { animation-delay: -.672s; }
.newcomer-draw-view.holding .deck-7 { animation-delay: -.504s; }
.newcomer-draw-view.holding .deck-8 { animation-delay: -.336s; }
.newcomer-draw-view.holding .deck-9 { animation-delay: -.168s; }
.newcomer-draw-view.holding .deck-10 { animation-delay: 0s; }

.newcomer-draw-view.drawing .opening-deck-card {
  animation: openingDeckExitClean .34s ease-out both;
}

.newcomer-draw-view.drawing .opening-deck-track {
  animation: openingDeckTrackFade .34s ease-out both;
}

.newcomer-draw-view.drawing .opening-draw-card {
  animation: openingChosenCard 1.62s cubic-bezier(.16, .86, .18, 1) both;
}

.newcomer-draw-view.drawing .opening-card-back {
  background-color: #061a14;
  background:
    radial-gradient(circle at 50% 52%, rgba(239, 202, 111, .16), transparent 30%),
    radial-gradient(circle at 70% 30%, rgba(255, 255, 255, .1), transparent 24%),
    linear-gradient(145deg, #09251e 0%, #061a14 54%, #03120f 100%);
}

.newcomer-draw-view.drawing .opening-card-aura {
  animation: openingChosenAura 1.62s ease both;
}

.newcomer-draw-view.drawing .opening-card-back::after {
  background:
    radial-gradient(circle at 50% 52%, rgba(255, 237, 160, .34), transparent 34%),
    radial-gradient(circle at 50% 52%, rgba(255, 255, 255, .16), transparent 56%);
  animation: openingRevealSoftGlow 1.08s ease both;
}

.newcomer-draw-view.waiting .opening-card-aura {
  opacity: .92;
  animation: openingWaitingAura 2.4s ease-in-out infinite;
}

.newcomer-draw-view.waiting .opening-card-back {
  animation: openingWaitingCard 2.6s ease-in-out infinite;
}

.newcomer-draw-view.waiting .opening-hold-ring {
  opacity: .86;
  animation: openingWaitingRing 1.8s linear infinite;
}

.newcomer-draw-view.waiting .opening-energy-target span {
  animation: openingWaitingEnergy 1.28s ease-in-out infinite;
}

.newcomer-draw-view.waiting .newcomer-draw-guide {
  color: rgba(34, 51, 44, .58);
}

.newcomer-draw-guide {
  color: rgba(30, 45, 39, .5);
  font-size: 13px;
  text-align: center;
  transform: translateY(-6px);
}

.newcomer-primary {
  width: min(100%, 344px);
  min-height: 58px;
  margin: 0 auto;
  border: 0;
  border-radius: 999px;
  color: rgba(255, 255, 250, .96);
  background: rgba(18, 25, 22, .9);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0;
  box-shadow: 0 18px 38px rgba(31, 45, 39, .16);
}

.newcomer-primary.ritual {
  background:
    radial-gradient(circle at 80% 28%, rgba(255, 230, 142, .28), transparent 24%),
    linear-gradient(135deg, #152d24, #071713);
}

.newcomer-primary:disabled {
  color: rgba(43, 57, 51, .26);
  background: rgba(43, 57, 51, .08);
  box-shadow: none;
}

.opening-screen {
  padding: 0;
  overflow: hidden;
}

.opening-ritual-screen {
  --opening-ink: rgba(18, 25, 22, .9);
  --opening-soft: rgba(43, 57, 51, .56);
  --opening-gold: rgba(154, 118, 62, .74);
  --opening-card: rgba(7, 31, 25, .9);
  --opening-light-rgb: 239, 202, 111;
  --opening-accent-rgb: 72, 119, 98;
  --opening-shadow-rgb: 24, 45, 38;
  --opening-card-top-rgb: 9, 42, 35;
  --opening-card-mid-rgb: 5, 28, 24;
  --opening-card-bottom-rgb: 3, 17, 14;
  --opening-card-border-rgb: 233, 198, 114;
  --opening-card-ink-rgb: 245, 211, 130;
  --opening-card-glint-rgb: 255, 249, 226;
  min-height: 100svh;
  isolation: isolate;
  color: #17211d;
  background:
    radial-gradient(circle at 16% 24%, rgba(255, 255, 255, .92), transparent 24%),
    radial-gradient(circle at 84% 74%, rgba(217, 232, 224, .78), transparent 28%),
    linear-gradient(180deg, #f5f8f4 0%, #e9f0ec 58%, #f7f7f2 100%);
}

.opening-ritual-screen::before,
.opening-ritual-screen::after {
  content: "";
  position: fixed;
  left: 50%;
  z-index: -2;
  width: min(100%, 430px);
  transform: translateX(-50%);
  pointer-events: none;
}

.opening-ritual-screen::before {
  inset: 0;
  background:
    linear-gradient(rgba(39, 64, 55, .045) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(39, 64, 55, .04) 1px, transparent 1px) 0 0 / 28px 28px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .86), rgba(0, 0, 0, .48) 64%, transparent);
}

.opening-ritual-screen::after {
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 32% 39%, rgba(255, 255, 255, .72) 0 1px, transparent 2px),
    radial-gradient(circle at 74% 52%, rgba(255, 255, 255, .54) 0 1px, transparent 2px),
    radial-gradient(circle at 50% 58%, rgba(var(--opening-accent-rgb), .14), transparent 34%),
    radial-gradient(ellipse at 50% 88%, rgba(var(--opening-shadow-rgb), .1), transparent 52%),
    linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));
}

.opening-draw-view {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(358px, 1fr) auto;
  gap: 0;
  padding: max(30px, calc(env(safe-area-inset-top) + 18px)) 18px max(20px, calc(env(safe-area-inset-bottom) + 14px));
  overflow: hidden;
  color: var(--opening-ink);
}

.opening-draw-aurora {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 14% 43%, rgba(247, 211, 117, .16), transparent 22%),
    radial-gradient(circle at 91% 77%, rgba(255, 238, 168, .2), transparent 16%),
    radial-gradient(circle at 50% 73%, rgba(63, 106, 71, .24), transparent 30%);
  filter: blur(1.5px);
  animation: openingAuraBreathe 6.2s ease-in-out infinite;
}

.opening-ritual-screen .opening-draw-aurora {
  background:
    radial-gradient(circle at 16% 38%, rgba(255, 255, 255, .5), transparent 20%),
    radial-gradient(circle at 88% 75%, rgba(217, 232, 224, .46), transparent 22%),
    radial-gradient(circle at 50% 74%, rgba(var(--opening-accent-rgb), .16), transparent 34%);
  filter: blur(2px);
}

.opening-draw-stars {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.opening-draw-stars i {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(246, 210, 119, .86);
  box-shadow: 0 0 16px rgba(255, 219, 119, .72);
  animation: openingStarFloat 4.8s ease-in-out infinite;
}

.opening-ritual-screen .opening-draw-stars i {
  background: rgba(154, 118, 62, .45);
  box-shadow: 0 0 14px rgba(239, 202, 111, .34);
}

.opening-draw-stars i:nth-child(1) { left: 7%; top: 13%; width: 3px; height: 3px; animation-delay: -.6s; }
.opening-draw-stars i:nth-child(2) { left: 80%; top: 18%; width: 3px; height: 3px; animation-delay: -1.6s; }
.opening-draw-stars i:nth-child(3) { left: 94%; top: 34%; animation-delay: -2.4s; }
.opening-draw-stars i:nth-child(4) { left: 14%; top: 47%; width: 3px; height: 3px; animation-delay: -3.1s; }
.opening-draw-stars i:nth-child(5) { left: 81%; top: 54%; animation-delay: -.9s; }
.opening-draw-stars i:nth-child(6) { left: 50%; top: 90%; width: 3px; height: 3px; animation-delay: -2s; }

.opening-draw-head {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 350px;
  margin: 0 auto;
  text-align: center;
  justify-self: center;
}

.opening-draw-head small {
  display: block;
  color: rgba(62, 84, 75, .46);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .12em;
  text-shadow: none;
}

.opening-draw-head h1 {
  position: relative;
  margin: 11px 0 0;
  color: var(--opening-ink);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: clamp(38px, 10.4vw, 48px);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: 0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .72);
}

.opening-draw-head h1::after {
  content: "";
  display: block;
  width: 96px;
  height: 13px;
  margin: 11px auto 0;
  background:
    radial-gradient(circle at 50% 50%, var(--opening-gold) 0 2px, transparent 3px) center / 8px 8px no-repeat,
    linear-gradient(90deg, transparent 0 8%, rgba(232, 194, 111, .72) 8% 42%, transparent 42% 58%, rgba(232, 194, 111, .72) 58% 92%, transparent 92% 100%) center / 100% 1px no-repeat;
  filter: drop-shadow(0 0 6px rgba(234, 196, 112, .42));
}

.opening-draw-head p {
  max-width: 270px;
  margin: 10px auto 0;
  color: rgba(43, 57, 51, .56);
  font-size: clamp(13px, 3.7vw, 15px);
  line-height: 1.54;
  font-weight: 400;
  text-shadow: none;
}

.opening-deck-stage {
  position: relative;
  z-index: 2;
  width: 100%;
  min-width: 0;
  min-height: 390px;
  display: grid;
  place-items: center;
  perspective: 980px;
  justify-self: center;
}

.opening-deck-stage::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(50% + 140px);
  z-index: 0;
  width: min(420px, 112vw);
  height: 90px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 224, 134, .22), transparent 32%),
    repeating-radial-gradient(ellipse at 50% 0%, rgba(247, 212, 126, .18) 0 1px, transparent 1px 13px);
  filter: blur(.2px);
  opacity: .72;
  transform: translateX(-50%) rotateX(64deg);
  pointer-events: none;
}

.opening-ritual-screen .opening-deck-stage::after {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(var(--opening-light-rgb), .18), transparent 34%),
    repeating-radial-gradient(ellipse at 50% 0%, rgba(var(--opening-accent-rgb), .1) 0 1px, transparent 1px 13px);
  opacity: .52;
}

.opening-card-belt {
  position: relative;
  z-index: 2;
  width: min(410px, 100%);
  height: 332px;
  display: grid;
  place-items: center;
  transform: translateY(-8px);
  isolation: isolate;
  transform-style: flat;
  will-change: transform;
}

.opening-deck-track {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 1px;
  pointer-events: none;
  transform-style: flat;
}

.opening-deck-card,
.opening-card-back {
  border: 1px solid rgba(243, 207, 119, .56);
  border-radius: 19px;
  background-color: #061a14;
  background:
    radial-gradient(circle at 50% 52%, rgba(239, 202, 111, .12), transparent 30%),
    radial-gradient(circle at 70% 30%, rgba(255, 255, 255, .08), transparent 24%),
    linear-gradient(145deg, #09251e 0%, #061a14 54%, #03120f 100%);
  background-color: #061a14;
  box-shadow:
    0 24px 48px rgba(0, 0, 0, .44),
    0 0 22px rgba(238, 202, 112, .16),
    inset 0 1px 0 rgba(255, 246, 197, .18);
}

.opening-ritual-screen .opening-deck-card,
.opening-ritual-screen .opening-card-back {
  border-color: rgba(var(--opening-card-border-rgb), .58);
  background-color: rgb(var(--opening-card-mid-rgb));
  background:
    radial-gradient(circle at 50% 54%, rgba(var(--opening-accent-rgb), .13), transparent 32%),
    radial-gradient(circle at 72% 27%, rgba(var(--opening-card-glint-rgb), .1), transparent 24%),
    linear-gradient(145deg, rgb(var(--opening-card-top-rgb)) 0%, rgb(var(--opening-card-mid-rgb)) 54%, rgb(var(--opening-card-bottom-rgb)) 100%);
  box-shadow:
    0 25px 52px rgba(18, 41, 34, .28),
    0 0 28px rgba(var(--opening-light-rgb), .16),
    inset 0 1px 0 rgba(255, 246, 197, .16);
}

.opening-deck-card {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 150px;
  height: 266px;
  opacity: 1;
  transform: translate(-50%, -50%);
  transform-origin: center bottom;
  backface-visibility: hidden;
  filter: brightness(.58) saturate(.9) blur(.18px);
}

.opening-deck-card i,
.opening-card-back::before {
  content: "";
  position: absolute;
  inset: 13px;
  border-radius: 14px;
  border: 1px solid rgba(242, 204, 116, .44);
  background:
    radial-gradient(circle at 50% 50%, rgba(251, 217, 124, .12), transparent 24%),
    linear-gradient(135deg, rgba(255, 240, 174, .18), transparent 18% 82%, rgba(255, 240, 174, .14));
}

.opening-ritual-screen .opening-deck-card i,
.opening-ritual-screen .opening-card-back::before {
  border-color: rgba(var(--opening-card-border-rgb), .42);
  background:
    radial-gradient(circle at 50% 50%, rgba(var(--opening-light-rgb), .12), transparent 26%),
    linear-gradient(135deg, rgba(var(--opening-card-glint-rgb), .17), transparent 18% 82%, rgba(var(--opening-light-rgb), .12));
}

.opening-deck-card::before,
.opening-deck-card::after,
.opening-card-back::before,
.opening-card-back::after {
  pointer-events: none;
}

.deck-1 { transform: translate(calc(-50% - 178px), calc(-50% + 42px)) rotate(-16deg); filter: brightness(.42) saturate(.82) blur(.45px); }
.deck-2 { transform: translate(calc(-50% - 136px), calc(-50% + 24px)) rotate(-12deg); filter: brightness(.48) saturate(.86) blur(.34px); }
.deck-3 { transform: translate(calc(-50% - 92px), calc(-50% + 10px)) rotate(-8deg); filter: brightness(.55) saturate(.9) blur(.22px); }
.deck-4 { transform: translate(calc(-50% - 48px), calc(-50% + 1px)) rotate(-4deg); filter: brightness(.62) saturate(.94) blur(.12px); }
.deck-5 { transform: translate(calc(-50% + 48px), calc(-50% + 1px)) rotate(4deg); filter: brightness(.62) saturate(.94) blur(.12px); }
.deck-6 { transform: translate(calc(-50% + 92px), calc(-50% + 10px)) rotate(8deg); filter: brightness(.55) saturate(.9) blur(.22px); }
.deck-7 { transform: translate(calc(-50% + 136px), calc(-50% + 24px)) rotate(12deg); filter: brightness(.48) saturate(.86) blur(.34px); }
.opening-draw-view .deck-8 { --settle-x: -164px; --settle-y: 44px; --settle-r: -16deg; --exit-x: -190px; --exit-y: 56px; --exit-r: -20deg; opacity: 0; transform: translate(calc(-50% - 164px), calc(-50% + 44px)) rotate(-16deg) scale(.78); }
.opening-draw-view .deck-9 { --settle-x: -120px; --settle-y: 28px; --settle-r: -12deg; --exit-x: -164px; --exit-y: 44px; --exit-r: -16deg; opacity: 0; transform: translate(calc(-50% - 120px), calc(-50% + 28px)) rotate(-12deg) scale(.84); }
.opening-draw-view .deck-10 { --settle-x: 120px; --settle-y: 28px; --settle-r: 12deg; --exit-x: 164px; --exit-y: 44px; --exit-r: 16deg; opacity: 0; transform: translate(calc(-50% + 120px), calc(-50% + 28px)) rotate(12deg) scale(.84); }

.opening-draw-card {
  position: relative;
  z-index: 10;
  width: clamp(166px, 44vw, 190px);
  height: clamp(288px, 76.5vw, 330px);
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: transparent;
  color: var(--opening-ink);
  transform: translateY(0) scale(1);
  isolation: isolate;
  transform-style: flat;
  transition: transform .22s cubic-bezier(.2, .74, .22, 1), filter .22s ease;
  touch-action: none;
}

.opening-card-aura {
  position: absolute;
  z-index: 0;
  inset: -30px;
  border-radius: 36px;
  background:
    radial-gradient(circle at 50% 54%, rgba(255, 224, 121, .3), transparent 58%),
    radial-gradient(circle at 50% 100%, rgba(250, 221, 132, .16), transparent 50%);
  filter: blur(12px);
  opacity: .82;
  animation: openingCardAura 3.2s ease-in-out infinite;
}

.opening-ritual-screen .opening-card-aura {
  background:
    radial-gradient(circle at 50% 54%, rgba(var(--opening-light-rgb), .38), transparent 58%),
    radial-gradient(circle at 50% 100%, rgba(var(--opening-accent-rgb), .18), transparent 50%);
}

.opening-card-back {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  opacity: 1;
  isolation: isolate;
  border-width: 1.2px;
  box-shadow:
    0 26px 50px rgba(0, 0, 0, .48),
    0 0 0 1px rgba(255, 236, 166, .12),
    0 0 28px rgba(241, 203, 111, .2),
    inset 0 0 34px rgba(232, 196, 111, .08);
}

.opening-ritual-screen .opening-card-back {
  box-shadow:
    0 27px 54px rgba(18, 41, 34, .3),
    0 0 0 1px rgba(var(--opening-card-border-rgb), .14),
    0 0 34px rgba(var(--opening-light-rgb), .2),
    inset 0 0 36px rgba(var(--opening-light-rgb), .08);
}

.opening-card-back::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 32%, rgba(255, 255, 255, .22) 42%, transparent 54%),
    radial-gradient(circle at 50% 12%, rgba(255, 255, 255, .12), transparent 28%);
  transform: translateX(-55%);
  opacity: .7;
  animation: openingCardGlint 4.4s ease-in-out infinite;
}

.opening-ritual-screen .opening-card-back::after {
  background:
    linear-gradient(115deg, transparent 0 32%, rgba(var(--opening-card-glint-rgb), .2) 42%, transparent 54%),
    radial-gradient(circle at 50% 12%, rgba(var(--opening-card-glint-rgb), .12), transparent 28%);
}

.opening-card-back::before {
  box-shadow:
    inset 0 0 0 1px rgba(255, 245, 190, .08),
    0 0 18px rgba(245, 208, 118, .08);
}

.opening-ritual-screen .opening-card-back::before {
  box-shadow:
    inset 0 0 0 1px rgba(var(--opening-card-glint-rgb), .08),
    0 0 18px rgba(var(--opening-light-rgb), .08);
}

.opening-card-back i,
.opening-card-back b,
.opening-card-back em {
  position: absolute;
  z-index: 2;
  display: block;
  font-style: normal;
  text-align: center;
  text-shadow:
    0 3px 12px rgba(0, 0, 0, .38),
    0 0 12px rgba(242, 206, 126, .18);
}

.opening-card-back i {
  top: 22%;
  left: 0;
  right: 0;
  color: rgba(244, 204, 121, .9);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: clamp(11px, 3.1vw, 13px);
  letter-spacing: .16em;
}

.opening-ritual-screen .opening-card-back i {
  color: rgba(var(--opening-card-ink-rgb), .92);
}

.opening-card-back i::before,
.opening-card-back i::after,
.opening-card-back em::before,
.opening-card-back em::after {
  content: "✦";
  display: inline-block;
  margin: 0 .62em;
  color: rgba(245, 211, 130, .92);
  font-size: .62em;
  transform: translateY(-.08em);
}

.opening-ritual-screen .opening-card-back i::before,
.opening-ritual-screen .opening-card-back i::after,
.opening-ritual-screen .opening-card-back em::before,
.opening-ritual-screen .opening-card-back em::after {
  color: rgba(var(--opening-card-ink-rgb), .9);
}

.opening-card-back b {
  top: 34%;
  left: 0;
  right: 0;
  color: rgba(255, 246, 222, .98);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: clamp(48px, 12.8vw, 52px);
  line-height: 1;
  font-weight: 500;
  letter-spacing: .04em;
}

.opening-ritual-screen .opening-card-back b {
  color: rgba(var(--opening-card-glint-rgb), .96);
}

.opening-card-back em {
  bottom: 18%;
  left: 0;
  right: 0;
  color: rgba(245, 211, 130, .9);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(10px, 2.9vw, 12px);
  letter-spacing: .1em;
}

.opening-ritual-screen .opening-card-back em {
  color: rgba(var(--opening-card-ink-rgb), .92);
}

.opening-energy-target {
  position: absolute;
  left: 50%;
  top: 61%;
  z-index: 3;
  width: clamp(68px, 18vw, 82px);
  height: clamp(68px, 18vw, 82px);
  border: 1px solid rgba(245, 208, 118, .34);
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(245, 209, 118, .28) 0 1px, transparent 1px 9px),
    radial-gradient(circle at 50% 50%, rgba(255, 237, 158, .18), transparent 46%),
    rgba(255, 228, 134, .04);
  box-shadow:
    0 0 26px rgba(255, 218, 116, .24),
    inset 0 0 20px rgba(255, 235, 166, .08);
  transform: translate(-50%, -50%);
}

.opening-ritual-screen .opening-energy-target {
  border-color: rgba(var(--opening-card-border-rgb), .36);
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(var(--opening-card-border-rgb), .25) 0 1px, transparent 1px 9px),
    radial-gradient(circle at 50% 50%, rgba(var(--opening-light-rgb), .18), transparent 46%),
    rgba(var(--opening-light-rgb), .04);
  box-shadow:
    0 0 27px rgba(var(--opening-light-rgb), .25),
    inset 0 0 20px rgba(var(--opening-card-glint-rgb), .08);
}

.opening-energy-target span {
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 230, .98), rgba(255, 222, 119, .92) 46%, rgba(217, 164, 67, .86));
  box-shadow:
    0 0 22px rgba(255, 225, 125, .74),
    0 0 46px rgba(255, 217, 111, .34);
  animation: openingEnergyDot 1.8s ease-in-out infinite;
}

.opening-ritual-screen .opening-energy-target span {
  background:
    radial-gradient(circle at 35% 30%, rgba(var(--opening-card-glint-rgb), .98), rgba(var(--opening-light-rgb), .94) 46%, rgba(var(--opening-accent-rgb), .86));
  box-shadow:
    0 0 22px rgba(var(--opening-light-rgb), .74),
    0 0 46px rgba(var(--opening-accent-rgb), .34);
}

.opening-hold-ring {
  position: absolute;
  left: 50%;
  top: 61%;
  z-index: 5;
  width: clamp(86px, 23vw, 102px);
  height: clamp(86px, 23vw, 102px);
  overflow: visible;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-90deg);
}

.opening-hold-ring circle {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.opening-hold-ring-base {
  stroke: rgba(255, 239, 181, .18);
  stroke-width: 3;
}

.opening-ritual-screen .opening-hold-ring-base {
  stroke: rgba(var(--opening-card-border-rgb), .2);
}

.opening-hold-ring-progress {
  stroke: rgba(255, 230, 132, .96);
  stroke-width: 3.8;
  stroke-dasharray: 188.5;
  stroke-dashoffset: 188.5;
  filter: drop-shadow(0 0 8px rgba(255, 223, 119, .72));
}

.opening-ritual-screen .opening-hold-ring-progress {
  stroke: rgba(var(--opening-card-ink-rgb), .96);
  filter: drop-shadow(0 0 8px rgba(var(--opening-light-rgb), .7));
}

.opening-draw-view.holding .opening-draw-card {
  animation: openingFrontCardCharge 4s linear both;
  filter: drop-shadow(0 18px 30px rgba(255, 217, 111, .22));
}

.opening-draw-view.holding .opening-card-belt {
  animation: none;
}

.opening-draw-view.holding .opening-hold-ring {
  animation: openingRingBreath 1.2s ease-in-out infinite;
}

.opening-draw-view.holding .opening-hold-ring-progress {
  animation: openingRingProgress 4s linear both;
}

.opening-draw-view.holding .opening-energy-target {
  border-color: rgba(255, 236, 158, .74);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 233, 139, .22), transparent 48%),
    rgba(255, 244, 203, .08);
  box-shadow:
    0 0 26px rgba(255, 223, 134, .36),
    inset 0 0 20px rgba(255, 255, 255, .14);
}

.opening-ritual-screen .opening-draw-view.holding .opening-energy-target {
  border-color: rgba(var(--opening-card-ink-rgb), .74);
  background:
    radial-gradient(circle at 50% 50%, rgba(var(--opening-light-rgb), .22), transparent 48%),
    rgba(var(--opening-card-glint-rgb), .08);
  box-shadow:
    0 0 26px rgba(var(--opening-light-rgb), .36),
    inset 0 0 20px rgba(var(--opening-card-glint-rgb), .14);
}

.opening-draw-view.holding .opening-deck-track {
  animation: none;
}

.opening-draw-view.holding .opening-deck-card {
  animation: newcomerDeckConveyor 1.68s linear infinite;
  will-change: transform, filter;
}

.opening-draw-view.holding .deck-1 { animation-delay: -1.512s; }
.opening-draw-view.holding .deck-2 { animation-delay: -1.344s; }
.opening-draw-view.holding .deck-3 { animation-delay: -1.176s; }
.opening-draw-view.holding .deck-4 { animation-delay: -1.008s; }
.opening-draw-view.holding .deck-5 { animation-delay: -.84s; }
.opening-draw-view.holding .deck-6 { animation-delay: -.672s; }
.opening-draw-view.holding .deck-7 { animation-delay: -.504s; }
.opening-draw-view.holding .deck-8 { animation-delay: -.336s; }
.opening-draw-view.holding .deck-9 { animation-delay: -.168s; }
.opening-draw-view.holding .deck-10 { animation-delay: 0s; }

.opening-draw-view.holding .opening-draw-foot b {
  color: rgba(43, 57, 51, .74);
}

.opening-draw-view.holding .opening-card-aura {
  opacity: 1;
  filter: blur(7px);
}

.opening-draw-view.tactile-tick .opening-card-back {
  animation: openingTactileTick .16s cubic-bezier(.16, .92, .3, 1) both;
}

.opening-draw-view.tactile-heavy .opening-card-back {
  animation: openingTactileHeavy .22s cubic-bezier(.16, .92, .3, 1) both;
}

.opening-draw-view.tactile-tick .opening-energy-target,
.opening-draw-view.tactile-heavy .opening-energy-target {
  animation: openingTactileEnergy .18s cubic-bezier(.16, .92, .3, 1) both;
}

.opening-draw-view.tactile-tick .opening-card-aura,
.opening-draw-view.tactile-heavy .opening-card-aura {
  opacity: 1;
  filter: blur(5px);
}

.opening-draw-view.drawing .opening-deck-card {
  animation: openingDeckExitClean .34s ease-out both;
}

.opening-draw-view.drawing .opening-card-belt {
  animation: none;
}

.opening-draw-view.drawing .opening-deck-track {
  animation: openingDeckTrackFade .34s ease-out both;
}

.opening-draw-view.drawing .deck-1,
.opening-draw-view.drawing .deck-2,
.opening-draw-view.drawing .deck-3,
.opening-draw-view.drawing .deck-4,
.opening-draw-view.drawing .deck-5,
.opening-draw-view.drawing .deck-6,
.opening-draw-view.drawing .deck-7,
.opening-draw-view.drawing .deck-8,
.opening-draw-view.drawing .deck-9,
.opening-draw-view.drawing .deck-10 {
  animation-delay: 0s;
}

.opening-draw-view.drawing .opening-draw-card {
  animation: openingChosenCard 1.62s cubic-bezier(.16, .86, .18, 1) both;
}

.opening-ritual-screen .opening-draw-view.drawing .opening-draw-card {
  animation-name: openingRitualChosenCard;
}

.opening-draw-view.drawing .opening-card-back {
  background-color: #061a14;
  background:
    radial-gradient(circle at 50% 52%, rgba(239, 202, 111, .16), transparent 30%),
    radial-gradient(circle at 70% 30%, rgba(255, 255, 255, .1), transparent 24%),
    linear-gradient(145deg, #09251e 0%, #061a14 54%, #03120f 100%);
  background-color: #061a14;
}

.opening-ritual-screen .opening-draw-view.drawing .opening-card-back {
  background-color: rgb(var(--opening-card-mid-rgb));
  background:
    radial-gradient(circle at 50% 52%, rgba(var(--opening-light-rgb), .16), transparent 30%),
    radial-gradient(circle at 70% 30%, rgba(var(--opening-card-glint-rgb), .1), transparent 24%),
    linear-gradient(145deg, rgb(var(--opening-card-top-rgb)) 0%, rgb(var(--opening-card-mid-rgb)) 54%, rgb(var(--opening-card-bottom-rgb)) 100%);
}

.opening-draw-view.drawing .opening-card-aura {
  animation: openingChosenAura 1.62s ease both;
}

.opening-draw-view.drawing .opening-card-back::after {
  background:
    radial-gradient(circle at 50% 52%, rgba(255, 237, 160, .34), transparent 34%),
    radial-gradient(circle at 50% 52%, rgba(255, 255, 255, .16), transparent 56%);
  animation: openingRevealSoftGlow 1.08s ease both;
}

.opening-ritual-screen .opening-draw-view.drawing .opening-card-back::after {
  background:
    radial-gradient(circle at 50% 52%, rgba(var(--opening-light-rgb), .36), transparent 34%),
    radial-gradient(circle at 50% 52%, rgba(var(--opening-card-glint-rgb), .16), transparent 56%);
}

.opening-draw-view.waiting .opening-card-aura {
  opacity: .95;
  animation: openingWaitingAura 2.4s ease-in-out infinite;
}

.opening-draw-view.waiting .opening-card-back {
  animation: openingWaitingCard 2.6s ease-in-out infinite;
}

.opening-draw-view.waiting .opening-hold-ring {
  opacity: .9;
  animation: openingWaitingRing 1.8s linear infinite;
}

.opening-draw-view.waiting .opening-energy-target span {
  animation: openingWaitingEnergy 1.28s ease-in-out infinite;
}

.opening-draw-view.waiting .opening-draw-foot b {
  color: rgba(43, 57, 51, .74);
}

.opening-draw-foot {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  gap: 5px;
  justify-items: center;
  color: var(--opening-soft);
  text-align: center;
  padding-bottom: 2px;
  justify-self: center;
}

.opening-gesture-icon {
  position: relative;
  width: 38px;
  height: 42px;
  display: grid;
  place-items: center;
  color: rgba(62, 84, 75, .42);
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .68));
}

.opening-gesture-icon::after {
  content: "";
  position: absolute;
  right: 0;
  top: 24px;
  width: 6px;
  height: 6px;
  background: rgba(154, 118, 62, .42);
  clip-path: polygon(50% 0, 64% 36%, 100% 50%, 64% 64%, 50% 100%, 36% 64%, 0 50%, 36% 36%);
}

.opening-gesture-icon svg {
  position: relative;
  z-index: 1;
  width: 31px;
  height: 36px;
  margin-top: 6px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.opening-draw-foot b {
  position: relative;
  color: rgba(43, 57, 51, .72);
  font-size: clamp(14px, 3.8vw, 16px);
  font-weight: 400;
  letter-spacing: .06em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .72);
}

.opening-draw-foot b::after {
  content: "";
  display: block;
  width: 88px;
  height: 12px;
  margin: 8px auto 0;
  background:
    radial-gradient(circle at 50% 50%, var(--opening-gold) 0 2px, transparent 3px) center / 8px 8px no-repeat,
    linear-gradient(90deg, transparent 0 8%, rgba(232, 194, 111, .66) 8% 42%, transparent 42% 58%, rgba(232, 194, 111, .66) 58% 92%, transparent 92% 100%) center / 100% 1px no-repeat;
  filter: drop-shadow(0 0 6px rgba(234, 196, 112, .38));
}

.opening-draw-foot span {
  font-size: 12px;
  text-shadow: none;
}

@media (max-height: 760px) {
  .opening-ritual-screen .opening-draw-view {
    grid-template-rows: auto minmax(320px, 1fr) auto;
    padding-top: max(22px, calc(env(safe-area-inset-top) + 12px));
    padding-bottom: max(16px, calc(env(safe-area-inset-bottom) + 10px));
  }

  .opening-ritual-screen .opening-draw-head h1 {
    margin-top: 8px;
    font-size: clamp(34px, 9.4vw, 42px);
  }

  .opening-ritual-screen .opening-draw-head h1::after {
    margin-top: 8px;
  }

  .opening-ritual-screen .opening-draw-head p {
    margin-top: 7px;
    line-height: 1.42;
  }

  .opening-ritual-screen .opening-deck-stage {
    min-height: 330px;
  }

  .opening-ritual-screen .opening-card-belt {
    height: 300px;
    transform: translateY(0);
  }

  .opening-ritual-screen .opening-draw-card {
    width: clamp(156px, 42vw, 176px);
    height: clamp(270px, 73vw, 306px);
  }

  .opening-ritual-screen .opening-draw-foot {
    gap: 3px;
  }

  .opening-ritual-screen .opening-gesture-icon {
    width: 34px;
    height: 36px;
  }

  .opening-ritual-screen .opening-draw-foot b::after {
    margin-top: 6px;
  }
}

.opening-waiting-dots {
  position: absolute;
  left: 50%;
  bottom: 12px;
  z-index: 16;
  display: grid;
  grid-template-columns: repeat(3, 6px);
  gap: 7px;
  opacity: 0;
  transform: translateX(-50%);
  pointer-events: none;
}

.newcomer-draw-view .opening-waiting-dots {
  bottom: 2px;
}

.waiting .opening-waiting-dots {
  opacity: 1;
}

.opening-waiting-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(246, 214, 133, .92);
  box-shadow: 0 0 12px rgba(246, 214, 133, .62);
  animation: openingWaitingDot 1.24s ease-in-out infinite;
}

.opening-waiting-dots i:nth-child(2) {
  animation-delay: .16s;
}

.opening-waiting-dots i:nth-child(3) {
  animation-delay: .32s;
}

.loading-screen {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(34px, env(safe-area-inset-top)) 28px max(34px, env(safe-area-inset-bottom));
  color: #3a2d20;
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 255, 255, .9), transparent 26%),
    radial-gradient(circle at 76% 68%, rgba(216, 186, 118, .24), transparent 30%),
    linear-gradient(180deg, #fbf7ed 0%, #efe2c9 100%);
}

.loading-progress-panel {
  width: min(322px, 100%);
  text-align: left;
}

.loading-progress-orb {
  position: relative;
  width: 54px;
  height: 54px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 14px 34px rgba(139, 105, 55, .18), inset 0 0 0 1px rgba(139, 105, 55, .12);
}

.loading-progress-orb::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a57a42, #f1d392);
  box-shadow: 0 0 22px rgba(181, 129, 54, .34);
}

.loading-progress-orb i {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px solid rgba(150, 112, 61, .24);
  animation: loadingOrbSpin 2.8s linear infinite;
}

.loading-progress-orb i:nth-child(2) {
  inset: 10px;
  border-color: rgba(150, 112, 61, .16);
  animation-duration: 4.2s;
  animation-direction: reverse;
}

.loading-progress-panel small {
  display: block;
  margin-bottom: 9px;
  color: rgba(98, 76, 50, .54);
  font-size: 11px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 800;
  letter-spacing: .16em;
}

.loading-progress-panel h1 {
  margin: 0;
  color: rgba(47, 35, 24, .92);
  font-size: 25px;
  line-height: 1.22;
  font-weight: 800;
  letter-spacing: 0;
}

.loading-progress-panel p {
  margin: 12px 0 24px;
  color: rgba(76, 61, 44, .68);
  font-size: 13px;
  line-height: 1.75;
}

.loading-progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
  color: rgba(77, 61, 42, .66);
  font-size: 12px;
}

.loading-progress-head b {
  color: rgba(67, 47, 28, .86);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.loading-progress-rail {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(88, 69, 45, .12);
  box-shadow: inset 0 1px 2px rgba(77, 56, 32, .08);
}

.loading-progress-rail i {
  display: block;
  width: var(--loading-progress, 36%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7f5b2f, #bd8a45 58%, #efd08a);
  box-shadow: 0 0 16px rgba(177, 125, 52, .24);
  transition: width .5s ease;
}

.loading-progress-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.loading-progress-steps span {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(87, 69, 45, .46);
  font-size: 11px;
  white-space: nowrap;
}

.loading-progress-steps span i {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(133, 101, 54, .18);
  color: inherit;
  font-size: 10px;
  font-style: normal;
}

.loading-progress-steps span b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
}

.loading-progress-steps span.done,
.loading-progress-steps span.active {
  color: rgba(73, 49, 28, .86);
}

.loading-progress-steps span.active i {
  color: #fff;
  border-color: transparent;
  background: rgba(97, 67, 35, .88);
  box-shadow: 0 0 0 5px rgba(151, 109, 54, .1);
}

@keyframes loadingOrbSpin {
  to { transform: rotate(360deg); }
}

.topbar,
.top-row,
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.topbar {
  position: relative;
  z-index: 2;
  min-height: 38px;
  margin-bottom: 20px;
  padding: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.home-screen .topbar {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.top-row {
  min-height: 38px;
}

.brand,
.plain-button {
  padding: 0;
  background: transparent;
  color: var(--teal-deep);
  font-weight: 900;
}

.brand {
  color: #3b2418;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: clamp(22px, 6.2vw, 29px);
  line-height: .96;
  text-shadow: 0 1px 0 rgba(255, 247, 232, .72);
}

.plain-button {
  min-height: 32px;
  color: var(--muted);
  font-size: 14px;
}

.top-row:has(> .plain-button) {
  min-height: 38px;
  justify-content: flex-end;
  padding-left: 52px;
}

.top-row > .chip {
  margin-left: auto;
}

.top-row > .plain-button {
  position: fixed;
  left: max(16px, calc((100vw - 430px) / 2 + 16px));
  top: max(14px, env(safe-area-inset-top));
  z-index: 82;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(184, 137, 62, .22);
  border-radius: 999px;
  background: rgba(255, 250, 240, .74);
  color: #6a5142;
  box-shadow: 0 10px 24px rgba(75, 42, 22, .1);
  backdrop-filter: blur(12px);
}

.pill,
.chip {
  border: 1px solid rgba(184, 137, 62, .28);
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(255, 250, 240, .72);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.topbar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
  padding-top: 2px;
}

.energy-top-pill,
.user-top-pill {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  border: 1px solid rgba(207, 181, 142, .76);
  border-radius: 999px;
  background: rgba(255, 250, 240, .72);
  color: #604536;
  box-shadow: 0 7px 16px rgba(94, 61, 31, .06), inset 0 1px 0 rgba(255, 255, 255, .78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.energy-top-pill span {
  font-size: 12px;
  font-weight: 900;
}

.energy-top-pill b {
  color: #a7493b;
  font-size: 12px;
  line-height: 1;
}

.user-top-pill {
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.opening-view {
  min-height: 100vh;
  padding: 12px 16px 16px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, .78), transparent 28%),
    linear-gradient(180deg, rgba(250, 236, 202, .96), rgba(43, 34, 31, .08)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Crect width='180' height='180' fill='%23fbf6ec'/%3E%3Cg opacity='.22'%3E%3Cpath d='M0 36H180M0 96H180M0 156H180' stroke='%23c8b595'/%3E%3Cpath d='M36 0V180M96 0V180M156 0V180' stroke='%23c8b595'/%3E%3C/g%3E%3C/svg%3E");
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.opening-view::before {
  content: "";
  position: absolute;
  inset: -80px -40px auto;
  height: 260px;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, .78), rgba(255, 255, 255, 0) 66%);
  animation: morningGlow 4s ease-in-out infinite;
  pointer-events: none;
}

.opening-curtain {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px 0 22px;
  text-align: center;
}

.curtain-card {
  width: min(100%, 308px);
  min-height: 596px;
  padding: 28px 24px 22px;
  border-radius: var(--radius);
  border: 1px solid rgba(210, 189, 152, .76);
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 238, 185, .8), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .18)),
    #fff7e8;
  box-shadow: 0 28px 54px rgba(75, 42, 22, .18);
  position: relative;
  overflow: hidden;
}

.curtain-card::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(184, 137, 62, .26);
  border-radius: 7px;
  pointer-events: none;
}

.curtain-card::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 262px;
  width: 248px;
  height: 248px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 232, 164, .72), rgba(255, 232, 164, .18) 46%, rgba(255, 234, 186, 0) 70%),
    conic-gradient(from 20deg, rgba(197, 150, 47, 0), rgba(197, 150, 47, .16), rgba(197, 150, 47, 0), rgba(197, 150, 47, .14), rgba(197, 150, 47, 0));
  transform: translateX(-50%);
  pointer-events: none;
}

.welcome-card {
  min-height: 660px;
}

.curtain-kicker,
.opening-kicker,
.paper-date,
.effect-kicker {
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
}

.curtain-title {
  position: relative;
  z-index: 2;
  margin-top: 20px;
  color: #2f2119;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 32px;
  line-height: 1.24;
  font-weight: 900;
}

.curtain-line,
.paper-line {
  position: relative;
  z-index: 2;
  width: 42px;
  height: 1px;
  margin: 16px auto 0;
  background: rgba(184, 137, 62, .56);
}

.curtain-copy {
  position: relative;
  z-index: 2;
  max-width: 226px;
  margin: 14px auto 0;
  color: #6d5d50;
  font-size: 12px;
  line-height: 1.65;
}

.ritual-trigger {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 12px;
  width: 100%;
  margin: 26px auto 20px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}

.ritual-trigger.compact {
  margin-bottom: 14px;
}

.curtain-orbit {
  position: relative;
  width: 226px;
  height: 226px;
  margin: 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(184, 137, 62, .18);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .96) 0 18%, rgba(255, 226, 139, .7) 19% 43%, rgba(255, 239, 196, .2) 44% 66%, rgba(255, 237, 190, 0) 67%),
    radial-gradient(circle, rgba(255, 232, 154, .56), rgba(255, 232, 154, 0) 68%);
  box-shadow: 0 22px 58px rgba(184, 137, 62, .24), inset 0 0 42px rgba(255, 255, 255, .82);
  animation: sigilPulse 2.8s ease-in-out infinite;
  transform-origin: center;
  overflow: visible;
}

.ritual-trigger:active .curtain-orbit {
  transform: scale(.96);
}

.curtain-orbit::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 6px;
  border-radius: 50%;
  border: 1px dashed rgba(184, 137, 62, .16);
  border-top-color: rgba(197, 150, 47, .34);
  border-right-color: rgba(197, 150, 47, .08);
  box-shadow: inset 0 0 18px rgba(255, 236, 180, .16);
  pointer-events: none;
  animation: orbitSpinReverse 16s linear infinite;
}

.gold-dust {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d3a84f;
  box-shadow:
    -72px -54px 0 rgba(211, 168, 79, .72),
    78px -42px 0 rgba(211, 168, 79, .62),
    88px 28px 0 rgba(211, 168, 79, .5),
    -94px 26px 0 rgba(211, 168, 79, .42),
    36px 86px 0 rgba(211, 168, 79, .5),
    -46px 82px 0 rgba(211, 168, 79, .44);
  animation: dustTwinkle 2.4s ease-in-out infinite;
}

.gold-dust::before,
.gold-dust::after {
  content: "✦";
  position: absolute;
  color: #c5962f;
  font-size: 18px;
  line-height: 1;
  text-shadow: 0 0 12px rgba(255, 222, 140, .72);
  animation: dustTwinkle 1.9s ease-in-out infinite;
}

.gold-dust::before {
  left: -94px;
  top: -2px;
}

.gold-dust::after {
  left: 88px;
  top: -4px;
  animation-delay: .45s;
}

.orbit-sigil {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 232px;
  height: 232px;
  transform: translate(-50%, -50%);
  overflow: visible;
  pointer-events: none;
}

.orbit-sigil.back {
  z-index: 5;
  opacity: .7;
  filter: blur(.12px);
}

.orbit-sigil.front {
  z-index: 8;
  opacity: .96;
  filter: drop-shadow(0 0 8px rgba(255, 222, 139, .38));
}

.orbit-spin {
  transform-box: view-box;
  transform-origin: 116px 116px;
}

.orbit-spin.one {
  animation: svgOrbitOne 8.6s linear infinite;
}

.orbit-spin.two {
  animation: svgOrbitTwo 7.4s linear infinite;
}

.orbit-path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 4 8;
}

.orbit-sigil.back .orbit-path {
  stroke-width: 1.1;
  stroke: rgba(151, 111, 45, .26);
}

.orbit-sigil.front .orbit-path {
  stroke-width: 1.28;
  stroke: rgba(197, 150, 47, .7);
}

.orbit-sigil.front .track-two {
  stroke: rgba(184, 137, 62, .58);
}

.ritual-envelope {
  position: relative;
  z-index: 6;
  width: 88px;
  height: 112px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(226, 196, 143, .76);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 255, 255, .78), rgba(255, 255, 255, 0) 36%),
    linear-gradient(180deg, rgba(255, 250, 238, .98), rgba(250, 229, 180, .88) 56%, rgba(255, 248, 230, .96)),
    #fff2d6;
  box-shadow:
    0 18px 34px rgba(112, 75, 35, .18),
    0 0 26px rgba(255, 222, 139, .72),
    inset 0 0 18px rgba(255, 255, 255, .62);
  animation: envelopeFloat 3.6s ease-in-out infinite;
  overflow: hidden;
}

.ritual-envelope::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 38%),
    radial-gradient(circle at 50% 70%, rgba(189, 137, 51, .12), transparent 42%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42);
  pointer-events: none;
}

.ritual-envelope::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, .44), transparent 22%, transparent 78%, rgba(160, 100, 40, .08));
  pointer-events: none;
}

.envelope-flap {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 100%;
  height: 42px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 252, 245, .94));
  clip-path: polygon(0 0, 100% 0, 100% 68%, 50% 100%, 0 68%);
  border-radius: 8px 8px 14px 14px;
  box-shadow: 0 8px 16px rgba(112, 75, 35, .08), inset 0 -1px 0 rgba(224, 197, 151, .54);
  transform-origin: 50% 0;
}

.envelope-line {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 18px;
  z-index: 2;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(198, 150, 70, .38), transparent);
}

.envelope-wax {
  position: absolute;
  left: 50%;
  bottom: 9px;
  z-index: 4;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 38%, rgba(255, 245, 194, .88), rgba(255, 245, 194, 0) 24%),
    linear-gradient(180deg, #e1b95f, #c79531);
  transform: translateX(-50%);
  box-shadow: 0 3px 10px rgba(129, 87, 28, .24), inset 0 1px 0 rgba(255, 246, 204, .52);
}

.envelope-wax::after {
  content: "✧";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 250, 221, .82);
  font-size: 8px;
  transform: translateY(-1px);
}

.ritual-center {
  position: relative;
  z-index: 2;
  margin-top: 13px;
  color: #b84038;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 38px;
  line-height: 1;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .82), 0 5px 12px rgba(137, 52, 42, .14);
}

.ritual-hint {
  color: #7a5b33;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .06em;
}

.opening-view.unsealing .curtain-card {
  animation: curtainFade .92s ease .18s both;
}

.opening-view.unsealing .curtain-orbit {
  animation: sigilCast 1.12s ease-out both;
}

.opening-view.unsealing .ritual-center {
  animation: sealRelease .78s ease-out both;
}

.opening-view.unsealing .envelope-flap {
  animation: flapLift .82s ease-out both;
}

.opening-view.unsealing .envelope-wax {
  animation: waxIgnite .82s ease-out both;
}

.opening-view.unsealing .envelope-line {
  animation: threadOpen .82s ease-out both;
}

.opening-view.unsealing .gold-dust {
  animation: dustBurst 1.05s ease-out both;
}

.light-opening {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 12px;
  padding-bottom: 92px;
}

.opening-top {
  padding-top: 24px;
  text-align: center;
}

.opening-title {
  margin: 8px 0 6px;
  color: #2f2119;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 23px;
  line-height: 1.28;
  letter-spacing: 0;
}

.opening-sub {
  max-width: 260px;
  margin: 0 auto;
  color: #6d5d50;
  font-size: 12px;
  line-height: 1.58;
}

.light-paper-wrap {
  position: relative;
  display: grid;
  place-items: center;
  height: 276px;
  min-height: 276px;
}

.light-paper {
  width: 258px;
  min-height: 208px;
  padding: 18px 20px;
  border: 1px solid #d2bd98;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .08)), #fff7e8;
  box-shadow: 0 24px 50px rgba(75, 42, 22, .16);
  position: relative;
  transform-origin: top center;
  animation: lightUnfold .76s cubic-bezier(.2, .8, .2, 1) both, slipFloat 3.4s ease-in-out .8s infinite;
  text-align: center;
}

.light-paper::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(184, 137, 62, .25);
  border-radius: 6px;
  pointer-events: none;
}

.light-paper-main {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  font-family: "Songti SC", "Noto Serif SC", serif;
  color: var(--ink);
  font-size: 24px;
  line-height: 1.34;
  font-weight: 900;
}

.light-paper-copy {
  position: relative;
  z-index: 1;
  max-width: 196px;
  margin: 12px auto 0;
  color: #6d5d50;
  font-size: 12px;
  line-height: 1.58;
}

.seal {
  position: absolute;
  right: 18px;
  bottom: 16px;
  width: 44px;
  height: 44px;
  border: 2px solid var(--coral);
  color: var(--coral);
  display: grid;
  place-items: center;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 20px;
  font-weight: 900;
  transform: rotate(-8deg);
}

.opening-glow-tag {
  position: absolute;
  right: 34px;
  bottom: 10px;
  padding: 5px 9px;
  border: 1px solid rgba(184, 137, 62, .28);
  border-radius: 999px;
  background: rgba(255, 250, 234, .9);
  color: #8b6424;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(75, 42, 22, .1);
}

.quick-panel,
.today-panel,
.mood-card,
.scene-panel,
.profile-card,
.setting-list,
.name-paper {
  border: 1px solid rgba(184, 137, 62, .3);
  border-radius: var(--radius);
  background: rgba(255, 249, 235, .82);
  box-shadow: 0 18px 36px rgba(75, 42, 22, .1);
}

.quick-panel {
  padding: 12px;
  align-self: start;
  min-width: 0;
}

.profile-collect-card {
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid rgba(168, 68, 62, .34);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 230, 168, .42), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, .86), rgba(255, 241, 223, .82)),
    #fff7e8;
  box-shadow: 0 14px 28px rgba(75, 42, 22, .1);
}

.profile-collect-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.profile-collect-head b {
  display: block;
  color: #35231b;
  font-size: 14px;
  line-height: 1.25;
}

.profile-collect-head span {
  display: block;
  margin-top: 3px;
  color: rgba(90, 71, 56, .62);
  font-size: 11px;
  line-height: 1.45;
}

.profile-mini-seal {
  width: 34px;
  height: 34px;
  border: 2px solid rgba(168, 68, 62, .78);
  color: var(--coral);
  display: grid;
  place-items: center;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-weight: 900;
  transform: rotate(-9deg);
  flex: 0 0 auto;
}

.profile-base-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-bottom: 14px;
}

.profile-base-form.compact {
  gap: 7px;
  margin-bottom: 0;
}

.profile-base-form .wide {
  grid-column: 1 / -1;
}

.picker-field {
  min-height: 62px;
  padding: 10px 12px;
  border: 1px solid rgba(184, 137, 62, .28);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .68);
  color: var(--ink);
  text-align: left;
}

.profile-base-form.compact .picker-field {
  min-height: 54px;
  padding: 8px 10px;
}

.picker-field.active {
  border-color: rgba(168, 68, 62, .46);
  background:
    radial-gradient(circle at 86% 20%, rgba(255, 230, 168, .34), transparent 34%),
    rgba(255, 248, 232, .92);
  box-shadow: inset 0 0 0 1px rgba(168, 68, 62, .08);
}

.picker-field span,
.picker-field b {
  display: block;
}

.picker-field span {
  color: rgba(90, 71, 56, .62);
  font-size: 11px;
  font-weight: 900;
}

.picker-field b {
  margin-top: 6px;
  color: #2f2119;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 16px;
  line-height: 1.25;
}

.profile-base-form.compact .picker-field b {
  font-size: 14px;
}

.profile-picker-panel {
  padding: 12px;
  border: 1px solid rgba(184, 137, 62, .28);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .08)),
    #fff7e8;
  box-shadow: 0 14px 28px rgba(75, 42, 22, .1);
}

.profile-picker-panel.compact {
  padding: 10px;
}

.picker-title {
  margin-bottom: 10px;
  color: #3b3028;
  font-size: 12px;
  font-weight: 900;
}

.picker-steppers {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(0, .92fr) minmax(0, .92fr);
  gap: 8px;
}

.picker-steppers.two {
  grid-template-columns: repeat(2, 1fr);
}

.picker-stepper {
  min-width: 0;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 24px;
  grid-template-rows: auto 34px;
  gap: 4px;
  align-items: center;
  padding: 8px 5px;
  border: 1px solid rgba(216, 199, 170, .72);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .58);
}

.picker-stepper span {
  grid-column: 1 / -1;
  color: rgba(90, 71, 56, .62);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

.picker-stepper button {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(184, 137, 62, .3);
  background: rgba(255, 250, 240, .8);
  color: var(--coral);
  font-weight: 900;
  font-size: 17px;
  line-height: 1;
}

.picker-stepper b {
  min-width: 0;
  color: #2f2119;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1;
  text-align: center;
}

.place-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.place-chip-row button {
  min-height: 32px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(184, 137, 62, .28);
  background: rgba(255, 255, 255, .66);
  color: #5a4738;
  font-size: 12px;
  font-weight: 900;
}

.place-chip-row button.active {
  background: #2d1d15;
  color: #fff8ec;
  border-color: #2d1d15;
}

.place-input {
  width: 100%;
  min-height: 40px;
  margin-top: 9px;
  padding: 0 10px;
  border: 1px solid rgba(184, 137, 62, .28);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .78);
  color: var(--ink);
  font-size: 13px;
}

.profile-collect-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.profile-collect-actions button {
  min-height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(184, 137, 62, .38);
  background: rgba(255, 255, 255, .74);
  color: #6f5540;
  font-size: 12px;
  font-weight: 900;
}

.profile-collect-actions .save {
  background: #2d1d15;
  color: #fff8ec;
  border-color: #2d1d15;
}

.profile-soft-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 9px 10px;
  border: 1px dashed rgba(184, 137, 62, .38);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .52);
}

.profile-soft-row span {
  color: rgba(62, 50, 41, .72);
  font-size: 12px;
  line-height: 1.45;
}

.profile-soft-row button {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: #2d1d15;
  color: #fff8ec;
  font-size: 12px;
  font-weight: 900;
}

.profile-ready-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(82, 105, 82, .22);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 88% 18%, rgba(255, 230, 168, .36), transparent 30%),
    rgba(255, 252, 240, .74);
  box-shadow: 0 12px 24px rgba(75, 42, 22, .08);
}

.profile-ready-card b,
.profile-ready-card span {
  display: block;
}

.profile-ready-card b {
  color: #30231b;
  font-size: 13px;
}

.profile-ready-card span {
  margin-top: 3px;
  color: rgba(90, 71, 56, .66);
  font-size: 11px;
  line-height: 1.35;
}

.profile-ready-card button {
  flex: 0 0 auto;
  height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(184, 137, 62, .34);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  color: #7c332c;
  font-size: 12px;
  font-weight: 900;
}

.profile-oracle {
  position: relative;
  min-height: 116px;
  margin-bottom: 12px;
  border: 1px solid rgba(216, 199, 170, .72);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 229, 169, .48), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, .72), rgba(255, 245, 224, .56));
  overflow: hidden;
}

.calendar-oracle {
  display: grid;
  place-items: center;
}

.calendar-card-visual {
  width: 102px;
  height: 86px;
  display: grid;
  grid-template-rows: 20px 34px 1fr;
  border: 1px solid rgba(184, 137, 62, .36);
  border-radius: 8px;
  background: #fffaf0;
  box-shadow: 0 16px 28px rgba(75, 42, 22, .12);
  overflow: hidden;
  animation: calendarFlip .42s ease both;
}

.calendar-card-visual small {
  display: grid;
  place-items: center;
  background: #a8443e;
  color: #fff8ec;
  font-size: 11px;
  font-weight: 900;
}

.calendar-card-visual b,
.calendar-card-visual span {
  display: grid;
  place-items: center;
  font-family: Georgia, "Times New Roman", serif;
}

.calendar-card-visual b {
  color: #b8893e;
  font-size: 28px;
  line-height: 1;
}

.calendar-card-visual span {
  color: #2f2119;
  font-size: 18px;
  font-weight: 900;
}

.calendar-orbit-dot {
  position: absolute;
  inset: 16px 46px;
  border: 1px dashed rgba(184, 137, 62, .32);
  border-radius: 50%;
  animation: orbitSpin 8s linear infinite;
}

@keyframes calendarFlip {
  from { opacity: .45; transform: rotateX(42deg) translateY(-4px); }
  to { opacity: 1; transform: rotateX(0) translateY(0); }
}

.clock-oracle {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
}

.clock-face {
  position: relative;
  width: 84px;
  height: 84px;
  border: 2px solid rgba(184, 137, 62, .42);
  border-radius: 50%;
  background: #fffaf0;
  box-shadow: inset 0 0 0 8px rgba(255, 236, 194, .46), 0 14px 26px rgba(75, 42, 22, .1);
}

.clock-face::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px dashed rgba(168, 68, 62, .22);
  border-radius: 50%;
}

.clock-face i {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 3px;
  border-radius: 999px;
  background: #4a2b1e;
  transform-origin: 50% 100%;
  transition: transform .38s ease;
}

.clock-face .hour-hand {
  height: 25px;
  transform: translateX(-50%) rotate(var(--hour-angle));
}

.clock-face .minute-hand {
  height: 33px;
  background: #a8443e;
  transform: translateX(-50%) rotate(var(--minute-angle));
}

.clock-face b {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b8893e;
  transform: translate(-50%, -50%);
}

.clock-oracle span {
  color: #2f2119;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  font-weight: 900;
}

.map-oracle {
  display: grid;
  grid-template-columns: 1fr 90px;
  align-items: center;
  gap: 12px;
  padding: 12px;
}

.mini-map {
  position: relative;
  height: 92px;
  border: 1px solid rgba(184, 137, 62, .32);
  border-radius: 10px;
  background:
    radial-gradient(circle at 74% 26%, rgba(255, 232, 156, .68), transparent 18%),
    linear-gradient(135deg, #eaf2df, #fff3dd 54%, #e4efe9);
  overflow: hidden;
}

.map-river,
.map-road {
  position: absolute;
  border-radius: 999px;
  opacity: .72;
}

.map-river {
  left: -18%;
  top: 58%;
  width: 138%;
  height: 18px;
  background: rgba(128, 186, 189, .36);
  transform: rotate(-10deg);
}

.map-road {
  height: 2px;
  background: rgba(184, 137, 62, .34);
}

.map-road.one {
  left: 12%;
  top: 34%;
  width: 76%;
  transform: rotate(14deg);
}

.map-road.two {
  left: 20%;
  top: 70%;
  width: 64%;
  transform: rotate(-24deg);
}

.map-pin {
  position: absolute;
  left: var(--pin-x);
  top: var(--pin-y);
  transform: translate(-50%, -88%);
  filter: drop-shadow(0 8px 10px rgba(75, 42, 22, .22));
  animation: pinDrop .42s cubic-bezier(.2, .8, .24, 1) both;
}

.map-oracle b {
  color: #2f2119;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 18px;
  line-height: 1.25;
}

@keyframes pinDrop {
  from { opacity: 0; transform: translate(-50%, -126%) scale(.72); }
  to { opacity: 1; transform: translate(-50%, -88%) scale(1); }
}

.place-picker-grid {
  display: grid;
  gap: 8px;
}

.city-row {
  padding-top: 8px;
  border-top: 1px solid rgba(216, 199, 170, .58);
}

.profile-base-screen > .profile-oracle {
  margin-bottom: 14px;
}

.light-opening > .profile-oracle {
  margin-bottom: 0;
}

.profile-oracle {
  height: 276px;
  min-height: 276px;
  padding: 16px;
  border-color: rgba(184, 137, 62, .34);
  background:
    radial-gradient(circle at 78% 18%, rgba(255, 223, 148, .42), transparent 24%),
    radial-gradient(circle at 20% 82%, rgba(128, 186, 189, .16), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 246, 226, .76)),
    #fff8ec;
  box-shadow: 0 18px 38px rgba(75, 42, 22, .12);
}

.profile-oracle.mine-stage {
  height: 276px;
  min-height: 276px;
}

.calendar-oracle {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  gap: 12px;
  perspective: 900px;
}

.calendar-book-visual {
  position: relative;
  width: min(246px, 100%);
  height: 168px;
  transform-style: preserve-3d;
}

.calendar-book-spine {
  position: absolute;
  left: 9px;
  top: 14px;
  bottom: 10px;
  width: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(95, 58, 40, .28), rgba(255, 255, 255, .12));
  box-shadow: 4px 0 14px rgba(75, 42, 22, .14);
  z-index: 4;
}

.calendar-page-sheet {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(184, 137, 62, .35);
  border-radius: 9px;
  background:
    linear-gradient(90deg, rgba(89, 56, 40, .08), transparent 14%),
    #fffaf0;
  box-shadow: 0 18px 26px rgba(75, 42, 22, .14);
  overflow: hidden;
}

.calendar-page-sheet.back-sheet {
  inset: 8px -8px -8px 12px;
  background: #f2dfbd;
  opacity: .52;
  transform: rotate(2deg);
}

.calendar-page-sheet.main-sheet {
  padding: 12px 14px 12px 25px;
  z-index: 2;
}

.calendar-page-top {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: baseline;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(216, 199, 170, .74);
}

.calendar-page-top small {
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .1em;
}

.calendar-page-top b {
  color: #2f2119;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 20px;
}

.calendar-page-top span {
  padding: 2px 8px;
  border: 1px solid rgba(168, 68, 62, .28);
  border-radius: 999px;
  color: var(--coral);
  font-size: 12px;
  font-weight: 900;
}

.birth-week-row,
.birth-day-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.birth-week-row {
  gap: 4px;
  margin-top: 8px;
}

.birth-week-row i {
  color: rgba(90, 71, 56, .52);
  font-style: normal;
  font-size: 10px;
  font-weight: 900;
  text-align: center;
}

.birth-day-grid {
  gap: 3px;
  margin-top: 5px;
}

.birth-day-grid span,
.birth-day-grid em {
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 10px;
  font-style: normal;
  color: #5a4738;
}

.birth-day-grid span.active {
  background: var(--coral);
  color: #fff8ec;
  box-shadow: 0 0 0 3px rgba(168, 68, 62, .12);
}

.calendar-page-sheet.turning-sheet {
  z-index: 3;
  width: 50%;
  left: 50%;
  background:
    linear-gradient(90deg, rgba(89, 56, 40, .18), rgba(255, 250, 240, .96) 28%, #f5dfb8);
  transform-origin: left center;
  animation: calendarPageTurn .74s cubic-bezier(.2, .8, .2, 1) both;
  pointer-events: none;
}

.calendar-page-sheet.turning-sheet i {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(75, 42, 22, .12), transparent 42%);
}

@keyframes calendarPageTurn {
  0% { opacity: 0; transform: rotateY(0deg); }
  16% { opacity: .9; }
  72% { opacity: .55; transform: rotateY(-128deg); }
  100% { opacity: 0; transform: rotateY(-156deg); }
}

.oracle-caption {
  text-align: center;
}

.oracle-caption b,
.oracle-caption span {
  display: block;
}

.oracle-caption b {
  color: #2f2119;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 16px;
  line-height: 1.25;
}

.oracle-caption span {
  margin-top: 4px;
  color: rgba(90, 71, 56, .62);
  font-size: 12px;
  line-height: 1.45;
}

.map-oracle {
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: 12px;
  padding: 14px;
}

.mini-map {
  height: 154px;
  border-radius: 14px;
  background:
    linear-gradient(rgba(128, 105, 82, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(128, 105, 82, .07) 1px, transparent 1px),
    radial-gradient(circle at 76% 20%, rgba(255, 233, 160, .62), transparent 18%),
    radial-gradient(circle at 24% 86%, rgba(136, 173, 142, .2), transparent 24%),
    linear-gradient(145deg, #e9f0de, #fff3dc 48%, #dfede9);
  background-size: 28px 28px, 28px 28px, auto, auto;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .64), 0 14px 28px rgba(75, 42, 22, .1);
}

.mini-map::before {
  content: "N";
  position: absolute;
  right: 12px;
  top: 11px;
  z-index: 2;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(184, 137, 62, .42);
  border-radius: 50%;
  background: rgba(255, 250, 240, .7);
  color: #7c332c;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  font-weight: 900;
}

.mini-map::after {
  content: "";
  position: absolute;
  left: 18px;
  bottom: 14px;
  z-index: 2;
  width: 54px;
  height: 5px;
  border-top: 2px solid rgba(90, 71, 56, .45);
  border-bottom: 1px solid rgba(90, 71, 56, .24);
}

.china-map-svg {
  position: absolute;
  z-index: 1;
  inset: 2px 4px 5px 3px;
  width: calc(100% - 7px);
  height: calc(100% - 7px);
}

.map-land {
  fill: rgba(235, 218, 174, .88);
  stroke: rgba(113, 107, 78, .5);
  stroke-width: 2.8;
  stroke-linejoin: round;
  filter: drop-shadow(0 9px 9px rgba(75, 42, 22, .12));
}

.map-coast {
  fill: none;
  stroke: rgba(82, 105, 82, .32);
  stroke-width: 2;
  stroke-dasharray: 5 8;
}

.map-river-line {
  fill: none;
  stroke: rgba(75, 151, 165, .38);
  stroke-width: 5.2;
  stroke-linecap: round;
}

.map-province-line {
  fill: none;
  stroke: rgba(123, 113, 82, .18);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 6 8;
}

.map-route {
  fill: none;
  stroke: rgba(168, 68, 62, .24);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 7 8;
}

.map-route.two {
  stroke: rgba(184, 137, 62, .34);
}

.map-island {
  fill: rgba(236, 216, 171, .78);
  stroke: rgba(129, 119, 84, .36);
  stroke-width: 1.8;
  filter: drop-shadow(0 5px 5px rgba(75, 42, 22, .08));
}

.clock-oracle {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 16px;
}

.time-stage-card {
  position: relative;
  width: min(288px, 100%);
  min-height: 218px;
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(184, 137, 62, .34);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .76), rgba(255, 244, 224, .78)),
    #fff8ec;
  box-shadow: 0 18px 30px rgba(75, 42, 22, .12);
  overflow: hidden;
}

.time-stage-card::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(184, 137, 62, .2);
  border-radius: 10px;
  pointer-events: none;
}

.time-sky {
  position: absolute;
  inset: 0;
  opacity: .72;
  background:
    radial-gradient(circle at 18% 25%, rgba(255, 219, 122, .54), transparent 18%),
    linear-gradient(135deg, rgba(255, 244, 211, .5), rgba(215, 232, 226, .28));
}

.time-sky.night,
.time-sky.deep {
  background:
    radial-gradient(circle at 18% 25%, rgba(255, 239, 172, .45), transparent 12%),
    linear-gradient(135deg, rgba(82, 105, 120, .3), rgba(48, 32, 44, .14));
}

.time-sky.evening {
  background:
    radial-gradient(circle at 20% 28%, rgba(255, 183, 116, .48), transparent 16%),
    linear-gradient(135deg, rgba(255, 231, 200, .6), rgba(218, 190, 204, .3));
}

.time-sky span {
  position: absolute;
  display: block;
  border-radius: 999px;
  background: rgba(255, 255, 255, .48);
}

.time-sky span:nth-child(1) {
  left: 34px;
  top: 50px;
  width: 112px;
  height: 2px;
}

.time-sky span:nth-child(2) {
  left: 18px;
  bottom: 46px;
  width: 84px;
  height: 2px;
}

.time-sky span:nth-child(3) {
  right: 26px;
  top: 34px;
  width: 62px;
  height: 62px;
  border: 1px dashed rgba(184, 137, 62, .28);
  background: transparent;
}

.clock-panel {
  position: relative;
  z-index: 1;
  width: 116px;
  height: 116px;
  display: grid;
  place-items: center;
}

.time-orbit {
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(184, 137, 62, .38);
  border-radius: 50%;
}

.time-orbit i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 8px;
  border-radius: 999px;
  background: rgba(124, 51, 44, .42);
  transform: translate(-50%, -50%) rotate(var(--tick)) translateY(-50px);
  transform-origin: center;
}

.time-stage-card .clock-face {
  width: 86px;
  height: 86px;
}

.time-note {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 4px;
}

.time-note small {
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
}

.time-note b {
  color: #2f2119;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 32px;
  line-height: 1;
}

.time-note span {
  color: rgba(90, 71, 56, .68);
  font-size: 12px;
  line-height: 1.55;
}

.map-pin {
  z-index: 4;
  font-size: 20px;
}

.map-city-note {
  position: absolute;
  z-index: 3;
  top: clamp(10px, calc(var(--pin-y) - 28px), calc(100% - 64px));
  max-width: 128px;
  padding: 7px 9px 8px;
  border: 1px solid rgba(184, 137, 62, .26);
  border-radius: 12px;
  background: rgba(255, 250, 239, .78);
  box-shadow: 0 10px 22px rgba(75, 42, 22, .12);
  backdrop-filter: blur(8px);
  pointer-events: none;
}

.map-city-note.right {
  left: var(--pin-x);
  transform: translateX(17px);
}

.map-city-note.left {
  right: calc(100% - var(--pin-x));
  transform: translateX(-17px);
}

.map-city-note::before {
  content: "";
  position: absolute;
  top: 22px;
  width: 18px;
  border-top: 1px solid rgba(124, 51, 44, .32);
}

.map-city-note.right::before {
  left: -18px;
}

.map-city-note.left::before {
  right: -18px;
}

.map-city-note b {
  display: block;
  margin-bottom: 3px;
  color: #7c332c;
  font-size: 13px;
  line-height: 1.15;
}

.map-city-note span {
  display: block;
  color: rgba(47, 33, 25, .74);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 11px;
  line-height: 1.45;
}

.map-caption {
  text-align: left;
  padding: 0 4px;
}

.map-caption b {
  font-size: 19px;
}

.place-picker-grid .place-chip-row {
  max-height: 112px;
  overflow: auto;
  padding-right: 2px;
}

.place-picker-grid .city-row {
  max-height: 92px;
}

.quick-row + .quick-row {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(216, 199, 170, .52);
}

.quick-row {
  min-width: 0;
}

.quick-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 13px;
  color: #35271f;
  font-weight: 900;
}

.quick-label span {
  color: rgba(90, 71, 56, .56);
  font-size: 11px;
  font-weight: 800;
}

.quick-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.quick-row .quick-options {
  flex-wrap: nowrap;
  overflow-x: auto;
  margin: 0 -12px;
  padding: 0 12px 4px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.quick-row .quick-options::-webkit-scrollbar {
  display: none;
}

.ritual-option {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(184, 137, 62, .28);
  background: rgba(255, 255, 255, .58);
  color: #5a4738;
  font-size: 12px;
  font-weight: 900;
}

.ritual-option.active {
  background: #2d1d15;
  border-color: #2d1d15;
  color: #fff8ec;
}

.opening-actions {
  position: fixed;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 60;
  width: min(calc(100% - 32px), 398px);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(184, 137, 62, .26);
  border-radius: 999px;
  background: rgba(255, 247, 232, .82);
  box-shadow: 0 18px 40px rgba(75, 42, 22, .16);
  backdrop-filter: blur(14px);
}

.primary,
.secondary,
.ghost,
.pill-button {
  min-height: 48px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 900;
}

.primary,
.pill-button.primary-red {
  border: 1px solid var(--coral);
  background: var(--coral);
  color: #fffaf0;
  box-shadow: 0 14px 28px rgba(137, 61, 48, .22);
}

.secondary,
.ghost {
  border: 1px solid rgba(184, 137, 62, .36);
  background: rgba(255, 250, 240, .74);
  color: #6f5540;
}

.danger {
  color: #9b4b43;
}

.name-paper {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 8px;
  padding: 12px;
  text-align: left;
}

.name-paper span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.name-paper input {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(184, 137, 62, .32);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  color: var(--ink);
}

.hello {
  margin-bottom: 14px;
}

.hello h1 {
  margin: 0 0 6px;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 25px;
  line-height: 1.24;
}

.hello p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.today-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 68px;
  align-items: center;
  gap: 12px;
  padding: 16px;
  min-height: 160px;
  background:
    radial-gradient(circle at 84% 30%, rgba(255, 235, 165, .62), transparent 24%),
    linear-gradient(135deg, rgba(255, 255, 255, .84), rgba(255, 241, 223, .8)),
    #fff7e8;
}

.today-panel small {
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 800;
  letter-spacing: .12em;
}

.today-panel h2 {
  margin: 10px 0 8px;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 23px;
  line-height: 1.34;
}

.today-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.week-sign-panel {
  margin-bottom: 14px;
  padding: 14px 12px 12px;
  border: 1px solid rgba(184, 137, 62, .3);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 88% 18%, rgba(255, 226, 133, .54), transparent 28%),
    radial-gradient(circle at 10% 10%, rgba(255, 255, 255, .82), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 246, 229, .72)),
    #fff7e8;
  box-shadow: 0 18px 36px rgba(75, 42, 22, .1);
  overflow: hidden;
}

.week-sign-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
  margin-bottom: 12px;
}

.week-sign-head b,
.week-sign-head span {
  display: block;
}

.week-sign-head b {
  color: #2f261f;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 20px;
  line-height: 1.25;
}

.week-sign-head span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.week-luck-jar {
  position: relative;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 92px;
  margin-bottom: 12px;
  padding: 11px 12px;
  border: 1px solid rgba(184, 137, 62, .26);
  border-radius: 10px;
  background:
    radial-gradient(circle at 24% 24%, rgba(255, 255, 255, .88), transparent 28%),
    linear-gradient(135deg, rgba(255, 250, 239, .88), rgba(255, 239, 204, .72));
  overflow: hidden;
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transform-origin: 50% 82%;
}

.week-luck-jar::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 12px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 228, 143, .42), transparent 68%);
  pointer-events: none;
}

.home-word-charm {
  position: relative;
  width: 100%;
  min-height: 68px;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: -4px 0 14px;
  padding: 10px 12px;
  border: 1px solid rgba(168, 68, 62, .14);
  border-radius: 13px;
  background:
    radial-gradient(circle at 12% 20%, rgba(255, 255, 255, .72), transparent 32%),
    radial-gradient(circle at 91% 42%, rgba(255, 226, 151, .28), transparent 36%),
    linear-gradient(135deg, rgba(255, 252, 244, .74), rgba(255, 240, 214, .52));
  color: inherit;
  text-align: left;
  box-shadow: 0 14px 28px rgba(75, 42, 22, .07), inset 0 1px 0 rgba(255, 255, 255, .6);
  overflow: hidden;
}

.home-word-charm::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 9px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 232, 164, .38), transparent 68%);
  pointer-events: none;
}

.word-charm-drawer {
  position: relative;
  width: 74px;
  height: 46px;
  border: 1px solid rgba(146, 88, 46, .28);
  border-radius: 11px;
  background:
    linear-gradient(180deg, rgba(255, 250, 238, .98), rgba(234, 194, 136, .72));
  box-shadow: 0 10px 18px rgba(97, 54, 26, .1), inset 0 0 0 2px rgba(255, 255, 255, .34);
}

.word-charm-drawer::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: -8px;
  height: 13px;
  border: 1px solid rgba(146, 88, 46, .24);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: rgba(255, 248, 230, .9);
}

.word-charm-drawer::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 8px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(159, 95, 48, .32), transparent);
}

.word-charm-drawer i {
  position: absolute;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(198, 73, 52, .2);
  border-radius: 7px;
  background: rgba(255, 250, 239, .9);
  color: #b44737;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 900;
  box-shadow: 0 5px 10px rgba(117, 65, 30, .08);
}

.word-charm-drawer .slot-1 { left: 7px; top: 12px; transform: rotate(-8deg); }
.word-charm-drawer .slot-2 { left: 24px; top: 8px; transform: rotate(3deg); }
.word-charm-drawer .slot-3 { left: 42px; top: 13px; transform: rotate(8deg); }
.word-charm-drawer .slot-4 { left: 17px; top: 19px; opacity: .8; transform: rotate(-2deg); }
.word-charm-drawer .slot-5 { left: 36px; top: 20px; opacity: .72; transform: rotate(5deg); }

.word-charm-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.word-charm-copy b,
.word-charm-copy span {
  display: block;
}

.word-charm-copy b {
  color: #3a271e;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 17px;
  letter-spacing: .04em;
}

.word-charm-copy span {
  margin-top: 4px;
  color: rgba(91, 72, 58, .68);
  font-size: 12px;
  font-weight: 800;
}

.home-word-charm em {
  position: relative;
  z-index: 1;
  min-width: 43px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 249, 235, .72);
  color: #9a4a37;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(168, 68, 62, .12);
}

.jar-visual {
  position: relative;
  width: 66px;
  height: 76px;
  margin-left: 2px;
  border: 1.5px solid rgba(155, 111, 50, .42);
  border-radius: 18px 18px 22px 22px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .62), transparent 28%, rgba(255, 255, 255, .38) 72%, transparent),
    rgba(255, 251, 240, .55);
  box-shadow:
    inset 0 0 0 4px rgba(255, 255, 255, .36),
    0 12px 22px rgba(75, 42, 22, .1),
    0 0 24px rgba(224, 190, 121, .16);
  overflow: hidden;
  isolation: isolate;
}

.jar-visual::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: -4px;
  height: 13px;
  border: 1.5px solid rgba(155, 111, 50, .42);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: rgba(255, 250, 239, .85);
}

.jar-visual::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  top: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184, 137, 62, .34), transparent);
}

.jar-fill {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  height: var(--jar-fill);
  border-radius: 16px 16px 18px 18px;
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, .72), transparent 20%),
    linear-gradient(180deg, rgba(255, 229, 142, .88), rgba(205, 145, 52, .72));
  box-shadow: 0 0 18px rgba(226, 176, 72, .5);
  transition: height .45s ease;
  z-index: 2;
}

.jar-fill::before {
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  top: -7px;
  height: 15px;
  border-radius: 50%;
  background: rgba(255, 242, 188, .72);
  animation: jarWave 3.4s ease-in-out infinite;
}

.jar-glow {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 46%, rgba(255, 247, 202, .82), rgba(224, 190, 121, .38) 32%, transparent 66%);
  filter: blur(3px);
  animation: jarGlow 2.8s ease-in-out infinite;
  z-index: 3;
  mix-blend-mode: screen;
}

.jar-gooey {
  position: absolute;
  z-index: 3;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .92) 0 18%, rgba(224, 190, 121, .6) 19% 58%, rgba(224, 190, 121, 0) 68%);
  filter: blur(3px) contrast(8);
  opacity: .62;
  mix-blend-mode: screen;
  animation: jarGooeyFloat 3.8s ease-in-out infinite;
}

.jar-gooey.g1 {
  left: 14px;
  top: 28px;
}

.jar-gooey.g2 {
  right: 11px;
  top: 39px;
  width: 17px;
  height: 17px;
  animation-delay: .6s;
}

.jar-gooey.g3 {
  left: 27px;
  bottom: 14px;
  width: 19px;
  height: 19px;
  animation-delay: 1.15s;
}

.jar-spark {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #d6a246;
  box-shadow: 0 0 10px rgba(255, 218, 122, .75);
  animation: jarSpark 2.6s ease-in-out infinite;
  z-index: 4;
}

.jar-spark.s1 { left: 18px; top: 30px; }
.jar-spark.s2 { right: 18px; top: 42px; animation-delay: .45s; }
.jar-spark.s3 { left: 32px; bottom: 18px; animation-delay: .9s; }

.jar-burst {
  position: absolute;
  left: 46px;
  top: 46px;
  width: 1px;
  height: 1px;
  pointer-events: none;
  z-index: 4;
}

.jar-burst i {
  position: absolute;
  left: 0;
  top: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #fff8ce 0 20%, #f4ca62 21% 54%, rgba(244, 202, 98, 0) 56%);
  box-shadow: 0 0 14px rgba(255, 219, 112, .74);
  opacity: 0;
}

.jar-burst i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 236, 160, .9), transparent);
  transform: translate(-50%, -50%) rotate(var(--ray, 0deg));
}

.burst-1 { --x: -28px; --y: -48px; --r: -18deg; --ray: 24deg; }
.burst-2 { --x: 16px; --y: -64px; --r: 12deg; --ray: -18deg; }
.burst-3 { --x: 54px; --y: -42px; --r: 28deg; --ray: 48deg; }
.burst-4 { --x: 66px; --y: -6px; --r: 8deg; --ray: -36deg; }
.burst-5 { --x: 22px; --y: 28px; --r: -32deg; --ray: 16deg; }
.burst-6 { --x: -34px; --y: 18px; --r: 20deg; --ray: -42deg; }
.burst-7 { --x: 4px; --y: -28px; --r: 0deg; --ray: 72deg; }

.week-luck-jar.shaking {
  animation: jarCardShake .7s cubic-bezier(.2, .8, .2, 1) both;
}

.week-luck-jar.shaking .jar-visual {
  animation: jarBodyShake .7s cubic-bezier(.2, .8, .2, 1) both;
}

.week-luck-jar.shaking .jar-fill::before {
  animation: jarWave 1s ease-in-out infinite, jarSplash .7s ease both;
}

.week-luck-jar.shaking .jar-burst i {
  animation: jarBurst .88s cubic-bezier(.15, .78, .2, 1) both;
}

.week-luck-jar.shaking .jar-burst i:nth-child(2) { animation-delay: .04s; }
.week-luck-jar.shaking .jar-burst i:nth-child(3) { animation-delay: .08s; }
.week-luck-jar.shaking .jar-burst i:nth-child(4) { animation-delay: .12s; }
.week-luck-jar.shaking .jar-burst i:nth-child(5) { animation-delay: .16s; }
.week-luck-jar.shaking .jar-burst i:nth-child(6) { animation-delay: .1s; }
.week-luck-jar.shaking .jar-burst i:nth-child(7) { animation-delay: .18s; }

.jar-copy {
  position: relative;
  z-index: 1;
}

.jar-copy strong,
.jar-copy span {
  display: block;
}

.jar-copy strong {
  color: #3a2a20;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 18px;
  line-height: 1.3;
}

.jar-copy span {
  margin-top: 5px;
  color: #7a6750;
  font-size: 12px;
  line-height: 1.5;
}

.week-sign-head button {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(184, 137, 62, .28);
  border-radius: 999px;
  background: rgba(255, 250, 240, .74);
  color: #8b6424;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.week-sign-head .week-archive-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px 0 12px;
  border-color: rgba(39, 39, 37, .12);
  background: rgba(255, 255, 255, .54);
  color: rgba(39, 39, 37, .68);
  font-size: 12px;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .52);
}

.week-archive-button i {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  font-style: normal;
  line-height: 1;
  opacity: .7;
}

.week-slip-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  perspective: 620px;
}

.week-slip {
  position: relative;
  min-width: 0;
  min-height: 82px;
  padding: 6px 4px;
  display: grid;
  grid-template-rows: auto auto 24px 1fr;
  align-items: start;
  justify-items: center;
  gap: 2px;
  border: 1px solid rgba(216, 199, 170, .78);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 245, 225, .82)),
    #fffaf0;
  color: inherit;
  font: inherit;
  text-align: center;
  box-shadow: 0 8px 16px rgba(75, 42, 22, .06);
  transform-origin: 50% 100%;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, opacity .22s ease;
}

.week-slip::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -1px;
  width: 16px;
  height: 5px;
  border-radius: 0 0 999px 999px;
  background: rgba(218, 187, 130, .42);
  transform: translateX(-50%);
}

.week-slip::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(184, 137, 62, .12);
  border-radius: 5px;
  pointer-events: none;
}

.week-slip:not(.future) {
  cursor: pointer;
}

.week-slip.selected {
  border-color: rgba(168, 68, 62, .4);
  box-shadow: 0 13px 22px rgba(75, 42, 22, .13);
  transform: rotateX(7deg) translateY(-3px);
}

.week-slip.today {
  background:
    radial-gradient(circle at 50% 8%, rgba(255, 232, 159, .62), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 241, 220, .9)),
    #fff8e8;
}

.week-slip.future {
  opacity: .36;
}

.week-slip.empty:not(.today) {
  opacity: .58;
}

.week-name {
  color: rgba(90, 71, 56, .68);
  font-size: 10px;
  font-weight: 900;
}

.week-slip b {
  color: #3b3028;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1;
}

.week-slip i {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(168, 68, 62, .18);
  border-radius: 50%;
  background: #fff3dc;
  color: var(--coral);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
}

.week-slip i.blank {
  border-color: transparent;
  background: transparent;
}

.week-slip em {
  min-width: 0;
  max-width: 100%;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.18;
  font-style: normal;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.week-slip em.blank {
  display: none;
}

.week-peek {
  position: relative;
  margin-top: 10px;
  padding: 11px 12px;
  border: 1px solid rgba(184, 137, 62, .25);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .82), rgba(255, 246, 229, .76)),
    #fffaf0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .68);
  animation: weekPeekOpen .24s ease both;
}

.week-peek::before {
  content: "";
  position: absolute;
  left: var(--week-peek-arrow-x, 7.143%);
  top: -6px;
  width: 12px;
  height: 12px;
  border-left: 1px solid rgba(184, 137, 62, .25);
  border-top: 1px solid rgba(184, 137, 62, .25);
  background: #fffaf0;
  transform: translateX(-50%) rotate(45deg);
}

.week-peek small {
  display: block;
  margin-bottom: 5px;
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 10px;
  font-style: italic;
  font-weight: 800;
  letter-spacing: .12em;
}

.week-peek p {
  margin: 0;
  color: #33261e;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 900;
}

.week-daily-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  align-items: center;
  gap: 12px;
}

.week-peek.today-empty .week-daily-card {
  grid-template-columns: minmax(0, 1fr);
  gap: 13px;
  align-items: start;
}

.week-peek.today-empty .week-daily-card h2 {
  max-width: 9em;
  margin-bottom: 7px;
  font-size: 19px;
  line-height: 1.28;
}

.week-peek.today-empty .week-daily-card p {
  max-width: 13em;
  font-size: 12px;
  line-height: 1.45;
}

.week-peek.night-ready .week-daily-card {
  position: relative;
}

.week-daily-card small {
  margin-bottom: 7px;
}

.week-daily-card h2 {
  margin: 0 0 8px;
  color: #2f261f;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 21px;
  line-height: 1.34;
  font-weight: 900;
}

.week-daily-card p {
  margin: 0;
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 700;
}

.week-seal-button {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 2px solid var(--coral);
  border-radius: 50%;
  background: rgba(255, 248, 232, .78);
  color: var(--coral);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 18px;
  font-weight: 900;
  transform: rotate(-8deg);
  box-shadow: 0 12px 24px rgba(75, 42, 22, .1);
}

.week-peek.today-empty .week-seal-button {
  width: min(100%, 180px);
  height: 36px;
  justify-self: end;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: rgba(53, 49, 37, .92);
  color: rgba(255, 252, 241, .95);
  font-size: 15px;
  font-weight: 700;
  transform: none;
  box-shadow: 0 10px 18px rgba(34, 29, 20, .18), inset 0 1px 0 rgba(255, 255, 255, .16);
}

.week-evening-ribbon {
  grid-column: 1 / -1;
  min-height: 34px;
  margin-top: 0;
  padding: 5px 2px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(90, 56, 46, .86);
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  box-shadow: none;
  transform: none;
}

.week-evening-ribbon.collected {
  min-height: 30px;
  padding-right: 2px;
}

.week-evening-ribbon i {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 0;
  color: #9f443b;
  background:
    radial-gradient(circle at 42% 36%, rgba(255, 255, 255, .95), rgba(255, 233, 168, .82) 48%, rgba(255, 233, 168, 0) 72%);
  box-shadow: 0 0 18px rgba(224, 178, 92, .22);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
}

.week-evening-ribbon span {
  flex: 1 1 auto;
}

.week-evening-ribbon span,
.week-evening-ribbon b,
.week-evening-ribbon em {
  display: block;
  min-width: 0;
}

.week-evening-ribbon b {
  color: #33231d;
  font-size: 12px;
}

.week-evening-ribbon.collected b {
  color: #6f5a48;
  font-weight: 500;
}

.week-evening-ribbon em {
  margin-top: 1px;
  color: #8a6d56;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.week-evening-ribbon .echo-revisit-icon {
  position: relative;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: 0 1px 0 auto;
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 34%, rgba(255, 255, 255, .9) 0 12%, transparent 13%),
    linear-gradient(135deg, rgba(255, 248, 232, .82), rgba(247, 225, 175, .5));
  box-shadow: inset 0 0 0 1px rgba(184, 137, 62, .16), 0 7px 14px rgba(75, 42, 22, .055);
  opacity: .92;
}

.week-evening-ribbon .echo-revisit-icon::before,
.week-evening-ribbon .echo-revisit-icon::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.week-evening-ribbon .echo-revisit-icon::before {
  left: 7px;
  top: 8px;
  width: 7px;
  height: 7px;
  border-right: 1.7px solid rgba(159, 68, 59, .72);
  border-bottom: 1.7px solid rgba(159, 68, 59, .72);
  transform: rotate(-45deg);
}

.week-evening-ribbon .echo-revisit-icon::after {
  left: 7px;
  right: 8px;
  top: 11px;
  height: 1px;
  border-radius: 999px;
  background: rgba(159, 68, 59, .34);
}

.week-peek-lines {
  display: grid;
  gap: 4px;
  margin-top: 8px;
}

.week-peek-lines span {
  min-width: 0;
  color: #5d5047;
  font-size: 11px;
  line-height: 1.35;
}

.week-peek-lines b {
  margin-right: 6px;
  color: var(--coral);
  font-family: "Songti SC", "Noto Serif SC", serif;
}

.week-peek button {
  min-height: 32px;
  margin-top: 9px;
  padding: 0 14px;
  border: 1px solid rgba(168, 68, 62, .18);
  border-radius: 999px;
  background: rgba(255, 248, 232, .86);
  color: #8a3c36;
  font-size: 12px;
  font-weight: 900;
}

.week-peek .week-seal-button {
  width: 56px;
  height: 56px;
  min-height: 56px;
  margin-top: 0;
  padding: 0;
  border: 2px solid var(--coral);
  border-radius: 50%;
  background: rgba(255, 248, 232, .78);
  color: var(--coral);
  font-size: 18px;
}

.week-peek.empty p,
.week-peek.future p {
  color: #7a6750;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
}

@keyframes weekPeekOpen {
  from { opacity: 0; transform: rotateX(-8deg) translateY(-3px); }
  to { opacity: 1; transform: rotateX(0) translateY(0); }
}

@keyframes jarWave {
  0%, 100% { transform: translateX(-4px) rotate(-1deg); }
  50% { transform: translateX(5px) rotate(1deg); }
}

@keyframes jarGlow {
  0%, 100% { opacity: .42; transform: scale(.92); }
  50% { opacity: .9; transform: scale(1.06); }
}

@keyframes jarSpark {
  0%, 100% { opacity: .3; transform: translateY(2px) scale(.78); }
  48% { opacity: 1; transform: translateY(-5px) scale(1.08); }
}

@keyframes jarGooeyFloat {
  0%, 100% { transform: translate(0, 0) scale(.86); opacity: .38; }
  34% { transform: translate(6px, -8px) scale(1.12); opacity: .72; }
  68% { transform: translate(-5px, 5px) scale(.96); opacity: .56; }
}

@keyframes jarCardShake {
  0%, 100% { transform: rotate(0) translateY(0); }
  18% { transform: rotate(-1.4deg) translateY(-1px); }
  36% { transform: rotate(1.8deg) translateY(1px); }
  54% { transform: rotate(-1deg) translateY(-1px); }
  72% { transform: rotate(.7deg) translateY(0); }
}

@keyframes jarBodyShake {
  0%, 100% { transform: rotate(0) scale(1); }
  20% { transform: rotate(-6deg) scale(1.02); }
  42% { transform: rotate(7deg) scale(1.03); }
  64% { transform: rotate(-3deg) scale(1.01); }
  82% { transform: rotate(1.4deg) scale(1); }
}

@keyframes jarSplash {
  0%, 100% { transform: translateX(-4px) rotate(-1deg) scaleY(1); }
  34% { transform: translateX(9px) rotate(5deg) scaleY(1.22); }
  62% { transform: translateX(-7px) rotate(-4deg) scaleY(1.14); }
}

@keyframes jarBurst {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(.42) rotate(0);
    filter: blur(.5px);
  }
  18% {
    opacity: 1;
    filter: blur(0);
  }
  78% {
    opacity: .92;
    transform: translate(var(--x), var(--y)) scale(1) rotate(var(--r));
  }
  100% {
    opacity: 0;
    transform: translate(calc(var(--x) * 1.16), calc(var(--y) - 10px)) scale(.78) rotate(var(--r));
    filter: blur(.4px);
  }
}

.seal-button {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 2px solid var(--coral);
  background: rgba(255, 248, 232, .72);
  color: var(--coral);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 22px;
  font-weight: 900;
  transform: rotate(-8deg);
  box-shadow: 0 12px 30px rgba(75, 42, 22, .12);
}

.mood-card {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 15px 15px 14px;
  overflow: hidden;
  color: #2c2119;
  text-align: left;
  cursor: pointer;
  font: inherit;
  background:
    radial-gradient(circle at 92% 18%, rgba(247, 220, 146, .28), transparent 30%),
    linear-gradient(135deg, rgba(255, 252, 244, .92), rgba(255, 246, 225, .78)),
    repeating-linear-gradient(180deg, rgba(184, 137, 62, .035) 0, rgba(184, 137, 62, .035) 1px, transparent 1px, transparent 16px),
    #fff8ea;
}

.mood-card::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 42px;
  height: 1px;
  background: linear-gradient(90deg, rgba(184, 137, 62, .22), transparent);
  pointer-events: none;
}

.mood-card::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 14px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(168, 68, 62, .12);
  border-radius: 50%;
  background: rgba(255, 250, 240, .35);
  transform: rotate(-12deg);
  pointer-events: none;
}

.mood-card-head {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 13px;
}

.mood-card-head b {
  color: rgba(94, 66, 45, .78);
  font-size: 13px;
}

.mood-card-head span {
  color: rgba(138, 75, 62, .68);
  font-size: 12px;
  font-weight: 900;
}

.mood-card-body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 11px;
  align-items: start;
}

.profile-needed-card {
  border-color: rgba(168, 68, 62, .26);
  background:
    radial-gradient(circle at 88% 16%, rgba(255, 223, 152, .5), transparent 26%),
    linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(255, 241, 224, .78)),
    #fffaf0;
}

.profile-needed-body {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.profile-needed-body h3 {
  margin: 0 0 6px;
  color: #2d2119;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 17px;
  line-height: 1.35;
}

.profile-needed-orb {
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 250, 224, .96) 0 26%, rgba(244, 191, 104, .24) 27% 48%, transparent 49%),
    conic-gradient(from 18deg, rgba(168, 68, 62, .18), rgba(220, 176, 103, .5), rgba(68, 92, 83, .24), rgba(168, 68, 62, .18));
  box-shadow: inset 0 0 0 1px rgba(184, 137, 62, .24), 0 12px 24px rgba(84, 48, 22, .12);
}

.profile-needed-orb.large {
  width: 104px;
  height: 104px;
  margin: 0 auto 18px;
}

.profile-needed-orb i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 82%;
  height: 1px;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(168, 68, 62, .56), transparent);
}

.profile-needed-orb i:nth-child(1) { transform: rotate(18deg); }
.profile-needed-orb i:nth-child(2) { transform: rotate(138deg); }
.profile-needed-orb i:nth-child(3) { transform: rotate(258deg); }

.fortune-profile-gate {
  min-height: calc(100vh - 180px);
  display: grid;
  place-content: center;
  text-align: center;
  padding: 24px 18px;
  border: 1px solid rgba(184, 137, 62, .3);
  border-radius: var(--radius);
  background: rgba(255, 249, 235, .82);
  box-shadow: var(--shadow);
}

.fortune-profile-gate h1 {
  margin: 0 0 10px;
  color: #2f2119;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 25px;
}

.fortune-profile-gate p {
  margin: 0 auto 18px;
  max-width: 280px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.mood-score-title {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-weight: 900;
  white-space: nowrap;
}

.mood-score-title span:first-child {
  color: #211611;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 18px;
}

.mood-score-title strong {
  position: relative;
  color: #39251b;
  font-size: 38px;
  line-height: .9;
  letter-spacing: 0;
  z-index: 0;
}

.mood-score-title strong::after {
  content: "";
  position: absolute;
  left: 0;
  right: -4px;
  bottom: 0;
  height: 8px;
  border-radius: 999px;
  background: rgba(224, 178, 92, .38);
  transform: rotate(-8deg);
  z-index: -1;
}

.mood-score-title em {
  font-style: normal;
  color: rgba(90, 71, 56, .78);
  font-size: 15px;
}

.section-title {
  color: #35231b;
  font-size: 15px;
  font-weight: 900;
}

.section-heading {
  margin-bottom: 10px;
}

.section-heading span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.scene-works-link {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(168, 68, 62, .18);
  border-radius: 999px;
  background: rgba(255, 250, 240, .64);
  color: #8a4b3e;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(75, 42, 22, .06);
}

.mood-summary,
.mood-card p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.62;
}

.mood-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  align-items: end;
}

.mood-metrics.compact {
  gap: 6px;
  align-items: stretch;
}

.mood-metric {
  display: grid;
  justify-items: center;
  gap: 4px;
  color: #2d264d;
  font-size: 12px;
  font-weight: 900;
}

.mood-metric b {
  line-height: 1;
}

.mood-metrics.compact .mood-metric {
  min-height: 42px;
  padding: 6px 2px 5px;
  border: 1px solid rgba(184, 137, 62, .16);
  border-radius: 8px;
  background: rgba(255, 250, 240, .58);
  gap: 3px;
  color: rgba(84, 64, 50, .82);
  font-size: 10px;
}

.mood-bar {
  width: 17px;
  height: 76px;
  border-radius: 999px;
  background: var(--bar-soft);
  position: relative;
  overflow: hidden;
}

.mood-metrics.compact .mood-bar {
  display: none;
}

.mood-metrics.compact .mood-metric b {
  color: rgba(72, 49, 34, .88);
  font-size: 13px;
}

.mood-bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--score) * 1%);
  border-radius: inherit;
  background: var(--bar);
}

.mood-metric small {
  color: #9b9186;
  font-size: 11px;
  font-weight: 800;
}

.mood-metrics.compact .mood-metric small {
  color: rgba(116, 97, 81, .72);
  font-size: 9px;
}

.mood-spectrum {
  position: relative;
  margin-top: 1px;
  padding: 9px 10px 8px;
  border: 1px solid rgba(184, 137, 62, .15);
  border-radius: 10px;
  background:
    radial-gradient(circle at 18% 50%, rgba(255, 232, 176, .4), transparent 34%),
    linear-gradient(180deg, rgba(255, 252, 244, .58), rgba(255, 247, 232, .34));
  overflow: hidden;
}

.mood-spectrum::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 38px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184, 137, 62, .32), transparent);
  pointer-events: none;
}

.mood-spectrum-note {
  color: rgba(138, 75, 62, .76);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.mood-beads {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  gap: 4px;
  min-height: 52px;
  padding-top: 6px;
}

.mood-bead {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 5px;
  color: rgba(93, 73, 58, .76);
  font-size: 9px;
  font-weight: 900;
}

.mood-bead i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, rgba(255, 255, 255, .95) 0 16%, transparent 17%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .82), transparent 58%),
    var(--bar);
  box-shadow:
    0 0 var(--halo) rgba(224, 178, 92, .32),
    0 7px 10px rgba(75, 42, 22, .08);
  transform: translateY(var(--lift));
}

.mood-bead.active i {
  width: 19px;
  height: 19px;
  box-shadow:
    0 0 15px rgba(224, 178, 92, .42),
    0 0 26px rgba(232, 178, 88, .24),
    0 8px 12px rgba(75, 42, 22, .1);
}

.mood-bead small {
  color: inherit;
  font-size: inherit;
  line-height: 1;
}

.text-link,
.shuffle-button {
  padding: 0;
  background: transparent;
  color: var(--coral);
  font-size: 12px;
  font-weight: 900;
}

.mood-tree {
  position: relative;
  min-height: 86px;
  display: grid;
  place-items: end center;
}

.mood-tree::before {
  content: "";
  position: absolute;
  bottom: 8px;
  width: 32px;
  height: 52px;
  border-left: 4px solid rgba(111, 73, 48, .62);
  border-radius: 50%;
  transform: rotate(-8deg);
}

.mood-tree span {
  position: absolute;
  width: 30px;
  height: 22px;
  border-radius: 50%;
  background: rgba(121, 151, 112, .66);
  box-shadow: 0 6px 14px rgba(75, 42, 22, .08);
}

.mood-tree span:nth-child(1) { right: 30px; top: 10px; transform: rotate(-18deg); }
.mood-tree span:nth-child(2) { right: 10px; top: 26px; transform: rotate(14deg); }
.mood-tree span:nth-child(3) { right: 44px; top: 34px; transform: rotate(12deg); }
.mood-tree span:nth-child(4) { right: 18px; top: 50px; transform: rotate(-10deg); }
.mood-tree span:nth-child(5) { right: 56px; top: 56px; transform: rotate(-6deg); }

.scene-panel {
  margin-top: 14px;
  padding: 14px;
}

.scene-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.scene-button {
  position: relative;
  min-height: 94px;
  padding: 14px 62px 13px 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(184, 137, 62, .22);
  background:
    radial-gradient(circle at 96% 50%, rgba(255, 239, 195, .34), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, .68), rgba(255, 247, 230, .52));
  text-align: left;
  color: var(--ink);
  overflow: hidden;
  isolation: isolate;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.scene-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .46), rgba(255, 238, 198, .12)),
    repeating-linear-gradient(180deg, rgba(184, 137, 62, .045) 0, rgba(184, 137, 62, .045) 1px, transparent 1px, transparent 13px);
  pointer-events: none;
}

.scene-button:hover,
.scene-button:active {
  border-color: rgba(168, 68, 62, .34);
  box-shadow: 0 14px 24px rgba(75, 42, 22, .08);
  transform: translateY(-1px);
}

.scene-button-copy {
  position: relative;
  z-index: 2;
  display: block;
}

.scene-button-copy b,
.scene-button-copy span {
  display: block;
}

.scene-button-copy b {
  font-size: 14px;
  line-height: 1.25;
}

.scene-button-copy span {
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.scene-cover {
  position: absolute;
  z-index: 1;
  right: -5px;
  top: 50%;
  width: 56px;
  height: 76px;
  border-radius: 9px;
  border: 1px solid rgba(255, 250, 240, .86);
  background: #efe3cf;
  box-shadow:
    0 10px 18px rgba(75, 42, 22, .14),
    0 1px 0 rgba(255, 255, 255, .78) inset;
  transform: translateY(-50%) rotate(4deg);
  transform-origin: 50% 80%;
  overflow: hidden;
  pointer-events: none;
}

.scene-button:nth-child(even) .scene-cover {
  right: -5px;
  transform: translateY(-50%) rotate(4deg);
}

.scene-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.96) contrast(.98);
}

.scene-cover-solar_festival img {
  object-position: 68% 54%;
}

.scene-cover-birthday img {
  object-position: 58% 62%;
}

.scene-cover-photo_luck img {
  object-position: 50% 48%;
}

.scene-cover-travel_safe img {
  object-position: 58% 55%;
}

.scene-cover-creative_doodle {
  right: -7px;
  top: 49%;
  transform: translateY(-50%) rotate(-7deg);
  background: #f8e27c;
}

.scene-button:nth-child(even) .scene-cover-creative_doodle {
  transform: translateY(-50%) rotate(-7deg);
}

.scene-cover-creative_doodle img {
  object-position: 50% 44%;
  filter: saturate(1.08) contrast(.98);
}

.creative-home-button {
  border-color: rgba(104, 91, 39, .24);
  background:
    radial-gradient(circle at 96% 48%, rgba(255, 220, 84, .34), transparent 40%),
    linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 242, 191, .56));
}

.creative-new-tag {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 4;
  min-width: 31px;
  height: 17px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(168, 68, 62, .16);
  border-radius: 999px;
  background: rgba(255, 250, 240, .88);
  color: #a8443e;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 9px;
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 5px 12px rgba(75, 42, 22, .08);
}

.scene-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, .28) 0 20%, transparent 38% 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(64, 42, 25, .08));
  pointer-events: none;
}

.dengchang-entry {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 13px 14px;
  border: 1px dashed rgba(184, 137, 62, .42);
  border-radius: var(--radius);
  background: rgba(255, 250, 240, .68);
  color: #574235;
  text-align: left;
}

.dengchang-entry span {
  font-size: 13px;
  font-weight: 800;
}

.dengchang-entry b {
  color: var(--coral);
  font-size: 12px;
}

/* 首页降噪试验稿：保留主叙事卡片，弱化附属模块线框。 */
.home-screen .week-sign-panel {
  border-color: rgba(184, 137, 62, .18);
  background:
    radial-gradient(circle at 88% 18%, rgba(255, 226, 133, .42), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, .74), rgba(255, 246, 229, .58)),
    #fff7e8;
  box-shadow: 0 16px 30px rgba(75, 42, 22, .075);
}

.home-screen .week-luck-jar {
  border-color: rgba(184, 137, 62, .14);
  background:
    radial-gradient(circle at 24% 24%, rgba(255, 255, 255, .78), transparent 28%),
    linear-gradient(135deg, rgba(255, 250, 239, .72), rgba(255, 240, 208, .48));
}

.home-screen .week-slip {
  border-color: rgba(216, 199, 170, .38);
  background: rgba(255, 250, 240, .56);
  box-shadow: none;
}

.home-screen .week-slip::after {
  border-color: transparent;
}

.home-screen .week-slip::before {
  opacity: .42;
}

.home-screen .week-slip.selected,
.home-screen .week-slip.today {
  border-color: rgba(168, 68, 62, .28);
  background:
    radial-gradient(circle at 50% 8%, rgba(255, 232, 159, .48), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(255, 242, 222, .76));
  box-shadow: 0 8px 16px rgba(75, 42, 22, .075);
}

.home-screen .week-peek {
  border-color: rgba(184, 137, 62, .14);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .66), rgba(255, 247, 232, .5)),
    #fffaf0;
  box-shadow: none;
}

.home-screen .week-peek::before {
  border-color: rgba(184, 137, 62, .14);
}

.home-screen .mood-card {
  border-color: rgba(184, 137, 62, .12);
  background:
    radial-gradient(circle at 92% 18%, rgba(247, 220, 146, .2), transparent 30%),
    linear-gradient(135deg, rgba(255, 252, 244, .76), rgba(255, 246, 225, .5)),
    #fff8ea;
  box-shadow: 0 10px 22px rgba(75, 42, 22, .055);
}

.home-screen .mood-card::before {
  background: linear-gradient(90deg, rgba(184, 137, 62, .13), transparent);
}

.home-screen .mood-spectrum {
  border-color: transparent;
  background: rgba(255, 250, 240, .4);
}

.home-screen .scene-panel {
  padding: 4px 0 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.home-screen .scene-button {
  border-color: transparent;
  background:
    radial-gradient(circle at 96% 50%, rgba(255, 239, 195, .24), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, .58), rgba(255, 247, 230, .34));
  box-shadow: 0 8px 18px rgba(75, 42, 22, .045);
}

.home-screen .scene-button::before {
  opacity: .36;
}

.home-screen .scene-button:hover,
.home-screen .scene-button:active {
  border-color: rgba(168, 68, 62, .14);
  box-shadow: 0 12px 22px rgba(75, 42, 22, .06);
}

.home-screen .scene-works-link {
  border-color: transparent;
  background: rgba(255, 250, 240, .42);
  box-shadow: none;
}

.home-screen .dengchang-entry {
  border-color: rgba(184, 137, 62, .22);
  background: rgba(255, 250, 240, .44);
}

/* 首页聚焦试验稿：今日主卡承载周历、今日签、好运罐和字匣，附属能力降为轻入口。 */
.home-today-prompt {
  position: relative;
  min-height: 314px;
  margin-top: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
  isolation: isolate;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.home-today-prompt::before {
  display: none;
}

.home-today-prompt-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.home-profile-avatar {
  position: relative;
  z-index: 3;
  width: 52px;
  height: 52px;
  min-height: 52px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, .82);
  border-radius: 50%;
  background: rgba(30, 34, 28, .2);
  color: rgba(255, 255, 255, .96);
  overflow: hidden;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 21px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(10, 12, 9, .22), inset 0 0 0 1px rgba(255, 255, 255, .22);
  backdrop-filter: blur(10px);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .22s ease, background .22s ease, border-color .22s ease;
}

.home-profile-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.home-profile-avatar:active {
  transform: scale(.96);
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .9);
}

.home-today-quick-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.home-today-quick-actions button {
  width: 48px;
  height: 48px;
  min-height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .68);
  border-radius: 50%;
  background: rgba(255, 255, 255, .58);
  color: rgba(58, 54, 42, .95);
  font-size: 18px;
  font-weight: 600;
  box-shadow: 0 9px 14px rgba(15, 18, 13, .25), inset 0 1px 0 rgba(255, 255, 255, .52);
  backdrop-filter: blur(14px);
}

.home-today-quick-actions .home-fortune-action {
  width: auto;
  min-width: 104px;
  padding: 0 9px 0 12px;
  display: inline-flex;
  justify-content: center;
  gap: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .64);
  color: rgba(48, 44, 34, .9);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
}

.home-today-quick-actions .home-fortune-action.sleeping {
  min-width: 100px;
  padding-right: 10px;
}

.home-fortune-action span {
  line-height: 1;
  white-space: nowrap;
}

.home-fortune-action b {
  min-width: 28px;
  height: 23px;
  display: grid;
  place-items: center;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(50, 45, 34, .92);
  color: rgba(255, 255, 255, .94);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  line-height: 1;
}

.fortune-sleep-icon {
  width: 22px;
  height: 18px;
  display: block;
  background: url("/assets/icons/closed-eye.png") center / contain no-repeat;
  opacity: .82;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .24));
}

.home-today-quick-actions button i {
  font-style: normal;
  line-height: 1;
}

.home-today-quick-actions .home-inspiration-hook {
  position: relative;
  width: auto;
  min-width: 108px;
  max-width: none;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 999px;
  border-color: rgba(255, 232, 178, .62);
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 245, 200, .48), transparent 34%),
    linear-gradient(135deg, rgba(54, 43, 27, .78), rgba(139, 98, 46, .56));
  color: rgba(255, 248, 224, .96);
  font-size: 12px;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-weight: 700;
  letter-spacing: 0;
  text-shadow: 0 1px 2px rgba(38, 25, 12, .36);
  box-shadow: 0 10px 18px rgba(17, 16, 11, .23), inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -10px 24px rgba(255, 223, 142, .08);
  overflow: visible;
}

.home-today-quick-actions .home-inspiration-hook::before {
  content: none;
}

.home-today-quick-actions .home-inspiration-hook i {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  flex: 0 0 18px;
  border-radius: 50%;
  background: rgba(255, 245, 202, .9);
  color: rgba(74, 50, 21, .92);
  font-size: 11px;
  box-shadow: 0 0 0 3px rgba(255, 243, 198, .16), 0 4px 8px rgba(31, 22, 13, .18);
}

.home-today-quick-actions .home-inspiration-hook span {
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  line-height: 1;
}

.home-today-quick-actions .home-inspiration-hook em {
  position: absolute;
  right: 8px;
  top: -8px;
  width: 26px;
  height: 17px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 247, 221, .9);
  color: rgba(128, 84, 32, .9);
  border: 1px solid rgba(255, 226, 157, .72);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  text-shadow: none;
  box-shadow: 0 4px 10px rgba(45, 29, 20, .12), 0 0 0 3px rgba(255, 236, 186, .12);
}

.home-today-quick-actions .home-inspiration-hook.special {
  min-width: 108px;
  max-width: none;
}

.home-today-quick-actions .home-inspiration-hook:active {
  transform: translateY(1px) scale(.97);
}

.home-today-copy {
  margin-top: 42px;
  padding-bottom: 0;
}

.home-today-copy h1 {
  margin: 0;
  color: rgba(255, 255, 255, .98);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 40px;
  line-height: 1.06;
  font-weight: 500;
  letter-spacing: 0;
  text-shadow: 0 4px 18px rgba(0, 0, 0, .34);
}

.home-hero-marker {
  display: inline-block;
  margin-left: 8px;
  color: rgba(255, 255, 255, .82);
  font-size: 17px;
  line-height: 1;
  font-weight: 500;
  vertical-align: 13%;
  text-shadow: 0 3px 14px rgba(0, 0, 0, .28);
}

.home-today-copy p {
  max-width: 286px;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, .94);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 20px;
  line-height: 1.42;
  font-weight: 400;
  text-shadow: 0 3px 16px rgba(0, 0, 0, .34);
}

.home-today-ask {
  width: 100%;
  min-height: 50px;
  margin-top: 22px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .86);
  text-align: left;
  box-shadow: 0 12px 22px rgba(8, 12, 8, .08), inset 0 1px 0 rgba(255, 255, 255, .12);
  backdrop-filter: blur(8px);
}

.home-today-ask::before {
  content: "";
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 0;
  background: center / contain no-repeat url("data:image/svg+xml;base64,PHN2ZyB0PSIxNzgwMDYxODA5OTE4IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ5OTkiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48cGF0aCBkPSJNMTMwLjM4NzExOCA5NjEuMzUzMTk1bC0xLjI4MDE1Ni0yNi4xNTU3MDZjLTAuMTUyNDczLTMuMTIwMDYxLTIuNjExNDc3LTc4LjQ5OTg2NSA5NS4xOTgxNzYtMjY5LjQwMTczIDIuODk4MDAzLTExLjgwMTc5IDMzLjM4NDM0MS0xMzEuNDQxNjM1IDEwOC4wMDM4MjktMjYyLjAyOTgzMiA0NS45OTk2Ni04MC41MDE0NTIgOTkuNTUxMzItMTQ5LjQ0ODc1NCAxNTkuMTY3MDkzLTIwNC45MjcyOTkgNzQuNzA5NTM5LTY5LjUyNTQ3IDE1OS4xODAzOTYtMTE3Ljk2MjY0NSAyNTEuMDY1MTA2LTE0My45Njc5MjZsMTEuMTQyNzgxLTMuMTUzODMtMS40MzY3MjIgMTEuNDkwNzA1Yy0wLjM0MTc4NCAyLjcyODEzNC0zNC41MDU4ODUgMjc0LjA2Mjg4OS02OC4wNzk1MzggMzg2LjA2Mzc1M2wtMC45MDc2NzMgMy4wMjQ4OTNMNjM1LjMxMzAwMiA0NzguNDE5MTg0bDQ0LjYxMDAxLTEzLjMxMjE5LTMuODk3NzczIDEzLjUwMTUwMmMtMC4xMTg3MDQgMC40MTAzNDYtMTIuMDM5MTk3IDQxLjUyOTg1OS0yOC4zNzIxODggODMuNDc1MTgtOS42NTY5NDEgMjQuODAwODQ5LTE4Ljk2ODAwNCA0NS4wOTUwNTgtMjcuNjc3MzYzIDYwLjMyMDgzLTExLjgyMzI4IDIwLjY3MTgwOS0yMi43MDUxMTggMzIuMjY0ODQ0LTMzLjI3MDc1NCAzNS40NDMyMzNsLTY5LjcwNjU5NSAyMC45NzE2MzcgNjMuNzEyMDY3IDExLjM1MzU4Mi04LjI0MDY4NSAxMC4xMTUzODJjLTAuNzgzODUzIDAuOTYxOTA4LTE5LjU4MzAxMSAyMy44MjY2NjItNTMuMTk2NTczIDQ2Ljg5MDk2LTMxLjA4NzAxOSAyMS4zMzA4MTgtODEuMjE0Njk2IDQ2Ljc1NjkwNy0xNDMuNDg0OTI1IDQ2Ljc1NjkwNy0zMC4zMDIxNDMgMC02MS4wNzYwMy01Ljk5MjQ4MS05MS40NjYxNzgtMTcuODEwNjQ0bC04LjM5NTIwNC0zLjI2NDM0NyAyMzUuOTA2ODcxLTQwMi4zMDE1NzZjLTEzLjc0MzAwMiAxNy4zMTIyOTQtMzAuMDY3ODA2IDM4LjYwNTI1LTQ4Ljk3NDQxMSA2NC40MjQyODgtNjMuODM5OTggODcuMTc0NDMyLTE3MS4wODA0MjMgMjQ1LjMxODIxOC0zMTkuNDMxMTcgNTAzLjY2MTA3OEwxMzAuMzg3MTE4IDk2MS4zNTMxOTV6TTczNS41MTkyMzggNzIuOTM5MjE5QzUzOS4xMTcxMDMgMTMyLjk5NTAxMyA0MTUuMjkwOTEzIDI4OS40ODQxMTQgMzQ1LjYzNjUwNiA0MTEuMzgyMzk1Yy03Ny4xMTczNzggMTM0Ljk1NzcxNS0xMDYuMzI3NjU0IDI1Ny42Mjk2MTUtMTA2LjYxMzE1NiAyNTguODUzNDg5bC0wLjIxNDg5NCAwLjkxNjg4Mi0wLjQyOTc4OSAwLjgzNzA2NGMtNTAuMDM2NjAzIDk3LjU0NDYxNy03Mi45MTI2MTMgMTYzLjcxMDU3Mi04My4yOTMwMzEgMjAyLjA0MTU3Ni0yLjQxMTkzMyA4LjkwNzg4LTQuMjgwNDkgMTYuNzY2ODcyLTUuNzI1Mzk4IDIzLjYxNzkwNyAxMzkuMDk5MDM1LTIzOS44ODg1NTYgMjQwLjM1MzEzNy0zODguODMyODE5IDMwMS43MTM2NDYtNDcyLjU1MzU5MyA2OS43NzQxMzMtOTUuMjAwMjIyIDEwMy43OTkwNjQtMTI4LjQyMDgzNSAxMDUuMjEzMjczLTEyOS43ODc5NzJsNDAuMzQxOC0zOS4wMDg0MzJMMjk4LjM1ODczNyA3NjQuOTUyMDgyYzI1LjgzMjM0MiA5LjA1MzE5IDUxLjgzODY0NSAxMy42MzU1NTUgNzcuNDI5NDg3IDEzLjYzNTU1NSA4OC44NDk1ODQgMCAxNTIuNzMyNTQzLTU1LjAyMzE3NCAxNzUuNTczNzYxLTc4LjA1MTY1N2wtMTAwLjM2ODk0Mi0xNy44ODYzNjkgMTMxLjI5MDE4NS0zOS40OTk2MTljNS44OTkzNi0xLjc3NDQxMyAyMi42ODA1NTktMTMuNzU5Mzc1IDUxLjAzMTI1Ny04Ni41NDQwNzUgMTAuNDQxODE2LTI2LjgwNjUyOSAxOS4wNTcwMzEtNTMuMjg3NjQ3IDIzLjg1MjI0NC02OC42ODk0MjlsLTE1Ny44MDYwOTUgNDcuMDkwNTA1IDE3MC45OTU0ODktOTMuMTU4NzI2QzY5OS4zMjI4NTEgMzQyLjc5MzI1IDcyOC42NTU5MjMgMTI1LjU2ODg4IDczNS41MTkyMzggNzIuOTM5MjE5eiIgZmlsbD0iI2ZmZmZmZiIgcC1pZD0iNTAwMCI+PC9wYXRoPjxwYXRoIGQ9Ik0xNTUuMjA2Mzg2IDk0Mi4xMjkzNjRsNjc2LjQwNTM5NyAwIDAgMTUuMzQ5NTkzLTY3Ni40MDUzOTcgMCAwLTE1LjM0OTU5M1oiIGZpbGw9IiNmZmZmZmYiIHAtaWQ9IjUwMDEiPjwvcGF0aD48L3N2Zz4K");
  opacity: .96;
  transform: translateY(-1px);
  filter: drop-shadow(0 3px 8px rgba(25, 20, 12, .18));
  box-shadow: none;
}

.home-today-ask span {
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 16px;
  font-weight: 400;
  flex: 1;
}

.home-today-ask i {
  display: none;
}

.home-today-hub {
  margin-top: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.home-screen .home-today-hub {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.home-today-hub .week-sign-head {
  margin-bottom: 12px;
  padding: 0 2px 0 8px;
  align-items: center;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.home-today-hub .week-sign-head b {
  position: relative;
  color: rgba(255, 255, 255, .96);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 500;
  text-shadow: 0 3px 14px rgba(0, 0, 0, .24);
}

.home-today-hub .week-sign-head b::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 4px;
  width: 4px;
  height: 19px;
  border-radius: 999px;
  background: rgba(255, 219, 149, .9);
  box-shadow: 0 0 12px rgba(255, 219, 149, .4);
}

.home-today-hub .week-sign-head span {
  max-width: 238px;
  margin-top: 4px;
  color: rgba(88, 84, 78, .58);
  font-size: 12px;
  line-height: 1.35;
}

.home-today-hub .week-slip-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
  overflow: visible;
  padding: 0 0 12px;
  background: transparent;
  border: 0;
  box-shadow: none;
  scroll-snap-type: none;
}

.home-today-hub .week-slip {
  width: 100%;
  min-height: 62px;
  padding: 8px 2px 7px;
  grid-template-rows: auto auto 18px;
  align-content: center;
  gap: 3px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
  backdrop-filter: blur(7px);
  transform: none;
}

.home-today-hub .week-slip em {
  display: none;
}

.home-today-hub .week-slip::before,
.home-today-hub .week-slip::after {
  display: none;
}

.home-today-hub .week-name {
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, .86);
}

.home-today-hub .week-slip b {
  color: rgba(255, 255, 255, .94);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.home-today-hub .week-slip i {
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .76);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .96);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

.home-today-hub .week-slip i.blank {
  width: 6px;
  height: 6px;
  margin-top: 6px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .72);
}

.home-today-hub .week-slip.selected,
.home-today-hub .week-slip.today {
  border-color: rgba(54, 47, 32, .94);
  background: rgba(50, 45, 31, .94);
  color: #fff;
  box-shadow: 0 10px 18px rgba(17, 18, 12, .2), inset 0 1px 0 rgba(255, 255, 255, .08);
  transform: none;
}

.home-today-hub .week-slip.selected .week-name,
.home-today-hub .week-slip.today .week-name,
.home-today-hub .week-slip.selected b,
.home-today-hub .week-slip.today b {
  color: rgba(255, 255, 255, .96);
}

.home-today-hub .week-slip.selected i,
.home-today-hub .week-slip.today i {
  border-color: rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .92);
}

.home-today-hub .week-slip.selected i.blank,
.home-today-hub .week-slip.today i.blank {
  background: rgba(255, 255, 255, .24);
}

.home-today-hub .week-peek {
  margin-top: 0;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 22px;
  background: rgba(255, 249, 235, .6);
  box-shadow: 0 20px 38px rgba(28, 23, 14, .12), inset 0 1px 0 rgba(255, 255, 255, .42);
  backdrop-filter: blur(16px);
}

.home-today-hub .week-peek::before {
  display: none;
}

.home-today-hub .week-daily-card {
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.home-today-hub .week-daily-card h2 {
  font-size: 20px;
  line-height: 1.28;
}

.home-today-hub .week-daily-card p {
  font-size: 14px;
  line-height: 1.45;
}

.home-today-hub .week-seal-button {
  width: auto;
  min-width: 0;
  height: 38px;
  min-height: 38px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: rgba(49, 45, 32, .95);
  color: #fff;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 18px;
  font-weight: 500;
  transform: none;
  box-shadow: 0 9px 16px rgba(22, 22, 15, .14), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.daily-guide-cover {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  min-height: 0;
  padding: 0;
  align-self: center;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background:
    radial-gradient(circle at 38% 28%, rgba(255, 255, 255, .65), transparent 26%),
    linear-gradient(135deg, #88a27e, #e4d2a8);
  color: #fff;
  box-shadow: 0 12px 26px rgba(35, 28, 20, .12);
}

.week-peek .daily-guide-cover {
  min-height: 0;
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background:
    radial-gradient(circle at 38% 28%, rgba(255, 255, 255, .65), transparent 26%),
    linear-gradient(135deg, #88a27e, #e4d2a8);
  color: #fff;
  font-size: inherit;
  font-weight: inherit;
}

.daily-guide-cover img {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  object-fit: cover;
}

.daily-guide-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(19, 23, 17, .02), rgba(19, 23, 17, .42));
  pointer-events: none;
}

.daily-guide-cover span {
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 14px;
  z-index: 1;
  color: rgba(255, 255, 255, .92);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .34);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.daily-guide-cover i {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .88);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 44px;
  font-style: normal;
}

.daily-guide-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 3px 0;
}

.daily-guide-copy small {
  margin-bottom: 5px;
  color: rgba(105, 105, 100, .66);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
}

.daily-guide-copy b {
  display: block;
  margin-bottom: 10px;
  color: rgba(45, 42, 32, .92);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 24px;
  line-height: 1;
  font-weight: 500;
}

.daily-guide-copy h2 {
  display: -webkit-box;
  margin: 0 0 7px;
  overflow: hidden;
  color: #161512;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.daily-guide-copy p {
  display: -webkit-box;
  overflow: hidden;
  color: rgba(45, 42, 32, .78);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 19px;
  line-height: 1.72;
  font-weight: 400;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.home-today-hub .daily-guide-copy p {
  color: rgba(45, 42, 32, .76);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 13.5px;
  line-height: 1.5;
  font-weight: 400;
}

.home-today-hub .daily-guide-card {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .22s ease, box-shadow .22s ease;
}

.home-today-hub .daily-guide-card:active {
  transform: translateY(1px) scale(.992);
}

.home-today-hub .week-evening-ribbon:not(.collected) {
  width: 100%;
  min-height: 46px;
  justify-self: stretch;
  margin-top: 12px;
  padding: 8px 9px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(168, 68, 62, .12);
  border-radius: 16px;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 241, 191, .54), transparent 42%),
    linear-gradient(135deg, rgba(255, 253, 245, .42), rgba(255, 236, 202, .28));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .42),
    0 8px 16px rgba(68, 47, 28, .07);
}

.home-today-hub .week-evening-ribbon:not(.collected)::after {
  content: "收";
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(168, 68, 62, .2);
  border-radius: 50%;
  color: rgba(146, 58, 52, .8);
  background: rgba(255, 250, 238, .42);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 12px;
  font-weight: 700;
}

.home-today-hub .week-evening-ribbon:not(.collected) i {
  width: 28px;
  height: 28px;
  box-shadow: 0 0 18px rgba(224, 178, 92, .18);
}

.home-today-hub .week-evening-ribbon:not(.collected) span {
  overflow: hidden;
}

.home-today-hub .week-evening-ribbon:not(.collected) b {
  overflow: hidden;
  color: rgba(47, 35, 28, .88);
  font-size: 12.5px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-today-hub .week-evening-ribbon:not(.collected) em {
  margin-top: 3px;
  color: rgba(124, 89, 63, .72);
  font-size: 10.5px;
  line-height: 1.1;
}

.home-today-hub .week-evening-ribbon.collected {
  display: none;
}

.home-today-hub .week-archive-button {
  min-height: 30px;
  padding: 0 9px 0 11px;
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .07);
  box-shadow: none;
  color: rgba(255, 255, 255, .94);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 14px;
  font-weight: 400;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  backdrop-filter: blur(9px);
}

.home-scroll-cue {
  width: 28px;
  height: 22px;
  margin: 14px auto 0;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .16));
}

.home-scroll-cue::before {
  content: "";
  width: 13px;
  height: 13px;
  border-right: 2.5px solid rgba(255, 255, 255, .52);
  border-bottom: 2.5px solid rgba(255, 255, 255, .52);
  border-radius: 2px;
  transform: rotate(45deg);
}

/* 问问今天 */
.ask-screen {
  position: relative;
  min-height: 100svh;
  padding: max(20px, env(safe-area-inset-top)) 20px max(18px, env(safe-area-inset-bottom));
  overflow: hidden;
  isolation: isolate;
  color: rgba(255, 255, 255, .96);
  background: #d5c4a4;
}

.ask-screen::before {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: -2;
  width: min(100%, 430px);
  transform: translateX(-50%) scale(1.055);
  transform-origin: center top;
  background: var(--ask-bg, url("/images/mine-bg.png")) center top / cover no-repeat;
  filter: saturate(1.04);
  pointer-events: none;
}

.ask-screen::after {
  content: "";
  position: fixed;
  left: 50%;
  top: 30%;
  bottom: 0;
  z-index: -1;
  width: min(100%, 430px);
  transform: translateX(-50%);
  background:
    linear-gradient(180deg, rgba(8, 9, 7, 0) 0%, rgba(8, 9, 7, .08) 24%, rgba(8, 9, 7, .26) 100%);
  backdrop-filter: blur(4px);
  mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 100%);
  pointer-events: none;
}

.ask-floating-back {
  position: fixed;
  left: max(20px, calc(50% - 215px + 20px));
  top: max(22px, calc(env(safe-area-inset-top) + 12px));
  z-index: 8;
  min-width: 62px;
  height: 38px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, .46);
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .94);
  font-size: 13px;
  font-weight: 400;
  box-shadow: 0 8px 18px rgba(8, 10, 7, .18), inset 0 1px 0 rgba(255, 255, 255, .18);
  backdrop-filter: blur(12px);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .28);
  transition: opacity .2s ease, transform .22s ease;
}

.ask-history-toggle {
  position: fixed;
  right: max(20px, calc(50% - 215px + 20px));
  top: max(22px, calc(env(safe-area-inset-top) + 12px));
  z-index: 8;
  width: 42px;
  height: 42px;
  min-height: 42px;
  display: grid;
  place-items: center;
  gap: 3px;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, .46);
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  box-shadow: 0 8px 18px rgba(8, 10, 7, .18), inset 0 1px 0 rgba(255, 255, 255, .18);
  backdrop-filter: blur(12px);
  transition: opacity .2s ease, transform .22s ease;
}

.ask-question-screen.ask-input-mode .ask-floating-back,
.ask-question-screen.ask-input-mode .ask-history-toggle {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px) scale(.94);
}

.ask-history-toggle span {
  width: 15px;
  height: 1.5px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
}

.ask-history-layer {
  position: fixed;
  inset: 0 auto 0 50%;
  z-index: 24;
  width: min(100%, 430px);
  transform: translateX(-50%);
  pointer-events: none;
}

.ask-history-layer.open {
  pointer-events: auto;
}

.ask-history-layer:not(.open) .ask-history-mask,
.ask-history-layer:not(.open) .ask-history-drawer {
  pointer-events: none;
}

.ask-history-mask {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(4, 6, 4, 0);
  opacity: 0;
  transition: opacity .24s ease, background .24s ease;
}

.ask-history-layer.open .ask-history-mask {
  background: rgba(4, 6, 4, .18);
  opacity: 1;
}

.ask-history-drawer {
  position: absolute;
  top: 0;
  right: 0;
  width: min(84%, 326px);
  height: 100%;
  padding: max(22px, calc(env(safe-area-inset-top) + 16px)) 14px max(18px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 18px;
  border-left: 1px solid rgba(255, 255, 255, .18);
  background: rgba(13, 18, 14, .34);
  box-shadow: -18px 0 40px rgba(4, 7, 5, .22), inset 1px 0 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(18px);
  transform: translateX(105%);
  transition: transform .3s cubic-bezier(.18, .82, .2, 1);
}

.ask-history-layer.open .ask-history-drawer {
  transform: translateX(0);
}

.ask-history-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ask-history-head small {
  display: block;
  margin-bottom: 6px;
  color: rgba(255, 255, 255, .62);
  font-size: 12px;
  font-weight: 400;
}

.ask-history-head h2 {
  margin: 0;
  color: rgba(255, 255, 255, .96);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 500;
  text-shadow: 0 3px 14px rgba(0, 0, 0, .3);
}

.ask-history-head button {
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .82);
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
}

.ask-history-groups {
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
  scrollbar-width: none;
}

.ask-history-groups::-webkit-scrollbar {
  display: none;
}

.ask-history-group + .ask-history-group {
  margin-top: 18px;
}

.ask-history-group h3 {
  margin: 0 0 8px;
  color: rgba(255, 255, 255, .58);
  font-size: 12px;
  font-weight: 400;
}

.ask-history-list {
  display: grid;
  gap: 8px;
}

.ask-history-item {
  position: relative;
  min-height: 66px;
  overflow: hidden;
  border-radius: 20px;
  touch-action: pan-y;
}

.ask-history-item-main {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 66px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 20px;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .9);
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(8px);
  transition: transform .22s ease, background .18s ease, border-color .18s ease;
}

.ask-history-item.active .ask-history-item-main {
  border-color: rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .14);
}

.ask-history-item.swiped .ask-history-item-main {
  transform: translateX(-76px) scale(.985);
}

.ask-history-item-main span {
  min-width: 0;
}

.ask-history-item-main b {
  display: block;
  overflow: hidden;
  color: rgba(255, 255, 255, .94);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 9px rgba(0, 0, 0, .24);
}

.ask-history-item-main em {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: rgba(255, 255, 255, .6);
  font-size: 12px;
  font-style: normal;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ask-history-item-main i {
  color: rgba(255, 255, 255, .5);
  font-size: 11px;
  font-style: normal;
}

.ask-history-delete {
  position: absolute;
  top: 50%;
  right: 6px;
  z-index: 1;
  width: 62px;
  height: 46px;
  min-height: 0;
  display: inline-grid;
  grid-template-columns: 13px auto;
  place-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background:
    linear-gradient(145deg, rgba(255, 118, 109, .86), rgba(156, 39, 46, .82));
  color: rgba(255, 255, 255, .96);
  font-size: 12px;
  font-weight: 500;
  opacity: 0;
  box-shadow:
    0 10px 22px rgba(96, 18, 20, .26),
    inset 0 1px 0 rgba(255, 255, 255, .28);
  backdrop-filter: blur(10px);
  transform: translate(12px, -50%) scale(.88);
  transition: opacity .2s ease, transform .22s cubic-bezier(.18, .82, .24, 1.08);
}

.ask-history-delete span {
  position: relative;
  width: 12px;
  height: 13px;
  border: 1.4px solid rgba(255, 255, 255, .9);
  border-top: 0;
  border-radius: 2px 2px 4px 4px;
}

.ask-history-delete span::before,
.ask-history-delete span::after {
  content: "";
  position: absolute;
  left: 50%;
  background: rgba(255, 255, 255, .9);
  transform: translateX(-50%);
}

.ask-history-delete span::before {
  top: -4px;
  width: 13px;
  height: 1.4px;
  border-radius: 99px;
}

.ask-history-delete span::after {
  top: -7px;
  width: 6px;
  height: 1.4px;
  border-radius: 99px;
}

.ask-history-delete b {
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

.ask-history-item.swiped .ask-history-delete {
  opacity: 1;
  transform: translate(0, -50%) scale(1);
}

.ask-history-empty {
  align-self: start;
  margin-top: 28px;
  padding: 18px 14px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 22px;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .74);
  backdrop-filter: blur(8px);
}

.ask-history-empty b {
  display: block;
  color: rgba(255, 255, 255, .92);
  font-size: 14px;
  font-weight: 500;
}

.ask-history-empty p {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
}

.ask-shell {
  position: relative;
  z-index: 1;
  width: min(100%, 430px);
  min-height: calc(100svh - max(38px, env(safe-area-inset-bottom)));
  margin: 0 auto;
  padding-top: 56px;
}

.ask-question-shell {
  min-height: calc(100svh - 34px);
  display: grid;
  grid-template-rows: minmax(188px, 1fr) auto auto;
  align-content: end;
  gap: 14px;
  transform: translate3d(0, 0, 0);
  transition: transform .28s cubic-bezier(.2, .74, .22, 1);
  will-change: transform;
}

.ask-question-screen.ask-input-mode .ask-question-shell {
  min-height: auto;
  grid-template-rows: auto auto 0;
  align-content: start;
  padding-top: clamp(28px, 5svh, 48px);
  transform: translate3d(0, calc(-1 * var(--ask-keyboard-lift, 0px)), 0);
}

.ask-question-copy {
  align-self: end;
  max-width: 324px;
  text-align: left;
}

.ask-question-copy small,
.ask-chat-head small {
  display: block;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, .82);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .32);
}

.ask-question-copy h1,
.ask-chat-head h1 {
  margin: 0;
  color: rgba(255, 255, 255, .98);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 32px;
  line-height: 1.16;
  font-weight: 500;
  letter-spacing: 0;
  text-shadow: 0 5px 20px rgba(0, 0, 0, .35);
}

.ask-question-copy p,
.ask-chat-head p {
  max-width: 286px;
  margin: 12px 0 0;
  color: rgba(255, 255, 255, .86);
  font-size: 14px;
  line-height: 1.62;
  text-shadow: 0 3px 14px rgba(0, 0, 0, .32);
}

.ask-question-card {
  position: relative;
  display: block;
  padding: 14px 14px 12px;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 26px;
  background: rgba(255, 255, 255, .1);
  box-shadow: 0 14px 28px rgba(8, 11, 8, .12), inset 0 1px 0 rgba(255, 255, 255, .14);
  backdrop-filter: blur(10px);
}

.ask-question-card label {
  display: block;
  margin-bottom: 9px;
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
  font-weight: 400;
  text-shadow: 0 2px 9px rgba(0, 0, 0, .28);
}

.ask-question-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: end;
  gap: 10px;
}

.ask-question-card textarea {
  width: 100%;
  min-height: 86px;
  padding: 0;
  border: 0;
  resize: none;
  outline: none;
  background: transparent;
  color: rgba(255, 255, 255, .96);
  font: inherit;
  font-size: 16px;
  line-height: 1.55;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .22);
}

.ask-question-card textarea::placeholder,
.ask-chat-composer textarea::placeholder {
  color: rgba(255, 255, 255, .54);
}

.ask-submit-orb {
  width: 42px;
  height: 42px;
  min-height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 50%;
  background: rgba(255, 255, 255, .78);
  color: rgba(42, 39, 31, .86);
  box-shadow: 0 8px 16px rgba(7, 9, 7, .16), inset 0 1px 0 rgba(255, 255, 255, .52);
  backdrop-filter: blur(8px);
  transition: transform .18s ease, background .18s ease;
}

.ask-submit-orb:active {
  transform: scale(.94);
  background: rgba(255, 255, 255, .9);
}

.ask-submit-orb i {
  display: block;
  transform: translateY(-1px);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  font-style: normal;
  line-height: 1;
}

.ask-primary-action {
  display: none;
}

.ask-primary-action i {
  display: none;
}

.ask-suggestion-panel {
  margin-top: 0;
  max-height: 280px;
  overflow: hidden;
  opacity: 1;
  transform: translateY(0);
  transition:
    max-height .34s cubic-bezier(.2, .74, .22, 1),
    opacity .2s ease,
    transform .26s ease,
    margin-top .26s ease;
}

.ask-question-screen.ask-input-mode .ask-suggestion-panel {
  max-height: 0;
  margin-top: -8px;
  opacity: 0;
  transform: translateY(12px) scale(.985);
  pointer-events: none;
}

.ask-question-screen.ask-suggestions-returning .ask-suggestion-head {
  animation: askSuggestionHeadIn .24s ease-out both;
}

.ask-question-screen.ask-suggestions-returning .ask-suggestion-item {
  animation: askSuggestionItemIn .42s cubic-bezier(.18, .82, .24, 1) both;
}

.ask-question-screen.ask-suggestions-returning .ask-suggestion-item:nth-child(1) { animation-delay: .04s; }
.ask-question-screen.ask-suggestions-returning .ask-suggestion-item:nth-child(2) { animation-delay: .12s; }
.ask-question-screen.ask-suggestions-returning .ask-suggestion-item:nth-child(3) { animation-delay: .2s; }
.ask-question-screen.ask-suggestions-returning .ask-suggestion-item:nth-child(4) { animation-delay: .28s; }

@keyframes askSuggestionHeadIn {
  from {
    opacity: 0;
    transform: translateY(7px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes askSuggestionItemIn {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(.97);
  }

  70% {
    opacity: 1;
    transform: translateY(-2px) scale(1.006);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.ask-suggestion-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px 8px;
}

.ask-suggestion-head b {
  color: rgba(255, 255, 255, .8);
  font-size: 13px;
  font-weight: 400;
  text-shadow: 0 2px 9px rgba(0, 0, 0, .3);
}

.ask-suggestion-head button {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .82);
  font-size: 12px;
  font-weight: 400;
  backdrop-filter: blur(8px);
}

.ask-suggestion-list {
  display: grid;
  gap: 8px;
}

.ask-suggestion-item {
  min-height: 43px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .9);
  text-align: left;
  box-shadow: 0 8px 18px rgba(5, 8, 5, .08), inset 0 1px 0 rgba(255, 255, 255, .1);
  backdrop-filter: blur(7px);
}

.ask-suggestion-item i {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, .82);
  font-size: 14px;
  font-style: normal;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .28));
}

.ask-suggestion-item span {
  min-width: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .28);
}

.ask-suggestion-item em {
  display: none;
}

.ask-chat-screen {
  padding-bottom: max(14px, env(safe-area-inset-bottom));
}

.ask-chat-shell {
  position: relative;
  z-index: 1;
  width: min(100%, 430px);
  height: calc(100svh - max(34px, env(safe-area-inset-bottom)));
  margin: 0 auto;
  padding-top: 58px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
}

.ask-chat-head {
  max-width: 330px;
  text-align: left;
}

.ask-chat-head h1 {
  font-size: 25px;
  line-height: 1.18;
}

.ask-chat-list {
  min-height: 0;
  overflow: auto;
  padding: 4px 0 8px;
  scrollbar-width: none;
  mask-image: linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 16px), transparent 100%);
}

.ask-chat-list::-webkit-scrollbar {
  display: none;
}

.ask-message {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  margin-bottom: 10px;
  align-items: start;
}

.ask-message.user {
  grid-template-columns: minmax(0, 1fr) 28px;
}

.ask-message.user .ask-message-avatar {
  grid-column: 2;
}

.ask-message.user .ask-message-bubble {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  max-width: 78%;
  border-color: rgba(255, 255, 255, .42);
  background: rgba(255, 255, 255, .86);
  color: rgba(45, 41, 33, .86);
  box-shadow: 0 10px 20px rgba(5, 8, 5, .12), inset 0 1px 0 rgba(255, 255, 255, .58);
}

.ask-message-avatar {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .88);
  font-size: 12px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
  backdrop-filter: blur(8px);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .28);
}

.ask-message-bubble {
  max-width: 96%;
  padding: 11px 13px;
  border-radius: 17px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(15, 18, 12, .28);
  color: rgba(255, 255, 255, .92);
  box-shadow: 0 12px 24px rgba(5, 8, 5, .16), inset 0 1px 0 rgba(255, 255, 255, .12);
  backdrop-filter: blur(11px);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .24);
}

.ask-message-bubble p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.68;
}

.ask-message-bubble p + p {
  margin-top: 8px;
}

.ask-message.pending .ask-message-bubble,
.ask-message.streaming .ask-message-bubble:has(.ask-stream-dots) {
  width: 78px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.ask-stream-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.ask-message.pending i,
.ask-stream-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .58);
  animation: askTyping 1.08s ease-in-out infinite;
}

.ask-message.pending i:nth-child(2),
.ask-stream-dots i:nth-child(2) { animation-delay: .14s; }
.ask-message.pending i:nth-child(3),
.ask-stream-dots i:nth-child(3) { animation-delay: .28s; }

.ask-chat-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 24px;
  background: rgba(12, 14, 10, .2);
  box-shadow: 0 16px 28px rgba(5, 8, 5, .16), inset 0 1px 0 rgba(255, 255, 255, .1);
  backdrop-filter: blur(12px);
}

.ask-chat-composer textarea {
  width: 100%;
  min-height: 38px;
  max-height: 88px;
  padding: 9px 4px 7px 9px;
  border: 0;
  resize: none;
  outline: none;
  background: transparent;
  color: rgba(255, 255, 255, .95);
  font: inherit;
  font-size: 13.5px;
  line-height: 1.45;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .22);
}

.ask-chat-composer button {
  width: 44px;
  height: 44px;
  align-self: end;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .86);
  color: rgba(45, 41, 33, .86);
  font-size: 12px;
  font-weight: 500;
  box-shadow: 0 8px 16px rgba(5, 8, 5, .16), inset 0 1px 0 rgba(255, 255, 255, .52);
}

.ask-chat-composer button:disabled {
  opacity: .48;
}

.ask-empty-chat {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 220px;
  color: rgba(255, 255, 255, .72);
  text-align: center;
}

.ask-empty-chat span {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .34), transparent 68%);
}

.ask-empty-chat p {
  max-width: 220px;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

@keyframes askTyping {
  0%, 100% {
    transform: translateY(0);
    opacity: .38;
  }
  45% {
    transform: translateY(-4px);
    opacity: .9;
  }
}

.home-hub-tools {
  display: grid;
  grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
  gap: 8px;
  margin-top: 10px;
}

.home-hub-tools .week-luck-jar,
.home-hub-tools .home-word-charm {
  min-height: 58px;
  margin: 0;
  border-color: rgba(184, 137, 62, .12);
  box-shadow: none;
}

.home-hub-tools .week-luck-jar {
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 8px;
  padding: 8px 9px;
  background:
    radial-gradient(circle at 22% 22%, rgba(255, 255, 255, .7), transparent 30%),
    linear-gradient(135deg, rgba(255, 250, 239, .62), rgba(255, 238, 200, .34));
}

.home-hub-tools .week-luck-jar::after {
  display: none;
}

.home-hub-tools .jar-visual {
  width: 42px;
  height: 42px;
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, .34),
    0 7px 14px rgba(75, 42, 22, .075);
}

.home-hub-tools .jar-glow {
  inset: 9px;
  border-radius: 14px 14px 16px 16px;
  filter: blur(1.4px);
  opacity: .56;
  animation: jarGlow 3.4s ease-in-out infinite;
}

.home-hub-tools .jar-gooey {
  width: 14px;
  height: 14px;
  filter: blur(1px);
  opacity: .42;
}

.home-hub-tools .jar-gooey.g1 { left: 10px; top: 18px; }
.home-hub-tools .jar-gooey.g2 { right: 9px; top: 23px; width: 12px; height: 12px; }
.home-hub-tools .jar-gooey.g3 { left: 19px; bottom: 7px; width: 12px; height: 12px; }

.home-hub-tools .jar-spark {
  width: 3px;
  height: 3px;
  background: rgba(212, 159, 61, .78);
  box-shadow: 0 0 5px rgba(255, 219, 122, .54);
}

.home-hub-tools .jar-spark.s1 { left: 12px; top: 18px; }
.home-hub-tools .jar-spark.s2 { right: 12px; top: 23px; }
.home-hub-tools .jar-spark.s3 { left: 20px; bottom: 11px; }

.home-hub-tools .jar-burst {
  display: none;
}

.home-hub-tools .jar-copy strong {
  font-size: 12px;
  font-family: inherit;
  line-height: 1.25;
}

.home-hub-tools .jar-copy span {
  margin-top: 2px;
  color: rgba(122, 103, 80, .78);
  font-size: 9px;
  line-height: 1.28;
  font-weight: 800;
}

.home-hub-tools .home-word-charm {
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 7px;
  padding: 8px 9px;
  border-color: rgba(168, 68, 62, .1);
  background:
    radial-gradient(circle at 90% 30%, rgba(255, 226, 151, .22), transparent 32%),
    linear-gradient(135deg, rgba(255, 252, 244, .62), rgba(255, 240, 214, .36));
}

.home-hub-tools .home-word-charm::after {
  display: none;
}

.home-hub-tools .word-charm-drawer {
  width: 46px;
  height: 34px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.home-hub-tools .word-charm-drawer::before,
.home-hub-tools .word-charm-drawer::after {
  display: none;
}

.home-hub-tools .word-charm-drawer i {
  width: 19px;
  height: 19px;
  border-radius: 6px;
  font-size: 12px;
}

.home-hub-tools .word-charm-drawer .slot-1 { left: 4px; top: 10px; }
.home-hub-tools .word-charm-drawer .slot-2 { left: 17px; top: 7px; }
.home-hub-tools .word-charm-drawer .slot-3 { left: 29px; top: 12px; }
.home-hub-tools .word-charm-drawer .slot-4,
.home-hub-tools .word-charm-drawer .slot-5 {
  display: none;
}

.home-hub-tools .word-charm-copy b {
  font-size: 12px;
  font-family: inherit;
}

.home-hub-tools .word-charm-copy span {
  margin-top: 2px;
  font-size: 10px;
  line-height: 1.25;
}

.home-hub-tools .home-word-charm em {
  display: none;
}

.home-fortune-strip {
  margin-top: 10px;
  padding: 12px 13px;
  border-color: transparent;
  background:
    radial-gradient(circle at 96% 20%, rgba(255, 231, 151, .2), transparent 28%),
    linear-gradient(135deg, rgba(255, 252, 244, .68), rgba(255, 246, 225, .42));
  box-shadow: 0 8px 18px rgba(75, 42, 22, .045);
}

.home-fortune-strip::before,
.home-fortune-strip::after {
  display: none;
}

.home-fortune-strip .mood-card-head {
  margin-bottom: 7px;
}

.home-fortune-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.home-fortune-line .mood-score-title span:first-child {
  font-size: 13px;
}

.home-fortune-line .mood-score-title strong {
  font-size: 31px;
}

.home-fortune-line .mood-score-title em {
  font-size: 12px;
}

.home-fortune-line .mood-summary,
.home-fortune-line p {
  margin: 0;
  color: rgba(91, 72, 58, .76);
  font-size: 12px;
  line-height: 1.5;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.home-fortune-line .profile-needed-orb {
  width: 46px;
  height: 46px;
}

.home-scene-panel {
  margin-top: 10px;
}

.home-scene-panel .section-heading {
  margin-bottom: 8px;
}

.home-scene-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 156px;
  grid-template-columns: none;
  gap: 8px;
  overflow-x: auto;
  overflow-y: visible;
  padding: 2px 2px 8px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
}

.home-scene-row::-webkit-scrollbar {
  display: none;
}

.home-scene-row .scene-button {
  scroll-snap-align: start;
  min-height: 82px;
  padding: 12px 52px 11px 11px;
}

.home-scene-row .scene-button-copy b {
  font-size: 13px;
}

.home-scene-row .scene-button-copy span {
  margin-top: 5px;
  font-size: 10px;
  line-height: 1.35;
}

.home-scene-row .scene-cover {
  right: -8px;
  width: 50px;
  height: 68px;
  border-radius: 8px;
}

.home-screen .dengchang-entry {
  margin-top: 8px;
  padding: 10px 12px;
  border-style: solid;
  background: rgba(255, 250, 240, .34);
}

.inspiration-screen {
  isolation: isolate;
  background:
    radial-gradient(circle at 16% 8%, rgba(255, 255, 255, .86), transparent 24%),
    radial-gradient(circle at 82% 28%, rgba(243, 205, 123, .36), transparent 28%),
    linear-gradient(180deg, #f7ead4 0%, #ecd0a5 100%);
  padding-top: max(16px, env(safe-area-inset-top));
  padding-bottom: max(26px, calc(env(safe-area-inset-bottom) + 18px));
}

.inspiration-screen::before {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: -1;
  width: min(100%, 430px);
  transform: translateX(-50%);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(219, 168, 91, .2)),
    url("/images/mine-bg.png") center top / cover no-repeat;
  opacity: .74;
  pointer-events: none;
}

.inspiration-back-button {
  margin: 0 0 10px;
}

.inspiration-hero {
  position: relative;
  min-height: 0;
  padding: 64px 17px 17px;
  border: 1px solid rgba(255, 255, 255, .58);
  border-radius: 30px;
  background:
    radial-gradient(circle at 88% 10%, rgba(255, 225, 139, .58), transparent 30%),
    radial-gradient(circle at 8% 8%, rgba(255, 255, 255, .95), transparent 32%),
    linear-gradient(154deg, rgba(255, 253, 247, .94), rgba(255, 238, 202, .7));
  box-shadow:
    0 24px 46px rgba(95, 61, 29, .13),
    inset 0 1px 0 rgba(255, 255, 255, .72);
  overflow: hidden;
}

.inspiration-growth-hero {
  display: block;
}

.inspiration-hero-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.inspiration-hero small {
  color: rgba(116, 79, 48, .62);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .18em;
}

.inspiration-hero h1 {
  margin: 10px 0 0;
  max-width: 292px;
  color: #302116;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: clamp(30px, 8.6vw, 38px);
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: 0;
}

.inspiration-hero p {
  max-width: 296px;
  margin: 12px 0 0;
  color: rgba(76, 55, 39, .76);
  font-size: 13px;
  line-height: 1.62;
}

.inspiration-hero-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 17px;
}

.inspiration-primary-cta,
.inspiration-ghost-cta {
  min-height: 38px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
}

.inspiration-primary-cta {
  padding: 0 17px;
  border: 1px solid rgba(65, 45, 28, .82);
  background: #3b2c21;
  color: #fff8ea;
  box-shadow: 0 12px 24px rgba(58, 42, 29, .22);
}

.inspiration-ghost-cta {
  padding: 0 14px;
  border: 1px solid rgba(95, 61, 29, .18);
  background: rgba(255, 255, 255, .46);
  color: rgba(73, 48, 31, .82);
}

.inspiration-focus-action {
  width: 100%;
  min-height: 124px;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  gap: 5px 12px;
  align-items: center;
  margin-top: 18px;
  padding: 13px 13px;
  border: 1px solid rgba(64, 42, 28, .18);
  border-radius: 22px;
  background:
    radial-gradient(circle at 90% 12%, rgba(255, 228, 145, .48), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, .74), rgba(255, 246, 226, .56));
  color: #332317;
  text-align: left;
  box-shadow:
    0 18px 34px rgba(69, 43, 23, .14),
    inset 0 1px 0 rgba(255, 255, 255, .84);
  backdrop-filter: blur(14px);
}

.inspiration-focus-action > .inspiration-commission-seal {
  grid-row: 1 / 3;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(142, 87, 44, .24);
  border-radius: 50%;
  background: rgba(255, 252, 244, .72);
  color: #9b5a32;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 14px;
  font-weight: 900;
}

.inspiration-focus-action > b {
  min-width: 0;
  color: #2f2117;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 18px;
  line-height: 1.24;
}

.inspiration-focus-action > small {
  min-width: 0;
  color: rgba(77, 55, 38, .68);
  font-size: 11px;
  line-height: 1.45;
}

.inspiration-focus-action > i {
  grid-column: 2;
  grid-row: 3;
  justify-self: start;
  align-self: end;
  margin-top: 6px;
  min-width: 0;
  padding: 7px 12px;
  border-radius: 999px;
  background: #3b2c21;
  color: #fff8ea;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
  text-align: center;
  box-shadow: 0 12px 22px rgba(58, 42, 29, .22);
}

.inspiration-quiet-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding-left: 2px;
}

.inspiration-quiet-actions button {
  border: 0;
  background: transparent;
  color: rgba(85, 59, 40, .62);
  font-size: 12px;
  font-weight: 850;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.inspiration-card-stack {
  position: relative;
  z-index: 1;
  min-height: 158px;
  align-self: end;
}

.inspiration-preview-card {
  position: absolute;
  right: 0;
  bottom: 6px;
  width: 88px;
  height: 126px;
  padding: 11px 9px;
  border: 1px solid rgba(255, 250, 238, .88);
  border-radius: 15px;
  background:
    radial-gradient(circle at 78% 18%, rgba(255, 230, 145, .44), transparent 34%),
    linear-gradient(160deg, rgba(255, 253, 246, .94), rgba(239, 213, 169, .74));
  box-shadow:
    0 16px 30px rgba(87, 53, 25, .16),
    inset 0 1px 0 rgba(255, 255, 255, .78);
  transform-origin: 50% 100%;
}

.inspiration-preview-card:nth-child(1) {
  transform: translate(-54px, 2px) rotate(-12deg);
}

.inspiration-preview-card:nth-child(2) {
  z-index: 2;
  transform: translate(-18px, -14px) rotate(2deg);
}

.inspiration-preview-card:nth-child(3) {
  transform: translate(12px, 12px) rotate(12deg) scale(.94);
}

.inspiration-preview-card em,
.inspiration-preview-card b,
.inspiration-preview-card i {
  display: block;
  font-style: normal;
}

.inspiration-preview-card em {
  color: rgba(126, 82, 45, .58);
  font-size: 10px;
  font-weight: 950;
}

.inspiration-preview-card b {
  margin-top: 12px;
  color: #382719;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 17px;
  line-height: 1.18;
}

.inspiration-preview-card i {
  position: absolute;
  left: 9px;
  bottom: 10px;
  color: rgba(126, 82, 45, .66);
  font-size: 10px;
  font-weight: 900;
}

.inspiration-proof-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 0;
}

.inspiration-proof-strip span {
  min-width: 0;
  min-height: 56px;
  padding: 9px 8px;
  border: 1px solid rgba(255, 255, 255, .44);
  border-radius: 16px;
  background: rgba(255, 250, 238, .42);
  box-shadow: 0 10px 20px rgba(90, 58, 28, .07);
  backdrop-filter: blur(10px);
}

.inspiration-proof-strip b,
.inspiration-proof-strip small {
  display: block;
  min-width: 0;
}

.inspiration-proof-strip b {
  color: #382719;
  font-size: 12px;
  line-height: 1.25;
}

.inspiration-proof-strip small {
  margin-top: 4px;
  color: rgba(84, 60, 41, .62);
  font-size: 10px;
  font-weight: 800;
}

.inspiration-today-hook {
  position: relative;
  width: 100%;
  min-height: 86px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 4px 12px;
  align-items: center;
  margin-top: 12px;
  padding: 13px 14px;
  border: 1px solid rgba(84, 58, 37, .12);
  border-radius: 20px;
  background:
    radial-gradient(circle at 90% 18%, rgba(255, 230, 145, .34), transparent 34%),
    rgba(255, 251, 242, .58);
  color: #3b2c21;
  text-align: left;
  box-shadow: 0 14px 26px rgba(88, 58, 29, .09);
  backdrop-filter: blur(14px);
}

.inspiration-today-hook span {
  grid-row: 1 / 3;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(153, 92, 43, .22);
  border-radius: 50%;
  background: rgba(255, 255, 255, .48);
  color: #9b5a32;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 14px;
  font-weight: 900;
}

.inspiration-today-hook b {
  min-width: 0;
  color: #302116;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 17px;
  line-height: 1.25;
}

.inspiration-today-hook small {
  min-width: 0;
  color: rgba(76, 55, 39, .66);
  font-size: 11px;
  line-height: 1.45;
}

.inspiration-today-hook i {
  grid-row: 1 / 3;
  align-self: center;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(74, 52, 34, .88);
  color: #fff8ea;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

.inspiration-scene-panel {
  margin-top: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.inspiration-scene-panel .section-heading {
  align-items: flex-end;
  margin-bottom: 10px;
  padding: 0 2px;
}

.inspiration-scene-panel .section-heading p {
  margin: 3px 0 0;
  color: rgba(84, 60, 41, .54);
  font-size: 11px;
  font-weight: 700;
}

.inspiration-scene-grid {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.inspiration-scene-grid .scene-button {
  min-height: 98px;
  padding: 13px 76px 12px 12px;
  border-color: rgba(255, 255, 255, .4);
  background:
    radial-gradient(circle at 96% 50%, rgba(255, 239, 195, .3), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, .58), rgba(255, 247, 230, .38));
  box-shadow: 0 10px 18px rgba(75, 42, 22, .055);
}

.inspiration-scene-grid .scene-button-copy b {
  font-size: 15px;
}

.inspiration-scene-grid .scene-button-copy span {
  max-width: 106px;
  color: rgba(76, 55, 39, .66);
  font-size: 11px;
}

.inspiration-scene-grid .scene-cover {
  right: -6px;
  width: 64px;
  height: 82px;
  border-radius: 12px;
  transform: translateY(-50%) rotate(5deg);
}

.inspiration-scene-grid .creative-new-tag {
  top: 8px;
  right: 68px;
}

.inspiration-photo-entry {
  position: relative;
  bottom: auto;
  z-index: 1;
  min-height: 50px;
  margin-top: 14px;
  padding: 0 16px;
  border-style: solid;
  border-color: rgba(255, 255, 255, .62);
  background:
    linear-gradient(180deg, rgba(255, 253, 247, .86), rgba(255, 244, 222, .72));
  box-shadow:
    0 16px 34px rgba(78, 48, 24, .16),
    inset 0 1px 0 rgba(255, 255, 255, .86);
  backdrop-filter: blur(16px);
}

.inspiration-photo-entry span {
  color: #3d2b1f;
  font-size: 15px;
}

.inspiration-photo-entry b {
  min-width: 54px;
  color: #9a4236;
  font-size: 14px;
  text-align: right;
}

.inspiration-redesign-screen {
  padding-inline: 18px;
}

.inspiration-redesign-screen .inspiration-back-button {
  margin-left: 0;
  margin-bottom: 12px;
}

.inspiration-commission-hero {
  isolation: isolate;
  position: relative;
  overflow: hidden;
  padding: 25px 18px 20px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, .92);
  outline: 1px solid rgba(255, 255, 255, .28);
  outline-offset: -5px;
  background:
    radial-gradient(circle at 92% 9%, rgba(255, 238, 160, .56), transparent 35%),
    radial-gradient(circle at 8% 0%, rgba(255, 255, 255, .88), transparent 32%),
    radial-gradient(circle at 22% 98%, rgba(255, 255, 255, .28), transparent 35%),
    linear-gradient(145deg, rgba(255, 255, 255, .46), rgba(255, 246, 224, .18) 46%, rgba(255, 253, 246, .24));
  box-shadow:
    0 34px 78px rgba(80, 49, 24, .2),
    0 11px 28px rgba(255, 255, 255, .26),
    inset 0 1px 0 rgba(255, 255, 255, .98),
    inset 0 0 0 1px rgba(255, 255, 255, .22),
    inset 0 -1px 0 rgba(124, 81, 42, .08);
  -webkit-backdrop-filter: blur(34px) saturate(1.42) brightness(1.06);
  backdrop-filter: blur(34px) saturate(1.42) brightness(1.06);
}

.inspiration-commission-hero::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: 27px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .86), transparent 32%),
    linear-gradient(315deg, rgba(255, 255, 255, .34), transparent 40%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .48),
    inset 0 20px 38px rgba(255, 255, 255, .3),
    inset 0 -22px 38px rgba(115, 75, 40, .04);
  pointer-events: none;
}

.inspiration-commission-hero::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 78px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .42), rgba(118, 81, 48, .08), transparent);
  pointer-events: none;
}

.inspiration-commission-copy small {
  position: relative;
  z-index: 1;
  color: rgba(111, 75, 48, .68);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.inspiration-commission-copy h1 {
  position: relative;
  z-index: 1;
  max-width: 100%;
  margin-top: 10px;
  font-size: clamp(28px, 7vw, 34px);
  line-height: 1.12;
}

.inspiration-commission-copy p {
  position: relative;
  z-index: 1;
  max-width: 100%;
  margin-top: 10px;
  color: rgba(65, 47, 35, .72);
  font-size: 13px;
}

.inspiration-commission-card {
  position: relative;
  z-index: 1;
  min-height: 0;
  display: block;
  margin-top: 18px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.inspiration-draft-ribbon {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid rgba(156, 103, 52, .18);
  border-radius: 999px;
  background: rgba(255, 251, 242, .72);
  color: rgba(126, 81, 42, .82);
  font-size: 11px;
  font-weight: 950;
}

.inspiration-draft-head {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  margin-top: 0;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(100, 68, 42, .13);
}

.inspiration-draft-head .inspiration-commission-seal {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(142, 87, 44, .22);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 24%, rgba(255, 255, 255, .8), transparent 34%),
    rgba(255, 247, 228, .86);
  color: #9b5a32;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 14px;
  font-weight: 950;
  box-shadow: inset 0 0 0 1px rgba(151, 95, 46, .12);
}

.inspiration-draft-title {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.inspiration-draft-title b {
  min-width: 0;
  color: #2f2117;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 20px;
  line-height: 1.18;
}

.inspiration-draft-title small {
  min-width: 0;
  color: rgba(77, 55, 38, .68);
  font-size: 12px;
  line-height: 1.45;
}

.inspiration-draft-sheet {
  display: grid;
  gap: 13px;
  overflow: visible;
  margin-top: 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.inspiration-fill-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  color: rgba(72, 51, 36, .82);
  font-size: 14px;
  line-height: 1.55;
}

.inspiration-fill-copy strong {
  color: #2f2117;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 18px;
  font-weight: 950;
}

.inspiration-fill-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 42px;
}

.inspiration-fill-line > span:first-child,
.inspiration-fill-note > span:first-child,
.inspiration-fill-photo small {
  color: rgba(76, 54, 38, .66);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.inspiration-fill-line input,
.inspiration-fill-note textarea {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: rgba(49, 35, 25, .92);
  font: inherit;
  font-size: 15px;
  font-weight: 850;
}

.inspiration-fill-line input {
  min-height: 38px;
  padding: 0 2px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, .48);
  box-shadow: 0 1px 0 rgba(82, 58, 38, .1);
}

.inspiration-fill-line input::placeholder,
.inspiration-fill-note textarea::placeholder {
  color: rgba(88, 65, 47, .42);
  font-weight: 650;
}

.inspiration-fill-line.is-direction {
  grid-template-columns: 1fr;
  align-items: start;
  gap: 7px;
}

.inspiration-fill-note {
  display: grid;
  gap: 7px;
  margin-top: 1px;
}

.inspiration-note-box {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .76);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 249, 237, .16)),
    rgba(255, 252, 245, .24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .78),
    inset 0 0 0 1px rgba(255, 255, 255, .16),
    inset 0 -1px 0 rgba(105, 72, 45, .06),
    0 9px 22px rgba(79, 52, 30, .06);
  -webkit-backdrop-filter: blur(22px) saturate(1.28);
  backdrop-filter: blur(22px) saturate(1.28);
}

.inspiration-note-box textarea {
  min-height: 66px;
  padding: 0;
  border: 0;
  background: transparent;
  resize: none;
  line-height: 1.5;
}

.inspiration-fill-photo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 42px;
}

.inspiration-fill-photo > button {
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid rgba(174, 73, 58, .18);
  border-radius: 999px;
  background: rgba(255, 246, 238, .72);
  color: #a24b3a;
  font-size: 10px;
  font-weight: 850;
}

.inspiration-draft-row {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 8px;
  min-height: 41px;
  padding: 8px 0;
  border-top: 1px solid rgba(84, 58, 37, .12);
}

.inspiration-draft-row:first-child {
  border-top: 0;
}

.inspiration-draft-row em,
.inspiration-draft-row strong,
.inspiration-draft-row small,
.inspiration-draft-row input,
.inspiration-draft-row textarea {
  min-width: 0;
  font-style: normal;
  line-height: 1.35;
}

.inspiration-draft-row em {
  color: rgba(84, 60, 41, .54);
  font-size: 11px;
  font-weight: 850;
}

.inspiration-draft-row strong {
  color: rgba(55, 39, 27, .9);
  font-size: 13px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.inspiration-draft-row input,
.inspiration-draft-row textarea {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: rgba(55, 39, 27, .92);
  font: inherit;
  font-size: 13px;
  font-weight: 950;
}

.inspiration-draft-row textarea {
  min-height: 42px;
  resize: none;
}

.inspiration-draft-row input::placeholder,
.inspiration-draft-row textarea::placeholder {
  color: rgba(91, 68, 49, .48);
  font-weight: 650;
}

.inspiration-draft-row small {
  justify-self: end;
  color: rgba(112, 77, 48, .48);
  font-size: 10px;
  font-weight: 950;
  white-space: nowrap;
}

.inspiration-draft-row.is-open {
  background: transparent;
}

.inspiration-draft-row.is-open strong,
.inspiration-draft-row.is-open textarea {
  color: #a24b3a;
}

.inspiration-draft-row.is-note {
  align-items: start;
}

.inspiration-draft-row.is-note em,
.inspiration-draft-row.is-note small {
  padding-top: 5px;
}

.inspiration-mini-options {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  overflow: visible;
}

.inspiration-mini-options::-webkit-scrollbar {
  display: none;
}

.inspiration-mini-options button {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 247, 232, .18));
  color: rgba(70, 48, 33, .78);
  font-size: 11px;
  font-weight: 950;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .82),
    inset 0 -1px 0 rgba(93, 62, 36, .04),
    0 6px 16px rgba(85, 54, 29, .08);
  -webkit-backdrop-filter: blur(16px) saturate(1.22);
  backdrop-filter: blur(16px) saturate(1.22);
}

.inspiration-mini-options button.active {
  border-color: rgba(60, 41, 28, .58);
  background:
    linear-gradient(180deg, rgba(77, 56, 41, .96), rgba(50, 36, 26, .94));
  color: #fff7e8;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 7px 18px rgba(60, 40, 27, .16);
}

.inspiration-inline-photo {
  min-width: 0;
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px dashed rgba(255, 255, 255, .72);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .54), rgba(255, 247, 233, .18));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .72),
    0 6px 16px rgba(85, 54, 29, .05);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  cursor: pointer;
}

.inspiration-inline-photo input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.inspiration-inline-photo img {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(84, 58, 37, .12);
}

.inspiration-inline-photo strong {
  color: rgba(55, 39, 27, .82);
  font-size: 12px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inspiration-draft-row.is-photo > button {
  justify-self: end;
  min-height: 26px;
  padding: 0 8px;
  border: 1px solid rgba(174, 73, 58, .18);
  border-radius: 999px;
  background: rgba(255, 246, 238, .72);
  color: #a24b3a;
  font-size: 10px;
  font-weight: 950;
}

.inspiration-note-suggestions {
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  padding: 8px 1px 1px;
  border-top: 1px solid rgba(255, 255, 255, .58);
}

.inspiration-note-suggestions::-webkit-scrollbar {
  display: none;
}

.inspiration-note-suggestions em,
.inspiration-note-suggestions button {
  flex: 0 0 auto;
  min-height: 27px;
  display: grid;
  place-items: center;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  font-style: normal;
  font-size: 11px;
  font-weight: 950;
}

.inspiration-note-suggestions em {
  padding-left: 0;
  padding-right: 2px;
  color: rgba(84, 60, 41, .54);
}

.inspiration-note-suggestions button {
  border: 1px solid rgba(255, 255, 255, .72);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .58), rgba(255, 247, 232, .18));
  color: rgba(70, 48, 33, .78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .76),
    0 5px 14px rgba(85, 54, 29, .05);
  cursor: pointer;
}

.inspiration-draft-cta {
  width: 100%;
  border: 0;
  display: grid;
  place-items: center;
  min-height: 48px;
  margin-top: 16px;
  border-radius: 999px;
  background: #3b2c21;
  color: #fff7e8;
  box-shadow: 0 14px 24px rgba(60, 40, 27, .22);
}

.inspiration-draft-cta strong,
.inspiration-draft-cta em {
  font-style: normal;
  line-height: 1.15;
}

.inspiration-draft-cta strong {
  font-size: 14px;
  font-weight: 950;
}

.inspiration-draft-cta em {
  margin-top: 2px;
  color: rgba(255, 247, 232, .72);
  font-size: 10px;
  font-weight: 500;
}

.inspiration-reason-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-top: 12px;
  padding: 1px 1px 2px;
}

.inspiration-reason-strip::-webkit-scrollbar {
  display: none;
}

.inspiration-reason-strip span {
  flex: 0 0 auto;
  min-height: 28px;
  display: grid;
  place-items: center;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: 999px;
  background: rgba(255, 250, 238, .46);
  color: rgba(82, 59, 41, .72);
  font-size: 11px;
  font-weight: 900;
  backdrop-filter: blur(10px);
}

.inspiration-redesign-screen .inspiration-scene-panel {
  margin-top: 20px;
}

.inspiration-redesign-screen .inspiration-scene-grid {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 1px 2px 8px;
  scroll-snap-type: x proximity;
}

.inspiration-redesign-screen .inspiration-scene-grid::-webkit-scrollbar {
  display: none;
}

.inspiration-redesign-screen .inspiration-scene-grid .scene-button {
  flex: 0 0 178px;
  min-height: 92px;
  scroll-snap-align: start;
}

.scene-compose-redesign {
  padding-inline: 18px;
  padding-bottom: 124px;
}

.scene-compose-redesign .top-row {
  margin-bottom: 12px;
}

.scene-compose-redesign .top-row > .chip {
  position: fixed;
  right: max(16px, calc((100vw - 430px) / 2 + 16px));
  top: max(14px, env(safe-area-inset-top));
  z-index: 82;
  min-height: 36px;
  display: grid;
  place-items: center;
  padding: 0 12px;
  box-shadow: 0 10px 24px rgba(75, 42, 22, .1);
  backdrop-filter: blur(12px);
}

.scene-compose-head {
  margin-bottom: 12px;
  padding: 20px 18px;
  border: 1px solid rgba(255, 255, 255, .54);
  border-radius: 26px;
  background:
    radial-gradient(circle at 86% 12%, rgba(255, 232, 154, .34), transparent 30%),
    linear-gradient(150deg, rgba(255, 253, 246, .9), rgba(255, 244, 222, .64));
  box-shadow: 0 18px 34px rgba(75, 42, 22, .08);
}

.scene-compose-head small {
  color: rgba(124, 86, 55, .64);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.scene-compose-head h1 {
  margin-top: 9px;
  font-size: 30px;
  line-height: 1.15;
}

.scene-compose-head p {
  max-width: 100%;
  margin-top: 9px;
  font-size: 13px;
}

.scene-intent-panel {
  margin-bottom: 12px;
  padding: 15px;
  border: 1px solid rgba(76, 50, 31, .14);
  border-radius: 24px;
  background:
    radial-gradient(circle at 88% 14%, rgba(255, 231, 153, .3), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 249, 232, .66));
  box-shadow:
    0 18px 32px rgba(75, 42, 22, .1),
    inset 0 1px 0 rgba(255, 255, 255, .78);
  backdrop-filter: blur(14px);
}

.scene-intent-head {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
}

.scene-intent-head > .scene-intent-mark {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(150, 76, 46, .22);
  border-radius: 15px;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .82), transparent 36%),
    rgba(255, 246, 226, .86);
  color: #9a4236;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  box-shadow:
    inset 0 0 0 4px rgba(255, 255, 255, .26),
    0 8px 16px rgba(79, 47, 24, .08);
  transform: rotate(-5deg);
}

.scene-intent-head > .scene-intent-mark::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(154, 66, 54, .16);
  border-radius: 11px;
}

.scene-intent-head b,
.scene-intent-head small {
  display: block;
  min-width: 0;
}

.scene-intent-head b {
  color: #302116;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 18px;
  line-height: 1.25;
}

.scene-intent-head small {
  margin-top: 3px;
  color: rgba(76, 55, 39, .62);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
}

.scene-intent-list {
  display: grid;
  gap: 0;
  margin-top: 13px;
  border-top: 1px solid rgba(84, 58, 37, .12);
}

.scene-intent-list span {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 38px;
  border-bottom: 1px solid rgba(84, 58, 37, .08);
}

.scene-intent-list span:last-child {
  border-bottom: 0;
}

.scene-intent-list em,
.scene-intent-list strong {
  min-width: 0;
  font-style: normal;
}

.scene-intent-list em {
  color: rgba(84, 60, 41, .54);
  font-size: 11px;
  font-weight: 900;
}

.scene-intent-list strong {
  color: rgba(52, 36, 24, .9);
  font-size: 12px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scene-compose-redesign .scene-form {
  gap: 14px;
  padding: 15px;
  border-color: rgba(255, 255, 255, .48);
  border-radius: 24px;
  background: rgba(255, 250, 238, .68);
  box-shadow: 0 14px 26px rgba(75, 42, 22, .07);
  backdrop-filter: blur(12px);
}

.scene-compose-redesign .scene-form input,
.scene-compose-redesign .scene-form textarea {
  border-radius: 16px;
  border-color: rgba(84, 58, 37, .14);
  background: rgba(255, 255, 255, .72);
}

.scene-compose-redesign .photo-upload {
  border-radius: 18px;
  border-color: rgba(151, 95, 46, .24);
}

.scene-compose-redesign .scene-generate {
  min-height: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 999px;
  line-height: 1.1;
}

.scene-compose-redesign .scene-generate span {
  font-size: 14px;
  font-weight: 950;
}

.scene-compose-redesign .scene-generate small {
  color: rgba(255, 255, 255, .72);
  font-size: 10px;
  font-weight: 800;
}

.message-entry {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 13px 14px;
  border: 1px solid rgba(168, 68, 62, .18);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 88% 50%, rgba(255, 230, 168, .48), transparent 30%),
    rgba(255, 248, 232, .78);
  color: #5a382e;
  text-align: left;
  box-shadow: 0 14px 28px rgba(75, 42, 22, .08);
}

.message-entry span {
  font-size: 13px;
  font-weight: 900;
}

.message-entry b {
  color: var(--coral);
  font-size: 12px;
  white-space: nowrap;
}

.message-entry.evening-entry {
  position: relative;
  overflow: hidden;
  border-color: rgba(107, 61, 88, .18);
  background:
    radial-gradient(circle at 88% 22%, rgba(255, 225, 154, .5), transparent 30%),
    linear-gradient(135deg, rgba(255, 250, 240, .82), rgba(238, 225, 205, .7));
}

.message-entry.evening-entry::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, rgba(255, 255, 255, .95), rgba(255, 230, 155, .8) 34%, rgba(255, 230, 155, 0) 68%);
  transform: translateY(-50%);
  opacity: .52;
  pointer-events: none;
}

.message-entry.evening-entry span,
.message-entry.evening-entry b {
  position: relative;
  z-index: 1;
}

.message-entry.evening-entry.locked {
  opacity: .72;
}

.message-entry.evening-entry.night-sign {
  border-color: rgba(168, 68, 62, .16);
}

.evening-fall-notice {
  width: 100%;
  min-height: 52px;
  margin: -2px 0 12px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid rgba(168, 68, 62, .18);
  background:
    radial-gradient(circle at 86% 20%, rgba(255, 231, 160, .52), transparent 34%),
    linear-gradient(135deg, rgba(255, 250, 240, .86), rgba(241, 227, 203, .78));
  color: #5a382e;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 9px;
  text-align: left;
  box-shadow: 0 16px 28px rgba(75, 42, 22, .1);
  animation: eveningNoticeDrop .68s cubic-bezier(.18, .78, .2, 1) both;
}

.evening-fall-notice i,
.evening-fall-notice em {
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-style: normal;
  font-weight: 900;
}

.evening-fall-notice i {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(168, 68, 62, .28);
  background: rgba(255, 248, 232, .72);
  color: #9f443b;
  font-family: "Songti SC", "Noto Serif SC", serif;
}

.evening-fall-notice b,
.evening-fall-notice small {
  display: block;
}

.evening-fall-notice b {
  color: #33231d;
  font-size: 14px;
}

.evening-fall-notice small {
  margin-top: 2px;
  color: #8a6d56;
  font-size: 11px;
  font-weight: 800;
}

.evening-fall-notice em {
  width: 34px;
  height: 34px;
  border: 1px dashed rgba(168, 68, 62, .32);
  color: #a8443e;
  font-size: 12px;
  background: rgba(255, 250, 240, .5);
}

.fortune-hero,
.scene-hero {
  position: relative;
  margin-bottom: 16px;
  padding: 20px;
  border: 1px solid rgba(215, 173, 99, .72);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 72% 22%, rgba(255, 236, 175, .74), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .12)),
    #fff7e8;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.fortune-hero::before,
.scene-hero::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(184, 137, 62, .22);
  border-radius: 6px;
  pointer-events: none;
}

.fortune-hero small,
.scene-hero small {
  position: relative;
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
}

.fortune-hero h1,
.scene-hero h1 {
  position: relative;
  margin: 12px 0 8px;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 27px;
  line-height: 1.25;
}

.fortune-hero p,
.scene-hero p {
  position: relative;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.score-orbit {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 18px;
}

.score-node {
  min-height: 64px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(184, 137, 62, .28);
  background: rgba(255, 250, 240, .72);
  box-shadow: inset 0 0 18px rgba(255, 255, 255, .52);
}

.score-node b,
.score-node span {
  display: block;
}

.score-node b {
  color: var(--coral);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  line-height: 1;
}

.score-node span {
  margin-top: -10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.fortune-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-bottom: 14px;
}

.fortune-meta-grid div {
  min-height: 70px;
  padding: 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(184, 137, 62, .28);
  background: rgba(255, 250, 240, .76);
}

.fortune-meta-grid b,
.fortune-meta-grid span {
  display: block;
}

.fortune-meta-grid b {
  color: var(--coral);
  font-size: 12px;
}

.fortune-meta-grid span {
  margin-top: 6px;
  color: var(--ink);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 15px;
  font-weight: 900;
}

.fortune-paper {
  padding: 16px;
  border: 1px solid rgba(210, 189, 152, .72);
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(180deg, rgba(210, 189, 152, .08) 0, rgba(210, 189, 152, .08) 1px, transparent 1px, transparent 22px),
    linear-gradient(180deg, rgba(255, 255, 255, .74), rgba(255, 255, 255, .08)),
    #fffaf0;
  box-shadow: var(--shadow);
  margin-bottom: 14px;
}

.fortune-paper h2 {
  margin: 0 0 8px;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 20px;
}

.fortune-note {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}

.fortune-section {
  padding: 12px 0;
  border-top: 1px solid rgba(210, 189, 152, .52);
}

.fortune-section h3 {
  margin: 0 0 6px;
  color: var(--coral);
  font-size: 14px;
}

.fortune-section p {
  margin: 0;
  color: #3f3028;
  font-size: 13px;
  line-height: 1.75;
}

.mood-detail-score {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 188px;
  gap: 16px;
  align-items: end;
  margin: 12px 0 14px;
}

.mood-big-score b {
  display: block;
  color: #2f261f;
  font-size: 23px;
  line-height: 1.2;
}

.mood-big-score strong {
  display: inline-flex;
  align-items: baseline;
  margin-top: 4px;
  color: #29bfe2;
  font-size: 70px;
  line-height: .9;
  font-weight: 950;
}

.mood-big-score strong span {
  margin-left: 3px;
  font-size: 24px;
}

.mood-insight-card {
  margin-top: 12px;
  padding: 18px;
  border: 1px solid rgba(216, 199, 170, .72);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 12px 28px rgba(75, 42, 22, .08);
}

.mood-insight-card p {
  margin: 0 0 16px;
  color: #2a2520;
  font-size: 15px;
  line-height: 1.72;
}

.mood-insight-card p:last-child {
  margin-bottom: 0;
}

.mood-insight-card h3 {
  margin: 0 0 8px;
  color: #211611;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: 0;
}

.mood-insight-card h3:not(:first-child) {
  margin-top: 16px;
}

.mood-insight-card h3 span {
  color: #b0a79b;
  font-size: 13px;
  font-weight: 800;
}

.button-chip {
  min-height: 34px;
  border: 1px solid rgba(168, 68, 62, .28);
  background:
    radial-gradient(circle at 84% 18%, rgba(255, 230, 168, .42), transparent 28%),
    rgba(255, 248, 232, .86);
  color: #7c332c;
  font-size: 12px;
  font-weight: 900;
}

.mood-tips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}

.mood-tip {
  min-height: 82px;
  padding: 12px;
  border-radius: var(--radius);
  background: #fff9ec;
  border: 1px solid rgba(216, 199, 170, .72);
}

.mood-tip b {
  display: inline-block;
  padding: 0 8px 2px;
  border-radius: 999px;
  background: rgba(82, 205, 229, .18);
  font-size: 16px;
}

.mood-tip.avoid b {
  background: rgba(248, 136, 164, .18);
}

.mood-tip span {
  display: block;
  margin-top: 10px;
  color: #4e433b;
  font-size: 13px;
  line-height: 1.5;
}

.mood-lock-card {
  margin-top: 12px;
  padding: 16px;
  border: 1px dashed rgba(184, 137, 62, .58);
  border-radius: var(--radius);
  background: rgba(255, 247, 216, .82);
  text-align: center;
}

.mood-lock-card b {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
}

.mood-lock-card p {
  margin: 0 0 12px;
  color: #6d5d50;
  font-size: 13px;
  line-height: 1.55;
}

.mood-lock-card .primary {
  width: 100%;
}

.mood-extra {
  display: none;
}

.mood-extra.unlocked {
  display: block;
}

.luck-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.luck-item {
  min-height: 86px;
  padding: 12px;
  border: 1px solid rgba(216, 199, 170, .72);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .78);
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 10px;
  align-content: center;
}

.luck-icon {
  grid-row: 1 / 3;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #e9f4ef;
  border: 1px solid rgba(82, 105, 82, .12);
  position: relative;
  overflow: hidden;
}

.luck-icon.color {
  background: linear-gradient(135deg, #8fbf93, #f1d28a);
}

.luck-icon.gem::after {
  content: "";
  position: absolute;
  inset: 8px 7px;
  background: #33253f;
  transform: rotate(45deg);
}

.luck-icon.clock::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 2px solid #7b4d31;
  border-radius: 50%;
}

.luck-icon.direction::after {
  content: "↗";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #7b4d31;
  font-weight: 900;
}

.luck-icon.number::after {
  content: "7";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #7b4d31;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
}

.luck-icon.food {
  background: #fff0d7;
}

.luck-icon.food::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 9px;
  height: 12px;
  border: 2px solid #b8893e;
  border-top: 0;
  border-radius: 0 0 999px 999px;
}

.luck-icon.accessory::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 3px solid #7b4d31;
  border-top-color: transparent;
  border-radius: 50%;
}

.luck-icon.flower {
  background: #fff4ef;
}

.luck-icon.flower::before,
.luck-icon.flower::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 2px 12px;
  background: rgba(168, 68, 62, .72);
  transform: translate(-50%, -50%) rotate(45deg);
}

.luck-icon.flower::after {
  transform: translate(-50%, -50%) rotate(-45deg);
  background: rgba(184, 137, 62, .58);
}

.luck-item b {
  min-width: 0;
  color: #2f261f;
  font-size: 14px;
  line-height: 1.25;
}

.luck-item span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.tomorrow-card {
  border-color: rgba(82, 105, 82, .26);
  background:
    radial-gradient(circle at 86% 16%, rgba(128, 186, 189, .22), transparent 24%),
    rgba(255, 255, 255, .86);
}

.compact-luck {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.scene-compose-screen {
  padding-bottom: 120px;
}

.scene-form {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(184, 137, 62, .3);
  border-radius: var(--radius);
  background: rgba(255, 249, 235, .82);
  box-shadow: 0 18px 36px rgba(75, 42, 22, .1);
}

.scene-event-card {
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid rgba(184, 137, 62, .28);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 231, 156, .34), transparent 32%),
    linear-gradient(180deg, rgba(255, 252, 242, .88), rgba(255, 247, 229, .76));
  box-shadow: 0 14px 30px rgba(75, 42, 22, .08);
}

.scene-event-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.scene-event-head span {
  flex: 0 0 auto;
  min-height: 26px;
  padding: 4px 9px;
  border: 1px solid rgba(168, 68, 62, .22);
  border-radius: 999px;
  background: rgba(255, 250, 240, .76);
  color: #a8443e;
  font-size: 11px;
  font-weight: 900;
}

.scene-event-head b {
  min-width: 0;
  color: #2f261f;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 16px;
  line-height: 1.3;
  text-align: right;
}

.scene-event-notice {
  margin: 10px 0 0;
  color: #7a6758;
  font-size: 12px;
  line-height: 1.55;
}

.scene-event-options {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-top: 12px;
  padding-bottom: 2px;
}

.scene-event-options::-webkit-scrollbar {
  display: none;
}

.scene-event-option {
  flex: 0 0 148px;
  min-height: 62px;
  padding: 10px;
  border: 1px solid rgba(184, 137, 62, .24);
  border-radius: 12px;
  background: rgba(255, 255, 255, .58);
  color: var(--ink);
  text-align: left;
}

.scene-event-option.active {
  border-color: rgba(168, 68, 62, .52);
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 228, 150, .42), transparent 28%),
    rgba(255, 248, 232, .92);
  box-shadow: inset 0 0 0 1px rgba(168, 68, 62, .08);
}

.scene-event-option b,
.scene-event-option span {
  display: block;
}

.scene-event-option b {
  color: #2f261f;
  font-size: 13px;
}

.scene-event-option span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.scene-form label,
.scene-form > div {
  display: grid;
  gap: 8px;
}

.scene-form label span,
.field-title {
  color: #35271f;
  font-size: 13px;
  font-weight: 900;
}

.scene-form input,
.scene-form textarea {
  width: 100%;
  border: 1px solid rgba(184, 137, 62, .28);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .74);
  color: var(--ink);
  font-size: 14px;
}

.scene-form input {
  min-height: 44px;
  padding: 0 12px;
}

.scene-form textarea {
  min-height: 76px;
  padding: 10px 12px;
  resize: none;
}

.photo-upload {
  position: relative;
  width: 100%;
  min-height: 72px;
  padding: 12px;
  border: 1px dashed rgba(168, 68, 62, .32);
  border-radius: var(--radius);
  background: rgba(255, 250, 240, .74);
  color: var(--ink);
  text-align: left;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  cursor: pointer;
}

.photo-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.photo-upload.active {
  border-style: solid;
  background:
    radial-gradient(circle at 84% 24%, rgba(255, 230, 168, .46), transparent 32%),
    rgba(255, 248, 232, .86);
}

.photo-upload b,
.photo-upload span {
  display: block;
}

.photo-upload b {
  font-size: 14px;
}

.photo-upload span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.scene-photo-field {
  display: grid;
  gap: 8px;
}

.scene-photo-mark {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid !important;
  place-items: center;
  border: 1px dashed rgba(168, 68, 62, .38);
  background: rgba(255, 255, 255, .62);
  color: #a8443e;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  margin-top: 0 !important;
  padding-bottom: 2px;
}

.scene-photo-copy small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.scene-photo-copy {
  min-width: 0;
  overflow: hidden;
}

.photo-upload img {
  width: 58px;
  height: 58px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 8px 18px rgba(75, 42, 22, .16);
}

.scene-photo-remove {
  justify-self: end;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(168, 68, 62, .2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .62);
  color: #8a574e;
  font-size: 12px;
  font-weight: 800;
}

.scene-image-stage {
  min-height: 610px;
  padding: 10px;
  border: 1px solid rgba(184, 137, 62, .34);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 238, 184, .42), transparent 34%),
    #f6ead4;
  box-shadow: var(--shadow);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.scene-image-stage.scene-image-zoom {
  position: relative;
  width: 100%;
  border-style: solid;
  color: inherit;
  cursor: zoom-in;
}

.scene-image-stage img {
  width: 100%;
  height: min(68vh, 620px);
  object-fit: contain;
  border-radius: 7px;
  box-shadow: 0 18px 34px rgba(75, 42, 22, .18);
}

.scene-image-zoom > span {
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(47, 38, 31, .54);
  color: rgba(255, 250, 240, .94);
  font-size: 11px;
  font-weight: 900;
  backdrop-filter: blur(8px);
}

.scene-blessing-panel {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(184, 137, 62, .22);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 230, 168, .28), transparent 30%),
    rgba(255, 250, 240, .78);
  box-shadow: 0 12px 26px rgba(75, 42, 22, .07);
}

.scene-blessing-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.scene-blessing-head b,
.scene-blessing-head span {
  display: block;
}

.scene-blessing-head b {
  color: #2f261f;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 15px;
}

.scene-blessing-head span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.scene-blessing-stamps {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 1px 0 8px;
}

.scene-blessing-stamps::-webkit-scrollbar {
  display: none;
}

.scene-message-list {
  display: grid;
  gap: 7px;
}

.scene-message-note {
  padding: 8px 9px;
  border: 1px solid rgba(168, 68, 62, .12);
  border-radius: 9px;
  background: rgba(255, 255, 255, .54);
}

.scene-message-note b,
.scene-message-note span,
.scene-message-note p {
  display: block;
}

.scene-message-note b {
  color: #7c332c;
  font-size: 12px;
}

.scene-message-note span {
  margin-top: 2px;
  color: rgba(124, 51, 44, .58);
  font-size: 10px;
  font-weight: 900;
}

.scene-message-note p {
  margin: 5px 0 0;
  color: #4a4038;
  font-size: 12px;
  line-height: 1.5;
}

.scene-message-empty {
  padding: 8px 4px 2px;
  color: rgba(74, 64, 56, .64);
  font-size: 12px;
  line-height: 1.5;
}

.scene-share-art-wrap {
  position: relative;
}

.scene-share-art-wrap .scene-image-stage {
  min-height: 520px;
}

.scene-share-art-wrap .scene-image-stage img {
  height: min(60vh, 560px);
}

.share-sticky-actions.single-action {
  grid-template-columns: 1fr;
}

.image-preview-mask {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) 12px max(18px, env(safe-area-inset-bottom));
  background: rgba(21, 17, 14, .9);
  backdrop-filter: blur(14px);
}

.image-preview-mask img {
  width: 100%;
  max-width: 430px;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .42);
}

.image-preview-close {
  position: fixed;
  left: 16px;
  top: max(14px, env(safe-area-inset-top));
  z-index: 2;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(255, 250, 240, .24);
  border-radius: 999px;
  background: rgba(255, 250, 240, .12);
  color: #fffaf0;
  font-size: 14px;
  font-weight: 900;
}

.scene-works-hero {
  position: relative;
  margin-bottom: 14px;
  padding: 18px;
  border: 1px solid rgba(215, 173, 99, .56);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 86% 12%, rgba(255, 232, 150, .42), transparent 34%),
    linear-gradient(135deg, rgba(255, 252, 242, .9), rgba(249, 235, 207, .76));
  box-shadow: 0 14px 28px rgba(75, 42, 22, .08);
  overflow: hidden;
}

.scene-works-hero::after {
  content: "";
  position: absolute;
  right: -20px;
  bottom: -28px;
  width: 112px;
  height: 112px;
  border: 1px dashed rgba(168, 68, 62, .18);
  border-radius: 50%;
  transform: rotate(-12deg);
}

.scene-works-hero small {
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  font-style: italic;
  font-weight: 900;
  letter-spacing: .18em;
}

.scene-works-hero h1 {
  margin: 8px 0 6px;
  color: #2f261f;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 25px;
  line-height: 1.24;
}

.scene-works-hero p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #6c5d50;
  font-size: 12px;
  line-height: 1.65;
}

.scene-work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding-bottom: 18px;
}

.scene-work-card {
  position: relative;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(184, 137, 62, .24);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 248, 232, .72)),
    #fffaf0;
  box-shadow: 0 12px 26px rgba(75, 42, 22, .08);
  color: var(--ink);
  text-align: left;
  overflow: hidden;
}

.scene-work-card.completed:nth-child(odd) {
  transform: rotate(-.6deg);
}

.scene-work-card.completed:nth-child(even) {
  transform: rotate(.7deg);
}

.scene-work-card.generating {
  transform: rotate(-.4deg);
}

.scene-work-image {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 9px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 235, 156, .36), transparent 38%),
    #f3e4cd;
  overflow: hidden;
}

.scene-work-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.scene-work-image.pending::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 35%, rgba(255, 255, 255, .5) 45%, transparent 56%),
    radial-gradient(circle at 52% 35%, rgba(255, 220, 130, .3), transparent 36%);
  animation: sceneWorkSheen 1.8s linear infinite;
}

.scene-work-image.pending img {
  opacity: .38;
  filter: blur(.5px) saturate(.9);
}

.scene-work-sigil {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.scene-work-sigil span,
.scene-work-sigil i {
  position: absolute;
  width: 56px;
  height: 56px;
  border: 1px dashed rgba(168, 68, 62, .45);
  border-radius: 50%;
  animation: sceneWorkSpin 3.6s linear infinite;
}

.scene-work-sigil i {
  width: 34px;
  height: 34px;
  border-color: rgba(184, 137, 62, .58);
  animation-direction: reverse;
}

.scene-work-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: rgba(168, 68, 62, .76);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 34px;
  font-weight: 900;
}

.scene-work-info {
  display: grid;
  gap: 4px;
  padding: 8px 2px 2px;
}

.scene-work-info em {
  color: rgba(124, 51, 44, .62);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.scene-work-info b {
  min-width: 0;
  color: #2f261f;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 14px;
  line-height: 1.25;
}

.scene-work-info span {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.42;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.scene-work-empty {
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 28px 18px;
  border: 1px dashed rgba(184, 137, 62, .42);
  border-radius: var(--radius);
  background: rgba(255, 250, 240, .72);
  text-align: center;
}

.scene-work-empty b {
  font-size: 16px;
}

.scene-work-empty span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.scene-work-empty .primary {
  width: 100%;
  margin-top: 8px;
}

.scene-generate {
  width: 100%;
  min-height: 48px;
  margin-top: 16px;
  font-size: 14px;
  box-shadow: 0 16px 28px rgba(137, 61, 48, .2);
}

.scene-compose-screen .scene-generate {
  position: fixed;
  left: max(16px, calc((100vw - 430px) / 2 + 16px));
  right: max(16px, calc((100vw - 430px) / 2 + 16px));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 60;
  width: auto;
  margin: 0;
  box-shadow: 0 18px 36px rgba(137, 61, 48, .24);
}

.creative-compose-screen {
  padding-bottom: 128px;
}

.creative-hero {
  position: relative;
  overflow: hidden;
}

.creative-hero::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -30px;
  width: 122px;
  height: 122px;
  border-radius: 34% 66% 54% 46%;
  background:
    radial-gradient(circle at 42% 36%, rgba(255, 236, 109, .62), transparent 42%),
    rgba(244, 178, 93, .22);
  transform: rotate(-16deg);
}

.creative-status {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  min-height: 28px;
  margin-top: 12px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(255, 250, 240, .72);
  color: #8a574e;
  font-size: 12px;
  font-weight: 900;
}

.creative-status.unlocked {
  color: #5b7a42;
}

.creative-status.locked {
  color: #a8443e;
}

.creative-example-card,
.creative-lock-card {
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid rgba(184, 137, 62, .24);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 86% 10%, rgba(255, 230, 128, .34), transparent 32%),
    rgba(255, 250, 240, .78);
  box-shadow: 0 14px 30px rgba(75, 42, 22, .08);
}

.creative-example-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.creative-example-head b,
.creative-example-head span {
  display: block;
}

.creative-example-head b {
  color: #2f261f;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 16px;
}

.creative-example-head span {
  max-width: 170px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  text-align: right;
}

.creative-example-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.creative-example-pair figure {
  margin: 0;
  min-width: 0;
}

.creative-example-pair img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid rgba(255, 250, 240, .8);
  background: rgba(255, 246, 225, .72);
  box-shadow: 0 10px 20px rgba(75, 42, 22, .1);
}

.creative-example-pair figcaption {
  margin-top: 6px;
  color: rgba(74, 64, 56, .7);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

.creative-example-pair > i {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 250, 240, .82);
  color: #a8443e;
  font-style: normal;
  font-weight: 900;
}

.creative-form {
  background:
    radial-gradient(circle at 86% 12%, rgba(255, 222, 92, .28), transparent 28%),
    rgba(255, 250, 240, .82);
}

.creative-lock-card {
  display: grid;
  gap: 8px;
  text-align: center;
}

.creative-lock-mark {
  width: 42px;
  height: 42px;
  margin: 0 auto 2px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(255, 232, 130, .44);
  color: #a8443e;
  font-size: 19px;
  box-shadow: inset 0 0 0 1px rgba(168, 68, 62, .1);
}

.creative-lock-card b {
  color: #2f261f;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 17px;
}

.creative-lock-card p,
.creative-lock-card em {
  margin: 0;
  color: #6c5d50;
  font-size: 12px;
  line-height: 1.6;
  font-style: normal;
}

.creative-lock-card em {
  color: rgba(124, 51, 44, .72);
}

.creative-doodle-screen {
  --doodle-ink: #2a211c;
  --doodle-paper: #fff6dc;
  --doodle-yellow: #f9d85d;
  --doodle-pink: #ff8aa7;
  --doodle-blue: #7fd7e6;
  --doodle-green: #9fd36f;
  background:
    radial-gradient(circle at 12% 16%, rgba(255, 138, 167, .18), transparent 18%),
    radial-gradient(circle at 86% 12%, rgba(127, 215, 230, .22), transparent 20%),
    radial-gradient(circle at 72% 84%, rgba(159, 211, 111, .2), transparent 22%),
    linear-gradient(180deg, rgba(255, 249, 225, .72), rgba(255, 239, 205, .56));
}

.creative-doodle-screen .top-row {
  margin-bottom: 10px;
}

.creative-doodle-screen .floating-back-button,
.creative-doodle-screen .chip {
  border: 2px solid var(--doodle-ink);
  background: rgba(255, 252, 237, .86);
  color: var(--doodle-ink);
  box-shadow: 3px 4px 0 rgba(42, 33, 28, .12);
}

.creative-doodle-screen .creative-hero {
  min-height: 154px;
  padding: 18px 18px 20px;
  border: 2px solid var(--doodle-ink);
  border-radius: 18px 14px 20px 13px;
  background:
    radial-gradient(circle at 84% 26%, rgba(249, 216, 93, .8) 0 11%, transparent 12%),
    radial-gradient(circle at 19% 76%, rgba(127, 215, 230, .44) 0 9%, transparent 10%),
    linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(255, 246, 218, .92)),
    var(--doodle-paper);
  box-shadow: 5px 6px 0 rgba(42, 33, 28, .12), 0 14px 26px rgba(75, 42, 22, .08);
  transform: rotate(-.6deg);
}

.creative-doodle-screen .creative-hero::before {
  inset: 10px;
  border: 2px dashed rgba(42, 33, 28, .22);
  border-radius: 14px 10px 15px 12px;
}

.creative-doodle-screen .creative-hero::after {
  right: 14px;
  bottom: 16px;
  width: 88px;
  height: 58px;
  border: 2px solid var(--doodle-ink);
  border-radius: 42% 58% 45% 55%;
  background:
    radial-gradient(circle at 30% 42%, var(--doodle-pink) 0 7px, transparent 8px),
    radial-gradient(circle at 62% 45%, var(--doodle-blue) 0 6px, transparent 7px),
    var(--doodle-yellow);
  opacity: .72;
  transform: rotate(10deg);
}

.creative-doodle-screen .creative-hero small,
.creative-doodle-screen .creative-hero h1,
.creative-doodle-screen .creative-hero p,
.creative-doodle-screen .creative-status {
  transform: rotate(.6deg);
}

.creative-doodle-screen .creative-hero small {
  display: inline-block;
  padding: 3px 8px;
  border: 2px solid var(--doodle-ink);
  border-radius: 999px;
  background: var(--doodle-blue);
  color: var(--doodle-ink);
  font-family: inherit;
  font-style: normal;
  letter-spacing: .05em;
  box-shadow: 2px 2px 0 rgba(42, 33, 28, .14);
}

.creative-doodle-screen .creative-hero h1 {
  max-width: 210px;
  margin-top: 14px;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 28px;
  letter-spacing: 0;
  text-shadow: 2px 2px 0 rgba(249, 216, 93, .7);
}

.creative-doodle-screen .creative-hero p {
  max-width: 255px;
  color: #4a3a31;
  font-size: 13px;
  line-height: 1.65;
}

.creative-doodle-screen .creative-status {
  border: 2px solid var(--doodle-ink);
  background: #fff;
  color: #8a443a;
  box-shadow: 2px 3px 0 rgba(42, 33, 28, .12);
}

.creative-doodle-screen .creative-example-card,
.creative-doodle-screen .creative-form,
.creative-doodle-screen .creative-lock-card {
  position: relative;
  border: 2px solid var(--doodle-ink);
  border-radius: 16px 22px 15px 19px;
  background:
    linear-gradient(rgba(42, 33, 28, .035) 1px, transparent 1px) 0 12px / 100% 22px,
    linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 246, 220, .92)),
    var(--doodle-paper);
  box-shadow: 5px 6px 0 rgba(42, 33, 28, .11), 0 12px 24px rgba(75, 42, 22, .08);
}

.creative-doodle-screen .creative-example-card {
  transform: rotate(.45deg);
}

.creative-doodle-screen .creative-example-card::before,
.creative-doodle-screen .creative-form::before {
  content: "";
  position: absolute;
  left: 22px;
  top: -9px;
  width: 54px;
  height: 17px;
  border: 1px solid rgba(42, 33, 28, .18);
  border-radius: 3px;
  background: rgba(255, 221, 128, .78);
  box-shadow: 0 2px 4px rgba(42, 33, 28, .08);
  transform: rotate(-7deg);
}

.creative-doodle-screen .creative-form::before {
  left: auto;
  right: 26px;
  background: rgba(127, 215, 230, .62);
  transform: rotate(6deg);
}

.creative-doodle-screen .creative-example-head b {
  color: var(--doodle-ink);
  font-size: 17px;
  text-shadow: 1px 1px 0 rgba(255, 138, 167, .45);
}

.creative-doodle-screen .creative-example-head span {
  color: rgba(42, 33, 28, .68);
  font-weight: 800;
}

.creative-doodle-screen .creative-example-pair {
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
}

.creative-doodle-screen .creative-example-pair figure {
  position: relative;
}

.creative-doodle-screen .creative-example-pair figure:first-child {
  transform: rotate(-2.4deg);
}

.creative-doodle-screen .creative-example-pair figure:last-child {
  transform: rotate(2deg);
}

.creative-doodle-screen .creative-example-pair img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 2px solid var(--doodle-ink);
  border-radius: 12px 16px 11px 14px;
  background: #fff;
  box-shadow: 4px 4px 0 rgba(42, 33, 28, .12);
}

.creative-doodle-screen .creative-example-pair figcaption {
  display: inline-grid;
  min-height: 24px;
  margin: 8px auto 0;
  padding: 3px 9px;
  border: 2px solid var(--doodle-ink);
  border-radius: 999px;
  background: #fff;
  color: var(--doodle-ink);
  font-size: 11px;
  box-shadow: 2px 2px 0 rgba(42, 33, 28, .12);
}

.creative-doodle-screen .creative-example-pair > i {
  width: 28px;
  height: 28px;
  border: 2px solid var(--doodle-ink);
  background: var(--doodle-yellow);
  color: var(--doodle-ink);
  box-shadow: 2px 2px 0 rgba(42, 33, 28, .12);
  transform: rotate(-7deg);
}

.creative-doodle-screen .creative-form {
  margin-top: 14px;
  transform: rotate(-.35deg);
}

.creative-doodle-screen .creative-form label span {
  color: var(--doodle-ink);
}

.creative-doodle-screen .creative-form textarea {
  border: 2px solid var(--doodle-ink);
  border-radius: 15px 12px 18px 13px;
  background: rgba(255, 255, 255, .72);
  box-shadow: inset 2px 2px 0 rgba(42, 33, 28, .04);
}

.creative-doodle-screen .photo-upload {
  min-height: 86px;
  border: 2px dashed var(--doodle-ink);
  border-radius: 18px 12px 19px 14px;
  background:
    radial-gradient(circle at 92% 20%, rgba(255, 138, 167, .38), transparent 20%),
    rgba(255, 255, 255, .7);
}

.creative-doodle-screen .photo-upload.active {
  border-style: solid;
}

.creative-doodle-screen .scene-photo-mark {
  border: 2px solid var(--doodle-ink);
  border-radius: 16px 10px 14px 12px;
  background: var(--doodle-green);
  color: var(--doodle-ink);
  box-shadow: 3px 3px 0 rgba(42, 33, 28, .12);
  transform: rotate(-7deg);
}

.creative-doodle-screen .photo-upload b {
  color: var(--doodle-ink);
  font-size: 15px;
}

.creative-doodle-screen .photo-upload img {
  width: 64px;
  height: 64px;
  border: 2px solid var(--doodle-ink);
  border-radius: 14px 10px 16px 12px;
  box-shadow: 3px 3px 0 rgba(42, 33, 28, .12);
  transform: rotate(-4deg);
}

.creative-doodle-screen .scene-photo-remove {
  border: 2px solid var(--doodle-ink);
  background: #fff;
  color: #8a443a;
  box-shadow: 2px 2px 0 rgba(42, 33, 28, .1);
}

.creative-doodle-screen .creative-lock-card {
  text-align: left;
  transform: rotate(-.3deg);
}

.creative-doodle-screen .creative-lock-mark {
  margin-left: 0;
  border: 2px solid var(--doodle-ink);
  border-radius: 15px 10px 13px 12px;
  background: var(--doodle-pink);
  color: var(--doodle-ink);
  box-shadow: 3px 3px 0 rgba(42, 33, 28, .12);
}

.creative-doodle-screen .creative-generate {
  min-height: 50px;
  border: 2px solid var(--doodle-ink);
  border-radius: 999px 22px 999px 20px;
  background:
    radial-gradient(circle at 18% 40%, rgba(255, 255, 255, .34), transparent 16%),
    linear-gradient(135deg, #ff8aa7, #f9d85d 55%, #7fd7e6);
  color: var(--doodle-ink);
  font-weight: 900;
  box-shadow: 5px 6px 0 rgba(42, 33, 28, .18), 0 16px 30px rgba(75, 42, 22, .16);
}

.doodle-sun,
.doodle-palette,
.doodle-heart,
.doodle-hero-star,
.doodle-cat,
.doodle-camera {
  display: none;
}

.creative-doodle-screen {
  --doodle-ink: #211a16;
  --doodle-paper: #fff7e5;
  --doodle-yellow: #ffd449;
  --doodle-pink: #ff78a1;
  --doodle-blue: #9fe3ff;
  --doodle-green: #99df63;
  --doodle-purple: #a382d8;
  min-height: 100svh;
  padding: 18px 16px 132px;
  background-color: #fff8eb;
  background-image:
    radial-gradient(circle at 18% 6%, rgba(159, 227, 255, .24) 0 2px, transparent 3px),
    radial-gradient(circle at 85% 9%, rgba(255, 212, 73, .22) 0 3px, transparent 4px),
    linear-gradient(90deg, rgba(33, 26, 22, .022) 1px, transparent 1px),
    linear-gradient(rgba(33, 26, 22, .018) 1px, transparent 1px),
    linear-gradient(180deg, #fffaf0 0%, #fff3df 100%);
  background-size: auto, auto, 22px 22px, 22px 22px, auto;
  color: var(--doodle-ink);
  font-family: "Marker Felt", "Comic Sans MS", "Kaiti SC", "STKaiti", cursive;
}

.creative-doodle-screen .top-row {
  min-height: 56px;
  margin-bottom: 8px;
  padding-left: 0;
}

.creative-doodle-screen .floating-back-button {
  top: max(18px, env(safe-area-inset-top));
  left: max(20px, calc((100vw - 430px) / 2 + 20px));
  min-height: 43px;
  padding: 0 17px 1px 42px;
  border: 3px solid var(--doodle-ink);
  border-radius: 23px 18px 25px 20px;
  background: #ffc946;
  color: var(--doodle-ink);
  font-family: inherit;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow:
    2px 3px 0 rgba(33, 26, 22, .2),
    inset 0 0 0 2px rgba(255, 246, 203, .28);
  transform: rotate(-2.2deg);
  backdrop-filter: none;
}

.creative-doodle-screen .floating-back-button::before {
  content: "←";
  position: absolute;
  left: 14px;
  top: 48%;
  transform: translateY(-50%);
  font-size: 31px;
  line-height: 1;
}

.creative-doodle-screen .chip {
  position: fixed;
  right: max(18px, calc((100vw - 430px) / 2 + 18px));
  top: max(18px, env(safe-area-inset-top));
  z-index: 82;
  min-height: 43px;
  display: inline-flex;
  align-items: center;
  padding: 0 15px 1px 34px;
  border: 3px solid var(--doodle-ink);
  border-radius: 18px 24px 20px 22px;
  background: var(--doodle-blue);
  color: var(--doodle-ink);
  font-family: inherit;
  font-size: 20px;
  font-weight: 900;
  box-shadow:
    2px 3px 0 rgba(33, 26, 22, .18),
    inset 0 0 0 2px rgba(255, 255, 255, .22);
  transform: rotate(1.6deg);
}

.creative-doodle-screen .chip::before {
  content: "⚡";
  position: absolute;
  left: -18px;
  top: -12px;
  color: var(--doodle-yellow);
  font-size: 34px;
  -webkit-text-stroke: 2px var(--doodle-ink);
  text-shadow: 1px 1px 0 var(--doodle-ink);
  transform: rotate(-14deg);
}

.creative-doodle-screen .creative-hero {
  min-height: 232px;
  margin: 0 0 16px;
  padding: 28px 24px 24px;
  border: 3px solid var(--doodle-ink);
  border-radius: 26px 18px 28px 19px;
  background-color: var(--doodle-paper);
  background-image:
    repeating-linear-gradient(-18deg, rgba(255, 211, 76, .15) 0 5px, transparent 5px 12px),
    radial-gradient(circle at 82% 20%, rgba(255, 212, 73, .26), transparent 17%),
    linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 239, 208, .3));
  box-shadow:
    3px 4px 0 rgba(33, 26, 22, .14),
    inset 0 0 0 2px rgba(255, 255, 255, .34);
  transform: none;
}

.creative-doodle-screen .creative-hero::before {
  inset: 13px;
  border: 3px dashed rgba(139, 104, 202, .56);
  border-radius: 20px 14px 22px 15px;
}

.creative-doodle-screen .creative-hero::after {
  content: "";
  left: 28px;
  right: auto;
  top: 128px;
  bottom: auto;
  width: 200px;
  height: 9px;
  border: 0;
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--doodle-pink), var(--doodle-pink)) 0 0 / 100% 4px no-repeat,
    repeating-linear-gradient(90deg, var(--doodle-pink) 0 10px, transparent 10px 18px);
  opacity: .85;
  transform: rotate(-1deg);
}

.creative-doodle-screen .creative-hero small,
.creative-doodle-screen .creative-hero h1,
.creative-doodle-screen .creative-hero p,
.creative-doodle-screen .creative-status {
  transform: none;
}

.creative-doodle-screen .creative-hero small {
  position: relative;
  z-index: 2;
  display: inline-grid;
  min-height: 39px;
  place-items: center;
  padding: 0 18px 2px;
  border: 3px solid var(--doodle-ink);
  border-radius: 999px 24px 999px 22px;
  background: var(--doodle-blue);
  color: var(--doodle-ink);
  font-family: inherit;
  font-size: 20px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .02em;
  box-shadow: 2px 3px 0 rgba(33, 26, 22, .16);
  transform: rotate(-1deg);
}

.creative-doodle-screen .creative-hero small::before,
.creative-doodle-screen .creative-hero small::after {
  content: "";
  position: absolute;
  inset: -6px 10px auto auto;
  width: 44px;
  height: 18px;
  border-top: 3px solid rgba(36, 103, 187, .54);
  border-radius: 50%;
  transform: rotate(-8deg);
}

.creative-doodle-screen .creative-hero small::after {
  inset: auto auto -5px 14px;
  width: 34px;
  transform: rotate(8deg);
}

.creative-doodle-screen .creative-hero h1 {
  position: relative;
  z-index: 2;
  max-width: 250px;
  margin: 20px 0 22px;
  color: var(--doodle-ink);
  font-family: inherit;
  font-size: 39px;
  line-height: 1.08;
  letter-spacing: .03em;
  text-shadow:
    1px 0 0 var(--doodle-ink),
    0 1px 0 var(--doodle-ink),
    2px 2px 0 rgba(255, 255, 255, .46);
}

.creative-doodle-screen .creative-hero p {
  position: relative;
  z-index: 2;
  max-width: 296px;
  color: var(--doodle-ink);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.78;
  letter-spacing: .02em;
}

.creative-doodle-screen .creative-hero p::after {
  content: "";
  display: block;
  width: 126px;
  height: 7px;
  margin-top: 4px;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, var(--doodle-pink) 0 8px, transparent 8px 14px);
  transform: rotate(-1deg);
}

.creative-doodle-screen .doodle-sun,
.creative-doodle-screen .doodle-palette,
.creative-doodle-screen .doodle-heart,
.creative-doodle-screen .doodle-hero-star,
.creative-doodle-screen .doodle-cat,
.creative-doodle-screen .doodle-camera {
  display: block;
  position: absolute;
  pointer-events: none;
}

.creative-doodle-screen .doodle-sun {
  right: 35px;
  top: 49px;
  width: 66px;
  height: 66px;
  border: 3px solid var(--doodle-ink);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 52%, #ff6d79 0 5px, transparent 6px),
    radial-gradient(circle at 62% 44%, var(--doodle-ink) 0 3px, transparent 4px),
    radial-gradient(circle at 44% 41%, var(--doodle-ink) 0 3px, transparent 4px),
    var(--doodle-yellow);
  box-shadow: inset 0 0 0 2px rgba(255, 236, 138, .55);
  transform: rotate(10deg);
}

.creative-doodle-screen .doodle-sun::before {
  content: "";
  position: absolute;
  inset: -19px;
  background:
    linear-gradient(var(--doodle-ink), var(--doodle-ink)) 50% 0 / 3px 15px no-repeat,
    linear-gradient(var(--doodle-ink), var(--doodle-ink)) 50% 100% / 3px 15px no-repeat,
    linear-gradient(90deg, var(--doodle-ink), var(--doodle-ink)) 0 50% / 15px 3px no-repeat,
    linear-gradient(90deg, var(--doodle-ink), var(--doodle-ink)) 100% 50% / 15px 3px no-repeat,
    linear-gradient(35deg, transparent 44%, #ff6a24 45% 55%, transparent 56%) 5px 5px / 22px 22px no-repeat,
    linear-gradient(-35deg, transparent 44%, #ff6a24 45% 55%, transparent 56%) right 5px top 5px / 22px 22px no-repeat,
    linear-gradient(-35deg, transparent 44%, #ff6a24 45% 55%, transparent 56%) left 5px bottom 5px / 22px 22px no-repeat,
    linear-gradient(35deg, transparent 44%, #ff6a24 45% 55%, transparent 56%) right 5px bottom 5px / 22px 22px no-repeat;
  z-index: -1;
}

.creative-doodle-screen .doodle-sun i {
  position: absolute;
  left: 22px;
  top: 34px;
  width: 21px;
  height: 9px;
  border-bottom: 3px solid var(--doodle-ink);
  border-radius: 0 0 999px 999px;
}

.creative-doodle-screen .doodle-palette {
  right: 26px;
  bottom: 28px;
  width: 83px;
  height: 58px;
  border: 3px solid var(--doodle-ink);
  border-radius: 49% 51% 45% 55%;
  background: #ffd7a0;
  transform: rotate(13deg);
}

.creative-doodle-screen .doodle-palette i {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid var(--doodle-ink);
  border-radius: 50%;
  background: var(--doodle-pink);
}

.creative-doodle-screen .doodle-palette i:nth-child(1) {
  left: 25px;
  top: 19px;
}

.creative-doodle-screen .doodle-palette i:nth-child(2) {
  left: 48px;
  top: 21px;
  background: #55bdf3;
}

.creative-doodle-screen .doodle-palette i:nth-child(3) {
  left: 57px;
  top: 41px;
  background: var(--doodle-yellow);
}

.creative-doodle-screen .doodle-heart {
  right: 17px;
  top: 132px;
  color: #ff6d8e;
  font-size: 30px;
  -webkit-text-stroke: 2px var(--doodle-ink);
  transform: rotate(18deg);
}

.creative-doodle-screen .doodle-hero-star {
  left: -3px;
  bottom: 11px;
  color: #70b8ff;
  font-size: 39px;
  -webkit-text-stroke: 2px var(--doodle-ink);
  transform: rotate(-14deg);
}

.creative-doodle-screen .creative-status {
  z-index: 2;
  border: 3px solid var(--doodle-ink);
  background: #fff;
  color: #a8443e;
  font-size: 14px;
  box-shadow: 2px 2px 0 rgba(33, 26, 22, .16);
}

.creative-doodle-screen .creative-example-card,
.creative-doodle-screen .creative-form,
.creative-doodle-screen .creative-lock-card {
  border: 3px solid var(--doodle-ink);
  border-radius: 24px 17px 26px 20px;
  background-color: #fffaf0;
  background-image:
    linear-gradient(rgba(33, 26, 22, .025) 1px, transparent 1px),
    repeating-linear-gradient(-16deg, rgba(255, 212, 73, .08) 0 4px, transparent 4px 11px);
  background-size: 100% 22px, auto;
  box-shadow: 3px 4px 0 rgba(33, 26, 22, .12);
}

.creative-doodle-screen .creative-example-card {
  margin-bottom: 17px;
  padding: 19px 14px 17px;
  transform: none;
}

.creative-doodle-screen .creative-example-card::before {
  left: 23px;
  top: 86px;
  width: 54px;
  height: 17px;
  border: 2px solid rgba(33, 26, 22, .2);
  border-radius: 4px;
  background: #7fc6ff;
  transform: rotate(-18deg);
  z-index: 3;
}

.creative-doodle-screen .creative-example-head {
  position: relative;
  align-items: center;
  margin-bottom: 17px;
  min-height: 40px;
}

.creative-doodle-screen .creative-example-head b {
  position: relative;
  padding-left: 40px;
  color: var(--doodle-ink);
  font-family: inherit;
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, .55);
}

.creative-doodle-screen .creative-example-head b::before {
  content: "★";
  position: absolute;
  left: 0;
  top: -4px;
  color: var(--doodle-yellow);
  font-size: 31px;
  -webkit-text-stroke: 2px var(--doodle-ink);
  transform: rotate(-14deg);
}

.creative-doodle-screen .creative-example-head b::after {
  content: "";
  position: absolute;
  left: 38px;
  right: -12px;
  bottom: -6px;
  height: 11px;
  border-radius: 999px;
  background: rgba(255, 212, 73, .78);
  z-index: -1;
  transform: rotate(-1.5deg);
}

.creative-doodle-screen .creative-example-head span {
  position: relative;
  max-width: 178px;
  color: var(--doodle-ink);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.32;
  text-align: center;
}

.creative-doodle-screen .creative-example-head span::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -6px;
  height: 6px;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, var(--doodle-pink) 0 8px, transparent 8px 14px);
}

.creative-doodle-screen .doodle-cat {
  right: -1px;
  top: 12px;
  width: 31px;
  height: 24px;
  border: 3px solid var(--doodle-ink);
  border-radius: 48% 52% 45% 55%;
  background:
    radial-gradient(circle at 10px 13px, var(--doodle-ink) 0 2px, transparent 3px),
    radial-gradient(circle at 21px 13px, var(--doodle-ink) 0 2px, transparent 3px),
    #fff;
  transform: rotate(11deg);
}

.creative-doodle-screen .doodle-cat::before,
.creative-doodle-screen .doodle-cat::after {
  content: "";
  position: absolute;
  top: -10px;
  width: 14px;
  height: 14px;
  border-left: 3px solid var(--doodle-ink);
  border-top: 3px solid var(--doodle-ink);
  background: #fff;
}

.creative-doodle-screen .doodle-cat::before {
  left: 1px;
  transform: rotate(22deg) skew(-12deg);
}

.creative-doodle-screen .doodle-cat::after {
  right: 1px;
  transform: rotate(68deg) skew(-12deg);
}

.creative-doodle-screen .creative-example-pair {
  grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.creative-doodle-screen .creative-example-pair figure:first-child,
.creative-doodle-screen .creative-example-pair figure:last-child {
  transform: none;
}

.creative-doodle-screen .creative-example-pair img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 3px solid var(--doodle-ink);
  border-radius: 18px 12px 17px 14px;
  box-shadow: 2px 3px 0 rgba(33, 26, 22, .14);
}

.creative-doodle-screen .creative-example-pair figcaption {
  min-height: 31px;
  margin-top: 9px;
  padding: 2px 15px 4px;
  border: 3px solid var(--doodle-ink);
  border-radius: 999px 18px 999px 20px;
  background: var(--doodle-blue);
  color: var(--doodle-ink);
  font-family: inherit;
  font-size: 21px;
  font-weight: 900;
  box-shadow: 2px 2px 0 rgba(33, 26, 22, .14);
}

.creative-doodle-screen .creative-example-pair figure:last-child figcaption {
  background: var(--doodle-pink);
}

.creative-doodle-screen .creative-example-pair > i {
  width: 34px;
  height: 31px;
  border: 3px solid var(--doodle-ink);
  border-radius: 8px 12px 9px 10px;
  background: var(--doodle-yellow);
  color: var(--doodle-ink);
  font-size: 21px;
  font-weight: 900;
  box-shadow: 2px 2px 0 rgba(33, 26, 22, .14);
  transform: rotate(-3deg);
}

.creative-doodle-screen .creative-form {
  gap: 14px;
  margin-top: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.creative-doodle-screen .creative-form::before {
  display: none;
}

.creative-doodle-screen .scene-photo-field {
  position: relative;
  padding: 15px 16px;
  border: 3px solid var(--doodle-ink);
  border-radius: 21px 16px 22px 17px;
  background: rgba(255, 250, 240, .88);
  box-shadow: 2px 3px 0 rgba(33, 26, 22, .12);
}

.creative-doodle-screen .scene-photo-field::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 3px dashed rgba(91, 150, 73, .62);
  border-radius: 16px 12px 17px 13px;
  pointer-events: none;
}

.creative-doodle-screen .scene-photo-field::after {
  content: "★";
  position: absolute;
  right: 7px;
  top: -26px;
  color: var(--doodle-pink);
  font-size: 41px;
  -webkit-text-stroke: 2px var(--doodle-ink);
  transform: rotate(16deg);
}

.creative-doodle-screen .photo-upload {
  min-height: 77px;
  padding: 0 78px 0 7px;
  border: 0;
  border-radius: 0;
  background: transparent;
  grid-template-columns: 62px 1fr;
  gap: 13px;
  overflow: visible;
}

.creative-doodle-screen .photo-upload.active {
  background: transparent;
}

.creative-doodle-screen .scene-photo-mark {
  width: 54px;
  height: 54px;
  border: 3px solid var(--doodle-ink);
  border-radius: 13px 10px 14px 11px;
  background: var(--doodle-green);
  color: var(--doodle-ink);
  font-family: inherit;
  font-size: 35px;
  font-weight: 900;
  box-shadow: 2px 3px 0 rgba(33, 26, 22, .14);
  transform: rotate(-3deg);
}

.creative-doodle-screen .photo-upload b {
  position: relative;
  display: inline-block;
  color: var(--doodle-ink);
  font-family: inherit;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 900;
}

.creative-doodle-screen .photo-upload b::after {
  content: "";
  position: absolute;
  left: 0;
  right: -6px;
  bottom: -7px;
  height: 6px;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, var(--doodle-pink) 0 8px, transparent 8px 14px);
}

.creative-doodle-screen .photo-upload img {
  width: 60px;
  height: 60px;
  border: 3px solid var(--doodle-ink);
  border-radius: 13px 10px 14px 11px;
  box-shadow: 2px 3px 0 rgba(33, 26, 22, .14);
  transform: rotate(-3deg);
}

.creative-doodle-screen .doodle-camera {
  right: 11px;
  top: 17px;
  width: 59px;
  height: 42px;
  border: 3px solid var(--doodle-ink);
  border-radius: 10px 8px 12px 9px;
  background:
    radial-gradient(circle at 32px 23px, #fff 0 7px, var(--doodle-ink) 8px 12px, #fff 13px 17px, transparent 18px),
    var(--doodle-blue);
  box-shadow: 2px 3px 0 rgba(33, 26, 22, .12);
  transform: rotate(-1deg);
}

.creative-doodle-screen .doodle-camera::before {
  content: "";
  position: absolute;
  left: 12px;
  top: -10px;
  width: 25px;
  height: 12px;
  border: 3px solid var(--doodle-ink);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: var(--doodle-blue);
}

.creative-doodle-screen .doodle-camera::after {
  content: "";
  position: absolute;
  left: 42px;
  top: -15px;
  width: 4px;
  height: 14px;
  border-radius: 999px;
  background: var(--doodle-yellow);
  box-shadow: 8px 5px 0 var(--doodle-yellow), -7px 5px 0 var(--doodle-yellow);
}

.creative-doodle-screen .scene-photo-remove {
  position: relative;
  z-index: 2;
  border: 3px solid var(--doodle-ink);
  background: #fff;
  color: var(--doodle-ink);
  font-family: inherit;
  font-size: 15px;
  box-shadow: 2px 2px 0 rgba(33, 26, 22, .12);
}

.creative-doodle-screen .creative-note-field {
  position: relative;
  gap: 9px;
}

.creative-doodle-screen .creative-note-field > span {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding-left: 33px;
  color: var(--doodle-ink);
  font-family: inherit;
  font-size: 25px;
  line-height: 1.1;
  font-weight: 900;
}

.creative-doodle-screen .creative-note-field > span::before {
  content: "💡";
  position: absolute;
  left: 0;
  top: -7px;
  font-size: 29px;
  filter: drop-shadow(1px 1px 0 var(--doodle-ink));
}

.creative-doodle-screen .creative-note-field > span::after {
  content: "";
  position: absolute;
  left: 33px;
  right: -6px;
  bottom: -8px;
  height: 6px;
  background: #2d7fdb;
  border-radius: 999px;
}

.creative-doodle-screen .creative-form textarea {
  min-height: 94px;
  padding: 18px 20px;
  border: 3px solid #1267c5;
  border-radius: 17px 12px 18px 13px;
  background:
    radial-gradient(circle at 94% 78%, rgba(255, 255, 255, .8) 0 20px, transparent 21px),
    repeating-linear-gradient(-18deg, rgba(159, 227, 255, .19) 0 4px, transparent 4px 12px),
    rgba(245, 251, 255, .78);
  color: var(--doodle-ink);
  font-family: inherit;
  font-size: 17px;
  font-weight: 800;
  box-shadow: 2px 3px 0 rgba(18, 103, 197, .16);
}

.creative-doodle-screen .creative-note-field::after {
  content: "⌣";
  position: absolute;
  right: 20px;
  bottom: 12px;
  width: 45px;
  height: 31px;
  display: grid;
  place-items: center;
  border: 3px solid var(--doodle-ink);
  border-top: 0;
  border-radius: 0 0 999px 999px;
  color: var(--doodle-ink);
  font-size: 24px;
  font-weight: 900;
  background:
    radial-gradient(circle at 13px 5px, #ff86a5 0 4px, transparent 5px),
    radial-gradient(circle at 31px 5px, #ff86a5 0 4px, transparent 5px),
    #fff;
}

.creative-doodle-screen .creative-generate {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 2;
  width: 100%;
  margin: 3px 0 0;
  min-height: 64px;
  padding: 0 46px;
  border: 3px solid var(--doodle-ink);
  border-radius: 999px 32px 999px 35px;
  background:
    radial-gradient(circle at 18% 48%, rgba(255, 255, 255, .48), transparent 16%),
    repeating-linear-gradient(-15deg, rgba(255, 255, 255, .18) 0 5px, transparent 5px 12px),
    linear-gradient(100deg, #ff7ca0 0%, #ff9eb1 33%, #ffd449 60%, #ff7ca0 100%);
  color: var(--doodle-ink);
  font-family: inherit;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .02em;
  box-shadow:
    3px 5px 0 rgba(33, 26, 22, .22),
    0 14px 26px rgba(75, 42, 22, .18);
}

.creative-doodle-screen .creative-generate::before {
  content: "★";
  position: absolute;
  left: 24px;
  top: 50%;
  color: var(--doodle-yellow);
  font-size: 39px;
  line-height: 1;
  -webkit-text-stroke: 2px var(--doodle-ink);
  transform: translateY(-50%) rotate(-12deg);
}

.creative-doodle-screen .creative-generate::after {
  content: "♥";
  position: absolute;
  right: 22px;
  top: 50%;
  color: #ff5f8b;
  font-size: 34px;
  line-height: 1;
  -webkit-text-stroke: 2px var(--doodle-ink);
  transform: translateY(-50%) rotate(12deg);
}

@media (max-width: 380px) {
  .creative-doodle-screen .creative-hero h1 {
    font-size: 34px;
  }

  .creative-doodle-screen .creative-hero p {
    max-width: 250px;
    font-size: 16px;
  }

  .creative-doodle-screen .doodle-sun {
    right: 23px;
  }

  .creative-doodle-screen .creative-example-head b {
    font-size: 26px;
  }

  .creative-doodle-screen .creative-example-head span {
    max-width: 142px;
    font-size: 14px;
  }

  .creative-doodle-screen .photo-upload b {
    font-size: 20px;
  }

  .creative-doodle-screen .creative-generate {
    font-size: 20px;
  }
}

.creative-doodle-screen {
  height: 100svh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: max(12px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom));
  overflow: hidden;
  background-size: auto, auto, 20px 20px, 20px 20px, auto;
}

.creative-doodle-screen .top-row {
  flex: 0 0 43px;
  min-height: 43px;
  margin: 0;
}

.creative-doodle-screen .floating-back-button,
.creative-doodle-screen .chip,
.creative-doodle-screen .creative-hero small,
.creative-doodle-screen .creative-status,
.creative-doodle-screen .creative-example-pair figcaption,
.creative-doodle-screen .scene-photo-remove,
.creative-doodle-screen .creative-generate {
  border-radius: 50px;
}

.creative-doodle-screen .floating-back-button {
  top: max(12px, env(safe-area-inset-top));
  min-height: 38px;
  padding: 0 14px 1px 36px;
  border-width: 2.5px;
  font-size: 16px;
  box-shadow: 2px 2px 0 rgba(33, 26, 22, .17);
}

.creative-doodle-screen .floating-back-button::before {
  left: 12px;
  font-size: 25px;
}

.creative-doodle-screen .chip {
  top: max(12px, env(safe-area-inset-top));
  min-height: 38px;
  padding: 0 14px 1px 30px;
  border-width: 2.5px;
  font-size: 16px;
  box-shadow: 2px 2px 0 rgba(33, 26, 22, .14);
}

.creative-doodle-screen .chip::before {
  left: -14px;
  top: -10px;
  font-size: 29px;
  -webkit-text-stroke-width: 1.5px;
}

.creative-doodle-screen .creative-hero {
  flex: 0 0 164px;
  min-height: 0;
  margin: 0;
  padding: 17px 19px 15px;
  border-width: 2.5px;
  border-radius: 22px;
  box-shadow: 2px 3px 0 rgba(33, 26, 22, .12);
}

.creative-doodle-screen .creative-hero::before {
  inset: 9px;
  border-width: 2px;
  border-radius: 17px;
}

.creative-doodle-screen .creative-hero::after {
  left: 21px;
  top: 87px;
  width: 153px;
  height: 7px;
}

.creative-doodle-screen .creative-hero small {
  min-height: 27px;
  padding: 0 12px 1px;
  border-width: 2.5px;
  font-size: 14px;
  box-shadow: 1.5px 2px 0 rgba(33, 26, 22, .14);
}

.creative-doodle-screen .creative-hero small::before,
.creative-doodle-screen .creative-hero small::after {
  display: none;
}

.creative-doodle-screen .creative-hero h1 {
  max-width: 205px;
  margin: 13px 0 10px;
  font-size: 30px;
  line-height: 1.05;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, .5);
}

.creative-doodle-screen .creative-hero p {
  max-width: 252px;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: 0;
}

.creative-doodle-screen .creative-hero p::after {
  width: 96px;
  height: 4px;
  margin-top: 2px;
}

.creative-doodle-screen .doodle-sun {
  right: 29px;
  top: 36px;
  width: 50px;
  height: 50px;
  border-width: 2.5px;
}

.creative-doodle-screen .doodle-sun::before {
  inset: -14px;
  background:
    linear-gradient(var(--doodle-ink), var(--doodle-ink)) 50% 0 / 2px 10px no-repeat,
    linear-gradient(var(--doodle-ink), var(--doodle-ink)) 50% 100% / 2px 10px no-repeat,
    linear-gradient(90deg, var(--doodle-ink), var(--doodle-ink)) 0 50% / 10px 2px no-repeat,
    linear-gradient(90deg, var(--doodle-ink), var(--doodle-ink)) 100% 50% / 10px 2px no-repeat;
}

.creative-doodle-screen .doodle-sun i {
  left: 16px;
  top: 25px;
  width: 17px;
  height: 8px;
  border-bottom-width: 2.5px;
}

.creative-doodle-screen .doodle-palette {
  right: 25px;
  bottom: 20px;
  width: 62px;
  height: 43px;
  border-width: 2.5px;
}

.creative-doodle-screen .doodle-palette i {
  width: 10px;
  height: 10px;
  border-width: 1.5px;
}

.creative-doodle-screen .doodle-palette i:nth-child(1) {
  left: 18px;
  top: 14px;
}

.creative-doodle-screen .doodle-palette i:nth-child(2) {
  left: 36px;
  top: 15px;
}

.creative-doodle-screen .doodle-palette i:nth-child(3) {
  left: 42px;
  top: 30px;
}

.creative-doodle-screen .doodle-heart {
  right: 17px;
  top: 96px;
  font-size: 22px;
  -webkit-text-stroke-width: 1.5px;
}

.creative-doodle-screen .doodle-hero-star {
  left: 0;
  bottom: 8px;
  font-size: 30px;
  -webkit-text-stroke-width: 1.5px;
}

.creative-doodle-screen .creative-example-card {
  flex: 0 0 auto;
  margin: 0;
  padding: 12px 12px 11px;
  border-width: 2.5px;
  border-radius: 22px;
  box-shadow: 2px 3px 0 rgba(33, 26, 22, .11);
}

.creative-doodle-screen .creative-example-card::before {
  top: 58px;
  left: 22px;
  width: 44px;
  height: 13px;
  border-width: 1.5px;
  border-radius: 50px;
}

.creative-doodle-screen .creative-example-head {
  min-height: 28px;
  margin-bottom: 9px;
}

.creative-doodle-screen .creative-example-head b {
  padding-left: 28px;
  font-size: 22px;
}

.creative-doodle-screen .creative-example-head b::before {
  top: -4px;
  font-size: 24px;
  -webkit-text-stroke-width: 1.5px;
}

.creative-doodle-screen .creative-example-head b::after {
  left: 27px;
  bottom: -4px;
  height: 7px;
}

.creative-doodle-screen .creative-example-head span {
  max-width: 150px;
  font-size: 12px;
  line-height: 1.25;
}

.creative-doodle-screen .creative-example-head span::after {
  bottom: -4px;
  height: 4px;
}

.creative-doodle-screen .doodle-cat {
  right: 0;
  top: 4px;
  width: 24px;
  height: 18px;
  border-width: 2px;
}

.creative-doodle-screen .doodle-cat::before,
.creative-doodle-screen .doodle-cat::after {
  top: -8px;
  width: 10px;
  height: 10px;
  border-left-width: 2px;
  border-top-width: 2px;
}

.creative-doodle-screen .creative-example-pair {
  grid-template-columns: minmax(0, 1fr) 27px minmax(0, 1fr);
  gap: 8px;
}

.creative-doodle-screen .creative-example-pair img {
  height: clamp(108px, 30vw, 132px);
  aspect-ratio: auto;
  border-width: 2.5px;
  border-radius: 16px;
  box-shadow: 2px 2px 0 rgba(33, 26, 22, .12);
}

.creative-doodle-screen .creative-example-pair figcaption {
  min-height: 24px;
  margin-top: 6px;
  padding: 1px 11px 3px;
  border-width: 2.5px;
  font-size: 15px;
  box-shadow: 1.5px 1.5px 0 rgba(33, 26, 22, .12);
}

.creative-doodle-screen .creative-example-pair > i {
  width: 27px;
  height: 25px;
  border-width: 2.5px;
  border-radius: 50px;
  font-size: 16px;
  box-shadow: 1.5px 1.5px 0 rgba(33, 26, 22, .12);
}

.creative-doodle-screen .creative-form {
  flex: 0 0 auto;
  gap: 8px;
}

.creative-doodle-screen .scene-photo-field {
  min-height: 68px;
  padding: 10px 12px;
  border-width: 2.5px;
  border-radius: 50px;
  box-shadow: 2px 2px 0 rgba(33, 26, 22, .1);
}

.creative-doodle-screen .scene-photo-field::before {
  inset: 7px;
  border-width: 2px;
  border-radius: 50px;
}

.creative-doodle-screen .scene-photo-field::after {
  right: 9px;
  top: -18px;
  font-size: 29px;
  -webkit-text-stroke-width: 1.5px;
}

.creative-doodle-screen .photo-upload {
  min-height: 48px;
  padding: 0 60px 0 4px;
  grid-template-columns: 46px 1fr;
  gap: 10px;
}

.creative-doodle-screen .scene-photo-mark {
  width: 42px;
  height: 42px;
  border-width: 2.5px;
  border-radius: 16px;
  font-size: 27px;
  box-shadow: 2px 2px 0 rgba(33, 26, 22, .12);
}

.creative-doodle-screen .photo-upload b {
  font-size: 17px;
  line-height: 1.18;
}

.creative-doodle-screen .photo-upload b::after {
  bottom: -5px;
  height: 4px;
}

.creative-doodle-screen .photo-upload img {
  width: 44px;
  height: 44px;
  border-width: 2.5px;
  border-radius: 16px;
}

.creative-doodle-screen .doodle-camera {
  right: 10px;
  top: 15px;
  width: 44px;
  height: 31px;
  border-width: 2.5px;
  border-radius: 13px;
  background:
    radial-gradient(circle at 24px 17px, #fff 0 5px, var(--doodle-ink) 6px 9px, #fff 10px 13px, transparent 14px),
    var(--doodle-blue);
}

.creative-doodle-screen .doodle-camera::before {
  left: 9px;
  top: -8px;
  width: 19px;
  height: 9px;
  border-width: 2.5px;
  border-bottom: 0;
  border-radius: 50px 50px 0 0;
}

.creative-doodle-screen .doodle-camera::after {
  left: 32px;
  top: -11px;
  width: 3px;
  height: 10px;
  box-shadow: 6px 4px 0 var(--doodle-yellow), -5px 4px 0 var(--doodle-yellow);
}

.creative-doodle-screen .creative-note-field {
  gap: 6px;
}

.creative-doodle-screen .creative-note-field > span {
  padding-left: 25px;
  font-size: 18px;
}

.creative-doodle-screen .creative-note-field > span::before {
  top: -5px;
  font-size: 21px;
}

.creative-doodle-screen .creative-note-field > span::after {
  left: 25px;
  bottom: -5px;
  height: 4px;
}

.creative-doodle-screen .creative-form textarea {
  min-height: 58px;
  padding: 12px 58px 10px 13px;
  border-width: 2.5px;
  border-radius: 22px;
  font-size: 13px;
  line-height: 1.45;
  box-shadow: 2px 2px 0 rgba(18, 103, 197, .13);
}

.creative-doodle-screen .creative-note-field::after {
  right: 16px;
  bottom: 9px;
  width: 36px;
  height: 24px;
  border-width: 2.5px;
  border-top: 0;
  border-radius: 0 0 50px 50px;
  font-size: 18px;
}

.creative-doodle-screen .creative-generate {
  flex: 0 0 52px;
  min-height: 52px;
  margin: 0;
  padding: 0 42px;
  border-width: 2.5px;
  border-radius: 50px;
  font-size: 17px;
  box-shadow:
    2px 3px 0 rgba(33, 26, 22, .2),
    0 10px 20px rgba(75, 42, 22, .12);
}

.creative-doodle-screen .creative-generate::before {
  left: 20px;
  font-size: 30px;
  -webkit-text-stroke-width: 1.5px;
}

.creative-doodle-screen .creative-generate::after {
  right: 20px;
  font-size: 25px;
  -webkit-text-stroke-width: 1.5px;
}

@media (max-height: 760px) {
  .creative-doodle-screen {
    gap: 7px;
    padding-top: max(10px, env(safe-area-inset-top));
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }

  .creative-doodle-screen .top-row {
    flex-basis: 38px;
    min-height: 38px;
  }

  .creative-doodle-screen .floating-back-button,
  .creative-doodle-screen .chip {
    min-height: 34px;
    font-size: 14px;
  }

  .creative-doodle-screen .creative-hero {
    flex-basis: 142px;
    padding: 14px 17px 12px;
  }

  .creative-doodle-screen .creative-hero h1 {
    margin: 9px 0 7px;
    font-size: 27px;
  }

  .creative-doodle-screen .creative-hero p {
    max-width: 238px;
    font-size: 12px;
    line-height: 1.48;
  }

  .creative-doodle-screen .doodle-sun {
    width: 43px;
    height: 43px;
  }

  .creative-doodle-screen .doodle-palette {
    width: 55px;
    height: 38px;
  }

  .creative-doodle-screen .creative-example-card {
    padding: 10px 11px;
  }

  .creative-doodle-screen .creative-example-head {
    margin-bottom: 7px;
  }

  .creative-doodle-screen .creative-example-pair img {
    height: clamp(96px, 28vw, 118px);
  }

  .creative-doodle-screen .scene-photo-field {
    min-height: 58px;
    padding: 8px 11px;
  }

  .creative-doodle-screen .photo-upload {
    min-height: 42px;
  }

  .creative-doodle-screen .scene-photo-mark {
    width: 36px;
    height: 36px;
    font-size: 23px;
  }

  .creative-doodle-screen .photo-upload b {
    font-size: 15px;
  }

  .creative-doodle-screen .doodle-camera {
    width: 39px;
    height: 28px;
  }

  .creative-doodle-screen .creative-form textarea {
    min-height: 50px;
  }

  .creative-doodle-screen .creative-generate {
    flex-basis: 46px;
    min-height: 46px;
    font-size: 15px;
  }
}

.photo-workbench {
  display: grid;
  gap: 12px;
}

.photo-upload-panel {
  display: grid;
  gap: 12px;
}

.photo-drop {
  position: relative;
  min-height: 168px;
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 20px;
  border: 1px dashed rgba(168, 68, 62, .34);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 72% 24%, rgba(255, 232, 159, .48), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 247, 232, .78));
  color: var(--ink);
  text-align: center;
  box-shadow: 0 18px 34px rgba(75, 42, 22, .08);
  cursor: pointer;
  overflow: hidden;
}

.photo-drop.has-photos {
  min-height: 120px;
  padding: 16px;
  border-style: solid;
  background:
    radial-gradient(circle at 78% 20%, rgba(255, 232, 159, .44), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(255, 247, 232, .86));
}

.photo-drop input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.photo-drop b,
.photo-drop small {
  position: relative;
  z-index: 2;
  display: block;
}

.photo-drop b {
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 18px;
}

.photo-drop small {
  max-width: 240px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.photo-stack {
  position: relative;
  z-index: 1;
  width: 96px;
  height: 78px;
}

.photo-stack i {
  position: absolute;
  inset: 10px 14px;
  border: 1px solid rgba(184, 137, 62, .44);
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(255, 251, 239, .92), rgba(240, 220, 184, .82)),
    #fffaf0;
  box-shadow: 0 10px 18px rgba(75, 42, 22, .12);
}

.photo-stack i:nth-child(1) { transform: rotate(-10deg) translate(-8px, 4px); }
.photo-stack i:nth-child(2) { transform: rotate(8deg) translate(9px, 2px); }
.photo-stack i:nth-child(3) {
  transform: rotate(-1deg);
  background:
    radial-gradient(circle at 76% 26%, #e4bf69 0 8px, transparent 9px),
    linear-gradient(145deg, #f7d7b9 0 35%, #cad8bd 36% 100%);
}

.photo-drop.has-photos .photo-stack {
  width: 72px;
  height: 58px;
}

.photo-thumb-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.photo-thumb {
  position: relative;
  min-width: 0;
  padding: 6px;
  border: 1px solid rgba(184, 137, 62, .24);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 252, 244, .92), rgba(255, 244, 222, .82));
  box-shadow: 0 10px 22px rgba(75, 42, 22, .08);
}

.photo-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
  object-fit: cover;
  background: #f2e3c9;
}

.photo-thumb span {
  display: block;
  margin-top: 5px;
  color: #6e5b4e;
  font-size: 10px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.photo-remove {
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255, 250, 240, .82);
  border-radius: 50%;
  background: rgba(53, 39, 31, .86);
  color: #fff8e8;
  display: grid;
  place-items: center;
  font-size: 15px;
  line-height: 1;
  box-shadow: 0 6px 14px rgba(53, 39, 31, .22);
}

.photo-note {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid rgba(184, 137, 62, .28);
  border-radius: var(--radius);
  background: rgba(255, 249, 235, .78);
}

.photo-note span {
  color: #35271f;
  font-size: 13px;
  font-weight: 900;
}

.photo-note textarea {
  width: 100%;
  min-height: 82px;
  padding: 10px 12px;
  border: 1px solid rgba(184, 137, 62, .28);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .74);
  color: var(--ink);
  resize: none;
}

.photo-work {
  border: 1px solid rgba(215, 173, 99, .7);
  border-radius: var(--radius);
  background: #fffaf0;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.photo-work-cover {
  position: relative;
  min-height: 282px;
  padding: 24px;
  display: grid;
  align-content: end;
  background:
    radial-gradient(circle at 72% 26%, rgba(255, 236, 175, .72), transparent 26%),
    linear-gradient(145deg, rgba(239, 184, 143, .9), rgba(202, 216, 189, .88)),
    #f6ead2;
  color: #2a1d15;
  overflow: hidden;
}

.photo-work-cover.has-cover-image {
  min-height: 340px;
  background:
    linear-gradient(180deg, rgba(255, 250, 240, .12), rgba(47, 31, 22, .56)),
    var(--cover-image);
  background-size: cover;
  background-position: center;
  color: #fffaf0;
}

.photo-grain {
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255, 250, 240, .58);
  border-radius: 6px;
}

.photo-work-cover.has-cover-image .photo-grain {
  background: rgba(47, 31, 22, .08);
  border-color: rgba(255, 250, 240, .42);
}

.photo-work-cover small {
  position: relative;
  color: rgba(94, 62, 38, .72);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
}

.photo-work-cover h1 {
  position: relative;
  max-width: 260px;
  margin: 10px 0;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 33px;
  line-height: 1.16;
}

.photo-work-cover p {
  position: relative;
  max-width: 260px;
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
}

.work-seal {
  position: absolute;
  right: 22px;
  bottom: 22px;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(173, 68, 61, .82);
  color: #ad443d;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 24px;
  font-weight: 900;
  transform: rotate(-9deg);
  background: rgba(255, 248, 232, .38);
}

.photo-work-body {
  padding: 18px;
}

.photo-work-body h2 {
  margin: 0 0 10px;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 22px;
  line-height: 1.35;
}

.photo-work-body > p,
.work-section p,
.work-ending {
  color: #43352b;
  font-size: 14px;
  line-height: 1.75;
}

.work-section {
  padding: 14px 0;
  border-top: 1px solid rgba(210, 189, 152, .56);
}

.work-section b {
  display: block;
  margin-bottom: 6px;
  color: var(--coral);
  font-size: 14px;
}

.work-section p {
  margin: 0;
}

.work-ending {
  margin-top: 4px;
  padding: 12px;
  border-radius: var(--radius);
  background: rgba(255, 247, 216, .76);
}

.energy-hero {
  padding: 18px;
  border: 1px solid rgba(215, 173, 99, .7);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 78% 22%, rgba(255, 236, 175, .72), transparent 28%),
    rgba(255, 250, 240, .86);
  box-shadow: var(--shadow);
}

.energy-hero small {
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
}

.energy-hero h1 {
  margin: 8px 0 6px;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 28px;
}

.energy-hero p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.energy-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.energy-summary div {
  min-height: 62px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(184, 137, 62, .24);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .62);
}

.energy-summary b,
.energy-summary span {
  display: block;
}

.energy-summary b {
  color: var(--coral);
  font-size: 22px;
  line-height: 1;
}

.energy-summary span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.energy-guide {
  display: grid;
  gap: 8px;
  margin: 16px 0;
  padding: 12px;
  border: 1px solid rgba(184, 137, 62, .28);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 84% 16%, rgba(255, 232, 159, .42), transparent 34%),
    rgba(255, 249, 235, .78);
  box-shadow: 0 14px 28px rgba(75, 42, 22, .08);
}

.energy-guide.compact {
  margin: 12px 0 0;
}

.energy-guide.home,
.energy-guide.mine,
.energy-guide.ledger {
  margin-top: 16px;
}

.energy-guide-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.energy-guide-head b,
.energy-guide-head span {
  display: block;
}

.energy-guide-head b {
  color: #35271f;
  font-size: 14px;
}

.energy-guide-head span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.energy-guide-head em {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid rgba(184, 137, 62, .28);
  border-radius: 999px;
  background: rgba(255, 255, 255, .58);
  color: var(--coral);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.energy-rule-list {
  display: grid;
  gap: 8px;
}

.energy-rule {
  width: 100%;
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "copy reward"
    "copy action";
  gap: 4px 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(216, 199, 170, .66);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .68);
  color: var(--ink);
  text-align: left;
}

.energy-rule div {
  grid-area: copy;
}

.energy-rule b,
.energy-rule span,
.energy-rule strong,
.energy-rule small {
  display: block;
}

.energy-rule b {
  color: #2f261f;
  font-size: 13px;
}

.energy-rule span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.energy-rule strong {
  grid-area: reward;
  color: #537a4c;
  font-size: 13px;
  font-weight: 950;
  text-align: right;
}

.energy-rule small {
  grid-area: action;
  justify-self: end;
  min-width: 58px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #2d1d15;
  color: #fff8ec;
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

.energy-rule.completed {
  opacity: .72;
}

.energy-rule.completed small,
.energy-rule:disabled small {
  background: rgba(184, 137, 62, .18);
  color: #7a6750;
}

.ledger-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.ledger-row {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 64px;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(216, 199, 170, .68);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .78);
}

.ledger-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 950;
}

.ledger-mark.plus {
  color: #537a4c;
  background: rgba(190, 219, 174, .42);
}

.ledger-mark.minus {
  color: #ad443d;
  background: rgba(255, 224, 205, .66);
}

.ledger-row b,
.ledger-row span {
  display: block;
}

.ledger-row b {
  color: #2f261f;
  font-size: 14px;
}

.ledger-row span,
.ledger-row time {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.ledger-row time {
  text-align: right;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 800;
}

.daily-sign-card {
  min-height: 520px;
  padding: 20px 20px 18px;
  border: 1.5px solid #d7ad63;
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 22% 16%, rgba(255, 255, 255, .74), transparent 28%),
    linear-gradient(180deg, #fff8e8, #f6ead2);
  box-shadow: var(--shadow);
  color: #261b14;
  position: relative;
  overflow: hidden;
}

.daily-sign-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
  opacity: .34;
  pointer-events: none;
}

.daily-sign-card > * {
  position: relative;
  z-index: 1;
}

.result-screen {
  padding-bottom: 108px;
}

.result-screen .top-row {
  margin-bottom: 8px;
}

.result-screen .daily-sign-card {
  min-height: 438px;
  padding: 15px 16px 14px;
}

.sign-visual {
  height: 94px;
  margin-bottom: 10px;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  font-size: 0;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 249, 224, .95), rgba(255, 249, 224, 0) 28%),
    linear-gradient(135deg, rgba(42, 83, 73, .88), rgba(151, 122, 79, .8)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='110' viewBox='0 0 220 110'%3E%3Cg fill='none' stroke='%23f7d9a1' stroke-width='2' opacity='.58'%3E%3Cpath d='M14 74 C46 48 66 64 92 38 S156 22 206 58'/%3E%3Cpath d='M24 88 C64 70 96 82 122 58 S176 50 210 72' opacity='.42'/%3E%3C/g%3E%3Cg fill='%23fff0ca' opacity='.82'%3E%3Ccircle cx='58' cy='38' r='5'/%3E%3Ccircle cx='72' cy='30' r='3'/%3E%3Ccircle cx='154' cy='38' r='4'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}

.sign-visual.has-poster {
  min-height: 168px;
  background:
    linear-gradient(180deg, rgba(47, 31, 22, .08), rgba(47, 31, 22, .24)),
    var(--poster-url);
  background-size: cover;
  background-position: center;
}

.sign-visual::after {
  content: "花开有时";
  color: #fff5d8;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .08em;
  text-shadow: 0 2px 8px rgba(25, 28, 24, .35);
}

.sign-visual.has-poster::after {
  content: "";
}

.sign-date {
  margin-bottom: 5px;
  text-align: center;
  color: #bb7e2d;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
}

.sign-title {
  margin-bottom: 10px;
  text-align: center;
  color: #7b6a58;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 800;
}

.fortune-table {
  display: grid;
  gap: 7px;
}

.fortune-row {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 8px;
  align-items: start;
  font-family: "Songti SC", "Noto Serif SC", serif;
}

.fortune-row b {
  color: #b74841;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: 0;
}

.fortune-row span {
  color: #251a13;
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: 0;
}

.sign-divider {
  height: 1px;
  margin: 10px 0 9px;
  background: #c9b493;
}

.sign-quote {
  min-height: 42px;
  padding-right: 48px;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 16px;
  line-height: 1.45;
  font-style: italic;
  font-weight: 900;
  position: relative;
}

.sign-seal {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 40px;
  height: 40px;
  border: 2px solid #ad443d;
  color: #ad443d;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-style: normal;
  transform: rotate(-7deg);
  background: rgba(255, 248, 232, .56);
}

.stamp-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}

.stamp,
.quick-luck-row span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(168, 68, 62, .2);
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(255, 247, 216, .8);
  color: #7c332c;
  font-size: 10px;
  font-weight: 900;
}

.stamp-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(168, 68, 62, .12);
  color: #a8443e;
  font-style: normal;
  font-size: 10px;
  line-height: 1;
}

.empty-stamp {
  opacity: .62;
  background: rgba(255, 255, 255, .58);
}

.sign-credit {
  margin: 7px 0 5px;
  text-align: center;
  color: #806d5c;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 11px;
  letter-spacing: .18em;
}

.sign-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  min-height: 24px;
  margin-top: 8px;
  color: #8a7562;
  font-size: 12px;
}

.tune-button {
  min-height: 24px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: #816a58;
  font-size: 12px;
  font-weight: 800;
  box-shadow: none;
}

.tune-separator {
  color: rgba(129, 106, 88, .52);
  font-weight: 900;
  transform: translateY(-1px);
}

.share-action-row {
  display: grid;
  grid-template-columns: 1fr 48px;
  gap: 8px;
  margin-top: 12px;
  align-items: stretch;
}

.share-action-row .primary-red {
  min-height: 48px;
  font-size: 14px;
}

.download-icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  min-height: 48px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #9b4b43;
}

.download-icon-button svg {
  width: 48px;
  height: 48px;
  display: block;
}

.result-screen {
  height: 100svh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 12px;
  overflow: hidden;
  padding: max(14px, env(safe-area-inset-top)) 18px 14px;
  background:
    radial-gradient(circle at 84% 7%, rgba(255, 236, 189, .74), transparent 28%),
    radial-gradient(circle at 12% 14%, rgba(255, 255, 255, .9), transparent 30%),
    linear-gradient(180deg, #fff8ec 0%, #f2e4cd 100%);
}

.result-hero-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  margin: 0;
}

.result-home-title {
  padding: 0;
  border: 0;
  background: transparent;
  color: #3f2b20;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 900;
  box-shadow: none;
}

.retune-pill {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 18px;
  border: 1px solid rgba(226, 190, 139, .58);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 246, 230, .96), rgba(246, 228, 199, .78));
  color: #8b673e;
  font-size: 15px;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(130, 92, 48, .12), inset 0 1px 0 rgba(255, 255, 255, .78);
}

.result-retune-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.result-retune-actions .retune-pill {
  white-space: nowrap;
}

.retune-pill span {
  font-size: 20px;
  line-height: 1;
}

.lucky-sign-detail {
  position: relative;
  height: clamp(620px, calc(100svh - 150px), 666px);
  min-height: 0;
  padding: 58px 20px 16px;
  border: 1.5px solid rgba(220, 176, 103, .68);
  border-radius: 18px;
  overflow: hidden;
  color: #332319;
  background:
    radial-gradient(circle at 93% 11%, rgba(255, 244, 212, .88), transparent 18%),
    radial-gradient(circle at 8% 15%, rgba(255, 255, 255, .72), transparent 18%),
    radial-gradient(circle at 74% 22%, rgba(255, 247, 221, .86), transparent 24%),
    radial-gradient(circle at 42% 42%, rgba(255, 255, 255, .86), transparent 28%),
    linear-gradient(180deg, rgba(255, 253, 247, .95), rgba(255, 246, 229, .94)),
    #fff8ec;
  box-shadow:
    0 18px 40px rgba(93, 62, 30, .13),
    inset 0 0 0 1px rgba(255, 255, 255, .72),
    inset 0 0 0 7px rgba(255, 250, 236, .42);
}

.lucky-sign-detail::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(220, 176, 103, .52);
  border-radius: 14px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .68),
    inset 0 0 0 5px rgba(244, 220, 180, .18);
  pointer-events: none;
}

.lucky-sign-detail::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(192, 142, 62, .36) 0 1px, transparent 1px) 12px 12px / 32px 32px no-repeat,
    linear-gradient(225deg, rgba(192, 142, 62, .36) 0 1px, transparent 1px) calc(100% - 44px) 12px / 32px 32px no-repeat,
    linear-gradient(45deg, rgba(192, 142, 62, .26) 0 1px, transparent 1px) 12px calc(100% - 44px) / 32px 32px no-repeat,
    linear-gradient(315deg, rgba(192, 142, 62, .26) 0 1px, transparent 1px) calc(100% - 44px) calc(100% - 44px) / 32px 32px no-repeat,
    linear-gradient(90deg, transparent 0 16%, rgba(184, 137, 62, .07) 16.2% 16.6%, transparent 16.8%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23p)' opacity='.12'/%3E%3C/svg%3E");
  opacity: .4;
  pointer-events: none;
}

.lucky-sign-detail > * {
  position: relative;
  z-index: 1;
}

.result-date-ribbon {
  position: absolute;
  left: 28px;
  top: 0;
  z-index: 2;
  width: 76px;
  min-height: 196px;
  display: grid;
  justify-items: center;
  align-content: start;
  padding-top: 46px;
  color: #b17b39;
  background:
    linear-gradient(180deg, rgba(255, 252, 244, .95), rgba(255, 246, 226, .92));
  border: 1px solid rgba(220, 176, 103, .58);
  border-top: 0;
  border-radius: 0 0 3px 3px;
  overflow: visible;
  box-shadow: 0 14px 26px rgba(113, 75, 32, .1), inset 0 0 0 4px rgba(255, 255, 255, .32);
}

.result-date-ribbon::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -27px;
  height: 28px;
  background: linear-gradient(180deg, rgba(255, 246, 226, .92), rgba(255, 240, 212, .9));
  border: 1px solid rgba(220, 176, 103, .5);
  border-top: 0;
  clip-path: polygon(0 0, 100% 0, 100% 44%, 50% 100%, 0 44%);
  box-shadow: 0 12px 18px rgba(113, 75, 32, .08);
}

.result-date-ribbon i {
  position: absolute;
  top: -1px;
  width: 1px;
  height: 38px;
  background: rgba(184, 137, 62, .7);
}

.result-date-ribbon i::before,
.result-date-ribbon i::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 2px solid rgba(184, 137, 62, .86);
  border-radius: 999px;
}

.result-date-ribbon i::before {
  top: 31px;
  width: 14px;
  height: 14px;
  background: rgba(255, 249, 235, .86);
}

.result-date-ribbon i::after {
  top: 44px;
  width: 7px;
  height: 7px;
  background: rgba(255, 246, 222, .9);
}

.result-date-ribbon b {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  letter-spacing: .16em;
}

.result-date-ribbon strong {
  margin: 4px 0 3px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 49px;
  line-height: .95;
  font-weight: 500;
}

.result-date-ribbon span {
  color: #4a3325;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 14px;
  font-weight: 900;
}

.result-date-ribbon em {
  position: absolute;
  left: 50%;
  bottom: -72px;
  width: 24px;
  height: 62px;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 50% 7%, #b8893e 0 4px, transparent 5px),
    linear-gradient(90deg, transparent 0 26%, rgba(197, 146, 69, .92) 27% 34%, transparent 35% 45%, rgba(197, 146, 69, .9) 46% 54%, transparent 55% 65%, rgba(197, 146, 69, .82) 66% 73%, transparent 74%),
    linear-gradient(90deg, transparent 0 42%, #c59245 43% 57%, transparent 58%);
  clip-path: polygon(24% 0, 76% 0, 90% 100%, 69% 82%, 50% 100%, 31% 82%, 10% 100%);
  opacity: .9;
  filter: drop-shadow(0 8px 9px rgba(123, 78, 30, .15));
}

.result-date-ribbon em::before,
.result-date-ribbon em::after {
  content: "";
  position: absolute;
  top: 9px;
  width: 1px;
  height: 42px;
  background: rgba(184, 137, 62, .64);
}

.result-date-ribbon em::before {
  left: 7px;
  transform: rotate(5deg);
}

.result-date-ribbon em::after {
  right: 7px;
  transform: rotate(-5deg);
}

.blossom-branch {
  position: absolute;
  right: -8px;
  top: 8px;
  width: 164px;
  height: 104px;
  transform: rotate(-8deg);
  opacity: .96;
}

.blossom-branch::before {
  content: "";
  position: absolute;
  right: -4px;
  top: 50px;
  width: 160px;
  height: 72px;
  border-top: 4px solid rgba(85, 50, 27, .86);
  border-radius: 50% 42% 0 0;
  transform: rotate(-17deg);
  box-shadow: 0 -1px 0 rgba(255, 236, 205, .45);
}

.blossom-branch::after {
  content: "";
  position: absolute;
  right: 50px;
  top: 42px;
  width: 70px;
  height: 42px;
  border-top: 2px solid rgba(109, 68, 36, .72);
  border-radius: 58% 46% 0 0;
  transform: rotate(22deg);
}

.blossom-branch span {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #dca358 0 9%, transparent 10%),
    radial-gradient(ellipse at 50% 8%, #fffdf6 0 39%, transparent 41%),
    radial-gradient(ellipse at 92% 48%, #fffdf6 0 38%, transparent 40%),
    radial-gradient(ellipse at 50% 92%, #fffdf6 0 39%, transparent 41%),
    radial-gradient(ellipse at 8% 48%, #fffdf6 0 38%, transparent 40%);
  filter: drop-shadow(0 5px 9px rgba(160, 96, 36, .18));
}

.blossom-branch span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #d59a3e;
  transform: translate(-50%, -50%);
}

.blossom-branch span:nth-child(1) { right: 88px; top: 26px; }
.blossom-branch span:nth-child(2) { right: 58px; top: 35px; transform: scale(1.18) rotate(14deg); }
.blossom-branch span:nth-child(3) { right: 24px; top: 46px; transform: scale(.92) rotate(-8deg); }
.blossom-branch span:nth-child(4) { right: 112px; top: 58px; transform: scale(.72) rotate(18deg); }

.mountain-wash {
  position: absolute;
  left: 108px;
  right: 40px;
  top: 104px;
  height: 120px;
  opacity: .38;
  background:
    linear-gradient(135deg, transparent 0 42%, rgba(211, 183, 137, .22) 43% 50%, transparent 51%),
    linear-gradient(45deg, transparent 0 45%, rgba(211, 183, 137, .18) 46% 54%, transparent 55%),
    radial-gradient(ellipse at 52% 86%, rgba(211, 183, 137, .22), transparent 62%);
  clip-path: polygon(0 88%, 18% 58%, 35% 72%, 52% 16%, 72% 72%, 86% 55%, 100% 86%, 100% 100%, 0 100%);
}

.lucky-sign-detail h1 {
  margin: 76px 40px 18px 104px;
  text-align: center;
  color: #3b2a20;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 31px;
  line-height: 1.18;
  font-weight: 900;
  letter-spacing: .08em;
}

.title-ornament {
  position: absolute;
  top: 188px;
  color: #be8233;
  font-size: 16px;
}

.title-ornament.left { left: 122px; }
.title-ornament.right { right: 76px; }

.result-mark-card {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(220, 176, 103, .6);
  border-radius: 9px;
  background: linear-gradient(180deg, #fff8eb, #fff1dc);
  color: #b43733;
  box-shadow: 0 14px 26px rgba(96, 58, 24, .16);
  transform: rotate(-8deg);
}

button.result-mark-card {
  cursor: pointer;
}

.wordbox-mark-entry {
  transition: transform .18s ease, box-shadow .18s ease;
}

.wordbox-mark-entry:active {
  transform: rotate(-8deg) translateY(1px) scale(.98);
  box-shadow: 0 10px 20px rgba(96, 58, 24, .13);
}

.result-mark-card span {
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 50px;
  line-height: 1;
  font-weight: 900;
}

.result-mark-card i {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border: 1px solid #c64f43;
  color: #c64f43;
  font-size: 9px;
  font-style: normal;
}

.result-mark-card em {
  position: absolute;
  left: 50%;
  bottom: -12px;
  min-width: 78px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(198, 79, 67, .16);
  background: rgba(255, 249, 235, .92);
  color: #9f4439;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .03em;
  box-shadow: 0 7px 14px rgba(96, 58, 24, .08);
  transform: translateX(-50%) rotate(8deg);
}

.result-main-sentence {
  max-width: 288px;
  margin: 0 auto 18px;
  text-align: center;
  color: #3d2b20;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 19px;
  line-height: 1.62;
  font-weight: 700;
}

.quote-mark {
  position: relative;
  display: inline-block;
  color: rgba(204, 153, 76, .58);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 30px;
  line-height: 0;
  transform: translateY(8px);
}

.quote-left {
  margin-right: 4px;
}

.quote-right {
  margin-left: 4px;
}

.mind-guide-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 2px 0 10px;
  color: #51392a;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .12em;
}

.mind-guide-title span {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(220, 176, 103, .76), transparent);
}

.mind-guide-title span::after {
  content: "✧";
  display: block;
  text-align: center;
  color: #d1a35d;
  font-size: 11px;
  transform: translateY(-7px);
}

.mind-guide-panel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 10px 8px;
  border: 1px solid rgba(220, 176, 103, .3);
  border-radius: 12px;
  background: rgba(255, 250, 239, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
}

.mind-guide-item {
  min-width: 0;
  display: grid;
  grid-template-rows: 34px 18px minmax(34px, auto);
  justify-items: center;
  align-items: start;
  gap: 4px;
  text-align: center;
}

.mind-guide-item i {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 247, 231, .9);
  color: #a53d39;
  border: 1px solid rgba(220, 176, 103, .18);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 15px;
  font-weight: 900;
  font-style: normal;
  box-shadow: 0 6px 14px rgba(97, 60, 27, .08);
}

.mind-guide-item.color i {
  color: #9b6c2f;
}

.mind-guide-item b {
  color: #b5433e;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 900;
}

.mind-guide-item span {
  color: #3d2d22;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 12px;
  line-height: 1.38;
  white-space: pre-line;
  display: -webkit-box;
  min-height: 34px;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.waiting-luck-button {
  min-height: 40px;
  margin: 14px auto 0;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(220, 176, 103, .34);
  border-radius: 999px;
  background: linear-gradient(180deg, #fffaf0, #f8ebd5);
  color: #725037;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 15px;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(110, 70, 28, .14);
}

.waiting-luck-button span {
  color: #d59a3e;
  font-size: 20px;
}

.result-luck-strip {
  width: min(288px, 100%);
  height: 40px;
  margin: 12px auto 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.result-luck-track {
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  animation: resultLuckMarquee 14s linear infinite;
}

.result-luck-track .stamp {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-color: rgba(168, 68, 62, .22);
  background: rgba(255, 244, 213, .82);
  font-size: 11px;
}

@keyframes resultLuckMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.result-bottom-actions {
  position: fixed;
  left: 50%;
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 70;
  width: min(calc(100% - 88px), 318px);
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 0;
  padding: 0;
  transform: translateX(-50%);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.result-bottom-actions .primary-red {
  width: 100%;
  min-height: 52px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .16), transparent 34%),
    linear-gradient(135deg, rgba(177, 45, 42, .96), rgba(210, 72, 68, .96) 54%, rgba(151, 37, 36, .98));
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 16px 34px rgba(76, 32, 26, .28), inset 0 1px 0 rgba(255, 255, 255, .24);
}

.return-today-button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .9);
  font-size: 15px;
  font-weight: 600;
  box-shadow: none;
}

.return-today-button span {
  font-size: 18px;
}

@media (max-height: 790px) {
  .result-screen {
    gap: 10px;
    padding: max(12px, env(safe-area-inset-top)) 16px 12px;
  }

  .result-home-title {
    font-size: 26px;
  }

  .retune-pill {
    min-height: 40px;
    padding: 0 16px;
  }

  .lucky-sign-detail {
    height: calc(100svh - 138px);
    padding-bottom: 12px;
  }

  .lucky-sign-detail h1 {
    margin-top: 66px;
    margin-bottom: 14px;
    font-size: 29px;
  }

  .title-ornament {
    top: 176px;
  }

  .result-mark-card {
    width: 88px;
    height: 88px;
    margin-bottom: 14px;
  }

  .result-mark-card span {
    font-size: 46px;
  }

  .result-main-sentence {
    margin-bottom: 14px;
    font-size: 18px;
    line-height: 1.52;
  }

  .mind-guide-panel {
    padding: 8px 7px;
  }

  .waiting-luck-button {
    min-height: 38px;
    margin-top: 10px;
  }

  .result-bottom-actions .primary-red,
  .return-today-button {
    min-height: 50px;
  }
}

.share-head {
  padding: 12px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line);
  margin-bottom: 14px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.share-screen {
  padding-bottom: 132px;
}

.daily-share-screen {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  padding-top: max(14px, env(safe-area-inset-top));
  padding-bottom: 144px;
  background: #efe3d2;
  overflow: hidden auto;
}

.daily-share-screen::before {
  content: "";
  position: fixed;
  inset: -30px;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(49, 31, 22, .04), rgba(49, 31, 22, .34)),
    var(--daily-cover-bg, url("/images/mine-bg.png")) center / cover no-repeat;
  filter: blur(26px);
  transform: scale(1.08);
  opacity: .72;
}

.daily-share-screen::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 250, 236, .62), transparent 32%),
    linear-gradient(180deg, rgba(255, 248, 232, .42), rgba(77, 51, 35, .16));
  pointer-events: none;
}

.daily-share-paper-page {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 32px), 390px);
  margin: 0 auto;
  padding: 14px 14px 16px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 248, 232, .42);
  border-radius: 26px;
  background:
    radial-gradient(circle at 16% 5%, rgba(255, 255, 255, .58), transparent 28%),
    linear-gradient(180deg, rgba(255, 250, 238, .72), rgba(246, 229, 199, .58));
  box-shadow:
    0 22px 46px rgba(53, 31, 18, .15),
    inset 0 1px 0 rgba(255, 255, 255, .58);
  backdrop-filter: blur(18px);
}

.daily-share-paper-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(113, 78, 48, .06), transparent 14%, transparent 86%, rgba(113, 78, 48, .05)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='132' viewBox='0 0 132 132'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='132' height='132' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E");
  opacity: .4;
  pointer-events: none;
}

.daily-share-head {
  position: relative;
  z-index: 2;
  min-height: 52px;
  margin: 0 0 10px;
  padding: 0 1px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.daily-share-head .avatar {
  width: 40px;
  height: 40px;
  background:
    radial-gradient(circle at 42% 26%, rgba(255, 255, 255, .9), transparent 36%),
    rgba(255, 239, 206, .74);
  color: #8e4a32;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 18px;
  box-shadow: inset 0 0 0 1px rgba(142, 74, 50, .12);
}

.daily-share-head small {
  display: block;
  margin-bottom: 2px;
  color: rgba(125, 80, 48, .55);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
}

.daily-share-head b {
  color: #2f2118;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 17px;
  font-weight: 800;
}

.daily-share-head span {
  display: -webkit-box;
  margin-top: 3px;
  overflow: hidden;
  color: rgba(65, 46, 33, .66);
  font-size: 12px;
  line-height: 1.35;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.daily-share-card-wrap {
  position: relative;
  margin: 0;
  overflow: visible;
  border-radius: 20px;
}

.creative-unlock-share-screen {
  padding-top: 22px;
}

.creative-unlock-hero {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 8px;
  margin-bottom: 14px;
}

.creative-unlock-hero .avatar {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(255, 250, 240, .86);
  color: #a8443e;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 20px;
  box-shadow: 0 12px 24px rgba(75, 42, 22, .1);
}

.creative-unlock-hero small {
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
}

.creative-unlock-hero h1 {
  margin: 0;
  color: #2f261f;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 26px;
  line-height: 1.22;
}

.creative-unlock-hero p {
  max-width: 290px;
  margin: 0;
  color: #6c5d50;
  font-size: 13px;
  line-height: 1.7;
}

.creative-unlock-preview {
  position: relative;
  width: min(270px, 82vw);
  margin: 0 auto 14px;
  padding: 9px;
  border-radius: 18px;
  background: rgba(255, 250, 240, .82);
  box-shadow: 0 22px 42px rgba(75, 42, 22, .14);
  transform: rotate(-2deg);
}

.creative-unlock-preview img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 12px;
}

.creative-unlock-preview span {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  min-height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(47, 38, 31, .62);
  color: #fffaf0;
  font-size: 12px;
  font-weight: 900;
  backdrop-filter: blur(8px);
}

.creative-unlock-rule {
  padding: 14px;
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 88% 14%, rgba(255, 230, 128, .38), transparent 32%),
    rgba(255, 250, 240, .72);
  box-shadow: 0 12px 28px rgba(75, 42, 22, .08);
}

.creative-unlock-rule b,
.creative-unlock-rule span {
  display: block;
}

.creative-unlock-rule b {
  color: #2f261f;
  font-size: 15px;
}

.creative-unlock-rule span {
  margin-top: 6px;
  color: #6c5d50;
  font-size: 12px;
  line-height: 1.6;
}

.luck-drop-stack {
  position: relative;
  z-index: 5;
  display: block;
  margin: 0 0 12px;
  padding: 0 8px;
}

.luck-drop-notice {
  width: 100%;
  min-height: 40px;
  padding: 4px 2px 4px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(69, 45, 32, .94);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: luckNoticeReveal .68s cubic-bezier(.18, .88, .22, 1) both;
}

.luck-drop-body {
  min-width: 0;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0;
  color: inherit;
  background: transparent;
  text-align: left;
}

.luck-drop-body i {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: transparent;
  border: 0;
  font-style: normal;
  font-size: 13px;
  box-shadow: none;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .34);
}

.luck-drop-body span,
.luck-drop-body b,
.luck-drop-body small {
  min-width: 0;
  display: block;
  text-align: left;
}

.luck-drop-body b {
  overflow: hidden;
  color: rgba(255, 253, 246, .94);
  font-size: 12px;
  line-height: 1.25;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .34);
}

.luck-drop-body small {
  margin-top: 1px;
  color: rgba(255, 253, 246, .7);
  font-size: 10px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.luck-drop-receive {
  min-height: 27px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(255, 253, 246, .12);
  color: rgba(255, 253, 246, .92);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
  text-shadow: 0 1px 7px rgba(0, 0, 0, .3);
}

@keyframes luckNoticeReveal {
  0% { opacity: 0; clip-path: inset(0 0 100% 0 round 999px); transform: translateY(-12px) scale(.98); }
  62% { opacity: 1; clip-path: inset(0 0 0 0 round 999px); transform: translateY(2px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pullRefreshGlow {
  0%, 100% { transform: scale(.82); opacity: .58; }
  50% { transform: scale(1.14); opacity: 1; }
}

.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--mint);
  color: var(--teal-deep);
  display: grid;
  place-items: center;
  font-weight: 900;
  flex: 0 0 auto;
}

.avatar img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  object-fit: cover;
}

.avatar.big {
  width: 58px;
  height: 58px;
  font-size: 20px;
}

.share-head b {
  display: block;
  font-size: 14px;
  margin-bottom: 2px;
}

.share-head span {
  color: var(--muted);
  font-size: 12px;
}

.share-card-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}

.share-sign-detail {
  height: auto;
  min-height: 392px;
  padding-top: 34px;
  padding-bottom: 22px;
}

.share-sign-detail .result-date-ribbon {
  left: 18px;
  width: 58px;
  min-height: 132px;
  padding-top: 30px;
}

.share-sign-detail .result-date-ribbon strong {
  font-size: 34px;
}

.share-sign-detail .result-date-ribbon span {
  font-size: 12px;
}

.share-sign-detail .result-date-ribbon em {
  bottom: -50px;
  height: 42px;
}

.share-sign-detail .blossom-branch {
  right: -18px;
  top: 0;
  transform: scale(.82) rotate(-8deg);
}

.share-sign-detail h1 {
  margin: 52px 34px 12px 78px;
  font-size: 24px;
}

.share-sign-detail .title-ornament {
  top: 144px;
}

.share-sign-detail .title-ornament.left {
  left: 100px;
}

.share-sign-detail .title-ornament.right {
  right: 58px;
}

.share-sign-detail .result-mark-card {
  width: 92px;
  height: 92px;
  margin-bottom: 16px;
}

.share-sign-detail .result-mark-card span {
  font-size: 48px;
}

.share-sign-detail .result-main-sentence {
  max-width: 270px;
  margin-bottom: 16px;
  font-size: 18px;
  line-height: 1.58;
}

.share-sign-detail .quote-left {
  margin-right: 3px;
}

.share-sign-detail .quote-right {
  margin-left: 3px;
}

.share-sign-whisper {
  width: min(226px, calc(100% - 76px));
  margin: 2px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  color: #9b6c2f;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .14em;
}

.share-sign-whisper span {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(220, 176, 103, .72), transparent);
}

.share-card-hint {
  width: fit-content;
  margin: 10px auto 0;
  padding: 8px 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px dashed rgba(184, 137, 62, .34);
  border-radius: 999px;
  background: rgba(255, 248, 232, .56);
  color: #7b5d42;
  font-size: 12px;
  font-weight: 900;
}

.mini-sign-card {
  min-height: 274px;
  padding: 16px;
}

.mini-sign-card .sign-visual {
  height: 88px;
}

.mini-sign-card .sign-title {
  margin-bottom: 8px;
}

.mini-quote {
  margin: 0;
  color: #2f241d;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 18px;
  line-height: 1.45;
  font-weight: 900;
  text-align: center;
}

.quick-luck-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  margin-top: 12px;
}

.quick-luck-row span {
  flex: 0 0 auto;
  padding: 6px 10px;
  font-size: 12px;
}

.blessing-orbit {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  border: 1px solid rgba(168, 68, 62, .24);
  display: grid;
  place-items: center;
  color: #ad443d;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 22px;
  font-weight: 900;
  transform: rotate(-8deg);
  background: rgba(255, 248, 232, .72);
  box-shadow: 0 12px 30px rgba(75, 42, 22, .14);
}

.blessing-orbit::before,
.blessing-orbit::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(168, 68, 62, .24);
  inset: -8px;
  animation: orbitPulse 2.4s ease-in-out infinite;
}

.blessing-orbit::after {
  inset: -16px;
  animation-delay: .5s;
}

.luck-barrage {
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 4;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 13%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 13%, #000 88%, transparent 100%);
}

.luck-float {
  position: absolute;
  left: calc(100% + 18px);
  min-width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 18% 24%, rgba(255, 255, 255, .82), rgba(255, 255, 255, 0) 32%),
    rgba(255, 247, 216, .9);
  color: #7c332c;
  border: 1px solid rgba(168, 68, 62, .24);
  box-shadow: 0 8px 20px rgba(75, 42, 22, .13);
  font-size: 13px;
  font-weight: 900;
  filter: drop-shadow(0 4px 10px rgba(255, 221, 136, .32));
  animation: luckFly 5.4s cubic-bezier(.22, .72, .2, 1) infinite;
}

.daily-share-screen .daily-cover-stage .cover-luck-barrage {
  inset: 18px 0 auto;
  height: calc(100% - 36px);
  z-index: 5;
  opacity: .92;
}

.daily-share-screen .daily-cover-stage .cover-luck-barrage .luck-float {
  padding: 2px 5px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(255, 252, 238, .98);
  -webkit-text-stroke: .24px rgba(32, 42, 24, .62);
  text-shadow:
    0 1px 1px rgba(20, 28, 15, .62),
    1px 0 1px rgba(20, 28, 15, .46),
    -1px 0 1px rgba(20, 28, 15, .46),
    0 -1px 1px rgba(20, 28, 15, .36),
    0 0 9px rgba(20, 28, 15, .42),
    0 8px 16px rgba(18, 28, 14, .22);
  filter: none;
  font-size: 13px;
  font-weight: 700;
  animation-name: coverLuckFly;
}

.daily-share-screen .daily-cover-stage .cover-luck-barrage .stamp-actor-stack {
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
  vertical-align: -3px;
}

.daily-share-screen .daily-cover-stage .cover-luck-barrage .stamp-actor-avatar {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  margin-left: calc(var(--avatar-index) * -6px);
  border: 1px solid rgba(255, 253, 246, .86);
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .84), transparent 42%),
    rgba(255, 248, 224, .9);
  color: rgba(69, 61, 40, .94);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  box-shadow:
    0 1px 4px rgba(20, 28, 15, .28),
    0 0 0 1px rgba(20, 28, 15, .08);
}

.daily-share-screen .daily-cover-stage .cover-luck-barrage .stamp-actor-avatar:first-child {
  margin-left: 0;
}

.daily-share-screen .daily-cover-stage .cover-luck-barrage .stamp-actor-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.daily-share-screen .daily-cover-stage .cover-luck-barrage .luck-float::after {
  display: none;
}

.daily-share-screen .daily-cover-stage .cover-luck-barrage .stamp-count {
  min-width: auto;
  height: auto;
  padding: 0 0 0 3px;
  background: transparent;
  color: rgba(255, 252, 238, .96);
  -webkit-text-stroke: .22px rgba(98, 52, 44, .68);
  font-size: 10.5px;
  font-weight: 700;
  text-shadow:
    0 1px 1px rgba(86, 42, 32, .58),
    0 0 7px rgba(86, 42, 32, .4);
}

.daily-share-card-wrap .luck-float {
  padding: 6px 11px;
  border: 1px solid rgba(255, 246, 222, .48);
  background:
    radial-gradient(circle at 18% 24%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 34%),
    rgba(255, 248, 226, .78);
  box-shadow: 0 8px 20px rgba(51, 31, 20, .11);
  font-size: 12px;
}

.luck-float::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 222, 143, .78);
  box-shadow: 12px -7px 0 rgba(255, 222, 143, .42), 18px 6px 0 rgba(255, 222, 143, .28);
  transform: translateY(-50%);
}

.preset-0 { top: 38px; --float-y: -8px; --exit-y: 5px; animation-delay: 0s; }
.preset-1 { top: 88px; --float-y: 6px; --exit-y: -6px; animation-delay: .9s; }
.preset-2 { top: 140px; --float-y: -4px; --exit-y: 8px; animation-delay: 1.8s; }
.preset-3 { top: 192px; --float-y: 7px; --exit-y: -4px; animation-delay: 2.7s; }

.share-stamp-panel {
  margin-top: 12px;
  padding: 10px 0 4px;
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 236, 172, .46), transparent 28%),
    rgba(255, 250, 240, .56);
}

.daily-share-stamp-panel {
  margin: 0;
  padding: 0 0 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.daily-share-action-area {
  margin-top: 14px;
  padding: 0;
  border-top: 0;
}

.share-stamp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 4px 8px;
}

.daily-share-stamp-panel .share-stamp-head {
  padding: 0 2px 10px;
}

.share-stamp-head b,
.share-stamp-head span {
  display: block;
}

.share-stamp-head b {
  color: #3b3028;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 15px;
  line-height: 1.2;
}

.daily-share-stamp-panel .share-stamp-head b {
  font-size: 15px;
  font-weight: 800;
}

.share-stamp-head span {
  margin-top: 2px;
  color: #8a7562;
  font-size: 11px;
}

.daily-share-stamp-panel .share-stamp-head span {
  color: rgba(97, 73, 53, .62);
  font-size: 11px;
}

.stamp-picker {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 4px 8px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.daily-share-stamp-panel .stamp-picker {
  gap: 7px;
  padding: 1px 0 9px;
}

.stamp-picker::-webkit-scrollbar {
  display: none;
}

.stamp-button {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 4px 12px 4px 7px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  scroll-snap-align: start;
  border-radius: 999px;
  border: 1px solid rgba(168, 68, 62, .2);
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .82), transparent 34%),
    rgba(255, 247, 216, .78);
  color: #7c332c;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(90, 54, 25, .08);
}

.daily-share-stamp-panel .stamp-button {
  min-height: 42px;
  padding: 4px 11px 4px 6px;
  border-color: rgba(137, 47, 39, .12);
  background: rgba(255, 252, 244, .46);
  color: rgba(70, 48, 35, .82);
  font-weight: 700;
  box-shadow: none;
}

.stamp-button i {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .66);
  font-style: normal;
  font-size: 16px;
}

.daily-share-stamp-panel .stamp-button i {
  width: 30px;
  height: 30px;
  background: rgba(255, 245, 224, .74);
  font-size: 16px;
}

.stamp-button span {
  white-space: nowrap;
}

.stamp-button.active {
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 232, 168, .42), transparent 36%),
    #7c332c;
  color: #fff8e8;
  border-color: #7c332c;
  transform: translateY(-2px) rotate(-1deg);
}

.daily-share-stamp-panel .stamp-button.active {
  border-color: rgba(158, 59, 47, .22);
  background:
    radial-gradient(circle at 22% 20%, rgba(255, 255, 255, .72), transparent 36%),
    rgba(158, 59, 47, .9);
  color: #fff8eb;
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(104, 48, 33, .14);
}

.stamp-button.active i {
  background: rgba(255, 248, 232, .18);
}

.blessing-note {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(184, 137, 62, .28);
  border-radius: var(--radius);
  background: rgba(255, 248, 232, .8);
  color: #5a4738;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
  font-family: "Songti SC", "Noto Serif SC", serif;
}

.message-paper {
  margin-top: 12px;
  padding: 12px;
  border: 1px dashed rgba(184, 137, 62, .42);
  border-radius: var(--radius);
  background: rgba(255, 250, 240, .86);
  display: grid;
  gap: 8px;
}

.daily-share-message {
  margin: 0;
  padding: 7px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.share-sticky-actions {
  position: fixed;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 72;
  width: min(calc(100% - 32px), 398px);
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 8px;
  padding: 8px;
  transform: translateX(-50%);
  border: 1px solid rgba(184, 137, 62, .24);
  border-radius: 999px;
  background: rgba(255, 247, 232, .9);
  box-shadow: 0 18px 40px rgba(75, 42, 22, .18);
  backdrop-filter: blur(14px);
}

.daily-share-screen .share-sticky-actions {
  width: min(calc(100% - 40px), 382px);
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.share-sticky-actions button {
  min-height: 52px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 900;
}

.daily-share-screen .share-sticky-actions button {
  min-height: 50px;
  box-shadow: 0 14px 28px rgba(47, 29, 18, .18);
}

.daily-share-screen .share-sticky-actions .secondary {
  border-color: rgba(255, 248, 232, .56);
  background: rgba(255, 249, 238, .78);
  color: rgba(85, 58, 40, .86);
  backdrop-filter: blur(12px);
}

.daily-share-screen .share-sticky-actions .primary {
  border-color: rgba(116, 51, 42, .92);
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 228, 176, .22), transparent 34%),
    #75342d;
  color: #fff9ec;
}

.message-paper b {
  color: #3b3028;
  font-size: 13px;
}

.daily-share-message b {
  color: #2f2118;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 15px;
  font-weight: 800;
}

.daily-share-message-head {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 8px;
}

.message-paper textarea {
  width: 100%;
  min-height: 62px;
  padding: 10px;
  border: 1px solid rgba(184, 137, 62, .28);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .86);
  color: var(--ink);
  resize: none;
  font-size: 13px;
}

.daily-share-message textarea {
  min-height: 58px;
  border: 1px solid rgba(137, 88, 48, .11);
  border-radius: 16px;
  background: rgba(255, 253, 248, .66);
  color: #33251b;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
}

.message-paper span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.daily-share-message span {
  color: rgba(85, 65, 48, .6);
  font-size: 11px;
  white-space: nowrap;
}

.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 16px;
}

.actions.one {
  grid-template-columns: 1fr;
}

.blessing-effect {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 28;
  display: grid;
  place-items: center;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 247, 213, .88), rgba(255, 247, 213, .28) 28%, rgba(43, 34, 31, .18) 62%, rgba(43, 34, 31, 0) 100%);
  transition: opacity .18s ease, visibility .18s ease;
}

.blessing-effect.active {
  opacity: 1;
  visibility: visible;
}

.blessing-effect::before,
.blessing-effect::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 1px solid rgba(184, 137, 62, .34);
  box-shadow: 0 0 42px rgba(247, 205, 126, .26);
  transform: scale(.3);
  opacity: 0;
}

.blessing-effect.active::before {
  animation: blessingRing 1.25s ease-out forwards;
}

.blessing-effect.active::after {
  animation: blessingRing 1.25s .18s ease-out forwards;
}

.effect-paper {
  position: relative;
  width: 248px;
  min-height: 212px;
  padding: 24px 20px 20px;
  border-radius: var(--radius);
  border: 1px solid rgba(215, 173, 99, .72);
  background: linear-gradient(180deg, rgba(255, 255, 255, .68), rgba(255, 255, 255, 0)), #fff7e8;
  box-shadow: 0 28px 70px rgba(75, 42, 22, .2);
  text-align: center;
  transform: translateY(18px) scale(.92) rotate(-1deg);
  opacity: 0;
}

.effect-paper::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(184, 137, 62, .24);
  border-radius: 6px;
}

.blessing-effect.active .effect-paper {
  animation: blessingPaper 3.45s cubic-bezier(.18, .8, .24, 1) forwards;
}

.effect-main {
  position: relative;
  color: #2f241d;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 25px;
  line-height: 1.25;
  font-weight: 900;
}

.effect-blessing {
  position: relative;
  margin-top: 14px;
  color: #8c3e37;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.35;
}

.effect-seal {
  position: relative;
  width: 54px;
  height: 54px;
  margin: 18px auto 0;
  border: 2px solid #ad443d;
  color: #ad443d;
  display: grid;
  place-items: center;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 20px;
  font-weight: 900;
  transform: rotate(-10deg) scale(.84);
  opacity: 0;
}

.blessing-effect.active .effect-seal {
  animation: sealDrop 1.05s .2s cubic-bezier(.2, .8, .24, 1) forwards;
}

.spark {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--spark-color, #f3c66f);
  box-shadow: 0 0 14px var(--spark-color, #f3c66f);
  opacity: 0;
}

.blessing-effect.active .spark {
  animation: sparkFly 1.05s var(--delay, 0s) cubic-bezier(.2, .72, .16, 1) forwards;
}

.s1 { --x: -118px; --y: -88px; --s: .9; --delay: .04s; }
.s2 { --x: 112px; --y: -92px; --s: .75; --delay: .08s; }
.s3 { --x: 132px; --y: 42px; --s: 1.2; --delay: .14s; }
.s4 { --x: -126px; --y: 52px; --s: .92; --delay: .1s; }
.s5 { --x: 42px; --y: 122px; --s: .72; --delay: .18s; }
.s6 { --x: -48px; --y: 118px; --s: 1; --delay: .16s; }
.s7 { --x: 8px; --y: -132px; --s: .78; --delay: .2s; }
.s8 { --x: 0; --y: 136px; --s: .88; --delay: .06s; }

.fortune-book {
  margin: 14px 8px 24px;
  min-height: 610px;
  position: relative;
  perspective: 1100px;
  transform-style: preserve-3d;
  filter: drop-shadow(0 26px 34px rgba(75, 42, 22, .18));
  touch-action: pan-y;
}

.fortune-book::before,
.fortune-book::after {
  content: "";
  position: absolute;
  inset: 16px -10px -14px 18px;
  border-radius: 9px 13px 13px 9px;
  background: repeating-linear-gradient(90deg, #e8d8bd 0, #e8d8bd 2px, #f8ecd4 2px, #f8ecd4 5px);
  border: 1px solid rgba(130, 91, 58, .2);
  box-shadow: 0 18px 34px rgba(75, 42, 22, .22), inset -18px 0 18px rgba(130, 91, 58, .14);
  transform: rotate(.8deg);
}

.fortune-book::after {
  inset: 26px -16px -22px 30px;
  opacity: .62;
  transform: rotate(1.5deg);
}

.fortune-cover,
.fortune-pages {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  border: 1px solid #d2bd98;
  box-shadow: 0 24px 48px rgba(75, 42, 22, .18);
  transform-origin: left center;
  transition: transform .72s cubic-bezier(.18, .72, .2, 1), opacity .36s ease;
  overflow: visible;
  z-index: 1;
  backface-visibility: hidden;
}

.fortune-cover {
  z-index: 4;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 16px;
  padding: 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)), #7a4a33;
  color: #fff8e8;
  text-align: center;
}

.fortune-cover::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(255, 248, 232, .32);
  border-radius: var(--radius);
}

.fortune-cover::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 34px;
  background:
    linear-gradient(90deg, rgba(46, 24, 16, .36), rgba(255, 255, 255, .08) 42%, rgba(46, 24, 16, .18)),
    repeating-linear-gradient(180deg, rgba(255, 248, 232, .12) 0, rgba(255, 248, 232, .12) 2px, transparent 2px, transparent 8px);
  border-right: 1px solid rgba(255, 248, 232, .18);
  box-shadow: inset -8px 0 18px rgba(40, 22, 14, .22);
}

.fortune-cover small,
.fortune-cover h3,
.fortune-cover p,
.book-seal,
.cover-open-hint {
  position: relative;
}

.fortune-cover small {
  color: #efd196;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  letter-spacing: .2em;
  font-weight: 800;
}

.fortune-cover h3 {
  margin: 0;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 30px;
  line-height: 1.22;
}

.fortune-cover p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(255, 248, 232, .86);
}

.diary-head {
  align-items: flex-start;
}

.diary-head-actions {
  display: grid;
  justify-items: end;
  gap: 8px;
  flex: 0 0 auto;
}

.diary-tool-button {
  min-height: 32px;
  padding: 0 13px;
  border: 1px solid rgba(184, 137, 62, .34);
  border-radius: 999px;
  background: rgba(255, 250, 240, .78);
  color: #8b6424;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 10px 18px rgba(75, 42, 22, .08);
}

.book-seal {
  width: 58px;
  height: 58px;
  border: 2px solid #f1cbb0;
  color: #f1cbb0;
  display: grid;
  place-items: center;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 22px;
  font-weight: 900;
  transform: rotate(-10deg);
}

.cover-open-hint {
  min-width: 132px;
  min-height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255, 248, 232, .36);
  background: rgba(255, 248, 232, .14);
  color: #fff8e8;
  font-size: 13px;
  font-weight: 900;
  backdrop-filter: blur(6px);
}

.fortune-pages {
  background:
    radial-gradient(circle at 84% 18%, rgba(255, 236, 175, .42), transparent 28%),
    linear-gradient(90deg, rgba(116, 77, 45, .16), transparent 30px),
    #fff7e8;
  opacity: 0;
  transform: translateX(18px) scale(.97);
  display: block;
  padding: 18px 20px 18px 28px;
  perspective: 1200px;
  transform-style: preserve-3d;
  box-shadow: inset -10px 0 0 rgba(166, 128, 82, .1), inset 14px 0 18px rgba(116, 77, 45, .12), 0 22px 48px rgba(75, 42, 22, .18);
  touch-action: pan-y;
  cursor: grab;
}

.diary-turn-book {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  transform-style: preserve-3d;
}

.diary-turn-book:not(.turn-ready) .diary-turn-page:not(.active) {
  display: none;
}

.diary-turn-book.turn-ready {
  overflow: visible !important;
}

.diary-turn-book .page-wrapper {
  overflow: visible !important;
}

.diary-turn-page {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 8px 12px 12px 8px;
  background-color: #fff8ea;
  background-image:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, .78), transparent 24%),
    repeating-linear-gradient(180deg, rgba(210, 189, 152, .12) 0, rgba(210, 189, 152, .12) 1px, transparent 1px, transparent 19px),
    linear-gradient(90deg, rgba(116, 77, 45, .14), transparent 34px, transparent calc(100% - 20px), rgba(120, 82, 49, .08));
}

.diary-turn-book .turn-page {
  background-color: #fff8ea;
  background-image:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, .78), transparent 24%),
    repeating-linear-gradient(180deg, rgba(210, 189, 152, .12) 0, rgba(210, 189, 152, .12) 1px, transparent 1px, transparent 19px),
    linear-gradient(90deg, rgba(116, 77, 45, .14), transparent 34px, transparent calc(100% - 20px), rgba(120, 82, 49, .08)),
    #fff8ea;
}

.diary-turn-book .diary-turn-page .fortune-page {
  width: 100%;
  height: 100%;
}

.fortune-pages::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 28px;
  right: 20px;
  z-index: 6;
  border: 1px solid rgba(210, 189, 152, .72);
  border-radius: 8px 12px 12px 8px;
  background:
    linear-gradient(90deg, rgba(116, 77, 45, .12), rgba(255, 255, 255, .5) 18%, rgba(255, 250, 240, .96) 58%, #fff7e8),
    repeating-linear-gradient(180deg, rgba(210, 189, 152, .22) 0, rgba(210, 189, 152, .22) 1px, transparent 1px, transparent 12px);
  box-shadow: -20px 14px 30px rgba(75, 42, 22, .16), inset -16px 0 20px rgba(116, 77, 45, .08);
  opacity: 0;
  pointer-events: none;
  transform-origin: left center;
  transform: rotateY(0deg);
  backface-visibility: hidden;
}

.fortune-pages.interactive-flip {
  cursor: grabbing;
  user-select: none;
  touch-action: none;
}

.fortune-pages.interactive-flip::before {
  opacity: var(--flip-opacity, 0);
  transform: translate3d(var(--flip-x, 0), var(--flip-y, 0), 0) rotateY(var(--flip-angle, 0deg)) rotateZ(var(--flip-tilt, 0deg));
  box-shadow:
    -22px 18px 34px rgba(75, 42, 22, var(--flip-shadow, .18)),
    inset 16px 0 22px rgba(116, 77, 45, .12),
    inset -22px 0 24px rgba(255, 255, 255, .34);
  will-change: transform, opacity, box-shadow;
}

.fortune-pages.flip-animating::before,
.fortune-pages.flip-animating .book-fold-shadow,
.fortune-pages.flip-animating .book-fold-corner {
  transition:
    transform .28s cubic-bezier(.2, .72, .18, 1),
    opacity .24s ease,
    box-shadow .28s ease;
}

.book-fold-shadow,
.book-fold-corner {
  position: absolute;
  z-index: 7;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}

.book-fold-shadow {
  top: 18px;
  bottom: 18px;
  left: 28px;
  right: 20px;
  border-radius: 8px 12px 12px 8px;
  background:
    linear-gradient(90deg, rgba(52, 29, 18, var(--fold-shadow-opacity, 0)), transparent 26%, transparent 70%, rgba(255, 255, 255, .2)),
    radial-gradient(circle at 100% 52%, rgba(75, 42, 22, var(--fold-shadow-opacity, 0)), transparent 44%);
  mix-blend-mode: multiply;
}

.fortune-pages.interactive-flip .book-fold-shadow {
  opacity: 1;
}

.book-fold-corner {
  width: 86px;
  height: 86px;
  border-radius: 4px 11px 6px 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .86), rgba(255, 248, 232, .94) 46%, rgba(199, 161, 101, .48) 48%, rgba(122, 74, 51, .16) 72%, rgba(255, 255, 255, .52)),
    repeating-linear-gradient(135deg, rgba(210, 189, 152, .24) 0, rgba(210, 189, 152, .24) 1px, transparent 1px, transparent 8px);
  box-shadow: -12px 10px 20px rgba(75, 42, 22, .16), inset 8px -8px 14px rgba(255, 255, 255, .42);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  transform: translate3d(var(--curl-x, 0), var(--curl-y, 0), 0) rotate(var(--curl-rotate, 0deg)) scale(var(--curl-scale, .72));
}

.fortune-pages.flip-from-right .book-fold-corner {
  right: 20px;
}

.fortune-pages.flip-from-left .book-fold-corner {
  left: 28px;
  transform: translate3d(var(--curl-x, 0), var(--curl-y, 0), 0) rotate(var(--curl-rotate, 0deg)) scaleX(-1) scale(var(--curl-scale, .72));
}

.fortune-pages.flip-from-top .book-fold-corner {
  top: 18px;
}

.fortune-pages.flip-from-bottom .book-fold-corner {
  bottom: 18px;
  transform: translate3d(var(--curl-x, 0), var(--curl-y, 0), 0) rotate(var(--curl-rotate, 0deg)) scaleY(-1) scale(var(--curl-scale, .72));
}

.fortune-pages.flip-from-left.flip-from-bottom .book-fold-corner {
  transform: translate3d(var(--curl-x, 0), var(--curl-y, 0), 0) rotate(var(--curl-rotate, 0deg)) scale(-1, -1) scale(var(--curl-scale, .72));
}

.fortune-pages.interactive-flip .book-fold-corner {
  opacity: var(--flip-opacity, 0);
}

.fortune-pages.swiping {
  cursor: grabbing;
}

.fortune-book.opened .fortune-cover {
  transform: rotateY(-112deg) translateX(-12px);
  opacity: 0;
  pointer-events: none;
}

.fortune-book.opened .fortune-cover small,
.fortune-book.opened .fortune-cover h3,
.fortune-book.opened .fortune-cover p,
.fortune-book.opened .book-seal,
.fortune-book.opened .cover-open-hint,
.fortune-book.opened .fortune-cover::before {
  opacity: 0;
}

.fortune-book.opening .fortune-cover {
  animation: diaryCoverOpen .98s cubic-bezier(.16, .72, .2, 1) both;
}

.fortune-book.opening .fortune-pages {
  animation: diaryPagesWake .98s cubic-bezier(.16, .72, .2, 1) both;
}

.fortune-book.opening::before {
  animation: bookThicknessWake .98s cubic-bezier(.16, .72, .2, 1) both;
}

.fortune-book.opened .fortune-pages {
  opacity: 1;
  transform: translateX(0) scale(1);
  transition-delay: .18s;
}

.fortune-book.opened .fortune-pages::after {
  content: "";
  position: absolute;
  left: -5px;
  top: 8px;
  bottom: 8px;
  width: 11px;
  z-index: 0;
  border-radius: 8px 0 0 8px;
  background:
    linear-gradient(90deg, rgba(61, 31, 20, .38), rgba(112, 68, 47, .18) 54%, transparent),
    #6b402d;
  box-shadow: 6px 0 14px rgba(75, 42, 22, .11), inset -4px 0 10px rgba(35, 18, 12, .18);
  pointer-events: none;
}

.fortune-pages.turning-next {
  animation: bookSettleNext .68s cubic-bezier(.2, .72, .18, 1) both;
}

.fortune-pages.turning-next::before {
  transform-origin: left center;
  background:
    linear-gradient(90deg, rgba(116, 77, 45, .16), rgba(255, 255, 255, .5) 18%, rgba(255, 250, 240, .96) 58%, #fff7e8),
    repeating-linear-gradient(180deg, rgba(210, 189, 152, .22) 0, rgba(210, 189, 152, .22) 1px, transparent 1px, transparent 12px);
  box-shadow: -14px 14px 26px rgba(75, 42, 22, .12), inset 14px 0 18px rgba(116, 77, 45, .1);
  animation: pageLeafNext .68s cubic-bezier(.2, .72, .18, 1) both;
}

.fortune-pages.turning-prev {
  animation: bookSettlePrev .68s cubic-bezier(.2, .72, .18, 1) both;
}

.fortune-pages.turning-prev::before {
  animation: pageLeafPrev .68s cubic-bezier(.2, .72, .18, 1) both;
}

.fortune-pages.nudge-next {
  animation: pageNudgeNext .34s cubic-bezier(.2, .72, .18, 1) both;
}

.fortune-pages.nudge-prev {
  animation: pageNudgePrev .34s cubic-bezier(.2, .72, .18, 1) both;
}

.fortune-page {
  min-width: 0;
  min-height: 100%;
  height: 100%;
  padding: 20px 18px 16px;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, .78), transparent 24%),
    repeating-linear-gradient(180deg, rgba(210, 189, 152, .1) 0, rgba(210, 189, 152, .1) 1px, transparent 1px, transparent 19px),
    linear-gradient(180deg, rgba(255, 255, 255, .66), rgba(255, 255, 255, .08)),
    #fff8ea;
  border: 1px solid rgba(210, 189, 152, .72);
  display: grid;
  grid-template-rows: auto auto auto auto auto;
  gap: 10px;
  position: relative;
  z-index: 1;
  border-radius: 8px 12px 12px 8px;
  box-shadow: inset 12px 0 20px rgba(116, 77, 45, .08), inset -10px 0 24px rgba(120, 82, 49, .06), 0 12px 26px rgba(75, 42, 22, .08);
  overflow: hidden;
}

.fortune-page::after {
  content: "";
  position: absolute;
  inset: 12px 10px 12px auto;
  width: 14px;
  background: linear-gradient(90deg, transparent, rgba(105, 70, 42, .16));
  opacity: .28;
  pointer-events: none;
}

.fortune-page::before {
  content: "";
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, transparent 50%, rgba(210, 189, 152, .28) 51%, rgba(255, 255, 255, .62));
  border-radius: 0 0 8px 0;
  opacity: .72;
  pointer-events: none;
}

.page-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px;
  gap: 12px;
  align-items: start;
}

.fortune-page small {
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  letter-spacing: .12em;
  font-weight: 800;
  font-size: 10px;
}

.fortune-page h3 {
  margin: 12px 0 0;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 20px;
  line-height: 1.24;
  letter-spacing: 0;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.fortune-page p {
  margin: 0;
  color: #4a4038;
  font-size: 12.5px;
  line-height: 1.68;
}

.page-mark {
  width: 50px;
  height: 50px;
  border: 2px solid rgba(173, 68, 61, .82);
  color: #ad443d;
  display: grid;
  place-items: center;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 21px;
  font-weight: 900;
  transform: rotate(-9deg);
  background: rgba(255, 248, 232, .42);
}

.page-sign-block,
.page-evening-block,
.page-blessing-block {
  position: relative;
  padding: 10px 11px;
  border-radius: 8px;
  background: transparent;
}

.page-sign-block {
  margin-right: 22px;
  padding: 10px 12px 8px;
  transform: rotate(-.7deg);
  background:
    radial-gradient(circle at 90% 20%, rgba(255, 235, 165, .28), transparent 34%),
    rgba(255, 255, 255, .58);
  box-shadow: 0 10px 20px rgba(75, 42, 22, .07);
}

.page-sign-block p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.paper-tape {
  position: absolute;
  width: 54px;
  height: 16px;
  border-radius: 2px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .28), transparent),
    rgba(224, 198, 142, .46);
  box-shadow: 0 3px 8px rgba(75, 42, 22, .08);
}

.tape-left {
  left: 18px;
  top: -8px;
  transform: rotate(-6deg);
}

.tape-right {
  right: 18px;
  top: -8px;
  transform: rotate(7deg);
}

.page-mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

.page-mini-grid div {
  position: relative;
  min-height: 44px;
  padding: 7px 9px;
  border-radius: 7px;
  background: rgba(255, 248, 232, .78);
  box-shadow: 0 8px 14px rgba(75, 42, 22, .06);
}

.page-mini-grid .color-swatch {
  padding-left: 39px;
}

.color-swatch i {
  position: absolute;
  left: 9px;
  top: 10px;
  width: 21px;
  height: 21px;
  border-radius: 50% 42% 48% 45%;
  background: linear-gradient(135deg, #f2c878, #d4a14f);
  border: 1px solid rgba(131, 93, 45, .18);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, .28);
}

.luck-ticket {
  transform: rotate(1.1deg);
}

.page-mini-grid b,
.page-mini-grid span {
  display: block;
}

.page-mini-grid b {
  color: var(--coral);
  font-size: 11px;
}

.page-mini-grid span {
  margin-top: 3px;
  color: #2f241d;
  font-size: 13px;
  font-weight: 900;
}

.page-evening-block h4 {
  margin: 5px 0 5px;
  font-family: "Songti SC", "Noto Serif SC", serif;
  color: #2f241d;
  font-size: 16px;
  line-height: 1.26;
}

.page-evening-block {
  margin-left: 20px;
  margin-right: 4px;
  padding-top: 8px;
  padding-bottom: 8px;
  background: #fff4c8;
  box-shadow: 0 12px 20px rgba(75, 42, 22, .08);
  transform: rotate(1.2deg);
}

.page-evening-block p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.page-evening-block.locked-evening {
  background:
    linear-gradient(135deg, rgba(255, 246, 214, .88), rgba(247, 232, 198, .76)),
    repeating-linear-gradient(-8deg, rgba(173, 68, 61, .05) 0 1px, transparent 1px 9px);
}

.page-evening-block.locked-evening small::after {
  content: " · 待夜色";
  color: rgba(124, 51, 44, .56);
}

.page-blessing-block {
  margin-right: 12px;
  padding-top: 4px;
  padding-left: 4px;
  padding-right: 4px;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 34px minmax(0, 30px);
  align-content: start;
  column-gap: 8px;
  row-gap: 4px;
}

.page-blessing-block.no-messages {
  grid-template-rows: auto 34px;
}

.page-block-title {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  min-width: 0;
  margin-bottom: 0;
}

.page-block-title b {
  color: #2f241d;
  font-size: 13px;
}

.page-block-title span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.page-footer {
  margin-top: 0;
  padding-top: 8px;
  border-top: 1px solid rgba(210, 189, 152, .56);
  color: rgba(90, 71, 56, .72);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 10px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.book-arrow {
  position: absolute;
  top: 50%;
  z-index: 8;
  width: 30px;
  height: 54px;
  border-radius: 999px;
  border: 1px solid rgba(184, 137, 62, .28);
  background: rgba(255, 250, 240, .64);
  color: #7c332c;
  box-shadow: 0 10px 22px rgba(75, 42, 22, .1);
  transform: translateY(-50%);
  font-size: 24px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
}

.book-arrow.left {
  left: -14px;
}

.book-arrow.right {
  right: -14px;
}

.book-arrow:disabled {
  opacity: 0;
  cursor: default;
  box-shadow: none;
  pointer-events: none;
}

.blessing-scroll {
  width: 100%;
  height: 34px;
  overflow: hidden;
  margin: 0;
  padding: 1px 0;
  grid-column: 1 / -1;
  grid-row: 2;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20%, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 20%, #000 80%, transparent 100%);
}

.blessing-track {
  display: grid;
  gap: 5px;
  width: 100%;
  animation: blessingScrollUp 8s linear infinite;
}

.blessing-track span {
  border: 0;
  border-bottom: 1px solid rgba(168, 68, 62, .16);
  border-radius: 0;
  padding: 3px 4px 4px;
  background: transparent;
  color: #7c332c;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.page-blessing-block .blessing-track span:nth-child(odd) {
  transform: rotate(-.6deg);
}

.page-blessing-block .blessing-track span:nth-child(even) {
  transform: rotate(.7deg);
}

.page-message-notes {
  grid-column: 1 / -1;
  grid-row: 3;
  display: grid;
  min-height: 0;
  max-height: 30px;
  margin: 0;
  overflow: hidden;
}

.page-message-notes span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  padding-left: 8px;
  border-left: 2px solid rgba(168, 68, 62, .28);
  color: rgba(63, 48, 40, .82);
  font-size: 10.5px;
  line-height: 1.45;
}

.page-message-notes b {
  margin-right: 4px;
  color: #7c332c;
  font-weight: 900;
}

.page-message-notes em {
  margin-right: 4px;
  color: #a66f37;
  font-style: normal;
  font-weight: 900;
}

.page-blessing-block .page-cta {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  min-height: 24px;
  width: auto;
  padding: 0 9px;
  font-size: 11px;
  border-style: dashed;
  background: rgba(255, 248, 232, .48);
  box-shadow: none;
}

.night-envelope {
  position: relative;
  min-height: 430px;
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid rgba(184, 137, 62, .36);
  background:
    radial-gradient(circle at 26% 16%, rgba(255, 250, 213, .62), transparent 26%),
    linear-gradient(180deg, #f8ead0, #efe0c5);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.evening-screen {
  background:
    radial-gradient(circle at 50% 0, rgba(255, 234, 178, .34), transparent 34%),
    linear-gradient(180deg, rgba(248, 236, 216, .92), rgba(225, 208, 181, .9));
}

.evening-screen.ritual-opened {
  padding-bottom: calc(118px + env(safe-area-inset-bottom));
}

.evening-hello {
  margin-bottom: 12px;
}

.evening-ritual-card,
.evening-summary-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid rgba(184, 137, 62, .34);
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 242, 195, .72), transparent 33%),
    linear-gradient(180deg, rgba(255, 250, 240, .9), rgba(245, 231, 205, .84));
  box-shadow: var(--shadow);
}

.evening-ritual-card {
  min-height: 620px;
  padding: 28px 22px 22px;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
}

.evening-ritual-card::before,
.evening-summary-card::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(168, 68, 62, .12);
  border-radius: 7px;
  pointer-events: none;
}

.evening-moon {
  position: relative;
  width: 210px;
  height: 210px;
  margin-bottom: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 43% 34%, rgba(255, 255, 255, .95) 0 18%, rgba(255, 228, 145, .82) 19% 42%, rgba(255, 228, 145, .12) 64%, transparent 70%),
    radial-gradient(circle, rgba(255, 231, 163, .4), transparent 68%);
  box-shadow: 0 26px 58px rgba(138, 91, 43, .18), inset 0 0 34px rgba(255, 255, 255, .64);
  animation: eveningMoonPulse 3.6s ease-in-out infinite;
}

.evening-moon::before {
  display: none;
}

.evening-moon i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f1c96e;
  box-shadow: 0 0 16px rgba(241, 201, 110, .72);
  transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px)));
  animation: eveningLightGather 2.8s var(--delay, 0ms) ease-in-out infinite;
}

.evening-ritual-card small,
.evening-summary-card small {
  position: relative;
  z-index: 1;
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
}

.evening-ritual-card h1 {
  position: relative;
  z-index: 1;
  margin: 13px 0 0;
  color: #2f2119;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 30px;
  line-height: 1.24;
}

.evening-ritual-card p {
  position: relative;
  z-index: 1;
  max-width: 270px;
  margin: 14px auto 0;
  color: #665243;
  font-size: 13px;
  line-height: 1.75;
}

.evening-collect-grid {
  position: relative;
  z-index: 1;
  width: min(100%, 270px);
  display: flex;
  justify-content: center;
  gap: 18px;
  margin: 24px 0 20px;
}

.evening-collect-grid span {
  position: relative;
  min-height: 0;
  padding: 0 2px;
  border-radius: 0;
  background: transparent;
  color: rgba(102, 82, 67, .78);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.15;
  box-shadow: none;
  white-space: nowrap;
}

.evening-collect-grid span + span::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 12px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(184, 137, 62, .38);
  box-shadow: 0 0 9px rgba(228, 184, 94, .42);
}

.evening-collect-grid.count-1 span {
  padding-inline: 8px;
}

.evening-collect-grid b {
  display: block;
  margin-bottom: 4px;
  color: #8e443d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
}

.receive-echo-button {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 48px;
  border-radius: 999px;
  background: #8f443a;
  color: #fffaf0;
  font-weight: 900;
  box-shadow: 0 16px 30px rgba(137, 61, 48, .22);
}

.ritual-opened .evening-summary-card {
  animation: echoCardIn .58s cubic-bezier(.2, .74, .2, 1) both;
}

.evening-summary-card {
  padding: 18px;
  margin-bottom: 12px;
}

.evening-summary-card h2 {
  position: relative;
  z-index: 1;
  margin: 12px 0 8px;
  color: #2f2119;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 22px;
  line-height: 1.28;
}

.evening-summary-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #4f4138;
  font-size: 14px;
  line-height: 1.76;
}

.evening-summary-meta,
.evening-section-title {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.evening-summary-meta {
  margin-top: 14px;
}

.evening-summary-meta span {
  flex: 1;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 250, 240, .62);
  color: #8a6550;
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

.evening-section-title {
  margin-bottom: 12px;
}

.evening-section-title b {
  color: #2f2119;
  font-size: 15px;
}

.evening-section-title span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.night-envelope.collected {
  min-height: 440px;
  margin-bottom: 14px;
}

.evening-action-row {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: max(14px, env(safe-area-inset-bottom));
  width: min(calc(100% - 32px), 398px);
  transform: translateX(-50%);
  z-index: 22;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(184, 137, 62, .22);
  border-radius: 999px;
  background: rgba(255, 250, 240, .72);
  box-shadow: 0 18px 36px rgba(75, 42, 22, .16);
  backdrop-filter: blur(16px);
}

.evening-action-row button {
  min-height: 44px;
  border-radius: 999px;
  font-weight: 900;
}

.night-envelope::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(168, 68, 62, .16);
  border-radius: var(--radius);
  pointer-events: none;
}

.message-card {
  position: relative;
  min-height: 292px;
  padding: 22px 18px 18px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, .68), rgba(255, 255, 255, 0)), #fffaf0;
  border: 1px solid #d2bd98;
  box-shadow: 0 18px 36px rgba(75, 42, 22, .13);
  transform: rotate(-1deg);
}

.message-stack {
  position: relative;
  z-index: 2;
  height: 318px;
  perspective: 720px;
  margin: 4px 0 14px;
}

.message-stack-card {
  position: absolute;
  inset: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  transform:
    translate3d(calc(var(--stack-layer) * -4px), calc(var(--stack-layer) * 10px), calc(var(--stack-layer) * -16px))
    rotate(var(--stack-rotate))
    scale(calc(1 - var(--stack-layer) * .045));
  transform-origin: 88% 88%;
  z-index: calc(20 - var(--stack-layer));
  transition: transform .42s cubic-bezier(.2, .78, .22, 1), box-shadow .42s ease, opacity .32s ease;
  will-change: transform;
}

.message-stack-card.is-top {
  cursor: grab;
  touch-action: none;
}

.message-stack-card.is-top:active,
.message-stack-card.dragging {
  cursor: grabbing;
}

.message-stack-card.dragging {
  transition: none;
  transform:
    translate3d(var(--drag-x, 0px), var(--drag-y, 0px), 42px)
    rotate(calc(var(--stack-rotate) + var(--drag-rotate, 0deg)))
    scale(1.015);
  box-shadow: 0 28px 54px rgba(75, 42, 22, .24);
}

.message-stack-card:not(.is-top) {
  pointer-events: none;
  filter: saturate(.94);
}

.message-card::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(184, 137, 62, .22);
  border-radius: 6px;
  pointer-events: none;
}

.message-card small {
  position: relative;
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 800;
  letter-spacing: .12em;
}

.message-card h3 {
  position: relative;
  margin: 28px 0 12px;
  color: #2f2119;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 27px;
  line-height: 1.25;
}

.message-card p {
  position: relative;
  margin: 0;
  color: #4a4038;
  font-size: 15px;
  line-height: 1.8;
  flex: 1;
}

.received-seal {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  width: 56px;
  height: 56px;
  border: 2px solid rgba(173, 68, 61, .88);
  color: #ad443d;
  display: grid;
  place-items: center;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 24px;
  font-weight: 900;
  transform: rotate(-10deg) scale(.78);
  opacity: 0;
  background: rgba(255, 248, 232, .42);
}

.message-card.received .received-seal {
  opacity: .9;
  transform: rotate(-10deg) scale(1);
}

.message-card.just-received .received-seal {
  animation: receiveSealDrop .72s cubic-bezier(.2, .8, .24, 1) both;
}

.receive-message-button {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 46px;
  margin-top: 14px;
  border-radius: 999px;
  border: 1px solid var(--coral);
  background: var(--coral);
  color: #fffaf0;
  font-weight: 900;
  box-shadow: 0 14px 28px rgba(137, 61, 48, .22);
}

.receive-message-button.received,
.receive-message-button:disabled {
  border-color: rgba(184, 137, 62, .34);
  background: rgba(255, 250, 240, .74);
  color: #8a7562;
  box-shadow: none;
  cursor: default;
}

.empty-message {
  display: block;
  text-align: center;
}

.message-stack-hint {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.message-stack-hint span {
  color: var(--muted);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 800;
}

.message-stack-hint b {
  color: #8a7562;
  font-size: 12px;
}

.evening-screen {
  isolation: isolate;
  min-height: 100vh;
  padding: max(22px, calc(env(safe-area-inset-top) + 18px)) 18px calc(118px + env(safe-area-inset-bottom));
  color: #3d2a1e;
  background: #efe1c7 url("/images/evening-page-bg.png") right top / cover no-repeat;
  overflow: hidden;
}

.evening-screen::before {
  content: "";
  position: fixed;
  inset: 0;
  left: 50%;
  z-index: -2;
  width: min(100%, 430px);
  transform: translateX(-50%);
  background: url("/images/evening-page-bg.png") right top / cover no-repeat;
  opacity: 1;
  pointer-events: none;
}

.evening-screen::after {
  display: none;
}

.evening-art-nav {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  margin: 0 0 48px;
}

.evening-back-pill,
.evening-status-pill {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 999px;
  background: rgba(255, 247, 230, .88);
  color: #624633;
  box-shadow: 0 12px 22px rgba(78, 58, 38, .12), inset 0 1px 0 rgba(255, 255, 255, .75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}

.evening-back-pill {
  padding: 0 18px 0 15px;
}

.evening-back-pill i {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 31px;
  font-style: normal;
  line-height: .6;
  transform: translateY(-1px);
}

.evening-status-pill {
  padding: 0 14px;
  background: rgba(236, 225, 213, .78);
  color: #6d503a;
}

.evening-status-pill i {
  position: relative;
  width: 19px;
  height: 19px;
  border: 2px solid currentColor;
  border-radius: 50%;
  opacity: .82;
}

.evening-status-pill i::before,
.evening-status-pill i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: 50% 0;
}

.evening-status-pill i::before {
  height: 6px;
  transform: translate(-50%, -1px) rotate(0deg);
}

.evening-status-pill i::after {
  height: 5px;
  transform: translate(-50%, -1px) rotate(118deg);
}

.evening-hero {
  position: relative;
  z-index: 2;
  min-height: 132px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 100px;
  align-items: start;
  gap: 12px;
  margin: 0 0 18px;
}

.evening-hero h1 {
  margin: 0;
  color: #38251b;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: clamp(34px, 9.2vw, 42px);
  line-height: 1.14;
  font-weight: 900;
  letter-spacing: 0;
  text-shadow: 0 1px 0 rgba(255, 250, 236, .54);
}

.evening-hero h1 span {
  display: inline-block;
  margin-left: 5px;
  color: #e6bd69;
  font-size: .56em;
  transform: translateY(-5px);
}

.evening-hero p {
  margin: 16px 0 0;
  color: rgba(92, 70, 52, .82);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.55;
}

.evening-crescent {
  position: relative;
  width: 74px;
  height: 94px;
  margin: 2px 6px 0 auto;
  filter: drop-shadow(0 0 22px rgba(255, 235, 172, .72));
}

.evening-crescent::before {
  content: "";
  position: absolute;
  inset: 5px 4px 7px 0;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff8d5 0%, #f4ca71 100%);
}

.evening-crescent::after {
  content: "";
  position: absolute;
  inset: 0 17px 0 -12px;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(159, 150, 141, .98), rgba(81, 84, 105, .98));
}

.evening-summary-card {
  min-height: 258px;
  margin: 0 0 18px;
  padding: 27px 22px 20px;
  border-radius: 26px;
  border: 1px solid rgba(255, 241, 211, .8);
  background:
    linear-gradient(90deg, rgba(255, 249, 236, .72), rgba(255, 249, 236, .22) 48%, rgba(255, 249, 236, 0) 100%),
    url("/images/evening-summary-bg.png") center / cover no-repeat,
    linear-gradient(135deg, rgba(255, 249, 232, .94), rgba(248, 226, 185, .86));
  box-shadow: 0 20px 34px rgba(104, 71, 38, .14), inset 0 0 0 1px rgba(200, 151, 82, .2);
}

.evening-summary-card::before {
  inset: 9px;
  border-color: rgba(204, 160, 96, .28);
  border-radius: 21px;
}

.evening-window-art {
  display: none;
}

.evening-window-art .window-frame {
  position: absolute;
  right: 28px;
  top: 8px;
  width: 58px;
  height: 96px;
  border: 5px solid rgba(157, 111, 61, .3);
  border-left-width: 4px;
  background:
    linear-gradient(90deg, transparent 46%, rgba(157, 111, 61, .24) 47% 52%, transparent 53%),
    linear-gradient(180deg, transparent 50%, rgba(157, 111, 61, .2) 51% 55%, transparent 56%),
    linear-gradient(145deg, rgba(255, 247, 208, .7), rgba(241, 196, 119, .24));
  box-shadow: -18px 20px 34px rgba(190, 143, 76, .12);
}

.evening-window-art .curtain {
  position: absolute;
  right: 62px;
  top: -2px;
  width: 58px;
  height: 124px;
  border-radius: 4px 4px 38px 24px;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .56) 48%, rgba(237, 201, 139, .06) 100%);
  transform: skewX(-8deg) rotate(3deg);
  filter: blur(.15px);
}

.evening-window-art .lantern {
  position: absolute;
  right: 2px;
  bottom: 8px;
  width: 28px;
  height: 46px;
  border: 3px solid rgba(178, 121, 58, .34);
  border-radius: 9px 9px 4px 4px;
  background:
    radial-gradient(circle at 50% 58%, rgba(255, 230, 132, .94), rgba(245, 173, 80, .22) 36%, transparent 56%),
    rgba(255, 242, 204, .2);
  box-shadow: 0 8px 18px rgba(212, 154, 72, .18);
}

.evening-summary-card small {
  position: relative;
  z-index: 2;
  color: #c49a57;
  font-size: 13px;
  letter-spacing: .16em;
}

.evening-summary-card h2 {
  position: relative;
  z-index: 2;
  max-width: 220px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 24px 0 16px;
  color: #332119;
  font-size: 31px;
  line-height: 1.18;
}

.evening-summary-card h2 i {
  position: relative;
  width: 24px;
  height: 48px;
  flex: 0 0 auto;
}

.evening-summary-card h2 i::before {
  content: "";
  position: absolute;
  left: 11px;
  bottom: 2px;
  width: 3px;
  height: 44px;
  border-radius: 999px;
  background: #d7b165;
}

.evening-summary-card h2 i::after {
  content: "";
  position: absolute;
  inset: 4px 0 0;
  background:
    radial-gradient(ellipse at 20% 82%, #d7b165 0 20%, transparent 22%),
    radial-gradient(ellipse at 80% 62%, #d7b165 0 18%, transparent 20%),
    radial-gradient(ellipse at 18% 42%, #d7b165 0 17%, transparent 19%),
    radial-gradient(ellipse at 78% 24%, #d7b165 0 15%, transparent 17%);
}

.evening-summary-card p {
  position: relative;
  z-index: 2;
  max-width: 260px;
  color: #49362b;
  font-size: 17px;
  line-height: 1.82;
  font-weight: 700;
}

.evening-summary-meta {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 22px;
}

.evening-summary-meta span {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .58);
  border-radius: 18px;
  background: rgba(255, 250, 240, .64);
  color: #624633;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .62);
  font-size: 14px;
  font-weight: 900;
  text-align: center;
}

.evening-summary-meta span i {
  color: #b8894e;
  font-style: normal;
  font-size: 19px;
}

.evening-summary-meta span b {
  color: #3d2a1e;
  font-size: 17px;
}

.night-envelope.collected,
.night-envelope {
  min-height: 514px;
  margin: 0 0 20px;
  padding: 22px 16px 24px;
  border-radius: 24px;
  border: 1px solid rgba(255, 241, 211, .78);
  background:
    radial-gradient(circle at 50% 0, rgba(255, 255, 255, .64), transparent 33%),
    linear-gradient(180deg, rgba(255, 247, 229, .92), rgba(239, 214, 177, .78));
  box-shadow: 0 22px 40px rgba(70, 45, 26, .18), inset 0 0 0 1px rgba(199, 151, 82, .2);
}

.night-envelope::before {
  inset: 9px;
  border-color: rgba(204, 160, 96, .24);
  border-radius: 20px;
}

.evening-section-title {
  margin: 0 0 18px;
}

.evening-section-title b {
  color: #2f2119;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 22px;
  line-height: 1;
}

.evening-section-title b i {
  color: #d7aa5d;
  font-style: normal;
  font-size: 16px;
}

.evening-section-title span {
  color: #4a3529;
  font-size: 16px;
  font-weight: 900;
}

.message-stack {
  height: 302px;
  margin: 0 2px 16px;
}

.message-card {
  border-radius: 18px;
  border: 1px solid rgba(212, 187, 151, .72);
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 255, 255, .78), transparent 28%),
    linear-gradient(180deg, rgba(255, 253, 247, .95), rgba(255, 248, 235, .9));
  box-shadow: 0 15px 28px rgba(87, 58, 34, .14);
}

.message-card::before {
  inset: 12px;
  border-color: rgba(212, 187, 151, .52);
  border-radius: 14px;
}

.empty-message.evening-empty-paper {
  min-height: 300px;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 56px 26px 44px;
  text-align: center;
  transform: rotate(-1.2deg);
}

.evening-empty-paper::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 12px;
  width: 94px;
  height: 82px;
  opacity: .46;
  background:
    linear-gradient(112deg, transparent 42%, rgba(142, 99, 62, .34) 43% 48%, transparent 49%),
    linear-gradient(150deg, rgba(255, 255, 255, .5), rgba(218, 174, 112, .22)) 9px 22px / 58px 42px no-repeat;
  transform: rotate(-16deg);
  pointer-events: none;
}

.evening-empty-paper small {
  position: absolute;
  left: 28px;
  top: 28px;
  color: rgba(224, 198, 160, .52);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 46px;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0;
}

.empty-moon-mark {
  position: relative;
  width: 64px;
  height: 38px;
  margin-bottom: 14px;
}

.empty-moon-mark::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #e7bf69;
  box-shadow: 0 0 18px rgba(231, 191, 105, .34);
}

.empty-moon-mark::after {
  content: "";
  position: absolute;
  left: 10px;
  bottom: 2px;
  width: 50px;
  height: 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 18% 58%, rgba(239, 222, 191, .88) 0 8px, transparent 9px),
    radial-gradient(circle at 46% 42%, rgba(239, 222, 191, .88) 0 10px, transparent 11px),
    radial-gradient(circle at 78% 62%, rgba(239, 222, 191, .88) 0 7px, transparent 8px);
}

.empty-message h3 {
  margin: 0 0 14px;
  color: #332119;
  font-size: 28px;
  line-height: 1.24;
}

.empty-message p {
  max-width: 280px;
  color: #745f4e;
  font-size: 16px;
  line-height: 1.72;
  font-weight: 700;
}

.message-stack-hint.empty-hint {
  display: grid;
  justify-items: center;
  gap: 16px;
  margin-top: 26px;
}

.message-stack-hint.empty-hint span {
  position: relative;
  color: rgba(107, 84, 66, .7);
  font-size: 15px;
  font-style: normal;
  line-height: 1.5;
  text-align: center;
}

.message-stack-hint.empty-hint span::before {
  content: "⌁";
  margin-right: 8px;
  color: #b79052;
}

.message-stack-hint.empty-hint b {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  color: rgba(102, 78, 60, .72);
  font-size: 16px;
  font-weight: 900;
}

.message-stack-hint.empty-hint b::before,
.message-stack-hint.empty-hint b::after {
  content: "";
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(151, 111, 70, .48));
}

.message-stack-hint.empty-hint b::after {
  background: linear-gradient(90deg, rgba(151, 111, 70, .48), transparent);
}

.receive-message-button {
  min-height: 48px;
  margin-top: 10px;
  border-radius: 18px;
  background: #a84d40;
  box-shadow: 0 14px 28px rgba(137, 61, 48, .2);
}

.evening-action-row {
  bottom: max(16px, env(safe-area-inset-bottom));
  width: min(calc(100% - 28px), 402px);
  grid-template-columns: .92fr 1fr;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 24px;
  background: rgba(235, 226, 215, .76);
  box-shadow: 0 18px 36px rgba(37, 34, 42, .22), inset 0 1px 0 rgba(255, 255, 255, .56);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.evening-action-row button {
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .52);
}

.evening-action-row .secondary {
  background: rgba(255, 250, 240, .72);
  color: #806044;
}

.evening-action-row .primary {
  background: linear-gradient(180deg, #bc624d, #a9483d);
  color: #fff9ee;
  box-shadow: 0 10px 20px rgba(156, 65, 51, .24), inset 0 1px 0 rgba(255, 220, 190, .34);
}

.evening-action-row button i {
  font-style: normal;
  font-size: 21px;
  line-height: 1;
}

.evening-ritual-card {
  min-height: calc(100vh - 110px);
  border-radius: 28px;
  border-color: rgba(255, 244, 221, .82);
  background:
    radial-gradient(circle at 50% 23%, rgba(255, 246, 184, .72), transparent 31%),
    radial-gradient(circle at 50% 2%, rgba(255, 255, 255, .76), transparent 28%),
    linear-gradient(180deg, rgba(255, 249, 234, .94), rgba(240, 216, 181, .8));
  box-shadow:
    0 24px 48px rgba(70, 45, 26, .15),
    inset 0 0 0 1px rgba(255, 255, 255, .52),
    inset 0 -16px 34px rgba(160, 95, 42, .045);
}

.page-cta {
  width: 100%;
  min-height: 34px;
  font-size: 12px;
}

.calendar-hello h1 {
  margin: 0 0 4px;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 28px;
  line-height: 1.2;
}

.calendar-month-bar {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  gap: 10px;
  align-items: center;
}

.month-arrow {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(184, 137, 62, .34);
  border-radius: 999px;
  background: rgba(255, 250, 240, .72);
  color: #6f5540;
  font-size: 23px;
  line-height: 1;
  font-weight: 900;
}

.month-arrow:disabled {
  opacity: .28;
  cursor: default;
}

.calendar-view-switch {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 9px 11px;
  border: 1px solid rgba(216, 199, 170, .7);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .54);
}

.calendar-view-switch span {
  color: rgba(90, 71, 56, .72);
  font-size: 12px;
  font-weight: 900;
}

.calendar-view-switch button {
  padding: 0;
  background: transparent;
  color: var(--coral);
  font-size: 12px;
  font-weight: 900;
}

.month-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.month-stat {
  padding: 10px;
  border: 1px solid rgba(216, 199, 170, .9);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .86);
  text-align: center;
  box-shadow: 0 10px 22px rgba(75, 42, 22, .06);
}

.month-stat b {
  display: block;
  margin-bottom: 2px;
  color: var(--teal-deep);
  font-size: 20px;
}

.month-stat span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.calendar-sign-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  margin-top: 14px;
}

.calendar-week {
  padding-bottom: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

.calendar-cell {
  position: relative;
  min-width: 0;
  min-height: 64px;
  padding: 6px;
  border: 1px solid rgba(216, 199, 170, .9);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .86);
  display: block;
  overflow: hidden;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.calendar-cell.has-cover {
  border-color: rgba(255, 255, 255, .42);
  background: #e7e0d0;
  box-shadow: 0 10px 22px rgba(75, 42, 22, .08);
}

.calendar-cell.has-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(16, 20, 18, .16), rgba(16, 20, 18, 0) 44%),
    linear-gradient(0deg, rgba(12, 16, 14, .34), rgba(12, 16, 14, 0) 58%);
  pointer-events: none;
}

.calendar-cell-cover {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
}

.calendar-cell:not(.empty):hover,
.calendar-cell.selected {
  border-color: rgba(168, 68, 62, .36);
  box-shadow: 0 10px 20px rgba(75, 42, 22, .1);
  transform: translateY(-1px);
}

.calendar-cell.empty {
  background: rgba(255, 255, 255, .42);
  opacity: .5;
}

.calendar-cell.future {
  background: rgba(255, 255, 255, .32);
  opacity: .34;
  cursor: default;
}

.calendar-cell.outside {
  opacity: .28;
  cursor: default;
  transform: none;
  box-shadow: none;
}

.calendar-cell.selected {
  opacity: 1;
}

.day-num {
  position: relative;
  z-index: 2;
  color: #3b3028;
  font-size: 11px;
  font-weight: 900;
}

.calendar-cell.has-cover .day-num {
  color: rgba(255, 255, 250, .94);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .34);
}

.calendar-day-specials {
  position: absolute;
  z-index: 2;
  top: 5px;
  right: 5px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  pointer-events: none;
}

.calendar-day-specials i {
  max-width: 38px;
  height: 15px;
  padding: 0 5px;
  border: 1px solid rgba(84, 117, 105, .18);
  border-radius: 999px;
  background: rgba(255, 255, 250, .78);
  color: rgba(40, 72, 62, .78);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
  font-size: 8.5px;
  line-height: 14px;
  font-weight: 900;
  box-shadow: 0 4px 10px rgba(43, 57, 51, .08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.calendar-day-specials i.birthday {
  border-color: rgba(151, 116, 58, .2);
  color: rgba(128, 88, 34, .84);
}

.day-mark {
  position: absolute;
  right: 6px;
  bottom: 5px;
  z-index: 2;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 1px solid rgba(168, 68, 62, .14);
  border-radius: 999px;
  background: rgba(255, 243, 220, .82);
  color: rgba(124, 51, 44, .86);
  display: inline-grid;
  place-items: center;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
  box-shadow: 0 4px 10px rgba(75, 42, 22, .08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.calendar-cell.has-cover .day-mark {
  border-color: rgba(255, 255, 255, .26);
  background: rgba(255, 255, 250, .76);
  color: rgba(54, 48, 40, .86);
}

.calendar-cell.empty .day-mark {
  color: rgba(90, 71, 56, .58);
  background: rgba(255, 250, 240, .7);
}

.calendar-cell .day-mark.blank {
  border-color: transparent;
  background: transparent;
  opacity: 0;
}

.day-quote {
  min-height: 22px;
  overflow: hidden;
  color: var(--muted);
  font-size: 9.5px;
  line-height: 1.25;
  text-align: center;
}

.day-quote.blank {
  min-height: 0;
}

.calendar-flip-card {
  margin-top: 12px;
  border: 1px solid rgba(184, 137, 62, .36);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, 0)),
    #fff7e8;
  box-shadow: 0 14px 28px rgba(75, 42, 22, .1);
  transform-origin: top center;
  animation: calendarOpen .28s ease both;
  overflow: hidden;
}

@keyframes calendarOpen {
  from { opacity: 0; transform: rotateX(-12deg) translateY(-4px); }
  to { opacity: 1; transform: rotateX(0) translateY(0); }
}

.calendar-flip-inner {
  padding: 13px;
}

.calendar-flip-card.has-cover .calendar-flip-inner {
  padding-top: 11px;
}

.calendar-day-cover {
  display: grid;
  justify-items: center;
  gap: 7px;
  width: 100%;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.calendar-day-cover img {
  display: block;
  width: min(62vw, 224px);
  max-width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  box-shadow:
    0 16px 30px rgba(75, 42, 22, .13),
    0 0 0 1px rgba(255, 255, 255, .58);
  -webkit-user-drag: none;
  user-select: none;
}

.calendar-day-cover span {
  color: rgba(124, 51, 44, .68);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
}

.calendar-day-cover:active img {
  transform: scale(.992);
}

.flip-label {
  margin-bottom: 6px;
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}

.calendar-flip-card h3 {
  margin: 0 0 10px;
  color: #2f261f;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: 0;
}

.calendar-luck-lines {
  display: grid;
  gap: 8px;
}

.calendar-luck-lines div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  color: #4a4038;
  font-size: 12px;
  line-height: 1.45;
}

.calendar-luck-lines .locked-line span {
  color: rgba(74, 64, 56, .62);
}

.calendar-luck-lines .locked-line b::after {
  content: "待收";
  display: inline-block;
  margin-left: 5px;
  padding: 1px 4px;
  border-radius: 999px;
  background: rgba(173, 68, 61, .08);
  color: rgba(124, 51, 44, .62);
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 900;
  vertical-align: 1px;
}

.calendar-luck-lines b {
  color: #ad443d;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 13px;
}

.calendar-message-block {
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px solid rgba(168, 68, 62, .12);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255, 251, 241, .9), rgba(255, 247, 232, .72)),
    radial-gradient(circle at 16% 0, rgba(226, 174, 96, .18), transparent 36%);
}

.calendar-message-block.empty {
  background: rgba(255, 250, 240, .72);
}

.calendar-message-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.calendar-message-head b {
  color: #ad443d;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 13px;
}

.calendar-message-head span {
  color: rgba(124, 51, 44, .62);
  font-size: 10px;
  font-weight: 900;
}

.calendar-message-scroll {
  height: 34px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
}

.calendar-message-track {
  display: grid;
  gap: 6px;
  width: 100%;
}

.calendar-message-scroll.is-looping .calendar-message-track {
  animation: calendarMessageScrollUp var(--calendar-message-duration, 9s) linear infinite;
}

.calendar-message-track span,
.calendar-message-empty {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: #4a4038;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
  white-space: nowrap;
}

.calendar-message-track span {
  padding: 2px 0 6px;
  border-bottom: 1px dashed rgba(168, 68, 62, .14);
}

.calendar-message-track em {
  flex: 0 0 auto;
  color: rgba(124, 51, 44, .62);
  font-style: normal;
  font-weight: 900;
}

.calendar-message-track strong {
  flex: 0 0 auto;
  color: #7c332c;
  font-size: 10px;
  font-weight: 900;
}

.calendar-message-empty {
  color: rgba(74, 64, 56, .68);
}

.calendar-blessing-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.calendar-blessing-row span {
  padding: 5px 8px;
  border: 1px solid rgba(168, 68, 62, .16);
  border-radius: 999px;
  background: #fff;
  color: #7c332c;
  font-size: 11px;
  font-weight: 900;
}

.cost-line {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: #fff8dc;
  color: #725719;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 800;
}

.empty-page {
  display: grid;
  place-items: center;
  color: var(--muted);
  text-align: center;
  font-size: 12px;
}

.profile-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  margin-bottom: 14px;
}

.profile-card h1 {
  margin: 0 0 4px;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 22px;
}

.profile-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.luck-word-entry {
  width: 100%;
  margin-bottom: 14px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid rgba(184, 137, 62, .22);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 86% 18%, rgba(255, 225, 143, .35), transparent 28%),
    linear-gradient(135deg, rgba(255, 252, 244, .84), rgba(255, 245, 226, .58));
  color: inherit;
  text-align: left;
  box-shadow: 0 14px 28px rgba(75, 42, 22, .07);
}

.luck-word-entry small {
  display: block;
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 10px;
  font-style: italic;
  font-weight: 800;
  letter-spacing: .12em;
}

.luck-word-entry b {
  display: block;
  margin-top: 4px;
  color: #2f231b;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 20px;
  line-height: 1.2;
}

.luck-word-entry span {
  display: block;
  margin-top: 4px;
  color: rgba(95, 76, 61, .72);
  font-size: 12px;
  font-weight: 800;
}

.luck-word-entry em {
  flex: 0 0 auto;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255, 250, 240, .62);
  color: #8a4b3e;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
}

.mine-art-screen {
  min-height: 100vh;
  padding: max(16px, env(safe-area-inset-top)) 16px 112px;
  background: #f4dfbd url("/images/mine-bg.png") center top / cover no-repeat;
  color: #231713;
}

.mine-art-head {
  min-height: 38px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
}

.mine-art-head h1 {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  gap: 6px;
  margin: 0;
  color: #3b2418;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: clamp(22px, 6.2vw, 29px);
  line-height: .96;
  font-weight: 900;
  letter-spacing: 0;
  text-shadow: 0 1px 0 rgba(255, 247, 232, .72);
}

.mine-sprig {
  position: relative;
  width: 16px;
  height: 20px;
  flex: 0 0 auto;
  transform: translateY(-2px) rotate(-18deg);
}

.mine-sprig::before {
  content: "";
  position: absolute;
  left: 8px;
  bottom: 3px;
  width: 2px;
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(214, 168, 83, .18), rgba(197, 142, 56, .78));
  transform: rotate(26deg);
}

.mine-sprig i {
  position: absolute;
  width: 4px;
  height: 9px;
  border-radius: 100% 0 100% 0;
  background: linear-gradient(160deg, #e8c883, #bd842f);
  opacity: .84;
}

.mine-sprig i:nth-child(1) { left: 6px; top: 12px; transform: rotate(-46deg); }
.mine-sprig i:nth-child(2) { left: 12px; top: 6px; transform: rotate(34deg); }
.mine-sprig i:nth-child(3) { left: 14px; top: 1px; transform: rotate(22deg); opacity: .68; }

.mine-sprig.small {
  width: 18px;
  height: 20px;
  transform: translate(2px, 1px) rotate(-16deg);
}

.mine-sprig.small::before {
  height: 17px;
}

.mine-sprig.small i {
  width: 5px;
  height: 10px;
}

.mine-head-pills {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-top: 2px;
}

.mine-head-pill {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  border: 1px solid rgba(207, 181, 142, .76);
  border-radius: 999px;
  background: rgba(255, 250, 240, .72);
  color: #604536;
  box-shadow: 0 7px 16px rgba(94, 61, 31, .06), inset 0 1px 0 rgba(255, 255, 255, .78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-weight: 900;
  font-size: 12px;
  white-space: nowrap;
}

.mine-head-pill i {
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  color: #bd842f;
  font-style: normal;
  font-size: 12px;
  line-height: 1;
}

.mine-head-pill i svg {
  width: 13px;
  height: 13px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mine-head-pill b {
  color: #a7493b;
  font-size: 12px;
  line-height: 1;
}

.mine-head-pill span {
  font-size: 12px;
  line-height: 1;
}

.mine-profile-card,
.mine-luck-word-card,
.mine-setting-card {
  border: 1px solid rgba(215, 189, 150, .72);
  border-radius: 17px;
  background:
    radial-gradient(circle at 22% 16%, rgba(255, 255, 255, .9), transparent 28%),
    linear-gradient(135deg, rgba(255, 253, 247, .88), rgba(255, 246, 229, .72));
  box-shadow: 0 13px 24px rgba(91, 58, 28, .085), inset 0 1px 0 rgba(255, 255, 255, .72);
}

.mine-profile-card {
  width: 100%;
  min-height: 70px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 15px 10px 12px;
  color: inherit;
  text-align: left;
}

.mine-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(230, 210, 181, .88);
  background:
    radial-gradient(circle at 36% 26%, rgba(255, 255, 255, .84), transparent 32%),
    linear-gradient(145deg, rgba(249, 238, 219, .94), rgba(237, 215, 181, .78));
  color: #4b2818;
  box-shadow: inset 0 0 0 2px rgba(255, 250, 240, .66);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  overflow: hidden;
}

.mine-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.mine-profile-copy {
  min-width: 0;
}

.mine-profile-copy h2 {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 5px;
  color: #2b1b15;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 17px;
  line-height: 1.1;
  font-weight: 900;
}

.mine-profile-copy p {
  margin: 0;
  color: #71583e;
  font-size: 10.5px;
  line-height: 1.25;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mine-chevron {
  color: rgba(123, 92, 61, .58);
  font-family: Arial, sans-serif;
  font-size: 22px;
  font-style: normal;
  font-weight: 300;
  line-height: 1;
}

.profile-info-screen {
  min-height: 100svh;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  padding: max(22px, calc(env(safe-area-inset-top) + 16px)) 24px max(16px, calc(env(safe-area-inset-bottom) + 16px));
  overflow: hidden;
  isolation: isolate;
  color: rgba(25, 32, 29, .94);
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, .78), transparent 30%),
    radial-gradient(circle at 82% 74%, rgba(217, 232, 224, .52), transparent 30%),
    linear-gradient(180deg, #f5f8f4 0%, #eaf1ee 58%, #f7f7f2 100%);
}

.profile-info-screen::before {
  content: "";
  position: fixed;
  inset: 0;
  left: 50%;
  z-index: -1;
  width: min(100%, 430px);
  transform: translateX(-50%);
  pointer-events: none;
  background:
    linear-gradient(rgba(39, 64, 55, .045) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(39, 64, 55, .04) 1px, transparent 1px) 0 0 / 28px 28px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .42) 68%, transparent);
}

.profile-info-back {
  position: fixed;
  left: max(22px, calc((100vw - 430px) / 2 + 22px));
  top: max(26px, calc(env(safe-area-inset-top) + 18px));
  z-index: 4;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: rgba(15, 20, 18, .9);
  font-family: Arial, sans-serif;
  font-size: 36px;
  font-weight: 300;
  line-height: .8;
}

.profile-info-panel {
  width: 100%;
  max-width: 352px;
  margin: 0 auto;
  padding-top: min(13svh, 108px);
  display: grid;
  align-content: start;
  gap: 24px;
}

.profile-info-head small {
  color: rgba(45, 126, 171, .86);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
}

.profile-info-head h1 {
  margin: 14px 0 10px;
  color: rgba(17, 22, 20, .92);
  font-family: "Kaiti SC", "STKaiti", "Songti SC", "Noto Serif SC", serif;
  font-size: clamp(28px, 8vw, 36px);
  line-height: 1.42;
  font-weight: 500;
}

.profile-info-head p {
  max-width: 260px;
  margin: 0;
  color: rgba(59, 73, 67, .48);
  font-size: 13px;
  line-height: 1.65;
}

.profile-avatar-editor {
  width: fit-content;
  margin: 12px auto 0;
  display: grid;
  justify-items: center;
  gap: 10px;
  color: rgba(45, 126, 171, .9);
  font-size: 13px;
  font-weight: 600;
}

.profile-avatar-editor input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.profile-avatar-preview {
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(198, 215, 205, .86);
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 26%, rgba(255, 255, 255, .84), transparent 32%),
    linear-gradient(145deg, rgba(249, 250, 244, .96), rgba(221, 232, 224, .82));
  color: rgba(19, 26, 23, .88);
  box-shadow: 0 16px 32px rgba(43, 57, 51, .12), inset 0 0 0 3px rgba(255, 255, 255, .54);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 42px;
  line-height: 1;
}

.profile-avatar-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.profile-info-field {
  display: grid;
  gap: 9px;
  margin-top: 10px;
}

.profile-info-field span {
  color: rgba(59, 73, 67, .48);
  font-size: 12px;
}

.profile-info-field input {
  width: 100%;
  min-height: 52px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(67, 96, 82, .18);
  background: transparent;
  color: rgba(17, 22, 20, .92);
  font-family: "Kaiti SC", "STKaiti", "Songti SC", "Noto Serif SC", serif;
  font-size: clamp(25px, 7.2vw, 32px);
  outline: none;
}

.profile-info-field input::placeholder {
  color: rgba(59, 73, 67, .24);
}

.profile-info-footer {
  width: 100%;
  max-width: 352px;
  margin: 0 auto;
}

.profile-info-save {
  width: 100%;
  min-height: 52px;
  display: grid;
  grid-template-columns: minmax(28px, 1fr) auto minmax(28px, 1fr);
  align-items: center;
  gap: 9px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: #050505;
  color: #fff;
  box-shadow: 0 14px 26px rgba(0, 0, 0, .15);
}

.profile-info-save span {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7) 72%, transparent);
}

.profile-info-save span:last-child {
  transform: scaleX(-1);
}

.profile-info-save b {
  font-family: "Kaiti SC", "STKaiti", "Songti SC", "Noto Serif SC", serif;
  font-size: clamp(19px, 5.2vw, 23px);
  font-weight: 500;
  line-height: 1;
}

.mine-luck-word-card {
  position: relative;
  min-height: 96px;
  margin: 14px 0;
  padding: 16px 16px;
  overflow: hidden;
}

.mine-luck-word-copy {
  position: relative;
  z-index: 2;
}

.mine-luck-word-card small {
  color: #b57e2f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: .16em;
}

.mine-luck-word-card b {
  margin-top: 8px;
  color: #2d1b15;
  font-size: 21px;
}

.mine-luck-word-card span {
  margin-top: 6px;
  color: #806247;
  font-size: 13px;
  font-weight: 400;
}

.mine-luck-word-card em {
  position: relative;
  z-index: 2;
  min-width: 56px;
  padding: 8px 12px;
  border: 1px solid rgba(207, 181, 142, .5);
  background: rgba(255, 250, 240, .74);
  color: #a84b3e;
  text-align: center;
  font-size: 15px;
  font-weight: 400;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
}

.mine-luck-word-art {
  position: absolute;
  right: 94px;
  top: 16px;
  width: 82px;
  height: 66px;
  opacity: .32;
  pointer-events: none;
}

.mine-luck-word-art strong {
  position: absolute;
  right: 8px;
  top: 6px;
  width: 48px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(204, 161, 87, .34);
  border-radius: 9px;
  background: rgba(255, 246, 227, .76);
  color: rgba(192, 139, 50, .54);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 26px;
  transform: rotate(8deg);
  box-shadow: 0 6px 14px rgba(131, 89, 42, .08);
}

.mine-luck-word-art::before,
.mine-luck-word-art::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 8px;
  width: 45px;
  height: 56px;
  border: 1px solid rgba(214, 178, 112, .2);
  border-radius: 9px;
  background: rgba(255, 248, 234, .5);
}

.mine-luck-word-art::before {
  transform: translate(-10px, 5px) rotate(-8deg);
}

.mine-luck-word-art::after {
  transform: translate(8px, 8px) rotate(14deg);
}

.mine-art-leaves {
  position: absolute;
  left: 4px;
  bottom: 4px;
  width: 56px;
  height: 34px;
}

.mine-art-leaves::before {
  content: "";
  position: absolute;
  left: 8px;
  bottom: 6px;
  width: 42px;
  height: 1.5px;
  background: rgba(204, 161, 87, .42);
  transform: rotate(-20deg);
}

.mine-art-leaves i {
  position: absolute;
  width: 10px;
  height: 20px;
  border-radius: 100% 0 100% 0;
  background: rgba(204, 161, 87, .32);
}

.mine-art-leaves i:nth-child(1) { left: 8px; top: 11px; transform: rotate(-62deg); }
.mine-art-leaves i:nth-child(2) { left: 24px; top: 5px; transform: rotate(24deg); }
.mine-art-leaves i:nth-child(3) { left: 38px; top: 0; transform: rotate(18deg); }

.mine-setting-card {
  margin-top: 16px;
  padding: 14px 17px;
}

.mine-setting-row {
  width: 100%;
  min-height: 52px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(221, 199, 164, .66);
  background: transparent;
  color: inherit;
  text-align: left;
}

.mine-setting-row:last-child {
  border-bottom: 0;
}

.mine-setting-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: #bd842f;
}

.mine-setting-icon svg,
.mine-reset-button svg {
  width: 24px;
  height: 24px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mine-setting-row b {
  color: #19120f;
  font-size: 16px;
  line-height: 1;
  font-weight: 400;
}

.mine-setting-row em {
  color: #755b41;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  white-space: nowrap;
}

.mine-setting-row .mine-chevron {
  font-size: 24px;
}

.mine-reset-button {
  min-width: 118px;
  min-height: 43px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
  padding: 0 20px;
  border: 1px solid rgba(207, 181, 142, .78);
  border-radius: 999px;
  background: rgba(255, 250, 240, .78);
  color: #a74738;
  box-shadow: 0 8px 18px rgba(91, 58, 28, .065), inset 0 1px 0 rgba(255, 255, 255, .76);
  font-size: 15px;
  font-weight: 400;
}

.mine-reset-button svg {
  width: 21px;
  height: 21px;
  stroke-width: 2;
}

@media (max-width: 380px) {
  .mine-art-screen {
    padding-left: 16px;
    padding-right: 16px;
  }

  .mine-art-head {
    gap: 10px;
  }

  .mine-head-pills {
    gap: 6px;
  }

  .mine-head-pill {
    min-height: 30px;
    padding: 0 9px;
  }

  .mine-profile-card {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 10px;
    padding-left: 12px;
  }

  .mine-avatar {
    width: 40px;
    height: 40px;
    font-size: 21px;
  }

  .mine-profile-copy h2 {
    font-size: 16.5px;
  }

  .mine-setting-row {
    grid-template-columns: 40px minmax(0, 1fr) auto 16px;
  }

  .mine-setting-row b {
    font-size: 15px;
  }
}

.luck-word-screen {
  min-height: 100vh;
  padding: max(18px, env(safe-area-inset-top)) 14px 28px;
  background:
    radial-gradient(circle at 72% 4%, rgba(255, 251, 237, .96), transparent 30%),
    radial-gradient(circle at 11% 22%, rgba(255, 255, 255, .56), transparent 23%),
    radial-gradient(circle at 50% 86%, rgba(201, 132, 65, .15), transparent 36%),
    linear-gradient(180deg, #fff4e3 0%, #f1ddbd 100%);
  overflow: hidden;
}

.luck-word-screen::before,
.luck-word-screen::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.luck-word-screen::before {
  display: none;
}

.luck-word-screen::after {
  right: -36px;
  top: 150px;
  width: 78px;
  height: calc(100% - 170px);
  border-radius: 34px 0 0 34px;
  background:
    repeating-linear-gradient(90deg, rgba(178, 112, 54, .08) 0 1px, transparent 1px 8px),
    linear-gradient(90deg, rgba(255, 250, 239, .28), rgba(216, 151, 84, .12));
  box-shadow: -12px 0 26px rgba(120, 70, 34, .06);
}

.luck-word-back {
  position: fixed;
  left: max(14px, calc((100vw - 430px) / 2 + 14px));
  top: max(14px, env(safe-area-inset-top));
  z-index: 82;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(184, 137, 62, .18);
  border-radius: 999px;
  background: rgba(255, 250, 240, .76);
  color: rgba(88, 61, 40, .82);
  box-shadow: 0 10px 24px rgba(75, 42, 22, .1), inset 0 1px 0 rgba(255, 255, 255, .68);
  font-size: 14px;
  font-weight: 400;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.luck-word-hero {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 12px;
  padding: 44px 4px 16px 2px;
}

.luck-word-hero h1 {
  margin: 0;
  color: #6b4318;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 36px;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 0 2px 0 rgba(255, 255, 255, .5);
}

.luck-word-hero h1 i {
  display: inline-grid;
  place-items: center;
  width: 23px;
  height: 23px;
  margin-left: 4px;
  border-radius: 4px;
  background: #d44e34;
  color: #fff7e7;
  font-size: 13px;
  font-style: normal;
  vertical-align: middle;
  transform: rotate(3deg);
}

.luck-word-hero p {
  margin: 11px 0 0;
  color: rgba(93, 79, 66, .68);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 18px;
  letter-spacing: .08em;
}

.luck-word-paper {
  position: relative;
  z-index: 2;
  margin-left: 0;
  padding: 15px 13px 16px;
  border: 1px solid rgba(255, 255, 255, .56);
  border-radius: 22px;
  background:
    radial-gradient(circle at 52% -4%, rgba(255, 255, 255, .66), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, .56), transparent 20%, rgba(205, 136, 70, .045) 88%),
    linear-gradient(180deg, rgba(255, 253, 248, .91), rgba(255, 247, 232, .84));
  box-shadow: 0 22px 48px rgba(120, 70, 34, .1), inset 0 1px 0 rgba(255, 255, 255, .76);
  backdrop-filter: blur(10px);
}

.luck-word-paper::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(123, 77, 42, .035) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, rgba(123, 77, 42, .028) 0 1px, transparent 1px 100%);
  background-size: 18px 18px;
  mix-blend-mode: multiply;
  opacity: .42;
  pointer-events: none;
}

.luck-word-paper::after {
  display: none;
}

.personal-luck-word {
  position: relative;
  z-index: 1;
  margin: 0 0 10px;
  padding: 14px 12px 13px;
  border-radius: 16px;
  border: 1px solid rgba(218, 158, 74, .12);
  background:
    radial-gradient(circle at 91% 14%, rgba(255, 229, 171, .22), transparent 30%),
    linear-gradient(135deg, rgba(255, 252, 244, .62), rgba(255, 239, 212, .34));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .62);
  overflow: hidden;
}

.personal-luck-word b {
  color: #4a2b1e;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 18px;
  letter-spacing: .08em;
}

.personal-luck-word p {
  max-width: 260px;
  margin: 6px 0 0;
  color: rgba(98, 82, 68, .66);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: .04em;
}

.paper-star {
  position: absolute;
  top: 21px;
  color: rgba(214, 157, 76, .34);
  font-size: 15px;
}

.paper-star.left {
  left: 134px;
}

.paper-star.right {
  right: 48px;
}

.swirl-line {
  position: absolute;
  right: 42px;
  top: 48px;
  width: 126px;
  height: 24px;
  border-top: 1px solid rgba(218, 158, 74, .18);
  border-radius: 50%;
  transform: rotate(-7deg);
}

.wild-word-row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.wild-word-empty {
  position: relative;
  z-index: 1;
  margin-top: 11px;
  padding: 10px 11px;
  border-radius: 12px;
  background: rgba(255, 250, 240, .42);
  color: rgba(101, 82, 66, .58);
  font-size: 12px;
  line-height: 1.55;
}

.wild-word-chip,
.word-tile {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 8px;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-weight: 900;
  color: inherit;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

.wild-word-chip {
  width: 32px;
  height: 32px;
  aspect-ratio: auto;
  border: 1px solid rgba(223, 158, 50, .42);
  background:
    radial-gradient(circle at 38% 24%, rgba(255, 255, 255, .86), transparent 34%),
    linear-gradient(180deg, rgba(255, 250, 232, .98), rgba(243, 207, 141, .82));
  color: #df8c04;
  box-shadow: 0 0 8px rgba(224, 151, 32, .12), inset 0 0 0 1px rgba(255, 255, 255, .42);
}

.wild-word-chip i,
.word-tile i {
  font-style: normal;
  font-size: 19px;
  line-height: 1;
}

.wild-word-chip.active,
.word-tile.active {
  border-color: rgba(198, 73, 52, .52);
  color: #c74936;
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 8px 18px rgba(160, 78, 40, .12), 0 0 14px rgba(218, 119, 64, .18), inset 0 0 0 2px rgba(255, 255, 255, .52);
}

.wild-word-chip em,
.word-tile em {
  display: none;
}

.wordbook-panel {
  position: relative;
  z-index: 1;
}

.luck-word-detail {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 3px 0 2px;
  padding: 10px 11px;
  border: 1px solid rgba(198, 73, 52, .12);
  border-radius: 13px;
  background:
    radial-gradient(circle at 12% 22%, rgba(255, 236, 186, .5), transparent 36%),
    linear-gradient(135deg, rgba(255, 252, 245, .82), rgba(255, 241, 216, .5));
  box-shadow: 0 10px 18px rgba(121, 69, 34, .055), inset 0 1px 0 rgba(255, 255, 255, .62);
  animation: luckWordDetailIn .22s ease both;
  transform-origin: top center;
}

.luck-word-detail.wild {
  flex: 0 0 100%;
  margin-top: 3px;
}

.luck-word-detail::before {
  content: "";
  position: absolute;
  left: var(--luck-word-detail-arrow, 20px);
  top: -5px;
  width: 10px;
  height: 10px;
  border-left: 1px solid rgba(198, 73, 52, .1);
  border-top: 1px solid rgba(198, 73, 52, .1);
  background: rgba(255, 250, 240, .88);
  transform: translateX(-50%) rotate(45deg);
}

.luck-word-detail i {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(198, 73, 52, .28);
  background:
    radial-gradient(circle at 38% 24%, rgba(255, 255, 255, .86), transparent 34%),
    linear-gradient(180deg, rgba(255, 248, 232, .96), rgba(247, 211, 175, .76));
  color: #c74936;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 22px;
  font-style: normal;
  font-weight: 900;
  box-shadow: 0 6px 12px rgba(151, 72, 39, .09);
}

.luck-word-detail b {
  color: #3d2a20;
  font-size: 13px;
  font-weight: 900;
}

.luck-word-detail p {
  margin: 4px 0 0;
  color: rgba(84, 67, 54, .74);
  font-size: 12px;
  line-height: 1.55;
}

@keyframes luckWordDetailIn {
  0% {
    opacity: 0;
    transform: translateY(-5px) scaleY(.92);
    filter: blur(.4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
    filter: blur(0);
  }
}

.wordbook-group {
  display: grid;
  gap: 9px;
  padding: 12px 0;
  border-top: 1px solid rgba(187, 137, 82, .12);
}

.wordbook-group:first-child {
  border-top: 0;
}

.wordbook-meta {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-height: 0;
  text-align: left;
}

.wordbook-meta i {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin: 0;
  border-radius: 50%;
  background: rgba(255, 245, 221, .62);
  color: #d3912f;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
}

.wordbook-meta b {
  color: #4a2b1e;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 15px;
  letter-spacing: .06em;
}

.wordbook-meta span {
  margin: 0;
  color: rgba(100, 88, 77, .68);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: .03em;
}

.word-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 7px;
  align-content: center;
}

.word-tile {
  min-width: 0;
  border: 1px solid rgba(176, 136, 94, .1);
  border-radius: 9px;
  background: rgba(255, 250, 240, .2);
  color: rgba(118, 96, 80, .2);
}

.word-tile.locked {
  border-color: rgba(176, 136, 94, .08);
  background:
    linear-gradient(180deg, rgba(255, 250, 240, .16), rgba(244, 225, 197, .08));
  color: rgba(118, 96, 80, .18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}

.word-tile.locked:active {
  transform: scale(.98);
  color: rgba(118, 96, 80, .28);
}

.word-tile.lit {
  border-color: rgba(224, 151, 32, .36);
  background:
    radial-gradient(circle at 38% 24%, rgba(255, 255, 255, .86), transparent 34%),
    linear-gradient(180deg, rgba(255, 250, 232, .96), rgba(242, 207, 144, .68));
  color: #d98a05;
  box-shadow: 0 0 10px rgba(224, 151, 32, .12), inset 0 0 0 1px rgba(255, 255, 255, .42);
}

.word-tile.level-2,
.word-tile.level-3 {
  color: #c54935;
  border-color: rgba(198, 73, 52, .4);
  background:
    radial-gradient(circle at 38% 24%, rgba(255, 255, 255, .86), transparent 34%),
    linear-gradient(180deg, rgba(255, 247, 232, .98), rgba(248, 214, 177, .76));
}

.profile-base-hero {
  position: relative;
  margin-bottom: 14px;
  min-height: 276px;
  display: grid;
  align-content: center;
  padding: 18px;
  border: 1px solid rgba(215, 173, 99, .72);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 78% 24%, rgba(255, 236, 175, .7), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .12)),
    #fff7e8;
  box-shadow: var(--shadow);
}

.profile-base-hero::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(184, 137, 62, .22);
  border-radius: 6px;
  pointer-events: none;
}

.profile-base-hero small,
.profile-base-hero h1,
.profile-base-hero p {
  position: relative;
}

.profile-base-hero small {
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
}

.profile-base-hero h1 {
  margin: 10px 0 8px;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 27px;
  line-height: 1.25;
}

.profile-base-hero p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.profile-base-screen .profile-base-form {
  padding: 16px;
  border: 1px solid rgba(184, 137, 62, .3);
  border-radius: var(--radius);
  background: rgba(255, 249, 235, .82);
  box-shadow: 0 18px 36px rgba(75, 42, 22, .1);
}

.profile-save-button {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 16px;
  border: 1px solid rgba(110, 60, 41, .32);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(255, 248, 232, .18), rgba(255, 255, 255, 0) 42%),
    #4a2b1e;
  color: #fff7e8;
  box-shadow: 0 18px 34px rgba(75, 42, 22, .18);
}

.profile-save-button i {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 248, 232, .78);
  border-radius: 999px;
  color: #fff7e8;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 17px;
  font-style: normal;
  font-weight: 900;
  transform: rotate(-8deg);
}

.profile-save-button span {
  display: grid;
  gap: 2px;
  text-align: left;
}

.profile-save-button b {
  font-size: 15px;
  line-height: 1.2;
}

.profile-save-button small {
  color: rgba(255, 248, 232, .68);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
}

.profile-flow-screen {
  min-height: 100svh;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  padding: max(22px, calc(env(safe-area-inset-top) + 16px)) 24px max(16px, calc(env(safe-area-inset-bottom) + 16px));
  overflow: hidden;
  isolation: isolate;
  color: rgba(25, 32, 29, .94);
  background:
    radial-gradient(circle at 50% 14%, rgba(255, 255, 255, .74), transparent 30%),
    radial-gradient(circle at 84% 74%, rgba(217, 232, 224, .58), transparent 30%),
    linear-gradient(180deg, #f5f8f4 0%, #eaf1ee 58%, #f7f7f2 100%);
}

.profile-flow-screen::before,
.profile-flow-screen::after {
  content: "";
  position: fixed;
  inset: 0;
  left: 50%;
  width: min(100%, 430px);
  transform: translateX(-50%);
  pointer-events: none;
}

.profile-flow-screen::before {
  z-index: -2;
  background:
    linear-gradient(rgba(39, 64, 55, .045) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(39, 64, 55, .04) 1px, transparent 1px) 0 0 / 28px 28px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .44) 62%, transparent);
}

.profile-flow-screen::after {
  z-index: -1;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .74) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 58%, rgba(255, 255, 255, .54) 0 1px, transparent 2px),
    radial-gradient(circle at 50% 68%, rgba(255, 255, 255, .28), transparent 38%);
}

.profile-flow-back {
  position: fixed;
  left: max(22px, calc((100vw - 430px) / 2 + 22px));
  top: max(26px, calc(env(safe-area-inset-top) + 18px));
  z-index: 4;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: rgba(15, 20, 18, .9);
  font-family: Arial, sans-serif;
  font-size: 36px;
  font-weight: 300;
  line-height: .8;
}

.profile-flow-progress {
  position: fixed;
  right: max(28px, calc((100vw - 430px) / 2 + 28px));
  top: max(58px, calc(env(safe-area-inset-top) + 48px));
  z-index: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  color: rgba(62, 80, 73, .10);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.profile-flow-progress b {
  font-size: clamp(46px, 13vw, 58px);
  font-weight: 700;
}

.profile-flow-progress span {
  position: static;
  font-size: clamp(24px, 6.8vw, 31px);
  transform: translateY(-2px);
}

.profile-flow-progress i {
  position: absolute;
  right: 0;
  bottom: -8px;
  width: 62px;
  height: 2px;
  border-radius: 999px;
  background: rgba(67, 96, 82, .12);
}

.profile-flow-main {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 352px;
  margin: 0 auto;
  display: grid;
  align-content: start;
  padding-top: min(13svh, 108px);
}

.profile-flow-head {
  position: relative;
  padding-right: 24px;
}

.profile-flow-head h1 {
  margin: 0;
  color: rgba(17, 22, 20, .92);
  font-family: "Kaiti SC", "STKaiti", "Songti SC", "Noto Serif SC", serif;
  font-size: clamp(25px, 7.2vw, 32px);
  line-height: 1.52;
  font-weight: 500;
  letter-spacing: 0;
}

.profile-flow-summary {
  min-height: 26px;
  margin-top: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(5px, 1.9vw, 9px);
  color: rgba(17, 22, 20, .82);
  font-family: "Kaiti SC", "STKaiti", "Songti SC", "Noto Serif SC", serif;
  font-size: clamp(16px, 4.4vw, 20px);
  line-height: 1.1;
  white-space: nowrap;
}

.profile-flow-summary span {
  color: #2d7eab;
}

.profile-flow-summary b {
  font-weight: 500;
}

.profile-flow-summary i {
  color: rgba(65, 79, 73, .44);
  font-style: normal;
  font-size: .62em;
}

.profile-flow-picker {
  position: relative;
  width: 100%;
  height: 252px;
  margin: 18px auto 0;
  display: grid;
  align-items: center;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}

.profile-flow-picker.date-picker {
  grid-template-columns: 1.22fr .92fr .92fr;
}

.profile-flow-picker.time-picker {
  width: min(216px, 66vw);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.profile-flow-picker.place-picker {
  grid-template-columns: .92fr 1.08fr;
  gap: 12px;
}

.profile-flow-picker::before {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 50%;
  z-index: 0;
  height: 44px;
  border-radius: 999px;
  background: rgba(210, 223, 219, .64);
  transform: translateY(-50%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .52);
}

.profile-wheel-column {
  position: relative;
  z-index: 1;
  min-width: 0;
  height: 100%;
  padding: 108px 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.profile-wheel-column::-webkit-scrollbar {
  display: none;
}

.profile-wheel-item {
  width: 100%;
  height: 36px;
  display: grid;
  place-items: center;
  scroll-snap-align: center;
  border: 0;
  background: transparent;
  color: rgba(27, 34, 31, .34);
  font-family: "Kaiti SC", "STKaiti", "Songti SC", "Noto Serif SC", serif;
  font-size: clamp(18px, 5vw, 22px);
  font-weight: 400;
  line-height: 1;
  transition: color .18s ease, font-size .18s ease, opacity .18s ease, filter .18s ease, transform .18s ease;
}

.profile-wheel-item.distance-far,
.profile-wheel-item.distance-3 {
  opacity: .18;
  filter: blur(1.8px);
}

.profile-wheel-item.distance-2 {
  opacity: .38;
  filter: blur(.7px);
}

.profile-wheel-item.distance-1 {
  opacity: .62;
}

.profile-wheel-item.active {
  color: rgba(19, 26, 23, .92);
  font-size: clamp(27px, 7.5vw, 32px);
  opacity: 1;
  filter: none;
}

.profile-place-entry {
  min-height: 250px;
  display: grid;
  align-items: center;
  margin-top: 20px;
}

.profile-place-entry input {
  width: 100%;
  min-height: 72px;
  border: 0;
  background: transparent;
  color: rgba(19, 26, 23, .86);
  font-family: "Kaiti SC", "STKaiti", "Songti SC", "Noto Serif SC", serif;
  font-size: clamp(26px, 7.2vw, 32px);
  line-height: 1.2;
  text-align: center;
  outline: none;
}

.profile-place-entry input::placeholder {
  color: rgba(59, 73, 67, .26);
}

.profile-flow-note {
  max-width: 264px;
  min-height: 34px;
  margin: 2px auto 0;
  color: rgba(59, 73, 67, .34);
  font-family: "Kaiti SC", "STKaiti", "Songti SC", "Noto Serif SC", serif;
  font-size: clamp(13px, 3.8vw, 16px);
  line-height: 1.55;
  text-align: center;
}

.profile-flow-footer {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 352px;
  margin: 0 auto;
  display: grid;
  gap: 7px;
}

.profile-flow-next {
  width: 100%;
  min-height: 52px;
  display: grid;
  grid-template-columns: minmax(28px, 1fr) auto minmax(28px, 1fr);
  align-items: center;
  gap: 9px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: #050505;
  color: #fff;
  box-shadow: 0 14px 26px rgba(0, 0, 0, .15);
}

.profile-flow-next span {
  height: 1px;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, .7) 72%, transparent);
}

.profile-flow-next span:last-child {
  transform: scaleX(-1);
}

.profile-flow-next b {
  font-family: "Kaiti SC", "STKaiti", "Songti SC", "Noto Serif SC", serif;
  font-size: clamp(19px, 5.2vw, 23px);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.profile-flow-footer p {
  margin: 0;
  color: rgba(59, 73, 67, .28);
  font-family: "Kaiti SC", "STKaiti", "Songti SC", "Noto Serif SC", serif;
  font-size: clamp(11px, 3.2vw, 13px);
  line-height: 1.35;
  text-align: center;
}

@media (max-height: 760px) {
  .profile-flow-screen {
    padding-inline: 22px;
  }

  .profile-flow-main {
    padding-top: 96px;
  }

  .profile-flow-summary {
    margin-top: 30px;
  }

  .profile-flow-picker,
  .profile-place-entry {
    height: 236px;
    min-height: 236px;
    margin-top: 14px;
  }

  .profile-wheel-column {
    padding-block: 100px;
  }

  .profile-flow-note {
    min-height: 30px;
    font-size: 12px;
  }

  .profile-flow-next {
    min-height: 48px;
  }
}

.setting-list {
  overflow: hidden;
  margin-bottom: 16px;
}

.setting-row {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  color: var(--ink);
  border-bottom: 1px solid rgba(216, 199, 170, .48);
}

.setting-row:last-child {
  border-bottom: 0;
}

.setting-row span {
  font-weight: 900;
}

.setting-row b {
  color: var(--muted);
  font-size: 12px;
}

.tabs {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 20;
  width: min(100%, 430px);
  transform: translateX(-50%);
  padding: 7px 18px max(7px, env(safe-area-inset-bottom));
  background:
    linear-gradient(180deg, transparent, rgba(238, 226, 210, .24) 30%, rgba(238, 226, 210, .74) 100%);
}

.art-tabs-panel {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--tab-count, 3), minmax(0, 1fr));
  gap: 9px;
  min-height: 46px;
  padding: 0;
  border: 0;
  overflow: visible;
  background: transparent;
}

.tab-pill {
  position: relative;
  z-index: 1;
  overflow: hidden;
  min-width: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 999px;
  padding: 5px 9px;
  background:
    radial-gradient(circle at 28% 16%, rgba(255, 255, 255, .92), transparent 34%),
    linear-gradient(180deg, rgba(255, 252, 245, .82), rgba(248, 238, 221, .68));
  color: #6d5140;
  border: 1px solid rgba(249, 241, 226, .96);
  font-size: 14px;
  font-weight: 900;
  box-shadow:
    0 8px 16px rgba(91, 63, 35, .08),
    inset 0 0 0 1px rgba(220, 194, 158, .18),
    inset 0 1px 0 rgba(255, 255, 255, .74);
  transition: transform .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
}

.tab-pill::before,
.tab-pill::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 15px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(213, 181, 136, .46), transparent);
  pointer-events: none;
  opacity: .54;
}

.tab-pill::before {
  left: 8px;
}

.tab-pill::after {
  right: 8px;
}

.tab-pill i {
  position: relative;
  z-index: 1;
  width: 27px;
  height: 27px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(226, 199, 164, .74);
  background: rgba(255, 249, 237, .42);
  color: #9d5a4b;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34);
}

.tab-pill span {
  position: relative;
  z-index: 1;
  transform: translateY(1px);
  white-space: nowrap;
}

.tab-pill.active {
  color: #98463a;
  border-color: rgba(163, 78, 62, .62);
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, .86), transparent 34%),
    radial-gradient(circle at 88% 54%, rgba(224, 179, 114, .14), transparent 42%),
    linear-gradient(180deg, rgba(255, 252, 246, .9), rgba(255, 243, 222, .76));
  box-shadow:
    0 9px 18px rgba(145, 78, 55, .12),
    inset 0 0 0 1px rgba(255, 255, 255, .7);
}

.tab-pill.active::before,
.tab-pill.active::after {
  display: none;
}

.tab-pill.active i {
  color: #fffaf0;
  border-color: rgba(255, 250, 240, .72);
  background:
    radial-gradient(circle at 38% 28%, rgba(255, 236, 203, .28), transparent 34%),
    linear-gradient(160deg, #ad5546, #8e3d34);
  box-shadow:
    0 3px 8px rgba(126, 55, 43, .14),
    inset 0 0 0 1px rgba(128, 55, 43, .2);
}

.tab-pill.active span {
  font-size: 15px;
  color: #98463a;
}

.tab-pill.active span::after {
  content: "✦";
  position: absolute;
  left: -36px;
  top: 5px;
  color: rgba(183, 91, 75, .34);
  font-size: 7px;
}

@media (max-width: 380px) {
  .tabs {
    padding-left: 14px;
    padding-right: 14px;
  }

  .art-tabs-panel {
    gap: 7px;
  }

  .tab-pill {
    min-height: 42px;
    gap: 5px;
    padding: 5px 7px;
    font-size: 13px;
  }

  .tab-pill i {
    width: 25px;
    height: 25px;
    font-size: 14px;
  }

  .tab-pill.active span {
    font-size: 14px;
  }
}

/* Secondary and tertiary light shell experiment. */
.mine-art-screen,
.calendar-screen,
.fortune-screen,
.energy-screen,
.luck-word-screen,
.profile-info-screen,
.profile-flow-screen {
  --secondary-ink: #17211d;
  --secondary-muted: rgba(43, 57, 51, .58);
  --secondary-soft: rgba(67, 96, 82, .16);
  --secondary-line: rgba(67, 96, 82, .14);
  --secondary-card: rgba(255, 255, 250, .74);
  --secondary-card-strong: rgba(255, 255, 250, .88);
  --secondary-accent: #547569;
  --secondary-accent-deep: #28483e;
  --secondary-gold: rgba(151, 116, 58, .84);
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  color: var(--secondary-ink);
  background:
    radial-gradient(circle at 16% 24%, rgba(255, 255, 255, .92), transparent 24%),
    radial-gradient(circle at 84% 74%, rgba(217, 232, 224, .78), transparent 28%),
    linear-gradient(180deg, #f5f8f4 0%, #e9f0ec 58%, #f7f7f2 100%);
}

.mine-art-screen::before,
.mine-art-screen::after,
.calendar-screen::before,
.calendar-screen::after,
.fortune-screen::before,
.fortune-screen::after,
.energy-screen::before,
.energy-screen::after,
.luck-word-screen::before,
.luck-word-screen::after,
.profile-info-screen::before,
.profile-info-screen::after,
.profile-flow-screen::before,
.profile-flow-screen::after {
  content: "";
  position: fixed;
  inset: 0;
  left: 50%;
  display: block;
  width: min(100%, 430px);
  transform: translateX(-50%);
  pointer-events: none;
}

.mine-art-screen::before,
.calendar-screen::before,
.fortune-screen::before,
.energy-screen::before,
.luck-word-screen::before,
.profile-info-screen::before,
.profile-flow-screen::before {
  z-index: -2;
  background:
    linear-gradient(rgba(39, 64, 55, .045) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(39, 64, 55, .04) 1px, transparent 1px) 0 0 / 28px 28px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .82), rgba(0, 0, 0, .46) 66%, transparent);
}

.mine-art-screen::after,
.calendar-screen::after,
.fortune-screen::after,
.energy-screen::after,
.luck-word-screen::after,
.profile-info-screen::after,
.profile-flow-screen::after {
  z-index: -1;
  background:
    radial-gradient(circle at 32% 39%, rgba(255, 255, 255, .68) 0 1px, transparent 2px),
    radial-gradient(circle at 74% 52%, rgba(255, 255, 255, .52) 0 1px, transparent 2px),
    linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0));
}

.mine-art-screen .top-row,
.calendar-screen .top-row,
.fortune-screen .top-row,
.energy-screen .top-row {
  position: relative;
  z-index: 3;
}

.mine-art-screen .plain-button,
.calendar-screen .plain-button,
.fortune-screen .plain-button,
.energy-screen .plain-button,
.luck-word-back {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(67, 96, 82, .15);
  border-radius: 999px;
  background: rgba(255, 255, 250, .66);
  color: rgba(23, 33, 29, .78);
  box-shadow: 0 10px 22px rgba(43, 57, 51, .07), inset 0 1px 0 rgba(255, 255, 255, .74);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 13px;
  font-weight: 800;
}

.calendar-screen .chip,
.fortune-screen .chip,
.energy-screen .chip,
.mine-head-pill,
.button-chip {
  border-color: rgba(67, 96, 82, .15);
  background: rgba(255, 255, 250, .64);
  color: rgba(23, 33, 29, .68);
  box-shadow: 0 9px 18px rgba(43, 57, 51, .055), inset 0 1px 0 rgba(255, 255, 255, .7);
}

.profile-info-back,
.profile-flow-back {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(67, 96, 82, .12);
  border-radius: 50%;
  background: rgba(255, 255, 250, .62);
  color: rgba(23, 33, 29, .76);
  box-shadow: 0 10px 22px rgba(43, 57, 51, .07), inset 0 1px 0 rgba(255, 255, 255, .74);
  font-size: 31px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.mine-profile-card,
.mine-luck-word-card,
.mine-setting-card,
.calendar-view-switch,
.month-stat,
.calendar-cell,
.calendar-flip-card,
.calendar-message-block,
.fortune-profile-gate,
.mood-insight-card,
.mood-tip,
.mood-lock-card,
.luck-item,
.energy-hero,
.energy-guide,
.energy-rule,
.ledger-row,
.luck-word-paper,
.personal-luck-word,
.luck-word-detail,
.wild-word-empty {
  border-color: rgba(67, 96, 82, .14);
  background:
    radial-gradient(circle at 22% 14%, rgba(255, 255, 255, .82), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 250, .88), rgba(238, 246, 241, .68));
  box-shadow:
    0 16px 34px rgba(43, 57, 51, .085),
    inset 0 1px 0 rgba(255, 255, 255, .76);
}

.calendar-cell.future,
.calendar-cell.empty {
  background: rgba(255, 255, 250, .44);
}

.calendar-cell.has-cover {
  border-color: rgba(255, 255, 255, .42);
  background: #e7e0d0;
  box-shadow: 0 10px 22px rgba(75, 42, 22, .08);
}

.calendar-cell:not(.empty):hover,
.calendar-cell.selected {
  border-color: rgba(84, 117, 105, .3);
  box-shadow: 0 12px 24px rgba(43, 57, 51, .1);
}

.mine-art-head h1,
.mine-profile-copy h2,
.mine-setting-row b,
.calendar-hello h1,
.calendar-flip-card h3,
.fortune-profile-gate h1,
.mood-big-score b,
.mood-insight-card h3,
.mood-insight-card p,
.luck-item b,
.energy-hero h1,
.energy-rule b,
.ledger-row b,
.luck-word-hero h1,
.personal-luck-word b,
.wordbook-meta b,
.luck-word-detail b,
.profile-info-head h1,
.profile-flow-head h1 {
  color: var(--secondary-ink);
  text-shadow: none;
}

.mine-profile-copy p,
.mine-setting-row em,
.calendar-hello p,
.calendar-view-switch span,
.month-stat span,
.day-quote,
.calendar-luck-lines div,
.calendar-message-empty,
.calendar-message-track span,
.fortune-profile-gate p,
.mood-lock-card p,
.mood-tip span,
.luck-item span,
.energy-hero p,
.energy-guide-head span,
.energy-rule span,
.ledger-row span,
.ledger-row time,
.luck-word-hero p,
.personal-luck-word p,
.wordbook-meta span,
.luck-word-detail p,
.profile-info-head p,
.profile-info-field span,
.profile-flow-note,
.profile-flow-footer p {
  color: var(--secondary-muted);
}

.mine-head-pill i,
.mine-setting-icon,
.month-stat b,
.calendar-view-switch button,
.calendar-day-cover span,
.flip-label,
.calendar-luck-lines b,
.calendar-message-head b,
.calendar-message-head span,
.calendar-message-track em,
.calendar-message-track strong,
.calendar-blessing-row span,
.fortune-section h3,
.mood-big-score strong,
.energy-hero small,
.energy-summary b,
.energy-guide-head em,
.energy-rule strong,
.luck-word-hero h1 i,
.personal-luck-word .paper-star,
.wordbook-meta i,
.wild-word-chip,
.word-tile.lit,
.luck-word-detail i,
.profile-info-head small,
.profile-flow-summary span {
  color: var(--secondary-accent);
}

.mine-sprig::before,
.mine-sprig i {
  background: linear-gradient(160deg, rgba(132, 169, 152, .74), rgba(74, 111, 97, .86));
}

.mine-profile-card,
.mine-luck-word-card,
.mine-setting-card {
  border-radius: 18px;
}

.mine-luck-word-card small {
  color: var(--secondary-gold);
}

.mine-luck-word-art,
.mine-art-leaves,
.luck-word-paper::before,
.swirl-line {
  opacity: .42;
}

.mine-luck-word-art strong,
.mine-luck-word-art::before,
.mine-luck-word-art::after {
  border-color: rgba(84, 117, 105, .18);
  background: rgba(255, 255, 250, .54);
  color: rgba(84, 117, 105, .32);
}

.mine-setting-row {
  border-bottom-color: rgba(67, 96, 82, .11);
}

.mine-reset-button {
  border-color: rgba(67, 96, 82, .14);
  background: rgba(255, 255, 250, .64);
  color: rgba(77, 95, 88, .84);
  box-shadow: 0 10px 22px rgba(43, 57, 51, .065), inset 0 1px 0 rgba(255, 255, 255, .74);
}

.month-arrow,
.day-mark,
.calendar-blessing-row span,
.wild-word-chip,
.word-tile.lit,
.word-tile.level-2,
.word-tile.level-3,
.luck-word-detail i,
.wordbook-meta i {
  border-color: rgba(84, 117, 105, .18);
  background:
    radial-gradient(circle at 38% 24%, rgba(255, 255, 255, .86), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 250, .92), rgba(221, 235, 227, .72));
}

.month-arrow,
.day-num,
.day-mark,
.calendar-luck-lines b,
.calendar-message-head b,
.calendar-message-track strong {
  color: var(--secondary-accent-deep);
}

.calendar-cell.has-cover .day-num {
  color: rgba(255, 255, 250, .94);
}

.calendar-cell.has-cover .day-mark {
  border-color: rgba(255, 255, 255, .26);
  background: rgba(255, 255, 250, .76);
  color: rgba(54, 48, 40, .86);
}

.calendar-message-block.empty,
.cost-line {
  border: 1px solid rgba(67, 96, 82, .1);
  background: rgba(255, 255, 250, .58);
  color: var(--secondary-muted);
}

.mood-big-score strong {
  color: #3d8f87;
}

.mood-tip b {
  background: rgba(111, 154, 137, .16);
  color: var(--secondary-accent-deep);
}

.mood-tip.avoid b {
  background: rgba(151, 116, 58, .14);
  color: rgba(103, 83, 47, .86);
}

.mood-lock-card {
  border-style: solid;
}

.luck-icon,
.profile-needed-orb {
  border-color: rgba(67, 96, 82, .15);
  background:
    radial-gradient(circle at 36% 28%, rgba(255, 255, 255, .82), transparent 34%),
    linear-gradient(145deg, rgba(239, 247, 242, .96), rgba(218, 233, 224, .78));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .54);
}

.luck-icon.color {
  background: linear-gradient(135deg, #86b89f, #d9c47e);
}

.luck-icon.food {
  background: rgba(255, 252, 241, .82);
}

.energy-summary div {
  border-color: rgba(67, 96, 82, .12);
  background: rgba(255, 255, 250, .54);
}

.energy-rule small,
.profile-info-save,
.profile-flow-next {
  background: #17211d;
  color: #fffaf4;
  box-shadow: 0 14px 26px rgba(23, 33, 29, .16);
}

.energy-rule.completed small,
.energy-rule:disabled small {
  background: rgba(67, 96, 82, .12);
  color: rgba(43, 57, 51, .56);
}

.newcomer-screen .newcomer-profile-actions .newcomer-primary.profile-flow-next {
  width: min(100%, 344px);
  min-height: 58px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  border: 0;
  border-radius: 999px;
  color: rgba(255, 255, 250, .96);
  background: rgba(18, 25, 22, .9);
  box-shadow: 0 18px 38px rgba(31, 45, 39, .16);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 19px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}

.newcomer-screen .newcomer-profile-actions .newcomer-primary.profile-flow-next span {
  display: none;
}

.newcomer-screen .newcomer-profile-actions .newcomer-primary.profile-flow-next b {
  font: inherit;
  line-height: 1;
  white-space: nowrap;
}

.newcomer-screen .newcomer-profile-actions .newcomer-primary.profile-flow-next:disabled {
  color: rgba(43, 57, 51, .26);
  background: rgba(43, 57, 51, .08);
  box-shadow: none;
}

.ledger-mark.plus {
  color: #426f5b;
  background: rgba(162, 205, 181, .34);
}

.ledger-mark.minus {
  color: rgba(121, 85, 50, .86);
  background: rgba(220, 203, 169, .36);
}

.luck-word-screen {
  overflow-y: auto;
}

.luck-word-hero {
  padding-top: 48px;
}

.luck-word-hero h1 i {
  background: rgba(84, 117, 105, .14);
  color: var(--secondary-accent-deep);
}

.personal-luck-word,
.luck-word-detail {
  box-shadow:
    0 12px 24px rgba(43, 57, 51, .06),
    inset 0 1px 0 rgba(255, 255, 255, .7);
}

.wordbook-group {
  border-top-color: rgba(67, 96, 82, .1);
}

.word-tile.locked {
  border-color: rgba(67, 96, 82, .07);
  background: rgba(255, 255, 250, .18);
  color: rgba(43, 57, 51, .2);
}

.wild-word-chip.active,
.word-tile.active {
  border-color: rgba(84, 117, 105, .34);
  color: var(--secondary-accent-deep);
  box-shadow: 0 8px 18px rgba(43, 57, 51, .1), 0 0 14px rgba(111, 154, 137, .14), inset 0 0 0 2px rgba(255, 255, 255, .52);
}

.luck-word-detail::before {
  border-color: rgba(67, 96, 82, .1);
  background: rgba(255, 255, 250, .9);
}

.profile-avatar-preview,
.mine-avatar {
  border-color: rgba(67, 96, 82, .14);
  background:
    radial-gradient(circle at 36% 26%, rgba(255, 255, 255, .84), transparent 32%),
    linear-gradient(145deg, rgba(249, 250, 244, .96), rgba(221, 232, 224, .82));
  color: var(--secondary-ink);
}

.profile-info-field input,
.profile-place-entry input {
  color: var(--secondary-ink);
  border-bottom-color: rgba(67, 96, 82, .16);
}

.profile-flow-progress {
  color: rgba(62, 80, 73, .11);
}

.profile-flow-picker::before {
  background: rgba(210, 223, 219, .7);
}

.profile-wheel-item.active {
  color: var(--secondary-ink);
}

.profile-flow-summary {
  color: rgba(23, 33, 29, .82);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 88px;
  z-index: 100;
  transform: translateX(-50%);
  max-width: 320px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(63, 47, 39, .92);
  color: #fffaf0;
  font-size: 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}

.share-link-mask,
.reset-confirm-mask {
  position: fixed;
  inset: 0;
  z-index: 96;
  display: grid;
  align-items: end;
  padding: 18px;
  background: rgba(39, 28, 23, .34);
  backdrop-filter: blur(8px);
}

.share-link-sheet,
.reset-confirm-sheet {
  width: min(100%, 394px);
  margin: 0 auto max(12px, env(safe-area-inset-bottom));
  padding: 20px;
  border: 1px solid rgba(184, 137, 62, .42);
  border-radius: 16px;
  background:
    radial-gradient(circle at 76% 10%, rgba(255, 230, 168, .46), transparent 26%),
    linear-gradient(180deg, rgba(255, 253, 246, .96), rgba(255, 246, 230, .94));
  box-shadow: 0 24px 58px rgba(35, 23, 17, .28);
}

.share-link-sheet small,
.reset-confirm-sheet small {
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
}

.share-link-sheet h3,
.reset-confirm-sheet h3 {
  margin: 8px 0 4px;
  color: #2f2119;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 22px;
}

.share-link-sheet p,
.reset-confirm-sheet p {
  margin: 0 0 14px;
  color: rgba(74, 60, 49, .72);
  font-size: 13px;
  line-height: 1.7;
}

.share-link-input {
  width: 100%;
  height: 46px;
  padding: 0 12px;
  border: 1px solid rgba(184, 137, 62, .34);
  border-radius: 10px;
  background: rgba(255, 250, 240, .8);
  color: #4a3c31;
  font-size: 13px;
}

.share-link-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}

.reset-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 12px;
  margin-top: 16px;
}

.reset-confirm-sheet .primary.danger {
  border-color: #9b4b43;
  background: #9b4b43;
  color: #fffaf0;
}

.share-message-sent-mask {
  position: fixed;
  inset: 0;
  z-index: 97;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(28, 24, 20, .34);
  backdrop-filter: blur(7px);
}

.share-message-sent-sheet {
  position: relative;
  width: min(100%, 318px);
  padding: 24px 18px 18px;
  border: 1px solid rgba(180, 142, 78, .46);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 253, 247, .98), rgba(255, 246, 232, .96));
  box-shadow:
    0 24px 56px rgba(24, 18, 13, .28),
    inset 0 0 0 1px rgba(255, 255, 255, .72);
  text-align: center;
}

.share-message-sent-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(69, 55, 43, .06);
  color: rgba(63, 50, 39, .58);
  font-size: 20px;
  line-height: 1;
  font-weight: 300;
}

.share-message-sent-sheet small {
  display: block;
  color: rgba(143, 105, 54, .86);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .22em;
}

.share-message-sent-sheet h3 {
  margin: 4px auto 12px;
  color: #2b211b;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 19px;
  line-height: 1.34;
  font-weight: 760;
  letter-spacing: 0;
}

.share-message-sent-mark {
  width: min(100%, 248px);
  min-height: 0;
  margin: 0 auto 20px;
  padding: 4px 4px 2px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(88, 62, 45, .82);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 15.5px;
  line-height: 1.68;
  font-weight: 520;
  text-align: center;
  word-break: break-word;
  text-shadow: 0 1px 10px rgba(255, 250, 238, .62);
  box-shadow: none;
}

.share-message-sent-actions {
  display: grid;
  grid-template-columns: 1fr;
}

.share-message-sent-actions button {
  min-height: 44px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
}

.share-message-sent-actions .primary {
  border-color: rgba(71, 58, 42, .96);
  background: #332b22;
  color: rgba(255, 252, 244, .96);
  box-shadow: 0 12px 24px rgba(52, 37, 25, .18);
}

.share-fortune-dialog-mask {
  position: fixed;
  inset: 0;
  z-index: 98;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(25, 22, 18, .38);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.share-fortune-dialog-sheet {
  position: relative;
  width: min(100%, 326px);
  padding: 28px 18px 18px;
  border: 1px solid rgba(177, 137, 73, .5);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 8%, rgba(255, 239, 195, .38), transparent 42%),
    linear-gradient(180deg, rgba(255, 253, 247, .98), rgba(255, 245, 226, .96));
  box-shadow:
    0 26px 58px rgba(22, 16, 10, .3),
    inset 0 0 0 1px rgba(255, 255, 255, .72);
  text-align: center;
}

.share-fortune-dialog-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(69, 55, 43, .06);
  color: rgba(63, 50, 39, .58);
  font-size: 20px;
  line-height: 1;
  font-weight: 300;
}

.share-fortune-dialog-sheet h3 {
  margin: 0;
  color: #2b211b;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 21px;
  line-height: 1.28;
  font-weight: 800;
}

.share-fortune-dialog-sheet p {
  margin: 9px auto 16px;
  color: rgba(83, 62, 43, .78);
  font-size: 13px;
  line-height: 1.55;
}

.share-fortune-dialog-locks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 17px;
}

.share-fortune-dialog-locks span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 8px 4px 7px;
  border: 1px solid rgba(180, 142, 78, .18);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 239, 194, .22), transparent 58%),
    rgba(255, 251, 241, .52);
  color: rgba(63, 49, 36, .68);
  font-size: 11px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .68);
}

.share-fortune-dialog-locks b {
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 13px;
  line-height: 1.1;
  font-weight: 760;
}

.share-fortune-dialog-locks i {
  margin-top: 6px;
  color: rgba(139, 83, 53, .82);
  font-style: normal;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 700;
}

.share-fortune-dialog-sheet > .primary {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: #332b22;
  color: rgba(255, 252, 244, .96);
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 12px 24px rgba(52, 37, 25, .18);
}

.model-waiting {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(180deg, rgba(255, 247, 220, .22), transparent 28%),
    radial-gradient(ellipse at 50% 0%, rgba(255, 230, 154, .46), transparent 36%),
    radial-gradient(circle at 50% 38%, rgba(255, 231, 164, .28), transparent 24%),
    rgba(39, 28, 23, .36);
  backdrop-filter: blur(10px);
}

.waiting-paper {
  position: relative;
  width: min(318px, 100%);
  padding: 28px 20px 20px;
  border: 1px solid rgba(184, 137, 62, .42);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, 0) 34%),
    radial-gradient(circle at 78% 16%, rgba(255, 230, 168, .5), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 246, 225, .86)),
    #fff8ec;
  box-shadow: 0 30px 60px rgba(35, 23, 17, .28);
  text-align: center;
  overflow: hidden;
}

.waiting-paper::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -78px;
  width: 138px;
  height: 190px;
  transform: translateX(-50%);
  background:
    linear-gradient(180deg, rgba(255, 246, 198, .88), rgba(255, 227, 132, .28) 54%, transparent 100%);
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
  filter: blur(.3px);
  opacity: .86;
  animation: skylightPour 2.9s ease-in-out infinite;
  pointer-events: none;
}

.waiting-paper::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 20px;
  width: 126px;
  height: 126px;
  border-radius: 50%;
  transform: translateX(-50%);
  background:
    radial-gradient(circle, rgba(255, 235, 160, .46), transparent 66%);
  animation: skylightPulse 2.2s ease-in-out infinite;
  pointer-events: none;
}

.waiting-sigil {
  position: relative;
  z-index: 1;
  width: 82px;
  height: 82px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
}

.waiting-sigil::before,
.waiting-sigil::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -6px;
  width: 58px;
  height: 106px;
  border: 1px solid rgba(222, 177, 85, .45);
  border-radius: 50%;
  transform: translateX(-50%) rotate(18deg);
  animation: skylightLoop 3.6s ease-in-out infinite;
}

.waiting-sigil::after {
  width: 46px;
  height: 96px;
  top: -2px;
  border-style: dashed;
  opacity: .66;
  transform: translateX(-50%) rotate(-22deg);
  animation-delay: .55s;
}

.waiting-sigil span {
  position: relative;
  width: 46px;
  height: 54px;
  border: 1px solid rgba(184, 137, 62, .38);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 242, 207, .86)),
    #fff8ec;
  box-shadow:
    0 0 28px rgba(255, 211, 119, .52),
    0 10px 20px rgba(87, 55, 25, .12);
}

.waiting-sigil span::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 11px;
  height: 1px;
  background: rgba(184, 137, 62, .24);
  box-shadow: 0 10px 0 rgba(184, 137, 62, .18), 0 20px 0 rgba(184, 137, 62, .12);
}

.waiting-sigil span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -20px;
  width: 2px;
  height: 24px;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, rgba(255, 221, 133, .92));
  transform: translateX(-50%);
  animation: lightThread 1.5s ease-in-out infinite;
}

.waiting-sigil i {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(215, 173, 99, .9);
  box-shadow:
    -22px -22px 0 rgba(255, 222, 134, .64),
    24px -18px 0 rgba(215, 173, 99, .56),
    31px 13px 0 rgba(255, 232, 154, .72),
    -28px 18px 0 rgba(184, 137, 62, .5),
    5px -33px 0 rgba(255, 244, 204, .8);
  animation: lightDustFall 1.9s ease-in-out infinite;
}

.waiting-paper small {
  position: relative;
  z-index: 1;
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
}

.waiting-paper b {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 8px;
  color: #2f2119;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 20px;
}

.waiting-paper p {
  position: relative;
  z-index: 1;
  margin: 8px 0 14px;
  color: rgba(74, 60, 49, .76);
  font-size: 13px;
  line-height: 1.7;
}

.waiting-steps {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 0;
  max-width: 238px;
  margin: 16px auto 0;
}

.waiting-steps::before {
  content: "";
  position: absolute;
  left: 26px;
  right: 26px;
  top: 12px;
  height: 1px;
  background: linear-gradient(90deg, rgba(184, 137, 62, .72), rgba(184, 137, 62, .38), rgba(184, 137, 62, .16));
}

.waiting-steps span {
  position: relative;
  z-index: 1;
  min-width: 0;
  width: 62px;
  display: grid;
  justify-items: center;
  gap: 5px;
  color: rgba(123, 94, 69, .62);
}

.waiting-steps span i {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(184, 137, 62, .28);
  background: #fffaf0;
  color: transparent;
  font-style: normal;
  box-shadow: 0 4px 10px rgba(75, 42, 22, .08);
}

.waiting-steps span.done i {
  border-color: rgba(184, 137, 62, .42);
  background: #d7ad63;
}

.waiting-steps span.done i::before {
  content: "";
  width: 6px;
  height: 10px;
  border: solid #fffaf0;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translateY(-1px);
}

.waiting-steps span.active i {
  border-color: rgba(168, 68, 62, .42);
  background: radial-gradient(circle, #fff4d4 0 28%, #d7ad63 30% 45%, #fffaf0 48%);
  box-shadow: 0 0 0 5px rgba(215, 173, 99, .16), 0 0 18px rgba(215, 173, 99, .48);
  animation: stepSealPulse 1.25s ease-in-out infinite;
}

.waiting-steps span.next i {
  border-style: dashed;
  opacity: .72;
}

.waiting-steps span b {
  color: inherit;
  font-size: 11px;
  font-weight: 900;
}

.waiting-steps span.done b,
.waiting-steps span.active b {
  color: #7b5e45;
}

.empty {
  color: var(--muted);
  padding: 20px 0;
  text-align: center;
}

@keyframes morningGlow {
  0%, 100% { opacity: .72; transform: translateY(-8px); }
  50% { opacity: 1; transform: translateY(8px); }
}

@keyframes sigilPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}

@keyframes orbitSpinReverse {
  to { transform: rotate(-360deg); }
}

@keyframes dustTwinkle {
  0%, 100% { opacity: .28; transform: translate(-50%, -50%) scale(.72); filter: blur(.2px); }
  42% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); filter: blur(0); }
  68% { opacity: .54; }
}

@keyframes skylightPour {
  0%, 100% { opacity: .58; transform: translateX(-50%) translateY(-8px) scaleX(.88); }
  50% { opacity: .96; transform: translateX(-50%) translateY(8px) scaleX(1.08); }
}

@keyframes skylightPulse {
  0%, 100% { opacity: .42; transform: translateX(-50%) scale(.86); }
  50% { opacity: .88; transform: translateX(-50%) scale(1.08); }
}

@keyframes newcomerRise {
  from {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes skylightLoop {
  0%, 100% { opacity: .42; transform: translateX(-50%) rotate(18deg) scale(.94); }
  50% { opacity: .86; transform: translateX(-50%) rotate(24deg) scale(1.04); }
}

@keyframes lightThread {
  0% { opacity: 0; transform: translateX(-50%) translateY(-16px) scaleY(.4); }
  34% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(22px) scaleY(1.18); }
}

@keyframes lightDustFall {
  0%, 100% { opacity: .34; transform: translateY(-10px) scale(.78); }
  50% { opacity: 1; transform: translateY(9px) scale(1.08); }
}

@keyframes envelopeFloat {
  0%, 100% { transform: translateY(0) rotate(-.4deg); }
  50% { transform: translateY(-6px) rotate(.6deg); }
}

@keyframes svgOrbitOne {
  0% { transform: rotate(-12deg) scaleY(.38); }
  100% { transform: rotate(348deg) scaleY(.38); }
}

@keyframes svgOrbitTwo {
  0% { transform: rotate(62deg) scaleY(.44); }
  100% { transform: rotate(-298deg) scaleY(.44); }
}

@keyframes curtainFade {
  to { opacity: 0; transform: translateY(-18px) scale(.98); filter: blur(2px); }
}

@keyframes sigilCast {
  0% { transform: scale(1); filter: brightness(1); }
  46% { transform: scale(1.1); filter: brightness(1.14); }
  100% { transform: scale(1.34); filter: brightness(1.28); opacity: 0; }
}

@keyframes sealRelease {
  0% { transform: scale(1); opacity: 1; }
  55% { transform: scale(.86) rotate(-8deg); opacity: .86; }
  100% { transform: scale(1.5) rotate(10deg); opacity: 0; }
}

@keyframes flapLift {
  to { transform: rotateX(74deg); }
}

@keyframes waxIgnite {
  0% { transform: translateX(-50%) scale(1); }
  100% { transform: translateX(-50%) scale(.2); opacity: 0; }
}

@keyframes threadOpen {
  to { transform: scaleX(0); opacity: 0; }
}

@keyframes dustBurst {
  0% { opacity: .4; transform: translate(-50%, -50%) scale(.75); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.8); filter: blur(1px); }
}

@keyframes openingAuraBreathe {
  0%, 100% { opacity: .72; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}

@keyframes openingStarFloat {
  0%, 100% { opacity: .22; transform: translateY(10px) scale(.72); }
  42% { opacity: .96; transform: translateY(-12px) scale(1.08); }
  70% { opacity: .48; }
}

@keyframes openingCardAura {
  0%, 100% { opacity: .5; transform: scale(.94); }
  50% { opacity: .9; transform: scale(1.08); }
}

@keyframes openingCardGlint {
  0%, 36% { transform: translateX(-64%); opacity: 0; }
  54% { opacity: .86; }
  80%, 100% { transform: translateX(64%); opacity: 0; }
}

@keyframes openingEnergyDot {
  0%, 100% { opacity: .52; transform: scale(.78); }
  48% { opacity: 1; transform: scale(1.12); }
}

@keyframes openingRingBreath {
  0%, 100% { opacity: .82; transform: translate(-50%, -50%) rotate(-90deg) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) rotate(-90deg) scale(1.06); }
}

@keyframes openingRingProgress {
  to { stroke-dashoffset: 0; }
}

@keyframes openingGesturePulse {
  0%, 100% {
    opacity: .5;
    transform: translateX(-50%) scale(.88);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.08);
  }
}

@keyframes openingCardBeltTravel {
  0% { transform: translate3d(0, 0, 0) rotateY(0deg); }
  12% { transform: translate3d(7px, -1px, 0) rotateY(-1deg); }
  24% { transform: translate3d(15px, 0, 0) rotateY(-1.4deg); }
  36% { transform: translate3d(23px, -2px, 0) rotateY(-2deg); }
  48% { transform: translate3d(31px, -1px, 0) rotateY(-2.2deg); }
  60% { transform: translate3d(39px, -3px, 0) rotateY(-2.8deg); }
  72% { transform: translate3d(47px, -2px, 0) rotateY(-3deg); }
  84% { transform: translate3d(55px, -4px, 0) rotateY(-3.4deg); }
  100% { transform: translate3d(62px, -3px, 0) rotateY(-3.6deg); }
}

@keyframes openingDeckBelt {
  0% { transform: translate3d(-18px, 4px, -28px) scale(.98); filter: blur(.2px); }
  14% { transform: translate3d(-7px, 2px, -18px) scale(1); filter: blur(0); }
  28% { transform: translate3d(4px, -1px, -8px) scale(1.02); }
  42% { transform: translate3d(14px, 1px, -12px) scale(1); }
  56% { transform: translate3d(24px, -2px, -5px) scale(1.025); }
  70% { transform: translate3d(34px, 0, -14px) scale(1); }
  84% { transform: translate3d(44px, -2px, -6px) scale(1.02); filter: blur(0); }
  100% { transform: translate3d(52px, 0, -18px) scale(.99); filter: blur(.18px); }
}

@keyframes openingDeckCardPulse {
  0%, 100% { opacity: 1; filter: brightness(.58) saturate(.9) blur(.22px); }
  12%, 36%, 60%, 84% { opacity: 1; filter: brightness(.78) saturate(.96) blur(.08px); }
  24%, 48%, 72% { opacity: 1; filter: brightness(.64) saturate(.92) blur(.16px); }
}

@keyframes openingFrontCardRide {
  0% { transform: translateY(0) rotate(0deg) scale(1); }
  18% { transform: translateY(-2px) rotate(.6deg) scale(1.012); }
  36% { transform: translateY(1px) rotate(1.3deg) scale(1.004); }
  54% { transform: translateY(-3px) rotate(1.8deg) scale(1.018); }
  72% { transform: translateY(0) rotate(2.4deg) scale(1.006); }
  100% { transform: translateY(-2px) rotate(3deg) scale(1.014); }
}

@keyframes openingDeckCardOrbit {
  0% {
    transform: translate(calc(-50% - 146px), calc(-50% + 28px)) rotate(-16deg) scale(.82);
    opacity: 1;
    filter: brightness(.38) saturate(.82) blur(.5px);
  }
  16% {
    transform: translate(calc(-50% - 92px), calc(-50% + 12px)) rotate(-10deg) scale(.92);
    opacity: 1;
    filter: brightness(.5) saturate(.88) blur(.32px);
  }
  34% {
    transform: translate(calc(-50% - 28px), calc(-50% - 4px)) rotate(-3deg) scale(1.06);
    opacity: 1;
    filter: brightness(.7) saturate(.96) blur(.1px);
  }
  44% {
    transform: translate(-50%, calc(-50% - 10px)) rotate(0deg) scale(1.18);
    opacity: 1;
    filter: brightness(.78) saturate(.98) blur(0);
  }
  56% {
    transform: translate(calc(-50% + 42px), calc(-50% - 2px)) rotate(5deg) scale(1.04);
    opacity: 1;
    filter: brightness(.64) saturate(.94) blur(.16px);
  }
  76% {
    transform: translate(calc(-50% + 122px), calc(-50% + 22px)) rotate(14deg) scale(.88);
    opacity: 1;
    filter: brightness(.46) saturate(.86) blur(.38px);
  }
  100% {
    transform: translate(calc(-50% + 166px), calc(-50% + 34px)) rotate(19deg) scale(.78);
    opacity: 1;
    filter: brightness(.34) saturate(.78) blur(.62px);
  }
}

@keyframes newcomerDeckConveyor {
  0% {
    transform: translate(calc(-50% - 202px), calc(-50% + 44px)) rotate(-17deg) scale(.76);
    z-index: 1;
    opacity: 1;
    filter: brightness(.34) saturate(.78) blur(.66px);
  }
  10% {
    transform: translate(calc(-50% - 178px), calc(-50% + 38px)) rotate(-15deg) scale(.8);
    z-index: 1;
    opacity: 1;
    filter: brightness(.4) saturate(.82) blur(.5px);
  }
  22% {
    transform: translate(calc(-50% - 136px), calc(-50% + 26px)) rotate(-12deg) scale(.86);
    z-index: 2;
    opacity: 1;
    filter: brightness(.52) saturate(.88) blur(.3px);
  }
  36% {
    transform: translate(calc(-50% - 76px), calc(-50% + 12px)) rotate(-7deg) scale(.96);
    z-index: 4;
    opacity: 1;
    filter: brightness(.68) saturate(.95) blur(.08px);
  }
  46% {
    transform: translate(calc(-50% - 24px), calc(-50% + 5px)) rotate(-2.5deg) scale(1.06);
    z-index: 6;
    opacity: 1;
    filter: brightness(.78) saturate(1) blur(0);
  }
  54% {
    transform: translate(calc(-50% + 24px), calc(-50% + 5px)) rotate(2.5deg) scale(1.06);
    z-index: 6;
    opacity: 1;
    filter: brightness(.78) saturate(1) blur(0);
  }
  64% {
    transform: translate(calc(-50% + 76px), calc(-50% + 12px)) rotate(7deg) scale(.96);
    z-index: 4;
    opacity: 1;
    filter: brightness(.68) saturate(.95) blur(.08px);
  }
  78% {
    transform: translate(calc(-50% + 136px), calc(-50% + 26px)) rotate(12deg) scale(.86);
    z-index: 2;
    opacity: 1;
    filter: brightness(.52) saturate(.88) blur(.3px);
  }
  90% {
    transform: translate(calc(-50% + 178px), calc(-50% + 38px)) rotate(15deg) scale(.8);
    z-index: 1;
    opacity: 1;
    filter: brightness(.4) saturate(.82) blur(.5px);
  }
  100% {
    transform: translate(calc(-50% + 202px), calc(-50% + 44px)) rotate(17deg) scale(.76);
    z-index: 1;
    opacity: 1;
    filter: brightness(.34) saturate(.78) blur(.66px);
  }
}

@keyframes openingFrontCardCharge {
  0% { transform: translateX(0) translateY(0) rotate(0deg) scale(1); }
  8% { transform: translateX(7px) translateY(-1px) rotate(1.2deg) scale(1.012); }
  16% { transform: translateX(-3px) translateY(1px) rotate(-.5deg) scale(1.004); }
  24% { transform: translateX(8px) translateY(-2px) rotate(1.4deg) scale(1.016); }
  32% { transform: translateX(-4px) translateY(0) rotate(-.8deg) scale(1.006); }
  40% { transform: translateX(9px) translateY(-2px) rotate(1.6deg) scale(1.018); }
  48% { transform: translateX(-3px) translateY(1px) rotate(-.6deg) scale(1.006); }
  56% { transform: translateX(8px) translateY(-1px) rotate(1.3deg) scale(1.016); }
  64% { transform: translateX(-4px) translateY(0) rotate(-.8deg) scale(1.006); }
  72% { transform: translateX(7px) translateY(-2px) rotate(1.2deg) scale(1.014); }
  80% { transform: translateX(-2px) translateY(1px) rotate(-.4deg) scale(1.006); }
  88% { transform: translateX(5px) translateY(-1px) rotate(.9deg) scale(1.012); }
  100% { transform: translateX(0) translateY(-4px) rotate(0deg) scale(1.025); }
}

@keyframes openingTactileTick {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
    box-shadow:
      0 26px 50px rgba(0, 0, 0, .48),
      0 0 0 1px rgba(255, 236, 166, .12),
      0 0 28px rgba(241, 203, 111, .2),
      inset 0 0 34px rgba(232, 196, 111, .08);
  }
  42% {
    transform: translate3d(1px, -1px, 0) scale(.992);
    box-shadow:
      0 20px 42px rgba(0, 0, 0, .44),
      0 0 0 1px rgba(255, 236, 166, .18),
      0 0 38px rgba(255, 219, 120, .32),
      inset 0 0 42px rgba(255, 224, 128, .18);
  }
}

@keyframes openingTactileHeavy {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  36% {
    transform: translate3d(2px, -2px, 0) scale(.986);
    box-shadow:
      0 18px 38px rgba(0, 0, 0, .46),
      0 0 0 1px rgba(255, 236, 166, .24),
      0 0 46px rgba(255, 219, 120, .4),
      inset 0 0 48px rgba(255, 224, 128, .22);
  }
  64% {
    transform: translate3d(-1px, 1px, 0) scale(1.006);
  }
}

@keyframes openingTactileEnergy {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    filter: brightness(1);
  }
  46% {
    transform: translate(-50%, -50%) scale(.9);
    filter: brightness(1.22);
  }
}

@keyframes openingWaitingAura {
  0%, 100% {
    opacity: .58;
    transform: scale(.96);
    filter: blur(12px);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
    filter: blur(8px);
  }
}

@keyframes openingWaitingCard {
  0%, 100% {
    box-shadow:
      0 26px 50px rgba(0, 0, 0, .48),
      0 0 0 1px rgba(255, 236, 166, .12),
      0 0 28px rgba(241, 203, 111, .2),
      inset 0 0 34px rgba(232, 196, 111, .08);
  }
  50% {
    box-shadow:
      0 24px 48px rgba(0, 0, 0, .46),
      0 0 0 1px rgba(255, 236, 166, .18),
      0 0 46px rgba(255, 223, 128, .34),
      inset 0 0 46px rgba(255, 232, 150, .16);
  }
}

@keyframes openingWaitingRing {
  to {
    transform: translate(-50%, -50%) rotate(270deg);
  }
}

@keyframes openingWaitingEnergy {
  0%, 100% {
    opacity: .72;
    transform: scale(.86);
  }
  48% {
    opacity: 1;
    transform: scale(1.12);
  }
}

@keyframes openingWaitingDot {
  0%, 100% {
    opacity: .32;
    transform: translateY(2px) scale(.72);
  }
  48% {
    opacity: 1;
    transform: translateY(-2px) scale(1);
  }
}

@keyframes openingPrimaryCardOrbit {
  0% {
    transform: translateX(0) translateY(0) rotate(0deg) scale(1);
    opacity: 1;
    filter: brightness(1) blur(0);
  }
  18% {
    transform: translateX(54px) translateY(7px) rotate(6deg) scale(.96);
    opacity: .74;
    filter: brightness(.98) blur(.08px);
  }
  34% {
    transform: translateX(134px) translateY(24px) rotate(15deg) scale(.86);
    opacity: .22;
    filter: brightness(.88) blur(.35px);
  }
  34.01% {
    transform: translateX(-152px) translateY(24px) rotate(-16deg) scale(.84);
    opacity: .1;
    filter: brightness(.86) blur(.5px);
  }
  54% {
    transform: translateX(-70px) translateY(8px) rotate(-8deg) scale(.92);
    opacity: .54;
    filter: brightness(.94) blur(.18px);
  }
  76% {
    transform: translateX(0) translateY(-5px) rotate(0deg) scale(1.02);
    opacity: 1;
    filter: brightness(1.1) blur(0);
  }
  100% {
    transform: translateX(58px) translateY(8px) rotate(7deg) scale(.95);
    opacity: .68;
    filter: brightness(.96) blur(.12px);
  }
}

@keyframes openingBeltRelease {
  0% { transform: translate3d(62px, -3px, 0) rotateY(-3.6deg); }
  56% { transform: translate3d(-8px, -10px, 0) rotateY(2deg); }
  100% { transform: translate3d(0, 0, 0) rotateY(0deg); }
}

@keyframes openingDeckTrackFade {
  0% {
    opacity: .9;
    filter: blur(0);
  }
  100% {
    opacity: 0;
    filter: blur(1.6px);
  }
}

@keyframes openingDeckExitClean {
  0% {
    opacity: .56;
    transform: translate(calc(-50% + var(--settle-x, 0px)), calc(-50% + var(--settle-y, 0px))) rotate(var(--settle-r, 0deg)) scale(.92);
    filter: blur(.2px);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--exit-x, var(--settle-x, 0px))), calc(-50% + var(--exit-y, 26px))) rotate(var(--exit-r, var(--settle-r, 0deg))) scale(.76);
    filter: blur(1.4px);
  }
}

@keyframes openingDeckRoll {
  0% {
    transform: translate(calc(-50% - 158px), calc(-50% + 22px)) rotate(-15deg) scale(.88);
    opacity: .12;
    filter: blur(.8px);
  }
  18% {
    opacity: .7;
    filter: blur(.2px);
  }
  46% {
    transform: translate(calc(-50% - 4px), calc(-50% - 7px)) rotate(-1deg) scale(1.02);
    opacity: .92;
    filter: blur(0);
  }
  76% {
    opacity: .72;
    filter: blur(.2px);
  }
  100% {
    transform: translate(calc(-50% + 166px), calc(-50% + 22px)) rotate(16deg) scale(.88);
    opacity: .12;
    filter: blur(.8px);
  }
}

@keyframes openingFrontCardRoll {
  0% {
    transform: translateX(-148px) translateY(18px) rotate(-13deg) scale(.92);
    opacity: .34;
    filter: blur(.35px) drop-shadow(0 18px 30px rgba(255, 217, 111, .12));
  }
  24% {
    opacity: .78;
    filter: blur(.1px) drop-shadow(0 18px 30px rgba(255, 217, 111, .16));
  }
  48% {
    transform: translateX(0) translateY(-9px) rotate(0deg) scale(1.04);
    opacity: 1;
    filter: blur(0) drop-shadow(0 22px 34px rgba(255, 217, 111, .28));
  }
  76% {
    opacity: .78;
    filter: blur(.1px) drop-shadow(0 18px 30px rgba(255, 217, 111, .16));
  }
  100% {
    transform: translateX(148px) translateY(18px) rotate(13deg) scale(.92);
    opacity: .34;
    filter: blur(.35px) drop-shadow(0 18px 30px rgba(255, 217, 111, .12));
  }
}

@keyframes openingDeckSettle {
  0% { opacity: .78; filter: blur(0); }
  32% { transform: translate(calc(-50% + var(--shuffle-x, 0px)), calc(-50% - 34px)) rotate(var(--shuffle-r, 0deg)) scale(1.02); opacity: .98; }
  70% { filter: blur(.8px); opacity: .7; }
  100% { transform: translate(calc(-50% + var(--settle-x, 0px)), calc(-50% + var(--settle-y, 0px))) rotate(var(--settle-r, 0deg)) scale(.92); opacity: .22; filter: blur(1.2px); }
}

.deck-1 { --shuffle-x: -148px; --shuffle-r: -22deg; --settle-x: -132px; --settle-y: 28px; --settle-r: -16deg; --exit-x: -178px; --exit-y: 44px; --exit-r: -19deg; }
.deck-2 { --shuffle-x: 132px; --shuffle-r: 18deg; --settle-x: -84px; --settle-y: 16px; --settle-r: -10deg; --exit-x: -138px; --exit-y: 34px; --exit-r: -14deg; }
.deck-3 { --shuffle-x: -98px; --shuffle-r: -14deg; --settle-x: -42px; --settle-y: 6px; --settle-r: -5deg; --exit-x: -104px; --exit-y: 24px; --exit-r: -9deg; }
.deck-4 { --shuffle-x: 0px; --shuffle-r: 0deg; --settle-x: 0px; --settle-y: 0px; --settle-r: 0deg; --exit-x: 0px; --exit-y: 34px; --exit-r: 0deg; }
.deck-5 { --shuffle-x: 92px; --shuffle-r: 14deg; --settle-x: 42px; --settle-y: 6px; --settle-r: 5deg; --exit-x: 104px; --exit-y: 24px; --exit-r: 9deg; }
.deck-6 { --shuffle-x: -124px; --shuffle-r: -18deg; --settle-x: 84px; --settle-y: 16px; --settle-r: 10deg; --exit-x: 138px; --exit-y: 34px; --exit-r: 14deg; }
.deck-7 { --shuffle-x: 150px; --shuffle-r: 22deg; --settle-x: 132px; --settle-y: 28px; --settle-r: 16deg; --exit-x: 178px; --exit-y: 44px; --exit-r: 19deg; }

@keyframes openingChosenCard {
  0% { transform: translateY(0) scale(1) rotateY(0deg); filter: brightness(1); }
  30% { transform: translateY(-18px) scale(1.08) rotateY(-8deg); filter: brightness(1.08); }
  62% { transform: translateY(-32px) scale(1.16) rotateY(10deg); filter: brightness(1.18); }
  100% { transform: translateY(-26px) scale(1.18) rotateY(0deg); filter: brightness(1.24) drop-shadow(0 0 24px rgba(255, 222, 126, .42)); }
}

@keyframes openingRitualChosenCard {
  0% { transform: translateY(0) scale(1) rotateY(0deg); filter: brightness(1); }
  30% { transform: translateY(-8px) scale(1.04) rotateY(-7deg); filter: brightness(1.08); }
  62% { transform: translateY(-14px) scale(1.08) rotateY(8deg); filter: brightness(1.18); }
  100% { transform: translateY(-8px) scale(1.08) rotateY(0deg); filter: brightness(1.24) drop-shadow(0 0 22px rgba(255, 222, 126, .4)); }
}

@keyframes openingChosenAura {
  0% { opacity: .56; transform: scale(.96); filter: blur(10px); }
  50% { opacity: 1; transform: scale(1.18); filter: blur(7px); }
  100% { opacity: .9; transform: scale(1.26); filter: blur(12px); }
}

@keyframes openingRevealGlint {
  0% { transform: translateX(-80%); opacity: 0; }
  45% { opacity: 1; }
  100% { transform: translateX(86%); opacity: 0; }
}

@keyframes openingRevealSoftGlow {
  0% { opacity: 0; transform: scale(.72); }
  38% { opacity: .88; transform: scale(1.02); }
  100% { opacity: 0; transform: scale(1.24); }
}

@keyframes lightUnfold {
  from { opacity: .88; transform: translateY(-10px) scaleY(.82) rotate(-1.8deg); }
  to { opacity: 1; transform: translateY(0) scaleY(1) rotate(-.6deg); }
}

@keyframes slipFloat {
  0%, 100% { transform: translateY(0) rotate(-.6deg); }
  50% { transform: translateY(-5px) rotate(.4deg); }
}

@keyframes luckFly {
  0% {
    transform: translate3d(0, calc(var(--float-y, 0px) + 8px), 0) scale(.94);
    opacity: 0;
    filter: blur(.4px) drop-shadow(0 4px 10px rgba(255, 221, 136, .18));
  }
  10% {
    opacity: .96;
    filter: blur(0) drop-shadow(0 4px 10px rgba(255, 221, 136, .32));
  }
  72% {
    opacity: .94;
    transform: translate3d(-350px, var(--float-y, 0px), 0) scale(1);
  }
  90% {
    opacity: .42;
    transform: translate3d(-455px, var(--exit-y, 0px), 0) scale(.96);
    filter: blur(.2px) drop-shadow(0 0 12px rgba(255, 221, 136, .38));
  }
  100% {
    opacity: 0;
    transform: translate3d(-510px, var(--exit-y, 0px), 0) scale(.88);
    filter: blur(1px) drop-shadow(0 0 0 rgba(255, 221, 136, 0));
  }
}

@keyframes coverLuckFly {
  0% {
    transform: translate3d(0, calc(var(--float-y, 0px) + 8px), 0) scale(.96);
    opacity: 0;
  }
  10% {
    opacity: .82;
  }
  72% {
    opacity: .78;
    transform: translate3d(-350px, var(--float-y, 0px), 0) scale(1);
  }
  90% {
    opacity: .34;
    transform: translate3d(-455px, var(--exit-y, 0px), 0) scale(.96);
  }
  100% {
    opacity: 0;
    transform: translate3d(-510px, var(--exit-y, 0px), 0) scale(.9);
  }
}

@keyframes orbitPulse {
  0%, 100% { opacity: .38; transform: scale(.96); }
  50% { opacity: .9; transform: scale(1.04); }
}

@keyframes blessingRing {
  0% { opacity: 0; transform: scale(.25) rotate(0); }
  22% { opacity: .9; }
  100% { opacity: 0; transform: scale(1.45) rotate(18deg); }
}

@keyframes blessingPaper {
  0% { opacity: 0; transform: translateY(26px) scale(.9) rotate(-2deg); }
  12% { opacity: 1; transform: translateY(0) scale(1.02) rotate(.6deg); }
  20%, 88% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
  100% { opacity: 0; transform: translateY(-18px) scale(1.04) rotate(1deg); }
}

@keyframes sealDrop {
  0% { opacity: 0; transform: translateY(-14px) rotate(-18deg) scale(1.4); }
  40% { opacity: 1; transform: translateY(0) rotate(-8deg) scale(.96); }
  58% { transform: translateY(0) rotate(-10deg) scale(1.06); }
  100% { opacity: .94; transform: translateY(0) rotate(-10deg) scale(1); }
}

@keyframes sparkFly {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
  16% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px))) scale(var(--s, 1));
  }
}

@keyframes diaryCoverOpen {
  0% {
    opacity: 1;
    transform: rotateY(0deg) translateX(0);
    filter: brightness(1);
  }
  28% {
    opacity: 1;
    transform: rotateY(-32deg) translateX(-2px);
    filter: brightness(.96);
  }
  68% {
    opacity: .96;
    transform: rotateY(-96deg) translateX(-10px);
    filter: brightness(.9);
  }
  100% {
    opacity: 0;
    transform: rotateY(-116deg) translateX(-14px);
    filter: brightness(.86);
  }
}

@keyframes diaryPagesWake {
  0% {
    opacity: 0;
    transform: translateX(18px) scale(.97);
    filter: brightness(.92);
  }
  26% {
    opacity: .28;
    transform: translateX(12px) scale(.975);
  }
  78% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: brightness(1.04);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: brightness(1);
  }
}

@keyframes bookThicknessWake {
  0% { transform: rotate(.8deg) translateX(0); filter: brightness(.94); }
  56% { transform: rotate(.8deg) translateX(6px); filter: brightness(1.04); }
  100% { transform: rotate(.8deg) translateX(0); filter: brightness(1); }
}

@keyframes bookSettleNext {
  0% { transform: translateX(0) rotateY(0); filter: brightness(1); }
  45% { transform: translateX(5px) rotateY(2deg); filter: brightness(.98); }
  100% { transform: translateX(0) rotateY(0); filter: brightness(1); }
}

@keyframes bookSettlePrev {
  0% { transform: translateX(0) rotateY(0); filter: brightness(1); }
  45% { transform: translateX(-5px) rotateY(-2deg); filter: brightness(.98); }
  100% { transform: translateX(0) rotateY(0); filter: brightness(1); }
}

@keyframes pageNudgeNext {
  0% { transform: translateX(0) rotateY(0); }
  45% { transform: translateX(7px) rotateY(1.5deg); }
  100% { transform: translateX(0) rotateY(0); }
}

@keyframes pageNudgePrev {
  0% { transform: translateX(0) rotateY(0); }
  45% { transform: translateX(-7px) rotateY(-1.5deg); }
  100% { transform: translateX(0) rotateY(0); }
}

@keyframes pageLeafNext {
  0% { opacity: 0; transform: rotateY(0deg) translateX(0); }
  12% { opacity: 1; }
  52% { opacity: 1; transform: rotateY(82deg) translateX(8px); }
  88% { opacity: .86; transform: rotateY(166deg) translateX(16px); }
  100% { opacity: 0; transform: rotateY(178deg) translateX(18px); }
}

@keyframes pageLeafPrev {
  0% { opacity: 0; transform: rotateY(0deg) translateX(0); }
  12% { opacity: 1; }
  52% { opacity: 1; transform: rotateY(-82deg) translateX(-8px); }
  88% { opacity: .86; transform: rotateY(-166deg) translateX(-16px); }
  100% { opacity: 0; transform: rotateY(-178deg) translateX(-18px); }
}

@keyframes blessingScrollUp {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

@keyframes calendarMessageScrollUp {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

@keyframes sceneWorkSheen {
  0% { transform: translateX(-80%); }
  100% { transform: translateX(80%); }
}

@keyframes sceneWorkSpin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.06); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes eveningMoonPulse {
  0%, 100% { transform: translateY(0) scale(1); filter: brightness(1); }
  50% { transform: translateY(-4px) scale(1.025); filter: brightness(1.05); }
}

@keyframes eveningLightGather {
  0%, 100% {
    opacity: .34;
    transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px))) scale(.72);
  }
  42% {
    opacity: 1;
    transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px))) scale(1.08);
  }
  72% {
    opacity: .7;
    transform: translate(-50%, -50%) scale(.82);
  }
}

@keyframes echoCardIn {
  0% { opacity: 0; transform: translateY(18px) rotate(-.8deg); }
  100% { opacity: 1; transform: translateY(0) rotate(0); }
}

@keyframes eveningNoticeDrop {
  0% { opacity: 0; transform: translateY(-18px) scale(.98); }
  70% { opacity: 1; transform: translateY(2px) scale(1); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes receiveSealDrop {
  0% { opacity: 0; transform: translateY(-18px) rotate(-22deg) scale(1.42); }
  42% { opacity: 1; transform: translateY(0) rotate(-8deg) scale(.94); }
  62% { transform: translateY(0) rotate(-10deg) scale(1.08); }
  100% { opacity: .9; transform: translateY(0) rotate(-10deg) scale(1); }
}

@keyframes stepSealPulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.08); filter: brightness(1.08); }
}

@media (max-height: 720px) {
  .curtain-card {
    min-height: 560px;
    padding-top: 22px;
  }

  .curtain-orbit {
    width: 206px;
    height: 206px;
  }

  .fortune-book {
    min-height: 560px;
  }
}

/* Evening echo compact art direction: keep the whole collected state in one phone viewport. */
.evening-screen.ritual-opened {
  height: 100svh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: max(18px, calc(env(safe-area-inset-top) + 14px)) 16px calc(102px + env(safe-area-inset-bottom));
  overflow: hidden;
}

.ritual-opened .evening-art-nav {
  flex: 0 0 auto;
  min-height: 36px;
  margin: 0 0 6px;
}

.ritual-opened .evening-back-pill,
.ritual-opened .evening-status-pill {
  min-height: 36px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 14px;
}

.ritual-opened .evening-back-pill {
  padding-left: 13px;
  padding-right: 16px;
}

.ritual-opened .evening-back-pill i {
  font-size: 27px;
}

.ritual-opened .evening-status-pill {
  padding-left: 12px;
  padding-right: 12px;
}

.ritual-opened .evening-status-pill i {
  width: 17px;
  height: 17px;
}

.ritual-opened .evening-hero {
  flex: 0 0 auto;
  min-height: 72px;
  grid-template-columns: minmax(0, 1fr) 72px;
  align-items: start;
  gap: 8px;
  margin: 0;
}

.ritual-opened .evening-hero h1 {
  max-width: 276px;
  color: #c49a57;
  font-size: clamp(24px, 6.8vw, 30px);
  line-height: 1.1;
  font-weight: 400;
  text-shadow: 0 1px 0 rgba(255, 246, 224, .48), 0 8px 18px rgba(58, 42, 28, .16);
}

.ritual-opened .evening-hero h1 span {
  margin-left: 4px;
  transform: translateY(-4px);
}

.ritual-opened .evening-hero p {
  max-width: 286px;
  margin-top: 7px;
  color: rgba(196, 154, 87, .86);
  font-size: 12px;
  line-height: 1.36;
  font-weight: 400;
  text-shadow: 0 1px 0 rgba(255, 246, 224, .34);
}

.ritual-opened .evening-crescent {
  display: none;
}

.ritual-opened .evening-summary-card {
  flex: 0 0 auto;
  min-height: 0;
  height: clamp(156px, 20svh, 184px);
  margin: 0;
  padding: 15px 17px 12px;
  border-radius: 22px;
  box-shadow: 0 14px 24px rgba(104, 71, 38, .12), inset 0 0 0 1px rgba(200, 151, 82, .18);
}

.ritual-opened .evening-summary-card::before {
  inset: 7px;
  border-radius: 18px;
}

.ritual-opened .evening-summary-card small {
  font-size: 11px;
  letter-spacing: .14em;
}

.ritual-opened .evening-summary-card h2 {
  max-width: 282px;
  gap: 8px;
  margin: 9px 0 6px;
  font-size: clamp(18px, 5.2vw, 22px);
  line-height: 1.14;
}

.ritual-opened .evening-summary-card h2 i {
  display: none;
}

.ritual-opened .evening-summary-card h2 i::before {
  left: 9px;
  height: 35px;
}

.ritual-opened .evening-summary-card p {
  max-width: 286px;
  color: rgba(62, 45, 34, .86);
  font-size: 11.5px;
  line-height: 1.46;
  font-weight: 400;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ritual-opened .evening-window-art {
  display: none;
}

.ritual-opened .evening-window-art .window-frame {
  right: 22px;
  top: 7px;
  width: 43px;
  height: 74px;
  border-width: 4px;
}

.ritual-opened .evening-window-art .curtain {
  right: 48px;
  width: 45px;
  height: 96px;
}

.ritual-opened .evening-window-art .lantern {
  right: 2px;
  bottom: 7px;
  width: 22px;
  height: 35px;
  border-width: 2px;
}

.ritual-opened .evening-summary-meta {
  display: none;
}

.ritual-opened .evening-summary-meta span {
  min-height: 32px;
  border-radius: 15px;
  font-size: 11px;
}

.ritual-opened .evening-summary-meta span i {
  font-size: 14px;
}

.ritual-opened .evening-summary-meta span b {
  font-size: 14px;
}

.ritual-opened .night-envelope.collected,
.ritual-opened .night-envelope {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 17px 14px 16px;
  border-radius: 22px;
  box-shadow: 0 14px 25px rgba(70, 45, 26, .14), inset 0 0 0 1px rgba(199, 151, 82, .18);
}

.ritual-opened .night-envelope::before {
  inset: 7px;
  border-radius: 18px;
}

.ritual-opened .evening-section-title {
  margin-bottom: 12px;
}

.ritual-opened .evening-section-title b {
  font-size: 19px;
}

.ritual-opened .evening-section-title span {
  font-size: 13px;
}

.ritual-opened .message-stack {
  height: clamp(126px, 16.5svh, 164px);
  margin: 0 0 16px;
}

.ritual-opened .message-card {
  min-height: 0;
  padding: 18px 16px 15px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 255, 255, .76), transparent 28%),
    linear-gradient(180deg, #fffdf7, #fff6e8);
}

.ritual-opened .message-card::before {
  inset: 10px;
  border-radius: 12px;
}

.ritual-opened .message-card small {
  font-size: 10px;
  letter-spacing: .1em;
}

.ritual-opened .message-card h3 {
  margin: 18px 0 8px;
  font-size: clamp(20px, 5.7vw, 24px);
  line-height: 1.18;
}

.ritual-opened .message-card p {
  font-size: 13px;
  line-height: 1.48;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ritual-opened .received-seal {
  right: 18px;
  bottom: 16px;
  width: 42px;
  height: 42px;
  font-size: 18px;
}

.ritual-opened .receive-message-button {
  min-height: 40px;
  margin-top: 18px;
  border-radius: 15px;
  font-size: 13px;
}

.ritual-opened .receive-message-button.reviewable {
  border-color: rgba(184, 137, 62, .28);
  background: rgba(255, 250, 240, .88);
  color: #74533c;
  box-shadow: 0 10px 20px rgba(91, 58, 28, .08), inset 0 1px 0 rgba(255, 255, 255, .62);
}

.ritual-opened .message-stack-hint:not(.empty-hint) {
  margin-top: 6px;
  gap: 6px;
}

.ritual-opened .message-stack-hint:not(.empty-hint) span {
  font-size: 12px;
}

.ritual-opened .message-stack-hint:not(.empty-hint) b {
  font-size: 11px;
}

.ritual-opened .empty-message.evening-empty-paper {
  min-height: 0;
  height: clamp(150px, 22svh, 198px);
  padding: 32px 18px 26px;
  border-radius: 16px;
}

.ritual-opened .evening-empty-paper small {
  left: 22px;
  top: 18px;
  font-size: 34px;
}

.ritual-opened .empty-moon-mark {
  width: 50px;
  height: 28px;
  margin-bottom: 8px;
}

.ritual-opened .empty-moon-mark::before {
  left: 16px;
  width: 26px;
  height: 26px;
}

.ritual-opened .empty-moon-mark::after {
  left: 6px;
  width: 42px;
  height: 12px;
}

.ritual-opened .empty-message h3 {
  margin-bottom: 8px;
  font-size: clamp(23px, 6.2vw, 27px);
}

.ritual-opened .empty-message p {
  max-width: 284px;
  font-size: 13.5px;
  line-height: 1.5;
}

.ritual-opened .message-stack-hint.empty-hint {
  gap: 10px;
  margin-top: 13px;
}

.ritual-opened .message-stack-hint.empty-hint span {
  font-size: 13px;
}

.ritual-opened .message-stack-hint.empty-hint b {
  gap: 10px;
  font-size: 13px;
}

.ritual-opened .message-stack-hint.empty-hint b::before,
.ritual-opened .message-stack-hint.empty-hint b::after {
  width: 34px;
}

.ritual-opened .evening-action-row {
  bottom: max(12px, env(safe-area-inset-bottom));
  width: min(calc(100% - 28px), 398px);
  height: 74px;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 22px;
}

.ritual-opened .evening-action-row button {
  min-height: 52px;
  font-size: 15px;
}

@media (max-height: 760px) {
  .evening-screen.ritual-opened {
    gap: 8px;
    padding-top: max(12px, env(safe-area-inset-top));
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
  }

  .ritual-opened .evening-art-nav {
    min-height: 34px;
    margin-bottom: 2px;
  }

  .ritual-opened .evening-back-pill,
  .ritual-opened .evening-status-pill {
    min-height: 34px;
    font-size: 13px;
  }

  .ritual-opened .evening-hero {
    min-height: 64px;
    grid-template-columns: minmax(0, 1fr) 58px;
  }

  .ritual-opened .evening-hero h1 {
    font-size: clamp(22px, 6.3vw, 27px);
  }

  .ritual-opened .evening-hero p {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.34;
  }

  .ritual-opened .evening-crescent {
    width: 44px;
    height: 58px;
  }

  .ritual-opened .evening-summary-card {
    height: 146px;
    padding: 15px 16px 12px;
  }

  .ritual-opened .evening-summary-card h2 {
    margin: 8px 0 5px;
    font-size: 19px;
  }

  .ritual-opened .evening-summary-card p {
    font-size: 11px;
    line-height: 1.38;
    -webkit-line-clamp: 2;
  }

  .ritual-opened .evening-summary-meta {
    margin-top: 8px;
  }

  .ritual-opened .evening-summary-meta span {
    min-height: 34px;
    font-size: 11px;
  }

  .ritual-opened .message-stack {
    height: 112px;
  }

  .ritual-opened .message-card h3 {
    margin-top: 13px;
    font-size: 20px;
  }

  .ritual-opened .message-card p {
    font-size: 12px;
    line-height: 1.38;
  }

  .ritual-opened .receive-message-button {
    margin-top: 14px;
  }

  .ritual-opened .evening-action-row {
    height: 66px;
    padding: 8px 10px;
  }

  .ritual-opened .evening-action-row button {
    min-height: 46px;
    font-size: 14px;
  }
}

/* Daily sign cover-library detail */
.result-screen.daily-cover-result {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 100svh;
  gap: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: max(14px, calc(env(safe-area-inset-top) + 8px)) 16px calc(92px + env(safe-area-inset-bottom));
  background: #eee4d1;
}

.result-screen.daily-cover-result::before {
  content: "";
  position: fixed;
  inset: -28px;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(66, 51, 37, .08)),
    var(--daily-cover-bg, url("/images/mine-bg.png")) center / cover no-repeat;
  filter: blur(18px) saturate(1.18);
  transform: scale(1.1);
  opacity: .92;
}

.result-screen.daily-cover-result::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 4%, rgba(255, 255, 255, .16), transparent 34%),
    linear-gradient(180deg, rgba(48, 38, 30, .03), rgba(255, 249, 235, .02) 42%, rgba(65, 49, 36, .08));
  pointer-events: none;
}

.daily-cover-result .result-hero-head {
  position: relative;
  z-index: 2;
  min-height: 38px;
  margin: 2px 0 4px;
}

.daily-cover-result .result-home-title {
  width: auto;
  min-width: 0;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 999px;
  background: rgba(255, 255, 255, .34);
  color: rgba(76, 55, 38, .78);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-shadow: 0 1px 8px rgba(255, 255, 255, .42);
  box-shadow: 0 10px 20px rgba(22, 20, 16, .1), inset 0 1px 0 rgba(255, 255, 255, .28);
  backdrop-filter: blur(14px);
}

.daily-cover-result .result-home-title span {
  display: inline;
  margin-top: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: 1;
  font-weight: inherit;
}

.daily-cover-result .retune-pill {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .34);
  color: rgba(76, 55, 38, .78);
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 10px 20px rgba(22, 20, 16, .1), inset 0 1px 0 rgba(255, 255, 255, .28);
  backdrop-filter: blur(14px);
}

.daily-cover-result .result-retune-actions {
  gap: 6px;
}

.daily-cover-result .result-retune-actions .retune-pill {
  min-height: 34px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 500;
}

.daily-cover-result .result-retune-actions .retune-pill span {
  font-size: 15px;
}

.daily-cover-result .cover-swap-pill {
  background: rgba(255, 255, 255, .42);
}

.cover-sign-detail {
  height: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  grid-template-rows: auto auto;
  gap: 0;
  padding: 6px;
  border: 0;
  border-radius: 26px;
  overflow: visible;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03)),
    rgba(255, 255, 255, .035);
  box-shadow:
    0 24px 52px rgba(24, 21, 17, .12),
    inset 0 0 0 1px rgba(255, 255, 255, .15);
  backdrop-filter: blur(9px);
}

.cover-sign-detail::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13);
  pointer-events: none;
}

.cover-sign-detail::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, .12), transparent 42%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23p)' opacity='.1'/%3E%3C/svg%3E");
  border-radius: inherit;
  opacity: .08;
  pointer-events: none;
}

.cover-sign-detail > * {
  position: relative;
  z-index: 1;
}

.daily-cover-stage {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --cover-shift-x: 0px;
  --cover-shift-y: 0px;
  --cover-glare-x: 50%;
  --cover-glare-y: 24%;
  --cover-glare-opacity: .14;
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  min-height: 0;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 23px;
  overflow: hidden;
  transform: perspective(760px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  transition: transform .22s ease-out;
  box-shadow: 0 18px 38px rgba(28, 23, 17, .18), inset 0 1px 0 rgba(255, 255, 255, .24);
  touch-action: pan-y;
  will-change: transform;
}

.daily-cover-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--cover-glare-x) var(--cover-glare-y), rgba(255, 255, 255, .34), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, .08), transparent 44%);
  opacity: var(--cover-glare-opacity);
  mix-blend-mode: screen;
}

.daily-cover-image,
.daily-cover-placeholder {
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: block;
  border-radius: inherit;
  object-fit: cover;
  transform: translate3d(var(--cover-shift-x), var(--cover-shift-y), 18px) scale(1.055);
  transform-origin: center;
  transition: transform .22s ease-out;
  will-change: transform;
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 248, 222, .96), transparent 28%),
    linear-gradient(135deg, #b39268, #385b52);
}

.daily-cover-placeholder {
  display: grid;
  place-items: center;
  color: #fff8df;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .08em;
}

.daily-cover-shade {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(38, 24, 17, .06), transparent 46%, rgba(18, 15, 12, .74)),
    radial-gradient(circle at 18% 12%, rgba(255, 249, 228, .42), transparent 24%);
  pointer-events: none;
  z-index: 1;
}

.daily-cover-date {
  position: absolute;
  left: 14px;
  top: 13px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 250, 237, .74);
  color: #5f412e;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 12px;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .68), 0 8px 18px rgba(35, 22, 14, .12);
  backdrop-filter: blur(10px);
  z-index: 2;
}

.daily-cover-caption {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 18px;
  z-index: 2;
  margin: 0;
  padding: 0;
  border-top: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, .95);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 17.5px;
  line-height: 1.46;
  font-weight: 500;
  text-align: left;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .34);
  box-shadow: none;
  backdrop-filter: none;
}

.daily-cover-result.cover-tilt-idle .daily-cover-stage {
  animation: coverTiltIdle 7.5s ease-in-out infinite alternate;
}

.daily-cover-result.cover-tilt-idle .daily-cover-image,
.daily-cover-result.cover-tilt-idle .daily-cover-placeholder {
  animation: coverImageDrift 7.5s ease-in-out infinite alternate;
}

.daily-cover-result.cover-tilt-sensor .daily-cover-stage,
.daily-cover-result.cover-tilt-sensor .daily-cover-image,
.daily-cover-result.cover-tilt-sensor .daily-cover-placeholder {
  transition-duration: .12s;
}

@keyframes coverTiltIdle {
  0% {
    transform: perspective(760px) rotateX(-1.2deg) rotateY(1.7deg);
  }

  100% {
    transform: perspective(760px) rotateX(1.1deg) rotateY(-1.4deg);
  }
}

@keyframes coverImageDrift {
  0% {
    transform: translate3d(4px, -2px, 18px) scale(1.058);
  }

  100% {
    transform: translate3d(-4px, 3px, 18px) scale(1.058);
  }
}

.daily-cover-caption::before,
.daily-cover-caption::after {
  color: rgba(255, 238, 200, .7);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  line-height: 0;
}

.daily-cover-caption::before {
  content: "“";
  margin-right: 2px;
}

.daily-cover-caption::after {
  content: "”";
  margin-left: 2px;
}

.cover-sign-detail .daily-cover-mark {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 31px;
  height: 31px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(142, 104, 70, .18);
  border-radius: 50%;
  background: rgba(255, 251, 240, .44);
  color: rgba(130, 88, 58, .84);
  box-shadow: none;
  transform: translateY(1px);
  backdrop-filter: none;
}

.cover-sign-detail .daily-cover-mark::before,
.cover-sign-detail .daily-cover-mark::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.cover-sign-detail .daily-cover-mark::before {
  inset: 4px;
  border: 1px solid rgba(142, 104, 70, .12);
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}

.cover-sign-detail .daily-cover-mark::after {
  display: none;
}

.cover-sign-detail .daily-cover-mark span {
  position: relative;
  z-index: 1;
  margin-top: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  text-shadow: 0 1px 8px rgba(255, 255, 255, .28);
}

.cover-sign-detail .daily-cover-mark i {
  display: none;
}

.cover-sign-detail .daily-cover-mark em {
  display: none;
}

.cover-sign-detail .wordbox-mark-entry.daily-cover-mark:active {
  transform: translateY(2px) scale(.96);
  box-shadow: none;
}

.daily-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 9px;
}

.daily-cover-paper {
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 7px 14px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.cover-sign-detail .daily-cover-kicker {
  margin: 0 0 5px;
  color: rgba(91, 69, 49, .52);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  letter-spacing: .16em;
  text-shadow: 0 1px 8px rgba(255, 255, 255, .3);
}

.cover-sign-detail h1 {
  min-width: 0;
  margin: 0;
  text-align: left;
  color: rgba(70, 48, 34, .9);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 19.5px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: .02em;
  text-shadow: 0 1px 8px rgba(255, 255, 255, .28);
}

.cover-sign-detail .result-main-sentence {
  max-width: none;
  margin: 0 0 13px;
  text-align: left;
  color: #38271b;
  font-size: 18px;
  line-height: 1.52;
  font-weight: 600;
}

.cover-sign-detail .literary-quote-source {
  margin: -4px 0 14px;
  color: rgba(var(--daily-tone-muted-rgb), .72);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .04em;
  text-align: left;
  text-shadow: 0 1px 8px rgba(255, 253, 246, .34);
}

.cover-sign-detail .quote-mark {
  color: rgba(171, 112, 55, .5);
  font-size: 25px;
  transform: translateY(6px);
}

.cover-sign-detail .daily-cover-guide {
  margin-top: 2px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  gap: 6px;
}

.cover-sign-detail .mind-guide-item {
  grid-template-rows: 26px 15px minmax(28px, auto);
  gap: 3px;
  padding: 6px 4px 5px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.cover-sign-detail .mind-guide-item i {
  width: 25px;
  height: 25px;
  border: 0;
  background: transparent;
  color: rgba(68, 49, 34, .94);
  font-size: 12.5px;
  font-weight: 700;
  box-shadow: none;
  text-shadow:
    0 1px 10px rgba(255, 253, 246, .78),
    0 0 1px rgba(255, 253, 246, .92),
    0 1px 2px rgba(36, 27, 19, .16);
}

.cover-sign-detail .mind-guide-item b {
  color: rgba(66, 49, 36, .9);
  font-size: 12px;
  font-weight: 650;
  text-shadow:
    0 1px 10px rgba(255, 253, 246, .74),
    0 0 1px rgba(255, 253, 246, .88),
    0 1px 2px rgba(36, 27, 19, .14);
}

.cover-sign-detail .mind-guide-item span {
  color: rgba(55, 42, 32, .86);
  font-size: 11px;
  line-height: 1.3;
  font-weight: 560;
  min-height: 27px;
  text-shadow:
    0 1px 10px rgba(255, 253, 246, .72),
    0 0 1px rgba(255, 253, 246, .88),
    0 1px 2px rgba(36, 27, 19, .14);
}

.cover-sign-detail .waiting-luck-button {
  min-height: 24px;
  margin-top: 10px;
  border: 0;
  background: transparent;
  color: rgba(104, 75, 55, .72);
  font-size: 13px;
  font-weight: 500;
  box-shadow: none;
}

.cover-sign-detail .result-luck-strip {
  height: 34px;
  margin-top: 8px;
}

.cover-sign-detail .result-luck-track .stamp {
  border-color: rgba(var(--daily-tone-rgb), .08);
  background: rgba(255, 253, 246, .14);
  color: rgba(var(--daily-tone-rgb), .74);
  box-shadow: none;
  backdrop-filter: blur(4px);
}

.cover-sign-detail .result-luck-track .stamp-count {
  background: rgba(255, 253, 246, .1);
  color: rgba(var(--daily-tone-rgb), .7);
}

.cover-sign-detail.share-sign-detail {
  height: auto;
  min-height: 0;
  grid-template-rows: auto auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.cover-sign-detail.share-sign-detail::before,
.cover-sign-detail.share-sign-detail::after {
  display: none;
}

.share-sign-detail .daily-cover-stage {
  border-radius: 18px;
  box-shadow: 0 14px 30px rgba(45, 27, 16, .15);
}

.share-sign-detail .daily-cover-paper {
  padding: 22px 7px 6px;
}

.share-sign-detail .daily-cover-kicker {
  margin-right: 0;
}

.share-sign-detail.cover-sign-detail h1 {
  font-size: 20px;
}

.share-sign-detail.cover-sign-detail .result-main-sentence {
  font-size: 17px;
  line-height: 1.48;
}

.share-sign-detail .share-sign-whisper {
  width: fit-content;
  margin-top: 10px;
  opacity: .78;
  grid-template-columns: auto;
}

.share-sign-detail .share-sign-whisper span {
  display: none;
}

@media (max-height: 760px) {
  .daily-cover-result .result-home-title {
    font-size: 15px;
  }

  .daily-cover-result .retune-pill {
    min-height: 32px;
    font-size: 13px;
  }

  .cover-sign-detail {
    height: auto;
    grid-template-rows: auto auto;
    padding: 8px;
  }

  .daily-cover-paper {
    padding: 12px 13px 10px;
  }

  .cover-sign-detail h1 {
    font-size: 19px;
  }

  .cover-sign-detail .result-main-sentence {
    margin-bottom: 9px;
    font-size: 16px;
    line-height: 1.43;
  }

  .cover-sign-detail .daily-cover-mark {
    width: 29px;
    height: 29px;
  }

  .cover-sign-detail .daily-cover-mark span {
    font-size: 16px;
  }

  .cover-sign-detail .mind-guide-item {
    grid-template-rows: 25px 15px minmax(27px, auto);
    padding: 5px 4px 4px;
  }

  .cover-sign-detail .mind-guide-item i {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }

  .cover-sign-detail .mind-guide-item b,
  .cover-sign-detail .mind-guide-item span {
    font-size: 10.5px;
  }
}

/* Daily sign detail no-shell trial */
.result-screen.daily-cover-result {
  padding-right: 0;
  padding-left: 0;
}

.result-screen.daily-cover-result::after {
  display: none;
}

.result-screen.daily-cover-result::before {
  inset: 0;
  background: var(--daily-cover-bg, url("/images/mine-bg.png")) center / cover no-repeat;
  filter: none;
  transform: none;
  opacity: 1;
}

.result-screen.daily-cover-result .result-hero-head {
  position: sticky;
  top: max(10px, calc(env(safe-area-inset-top) + 8px));
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: auto;
  min-height: 40px;
  margin: 0 14px 4px;
  padding: 2px 0;
  pointer-events: none;
}

.result-screen.daily-cover-result .result-hero-head > * {
  pointer-events: auto;
}

.result-screen.daily-cover-result .cover-sign-detail {
  width: 100%;
  max-width: none;
  min-height: calc(100svh - 112px);
  padding-bottom: 22px;
  margin: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.result-screen.daily-cover-result .cover-sign-detail::before,
.result-screen.daily-cover-result .cover-sign-detail::after {
  display: none;
}

.result-screen.daily-cover-result .daily-cover-paper-head {
  position: relative;
  z-index: 2;
  padding-right: 46px;
  padding-left: 46px;
  padding-top: clamp(54px, 8svh, 86px);
}

.result-screen.daily-cover-result .daily-cover-paper-head::before {
  display: none;
}

.result-screen.daily-cover-result .daily-paper-date span,
.result-screen.daily-cover-result .daily-paper-date b,
.result-screen.daily-cover-result .cover-sign-detail h1 {
  color: rgba(255, 253, 244, .92);
  text-shadow:
    0 2px 16px rgba(0, 0, 0, .56),
    0 0 2px rgba(0, 0, 0, .52),
    0 1px 24px rgba(0, 0, 0, .22);
}

.result-screen.daily-cover-result .daily-paper-date b::after {
  background: rgba(255, 253, 244, .62);
}

.result-screen.daily-cover-result .cover-sign-detail .result-main-sentence {
  color: rgba(255, 253, 244, .95);
  text-shadow:
    0 2px 16px rgba(0, 0, 0, .58),
    0 0 2px rgba(0, 0, 0, .52),
    0 1px 24px rgba(0, 0, 0, .24);
}

.result-screen.daily-cover-result .cover-sign-detail .waiting-luck-button {
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(8, 18, 18, .12);
  color: rgba(255, 253, 244, .94);
  text-shadow:
    0 2px 10px rgba(0, 0, 0, .56),
    0 0 1px rgba(0, 0, 0, .44);
}

.result-screen.daily-cover-result .cover-sign-detail .waiting-luck-button span {
  color: rgba(255, 224, 138, .96);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .42);
}

.result-screen.daily-cover-result .daily-cover-stage {
  display: none;
}

.result-screen.daily-cover-result .daily-cover-paper-body {
  position: relative;
  margin-top: clamp(132px, 23svh, 260px);
  padding-right: 46px;
  padding-left: 46px;
  padding-bottom: 0;
}

.result-screen.daily-cover-result .daily-cover-paper-body::before {
  display: none;
}

.result-screen.daily-cover-result .cover-sign-detail .mind-guide-item i {
  color: rgba(255, 251, 238, .94);
  text-shadow:
    0 2px 13px rgba(0, 0, 0, .62),
    0 0 2px rgba(0, 0, 0, .68),
    0 1px 16px rgba(255, 246, 220, .18);
}

.result-screen.daily-cover-result .cover-sign-detail .mind-guide-item b {
  color: rgba(255, 251, 238, .88);
  text-shadow:
    0 2px 12px rgba(0, 0, 0, .6),
    0 0 2px rgba(0, 0, 0, .62),
    0 1px 14px rgba(255, 246, 220, .16);
}

.result-screen.daily-cover-result .cover-sign-detail .mind-guide-item span {
  color: rgba(255, 251, 238, .84);
  text-shadow:
    0 2px 12px rgba(0, 0, 0, .6),
    0 0 2px rgba(0, 0, 0, .62),
    0 1px 14px rgba(255, 246, 220, .14);
}

.result-screen.daily-cover-result .result-bottom-actions {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 14px));
  left: auto;
  width: auto;
  margin: 0;
  transform: none;
}

.cover-sign-detail .daily-metaphysics-panel {
  display: grid;
  gap: 11px;
  margin-top: 18px;
  padding: 15px 0 2px;
  border-top: 1px solid rgba(var(--daily-tone-rgb), .18);
  border-bottom: 1px solid rgba(var(--daily-tone-rgb), .1);
  color: rgba(var(--daily-tone-rgb), .84);
}

.cover-sign-detail .daily-metaphysics-panel.locked {
  padding: 15px 0 13px;
}

.cover-sign-detail .daily-metaphysics-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.cover-sign-detail .daily-metaphysics-head span {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
}

.cover-sign-detail .daily-metaphysics-head b {
  flex: 0 0 auto;
  color: rgba(var(--daily-tone-rgb), .58);
  font-size: 11px;
  font-weight: 500;
}

.cover-sign-detail .daily-metaphysics-lead {
  margin: 0;
  color: rgba(var(--daily-tone-rgb), .74);
  font-size: 12px;
  line-height: 1.55;
}

.cover-sign-detail .daily-metaphysics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}

.cover-sign-detail .daily-metaphysics-item {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding-top: 9px;
  border-top: 1px solid rgba(var(--daily-tone-rgb), .12);
}

.cover-sign-detail .daily-metaphysics-item i {
  color: rgba(var(--daily-tone-rgb), .58);
  font-style: normal;
  font-size: 11px;
  line-height: 1;
}

.cover-sign-detail .daily-metaphysics-item b {
  color: rgba(var(--daily-tone-rgb), .88);
  font-size: 13px;
  font-weight: 680;
  line-height: 1.2;
}

.cover-sign-detail .daily-metaphysics-item span,
.cover-sign-detail .daily-metaphysics-item em {
  color: rgba(var(--daily-tone-rgb), .7);
  font-style: normal;
  font-size: 11px;
  line-height: 1.45;
}

.cover-sign-detail .daily-metaphysics-item em {
  color: rgba(var(--daily-tone-rgb), .52);
}

.cover-sign-detail .daily-metaphysics-locks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.cover-sign-detail .daily-metaphysics-locks span {
  min-width: 0;
  min-height: 46px;
  padding: 8px 9px;
  display: grid;
  align-content: center;
  gap: 5px;
  border: 1px solid rgba(var(--daily-tone-rgb), .13);
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(255, 253, 246, .12), rgba(255, 253, 246, .04));
  color: rgba(var(--daily-tone-rgb), .55);
  text-align: left;
}

.cover-sign-detail .daily-metaphysics-locks i,
.cover-sign-detail .daily-metaphysics-cta i {
  font-style: normal;
}

.cover-sign-detail .daily-metaphysics-locks i {
  color: rgba(var(--daily-tone-rgb), .48);
  font-size: 10.5px;
  line-height: 1;
}

.cover-sign-detail .daily-metaphysics-locks b {
  color: rgba(var(--daily-tone-rgb), .72);
  font-size: 12px;
  line-height: 1;
  font-weight: 680;
}

.cover-sign-detail .daily-metaphysics-cta {
  justify-self: stretch;
  min-height: 42px;
  margin-top: 3px;
  padding: 0 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255, 232, 174, .58);
  border-radius: 999px;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, .35), transparent 36%),
    linear-gradient(135deg, rgba(255, 225, 150, .92), rgba(177, 119, 54, .9));
  color: rgba(48, 35, 20, .96);
  font-size: 12.5px;
  font-weight: 800;
  box-shadow:
    0 12px 24px rgba(88, 58, 24, .18),
    inset 0 1px 0 rgba(255, 255, 255, .48);
}

.cover-sign-detail .daily-metaphysics-cta > span {
  font: inherit;
}

.cover-sign-detail .daily-metaphysics-cta > i {
  color: rgba(48, 35, 20, .72);
  font-size: 10.5px;
  font-weight: 700;
}

.cover-sign-detail .daily-metaphysics-cta::before,
.cover-sign-detail .daily-metaphysics-cta::after {
  content: "";
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(60, 42, 22, .44), transparent);
}

.cover-sign-detail .daily-metaphysics-cta::after {
  transform: scaleX(-1);
}

.result-screen.daily-cover-result .cover-sign-detail .daily-metaphysics-panel {
  position: relative;
  margin: 24px -18px 0;
  padding: 18px 18px 16px;
  border: 1px solid rgba(255, 251, 238, .18);
  border-radius: 22px;
  border-top-color: rgba(255, 251, 238, .22);
  border-bottom-color: rgba(255, 251, 238, .13);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 232, 162, .14), transparent 34%),
    linear-gradient(180deg, rgba(23, 21, 17, .4), rgba(23, 21, 17, .24));
  color: rgba(255, 251, 238, .9);
  box-shadow:
    0 18px 40px rgba(10, 9, 7, .2),
    inset 0 1px 0 rgba(255, 255, 255, .12);
  text-shadow:
    0 2px 9px rgba(0, 0, 0, .44),
    0 0 1px rgba(0, 0, 0, .54);
  backdrop-filter: blur(10px) saturate(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
}

.result-screen.daily-cover-result .cover-sign-detail .daily-metaphysics-panel::before {
  content: "";
  position: absolute;
  top: -13px;
  right: 18px;
  left: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 236, 184, .48), transparent);
  pointer-events: none;
}

.result-screen.daily-cover-result .cover-sign-detail .daily-metaphysics-panel.locked {
  padding-bottom: 18px;
}

.result-screen.daily-cover-result .cover-sign-detail .daily-metaphysics-grid {
  position: relative;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 2px;
}

.result-screen.daily-cover-result .cover-sign-detail .daily-metaphysics-grid::before {
  display: none;
}

.result-screen.daily-cover-result .cover-sign-detail .daily-metaphysics-item {
  position: relative;
  min-height: 74px;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  gap: 4px 12px;
  padding: 10px 0 12px;
  border-top: 0;
  border-bottom: 1px solid rgba(255, 251, 238, .12);
}

.result-screen.daily-cover-result .cover-sign-detail .daily-metaphysics-item::before,
.result-screen.daily-cover-result .cover-sign-detail .daily-metaphysics-item::after {
  content: "";
  position: absolute;
  left: 21px;
  width: 1px;
  background: linear-gradient(180deg, rgba(255, 232, 176, .08), rgba(255, 232, 176, .32));
  pointer-events: none;
}

.result-screen.daily-cover-result .cover-sign-detail .daily-metaphysics-item::before {
  top: 0;
  height: 9px;
}

.result-screen.daily-cover-result .cover-sign-detail .daily-metaphysics-item::after {
  top: 42px;
  bottom: 0;
}

.result-screen.daily-cover-result .cover-sign-detail .daily-metaphysics-item:first-child::before,
.result-screen.daily-cover-result .cover-sign-detail .daily-metaphysics-item:last-child::after {
  display: none;
}

.result-screen.daily-cover-result .cover-sign-detail .daily-metaphysics-item:last-child {
  border-bottom: 0;
  padding-bottom: 4px;
}

.result-screen.daily-cover-result .cover-sign-detail .daily-metaphysics-item i {
  position: relative;
  z-index: 1;
  grid-row: 1 / span 3;
  grid-column: 1;
  align-self: start;
  margin-top: -1px;
  width: 42px;
  min-height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 232, 176, .2);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 235, 174, .18), transparent 60%),
    rgba(24, 21, 17, .28);
  color: rgba(255, 232, 176, .9);
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  text-align: center;
  box-shadow:
    0 6px 16px rgba(0, 0, 0, .12),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}

.result-screen.daily-cover-result .cover-sign-detail .daily-metaphysics-item b {
  grid-row: 1;
  grid-column: 2;
  padding-top: 1px;
  color: rgba(255, 253, 244, .95);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 760;
}

.result-screen.daily-cover-result .cover-sign-detail .daily-metaphysics-item span {
  grid-row: 2;
  grid-column: 2;
  color: rgba(255, 251, 238, .82);
  font-size: 12px;
  line-height: 1.48;
}

.result-screen.daily-cover-result .cover-sign-detail .daily-metaphysics-item em {
  grid-row: 3;
  grid-column: 2;
  width: fit-content;
  max-width: 100%;
  margin-top: 1px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 251, 238, .1);
  color: rgba(255, 236, 190, .72);
  font-size: 10.5px;
  line-height: 1.2;
}

.result-screen.daily-cover-result .cover-sign-detail .daily-metaphysics-head b,
.result-screen.daily-cover-result .cover-sign-detail .daily-metaphysics-lead,
.result-screen.daily-cover-result .cover-sign-detail .daily-metaphysics-item span,
.result-screen.daily-cover-result .cover-sign-detail .daily-metaphysics-item em {
  color: rgba(255, 251, 238, .75);
}

.result-screen.daily-cover-result .cover-sign-detail .daily-metaphysics-item span {
  color: rgba(255, 251, 238, .82);
}

.result-screen.daily-cover-result .cover-sign-detail .daily-metaphysics-item em {
  color: rgba(255, 236, 190, .72);
}

.result-screen.daily-cover-result .cover-sign-detail .daily-metaphysics-locks span {
  border-color: rgba(255, 251, 238, .18);
  background:
    linear-gradient(180deg, rgba(255, 253, 244, .12), rgba(255, 253, 244, .04)),
    rgba(20, 19, 16, .08);
  color: rgba(255, 251, 238, .8);
  text-shadow:
    0 2px 8px rgba(0, 0, 0, .4),
    0 0 1px rgba(0, 0, 0, .5);
}

.result-screen.daily-cover-result .cover-sign-detail .daily-metaphysics-locks i {
  color: rgba(255, 238, 190, .7);
}

.result-screen.daily-cover-result .cover-sign-detail .daily-metaphysics-locks b {
  color: rgba(255, 251, 238, .86);
}

.result-screen.daily-cover-result .cover-sign-detail .daily-metaphysics-cta {
  border-color: rgba(255, 235, 178, .64);
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, .34), transparent 36%),
    linear-gradient(135deg, rgba(255, 226, 154, .94), rgba(177, 118, 50, .9));
  color: rgba(48, 35, 20, .98);
  text-shadow: none;
  box-shadow:
    0 12px 26px rgba(31, 22, 12, .28),
    0 0 0 1px rgba(255, 251, 238, .14) inset,
    inset 0 1px 0 rgba(255, 255, 255, .52);
}

.result-screen.daily-cover-result .cover-sign-detail .daily-metaphysics-cta > i {
  color: rgba(48, 35, 20, .7);
}

@media (max-width: 380px) {
  .result-screen.daily-cover-result .daily-cover-paper-head,
  .result-screen.daily-cover-result .daily-cover-paper-body {
    padding-right: 40px;
    padding-left: 40px;
  }

  .cover-sign-detail .daily-metaphysics-grid {
    gap: 10px 12px;
  }

  .cover-sign-detail .daily-metaphysics-locks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Daily share page cover-style trial */
.daily-share-screen.daily-cover-result {
  padding: max(12px, env(safe-area-inset-top)) 0 calc(112px + env(safe-area-inset-bottom));
  gap: 0;
  background: #efe6d9;
  overflow-x: hidden;
  overflow-y: auto;
}

.daily-share-screen.daily-cover-result::before {
  inset: -40px;
  z-index: -2;
  background:
    var(--daily-cover-bg, url("/images/mine-bg.png")) center / cover no-repeat,
    #efe6d9;
  filter: blur(18px) saturate(1.08);
  transform: scale(1.06);
  opacity: .78;
}

.daily-share-screen.daily-cover-result::after {
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(var(--daily-paper-rgb), .5) 0%, rgba(var(--daily-paper-rgb), .24) 28%, rgba(var(--daily-paper-rgb), .08) 56%, rgba(var(--daily-paper-rgb), .28) 100%),
    radial-gradient(circle at 50% 8%, rgba(255, 255, 255, .14), transparent 38%);
}

.daily-share-screen.daily-cover-result .daily-share-paper-page,
.daily-share-screen.daily-cover-result .share-sticky-actions {
  position: relative;
  z-index: 2;
}

.daily-share-screen .daily-share-paper-page {
  width: min(100%, 430px);
  margin: 0 auto;
  padding: 10px 0 18px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.daily-share-screen .daily-share-paper-page::before {
  display: none;
}

.daily-share-screen .daily-share-head {
  min-height: 0;
  margin: 0 22px 12px;
  padding: 0;
  align-items: center;
}

.daily-share-screen .daily-share-head .avatar {
  width: 38px;
  height: 38px;
  background: rgba(255, 253, 246, .58);
  color: rgba(var(--daily-tone-rgb), .92);
  font-size: 17px;
  font-weight: 500;
  box-shadow: inset 0 0 0 1px rgba(var(--daily-tone-rgb), .16), 0 10px 22px rgba(45, 31, 20, .08);
  backdrop-filter: blur(12px);
}

.daily-share-screen .daily-share-head small {
  margin-bottom: 2px;
  color: rgba(var(--daily-tone-rgb), .72);
  font-size: 8.5px;
  font-weight: 700;
  text-shadow: 0 1px 8px rgba(255, 253, 246, .32);
}

.daily-share-screen .daily-share-head b {
  color: rgba(var(--daily-tone-rgb), .99);
  font-size: 16px;
  font-weight: 600;
  text-shadow: 0 1px 9px rgba(255, 253, 246, .34);
}

.daily-share-screen .daily-share-head span {
  margin-top: 2px;
  color: rgba(var(--daily-tone-muted-rgb), .88);
  font-size: 11.5px;
  text-shadow: 0 1px 8px rgba(255, 253, 246, .28);
}

.daily-share-screen .daily-share-card-wrap {
  margin: 0;
  overflow: visible;
  border-radius: 0;
}

.daily-share-screen.daily-cover-result .cover-sign-detail.share-sign-detail {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-bottom: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.daily-share-screen.daily-cover-result .share-sign-detail .daily-cover-paper-head {
  padding: 28px 46px 0;
}

.daily-share-screen.daily-cover-result .share-sign-detail .daily-paper-date {
  margin-bottom: 16px;
}

.daily-share-screen.daily-cover-result .share-sign-detail .daily-paper-date span {
  font-size: 14px;
}

.daily-share-screen.daily-cover-result .share-sign-detail .daily-paper-date b {
  margin-top: 6px;
  padding-bottom: 11px;
  font-size: 26px;
}

.daily-share-screen.daily-cover-result .share-sign-detail .daily-title-row {
  margin-bottom: 14px;
}

.daily-share-screen.daily-cover-result .share-sign-detail.cover-sign-detail h1 {
  color: rgba(var(--daily-tone-rgb), .98);
  font-size: 27px;
  line-height: 1.2;
  font-weight: 500;
  text-shadow: 0 1px 10px rgba(255, 253, 246, .46), 0 0 1px rgba(var(--daily-tone-rgb), .14);
}

.daily-share-screen.daily-cover-result .share-sign-detail.cover-sign-detail .result-main-sentence {
  max-width: 292px;
  margin-bottom: 16px;
  color: rgba(54, 39, 28, .88);
  font-size: 16px;
  line-height: 1.62;
  font-weight: 500;
  text-shadow: 0 1px 9px rgba(255, 253, 246, .5), 0 0 1px rgba(54, 39, 28, .16);
}

.daily-share-screen.daily-cover-result .share-sign-detail .daily-cover-mark {
  width: 32px;
  height: 32px;
  top: 3px;
}

.daily-share-screen.daily-cover-result .share-sign-detail .daily-cover-stage {
  width: 100%;
  height: min(86vw, 338px);
  aspect-ratio: auto;
  margin-top: -12px;
  margin-bottom: -8px;
  border-radius: 0;
  box-shadow: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .14) 5%, rgba(0, 0, 0, .62) 17%, #000 32%, #000 72%, rgba(0, 0, 0, .76) 84%, rgba(0, 0, 0, .32) 94%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .14) 5%, rgba(0, 0, 0, .62) 17%, #000 32%, #000 72%, rgba(0, 0, 0, .76) 84%, rgba(0, 0, 0, .32) 94%, transparent 100%);
}

.daily-share-screen.daily-cover-result .share-sign-detail .daily-cover-shade {
  background:
    linear-gradient(180deg, rgba(var(--daily-paper-rgb), .28), rgba(var(--daily-paper-rgb), .12) 17%, rgba(var(--daily-paper-rgb), .03) 32%, transparent 46%, transparent 66%, rgba(var(--daily-paper-rgb), .08) 80%, rgba(var(--daily-paper-rgb), .26) 100%);
}

.daily-share-screen.daily-cover-result .share-sign-detail .daily-cover-paper-body {
  padding: 0 46px 0;
}

.daily-share-screen.daily-cover-result .share-sign-detail .share-sign-whisper {
  display: none;
}

.daily-share-screen .daily-share-action-area {
  position: relative;
  z-index: 3;
  margin: 24px 22px 0;
  padding: 0;
}

.daily-share-screen .daily-share-stamp-panel {
  padding: 0;
}

.daily-share-screen .daily-share-stamp-panel .share-stamp-head {
  padding: 0 0 9px;
  align-items: flex-end;
}

.daily-share-screen .daily-share-stamp-panel .share-stamp-head b {
  color: rgba(var(--daily-tone-rgb), .98);
  font-size: 15px;
  font-weight: 500;
  text-shadow: 0 1px 8px rgba(255, 253, 246, .3);
}

.daily-share-screen .daily-share-stamp-panel .share-stamp-head span {
  color: rgba(var(--daily-tone-muted-rgb), .82);
  font-size: 10.5px;
}

.daily-share-screen .daily-share-stamp-panel .shuffle-button {
  color: rgba(var(--daily-button-rgb), .98);
  font-size: 12px;
  font-weight: 500;
  text-shadow: 0 1px 8px rgba(255, 253, 246, .22);
}

.daily-share-screen .daily-share-stamp-panel .stamp-picker {
  gap: 8px;
  padding: 1px 0 10px;
}

.daily-share-screen .daily-share-stamp-panel .stamp-button {
  position: relative;
  overflow: hidden;
  min-height: 40px;
  padding: 4px 11px 4px 6px;
  border-color: rgba(var(--daily-tone-rgb), .12);
  background: rgba(255, 253, 246, .42);
  color: rgba(var(--daily-tone-rgb), .84);
  font-weight: 500;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42);
  backdrop-filter: blur(10px);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: pan-x;
}

.daily-share-screen .daily-share-stamp-panel .stamp-button::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background:
    conic-gradient(from -90deg, rgba(var(--daily-button-rgb), .78) var(--stamp-hold-angle, 0deg), transparent 0),
    linear-gradient(rgba(255, 253, 246, .16), rgba(255, 253, 246, .16));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
  transition: opacity .12s ease;
}

.daily-share-screen .daily-share-stamp-panel .stamp-button.is-holding {
  transform: translateY(1px) scale(.985);
  box-shadow:
    0 8px 18px rgba(var(--daily-button-deep-rgb), .1),
    inset 0 1px 0 rgba(255, 255, 255, .5);
}

.daily-share-screen .daily-share-stamp-panel .stamp-button.is-holding::after {
  opacity: .96;
}

.daily-share-screen .daily-share-stamp-panel .stamp-button i {
  width: 30px;
  height: 30px;
  background: rgba(255, 253, 246, .56);
}

.daily-share-screen .daily-share-stamp-panel .stamp-button.active {
  border-color: rgba(var(--daily-button-rgb), .32);
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, .42), transparent 38%),
    rgba(var(--daily-button-rgb), .92);
  color: rgba(255, 250, 238, .96);
  box-shadow: 0 10px 20px rgba(var(--daily-button-deep-rgb), .16);
}

.daily-share-screen .daily-share-stamp-panel .stamp-button.is-drag-source {
  opacity: .42;
  transform: translateY(1px) scale(.96);
}

.daily-share-screen.stamp-drop-dragging {
  cursor: grabbing;
}

.daily-share-screen.stamp-drop-dragging .stamp-picker {
  touch-action: none;
}

.stamp-drag-guide {
  --guide-angle: -90deg;
  --guide-length: 72px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 998;
  width: 0;
  height: 0;
  pointer-events: none;
  color: rgba(var(--daily-tone-rgb), .82);
  opacity: 0;
  transition: opacity .16s ease;
}

.stamp-drag-guide.is-visible {
  opacity: 1;
}

.stamp-drag-guide span {
  position: absolute;
  left: 12px;
  top: -70px;
  min-height: 24px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  border-radius: 999px;
  background: rgba(255, 253, 246, .58);
  box-shadow: 0 10px 22px rgba(39, 32, 22, .12), inset 0 1px 0 rgba(255, 255, 255, .58);
  backdrop-filter: blur(12px);
  font-size: 10.5px;
  font-weight: 500;
  transform: translateX(-50%);
}

.stamp-drag-guide i {
  position: absolute;
  left: 8px;
  top: -34px;
  width: var(--guide-length);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 253, 246, .14), rgba(var(--daily-button-rgb), .82));
  box-shadow: 0 0 0 1px rgba(255, 253, 246, .1), 0 0 18px rgba(255, 253, 246, .26);
  transform-origin: 0 50%;
  transform: rotate(var(--guide-angle));
  animation: stampDragGuidePulse 1.15s ease-in-out infinite;
}

.stamp-drag-guide i::before,
.stamp-drag-guide i::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.stamp-drag-guide i::before {
  left: -2px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 253, 246, .68);
  transform: translateY(-50%);
}

.stamp-drag-guide i::after {
  right: -1px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid rgba(var(--daily-button-rgb), .86);
  border-right: 2px solid rgba(var(--daily-button-rgb), .86);
  transform: translateY(-50%) rotate(45deg);
}

.stamp-drag-guide.is-ready span {
  background: rgba(var(--daily-button-rgb), .9);
  color: rgba(255, 250, 238, .96);
  box-shadow: 0 12px 24px rgba(var(--daily-button-deep-rgb), .18);
}

.daily-share-screen .daily-cover-stage.stamp-drop-target::before {
  content: "";
  position: absolute;
  inset: 18px 24px;
  z-index: 3;
  border: 1px dashed rgba(255, 252, 238, .42);
  border-radius: 28px;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255, 252, 238, .2), transparent 48%);
  transform: scale(.98);
  transition: opacity .18s ease, transform .18s ease;
}

.daily-share-screen.stamp-drop-dragging .daily-cover-stage.stamp-drop-target::before {
  opacity: .62;
}

.daily-share-screen.stamp-drop-ready .daily-cover-stage.stamp-drop-hover::before {
  opacity: .98;
  transform: scale(1);
}

.stamp-drag-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  pointer-events: none;
  min-height: 44px;
  padding: 5px 13px 5px 7px;
  border: 1px solid rgba(var(--daily-tone-rgb), .16);
  border-radius: 999px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .72), transparent 36%),
    rgba(255, 253, 246, .52);
  color: rgba(var(--daily-tone-rgb), .86);
  box-shadow: 0 18px 34px rgba(34, 28, 20, .18), inset 0 1px 0 rgba(255, 255, 255, .58), 0 0 0 8px rgba(255, 250, 238, .1);
  backdrop-filter: blur(14px);
  filter: saturate(1.02);
  opacity: .92;
  will-change: transform, opacity;
}

.stamp-drag-ghost i {
  background: rgba(255, 253, 246, .58);
}

.stamp-drag-ghost.dropping {
  opacity: 0;
  filter: saturate(1.1) drop-shadow(0 16px 22px rgba(255, 248, 220, .3));
}

.stamp-hold-ghost {
  transform-origin: center;
}

.stamp-hold-ghost.stamp-fly-ghost {
  box-shadow:
    0 20px 38px rgba(34, 28, 20, .18),
    inset 0 1px 0 rgba(255, 255, 255, .62),
    0 0 0 10px rgba(255, 250, 238, .11);
}

.stamp-drop-ripple {
  position: absolute;
  z-index: 4;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(255, 253, 238, .78);
  background: rgba(255, 250, 220, .2);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.4);
  animation: stampDropRipple .72s ease-out forwards;
}

@keyframes stampDropRipple {
  0% { opacity: .95; transform: translate(-50%, -50%) scale(.4); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(6.2); }
}

@keyframes stampDragGuidePulse {
  0%, 100% { opacity: .58; transform: rotate(var(--guide-angle)) scaleX(.82); }
  52% { opacity: 1; transform: rotate(var(--guide-angle)) scaleX(1); }
}

.daily-share-screen .daily-share-message {
  margin-top: 4px;
  padding-top: 8px;
}

.daily-share-screen .daily-share-message b {
  color: rgba(var(--daily-tone-rgb), .98);
  font-size: 15px;
  font-weight: 500;
  text-shadow: 0 1px 8px rgba(255, 253, 246, .28);
}

.daily-share-screen .daily-share-message-box {
  position: relative;
}

.daily-share-screen .daily-share-message textarea {
  min-height: 64px;
  padding-right: 54px;
  border: 1px solid rgba(var(--daily-tone-rgb), .16);
  border-radius: 20px;
  background: rgba(255, 253, 246, .54);
  color: rgba(44, 31, 23, .9);
  box-shadow: 0 10px 22px rgba(47, 31, 20, .08), inset 0 1px 0 rgba(255, 255, 255, .58);
  backdrop-filter: blur(8px);
}

.daily-share-screen .daily-share-message textarea::placeholder {
  color: rgba(84, 67, 52, .5);
}

.daily-share-screen .message-send-button {
  position: absolute;
  right: 10px;
  top: 50%;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, .32), transparent 42%),
    rgba(var(--daily-button-rgb), .94);
  color: rgba(255, 250, 238, .96);
  box-shadow: 0 10px 20px rgba(var(--daily-button-deep-rgb), .18), inset 0 1px 0 rgba(255, 255, 255, .24);
  opacity: 0;
  pointer-events: none;
  transform: translate(10px, -50%) scale(.78);
  transition: opacity .2s ease, transform .22s cubic-bezier(.2,.86,.24,1);
}

.daily-share-screen .message-send-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.daily-share-screen .daily-share-message.has-message .message-send-button {
  opacity: 1;
  pointer-events: auto;
  transform: translate(0, -50%) scale(1);
}

.daily-share-screen .daily-share-message.has-message textarea {
  border-color: rgba(var(--daily-button-rgb), .22);
  background: rgba(255, 253, 246, .5);
}

.daily-share-screen .daily-share-message span {
  color: rgba(var(--daily-tone-muted-rgb), .8);
  text-shadow: 0 1px 8px rgba(255, 253, 246, .25);
}

.daily-share-screen .share-sticky-actions {
  left: 16px;
  right: 16px;
  bottom: max(14px, env(safe-area-inset-bottom));
  width: auto;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 9px;
  padding: 0;
  transform: none;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.daily-share-screen .share-sticky-actions button {
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
}

.daily-share-screen .share-sticky-actions .secondary {
  background: rgba(255, 253, 246, .66);
  color: rgba(var(--daily-tone-rgb), .88);
  box-shadow: 0 12px 24px rgba(43, 31, 22, .12), inset 0 1px 0 rgba(255, 255, 255, .66);
}

.daily-share-screen .share-sticky-actions .primary {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .16), transparent 42%),
    linear-gradient(135deg, rgba(var(--daily-button-rgb), .96), rgba(var(--daily-button-deep-rgb), .98));
  color: rgba(255, 250, 238, .96);
  box-shadow: 0 14px 28px rgba(var(--daily-button-deep-rgb), .26), inset 0 1px 0 rgba(255, 255, 255, .2);
}

.daily-share-screen .share-sticky-actions.daily-share-pass-only {
  left: auto;
  right: 16px;
  width: auto;
  grid-template-columns: auto;
}

.daily-share-screen .share-sticky-actions.daily-share-pass-only .secondary {
  min-width: 96px;
  min-height: 42px;
  padding: 0 18px;
  background: rgba(255, 253, 246, .7);
  color: rgba(var(--daily-tone-rgb), .96);
  box-shadow: 0 12px 24px rgba(43, 31, 22, .13), inset 0 1px 0 rgba(255, 255, 255, .68);
}

@media (max-width: 380px) {
  .daily-share-screen.daily-cover-result .share-sign-detail .daily-cover-paper-head,
  .daily-share-screen.daily-cover-result .share-sign-detail .daily-cover-paper-body {
    padding-right: 40px;
    padding-left: 40px;
  }

  .daily-share-screen .daily-share-head,
  .daily-share-screen .daily-share-action-area {
    margin-right: 18px;
    margin-left: 18px;
  }
}

/* Daily share page quality pass */
.daily-share-screen.daily-cover-result {
  background: rgb(var(--daily-paper-rgb));
}

.daily-share-screen.daily-cover-result::before {
  filter: blur(12px) saturate(1.04) contrast(1.02);
  transform: scale(1.04);
  opacity: .54;
}

.daily-share-screen.daily-cover-result::after {
  background:
    linear-gradient(180deg, rgba(255, 253, 246, .48) 0%, rgba(255, 253, 246, .16) 24%, rgba(255, 253, 246, .04) 52%, rgba(var(--daily-paper-rgb), .22) 100%),
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .2), transparent 34%);
}

.daily-share-screen .daily-share-head {
  margin-bottom: 10px;
  padding: 0 4px;
}

.daily-share-screen .daily-share-head .avatar {
  background: rgba(255, 253, 246, .76);
  box-shadow: 0 10px 22px rgba(var(--daily-button-deep-rgb), .08), inset 0 0 0 1px rgba(var(--daily-tone-rgb), .12);
}

.daily-share-screen .daily-share-head small {
  color: rgba(var(--daily-tone-rgb), .66);
  letter-spacing: .14em;
}

.daily-share-screen .daily-share-head b {
  color: rgba(41, 48, 35, .96);
  font-size: 16.5px;
  font-weight: 600;
}

.daily-share-screen .daily-share-head span {
  color: rgba(65, 73, 54, .78);
}

.daily-share-screen.daily-cover-result .share-sign-detail .daily-cover-paper-head {
  position: relative;
  z-index: 5;
  padding-top: 24px;
  background:
    radial-gradient(ellipse at 48% 18%, rgba(255, 253, 246, .34), transparent 58%),
    linear-gradient(180deg, rgba(255, 253, 246, .28), rgba(255, 253, 246, .12) 58%, transparent 100%);
}

.daily-share-screen.daily-cover-result .share-sign-detail .daily-paper-date span,
.daily-share-screen.daily-cover-result .share-sign-detail .daily-paper-date b {
  color: rgba(56, 64, 47, .8);
  text-shadow: 0 1px 10px rgba(255, 253, 246, .45);
}

.daily-share-screen.daily-cover-result .share-sign-detail.cover-sign-detail h1 {
  color: rgba(50, 59, 41, .98);
  font-weight: 600;
}

.daily-share-screen.daily-cover-result .share-sign-detail.cover-sign-detail .result-main-sentence {
  color: rgba(48, 55, 40, .86);
  text-shadow: 0 1px 10px rgba(255, 253, 246, .62), 0 0 1px rgba(48, 55, 40, .2);
}

.daily-share-screen.daily-cover-result .share-sign-detail .daily-cover-mark {
  background: rgba(255, 253, 246, .72);
  box-shadow: 0 10px 22px rgba(var(--daily-button-deep-rgb), .08), inset 0 0 0 1px rgba(var(--daily-tone-rgb), .12);
}

.daily-share-screen.daily-cover-result .share-sign-detail .daily-cover-stage {
  height: min(91vw, 358px);
  margin-top: -5px;
  margin-bottom: -20px;
  filter: saturate(1.06) contrast(1.03);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .28) 5%, rgba(0, 0, 0, .82) 16%, #000 29%, #000 78%, rgba(0, 0, 0, .82) 88%, rgba(0, 0, 0, .32) 96%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .28) 5%, rgba(0, 0, 0, .82) 16%, #000 29%, #000 78%, rgba(0, 0, 0, .82) 88%, rgba(0, 0, 0, .32) 96%, transparent 100%);
}

.daily-share-screen.daily-cover-result .share-sign-detail .daily-cover-shade {
  background:
    linear-gradient(180deg, rgba(255, 253, 246, .2), rgba(255, 253, 246, .06) 18%, transparent 38%, transparent 76%, rgba(255, 253, 246, .18) 100%);
}

.daily-share-screen .daily-cover-stage .cover-luck-barrage {
  opacity: .98;
}

.daily-share-screen .daily-cover-stage .cover-luck-barrage .luck-float {
  color: rgba(255, 255, 246, .98);
  -webkit-text-stroke: .28px rgba(18, 29, 18, .62);
  text-shadow:
    0 1px 1px rgba(18, 29, 18, .7),
    0 0 10px rgba(18, 29, 18, .46),
    0 8px 18px rgba(18, 29, 18, .24);
}

.daily-share-screen .daily-share-action-area {
  margin-top: 16px;
}

.daily-share-screen .daily-share-action-area::before {
  content: "";
  position: absolute;
  inset: -18px -22px -28px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--daily-paper-rgb), .08), rgba(var(--daily-paper-rgb), .42));
  filter: blur(10px);
  opacity: .74;
}

.daily-share-screen .daily-share-stamp-panel .share-stamp-head b,
.daily-share-screen .daily-share-message b {
  color: rgba(47, 55, 40, .98);
  font-weight: 600;
}

.daily-share-screen .daily-share-stamp-panel .share-stamp-head span,
.daily-share-screen .daily-share-message span {
  color: rgba(70, 78, 58, .78);
}

.daily-share-screen .daily-share-stamp-panel .shuffle-button {
  color: rgba(var(--daily-button-rgb), 1);
}

.daily-share-screen .daily-share-stamp-panel .stamp-button {
  border-color: rgba(var(--daily-tone-rgb), .18);
  background: rgba(255, 253, 246, .66);
  color: rgba(50, 58, 42, .86);
  box-shadow: 0 8px 18px rgba(45, 38, 28, .07), inset 0 1px 0 rgba(255, 255, 255, .58);
  backdrop-filter: blur(8px);
}

.daily-share-screen .daily-share-stamp-panel .stamp-button i {
  background: rgba(255, 253, 246, .74);
  box-shadow: inset 0 0 0 1px rgba(var(--daily-tone-rgb), .08);
}

.daily-share-screen .daily-share-stamp-panel .stamp-button.active {
  border-color: rgba(var(--daily-button-rgb), .36);
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, .42), transparent 38%),
    rgba(var(--daily-button-rgb), .96);
  box-shadow: 0 12px 24px rgba(var(--daily-button-deep-rgb), .18), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.daily-share-screen .daily-share-message {
  margin-top: 8px;
}

.daily-share-screen .daily-share-message-head {
  align-items: baseline;
  gap: 8px;
}

.daily-share-screen .daily-share-message textarea {
  border-color: rgba(var(--daily-tone-rgb), .18);
  background: rgba(255, 253, 246, .7);
  color: rgba(40, 34, 27, .9);
  box-shadow: 0 12px 24px rgba(45, 38, 28, .08), inset 0 1px 0 rgba(255, 255, 255, .68);
  backdrop-filter: blur(6px);
}

.daily-share-screen .daily-share-message textarea::placeholder {
  color: rgba(76, 69, 58, .54);
}

.daily-share-screen .share-sticky-actions.daily-share-pass-only .secondary {
  background: rgba(255, 253, 246, .84);
  color: rgba(48, 55, 40, .96);
  box-shadow: 0 14px 28px rgba(45, 38, 28, .14), inset 0 1px 0 rgba(255, 255, 255, .72);
}

/* Daily share page marked fixes */
.daily-share-screen .daily-share-head {
  position: relative;
  z-index: 6;
  margin-bottom: -10px;
}

.daily-share-screen.daily-cover-result .daily-share-card-wrap {
  position: relative;
  isolation: isolate;
}

.daily-share-screen.daily-cover-result .daily-share-card-wrap::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -88px;
  height: 286px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 52% 18%, rgba(255, 253, 246, .42), transparent 60%),
    linear-gradient(180deg, rgba(255, 253, 246, .22), rgba(255, 253, 246, .08) 48%, transparent 100%);
  filter: blur(8px);
}

.daily-share-screen.daily-cover-result .share-sign-detail .daily-cover-paper-head {
  padding-top: 38px;
  background: transparent;
}

.daily-share-screen.daily-cover-result .share-sign-detail .daily-cover-stage {
  height: min(94vw, 370px);
  margin-top: -2px;
  margin-bottom: -58px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .18) 4%, rgba(0, 0, 0, .76) 13%, #000 25%, #000 82%, rgba(0, 0, 0, .84) 90%, rgba(0, 0, 0, .38) 97%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .18) 4%, rgba(0, 0, 0, .76) 13%, #000 25%, #000 82%, rgba(0, 0, 0, .84) 90%, rgba(0, 0, 0, .38) 97%, transparent 100%);
}

.daily-share-screen.daily-cover-result .share-sign-detail .daily-cover-shade {
  background:
    linear-gradient(180deg, rgba(255, 253, 246, .14), rgba(255, 253, 246, .04) 18%, transparent 38%, transparent 78%, rgba(255, 253, 246, .12) 100%);
}

.daily-share-screen .daily-share-action-area {
  margin-top: 0;
}

.daily-share-screen .daily-share-action-area::before {
  inset: -92px -22px -42px;
  background:
    linear-gradient(180deg, transparent 0%, rgba(var(--daily-paper-rgb), .2) 30%, rgba(var(--daily-paper-rgb), .52) 74%, rgba(var(--daily-paper-rgb), .64) 100%),
    radial-gradient(ellipse at 50% 8%, rgba(255, 253, 246, .18), transparent 62%);
  filter: blur(8px);
  opacity: .95;
}

.daily-share-screen .daily-share-stamp-panel {
  position: relative;
  z-index: 2;
}

.daily-share-screen .daily-share-stamp-panel .stamp-picker {
  gap: 10px;
  padding: 2px 0 12px;
}

.daily-share-screen .daily-share-stamp-panel .stamp-button {
  min-height: 38px;
  padding: 4px 12px 4px 5px;
  border-color: rgba(255, 255, 255, .48);
  background: rgba(255, 253, 246, .78);
  box-shadow:
    0 8px 18px rgba(45, 38, 28, .08),
    inset 0 1px 0 rgba(255, 255, 255, .7);
}

.daily-share-screen .daily-share-stamp-panel .stamp-button:not(.active) {
  color: rgba(54, 61, 45, .78);
}

.daily-share-screen .daily-share-stamp-panel .stamp-button i {
  width: 28px;
  height: 28px;
  background: rgba(255, 253, 246, .84);
}

.daily-share-screen .daily-share-stamp-panel .stamp-button.active {
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, .45), transparent 38%),
    rgba(var(--daily-button-rgb), .98);
  box-shadow:
    0 10px 20px rgba(var(--daily-button-deep-rgb), .2),
    inset 0 1px 0 rgba(255, 255, 255, .26);
}

.daily-share-screen .daily-share-message {
  position: relative;
  z-index: 2;
}

.daily-share-screen .share-sticky-actions.daily-share-pass-only {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 10px));
  z-index: 72;
}

.daily-share-screen .share-sticky-actions.daily-share-pass-only .secondary {
  min-width: 104px;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, .72);
  background: rgba(255, 253, 246, .88);
  box-shadow:
    0 16px 30px rgba(45, 38, 28, .18),
    inset 0 1px 0 rgba(255, 255, 255, .82);
  backdrop-filter: blur(12px);
}

/* Daily share page transition cleanup */
.daily-share-screen.daily-cover-result .daily-share-card-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -86px;
  z-index: 8;
  height: 158px;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 0%, rgba(var(--daily-paper-rgb), .12) 24%, rgba(var(--daily-paper-rgb), .5) 64%, rgba(var(--daily-paper-rgb), .16) 100%);
}

.daily-share-screen.daily-cover-result .share-sign-detail .daily-cover-stage {
  margin-bottom: -78px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .18) 4%, rgba(0, 0, 0, .76) 13%, #000 25%, #000 76%, rgba(0, 0, 0, .72) 86%, rgba(0, 0, 0, .26) 96%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .18) 4%, rgba(0, 0, 0, .76) 13%, #000 25%, #000 76%, rgba(0, 0, 0, .72) 86%, rgba(0, 0, 0, .26) 96%, transparent 100%);
}

.daily-share-screen .daily-share-action-area::before {
  display: none;
}

.daily-share-screen .daily-share-stamp-panel .stamp-picker {
  padding-bottom: 10px;
}

.daily-share-screen .daily-share-stamp-panel .stamp-button {
  border-color: rgba(255, 255, 255, .38);
  background: rgba(255, 253, 246, .58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .62);
  backdrop-filter: blur(7px);
}

.daily-share-screen .daily-share-stamp-panel .stamp-button i {
  background: rgba(255, 253, 246, .68);
  box-shadow: none;
}

.daily-share-screen .daily-share-stamp-panel .stamp-button.active {
  box-shadow: 0 5px 12px rgba(var(--daily-button-deep-rgb), .1), inset 0 1px 0 rgba(255, 255, 255, .24);
}

/* Daily share page seam/stamp polish */
.daily-share-screen.daily-cover-result .daily-share-card-wrap::after {
  display: none;
}

.daily-share-screen.daily-cover-result .daily-share-card-wrap::before {
  opacity: .42;
  filter: blur(14px);
}

.daily-share-screen.daily-cover-result .share-sign-detail .daily-cover-stage {
  margin-bottom: -46px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .2) 4%, rgba(0, 0, 0, .78) 12%, #000 24%, #000 91%, rgba(0, 0, 0, .74) 97%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .2) 4%, rgba(0, 0, 0, .78) 12%, #000 24%, #000 91%, rgba(0, 0, 0, .74) 97%, transparent 100%);
}

.daily-share-screen.daily-cover-result .share-sign-detail .daily-cover-shade {
  background:
    linear-gradient(180deg, rgba(255, 253, 246, .1), rgba(255, 253, 246, .03) 18%, transparent 42%, transparent 86%, rgba(255, 253, 246, .08) 100%);
}

.daily-share-screen .daily-share-action-area {
  margin-top: -6px;
}

.daily-share-screen .daily-share-stamp-panel {
  background: transparent;
  box-shadow: none;
  filter: none;
  backdrop-filter: none;
}

.daily-share-screen .daily-share-stamp-panel .share-stamp-head {
  padding-bottom: 7px;
}

.daily-share-screen .daily-share-stamp-panel .share-stamp-head b {
  color: rgba(39, 48, 33, .96);
  text-shadow: 0 1px 8px rgba(255, 253, 246, .42);
}

.daily-share-screen .daily-share-stamp-panel .share-stamp-head span,
.daily-share-screen .daily-share-stamp-panel .shuffle-button {
  text-shadow: 0 1px 8px rgba(255, 253, 246, .36);
}

.daily-share-screen .daily-share-stamp-panel .stamp-picker {
  padding-top: 0;
  padding-bottom: 8px;
}

.daily-share-screen .daily-share-stamp-panel .stamp-button {
  border-color: rgba(255, 255, 255, .34);
  background: rgba(255, 253, 246, .42);
  box-shadow: none;
  backdrop-filter: blur(5px);
}

.daily-share-screen .daily-share-stamp-panel .stamp-button i {
  background: rgba(255, 253, 246, .46);
  box-shadow: none;
}

.daily-share-screen .daily-share-stamp-panel .stamp-button.active {
  border-color: rgba(255, 255, 255, .28);
  box-shadow: none;
}

/* Daily share page soft cover exit */
.daily-share-screen.daily-cover-result .share-sign-detail .daily-cover-stage {
  margin-bottom: -64px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .2) 4%, rgba(0, 0, 0, .78) 12%, #000 24%, #000 76%, rgba(0, 0, 0, .84) 86%, rgba(0, 0, 0, .38) 97%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .2) 4%, rgba(0, 0, 0, .78) 12%, #000 24%, #000 76%, rgba(0, 0, 0, .84) 86%, rgba(0, 0, 0, .38) 97%, transparent 100%);
}

.daily-share-screen .daily-share-action-area {
  margin-top: -2px;
}

.daily-share-screen .daily-share-stamp-panel .stamp-button {
  background: rgba(255, 253, 246, .34);
  color: rgba(39, 48, 33, .86);
  text-shadow: 0 1px 8px rgba(255, 253, 246, .34);
}

.daily-share-screen .daily-share-stamp-panel .stamp-button i {
  background: rgba(255, 253, 246, .4);
}

.daily-share-screen .daily-share-stamp-panel .stamp-button.active {
  border-color: rgba(var(--daily-button-rgb), .26);
  background: rgba(255, 253, 246, .42);
  color: rgba(32, 43, 28, .95);
  text-shadow: 0 1px 9px rgba(255, 253, 246, .48);
}

.daily-share-screen .daily-share-stamp-panel .stamp-button.active i {
  background: rgba(var(--daily-button-rgb), .22);
}

/* Daily share page blended lower cover */
.daily-share-screen.daily-cover-result .share-sign-detail .daily-cover-stage {
  margin-bottom: -82px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .2) 4%, rgba(0, 0, 0, .78) 12%, #000 24%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .2) 4%, rgba(0, 0, 0, .78) 12%, #000 24%, #000 100%);
}

.daily-share-screen.daily-cover-result .share-sign-detail .daily-cover-shade {
  background:
    linear-gradient(180deg, rgba(255, 253, 246, .08), rgba(255, 253, 246, .02) 16%, transparent 42%, transparent 58%, rgba(var(--daily-paper-rgb), .1) 72%, rgba(var(--daily-paper-rgb), .34) 88%, rgba(var(--daily-paper-rgb), .76) 100%);
}

.daily-share-screen .daily-share-action-area {
  margin-top: -20px;
}

/* Daily share page cover-to-bg blend */
.daily-share-screen.daily-cover-result::after {
  background:
    linear-gradient(180deg, rgba(255, 253, 246, .28) 0%, rgba(255, 253, 246, .08) 26%, transparent 56%, rgba(var(--daily-paper-rgb), .08) 100%);
}

.daily-share-screen.daily-cover-result .share-sign-detail .daily-cover-stage {
  margin-bottom: -74px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .2) 4%, rgba(0, 0, 0, .78) 12%, #000 24%, #000 68%, rgba(0, 0, 0, .82) 80%, rgba(0, 0, 0, .42) 94%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .2) 4%, rgba(0, 0, 0, .78) 12%, #000 24%, #000 68%, rgba(0, 0, 0, .82) 80%, rgba(0, 0, 0, .42) 94%, transparent 100%);
}

.daily-share-screen.daily-cover-result .share-sign-detail .daily-cover-shade {
  background:
    linear-gradient(180deg, rgba(255, 253, 246, .08), rgba(255, 253, 246, .02) 16%, transparent 42%, transparent 100%);
}

.daily-share-screen .daily-share-action-area::before {
  content: "";
  position: absolute;
  inset: -58px -22px -34px;
  z-index: -1;
  display: block;
  pointer-events: none;
  background: var(--daily-cover-bg, url("/images/mine-bg.png")) center 78% / cover no-repeat;
  filter: blur(18px) saturate(1.08);
  opacity: .34;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .24) 14%, rgba(0, 0, 0, .9) 38%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .24) 14%, rgba(0, 0, 0, .9) 38%, #000 100%);
}

.daily-share-screen:not(.stamp-drop-dragging) .share-sign-detail .daily-cover-stage::before {
  content: "";
  position: absolute;
  left: -18px;
  right: -18px;
  bottom: -18px;
  z-index: 2;
  height: 132px;
  pointer-events: none;
  background: var(--daily-cover-bg, url("/images/mine-bg.png")) center 82% / cover no-repeat;
  filter: blur(16px) saturate(1.06);
  opacity: .42;
  transform: scale(1.04);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .45) 34%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .45) 34%, #000 100%);
}

/* Daily share page final lighter stamp bed */
.daily-share-screen .daily-share-action-area::before {
  display: none;
}

.daily-share-screen.daily-cover-result .share-sign-detail .daily-cover-stage {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .2) 4%, rgba(0, 0, 0, .78) 12%, #000 24%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .2) 4%, rgba(0, 0, 0, .78) 12%, #000 24%, #000 100%);
}

.daily-share-screen.daily-cover-result .share-sign-detail .daily-cover-image,
.daily-share-screen.daily-cover-result .share-sign-detail .daily-cover-placeholder {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .2) 4%, rgba(0, 0, 0, .78) 12%, #000 24%, #000 70%, rgba(0, 0, 0, .76) 82%, rgba(0, 0, 0, .34) 94%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .2) 4%, rgba(0, 0, 0, .78) 12%, #000 24%, #000 70%, rgba(0, 0, 0, .76) 82%, rgba(0, 0, 0, .34) 94%, transparent 100%);
}

.daily-share-screen:not(.stamp-drop-dragging) .share-sign-detail .daily-cover-stage::before {
  height: 168px;
  opacity: .64;
  filter: blur(18px) saturate(1.08);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .28) 22%, rgba(0, 0, 0, .88) 46%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .28) 22%, rgba(0, 0, 0, .88) 46%, #000 100%);
}

.daily-share-screen.daily-cover-result .daily-share-card-wrap::after {
  content: "";
  position: absolute;
  left: -20px;
  right: -20px;
  bottom: -76px;
  z-index: 0;
  height: 168px;
  display: block;
  pointer-events: none;
  background: var(--daily-cover-bg, url("/images/mine-bg.png")) center 82% / cover no-repeat;
  filter: blur(20px) saturate(1.08);
  opacity: .24;
  transform: scale(1.04);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .2) 18%, rgba(0, 0, 0, .78) 46%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .2) 18%, rgba(0, 0, 0, .78) 46%, transparent 100%);
}

.daily-share-screen .daily-share-stamp-panel .stamp-button,
.daily-share-screen .daily-share-stamp-panel .stamp-button.active {
  background: rgba(255, 253, 246, .32);
}

.daily-share-screen .daily-share-stamp-panel .stamp-button i {
  background: rgba(255, 253, 246, .36);
}

/* Daily share page image-level fade */
.daily-share-screen.daily-cover-result .share-sign-detail .daily-cover-image,
.daily-share-screen.daily-cover-result .share-sign-detail .daily-cover-placeholder {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .2) 4%, rgba(0, 0, 0, .78) 12%, #000 24%, #000 68%, rgba(0, 0, 0, .78) 80%, rgba(0, 0, 0, .36) 94%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .2) 4%, rgba(0, 0, 0, .78) 12%, #000 24%, #000 68%, rgba(0, 0, 0, .78) 80%, rgba(0, 0, 0, .36) 94%, transparent 100%);
}

/* Daily share page stamp seam rethink */
.daily-share-screen.daily-cover-result .share-sign-detail .daily-cover-stage {
  margin-bottom: -52px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .2) 4%, rgba(0, 0, 0, .78) 12%, #000 24%, #000 72%, rgba(0, 0, 0, .78) 84%, rgba(0, 0, 0, .34) 96%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .2) 4%, rgba(0, 0, 0, .78) 12%, #000 24%, #000 72%, rgba(0, 0, 0, .78) 84%, rgba(0, 0, 0, .34) 96%, transparent 100%);
}

.daily-share-screen.daily-cover-result .share-sign-detail .daily-cover-image,
.daily-share-screen.daily-cover-result .share-sign-detail .daily-cover-placeholder {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .2) 4%, rgba(0, 0, 0, .78) 12%, #000 24%, #000 72%, rgba(0, 0, 0, .76) 82%, rgba(0, 0, 0, .3) 94%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .2) 4%, rgba(0, 0, 0, .78) 12%, #000 24%, #000 72%, rgba(0, 0, 0, .76) 82%, rgba(0, 0, 0, .3) 94%, transparent 100%);
}

.daily-share-screen:not(.stamp-drop-dragging) .share-sign-detail .daily-cover-stage::before,
.daily-share-screen.daily-cover-result .daily-share-card-wrap::after {
  opacity: .18;
}

.daily-share-screen .daily-share-action-area {
  margin-top: 14px;
}

.daily-share-screen .daily-share-stamp-panel .share-stamp-head {
  padding-bottom: 8px;
}

.daily-share-screen .daily-share-stamp-panel .share-stamp-head > div {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 8px;
}

.daily-share-screen .daily-share-stamp-panel .share-stamp-head b {
  font-size: 14.5px;
  line-height: 1.12;
  flex: 0 0 auto;
}

.daily-share-screen .daily-share-stamp-panel .share-stamp-head span {
  margin-top: 0;
  font-size: 10px;
  opacity: .76;
  white-space: nowrap;
}

/* Daily share page remove stamp band */
.daily-share-screen.daily-cover-result .daily-share-card-wrap::after {
  display: none;
}

.daily-share-screen:not(.stamp-drop-dragging) .share-sign-detail .daily-cover-stage::before {
  bottom: -24px;
  height: 138px;
  opacity: .12;
}

.daily-share-screen .daily-cover-stage .cover-luck-barrage .preset-0 { top: 30px; }
.daily-share-screen .daily-cover-stage .cover-luck-barrage .preset-1 { top: 84px; }
.daily-share-screen .daily-cover-stage .cover-luck-barrage .preset-2 { top: 140px; }
.daily-share-screen .daily-cover-stage .cover-luck-barrage .preset-3 { top: 196px; }
.daily-share-screen .daily-cover-stage .cover-luck-barrage .preset-4 { top: 252px; }

.daily-share-screen .daily-share-action-area {
  margin-top: 30px;
}

.daily-share-screen .share-sticky-actions.daily-share-pass-only.share-fortune-cta {
  left: 50%;
  right: auto;
  bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px));
  width: min(calc(100% - 36px), 390px);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 14px;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 250, 232, .22);
  border-radius: 999px;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 235, 186, .18), transparent 36%),
    linear-gradient(135deg, rgba(31, 29, 25, .86), rgba(78, 62, 43, .82));
  box-shadow:
    0 18px 34px rgba(36, 29, 22, .24),
    inset 0 1px 0 rgba(255, 255, 255, .12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.daily-share-screen .share-fortune-hook {
  min-width: 0;
  color: rgba(255, 253, 246, .88);
}

.daily-share-screen .share-fortune-hook b {
  display: block;
  color: rgba(255, 236, 190, .96);
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
}

.daily-share-screen .share-fortune-hook span {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: rgba(255, 253, 246, .72);
  font-size: 10.5px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.daily-share-screen .share-sticky-actions.daily-share-pass-only.share-fortune-cta .primary {
  min-width: 96px;
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, .62);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 246, 222, .86));
  color: rgba(45, 35, 25, .96);
  box-shadow:
    0 10px 20px rgba(12, 10, 8, .16),
    inset 0 1px 0 rgba(255, 255, 255, .88);
  font-size: 12.5px;
  font-weight: 700;
}

.daily-share-screen .share-sticky-actions.daily-share-pass-only.share-fortune-cta.has-sent-luck {
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 232, 164, .24), transparent 38%),
    linear-gradient(135deg, rgba(38, 33, 27, .88), rgba(98, 70, 42, .82));
}

/* Shared top-left "back to today" button */
.today-back-button,
.brand.today-back-button,
.plain-button.today-back-button,
.result-home-title.today-back-button,
.daily-cover-result .result-home-title.today-back-button,
.ask-floating-back.today-back-button {
  width: auto;
  min-width: 68px;
  min-height: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .46);
  border-radius: 999px;
  background: rgba(255, 250, 240, .7);
  color: rgba(72, 54, 40, .82);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: none;
  box-shadow: 0 10px 22px rgba(42, 31, 22, .1), inset 0 1px 0 rgba(255, 255, 255, .34);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.today-back-button:active,
.brand.today-back-button:active,
.plain-button.today-back-button:active,
.result-home-title.today-back-button:active,
.daily-cover-result .result-home-title.today-back-button:active,
.ask-floating-back.today-back-button:active {
  transform: translateY(1px) scale(.98);
  background: rgba(255, 250, 240, .82);
}

.daily-cover-result .result-home-title.today-back-button span {
  display: inline;
  margin: 0;
  font: inherit;
  line-height: 1;
}

.ask-floating-back.today-back-button {
  background: rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .94);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .22);
  box-shadow: 0 8px 18px rgba(8, 10, 7, .16), inset 0 1px 0 rgba(255, 255, 255, .2);
}

/* Final scoped overrides for the light inner-page shell. */
.mine-art-screen .today-back-button,
.mine-art-screen .plain-button,
.calendar-screen .today-back-button,
.calendar-screen .plain-button,
.fortune-screen .today-back-button,
.fortune-screen .plain-button,
.energy-screen .today-back-button,
.energy-screen .plain-button,
.luck-word-screen .luck-word-back {
  border-color: rgba(67, 96, 82, .15);
  background: rgba(255, 255, 250, .66);
  color: rgba(23, 33, 29, .78);
  box-shadow: 0 10px 22px rgba(43, 57, 51, .07), inset 0 1px 0 rgba(255, 255, 255, .74);
  text-shadow: none;
}