/* Zayna's corner: soft pastels and a little care from far away. */
:root {
  --paper: #fffafd;
  --blush: #ece8f4;
  --petal: #d1c5e5;
  --pink: #9377c2;
  --pink-dark: #614394;
  --berry: #322843;
  --muted: #605572;
  --line: #d1c6e5;
  --display: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --body: "Avenir Next", Avenir, "Segoe UI", sans-serif;
}

body { background: var(--paper); letter-spacing: -.01em; }
.eyebrow { font-size: .68rem; font-weight: 800; letter-spacing: .13em; }
h1, h2, h3 { font-weight: 500; }

.primary-button, .outline-button {
  min-height: 48px;
  padding: 11px 21px;
  border-radius: 8px;
  font-size: .84rem;
  font-weight: 750;
  box-shadow: none;
  transition: background .2s, transform .2s;
}
.primary-button { background: var(--berry); }
.primary-button:not(:disabled):hover { background: var(--pink-dark); box-shadow: none; transform: translateY(-2px); }
.outline-button { background: transparent; border-color: var(--berry); }
.outline-button:hover { background: #e8e3f2; }

.floating-nav {
  top: 0;
  width: 100%;
  min-height: 70px;
  padding: 9px max(24px, calc((100vw - 1200px) / 2));
  border: 0;
  border-bottom: 1px solid #b8a6d7;
  border-radius: 0;
  background: #fffafdF5;
  box-shadow: none;
  gap: 25px;
}
.nav-brand { color: var(--berry); font-family: var(--display); font-size: 1.3rem; letter-spacing: -.055em; }
.brand-heart { color: var(--pink); font-family: var(--body); font-size: .98rem; letter-spacing: 0; transform: rotate(-15deg); }
.nav-links { gap: 3px; }
.nav-links a { color: var(--berry); padding: 9px 10px; border-radius: 7px; font-size: .8rem; font-weight: 650; }
.nav-links a:hover { background: #e7e1f2; }
.nav-logout { margin: 0; }
.nav-logout button { color: var(--muted); padding: 9px 10px; border: 0; border-radius: 7px; background: transparent; font-size: .8rem; font-weight: 650; }
.nav-logout button:hover { background: #e7e1f2; }
.nav-reset { min-height: 40px; padding: 8px 15px; border-radius: 7px; background: #cdc1e3; color: var(--berry); font-size: .77rem; }
.nav-reset:hover { background: #bcabd9; }
.nav-reset span { margin-left: 8px; }

.nav-sos { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; margin-left: 4px; padding: 8px 11px; border: 0; border-radius: 7px; background: #614394; color: #fff; font-size: .78rem; font-weight: 750; white-space: nowrap; }
.nav-sos:hover { background: #4c3474; }
.nav-sos svg { display: block; flex: none; width: 19px; height: 19px; }
.sos-dialog { position: fixed; inset: 0; width: min(320px, calc(100% - 32px)); max-height: calc(100svh - 32px); margin: auto; padding: 46px 15px 15px; border: 1px solid #bba9d9; border-radius: 10px; background: #fffafd; color: var(--berry); box-shadow: 0 24px 75px #261a3b85; }
.sos-dialog::backdrop { background: #241a34b8; backdrop-filter: blur(3px); }
.sos-close { position: absolute; top: 7px; right: 9px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; background: transparent; color: var(--berry); font-size: 1.55rem; line-height: 1; }
.sos-dialog a { display: flex; align-items: center; min-height: 52px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--berry); font-size: .88rem; font-weight: 750; }
.sos-dialog a + a { margin-top: 8px; }
.sos-dialog a:hover { background: #ece8f4; }

.hero {
  display: block;
  max-width: none;
  min-height: 0;
  padding: 0;
  background-color: #e2dbef;
  background-image: radial-gradient(circle, #714fab35 1px, transparent 1.4px);
  background-size: 21px 21px;
}
.hero:after, .hero-stars, .live-dot { display: none; }
.hero-inner {
  width: min(900px, calc(100% - 48px));
  min-height: 510px;
  margin: auto;
  padding: 120px 0 68px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.hero-content { width: 100%; max-width: 850px; position: relative; z-index: 2; }
.hero-content .eyebrow { color: #553b82; display: block; }
.hero h1 {
  margin: 17px auto 20px;
  font-size: clamp(3.1rem, 8vw, 6.8rem);
  line-height: .94;
  letter-spacing: -.085em;
}
.hero h1 em { color: #7350b0; font-style: italic; }
.hero-name-line { display: block; min-height: 1em; white-space: nowrap; }
#hero-name { display: inline-block; transition: opacity .22s ease, transform .22s ease; }
#hero-name.changing { opacity: 0; transform: translateY(8px); }
.hero-content > p { max-width: 500px; margin: 0 auto 24px; color: var(--berry); font-family: var(--body); font-size: clamp(1.05rem, 2vw, 1.35rem); font-weight: 500; }
.hero-button { min-width: 160px; }

.content-wrap { width: min(1080px, calc(100% - 48px)); }
.cozy-section { padding: 69px 0; border-bottom: 1px solid var(--line); }
.section-intro { margin-bottom: 28px; }
.section-intro h2 { margin: 7px 0 0; font-size: clamp(2.9rem, 5.2vw, 5.3rem); letter-spacing: -.07em; line-height: .98; }
.mood-grid { gap: 0; border: 1px solid #bba9d9; }
.mood-button {
  min-height: 130px;
  padding: 23px;
  border: 0;
  border-right: 1px solid #bba9d9;
  border-radius: 0;
  background: #ebe6f4;
  color: var(--berry);
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: column;
  font-size: .94rem;
  box-shadow: none;
}
.mood-button:nth-child(2) { background: #e3dcef; }
.mood-button:nth-child(3) { background: #d8cee9; }
.mood-button:nth-child(4) { background: #d0c4e4; border-right: 0; }
.mood-button span { color: #604293; font-family: var(--display); font-size: 2rem; line-height: 1; }
.mood-button:hover, .mood-button.selected { background: #fffafd; border-color: #bba9d9; box-shadow: inset 0 -5px #7754b2; transform: none; }
.mood-note { min-height: 0; margin: 24px 0 0; padding: 0; border: 0; border-radius: 0; background: none; font-family: var(--display); font-size: clamp(1.55rem, 2.8vw, 2.2rem); line-height: 1.3; }
.mood-next { color: var(--pink-dark); margin-top: 7px; font-size: .84rem; }

.smile-layout { display: grid; grid-template-columns: 1fr .85fr; gap: 14px; }
.smile-card, .bubble-details {
  min-width: 0;
  min-height: 315px;
  margin: 0;
  padding: 29px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.smile-card { background: #e9e3f3; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 15px; }
.smile-symbol { width: auto; height: auto; color: #66469d; background: none; font-size: 2.3rem; }
.smile-card #smile-note { min-height: 0; margin: auto 0; font-size: clamp(1.6rem, 2.5vw, 2.3rem); }
.smile-actions { gap: 7px; }
.smile-actions .outline-button { background: #fff9fc; }
.smile-card .emergency-note { background: #faf9fc; border-radius: 0; }
.bubble-details { background: #cec2e3; }
.bubble-heading { margin-bottom: 12px; }
.bubble-heading h3 { font-size: 1.5rem; }
.bubble-heading span { display: none; }
.bubble-field { height: 193px; border: 1px solid #af9ad2; border-radius: 0; background: #e5dff0; }
.bubble { border: 1px solid #fff; box-shadow: inset -4px -6px 8px #fff7, 0 4px 10px #7658a92a; }
.bubble-score { color: #453660; }

.game-shell { padding: 23px; border: 1px solid #c0b0dc; border-radius: 0; background: #eeeaf6; box-shadow: none; }
.game-tabs { max-width: none; gap: 0; margin: -23px -23px 20px; padding: 0; border-radius: 0; background: #cec2e3; }
.game-tab { min-height: 53px; border-radius: 0; background: transparent; color: var(--berry); font-size: .88rem; }
.game-tab.selected { background: #eeeaf6; box-shadow: none; }
.game-stage { border-radius: 0; border-color: #b5a2d5; }
.macaron-stage { background: #dbd2eb; }
.macaron-stage::before, .macaron-stage::after { display: none; }
.petal-stage { background: #dbd1eb; }
.game-overlay { background: #fff9f0c9; backdrop-filter: blur(2px); }
.game-overlay > span { color: var(--pink-dark); }
.game-bottom { margin-top: 17px; }

.lens-feature-section { padding-top: 34px; }
.lens-feature { display: grid; grid-template-columns: minmax(0, 1fr) 260px; min-height: 260px; border: 1px solid #beadda; background: #f0ecf6; overflow: hidden; }
.lens-feature-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(28px, 5vw, 54px); }
.lens-feature h2 { margin: 10px 0 12px; font-size: clamp(3.3rem, 6vw, 5.4rem); line-height: .9; letter-spacing: -.075em; }
.lens-feature h2 em { color: #6c4ba6; font-weight: 500; }
.lens-feature-copy p { margin: 0 0 22px; color: #554a68; font-size: .94rem; }
.lens-feature-art { position: relative; display: grid; place-items: center; overflow: hidden; background: #7754b2; }
.lens-viewfinder { display: grid; place-items: center; width: 152px; height: 152px; border: 2px solid #f2eef8; border-radius: 23px; transform: rotate(-8deg); box-shadow: 12px 12px 0 #46306b59; }
.lens-viewfinder::before { content: ""; position: absolute; top: 16px; right: 17px; width: 20px; height: 5px; border-radius: 10px; background: #f2eef8; }
.lens-glass { display: grid; place-items: center; width: 108px; height: 108px; border: 2px solid #f2eef8; border-radius: 50%; box-shadow: inset 0 0 0 13px #9377c2, inset 0 0 0 15px #f2eef8; }
.lens-glass::after { content: ""; width: 49px; height: 49px; border-radius: 50%; background: radial-gradient(circle at 36% 31%, #eeeaf5 0 6px, #362552 7px 100%); }
.lens-sparkle { position: absolute; top: 20px; right: 24px; color: #f2eef8; font-size: 2.3rem; }

.breathing-card { min-height: 300px; padding: 29px; border: 1px solid #c1b1dc; border-radius: 0; background: #f0ecf6; }
.breath-orb { width: 105px; height: 105px; color: #533980; background: #c9bbe1; border: 9px solid #e2daef; box-shadow: 0 0 0 1px #a993ce; font-size: 1.7rem; }
.breathing-card p { margin: 18px 0 13px; font-size: clamp(1.4rem, 2.7vw, 1.85rem); }
.minute-track { margin-top: 20px; background: #c8bae0; }

.sky-section { background: #483568; color: #fff9fb; }
.sky-inner { min-height: 475px; padding: 65px 20px 45px; }
.sky-inner .eyebrow { color: #dad1ea; }
.sky-inner h2 { margin: 7px 0 0; font-size: clamp(3.2rem, 6vw, 5.8rem); }
.sky-field { height: 275px; }
.sky-star { color: #fff9fc; text-shadow: 0 0 12px #dbd1eb; }
.sky-moon { color: #d4c9e7; opacity: .7; text-shadow: none; }
.sky-note { min-height: 42px; font-size: clamp(1.25rem, 2.5vw, 1.75rem); }

.final-note { display: block; max-width: none; padding: 64px 24px; background: #fffafd; }
.letter { max-width: 1080px; margin: auto; padding: 0; border: 0; border-radius: 0; background: #c5b6de; box-shadow: none; }
.letter summary { display: flex; align-items: center; gap: 23px; min-height: 170px; padding: 28px 35px; list-style: none; cursor: pointer; }
.letter summary::-webkit-details-marker { display: none; }
.letter-seal { display: grid; flex: none; place-items: center; width: 96px; height: 96px; border: 1px solid #7552b1; border-radius: 50%; color: #614394; font-size: 2.5rem; transform: rotate(-15deg); }
.letter summary small { display: block; margin-bottom: 5px; color: #523c79; font-size: .65rem; font-weight: 800; letter-spacing: .13em; }
.letter summary strong { display: block; font-family: var(--display); font-size: clamp(2.6rem, 5vw, 4.8rem); font-weight: 500; letter-spacing: -.07em; line-height: 1; }
.letter-open { margin-left: auto; font-size: .8rem; font-weight: 800; white-space: nowrap; }
.letter[open] .letter-open { font-size: 0; }
.letter[open] .letter-open::after { content: "Close note ×"; font-size: .8rem; }
.letter-body { max-width: 760px; padding: 0 35px 30px 154px; }
.letter-body p { color: #3f3354; font-size: clamp(1.12rem, 2vw, 1.42rem); }

.feelings-final { padding: 70px 24px 75px; background: #f0ecf6; }
.feelings-final h2 { margin: 7px 0 5px; font-size: clamp(3.1rem, 6vw, 5.6rem); }
.feelings-final-inner > p { margin-bottom: 22px; font-family: var(--body); font-size: 1rem; }
.feelings-card { padding: clamp(22px, 4vw, 36px); border: 1px solid #beadda; border-radius: 0; background: #fffafd; box-shadow: none; }
.feelings-card textarea { border-radius: 0; background: #fffafd; }

.reset-dialog { border-radius: 9px; background: #fffafd; }
.reset-close { border-radius: 6px; }
.reset-choices a { border-radius: 6px; }
.sound-toggle { border-radius: 6px; }

/* The password page uses the same palette and flat surfaces. */
.dashboard-shell { background: #e6dff1; }
.dashboard-card { border-radius: 0; box-shadow: none; }
.login-card:after { display: none; }
.dashboard-card form input { border-radius: 6px; }
.saved-note { border-radius: 0; }

@media (max-width: 800px) {
  html { scroll-padding-top: 70px; }
  .floating-nav { top: 0; width: 100%; min-height: 61px; padding: 8px 18px; }
  .nav-links { top: calc(100% + 1px); border-radius: 0; background: #fffafd; box-shadow: none; }
  .nav-logout button { width: 100%; padding: 12px 15px; text-align: left; font-size: .82rem; }
  .nav-reset { display: none; }
  .hero { padding: 0; }
  .hero-inner { width: min(620px, calc(100% - 38px)); min-height: 460px; padding: 110px 0 56px; }
  .hero-content > p { max-width: 270px; font-size: 1.05rem; }
  .content-wrap { width: min(620px, calc(100% - 32px)); }
  .cozy-section { padding: 54px 0; }
  .mood-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mood-button { min-height: 110px; padding: 16px; }
  .mood-button:nth-child(2) { border-right: 0; }
  .mood-button:nth-child(-n+2) { border-bottom: 1px solid #bba9d9; }
  .smile-layout { grid-template-columns: 1fr; }
  .smile-card, .bubble-details { min-height: 0; padding: 24px; }
  .smile-card { min-height: 300px; }
  .mobile-dock { right: 0; bottom: 0; left: 0; max-width: none; gap: 0; padding: 4px 10px max(4px, env(safe-area-inset-bottom)); border: 0; border-top: 1px solid #b8a6d7; border-radius: 0; background: #fffafdf5; box-shadow: none; }
  .mobile-dock a, .mobile-dock button { border-radius: 5px; }
  .nav-sos { justify-content: flex-start; width: calc(100% - 18px); min-height: 44px; margin: 4px 9px 3px; padding-inline: 14px; font-size: .82rem; }
  .sky-inner { min-height: 430px; }
  .sky-field { height: 235px; }
  .final-note { padding: 55px 16px; }
  .letter { padding: 0; }
  .letter summary { min-height: 145px; padding: 24px; gap: 15px; }
  .letter-seal { width: 72px; height: 72px; font-size: 2rem; }
  .letter-body { padding: 0 24px 25px; }
  .feelings-final { padding: 55px 16px 100px; }
}

@media (max-width: 520px) {
  .hero-inner { min-height: 440px; }
  .hero-content > p { max-width: 270px; line-height: 1.3; }
  .section-intro h2 { font-size: clamp(2.65rem, 11vw, 3.65rem); }
  .mood-button { font-size: .82rem; }
  .smile-actions { width: 100%; }
  .smile-actions button { flex: 1 1 auto; }
  .game-shell { padding: 14px; }
  .game-tabs { margin: -14px -14px 15px; }
  .game-tab { font-size: .8rem; }
  .game-topline { font-size: .73rem; }
  .game-bottom { flex-direction: column; align-items: stretch; }
  .lens-feature { grid-template-columns: 1fr; }
  .lens-feature-copy { padding: 31px 28px; }
  .lens-feature-art { min-height: 145px; }
  .lens-viewfinder { width: 106px; height: 106px; border-radius: 17px; }
  .lens-viewfinder::before { top: 10px; right: 10px; width: 15px; }
  .lens-glass { width: 76px; height: 76px; box-shadow: inset 0 0 0 9px #9377c2, inset 0 0 0 10px #f2eef8; }
  .lens-glass::after { width: 35px; height: 35px; }
  .letter summary { flex-wrap: wrap; }
  .letter summary strong { font-size: 2.5rem; }
  .letter-open { flex: 0 0 100%; margin-left: 87px; }
  .feelings-final-inner > p { font-size: .92rem; }
}

/* A pocket of soft colors: cream, lavender, mint, peach, and butter. */
:root {
  --paper: #fffaf0;
  --blush: #e8e1f5;
  --petal: #d9cce8;
  --pink: #86739d;
  --pink-dark: #645079;
  --berry: #443c59;
  --muted: #6f6579;
  --line: #ded6e6;
  --mint: #deeee4;
  --peach: #f7dfcd;
  --butter: #f8edbd;
}
body { background: var(--paper); }
.floating-nav { border-color: var(--line); background: #fffaf0f5; }
.brand-heart { color: #8b6e96; }
.nav-brand { letter-spacing: -.045em; }
.nav-reset { border-radius: 999px; background: var(--butter); }
.nav-reset:hover { background: #f0df9e; }
.nav-links a:hover, .nav-logout button:hover { background: var(--blush); }
.hero {
  background-color: var(--blush);
  background-image: radial-gradient(circle, #a995b840 .8px, transparent 1px);
  background-size: 23px 23px;
  border-bottom: 1px solid var(--line);
}
.hero-inner { min-height: 590px; padding: 119px 0 64px; }
.hero-content { position: relative; }
.hero-content .eyebrow { color: var(--pink-dark); font-size: .65rem; letter-spacing: .17em; }
.hero h1 { margin-top: 17px; font-size: clamp(4rem, 8.5vw, 7rem); letter-spacing: -.065em; }
.hero h1 em { color: #77608f; }
.hero-content > p { max-width: 390px; margin-bottom: 25px; font-size: 1.12rem; line-height: 1.55; color: #5e526e; }
.hero-keepsake { margin-top: 22px; width: 65px; height: 65px; display: grid; place-items: center; position: relative; margin: 22px auto 23px; border-radius: 24px; background: var(--butter); color: #766238; transform: rotate(-10deg); }
.hero-keepsake > .ti:first-child { width: 35px; height: 35px; }
.hero-keepsake > .ti:last-child { position: absolute; width: 24px; height: 24px; top: -8px; right: -11px; color: #78618c; }
.hero-button, .smile-actions button, .game-bottom button, .lens-feature .primary-button, .breathing-card .outline-button { border-radius: 999px; }
.primary-button { background: var(--berry); }
.primary-button:not(:disabled):hover { background: var(--pink-dark); }
.outline-button:hover { background: var(--blush); }
.section-intro h2 { font-size: clamp(2.6rem, 4.6vw, 4.5rem); letter-spacing: -.055em; line-height: 1.06; }
.cozy-section { padding: 65px 0; }
.mood-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; border: 0; }
.mood-button { min-height: 135px; gap: 18px; border: 1px solid transparent; border-radius: 22px; background: var(--blush); line-height: 1.4; padding: 23px; font-weight: 650; }
.mood-button:nth-child(2) { background: var(--mint); }
.mood-button:nth-child(3) { background: var(--peach); }
.mood-button:nth-child(4) { background: var(--butter); border-right: 1px solid transparent; }
.mood-button:nth-child(5) { background: #ede5ef; }
.mood-button:nth-child(6) { background: #e0e9f1; }
.mood-button span { color: #6d587e; }
.mood-button:hover, .mood-button.selected { background: #fffdf8; border: 1px solid #a293b3; box-shadow: inset 0 -4px #aa98bd; transform: translateY(-2px); }
.mood-note { min-height: 2.8em; font-size: clamp(1.45rem, 2.7vw, 2rem); color: var(--berry); }
.mood-contact { padding: 23px; margin-top: 12px; border: 1px solid #cbd9e3; border-radius: 20px; background: #eaf0f5; }
.mood-contact > p { max-width: 570px; font-size: .95rem; line-height: 1.65; color: #554d66; margin: 0 0 17px; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.contact-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 16px; gap: 9px; border-radius: 999px; background: var(--berry); color: #fff; font-size: .83rem; white-space: nowrap; font-weight: 700; }
.contact-actions a:last-child { background: #3d6758; }
.contact-actions a:hover { filter: brightness(1.15); }
.contact-actions .ti { width: 19px; height: 19px; }
.smile-layout { gap: 18px; }
.smile-card, .bubble-details { border-radius: 26px; padding: 30px; }
.smile-card { background: var(--butter); }
.smile-symbol { color: #776234; }
.smile-card #smile-note { color: #584b3c; font-size: clamp(1.5rem, 2.6vw, 2.15rem); line-height: 1.3; }
.smile-actions .outline-button { background: #fffaf0; }
.smile-card .emergency-note { border-radius: 12px; background: #fffaf0; }
.bubble-details { background: var(--mint); }
.bubble-field { background: #edf7f0; border-color: #adcabb; border-radius: 20px; }
.bubble { background: radial-gradient(circle at 30% 27%, #fff, #d9eee870 45%, #a3d0bd70); box-shadow: inset -4px -6px 8px #fff7, 0 4px 10px #567c6320; }
.bubble-score { color: #486656; }
.game-shell { border-color: var(--line); border-radius: 26px; overflow: hidden; background: #f2edf7; }
.game-tabs { background: #e2d8ee; }
.game-tab.selected { background: #f2edf7; }
.game-tab:focus-visible { outline-offset: -5px; }
.game-stage { border-color: #c4b9d4; border-radius: 18px; }
.macaron-stage { background: #e4dcef; }
.macaron-plate { background: linear-gradient(#fff, #e6e2ef 55%, #b9afc9); box-shadow: 0 8px 15px #55446724; }
.petal-stage { background: #e3eee4; }
.petal-hills { background: #b2c9b8; box-shadow: -130px 30px 0 35px #c4d8bf, 150px 20px 0 20px #cdddbf; }
.falling-petal::before { background: linear-gradient(135deg, #fffdf1, #edc5d7 62%, #b799c9); }
.game-overlay { background: #fffaf0d9; }
.lens-feature-section { padding-top: 34px; }
.lens-feature { border-color: #dfc7b4; border-radius: 26px; background: var(--peach); }
.lens-feature h2 em { color: #8b675e; }
.lens-feature-copy p { color: #6c5856; line-height: 1.5; }
.lens-feature-art { background: #b9a5cf; }
.lens-viewfinder { border-color: #fffaf0; box-shadow: 12px 12px 0 #76608e45; }
.lens-viewfinder::before { background: #fffaf0; }
.lens-glass { border-color: #fffaf0; box-shadow: inset 0 0 0 13px #a18db6, inset 0 0 0 15px #fffaf0; }
.lens-glass::after { background: radial-gradient(circle at 36% 31%, #fffaf0 0 6px, #4e405f 7px 100%); }
.lens-sparkle { color: var(--butter); }
.breathing-card { background: #eaf3ec; border-color: #c9dccd; border-radius: 26px; padding-top: 38px; }
.breath-orb { background: #c5daca; border-color: #deece0; color: #446a54; box-shadow: 0 0 0 1px #a8c3ae; }
.minute-track { background: #c9dccc; }
.minute-track span { background: #64846e; }
.sky-section { background: #443c59; color: #fffaf0; }
.sky-inner .eyebrow { color: #cfc1e5; }
.sky-star { color: #f8edbd; text-shadow: none; }
.sky-moon { color: #e8e1f5; opacity: .8; }
.sky-note { color: #fffaf0; }
.final-note { background: var(--paper); }
.letter { background: #f3dfd6; border: 1px solid #e8cfc3; border-radius: 26px; overflow: hidden; }
.letter-seal { color: #88616e; border-color: #cfa4b0; background: #fffaf055; }
.letter summary small { color: #7f5667; }
.letter-body p { color: #634f60; line-height: 1.65; }
/* The original form is retained verbatim; only its palette is updated. */
.feelings-final { background: #e8e1f5; }
.feelings-card { background: #fffaf0; border-color: #c9bdd8; }
.feelings-card textarea { background: #fffdf8; border-color: #c7bbd6; }
.feelings-card textarea::placeholder { color: #82758e; }
.reset-dialog { background: var(--paper); border-color: var(--line); border-radius: 24px; }
.reset-close { border-radius: 50%; }
.reset-choices a { border-radius: 14px; background: #fffdf8; }
.reset-choices a:nth-child(2) { background: var(--butter); }
.reset-choices a:nth-child(3) { background: var(--mint); }
.reset-choices a:nth-child(4) { background: var(--blush); }
.sound-toggle { background: var(--blush); border-color: #cdbfdd; border-radius: 999px; }
.mobile-dock { background: #fffaf0f5; border-color: var(--line); }
.dashboard-shell { background: #e8e1f5; background-image: radial-gradient(circle at 15% 80%, #deeee4 0, transparent 40%), radial-gradient(circle at 90% 10%, #f8edbd 0, transparent 36%); }
.dashboard-card, .saved-note { background: var(--paper); border-radius: 22px; }
.dashboard-card form input { background: #fffdf8; border-color: #c7bbd6; border-radius: 10px; }
.dashboard-delete:hover { background: var(--blush); }
.lens-card img, .lens-card video { background: var(--blush); }
@media (max-width: 800px) {
  .hero { min-height: 0; }
  .hero-inner { min-height: 560px; padding-top: 100px; }
  .hero h1 { font-size: clamp(4.3rem, 15vw, 6.4rem); margin: 17px auto 20px; }
  .hero-content > p { max-width: 300px; font-size: 1.05rem; }
  .nav-links { border-radius: 0 0 20px 20px; background: var(--paper); }
  .mood-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mood-button { min-height: 133px; padding: 18px; }
  .mood-button:nth-child(-n+2) { border-bottom: 1px solid transparent; }
  .mood-button:nth-child(2) { border-right: 1px solid transparent; }
  .mood-button:hover, .mood-button.selected { border: 1px solid #a293b3; }
  .cozy-section { padding: 48px 0; }
  .smile-card, .bubble-details { padding: 25px; }
  .mood-note { min-height: 0; }
  .letter-body { padding-left: 24px; }
}
@media (max-width: 520px) {
  .hero-inner { min-height: 535px; }
  .hero-keepsake { margin-bottom: 25px; width: 56px; height: 56px; border-radius: 20px; }
  .hero-content .eyebrow { font-size: .58rem; }
  .mood-button { font-size: .85rem; }
  .contact-actions a { flex: 1 1 135px; }
  .game-shell { border-radius: 21px; }
  .lens-glass { box-shadow: inset 0 0 0 9px #a18db6, inset 0 0 0 10px #fffaf0; }
  .letter summary { gap: 15px; }
  .letter summary strong { font-size: 2.5rem; }
  .letter-open { margin-left: 87px; }
}
@media (max-width: 350px) {
  .mood-button { font-size: .79rem; padding: 15px; }
  .letter summary { padding: 20px; gap: 12px; }
  .letter-seal { width: 55px; height: 55px; }
  .letter summary strong { font-size: 2.2rem; }
  .letter-open { margin-left: 67px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* A check-in for good days, playful days, and the days that need more care. */
.mood-grid .mood-button[data-mood="happy"] { background: var(--butter); }
.mood-grid .mood-button[data-mood="playful"] { background: var(--mint); }
.mood-grid .mood-button[data-mood="flirty"] { background: #f4dfe7; }
.mood-grid .mood-button[data-mood="laugh"] { background: #e5edf4; }
.mood-grid .mood-button[data-mood="tired"] { background: #e7e1ee; }
.mood-grid .mood-button[data-mood="talk"] { background: #e0e9f1; }
.mood-grid .mood-button:hover, .mood-grid .mood-button.selected { background: #fffdf8; }
@media (max-width: 800px) {
  .mood-button[data-mood="talk"] { grid-column: 1 / -1; min-height: 110px; }
}

/* Three moods for one round of little choices. */
.wyr-disclosure { margin: -10px 0 24px; color: var(--muted); font-size: .8rem; line-height: 1.6; }
.wyr-shell { padding: 28px; background: #f0eaf6; border: 1px solid var(--line); border-radius: 26px; }
.wyr-intro { margin: 0 0 20px; font-size: .96rem; }
.wyr-mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.wyr-mode { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-height: 212px; padding: 25px; border: 1px solid #e6d9aa; border-radius: 20px; background: var(--butter); text-align: left; color: var(--berry); transition: transform .2s, border-color .2s; }
.wyr-mode:nth-child(2) { background: #f4dfe7; border-color: #e5c5d2; }
.wyr-mode:nth-child(3) { background: var(--berry); color: var(--paper); border-color: var(--berry); }
.wyr-mode > span { font-size: 2rem; line-height: 1; }
.wyr-mode strong { margin-top: auto; font-family: var(--display); font-size: 1.9rem; font-weight: 500; letter-spacing: -.045em; }
.wyr-mode small { font-size: .8rem; line-height: 1.5; }
.wyr-mode:hover { transform: translateY(-3px); border-color: #9d87b5; }
.wyr-topline { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 25px; color: var(--pink-dark); font-size: .8rem; font-weight: 750; }
#wyr-question { max-width: 750px; margin: 0 0 28px; font-size: clamp(1.8rem, 3.5vw, 2.9rem); line-height: 1.2; letter-spacing: -.035em; }
#wyr-question:focus, #wyr-complete-title:focus { outline: none; }
.wyr-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.wyr-option { min-width: 0; min-height: 90px; padding: 22px; border: 1px solid #c5b7d6; border-radius: 18px; background: #fffaf0; color: var(--berry); text-align: left; font-size: 1rem; font-weight: 650; line-height: 1.5; }
.wyr-option:hover:not(:disabled) { background: #e1eee4; border-color: #92ad9a; }
.wyr-option:disabled { opacity: .6; cursor: default; }
.wyr-option.chosen { opacity: 1; background: var(--mint); border: 2px solid #789680; padding: 21px; }
.wyr-reaction { margin: 24px 0 20px; color: var(--berry); font-family: var(--display); font-size: 1.4rem; line-height: 1.5; }
.wyr-shell .primary-button { border-radius: 999px; }
.wyr-complete { text-align: center; padding: 25px 10px; }
.wyr-complete-star { color: #8f76a7; font-size: 3rem; }
.wyr-complete h3 { margin: 15px 0; font-size: clamp(2.1rem, 5vw, 3.5rem); letter-spacing: -.05em; }
.wyr-complete p { max-width: 420px; margin: 0 auto 25px; line-height: 1.6; color: var(--muted); }
.wyr-history { margin-bottom: 20px; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); }
.wyr-history summary { cursor: pointer; font-weight: 700; line-height: 1.6; }
.wyr-history summary small { display: block; color: var(--muted); font-size: .8rem; font-weight: 500; }
.wyr-history ol { padding-left: 22px; margin-bottom: 0; }
.wyr-history li { margin-top: 23px; padding-left: 5px; }
.wyr-history li p { margin: 6px 0; line-height: 1.5; }
.wyr-history time { color: var(--muted); font-size: .76rem; }
.dashboard-tabs { flex-wrap: wrap; }
@media (max-width: 700px) {
  .wyr-shell { padding: 20px; }
  .wyr-mode-grid { grid-template-columns: 1fr; gap: 12px; }
  .wyr-mode { min-height: 150px; padding: 22px; gap: 8px; }
  .wyr-mode strong { font-size: 1.8rem; }
  .wyr-options { grid-template-columns: 1fr; gap: 11px; }
  .wyr-option { min-height: 78px; padding: 19px; font-size: .95rem; }
  .wyr-option.chosen { padding: 18px; }
  .wyr-topline { font-size: .73rem; }
  .wyr-history { padding: 18px; }
}

/* Keep each check-in response visible above the mobile navigation. */
.mood-response { scroll-margin-block: 90px; }
.mood-response.is-active { margin-top: 24px; padding: 22px; border: 1px solid var(--line); border-radius: 22px; background: #f1ebf8; }
.mood-response.is-active .mood-note { margin-top: 0; }
.mood-response.is-active .mood-contact { margin-top: 17px; }
@media (max-width: 520px) { .mood-response.is-active { padding: 18px; } }