:root {
  --bg: #fbf8f5;
  --ink: #292522;
  --muted: #7d746e;
  --line: #ebe2dc;
  --accent: #9b625e;
  --soft: #f3e8e5;
  --soft2: #f8f3ef;
  --green: #edf3ec;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family:
    Inter,
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
}
.app {
  max-width: 430px;
  margin: auto;
  min-height: 100vh;
  padding: 23px 17px 92px;
}
.brand {
  text-align: center;
  margin: 5px 0 20px;
}
.brand h1 {
  font:
    500 29px Georgia,
    serif;
  margin: 0;
}
.brand p {
  font-size: 13px;
  color: var(--muted);
  margin: 6px;
}
.card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 21px;
  padding: 18px;
  margin-bottom: 13px;
}
.eyebrow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--muted);
  font-weight: 800;
}
h2 {
  font:
    500 22px Georgia,
    serif;
  margin: 6px 0;
}
.sub {
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
}
.hero {
  text-align: center;
  padding: 22px 15px;
}
.avatars {
  font-size: 30px;
}
.days {
  font:
    500 38px Georgia,
    serif;
  margin: 9px 0 2px;
}
.stage {
  display: inline-block;
  background: var(--soft);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 10px;
  margin-top: 8px;
}
.next {
  background: var(--green);
  border-radius: 16px;
  padding: 14px;
  margin-top: 13px;
  text-align: left;
}
.next b {
  font-size: 13px;
}
.row {
  display: flex;
  gap: 9px;
  overflow: auto;
  padding-bottom: 2px;
}
.tile {
  min-width: 145px;
  background: var(--soft2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 13px;
  cursor: pointer;
}
.tile b {
  display: block;
  font-size: 12px;
  margin: 4px 0;
}
.tile span {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.4;
  display: block;
}
.timeline {
  border-left: 2px solid var(--line);
  margin: 13px 0 0 7px;
  padding-left: 17px;
}
.moment {
  position: relative;
  margin-bottom: 17px;
}
.moment:before {
  content: "";
  position: absolute;
  left: -23px;
  top: 3px;
  width: 10px;
  height: 10px;
  background: var(--soft);
  border: 2px solid var(--accent);
  border-radius: 50%;
}
.moment b {
  font-size: 12px;
}
.moment span {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-top: 3px;
}
.add {
  width: 100%;
  border: 1px dashed var(--accent);
  background: #fff;
  border-radius: 14px;
  padding: 11px;
  font-size: 11px;
  color: var(--accent);
  font-weight: 700;
  margin-top: 7px;
}
.stageGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.stageBtn {
  border: 1px solid var(--line);
  background: var(--soft2);
  border-radius: 13px;
  padding: 11px;
  text-align: left;
  font-size: 11px;
}
.stageBtn.on {
  background: var(--soft);
  border-color: var(--accent);
}
.stageBtn b {
  display: block;
  margin-bottom: 2px;
}
.screen {
  display: none;
}
.screen.active {
  display: block;
}
.back {
  border: 0;
  background: none;
  padding: 0 0 12px;
  color: var(--muted);
  font-size: 12px;
}
.saved {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 11px 0;
}
.saved:last-child {
  border: 0;
}
.saved b {
  font-size: 12px;
}
.saved span {
  font-size: 10px;
  color: var(--muted);
}
.nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(430px, 100%);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #fff;
  border-top: 1px solid var(--line);
  padding: 8px;
}
.nav div {
  text-align: center;
  font-size: 9px;
  color: var(--muted);
}
.nav i {
  display: block;
  font-style: normal;
  font-size: 17px;
}
.nav .active {
  color: var(--ink);
  font-weight: 800;
}

.memorySource {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--soft2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 13px;
  margin: 10px 0;
}
.memorySource .icon {
  font-size: 22px;
}
.memorySource b {
  display: block;
  font-size: 12px;
  margin-bottom: 3px;
}
.memorySource span {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.4;
}
.miniBtn {
  border: 0;
  background: var(--soft);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 10px;
  font-weight: 700;
  margin-top: 8px;
  color: var(--ink);
}
.prompt {
  background: var(--soft2);
  border-radius: 14px;
  padding: 12px;
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.45;
}
textarea {
  width: 100%;
  min-height: 80px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  font: inherit;
  font-size: 12px;
  resize: vertical;
  background: #fff;
}
.primary {
  width: 100%;
  border: 0;
  background: var(--ink);
  color: #fff;
  border-radius: 14px;
  padding: 12px;
  font-size: 11px;
  font-weight: 800;
  margin-top: 9px;
}
.secondary {
  width: 100%;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 14px;
  padding: 11px;
  font-size: 11px;
  font-weight: 700;
  margin-top: 7px;
}
.keepRow {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 9px;
}
.pill {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 7px 9px;
  font-size: 10px;
}
.pill.on {
  background: var(--soft);
  border-color: var(--accent);
}
.toast {
  display: none;
  background: var(--green);
  border-radius: 14px;
  padding: 11px;
  font-size: 11px;
  margin-top: 10px;
}
.toast.show {
  display: block;
}
.storyType {
  font-size: 9px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  margin-bottom: 3px;
}

.photoUpload {
  display: none;
  margin-top: 10px;
}
.photoUpload.show {
  display: block;
}
.photoBox {
  border: 1px dashed var(--accent);
  background: var(--soft2);
  border-radius: 16px;
  padding: 16px;
  text-align: center;
  cursor: pointer;
}
.photoBox b {
  display: block;
  font-size: 12px;
  margin: 5px;
}
.photoBox span {
  font-size: 10px;
  color: var(--muted);
}
.previewGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 9px;
}
.previewGrid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--line);
}
input[type="file"] {
  display: none;
}

.detailInput {
  display: none;
  margin-top: 10px;
}
.detailInput.show {
  display: block;
}
.fieldLabel {
  display: block;
  font-size: 10px;
  font-weight: 800;
  margin: 0 0 6px;
}
.textInput,
.dateInput {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  font: inherit;
  font-size: 12px;
  background: #fff;
  color: var(--ink);
}
.helper {
  font-size: 9px;
  color: var(--muted);
  margin: 5px 2px 0;
  line-height: 1.4;
}

.understandCard {
  background: var(--soft2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  margin-top: 10px;
}
.understandCard h3 {
  font:
    500 16px Georgia,
    serif;
  margin: 3px 0 5px;
}
.fact {
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.fact:last-child {
  border: 0;
}
.fact b {
  display: block;
  font-size: 11px;
}
.fact span {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.45;
  display: block;
  margin-top: 3px;
}
.sourceTag {
  display: inline-block;
  font-size: 8px;
  background: var(--soft);
  padding: 4px 7px;
  border-radius: 999px;
  margin-top: 5px;
  color: var(--muted);
}
.suggestion {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 15px;
  padding: 12px;
  margin-top: 9px;
}
.suggestion b {
  font-size: 11px;
  display: block;
}
.suggestion p {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.45;
  margin: 5px 0 8px;
}
.actionRow {
  display: flex;
  gap: 6px;
}
.actionRow button {
  flex: 1;
  border: 1px solid var(--line);
  background: var(--soft2);
  border-radius: 11px;
  padding: 8px;
  font-size: 9px;
  font-weight: 700;
}
.profileToggle {
  display: flex;
  background: var(--soft2);
  border-radius: 14px;
  padding: 3px;
  margin: 10px 0;
}
.profileToggle button {
  flex: 1;
  border: 0;
  background: transparent;
  border-radius: 11px;
  padding: 9px;
  font-size: 10px;
  font-weight: 700;
}
.profileToggle button.on {
  background: #fff;
  box-shadow: 0 1px 4px #0000000d;
}

.statusCard {
  background: linear-gradient(180deg, #fff, var(--soft2));
  border: 1px solid var(--line);
  border-radius: 21px;
  padding: 17px;
  margin-bottom: 13px;
}
.statusTop {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.statusMood {
  font:
    500 19px Georgia,
    serif;
  margin: 4px 0;
}
.statusTime {
  font-size: 9px;
  color: var(--muted);
  white-space: nowrap;
}
.needTags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 9px;
}
.needTag {
  font-size: 9px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 8px;
}
.reassure {
  background: var(--green);
  border-radius: 13px;
  padding: 10px;
  margin-top: 10px;
  font-size: 10px;
  line-height: 1.4;
}
.todayQuestion {
  font:
    500 19px Georgia,
    serif;
  line-height: 1.3;
  margin: 8px 0 12px;
}
.progressLine {
  height: 4px;
  background: var(--line);
  border-radius: 99px;
  overflow: hidden;
  margin: 9px 0;
}
.progressLine i {
  display: block;
  width: 50%;
  height: 100%;
  background: var(--accent);
}
.quickActions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 10px;
}
.quickAction {
  border: 1px solid var(--line);
  background: var(--soft2);
  border-radius: 14px;
  padding: 11px 6px;
  text-align: center;
  font-size: 9px;
}
.quickAction i {
  font-style: normal;
  display: block;
  font-size: 18px;
  margin-bottom: 4px;
}
.nextMini {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.nextMini:last-child {
  border: 0;
}
.nextMini .emoji {
  font-size: 20px;
}
.nextMini b {
  font-size: 11px;
  display: block;
}
.nextMini span {
  font-size: 9px;
  color: var(--muted);
}
.homeGreeting {
  margin: 2px 2px 13px;
}
.homeGreeting h2 {
  font-size: 23px;
  margin: 3px 0;
}
.homeGreeting p {
  margin: 0;
}

.drawWrap {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 10px;
}
#drawCanvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 13px;
  touch-action: none;
}
.timerBig {
  font:
    600 34px Georgia,
    serif;
  text-align: center;
  margin: 7px 0;
}
.timerUrgent {
  font-weight: 700;
}
.drawTools {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 9px;
}
.drawTools button {
  flex: 1;
  min-width: 72px;
}

.topUtility {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 0 0 10px;
  padding: 0 2px;
}
.usMenuBtn {
  width: auto !important;
  min-height: 40px;
  padding: 8px 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  background: var(--card) !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  box-shadow: none !important;
}
.usMenuBtn .chev {
  font-size: 12px;
  opacity: 0.6;
}

.usAvatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--soft);
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 800;
  overflow: hidden;
  flex: 0 0 30px;
}
.usAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.usPhotoSetting {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.usPhotoLarge {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--soft);
  border: 1px solid var(--line);
  font-weight: 800;
  overflow: hidden;
  flex: 0 0 64px;
}
.usPhotoLarge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thinkingBtn {
  width: 100%;
  border: 0;
  border-radius: 22px;
  padding: 20px 16px;
  background: var(--soft);
  font: inherit;
  cursor: pointer;
  text-align: center;
  margin-top: 10px;
}
.thinkingBtn .pulseIcon {
  font-size: 34px;
  display: block;
  margin-bottom: 5px;
}
.thinkingBtn b {
  display: block;
  font-size: 17px;
}
.thinkingBtn span {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}
.mediaPreview {
  margin-top: 12px;
  border-radius: 16px;
  overflow: hidden;
  display: none;
}
.mediaPreview img {
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  display: block;
}
.thoughtPulse {
  text-align: center;
  padding: 18px;
  border-radius: 20px;
  background: var(--soft);
  margin-top: 10px;
}
.thoughtPulse .big {
  font-size: 38px;
}

:root {
  --bottom-nav-clearance: 96px;
}
body {
  padding-bottom: env(safe-area-inset-bottom);
}
main {
  padding-bottom: calc(
    var(--bottom-nav-clearance) + env(safe-area-inset-bottom)
  );
}
.screen {
  padding-bottom: calc(
    var(--bottom-nav-clearance) + env(safe-area-inset-bottom)
  );
}
.nav {
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 100;
}
@media (max-width: 520px) {
  :root {
    --bottom-nav-clearance: 118px;
  }
  main,
  .screen {
    padding-bottom: calc(
      var(--bottom-nav-clearance) + env(safe-area-inset-bottom)
    );
  }
  .thinkingBtn {
    scroll-margin-bottom: 130px;
  }
}

body {
  padding-bottom: 0 !important;
}
main {
  padding-bottom: 0 !important;
}
.screen {
  padding-bottom: 18px !important;
}
.nav {
  z-index: 100;
  padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
}
.screen.active {
  padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
}
@media (max-width: 520px) {
  main {
    padding-bottom: 0 !important;
  }
  .screen {
    padding-bottom: 16px !important;
  }
  .screen.active {
    padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
  }
}

#today > .card {
  margin-bottom: 12px;
}

#today,
#todayHome {
  min-height: 0 !important;
  height: auto !important;
  display: block !important;
  justify-content: initial !important;
  align-content: initial !important;
  gap: 0 !important;
}
#today > .card,
#todayHome > .card {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}
#today > .card + .card,
#todayHome > .card + .card {
  margin-top: 0 !important;
}

#today.screen.active,
#todayHome.screen.active {
  padding-bottom: calc(118px + env(safe-area-inset-bottom)) !important;
}
#today .thinkingBtn,
#todayHome .thinkingBtn {
  margin-bottom: 0 !important;
}
#thoughtSentToast {
  margin-bottom: 0 !important;
}

#today > .card,
#todayHome > .card {
  margin-bottom: 12px !important;
}

#home .hero {
  padding-bottom: 18px;
}
#home .hero .stage {
  margin-bottom: 0;
}

section.screen {
  display: none !important;
}
section.screen.active {
  display: block !important;
}
#home.screen:not(.active),
#today.screen:not(.active),
#todayHome.screen:not(.active) {
  display: none !important;
}

.threeWay button {
  min-width: 0;
}
.profileIntro {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 4px 2px;
}
.profileIntro h2 {
  margin: 2px 0 3px;
}
.profileAvatar {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--soft2);
  border: 1px solid var(--line);
  font:
    600 20px Georgia,
    serif;
}
.usAvatar {
  font-size: 24px;
}
.quickGuide {
  background: linear-gradient(180deg, var(--soft2), #fff);
}
.guideLine {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.guideLine:last-child {
  border-bottom: 0;
}
.guideLine > span {
  font-size: 18px;
}
.guideLine b {
  font-size: 11px;
}
.guideLine p {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.45;
  margin: 3px 0 0;
}
.trait {
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.trait:last-child {
  border-bottom: 0;
}
.traitHead,
.traitEnds {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.traitHead b {
  font-size: 11px;
}
.traitHead span,
.traitEnds span {
  font-size: 8px;
  color: var(--muted);
}
.traitBar {
  height: 7px;
  background: var(--soft);
  border-radius: 999px;
  margin: 8px 0 4px;
  overflow: hidden;
}
.traitBar i {
  display: block;
  height: 100%;
  background: var(--ink);
  border-radius: 999px;
}
.traitBar.reverse i {
  margin-left: auto;
}
.trait p {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.45;
  margin: 6px 0 0;
}
.understandSectionGrid {
  margin-top: 10px;
}
.profileSection {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 14px;
  padding: 12px;
  margin-top: 8px;
  color: var(--ink);
}
.profileSection > span {
  font-size: 19px;
}
.profileSection > div {
  flex: 1;
}
.profileSection b {
  display: block;
  font-size: 11px;
}
.profileSection small {
  display: block;
  color: var(--muted);
  font-size: 9px;
  margin-top: 2px;
}
.profileSection em {
  font-style: normal;
  font-size: 20px;
  color: var(--muted);
  transition: 0.2s;
}
.profileSection.open em {
  transform: rotate(90deg);
}
.sectionDetail {
  display: none;
  margin: -2px 8px 8px;
  padding: 11px 12px;
  background: var(--soft2);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 13px 13px;
}
.sectionDetail.open {
  display: block;
}
.sectionDetail p {
  font-size: 10px;
  line-height: 1.5;
  margin: 0 0 5px;
  color: var(--muted);
}
.guideReminder {
  text-align: center;
}
.usInsight {
  display: flex;
  gap: 12px;
}
.insightIcon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--line);
  font-size: 16px;
}
.usInsight h3 {
  margin: 3px 0 5px;
}
.usInsight p {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}
.middle {
  margin-top: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
}
.middle b {
  display: block;
  font-size: 10px;
}
.middle span {
  display: block;
  font-size: 9px;
  color: var(--muted);
  line-height: 1.45;
  margin-top: 3px;
}

:root {
  --accessible-ink: #241d1a;
  --accessible-muted: #514640;
}
button,
.primary,
.on,
.active,
[class*="tan"],
[class*="accent"],
[style*="background:var(--tan)"],
[style*="background: var(--tan)"] {
  text-shadow: none;
}
.primary,
.profileToggle button.on,
button.on,
button.active,
.navItem.active,
.choice.selected,
.pill.selected,
.tag.selected {
  color: var(--accessible-ink) !important;
}
.primary *,
.profileToggle button.on *,
button.on *,
button.active *,
.choice.selected *,
.pill.selected *,
.tag.selected * {
  color: inherit !important;
}

[style*="color:white"],
[style*="color: white"],
[style*="color:#fff"],
[style*="color: #fff"],
[style*="color:#FFF"],
[style*="color: #FFF"] {
  color: var(--accessible-ink) !important;
}

.understandHero .sub,
.understandCard .sub,
.sectionDetail p,
.trait p,
.guideLine p,
.usInsight p,
.middle span {
  color: var(--accessible-muted);
}

:root {
  --a11y-text: #231f1d;
  --a11y-muted: #554d48;
  --a11y-surface: #fffdfb;
  --a11y-soft: #f6f1ed;
  --a11y-selected: #d9e7df;
  --a11y-selected-hover: #cedfd6;
  --a11y-selected-border: #668276;
  --a11y-focus: #4f6f63;
  --a11y-border: #c9bdb5;
}

body,
main,
section,
.screen,
.card,
button,
label,
input,
textarea,
select,
p,
span,
small,
b,
strong,
h1,
h2,
h3,
h4,
li,
div {
  text-rendering: optimizeLegibility;
}
body {
  color: var(--a11y-text);
}
p,
.sub,
small,
.muted,
.hint,
.helper,
.trait p,
.guideLine p,
.usInsight p,
.sectionDetail p,
.middle span {
  color: var(--a11y-muted);
}

button,
.choice,
.pill,
.tag,
.option,
.chip,
.reaction,
.ack,
.quickChoice,
.profileToggle button,
.navItem {
  color: var(--a11y-text) !important;
  text-shadow: none !important;
}
button *,
.choice *,
.pill *,
.tag *,
.option *,
.chip *,
.reaction *,
.ack *,
.quickChoice *,
.profileToggle button *,
.navItem * {
  color: inherit !important;
  opacity: 1 !important;
  visibility: visible !important;
}

button:not(.primary),
.choice,
.pill,
.tag,
.option,
.chip,
.reaction,
.ack,
.quickChoice,
.profileToggle button {
  background: var(--a11y-surface);
  border-color: var(--a11y-border);
}

.selected,
.choice.selected,
.pill.selected,
.tag.selected,
.option.selected,
.chip.selected,
.reaction.selected,
.ack.selected,
.quickChoice.selected,
button.selected,
button.on,
.profileToggle button.on,
button.active {
  background: var(--a11y-selected) !important;
  color: var(--a11y-text) !important;
  border-color: var(--a11y-selected-border) !important;
  box-shadow: 0 0 0 1px var(--a11y-selected-border) inset !important;
  font-weight: 650;
}
.choice.selected::after,
.pill.selected::after,
.tag.selected::after,
.option.selected::after,
.chip.selected::after,
.quickChoice.selected::after {
  content: " ✓";
  font-weight: 800;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--a11y-focus) !important;
  outline-offset: 3px;
}

button,
.choice,
.pill,
.tag,
.option,
.chip,
.reaction,
.ack,
.quickChoice {
  min-height: 44px;
}

button:disabled,
.disabled {
  opacity: 0.62 !important;
  color: #4f4945 !important;
}

[style*="color:white"],
[style*="color: white"],
[style*="color:#fff"],
[style*="color: #fff"],
[style*="color:#FFF"],
[style*="color: #FFF"] {
  color: var(--a11y-text) !important;
}

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

@media (prefers-contrast: more) {
  :root {
    --a11y-muted: #3e3834;
    --a11y-border: #776b64;
    --a11y-selected-border: #405f53;
  }
}

:root {
  --field-bg: #f6f1ed;
  --field-bg-focus: #f2ebe6;
  --field-border: #b9aaa1;
  --field-placeholder: #716760;
}

input,
textarea,
select {
  background: var(--field-bg) !important;
  color: var(--a11y-text) !important;
  border: 1px solid var(--field-border) !important;
  border-radius: 12px;
  caret-color: var(--a11y-focus);
  box-shadow: none !important;
  -webkit-text-fill-color: var(--a11y-text);
}

input::placeholder,
textarea::placeholder {
  color: var(--field-placeholder) !important;
  opacity: 1;
}

input:hover,
textarea:hover,
select:hover {
  border-color: var(--a11y-selected-border) !important;
}

input:focus,
textarea:focus,
select:focus {
  background: var(--field-bg-focus) !important;
  color: var(--a11y-text) !important;
  border-color: var(--a11y-focus) !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--a11y-text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--field-bg-focus) inset !important;
  transition: background-color 9999s ease-out 0s;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  color-scheme: light;
}

