:root {
  --bg: #f7f8f4;
  --card: #ffffff;
  --ink: #16202f;
  --ink-2: #5a6878;
  --ink-3: #68766e;
  --line: #e5e9f0;
  --brand: #28516b;
  --brand-soft: #edf1f8;
  --ok: #12946b;
  --warn: #c77700;
  --danger: #cf3b47;
  --radius: 20px;
  --shadow: 0 8px 26px rgba(40, 74, 87, 0.07);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.75;
}

button, input, select, textarea { font: inherit; color: inherit; }

.app-shell {
  max-width: 760px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg);
  padding-bottom: calc(70px + env(safe-area-inset-bottom));
}

.boot { padding: 60px 0; text-align: center; color: var(--ink-3); }

.topbar {
  position: sticky; top: 0; z-index: 5;
  background: rgba(245, 247, 244, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
}
.topbar h1 { font-size: 16px; margin: 0; flex: 1; line-height: 1.4; }
.topbar h1 small { display: block; font-size: 14px; letter-spacing: 1px; color: var(--ink-2); font-weight: 500; }
.brand-mark { display: grid; place-items: center; flex: none; width: 36px; height: 36px; background: var(--brand); color: white; border-radius: 12px; font-size: 20px; font-weight: 700; text-decoration: none; }
.topbar .sub { font-size: 14px; color: var(--ink-3); }

.tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 760px;
  display: flex; background: var(--card);
  border-top: 1px solid var(--line);
  z-index: 6;
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  flex: 1; text-align: center; padding: 9px 0 10px;
  text-decoration: none; color: var(--ink-3); font-size: 14px;
}
.tabbar a.active { color: var(--brand); font-weight: 600; }
.tabbar span { display: block; font-size: 17px; line-height: 1.2; }

.page { padding: 20px; }
.page > * + * { margin-top: 18px; }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow);
}
.card h3 { margin: 0 0 12px; font-size: 18px; }
.card .meta { color: var(--ink-3); font-size: 14px; }

.row { display: flex; gap: 8px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }

.btn {
  border: 1px solid var(--brand); background: var(--brand); color: #fff;
  border-radius: 10px; padding: 9px 14px; cursor: pointer;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--brand); }
