:root {  
  color-scheme: dark;

  --room-black: #20221f;  
  --room-deep: #292b27;  
  --room-green: #41483d;  
  --room-brown: #5b4c3f;  
  --dust-brown: #756654;

  --cream: #f7f1e5;  
  --cream-soft: #e9dfce;  
  --ink: #2e2c29;  
  --ink-soft: #625d55;

  --gold: #e2bd73;  
  --gold-light: #f4dda3;  
  --sage: #9fac8d;  
  --moss: #77836c;  
  --rose: #c99e96;  
  --lavender: #aaa0bd;  
  --sky: #9eb5bd;

  --glass-light: rgba(255, 250, 240, 0.76);  
  --glass-mid: rgba(255, 250, 240, 0.58);  
  --glass-border: rgba(255, 255, 255, 0.68);

  --radius-small: 14px;  
  --radius-medium: 24px;  
  --radius-large: 36px;

  --shadow:  
    0 30px 90px rgba(0, 0, 0, 0.34),  
    inset 0 1px 0 rgba(255, 255, 255, 0.72);

  --transition: 180ms ease;  
}

* {  
  box-sizing: border-box;  
}

html {  
  min-height: 100%;  
  background: var(--room-deep);  
}

body {  
  min-height: 100vh;  
  margin: 0;  
  overflow-x: hidden;  
  color: var(--ink);  
  font-family:  
    -apple-system,  
    BlinkMacSystemFont,  
    "Segoe UI",  
    "PingFang TC",  
    "Noto Sans TC",  
    "Microsoft JhengHei",  
    sans-serif;  
  line-height: 1.72;  
  background:  
    linear-gradient(  
      rgba(30, 32, 29, 0.44),  
      rgba(30, 32, 29, 0.6)  
    ),  
    url("assets/backgrounds/corner-creature-background.webp")  
      center top / cover fixed no-repeat,  
    radial-gradient(  
      circle at 50% 18%,  
      rgba(226, 189, 115, 0.42),  
      transparent 25%  
    ),  
    linear-gradient(  
      145deg,  
      #33372f 0%,  
      #252722 53%,  
      #171916 100%  
    );  
}

button,  
a {  
  font: inherit;  
}

button {  
  color: inherit;  
}

button:focus-visible,  
a:focus-visible {  
  outline: 3px solid rgba(226, 189, 115, 0.75);  
  outline-offset: 3px;  
}

.room-background {  
  position: fixed;  
  inset: 0;  
  z-index: -1;  
  overflow: hidden;  
  pointer-events: none;  
}

.light-beam {  
  position: absolute;  
  width: min(72vw, 560px);  
  height: 110vh;  
  left: 50%;  
  top: -26%;  
  opacity: 0.3;  
  transform: translateX(-50%);  
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);  
  background:  
    linear-gradient(  
      to bottom,  
      rgba(255, 236, 186, 0.75),  
      rgba(226, 189, 115, 0.22) 55%,  
      transparent  
    );  
  filter: blur(18px);  
}

.dust {  
  position: absolute;  
  display: block;  
  border-radius: 50%;  
  background: rgba(255, 229, 167, 0.72);  
  box-shadow: 0 0 13px rgba(255, 221, 142, 0.55);  
  animation: drift 8s ease-in-out infinite;  
}

.dust-one {  
  width: 5px;  
  height: 5px;  
  left: 43%;  
  top: 18%;  
}

.dust-two {  
  width: 3px;  
  height: 3px;  
  right: 43%;  
  top: 31%;  
  animation-delay: -2s;  
}

.dust-three {  
  width: 7px;  
  height: 7px;  
  left: 47%;  
  top: 49%;  
  animation-delay: -5s;  
}

.dust-four {  
  width: 4px;  
  height: 4px;  
  right: 47%;  
  top: 65%;  
  animation-delay: -3s;  
}

.clutter-shape {  
  position: absolute;  
  display: block;  
  border-radius: 32% 44% 28% 40%;  
  opacity: 0.35;  
  background:  
    linear-gradient(  
      145deg,  
      rgba(130, 118, 94, 0.76),  
      rgba(61, 67, 57, 0.72)  
    );  
  box-shadow:  
    inset 10px 8px 18px rgba(255, 255, 255, 0.05),  
    0 22px 45px rgba(0, 0, 0, 0.27);  
  filter: blur(0.5px);  
}

.clutter-one {  
  width: 180px;  
  height: 110px;  
  left: -42px;  
  bottom: 9%;  
  transform: rotate(14deg);  
}