:root {
  --control-bg: #f7f2ee;
  --control-bg-hover: #eee6e0;
  --control-text: #2f2926;
  --control-border: #bcaea5;
  --control-selected: #d9e7df;
  --control-selected-border: #6f897d;
  --control-primary: #d8c7bd;
  --control-primary-hover: #cdb9ae;
  --nav-active: #d9e7df;
}

button,
button.primary,
.primary,
.add,
.back,
.profileToggle button,
.navItem,
.choice,
.option,
.pill,
.tag,
.chip,
.reaction,
.ack,
.quickChoice,
.actionRow button {
  background: var(--control-bg) !important;
  color: var(--control-text) !important;
  border: 1px solid var(--control-border) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

button.primary,
.primary {
  background: var(--control-primary) !important;
  border-color: #a99084 !important;
  color: #251f1c !important;
  font-weight: 700;
}

button.selected,
button.on,
button.active,
.profileToggle button.on,
.navItem.active,
.choice.selected,
.option.selected,
.pill.selected,
.tag.selected,
.chip.selected,
.reaction.selected,
.ack.selected,
.quickChoice.selected {
  background: var(--control-selected) !important;
  border-color: var(--control-selected-border) !important;
  color: #21312a !important;
  box-shadow: 0 0 0 1px var(--control-selected-border) inset !important;
}

.bottom-nav,
nav.bottom-nav {
  background: #fbf8f5 !important;
  border-top: 1px solid var(--control-border) !important;
}
.bottom-nav button,
.bottom-nav .navItem,
nav.bottom-nav button,
nav.bottom-nav .navItem {
  background: transparent !important;
  color: #4d4540 !important;
  border-color: transparent !important;
  opacity: 1 !important;
}
.bottom-nav button.active,
.bottom-nav .navItem.active,
nav.bottom-nav button.active,
nav.bottom-nav .navItem.active {
  background: var(--nav-active) !important;
  color: #21312a !important;
  border-color: var(--control-selected-border) !important;
  border-radius: 12px;
}

button[style*="background:#111"],
button[style*="background: #111"],
button[style*="background:#000"],
button[style*="background: #000"],
button[style*="background:black"],
button[style*="background: black"],
button[style*="background:var(--ink)"],
button[style*="background: var(--ink)"] {
  background: var(--control-bg) !important;
  color: var(--control-text) !important;
}

@media (hover: hover) {
  button:hover,
  .choice:hover,
  .option:hover,
  .pill:hover,
  .tag:hover,
  .chip:hover,
  .reaction:hover,
  .ack:hover,
  .quickChoice:hover {
    background: var(--control-bg-hover) !important;
  }
  button.primary:hover,
  .primary:hover {
    background: var(--control-primary-hover) !important;
  }
  button.selected:hover,
  button.on:hover,
  button.active:hover,
  .navItem.active:hover,
  .choice.selected:hover,
  .option.selected:hover,
  .pill.selected:hover,
  .tag.selected:hover,
  .chip.selected:hover {
    background: #cedfd6 !important;
  }
}

:root {
  --control-bg: #dce9e6;
  --control-bg-hover: #d1e2de;
  --control-text: #18332f;
  --control-border: #58756e;
  --control-selected: #b9d5ce;
  --control-selected-border: #365d55;
  --control-primary: #c7ddd8;
  --control-primary-hover: #bbd4ce;
  --nav-active: #b9d5ce;
  --a11y-focus: #315f57;
}

button,
button.primary,
.primary,
.add,
.back,
.profileToggle button,
.navItem,
.choice,
.option,
.pill,
.tag,
.chip,
.reaction,
.ack,
.quickChoice,
.actionRow button {
  background: var(--control-bg) !important;
  color: var(--control-text) !important;
  border: 2px solid var(--control-border) !important;
  font-weight: 650;
}

button.primary,
.primary {
  background: var(--control-primary) !important;
  color: #142e2a !important;
  border: 2px solid #466b63 !important;
  font-weight: 750;
}

button.selected,
button.on,
button.active,
.profileToggle button.on,
.navItem.active,
.choice.selected,
.option.selected,
.pill.selected,
.tag.selected,
.chip.selected,
.reaction.selected,
.ack.selected,
.quickChoice.selected {
  background: var(--control-selected) !important;
  color: #102c27 !important;
  border: 2px solid var(--control-selected-border) !important;
  box-shadow: 0 0 0 1px var(--control-selected-border) inset !important;
  font-weight: 800;
}

.bottom-nav button,
.bottom-nav .navItem,
nav.bottom-nav button,
nav.bottom-nav .navItem {
  color: #29423d !important;
}
.bottom-nav button.active,
.bottom-nav .navItem.active,
nav.bottom-nav button.active,
nav.bottom-nav .navItem.active {
  background: var(--nav-active) !important;
  color: #102c27 !important;
  border: 2px solid var(--control-selected-border) !important;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--a11y-focus) !important;
  outline-offset: 3px !important;
}

@media (prefers-contrast: more) {
  :root {
    --control-bg: #d5e6e2;
    --control-border: #365d55;
    --control-selected: #aaccc4;
    --control-selected-border: #234a42;
  }
}

.assessmentInvite .primary {
  width: 100%;
  margin-top: 10px;
}
.assessmentNote {
  display: block;
  margin-top: 8px;
  line-height: 1.45;
  color: var(--a11y-muted);
}
.assessmentProgressRow {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 9px;
  color: var(--a11y-muted);
  margin-top: 8px;
}
.assessmentProgress {
  height: 8px;
  background: #e8e0da;
  border: 1px solid var(--control-border);
  border-radius: 999px;
  overflow: hidden;
  margin: 6px 0 16px;
}
.assessmentProgress i {
  display: block;
  height: 100%;
  background: #789d94;
  transition: width 0.2s ease;
}
.assessmentChoices {
  display: grid;
  gap: 9px;
  margin: 12px 0;
}
.assessmentChoice {
  width: 100%;
  text-align: left;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 13px 14px;
  border-radius: 14px;
}
.assessmentChoice .choiceIcon {
  font-size: 18px;
  width: 26px;
  text-align: center;
}
.assessmentChoice .choiceText {
  flex: 1;
}
.assessmentChoice .choiceText b {
  display: block;
  font-size: 11px;
}
.assessmentChoice .choiceText small {
  display: block;
  margin-top: 2px;
  font-size: 9px;
  line-height: 1.35;
}
.assessmentChoice.selected::after {
  content: "✓";
  font-size: 16px;
  font-weight: 900;
}
.assessmentNav {
  display: grid;
  grid-template-columns: 1fr 1fr 1.25fr;
  gap: 8px;
  margin-top: 14px;
}
.assessmentNav button {
  min-width: 0;
}
.fullWidth {
  width: 100%;
  margin-top: 9px;
}
.reviewItem {
  margin-top: 10px;
}
.reviewItem .reviewHead {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: start;
}
.reviewItem h3 {
  margin: 2px 0 5px;
}
.reviewAnswer {
  background: #f6f1ed;
  border: 1px solid var(--a11y-border);
  border-radius: 12px;
  padding: 10px;
  margin-top: 7px;
  font-size: 10px;
  line-height: 1.5;
}
.reviewActions {
  display: flex;
  gap: 7px;
  margin-top: 8px;
}
.reviewActions button {
  min-height: 40px;
  flex: 1;
}

.assessmentContext {
  margin: 12px 0 4px;
}
.contextToggle {
  width: 100%;
  text-align: left;
}
.contextPanel {
  margin-top: 8px;
  padding: 12px;
  background: #f3eee9;
  border: 1px solid var(--a11y-border);
  border-radius: 14px;
}
.contextPanel label {
  display: block;
  font-size: 10px;
  font-weight: 750;
  margin-bottom: 7px;
  color: var(--a11y-text);
}
.contextPanel textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 86px;
}
.contextPanel small {
  display: block;
  margin-top: 6px;
  line-height: 1.4;
  color: var(--a11y-muted);
}
.reviewContext {
  margin-top: 7px;
  padding: 10px;
  background: #eef4f2;
  border: 1px solid #9ab4ad;
  border-radius: 12px;
  font-size: 10px;
  line-height: 1.5;
  color: var(--a11y-text);
}
.reviewContext b {
  display: block;
  margin-bottom: 3px;
}

.detailPreference {
  margin-top: 12px;
  padding: 11px;
  background: #f3eee9;
  border: 1px solid var(--a11y-border);
  border-radius: 14px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}
.detailPreference > span {
  flex: 1;
}
.detailPreference b {
  display: block;
  font-size: 10px;
}
.detailPreference small {
  display: block;
  font-size: 8px;
  line-height: 1.35;
  margin-top: 2px;
  color: var(--a11y-muted);
}
.detailButtons {
  display: flex;
  gap: 5px;
}
.detailButtons button {
  min-height: 38px;
  padding: 7px 9px;
  font-size: 9px;
}
.seeMore {
  min-height: 34px !important;
  padding: 5px 9px !important;
  margin-top: 7px;
  font-size: 9px;
}
.depthDetail {
  display: none;
  margin-top: 8px;
  padding: 10px;
  background: #eef4f2;
  border: 1px solid #9ab4ad;
  border-radius: 11px;
}
.depthDetail > p {
  margin: 0 !important;
  color: var(--a11y-text) !important;
  line-height: 1.5;
}
.depthItem.expanded .depthDetail {
  display: block;
}
.ownWords {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #afc4be;
}
.ownWords b {
  display: block;
  font-size: 9px;
  margin-bottom: 3px;
}
.ownWords span {
  display: block;
  font-size: 9px;
  line-height: 1.5;
  color: var(--a11y-muted);
  font-style: italic;
}
.detail-detailed .depthItem .depthDetail {
  display: block;
}
.detail-detailed .depthItem .seeMore {
  display: none;
}