.btn.plain { background: #f2f4f8; border-color: var(--line); color: var(--ink-2); }
.btn.danger { background: transparent; color: var(--danger); border-color: #f0c3c7; }
.btn.block { width: 100%; }
.btn.sm { padding: 5px 10px; font-size: 14px; }

label.field { display: block; margin-bottom: 10px; }
label.field > span { display: block; font-size: 14px; color: var(--ink-2); margin-bottom: 4px; }
input[type='text'], input[type='number'], input[type='tel'], input[type='password'], select, textarea {
  width: 100%; padding: 9px 10px; border: 1px solid var(--line);
  border-radius: 10px; background: #fff;
}
textarea { min-height: 70px; resize: vertical; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; font-size: 14px; cursor: pointer; color: var(--ink-2);
}
.chip.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }

.score {
  font-size: 22px; font-weight: 700; color: var(--brand);
}
.score-bar { height: 8px; background: #eef1f6; border-radius: 99px; overflow: hidden; margin-top: 6px; }
.score-bar > i { display: block; height: 100%; background: linear-gradient(90deg, #97c9ac, var(--brand)); }

.tag {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  background: var(--brand-soft); color: var(--brand); font-size: 14px; margin-right: 6px;
}
.tag.green { background: #e3f5ee; color: var(--ok); }
.tag.amber { background: #fdf1de; color: var(--warn); }
.tag.red { background: #fdecee; color: var(--danger); }
.tag.grey { background: #eef1f6; color: var(--ink-2); }

.avatar {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, #76a88f, var(--brand));
}

.list { list-style: none; margin: 0; padding: 0; }
.list li { padding: 10px 0; border-bottom: 1px dashed var(--line); }
.list li:last-child { border-bottom: none; }

.chat-page { display: flex; flex-direction: column; height: var(--chat-height, calc(100dvh - 120px)); min-height: 240px; }
.chat-page > * { flex-shrink: 0; }
.chat-page .chat-wrap { flex: 1; min-height: 0; }
.chat-wrap { display: flex; flex-direction: column; }
.chat-body { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 2px; }
.chat-composer input { min-width: 0; font-size: 16px; }
.msg, .kv, .avatar-memory, #avatar-answer { overflow-wrap: anywhere; }
#avatar-consent label { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0; }
#avatar-consent input { flex: none; margin-top: 5px; }
.row.between:has(h3) { flex-wrap: wrap; }
.msg { max-width: 78%; margin-bottom: 10px; padding: 8px 11px; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.msg.mine { margin-left: auto; background: var(--brand-soft); border-color: #c9dfd3; }
.msg .who { font-size: 14px; color: var(--ink-3); margin-bottom: 2px; }

.callout { border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.callout.info { background: var(--brand-soft); color: #245b4c; }
.callout.warn { background: #fdf1de; color: #7a4b00; }
.callout.err { background: #fdecee; color: #8d2731; }

.kv { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; padding: 4px 0; }
.kv .k { color: var(--ink-3); }

.funnel-step { margin-bottom: 8px; }
.funnel-step .row { font-size: 14px; }

.spinner { text-align: center; padding: 24px; color: var(--ink-3); }
.empty { text-align: center; padding: 30px 10px; color: var(--ink-3); font-size: 14px; }
.divider { height: 1px; background: var(--line); margin: 12px 0; }
.muted { color: var(--ink-3); font-size: 14px; }
.report-evidence { overflow-wrap: anywhere; }
.right { text-align: right; }

a { color: var(--brand); text-underline-offset: 3px; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #699d80; outline-offset: 3px; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); }
.btn { min-height: 42px; font-weight: 600; transition: background .15s, box-shadow .15s; }
.btn.sm { min-height: 34px; }
.btn:hover:not(:disabled) { box-shadow: 0 3px 12px #245b4c18; }
.tabbar a { min-height: 62px; padding: 10px 2px; }
.tabbar a.active { background: var(--brand-soft); }
.eyebrow { display: block; color: var(--brand); font-size: 14px; font-weight: 700; letter-spacing: 1.5px; }
.welcome-panel { padding: 30px; border-radius: 24px; background: #e7eee5; border: 1px solid #dbe5d9; position: relative; overflow: hidden; }
.welcome-panel h2, .login-intro h2 { margin: 12px 0; font-size: clamp(26px, 5vw, 36px); line-height: 1.35; letter-spacing: -.8px; color: #193f35; }
.welcome-panel p, .login-intro p { max-width: 440px; color: #4d655b; line-height: 1.8; }
.welcome-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 22px 0; }
.welcome-actions a { font-size: 14px; text-decoration: none; }
.journey { display: flex; flex-wrap: wrap; gap: 20px; padding-top: 18px; border-top: 1px solid #ccdaca; font-size: 14px; color: #4d655b; }
.journey b { margin-right: 5px; font-size: 14px; color: var(--brand); }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.section-heading h2 { margin: 3px 0 0; font-size: 18px; }
.plan-item { flex-wrap: wrap; gap: 14px; padding: 18px 0 !important; }
.plan-item > .grow { flex-basis: 230px; }
.plan-item strong { display: block; margin: 7px 0; font-size: 16px; }
.empty { padding: 28px 12px; color: var(--ink-2); }
.empty strong { display: block; font-size: 14px; color: var(--ink); margin: 10px 0; }
.empty p { margin: 6px auto; max-width: 340px; }
.empty-symbol { display: grid; place-items: center; width: 42px; height: 42px; margin: auto; border-radius: 14px; background: var(--brand-soft); color: var(--brand); font-size: 24px; }
.match-score { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; min-width: 48px; }
.match-score small { font-size: 14px; font-weight: 400; color: var(--ink-2); }
.candidate-card .list li { border-bottom-style: solid; }
.login-intro { padding: 12px 6px 6px; }
.login-card form { margin-top: 20px; }
.login-card > .row { padding: 5px; border-radius: 12px; background: var(--bg); }
.login-card > .row button { flex: 1; }
.screening-summary { margin: 14px 0; padding: 16px; border-radius: 14px; background: #f5f7f4; border-left: 3px solid #8caa97; }
.screening-summary.common { background: #eef5ef; border-color: var(--brand); }
.screening-summary.differences { background: #fff8ed; border-color: #b38a48; }
.screening-summary h4 { margin: 0 0 8px; }
.screening-summary ul { padding-left: 20px; margin: 0; }
.screening-summary li + li { margin-top: 10px; }
.screening-summary small { display: block; color: var(--ink-2); font-size: 14px; margin-top: 3px; }
details { padding: 12px 0; }
summary { cursor: pointer; font-weight: 600; color: var(--brand); }
@media (max-width: 480px) {
  .page { padding: 14px; }
  .card { padding: 16px; }
  .welcome-panel { padding: 24px 20px; }
  .journey { gap: 12px; font-size: 14px; }
  .topbar .sub { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  input[type='text'], input[type='number'], input[type='tel'], input[type='password'], select, textarea { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* 彼岸回响：温暖的光与可渐进探索的页面。 */
.topbar { background: rgba(246,246,243,.94); padding: 12px 18px; }
.brand-mark { background: #172b49; color: #f2cb86; }
.topbar h1 small { color: #737e90; }
.app-shell { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
.tabbar { background: rgba(255,255,255,.97); backdrop-filter: blur(16px); }
.tabbar a { min-height: 78px; padding: 10px 4px 8px; font-weight: 600; color: #53667e; }
.tabbar a small { display: block; font-size: 14px; font-weight: 400; margin-top: 2px; }
.tabbar a span { font-size: 22px; margin-bottom: 3px; }
.tabbar a.active { background: #eef1f7; color: #243c60; }
.callout.info { background: #edf1f8; color: #29476d; }
.shore-intro { position: relative; overflow: hidden; text-align: center; padding: 38px 20px 32px; border-radius: 28px; color: #f4eddf; background: radial-gradient(ellipse at 50% 34%,#334461 0%,#192e4d 38%,#112039 95%); }
.shore-intro::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .6; background-image: radial-gradient(circle at 12% 24%,#c9aa74 0 1px,transparent 2px),radial-gradient(circle at 83% 18%,#d8c6a0 0 1px,transparent 2px),radial-gradient(circle at 70% 72%,#b1c4d9 0 1px,transparent 2px); }
.shore-intro .eyebrow { color: #dbbd84; font-size: 14px; letter-spacing: 3px; }
.shore-intro h2 { font-size: clamp(25px,4.5vw,34px); font-weight: 500; letter-spacing: 1px; line-height: 1.5; margin: 8px 0 14px; }
.shore-intro p { color: #c1cbd8; line-height: 1.9; margin: 0 0 22px; }
.shore-intro .btn { position: relative; background: #f1cd91; color: #172b49; border-color: #f1cd91; border-radius: 999px; padding: 11px 26px; }
.shore-footnote { display: block; color: #adb9ca; font-size: 14px; margin-top: 14px; }
.echo-orb { position: relative; display: grid; place-items: center; width: 146px; height: 146px; border: none; background: radial-gradient(circle,#ffdf9b38,transparent 68%); color: #f5cd86; padding: 26px; margin: 18px auto 10px; cursor: pointer; }
.echo-orb svg { width: 100%; filter: drop-shadow(0 0 18px #efc27188); animation: echo-breathe 4s ease-in-out infinite; }
.orb-ring { position: absolute; inset: 12px; border: 1px solid #e1b76833; border-radius: 50%; }
.home-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.home-paths a { display: flex; flex-direction: column; gap: 10px; border-radius: 18px; padding: 20px; background: white; border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.home-paths a span { color: #64758b; font-size: 14px; }
.home-paths a strong { font-size: 15px; line-height: 1.7; }
.home-paths a small { color: var(--ink-2); font-size: 14px; }
.plans-disclosure > summary { display: flex; align-items: center; justify-content: space-between; }
.plans-content { margin-top: 12px; }
.plans-content > .card { border: none; padding: 0; box-shadow: none; }
.echo-space { text-align: center; padding: 32px 20px; background: #ecedf3; border-radius: 24px; }
.echo-space h2 { font-size: 23px; font-weight: 500; color: #243d5d; }
.echo-space p { font-size: 14px; color: var(--ink-2); line-height: 1.9; }
.space-portrait { display: grid; place-items: center; margin: 20px auto; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle,#edcb9055,transparent 75%); color: #d8af6a; }
.space-portrait svg { width: 110px; filter: drop-shadow(0 5px 12px #af875244); }
.space-stats { display: grid; grid-template-columns: 1fr 1fr; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 18px; }
.space-stats div { text-align: center; }
.space-stats div + div { border-left: 1px solid var(--line); }
.space-stats strong { display: block; font-size: 26px; color: #29476d; }
.space-stats span { font-size: 14px; color: var(--ink-2); }
.menu-link { display: flex; align-items: center; justify-content: space-between; text-decoration: none; }
.menu-link p { margin: 0; }
.page-heading h2 { font-weight: 500; font-size: 23px; line-height: 1.5; margin: 10px 0; }
.segment-nav { display: flex; padding: 5px; border-radius: 13px; background: #e8ecf2; gap: 5px; }
.segment-nav a { flex: 1; text-align: center; padding: 10px 6px; border-radius: 9px; text-decoration: none; color: #506079; font-size: 14px; }
.segment-nav a[aria-current] { background: #fff; color: #203a5b; box-shadow: 0 2px 6px #172b4909; }
.profile-intro { display: flex; align-items: center; gap: 18px; }
.profile-intro .avatar { width: 64px; height: 64px; border-radius: 22px; font-size: 25px; }
.profile-intro h2 { font-size: 22px; margin: 4px 0; }
.profile-intro p { margin: 0; }
.profile-form { margin-top: 18px; }
.profile-menu a { display: flex; justify-content: space-between; gap: 12px; align-items: center; text-decoration: none; padding: 15px 0; color: var(--ink); }
.profile-menu a + a { border-top: 1px solid var(--line); }
.profile-menu a small { display: block; margin-top: 4px; font-size: 14px; color: var(--ink-2); }
.profile-footnote { padding: 0 8px; line-height: 1.8; }
.login-intro { padding: 18px 8px 10px; }
.login-intro .eyebrow { color: #977843; }
.login-intro h2 { color: #172b49; font-weight: 500; letter-spacing: 1px; }
.login-intro p { color: #596b82; }
.login-card > .row button { border: none; background: transparent; }
.login-card > .row button[aria-pressed=true] { background: white; color: var(--brand); box-shadow: 0 2px 6px #172b4910; }
/* 必须带上 label.field > 前缀：第 95 行的 label.field > span 会把 display 压成 block。 */
label.field > span.pw-wrap { display: flex; align-items: stretch; gap: 8px; margin-bottom: 0; font-size: inherit; }
.pw-wrap input { flex: 1; min-width: 0; }
.pw-toggle { flex: none; padding: 0 14px; border: 1px solid #d8cbb2; border-radius: 12px; background: #fff; color: var(--ink-2); font-size: 14px; cursor: pointer; min-height: 44px; }
@media (hover:hover) { .pw-toggle:hover { background: #f7f1e4; } }
.pw-meter { display: block; margin-top: 6px; font-size: 14px; color: var(--ink-2); }
.pw-meter:empty { display: none; }
.pw-meter[data-state=short] { color: #a4622f; }
.pw-meter[data-state=ok] { color: #386455; }
.consent-details { margin-top: 18px; }
.memory-detail summary { line-height: 1.7; overflow-wrap: anywhere; }
.memory-detail summary .tag { margin-left: 8px; }
.memory-detail form { padding-top: 14px; }
.echo-widget { position: relative; z-index: 10; }
.echo-launcher { position: fixed; right: max(16px,calc((100vw - 760px)/2 + 16px)); bottom: calc(96px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 4px 16px 4px 7px; background: #172b49; color: #f5d6a1; border: 1px solid #b7996544; border-radius: 999px; box-shadow: 0 8px 25px #172b4920; cursor: pointer; font-size: 14px; }
.echo-launcher svg { width: 36px; }
.echo-panel { position: fixed; right: max(16px,calc((100vw - 760px)/2 + 16px)); bottom: calc(155px + env(safe-area-inset-bottom)); width: min(340px,calc(100vw - 32px)); max-height: min(480px,calc(100dvh - 240px)); overflow: hidden; display: flex; flex-direction: column; border-radius: 22px; background: rgba(255,253,247,.96); backdrop-filter: blur(20px); border: 1px solid #e9decb; box-shadow: 0 18px 65px #13254030; }
.echo-panel[hidden] { display: none; }
.echo-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 12px; background: #f1e8d6; flex-shrink: 0; touch-action: none; cursor: grab; }
.echo-panel-header > div { display: flex; align-items: center; gap: 6px; }
.echo-panel-header svg { width: 35px; color: #d4a969; }
.echo-panel-header strong { font-size: 14px; font-weight: 600; }
.echo-panel-header small { display: block; font-size: 14px; color: #747160; font-weight: 400; margin-top: 2px; }
.echo-panel-content { padding: 16px; overflow-y: auto; overscroll-behavior: contain; }
.echo-question { font-size: 15px; color: #263d59; line-height: 1.7; margin: 0 0 8px; }
.text-button { padding: 5px 0; background: none; border: none; font-size: 14px; color: #746444; cursor: pointer; }
.echo-consent p { font-size: 14px; line-height: 1.8; }
.echo-consent label { display: flex; align-items: center; gap: 7px; font-size: 14px; margin: 12px 0; }
.echo-reply { padding: 12px; background: #f4ecd9; font-size: 14px; border-radius: 12px; overflow-wrap: anywhere; }
.echo-pending h4 { font-size: 14px; margin: 18px 0 8px; }
.echo-memory { padding: 12px 0; border-bottom: 1px solid #e5dfd1; }
.echo-memory p { font-size: 14px; margin: 0 0 10px; overflow-wrap: anywhere; }
.echo-notice { font-size: 14px; color: #6b573b; overflow-wrap: anywhere; }
.echo-settings { display: block; font-size: 14px; margin-top: 12px; }
.echo-progress { margin-bottom: 10px; }
.echo-progress .text-button { font-size: 14px; }
.echo-thread { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.echo-bubble { margin: 0; padding: 10px 13px; border-radius: 14px; font-size: 15px; line-height: 1.65; overflow-wrap: anywhere; max-width: 90%; }
.echo-bubble.echo { background: #f4ecd9; color: #263d59; align-self: flex-start; }
.echo-bubble.me { background: #dfeede; color: #2f5348; align-self: flex-end; }
.echo-ask { border-top: 1px solid #e5dfd1; padding-top: 12px; }
.echo-options { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.echo-option { background: #fff; color: #263d59; border: 1px solid #d8cbb2; border-radius: 14px; padding: 10px 14px; font-size: 15px; min-height: 44px; cursor: pointer; text-align: left; }
@media (hover:hover) { .echo-option:hover:not(:disabled) { background: #f7f1e4; } }
.echo-option:disabled { opacity: .55; cursor: default; }
.echo-done { padding: 12px 0; }
.echo-done p { margin: 0 0 6px; font-size: 15px; color: #263d59; }
.echo-chat-entry { margin-top: 14px; }
.echo-chat-entry > summary { font-size: 14px; color: #6b573b; cursor: pointer; }
.echo-panel-modes { padding: 12px 16px 0; flex-shrink: 0; }
.echo-modes { display: flex; gap: 6px; padding: 5px; border-radius: 13px; background: #efe6d4; }
.echo-modes button { flex: 1; border: none; background: transparent; color: #6b573b; font-size: 14px; padding: 9px 8px; border-radius: 10px; cursor: pointer; min-height: 42px; line-height: 1.35; }
.echo-modes button[aria-pressed=true] { background: #fff; color: #28405f; box-shadow: 0 2px 6px #172b4910; font-weight: 600; }
.echo-bubble.guardian { background: #e8eff6; color: #22384f; align-self: flex-start; }
.guardian-disclaimer { margin: 14px 0 0; font-size: 13px; line-height: 1.7; color: #7a7364; }
@keyframes echo-breathe { 0%,100% { transform: translateY(2px) scale(.97); opacity: .85; } 50% { transform: translateY(-2px) scale(1.03); opacity: 1; } }
@media (max-width:480px) { .home-paths a { padding: 16px 12px; } .home-paths a strong { font-size: 14px; } .shore-intro { padding: 30px 18px; } }
@media (prefers-reduced-motion:reduce) { .echo-orb svg { animation: none; } }
.slot-field { margin: 16px 0; }
.slot-field > span { display: block; color: var(--ink-2); font-size: 14px; margin-bottom: 7px; }
.plan-time-picker .chips { margin-bottom: 10px; }
.match-explanation { margin-top: 10px; }
.match-explanation summary { font-size: 14px; font-weight: 400; }
.fun-tag-editor { margin: 20px 0; padding: 16px; border-radius: 16px; background: #f7f3e9; }
.fun-tag-editor h4 { margin: 0 0 8px; font-size: 15px; }
.fun-tag-editor .field { margin-top: 14px; }
.fun-tag-editor .chips button { font-size: 14px; }
.public-tags { margin: 8px 0; }
.tag.rose { background: #f7e9ec; color: #925268; }
.home-paths .date-entry { grid-column: 1 / -1; background: #faf1f0; }
.home-paths .date-entry strong { color: #704a5b; }
.dating-consent { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0; font-size: 14px; }
.dating-consent input { flex: none; margin-top: 4px; }
#dating-fields > .callout { margin: 12px 0; }
.social-goals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; }
.social-goals a { text-align: center; padding: 12px 0; border-radius: 14px; background: #ebeef3; color: var(--ink-2); font-size: 14px; text-decoration: none; }
.social-goals a[aria-current] { background: #293f60; color: #fff2ce; font-weight: 600; }
.goal-caption { margin: 14px 2px; color: var(--ink-2); font-size: 14px; }
.goal-plan-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.goal-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0; }
.goal-choices label { display: flex; gap: 8px; padding: 12px 10px; background: #f5f6f8; border: 1px solid #e1e6ef; border-radius: 14px; }
.goal-choices label:has(input:checked) { border-color: #bc9b57; background: #faf4e6; }
.goal-choices input { margin: 4px 0 0; flex: none; }
.goal-choices strong { font-size: 14px; display: block; }
.goal-choices small { display: block; font-size: 14px; color: var(--ink-2); margin-top: 5px; }

/* 明亮、轻快的页面；正文 16px，主要辅助文字 14px。 */
body { background: radial-gradient(ellipse at 15% 0,#fff2d6,transparent 45%), radial-gradient(ellipse at 90% 25%,#e6f4ef,transparent 50%),#f7f8f4; }
.app-shell { background: transparent; padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
.topbar { background: rgba(255,253,248,.94); border-color: #e6e9e5; }
.topbar h1 { font-size: 18px; }
.topbar h1 small { font-size: 12px; color: #52647a; letter-spacing: .5px; }
.brand-mark { width: 40px; height: 40px; border-radius: 14px 14px 14px 5px; background: linear-gradient(140deg,#294e6c,#17796f); }
.card { border-color: #e2e9e5; border-radius: 24px; }
.btn { font-size: 16px; min-height: 46px; border-radius: 15px; padding: 10px 17px; transition: transform .18s ease,background .18s,box-shadow .18s; }
.btn.sm { font-size: 14px; min-height: 42px; padding: 8px 12px; }
.btn:active:not(:disabled),.chip:active { transform: scale(.97); }
input[type='text'],input[type='number'],input[type='tel'],input[type='password'],select,textarea { font-size: 16px; min-height: 46px; border-radius: 14px; padding: 11px 12px; }
label.field { margin-bottom: 16px; }
label.field > span { font-weight: 500; margin-bottom: 7px; }
.chip { min-height: 40px; padding: 8px 13px; transition: transform .15s,background .15s,border-color .15s; }
.chip.on { background: #e7f2ee; border-color: #387c75; color: #235c56; }
.tag { border-radius: 9px; padding: 3px 8px; line-height: 1.5; }
.avatar { width: 46px; height: 46px; flex-shrink: 0; border-radius: 16px 16px 16px 5px; background: linear-gradient(135deg,#82b8a9,#306a79); }
.tabbar { box-shadow: 0 -6px 30px #24455609; border-radius: 24px 24px 0 0; }
.tabbar a { font-size: 15px; min-height: 88px; position: relative; padding: 12px 4px 10px; border-radius: 18px 18px 0 0; transition: color .2s,background .2s; }
.tabbar a.active { color: #235e66; background: #eaf3ef; }
.tabbar a.active::before { content: ''; position: absolute; top: 5px; left: calc(50% - 10px); width: 20px; height: 3px; border-radius: 3px; background: #639e8e; }
.tabbar a small { font-size: 14px; line-height: 1.5; }
.tabbar a span { font-size: 24px; margin-bottom: 4px; }
.shore-intro { border-radius: 32px; padding: 30px 20px; background: radial-gradient(ellipse at 75% 15%,#386c78 0%,transparent 58%),radial-gradient(ellipse at 12% 95%,#3e566d,transparent 55%),#192e4b; box-shadow: 0 16px 34px #273f6521; }
.shore-intro::before { opacity: .85; background-image: radial-gradient(circle at 14% 26%,#edcf97 0 2px,transparent 3px),radial-gradient(circle at 86% 15%,#edcf97 0 2px,transparent 3px),radial-gradient(circle at 80% 64%,#bfdcd6 0 1px,transparent 2px); }
.shore-intro::after { content: '✦'; position: absolute; right: 12%; top: 28%; color: #ebcf9d; font-size: 22px; pointer-events: none; animation: shore-twinkle 5s ease-in-out infinite; }
.shore-intro .eyebrow { font-size: 14px; letter-spacing: 2px; color: #efd3a4; }
.shore-intro h2 { font-size: clamp(28px,5vw,36px); font-weight: 600; letter-spacing: .5px; margin: 12px 0; }
[data-greeting-line] { display: inline-block; min-height: 1.5em; }
.shore-intro p { font-size: 16px; color: #e0e7ec; margin-bottom: 20px; }
.shore-footnote { color: #ced9e2; font-size: 14px; }
.echo-orb { width: 154px; height: 154px; margin: 12px auto 2px; padding: 25px; transition: transform .2s; }
.echo-orb:hover { transform: translateY(-3px); }
.echo-eyes { transform-box: fill-box; transform-origin: center; animation: echo-blink 6s infinite; }
.orb-ring { border-style: dashed; border-color: #eccc9360; inset: 10px; }
.echo-whisper { position: relative; display: inline-block; padding: 7px 16px; background: #fbecd8; color: #324b60; border-radius: 15px 15px 15px 4px; font-size: 14px; transform: rotate(-3deg); box-shadow: 0 4px 14px #0c233526; }
.greeting-skip { border: 0; background: none; color: #eddaa8; font-size: 14px; cursor: pointer; min-height: 40px; padding: 6px 12px; }
.greeting-skip[hidden] { display: none; }
.home-paths { gap: 12px; }
.home-paths a { position: relative; border-radius: 23px; border-color: #dce9e3; background: #edf6f0; padding: 20px 16px; transition: transform .2s,box-shadow .2s; }
.home-paths a:nth-child(2) { background: #edf3fb; border-color: #dce5f4; }
.home-paths a strong { font-size: 18px; line-height: 1.55; }
.home-paths a span { font-size: 14px; font-weight: 600; color: #3b7065; }
.home-paths a small { font-size: 14px; color: #506578; }
.home-paths .date-entry { background: #fff0e9; border-color: #eeddd2; }
.home-paths .date-entry span { color: #945d4f; }
.echo-space { background: linear-gradient(130deg,#e7f3ed,#fbf0df); border: 1px solid #dce8e2; border-radius: 30px; }
.echo-space h2 { font-size: 26px; font-weight: 600; }
.echo-space p { font-size: 16px; }
.space-portrait svg { animation: echo-breathe 5s ease-in-out infinite; }
.space-stats strong { font-size: 30px; }
.page-heading h2 { font-size: 26px; font-weight: 600; }
.social-goals { gap: 8px; }
.social-goals a { font-size: 16px; font-weight: 600; padding: 13px 0; border-radius: 16px; transition: transform .18s,background .18s,box-shadow .18s; }
.social-goals a:nth-child(1) { background: #e5f2e9; color: #326450; }
.social-goals a:nth-child(2) { background: #e7eefb; color: #405d84; }
.social-goals a:nth-child(3) { background: #fcf1d9; color: #77602a; }
.social-goals a:nth-child(4) { background: #faeae6; color: #935c55; }
.social-goals a[aria-current] { background: #2b5267; color: white; box-shadow: 0 5px 12px #294e6c23; }
.segment-nav a { font-size: 15px; }
.candidate-card { border-radius: 26px; }
.candidate-card > .row { align-items: flex-start; gap: 12px; }
.match-score { min-width: 62px; }
.match-score small { font-size: 14px; white-space: nowrap; }
.score { font-size: 26px; }
.score-bar { height: 7px; margin-top: 14px; }
.score-bar > i { background: linear-gradient(90deg,#9cc9a6,#528f91); }
.candidate-actions { flex-wrap: wrap; gap: 8px; }
.candidate-actions .btn { flex: 1 1 100px; }
.match-explanation summary { font-size: 15px; padding: 5px 0; }
.goal-choices { gap: 10px; }
.goal-choices label { padding: 14px 12px; }
.goal-choices strong { font-size: 17px; }
.goal-choices small { font-size: 14px; line-height: 1.65; }
.profile-menu a { min-height: 68px; }
.profile-menu a strong { font-size: 17px; }
.msg { font-size: 16px; line-height: 1.75; border-radius: 18px; padding: 11px 14px; }
.msg.mine { background: #eaf3ec; border-color: #d5e7d9; }
.chat-page { gap: 0; }
.echo-launcher { bottom: calc(106px + env(safe-area-inset-bottom)); font-size: 15px; min-height: 56px; background: #244b60; border-color: #a0c3b9; }
.echo-launcher svg { width: 40px; }
.echo-panel { right: max(12px,calc((100vw - 760px)/2 + 12px)); width: min(380px,calc(100% - 24px)); bottom: calc(172px + env(safe-area-inset-bottom)); max-height: min(560px,calc(100dvh - 220px)); border-radius: 26px; }
.echo-panel-header { padding: 14px; background: #f3e9d5; }
.echo-panel-header strong { font-size: 17px; }
.echo-panel-header small { font-size: 14px; color: #615c4b; }
.echo-panel-header svg { width: 42px; }
.echo-question { font-size: 18px; }
.echo-consent p,.echo-reply,.echo-memory p { font-size: 16px; }
.echo-consent label { font-size: 15px; align-items: flex-start; }
.echo-pending h4 { font-size: 18px; }
.echo-quick-topics { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.echo-quick-topics button { background: #edf4ed; color: #386455; border: 1px solid #cbded0; border-radius: 14px; padding: 8px 12px; font-size: 15px; min-height: 42px; cursor: pointer; }
.echo-quick-topics button[aria-pressed=true] { background: #dfeede; border-color: #72a082; }
@media (hover:hover) { .home-paths a:hover { transform: translateY(-4px); box-shadow: 0 12px 26px #28475614; } .btn:hover:not(:disabled) { transform: translateY(-2px); } .social-goals a:hover { transform: translateY(-2px); } }
@media (max-width:480px) {
  .page { padding: 14px; }
  .topbar { padding: 12px 14px; }
  .topbar .sub { max-width: 66px; }
  .home-paths { grid-template-columns: 1fr; }
  .home-paths a { gap: 6px; padding: 17px 20px; }
  .home-paths a strong { font-size: 19px; }
  .shore-intro { padding: 26px 18px; }
  .goal-choices label { gap: 7px; padding: 12px 10px; }
  .goal-choices input { margin-top: 5px; }
}
@keyframes echo-blink { 0%,43%,48%,100% { transform: scaleY(1); } 45%,46% { transform: scaleY(.12); } }
@keyframes shore-twinkle { 0%,100% { transform: translateY(0) rotate(0); opacity: .7; } 50% { transform: translateY(-7px) rotate(12deg); opacity: 1; } }
.island-heading p { margin-bottom: 0; }
.island-card { border: 1px solid #dce7df; border-radius: 30px; background: #f8fbf4; box-shadow: var(--shadow); overflow: hidden; }
.island-caption { display: flex; align-items: center; gap: 14px; padding: 20px 20px 8px; }
.island-caption strong { font-size: 18px; color: #345966; }
.island-caption p { font-size: 14px; color: var(--ink-2); margin: 4px 0 0; }
.island-pet { width: 54px; height: 54px; flex: none; color: #d6af70; background: #f6edd6; border-radius: 18px; padding: 7px; }
.island-map { position: relative; width: 100%; aspect-ratio: 720 / 780; max-height: 600px; background: #f1f4e6; isolation: isolate; }
.island-art { display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; user-select: none; }
.island-place { position: absolute; z-index: 1; transform: translate(-50%,-50%); display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 118px; min-height: 68px; border: 1px solid #fff8; border-radius: 18px 18px 18px 5px; padding: 10px 8px; background: #fffdf2f2; color: #264b55; box-shadow: 0 7px 20px #4b725220; text-align: center; text-decoration: none; cursor: pointer; transition: box-shadow .2s,background .2s; }
.island-place strong { font-size: 16px; font-weight: 700; line-height: 1.45; }
.island-place span { font-size: 14px; color: #516c65; line-height: 1.5; }
.island-house { left: 27%; top: 46%; }
.island-talk { left: 73%; top: 45%; background: #fff0e5f2; }
.island-social { left: 73%; top: 75%; background: #eff5fff2; }
.island-garden { left: 27%; top: 75%; background: #eff8e8f2; }
.island-note { padding: 16px 20px; margin: 0; font-size: 14px; color: #516557; }
.island-growth { scroll-margin-top: 90px; }
.island-growth[hidden] { display: none; }
.island-growth h3 { line-height: 1.6; }
.island-growth .space-stats { box-shadow: none; margin: 12px 0; background: #f5f8ef; }
.island-shortcuts { display: flex; flex-direction: column; padding-top: 12px; }
.island-shortcuts a,.island-shortcuts button { display: block; width: 100%; padding: 14px 0; min-height: 48px; font-size: 16px; line-height: 1.6; text-align: left; text-decoration: none; background: none; border: none; border-bottom: 1px solid var(--line); color: #345a63; cursor: pointer; }
.island-shortcuts > :last-child { border-bottom: none; }
.island-privacy { padding: 0 6px; }
@media (hover:hover) { .island-place:hover { background: white; box-shadow: 0 10px 24px #3f684033; } }
@media (max-width:360px) { .island-place { width: 108px; } .island-caption { padding: 16px 14px 8px; gap: 10px; } }
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .echo-orb:hover,.home-paths a:hover,.btn:hover,.btn:active,.chip:active,.social-goals a:hover { transform: none; }
}

/* Public introduction: a quiet story with readable copy and native scrolling. */
.app-shell.public-story {max-width:1100px;padding-bottom:0;background:#faf8f1;}
.welcome {overflow:clip;color:#233e4a;background:#faf8f1;}
.welcome-nav {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 28px;background:#142b40;color:#fff;}
.welcome-brand {display:flex;gap:12px;align-items:center;color:inherit;text-decoration:none;font-weight:650;font-size:18px;}
.welcome-brand small {display:block;font-size:12px;letter-spacing:2px;color:#ccd6dc;}
.welcome-brand .brand-mark {background:#edc58e;color:#213b4b;}
.welcome-login {color:#f6d6a7;font-size:14px;text-decoration:none;min-height:44px;display:flex;align-items:center;}
.welcome-hero {position:relative;text-align:center;min-height:calc(100svh - 88px);padding:36px 24px 34px;color:#fff5e4;background:radial-gradient(ellipse at 50% 45%,#324856 0,#142b40 62%);display:flex;flex-direction:column;align-items:center;justify-content:center;}
.welcome-kicker {font-size:14px;letter-spacing:2px;color:#d9b884;}
.welcome-orbit {position:relative;margin:28px auto 18px;width:120px;height:120px;display:grid;place-items:center;}
.welcome-orbit span {width:66px;height:66px;border-radius:50%;display:grid;place-items:center;background:#ffe0a6;color:#293e4c;font-size:30px;box-shadow:0 0 48px #f3c9846b;animation:welcome-breathe 5s ease-in-out infinite;}
.welcome-orbit i {position:absolute;inset:0;border:1px solid #ecd09a4d;border-radius:50%;transform:rotate(-25deg) scaleY(.7);}
.welcome-orbit b {position:absolute;right:0;top:30px;color:#ffdba4;}
.welcome blockquote {margin:12px 0;font-size:clamp(26px,4vw,43px);line-height:1.65;font-weight:500;letter-spacing:1px;}
.welcome-attribution {font-size:14px;color:#c2cbd0;margin:12px 0;}
.welcome-lead {font-size:18px;line-height:1.8;color:#e3e5de;margin:20px 0;}
.welcome-scroll {margin-top:20px;border:0;background:none;color:#f7d4a1;cursor:pointer;min-height:48px;font-size:16px;}
.welcome-scroll span {display:block;animation:welcome-nudge 3s ease-in-out infinite;}
.welcome-section {padding:78px 42px;max-width:860px;margin:auto;scroll-margin-top:20px;transition:opacity .7s ease,transform .7s ease;}
.welcome-step {color:#6d7e76;font-size:14px;letter-spacing:1.5px;}
.welcome h1,.welcome h2 {font-size:clamp(29px,4vw,44px);line-height:1.45;margin:20px 0 24px;letter-spacing:1px;}
.welcome-section>p {font-size:18px;line-height:1.95;max-width:650px;}
.welcome-conversation {background:#edf1e9;border:1px solid #e1e6da;border-radius:28px;padding:24px;margin-top:30px;display:flex;flex-direction:column;align-items:flex-start;gap:16px;}
.welcome-demo,.welcome-note {font-size:14px;color:#657875;line-height:1.85;}
.welcome-bubble {background:white;border-radius:22px 22px 22px 4px;padding:14px 18px;margin:0;max-width:88%;font-size:17px;box-shadow:0 5px 12px #1c493408;}
.welcome-bubble.mine {align-self:flex-end;background:#284f5f;color:white;border-radius:22px 22px 4px 22px;}
/* 抒情句逐句浮现：等所在段落进入视口后，一句一句亮起，取代原来的静态大标题。 */
.welcome .welcome-section>h1.welcome-poem {margin:10px 0 18px;font-size:clamp(23px,6vw,32px);line-height:1.45;text-wrap:balance;}
@media(min-width:761px){.welcome .welcome-section>h1.welcome-poem{margin:8px 0 12px;font-size:clamp(26px,2.4vw,38px);}}
/* 英雄区（深空蓝）到第一段（暖白）的柔和过渡，落在段首内边距里，不压到正文。 */
.welcome-section:first-of-type { position: relative; }
.welcome-section:first-of-type::before { content:''; position:absolute; left:0; right:0; top:0; height:62px; background:linear-gradient(#1b3247,#f7f8f400); pointer-events:none; }
.poem-line {display:block;opacity:0;}
.welcome-section:not(.reveal-wait) .poem-line {animation:poem-rise .95s cubic-bezier(.22,.61,.36,1) forwards;}
.welcome-section:not(.reveal-wait) .poem-line:nth-child(2) {animation-delay:.85s;}
@keyframes poem-rise {from{opacity:0;transform:translateY(12px);filter:blur(7px);}to{opacity:1;transform:translateY(0);filter:blur(0);}}
.welcome-replies {display:flex;flex-wrap:wrap;gap:10px;width:100%;}
.welcome-replies button {background:#fff;border:1px solid #cfdcd4;color:#284f5f;border-radius:999px;padding:10px 16px;font-size:15px;min-height:44px;cursor:pointer;transition:background .18s ease,transform .18s ease;}
.welcome-replies button[aria-pressed=true] {background:#284f5f;border-color:#284f5f;color:#fff;}
.welcome-replies button:disabled:not([aria-pressed=true]) {opacity:.5;}
@media(hover:hover){.welcome-replies button:hover:not(:disabled){background:#f2f6f1;transform:translateY(-1px);}.welcome-replies button[aria-pressed=true]:hover{background:#284f5f;}}
.welcome-bubble.is-typing {color:#657875;font-style:italic;}
.welcome-tinted {background:#f0efe4;border-radius:36px;}
.welcome-goals {display:flex;gap:12px;flex-wrap:wrap;margin:30px 0;}
.welcome-goals span {background:#fffaf0;border:1px solid #e2ddcc;border-radius:18px;padding:10px 16px;font-size:16px;}
.welcome-flow {list-style:none;padding:0;margin:30px 0 0;display:grid;gap:22px;}
.welcome-flow li {display:flex;gap:16px;align-items:center;}
.welcome-flow b {flex:none;width:42px;height:42px;background:#dee4d4;border-radius:14px;display:grid;place-items:center;}
.welcome-flow strong,.welcome-flow span {display:block;}
.welcome-flow span {font-size:16px;color:#657875;}
.welcome-island img {display:block;max-width:100%;height:auto;max-height:520px;margin:24px auto;border-radius:28px;}
.welcome-control {background:#eaf0e8;border-radius:36px;}
.welcome-control ul {list-style:none;padding:0;display:grid;gap:24px;}
.welcome-control li strong,.welcome-control li span {display:block;}
.welcome-control li strong {font-size:18px;}
.welcome-control li span {font-size:16px;margin-top:6px;color:#596f69;}
.welcome-end {text-align:center;padding:84px 32px 64px;background:#142b40;color:#fff5e4;margin-top:70px;transition:opacity .7s ease,transform .7s ease;}
.welcome-end>p {font-size:18px;line-height:1.9;}
.welcome-explore {display:flex;justify-content:center;gap:36px;align-items:center;max-width:320px;margin:30px auto;background:#f4ca8c;color:#203c4c;text-decoration:none;font-size:20px;font-weight:650;padding:16px 24px;border-radius:18px;box-shadow:0 5px 0 #b99560;transition:transform .16s,box-shadow .16s;}
.welcome-explore:active {transform:translateY(3px);box-shadow:0 2px 0 #b99560;}
.welcome-end .welcome-note {color:#cad2cb;font-size:14px;max-width:520px;margin:32px auto;}
.welcome-top {font-size:16px;color:#f0d19f;text-decoration:none;}
.welcome :focus-visible {outline:3px solid #dcac5e;outline-offset:6px;}
.reveal-wait {opacity:0;transform:translateY(22px);}
.feedback-text {white-space:pre-wrap;overflow-wrap:anywhere;}
.feedback-reply {background:#edf4e9;padding:16px;border-radius:16px;margin:18px 0;}
.feedback-reply p {margin-bottom:0;}
.feedback-item {margin:16px 0;}
.feedback-item small {font-size:14px;color:var(--ink-2);}
.feedback-pager {margin:20px 0;flex-wrap:wrap;}
.feedback-pager span {font-size:14px;}
.back-link {font-size:16px;}
@keyframes welcome-breathe {50% {transform:scale(1.07);box-shadow:0 0 64px #f3c98480;}}
@keyframes welcome-nudge {50% {transform:translateY(5px);}}
@media(max-width:480px){.welcome-nav{padding:14px 18px;gap:10px;}.welcome-brand{font-size:16px;gap:8px;}.welcome-login{font-size:14px;}.welcome-section{padding:56px 24px;}.welcome-tinted,.welcome-control{border-radius:28px;margin:0 12px;padding:42px 20px;}.welcome-conversation{padding:20px 16px;}.welcome-hero{padding:20px 20px 28px;}.welcome-orbit{margin:16px auto 8px;width:100px;height:100px;}.welcome blockquote{font-size:26px;}.welcome-end{padding:60px 24px 48px;}.welcome-end h2{font-size:28px;}.welcome-goals{gap:10px;}.welcome-goals span{padding:8px 12px;}}
@media(prefers-reduced-motion:reduce){.welcome *, .welcome-explore{animation:none!important;transition:none!important;}.reveal-wait{opacity:1;transform:none;}.poem-line{opacity:1!important;}}

/* Landscape introduction on computers; phones keep the vertical story. */
@media (min-width: 960px) {
  .app-shell.public-story { width: 100%; max-width: none; }
  .welcome-nav { padding: 24px clamp(40px,7vw,160px); }
  .welcome-brand { font-size: 20px; }
  .welcome-login { font-size: 16px; }
  .welcome-hero {
    min-height: max(640px,calc(100svh - 98px));
    padding: 64px clamp(40px,7vw,160px);
    display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr);
    grid-template-areas: 'kicker orbit' 'quote orbit' 'attribution orbit' 'lead orbit' 'scroll orbit';
    column-gap: clamp(36px,5vw,110px); row-gap: 12px;
    align-content: center; align-items: center; justify-items: start; text-align: left;
    background: radial-gradient(ellipse at 76% 46%,#3a505c 0,#142b40 58%);
  }
  .welcome-hero>.welcome-kicker { grid-area: kicker; font-size: 16px; }
  .welcome-hero>blockquote { grid-area: quote; font-size: clamp(38px,3.5vw,68px); line-height: 1.6; margin: 12px 0; }
  .welcome-hero>.welcome-attribution { grid-area: attribution; font-size: 16px; margin: 0; }
  .welcome-hero>.welcome-lead { grid-area: lead; font-size: 22px; margin: 22px 0 10px; }
  .welcome-hero>.welcome-scroll { grid-area: scroll; margin: 8px 0 0; padding: 0; text-align: left; font-size: 18px; }
  .welcome-scroll span { display: inline-block; margin-left: 16px; }
  .welcome-orbit { grid-area: orbit; justify-self: center; width: clamp(270px,28vw,500px); height: clamp(270px,28vw,500px); margin: 0; }
  .welcome-orbit::before,.welcome-orbit::after { content: ''; position: absolute; inset: 7%; border: 1px solid #e6c48a30; border-radius: 50%; }
  .welcome-orbit::after { inset: -8%; border-color: #e6c48a16; }
  .welcome-orbit i { border-color: #ecd09a70; transform: rotate(-25deg) scaleY(.65); }
  .welcome-orbit span { width: 43%; height: 43%; font-size: clamp(60px,6vw,108px); box-shadow: 0 0 100px #f3c98460; }
  .welcome-orbit b { font-size: 40px; top: 26%; right: 3%; }
  .welcome-section {
    max-width: none; min-height: 580px; padding: 90px clamp(40px,7vw,160px);
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    grid-template-areas: 'step visual' 'heading visual' 'copy visual';
    column-gap: clamp(50px,7vw,150px); row-gap: 14px; align-content: center; align-items: start;
    border-radius: 0;
  }
  .welcome-section>.welcome-step { grid-area: step; font-size: 16px; }
  .welcome-section>h1,.welcome-section>h2 { grid-area: heading; font-size: clamp(36px,3vw,56px); margin: 8px 0 12px; }
  .welcome-section>p { grid-area: copy; margin: 0; font-size: 20px; max-width: 620px; }
  .welcome-conversation { grid-area: visual; margin: 0; padding: 32px; align-self: center; gap: 24px; }
  .welcome-bubble { font-size: 20px; }
  .welcome-demo,.welcome-note { font-size: 16px; }
  .welcome-tinted { grid-template-areas: 'step goals' 'heading flow' 'copy flow'; }
  .welcome-goals { grid-area: goals; margin: 0 0 16px; }
  .welcome-goals span { font-size: 18px; }
  .welcome-flow { grid-area: flow; margin: 0; gap: 26px; }
  .welcome-flow strong { font-size: 20px; }
  .welcome-flow span { font-size: 18px; }
  .welcome-island { min-height: 720px; }
  .welcome-island img { grid-area: visual; width: 100%; max-height: 580px; object-fit: contain; margin: 0; align-self: center; }
  .welcome-control ul { grid-area: visual; margin: 0; align-self: center; gap: 30px; }
  .welcome-control li { padding: 20px 24px; border: 1px solid #d6e2d4; border-radius: 20px; background: #f8faf4; }
  .welcome-control li strong { font-size: 20px; }
  .welcome-control li span { font-size: 18px; }
  .welcome-end {
    margin-top: 0; min-height: 440px; padding: 76px clamp(40px,7vw,160px);
    display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr);
    grid-template-areas: 'kicker action' 'heading action' 'copy note' 'copy top';
    column-gap: clamp(50px,7vw,150px); row-gap: 14px; align-content: center; text-align: left;
  }
  .welcome-end>.welcome-kicker { grid-area: kicker; font-size: 16px; }
  .welcome-end>h2 { grid-area: heading; font-size: clamp(34px,3vw,52px); margin: 10px 0; }
  .welcome-end>p:not(.welcome-note) { grid-area: copy; margin: 0; font-size: 20px; }
  .welcome-explore { grid-area: action; width: 100%; max-width: 420px; justify-self: center; align-self: center; margin: 0; font-size: 24px; padding: 20px 28px; }
  .welcome-end>.welcome-note { grid-area: note; margin: 8px auto 0; text-align: center; font-size: 16px; max-width: 420px; }
  .welcome-top { grid-area: top; text-align: center; margin-top: 6px; }
}

/* Keep new question and conversation copy readable on phones. */
.echo-bubble,.echo-option { font-size: 16px; }

/* Four-screen companion design: warm white, champagne and deep space. */
:root{--bg:#FDFBF7;--brand:#1a2a3a;--brand-soft:#f8f0df;--ink:#1a2a3a;--line:#eae5db}
h1,h2,.ballroom h3,.companion-name{font-family:'Noto Serif SC','Songti SC','SimSun',serif}
.ballroom{position:relative;isolation:isolate;background:radial-gradient(ellipse at 50% 70%,#28415a 0,#15253d 45%,#0A1128 100%);color:#FDFBF7;border-radius:30px;padding:28px 24px;margin:20px 0;overflow:hidden;box-shadow:0 16px 42px #0a112827}
.ballroom::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(#F5D79E88 1px,transparent 1.5px);background-size:67px 83px;opacity:.5}
.ballroom .eyebrow,.ballroom a,.ballroom small{color:#F5D79E}.ballroom h3{font-size:26px;margin:8px 0}.ballroom-top p,.ballroom-foot{color:#d2dbe6}.ballroom-floor{position:relative;padding:28px 0}.ballroom-floor::before{content:'';position:absolute;left:4%;right:4%;bottom:8%;height:140px;border:1px solid #f5d79e40;border-radius:50%;box-shadow:inset 0 0 60px #e3c4890f;pointer-events:none}
.ballroom-self{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 0 32px;font-size:18px}.dance-orb{display:inline-grid;place-items:center;width:70px;height:70px;flex-shrink:0;background:radial-gradient(circle at 35% 25%,#fff4d5,#F5D79E 50%,#c09459);color:#1a2a3a;border-radius:50%;border:1px solid #fff0c1;box-shadow:0 0 38px #f5d79e55;font-size:28px;font-family:serif}
.ballroom-guests{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.ballroom-guest{display:flex;flex-direction:column;align-items:center;text-align:center;padding:18px 8px;border-radius:24px;background:#ffffff07;border:1px solid #f5d79e25;text-decoration:none;transition:background .2s,transform .2s}.ballroom-guest strong{color:#FDFBF7;font-size:19px;overflow-wrap:anywhere;margin-top:16px}.ballroom-guest span:last-child{font-size:14px;margin-top:10px}.ballroom-guest:hover{background:#f5d79e14;transform:translateY(-4px)}.ballroom-guest .dance-orb{animation:echo-float 5s ease-in-out infinite;animation-delay:var(--delay)}.ballroom-foot{font-size:14px;margin-top:20px}
.dance-back{display:inline-block;margin:8px 0}.dance-stage{text-align:center;padding:38px 24px}.dance-stage h2{font-size:27px;line-height:1.5}.dance-pair{display:flex;justify-content:center;align-items:center;gap:34px;min-height:210px}.dance-partner{display:flex;align-items:center;flex-direction:column;gap:14px;max-width:42%;font-size:16px}.dance-partner>span:last-child{overflow-wrap:anywhere}.dance-spark{color:#F5D79E;font-size:25px}.is-dancing .dance-partner:first-child{animation:waltz-left 4s ease-in-out infinite}.is-dancing .dance-partner:last-child{animation:waltz-right 4s ease-in-out infinite}.dance-score{display:flex;align-items:center;justify-content:center;gap:14px;color:#F5D79E}.dance-score strong{font-size:36px}.dance-score span{font-size:14px}.dance-status{color:#efe6d4;min-height:30px}.dance-decision .btn{min-height:52px}.dance-memory{margin-top:20px}.dance-memory details{margin-top:18px}.ballroom-entry{display:flex;align-items:center;gap:18px;padding:24px;border-radius:24px;background:#0A1128;color:#F5D79E;text-decoration:none;margin:22px 0}.ballroom-entry>span:first-child{font-size:40px}.ballroom-entry div{flex:1}.ballroom-entry strong{font-size:22px}.ballroom-entry p{color:#e2e7ef;margin:4px 0}.island-companion{font-size:38px;color:#bb914d}
.companion-home{position:relative;min-height:calc(100svh - 210px);display:flex;align-items:center;flex-direction:column;justify-content:center;text-align:center;padding:70px 24px 32px;border-radius:32px;background:radial-gradient(ellipse at 50% 45%,#f5d79e35,transparent 56%);margin-top:12px}.companion-top{position:absolute;top:12px;left:12px;right:12px;display:flex;align-items:center;justify-content:space-between;gap:12px}.companion-top .eyebrow{font-size:13px;letter-spacing:.04em}.companion-light{position:relative;flex-shrink:0;width:180px;height:180px;margin:38px 0 18px}.companion-light span{position:absolute;width:100px;height:140px;left:40px;top:20px;border-radius:50% 50% 40% 40%;background:radial-gradient(ellipse at 50% 25%,#fffdf8 0,#f5d79e99 40%,#f5d79e05 75%);filter:blur(4px);box-shadow:0 0 90px #f5d79e60;animation:projection-breathe 6s ease-in-out infinite}.companion-light i{position:absolute;inset:0;border:1px solid #e7c48566;border-radius:50%;transform:rotateX(60deg);top:100px}.companion-light b{position:absolute;right:15px;top:15px;color:#bd914f}.companion-name{font-size:28px}.companion-name small{display:block;font-family:inherit;font-size:14px;color:#777264;margin-top:4px}.companion-home h2{font-weight:400;font-size:clamp(25px,4vw,36px);line-height:1.7;margin:24px 0}.companion-talk{min-height:56px;padding:12px 38px;background:#F5D79E;color:#1a2a3a;border:1px solid #e9c689;border-radius:28px;box-shadow:0 8px 24px #c8a36622;font-size:18px}.companion-motto{font-size:15px;color:#797466;margin:30px 0 0}.companion-plans{margin-top:24px}.care-bubble{width:min(100%,460px);text-align:left;padding:20px;background:#ffffffc9;border:1px solid #ede2cd;border-radius:24px;box-shadow:0 12px 40px #c8a36618;backdrop-filter:blur(15px);margin-top:10px}.care-bubble[hidden]{display:none}.care-bubble>p:first-of-type{font-size:19px;line-height:1.6;margin:8px 0 16px}.care-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.care-options .btn{white-space:normal;padding:9px 12px;font-size:16px;border-radius:16px;min-height:48px}.care-memory-note{font-size:13px;color:#797466;line-height:1.65}.care-bubble+.companion-light{margin-top:26px}.companion-home:has(.care-bubble:not([hidden])) .companion-light{width:130px;height:120px}.companion-home:has(.care-bubble:not([hidden])) .companion-light span{width:75px;height:100px;left:28px;top:10px}.companion-home:has(.care-bubble:not([hidden])) .companion-light i{top:70px}
@keyframes waltz-left{0%,100%{transform:translate(0,0) rotate(-4deg)}50%{transform:translate(16px,-20px) rotate(6deg)}}@keyframes waltz-right{0%,100%{transform:translate(0,-16px) rotate(4deg)}50%{transform:translate(-16px,6px) rotate(-6deg)}}@keyframes projection-breathe{50%{opacity:.65;transform:translateY(-8px)}}
@media(max-width:480px){.ballroom{padding:24px 16px;border-radius:26px}.ballroom-guests{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.dance-pair{gap:14px}.dance-stage h2{font-size:24px}.companion-home{padding-left:8px;padding-right:8px}.companion-top{flex-wrap:wrap}.segment-nav a{font-size:15px}.dance-decision .row{flex-direction:column}.dance-decision .btn{width:100%}}
@media(prefers-reduced-motion:reduce){.ballroom-guest .dance-orb,.is-dancing .dance-partner,.companion-light span{animation:none!important}.ballroom-guest{transition:none}}

.dance-conversation{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}.dance-conversation p{text-align:left;font-size:16px;background:#ffffff12;border:1px solid #f5d79e33;border-radius:18px;padding:16px;margin:0}.dance-conversation strong{display:block;color:#f5d79e}.btn:focus-visible,.ballroom a:focus-visible{outline:3px solid #ae823e;outline-offset:4px}
@media(min-width:1000px){.app-shell.experience-wide{max-width:1240px}.experience-wide .tabbar{max-width:1240px}.experience-wide .companion-home{min-height:calc(100svh - 210px)}.experience-wide .ballroom-guests{grid-template-columns:repeat(4,minmax(0,1fr))}.experience-wide .island-card{max-width:780px;margin-inline:auto}.experience-wide .island-growth,.experience-wide .island-directory,.experience-wide .ballroom-entry,.experience-wide .island-future{max-width:780px;margin-inline:auto}.experience-wide .dance-stage{max-width:950px;margin-inline:auto}}
@media(max-width:480px){.dance-conversation{grid-template-columns:1fr}}

.app-shell:has(.companion-home) .echo-launcher{display:none}.companion-home:has(.care-bubble:not([hidden])){justify-content:flex-start}.companion-home:has(.care-bubble:not([hidden])) h2{margin:14px 0}.companion-home:has(.care-bubble:not([hidden])) .companion-motto{margin-top:18px}

.handover-star{display:block;font-size:38px;color:#bb914d;animation:handover-light 2s ease-out both}@keyframes handover-light{from{opacity:0;transform:translateY(12px) scale(.7)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.handover-star{animation:none}}

/* Original supplied logo, preserved without cropping or recoloring. */
.brand-mark,.welcome-brand .brand-mark{width:44px;height:44px;overflow:hidden;border-radius:12px;background:#030504}.brand-mark img{display:block;width:100%;height:100%;object-fit:contain}.welcome-orbit{width:180px;height:180px}.welcome-logo{display:block;width:100%;height:100%;object-fit:contain;border-radius:24px;box-shadow:0 0 50px #c9d7e41a}.welcome-orbit::before,.welcome-orbit::after{display:none}.login-logo{display:block;object-fit:contain;border-radius:20px;margin:0 auto 20px}.welcome-orbit{max-width:100%}@media(min-width:960px){.welcome-orbit{width:clamp(300px,32vw,520px);height:clamp(300px,32vw,520px)}}