.chat-home {
  --home-footer-bottom: max(0px, env(safe-area-inset-bottom));
  --home-footer-height: 184px;
  position: relative;
  min-height: 0;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  height: var(--nenglume-home-vh, 100dvh);
  overflow: hidden;
  background: #f8f4ea;
}
.home-scene {
  position: absolute;
  z-index: 0;
  top: -34px;
  left: 50%;
  width: 471px;
  max-width: none;
  height: 844px;
  object-fit: cover;
  transform: translate(-50%);
  animation: scene-reveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  background: url(../assets/home-scene.webp) no-repeat;
  background-size: 100%;
  background-position: top center;
}
.cloud-layer {
  position: absolute;
  z-index: 20;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.cloud {
  position: absolute;
  top: 260px;
  width: clamp(124px, 36vw, 154px);
  height: 410px;
  overflow: hidden;
  will-change: transform, opacity;
}
.cloud img {
  position: absolute;
  top: -54px;
  width: 347px;
  max-width: none;
  height: 520px;
  object-fit: fill;
}
.cloud-left {
  left: clamp(26px, 8vw, 34px);
  transform-origin: left center;
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 12%,
    #000 62%,
    transparent 100%
  );
  animation: cloud-left 1.05s 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.cloud-left img {
  left: -104px;
}
.cloud-right {
  right: clamp(26px, 8vw, 34px);
  transform-origin: right center;
  mask-image: linear-gradient(
    to left,
    transparent 0%,
    #000 12%,
    #000 62%,
    transparent 100%
  );
  animation: cloud-right 1.1s 0.46s cubic-bezier(0.25, 1, 0.5, 1) both;
}
.cloud-right img {
  left: -118px;
  transform: scaleX(-1);
}
.home-kicker,
.home-title {
  position: absolute;
  z-index: 40;
  left: 50%;
  transform: translate(-50%);
}
.home-kicker {
  top: 94px;
  width: 117px;
  height: 42px;
  animation: content-reveal 0.34s 0.15s cubic-bezier(0.16, 1, 0.3, 1) both;
  background: url(../assets/home-title-kicker.webp) no-repeat;
  background-size: 100%;
}
.home-title {
  top: 143px;
  width: 293px;
  height: 57px;
  animation: content-reveal 0.36s 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;
    background: url(../assets/home-title-main.webp) no-repeat;
  background-size: 100%;
}
.home-kicker img,
.home-title img {
  display: block;
  width: 100%;
  object-fit: contain;
}
.home-kicker img {
  height: 42px;
}
.home-title img {
  height: 57px;
}
.home-footer {
  position: absolute;
  z-index: 40;
  right: 0;
  bottom: var(--home-footer-bottom);
  left: 0;
  height: var(--home-footer-height);
  text-align: center;
}
.home-footer-inner {
  position: relative;
  width: min(375px, 100%);
  height: 100%;
  margin: 0 auto;
}
.home-copy {
  position: absolute;
  top: 16px;
  left: 77px;
  width: 221px;
  color: #592e00;
  font-size: 13px;
  line-height: 18px;
  white-space: nowrap;
  animation: footer-reveal 0.32s 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.stars {
  position: absolute;
  top: 20px;
  display: flex;
  align-items: center;
  gap: 3px;
  animation: fade-in 0.26s 0.72s ease both;
}
.stars-left {
  left: 58px;
}
.stars-right {
  right: 57px;
}
.stars img {
  width: 4px;
  height: 4px;
}
.stars .large-star {
  width: 10px;
  height: 10px;
}
.stars .rotate {
  transform: rotate(180deg);
}
.home-action {
  position: absolute;
  top: 60px;
  left: 44px;
  width: 288px;
  height: 60px;
  animation: footer-reveal 0.34s 0.82s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.home-action button {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 30px;
  background: transparent;
  padding: 0;
}
.home-action button:focus-visible {
  outline: 2px solid #b9934a;
  outline-offset: 2px;
}
.button-art {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: 30px;
  animation: cta-breathe 5s 1.3s ease-in-out infinite both;
  background: url(../assets/home-button.webp) no-repeat;
  background-size: 100%;
}
.button-art img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: none;
  height: 126px;
  object-fit: fill;
}
.home-disclaimer {
  position: absolute;
  top: 127px;
  left: 62px;
  width: 252px;
  margin: 0;
  color: #737373;
  font-size: 12px;
  line-height: 16px;
  animation: footer-reveal 0.3s 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes scene-reveal {
  0% {
    opacity: 0;
    transform: translate(-50%) translateY(5px) scale(1.02);
  }
  to {
    opacity: 1;
    transform: translate(-50%) translateY(0) scale(1);
  }
}
@keyframes content-reveal {
  0% {
    opacity: 0;
    transform: translate(-50%) translateY(10px);
  }
  to {
    opacity: 1;
    transform: translate(-50%) translateY(0);
  }
}
@keyframes footer-reveal {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes cloud-left {
  0% {
    opacity: 0.78;
    transform: translate(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(-50px, 18px) scale(0.97);
  }
}
@keyframes cloud-right {
  0% {
    opacity: 0.72;
    transform: translate(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(52px, 20px) scale(0.97);
  }
}
@keyframes cta-breathe {
  0%,
  to {
    transform: scale(0.985);
    box-shadow: 0 0 18px #c8a5732e;
  }
  50% {
    transform: scale(1.025);
    box-shadow: 0 0 40px 6px #c8a5736b;
  }
}
@media (min-height: 800px) {
  .home-scene {
    top: 0;
  }
}
@media (max-height: 700px) {
  .chat-home {
    --home-footer-height: 166px;
  }
  .home-scene {
    top: -48px;
    width: 452px;
    height: 812px;
  }
  .home-kicker {
    top: 84px;
  }
  .home-title {
    top: 132px;
  }
  .home-copy {
    top: 6px;
  }
  .stars {
    top: 10px;
  }
  .home-action {
    top: 47px;
  }
  .home-disclaimer {
    top: 111px;
  }
}
@media (max-height: 640px) {
  .chat-home {
    --home-footer-height: 152px;
  }
  .home-scene {
    top: -64px;
    width: 438px;
    height: 786px;
  }
  .home-kicker {
    top: 76px;
  }
  .home-title {
    top: 120px;
  }
  .home-copy {
    top: 0;
  }
  .stars {
    top: 4px;
  }
  .home-action {
    top: 39px;
  }
  .home-disclaimer {
    top: 101px;
  }
}
@media (max-width: 374px) {
  .home-footer-inner {
    transform: translate(-50%) scale(0.9);
    transform-origin: bottom center;
    left: 50%;
    width: 375px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-scene,
  .home-kicker,
  .home-title,
  .home-copy,
  .stars,
  .home-action,
  .home-disclaimer,
  .button-art {
    animation: none;
  }
}
.avatar-icon {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border-radius: 4px;
  background: #aaa778;
}
.avatar-icon img {
  width: 18px;
  height: 18px;
}
.section-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #141c05;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
}
.section-heading > span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #141c05;
}
.chat-test {
  display: flex;
  height: 100dvh;
  min-height: 100dvh;
  flex-direction: column;
  overflow: hidden;
  background: #f5f4ee;
}
.chat-scroll {
  position: relative;
  z-index: 10;
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: calc(20px + env(safe-area-inset-top)) 18px
    calc(28px + env(safe-area-inset-bottom));
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.chat-scroll::-webkit-scrollbar{
display: none;
}
.chat-content {
  position: relative;
  min-height: calc(
    100dvh - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom)
  );
}
.bottom-river {
  position: absolute;
  right: -18px;
  bottom: calc(-28px - env(safe-area-inset-bottom));
  width: 311px;
  height: 416px;
  pointer-events: none;
  mix-blend-mode: darken;
}
.message-stream {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 21px;
}
.assistant-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.assistant-content {
  min-width: 0;
  flex: 1;
  padding-top: 1px;
}
.message-in {
  animation: message-in 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.opening-message {
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.15px;
}
.opening-message p {
  margin: 0;
  color: #141c05;
}
.opening-message p + p {
  margin-top: 4px;
  color: #737373;
  white-space: pre-line;
}
.analysis-message {
  margin: 0;
  color: #737373;
  font-size: 14px;
  line-height: 20px;
}
.question-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 4px;
}
.question-title p {
  margin: 0;
  color: #141c05;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: -0.15px;
}
.question-title span {
  color: #a6a6a6;
  font-size: 12px;
  line-height: 18px;
}
.inline-options {
  margin-top: 15px;
  padding-right: 14px;
}
.option-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.option-list button {
  width: 100%;
  min-height: 38px;
  border: 1px solid #e9e7d1;
  border-radius: 6px;
  background: #ffffff52;
  color: #141c05;
  padding: 8px 13px;
  font-size: 14px;
  line-height: 18px;
  text-align: left;
  letter-spacing: -0.15px;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  animation: option-in 0.2s calc(var(--option-index) * 40ms) ease both;
}
.option-list button.selected {
  border-color: #aaa778;
  background: #ffffffd1;
  color: #592e00;
}
.option-list button:active {
  transform: scale(0.99);
}
.confirm-multiple {
  min-width: 164px;
  height: 32px;
  margin-top: 12px;
  border: 0;
  border-radius: 5px;
  background: #0d2830;
  color: #fff;
  padding: 0 12px;
  font-size: 14px;
}
.confirm-multiple:disabled,
.option-list button:disabled {
  opacity: 0.4;
}
.options-enter-active,
.options-leave-active {
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}
.options-enter-from,
.options-leave-to {
  opacity: 0;
  transform: translateY(6px);
}
.user-row {
  display: flex;
  justify-content: flex-end;
  margin-top: -17px;
  margin-left: 42px;
  padding-right: 14px;
  transform: translateY(6px);

}
.user-bubble {
  position: relative;
  max-width: calc(100% - 16px);
  border-radius: 12px 12px 2px;
  background: #eeead3;
  color: #592e00;
  padding: 9px 16px;
  font-size: 14px;
  line-height: 18px;
}
.user-bubble > span {
  position: absolute;
  right: -10px;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 10px solid #eeead3;
  border-left: 10px solid transparent;
}
.typing-dots {
  display: flex;
  height: 20px;
  align-items: center;
  gap: 5px;
}
.typing-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #aaa778;
  animation: typing 0.8s calc(var(--dot-index) * 0.12s) ease infinite;
}
.stream-end {
  height: 1px;
  flex: 0 0 1px;
}
.spirit-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 750 / 694;
  margin-bottom: 14px;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 18px 42px #592e001a;
}
.spirit-preview-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  transform: translateY(-9.78%);
}
.result-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
}
.result-title p,
.result-title strong {
  margin: 0;
  color: #141c05;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
}
.result-title strong {
  color: #592e00;
  font-size: 16px;
}
.spirit-identity {
  margin: 4px 0 0;
  color: #737373;
  font-size: 14px;
  line-height: 18px;
}
.result-declaration {
  margin: 8px 0 0;
  color: #141c05;
  font-size: 14px;
  font-weight: 600;
  line-height: 26px;
}
.result-summary {
  margin-top: 4px;
  color: #592e00;
  font-size: 12px;
  line-height: 22px;
}
.result-summary p {
  margin: 0;
}
.result-tags {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 4px;
}
.result-tags span {
  position: relative;
  display: grid;
  height: 32px;
  place-items: center;
  overflow: hidden;
  color: #592e00;
  font-size: 14px;
  line-height: 22px;
}
.result-tags img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.result-tags b {
  position: relative;
  font-weight: 400;
}
.indented-section {
  min-width: 0;
  margin-left: 42px;
}
.school-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
}
.school-card {
  position: relative;
  overflow: hidden;
  padding: 20px 14px;
}
.school-card > img,
.career-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.school-card-content {
  position: relative;
}
.school-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 16px;
}
.school-heading h3,
.school-card h4 {
  margin: 0;
  color: #141c05;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}
.school-heading span {
  color: #737373;
  font-size: 11px;
  line-height: 20px;
}
.school-card p {
  margin: 0;
  color: #141c05;
  font-size: 12px;
  line-height: 20px;
}
.school-card hr {
  height: 1px;
  margin: 12px 0;
  border: 0;
  background: #eee;
}
.school-card .program-en {
  margin-top: 8px;
  line-height: 18px;
}
.school-card .school-reason {
  margin-top: 8px;
  color: #737373;
  line-height: 18px;
}
.school-empty {
  margin-top: 8px;
  background: #fff9;
  color: #737373;
  padding: 20px 14px;
  font-size: 12px;
  line-height: 22px;
}
.career-card {
  position: relative;
  overflow: hidden;
  margin-top: 8px;
  padding: 16px 14px;
}
.career-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.career-list article > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
}
.career-list h3,
.career-list p {
  margin: 0;
}
.career-list h3 {
  color: #141c05;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
}
.career-list span {
  color: #9e1a00;
  font-size: 12px;
  line-height: 18px;
}
.career-list p {
  margin-top: 8px;
  color: #737373;
  font-size: 12px;
  line-height: 18px;
}
.result-actions h2,
.result-actions p {
  margin: 0;
}
.result-actions h2 {
  color: #141c05;
  font-size: 14px;
  font-weight: 600;
  line-height: 26px;
}
.result-actions > p {
  color: #592e00;
  font-size: 12px;
  line-height: 22px;
}
.primary-actions,
.link-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.primary-actions button {
  height: 32px;
  border: 0;
  border-radius: 4px;
  color: #fff;
  padding: 0 12px;
  font-size: 14px;
  line-height: 18px;
}
.consult-button {
  background: #0d2830;
  animation: consult-breathe 2.6s ease-in-out infinite;
}
.link-actions {
  column-gap: 20px;
  row-gap: 8px;
  margin-top: 8px;
}
.link-actions button {
  border: 0;
  background: transparent;
  color: #9e1a00;
  padding: 0;
  font-size: 14px;
  line-height: 23px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.link-actions button:disabled {
  opacity: 0.5;
}
.result-actions .action-feedback {
  margin-top: 8px;
  color: #737373;
  font-size: 12px;
  line-height: 20px;
}
@keyframes message-in {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes option-in {
  0% {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes typing {
  0%,
  to {
    opacity: 0.3;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-2px);
  }
}
@keyframes consult-breathe {
  0%,
  to {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1.5px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .message-in,
  .option-list button,
  .typing-dots span,
  .consult-button {
    animation-duration: 1ms;
    animation-iteration-count: 1;
  }
  .options-enter-active,
  .options-leave-active {
    transition-duration: 1ms;
  }
}
.modal-mask {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0000004d;
  padding: 20px 26px;
  animation: modal-mask-in 0.18s ease both;
}
.paper-modal {
  position: relative;
  width: 100%;
  max-width: 323px;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 24px 70px #2a28253d;
  animation: modal-in 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;
  background: #f7f7f5;
}
.paper-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.modal-content {
  position: relative;
}
.lead-modal {
  padding: 36px 20px 28px;
}
.modal-close {
  position: absolute;
  z-index: 10;
  top: 24px;
  right: 20px;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 0;
  background: transparent;
  padding: 0;
}
.modal-close img {
  width: 13px;
  height: 13px;
}
.lead-modal h2,
.lead-modal p {
  margin: 0;
  text-align: left;
}
.lead-modal h2 {
  padding-right: 32px;
  color: #141c05;
  font-size: 16px;
  font-weight: 600;
  line-height: 18px;
}
.lead-modal p {
  margin-top: 12px;
  color: #592e00;
  font-size: 12px;
  line-height: 22px;
}
.qr-frame {
  width: 214px;
  margin: 24px auto 0;
  border-radius: 18px;
  background: #ffffffb8;
  padding: 10px;
  box-shadow: 0 14px 36px #50472d1f;
}
.qr-frame img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
}
.lead-modal .modal-hint {
  margin-top: 16px;
  color: #737373;
  text-align: center;
}
.confirm-mask {
  padding: 0 42px;
}
.confirm-modal {
  max-width: 291px;
  padding: 24px 24px 20px;
  text-align: center;
  box-shadow: 0 20px 60px #2a28253d;
}
.confirm-modal h2,
.confirm-modal p {
  margin: 0;
}
.confirm-modal h2 {
  color: #141c05;
  font-size: 16px;
  line-height: 24px;
}
.confirm-modal p {
  margin-top: 8px;
  color: #737373;
  font-size: 12px;
  line-height: 20px;
}
.confirm-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}
.confirm-actions button {
  height: 38px;
  border: 1px solid #e9e7d1;
  border-radius: 6px;
  background: #ffffff8c;
  color: #592e00;
  font-size: 14px;
}
.confirm-actions button:last-child {
  border-color: #0d2830;
  background: #0d2830;
  color: #fff;
}
.share-guide-mask {
  position: fixed;
  z-index: 1020;
  inset: 0;
  background: #0000009e;
  animation: modal-mask-in 0.18s ease both;
}
.share-guide {
  position: relative;
  width: 100%;
  height: 100%;
  color: #fff7d8;
}
.share-guide-menu {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  right: 20px;
  display: grid;
  min-width: 52px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(255, 247, 216, 0.45);
  border-radius: 999px;
  background: #ffffff1f;
  color: #fff;
  font-size: 18px;
  letter-spacing: 2px;
  line-height: 1;
}
.share-guide-arrow {
  position: absolute;
  z-index: 1;
  top: max(20px, calc(env(safe-area-inset-top) + 14px));
  right: 42px;
  width: 150px;
  height: 100px;
  overflow: visible;
  color: #fff7d8f0;
  pointer-events: none;
}
.share-guide-arrow-line,
.share-guide-arrow-head {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.share-guide-content {
  position: absolute;
  z-index: 2;
  top: max(132px, calc(env(safe-area-inset-top) + 116px));
  right: 26px;
  left: 26px;
  max-width: 340px;
  margin: 0 auto;
  border: 1px solid rgba(255, 247, 216, 0.28);
  border-radius: 12px;
  background: #0d2830e0;
  padding: 22px 20px 18px;
  box-shadow: 0 24px 70px #00000057;
  text-align: center;
  animation: modal-in 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.share-guide-content h2,
.share-guide-content p {
  margin: 0;
}
.share-guide-content h2 {
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  line-height: 26px;
}
.share-guide-content p {
  margin-top: 8px;
  color: #fff7d8db;
  font-size: 13px;
  line-height: 21px;
}
.share-guide-content button {
  width: 128px;
  height: 38px;
  margin-top: 18px;
  border: 0;
  border-radius: 999px;
  background: #fff7d8;
  color: #0d2830;
  font-size: 14px;
}
.preview-mask {
  z-index: 1010;
  background: #00000073;
  padding: 18px 20px;
}
.preview-modal {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 323px;
  max-height: 94svh;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  background: #f5f4ee;
  box-shadow: 0 24px 70px #2a282547;
  animation: modal-in 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.preview-modal .modal-close {
  top: 16px;
  right: 16px;
}
.preview-header {
  flex: 0 0 auto;
  padding: 16px 20px 10px;
}
.preview-header h2,
.preview-header p {
  margin: 0;
}
.preview-header h2 {
  color: #141c05;
  font-size: 16px;
  font-weight: 400;
}
.preview-header p {
  margin-top: 4px;
  color: #737373;
  font-size: 12px;
  line-height: 20px;
}
.preview-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: visible;
  background: #eee8dc;
  padding: 10px 12px 14px;
}
.preview-body img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: calc(94svh - 110px);
  height: auto;
  object-fit: contain;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 10px 25px #2a282533;
  -webkit-touch-callout: default;
  user-select: auto;
}
@keyframes modal-mask-in {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes modal-in {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .modal-mask,
  .paper-modal,
  .preview-modal,
  .share-guide-mask,
  .share-guide-content {
    animation-duration: 1ms;
  }
}
.nenglume-shell {
  min-height: 100dvh;
  width: 100%;
  overflow-x: clip;
  background: #f7f7f5;
  color: #2a2825;
}
.nenglume-stage {
  min-height: 100dvh;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  overflow-x: clip;
  background: #f8f4ea;
  box-shadow: 0 0 60px #2a282529;
}
.screen-enter-active,
.screen-leave-active {
  transition: opacity 0.18s ease;
}
.screen-enter-from,
.screen-leave-to {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .screen-enter-active,
  .screen-leave-active {
    transition-duration: 1ms;
  }
}