.screenHead {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.screenHead .backBtn {
  flex: 0 0 auto;
  min-width: 54px;
}
.screenHead h1 {
  font-size: 20px;
  line-height: 1.12;
  margin: 2px 0 5px;
}
.screenHead .subtle {
  margin: 0;
  line-height: 1.45;
}
.planAdd {
  width: 100%;
  margin-bottom: 12px;
}
.planMaker {
  padding: 13px;
  background: #f3eee9;
  border: 1px solid var(--a11y-border);
  border-radius: 16px;
  margin-bottom: 16px;
}
.planMaker > label,
.planField > label {
  display: block;
  font-size: 10px;
  font-weight: 800;
  margin: 0 0 6px;
}
.planField {
  margin-top: 11px;
}
.planField label span {
  font-weight: 500;
  color: var(--a11y-muted);
}
.planChoices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.planChoices button {
  padding: 7px 4px;
  font-size: 8px;
}
.planActions {
  display: flex;
  gap: 7px;
  margin-top: 12px;
}
.planActions button {
  flex: 1;
}
.planSection {
  margin: 18px 0;
}
.planSectionHead {
  margin-bottom: 8px;
}
.planSectionHead > div {
  display: flex;
  align-items: center;
  gap: 6px;
}
.planSectionHead b {
  font-size: 13px;
}
.planSectionHead small {
  display: block;
  margin: 3px 0 0 24px;
  color: var(--a11y-muted);
  line-height: 1.35;
}
.planCard {
  padding: 12px;
  background: #f8f4f0;
  border: 1px solid var(--a11y-border);
  border-radius: 15px;
  margin-bottom: 8px;
}
.planTop {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  justify-content: space-between;
}
.planTop b {
  font-size: 11px;
}
.planTop p {
  font-size: 9px;
  margin: 4px 0 0;
  line-height: 1.4;
  color: var(--a11y-muted);
}
.planPill {
  flex: 0 0 auto;
  font-size: 8px;
  font-weight: 750;
  padding: 5px 7px;
  border-radius: 999px;
  background: #dce9e6;
  border: 1px solid #58756e;
  color: #18332f;
}
.planMeta {
  font-size: 9px;
  margin-top: 8px;
  color: var(--a11y-muted);
}
.planCardActions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.planCardActions button {
  flex: 1;
  min-height: 38px;
  font-size: 9px;
}
.happenedPrompt {
  position: fixed;
  z-index: 80;
  left: 50%;
  bottom: 84px;
  transform: translateX(-50%);
  width: min(330px, calc(100% - 32px));
  box-sizing: border-box;
  padding: 15px;
  background: #f3eee9;
  border: 2px solid #58756e;
  border-radius: 18px;
  box-shadow: 0 8px 30px rgba(24, 51, 47, 0.18);
}
.happenedPrompt h3 {
  margin: 4px 0 5px;
}
.happenedPrompt p {
  font-size: 10px;
  line-height: 1.45;
  margin: 0;
  color: var(--a11y-muted);
}

.memoryHero {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 13px;
  background: #eef4f2;
  border: 1px solid #9ab4ad;
  border-radius: 17px;
  margin-bottom: 12px;
}
.memoryHeroArt {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #c7ddd8;
  border: 2px solid #58756e;
  font-size: 23px;
  color: #365d55;
}
.memoryHero b {
  font-size: 11px;
}
.memoryHero p {
  font-size: 9px;
  line-height: 1.45;
  margin: 4px 0 0;
  color: var(--a11y-muted);
}
.memoryTopActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-bottom: 12px;
}
.memoryFilter {
  display: flex;
  gap: 5px;
  overflow: auto;
  padding-bottom: 5px;
  margin-bottom: 9px;
}
.memoryFilter button {
  white-space: nowrap;
  min-height: 38px;
  padding: 6px 9px;
  font-size: 8px;
}
.memoryGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.scrapCard {
  background: #f8f4f0;
  border: 1px solid var(--a11y-border);
  border-radius: 16px;
  overflow: hidden;
}
.scrapCard.wide {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 43% 57%;
}
.scrapPhoto {
  min-height: 118px;
  display: grid;
  place-items: end start;
  padding: 8px;
  box-sizing: border-box;
  background: linear-gradient(145deg, #cadbd6, #e7ddd5);
}
.scrapPhoto.cozy {
  background: linear-gradient(145deg, #d9cfc8, #c5d8d4);
}
.scrapPhoto span {
  font-size: 8px;
  padding: 4px 6px;
  border-radius: 999px;
  background: #f6f1ed;
  border: 1px solid #8ca39d;
}
.scrapBody {
  padding: 10px;
}
.scrapDate,
.storyDate {
  font-size: 7px;
  letter-spacing: 0.12em;
  font-weight: 800;
  color: #58756e;
}
.scrapBody h3 {
  font-size: 11px;
  line-height: 1.25;
  margin: 4px 0;
}
.scrapBody p {
  font-size: 9px;
  line-height: 1.45;
  margin: 0;
  color: var(--a11y-muted);
}
.memoryEmoji {
  font-size: 24px;
  margin: 5px 0;
}
.scrapTags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 7px;
}
.scrapTags span {
  font-size: 7px;
  padding: 4px 6px;
  background: #eef4f2;
  border-radius: 999px;
  border: 1px solid #afc4be;
}
.storyMark {
  width: 100%;
  margin-top: 9px;
  min-height: 36px !important;
  font-size: 8px !important;
}
.storyMark.on {
  font-weight: 800;
  border-width: 2px;
  background: #b9d5ce;
}
.storyIntro {
  display: flex;
  gap: 9px;
  padding: 11px;
  background: #f3eee9;
  border: 1px solid var(--a11y-border);
  border-radius: 14px;
  margin-bottom: 17px;
}
.storyIntro > span {
  font-size: 20px;
  color: #365d55;
}
.storyIntro p {
  font-size: 9px;
  line-height: 1.45;
  margin: 0;
}
.storyTimeline {
  position: relative;
  padding-left: 25px;
}
.storyTimeline:before {
  content: "";
  position: absolute;
  left: 8px;
  top: 24px;
  bottom: 34px;
  width: 2px;
  background: #9ab4ad;
}
.storyYear {
  font-size: 16px;
  font-weight: 850;
  margin: 0 0 13px -25px;
  color: #18332f;
}
.storyMoment {
  position: relative;
  margin-bottom: 22px;
}
.storyDot {
  position: absolute;
  left: -25px;
  top: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #dce9e6;
  border: 2px solid #58756e;
  font-size: 9px;
  z-index: 1;
}
.storyMoment.featured .storyDot {
  background: #b9d5ce;
  font-weight: 900;
}
.storyContent {
  padding: 12px;
  background: #f8f4f0;
  border: 1px solid var(--a11y-border);
  border-radius: 16px;
}
.storyContent h3 {
  font-size: 12px;
  margin: 7px 0 4px;
}
.storyContent > p {
  font-size: 9px;
  line-height: 1.45;
  margin: 0 0 9px;
  color: var(--a11y-muted);
}
.storyPhoto {
  height: 110px;
  border-radius: 11px;
  margin-top: 7px;
  background: linear-gradient(145deg, #d9cfc8, #c5d8d4);
}
.storyPhoto.scenic {
  background: linear-gradient(145deg, #bfd3cd, #e2d6ce);
}
.storyNote {
  padding: 9px;
  background: #eef4f2;
  border: 1px solid #afc4be;
  border-radius: 10px;
  margin: 8px 0;
}
.storyNote b,
.storyNote span {
  display: block;
  font-size: 8px;
}
.storyNote span {
  line-height: 1.45;
  margin-top: 3px;
  color: var(--a11y-muted);
}
.storyContent button {
  width: 100%;
  min-height: 36px;
  font-size: 8px;
}
.storyNow {
  position: relative;
  margin: 4px 0 18px;
}
.storyNow:before {
  content: "";
  position: absolute;
  left: -22px;
  top: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #b9d5ce;
  border: 2px solid #365d55;
}
.storyNow span {
  font-size: 9px;
  font-weight: 850;
}
.storyNow p {
  font-size: 8px;
  margin: 2px 0;
  color: var(--a11y-muted);
}
.storyFooter {
  text-align: center;
  padding: 12px;
  background: #eef4f2;
  border-radius: 14px;
  border: 1px solid #afc4be;
}
.storyFooter b {
  font-size: 9px;
}
.storyFooter p {
  font-size: 8px;
  line-height: 1.4;
  margin: 4px 0 0;
  color: var(--a11y-muted);
}
@media (max-width: 370px) {
  .memoryGrid {
    grid-template-columns: 1fr;
  }
  .scrapCard.wide {
    grid-column: auto;
    display: block;
  }
}

.storyYearNav {
  display: flex;
  gap: 5px;
  overflow: auto;
  margin: 0 0 14px;
  padding-bottom: 4px;
}
.storyYearNav button {
  min-height: 38px;
  padding: 6px 11px;
  font-size: 9px;
  white-space: nowrap;
}
.storyOverflow {
  position: relative;
  margin: 2px 0 22px;
}
.storyOverflow:before {
  content: "";
  position: absolute;
  left: -22px;
  top: 15px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #dce9e6;
  border: 2px solid #58756e;
  z-index: 1;
}
.storyOverflowBtn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  padding: 10px 11px;
}
.storyOverflowBtn span {
  display: block;
}
.storyOverflowBtn b {
  display: block;
  font-size: 9px;
}
.storyOverflowBtn small {
  display: block;
  font-size: 8px;
  line-height: 1.35;
  margin-top: 2px;
  color: var(--a11y-muted);
}
.storyOverflowBtn strong {
  font-size: 9px;
  white-space: nowrap;
  color: #365d55;
}
.storyOverflowItems {
  padding: 7px 4px 0 11px;
  border-left: 1px dashed #9ab4ad;
  margin-left: 8px;
}
.miniStory {
  padding: 7px 9px;
  margin: 5px 0;
  background: #f8f4f0;
  border: 1px solid var(--a11y-border);
  border-radius: 10px;
}
.miniStory span {
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #58756e;
}
.miniStory p {
  font-size: 8px;
  line-height: 1.4;
  margin: 3px 0 0;
  color: var(--a11y-muted);
}

.clickableStory {
  cursor: pointer;
}
.clickableStory:focus-visible {
  outline: 3px solid #315f57;
  outline-offset: 3px;
}
.clickableStory:hover .storyContent {
  border-color: #58756e;
}
.miniStory {
  display: block;
  width: 100%;
  text-align: left;
  color: inherit;
  font-family: inherit;
  min-height: 44px !important;
}
.storyDetailOverlay {
  position: fixed;
  z-index: 150;
  inset: 0;
  background: rgba(24, 51, 47, 0.28);
  padding: 18px;
  overflow: auto;
}
.storyDetailCard {
  max-width: 390px;
  margin: 18px auto 90px;
  background: #f6f1ed;
  border: 2px solid #58756e;
  border-radius: 22px;
  padding: 15px;
  box-shadow: 0 14px 42px rgba(24, 51, 47, 0.22);
}
.storyDetailHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.storyDetailHead span {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #58756e;
}
.storyDetailVisual {
  height: 150px;
  margin: 12px 0;
  border-radius: 15px;
  background: linear-gradient(145deg, #bfd3cd, #e2d6ce);
  display: grid;
  place-items: center;
  font-size: 34px;
}
.storyDetailCard h2 {
  font-size: 18px;
  line-height: 1.2;
  margin: 4px 0 5px;
}
.storyDetailCard > p {
  font-size: 10px;
  line-height: 1.5;
  margin: 0 0 12px;
  color: var(--a11y-muted);
}
.storyDetailComment,
.storyDetailPhotos,
.storyDetailNotes {
  padding: 11px;
  margin-top: 10px;
  background: #eef4f2;
  border: 1px solid #afc4be;
  border-radius: 13px;
}
.storyDetailComment p,
.detailNote p {
  font-size: 9px;
  line-height: 1.45;
  margin: 4px 0 0;
}
.detailPhotoRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 7px;
}
.detailPhoto,
.detailAddPhoto {
  height: 86px !important;
  min-height: 86px !important;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 8px;
}
.detailPhoto {
  background: linear-gradient(145deg, #d9cfc8, #c5d8d4);
  border: 1px solid #8ca39d;
}
.detailNote {
  padding: 8px 0;
  border-bottom: 1px solid #afc4be;
}
.detailNote:last-of-type {
  border-bottom: 0;
}
.detailNote b {
  font-size: 8px;
}
.storyDetailNotes > button {
  width: 100%;
  margin-top: 8px;
  font-size: 8px;
}

.scrapbookPage {
  position: relative;
  padding: 4px 1px 2px;
}
.scrapbookTitle {
  text-align: center;
  padding: 5px 9px 10px;
}
.scrapbookDate {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.11em;
  color: #58756e;
  text-transform: uppercase;
}
.scrapbookTitle h2 {
  font-size: 20px;
  margin: 5px 0 5px;
}
.scrapbookTitle p {
  font-size: 10px;
  line-height: 1.5;
  margin: 0;
  color: var(--a11y-muted);
}
.scrapbookMainPhoto {
  height: 190px !important;
  margin: 4px 8px 0 !important;
  border: 7px solid #fbf8f4;
  border-radius: 4px !important;
  box-shadow: 0 4px 13px rgba(24, 51, 47, 0.12);
  transform: rotate(-0.5deg);
}
.photoCaption {
  text-align: center;
  font-size: 8px;
  font-style: italic;
  color: #58756e;
  margin: 7px 0 13px;
}
.scrapbookPhotoScatter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 3px 13px 14px;
}
.scrapSmallPhoto {
  height: 115px;
  background: linear-gradient(145deg, #d9cfc8, #c5d8d4);
  border: 6px solid #fbf8f4;
  box-shadow: 0 3px 10px rgba(24, 51, 47, 0.11);
  display: grid;
  place-items: end start;
  padding: 5px;
  box-sizing: border-box;
}
.scrapSmallPhoto span {
  font-size: 7px;
  color: #58756e;
}
.tiltLeft {
  transform: rotate(-2deg);
}
.tiltRight {
  transform: rotate(1.8deg);
}
.scrapbookConversation {
  display: grid;
  gap: 8px;
  margin: 4px 7px 13px;
}
.scrapNote {
  max-width: 84%;
  padding: 10px 11px;
  border-radius: 14px;
  border: 1px solid #afc4be;
}
.scrapNote.yours {
  background: #eef4f2;
}
.scrapNote.theirs {
  background: #f1e9e3;
  margin-left: auto;
}
.scrapNote b {
  font-size: 8px;
}
.scrapNote p {
  font-size: 9px;
  line-height: 1.45;
  margin: 3px 0 0;
}
.keepsake {
  display: flex;
  gap: 9px;
  align-items: center;
  margin: 0 12px 14px;
  padding: 10px;
  background: #f8f4f0;
  border: 1px dashed #8ca39d;
  border-radius: 10px;
  transform: rotate(0.4deg);
}
.keepsake > span {
  font-size: 20px;
}
.keepsake b {
  font-size: 8px;
}
.keepsake p {
  font-size: 9px;
  margin: 3px 0 0;
  font-style: italic;
  color: var(--a11y-muted);
}
.whyKept {
  margin: 0 6px 14px !important;
  background: #e7f0ed !important;
  border: 1px solid #9ab4ad !important;
  padding: 12px !important;
}
.whyKept p {
  font-size: 10px !important;
  line-height: 1.55 !important;
}
.scrapbookActions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5px;
  padding: 0 5px 4px;
}
.scrapbookActions button {
  font-size: 7px;
  min-height: 44px;
  padding: 5px;
}
@media (max-width: 350px) {
  .scrapbookActions {
    grid-template-columns: 1fr;
  }
  .scrapbookPhotoScatter {
    gap: 8px;
    padding-left: 7px;
    padding-right: 7px;
  }
}

:root {
  --edu-ink: #17342f;
  --edu-sage: #b9d5ce;
  --edu-mist: #dce9e6;
  --edu-cream: #fbf7f2;
  --edu-blush: #eadbd4;
  --edu-gold: #d9c79f;
}
body {
  background:
    radial-gradient(
      circle at 12% 4%,
      rgba(185, 213, 206, 0.34),
      transparent 28%
    ),
    radial-gradient(
      circle at 92% 18%,
      rgba(234, 219, 212, 0.42),
      transparent 27%
    ),
    linear-gradient(180deg, #f8f3ee 0%, #f2ebe5 100%);
}
.phone,
.appShell,
.shell {
  box-shadow: 0 20px 60px rgba(24, 51, 47, 0.12);
}
.screen {
  background:
    radial-gradient(
      circle at 90% 2%,
      rgba(185, 213, 206, 0.18),
      transparent 22%
    ),
    linear-gradient(
      180deg,
      rgba(251, 247, 242, 0.98),
      rgba(246, 241, 237, 0.98)
    );
}
.screenHead h1 {
  font-size: 23px !important;
  letter-spacing: -0.025em;
}
.eyebrow {
  letter-spacing: 0.15em !important;
  color: #466961 !important;
}
.primary {
  box-shadow: 0 3px 0 rgba(54, 93, 85, 0.15);
}
button {
  transition:
    transform 0.14s ease,
    box-shadow 0.14s ease,
    background-color 0.14s ease;
}
button:active {
  transform: translateY(1px);
}
@media (prefers-reduced-motion: reduce) {
  button {
    transition: none;
  }
}

.memoryHero {
  position: relative;
  overflow: hidden;
  padding: 17px !important;
  background: linear-gradient(
    135deg,
    #d8e9e4 0%,
    #edf1e8 56%,
    #eadbd4 100%
  ) !important;
  border: 2px solid #6f8f87 !important;
  box-shadow: 0 8px 22px rgba(24, 51, 47, 0.1);
}
.memoryHero:after {
  content: "♡";
  position: absolute;
  right: -5px;
  top: -28px;
  font-size: 94px;
  color: rgba(54, 93, 85, 0.09);
  transform: rotate(12deg);
}
.memoryHeroArt {
  width: 54px !important;
  height: 54px !important;
  flex-basis: 54px !important;
  background: #fbf7f2 !important;
  box-shadow: 0 5px 13px rgba(24, 51, 47, 0.12);
}
.memoryHero b {
  font-size: 13px !important;
  letter-spacing: -0.01em;
}
.memoryHero p {
  font-size: 10px !important;
}

.memoryGrid {
  gap: 11px !important;
}
.scrapCard {
  border: 1px solid #91aaa4 !important;
  box-shadow: 0 5px 16px rgba(24, 51, 47, 0.08);
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease;
}
.scrapCard:nth-child(2n) {
  transform: rotate(0.35deg);
}
.scrapCard:nth-child(3n) {
  transform: rotate(-0.35deg);
}
.scrapCard:hover {
  box-shadow: 0 9px 24px rgba(24, 51, 47, 0.13);
}
.scrapPhoto {
  position: relative;
  min-height: 132px !important;
  background:
    linear-gradient(155deg, rgba(34, 74, 65, 0.04), rgba(255, 255, 255, 0.1)),
    linear-gradient(145deg, #abc8c1, #ead6cb) !important;
}
.scrapPhoto:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(24, 51, 47, 0.18));
}
.scrapPhoto span {
  position: relative;
  z-index: 1;
  background: rgba(251, 247, 242, 0.92) !important;
}
.scrapBody h3 {
  font-size: 12px !important;
}
.memoryEmoji {
  filter: drop-shadow(0 3px 4px rgba(24, 51, 47, 0.12));
}

.storyIntro {
  background: linear-gradient(135deg, #f1e7e1, #e7f0ed) !important;
  border: 1px solid #91aaa4 !important;
}
.storyYearNav {
  position: sticky;
  top: 0;
  z-index: 4;
  padding: 6px 0;
  background: rgba(246, 241, 237, 0.92);
  backdrop-filter: blur(8px);
}
.storyYear {
  font-size: 20px !important;
  letter-spacing: -0.03em;
}
.storyTimeline:before {
  width: 3px !important;
  background: linear-gradient(#6f8f87, #b9d5ce, #d9c79f) !important;
  border-radius: 3px;
}
.storyDot {
  box-shadow:
    0 0 0 4px #f6f1ed,
    0 3px 8px rgba(24, 51, 47, 0.13);
}
.storyMoment.featured .storyDot {
  background: #a9cec5 !important;
}
.storyContent {
  border: 1px solid #91aaa4 !important;
  box-shadow: 0 6px 18px rgba(24, 51, 47, 0.08);
}
.storyMoment.featured .storyContent {
  background: linear-gradient(145deg, #fbf7f2, #edf4f1) !important;
  border: 2px solid #78978f !important;
}
.storyPhoto {
  height: 142px !important;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(24, 51, 47, 0.08);
}
.storyPhoto:after {
  content: "♡";
  position: absolute;
  right: 12px;
  bottom: 7px;
  font-size: 21px;
  color: rgba(251, 247, 242, 0.86);
  text-shadow: 0 2px 5px rgba(24, 51, 47, 0.22);
}
.storyNote {
  border-left: 4px solid #78978f !important;
}

.storyDetailOverlay {
  background: rgba(20, 43, 39, 0.42) !important;
  backdrop-filter: blur(4px);
}
.storyDetailCard {
  background:
    radial-gradient(
      circle at 95% 4%,
      rgba(185, 213, 206, 0.35),
      transparent 25%
    ),
    #f8f2ec !important;
  border: 1px solid #6f8f87 !important;
  box-shadow: 0 22px 70px rgba(17, 45, 39, 0.28) !important;
}
.scrapbookPage:before {
  content: "OUR MEMORY";
  display: block;
  text-align: center;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.24em;
  color: #6a8780;
  margin: 4px 0 8px;
}
.scrapbookTitle h2 {
  font-size: 24px !important;
  letter-spacing: -0.035em;
}
.scrapbookMainPhoto {
  height: 220px !important;
  border: 9px solid #fffaf5 !important;
  box-shadow: 0 10px 24px rgba(24, 51, 47, 0.16) !important;
}
.scrapSmallPhoto {
  height: 132px !important;
  border-color: #fffaf5 !important;
  box-shadow: 0 7px 18px rgba(24, 51, 47, 0.13) !important;
}
.photoCaption {
  font-size: 9px !important;
}
.scrapNote {
  box-shadow: 0 4px 11px rgba(24, 51, 47, 0.06);
}
.scrapNote.yours {
  border-radius: 16px 16px 16px 4px !important;
}
.scrapNote.theirs {
  border-radius: 16px 16px 4px 16px !important;
}
.keepsake {
  background: linear-gradient(135deg, #fbf7f2, #f0e4dd) !important;
  border: 1px dashed #78978f !important;
  box-shadow: 0 4px 12px rgba(24, 51, 47, 0.07);
}
.whyKept {
  position: relative;
  background: linear-gradient(135deg, #dfeee9, #f1e8e2) !important;
  border: 2px solid #78978f !important;
  box-shadow: 0 6px 16px rgba(24, 51, 47, 0.08);
}
.whyKept:after {
  content: "♡";
  position: absolute;
  right: 11px;
  top: 7px;
  font-size: 24px;
  color: rgba(54, 93, 85, 0.14);
}
.storyFooter {
  background: linear-gradient(135deg, #e5f0ec, #f0e5df) !important;
}

@media (prefers-contrast: more) {
  .memoryHero,
  .scrapCard,
  .storyContent,
  .storyDetailCard,
  .whyKept {
    border-color: #365d55 !important;
  }
}

:root {
  --rich-shadow: 0 7px 20px rgba(24, 51, 47, 0.085);
  --rich-shadow-soft: 0 4px 12px rgba(24, 51, 47, 0.065);
  --rich-border: #91aaa4;
  --rich-sage: #dce9e6;
  --rich-sage-strong: #b9d5ce;
  --rich-blush: #eadbd4;
  --rich-cream: #fbf7f2;
}

header,
.topbar,
.appHeader {
  background: rgba(248, 243, 238, 0.94) !important;
  backdrop-filter: blur(10px);
  border-bottom-color: #a9bbb6 !important;
}
.bottomNav,
.bottom-nav,
nav.bottom {
  background: rgba(248, 243, 238, 0.96) !important;
  backdrop-filter: blur(12px);
  border-top: 1px solid #a9bbb6 !important;
  box-shadow: 0 -8px 24px rgba(24, 51, 47, 0.07);
}
.bottomNav button.on,
.bottom-nav button.on,
nav.bottom button.on {
  background: #b9d5ce !important;
  border: 2px solid #58756e !important;
  font-weight: 850 !important;
  box-shadow: 0 3px 9px rgba(24, 51, 47, 0.09);
}

.card,
.panel,
.tile,
.sectionCard,
.statusCard,
.todayCard,
.gameCard,
.toolCard,
.profileCard,
.guideCard,
.planCard,
.checkCard {
  border-color: var(--rich-border) !important;
  box-shadow: var(--rich-shadow-soft);
}
.card:nth-of-type(3n + 1),
.gameCard:nth-of-type(3n + 1),
.toolCard:nth-of-type(3n + 1) {
  background: linear-gradient(145deg, #fbf7f2, #eef4f2) !important;
}
.card:nth-of-type(3n + 2),
.gameCard:nth-of-type(3n + 2),
.toolCard:nth-of-type(3n + 2) {
  background: linear-gradient(145deg, #fbf7f2, #f2e8e2) !important;
}
h1,
h2,
h3 {
  color: #17342f;
}
.screen > h1,
.screenHead h1 {
  position: relative;
}
.screenHead h1:after {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #78978f, #d9c79f);
  margin-top: 7px;
}

#todayHome .hero,
#todayHome .todayHero,
#todayHome .checkinCard,
#todayHome .currentCheckin {
  background: linear-gradient(135deg, #dcebe7, #f4ebe5) !important;
  border: 2px solid #78978f !important;
  box-shadow: var(--rich-shadow) !important;
}
#todayHome .sectionTitle,
#todayHome h2 {
  letter-spacing: -0.02em;
}
#todayHome .thinkingCard,
#todayHome [class*="thinking"] {
  border-color: #91aaa4 !important;
}
#todayHome .thinkingCard {
  background: linear-gradient(145deg, #edf5f2, #f3e8e2) !important;
}

#playHome .gameCard,
#playHome .playCard,
#playHome [class*="game"] {
  border-color: #91aaa4;
}
#playHome .categoryHead,
#playHome .playCategory {
  background: linear-gradient(135deg, #eef4f2, #f6efea) !important;
  border-color: #a0b5af !important;
}
#playHome .gameCard:hover {
  box-shadow: var(--rich-shadow);
}

#translationHome .toolCard,
#translationHome .translateCard,
#translationHome [class*="quickTool"] {
  background: linear-gradient(145deg, #edf5f2, #f7f1ec) !important;
  border: 1px solid #91aaa4 !important;
  box-shadow: var(--rich-shadow-soft);
}
#translationHome .toolCard:nth-child(even),
#translationHome .translateCard:nth-child(even) {
  background: linear-gradient(145deg, #f5ece6, #eef4f2) !important;
}

#understandProfile .profileToggle,
#understandProfile .detailPreference {
  box-shadow: var(--rich-shadow-soft);
}
#understandProfile .guideLine,
#understandProfile .depthItem,
#understandProfile .profileSection {
  border-color: #9ab4ad !important;
}
#understandProfile .depthDetail {
  background: linear-gradient(145deg, #e6f0ed, #f4ece7) !important;
  box-shadow: inset 3px 0 0 #78978f;
}
#understandProfile .ownWords {
  font-style: italic;
}

#plans .planMaker {
  background: linear-gradient(145deg, #f5ede7, #eaf3f0) !important;
  border: 2px solid #78978f !important;
  box-shadow: var(--rich-shadow);
}
#plans .planCard {
  background: linear-gradient(145deg, #fbf7f2, #eef4f2) !important;
  border-color: #91aaa4 !important;
  box-shadow: var(--rich-shadow-soft);
}
#plans .planSection:nth-of-type(even) .planCard {
  background: linear-gradient(145deg, #fbf7f2, #f2e8e2) !important;
}
#plans .planPill {
  box-shadow: 0 2px 6px rgba(24, 51, 47, 0.06);
}

#home .card,
#home .usCard,
#home [class*="hubCard"] {
  border-color: #91aaa4 !important;
  box-shadow: var(--rich-shadow-soft);
}
#home .card:nth-child(odd),
#home .usCard:nth-child(odd) {
  background: linear-gradient(145deg, #eef4f2, #fbf7f2) !important;
}
#home .card:nth-child(even),
#home .usCard:nth-child(even) {
  background: linear-gradient(145deg, #f3e8e2, #fbf7f2) !important;
}

#checkinQuick .card,
#checkinQuick .panel,
#translationCheck .card,
#translationCheck .panel,
#understandAssessment .card,
#understandAssessment .panel {
  border-color: #91aaa4 !important;
  box-shadow: var(--rich-shadow-soft);
}
.choice.on,
.chip.on,
.option.on,
.selected {
  box-shadow:
    0 0 0 1px #365d55,
    0 4px 10px rgba(24, 51, 47, 0.08) !important;
}

