.room-body {
  min-width: 320px;
  background: #17100c;
}

.family-room-app {
  position: relative;
  display: grid;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  color: var(--cjb-ink);
  background: #17100c;
}

.room-stage {
  position: relative;
  width: min(100vw, calc(100svh * .5625), 720px);
  height: min(100svh, calc(100vw * 1.7778), 1280px);
  overflow: hidden;
  isolation: isolate;
  background: #2d2017;
  box-shadow: 0 0 70px rgba(4, 2, 1, .72);
}

.room-art,
.room-vignette,
.room-dimmer {
  position: absolute;
  inset: 0;
}

.room-art {
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  opacity: 0;
  transform: scale(1.002);
  transition: opacity 520ms ease, filter 420ms ease, transform 620ms ease;
}

.tone-day .room-art-day,
.tone-night .room-art-night {
  opacity: 1;
}

.room-vignette {
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(35, 19, 8, .08), transparent 22%, transparent 74%, rgba(23, 12, 6, .22)),
    radial-gradient(circle at 50% 42%, transparent 58%, rgba(24, 12, 5, .14));
}

.tone-night .room-vignette {
  background:
    linear-gradient(180deg, rgba(4, 8, 16, .18), transparent 20%, transparent 70%, rgba(6, 5, 12, .35)),
    radial-gradient(circle at 50% 42%, transparent 50%, rgba(5, 6, 13, .28));
}

.room-dimmer {
  z-index: 8;
  background: rgba(16, 9, 5, .45);
}