.clutter-two {  
  width: 130px;  
  height: 170px;  
  right: -24px;  
  bottom: 18%;  
  transform: rotate(-13deg);  
}

.clutter-three {  
  width: 96px;  
  height: 82px;  
  left: 7%;  
  top: 20%;  
  opacity: 0.22;  
  transform: rotate(-18deg);  
}

.clutter-four {  
  width: 110px;  
  height: 74px;  
  right: 8%;  
  top: 12%;  
  opacity: 0.2;  
  transform: rotate(12deg);  
}

.fluffy-cloud {  
  position: absolute;  
  display: block;  
  width: 42px;  
  height: 24px;  
  border-radius: 999px;  
  opacity: 0.45;  
  background: rgba(245, 232, 201, 0.66);  
  filter: blur(2px);  
  animation: drift 10s ease-in-out infinite;  
}

.fluffy-cloud::before,  
.fluffy-cloud::after {  
  content: "";  
  position: absolute;  
  border-radius: 50%;  
  background: inherit;  
}

.fluffy-cloud::before {  
  width: 24px;  
  height: 24px;  
  left: 7px;  
  top: -10px;  
}

.fluffy-cloud::after {  
  width: 20px;  
  height: 20px;  
  right: 5px;  
  top: -7px;  
}

.cloud-one {  
  left: 28%;  
  top: 29%;  
}

.cloud-two {  
  right: 29%;  
  top: 48%;  
  transform: scale(0.7);  
  animation-delay: -4s;  
}

.site-shell {  
  width: min(100% - 28px, 790px);  
  margin: 0 auto;  
  padding:  
    max(24px, env(safe-area-inset-top))  
    0  
    max(36px, env(safe-area-inset-bottom));  
}

.brand-header {  
  padding: 10px 4px 22px;  
  color: var(--cream);  
  text-align: center;  
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.65);  
}

.brand-name,  
.brand-location {  
  margin: 0;  
}

.brand-name {  
  font-size: 0.96rem;  
  font-weight: 720;  
  letter-spacing: 0.15em;  
}

.brand-location {  
  margin-top: 4px;  
  color: rgba(247, 241, 229, 0.7);  
  font-size: 0.7rem;  
  letter-spacing: 0.11em;  
  text-transform: uppercase;  
}

.glass-panel {  
  border: 1px solid var(--glass-border);  
  background:  
    linear-gradient(  
      145deg,  
      var(--glass-light),  
      var(--glass-mid)  
    );  
  box-shadow: var(--shadow);  
  backdrop-filter: blur(25px) saturate(112%);  
  -webkit-backdrop-filter: blur(25px) saturate(112%);  
}

.app-panel {  
  min-height: 520px;  
  padding: clamp(24px, 5vw, 52px);  
  border-radius: var(--radius-large);  
}

.eyebrow {  
  margin: 0 0 12px;  
  color: #79633c;  
  font-size: 0.8rem;  
  font-weight: 760;  
  letter-spacing: 0.13em;  
  text-transform: uppercase;  
}

h1,  
h2,  
h3 {  
  line-height: 1.32;  
}

h1 {  
  margin: 0;  
  font-size: clamp(2rem, 7vw, 3.25rem);  
  letter-spacing: -0.043em;  
}

h2 {  
  margin: 0;  
  font-size: clamp(1.65rem, 5vw, 2.45rem);  
  letter-spacing: -0.025em;  
}

h3 {  
  margin: 28px 0 8px;  
  font-size: 1.08rem;  
}

.lead {  
  max-width: 630px;  
  margin: 22px 0 0;  
  color: var(--ink-soft);  
  font-size: clamp(1rem, 2.7vw, 1.1rem);  
}

.quote-line {  
  margin: 28px 0;  
  padding: 17px 20px;  
  border-left: 4px solid rgba(188, 148, 76, 0.68);  
  border-radius:  
    0  
    var(--radius-small)  
    var(--radius-small)  
    0;  
  color: #4f493f;  
  background: rgba(255, 248, 232, 0.47);  
  font-weight: 650;  
}

.disclaimer {  
  margin: 22px 0 0;  
  color: #777066;  
  font-size: 0.84rem;  
}

.progress-wrap {  
  margin-bottom: 32px;  
}

.progress-meta {  
  display: flex;  
  justify-content: space-between;  
  gap: 16px;  
  margin-bottom: 9px;  
  color: #777066;  
  font-size: 0.82rem;  
}