input,
textarea,
select {
  border: 1.5px solid #78978f !important;
  box-shadow: inset 0 1px 2px rgba(24, 51, 47, 0.035);
}
input:focus,
textarea:focus,
select:focus {
  box-shadow: 0 0 0 3px rgba(49, 95, 87, 0.14) !important;
}

.badge,
.pill,
.tag {
  border-color: #91aaa4 !important;
}
hr {
  border-color: #b5c4c0 !important;
}

@media (prefers-contrast: more) {
  .card,
  .panel,
  .tile,
  .sectionCard,
  .gameCard,
  .toolCard,
  .profileCard,
  .planCard {
    border-width: 2px !important;
    border-color: #365d55 !important;
    box-shadow: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .scrapCard,
  .gameCard,
  .toolCard {
    transform: none !important;
  }
}

.screen {
  padding-top: 18px !important;
  background:
    radial-gradient(
      circle at 8% 0%,
      rgba(185, 213, 206, 0.26),
      transparent 25%
    ),
    radial-gradient(
      circle at 96% 14%,
      rgba(234, 219, 212, 0.3),
      transparent 24%
    ),
    linear-gradient(180deg, #fbf7f2 0%, #f5efea 100%) !important;
}
.homeGreeting,
.screenHead {
  margin-bottom: 16px !important;
  padding: 4px 2px 0;
}
.homeGreeting h1,
.screenHead h1 {
  font-size: 26px !important;
  line-height: 1.04 !important;
  letter-spacing: -0.045em !important;
}
.homeGreeting .sub,
.screenHead .subtle {
  font-size: 11px !important;
  line-height: 1.5 !important;
}
.card,
.understandCard,
.statusCard,
.planCard {
  border: 1.5px solid #91aaa4 !important;
  border-radius: 18px !important;
  box-shadow: 0 7px 20px rgba(24, 51, 47, 0.085) !important;
}
.card {
  padding: 15px !important;
}
.card > .eyebrow:first-child,
.understandCard > .eyebrow:first-child {
  font-size: 8px !important;
  letter-spacing: 0.15em !important;
}
.primary,
.secondary,
.miniBtn,
.stageBtn,
.pill {
  border-radius: 12px !important;
}
.primary {
  box-shadow: 0 4px 10px rgba(24, 51, 47, 0.09) !important;
}

#todayHome .statusCard {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    #d8e9e4 0%,
    #edf2eb 56%,
    #f0e2dc 100%
  ) !important;
  border: 2px solid #6f8f87 !important;
  padding: 18px !important;
}
#todayHome .statusCard:after {
  content: "♡";
  position: absolute;
  right: -7px;
  top: -30px;
  font-size: 100px;
  color: rgba(54, 93, 85, 0.075);
  transform: rotate(11deg);
}
#todayHome .statusMood {
  font-size: 30px !important;
  margin: 8px 0 !important;
}
#todayHome .needTag {
  background: #fbf7f2 !important;
  border: 1px solid #78978f !important;
  box-shadow: 0 2px 5px rgba(24, 51, 47, 0.05);
}
#todayHome .reassure {
  background: rgba(251, 247, 242, 0.72) !important;
  border-left: 4px solid #78978f !important;
}
#todayHome > .card:nth-of-type(2) {
  background: linear-gradient(145deg, #fbf7f2, #edf4f1) !important;
}
#todayHome #personPlayedCard {
  background: linear-gradient(145deg, #f5eae4, #fbf7f2) !important;
}
#todayHome #personDeepCard {
  background: linear-gradient(145deg, #e8f1ee, #fbf7f2) !important;
}
#todayHome .nextMini {
  background: #f8f3ee !important;
  border: 1px solid #a5b9b4 !important;
  border-radius: 14px !important;
  padding: 11px !important;
}
#todayHome > .card:last-of-type {
  background: linear-gradient(135deg, #e3f0ec, #f3e6df) !important;
  border: 2px solid #78978f !important;
  position: relative;
  overflow: hidden;
}
#todayHome .thinkingBtn {
  min-height: 58px !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  background: #c7ddd8 !important;
  border: 2px solid #58756e !important;
  box-shadow: 0 5px 13px rgba(24, 51, 47, 0.1) !important;
}

#playHome .playTabs {
  padding: 5px !important;
  background: rgba(220, 233, 230, 0.72) !important;
  border: 1px solid #91aaa4 !important;
  border-radius: 15px !important;
  box-shadow: 0 4px 12px rgba(24, 51, 47, 0.06) !important;
}
#playHome .playTabs .stageBtn {
  background: transparent !important;
  border-color: transparent !important;
}
#playHome .playTabs .stageBtn.on {
  background: #fbf7f2 !important;
  border: 2px solid #58756e !important;
  box-shadow: 0 3px 8px rgba(24, 51, 47, 0.08) !important;
}
#playHome .playCategory > .card {
  background: linear-gradient(145deg, #fbf7f2, #edf4f1) !important;
  border: 2px solid #91aaa4 !important;
  padding: 10px !important;
}
#playHome .memorySource {
  position: relative;
  overflow: hidden;
  min-height: 66px !important;
  margin: 8px 0 !important;
  padding: 10px 10px 10px 12px !important;
  border: 1px solid #a1b6b0 !important;
  border-radius: 15px !important;
  background: #fffaf6 !important;
  box-shadow: 0 4px 11px rgba(24, 51, 47, 0.055) !important;
}
#playHome .memorySource:nth-of-type(even) {
  background: #f2e8e2 !important;
}
#playHome .memorySource:nth-of-type(odd) {
  background: #eaf3f0 !important;
}
#playHome .memorySource .icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 13px !important;
  background: #fbf7f2 !important;
  border: 1px solid #91aaa4 !important;
  display: grid !important;
  place-items: center !important;
  font-size: 20px !important;
  box-shadow: 0 3px 8px rgba(24, 51, 47, 0.08) !important;
}

#translationHome > .card:first-of-type {
  background: linear-gradient(135deg, #dcebe7, #f2e7e1) !important;
  border: 2px solid #78978f !important;
}
#translationHome > .card:nth-of-type(2) {
  background: linear-gradient(145deg, #fbf7f2, #eaf3f0) !important;
}
#translationHome .memorySource {
  margin: 9px 0 !important;
  padding: 12px !important;
  border-radius: 15px !important;
  border: 1px solid #9eb3ad !important;
  background: #fffaf6 !important;
  box-shadow: 0 4px 11px rgba(24, 51, 47, 0.055) !important;
}
#translationHome .memorySource:nth-of-type(2) {
  background: #f1e7e1 !important;
}
#translationHome .memorySource:nth-of-type(3) {
  background: #e6f0ed !important;
}
#translationHome .memorySource .icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: #fbf7f2 !important;
  border: 1.5px solid #78978f !important;
  display: grid !important;
  place-items: center !important;
  font-size: 19px !important;
}
#translationHome > .card:last-of-type {
  background: linear-gradient(145deg, #f6efea, #edf4f1) !important;
}

#understandProfile > .understandHero {
  background: linear-gradient(135deg, #d7e8e3, #f0e3dc) !important;
  border: 2px solid #6f8f87 !important;
  position: relative;
  overflow: hidden;
}
#understandProfile > .understandHero:after {
  content: "✦";
  position: absolute;
  right: 14px;
  top: 9px;
  font-size: 38px;
  color: rgba(54, 93, 85, 0.12);
}
#understandProfile .profileToggle {
  padding: 5px !important;
  border-radius: 15px !important;
  background: #e6efec !important;
  border: 1px solid #91aaa4 !important;
  box-shadow: 0 4px 11px rgba(24, 51, 47, 0.06) !important;
}
#understandProfile .profileToggle button.on {
  background: #fbf7f2 !important;
  border: 2px solid #58756e !important;
  font-weight: 850 !important;
  box-shadow: 0 3px 8px rgba(24, 51, 47, 0.08) !important;
}
#understandProfile .profileIntro {
  background: linear-gradient(145deg, #fbf7f2, #edf4f1) !important;
  border: 1.5px solid #91aaa4 !important;
  border-radius: 18px !important;
  padding: 14px !important;
  box-shadow: 0 6px 16px rgba(24, 51, 47, 0.07) !important;
}
#understandProfile .profileAvatar {
  width: 58px !important;
  height: 58px !important;
  border: 4px solid #fbf7f2 !important;
  box-shadow: 0 4px 11px rgba(24, 51, 47, 0.12) !important;
}
#understandProfile .quickGuide {
  background: linear-gradient(145deg, #e7f1ee, #f5ebe5) !important;
  border: 2px solid #78978f !important;
}
#understandProfile .guideLine {
  background: rgba(251, 247, 242, 0.75) !important;
  border: 1px solid #a4b8b2 !important;
  border-radius: 13px !important;
  margin: 7px 0 !important;
  padding: 11px !important;
}
#understandProfile .trait {
  background: #fbf7f2 !important;
  border: 1px solid #a4b8b2 !important;
  border-radius: 14px !important;
  padding: 11px !important;
  margin: 8px 0 !important;
}
#understandProfile .profileSection {
  background: linear-gradient(145deg, #fbf7f2, #eef4f2) !important;
  border: 1px solid #9eb3ad !important;
  border-radius: 15px !important;
  box-shadow: 0 4px 11px rgba(24, 51, 47, 0.055) !important;
}
#understandProfile .profileSection:nth-child(even) {
  background: linear-gradient(145deg, #fbf7f2, #f3e9e3) !important;
}
#understandProfile .assessmentInvite {
  background: linear-gradient(135deg, #dcebe7, #f2e7e1) !important;
  border: 2px solid #78978f !important;
}
#understandProfile .suggestion {
  background: #fbf7f2 !important;
  border: 1px solid #9eb3ad !important;
  border-radius: 14px !important;
  padding: 11px !important;
  margin: 8px 0 !important;
}
#understandProfile .usInsight.same {
  background: linear-gradient(145deg, #e2f0eb, #fbf7f2) !important;
}
#understandProfile .usInsight.different {
  background: linear-gradient(145deg, #f3e5df, #fbf7f2) !important;
}
#understandProfile .usInsight {
  border-left: 5px solid #78978f !important;
}

#plans #planMaker {
  background: linear-gradient(135deg, #dcebe7, #f1e4de) !important;
  border: 2px solid #78978f !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 22px rgba(24, 51, 47, 0.09) !important;
}
#plans .planSection {
  margin-top: 18px !important;
  padding-top: 2px !important;
}
#plans .planSectionHead {
  font-size: 15px !important;
  font-weight: 850 !important;
  letter-spacing: -0.02em !important;
  padding: 0 2px 8px !important;
}
#plans .planCard {
  position: relative;
  overflow: hidden;
  padding: 14px !important;
  background: linear-gradient(145deg, #fbf7f2, #eaf3f0) !important;
}
#plans .planSection:nth-of-type(even) .planCard {
  background: linear-gradient(145deg, #fbf7f2, #f2e7e1) !important;
}
#plans .planPill {
  background: #fbf7f2 !important;
  border: 1px solid #78978f !important;
  font-weight: 800 !important;
}
#plans .planMeta {
  font-size: 9px !important;
  color: #58756e !important;
}

#home > .card:first-of-type {
  background: linear-gradient(145deg, #fbf7f2, #edf4f1) !important;
}
#home .usPhotoSetting {
  background: linear-gradient(135deg, #e1eeea, #f1e4de) !important;
  border: 1.5px solid #91aaa4 !important;
  border-radius: 18px !important;
  padding: 14px !important;
}
#home .usPhotoLarge {
  border: 6px solid #fbf7f2 !important;
  box-shadow: 0 7px 18px rgba(24, 51, 47, 0.14) !important;
}
#home .card.hero {
  background: linear-gradient(
    135deg,
    #cfe3dd 0%,
    #edf0e6 50%,
    #ecdcd5 100%
  ) !important;
  border: 2px solid #6f8f87 !important;
  position: relative;
  overflow: hidden;
}
#home .card.hero:after {
  content: "♡";
  position: absolute;
  right: -9px;
  top: -36px;
  font-size: 116px;
  color: rgba(54, 93, 85, 0.075);
}
#home .days {
  font-size: 32px !important;
  letter-spacing: -0.04em !important;
}
#home .row .tile {
  min-height: 96px !important;
  border: 1.5px solid #91aaa4 !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg, #fbf7f2, #eaf3f0) !important;
  box-shadow: 0 5px 13px rgba(24, 51, 47, 0.07) !important;
}
#home .row .tile:nth-child(even) {
  background: linear-gradient(145deg, #fbf7f2, #f2e7e1) !important;
}
#home .timeline {
  background: #fbf7f2 !important;
  border: 1px solid #a0b5af !important;
  border-radius: 15px !important;
  padding: 12px !important;
}
#home .moment {
  border-left: 3px solid #78978f !important;
  padding-left: 12px !important;
}

#checkinQuick > .card,
#definitionTool > .card,
#detailsTool > .card,
#heardTool > .card,
#translationFlow > .card,
#simpleGame > .card,
#whosGame > .card,
#connectionGame > .card,
#knowMeGame > .card,
#dateGame > .card,
#chaosGame > .card,
#wrongGame > .card,
#drawingGame > .card,
#challengeGame > .card,
#storyGame > .card,
#rapidGame > .card,
#thinkingPulse > .card,
#thoughtReceived > .card,
#understandAssessment > .card,
#understandReview > .card {
  background:
    radial-gradient(
      circle at 95% 0%,
      rgba(185, 213, 206, 0.2),
      transparent 26%
    ),
    linear-gradient(145deg, #fbf7f2, #f3ece7) !important;
  border: 2px solid #91aaa4 !important;
}
.meaning,
.reassure {
  border-radius: 14px !important;
  border: 1px solid #a0b5af !important;
  background: #eef4f2 !important;
  padding: 11px !important;
}
.meaning:nth-of-type(even) {
  background: #f3e9e3 !important;
}
.stageGrid {
  gap: 8px !important;
}
.stageBtn {
  background: #e3eeeb !important;
  border: 1.5px solid #78978f !important;
  box-shadow: 0 3px 8px rgba(24, 51, 47, 0.055) !important;
}
.stageBtn.on {
  background: #b9d5ce !important;
  border: 2px solid #365d55 !important;
  font-weight: 850 !important;
  box-shadow:
    0 0 0 1px #365d55,
    0 4px 10px rgba(24, 51, 47, 0.08) !important;
}
.pill {
  background: #e3eeeb !important;
  border: 1.5px solid #78978f !important;
}
.pill.on,
.pill.selected {
  background: #b9d5ce !important;
  border: 2px solid #365d55 !important;
  font-weight: 850 !important;
}