.tone-toggle,
.room-hotspot {
  position: absolute;
  z-index: 6;
  display: grid;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  place-items: center;
  color: #ffe8b7;
  background: transparent;
  border: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.tone-toggle {
  top: max(2.6%, env(safe-area-inset-top));
  right: 3.7%;
  border: 1px solid rgba(235, 199, 135, .46);
  border-radius: 50%;
  background: rgba(28, 18, 12, .55);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

.tone-day .tone-toggle {
  color: #75502c;
  background: rgba(255, 244, 217, .7);
  border-color: rgba(113, 76, 39, .34);
}

.tone-icon {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
}

.tone-day .tone-icon-moon,
.tone-night .tone-icon-sun {
  display: none;
}

.room-hotspot {
  width: 54px;
  height: 54px;
  border-radius: 50%;
}

.room-hotspot svg {
  position: relative;
  z-index: 2;
  width: 18px;
  height: 18px;
  fill: #ffe7a8;
  filter: drop-shadow(0 0 6px rgba(255, 208, 112, .9));
  transition: transform 180ms ease;
}

.hotspot-halo {
  position: absolute;
  width: 31px;
  height: 31px;
  border: 1px solid rgba(255, 226, 160, .72);
  border-radius: 50%;
  background: rgba(238, 179, 78, .12);
  box-shadow:
    0 0 12px 3px rgba(244, 191, 91, .45),
    0 0 32px 11px rgba(223, 153, 44, .18);
  animation: hotspot-breathe 2.6s ease-in-out infinite;
}

.hotspot-archive {
  top: 28.2%;
  left: 15.8%;
}

.hotspot-family {
  top: 29.2%;
  right: 14.3%;
}

.hotspot-story {
  top: 60.3%;
  left: 50%;
  transform: translateX(-50%);
}

.room-hotspot:hover svg,
.room-hotspot:focus-visible svg {
  transform: scale(1.16);
}

.tone-toggle:focus-visible,
.room-hotspot:focus-visible {
  outline: 3px solid rgba(255, 225, 163, .96);
  outline-offset: 3px;
}

.room-panel {
  z-index: 20;
  width: min(920px, calc(100% - 34px));
  max-height: calc(100svh - 34px);
  padding: 0;
  overflow: auto;
  color: var(--cjb-ink);
  background: transparent;
  border: 0;
}

.room-panel::backdrop {
  background: rgba(17, 10, 6, .65);
}

.sprout > i:first-child {
  background: var(--cjb-green);
}

.panel-paper {
  min-height: 430px;
  padding: 32px;
  background:
    repeating-linear-gradient(0deg, rgba(71, 59, 43, .024) 0 1px, transparent 1px 4px),
    #eee3cb;
  border: 1px solid rgba(197, 158, 98, .6);
  box-shadow: 0 26px 70px rgba(10, 5, 3, .48);
}

.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(103, 78, 49, .2);
}

.panel-kicker {
  margin: 0 0 7px;
  color: #9b6d38;
  font-family: var(--cjb-font-ui);
  font-size: 11px;
  letter-spacing: .13em;
}

.panel-header h1 {
  margin: 0;
  color: #37271d;
  font-size: clamp(27px, 4vw, 40px);
  font-weight: 400;
  line-height: 1.24;
}

.panel-tools {
  display: flex;
  flex: 0 0 auto;
  gap: 5px;
}

.icon-button {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  color: #6a4b32;
  background: rgba(255, 250, 237, .52);
  border: 1px solid rgba(103, 78, 49, .22);
  border-radius: 50%;
  cursor: pointer;
}

.icon-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.panel-view {
  padding-top: 26px;
}

.panel-lead,
.family-intro {
  max-width: 680px;
  margin: 0 0 23px;
  color: #6c5946;
  font-size: 16px;
  line-height: 1.85;
}

.person-context {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 8px 13px;
  color: #5b4938;
  background: rgba(111, 132, 97, .12);
  border-left: 2px solid #718261;
  font-family: var(--cjb-font-ui);
}

.person-context span {
  color: #7a6c5c;
  font-size: 12px;
}

.central-phase[hidden],
.topic-wheel[hidden] {
  display: none;
}

.topic-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.topic-heading p,
.narration-question > p {
  margin: 0 0 6px;
  color: #9b6d38;
  font-family: var(--cjb-font-ui);
  font-size: 11px;
  letter-spacing: .1em;
}

.topic-heading h2,
.narration-question h2 {
  margin: 0;
  color: #3d2d22;
  font-size: clamp(23px, 3.3vw, 32px);
  font-weight: 400;
  line-height: 1.35;
}

.text-button,
.all-topics-toggle {
  min-height: 44px;
  padding: 0 14px;
  color: #67492f;
  background: transparent;
  border: 1px solid rgba(103, 78, 49, .24);
  font-family: var(--cjb-font-ui);
  cursor: pointer;
}

.topic-recommendations {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.topic-card {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 180px;
  padding: 18px;
  color: #4d3b2d;
  background: rgba(255, 249, 235, .68);
  border: 1px solid rgba(103, 78, 49, .22);
  text-align: left;
  cursor: pointer;
}

.topic-card > span {
  color: #9b6d38;
  font-family: var(--cjb-font-ui);
  font-size: 11px;
}

.topic-card strong {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.48;
}

.topic-card small {
  color: #786956;
  font-family: var(--cjb-font-ui);
  font-size: 12px;
  line-height: 1.62;
}

.topic-card:hover,
.topic-card:focus-visible,
.topic-wheel-option[aria-selected="true"] {
  background: #fff9eb;
  border-color: rgba(124, 88, 56, .65);
  outline: none;
}

.all-topics-toggle {
  width: 100%;
  margin-top: 12px;
}

.topic-wheel {
  margin-top: 14px;
  padding: 16px;
  background: rgba(77, 58, 41, .08);
  border: 1px solid rgba(103, 78, 49, .22);
}

.topic-wheel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.topic-wheel h3 {
  margin: 0;
  color: #49362a;
  font-size: 19px;
  font-weight: 400;
}

.topic-wheel-list {
  max-height: 360px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
}

.topic-wheel-option {
  display: grid;
  gap: 5px;
  width: 100%;
  min-height: 74px;
  padding: 13px 15px;
  color: #4d3b2d;
  background: transparent;
  border: 1px solid transparent;
  scroll-snap-align: center;
  text-align: left;
  cursor: pointer;
}

.topic-wheel-option strong {
  font-size: 16px;
  font-weight: 400;
}

.topic-wheel-option small {
  color: #806f5b;
  font-family: var(--cjb-font-ui);
  font-size: 11px;
}

.narration-back {
  margin-bottom: 14px;
}

.narration-context {
  margin-bottom: 14px;
  color: #715c47;
  font-family: var(--cjb-font-ui);
  font-size: 12px;
}

.narration-progress {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  color: #74583c;
  font-family: var(--cjb-font-ui);
  font-size: 11px;
}

.narration-progress > i {
  height: 4px;
  overflow: hidden;
  background: rgba(103, 78, 49, .15);
}

.narration-progress b {
  display: block;
  width: 16.666%;
  height: 100%;
  background: #9b6d38;
  transition: width 180ms ease;
}

.narration-thread {
  display: grid;
  grid-template-columns: repeat(6, minmax(42px, 1fr));
  gap: 6px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.narration-thread button {
  width: 100%;
  min-height: 44px;
  color: #745f4b;
  background: rgba(255, 249, 235, .48);
  border: 1px solid rgba(103, 78, 49, .18);
  font-family: var(--cjb-font-ui);
  cursor: pointer;
}

.narration-thread button[aria-current="step"] {
  color: #fff8ea;
  background: #7c5838;
  border-color: #7c5838;
}

.narration-question {
  padding: 22px;
  background: rgba(255, 249, 235, .68);
  border: 1px solid rgba(103, 78, 49, .22);
}

.narration-question .cjb-voice-thread {
  margin-top: 18px;
}

.narration-controls {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid rgba(103, 78, 49, .2);
  background: #f2e7d2;
  touch-action: manipulation;
  -webkit-touch-callout: none;
}

.voice-mode-switch {
  display: inline-flex;
  margin-bottom: 10px;
  border: 1px solid rgba(111, 84, 55, .34);
  border-radius: 999px;
  overflow: hidden;
}

.voice-mode-button {
  min-height: 32px;
  min-width: 68px;
  padding: 0 14px;
  border: 0;
  color: #5e4430;
  background: transparent;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.voice-mode-button.is-active {
  color: #fff6e5;
  background: #7c5838;
}

.voice-mode-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
}

.voice-record-button {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid #7c5838;
  border-radius: 999px;
  color: #fff8ef;
  background: #7c5838;
  font: inherit;
  cursor: pointer;
}

.voice-record-button.is-recording {
  border-color: #8d5345;
  background: #9a4f3f;
}

.voice-record-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff6e5;
}

.voice-record-button.is-recording .voice-record-dot {
  animation: voice-record-pulse 860ms ease-in-out infinite;
}

.voice-record-timer,
.voice-record-cancel-hint {
  color: #fff6e5;
  font-family: var(--cjb-font-ui);
  font-size: 12px;
}

.voice-record-timer {
  font-variant-numeric: tabular-nums;
}

.voice-record-cancel-hint {
  opacity: .85;
}

.voice-draft-panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, auto);
  align-items: center;
  gap: 8px;
  padding: 10px;
  color: #5f4935;
  background: #fff9e9;
  border: 1px solid rgba(103, 78, 49, .24);
  font-family: var(--cjb-font-ui);
  font-size: 12px;
}