.progress-track {  
  height: 9px;  
  overflow: hidden;  
  border-radius: 999px;  
  background: rgba(91, 77, 61, 0.12);  
  box-shadow: inset 0 1px 4px rgba(50, 44, 37, 0.12);  
}

.progress-bar {  
  height: 100%;  
  border-radius: inherit;  
  background:  
    linear-gradient(  
      90deg,  
      #77836c,  
      #b99a64,  
      #d7b57a  
    );  
  transition: width 260ms ease;  
}

.question-title {  
  margin-bottom: 24px;  
}

.answer-list {  
  display: grid;  
  gap: 13px;  
}

.answer-button {  
  width: 100%;  
  padding: 17px 18px;  
  border: 1px solid rgba(255, 255, 255, 0.64);  
  border-radius: 19px;  
  color: var(--ink);  
  text-align: left;  
  cursor: pointer;  
  background:  
    linear-gradient(  
      145deg,  
      rgba(255, 252, 245, 0.74),  
      rgba(244, 236, 220, 0.5)  
    );  
  box-shadow:  
    0 10px 24px rgba(58, 48, 38, 0.08),  
    inset 0 1px 0 rgba(255, 255, 255, 0.76);  
  transition:  
    transform var(--transition),  
    border-color var(--transition),  
    background var(--transition),  
    box-shadow var(--transition);  
}

.answer-button:hover {  
  transform: translateY(-2px);  
  border-color: rgba(171, 134, 72, 0.56);  
  box-shadow:  
    0 14px 29px rgba(58, 48, 38, 0.13),  
    inset 0 1px 0 rgba(255, 255, 255, 0.84);  
}

.answer-button.is-selected {  
  border-color: rgba(160, 123, 62, 0.78);  
  background:  
    linear-gradient(  
      135deg,  
      rgba(244, 225, 184, 0.87),  
      rgba(255, 250, 237, 0.7)  
    );  
  box-shadow:  
    0 13px 29px rgba(77, 59, 37, 0.14),  
    inset 0 0 0 2px rgba(165, 127, 64, 0.13);  
}

.action-row {  
  display: flex;  
  flex-wrap: wrap;  
  gap: 12px;  
  margin-top: 30px;  
}

.primary-button,  
.secondary-button,  
.text-button {  
  min-height: 48px;  
  padding: 12px 20px;  
  border-radius: 999px;  
  cursor: pointer;  
  transition:  
    transform var(--transition),  
    opacity var(--transition),  
    box-shadow var(--transition);  
}

.primary-button {  
  border: 1px solid rgba(117, 93, 51, 0.25);  
  color: #fffaf0;  
  background:  
    linear-gradient(  
      135deg,  
      #69745e,  
      #88704b 56%,  
      #b98c59  
    );  
  box-shadow: 0 12px 25px rgba(62, 49, 32, 0.27);  
}

.secondary-button {  
  border: 1px solid rgba(126, 100, 59, 0.3);  
  color: var(--ink);  
  background: rgba(255, 251, 241, 0.62);  
}

.text-button {  
  border: 0;  
  color: var(--ink-soft);  
  background: transparent;  
}

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

.primary-button:disabled,  
.secondary-button:disabled {  
  cursor: not-allowed;  
  opacity: 0.46;  
  transform: none;  
}

.creature-stage {  
  position: relative;  
  display: grid;  
  place-items: center;  
  width: min(100%, 420px);  
  min-height: 360px;  
  margin: 4px auto 28px;  
  overflow: hidden;  
  border: 1px solid rgba(255, 255, 255, 0.57);  
  border-radius: 38px;  
  background:  
    radial-gradient(  
      circle at 50% 30%,  
      rgba(246, 219, 155, 0.65),  
      rgba(88, 82, 68, 0.25) 49%,  
      rgba(39, 41, 36, 0.62) 100%  
    );  
  box-shadow:  
    inset 0 1px 0 rgba(255, 255, 255, 0.64),  
    0 22px 55px rgba(48, 39, 30, 0.17);  
}

.creature-stage::before {  
  content: "";  
  position: absolute;  
  width: 285px;  
  height: 110px;  
  bottom: 24px;  
  border-radius: 50%;  
  background: rgba(13, 14, 12, 0.42);  
  filter: blur(10px);  
}

.creature-image {  
  position: relative;  
  z-index: 2;  
  display: block;  
  width: min(78%, 310px);  
  max-height: 310px;  
  object-fit: contain;  
  filter:  
    drop-shadow(0 26px 23px rgba(0, 0, 0, 0.33));  
}