#todayHome,
#playHome,
#translationHome,
#understandProfile,
#plans,
#home {
  background:
    radial-gradient(
      circle at 12% 1%,
      rgba(185, 213, 206, 0.28),
      transparent 25%
    ),
    radial-gradient(
      circle at 94% 12%,
      rgba(234, 219, 212, 0.32),
      transparent 23%
    ),
    linear-gradient(180deg, #fbf7f2 0%, #f4ede8 100%) !important;
}

@media (prefers-contrast: more) {
  #todayHome .statusCard,
  #home .card.hero,
  #plans #planMaker,
  #understandProfile > .understandHero,
  .card,
  .understandCard,
  .statusCard,
  .planCard,
  .memorySource,
  .profileSection,
  .tile {
    border-color: #365d55 !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

:root {
  --love-coral: #e96f78;
  --love-coral-soft: #f8d9d8;
  --love-purple: #7557c8;
  --love-purple-soft: #e8dffc;
  --love-yellow: #f3c96b;
  --love-yellow-soft: #faedbf;
  --love-blue: #6fa8c9;
  --love-blue-soft: #dcecf4;
  --love-mint: #87bea5;
  --love-mint-soft: #ddf0e6;
  --love-peach: #f0a67e;
  --love-peach-soft: #f8e1d3;
  --love-ink: #2e2940;
}

body {
  background: linear-gradient(
    160deg,
    #f9e4df 0%,
    #f5efe6 35%,
    #e9e1f7 100%
  ) !important;
}
.screen {
  background:
    radial-gradient(
      circle at 96% 4%,
      rgba(233, 111, 120, 0.16),
      transparent 22%
    ),
    radial-gradient(
      circle at 4% 16%,
      rgba(117, 87, 200, 0.11),
      transparent 24%
    ),
    #fff9f5 !important;
}
.screenHead h1,
.homeGreeting h1,
h1,
h2,
h3 {
  color: var(--love-ink) !important;
}
.screenHead h1:after {
  background: linear-gradient(
    90deg,
    var(--love-coral),
    var(--love-purple),
    var(--love-yellow)
  ) !important;
  width: 48px !important;
}

.bottomNav,
.bottom-nav,
nav.bottom {
  background: rgba(255, 249, 245, 0.97) !important;
  border-top: 1px solid #d7c8c5 !important;
}
.bottomNav button.on,
.bottom-nav button.on,
nav.bottom button.on {
  background: var(--love-purple-soft) !important;
  border-color: #6650a5 !important;
  color: #35275f !important;
}
.topbar,
.appHeader,
header {
  background: rgba(255, 249, 245, 0.95) !important;
}

#todayHome .statusCard {
  background: linear-gradient(
    135deg,
    var(--love-coral-soft),
    #fff1e8 52%,
    var(--love-yellow-soft)
  ) !important;
  border-color: #c96b73 !important;
}
#todayHome .statusCard:after {
  color: rgba(201, 75, 87, 0.13) !important;
}
#todayHome > .card:nth-of-type(2) {
  background: linear-gradient(
    145deg,
    var(--love-purple-soft),
    #fff9f5
  ) !important;
  border-color: #8871be !important;
}
#todayHome #personPlayedCard {
  background: linear-gradient(
    145deg,
    var(--love-yellow-soft),
    #fff9f5
  ) !important;
  border-color: #b89346 !important;
}
#todayHome #personDeepCard {
  background: linear-gradient(
    145deg,
    var(--love-blue-soft),
    #fff9f5
  ) !important;
  border-color: #6d99b3 !important;
}
#todayHome > .card:last-of-type {
  background: linear-gradient(
    135deg,
    var(--love-coral-soft),
    var(--love-purple-soft)
  ) !important;
  border-color: #a06d91 !important;
}
#todayHome .thinkingBtn {
  background: var(--love-coral) !important;
  color: #fff !important;
  border-color: #a94d57 !important;
}
#todayHome .thinkingBtn:before {
  content: "♡ ";
  font-size: 17px;
}

#playHome .playTabs {
  background: #f3eafb !important;
  border-color: #a48cc9 !important;
}
#playHome .playTabs .stageBtn.on {
  background: var(--love-purple) !important;
  color: #fff !important;
  border-color: #523a99 !important;
}
#playHome .playCategory > .card {
  background: linear-gradient(
    145deg,
    #fff9f5,
    var(--love-yellow-soft)
  ) !important;
  border-color: #c8a354 !important;
}
#playHome .memorySource:nth-of-type(4n + 1) {
  background: var(--love-coral-soft) !important;
  border-color: #d58c91 !important;
}
#playHome .memorySource:nth-of-type(4n + 2) {
  background: var(--love-purple-soft) !important;
  border-color: #9b87c9 !important;
}
#playHome .memorySource:nth-of-type(4n + 3) {
  background: var(--love-blue-soft) !important;
  border-color: #85afc5 !important;
}
#playHome .memorySource:nth-of-type(4n) {
  background: var(--love-yellow-soft) !important;
  border-color: #c9aa63 !important;
}
#playHome .memorySource .icon {
  background: #fff9f5 !important;
  border-color: #8d779e !important;
}

#translationHome > .card:first-of-type {
  background: linear-gradient(
    135deg,
    var(--love-blue-soft),
    var(--love-purple-soft)
  ) !important;
  border-color: #7d72ad !important;
}
#translationHome > .card:nth-of-type(2) {
  background: #fff9f5 !important;
}
#translationHome .memorySource:nth-of-type(3n + 1) {
  background: var(--love-blue-soft) !important;
  border-color: #7ea8bf !important;
}
#translationHome .memorySource:nth-of-type(3n + 2) {
  background: var(--love-peach-soft) !important;
  border-color: #c98d6e !important;
}
#translationHome .memorySource:nth-of-type(3n) {
  background: var(--love-purple-soft) !important;
  border-color: #9681c5 !important;
}
#translationHome .memorySource .icon {
  background: #fff9f5 !important;
  border-color: #7461a1 !important;
}

#understandProfile > .understandHero {
  background: linear-gradient(
    135deg,
    var(--love-purple-soft),
    var(--love-coral-soft)
  ) !important;
  border-color: #9671a0 !important;
}
#understandProfile .profileToggle {
  background: #efe7f8 !important;
  border-color: #a08ac5 !important;
}
#understandProfile .profileToggle button.on {
  background: var(--love-purple) !important;
  color: #fff !important;
  border-color: #513b94 !important;
}
#understandProfile .quickGuide {
  background: linear-gradient(
    145deg,
    var(--love-yellow-soft),
    #fff9f5
  ) !important;
  border-color: #b99b56 !important;
}
#understandProfile .guideLine:nth-child(3n + 1) {
  background: var(--love-coral-soft) !important;
  border-color: #d38c91 !important;
}
#understandProfile .guideLine:nth-child(3n + 2) {
  background: var(--love-blue-soft) !important;
  border-color: #83afc6 !important;
}
#understandProfile .guideLine:nth-child(3n) {
  background: var(--love-purple-soft) !important;
  border-color: #9b88c6 !important;
}
#understandProfile .profileSection:nth-child(4n + 1) {
  background: linear-gradient(
    145deg,
    #fff9f5,
    var(--love-coral-soft)
  ) !important;
}
#understandProfile .profileSection:nth-child(4n + 2) {
  background: linear-gradient(
    145deg,
    #fff9f5,
    var(--love-blue-soft)
  ) !important;
}
#understandProfile .profileSection:nth-child(4n + 3) {
  background: linear-gradient(
    145deg,
    #fff9f5,
    var(--love-yellow-soft)
  ) !important;
}
#understandProfile .profileSection:nth-child(4n) {
  background: linear-gradient(
    145deg,
    #fff9f5,
    var(--love-purple-soft)
  ) !important;
}

#plans #planMaker {
  background: linear-gradient(
    135deg,
    var(--love-coral-soft),
    var(--love-yellow-soft)
  ) !important;
  border-color: #c17d69 !important;
}
#plans .planSection:nth-of-type(3n + 1) .planCard {
  background: linear-gradient(
    145deg,
    #fff9f5,
    var(--love-coral-soft)
  ) !important;
  border-color: #d38c91 !important;
}
#plans .planSection:nth-of-type(3n + 2) .planCard {
  background: linear-gradient(
    145deg,
    #fff9f5,
    var(--love-blue-soft)
  ) !important;
  border-color: #82afc7 !important;
}
#plans .planSection:nth-of-type(3n) .planCard {
  background: linear-gradient(
    145deg,
    #fff9f5,
    var(--love-purple-soft)
  ) !important;
  border-color: #9b87c8 !important;
}
#plans .planPill {
  background: var(--love-yellow-soft) !important;
  border-color: #b8964c !important;
  color: #5a4517 !important;
}

#home .card.hero {
  background: linear-gradient(
    135deg,
    var(--love-coral-soft),
    var(--love-purple-soft) 58%,
    var(--love-yellow-soft)
  ) !important;
  border-color: #a16f8d !important;
}
#home .card.hero:after {
  color: rgba(180, 70, 91, 0.12) !important;
}
#home .usPhotoSetting {
  background: linear-gradient(
    135deg,
    var(--love-purple-soft),
    var(--love-coral-soft)
  ) !important;
  border-color: #9b7ca8 !important;
}
#home .row .tile:nth-child(4n + 1) {
  background: var(--love-coral-soft) !important;
  border-color: #d38c91 !important;
}
#home .row .tile:nth-child(4n + 2) {
  background: var(--love-blue-soft) !important;
  border-color: #83afc6 !important;
}
#home .row .tile:nth-child(4n + 3) {
  background: var(--love-yellow-soft) !important;
  border-color: #c2a157 !important;
}
#home .row .tile:nth-child(4n) {
  background: var(--love-purple-soft) !important;
  border-color: #9a85c5 !important;
}
#home .moment:nth-child(4n + 1) {
  border-left-color: var(--love-coral) !important;
}
#home .moment:nth-child(4n + 2) {
  border-left-color: var(--love-purple) !important;
}
#home .moment:nth-child(4n + 3) {
  border-left-color: var(--love-blue) !important;
}
#home .moment:nth-child(4n) {
  border-left-color: var(--love-yellow) !important;
}

.stageBtn:nth-child(5n + 1),
.pill:nth-child(5n + 1) {
  background: var(--love-coral-soft) !important;
  border-color: #c97b82 !important;
}
.stageBtn:nth-child(5n + 2),
.pill:nth-child(5n + 2) {
  background: var(--love-purple-soft) !important;
  border-color: #927bc0 !important;
}
.stageBtn:nth-child(5n + 3),
.pill:nth-child(5n + 3) {
  background: var(--love-blue-soft) !important;
  border-color: #7ea8bf !important;
}
.stageBtn:nth-child(5n + 4),
.pill:nth-child(5n + 4) {
  background: var(--love-yellow-soft) !important;
  border-color: #b99951 !important;
}
.stageBtn:nth-child(5n),
.pill:nth-child(5n) {
  background: var(--love-mint-soft) !important;
  border-color: #76a98f !important;
}
.stageBtn.on,
.pill.on,
.pill.selected {
  background: var(--love-purple) !important;
  color: #fff !important;
  border-color: #4e398e !important;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px #4e398e !important;
}
.meaning:nth-of-type(3n + 1) {
  background: var(--love-blue-soft) !important;
}
.meaning:nth-of-type(3n + 2) {
  background: var(--love-peach-soft) !important;
}
.meaning:nth-of-type(3n) {
  background: var(--love-purple-soft) !important;
}

.memoryHero {
  background: linear-gradient(
    135deg,
    var(--love-coral-soft),
    var(--love-purple-soft),
    var(--love-yellow-soft)
  ) !important;
  border-color: #a1788d !important;
}
.storyTimeline:before {
  background: linear-gradient(
    var(--love-coral),
    var(--love-purple),
    var(--love-blue),
    var(--love-yellow)
  ) !important;
}
.storyMoment.featured .storyDot {
  background: var(--love-coral) !important;
}
.storyMoment.featured .storyContent {
  border-color: #b27386 !important;
}
.whyKept {
  background: linear-gradient(
    135deg,
    var(--love-yellow-soft),
    var(--love-coral-soft)
  ) !important;
  border-color: #ba806d !important;
}

.card,
.memorySource,
.tile,
.planCard,
.profileSection {
  position: relative;
}
#playHome .memorySource:nth-child(3n):after,
#home .row .tile:nth-child(3n):after {
  content: "✦";
  position: absolute;
  right: 9px;
  top: 6px;
  font-size: 15px;
  color: rgba(78, 57, 142, 0.18);
}

input,
textarea,
select {
  background: #fff9f5 !important;
  border-color: #9a8c91 !important;
}

@media (prefers-contrast: more) {
  :root {
    --love-ink: #17131f;
  }
  .card,
  .memorySource,
  .tile,
  .planCard,
  .profileSection,
  .statusCard {
    border-color: #51475a !important;
  }
  .stageBtn.on,
  .pill.on,
  .pill.selected {
    border-color: #2f225d !important;
  }
}

.ourSpaceStrip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -3px 0 14px;
  padding: 9px 11px;
  background: linear-gradient(
    90deg,
    rgba(248, 217, 216, 0.78),
    rgba(232, 223, 252, 0.72)
  );
  border: 1px solid #b69bb5;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(46, 41, 64, 0.06);
}
.ourPeople {
  display: flex;
  align-items: center;
  min-width: 62px;
}
.personBubble {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 12px;
  border: 3px solid #fff9f5;
  box-shadow: 0 3px 8px rgba(46, 41, 64, 0.13);
}
.youBubble {
  background: #e96f78;
  color: #fff;
}
.partnerBubble {
  background: #7557c8;
  color: #fff;
  margin-left: -9px;
}
.ourSpaceWords {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.ourSpaceWords b {
  font-size: 10px;
  color: #2e2940;
}
.ourSpaceWords span {
  font-size: 8px;
  color: #665b70;
  margin-top: 2px;
}
.tinyKeepsake {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: #fff9f5 !important;
  border: 1.5px solid #9c7997 !important;
  color: #b34f61 !important;
  font-size: 18px !important;
}

.usPhotoLarge,
.profileAvatar,
.avatar {
  background: linear-gradient(145deg, #f8d9d8, #e8dffc) !important;
  border-color: #fff9f5 !important;
}
.usPhotoLarge:empty:after,
.profileAvatar:empty:after {
  content: "♡";
  color: #7557c8;
  font-size: 20px;
}

#todayHome .nextMini:after {
  content: "something to look forward to ♡";
  display: block;
  margin-top: 5px;
  font-size: 7px;
  font-style: italic;
  color: #9b5966;
}
#plans .planCard:after {
  content: "for us";
  position: absolute;
  right: 10px;
  bottom: 8px;
  font-size: 7px;
  font-style: italic;
  font-weight: 800;
  color: rgba(117, 87, 200, 0.52);
}
#understandProfile .quickGuide:after {
  content: "made from what your person has shared";
  display: block;
  margin-top: 9px;
  font-size: 7px;
  font-style: italic;
  color: #756783;
}
#translationHome > .card:first-of-type:after {
  content: "same team ♡";
  display: block;
  text-align: right;
  margin-top: 7px;
  font-size: 8px;
  font-weight: 850;
  color: #7557c8;
}
#playHome .playCategory > .card:after {
  content: "play it your way";
  display: block;
  text-align: right;
  margin-top: 5px;
  font-size: 7px;
  font-style: italic;
  color: #8a6a38;
}

.relationshipArtifact {
  margin: 10px 0;
  padding: 11px;
  border-radius: 14px;
  background: #fff4ec;
  border: 1px dashed #c68a78;
  transform: rotate(-0.35deg);
  box-shadow: 0 3px 9px rgba(46, 41, 64, 0.05);
}
.relationshipArtifact .artifactLabel {
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.11em;
  color: #a55d64;
}
.relationshipArtifact p {
  font-size: 9px;
  line-height: 1.45;
  margin: 5px 0 0;
  font-style: italic;
  color: #4b4051;
}

#home .row .tile:nth-child(odd),
#playHome .memorySource:nth-child(odd) {
  transform: rotate(-0.25deg);
}
#home .row .tile:nth-child(even),
#playHome .memorySource:nth-child(even) {
  transform: rotate(0.25deg);
}
#home .row .tile:active,
#playHome .memorySource:active {
  transform: translateY(1px);
}

.stageBtn.on,
.pill.on,
.pill.selected,
.profileToggle button.on {
  font-weight: 900 !important;
}

.userPhotoFrame {
  background: #fff9f5;
  border: 7px solid #fff9f5;
  border-radius: 8px;
  box-shadow: 0 7px 18px rgba(46, 41, 64, 0.14);
}

@media (prefers-reduced-motion: reduce) {
  #home .row .tile,
  #playHome .memorySource,
  .relationshipArtifact {
    transform: none !important;
  }
}

#todayHome .todayUsCard,
#todayHome [class*="todayUs"],
#todayHome [class*="todaysUs"] {
  margin-bottom: 18px !important;
}

#todayHome > .card:nth-of-type(2) {
  margin-bottom: 18px !important;
}
#todayHome #personPlayedCard {
  margin-top: 0 !important;
}

#todayHome .ourSpaceStrip {
  margin-top: 6px !important;
  margin-bottom: 24px !important;
}
#todayHome .screenHead,
#todayHome .homeGreeting {
  margin-bottom: 18px !important;
}

#todayHome .eyebrow {
  margin-bottom: 10px !important;
}

#todayHome .ourSpaceStrip + h1,
#todayHome .ourSpaceStrip + h2,
#todayHome .ourSpaceStrip + .question,
#todayHome .ourSpaceStrip + [class*="question"] {
  margin-top: 4px !important;
  padding-top: 0 !important;
  line-height: 1.16 !important;
}

#home {
  background:
    radial-gradient(
      circle at 92% 3%,
      rgba(233, 111, 120, 0.19),
      transparent 24%
    ),
    radial-gradient(
      circle at 4% 20%,
      rgba(117, 87, 200, 0.13),
      transparent 25%
    ),
    #fff9f5 !important;
}
#home .homeGreeting {
  margin-bottom: 13px !important;
}
#home .homeGreeting h1 {
  font-size: 28px !important;
}
#home .homeGreeting .sub {
  max-width: 280px;
}