.voice-draft-panel[hidden] {
  display: none;
}

.voice-draft-panel button {
  min-height: 40px;
  padding: 0 13px;
  color: #5f4935;
  background: #fff6de;
  border: 1px solid rgba(103, 78, 49, .28);
  font: inherit;
  cursor: pointer;
}

.voice-draft-panel #voiceDraftSend {
  color: #fff6e5;
  background: #7c5838;
  border-color: #7c5838;
}

.voice-draft-panel button:disabled {
  cursor: progress;
  opacity: .58;
}

.voice-text-input-wrap {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.voice-text-label {
  display: none;
}

.voice-text-input {
  min-height: 52px;
  min-width: 0;
  padding: 11px 12px;
  color: #473525;
  background: #fff9ea;
  border: 1px solid rgba(102, 76, 48, .28);
  border-radius: 11px;
  resize: none;
  font: inherit;
  line-height: 1.5;
}

.voice-text-send {
  min-height: 52px;
  min-width: 72px;
  padding: 0 14px;
  border: 1px solid #7c5838;
  color: #fff6e5;
  background: #7c5838;
  font: inherit;
  cursor: pointer;
}

.voice-more-button {
  min-height: 36px;
  min-width: 62px;
  border: 1px solid rgba(103, 78, 49, .24);
  color: #5f4935;
  background: #fff6de;
  font: inherit;
  cursor: pointer;
}

.voice-more-menu {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid rgba(103, 78, 49, .26);
  background: #fff9e9;
}

.voice-more-menu[hidden] {
  display: none;
}

.voice-more-item {
  min-height: 44px;
  width: 100%;
  padding: 0 10px;
  border: 0;
  color: #4b3a2b;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.voice-more-item:hover,
.voice-more-item:focus-visible {
  background: #f0e5c8;
}

.voice-status {
  margin: 8px 0 0;
  color: #6e5643;
  font-family: var(--cjb-font-ui);
  font-size: 11px;
  min-height: 16px;
}

.narration-question .narration-thread {
  margin-bottom: 10px;
}

.narration-thread button {
  min-height: 36px;
}

.narration-actions .room-action {
  min-height: 66px;
}

.family-text-message-wrapper {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 10px;
}

.cjb-text-bubble {
  max-width: 78%;
  min-height: 42px;
  padding: 11px 14px;
  color: #edf6e9;
  background: #56ad6f;
  border: 1px solid #2e7e45;
  border-radius: 11px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 4px 10px rgba(28, 65, 28, .22);
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  text-align: left;
  cursor: pointer;
}

.cjb-text-bubble:focus-visible {
  outline: 3px solid rgba(255, 236, 188, .92);
  outline-offset: 2px;
}

.narration-actions {
  display: grid;
  grid-template-columns: minmax(120px, .55fr) minmax(220px, 1fr);
  gap: 12px;
  margin-top: 15px;
}

.narration-actions .room-action {
  min-height: 72px;
}

.story-again-action {
  width: 100%;
  margin-top: 32px;
}

.room-action {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 102px;
  padding: 17px 18px;
  color: #4f4031;
  background: rgba(255, 249, 235, .64);
  border: 1px solid rgba(103, 78, 49, .22);
  text-decoration: none;
  cursor: pointer;
}

.room-action.primary {
  color: #fff6e5;
  background: #7c5838;
  border-color: #7c5838;
}

.room-action > span {
  color: #9b6d38;
  font-family: var(--cjb-font-ui);
  font-size: 11px;
}

.room-action.primary > span,
.room-action.primary small {
  color: rgba(255, 246, 229, .72);
}

.room-action b {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
}

.room-action small {
  display: block;
  margin-top: 5px;
  color: #786956;
  font-family: var(--cjb-font-ui);
  font-size: 11px;
  font-weight: 400;
}

.room-action em {
  font-size: 23px;
  font-style: normal;
}

.directory-toggle {
  display: none;
  min-height: 44px;
  margin-bottom: 12px;
  padding: 0 14px;
  color: #5b432f;
  background: rgba(255, 250, 239, .72);
  border: 1px solid rgba(103, 78, 49, .24);
  font-family: var(--cjb-font-ui);
  cursor: pointer;
}

.story-library {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(0, 2fr);
  min-height: 480px;
  border: 1px solid rgba(103, 78, 49, .2);
}

.story-directory {
  padding: 20px;
  background: rgba(98, 78, 56, .08);
  border-right: 1px solid rgba(103, 78, 49, .2);
}

.directory-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
  color: #594532;
  font-family: var(--cjb-font-ui);
}

.directory-heading span {
  color: #8d7a65;
  font-size: 11px;
}

.story-list {
  display: grid;
  gap: 6px;
}

.story-directory-item {
  display: grid;
  gap: 6px;
  width: 100%;
  min-height: 62px;
  padding: 11px 12px;
  color: #5e4c3a;
  background: transparent;
  border: 1px solid transparent;
  text-align: left;
  cursor: pointer;
}

.story-directory-item[aria-pressed="true"] {
  background: rgba(255, 249, 235, .72);
  border-color: rgba(138, 98, 56, .28);
}

.story-directory-item strong {
  font-weight: 500;
}

.story-directory-item span {
  color: #8d7a65;
  font-family: var(--cjb-font-ui);
  font-size: 10px;
}

.story-reading {
  padding: 36px clamp(24px, 5vw, 54px);
  background: rgba(255, 251, 241, .7);
}

.story-date {
  margin: 0;
  color: #92744f;
  font-family: var(--cjb-font-ui);
  font-size: 11px;
  letter-spacing: .08em;
}

.story-reading h2 {
  margin: 13px 0 24px;
  color: #3d2d22;
  font-size: clamp(25px, 4vw, 36px);
  font-weight: 400;
}

.story-body {
  color: #594b3d;
  font-size: 16px;
  line-height: 2;
}

.story-body p {
  margin: 0 0 1.15em;
}

.room-login-form {
  display: grid;
  gap: 15px;
  max-width: 560px;
}

.room-login-form > label {
  display: grid;
  gap: 7px;
  color: #695744;
  font-family: var(--cjb-font-ui);
  font-size: 12px;
}

.room-login-form input {
  min-width: 0;
  min-height: 48px;
  padding: 0 13px;
  color: #453426;
  background: #fff9ea;
  border: 1px solid rgba(103, 78, 49, .28);
  font: inherit;
}

.room-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.room-login-form > p {
  min-height: 1.5em;
  margin: 0;
  color: #75563c;
  font-family: var(--cjb-font-ui);
  font-size: 12px;
}

.room-login-actions {
  display: grid;
  grid-template-columns: .55fr 1fr;
  gap: 10px;
}

.room-login-actions .room-action {
  min-height: 76px;
}

.reading-empty {
  color: #806f5b;
}

.family-intro {
  max-width: 760px;
}

.add-family-toggle {
  min-height: 44px;
  padding: 0 18px;
  color: #fff6e5;
  background: #7c5838;
  border: 1px solid #7c5838;
  font-family: var(--cjb-font-ui);
  cursor: pointer;
}

.add-family-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0 8px;
  padding: 18px;
  background: rgba(255, 249, 235, .64);
  border: 1px solid rgba(103, 78, 49, .22);
}