.creature-image[hidden] {  
  display: none;  
}

.creature-token {  
  --creature-a: #b9c6d0;  
  --creature-b: #dbc19a;  
  --creature-c: #9cac8e;

  position: relative;  
  z-index: 1;  
  display: grid;  
  place-items: center;  
  width: 190px;  
  aspect-ratio: 1;  
  border: 1px solid rgba(255, 255, 255, 0.62);  
  border-radius: 48% 52% 46% 54% / 51% 43% 57% 49%;  
  color: rgba(54, 50, 44, 0.74);  
  font-size: 3.5rem;  
  font-weight: 750;  
  background:  
    repeating-radial-gradient(  
      circle at 40% 36%,  
      rgba(255, 255, 255, 0.13) 0,  
      rgba(255, 255, 255, 0.13) 2px,  
      transparent 2px,  
      transparent 7px  
    ),  
    radial-gradient(  
      circle at 32% 27%,  
      rgba(255, 255, 255, 0.94),  
      rgba(255, 255, 255, 0.37) 17%,  
      transparent 29%  
    ),  
    linear-gradient(  
      145deg,  
      var(--creature-a),  
      var(--creature-b) 54%,  
      var(--creature-c)  
    );  
  box-shadow:  
    0 31px 50px rgba(0, 0, 0, 0.3),  
    inset 15px 13px 25px rgba(255, 255, 255, 0.34),  
    inset -18px -22px 31px rgba(65, 55, 43, 0.15);  
  animation: creature-breathe 6s ease-in-out infinite;  
}

.creature-token::before,  
.creature-token::after {  
  content: "";  
  position: absolute;  
  top: 42%;  
  width: 20px;  
  height: 25px;  
  border-radius: 50%;  
  background:  
    radial-gradient(  
      circle at 37% 35%,  
      #fff 0,  
      #fff 14%,  
      #3b3833 17%,  
      #3b3833 58%,  
      #171714 62%  
    );  
  box-shadow: 0 4px 8px rgba(40, 35, 29, 0.18);  
}

.creature-token::before {  
  left: 29%;  
}

.creature-token::after {  
  right: 29%;  
}

.creature-label {  
  position: absolute;  
  z-index: 3;  
  bottom: 18px;  
  color: rgba(255, 247, 226, 0.72);  
  font-size: 0.72rem;  
  letter-spacing: 0.11em;  
  text-transform: uppercase;  
}

.creature-token.seed-0 {  
  --creature-a: #c5cbd7;  
  --creature-b: #dac6a7;  
  --creature-c: #a5b2be;  
}

.creature-token.seed-1 {  
  --creature-a: #d7d0bd;  
  --creature-b: #a7b6ac;  
  --creature-c: #b6a5bd;  
}

.creature-token.seed-2 {  
  --creature-a: #c49da6;  
  --creature-b: #d8b97f;  
  --creature-c: #8ea091;  
}

.creature-token.seed-3 {  
  --creature-a: #bb8068;  
  --creature-b: #d1a365;  
  --creature-c: #7d8d6e;  
}

.creature-token.seed-4 {  
  --creature-a: #9ebabe;  
  --creature-b: #c4d0c3;  
  --creature-c: #af9eb9;  
}

.creature-token.seed-5 {  
  --creature-a: #d2b4a5;  
  --creature-b: #d6c68f;  
  --creature-c: #9eb8ad;  
}

.creature-token.seed-6 {  
  --creature-a: #9fb7bd;  
  --creature-b: #c8c4aa;  
  --creature-c: #a99eb8;  
}

.creature-token.seed-7 {  
  --creature-a: #afa995;  
  --creature-b: #c69368;  
  --creature-c: #84978c;  
  border-radius: 30%;  
}

.creature-token.seed-8 {  
  --creature-a: #b99f83;  
  --creature-b: #d2b16f;  
  --creature-c: #a7969f;  
}

.creature-token.seed-9 {  
  --creature-a: #ab8f7f;  
  --creature-b: #c9af69;  
  --creature-c: #7fa5a1;  
}

.result-section {  
  margin-top: 28px;  
}

.result-section p {  
  margin: 8px 0 0;  
  color: var(--ink-soft);  
}

.strength-list,  
.action-examples {  
  padding-left: 1.25rem;  
  color: var(--ink-soft);  
}

.strength-list li,  
.action-examples li {  
  margin: 5px 0;  
}