#home .usPhotoSetting {
  padding: 17px !important;
  border-radius: 22px !important;
  background: linear-gradient(
    135deg,
    #f8d9d8 0%,
    #fbe8d9 48%,
    #e8dffc 100%
  ) !important;
  box-shadow: 0 9px 24px rgba(46, 41, 64, 0.1) !important;
}
#home .usPhotoLarge {
  width: 88px !important;
  height: 88px !important;
}
#home .usPhotoSetting:after {
  content: "our place, our story ♡";
  display: block;
  margin-top: 10px;
  text-align: center;
  font-size: 8px;
  font-style: italic;
  font-weight: 800;
  color: #87576a;
}

#home .card.hero {
  padding: 18px !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, #f8d9d8, #e8dffc 58%, #faedbf) !important;
  box-shadow: 0 9px 24px rgba(46, 41, 64, 0.1) !important;
}
#home .card.hero .eyebrow {
  color: #70526d !important;
}
#home .days {
  font-size: 34px !important;
}
#home .card.hero .sub {
  max-width: 255px;
}

#home .row {
  gap: 10px !important;
}
#home .row .tile {
  padding: 14px !important;
  min-height: 112px !important;
  border-radius: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}
#home .row .tile b {
  font-size: 12px !important;
  letter-spacing: -0.015em;
}
#home .row .tile .sub {
  font-size: 8px !important;
  line-height: 1.45 !important;
}
#home .row .tile:nth-child(1):before {
  content: "✦";
  font-size: 19px;
  color: #b84f61;
  margin-bottom: 5px;
}
#home .row .tile:nth-child(2):before {
  content: "▣";
  font-size: 18px;
  color: #557f9b;
  margin-bottom: 5px;
}
#home .row .tile:nth-child(3):before {
  content: "♡";
  font-size: 21px;
  color: #a47c26;
  margin-bottom: 5px;
}
#home .row .tile:nth-child(4):before {
  content: "∞";
  font-size: 20px;
  color: #6650a5;
  margin-bottom: 5px;
}

#home .timeline {
  margin-top: 12px !important;
  padding: 15px !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, #fff9f5, #f7edea) !important;
  box-shadow: 0 6px 16px rgba(46, 41, 64, 0.07) !important;
}
#home .timeline:before {
  content: "A little of our story";
  display: block;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8d5a68;
  margin-bottom: 10px;
}
#home .moment {
  margin: 8px 0 !important;
  padding: 9px 9px 9px 12px !important;
  border-radius: 0 12px 12px 0 !important;
  background: rgba(255, 255, 255, 0.48) !important;
}
#home .moment b {
  font-size: 10px !important;
}
#home .moment .sub {
  font-size: 8px !important;
}

#home .card:not(.hero) {
  border-radius: 18px !important;
}
#home .card:not(.hero):has(.stageGrid) {
  background: linear-gradient(145deg, #fff9f5, #f1eaf8) !important;
  box-shadow: 0 4px 12px rgba(46, 41, 64, 0.055) !important;
}

#home .row + .timeline {
  position: relative;
}
#home .row + .timeline:after {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 42px;
  height: 3px;
  border-radius: 3px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #e96f78, #7557c8, #f3c96b);
}

@media (prefers-contrast: more) {
  #home .usPhotoSetting,
  #home .card.hero,
  #home .row .tile,
  #home .timeline {
    border-color: #51475a !important;
  }
}

#playHome {
  background:
    radial-gradient(
      circle at 93% 4%,
      rgba(243, 201, 107, 0.24),
      transparent 22%
    ),
    radial-gradient(
      circle at 6% 17%,
      rgba(233, 111, 120, 0.16),
      transparent 24%
    ),
    radial-gradient(
      circle at 84% 72%,
      rgba(117, 87, 200, 0.1),
      transparent 25%
    ),
    #fff9f5 !important;
}
#playHome .screenHead {
  margin-bottom: 14px !important;
}
#playHome .screenHead h1 {
  font-size: 28px !important;
}
#playHome .screenHead:after {
  content: "Pick whatever sounds good right now. No scorekeeping, no pressure.";
  display: block;
  margin-top: 8px;
  font-size: 8px;
  line-height: 1.45;
  color: #756783;
}

#playHome .playTabs {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 7px !important;
  padding: 7px !important;
  border-radius: 19px !important;
  background: linear-gradient(135deg, #f8d9d8, #e8dffc) !important;
  border: 1.5px solid #a98ab0 !important;
}
#playHome .playTabs .stageBtn {
  min-height: 48px !important;
  padding: 8px !important;
  border-radius: 13px !important;
  font-size: 8px !important;
  line-height: 1.25 !important;
  background: #fff9f5 !important;
  border: 1px solid #b6a2b9 !important;
  color: #4b4051 !important;
}
#playHome .playTabs .stageBtn.on {
  background: #7557c8 !important;
  color: #fff !important;
  border: 2px solid #4e398e !important;
  box-shadow: 0 4px 10px rgba(78, 57, 142, 0.18) !important;
}

#playHome .playCategory > .card {
  margin-top: 12px !important;
  padding: 13px !important;
  border-radius: 21px !important;
  background: linear-gradient(145deg, #fff9f5, #faedbf) !important;
  border: 1.5px solid #c7a45b !important;
  box-shadow: 0 8px 22px rgba(46, 41, 64, 0.08) !important;
}
#playHome .playCategory > .card > .eyebrow {
  color: #8a682b !important;
  margin-bottom: 4px !important;
}
#playHome .playCategory > .card > h2,
#playHome .playCategory > .card > h3 {
  font-size: 17px !important;
  margin-bottom: 5px !important;
}

#playHome .memorySource {
  min-height: 78px !important;
  padding: 11px 12px !important;
  border-radius: 17px !important;
  box-shadow: 0 5px 13px rgba(46, 41, 64, 0.075) !important;
  transition:
    transform 0.14s ease,
    box-shadow 0.14s ease !important;
}
#playHome .memorySource:nth-of-type(5n + 1) {
  background: linear-gradient(135deg, #f8d9d8, #fce9e3) !important;
  border-color: #d08389 !important;
}
#playHome .memorySource:nth-of-type(5n + 2) {
  background: linear-gradient(135deg, #e8dffc, #f3edff) !important;
  border-color: #9a84c7 !important;
}
#playHome .memorySource:nth-of-type(5n + 3) {
  background: linear-gradient(135deg, #dcecf4, #edf6fa) !important;
  border-color: #7faac1 !important;
}
#playHome .memorySource:nth-of-type(5n + 4) {
  background: linear-gradient(135deg, #faedbf, #fff5d5) !important;
  border-color: #c2a052 !important;
}
#playHome .memorySource:nth-of-type(5n) {
  background: linear-gradient(135deg, #ddf0e6, #edf8f2) !important;
  border-color: #79a990 !important;
}
#playHome .memorySource .icon {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: 15px !important;
  font-size: 22px !important;
  background: rgba(255, 249, 245, 0.9) !important;
  border: 1.5px solid rgba(78, 57, 142, 0.38) !important;
  box-shadow: 0 4px 10px rgba(46, 41, 64, 0.09) !important;
}
#playHome .memorySource b {
  font-size: 11px !important;
  letter-spacing: -0.01em;
}
#playHome .memorySource .sub {
  font-size: 8px !important;
  line-height: 1.4 !important;
  margin-top: 3px !important;
}
#playHome .memorySource:after {
  content: "›";
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 800;
  color: rgba(46, 41, 64, 0.38);
}
#playHome .memorySource:active {
  transform: scale(0.985) !important;
}

#playHome .playCategory:first-of-type > .card {
  background:
    radial-gradient(
      circle at 94% 8%,
      rgba(233, 111, 120, 0.16),
      transparent 25%
    ),
    linear-gradient(145deg, #fff9f5, #faedbf) !important;
}
#playHome .playCategory:first-of-type > .card:before {
  content: "✦";
  position: absolute;
  right: 17px;
  top: 12px;
  font-size: 23px;
  color: rgba(233, 111, 120, 0.3);
}

#simpleGame > .card,
#whosGame > .card,
#connectionGame > .card,
#knowMeGame > .card,
#dateGame > .card,
#chaosGame > .card,
#wrongGame > .card,
#drawingGame > .card,
#challengeGame > .card,
#storyGame > .card,
#rapidGame > .card {
  border-radius: 22px !important;
  background:
    radial-gradient(
      circle at 94% 3%,
      rgba(243, 201, 107, 0.2),
      transparent 25%
    ),
    radial-gradient(
      circle at 5% 90%,
      rgba(232, 223, 252, 0.45),
      transparent 28%
    ),
    #fff9f5 !important;
  box-shadow: 0 9px 25px rgba(46, 41, 64, 0.09) !important;
}
#simpleGame h2,
#whosGame h2,
#connectionGame h2,
#knowMeGame h2,
#dateGame h2,
#chaosGame h2,
#wrongGame h2,
#drawingGame h2,
#challengeGame h2,
#storyGame h2,
#rapidGame h2 {
  font-size: 20px !important;
  letter-spacing: -0.035em !important;
}

#playHome .stageBtn.on,
#playHome .pill.on,
#simpleGame .stageBtn.on,
#whosGame .stageBtn.on,
#connectionGame .stageBtn.on,
#knowMeGame .stageBtn.on,
#dateGame .stageBtn.on,
#chaosGame .stageBtn.on,
#wrongGame .stageBtn.on,
#drawingGame .stageBtn.on,
#challengeGame .stageBtn.on,
#storyGame .stageBtn.on,
#rapidGame .stageBtn.on {
  background: #7557c8 !important;
  color: #fff !important;
  border-color: #4e398e !important;
  font-weight: 900 !important;
}

@media (prefers-contrast: more) {
  #playHome .playTabs,
  #playHome .playCategory > .card,
  #playHome .memorySource {
    border-color: #51475a !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  #playHome .memorySource {
    transition: none !important;
    transform: none !important;
  }
}

:root {
  --edu-space-1: 6px;
  --edu-space-2: 10px;
  --edu-space-3: 14px;
  --edu-space-4: 18px;
  --edu-space-5: 24px;
}

body {
  line-height: 1.45 !important;
}
h1,
h2,
h3,
p,
.sub,
.eyebrow,
b,
strong,
label,
button {
  word-spacing: normal;
}
h1,
h2,
h3 {
  line-height: 1.14 !important;
}
.sub {
  line-height: 1.48 !important;
}
.eyebrow {
  line-height: 1.35 !important;
  letter-spacing: 0.16em !important;
}

.row,
.actions,
.choiceRow,
.buttonRow,
.stageGrid,
.moodGrid,
.needGrid,
.reactionRow,
.roleRow,
.answerRow,
.quickTools,
.gameChoices,
.contextChoices,
.ackRow {
  gap: var(--edu-space-2) !important;
}
.stack > * + * {
  margin-top: var(--edu-space-2);
}

.tile b + .sub,
.card b + .sub,
.memorySource b + .sub,
.choice b + .sub,
.stageBtn b + span,
.stageBtn strong + span,
button b + span,
button strong + span,
label b + span,
label strong + span {
  display: block !important;
  margin-top: var(--edu-space-1) !important;
}

.inlineLabel b + span,
.inlineLabel strong + span,
.roleLine b + span,
.roleLine strong + span {
  margin-left: 8px !important;
}

#knowMeGame .roleCard,
#knowMeGame .role,
#knowMeGame .playerRole,
#knowMeGame .stageBtn,
#knowMeGame .choice {
  padding: 16px 18px !important;
  line-height: 1.4 !important;
}
#knowMeGame .roleCard b,
#knowMeGame .role b,
#knowMeGame .playerRole b {
  display: block !important;
  margin: 0 0 7px !important;
  line-height: 1.2 !important;
}
#knowMeGame .roleCard .sub,
#knowMeGame .role .sub,
#knowMeGame .playerRole .sub {
  display: block !important;
  margin: 0 !important;
}

#knowMeGame button {
  text-align: left;
  line-height: 1.45 !important;
}
#knowMeGame button b,
#knowMeGame button strong {
  display: inline-block !important;
  margin-right: 8px !important;
}

.card > .eyebrow + h1,
.card > .eyebrow + h2,
.card > .eyebrow + h3,
.card > .eyebrow + p,
.card > .eyebrow + .sub {
  margin-top: 8px !important;
}
.card > h1 + .sub,
.card > h2 + .sub,
.card > h3 + .sub {
  margin-top: 9px !important;
}
.card > .sub + button,
.card > .sub + .actions,
.card > .sub + .row,
.card > .sub + .choiceRow,
.card > p + button,
.card > p + .actions,
.card > p + .row,
.card > p + .choiceRow {
  margin-top: 14px !important;
}

label {
  line-height: 1.4 !important;
}
label + input,
label + textarea,
label + select,
.eyebrow + input,
.eyebrow + textarea,
.eyebrow + select {
  margin-top: 7px !important;
}
input + label,
textarea + label,
select + label {
  margin-top: 13px !important;
}

.bottomNav button,
.bottomNav .navItem,
nav button {
  line-height: 1.25 !important;
}
.bottomNav button svg + span,
.bottomNav button .icon + span,
nav button svg + span,
nav button .icon + span {
  margin-top: 4px !important;
}

.dialog h2 + .sub,
.modal h2 + .sub,
.sheet h2 + .sub {
  margin-top: 8px !important;
}
.dialog .sub + .actions,
.modal .sub + .actions,
.sheet .sub + .actions {
  margin-top: 15px !important;
}

button,
.stageBtn,
.pill,
.tile {
  white-space: normal !important;
}
@media (max-width: 390px) {
  .card {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  #knowMeGame .roleCard,
  #knowMeGame .role,
  #knowMeGame .playerRole,
  #knowMeGame .stageBtn,
  #knowMeGame .choice {
    padding: 15px 16px !important;
  }
}

#knowMeGame .roleHelper {
  display: inline-block !important;
  margin-left: 8px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}
@media (max-width: 360px) {
  #knowMeGame .roleHelper {
    display: block !important;
    margin-left: 0 !important;
    margin-top: 6px !important;
  }
}

#translationHome {
  background:
    radial-gradient(
      circle at 92% 4%,
      rgba(111, 168, 201, 0.2),
      transparent 24%
    ),
    radial-gradient(
      circle at 7% 20%,
      rgba(117, 87, 200, 0.11),
      transparent 27%
    ),
    #fbf9fc !important;
}
#translationHome .screenHead {
  margin-bottom: 16px !important;
}
#translationHome .screenHead h1 {
  font-size: 28px !important;
}
#translationHome .screenHead:after {
  content: "Less guessing. More understanding.";
  display: block;
  margin-top: 8px;
  font-size: 9px;
  font-weight: 700;
  color: #665d73;
}

#translationHome .card:first-of-type {
  padding: 18px !important;
  border-radius: 23px !important;
  background:
    radial-gradient(
      circle at 94% 12%,
      rgba(255, 255, 255, 0.65),
      transparent 26%
    ),
    linear-gradient(135deg, #dcecf4, #e8dffc) !important;
  border: 1.5px solid #8298b0 !important;
  box-shadow: 0 9px 24px rgba(46, 41, 64, 0.09) !important;
}
#translationHome .card:first-of-type h2 {
  font-size: 21px !important;
  line-height: 1.16 !important;
  margin-bottom: 8px !important;
}
#translationHome .card:first-of-type:after {
  content: "same team ♡";
  display: block;
  margin-top: 13px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #6a568d;
}

#translationHome .quickTools {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  margin-top: 13px !important;
}
#translationHome .quickTools .tile,
#translationHome .memorySource {
  position: relative !important;
  padding: 14px 42px 14px 14px !important;
  min-height: 78px !important;
  border-radius: 18px !important;
  box-shadow: 0 5px 14px rgba(46, 41, 64, 0.065) !important;
}
#translationHome .quickTools .tile:nth-child(1),
#translationHome .memorySource:nth-child(1) {
  background: linear-gradient(135deg, #dcecf4, #edf6fa) !important;
  border-color: #7faac1 !important;
}
#translationHome .quickTools .tile:nth-child(2),
#translationHome .memorySource:nth-child(2) {
  background: linear-gradient(135deg, #e8dffc, #f3edff) !important;
  border-color: #9a84c7 !important;
}
#translationHome .quickTools .tile:nth-child(3),
#translationHome .memorySource:nth-child(3) {
  background: linear-gradient(135deg, #ddf0e6, #edf8f2) !important;
  border-color: #79a990 !important;
}
#translationHome .quickTools .tile:after,
#translationHome .memorySource:after {
  content: "›";
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 800;
  color: #5d6170;
}
#translationHome .quickTools b,
#translationHome .memorySource b {
  font-size: 11px !important;
}
#translationHome .quickTools .sub,
#translationHome .memorySource .sub {
  font-size: 8.5px !important;
  line-height: 1.48 !important;
}

#translationHome .timeline,
#translationHome .historyCard {
  margin-top: 16px !important;
  padding: 15px !important;
  border-radius: 19px !important;
  background: rgba(255, 249, 245, 0.76) !important;
  border-color: #b8aebb !important;
  box-shadow: none !important;
}
#translationHome .timeline:before,
#translationHome .historyCard:before {
  content: "THINGS WE'VE CLARIFIED";
  display: block;
  margin-bottom: 10px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: #756783;
}

#translationCheck,
#definitionTool,
#detailsTool,
#heardTool {
  background:
    radial-gradient(
      circle at 95% 4%,
      rgba(111, 168, 201, 0.17),
      transparent 24%
    ),
    radial-gradient(
      circle at 4% 88%,
      rgba(232, 223, 252, 0.34),
      transparent 28%
    ),
    #fbf9fc !important;
}
#translationCheck .card,
#definitionTool .card,
#detailsTool .card,
#heardTool .card {
  border-radius: 22px !important;
  box-shadow: 0 7px 20px rgba(46, 41, 64, 0.075) !important;
}
#translationCheck .card.hero,
#definitionTool .card.hero,
#detailsTool .card.hero,
#heardTool .card.hero {
  background: linear-gradient(135deg, #dcecf4, #e8dffc) !important;
  border-color: #8298b0 !important;
}

#translationCheck .roleCard,
#translationCheck .role,
#definitionTool .roleCard,
#detailsTool .roleCard,
#heardTool .roleCard {
  padding: 15px 16px !important;
  border-radius: 17px !important;
  background: #f6f1ed !important;
  border: 1.5px solid #879a9c !important;
}
#translationCheck .roleCard b,
#translationCheck .role b,
#definitionTool .roleCard b,
#detailsTool .roleCard b,
#heardTool .roleCard b {
  display: block !important;
  margin-bottom: 6px !important;
}