.add-family-form[hidden] {
  display: none;
}

.add-family-form label {
  display: grid;
  gap: 7px;
  color: #695744;
  font-family: var(--cjb-font-ui);
  font-size: 12px;
}

.add-family-form input,
.add-family-form select {
  min-height: 46px;
  padding: 0 12px;
  color: #453426;
  background: #fff9ea;
  border: 1px solid rgba(103, 78, 49, .28);
  border-radius: 0;
  font: inherit;
}

.add-family-form > p {
  grid-column: 1 / -1;
  margin: 0;
  color: #806f5b;
  font-family: var(--cjb-font-ui);
  font-size: 11px;
}

.add-family-submit {
  grid-column: 1 / -1;
  width: 100%;
}

.family-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: 22px 18px;
  padding: 18px 0 8px;
}

.person-frame {
  display: grid;
  gap: 10px;
  padding: 11px 11px 14px;
  color: #4d3d30;
  background: #f7ead0;
  border: 1px solid rgba(117, 82, 47, .28);
  box-shadow: 0 12px 24px rgba(67, 46, 27, .12);
  transform: rotate(-.4deg);
  cursor: pointer;
}

.person-frame:nth-child(even) {
  transform: rotate(.6deg);
}

.person-portrait {
  position: relative;
  display: grid;
  aspect-ratio: 4 / 5;
  place-items: center;
  overflow: hidden;
  color: #7b6b57;
  background:
    linear-gradient(145deg, rgba(135, 151, 124, .3), rgba(238, 220, 184, .62));
  border: 1px solid rgba(93, 83, 68, .2);
}

