:root {
  --ink: #2d1d10;
  --ink-soft: #63472a;
  --paper: #fff9dd;
  --paper-warm: #ffe889;
  --line: rgba(45, 29, 16, .16);
  --blue: #7bb5de;
  --blue-deep: #5c3b99;
  --blue-dark: #2b1b4a;
  --yellow: #ffc928;
  --yellow-bright: #ffe66d;
  --moss: #9aa84f;
  --orange: #ef6a4f;
  --serif: 'Shippori Mincho', 'Noto Serif TC', Georgia, serif;
  --sans: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --mono: 'DM Mono', 'SFMono-Regular', Consolas, monospace;
  --radius: 24px;
  --shadow: 0 20px 60px rgba(22, 38, 68, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); line-height: 1.75; }
button, a { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 100; padding: 8px 14px; border-radius: 99px; color: white; background: var(--blue-dark); transition: top .2s; }
.skip-link:focus { top: 16px; }

/* Entry screen: a small starry waiting room while the offline page loads. */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff9dd;
  background: #1d1542;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
.page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.page-loader::before {
  content: '';
  position: absolute;
  inset: -15%;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,230,109,.22), transparent 22%),
    radial-gradient(circle at 15% 82%, rgba(123,181,222,.22), transparent 24%),
    radial-gradient(circle at 87% 18%, rgba(229,107,140,.2), transparent 25%);
  animation: loader-glow-drift 8s ease-in-out infinite alternate;
}
.loader-stars {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: .82;
  background-image:
    radial-gradient(circle, rgba(255,249,221,.9) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(255,230,109,.75) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(123,181,222,.65) 0 1px, transparent 1.7px);
  background-position: 8% 15%, 42% 67%, 81% 31%;
  background-size: 105px 105px, 155px 155px, 185px 185px;
  animation: loader-starfield 14s linear infinite;
}
.loader-stars span {
  position: absolute;
  color: var(--yellow-bright);
  font-family: Georgia, serif;
  font-size: clamp(15px, 2.5vw, 28px);
  text-shadow: 0 0 18px rgba(255,230,109,.8);
  animation: loader-twinkle 2.4s ease-in-out infinite;
}
.loader-stars span:nth-child(1) { left: 12%; top: 17%; }
.loader-stars span:nth-child(2) { left: 24%; top: 72%; animation-delay: -.7s; }
.loader-stars span:nth-child(3) { left: 38%; top: 14%; animation-delay: -1.2s; }
.loader-stars span:nth-child(4) { left: 48%; top: 82%; animation-delay: -.4s; }
.loader-stars span:nth-child(5) { left: 68%; top: 18%; animation-delay: -1.7s; }
.loader-stars span:nth-child(6) { left: 83%; top: 70%; animation-delay: -.9s; }
.loader-stars span:nth-child(7) { left: 91%; top: 42%; animation-delay: -1.4s; }
.loader-stars span:nth-child(8) { left: 7%; top: 52%; animation-delay: -.2s; }
.loader-stars span:nth-child(9) { left: 59%; top: 9%; animation-delay: -1.9s; }
.loader-stars span:nth-child(10) { left: 74%; top: 89%; animation-delay: -.5s; }
.loader-stars span:nth-child(11) { left: 31%; top: 38%; animation-delay: -1.1s; }
.loader-stars span:nth-child(12) { left: 96%; top: 12%; animation-delay: -1.6s; }
.loader-card {
  position: relative;
  z-index: 1;
  width: min(430px, calc(100vw - 42px));
  padding: 33px 32px 27px;
  border: 1px solid rgba(255,249,221,.25);
  border-radius: 30px;
  background: rgba(255,249,221,.1);
  box-shadow: 0 22px 70px rgba(8,4,34,.4), inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  text-align: center;
}
.loader-kicker {
  margin: 0 0 8px;
  color: rgba(255,230,109,.82);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
}
.loader-big-star {
  color: var(--yellow-bright);
  font-size: clamp(62px, 12vw, 94px);
  line-height: 1;
  text-shadow: 0 0 30px rgba(255,230,109,.72), 0 10px 24px rgba(8,4,34,.32);
  animation: loader-star-breathe 1.8s ease-in-out infinite;
}
.loader-card h1 {
  margin: 13px 0 2px;
  color: #fff9dd;
  font-family: var(--serif);
  font-size: clamp(25px, 5vw, 34px);
}
.loader-message {
  min-height: 31px;
  margin: 0 0 25px;
  color: rgba(255,249,221,.7);
  font-size: 13px;
}
.loader-progress {
  position: relative;
  height: 12px;
  margin: 0 12px;
  border: 1px solid rgba(255,249,221,.35);
  border-radius: 99px;
  background: rgba(8,4,34,.32);
}
.loader-progress-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7bb5de, #ffe66d);
  box-shadow: 0 0 16px rgba(255,230,109,.52);
  transition: width .12s ease-out;
}
.loader-progress-star {
  position: absolute;
  top: 50%;
  left: -12px;
  color: #ffe66d;
  font-size: 25px;
  line-height: 1;
  text-shadow: 0 0 16px rgba(255,230,109,.9);
  transform: translateY(-50%);
  transition: left .12s ease-out;
}
.loader-percent {
  margin: 13px 0 0;
  color: rgba(255,249,221,.55);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
}
@keyframes loader-starfield {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-18px, 14px, 0) scale(1.04); }
}
@keyframes loader-glow-drift {
  from { transform: translate3d(-2%, 1%, 0) rotate(-2deg) scale(1); }
  to { transform: translate3d(2%, -2%, 0) rotate(2deg) scale(1.08); }
}
@keyframes loader-twinkle {
  0%, 100% { opacity: .3; transform: scale(.72) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.16) rotate(16deg); }
}
@keyframes loader-star-breathe {
  0%, 100% { transform: translateY(0) rotate(-5deg) scale(.94); }
  50% { transform: translateY(-7px) rotate(5deg) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .loader-stars,
  .loader-stars span,
  .loader-big-star,
  .page-loader::before { animation: none; }
}

.site-header { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 78px; padding: 0 4.5vw; border-bottom: 1px solid rgba(255,255,255,.1); color: white; background: rgba(16, 28, 55, .94); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 9px; min-width: 235px; }
.brand-mark { color: var(--yellow-bright); font-size: 25px; line-height: 1; }
.brand-name { font-family: var(--serif); font-size: 21px; letter-spacing: .16em; }
.brand-subtitle { margin-left: 3px; color: rgba(255,255,255,.48); font-family: var(--mono); font-size: 9px; letter-spacing: .14em; }
.site-nav { display: flex; align-items: center; gap: clamp(14px, 2.5vw, 36px); color: rgba(255,255,255,.68); font-size: 13px; }
.site-nav a { transition: color .2s; }
.site-nav a:hover { color: white; }
.cart-button { display: inline-flex; align-items: center; gap: 10px; padding: 9px 0 9px 14px; border: 0; color: white; background: transparent; font-size: 13px; }
.cart-count { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; color: var(--blue-dark); background: var(--yellow); font-family: var(--mono); font-size: 11px; }

.hero-section { position: relative; min-height: min(780px, calc(100vh - 78px)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(370px, .95fr); align-items: center; gap: 8vw; overflow: hidden; padding: 84px 10vw 100px; color: white; background: var(--blue-dark); }
.hero-section::before { content: ''; position: absolute; inset: 0; opacity: .34; background-image: radial-gradient(rgba(255,255,255,.42) 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(90deg, black, transparent 75%); }
.hero-section::after { content: ''; position: absolute; right: -8%; bottom: -28%; width: 75vw; height: 65vw; border-radius: 50%; background: radial-gradient(circle, rgba(123,181,222,.14), transparent 64%); }
.hero-stars, .hero-copy, .hero-art { position: relative; z-index: 1; }
.star-dot { position: absolute; color: var(--yellow-bright); opacity: .75; font-family: var(--serif); }
.star-dot-a { top: 11%; left: 6%; font-size: 23px; }.star-dot-b { top: 20%; left: 45%; font-size: 28px; }.star-dot-c { top: 78%; left: 3%; font-size: 37px; }.star-dot-d { right: 42%; bottom: 11%; font-size: 25px; }.star-dot-e { top: 14%; right: 8%; font-size: 24px; }
.eyebrow { margin: 0 0 18px; color: var(--orange); font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.hero-section .eyebrow, .quiz-card .eyebrow, .drawer-header .eyebrow { color: var(--yellow-bright); }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--serif); font-weight: 700; letter-spacing: -.03em; line-height: 1.12; }
h1 { max-width: 610px; margin-bottom: 25px; font-size: clamp(52px, 7.5vw, 104px); }
h1 em, h2 em { color: var(--yellow-bright); font-style: normal; }
.hero-lede { max-width: 475px; margin-bottom: 30px; color: rgba(255,255,255,.73); font-size: 16px; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 19px; border: 1px solid transparent; border-radius: 100px; font-size: 13px; font-weight: 700; transition: transform .2s, background .2s, color .2s, box-shadow .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: var(--blue-dark); background: var(--yellow-bright); box-shadow: 0 10px 25px rgba(255,216,109,.18); }
.button-primary:hover { background: white; }
.button-quiet { color: rgba(255,255,255,.82); border-color: rgba(255,255,255,.25); }
.button-quiet:hover { color: white; border-color: white; }
.hero-reaction { display: inline-flex; align-items: center; gap: 9px; margin: 25px 0 0; color: rgba(255,255,255,.47); font-family: var(--mono); font-size: 10px; letter-spacing: .04em; }
.hero-reaction::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 5px rgba(123,181,222,.12); }
.hero-art { min-height: 510px; display: grid; place-items: center; }
.orbit { position: absolute; border: 1px solid rgba(255,255,255,.17); border-radius: 50%; transform: rotate(-25deg); }
.orbit-one { width: 370px; height: 142px; }.orbit-two { width: 465px; height: 210px; transform: rotate(38deg); }
.moon-slice { position: absolute; top: 37px; right: 8%; width: 85px; height: 85px; border-radius: 50%; background: var(--yellow-bright); box-shadow: 0 0 50px rgba(255,216,109,.4); }
.moon-slice::after { content: ''; position: absolute; left: -12px; top: -7px; width: 79px; height: 79px; border-radius: 50%; background: var(--blue-dark); }
.hero-star-character { position: relative; z-index: 2; display: grid; place-items: center; width: 280px; height: 280px; color: var(--blue); background: linear-gradient(145deg, #b7def4, #5d96c7 76%); clip-path: polygon(50% 0%, 61% 36%, 98% 36%, 68% 57%, 79% 95%, 50% 72%, 21% 95%, 32% 57%, 2% 36%, 39% 36%); filter: drop-shadow(0 20px 30px rgba(0,0,0,.23)); transition: background .6s, transform .6s; }
.hero-star-character::before { content: ''; position: absolute; inset: 30px 34px 28px; border-radius: 50%; background: rgba(255,255,255,.12); }
.star-eye { position: absolute; z-index: 2; top: 41%; width: 10px; height: 18px; border-radius: 50%; background: var(--blue-dark); transform: rotate(-8deg); }.star-eye-left { left: 39%; }.star-eye-right { right: 39%; }
.star-blush { position: absolute; z-index: 2; top: 52%; width: 30px; height: 11px; border-radius: 50%; background: rgba(238,118,119,.42); opacity: .5; }.star-blush-left { left: 26%; }.star-blush-right { right: 26%; }
.star-mouth { position: absolute; z-index: 2; top: 50%; color: var(--blue-dark); font-family: var(--serif); font-size: 26px; }
.mushroom-mini { position: absolute; z-index: 3; bottom: 48px; width: 42px; height: 44px; border-radius: 50% 50% 22% 22%; background: var(--orange); }.mushroom-mini::after { content: ''; position: absolute; left: 13px; bottom: -14px; width: 17px; height: 22px; border-radius: 0 0 8px 8px; background: #e4cab0; }.mushroom-mini span { position: absolute; left: 11px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: #f7dfba; box-shadow: 15px 4px #f7dfba, 8px 14px #f7dfba; }.mushroom-mini-one { left: 13%; transform: rotate(-11deg) scale(.8); }.mushroom-mini-two { right: 13%; transform: rotate(10deg) scale(1.25); }
.art-label { position: absolute; right: 7%; bottom: 18px; display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; border-left: 2px solid var(--yellow); color: rgba(255,255,255,.65); background: rgba(16,28,55,.44); font-family: var(--mono); font-size: 9px; letter-spacing: .07em; }.art-label strong { color: white; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0; }.art-label small { color: rgba(255,255,255,.48); font-size: 9px; line-height: 1.4; letter-spacing: 0; }

.section { padding: 125px 10vw; }
.section-heading { max-width: 650px; margin-bottom: 55px; }.split-heading { display: grid; grid-template-columns: 1fr .75fr; align-items: end; gap: 10vw; max-width: none; }.section h2 { margin-bottom: 20px; font-size: clamp(40px, 5vw, 73px); }.section-intro { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.9; }.narrow-intro { max-width: 485px; }
.section-modes { background: var(--paper); }.mode-switcher { display: inline-flex; gap: 8px; padding: 6px; margin-bottom: 28px; border: 1px solid var(--line); border-radius: 100px; }.mode-tab { display: inline-flex; align-items: center; gap: 9px; padding: 12px 16px; border: 0; border-radius: 100px; color: var(--ink-soft); background: transparent; font-size: 13px; }.mode-tab.is-active { color: white; background: var(--blue-deep); }.tab-dot { width: 9px; height: 9px; border-radius: 50%; }.blue-dot { background: var(--blue); }.yellow-dot { background: var(--yellow); }
.mode-stage { display: grid; grid-template-columns: minmax(300px, .9fr) 1.1fr; min-height: 440px; overflow: hidden; border-radius: var(--radius); color: white; background: var(--blue-deep); box-shadow: var(--shadow); transition: background .5s; }.mode-stage[data-mode="yellow"] { background: #25213d; }.mode-visual { position: relative; display: grid; place-items: center; min-height: 440px; overflow: hidden; background: radial-gradient(circle at 50% 45%, rgba(123,181,222,.35), transparent 42%), #162a4b; }.mode-stage[data-mode="yellow"] .mode-visual { background: radial-gradient(circle at 50% 45%, rgba(243,188,76,.38), transparent 42%), #2e2441; }.mode-star { color: var(--blue); font-size: 205px; line-height: 1; text-shadow: 0 13px 25px rgba(0,0,0,.25); transition: color .5s, transform .5s; }.mode-stage[data-mode="yellow"] .mode-star { color: var(--yellow-bright); transform: rotate(18deg) scale(1.08); text-shadow: 0 0 50px rgba(243,188,76,.42); }.mode-caption { position: absolute; bottom: 30px; max-width: 260px; color: rgba(255,255,255,.65); font-family: var(--serif); font-size: 17px; text-align: center; }.art-label-light { right: auto; bottom: 20px; left: 24px; border-color: rgba(255,255,255,.55); background: rgba(0,0,0,.12); }.mode-details { display: flex; flex-direction: column; justify-content: center; padding: 60px clamp(35px, 6vw, 100px); }.mode-kicker, .product-type, .trait-label, .story-time { margin-bottom: 13px; color: var(--yellow-bright); font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }.mode-details h3 { margin-bottom: 14px; font-family: var(--serif); font-size: clamp(27px, 3.2vw, 46px); line-height: 1.2; }.mode-details p { color: rgba(255,255,255,.7); font-size: 14px; }.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 30px; }.tag-list span { padding: 7px 11px; border: 1px solid rgba(255,255,255,.2); border-radius: 99px; color: rgba(255,255,255,.77); font-size: 11px; }.mode-quote { padding-left: 16px; border-left: 2px solid var(--yellow); font-family: var(--serif); font-size: 15px !important; }

.house-section { color: var(--ink); background: var(--paper-warm); }.house-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(230px, .55fr); gap: 30px; align-items: center; }.house-scene { position: relative; min-height: 540px; overflow: hidden; border: 1px solid rgba(16,32,58,.1); border-radius: var(--radius); background: linear-gradient(#24385d 0 61%, #65594e 61%); box-shadow: var(--shadow); }.house-scene::before { content: ''; position: absolute; inset: 61% 0 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 2px, transparent 2px 60px); opacity: .6; }.window-glow { position: absolute; top: 30px; left: 9%; width: 270px; height: 210px; background: rgba(255,216,109,.23); filter: blur(19px); }.window-frame { position: absolute; top: 55px; left: 13%; width: 195px; height: 155px; border: 12px solid #a5684c; background: #111d38; box-shadow: 0 0 0 4px rgba(255,216,109,.16); }.window-frame::after { content: '✦  ·  ✧'; position: absolute; top: 28px; left: 23px; color: var(--yellow-bright); font-size: 27px; letter-spacing: 19px; }.window-frame span, .window-frame i, .window-frame b { position: absolute; background: #a5684c; }.window-frame span { left: 50%; top: 0; width: 8px; height: 100%; transform: translateX(-50%); }.window-frame i { top: 50%; left: 0; width: 100%; height: 8px; transform: translateY(-50%); }.wall-shelf { position: absolute; top: 89px; right: 14%; display: flex; gap: 22px; align-items: end; width: 160px; height: 70px; padding: 0 12px 8px; border-bottom: 8px solid #9b654e; color: var(--yellow-bright); font-size: 22px; }.wall-shelf span:nth-child(2) { color: var(--blue); font-size: 34px; }.wall-shelf span:nth-child(3) { color: #d97f67; font-size: 17px; }.bed { position: absolute; right: 11%; bottom: 18%; width: 300px; height: 142px; border-radius: 19px 19px 0 0; background: #b77c68; box-shadow: 15px 19px 0 #463d3b; }.pillow { position: absolute; top: 13px; left: 17px; width: 87px; height: 54px; border-radius: 17px; background: #ddc9a9; }.blanket { position: absolute; right: 12px; bottom: 0; width: 194px; height: 105px; border-radius: 16px 17px 0 0; background: #273b69; }.sleeping-star { position: absolute; right: 70px; top: 18px; color: #a8d4ed; font-size: 38px; transform: rotate(12deg); }.floor-rug { position: absolute; left: 10%; bottom: 7%; width: 350px; height: 52px; border-radius: 50%; background: rgba(21,31,47,.25); }.hotspot { position: absolute; z-index: 3; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; color: var(--blue-dark); background: var(--yellow-bright); box-shadow: 0 6px 20px rgba(0,0,0,.18); transition: transform .2s; }.hotspot:hover { transform: scale(1.14); }.hotspot-hat { top: 24%; left: 28%; }.hotspot-trophy { top: 22%; right: 22%; }.hotspot-watermelon { bottom: 21%; left: 22%; }.hotspot-mushroom { bottom: 9%; right: 8%; color: white; background: var(--orange); }.house-plaque { position: absolute; left: 35px; bottom: 28px; color: rgba(255,255,255,.55); font-family: var(--mono); font-size: 10px; line-height: 1.45; letter-spacing: .08em; }.house-plaque span { color: rgba(255,255,255,.4); letter-spacing: 0; }.house-note { min-height: 170px; display: flex; gap: 15px; padding: 26px 22px; border-top: 1px solid var(--ink); color: var(--ink-soft); }.note-symbol { color: var(--orange); font-size: 26px; line-height: 1.2; }.house-note p { margin: 0; font-family: var(--serif); font-size: 19px; line-height: 1.5; }

.stories-section { background: var(--paper); }.story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }.story-card { position: relative; min-height: 380px; overflow: hidden; padding: 27px; border-radius: var(--radius); color: white; }.story-card::before { content: ''; position: absolute; right: -45px; bottom: -70px; width: 210px; height: 210px; border-radius: 50%; background: rgba(255,255,255,.08); }.story-card-blue { background: #24385d; }.story-card-moss { background: var(--moss); }.story-card-yellow { color: var(--ink); background: var(--yellow-bright); }.story-number { position: relative; font-family: var(--mono); font-size: 12px; }.story-time { position: relative; float: right; color: currentColor; opacity: .65; }.story-icon { position: relative; margin: 53px 0 25px; font-size: 70px; line-height: 1; }.story-card h3 { position: relative; margin-bottom: 10px; font-family: var(--serif); font-size: 29px; }.story-card p { position: relative; max-width: 230px; margin: 0; color: rgba(255,255,255,.7); font-size: 13px; line-height: 1.8; }.story-card-yellow p { color: rgba(16,32,58,.72); }.art-label-card { right: 27px; bottom: 25px; padding: 0; border: 0; color: inherit; background: transparent; opacity: .56; }.art-label-card strong { color: currentColor; font-size: 10px; }

.traits-section { background: #d6ddce; }.traits-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.trait-column { min-height: 250px; padding: 30px; border-radius: var(--radius); background: #f0e9da; }.trait-column-dark { color: white; background: var(--blue-dark); }.trait-label { color: var(--orange); }.trait-column-dark .trait-label { color: var(--yellow-bright); }.trait-cloud { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }.trait-cloud span { padding: 10px 14px; border: 1px solid rgba(16,32,58,.17); border-radius: 99px; font-family: var(--serif); font-size: 17px; }.like-cloud span:nth-child(2), .like-cloud span:nth-child(5) { transform: rotate(-3deg); }.like-cloud span:nth-child(3) { color: #456c86; background: #d8e7ec; }.dislike-cloud span { border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.82); }.dislike-cloud span:first-child { color: var(--yellow-bright); transform: rotate(3deg); }

.quiz-section { padding-top: 90px; background: var(--blue-dark); }.quiz-card { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: center; max-width: 1120px; margin: 0 auto; color: white; }.quiz-copy h2 { margin-bottom: 20px; font-size: clamp(38px, 5vw, 62px); }.quiz-copy > p:not(.eyebrow) { max-width: 280px; color: rgba(255,255,255,.62); font-size: 14px; }.quiz-progress { display: inline-block; margin-top: 25px; color: var(--yellow-bright); font-family: var(--mono); font-size: 11px; }.quiz-panel { min-height: 300px; padding: 38px; border: 1px solid rgba(255,255,255,.17); border-radius: var(--radius); background: rgba(255,255,255,.06); }.quiz-question { margin-bottom: 25px; font-family: var(--serif); font-size: 24px; line-height: 1.45; }.quiz-options { display: grid; gap: 10px; }.quiz-option { width: 100%; padding: 13px 17px; border: 1px solid rgba(255,255,255,.18); border-radius: 13px; color: rgba(255,255,255,.78); background: transparent; text-align: left; transition: background .2s, color .2s, transform .2s; }.quiz-option:hover { color: var(--blue-dark); background: var(--yellow-bright); transform: translateX(4px); }.quiz-result { display: grid; min-height: 190px; place-items: center; padding: 24px; border-radius: 18px; color: var(--blue-dark); background: var(--yellow-bright); text-align: center; }.quiz-result strong { display: block; margin-bottom: 8px; font-family: var(--serif); font-size: 29px; }.quiz-result p { margin: 0; font-size: 13px; }.quiz-reset { margin-top: 18px; padding: 8px 15px; border: 1px solid rgba(16,32,58,.25); border-radius: 99px; color: var(--blue-dark); background: transparent; font-size: 12px; }

.shop-section { background: var(--paper-warm); }.shop-heading { margin-bottom: 45px; }.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }.product-card { overflow: hidden; border-radius: 18px; background: var(--paper); box-shadow: 0 8px 30px rgba(16,32,58,.07); }.product-art { position: relative; display: grid; place-items: center; min-height: 220px; overflow: hidden; color: white; font-size: 92px; }.product-art::before, .product-art::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255,255,255,.14); }.product-art::before { width: 180px; height: 180px; top: -65px; right: -30px; }.product-art::after { width: 100px; height: 100px; bottom: -50px; left: -20px; }.product-art span { position: relative; z-index: 1; text-shadow: 0 10px 22px rgba(0,0,0,.17); }.product-art small { position: absolute; z-index: 2; left: 16px; bottom: 13px; color: rgba(255,255,255,.65); font-family: var(--mono); font-size: 9px; }.product-vector-art { position: relative; z-index: 1; display: block; width: min(100%, 154px); height: 142px; object-fit: contain; filter: drop-shadow(0 10px 9px rgba(0,0,0,.16)); }.product-art-sticker { background: #5a8bb3; }.product-art-house { background: #6c7760; }.product-art-dream { color: var(--ink); background: var(--yellow); }.product-art-watermelon { background: #ca745b; }.product-info { padding: 21px 20px 19px; }.product-type { margin-bottom: 7px; color: var(--orange); font-size: 9px; }.product-info h3 { margin-bottom: 4px; font-family: var(--serif); font-size: 21px; }.product-price { margin: 0 0 17px; color: var(--ink-soft); font-family: var(--mono); font-size: 13px; }.add-button { display: flex; justify-content: space-between; width: 100%; padding: 10px 0; border: 0; border-top: 1px solid var(--line); color: var(--ink); background: transparent; font-size: 12px; font-weight: 700; }.add-button span { color: var(--orange); font-size: 20px; line-height: 1; }

.site-footer { display: flex; justify-content: space-between; gap: 35px; padding: 55px 10vw; color: rgba(255,255,255,.65); background: var(--blue-dark); }.site-footer strong { margin-left: 5px; color: white; font-family: var(--serif); font-size: 20px; }.site-footer p { margin: 8px 0 0; font-size: 12px; }.footer-meta { display: flex; flex-direction: column; align-items: end; justify-content: end; gap: 4px; color: rgba(255,255,255,.4); font-family: var(--mono); font-size: 10px; }

.cart-drawer { position: fixed; inset: 0; z-index: 60; visibility: hidden; transition: visibility 0s linear .35s; }.cart-drawer.is-open { visibility: visible; transition-delay: 0s; }.drawer-backdrop { position: absolute; inset: 0; opacity: 0; background: rgba(4,10,24,.55); transition: opacity .35s; }.is-open .drawer-backdrop { opacity: 1; }.drawer-panel { position: absolute; top: 0; right: 0; display: flex; flex-direction: column; width: min(450px, 100%); height: 100%; padding: 31px; color: white; background: var(--blue-dark); box-shadow: -20px 0 50px rgba(0,0,0,.18); transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.8,.2,1); }.is-open .drawer-panel { transform: translateX(0); }.drawer-header { display: flex; justify-content: space-between; align-items: start; padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.14); }.drawer-header .eyebrow { margin-bottom: 8px; }.drawer-header h2 { margin: 0; font-size: 31px; }.icon-button { width: 39px; height: 39px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: white; background: transparent; font-size: 25px; line-height: 1; }.cart-items { flex: 1; overflow: auto; padding: 22px 0; }.empty-cart { color: rgba(255,255,255,.5); font-family: var(--serif); font-size: 17px; }.cart-line { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.12); }.cart-line-name { margin: 0 0 4px; font-family: var(--serif); font-size: 16px; }.cart-line-meta { margin: 0; color: rgba(255,255,255,.48); font-family: var(--mono); font-size: 10px; }.cart-line-price { color: var(--yellow-bright); font-family: var(--mono); font-size: 12px; white-space: nowrap; }.drawer-footer { padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); }.cart-total { display: flex; justify-content: space-between; margin-bottom: 16px; color: rgba(255,255,255,.58); font-size: 12px; }.cart-total strong { color: var(--yellow-bright); font-family: var(--mono); font-size: 15px; }.full-button { width: 100%; }.drawer-footer small { display: block; margin-top: 13px; color: rgba(255,255,255,.4); font-size: 10px; text-align: center; }.toast-stack { position: fixed; right: 25px; bottom: 25px; z-index: 80; display: flex; flex-direction: column; align-items: flex-end; width: min(360px, calc(100vw - 50px)); pointer-events: none; }.toast { position: relative; max-width: 100%; max-height: 0; margin-top: 0; padding: 0 17px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; color: white; background: var(--blue-dark); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(14px) scale(.96); transform-origin: right bottom; transition: max-height .32s cubic-bezier(.2,.8,.2,1), margin-top .32s cubic-bezier(.2,.8,.2,1), padding .32s cubic-bezier(.2,.8,.2,1), opacity .22s, transform .3s cubic-bezier(.2,.8,.2,1); font-size: 12px; }.toast.is-visible { max-height: 120px; margin-top: 10px; padding: 13px 17px; opacity: 1; transform: translateY(0) scale(1); }.toast.is-leaving { max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; opacity: 0; transform: translateX(22px) scale(.96); }

body.dream-mode .hero-star-character { background: linear-gradient(145deg, #ffe99c, #e6a92e 76%); transform: rotate(13deg) scale(1.03); }.dream-mode .hero-reaction::before { background: var(--yellow); box-shadow: 0 0 0 5px rgba(243,188,76,.14); }.dream-mode .hero-section { background: #201d3b; }.dream-mode .hero-section::after { background: radial-gradient(circle, rgba(243,188,76,.16), transparent 64%); }

@media (max-width: 900px) { .site-header { padding: 0 5vw; }.brand { min-width: auto; }.brand-subtitle { display: none; }.site-nav { gap: 16px; }.hero-section { grid-template-columns: 1fr; gap: 10px; min-height: auto; padding: 80px 8vw 70px; }.hero-copy { max-width: 650px; }.hero-art { min-height: 420px; margin-top: 10px; }.split-heading, .mode-stage, .house-layout, .quiz-card { grid-template-columns: 1fr; }.split-heading { gap: 24px; }.mode-stage { min-height: auto; }.mode-visual { min-height: 330px; }.mode-details { padding: 45px; }.house-note { min-height: auto; }.story-grid { grid-template-columns: repeat(3, 1fr); }.product-grid { grid-template-columns: repeat(2, 1fr); }.quiz-card { gap: 25px; }.quiz-panel { min-height: auto; } }
@media (max-width: 600px) { .site-header { height: 68px; }.site-nav { display: none; }.cart-button { margin-left: auto; }.section { padding: 80px 6vw; }.hero-section { padding: 66px 7vw 58px; }.hero-section h1 { font-size: 56px; }.hero-art { min-height: 350px; transform: scale(.82); margin: -20px -30px -25px; }.art-label { right: 0; }.section-heading { margin-bottom: 35px; }.mode-switcher { display: flex; width: 100%; border-radius: 16px; }.mode-tab { flex: 1; padding: 11px 8px; justify-content: center; font-size: 11px; }.mode-visual { min-height: 290px; }.mode-details { padding: 36px 25px; }.mode-star { font-size: 160px; }.house-scene { min-height: 430px; }.window-frame { left: 7%; transform: scale(.75); transform-origin: top left; }.wall-shelf { right: 6%; transform: scale(.8); transform-origin: top right; }.bed { right: -2%; transform: scale(.78); transform-origin: bottom right; }.floor-rug { left: 2%; width: 260px; }.story-grid, .traits-layout, .product-grid { grid-template-columns: 1fr; }.story-card { min-height: 300px; }.trait-column { min-height: auto; }.quiz-panel { padding: 25px 20px; }.site-footer { flex-direction: column; padding: 45px 7vw; }.footer-meta { align-items: start; }.drawer-panel { padding: 25px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* Yellow dopamine direction: bright, playful, high-contrast, and fully offline. */
body { background: var(--paper); }
.site-header { color: var(--ink); border-bottom-color: rgba(45,29,16,.12); background: rgba(255,201,40,.95); }
.brand-mark { color: var(--orange); }
.brand-subtitle, .site-nav, .cart-button { color: rgba(45,29,16,.72); }
.site-nav a:hover, .cart-button:hover { color: var(--ink); }
.cart-count { color: var(--ink); background: var(--paper); }
.hero-section { color: var(--ink); background: var(--yellow); }
.hero-section::before { opacity: .28; background-image: radial-gradient(rgba(255,255,255,.72) 1px, transparent 1px); }
.hero-section::after { background: radial-gradient(circle, rgba(239,106,79,.28), transparent 64%); }
.hero-section .eyebrow { color: var(--blue-deep); }
.hero-section h1 em { color: var(--blue-deep); }
.hero-lede { color: rgba(45,29,16,.72); }
.button-primary { color: var(--ink); background: var(--paper); box-shadow: 0 10px 25px rgba(45,29,16,.12); }
.button-primary:hover { color: var(--ink); background: white; }
.button-quiet { color: rgba(45,29,16,.78); border-color: rgba(45,29,16,.3); }
.button-quiet:hover { color: var(--ink); border-color: var(--ink); }
.hero-reaction { color: rgba(45,29,16,.62); }
.hero-reaction::before { background: var(--blue-deep); box-shadow: 0 0 0 5px rgba(92,59,153,.14); }
.orbit { border-color: rgba(92,59,153,.28); }
.moon-slice { background: var(--orange); box-shadow: 0 0 50px rgba(239,106,79,.35); }
.moon-slice::after { background: var(--yellow); }
.hero-art .art-label { color: rgba(45,29,16,.67); background: rgba(255,249,221,.34); }
.hero-art .art-label strong { color: var(--ink); }
.hero-art .art-label small { color: rgba(45,29,16,.58); }
.star-dot { color: var(--blue-deep); }
.section-modes { background: var(--paper); }
.mode-switcher { background: rgba(255,255,255,.36); }
.mode-tab.is-active { background: var(--blue-deep); }
.house-section, .shop-section { background: var(--paper-warm); }
.stories-section { background: #fff4b8; }
.story-card-blue { background: var(--blue-deep); }
.story-card-moss { background: var(--moss); }
.traits-section { background: #ffcf4d; }
.trait-column { background: #fff9dd; }
.quiz-section { background: var(--blue-deep); }
.site-footer { background: var(--blue-deep); }
.drawer-panel { background: var(--blue-deep); }
.toast { background: var(--blue-deep); }
.product-art-sticker { background: #ff7e61; }
.product-art-house { background: var(--moss); }
.product-art-dream { background: var(--yellow); }
.product-art-watermelon { background: #ef6a4f; }
body.dream-mode .hero-section { background: #ffb52e; }
body.dream-mode .hero-section::after { background: radial-gradient(circle, rgba(92,59,153,.2), transparent 64%); }
.dream-mode .hero-reaction::before { background: var(--blue-deep); box-shadow: 0 0 0 5px rgba(92,59,153,.14); }
.house-section h2 em, .shop-section h2 em { color: var(--blue-deep); }
.traits-section h2 em { color: var(--blue-deep); }
.trait-column-dark { background: #e96b52; }
.trait-column-dark .trait-label { color: #fff9dd; }
.dislike-cloud span { border-color: rgba(255,249,221,.55); color: #fff9dd; }
.dislike-cloud span:first-child { color: var(--blue-deep); background: var(--yellow-bright); }
.product-art-hat { background: #ef8360; }
.product-art-hammer { color: var(--yellow-bright); background: #5c3b99; }
.product-art-watermelon { background: #ef6a4f; }
.product-art-mushroom { background: #8fa451; }

/* Supplied character artwork */
.hero-image-frame { position: relative; z-index: 2; width: min(100%, 410px); overflow: hidden; border: 8px solid var(--paper); border-radius: 30px; background: #82d6f5; box-shadow: 18px 22px 0 rgba(92,59,153,.25), 0 24px 45px rgba(45,29,16,.2); transform: rotate(2deg); transition: transform .5s; }
.hero-image-frame:hover { transform: rotate(-1deg) translateY(-4px); }
.hero-character-image { display: block; width: 100%; height: 410px; object-fit: cover; object-position: center 23%; }
.dream-mode .hero-image-frame { transform: rotate(-3deg); }
.dream-mode .hero-image-frame:hover { transform: rotate(1deg) translateY(-4px); }
.mode-character-image { display: none; width: min(100%, 390px); height: 330px; border: 7px solid rgba(255,255,255,.88); border-radius: 22px; box-shadow: 0 16px 30px rgba(0,0,0,.22); object-fit: contain; }
.mode-stage[data-mode="blue"] .mode-character-image-blue, .mode-stage[data-mode="yellow"] .mode-character-image-yellow { display: block; }
.mode-stage[data-mode="yellow"] .mode-character-image-yellow { border-color: var(--yellow-bright); }

/* Keep supplied artwork inside its own visual frames so it never covers copy. */
.hero-copy, .hero-art, .mode-visual, .mode-details { min-width: 0; }
.hero-image-frame { width: min(100%, 330px); margin-inline: auto; }
.hero-character-image { height: 330px; object-fit: contain; object-position: center; }
.mode-visual { padding: 24px; }
.mode-character-image { width: 100%; max-width: 330px; height: 245px; object-fit: contain; }
.mode-caption { z-index: 4; max-width: calc(100% - 32px); }
.story-image { position: relative; z-index: 1; display: block; width: 100%; height: 115px; margin: 16px 0 12px; border: 4px solid rgba(255,255,255,.45); border-radius: 16px; object-fit: cover; object-position: center 30%; }
.story-card-yellow .story-image { border-color: rgba(45,29,16,.25); }
.story-card .story-icon { margin: 12px 0 15px; font-size: 38px; }
.house-note { align-items: center; flex-wrap: wrap; }
.house-note-image { width: 128px; height: 96px; flex: 0 0 auto; border-radius: 14px; object-fit: cover; object-position: center; box-shadow: 0 8px 20px rgba(45,29,16,.15); }
.album-section { background: #f5acd0; }
.album-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.album-card { min-width: 0; margin: 0; overflow: hidden; border: 1px solid rgba(45,29,16,.12); border-radius: 18px; background: var(--paper); box-shadow: 0 10px 25px rgba(45,29,16,.1); }
.album-image-frame { height: 185px; overflow: hidden; background: #d5c5e7; }
.album-image-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .35s; }
.album-card:hover .album-image-frame img { transform: scale(1.045); }
.album-card figcaption { padding: 14px 15px 16px; color: var(--ink); font-family: var(--serif); font-size: 15px; line-height: 1.35; }
@media (max-width: 900px) { .album-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .hero-image-frame { width: min(100%, 290px); }.hero-character-image { height: 290px; }.mode-visual { padding: 22px 18px; }.mode-character-image { height: 220px; }.album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.album-image-frame { height: 150px; }.album-card figcaption { padding: 11px; font-size: 13px; }.story-image { height: 100px; }.house-note-image { width: 108px; height: 82px; } }

/* Keep supplied artwork square and fully visible instead of cropping it. */
.mode-character-image { width: min(100%, 330px); height: auto; min-height: 0; aspect-ratio: 1 / 1; object-fit: contain; }
.story-image { width: min(100%, 185px); height: auto; aspect-ratio: 1 / 1; margin: 16px auto 12px; object-fit: contain; object-position: center; }
.album-image-frame { height: auto; aspect-ratio: 1 / 1; }
.album-image-frame img { object-fit: contain; }

/* Simple related colour-block illustrations for the shop products. */
.product-art > span { position: relative; display: block; width: 112px; height: 112px; font-size: 0; text-shadow: none; filter: drop-shadow(0 10px 9px rgba(0,0,0,.16)); }
.product-art-hat > span { width: 104px; height: 98px; border: 6px solid #302352; border-radius: 58% 58% 30% 30%; background: linear-gradient(145deg, #ff9dcf 0 36%, #7d58b2 37% 100%); clip-path: polygon(50% 0, 100% 84%, 86% 95%, 50% 86%, 14% 95%, 0 84%); transform: rotate(-7deg); }
.product-art-hat > span::before { content: ''; position: absolute; left: -3px; right: -3px; bottom: 12px; height: 16px; border: 5px solid #302352; border-radius: 50%; background: #fff9dd; }
.product-art-hat > span::after { content: '\2726'; position: absolute; right: -15px; top: -20px; color: #ffe66d; font-size: 31px; }
.product-art-hammer > span { transform: rotate(-32deg); }
.product-art-hammer > span::before { content: ''; position: absolute; left: 51px; top: 18px; width: 20px; height: 98px; border: 6px solid #302352; border-radius: 16px; background: #d87b52; }
.product-art-hammer > span::after { content: ''; position: absolute; left: 9px; top: 4px; width: 100px; height: 42px; border: 7px solid #302352; border-radius: 22px; background: linear-gradient(90deg, #ffc928 0 35%, #8e68c5 36% 100%); }
.product-art-watermelon > span { width: 116px; height: 76px; border: 7px solid #285e42; border-radius: 62px 62px 18px 18px; background: radial-gradient(ellipse at 25% 40%, #2d1d10 0 3px, transparent 4px), radial-gradient(ellipse at 59% 30%, #2d1d10 0 3px, transparent 4px), radial-gradient(ellipse at 78% 58%, #2d1d10 0 3px, transparent 4px), linear-gradient(#ff6570 0 72%, #ffe889 73% 83%, #36925b 84%); transform: rotate(-6deg); }
.product-art-mushroom > span::before { content: ''; position: absolute; left: 5px; top: 16px; width: 103px; height: 58px; border: 7px solid #55315f; border-radius: 60px 60px 18px 18px; background: radial-gradient(circle at 28% 37%, #ffe7a8 0 5px, transparent 6px), radial-gradient(circle at 67% 31%, #ffe7a8 0 5px, transparent 6px), #e56b8c; }
.product-art-mushroom > span::after { content: ''; position: absolute; left: 44px; top: 65px; width: 32px; height: 45px; border: 7px solid #55315f; border-top: 0; border-radius: 0 0 13px 13px; background: #fff1c9; }

/* Keep the first two visual panels away from their copy. */
.hero-image-frame { width: min(100%, 275px); }
.hero-character-image { height: auto; aspect-ratio: 1 / 1; }
.mode-visual { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px 28px 64px; }
.mode-character-image { width: min(100%, 250px); }
.mode-caption { position: static; max-width: 230px; }

/* Refined shop symbols: rounded hat, circular hammer with five triangles, and an inverted watermelon half-circle. */
.product-art-hat > span { width: 102px; height: 96px; border-radius: 50% 50% 28% 28%; clip-path: polygon(50% 3%, 96% 84%, 80% 96%, 50% 88%, 20% 96%, 4% 84%); }
.product-art-hat > span::after { content: ''; right: 38px; top: 5px; width: 22px; height: 22px; border: 5px solid #302352; border-radius: 50%; background: #ffe66d; }
.product-art-hammer > span { width: 104px; height: 104px; border: 7px solid #302352; border-radius: 50%; background: radial-gradient(circle, #ffc928 0 40%, #8e68c5 41% 100%); transform: none; }
.product-art-hammer > span::before, .product-art-hammer > span::after { content: none; }
.product-art-hammer > span i { position: absolute; left: 43px; top: -22px; width: 18px; height: 22px; border: 3px solid #302352; background: #ffe66d; clip-path: polygon(50% 0, 100% 100%, 0 100%); transform: rotate(var(--triangle-angle)); transform-origin: 50% 74px; }
.product-art-watermelon > span { border-radius: 18px 18px 62px 62px; background: radial-gradient(ellipse at 25% 60%, #2d1d10 0 3px, transparent 4px), radial-gradient(ellipse at 59% 70%, #2d1d10 0 3px, transparent 4px), radial-gradient(ellipse at 78% 42%, #2d1d10 0 3px, transparent 4px), linear-gradient(to bottom, #36925b 0 17%, #ffe889 18% 27%, #ff6570 28%); transform: rotate(6deg); }

@media (max-width: 600px) {
  .hero-image-frame { width: min(100%, 250px); }
  .hero-character-image { height: auto; }
  .mode-visual { min-height: 370px; padding: 20px 16px 58px; }
  .mode-character-image { width: min(100%, 230px); }
}

/* House section: full-width scene with a persistent, larger information card. */
.house-layout { grid-template-columns: minmax(0, 1fr); gap: 22px; }
.house-note { display: grid; grid-template-columns: 230px minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: center; gap: 8px 24px; min-height: 230px; padding: 22px; border: 1px solid rgba(45,29,16,.14); border-radius: 20px; background: rgba(255,249,221,.78); box-shadow: 0 12px 32px rgba(45,29,16,.09); }
.house-note-image { grid-row: 1 / span 2; width: 230px; height: 230px; border-radius: 18px; background: #dce7f4; object-fit: contain; }
.house-note .note-symbol { align-self: end; }
.house-note p { align-self: start; max-width: 650px; }
/* Redrawn sleep hat: a rounded triangular cap plus a circular pom-pom. */
.product-art-hat > span { width: 116px; height: 104px; border: 0; border-radius: 44% 44% 24% 24%; background: linear-gradient(145deg, #ff9ed0 0 38%, #7551ad 39% 100%); clip-path: polygon(50% 0, 96% 86%, 82% 100%, 18% 100%, 4% 86%); transform: rotate(-7deg); }
.product-art-hat > span::before { content: ''; position: absolute; left: 11px; right: 11px; bottom: 10px; height: 17px; border: 5px solid #302352; border-radius: 20px; background: #fff9dd; }
.product-art-hat > span::after { content: ''; position: absolute; left: 42px; top: 4px; width: 30px; height: 30px; border: 5px solid #302352; border-radius: 50%; background: #ffe66d; }

/* Redrawn watermelon: flat red edge on top, rounded rind underneath. */
.product-art-watermelon > span { width: 122px; height: 84px; border: 0; border-radius: 10px 10px 72px 72px; background: radial-gradient(ellipse at 23% 35%, #2d1d10 0 3px, transparent 4px), radial-gradient(ellipse at 50% 52%, #2d1d10 0 3px, transparent 4px), radial-gradient(ellipse at 76% 34%, #2d1d10 0 3px, transparent 4px), linear-gradient(to bottom, #ff6570 0 68%, #ffe889 69% 79%, #36925b 80%); box-shadow: inset 0 -7px 0 #285e42; transform: rotate(5deg); }
.product-art-watermelon > span::before { content: ''; position: absolute; inset: 0; border: 6px solid #285e42; border-top-color: #302352; border-radius: 10px 10px 72px 72px; }
.product-art-watermelon > span::after { content: ''; position: absolute; left: 12px; right: 12px; top: 6px; height: 4px; border-radius: 99px; background: rgba(255,255,255,.35); }

.product-art-hat > span { border: 0; background: transparent; clip-path: none; }
.product-art-hat > span::before { content: ''; position: absolute; left: 5px; top: 12px; width: 96px; height: 78px; border: 6px solid #302352; border-radius: 26px; background: linear-gradient(145deg, #ff9ed0 0 38%, #7551ad 39% 100%); }
.product-art-hat > span::after { content: ''; position: absolute; right: 0; top: 0; width: 31px; height: 31px; border: 5px solid #302352; border-radius: 50%; background: #ffe66d; }

/* Final shop-icon layering: keep the red mushroom cap above its stem and build the sleep hat from CSS borders. */
.product-art-mushroom > span { isolation: isolate; }
.product-art-mushroom > span::before { z-index: 2; }
.product-art-mushroom > span::after { z-index: 1; }
.product-art-hat > span {
  width: 0;
  height: 0;
  border: 0;
  border-left: 58px solid transparent;
  border-right: 58px solid transparent;
  border-bottom: 90px solid #302352;
  border-radius: 20px;
  background: transparent;
  clip-path: none;
  transform: rotate(-7deg);
  filter: drop-shadow(0 0 1px rgba(48,35,82,.7));
}
.product-art-hat > span::before {
  z-index: 1;
  left: -49px;
  top: 9px;
  width: 0;
  height: 0;
  border: 0;
  border-left: 49px solid transparent;
  border-right: 49px solid transparent;
  border-bottom: 76px solid #5f86df;
  border-radius: 18px;
  background: transparent;
  clip-path: none;
  filter: drop-shadow(0 0 1px rgba(48,35,82,.7));
}
.product-art-hat > span::after {
  z-index: 2;
  left: 50%;
  right: auto;
  top: -22px;
  width: 32px;
  height: 32px;
  border: 6px solid #302352;
  background: #fff9dd;
  transform: translateX(-50%);
}

/* Give each of the five meteor-hammer triangles a stronger, readable outline. */
.product-art-hammer > span i {
  border: 4px solid #302352;
  filter: drop-shadow(0 0 1px rgba(255,249,221,.9));
}

@media (max-width: 600px) {
  .house-note { grid-template-columns: 1fr; grid-template-rows: auto; text-align: center; }
  .house-note-image { grid-row: auto; width: min(100%, 250px); height: auto; aspect-ratio: 1 / 1; margin-inline: auto; }
  .house-note .note-symbol, .house-note p { align-self: auto; margin-inline: auto; }
}

/* Compact house section so the complete scene fits more comfortably in one viewport. */
.house-section { padding-top: 68px; padding-bottom: 68px; }
.house-section .section-heading { margin-bottom: 28px; }
.house-section .eyebrow { margin-bottom: 10px; }
.house-section h2 { margin-bottom: 12px; font-size: clamp(36px, 4.4vw, 60px); }
.house-section .section-intro { line-height: 1.65; }
.house-layout { gap: 14px; }
.house-scene { min-height: 370px; }
.house-scene .window-glow { top: 18px; transform: scale(.78); transform-origin: top left; }
.house-scene .window-frame { top: 36px; left: 11%; transform: scale(.76); transform-origin: top left; }
.house-scene .wall-shelf { top: 58px; right: 11%; transform: scale(.78); transform-origin: top right; }
.house-scene .bed { right: 9%; bottom: 11%; transform: scale(.76); transform-origin: bottom right; }
.house-scene .floor-rug { bottom: 4%; transform: scale(.76); transform-origin: bottom left; }
.house-scene .hotspot { width: 34px; height: 34px; }
.house-scene .house-plaque { left: 24px; bottom: 17px; }
.house-note { grid-template-columns: 160px minmax(0, 1fr); min-height: 160px; padding: 14px 18px; gap: 4px 18px; }
.house-note-image { width: 160px; height: 160px; border-radius: 15px; }
.house-note p { font-size: 16px; line-height: 1.45; }

/* Story colours sampled from the three supplied illustrations. */
.stories-section { background: linear-gradient(180deg, #eadcf7 0%, #f5b8d3 100%); }
.stories-section .eyebrow { color: #8f3c75; }
.stories-section h2 em { color: #5c3b99; }
.stories-section .section-intro { color: #604b63; }
.stories-section .story-card { border: 4px solid rgba(255,249,221,.78); box-shadow: 0 14px 32px rgba(69,37,83,.15); }
.stories-section .story-card-blue { background: #4f806f; }
.stories-section .story-card-moss { background: #913d7d; }
.stories-section .story-card-yellow { color: #fff9dd; background: #e85d59; }
.stories-section .story-card h3 { color: #fff9dd; }
.stories-section .story-card p, .stories-section .story-card-yellow p { color: rgba(255,249,221,.8); }
.stories-section .story-image { border-color: #fff9dd; background: #fff9dd; }

@media (max-width: 600px) {
  .house-section { padding-top: 56px; padding-bottom: 56px; }
  .house-scene { min-height: 360px; }
  .house-note { grid-template-columns: 1fr; min-height: auto; padding: 16px; }
  .house-note-image { width: min(100%, 180px); height: auto; }
}

/* Hero refresh: a denser poster-like first page with clearly separated copy and artwork. */
.hero-section {
  grid-template-columns: minmax(460px, 1.08fr) minmax(360px, .92fr);
  gap: clamp(34px, 5vw, 78px);
  min-height: calc(100vh - 78px);
  padding: 58px 8vw 64px;
}

.hero-copy {
  max-width: 690px;
  padding: clamp(25px, 3vw, 38px);
  border: 1px solid rgba(45,29,16,.15);
  border-radius: 32px;
  background: rgba(255,249,221,.28);
  box-shadow: 0 20px 50px rgba(96,67,20,.1);
  backdrop-filter: blur(4px);
}

.hero-section h1 {
  max-width: 650px;
  margin-bottom: 18px;
  font-size: clamp(55px, 6.6vw, 92px);
  line-height: .96;
}

.hero-lede {
  max-width: 570px;
  margin-bottom: 24px;
}

.hero-reaction {
  margin-top: 20px;
}

.hero-fact-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 23px;
}

.hero-fact {
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid rgba(45,29,16,.14);
  border-radius: 15px;
  background: rgba(255,249,221,.62);
}

.hero-fact span {
  display: block;
  margin-bottom: 5px;
  color: var(--blue-deep);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .14em;
}

.hero-fact strong {
  display: block;
  overflow-wrap: anywhere;
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.3;
}

.hero-art {
  grid-template-rows: 1fr auto;
  min-height: 500px;
  padding: 32px;
  overflow: hidden;
  border: 1px solid rgba(45,29,16,.14);
  border-radius: 38px;
  background:
    radial-gradient(circle at 76% 18%, rgba(255,249,221,.62) 0 8%, transparent 8.5%),
    linear-gradient(145deg, rgba(255,249,221,.28), rgba(255,255,255,.1));
  box-shadow: 0 20px 50px rgba(96,67,20,.1);
}

.hero-image-frame {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  width: min(100%, 360px);
}

.hero-character-image {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.hero-art .orbit-one {
  width: 440px;
  height: 250px;
}

.hero-art .orbit-two {
  width: 350px;
  height: 350px;
}

.hero-art .art-label {
  position: relative;
  right: auto;
  bottom: auto;
  grid-column: 1;
  grid-row: 2;
  justify-self: end;
  align-self: end;
  max-width: 175px;
  border-radius: 0 12px 12px 0;
  background: rgba(255,249,221,.78);
}

.hero-art .mushroom-mini-one {
  left: 7%;
  bottom: 11%;
}

.hero-art .mushroom-mini-two {
  right: 9%;
  top: 14%;
}

@media (min-width: 901px) and (max-width: 1100px) {
  .hero-section {
    grid-template-columns: minmax(0, 1fr) minmax(300px, .82fr);
    gap: 24px;
    padding-inline: 5vw;
  }

  .hero-copy {
    padding: 26px;
  }

  .hero-section h1 {
    font-size: clamp(52px, 6.8vw, 72px);
  }

  .hero-image-frame {
    width: min(100%, 320px);
  }
}

@media (max-width: 900px) {
  .hero-section {
    grid-template-columns: 1fr;
    gap: 28px;
    min-height: auto;
    padding: 70px 7vw;
  }

  .hero-copy {
    max-width: none;
  }

  .hero-art {
    min-height: 480px;
    margin-top: 0;
  }

  .hero-image-frame {
    width: min(100%, 350px);
  }
}

@media (max-width: 600px) {
  .hero-section {
    gap: 20px;
    padding: 48px 6vw 58px;
  }

  .hero-copy {
    padding: 22px;
    border-radius: 24px;
  }

  .hero-section h1 {
    font-size: clamp(46px, 15vw, 58px);
  }

  .hero-fact-strip {
    grid-template-columns: 1fr;
  }

  .hero-fact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 10px 12px;
  }

  .hero-fact span {
    margin: 0;
  }

  .hero-art {
    min-height: 390px;
    margin: 0;
    padding: 22px;
    border-radius: 28px;
    transform: none;
  }

  .hero-image-frame {
    width: min(100%, 270px);
  }

  .hero-art .art-label {
    max-width: 145px;
  }
}

/* Balanced six-image album: three cards per row, then two per row on smaller screens. */
.album-section {
  background:
    radial-gradient(circle at 91% 13%, rgba(255,249,221,.55) 0 8%, transparent 8.5%),
    linear-gradient(150deg, #f7b9d8, #e8b9e6 55%, #d7c4f4);
}

.album-section .section-heading {
  margin-bottom: 42px;
}

.album-grid {
  counter-reset: album-item;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.album-card {
  counter-increment: album-item;
  position: relative;
  border: 5px solid rgba(255,249,221,.84);
  border-radius: 24px;
  background: rgba(255,249,221,.92);
  box-shadow: 0 16px 35px rgba(81,45,91,.13);
  transition: transform .25s, box-shadow .25s;
}

.album-card:hover {
  z-index: 2;
  box-shadow: 0 22px 42px rgba(81,45,91,.2);
  transform: translateY(-5px);
}

.album-card:nth-child(2),
.album-card:nth-child(5) {
  transform: rotate(1deg);
}

.album-card:nth-child(2):hover,
.album-card:nth-child(5):hover {
  transform: rotate(0deg) translateY(-5px);
}

.album-card:nth-child(3),
.album-card:nth-child(4) {
  transform: rotate(-1deg);
}

.album-card:nth-child(3):hover,
.album-card:nth-child(4):hover {
  transform: rotate(0deg) translateY(-5px);
}

.album-image-frame {
  overflow: hidden;
  border-radius: 18px 18px 10px 10px;
  background: #e4d6f2;
}

.album-card figcaption {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px 15px;
  font-size: 16px;
}

.album-card figcaption::before {
  content: '0' counter(album-item);
  flex: 0 0 auto;
  color: #8f3c75;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .08em;
}

/* Dream quiz redesign: a bright entry card leading into a deep-purple question panel. */
.quiz-section {
  position: relative;
  overflow: hidden;
  padding: 88px 7vw;
  background:
    radial-gradient(circle at 12% 16%, rgba(255,224,107,.2) 0 9%, transparent 9.5%),
    radial-gradient(circle at 88% 82%, rgba(255,112,177,.22) 0 13%, transparent 13.5%),
    linear-gradient(145deg, #2e214f 0%, #5c3b99 52%, #a43d89 100%);
}

.quiz-section::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .32;
  background-image: radial-gradient(rgba(255,249,221,.72) 1px, transparent 1px);
  background-size: 25px 25px;
  mask-image: linear-gradient(115deg, black, transparent 76%);
}

.quiz-section::after {
  content: '✦';
  position: absolute;
  top: 7%;
  right: 6%;
  color: rgba(255,224,107,.4);
  font-size: clamp(90px, 13vw, 180px);
  line-height: 1;
  transform: rotate(12deg);
}

.quiz-card {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(310px, .78fr) minmax(440px, 1.22fr);
  gap: clamp(20px, 2.5vw, 34px);
  align-items: stretch;
  max-width: 1200px;
}

.quiz-copy {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 560px;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(30px, 3.3vw, 44px);
  border: 1px solid rgba(45,29,16,.15);
  border-radius: 30px;
  color: var(--ink);
  background:
    radial-gradient(circle at 92% 12%, rgba(239,106,79,.5) 0 11%, transparent 11.5%),
    linear-gradient(145deg, #ffe66d, #ffbe45);
  box-shadow: 0 25px 55px rgba(18,13,41,.24);
}

.quiz-copy::before {
  content: '';
  position: absolute;
  right: -68px;
  bottom: -70px;
  width: 230px;
  height: 230px;
  border: 2px solid rgba(92,59,153,.22);
  border-radius: 50%;
}

.quiz-copy .eyebrow {
  color: var(--blue-deep);
}

.quiz-copy h2 {
  position: relative;
  z-index: 1;
  margin-bottom: 18px;
  font-size: clamp(43px, 4.6vw, 66px);
  line-height: 1.02;
}

.quiz-copy h2 em {
  color: var(--blue-deep);
}

.quiz-copy > p:not(.eyebrow) {
  position: relative;
  z-index: 1;
  max-width: 330px;
  color: rgba(45,29,16,.7);
  font-size: 14px;
  line-height: 1.75;
}

.quiz-portrait {
  position: relative;
  z-index: 2;
  width: min(100%, 245px);
  margin: auto 0 0 auto;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border: 7px solid rgba(255,249,221,.9);
  border-radius: 25px;
  background: var(--blue-deep);
  box-shadow: -13px 14px 0 rgba(92,59,153,.22);
  transform: rotate(2deg);
}

.quiz-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.quiz-portrait span {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 7px 10px;
  border-radius: 99px;
  color: var(--ink);
  background: rgba(255,249,221,.9);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .05em;
}

.quiz-panel {
  position: relative;
  min-width: 0;
  min-height: 560px;
  padding: clamp(30px, 3.4vw, 46px);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 30px;
  background: rgba(28,20,61,.78);
  box-shadow: 0 25px 55px rgba(18,13,41,.27);
  backdrop-filter: blur(8px);
}

.quiz-panel-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: rgba(255,249,221,.5);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
}

.quiz-progress {
  flex: 0 0 auto;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid rgba(255,224,107,.3);
  border-radius: 99px;
  color: #ffe66d;
  background: rgba(255,224,107,.08);
  font-size: 9px;
}

.quiz-progress-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 18px;
}

.quiz-progress-track span {
  height: 6px;
  border-radius: 99px;
  background: rgba(255,255,255,.13);
  transition: background .25s, box-shadow .25s;
}

#quizPanel[data-step='1'] .quiz-progress-track span:nth-child(1),
#quizPanel[data-step='2'] .quiz-progress-track span:nth-child(-n+2),
#quizPanel[data-step='3'] .quiz-progress-track span,
#quizPanel[data-step='done'] .quiz-progress-track span {
  background: #ffe66d;
  box-shadow: 0 0 14px rgba(255,230,109,.35);
}

.quiz-question {
  max-width: 620px;
  margin: clamp(35px, 5vh, 56px) 0 28px;
  color: #fff9dd;
  font-size: clamp(28px, 3vw, 39px);
  line-height: 1.32;
}

.quiz-options {
  counter-reset: quiz-option;
  gap: 13px;
}

.quiz-option {
  counter-increment: quiz-option;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 12px 16px;
  border: 1px solid rgba(255,249,221,.18);
  border-radius: 16px;
  color: rgba(255,249,221,.86);
  background: rgba(255,255,255,.06);
  font-size: 14px;
}

.quiz-option::before {
  content: counter(quiz-option, upper-alpha);
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  color: #ffe66d;
  background: rgba(255,230,109,.12);
  font-family: var(--mono);
  font-size: 10px;
}

.quiz-option:hover {
  color: var(--ink);
  border-color: #ffe66d;
  background: #ffe66d;
  transform: translateX(5px);
}

.quiz-option:hover::before {
  color: #fff9dd;
  background: var(--blue-deep);
}

.quiz-option:focus-visible {
  outline: 3px solid #ff70b1;
  outline-offset: 3px;
}

.quiz-result {
  position: relative;
  min-height: 330px;
  margin-top: 30px;
  overflow: hidden;
  border: 1px solid rgba(45,29,16,.14);
  border-radius: 24px;
  background:
    radial-gradient(circle at 85% 18%, rgba(255,255,255,.45) 0 9%, transparent 9.5%),
    linear-gradient(145deg, #ffe66d, #ff9dcf);
}

.quiz-result[hidden] {
  display: none;
}

.quiz-result::before {
  content: '✦';
  position: absolute;
  top: 18px;
  left: 22px;
  color: rgba(92,59,153,.35);
  font-size: 42px;
}

.quiz-result strong {
  font-size: clamp(31px, 4vw, 46px);
}

.quiz-result p {
  max-width: 430px;
  line-height: 1.7;
}

.quiz-reset {
  margin-top: 22px;
  padding: 11px 19px;
  border: 0;
  color: #fff9dd;
  background: var(--blue-deep);
  font-weight: 700;
}

@media (max-width: 900px) {
  .album-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quiz-card {
    grid-template-columns: 1fr;
  }

  .quiz-copy,
  .quiz-panel {
    min-height: auto;
  }

  .quiz-portrait {
    width: min(100%, 220px);
    margin-top: 28px;
  }

  .quiz-panel {
    min-height: 500px;
  }
}

@media (max-width: 600px) {
  .album-section {
    padding-inline: 5vw;
  }

  .album-grid {
    gap: 13px;
  }

  .album-card {
    border-width: 3px;
    border-radius: 18px;
  }

  .album-card figcaption {
    align-items: flex-start;
    padding: 11px;
    font-size: 13px;
  }

  .quiz-section {
    padding: 60px 5vw;
  }

  .quiz-copy,
  .quiz-panel {
    padding: 24px 21px;
    border-radius: 24px;
  }

  .quiz-copy h2 {
    font-size: clamp(42px, 12vw, 56px);
  }

  .quiz-portrait {
    width: min(100%, 190px);
  }

  .quiz-panel {
    min-height: 470px;
  }

  .quiz-panel-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .quiz-question {
    margin-top: 33px;
    font-size: 27px;
  }

  .quiz-option {
    min-height: 56px;
    padding: 11px 12px;
  }
}

@media (max-width: 420px) {
  .album-grid {
    grid-template-columns: 1fr;
  }
}

/* Compact album page: keep all six square images visible in one desktop viewport. */
.album-section {
  padding-top: 42px;
  padding-bottom: 44px;
}

.album-section .section-heading {
  max-width: 880px;
  gap: 42px;
  margin: 0 auto 22px;
}

.album-section .eyebrow {
  margin-bottom: 8px;
}

.album-section h2 {
  margin-bottom: 0;
  font-size: clamp(35px, 3.7vw, 50px);
  line-height: 1.04;
}

.album-section .section-intro {
  font-size: 13px;
  line-height: 1.55;
}

.album-grid {
  grid-template-columns: repeat(3, minmax(0, 220px));
  justify-content: center;
  max-width: 710px;
  gap: 12px 16px;
  margin-inline: auto;
}

.album-card {
  border-width: 4px;
  border-radius: 19px;
  box-shadow: 0 11px 25px rgba(81,45,91,.12);
}

.album-image-frame {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 14px 14px 8px 8px;
}

.album-card figcaption {
  min-height: 41px;
  gap: 8px;
  padding: 9px 11px 10px;
  font-size: 14px;
  line-height: 1.25;
}

.album-card figcaption::before {
  font-size: 8px;
}

@media (min-width: 701px) and (max-width: 900px) {
  .album-section .split-heading {
    grid-template-columns: minmax(0, 1fr) minmax(220px, .7fr);
    gap: 28px;
  }

  .album-grid {
    grid-template-columns: repeat(3, minmax(0, 205px));
    max-width: 647px;
  }
}

@media (max-width: 700px) {
  .album-section {
    padding-top: 48px;
    padding-bottom: 50px;
  }

  .album-section .section-heading {
    gap: 18px;
    margin-bottom: 26px;
  }

  .album-grid {
    grid-template-columns: repeat(2, minmax(0, 180px));
    max-width: 376px;
    gap: 13px;
  }
}

@media (max-width: 420px) {
  .album-grid {
    grid-template-columns: minmax(0, 195px);
    max-width: 195px;
  }
}

/* Keep album typography consistent with the other full-size content sections. */
.album-section h2 {
  margin-bottom: 20px;
  font-size: clamp(40px, 5vw, 73px);
  line-height: 1.08;
}

.album-section .section-intro {
  font-size: 14px;
  line-height: 1.9;
}

/* Align the album heading block with the other split-heading sections. */
.album-section .section-heading {
  grid-template-columns: 1fr .75fr;
  max-width: none;
  margin-right: 0;
  margin-left: 0;
  gap: 10vw;
}

@media (max-width: 900px) {
  .album-section .section-heading {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Hero colour story: blue night first, yellow dream only after the fourth wake-up. */
.site-header,
.hero-section,
.hero-copy,
.hero-art,
.hero-fact,
.hero-art .art-label,
.button-primary,
.button-quiet {
  transition:
    color .65s ease,
    background-color .65s ease,
    border-color .65s ease,
    box-shadow .65s ease;
}

.site-header {
  color: #f7fbff;
  border-bottom-color: rgba(220,241,255,.16);
  background: rgba(25,52,94,.96);
}

.site-header .brand-name {
  color: #f7fbff;
}

.site-header .brand-subtitle,
.site-header .site-nav,
.site-header .cart-button {
  color: rgba(230,244,255,.72);
}

.site-header .site-nav a:hover,
.site-header .cart-button:hover {
  color: #ffffff;
}

.site-header .cart-count {
  color: #20345f;
  background: #dff4ff;
}

.hero-section {
  color: #f7fbff;
  background:
    radial-gradient(circle at 86% 16%, rgba(111,94,190,.42), transparent 29%),
    linear-gradient(145deg, #14294c 0%, #244e83 48%, #527fc0 100%);
}

.hero-section::before {
  opacity: .34;
  background-image: radial-gradient(rgba(220,241,255,.68) 1px, transparent 1px);
}

.hero-section::after {
  background: radial-gradient(circle, rgba(123,181,222,.3), transparent 65%);
}

.hero-section .star-dot {
  color: #cdeeff;
}

.hero-copy {
  color: #f7fbff;
  border-color: rgba(220,241,255,.22);
  background:
    radial-gradient(circle at 93% 8%, rgba(126,104,202,.28) 0 8%, transparent 8.5%),
    rgba(18,42,80,.76);
  box-shadow: 0 24px 55px rgba(5,16,39,.28);
}

.hero-section .eyebrow {
  color: #9edcff;
}

.hero-section h1 {
  color: #ffffff;
}

.hero-section h1 em {
  color: #9edcff;
}

.hero-lede {
  color: rgba(238,248,255,.76);
}

.hero-reaction {
  color: rgba(224,242,255,.68);
}

.hero-reaction::before {
  background: #ff8fc7;
  box-shadow: 0 0 0 5px rgba(255,143,199,.15);
}

.hero-section .button-primary {
  color: #16315b;
  background: #dff4ff;
  box-shadow: 0 10px 25px rgba(4,18,44,.24);
}

.hero-section .button-primary:hover {
  color: #16315b;
  background: #ffffff;
}

.hero-section .button-quiet {
  color: rgba(239,249,255,.84);
  border-color: rgba(220,241,255,.36);
}

.hero-section .button-quiet:hover {
  color: #ffffff;
  border-color: #ffffff;
}

.hero-fact {
  color: #f7fbff;
  border-color: rgba(220,241,255,.18);
  background: rgba(88,132,183,.3);
  box-shadow: 0 7px 18px rgba(4,18,44,.12);
}

.hero-fact span {
  color: #9edcff;
}

.hero-fact strong {
  color: #ffffff;
}

.hero-art {
  border-color: rgba(220,241,255,.22);
  background:
    linear-gradient(150deg, rgba(218,242,255,.25), rgba(112,91,186,.24)),
    rgba(65,111,168,.72);
  box-shadow: 0 24px 55px rgba(5,16,39,.28);
}

.hero-art::before {
  background:
    radial-gradient(circle at 68% 63%, #ff8fc7 0 29%, transparent 30%),
    linear-gradient(135deg, #a9e1ff, #6d86dc);
  box-shadow: -18px 19px 0 rgba(19,39,79,.22);
}

.hero-art::after {
  color: rgba(224,242,255,.62);
}

.hero-image-frame {
  border-color: #eef9ff;
  box-shadow: 16px 18px 0 rgba(65,49,125,.34), 0 25px 45px rgba(5,16,39,.26);
}

.hero-art .orbit {
  border-color: rgba(205,238,255,.28);
}

.hero-art .moon-slice {
  background: #ff8fc7;
  box-shadow: 0 0 50px rgba(255,143,199,.28);
}

.hero-art .moon-slice::after {
  background: #4775b1;
}

.hero-art .art-label {
  color: rgba(229,245,255,.7);
  border-color: rgba(220,241,255,.2);
  border-left-color: #9edcff;
  background: rgba(19,43,81,.88);
  box-shadow: 0 8px 20px rgba(4,18,44,.15);
}

.hero-art .art-label span {
  color: rgba(220,241,255,.58);
}

.hero-art .art-label strong {
  color: #ffffff;
}

.dream-mode .site-header {
  color: var(--ink);
  border-bottom-color: rgba(45,29,16,.12);
  background: rgba(255,201,40,.95);
}

.dream-mode .site-header .brand-name {
  color: var(--ink);
}

.dream-mode .site-header .brand-subtitle,
.dream-mode .site-header .site-nav,
.dream-mode .site-header .cart-button {
  color: rgba(45,29,16,.72);
}

.dream-mode .site-header .site-nav a:hover,
.dream-mode .site-header .cart-button:hover {
  color: var(--ink);
}

.dream-mode .site-header .cart-count {
  color: var(--ink);
  background: var(--paper);
}

body.dream-mode .hero-section {
  color: var(--ink);
  background:
    radial-gradient(circle at 86% 16%, rgba(239,106,79,.28), transparent 29%),
    linear-gradient(145deg, #ffc928 0%, #ffb52e 52%, #ff9d45 100%);
}

body.dream-mode .hero-section::before {
  opacity: .28;
  background-image: radial-gradient(rgba(255,255,255,.72) 1px, transparent 1px);
}

body.dream-mode .hero-section::after {
  background: radial-gradient(circle, rgba(92,59,153,.2), transparent 64%);
}

.dream-mode .hero-section .star-dot {
  color: var(--blue-deep);
}

.dream-mode .hero-copy {
  color: var(--ink);
  border-color: rgba(45,29,16,.15);
  background:
    radial-gradient(circle at 93% 8%, rgba(92,59,153,.13) 0 8%, transparent 8.5%),
    rgba(255,241,181,.63);
  box-shadow: 0 24px 55px rgba(96,67,20,.13);
}

.dream-mode .hero-section .eyebrow {
  color: var(--blue-deep);
}

.dream-mode .hero-section h1 {
  color: var(--ink);
}

.dream-mode .hero-section h1 em {
  color: var(--blue-deep);
}

.dream-mode .hero-lede {
  color: rgba(45,29,16,.72);
}

.dream-mode .hero-reaction {
  color: rgba(45,29,16,.62);
}

.dream-mode .hero-reaction::before {
  background: var(--blue-deep);
  box-shadow: 0 0 0 5px rgba(92,59,153,.14);
}

.dream-mode .hero-section .button-primary {
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 10px 25px rgba(45,29,16,.12);
}

.dream-mode .hero-section .button-quiet {
  color: rgba(45,29,16,.78);
  border-color: rgba(45,29,16,.3);
}

.dream-mode .hero-section .button-quiet:hover {
  color: var(--ink);
  border-color: var(--ink);
}

.dream-mode .hero-fact {
  color: var(--ink);
  border-color: rgba(45,29,16,.14);
  background: rgba(255,249,221,.78);
  box-shadow: 0 7px 18px rgba(96,67,20,.06);
}

.dream-mode .hero-fact span {
  color: var(--blue-deep);
}

.dream-mode .hero-fact strong {
  color: var(--ink);
}

.dream-mode .hero-art {
  border-color: rgba(45,29,16,.14);
  background:
    linear-gradient(150deg, rgba(255,249,221,.4), rgba(255,157,69,.22)),
    rgba(255,181,46,.48);
  box-shadow: 0 24px 55px rgba(96,67,20,.13);
}

.dream-mode .hero-art::before {
  background:
    radial-gradient(circle at 68% 63%, #ef6a4f 0 29%, transparent 30%),
    linear-gradient(135deg, #ffe06b, #ffba33);
  box-shadow: -18px 19px 0 rgba(92,59,153,.18);
}

.dream-mode .hero-art::after {
  color: rgba(92,59,153,.5);
}

.dream-mode .hero-image-frame {
  border-color: var(--paper);
  box-shadow: 16px 18px 0 rgba(92,59,153,.24), 0 25px 45px rgba(45,29,16,.18);
}

.dream-mode .hero-art .orbit {
  border-color: rgba(92,59,153,.28);
}

.dream-mode .hero-art .moon-slice {
  background: var(--orange);
  box-shadow: 0 0 50px rgba(239,106,79,.35);
}

.dream-mode .hero-art .moon-slice::after {
  background: var(--yellow);
}

.dream-mode .hero-art .art-label {
  color: rgba(45,29,16,.67);
  border-color: rgba(45,29,16,.12);
  border-left-color: var(--blue-deep);
  background: rgba(255,249,221,.88);
  box-shadow: 0 8px 20px rgba(96,67,20,.08);
}

.dream-mode .hero-art .art-label span {
  color: rgba(45,29,16,.55);
}

.dream-mode .hero-art .art-label strong {
  color: var(--ink);
}

/* House exploration redesign: compact copy panel beside a richer mushroom-room diorama. */
.house-section {
  position: relative;
  overflow: hidden;
  padding: 66px 7vw;
  background:
    radial-gradient(circle at 8% 12%, rgba(229,107,140,.2) 0 8%, transparent 8.5%),
    radial-gradient(circle at 94% 88%, rgba(92,59,153,.18) 0 11%, transparent 11.5%),
    linear-gradient(145deg, #fff1bd 0%, #f4d6bc 48%, #e8c4d9 100%);
}

.house-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(285px, .72fr) minmax(0, 1.28fr);
  gap: clamp(20px, 2.6vw, 36px);
  align-items: stretch;
}

.house-sidebar {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid rgba(45,29,16,.14);
  border-radius: 30px;
  background: rgba(255,249,221,.82);
  box-shadow: 0 18px 45px rgba(78,47,48,.12);
  backdrop-filter: blur(5px);
}

.house-section .section-heading {
  max-width: none;
  margin: 0;
}

.house-section .eyebrow {
  margin-bottom: 14px;
  color: #8f3c75;
}

.house-section h2 {
  margin-bottom: 20px;
  font-size: clamp(42px, 4.2vw, 61px);
  line-height: 1.02;
}

.house-section h2 em {
  color: var(--blue-deep);
}

.house-section .section-intro {
  max-width: 430px;
  color: #66505b;
  font-size: 14px;
  line-height: 1.8;
}

.house-sidebar .house-note {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-items: center;
  gap: 5px 15px;
  min-height: 136px;
  padding: 12px;
  border: 1px solid rgba(45,29,16,.13);
  border-radius: 20px;
  background: rgba(255,255,255,.58);
  box-shadow: none;
}

.house-sidebar .house-note-image {
  grid-row: 1 / span 2;
  width: 112px;
  height: 112px;
  border-radius: 15px;
  background: #dce7f4;
  object-fit: contain;
}

.house-sidebar .house-note .note-symbol {
  align-self: end;
  color: #d4499d;
  font-size: 22px;
}

.house-sidebar .house-note p {
  align-self: start;
  max-width: none;
  font-size: 15px;
  line-height: 1.45;
}

.house-scene {
  min-height: 520px;
  border: 8px solid rgba(255,249,221,.8);
  border-radius: 32px;
  background:
    linear-gradient(180deg, transparent 0 64%, rgba(255,255,255,.07) 64% 65%, transparent 65%),
    linear-gradient(#354a79 0 64%, #77625f 64%);
  box-shadow: 0 22px 55px rgba(45,29,16,.18);
}

.house-scene::before {
  z-index: 1;
  inset: 64% 0 0;
  opacity: .7;
  background:
    linear-gradient(120deg, transparent 0 49.5%, rgba(255,255,255,.08) 50% 50.5%, transparent 51%) 0 0 / 92px 100%,
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 2px, transparent 2px 72px);
}

.house-scene::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: -30%;
  left: -12%;
  width: 70%;
  height: 115%;
  background: linear-gradient(115deg, rgba(255,238,172,.18), transparent 62%);
  transform: rotate(-8deg);
  pointer-events: none;
}

.house-scene .window-glow {
  z-index: 1;
  top: 38px;
  left: 5%;
  transform: scale(.9);
  transform-origin: top left;
}

.house-scene .window-frame {
  z-index: 2;
  top: 62px;
  left: 8%;
  transform: scale(.88);
  transform-origin: top left;
}

.house-scene .wall-shelf {
  z-index: 2;
  top: 74px;
  right: 9%;
  transform: scale(.92);
  transform-origin: top right;
}

.house-scene .bed {
  z-index: 2;
  right: 5%;
  bottom: 12%;
  transform: scale(.96);
  transform-origin: bottom right;
}

.house-scene .floor-rug {
  z-index: 2;
  left: 8%;
  bottom: 6%;
  width: 43%;
  transform: none;
}

.house-scene .hotspot {
  z-index: 5;
  width: 38px;
  height: 38px;
}

.house-scene .hotspot-hat {
  top: 30%;
  left: 26%;
}

.house-scene .hotspot-trophy {
  top: 23%;
  right: 17%;
}

.house-scene .hotspot-watermelon {
  bottom: 24%;
  left: 28%;
}

.house-scene .hotspot-mushroom {
  right: 5%;
  bottom: 9%;
}

.house-scene .house-plaque {
  z-index: 4;
  top: 18px;
  bottom: auto;
  left: 22px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  background: rgba(17,29,56,.35);
}

.room-mushroom {
  --cap: #e56b8c;
  --mushroom-scale: 1;
  position: absolute;
  z-index: 3;
  width: 30px;
  height: 43px;
  transform: scale(var(--mushroom-scale)) rotate(var(--mushroom-rotate, 0deg));
  transform-origin: 50% 100%;
  filter: drop-shadow(0 5px 3px rgba(20,22,35,.22));
}

.room-mushroom::before {
  content: '';
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 30px;
  height: 21px;
  border: 3px solid #302352;
  border-radius: 22px 22px 9px 9px;
  background:
    radial-gradient(circle at 29% 39%, #fff8d7 0 2px, transparent 2.5px),
    radial-gradient(circle at 68% 34%, #fff8d7 0 2px, transparent 2.5px),
    var(--cap);
}

.room-mushroom::after {
  content: '';
  position: absolute;
  z-index: 1;
  left: 9px;
  bottom: 0;
  width: 13px;
  height: 27px;
  border: 3px solid #302352;
  border-radius: 5px 5px 8px 8px;
  background: #ffecca;
}

.mushroom-room-a { --mushroom-scale: 1.35; --mushroom-rotate: -8deg; left: 5%; bottom: 9%; }
.mushroom-room-b { --cap: #8057bd; --mushroom-scale: .82; --mushroom-rotate: 7deg; left: 13%; bottom: 8%; }
.mushroom-room-c { --cap: #e7bf3f; --mushroom-scale: 1.08; --mushroom-rotate: -3deg; left: 20%; bottom: 10%; }
.mushroom-room-d { --cap: #d84aa5; --mushroom-scale: .7; --mushroom-rotate: 9deg; left: 37%; bottom: 6%; }
.mushroom-room-e { --cap: #e76262; --mushroom-scale: 1.22; --mushroom-rotate: -7deg; right: 39%; bottom: 11%; }
.mushroom-room-f { --cap: #a86cd0; --mushroom-scale: .77; --mushroom-rotate: 6deg; right: 31%; bottom: 7%; }
.mushroom-room-g { --cap: #e892ba; --mushroom-scale: 1.04; --mushroom-rotate: -4deg; right: 23%; bottom: 8%; }
.mushroom-room-h { --cap: #f0b83e; --mushroom-scale: 1.36; --mushroom-rotate: 7deg; right: 9%; bottom: 8%; }
.mushroom-room-i { --cap: #6f59bd; --mushroom-scale: .72; --mushroom-rotate: -8deg; right: 46%; bottom: 29%; }

@media (min-width: 901px) and (max-width: 1100px) {
  .house-section {
    padding-inline: 5vw;
  }

  .house-layout {
    grid-template-columns: minmax(270px, .76fr) minmax(0, 1.24fr);
    gap: 20px;
  }

  .house-sidebar {
    padding: 25px;
  }

  .house-section h2 {
    font-size: clamp(40px, 4.8vw, 53px);
  }

  .house-sidebar .house-note {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .house-sidebar .house-note-image {
    width: 88px;
    height: 88px;
  }
}

@media (max-width: 900px) {
  .house-section {
    padding: 60px 7vw;
  }

  .house-layout {
    grid-template-columns: 1fr;
  }

  .house-sidebar {
    padding: 28px;
  }

  .house-section .section-intro {
    max-width: 620px;
  }

  .house-sidebar .house-note {
    grid-template-columns: 120px minmax(0, 1fr);
  }

  .house-sidebar .house-note-image {
    width: 120px;
    height: 120px;
  }

  .house-scene {
    min-height: 500px;
  }
}

@media (max-width: 600px) {
  .house-section {
    padding: 50px 5vw;
  }

  .house-sidebar {
    gap: 20px;
    padding: 22px;
    border-radius: 24px;
  }

  .house-section h2 {
    font-size: clamp(40px, 12vw, 54px);
  }

  .house-sidebar .house-note {
    grid-template-columns: 92px minmax(0, 1fr);
    min-height: 116px;
    padding: 10px;
    text-align: left;
  }

  .house-sidebar .house-note-image {
    width: 92px;
    height: 92px;
    margin: 0;
  }

  .house-sidebar .house-note .note-symbol,
  .house-sidebar .house-note p {
    margin: 0;
  }

  .house-scene {
    min-height: 430px;
    border-width: 5px;
    border-radius: 25px;
  }

  .house-scene .window-glow {
    left: 0;
    transform: scale(.66);
  }

  .house-scene .window-frame {
    top: 55px;
    left: 2%;
    transform: scale(.65);
  }

  .house-scene .wall-shelf {
    top: 70px;
    right: 3%;
    transform: scale(.68);
  }

  .house-scene .bed {
    right: -7%;
    bottom: 13%;
    transform: scale(.72);
  }

  .house-scene .floor-rug {
    left: 5%;
    width: 60%;
  }

  .house-scene .house-plaque {
    top: 12px;
    left: 12px;
    font-size: 8px;
  }

  .house-scene .hotspot-hat {
    top: 30%;
    left: 27%;
  }

  .house-scene .hotspot-trophy {
    top: 23%;
    right: 12%;
  }

  .house-scene .hotspot-watermelon {
    bottom: 25%;
    left: 24%;
  }

  .mushroom-room-d,
  .mushroom-room-f,
  .mushroom-room-i {
    display: none;
  }
}

/* Hero poster redesign: artwork on the left, copy on the right, aligned from one top edge. */
.hero-section {
  grid-template-columns: minmax(390px, .94fr) minmax(470px, 1.06fr);
  align-items: start;
  gap: clamp(26px, 4.2vw, 64px);
  min-height: calc(100vh - 78px);
  padding: 48px 8vw 68px;
}

.hero-art {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  align-content: start;
  min-height: 560px;
  padding: 34px 34px 24px;
  border: 1px solid rgba(45,29,16,.14);
  border-radius: 34px;
  background:
    linear-gradient(150deg, rgba(255,249,221,.4), rgba(255,157,69,.22)),
    rgba(255,181,46,.48);
  box-shadow: 0 24px 55px rgba(96,67,20,.13);
}

.hero-art::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 26px;
  right: 25px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 68% 63%, #ef6a4f 0 29%, transparent 30%),
    linear-gradient(135deg, #ffe06b, #ffba33);
  box-shadow: -18px 19px 0 rgba(92,59,153,.18);
}

.hero-art::after {
  content: '✦';
  position: absolute;
  z-index: 1;
  top: 44px;
  left: 31px;
  color: rgba(92,59,153,.5);
  font-size: 26px;
}

.hero-copy {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  display: flex;
  min-height: 560px;
  max-width: none;
  flex-direction: column;
  padding: 34px clamp(28px, 3vw, 42px) 28px;
  border: 1px solid rgba(45,29,16,.15);
  border-radius: 34px;
  background:
    radial-gradient(circle at 93% 8%, rgba(92,59,153,.13) 0 8%, transparent 8.5%),
    rgba(255,241,181,.63);
  box-shadow: 0 24px 55px rgba(96,67,20,.13);
}

.hero-section h1 {
  max-width: 620px;
  margin-bottom: 20px;
  font-size: clamp(58px, 6.25vw, 94px);
  line-height: .93;
  letter-spacing: -.045em;
}

.hero-lede {
  max-width: 590px;
  margin-bottom: 22px;
}

.hero-fact-strip {
  margin-top: auto;
  padding-top: 22px;
}

.hero-fact {
  background: rgba(255,249,221,.78);
  box-shadow: 0 7px 18px rgba(96,67,20,.06);
}

.hero-image-frame {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  width: min(100%, 405px);
  margin: 24px auto 0;
  border-width: 8px;
  border-radius: 28px;
  box-shadow: 16px 18px 0 rgba(92,59,153,.24), 0 25px 45px rgba(45,29,16,.18);
  transform: rotate(-2deg);
}

.hero-image-frame:hover {
  transform: rotate(0deg) translateY(-4px);
}

.hero-art .art-label {
  position: relative;
  z-index: 4;
  grid-column: 1;
  grid-row: 2;
  justify-self: end;
  align-self: end;
  min-width: 155px;
  max-width: 180px;
  margin-top: 20px;
  padding: 11px 14px;
  border: 1px solid rgba(45,29,16,.12);
  border-left: 4px solid var(--blue-deep);
  border-radius: 13px;
  background: rgba(255,249,221,.88);
  box-shadow: 0 8px 20px rgba(96,67,20,.08);
}

.hero-art .art-label span {
  color: rgba(45,29,16,.55);
}

.hero-art .art-label strong {
  margin-top: 3px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.hero-art .mushroom-mini-one {
  z-index: 3;
  left: 8%;
  bottom: 10%;
}

.hero-art .mushroom-mini-two {
  z-index: 3;
  top: 21%;
  right: 7%;
}

@media (min-width: 901px) and (max-width: 1150px) {
  .hero-section {
    grid-template-columns: minmax(330px, .9fr) minmax(0, 1.1fr);
    gap: 24px;
    padding: 42px 5vw 60px;
  }

  .hero-art,
  .hero-copy {
    min-height: 520px;
  }

  .hero-art {
    padding: 27px 27px 22px;
  }

  .hero-copy {
    padding: 30px 28px 24px;
  }

  .hero-section h1 {
    font-size: clamp(52px, 7vw, 76px);
  }

  .hero-image-frame {
    width: min(100%, 350px);
  }

  .hero-fact {
    padding: 10px;
  }
}

@media (max-width: 900px) {
  .hero-section {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 58px 7vw 68px;
  }

  .hero-copy,
  .hero-art {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
  }

  .hero-copy {
    min-height: auto;
  }

  .hero-art {
    min-height: 500px;
  }

  .hero-image-frame {
    width: min(100%, 370px);
  }

  .hero-fact-strip {
    margin-top: 23px;
    padding-top: 0;
  }
}

@media (max-width: 600px) {
  .hero-section {
    gap: 18px;
    padding: 42px 5vw 56px;
  }

  .hero-copy {
    padding: 23px 21px;
    border-radius: 25px;
  }

  .hero-section h1 {
    font-size: clamp(47px, 14.5vw, 59px);
    letter-spacing: -.035em;
  }

  .hero-art {
    min-height: 410px;
    padding: 22px 20px 18px;
    border-radius: 25px;
  }

  .hero-art::before {
    top: 17px;
    right: 17px;
    width: 82px;
    height: 82px;
  }

  .hero-image-frame {
    width: min(100%, 285px);
    margin-top: 18px;
  }

  .hero-art .art-label {
    min-width: 140px;
    margin-top: 14px;
  }
}

/* Keep the final hero layout inside the two-state colour story.
   The blue palette is the default; .dream-mode is unlocked on wake four. */
body:not(.dream-mode) .site-header {
  color: #f7fbff;
  border-bottom-color: rgba(220,241,255,.16);
  background: rgba(25,52,94,.96);
}

body:not(.dream-mode) .hero-section {
  color: #f7fbff;
  background:
    radial-gradient(circle at 86% 16%, rgba(111,94,190,.42), transparent 29%),
    linear-gradient(145deg, #14294c 0%, #244e83 48%, #527fc0 100%);
}

body:not(.dream-mode) .hero-copy {
  color: #f7fbff;
  border-color: rgba(220,241,255,.22);
  background:
    radial-gradient(circle at 93% 8%, rgba(126,104,202,.28) 0 8%, transparent 8.5%),
    rgba(18,42,80,.76);
  box-shadow: 0 24px 55px rgba(5,16,39,.28);
}

body:not(.dream-mode) .hero-art {
  border-color: rgba(220,241,255,.22);
  background:
    linear-gradient(150deg, rgba(218,242,255,.25), rgba(112,91,186,.24)),
    rgba(65,111,168,.72);
  box-shadow: 0 24px 55px rgba(5,16,39,.28);
}

body:not(.dream-mode) .hero-art::before {
  background:
    radial-gradient(circle at 68% 63%, #ff8fc7 0 29%, transparent 30%),
    linear-gradient(135deg, #a9e1ff, #6d86dc);
  box-shadow: -18px 19px 0 rgba(19,39,79,.22);
}

body:not(.dream-mode) .hero-art::after {
  color: rgba(224,242,255,.62);
}

body:not(.dream-mode) .hero-image-frame {
  border-color: #eef9ff;
  box-shadow: 16px 18px 0 rgba(65,49,125,.34), 0 25px 45px rgba(5,16,39,.26);
}

body:not(.dream-mode) .hero-art .art-label {
  color: rgba(229,245,255,.7);
  border-color: rgba(220,241,255,.2);
  border-left-color: #9edcff;
  background: rgba(19,43,81,.88);
  box-shadow: 0 8px 20px rgba(4,18,44,.15);
}

body:not(.dream-mode) .hero-art .art-label span {
  color: rgba(220,241,255,.58);
}

body:not(.dream-mode) .hero-art .art-label strong {
  color: #ffffff;
}

body:not(.dream-mode) .hero-fact {
  color: #f7fbff;
  border-color: rgba(220,241,255,.18);
  background: rgba(88,132,183,.3);
  box-shadow: 0 7px 18px rgba(4,18,44,.12);
}

body.dream-mode .site-header {
  color: var(--ink);
  border-bottom-color: rgba(45,29,16,.12);
  background: rgba(255,201,40,.95);
}

body.dream-mode .hero-section {
  color: var(--ink);
  background:
    radial-gradient(circle at 86% 16%, rgba(239,106,79,.28), transparent 29%),
    linear-gradient(145deg, #ffc928 0%, #ffb52e 52%, #ff9d45 100%);
}

body.dream-mode .hero-copy {
  color: var(--ink);
  border-color: rgba(45,29,16,.15);
  background:
    radial-gradient(circle at 93% 8%, rgba(92,59,153,.13) 0 8%, transparent 8.5%),
    rgba(255,241,181,.63);
  box-shadow: 0 24px 55px rgba(96,67,20,.13);
}

body.dream-mode .hero-art {
  border-color: rgba(45,29,16,.14);
  background:
    linear-gradient(150deg, rgba(255,249,221,.4), rgba(255,157,69,.22)),
    rgba(255,181,46,.48);
  box-shadow: 0 24px 55px rgba(96,67,20,.13);
}

body.dream-mode .hero-art::before {
  background:
    radial-gradient(circle at 68% 63%, #ef6a4f 0 29%, transparent 30%),
    linear-gradient(135deg, #ffe06b, #ffba33);
  box-shadow: -18px 19px 0 rgba(92,59,153,.18);
}

body.dream-mode .hero-art::after {
  color: rgba(92,59,153,.5);
}

body.dream-mode .hero-image-frame {
  border-color: var(--paper);
  box-shadow: 16px 18px 0 rgba(92,59,153,.24), 0 25px 45px rgba(45,29,16,.18);
}

body.dream-mode .hero-art .art-label {
  color: rgba(45,29,16,.67);
  border-color: rgba(45,29,16,.12);
  border-left-color: var(--blue-deep);
  background: rgba(255,249,221,.88);
  box-shadow: 0 8px 20px rgba(96,67,20,.08);
}

body.dream-mode .hero-art .art-label span {
  color: rgba(45,29,16,.55);
}

body.dream-mode .hero-art .art-label strong {
  color: var(--ink);
}

body.dream-mode .hero-fact {
  color: var(--ink);
  border-color: rgba(45,29,16,.14);
  background: rgba(255,249,221,.78);
  box-shadow: 0 7px 18px rgba(96,67,20,.06);
}

/* Yellow cursor companion and falling fragments (desktop pointers only). */
html.cursor-star-enabled,
html.cursor-star-enabled body,
html.cursor-star-enabled * {
  cursor: none !important;
}

.cursor-star {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10001;
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  color: #ffe44f;
  font-family: "Arial Rounded MT Bold", "Segoe UI Symbol", sans-serif;
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  -webkit-text-stroke: 2.4px #f2a22f;
  paint-order: stroke fill;
  filter: drop-shadow(0 4px 4px rgba(45,29,16,.22));
  will-change: transform, opacity;
  transition: opacity .18s ease;
}

.cursor-star.is-visible {
  opacity: 1;
}

.cursor-star-fragment {
  position: fixed;
  z-index: 10000;
  width: var(--fragment-size);
  height: var(--fragment-size);
  opacity: .95;
  pointer-events: none;
  background: var(--fragment-color);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 94%, 50% 72%, 21% 94%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(0 2px 2px rgba(45,29,16,.16));
  animation: cursor-star-fragment-fall var(--fragment-duration) cubic-bezier(.2,.65,.35,1) forwards;
  will-change: transform, opacity;
}

.cursor-star-fragment.is-shard {
  border-radius: 2px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0 50%);
}

@keyframes cursor-star-fragment-fall {
  0% {
    opacity: .95;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }

  100% {
    opacity: 0;
    transform:
      translate3d(var(--fragment-drift), var(--fragment-fall), 0)
      rotate(var(--fragment-spin))
      scale(.15);
  }
}

@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor-star,
  .cursor-star-fragment {
    display: none !important;
  }
}

/* Character profile redesign: layered dopamine cards inside a star-filled night. */
.traits-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 90px 8vw 102px;
  color: #fff9dd;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,112,177,.3) 0 10%, transparent 10.5%),
    radial-gradient(circle at 88% 80%, rgba(255,227,79,.24) 0 13%, transparent 13.5%),
    linear-gradient(138deg, #24163f 0%, #5c3b99 52%, #a83d88 100%);
}

.traits-section::before {
  content: '';
  position: absolute;
  z-index: -2;
  inset: 0;
  opacity: .26;
  background-image: radial-gradient(rgba(255,249,221,.8) 1px, transparent 1px);
  background-size: 25px 25px;
  mask-image: linear-gradient(125deg, black 5%, transparent 82%);
}

.traits-section::after {
  content: '';
  position: absolute;
  z-index: -1;
  right: -110px;
  bottom: -150px;
  width: 410px;
  height: 410px;
  border: 3px solid rgba(255,227,79,.2);
  border-radius: 50%;
  box-shadow:
    0 0 0 38px rgba(255,112,177,.08),
    0 0 0 82px rgba(130,214,245,.05);
}

.traits-content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
}

.traits-heading {
  max-width: 820px;
  margin-bottom: 42px;
}

.traits-section .traits-heading .eyebrow {
  color: #ffe34f;
}

.traits-section .traits-heading h2 {
  color: #fff9dd;
  font-size: clamp(48px, 6.2vw, 84px);
  line-height: 1.01;
  text-shadow: 0 9px 28px rgba(18,10,42,.24);
}

.traits-section .traits-heading h2 em {
  color: #ffe34f;
}

.traits-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(290px, .72fr);
  gap: clamp(22px, 3vw, 38px);
  align-items: stretch;
}

.trait-column {
  position: relative;
  min-height: 370px;
  overflow: hidden;
  padding: clamp(28px, 3.4vw, 44px);
  border: 3px solid #2d1d10;
  border-radius: 34px;
  box-shadow: 14px 16px 0 rgba(18,10,42,.32);
}

.trait-column::before {
  content: '★';
  position: absolute;
  right: -24px;
  bottom: -52px;
  color: rgba(92,59,153,.12);
  font-size: 210px;
  line-height: 1;
  transform: rotate(12deg);
}

.trait-column-like {
  color: #2d1d10;
  background:
    radial-gradient(circle at 89% 14%, rgba(255,112,177,.45) 0 10%, transparent 10.5%),
    linear-gradient(145deg, #fff8cd 0%, #ffe66d 56%, #ffbe45 100%);
  transform: rotate(-.65deg);
}

.trait-column-dark {
  color: #fff9dd;
  background:
    radial-gradient(circle at 18% 82%, rgba(255,227,79,.25) 0 12%, transparent 12.5%),
    linear-gradient(155deg, #ff6f91 0%, #e54e76 48%, #8e327a 100%);
  transform: translateY(18px) rotate(.75deg);
}

.trait-column-dark::before {
  right: -36px;
  bottom: -40px;
  color: rgba(255,249,221,.12);
  font-size: 190px;
  transform: rotate(-10deg);
}

.trait-column-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 23px;
  border-bottom: 1px solid rgba(45,29,16,.22);
}

.trait-column-dark .trait-column-head {
  border-bottom-color: rgba(255,249,221,.28);
}

.trait-label {
  margin: 0;
  padding: 9px 17px;
  border: 2px solid #2d1d10;
  border-radius: 999px;
  color: #2d1d10;
  background: #ff70b1;
  box-shadow: 4px 5px 0 rgba(45,29,16,.16);
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 800;
}

.trait-column-dark .trait-label {
  color: #2d1d10;
  background: #ffe34f;
}

.trait-index {
  color: rgba(45,29,16,.58);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
}

.trait-column-dark .trait-index {
  color: rgba(255,249,221,.66);
}

.trait-cloud {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 13px;
  padding-top: 29px;
}

.trait-cloud span {
  padding: 12px 17px;
  border: 2px solid rgba(45,29,16,.78);
  border-radius: 999px;
  color: #2d1d10;
  background: rgba(255,249,221,.92);
  box-shadow: 4px 5px 0 rgba(45,29,16,.13);
  font-size: clamp(15px, 1.5vw, 19px);
  transition: transform .2s ease, box-shadow .2s ease;
}

.trait-cloud span:hover {
  box-shadow: 6px 8px 0 rgba(45,29,16,.15);
  transform: translateY(-3px) rotate(-1deg);
}

.like-cloud span:nth-child(2) {
  background: #bcead8;
  transform: rotate(-2deg);
}

.like-cloud span:nth-child(3) {
  color: #2d1d10;
  background: #ff9fbd;
  transform: rotate(2deg);
}

.like-cloud span:nth-child(4) {
  background: #fff9dd;
}

.like-cloud span:nth-child(5) {
  background: #a9e3ff;
  transform: rotate(-2deg);
}

.like-cloud span:nth-child(6) {
  color: #fff9dd;
  background: #6e50ad;
}

.like-cloud span:nth-child(7) {
  background: #ffae63;
  transform: rotate(1.5deg);
}

.like-cloud span:nth-child(8) {
  color: #ffe34f;
  background: #3f286f;
  transform: rotate(-2deg);
}

.dislike-cloud span {
  border-color: rgba(255,249,221,.86);
  color: #fff9dd;
  background: rgba(49,27,83,.48);
  box-shadow: 4px 5px 0 rgba(34,17,63,.22);
}

.dislike-cloud span:first-child {
  color: #2d1d10;
  background: #ffe34f;
  transform: rotate(2deg);
}

.dislike-cloud span:nth-child(2) {
  background: rgba(45,29,16,.42);
  transform: rotate(-2deg);
}

.traits-star-field {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.traits-star-field span {
  position: absolute;
  color: rgba(255,227,79,.78);
  font-size: clamp(18px, 2.5vw, 38px);
  line-height: 1;
  text-shadow: 0 5px 14px rgba(18,10,42,.24);
  transform: rotate(var(--star-turn, 0deg));
}

.traits-star-field span:nth-child(1) { top: 8%; left: 4%; --star-turn: -12deg; }
.traits-star-field span:nth-child(2) { top: 20%; left: 29%; color: rgba(255,249,221,.55); --star-turn: 13deg; }
.traits-star-field span:nth-child(3) { top: 6%; right: 21%; color: rgba(130,214,245,.62); --star-turn: 7deg; }
.traits-star-field span:nth-child(4) { top: 18%; right: 4%; color: rgba(255,112,177,.74); --star-turn: -18deg; }
.traits-star-field span:nth-child(5) { top: 52%; left: 2%; color: rgba(130,214,245,.64); --star-turn: 16deg; }
.traits-star-field span:nth-child(6) { top: 68%; left: 14%; color: rgba(255,249,221,.52); --star-turn: -8deg; }
.traits-star-field span:nth-child(7) { bottom: 8%; left: 35%; color: rgba(255,112,177,.7); --star-turn: 18deg; }
.traits-star-field span:nth-child(8) { top: 45%; left: 52%; color: rgba(255,249,221,.34); --star-turn: -14deg; }
.traits-star-field span:nth-child(9) { bottom: 12%; right: 28%; color: rgba(130,214,245,.58); --star-turn: 8deg; }
.traits-star-field span:nth-child(10) { top: 42%; right: 3%; --star-turn: -6deg; }
.traits-star-field span:nth-child(11) { bottom: 5%; right: 7%; color: rgba(255,112,177,.7); --star-turn: 12deg; }
.traits-star-field span:nth-child(12) { top: 4%; left: 48%; color: rgba(255,249,221,.48); --star-turn: -11deg; }

/* Click sparkle burst. */
.click-sparkle-burst {
  position: fixed;
  z-index: 10002;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.click-sparkle-burst::before {
  content: '';
  position: absolute;
  top: -11px;
  left: -11px;
  width: 22px;
  height: 22px;
  border: 4px solid rgba(255,227,79,.98);
  border-radius: 50%;
  box-shadow: 0 0 22px rgba(255,227,79,.72);
  animation: click-sparkle-ring .72s ease-out forwards;
}

.click-sparkle-burst::after {
  content: '';
  position: absolute;
  top: -42px;
  left: -42px;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,249,221,.95) 0 7%, rgba(255,227,79,.68) 8% 22%, transparent 66%);
  animation: click-sparkle-flash .62s ease-out forwards;
}

.click-sparkle-burst i {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--sparkle-size);
  height: var(--sparkle-size);
  opacity: 0;
  background: var(--sparkle-color);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 94%, 50% 72%, 21% 94%, 32% 57%, 2% 35%, 39% 35%);
  filter:
    drop-shadow(0 2px 2px rgba(45,29,16,.2))
    drop-shadow(0 0 7px var(--sparkle-color));
  animation: click-sparkle-pop .92s cubic-bezier(.16,.72,.24,1) var(--sparkle-delay) forwards;
}

.click-sparkle-burst i.is-dot {
  border-radius: 50%;
  clip-path: none;
}

@keyframes click-sparkle-ring {
  from {
    opacity: .9;
    transform: scale(.25);
  }

  to {
    opacity: 0;
    transform: scale(6);
  }
}

@keyframes click-sparkle-flash {
  0% {
    opacity: 0;
    transform: scale(.15);
  }

  22% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(1.7);
  }
}

@keyframes click-sparkle-pop {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(.2);
  }

  18% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform:
      translate3d(var(--sparkle-x), var(--sparkle-y), 0)
      rotate(var(--sparkle-spin))
      scale(.15);
  }
}

@media (max-width: 900px) {
  .traits-section {
    padding: 78px 6vw 90px;
  }

  .traits-layout {
    grid-template-columns: 1fr;
  }

  .trait-column,
  .trait-column-like,
  .trait-column-dark {
    min-height: auto;
    transform: none;
  }

  .trait-column-dark {
    margin-top: 0;
  }
}

@media (max-width: 600px) {
  .traits-section {
    padding: 66px 5vw 74px;
  }

  .traits-section .traits-heading h2 {
    font-size: clamp(43px, 12vw, 57px);
  }

  .trait-column {
    padding: 25px 21px 28px;
    border-width: 2px;
    border-radius: 25px;
    box-shadow: 8px 10px 0 rgba(18,10,42,.28);
  }

  .trait-column-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 19px;
  }

  .trait-cloud {
    gap: 10px;
    padding-top: 23px;
  }

  .trait-cloud span {
    padding: 10px 13px;
    font-size: 15px;
  }

  .traits-star-field span:nth-child(n+8) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .click-sparkle-burst {
    display: none !important;
  }
}

/* Slow colour blocks keep the full page visually alive without blocking content. */
.ambient-flow {
  position: fixed;
  z-index: 45;
  inset: 0;
  overflow: hidden;
  opacity: 1;
  pointer-events: none;
  mix-blend-mode: soft-light;
  transition: opacity .45s ease;
}

.ambient-flow span {
  position: absolute;
  display: block;
  width: 1em;
  height: 1em;
  opacity: var(--flow-opacity, .16);
  color: var(--flow-colour);
  font-family: "Arial Rounded MT Bold", "Segoe UI Symbol", sans-serif;
  font-size: var(--flow-size);
  font-weight: 900;
  line-height: 1;
  -webkit-text-stroke: .045em rgba(255,249,221,.16);
  paint-order: stroke fill;
  filter: drop-shadow(0 .06em .12em rgba(61,39,107,.13));
  will-change: transform;
  animation: ambient-colour-drift var(--flow-duration) ease-in-out var(--flow-delay, 0s) infinite alternate;
}

.ambient-flow span::before {
  content: '★';
  display: block;
}

.ambient-flow span:nth-child(1) {
  top: 7%;
  left: -8%;
  --flow-size: 190px;
  --flow-colour: #ffe34f;
  --flow-opacity: .17;
  --flow-duration: 28s;
  --flow-delay: -9s;
  --flow-x: 25vw;
  --flow-y: 17vh;
  --flow-turn: 24deg;
  --flow-x-end: -11vw;
  --flow-y-end: 8vh;
  --flow-turn-end: -15deg;
}

.ambient-flow span:nth-child(2) {
  top: 33%;
  right: -12%;
  --flow-size: 260px;
  --flow-colour: #3d276b;
  --flow-opacity: .14;
  --flow-duration: 34s;
  --flow-delay: -18s;
  --flow-x: -31vw;
  --flow-y: 13vh;
  --flow-turn: -30deg;
  --flow-x-end: 14vw;
  --flow-y-end: 7vh;
  --flow-turn-end: 18deg;
}

.ambient-flow span:nth-child(3) {
  bottom: 3%;
  left: 14%;
  --flow-size: 135px;
  --flow-colour: #fff9dd;
  --flow-opacity: .18;
  --flow-duration: 25s;
  --flow-delay: -6s;
  --flow-x: 38vw;
  --flow-y: -20vh;
  --flow-turn: 34deg;
  --flow-x-end: -17vw;
  --flow-y-end: -9vh;
  --flow-turn-end: -20deg;
}

.ambient-flow span:nth-child(4) {
  top: 62%;
  left: 52%;
  --flow-size: 220px;
  --flow-colour: #3d276b;
  --flow-opacity: .11;
  --flow-duration: 31s;
  --flow-delay: -22s;
  --flow-x: -36vw;
  --flow-y: 14vh;
  --flow-turn: 42deg;
  --flow-x-end: 13vw;
  --flow-y-end: -12vh;
  --flow-turn-end: -25deg;
}

.ambient-flow span:nth-child(5) {
  top: 18%;
  left: 43%;
  --flow-size: 105px;
  --flow-colour: #ffe34f;
  --flow-opacity: .13;
  --flow-duration: 37s;
  --flow-delay: -13s;
  --flow-x: 32vw;
  --flow-y: 35vh;
  --flow-turn: -38deg;
  --flow-x-end: -14vw;
  --flow-y-end: -16vh;
  --flow-turn-end: 22deg;
}

@keyframes ambient-colour-drift {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }

  48% {
    transform:
      translate3d(var(--flow-x), var(--flow-y), 0)
      rotate(var(--flow-turn))
      scale(1.14);
  }

  100% {
    transform:
      translate3d(var(--flow-x-end), var(--flow-y-end), 0)
      rotate(var(--flow-turn-end))
      scale(.92);
  }
}

/* Three-colour lock for the character profile: purple, yellow, and cream only. */
.traits-section {
  --traits-purple: #3d276b;
  --traits-yellow: #ffe34f;
  --traits-cream: #fff9dd;
  color: var(--traits-cream);
  background:
    radial-gradient(circle at 12% 18%, rgba(255,227,79,.24) 0 10%, transparent 10.5%),
    radial-gradient(circle at 88% 80%, rgba(255,249,221,.12) 0 13%, transparent 13.5%),
    var(--traits-purple);
}

.traits-section::before {
  background-image: radial-gradient(rgba(255,249,221,.72) 1px, transparent 1px);
}

.traits-section::after {
  border-color: rgba(255,227,79,.22);
  box-shadow:
    0 0 0 38px rgba(255,227,79,.07),
    0 0 0 82px rgba(255,249,221,.04);
}

.traits-section .traits-heading .eyebrow,
.traits-section .traits-heading h2 em {
  color: var(--traits-yellow);
}

.traits-section .traits-heading h2 {
  color: var(--traits-cream);
  text-shadow: 0 9px 28px rgba(61,39,107,.28);
}

.traits-section .trait-column {
  border-color: var(--traits-purple);
  box-shadow: 14px 16px 0 rgba(61,39,107,.34);
}

.traits-section .trait-column-like {
  color: var(--traits-purple);
  background: var(--traits-yellow);
}

.traits-section .trait-column-dark {
  color: var(--traits-purple);
  background: var(--traits-cream);
}

.traits-section .trait-column::before {
  color: rgba(61,39,107,.12);
}

.traits-section .trait-column-head,
.traits-section .trait-column-dark .trait-column-head {
  border-bottom-color: rgba(61,39,107,.24);
}

.traits-section .trait-label {
  border-color: var(--traits-purple);
  color: var(--traits-cream);
  background: var(--traits-purple);
  box-shadow: 4px 5px 0 rgba(61,39,107,.15);
}

.traits-section .trait-column-dark .trait-label {
  color: var(--traits-purple);
  background: var(--traits-yellow);
}

.traits-section .trait-index,
.traits-section .trait-column-dark .trait-index {
  color: rgba(61,39,107,.62);
}

.traits-section .trait-cloud span,
.traits-section .like-cloud span:nth-child(2),
.traits-section .like-cloud span:nth-child(3),
.traits-section .like-cloud span:nth-child(4),
.traits-section .like-cloud span:nth-child(5),
.traits-section .like-cloud span:nth-child(7) {
  border-color: var(--traits-purple);
  color: var(--traits-purple);
  background: var(--traits-cream);
  box-shadow: 4px 5px 0 rgba(61,39,107,.14);
}

.traits-section .like-cloud span:nth-child(even) {
  color: var(--traits-purple);
  background: var(--traits-yellow);
}

.traits-section .like-cloud span:nth-child(6),
.traits-section .like-cloud span:nth-child(8),
.traits-section .dislike-cloud span,
.traits-section .dislike-cloud span:nth-child(2) {
  border-color: var(--traits-purple);
  color: var(--traits-cream);
  background: var(--traits-purple);
  box-shadow: 4px 5px 0 rgba(61,39,107,.16);
}

.traits-section .dislike-cloud span:first-child {
  border-color: var(--traits-purple);
  color: var(--traits-purple);
  background: var(--traits-yellow);
}

.traits-section .traits-star-field span {
  color: rgba(255,227,79,.72);
  text-shadow: 0 5px 14px rgba(61,39,107,.25);
}

.traits-section .traits-star-field span:nth-child(3n) {
  color: rgba(255,249,221,.58);
}

body.house-flow-muted .ambient-flow {
  opacity: 0;
}

body.house-flow-muted .ambient-flow span {
  animation-play-state: paused;
}

.house-scene .hotspot,
.house-scene .hotspot-mushroom {
  border: 2px solid #fff9dd;
  color: #3d276b;
  background: #ffe34f;
  box-shadow:
    0 0 0 4px rgba(255,227,79,.2),
    0 8px 20px rgba(17,29,56,.28);
}

.house-scene .hotspot:hover,
.house-scene .hotspot:focus-visible {
  color: #3d276b;
  background: #fff9dd;
  box-shadow:
    0 0 0 6px rgba(255,227,79,.28),
    0 10px 24px rgba(17,29,56,.3);
}

.house-scene .hotspot-watermelon {
  bottom: 20%;
}

@media (max-width: 600px) {
  .ambient-flow span {
    opacity: .1;
  }

  .house-scene .hotspot-watermelon {
    bottom: 21%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-flow span {
    animation: none !important;
  }
}

/* Exploration points: staggered yellow pulses make all four discoveries obvious. */
.house-scene .hotspot {
  animation: hotspot-core-glow 2.35s ease-in-out infinite;
}

.house-scene .hotspot::after {
  content: '';
  position: absolute;
  inset: -7px;
  border: 2px solid rgba(255,227,79,.8);
  border-radius: 50%;
  pointer-events: none;
  animation: hotspot-ripple 2.35s ease-out infinite;
}

.house-scene .hotspot-trophy,
.house-scene .hotspot-trophy::after {
  animation-delay: .38s;
}

.house-scene .hotspot-watermelon,
.house-scene .hotspot-watermelon::after {
  animation-delay: .76s;
}

.house-scene .hotspot-mushroom,
.house-scene .hotspot-mushroom::after {
  animation-delay: 1.14s;
}

@keyframes hotspot-core-glow {
  0%,
  100% {
    filter: brightness(1) drop-shadow(0 0 0 rgba(255,227,79,0));
  }

  48% {
    filter: brightness(1.12) drop-shadow(0 0 10px rgba(255,227,79,.82));
  }
}

@keyframes hotspot-ripple {
  0% {
    opacity: 0;
    transform: scale(.72);
  }

  22% {
    opacity: .88;
  }

  78%,
  100% {
    opacity: 0;
    transform: scale(1.72);
  }
}

/* Story-card palettes now echo the replacement illustrations. */
.stories-section .story-card-moss {
  border-color: #ffe34f;
  background:
    radial-gradient(circle at 88% 12%, rgba(255,227,79,.32) 0 12%, transparent 12.5%),
    linear-gradient(145deg, #ff3b38 0%, #c63863 55%, #7b2d76 100%);
}

.stories-section .story-card-moss::before {
  background: rgba(255,227,79,.18);
}

.stories-section .story-card-moss .story-icon {
  color: #ffe34f;
}

.stories-section .story-card-moss .story-image {
  border-color: #ffe34f;
}

.stories-section .story-card-yellow {
  border-color: #ff70b1;
  background:
    radial-gradient(circle at 14% 14%, rgba(255,112,177,.38) 0 13%, transparent 13.5%),
    linear-gradient(145deg, #5427c9 0%, #7430e8 50%, #b52291 100%);
}

.stories-section .story-card-yellow::before {
  background: rgba(255,112,177,.2);
}

.stories-section .story-card-yellow .story-icon {
  color: #ff9fd0;
}

.stories-section .story-card-yellow .story-image {
  border-color: #ff70b1;
}

/* Profile tags: likes use one light treatment; dislikes use one dark treatment. */
.traits-section .trait-column-like .trait-label,
.traits-section .like-cloud span:nth-child(n) {
  border-color: var(--traits-purple);
  color: var(--traits-purple);
  background: var(--traits-cream);
  box-shadow: 4px 5px 0 rgba(61,39,107,.14);
}

.traits-section .trait-column-dark .trait-label,
.traits-section .dislike-cloud span:nth-child(n) {
  border-color: var(--traits-purple);
  color: var(--traits-cream);
  background: var(--traits-purple);
  box-shadow: 4px 5px 0 rgba(61,39,107,.16);
}

/* The click ring grows wider while its stroke becomes progressively thinner. */
@keyframes click-sparkle-ring {
  0% {
    top: -9px;
    left: -9px;
    width: 18px;
    height: 18px;
    border-width: 5px;
    opacity: .98;
    box-shadow: 0 0 24px rgba(255,227,79,.78);
    transform: none;
  }

  48% {
    border-width: 1.8px;
    opacity: .66;
  }

  100% {
    top: -82px;
    left: -82px;
    width: 164px;
    height: 164px;
    border-width: .35px;
    opacity: 0;
    box-shadow: 0 0 5px rgba(255,227,79,.18);
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .house-scene .hotspot,
  .house-scene .hotspot::after {
    animation: none !important;
  }
}

/* Cart quantities: identical products share one row with accessible controls. */
.cart-line {
  align-items: stretch;
}

.cart-line-copy {
  min-width: 0;
  flex: 1;
}

.cart-line-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 9px;
}

.cart-quantity {
  display: grid;
  grid-template-columns: 30px 44px 30px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  background: rgba(255,255,255,.07);
}

.cart-quantity-input {
  width: 44px;
  min-width: 0;
  height: 30px;
  padding: 0 3px;
  border: 0;
  color: #fff9dd;
  background: transparent;
  font-family: var(--mono);
  font-size: 11px;
  text-align: center;
  appearance: textfield;
}

.cart-quantity-input::-webkit-inner-spin-button,
.cart-quantity-input::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

.cart-quantity-input:focus {
  outline: 2px solid var(--yellow-bright);
  outline-offset: -2px;
}

.cart-quantity-button {
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  border: 0;
  color: var(--yellow-bright);
  background: transparent;
  font-size: 17px;
  line-height: 1;
  transition: color .18s, background .18s, transform .18s;
}

.cart-quantity-button:hover,
.cart-quantity-button:focus-visible {
  color: var(--blue-dark);
  background: var(--yellow-bright);
}

.cart-quantity-button:active {
  transform: scale(.86);
}

.cart-quantity-button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -3px;
}

/* Each three-answer path now lands on one of 27 explicit dream results. */
.quiz-result-code {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 10px;
  border: 1px solid rgba(61,39,107,.28);
  border-radius: 999px;
  color: rgba(61,39,107,.72);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .08em;
}

/* Seventeen interactive mushrooms and the three-second full-screen easter egg. */
.room-mushrooms {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
}

.room-mushroom {
  display: block;
  padding: 0;
  border: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  transition: opacity .24s ease, transform .34s cubic-bezier(.2,.8,.2,1), filter .2s;
}

.room-mushroom:hover {
  filter: drop-shadow(0 5px 3px rgba(20,22,35,.22));
}

.room-mushroom:focus-visible {
  outline: 3px solid #ffe34f;
  outline-offset: 5px;
  border-radius: 12px;
}

.room-mushroom.is-picked {
  animation: room-mushroom-disappear .66s cubic-bezier(.18,.72,.2,1) forwards;
  pointer-events: none;
}

.room-mushroom.is-regrowing {
  animation: room-mushroom-regrow .58s cubic-bezier(.2,.9,.24,1.28) both;
  animation-delay: var(--regrow-delay, 0ms);
}

.mushroom-room-j { --cap: #4da7d9; --mushroom-scale: .68; --mushroom-rotate: 8deg; left: 29%; bottom: 38%; }
.mushroom-room-k { --cap: #e76262; --mushroom-scale: .9; --mushroom-rotate: -6deg; left: 41%; bottom: 27%; }
.mushroom-room-l { --cap: #e7bf3f; --mushroom-scale: .64; --mushroom-rotate: 5deg; left: 51%; bottom: 43%; }
.mushroom-room-m { --cap: #d84aa5; --mushroom-scale: .84; --mushroom-rotate: -9deg; right: 42%; bottom: 20%; }
.mushroom-room-n { --cap: #8057bd; --mushroom-scale: .63; --mushroom-rotate: 7deg; right: 27%; bottom: 35%; }
.mushroom-room-o { --cap: #e56b8c; --mushroom-scale: .88; --mushroom-rotate: -5deg; right: 14%; bottom: 34%; }
.mushroom-room-p { --cap: #e7bf3f; --mushroom-scale: .68; --mushroom-rotate: 9deg; right: 4%; bottom: 27%; }
.mushroom-room-q { --cap: #63b97c; --mushroom-scale: .92; --mushroom-rotate: -6deg; left: 46%; bottom: 7%; }

.mushroom-count-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.mushroom-explosion {
  position: fixed;
  z-index: 200;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility 0s linear .22s;
}

.mushroom-explosion.is-active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.mushroom-explosion::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.96) 0 3%, rgba(255,227,79,.82) 8%, rgba(255,95,162,.34) 23%, transparent 48%),
    rgba(61,39,107,.18);
}

.mushroom-explosion.is-active::before {
  animation: mushroom-screen-flash 1.05s ease-out both;
}

.mushroom-explosion::after {
  content: '蘑菇大爆炸！';
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  padding: 13px 24px;
  border: 3px solid #3d276b;
  border-radius: 999px;
  color: #3d276b;
  background: #ffe34f;
  box-shadow: 8px 9px 0 rgba(61,39,107,.42);
  opacity: 0;
  font-family: var(--serif);
  font-size: clamp(22px, 4vw, 42px);
  font-weight: 700;
  white-space: nowrap;
  transform: translate(-50%, -50%) scale(.2) rotate(-7deg);
}

.mushroom-explosion.is-active::after {
  animation: mushroom-boom-title 2.6s cubic-bezier(.2,.8,.2,1) both;
}

.mushroom-burst-piece {
  --cap: #ff5fa2;
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 43px;
  opacity: 0;
  filter: drop-shadow(0 7px 4px rgba(20,22,35,.28));
  animation: mushroom-burst-flight 2.72s cubic-bezier(.12,.72,.2,1) both;
  animation-delay: var(--piece-delay, 0ms);
}

.mushroom-burst-piece::before {
  content: '';
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 30px;
  height: 21px;
  border: 3px solid #302352;
  border-radius: 22px 22px 9px 9px;
  background:
    radial-gradient(circle at 29% 39%, #fff8d7 0 2px, transparent 2.5px),
    radial-gradient(circle at 68% 34%, #fff8d7 0 2px, transparent 2.5px),
    var(--cap);
}

.mushroom-burst-piece::after {
  content: '';
  position: absolute;
  z-index: 1;
  left: 9px;
  bottom: 0;
  width: 13px;
  height: 27px;
  border: 3px solid #302352;
  border-radius: 5px 5px 8px 8px;
  background: #ffecca;
}

@keyframes room-mushroom-regrow {
  0% {
    opacity: 0;
    transform: translateY(13px) scale(0) rotate(var(--mushroom-rotate, 0deg));
  }

  100% {
    opacity: 1;
    transform: scale(var(--mushroom-scale)) rotate(var(--mushroom-rotate, 0deg));
  }
}

@keyframes room-mushroom-disappear {
  0% {
    opacity: 1;
    transform: scale(var(--mushroom-scale)) rotate(var(--mushroom-rotate, 0deg));
  }

  65% {
    opacity: .42;
    transform: scale(1.65) rotate(var(--mushroom-rotate, 0deg));
  }

  100% {
    opacity: 0;
    transform: scale(2.25) rotate(var(--mushroom-rotate, 0deg));
  }
}

@keyframes mushroom-burst-flight {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.05) rotate(0deg);
  }

  8% {
    opacity: 1;
  }

  65%,
  84% {
    opacity: 1;
    transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(var(--spin)) scale(var(--piece-scale));
  }

  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(var(--spin)) scale(var(--piece-scale));
  }
}

@keyframes mushroom-screen-flash {
  0% { opacity: 0; transform: scale(.3); }
  16% { opacity: 1; }
  100% { opacity: 0; transform: scale(2); }
}

@keyframes mushroom-boom-title {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-7deg); }
  15%,
  62% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-3deg); }
  100% { opacity: 0; transform: translate(-50%, -65%) scale(1.18) rotate(2deg); }
}

@media (max-width: 600px) {
  .room-mushrooms {
    transform: scale(.88);
    transform-origin: 50% 100%;
  }

  .mushroom-burst-piece {
    width: 24px;
    height: 35px;
  }

  .mushroom-burst-piece::before {
    width: 24px;
    height: 17px;
    border-width: 2px;
  }

  .mushroom-burst-piece::after {
    left: 7px;
    width: 11px;
    height: 22px;
    border-width: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .room-mushroom.is-regrowing {
    animation: none !important;
  }

  .room-mushroom.is-picked {
    opacity: 0;
    animation: none !important;
  }

  .mushroom-burst-piece {
    opacity: 1;
    animation: none !important;
    transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(var(--spin)) scale(var(--piece-scale));
  }

  .mushroom-explosion.is-active::before,
  .mushroom-explosion.is-active::after {
    animation-duration: .01ms !important;
  }
}

/* All four exploration points use one flat circle-and-handle search mark. */
.house-scene .hotspot {
  font-size: 0;
  line-height: 1;
}

.search-icon {
  position: relative;
  display: block;
  width: 19px;
  height: 19px;
}

.search-icon::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.search-icon::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 3px;
  width: 8px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: rotate(45deg);
  transform-origin: center;
}

/* Slightly reduce only the first-page hero title. */
.hero-section h1 {
  font-size: clamp(56px, 6vw, 88px);
}

@media (max-width: 900px) {
  .hero-section h1 {
    font-size: clamp(51px, 6.4vw, 72px);
  }
}

@media (max-width: 600px) {
  .hero-section h1 {
    font-size: clamp(45px, 14vw, 57px);
  }
}

/* Keep the two hero mushroom caps above their stems. */
.hero-art .mushroom-mini {
  isolation: isolate;
}

.hero-art .mushroom-mini::after {
  z-index: -1;
}

.hero-art .mushroom-mini span {
  z-index: 1;
}

/* Remove the circular colour-block decorations from the homepage hero. */
.hero-section::after,
.hero-art::before,
.hero-art .moon-slice {
  display: none;
}

body:not(.dream-mode) .hero-section {
  background: linear-gradient(145deg, #14294c 0%, #244e83 48%, #527fc0 100%);
}

body:not(.dream-mode) .hero-copy {
  background: rgba(18, 42, 80, .76);
}

body.dream-mode .hero-section {
  background: linear-gradient(145deg, #ffc928 0%, #ffb52e 52%, #ff9d45 100%);
}

body.dream-mode .hero-copy {
  background: rgba(255, 241, 181, .63);
}

/* Keep the complete title phrase on the second line. */
.hero-title-line {
  display: block;
  white-space: nowrap;
  font-size: .86em;
  letter-spacing: -.055em;
}

@media (max-width: 900px) {
  .hero-title-line {
    font-size: .82em;
  }
}

@media (max-width: 600px) {
  .hero-title-line {
    font-size: .76em;
  }
}

/* Match both hero-title lines while keeping the second line intact. */
.hero-section h1 {
  font-size: clamp(52px, 5.6vw, 78px);
}

.hero-title-line {
  font-size: 1em;
  letter-spacing: -.055em;
}

@media (max-width: 900px) {
  .hero-section h1 {
    font-size: clamp(48px, 6vw, 68px);
  }
}

@media (max-width: 600px) {
  .hero-section h1 {
    font-size: clamp(40px, 12.5vw, 52px);
  }
}