#translationCheck .reassurance,
#translationCheck .reassuranceCard {
  background: linear-gradient(135deg, #f8d9d8, #fff0ea) !important;
  border: 1.5px solid #cf8d91 !important;
  border-radius: 19px !important;
  padding: 15px !important;
}
#translationCheck .reassurance .pill,
#translationCheck .reassuranceCard .pill {
  background: #fff9f5 !important;
  border-color: #a66d74 !important;
  color: #463c49 !important;
}
#translationCheck .reassurance .pill.on,
#translationCheck .reassuranceCard .pill.on {
  background: #efc5c7 !important;
  border: 2px solid #8b525b !important;
  color: #332c35 !important;
  font-weight: 900 !important;
}

#translationCheck .ackRow .pill,
#translationCheck .reactionRow .pill {
  min-height: 48px !important;
  padding: 10px 12px !important;
  background: #dcecf4 !important;
  border: 1.5px solid #688da2 !important;
}
#translationCheck .ackRow .pill.on,
#translationCheck .reactionRow .pill.on {
  background: #bfdce8 !important;
  border: 2px solid #426f86 !important;
  font-weight: 900 !important;
}

#translationHome input,
#translationHome textarea,
#translationHome select,
#translationCheck input,
#translationCheck textarea,
#translationCheck select,
#definitionTool input,
#definitionTool textarea,
#detailsTool input,
#detailsTool textarea,
#heardTool input,
#heardTool textarea {
  background: #f6f1ed !important;
  color: #2e2940 !important;
  border: 1.5px solid #7c8586 !important;
}

@media (prefers-contrast: more) {
  #translationHome .card,
  #translationHome .tile,
  #translationHome .memorySource,
  #translationCheck .card,
  #definitionTool .card,
  #detailsTool .card,
  #heardTool .card {
    border-color: #51475a !important;
  }
}

#definitionSubmitBtn {
  margin-top: 12px !important;
  width: 100% !important;
}
#definitionSubmitBtn.ready {
  background: #7557c8 !important;
  color: #fff !important;
  border: 2px solid #4e398e !important;
  font-weight: 900 !important;
}
#definitionSubmitHint {
  margin-top: 14px !important;
  padding: 9px 11px !important;
  border-radius: 12px !important;
  background: #f6f1ed !important;
  border: 1px solid #a99fa8 !important;
  color: #5a5060 !important;
}
#definitionSubmitHint.ready {
  background: #ddf0e6 !important;
  border-color: #67957e !important;
  color: #29483a !important;
  font-weight: 750 !important;
}
#definitionSubmitHint.error {
  background: #f8d9d8 !important;
  border-color: #b76770 !important;
  color: #63363c !important;
  font-weight: 800 !important;
}

#understandHome {
  background:
    radial-gradient(
      circle at 93% 4%,
      rgba(233, 111, 120, 0.15),
      transparent 23%
    ),
    radial-gradient(
      circle at 5% 21%,
      rgba(117, 87, 200, 0.13),
      transparent 26%
    ),
    radial-gradient(
      circle at 91% 76%,
      rgba(135, 190, 165, 0.12),
      transparent 24%
    ),
    #fff9f5 !important;
}
#understandHome .screenHead {
  margin-bottom: 15px !important;
}
#understandHome .screenHead h1 {
  font-size: 28px !important;
}
#understandHome .screenHead:after {
  content: "A guide to the person you love, built from what they choose to share.";
  display: block;
  margin-top: 8px;
  font-size: 9px;
  line-height: 1.5;
  color: #6d6172;
}

#understandHome .playTabs,
#understandHome .stageGrid:first-of-type {
  padding: 6px !important;
  gap: 6px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #f8d9d8, #e8dffc) !important;
  border: 1.5px solid #a98ab0 !important;
}
#understandHome .playTabs .stageBtn,
#understandHome .stageGrid:first-of-type .stageBtn {
  min-height: 46px !important;
  border-radius: 12px !important;
  background: #fff9f5 !important;
  border: 1px solid #a99fa8 !important;
  color: #413747 !important;
  font-weight: 800 !important;
}
#understandHome .playTabs .stageBtn.on,
#understandHome .stageGrid:first-of-type .stageBtn.on {
  background: #7557c8 !important;
  color: #fff !important;
  border: 2px solid #4e398e !important;
  font-weight: 900 !important;
}

#understandHome .detailToggle,
#understandHome .profileDetail {
  margin-top: 11px !important;
  padding: 9px !important;
  border-radius: 15px !important;
  background: rgba(255, 249, 245, 0.78) !important;
  border: 1px solid #c2b5be !important;
}
#understandHome .detailToggle .stageBtn,
#understandHome .profileDetail .stageBtn {
  min-height: 42px !important;
}

#understandHome .card.hero,
#understandHome .personHero,
#understandHome .loveWell {
  padding: 18px !important;
  border-radius: 23px !important;
  background:
    radial-gradient(
      circle at 94% 10%,
      rgba(255, 255, 255, 0.6),
      transparent 25%
    ),
    linear-gradient(135deg, #f8d9d8, #f8e1d3 52%, #e8dffc) !important;
  border: 1.5px solid #c38b99 !important;
  box-shadow: 0 9px 24px rgba(46, 41, 64, 0.09) !important;
}
#understandHome .card.hero h2,
#understandHome .personHero h2,
#understandHome .loveWell h2 {
  font-size: 21px !important;
  line-height: 1.17 !important;
}
#understandHome .card.hero:after,
#understandHome .personHero:after,
#understandHome .loveWell:after {
  content: "a guide, not a rulebook ♡";
  display: block;
  margin-top: 13px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #835a6a;
}

#understandHome .understandSection,
#understandHome details {
  margin-top: 10px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  border: 1.5px solid #b7a9b5 !important;
  box-shadow: 0 4px 12px rgba(46, 41, 64, 0.055) !important;
}
#understandHome .understandSection:nth-of-type(5n + 1),
#understandHome details:nth-of-type(5n + 1) {
  background: #f8d9d8 !important;
}
#understandHome .understandSection:nth-of-type(5n + 2),
#understandHome details:nth-of-type(5n + 2) {
  background: #e8dffc !important;
}
#understandHome .understandSection:nth-of-type(5n + 3),
#understandHome details:nth-of-type(5n + 3) {
  background: #dcecf4 !important;
}
#understandHome .understandSection:nth-of-type(5n + 4),
#understandHome details:nth-of-type(5n + 4) {
  background: #ddf0e6 !important;
}
#understandHome .understandSection:nth-of-type(5n),
#understandHome details:nth-of-type(5n) {
  background: #faedbf !important;
}
#understandHome details summary {
  min-height: 52px !important;
  padding: 13px 15px !important;
  line-height: 1.35 !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}
#understandHome details > div {
  padding: 0 15px 15px !important;
  line-height: 1.5 !important;
}

#understandHome .dimension {
  padding: 13px !important;
  margin-top: 9px !important;
  border-radius: 16px !important;
  background: #fff9f5 !important;
  border: 1px solid #b5a9b4 !important;
}
#understandHome .dimension .sub {
  margin-top: 6px !important;
}

#understandHome .assessmentCard,
#understandHome .discoveryCard {
  padding: 17px !important;
  border-radius: 21px !important;
  background:
    radial-gradient(
      circle at 92% 8%,
      rgba(243, 201, 107, 0.24),
      transparent 25%
    ),
    linear-gradient(145deg, #fff9f5, #faedbf) !important;
  border: 1.5px solid #c4a65c !important;
  box-shadow: 0 7px 19px rgba(46, 41, 64, 0.07) !important;
}
#understandHome .assessmentCard h2,
#understandHome .discoveryCard h2 {
  font-size: 18px !important;
  margin-bottom: 7px !important;
}

#understandAssessment,
#understandReview {
  background:
    radial-gradient(
      circle at 93% 4%,
      rgba(117, 87, 200, 0.12),
      transparent 24%
    ),
    radial-gradient(
      circle at 6% 88%,
      rgba(233, 111, 120, 0.12),
      transparent 27%
    ),
    #fff9f5 !important;
}
#understandAssessment .card,
#understandReview .card {
  padding: 18px !important;
  border-radius: 22px !important;
  box-shadow: 0 7px 20px rgba(46, 41, 64, 0.07) !important;
}
#understandAssessment .questionText,
#understandAssessment h2 {
  font-size: 20px !important;
  line-height: 1.22 !important;
  margin-bottom: 15px !important;
}
#understandAssessment .choice,
#understandAssessment .stageBtn,
#understandAssessment .pill {
  min-height: 48px !important;
  padding: 11px 13px !important;
  line-height: 1.4 !important;
  margin-bottom: 7px !important;
}
#understandAssessment .choice.on,
#understandAssessment .stageBtn.on,
#understandAssessment .pill.on {
  background: #b9d5ce !important;
  color: #18332f !important;
  border: 2px solid #365d55 !important;
  font-weight: 900 !important;
}
#understandAssessment .choice.on:after,
#understandAssessment .stageBtn.on:after,
#understandAssessment .pill.on:after {
  content: " ✓";
  font-weight: 900;
}

#understandAssessment .contextBox,
#understandAssessment .optionalContext {
  margin-top: 13px !important;
  padding: 13px !important;
  border-radius: 16px !important;
  background: #f6f1ed !important;
  border: 1px solid #b4a9ae !important;
}
#understandAssessment textarea {
  margin-top: 8px !important;
  min-height: 92px !important;
  background: #f6f1ed !important;
}

#understandReview .reviewCard {
  padding: 15px !important;
  margin-top: 10px !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, #fff9f5, #f3edff) !important;
  border: 1.5px solid #a99ac0 !important;
}
#understandReview .reviewCard .context {
  margin-top: 9px !important;
  padding-top: 9px !important;
  border-top: 1px solid #cfc2d2 !important;
  font-style: italic !important;
}

#understandHome .usComparison,
#understandHome .middleCard {
  padding: 16px !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, #dcecf4, #ddf0e6) !important;
  border: 1.5px solid #779a92 !important;
}
#understandHome .middleCard:before {
  content: "♡";
  display: block;
  font-size: 20px;
  margin-bottom: 6px;
  color: #7557c8;
}

@media (prefers-contrast: more) {
  #understandHome .card,
  #understandHome details,
  #understandHome .understandSection,
  #understandAssessment .card,
  #understandReview .card {
    border-color: #51475a !important;
  }
}

:root {
  --edu-min-copy: 12px;
  --edu-min-meta: 11px;
}
body {
  font-size: 14px !important;
}
.sub,
p,
.prompt,
.helper,
.fact span,
.suggestion p,
.guideLine p,
.trait p,
.usInsight p,
.sectionDetail p,
.reviewAnswer,
.reviewContext,
.ownWords span {
  font-size: max(12px, 1em) !important;
}
.eyebrow,
.fieldLabel,
.sourceTag,
.storyType,
.statusTime,
.needTag,
.quickAction,
.nextMini span,
.assessmentProgressRow,
.assessmentChoice .choiceText small,
.contextPanel label,
.detailPreference small,
.seeMore,
.ownWords b {
  font-size: 11px !important;
  line-height: 1.4 !important;
}
button,
.primary,
.secondary,
.miniBtn,
.pill,
.stageBtn,
.actionRow button,
.profileToggle button,
.detailButtons button {
  font-size: 12px !important;
  line-height: 1.35 !important;
}
.nav div {
  font-size: 11px !important;
  line-height: 1.25 !important;
}
.tile span,
.moment span,
.memorySource span,
.photoBox span {
  font-size: 11px !important;
  line-height: 1.45 !important;
}
.tile b,
.moment b,
.memorySource b,
.saved b,
.nextMini b,
.fact b,
.suggestion b,
.profileSection b,
.traitHead b {
  font-size: 12px !important;
}
input,
textarea,
select,
.textInput,
.dateInput {
  font-size: 16px !important;
  line-height: 1.45 !important;
}
button,
.tile,
.stageBtn,
.pill,
.add,
.miniBtn,
.primary,
.secondary {
  min-height: 44px;
}
.actionRow {
  flex-wrap: wrap !important;
}
.actionRow button {
  min-width: 96px;
}
.scrapbookActions {
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.scrapbookActions button {
  min-height: 44px !important;
  padding: 10px 12px !important;
}
@media (max-width: 360px) {
  .stageGrid,
  .quickActions {
    grid-template-columns: 1fr !important;
  }
  .actionRow {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}

.auditToast {
  position: fixed;
  left: 50%;
  bottom: 82px;
  transform: translateX(-50%);
  width: min(360px, calc(100% - 32px));
  z-index: 9999;
  padding: 12px 14px;
  border-radius: 14px;
  background: #2e2940;
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 8px 24px rgba(46, 41, 64, 0.22);
}

.journeyNudge {
  margin-top: 14px;
  padding: 14px 15px;
  border-radius: 17px;
  background: linear-gradient(135deg, #fff9f5, #e8dffc);
  border: 1.5px solid #a99ac0;
  box-shadow: 0 4px 12px rgba(46, 41, 64, 0.06);
}
.journeyNudge b {
  display: block;
  font-size: 12px;
  margin-bottom: 5px;
}
.journeyNudge .sub {
  margin-bottom: 10px;
}
.journeyNudge button {
  width: 100%;
  min-height: 44px;
}
.journeyToast {
  position: fixed;
  left: 50%;
  bottom: 82px;
  transform: translateX(-50%);
  width: min(360px, calc(100% - 32px));
  z-index: 10000;
  padding: 12px 14px;
  border-radius: 14px;
  background: #2e2940;
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 8px 24px rgba(46, 41, 64, 0.22);
}
body.simPartner .homeGreeting h1:after {
  content: " · Partner view";
  font-size: 11px;
  color: #7557c8;
  font-weight: 800;
}
.privateState {
  margin-top: 10px;
  padding: 11px 12px;
  border-radius: 14px;
  background: #f6f1ed;
  border: 1px solid #b7a9b5;
  font-size: 12px;
  line-height: 1.45;
}
.privateState.waiting {
  background: #dcecf4;
  border-color: #7faac1;
}
.privateState.ready {
  background: #ddf0e6;
  border-color: #79a990;
}
@media (max-width: 360px) {
}
.simPerspectiveCard {
  margin: 10px 0 14px;
  padding: 12px 13px;
  border-radius: 15px;
  background: #fff9f5;
  border: 1.5px solid #a99ac0;
  font-size: 11px;
  line-height: 1.45;
}
.simPerspectiveCard b {
  display: block;
  font-size: 12px;
  margin-bottom: 4px;
}
body.simPartner .simPerspectiveCard {
  border-color: #6e9aad;
  background: #edf6fa;
}

.simCheckinStatus {
  margin: 12px 0 14px;
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, #dcecf4, #e8dffc);
  border: 1.5px solid #7f91ae;
  box-shadow: 0 5px 14px rgba(46, 41, 64, 0.07);
}
.simCheckinStatus.mine {
  background: linear-gradient(135deg, #f8d9d8, #f8e1d3);
  border-color: #c47e86;
}
.simCheckinStatus .who {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #675a6d;
}
.simCheckinStatus .mood {
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
  margin: 6px 0;
}
.simCheckinStatus .need {
  font-size: 12px;
  line-height: 1.45;
  margin-top: 5px;
}
.simCheckinStatus .time {
  font-size: 10px;
  margin-top: 8px;
  color: #6b6270;
}
.simCheckinStatus .simAckRow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 11px;
}
.simCheckinStatus .simAckRow button {
  flex: 1;
  min-width: 120px;
}
.simCheckinForm {
  margin: 12px 0 14px;
  padding: 14px;
  border-radius: 18px;
  background: #fff9f5;
  border: 1.5px solid #b9a9b6;
}
.simCheckinForm .simChoices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
.simCheckinForm .simChoices button {
  min-height: 48px;
}
.simCheckinForm .simChoices button.on {
  background: #b9d5ce !important;
  border: 2px solid #365d55 !important;
  color: #18332f !important;
  font-weight: 900 !important;
}
.simCheckinForm .simNeeds {
  margin-top: 13px;
}
.simCheckinForm select {
  width: 100%;
  margin-top: 6px;
}
.simCheckinEmpty {
  margin: 12px 0 14px;
  padding: 14px;
  border-radius: 18px;
  background: #f6f1ed;
  border: 1px solid #b7a9b5;
  font-size: 12px;
  line-height: 1.45;
}
.simRevealPair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  margin-top: 10px;
}
.simRevealAnswer {
  padding: 12px;
  border-radius: 14px;
  background: #fff9f5;
  border: 1px solid #a99fa8;
}
.simRevealAnswer b {
  display: block;
  margin-bottom: 5px;
}
#todayHome .homeGreeting {
  display: block !important;
  order: -19 !important;
  margin-top: 4px !important;
  margin-bottom: 14px !important;
}
#todayHome .homeGreeting h1 {
  font-size: 28px !important;
  margin-bottom: 5px !important;
}
#todayHome .homeGreeting .sub {
  font-size: 12px !important;
}

#todayHome .simPerspectiveCard {
  display: none !important;
}

#simLiveCheckinHost {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin: 0 0 14px !important;
}
#simLiveCheckinHost .simCheckinStatus,
#simLiveCheckinHost .simCheckinEmpty,
#simLiveCheckinHost .simCheckinForm {
  margin: 0 !important;
  padding: 11px !important;
  border-radius: 16px !important;
  min-width: 0 !important;
}
#simLiveCheckinHost .simCheckinStatus .who {
  font-size: 9px !important;
}
#simLiveCheckinHost .simCheckinStatus .mood {
  font-size: 15px !important;
  margin: 4px 0 !important;
}
#simLiveCheckinHost .simCheckinStatus .need {
  font-size: 11px !important;
  line-height: 1.35 !important;
}
#simLiveCheckinHost .simCheckinStatus .time {
  font-size: 9px !important;
  margin-top: 5px !important;
}
#simLiveCheckinHost .simAckRow {
  gap: 5px !important;
  margin-top: 7px !important;
}
#simLiveCheckinHost .simAckRow button {
  min-width: 0 !important;
  min-height: 40px !important;
  padding: 7px !important;
  font-size: 10px !important;
}
#simLiveCheckinHost .simCheckinEmpty {
  font-size: 11px !important;
  line-height: 1.4 !important;
}
#simLiveCheckinHost .simCheckinForm {
  grid-column: 1/-1 !important;
}
#simLiveCheckinHost .simCheckinForm .simChoices {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 6px !important;
}
#simLiveCheckinHost .simCheckinForm .simChoices button {
  min-height: 42px !important;
  padding: 7px 5px !important;
  font-size: 10px !important;
}

#simTodayUsPrivate {
  margin-top: 0 !important;
}

#todayHome {
  display: none;
}
#todayHome.active {
  display: flex !important;
  flex-direction: column !important;
}
#todayHome > .homeGreeting {
  order: -29 !important;
}
#todayHome > #simLiveCheckinHost {
  order: -28 !important;
}
#todayHome > #simTodayUsPrivate {
  order: -27 !important;
}