.balance-card,  
.oya-note,  
.warning-note,  
.nearby-result {  
  margin-top: 20px;  
  padding: 19px 20px;  
  border-radius: var(--radius-medium);  
}

.balance-card {  
  border: 1px solid rgba(133, 154, 122, 0.55);  
  background: rgba(222, 232, 211, 0.53);  
}

.oya-note {  
  border: 1px solid rgba(176, 149, 100, 0.5);  
  background: rgba(243, 226, 189, 0.48);  
}

.warning-note {  
  border: 1px solid rgba(157, 127, 91, 0.42);  
  background: rgba(231, 215, 194, 0.46);  
}

.nearby-result {  
  color: var(--ink-soft);  
  background: rgba(255, 251, 241, 0.48);  
}

.cta-grid {  
  display: grid;  
  gap: 13px;  
  margin-top: 28px;  
}

.cta-card {  
  padding: 19px;  
  border: 1px solid rgba(255, 255, 255, 0.65);  
  border-radius: var(--radius-medium);  
  background: rgba(255, 251, 241, 0.45);  
}

.cta-card h3 {  
  margin-top: 0;  
}

.cta-card p {  
  margin: 5px 0 16px;  
  color: var(--ink-soft);  
  font-size: 0.94rem;  
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.service-list {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.service-list li {
  display: grid;
  gap: 2px;
  padding-top: 10px;
  border-top: 1px solid rgba(126, 100, 59, 0.18);
}

.service-list span {
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.share-card-preview {
  margin-top: 30px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: var(--radius-medium);
  background: rgba(255, 251, 241, 0.52);
}

.share-card-preview[hidden] {
  display: none;
}

.share-card-preview h3 {
  margin-top: 0;
}

.share-card-preview img {
  display: block;
  width: min(100%, 432px);
  height: auto;
  margin: 0 auto 18px;
  border-radius: 20px;
  box-shadow: 0 16px 38px rgba(48, 39, 30, 0.2);
}

.download-share-card {
  display: flex;
  width: fit-content;
  margin: 0 auto;
  text-decoration: none;
}

.site-footer {  
  padding: 25px 12px 4px;  
  color: rgba(247, 241, 229, 0.67);  
  text-align: center;  
  font-size: 0.77rem;  
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75);  
}

.site-footer p {  
  margin: 3px 0;  
}

.toast {  
  position: fixed;  
  z-index: 20;  
  left: 50%;  
  bottom: max(24px, env(safe-area-inset-bottom));  
  width: min(calc(100% - 32px), 440px);  
  padding: 14px 18px;  
  border: 1px solid rgba(255, 255, 255, 0.72);  
  border-radius: 999px;  
  color: var(--ink);  
  text-align: center;  
  background: rgba(255, 249, 236, 0.9);  
  box-shadow: 0 16px 40px rgba(26, 22, 17, 0.32);  
  backdrop-filter: blur(18px);  
  transform: translateX(-50%);  
}

.noscript-message {  
  max-width: 600px;  
  margin: 40px auto;  
  padding: 24px;  
  color: var(--cream);  
  text-align: center;  
}

@keyframes drift {  
  0%,  
  100% {  
    transform: translateY(0) translateX(0);  
  }

  50% {  
    transform: translateY(-13px) translateX(5px);  
  }  
}

@keyframes creature-breathe {  
  0%,  
  100% {  
    transform: translateY(0) scale(1);  
  }

  50% {  
    transform: translateY(-7px) scale(1.018);  
  }  
}

@media (min-width: 700px) {  
  .cta-grid {  
    grid-template-columns: repeat(3, minmax(0, 1fr));  
  }  
}

@media (max-width: 520px) {  
  body {  
    background-attachment: scroll;  
  }

  .site-shell {  
    width: min(100% - 18px, 790px);  
  }

  .app-panel {  
    min-height: 480px;  
    padding: 23px 19px;  
    border-radius: 27px;  
  }

  .action-row {  
    display: grid;  
    grid-template-columns: 1fr;  
  }

  .primary-button,  
  .secondary-button,  
  .text-button {  
    width: 100%;  
  }

  .cta-actions {
    display: grid;
  }

  .creature-stage {  
    min-height: 300px;  
  }

  .creature-token {  
    width: 160px;  
  }  
}

@media (prefers-reduced-motion: reduce) {  
  *,  
  *::before,  
  *::after {  
    scroll-behavior: auto !important;  
    animation-duration: 0.01ms !important;  
    animation-iteration-count: 1 !important;  
    transition-duration: 0.01ms !important;  
  }  
}