.person-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.person-portrait b {
  font-size: 32px;
  font-weight: 400;
}

.person-portrait small {
  position: absolute;
  right: 6px;
  bottom: 6px;
  left: 6px;
  padding: 4px;
  color: #695b48;
  background: rgba(251, 240, 214, .82);
  font-family: var(--cjb-font-ui);
  font-size: 9px;
  text-align: center;
}

.person-caption {
  display: grid;
  gap: 3px;
  text-align: left;
}

.person-caption small,
.person-caption em {
  color: #8c775e;
  font-family: var(--cjb-font-ui);
  font-size: 10px;
  font-style: normal;
}

.person-caption strong {
  font-size: 17px;
  font-weight: 400;
}

.family-empty {
  display: grid;
  min-height: 310px;
  place-items: center;
  align-content: center;
  gap: 18px;
  color: #7b6955;
  text-align: center;
}

.empty-frame {
  display: block;
  width: 92px;
  height: 116px;
  background: linear-gradient(145deg, rgba(135, 151, 124, .25), rgba(238, 220, 184, .5));
  border: 8px solid #b99668;
  box-shadow: inset 0 0 0 1px rgba(71, 50, 29, .25), 0 14px 24px rgba(67, 46, 27, .12);
}

.family-empty p {
  max-width: 340px;
  margin: 0;
  line-height: 1.8;
}

.person-memory {
  padding-top: 2px;
}