@media (max-width: 360px) {
  #simLiveCheckinHost {
    grid-template-columns: 1fr !important;
  }
  #simLiveCheckinHost .simCheckinForm {
    grid-column: auto !important;
  }
}

#simTodayUsPrivate {
  display: none !important;
}
.realTodaysUs {
  margin: 0 0 16px;
  padding: 16px;
  border-radius: 22px;
  background: linear-gradient(145deg, #fff7f2, #f7e9f2 58%, #eee8fb);
  border: 1.5px solid #d3a7b1;
  box-shadow: 0 7px 18px rgba(70, 45, 70, 0.08);
}
.realTodaysUs .tuTop {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}
.realTodaysUs .tuLabel {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: #765d75;
}
.realTodaysUs .tuPrivacy {
  font-size: 10px;
  font-weight: 750;
  color: #6a6170;
  background: #fff9f5;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid #d7c9d0;
}
.realTodaysUs .tuQuestion {
  font-size: 18px;
  font-weight: 900;
  line-height: 1.3;
  margin: 10px 0 12px;
  color: #2e2940;
}
.realTodaysUs textarea {
  width: 100%;
  min-height: 88px;
}
.realTodaysUs .tuState {
  padding: 12px;
  border-radius: 15px;
  font-size: 12px;
  line-height: 1.45;
  margin-top: 10px;
}
.realTodaysUs .tuWaiting {
  background: #dcecf4;
  border: 1px solid #7da7bc;
}
.realTodaysUs .tuPartnerAnswered {
  background: #faedbf;
  border: 1px solid #c3a452;
}
.realTodaysUs .tuReady {
  background: #ddf0e6;
  border: 1.5px solid #6e9b82;
}
.realTodaysUs .tuRevealAnswers {
  display: grid;
  gap: 9px;
  margin-top: 11px;
}
.realTodaysUs .tuAnswer {
  padding: 12px;
  border-radius: 15px;
  background: #fff9f5;
  border: 1px solid #cbbcc4;
  line-height: 1.45;
  font-size: 12px;
}
.realTodaysUs .tuAnswer b {
  display: block;
  margin-bottom: 5px;
}
.realTodaysUs .tuReactionRow {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 11px;
}
.realTodaysUs .tuReactionRow button {
  flex: 1;
  min-width: 82px;
}
.realTodaysUs .tuReactionSeen {
  font-size: 11px;
  margin-top: 9px;
  color: #665b69;
}
.realTodaysUs .tuDone {
  margin-top: 10px;
  font-size: 11px;
  color: #665b69;
  text-align: center;
}
.realTodaysUs .tuPrimary {
  width: 100%;
  margin-top: 10px;
}
.realTodaysUs .tuPulse {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid #ddcbd3;
}
.realTodaysUs .tuPulseCopy {
  font-size: 11px;
  line-height: 1.35;
  color: #675b68;
}
.realTodaysUs .tuPulse button {
  min-width: 48px;
}

.realPlayFlow {
  margin: 12px 0 16px;
  padding: 16px;
  border-radius: 22px;
  border: 1.5px solid #c9b5c9;
  box-shadow: 0 7px 18px rgba(70, 45, 70, 0.07);
}
.realPlayFlow.tot {
  background: linear-gradient(145deg, #fff5d9, #f8e1d3);
}
.realPlayFlow.wml {
  background: linear-gradient(145deg, #e8dffc, #dcecf4);
}
.realPlayFlow .rpLabel {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.09em;
  color: #66556c;
}
.realPlayFlow h3 {
  font-size: 19px;
  line-height: 1.25;
  margin: 7px 0 12px;
}
.realPlayFlow .rpChoices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.realPlayFlow .rpChoices.four {
  grid-template-columns: 1fr 1fr;
}
.realPlayFlow .rpChoices button {
  min-height: 50px;
}
.realPlayFlow .rpState {
  margin-top: 10px;
  padding: 11px;
  border-radius: 14px;
  font-size: 12px;
  line-height: 1.45;
}
.realPlayFlow .waiting {
  background: #fff9f5;
  border: 1px solid #cbbbc3;
}
.realPlayFlow .ready {
  background: #ddf0e6;
  border: 1.5px solid #6d9b81;
}
.realPlayFlow .rpReveal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
.realPlayFlow .rpAnswer {
  padding: 11px;
  border-radius: 14px;
  background: #fff9f5;
  border: 1px solid #c7bac2;
  text-align: center;
  font-size: 12px;
}
.realPlayFlow .rpAnswer b {
  display: block;
  margin-bottom: 4px;
}
.realPlayFlow .rpInsight {
  margin-top: 9px;
  font-size: 11px;
  line-height: 1.4;
  color: #655b68;
}
.realPlayFlow .rpNext {
  width: 100%;
  margin-top: 10px;
}

.realKnowMe {
  margin: 12px 0 16px;
  padding: 16px;
  border-radius: 22px;
  background: linear-gradient(145deg, #ddf0e6, #fff5d9);
  border: 1.5px solid #86a895;
  box-shadow: 0 7px 18px rgba(70, 45, 70, 0.07);
}
.realKnowMe .kmLabel {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.09em;
  color: #53695c;
}
.realKnowMe h3 {
  font-size: 19px;
  line-height: 1.28;
  margin: 7px 0 10px;
}
.realKnowMe .kmRole {
  padding: 11px 12px;
  border-radius: 15px;
  background: #fff9f5;
  border: 1px solid #b9aeb4;
  font-size: 12px;
  line-height: 1.45;
  margin-bottom: 10px;
}
.realKnowMe .kmRole b {
  display: block;
  font-size: 13px;
  margin-bottom: 3px;
}
.realKnowMe .kmChoices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.realKnowMe .kmChoices button {
  min-height: 50px;
}
.realKnowMe .kmState {
  padding: 11px;
  border-radius: 14px;
  background: #dcecf4;
  border: 1px solid #7ea7bb;
  font-size: 12px;
  line-height: 1.45;
}
.realKnowMe .kmReveal {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.realKnowMe .kmAnswer {
  padding: 11px;
  border-radius: 14px;
  background: #fff9f5;
  border: 1px solid #b9aeb4;
  font-size: 12px;
  line-height: 1.4;
}
.realKnowMe .kmAnswer b {
  display: block;
  margin-bottom: 4px;
}
.realKnowMe .kmResult {
  margin-top: 10px;
  padding: 11px;
  border-radius: 14px;
  background: #f8e1d3;
  border: 1px solid #d29a7b;
  font-size: 12px;
  line-height: 1.45;
}

.realTranslateFlow {
  margin: 12px 0 16px;
  padding: 16px;
  border-radius: 22px;
  background: linear-gradient(145deg, #e7f1f7, #eee8fb);
  border: 1.5px solid #879db7;
  box-shadow: 0 7px 18px rgba(46, 41, 64, 0.07);
}
.realTranslateFlow .rtLabel {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.09em;
  color: #53687b;
}
.realTranslateFlow h3 {
  font-size: 19px;
  line-height: 1.25;
  margin: 7px 0 8px;
}
.realTranslateFlow .rtRole {
  padding: 11px 12px;
  border-radius: 15px;
  background: #fff9f5;
  border: 1px solid #b8b1c4;
  font-size: 12px;
  line-height: 1.45;
  margin: 10px 0;
}
.realTranslateFlow .rtRole b {
  display: block;
  font-size: 13px;
  margin-bottom: 3px;
}
.realTranslateFlow textarea {
  width: 100%;
  min-height: 78px;
  margin-top: 7px;
}
.realTranslateFlow .rtState {
  padding: 11px;
  border-radius: 14px;
  background: #dcecf4;
  border: 1px solid #7ea7bb;
  font-size: 12px;
  line-height: 1.45;
  margin-top: 9px;
}
.realTranslateFlow .rtCompare {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.realTranslateFlow .rtPiece {
  padding: 11px;
  border-radius: 14px;
  background: #fff9f5;
  border: 1px solid #b8b1c4;
  font-size: 12px;
  line-height: 1.45;
}
.realTranslateFlow .rtPiece b {
  display: block;
  margin-bottom: 4px;
}
.realTranslateFlow .rtReassure {
  margin-top: 10px;
  padding: 12px;
  border-radius: 15px;
  background: #f8e1d3;
  border: 1px solid #d49b7c;
}
.realTranslateFlow .rtChoices {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.realTranslateFlow .rtChoices button {
  flex: 1;
  min-width: 120px;
}
.realTranslateFlow .rtAck {
  margin-top: 10px;
  padding: 11px;
  border-radius: 14px;
  background: #ddf0e6;
  border: 1px solid #78a18a;
  font-size: 12px;
  line-height: 1.45;
}

.realPulseInbox {
  margin: 0 0 14px;
  padding: 13px 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, #f8d9d8, #e8dffc);
  border: 1.5px solid #c18eaa;
  box-shadow: 0 5px 14px rgba(70, 45, 70, 0.07);
}
.realPulseInbox .pulseFrom {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #71576d;
}
.realPulseInbox .pulseMessage {
  font-size: 16px;
  font-weight: 900;
  margin: 5px 0 3px;
}
.realPulseInbox .pulseTime {
  font-size: 10px;
  color: #6b606c;
}
.realPulseInbox .pulseActions {
  display: flex;
  gap: 7px;
  margin-top: 9px;
}
.realPulseInbox .pulseActions button {
  flex: 1;
}
.realPulseReceived {
  margin-top: 7px;
  font-size: 10px;
  color: #675d68;
}

.sharedLifeFlow {
  margin: 12px 0 16px;
  padding: 16px;
  border-radius: 22px;
  border: 1.5px solid #c5aeb4;
  box-shadow: 0 7px 18px rgba(70, 45, 70, 0.07);
}
.sharedLifeFlow.plan {
  background: linear-gradient(145deg, #faedbf, #f8e1d3);
}
.sharedLifeFlow.memory {
  background: linear-gradient(145deg, #f8d9d8, #fff7f2);
}
.sharedLifeFlow.story {
  background: linear-gradient(145deg, #e8dffc, #f8d9d8);
}
.sharedLifeFlow .slLabel {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.09em;
  color: #6b5867;
}
.sharedLifeFlow h3 {
  font-size: 19px;
  line-height: 1.25;
  margin: 7px 0 10px;
}
.sharedLifeFlow .slCard {
  padding: 12px;
  border-radius: 15px;
  background: #fff9f5;
  border: 1px solid #c8b9c0;
  font-size: 12px;
  line-height: 1.45;
  margin-top: 9px;
}
.sharedLifeFlow .slCard b {
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
}
.sharedLifeFlow .slMeta {
  font-size: 10px;
  color: #6c616a;
  margin-top: 5px;
}
.sharedLifeFlow input,
.sharedLifeFlow textarea,
.sharedLifeFlow select {
  width: 100%;
  margin-top: 6px;
}
.sharedLifeFlow label {
  display: block;
  margin-top: 9px;
  font-size: 11px;
  font-weight: 800;
}
.sharedLifeFlow .slActions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 9px;
}
.sharedLifeFlow .slActions button {
  flex: 1;
  min-width: 115px;
}
.sharedLifeFlow .slShared {
  font-size: 10px;
  margin-top: 7px;
  color: #665d66;
}
.sharedLifeFlow .slNote {
  padding: 9px 10px;
  border-radius: 13px;
  background: #f6f1ed;
  border: 1px solid #d0c4c8;
  margin-top: 7px;
}
.prototypeOnlyBadge {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  background: #f6f1ed;
  border: 1px solid #afa3aa;
  border-radius: 999px;
  padding: 4px 7px;
  color: #655c64;
}

#eduCompactBrand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: min(100%, 760px);
  margin: 0 auto 18px;
  padding: 8px 14px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
#eduCompactBrand .eduMark {
  width: 78px;
  height: 78px;
  object-fit: contain;
  flex: 0 0 78px;
}
#eduCompactBrand .eduBrandCopy {
  text-align: left;
  min-width: 0;
}
#eduCompactBrand .eduBrandName {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 34px;
  line-height: 1;
  font-weight: 700;
  color: #2e2940;
  white-space: nowrap;
}
#eduCompactBrand .eduBrandName .us {
  color: #078c92;
  background: none;
  padding: 0;
  margin: 0;
}
#eduCompactBrand .eduBrandTag {
  margin-top: 7px;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: 0.18em;
  color: #607887;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 520px) {
  #eduCompactBrand {
    gap: 9px;
    padding: 7px 6px;
  }
  #eduCompactBrand .eduMark {
    width: 58px;
    height: 58px;
    flex-basis: 58px;
  }
  #eduCompactBrand .eduBrandName {
    font-size: 27px;
  }
  #eduCompactBrand .eduBrandTag {
    font-size: 8px;
    letter-spacing: 0.11em;
  }
}
@media (max-width: 360px) {
  #eduCompactBrand .eduMark {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
  }
  #eduCompactBrand .eduBrandName {
    font-size: 23px;
  }
  #eduCompactBrand .eduBrandTag {
    font-size: 7px;
    letter-spacing: 0.08em;
  }
}

[hidden] {
  display: none !important;
}
body.edu-locked main.app,
body.edu-locked nav.nav {
  display: none !important;
}
.edu-auth-shell {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 34px 18px 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.edu-auth-card {
  width: 100%;
  background: #fff;
  border: 1px solid #eadfd9;
  border-radius: 24px;
  padding: 22px;
  box-shadow: 0 18px 55px rgba(65, 44, 54, 0.08);
}
.edu-auth-brand {
  text-align: center;
  margin-bottom: 20px;
}
.edu-auth-brand h1 {
  font:
    500 30px Georgia,
    serif;
  margin: 8px 0 3px;
}
.edu-auth-brand h1 span {
  color: #5b9b8b;
}
.edu-auth-brand p {
  margin: 0;
  color: #7d746e;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-weight: 800;
}
.edu-auth-mark {
  font-size: 38px;
  line-height: 1;
}
.edu-auth-card label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  margin: 12px 0 6px;
}
.edu-auth-card input {
  width: 100%;
  min-height: 46px;
  border: 1px solid #dfd4ce;
  border-radius: 14px;
  background: #fbf8f5;
  padding: 11px 12px;
  font: inherit;
  font-size: 16px;
  color: #292522;
}
.edu-auth-actions {
  display: grid;
  gap: 9px;
  margin-top: 16px;
}
.edu-auth-card button {
  min-height: 44px;
  border-radius: 14px;
  border: 1px solid #dfd4ce;
  padding: 10px 14px;
  font:
    700 13px Inter,
    system-ui,
    sans-serif;
  cursor: pointer;
}
.edu-auth-primary {
  background: #7557c8 !important;
  color: #fff;
  border-color: #7557c8 !important;
}
.edu-auth-secondary {
  background: #fff;
  color: #493f49;
}
.edu-auth-link {
  background: transparent !important;
  border: 0 !important;
  color: #7557c8;
  min-height: 34px !important;
}
.edu-auth-error {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff0f0;
  color: #8c3f46;
  font-size: 12px;
  line-height: 1.45;
}
.edu-auth-note {
  color: #7d746e;
  font-size: 12px;
  line-height: 1.5;
  margin-top: 10px;
}
.edu-pair-code {
  font:
    800 25px ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  letter-spacing: 0.12em;
  text-align: center;
  padding: 15px;
  border-radius: 15px;
  background: #f5f0ff;
  margin: 14px 0;
}
.edu-account {
  position: fixed;
  z-index: 90;
  top: 12px;
  right: max(12px, calc((100vw - 430px) / 2 + 12px));
  display: flex;
  gap: 6px;
  align-items: center;
}
.edu-account button {
  min-height: 36px;
  border: 1px solid #eadfd9;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  padding: 7px 11px;
  font:
    700 11px Inter,
    system-ui,
    sans-serif;
  color: #5d5258;
  box-shadow: 0 4px 18px rgba(65, 44, 54, 0.07);
}
@media (max-width: 520px) {
  .edu-account {
    right: 10px;
    top: 8px;
  }
  .edu-account .edu-user-name {
    display: none;
  }
}

.edu-account {
  display: none !important;
}
#todayHome > .statusCard {
  display: none !important;
}
#eduLiveCheckins {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 12px !important;
  order: -28 !important;
}
.edu-compact-checkin {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid #d9cbc7;
  border-radius: 16px;
  padding: 11px 12px;
  min-width: 0;
  box-shadow: 0 5px 16px rgba(65, 44, 54, 0.035);
}
.edu-compact-checkin.mine {
  background: linear-gradient(145deg, #fff8f5, #f7f1ff);
}
.edu-checkin-who {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #675a6d;
  margin-bottom: 5px;
}
.edu-checkin-line {
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
  color: #2e2940;
}
.edu-checkin-time {
  font-size: 9px;
  color: #746a72;
  margin-top: 5px;
}
.edu-checkin-action {
  margin-top: 8px;
  min-height: 36px !important;
  padding: 7px 10px !important;
  font-size: 10px !important;
  width: 100%;
}
.edu-checkin-ack {
  font-size: 10px;
  line-height: 1.35;
  color: #5d5258;
  margin-top: 6px;
}
#eduCheckinEditor {
  grid-column: 1/-1;
  background: #fff;
  border: 1px solid #d9cbc7;
  border-radius: 16px;
  padding: 12px;
}
#eduCheckinEditor .edu-mood-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin: 8px 0 11px;
}
#eduCheckinEditor .edu-mood-grid button,
#eduCheckinEditor .edu-support-grid button {
  min-height: 44px;
  font-size: 10px;
  padding: 7px;
}
#eduCheckinEditor .edu-mood-grid button.on,
#eduCheckinEditor .edu-support-grid button.on {
  border: 2px solid #7557c8;
  background: #eee8ff;
  font-weight: 900;
}
#eduCheckinEditor .edu-support-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin: 8px 0 11px;
}
#eduCheckinEditor textarea {
  width: 100%;
  min-height: 70px;
  border: 1px solid #d9cbc7;
  border-radius: 12px;
  background: #fbf8f5;
  padding: 10px;
  font: inherit;
  font-size: 16px;
  color: #2e2940;
}
.edu-editor-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 9px;
}
#eduAccountPanel {
  margin-top: 12px;
}
#eduAccountPanel .edu-account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#eduAccountPanel button {
  min-height: 44px;
}
@media (max-width: 390px) {
  #eduLiveCheckins {
    grid-template-columns: 1fr;
  }
  #eduCheckinEditor {
    grid-column: auto;
  }
  #eduCheckinEditor .edu-mood-grid {
    grid-template-columns: 1fr 1fr;
  }
}