.text-button {
  min-height: 44px;
  padding: 0 5px;
  color: #745533;
  background: transparent;
  border: 0;
  font-family: var(--cjb-font-ui);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.person-memory header {
  margin: 14px 0 20px;
}

.person-memory header p {
  margin: 0 0 4px;
  color: #8d7559;
  font-family: var(--cjb-font-ui);
  font-size: 12px;
}

.person-memory header h2 {
  margin: 0;
  color: #3d2d22;
  font-size: 32px;
  font-weight: 400;
}

.person-story-list {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.person-story-list button,
.person-story-empty {
  margin: 0;
  padding: 14px 16px;
  color: #584838;
  background: rgba(255, 250, 237, .58);
  border-left: 2px solid rgba(128, 95, 57, .45);
}

.person-story-list button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  text-align: left;
  cursor: pointer;
}

.person-story-list button strong {
  font-weight: 400;
}

.person-story-list button span {
  color: #8c775e;
  font-family: var(--cjb-font-ui);
  font-size: 10px;
}

.person-story-action {
  width: 100%;
}

.signin-view {
  max-width: 560px;
}

.room-guide {
  position: fixed;
  z-index: 30;
  inset: 0;
  display: grid;
  align-items: end;
  justify-items: center;
  padding: 28px;
  background: rgba(13, 8, 5, .42);
}

.guide-focus {
  position: fixed;
  width: 78px;
  height: 78px;
  border: 1px solid rgba(255, 225, 154, .9);
  border-radius: 50%;
  box-shadow:
    0 0 0 9999px rgba(10, 6, 4, .45),
    0 0 30px rgba(255, 205, 104, .75);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.guide-card {
  position: relative;
  display: grid;
  width: min(420px, 100%);
  gap: 14px;
  padding: 22px 23px 20px;
  color: #4f3c2d;
  background: rgba(248, 236, 210, .97);
  border: 1px solid rgba(205, 159, 88, .68);
  box-shadow: 0 22px 50px rgba(10, 5, 3, .45);
}

.guide-card p {
  margin: 0;
  padding-left: 44px;
  font-size: 16px;
  line-height: 1.7;
}

.guide-card > div {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.guide-next {
  min-height: 44px;
  padding: 0 18px;
  color: #fff5e4;
  background: #775335;
  border: 1px solid #775335;
  cursor: pointer;
}

.lamp-guide {
  position: absolute;
  top: 20px;
  left: 22px;
  width: 30px;
  height: 34px;
}

.lamp-guide i {
  position: absolute;
  display: block;
  background: #b68445;
}

.lamp-guide i:first-child {
  top: 4px;
  left: 8px;
  width: 14px;
  height: 12px;
  border-radius: 7px 7px 3px 3px;
  box-shadow: 0 0 14px rgba(219, 160, 70, .65);
}

.lamp-guide i:nth-child(2) {
  top: 16px;
  left: 14px;
  width: 2px;
  height: 11px;
}

.lamp-guide i:last-child {
  bottom: 4px;
  left: 8px;
  width: 14px;
  height: 2px;
}

.toast {
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  width: min(360px, calc(100% - 32px));
  padding: 12px 15px;
  color: #4f3e2f;
  background: rgba(248, 238, 216, .97);
  border: 1px solid rgba(133, 94, 53, .28);
  box-shadow: 0 14px 34px rgba(16, 9, 5, .32);
  transform: translateX(-50%);
  font-family: var(--cjb-font-ui);
  font-size: 13px;
  line-height: 1.6;
}

.loading {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  color: #e5cfaa;
  background: #17100c;
  font-family: var(--cjb-font-ui);
  font-size: 13px;
  letter-spacing: .08em;
}

/* Diary keeps the approved paper treatment while sharing this stylesheet. */
.diary-page { width: min(100%, var(--cjb-container-reading)); min-height: 100svh; margin: 0 auto; padding: 20px; }
.diary-top { display: flex; align-items: center; justify-content: space-between; gap: var(--cjb-space-4); margin-bottom: 28px; }
.back-pill { display: inline-flex; min-height: 44px; align-items: center; padding: 0 16px; color: var(--cjb-ink); background: rgba(247,241,228,.56); border: 1px solid var(--cjb-line); border-radius: var(--cjb-radius-pill); font-family: var(--cjb-font-ui); font-size: 13px; text-decoration: none; }
.back-pill:hover { color: var(--cjb-copper-pressed); border-color: var(--cjb-copper); }
.back-pill:focus-visible { outline: 3px solid var(--cjb-focus); outline-offset: 3px; }
.page-code { margin: 0; color: var(--cjb-ink-muted); font-family: var(--cjb-font-ui); font-size: 9px; font-variant-numeric: tabular-nums; letter-spacing: .22em; line-height: 1.5; text-align: right; }
.diary-paper { position: relative; min-height: calc(100svh - 112px); padding: 48px 22px 70px; background: repeating-linear-gradient(0deg, transparent 0 31px, rgba(63,72,62,.1) 31px 32px), var(--cjb-paper-raised); box-shadow: var(--cjb-shadow-paper); clip-path: polygon(1% 1%, 16% 0, 34% 2%, 55% 0, 74% 2%, 99% 0, 100% 97%, 83% 99%, 65% 98%, 46% 100%, 25% 98%, 0 100%); }
.diary-paper::before { content: ""; position: absolute; top: 10px; left: 50%; width: 112px; height: 18px; background: rgba(188,174,149,.2); transform: translateX(-50%) rotate(-1deg); }
.diary-date { margin: 0; color: var(--cjb-ink-muted); font-family: var(--cjb-font-ui); font-size: 10px; font-variant-numeric: tabular-nums; letter-spacing: .22em; }
.diary-paper h1 { margin: 14px 0 12px; color: var(--cjb-ink-strong); font-size: clamp(30px, 9vw, 42px); font-weight: 400; line-height: 1.2; }
.diary-lead { margin: 0; padding: 17px 15px; border-left: 2px solid var(--cjb-copper); color: var(--cjb-ink); background: rgba(78,86,78,.045); font-size: 15px; line-height: 1.9; }
.truth-note { margin: 12px 0 30px; color: var(--cjb-ink-muted); font-family: var(--cjb-font-ui); font-size: 12px; line-height: 1.7; }
.diary-recommendations { margin: 0 0 26px; padding: 18px 0 20px; border-top: 1px solid var(--cjb-line); border-bottom: 1px solid var(--cjb-line); }
.diary-recommendations > header { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.diary-recommendations > header p { margin: 0 0 3px; color: var(--cjb-copper); font-family: var(--cjb-font-ui); font-size: 9px; letter-spacing: .14em; }
.diary-recommendations h2 { margin: 0; color: var(--cjb-ink-strong); font-size: 20px; font-weight: 400; line-height: 1.35; }
.diary-recommendations > header button { min-width: 72px; min-height: 44px; padding: 0 12px; color: var(--cjb-copper-pressed); background: transparent; border: 1px solid var(--cjb-line); font-family: var(--cjb-font-ui); font-size: 12px; cursor: pointer; }
.diary-recommendations > header button:hover { background: var(--cjb-paper); border-color: var(--cjb-copper); }
.diary-recommendations > header button:focus-visible, .recommendation-card:focus-visible, .all-moments-link:focus-visible { outline: 3px solid var(--cjb-focus); outline-offset: 3px; }
.diary-recommendations > header button:disabled { cursor: default; opacity: .45; }
.recommendation-grid { display: grid; gap: 9px; }
.recommendation-card { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 2px 10px; min-height: 112px; padding: 13px 14px; color: var(--cjb-ink); background: rgba(247,241,228,.58); border: 1px solid var(--cjb-line); text-decoration: none; }
.recommendation-card:hover { background: var(--cjb-paper); border-color: var(--cjb-copper); transform: translateY(-1px); }
.recommendation-card > span { grid-row: 1 / span 3; color: var(--cjb-copper); font-family: var(--cjb-font-ui); font-size: 10px; letter-spacing: .08em; }
.recommendation-card h3 { margin: 0; color: var(--cjb-ink-strong); font-size: 16px; font-weight: 400; line-height: 1.45; }
.recommendation-card p { margin: 3px 0 0; color: var(--cjb-ink-muted); font-family: var(--cjb-font-ui); font-size: 11px; line-height: 1.55; }
.recommendation-card small { margin-top: 6px; color: var(--cjb-copper-pressed); font-family: var(--cjb-font-ui); font-size: 10px; }
.recommendation-loading { margin: 0; padding: 18px; color: var(--cjb-ink-muted); background: rgba(247,241,228,.5); font-family: var(--cjb-font-ui); font-size: 12px; text-align: center; }
.all-moments-link { display: flex; min-height: 44px; align-items: center; justify-content: space-between; margin-top: 10px; color: var(--cjb-copper-pressed); font-family: var(--cjb-font-ui); font-size: 12px; text-decoration: none; }
.diary-actions { display: grid; gap: 12px; }
.diary-action { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 72px; padding: 12px 14px; color: var(--cjb-ink); background: rgba(247,241,228,.55); border: 1px solid var(--cjb-line); text-align: left; text-decoration: none; transition: background-color var(--cjb-duration-normal) ease, transform var(--cjb-duration-fast) ease; }
.diary-action:hover { background: var(--cjb-paper); transform: translateY(-2px); }
.diary-action.primary { color: var(--cjb-on-primary); background: var(--cjb-copper); border-color: var(--cjb-copper); }
.diary-action span { color: var(--cjb-copper-pressed); font-family: var(--cjb-font-ui); font-size: 11px; font-variant-numeric: tabular-nums; }
.diary-action.primary span, .diary-action.primary small { color: rgba(255,250,240,.75); }
.diary-action b { font-size: 17px; font-weight: 400; }
.diary-action small { display: block; margin-top: 4px; color: var(--cjb-ink-muted); font-family: var(--cjb-font-ui); font-size: 11px; line-height: 1.5; }
.diary-action em { color: currentColor; font-size: 22px; font-style: normal; }
.diary-foot { margin: 30px 0 0; color: var(--cjb-ink-muted); font-family: var(--cjb-font-ui); font-size: 11px; line-height: 1.7; text-align: center; }

@keyframes hotspot-breathe {
  50% {
    opacity: .58;
    transform: scale(.76);
  }
}

@media (max-width: 700px) {
  .room-stage {
    width: max(100vw, calc(100svh * .5625));
    max-width: none;
    height: 100svh;
  }

  .room-panel {
    width: calc(100% - 22px);
    max-height: calc(100svh - 22px);
  }

  .panel-paper {
    min-height: calc(100svh - 22px);
    padding: 24px 18px 28px;
  }

  .add-family-form {
    grid-template-columns: 1fr;
  }

  .panel-header h1 {
    font-size: 27px;
  }

  .panel-tools {
    gap: 2px;
  }

  .topic-heading {
    align-items: flex-start;
  }

  .topic-recommendations {
    grid-template-columns: minmax(0, 1fr);
  }

  .topic-card {
    min-height: 128px;
  }

  .topic-wheel-list {
    max-height: 48svh;
  }

  .narration-thread {
    grid-template-columns: repeat(3, minmax(42px, 1fr));
  }

  .narration-question {
    padding: 18px 14px;
  }

  .narration-actions,
  .room-login-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .room-action {
    grid-template-columns: 58px minmax(0, 1fr) auto;
    min-height: 86px;
    padding: 14px;
  }

  .directory-toggle {
    display: inline-flex;
    align-items: center;
  }

  .story-library {
    position: relative;
    display: block;
    min-height: calc(100svh - 190px);
    overflow: hidden;
  }

  .story-directory {
    position: absolute;
    z-index: 3;
    inset: 0 16% 0 0;
    overflow-y: auto;
    background: #e8dcc4;
    border-right: 1px solid rgba(103, 78, 49, .24);
    box-shadow: 12px 0 28px rgba(54, 37, 22, .18);
    transform: translateX(-110%);
    transition: transform 220ms ease;
  }

  .story-directory.is-open {
    transform: translateX(0);
  }

  .story-reading {
    min-height: calc(100svh - 190px);
    padding: 30px 22px;
  }

  .family-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 12px;
  }

  .room-guide {
    padding: 14px;
  }

  .guide-card {
    margin-bottom: env(safe-area-inset-bottom);
  }
}

@media (max-width: 374px) {
  .panel-paper {
    padding-right: 14px;
    padding-left: 14px;
  }

  .panel-header {
    gap: 8px;
  }

  .panel-header h1 {
    font-size: 24px;
  }

  .panel-kicker {
    font-size: 10px;
  }

  .family-wall {
    gap: 14px 9px;
  }

  .person-frame {
    padding: 8px 8px 11px;
  }

  .diary-page { padding: 14px; }
  .diary-paper { padding-left: 17px; padding-right: 17px; }
}

@media (min-width: 768px) {
  .diary-page { padding: 28px; }
  .diary-paper { padding-right: 42px; padding-left: 42px; }
  .recommendation-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .recommendation-card { grid-template-columns: 1fr; min-height: 190px; align-content: start; }
  .recommendation-card > span { grid-row: auto; }
  .recommendation-card h3 { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .hotspot-halo {
    animation: none;
  }
}